/*BODY*/
html, body {
position: relative;
height: 100%;
margin: 0;
padding: 0;
}
body{
font-family: 'Open Sans', sans-serif;
color: #868686;
background: #ffffff;
word-wrap: break-word;
}
/*** Boton ver más**/
.vermas{
text-decoration: none;
color: red;
font-weight: 600;
}
.vermas:hover{
color: red;
}
/** Fin de boton ver más**/
@media (max-width: 767px){
body{
font-size: 14px;
}
}
a{
word-wrap: break-word;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.no-padding{
padding: 0;
}
.rowflex{
display: flex;
flex-flow: row wrap;
align-items: center;
}
.wrapper_content{
padding-top: 137px;
}
/*-------------------------------------------------*/
/*-----------------INTERHEADER------------------*/
/* REDES SOCIALES */
.social{
position: fixed;
left: 0;
bottom: 45%;
z-index: 9999;
}
.btn-hide{
cursor: pointer;
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
.social ul{
list-style: none;
padding-left: 0;
}
.social ul li a{
display: inline-block;
color: #fff;
background: #004a7c;
padding: 12px 5px;
text-decoration: none;
transition: all 500ms ease;
-webkit-transition: all 500ms ease;
-o-transition: all 500ms ease;
width: 47px;
font-size: 21px;
text-align: center;
}
.social ul li .fa-facebook:hover{background: #3A5795;}
.social ul li .fa-twitter:hover{background: #54A9EB;}
.social ul li .fa-pinterest-p:hover{background: #BD2126;}
.social ul li .fa-google-plus:hover{background: #ea4335;}
.social ul li .fa-envelope-o:hover{background: #ff8f22;}
.social ul li .fa-youtube-play:hover{background: #E62117;}
.social ul li .fa-instagram:hover{background: #df2d74;}
.social ul li .fa-chevron-left:hover{background: #383838;}
.social ul li .fa-chevron-right:hover{background: #383838;}
.social ul li a:hover{
padding: 13px 45px 11px 30px;
/* background: #000;*/
}
/*REDES
.sect_menu_main{
position: relative;
}
.redes{
position: absolute;
top: 35%;
left: 50px;
z-index: 5;
}
#toggle {
display: none;
}
.button {
z-index: 999;
width: 43px;
height: 43px;
background: #26b1b6;
border-radius: 100%;
transition: all 0.5s ease-in-out;
box-shadow: 1px 3px 10px 0 rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.button:before {
position: absolute;
top: 20px;
left: 9px;
content: '';
width: 25px;
height: 2px;
background: #FFF;
transform: rotate(90deg);
}
.button:after {
position: absolute;
top: 20px;
left: 9px;
content: '';
width: 25px;
height: 2px;
background: #FFF;
}
.nav {
transform: translateY(-10%);
opacity: 0;
top: 13px;
left: -50px;
transition: all 0.5s ease-in-out;
background: #FFF;
width: 150px;
border-radius: 5px;
transform: translateY(0%);
box-shadow: 2px 3px 10px 0 rgba(0, 0, 0, 0.1);
}
.nav a {
text-align: center;
display: block;
margin: 20px 0;
color: #F28482;
text-decoration: none;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
}
#toggle:checked ~ .nav {
opacity: 1;
transform: translateY(10%);
}
#toggle:checked ~ .button {
transform: rotate(135deg);
box-shadow: 0 0 0 0 transparent;
}
*/
.sect_topheader{
background: #009fd9;
position: relative;
}
.sect_topheader:before{
content: "";
position: absolute;
width: 50%;
height: 100%;
right: 0;
background: #f6b200;
}
.sect_topheader p{
margin: 0;
padding: 5px 0;
}
.sect_topheader p a{
color: #fff;
}
.navbar_main{
position: absolute;
left: 0;
width: 100%;
border-bottom: 5px solid #009894;
}
.list_menu{
display: flex;
flex-flow: row wrap;
padding-left: 0;
list-style: none;
margin-bottom: 0;
}
.list_menu img{
width: 100%;
}
.list_menu>li{
width: 14%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.list_menu>li.logo_main:before{
background-image: none;
}
.list_menu>li:before{
content: "";
position: absolute;
top: -50px;
left: 37%;
background-image: url(../../../public/img/logo/icon.png);
width: 40px;
height: 32px;
background-size: 100% 100%;
z-index: -1;
transition: all ease 500ms;
}
.list_menu>li:hover:before{
top: 13px;
transition: all ease 500ms;
}
.list_menu>li.logo_main{
width: 16%;
}
.list_menu>li a{
display: flex;
width: 100%;
padding: 42px 0;
height: 100%;
align-items: center;
justify-content: center;
font-weight: 700;
border-bottom: 2px solid transparent;
transition: all ease 500ms;
}
.list_menu>li:hover a{
font-weight: 700;
border-bottom: 2px solid;
transition: all ease 500ms;
}
.menu-fixed{
position: fixed;
top: 0;
left: 0;
z-index: 5;
background: rgba(255, 255, 255, 0.83);
box-shadow: 0px 0px 5px #606060;
}
/*-----------------END INTERHEADER------------------*/
/**/
.sect_slider{
max-height: 83vh;
}
/**/
/*SECTION NOSOTROS*/
.sect_nosotros{
background-color: #242526;
padding: 50px 0;
}
.sect_nosotros img{
width: 100%;
}
.box_nosotros .content h1{
color: #fff;
text-align: center;
font-size: 30px;
font-weight: 700;
}
.box_nosotros .content p{
font-size: 18px;
text-align: justify;
}
/*END SECTION NOSOTROS*/
/*------------------SECTION SERVICIOS---------------*/
.sect_service{
padding: 50px 0;
}
.list_servicio_main{
display: flex;
flex-flow: row wrap;
list-style: none;
padding-left: 0;
margin-bottom: 0;
padding-top: 30px;
}
.list_servicio_main img{
width: 100%;
}
.list_servicio_main>li{
width: 30%;
margin: 15px auto;
}
.list_servicio_main .box_service{
transition: all ease 500ms;
position: relative;
}
.list_servicio_main .box_service:before{
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.53);
top: 0;
left: 0;
}
.list_servicio_main>li:hover .box_service{
-webkit-transform: rotateX( -180deg);
transform: rotateY( -180deg);
transition: all ease 500ms;
position: relative;
}
.list_servicio_main .box_service .box_caption{
position: absolute;
top: 0;
left: 0;
display: flex;
flex-flow: row wrap;
align-items: center;
height: 100%;
background: #242526;
transform: rotateY( -180deg);
opacity: 0;
}
.box_caption .content{
width: 90%;
margin: 0 auto;
}
.box_caption .content h3{
width: 100%;
text-align: center;
color: #fff;
}
.box_caption .content p{
text-align: center;
}
.list_servicio_main>li:hover .box_caption{
opacity: 1;
transition: all ease 500ms;
}
/*------------------SECTION SERVICIOS---------------*/
/*-----------------SECTION CONTACTANOS---------------*/
.sect_contactanos{
background-image: url(../../../public/img/fondo/2000-x-544.jpg);
background-size: cover;
background-repeat: no-repeat;
position: relative;
padding: 100px 0;
}
.sect_contactanos .btn_general {
background: #1e2020 !important;
}
.sect_contactanos:before{
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 74, 124, 0.69);
}
.btn_general{
display: block;
width: 200px;
padding: 15px 0;
margin: 0 auto;
background: #f6b200;
border: 3px solid #f6b200;
border-radius: 30px;
color: #fff;
text-align: center;
font-weight: 800;
position: relative;
overflow: hidden;
z-index: 1;
transition: all ease 500ms;
}
.btn_general:hover{
color: #009894;
border-radius: 0;
transition: all ease 500ms;
}
.btn_general:before{
position: absolute;
content: "";
background: #fff;
left: 51%;
width: 0%;
top: 0;
height: 100%;
z-index: -1;
transition: all ease 500ms;
}
.btn_general:after{
position: absolute;
content: "";
background: #fff;
right: 51%;
width: 0%;
top: 0;
height: 100%;
z-index: -1;
transition: all ease 500ms;
}
.btn_general:hover:before{
width: 100%;
left: -50%;
transition: all ease 500ms;
}
.btn_general:hover:after{
width: 100%;
right: -50%;
transition: all ease 500ms;
}
.box_videos p>span{
color: #fff;
text-align: center;
font-size: 50px;
border-radius: 50%;
border: 2px solid;
width: 70px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}
/*-----------------SECTION CONTACTANOS---------------*/
/*--------------------SECTION GALERIA-----------------*/
.sect_galleria{
padding: 50px 0;
}
.content_gallery{
padding-top: 30px;
}
.title_galeria{
text-align: center;
}
.title_galeria h1{
color: #f6b50c;
margin: 0;
font-weight: 700;
transition: all ease 500ms;
}
.title_galeria h1>span{
color: #009894;
transition: all ease 500ms;
}
.title_galeria .hr_first{
width: 30px;
border-top: 2px solid #9fdbf1 ;
border-bottom: 4px solid #000;
display: inline-block;
transition: all ease 500ms;
}
.title_galeria .hr_second{
width: 30px;
border-top: 2px solid #9fdbf1;
border-bottom: 4px solid #000;
display: inline-block;
transition: all ease 500ms;
}
.title_galeria:hover .hr_first,.title_galeria:hover .hr_second{
width: 100px;
transition: all ease 500ms;
}
.title_galeria:hover h1{
color: #009894;
transition: all ease 500ms;
}
.title_galeria:hover h1>span{
color: #f6b200;
transition: all ease 500ms;
}
.gallery_descrip p{
width: 60%;
margin: 0 auto;
text-align: center;
}
.content_gallery .gallbox_content{
display: flex;
flex-flow: row wrap;
padding-left: 0;
list-style: none;
}
.content_gallery .gallbox_content>li{
width: 33.3%;
}
.content_gallery .gallbox_content>li img{
width: 100%;
}
.content_gallery .gallbox_content>li{
position: relative;
overflow: hidden;
}
.content_gallery .gallbox_content>li a:before{
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.73);
top: 0;
left: 0;
opacity: 0;
transition: all ease 500ms;
}
.content_gallery .gallbox_content>li a:hover:before{
opacity: 1;
z-index: 1;
transition: all ease 500ms;
}
.content_gallery .gallbox_content>li a img{
transition: all ease 500ms;
}
.content_gallery .gallbox_content>li a:hover img{
-webkit-transform:scale(1.3);transform:scale(1.3);
transition: all ease 500ms;
}
.div_btnvermas{
margin-top: 50px;
}
.box_caption .vermas{
position: absolute;
top: -20%;
left: 0;
display: flex;
width: 100%;
z-index: 2;
justify-content: center;
transition: all ease 500ms;
}
.box_caption .vermas span{
color: #fff;
background: #004a7c;
width: 40px;
height: 40px;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.content_gallery .gallbox_content>li:hover .box_caption .vermas{
top: 55%;
z-index: 3;
}
.box_caption .name{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
padding: 35px 0;
background: #fff;
opacity: 0;
border-bottom: 3px solid #004a7c;
transition: all ease 500ms;
}
.box_caption .name h3{
margin: 0;
color: #004a7c;
font-weight: 500;
}
.gallbox_content>li:hover .box_caption .name{
opacity: 1;
z-index: 2;
transition: all ease 500ms;
}
.title_visible{
position: absolute;
top: 0;
display: flex;
flex-flow: row wrap;
width: 100%;
height: 100%;
align-items: center;
text-align: center;
justify-content: center;
left: 0;
}
.title_visible>div{
width: 100%;
}
.title_visible h3{
color: #fff;
text-shadow: 0px 0px 5px #000;
}
.list_servicio_main>li:hover .title_visible{
display: none;
}
/*--------------------END SECTION GALERIA-----------------*/
/*------------------------SECTION CLIENTES--------------------*/
.sect_clientes{
background-image: url(../../../public/img/fondo/2000-x-544-2.jpg);
background-size: cover;
padding: 100px 0;
position: relative;
}
.sect_clientes:before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 74, 124, 0.69);
}
.clientes{
list-style: none;
margin-bottom: 0;
padding-left: 0;
}
.clientes .owl-prev{
opacity: 0;
position: absolute;
top: 35%;
left: 0;
text-indent: -666rem;
overflow: hidden;
width: 30px;
height: 30px;
line-height: 26px;
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-ms-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
}
.clientes:hover .owl-prev{
opacity: 1;
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-ms-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
}
.clientes .owl-prev:before{
content: "\f104";
font-family: FontAwesome;
position: absolute;
top: 0;
height: 100%;
left: 0;
width: 100%;
display: flex;
align-items: center;
font-weight: 600;
justify-content: center;
color: #5ab4b9;
background: #fff;
text-indent: 0;
border: 3px solid #5ab4b9;
}
.clientes .owl-next{
opacity: 0;
position: absolute;
top: 35%;
right: 0;
text-indent: -666rem;
overflow: hidden;
width: 30px;
height: 30px;
line-height: 26px;
}
.clientes:hover .owl-next{
opacity: 1;
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-ms-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
}
.clientes .owl-next:before{
content: "\f105";
font-family: FontAwesome;
position: absolute;
top: 0;
height: 100%;
left: 0;
width: 100%;
display: flex;
align-items: center;
font-weight: 600;
justify-content: center;
color: #5fc3ca;
background: #fff;
text-indent: 0;
border: 3px solid #5ab4b9;
}
.clientes li{
border-bottom: 2px solid #000;
padding-bottom: 5px;
}
.title_cliente{
text-align: center;
}
.title_cliente h1{
color: #Fff;
margin: 0;
font-weight: 700;
transition: all ease 500ms;
}
.title_cliente h1>span{
color: #000;
transition: all ease 500ms;
}
.title_cliente .hr_first{
width: 30px;
border-top: 2px solid #fff;
border-bottom: 4px solid #000;
display: inline-block;
transition: all ease 500ms;
}
.title_cliente .hr_second{
width: 30px;
border-top: 2px solid #fff;
border-bottom: 4px solid #000;
display: inline-block;
transition: all ease 500ms;
}
.title_cliente:hover .hr_first,.title_cliente:hover .hr_second{
width: 100px;
transition: all ease 500ms;
}
.title_cliente:hover h1{
color: #000;
transition: all ease 500ms;
}
.title_cliente:hover h1>span{
color: #fff;
transition: all ease 500ms;
}
/*SECTION CLIENTES*/
/*--------------------SECTION MAPA------------------*/
.sect_map{
margin-bottom: -72px;
}
/*--------------------END SECTION MAPA------------------*/
/*-----------------INTERFOOTER------------------*/
.sect_infocontact{
margin-bottom: -70px;
}
.info_foot{
background: #009894;
padding: 20px;
border-bottom: 3px solid #fff;
}
.flex_info{
padding-left: 0;
list-style: none;
display: flex;
flex-flow: row wrap;
margin-bottom: 0;
}
.flex_info>li{
width: 28%;
position: relative;
padding-left: 80px;
margin: 0 auto;
}
.flex_info>li .icobutton{
position: absolute;
background: transparent;
border: 0;
left: 0;
top: 18%;
background: #f6b200;
width: 60px;
height: 60px;
border-radius: 50%;
}
.flex_info>li .icobutton span{
font-size: 30px;
color: #fff;
}
.text_info h4{
color: #fff;
font-weight: 700;
}
.text_info a, .text_info {
color: #fff;
}
.backg_foot{
background: #1e1d24;
padding: 50px 0;
padding-top: 130px;
}
.box_foot img{
width: 100%;
}
.box_foot .box_header h3{
color: #ffffff;
font-weight: 600;
}
.box_foot .box_body .list_servicios{
list-style: none;
padding-left: 0;
}
.box_foot .box_body .list_servicios span{
color: #2eb9c2;
}
.box_foot .box_body .list_enlaces{
list-style: none;
padding-left: 0;
}
.box_foot .box_body .list_enlaces a{
color: #868686;
}
.box_foot .box_body .list_enlaces a>span{
color: #2eb9c2;
}
.hr_foot{
border-top: 3px solid #2eb9c2;
width: 70%;
margin: 0;
}
.backg_foot .gallbox_content{
list-style: none;
display: flex;
flex-flow: row wrap;
padding-left: 0;
margin-bottom: 0;
}
.backg_foot .gallbox_content>li{
width: 23%;
margin: 3px auto;
}
.backg_foot .gallbox_content>li a{
display: block;
position: relative;
overflow: hidden;
}
.backg_foot .gallbox_content>li a:before{
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 74, 124, 0.68);
top: -150px;
left: 0;
transition: all ease 500ms;
}
.backg_foot .gallbox_content>li a:hover:before{
top: 0;
transition: all ease 500ms;
}
.back_derechos{
background: #141419;
padding: 10px 0;
}
.back_derechos span{
color: #2eb9c2;
}
.back_derechos p{
margin-bottom: 0;
color: #fff;
}
/*-----------------END INTERFOOTER------------------*/
/*--------------------------MAQUETACIÓN PIER-------------------------*/
/*==========>NOSOTROS<==========*/
/*BANNER NOSOTROS*/
.sect_contact {
background-image: url(../../../public/img/fondo/BRD2.jpg);
background-position: center;
background-size: cover;
padding: 20px 0;
margin-bottom: 40px;
}
.h3_prod {
font-weight: 600;
color: #ffffff;
text-transform: uppercase;
}
.h_c {
margin-bottom: 0;
display: inline-block;
padding-top: 20px;
}
.hom_con {
display: inline-block;
font-weight: 300;
color: #ffffff;
margin: 0 5px;
}
.enla {
color: #fff;
}
.enla:hover, .enla:focus {
color: #fed101;
}
/*QUIENES SOMOS*/
.nos_quien_soy_title{
margin-top: 30px;
}
.sect_who_we_are{
padding-bottom: 30px;
}
.nos_quien_soy{
display: flex;
flex-flow: row wrap;
background: #fff;
padding: 50px 0;
}
.nos_quien_soy .box_img{
width: 40%;
}
.nos_quien_soy .box_text{
width: 60%;
}
.nos_quien_soy .box_img img{
border-radius: 10px;
}
.nos_quien_soy p{
text-align: justify;
color: #000;
padding: 0px 70px;
line-height: 1.67;
font-size: 18px;
}
@media (max-width: 1400px){
.slide-cont .slid-descript1 > .slid-rowcl .slid-frastxt > h3{
font-size: 5vw;
}
}
@media(max-width: 991px){
.nos_quien_soy .box_text {
width: 100%;
order: 1;
}
.nos_quien_soy .box_img {
width: 100%;
order: 2;
}
.nos_quien_soy{
padding: 0;
}
.nos_quien_soy p {
padding: 30px;
}
}
/*MISION Y VISION*/
.sect_mis_vis{
background-color: #f6b200;
}
.nos_mis_vis{
display: flex;
flex-flow: row wrap;
text-align: center;
padding: 50px 30px;
}
.nos_mis_vis .box_left{
width: 45%;
}
.nos_mis_vis .separator{
width: 10%;
}
.nos_mis_vis .box_right{
width: 45%;
}
.nos_mis_vis i{
color: #ffffff;
font-size: 100px;
padding-bottom: 20px;
}
.nos_mis_vis h3{
font-size: 30px;
font-weight: 800;
line-height: 1.89;
letter-spacing: 0.06em;
color: #000;
padding-bottom: 10px;
}
.nos_mis_vis p{
font-weight: 300;
font-size: 18px;
line-height: 1.67;
letter-spacing: 0em;
color: #fff;
padding-bottom: 30px;
}
.floating{
animation-name: floating;
-webkit-animation-name: floating;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
@keyframes floating {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(8%);
}
100% {
transform: translateY(0%);
}
}
@-webkit-keyframes floating {
0% {
-webkit-transform: translateY(0%);
}
50% {
-webkit-transform: translateY(8%);
}
100% {
-webkit-transform: translateY(0%);
}
}
/*CONTADORES*/
.nos_cont{
display: flex;
flex-flow: row wrap;
padding: 80px 0;
text-align: center;
}
.nos_cont p{
font-size: 70px;
color: #2eb9c2;
}
.nos_cont h3{
font-size: 30px;
color: #000;
}
.nos_cont .box_año_exp{
width: 25%;
}
.nos_cont .box_estilos{
width: 25%;
}
.nos_cont .box_prend_mes{
width: 25%;
}
.nos_cont .box_cli_sat{
width: 25%;
}
/*DESCRIPCION NOTICIAS*/
.descrip_img img{
width: 100%;
}
.contenido_noticiero{
margin-bottom: 40px;
}
.contenido_noticiero h1{
text-align: center;
color: #009894;
}
.contenido_noticiero h3{
color: #f6b200;
}
.contenido_noticiero p{
text-align: justify;
}
/*RESPONSIVE NOSOTROS*/
@media(max-width: 1070px){
.nos_cont>div {
width: 45% !important;
margin: 0 auto;
}
}
@media(max-width: 991px){
.sect_contact h3{
text-align: center;
}
.sect_contact .h_c{
text-align: center;
display: block;
padding-left: 0;
}
.nos_mis_vis p {
font-size: 15px;
}
}
@media(max-width: 700px){
.nos_cont>div p {
font-size: 50px;
}
}
@media(max-width: 600px){
.nos_mis_vis .box_left {
width: 100%;
}
.nos_mis_vis .box_right {
width: 100%;
}
.nos_cont>div {
width: 90% !important;
margin: 0 auto;
}
.title_producto {
position: relative;
opacity: 1;
transition: all ease 1s;
}
.title_producto span {
color: #000;
}
}
/*==========>GALERIA<==========*/
/*.sect_galeria .gallery_descrip p {
color: #000;
font-size: 18px;
}*/
/*==========>CONTACTO<==========*/
.sect_form{
padding: 50px 0;
}
.borderform{
border: 1px solid #ccc;
border-bottom: 1px solid;
background-color: whitesmoke;
height: 50px;
border-radius: 0;
}
.borderform:focus{
border: 1px solid;
border-bottom: 2px solid #004a7c;
box-shadow: none;
}
.fondoform{
padding: 90px 0px;
}
.btn_verproduct {
display: block;
width: 150px;
margin: 0 auto;
background: #1e1d24;
text-align: center;
padding: 10px 20px;
color: #ffffff;
position: relative;
overflow: hidden;
z-index: 1;
}
/*-------------------------END MAQUETACIÓN PIER-------------------------------*/
/*-------------------VISTA CLIENTES-----------------*/
.content_client{
padding: 30px 0
}
.list_clientes{
display: flex;
flex-flow: row wrap;
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.list_clientes img{
width: 100%;
}
.list_clientes>li{
width: 30%;
margin: 0 auto;
border-bottom: 2px dashed #000;
position: relative;
}
.list_clientes>li:before{
content: "";
position: absolute;
height: 100%;
width: 0%;
bottom: 0;
left: 0;
background: rgba(0, 74, 124, 0.48);
transition: all ease 500ms;
}
.list_clientes>li:hover:before{
width: 100%;
transition: all ease 500ms;
}
/*--------------------END CLIENTES----------------*/
/*VISTA SERVICIOS*/
.list_servicio{
padding: 30px 0;
list-style: none;
margin-bottom: 0;
}
.list_servicio>li{
margin-bottom: 25px;
border-bottom: 2px solid #004a7c;
}
.list_servicio>li .box_service{
display: flex;
flex-flow: row wrap;
}
.list_servicio>li .box_service .box_left{
width: 40%;
position: relative;
}
.list_servicio>li .box_service .box_left:before{
content: "";
position: absolute;
width: 0%;
height: 0;
left: 0;
top: 0;
background: rgba(0, 74, 124, 0.61);
transition: all ease 500ms;
}
.list_servicio>li .box_service .box_left:hover:before{
width: 100%;
height: 100%;
transition: all ease 500ms;
}
.list_servicio>li .box_service .box_right{
width: 60%;
display: flex;
align-items: center;
}
.list_servicio>li .box_service .box_right .box_content{
padding: 0 20px;
text-align: justify;
}
.box_content h3 img{
width: 47px;
vertical-align: sub;
}
.list_servicio>li .box_service .box_right .box_content h3{
color: #004a7c;
font-weight: 700;
}
.list_servicio img{
width: 100%;
}
/*END VISTA SERVICIOS*/
/*RESPONSIVE INTER FOOTER*/
@media(max-width: 767px){
.flex_info>li {
width: 100%;
margin: 20px auto;
}
.flex_info {
width: 50%;
margin: 0 auto;
}
}
@media(max-width: 600px){
.flex_info {
width: 100%;
margin: 0 auto;
}
}
.descrip{
text-align: center;
}
/*RESPONSIVE PROYECTOS*/
@media(max-width: 1199px){
.content_gallery .gallbox_content>li a:hover .box_caption .vermas {
top: 45%;
}
}
@media(max-width: 991px){
.box_caption .name {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
padding: 15px 0;
}
}
@media(max-width: 767px){
.content_gallery .gallbox_content>li {
width: 50%;
}
}
@media(max-width: 600px){
.content_gallery .gallbox_content>li {
width: 100%;
margin-bottom: 20px;
}
.box_caption .name {
position: relative;
opacity: 1;
}
}
/*END RESPONSIVE PROYECTOS*/
/*RESPONSIVE CLIENTES*/
@media(max-width: 991px){
.list_clientes>li {
width: 50%;
}
}
@media(max-width: 650px){
.list_clientes>li {
width: 100%;
}
}
/*RESPONSIVE CLIENTES*/
/*RESPONSIVE FOOTER*/
@media(max-width: 767px){
.back_derechos p {
margin-bottom: 15px;
text-align: center;
}
}
/**/
/*RESPONSIVE SERVICIOS*/
@media(max-width: 800px){
.list_servicio>li .box_service .box_left {
width: 100%;
}
.list_servicio>li .box_service .box_right {
width: 100%;
}
}
/*END RESPONSIVE SERVICIOS*/
/*RESPONSIVE HOME*/
@media(max-width: 1199px){
.wrapper_content {
padding-top: 122px;
}
}
@media (max-width: 991px){
.wrapper_content {
padding-top: 74px;
}
.list_servicio_main>li {
width: 45%;
}
}
.list_menu_movil{
display: none;
}
@media(max-width: 767px){
.list_menu{
display: none;
}
.list_menu_movil{
display: block;
margin-bottom: 0;
padding-left: 0;
text-align: center;
padding: 5px 0;
list-style: none;
}
.list_menu_movil img{
width: 100%;
max-width: 230px;
}
#callmenu img, #closemenu img {
width: 40px!important;
}
.box_nosotros .content h1 {
font-size: 20px;
}
.box_nosotros .content p {
font-size: 15px;
}
}
@media (max-width: 699px){
.list_servicio_main>li {
width: 100%;
}
.box_caption .content p {
font-size: 12px;
}
.box_caption .content h3 {
font-size: 15px;
}
}
#callmenu{
position: absolute;
right: 20px;
top: 25px;
cursor: pointer;
}
#closemenu{
position: absolute;
right: 20px;
top: 25px;
cursor: pointer;
}
#callmenu img, #closemenu img{
width: 50px;
}
.menu_movil_float{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #004a7c;
z-index: -1;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
transition: all ease 500ms;
}
.list_menu_movil_float{
list-style: none;
}
.menu_active{
opacity: 1;
z-index: 20;
transition: all ease 500ms;
}
.logo_movil{
width: 100%;
max-width: 250px;
margin: 0 auto;
}
.logo_movil img{
width: 100%;
}
.list_menu_movil_float>li a{
display: block;
padding: 20px 0;
color: #fff;
text-align: center;
position: relative;
}
.list_menu_movil_float>li a:before{
content: "";
background-image: url(../../../public/img/logo/icon.png);
position: absolute;
background-size: 100% 100%;
width: 40px;
height: 30px;
top: 13px;
left: -200px;
transition: all ease 500ms;
}
.list_menu_movil_float>li a:hover:before{
left: 30px;
transition: all ease 500ms;
}
/**** Estilos Iconos Redes Sociales Footer*****/
.foot-redes{
list-style: none;
padding: 0;
margin-top: 20px;
}
.foot-redes > li{
display: inline-block;
margin-right: 5px;
}
.foot-redes > li > a {
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
display: block;
background-color: #0e9fc5;
color: #ffffff;
font-size: 18px;
position: relative;
overflow: hidden;
border-radius: 50%;
}
.foot-redes > li > a > i {
position: relative;
z-index: 1;
}
.foot-redes > li > a:before{
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
bottom: -36px;
background-color: #30a445;
transition: all ease 400ms;
}
.foot-redes > li > a:hover:before{
display: block;
bottom: 0px;
}
/*----------SECTION WELCOME-----------*/
.sect_welcome{
background: #009894;
padding: 50px 0;
text-align: center;
}
.sect_welcome .box_welcome .box_header h1{
width: 70%;
color: #fff;
font-weight: 700;
margin: 0 auto;
padding: 10px 0;
border-bottom: 3px solid #fff;
}
.sect_welcome .box_welcome .box_header h4{
color: #fff;
font-style: italic;
}
.list_welcome{
list-style: none;
padding-left: 0;
margin-bottom: 0;
display: flex;
flex-flow: row wrap;
padding: 50px 0;
}
.list_welcome>li{
width: 23%;
margin: 0 auto;
}
.list_welcome .grid__item .icobutton {
background: none;
width: 150px;
height: 150px;
padding: 12px;
border-radius: 50%;
border: 4px solid #fff;
position: relative;
}
.list_welcome .grid__item .icobutton:focus{
outline: none;
}
.list_welcome .grid__item .icobutton span{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #fff;
color: #282828;
font-size: 60px;
}
.list_welcome .grid__item .icobutton:hover span{
color: #ffffff;
background: #009fd9;
transition: all ease 500ms;
}
.text_info h4{
color: #fff;
font-weight: 700;
}
.text_info p{
color: #fff;
}
.btn_vermas{
display: block;
padding: 10px 0;
text-align: center;
color: #fff;
background: #ff6100;
width: 150px;
margin: 0 auto;
border-radius: 15px;
position: relative;
z-index: 1;
overflow: hidden;
}
.btn_vermas:after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0%;
z-index: -1;
transition: all ease 500ms;
}
.btn_vermas:hover:after{
height: 50%;
background: #282828;
transition: all ease 500ms;
}
.btn_vermas:hover{
color: #fff;
}
@media (max-width: 991px){
.list_welcome>li {
width: 50%;
margin-bottom: 30px;
}
}
@media (max-width: 600px){
.list_welcome>li {
width: 100%;
}
}
/*---------END SECTION WELCOME--------*/