@charset "utf-8";

/*
Theme Name: Raiyumi Level Up Theme.
Theme URI: https://www.raiyumi.com
Description: Beautiful pixel parallax/minimalist theme for Raiyumi Inc.
Version: 1.0
Author: Ryan Carag
Author URI: https://www.raiyumi.com
*/


/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
	border: 0;
	font-size: 100%;
	font: inherit;
	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;
}
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;
}

b{
	font-weight: bold;	
}

i{
	font-style: italic;	
}

u{
	text-decoration: underline;	
}

s{
	text-decoration: line-through;
}

/* Main CSS below */

body{
	
}

p{ 	font-family: 'Open Sans', sans-serif; }
h1{	font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 1.8em; }	
h3{ font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 1.2em; }

@keyframes bounce {
  0% { transform: translateY(0px); }
  20% { transform: translateY(-1.7px); }
  40% { transform: translateY(1.4px); }
  60% { transform: translateY(-1px); }
  80% { transform: translateY(0.5px); }
  100% { transform: translateY(0px); }
}

.nav-bar{
	width: 100%;
	height: 70px;
	position: fixed;
	top: 0;
	background-color: #fafafa;
	font-family: 'Raleway', sans-serif;
	font-weight: 500;
	font-size: 0px;
	letter-spacing: 3px;
	text-align: center;
	list-style: none;

	-o-transition: top 0.17s;
    -ms-transition: top 0.17s;
    -moz-transition: top 0.17s;
    -webkit-transition: top 0.17s;
    transition: top 0.17s;
	
	z-index: 100;
}

.nav-bar-up {
	top: -70px; /* Moves nav up */
}

.nav-bar-down {
	top: 0px; 
}

.nav-bar-decor1.nav-bar-up{
	top: 0px;	
}

.nav-bar-decor1.nav-bar-down{
	top: 70px;	
}

.customize-support .nav-bar{
	top: 32px; /* Fixes nav-bar when admin bar is up */
} 

#toggle{
	display: none;
}

.nav{
	width: 100%;
	margin: 0 auto;
}

.navlogo{
	vertical-align: top;
}
 
.nav li{
	display: inline;
}

.nav-diamond{
	display: inline-block;
	background: #e4e2e2;
	width:10px;
    height: 10px;
    transform:rotate(45deg);
	margin: 0 10px;
}

.nav li a{
	display: inline-block;
	font-size: 13px;
	color: #828282;
	text-decoration: none;	
	padding: 0px 28px;
    padding-top: 29px;
    padding-bottom: 28px;
	width: 60px;
	
	-o-transition:.2s;
    -ms-transition:.2s;
    -moz-transition:.2s;
    -webkit-transition:.2s;
    transition: .2s;
}

.nav li a:hover{
	background-color: rgba(227, 230, 238, 0.5);
	color: #333;
}

/* -------------- */

