/*
Theme Name: Twenty Sixteen
Theme URI: https://wordpress.org/themes/twentysixteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Sixteen is a modernized take on an ever-popular WordPress layout ? the horizontal masthead with an optional right sidebar that works perfectly for blogs and websites. It has custom color options with beautiful default color schemes, a harmonious fluid grid using a mobile-first approach, and impeccable polish in every detail. Twenty Sixteen will make your WordPress look beautiful everywhere.
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, right-sidebar, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog
Text Domain: twentysixteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i); /* font-family: 'Open Sans', sans-serif;  */
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300i,700); /* font-family: 'Open Sans Condensed', sans-serif;  */

* {margin: 0; padding: 0; border: none; list-style: none; text-decoration: none; box-sizing: border-box; font-weight: 400;}
body, p {font-family: 'Open Sans Condensed', sans-serif; font-size: 20px; color: #fff; font-weight: 400;}

strong {font-weight:700;}

h3, h4, p {
    -webkit-animation-delay: 1s; animation-delay: 1s;
}

/* Structure */

.screenHeight {height: 780px;}

.row {float: left; position: relative; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: top center;background-attachment:fixed;}
.col-1 { float: left; width: 100%; padding: 0 210px;}
.col-2 { float: left; width: 50%; padding: 0 40px 0 125px;}
.rightCol {float: right;}

.nosotrosSlider .rightCol {position:relative;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-9 */
}



.item.row {background-attachment:scroll;}

.container { width: 100%; display: table; vertical-align: middle; text-align: center;}
.content { width: 100%; display: table-cell; vertical-align: middle;}

/* Global */

h3 {float: left; width: 100%; font-family: 'Open Sans Condensed', sans-serif; font-size: 36px; text-transform: uppercase; color: #fff; font-weight: 300; line-height: 1.2em;}
h4 {float: left; width: 100%; font-family: 'Open Sans Condensed', sans-serif; color: #fff; font-weight: 300; line-height: 1.2em; margin-top: 20px;}
.homeRow h3 { text-transform: none;}
.rumbosRow h3 { text-transform: none; font-size: 29px;}

.bottomArrow, .topArrow { position: absolute; left: 50%; margin-left: -40px; width: 80px;-webkit-animation-delay: 2s; animation-delay: 2s;}
.bottomArrow img, .topArrow img { width: 100%; height: auto; float: left;}
.bottomArrow { bottom: 20px;}
.topArrow { top: 20px;}

.pluBtn {display: inline-block; width: 39px; margin: 20px 0;-webkit-animation-delay: 2s; animation-delay: 2s;}
.pluBtn img { width: 100%; height: auto; float: left;}

/* Header */

header {position: relative; float: left; width: 100%;}
.logosBox {position: absolute; width: 100%; z-index: 5;}
.logosBox .language {position: absolute; right: 30px; top:20px;}
.logosBox .language a { float: left; width: auto; color: #fff;}
.logosBox .language span { float: left; width: auto; color: #fff; padding: 0 10px;}
.bigLogo {float: left; width: 100%; text-align: center;transition:all 0.3s ease; padding: 0 20px;}
.bigLogo img { max-width: 100%; width: 480px; height: auto; margin-top: 90px;}
.smallLogo { position: fixed; top: 45px; left: 85px;opacity:0;transition:all 0.3s ease;}
.smallLogo img { width: 270px; height: auto;}
.scrolled .smallLogo {opacity:1;}
.scrolled .bigLogo {opacity:0;}


.menuBox {position: fixed; top: 0; left: 40px; width: auto; min-width: 45px; z-index: 5; float: left; background: url(images/menuBack.png) no-repeat; padding-top: 290px;}
.site-navigation, .menu-menu-principal-container {float: left; width: auto;}
.site-navigation ul {float: left; width: auto;}
.site-navigation ul li {float: left; clear: left; width: auto; padding-bottom: 20px; position: relative;}
.site-navigation ul li.hidden {display:none;}
.site-navigation ul li a {float: left; width: auto; font-size: 21px; color: #fff; line-height: 22px; margin-left: -9px;text-shadow: #000 1px 1px 5px;}
.site-navigation ul li a:before {float: left; width: 22px; height: 22px; border-radius: 11px; border: 1px solid #fff; content: ''; margin-right: 10px; background: url(images/menuPiont.png) center center no-repeat;}

.site-navigation ul li a:hover,
.site-navigation ul li a.active,
.site-navigation ul li.active a { font-weight: 700;}
.site-navigation ul li a:hover:before,
.site-navigation ul li a.active:before,
.site-navigation ul li.active a:before { background: #fff;}

.site-navigation ul li ul { display: none; position: absolute; top: 35px; left: 2px; padding-left:137px; padding-top: 100px; background: url(images/submenuBack.png) no-repeat; width: 500px;}
.site-navigation ul li ul li { padding-top: 20px;  padding-bottom: 0;}
.site-navigation ul li.active ul {display:block;}
.site-navigation ul li.active ul li a {font-weight:400;}
.site-navigation ul li.active ul li.active a,
.site-navigation ul li.active ul li a:hover {font-weight:700;}

.site-navigation ul li.active ul li a:before {background: url(images/menuPiont.png) center center no-repeat;}

.site-navigation ul li.active ul li.active a:before,
.site-navigation ul li.active ul li a:hover:before {background: #fff;}
/*.site-navigation ul li:not(.active) ul {display:none!important;}*/

.nosotrosRow .content p { margin-bottom: 20px;}

/* Contacto */

.formBox {float: left; width: 100%; padding: 15px; padding-right: 0; border: 1px solid #fff; text-align: left; margin-bottom: 10px;}
.formBox li {float: left; width: 50%; padding-right: 15px;}
.formBox li.large {width: 100%;}
.formBox li input, .formBox li textarea {float: left; width: 100%; background: none; border-bottom: 1px solid #fff; height: 50px; line-height: 40px; margin-bottom: 10px; font-family: 'Open Sans Condensed', sans-serif; font-size: 20px; color: #fff;}
.formBox li textarea { border: none; height: 230px;}
.formBox li input.wpcf7-submit { width: auto; height: 35px; line-height: 33px; border: 1px solid #fff; padding: 0 15px; text-transform: uppercase; cursor: pointer;}
.formBox li input.wpcf7-submit:hover {background: #fff; color: #000;}

p.direccion, p.telefono, a.email {float: left; width: 100%; color: #fff; text-align: left; padding-left: 30px; line-height: 22px; margin-top: 10px;}
p.direccion {background: url(images/direccion.png) no-repeat;}
p.telefono {background: url(images/telefono.png) no-repeat;}
a.email {background: url(images/email.png) no-repeat;}

/* Rumbo */

.firma {float: left; width: 100%; margin-top: 30px;}
.firma span {display: inline-block; border-top: 1px solid #fff; vertical-align: middle; width: 190px;}
.firma p {display: inline-block; vertical-align: middle; font-size: 23px; padding: 0 30px;}
.firma p strong { font-weight: 700;}

div.wpcf7-response-output {
    margin: 0 0 20px!important;
    padding: 0!important;
    border: 0!important;
}

/* Servicios */

.serviciosRowItems .col-2 { width: 55%; padding:0;}
.serviciosRowItems .rightCol { background: #0f0c37; width: 45%; padding: 0 60px 0 60px;position:relative; z-index:1000;}
.serviciosRowItems .rightCol p strong {float: left; width: 100%; text-transform: uppercase; padding-bottom: 10px; border-bottom: 1px solid #fff; margin-bottom: 20px;}

.serviciosRowItems .icon {float: left; width: 100%; padding-bottom: 10px; border-bottom: 1px solid #fff; margin-bottom: 20px; display: none;}
.serviciosRowItems .imagesThumbs {float: left; width: 100%; margin-top: 20px;}
.serviciosRowItems .imagesThumbs a {display: inline-block; position: relative; width: 150px; height: 150px; border-radius: 75px; background-size: cover; background-position: top center; background-repeat: no-repeat; margin: 10px; margin-bottom: 40px; -webkit-filter: grayscale(100%); filter: grayscale(100%);}
.serviciosRowItems .imagesThumbs a:hover { -webkit-filter: grayscale(0%); filter: grayscale(0%);}
.serviciosRowItems .imagesThumbs a .image-title {position: absolute; width: 100%; bottom: -30px; left: 0; color:#fff; text-align: center;}

.service-image {float:left; width:100%;background-size: cover; background-position: top center; background-repeat: no-repeat;position:relative;position:absolute; top:0;left:0;}
.service-image:nth-child(1) {z-index:1;}

.clientesRow .rightCol .content a {display: inline-block;vertical-align: middle; width: 20%; margin: 10px 2%;}
.clientesRow .rightCol .content a img {width:100%; height:auto; }
.clientesRow .rightCol .content a:nth-child(4n+1) {clear:left;}

.wpcf7-form-control-wrap { position: static !important;}

.responsiveHeader, .responsiveMenu {display: none;}

@media all and (max-height: 750px) {	
	.menuBox {padding-top: 200px; background-position: 0 -115px;}	
	.formBox li textarea {height: 100px;}
}

@media all and (max-width: 1030px) {
	.col-1 {padding: 0 5%;}
	.col-2 { padding: 0 5%;}
	.logosBox {display: none !important;}
	.menuBox { display: none;}
	.responsiveHeader {position: fixed; z-index: 10; width: 100%; background: #fff; text-align: center; padding: 10px 0;}
	.logoResponsive {display: inline-block;}
	.responsiveHeader {display: block;}
	.responsiveBtn {position: absolute; top: 10px; left: 20px; color: #222a7b; font-size: 25px;}
	.serviciosRowItems .imagesThumbs a {width: 50px; height: 50px;  border-radius: 25px; margin: 5px;}
	.serviciosRowItems .imagesThumbs a .image-title {display: none;}
	.responsiveMenu {position: fixed; z-index: 9; width: 100%; background: #fff; margin-top: 51px; border-top: 1px solid #222a7b;}
	.responsiveMenu .sub-menu {position: absolute; top: 0; right: 0; width: 50%; background: #222a7b; height: 100%;}
	.responsiveMenu .nav-menu li {float: left; clear: left; width: 100%; padding-top: 25px;}
	.responsiveMenu .nav-menu li a {float: left; width: auto; font-size: 21px; color: #222a7b; line-height: 22px; margin-left: 15px;}
	.responsiveMenu .nav-menu li ul li a {color: #fff;}
	.responsiveMenu .nav-menu li a:before {float: left; width: 22px; height: 22px; border-radius: 11px; border: 1px solid #222a7b; content: ''; margin-right: 10px; background: url(images/menuPiontBlue.png) center center no-repeat;}
	.responsiveMenu .nav-menu li ul li a:before {border: 1px solid #fff; background: url(images/menuPiont.png) center center no-repeat;}

}

@media all and (max-width: 768px) {
	.columns { width: 100%; display: table-cell; vertical-align: middle;}
	.col-2 { width: 100%;}
	.col-2 .content,
	.col-2 .container {height: auto !important;min-height:0!important; margin:20px 0;}
	.serviciosRowItems .col-2 {position: absolute; width: 100%; top: 0; left: 0; height: 50%;}
	.serviciosRowItems .col-2.rightCol {position: absolute; top: auto; bottom: 0; left: 0; height: 50%; padding: 20px 60px;}
	.service-image {position: absolute; top: 0; left: 0; height: 100% !important;}
	.nosotrosSlider .rightCol {padding: 30px 0;}
	.nosotrosSlider .rightCol {background: none;}
}

@media all and (max-width: 670px) {
	h3 {font-size: 25px;}
	.firma span {display: none;}
	.rumbosRow h3 {font-size: 20px;}
	.formBox li textarea {height: 150px;}
	.bottomArrow, .topArrow {margin-left: -25px; width: 50px;}
	.serviciosRowItems .col-2 {height: 30%;}
	.serviciosRowItems .col-2.rightCol {height: 70%; padding: 20px;}
	.serviciosRowItems .icon {display: none;}
	.serviciosRowItems .col-2.rightCol p { font-size: 15px;}
	p.direccion, p.telefono, a.email {margin-top: 5px; font-size: 14px;}
	.formBox li input, .formBox li textarea {height: 35px; line-height: 30px;}
	.formBox li textarea {height: 80px;}
	h3 {font-size: 20px;}
	.row { text-align: center;}
}

@media all and (max-width: 670px) and (min-width: 401px) {
	.bottomArrow, .topArrow {display: none;}
	.clientesRow .rightCol .content a {width: 15%;}
	p.direccion, p.telefono, a.email {width: 40%;}
	.formBox {width: 55%; margin-right: 5%;}
	.formBox p {display: none;}	
}


@media all and (max-width: 500px) {
	.serviciosRowItems .col-2.rightCol p {font-size: 14px;}
	.bottomArrow, .topArrow {display: none !important;}
	.formBox li input, .formBox li textarea {height: 25px; line-height: 25px;}
	.formBox li textarea {height: 50px;}
}

@media all and (max-height: 500px) {
	.screenHeight {min-height: 500px;}
}