/*estilos generales*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 16px;
}  

.triangulo{
    width: 0;
    max-width: 300px;
    height: 0;
    border-right: 13vw solid transparent;
    border-top: 13vw solid transparent;
    border-left: 13vw solid #f0ad4e;
    border-bottom: 13vw solid #f0ad4e;
}


.titulo{
    font-size: 1.5rem;
    text-align: center;
    margin: 20px;
}
.texto{
    font-size: .8rem;
    width: 80%;
    text-align: center;
    margin: 0px auto;
    margin-bottom: 30px;
}

.boton{
    justify-self: center;
    padding: 2px;
    margin: auto;
    color: #000;
    background: #00bb2d;
}

a:hover{
    text-decoration: none;
    color: #fff;
}


/*estilos nav*/
.navbar{
    min-width: 265px;
}
button.navbar-toggler {
    padding: .25rem .5rem!important;
    margin: 0!important;
    border-radius: 5px!important;
}
.navbar-brand{
    margin: 0!important;
}
.logo h1,
.logo h2{
    font-family: 'gelasio';
    font-size: 1rem;
    line-height: 1rem;
}
.logo h1{
    font-size: 1.2rem;
    padding-top: 5px!important;
}
.media{
    height: 50px;
}

/*estilos imagen inicial*/
.inicial{
    background-image: url(../imagenes/inicial.jpg);
    background-position: 0 80%;
    background-repeat: no-repeat;
    background-size:  105% auto ;
    height: 65vw;
    max-height: 300px;
    width: 100%;
}
.inicial__caja-texto{
    width: 65%;  
    max-width: 300px;
    margin: auto;
    margin-top: 10%;
}
.inicial__texto{
    font-size: .8rem;
    margin-bottom: 0;
    position: relative;
}
.typed{
    color: #383674;
    text-shadow: 0px 0px 5px #fff;
}

.inicial__triangulo{
    bottom: 0;
    border-right-color: transparent;
    border-top-color: transparent;
    border-left-color: #1AB191;
    border-bottom-color: #1AB191; 
}

/*estilos inicial seccioens*/
.secciones .inicial{
    display: grid;
    align-content: end;
}

.secciones .inicial__texto{
    font-size: 1.2rem;
}


/*estilos vision*/

.vision{
    position: relative;
    height: 25vw;
    min-height: 375px;
}
.vision__triangulo{
    right: 0px;
    bottom: 0;
    border-right-color: #383674;
    border-top-color: transparent;
    border-left-color: transparent;
    border-bottom-color: #383674; 
}
.vision__texto{
    z-index: 1000;
}
/*boton*/
.vision__boton{
    position: relative;
    bottom: 25px;
    color: #fff;
    z-index: 1000;
    height: 35px;
}

.vision .btn:hover{
    color: #fff;
    background: #029123;
}

/*icono whatsapp*/
.vision .iconify{
    font-size: 1.2em;
    color: #fff;
    position: relative;
    bottom: 2px;
}



/*estilo servicios*/

/*botones*/
.servicio{
    display: grid;
    flex-grow: inherit;
    width:180px;
    height: 200px;
    /* margin: 20px; */
    position: relative;
}
.servicio .iconify{
    font-size: 5em;
    margin: auto;
}

.servicio__boton{
    display: grid;
    align-items: end;
    height: 200px;
    width: 165px;
    position: relative;
    background: none;
    padding-bottom: 35px;
    color: grey;
}
a.servicio__boton:hover{
    color: #383674;
}
.boton__texto{
    font-size: 1rem;
    text-align: center;
    color: #000;
}

.boton__ico{
    width: 100px;
    height: 100px;
    background: #fff;
    margin: auto;
}
#servicios .offset-sm-2,
#servicios .offset-sm-2{
    margin-left: 4%;
}

/*neon botones servicios*/
.marco{
    position: absolute;
    background: #1AB191;
    border-radius: 5px;
    box-shadow: 0  0  15px #1AB191;
}
.izq, .der{   
    width: 7px;
    bottom: 5%;
}
.arriba, .abajo{
    height: 7px;
    margin: auto;
}
.izq{    
    height: 80%;
    left: 5%;
}
.der{    
    height: 41%;
    right: 5%;
}
.arriba{   
    transform: rotate(24deg);
    width: 20%;
}
.arriba_izq{
    top: 18%;       
    left: 4.5%;
}
.arriba_der{
    top: 50%;       
    right:4.5%;
}
.abajo{
    width: 90%;
    bottom: 5%;
    left: 5%;
}

/*estilo tranquilo*/
.tranquilo__titulo{
    font-size: 1.3em;
}

.tranquilo__titulo span{
    display: block;
    color: orange;
    font-weight: bold;
    font-size: .8em;
}
.tranquilo__texto{
    text-align: left;
}
.tranquilo{
    padding-top: 50px;
    display: grid;
    justify-items: space-between;
    height:480px;
    background-image: url(../imagenes/tranquilo.gif);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: 155% 101%;
    border-bottom: 5px solid #1AB191;;
}


