@charset "utf-8";

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src:url(../font/Montserrat-Medium.ttf);
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url(../font/Montserrat-Light.ttf);
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url(../font/Montserrat-Regular.ttf);
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src:url(../font/Montserrat-ExtraLight.ttf);
}
/* Customizing all scrollbars */
::-webkit-scrollbar {
  width: 5px;
  border-radius:20px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius:20px;
  background: #222;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #666; border-radius:20px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: white; 
}

*{
	margin:0;
	padding:0;
    font-weight: 400;

		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		/* disable on touch highlights of html elements, especially on mobile! */
		-webkit-tap-highlight-color: transparent;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
}
canvas {
	display: block;
	position: absolute;
	outline:0;
}


body{
color:white;	
background-repeat:repeat-x;
font-size:30px;
width:100%;
height:100%;
list-style-type:none;
overflow:auto;
background-color:black;
}
#content{
	width:100%;
	margin:auto;
	font-size:14px;
	font-family: 'Montserrat', Verdana, sans-serif;
	transition:opacity 1s ease;
	position:absolute;
	
}
#header{
	width:100%;
	height:0;
	padding-bottom:7px;
	margin:auto;
	position:fixed; 
	z-index:100;
	text-align:center;
	display:none;
	
}



#details{
	font-weight:400;
	display:inline-block;
	margin:30vh 0 0 3vw;
	 white-space: nowrap;
	max-height:70vh;
	float:left;
	text-align:left;
	position:relative;
}
#menu{
font-size:12px; 
letter-spacing: 3px;
	display:inline-block;
	position:relative;
	float:auto;
	text-transform:uppercase;
	min-width:400px;
	mix-blend-mode:screen;
}
#menu ul{
	margin:auto;
	padding:0;
	text-indent:0;
}
#menu li{
	float:right;
	box-sizing: border-box;
	cursor:pointer;
	padding:40px 0 20px 0;
	display:inline-block;
	list-style-type:none;
	width:180px;
	min-width:100px;
}

#menu li:hover{
	background-color:rgba(122, 0, 255, 1);
	box-shadow:0 0 100px rgba(122, 0, 255, 1);
	-webkit-animation: colors 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite  alternate-reverse;
	        animation: colors 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) inifinite alternate-reverse;
}
#menu li:focus{
	background-color:rgba(255, 255, 255, 0.8);
}
a{
	text-decoration:none;	
	-moz-transition: all 0.05s ease; -webkit-transition: all 0.05s ease; -ms-transition: all 0.05s ease; -o-transition: all 0.05s ease;
}

#bottom{
	position:relative;
	display:block;
	float:right; 
	text-align:center;
	font-style:italic; 
	z-index:2;
	width:100%;
	margin:0 auto 0 auto;
}




a{
	text-decoration:none;
	color:white;
	cursor:pointer;
}


#galerie{ 
	width:100%;
	display:flex;
	flex-direction: column;
	justify-content:center;
	align-items: center; /* Add this line */

	position:relative;
}
#isotopeContainer{
background-color:transparent;
height:1080px;

overflow:hidden;
max-width: 100vw;
width:90vw;
}
#isotopeFrame{
	margin-top:85vh;
	border-top:rgba(255,255,255,.13) solid 1px;
	background-color:transparent;
	margin-bottom:80vh;
	padding:10px;
