@import 'consideracionesTecnicas.css';

/*XS: TELEFONOS____________________________________________________________________________________________________________________*/

#titulo {
	grid-column: 1/6;
	grid-row: 1;
}

#subtitulo {
	grid-column: 1/5;
	grid-row: 3;
	padding: 0.5rem;
	background: #f0670d;
	overflow: hidden;
	margin-right: 5%;
	margin-left: 5%;
	width: 96%;	/*Aquí pasa algo y no se el qué*/
	border-radius: 0.5rem;
	box-shadow: 0px 0px 20px #AAAAAA;
}

#subtitulo > p {
	color: white;
	/*display: block;
	font-family: Arial Narrow, Arial, sans-serif;*/
	font-size: 1.5rem;
	font-weight: 700;
	text-align: center;
}

/*----------------------------------------------------------------*/

#descripcion {
	grid-column: 1/6;
	grid-row: 2;
	padding: 1%;
	box-sizing: border-box;
}

#descripcion > h6 {
	display: inline-block;
	float: right;
	width: 20%;
	margin: 0px;
	margin-right: 50%;
	line-height: 1.2rem;
	text-align: left;
	font-size: 125%;
}

#descripcion .dot1 {
	height: 1.2rem;
  	width: 1.3rem;
  	background-color: #ffa230;
  	border-radius: 50%;
  	display: inline-block;
}

#descripcion .dot2 {
	height: 1.2rem;
  	width: 1.3rem;
  	background-color: #fb7f1d;
  	border-radius: 50%;
  	display: inline-block;
  	margin: 0px;
}

#descripcion .dot3 {
	height: 1.2rem;
  	width: 1.3rem;
  	background-color: #f0670d;
  	border-radius: 50%;
  	display: inline-block;
}

#descripcion p {
	margin-bottom: 0px;
	margin-left: 10%;
	width: 90%;
}

/*-------------------------------------------------------------*/

#opciones {
	grid-column: 1/6;
	grid-row: 4;
	box-sizing: border-box;
	overflow: hidden;
	background-color: #ebecec;
	display: grid;
	grid-template-columns: 15% 48% 37%;
	grid-template-rows: repeat(7, minmax(0, auto));
	grid-row-gap: 2%;
	grid-column-gap: 5%;
	padding: 2%;
	padding-top: 0%;
}

#opciones h5 {
	grid-column: 1/4;
	grid-row: 1;
	text-align: center;
	width: max-content;
	margin: 0px;
	margin-left: 10%;
	margin-right: 10%;
	margin-bottom: 1!;
	padding: 5%;
	padding-top: 0px;
	border-radius: 0.1rem 0.1rem 1rem 1rem;
	font-size: 120%;
	color: #ffa230;
	background-color: white;
}

#opcionesT1 {
	grid-column: 2/4;
	grid-row: 2;
}

#opcionesP1 {
	grid-column: 2/4;
	grid-row: 3;
}

#opcionesT2 {
	grid-column: 2/4;
	grid-row: 4;
}

#opcionesP2 {
	grid-column: 2/4;
	grid-row: 5;
}

#opcionesT3 {
	grid-column: 2/4;
	grid-row: 6;
}

#opcionesP3 {
	grid-column: 2/4;
	grid-row: 7;
}
/* No se usa -> utilizar para reemplazar las imágenes de los números en #opciones
#opciones span {
	grid-column: 1;
	color: white;
	font-size: 220%;
	text-align: center;
	font-family: Impact, Charcoal, sans-serif;
	width: 90%;
	height: 100%;
	border-radius: 100%;
	line-height: 150%;
	margin-right: 5%;
	margin-left: 5%;
}
*/
#opciones h6 {
	display: inline-block;
	line-height: 1rem;
	width: 90%;
	float: right;
	margin: 0px;
	margin-top: 1%;
	text-align: left;
}

#opciones p {
	line-height: 1rem;
	width: 90%;
	float: right;
	margin: 0px;
	font-size: 85%;
}

#opciones img {
	width: 100%;
}

#opciones .uno {
	grid-row: 2/4;
}

#opciones .dos {
	grid-row: 4/6;
}

#opciones .tres {
	grid-row: 6/8;
}

/*---------------------------------------------------------*/

#ventajas {
	box-sizing: border-box;
	grid-column: 1/6;
	grid-row: 7;
	display: grid;
	grid-template-columns: 15% 40% 45%;
	grid-template-rows: repeat(6, minmax(1rem, auto));
	grid-gap: 2%;
	padding-left: 0%;
	padding-top: 0px;
	overflow: hidden;
	background-color: #ebecec;
	border-radius: 0rem;
}

