:root {
  --primary: #48D7CF;/* #48D7CF #12798d*/
  --primaryLight: #a3f3ef;/* #a3f3ef */
  --primaryDark: #31a09a;/* #31a09a */
  --primaryButton: #FF9900;/* #FF9900 */
  --primaryActive: #FF9900;/* #FF9900 */
  --primaryFont:'ccZoinks';/* 'Roboto' */
}
body,html {
	margin:0;
	padding:0;
	color:#333333;
	font-size:9pt;
	background:white;
	font-family:Verdana, sans-serif;
}
@font-face {
  font-family: ccZoinks;
  src: url(images/19f4723099f0a5f5d9e6a316534d90f5.woff);
}
/* Colors
green background -#99BC50;
dark green text - #5A8101;
*/
/* General */
img { border: none; }
a  {color:var(--primaryButton); text-decoration:none;font-size:11pt;font-weight:800;}
a:visited { color:none; }
a:hover { color:var(--primaryActive); }
a:active { color:var(--primaryActive); }
h1{font-family: var(--primaryFont), sans-serif;letter-spacing: .5px;font-weight:100;color:var(--primary);font-size: 25pt;display:inline;line-height:100%;}
h2{font-family: var(--primaryFont), sans-serif;letter-spacing: .5px;font-weight:100;color:var(--primary);font-size: 20pt;display:inline;line-height:100%;}
h3{color:var(--primaryDark);margin:0;font-size: 13pt;font-weight: normal; display: inline;}
p{line-height:150%;font-size:12pt;}
.clear {clear:both;}

