/* ------------------------- */
/* Estilos Generales */
/* ------------------------- */

* {
    box-sizing: border-box;
    margin: 0; 
    padding: 0;
}

body { 
    font-family: 'Lato', sans-serif;
    font-size: 18px;
}

.texto-naranja {
    font-weight: 300;
    color: orange;
}

.texto-blanco {
    color: #fff;
}

.texto-negro {
	color: #000;
}

.texto-azul {
	color: rgb(245, 164, 57);
}

/*fullpage*/
#fp-nav ul li a span{
    background-color: rgb(245, 164, 57);
}
#fp-nav ul li .fp-tooltip{
    color: #fff;
}
.opacity{
    opacity: 0;
}

/*Menu de navegacion*/

.nav{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 70;
    width: 100%;
    margin: 0;
    padding: 0px 20px;
}

.navflex{
    justify-content: center !important;
}

.nav li,
.nav a {
    display: inline-block;
    margin: 10px;
    text-decoration: none;
    text-transform: capitalize;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 19px;
    color: #fff;
    transition: .5s ease;
    text-transform: uppercase;
}
.nav li.active{
    border-bottom: 2px solid rgb(245, 164, 57);;
}
.menu{
}
.menu li.active a,
.menu li:hover a {
    color: rgb(245, 164, 57);;
}

.nav li a{
    transition: .5s ease;
    margin: 0;
    padding: 0;
}

.logotipo{
    position: relative;
    z-index: 10000;
}
.logotipo img{
    width: 100px;
    height: 100px;
}

/*filtros imagen*/

.filtro-header{
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 4, 20, 0.5);
    width: 100%;
    height: 100%;
}
.filtro-rebeck{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .5);
    width: 100%;
    height: 100%;
}

.filtro-tienda{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .4);
    width: 100%;
    height: 100%;
}

.filtro-robotika{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .4);
    width: 100%;
    height: 100%;
}
.filtro-laideal{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .5);
    width: 100%;
    height: 100%;   
}
.filtro-academia{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .5);
    width: 100%;
    height: 100%;   
}

.filtro-marejo{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .5);
    width: 100%;
    height: 100%;   
}

.filtro-constructora{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .3);
    width: 100%;
    height: 100%;   
}    
.filtro-consultores{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .4);
    width: 100%;
    height: 100%;   
}     

.left{
    justify-content: left !important;
}
.right{
    justify-content: right !important;
}


/*fondo secciones*/

