﻿*{
    -webkit-transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition:         all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.img-section2{
    width:100%;
    height:200px;
    background:url(../img/fondo1.png) no-repeat;
    background-size:cover;
    background-position:center;
}


#mensaje-espere{
    display:none;
    color:#009eed !important;
}

#mensaje-listo{
    display:none;
    color:#009eed !important;
}


.img-section3{
    width:100%;
    height:200px;
    background:url(../img/fondo2.png) no-repeat;
    background-size:cover;
    background-position:center;
}

.section1 h1, .section1 h2, .section1 p{
    text-align:center;
}

.section2 h1, .section2 h2, .section2 p{
    text-align:right;
}

.section3 h1, .section3 h2, .section3 p{
    text-align:right;
}

.section4 h1, .section4 h2, .section4 p{
    text-align:left;
}

.iconlogo{
    background-image:url('../img/logocb.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 5.15px 1px 1px 1px;
    width: 60px;
    height: 46px;
    z-index: 1;
}

.boton-app{
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 4px;
    color: white;
    padding: 14px 21px;
    background: #009eed;
    font-family: roboto;
    font-size: 16px;
    position:relative;
    top:0px;
}

.boton-app:hover{
    transform: scale(1.2);
}

.laprimera{
    color: white;
    font-weight: bold;
    opacity: 0;
    /* transform:translate(70.2%,-10%); */
    font-size: 40.5px !important;
    text-align: left !important;
}

.aproximate{
    font-size: 127px !important;
    color:#48B8F0;
    font-family:sources !important;
    opacity: 0;
    padding: 0;
    margin: 0;
}

.p-arriba{
    font-size:18px;
    color: black;
}

.section6{
    height: 155px;
    line-height: 40px;
}

.setion6 li p{
    transform: translate(10%,8%);
    font-size: 22px !important;
    text-align: justify;
}
.p-arriba li{
    height: 110px;
}

.p-arriba li p{
    color:black;
    font-size: 18px;
    text-align: justify;
    /* transform: translate(5%,-85%); */
}

.section1{
    padding-top:70px;
    z-index: 0;
    background-image: url('../img/farm-section3.png');
    background-size: cover;
}

.back3{
    z-index: 0;
    background-image: url('../img/farms-section4.png');
    background-size: cover;
}

.shadow{
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.658);
}

.slimScrollDiv{
    z-index: 0;
}


.section2{
    padding-top:35px;
    z-index: 0;
    /* background-image: url('../img/farm-section2.jpg'); */
    background-size: cover;
    background-position: 50%;
}

.section3{
    padding-top:80px;
}

.pantalla{
    background: url(../img/tv.png) no-repeat;
    background-size: 100%;
    padding: 40px 50px !important;
}

.icono-check{
    color:#009eed;
}

.orderlii{
    padding: 0%;
    height: 139px;
    font-size: 17px !important;
}

.orderlii li{
    height: 28%;
}

.orderlii li p{
    transform: translate(3%, -95%);
    font-size: 20px;
}

.orderlii li p i{
    font-size: 15px !important;
    margin-right: 5px !important;
}
.section4{
    padding-top: 55px;
}


.section4a{
    background-image: url('../img/farm-section2.png');
    background-size: cover;
    background-position: 50%;   
}

.section4B{
    background-image: url('../img/farm-section1.png');
    background-size: cover;
    background-position: 50%;   
    z-index: 0;
    padding-top: 90px;
}

.section4B h1{
    color:#ffffff;
}


.partners{
    width:500px;
    position:absolute;
    right:30px;
    bottom:10px;
    z-index:0;
}

