html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font: inherit;
  border: 0;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	font-size: 1.3vw;
  font-family: 'Roboto Condensed', sans-serif;/*, Verdana, Geneva, Arial, Helvetica, */
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/**************************************************************/
/*********************              ***************************/
/********************* END OF RESET ***************************/
/*********************              ***************************/
/**************************************************************/

html { height: 100%; }
body {
	height: 100%;
	max-width: 1500px;
	margin: 0 auto;
	background: #555;
}

.left{
	float: left;
}
.bottom {
	height: 10%;
	width: 100%;
	/*background: peachPuff;*/
	position: absolute;
	top: calc(100% - height);  bottom: 0;  left: 0;  right: 0;
}
.social{
	display: inline-block;
}
.social div{
	/*min-height: 40px;
	min-width: 40px;*/
}
.game-block{
  overflow: hidden;
}
.stores{
  height: 100%;
  width: 100%;
	padding-top: 4%;
}
.stores img{
	display: block;
  max-width: 32%;
  padding-top: 3%;
	margin: 0 auto;
	/*margin-left: 32%;*/
  opacity: 0;
  transition: opacity 0s ease-in-out 0s;
}
.stores p{
  text-align: center;
}
.game-block:hover .stores img{
  opacity: 1;
  transition: opacity 0s ease-in-out 0.15s;
}
/*.stores a:nth-child(even){
  margin-left: 5px;
}*/
.stores-agatha{
	padding-top: 30%;
}
.stores-mechanika{
	padding-top: 25%;
	padding-left: 17%;
}

.stores-colossus{
	padding-top: 30%;
}
.stores-clem{
	padding-top: 50%;
}

.stores-mechanika img{
	float: left;
	padding-bottom: 0.5%;
	padding-right: 3%;
	max-width: 37%;
}
#middle-store {
	margin: 0 auto;
}
#divL{
	width: 67%;
	height: 100%;
	position: absolute;
	top: 0;  bottom: 0;  left: -67%;  right: 0;
	background: url(img/psychotic_adventures_title_watercolor.png) no-repeat;
  background-position: 50% 5%;
  background-size: 75% auto;
  background-color: #e8e7e8;
}
#divR{
	width: 60%;
	background: e8e7e8;
  float:left;
	margin-left: 40%;
	height: 100%;
}
#pa-logo{
	background: url(img/psychotic_adventures_title_watercolor.png) no-repeat;
	background-size: contain;
	min-height: 40px;
	min-width: 160px;
}
#mobile-header{
	display: none;
}
#mobile-social, #mobile-MP, #mobile-army{
	display: none;
}
#mechanika-mobile-stores{
	display: none;
}
.mobile-stores{
	display: none;
}

#agatha{background: #e8e7e8;}
#mechanika{background: #e8e7e8;}
#merch{background: #e8e7e8;}
#colossus{background: #e8e7e8;}
#clem{background: #e8e7e8;}

/*SOCIAL BOTTOM*/
#tank-girl{
	background: url(img/tankGirl.gif) no-repeat center;
  background-size: contain;
	position: absolute;
  top: 60%;
  left: 5%;
  right: 60%;
  bottom: 10%;
}
#tank-girl-triangle{
	background: url(img/army_bubble.png) no-repeat center;
  background-size: contain;
	position: absolute;
  top: 36%;
  left: 38%;
  right: 12%;
  bottom: 0%;
}