.background-color{margin:0;padding:0;background:#262626;}
.gray{margin:0;padding:0;background:#1e1e1e;}
.white{margin:0;padding:0;background:white;}
.shadow{background-image: url(images/shadow1500.png); background-position:center;background-repeat: repeat-y;}
.shell-texture{background-image: url(images/shell_pattern4.png); background-position:center;background-repeat:repeat;}


/* Header */
#header-wrap{width:100%;margin:0 auto;background:var(--primary);}
#header {padding:0px;height:130px;background-image: url(images/pattern_top.png); background-position:right;background-repeat:repeat-y;}
#header img{width:90%;}
#header {height:100%;}

/* Top Navigation height:49px;*/
#nav-wrap{width:100%;margin:0 auto;background:white;height:100%;}
.nav {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #1e1e1e;}
.nav li {float: left;}
.nav li a {display: inline-block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;transition: 0.3s;font-size: 17px;font-weight:400;}
.nav li a:hover {background-color: #555555;}
.nav li a.current{background:white; color:var(--primary);}
	
.nav li:not(:first-child) {display: none;}
.nav li.icon {float: right;display: inline-block;}
.nav.responsive {position: relative;}
.nav.responsive li.icon {position: absolute;right: 0;top: 0;}
.nav.responsive li {float: none;display: inline;}
.nav.responsive li a {display: block;text-align: left;}


/* Footer */
#footer-wrap{width:100%;height:100px;margin:0 auto;background:#1e1e1e;}
#footer {clear:both;height:100px;}
.social-icons {text-align: center;}
.social-icons IMG {padding:10px;}
.copyright {color:#999999;text-align: center;}

/* ==================== HOME PAGE */

.content-wrap{width:100%;background:white;margin:auto;}
.content{width:100%;padding-top:4px;}


/* FEATURED */
.featured-wrap{width:100%;float:none;}

.featured{position: relative;padding-bottom:2px;}
.featured IMG{width:100%;}
.over-img{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: .4s ease;
}
.featured:hover .over-img {opacity: 1;}

/* ==================== NEWS */
#ad-wrap{padding-left:5px;}
.ad{display: block;margin-left: auto;margin-right: auto;width:100%;}
.news-wrap{width:100%;float:none;}
.news{padding:15px;}
.news p {
	font-size:12pt;
}
.news p span{
	font-weight: 550;
}
.news IMG{
	width:100%;
	padding-bottom:20px;
}
.news .small {
	display: block;
	margin: 0 auto;
	width:50%;
	padding-top:20px;
	padding-bottom:20px;
}
.line-sep{
	height:1px;
	width:100%;
	border-top:1px solid #e4e4e4;
	padding-bottom:5px;
}
#hidden-news{
	display:none;
}
.more-news{
	all: unset;
    padding: 0px;
	color:#ffffff;
    background-color: var(--primaryButton);
    cursor: pointer;
	font-size: 12pt;
	text-align: center;
	line-height: 2;
	width:100%;
}
.more-news:hover {
    background-color: var(--primaryActive);
}
.sunken_image{position: relative;width: 100%;display:none;}
.sunken_image IMG{position:absolute;right:10px;bottom:10px;width:20%;}

button {cursor: pointer;}
.message-button {
  background-color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 2px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.26);
  color: white;
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 1rem;
  padding: 1rem;
  position: relative;
  width: 100%;
  -webkit-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.message-button:hover{
    background-color: var(--primaryDark);
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.35);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.35);
}

/* =================================== GAMES PAGE */
.game-list-wrap{width:100%;clear:both;}
.game-list-wrap .padding{padding-left:2px;padding-right:2px;}
h1.game-list{line-height:100%;width:90%;margin:50px 0px 8px 24px;}
h3.game-list{line-height:100%;width:90%;margin:0px 0px 8px 24px;}
.game-list{width:50%;float:left;}
.game-list-small{width:20%;float:left;}
.game-list-big{width:100%;float:left;}
.game-list-big .padding,.game-list .padding,.game-list-small .padding{padding:0px 2px 1px 2px;}
.game-list-big IMG,.game-list IMG,.game-list-small IMG{width:100%;}

.featured-game-grid {
  display: grid;
  grid-template-areas:
  "big-picture"
  "description";
  grid-template-columns: 100fr;
  gap: 0px;
  padding: 0px 0px 4px 0px;
  width:100%;
}
.featured-game-grid div {
  background-image: linear-gradient(#ffffff,#ffffff, var(--primaryLight));
  background-color: var(--primaryLight);
  padding: 0px;
}
.featured-game-grid div.big-picture {
  grid-area: big-picture;
}
.featured-game-grid div.big-picture IMG{
	width:100%;
	padding:0px;margin:0px;display:block;
}
.featured-game-grid div.description {
  grid-area: description;
  border-top:1px solid var(--primaryLight);
  padding:0px 0px 0px 0px;
  position: relative;
}
.featured-game-grid div.description h2{font-family:Verdana, sans-serif;
	font-family:var(--primaryFont), sans-serif;
	letter-spacing: 1px;
	color:var(--primaryDark);
	font-size: 18pt;
	padding:10px 0px 10px 20px;margin:0px;display:block;
	background-image: linear-gradient(#ffffff,#ffffff, #e4f3f3);
}
.featured-game-grid div.description p.game-type{
	font-weight: bold;
	border-top:1px solid #e4e4e4;
	border-bottom:1px solid #e4e4e4;
	padding:5px 8px 5px 20px;
	margin:0px;
	background-color: #ffffff;
}
.featured-game-grid div.description p.description{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
  line-clamp: 9;
  overflow: hidden;
  padding:0px 10px 0px 20px;
  text-overflow: ellipsis;
}
.featured-game-grid div.description IMG{
	width:60%;
	position: absolute;
	bottom: 0;
	left:50%;
	transform: translateX(-50%);
	padding-bottom:20px;
	display:none;
}

/* ==================== FLASH GAMES */
.flash-wrap-black{background:black;text-align: center;padding-top:0px;width:100%; height:100%;}
.flash-game{width:100%;background-color: #000000; text-align: center;}
.flash-wrap-tan{background:#FAF4D8;padding:20px;}
.flash-ins{text-align: left;padding:30px;color:white;font-size:12pt;display: none;}
.flash-top{display: none;}
.flash-bottom{display: none;}

/* ==================== BOOKS PAGE */
IMG.snug {display:block;padding:0;margin:0;width:100%;}
.book-shelf-wrap{position:relative;width:100%;height:100%;background-color:87ac5e;}
.book-shelf{position: absolute;bottom:0px;width:100%;}
.book-shelf-books{z-index: 1;width:100%;height:100%;text-align:center;}
.book-shelf-books IMG{width:15%;padding:0px 5px 0px 5px}

/* ==================== UNDER CONSTRUCTION */
.construction-wrap{text-align:center; padding:30px;}
.construction-wrap img{margin-left: auto;margin-right: auto;padding:30px;}

/* ==================== ABOUT PAGE */
.about-half{float:none;width:100%;}
.about-image-wrap{padding:30px;text-align: center;}
.img-center{width:60%;}
.about-text-wrap{padding: 0px;}
.about-text{padding: 20px 50px 0px 50px;}
.about-text ul{list-style-type: square;font-size:12pt;font-weight: bold;margin-bottom: 50px;}
.about-text li:not(:last-child) {margin-bottom: 15px;}

/* ==================== CONTACT PAGE */
.contact-wrap{padding-top:20px;background:#2E918B;clear:both;}
.email-form{color:white;padding: 20px 75px 0px 75px;}
button[type=submit] {
background:white;color:var(--primary);font-size:20px;
padding: 4px 10px 4px 10px;
-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 6px;
text-decoration:none;border:0;
}
button[type=submit]:hover {background:var(--primary);color:white;box-shadow: 0px 0px 10px #777;}
.contact-icon { float: left; margin-top:10px;padding-right:10px;}
.email-form h1{color:white;}








/* ==================== Screen Sizes */
/* general */
@media only screen and (min-width: 650px) {
	/* general */
	#header img{width:50%;}
	.block-wrap {width:50%;height:auto; float:left;}
	.nav li:not(:first-child) {display: inline-block;}
	.nav li.icon {display: none;}
	h1{font-size: 35pt;}

}
@media only screen and (min-width: 950px) {
	/* general was 900*/
	#header {height:130px;}
	#header img{width:initial;}
	.block-wrap {width:33.33%;height:auto; float:left;}
	/* home */
	.featured-wrap{width:66%;float:left;}
	.news-wrap{width:34%;float:right;}
	.sunken_image{display:block;}
	/* games */
	.featured-game-grid  {grid-template-areas:"big-picture description";grid-template-columns: 65fr 35fr;}
	.featured-game-grid div.description h2{font-size: 20pt;}
	.game-list-big{width:50%;float:left;}
	.game-list{width:25%;float:left;}
	.game-list-small{width:10%;float:left;}
	.flash-top{display: initial;}
	.flash-ins{display: block;}
	.flash-bottom{display: initial;}
	/*about*/
	.about-half{float:left;width:50%;}
	.img-center{width:100%;}
	
}
@media only screen and (min-width: 1220px) {
	/* games */
	.featured-game-grid div.description IMG{display:initial;}
	.featured-game-grid div.description IMG{width:60%};/* 70 */
}
@media only screen and (min-width: 1300px) {
	/* games */
	.featured-game-grid div.description IMG{width:80%;}
	.featured-game-grid div.description p.description{-webkit-line-clamp: 5;line-clamp: 5;}
}
@media only screen and (min-width: 1525px) {/* Big Computer Screens */
	/* general put width limit on it*/
	.content-wrap{width:1500px;}
	#header-wrap{width:1500px;}
	#nav-wrap{width:1500px;}
	#footer-wrap{width:1500px;}
	/* games */
	.featured-game-grid div.description IMG{width:90%;};
}