html #content {
  opacity: 1;
  -ms-filter: none; 
  filter: none;
  -webkit-transition: opacity 0.1s linear;
  -moz-transition: opacity 0.1s linear;
  -o-transition: opacity 0.1s linear;
  -ms-transition: opacity 0.1s linear;
  transition: opacity 0.1s linear;
} 


html {
	background: #333;
}
body {
	background: #fff;
}
a {
	text-decoration: none;
	color: inherit;
}
h1 {
	font-family: 'Open Sans', sans-serif;
	font-size: 35px;
	line-height: 1.1;
	font-weight: 300;
}


 
html .page .page-body > section {
	padding-top: 16px;
	padding-bottom: 16px;
}
html .page > header {
	margin-bottom: 16px;
}
html .page > header aside {
	font-size: 14px;
}
html .page-header {
	height: 316px;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html .page-header {
	color: #fff;
	margin-bottom: 24px;
}

html .page-body {
	font: 18px/1.7 'Source Sans Pro', sans-serif;
	/*color: #333;*/
	color: gray;
	/*font-weight: bold;*/
}
html .page-body a {
	color: 'inherit';
}

html .page-body h3 {
	line-height: 30px;
	font-weight: normal;
}
html .page-body #marketing-div h3 {
	line-height: 40px;
}

html .page-body h1 + p {
	margin-top: -8px;
}
html .page-body h3 + p {
	margin-top: 0;
}

.nos {
	width: 33.33%;
	margin: 10px auto;
	float: left;
}
.nosCargo {
	font-weight: normal;
}
.nos svg {
	display: block;
	width: 110px;
	padding: 1px;
	margin: 30px auto;
}

#contacto-div {
	background-color: #000;
}
#copy-div {
	padding-bottom: 0 !important;
}
#copy-div h3 {
	color: #999 !important;
	text-align: center;
	margin-bottom: 20px;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px !important;
	line-height: 18px !important;
	
}

html .site-header {
	height: 40px;
	width: 100%;
	zoom: 1;
	background: #000;
	font-family: 'Open Sans', sans-serif;
	letter-spacing: 1px;
}
html .site-header:before, html .site-header:after {
	content: "";
	display: table;
}
html .site-header:after {
	clear: both;
}
html .site-header #logo {
	width: 40px;
	height: 40px;
	float: left;
	margin: 0;
	cursor: pointer;
}
html .site-header #logo a {
	width: 40px;
	height: 40px;
	position: relative;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
html .site-header #logo a img {
	width: 32px;
}

html .site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	/*min-width: 320px;*/
	z-index: 1;
}

html .site-header #site-nav ul {
	margin: 0;
	padding: 0;
}
html .site-header #site-nav li {
	float: left;
}

html .site-header #site-nav .menu_item {
	margin-top: 9px;
	font-weight: normal;
	border-right: solid 1px #FFF;
}
html .site-header #site-nav .menu_item.last {
	border: none;
}

html .site-header #site-nav .menu_item.login {
	float: right;
}
html .site-header #site-nav .menu_item.logosocial {
	float: right;
	width: 23px;
	height: 12px;
	margin-top: 14px;
	margin-right: 8px;
}
html .site-header #site-nav .menu_item.logosocial svg {
	width: 40px;
	height: 40px;
	transform: scale(0.6);
}

html .site-header #site-nav a {
	display: block;
	height: 23px;
	line-height: 23px;
	padding: 0 19px;
	color: #fff;
	text-transform: uppercase;
	font-size: 12px;
	text-decoration: none;
	transition: 200ms;
	transition-timing-function: ease-in-out;
	-webkit-transition: 200ms;
	-webkit-transition-timing-function: ease-in-out;
}


html {
	padding-top: 0;
}
html body {
	padding-top: 0;
}

html .site-header {
	/*background: transparent;*/
	/*min-width: 40px;*/
	display: inline-block;
	overflow: hidden;
	/*width: 306px;*/
	width: 100%;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

html .site-header #site-nav {
	width: 100%;
	min-width: 652px;
	max-width: 70%;
	overflow: hidden;
	-webkit-transition: width 0.05s ease-in-out;
	-moz-transition: width 0.05s ease-in-out;
	-o-transition: width 0.05s ease-in-out;
	-ms-transition: width 0.05s ease-in-out;
	transition: width 0.05s ease-in-out;
	cursor: pointer;
}
html .site-header #site-nav ul {
	width: 100%;
	height: 100%;
	/*position: absolute;*/
	/*top: -11px;*/
	/*right: 0;*/
}