#social-bottom{
	height: 100%;
	margin: 0 auto;
	text-align: center;
}
#twitter{
  background: url(img/twitter.png) no-repeat center;
  background-size: contain;
  transition: background-image 0.2s ease-out 0s;
	position: absolute;
  top: 0;
  left: 5%;
  right: calc(100% - 8% - 5%);
  bottom: 0;
}
#twitter:hover{
  background-image: url(img/twitter_hover.png);
  transition: background-image 0.2s ease-out 0s;
}
#discord{
  background: url(img/discord.png) no-repeat center;
  background-size: contain;
  transition: background-image 0.2s ease-out 0s;
	position: absolute;
  top: 0;
  left: 16.6%;
  right: calc(100% - 8% - 16.6%);
  bottom: 0;
}
#discord:hover{
  background-image: url(img/discord_hover.png);
  transition: background-image 0.2s ease-out 0s;
}
#facebook{
  background: url(img/facebook.png) no-repeat center;
  background-size: contain;
  transition: background-image 0.2s ease-out 0s;
	position: absolute;
  top: 0;
  left: 16.6%;
  right: calc(100% - 8% - 16.6%);
  bottom: 0;
}
#facebook:hover{
  background-image: url(img/facebook_hover.png);
  transition: background-image 0.2s ease-out 0s;
}
#youtube{
  background: url(img/youtube.png) no-repeat center;
  background-size: contain;
  transition: background-image 0.2s ease-out 0s;
	position: absolute;
  top: 0;
  left: 28.2%;
  right: calc(100% - 8% - 28.2%);
  bottom: 0;
}
#youtube:hover{
  background-image: url(img/youtube_hover.png);
  transition: background-image 0.2s ease-out 0s;
}
#email{
  background: url(img/email.png) no-repeat center;
  background-size: contain;
  transition: background-image 0.2s ease-out 0s;
	position: absolute;
  top: 0;
  left: 39.8%;
  right: calc(100% - 8% - 39.8%);
  bottom: 0;
}
#email:hover{
  background-image: url(img/email_hover.png);
  transition: background-image 0.2s ease-out 0s;
}
#presskit{
  background: url(img/presskit.png) no-repeat center;
  background-size: contain;
  transition: background-image 0.2s ease-out 0s;
	position: absolute;
	top: 0;
	left: 51.4%;
	right: calc(100% - 8% - 51.4%);
	bottom: 0;
}
#presskit:hover{
  background-image: url(img/presskit_hover.png);
  transition: background-image 0.2s ease-out 0s;
}
#mp-logo {
    background: url(img/mp_logo.png) no-repeat center;
    background-size: contain;
		/*min-height: 40px;
		min-width: 160px;*/
		position: absolute;
    top: 0;
    left: 63%;
    right: calc(100% - (8% * 4) - 63%);
    bottom: 0;
}

/*GAMES*/

#mechanika{
	background: #25212e url(img/mechanika_box_art.png) no-repeat center;
	background-size: contain;
}
#mechanika-title{
	background: #0000 url(img/mechanika_title.png) no-repeat top;
	background-size: contain;
  transition: background-color 0.25s ease-in-out 0s;
}
#mechanika-title:hover{
	background: #000A url(img/mechanika_title.png) no-repeat top;
	background-size: contain;
  transition: background-color 0.25s ease-in-out 0s;
}
#agatha{
	background: #251213 url(img/agatha_knife_box_art.png) no-repeat center;
	background-size: contain;
}
#agatha-title{
	background: #0000 url(img/agatha_knife_title.png) no-repeat top;
	background-size: contain;
  transition: background-color 0.25s ease-in-out 0s;
}
#agatha-title:hover{
	background: #0009 url(img/agatha_knife_title.png) no-repeat top;
	background-size: contain;
  transition: background-color 0.25s ease-in-out 0s;
}
#colossus{
	background: #110f18 url(img/colossus_down_box_art.png) no-repeat center;
	background-size: contain;
}
#colossus-title{
	background: #0000 url(img/colossus_down_title.png) no-repeat top;
	background-size: contain;
  transition: background-color 0.25s ease-in-out 0s;
}
#colossus-title:hover{
	background: #000B url(img/colossus_down_title.png) no-repeat top;
	background-size: contain;
  transition: background-color 0.25s ease-in-out 0s;
}
#colossus-title p{
	color: #eaeaea;
	margin-top: 24%;
	font-size: 3.5vw;
	opacity: 0;
  transition: opacity 0.25s ease-in-out 0s;
}
#colossus-title:hover p{
	opacity: 1;
  transition: opacity 0.25s ease-in-out 0s;
}
#clem{
	background: #251213 url(img/clem_box_art.png) no-repeat center;
	background-size: contain;
}
#clem-title{
	background: #0000 url(img/clem_title.png) no-repeat top;
	background-size: contain;
  transition: background-color 0.25s ease-in-out 0s;
}
#clem-title:hover{
	background: #0009 url(img/clem_title.png) no-repeat top;
	background-size: contain;
  transition: background-color 0.25s ease-in-out 0s;
}

#merch{
	/*background: url(img/merch.gif) no-repeat center;
  background-size: contain;
  transition: background-image 0.2s ease-out 0s;*/
}
#merch img{
	width: 100%;
	height: 100%;
}
/*PROPORTIONAL DIVS*/

