* {
	margin: 0;
	box-sizing: border-box;
	text-decoration: none;

}

.contenedor {
	display: flex; 
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	background-color: white;
	background-image: url("../images/back-left.jpg"), url("../images/back-right.jpg");
	background-size: auto 100vh, auto 100vh;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: top left, top right;
	


}

h1, h2, h3 {
	font-family: 'Roboto', sans-serif;
}

p {
	font-family: 'Lato', sans-serif;
}

.topbox {
	height: 180px;
	width: 100%;
	background-image: url("../images/logo-top2.jpg");
	background-position: center;
	background-repeat: no-repeat;
}

.contenido {
	font-family: 'Lato', sans-serif;
	text-align: left;
	padding: 25px;
	width: 100%;
	background-color: rgb(240,240,240);
}

.contenido a{
	text-descrration: none;
	color: #FFFFFF;
}

.menucont {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	align-items: center;
	border-bottom: 3px solid rgba(0,0,0,0.3);
}

.burguer {
	display: block;
	width: 100%;
	height: 45px;
	font-family: 'Roboto', sans-serif;
	color: #FFFFFF;
	cursor: pointer;
	font-size: 14px;
	line-height: 45px;
	text-align: right;
	padding-right: 20px;
	background-color: #4856A8;
	background-image: url('../images/lusbian-logo-top.png');
	background-repeat: no-repeat;
	background-position: 20px 8px;

}

.burguer i {
	font-size: 20px;
	padding-left: 5px;
}



.menu {
	display: none;
	width: 100%;
	height: 35px;
	font-family: 'Roboto', sans-serif;
	color: rgb(255,255,255)!important;
	font-size: 18px;
	line-height: 35px;
	text-align: center;
	background-color: rgb(60,60,60);
}

.display {
	display: block;
}

.menu a {
	display: block;
	text-decoration: none;
	color: rgb(220,220,220);
	cursor: pointer;
	transition: 0.3s;
}

.menu a:hover{
	background: rgb(0,0,80);
	width: 100%;
	color: #FFFFFF;
}

.title-us {
	padding: 10px;
	line-height: 26px;
	background-color: #FF9000;
	color: #FFFFFF;
	width: 100%;
}




.items p {
	padding-bottom: 15px;
}

.items h1,h2,h3 {
	padding-bottom: 20px;
}


.image-us {
	display: block;
	width: 100%;
	height: 280px;
	background-size: cover;
/*	margin-bottom: 20px;  
*/}

.image-us-descr {
	padding: 20px;
}



a div.promopie {
	display: block;
	text-decoration: none; 
	color: #EEFF2B;
	margin: 20px auto;
	font-size: 20px;
	padding: 10px;
	width: 90%;
	background-color: #FF0000;
	border-radius: 5px;
}

a:hover div.promopie {
	background-color: #CE0000;
	color: #FFFFFF;
}

.fotos {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
	margin: auto;
	overflow: hidden;
	position: relative;

}

.close {
	position: absolute;
	color: #FFFFFF!important;
	padding: 5px 15px;
	font-size: 30px;
	top: 0px;
	right: 0px;
	text-shadow: -1px 1px 3px #000000;
	opacity: 0.5;
}

.close:hover {
	opacity: 1;
}


form.admin {
	margin: auto;
	max-width: 280px;
	font-family: 'Lato', sans-serif;
}

input, textarea {
	width: 100%;
	padding: 10px;
	margin-bottom: 15px;
	border-radius: 5px;
	font-size: 16px;	
}

input:focus {
	border: 2px solid #FF0000;
}

textarea {
	height: 120px;
	font-family: 'Lato', sans-serif;


}

.submit {
	background: #CF0000;
	color: #FFFFFF;
	font-size: 16px;
	cursor: pointer;
	margin-bottom: 150px;
}

.submit:hover {
	background: #FF3636
	font-weight: bold;
}


.error {
	width: 100%;
	background: #FF6000;
	color: #FFFFFF;
	border-radius: 5px;
	font-size: 16px;
	font-weight: bold;
	padding: 10px;
	margin-bottom: 15px; 
}

.exito {
	background: #30CD00;
	width: 100%;
	color: #000000;
	border-radius: 5px;
	font-size: 16px;
	font-weight: bold;
	padding: 10px;
	margin-bottom: 15px; 
}

#foto {
	background-color: #324AFF;
	color: #FFFFFF;
	cursor: pointer;
}

.imagen {
	display: flex;
	width: 150px;
	height: 150px;
    justify-content: center;
    align-items: center;
	overflow: hidden;
	margin-left: 10px;
	margin-bottom: 30px;
	transition-duration: 0.3s;
}

.imagen:hover {
	transform: scale(1.1);
	border: 2px solid rgb(15,25,180);
}

.imagen img {
	flex-shrink: 0;
    /*max-width: auto;*/
    max-height: 180px;
}

.imagenxl img {
	width: 100%;
}

.pages {
	display: flex;
	width: 100%;
	padding-top: 10px;
	flex-direction: row;
	flex-flow: row;
	justify-content: space-between;
}

.botonpag {
	padding: 6px 10px;
	font-size: 20px;
	background-color: transparent;
	border: 1px solid #000000;
	border-radius: 25px;
	color: #7F7F7F;
	transition-duration: 0.3s;
}

.botonpag:hover {
	background-color: #7F7F7F;
	color: #FFFFFF;
}

.next {
	/*align-self: flex-end;*/
}



