html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
display: none;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
@font-face {
font-family: 'Calibri';
src: url('../font/calibri.eot?5veb3n');
src: url('../font/calibri.eot?5veb3n#iefix') format('embedded-opentype'),
url('../font/calibri.ttf?5veb3n') format('truetype'),
url('../font/calibri.woff?5veb3n') format('woff'),
url('../font/calibri.svg?5veb3n#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Calibri';
src: url('../font/calibri-bold.eot?5veb3n');
src: url('../font/calibri-bold.eot?5veb3n#iefix') format('embedded-opentype'),
url('../font/calibri-bold.ttf?5veb3n') format('truetype'),
url('../font/calibri-bold.woff?5veb3n') format('woff'),
url('../font/calibri-bold.svg?5veb3n#icomoon') format('svg');
font-weight: 600;
font-style: normal;
}
/** icons **/
@font-face {
font-family: 'icomoon';
src: url('../font/icomoon.eot?5veb3n');
src: url('../font/icomoon.eot?5veb3n#iefix') format('embedded-opentype'),
url('../font/icomoon.ttf?5veb3n') format('truetype'),
url('../font/icomoon.woff?5veb3n') format('woff'),
url('../font/icomoon.svg?5veb3n#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-facebook:before {
content: "\ea90";
}
.icon-instagram:before {
content: "\ea92";
}
.icon-whatsapp:before {
content: "\ea93";
}
.icon-twitter:before {
content: "\ea96";
}
.icon-youtube:before {
content: "\ea9d";
}
*{
margin: 0;
padding: 0;
}
body{
font-family: 'Calibri';
font-size: 19px;
color: #535353;
background: #c6c6c6;
}
input{
font-family: 'Calibri';
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
h3{
margin-bottom: 10px;
}
h2{
color: #fff;
font-size: 20px;
font-weight: 600;
margin: 0;
}
p{
margin-bottom: 20px;
line-height: 18px;
}
@media (max-width: 768px){
p{
font-size: 16px;
}
}
img{
max-width: 100%;
}
.main{
padding: 21px;
}
@media (max-width: 768px){
.main{
padding: 21px 8px;
}
}
h2{
background: #000;
padding: 7px 10px;
display: inline-block;
}
.container{
max-width: 1080px;
margin: 0 auto;
}
@media (max-width: 768px){
.container{
padding: 0 30px;
}
}
/** header **/
.header{
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 99999999999999 !important;
padding: 0 0 20px 0;
}
.header h1{ margin-top: 20px; }
@media (max-width: 768px){
.header h1{
max-width: 80px;
}
.header h1 img{
max-width: 100%;
}
}
.header .container{
display: flex;
justify-content: space-between;
}
@media (max-width: 768px){
.header .container{
padding: 0 15px;
}
.header img{
max-width: 180px;
}
}
.phone{
color: #d6e3f7;
font-size: 16px;
text-align: right;
background: url('../images/ico-phone.png') no-repeat top left;
padding-left: 50px;
padding-top: 40px;
}
.phone span{
color: #fff;
font-size: 30px;
display: block;
}
@media (max-width: 768px){
.phone{
text-align: left;
background: url('../images/ico-phone-resp.png') no-repeat top 4px left;
padding-left: 30px;
padding-top: 10px;
position: absolute;
top:9px;
right: 50px;
}
.phone div{
display: none;
}
.phone span{
font-size: 15px;
}
}
/** navigation **/
.navigation{
background: #00386c;
display: flex;
justify-content: space-between;
padding: 0;
}
.logo-int{
padding: 6px 20px 4px;
}
.navigation__social{
padding: 2px 30px;
margin: 13px 0;
border-right: #fff 1px solid
}
.navigation__social a{ color: #fff; margin-right: 10px; font-size: 15px; font-weight: 100 }
.navigation__list{
background: url('../images/line-nav.png') no-repeat center 40px;
margin-top: 30px;
}
.navigation__list ul li{
display: inline-block;
margin-right: 20px;
}
.navigation__list input{ display: none; }
.navigation__list ul li a{
color: #fff;
padding: 15px 15px 13px 15px;
display: block;
transition: all .4s;
font-size: 18px;
}
.navigation__list ul li a:hover,
.navigation__list ul li a.activo{
border-bottom: 2px solid #fff;
}
.navigation__list span:before{
display: none !important;
}
/** slider **/
.slider{
position: relative;
margin-bottom: 0;
}
.slider__interior{
height: 190px !important;
overflow: hidden;
}
@media (max-width: 768px){
.imgresp{ display: none; }
.slider__interior{
background: #0252b2;
height: 100px !important;
}
.slider__interior img{ display: none !important; }
}
.slider::after{
/*content: '';
display: block;
background: url('../images/bg-blue-opacity.png') repeat-x;
width: 100%;
height: 100%;
position: absolute;
top: 0;*/
}
.slider__item{
position: relative;
}
.slider img{ width: 100%; }
.slider__titular{
background: url('../images/texture.png') rgba(0,57,113,.87);
position: absolute;
top: 0;
left: 0;
height: 100%;
display: flex;
justify-content: center;
max-width: 440px;
flex-direction: column;
padding: 30px 16px;
box-sizing: border-box;
text-align: left;
}
.slider__titular a{
color: #fff;
}
.slider__titular h3{
color: #fff;
font-size: 29px;
}
.slider__titular h3:after{
content: '';
width: 20px;
height: 3px;
background: #fff;
display: block;
margin-top: 6px;
}
.slider__titular p{
color: #fff;
font-size: 19px;
}
.slider__titular span{
background: #0096db;
color: #fff;
display: block;
font-size: 13px;
width: 70px;
padding: 6px 3px;
text-align: center;
margin-top: 10px;
}
.slider .slick-arrow{
position: absolute;
bottom: 0px;
border: 0;
outline: none;
width: 31px;
height: 28px;
font-size: 0;
cursor: pointer;
z-index: 2;
background: url('../images/arrow.png') #0096db;
transition: all .2s;
}
.slider .slick-arrow:hover{
background-color: #004992;
}
.slider .slick-arrow.slick-next{
right: 0;
background-position: 26px center;
}
.slider .slick-arrow.slick-prev{
right: 30px;
background-position: 5px center;
}
@media (max-width: 768px){
.slider__titular{
display: block;
position: relative;
background: #004992;
padding: 15px 16px 20px 16px;
}
.slider__titular h3{
font-size: 19px;
}
.slider__titular p{
font-size: 14px;
}
.slider__titular span{
display: none;
}
}
/* nosotros */
.nosotros{
background: #fff;
padding: 60px 0;
}
.nosotros p{
line-height: 25px;
}
.nosotros p b{
color: #0252b2;
font-weight: 600;
}
/* privacidad */
.privacidad{
background: #fff;
padding: 60px 0;
}
.privacidad p{
line-height: 25px;
}
.privacidad p b{
color: #0252b2;
font-weight: 600;
}
/* ultimo */
.ultimo{
}
.ultimo__title{
background: #0096db;
}
.ultimo__carrusel{
background: #ececec;
padding: 16px 12px;
display: flex;
}
.ultimo__item{
position: relative;
margin: 0 5px;
}
.ultimo__item figcaption{
background: rgba(0, 60, 115, .9);
color: #fff;
position: absolute;
bottom: 0;
width: 100%;
padding: 10px;
box-sizing: border-box;
font-size: 14px;
line-height: 14px;
font-weight: 200;
transition: all .4s;
}
.ultimo__item a:hover figcaption{
background: rgba(0, 60, 115, .95);
}
.ultimo__carrusel .slick-arrow{
position: absolute;
top: 90px;
border: 0;
outline: none;
width: 31px;
height: 28px;
font-size: 0;
cursor: pointer;
z-index: 2;
background: url('../images/arrow.png') #0096db;
transition: all .2s;
}
.ultimo__carrusel .slick-arrow:hover{
background-color: #004992;
}
.ultimo__carrusel .slick-arrow.slick-next{
right: -2px;
background-position: 26px center;
}
.ultimo__carrusel .slick-arrow.slick-prev{
left: -2px;
background-position: 5px center;
}
/* colores */
.celeste .categoria__title{
background: #0096db;
}
.celeste .categoria__item figcaption{
background: rgba(0, 150, 219, .8);
}
.celeste .categoria__item a:hover figcaption{
background: rgba(2, 123, 179, .95);
}
.celeste .categoria__item figcaption span{
background: #dc0a0a;
}
.celeste .categoria__item2 h4 span{
background: #dc0a0a;
}
.celeste .categoria__item2 h4 span:hover{
background: #bf0303;
}
.verde .categoria__title{
background: #055e6d;
}
.verde .categoria__item figcaption{
background: rgba(5, 94, 109, .9);
}
.verde .categoria__item a:hover figcaption{
background: rgba(0, 70, 79, .95);
}
.verde .categoria__item figcaption span{
background: #004992;
}
.verde .categoria__item2 h4 span{
background: #004992;
}
.verde .categoria__item2 h4 span:hover{
background: #00356a;
}
.plomo .categoria__title{
background: #676767;
}
.plomo .categoria__item figcaption{
background: rgba(103, 103, 103, .9);
}
.plomo .categoria__item a:hover figcaption{
background: rgba(63, 63, 63, .9);
}
.categoria{
margin: 50px 0;
border: 2px solid #406a91;
padding: 0 15px 15px 15px;
box-sizing: border-box;
}
.categoria__title{
background: #00386c;
font-size: 35px;
margin-top: -40px;
border: 10px solid #fff;
}
.categoria__title a{
color: #fff;
}
.categoria__container{
display: flex;
justify-content: space-between;
margin: 0 -7px;
}
.categoria__container__col1{
width: 51%;
padding: 0 10px;
box-sizing: border-box;
}
.categoria__container__col2{
width: 49%;
padding: 0 10px;
box-sizing: border-box;
margin-top: -5px;
}
.categoria__item{
position: relative;
}
.categoria__item figcaption{
background: rgba(0, 60, 115, .9);
color: #fff;
position: absolute;
bottom: 0;
width: 100%;
padding: 18px 12px 12px 12px;
box-sizing: border-box;
font-size: 18px;
line-height: 14px;
font-weight: 200;
transition: all .4s;
}
.categoria__item a:hover figcaption{
background: rgba(0, 60, 115, .95);
}
.categoria__item figcaption span{
background: #0096db;
color: #fff;
display: block;
font-size: 13px;
width: 60px;
padding: 4px 3px;
text-align: center;
margin-top: 10px;
}
.categoria__item2{
display: flex;
justify-content: flex-start;
align-items: center;
margin: 7px 0;
}
.categoria__item2 figure{
width: 50%
}
.categoria__item2 h4{
width: 50%;
padding-left: 10px;
box-sizing: border-box;
font-size: 15px;
}
.categoria__item2 h4 a{
color: #676767;
}
.categoria__item2 h4 span{
background: #0096db;
color: #fff;
display: block;
font-size: 13px;
width: 65px;
padding: 4px 3px;
text-align: center;
margin-top: 10px;
transition: all .4s;
}
.categoria__item2 h4 span:hover{
background: #0084c0;
}
@media (max-width: 768px){
.categoria{
margin: 50px 0;
border: 1px solid #406a91;
padding: 0 8px 8px 8px;
}
.categoria__title{
font-size: 18px;
border: 3px solid #fff;
}
.categoria__container{
display: block;
}
.categoria__container__col1,
.categoria__container__col2{
width: 100%;
}
.categoria__container__col1{
margin-bottom: 14px;
}
.categoria__item2 h4 span,
.categoria__item h4 span,
.categoria__item figcaption span{
display: none;
}
}
/** redes sociales **/
.redes-sociales{
display: flex;
justify-content: space-between;
margin: 0 -8px;
margin-top: -20px
}
.redes-sociales aside{
width: 33.3333%;
margin: 0 8px;
}
.redes-sociales__twitter{
background: url('../images/ico-twitter.jpg') #004992 top 5px right 5px no-repeat;
padding: 10px 12px;
box-sizing: border-box;
}
.redes-sociales__twitter h5{
color: #fff;
font-size: 15px;
}
.redes-sociales__twitter p{
color: #fff;
font-size: 11px;
margin-top: 3px;
margin-bottom: 10px;
}
.redes-sociales__twitter .content{
background: #fff;
min-height: 200px;
}
.redes-sociales__youtube{
background: url('../images/ico-youtube.jpg') #dc0a0a top 5px right 5px no-repeat;
padding: 10px 12px;
box-sizing: border-box;
}
.redes-sociales__youtube h5{
color: #fff;
font-size: 15px;
}
.redes-sociales__youtube p{
color: #fff;
font-size: 11px;
margin-top: 3px;
margin-bottom: 10px;
}
.redes-sociales__youtube .content{
background: #fff;
min-height: 200px;
}
@media (max-width: 768px){
.redes-sociales{
display: block;
}
.redes-sociales aside{
width: 100%;
margin: 0 0 10px 0;
}
}
h3{
color: #0252b2;
font-size: 32px;
}
@media (max-width: 768px){
h3{
font-size: 22px;
font-weight: bold;
}
}
h4{
color: #686868;
font-size: 23px;
}
@media (max-width: 768px){
h4{
font-size: 19px;
}
}
/* servicios */
.servicios{
background: url('../images/line-blue.jpg') no-repeat center top #fff;
text-align: center;
padding: 100px 0 0 0;
}
@media (max-width: 768px){
.servicios{
background-size: contain;
padding: 60px 0 50px 0;
}
}
.servicios h3{
line-height: 10px;
}
.servicios h3:after{
content: '';
display: block;
width: 70px;
height: 1px;
background: #0252b2;
margin: 30px auto ;
line-height: 10px;
}
@media (max-width: 768px){
.servicios h3:after{
width: 35px;
margin: 15px auto ;
line-height: 10px;
}
}
.servicios h4{
font-size: 19px;
max-width: 600px;
margin: 0 auto;
}
@media (max-width: 768px){
.servicios h4{
font-size: 17px;
}
}
.servicios__group:after{
content: '';
display: block;
clear: both;
}
.servicios__group__col.woman{
margin-top: -80px;
position: relative;
}
@media (max-width: 768px){
.servicios__group__col.woman{
display: none;}
}
.servicios__group__col{
width: 50%;
float: left;
}
@media (max-width: 768px){
.servicios__group__col{
width: 100%;
}
}
.servicios__group__col ul{
margin: 60px 0;
}
@media (max-width: 768px){
.servicios__group__col ul{
margin: 50px 0 0 0;
}
}
.servicios__group__col ul li{
width: 50%;
float: left;
padding-bottom: 40px;
}
@media (max-width: 768px){
.servicios__group__col ul li{
width: 100%;
padding-bottom: 10px;
}
}
.servicios__group__col ul li .servicio__img{
width: 20%;
float: left;
}
.servicios__group__col ul li .servicio__img img{
max-width: 100%;
}
.servicios__group__col ul li .servicio__txt{
width: 80%;
float: left;
padding-left: 10px;
padding-right: 20px;
box-sizing: border-box;
}
@media (max-width: 768px){
.servicios__group__col ul li .servicio__txt{
padding-right: 0;
}
}
.servicios__group__col ul li .servicio__txt h3{
font-size: 22px;
text-align: left;
color: #3689cf;
}
@media (max-width: 768px){
.servicios__group__col ul li .servicio__txt h3{
font-size: 18px;
font-weight: bold;
}
}
.servicios__group__col ul li .servicio__txt h3:after{
display: none;
}
.servicios__group__col ul li .servicio__txt p{
text-align: left;
font-size: 16px;
color: #777676;
}
/* clientes */
.clientes{
background: #f2f2f2;
padding: 60px 0;
text-align: center;
}
.clientes h4:after{
content: '';
display: block;
width: 70px;
height: 1px;
background: #0252b2;
margin: 30px auto;
}
@media (max-width: 768px){
.clientes h4:after{
width: 35px;
margin: 15px auto ;
line-height: 10px;
}
}
.clientes p{
color: #777676;
line-height: 25px;
}
@media (max-width: 768px){
.clientes p{
font-size: 17px;
line-height: 20px;
}
}
.clientes__img{
padding: 30px 0;
}
.clientes__img img{
margin: 0 20px;
}
@media (max-width: 768px){
.clientes__img img{
margin: 10px 10px;
max-height: 65px;
}
}
/** postula **/
.postula{
background: url('../images/bg-clientes.jpg') no-repeat center;
height: 220px;
position: relative;
padding: 100px 0 0 0;
}
.postula::after{
content: '';
display: block;
background: rgba(3,55,117, .8);
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
.postula br{ display: none; }
.postula h5{
color: #fff;
font-size: 32px;
position: relative;
z-index: 9999;
text-align: center;
margin-left: 10px;
margin-right: 10px;
}
@media (max-width: 768px){
.postula h5{
color: #fff;
font-size: 26px;
}
.postula br{ display: block;}
}
.postula a{
background: #27bfe0;
color: #fff;
display: block;
width: 200px;
margin: 30px auto 0 auto;
position: relative;
z-index: 9999;
font-weight: 100;
padding: 12px 20px;
font-size: 22px;
text-align: center;
border-radius: 30px;
box-shadow: 3px 3px 10px #2a373e;
transition: all .4s;
}
@media (max-width: 768px){
.postula a{
width: 160px;
font-size: 20px;
}
}
.postula a:hover{
background: #169ebb;
}
/** footer **/
.footer{
background: #202020;
color: #808080;
padding: 30px 0;
}
.footer__container{
max-width: 1060px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer__container p{
margin: 0;
font-size: 16px;
line-height: 1rem;
}
.footer__logo{
text-align: center;
}
.footer__nav{
padding-right: 50px;
}
.footer__nav a{
color: #aba9a9;
padding: 5px;
font-size: 18px;
margin: 0 10px;
}
.footer__nav a:hover{
text-decoration: underline;
}
.footer__info{
text-align: right;
}
.footer__info br{ display: none; }
@media (max-width: 768px){
.footer__nav{
text-align: center;
padding-right: 0;
padding-bottom: 10px;
}
.footer__nav a{
font-size: 15px;
margin: 0 5px;
}
.footer__container{
display: block;
}
.footer__logo img{
max-width: 170px;
}
.footer__info{
border-left: 0;
padding-left: 0;
margin-left: 0;
text-align: center;
padding: 20px 20px 0 20px;
}
.footer__info br{ display: block; }
}
/* detalle */
.detalle .categorias{
background: #004992;
color: #fff;
display: inline-block;
font-weight: 600;
font-size: 20px;
padding: 5px 10px;
}
.detalle h3{
color: #004992;
font-weight: 600;
font-size: 30px;
}
.detalle h4{
font-size: 20px;
margin-bottom: 20px;
}
.columnas{
display: flex;
font-size: 19px;
margin-top: 30px;
margin-bottom: 30px;
line-height: 23px;
}
.columnas b{
font-weight: 600
}
.columnas p{
line-height: 23px;
}
.columnas a{
color: #017fb9;
text-decoration: underline;
}
.columnas .col1{ width: 55%; }
@media (max-width: 768px){
.detalle h3{
font-size: 27px;
}
.columnas{
display: block;
}
.columnas .col1{ width: 100%; }
}
@media (max-width: 768px){
.navigation__list{
background: none;
}
.navigation__list label{
cursor: pointer;
}
.navigation__list{
position: absolute;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
margin-top: 0;
padding: 20px 15px;
}
.control{
z-index: 999999;
position: relative;
}
input#control-menu:checked + ul{display:block}
.navigation__list ul{
display: none;
background: rgba(2,82,178,.9);
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 60px 20px;
}
.navigation__list span{
width:20px;
height:3px;
background:#fff;
display:block;
position:relative;
margin-top:5px;
float: right;
}
.navigation__list span:after{
content:'';width:20px;height:3px;background:#fff;display:block;position:absolute;top:6px}
}
.navigation__list span:before{
display: block !important ;
content:'';width:20px;height:3px;background:#fff;display:block;position:absolute;bottom:6px}
}
}
@media (max-width: 768px){
.navigation__list li a:hover,
.navigation__list li a.activo{
border-bottom: 0;
}
.navigation{
text-align: center;
background: #004992;
padding-bottom: 10px;
}
.navigation__social{
margin: 0 auto;
border-right: 0;
}
.navigation__social a{ font-size: 12px; }
}