@font-face {
    font-family: 'Insaniburger';
    src: url('fonts/InsaniburgerwithCheese.eot');
    src: url('fonts/InsaniburgerwithCheese.eot?#iefix') format('embedded-opentype'),
        url('fonts/InsaniburgerwithCheese.woff2') format('woff2'),
        url('fonts/InsaniburgerwithCheese.woff') format('woff'),
        url('fonts/InsaniburgerwithCheese.ttf') format('truetype'),
        url('fonts/InsaniburgerwithCheese.svg#InsaniburgerwithCheese') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Medium';
    src: url('fonts/GothamRounded-Medium.eot');
    src: url('fonts/GothamRounded-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/GothamRounded-Medium.woff2') format('woff2'),
        url('fonts/GothamRounded-Medium.woff') format('woff'),
        url('fonts/GothamRounded-Medium.ttf') format('truetype'),
        url('fonts/GothamRounded-Medium.svg#GothamRounded-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Light';
    src: url('fonts/GothamRounded-Light.eot');
    src: url('fonts/GothamRounded-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/GothamRounded-Light.woff2') format('woff2'),
        url('fonts/GothamRounded-Light.woff') format('woff'),
        url('fonts/GothamRounded-Light.ttf') format('truetype'),
        url('fonts/GothamRounded-Light.svg#GothamRounded-Light') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Book';
    src: url('fonts/GothamRounded-Book.eot');
    src: url('fonts/GothamRounded-Book.eot?#iefix') format('embedded-opentype'),
        url('fonts/GothamRounded-Book.woff2') format('woff2'),
        url('fonts/GothamRounded-Book.woff') format('woff'),
        url('fonts/GothamRounded-Book.ttf') format('truetype'),
        url('fonts/GothamRounded-Book.svg#GothamRounded-Book') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Bold';
    src: url('fonts/GothamRounded-Bold.eot');
    src: url('fonts/GothamRounded-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/GothamRounded-Bold.woff2') format('woff2'),
        url('fonts/GothamRounded-Bold.woff') format('woff'),
        url('fonts/GothamRounded-Bold.ttf') format('truetype'),
        url('fonts/GothamRounded-Bold.svg#GothamRounded-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad';
    src: url('fonts/MyriadPro-Regular.eot');
    src: url('fonts/MyriadPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/MyriadPro-Regular.woff2') format('woff2'),
        url('fonts/MyriadPro-Regular.woff') format('woff'),
        url('fonts/MyriadPro-Regular.ttf') format('truetype'),
        url('fonts/MyriadPro-Regular.svg#MyriadPro-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.navbar-dark .navbar-toggler{
background-color:rgba(86,29,127,0.8);
}
.nav-link{
    font-family: 'Gotham Bold';
    color: #561D7F;
    font-size: 1.2vw;
    padding-right: 5%;
}
.navbar-nav{
    padding-left: 8%;
}
mark{
    padding: 0px;
    margin: 0px;
}
.meta1{
    font-family: 'Gotham Bold'!important;
    color: #561D7F!important;
    font-size:2vw;
    padding-right: 30px;
}

.bg-yellow{
    background-color: #F6DC00;
}
main{
    padding-top: 100px;
    background-image: url(../images/bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
h1,h2,h3{
   font-family: 'Insaniburger'; 
}
h2{
    font-size: 5.8vw;
    color: #501688;
    line-height: 5.5vw;
}
h3{
    line-height: 2.6vw;
    font-size: 3vw;
    color: #F6DC00;
}
.btn-como{
    font-size: 1.5vw;
    font-family: 'Insaniburger'; 
    padding: 20px;
    color: white;
    background-color: #561D7F;
    border: 0px;
    margin-bottom: 15%;
}
.btn-como mark{
    background-color: transparent;
    color: white;
    font-size: 2vw;
}
#que-hacemos{
    background-color: #F6DC00;
    padding: 5% 0%;
}

#que-hacemos h2{
    color: #4BB1E0;
    background-color: #F6DC00;
    font-size: 5vw;
    margin-bottom: 5%;
}
#que-hacemos mark{
    color: #4BB1E0;
    background-color: transparent;
    font-size: 7vw;
}

#que-hacemos figure{
    cursor:pointer;
    margin: 0px;
    opacity: 0.8;
}
#que-hacemos figure:hover{
    opacity: 1;
    background-color: rgba(255,255,255,0.9)
}