display:flex;
	border-radius:10px;
	backdrop-filter:blur(30px);
}
/* clear fix */
#isotopeContainer:after {
	content: '';
	display: block;
	clear: both;
}
#canvasContainer{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
	z-index:0;
    width: 100vw;
    margin: 0;
	padding:0;
    position: relative;
	position:fixed;
	top:0;
}
#glcanvas{
position:absolute;
margin:0;
padding:0;
top:0;
opacity:0;
transition:opacity 2s ease-in-out;
}
.menuOverlay{
	position: 'fixed';
	width: '100%';
	height: '100%';
	top: '0';
	left: '0';
	background-color: 'rgba(0, 0, 0, 0)';
	z-index: '1000';
	display: 'flex';
	justify-content: 'center';
	align-items: 'center';
}
#sorting, #resume{
font-size:12px; 
letter-spacing: 3px;
z-index:1;
	min-width:380px;
	float:auto;
	position:fixed;
	z-index:999;
	top:0;
	text-transform:uppercase;
	pointer-events: none;

}
#resume{
	margin-top:0;
}
#sorting li:hover, #resume li:hover{
	background-color:rgba(122, 0, 255, 1);
	box-shadow:0 0 30px rgba(122, 0, 255, 1);
	-webkit-animation: colors 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite  alternate-reverse;
	        animation: colors 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) inifinite alternate-reverse;
	}
	#sorting li:hover span {
		display: none;
	  }
	  
	  #vrbtn:hover:before {
		content: "cross-platform"
	  }
	  #uxbtn:hover:before {
		content: "user-experience"
	  }
	  #aibtn:hover:before {
		content: "artificial intelligence"
	  }
	  #motionbtn:hover:before {
		content: "audio / visual"
	  }
	  #allbtn:hover:before {
		content: "all"
	  }
	  #bigbtn:hover:before {
		content: "selected"
	  }
#galcover{
position:absolute;
width:100%;
height:100vh;
background-color:white;
display:none;
opacity:1;
}
#copyright{
	 text-align:left; display:inline-block; margin:30vh 0 20px 0; color:#333; text-transform:lowercase; letter-spacing: 2px;
}
#sortSelector,#gallerySelector,#galleryManualSelector,#logo{
   display: inline-block;
   position:relative;
   padding: 10px 20px;
   width: auto;
   text-align: center;
   text-transform: uppercase;
   font-size: 12px;
   letter-spacing: 5px;
   font-style: normal;
   background-color: black;
   border: none;
   color: white;
   font-family: 'Montserrat', sans-serif;
}
#galleryManualSelector,#logo{
	background-color: transparent;
	font-size:26px;
	padding:20px 30px;
	cursor:pointer;
	float:right;
	pointer-events:auto;
	width:70px;
}
#headFoot{
	font-size:20px;
	text-align:justify;
	margin:40px;
	top:200px;
	letter-spacing:1px;
	font-size:14px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size:20px;
	animation: fadeInOpacity 1s ease-in-out;
	text-shadow:0 0 10px rgba(0,0,0,.5);

}
#headFoot h1{
	font-weight:bold;
	text-align:center;
	display:block;
	font-size:30px;
	margin-top:200px;
	color:white;
	text-shadow:0 0 10px rgba(0,0,0,.5);
}
#headFoot p{
padding:5px;
	top:200px;
	width:100%;
	color:black;
	max-width:800px;
	font-size:14px;
	color:white;
	text-shadow:0 0 10px rgba(0,0,0,.5);

}
@keyframes fadeInOpacity {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
#logo{
	float:left;
	min-width:200px;
	margin:5px 0 0 20px;
	height:50px;

	display: block;
	width:auto;font-size:20px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url('../image/fronthand/alivemachine.svg');
	filter: invert(1) drop-shadow(0 0 0 transparent)
	drop-shadow(0 0 0 transparent)
	drop-shadow(0 0 0 transparent)
	drop-shadow(0 0 0 transparent)
	drop-shadow( 0 0 0 transparent);
	z-index:999999;
	position:absolute;
	transform-origin: center;
	transition:all .2s ease-in-out;
	transform:scale(1.3) translate(-50%, -50%);
	top: 50%;
	left: 50%;

}
#logo:hover{

transform:scale(1.4) translate(-50%, -50%);
font-size:30vw; color:black; line-height: 16vh; 
filter: invert(0) drop-shadow(0 1px 1px yellow)
drop-shadow(0 2px 3px orange)
drop-shadow(0 5px 6px red)
drop-shadow(0 8px 8px purple)
drop-shadow( 0 12px 14px blue);

}
.menubtn{
padding:20px 20px;
background-color:transparent;
border:none;
cursor: pointer;
color:white;
font-size:16px;
width:20%;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
pointer-events: auto;
font-size:12px;
}
.menubtn:hover{
	background-color:rgba(122, 0, 255, 1);
	box-shadow:0 0 50px rgba(122, 0, 255, 1);
	
	-webkit-animation: colors 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite  alternate-reverse;
	        animation: colors 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) inifinite alternate-reverse;
}
#sortSelector option, #gallerySelector option{
   color: #333;
   background-color: #f2f2f2;
   padding: 5px;
   text-align:center;
   font-size:20px;
   letter-spacing: 5px;
}

