body{
	font-size: 1em;
	font-family: PT Sans;
	color: #636363;
		text-align: center;
}

/* CABECERA*/

header{
	background-color: lightblue;
	border-bottom: 10px solid lightgrey;
	padding-top: 3rem;
}

header h1{
	font-family: 'Nunito', sans-serif;
	text-align: center;
	font-size: 1.8rem;
	color: #455868;
	margin-top: 0;
}

/*BASIC SLIDER*/

#my-slideshow{
	margin: 0em 2em 2em 2em;
}

ul.bjqs-controls.v-centered li a{
	display:block;
	padding:10px;
	background:#fff;
	color:#455868;
	text-decoration: none;
}

ul.bjqs-controls.v-centered li a:hover{
	background:#455868;
	color:#fff;
}

/*CONTENEDOR*/

main{
	max-width: 48.062em;
	margin: 0 auto;
	padding-top: 0.7em;
	/*display: inline-block;*/
} 

section p{
	text-align: justify;
	margin-left: 2em;
	margin-right: 2em;
}

section p:last-child{
	margin-bottom: 1.875em;
}

.titulo-section{
	color: #68A4C4;
	font-weight: bold;
	text-align: center;
	font-size: 1.2rem;
}

/* LISTADO DE PRODUCTOS IZQUIERDA*/

#listado-prod{
	width: 50%;
	background-color: #F2F2F2;
	float: left;
	height: auto;
	padding-right: 1em;
	margin-bottom: 20px;
	text-align: left;
	box-sizing:border-box;
}

#listado-prod li{
	font-size: 0.875em;
	line-height: 2.5em;
	list-style: none;
	border-bottom: 1px solid #455868;
	color: #1F6689;
}

#listado-prod li a{
	color: #1F6689;
}

#listado-prod li a:hover{
	color: #FF8833;
}

#listado-prod li:last-child{
	list-style: none;
	border-bottom: none;
}

#listado-prod li a:last-child{
	text-decoration: none;
}

#aisladores, 
#arandelas, 
#preensamblados, 
#myh, 
#seccionadores, 
#fusibles, 
#morsetos, 
#descargadores, 
#electrificadores, 
#conductores, 
#seguridad, 
#transformadores{
	width: 80%; 
	height: auto;  
	display: none;
}

/* LISTADO PRODUCTOS DERECHA */

.productos-derecha, .texto-der{
	width: 50%;
	float: right;
	padding-left: 2em;
	padding-right: 2em;
	box-sizing: border-box;
	font-size: 0.875em;
	line-height: 150%;
	text-align: left;
}

.texto-der p{
	margin-left: 0;
	font-size: 0.875em;
	line-height: 150%;
}

.texto-der #envios{
	font-size: 2em; 
	color: lightblue; 
	margin-top: 14px;
} 

.productos-derecha h2{
	font-size: 1.2em;
	padding-left: 1.25em;
}

.productos-derecha{
	display: none;
}

.productos-derecha ul li{
	list-style: disc;
}

.volver a{
	display: none;
}

.imag-productos{
	display: inline-block; 
	text-align: center; 
	border: 1px solid #eaeaea; 
	margin-bottom: 5px; 
	margin-right: 5px;
	padding-right: 5px;
	padding-left: 5px;
	color: #455868; 
	font-size: 0.75em;
}

/* CONTACTO */

.infomapa{
	width: 100%;
	height: auto;
	float: left;
	padding-right: 1em;
	margin-bottom: 20px;
	box-sizing:border-box;
}

#info{
	background-color: #F2F2F2;
	display: inline-block;
	width: 100%;
	padding-top: 0.1em;
	padding-bottom: 0.1em;
	margin-bottom: 1.5em;
	border-radius: 8px;
	text-align: center;
}

#info .parrafos{
	text-align: center;
}

#info .p{
	text-align: justify;
	display: inline-block;
	padding: 20px;
	line-height: 150%;
	vertical-align: top;
}

#p2{
	margin-top: 15px;
	font-size: 18px;
}

#info a:link, a:visited{
	color: #1F6689;
	text-decoration: none;
	font-style: italic;
}

#info a:hover{
	text-decoration: underline;
}

#mapa iframe{
	width: 100%;
}

sub{
	color: red;
}

#nota{
	font-size: 0.8em;
	color: red;
}

input:valid {
	color: navy;
	font-size: 0.857em;
}

input{
	width: 210px; 
}

input[type="submit"],[type="reset"]{
	width: auto;
	margin-left: 2em;
}

textarea:valid{
	color: midnightblue;
	font-size: 0.875em;
}

.formulario{
	width: 50%;
	float: right;
	height: auto;
	padding-right: 1em;
	padding-left: 1.3em;
	margin-bottom: 20px;
	box-sizing:border-box;
}

/*FOOTER*/

footer{
	background-color: lightblue;
	border-top: 10px solid lightgrey;
	font-size: 0.9rem;
	padding-bottom: 1rem;
	margin-bottom: 0;
	width: 100%;
	display: inline-block;
}

#footer-container{
	width: 48.062em;
	margin-left: auto;
	margin-right: auto;
}

.footer-title{
	color: #455868;
}

#contacto{
	margin-left: 0;
	width: 18em;
	float: left;
	text-align: left;
}

