:root {
	font-size:16px;

	--col-muted: #959191;

	--ff-primary:'Lato', sans-serif;
}

*,
*::before,
*::after {
  box-sizing:border-box;
}

body,h1,h2,h3,h4,h5,p,.footer__header {
  margin:0;
}
h1,h2,h3 {
	margin-bottom:20px;
	font-weight:900;
	line-height:1.4em;
}
h2 {
	font-weight:400;
	font-size:1.125rem;
	text-align:left;
}
p {
	margin-bottom:20px;
	line-height:1.3;
}
a { 
	text-decoration: none;
	color:#fff;
}
a:hover { color:#fff; text-decoration: underline; }

nobr { white-space:nowrap; }

img {
	width:100%; max-width:100%; height:auto;
	display:block;
}

.bottom-grad {
	position:absolute !important;
	width:100%; height:20px;
	background-color: #000;
	bottom:0; left:0;
	display: block;
	z-index: 5;
	background: linear-gradient( 0deg,#000,rgba(0,0,0,0) );
}




body.std section .container {
	display:flex;
	flex:1;
}
body.std section .about__block,
body.std section .contact__block,
body.std section .feed__block {
	max-width:1440px;
}
body.std section h1,
body.std section h2 {
	font-size:2rem;
	font-weight:900;
	line-height:40px;
}
body.std section p {	
	color:var(--col-muted);
	font-size:1.125rem;
	font-weight:400;
	line-height:27px;
}
body.std .image,
body.std .text {
	padding:40px 20px 40px 20px;
}
body.std .image {	
	text-align: center; 
	flex:50%;
}
body.std .image img { display:inline-block; }

body.std .text { 
	flex:50%;
}
body.std .about__a .text,
body.std .contact__a .text,
body.std .news__a .text {
	padding-bottom:0px;
}
body.std .about__b .text,
body.std .about__b .image {
	padding-top:0px;
}


/* ========= HEADER ========= */
#header-banner {
  width:100%; height:200px;
  background-color:#000;
}
#header-banner .container {
  max-height:200px;
  padding:0px 0px 0px 0px;
}
#header-banner-inner {
  width:100%; height:200px;
  background: #000 url( '../images/arcade-archive-banner.jpg' ) no-repeat center center;
  background-size: cover;
}


/* ========= FAQ ========= */
body.faq h1 {
  margin-bottom:20px !important;
}
body.faq a {
  color:#3499e0;
}
body.faq .q {
  padding:15px;
  margin-bottom:20px;
  background-color:#222;
  max-width:900px;
  border-radius:5px;
}
body.faq li {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 28px;
  color: var(--col-muted);
  margin-bottom: 10px;
}

/* ========= 404 ========= */
body#four-oh-four .umm-i-dunno-do-i {
  text-align:center;
  margin-top:50px; margin-bottom:50px;
  padding:15px;
}
body#four-oh-four .umm-i-dunno-do-i p:first-of-type {
  font-size:32px;
}
body#four-oh-four .umm-i-dunno-do-i p {
  font-size:24px;
  font-weight:600;
}
body#four-oh-four .umm-i-dunno-do-i img {
  display:inline-block;
  border-radius:50px;
  margin-top:15px; margin-bottom:25px;
	max-width:640px;
}

/* ========= TEMPLATE ========= */
body {
	font-family:var(--ff-primary);
	font-weight:300;
	font-size:1rem;
	line-height:1.6em;
	background-color:#000;
	color:#fff;

	padding-top:162px;
}

.container {
	margin:0 auto;
	max-width:1920px;
	padding:10px 10px 10px 10px;
}

header {
	background-color:#fff;
	width:100%;
	border-bottom:1px solid #666;
	position:fixed;
	top:0; left:0; right:0;
	z-index:1000;
}
header .container {
	display:flex;
	align-items: center;
	max-height:70px;
}
header .container > * {
	flex-direction:row;
}

header .header__menu-btn {
	display:flex;
	margin-right:10px;
}
header .header__menu-btn img {
	width:31px;
	height:31px; max-height:31px;
}

header a.header__logo {
	display:flex;
}
header a.header__logo img {
	image-rendering:pixelated;
	width:40px; max-height:50px;  height:50px;
	margin-right:20px;
	transition: transform .3s ease-in-out;
}
header a.header__logo img:hover {
	transform: rotate(17deg);
}

