/* Typography******************************************/

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i');

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700,700i');

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/*@import url('https://fonts.googleapis.com/css?family=Lusitana|Playfair+Display');*/
/*font-family: 'Lusitana', serif;*/

/*box model*/

*,
*::before,
*::after {
    box-sizing: border-box; /*para respetar el ancho de los selectores a pesar del padding o el tamaño del contenido. border-content, para respetar el ancho del contenido*/
}

/* footer always bottom********************************/

	html {
		position: relative;
		min-height: 100%;
	}

	body {
		width: 100%;
		height: 100%;
		margin: 0 0 180px 0;/*margin-bottom=footer´s height*/
		padding: 0;
		background: url(../img/indexBackground-2.jpg) fixed;
		font-family: 'Source Sans Pro', sans-serif;
	}

/* general styles *************************************/

    ul, li, a { 
    	list-style: none; 
    	text-decoration: none; 
    	margin: 0; 
    	padding: 0; 
    }

    .clear {
    	height: 10px; 
    	clear: both;
    }
	
/* adds & social plugins **************************/
    
    .googleAd {
    	width: 320px;
    	margin: 28px 0 15px -5px;
		border-top: 1px solid #444;
		border-bottom: 1px solid #444;
		display: block;
    }
	.googleAd p {
		margin-top: -20px;
		color: #444;
		text-align: center;
	}

	.adsbygoogle {
		margin: -5px auto 10px auto;
	}

	.line {
		width: 100%;
		border-bottom: 1px solid #444;
	}

	.shareBttns {
		width: 285px;
		height: 41px;
		margin: 20px auto;
	}

	#twitterBttn a, #facebookBttn a {
		width: 140px;
		height: 40px;
		border-radius: 5px;
		position: absolute;
	} 

	#facebookBttn, #facebookBttn a {
		margin-left: 143px;
		background: url(../img/Facebook.png) no-repeat;
		background-position: 46px -4px;
		background-size: 40px;
		background-color: #3b5998;
	}

	#twitterBttn, #twitterBttn a {
		background: url(https://overdrivengamers.com/img/x-logo/logo-white.png) no-repeat;
		background-position:center;
		background-size: 30px;
		background-color: #000000;
	}

	#twitterBttn a span, #facebookBttn a span {
		color: #FFF;
		top: 6px;
		right: 9px;
		position: absolute;
		display: none;
	}

	#comments {
		width: 100%; 
		height: auto;
		margin: 0 auto;
	}	

	.fb-comments {
		z-index: 0;
	}

/* profile user pictures ******************************/
	
	.profileUser-ellioth {
      	background: url(../img/profilePic-ellioth.jpg) center;
      	background-size: 60px;
    }

    .profileUser-AlexB {
      	background: url(../img/profilePic-AlexB.jpg) center;
      	background-size: 60px;
    }

    .profileUser-Alexandr {
      	background: url(../img/profilePic-Alexandr.jpg) center;
      	background-size: 55px;
    }

    .profileUser-Artemio {
      	background: url(../img/profilePic-Artemio.jpg) center;
      	background-size: 60px;
    }

    .profileUser-Fran {
      	background: url(../img/profilePic-Fran.jpg) center;
      	background-size: 55px;
    }

    .profileUser-cocalightman {
      	background: url(../img/profilePic-cocalightman.jpg) center;
      	background-size: 60px;
    }

