*{box-sizing:border-box;}
html,body{width:100%;min-height:100vh; font-size:16px;margin:0;padding:0;color:#000;background:#F2F2F2;}
html{text-rendering:optimizeLegibility !important;}
 
/*FONTS*/
body{font-family: 'Oswald', sans-serif; letter-spacing:0.1rem;}

@font-face {
	font-family: 'German Beauty';
	src: url(../fonts/German-Beauty.ttf);
}
@font-face {
	font-family: SingleSleeve;
	src: url(../fonts/sing_14l.ttf);
}

/*GENERAL RULES*/
h1{margin:0;}
h2{margin-top:0px;}
h3{}
ul{list-style-type:none;margin:0;padding:0}
ul.l{text-align:left; list-style-type: disc; margin-left: 40px;}
a{color:#C59952; text-decoration:none; cursor:pointer;}
a:hover{ color:rgb(235, 148, 10);}
.hidden{display:none;opacity:0}
#tainomain{min-height:calc(100vh - 134px - 100px);padding:50px 0;}
.goback{float:left; color:#C59952;padding:0.5rem 1rem; border-radius:4px; box-shadow: 0px 0px 5px rgba(13, 18, 25,0.8);background:rgb(13, 18, 25); cursor:pointer;}
.goback:hover, .goback:active{color:#fff;}
.center{text-align:center;}
.canvas{position:absolute;left:0px;top:0px;background:transparent;}
img,iframe{max-width:100%;}

/*TEMPLATE*/
header{position:relative; z-index:2; width:100%;height:134px;background:#262626; text-align:center;}
header.banner{height:calc(100px + 50px);background:#0084C5;}
header.banner img{height:100px;}
header h1{color:#EA5447;text-align:center;font-size:4rem;height:94px;font-family:German Beauty;-webkit-text-stroke:0.1px #FFF;padding-top:10px;}
header h1 a{color:inherit;-webkit-text-stroke:inherit;}
header h1 a:hover{color:inherit;-webkit-text-stroke:inherit;}
header nav{width:96%; max-width:1200px; margin:0 auto;border-top:1px solid #EA5447;padding-top:5px;}
header nav a{display:inline-block;vertical-align:top;padding:4px 10px 8px 10px;text-align:center;color:#00B5ED;font-weight:bold;font-family:German Beauty;font-size:1.3rem;}
header nav a:hover,header nav a.on{background:#EA5447;color:#FFF;margin-top:-5px;padding-top:7px;}
header nav a .short,header nav a .short2{display:none;}
header nav .submenu{position:relative;display:inline-block;vertical-align:top;padding:4px 10px 8px 10px;text-align:center;color:#00B5ED;font-weight:bold;font-family:German Beauty;font-size:1.3rem;}
header nav .submenu > span{color:#FFF;}
header nav .submenu .short,header nav .submenu .short2{display:none;}
header nav .submenu .options{display:none;position:absolute;left:0px;top:calc(100% - 1px);width:400px;margin-left:-100px}
header nav .submenu:hover > span{color:#EA5447;}
header nav .submenu:hover .options{display:block;}
header nav .submenu .options a{display:block;background:#262626;padding-top:10px;padding-bottom:10px;}
header nav .submenu:hover .options a,header nav .submenu .options a.on{margin-top:unset;padding-top:10px;}
header.banner nav a{color:#000;}
footer{width:100%; background:#262626; color:#fff; text-align:center; height:100px; padding:20px;}
footer a{color:#00B5ED;}
footer a:hover{color:#EA5447;}

/*PAGES*/
section{margin:0 auto;margin-bottom:50px;max-width:1024px;border:1px solid #E5E5E5;background:#FFF;padding:25px;}
section:last-child{margin-bottom:0px;}
section h1{font-size:2rem;margin-bottom:25px;font-family:German Beauty;}

.screenshots .block{display:inline-block;vertical-align:top;width:calc(50% - 25px/2);height:250px;margin:0 25px 25px 0;border:1px solid #EA5447;background-size:cover;background-position:center;position:relative;text-align:center;}
.screenshots:not(.three) .block:nth-child(even){margin-right:0px;}
.screenshots .block .alt-color{color:#FFF;background:rgba(0,0,0, 0.6)}
.screenshots .block .price{position:absolute;right:0px;bottom:0px;font-weight:bold;padding:5px;}
.screenshots .block .platform{position:absolute;left:0px;bottom:0px;font-weight:bold;padding:5px;}
.screenshots .block .title{display:inline-block;width:100%;text-align:center;font-weight:bold;padding:5px;font-size:32px;color:#FFF;font-family:German Beauty;-webkit-text-stroke:0.01px #00B5ED;}
.screenshots .block .title.short{font-size:22px;}
.screenshots.three .block{width:calc(33% - 14px);height:200px;}
.screenshots.three .block:nth-child(3n){margin-right:0px;}

.split > *{display:inline-block;vertical-align:top;width:50%;padding-right:15px;text-align:center;}
.split > *:last-child{padding-left:15px;padding-right:0px;}


.imageview_bg{position:fixed;left:0px;top:0px;width:100%;height:100%;background:#000;opacity:0.5;z-index:1000;cursor:pointer;}
.imageview{position:fixed;left:50%;top:50%;border:1px solid #666;z-index:1001;}
.imageview_close{position:fixed;left:50%;top:50%;color:red;font-size:24px;font-weight:bold;text-align:right;z-index:1002;pointer-events:none;}

#overlayscreen_bg{position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:100;}
#overlayscreen_bg img{position:absolute;left:0px;top:0px;width:1280px;height:720px;}
#overlayscreen{position:absolute;left:0px;top:0px;width:1280px;height:100%;color:#FFF;z-index:101;}
#overlayscreen div{cursor:pointer;}



@media screen and (max-width:960px){
	header{height:110px;}
	header h1{height:70px;font-size:3rem;padding-top:12px;}
	header nav a .long{display:none;}
	header nav a .short{display:inline-block;}
	header nav .submenu .long{display:none;}
	header nav .submenu .short{display:inline-block;}
	.screenshots .block{height:200px;}
	iframe{max-height:350px;}
	
	.screenshots.three .block{width:calc(50% - 25px/2);}
	.screenshots.three .block:nth-child(3n){margin-right:25px;}
	.screenshots.three .block:nth-child(2n){margin-right:0px;}
	
	.split > *{display:block;width:100%;padding-left:0px !important;padding-right:0px !important;}
	.split > *:last-child{margin-top:25px;}
}
@media screen and (max-width:640px){
	header h1{font-size:2rem;padding-top:24px;}
	header nav a .short{display:none;}
	header nav a .short2{display:inline-block;}
	header nav .submenu .short{display:none;}
	header nav .submenu .short2{display:inline-block;}
	.screenshots .block{display:block !important;width:100% !important;height:250px !important;margin-right:0px !important;}
	iframe{max-height:250px;}
}