header .header__nav {
	display: flex;
}
header .header__nav a {
	margin:0px 15px 0px 0px;
}
header .header__nav a:hover {
	text-decoration: none;
	color:#ff0000;
}
header .header__nav a {
	font-size:1rem;
	font-weight:700;
	color:#111;
	text-transform: uppercase;
}

.container-nav {
  padding:15px 15px 15px 15px;
}

header .social {
	display: flex;
	margin-left:auto;
}
header .social a {
	display:inline-block;
	margin-left:3px;
}
header .social img {
	width:32px;
}


/* ========= MOBILE NAV ========= */
#mobile__nav {
	width:250px;
	left:-250px;
	height:100vh;
	position:fixed;
	z-index:10;
	top:0px;
	transition: all .6s ease-in-out;
	padding-top:162px;
}
#mobile__nav.show {
	left:0px;
	background-color: rgba( 0, 0, 0, 0.85 );
  transition: all .6s ease-in-out;
}
#mobile__nav a {
	display:block;
	background-color:#222;
	border-bottom:1px solid #000;
	padding:15px;
	color:#fff;
	font-size:1.125rem;
	font-weight:500;
}
#show-mobile-menu { display: block; }
#show-mobile-close { 
	display:none; 
}


/* ========= HOME: WECLOME  ========= */

section.welcome .container {
	width:100%; height:300px;
	padding-left:30px; padding-right:30px;
	position:relative;

	text-align: center;
	color:#fff;

	display:flex;
	align-items:center;
	flex-direction: column;	
	justify-content: center;
}
section.welcome .container::before {
	content: "";

	background-image: url(../images/backgrounds/rmc-bg-1.jpg);
	background-position: 50% 50%;
	background-size:cover;

	opacity:0.3;

	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
}
section.welcome .container > * {
	position:relative;
}
section.welcome .container h1 {
	font-size:4rem;
	font-weight:900;
	margin-bottom:45px;
}
section.welcome .container p {
	font-size:2rem;
	font-weight:400;
	max-width:1024px;
}
section.welcome .container p:last-of-type {
	margin-bottom:0px;
}


/* ========= HOME: VIDEOS  ========= */

body#home .videos__list,
body#twir .videos__list { display:flex; }
.videos__list {
	flex-wrap:wrap;
	justify-content: center;
	flex-direction: row;
}
.videos__list .video {
	width: 50%; 
	border-left:10px solid #000; border-right:10px solid #000;
	margin-bottom:15px;
	background-color:#1e1e1e;
}

.videos__list .video .video__title {
	padding:10px;
}
.videos__list .video .video__image {
	position:relative;
}
.videos__list .video .video__title a {
	color:#fff;
	font-weight:300;
	font-size:1rem;
}
.videos__list .video .video__extra {
	color:#959191;
	font-size:0.8125rem;
}
.videos__list .video .video__duration,
.videos__list .video .video__date {
	width:20px; height:20px;
}

.videos__list .video__extra span {
	margin-right:5px;
}
.videos__list .video__extra > * {
	display:inline-block;
	vertical-align:middle;
}

/* ========= THIS WEEK IN RETRO  ========= */
body#twir .twir-welcome {
	padding:10px 10px 10px 10px;
}
body#twir .twir-welcome h1 {
	font-size: 2rem;
  font-weight: 900;
	margin:0px 0px 6px 0px;
}
body#twir .twir-welcome h2 {
	font-size: 1.6rem;
  font-weight: 400;
	margin:0px 0px 10px 0px;
	color:#eee;
}
body#twir .twir-welcome p {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 28px;
	color: var(--col-muted);
	margin-bottom:10px;
}
body#twir .twir-welcome p:last-of-type {
	margin-bottom:0px;
}
body#twir .twir-welcome img {
	border-radius:3px;
	margin:0px 0px 25px 0px;
}
body#twir .view-all-btn { max-width:320px !important; }


/* ========= VIDEO PAGE  ========= */
.video__container {
	overflow: hidden;
	position: relative;
	width:100%;
}

.video__container::after {
	padding-top: 56.25%;
	display: block;
	content: '';
}

