/*  Title: Estilos principal usando Response Design 
 *	Author: @aminchavarria
 *  Creacion: 7-jun-2016 
 *  Company: OLe Tech
 *  Web site: http://www.oleTech.com.mx
 *  Free to use*/

 .robotic { display: none; }

/*
@font-face {
	font-family: "Ubuntu";
	font-style: normal;
	font-weight: normal;
	src: url("fonts/Ubuntu-Regular.ttf");
}
@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: normal;
	src: url("fonts/Lato-Lig.ttf") format('truetype');	// Safari, Android, iOS 
}

@font-face {
	font-family: "Museo";
	font-style: normal;
	font-weight: normal;
	src: url("fonts/Museo300-Regular.otf");
}

@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot?ssjmvs');
	src:url('fonts/icomoon.eot?#iefixssjmvs') format('embedded-opentype'),
		url('fonts/icomoon.woff?ssjmvs') format('woff'),
		url('fonts/icomoon.ttf?ssjmvs') format('truetype'),
		url('fonts/icomoon.svg?ssjmvs#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== 
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

[data-icon]:before {
	font-family: 'broccolidry';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.icon-play {
	font-family: 'broccolidry';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	font-size: 1em;
	-webkit-font-smoothing: antialiased;
}
.icon-play:before {
	content: "\25c2";
}

*/
/* -- DEFAULT -- */
body{
	background-color: #000; 
	font-family: 'Museo', sans-serif;
	font-size: 100%; /* 16px */
	color: #fff;
}
h1,h2,h3{
	font-family: 'Lato', verdana;
}
h1{
	font-size: 2em;  /* 32px */
};

h2{
	font-size: 1.125em;  /*20 px */
}

h3{
	font-size: 1.115em;  /*20 px */
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

nav {
	--height: 40px;
	width: 100%;
	background: #455868;
	font-size: 16px;
	font-family: Ubuntu, verdana;
	font-weight: normal;
	position: relative;
	border-bottom: 2px solid #283744;
	display: block;
	overflow: auto;
}
nav ul {
	padding: 0;
	margin: 0 auto;
	/* width: 800px;	 /* ancho del menu */
	height: 40px;		/* alto del menu */
	display: table;		/* para centra los elementos */
}
nav li {
	display: inline;
	float: left;
}
nav a {
	color: #fff;
	display: inline-block;
	width: 128px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	text-shadow: 1px 1px 0px #283744;
}
nav li a {
	border-right: 1px solid #576979;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
nav li:last-child a {
	border-right: 0;
}
nav a:hover, nav a:active {
	background-color: #8c99a4;
}
nav a#pull {
	display: none;
}

/* Me */
#contendor{
	min-width: 200px;
}

.telefonos a, .telefonos a:visited, footer a, footer a:visited{
	color: #76daff;
	text-decoration: none;
}

.telefonos a:hover, footer a:hover {
	text-decoration: underline;
}

header .logo{
	float: left;
	max-width: 100%;
	position: relative;
	margin: 5px 0px 10px 5px;
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-transform-origin: 0 100%;
	transform: translateZ(0);
	backface-visibility: hidden;
	transform-origin: 0 100%;	
}

header .logo:hover,header .logo:focus, header .logo:active{
	-webkit-animation-name: logo;
  	-webkit-animation-duration: 1s;
  	-webkit-animation-timing-function: ease-in-out;
  	-webkit-animation-iteration-count: 1;

	animation-name: logo;
  	animation-duration: 1s;
  	animation-timing-function: ease-in-out;
  	animation-iteration-count: 1;
}

.banner-principal, .trabajos-recientes{
	text-align: center;
}

.anuncios ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

 .anuncios ul > li {
	border: 1px solid #fcd000;
	background: #fcd000;
	color: #000;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	list-style-type: none;
	padding: 10px;
	margin: 15px 15px;
	position: relative;
	box-shadow: 0 3px 4px #555;
}