.main-wrapper{
	min-width: 100%;
	max-width: 100%;
	
	margin-top: 70px;
	position: relative;
	
	background: #ECE9E6;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to bottom, #FFFFFF, #ECE9E6);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to bottom, #FFFFFF, #ECE9E6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/* -------------- */

.header-bar{
	width: 100%;
	height: 384px;
	display: flex;
	position: relative; 
	overflow: hidden;
}

.logo{
	position: absolute;
	
	z-index: 22;
	
	width: 232px;
	height: 74px;
	
	left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
	
	margin-top: 115px;
}

.logo:hover{
	animation: bounce 0.5s;
}

.bg1{
	position: absolute;
	background: url(images/raiyumi_headerbg1.png);	
	background-repeat:no-repeat;
	background-position:  center bottom;
	
	z-index: 21;
	
	
	width: 1332px;
	height: 384px;
}

.bg2{
	position: absolute;
	background: url(images/raiyumi_headerbg2.png);
	background-repeat:no-repeat;
	background-position:  center bottom	;
	z-index: 19;
	
	width: 1332px;
	height: 384px;
}

.bg3{
	position: absolute;
	background: url(images/raiyumi_headerbg3.png);
	background-repeat:no-repeat;
	background-position:  center bottom	;
	z-index: 18;
	
	width: 1332px;
	height: 384px;
}

.bg4{
	position: absolute;
	background: url(images/raiyumi_headerbg4.png);
	background-repeat:no-repeat;
	background-position:  center bottom	;
	z-index: 17;
	
	width: 1332px;
	height: 386px;
	
    margin-top: -3px;
}

.bg5{
	position: absolute;
	background: url(images/raiyumi_headerbg5.png);
	background-repeat:repeat-x;
	z-index: 16;
	
	width: 1332px;
	height: 384px;
}

.bg6{
	position: absolute;
	background: url(images/raiyumi_headerbg6.png);
	background-repeat:no-repeat;
	background-position:  center bottom	;
	z-index: 17;
	
	width: 1332px;
	height: 386px;
}

.header-center{
	width: 1332px;
	height: 384px;
	margin: 0 auto;
	
	overflow: hidden;
}

.header-left{
	flex: 1;
	margin-right: -0.02px;
	position:relative;
}

.header-right{
	flex: 1;
	position:relative;
	
}

.side-bg1{
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(images/raiyumi_headerbg5.png);
	background-repeat:repeat-x;
	background-position: right;
	z-index: 16;
}

.side-bg2{
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(images/raiyumi_headerbg5.png);
	background-repeat:repeat-x;
	background-position: left;
	z-index: 16;
}

.side-cloud1{
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(images/raiyumi_sidecloud.png);
	background-repeat:repeat-x;
	background-position: bottom right;
	z-index: 17;
}

.side-cloud2{
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(images/raiyumi_sidecloud.png);
	background-repeat:repeat-x;
	background-position: bottom left;
	z-index: 17;
}

/* -------------- */

.content-box{
	position: relative;
	width: 100%;
	height: 200px;
	background-color: #2b3140;
	border-bottom: 6px solid #d3d5da;
	border-top: 6px solid #41495e;
	display: flex;
	justify-content: center;
	
	z-index: 20;
	margin-top: -32px;
	padding-top: 22px;
	
	background-image: url(images/darkbg1.png), url(images/darkbg2.png);
	background-repeat: no-repeat, no-repeat;
	background-position: bottom left, bottom right;
}

.content-box-title{
	position: relative;
	width: 100%;
	height: 200px;
	background-color: #2b3140;
	border-bottom: 6px solid #d3d5da;
	border-top: 6px solid #41495e;
	display: flex;
    flex-direction: column;
	justify-content: center;
	align-items: center;
    text-align: center;
	
	z-index: 20;
	margin-top: -32px;
	padding-top: 22px;
	
	background-image: url(images/darkbg1.png), url(images/darkbg2.png);
	background-repeat: no-repeat, no-repeat;
	background-position: bottom left, bottom right;
}

.content-box-title h1{
	font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    color: #fafafa;
    font-size: 2.5em;	
}

.box-title-margin-change{
	height: 160px;	
}

.content-box-title p{
	font-family: 'Open Sans', sans-serif;
    font-size: 0.9em;
    color: #889dad;
    line-height: 1.75em;
}

.c-image{
	width: 100px;
	height: 100px;
	margin-top: 12px;
	
	display: flex;
}

.c-image img{
	margin: auto;	
	padding-top: 20px;
    padding-right: 16px;
}

.c-text{
	width: 315px;
	height: 150px;
	margin-top: 9px;
	
	padding: 5px;
	padding-left: 18px;
	font-family: 'Open Sans', sans-serif;
	font-size: 0.9em;
	line-height: 1.5;
	justify-content: center;
	color: #b6bbc8;
}

#about-title{
	color: #fafafa;
	font-weight: 700;
	font-size: 1.25em;
	line-height: 1.8;
    font-family: 'Raleway', sans-serif;
    letter-spacing: 0.04em;
}

/* ---Content Game Thumbs--- */

.content-games{
	margin: 0 auto;
  	max-width: 1088px;
  	padding: 8px;
	margin-top: 15px;
}

.game-phrase{
	width: 100%;
	margin: 0 auto;
	margin-top: 26px;
    margin-bottom: 44px;
	
	text-align: center;
	font-family: 'Raleway', sans-serif;
	color: #2b3140;
	font-weight: 300;
	font-size: 1.75em;
}

.other-phrase{
	margin-top: 26px;	
    margin-bottom: 0px;
}

.other-phrase2{
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9em;
    color: #889dad;
    line-height: 1.75em;
}

.responsive-image{
	margin: 0 auto;
	max-width: 100%;
}

/* */