/* containers *****************************************/
	
	#mainContainer {
		width: 100%;
		height: 100%;
	}

	.load {
    	width: 100%;
    	height: 100%;
    	position:fixed; 
    	background:url(../img/overdrivenLoad.gif) 97% 97% no-repeat #fbf9f3; 
    	background-size: 217px;
    	z-index:99; 
    	top:0; 
    	left:0	
    }

	#mainNav { 
		width: 100%; 
		height: 47px; 
		background-color: #2A2C2E;
		/*background: url(../img/navBack.jpg);*/
		box-shadow: 1px 1px 5px #000;
		z-index: 1; 
		top: 0; 
		position: fixed;
	}

	.mainNav-news {
		/*background-color: #CD3500;
		border-bottom: 5px solid #CD3500;
		background-color: #444;*/
	}

	.mainNav-reviews {
		/*background-color: #FFB10D;
		border-bottom: 5px solid #FFB10D;
		background-color: #444;*/
	}

	.mainNav-articles {
		/*background-color: #014DA5;
		border-bottom: 5px solid #014DA5;
		background-color: #444;*/
	}

	.mainNav-retro {
		/*background-color: #107C10;
		border-bottom: 5px solid #107C10;
		background-color: #444;*/
	}

	.mainNav-TV {
		/*background-color: #6149AA;
		border-bottom: 5px solid #6149AA;
		background-color: #444;*/
	}

	.mainNav-contact {
		/*background-color: #B6B4DD;
		border-bottom: 5px solid #B6B4DD;
		background-color: #444;*/
	}

	#mainHeader {
		width: 100%;
		height: 60px;
		top: 0;
		position: fixed !important;
		z-index: 30;
	}

	/*#mainHeader img {
		margin-top: 2px;
		margin-left: 14px;
	}*/


	.logo {
		width: 140px;
		margin-top: 10px;
		margin-left: 15px;
	}

	#button {
			top: 15px;
        	right: 15px;
        	float: right;
        	cursor: pointer;
        	position: absolute;
        	z-index: 999;
        	display: block;
			
		}

		.line1, .line2, .line3, .slash1, .line0, .slash2 {
			width: 31px;
			height: 2px;
			position: relative;
			background-color: #FFF;
			outline: none;
		}

		.line1 {
    		margin-top: 0;
    		-moz-transform: rotate(0deg); 
    		-moz-transform-origin: 0;
     		-moz-transition: 0.2s;
    		-webkit-transform: rotate(0deg); 
    		-webkit-transform-origin: 0;
     		-webkit-transition: 0.2s;
    		transition: 0.2s;
		}

    	.line2 {
    		margin-top: 5px;
    		position: relative;
    		-o-transition: 0.2s;
    		-ms-transition: 0.2s;
    		-moz-transition: 0.2s;
    		-webkit-transition: 0.2s;
    		transition: 0.2s;
		}

		.line3 {
    		margin-top: 5px;
    		-moz-transform: rotate(0deg); 
    		-moz-transform-origin: 0;
     		-moz-transition: 0.2s;
    		-webkit-transform: rotate(0deg); 
    		-webkit-transform-origin: 0;
     		-webkit-transition: 0.2s;
    		transition: 0.2s;
		}

		.slash1 {
    		margin-top: -2px;
    		-moz-transform: rotate3d(0, 0, 1, 45deg) translate(0, -2.5px);
    		-webkit-transform: rotate3d(0, 0, 1, 45deg) translate(0, -2.5px);
    		transform: rotate3d(0, 0, 1, 45deg) translate(0, -2.5px);
		}

		.line0 {
    		margin-top: 7px;
    		opacity: 0;
		}

		.slash2 {
    		margin-top: 7px;
    		-moz-transform: rotate3d(0, 0, 1, -45deg) translate(0, 2.5px);
    		-webkit-transform: rotate3d(0, 0, 1, -45deg) translate(0, 2.5px);
    		transform: rotate3d(0, 0, 1, -45deg) translate(0, 2.5px);
		}

		.active { 
			-webkit-transform: translateX(-100%);
			-moz-transform: translateX(-100%);
			-o-transform: translateX(-100%);
			transform: translateX(-100%);
			-webkit-transition: -webkit-transform 400ms ease;
        	-moz-transition: -moz-transform 400ms ease;
        	-o-transition: -o-transform 400ms ease;
        	transition: transform 400ms ease;
        	/*-webkit-backface-visibility: hidden;*/
	 	}

