/* -------------------------------------------------------- */
/* CSS RESET */
/* -------------------------------------------------------- */

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

a {
	outline:none;
	text-decoration:none;
}

a img {
	display: block;
	max-width: 100%;
}

.img-fluid {
	max-width: 100%;
	height: auto;
}

.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

.px-1 {
	padding-right: 30px;
	padding-left: 30px;
}

.text-center {
	text-align: center;
}
 

/* -------------------------------------------------------- */
/* DEFAULT STYLES */
/* -------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}

html, body {
	min-height: 100%;
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height:24px;
}

body{
	background-color:#6f021b;
}

h1{font-size:24px; margin-bottom:36px; }
h2, h3{margin-bottom:10px; font-weight:500; clear:both; }

h1{
	color: #898989;
	font-size:2.4em;
	font-weight: 100;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: .4em;
	padding-left: .4em;
}

h2, h3{
	color:#cc9562;
	font-weight:500;
	text-transform: uppercase;
}

h2 {
	font-size: 1em;
	letter-spacing: .4em;
	margin: 35px 0px 5px 8px;
}

h3 {
	font-size:18px;
	font-size: 1.1em;
	margin: 0px 0px 5px 0px;
	font-weight: 500;
	letter-spacing: .1em;
}

p{
	color: #FAF9F6;
}

a{
	color: #cc9562;
}

#wrapper{
	width: 100%;
	margin: 0 auto;
}



/* -------------------------------------------------------- */
/* NAVIGATION */
/* -------------------------------------------------------- */
#nav {
	display: block;
	width:100%; 
	position: fixed;
	top: 0px;
	left: 0px; 
	background-color: #0f223d;
	z-index: 9999;
}

#mainNav {
	max-width: 1200px; 
	transform: scale(0.5);
	margin: 0 auto; 
	display: flex;
}
 
#mainNav li {
	padding: 0;
	margin: 0;
	list-style: none; 
	position: relative;
}

#mainNav li, #mainNav a{  
	height: 76px;
	display: block;
	text-decoration: none; 
	color: #FFF;
	text-indent: -5000px;
}

#mainNav a {  
	background-repeat:  no-repeat;  
	background-size: 100%; 
	margin-left: 0.8rem;
}
 
 
#home { 
	width: 120px;
}

#banners {
	 width: 365px;
}

#staticNav {
	width: 240px;
}

#mogNav {
	width: 450px;
}

#contact {
	width: 240px;
}
 
#home a {    
	background-image: url("../images/nav_home.png");
	margin-left: 0rem;
	margin-right: 0.7rem; 
	background-position: 0 -4px;
}

#banners a {
	background-image: url("../images/nav_html5.png");
}
 
#mogNav a {
	background-image: url("../images/nav_motion.png");
}

#contact a {
	background-image: url("../images/nav_contact.png");
	background-position: 0 1px;
}

/* OVER SETTINGS */
#mainNav a:hover, #home a.on {
	background-position: 1px -83.8px;
}

#banners a:hover, #banners a.on {
	background-position: 0 -72.4px;
}
 
#mogNav a:hover, #mogNav a.on {
	background-position: 0 -74.25px;
}

#contact a:hover, #contact a.on {
	background-position: 0 -69.5px;
}

 
@media screen and (max-width: 1199px) { 
	#mainNav {
		max-width: 768px; 
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		transform: scale(0.72);
	}
	#mainNav li, #mainNav a{  
		height: 47px;
	}
	#mainNav a {    
		margin-left: 0.4rem;
	}
	#home a {      
		background-position: 0 2px;
	}
	#mainNav a:hover, #home a.on {
		background-position: 0.5px -41.6px;
	} 
	#banners a:hover, #banners a.on{
		background-position: 0.5px -48px;
	}
 
	#mogNav a:hover, #mogNav a.on{
		background-position: 0 -48.8px;
	}
	
	#contact a:hover, #contact a.on{
		background-position: 0 -46px;
	}
}