.header{
    background-image: url('../media/bg/optimizadas/consorcio.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.rebeck{
    background-image: url('../media/bg/optimizadas/rebeck2.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.tienda{
    background-image: url('../media/bg/optimizadas/tiendarebeck.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.robotika{
    background-image: url('../media/bg/optimizadas/robotika.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.la-ideal{
    background-image: url('../media/bg/optimizadas/laideal1.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.academia{
    background-image: url('../media/bg/optimizadas/academia.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.marejo{
    background-image: url('../media/bg/optimizadas/marejo.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.constructora{
    background-image: url('../media/bg/optimizadas/construtora.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.consultores{
    background-image: url('../media/bg/optimizadas/consultores.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
/*header*/

.header .contenedor-titulo{
    text-align: center;
    position: relative;
    z-index: 99;
    /*background: rgba(138, 132, 132, 0.5);*/
    border-radius: 5px;
    max-width: 90%;

}
.contenedor-titulo p{
    font-size: 24px;
    font-weight: 300;
    line-height: 30px;
    color: #fff;
    margin-bottom: 35px;
    max-width: 1024px;
    
}


.header .titulo{
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    max-width: 90%;
    margin: 0 auto;
}
.header .contenedor-icono{
    position: absolute;
    z-index: 99;
    bottom: 3%;
    /*left: 48%;*/
    font-size: 40px;
    animation: bajar-subir 1s ease infinite;
}

/*contenedor y botones*/

.contenedor-logo{
    display: flex;
    justify-content: center;
}

.logo{
    width: auto;
    height: 130px;
    visibility: hidden;/*visibility: hidden;*/
    opacity: 0;
    transition: all 2s ease-out 0s;
}

.logo-lg{
    height: 180px !important;
}
.logo-active{
    visibility: visible !important;
    opacity: 1 !important;
}

.margin-20{margin-bottom: -20px;}
.margin-15{margin-bottom: -15px;}
.margin-10{margin-bottom: -10px;}
.margin-5{margin-bottom: -5px;}
.margin-ritght-10{margin-right: 10px;}

.contenedor-texto{
    font-size: 26px;
    text-align: center;
    letter-spacing: -1px;
    max-width: 750px;
    line-height: 46px;

}
.contenedor-texto .titulo{
   /* border: 8px solid #fff;
    padding: 9px 50px; */
    color: #fff;
}

.contenedor-texto .texto{
    font-size: 24px;
    font-weight: 300;
    line-height: 30px;
    color: #fff;
    text-align: center;
    
}

.contenedor-botones{
    padding-top: 35px;
}
.btn-entrar{
    font-size: 16px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 0.31rem;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    padding: 15px 35px;
    cursor: pointer;
    transition: .3s ease all;
    text-align: center;
    text-transform: uppercase;    
}
.btn-entrar i{
    margin-left: 5px;
}
.btn-entrar:hover{
    background: rgba(0, 0, 0,0.9);
    color: rgb(245, 164, 57);;
}


@keyframes bajar-subir{
    0%{transform: translateY(20px);}
    25%{transform: translateY(0);}
    100%{transform: translateY(20px);}
}

.bg-video{
    position: absolute;
    z-index: 10;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background-color: #ccc;
    background-position: center;
    background-size: contain;
    object-fit: cover;
}

/*footer*/

.footer{
    position: relative;
    background-color: #2a2A2A;
    color: #fff;
    
}
.footer .grid-footer{
    display: grid;
    width: 90%;
    margin: 0 auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: "titulo-footer    titulo-footer   titulo-footer   titulo-footer"
                         "sub-footer1      sub-footer2     sub-footer3     sub-footer4  ";
    column-gap: 20px;
    padding-bottom: 100px;
}

.footer .titulo-footer{
    grid-area: titulo-footer;
}

.footer .sub-footer1{
    grid-area: sub-footer1;
}
.footer .sub-footer2{
    grid-area: sub-footer2;
}
.footer .sub-footer3{
    grid-area: sub-footer3;
}
.footer .sub-footer4{
    grid-area: sub-footer4;
}

.footer .texto-azul{
    text-transform: uppercase;
    font-size: 36px;
    letter-spacing: 2px;
    margin-bottom: 40px;
    text-align: center;
}

.footer h2{
    text-transform: uppercase;
    font-size: 24px;    
    /*opacity: 0;*/
    transition: .3s ease-out all;
    color: #ccc;
    padding: 10px 0;
}

.footer p{
    line-height: 30px;
    text-align: justify;
    font-size: 16px;
    font-weight: 300;
    line-height: 30px;
    color: rgb(172, 172, 172);    
}
.footer .align-telf{
    text-align: center !important;
}
.footer p span{
    font-weight: bold;
    display: block;
}

.footer .redes-sociales{
    display: flex;
    justify-content: center;
    margin: 0;
    font-size: 28px;
}

.footer .redes-sociales a{
    display: flex;
    width: 55px;
    height: 55px;
    background-color: white;
    color: #30313a;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    margin: 0 20px;
}

.footer .copyright{
    position: absolute;
    bottom: 0;
    border-top: 1px solid #dcdcdc80;
    padding: 25px 0;
    width: 100%;
}
.footer .copyright p{
    text-align: center;
}
.whatsapp{
    position:fixed;
    width:70px;
    height:70px;
    bottom:40px;
    right:40px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50%;
    text-align:center;
    font-size:46px;
    z-index:1000;
  }
  .whatsapp:hover{
    background: #128c7e;
  }
  
  .whatsapp i{
    margin-top:11px;
  }
  

.footer .facebook i{ color: #3b5998; }
.footer .instagram i{ color: #c13584; }
.footer .twitter i{ color: #1da1f2; }

.footer .facebook:hover{ background: #3b5998; }
.footer .instagram:hover{ background: #c13584; }
.footer .twitter:hover{ background: #1da1f2; }

.footer .facebook:hover i{ color: #fff; }
.footer .instagram:hover i{ color: #fff; }
.footer .twitter:hover i{ color: #fff; }


/*mediaqueries*/

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

    .footer .grid-footer{
        display: grid;
        width: 85%;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "titulo-footer titulo-footer"
                             "sub-footer2 sub-footer2"
                             "sub-footer3 sub-footer4";
        column-gap: 20px;
    }    
}

@media screen and (max-width: 768px){
    .menu li a,
    .menu li.active a{
        font-size: 18px;
    }

    .footer .redes-sociales{
        font-size: 20px;
    }
    .footer .redes-sociales a{
        width: 40px;
        height: 40px;
    }

    .footer .texto-naranja{
        font-size: 20px;
    }
    .footer .grid-footer{
        display: grid;
        width: 85%;
        margin: 0 auto;
        grid-template-columns: 1fr;
        grid-template-areas: "titulo-footer"
                             /*"sub-footer1"*/
                             "sub-footer2"
                             "sub-footer3"
                             "sub-footer4";
        column-gap: 20px;
    }
    .contenedor-titulo p{/*texto principal*/
        font-size: 18px;
        max-width: 88%;
        margin: 0 auto;
        margin-bottom: 20px;
        text-align: justify;
    }
    .contenedor-texto .texto{/*texto secciones siguientes*/
        font-size: 18px;
        max-width: 380px;
        margin: 0 auto;
    }
    .btn-entrar{
        margin-top: 50px;
    }

    .sub-footer2 p{
        font-size: 16px;
    }
    .sub-footer1{
        display: none;
    }
    .footer h2{
        font-size: 18px;
    }
    .footer .copyright{
        padding: 10px 0;
        width: 100%;
    }

    .whatsapp{
        position:fixed;
        width:60px;
        height:60px;
        bottom:20px;
        right:20px;
        background-color:#25d366;
        color:#FFF;
        border-radius:50%;
        text-align:center;
        font-size:40px;
        z-index:1000;
      }

      .whatsapp i{
        margin-top:10px;
      }


}
@media screen and (max-width: 576px){
    .nav{
        padding: 0px 5px;
    }
    .nav li,
    .nav a {
        margin: 5px;
        font-size: 16px;
        display: flex;
    }
    .logotipo img{
        width: 80px;
        height: 80px;
    }

    .contenedor-texto{
        font-size: 20px;
        max-width: 78%;
        line-height: 46px;
        text-align: justify;
    }
    .contenedor-texto .titulo{
        text-align: center;
    }

    .contenedor-texto p{
        font-size: 18px;
    }

    .logo{
        width: auto;
        height: 120px;
    }
    .logo-lg{
        height: 150px !important;
    }

}

@media screen and (max-width: 450px){
    .nav{
        display: block;
        text-align: center;
    }
    .nav a{
        font-size: 16px;
        margin-bottom: 0;
    }

    .menu{
        display: flex;
        justify-content: space-between;
    }

    .menu li a, .menu li.active a{
        font-size: 15px;
        padding: 5px;
    }
    .sub-footer1{
        display: none;
    }
    .sub-footer2 p{
        max-width: 90%;
        text-align: justify;
        margin: 0 auto;
    }
	.contenedor-logo{
        /* display: none; */
    }
    .sub-footer2 p, .sub-footer2 h2{
        /* display: none;  */
    }
    .header .contenedor-titulo .texto{
        /* display: none; */
    }
}

/*-------------------------------------SlickNav-------------------------------------*/

.slicknav_menu{
    display: none;
}

.slicknav_btn{
    padding: 15px !important;
}


@media screen and (max-width: 768px){
    #menu{
        display: none;
    }
    .slicknav_menu{
        display: block;
        background: transparent !important;
        color: rgb(245, 164, 57) !important;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 5000;
        width: 100%;
        padding: 10px !important;

    }
    .slicknav_open{
        background: rgba(234, 234, 241, 0.8) !important;
    }
    .slicknav_collapsed{
        background: rgba(234, 234, 241, 0.95) !important;
    }
    .slicknav_menu .slicknav_icon-bar {
        background-color: #000 !important;
    }

    .slicknav_nav a {
        padding: 15px !important;
        background-color: rgba(234, 234, 241, 0.95);
        color: #000 !important;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        border-radius: 5px;
        
    }
}