/*###############
### CSS Reset ###
###############*/

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;
	font-family: "Avenir";
	color: #333;
}

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;
}

img {
	max-width: 100%;
}

h1 {
    margin: 0 0 20px;
    font-size: 64px;
    line-height: 72px;
}

h2 {
    font-size: 56px;
}

h3 {
	margin: 0 0 15px;
    font-size: 48px;
    line-height: 56px;
}

h4 {
    margin: 25px 0;
    font-size: 40px;
}

h5 {
    margin: 0 0 15px;
    font-size: 32px;
}

h6 {
    margin: 0 0 15px;
    font-size: 24px;
}

p {
    margin: 0;
    font-size: 16px;
    line-height: 30px;
}

a {
    color: #333;
    text-decoration: none;
    transition: all 0.4s;
}

a:hover {
	color: #0075c4;
}

li {
    font-size: 18px;
    margin: 3px 0 7px 20px;
    list-style: inside;
    line-height: 30px;
}

.bold {
	font-weight: bold;
}

.italic {
	font-style: italic;
}

.block {
    display: block;
}

.v-middle {
	vertical-align: middle;
}

html {
 	box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/*##############
### Clearfix ###
##############*/

.cf:before, .cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.clear {
	clear: both;
}

/*###########
### Fonts ###
###########*/

@font-face {
	font-family: 'font-here';
	src: url('../fonts/font-here.eot'); /* IE9 Compat Modes */
	src: url('../fonts/font-here.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('../fonts/font-here.woff2') format('woff2'), /* Super Modern Browsers */
	url('../fonts/font-here.woff') format('woff'), /* Pretty Modern Browsers */
	url('../fonts/font-here.ttf')  format('truetype'), /* Safari, Android, iOS */
	url('../fonts/font-here.svg') format('svg'); /* Legacy iOS */
}

/*##########
### SVGS ###
##########*/

.svg-24-24 {
	width: 24px;
}

.svg-40-40 {
	width: 40px;
}

.discord-svg {
    fill: #677EC7;
    transition: all 0.4s;
}

.discord-svg:hover {
	fill: #7893e8
}

/*############
### Header ###
############*/

#header {
	position: relative;
    text-align: center;
    padding: 10px 0 10px 0;
}

	.logo {
		/*display: none;*/
	    width: 90px;
	}

	.back {
	    position: absolute;
	    top: 20px;
	    left: 35px;
	}

		.back svg {
		    width: 12px;
		    vertical-align: -5px;
		    margin: 0 10px 0 0;
		}

		.back img {
		    width: 10px;
		}

		.back a {
			color: #fff;
		    display: inline-block;
		    vertical-align: 3px;
		    text-decoration: none;
		    margin: 0 0 0 8px;
		    transition: all 0.4s;
		}

		.back a:hover {
			font-weight: bold;
		}

#absolute-header {
	position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
}

/*####################
### Main Container ###
####################*/

