html, body {
        margin: 0px;
        border: 0px;
        padding: 0px;
        box-sizing: border-box;
}

html {
        scroll-behavior: smooth;
}

.preload {
        z-index: 20;
        position: fixed;
        width: 100%;
        height: 100vh;
        background-color: #209ce9ff;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        transition: opacity 1s ease;
      }

      .preload-finish {
        opacity: 0;
        pointer-events: none;
      }

@font-face {
        font-family: Montserrat-Regular;
        src: url(typography/Montserrat-Regular.ttf);
}

@font-face {
        font-family: Montserrat-Bold;
        src: url(typography/Montserrat-Bold.ttf);
}

@font-face {
        font-family: Montserrat-Medium;
        src: url(typography/Montserrat-Medium.ttf);
}

@font-face {
        font-family: Montserrat-ExtraLight;
        src: url(typography/Montserrat-ExtraLight.ttf);
}

body {

        background-image: linear-gradient(
                to bottom,
                #4a6197ff 0px,
                #4a6197ff 850px,
                #f2f7fdff 850px
        );

        font-family: Montserrat-Regular;
}  

div.donaciones {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #ffffffff;
        border-radius: 20px;
        width: 700px;
        visibility: hidden;
        pointer-events: none;
        z-index: 6;
}

div.donaciones.donaciones-open {
        visibility: visible;
        pointer-events: all;
}

div.donaciones div.close-window {
        position: fixed;
        top: 3%;
        left: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        cursor: pointer;
}

.x-line {
        width: 40px;
        height: 3px;
        background: black;
        margin: 12px;
}

.x-line:nth-of-type(1) {
        transform: rotate(45deg);
        transform-origin: top left;
}

.x-line:nth-of-type(2) {
        transform: rotate(-45deg);
        transform-origin: bottom left;
}

div.donaciones img {
        margin-top: 30px;
}

div.donaciones p {
        margin-bottom: 50px;
        overflow-wrap: break-word;
}

div.donaciones p span {
        color: #209ce9ff;
}

h2 {
        font-family: Montserrat-Medium;
}

em {
        color: #209ce9ff;
        font-style: normal; 
}

nav div.hamburger {
        display: none;
}
        
nav {
        width: 100%;
        display: flex;
        justify-content: space-between;
}



.logo {
        margin-left: 30px;
        margin-top: 30px;
        margin-bottom: 50px;
        cursor: pointer;
}

nav ul.nav-links {
        width: 500px;  
        margin-top: 30px;
        margin-bottom: 50px;
        margin-left: 50px;
        margin-right: 30px;
        border: 0px;
        padding: 0px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        list-style: none;
}


nav ul.nav-links li {
        margin-right: 40px;
}



nav ul.nav-links li:last-child {
        margin-right: 0px;
}


nav ul.nav-links li a {
        text-decoration: none;
        color: #ffffffff;
}

nav ul.nav-links li a:hover {
        color: #dfefffff;
}


main {
        display: flex;
        justify-content: space-between;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 60px;
}

main article {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 450px;
}

main article p {
        font-family: Montserrat-ExtraLight;
        margin-bottom: 40px;
        color: #ffffffff;
        font-size: 25px;
}

main article h1 {
        font-family: Montserrat-Bold;
        margin-bottom: 30px;
        color: #dfefffff;
}

main article button {
        color: #000000ff;
        width: 110px;
        padding: 10px;
        border: 0px;
        background-color: #dfefffff;
        border-radius: 20px;
        transition: all 500ms ease;
}

main article button:hover {
        color: #ffffffff;
        background-color: #209ce9ff;
}

button {
        color: #ffffffff;
        background-color: #209ce9ff;
        width: 130px;
        padding: 10px;
        border: 0px;
        border-radius: 20px;
        cursor: pointer;
}

main img.mapaVenezuela {
        margin-right: 50px;
}

#mapadevenezuela {
        margin-bottom: 100px;
        width: 100%;
}

section.info {
        background-color: #ffffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 90%;
        margin: 0 auto;
        border-radius: 20px;
        margin-bottom: 20px;
}

#container-1 {
        display: flex;
        justify-content: space-between;
        width: 80%;
        margin-bottom: 60px;
}

#container-1 div {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 30%;
}

#container-1 div p {
        color: #8f909dff;
        font-size: 20px;
}

section.info h1 {
        font-family: Montserrat-Bold;
        text-align: center;
        width: 70%;
        margin-top: 60px;
        margin-bottom: 60px;
}