.cel1{
    position:fixed;
    height:96%;
    bottom:-100%;
    left:30px;
    z-index:0;
    -webkit-transition: all 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition:         all 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.cel2{
    position:fixed;
    height:76%;
    bottom:-100%;
    left:30px;
    z-index:0;
     -webkit-transition: all 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition:         all 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.cel3{
    position:fixed;
    height:65%;
    bottom:-50%;
    left:-700px;
    opacity: 1;
    z-index:0;
     -webkit-transition: all 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition:         all 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
  
}

.cel4{
    left: 200%;
    height: 103%;
    width: 103%;
    top: 14%;
    position: absolute;
    opacity: 1;
    z-index: 1;
     -webkit-transition: all 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition:         all 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
  
}

.malltopic{
    color:#009eed;
    font-size: 45px;
    font-weight: bold;
}


@keyframes escribir {
    from { width: 100%; color: black;}
    to { width:0 }
}

.loguito-mt{
    width:80px;
}


.becon{
    position:fixed;
    opacity: 1;
    height:75%;
    bottom:-100%;
    right:-45px;
    z-index: 1;
    -webkit-transition: all 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition:         all 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.img-section4{
    width:100%;
    height:200px;
    background:url(../img/fondo3.png) no-repeat;
    background-size:cover;
    background-position:center;
}

.img-section5{
    width:100%;
    height:200px;
    background:url(../img/fondo4.png) no-repeat;
    background-size:cover;
    background-position:center;
}

.img-section6{
    width:100%;
    height:200px;
    background:url(../img/fondo5.png) no-repeat;
    background-size:cover;
    background-position:center;
}

.img-section7{
    width:100%;
    height:200px;
    background:url(../img/fondo6.jpg) no-repeat;
    background-size:cover;
    background-position:center;
}

.mascara{
    width:450px;
    height:auto;
    display:block;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    overflow:hidden;
    margin-top:150px;
}

.ppequeno{
    font-size: 22px; 
    color: white;
}

.roboto{
    font-family:roboto !important;
}

.sele{
    font-family:robotoBold;
    color:#139BC1;
}

.textura{
     background: url(../img/textura.jpg);
 background-repeat:repeat;
 background-position: center, center;
 -webkit-text-fill-color: transparent;
 -webkit-background-clip: text;
}

.logo-principal{
    width:190px;
    height:auto;
    margin-bottom:20px;
    display:block;
    margin-left:auto;
    margin-right:auto;
}

.texto-cargador{
    font-family:titulo;
    font-size:22px;
    color:#139BC1;
    opacity:0;
    position:relative;
    top:50px;
    -webkit-transition: all 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition:         all 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.suma2{
    opacity:0;
    -webkit-transition: all 2000ms cubic-bezier(0.86, 0, 0.07, 1);
  transition:         all 2000ms cubic-bezier(0.86, 0, 0.07, 1);
}

.campo-principal{
    margin-top:20px;
    width:550px;
    height:50px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    background:white;
    margin-bottom:60px;
}

.input-principal{
    width:80%;
    float:left;
    height:100%;
    border:none;
    padding:18px;
    font-family:roboto;
    font-size:16px;
}

.boton-campo{
    width:20%;
    float:left;
    height:100%;
    background:#139BC1;
    font-family:titulo;
    border:none;
    color:white;
}

.boton-general{
    padding:10px 16px;
    background:#139BC1;
    font-family:titulo;
    border:none;
    color:white;
}

.hover-seccion{
    width:100%;
    height:auto;
    position:absolute;
    bottom:20px;
    opacity:0.5;
    z-index:0;
    display:none;
}

.hover-seccion:hover{
    opacity:1;
}

.hover-seccion:hover .boton-munki-block{
    background: #139BC1;
}

.boton-munki-block{
    padding: 10px 16px;
    background: #f9be00;
    font-family: titulo;
    border: none;
    color: white !important;
    display: block;
    width: 100% !important;
    text-align: center;
    position: relative;
    top: 0px;
    margin-bottom: 4px;
    border: 2px solid white;
}

.boton-munki-block:hover{
    top:-3px;
}


.apps{
    position:absolute;
    bottom:0px;
    left:50%;
    margin-left:-280px;
    width:600px;
}



.menu-principal{
    margin-top:80px;
    width:500px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    top:-100px;
}

.menu-principal li{
    text-align: center;
    color: white;
    font-size: 18px;
    padding: 15px;
    border-bottom: 2px solid white;
    cursor: pointer;
    position: relative;
    left: 0px;
}

.logo-menu{
    width:200px;
    position:absolute;
    bottom:-100px;
    left:50%;
    margin-left:-100px;
}

.menu-principal li:hover{
    left:-30px;
}

.bajar{
    font-size:24px;
    color:rgba(225,225,225,0.6);
    text-align:center;
}

.rayita{
    width:100%;
    height:3px;
    background:white;
    margin-bottom:5px;
}

.boton-menu-pagina{
    width:40px;
    height:40px;
    position:fixed;
    z-index:0;
    right:30px;
    top:30px;
    cursor:pointer;
}

.logo-esquina{
    position:fixed;
    top:30px;
    left:30px;
    z-index:0;
    width:160px;
    opacity:0;
}

.bajar-paso1{
    position:relative;
    top:60px;
    opacity:0;
}

.bajar-paso2{
    position:relative;
    top:60px;
    opacity:0;
}

.bajar-paso3{
    position:relative;
    top:60px;
    opacity:0;
}

.txt-amarillo{
    color:#fef800;
}

.linea-paso{
    width:100%;
    position:absolute;
    top:0px;
    left:0px;
    transform:scale(0.7);
    -webkit-transform:scale(0.7);
    -moz-transform:scale(0.7);
    z-index:0;
}

.beneficios h3{
    font-size:24px;
    color:#FEF800;
    text-align:center;
}

.beneficio img{
    width:70px;
    margin-bottom:0px;
    display:block;
    margin-left:auto;
    margin-right:auto;
}

.beneficios{
    padding:30px;
}

.txt-azul-claro{
    color:#009eed;
    font-weight: bold;
}

.txt-gris{
    color:#1b1b1b;
}



.txt-azul-oscuro{
    color:#009eed;
}

.numero-cobertura{
    font-family: robotoLight;
    font-size: 50px;
    margin-bottom: 0px !important;
    line-height: 40px;
}

.section-beneficios{
    background:#60ded2;
}

.section-video{
    background:#f9be00;
    padding-top:80px;
}

.beneficio{
    width:100%;
    height:auto;
    padding:30px 20px;
    background:#1C3B57;
    -webkit-box-shadow: 0px 0px 0px -6px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 0px -6px rgba(0,0,0,1);
box-shadow: 0px 0px 0px -6px rgba(0,0,0,1);
position:relative;
top:0px;
border-radius:4px;
}

.bajar-beneficio{
    margin-top:85px;
}

.beneficio:hover{
    -webkit-box-shadow: 0px 20px 0px -6px rgba(0,0,0,0.20);
    -moz-box-shadow: 0px 20px 0px -6px rgba(0,0,0,0.20);
    box-shadow: 0px 20px 0px -6px rgba(0,0,0,0.20);
    top:-20px;
}

.seccion-regularp{
    padding-top:80px;
}

.paso{
    width:220px;
    height:auto;
    display:block;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}


.paso-foto{
    width:100%;
    transform:scale(1);
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
}

.paso-foto:hover{
    transform:scale(1.1);
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
}

.titulo-pagina{
    font-size:30px !important;
}

.pasos{
    width:100%;
    height:90%;
    padding:80px 0px;
    position:relative;
    background:#009eed;
    -webkit-clip-path: polygon(100% 0,100% 89%,50% 100%,0 89%,0 0);
    clip-path: polygon(100% 0,100% 89%,50% 100%,0 89%,0 0);
}

.boton-menu-pagina:hover{
    top:25px;
}

.input-normal{
    width: 100%;
    margin: 0px;
    padding: 8px 10px 8px 10px;
    font-size: 16px;
    border: none;
    border-bottom: 2px solid #009eed;
}

.select-normal{
     width: 100%;
    margin: 0px;
    padding: 8px 10px 8px 10px;
    font-size: 16px;
    border: none;
    border-bottom: 2px solid #009eed;
}

.input-normal:focus{
    padding: 8px 10px 8px 20px;
    border-bottom: 2px solid #1c3b57;
}

.select-normal:focus{
    padding: 8px 10px 8px 20px;
    border-bottom: 2px solid #1c3b57;
}

.check-normal input{
    width:20px;
    height:20px;
    position:relative;
    top:4px;
}

.radio-normal input{
    width:20px;
    height:20px;
    position:relative;
    top:4px;
}

.texto-campo{
    font-size:14px;
    font-family:roboto;
    margin-bottom:0px;
}

.error .texto-campo{
    font-size:14px;
    font-family:roboto;
    margin-bottom:0px;
    color:red;
}

.error .input-normal{
    border-bottom:2px solid red !important;
}

.error .select-normal{
    border-bottom:2px solid red !important;
}

.alerta .select-normal{
    border-bottom:2px solid orange !important;
}

.exito .select-normal{
    border-bottom:2px solid green !important;
}

.alerta .texto-campo{
    font-size:14px;
    font-family:roboto;
    margin-bottom:0px;
    color:orange;
}

.alerta .input-normal{
    border-bottom:2px solid orange !important;
}

.exito .texto-campo{
    font-size:14px;
    font-family:roboto;
    margin-bottom:0px;
    color:green;
}

.formulario h1, .formulario h2, .formulario h3{
    margin-top:5px;
    margin-bottom:5px;
    padding:0px;
}

.cuadro-senal{
    width: 100%;
    height: auto;
    padding: 14px 18px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.senal-alerta{
    border:1px solid orange;
    background:rgba(255,165,0,0.3);
    color:#ad7000;
}

.senal-exito{
    border:1px solid green;
    background:rgba(56,211,24,0.3);
    color:green;
}

.senal-error{
    border:1px solid red;
    background:rgba(255,0,0,0.3);
    color:#b90000;
}

.senal-neutro{
    border:1px solid #009eed;
    background:rgba(0,158,237,0.3);
    color:#006598;
}

.formulario p{
    margin-bottom:0px;
}

.txt-alerta{
    color:orange !important;
}

.txt-error{
    color:red !important;
}

.txt-exito {
    color: green !important;
}

.txt-neutro {
    color: #006598 !important;
}

.exito .input-normal{
    border-bottom:2px solid green !important;
}



.input-group{
        width: 100%;
        margin-bottom:20px;
}

.servicios{
    width:90%;
    height:auto;
    display:block;
    margin-left:auto;
    margin-right:auto;
    border-radius:200px;
    margin-bottom:20px;
}

.servicios img{
    width:100%;
    opacity:0;
    transform:scale(0.8);
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
}

.text-app{
    width:60%;
    display:block;
    margin-left:auto;
    margin-right:auto;
}

.experto{
    width:220px;
    position:fixed;
    left:15px;
    bottom:0px;
    z-index:0;
    opacity:0;
}

.servicios img:hover{
    opacity:1;
    transform:scale(1.2);
    -webkit-transform:scale(1.2);
    -moz-transform:scale(1.2);
}

.servicios:hover{
    margin-bottom:40px;
}

.slide{
    padding-top:50px;
}

.cuadro-senal .glyphicon {
    top: 4px;
    color: black;
}

.cuadro-senal i{
    font-size:20px;
    padding:0px;
    margin:0px;
}

.numero-paso{
    text-align:center;
    font-size:30px;
    color:#1C3B57;
    position:relative;
    top:-60px;
    z-index:0;
    opacity:0;
    display:none;
}

.elpaso:hover .numero-paso{
    position:relative;
    top:-10px;
    opacity:1;
    
}

.menu-pagina{
    width:100%;
    height:100%;
    background:#009eed;
    z-index:0;
    position:fixed;
    opacity:0;
    display:none;
}

.boton-index{
    display:block;
    margin-left:auto;
    margin-right:auto;
}

.suma{
    width:100%;
    height:100%;
    position:absolute;
    background:url(../img/back-mascara.png);
    background-size:cover;
    top:150%;
    z-index:0;
    transform:rotate(180deg);
   -webkit-transition: all 1800ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition:         all 1800ms cubic-bezier(0.215, 0.61, 0.355, 1);
  border-radius:50%;
}

.pantalla-cargador{
    width:100%;
    height:100%;
    z-index:0 !important;
    position:fixed;
    background:white;
    opacity:1;
     -webkit-transition: all 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition:         all 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transform:scale(1)
}

/*body{
    background:url(../img/back1.png) no-repeat;
    background-size:cover;
    background-position:center;
}*/

body{
    background:url(../img/geometry.png);
}

.parrafo-0{
    margin-bottom:0px;
    color: white;
    font-weight: bold;
    font-size: 18px;
}

.indicativos{
    width:100%;
    height:auto;
    position:absolute;
    bottom:20px;
}

.svgli{
    width: 10%;
    transform: translate(1006%,-98%);
    opacity: 0;
}

.poss.animate{
    animation: animate 2s cubic-bezier(.5,.5,.53,.54); 
    animation-fill-mode: forwards;
} 

.poss li{
    height: 65px;
}

.poss {
    margin-top: 5%;
}

.poss li p{
    opacity: 0;
}

.flechitas{
    display:block;
    margin-left:auto;
    margin-right:auto;
    top: 8%;
    width:35px;
}

.video{
    position:fixed;
    width:100%;
    height:100%;
    z-index:0;
    opacity:1;
      -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  transition:         all 700ms cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.section-servicios{
    padding-top:160px;
    background:#1c3b57;
}

.bajar-servicios1{
    position:relative;
    top:60px;
    opacity:0;
}
.bajar-servicios2{
    position:relative;
    top:60px;
    opacity:0;
}
.bajar-servicios3{
    position:relative;
    top:60px;
    opacity:0;
}
.bajar-servicios4{
    position:relative;
    top:60px;
    opacity:0;
}
.bajar-servicios5{
    position:relative;
    top:60px;
    opacity:0;
}
.bajar-servicios6{
    position:relative;
    top:60px;
    opacity:0;
}



.section-pasos{
    background:#f9be00;
}



a{
    color:inherit !important;
}

.nombre-testimonio {
    margin-bottom: 0px !important;
    color:#009eed;
}

.testimonio{
    width:100%;
    height:auto;
    padding:30px 20px;
    background:white;
    border-radius:3px;
}

.datos-cobertura{
    width:100%;
    height:auto;
    padding:20px 0px;
    background:#f2f2f2;
    margin-bottom:10px;
}

.formstyles p{
    margin-bottom: 0px;
    padding-bottom: 2px;
    color: white;
    font-size: 21px;
}

.formstyle input{
    height: 25%;
    padding: 5px 0px;
    width: 100%;
    border: 0px;
    color : black;
    border-radius: 5px;
    font-weight: 900;
    background-color: rgba(202, 199, 199, 0.822);

}

.formstyle p{
    margin-bottom: 0px;
    padding-bottom: 2px;
    color: black;
    font-size: 18px;
    font-weight: bold;
}

.foto-testimonio{
    width:90px;
    height:90px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
    border-radius:150px;
}

.icono-contacto{
    font-size:50px;
    color:#f9be00;
}

.section-testimonios{
   padding-top:60px;
   background:#69e5f9;
}

.section-cobertura{
   padding-top:60px;
   background:#cd8ce8;
}



.section6{
    background:url(../img/fondo5.png) no-repeat;
    background-size:cover;
    background-position:center;
}

.section7{
    background:url(../img/fondo6.jpg) no-repeat;
    background-size:cover;
    background-position:-200px;
}

.section8{
    background:#A22C79;
    background-size:cover;
    background-position:-200px;
     padding: 80px 0px !important;
}
.section-contacto{
    background:#1b1b1b;
    padding: 80px 0px !important;
    position: relative;
}


.footer{
    width:100%;
    height:auto;
    position:absolute;
    bottom:80px;
}

.section-contacto h2, .section-contacto p{
    color:white !important;
    margin-bottom:0px !important
}

.logo-total{
    height:70px;
    position:relative;
    top:-10px;
}

.mapa{
    width:100%;
    height:310px;
}

.redes{
    width:50px;
    height:auto;
    position:fixed;
    left:-1px;
    top:45%;
    z-index:0
}

.facebook{
    width:50px;
    height:50px;
    margin-bottom:10px;
    position:relative;
}

.facebook:hover{
    left:5px;
}

.insta:hover{
    left:5px;
}

.facebook img, .insta img{
    width:100%;
}

.insta{
    width:50px;
    height:50px;
    background:blue;
    position:relative;
}

.menu{
    opacity:0;
    display:none;
    -webkit-transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition:         all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.contenedor-amarillo {
    background: #fe5d0f;
    position: relative;
    padding: 80px 10px 50px 50px !important;
}

.lado-izq{
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
}

.lado-der{
    height:100%;
    position:absolute;
    top:0px;
    right:0px;
}

.contenedor-rosado {
    background: #f41067;
    position: relative;
    padding: 80px 10px 50px 50px !important;
}

.contenedor-cafe{
    background:#451A07;
    position: relative;
    padding: 80px 50px 50px 10px !important;
}

.contenedor-verde {
    background: #4BAF94;
    position: relative;
    padding: 80px 50px 50px 10px !important;
}



.contenedor-azul {
    background: #1694c1;
    position: relative;
    padding: 80px 50px 50px 10px !important;
}

.imagen-items{
    width:80%;
    height:200px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:20px;
    border-radius:500px;
    position:relative;
}

.section8 p{
    color:white;
    text-align:center;
}

.section8 .ama{
    color:#f7f618;
    text-align:center;
    font-size:20px !important;
}

#contacto2 p{
    font-size:16px;
    margin-bottom:0px;
}

.input{
    width: 100%;
    background: #fafafa;
    border-bottom: 2px solid #139BC1 !important;
    border: none;
    padding: 5px 10px;
    color: #272727;
    margin-bottom: 10px;
    text-align: right;
}

.boton-form{
    background:red;
}

.boton-form {
    background: #139BC1;
    padding: 13px 24px;
    border: none;
    color:white;
    margin-top: 10px;
}

.section8 p {
    font-size: 14px !important;
}

.textarea{
 width:100%;
 height:150px;
 background:white;
 border-bottom:2px solid #139BC1 !important;
 border:none;
 color:white;
 padding:10px;
}

.boton-menu{
    height: 80px;
    
}

.boton-menu p{
      position:relative;
     top:13px;
}

.section8 h2{
    color:white;
}

.section8 span{
   font-size:22px;
    color:white;
}

.contenedor-rosado p{
    color:white;
}

.contenedor-rosado h2{
    color:#f7f618;
}

.contenedor-rosado span{
   font-size:22px;
    color:#f7f618;
}

.contenedor-cafe p{
    color:white;
}

.contenedor-cafe h2{
    color:#f7f618;
}

.contenedor-cafe span{
   font-size:22px;
    color:#f7f618;
}



.contenedor-verde h2{
    color:#125e45;
}

.contenedor-verde p{
    color:white;
}

.contenedor-verde span{
    color:#125e45;
}



.contenedor-azul h2{
    color:#f7f618;
}

.contenedor-amarillo p{
    color:white;
}

.contenedor-azul p{
    color:white;
}

.contenedor-amarillo h2{
    color:#f7f618;
}

.contenedor-amarillo span{
   font-size:22px;
    color:#f7f618;
}

.contenedor-azul span{
   font-size:22px;
    color:#f7f618;
}


.contenedor h2{
    font-size:40px;
}

.contenedor p{
    font-size:14px;
}



.curva-dere{
    position:absolute;
    height:100%;
    left:99%;
    top:0px;
}

.contenedor-right h2,.contenedor-right p{
    text-align:right;
    
}

.curva-izq{
    position:absolute;
    height:100%;
    right:99%;
    top:0px;
}

.espacio-final{
    width:100%;
    height:100px;
}

/*-----------Star NavBar---------*/
.wrapper{
    width: 80%;
    margin: auto;
    height: 48px;
    overflow:hidden;
}

header{
    
  background: rgba(0, 82, 92);
  width: 100%;
  position: fixed;
  z-index: 1;
}

nav {
    float: unset; /* Desplazamos el nav hacia la izquierda */
  }
  nav ul {
    list-style: none;
    overflow: hidden; /* Limpiamos errores de float */
    margin-top: 0.5% !important;
  }
  nav ul li {
    float: left;
    font-family: Arial, sans-serif;
    font-size: 16px;
    color : white;
  }
  nav ul li a {
    display: block; /* Convertimos los elementos a en elementos bloque para manipular el padding */
    padding: 20px;
    color: #fff;
    text-decoration: none;
  }


/*-----------End NavBar---------*/


@font-face { /*Fuente de titulo*/
    font-family: titulo;
     src: url('../fonts/Triump Bold.woff') format('woff');
}

@font-face { /*Fuente de titulo*/
    font-family: cuerpo;
     src: url('../fonts/Triump Regular.woff') format('woff');
}

@font-face { /*Fuente de titulo*/
    font-family: cuerpoLight;
     src: url('../fonts/Triump Light.woff') format('woff');
}

@font-face {
    font-family: fonesia-light;
    src: url('../fonts/Fonesia-Light.ttf') format('truetype');
}

@font-face {
    font-family: fonesia-bold;
    src: url('../fonts/Fonesia-Bold.ttf') format('truetype');
}

@font-face {
    font-family: fonesia;
    src: url('../fonts/Fonesia-Regular.ttf') format('truetype');
}

.entrada{
    text-align:center;
    font-family:cuerpo;
    font-size:40px;
    color:#f41067;
}

.pereira{
    text-align:center;
    font-family:cuerpo;
    font-size:16px;
    color:#4eb797;
}

.mayo{
    text-align:center;
    font-family:cuerpo;
    font-size:20px;
    color:#1694c1;
    margin-bottom:0px;
}

.cultura{
    position:absolute;
    bottom:20px;
    right:30px;
    width:150px;
}

.camara{
    position:absolute;
    bottom:20px;
    left:30px;
    width:150px;
}

.triump-light{
    font-family: cuerpoLight;
}

.triump{
    font-family: cuerpo;
}

.triump-bold{
    font-family: titulo;
}


.logo{
    width:420px;
    display:block;
    margin-left:auto;
    margin-right:auto;
     position:relative;
    top:20px;
    margin-bottom:10px;
}

.simijo{
    display:none;
}

.boton{
    width:30px;
    height:30px;
    position:fixed;
    top:100px;
    right:20px;
    background:url(../img/on.png);
    background-size:100%;
    z-index:999;
    cursor:pointer;
    display:none;
}

.light{
    background:rgba(0,0,0,0.1)
}

.light2{
    background:rgba(0,0,0,0.4)
}

.nomijo1{
    display:none;
}

.nomijo2{
    display:none;
}

.logo2{
    width:360px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}

.vineta{
    position: fixed;
    left: 200%;
    height: 35%;
    width: 35%;
    top: 14%;
    opacity: 1;
    z-index: 1;
    -webkit-transition: all 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transition:         all 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.vinetatext{
    font-size: 20px;
    color: black;
    position: relative;
    Z-INDEX: 1;
    text-align: center;
    top: 24%;
}

.vinetatext2{
    top: 19%;
    text-align: center;
    font-size: 30px;
    color: black;
    Z-INDEX: 1;
    position: relative;
    font-family: 'Pacifico', cursive;
}

.vinetatext2 a{
    font-family:'Merienda', cursive;
    font-size: 33px;
}

.vinetatext3{
    font-size: 20px;
    color: black;
    Z-INDEX: 1;
    position: relative;
    top: 18%;
    text-align: center;
}

.logo img{
    width:100%;
    display:none;
}

.logo2 img{
    width:100%;
    display:none;
}

#Video1{
    width:100%;
}

.hidden-mio{
    display:none;
}


@keyframes animate {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}


@media (max-width: 1200px) {
  
    .col-correct{
        transform: translate(-5%, 5%) !important;
    }
        .partners{
            width:100%;
            position:relative;
            right:0px;
            bottom:0px;
            z-index:99;
        }
        .pantalla{
                padding: 19px 25px !important;
        }

    .hidden-mio{
        display:block
    }
    
    .embed-responsive-16by9 {
        padding-bottom: 54.25%;
        margin: 15px;
    }
    #Video1 {
        display: none;
    }

    .section1 {
        padding-top: 0px;
        background-image: url('../img/farm-section1.jpg');
        background-size: cover;
    }

     .section4 {
        padding-top: 36px;
    }
      .section2 {
        padding-top: 36px;
    }
       .section3 {
        padding-top: 36px;
    }

    .mascara {
        width: 280px;
    }

    .texto-cargador {
        font-size: 18px;
    }

    .campo-principal {
        width: 95%;
    }

    .input-principal {
        width: 100%;
        margin-bottom: 5px;
    }

    .boton-campo {
        width: 100%;
        margin-bottom: 20px;
    }

    .apps {
        position: relative;
        bottom: 0px;
        left: 0%;
        margin-left: 0px;
        width: 100%;
    }

    .logo-principal {
        width: 140px;
        margin-bottom: 0px;
    }

    .menu-principal {
        margin-top: 80px;
        width: 80%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        top: -100px;
    }

    .col-md-12{
        width: 100% !important;
    } 

    .titulo-pagina {
        padding: 0px 30px !important;
    }

    .video2{
        margin-bottom:80px;
    }

    .servicios {
        margin-bottom: 5px;
    }

    .section-servicios p{
        margin-bottom:40px;
    }

    .bajar-beneficio {
        margin-top: 0px !important;
    }

    .section-testimonios{
        padding-bottom:80px;
    }

    .footer {
        padding:40px 30px 0px 30px;
        position: relative;
        bottom: 0px;
    }

    .slide {
        padding-top:20px;
    }

    .svgli {
        width: 10%;
        transform: translate(1006%,-126%);
    }

    .onliyou {
        width: 10%;
        transform: translate(1006%,-194%);
    }

    .menu-principal li {
        padding: 8px;
    }

    .menu-principal li a{
        font-size:16px;
    }
    
    .col-xs-4{
        width: 100% !important;
    }
    
    .col-xs-4 h1{
        font-size: 75px !important;
        margin-top: 10%;
    }
    
    .col-xs-4 h2{
        margin-top: 0px;
        font-size: 45px !important;
        text-align: center !important;
    }

    .pre .col-xs-4 {
        width: 50% !important;   
        padding: 0px !important;
    }
    
    .orderlii li p {
        transform: translate(-5%, -95%);
        font-size: 19px;
    }

    .col-md-3{
        width: 0% !important;
    }

    .col-md-9{
        width: 100% !important;
    }
    .poss{
        padding: 5%;
    }

    .formstyles p {
        margin-bottom: 0px;
        padding: 0px;
        color: white;
        font-size: 20px;
    }

    .col-xs-6{
        width: 100% !important;
    }

    .col-xs-6 .col-xs-11{
        width: 100% !important;
    }

    .col-xs-6 .col-xs-11 .col-xs-10{
        width: 100% !important;
    }

    .col-xs-10 .col-xs-6 .col-xs-11{
        width: 100% !important;
    }

    .free p {
        font-size: 16px !important;
    }

    .section4B{
        padding-top: 14% !important;
    }

    .orderlii {
        padding: 0% !important;
        height: 139px;
        font-size: 17px !important;
    }

    .orderlii li {
        height: 40% !important;
    }

    .forhim{
        top: 2% !important;
    }


}


@media only screen and (max-width: 1300px){
    .cel3{
        height: 20%;
        left: 50px;
    }
}

 @media only screen and (max-width: 350px){
    .ppequeno{
        font-size: 16.5px !important;
        text-align: justify !important;
        letter-spacing: 1px;
        word-spacing: -6px;
    }

    .doit h1{
        font-size: 18px !important;
    }


    .free p {
        font-size: 13px !important;
    }

    .onlypsection5{
        font-size: 16px !important;
    }

    .orderlii li p {
        transform: translate(-5%, -95%);
        font-size: 17px;
    }

    .boton-app {
        display: block;
        margin-left: auto;
        margin-top: 1%;
        margin-right: auto;
        border-radius: 4px;
        color: white;
        padding: 14px 21px;
        background: #009eed;
        font-family: roboto;
        font-size: 14px;
        position: relative;
        height: 42px;
    }
 }

/*minimo 600*/
/* @media only screen and (max-width: 800px) {
    
    

  } */

  /* @media only screen and (max-width: 450px){
    
  } */


  @media only screen and (max-width: 600px){
   .col-xs-4{
    width: 100% !important;
    
   }

   .tpequeno{
       opacity: 0 !important;
   }
   
   .pf-sectin4{
       opacity: 0 !important;
   }

   .boar{
       opacity: 0 !important;
   }

   .free{
       opacity: 0 !important;
   }
   .p1-section4{
       opacity: 0 !important;
   }

   .p2-section4{
    opacity: 0 !important;
    }
    
    .p3-section4{
        opacity: 0 !important;
    }

   .col-xs-4 h1{
    font-size: 65px !important;
    margin-top: 20%;
   }

   .col-xs-4 h2{
    margin-top: 0px;
    font-size: 28px !important;
    text-align: center !important;
   }

   .iconlogo{
    width: 39px !important;
    height: 39px !important;
    }
    
    .becon {
        position: fixed;
        opacity: 1;
        height: 75%;
        bottom: -100%;
        right: -45px;
        z-index: 1;
        -webkit-transition: all 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
        transition: all 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    .vineta {
        position: fixed;
        height: 38%;
        width: 95%;
        top: 5%;
        opacity: 1;
        z-index: 1;
        -webkit-transition: all 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
        transition: all 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    .cel4{
        left: 0% !important;
    }
  }

  @media (max-width: 700px){
    .embed-responsive-16by9 {
        padding-bottom: 54.25%;
        margin: 0px;
    }

  }


  /* cuando el width este entre 600px y 900px */
  @media screen and (max-width: 800px) and (min-width: 750px){
    .svgli {
        width: 10%;
        transform: translate(1006%,-75%);
    }

    .onliyou {
        width: 10%;
        transform: translate(1006%,-75%);
    }
  }

  /* @media only screen and (max-width: 370px){
    
  } */

  /* @media only screen and (max-width: 321px){
    
  } */