.video__container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video__layout .container {
	display:flex;
	justify-content: space-between;
	flex-wrap:wrap;
	margin-top:25px;
}
.video__layout .video__data {
	flex:1;
}
.video__layout .video__more {
	flex:1;
	max-width:25%;
	padding:0px 0px 0px 25px;
}

.video__layout .video__data .wrapper {
	background-color:#1e1e1e;
	padding:25px;
}

body.video__page .video {
	display:block;
	width:100%;
}

.video__stats {
	color:#cacaca;
	font-size:1rem;
	display:flex;
	padding:10px 0px 10px 0px;
}
.video__stats .icon {
	display: inline-block;
	vertical-align: middle;
	color:#bbb;
}
.video__stats span {
	display: inline-block;
	vertical-align: middle;
	padding:0px 5px 0px 5px;
}

.video__data .video__description p {
	font-size:1.125rem;
	line-height:27px;
	font-weight:400;
	color:var( --col-muted );
}
.video__data .video__description p a {
	color:#3499e0;
}

.video__tags ul {
	list-style: none;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	display:inline-flex;
	flex-wrap:wrap;
}
.video__tags ul li {
	font-size:1rem;
	padding:4px 8px 4px 8px;
	font-weight:700;
	color:#111;
	background-color:#545454;
	border-radius:3px;
	margin:0px 10px 10px 0px;
}

/* ========= NEWS ========= */
body#news .news__b .container {
	padding:0px 30px 0px 30px;
}
.tweets {
	width:100%;
	position:relative;
}
.tweets .tweet-sizer {
	width:50%;
}
.tweets .tweet {
	width:50%;
	border-left:10px solid #000;
	border-right:10px solid #000;
	margin-bottom:20px;
	background-color:#1e1e1e;
	border-radius:2px;
}
.tweets .tweet a {
	color:#3499e0;
}
.tweets .tweet .tweet__tweet {
	padding:15px;
}
.tweets .tweet .tweet__tweet p {
	font-weight:500;
	font-size:1.15rem;
	color:#ddd;
	margin-bottom:0px;
}
.tweets .tweet .tweet__tweet p.d {
	color:var(--col-muted);
	font-size:1rem;
	font-weight:500;
	margin-bottom:0px;
}
.tweets .tweet .tweet_media_images img {
	min-width:100%;
}

/* ========= PROMOTION ========= */
.promotion {
	text-align:center;
	border:10px solid #4F8648;
	padding:50px 25px 50px 25px;
	background:#9dadad url(../images/colouring-book-bg.jpg);
	object-fit: cover;
	margin-bottom:10px;
}
.promotion-inner {
	margin:0 auto;
	max-width:1024px;
	text-align:center;
}
.promotion p {
	font-size:1.5rem;
	font-weight:700;
	color:#111;
	margin-bottom:50px;
}
.promotion p:first-of-type {
	font-size:2.75rem;
	font-weight:900;
	margin-bottom:10px;
}
.promotion a {
	display:inline-block;
	padding:15px 30px 15px 30px;
	background-color:#4F8648;
	color:#fff;
	border:5px solid #fff;
	font-size:1.25rem;
	font-weight:500;
	margin-top:50px;
}


/* ========= CONTACT ========= */
body#contact .form {
	width:100%;
	padding-left:20px;
	padding-right:20px;
}

body#contact form {
	background-color:#232323;
	padding:25px;
	width:100%;
	font-size:16px;
	max-width:768px;
	position:relative;
}
body#contact form * {
	font-size:inherit;
	width:inherit;
	font-family:var(--ff-primary);
}
body#contact .form-row label:first-of-type { margin-top:0px; }
body#contact .form-row button:first-of-type { margin-bottom:0px; }

