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

@font-face {
  font-family: 'Quicksand';
  font-style: light;
  font-weight: 200;
  src:url(../font/Quicksand-Light.ttf);
}
@font-face {
  font-family: 'Quicksand';
  font-style: regular;
  font-weight: 400;
  src: url(../font/Quicksand-Regular.ttf);
}
@font-face {
  font-family: 'Quicksand';
  font-style: medium;
  font-weight: 600;
  src: url(../font/Quicksand-Medium.ttf);
}
@font-face {
  font-family: 'Quicksand';
  font-style: bold;
  font-weight: 800;
  src:url(../font/Quicksand-Bold.ttf);
}


/* This used to work for the parent element of button divs */
/* But it does not work with newer browsers, the below doesn't hide the play button parent div */

video::-webkit-media-controls-panel {
  display: none!important;
  -webkit-appearance: none;
}

/* Old shadow dom for play button */

video::-webkit-media-controls-play-button {
  display: none!important;
  -webkit-appearance: none;
}

/* New shadow dom for play button */

/* This one works! */

video::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}






/****************GENERAL****************/

*{
	margin:0;
	padding:0;
}


body{


background-color:#808080;
width:100%;
height:100%;
background-image:url(../image/bg.jpg);

}



#bg{
	position: absolute;
	width:100%;
	height: 100%;
	overflow:hidden;
}

#bg video{
	object-fit: cover;
	width:100%;
	height: 100%;
}
#content{
	font-size:11px;
	font-family: 'Quicksand', Verdana, sans-serif;
	
	
	width:100%;
	min-height: 100%;
	color:white;
	list-style-type:none;
	font-weight:400;
	position: absolute;
	display: flex;
	/*flex-direction: column;*/
  	justify-content: center;
	overflow:hidden;
}

#grid{
	width:100%;
	min-width: 400px;
	max-width:900px;
	text-align:center;
	margin: 100px auto 0 auto;
	position:relative;
	overflow: hidden;
	font-size: 0;
	display:grid;
	justify-content: center;
	grid-template-columns: repeat(auto-fill, 100px);
  	grid-template-rows: repeat(7, 100px);
	
}
.cell, .randomCell{
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	height: 100px;
	width: 100px;
	border: 1px solid rgba(255,255,255,0.10);
	background-image:url(../image/cellbg.gif);
	background-position:center;
	
}
.cell:hover, .randomCell:hover{
	background-color: rgba(255,255,255,0.10);
}

#logo{
	height: 300px;
	width: 100%;
	grid-column:3 / span 5;
	grid-row:2  / span 3;
	background-image:url(../image/Sm_Logoanim-transp-grey.gif);
	background-size: 65%;
	background-position: center;
	background-repeat: no-repeat;
	border: none;
}


a{
	text-decoration: none;
}

#fb, #yt, #vm, #insta{
	background-size: 50px;
	background-repeat: no-repeat;
	border: 1px solid rgba(255,255,255,0.10);
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	height: 100px;
	width: 100px;
	background-position:center;
	cursor: pointer;
	-ms-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; -webkit-transition: all 0.1s;
	
}
#fb a, #yt a, #vm a, #insta a{
	height: 100%;
	width: 100%;
	display: block;
}
#fb{
	grid-column:2; grid-row:1;
	background-image: url(../image/fb_Icon.png);	
}
#yt{
	grid-column:3; grid-row:1;
	background-image: url(../image/Youtube_Icon.png);
}
#vm{
	grid-column:4; grid-row:1;
	background-image: url(../image/vimeo_Icon.png);
}
#insta{
	grid-column:2; grid-row:2;
	background-image: url(../image/Insta_Icon.png);
}

#fb:hover, #yt:hover, #vm:hover, #insta:hover{
	/*background-color: rgba(255,255,255,0.5);*/
	border: 1px solid rgba(255,255,255,1);
	background-size: 40px

}




