@import 'https://fonts.googleapis.com/css?family=Roboto';

*{
	padding: 0;
	margin: 0;
	font-family: 'Roboto', sans-serif;
	box-sizing: border-box;
}

.azul{
	color: #189BFA;
}

.rojo{
	color: #f03333;
}

.espacio{
	visibility: hidden;
}

.subtitulo{
	width: 100%;
	margin: 20px auto;
	background: #189BFA;
	color: white;
}

.subtitulo{
	font-size: 30px;
	text-shadow: 1px 1px 4px black;
	text-align: center;
	border-radius: 4px;
}



body{
	background-color: #F0F0F0;
}

header{
	background-color: white;
	display: flex;
	justify-content: space-around;
	align-content: center;
	align-items: center;
	box-shadow: 1px 1px 2px grey;
}

header div.principal{

}

header div.principal img{
	padding: 10px;
	width: 230px;
	height: 110px;
}

header div.responsive{
	display: none;
}

header div.responsive p i{
	cursor: pointer;
}

header nav{
	display: block;
}

header nav ul{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
}

header nav ul li{
	list-style: none;
	margin-right: 10px;
}

header nav ul li a{
	text-decoration: none;
	padding: 5px;
	display: block;
	font-size: 20px;
	color: #189BFA;
	text-shadow: 1px 1px 1px #D2FAFB;
}

header nav ul li a:hover{
	border-bottom: 5px solid red;
}

section#main{
	width: 90%;
	margin: 20px auto;
	background: white;
	border-radius: 8px;
	box-shadow: 0px 0px 5px grey;
}

section#main p.titulo-principal{
	font-size: 30px;
	border-radius: 8px 8px 0px 0px;
	background: #189BFA;
	text-shadow: 2px 2px 3px black;
	color: white;
	text-align: center;
}

.informacion{
	width: 80%;
	margin: 20px auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
}

.informacion img{
	width: 420px;
	height: 240px;
	margin: 0 auto;
	border-radius: 6px;
	
}
.informacion .contenido{
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

.informacion .contenido h2{
	width: 100%;
	font-size: 25px;
	text-align: center;
}


.informacion .contenido p{
	text-align: justify;
	font-size: 20px;
}

.informacion .contenido a{
	align-self: flex-end;
	margin-right: 30px;
	color: blue; 
}

.informacion .contenido a:hover{

}

article.servicios{
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
}

article.servicios .servicio{
	width: 23%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	background: #f03333;
	box-shadow: 0px 0px 5px black;
	margin: 20px 0
}

article.servicios .servicio p{
	width: 100%;
	color: white;
	background: #f03333;
	font-size: 30px;
	border-radius: 5px 5px 0px 0px;
	text-align: center;
}

article.servicios .servicio p.little{
	font-size: 23.44px;
}

article.servicios .servicio small{
	font-size: 15px;
	color: white;
	margin: 0px 4px;
	text-shadow: 1px 1px 2px black;
}

article.servicios .servicio img{
	width: 100%;
	height: 170px;
}

article.servicios .servicio img:hover{
	transition: 0.5s;
	cursor: pointer;
	filter: grayscale(100%);
}

article.servicios .servicio p.texto{
	padding: 5px;
	border-radius: 0px 0px 5px 5px;
	text-align: left;
	font-size: 17px;
	display: none;
}

footer{
	width: 100%;
	background-color: white;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-content: center;
	align-items: center;
	padding: 10px;
	box-shadow: -1px -1px 2px grey;
}

footer p{
	color: #189BFA;
	font-size: 17px;
	margin: 5px 0;
}

footer .principal{
	width: 100%;
	text-align: center;
	color: #f03333;
	margin: 0 auto;
}

.fa-facebook-square{
	color: #3b5998;
}
.fa-facebook-square:hover{
	color: #f03333;
}
.fa-twitter-square{
	color: #1b95e0;
}

.fa-twitter-square:hover{
	color: #f03333;
}

.fa-sign-in{
	color: #FF9C6D;
}

.fa-sign-in:hover{
	color: #f03333;
}

div.form{
	width: 100%;
	margin: 10px auto;
}
div.form form{
	width: 80%;
	margin: 10px auto;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

div.form form input[type="text"],
div.form form input[type="email"],
div.form form textarea{
	width: 50%;
	margin: 10px auto;
	padding: 10px;
	border: none;
	border: 1px solid #b8b8b8;
	border-radius: 7px;

}

div.form form input[type="text"]:focus,
div.form form input[type="email"]:focus,
div.form form textarea:focus{
	transition: 0.7s;
	border: none;
	box-shadow: none;
	outline:0px;
	box-shadow: 0px 0px 5px #189BFA;
}

div.form form input[type="submit"]{
	margin: 0 auto;
	padding: 15px;
	font-size: 20px;
	border: none;
	box-shadow: 0px 0px 3px grey;
	background: #189BFA;
	color: white;
	border-radius: 2px;
}

div.form form input[type="submit"]:hover{
	cursor: pointer;
}

div.form-error{
	width: 50%;
	margin: 10px auto;
	background-color: #f03333;
	color: #fff;
	border-radius: 4px;
}

div.form-pass{
	width: 50%;
	margin: 10px auto;
	background-color: #a8f366;
	color: #fff;
	border-radius: 4px;
}

div.form-error li,
div.form-pass li{
	list-style: none;
	padding: 10px;
}

article#post{
	width: 80%;
	margin: 20px auto;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	border-radius: 6px;
	box-shadow: 0px 0px 6px grey;
	background: #fff;
}

article#post p.titulo{
	width: 100%;
	text-align: center;
	background: #189BFA;
	color: white;
	text-shadow: 1px 1px 3px black;
	font-size: 30px;
	border-radius: 6px 6px 0px 0px;
}

