@charset "UTF-8";
/* CSS Document */

html,
html * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
main{
	height:100%;
	
	
}
body{
	height:100%;
	margin:0;
	padding:0;
	background-image:url("marbleBG.jpg");
}

header {
	width:100%;
	top:0px;
	padding: 0em;
	position:absolute;
	z-index:1000;
}

h1 {
	color:#000000;
	/*text-transform:uppercase;*/
	/*font-size:7.5em;*/
	font-size:9vw;
	letter-spacing:4vw;
}
.collapse{
	letter-spacing:1vw;
}
/*.collapse h1{
	letter-spacing:0.5vw;
}*/
/*h2 {
	color:#00FF89;
	font-size:7vw;
}*/



footer {
	width:100%;
	/*margin-top:-1em;*/
	padding:4vw 40vw;
	z-index:1001;
	position:static;
	text-align: center;
}
footer img{
	width:20vw;
}


.site-logo img{
	height:3.1em;
}

.site-nav{
	position: relative;
	float:right;
	z-index:2000;
	top:0;
	left:0;
	display: block !important;
	width: 150px;
	padding: 0.75em 1em 1em 0em;
	opacity: 0.95;
	background-color:#FFFB83;
}
.site-nav ul {
	list-style-type: none;
	margin: 0;
	text-align: right;
}
.site-nav ul li {
	/*display: inline-block;*/
	margin-bottom: 0;
	margin-left: 1.5em;
}
.site-nav a {
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	color:#2c5e2f;
	z-index: 4000;
	
}
.hero {
	/*position: relative;*/
	/*height: 22vw;*/
	width:98%;
	margin:1vw 2vw 1vw 1vw;
	background-color:rgba(167,232,216,0.75);
	border-top: 12px solid #fff;
	border-bottom:12px solid #777;
	border-right:12px solid #999;
	border-left:12px solid #ddd;
}
/*.hero2{
	height:28vw;
}
.hero3{
	height:32vw;
}*/
.hero-content {
	font-family:Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	color:#743639;
	/*position: absolute;
	float:left;*/
	z-index: 20000;
	padding: 1vw 0vw 1vw 3vw;/*1em 0em 150px 5vw;*/
	top: 0;
	/*bottom: 0;*/
	width: 100%;
	text-align: center;
	opacity: 0.5;
}
.hero-content h3{
	font-family:Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	letter-spacing: 0.35em;
	font-size:3.5vw;
}

.intro {
	padding: 21vw 6em 2em;
	z-index:300;
}

.intro p {
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	color: #256E8D;
	text-align:center;
	text-transform:uppercase;
	font-size:5vw;
	line-height: 1.5em;
	letter-spacing:0.325em;
}





.artwork{
	padding:0px 5px 10px 5px;
	opacity:1;
	height:50vh;
	
}
.artwork-description {
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	text-align:left;
	width:60%;
}

.artwork-title{
	max-width:65%;
	color:rgba(0,0,0,0.5);
	font-size: 6vh; /*2.5em;*/
	padding: 0.5em 0em 0em 0.5em;
	/*opacity:0.75;*/
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	
}
.artwork-title a{
	text-decoration:none;
}
.artwork-subtitle{
	color:#000000;
	font-size:20px;
	padding: 0em 0em 0em 1.5em;
	opacity:0.5;
}
.artwork-text{
	font-size:16px;
	padding: 0em 0em 1em 2em;
}

.artwork-piece img{
	height:30vh;
	width:auto;
	max-width:30vw;
	padding: 0vw 0em 0em 1em;
	/*padding: 2.5vw 0em 0em 1em;*/
	z-index:3000;
}

