/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 11-27-2020, 11:40:58 PM
    Author     : serafin.alvarez
*/

*{
    font-family: 'Montserrat' , sans-serif;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    background: -webkit-gradient(linear, 100% 0, 0 0, from(rgba(18, 2, 117,1)), to(black));
    background: -webkit-linear-gradient(to right, rgba(18, 2, 117,1), black);
    background: -moz-linear-gradient(to right, rgba(18, 2, 117,1), black);
    background: -o-linear-gradient(to right, rgba(18, 2, 117,1), black);
    background: linear-gradient(to right, rgba(18, 2, 117,1), black);
    /*background: url(resources/img/background.jpg) no-repeat;*/
    background-size: cover; 
}

/*No utilizado*/
/*.content {
    margin-top: 100px;
}
.content img{
    display: block;
    width: 100%;        
}*/

nav{
    position: fixed;
    z-index: 20;
    left: 0;
    right: 0;
    top: 0;
    font-family: 'Montserrat', sans-serif;
    padding: 0 5%;
    height: 100px;
    background-color: rgba(4, 59, 148, 0.9);    
}

nav .logo{
    float: left;
    width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 24px;
    color: #ffffff;

}

nav .links{
    float: right;
    padding: 0;
    margin: 0;
    width: 60%;
    height: 100%;   
    display: flex;
    justify-content: space-around;
    align-items: center;
}

nav .links li {
    list-style: none;
}

nav .links a{
    display: block;
    padding: 1em;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
}

#nav-toggle{
    position: absolute;    
    top: -100px;
}

nav .icon-burger{
    display: none;
    position: absolute;
    right: 5%;
    top: 50%;      
    transform: translateY(-50%);
}

nav .icon-burger .line{
    width: 30px;
    height: 5px;
    background-color: #ffffff;
    margin: 5px;
    border-radius: 3px;    
    transition: all .3s ease-in-out;
}

@media screen and (max-width: 1140px){
    nav .logo {
        float: none;
        width: auto;
        justify-content: center;
    }

    nav .links {
        float: none;
        position: fixed;
        z-index: 9;
        left: 0;
        right: 0;
        top: 100px;
        bottom: 100%;
        width: auto;
        height: auto;
        flex-direction: column;
        justify-content: space-evenly;
        background-color: rgba(0,0,0,.8);
        overflow: hidden;
        box-sizing: border-box;
        transition: all .5s ease-in-out;
    }

    nav .links a {
        font-size: 20px;
    }

    nav :checked ~ .links {
        bottom: 0;        
    }

    nav .icon-burger {
        display: block;
        cursor: pointer;
    }

    nav :checked ~ .icon-burger .line:nth-child(1){
        transform: translateY(10px) rotate(225deg);        
    }

    nav :checked ~ .icon-burger .line:nth-child(3){
        transform: translateY(-10px) rotate(-225deg);        
    }

    nav :checked ~ .icon-burger .line:nth-child(2){
        opacity: 0; 
    }
}

/*Efecto parallax*/

section {
    width: 100%;
    padding: 0;
    margin: 0;
    height: auto;
    /*background de multiples circulos, solo linea abajo*/
    /*background: radial-gradient(circle at 100%, #1162ac, #333 50%, #1162ac 75%, #333 75%);*/  
}

#seccion1{
    margin-top: 100px;      
    /*height: auto;*/
}

/*Le colocamos margin-top 100px para que salga justo después del navbar*/
#seccion2{
    background-image: url(../img/business-strategy-success-target-goals.jpg);   
    background-size: cover;
    background-attachment: fixed; 
    margin-bottom: 30px;
    /*height: auto;*/
}


/*#seccion3{
    height: autos;
}

#seccion4{
    height: auto;
}*/

