/* Author: Armstrong Chiu
   URL: https://thewebdesignerpro.com/    */

@font-face {
    font-family:'futura_icg_lightregular';
    src: url('../futura_icg_light-webfont.eot');
    src: url('../futura_icg_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../futura_icg_light-webfont.woff2') format('woff2'),
         url('../futura_icg_light-webfont.woff') format('woff'),
         url('../futura_icg_light-webfont.ttf') format('truetype'),
         url('../futura_icg_light-webfont.svg#futura_icg_lightregular') format('svg');
    font-weight:normal;
    font-style:normal;
}

html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
}
html, body, header, footer, #services, #portfolio, #contact {
	box-sizing:border-box;
}
body {
	position:relative;
}
body, header, nav, nav ul, footer, #kontainer, .frt {
	margin:0; 
}
body, #kontainer { 
	width:100%; 
	height:100%; 
	background:#000; 
	overflow:hidden;  
}

#kontainer {
	display: block; 
	position: relative;
	opacity: 1;
}

#kontainer, header, footer { 
	cursor:-moz-grab; 
	cursor:-webkit-grab; 
	cursor:grab; 
}

canvas {
	display: block;
	width: 100%;
	height: 100%
}

a, a:hover, #logo h1:hover, .frt img:hover, #content3 input[type="submit"]:hover, .folist img:hover {
	-webkit-transition:all 0.4s ease-out; 
	transition:all 0.4s ease-out; 
	outline:0;
}

header, nav ul li a, footer {
	display:block;
}

nav ul, #services, #portfolio, #contact {
	display:none;
	opacity:0; 
	filter:alpha(opacity=0); 	
}
	
header, footer, #chromebadge {
	padding:20px;
}
header, footer {
	position:absolute;
	left:0;
	width:100%;
	z-index:10;
}

header { 
	top: 0;  
}

footer {
	bottom:0; 
	padding-bottom:10px !important;
}

#logo {
	float:left;
	width:60%;
}
#logo a, #logo a:link, #logo a:active, #logo a:visited, #logo a h1 { 
	font:normal 1.5vw/1.5vw 'futura_icg_lightregular', arial; 
	text-decoration:none; 
	color:rgba(255,255,255,0.5); 
}
#logo h1 {
    margin: 0;
    padding: 0;
    clear: none;
}

nav {
	float:right;
	width:auto;
	cursor:pointer;
}
nav ul {
	position:absolute;
	right:20px;
    margin-top:10px;
	padding:0;
	border-top:2px dotted rgba(255,255,255,0.15); 
	list-style:none;
}
nav ul li {
	padding-top:10px;
	text-align:right;
}
nav ul li a {
	display:block;
	font:normal 22px/1.3em 'futura_icg_lightregular', arial; 
	text-decoration:none;
	color:rgba(255,255,255,0.4); 
}
nav ul li a:hover {
	color:rgba(255,255,255,1);
}
nav img {
	outline:0;
}

footer, footer a, footer a:link, footer a:active, footer a:visited {
	font-size:10px;
	font:normal 0.7vw/24px 'futura_icg_lightregular', arial; 
	text-decoration:none; 
	color:rgba(255,255,255,0.4);
	text-transform:uppercase;
}

#logo a:hover, #logo a h1:hover, footer a:hover { 
	color:#fff; 
}

.arr {
	display:inline;
}

.frt {
	float:right;
	width:50%;
    list-style:none;
}
.frt li {
	float:right;
	position:relative;
	padding-left:10px;
}
.frt img {
	width:24px;
	height:auto;
	background:transparent;
	border-radius: 50%;
}
.frt img:hover {
	background:#2266aa;
}    

#services, #portfolio, #contact {
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	margin:auto;
	padding:3% 0 1%;
	width:96%;
	height:94%;
	text-align:center;
	color:#b2b2b2;
	background:rgba(255,255,255,0.1);
	background:rgba(0,0,0,0.8);
	border:2px solid #222;
	overflow:hidden;
	z-index:11;
}
#contact {
	max-width:640px;
	max-height:640px;
}
#services h2, #portfolio h2, #contact h2 {
	font-size:32px;
	font:normal 2.2vw/1.8em 'futura_icg_lightregular', arial; 
	text-transform:uppercase;
}
#portfolio h3 {
	font-size:2vw;
}
#content, #content2 {
	margin:auto;
	padding:0 3%;
	width:99.7%;
	height:100%;
	font-size:16px;
	font:normal 1.6vw/1.7em 'futura_icg_lightregular', arial; 
	overflow:auto;
}	
#content3 {
	margin:auto;
	width:99.7%;
	height:100%;
	overflow:auto;
}
#x1, #x2, #x3 {
	position:absolute;
	top:5px;
	right:5px;
	margin:0;
	padding:3px 5px 8px;
	font:40px/0.5em 'futura_icg_lightregular', arial; 
	text-decoration: none;
	color:#a3a3a3;
	border:1px solid #aaa;
}
#x1:hover, #x2:hover, #x3:hover {
	color:#555;
	border-color:#555;
}