.anuncios ul > li:hover{
	background: #d8b924;
	color: #000;
}
/* burbuja */
.anuncios ul > li:before{
	content: "";
	width: 0;
	position: absolute;
	border-style: solid;
	border-width: 10px 5px 0 5px;
	border-color: #fcd000 transparent;
	bottom: -10px;
	left: 50px;
}

footer {
	background: rgba(40,40,43,1);
	color: rgba(149,149,149,1);
	padding: 25px 0;
	float: left;
	width: 100%;
}

footer .contacto{
	text-align: center;
	font-size: 0.85em;
}

.productos h1,h3{
	text-align: center;
}

.productos li{
	margin: 0 auto;
	text-align: center;
	display: block;
}

.productos p{
	text-align: center;
	line-height: 25px;
	margin: 0 auto;
	width: 60%;
	margin-bottom: 20px;
}

.productos article{
	text-align: center;
}
.productos picture{
	text-align: center;
	margin: 0 10px;
}

.productos img{
	width: 30%;
}

p > .mini-importante{
	color: gray;
	font-size: 0.8em;
	font-style: italic;
	padding-bottom: 50px;
}

.nosotros h1{text-align: center;}

.nosotros article {display: flex; }
.nosotros article p{
	padding: 0 10%;
	line-height: 25px;
}

.contacto h1{text-align: center; }
.contacto article {display: flex; }
.contacto article p{
	padding: 0 10%;
	line-height: 25px;
	text-align: center;
}

.contacto form{
	width: 60%;
	margin: 0 auto;
	margin-bottom: 40px;
	margin-top: 50px;
}
div .der{
	width: 100%;
    text-align: center;
    margin-top: 1px;
}

div .der ul {
	text-align: left;
	margin-left: 35px;
}

div .der ul > li {
	margin-bottom: 15px;
}

fieldset{
	background-color: #2F2F2F;
	padding: 20px 30px;
}

input {
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	box-sizing: border-box;
}

input[type=text],input[type=email],input[type=tel] {
	border: 1px solid #ccc;
	background-color: #f1f1f1;
}

textarea{
	width: 93%;
	height: 150px;
	background-color: #f1f1f1;
	border: 1px solid #ccc;
	padding: 12px 20px;
	margin: 8px 0;
	resize: none;
}

select {
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	border: none;
	box-sizing: border-box;
	background-color: #f1f1f1;
	
}

input[type=button], input[type=submit] {
	border: none;
	padding: 16px 32px;
	text-decoration: none;
	margin: 4px 2px;
	cursor: pointer;
	background-color: #67ab49;
	border-radius: 4px;
	color: white;
}

