/*Written by Matej Vanco 2021-2024*/

*{
margin: 0;
padding: 0;	
font-family: 'Open Sans', sans-serif;
scroll-behavior: smooth;
}

html, body
{
	background-color:#000;
	max-width: 100%;
    overflow-x: hidden;
}

@keyframes main
{
	0%
	{
		opacity:0;
	}
	100%
	{
		opacity:100;
	}
}

@keyframes pop
{
	0%   { transform: scale(0); }
    24%  { transform: scale(1.1,1); }
    34%  { transform: scale(1.2,1); }
    100% { transform: scale(1,1); }
}

/*	SAVED CODE
outline: 2px solid white;
*/

/*
_______________________________________________________________________________


                    ESSENTIALS
					
			Header, Empty pages, Footer


_______________________________________________________________________________
*/

/*> Main head content*/
.header
{
	min-height: 1000px;
	width:100%;
	background-position:center;
	background-size:cover;
	position:relative;
	animation: main 600ms ease-out;
}
/*> Main foot structure*/
.footer
{
	min-height: 150px;
	padding-bottom:20px;
	width:100%;
	background-image:linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,1.0)),url(images/bg6.jpg);
	background-position:top;
	background-size:cover;
	position:relative;
}
/*> Main foot content*/
.footer-content
{
	flex:1;
	font-size:14px;
	text-align:center;	
	margin-top:20px;
	color:#fff;
}

/*> Empty space*/
.space
{
	margin:auto;
	height:100px;
	background-color:#000;
	color:#000;
}
/*> Empty black page*/
.blackPage
{
	height:1700px;
	background-color:#000;
	color:#000;
	width:100%;
	position:relative;
}

/*> Head main logo logic*/
.headLogo
{
	padding-top:50px;
	transform:scale(1);
	transition:0.2s;	
	animation: main 600ms ease-out;
}
.headLogo:hover
{
	transform:scale(1.1);
}
.headLogo img
{
	background:url(images/logo.png);
	width:300px;
	position:relative;
	padding:90px 0 0 0;
	margin:auto;
	display:block;
	background-size:100%;
	background-repeat:no-repeat;
}

/*
_______________________________________________________________________________


                    UPPER NAVIGATION
					
			Navigation content, navigation texts, social-media images & structure


_______________________________________________________________________________
*/