body#contact .form-row label {
	display: block;
	width:100%;
	font-weight:600;
	margin:10px 0px 10px 0px;
}
body#contact .form-row input,
body#contact .form-row textarea,
body#contact .form-row button,
body#contact .form-row select {
	color:#111;
	padding:10px 15px 10px 15px;
	font-weight:600;
	border-radius:2px;
	border:none;
	margin-bottom:15px;
	-webkit-appearance:none;
	background-color:#fff;
}
body#contact .form-row textarea {
	resize:none;
	height:200px;
}
body#contact #send-message {
	background-image: linear-gradient( 25deg,#54a9e4,#3499e0 40% );
	color:#fff;
	padding:15px 15px 15px 15px;
	cursor:pointer;
}
body#contact .form-row select {
	background: url(/assets/images/carot.png) no-repeat right #fff;
	background-position-x: CALC(100% - 15px);
}
body#contact #contact-thanks {
	font-size:24px;
	text-align:center;
	display:none; 
}
body#contact #contact-thanks p { margin:0px 0px 0px 0px; }
body#contact #contact-thanks img { margin:20px 0px 20px 0px; border-radius:2px; }
    

#clippy {
	width:200px !important; height:250px !important;
	position:absolute;
	left:752px; bottom:0px;
}
body#contact #sub-subject { display:none; }

/* ========= PLAYLIST  ========= */
.playlist__header {
	margin:30px 0px 0px 0px;
}

/* ========= SITEMAP  ========= */
body#sitemap ol li {
	font-size:16px;
	font-weight:400;
}
body#sitemap .contact__b .content {
	background-color:#232323;
	padding:25px;
}
body#sitemap .contact__b .content ol {
	list-style: disc;
}
body#sitemap .contact__b .content ol li {
	font-weight:600;
	line-height:1.6em;
	margin-bottom:10px;
}
body#sitemap .contact__b .content ol li ol {
	list-style:circle;
	margin-top:10px;
}
body#sitemap .contact__b .content ol li ol li {
	font-weight:400;
	margin-bottom:5px;
}

/* ========= FOOTER  ========= */
footer {
	margin-top:25px;
	border-top: 5px #232323 solid;
	background-color:#1e1e1e;
}

footer .container {
	padding:40px 40px 40px 40px;
}

footer h5,
footer .footer__header {
	color:#fff;
	font-size:1.125rem;
	text-transform: uppercase;
	border-bottom: 1px #333 solid;
	padding:8px 0px 8px 0px;
}
footer h5::after,
footer .footer__header::after {
	float:right;
	content: "+";
}

footer ul {
	margin:10px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	list-style-type:none;
	display:none;
}
footer ul li a {
	color:#cacaca;
	font-size:1rem;
	padding:2px 0px 2px 0px;
	font-weight:500;
}

footer .footer__extra {
	width:100%;
	margin-top:15px;
	color:var( --col-muted );
	font-size:0.8125rem;
}
footer .footer__extra p {
	line-height:1.5;
}

footer ul.active {
	display:block !important;
	margin-bottom:10px;
}

footer .social {
	display: flex;
	justify-content: flex-end;
	margin-bottom:10px;
}
footer .social a {
	display:inline-block;
	margin-left:10px;
}
footer .social img {
	width:32px;
	-webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
footer .social img:hover {
	-webkit-filter: none;
  filter: none;
}
.footer__extra {
	position:relative;
}
.footer__extra_stuff {
	position:absolute;
	bottom:0; right:0;
}

/* ========= < MOBILE SMALL  ========= */

@media( max-width: 425px ) {
	.videos__list .video { width: 100%; padding:0px 0px 0px 0px; }
	.video__layout .video__more .video {
		flex:1 1 100% !important;
	}
  
  #header-banner,#header-banner .container, #header-banner-inner {
    height:100px;
  }


	/* ========= PROMOTION ========= */
	.promotion {
		border:5px solid #4F8648;
		padding:25px 25px 25px 25px;
	}
	.promotion p {
		font-size:1.35rem;
		font-weight:700;
		margin-bottom:25px;
	}
	.promotion p:first-of-type {
		font-size:2.00rem;
	}
	.promotion a {
		padding:10px 20px 10px 20px;
		border:2px solid #fff;
		font-size:1.25rem;
		margin-top:25px;
	}

}


/* ========= < TABLET  ========= */