#main-container {
	position: relative;
}

	/*.selections-container {
		margin: 25px 0 0 0;
	}*/

		.selections-container a:hover {
			font-weight: normal;
		}

		.large-button {
			position: relative;
		    background-size: 250%;
		    height: 300px;
		    width: 50%;	
		    float: left;
		    transition: background-size 0.4s;
		}

		.large-button.tablet-mobile-change {
			width: 100%;
			float: none;
		}

		.large-button:hover {
			background-size: 280%;
		}

		.large-button.coming-soon:hover {
			background-size: 250%;
		}

		.gaming {
			/*display: none;*/
		    background-image: url(../images/gaming.jpg);
		    background-position: 50% 48%;
		}

		.apparel {
			/*display: none;*/
			background-image: url(../images/apparel.jpg);
		    background-position: 50% 48%;
		}

			.overlay {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				flex-direction: column;
				-ms-flex-align: center;
				-webkit-align-items: center;
				-webkit-box-align: center;
				align-items: center;
				justify-content: center;
				background: rgba(0,0,0,0.35);
				transition: all 0.4s;
			}

			.overlay:hover {
				background: rgba(0,0,0,0.65);
			}

			.overlay.coming-soon {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				flex-direction: column;
				-ms-flex-align: center;
				-webkit-align-items: center;
				-webkit-box-align: center;
				align-items: center;
				justify-content: center;
				background: rgba(119,119,119,0.90);
				transition: all 0.4s;
			}

				.large-button h1 {
				    color: #fff;
				}

				.coming-soon h2 {
				    font-size: 32px;
				    color: #afafaf;
				}

	.page-height {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -999;
	}

	.gaming-masthead-image {
	    height: 400px;
	    background-image: url(../images/gaming-2.jpg);
	    background-position: 50% 64%;
	    background-size: 100%;
	    margin: 25px 0 0;
	}

	.gaming-intro {
		/*display: none;*/
	    height: 864px;
	    background-image: url(../images/gaming-2.jpg);
	    position: relative;
	    background-size: 110%;
	    background-position: 50% 93%;
	}

	.home-intro, .streamer-intro, .tournament-intro {
		height: 250px;
	    position: relative;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background-size: 100%;
	    background-position: 50% 0;
	    margin: 0;
	}

	.home-intro {
	    background-image: url(../images/home-masthead.jpg);
	}

	.streamer-intro {
		background-image: url(../images/streamer-masthead.jpg);
	}

	.tournament-intro {
		background-image: url(../images/tournament-masthead.jpg);
	}

		.title-opener {
		    display: block;
		    text-align: center;
		    color: #fff;
		    font-family: futura;
		    font-size: 28px;
		    letter-spacing: 20px;
		}

		.page-title h1 {
			color: #fff;
		    font-family: futura;
		    font-weight: bold;
		    font-size: 7.4vw;
		    letter-spacing: 30px;
		    line-height: 125px;
		    margin: 0;
		    padding-left: 30px;
		    text-align: center;
		}

	.navigation {
	    border-top: 1px solid #333;
	    border-bottom: 1px solid #333;
	    text-align: center;
	    padding: 15px 0;
	    margin: 0 0 35px;
	}

		.absolute-nav-logo {
		    position: absolute;
		    left: 13px;
		}

		.nav-mobile {
			display: none;
		}

		.navigation a {
		    text-transform: uppercase;
		    font-size: 18px;
		    font-weight: bold;
		    letter-spacing: 2px;
		}

		.navigation a.nav-item-margin {
		    margin: 0 20px 0 0;
		}

		.navigation a.active-nav {
		    color: #0075c4;
		}

			.nav-logo {
			    width: 30px;
			    vertical-align: -7px;
			    margin: -3px 0 -3px;
			}

		.fixed-menu {
		    z-index: 2;
		    width: 100%;
		    position: fixed;
		    margin: 0 0 0 3000px;
		    top: 0;
		    bottom: 0;
		    left: 0;
		    right: 0;
		    background: linear-gradient(-45deg, #91B0C4, #23a6d5, #004777, #000000);
		    background-size: 400% 400%;
		    animation: gradient 15s ease infinite;
		}

		@keyframes gradient {
			0% {
				background-position: 0% 50%;
			}
			50% {
				background-position: 100% 50%;
			}
			100% {
				background-position: 0% 50%;
			}
		}

			.fixed-menu-inner {
			    width: 100%;
			    margin: 0 auto;
			    padding: 25px;
			    transition: all 0.4s;
			}

				.close {
				    float: right;
				    width: 25px;
				    margin: 30px 10px 0 0;
				    cursor: pointer;
				}	

				.cls-1 {
					fill: none;
					stroke: #fff;
					stroke-linecap: square;
					stroke-width: 2px;
					transition: all 0.4s;
				}

				.close:hover > svg > g > .cls-1 {
					stroke-width: 3px;
				}

				.fixed-menu-links-container {
				    text-align: center;
				    width: 100%;
				    margin: 0 auto;
				}

					.fixed-menu-links-container a {
					    display: block;
					    text-decoration: none;
					    color: #fff;
					    font-size: 48px;
					    margin: 75px 0;
					}

				.menu-footer {
				    text-align: center;
				    position: absolute;
				    bottom: 50px;
				    left: 0;
				    right: 0;
				}

					.menu-footer img {
					    width: 55px;
					}

					.menu-footer p {
					    color: #fff;
					}

		.absolute-header {
    		padding: 25px 0 0 25px;
		}

		.home-absolute-header {
    		padding: 25px 0 0 25px;
			position: absolute;
			z-index: 1;
			left: 0;
    		right: 0;
		}

		.absolute-header-right {
		    text-align: right;
		    position: absolute;
		    top: 55px;
		    right: 35px;
		}

		.fixed-header-right {
			position: fixed;
		    top: 52px;
		    right: 25px;		
		}

			.menu {
			    width: 40px;
			}

			.nav-mobile .menu {
				margin: 0 auto;
			}

			.menu:hover {
				cursor: pointer;
			}

				.menu-line {
				    height: 2px;
				    background: #fff;
				    margin: 0 0 5px;
				    transition: all 0.4s;
				}

				.nav-mobile .menu-line, .menu.news-menu .menu-line {
					background: #333;
				}

				.half-menu-line {
					height: 2px;
					background: #fff;
					width: 50%;
					margin: 0 0 0 50%;
					transition: all 0.4s;
				}

				.nav-mobile .half-menu-line, .menu.news-menu .half-menu-line {
					background: #333;
				}

				.menu:hover > .half-menu-line {
					width: 100%;
					margin: 0;
				}

			.absolute-header-right a {
			    color: #fff;
			    font-size: 16px;
			    margin: 0 0 0 15px;
			    text-decoration: none;
			}

		.intro-copy-block-container {
		        position: absolute;
			    bottom: 55px;
			    left: 55px;
		}

			.intro-copy-block {
				/*display: none;*/
		        width: 45%;
			    margin: 0;
			    padding: 55px 65px;
			    background: #fff;
			}

				.intro-copy-block h1 {
				    color: #000;
				}

				.intro-copy-block p {
				    color: #000;
				}

	.category {
	    width: 95%;
	    margin: 75px auto 7px;
	}

		.category a {
		    text-decoration: none;
		    font-size: 24px;
		    margin: 0 20px 0 0;
		}

		.category .selected {
		    position: relative;
		    font-weight: bold;
		    padding: 0px 5px 3px;
		}

			.category .selected:after {
			    content: '';
			    position: absolute;
			    bottom: 0;
			    left: 0;
			    right: 0;
			    background: #000;
			    height: 3px;
			    border-radius: 10px 10px 0 0;
			}

	.fade-wrapper {
		background: #fff;
		padding: 25px 0 50px;
	}

		.grid {
		    width: 95%;
		    margin: 0 auto;
		}

			.past-tournaments-grid h5 {
			    margin: 50px 0 30px;
			}

			.tournaments-grid h5 {
			    margin: 0px 0 30px;
			}

			.streamer {
				float: left;
			    background: #fff;
			    width: 23.5%;
			    margin: 0 2% 25px 0;
			    padding: 0 25px 15px;
			    border-radius: 5px;
			    transition: all 0.4s;
			    border: 1px solid #333;
			}

			.streamer:nth-child(4n+0) {
				margin: 0 0 25px 0;
			}

			/*.streamer:hover {
				background: #464646;
			}*/

			.streamer a {
				text-decoration: none;
			}

			.streamer a:hover {
				font-weight: normal;
			}

				/*.streamer-logo-container {
				    text-align: center;
				}*/

					.streamer-logo-container img {
					    border-radius: 100px;
					    margin: 15px 0;
					    width: 70px;
					}

				.streamer h2 {
				    color: #333;
				    font-size: 32px;
				    padding: 0 0 0;
				}

				.streamer h5 {
				    color: #333;
				    font-size: 16px;
				    font-weight: bold;
				    margin: 10px 0 13px;
				}

				.streamer h6 {
				    color: #fff;
				    margin: 0 0 15px 25px;
				    font-size: 16px;
				    font-weight: bold;
				}

				.white-divider {
				    width: 100%;
				    height: 1px;
				    background: #333;
				    margin: 0 auto 15px;
				}

				.socials {
				    margin: 0;
				}

					.st0 {
						fill: #333;
					}

					.socials div {
					    margin: 0 0 10px;
					}

						.socials a {
						    color: #fff;
						    text-decoration: none;
						    display: inline-block;
						    margin: 0 10px 0 0;
						    transition: all 0.4s;
						}

						.socials svg {
							width: 24px;
							height: 24px;
						}

						.socials .st0 {
							transition: all 0.4s;
						}

						.socials svg:hover .st0 {
							fill: #0075C4;
						}

							.socials span {
							    display: inline-block;
							    vertical-align: 8px;
							    margin: 0 0 0 15px;
							}

		.tournament-container-counter a:hover {
			font-weight: normal;
		}

		.reviews-and-news-wrapper a:hover {
			font-weight: normal;
		}

			.tournament-container {
				float: left;
				background: #fff;
				width: 23%;
				margin: 0 2% 25px 0;
				padding: 0 0 15px;
				border-radius: 5px;
				box-shadow: 1px 3px 5px rgb(0 0 0 / 35%);
				transition: all 0.4s;
			}

			.tournament-container:hover {
				background: #f5f5f5;
			}

			.tournament-container-counter a:nth-child(4n) > .tournament-container {
				margin: 0 0 25px 0;
			}

				.tournament-masthead {
				    border-radius: 5px 5px 0 0;
				}

				.tournament-container h2 {
				    color: #333;
				    font-size: 24px;
				    margin: 15px 0px 15px 25px;
				}

				.date-and-time {
				    margin: 0 0 0 25px;
				}

					.tournament-container p {
					    color: #333;
					    display: inline-block;
					    vertical-align: 5px;
					    margin: 0 0 0 10px;
					}

				.game {
				    margin: 10px 0 0 25px;
				}

			.reviews-and-news-wrapper {
			    width: 95%;
			    margin: 0 auto;
			}

				.main-story {
				    width: 100%;
				    height: 300px;
				    border-radius: 10px;
				    position: relative;
				    box-shadow: -1px 3px 5px rgb(0 0 0 / 35%);
				}

				.main-story-image {
					background-size: 100%;
					background-image: url(../images/doa6-cover.jpg);
					background-position: 50% 35%;
					transition: all 0.4s;
				}

				.main-story-image:hover {
					background-size: 102%;
				}

				.title {
				    position: absolute;
				    bottom: 20px;
				    left: 20px;
				    background: rgba(0,117,196,0.75);
				    padding: 15px 25px;
				}

					.title h5 {
					    margin: 0;
					    color: #fff;
					}

					.title h6 {
						margin: 0;
						color: #fff;
					}

					.title p {
					    color: #fff;
					}

				.three-wide {
				    margin: 20px 0 0;
				}

					.three-wide-tile {
						width: 32.5%;
						margin: 0 1.25% 0 0;
						float: left;
						height: 300px;
						border-radius: 10px;
						position: relative;
						box-shadow: -1px 3px 5px rgb(0 0 0 / 35%);
					    background-size: 154%;
					    background-position: 50% 35%;
					    transition: all 0.4s;
					}

					.three-wide-tile:hover {
						background-size: 160%;
					}

					.first-tile {
					    background-image: url(../images/knockout-city-cover.jpg);
					}	

					.second-tile {
					    background-image: url(../images/me-legendary-cover.jpg);
					}	

					.third-tile {
					    background-image: url(../images/ffvii-intermission-cover.jpg);
					    margin-right: 0;
					}

						.news-title {
						    position: absolute;
						    bottom: 20px;
						    left: 20px;
						    background: rgba(154,0,168,0.75);
						    padding: 15px 25px;
						}

							.news-title h6 {
							    margin: 0;
							    color: #fff;
							    line-height: 32px;
							}

							.news-title p {
							    color: #fff;
							}

						.opinion-title {
						    position: absolute;
						    bottom: 20px;
						    left: 20px;
						    background: rgba(194,78,0,0.75);
						    padding: 15px 25px;
						}

							.opinion-title h5 {
								margin: 0;
								color: #fff;
							}

							.opinion-title h6 {
							    margin: 0;
							    color: #fff;
							    line-height: 32px;
							}

							.opinion-title p {
							    color: #fff;
							}

				.continuing-news {
					width: 1100px;
					margin: 20px auto 0;
				}

					.continuing-news-item {
						margin: 0 0 20px;
						transition: all 0.4s;
					}

					.continuing-news-item:hover {
						color: #0075c4;
					}

					.continuing-news-item.last-item {
					    margin: 0;
					}

						.continuing-news-item img {
						    width: 300px;
	    					float: left;
						}

					.reviews-and-news-hr {
					    width: 100%;
					    height: 1px;
					    margin: -20px 0 20px;
					    background: red;
					    background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet);
					    background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
					    background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
					    background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
					}

					.reviews-and-news-hr.last-news-hr {
						margin: 0;
					}

					.continuing-news-copy {
					    float: left;
					    margin: 40px 0 0 30px;
					}

						p.label {
						    background: rgba(0,117,196,1);
						    display: inline-block;
						    color: #fff;
						    padding: 2px 10px;
						    margin: 0 0 12px;
						}

						p.news-label {
						    background: rgba(154,0,168,1);
						    display: inline-block;
						    color: #fff;
						    padding: 2px 10px;
						    margin: 0 0 12px;
						}

						p.opinion-label {
						    background: rgba(194,78,0,1);
						    display: inline-block;
						    color: #fff;
						    padding: 2px 10px;
						    margin: 0 0 12px;
						}

						.continuing-news-copy h6 {
						    margin: 0 0 5px;
						}

				.two-wide {
				    margin: 20px 0 0;
				}

				.two-wide a:hover {
					font-weight: normal;
				}

					.two-wide-tile {
					    width: 49%;
					    margin: 0 2% 0 0;
					    float: left;
					    height: 200px;
					    border-radius: 10px;
					    position: relative;
					    box-shadow: -1px 3px 5px rgb(0 0 0 / 35%);
					    background-size: 101%;
					    background-position: 50% 35%;
					    transition: all 0.4s;
					}

					.two-wide-tile:hover {
						background-size: 103%;
					}

					.two-wide-tile.second-two-wide-tile {
					    margin: 0;
					}

					.ffxiv-ps5-beta-impressions-tile {
					    background-image: url(../images/ffxiv-ps5-beta-related.jpg);
					}

					.ffxiv-open-beta-coming {
					    background-image: url(../images/ffxiv-open-beta-related.jpg);
					}

					.ps5-new-storage-options-tile {
					    background-image: url(../images/ps5-external-related.jpg);
					}

					.outriders-inventory-wipe-patch-tile {
					    background-image: url(../images/outriders-inventory-wipe-patch-related.jpg);
					}

					.destiny-2-transmog-tile {
					    background-image: url(../images/destiny-2-transmog-related.jpg);
					}

					.apex-legacy-gameplay-tile {
					    background-image: url(../images/apex-legacy-gameplay-related.jpg);
					}

					.ff7-intergrade-final-trailer-tile {
					    background-image: url(../images/ff7-intergrade-final-trailer-related.jpg);
					}

					.bocek-nerf-tile {
					    background-image: url(../images/bocek-nerf-related.jpg);
					}

					.new-dualsense-colors-tile {
					    background-image: url(../images/new-dualsense-colors-related.jpg);
					}

					.spiritfarer-lily-update-tile {
					    background-image: url(../images/spiritfarer-lily-update-related.jpg);
					}

						.two-wide-tile .news-title {
						    left: 0;
						}

							.two-wide-tile .news-title h6 {
							    font-size: 20px;
							}

	.tournament-masthead-image {
		/*display: none;*/
	    /*height: 864px;*/
	    position: relative;
	    background-size: 100%;
	}

	.warzone-invitational {
	    background-image: url(../images/warzone-masthead.jpg);
	    background-position: 50% 0%;
	}

	.mario-kart-8 {
		background-image: url(../images/mario-kart-8-deluxe-masthead.jpg);
	    background-position: 50% 0%;
	}

	.gunfight-2v2{
		background-image: url(../images/gunfight-masthead.jpg);
	    background-position: 50% 0%;
	}

	.among-us {
		background-image: url(../images/among-us-masthead.jpg);
	    background-position: 50% 0%;
	}

	.black-ops-zombies {
		background-image: url(../images/zombies-masthead.jpg);
	    background-position: 50% 0%;
	}

	.rl-ffa {
		background-image: url(../images/rocket-league-masthead.jpg);
	    background-position: 50% 0%;
	}

	.gun-game-tournament {
		background-image: url(../images/gun-game-tournament-cover.jpg);
	    background-position: 50% 0%;
	}

	.tournament-container:hover {
		font-weight: normal;
	}

	.rules-container {
	    width: 760px;
	    margin: 25px auto 60px;
	    padding: 35px 0 0 0;
	}

		.rules-container h3 {
		    display: inline-block;
		    padding: 0 40px 10px 0;
		    margin: 50px 0 20px;
		    border-bottom: 1px solid #333;
		}

		.rules-container p {
			font-size: 18px;
		}

		table {
		    width: 100%;
		    margin: 10px 0 0 0;
		}

			thead {
			    font-weight: bold;
			}

				tr {
				    border: 1px solid #333;
				}

				.team-name, .captain {
				    width: 25%;
				}

					th {
					    padding: 20px;
					}

						th a {
							text-decoration: none;
						}

						.teams svg {
						    height: 24px;
						    vertical-align: middle;
						    margin: 0 10px 0 0px;
						}

	.bracket-container h6 {
	    margin: 25px 0;
	}

	.bracket-round {
	    width: 23%;
	    margin: 0px 8% 0 0;
	    float: left;
	}

		.matchup {
		    margin: 0 0 35px;
		}

			.bracket {
			    background: #e8e8e8;
			    border-radius: 5px;
			    padding: 15px;
			    margin: 10px 0;
			    height: 46px;
			}

			.active-bracket {
			    background: #0075C4;
			    color: #fff;
			}

				.bracket-box-left {
				    float: left;
				}

				.bracket-box-right {
				    text-align: right;
				}

		.round-two-margin {
		    margin: 79px 0 0 0;
		}

	/* News Pages */

	#absolute-header.transparent-header {
	    background: transparent;
	}

	.news-container {
	    margin: 25px 0 0;
	}

		img.news-masthead {
		    margin: 0 0 35px;
		}

	/* Article Pages */

	.review-test {
	    background-image: url(../images/outriders-cover.jpg);
	    background-position: 50% 0%;
	}

	.ghostrunner-review {
	    background-image: url(../images/ghostrunner-cover.jpg);
	    background-position: 50% 0%;
	}

	.outriders-review {
	    background-image: url(../images/outriders-cover.jpg);
	    background-position: 50% 0%;
	}

	.returnal-review {
	    background-image: url(../images/returnal-cover.jpg);
	    background-position: 50% 0%;
	}

	.othercide-review {
	    background-image: url(../images/othercide-cover.jpg);
	    background-position: 50% 0%;
	}

	.revillage-review {
	    background-image: url(../images/revillage-cover.jpg);
	    background-position: 50% 0%;
	}

	.sixteen-best-games-of-2020 {
	    background-image: url(../images/16-best-games-of-2020-cover.jpg);
	    background-position: 50% 0%;
	}

	.ffvii-intermission-review {
	    background-image: url(../images/ffvii-intermission-cover.jpg);
	    background-position: 50% 0%;
	}

	.me-legendary-review {
	    background-image: url(../images/me-legendary-cover.jpg);
	    background-position: 50% 0%;
	}

	.knockout-city-review {
	    background-image: url(../images/knockout-city-cover.jpg);
	    background-position: 50% 0%;
	}

	.doa6-review {
	    background-image: url(../images/doa6-cover.jpg);
	    background-position: 50% 0%;
	}

	.article-container {
	    margin: 75px 0 0;
	}

		.article-copy-container {
		    width: 760px;
		    margin: 0 auto;
		}

			.review-tag p {
			    background: #004777;
			    display: inline-block;
			    padding: 5px 10px;
			    color: #fff;
			    font-weight: bold;
			    margin: 0 0 20px;
			}

			.news-tag p {
			    background: rgba(154,0,168,1);
			    display: inline-block;
			    padding: 5px 10px;
			    color: #fff;
			    font-weight: bold;
			    margin: 0 0 20px;
			}

			.opinion-tag p {
			    background: #C24E00;
			    display: inline-block;
			    padding: 5px 10px;
			    color: #fff;
			    font-weight: bold;
			    margin: 0 0 20px;
			}

			.article-copy-container h1 {
			    font-weight: bold;
			    margin: 0 0 5px;
			}

			.article-copy-container h2 {
			    font-size: 32px;
			    line-height: 40px;
			    margin: 0 0 20px;
			}

			.review-header-hr {
			    height: 1px;
			    margin: 0 0 5px;
			    background: red;
			    background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet);
			    background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
			    background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
			    background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
			}

			.list-item-end-hr {
			    height: 1px;
			    margin: 30px 0 100px;
			    background: red;
			    background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet);
			    background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
			    background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
			    background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
			}

			.youtube-video-container-16-9 {
				position: relative;
				overflow: hidden;
				width: 100%;
				padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
				margin: 10px 0 45px;
			}

				/* Then style the iframe to fit in the container div with full height and width */
				.responsive-youtube-video {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				width: 100%;
				height: 100%;
			}

			.review-header-hr.end-hr {
			    margin: 40px 0 0;
			}

			h6.other-news {
			    margin: 40px 0 15px;
			}

			p.author {
			    float: left;
			}

			p.date {
			    float: right;
			    margin: 0 0 50px;
			}

			.article-copy-container p {
				font-size: 18px;
			}

			p.dropcap::first-letter {
			    color: #004777;
			    font-weight: bold;
			    font-size: 116px;
			    float: left;
			    line-height: 110px;
			    margin: 0 20px 0 0;
			}

				span.dropcap {
				    color: #004777;
				    font-weight: bold;
				    font-size: 116px;
				    float: left;
				    line-height: 116px;
				    margin: 0 20px 0 0;
				}

		.article-image-container {
		    width: 1100px;
		    margin: 50px auto;
		}

			p.image-caption {
			    font-size: 14px;
			    margin: 0px 0 0;
			    font-style: italic;
			    padding: 0 0 0 20px;
			}

		.news-image-container {
		    margin: 40px 0 0;
		}

		.news-image-container-in-article {
		    margin: 40px 0;
		}

			.review-headline-container {
			    width: 75%;
			    text-align: center;
			    margin: 0 auto 35px;
			}

			.review-headline-container.no-image-headline-container {
				margin: 50px auto 35px;
			}

				.review-headline-h3-hr {
					width: 50%;
					height: 1px;
				    margin: 0 auto;
				    background: red;
				    background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet);
				    background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
				    background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
				    background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
				}

				.article-copy-container h3.review-headline {
				    margin: 15px 0px;
				}

			.reviewer-score {
			    width: 75%;
			    margin: 50px auto;
			    display: flex;
			    align-items: center;
			}

				.score {
				    float: left;
				    margin: 0 35px 0 0;
				}

					.score span {
					    background: #0075C4;
					    width: 120px;
					    display: flex;
					    height: 120px;
					    justify-content: center;
					    align-items: center;
					    color: #fff;
					    font-weight: bold;
					    font-size: 55px;
					    border-radius: 100px;
					}

				.article-copy-container h4 {
				    font-size: 24px;
				    line-height: 32px;
				    margin: 0;
				}

			.review-score-addendum {
				width: 75%;
				margin: 0 auto 50px;
			}

			.reviewer-mindset {
			    width: 75%;
			    margin: 0 auto;
			}

				.article-copy-container h5 {
				    font-size: 24px;
				    margin: 0 0 8px;
				}

			.discord-container {
			    background: #677EC7;
			    padding: 20px 30px;
			    width: 75%;
			    margin: 50px auto 75px;
			    transition: all 0.4s;
			}

			.discord-container:hover {
				background: #7893e8;
			}

				.discord-container svg {
				    float: left;
				    margin: 0 15px 0 0;
				    fill: #ffffff;
				    width: 32px;
				}

				.discord-container svg:hover {
					fill: #ffffff;
				}

				.discord-container p {
				    color: #fff;
				}