.game-thumb{
	margin: 8px;	
	
	position:relative;
    overflow:hidden;
}

.game-thumb img{
	display: block;
}

.game-thumb:hover .game-caption{
	transform:translateY(-100%);
}

.game-caption{
  position:absolute;
  transition: transform 500ms;
  background-color:rgba(5, 5, 5, 0.75); 
  padding: 20px;
  color: #fafafa;
  
  word-wrap: break-word;
  top: 100%;
  left: 0;
  right: 0;
}

.game-caption h2 a{
	font-family: 'Raleway', sans-serif;	
	font-weight: 700;
	margin-bottom: 10px;
    font-size: 1.3em;
	color: #fafafa;
	text-decoration: none;
	
	-o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition: .3s;
}

.game-caption h2 a:hover{
	color: #ffcc29;
}

.game-caption p{
    border-top: 1px solid #636769;
	font-size: 0.9em;
    line-height: 1.5em;
	margin-bottom: 14px;
	margin-top: 10px;
    padding-top: 10px;
	color: #e0e0e0;
}

.available-on{
	font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 0.8em;
	margin-right: 2px;
	text-align: right;
}

.available-on a{
	color: #c75e61;
	text-decoration: none;
	padding-left: 3px;
	
	-o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition: .3s;
}

.available-on a:hover{
	color: #ff8788;	
}

.available-other{
	border-top: 1px solid #636769;
	margin-top: 10px;
    padding-top: 10px;
	color: #cca344; 
}

/* ---Content Journal--- */

.wrapper-journal{
	margin: 0 auto;
  	max-width: 786px;
  	padding: 8px;
    margin-top: -35px;
}

.wrapper-free{
	margin-top: 16px;	
}

.single{
	margin-top: -85px;	
}

.post{
	margin-top: 100px;
    margin-bottom: 40px;
}

.post.single{
    margin-bottom: 0px;
}

.post a{
	-o-transition:.15s;
    -ms-transition:.15s;
    -moz-transition:.15s;
    -webkit-transition:.15s;
    transition: .15s;
	
	text-decoration: none;	
    font-family: 'Open Sans', sans-serif;
}

.meta-title{
	text-align: center;	
	padding: 10px;
}

.meta-title a{
	color: #333;
	text-decoration: none;
}

.meta-title a:hover{
	color: #d44e4e;
}

.meta-date{
	text-align: center;	
	padding: 10px 0px 27px 0px;
	color: #aeb1b3;
    font-size: 0.9em;
}

.content-entry{
    color: #5f5f5f;
    line-height: 1.9em;
    padding: 10px;	
}

.content-entry p {
	font-family: 'Open Sans', sans-serif;
	padding-bottom: 32px;	
}

.content-entry ul{
	font-family: 'Open Sans', sans-serif;	
	list-style: square;	
	padding-left: 40px;
}

.content-entry h1{
	padding-bottom: 33px;
    padding-top: 20px;
}
.content-entry h2{
	font-family: 'Open Sans', sans-serif;	
	font-size: 1.4em;
    color: #da4a4c;
    padding-bottom: 13px;
}

.content-entry img{
	padding-bottom: 5px;
	max-width: 100%;
    height: auto;
}

.content-entry a{
	color: #d44e4e;	
}

.content-entry a:hover{
	color: #ff9999;	
}

.post-footer{
	margin-top:17px;
	width: 100%;
}

.post-footer ul{
	padding-left: 0px;	
}

.post-footer li{
	display: inline;
}

.post-footer a{
	color: #aeb1b3;
    font-size: 0.8em;
	letter-spacing: 0.05em;
}

.post-footer a:hover{
	color: #999;	
}

.read-more{
    width: 100px;
	font-family: 'Open Sans', sans-serif;
    color: #fff;
    padding: 5px;
    margin-right: 30px;
    margin-top: -31px;
    float: right;
    text-align: center;
    background: #d44e4e;
    text-transform: uppercase;
    font-size: 1em;
    border-radius: 4px;
	cursor: pointer;
	
	-o-transition:.15s;
    -ms-transition:.15s;
    -moz-transition:.15s;
    -webkit-transition:.15s;
    transition: .15s;	
}

.read-more:hover{
	background: #e87b7b; 
}

.journal-footer{
    padding: 0px 10px 20px 10px;
}

