/*** === SCHRIFTARTEN === ***/

@font-face {
    font-family: "Montserrat-Regular";
    src:  url(../fonts/Montserrat/Montserrat-Regular.ttf) format("truetype");
    font-style: normal;
    font-weight: normal;
  }

  @font-face {
    font-family: "Montserrat-Medium";
    src:  url(../fonts/Montserrat/Montserrat-Medium.ttf) format("truetype");
    font-style: normal;
    font-weight: normal;
  }

@font-face {
    font-family: "Montserrat-SemiBold";
    src:  url(../fonts/Montserrat/Montserrat-SemiBold.ttf) format("truetype");
    font-style: normal;
    font-weight: normal;
  }

  @font-face {
    font-family: "Montserrat-Bold";
    src:  url(../fonts/Montserrat/Montserrat-Bold.ttf) format("truetype");
    font-style: normal;
    font-weight: normal;
  }

@font-face {
    font-family: "Montserrat-ExtraBold";
    src:  url(../fonts/Montserrat/Montserrat-ExtraBold.ttf) format("truetype");
    font-style: normal;
    font-weight: normal;
  }


@font-face {
    font-family: "Roboto-Light";
    src:  url(../fonts/Roboto/Roboto-Light.ttf) format("truetype");
    font-style: normal;
    font-weight: normal;
}  

@font-face {
    font-family: "Roboto-Regular";
    src:  url(../fonts/Roboto/Roboto-Regular.ttf) format("truetype");
    font-style: normal;
    font-weight: normal;
  }

@font-face {
    font-family: "Roboto-Medium";
    src:  url(../fonts/Roboto/Roboto-Medium.ttf) format("truetype");
    font-style: normal;
    font-weight: normal;
}


/*** === SCHRIFTARTEN END === ***/


/*** === GLOABL === ***/ 

body{
    margin: 0;
    font-family: Roboto-Regular;
    font-size: 17px;
    color: #FFFFFF;
    /*background: linear-gradient(225.52deg,#001332 0.89%,#00010d 100%);*/
    background-color: #000000;
    line-height: 1.4;
}

.content-frame {
    max-width: 1300px;
    padding-left: 20px;
    padding-right: 20px;
    margin-right: auto;
    margin-left: auto;
}

h1 {
    font-family: Montserrat-Bold;
    font-size: calc(20px + 3.5vw); 
    margin: 0;
    line-height: 1.2;
}

h2 {
    font-family: Montserrat-Bold;
    font-size: calc(20px + 2.4vw);
    margin: 0;
    line-height: 1.2;
}

h3 {
    font-family: Montserrat-Bold;
    font-size: calc(20px + 1.1vw); /*36px;*/
    margin: 0;
    line-height: 1.2;
}

h4 {
    font-family: Montserrat-Bold;
    font-size: calc(18px + 0.5vw); /*25px;*/
    margin: 0;
    line-height: 1.2;
}

h5 {
    font-family: Montserrat-Bold;
    font-size: calc(18px + 0.14vw); /*20px;*/
    margin: 0;
    line-height: 1.2;
}

h6 {
    font-family: Montserrat-Bold;
    font-size: 17px; /*17px*/
    margin: 0;
    line-height: 1.2;
}