html .post-body h2 {
	font-size: 25px;
	line-height: 1.35;
	margin-top: 52px;
	margin-bottom: 0;
}
html .post-body h3 {
	font-size: 20px;
	line-height: 1.35;
	margin-top: 30px;
	margin-bottom: 0px;
}
html .post-body img {
	max-width: 100%;
	height: auto;
}

html .post-body pre {
	border: 10px #ddd solid;
	padding: 14px 18px;
	margin-top: 42px;
	margin-bottom: 64px;
	font-size: 14px;
	position: relative;
}
html .post-body pre:before {
	content: 'Code';
	text-transform: uppercase;
	position: absolute;
	bottom: -32px;
	left: -10px;
	font: 14px 'Source Sans Pro', sans-serif;
}

html#html .index article a:hover, html#html .page-body a {
	-webkit-transition: color 0s linear;
	-moz-transition: color 0s linear;
	-o-transition: color 0s linear;
	-ms-transition: color 0s linear;
	transition: color 0s linear;
}

html#html.brand-red #logo path {
	fill: #F69E9B;
}

html#html.brand-red  .grid-item-inside {
	background-color: #F69E9B;
}
html#html.brand-red #nosotros-div {
	background-color: #01BAB8;
}
html#html.brand-red .nos .inside {
	fill: #3FB8CF;
}

html#html.brand-red #marketing-div {
	background-color: #F7A600;
}
html#html.brand-red .market .inside {
	fill: #F7A600;
}
html#html.brand-red .parallax-window1 {
	background: linear-gradient(to bottom,  #01BAB8 0%,#01BAB8 50%,#FFF 50%,#FFF 100%);
}
html#html.brand-red .parallax-window2 {
	background: linear-gradient(to bottom,  #FFF 0%,#FFF 50%,#F7A600 50%,#F7A600 100%);
}
/*
 html#html.brand-red .grid-item-close{
 background-color: #F69E9B;
 }
 */
html#html.brand-red #home .page-header {
	background-image: url("../img/sombreros-rosa.jpg");
	background-color: #F69E9B;
}

html#html.brand-red .site-header #site-nav a:hover {
	color: #F69E9B;
}
html#html.brand-red .site-header #site-nav ul.topnav li.icon:hover {
	color: #F69E9B;
	border-color:#F69E9B; 
}
html#html.brand-red #menuresp a:hover {
	color: #F69E9B;
	 
}


html#html.brand-red .index article a:hover, html#html.brand-red .page-body a {
	color: #F69E9B;
}

html#html.brand-gold #logo path {
	fill: #F7A600;
}


html#html.brand-gold  .grid-item-inside {
	background-color: #F7A600;
}
html#html.brand-gold #nosotros-div {
	background-color: #F69E9B;
}
html#html.brand-gold #marketing-div {
	background-color: #01BAB8;
}
html#html.brand-gold .nos .inside {
	fill: #F69E9B;
}
html#html.brand-gold .market .inside {
	fill: #3FB8CF;
}
html#html.brand-gold .parallax-window1 {
	background: linear-gradient(to bottom,  #F69E9B 0%,#F69E9B 50%,#FFF 50%,#FFF 100%);
}
html#html.brand-gold .parallax-window2 {
	background: linear-gradient(to bottom,  #FFF 0%,#FFF 50%,#01BAB8 50%,#01BAB8 100%);
}
/*
 html#html.brand-gold .grid-item-close{
 background-color: #F7A600 ;
 }
 */
html#html.brand-gold #home .page-header {
	background-image: url("../img/sombreros-amarillo.jpg");
	background-color: #F7A600;
}
html#html.brand-gold .site-header #site-nav a:hover {
	color: #F7A600;
}
html#html.brand-gold .site-header #site-nav ul.topnav li.icon:hover {
	color: #F7A600;
	border-color:#F7A600; 
}
html#html.brand-gold #menuresp a:hover {
	color: #F7A600;
}

html#html.brand-gold .index article a:hover, html#html.brand-gold .page-body a {
	color: #F7A600;
}

html#html.brand-green #logo path {
	fill: #01BAB8;
}