.journal-footer a{
	text-decoration: none;
    font-family: 'Open Sans', sans-serif;	
}

.journal-footer-post{
    width: 100%;
    height: 20px;
		
}

.journal-footer-post a{
    font-size: 0.9em;
    color: #888888;
    letter-spacing: 0.04em;
	
	-o-transition:.15s;
    -ms-transition:.15s;
    -moz-transition:.15s;
    -webkit-transition:.15s;
    transition: .15s;
}

.journal-footer-post a:hover{
	color: #555;	
}

.newer-posts{
	float: left;
}

.older-posts{
	float: right;
}

.journal-footer-categories{
    text-align: center;
    margin-top: 64px;
}

.journal-footer-categories li{
	display: inline;	
}

.journal-footer-categories li a{
    padding: 10px;	
    line-height: 49px;
	
    border: 1px solid #969696;
    border-radius: 15px;
    text-align: center;
    color: #969696;
    font-weight: bold;
    font-size: 0.85em;
	
	-o-transition:.15s;
    -ms-transition:.15s;
    -moz-transition:.15s;
    -webkit-transition:.15s;
    transition: .15s;	
}

.journal-footer-categories li a:hover{
	color: #555;
    border: 1px solid #555;	
}

/* ---Game Page Header--- */

.wrapper-game-header{
	position: relative;
    width: 100%;
    height: 400px;
    background-color: #2b3140;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: -32px;
    padding-top: 22px;
	
	border-width: 8px;
    border-bottom-style: solid;
    border-color: lightgrey;
}

.wrapper-game-header h1{
 	color: white;
    z-index: 2;	
	font-weight: bold;
	font-size: 2.5em;
}

.wrapper-game-header p{
 	color: white;
    z-index: 2;	
	margin-top: 8px;	
}

.header-overlay{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.5);
    z-index: 1;	
}

.game-header-cover{
    width: 100%;
	height: 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.wrapper-game-main{
    max-width: 850px;
	margin: 0 auto;	
}

.game-content-edit{
	margin-top:90px;	
}

.platforms{
	text-align: center;	
    margin-bottom: 10px;
    margin-top: 19px;
}

.platforms img{
	padding: 0px 5px 0px 5px;	
}

.platforms br{
	display: none; /* Remove any auto-added <br> */	
}

.game-container{
	margin: 0 auto;
  	max-width: 100%;
  	padding: 8px;
	padding-left: 0px;
	padding-right: 0px;
	
    margin-top: -35px;	
	
	background-color: #2b3140;
    margin-bottom: 24px;
    border-bottom: 6px solid #d3d5da;
}

.video-container{
	position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;	
	margin-top: -6px;
}

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

/* ---Content Subscribe--- */

.content-subscribe{
	width: 100%;
    border-top: 2px solid #c7c7c6;
    border-bottom: 2px solid #c7c7c6;
	margin-top: 70px;
}

.content-subscribe.single{
	margin-top: 26px;	
}

.subscribe-describe{
	width: 40%;
	margin: 0 auto;	
	margin-top: 50px;
	font-size: 0.9em;
	text-align: center;
}

.subscribe-describe p{;
	margin-top: 10px;
	text-align: left;
	line-height: 25px;
	color: #777777;	
	font-family: 'Open Sans', sans-serif;
}

.subscribe-describe h3{
	color: #d44e4e;	
}

#subscribe{
	color: #3D6392;
	padding: 20px 15px;
	width: 70%;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 30px;
}

.mc-field-group input{
    border: 1px solid #a0a0a0;
    width: 200px;
    padding: 1em;
    font-family: 'Open Sans', sans-serif;
    border-radius: 4px;
    margin: 0px 2px 0px 2px;
}

.mc-field-group input[type=email]{
	color:grey;
}

.mc-field-group input[type=submit]{
	color:grey;
	font-weight: bold;
	transition: all .2s;
}

.mc-field-group input[type=submit]:hover{
	color: #bdc8d4;
	font-weight: bold;
	background-color: #2b3140;
	cursor: pointer; 
}

/* ---Subscribe for single pages--- */

.content-subscribe.other{
	width: 100%;
	margin: 16px auto 0px auto;
    background-color: #2b3140;
    border-radius: 4px;
    border-top: none;
    border-bottom: none;
	padding: 32px 0px 16px 0px;
}

