@charset "utf-8";
/* CSS Document */

@viewport {
  width: device-width ;
  zoom: 1.0 ;
}

@font-face {
    font-family: nexa;
	src: url("NexaLight.otf");
}
@font-face {
    font-family: nexabold;
	src: url("NexaBold.otf");
}

html {
	background-image: url(images/Background_Top_Transparent.png);  /*, url(images/Background_Bottom.png); */
	background-position: top left/*, bottom*/;
	background-repeat: no-repeat/*, no-repeat*/;
	background-size: 100%/*,, contain*/;
	background-color: #101a2f;
}

a { text-decoration: none !important;}

a:link {color: #aaa}

a:visited {color: #aaa}

a:hover {color: #fff} 

body {
	font-family: nexa;
	color: #d5d5d5;
	text-align: left;
	text-align:justify;
	font-size: large;
	font-weight:light;
	line-height: 25px;
	margin: 0px;
	padding: 0px;

}

ul {
	padding-left: 80px;
	line-height: 35px;
	list-style-type: square;
	display: inline-block;
}

li {
	text-align: left;
	padding-left: 20px;

}

.main {
	max-width: 100% ;
	margin-left: auto; margin-right: auto;
}

/* Maim Menu */
.header{
	position: relative;
    top: 38px;
    left: 0;
	width: 100%;
	height: 250px;
	z-index: 50;
}

.header_blog{
	position: relative;
    top: 38px;
    left: 0;
	width: 100%;
	height: 200px;
	z-index: 50;
	
	background-image: url(images/Background_Top_Transparent.png);  /*, url(images/Background_Bottom.png); */
	background-position: top left/*, bottom*/;
	background-repeat: no-repeat/*, no-repeat*/;
	background-size: 100%/*,, contain*/;
	background-color: #101a2f;
}


.header_center {
	width: 900px;
	max-width: 100% ;
	margin: 0 auto;
	text-align: center;
}

.header_title {
	width:440px;
	height:220px;
	left:-20px;
	background-image: url(images/Monolisk_Logo.png);
	background-repeat: no-repeat; 
	background-size: contain;
	position: relative;
	float: left;
}

.header_menu {
	font-family: nexa; 
	color: #aaa !important;
	width: 300px;
	top: 85px;
	left:-20px;
	position: relative;
	float: left;
	font-size: 26px;
}

a.header_menu_unselected, a.header_menu_scrolled_unselected {
	color: #aaa !important;
}

a.header_menu_selected {
	color: #FFF !important;
}

.header_scrolled{
	position: fixed;
    top: 38px;
    left: 0;
	width: 100%;
	height: 40px;
	z-index: 100;
	background: rgba(0,0,0,.8);
	margin: 0 auto;
	display: inline-block !important;

}

.header_menu_scrolled {
	font-family: nexa;
	color: #aaa !important;
	width: 100%;
	top: 10px;
	position: relative;
	text-align:center;
	font-size: 22px;
	display: inline !important;
}

.object_hidden, .header_hidden, .header_menu_hidden {
	display: none;
}

.content {
	width: 900px;
	max-width: 100% ;
	margin-left: auto; margin-right: auto;
}

.text {
	width: 900px;
	max-width: 95% ;
	padding-top: 50px;
	text-align: center;
	margin: 0 auto;
}

.text_left {
	width: 900px;
	max-width: 100% ;
	padding-top: 50px;
	text-align: left;
}

.category {padding-left: 20px;}

.space {
 	height: 60px;
}

#news{
	width: 100%;
	padding-top: 20px;
	text-align: center;
	background-image: url(images/news_bg.png);
	background-position: top left;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.newspost{
	width: 240px;
	padding: 20px;
	display: inline-block;
	vertical-align:top;
	text-align: left;
}

.newsheadline{
	font-family: nexabold;
	font-size: 20px;
}
.newsdate{
	font-size: 16px;
}

a.newsheadline{
 color: #eee;
}

a.newsheadline:hover {color: #bbb} 

img.lastnews.wp-post-image{
	width: 240px;
	height: 135px;
}

@media screen and (max-width: 900px) {
.newspost{
	width: 200px;
	padding: 15px;
}

.newsheadline{
	font-size: 18px;
}
.newsdate{
	font-size: 14px;
}

img.lastnews.wp-post-image{
	width: 200px;
	height: 112px;
}	
}

@media screen and (max-width:800px) {
.header, .header_blog{
	height: 160px;
}
.header_title {
	width:330px;
	height:143px;
	left:-10px;
}
.header_menu {
	top: 58px;
	left:-25px;
	width: 200px;
	position: relative;
	float: left;
	font-size: 22px;
}

.header_scrolled{
	height: 40px;
	display: inline-block !important;
}

.header_menu_scrolled {
	width: 100%;
	top: 10px;
	display: inline-block !important;
}

.newspost{
	width: 160px;
	padding: 10px;
}

.newsheadline{
	font-size: 16px;
}
.newsdate{
	font-size: 14px;
}

img.lastnews.wp-post-image{
	width: 160px;
	height: 90px;
}
}


@media screen and (max-width: 640px) {
.header, .header_blog{
	height: 120px;
}
.header_title {
	width:220px;
	height:100px;
	left:-5px;
}
.header_menu {
	top: 36px;
	left:-5px;
	width: 160px;
	position: relative;
	float: left;
	font-size: 20px;
}
.header_scrolled{
	height: 40px;
	display: inline-block !important;
}
.header_menu_scrolled {
	width: 100%;
	top: 10px;
	display: inline-block !important;
}
.screenshot{
	width: 210px; 
	height: 118px;
	border: solid 1px #7f8191;
	position: relative;
}
.card {
 width: 200px;	
}

#news{
	padding-top: 10px;
}

.newspost{
	width: 120px;
	padding: 10px;
}

.newsheadline{
	font-size: 12px;
}
.newsdate{
	font-size: 12px;
}

img.lastnews.wp-post-image{
	width: 120px;
	height: 67px;
}
}

@media screen and (max-width:446px) {
.header, .header_blog{
	height: 100px;
}
.header_title {
	width:150px;
	height:100px;
	left:-5px;
}
.header_menu {
	top: 20px;
	left:-5px;
	width: 160px;
	position: relative;
	float: left;
	font-size: 16px;
}
.header_scrolled{
	height: 40px;
	display: inline-block;
}
.header_menu_scrolled {
	width: 100%;
	top: 10px;
	display: inline-block;
}
.screenshot{
    width: 110px; 
	height: 59px;
 }
 .card {
 width: 150px;	
}

.social_fb, .social_tw, .social_discord, .social_reddit, .social_forum, .social_youtube, .social_email, .social_instagram {
	width: 25px !important;
	height: 25px !important;
	padding-left: 15px !important;
}

.newspost{
	width: 200px;
	padding: 15px;
}

.newsheadline{
	font-size: 18px;
}
.newsdate{
	font-size: 14px;
}

img.lastnews.wp-post-image{
	width: 200px;
	height: 112px;
}
}

@media screen and (max-width:350px) {
.header, .header_blog{
	height: 80px;
}
.header_title {
	display: none;
}
.header_menu {
	top: 20px;
	left:40px;
	width: 160px;
	position: relative;
	float: left;
	font-size: 16px;
}
.header_scrolled{
	height: 40px;
	display: inline-block;
}
.header_menu_scrolled {
	width: 100%;
	top: 10px;
	display: inline-block;
}

.social_fb, .social_tw, .social_discord, .social_reddit, .social_forum, .social_youtube, .social_email, .social_instagram {
	width: 20px !important;
	height: 20px !important;
	padding-left: 10px !important;
}
}

 #screens{
	padding-top: 50px;
	width: 900px;
	max-width: 100%;
	margin: 0 auto;
	text-align:center;
}

.picture {
 width: 900px;	
 max-width: 100%;
 padding-bottom: 20px;
}

.realm {
 width: 160px;	
 padding-bottom: 10px;
}

.card_gallery {
 text-align:center;
  max-width: 100%;
}

.card_detail {
 text-align:center;
 max-width: 100%;
}

.video-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;

}
.video-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

#trickster{
	padding-top: 50px;
	width: 900px;
	max-width: 100%;
	height: 120px;
	text-align:center;
}