@media screen and (max-width: 767px) {   
	#mainNav {
		max-width: 521px; 
		transform: scale(0.92);
	}
	#mainNav li, #mainNav a{  
		height: 31px;
	}
	#mainNav a {    
		margin-left: 0.3rem;
	}
	#home a {     
		margin-right: 0.4rem; 
		background-position: 0 1.5px;
	}
	#contact a {
		background-position: 0 1px;
	}
	#mainNav a:hover, #home a.on {
		background-position: 0.1px -28.5px;
	} 
	#banners a:hover, #banners a.on {
		background-position: 0.15px -32.4px;
	} 
	#mogNav a:hover, #mogNav a.on{
		background-position: 0 -33px;
	}
	
	#contact a:hover, #contact a.on{
		background-position: 0 -30.6px;
	}
}
@media screen and (max-width: 520px) {   
	#mainNav {
		max-width: 375px; 
		transform: scale(0.92);
	}
	#mainNav li, #mainNav a{  
		height: 22px;
	}
	#mainNav a {    
		margin-left: 0.1rem;
	}
	#home a {     
		margin-right: 0.2rem; 
		background-position: 0 0;
	}
	#contact a {
		background-position: 0 1px;
	}
	#mainNav a:hover, #home a.on {
		background-position: 0.3px -24.6px;
	} 
	#banners a:hover, #banners a.on {
		background-position: 0.1px -23.75px;
	} 
	#mogNav a:hover, #mogNav a.on{
		background-position: 0 -24.1px;
	} 
	#contact a:hover, #contact a.on{
		background-position: 0 -22.4px;
	}
}
/* -------------------------------------------------------- */
/* HOME PAGE */
/* -------------------------------------------------------- */
body {
	font-family: 'Raleway', sans-serif;  
} 
body:before { 
	content: '';
	position: fixed;
	z-index: 0;
	height: 100vh; 
    width: 100%; 
	background: #6f021b url("../images/background_red.jpg") no-repeat center; 
	background-size: cover;  
} 
#mainPage, #copyArea{
	margin: 0px auto;
	max-width: 1002px;
}

#mainPage {
	padding-bottom: 40px;
	position: relative;
	z-index: 1;
}

#mainPage p {
	text-transform: uppercase;
	color: #FAF9F6;
	font-weight: 400;
}

#mainPage p.first{
	font-weight:700;
	margin-top: 40px;
}

#headerTop {
	position: relative;
	top:85px;
	width: 100%;
	display: block;
	margin: 20px auto;
	max-width: 871px;
	margin-bottom: 90px; 
}

#headerTop .img-block {
	max-width: 700px;
}

#headerCopy{
	padding-top: 30px;
}

#services {
	margin-top: 40px;
}

.divider {
	text-align: center;
	max-width: 849px; 
	padding-top: 70px;  
}
 
.anchor {
	height: 65px; 
} 
@media screen and (max-width: 991px)    {
	.anchor {
		height: 20px; 
	}  
	.divider {
		padding-top: 60px;
	} 
}
@media screen and (max-width: 767px)    {
	.anchor {
		height: 10px; 
	}  
	.divider {
		padding-top: 50px;
	} 
}
.headerImg{
	padding-bottom: 35px;
}
 
/* CONTACT FORM */
#contactForm {
	background-color:#FFF;
}

#contactForm p {
	width: 320px;
	font-size: 14px;
	margin-top: 5px;
	margin-left: 15px;
	margin-bottom: 10px;
	text-align: left;
	line-height: 20px;
} 

.img-block {
	text-align: center;
}
@media screen and (max-width: 991px)    {
	.img-block {
		max-width: 42vw;
	} 
}
@media screen and (max-width: 767px)    {
	.img-block {
		max-width: 55vw;
	} 
}

