html {margin: 0; padding: 0}
body {background: #f9fafc;color: #9fa4af;font-family: 'Maven Pro', sans-serif;font-size: 16px;margin: 0 auto;padding: 0}
@keyframes botoncolor {from {background-color: #268241;}to {background-color: #34cf64;}}
@keyframes linkcolor {from {color: #6a6a77;}to {color: #268241;}}
@keyframes acolor {from {color: #268241;}to {color: #124e24;}}
@keyframes solapacolor {from {background-color: #124e24;}to {background-color: #34cf64;}}
@keyframes solapacoloractive {from {background-color: #f9fafc;}to {background-color: #f9fafc;}}
@keyframes redcolor {from {background-color: #6a6a77;}to {background-color: #268241;}}

/*GENERALES*/
a {color: #268241}
a:hover{animation-name: acolor;animation-duration: 1s; text-decoration: none}
h1{font-size: 72px; color: #ffffff;margin: 0 0 22px; padding: 30px 0 0; line-height: 72px; }
h2{font-size: 16px; color: #ffffff;margin: 0 0 40px; padding: 0; text-transform: uppercase}
h3{font-size: 16px; color: #ffffff;margin: 0; padding: 0;}
h4{font-size: 40px; color: #4f4f6f;margin: 0; padding: 0 0 30px;}
h5{font-size: 20px; color: #4f4f6f;margin: 0; padding: 0;}
h6{font-size: 36px; color: #4f4f6f;margin: 0; padding: 0; display: block;line-height: 36px}
h7{font-weight: bold; display: block}
hr{width: 215px; height: 1px; background-color: #268241; display: block; margin: 10px 0 20px; border: none}

.boton{background-color: #268241; color: #fff; text-align: center; text-transform: uppercase; font-size: 12px; padding:10px 18px;border-radius: 25px; line-height: 16px; margin-right: 50px}
.boton:hover{ animation-name: botoncolor;animation-duration: 1s;text-decoration: none; color: #fff}
.left{float: left}
.right{float: right}
form{width: 380px; margin: 0 auto}
input[type="text"], input[type="password"], input[type="email"]{width: 360px;border-radius: 12px;border: none; font-size: 20px; padding: 15px; margin-bottom: 15px;font-family: 'Maven Pro', sans-serif;}
input[type="button"], input[type="submit"] {
    width: 360px;
    border-radius: 12px;
    border: none;
    font-size: 28px;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #268241;
    color: #fff;
    font-family: 'Maven Pro', sans-serif;
}

/*HEADER*/
header{height: 150px; background-color: #fff; width: 100%; background-image: url(../../images/pagina_publica/cooperativismo.jpg); background-repeat: no-repeat; background-position: top right; position: relative}
header .menumobile{display: none}
header .menudesktop{display: block}
header menu{margin-top: 60px; float: right; display: block}
header a{float: left;font-size: 16px; color: #6a6a77; margin: 0 20px; display: block; line-height: 35px}
header a:hover{  animation-name: linkcolor ;animation-duration: 1s;}
header a.active{color: #268241}
header a.icon {background: #268241;width:36px; display: none; height:36px; border-radius: 30px; float: right;    margin-top: 25px; padding: 0;}
header a.icon i{color:#fff; padding: 11px}
header .logo{float: left; width: 471px; height: 94px; margin: 25px 0 0}
header .logo img{width: 100%}
header a.red{width: 36px;height: 36px;background-color: #6a6a77; border-radius: 18px;color: #fff;text-align: center;margin: 0 5px}
header a.red:hover{ background-color: #268241;animation-name: redcolor ;}

/*FOOTER*/
footer{ background-color: #fff; padding: 15px; text-align: center; font-size: 14px}
footer::after{content: ".";display: block;clear: both;height: 0}
footer .right{text-align: right}
footer .left{padding-top: 20px}
footer .left, footer .right{width: 25%}
footer span{padding-top: 25px;float: left; width: 50%}

/*HOME*/
#home::after{content: ".";display: block;clear: both;height: 0}
#home #dest{width: 100%; height: 541px;text-align: center;position: relative}
#home #dest h1{position: absolute; z-index: 999; width: 100%; text-align: center; top: 80px}
#home #dest h2{position: absolute; z-index: 999; width: 100%; text-align: center; top: 200px}
#home #dest h3{position: absolute; z-index: 999;  text-align: center; top: 240px; max-width: 600px; margin-left: -300px;left: 50%}
#home #dest .boton{display: block; float: none; max-width: 100px;margin: 20px auto}
#home #dest .boton:hover{text-decoration: none; color: #fff}
#home #cont::after{content: ".";display: block;clear: both;height: 0}
#home #cont{margin:0 auto 100px; max-width: 870px}

#izq {
    width: 570px;
    float: left;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: dense;
    grid-template-rows: masonry;
    gap: 30px;
}

#izq div {
    background-color: #fff;
    border-radius: 15px;
    padding-bottom: 24px;
}

#izq div img {width: 100%; height: auto}
#izq div a { display: block; margin-left: 24px;padding-top: 24px}
#izq div span {color: #9fa4af; font-size: 13px; padding: 0 24px}
#izq div .boton {width: auto; color: #fff;float: left; display: block;padding:10px 24px; }
#izq div p {margin-bottom: 30px; padding: 0 24px}
#izq div hr {margin: 10px 24px 20px}

#der{float: right}
#der #col{width:270px;background-color: #ffffff;border-radius: 15px;padding: 24px }
#int #der #col{width:270px;background-color: #ffffff;border-radius: 15px;padding: 24px }
#der div span{color: #9fa4af; font-size: 13px; display: block}

.carousel{position: absolute;top: 0;left: 0; width: 100%;}
.carousel-item{background-color: #000!important;}
.carousel img {
    opacity: 0.4;
    object-fit: cover;
}

/*INTERNAS*/
#int{ font-size:14px; line-height: 22px; color: #4f4f6f; margin: 0 auto; padding: 0}
#int p{margin: 0 0 30px}
#int #col{float: left; width: 238px;margin-right: 20px;}
#int #cont{ max-width: 906px; padding: 0 20px; margin: 0 auto}
#int #cont::after{content: ".";display: block;clear: both;}
#int #cont #dwnld{background-color: #f7f7f7; padding: 30px; text-align: center}
#int #titu{background-color: #268241;text-align: center;padding:0; margin-bottom: 60px}
#int #titu::after{content: ".";display: block;clear: both;height: 0}
#int #titu div{width:906px; margin: 0 auto; padding: 0}
#int #titu a{ display: block; color:#fff; font-size: 20px;background-color: #124e24;border-radius: 10px 10px 0 0;margin-top: 5px; padding:15px 0;float: left;width: 220px;  margin-right: 1px}
#int #titu.tres a {width: 300px;} 
#int #titu a:hover{ animation-name: solapacolor;animation-duration: 1s;background-color: #34cf64}
#int #titu a.active, #int #titu a.active:hover{animation-name: solapacoloractive;color:#268241;background-color: #f9fafc;margin-top: 0; padding: 15px 0 21px;text-decoration: none}
.nota{margin-top: 30px!important}
.nota img{width: 100%; height: auto; margin-bottom: 24px}

.overlay { position: fixed; top: 0;bottom: 0;left: 0; right: 0;background: rgba(0, 0, 0, 0.7);transition: opacity 500ms;visibility: hidden;opacity: 0;}
.overlay:target {visibility: visible;opacity: 1;}
.popup {margin: 70px auto;padding: 20px;background: #fff;border-radius: 5px;width: 30%;position: relative;transition: all 5s ease-in-out;}
.popup h2 { margin-top: 0;color: #333;font-family: Tahoma, Arial, sans-serif;}
.popup .close { position: absolute;top: 0; right: 10px;transition: all 200ms; font-size: 40px;font-weight: bold;text-decoration: none; color: #333;}
.popup .close:hover { color: #06D85F;}
.popup .content {max-height: 30%;overflow: auto;}

.footer-login {
    position: absolute;
    bottom: 10px;
    width: 100%;
}

/* Estilos del modal de recall */
.modal-recall .modal-header {
    padding-bottom: 0;
    border: 0;
}

.modal-recall .modal-body {
    padding-top: 0
}
.modal-recall .modal-body h5 {
    margin-top: 15px;
}

.modal-recall .modal-header hr {
    margin-top: 10px 0 10px;
    padding: 0
}

@media screen and (max-width: 700px) {
    .box{ width: 70%;}
  .popup{  width: 70%;}
}

@media (max-width: 1500px) {
    header .logo {width: 300px; height: auto; margin-top: 45px; }
}


@media (max-width: 1500px){
    header { height: 91px;background-size: contain;}
    header a{font-size: 13px}
    header .logo { width: 200px; height: auto; margin: 25px 0 0 }
    header .menumobile{display: none}
    header .menudesktop{display: block}
    header menu {margin-top: 25px;}
    header a{margin: 0 10px}
    header menu a.red, header menu a.boton{display: block; margin-right: 0}
    header menu a.boton{margin-right: 30px}
    
    .footer-login { position: static; width: 100%; }
}




@media (max-width: 1020px) {
    .boton {
        margin-right: 10px !important;
        width: 150px;
        float: right;
        margin-top: 25px;
    }

    header menu {
        margin-top: 91px;
        z-index: 999;
        background-color: #e2e2e2;
        width: 100%;
        padding: 30px 0;
        margin: 0;
        display: none;
        position: absolute;
        top: 91px;
        z-index: 9999
    }
    header menu a.red{display: none}
    header .menumobile{display: block}
    header .menudesktop{display: none}
    header a { float: none;text-align: center; font-size: 16px}
    header a.icon{display: block; margin-right: 40px}
    header menu a.boton{; margin-top: 20px}

    h1{font-size: 48px; line-height: 34px; padding-bottom: 20px}
    h6{padding-bottom: 40px}
    
    #int #cont{ padding: 0 20px }
    #izq{width: 50%; float: left; margin: 0 auto}
    #izq div{margin: 0 auto 30px; float: none; width: 80%}
    #izq div .boton{ float: none}
    #der{float: right; margin: 0 auto; width:50%; padding: 0}
    #der #col{margin: 0 auto; width: 80%}
    #home #dest h1{ top: 80px}
    #home #dest h2{top: 200px;max-width: 300px; margin-left: -150px;left: 50%; top: 170px}
    #home #dest h3{ max-width: 300px; margin-left: -150px;left: 50%}
    #int #titu{height:inherit; padding-bottom: 15px;margin-bottom: 60px; padding: 20px 10px 0}
    #int #titu div{width: 100%}
    #int #titu a{ width: 24%;margin: 0;font-size: 13px;margin-right: 1%;padding: 15px 0 0;height: 50px;}
    #int #titu.tres a {width: 32%;margin: 0;font-size: 13px;margin-right: 1%;padding: 15px 0 0;height: 50px;} 
    #int #titu a:hover{ animation-name: solapacolor;animation-duration: 1s;background-color: #34cf64}
    #int #titu a.active, #int #titu a.active:hover{padding-bottom: 0}

    footer{ padding-bottom: 40px}
    footer .right{text-align: right; top: 0; margin-top: -100px;}
}

@media (max-width: 600px){
    #izq{width: 90%; float: none}
    #izq div .boton{ float: none}
    #der{width: 90%;float: none}
}

@media (max-width: 457px) {
    #headerlogo {
        content: url(/content/images/pagina_publica/logosmall.png);
    }

    header .logo {
        width: 50px;
        height: auto;
        margin: 19px 0 0;
        margin-left: 25px;
    }
    .form-control-apertura
    {
        width:auto !important;
    }
}



/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
  background-color: #777;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}


.form-control-apertura {
    font-size: 1rem !important;
    border: 1px solid #ced4da !important;
}

.btnabrircuenta {
    background-color: #6a6a77;
    padding: 10px 18px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    padding: 10px 18px;
    border-radius: 25px;
    line-height: 16px;
}

.btnabrircuenta:hover {
    background-color: #268241 !important;
    color: #fff !important;
}