/* Curso CSS estilos aprenderaprogramar.com*/
/* variables */
:root{
    --archivo: 'Archivo', sans-serif;
    --audiowide: 'Audiowide', cursive;
    --oswald: 'Oswald', sans-serif;
    --dark-color: #151515;
    --green-color: #5fad05;
	--blue-color:  #0099e6;
    --dark-green-color: #559b04;
    --red-color: #e60012;
    --trans: all 0.3s ease-in-out;
}


body {font-family: Arial, Helvetica, sans-serif;}

table {     
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 8px;    
	margin: 0px;     
	width: 300px; 
	text-align: left;    
	border-collapse: collapse; 
	
	}

th {     
	font-size: 12px;     
	font-weight: normal;     
	padding: 8px;     
	background: #b9c9fe;
    border-top: 4px solid #aabcfe;    
	border-bottom: 1px solid #fff; 
	color: #039; }

td {    
	padding: 8px;     
	background: #e8edff;     
	border-bottom: 1px solid #fff;
    color: #669;    
	border-top: 1px solid transparent; 
	height: 10px;
	}

tr:hover td { 
	background: #d0dafd; 
	color: #339; 
	}

/* news */
.title{
    background-color: #389bf1;
    padding: 1rem 0;
    color: #fff;
}
.titleMae{
    background-color: #ffe603;
    padding: 1rem 0;
    color: #fff;
}
.titleDoc{
    background: #ffe603;
    padding: 1rem 0;
    color: #000000;
}
.titleAca{
    background: #081E3F;
    padding: 1rem 0;
    color: #fff;
}
.titleCat{
    background: #FF4500;
    padding: 1rem 0;
    color: #fff;
}
.title h2{
    margin: 0;
}

/* videos section */
#videos .title{
    background-color: var(--green-color);
}

#Galeria .title{
    background-color: var(--green-color);
}

/* Tablas calendario */
	.Main_Table_Container {
		width:90%; 
		margin:5%;
		background-color: #05346c;
	}
	
	.Calendar_tables-container {
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	  
	}
	
	.tables-container {
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	  
	}
	
	.Main_Table_Container .tables-container .tableCalen {
	  border-collapse: collapse;
	  border: 1px solid black;
	  width: 100%;
	  text-align:center; 
	  
	  /*display: inline-block;*/
	  margin-right: 10px; /* ajuste el margen según sus preferencias */
	  background-color: #fff;
	  margin-top: 10px;
	  margin-left:10px; 
      margin-right:10px;
	  margin-bottom:10px;
	}

	.AcaVsCat {
	  background-image: url("assets/images/GameSchedule/AcaCat.png");
	  background-repeat: no-repeat;
	  background-size: cover;
	  width:20%;
	  height:20%
	  position: absolute;
	  padding: 1px;
	  margin: 0 auto; 
	  width: 100px;
	}
	.MaeVsDoc {
	  background-image: url("assets/images/GameSchedule/MaeDoc.png");
	  background-repeat: no-repeat;
	  background-size: cover;
	  width:20%;
	  height:20%
	  position: absolute;
	  padding: 1px;
	  margin: 0 auto; 
	  width: 100px;
	}
	
	.Main_Table_Container .tables-container .tableCalen .MaeVsCat {
	  
	  background-repeat: no-repeat;
	  background-size: cover;
	  width:20%;
	  height:20%
	  position: absolute;
	  padding: 1px;
	  margin: 0 auto; 
	  width: 100px;
	  background-color: #fff;
	  background-image: url("/assets/images/GameSchedule/MaeCat.jpeg");
	}
	.DocVsMae {
	  background-image: url("assets/images/GameSchedule/DocMae.png");
	  background-repeat: no-repeat;
	  background-size: cover;
	  width:20%;
	  height:20%
	  position: absolute;
	  padding: 1px;
	  margin: 0 auto; 
	  width: 100px;
	}
	.DocVsCat {
	  background-image: url("assets/images/GameSchedule/DocCat.png");
	  background-repeat: no-repeat;
	  background-size: cover;
	  width:20%;
	  height:20%
	  position: absolute;
	  padding: 1px;
	  margin: 0 auto; 
	  width: 100px;
	}
	.AcaVsMae {
	  background-image: url("assets/images/GameSchedule/AcaMae.png");
	  background-repeat: no-repeat;
	  background-size: cover;
	  width:20%;
	  height:20%
	  position: absolute;
	  padding: 1px;
	  margin: 0 auto; 
	  width: 100px;
	}
	.AcaVsDoc {
	  background-image: url("assets/images/GameSchedule/AcaDoc.png");
	  background-repeat: no-repeat;
	  background-size: cover;
	  width:20%;
	  height:20%
	  position: absolute;
	  padding: 1px;
	  margin: 0 auto; 
	  width: 100px;
	}
	/* Card */
	.card {
	  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	  transition: 0.3s;
	  width: 100%;
	  float: left;
	  padding: 10px;
	  margin-right: 25px;
	  Background: #fc0516;
	}

	.card:hover {
	  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
	}

	.container {
	  padding: 2px 20px;
	}
	.Gallerydiv, .Gallerydiv2 {
	  width: 100%;
	  height: 20px;
	  display: inline-block;
	  vertical-align: top;
	  align: center;
	  margin: 10px;
	  background-color: #f1f1f1;
	}