.opcion {
	width: 250px;
	height: 250px;
	background-size: cover;
	border-radius: 50%;
 	/*background-color: rgb(0,0,120);*/
 	color: white; 
 	text-align: center; 
 	border: 5px dotted #FFF; 
	margin: auto;
/* 	position: absolute;
 	left: calc(50% - 125px);
*/ 	margin-top: 5px;

}


.opciones {
/*	 display: flex; 
	 flex-direction: row; 
	 justify-content: center; 
	 flex-wrap: wrap; 
	 align-items: center;
*/
	width: 100%;
	height: 500px;
}

.formulario {
	padding: 20px 0px;
	width: 100%;

}

#contacto {
	width: 100%;
	margin-top: 15px;
	padding: 20px;
	background: #FFFFFF;
	overflow: hidden;
	box-shadow: 0 3px 6px grey;
	border-top: 6px solid rgb(70,60,180);
}

#contacto input[type="text"],
#contacto input[type="number"],
#contacto input[type="email"],
#contacto textarea {
	border: 1px solid #536DFE;
	border-radius: 2px;
	padding: 10px;
	width: 100%;
	display: block;
	margin-bottom: 10px;
	font-family: sans-serif;
	font-size: 1em;
	color: #141930;
}

#contacto input[type="text"]:focus,
#contacto input[type="number"]:focus,
#contacto input[type="email"]:focus,
#contacto textarea:focus {
	border: 2px solid #536DFE;
	padding: 11px;
}

#contacto textarea {
	max-width: 100%;
	min-width: 100%;
	max-height: 300px;
	min-height: 150px;
}

.alert {
	padding: 1em;
	color: #FFFFFF;
	border-radius: 2px;
	margin-bottom: 10 px;
	font-size: 14px;
}

.alert.error {
	background: #FF1111;
	margin-bottom: 10px;
}

.alert.success {
	background: #046A1A;
	margin-bottom: 10px;
}

.btn,
#contacto input[type="submit"]{
	padding: 12px;
	background: rgb(70,60,180);
	color: #FFFFFF;
	font-size: 1em;
	font-family: 'Roboto', sans-serif;
	border-radius: 2px;
	border: none;
	float: left;
	cursor: pointer;
}

#contacto input[type="submit"]:hover{
	background: rgb(25,15,125);
}


.fixed {
    position: fixed;
    top: 0px;
    z-index: 10;
	}



footer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	color: #FFFFFF; 
	font-family: 'Lato', sans-serif;	
	font-size: 16px;
	line-height: 28px;
	text-align: center;
	padding: 10px;
	width: 100%;
	background-color: rgb(0,0,80);
	border-top: 5px solid rgb(255,240,0);
}

footer>h3 {
	color: #FFFFFF;
}

footer p {
	text-align: center;
}

footer img {
	padding-top: 20px;
}

footer a{
	text-descrration: none;
	color: #FFFFFF;
}

footer .copyright {
		font-size: 12px; 
		color: #FFFFFF; 
		background-color: rgb(20,20,60);
		width: 100%; border-top: 1px solid white;
		padding-top: 15px; 
		margin-top: 20px;
		line-height: 20px;
	}

footer .copyright p {
		text-align: center;
	}

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

	h1 {
		font-size: 30px;
	}

	.burguer {
		display:none;
	}

	.menu {
		display: block;
	}
	.menucont {
		flex-wrap: nowrap;
		justify-content: center;
		width: 100%;
		background-color: rgb(40,40,60);
		position: relative;
		z-index: 2;
		/*top: 250px;*/
	}

	.menu {
		max-width: 175px;
		font-size: 16px;
		letter-spacing: 1.5px;
		background-color: rgb(225,225,225);
	}

	.menu a {
		color: rgb(0,0,0);
		
	}

	.contenido {
		max-width: 700px;
		background-color: rgb(230,230,235);
		box-shadow: 0px 10px 20px rgba(0,0,0,0.7);
		color: #000000;
		padding: 20px 20px;
	}

	.home {
		background-image: url(../images/pala-mecanica.png);
		background-size: 200px auto;
		background-position: 400px 20px;
		background-repeat: no-repeat;
	}

	.servicios {
		background-image: url(../images/back-services.png);
		background-size: 400px auto;
		background-position: 300px 0px;
		background-repeat: no-repeat;
	}
	
	.contenido a{
		color: #FFFFFF;
		font-weight: bold;
	}

	.item {
		width: 100%;
		/*float: left;*/
		position: relative;
	}

	.title-us {
		margin-bottom: 20px;
	}

	.image-us {
		width: 90%;
		margin: auto;
		height: 350px;
		background-size: cover;
		border-radius: 5px;

	}


	.descrip {
		max-width: 45%;
		position: absolute;
		top: 0px;
		right: 0px;
	}

	.promo {
		/*flex-flow: column;*/
		color: #FFFFFF;
		padding-top: 150px;

	}

	.opciones {
	 flex-wrap: nowrap; 
	}

	iframe {
		width: 600px;
		height: 500px;
	}

	footer {
		padding: 15px;
		max-width: 700px;
		box-shadow: 0px 20px 20px rgba(0,0,0,0.7);
	}

	footer p {
		text-align: left;
	}

	footer img {
		padding-top: 0px;
	}

	.fixed {
	    position: fixed;
	    top: 0px;
	}

	#left, #right {
		display: block !important;
	}

	#slide {
		height: 380px;
	}

	#slide ul li img{
		width: 100%;
		height: auto;
		}


	

}