html#html.brand-green  .grid-item-inside {
	background-color: #01BAB8;
}
html#html.brand-green #nosotros-div {
	background-color: #F7A600;
}
html#html.brand-green #marketing-div {
	background-color: #F69E9B;
}
html#html.brand-green .nos .inside {
	fill: #F7A600;
}
html#html.brand-green .market .inside {
	fill: #3FB8CF;
}
html#html.brand-green .parallax-window1 {
	background: linear-gradient(to bottom,  #F7A600 0%,#F7A600 50%,#FFF 50%,#FFF 100%);
}
html#html.brand-green .parallax-window2 {
	background: linear-gradient(to bottom,  #FFF 0%,#FFF 50%,#F69E9B 50%,#F69E9B 100%);
}
/*
 html#html.brand-green .grid-item-close{
 background-color: #01BAB8;
 }
 */
html#html.brand-green #home .page-header {
	background-image: url("../img/sombreros-verde.jpg");
	background-color: #01BAB8;
}

html#html.brand-green .site-header #site-nav a:hover {
	color: #01BAB8;
}
html#html.brand-green .site-header #site-nav ul.topnav li.icon:hover {
	color: #01BAB8;
	border-color:#01BAB8; 
}
html#html.brand-green #menuresp a:hover {
	color: #01BAB8;
}

html#html.brand-green .index article a:hover, html#html.brand-green .page-body a {
	color: #01BAB8;
}

body.default .index article, body .t_default .index article, body.default .page-header, body .t_default .page-header {
	text-transform: uppercase;
	font-family: 'Open Sans', sans-serif;
	font-size: 9px;
	letter-spacing: 1px;
}
body.default .index article h1, body .t_default .index article h1, body.default .page-header h1, body .t_default .page-header h1 {
	margin: 0;
	font-size: 36px;
	line-height: 1.1;
	font-family: 'Open Sans', sans-serif;
	letter-spacing: 0;
	text-transform: none;
}

#html .index {
	padding-top: 48px;
	padding-bottom: 72px;
	padding-right: 14px;
	padding-left: 14px;
}
#html .index article {
	margin-bottom: 20px;
}
#html .index article a {
	color: #333;
	position: relative;
	display: block;
	padding: 9px 0;
}
#html .index article a:hover {
	color: 'inherit';
}

#html .index article a span {
	display: none;
	position: absolute;
	top: 0;
	right: 100%;
	margin-right: 5px;
	border-left: 9px #efefef solid;
	height: 100%;
	width: 0;
}

#html #wrapper {
	overflow: auto;
}
#html.hacky-scroll {
	background: #fff;
}
#html.hacky-scroll #wrapper {
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
html .site-header {
		height: 72px;
	}
	html .site-header #logo {
		width: 65px;
		height: 65px;
		cursor: pointer;
	}
	html .site-header #site-nav {
		/*float: right;*/
		width: 100%;
		min-width: 652px;
		max-width: 70%;
		margin-top: 3px;
	}
	html .site-header #site-nav .menu_item {
		margin-top: 22px;
	}
	html .site-header #site-nav a {
		height: 23px;
		line-height: 23px;
	}
	html .site-header #site-nav li:first-child a {
		padding-left: 32px;
	}
	html .site-header #site-nav li:last-child a {
		padding-right: 32px;
	}
	
	html .site-header {
		-webkit-transition: none;
		-moz-transition: none;
		-o-transition: none;
		-ms-transition: none;
		transition: none;
	}
	html .site-header #site-nav {
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
		-webkit-transition: width 0.05s ease-in-out;
		-moz-transition: width 0.05s ease-in-out;
		-o-transition: width 0.05s ease-in-out;
		-ms-transition: width 0.05s ease-in-out;
		transition: width 0.05s ease-in-out;
		cursor: pointer;
	}
	html .site-header #site-nav ul {
		width: 100%;
		height: 100%;
	}

	html .site-header {
		width: 100%;
	}
	html .site-header #site-nav {
		width: 100%;
		max-width: 70%;
		min-width: 823px;
	}
	html .site-header #site-nav ul {
		width: 100%;
	}