#contactme{
	letter-spacing: 5px;
	font-size:14px;
	text-transform:uppercase;
	font-style:normal;
	text-align:center;
	position:relative;
	margin:0;
	display:inline-block;
	padding:10px 0;
	width:100%;
	min-width:400px;
	height:50vh;
	padding-top:41vh;
}

.galcontent{ 
	font-size:16px;
	text-align:center;
	width:100%;
	height:100%;
}

.galcontent a{
	text-decoration:underline;
	}
.galcontent a:hover{
	color:#84BBD0;
	text-decoration:none;
		
}
.galcontent img{ 
display:block;
margin:0 auto;
max-width:700px;
max-height:393px;
position:relative;
}

#galimages{
	min-width:400px;
	
	max-width:70vw;
	float:right;
	text-align:center;
	display:inline-block;
	background-color:black;
	overflow-x:hidden;
background-image:url(../../PortfolioV5/image/fronthand/tramebg.png);
position:relative;
	opacity: 1;
	-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 ease-out;	

}

#galimages img{
	max-height:none;
	max-width:100%;
}
#galimages video{
	max-width:100%;
}



.outlink{  
	width:120px;
	height:120px;
	text-indent:0;
	padding-right:1px;
	background-size:35px;
	background-position:center;
	background-repeat:no-repeat;
	display:inline-block;
	box-sizing: border-box;
	margin-bottom:1px;
	backdrop-filter:blur(32px);
	-webkit-backdrop-filter:blur(32px);
	border-radius:6px;
	}
	
	.outmail{
		width:840px;
	}
	
.outlink:hover{
	color:white;
	background-color:rgba(122, 0, 255, 1);
	box-shadow:0 0 50px rgba(122, 0, 255, 1);
	
	-webkit-animation: colors 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite  alternate-reverse;
	        animation: colors 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) inifinite alternate-reverse;
}
.outlink a{
	margin:0:
	padding:0;
}

h3{
font-size:12px;
text-align:center;
}

@-webkit-keyframes colors {
  0% {
			filter:hue-rotate(var(--color-degree-start));
  }
  100% {
			filter:hue-rotate(var(--color-degree-end));
  }
}
@keyframes colors {
  0% {
			filter:hue-rotate(var(--color-degree-start));
  }
  100% {
			filter:hue-rotate(var(--color-degree-end));
  }
}

#logo:hover .subleft {
	opacity:1;
letter-spacing:10px;
 }
 #logo:hover .subright {
	 opacity:1;
 }

.item{
	width:33.32%;	
	height:300px;
	color:white;
	font-size:18px;
	background-color:#111;
	border-radius:3px;
	background-size:cover;
	cursor:pointer;
	overflow:hidden;
	 z-index: 1;
	 opacity:1;
	 
	 display: flex;
	 justify-content: center; /* Horizontally center */
	 align-items: center;     /* Vertically center */
	 
	 background-size: auto 120%;
	 background-repeat:no-repeat;
	 background-position-y: calc(var(--scroll) * -0.1px + 50%);
	 background-position-x: 50%;

}
.item.small:not(.repository-item):not(.client-item):not(.contact-item){	
	width:16.66%;	
	height:150px;
	
	color:rgba(255,255,255,.5);
	font-size:18px;
	text-align: center;
	display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center;     /* Vertically center */
	background-size: auto 120%;
	background-position-y: calc(var(--scroll) * -0.05px + 25%);
}
.item.verysmall,.grid-sizer {
	width:8.33%;	
	height:75px;
	background-size:cover;
	opacity:0.5;
}
.item.verysmall:hover {
	opacity:1;
}