article#post div.contenido{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
}
article#post div.imagen{
	width: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
}
article#post div.imagen .fecha{
	width: 100%;
	text-align: right;
	align-self: flex-end;
	margin: 20px 0;
	margin-right: 20px;
}
article#post div.imagen img{
	align-self: center;
	width: 300px;
	height: 150px;
	margin-bottom: 20px;
	border-radius: 5px;
	box-shadow: 0px 0px 5px grey;
}

article#post div.texto{
	width: 70%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}
article#post div.texto a{
	margin: 20px 0;
	color: blue;
}
article#post div.info{
	width: 100%;
	background: #f03333;
	color: white;
	font-size: 18px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	border-radius: 0px 0px 6px 6px;
	margin: 20px 0px;
}

div.busqueda{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
}

div.busqueda div.manual{
	width: 45%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-content: center;
	padding: 20px;
}

div.busqueda div.auto{
	width: 45%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-content: center;
	padding: 20px;
}

div.busqueda div.manual select{
	margin: 5px auto;
	width: 140px;

	background: #eee url(arrow.png);
	background-position: 280px center;
    background-repeat: no-repeat;
   	padding: 10px;
   	font-size: 16px;
   	border: 0;
   	border-radius: 3px;
}

div.busqueda div.manual select:hover{
	background-color: #ddd;
}

.pre-busqueda{
	width: 100%;
	display: flex;
	justify-content: center;
}
div.uno,
div.dos{
	width: 50%;
	display: flex;
	justify-content: center;
	margin-right: 20px;
}

div.auto input,
div.manual input{
	width: 110%;
	margin: 10px auto;
	padding: 10px;
	border: none;
	border: 1px solid #b8b8b8;
	border-radius: 7px;
}

div.auto input:focus,
div.manual input:focus{
	transition: 0.7s;
	border: none;
	box-shadow: none;
	outline:0px;
	box-shadow: 0px 0px 5px #189BFA;
}

div.login{
	width: 100%;
	margin: 40px auto;
	display: flex;
	justify-content: center;
}

div.login form{
	width: 50%;
	margin: 20px auto;
	box-shadow: 0px 0px 10px #189BFA;
	border-radius: 7px;

	padding: 20px;

	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
}

div.login form input[type="text"],
div.login form input[type="password"],
div.login form textarea{
	width: 80%;
	margin: 10px auto;

	margin: 10px auto;
	padding: 10px;
	border: none;
	border: 1px solid #b8b8b8;
	border-radius: 7px;
}

div.login form input[type="text"]:focus,
div.login form input[type="password"]:focus,
div.login form textarea:focus{
	transition: 0.7s;
	border: none;
	box-shadow: none;
	outline:0px;
	box-shadow: 0px 0px 5px #189BFA;
}

div.login form input[type="submit"]{
	width: 30%;
	margin: 10px auto;
	align-self: flex-end;

	padding: 15px;
	font-size: 20px;
	border: none;
	box-shadow: 0px 0px 3px grey;
	background: #189BFA;
	color: white;
	border-radius: 2px;
}

div.login form input[type="submit"]:hover{
	cursor: pointer;
}

div.login form input[type="file"]{
	padding: 10px;
	font-size: 15px;
	border: none;
	box-shadow: 0px 0px 3px grey;
	background: #189BFA;
	color: white;
	border-radius: 2px;
}

section#main div.panel{
	width: 100%;
	margin: 20px auto;
	display: flex;
	justify-content: space-around;
	background: rgba(0,0,0,0.1);
	padding: 20px;
}
section#main div.panel button{
	margin: 0 auto;
	padding: 15px;
	font-size: 20px;
	border: none;
	box-shadow: 0px 0px 3px grey;
	background: #f03333;
	color: white;
	border-radius: 2px;
}
section#main div.panel button:hover{
	cursor:pointer;
}

div.catalogo{
width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	align-content: stretch;
}
div.catalogo div.producto{
	width: 23%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	box-shadow: 0px 0px 5px black;
	margin: 20px 0
}

div.catalogo div.producto p.name{
width: 100%;
	color: black;
	font-size: 30px;
	border-radius: 5px 5px 0px 0px;
	text-align: center;
}

div.catalogo div.producto img{
	width: 100%;
	height: 170px;
}
div.catalogo div.producto p.description{
padding: 5px;
	border-radius: 0px 0px 5px 5px;
	text-align: left;
	font-size: 17px;
	word-break: break-all;
}