@import url(font-awesome.css);
@import url(font-awesome2.css);
@import 'https://fonts.googleapis.com/css?family=Crete+Round|Lato';

body {
	margin: 0;
	font-family: 'Crete Round', serif;
	font-family: 'Lato', sans-serif;
	text-align: center;
}


header {
	text-align: center;
}

a {
	text-decoration: none;
	color: inherit;
}
nav {
	height: 40px;
	margin: 0 auto;
	max-width: 100%;
    line-height: 150%;
	height: 50px;
	font-family: 'Source Sans Pro', sans-serif;
}
nav ul {
	padding: 0.8em;
	max-width: 1024px;
	margin: 0 auto;
	text-align: center; 
}
nav ul li {
	display: inline-block;
	font-size: 1.2em;
	margin-left: 0.5em;
	padding: 0 0.5em;
}
nav ul li a {
	color: #fff;
	padding: 0.3em 0.5em;
	text-decoration: none;	
}
nav ul li a:hover {
	background-color: #000;
	color: #fff;
	transition: all 0.5s ease 0s;
	padding: 0.3em 0.5em;
}
#skel-layers-wrapper {
		padding-top: 0;
	}
.dropotron.level-0 {
		font-size: 1em;
	}		
#navButton .toggle {
		text-decoration: none;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 50%;
		z-index: 111;

	}
#navButton .toggle:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-transform: none !important;
		}
#navButton .toggle:before {
			color: #e7691c;
			content: '\f0c9';
			display: block;
			font-size: 16px;
			height: 2.25em;
			left: 0.5em;
			line-height: 2.25em;
			position: absolute;
			text-align: center;
			top: 0.5em;
			width: 2.5em;

		}
#navPanel {
		margin: 0;
		background-color: #ff8100 !important;
		color: #fff;
		padding: 1em 0 0 0;
		width: 200px !important;
	}
#navPanel .link {
			border-bottom: 0;
			border-top: solid 1px #e06b0b;
			color: #2a1300;
			display: block;
			height: 50px;
			line-height: 50px;
			padding: 0 1em 0 1em;
			text-decoration: none;
			font-size: 0.8em;
			width: 200px !important;
			background-color: #272323 !important;
		}
#navPanel .link:first-child {
				border-top: 0;
			}
#navPanel .link.depth-0 {
				color: #fff;
			}
#navPanel .link .indent-1 {
				display: inline-block;
				width: 1em;
			}
#navPanel .link .indent-2 {
				display: inline-block;
				width: 2em;
			}
#navPanel .link .indent-3 {
				display: inline-block;
				width: 3em;
			}
#navPanel .link .indent-4 {
				display: inline-block;
				width: 4em;
			}
#navPanel .link .indent-5 {
				display: inline-block;
				width: 5em;
			}
@media screen and (max-width: 970px) {
#nav {
	display: none;
}
}

/* ---------------------FIN ESTILOS NAV--------------------- */


.intro	{
	text-align: center;
}
figure {
	margin: 2em 0;
}
.logo img {
	width: 75%;
}
.descripcion {
	background-image: url(../imagenes/fondo1.jpg);
	background-size: 100%;
}
.descripcion p {
	padding: 1.8em 10%;
	text-align: center;
	font-family: 'Crete Round', serif;
	font-size: 1em;
	line-height: 1.5em;
}
.servi {
	background-color: black;
	text-align: center;
	padding: 1.8em 0 0;
}
.servi ul li {
	color: white;
	font-family: 'Crete Round', serif;
	font-size: 1.1em;
	line-height: 2em;

}
.servi img {
	width: 67px;
	margin: 0 auto;
	padding-top: 2em;

}
.contact {
	background-image: url(../imagenes/fondo2.jpg);
	margin: 0;
	text-align: center;
	padding: 2em 0;
}
.contact img {
	width: 45px;
}
.contact h1 {
	color: black;
	font-family: 'Crete Round', serif;
	font-size: 2em;
	margin: 0;
	padding-bottom: 1em;
}
.contact h2 {
	color: white;
	font-family: 'Crete Round', serif;
	font-size: 2em;
	padding-bottom: 0.7em;
}
.contact p {
	color: black;
	font-family: 'Crete Round', serif;
	font-size: 1.2em;
	padding: 0.5em 0;
}
.mapa iframe {
	width: 100%;
	height: 300px;
	margin: 1em auto;
	padding: 0 1em;
}
.formulario h2 {
	color: black;
	font-family: 'Crete Round', serif;
	font-size: 1.2em;
	text-align: center;
	padding-top: 1em;
}
.mapa h2 {
    color: black;
    font-family: 'Crete Round', serif;
    font-size: 1.2em;
    text-align: center;
    padding-top: 1em;
}
.texto {
	background-image: url(../imagenes/fondo11.jpg);
	background-size: 100%;
	padding: 2em 0;
	margin: 5% 5%;
}
.texto h1 {
	color: white;
	font-family: 'Crete Round', serif;
	font-size: 2em;
	margin: 0;
	padding-bottom: 0.5em;
}
.texto p {
	color: black;
	font-family: 'Crete Round', serif;
	font-size: 1.1em;
	line-height: 1.5em;
	padding: 0 10%;
}
.texto2 {
	background-image: url(../imagenes/fondo12.jpg);
	background-size: 100%;
	padding: 2em 0;
	margin: 5% 5%;
}
.texto2 h1 {
	color: white;
	font-family: 'Crete Round', serif;
	font-size: 2em;
	margin: 0;
	padding-bottom: 0.5em;
}
.texto2 p {
	color: black;
	font-family: 'Crete Round', serif;
	font-size: 1.1em;
	line-height: 1.5em;
	padding: 0 10%;
}
.texto3 {
	background-image: url(../imagenes/fondo13.jpg);
	background-size: 100%;
	padding: 2em 0;
	margin: 5% 5%;
}
.texto3 h1 {
	color: white;
	font-family: 'Crete Round', serif;
	font-size: 2em;
	margin: 0;
	padding-bottom: 0.5em;
}
.texto3 p {
	color: black;
	font-family: 'Crete Round', serif;
	font-size: 1.1em;
	line-height: 1.5em;
	padding: 0 10%;
}
.servicios {
	background-color: black;
	padding: 2em 0;
}
.servis {
	background-image: url(../imagenes/key.png);
	background-repeat: no-repeat;
	background-position: right;
	background-size: 25%;
	width: 100%;
}
.servicios h1 {
	color: #e5681a;
	font-family: 'Crete Round', serif;
	font-size: 2em;
	margin: 0;
	padding-bottom: 0.5em;
}
.servicios ul li {
	color: white;
	font-family: 'Crete Round', serif;
	font-size: 1.1em;
	line-height: 1.5em;
	padding: 0 10%;
}
.produc {
	background-image: url(../imagenes/griferia.png);
	background-repeat: no-repeat;
	background-position: left;
	background-size: 20%;
	width: 100%;
	padding-top: 2em;
}