@media( max-width: 767px ) {
  
  #header-banner,#header-banner .container, #header-banner-inner {
    height:100px;
  }
  
	#header__nav { 
		display: none;
	}
	section.welcome .container h1 {
		font-size:2rem;
		margin-bottom:30px;
	}
	section.welcome .container p {
		font-size:1.25rem;
		font-size:300;
	}
	footer .social {
		justify-content: center;
		margin:25px 0px 25px 0px;
	}	

	body.std .about__block {
		display:block !important;
	}
	body.std .about__block > div {
		padding-top:20px;
		padding-bottom:0px;
	}
	body.std .about__b .image {
		margin-bottom:25px;
	}
	
	.view-all-btn {
		font-size:18px !important;
		max-width:210px !important;
		height:55px !important; line-height:55px !important;
	}

	.tweets .tweet-sizer {
		width:100%;
	}
	.tweets .tweet {
		width:100%;
		border:0;
	}
  
  .footer__extra {
    position:relative;
  }
  .footer__extra_stuff {
    position:relative;
  }

}


/* ========= >= TABLET  ========= */

@media( min-width: 768px ) {
  
  body { padding-top:264px; }
  
	#header__menu-btn {
		display:none; 
	}

	header .header__nav a {
		font-size:1.0625rem;
	}

	#mobile__nav { display:none; }

	section.welcome .container {
		height:500px;
	}

	footer .container {
		display:flex;
		flex-direction: row;
	}
	footer .footer__section {
		flex:1 1 25%
	}
	footer ul {
		display:block;
		margin-top:5px;
	}
	footer h5::after,
	footer .footer__header::after {
		content:"";
		float:none;
	}
	footer ul.active {
		margin-bottom:0px;
	}
	footer h5,
	footer .footer__header {
		border-bottom:none;
		padding-top:0px;
		font-weight:bold;
	}
	footer .footer__extra {
		text-align:right;
		margin-top:0px;
	}

	.playlist__description .container {
		max-width:768px;
		padding-top:40px;
	}
	.playlist__description .container p {
		font-size:1.25rem;
		line-height:30px;
	}

}


/* ========= < LAPTOP  ========= */

@media( max-width: 1023px ) {
	.video__layout .video__data {
		display:block;
		flex:none;
		width:100%;
	}
	.video__layout .video__more h3 {
		margin-top:20px;
		flex:1 1 100%;
	}
	.video__layout .video__more {
		padding:0px 0px 0px 0px;
		min-width:100%;
	}
	.video__layout .video__more .video {
		flex:1 1 50%;
	}
	.videos__list {
		display:flex;
	}

	#clippy { display:none !important; }
}


/* ========= >= LAPTOP  ========= */

@media( min-width: 1024px ) {
	.videos__list .video { width: 25%; }

  body {
    padding-top:264px;
  }
  
	body.std section p {
		font-size:1.25rem;
		font-weight:600;
		line-height:28px;
	}
}

/* ========= >= LAPTOP 1440  ========= */

@media( min-width: 1024px ) {
	.tweets .tweet-sizer {
		width:33.33%;
	}
	.tweets .tweet {
		width:33.33%;
	}
}



/* ========= CUSTOM/MISC ========= */

@media( max-width: 520px ) {
	.video__stats { flex-direction: column; } 		
	.video__stats .text-right { text-align:left !important; }
}

.view-all-btn {
	display:block;
	width:100%;
	max-width:500px;
	text-align:center;
	background-image: linear-gradient( 25deg,#54a9e4,#3499e0 40% );
	color:#fff;
	font-size:26px; font-weight:700;
	height:70px; line-height:70px;
	margin:25px 0px 25px 0px;
	margin-left:auto;
	margin-right:auto;
	padding:0px 25px 0px 25px;
	border-radius:2px;
}
.playlist__description .view-all-btn {
	margin-top:50px;
}


/* ========= HELPERS  ========= */

.text-muted { color:var( --col-muted ); }

.text-wordy {
	line-height:23px;
	font-size:1rem;
	font-weight:500;
}

.container-extra-padding {
	padding-left:20px; padding-right:20px;
}

.text-left { text-align:left; }
.text-center { text-align:center; }
.text-right { text-align:right; }
.hr {
	margin:15px 0px 25px 0px;
	height:1px;
	background-color:#333;
}
.split {
	flex:50%;
}

img.rounded-much { border-radius:40%; }
img.rounded-15 { border-radius:15px; }

.no-scroll { overflow:hidden; }
.modal-on { overflow:hidden; }
.invisible { display:none; }