/* -------------------------------------------------------- */
/* BANNERS PAGE */
/* -------------------------------------------------------- */
/* COPY AREAS */
#headerCopy, #secondaryCopy {
	width: 88%;
	margin: 44px auto;
	font-size: 1em;
	text-align: center;
	line-height: 1.3;
}

#infoTxt{
	margin-top: 5px;
	margin-left: 10px;
	display: none;
}

#infoTxt p{
	font-family: Arial, Helvetica, sans-serif;
	color: rgba(236, 83, 0, .8);
	line-height: 18px;
}

#lower {
	width: 100%;
	background: #313233;
}

/* Turned OFF */
#copyArea {
	padding-top: 50px;
	padding-bottom: 40px;
	display: none;
}

#copyArea h3 {
	letter-spacing: .2em;
	text-transform: uppercase;
}

#copyArea p {
	color: #FFF;
	font-size: .8em;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: .3em;
	line-height: 1.8;
	margin: 5px 0 30px 8px ;
}

#copyArea a {
	font-size: 1em;
	color: #ff5400;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
}

#copyArea a:hover {
	color: #CCC;
}


#html5, #statics, #mog {
	max-width: 1002px;
	overflow: hidden;
}

#mog li, #statics li, #html5 li {
	float: left;
}

li img {transition: .5s ease all; object-fit:cover;}
li:hover img{
	transform: scale(1.1);
}

.fade {
   opacity: 1;
   transition: opacity .6s ease-in-out;
}

.fade:hover {
	opacity: 1;
}

/* HTML5 MENU */
#ME1, #BNG2, #ELD, #LMS, #COD, 
#AFE, #FB, #M3G, #BNG1, #ATT,
#PG, #TMS, #WHF, #FEST, #DOOM, 
#CUP, #LAT, #REM, #JBL, #RAGE,
#RAZ, #DIS, #PS4C, #TEK, #PDP,   
#GOW3, #XCOM, #OW, #DBZ, #UNC4,
#HS, #JUMP, #DS3, #TLG, #FALL,
#DBFZ, #TEW, #NEC {
	position: relative;
	overflow: hidden;
	border: 2px solid #CC9562;
	box-sizing: border-box;
	margin: 8px;
}

#ME1:hover .details, #BNG2:hover .details, #ELD:hover .details, #LMS:hover .details, #COD:hover .details,
#AFE:hover .details, #FB:hover .details, #M3G:hover .details, #BNG1:hover .details, #ATT:hover .details,
#PG:hover .details,  #TMS:hover .details, #WHF:hover .details, #FEST:hover .details, #DOOM:hover .details,
#CUP:hover .details, #LAT:hover .details, #REM:hover .details, #JBL:hover .details, #RAGE:hover .details,
#RAZ:hover .details, #DIS:hover .details, #PS4C:hover .details, #TEK:hover .details, #PDP:hover .details,
#GOW3:hover .details, #XCOM:hover .details, #OW:hover .details, #DBFZ:hover .details, #UNC4:hover .details,
#HS:hover .details, #JUMP:hover .details, #DS3:hover .details, #TLG:hover .details, #FALL:hover .details,
#DBZ:hover .details, #TEW:hover .details, #NEC:hover .details {
	/*display: block;*/
	bottom: 0px !important;
}

.details {
	position: absolute;
	left: 0px;
	bottom: -60px;
	display: block;
	width: 100%;
	height: 33px;
	background-color: rgba(6, 24, 43, .9);
	transition: all .45s cubic-bezier(.165,.84,.44,1);
	overflow: hidden;
	pointer-events: none;
}

.project, .client {
	position: absolute;
	left: 5px;
	color: #FFF !important;
	font-size: 12px;
	text-align: left;
}

.project{
	top: -2px;
	font-weight: 400 !important;
}

.client {
	top: 13px;
	font-weight: 600 !important;
}


/* -------------------------------------------------------- */
/* STATICS SECTION */
/* -------------------------------------------------------- */