#html #home .page-header {
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: auto 100%;
	-moz-background-size: auto 100%;
	background-size: auto 100%;
	/*height: 495px;*/
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
	position: relative;
	padding-top: 120px;
	margin-bottom: 0;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	height: 100vh;
	min-height: 495px;
	font-size: 18px;
	border: none;
}
#html #home .page-header h1 {
	font-size: 42px;
	line-height: 0.9;
	margin: 0 0 0.67em 0;
}

#html #home .page-header__content {
	position: absolute;
	top: calc(40% + 65px);
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
}
.page-header__content img {
	height: 25vh;
	width: 25vw;
	min-height: 175px;
	min-width: 200px;
}
.page-header__content svg {
	height: 40vh;
	min-height: 175px;
	width: 40vw;
	min-width: 200px;
	margin-bottom: 20px;
}

#lblTrabajos {
	text-align: center;
	margin-bottom: 70px !important;
	color: #666;
}

#lblClientes {
	text-align: center;
	margin-bottom: 70px !important;
	color: #666;
}
#clientes {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 70px;  
}
#html #home section {
	overflow: hidden;
	position: relative;
	font-size: 12px;
	text-align: center;
	color: #FFF;
	/*border-bottom: 1px #e6e6e6 solid;*/
	/* margin-left: 10px; */
}
#html #home section:last-child {
	border-bottom: none;
}
#html #home section .content {
	position: relative;
}
#html #home section h1 {
	font-size: 32px;
	line-height: 1;
}
#html #home section h1 + p {
	margin-top: -4px;
}

html#html body#body.default .index article, html#html body#body .t_default .index article, html#html body#body.default .page-header, html#html body#body .t_default .page-header {
	text-transform: uppercase;
}



html.html .placeholder {
	color: #000;
}
html#html .placeholder {
	color: #000;
}

::selection {
	background: #eee;
	background: rgba(0,0,0,0.08);
}

#map-canvas {
	width: 100%;
	height: 60vh;
}
#map-canvas img {
	max-width: none;
}
.gm-style-iw {
	left: 0 !important;
	padding-left: 15px;
	color: #333;
	line-height: 15px;
	text-align: left;
}

.col1 {
	float: left;
	width: 60%;
	margin-top: 50px;
}
.col2 {
	float: left;
	width: 40%;
	margin-top: 70px;
	font-size: 14px;
}
.col2 img {
	width: 40%;
}
.col2 div {
	text-align: left;
	margin-left: 20%;
}
.col2 div svg {
	float: left;
	width: 40px;
    height: 40px;
	    margin-right: -5px;
    margin-left: -5px;
	cursor: pointer;
    transform: scale(0.6);
}
#dir {
	margin-left: 0;
    margin-top: 15px;
    margin-bottom: 15px;
}
#telmail {
	margin-left: 0;
	margin-bottom: 15px;
}

#telmail a {
	color: #FFF !important;
	
}

.contact-form .form-element {
	width: 100%;
	padding: 1.3 rem 2.5 rem;
	padding-left: 0;
	padding-right: 0;
	/*margin: 0 0 1.5rem 0;*/
	/*margin-bottom: 3rem;*/
	background: none;
	border-top: none;
	border-right: none;
	border-bottom: 1px solid #ccc;
	border-left: none;
	letter-spacing: 0.1 rem;
	color: #FFF;
	font-size: 12px;
	outline: none;
}

.contact-form input[type=submit] {
	margin-bottom: 0;
}
.contact-form input[disabled=disabled][type=submit] {
	opacity: 0.6;
}
/*
.form-element[class*="border-"] {
	background: #fff;
}
*/
.form-element + .border {
	width: 0;
	height: 2px;
	position: absolute;
	left: 0;
	/*bottom: 3rem;*/
	margin-top: -3px;
	
	z-index: 102;
	background-color: #FFF;
	-webkit-transition-property: width;
	-moz-transition-property: width;
	-ms-transition-property: width;
	-o-transition-property: width;
	transition-property: width;
	-webkit-transition-duration: 500ms;
	-moz-transition-duration: 500ms;
	-o-transition-duration: 500ms;
	-ms-transition-duration: 500ms;
	transition-duration: 500ms;
	-webkit-transition-delay: 200ms;
	-moz-transition-delay: 200ms;
	-o-transition-delay: 200ms;
	-ms-transition-delay: 200ms;
	transition-delay: 200ms;
}
@-moz-document url-prefix() { 
 .form-element + .border {
 	margin-top: 27px;
 }
 textarea.form-element + .border {
 	top: 277px;
 }
}
.form-element:focus + .border {
	width: 60%;
}