.award{
	max-width:25px;
}
.item img, .item video{
	width: 100%;
	height: 100%;
	object-fit: cover;

}
.item span, .item.small:not(.client-item):not(.contact-item) span{
	width:100%;
font-size: 10px; letter-spacing: 2px;
	font-weight:400;
	letter-spacing: 3px;
	padding-top:100vh;
	padding-bottom:100vh;
	margin:800px 0 0 0;
	z-index:5;
	pointer-events:none;
	text-align:center;
    display: inline-block;
	outline: none;
	box-sizing: border-box;
	font-size: 10px; letter-spacing: 2px;

	-moz-transition: all 0.05s ease-out; -ms-transition: all 0.05s ease-out; -o-transition: all 0.05s ease-out; -webkit-transition: all 0.05s ease-out;	
	-moz-transition: backdrop-filter .6s ease-out; 
	-ms-transition: backdrop-filter .6s ease-out; 
	-o-transition: backdrop-filter .6s ease-in-out; 
	-webkit-transition: backdrop-filter .6s ease-out;	
}
.item.small:not(.client-item):not(.contact-item) span{
	-moz-transition: backdrop-filter .3s ease-out; 
	-ms-transition: backdrop-filter .3s ease-out; 
	-o-transition: backdrop-filter .3s ease-in-out; 
	-webkit-transition: backdrop-filter .1s ease-out;

	backdrop-filter:blur(12px) brightness(60%);

margin:0 0 0 0;
}
.client-item span,.contact-item span{
	margin:0 0 0 0;
	color:white;
}
.repository-item span{
	margin:0 0 0 0;
	text-shadow:none;
	backdrop-filter:blur(0) brightness(50%);
	text-align:left;
	padding:200px 20px;
	-moz-transition: backdrop-filter 0s ease-out; 
	-ms-transition: backdrop-filter 0s ease-out; 
	-o-transition: backdrop-filter 0s ease-in-out; 
	-webkit-transition: backdrop-filter 0s ease-out;
	text-align:center;
}
.client-item,.contact-item{
	width:16.66%;	
	height:150px;
	background-size: 70%;
	background-position: center;
	background-color:transparent;
	
}.contact-item{
	width:11.11%;	
	height:75px;
	background-size: 20%;
}
.outlinkLogo{
	height:25px;
	padding:0 10px;
	margin-bottom:-.5em;
}
.client-item:hover,.contact-item:hover{
	background-color:rgba(30, 128, 220, 1);
background-blend-mode: difference;
color:#000;
	margin:0;
	animation: colors 3s cubic-bezier(0.5, 0.000, 0.5, 1.000) infinite alternate-reverse;
	        animation: colors 3s cubic-bezier(0.5, 0.000, 0.5, 1.000) inifinite alternate-reverse;
 }
.connectOver{
	background-color:white;
color:#000;
	margin:0;
 }

 #filter {
   position: absolute;
margin-top:-50px;
z-index:1;
 }
 #filter div{
	float:left;
	transition:all .1s ease;
	padding:10px 20px;
cursor:pointer;
border-radius:2px 2px 0 0;
}
#filter div:not(.highlighted){
	opacity:.5;height:30px;margin-top:5px;
}

#filter div:hover,.highlighted{
	font-weight:bold;
	opacity:1;
	height:40px;
	margin-top:0;
}

 .client-item:hover span,.contact-item:hover span{
 mix-blend-mode: difference;

  }