#content3 input, #content3 textarea {
    padding:8px 10px;
	width:100%;
	max-width:280px;
	height:auto;
	font:18px/18px 'futura_icg_lightregular', arial; 
	color:#fff;
	background:none repeat scroll 0 0 #111519;
    border:1px solid #113355;
    border-radius:0;
	z-index:100;
}
#content3 input[type="submit"] {
	width:160px;
    height:auto;
	color:#bbb;
    background:#103050;
    padding:12px 0 10px;
    border-bottom:3px solid #112233;
    border-radius:2px;
}
#content3 input[type="submit"]:hover {
	color:#fff;
    background:#123456;
	border-bottom:2px solid #102030;
}

.folist img {
	display:inline-block;
	margin:0;
	padding:0 5px;
	width:30%;
	height:auto;
	max-width:173px;
	min-width:90px;
	outline:0;
}
.folist img:hover {
	border:2px solid #567;
}

@media screen and (max-width: 1920px) {
	nav ul li a {
		font-size:20px;
	}
	.frt img {
		width:23px;
	}	
}
@media screen and (max-width: 1440px) {
	nav ul li a {
		font-size:19px;
	}
	.frt img {
		width:22px;
	}	
}
@media screen and (max-width: 1280px) {
	header, footer, #chromebadge {
		padding:15px;	
	}
	#logo a, #logo a:link, #logo a:active, #logo a:visited, #logo a h1 {
		font-size:2.0vw;
	}	
	nav ul {
		right:15px;
	}
	nav ul li a {
		font-size:18px;
	}	
	#services h2, #portfolio h2, #contact h2 {
		font-size:3vw;
	}
	#portfolio h3 {
		font-size:2.8vw;
	}
	footer, footer a, footer a:link, footer a:active, footer a:visited {
		font-size:1vw;
	}
	.frt img {
		width:20px;
	}	
}
@media screen and (max-width: 980px) {
	#logo a, #logo a:link, #logo a:active, #logo a:visited, #logo a h1 {
		font-size:2.4vw;
	}	
	nav ul li a {
		font-size:17px;
	}
	.frt img {
		width:18px;
	}	
	#x1, #x2, #x3 {	
		padding:2.25px 3.75px 6px;
		font-size:30px;
	}
}
@media screen and (max-width: 640px) {
	header, footer, #chromebadge {
		padding:12px;	
	}
	#logo a, #logo a:link, #logo a:active, #logo a:visited, #logo a h1 {
		font-size:2.8vw;
	}
	nav ul {
		right:12px;
	}	
	nav ul li a {
		font-size:16px;
	}
	#services h2, #portfolio h2, #contact h2 {
		font-size:3.8vw;
	}
	#portfolio h3 {
		font-size:3.6vw;
	}	
	footer, footer a, footer a:link, footer a:active, footer a:visited {
		font-size:1.5vw;
	}	
	.frt img {
		width:16px;
	}		
}
@media screen and (max-width: 480px) {
	#logo a, #logo a:link, #logo a:active, #logo a:visited, #logo a h1 {
		font-size:3.3vw;
	}
	nav ul li a {
		font-size:15px;
	}
	footer, footer a, footer a:link, footer a:active, footer a:visited {
		font-size:9px;
	}	
	.arr {
		display:none;
	}		
	.frt img {
		width:14px;
	}			
}
@media screen and (max-width: 360px) {
	header, footer, #chromebadge {
		padding:10px;	
	}
	#logo a, #logo a:link, #logo a:active, #logo a:visited, #logo a h1 {
		font-size:3.8vw;
	}
	nav ul {
		right:10px;
	}	
	.frt img {
		width:12px;
	}		
	#x1, #x2, #x3 {	
		padding:1.5px 2.5px 4px;
		font-size:20px;
	}	
}

@media screen and (orientation: portrait) {
	#services h2, #portfolio h2, #contact h2 {
		font-size:4vw;
	}	
	#portfolio h3 {
		font-size:3.8vw;
	}
	#content, #content2 {	
		font-size:2.2vw;
	}
}
		