.wrapper {
	position: relative;
	width: 100%; /* <-- just a default, can be anything. */
}

/*.three-by-two.aspect-ratio { padding-bottom: 66.666% }
.four-by-three.aspect-ratio { padding-bottom: 75% }
.sixteen-by-nine.aspect-ratio { padding-bottom: 56.25% }*/
.one-by-one.aspect-ratio { padding-bottom: 100% }
.two-by-one.aspect-ratio { padding-bottom: 50% }
.three-by-one.aspect-ratio { padding-bottom: 33.333% }
.four-by-one.aspect-ratio { padding-bottom: 25% }
.six-by-one.aspect-ratio { padding-bottom: 16.667% }
.eight-by-one.aspect-ratio { padding-bottom: 12.5% }

.content {
  position: absolute;
  top: 0;  bottom: 0;  left: 0;  right: 0;
	padding: 0; /* Optional padding for content area */
}


/*
	The classes above have all of the aspect ratio magic we need.
	They can be reused on any element.
	Below are some element-specific styles
*/

.half {
	width: 50%;
	float: left;
	background: #e8e7e8;
}

/* Positioning for the main box */
.main-box {
    width: 100%;
    margin: 0 auto;
}

/* Styles for the content in the main box */
.main-box > .content {
    background: ##e8e7e8;
}

/* TYPEWRITER EFFECT */
/*.typewriter{
	background: #fff;
	text-align: left;
	position: absolute;
  top: 62%;
  left: 42%;
  right: 20%;
  bottom: 26%;
	border: 0.33vw solid #c0c0c0;
	border-radius: 1vw;
	padding: 2%;
}*/
/*.typewriter p{
	display: inline-block;
	/*border-right: .15em solid orange; /* The typwriter cursor */
/*  white-space: nowrap; /* Keeps the content on a single line */
/*  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
/*  letter-spacing: .1em; /* Adjust as needed */
/*	line-height: 110%;
	overflow: hidden; /* Ensures the content is not revealed until the animation */
/*}*/
#type-line-1 {
  animation: typing 0.5s steps(15, end);
    /*blink-caret .75s step-end infinite;*/
}
#type-line-2 {
	animation: typing2 1s steps(15, end);
    /*blink-caret .75s step-end infinite;*/
}
#type-line-3 {
	animation: typing3 1.5s steps(15, end);
    /*blink-caret .75s step-end infinite;*/
}

/* The typing effect */
@keyframes typing {
  0% { width: 0 }
  100% { width: 80% }
}
@keyframes typing2 {
	0% { width: 0 }
  40% { width: 0 }
  100% { width: 100% }
}
@keyframes typing3 {
	0% { width: 0 }
  66% { width: 0 }
  100% { width: 100% }
}

/* The typewriter cursor effect
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}*/

