@font-face{
	font-family: "1";
	src: url("../fonts/Srisakdi-Regular.ttf")
}
@font-face{
	font-family: "4";
	src: url("../fonts/Acme-Regular.ttf")
}
@font-face{
	font-family: "2";
	src: url("../fonts/DancingScript-Regular.ttf")
}
@font-face{
	font-family: "3";
	src: url("../fonts/Bitter-Regular.ttf")
}
@font-face{
	font-family: "5";
	src: url("../fonts/Redressed-Regular.ttf")
}
body{
	background-image: linear-gradient(to bottom, #ffffff, rgb(204,204,255,0.8)), url("../img/peon.png");
	text-align:center;
	margin:0px;
}
/* botones */
.mas{
	background-color:black;
	color:white;
	font-size:20px;
}
.menos{
	background-color:black;
	color:white;
	font-size:20px;
	width:27px;
}
.botones{
	display:flex;
	justify-content:space-between;
	margin-top:5px;
}
h1{
	font-size: 50px;
	margin-top:5px;
	border-bottom: 2px solid #FF5E5B;
	letter-spacing:3px;
	margin-bottom:0px;
}
.inicioo{
	font-family:"3"
}
.noticii{
	font-family:"4";
	word-spacing:20px;
}
#main{
	min-height:800px;
	margin:0px;
	padding:0px;
	display:flex;
	flex-direction:row;
}
#main > article{
	margin:4px;
	padding:5px;
	flex-grow:3;
	flex-shrink:1;
	flex-basis:60%;
	order:2;
}
/* reyes del inicio */
.reyes{
	background-image:url("../img/rey.svg"), url("../img/rey.svg") ;
	background-size:60px;
	background-repeat:no-repeat;
	background-position:1% 0%, 99% 0%;
}
/* derecha */
nav{
	margin:30px 4px 4px 4px;
	padding:5px;
	border-left: 2px solid red;
	border-top: 2px solid red;
	border-radius: 7px 0px;
	flex-grow:1;
	flex-shrink:6;
	flex-basis:20%;
	order:3;
	background-size:300px, 300px;
	
}
/* abajo */
footer{
	min-height:100px;
	margin:4px;
	padding:5px;
	background:rgb(0,153,255,0.2);
	color:white;
	border: 1px solid black;
	border-radius: 7px;
}
/* arriba */
header{
	min-height:30px;
	top:0px;
	width:100%;
	
}
.testing{
	margin:0px;
	padding:0px;
}
ul {
	font-size: 40px;
	word-spacing:70px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #333;
	height:50px;
	border: 1px solid black;
}

li {
	display:inline;
	margin:auto;
}
li a {
  display: inline;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
/* tableros derecha */
iframe{
	width:77%;
	height:300px;
	margin-top:5%;
	border:none;
}
.partida{
	width:69%;
	height:280px;
}
.tactica{
	margin-top:10%
}
/* formulario */
.formulario {
	height:700px;
}                                
table{
	margin:auto;
	padding: 1rem;
	width:50%
	
}
th, td{
border: 1px solid black
}
td:hover{
	
}
input {
	width:95%;
	padding:5px;
	margin:5px;
	border-radius: 4px;
	background-color: white;
	color: black;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	border: 1px dashed blue;

	
}
input:hover{
	background-color:lightblue;
	color:white;
	border: 1px dashed #FFCC00;
}
/* articulos */
.arts{
	display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
	background-image: url("../img/fond.jpg");
	background-size:400px, 400px
}
.art2{
	    display: flex;
    flex-direction: column;
    margin: 1em;
    border-radius: 5px;
    overflow: hidden;
    width: 40%;
    height: 300px;
	border: 2px solid red;
	background-color:white;
	box-shadow:10px 10px grey;
	transition:all, 2s
}
.art2:hover{
	width:45%;
	height:330px;
	box-shadow:15px 15px grey;
}
.art3{
	height:80%;
	width:100%
}
a{
	text-decoration:none;
}
/* texto encima slider */
.iniciotext{
	margin-top:4%;
	font-size:2.7em;
	font-family:"5";
}
/* slider */
.slider {
	width: 95%;
	height:60%;
	margin: auto;
	overflow: hidden;
	border:solid gold 5px;
	box-shadow:6px 7px 12px black ;
	border-radius:10px;
	margin-top:3%;
	
}

.slider ul {
	display: flex;
	padding: 0;
	width: 400%;
	height:100%;
	
	animation: cambio 30s infinite alternate linear;
}

.slider li {
	width: 100%;
	list-style: none;
}

.slider img {
	width: 100%;
}

@keyframes cambio {
	0% {margin-left: 0;}
	20% {margin-left: 0;}
	
	25% {margin-left: -100%;}
	45% {margin-left: -100%;}
	
	50% {margin-left: -200%;}
	70% {margin-left: -200%;}
	
	75% {margin-left: -300%;}
	100% {margin-left: -300%;}
}
/* NOTICIAS */
.noticia{
	background-color:#e6e6ff;
	margin:5%;
	border:2px solid violet;
	border-radius:35px 35px 35px 35px;
	padding:4%;
	text-align:justify;
	line-height:21px;
	letter-spacing:1px;
}
.noticiaimg{
	width:100%;
	height:400px;
	margin-top:2%;
	margin-bottom:2%;
}
.notbut{
	width:30%;
	margin-left:40%;
	background-color:gold;
}
/* historia */
.historia{
	font-family:"2";
	color:black;
	font-size:1.5em;
	font-weight:500;
	line-height:130%;
	word-spacing:2px;
}
.historiab{
	margin:5%;
	border:3px solid red;
	border-radius:35px 35px 35px 35px;
	padding:4%;
	text-align:justify;
	line-height:21px;
	letter-spacing:1px;
	background-color:rgb(204,204,204,0.4);
}
.historiat{
	font-family:"1";
	font-size:80px;
}
.volver{
	width:20%;
	margin-left:40%;
}
/* CAMBIOS FLEXBOX */
@media all and (max-width:640px) {
	#main{
		flex-flow: column;
	}
	#main > header, footer{
		min-height:50px;
		max-height:200px;
	}
	nav{
		width:0px;
		height:0px;
		border:none
	}
	.art2{
		max-height:200px;
	}
	iframe{
		width:0px;
		height:0px;
		display:none;
	}
	ul {
	font-size: 20px;
	word-spacing:20px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #333;
	height:50px; 
	}
	li {
	display:inline;
}

li a {
  display: inline;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
input {
	width:85%;
}
table{
	width:60%
}
}
@media (min-width:640px) and (max-width:940px) {
	 
	#main{
		flex-flow: column;
	}
	#main > header, footer{
		min-height:50px;
		max-height:150px;
	}
	nav{
		width:0px;
		height:0px;
		border:none;
	}
	iframe{
		width:0px;
		height:0px;
		display:none;
	}
	li {
	display:inline;
}

li a {
  display: inline;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
ul {
	font-size: 30px;
	word-spacing:20px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #333;
	height:50px; 
	}
	input {
	width:85%;
}
}