#custom-seekbar
	{  
	    cursor: pointer;
	    height: 15px;
	    margin-bottom: 15px;
	    outline: thin solid white;
	    overflow: hidden;
	    position: relative;
	    width: 100%;
	    margin-left: auto;
	    margin-right: auto;
	    opacity: 0.5;
	}
	#custom-seekbar span
	{
	  background-color: white;
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 15px;
	  width: 0px;
	}

	/* following rule is for hiding Stack Overflow's console  */
	.as-console-wrapper{ display: none !important;}

.icono-mail{

  	color: #999;
    height:15px;
	margin-top:5px;
	margin-left:20px;
	margin-right:15px;
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	  /* ...and now for the proper property */
	transition:.5s;

}


.icono-mail:hover{

  	color: rgb(245,245,245);

}


.speaker {
	height: 22px;
	width: 22px;
	position: relative;
	margin-left:10px;
	overflow: visible;
	display: inline-block;
	z-index:100;
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	  /* ...and now for the proper property */
	transition:.5s;
}
	spanzy {
		display: block;
		width: 8px;
		height: 8px;
		background: #999;
		margin: 11px 0 0 2px;
}


.speaker:after {
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			border-style: solid;
			border-color: transparent #999 transparent transparent;
			border-width: 10px 14px 10px 15px;
			left: -13px;
			top: 5px;
			transition: all 0.2s ease-out;
		}

.speaker:before {
			transform: rotate(45deg);
			border-radius: 0 50px 0 0;
			content: '';
			position: absolute;
			width: 5px;
			height: 5px;
			border-style: double;
			border-color: #999;
			border-width: 7px 7px 0 0;
			left: 18px;
			top: 9px;	
			transition: all 0.2s ease-out;
		}
	.speaker.muted:before {
		opacity: 0;
		transition: all 0.2s ease-out;
	}

.speaker:hover {

		  	color: rgb(245,245,245);

		}


hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.animsition-link {
 	font-size: 25px;
	line-height:35px;
  	display: inline-block;
  	color: #333;
  	font-weight: normal;
	letter-spacing:1px;
  	font-family:DiotimaRoman;
	text-decoration:none;
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	  /* ...and now for the proper property */
	transition:.5s;
}

.animsition-link:hover {

  	color: #999;
 
}



#about_button {
	
  	font-size: 20px;
	line-height:25px;
  	display: inline-block;
  	color: #333;
  	font-weight: normal;
  	font-family:DiotimaRoman;
	text-transform:uppercase;
	letter-spacing:1px;
	padding-top: 0px;
	padding-right:0px;
	padding-left:0px;
	cursor: pointer;
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	  /* ...and now for the proper property */
	transition:.5s;
}

#about_button:hover  {

  	color: rgb(245,245,245);
 
}


.c-button{
  	font-size: 20px;
	line-height:25px;
  	display: inline-block;
  	color: #999;
  	font-weight: normal;
  	font-family:DiotimaRoman;
	letter-spacing:1px;
	padding-top: 0px;
	padding-right:0px;
	padding-left:0px;
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	  /* ...and now for the proper property */
	transition:.5s;
}

.c-button:hover {

  	color: rgb(245,245,245);
 
}


.c2-button{
  	font-size: 20px;
	line-height:25px;
  	display: inline-block;
  		color: #999;
  	font-weight: normal;
  	font-family:arial;
	letter-spacing:1px;
	padding-top: 0px;
	padding-right:0px;
	padding-left:0px;
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	  /* ...and now for the proper property */
	transition:.5s;
}

.c2-button:hover {

  	color: rgb(245,245,245);
 
}


h3 {
 	font-size: 15px;
	line-height:20px;
  	color: #999;
 	font-weight: normal;
	text-transform:uppercase;
	letter-spacing:1px;
 	font-family:DiotimaRoman;
}

h4 {
	font-size: 20px;
	line-height:30px;
  	display: inline-block;
  	color: #333;
	background-color:none;
  	font-weight: normal;
  	font-family:DiotimaRoman;
	text-decoration:none;	
	
}


.c-menu__close {
	
		font-size: 30px;
		line-height:70px;
	  	display: inline-block;
	  	color: #999;
		font-weight: normal;
	  	font-family:arial;
		position:absolute;
		right:30px; 
		top:-45px; 
		text-decoration:none;
		letter-spacing:1px;
		padding-top: 0px;
		padding-right:0px;
		padding-bottom:4px;
		padding-left:0px;
		-o-transition:.5s;
		-ms-transition:.5s;
		-moz-transition:.5s;
		-webkit-transition:.5s;
		  /* ...and now for the proper property */
		transition:.5s;

	}

.c-menu__close:hover {

	  color: #333;

 }
	

.epi-text {

		font-size: 20px;
		line-height:25px;
		color:#333;

 }

.fullscreen-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /*overflow-y: scroll;*/
  /*z-index: -100;*/
}

.fullscreen-bg__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 106%;
}


@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    height: 300%;
    top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: 300%;
    left: -100%;
  }
}


@media (max-width: 767px) {
  .fullscreen-bg {
    background: url('../img/videoframe.jpg') center center / cover no-repeat;
  }

  .fullscreen-bg__video {
    
  }
}


* {
  box-sizing: border-box; 
}


@font-face {
    font-family: DiotimaRoman;
    src: url(css/Lafonts.otf);
}


body {
  margin: 0; 
  font-weight: 500;
  background-color:#000000;	
  font-family: arial;
  -webkit-font-smoothing:antialiased;	
}