#contacto address{
	color: #455868;
	text-align: left;
}

#desarrollo{
	float: right;
	text-align: left;
}

footer #contacto a:link, a:visited{
	color: #1F6689;
	text-decoration: none;
	font-weight: normal;
}

footer #contacto a:hover{
	text-decoration: underline;
}

footer #desarrollo a:link, a:visited{
	color: #1F6689;
	text-decoration: none;
	font-weight: normal;
}

footer #desarrollo a:hover{
	text-decoration: underline;
} 

#copyright{
	clear: both;
	text-align: center;
	font-size: 0.75rem;
	line-height: 3.75rem;
}

#copyright p{
	color: #455868;
}


/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {

	/* slideshow */

	#my-slideshow {
  	margin: 0em 1em;
	}

	/* generales */

	section p {
 	text-align: justify;
  	margin-left: 1em;
  	margin-right: 1em;
	}

	/*Navegación*/

	.fa-lg {
	font-size: 1.33333333em;
  	line-height: .75em;
  	vertical-align: -15%;
  	text-indent: 0;
	}

	#listado-prod{
	width: 100%;
	background-color: #F2F2F2;
	float: left;
	height: auto;
	padding-right: 1em;
	margin-bottom: 20px;
	box-sizing:border-box;
	}

	.productos-derecha, .texto-der{
	width: 100%;
	float: right;
	padding-left: 2em;
	padding-right: 2em;
	box-sizing: border-box;
	font-size: 0.875em;
	line-height: 150%;
	}

	.texto-der #envios{
	font-size: 2em; 
	text-align: left;
	color: lightblue; 
	margin-top: 14px;
	line-height: 100%;
	} 

	.productos-derecha{
	width: 100%;
	float: right;
	padding-left: 2em;
	box-sizing: border-box;
	font-size: 0.875em;
	line-height: 150%;
	}

	.productos-derecha h2{
		font-size: 1.2em;
		padding-left: 1.25em;
	}

	.productos-derecha{
		display: none;
	}

	.productos-derecha ul{
		padding-left: 2.5em;
	}

	.productos-derecha ul li{
		list-style: disc;
	}

	.volver a:link, a:visited{
		display: block;
		text-align: center;
		margin-bottom: 1em;
		text-decoration: none;
		color: #455868;
	}

	.volver a:hover{
		text-decoration: underline;
		color: #FF8833;
	}

	/* contacto */

	.formulario p{
		margin-left: auto;
		margin-right: auto;
	}

	.infomapa, .formulario{
		width: 100%;
  		float: left;
  		padding-right: 1em;
  		padding-left: 1em;
  		margin-bottom: 10px;
  		box-sizing: border-box;
	}

	#footer{
		width: 100%;
	}

	#footer-container{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	footer #contacto{
		text-align: left;
		padding: auto 20% auto 5%;
		width: 100%;
		float: left;
	}

	footer address{
		padding-bottom: 0.625em;
	}

	footer #desarrollo{
		text-align: left;
		padding: auto 5% auto 20%;
		width: 100%;
		float: right;
	}

	footer #desarrollo, #contacto{
		border-bottom: 1px solid #455868;
	}


} 

/*Styles for screen 583px and lower*/
@media (max-width: 583px){

	#info .p, #p2{
		margin-top: 0;
		padding-top: 0;
		padding-bottom: 0;
	}

}

/*Styles for screen 400px and lower*/
@media only screen and (max-width : 480px) {

	/*slider*/

	ul.bjqs-controls.v-centered li.bjqs-prev a {
 	left: 0;
  	display: none;
	}

	ul.bjqs-controls.v-centered li.bjqs-next a {
  	right: 0;
  	display: none;
	}

	/*fin slider*/

	#listado-prod{
	width: 100%;
	background-color: #F2F2F2;
	float: left;
	height: auto;
	padding-right: 1em;
	margin-bottom: 20px;
	box-sizing:border-box;
	}

	.productos-derecha, .texto-der{
	width: 100%;
	float: right;
	padding-left: 2em;
	padding-right: 2em;
	box-sizing: border-box;
	font-size: 0.875em;
	line-height: 150%;
	}

	.texto-der #envios{
	font-size: 2em; 
	text-align: left;
	color: lightblue; 
	margin-top: 14px;
	line-height: 100%;
	}

  	/* footer */

	#footer{
		width: 100%;
	}

	#footer-container{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	footer #contacto{
		text-align: left;
		padding: auto 20% auto 5%;
		width: 100%;
		float: left;
	}

	footer address{
		padding-bottom: 0.625em;
	}

	footer #desarrollo{
		text-align: left;
		padding: auto 5% auto 20%;
		width: 100%;
		float: right;
	}

	#copyright{
	float: none;
	text-align: center;
	font-size: 0.75rem;
	line-height: 3.75rem;
	}

} 

/*Smartphone*/
@media only screen and (max-width : 320px) {

	/*slider*/

	ul.bjqs-controls.v-centered li.bjqs-prev a {
 	left: 0;
  	display: none;
	}

	ul.bjqs-controls.v-centered li.bjqs-next a {
  	right: 0;
  	display: none;
	}

	/*fin slider*/

}