/*############
### Footer ###
############*/

#footer {
	position: relative;
    text-align: center;
    margin: 0;
    background: #004777;
    color: #fff;
    padding: 0 0 25px;
}

	.hr {
	    width: 40%;
	    height: 1px;
	    background: #d2d2d2;
	    margin: 0 auto 25px;
	}

	#footer img {
		margin: 50px 0 0;
	    width: 50px;
	}

/*###################
### Media Queries ###
###################*/

@media screen and (max-width: 1535px) {

	.tournament-masthead-image {
		background-size: 160%;
	}

}

@media screen and (max-width: 1300px) {

	.streamer {
		width: 32%;
	}

	.streamer:nth-child(4n+0) {
		margin: 0 2% 25px 0;
	}

	.streamer:nth-child(3n+0) {
	    margin: 0 0 25px 0;
	}

	.tournament-container {
		width: 32%;
	}

	.tournament-container-counter a:nth-child(4n) > .tournament-container {
		margin: 0 2% 25px 0;
	}

	.tournament-container-counter a:nth-child(3n) > .tournament-container {
		margin: 0 0 25px 0;
	}

	.large-button {
		position: relative;
	    background-size: 300%;
	    height: 300px;
	    width: 50%;	
	    float: left;
	    transition: 0.4s;
	}

	.large-button:hover {
		background-size: 330%;
	}

	.large-button.coming-soon:hover {
		background-size: 300%;
	}

}