#comingSoon {
	display: block;
	margin: 70px auto;
}
@media screen and (max-width: 1099px)    {
	#comingSoon {
		width: 33vw;
		margin: 30px auto;
	}
}
@media screen and (max-width: 767px)    {
	#comingSoon {
		width: 44vw;
		margin: 10px auto;
	}
}
/* STATICS MENU */
#STC1, #STC2, #STC3, #STC4, #STC5 {
	position: relative;
	overflow: hidden;
	border: 2px solid #CC9562;
	box-sizing: border-box;
	margin: 8px;
}

#STC1:hover .details, #STC2:hover .details, #STC3:hover .details, #STC4:hover .details, #STC5:hover .details {
bottom: 0px !important;
}


/* -------------------------------------------------------- */
/* MOG PAGE */
/* -------------------------------------------------------- */

/* MOG MENU */
#FTX, #AVT, #SH1, #THFM, #SH2,
#MTG, #SH3, #REMM, #SH4, #SH5 {
	position: relative;
	overflow: hidden;
	border: 2px solid #CC9562;
	box-sizing: border-box;
	margin: 8px;
}

#FTX:hover .details, #AVT:hover .details, #SH1:hover .details, #THFM:hover .details, #SH2:hover .details,
#MTG:hover .details, #SH3:hover .details, #REMM:hover .details, #SH4:hover .details, #SH5:hover .details {
	bottom: 0px !important;
}


/* -------------------------------------------------------- */
/* MOBILE PHONES / small screens */
/* -------------------------------------------------------- */
/*  2 COLUMNS SMALL SIZE */
@media screen and (max-width: 454px)    {
	

	#html5Banners, #staticAds, #motionGraphics, #copyArea {
		margin:15px auto;
		width: 308px;
	}

	#copyArea{
		padding-top: 25px;
		padding-bottom: 20px;
	}

	#mog, #statics, #html5 {
		margin: 0 auto;
		overflow: hidden;
		width: 308px;
	}


	h1{
		font-size: 1.9em;
		letter-spacing: .2em;
		padding-left:  .3em;
	}

	h2 {
		font-size: .8em;
		margin-left: 6px;
		text-align: center;
	}

	h3 { 
		letter-spacing: .05em; 
	}

	#headerCopy, #secondaryCopy {
		font-size: .8em;
		text-align: center;
		line-height: 1.5;
	}

	#copyArea p {
		color: #FFF;
		font-size: .7em;
		font-weight: 300;
		text-transform: uppercase;
		letter-spacing: .3em;
		line-height: 1.6;
		margin: 5px 0 25px 6px ;
	}

	.hrLine {
		border-top: 2px solid #ff5400;
		width: 10%;
	}

	.hrLine1 {
		margin-top: 20px;
	}

	.hrLine2 {
		margin-top: 10px;
	}


	li {
		width: 140px;
		height: 116px;
	}

	li > img {
		width: 140px;
		height: 116px;
	}

	#infoTxt {
		margin: 0;
	}

	/* MOG MENU */
	#FTX, #AVT, #SH1, #THFM, #SH2,
	#MTG, #SH3, #REMM, #SH4, #SH5 {
		margin: 5px;
	}

	
	/* STATICS MENU */
	#STC1, #STC2, #STC3, #STC4, #STC5 {
		margin: 5px;
	}

	/* HTML5 MENU */
	#ME1, #BNG2, #ELD, #LMS, #COD, 
	#AFE, #FB, #M3G, #BNG1, #ATT,
	#PG, #TMS, #WHF, #FEST, #DOOM, 
	#CUP, #LAT, #REM, #JBL, #RAGE,
	#RAZ, #DIS, #PS4C, #TEK, #PDP,   
	#GOW3, #XCOM, #OW, #DBZ, #UNC4,
	#HS, #JUMP, #DS3, #TLG, #FALL,
	#DBFZ, #TEW, #NEC {
		margin: 5px;
	}

	.mobileHide {
		display:none;
	}

	.project, .client {
		left: 3px;
		font-size: 10px;
	}

	.project{
		top: 4px;
		letter-spacing: -.05em;
	}

}