section.info-2, section.info-3 {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 130px;
}

section.info-4 {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 60%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 130px;
}

#illustration-1, #illustration-4 {
        width: 90%;
}

#illustration-2, #illustration-3 {
        width: 50%;
}

section.info-2 h1, section.info-3 h1, section.info-4 h1 {
        font-family: Montserrat-Bold;
        width: 90%;
        text-align: center;
        font-size: 35px;
}

section.info-2 p, section.info-3 p, section.info-4 p {
        font-size: 25px;
        color: #8f909dff;
}

section.info-4 p {
        text-align: center;
}

section.wallets {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 90%;
        margin: 0 auto;
        margin-bottom: 130px;
}

section.wallets div#container-2 {
        width: 40%;
}

section.wallets div#container-2 p {
        font-size: 25px;
        color: #8f909dff;  
}

section.wallets div#container-2 h1 {
        font-family: Montserrat-Bold;
        font-size: 35px; 
}

section.wallets div#container-3 {
        width: 50%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
}

section.wallets div#container-3 div {
        display: flex;
        flex-direction: column;
        width: 250px;
        text-align: center;
        align-items: center;
        justify-content: center;
        margin-bottom: 60px;
        margin-right: 30px;
        background-color: #dfefffff;
        height: 350px;
        border-radius: 36px;
        transition: all 500ms ease-in-out;
        box-shadow: 0px 1px 25px lightgray;
}  

section.wallets div#container-3 div:hover { 
        background-color: #209ce9ff;
        transform: translate(0%, -5%);
}

section.wallets div#container-3 div:hover .st0 {
        fill: #ffffff;
}

section.wallets div#container-3 div:hover h1, section.wallets div#container-3 div:hover p { 
        color: #ffffff;
}

section.wallets div#container-3 div:hover button {
        background-color: #dfefffff;
        color: #000000ff;
} 

section.wallets div#container-3 div:nth-child(n + 3) {
        margin-bottom: 0px;
}

section.wallets div#container-3 div:nth-child(2n + 2) {
        margin-right: 0px;
}

section.wallets div#container-3 div h1 {
        font-family: Montserrat-Bold;
        font-size: 35px;
}

section.binance, section.wenano {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        margin: 0 auto;
        margin-bottom: 130px;
}

section.binance ul, section.wenano ul {
        font-size: 25px;
        color: #8f909dff;       
}

section.binance h1, section.wenano h1 {
        font-family: Montserrat-Bold;
        font-size: 35px;
}

div#container-4, div#container-5 {
        width: 40%;
}

footer {
        background-color: #4a6197ff;
        padding-bottom: 30px;

}

footer div.footer {
        display: flex;
        align-content: center;
        margin-bottom: 100px;
}

footer div.footer section.nav {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
}

footer div.footer section.nav div {
        margin-top: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
}

footer div.footer section.nav div img {
        margin-bottom: 40px;
}

footer div.footer section.nav div ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: baseline;
        padding: 0px;
        margin: 0px;
        width: 100%;
        color: #ffffffff;
}

footer div.footer section.nav div ul li {
        cursor: pointer;
}

footer div.footer section.nav div ul a {
        color: #ffffffff;
        text-decoration: none;
}

footer div.footer section.contacto {
        width: 50%;
        display: flex;
        justify-content: center;
}

footer div.footer section.contacto div.contacto {
        margin-top: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
}

footer div.footer section.contacto div.contacto h1 {
        font-family: Montserrat-Medium;
        color: #ffffffff;
        margin-bottom: 30px;
        font-weight: 520;
        font-size: 35px;
}

footer div.footer section.contacto div.contacto div.iconos a {
        margin-right: 20px;
}

footer div.footer section.contacto div.contacto div.iconos a:last-child {
        margin-right: 0px;
}

footer div.footer-bottom {
        width: 80%;
        margin: 0 auto;
        text-align: center;
        color: #ffffffff;
        font-size: 20px;
}

footer div.footer-bottom a {
        color: #ffffffff;

}

@media screen and (min-width: 1680px) {
        section.wallets {
                flex-direction: column;
                align-items: center;
                justify-content: center;
        } 
        
        section.wallets div#container-2 {
                width: 90%;
                margin-bottom: 50px;
        }

        section.wallets div#container-3 {
                width: 90%;
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: center;
                justify-content: space-between;
        }  

        section.wallets div#container-3 div {
                margin-right: 0px;
                margin-bottom: 0px;
        }
}