.form-element.required-field, textarea.required-field {
	background: none;
	border-color: #e62739;
	color: #e62739;
}

.form-message {
	height: 200px;
}
#sentinfo {
	display: none;
	position: fixed;
	top:50%;
	left: calc(50% - 200px);
	padding: 7px;
	border-radius: 4px;
	background: #f4a3a2;
}
.grid {
	width: 90%;
	margin-bottom: 100px;
	margin: 0 auto;
}

.grid-sizer, .grid-item {
	float: left;
	width: 32%;
	height: 20vw;
	margin-bottom: 2vw;
	display: inline-block;
	cursor: pointer;
}
.gutter-sizer { 
	width: 2%; 
}
.grid-item-closed {
	height: 80%;
	position: relative;
    top: 10%;
	background-image: url('../img/portfolio_circulo.svg');
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2%;
    font-size: 14px;   
}
.grid-item-closed span {
	line-height: 20px;
}

.grid-item-inside {
	width: 100%;
	height: 100%;
	 /*
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	*/
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	background-size: cover;
	background-position: center;
}

.grid-item-inside:hover {
	/*
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);
	*/
	zoom: 1;
	filter: alpha(opacity=50);
	opacity: 0.50;
}
.gigante .grid-item-inside:hover {
	zoom: 1;
	filter: alpha(opacity=100);
	opacity: 1;
}

.gigante {
	width: 100%;
	height: 0;
	padding-bottom: 56.25%; /* 16:9 */
	position: relative;
}

.gigante .grid-item-inside {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */
	filter: grayscale(0%);
}
.grid-item-close {
	display: none;
	width: 30px;
	height: 30px;
	position: absolute;
	float: right;
	top: 10px;
	right: 18px;
	background-image: url('../img/cerrar.svg');
	background-repeat: no-repeat;
}
.gigante .grid-item-close {
	display: block;
}

.ifrm {
	display: none;
}

.grid-item-lable {
	position: absolute;
    background-color: rgba(0,0,0,0.5);
    text-align: center;
    border-radius: 50%;
    height: calc(90% - 20px);
    width: 17vw;
    left: calc(50% - 8.5vw);
    top: 27px;
}

.grid-item-lable-text {
	margin-top: calc(50% - 50px);
}
.grid-item-mas {
	width: 30px;
	height: 30px;
	border: solid 1px #FFFFF; 
	border-radius: 50%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
	text-align: center;
	line-height: 29px;
}

.parallax-window {
	min-height: 100px;
	height: 30vh;
}

html .page-body ul.marketing-ul li {
	margin-bottom: 0;
}

#svg_nosotros {
	margin-bottom: 120px;
	width: 80%;
}

.page-header h2 {
	font-weight: 300;
}
#puntitos {
	font-size: 68px;
	line-height: 35px;
}

#enviar {
	height: 50px;
	width: 50px;
	line-height: 47px;
	font-size: 11px;
	text-align: center;
	border: none;
	border-radius: 50%;
	background-color: #FFF;
	float: right;
	color: #666;
}
.carousel {
	display: none;
	width: 100%;
	height: 100%;
	cursor: default;
}

.carousel-inner {
	width: 100%;
	height: 100%;
}
.carousel-inner .item {
	width: 100%;
	height: 100%;
}
.carousel-inner .item img {
	width: 100%;
	height: 100%;
}
.carousel-inner .item iframe {
	width: 100%;
	height: 100%;
}
.iframe_solo {
	display: none;
	width: 100%;
	height: 100%;
}

.carousel-control {
	width: 5%;
	background-color: transparent !important;
    background-image: none !important;
}
a.carousel-control  {
	color: #999 !important;
}
 