.subscribe-describe.other{
	width: 100%;
    font-size: 0.9em;
    color: #fafafa;
	margin: 0;
	text-align: left;
	
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	
	padding-left: 32px;
    padding-right: 32px;
}

.subscribe-describe.other p{
	color: #e09393;
	text-align: left;
}

.subscribe-describe.other h3 {
    color: #fafafa;
}

#subscribe.other{
	margin-bottom: 0px;
	padding-bottom: 0px;
}

.mc-field-group.other input{
	border: none;
    border-radius: 4px;
    padding: 0.9em;
	margin: 0px 2px 16px 2px;
}

.mc-field-group.other input[type=submit]:hover{
	color: #47494c;
	background-color: #acb1b5;
}

/* ---Other--- */

.spacer1{
	height: 116px;
}

/* ---Footer--- */

.footer{
	position: relative;
	width: 100%;
	height: 200px;
	background-color: #2b3140;
	
	border-top: 6px solid #d3d5da;
}

.footer-bot{
	position: absolute;
    width: 100%;
    height: 130px;
    background-color: #d44e4e;
    bottom: 0;
	overflow: hidden;
}

.social-icons-bar{
	list-style: none;
	text-align: center;
	margin-top: 18px;
}

.social-icons-bar li{
	display: inline;
	padding: 5px;
}	

.social-icons-bar li a{
	display: inline-block;	
	-o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition: .3s;
}

.social-icons-bar li a:hover{
	background-color: #322f30;
}

.social-icon{
	color: white;
}

#facebook-icon:hover{
	color:#3d5b99;
}

#twitter-icon:hover{
	color:#00aced;
}

#youtube-icon:hover{
	color:#e64a41;
}

.footer-menu-wrapper{
	max-width: 1088px;
	width: 90%;
	height:100px;
	margin: 0 auto;	
	margin-top: 17px;
	
	font-family: 'Open Sans', sans-serif;
	font-size: 0.9em;
}



.footer-center{
	margin-top: 4px;
	text-align: center;
}

.footer-menu li{
	display: inline;
	padding-left: 20px;
	line-height: 26px; 
}

.footer-menu li a{
	display: inline-block;
	font-family: 'Raleway', sans-serif;
	font-size: 13px;
	color: #fff;
	text-decoration: none;	
}

.footer-menu li a:hover{
	color: #ffa6a6;
}

.footer-menu-below{
	padding-top: 0.5em;
    color: #ffa6a6;	
}

.footer-menu-below p{
	line-height: 25px;	
}

/* ---Decor stuff below, yo.--- */

.nav-bar-decor1{
	position: fixed;
    width: 100%;
    height: 7px;
	background: url(images/toptear1_white.png);
	background-repeat: repeat-x;	
	transform: scaleY(-1);
    margin-top: 0px;
	z-index: 99;
	
	-o-transition: top 0.17s;
    -ms-transition: top 0.17s;
    -moz-transition: top 0.17s;
    -webkit-transition: top 0.17s;
    transition: top 0.17s;
}

.footer-decor1{
	position: absolute;
    width: 100%;
    height: 7px;
	margin-top: -6px;
	background: url(images/toptear1_black.png);
	background-repeat: repeat-x;
}

.footer-bot-decor1{
	position: absolute;
    width: 100%;
    height: 7px;
	margin-top: 14px;
	background: url(images/toptear1_red.png);
	background-repeat: repeat-x;
	transform: scaleX(-1);

}

.content-box-decor1{
    width: 100%;
    height: 7px;
	background: url(images/toptear2_black.png);
	background-repeat: repeat-x;	
	transform: scaleY(-1);
    margin-top: -7px;
	z-index: 21;
    position: relative;
}

.content-box-decor1-playgame{
    width: 100%;
    height: 7px;
	background: url(images/toptear1_black.png);
	background-repeat: repeat-x;	
	transform: scaleY(-1);
    margin-top: -7px;
	z-index: 21;
	
    padding-top: 6px;
	position: absolute;
}

/* ---Contact form 7 styling.--- */

.wpcf7
{
	font-size: 0.9em;
}

.wpcf7 p{
	padding-bottom: 12px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
	background-color: #fff;
    color: #000;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    padding: 10px 0px 10px 0px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
}