#ventajas h5 {
	grid-column: 1/3;
	grid-row: 1;
	text-align: left;
	color: #fb7f1d;
	background-color: white;
	padding: 0.2rem;
	padding-left: 1rem;
	padding-top: 0.5%;
	border-radius: 0.1rem 0.1rem 1rem 1rem;
	grid-row-gap: 0.5rem;
	font-size: 1.2rem;
	margin: 0px;
	margin-left: 5%;
}

#ventajas p {
	grid-column: 2/4;
	color: #787877;
	display: inline-block;
	float: left;
	width: 98%;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

#ventajas img {
	grid-column: 1;
	display: inline-block;
	width: 90%;
	padding-left: 0.5rem;
}

/*-----------------------------------------------------*/

#masInfo {
	grid-column: 2/5;
	grid-row: 9;
	width: 100%;
}

#masInfo h3 {
	margin-top: 0px;
	margin-bottom: 1rem;
}

#dibujoEsquema {
	display: none;
	grid-column: 7/10;
	grid-row: 9/10;
}

#dibujoEsquema img {
	width: 100%;
}

#masInfo iframe {
	width: 100%;
}

/*-----------------------------------------------*/

#tituloAside {
	background-color: #ffa230;
	box-sizing: border-box;
	grid-column: 1/3;
	grid-row: 6;
	padding: 1%;
	width: 150%;
}

#eslogan1 {
	font-family: "Comic Sans MS", cursive, sans-serif;
	color: white;
	text-align: center;
	font-size: 1.6rem;
	font-weight: 1000;
	border-bottom-style: solid;
	border-width: 0.5rem; 
}

#eslogan2 {
	font-family: Arial Rounded MT Bold, Helvetica Rounded, Arial, sans-serif;
	color: white;
	text-align: center;
	font-size: 1.4rem;
	font-weight: 900;
	margin-bottom: 0.5rem;
}

#eslogan3 {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color: white;
	text-align: center;
	font-size: 1.2rem;
	font-weight: 700;
	margin-top: 0.5rem
}

/*------------------------------------------------*/

#unoF {
	box-sizing: border-box;
	grid-column: 2/3;
	grid-row: 5;
}

#unoF img {
	width: 180%;
}

#dosF {
	box-sizing: border-box;
	grid-column: 3/5;
	grid-row: 5;
}

#dosF img {
	width: 65%;
	float: right;
}

#tresF {
	box-sizing: border-box;
	grid-column: 3/5;
	grid-row: 6;
}

#tresF img {
	width: 75%;
	margin-left: 25%;
}

/*------------------------------------------------------------------*/
#descargarFolleto {
	box-sizing: border-box;
	grid-column: 1/6;
	grid-row: 10;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	border-radius: 0.5rem;
	box-shadow: 0px 0px 20px #AAAAAA;
	overflow: hidden;
}

#descargarFolleto a img {
	width: 10%;
	float: left;
}

#descargarFolleto a p {
	width: 89%;
	float: right;
}


/*-----------------------------------------------*/

.modelos {
	grid-column: 1/6;
	grid-row: 8;
	box-sizing: border-box;
	padding: 3%;
	padding-top: 0px;
	overflow: hidden;
	background-color: #ebecec;
	border-radius: 0px;
}

.modelos h5 {
	text-align: center;
	margin-top: 0rem;
	color: #f0670d;
	background-color: white;
	padding: 0rem;
	border-radius: 0.1rem 0.1rem 1rem 1rem;
	width: 50%;
	margin-right: 25%;
	margin-left: 25%;
	font-size: 150%;
}

.modelos p {
	margin: 0rem;
	padding-left: 2rem;
	padding-right: 2rem;
	padding-bottom: 1rem;	
}

.modelos #contenedorModelos {
	width: 100%;
	background-color: white;
	margin: 0%;
	padding: 0%;
	border-bottom-style: solid;
	border-color: #ff681c;
	border-bottom-width: 0.5rem;
	display: grid;
	text-align: center;
}

#modelosTraspatio > #contenedorModelos {
	grid-template-columns: repeat(5, 1fr);
	grid-column-gap: 0;
}

#modelosJaula > #contenedorModelos {
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 0.5fr;
}