.tranquilo__boton{
    margin-left: 15%;
    color: #fff;
    border:none;
    padding: 5px 10px;
    bottom: 30px;
}

.tranquilo__boton:hover{
    background: #029123;
}

/*estilo contacto*/
.contacto,
.contacto__formulario{
    background: #29285b;
    color: #fff;
    position: relative;
    padding-bottom: 30px;
}

.contacto__triangulo{
    position: absolute;
    top: 0;
    left: 0;
    border-right-color: transparent;
    border-top-color: grey;
    border-left-color: grey;
    border-bottom-color: transparent;
    z-index: 1000;
}

.contacto__texto{
    text-align: right;
    font-weight: bold;
    padding-top: 50px;
    padding-right: 0;
    margin-right: 5%;
}

.contacto__datos a{
    color: grey;
    font-weight: bold;
    padding: 7px 0 ;
}
/*iconos contacto*/
.contacto__datos--tel:before{
    content: url('https://api.iconify.design/icomoon-free:phone.svg?color=lightseagreen&height=22');
    vertical-align: -0.125em;
    margin-right: 10px;    
}
.contacto__datos--dir:before{
    content: url('https://api.iconify.design/icomoon-free:location.svg?color=lightseagreen&height=22');
    vertical-align: -0.125em;
    margin-right: 10px;    
}
.contacto__datos--linkedin:before{
    content: url('https://api.iconify.design/icomoon-free:linkedin.svg?color=lightseagreen&height=22');   
}
.contacto__datos--instagram:before{
    content: url('https://api.iconify.design/icomoon-free:instagram.svg?color=lightseagreen&height=22');   
}
.contacto__datos--whatsapp:before{
    content: url('https://api.iconify.design/icomoon-free:whatsapp.svg?color=lightseagreen&height=22'); 
}
.contacto__datos--facebook:before{
    content: url('https://api.iconify.design/icomoon-free:facebook.svg?color=lightseagreen&height=22'); 
    
}
.contacto__datos-redes{
    padding-left: 10px;    
}
.contacto__datos-icono{
    height: 40px;
    width: 40px;
    border-radius: 50%;
}
.contacto__datos-icono:hover{    background: #fff;

}
.contacto__datos-icono:before{
    position: absolute;
    padding-left: 8px;
    padding-top: 2px;   
}


/*estilo formulario*/

.contacto__formulario{
    padding-top: 50px;
}
.form-control{
    background-color: #29285b;
    border: none;
    border-bottom: 1px solid grey;
    color: #fff;
}
.form-control::placeholder{
    color: #fff;
}
.contacto__formulario .btn{
    background: #1ab191;
    border: none;
}
.contacto__formulario .btn:hover{
    background: #13826b;
 }



 /*estilo creditos*/

 .creditos{
    height: 40px;
 }

 .creditos__enlace{
    height: 30px;
    font-size: .7em;    
    color: grey;
 }

 a.creditos--img{
    font-size: .8em;
 }

 .creditos__enlace--logo{
    height: 100%;
 }

 @media only screen and (min-width: 576px){
     /*estilo inicial*/
    

    .inicial__texto,
    .inicial__texto .typed{
        font-size: 1.2em;
    }
/*estilo tranquilo*/
    .tranquilo{  
        background-size: 80%;
        background-position: 150% 104%;
    }
    
 }
 
 @media only screen and (min-width: 768px){
     /*estilos generales*/
    *{
            font-size: 18px;
    } 
    nav .h6{
        font-size: .8rem;
    }

    /*estilo inicial*/
    .inicial{
        max-height: 400px;
    }
    .inicial__caja-texto{
        width: 75%;  
        max-width: 400px;
    }
    .inicial__texto,
    .inicial__texto .typed{
        font-size: 1.3em;
    }

    /*estilos inicial secciones*/
    .secciones .inicial__texto{
        font-size: 1.6em;
       }
    /*estilo tranquilo*/
        .tranquilo{  
            background-size: 75%;
            background-position: 150% 175%;         
        }

        .tranquilo__titulo,
        #tranquilo .texto{
            justify-self: start;
            margin: 20px 0 ;
            padding-left: 5%;
        }
        .tranquilo__titulo{
            font-size: 2em;
        }

        /*estilo formulario*/
        .form-group #empresa{
            position: relative;
            bottom: -36px;
        }
     }

@media only screen and (min-width: 992px){
    /*estilo inicial*/
    .inicial{
        max-height: 500px;
    }

    /*estilo servicios*/
    #servicios .offset-sm-2,
    #servicios .offset-sm-2{
        margin-left: 0%;
    }
    /*estilo tranquilo*/
        .tranquilo{  
            margin-top: 50px;
        }
     }

     @media only screen and (min-width: 1200px){
        .tranquilo{  
            background-size: 65%;
            background-position: 120% 105%;         
        }
        /*estilo formulario*/
        .col-xl-3{
            flex: 0 0 35%;
            max-width: 45%;
        }
     }