/*__________________________________ Form _________________________-______*/

	form {
		width: 300px; 
		margin: 2em auto;
		overflow: hidden;
	}

	label {
		color: #646464;
		display: block;
		font-size: 0.9em;
		font-weight: 00;
		margin: 0 0 1em 0;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	select,
	textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-o-appearance: none;
		-ms-appearance: none;
		appearance: none;
		background: #f8f8f8;
		border: solid 1px #D8D8D8;
		color: black;
		display: block;
		outline: 0;
		padding: 0 1em;
		text-decoration: none;
		width: 300px;
	}

		input[type="text"]:invalid,
		input[type="password"]:invalid,
		input[type="email"]:invalid,
		select:invalid,
		textarea:invalid {
			box-shadow: none;
		}

		input[type="text"]:focus,
		input[type="password"]:focus,
		input[type="email"]:focus,
		select:focus,
		textarea:focus {
			border-color: #ef6d1a;
		}

	.select-wrapper {
		text-decoration: none;
		display: block;
		position: relative;
	}

		.select-wrapper:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-transform: none !important;
		}

		.select-wrapper:before {
			color: #e5e5e5;
			content: '\f078';
			display: block;
			height: 3em;
			line-height: 3em;
			pointer-events: none;
			position: absolute;
			right: 0;
			text-align: center;
			top: 0;
			width: 3em;
		}

		.select-wrapper select::-ms-expand {
			display: none;
		}
	
	input[type="submit"].fit,
	input[type="reset"].fit,
	input[type="button"].fit,
	.button.fit {
		display: block;
		margin:0;
		width: 90px;
		background-color: #000;
		}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	select {
		height: 2.5em;
	}

	textarea {
		padding: 0.75em 1em;
		color: black !important;
	}


	::-webkit-input-placeholder {
		color: #999 !important;
		opacity: 1.0;
		font-size: 1em !important;
		font-family: 'Open Sans', sans-serif;

	}

	:-moz-placeholder {
		color: #999 !important;
		opacity: 1.0;
		font-size: 1em;
		font-family: 'Open Sans', sans-serif;
	}

	::-moz-placeholder {
		color: #999 !important;
		opacity: 1.0;
		font-size: 1em;
		font-family: 'Open Sans', sans-serif;
	}

	:-ms-input-placeholder {
		color: #999 !important;
		opacity: 1.0;
		font-size: 1em;
		font-family: 'Open Sans', sans-serif;
	}

	.formerize-placeholder {
		color: #999 !important;
		opacity: 1.0;
		font-size: 1em;
		font-family: 'Open Sans', sans-serif;
	}
/* Button form*/

	input[type="submit"],
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-o-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		background-color: #9C0000;
		border: 0;
		color: #ffffff;
		cursor: pointer;
		display: inline-block;
		font-weight: 400;
		height: 3em;
		line-height: 3em;
		padding: 0 1em;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
	}

		input[type="submit"]:hover,
		.button:hover {
			background-color: #620000;
			color: #fff;
		}
	input[type="submit"],
	.button-fit {
		-moz-appearance: none;
		-webkit-appearance: none;
		-o-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		background-color: #000;
		border: 0;
		color: #fff;
		cursor: pointer;
		display: inline-block;
		font-weight: 500;
		height: 2em;
		line-height: 2em;
		padding: 0 1em;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		font-family: 'Open Sans', sans-serif;
		border-radius: 3px;
	}

		input[type="submit"]:hover,
		.button-fit:hover {
			background-color: #f27427;
			color: white;
		}		