.wpcf7-submit{
    width: 130px;
    padding: 10px;
    margin-top: 32px;
    border: 1px solid #969696;
    border-radius: 4px;
    text-align: center;
    color: #3c3333;

    -o-transition: .15s;
    -ms-transition: .15s;
    -moz-transition: .15s;
    -webkit-transition: .15s;
    transition: .15s;
	
    letter-spacing: 0.07em;
}

.wpcf7-submit:hover{
	color: #2f2f2f;
    border: 1px solid #555;
    cursor: pointer;
    background-color: #d0d0d0;
}

.screen-reader-response{
	font-family: 'Open Sans', sans-serif;
	font-size: 0.9em;
	color: #d44e4e;
}

.screen-reader-response ul{
	display: none;
}

.wpcf7-not-valid-tip{
	color: #d44e4e;
}

.wpcf7-validation-errors{
	font-family: 'Open Sans', sans-serif;
    font-size: 0.9em;
    color: #d44e4e;
    margin-top: 10px;
}

/* =WordPress Core
-------------------------------------------------------------- */

p:empty { display: none; }

.more-link{
	display: none;	
}

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

/* WP Gallery styles */

.gallery{
	display: flex;
	flex-wrap: wrap;	
	margin-top: 22px;
	margin-bottom: 10px;
}

.gallery br{
    display: none; /* Removes auto added BR for galleries*/	
}

.gallery-item{
 	width: 32%;
 	padding: 5px;
    padding-bottom: 0px;
}

.gallery-item img{
	padding: 0px;
    padding-top: 0px;	
}

/* Center the caption. */
.jp-carousel-info h2 {
 text-align: center !important;
}

/* Hide comment form header. */
.jp-carousel-left-column-wrapper {
 display: none !important;
}

/* Center the metabox. */
.jp-carousel-image-meta {
 float: none !important;
 margin-left: auto;
 margin-right: auto;
}

/* ---Youtube optimized embed--- */

.youtube {
    background-color: #000;
    margin-bottom: 30px;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer;
}
.youtube img {
    width: 100%;
    top: -16.84%;
    left: 0;
    opacity: 0.7;
}
.youtube .play-button {
    width: 90px;
    height: 60px;
    background-color: rgba(234,43,43,0.5);
    box-shadow: 0 0 30px rgba( 0,0,0,0.2 );
    z-index: 1;
    border-radius: 6px;
	
	-o-transition: .15s;
    -ms-transition: .15s;
    -moz-transition: .15s;
    -webkit-transition: .15s;
    transition: .15s;
}