@-ms-viewport{
  width: device-width;
}


/*  3 COLUMNS SMALL SIZE */
@media screen and (min-width: 456px) and (max-width: 581px)  {
	#headerTop {
		width: 462px;
	}
 
	.headerImg { 
		margin-top: 0px;
	}

	#html5Banners, #staticAds, #motionGraphics, #copyArea {
		margin:15px auto;
		width: 462px;
	}

	#html5Banners, #staticAds, #motionGraphics {
		padding-bottom: 10px;
	}

	#copyArea {
		padding-top: 30px;
		padding-bottom: 30px;
	}

	#html5, #statics, #mog {
		margin: 0 auto;
		overflow: hidden;
		width: 462px;
	}
 
	li {
		width: 140px;
		height: 116px;
	}

	li > img {
		width: 140px;
		height: 116px;
	}

	h1{
		font-size: 1.8em;
		letter-spacing: .2em;
		padding-left:  .3em;
	}

	h2 {
		font-size: .9em;
		margin-left: 6px;
		text-align: center;
	}

	h3 { 
		letter-spacing: .05em; 
	}

	#headerCopy {
		font-size: .8em;
		text-align: center;
		line-height: 1.6;
	}

	#copyArea p {
		color: #FFF;
		font-size: .7em;
		font-weight: 300;
		text-transform: uppercase;
		letter-spacing: .3em;
		line-height: 1.5;
		margin: 6px 0 30px 5px ;
	}

	#infoTxt {
		margin: 0;
	}

	/* MOG MENU */
	#FTX, #AVT, #SH1, #THFM, #SH2,
	#MTG, #SH3, #REMM, #SH4, #SH5 {
		margin: 5px;
	}

	/* STATICS MENU */
	#STC1, #STC2, #STC3, #STC4, #STC5 {
		margin: 5px;
	}

	/* HTML5 MENU */
	#ME1, #BNG2, #ELD, #LMS, #COD, 
	#AFE, #FB, #M3G, #BNG1, #ATT,
	#PG, #TMS, #WHF, #FEST, #DOOM, 
	#CUP, #LAT, #REM, #JBL, #RAGE,
	#RAZ, #DIS, #PS4C, #TEK, #PDP,   
	#GOW3, #XCOM, #OW, #DBZ, #UNC4,
	#HS, #JUMP, #DS3, #TLG, #FALL,
	#DBFZ, #TEW, #NEC {
		margin: 5px;
	}

	.mobileHide {
		display:none;
	}

	.project, .client {
		left: 3px;
		font-size: 10px;
	}

	.project{
		top: 4px;
		letter-spacing: -.05em;
	}

}


/*  3 COLUMNS FULL SIZE */
@media screen and (min-width: 582px) and (max-width: 801px)  {
	#html5Banners, #staticAds, #motionGraphics, #copyArea {
		margin: 15px auto;
		width: 600px;
	}

	#html5, #mog, #statics {
		margin: 0 auto;
		overflow: hidden;
		width: 600px;
	}

	h1{
		font-size: 2.1em;
		letter-spacing: .3em;
		padding-left:  .3em;
	}

	h2 {
		font-size: .9em;
		margin-left: 8px;
		text-align: center;
	}

	h3 {
		font-size: .9em;
		letter-spacing: .15em;
		margin-left: 8px;
	}

	#copyArea a {
		font-size: 1.05em;
		letter-spacing: .15em;
		line-height: 1.5
	}

	#infoTxt {
		margin: 0;
	}

	p{
		font-size: .8em;
	}

	/* MOG MENU */
	#FTX, #AVT, #SH1, #THFM, #SH2,
	#MTG, #SH3, #REMM, #SH4, #SH5 {
		margin: 8px;
	}

	/* HTML5 MENU */
	#ME1, #BNG2, #ELD, #LMS, #COD, 
	#AFE, #FB, #M3G, #BNG1, #ATT,
	#PG, #TMS, #WHF, #FEST, #DOOM, 
	#CUP, #LAT, #REM, #JBL, #RAGE,
	#RAZ, #DIS, #PS4C, #TEK, #PDP,   
	#GOW3, #XCOM, #OW, #DBZ, #UNC4,
	#HS, #JUMP, #DS3, #TLG, #FALL,
	#DBFZ, #TEW, #NEC {
		margin:8px;
	}

}