section {
  width: 100%;
  padding: 0;
  display: table;
  margin: 0;
  background-color:none;		
  max-width: none;
  height: 30vh;	
  z-index:1000;
  
}

.intro {
  height: 100vh;
  background-color:rgba(0,0,0,.3);	
}

.nexty {
  width: 100%;	
  background-color: rgb(245,245,245);
}

.bioy {
  width: 100%;	
  height: 30vh;	
  background-color: none;
}

.content {
  display: table-cell;
  vertical-align:middle;
}

h1 {
	font-size: 20px;
	line-height:25px;
	letter-spacing:1px;
  	display: block;
  	color: rgb(245,245,245);
  	font-weight: normal;
  	font-family:DiotimaRoman;	
}

h6 {
	font-size: 65px;
	line-height:70px;
	letter-spacing:1px;
  	color: #333;

}

h7 {
	font-size: 105px;
	line-height:110px;
	letter-spacing:1px;
  	color: #fff;
	font-family:DiotimaRoman;

}

h2 {
	font-size: 65px;
	line-height:70px;
  	display: block;
	text-align:left;
	letter-spacing:1px;
  	color: #999;
  	font-weight: normal;
  	font-family:DiotimaRoman;
}



p {
  
  font-size:18px; 
  line-height:24px;
  color: #222;
}

p2 {
  
  font-size:14px; 
  line-height:18px;
  color: #333;
}

#exhibitionz {
	
	position:fixed; 
	bottom:-1%; 
	left:0px;
	width:100%; 
	z-index:1000 !important;
	
}

#exhibitionz-2 {
	
	width:94%; 
	position:fixed; 
	left:3%;
	bottom:2%;
	
}

#exhibitionz-3 {
	
	display:inline;

	
}

#exhibitionz-4 {
	
	display:inline;
	float:right;
	text-align:right;
	
}




a {
  font-weight: normal;
  color: #222;
  font-family: arial;
  position: relative;
  
  &:hover{ 
    opacity: 0.8;
  }
  
  &:active {
    top: 1px;
  }
}

footer {
  padding: 1% 5%;
  text-align:center;
  background-color: rgba(0,0,0, .6);
color: rgb(245,245,245);
  	
 
}


.float {margin:0; padding:0; color:white;}
.left {float:left; margin-left:15%; width:20%;}
.middle{float:left; margin-left:5%; width:20%;}
.right {float:left; margin-left:5%; width:20%;}
.center {float:left; margin-left:15%; width:85%;}



@media only screen and (max-width:650px) and (min-device-width :700px), 
only screen and (max-device-width:480px) and (orientation:portrait) {

.c-menu--push-left,.c-menu--push-right,.c-menu--slide-left,.c-menu--slide-right{width:100%}

#custom-seekbar
{  
  
    width: 85%;
 
}


 	video {
      	padding-left:0;
      	padding-right:0;
      	height:auto;
   	}

	.nexty {
	  margin-left:0%;
	  width: 100%;	
	  background-color:#ffffff; 
	}

	.bioy {
	  margin-left:0%;
	  width: 100%;	
	  height: 50vh;	
	  background-color:#ffffff;
	}
	
	.epi-text {

		font-size: 12px !important;
		line-height:15px;

	 }
	
		
	.c-button{
			font-size: 15px;
		
	}
	
	.c2-button{
			font-size: 15px;
			text-align:left;
	
	}
	
	.c-menu__close{
		font-size: 15px;		
		position:absolute;
		right:20px; 
		top:-15px; 
		text-decoration:none;
	}
	
	.speaker {
	
		display:none;
	
	}
	
	.icono-mail{
		
			display:none;

		}
	
	h2 {
	 	  	font-size: 45px;
			line-height:50px;
	}
	
	#toggler {
	  	 font-size:12px; 
		 
	}
		

	h3 {
	 font-size:12px; 
	 line-height:22px;
  	 color: #999;
	 font-weight: normal;
	 font-family:arial;	
	}

	p {

	  font-size:15px; 
	  line-height:18px;
	  color: #222;
	}
	
	
	#exhibitionz {

		position:fixed; 
		bottom:-2%; 
		left:-5%;
		width:100%; 
		z-index:0 !important;

	}
	
	#exhibitionz-2 {

		width:100%; 
		position:fixed; 
		left:0%;
		bottom:2%;

	}
	
	#exhibitionz-3 {

margin-left:8%;

  

	}
	
	#exhibitionz-4 {


	    right:8%;
	margin-top:2px;

	}
	
	
	.animsition-link {
	
	padding-top:15px;
	
	}
	
	.animsition-link:hover {

	  	color: none;

	}
	

	.left {float:left; margin-left:5%; width:90%;}
	.middle{float:left; margin-left:5%; width:90%;}
	.right {float:left; margin-left:5%; width:90%;}
	.center {float:left; margin-left:5%; width:90%;}



}


@media only screen and (max-device-width:480px) and (orientation:landscape) {
	
	
	


}






#standalone {
    -webkit-transform: scale(0.8);
       -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
            transform: scale(0.8);
}
.popup_visible #standalone {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
}

#play-pause {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border: 1px solid white;
	border-radius: 50%;
	padding: 15px;
}
#play-pause i.icono-play {
	left: 3px;
}

.icono-pause {
	left: 0;
	-webkit-box-shadow: inset 0 0 0 32px, 12px 0 0 0;
	-moz-box-shadow: inset 0 0 0 32px, 12px 0 0 0;
	box-shadow: inset 0 0 0 32px, 12px 0 0 0;
}