@import url('https://fonts.googleapis.com/css?family=Open+Sans');

.logo
{
	height: 50px;
	min-height: 50px;
	max-height: 60px;
}

.margins
{
	margin-top: 20px;
	margin-bottom:20px;
}

body
{
	margin: auto 0;
	
}


.containerBG
{	
	background-color: #000;
	background-image: url('../images/tilesbackground.jpg');
  	background-repeat: repeat;

}

.tikal
{
	width: auto; 
	height: 100%;
}

.separator
{
	height: 2px;
	background: #DDD;
	height: auto;

}



.mainTittle
{
	color: #02558b;
	font-family: 'Open Sans',serif;
	font-weight: bold;
	padding-top: 25px;
	text-align: center;
	font-size: 35px;
}


.buttonTransition
{
	-webkit-transition: opacity 0.1s; 
  	transition: opacity 0.5s;
	-webkit-transition: width 0.1s; 
  	transition: width 0.5s;
}

.buttonTransition:hover
{
	opacity: 0.8;
	width: 100%;
}


.mainTittleSeparator
{
	
	padding-left: 5%;
	padding-right: 5%;
	padding-bottom: 40px;
}

.tituloVideo
{
	color: #02558b;
	font-family: 'Open Sans',serif;
	font-weight: bold;
	padding-top: 20px;
	font-size: 25px;
}

.textoIntroductorio
{
	color: #666;
	font-family: 'Open Sans',serif;
	font-size: 20px;
	padding-bottom: 20px;
	text-align: justify;
}


.GameContainer {
	border: 2px #EEE solid;
	margin-top:5px;
	margin-bottom:5px;

}


.MainCategory 
{
	color: #02558b;
	font-family: 'Open Sans',serif;
	font-weight: bold;
	padding-top: 20px;
	font-size: 25px;
}

.SubCategory
{
	color: #02558b;
	font-family: 'Open Sans',serif;
	font-weight: bold;
	padding-top: 20px;
	font-size: 20px;
}

.GameTitle {
	color: #02558b;
	font-family: 'Open Sans',serif;
	font-weight: bold;
	padding-top: 5px;
	font-size: 20px;
	text-align: center;
	padding: 0px 20px;
	padding-top:10px;
}

.GameTextContent {
	color: #666;
	font-family: 'Open Sans',serif;
	font-weight: normal;
	padding-top: 5px;
	font-size: 17px;
	text-align: left;
	hyphens: auto;
	padding: 0px 20px;
	height: 100%;
	line-height: 120%;
	text-overflow:ellipsis;
}

.setDisplayInfo
{
	max-height:300px;
	height:200px;
	overflow:hidden;
}

.setDisplayInfoTitle
{
	max-height:100px;
	height:100px;
	overflow:hidden;
	vertical-align:middle;
	top: 50%;
	bottom: 50%;
}
/*
.secuenceButton
{
	display: block;
	text-align:center;
	font-family: 'Open Sans',serif;
	font-weight: normal;
	font-size: 17px;
	color:#FFF;
	padding: 5px;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 100%;
	height:auto;
	font-weight: bold;
	background-Color: #02558b;
}
.secuenceButton:hover
{
	background-Color: #007dbd;
	text-align:center;
	font-family: 'Open Sans',serif;
	text-decoration:none;
	font-weight: bold;
	color:#FFF;
}
*/
.secuenceButton
{
	display: block;
	text-align:center;
	font-family: 'Open Sans',serif;
	font-weight: normal;
	font-size: 17px;
	color:#02558b;
	padding: 5px;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 100%;
	height:auto;
	font-weight: bold;
	background-Color: #fff;
	border: 2px #02558b solid; 
}
.secuenceButton:hover
{
	background-Color: #007dbd;
	text-align:center;
	font-family: 'Open Sans',serif;
	text-decoration:none;
	font-weight: bold;
	color:#FFF;
}


.videoContainer
{
	padding: 0px 5%;
}

.videoContainer2 
{
	padding: 0px 10%;
}

.gallery
{
	background-color: #000;
  	background-repeat: repeat;
}

.dataContainer
{
	padding: 0px 5%;
}


.ficha
{
	padding-top: 10px;
	text-align: left;
	vertical-align: bottom;
	color: #333;
	font-family: 'Open Sans',serif;
	font-weight: bold;
	font-size: 20px;
}

.fichaData
{
	padding-top: 10px;
	text-align: left;
	vertical-align: bottom;
	color: #333;
	font-family: 'Open Sans',serif;
	font-weight: normal;
	font-size: 18px;
}

.fichaTittle
{
	width: 200px;
}

.ficha_bg
{
	background-color: #f6f6f6;
	
}

.btn_Game
{
	width: 100%;
}

.btn_schoolcontainer
{
	border-radius: 25px;
  	border: 5px solid #999;
  	margin: 20px 20px;
  	padding: 20px 20px;
}

.footerStyle
{
	padding-top: 20px;
	padding-bottom: 20px;
	background: #f6f6f6;
	text-align: center;
}
.centerFooter
{
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}


.imgFooter
{
	width: 100%; 
	height: auto; 

}

.btn
{
	font-family: 'Open Sans',serif;
	height: 50px;
	width: 200px;
	font-size: 20px;
	border: 0px;
	background-color: #02558b;
}

.accordion {
	background-color: #fff;
	cursor: pointer;
	border: 2px #02558b solid;
	width: 100%;
	text-align: center;
	vertical-align: text-top;
	outline: none;
	outline-color:transparent;
	transition: 1s;
	color: #02558b;
	font-family: 'Open Sans',serif;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 20px;
	margin-bottom:20px;
}

	.accordion:focus {
		outline-color: transparent;
		outline: 0 !important;
	}

	.active, .accordion:hover {
		background-color: #02558B;
		color: #fff;
		outline-color: transparent;
		outline: 0 !important;
	}


.accordion2 {
	background-color: #fff;
	cursor: pointer;
	border: 3px #007dbd solid;
	margin-left: 1%;
	margin-right: 1%;
	width: 100%;
	text-align: center;
	vertical-align: text-top;
	outline: none;
	outline-color: transparent;
	transition: 1s;
	color: #007dbd;
	font-family: 'Open Sans',serif;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 20px;
	margin-bottom: 20px;
}

	.accordion2:focus {
		outline-color: transparent;
		outline: 0 !important;
	}

	.active2, .accordion2:hover {
		background-color: #007dbd;
		color: #fff;
		outline-color: transparent;
		outline: 0 !important;
	}
	

.panel {
	padding: 0 18px;
	background-color: white;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}