/* next button *************************/

	.nextButton {
		width: 100%; 
		height: 40px; 
		position: relative;
		padding: 10px 0 0 0; 
		margin: 0 0 30px 0;
	}

	.nextButton a { 
		width: 100px;
		font-family: "Montserrat";
		color: #444;
		text-transform: uppercase;
		padding: 5px 5px 4px 5px;
		text-align: center;
		border: 2px solid #444;
		border-radius: 3px;
		left: 0; right: 0; top: 18px;
		margin: 0 auto;
		-webkit-transition: all 100ms ease-out;
        -moz-transition: all 100ms ease-out;
        -o-transition: all 100ms ease-out;
        transition: all 100ms ease-out;
		position: absolute;
	}

	.nextButton a:visited { color: #444; }

	.nextButton a:hover{
		background-color: #444;
		color: #FFF;
		-webkit-transition: all 100ms ease-out;
        -moz-transition: all 100ms ease-out;
        -o-transition: all 100ms ease-out;
        transition: all 100ms ease-out;
	}

/* footer *************************/
	
	#footer { 
		width: 100%; 
		height: 175px;  
		background-color: #2A2C2E;
		/*background: url(../img/footerBack.jpg);*/
		bottom: 0;  
		position: absolute;
	}

	#banner, #social, #disclaimer {position: relative;}

	#banner, #disclaimer {
		color: #FFF; 
		font-family: 'Source Sans Pro', sans-serif;
	}

	#banner {
		width: 174px;
		top: 15px;
		right: 0; left: 0;
		margin: 0 auto;
	}

	#social {
		width: 315px;
		top: 40px;
		left: 0; right: 0;
		margin: 0 auto;
	}

	#footer a {
		width: 50px;
		height: 50px;
		margin-top: 0px;
		margin-right: 20px;
		border-radius: 70px;
		background-color: black;
		display: inline-block;
		display: inline-flex;
		color: #FFF;
		-webkit-transition: all 100ms ease-out;
        -moz-transition: all 100ms ease-out;
        -o-transition: all 100ms ease-out;
        transition: all 100ms ease-out;
	}
	#footer a:visited {
    	color: #FFF;
    }

	#footer a:nth-child(1){
		margin-left: 20px;
		background: url(../img/Facebook.png) 15px 7px no-repeat;
		background-color: #444;
		background-size: 30px;
	}

	#footer a:nth-child(1):hover{
		
		background-color: #3b5998;
	}

	#footer a:nth-child(2){
		background: url(../img/Twitter.png) center no-repeat;
		background-color: #444;
		background-size: 30px;
	}

	#footer a:nth-child(2):hover{
		
		background-color: #0084B4;
	}

	#footer a:nth-child(3){
		background: url(../img/Email.png) center no-repeat;
		background-color: #444;
		background-size: 30px;
	}

	#footer a:nth-child(3):hover{
		
		background-color: #B6B4DD;
	}

	#footer a:nth-child(4){
		background: url(../img/Beer.png) center no-repeat;
		background-color: #444;
		background-size: 40px;
		position: absolute;
	}

	#footer a form{
		opacity: 0;
	}

	#footer a:nth-child(4):hover{
		
		background-color: #B24F08;
	}

	#disclaimer {
		margin-top: 55px;
		font-size: 10px;
		text-align: center;
	}