@media screen and (max-width: 1220px) {

	.home-intro, .streamer-intro, .tournament-intro {
		background-size: 130%;
	}

}

@media screen and (max-width: 1160px) {

	.continuing-news {
		width: 760px;
	}

}

@media screen and (max-width: 1130px) {

	.three-wide-tile {
		background-size: 180%;
	}

	.three-wide-tile:hover {
		background-size: 190%;
	}

	.news-title, .title, .opinion-title {
		left: 0;
	}

	.news-title h6, .title h6, .opinion-title h6 {
		font-size: 20px;
		line-height: 24px;
	}

}

@media screen and (max-width: 1100px) {

	.article-image-container {
	    width: 100%;
	    padding: 0 45px;
	}

	.page-title h1 {
		font-size: 8vw;
		line-height: 95px;
		letter-spacing: 20px;
		padding-left: 20px;
	}

}

@media screen and (max-width: 1000px) {

	.streamer {
		width: 49%;
	}

	.streamer:nth-child(4n+0) {
		margin: 0 2% 25px 0;
	}

	.streamer:nth-child(3n+0) {
	    margin: 0 2% 25px 0;
	}

	.streamer:nth-child(2n+0) {
	    margin: 0 0 25px 0;
	}

	.tournament-container {
		width: 49%;
	}

	.tournament-container-counter a:nth-child(3n) > .tournament-container {
		margin: 0 2% 25px 0;
	}

	.tournament-container-counter a:nth-child(2n) > .tournament-container {
		margin: 0 0 25px 0;
	}

	.rules-container {
		width: 80%;
	}

	.tournament-masthead-image {
		background-size: 250%;
	}

	.rules-container {
		width: 90%;
	}

	.intro-copy-block {
		padding: 35px 45px;
	}

	.intro-copy-block h1 {
		font-size: 32px;
    	margin: 0 0 10px;
    	line-height: 40px;
	}

	.intro-copy-block p {
    	line-height: 24px;
	}

	.gaming-intro {
		background-size: 160%;
	}

	.large-button {
		position: relative;
	    background-size: 400%;
	    height: 300px;
	    width: 50%;	
	    float: left;
	    transition: 0.4s;
	}

	.large-button:hover {
		background-size: 430%;
	}

	.large-button.coming-soon:hover {
		background-size: 400%;
	}

	.main-story, .three-wide-tile {
		height: 250px;
	}

	.news-container {
	    margin: 145px 0 0;
	}

	.home-intro, .streamer-intro, .tournament-intro {
		background-size: 160%;
	}

}