@keyframes popup {
	0% {
	/*transform: translateY(-12px);*/
		transform: rotate(0deg);
	}
	30% {
		transform: rotate(-40deg);
	}
	70% {
		transform: rotate(-40deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
#logo_li:hover > #logo{
	animation: popup 800ms ease-out;
}

#logo {
	transform-origin: 0% 100%;
	margin-left: 13px !important;
	/*
	 transition: 200ms;
	 transition-timing-function: ease-in-out;
	 -webkit-transition: 200ms;
	 -webkit-transition-timing-function: ease-in-out;
	 */
}

.logo_f:hover {
	transition: 400ms;
	transition-timing-function: ease-in-out;
	-webkit-transition: 400ms;
	-webkit-transition-timing-function: ease-in-out;
	fill: #3B5998;
}

.logo_i:hover > .logo_i_path {
	transition: 400ms;
	transition-timing-function: ease-in-out;
	-webkit-transition: 400ms;
	-webkit-transition-timing-function: ease-in-out;
	fill: url(#a);
}
@-moz-document url-prefix() {
	.logo_i:hover > .logo_i_path {
		transition: 400ms;
		transition-timing-function: ease-in-out;
		-webkit-transition: 400ms;
		-webkit-transition-timing-function: ease-in-out;
		fill: url("../../#a");
	}
}
.logo_y:hover {
	transition: 400ms;
	transition-timing-function: ease-in-out;
	-webkit-transition: 400ms;
	-webkit-transition-timing-function: ease-in-out;
	fill: #E30613;
}

.logosocial a {
	padding: 0 !important;
}

.glyphicon-chevron-left:before {
    content: "\e257";
}
.glyphicon-chevron-right:before {
    content: "\e258";
}



	

	
	
	

/* MENU 
 * 
 *  http://www.w3schools.com/howto/howto_js_topnav.asp  
 */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover 
ul.topnav li a:hover {background-color: #111;}
*/
/* Hide the list item that contains the link that should open and close the topnav on small screens */

ul.topnav li.icon {
	display: none;
	position: relative;
    float: right !important;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: #000;
    background-image: none;
    color: #FFF;
    border: 1px solid #FFF;
    border-radius: 4px;
    font-size: 12px;
}
#menuresp {
	display: none;
    position: fixed;
    top: 60px;
    width: 100%;
    background-color: #000;
    z-index: 999;
    padding:15px; 
}
#menuresp a {
	cursor:pointer;
	display: block;
	color: #FFF;
	font-size: 14px;
    font-weight: normal;
    line-height: 7px;
	transition: 200ms;
    transition-timing-function: ease-in-out;
    -webkit-transition: 200ms;
    -webkit-transition-timing-function: ease-in-out;
    list-style-type: none;
}
#menuresp a:hover {
    text-decoration: none;
}


/* http://ianlunn.github.io/Hover/ */
/* Ripple Out */
/*
@-webkit-keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}
*/
@keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}

.hvr-ripple-out {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}
.hvr-ripple-out:before {
  content: '';
  position: absolute;
  border: #ffffff solid 6px;
  border-radius: 50%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation-duration: 1100ms;
  animation-duration: 1100ms;
}
.hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before {
  -webkit-animation-name: hvr-ripple-out;
  animation-name: hvr-ripple-out;
}

@media (max-width: 599px) {
	html .site-header #site-nav a {
    	height: 20px;
    	line-height: 20px;
    	font-size: 11px;
    	padding: 0 6px;
	} 
	html .site-header #site-nav .menu_item.logosocial {
    	margin-top: 12px;
    	margin-right: 5px;
	}
	html .site-header #site-nav .menu_item.logosociallast {
    	margin-right: 8px;
	}
 
	  html .site-header #site-nav ul.topnav li:not(:first-child) {
	  	display: none;
	  }
	  html .site-header #site-nav ul.topnav li.icon {
	    float: right;
	    display: inline-block;
	  }
	  
	  html .site-header #site-nav ul.topnav.responsive {position: relative;}
	  html .site-header #site-nav ul.topnav.responsive li.icon {
	    position: absolute;
	    right: 0;
	    top: 0;
	    
	  }
	  html .site-header #site-nav ul.topnav.responsive li.menu_item {
	    float: none;
	    display: none;
	    border: none;
	  }
	  html .site-header #site-nav ul.topnav.responsive li a {
	    display: block;
	    text-align: left;
	  }
		
  	#menuresp.responsive {
		display: block;
	}
}
/* FIN MENU */


/* 320dp: a typical phone screen (240x320 ldpi, 320x480 mdpi, 480x800 hdpi, etc). *
 360x640
 smartphones, iPhone, portrait 480x320 phones 
 480dp: a tweener tablet like the Streak (480x800 mdpi). 
 */