.actions {
	text-align: center;
	margin-top: 2em;

}
.campo-form {
	margin: 0.5em 0;
}
form ul li {
	list-style: none;
}
/*___________________________AQUI ACABAN ESTILOS DE FORMULARIO*______________________________*/

.logos {
    padding: 3em 0;
}
.logos ul li img {
	width: 100%;
}
.logos ul li {
	display: inline-block;
}

.copyright {
	height: 60px;
	color: #fff;
	text-align: center;
	padding: 1em;
	font-size: 0.6em;
	position: relative;
	background-color: #191919;
	font-family: 'Raleway', sans-serif;
}
.copyright a {
	color: #fff;
}
.copyright img {
	width: 100px;
	margin: 0;
}
#galeria {
	background: #101010;
    margin-top: 8em;
	padding-top: 3em;
	background-repeat: no-repeat; 
	text-align: center;
}
#galeria h1 {
    color: white;
    font-family: 'Crete Round', serif;
    font-size: 2em;
    margin: 0;
    padding-bottom: 0.5em;
}

/* -- estilos galeria -- */
.image-row {
  *zoom: 1;
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 20px;
}
.image-set img {
	width: 200px;
}

.image-row:after {
  content: "";
  display: table;
  clear: both;
}

.example-image-link {
  display: inline-block;
  margin: 0 10px 20px 10px;
  line-height: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  border: 4px solid #ef6d1a;
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
.example-image-link:hover {
  border: 4px solid #fff;
}

.example-image {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
}


.fachada {
	text-align: center;
}
.fachada img {
	width: 80%;
}
.nosotros img {
	width: 90%;
}
.gracias {
	background: #101010;
    margin-top: 8em;
	padding: 3em 0;
	text-align: center;
}
.gracias h1 {
    color: white;
    font-family: 'Crete Round', serif;
    font-size: 2em;
    margin: 0;
    padding-bottom: 0.5em;
}
.gracias p {
	color: #fff;
}
.verif {
    display: none;
}
/*-------------------------------------650 px --------------------------------------------*/

@media screen and (min-width: 650px) {

.logo img {
	width: 40%;
}
.texto {
	background-image: url(../imagenes/fondo111X.jpg);
	margin: 2% 2%;
}
.texto2 {
	background-image: url(../imagenes/fondo121X.jpg);
	margin: 2% 2%;
}
.texto3 {
	background-image: url(../imagenes/fondo131X.jpg);
	margin: 2% 2%;
}
.servis {
	background-size: 18%;
}
.produc {
	background-size: 25%;
}
}


/*-------------------------------------768px --------------------------------------------*/
@media screen and (min-width: 768px) {
.contact {
	background-size: cover;
}
.fachada {
	display: none;
}
.nosotros img {
	width: 95%;
}
}

/*-------------------------------------980px --------------------------------------------*/


@media screen and (min-width: 980px) {

.servi {
	background-image: url(../imagenes/tools2.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 32%;
	padding: 2em 0;
}
.servi img {
	display: none;
}
.logo {
	float: left;
	margin: 1em 0;
}
header {
	max-width: 1024px;
	margin: 0 auto;
}
nav {
	float: right;
    margin-top: 2em;
    background: #ef6d1a;
    border-bottom: solid 3px #773003; 	
}
.logo img {
	width: 200px;
}
.servicios {
	margin-top: 8em;
}
.textosnosotros {
	margin-top: 9em;
}
}

/*-------------------------------------1200 px --------------------------------------------*/

@media screen and (min-width: 1200px) {

.descripcion p {
	width: 900px;
	margin: 0 auto;
	padding: 1.8em 0;
	font-size: 1.3em;
	line-height: 1.5em;
}
.servi ul li {
	font-size: 1.3em;
	line-height: 2em;
}
.mapaformu {
	width: 900px;
	margin: 0 auto;
	text-align: center;
}
.mapa {
	display: inline-block;
	padding-right: 2em;
	top: -1em;
    position: relative;
}
.mapa iframe {
	width: 400px;
	top: -2em;
	position: relative;
}
.form-map {
	display: inline-block;
	padding-left: 2em;

}
.formulario h2 {
	font-size: 1.5em;
	padding-top: 2em;
}
.mapa h2 {
    font-size: 1.5em;
    padding-top: 1em;
    padding-bottom: 2em;
}
.texto p {
	width: 900px;
	margin: 0 auto;
	margin: 1% auto;
}
.texto2 p {
	width: 900px;
	margin: 0 auto;
	margin: 1% auto;
}
.texto3 p {
	width: 900px;
	margin: 1% auto;
}
.servis {
	display: inline-block;
}
.produc {
	display: inline-block;
}

}