/*> Navigation content structure MAIN*/
.nav-content
{
	flex:1;
	text-align:center;	
	margin-top:20px;
	animation: main 600ms ease-out;
}
.nav-content-socials
{	
	display:flex;
	flex-flow:row nowrap;
	align-items:center;
	max-width:800px;
	margin:auto;
	padding:0 15px;
	margin-top:5px;
	justify-content: center;
	animation: main 600ms ease-out;
}
.nav-content-socials a img
{	
	margin:10px;
	padding:2px;
	width:30px;
	transform:scale(1.0);
	transition:0.2s;
	-webkit-filter: drop-shadow(0px 0px 5px #000000);
  	filter: drop-shadow(0px 0px 5px #000000);
}
.nav-content-socials a img:hover
{	
	transform:scale(1.3);
	filter: drop-shadow(0px 0px 6px #adadad);
}

/*> Navigation content-text block*/
.nav-content ul li
{
	list-style:none;
	display:inline-block;
	padding:12px 24px;
	position:relative;
	text-shadow: 2px 2px 8px black, -2px -2px 8px black, 4px 4px 8px black, -4px -4px 8px black;
	transition:0.2s;
}
.nav-content ul li:hover
{
	text-shadow: 2px 2px 4px #adadad, -2px -2px 4px #adadad, 4px 4px 8px #adadad, -4px -4px 8px #adadad;
}
/*> Navigation content-text default style*/
.nav-content ul li a
{
	color:#fff;
	text-decoration:none;
	font-size:16px;
}
/*> Navigation content-text OnNeutral*/
.nav-content ul li:after
{
	content: '';
	width:0%;
	height:1px;
	background: #fff;
	display:block;
	margin:auto;
	transition: 0.2s;
}
/*> Navigation content-text OnHover*/
.nav-content ul li:hover:after
{
	width:100%;
}

/*> Mobile adjustment for navigation content*/
@media(max-width: 800px)
{
	.nav-content ul li
	{
		padding:12px 12px;
	}
}


.nav-dropdown 
{
  	position: relative;
  	display: inline-block;
}
.nav-dropdown-content 
{
	display:block;
  	position: absolute;
  	background-color: rgba(0,0,0,0.9);
  	min-width:200px;
  	z-index: 9999;
	transform-origin: top center;
	animation: growUp 50ms ease-out forwards;
}
.nav-dropdown:hover .nav-dropdown-content 
{
	animation: growDown 250ms ease-out forwards;
}

@keyframes growDown 
{
    0% { transform: scaleY(0) }
    100% { transform: scaleY(1) }
}

@keyframes growUp
{
    0% { transform: scaleY(1) }
    100% { transform: scaleY(0) }
}

/*
_______________________________________________________________________________


                    PLAY NOW/ GAME PRODUCTS
					
			Latest product showcase on main page, Product pages (PlayNow)


_______________________________________________________________________________
*/


/*> PlayNow full block*/
.nav-playNow
{	
	animation: main 600ms ease-out;
	color:#fff;
  	position:absolute; 
  	left:0; 
  	right:0; 
  	margin-left:auto; 
  	margin-right:auto; 
  	width:100%;
	top:35%;
	text-align:center;	
	padding:auto;
}
/*> PlayNow on gamepage (centrical)*/
.nav-playNow-gamepage
{
	position:relative;
	margin:5px;
	text-align:center;	
	justify-content: space-evenly;
	flex-flow:row wrap;
	padding:5px;
	display:flex;
}
/*> PlayNow on gamepage (centrical) - HYPERLINK*/
a.nav-playNow-gamepage
{	
	min-width:250px;
	transform:scale(1.0);
	transition:0.2s;
}

a.nav-playNow-gamepage:hover
{
	transform:scale(1.2);
}
/*> PlayNow list content*/
.nav-playNow-content
{
	margin-top:20px;
	margin-bottom:50px;
	display:flex;
	flex-flow:row nowrap;
	align-items:center;
	justify-content:space-evenly;
}
/*> PlayNow store logos (perlogo)*/
.nav-playNow-logo
{
	margin:auto;
	padding:20px;
	max-width:240px;
	transform:scale(0);
	animation: pop 600ms 500ms ease;
	animation-fill-mode:forwards;
}
/*> Mobile adjustment for 'PlayNow' elements*/
@media(max-width: 800px)
{
	.nav-playNow
	{
		width: 100%;
		margin:auto;
	}
	.nav-playNow-content
	{
		flex-flow:column wrap;
	}
	.nav-playNow-logo
	{
		padding-top:20px;
		width:200px;
	}
	.nav-playNow-gamepage
	{
		width: 50%;
		margin:auto;
		padding-top:20px;
		top:65%;
	}
}
/*> PlayNow title*/
.nav-playNow h1
{
	font-size:70px;
	font-weight:400;	
	animation: pop 800ms ease-out;
}
/*> PlayNow paragraph*/
.nav-playNow p
{
	font-size:14px;
	font-weight:200;
	margin:0 10%;
	transform:scale(0);
	animation: pop 800ms 200ms ease-out;
	animation-fill-mode:forwards;
}
/*> PlayNow 'PLAY NOW' button*/
.nav-playNow-btn
{
	margin:20px 0;
	display:inline-block;
	text-decoration:none;
	color:#fff;
	border: 1px solid #fff;
	padding: 12px 34px;
	font-size: 24px;	
	transition:0.2s;
	background-color:transparent;
	animation: pop 600ms ease;
}
/*> PlayNow 'PLAY NOW' hover*/
.nav-playNow-btn:hover
{
	color:#000;
	background-color:#fff;	
}


/*
_______________________________________________________________________________


                    CONTENT GAME (cntgm) CATEGORY
					
			Content per-game product, full game-product page


_______________________________________________________________________________
*/

/*> Main content body structure*/
.cntgm
{	
	width: 100%;
	position: relative;
	display: flex;	
	align-items: center;
	flex:1;
	flex-flow:row nowrap;
	max-width:300px;
	margin:auto;
	margin-top:5px;
	justify-content: space-evenly;
}
/*> Content body text*/
.cntgm-txt
{
	margin:auto;
	color:#fff;
	text-align:center;
	text-decoration:none;
	font-size:35px;
	font-weight:600;
}
.cntgm-txt a
{
	color:white;
	transition:0.2s;
}
.cntgm-txt a:hover
{
	color:#9e9e9e;
}
/*> Content body title*/
.cntgm-txt h1
{
	font-size:70px;
	font-weight:400;	
	margin:0 10%;
	padding-bottom:20px;
	white-space:nowrap;
	text-align:left;
}
/*> Content body subtitle*/
.cntgm-txt h2
{
	white-space:nowrap;
	text-align:left;
	font-size:20px;
	font-weight:300;
	margin:0 0px;
	min-width:200px;
}
/*> Content body paragraph*/
.cntgm-txt p
{
	text-align:left;
	font-size:14px;
	font-weight:100;
	margin:0 25%;
	padding-top:20px;
}
/*> Content body images*/
.cntgm-shots
{
	margin:auto;
	padding:50px 30px;
	display:flex;
	flex-flow:row nowrap;
	align-items:center;
	justify-content: space-evenly;
}
/*> Content body single-image*/
.cntgm-shots img
{
	margin:5px;
	min-width:30%;
	max-width:auto;
}
/*> Content body video wrapper*/
.video-container
{
	margin:auto;
	transform:scale(1.0);
}

/*> Mobile adjustment for game-body title*/
@media(max-width: 800px)
{
	.cntgm-txt h1
	{
		font-size:45px;
	}
	.cntgm-txt h2
	{
		font-size:13px;
		min-width:150px;
	}
	.cntgm-shots
	{
		flex-flow:column nowrap;
		padding:20px 10px;
	}
	.blackPage
	{
		height:2400px;
	}
	.cntgm-shots img
	{
		margin:5px;
		min-width:30%;
		max-width:80%;
	}
	.video-container
	{
		height:0px;
	    transform:scale(0);
	}
}




/*
_______________________________________________________________________________


                    CONTENT IN GENERAL + PRODUCTS PAGE
					
			Content product, full products page


_______________________________________________________________________________
*/

/*> Body main structure*/
.cnt
{	
	min-height: 70vh;
	width: 100%;
	background-position: center;
	background-size: cover;
	position: relative;
	display: flex;	
	justify-content: space-between;
	align-items: center;
}
/*> Body content structure*/
.cnt-txt
{
	margin-right: 20%;
	margin-left:80px;
	color:#fff;
	text-decoration:none;
	font-size:35px;
	font-weight:600;
}
.cnt-txt a
{
	color:white;
	transition:0.2s;
}
.cnt-txt a:hover
{
	color:#9e9e9e;
}

/*-------------BODY PRODUCTS-------------*/

.products
{
	text-align:center;
	margin:auto;
	vertical-align:middle;
}
.products-title-0
{
    z-index:100;
	padding: 10px 0px;
}
.products-title-1
{
    z-index:200;
	padding: 10px 0px;
}
.products-title-2
{
    z-index:300;
	padding: 10px 0px;
}
.products-title-3
{
    z-index:400;
	padding: 10px 0px;
}
.products-classics
{
	display:flex;
  	flex-wrap:nowrap;
  	content-align:center;
	justify-content:space-around;
	margin:auto;
}
.products-classics-img
{
	min-height:50px;
	min-width:50px;
}
a.products-classics-txt
{	
 	-o-transition:.5s;
  	-ms-transition:.5s;
  	-moz-transition:.5s;
  	-webkit-transition:.5s;
	text-align:center;
	vertical-align:middle;
	margin: 20% 60px;
	display:block;
	color:#fff;
	font-size:35px;
	text-decoration:none;
	transition:0.2s;
}

a.products-classics-txt:hover
{
	color:#ffffff60;
	transform:scale(1.2);
}







/*> Body title structure*/
.cnt-txt h1
{
	font-size:70px;
	font-weight:400;	
	margin:0 10%;
	white-space:nowrap;
	text-align:left;
}
/*> Body paragraph structure*/
.cnt-txt p
{
	font-size:14px;
	font-weight:200;
	margin:0 10% 1% 10%;
}

/*> Mobile adjustment for body title*/
@media(max-width: 800px)
{
	.cnt-txt
	{
		margin-top:50px;
		margin-right:10%;
		margin-left:10%;
		font-size:40px;
	}
	.products
	{
		text-align:center;
		margin:auto;
	}
	a.products-classics-txt
	{
		font-size:20px;
		margin:20px 5%;
	}
	.cnt-txt h1
	{
		font-size:40px;
	}
	.cnt-txt p
	{
		font-size:11px;
	}
}