@media screen and (max-width: 850px) {

	.article-copy-container {
	    width: 100%;
	    padding: 0 45px;
	}

	.review-headline-container {
		width: 85%;
	}

	.review-headline-h3-hr {
		width: 50%;
	}

}

@media screen and (max-width: 800px) {

	.three-wide-tile {
		background-size: 206%;
	}

	.three-wide-tile:hover {
		background-size: 215%;
	}

	.two-wide-tile {
		background-size: 131%;
	}

	.two-wide-tile:hover {
		background-size: 136%;
	}

	.continuing-news {
		width: 100%;
	}

	.continuing-news-item img {
		width: 250px;
	}

	.continuing-news-copy {
		margin: 25px 0 0 30px;
	}

	.continuing-news-copy h6 {
		font-size: 18px;
		font-weight: bold;
	}

}

@media screen and (max-width: 768px) {

	.fixed-menu-links-container a {
	    font-size: 40px;
	    margin: 60px 0;
	}

	.page-title h1 {
		font-size: 7vw;
	    line-height: 65px;
	    letter-spacing: 10px;
	    padding-left: 10px;
	}

	.home-intro, .streamer-intro, .tournament-intro {
		background-size: 250%;
	}

}

@media screen and (max-width: 700px) {

	.streamer {
		width: 100%;
		margin: 0 0 25px 0;
	}

	.streamer:nth-child(4n+0) {
		margin: 0 0 25px 0;
	}

	.streamer:nth-child(3n+0) {
	    margin: 0 0 25px 0;
	}

	.streamer:nth-child(2n+0) {
	    margin: 0 0 25px 0;
	}

	.tournament-container {
		width: 100%;
		margin: 0 0 25px 0;
	}

	.tournament-container-counter a:nth-child(4n) > .tournament-container {
		margin: 0 0 25px 0;
	}

	.tournament-container-counter a:nth-child(3n) > .tournament-container {
		margin: 0 0 25px 0;
	}

	.tournament-container-counter a:nth-child(2n) > .tournament-container {
		margin: 0 0 25px 0;
	}

	.large-button {
		height: 200px;
	}

	.gaming-masthead-image {
		height: 300px;
	}

	.intro-copy-block {
	    width: 90%;
	    padding: 50px;
	    margin: 0 auto;
	}

	.intro-copy-block h1 {
		font-size: 52px;
		margin: 0 0 35px;
	}

	.tournament-masthead-image {
		height: 300px;
		background-size: 100%;
	}

	.back a {
		display: none;
	}

	.back {
		top: 38px;
	}

	.back img {
		width: 30px;
	}

	.teams {
	    display: inline-block;
	    white-space: nowrap;
	    overflow: auto;
	}

	.gaming, .apparel {
		background-size: 200%;
	}

	.intro-copy-block-container {
		bottom: 25px;
	    left: auto;
	}

	.gaming-intro {
		background-size: 240%;
    	background-position: 50% 113%;
	}

	.warzone-invitational, .mario-kart-8, .gunfight-2v2 {
		background-size: 100%;
	}

	/*.logo {
		width: 70px;
	}*/

	.close {
		margin: 20px 10px 0 0;
	}

	.main-story, .three-wide-tile {
		height: 200px;
	}

	.three-wide-tile {
	    width: 100%;
	    margin: 20px 0 0;
	    float: none;
	}

	.three-wide-tile.first-tile {
		margin: 0;
	}

	.news-title h6, .title h6, .opinion-title h6 {
		font-size: 24px;
		line-height: 32px;
	}

	.three-wide-tile {
		background-size: 100%;
	}

	.three-wide-tile:hover {
		background-size: 102%;
	}

	.header .logo {
		width: 80px;
	}

	.two-wide-tile {
		width: 100%;
		margin: 0 0 20px 0;
		background-size: 100%;
	}

	.two-wide-tile:hover {
		background-size: 102%;
	}

}