p{
    font-family: 'Gotham Light';
    font-size: 2vw;
    line-height: 1.7vw;
    color: #501688;
}
#nueva-casa{
    padding: 5% 0% 10% 0%;
    background-image: url(../images/Copia%20de%20bg-casa@3x-100.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position:  center;
}

#nueva-casa h2{
    font-size: 8vw;
    line-height: 7vw;
    color: white;
}
#nueva-casa h3{
    font-size: 6vw;
    line-height: 6vw;
    color: white;
    margin-bottom: 5%;
}

#nueva-casa p{
    font-size: 3vw;
    line-height: 3vw;
    padding: 2% 0%;
    font-family: 'Gotham Bold';
}

.lista{
    font-family: 'Gotham light';
    font-size: 1.5vw;
    color: #501688;
}

#como-ayudar{
    padding: 5% 0%;
    background-color: #F6DC00;
}

#como-ayudar h2{
    color: #4BB1E0;
    font-size: 6.5vw;
}
#como-ayudar h3{
    color: #4BB1E0;
    font-size: 3vw;
    margin-bottom: 5%;
}
#como-ayudar mark{
    font-size: 8.5vw;
    color: #4BB1E0;
    background-color:transparent;
}

#como-ayudar h4{
    font-family: 'Gotham Bold';
    color: #501688;
}
#como-ayudar ul{
    list-style: decimal;
    margin-top: 30px;
}

#como-ayudar li{
    font-family: 'Gotham Book';
    color: #501688;
}

#como-ayudar button{
    border: none;
    font-family: 'Insaniburger';
    color: white;
    background-color: #501688;
}

.a2{
    display: block;
}
#arrow2{
    display: none;
}


#areas{
    padding: 5% 0%;
}
#areas h2{
    color: #4BB1E0;
    margin-bottom: 30px;
}

#areas h4{
    font-family: 'Insaniburger';
    font-size: 1.5vw;
    color: #501688;
}
#areas p{
    font-size: 1vw;
}


#areas figure{
    border:solid 10px #F6DC00;
    border-radius: 100%;
    opacity: 0.9;
    cursor: pointer;
}

#areas figure:hover{
    opacity: 1;
    -webkit-animation-name: z; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  animation-name: z;
  animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes z {
  from {transform: scale(1)}
  to {transform: scale(1.1)}
}

/* Standard syntax */
@keyframes z {
  from {transform: scale(1)}
  to {transform: scale(1.1)}
}
#area-description{
    background-color: #501688;
}

#area-description figure{
    border:solid 20px #F6DC00;
    border-radius: 100%;
    margin-bottom: 50px;
}

.titulo{
    color:#57C9E7;
}

.descripcion{
    padding: 50px 0px;
    color:#57C9E7;
}

.meta{
    font-family: 'Insaniburger';
    font-size: 6vw;
     color:#57C9E7!important;
}
.monto{
    color: white;
}

.info h4{
    font-family: 'Gotham Bold';
    color: #F6DC00;
    font-size: 2vw;
}
.info{
    font-family: 'Gotham Light';
    color: white;
    font-size: 1.3vw;
}
.info ul{
    max-height: 300px;
    overflow-y: scroll;
}


.donar{
    padding:0px;
    background-color:transparent;
    color:#F6DC00;
    border: none;
    font-family: 'Insaniburger';
    font-size: 4.5vw;
}
.regresar{
    padding:0px;
    font-family: 'Insaniburger';
    font-size: 2.7vw;
    background-color:transparent;
    color:white;
    opacity: 0.6;
    border: none;
}
.regresar:hover{
    opacity: 1;
}

.info-area{
    padding: 6% 0%;
    display: none;
}
/* width */
.info ul::-webkit-scrollbar {
  width: 20px;
}

/* Track */
.info ul::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
.info ul::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.8);
  border-radius: 10px;
}

/* Handle on hover */
.info ul::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,1);
}

