/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

  /* CÓDIGO COMÚN PARA TODA LA WEB */
  html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif;}
  
  * {box-sizing: border-box}
	
	@font-face {
		font-family: sega;
		src: url(./Fonts/SEGA.TTF);
	}
	
	.menu{
		font-family:sega;
		border-bottom:10px solid #0060ab;
	}
	
	.footer {
	  position:relative;
	  bottom: 0;
	  width: 100%;
	}
	
	#myFooter{
		color:white;
		background-color:black;
		border-top:10px solid #0060ab;
		text-align:center;
	}
	
	/* Estilo para la barra de desplazamiento en Chrome */
	::-webkit-scrollbar {
		width: 12px;
		height: 10px;
		background-color: #F5F5F5;
	}

	::-webkit-scrollbar-thumb {
		background-color: #0060ab;
		border-radius: 5px;
	}

	/* Estilo para la barra de desplazamiento en Firefox */
	::-moz-scrollbar {
		width: 12px;
		height: 10px;
		background-color: #F5F5F5;
	}

	::-moz-scrollbar-thumb {
		background-color: #888;
		border-radius: 5px;
	}
	/*********************************************************/
	
	/* CÓDIGO PARA EL INDEX.HTML */
	.contenedor_intro{
		padding-top: 90px;
		width: 100%;
	}
	
	.introduccion{
		font-size:x-large;
		background-color: #0060ab80;
		color: white;
		padding: 20px;
		border-radius: 30px;
	}
	
	.imagenes{
		margin-left:12%;
		margin-top:5%;
		margin-bottom:9%;
	}
	/*********************************************************/
	
	/* CÓDIGO PARA EL HISTORIA.HTML */
	#binicio {
		background-image: url("./Imagenes/fondo.png"), url("./Imagenes/pixels.jpg");
		background-repeat:no-repeat;
		background-position:center;
		background-attachment:fixed;
		/*background-color: #4187cc;*/
	}
	
	/* ESTILOS PARA LA LINEA DE LA TIMELINE*/
	.timeline {
		position: relative;
		max-width: 1200px;
		margin: 0 auto;
	}

	.timeline::after {
		content: '';
		position: absolute;
		width: 8px;
		background-color: white;
		top: 0;
		bottom: 0;
		left: 50%;
		margin-left: -3px;
		z-index: -1;
	}

	/* ESTILO PARA EL CONTENEDOR DEL CONTENIDO */
	.container {
		padding: 10px 40px;
		position: relative;
		background-color: inherit;
		width: 50%;
	}

	/* ESTILO PARA LOS CÍCULOS DE LA TIMELINE */
	.container::after {
		content: '';
		position: absolute;
		width: 35px;
		height: 35px;
		right: -17px;
		background-color: white;
		border: 4px solid #FF9F55;
		top: 15px;
		border-radius: 50%;
	}
	
	.right::after {
		left: -16px;
	}

	/* COLOCAR EL CONTENDOR DE LA TIMELINE A LA IZQUIERDA */
	.left {
		left: 0;
	}

	/* COLOCAR EL CONTENDOR DE LA TIMELINE A LA DERECHA */
	.right {
		left: 50%;
	}

	/* COLOCAR FLECHAS EN LOS CONTENEDORES IZQUIERDOS */
	.left::before {
		content: " ";
		height: 0;
		position: absolute;
		top: 22px;
		width: 0;
		right: 30px;
		border: medium solid white;
		border-width: 10px 0 10px 10px;
		border-color: transparent transparent transparent #ffffffD9;
	}

	/* COLOCAR FLECHAS EN LOS CONTENEDORES DERECHOS */
	.right::before {
		content: " ";
		height: 0;
		position: absolute;
		top: 22px;
		width: 0;
		left: 30px;
		border: medium solid white;
		border-width: 10px 10px 10px 0;
		border-color: transparent #ffffffD9 transparent transparent;
	}

	/* ESTILOS PARA EL CONTENIDO DE LA TIMELINE */
	.content {
		padding: 20px 30px;
		background-color: #ffffffD9;
		position: relative;
		border-radius: 6px;
	}
	
	.timeline{
		padding:64px 12px 64px 12px;
	}
	
	.center {
		display:block;
		margin:auto;
		padding-top:44px;
	}
	/************************************************************/
	
	/* CÓDIGO PARA LOS .HTML DE LOS JUEGOS */
	.impares{
	  background-color:#D8DCDD;
	}
	/* ESTILOS DEL TAB VERTICAL */
	.tab {
		float: left;
		border: 1px solid #ccc;
		background-color: #f1f1f1;
		width: 15%;
	}

	/* ESTILOS DE LOS BOTONES DEL TAB */
	.tab button {
		display: block;
		background-color: #0060ab;
		color: white;
		padding: 22px 16px;
		width: 100%;
		border: none;
		outline: none;
		text-align: left;
		cursor: pointer;
		transition: 0.3s;
		font-size: 17px;
	}

	/* CAMBIO DEL COLOR DE FONDO DEL BOTON DEL TAB EN HOVER */
	.tab button:hover {
		background-color: #0043AB;
	}

	/* ESTILO DEL APARTADO DEL TAB ACTIVO */
	.tab button.active {
		background-color: #0017AB;
	}

	/* ESTILO DEL CONTENIDO DEL TAB */
	.tabcontent {
		float: left;
		padding: 0px 12px;
		width: 80%;
	}
	
	#acordeon{
		display:none;
	}
	/************************************************************/
	
	/* CÓDIGO PARA EL CONTACT.HTML */
	input[type=text], input[type=email], input[type=tel], textarea{
		width: 100%;
		padding: 12px;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-sizing: border-box;
		margin-top: 6px;
		margin-bottom: 16px;
		resize:none;
	}

	input[type=submit] {
		background-color: #04AA6D;
		color: white;
		padding: 12px 20px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
	}
	
	#formulario{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	h1{
		padding: 18px 0px 32px 80px;
	}
	
	#politicas{
		overflow:auto;
		width:49%;
		height:515px;
	}
	/************************************************************/
	@media only screen and (max-width:768px){
	  /* CÓDIGO PARA EL HISTORIA.HTML */
		.center {
			display:inline;
			padding-top:86px;
		}
		
		/* COLOCAR EL TIMELINE A LA IZQUIERDA */
		.timeline{
			padding:96px 12px 64px 0px;
		}
		
		.timeline::after {
			left: 31px;
		}
		
		/* HACER QUE EL CONTENEDOR OCUPE TODO EL ANCHO */
		.container {
			width: 100%;
			padding-left: 70px;
			padding-right: 25px;
		}

		/* HACER QUE TODAS LAS FLECHAS APUNTEN A LA IZQUIERDA */
		.container::before {
			left: 60px;
			border: medium solid #ffffffD9;
			border-width: 10px 10px 10px 0;
			border-color: transparent #ffffffD9 transparent transparent;
		}

		/* COLOCAR TODOS LOS CIRCULOS EN LA MISMA POSICIÓN */
			.left::after, .right::after {
			left: 15px;
		}

		/* HACER QUE TODOS LOS CONTENEDORES A LA DERECHA SE COMPORTEN COMO LOS IZQUIEDOS */
			.right {
			left: 0%;
		}
		/************************************************************/
		
		/* ESTILOS DEL ACORDEON */
  	#verticaltab{
			display:none;
		}
		
		#acordeon{
			padding-top:106px;
			display:initial;
		}
		/* ESTILOS DEL ACORDEON */
		.accordion {
			background-color: #0060ab;
			color: white;
			cursor: pointer;
			padding: 18px;
			width: 100%;
			border: none;
			text-align: left;
			outline: none;
			font-size: 15px;
			transition: 0.4s;
		}
    /* ESTILOS DEL BOTON DEL ACORDEON ON HOVER*/
		.active, .accordion:hover {
			background-color: #0043AB;
		}
    /* ESTILOS DEL BOTON DEL ACORDEON EN EL AFTER*/
		.accordion:after {
			content: '\002B';
			color: white;
			font-weight: bold;
			float: right;
			margin-left: 5px;
		}
		.active:after {
			content: "\2212";
		}
    /* ESTILO DEL COTENIDO DEL APARTADO DEL ACORDEON*/
		.panel {
			padding: 0 18px;
			background-color: white;
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.2s ease-out;
		}
  	/************************************************************/
	}
	@media only screen and (max-width:992px){
		#politicas{
			overflow:auto;
			width:98%;
			height:515px;
		}
		#formulario{
			padding-bottom:40px;
		}
		.footer {
		  position: relative;
		}
	}