#about{
	height: 200px;
	width: 500px;
	grid-column:2 / span 5;
	grid-row:5 / span 2;
	overflow: hidden;
	line-height: 100px;
}
#aboutbtn{
	background-image: url(../image/about.png);
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	height: 100px;
	width: 100px;
	border: 1px solid rgba(255,255,255,0.10);
	background-position:top left;
	background-repeat:no-repeat;
	background-size:100px;
	font-size: 11px;
	letter-spacing: 3px;
	overflow: hidden;
	padding:0;
	-ms-transition: all 0.35s ease-out; -moz-transition: all 0.35s ease-out; -o-transition: all 0.35s ease-out; -webkit-transition: all 0.35s;
}
#aboutbtn:hover{
	background-image:none;
	height: 200px;
	width: 100%;

}

#aboutbtn p{
	font-size: 13px;
	line-height:20px;
	letter-spacing: 2px;
	text-align: left;
	width:auto;
	padding:15px 23px 0 23px;
}
#aboutbtn h1{
	font-size: 11px;
	line-height:33px;
	letter-spacing: 3px;
	font-weight: 400;
	width:100px;
	height:33px;
	margin-left:0;
	display:inline-block;
	margin-top:33px;
}
#aboutbtn:hover h1{
	width:100%;
	color:black;
	background-color:rgba(255,255,255,1);
	
}
#contact{
	width: 300px;
	height:100px;
	grid-column:4 / span 3;
	grid-row:7;
	font-size: 16px;
	line-height: 50px;
	overflow: hidden;
	
}
#contact h1{
	font-size: 16px;
	font-weight: 400;
	height: 50px; 
	width: 100%; 
	letter-spacing: 7px;
}
#contact p{
	height: 50px; 
	width: 100%;
	cursor: pointer;
	color: #303030; 
	background-color: white; 
	font-size: 12px; 
	letter-spacing: 3px;

}
#contact h1:hover{
	/*color: #303030;*/
}
#contact p:hover{
	background-color:rgba(255,255,255,0.20);
	color: white;
}

#line{
	height: 100px;
	width: 300px;
	grid-column:5;
	grid-row:1;
	font-size: 16px;
	text-align: left;
	letter-spacing: 3px;
	padding: 40px 0 0 40px;

}

/****************************************/

/****************WORDS UI****************/


#gravityVideo, #mezoVideo, #innerspaceVideo{
	display:none;
	animation: formFade 0.2s ease-in-out;
-moz-animation: formFade 0.2s ease-in-out; /* Firefox */
-webkit-animation: formFade 0.2s ease-in-out; /* Safari and Chrome */
-o-animation: formFade 0.2s ease-in-out; /* Opera */
}

@keyframes formFade {
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-moz-keyframes formFade { /* Firefox */
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-webkit-keyframes formFade { /* Safari and Chrome */
from {
    opacity:0;
}
to {
    opacity:1;
}
}
@-o-keyframes formFade { /* Opera */
from {
    opacity:0;
}
to {
    opacity: 1;
}
}

#projects{
	height: 100px;
	width: 100px;
	grid-column:9;
	grid-row:5;
	background-image:none;
	font-size: 11px;
	letter-spacing: 3px;
	line-height: 100px;
}
#mezobtn, #gravitybtn, #innerspacebtn, #innerJbtn, .exitbtn{
	height: 100%;
	width: 100%;
	border:5px solid white;
	border-radius: 100px;
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	background-position: center;
	background-size: 80%;
	background-repeat: no-repeat;
	cursor:pointer;

	-ms-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s;
}
.exitbtn{
	display:none;
	background-image: url(../image/exitcross.png);
	background-size: 100%;
}
#mezobtn{
	background-image:url(../image/mezoLogo.png);

}
#gravitybtn{
	background-image:url(../image/gravityLogo.png);

}
#innerspacebtn{
	background-image:url(../image/innerspaceLogo.png);
	cursor:auto;
	border:5px solid #9F9F9F;
}
#innerJbtn{
	background-image:url(../image/encoder.png);
	cursor:pointer;
	border:0px solid white;
}
#mezobtn:hover, #gravitybtn:hover, #innerJbtn:hover, .exitbtn:hover{
	border:10px solid white;
}

#gravity, #mezo, #innerspace, #innerJ{
	height: 100px;
	width: 100px;
	border: 1px solid rgba(255,255,255,0.10);
	background-image:none;	


}
#gravity{
	grid-column:8; grid-row:5;
}
#innerspace{
	grid-column:7; grid-row:5;
}