@media (max-width: 599px) {
	html .site-header {
	    height: 60px;
	}
	html .site-header #logo {
    	width: 60px;
    	height: 60px;
	}
	html .site-header #site-nav {
	    width: 100%;
	    min-width: 100px;
	    max-width: none;
	    margin-top: 0px;
	}
	
	.page-header h2 {
	    font-size: 14px;
	}
	html .page-body h3 {
	    line-height: 24px;
	    font-size: 14px;
	    margin-left: 2%;
	    margin-right: 2%;
	}
	#svg_nosotros {
	    margin-top: 20px;
	    margin-bottom: 40px;
	    width: 98%;
	}
	.grid-item-closed {
		line-height: 18px;
	}
	
	.grid-sizer, .grid-item  {
	    float: left;
	    width: 100%;
	    height: 55vw;
	    margin-bottom: 4vw;
	}
	#lblClientes {
	    text-align: center;
	    margin-bottom: 20px !important;
	    color: #666;
	}
	#clientes {
    	width: 100%;
    	margin-bottom: 30px;
    } 
    html .page-body #marketing-div h3 {
	    line-height: 27px;
	}
    #map-canvas {
		margin-top: 30px;
	}
    .form-element + .border {
		left: 10%;
	}
    .form-element:focus + .border {
		width: 80%;
		left: 10%;
	}
	@-moz-document url-prefix() { 
	 .form-element + .border {
	 	margin-top: 22px;
	 }
	 textarea.form-element + .border {
	 	top: 223px;
	 }
	}
 	.col1 {
 		float: none;
 		width:80%;
 		margin-left: auto;
 		margin-right: auto;
 		
 	}
 	.col2 {
    	float: none;
	    width:80%;
 		margin-left: auto;
 		margin-right: auto;
	    margin-top: 70px;
	    font-size: 14px;
	}
	.col2 div {
	    text-align: center;
	    margin-left: 0;
	}
	.col2 div svg {
	    margin-right: 0;
	    margin-left: 14%;
	}
	#copy-div {
	    padding: 0 !important;
	}
}


/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. 
 600dp: a 7” tablet (600x1024 mdpi).
720dp: a 10” tablet (720x1280 mdpi, 800x1280 mdpi, etc).
*/
@media (min-width:600px) and (max-width: 799px) {  
	html .site-header {
	    height: 60px;
	}
	html .site-header #logo {
    	width: 60px;
    	height: 60px;
	}
	html .site-header #site-nav {
	    width: 100%;
	    max-width: 70%;
	    min-width: 580px;
	    margin-top: 0px;
	}
	html .site-header #site-nav a {
    	height: 20px;
    	line-height: 20px;
    	font-size: 11px;
    	padding: 0 6px;
	}
	
	
	.page-header__content img {
	    height: 27vh;
	    width: 35vw;
	    min-height: 175px;
	    min-width: 200px;
	}
	.page-header h2 {
    	font-size: 14px;
	} 
	html .site-header #site-nav .menu_item.logosocial {
    	margin-top: 12px;
    	margin-right: 5px;
	}
	html .site-header #site-nav .menu_item.logosociallast {
    	margin-right: 8px;
	}
	
	html .page-body h3 {
	    line-height: 23px;
	    font-weight: normal;
	    font-size: 14px;
	}
	
	#svg_nosotros {
		margin-top: 20px;
	    margin-bottom: 100px;
	    width: 95%;
	}
	#lblTrabajos {
	    margin-bottom: 35px !important;
	    color: #666;
	}	
	.grid-sizer, .grid-item {
	    float: left;
	    width: 48%;
	    height: 30vw;
	    margin-bottom: 1.5vw;
	}
	.gigante {
    	width: 100%;
    	height: 0;
    	padding-bottom: 56.25%;
    	position: relative;
	}
