@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=latin-ext');

html{
	width:100%;
	height:100%;
	overflow-x:hidden;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	-ms-overflow-style: none;
	font-family: 'Open Sans', sans-serif;
	line-height: 1.15;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	
}

body{
	width:100%;
	height:100%;
	overflow-x:hidden;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	-ms-overflow-style: none;
	background:rgb(20,21,26);
	margin:0;
}

img{max-width:100%;display:block;margin:0 auto;}

#scene{
	width:100%;
	height:100%;
	z-index:10;
}

#scene-bckgd{
	background-image:url(/background.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	/*width:120%;
	height:120%;
	margin-left:-10%;
	margin-top:-10%;*/
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:5;
}

#content-wrap{
	/*width:100%;
	height:100%;*/
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:20;
	vertical-align:middle;
	display:flex !important;
	align-items:center;
	text-align:center;
}

#content{padding:0 5%;padding-top:50px;}

.window-wrap{
	display:inline-block;
	margin:0 75px;
}

.window{
	width:300px;
	height:225px;
	overflow:hidden;
	border-radius:5px;
	border:2px solid rgb(255,255,255);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.window-nav{
	height:20px;
	border-bottom:1px solid rgb(255,255,255);
	margin:0 auto;
	background-image:url(/nav.png);
	z-index:20;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.window-content{
	width:120%;
	padding-top:120%;
	margin-left:-10%;
	margin-top:-20%;
	background-position:center center;
	z-index:10;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.big-logo{
	margin-bottom:50px;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.service-title{
	color: rgb(255,255,255);
    margin-top: 20px;
    font-size: 42px;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.slogan{
	color:rgb(255,255,255);
	font-size:18px;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.slogan span{
	font-weight:bold;
	font-style:italic;
	font-size:36px;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.shader{
	height:50px;
	background-repeat:repeat-x;
	background-image:url(/shader.png);
	position:fixed;
	top:0;
	left:0;
	right:0;
	width:100%;
	z-index:50;
}

/* PARTICLES */
canvas{ display: block; vertical-align: bottom; } 

#particles{ 	
	/*width:120%;
	height:120%;
	margin-left:-10%;
	margin-top:-10%;*/
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:6;
} 

@media screen and (max-width:1100px){
   .big-logo{width:700px}
}

@media screen and (max-width:900px){
	.window-wrap{
		margin:0 50px;
	}
}

@media screen and (max-width:800px){
   .big-logo{width:400px}
   
   .window{
		width:200px;
		height:150px;
	}
	
	.window-content{
		background-size:100%;
	}
	
	.window-nav{background-position:center right}
	
}

@media screen and (max-width:600px){
	
	.window-wrap{
		margin:0 25px;
	}
	.service-title{
		font-size: 30px;
	}
}

@media screen and (max-width:550px){
	.window{
		/*width:150px;
		height:113px;*/
		width:100px;
		height:75px;
		
	}
	.service-title{
		font-size: 20px;
	}
	.window-nav{background-size:cover;height:10px;}
	.slogan span{
		font-size:30px;
		margin-left:10px;
		margin-right:10px;
	}
	.slogan{
		font-size:16px;
	}
}

@media screen and (max-width:300px){
   .window{
		display:block;
	}
	
	.window-wrap{
		margin:0;
		margin-bottom:10px;
	}
}


@media screen and (max-width:500px){
   .big-logo{width:300px}
}

::-webkit-scrollbar { 
    display: none; 
}