.modelos #contenedorModelos h6 {
	box-sizing: border-box;
	width: 100%;
	font-size: 100%;
	margin: 0%;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

#modelosTraspatio > #contenedorModelos h6 {
	font-size: 80%;
}

.slide > .text h6 {
	display: inline-block;
	width: 20%;
	margin: 0%;
	margin-left: 5%;
	margin-right: 5%;
	padding: 1%;
	padding-top: 2%;
	padding-bottom: 2%;
	font-family: Arial Rounded MT Bold, Helvetica Rounded, Arial, sans-serif;
	color: #ffa230;
	font-weight: 700;
	font-size: 120%;
}

.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
  background-color: white;
}

.slide {
  display: none;
}
.slide img {
	width: 100%;
}
/* Caption text */
.modelos .text {
  	padding-top: 3%;
  	padding-bottom: 3%;
 	position: relative;
  	text-align: center;
  	bottom: 0;
  	background-color: #ffa230;
}

.modelos .text p {
	color: #ffffffff;
	font-size: 1rem;
}

.modelos .text h6 {
	color: #ffffffff;
	font-size: 1.5rem;
	width: 90%;
}

.modelos .text a {
	text-decoration: none;
	color: #7777ff;
	font-weight: bolder;
}

.modelos .text a :hover {
	color: #ff681c;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/*-------------------------------------------------------------------------*/

.noShowXS {
	display: none;
}


/*S: TABLETS O TELEFONOS GRANDES____________________________________________________________________________________________________*/
@media screen and (min-width: 500px) {

	#descripcion {
		grid-column: 2/5;
	}

	#descripcion h6 {
		margin-right: 60%;
	}

	/*------------------------------------------------*/

	#opciones {
		grid-column: 2/5;
	}

	#opciones p {
		margin-top: 0px;
	}

	#opciones h5 {
		grid-column: 2/4;
	}

	/*------------------------------------------------*/

	#ventajas {
		grid-column: 2/5;
		grid-template-columns: 5% 20% 75%;
	}

	#ventajas img {
		width: 100%;
		margin-top: 30%;
	}

	/*------------------------------------------------*/

	#tituloAside {
		display: none;
	}

	/*------------------------------------------------*/

	#unoF {
		grid-row: 5/7;
	}

	#unoF img {
		width: 120%;
	}

	#dosF {
		grid-column: 3/4;
		grid-row: 5/7;
	}

	#dosF img {
		width: 60%;
		margin-left: 20%;
		margin-right: 20%;
	}

	#tresF {
		grid-column: 4/5;
		grid-row: 5/7;
	}

	#tresF img {
		width: 120%;
		margin-left: -20%;
	}

	#descargarFolleto {
		grid-column: 3;
	}

	#descargarFolleto a p {
		width: 79%;
	}

	#descargarFolleto a img {
		width: 20%;
	}

	/*------------------------------------------------*/

	#contenedorModelos h6 {
		font-size: 120%;
	}

	/*------------------------------------------------*/

	.noShowXS {
		display: initial;
	}
	
}

/*M: TABLETS O NOTEBOOKS CON PANTALLAS HD___________________________________________________________________________________________*/
@media screen and (min-width: 1000px) {

	#titulo {
		grid-column: 1/7;
		grid-row: 1;
		padding-top: 1rem;
	}

	#subtitulo {
		grid-column: 1/6;
		grid-row: 2;
	}

  /*----------------------------------------------------------------*/

	#descripcion {
		grid-column: 1/7;
		grid-row: 3/4;
	}

	#descripcion p {
		margin-left: 5rem;
	}

/*-------------------------------------------------------------*/

	#opciones {
		grid-column: 3/7;
		grid-row: 4/6;
	}

	#opciones h5 {
		grid-column: 1/3;
		text-align: left;
		padding: 2%;
		padding-left: 1rem;
		padding-right: 1rem;
		font-size: 125%;
	}

	/*-------------------------------------------------------------*/

	#ventajas {
		grid-column: 1/6;
		grid-row: 6/8;
		grid-template-columns: 10% 40% 50%;
		margin-left: 5%;
	}

	/*-------------------------------------------------------------*/

	.modelos {
		grid-column: 1/10;
		grid-row: 8;
	}

	.modelos h6 {
		width: 10.9%;
		padding: 1%;
		margin: 0%;
		margin-left: 10%;
		margin-right: 10%;
		font-size: 150%;
	}

	.modelos .text p {
		padding: 0%;
		margin-top: 1rem;
	}

	#modelosTraspatio  h6 {
		box-sizing: border-box;
		width: 100%;
		margin-left: 0%;
		margin-right: 0%;
		text-align: center;
	}

	#modelosTraspatio > #contenedorModelos > h6 {
		font-size: inherit;
	}

	#contenedorModelos > h6 {
		font-size: 120%;
	}

	/*-----------------------------------------------*/

	#masInfo {
		grid-column: 2/7;
		grid-row: 9/11;
	}

	#dibujoEsquema {
		display: block;
	}