@media screen and (max-width: 575px) {

	.large-button h1 {
		font-size: 48px;
	}

	.coming-soon h2 {
		font-size: 24px;
	}

	.tournament-masthead-image {
		height: 250px;
	}

	.warzone-invitational {
		background-position: 50% 33%;
		background-size: 125%;
	}

	.rules-container h1 {
	    font-size: 48px;
	}

	.rules-container h3 {
		font-size: 40px;
	}

	.back {
		top: 20px;
		left: 19px;
	}

	.back img {
	    width: 20px;
	}

	.gaming-intro {
		background-size: 290%;
	}

	.intro-copy-block h1 {
	    font-size: 40px;
	    margin: 0 0 25px;
	    line-height: 48px;
	}

	.category {
		margin: 75px auto 20px;
	}

	.category a {
		font-size: 18px;
		margin: 0 10px 0 0;
	}

	/*.logo {
		width: 50px;
	}*/

	.close {
		width: 20px;
		margin: 15px 10px 0 0;
	}

	.fixed-menu-links-container a {
	    font-size: 32px;
	    margin: 45px 0;
	}

	.menu-footer img {
	    width: 50px;
	}

	.fixed-header-right {
		top: 37px;
	}

	.news-container {
	    margin: 110px 0 0;
	}

	.continuing-news-item img {
	    width: 30%;
	}

	.continuing-news-copy {
	    width: 67%;
	    margin: 0px 0 0 3%;
	}

	p.label {
		padding: 0px 10px;
	}

	.page-title h1 {
	    font-size: 50px;
	    line-height: 55px;
	    letter-spacing: 0px;
	    padding-left: 0px;
   	}

   	.title-opener {
   		font-size: 18px;
   		letter-spacing: 10px;
   	}

   	.home-intro, .streamer-intro, .tournament-intro {
   		height: 150px;
   		background-size: 225%;
   	}

   	.nav-desktop {
   		display: none;
   	}

   	.nav-mobile {
   		display: block;
   	}

}