.client-item span,.contact-item span{
	font-weight: bold;
}
.usecaseLogo{
   display: relative;
   justify-content: center;
   align-items: center;
   position: relative;
   width:100%;
}
.item.repository-item{
	transition: backdrop-filter 1s ease-out;
	width:auto;	
	height:37.5px;
	background-size:150%;
	background-position: center 20%;
	backdrop-filter: blur(0);
	-webkit-backdrop-filter: blur(0);
	box-shadow: inset 0 0 10px 0 rgba(0,0,0,.1);

}
.item.repotitle{
	cursor:default;
	box-sizing: border-box;
	width:100%;	
	margin-top:37.5px;
	background-color:transparent;
}
.item.repository-item:hover{
	backdrop-filter: blur(0);
	background-blend-mode: exclusion;
}
.item.repository-item:hover > span{
	margin-top:0;
	backdrop-filter: blur(0);
	transition: all .3s ease-out;
background-blend-mode: difference;
}
.repotitle span{
font-weight: 800;
padding-left:50px;
text-align:left;
}
.item h3, .item.small h3{
	
text-align:left;
font-weight:500;

}
.item h4{
	height:60px;
	margin-top:25px;
	font-size:26px;
	}
	.item.small h4{
		height:40px;
		margin-top:15px;
		font-size:18px;
	}
.item:not(.repository-item):not(.client-item):not(.contact-item):not(.head):hover > span {
	 background-color:rgba(30, 128, 220, 1);
	  
	  
	margin:0;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	  
	  
-webkit-animation: colors 3s cubic-bezier(0.5, 0.000, 0.5, 1.000) infinite alternate-reverse;
	        animation: colors 3s cubic-bezier(0.5, 0.000, 0.5, 1.000) inifinite alternate-reverse;
			
 }

.item:not(.repository-item):not(.client-item):not(.contact-item):hover > span {
	mix-blend-mode: difference;
}
 .item.small:hover > span {
	
	margin-top:0;
	 backdrop-filter: blur(0);
	 -webkit-backdrop-filter: blur(0);

 }
 .item.small:not(.repository-item):not(.client-item):not(.contact-item):hover > span {
	mix-blend-mode: difference;
	padding:3000px 0 80px 0;backdrop-filter: blur(0);
	background-color:rgba(30, 128, 220, 1);
 }
 .item:not(.repository-item):not(.head):hover {
 box-shadow: rgba(30, 128, 220, 1) 0 0 100px 0;
	 z-index:2;
	 
	 -webkit-animation: colors 3s cubic-bezier(0.5, 0.000, 0.5, 1.000) infinite alternate-reverse;
		   animation: colors 3s cubic-bezier(0.5, 0.000, 0.5, 1.000) inifinite alternate-reverse;

 }
 .item span img,.item.small span img{
	width:100px;
	position:relative;
	opacity:1;
}
.item.small span img{width:60px;opacity:.5;}
#previousProject, #nextProject,#currentcategory {
   font-size:12px; 
   letter-spacing: 3px;
   text-transform:uppercase;
   cursor:pointer;
   padding:10px 15px 10px 15px;
   display:block;
   position: fixed;
   background-color:transparent;
   outline:none;
   border:none;
   color:white;
   z-index:51;
   transform-origin: top center;
}
#previousProject{
	left:75px;top:0;
}
#currentcategory{
	cursor:default;
   font-family: 'Montserrat', sans-serif;
	left:150px;top:0;opacity:.4;
	font-weight:600;
}
#nextProject{
	left:225px;top:0;
}

#previousProject:hover, #nextProject:hover {
   background-color:rgba(255,255, 255, 1);
   color:black;
}

.head{
	width:100%;
cursor:default;
background-color: black;
padding:60px;
}
.head span{
	margin:0;
	font-size:18px;
}




.softwares{
	padding:0;
	margin:100px 0;
	font-size:18px;
	text-align:left;
}
.softwares li{
	white-space: nowrap;
	list-style-type: none;
	display:inline-block;
	width:250px;
	line-height:50px;
	height:50px;
	vertical-align: middle;
	margin-top:10px;
	text-align: left;
	overflow: hidden;
	text-align-last: left;
}
.softwares img{
	width:50px;
	float:left;
	padding:10px 20px 0 0;
}

#popghost{
	width:100%;  
	position:absolute; 
	z-index:11;
	text-align: center;
	display:none;
	pointer-events:none;
}

#popghost:before {
  content: '';
  display: inline-block;
  height: 100%; 
  margin-right: -0.25em; 
  
}