audio,
canvas,
progress,
video {
	display:inline-block;
	vertical-align:baseline;
}

a {
	background-color:transparent;
}

a:active,
a:hover {
	outline:0;
}

abbr[title] {
	border-bottom:1px dotted;
}

b, strong {
	font-weight:bold;
}

img {
	border:0;
}

code, pre {
	font-family:monospace, monospace;
	font-size:1em;
}

button, input, textarea {
	color:inherit;
	font:inherit;
	margin:0;
}

button {
	overflow:visible;
	text-transform:none;
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
	-webkit-appearance:button;
	cursor:pointer;
}

button[disabled], html input[disabled] {
	cursor:default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
	border:0;
	padding:0;
}

h2, h3 {
	clear:both;
}

p {
	margin-bottom:1.3em;
}

i {
	font-style:italic;
}

*,
*:before,
*:after { 
	box-sizing:inherit;
}

hr {
	background-color:#ccc;
	border:0;
	height:1px;
	margin-bottom:1.5em;
	box-sizing:content-box;
}

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

.alignleft {
	display:inline;
	float:left;
	margin-right:1.5em;
}
.alignright {
	display:inline;
	float:right;
	margin-left:1.5em;
}
.aligncenter {
	clear:both;
	display:block;
	margin-left:auto;
	margin-right:auto;
}

.clear:before,
.clear:after {
	content:"";
	display:table;
}
.clear:after {
	clear:both;
}

/** Light ver  **/
body.lite, body.lite #kontainer { 
	background:#d1eaf4; 
}	
#logo a.lite, #logo a.lite:link, #logo a.lite:active, #logo a.lite:visited, #logo a.lite h1, footer.lite, footer.lite a, footer.lite a:link, footer.lite a:active, footer.lite a:visited, nav.lite ul li a {
	color:rgba(0,0,0,0.45); 
}
#logo a.lite:hover, #logo a.lite h1:hover, footer.lite a:hover, nav.lite ul li a:hover {
	color:#000; 
}
body.lite #services, body.lite #portfolio, body.lite #contact {
	color:#526270;
	background:rgba(255, 255, 255, 0.85);
	border:2px solid #9aa4ae;
}
.folist .three img {
	width:30%;
	max-width:384px;
	min-width:140px;
}

/** No grab  **/
.curdef #kontainer, .curdef header, .curdef footer {
	cursor:default;
}

/** Audio **/
audio {
	position:fixed;
	margin:auto;
	top:80%;
	left:0;
	right:0;
	bottom:12%;
	width:260px;
	opacity:0.5;
	z-index:10;
}
 