#mezo{
	grid-column:9; grid-row:4;
}
#innerJ{
	grid-column:1; grid-row:4;
}
/*************************************/

/****************PROJECTS****************/




#home, #media, #title, #description, #partners{
	opacity:0;
	-ms-transition: opacity 0.1s ease-out; -moz-transition: opacity 0.1s ease-out; -o-transition: opacity 0.1s ease-out; -webkit-transition: opacity 0.1s ease-out;
}
#home{	
	background-image: url(../image/homebtn.png);
	background-position: center;
	background-size: 80%;
	color:white;
	font-size: 11px;
	grid-column:2; grid-row:1;
	display:none;
	cursor:pointer;
	-ms-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s;
	
}
#home:hover{
	background-size: 85%;
}
#media{	
	height: 400px;
	width: 700px;
	color:white;
	position:relative;
	font-size: 11px;
	background-color: grey;
	grid-column:2 / span 7; grid-row:2 / span 4;
}
#media iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#title{	
	height: 100px;
	width: 500px;
	color:white;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 128px;
	background-image: url(../image/homebtn.png);
	
	font-size: 11px;
	grid-column:3 / span 5; grid-row:1;
}
#description{
	height: 200px;
	width: 500px;
	color:white;
	text-align: left;
	font-size: 12px;
	line-height: 200px;
	letter-spacing: 1px;
	grid-column:3 / span 5; grid-row:7 / span 2;
}
#description p{
	padding: 0 5px;
	display: inline-block;
  	vertical-align: middle;
	line-height: 20px;
	letter-spacing: 1px;
}
#partners{
	min-height: 100px;
	width: 500px;
	color:white;
	font-size: 11px;
	grid-column:3 / span 1; grid-row:9 / span 1;
}
#partners h1{
	font-size: 11px;
	line-height:33px;
	letter-spacing: 3px;
	font-weight: 400;
	width:100px;
	height:33px;
	margin-left:0;
	float:left;
	display:inline-block;
	margin-top:33px;
}
#partners .cell{
	cursor: pointer;
}
#partners .cell img{
	height:80px;
	width:80px;
	margin:10px;
}

/************************************************/



/****************SUBSCRIBE FORM*****************/
#subscribe{
	height:50px;
	width:100%;
	overflow: hidden;
	margin-top: 0;
	background-image: url(../image/subscribe.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 400px;
}
#subscribe:hover{
	height:250px;
}
#subscribe h1{
	font-size:12px;
}
#subscribe:hover h1{
	margin-top: -50px;
	-ms-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; -webkit-transition: all 0.1s;
}

#mc_embed_signup{ 
	clear:left; 
	font-size:14px;
	width:100%; 
	height:50px;
	
}
#mce-EMAIL, #mce-FNAME, #mce-LNAME{
	margin: 0;
	padding:3px 1%;
	float:right;
	width:74%;
	height:40px;
	margin-top: 1px;
	border: 1px rgba(255,255,255,0.2) solid;
	color:white;
	border-radius: 0;
	background-color:transparent;
	font-family: 'Quicksand', Verdana, sans-serif;
}
#mce-FNAME, #mce-LNAME{
	width:47.2%;
}
#mce-FNAME{
	float:left;
}
#mce-FNAME, #mc-embedded-subscribe{
	
}
#mce-EMAIL:hover, #mce-FNAME:hover, #mce-LNAME:hover{
	background-color:rgba(255,255,255,0.2);
}
input::placeholder{
  color:#DCDCDC;
}
#mc-embedded-subscribe{
	margin: 0;
	padding:0;
	float:left;
	width:23%;
	height:48px;
	margin-top: 1px;
	border: none;
	font-size:9px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-family: 'Quicksand', Verdana, sans-serif;
	cursor: pointer;
	border-radius: 0;
}
#mc-embedded-subscribe:hover{
	color:white;
	background-color:rgba(255,255,255,0.2);
}
#mce-responses{
	width: 100%;
	font-size: 12px;
	padding-top: 10px;
	float:left;
	height:100px;
	line-height:15px;
}
.mce_inline_error{
	font-size: 10px;
	float:right;
	line-height: 10px;

}


/******************************************/