/*Google Fonts*/

@import url('http://fonts.googleapis.com/css?family=Indie Flower');

/*Browser Reset*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

a,
a:hover,
a:active,
a:focus,
a:visited {

	text-decoration: none;
	color: #f00;
}

/*----------------------general-------------------------*/

html, body {

	height:100%;
	width: 100%;
	
	font-family: 'Open Sans', sans-serif;
	color: #000;

}

#page {

/*
	position: relative;
    min-height: 100%;
*/
    background-color: #fff;
    
    display: flex;
	height: 100%;
	flex-direction: column;
}

/*----------------------header--------------------------*/

#header {

	width: 100%;
	flex: none;
	
	margin: 0 auto;
	padding: 0;
	
	background-color: #333;

}

#mobile_nav {

	display: none;

}

#containerNav {

	width: 50%;
	
	float: left;

}

#navigation {

	width:100%;
	
	padding-left: 1%;
	padding-top: 110px;

}

#navigation li{

	padding: 1%;
	list-style-type: none;
	display: inline-block;

}

#navigation li:hover,
#navigation li:focus,
#navigation li:active {

	border-bottom: 5px solid red;

}

#navigation li h1:hover,
#navigation li h1:focus,
#navigation li h1:active {

	color: #f00;

}

#logo {

	width: 50%;
	
	float: none;
	
	display: inline-block;

}

#logo img {

	padding-right: 5%;
	padding-top: 2%;
	padding-bottom: 2%;
	
	float: right;


}

h1 {

font-family: 'Roboto';
line-height: 1em;
font-size: 1.5em;
color: #5a5a5a;

}

hr {

	width: 100%;
	
	margin: 0;
	
	border: solid;
	border-color: #aad400;

}

/*----------------------content--------------------------*/

#content {
	
	flex: 1 0 auto;
	padding: var(--space) var(--space) 0;
	width:100%;

}

#content::after {
  content: '\00a0'; /*   */
  display: block;
  margin-top: var(--space);
  height: 0px;
  visibility: hidden;
}

#intro {

	width: 50%;
	margin: 0 auto;
	padding-top: 1%;
	padding-bottom: 2%;
	float: none;
	
	text-align: center;

}

#intro h1 {

	color: #f00;
	font-size: 2em;

}

#containerCat {

	margin: 0 auto;
	padding-top: 1%;
	float: none;
	width: 100%;

}

.categorie_size2 {

	display: inline-block;
	width: 48%;
	padding-left: 1%;
	text-align: center;

}

.categorie_size2 h1 {

	width: 100%;
	color: #f00;
	background-color: #333;

}

.categorie_size2 ul li {
	
	padding: 1em;

}

.categorie_size2 ul {
	
	list-style-image: url(img/list.png);
	text-align: left;

}

.categorie_size2 img {

	width: 50%;
	margin: 0 auto;

}

#rlimg {

	width:90%;

}

/*
.categorie_size2:hover,
.categorie_size2:active,
.categorie_size2:focus {

	opacity: 0.5;

}
*/

.categorie {

	display: inline-block;
	width: 31%;
	padding-left: 1%;
	text-align: center;

}

.categorie:hover,
.categorie:active,
.categorie:focus {

	opacity: 0.5;

}

.categorie h1 {

	width:100%;
	margin: 0 auto;
	background-color: #fff;
	border: 2px solid;
	border-color: #8a8a8a;

}

.categorie img {

	width:100%;
	margin: 0 auto;

}

.game {

	width: 48%;
	display: inline-block;
	float: left;
	padding-left: 1%;
	padding-right: 1%;
	text-align: center;


}

.game:hover {

	opacity: 0.5;

}

.game img {

	width: 100%;
	margin: 0 auto;
	border: 2px solid;
	border-color: #8a8a8a;
	border-top: none;

}

.game h1 {

	width:100%;
	margin: 0 auto;
	background-color: #fff;
	border: 2px solid;
	border-color: #8a8a8a;
	text-align: center;

}

.game_end {
	
	width: 98%;
	margin: 0 auto;
	padding: 1%;
	float: none;
	clear:both;
}

.game_end:hover {

	opacity: 0.5;

}

.game_end h1 {

	width:100%;
	margin: 0 auto;
	border: 2px solid;
	border-color: #8a8a8a;
	background-color: #fff;
	text-align: center;

}


.game_end img {

	width: 100%;
	height:50%;
	border: 2px solid;
	border-color: #8a8a8a;
}

/*--------------------game_overview---------------------*/

#game_overview {

	width: 100%;
	margin-bottom: 600px;
	
}

#game_overview #preview {

	width: 50%;
	display: inline-block;
	float: left;

}

#game_overview #description {

	width: 40%;
	padding-left:6%;
	display: inline-block;
	float: left;
}

#game_overview #description a{

	color:#8a8a8a;
	font-weight: bold;
}

#game_overview #description h1{

	color:#f00;
	padding-top: 2%;
	padding-bottom: 2%;
}

#downloads {

	list-style-type: circle;
	line-height: 3em;

}

.gallery img {

	width:45%;
	padding:1%;
	float: left;

}

video {

	width: 100%;

}

#vid_control_panel {

	width: 100%;
	text-align: center;
	background-color: black;

}

button {

	width: 33.3%;
	height: 5em;
	display: inline-block;
	float: left;
	
	color: #fff;
	background-color: #f00;

}

#about {

	width: 90%;
	margin: 0 auto;
	text-align: center;
	padding: 2%;

}

#icon_bar {

	width: 80%;
	margin: 0 auto;
	padding: 2%;
	text-align: center;

}

#icon_bar img {

	padding: 2%;

}

#aboutlink {

	color:#f00;
	font-weight: bold;

}


/*----------------------footer--------------------------*/


#footer {

	width:100%;
	flex: none;
	margin-top: 2%;
	
/*
	position:absolute;
    bottom: 0;
*/
	background-color: #333;
	font-family: "Roboto";
	font-size: 2em;	

}

#social_bar {

	display: inline-block;
	float: left;
	margin: 1%;

}

#copyright {

	float: right;
	padding-right: 2%;
	padding-top: 2%;
	padding-bottom: 2%;

}

#branch {

	color: #5a5a5a;
	display: inline-block;

}

#name {

	color: #f00;
	display: inline-block;

}

/*---------------Slider----------------*/

/*
.fadein { 
	
	position:relative;  
	width:80%; 
	margin:0 auto;

	background-color: #fff;
	padding: 0;
 
 }
 
.fadein img { 
	
	width: 100%;
	position:absolute; 

}
*/

/*--------Interactive-Slider---------------*/

#holder {

	width: 100%;

}

#sliderCont img {

	width: 100%;

}

#sliderCont {

	width:55%;
	display: inline-block;
	float: left;

}

#sliderCont_index {

	width:40%;
	margin: 0 auto;

}

#sliderCont_index img {

	width:100%;

}

#slider_forward,
#slider_back {

	width:22.5%;
	height: 100%;
	display: inline-block;
	float: left;
}

#slider_forward {

	text-align:right;

}

#slider_forward img:hover,
#slider_back img:hover{
	
	opacity: 0.5;

}


#slider_back img{
	
	float: right;
	padding: 5%;
	padding-top: 50%;

}

#slider_forward img{

	float: left;
	padding: 5%;
	padding-top: 50%;

}