.youtube:hover > .play-button {
	background-color: rgba(234,43,43,0.7); 
}
.youtube .play-button:before {
    content: "";
    border-style: solid;
    border-width: 15px 0 15px 26.0px;
    border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
    cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
    position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
    top: 50%;
    left: 50%;
    transform: translate3d( -50%, -50%, 0 );
	margin-left: 1px;
}
.youtube iframe {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

/* share edits */

div.sd-content {
    margin-top: 16px;	
}

div.sd-content ul{
	text-align: center;	
}

/* ---Comments--- */

.wrapper-comments{
	margin: 0 auto;
  	max-width: 625px;
	padding-bottom: 64px;
    margin-top: 16px;	
}

.comment-content a{
	color: #d44e4e;	
	text-decoration: none;
}

.comment-content a:hover{
	color: #ff9999;	
}

.comments-title {
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
	font-size: 16px;
	font-size: 1.142857143rem;
	line-height: 1.5;
	font-weight: normal;
}
.comments-area article {
    margin: 0px 0px 28px 0px;
}
.comments-area article header {
	margin: 0 0 48px;
	margin: 0 0 3.428571429rem;
	overflow: hidden;
	position: relative;
}
.comments-area article header img {
	float: left;
	padding: 0;
	line-height: 0;
}
.comments-area article header cite,
.comments-area article header time {
	display: block;
	margin-left: 85px;
	margin-left: 6.071428571rem;
}
.comments-area article header cite {
	font-style: normal;
	font-size: 15px;
	font-size: 1.071428571rem;
	line-height: 1.42857143;
}
.comments-area cite b {
	font-weight: normal;
}
.comments-area article header time {
	line-height: 1.714285714;
	text-decoration: none;
	font-size: 12px;
	font-size: 0.857142857rem;
	color: #5e5e5e;
}
.comments-area article header a {
	text-decoration: none;
	color: #5e5e5e;
}
.comments-area article header a:hover {
	color: #21759b;
}
.comments-area article header cite a {
	color: #444;
}
.comments-area article header cite a:hover {
	text-decoration: underline;
}
.comments-area article header h4 {
	position: absolute;
	top: 0;
	right: 0;
	padding: 6px 12px;
	padding: 0.428571429rem 0.857142857rem;
	font-size: 12px;
	font-size: 0.857142857rem;
	font-weight: normal;
	color: #fff;
	background-color: #0088d0;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(to bottom, #009cee, #0088d0);
	background-image: -ms-linear-gradient(to bottom, #009cee, #0088d0);
	background-image: -webkit-linear-gradient(to bottom, #009cee, #0088d0);
	background-image: -o-linear-gradient(to bottom, #009cee, #0088d0);
	background-image: linear-gradient(to bottom, #009cee, #0088d0);
	border-radius: 3px;
	border: 1px solid #007cbd;
}
.comments-area .bypostauthor cite span {
	position: absolute;
	margin-left: 5px;
	margin-left: 0.357142857rem;
	padding: 2px 5px;
	padding: 0.142857143rem 0.357142857rem;
	font-size: 10px;
	font-size: 0.714285714rem;
}
.comments-area .bypostauthor cite b {
	font-weight: bold;
}
a.comment-reply-link,
a.comment-edit-link {
	color: #686868;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
}
a.comment-reply-link:hover,
a.comment-edit-link:hover {
	color: #21759b;
}
.commentlist .pingback {
	line-height: 1.714285714;
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}

.comment-reply-title a{
	color: #d44e4e;	
	text-decoration: none;
}

.comment-reply-title a:hover{
	color: #ff9999;	
}

/* Comment form */

#respond {
    font-size: 0.9em;
}
#respond h3#reply-title {
    font-size: 1.2em;
	padding: 25px 0px 25px 0px;
	color: #5f5f5f;
    font-family: 'Open Sans', sans-serif;
}
#respond h3#reply-title #cancel-comment-reply-link {
	margin-left: 10px;
	margin-left: 0.714285714rem;
	font-weight: normal;
    font-size: 1em;
}
#respond form {
	color: #5f5f5f;
    font-family: 'Open Sans', sans-serif;
}

#respond form a {
	color: #d44e4e;
}

#respond form a:hover{
	color: #ff9999;	
}

#respond form p.logged-in-as {

}
#respond form label {
	display: block;
    line-height: 2.5;
}
#respond form input[type="text"],
#respond form textarea {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 1em;
	line-height: 1.714285714;
	padding: 10px;
	width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
	max-width: 100%;
	
	font-family: 'Open Sans';
}

#respond form p.form-allowed-tags {
	margin: 0;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 2;
	color: #5e5e5e;
}

.required {
	color: red;
}

.form-submit{
	padding-top: 32px;
    padding-bottom: 32px;
    text-align: right;	
}

#submit{
	background: #d44e4e;
    text-transform: uppercase;
    border: 0px;
    cursor: pointer;
    color: #fff;
    font-size: 1em;
    padding: 12px 22px;
    border-radius: 4px;
    font-family: 'Open Sans', sans-serif;
	
    -o-transition: .15s;
    -ms-transition: .15s;
    -moz-transition: .15s;
    -webkit-transition: .15s;
    transition: .15s;
}

#submit:hover{
	background: #e87b7b;
}

/* Replies */

.author.vcard{
	font-size: 0.9em;
    font-family: 'Open Sans', sans-serif;
	margin-bottom: 26px;
}

.author-name{
	font-weight: bold;
    font-size: 1.1em;
    padding-top: 5px;
    line-height: 32px;
	color: #5f5f5f;
}

.date{
	color: #5f5f5f;	
}

.comment-content{
	background-color: #fafafa;
    border-radius: 4px;
    padding: 16px;
    border-width: 1px;
    border-color: #e0e0e0;
    border-style: solid;
    margin-top: 8px;
    margin-bottom: 16px;	
}

.comment-body p{
	font-size: 0.9em;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.5em;
	color: #5f5f5f;
}

.avatar {
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	float: left;
    margin-right: 14px;
	margin-left: 3px;
}

.reply a{
    color: #73b0c8;
    font-size: 0.9em;
    line-height: 2em;
    font-family: 'Open Sans', sans-serif;	
}