/* menu *********************************************/
	
	#menuContainer {
		width: 100%;
		height: 100%;
		right: 0;
		top: 0;
		margin-right: -100%;
		color: #FFF;
		z-index: 20;
		overflow: auto;
		position: fixed;
		-webkit-transition: -webkit-transform 400ms ease-out;
        -moz-transition: -moz-transform 400ms ease-out;
        -o-transition: -o-transform 400ms easeout;
        transition: transform 400ms ease-out;
        -webkit-backface-visibility: hidden;
	}

	.mC {
		background-color: rgba(0,0,0,0.5);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        -moz-backdrop-filter: blur(10px);
        -o-backdrop-filter: blur(10px);
	}

	.active { 
		-webkit-transform: translateX(-100%);
		-moz-transform: translateX(-100%);
		-o-transform: translateX(-100%);
		transform: translateX(-100%);
		-webkit-transition: -webkit-transform 400ms ease;
        -moz-transition: -moz-transform 400ms ease;
        -o-transition: -o-transform 400ms ease;
        transition: transform 400ms ease;
	 }

	#menuContainer ul {
		top: 32%;
		left: 0;
		right: 0;
		position: absolute;
	}

	#menuContainer ul li a{color: #FFF;}
	#menuContainer ul li a:visited {color: #FFF;}

	.li1, .li2, .li3, .li4, .li5 {  
		border-bottom: 1px solid rgba(255, 255, 255, 0); 
		text-transform: uppercase;
		font-size: 23px;
		font-family: "Montserrat";
		font-weight: 200;
		text-align: center;
		left: 0;
		right: 0;
	}
    
    .li1:hover>.ac1 { color: #CD3500; }
	.li2:hover>.ac2 { color: #FFB10D; }
	.li3:hover>.ac3 { color: #014DA5; }
	.li4:hover>.ac4 { color: #107C10; }
	.li5:hover>.ac5 { color: #6149AA; }
	
    .li1:hover { border-bottom: 1px solid rgba(205,53,0,1); }
	.li2:hover { border-bottom: 1px solid rgba(255,177,13,1); }
	.li3:hover { border-bottom: 1px solid rgba(1,77,165,1); }
	.li4:hover { border-bottom: 1px solid rgba(16,124,16,1); }
	.li5:hover { border-bottom: 1px solid rgba(97,73,170,1); }

	.cp1 { border-bottom: 1px solid #CD3500; }

	.cp2 { border-bottom: 1px solid #FFB10D; }

	.cp3 { border-bottom: 1px solid #014DA5; }

	.cp4 { border-bottom: 1px solid #107C10; }

	.cp5 { border-bottom: 1px solid #6149AA; }

@media screen and (min-width: 321px){
	.googleAd{
	margin: 20px auto;
	}
}

@media screen and (min-width: 520px){

/*footer*********************/

	#social {
		width: 398px;
		top: 55px;
	}

	#footer a {
		width: 70px;
		height: 70px;
		margin-top: -20px;
		margin-right: 20px;
		border-radius: 70px;
	}

	#footer a:nth-child(1){
		margin-left: 20px;
		background-size: 40px;
		background-position: 20px 10px;
	}

	#footer a:nth-child(2){
		background-size: 40px;
	}

	#footer a:nth-child(3){
		background-size: 40px;
	}

	#footer a:nth-child(4){
		background-size: 50px;
	}

	#disclaimer {
		margin-top: 65px;
	}

}

@media screen and (min-width: 960px){
	
	#mainHeader {
		width: 220px;
	
	}.logo {
		margin-top: 15px;
	}

	 #menuContainer ul {
        margin-top: 3px;
    }

	#button {
		display: none;
	}

/*footer*********************/	

	#social {
		margin-left: 0;
	}

	#banner {
		width: 174px;
		top: 15px;
		margin-left: 110px;
	}

	#disclaimer {
		margin-top: 75px; 
		margin-right: 15px;
		text-align: right;
	}

/* menu *********************************************/
	
	#menuContainer {
	    height: 60px;
		margin-right: 0;
		float: right;
		z-index: 20;
		right: 0;
		-webkit-transition: -webkit-transform 0ms ease;
        -moz-transition: -moz-transform 0ms ease;
        -o-transition: -o-transform 0ms ease;
        transition: transform 0ms ease;
        -webkit-backface-visibility: hidden;
	}

	.mC {
		background-color: rgb(42, 44, 46);
	}

	.active {
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-o-transform: translateX(0);
		transform: translateX(0);
    }

    #menuContainer ul {
		float: right;
		top: 15px;
		margin-right: 20px;
		position: relative;
	}

	.li1, .li2, .li3, .li4, .li5 {
		display: inline;
		margin-left: 8px;
		font-size: 17px;
		padding-bottom: 2px;
		border-bottom: 1px solid rgba(255,255,255,0);
	}

	.li1:hover>.ac1, .li2:hover>.ac2, .li3:hover>.ac3, .li4:hover>.ac4, .li5:hover>.ac5 { 
		color: #FFF;  
	}
	
    .li1:hover, .li2:hover, .li3:hover, .li4:hover, .li5:hover { 
        border-bottom: 1px solid #FFF; 
        -webkit-transition: all 200ms ease-out;
        -moz-transition: all 200ms ease-out;
        -o-transition: all 200ms ease-out;
        transition: all 200ms ease-out;
    }

    .cp1 { border-bottom: 1px solid #CD3500; }

	.cp2 { border-bottom: 1px solid #FFB10D; }

	.cp3 { border-bottom: 1px solid #014DA5; }

	.cp4 { border-bottom: 1px solid #107C10; }

	.cp5 { border-bottom: 1px solid #6149AA; }

    /*.currentPage {
    	border-bottom: 3px solid #FFF;
    }*/

    .googleAd {display: none;}

}