/* 5 COLUMNS FULL SIZE */
@media screen and (min-width: 802px) and (max-width: 1024px)  { 
	#html5Banners, #staticAds, #motionGraphics, #copyArea {
		margin:20px auto;
		max-width: 802px;
		display: block;
		/*position: relative;*/
	}

	#html5, #mog, #statics {
		margin: 0 auto;
		overflow: hidden;
		max-width: 802px;
	}

	h1{
		font-size: 2.1em;
		letter-spacing: .3em;
		padding-left:  .3em;
	}

	h2 {
		font-size: .9em;
		margin-left: 8px;
	}

	h3 {
		font-size: .9em;
		letter-spacing: .15em;
		margin-left: 8px;
	}

	#copyArea a {
		font-size: 1.05em;
		letter-spacing: .15em;
	}

	#infoTxt {
		margin-left: 8px;
	}

	/* MOG MENU */
	#FTX, #AVT, #SH1, #THFM, #SH2,
	#MTG, #SH3, #REMM, #SH4, #SH5 {
		margin: 7px;
	}

	/* HTML5 MENU */
	#ME1, #BNG2, #ELD, #LMS, #COD, 
	#AFE, #FB, #M3G, #BNG1, #ATT,
	#PG, #TMS, #WHF, #FEST, #DOOM, 
	#CUP, #LAT, #REM, #JBL, #RAGE,
	#RAZ, #DIS, #PS4C, #TEK, #PDP,   
	#GOW3, #XCOM, #OW, #DBZ, #UNC4,
	#HS, #JUMP, #DS3, #TLG, #FALL,
	#DBFZ, #TEW, #NEC {
		margin: 7px;
	}

}


/* IPAD LANDSCAPE ONLY */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
and (orientation : landscape) {
	#html5Banners, #staticAds, #motionGraphics, #copyArea {
		margin:20px auto;
		max-width: 802px;
	}

	#html5, #mog, #statics {
		margin: 0 auto;
		overflow: hidden;
		max-width: 802px;
	}

	h1{
		font-size: 2em;
		letter-spacing: .3em;
		padding-left:  .3em;
	}

	h2 {
		font-size: 1em;
		margin-left: 8px;
	}

	h3 {
		font-size: 1em;
		letter-spacing: .15em;
		margin-left: 8px;
	}

	#headerCopy, #secondaryCopy {
		margin: 15px auto;
	}

	#copyArea a {
		font-size: 1em;
		letter-spacing: .15em;
	}

	#infoTxt {
		margin-left: 8px;
	}

	p{
		font-size: 1em;
	}

	/* MOG MENU */
	#FTX, #AVT, #SH1, #THFM, #SH2,
	#MTG, #SH3, #REMM, #SH4, #SH5 {
		margin: 8px;
	}

	/* HTML5 MENU */
	#ME1, #BNG2, #ELD, #LMS, #COD, 
	#AFE, #FB, #M3G, #BNG1, #ATT,
	#PG, #TMS, #WHF, #FEST, #DOOM, 
	#CUP, #LAT, #REM, #JBL, #RAGE,
	#RAZ, #DIS, #PS4C, #TEK, #PDP,   
	#GOW3, #XCOM, #OW, #DBZ, #UNC4,
	#HS, #JUMP, #DS3, #TLG, #FALL,
	#DBFZ, #TEW, #NEC {
		margin:8px;
	}

}