#footer{

	font-size: medium;
	position:relative;
	text-align:right;
	right: 30px;
}

/* TOP bar */
#tricksterarts{
	position: fixed;
    top: 0;
    left: 0;
	width: 100%;
	height: 38px;
	z-index: 100;
	background-color: #1a1a1a;
	margin: 0 auto;
}
#tricksterartsmain {
	width: 900px;
	max-width: 100% ;
	margin-left: auto; margin-right: auto;
	text-align:right;
	position:relative;

}

#menu {
	top: 3px;
	position:relative;
	text-align:right;
	float: right;
	color: #AAA;
	font-family: "century gothic", Arial, sans-serif;
}

.social_fb {
	background-image: url(social/facebook.png); background-repeat: no-repeat; background-size:contain;
	width: 30px; height: 30px;
	padding-left: 15px; box-sizing: content-box !important; display: inline-block;
}
.social_tw {
	background-image: url(social/twitter.png); background-repeat: no-repeat; background-size:contain;
	width: 30px; height: 30px;	
	padding-left: 15px; box-sizing: content-box !important; display: inline-block;
}
.social_discord {
	background-image: url(social/discord.png); background-repeat: no-repeat; background-size:contain;
	width: 30px; height: 30px;	
	padding-left: 15px; box-sizing: content-box !important; display: inline-block;
}
.social_reddit {
	background-image: url(social/reddit.png); background-repeat: no-repeat; background-size:contain;
	width: 30px; height: 30px;	
	padding-left: 15px; box-sizing: content-box !important; display: inline-block;
}
.social_forum {
	background-image: url(social/forum.png); background-repeat: no-repeat; background-size:contain;
	width: 30px; height: 30px;	
	padding-left: 15px; box-sizing: content-box !important; display: inline-block;
}
.social_youtube {
	background-image: url(social/youtube.png); background-repeat: no-repeat; background-size:contain;
	width: 30px; height: 30px;	
	padding-left: 15px; box-sizing: content-box !important; display: inline-block;
}
.social_email {
	background-image: url(social/email.png); background-repeat: no-repeat; background-size:contain;
	width: 30px; height: 30px;	
	padding-left: 15px; box-sizing: content-box !important; display: inline-block;
}