input[type=button]:hover, input[type=submit]:hover {background-color: #42712E; }
select, textarea, input[type=text],input[type=email], input[type=tel]{
	color: black;
	border-radius: 4px;
	padding: 12px 10px;
	margin-bottom: 25px;
}

input[type=text]:focus, input[type=email]:focus, textarea:focus {background-color: lightblue; }
fieldset{border: none;}

.Testimonios h1{
	text-align: center;
}

.Testimonial{
	width: 46%;
	float: left;
	margin-bottom: 80px;
	margin-left: 3%;
	margin-top: 40px;
}

.Testimonial-imagen{
	float: left;	
	overflow: hidden;
	border-radius: 50%;
}

.Testimonial-imagen img{
	width: 200px;
	height: 200px;
}

.Testimonial-contenido{
	margin-left: 210px;
	margin-top: 5px;
	text-align: left;
}

.Testimonial-contenido p{
	margin-bottom: 20px;
	line-height: 20px;
	width: 80%;
	font-size: 0.9em;
}

.Testimonial-nombre{
	margin-left: 209px;
}

/**************************************************************************************************************
/* 													768px iPad 	     		 								 */
/*************************************************************************************************************/
@media screen and (max-width: 768px) {
	nav { height: auto; /* 100% */ }
	 
	 nav ul {
	  	width: 100%;
	  	display: block;
	  	height: auto;
	 }
	 
	 nav li {
	  	width: 50%;
	  	float: left;
	  	position: relative;
	 }
	 
	 nav li a {
		border-bottom: 1px solid #576979;
		border-right: 1px solid #576979;
	}

	nav a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;
	}

	h1{
		font-size: 1.5em;
	}

	h2{
		font-size: 1.3em;
	}

	h3{
		font-size: 1.2em;
	}

	footer{
		float: left; 
		margin-top: 30px;
	}

	.contacto form{
		width: 80%;
		margin-bottom: 40px;
	}

	div iframe{width: 100%;}

	.Testimonial{
		width: 95%;
		margin-bottom: 40px;
	}

	.productos p{
		width: 90%;
	}
}
/*************************************************************************************************************/
/*							Styles for screen 640px and lower    											 */
/*************************************************************************************************************/
@media only screen and (max-width : 640px) {
	nav { border-bottom: 0; }
	nav ul {
		display: none;
		height: auto;
	}
	nav a#pull {
		display: block;
		background-color: #283744;
		width: 100%;
		position: relative;
	}
	nav a#pull:after {
		content:"";
		background: url('../images/nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}

	h1{
		font-size: 1.4em;
	}

	h2{
		font-size: 1.2em;
	}

	h3{
		font-size: 1.1em;
	}

	/* me */
	header .logo {
		margin: 0 auto;
		display: block;
		float: none;
	}

	footer{
		margin-top: 20px;
	}

	.footer-izq{
		border-top: 1px solid #014254;
		width: 100%;;
	}

	.footer-izq p{
		font-size: 1em;
		color: #fff;
		text-align: center;
	}

	.footer-der{
		width: 100%;
		border: 0;
	}

	.footer-der p{
		font-size: 0.9em;
		color: #fff;
		text-align: center;
	}

	.nosotros article {
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.nosotros article p{
		padding: 0 2%;
	}

	.contacto article {
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.contacto form{
		width: 95%;
		margin-bottom: 30px;
	}

	div .der{margin-top: 20px;}
	div iframe{width: 85%;}

	.anuncios ul > li {
		margin: 15px 0px;
	}

	.Testimonial{
		width: 98%;
		margin-bottom: 20px;
		margin-top: 20px;
		margin-left: 0%;
	}

	.Testimonial-imagen{
		float: initial;
		text-align: center;
	}

	.Testimonial-imagen img{
		border-radius: 50%;
		width: 120px;
		height: 120px;
	}

	.Testimonial-contenido{
		margin-left: initial;
		text-align: center;
	}

	.Testimonial-contenido p{
		margin-bottom: 20px;
		font-size: 0.9em;
		width: 100%;
	}

	.Testimonial-nombre{
		margin-left: 0px;
		font-size: 0.8em;
		text-align: center;
	}

	.productos picture{
		margin: 0 5px;	
	}

	.productos img{
		width: 80%;
	}
}

/*****************************************************************************************************/
/*       							Smartphone 320px            									 */
/*****************************************************************************************************/
@media only screen and (max-width : 320px) {
	nav{ font-size: 14px; }

	nav li {
		display: block;
		float: none;
		width: 100%;
	}

	nav li a { border-bottom: 1px solid #576979; }

	/* me */
	h2{
		padding: 5px;
		font-size: 1em;
	}

	.portada section{
		clear: both;
	}

	.portada section article .producto {
		width: 100%;
	}

	/************
	*	footer
	*************/

	footer{
		margin-top: 15px;
	}

	.footer-izq{
		width: 100%;
		border-top: 1px solid #014254;
	}

	.footer-izq p{
		font-size: .9em;
		color: #fff;
		text-align: center;
	}

	.formas-pago img{
		width: 80%;
	}

	.footer-der{
		width: 100%;
		color: #fff;
	}

	.footer-der p{
		font-size: 0.875em;
		color: #fff;
		text-align: center;
	}

	.social{
		margin-left: 20%;
	}
}