@media screen and (max-width: 1195px) { 
        section.wallets {
                flex-direction: column;
                align-items: center;
                justify-content: center;
        }

        section.wallets div#container-2 {
                width: 90%;
                margin-bottom: 50px;
        }

        section.wallets div#container-3 {
                width: 90%;
                flex-direction: column;
                flex-wrap: nowrap;
                align-items: center;
                justify-content: center;
        }  

        section.wallets div#container-3 div {
                margin-right: 0px;
        }

        section.wallets div#container-3 div:nth-child(2n + 3) {
                margin-bottom: 60px;
        }



}

@media screen and (max-width: 1016px) { 
        section.binance {
                flex-direction: column;
                justify-content: center;
        }

        section.wenano {
                flex-direction: column-reverse;
                justify-content: center;   
        }

        div#container-4, div#container-5 {
                width: 90%;
        }

        #illustration-2, #illustration-3 {
                width: 90%;
        }
}

@media screen and (max-width: 950px) {

        div.donaciones {
                width: 500px;
        }

        div.donaciones p {
                width: 210.3px;
        }

        div.donaciones div.close-window  {
                left: 85%;
        }

        body {
                background-image: linear-gradient(
                        to bottom,
                        #4a6197ff 0px,
                        #4a6197ff 1200px,
                        #f2f7fdff 1200px
                );
        }

        nav div.hamburger {
                margin-left: 50px;
                margin-right: 30px;
                margin-top: 30px;
                margin-bottom: 50px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                cursor: pointer;
                z-index: 10;
        }    
        
        .line {
                width: 40px;
                height: 3px;
                background: white;
                margin: 3px;
                transition: all 600ms ease-in-out;
        }

        .line.x:nth-of-type(1) {

                transform: rotate(45deg);
                transform-origin: top left;
        }

        .line.x:nth-of-type(2) {
                transform-origin: center;
                width: 0px;  
        }

        .line.x:nth-of-type(3) {
                transform-origin: center;
                width: 0px;  
        }

        .line.x:nth-of-type(4) {

                transform: rotate(-45deg);
                transform-origin: bottom left;
        }


        nav ul.nav-links {
                position: fixed;
                background-color: #209ce9ff;
                height: 100vh;
                width: 100%;
                margin: 0px;
                flex-direction: column;
                justify-content: space-evenly;
                clip-path: circle(0px at 93.8% -21%); 
                -webkit-clip-path: circle(0px at 93.8% -21%); 
                transition: all 1s ease-out;
                pointer-events: none;
                z-index: 8;
        }

        nav ul.nav-links.open {
                clip-path: circle(1400px at 93.8% -21%);
                -webkit-clip-path: circle(1900px at 93.8% -21%); 
                pointer-events: all;
        }

        nav ul.nav-links li {
                margin-right: 0px;
                opacity: 0;
        }

        nav ul.nav-links li a {
                font-size: 35px;
        }

        nav ul.nav-links li:nth-child(1) {
                transition: all 1s ease 0.2s;
        }

        nav ul.nav-links li:nth-child(2) {
                transition: all 1s ease 0.4s;
        }

        nav ul.nav-links li:nth-child(3) {
                transition: all 1s ease 0.6s;
        }

        nav ul.nav-links li:nth-child(4) {
                transition: all 1s ease 0.8s;
        }

        ul.nav-links li.fade {
                opacity: 1;
        }

        main {
                justify-content: center;
                align-items: center;
                flex-direction: column;
        }

        main img.mapaVenezuela {
                width: 70%;
                margin-right: 0px;
                margin-bottom: 90px;
        }

        main article {
                width: 90%;
                justify-content: center;
                align-items: baseline;
        }


        #container-1 {
                flex-direction: column;
                justify-content: center;
                align-items: center;
        }

        #container-1 div {
                width: 100%;
        }

        #container-1 div img {
                height: 60px;
        }

}

@media screen and (max-width: 597px) {

        div.donaciones {
                width: 350px;
        }

        div.donaciones div.close-window  {
                left: 80%;
        }

        section.info-4 {
                width: 90%;
        }

        footer div.footer {
                flex-direction: column;
                align-items: center;
        }

        footer div.footer section.nav {
                width: 90%;
        }
        
        footer div.footer section.contacto {
        width: 90%;
        }
}

@media screen and (max-width: 312px) {
        nav div.hamburger {
                margin-left: 20px;
        }
}