.social_instagram {
	background-image: url(social/instagram.png); background-repeat: no-repeat; background-size:contain;
	width: 30px; height: 30px;	
	padding-left: 15px; box-sizing: content-box !important; display: inline-block;
}


.button_long{
	background-image: url(images/Button_Long_Monolisk.png);
	background-repeat: no-repeat;
	width: 332px;
	height: 95px;
	margin:auto;
	text-align:center;
	font-size: 150%;
	padding-top: 35px;
}

#appstore{
	background-image: url(images/appstore.png);
	background-repeat: no-repeat;
	width: 200px;
	height: 59px;
	display: inline-block;
	padding: 10px;
}
#googleplay{
	background-image: url(images/google_play.png);
	background-repeat: no-repeat;
	width: 200px;
	height: 59px;
	display: inline-block;
	padding: 10px;
}
#steam{
	background-image: url(images/steam.png);
	background-repeat: no-repeat;
	width: 200px;
	height: 59px;
	display: inline-block;
	padding: 10px;
}

/* Subscription form */
input { background: none; border: solid 1px #7f8191; color: inherit; font-family: inherit; border-radius: 3px; font-size: 16px;}
/* form { font-size: 90%; } */
input[type="text"], input[type="button"] { margin: 0 0 0 8px; background-color: rgba(200, 200, 200, 0.075); }
input[type="submit"]:hover, input[type="button"]:hover { background-color: rgba(200, 200, 200, 0.3); cursor: pointer; }
td { padding-bottom: 5px; }

@media screen and (min-width:600px) {
#subscribe { padding-left:70px; }
input { padding: 5px 20px; }
input[type="text"], input[type="button"] { width: 250px; padding: 5px 10px;}
#menu {	right: 20px;}

}

@media screen and (max-width:599px) {
input { padding: 5px 10px; }
input[type="text"], input[type="button"] { width: 150px; padding: 5px 10px;}
#menu {	right: 8px;}
}