@media screen and (max-width: 500px) {

	.article-container {
		margin: 35px 0 0;
	}

	.article-image-container {
		margin: 30px auto;
		padding: 0 10px;
	}

	.article-copy-container {
		padding: 0 25px;
	}

	.discord-container p {
		line-height: 24px;
	}

	.discord-container svg {
		margin: 8px 15px 0 0;
	}

	.discord-container {
		width: 100%;
	}

	.header .logo {
		width: 60px;
	}

	.two-wide-tile {
		background-size: 131%;
	}

	.two-wide-tile:hover {
		background-size: 136%;
	}

	.navigation {
		margin: 0;
	}

}

@media screen and (max-width: 450px) {

	.main-story, .three-wide-tile {
		height: 180px;
	}

	.title h5, .opinion-title h5 {
		font-size: 24px;
	}

	.article-copy-container h1 {
		font-size: 48px;
		line-height: 56px;
	}

	.article-copy-container h2 {
	    font-size: 24px;
	    line-height: 32px;
	}

	p.image-caption {
		line-height: 20px;
		margin: 5px 0 0;
	}

	.article-copy-container h3.review-headline {
		font-size: 32px;
    	line-height: 40px;
	}

	.article-copy-container h4 {
	    font-size: 18px;
	    line-height: 30px;
	}

}