.reply a:hover{
	color: #a1cbdc;		
}

ol.children{
    margin-left: 48px;	
}

.next.alignright a{
    font-family: 'Open Sans', sans-serif;
	color: #d44e4e;
	text-decoration: none;
}

.prev.alignleft a:hover .next.alignright a:hover{
	color: #ff9999;
}

#comments-head{
    font-family: 'Open Sans', sans-serif;
	margin-bottom: 16px;
    background: #d44e4e;
    text-transform: uppercase;
    color: #fff;
    font-size: 1em;
    border-radius: 4px;
	display: flex;
	justify-content: space-between;
	padding: 16px;
}

#comments-head .right a{
    color: #ffa6a6;
    text-decoration: none;	
	-o-transition:.15s;
    -ms-transition:.15s;
    -moz-transition:.15s;
    -webkit-transition:.15s;
    transition: .15s;
}

#comments-head .right a:hover{
	color: #ffcece;
}

/* ---Comment subscription styles--- */

.comment-form-subscriptions{
	font-size: 0.95em;
    margin-top: 16px;	
}

.comment-form-subscriptions a{
	color: #d44e4e;
	text-decoration: none;
}

.comment-form-subscriptions a:hover{
	color: #ff9999;
	text-decoration: none;
}

input#subscribe-reloaded{
	width: 16px;
}

/* ---Responsive Stuff below, yo.--- */

@media screen and (max-width: 1332px) {
	.header-center{
		position: relative;
		overflow: hidden;
		margin: 0 auto;
		left: 100%; /* move image right */
    	margin-left: -200%;  /* move image back enough so it shows the middle */
	}
	
	.header-left{
		visibility: hidden;
	}
	
	.header-right{
		visibility: hidden;
	}
}

/* ---Responsive - For centering/resizing thumbnail grid.  --- */


@media screen and (min-width: 810px) {
	.content-games-grid{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	}
	
	.game-thumb{
		width: calc(50% - 16px);
	}
	
	.thumb-other{
		width: calc(33% - 16px);
	}
	
}

@media screen and (min-width: 1111px) {
	.thumb-other{
		width: 343px;
		height: 227px;
	}
}

@media screen and (max-width: 809px) {
	.game-thumb{
		margin-bottom: 16px;
	}
	
    .grid-other{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	}
	
	.thumb-other{
		width: calc(50% - 16px);
		flex: none;	
	}
	
	.subscribe-describe{
		width: 90%;	
	}
	
	.game-thumb img {
		width: 100%;	
	}
	
	.content-games-grid{		
		width: 80%;
        margin: 0 auto;
	}
	
	.gallery-item{
 		width: 47%;
	}
	
	.wrapper-comments{
		width: 93%;	
	}
}

@media screen and (max-width: 655px) {
	.mc-field-group input{
		margin: 10px;
	}
	
	.nav-diamond {
		display: none;	
	}
	
	.game-caption{
		display: none;	
	}
	
	.post-footer ul{
		text-align: center;	
	}
	
	.read-more{
		width: 100%;
    	padding: 8px 0px 8px 0;
		margin-top: 20px;	
		font-size: 1.1em;
		float: none;
		clear: both;
	}

	.nav-bar ul{
		display: none; 	
	}
	
	.nav li{
		display: block;	
	}
	
	#toggle { 
		font-family: 'Open Sans', sans-serif;
  		font-size: 16px; 
		text-decoration: none;
		display: block;
		padding-top: 29px;
    	padding-bottom: 25px;
		color: #828282;
	}
	
	.nav li a{
		background-color: #efefef;
		font-size: 14px;
		width: 100%;
		padding-left: 0px;
		padding-right: 0px;
	}
	
	.nav li a:hover{
		background-color: rgb(220, 220, 220);
	}
	
	.platforms img{
		width: 80% !important;	
	    padding: 0px 5px 10px 5px !important;
	}
}

@media screen and (max-width: 500px) {
	.c-image{
		display: none;
	}
	
	.nav li a{
		padding: 31px 0px;
	}
	
	.content-games-grid{		
		width: 96%;
        margin: 0 auto;
	}
	
	.game-container{
		display: none;
	}
	
}

@media screen and (max-width: 390px) {
	.gallery-item{
 		width: 100%;
	}
}