/* CHEQUEAR OPEN */
	.grid-item-closed {
	    font-size: 12px;
	    line-height: 16px;
	}
	#lblClientes {
		margin-top: 30px;
    	margin-bottom: 35px !important;
	}
	#clientes {
    	width: 95%;
	}
	html .page-body #marketing-div h3 {
	    line-height: 25px;
	}
	#map-canvas {
	    margin-top: 30px;
	}
	.col1 {
	    width: 55%;
	    margin-left: 5%;
	}
	.col2 {
    	width: 35%;
	}
	.form-element + .border {
		left: 5%;
	}
    .form-element:focus + .border {
		width: 55%;
		left: 5%;
	}
	@-moz-document url-prefix() { 
	 .form-element + .border {
	 	margin-top: 22px;
	 }
	 textarea.form-element + .border {
	 	top: 272px;
	 }
	}
	#enviar {
	    height: 40px;
	    width: 40px;
	    line-height: 38px;
	    font-size: 9px;
	}
	#copy-div {
	    padding: 0 !important;
	}
}



/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones
 * tablet, landscape iPad, lo-res laptops ands desktops */
@media (min-width:800px) and (max-width: 1099px) { 
	html .site-header {
	    height: 65px;
	}
	html .site-header #site-nav a {
    	height: 20px;
    	line-height: 20px;
    	font-size: 12px;
	} 
	html .site-header #site-nav {
	    width: 100%;
	    max-width: 70%;
	    min-width: 770px;
	}
	html .site-header #site-nav .menu_item.logosocial {
    	margin-top: 12px;
	}
	.page-header__content img {
    	height: 30vh;
    	width: 30vw;
	}
	#html #home .page-header h2 {
		margin-top: 12vh;
		font-size: 16px;
	}
	#html #home section {
    	padding: 0;
	}
	#html #home section h1 {
    	font-size: 34px;
    	line-height: 0.88;
    	margin-top: 40px;
    	margin-bottom: 40px;
	}
	html .page-body h3 {
    	line-height: 24px;
    	font-size: 16px;
    	margin-top: 0;
	}
	#nosotros-div h3 {
 	   margin-bottom: 50px;
	}
	#svg_nosotros {
		width: 90%;
		margin-bottom: 80px;
	}
	#lblTrabajos {
    
    	margin-bottom: 40px !important;
    
	}
	
	.grid {
    	width: 95%;
	}
	.grid-item-closed {
	    height: 90%;
	    top: 5%;
	    padding-bottom: 5%;
	    font-size: 12px;
	}
	#lblClientes {
		margin-bottom: 40px !important;
	}
	#clientes {
	    width: 90%;
	    margin-bottom: 50px;
	    
	}
	html .page-body #marketing-div h3 {
		font-size: 16px;
	    line-height: 28px;
	    margin-bottom: 40px;
	}
	
	
	#html #home section .layout-frame {
	    /* width: 907px; */
	    width: 100%;
	    max-width: 90%;
	    min-width: 770px;
	    margin: 0 auto;
	}
	.col1 {
    
    	margin-bottom: 20px;
	}
	#copy-div h3 {
		margin-top: 15px;
    	margin-bottom: 15px;
	    font-size: 10px !important;
	    line-height: 10px !important;
	}
	.form-element + .border {
    	margin-top: -4px;
	}
	textarea.form-element + .border {
    	margin-top: -1px;
	}
	@-moz-document url-prefix() { 
	 .form-element + .border {
	 	margin-top: 22px;
	 }
	 textarea.form-element + .border {
	 	top: 296px;
	 }
	}
}


/* big landscape tablets, laptops, and desktops */
@media (min-width:1100px) { 
	#html #home .page-header h1 {
		letter-spacing: 0.0625em;
		font-size: 60px;
	}
	#html #home .page-header h2 {
		margin-top: 17vh;
		font-size: 18px;
	}
	#html #home section {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding-top: 0 !important;
		padding-left: 0 !important;
		/*margin-top: 20px;*/
		/*margin-bottom: 20px;*/
		font-size: 16px;
		font-family: 'Open Sans', sans-serif;
	}
	#html #home section .layout-frame {
		/*width: 907px;*/
		width: 100%;
		max-width: 70%;
		min-width: 823px;
		margin: 0 auto;
		position: relative;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	#html #home section h1 {
		margin-top: 70px;
		margin-bottom: 40px;
		margin-right: 0;
		font-size: 40px;
		font-weight: 300;
	}	
	
	#html .page-body h3 {
		font-size: 16px;
	    line-height: 30px;
	    font-weight: normal;
	}
	#nosotros-div h3 {
		margin-bottom: 70px;
	}
	#html #home section p {
		width: 285px;
		width: 570px;
	}
	#html #home #contacto-div h1 {
		margin-bottom: 70px !important;
	}	
}