@media screen and (max-width: 400px) {

	.gaming-masthead-image {
	    height: 250px;
	}

	.intro-copy-block h1 {
	    font-size: 40px;
	}

	.tournament-masthead-image {
		height: 200px;
	}

	.warzone-invitational {
		background-position: 50% 63%;
	}

	.rules-container h1 {
	    font-size: 40px;
	}

	.rules-container h3 {
		font-size: 32px;
	}

	.rules-container h5 {
		font-size: 24px;
	}

	.intro-copy-block {
	    padding: 30px 50px;
	}

	.gaming-intro {
	    background-size: 310%;
	}

	.intro-copy-block h1 {
	    font-size: 32px;
	    margin: 0 0 25px;
	}

	.reviewer-score {
		width: 100%;
	}

	.reviewer-mindset {
		width: 100%;
	}

	.review-headline-container {
		width: 100%;
	}

	.category a {
		font-size: 16px;
	}

	.page-title h1 {
	    font-size: 40px;
	    line-height: 45px;
	}

}

@media screen and (max-width: 350px) {

	.article-copy-container {
		padding: 0 15px;
	}

	.category {
    	margin: 75px auto 0px;
	}

	.category a {
	    font-size: 14px;
	}

	.page-title h1 {
    	font-size: 32px;
	}

}









