.title { text-align: center; color: #00c6ff; font-size: x-large; padding: 15px 15px 15px 15px;}
.title a:link,  a:visited, a:active { color: #8e8e8e; text-decoration:none; }
.title a:hover { color: #ff00f0; text-decoration:none; }

a { text-decoration: none; }

#wrappergames { 
	background-color: #f3f3f3;
	width:100%;
	padding: 20px 0px 20px 0px;
	text-align: justify;
	text-decoration:none; 
  }


#contentgames { 
	width:940px;  
	margin: auto;
	color: #222222;
	  border-style: solid;
  border-width: 1px;
  border-color: lightgrey;
  background-color: #ffffff;
  padding:40px 40px 40px 40px;
text-align: left;
	text-decoration:none; 

	} 

#download { 
	text-decoration:none;  	
	width:210px;
	font-weight: normal;
	background-color: #00ccff;
	color:#ffffff;
	border-radius: 5px;
	padding: 15px 15px 15px 15px;	
	} 




body {
  background-color: #FFFFFF;	
  text-align: center;
  margin:0px;
  font-family: calibri; 
}

.containercenter {
	display: flex;
	justify-content: center;
	align-items: center;
}

.container {
	  margin-top: 20px;
	  max-width:1200px;
	  overflow: hidden;
}

.text {
	  margin: 20px;
	  max-width:850px;
text-align: justify;
}

.projects:hover img{
  opacity: 0.8;
}

.projects img { 
  width:100%; 
  margin-bottom:6px;
  display:  block;
}

.bannerDiv  {
  float: left; 
  width: 100%;
 color:darkGrey;
  display: flex;
  text-align: center;
  position:relative;
  background: #ffffff;
    box-sizing: border-box;
	padding: 15px 15px 15px 15px;
}
.bannerDiv img { 
  width:100%; 
  display:  block;
}

.cards  {
  float: left; 
  margin: 0;
  width: 100%;
  background: #ffffff;	
}
.cards img { 
  width:48%; 
  margin: 0;
}

.projects  {
  float: left; 
  width: 50%;
 color:darkGrey;
  display: flex;
  text-align: center;
  position:relative;
  background: #ffffff;
    box-sizing: border-box;
	padding: 15px 15px 30px 15px;
}

.projects a:link, a:visited, a:hover, a:active { color: #555555;text-decoration:none; }






#footer { 
	width:100%;
	padding: 10px 0px 10px 0px;
	text-align: center;
  	background: #1c1c1e;		
	color: #555555;

	} 
	
#footer a { 	
	text-decoration:none;  
	color: #555555;
	font-weight: bold;
	}

#footer a:hover{
	color: #00ccff;
	font-weight: bold;
	}


.proj_text {
  float: none; 
  width:auto;
  color:#e4f1ea; 
  padding:20px;
  text-align: center;
  font-family:verdana;
}

.proj_img {
  float: left; 
  width:100%; 
}	



#content a { 	
	text-decoration:none;  
	color: #00a2ca;
	font-weight: bold;

	}

#content a:hover{
	color: #00ccff;
	font-weight: bold;
	}

#packshots{ 
	float:left;
	padding: 10px 10px 10px 10px;
	object-fit: cover;
	} 

mark {
  background-color: #ececec;
  font-weight: bold;
}

#content { 
	width:940px;
	  text-align: left;
}


h1 { 
  display: block;
  font-size: 1.8em;
  margin-top: 0.0em;
  margin-bottom: 0.3em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color: #222222;
}


h2 { 
  display: block;
  font-size: 1.3em;
  margin-top: 0.9em;
  margin-bottom: 0.6em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color: #222222;
}


@media only screen and (min-width: 800px) {
.cards img { 
  width:24%; 
  margin: 0;
}
	
.projects  {
  float: left; 
  width: 33.33%;}	
	
.proj_text {
  float: none; 
  width:auto;
  color:#e4f1ea; 
  padding:20px;
  text-align: center;
  font-family:verdana;
}

.proj_img {
  float: left; 
  width:100%;
}	
}
	
@media only screen and (min-width: 1000px) {
.cards img { 
  width:19%; 
  margin: 0;
}
	
.projects  {
  float: left;
  width: 25%;
}	
	
.proj_text {
  float:right;
  width:350px; 
  color:#e4f1ea; 
  padding:20px;
  text-align: left;
  font-family:verdana;
}

.proj_img {
  float: none; 
  overflow: hidden;
  width: auto; 
}	
}
@media only screen and (min-width: 1200px) {
.cards img { 
  width:19%; 
  margin: 0;
}
	
	
.projects  {
  float: left;
  width: 25%;
}
	
.proj_text {
  float:right;
  width:350px; 
  color:#e4f1ea; 
  padding:20px;
  text-align: left;
  font-family:verdana;
}

.proj_img {
  float: none; 
  overflow: hidden;
  width: auto; 
}		
}


.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}