/*-----------------------------------------------*/

	#tituloAside {
		display: block;
		grid-column: 7/10;
		grid-row: 1/3;
		width: 100%;
	}

	#descargarFolleto {
		grid-column: 7/10;
		grid-row: 3;
		width: 100%;
	}

	#descargarFolleto a {
		width: 100%;
		text-decoration: none;
	}

	#descargarFolleto a img {
		width: 20%;
		float: left;
	}

	#descargarFolleto a p {
		margin-top: 1.5em;
		width: 80%;
	}

/*------------------------------------------------*/

	#unoF {
		grid-column: 7/10;
		grid-row: 4/5;
		margin-top: -30%;
	}

	#unoF img {
		width: 80%;
		padding: 10%;
		padding-top: 0px;
		padding-bottom: 0px;
	}

	#dosF {
		grid-column: 7/10;
		grid-row: 5/7;
	}

	#dosF img {
		width: 80%;
		padding: 10%;
		padding-top: 0px;
		padding-bottom: 0px;
		margin: 0%;
	}

	#tresF {
		grid-column: 6/9;
		grid-row: 6/8;
	}

	#tresF img {
		width: 70%;
		margin: 0px;
		margin-left: 15%;
		margin-right: 15%;
		margin-top: 35%;
	}

	.slide .text {
		margin: 10% 5% 2% 70%;
		width: 20%;
		height: 60%;
		position: absolute;
	}

}

/*L: NOTEBOOKS Y ORDENADORES FHD_________________________________________________________________________________*/
@media screen and (min-width: 1600px) {
	
	#titulo {
		grid-column: 2/7;
	}

	#subtitulo {
		grid-column: 2/6;
	}

	#descripcion {
		grid-column: 2/7;
	}

	#ventajas {
		grid-column: 2/6;
	}

	.modelos {
		grid-column: 2/9;
		padding-bottom: 0%;
	}

	#masInfo {
		grid-column: 3/7;
	}

	#descargarFolleto {
		grid-column: 8/10;
		margin-top: 1rem;
		margin-bottom: 1rem;
		margin-right: 1rem;
	}
	
	#tituloAside {
		grid-column: 8/10;
	}

	#opciones img {
		width: 80%;
		margin-left: 20%;
	}

	#ventajas img {
		width: 70%;
		padding: 0%;
		margin-top: 0px;
		margin-left: 30%;
	}

	#unoF {
		grid-row: 4/6;
		margin-top: 0%;
	}

	#unoF img {
		width: 100%;
		padding: 0%;
		padding-right: 30%;
		padding-left: 10%;
		margin-bottom: 5%;
	}

	#dosF img {
		width: 100%;
		padding: 0%;
		padding-right: 20%;
		padding-left: 20%;
		margin-top: 30%;
	}

	#tresF img {
		width: 60%;
		margin: 0px;
		margin-top: 35%;
		padding-left: 5%;
	}

	#masInfo iframe {
		width: 70%;
		padding-left: 15%;

	}

}


/*XL: NOTEBOOKS Y ORDENADORES HIGH DPI SCREENS_____________________________________________________________________*/
@media screen and (min-width: 2000px) {

	#titulo {
		grid-column: 3/7;
	}

	#subtitulo {
		grid-column: 3/6;
	}

	#descripcion {
		grid-column: 3/7;
	}

	#opciones {
		grid-column: 4/6;
	}

	#ventajas {
		grid-column: 3/6;
	}

	.modelos {
		grid-column: 3/9;
	}

	#masInfo {
		grid-column: 3/7;
	}
	
	#tituloAside {
		grid-column: 3/9;
	}

	#dosF img {
		width: 60%;
		padding: 0%;
		padding-right: 10%;
		padding-left: 3%;
		margin-top: 30%;
	}

	#tresF img {
		width: 50%;
		margin: 0px;
		margin-top: 15%;
		padding-left: 5%;
	}
}