/** misc **/
body.bgt, body.bgt #kontainer {
	background-color:#98bfdd;
    background-image:-webkit-linear-gradient(top, #98bfdd, #ffffff);
	background-image:linear-gradient(to bottom, #98bfdd, #ffffff);
}
body.bgr, body.bgr #kontainer {
	background-color:#901000;
    background-image:-webkit-linear-gradient(top, #901000, #552211);
	background-image:linear-gradient(to bottom, #901000, #552211);
}
body.bgb, body.bgb #kontainer {
	background-color:#000000;
    background-image:-webkit-linear-gradient(top, #000000, #21282d);
	background-image:linear-gradient(to bottom, #000000, #21282d);
}
#pinfo, #pinfo2, #pinst {
	position:absolute;
	margin:auto;
	top:75%;
	left:0;
	right:0;
	bottom:17%;
	width:94%;
	max-width:960px;
	text-align:center;
	z-index:10;
}
#pinst {
	top:50%;
	bottom:50%;
	font:normal 1.5vw/1.7vw 'futura_icg_lightregular', arial; 
	color:rgba(127,127,127,0.5); 		
}
#pinst a {
	font:normal 1.5vw/1.7vw 'futura_icg_lightregular', arial; 
	color:rgba(127,127,127,0.5); 	
	text-decoration:none;
	border-bottom:1px solid rgba(127,127,127,0.3);
}
#pinst a:hover {
	color:rgba(127,127,127,1.0); 	
	border-bottom:0;
}
#pinfo h1 {
	font:normal 2vw/2vw 'futura_icg_lightregular', arial; 
	color:rgba(255,255,255,0.2); 	
}
#pinfo2 h1 {
	font:bold 3vw/2vw 'futura_icg_lightregular', arial; 
	color:rgba(255,255,255,0.9); 	
}
#pinfo2 h2 {
	font:normal 1.5vw/1vw 'futura_icg_lightregular', arial; 
	color:rgba(255,255,255,0.3); 	
}
#optn {
	position:absolute;
	margin:auto;
	//top:75%;
	left:0;
	right:0;
	bottom:14%;
	width:94%;
	max-width:960px;
	text-align:center;
	font:normal 1.3vw/2.2vw 'futura_icg_lightregular', arial; 
	text-transform:uppercase;
	color:rgba(255,255,255,0.2); 		
	opacity:0;
	z-index:10;	
}
#optn a {
	font:normal 1.3vw/2.2vw 'futura_icg_lightregular', arial; 
	color:rgba(255,255,255,0.3); 	
	text-decoration:none;
	border-bottom:1px dotted rgba(255,255,255,0.2);
}
#optn a:hover {
	color:rgba(255,255,255,1.0); 	
	border-bottom:0;
}
#optn a.sel {
	color:rgba(255,255,255,0.5); 	
	border-bottom:0;
}
#optn a.sel:hover {
	cursor:default;
}
#optn a.optnt {
	text-decoration:none;	
	color:rgba(255,255,255,0.2); 
	border-bottom:1px dashed rgba(255,255,255,0.1);
	cursor:help;
}
@media screen and (max-width: 1280px) {
	#optn a {
		font:normal 2.2vw/4.2vw 'futura_icg_lightregular', arial; 	
	}
}
@media screen and (max-width: 960px) {
	#pinfo h1 {
		font:normal 3vw/3vw 'futura_icg_lightregular', arial; 
	}
	#pinfo2 h1 {
		font:normal 4.5vw/3vw 'futura_icg_lightregular', arial; 
	}	
	#pinfo2 h2 {
		font:normal 2.25vw/1.5vw 'futura_icg_lightregular', arial; 
	}	
	#pinst a {
		font:normal 3.4vw/1.6vw 'futura_icg_lightregular', arial; 	
	}
	#optn a {
		font:normal 3.2vw/5.8vw 'futura_icg_lightregular', arial; 	
	}
}
@media screen and (max-width: 640px) {
	#optn a {
		font:normal 3.7vw/6.2vw 'futura_icg_lightregular', arial; 	
	}
}
@media screen and (max-width: 480px) {
	#pinfo h1 {
		font:normal 4vw/4vw 'futura_icg_lightregular', arial; 
	}
	#pinfo2 h1 {
		font:normal 6vw/3vw 'futura_icg_lightregular', arial; 
	}		
	#pinfo2 h2 {
		font:normal 3vw/1.5vw 'futura_icg_lightregular', arial; 
	}	
	#pinst a {
		font:normal 4.5vw/4.7vw 'futura_icg_lightregular', arial; 	
	}	
}
@media screen and (max-width: 360px) {
	#optn a {
		font:normal 4vw/6.6vw 'futura_icg_lightregular', arial; 	
	}
}	
#chromebadge {
	position:absolute;
	margin:auto;
	top:0;
	bottom:0;
	//left:0;
	right:0;
	width:30%;
	height:auto;
	max-width:160px;
	max-height:92px;
	z-index:9;
}
#chromebadge img {
	position:relative;
	width:100%;
	height:auto;
}



#dummy {
	display: none;
	position: absolute;
	top: 0;
	left: 9000px;
}

@media (hover:none), (hover:on-demand) {
	#dummy {
		left: -9000px;
	}
}

@supports(padding: max(0px)) {
	@media (hover:none), (hover:on-demand) {
		@media screen and (orientation: portrait) {
			#dummy {
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
			}
		}
	}
}




/* bakrums */
#options {
	display: block; 
	position: absolute; 
	top: 43%; 
	right: 1.5%; 
	width: 60px; 
	height: auto; 
	background: transparent; 
	border: 0; 
	margin: 0; 
	padding: 0; 
	z-index: 1000; 
}

#options a {
	display: block; 
}	

#options img {
	width: 60px; 
	max-width: 60px; 
	margin: 10px 0; 
	opacity: .15; 
}

#options img:hover {
	opacity: .8; 
}	

@media screen and (orientation: portrait) {
	#options {
		right: 2%; 
		width: 45px;
	}
	
	#options img {
		width: 45px; 	
	}
}	

.noneIt2 {
	display: none !important; 
}

#fader {
	position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #eee;
	z-index: 1100; 
}
	
#loadr {
	position: absolute; 
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto; 
	width: 50px;
	height: 50px;
	border: 5px solid;
	border-color: #5e5e5e transparent;
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	animation: rttn 2s linear infinite;
	z-index: 1200; 
}

#loadr.paus {
	animation-play-state: paused; 
}
	
@keyframes rttn {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 


/* bakrums */