#donar{
    background-color: #82C7E6;
}
#donar h2{
     padding: 10% 0%;
    color: white;
}
.CK{
    margin:30px 0px;
    width:50%;
    background-color:white;
    text-align:center;
    display:block;
    font-family: 'Insaniburger';
    font-size:2vw;
    color:#F6DC00;
}
.D{
    margin:30px 0px;
    width:50%;
    background-color:white;
    text-align:center;
    display:block;
    font-family: 'Insaniburger';
    font-size:2vw;
    color:#501688;
}
.CP{
    margin:30px 0px;
    width:50%;
    background-color:white;
    text-align:center;
    display:block;
    font-family: 'Insaniburger';
    font-size:2vw;
    color:#BE0811;
}
.formulario{
    background-color: white;
    padding: 50px;
    display: none;
}
.notificacion{
    display: none;
    text-align: center;
    margin-top: 50px;
    color: #501688;
    font-family: 'Insaniburger';
    font-size: 1.5vw;
}
.rd{
    color: #501688;
    font-size: 1.5vw;
    font-family: 'Insaniburger';
}
.enviar{
    background-color: #BF0811;
    margin: 30px 0px;
    padding: 15px 20px;
    color: white;
    font-size: 2vw;
    font-family: 'Insaniburger';
}
label{
    color: #501688;
    font-size: 1.5vw;
    font-family: 'Gotham Light';
}
b{
    font-family: 'Gotham Book';
}
p{
    color: #501688;
    font-size: 1.2vw;
    font-family: 'Gotham Light';
}

.form-control,.form-control:focus{
    font-family: 'Gotham Bold';
    color: #501688;
    font-size: 1.5vw;
    text-align: right;
    background-color: #ECEDEF;
}
.gracias{
    background-color: #F6DC00;padding-top:100px; 
}
#meta{
    background-image: url(../images/bg-meta-1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 5% 0%;
}
.m9{
    font-size:7vw;
    color: #501688;
}
.m8{
    font-size:7vw;
    color: white;
    letter-spacing: 5px;
}

.mr1{
    font-family: 'Gotham Bold';
    background-color:transparent;
    margin:0px;
    color:white;
    font-size:4vw;
    line-height:3vw;

}
.mr2{
    font-family: 'Gotham Bold';
    background-color:transparent;
    margin:0px;
    color:white;
    font-size:3vw;
    line-height:3vw;

}
.mr3{
    font-family: 'Gotham Bold';
    background-color:transparent;
    margin:0px;
    color:white;
    font-size:3vw;
    line-height:3vw;

}
.mr4{
    font-family: 'Gotham Bold';
    background-color:transparent;
    margin:0px;
    color:#F6DC00;
    font-size:3vw;
    line-height:3vw;

}
.logos{
    margin-top: 10%;
}
@media (max-width: 1550px) {
    h2{
        font-size: 5.6vw;
        color: #501688;
        line-height: 5.5vw;
    }
}

@media (max-width: 992px) {
    h2{
        margin-top: 60px;
        font-size: 11vw;
        color: #501688;
        line-height: 10vw;
    }
    h3{   
        margin-top: 50px;
        margin-bottom: 50px;
        line-height: 7vw;
        font-size: 7vw;
    }
    .btn-como{
        font-size: 4.5vw;
    }
    .btn-como mark{
        font-size: 5.5vw;
    }

    #que-hacemos h2{
        font-size: 11vw;
    }
    #que-hacemos mark{
        color: #4BB1E0;
        background-color: transparent;
        font-size: 14vw;
    }

    p{
        font-family: 'Gotham Light';
        font-size: 5vw;
        line-height: 4.5vw;
        color: #501688;
    }
    
    #nueva-casa h2{
        font-size: 16vw;
        line-height: 15vw;
    }
    #nueva-casa h3{
        font-size: 12vw;
        line-height: 12vw;
    }

    #nueva-casa p{
        font-size: 6vw;
        line-height: 6vw;
    }

    .lista{
        font-size: 3vw;
    }
    
    #area-description figure{
        border:solid 10px #F6DC00;
    }
    
    .info h4{
        font-size: 5vw;
    }
    .info{
        font-size: 3.5vw;
    }
    .titulo{
        margin-top: 0px;
    }
    .monto{
        margin: 0px 0px 50px 0px;
    }
    .donar{
        margin-top: 30px;
        font-size: 10vw;
    }
    .regresar{
        font-size:6vw;
    }
    label{
        font-size: 3.5vw;
    }
    
.CK,.D,.CP{
    font-size:5vw;
}
.notificacion{
    font-size: 3.5vw;
}
.rd{
    font-size: 4vw;
}
.enviar{
    font-size: 4vw;
}
label{
    font-size: 3.5vw;
}
p{
    font-size: 3.5vw;
}

.form-control,.form-control:focus{
    font-size: 3.5vw;
}
    #areas h4{
        font-size: 3vw;
    } #areas p{
        font-size: 2vw;
    }
    .nav-link{
    font-size: 3vw;
}
.meta1{
    font-size: 4vw;
}
}
}