#popup{
	
	margin-top:-1000px;
	min-width:400px;
	background-color:rgba(0,0,0,1); 
	box-shadow: 0 50px 300px black;
	display:none;
	z-index:12;
	width:100%;
	/*max-width:87vw;*/
	text-align:left;
	height:100vh;
	pointer-events:auto;
	overflow-x:hidden;
	-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 ease-out;	
}
#popup a{
	color:white;
	padding:2px 0px;
	margin:0 5px 0 4px;

	border-bottom:white solid 1px;
	text-decoration:none;
}
#popup a:hover{
	margin:0 1px 0 0;
	color:black;
	padding:2px 4px;
	background-color:white;
	box-shadow:0 0 20px rgba(255,255,255,.5);
}
#projecttitle{
	margin-left:3vw;
	padding-top:200px;
	text-align:left;
	z-index:50;
	height:auto;
	display:block;
	max-width:24vw;
	min-width:250px;
	position:relative;
	text-align:justify;
	line-height:1.8;
	font-size:14px;
	vertical-align:middle;
	letter-spacing:0.5px;
	opacity: 1;
	font-family: 'Montserrat', Verdana, sans-serif;
	-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 ease-out;	
}
#projecttitle h1 img{
	height:15px;
	padding:5px 10px 0 0;
	
	display:inline-block;
	
}

#projecttitle h1{
	line-height:34px;
	font-weight: 400;
	text-transform:uppercase;
	letter-spacing:5px;
	text-align:center;
	font-size:36px;
	
}
#projecttitle h2{
	text-align:center;
	margin:5px 0 200px 0;
	text-transform:uppercase;
	font-weight:400;
	font-size:12px;
	
	
}
.exitcross{
	position:fixed;
	top:0; left:0;
	width:35px;
	height:35px;
	display:block;
	padding:4px;
	cursor:pointer;
	z-index:999;
	
}
.exitcross:hover{
padding:7px;
filter: invert(100%);
	background-color:black;
	
}

.exitproject{
	width:100vw;
	height:100vh;
	position:absolute;
	display: none;
	
}

#projecttitle h3, #projecttitle h3 a{
	font-size:14px;
	font-style:italic;
	text-align:left;
}
#projecttitle h3{
	margin:100px 0;
}
#projecttitle h3 img{
	float:left;
	display:inline-block;
	width:60px;
	padding-right:10px;
}

#popup h4{
	
	font-size:20px;
	margin: 100px 20px;
}
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	min-width:100%;
}
.videoWrapper iframe, .videoWrapper video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.pano{
	padding-bottom: 42.5%;
}

#slides{
	width:100%;
	height:100%;
	position:fixed;
	z-index:0;
	background-position:center;
	background-size:cover;
	
}
#slideshow li{
    width: 100%;
	min-height:100%;
	padding: 0; 
	opacity:1;       
	margin-left:0px;
	-ms-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out;
	background-size:cover;
	background-position:center;
	background-color:transparent;
	position:fixed;
}

#play, #pause{
	position:absolute;
	margin-top:245px;	
	margin-left:5px;
	border-radius:8px;
	cursor:pointer;
}#play{display:none;}

#play:hover, #pause:hover{
	box-shadow: 2px 2px 3px #000;
}
#play:active, #pause:active{
	box-shadow: 1px 1px 2px #000;
}

#showprivate, #showpublic{
display:block;	
}

#showbtns{
	width:100%;
	height:100%;
	overflow:hidden;
	
}

#showbtns li{
	height:50%;
	width:100%;
	display:table;
	cursor:pointer;
	-ms-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; -webkit-transition: all 0.1s ease;
}

#showbtns p{
	display:table-cell;
	vertical-align:middle;
	text-align:center;	
	height:100px;
	width:50px;
}

#showbtns span{
	font-weight:800;
	font-size:24px;
}

#showbtns:hover li{
	height:20%;
	
}

#showbtns li:hover{
	height:80%;
	background-color:#F60;
	background-color:#60C;
}

#showbtn1{	
	background-color:#999;
}
#showbtn2{
	background-color:#888;
}