@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,800;1,400;1,600;1,700&family=Roboto:wght@300;400;500;700;900&display=swap');

/*-----------FUENTES-----------

    font-family: 'Open Sans', sans-serif;
    font-family: 'Roboto', sans-serif;

../images/site/

---------*/

/*----------COLORES----------

BLUE: #2fc3e5; rgba(47,195,229,1);
BLACK: #282929; rgba(40,41,41,1);

---------*/

/*-------------PROPOSITO GENERAL-------------*/
body{font-size: 16px !important;font-family: 'Open Sans', serif !important;overflow-x: hidden;}
body > div{width: 100%;overflow-x: hidden;}
.row{margin: 0 !important;width: 100%;}
h1,h2,h3,h4,h5{font-family: 'Roboto', sans-serif !important;color: #282929;}
p{font-family: 'Open Sans', serif;}
hr{padding: 0;}
.titleSec{font-size: 36px;font-family: 'Roboto', sans-serif !important;margin-bottom: 40px;position: relative;font-weight: 900;color: #282929;text-align: center;text-transform: uppercase;letter-spacing: 1px;}


/*-----BACKGROUND Y COLORES-----*/
.black-bg{background: #282929;}
.blue-bg{background: #2fc3e5;}


/*------------BOTONES------------*/
a{font-family: 'Roboto', sans-serif;transition: all .3s ease;}
a:hover{text-decoration: none !important;}
.btnBlue{padding: 8px 24px;background: #2fc3e5;color: #fff;text-align: center;display: inline-block;font-size: 16px;font-weight: 600;border-radius:4px;text-transform: uppercase;letter-spacing: 1px;}
.btnBlue:hover{background: #282929;color: #fff;}
.btnWhite{padding: 8px 24px;background: #fff;color: #2fc3e5;text-align: center;display: inline-block;font-size: 16px;font-weight: 600;border-radius:4px;text-transform: uppercase;letter-spacing: 1px;}
.btnWhite:hover{background: #fff;color: #2fc3e5;opacity: .8;}

/*--- HEADER ---*/
.header {
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 10px rgb(50 50 50 / 50%);
    z-index: 1;
}
.header .menu {
    opacity: 0;
}
.header:before{content: '';position: absolute;bottom: -20px;left: -5%;width: 110%;height: 140%;background: #fff;box-shadow: 0 2px 4px rgba(0,0,0,.2);z-index: 1;transform: rotate(1deg);}
.header .col-md-12{display: flex;align-items: center;justify-content: space-between;position: relative;z-index: 2;}
.header #openMenu img{width: 40px;}
.header .logo{padding: 10px;display: flex;justify-content: flex-end;align-items: center;}
.header .logo img{width: 85%;}

/*--- BANNER ---*/
.banner .carousel-caption{text-align: center;left: 7%;top: 20%;width: 35%;display: flex;flex-direction: column;}
.banner .carousel-caption h1, .banner .carousel-caption h2{color: #282929;font-size: 32px;font-weight: 800;}
.banner .carousel-caption img{width: 200px;display: block;margin: 20px auto 30px;}
.banner .carousel-caption a {  }
.carousel-control-next, .carousel-control-prev {
    cursor: pointer; 
}

/*-------------INTRO-------------*/

.intro{position: relative;}
.intro .col-md-12{height: 500px;display: flex;justify-content: center;align-items: center;text-align: center;}
.intro .col-md-12 p{width: 72%;font-size: 20px;margin-bottom: 0;position: relative;z-index: 1;}
.intro img{position: absolute;top: 0;right: 0;height: 100%;}

/*----------BENEFICIOS----------*/

.beneficios{padding: 60px 0 0;position: relative;}
.beneficios:before{content: '';position: absolute;top: -20px;right: -5%;width: 110%;height:100%;background: #2fc3e5;transform: rotate(-1deg);}
.beneficios img{max-width: 120%;margin-left: -8%;}
.beneficios .beneInfo{padding: 30px 40px;}
.beneficios .beneInfo h2{color: #fff;text-align: left;margin-bottom: 20px;text-shadow: 0px 0px 8px rgba(0,0,0,.2);}
.beneficios .beneInfo ul{list-style: none;margin-bottom: 30px;padding-left: 0;color: #fff;}
.beneficios .beneInfo ul li{font-size: 18px;margin-bottom: 5px;}
.beneficios .beneInfo ul li:first-letter{margin-right: 10px;}

/*----------OPORTUNIDAD----------*/

.oportunidad .col-md-12{height: 400px;display: flex;justify-content: center;align-items: center;flex-direction: column;}
.oportunidad .col-md-12 h2{margin-bottom: 0px;color: #2fc3e5;}
.oportunidad .col-md-12 p{margin: 10px 0 30px;font-size: 18px;text-align: center;}

/*--- FOOTER ---*/
.footer{padding: 80px 0 10px;text-align: center;color: #fff;}
.footer .col-md-12{display: flex;flex-direction: column;justify-content: center;align-items: center;}
.footer .col-md-12 h3{margin-bottom: 20px;font-weight: 900;letter-spacing: 1px;}
.footer .col-md-12 p{margin-bottom: 10px;}
.footer .col-md-12 a{color: #fff;margin-bottom: 10px;font-size: 18px;}
.footer .col-md-12 a:hover{color: #2fc3e5;}
.footer .col-md-12 .webs{margin: 30px 0 60px;}
.credits p { font-size: 14px; }


/* RESPONSIVE */
@media ( min-width: 1600px ) {
  
    .banner .carousel-caption {
        top: 30%;
    }

}

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

  
  
}

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

  
  
}

@media screen and (max-width: 1220px) {
  
    .banner .carousel-caption{top: 15%;}
    .banner .carousel-caption h1, .banner .carousel-caption h2{font-size: 26px;}
    .banner .carousel-caption img{width: 150px;}
    
    .beneficios .beneInfo{padding: 0 30px 40px;}
    .beneficios img {max-width: 130%;margin-left: -18%;}

  
    
}

@media screen and (max-width: 990px) {
    
    
    .banner .carousel-caption h1, .banner .carousel-caption h2 {font-size: 18px;}
    .banner .carousel-caption img {width: 120px;margin: 15px auto;}
    .intro .col-md-12 p{width: 90%;font-size: 18px;}
    .intro .col-md-12 {height: 400px;}
    .beneficios .beneInfo ul li {font-size: 16px;}
    .oportunidad .col-md-12 {height: 350px;}
    .titleSec h2{font-size: 30px;}
    .beneficios img {max-width: 170%;margin-left: -60%;}
    .banner { display: none; }


}

@media screen and (max-width: 767px) {
    
    .header:before{left:0;width: 100%;transform: rotate(0deg);height: 100%;top: 0;}
    .header .logo img {width: 75%;}
    .intro .col-md-12 {height: 350px;}
    .intro .col-md-12 p {width: 100%;font-size: 16px;}
    .beneficios{padding: 60px 0;}
    .beneficios img {max-width: 80%;margin: 0 auto 40px;display: block;}
    .beneficios:before{right: 0%;width: 100%;transform: rotate(0deg);top: 0;}
    .beneInfo{padding: 0 10% !important;}
    .oportunidad .col-md-12 {height: 300px;}

  
}

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

    .titleSec{font-size: 26px;}
    .intro .col-md-12 {height: auto;padding: 60px 0;}
    .beneficios .beneInfo h2{font-size: 34px;}

  
}

@media (max-width: 585px) and (orientation: landscape) {

  
  
}

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

  
}

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


  
}