.screenshot-wide img{
	width:100%;
	/*padding:3vw 0vw 0vw 4vw;*/
}
.screenshot-tall img{
	width:100%;
	/*padding:3vw 0vw 0vw 4vw;*/
}
.review p{
	text-align:center;
	color:#19291E;
	font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	font-size:24px;
	padding:2em 2em;
	background-color:rgba(255,255,255,0.50);
	margin:0vw 3vw;
}
.videoresp{
	/*position:absolute;
	padding:3vw 0vw 0vw 4vw;*/
	top:0;
	left:0;
	width:96vw;
	height:70vw;
	border:0;
}
.game{
	display:block;
	margin-right:auto;
	margin-left:auto;
}
.game iframe{
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.screenshot-tall, .screenshot-wide, .review, .videoresp, .game iframe{
	border:8px solid #fff;
	border-right-color:#999;
	border-bottom-color:#777;
	border-left-color:#ddd;
}
.screenshot-tall, .screenshot-wide, .review, .videoresp{
	margin:1vw;
}

.col {
	/*width: 100%;
	padding:7px;*/
	width:100%;
	float:left;
}
.colhalf{
	width:50%;
	float:left;
}
.colthird{
	width:33%;
	float:left;
}
.row:before, .row:after {
	content: "";
	display:table;
	padding-bottom:1em;
}

/*.links {
	float:right;
	position:absolute;
}
.links img {
	width:48px;
	
}
.links ul {
	width:30%;
}
.links ul li {
	display: inline-block;
	float: right;
}

/*figure ul{
	float:right;
}*/
figure ul li{
	display:inline-block;
	float:right;
}


.link ul li{
	display:inline-block;
	
}

.gamelinks{
	width:20vw;
}

.link img{
	height:10vh;
	width:auto;/*80px;*/
	padding:10px 10px 0px 10px;
}

.wrapper{
	width:100%;
	margin-left:1vw;
	margin-right:1vw;
}

.artcard{
	position:relative;
	width:46vw;
	height:60vw;
	padding:2vw 2vw;
	border:8px solid #fff;
	border-right-color:#999;
	border-bottom-color:#777;
	border-left-color:#ddd;
	margin:1vw;
}
.artcard:active{
	border-top-color:#777;
	border-right-color:#ddd;
	border-bottom-color:#fff;
	border-left-color:#999;
}
.artcard a{
	text-decoration:none;
}
.artcard a:link{
	color:#555;
}
.artcard a:hover{
	color:#fff;
}
.artcard a:active,.artcard a:visited{
	color:#111;
}
.artcard h2{
	text-align:center;
	font-size:5vw;
	line-height:100%;
}
.artcard h3{
	text-align:center;
	font-size:3.5vw;
	line-height:140%;
}

.artcard img{
	width:30vw;
	height:30vw;
	display:block;
	margin-right:auto;
	margin-left:auto;
}

.artborder{
	border:4px solid #fff;
	border-top-color:#777;
	border-right-color:#ddd;
	border-bottom-color:#fff;
	border-left-color:#999;
}
.artborder:hover{
	border-top-color:#fff;
	border-right-color:#999;
	border-bottom-color:#777;
	border-left-color:#ddd;
}
.wideart img{
	width:38vw;
	display:block;
	margin-right:auto;
	margin-left:auto;
}
.oneline{
	margin-top:0.4em;
}
.art{
	position:absolute;
	bottom:14vw;
	left:15%;
}
.art2{
	position:absolute;
	bottom:14vw;
	left:6%;
}
.outlink{
	position:absolute;
	width:100%;
	bottom:10px;
	left:0;
}
.artlinks{
	width:33%;
	height:100%;
}
.artlinks img{
	width:10vw;
	height:10vw;
	display:block;
	margin-right:auto;
	margin-left:auto;
}
.indent3rd{
	margin-left:33%;
}
.indent6th{
	margin-left:17%;
}


/*TABLET VIEW*/

@media (min-width:768px){
	/*body {
		max-width: 1023px;
	}*/
	
	.style-nav ul li {
		display:inline-block;
	}
	.style-nav ul {
		text-align:center;
	}
	/*.hero{
		height:16vw;
	}
	.hero2{
		height:22vw;
	}
	.hero3{
		height:26vw;
	}*/
	.hero-content h1{
		font-size:7vw;
	}
	.hero-content h3{
		font-size:2.5vw;
	}
	.col-md-one-half {
		width:50%;
		height:55vw;
	}
	.col-md-one-third{
		width:33%;
		min-height:37vw;
		height:auto;
		
	}
	.col-md-two-third{
		width:66%;
		min-height:37vw;
	}
	.col {
		float:left;
		/*padding: 0px 7px 14px;*/
	}
	.artwork{
		height:53vw;
	}
	.artwork-piece img{
		width:33vw;
	}
	.artwork-title {
		font-size:5vw;
	}
	/*.screenshot-wide img{
		width:60vw;
		padding:1vw 0vw 0vw 1vw;
	}
	.screenshot-tall img{
		width:30vw;
		padding:1vw 0vw 0vw 1vw;
	}*/
	.review p{
		padding:2em 1em;
		margin:0vw 0vw;
	}
	.videoresp{
		/*position:absolute;*/
		padding:1vw 0vw 0vw 1vw;
		top:0;
		left:0;
		width:60vw;
		height:45vw;
		border:0;
	}
	.gamelinks{
		width:12vw;
	}

	/*.link img{
		width:12vw;
	}*/
	.colhalf{
		width:33%;
	}
	.artcard{
		width:30vw;
		height:40vw;
		padding:1.5vw 1.5vw;
		margin:1vw;
	}
	.artcard h2{
		font-size:4vw;
	}
	.artcard h3{
		font-size:2.5vw;
	}
	.artcard img{
		width:20vw;
		height:20vw;
		display:block;
		margin-right:auto;
		margin-left:auto;
	}
	.wideart img{
		width:25vw;
		display:block;
		margin-right:auto;
		margin-left:auto;
	}
	.art{
		bottom:9vw;
		left:15%;
	}
	.art2{
		bottom:9vw;
		left:7%;
	}
	.artlinks img{
		width:7vw;
		height:7vw;
		display:block;
		margin-right:auto;
		margin-left:auto;
	}
}

/*DESKTOP VIEW*/
@media (min-width: 1024px){
	body {
		max-width: 1920px;
	}
	.style-logo {
		float:left;
	}
	.style-nav{
		float:right;
	}
	.col-lg-one-fourth {
		width: 25%;
		height:30vw;
	}
	.artwork{
		height:29vw;
	}
	.artwork-piece img{
		width:15vw;
	}
	.artwork-title {
		font-size:2.5vw;
	}
	.gamelinks{
		width:7vw;
	}

	/*.link img{
		width:7vw;
	}*/
	.colhalf{
		width:25%;
	}
	.artcard{
		width:22vw;
		height:30vw;
		padding:1vw 1vw;
		margin:1vw;
	}
	.artcard h2{
		font-size:3vw;
	}
	.artcard h3{
		font-size:1.5vw;
	}
	.artcard img{
		width:16vw;
		height:16vw;
		display:block;
		margin-right:auto;
		margin-left:auto;
	}
	.wideart img{
		width:19vw;
		display:block;
		margin-right:auto;
		margin-left:auto;
	}
	.art{
		bottom:6.5vw;
		left:11%;
	}
	.art2{
		bottom:6.5vw;
		left:4%;
	}
	.artlinks img{
		width:5vw;
		height:5vw;
		display:block;
		margin-right:auto;
		margin-left:auto;
	}
}


.biglink{
	float:left;
	width:19vw;
}
.biglink img{
	width:19vw;
}
.biglink ul li{
	
}


.bgwhittler{
	background-color:rgba(227,169,126,0.5);
}
.bgtwittler{
	background-color:rgba(205,136,234,0.5);
}
.bgvolcano{
	background-color:rgba(134,213,139,0.5);
}
.bgtelegraph{
	background-color:rgba(224,207,129,0.5);
}
.bgsemaphore{
	background-color:rgba(135,148,226,0.5);
}
.bghigh{
	background-color:rgba(146,225,232,0.5);
}
.bgtdc{
	background-color:rgba(242,237,90,0.5);
}
.bgbossman{
	background-color:rgba(224,97,99,0.5);
}

.bgwhite{
	background-color:rgba(255,255,255,0.50);
}

.bounce {
 height: 50px;	
 overflow: hidden;
 position: relative;
 /*background: yellow;
 color: orange;*/
 border: 0px solid orange;
}
.bounce p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 font-size:24px;
 /* Starting position */	
 transform:translateX(50%);
 /* Apply animation to this element */	
 animation: bouncing-text 10s linear infinite alternate;
}
/* Move it (define the animation) */
@keyframes bouncing-text {
 0%   { 
 transform: translateX(50%); 		
 }
 100% { 
 transform: translateX(-50%); 
 }
}
.divider img{
	width:100vw;
	padding:0vw 10vw;
}
.footerimg{
	margin-top:2vw;
	padding:0vw 7.5vw;
}
.footer img{
	width:20vw;
}
.footer p{
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	color:#333;
	font-size:18px;
	padding-top:0px;
	z-index:1001;
	/*position:relative;*/
	text-align: center;
	opacity:1;
}
.social{
	margin-top:3vw;
	float:left;
	width:10vw;
}
.social img{
	width:8vw;
}