/*For obnoxious ultra-wide screens*/
@media only screen and (min-width: 1500px) {
	body {
		font-size: 20px;
	}
	#colossus-title p{
		font-size: 60px;
	}
	.typewriter{
		border: 5px solid #c0c0c0;
		border-radius: 1vw;
		padding: 2%;
	}
	.typewriter p{
		line-height: 24px;
	}
}
@media only screen and (max-width: 1080px) and (min-resolution: 170dpi) /*and (orientation: portrait)*/{
	body {
		font-size: 3vw;
	}
	#mobile-header{
		display: block;
		background: url(img/psychotic_adventures_title_watercolor.png) no-repeat;
	  background-position: 50% 40%;
	  background-size: 75% auto;
	  background-color: #e8e7e8;
	}
	#mobile-social{
		display: block;
	  background-color: #d8d8d8;
	}
	#mobile-MP{
		display: block;
	  background-color: #ebebeb;
	}
	#mobile-army{
		display: block;
	  background-color: #c5c5c5;
	}
	#tank-girl-mobile{
		background: url(img/tankGirlMobile.gif) no-repeat center;
	  background-size: contain;
		position: absolute;
	  top: 6%;
	  left: 10%;
	  right: 52%;
	  bottom: 6%;
	}
	#tank-girl-triangle-mobile{
		background: url(img/army_bubble.png) no-repeat center;
	  background-size: contain;
		position: absolute;
	  top: 0%;
	  left: 44%;
	  right: 10%;
	  bottom: 50%;
	}
	#twitter{
	  background: url(img/twitter.png) no-repeat center;
	  background-size: contain;
		position: absolute;
	  top: 28%;
	  left: 5%;
	  right: calc(100% - 16% - 5%);
	  bottom: 28%;
	}
	#discord{
	  background: url(img/discord.png) no-repeat center;
	  background-size: contain;
		position: absolute;
	  top: 28%;
	  left: 23.5%;
	  right: calc(100% - 16% - 23.5%);
	  bottom: 28%;
	}
	#facebook{
	  background: url(img/facebook.png) no-repeat center;
	  background-size: contain;
		position: absolute;
	  top: 28%;
	  left: 23.5%;
	  right: calc(100% - 16% - 23.5%);
	  bottom: 28%;
	}
	#youtube{
	  background: url(img/youtube.png) no-repeat center;
	  background-size: contain;
		position: absolute;
	  top: 28%;
	  left: 42%;
	  right: calc(100% - 16% - 42%);
	  bottom: 28%;
	}
	#email{
	  background: url(img/email.png) no-repeat center;
	  background-size: contain;
		position: absolute;
	  top: 28%;
	  left: 60.5%;
	  right: calc(100% - 16% - 60.5%);
	  bottom: 28%;
	}
	#presskit{
	  background: url(img/presskit.png) no-repeat center;
	  background-size: contain;
		position: absolute;
		top: 28%;
		left: 79%;
		right: calc(100% - 16% - 79%);
		bottom: 28%;
	}
	#mp-logo {
    background: url(img/mp_logo.png) no-repeat center;
    background-size: contain;
		position: absolute;
    top: 28%;
    left: 26%;
    right: calc(100% - (48%) - 26%);
    bottom: 28%;
	}
	#colossus-title p{
		font-size: 50px;
	}
	#divL{
		display: none;
	}
	#divR{
		width: 100%;
		background: e8e7e8;
	  float:left;
		margin: 0;
	}
	.half {
		width: 100%;
		float: left;
		background: #e8e7e8;
	}
	.mobile-stores{
		display: block;
		text-align: center;
	}
	.mobile-stores img{
		max-height: 100px;
		margin: 3% 1%;
	}
	.stores a{
		display: none;
	}
	#mobile-stores-mechanika{
		background: #25212e url(img/mechanika_box_art_mirror2.png);
		background-size: contain;
		background-position: 0 59.5%;
	}
	#mobile-stores-agatha{
		background: #391b1a url(img/agatha_knife_box_art_mirror.png);
		background-size: contain;
		background-position: 0 59.5%;
	}
	#mechanika-title{
		background: #0000 url(img/mechanika_title.png) no-repeat top;
		background-size: contain;
		opacity: 1;
	}
	#mechanika-title:hover{
		background: #0000 url(img/mechanika_title.png) no-repeat top;
		background-size: contain;
	}
	#agatha-title{
		background: #0000 url(img/agatha_knife_title.png) no-repeat top;
		background-size: contain;
		opacity: 1;
	}
	#agatha-title:hover{
		background: #0000 url(img/agatha_knife_title.png) no-repeat top;
		background-size: contain;
	}
	#mobile-stores-colossus{
		background: #391b1a url(img/colossus_down_box_art_mirror.png);
		background-size: contain;
		background-position: 0 59.5%;
	}
	#colossus-title{
		background: #0000 url(img/colossus_down_title.png) no-repeat top;
		background-size: contain;
		opacity: 1;
	}
	#colossus-title:hover{
		background: #0000 url(img/colossus_down_title.png) no-repeat top;
		background-size: contain;
	}
	#colossus-title p{
		color: #eaeaea;
		margin-top: 24%;
		font-size: 10vw;
		opacity: 1;
	}
	#mobile-stores-clem{
		background: #391b1a url(img/clem_box_art_mirror.png);
		background-size: contain;
		background-position: 0 75.1%;
	}
	#clem-title{
		background: #0000 url(img/clem_title.png) no-repeat top;
		background-size: contain;
		opacity: 1;
	}
	#clem-title:hover{
		background: #0000 url(img/clem_title.png) no-repeat top;
		background-size: contain;
	}
	.stores img{
		opacity: 1;
	}
}