button {
    font-family: Montserrat-Medium;
    font-size: 16px;
    background-color: transparent;
    color: #FFFFFF;
    border: 1.5px solid #4f5466;
    text-align: center;
    letter-spacing: .25px;
    text-transform: uppercase;
    padding: 12px 40px;
    border-radius: 50px;
    cursor: pointer;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

button:hover {
    border: 1.5px solid #4f5050;
    background-color: #1a1e21;
}

a {
    color: #878F9D;
    text-decoration: none;
    transition: color .15s ease-in-out;
}

a:hover {
    color: #FFFFFF;
}


input {
    width: 100%;
    background-color: transparent;
    margin-bottom: 20px;
    border: 1px solid rgba(216,216,216,.21);
    color: #FFFFFF;
    padding: 12.75px;
    font-size: 16px;
    font-family: Roboto-Regular;
    box-sizing: border-box;
    border-radius: 20px;
}

label {
    font-family: Montserrat-Bold;
    font-size: calc(18px + 0.14vw); /*20px;*/
}

textarea {
    width: 100%;
    background-color: transparent;
    margin-bottom: 20px;
    border: 1px solid rgba(216,216,216,.21);
    padding: 12.75px;
    font-size: 16px;
    font-family: Roboto-Regular;
    border-radius: 20px;
    color: #FFFFFF;
    box-sizing: border-box;
}

strong {
    font-weight: 400;
}


/*** === GLOABL END === ***/ 

/*** === HEADER === ***/
header {
    width: 100%;
    height: 75px;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
}

header img {
    height: 40px;
    width: auto;
    cursor: pointer;
}

/*** === HEADER END === ***/


/*** === INDEX === ***/

.front-first-section {
    padding-top: 176px;
    padding-bottom: 200px;
    z-index: 999;
}

.front-first-section p {
    margin-bottom: 60px;
}

.gradient-heading {
    background:#00d5ff;
    background:-webkit-linear-gradient(161deg,#00d5ff 38.99%,#3a4aff 57.62%,#7e20ff 73.47%);
    background:-moz-linear-gradient(161deg,#00d5ff 38.99%,#3a4aff 57.62%,#7e20ff 73.47%);
    background:linear-gradient(161deg,#00d5ff 38.99%,#3a4aff 57.62%,#7e20ff 73.47%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.front-video {
    border-radius: 500px;
    height: 400px;
    width: 711px;
    position: absolute;
    right: 5%;
    top: 176px;
    z-index: -5;
}

/*Second Section */
.front-second-section .content-frame{
    display: flex;
    align-items: center; /* align vertical */
    margin-bottom: 100px;
}

.front-second-section span {
    font-family: Roboto-Light;
    color: #878F9D;
    margin-right: 40px;
}

.front-second-section img {
    margin-right: 50px;
    max-width: 100%;
    width: 120px;
}

.front-bsc-logo {
    filter: invert(100%) sepia(8%) saturate(8%) hue-rotate(318deg) brightness(1500%) contrast(65%);
}

/*Third Section */
.front-third-section {
    background-color: #00091a;
    padding-top: 150px;
    padding-bottom: 150px;
}

.front-third-section .content-frame {
    text-align: center;
}

.front-third-section h2 {
    margin-bottom: 70px;
}

.front-third-section > .content-frame > p:first-of-type {
    margin-bottom: 50px;
    color: #878F9D;
}


.how-to-detail {
    padding-left: 20px;
    padding-right: 20px;
}

.how-to-detail img {
    height: 50px;
    width: 50px;
    margin-bottom: 15px;
}

.how-to-detail h5 {
    margin-bottom: 15px;
    margin-top: 0px;
}

.how-to-detail span {
    color: #878F9D;
}

/*Fourth Section */
.front-fourth-section {
    background-color: #000000;
    padding-top: 150px;
    padding-bottom: 150px;
}

.front-fourth-section .content-frame {
    text-align: center;
}

.front-fourth-section h2 {
    margin-bottom: 30px;
}

.front-fourth-section p {
    margin-bottom: 60px;
}



.front-network-container {
    display: flex;
    padding-right: 15%;
    padding-left: 15%;
}

.front-network-secondRow {
    margin-top: 20px;
}

.front-simple-network {
    width: 100%;
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    border: 1px solid #4f5466;
    border-radius: 50px;
}

.front-simple-network img {
    width: 60%;
    margin-top: 20px;
}

.front-fourth-section button {
    margin-top: 70px;
}

@media (max-width: 660px){
    .front-network-container {
        flex-direction: column;
    }

    .front-simple-network {
      margin-right: 0;
      margin-left: 0;
      margin-bottom: 20px;
    }

    .front-network-secondRow {
        margin-top: 0;
    }
}

/*Fifth Section */
.front-fifth-section {
    background-color: #00091a;
    padding-top: 150px;
    padding-bottom: 150px;
}

.front-fifth-section .content-frame {
    text-align: center;
}

.front-fifth-section h2{
    margin-bottom: 30px;
}

.front-fifth-section p:nth-child(3) {
    margin-bottom: 60px;
}

/*Sixth Section */
.front-sixth-section {
    background-color: #000000;
    padding-top: 150px;
    padding-bottom: 150px;
}

.front-sixth-section .content-frame {
    text-align: center;
}

.front-sixth-section h2 {
    margin-bottom: 30px;
}

/*Seventh Section */
.front-seventh-section {
    background-color: #00091a;
    padding-top: 150px;
    padding-bottom: 150px;
}

.front-seventh-section .content-frame {
    text-align: center;
}

.front-seventh-section h2 {
    margin-bottom: 100px;
}

.front-seventh-section h3 {
    margin-top: 70px;
    margin-bottom: 70px;
}

.question-row {
    display: flex;
    justify-content: center;
}

.question-card {
    width: 50%;
    margin-right: 20px;
    margin-left: 20px;
    text-align: left;
    margin-bottom: 30px;
}

.question-card p {
    color: #878F9D;
}

.index-instructions {
    margin-top: 70px;
}

/*Eigth Section */
.front-eight-section {
    background-color: #000000;
    padding-top: 150px;
    padding-bottom: 150px;
}

.front-eight-section .content-frame {
    text-align: center;
}

.front-eight-section h2 {
    margin-bottom: 30px;
}

.text-container {
    text-align: left;
    margin-right: 20%;
    margin-left: 20%;
}

.text-container {
    color: #878F9D;
}



@media (max-width: 1200px) {
    .front-video {
        right: 2%;
    }
}

@media (max-width: 854px) {
    .front-second-section .content-frame {
        flex-direction: column;
    }

    .front-second-section span {
        font-family: Roboto-Light;
        color: #878F9D;
        margin-bottom: 30px;
        margin-right: 0;
    }
    
    .front-second-section img {
        margin-bottom: 40px;
        max-width: 100%;
        width: 120px;
        margin-right: 0;
    }
}

@media (max-width: 700px) {
    .question-row {
        flex-direction: column;
    }

    .question-card {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        text-align: center;
    }

    .text-container {
        text-align: left;
        margin-right: 10%;
        margin-left: 10%;
    }
}

@media(max-width: 510px) {
    .how-to-detail {
        padding-bottom: 40px;
    }
}

@media (max-width: 324px) {
    .front-first-section h1 {
        font-family: Montserrat-Bold;
        font-size: calc(20px + 3vw); 
        margin: 0;
    }
}

@media (max-width: 304px) {
    .front-first-section h1 {
        font-family: Montserrat-Bold;
        font-size: calc(20px + 2.5vw); 
        margin: 0;
    }
}

@media (max-width: 286px) {
    .front-first-section h1 {
        font-family: Montserrat-Bold;
        font-size: calc(20px + 2vw); 
        margin: 0;
    }
}

/*** === INDEX END === ***/




/*** === CUSTOMIZE TOKEN PAGE === ***/
.create-first-section {
    text-align: center;
    padding-top: 80px;
    padding-bottom: 80px;
}

.create-first-section h2 {
    margin-bottom: 40px;
}

.help-banner {
    text-align: center;
    margin-bottom: 50px;
    border: 2px solid #4f5466;
    border-radius: 20px;
    padding: 5px;
}

.help-banner p {
    font-size: 15px;
}

/* Network-chooser */

.create-second-section {
    /*display: flex;
    margin-right: 15%;
    margin-left: 15%;*/
    padding-bottom: 80px;
}

.create-second-section .create-button-container {
    display: flex;
    padding-right: 15%;
    padding-left: 15%;
}

.network-secondRow {
    margin-top: 20px;
}

.create-second-section button {
    width: 100%;
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.create-second-section img {
    width: 60%;
    margin-top: 20px;
}

.network-active-tab {
    background: linear-gradient(225.52deg,#000000 0.89%,#000000 100%) padding-box,linear-gradient(to right,#00d5ff 0%,#3a4aff 50.52%,#7e20ff 100%) border-box;
    border: 2px solid transparent;
    outline: none;
}

.network-active-tab:hover {
    background: linear-gradient(225.52deg,#000000 0.89%,#000000 100%) padding-box,linear-gradient(to right,#00d5ff 0%,#3a4aff 50.52%,#7e20ff 100%) border-box;
    border: 2px solid transparent;
    outline: none;
}
/* Network-chooser end */


.create-third-section {
    background-color: #00091a;
    padding-top: 100px;
    padding-bottom: 150px;
    display: none;
}

.create-price-container {
    text-align: center;
}


.token-form-container {
    text-align: left;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 30px;
}

.token-form-container input {
    margin-top: 10px;
    margin-bottom: 30px;
}


.token-form-button-container {
    text-align: center;
    margin-top: 70px;
}

.createTokenHint {
    font-size: 13px;
    margin-bottom: 20px;
    display: block;
    color: #a5a5a5;
}

.token-burnfee {
    cursor: pointer;
}

.token-taxfee {
    cursor: pointer;
}


.token-holderfee {
    cursor: pointer;
}



/* button circle loader */
.create-form-button {
    position: relative;
}

.button__text {
    transition: all 0.2s;
  }
  
  .loader .button__text {
    visibility: hidden;
    opacity: 0;
  }
  
  .loader::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 2px dotted #ffffff;
    border-radius: 50%;
    animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
      0% { transform: rotate(0deg);}
      100% { transform: rotate(360deg);}
  }
  /* button circle loader end */

  /* Info popups */
  .burnFeeInfo {
    font-size: 15px;
    color: #a5a5a5;
    display: none;
}

.burnFeeSecondPercent {
  font-size: 15px;
}

.burnFeeInfoIcon {
    display: inline-block;
    color: #a5a5a5;
}

.burnFeeInfoIcon:hover ~ .burnFeeInfo{
  display: block;
}


.taxFeeInfo {
  font-size: 15px;
  color: #a5a5a5;
  display: none;
}

.taxFeeSecondPercent {
font-size: 15px;
}

.taxFeeInfoIcon {
  display: inline-block;
  color: #a5a5a5;
}

.taxFeeInfoIcon:hover ~ .taxFeeInfo{
display: block;
}


.holderFeeInfo {
  font-size: 15px;
  color: #a5a5a5;
  display: none;
}

.holderFeeSecondPercent {
  font-size: 15px;
}

.holderFeeInfoIcon {
  display: inline-block;
  color: #a5a5a5;
}

.holderFeeInfoIcon:hover ~ .holderFeeInfo{
display: block;
}

/* Info popups end */








.burnableInfoIcon {
    display: inline-block;
    color: #a5a5a5;
}

.burnableInfo {
    font-size: 15px;
    color: #a5a5a5;
    display: none;
}

.burnableInfoIcon:hover ~ .burnableInfo{
    display: block;
}

.mintableInfoIcon {
    display: inline-block;
    color: #a5a5a5;
}

.mintableInfo {
    font-size: 15px;
    color: #a5a5a5;
    display: none;
}

.mintableInfoIcon:hover ~ .mintableInfo{
    display: block;
}

.taxorfeeInfoIcon {
    display: inline-block;
    color: #a5a5a5;
}

.taxorfeeInfo {
    font-size: 15px;
    color: #a5a5a5;
    display: none;
}

.taxorfeeInfoIcon:hover ~ .taxorfeeInfo{
    display: block;
}

.holderInfoIcon {
    display: inline-block;
    color: #a5a5a5;
}

.holderInfo {
    font-size: 15px;
    color: #a5a5a5;
    display: none;
}

.holderInfoIcon:hover ~ .holderInfo{
    display: block;
}


.taxorfeeAppear {
    display: none;
}

.holderAppear {
    display: none;
}

.specification-customizer {
    margin-right: 5px;
    font-family: Montserrat-Bold;
    font-size: calc(18px + 0.14vw); /*20px;*/
}

.info-style {
    margin-top: 10px;
}

.form-font-styling {
    font-family: Montserrat-Bold;
    font-size: calc(18px + 0.14vw);
}

.switch-container {
    margin-bottom: 30px;
}


.switch-flex-container {
    display: inline-flex;
    align-items: center;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
    margin-right: 10px;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }



  @media (max-width: 660px){
      .create-button-container {
          flex-direction: column;
      }

      .create-second-section button {
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 20px;
      }

      .network-secondRow {
          margin-top: 0;
      }
  }


  @media (max-width: 500px) {
    .token-form-container {
        text-align: left;
        margin-left: 5%;
        margin-right: 5%;
        margin-top: 30px;
    }

    .create-second-section .create-button-container {
        padding-left: 5%;
        padding-right: 5%;
    }
}


/*** === CUSTOMIZE TOKEN PAGE END === ***/





/*** === CONTACT FORM PAGE === ***/

.contact-first-section {
    text-align: center;
    padding-top: 80px;
    padding-bottom: 60px;
}

.contact-second-section {
    text-align: center;
}

.contact-second-section input {
    margin-top: 10px;
    margin-bottom: 30px;
}

.contact-second-section textarea {
    margin-top: 10px;
}

.contact-form-container {
    text-align: left;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 30px;
}

.contact-form-button-container {
    text-align: center;
    margin-top: 50px;
}


.contact-success-text {
    display: none;
    font-family: Montserrat-Bold;
    font-size: calc(18px + 0.14vw); /*20px;*/
}


.contact-fly-out {
    -webkit-animation: cflyout 0.5s linear forwards;
      -moz-animation:    cflyout 0.5s linear forwards;
      -o-animation:      cflyout 0.5s linear forwards; 
      animation:         cflyout 0.5s linear forwards; 
    }
    @keyframes cflyout {
     0%   { 
            opacity: 1;
     }
     100% { 
         opacity: 0;
     }
    }


/*** === CONTACT FORM PAGE END === ***/




/*** === IMPRINT PAGE === ***/
.imprint-first-section {
    text-align: center;
    padding-top: 80px;
    padding-bottom: 60px;
}

.imprint-second-section {
    text-align: center;
}

.imprint-container {
    text-align: left;
    word-wrap: break-word;
}

.imprint-container a {
    word-wrap: break-word;
}

.imprint-container p {
    word-wrap: break-word;
    margin-bottom: 27.5px;
}

/*** === IMPRINT PAGE === ***/




/*** === PRIVACY POLICY PAGE === ***/

.pp-first-section {
    text-align: center;
    padding-top: 80px;
    padding-bottom: 60px;
}

.pp-second-section {
    text-align: center;
}

.PP-container {
    text-align: left;
    word-wrap: break-word;
}

.PP-container h4 {
    margin-bottom: 20px;
}

.PP-container h5 {
    margin-bottom: 20px;
}

.PP-container h6 {
    margin-bottom: 20px;
}

.PP-container p {
    margin-bottom: 27.5px;
}

.PP-container a {
    word-wrap: break-word;
}
/*** === PRIVACY POLICY PAGE END === ***/


/*** === TUTORIAL === ***/

.tutorial-section {
    /*background-color: #00091a;*/
    padding-top: 80px;
    padding-bottom: 80px;
    text-align: center;
}

.tutorial-section img {
    margin-bottom: 50px;
    max-width: 326px;
    width: 80%;
    height: auto;
}


.tutorial-section h2 {
    margin-bottom: 50px;
}

.tutorial-section h3 {
    margin-bottom: 30px;
}

.tutorial-second-section {
    background-color: #00091a;
    padding-top: 80px;
    padding-bottom: 80px;
    text-align: center;
}

.tutorial-second-section img {
    margin-bottom: 50px;
    max-width: 326px;
    width: 80%;
    height: auto;
}


.tutorial-second-section h3 {
    margin-bottom: 30px;
}

.tutorial-content-container {
    text-align: left;
    margin-left: 20%;
    margin-right: 20%
}

.tutorial-content-container strong {
    font-weight: 400;
}

.tutorial-content-container p {
    margin-bottom: 30px;
}

.tutorial-content-container li {
    margin-bottom: 10px;
}

.tut-bsc-wallpaper {
    max-width: 800px !important;
}

.tutorial-mark {
    font-family: Roboto-Medium;
}

@media (max-width: 700px) {
    .tutorial-content-container {
        text-align: left;
        margin-left: 10%;
        margin-right: 10%
    }
}

/*** === TUTORIAL END === ***/




/*** === FOOTER === ***/

.footer-section {
    text-align: center;
}

.rights-section {
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
    margin-bottom: 30px;
    margin-top: 70px;
}

.rights-section a {
    margin-right: 20px;
    margin-left: 20px;
}

.copyright-container {
    padding-top: 30px;
    margin-top: 10px;
    margin-bottom: 60px;
    border-top: 1px solid rgba(216,216,216,.21);
}

.copyright-container span {
    color: #a5a5a5;
    font-size: 14px;
}

@media (max-width: 370px) {
    .rights-section {
        flex-direction: column;
    }

    .rights-section a {
        margin-bottom: 20px;
    }
}

/*** === FOOTER END === ***/






/*** === COOKIE BANNER === ***/

.cookie-banner-container {
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0%);
    color: #FFFFFF;
    background-color: #00091a;
    display: none;
    opacity: 0;
}

.cookie-banner-container .container {
    width: 90%;
}


.cookie-banner-button-container {
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}


.cookie-button {
    font-size: 11px;
    width: 190px;
}


.cookie-banner-fly-in {
    -webkit-animation: cbflyin 1s linear forwards;
    -moz-animation:    cbflyin 1s linear forwards;
    -o-animation:      cbflyin 1s linear forwards;
    animation:         cbflyin 1s linear forwards;
}
@keyframes cbflyin {
    0%   { 
        opacity: 0;
    }
    100% { 
        opacity: 1;
    }
}


.cookie-banner-fly-out {
    -webkit-animation: cbflyout 0.5s linear forwards;
    -moz-animation:    cbflyout 0.5s linear forwards;
    -o-animation:      cbflyout 0.5s linear forwards;
    animation:         cbflyout 0.5s linear forwards;
}
@keyframes cbflyout {
    0%   { 
        opacity: 1;
    }
    100% { 
        opacity: 0;
    }
}

@media(max-width: 1630px){

    .cookie-banner-button-container {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
    }

}

@media(max-width: 1300px){

    .cookie-banner-button-container {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
    }
    
}

@media(max-width: 1080px){

    .cookie-banner-button-container {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
    }
    
}

@media(max-width: 930px){

    .cookie-banner-button-container {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
    }
    
}

@media(max-width: 810px){

    .cookie-banner-button-container {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
    }
    
}

@media(max-width: 768px){

    .mobile-cookie-button-container {
        margin-bottom: 10px;
    }
    
}

/*** === COOKIE BANNER END === ***/






/*** === POPUPS === ***/

.installMetaMaskPopup {
	width: 600px;
    position: fixed;
    top: 40%;
    left: 50%;
    padding: 30px;
    transform: translate(-50%, -50%);
    z-index: 999;
    background: linear-gradient(225.52deg,#000000 0.89%,#000000 100%) padding-box,linear-gradient(to right,#00d5ff 0%,#3a4aff 50.52%,#7e20ff 100%) border-box;
	border: 2px solid transparent;
	border-radius: 10px;
	/*vertical-align: middle;*/
	line-height: 30px;
	display: none;
	text-align: center;
}


.installMetaMaskPopup h5 {
	margin-bottom: 10px;
}

.install-Metamask-extension {
    display: none;
}

.insufficientBalancePopup {
    width: 600px;
    position: fixed;
    top: 40%;
    left: 50%;
    padding: 30px;
    transform: translate(-50%, -50%);
    z-index: 999;
    background: linear-gradient(225.52deg,#000000 0.89%,#000000 100%) padding-box,linear-gradient(to right,#00d5ff 0%,#3a4aff 50.52%,#7e20ff 100%) border-box;
	border: 2px solid transparent;
	border-radius: 10px;
	/*vertical-align: middle;*/
	line-height: 30px;
	display: none;
	text-align: center;
}


.TokenSuccessPopup {
    width: 600px;
    position: fixed;
    top: 50%;
    left: 50%;
    padding: 30px;
    transform: translate(-50%, -50%);
    z-index: 999;
    background: linear-gradient(225.52deg,#000000 0.89%,#000000 100%) padding-box,linear-gradient(to right,#00d5ff 0%,#3a4aff 50.52%,#7e20ff 100%) border-box;
	border: 2px solid transparent;
	border-radius: 10px;
	/*vertical-align: middle;*/
	line-height: 30px;
    display: none;
	text-align: center;
}

.TokenSuccessPopup a, span {
    word-wrap: break-word;
}

.TokenSuccessPopup h6 {
    margin-top: 20px;
    margin-bottom: 10px;
}


.Network-Popup {
    width: 600px;
    position: fixed;
    top: 20%;
    left: 50%;
    padding: 10px;
    transform: translate(-50%, -50%);
    z-index: 999;
    color: #ffffff;
    background: linear-gradient(225.52deg,#000000 0.89%,#000000 100%) padding-box,linear-gradient(to right,#00d5ff 0%,#3a4aff 50.52%,#7e20ff 100%) border-box;
	border: 1px solid transparent;
	border-radius: 20px;
	/*vertical-align: middle;*/
	line-height: 30px;
	display: none;
	text-align: center;
    font-family: Montserrat-Bold;
    font-size: 17px;
}

.TokenErrorPopup {
    width: 550px;
    position: fixed;
    top: 20%;
    left: 50%;
    padding: 10px;
    transform: translate(-50%, -50%);
    z-index: 999;
    color: #FFFFFF;
    background: linear-gradient(225.52deg,#000000 0.89%,#000000 100%) padding-box,linear-gradient(to right,#00d5ff 0%,#3a4aff 50.52%,#7e20ff 100%) border-box;
	border: 1px solid transparent;
	border-radius: 20px;
	/*vertical-align: middle;*/
	line-height: 30px;
	display: none;
	text-align: center;
    font-family: Montserrat-Bold;
    font-size: 17px;
}


@media (max-width: 1024px){
    .install-Metamask-extension {
        display: inline;
    }
}

@media (max-width: 700px){
	
	.installMetaMaskPopup {
		width: 300px;
		top: 30%;
	}

    .insufficientBalancePopup {
        width: 300px;
		top: 30%;
    }

    .TokenSuccessPopup {
        width: 300px;
    }

    .Network-Popup {
        width: 300px;
    }

    .TokenErrorPopup {
        width: 300px;
    }
}

@media (max-width: 400px){
	
	.installMetaMaskPopup {
		width: 250px;
		top: 30%;
	}

    .insufficientBalancePopup {
        width: 250px;
		top: 30%;
    }

    .TokenSuccessPopup {
        width: 250px;
    }

    .Network-Popup {
        width: 250px;
    }

    .TokenErrorPopup {
        width: 250px;
    }
}

@media (max-width: 330px){
	
	.installMetaMaskPopup {
		width: 200px;
		top: 30%;
	}

    .insufficientBalancePopup {
        width: 200px;
		top: 30%;
    }

    .TokenSuccessPopup {
        width: 200px;
    }

    .Network-Popup {
        width: 200px;
    }

    .TokenErrorPopup {
        width: 200px;
    }
}


.backgroundOverlay {
	background-color: transparent;
    position:fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
    display: none;
	z-index: 700;
}


.fly-in {
    -webkit-animation: flyin 4s linear forwards; 
   -moz-animation:    flyin 4s linear forwards; 
   -o-animation:      flyin 4s linear forwards;
   animation:         flyin 4s linear forwards;
 }
 @keyframes flyin {
  0%   { 	
      opacity: 0;
  }
     5%{
         opacity: 1;
     }
     90%{
         opacity: 1;
     }
  100% { 
      opacity: 0;
  }
 }
 
 
 .success-fly-in {
 -webkit-animation: sflyin 0.2s linear forwards;
   -moz-animation:    sflyin 0.2s linear forwards;
   -o-animation:      sflyin 0.2s linear forwards;
   animation:         sflyin 0.2s linear forwards;
 }
 @keyframes sflyin {
  0%   { 
         opacity: 0;
  }
  100% { 
      opacity: 1;
  }
 }
 
 
 .success-fly-out {
 -webkit-animation: sflyout 0.2s linear forwards;
   -moz-animation:    sflyout 0.2s linear forwards;
   -o-animation:      sflyout 0.2s linear forwards; 
   animation:         sflyout 0.2s linear forwards; 
 }
 @keyframes sflyout {
  0%   { 
         opacity: 1;
  }
  100% { 
      opacity: 0;
  }
 }
 
 
 
 .shadow {
   -webkit-box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
   -moz-box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
   box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
 }

/*** === POPUPS END === ***/








/* === GRID SYSTEM === */

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  
  .row::after {
    content: "";
    clear: both;
    display: block;
  }
  
  [class*="col-"] {
    float: left;
    min-height: 1px;
  }
  
  .col-1 {width: 16.666%; }
  .col-15{width: 25.000%; }
  .col-2 {width: 33.333%; }
  .col-3 {width: 50.000%; }
  .col-4 {width: 66.666%; }
  .col-6 {width: 100.00%; }
  
  
  /* === WICHTIGE BREAKPOINTS === */
  
  @media (max-width: 1024px) {
    .col-1 {width: 33.333%; }
  }

  @media(max-width: 1000px) {
    .col-1 {width: 33.333%; }
    .col-15{width: 50.000%; }
  }
  
  @media (max-width: 768px) {
    .col-1 {width: 50.000%; }
    .col-15{width: 50.000%; }
    .col-2 {width: 100.00%; }
    .col-3 {width: 100.00%; }
    .col-4 {width: 100.00%; }
  }

  @media (max-width: 500px) {
    .col-1 {width: 50.000%; }
    .col-15{width: 100.00%; }
    .col-2 {width: 100.00%; }
    .col-3 {width: 100.00%; }
    .col-4 {width: 100.00%; }
  }
  
  @media (max-width: 480px) {
    .col-1 {width: 100.00%; }
    .col-15{width: 100.00%; }
    .col-2 {width: 100.00%; }
    .col-3 {width: 100.00%; }
    .col-4 {width: 100.00%; }
  }

  /* === GRID SYSTEM END === */