.opacity{
    background: rgba(0,0,0,0.7) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/*COLORES DE TEXTO*/
.white{
    color:white;
}

.grey{
    color: grey;
}

.black{
    color: black;
}

/*ALINEADO DE TEXTO*/
.align-center{
    text-align: center;
}

.align-left{
    text-align: left;
}

.align-right{
    text-align: right;
}

.align-justify{
    text-align: justify;
}

/*ESTILO TIPOGRAFIA*/
.bold{
    font-weight: bold;
}

.sub{
    text-decoration: underline;
}

.italic{
    font-style: italic;
}

/*CSS PARA TITULOS Y parrafos*/
.h1{
    font-size: 60px;
}

.h2{
    font-size: 50px;
}


p{
    line-height: 20px;
    text-align: justify;
}

.line-height-normal{
    line-height: normal;
}

/*-------------------------ESPACIADO DE LETRAS-------------------------*/
.spacing-big{
    letter-spacing: 0.3em;
}

.spacing-medium{
    letter-spacing: 0.2em;
}

.spacing-tiny{
    letter-spacing: 0.1em;
}


/*------------------------------------------------------------------------------*/
/*CARD*/
.light-bg{
    background-color: rgba(255,255,255,0.5);
}

/*EFECTO HOVER PARA TARJETAS DE PRODUCTO*/
.card-object{
    transition: 0.5s ease;
    cursor: pointer;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
    height: 470px;
    font-size: 12px;
}

.card-object:hover{
    transform: scale(1.05);
    box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
}

/*Sección tarjetas responsive de producto*/
/*HACER QUE CONTAINER DE ESA SECCION BAJE EL PADDING*/
@media screen and (max-width: 1000px){
    .card-object{
        height: auto;
    }
}

/*ESTILOS PARA LINKS*/
.a-big{
    font-size: 20px;
}
/*------------------------------------------------------------------------------*/
/*SLIDER*/

/*Estilos para el slider*/
.slider-img{
    filter: brightness(30%);
    max-height: 400px;
}

.slider-info-responsive{
    display: none;
}

@media screen and (max-width: 770px){
    .slider-info-responsive{
        display: flex;
    }
}


/*------------------------------------------------------------------------------*/
/*Footer*/
footer{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #cccccc;
}

.footer{
    bottom: 0px;
    width: 100%;
    background: #111;  
    /*position: fixed;*/
}

.main-content{
    display: flex;
}

.main-content .box{
    flex-basis: 50%;
    padding: 10px 20px;
}

.box h2{
    font-size: 1.125rem;
    font-weight: 600;
    text-transform: uppercase;
}

.box .content{
    margin: 20px 0 0 0;
    position: relative;
}

.box .content:before{
    position: absolute;
    content: '';
    top: -10px;
    height: 2px;
    width: 100%;
    background: #1a1a1a;
}

.box .content:after{
    position: absolute;
    content: '';
    height: 2px;
    width: 15%;
    background: #2027f1;
    top: -10px;
}

.left .content .social{
    margin: 20px 0 0 0;
}

.left .content .social a{
    padding: 0 2px;
}

.left .content .social a span{
    height: 40px;
    width: 40px;
    background: #1a1a1a;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    border-radius: 5px;
    transition: 0.3s ease;
}

.left .content .social a span:hover{
    background: rgba(34, 22, 161,1);
    color: white;
}

.center .content .fas ,.right .content .fab, .right .content .fas{/*va una extra de right para fab ya que el icono dewpp lo requiere*/
    font-size:  1.4375rem;    
    background: #1a1a1a;
    height: 45px;
    width: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 50%;
    transition: 0.3s ease;
    cursor: pointer;
}

.center .content .fas:hover,.right .content .fab:hover, .right .content .fas:hover{/*va una extra de right para fab ya que el icono dewpp lo requiere*/
    background: rgba(34, 22, 161,1);
}

.center .content .text, .right .content .text{
    font-size: 1.0400rem;
    font-weight: 500;
    padding-left: 10px;    
}

.center .content .email, .right .content .whatsapp{/*DA ESPACIO ENTRE CAMPOS, PARA QUE SE VEA ALGO SEPARADO LOS ESPACIOS DE PLACE,EMAIL Y WEB*/
    margin: 10px 0;
}

.bottom center{
    padding: 5px;
    font-size: 0.9375rem;    
    background: #151515;    
}

.bottom center span{
    color: #656565;
}

.bottom center a{
    color: #f12020;
    text-decoration: none;
}

.bottom center a:hover{
    text-decoration: underline;
}

@media screen and (max-width: 900px){
    footer{
        position: relative;
        bottom: 0px;
    }
    .main-content{
        flex-wrap: wrap;
        flex-direction: column;
    }
    .main-content .box{
        margin: 5px 0;
    }  
}

/*Enlaces en el footer , sección derecha y central*/
.center a, .right a{
    color:#cccccc;
    transition: 0.3s ease;
}

.center a:hover, .right a:hover{
    color: blue;
    text-decoration: none;
}