@charset "UTF-8";

/********Body********/
body {
/*background:url(../oek-pict/bckgrd-test01.jpg) no-repeat 100% 100%;
background-size:cover;*/
background-color: #000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}


a:link {
	color: #ffffff;
  }

  a:visited {
	color: #595959;
  }


.wavestop{
	fill-opacity: 0.3;
}


.abouttitle{
		display:block;

padding-top:450px;
}

.servicelist00 ul li{
text-decoration: none;
padding-top:30px;
text-align:center;
}


#home{
	position:relative;
	top:-100px;
background: rgb(0, 0, 0);
background: linear-gradient(0deg, rgba(28,28,28,1) 0%, rgba(0,0,0,1) 80%);
background-size:contain;
background-repeat: no-repeat;
background-position: center center;
background-size: 120%;
border:0;
}


#wk-page4{
	background-color: #000000;
}


#wk-page4{
	background-color: #FFF;
}


.topwave {
	position: absolute;
	width:110%;
	top: 0;
	margin-top: -150px;
	text-align: center;
	fill-opacity: 0.;	
	z-index: 250;
}
.topwave2 {
	position:relative;
	text-align: center;
	width: 120%;
	margin-left: -100px;
	opacity: 0.3;
	z-index: 250;
}
.topwave3 {
	position:relative;
	text-align: center;
	width: 150%;
	margin-top:-400px;
	margin-left: -300px;
	opacity: 0.3;
	z-index: 250;
}

.AboutOEK3{
	margin-bottom:-20px;
	margin-right:-50px;
	box-shadow: 0px 20px 20px rgba(0,0,0,0.2);
	z-index: 20;
}

.AboutOEK5{
position:relative;
	margin-top:100px;
	margin-left:-50px;
	box-shadow: 0px 20px 20px rgba(0,0,0,0.2);
	z-index: 20;
}
.AboutOEK4{
	position:relative;
		box-shadow: 0px 20px 20px rgba(0,0,0,0.2);
		z-index: 20;
	}

.AboutOEK6{
	position:relative;
		margin-top:-100px;
		margin-right:-50px;
		box-shadow: 0px 20px 20px rgba(0,0,0,0.2);
		z-index: 20;
	}

	.VideoOEK00{
		position:relative;
		margin-top:-50px;
		margin-right:-150px;
		box-shadow: 0px 20px 20px rgba(0,0,0,0.2);
		z-index: 20;
	}

.watermark-page{
	position: fixed;
	top:20px;
	left:20px;
	z-index: 1000;
	display: none;
}
.watermark-page-projects{
	position: fixed;
	top:20px;
	left:20px;
	z-index: 1000;
}
.ProjectTitle-Page{
	font-size:20px;
	top:50%;
	left:5px;
font-size:15px;
letter-spacing:4pt;
color: #FFF;
text-align: center;
	/*transform: rotate(-90deg);*/
	-webkit-writing-mode: vertical-rl;
	-moz-writing-mode: vertical-rl;
	-ms-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	z-index: 2100;
}



#sigle-oek{
	left:50%;
	top:50%;
	margin-left:-500px;
	margin-top:-200px;
	text-align:center;
position:absolute;
max-height:700px;
max-width:1000px;
z-index:1000;
}
#intro-logo{
position:fixed;
top:0%;
left:50%;
width:250px;
height:80px;
margin-top:-100px;
margin-left:-125px;
opacity:0;
text-align: center;
background-image:url(../svg/INTRO-OEK-logo.svg);
background-color: #000;
background-repeat:no-repeat;
background-position:center center;
background-size:contain;
-webkit-animation: intrologoanim 6s ease-out;
    -moz-animation: intrologoanim 6s ease-out;
    -o-animation: intrologoanim 6s ease-out;
    -ms-animation: intrologoanim 6s ease-out;
    animation: intrologoanim 6s ease-out;
z-index:800010;
}




#intro-logo-projects{
	position:fixed;
	top:0%;
	left:50%;
	width:250px;
	height:80px;
	margin-top:-100px;
	margin-left:-125px;
	opacity:0;
	font-size: 20pt;
		font-weight: 300;
		background-color: #000;
		/*background: -webkit-linear-gradient(265deg, rgb(255, 255, 255) 0%, rgba(36,36,36,1) 6%, rgba(175,175,175,1) 69%);*/
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	text-align: center;
	background-color: #000;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;
	-webkit-animation: intrologoanim 6s ease-out;
		-moz-animation: intrologoanim 6s ease-out;
		-o-animation: intrologoanim 6s ease-out;
		-ms-animation: intrologoanim 6s ease-out;
		animation: intrologoanim 6s ease-out;
	z-index:800010;
	}


.maj-sign-top{
position:fixed;
float:left;
width:150px;
height:auto;
left:0px;
top:0px;
margin-top:30px;
margin-left:30px;
z-index:2000;
}

.title-left{
position:fixed;
float:left;
width:100px;
height:auto;
left:0px;
bottom:50px;
margin-top:0px;
margin-left:10px;
z-index:2000;
}

.oek-insta{
position:fixed;
bottom:15px;
left:15px;
z-index:20000;
}


#catch-copy-intro{
position:fixed;
top:0%;
left:50%;
width:150px;
height:140px;
opacity:0;
margin-top:-20px;
margin-left:-75px;
background-image:url(../svg/LOADING.svg);
background-repeat:no-repeat;
background-position:center center;
background-size:contain;
-webkit-animation: catchcopyanim 4s ease-out;
    -moz-animation: catchcopyanim 4s ease-out;
    -o-animation: catchcopyanim 4s ease-out;
    -ms-animation: catchcopyanim 4s ease-out;
    animation: catchcopyanim 4s ease-out;
z-index:800011;
}
li{
	list-style-type: none;
}

#whitefade {
position:fixed;
top:0px;
left:0px;
width:0%;
height:100%;
background:rgba(0, 0, 0,1);
z-index:800000;


-webkit-animation: whitefadeanim 10s ease-in;
    -moz-animation: whitefadeanim 10s ease-in;
    -o-animation: whitefadeanim 10s ease-in;
    -ms-animation: whitefadeanim 10s ease-in;
    animation: whitefadeanim 10s ease-in;
}

.space-element{
	margin-top:10px;
}
.space-element-watermark{
	position: relative;
	margin-bottom:30px;
}

.title-space{
	position: relative;
	margin-top: 100px;
	margin-bottom: 100px;
}
.centered{
position:absolute;
width:100%;
left:0px;
top:50%;
margin:0 auto;
display:inline-table;
margin-top:-18%;
z-index:3;
}
.title-right-jp{
position:absolute;
width:100px;
height:auto;
top:50px;
right:30px;
z-index:104;
}
.title-right-jp2{
position:absolute;
width:100px;
height:auto;
top:120px;
right:30px;
z-index:104;
}

#logo{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-image:url(../svg/OEK-logo-hom-01.svg);
background-position:center center;
background-size:40%;
background-repeat:no-repeat;
z-index:200;
}
.oek-copyright{
height: 100%;
width: auto;
}
.maj-link {
position:fixed;
width:40px;
height:40px;
right:50px;
top:10px;
/*border:1px solid rgba(255,255,255,0.4);
background-color:(255,255,255,1);*/
z-index:1005;
}

.txt-top{
	font-family: 'Spectral', serif, italic;
	font-size:16px;
	color:rgba(255,255,255,1);
	letter-spacing:1.8pt;
	line-height:1.8;
	padding:10px 10px;
	margin:30px;
	float: left;
	}
.about-small{
font-family: 'Spectral', serif, italic;
font-size:14px;
text-align:center;
color:rgba(255,255,255,1);
letter-spacing:2pt;
line-height:2;
padding:50px 0 30px 0;
}

.about-small-footer {
font-family: 'Spectral', serif, italic;
font-size:14px;
text-align:center;
color:rgba(255,255,255,1);
letter-spacing:1pt;
line-height:2;
padding:50px;
float:left;
}

.about-big{
	font-family: 'Spectral', serif, italic;
font-weight:100;
font-size:30px;
text-align:center;
color:rgba(255,255,255,1);
padding: 100px 200px 100px 2px;
letter-spacing:4pt;
line-height:1.5;
float: left;
}
.about-big-blanc{
	font-family: 'Spectral', serif, italic;
font-weight:100;
font-size:30px;
text-align:center;
color:rgba(255,255,255,1);
padding: 100px 2px;
letter-spacing:4pt;
line-height:1.5;
}
.about-small-noir {
font-family: 'Spectral', serif, italic;
font-size:14px;
text-align:center;
color:rgba(0,0,0,1);
letter-spacing:5pt;
line-height:2;
padding-top:50px;
padding:0px;
float:left;
}
.biobox{
		font-family: 'Spectral', serif, italic;
		font-size:12px;
		color:rgb(0, 0, 0);
		letter-spacing:1.8pt;
		line-height:1.8;
		padding:10px 10px;
		margin:10px;
		float: left;
		}

		.language-boxes{
font-family: 'Spectral', serif, italic;
font-size:14px;
color:rgb(0, 0, 0);
letter-spacing:1.8pt;
line-height:1.8;
border:1px solid rgb(0, 0, 0);
padding:10px 30px;
}
.language-boxes-w{
	font-family: 'Spectral', serif, italic;
	font-size:14px;
	color:rgba(255,255,255,1);
	letter-spacing:1.8pt;
	line-height:1.8;
	border:1px solid rgba(255,255,255,1);
	padding:10px 30px;
	}

	.news-boxes{
font-family: 'Spectral', serif, italic;
font-size:16px;
color:rgba(255,255,255,1);
letter-spacing:1.8pt;
line-height:1.8;
/*border:1px solid rgba(255,255,255,0.3);*/
padding:10px 50px;
margin:30px;
}

.news-boxes-white{
	font-family: 'Spectral', serif, italic;
	font-size:16px;
	color:rgb(0, 0, 0);
	letter-spacing:1.8pt;
	line-height:1.8;
	text-align: center;
	/*border:1px solid rgba(255,255,255,0.3);
	max-width: 900px;
	margin:30px; */
padding:100px 50px;
	background-color: rgba(255,255,255,1);
	position: relative;
	/*max-width: fit-content;
  margin-left: auto;
  margin-right: auto;*/
	}

	.overlay__content {
	font-size: 1.0rem;
	line-height: 1.5;
	margin: 25px;
}

.titlebio {
font-family: 'Spectral', serif, italic;
font-size:20px;
color:rgb(255, 255, 255);
letter-spacing:1.4pt;
line-height:1.6;
}

.textbio {
font-family: 'Spectral', serif, italic;
font-size:16px;
color:rgb(255, 255, 255);
letter-spacing:1.4pt;
line-height:1.6;
}

.textbio-01 {
font-family: 'Spectral', serif, italic;
font-size:24px;
color:rgb(255, 255, 255);
letter-spacing:1.4pt;
line-height: 3em;
}


.textbio-noir {
font-family: 'Spectral', serif, italic;
font-size:18px;
color:rgba(0,0,0,1);
letter-spacing:1.4pt;
line-height:1.6;
}



.textbio-noir-jp {
font-family: 'Spectral', serif, italic;
font-size:15px;
color:rgba(0,0,0,1);
letter-spacing:1.4pt;
line-height:1.8;
}

.title-work{
position:absolute;
float:left;
font-family: 'GFS Didot', serif;
font-size:30px;
width:900px;
padding:20px;
margin:20px;
text-align:center;
color: #FF0;
bottom:-20px;
/*background-color:#FF0;
*/z-index:100;
}


.about-big{
	font-family: 'Spectral', serif, italic;
font-weight:100;
font-size:34px;
text-align:center;
color:rgba(255,255,255,1);
padding: 100px 2px 100px 2px;
letter-spacing:4pt;
line-height:1.5;
}
.about-big-blanc{
	font-family: 'Spectral', serif, italic;
font-weight:100;
font-size:30px;
text-align:center;
color:rgba(255,255,255,1);
padding: 100px 2px;
letter-spacing:4pt;
line-height:1.5;
}
.about-small-noir {
font-family: 'Spectral', serif, italic;
font-size:14px;
text-align:center;
color:rgba(0,0,0,1);
letter-spacing:5pt;
line-height:2;
padding-top:50px;
padding:0px;
float:left;
}
.spacing01 {
/*	font-family: 'Spectral', serif, italic;
*/
font-weight:100;
font-size:30px;
text-align:center;
color:rgba(0,0,0,1);
padding:2px;
margin-top:-100px;
margin-bottom:10px;
letter-spacing:4pt;
line-height:1.5;
z-index:200;
}
.about-big-noir {
font-family: 'Spectral', serif, italic;
font-weight:100;
font-size:30px;
text-align:center;
color:rgba(0,0,0,1);
padding:100px 2px;
margin-top:100px;
/*margin-bottom:50px;*/
letter-spacing:4pt;
line-height:1.5;
}

.about-big-white {
font-family: 'Spectral', serif, italic;
font-weight:100;
font-size:30px;
text-align:center;
color:rgb(255, 255, 255);
padding:100px 2px;
margin-top:100px;
/*margin-bottom:50px;*/
letter-spacing:4pt;
line-height:1.5;
}

.TitlePage {
	position:absolute;
	top:20px;
	left:20px;
font-family: 'Spectral', serif, italic;
font-weight:100;
font-size:30px;
text-align:left;
color:rgb(255, 255, 255);
letter-spacing:4pt;
line-height:1.5;
z-index: 1000;
}

#wk-page2{
	background-color:#ffffff;
	}
	
#wk-page3{
	padding-top: 1o0px;
	background-color:#000000;
	}

#wk-page4{
	background-color:#fff;
	}


.box {
	position: relative;
/*	margin: 2rem;
*/}


.language-boxes{
font-family: 'Spectral', serif, italic;
font-size:14px;
color:rgb(0, 0, 0);
letter-spacing:1.8pt;
line-height:1.8;
border:1px solid rgb(0, 0, 0);
padding:10px 30px;
}
.language-boxes-w{
	font-family: 'Spectral', serif, italic;
	font-size:14px;
	color:rgba(255,255,255,1);
	letter-spacing:1.8pt;
	line-height:1.8;
	border:1px solid rgba(255,255,255,1);
	padding:10px 30px;
	}




	

/*mobile screen*/
  @media screen and (max-width: 768px) {
	  
#logo{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-image:url(../svg/OEK-logo-hom-01.svg);
background-position:center center;
background-size:80%;
background-repeat:no-repeat;
z-index:200;
}
.title-name{
display:none;
}
.title-right-jp{
display:none;
}

.space-element-watermark{
	position: relative;
	margin-bottom:20px;
}
.space-element{
	margin-top:30px;
	margin-bottom: 30px;
}
.bio-text {
font-family: 'Suranna', serif;
font-size: 18px;
font-weight: 100;
line-height: normal;
line-height:2;
text-align:justify;
padding-right:60px;
}

.oek-copyright{
height: 80px;
left:55px;
width: auto;
}


#sigle-oek{
position:absolute;
text-align:center;
padding:20px;
display:inline-block;
left:0px;
top:100px;
padding-top: 100px;
margin: 0 auto;
width:100%;
z-index:100;
}

.oek-mobile{
	padding-top:50px;
}

#oek-menu-top{
position: fixed;
height: auto;
color: #000;
left: 40px;
top: 50px;
width: 100%;
text-align: center;
margin-top:35px;
z-index: 200011;
}

.maj-link{
top:40px;
}


.enter-bt{
position:absolute;
left:0px;
}


#btn_scroll {
	display:none;
	}
	
	#btn_scroll2 {
			display:none;
	}
	

footer {
	visibility:hidden;
	display:none;
	position:fixed;
	left:13px;
	bottom:13px;
	z-index:200;
}

section {
padding-top: 150px;
padding-bottom: 150px;
}

.title-works-section{
position:absolute;
width:100px;
left:50%;
margin-top:-120px;
margin-left:-50px;
z-index:8;
}

.title-about-section{
position:absolute;
width:100px;
left:50%;
margin-top:-90px;
margin-left:-50px;
z-index:8;
}


.ProjectTitle-Page{
	display:none;
}


.background-contact{
	position: relative;
	margin-bottom: 500px;
	background: rgba(0,0,0,0);
	height: auto;
}



.boxecontact{
	position:relative;
	color:#FFF;
	padding-top:50px;
	padding-bottom:50px;
	margin-top:50px;
	margin-bottom:0px;
	height:auto;
	min-height: 700px;;
	background: rgba(0,0,0,0);
	background: linear-gradient(340deg, rgba(0,0,0,1) 0%, rgba(28,28,28,1) 80%);
	-webkit-box-shadow: -5px 14px 29px 9px rgba(0,0,0,0.27);
-moz-box-shadow: -5px 14px 29px 9px rgba(0,0,0,0.27);
box-shadow: -5px 14px 29px 9px rgba(0,0,0,0.27);
	float:left;
	}
.catchcopy-gradient{
		margin-top: 0px;
			font-size: 10pt;
			font-weight: 300;
			line-height: 1;
			background: -webkit-linear-gradient(265deg, rgba(0,0,0,1) 0%, rgba(36,36,36,1) 6%, rgba(175,175,175,1) 69%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
	}
.visual-about{
	display:none;
}

	.copyrightOEK{
		display:none;
	}

	.topwave2 {
		display:none;
	}

	.box-title-about{
		padding-bottom: 0px;
	}

	.title-space{
		position: relative;
		margin-top: 50px;
		margin-bottom: 10px;
	}

	.servicelist00 ul li{
		text-decoration: none;
		padding-top:0px;
		text-align:center;
		}

.img-center{
	text-align: center;
	position:absolute;
}


.cellboxe{
/*font-family: 'Spectral', serif, italic;
*/font-size: 14px;
line-height:1.3;
text-align: center;
color: rgba(255,255,255,1);
letter-spacing: 0pt;
padding: 1px;
}



.boxeresentation{
color:#FFF;
font-size:20px;
/*border:1px solid rgba(255,255,255,0.8);
padding:50px 10px 50px 10px;
margin-bottom:20px;*/
float: none;
    display:inline-block;
	width:100%;
margin: 0 auto;
font-weight:100;
text-align:center;
letter-spacing:2pt;
line-height:1.3;
}
	
	.title-work{
position:absolute;
/*float:left;
*/font-family: 'GFS Didot', serif;
font-size:15px;
width:50px;
padding:20px;
margin:20px;
text-align:center;
color: #FFF;
bottom:-20px;
/*left:50px;
*//*background-color:#FF0;
*/z-index:100;
}


/*
.bckgrdresentation{
height:auto;
padding:50px 50px 50px 50px;
background-color:rgba(0,14,34,1);
background-position:center top;
background-size:cover;
text-align:center;
}*/





.boxe-oli-01{
height:auto;
min-height:500px;
padding:350px 350px 350px 50px;
background-color:#FFF;
background-image:url(../images/oli-02.jpg);
background-position:center top;
background-size:auto;
text-align:center;
}


  }
  
  
  
  
  
  
.bio-text {
font-family: 'Suranna', serif;
font-size: 18px;
font-weight: 100;
line-height: normal;
line-height:2;
text-align:justify;
}

.enter-bt {
position:absolute;
bottom:50px;
left:0px;
margin-bottom:-100px;
margin-left:-50px;
height:300px;
z-index:400;
padding-right:10px;
text-align:center;
border-right:1px solid rgba(255,255,255,0.1);
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
}

.enter-bt:hover{
position:absolute;
bottom:50px;
left:0px;
margin-left:-50px;
margin-bottom:-100px;
height:300px;
border-right:1px solid rgba(255,255,255,1);

z-index:400;
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
}

.intro-bt {
position:absolute;
right:0px;
margin-top:-150px;
margin-left:-50px;
height:300px;
z-index:400;
padding-right:10px;
text-align:center;
border-left:1px solid rgba(255,255,255,0.1);
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
}

.intro-bt:hover{
position:absolute;
right:0px;
margin-left:-50px;
margin-top:-150px;
height:300px;
border-left:1px solid rgba(255,255,255,1);

z-index:400;
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
}
.back-bt {
position:fixed;
bottom:50px;
right:50px;
/*	margin-left:-1%;
*/	width:40px;
height:40px;
z-index:200;
/*
width:80px;
height:80px;*/
padding:10px;
text-align:center;
border-radius:100px;
border:1px solid rgba(255,255,255,0.3);
background-color:rgba(0,0,0,0.2);
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
}
.back-bt:hover{
padding:13px;
border:3px solid rgba(255,255,255,2);
background-color:rgba(255,255,255,0.4);
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
}

/********Structure pages********/
#intro-page {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:2000000;
}

#profil{
position:absolute;
left:80px;
top:50%;
z-index:300000000;
}

.box-about{
position:absolute;
top:50%;
margin-top:-300px;
width:100%;
max-height:600px;
}

.box-content{
max-width:1000px;
height:90%;
padding:30px;
float: none;
margin: 0 auto;
line-height:1.5;
}


#logo-frame{
position:fixed;
height:auto;
color:#333;
background-color: rgba(0,0,0,0);
top:0px;
left:50%;
width:200px;
height:auto;
text-align:center;
padding-top:15px;
margin-left:-100px;
z-index:999900;
}

#oek-menu-top{
position: fixed;
height: auto;
color: #000;
left: 40px;
top: 0px;
width: 250px;
min-width: 250px;
text-align:center;
padding-top: 10px;
z-index: 999000;
}

.oek-menu-top{
position:fixed;
height:auto;
color:#333;
left:50px;
top:0px;
width:100%;
text-align:center;
padding-top:10px;
}

.oek-menu-top.a:hover{
position:fixed;
height:auto;
color:#333;
left:0px;
top:0pxp;
width:100%;
text-align:center;
padding-top:10px;
}

.start-button{
/*padding-top:5px;
*/color:#000;
letter-spacing:2;
z-index: 1001;
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
}

.start-button:hover{
	letter-spacing: 2;
	-webkit-transition: all .4s ease-out;
	-moz-transition: all .4s ease-out;
	-o-transition: all .4s ease-out;
	transition: all .4s ease-out;
}

.tabs-left{
position:absolute;
top:-250px;
left:20px;
width:40px;
z-index:400;
}
.vertical-line{
position:relative;
left:0;
width:100%;
height:100px;
margin-top:20px;
margin-bottom:20px;
border-right:1px solid rgba(255,255,255,0.5);
}
/*.bt-tab{
height:100px;
color:#fff;
position:relative;
border:1px solid rgba(255,255,255,1);
background-color:rgba(0,0,0,0.4);
padding:5px;
margin-bottom:10px;
}*/
.bt-tab-bottom{
height:100px;
color:#fff;
position:relative;
border:1px solid rgba(255,255,255,1);
background-image:url(../svg/bt-works.svg);
background-size:30px;
background-repeat:no-repeat;
background-position:center top;
background-color:rgba(255,255,255,1);
padding:5px;
margin-bottom:15px;
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
}

.btContact-RightSide{
	position:fixed;
	top:50%;
	right:0;
	border:0;
	background-size:30px;
	background-color:rgba(255,255,255,1);
	padding:10px;
	margin-top:-50px;
	z-index: 3000;
	-webkit-transition: all .4s ease-out;
	-moz-transition: all .4s ease-out;
	-o-transition: all .4s ease-out;
	transition: all .4s ease-out;
}

.btContact-RightSide .a{
	top:50%;
	right:0;
	border:0;
	background-size:30px;
	background-color:rgba(255,255,255,1);
	z-index: 3000;
	-webkit-transition: all .4s ease-out;
	-moz-transition: all .4s ease-out;
	-o-transition: all .4s ease-out;
	transition: all .4s ease-out;
}

.btContact-RightSide:hover{
	top:50%;
	right:0;
	border:0;
	background-size:30px;
	background-color:rgb(255, 234, 0);
	z-index: 3000;
	-webkit-transition: all .4s ease-out;
	-moz-transition: all .4s ease-out;
	-o-transition: all .4s ease-out;
	transition: all .4s ease-out;
}

.btBckHome{
	position:fixed;
	top:50%;
	right:0;
	border:0;
	background-size:30px;
	background-color:rgba(255,255,255,1);
	padding:10px;
	margin-top:-50px;
	z-index: 3000;
	-webkit-transition: all .4s ease-out;
	-moz-transition: all .4s ease-out;
	-o-transition: all .4s ease-out;
	transition: all .4s ease-out;
}

.btBckHome .a{
	top:50%;
	right:0;
	border:0;
	background-size:30px;
	background-color:rgba(255,255,255,1);
	z-index: 3000;
	-webkit-transition: all .4s ease-out;
	-moz-transition: all .4s ease-out;
	-o-transition: all .4s ease-out;
	transition: all .4s ease-out;
}

.btBckHome:hover{
	top:50%;
	right:0;
	border:0;
	background-size:30px;
	background-color:rgb(255, 234, 0);
	z-index: 3000;
	-webkit-transition: all .4s ease-out;
	-moz-transition: all .4s ease-out;
	-o-transition: all .4s ease-out;
	transition: all .4s ease-out;
}

.AboutContent{
position: relative;
float:left;
}


.bt-tab-bottom .a{
height:100px;
color:#fff;
position:relative;
border:1px solid rgba(255,255,255,1);
background-image:url(../svg/bt-works.svg);
background-size:30px;
background-repeat:no-repeat;
background-position:center top;
background-color:rgba(255,255,255,1);
padding:5px;
margin-bottom:15px;
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
}

.bt-tab-bottom:hover{
height:100px;
color:#fff;
position:relative;
border:1px solid rgba(255,255,255,1);
background-size:30px;
background-repeat:no-repeat;
background-position:center top;
background-color:rgba(255,255,255,0.4);
padding:5px;
margin-bottom:15px;
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
}
.bt-image{
overflow:hidden;
position:relative;
/*max-width:600px;
max-height:600px;
border-radius:100%;
margin:20px;
text-align:center;
border:10px solid rgba(255,255,255,1);
box-shadow:0px -10px 20px rgba(0,0,0,0.3);*/
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
margin: 0 auto;
}
.fadedarkclick{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.8);
z-index:2;
}

.bt-image.img{
padding:0px;
}
.fadedarkclick{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.6);
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
z-index:2;

}

.fadedarkclick:hover{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.2);
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
z-index:2;
}


/*.bt-image:hover{
overflow:hidden;
position:relative;
max-width:600px;
max-height:600px;
border-radius:100%;
margin:20px;
border:10px solid rgba(255,255,255,1);
box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
text-align:center;
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
margin: 0 auto;

}*/

.bt-image.img:hover{
border-radius:100px;

overflow:hidden;
overflow-style:marquee-line;
padding:-100px;
text-align:center;
max-width:600px;
max-height:600px;
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
margin: 0 auto;
}
.black-circle{
position:relative;
color:#fff;
border-radius:100%;
text-align:center;
font-size:24px;

width:100px;
height:100px;
padding:40px;
left:50%;
bottom:150px;
margin-left:-280px;
background-color:rgba(0,0,0,1);
z-index:1;
}


.black-circle:hover{
position:relative;
color:#fff;
border-radius:100%;
text-align:center;
font-size:24px;

width:100px;
height:100px;
padding:40px;
left:50%;
bottom:150px;
margin-left:-280px;
background-color:rgba(0,0,0,0.5);
z-index:1;
}

.title-work{
position:absolute;
float:left;
font-family: 'GFS Didot', serif;
font-size:30px;
width:900px;
padding:20px;
margin:20px;
text-align:center;
color: #FF0;
bottom:20px;
/*background-color:#FF0;
*/z-index:100;
}

.title-about{
position:absolute;
float:left;
font-family: 'GFS Didot', serif;
font-size:30px;
width:900px;
padding:20px;
margin:20px;
text-align:center;
color: #FF0;
bottom:20px;
/*background-color:#FF0;
*/z-index:100;
}
.click-bt{
position:absolute;
top:0px;
width:100%;
height:100%;
background-color:rgba(0,0,0,1);
z-index:3;
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
}


.click-bt{
position:absolute;
top:200px;
width:100%;
height:100%;
background-color:rgba(0,0,0,0);
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
z-index:5000;
}

.click-bt:hover{
top:0px;
width:90%;
height:90%;
background-color:rgba(0,0,0,0.8);
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
}
.bt-work.black-circle{
background-color:rgba(0,0,0,1);
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
}
.bt-work.black-circle:hover{
background-color:rgba(255,255,255,1);
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
}

.bckgrdwhite{
background-color:rgba(255,255,255,1);
}

.centered-pict{
top:0px;
text-align:center;
}

.centered-pict img{
width:90%;
height:auto;
}


  @media screen and (min-width: 768px) {
.title-works-section{
position:absolute;
width:150px;
right:100px;
top:-100px;
z-index:8;
}

.title-about-section{
position:absolute;
width:150px;
left:100px;
margin-top:-150px;
z-index:8;
}


  }
/********Works pages********/
#bt-backhome{
position:fixed;
top:px;
left:50px;
width:50px;
height:50px;
text-align:right;
background-color:rgba(0,0,0,1);
text-align:center;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
z-index:210;
}
#bt-backhome:hover{
position:fixed;
top:95px;
left:50px;
width:50px;
height:50px;
text-align:right;
background-color:rgba(0,0,0,0.5);
text-align:center;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
z-index:210;
}

#work-desc{
position:fixed;
top:45px;
right:30px;
width:auto;
height:auto;
text-align:right;
z-index:2000;
}


.underline{
text-align:right;
line-height:2;
color:rgba(0,0,0,1);
background-color:#F06;
padding:10px;
}

#header-title-work{
font-size:24px;
font-family: 'Spectral', serif;
color:rgba(51,51,51,1);
text-align:center;
position:fixed;
top:0;
left:0;
width:100%;
height:50px;
border-bottom:1px dotted rgba(0,0,0,0.1);
background-color:rgba(255,255,255,0.6);
padding:60px;
z-index:203;
}
.title-work-desc{
position:relative;
background-color:rgba(0,0,0,1);
min-width:100px;
height:auto;
top:20px;
padding:20px;
margin:20px;
display:inline-block;
  margin: 0 auto;
font-size:24px;
color:#fff;
font-family: 'Spectral', serif, italic;
}

.bcgrddark{
text-align:center;
background-color:#333;
}

.bckgrdresentation{
	height: auto;
	padding: 50px 50px 50px 50px;
	background-color: rgba(0,0,0,1);
	background-position: center top;
	background-size: cover;
	text-align: center;
}

.bckgrdwork2{
height:auto;
padding:100px 50px 100px 50px;
/*background-image:url(../pict-oek-works/bckgrdpres.jpg);
*/
background-color:#000;

background-position:center top;
background-size:cover;
text-align:center;
}

.boxe-oli-01{
height:auto;
min-height:1000px;
margin-top:150px;
padding:350px 50px;
background-image:url(../images/oli-02.jpg);
background-repeat:no-repeat;
background-position:center top;
background-size:cover;
text-align:center;
position:relative;
float:left;
}

.centeredboxe{
text-align:center;
padding:10px 10px 10px 10px;

}

.centeredboxe2{
text-align:center;
padding:10px 100px 300px 100px;

}
.contentpres{
position:absolute;
margin-top:-300px;
color:#FFF;
z-index:2;
}

.boxepresentation{
color:#FFF;
font-size:20px;
/*border:1px solid rgba(255,255,255,0.1);
margin:20px;
padding:50px 10px 50px 10px;*/
float: none;
    display:inline-block;
margin: 0 auto;
font-weight:100;
text-align:center;
letter-spacing:2pt;
line-height:1.3;
}
.boxecell00{
position:relative;
padding-top:50px;
padding-bottom:50px;
margin-top:50px;
margin-bottom:50px;
border-top:1px solid rgba(252,237,52,0.2);
/*border-bottom:1px solid rgba(252,237,52,0.2);
*/float:left;
}

.boxecontact{
	position:relative;
	color:#FFF;
	padding-top:50px;
	padding-bottom:50px;
	margin-top:50px;
	margin-bottom:0px;
	height:450px;
	background: rgb(0,0,0);
	background: linear-gradient(340deg, rgba(0,0,0,1) 0%, rgba(28,28,28,1) 80%);
	-webkit-box-shadow: -5px 14px 29px 9px rgba(0,0,0,0.27);
-moz-box-shadow: -5px 14px 29px 9px rgba(0,0,0,0.27);
box-shadow: -5px 14px 29px 9px rgba(0,0,0,0.27);
	float:left;
	}

.boxecellblk{
position:relative;
color:#FFF;
padding-top:50px;
padding-bottom:10px;
margin-top:10px;
margin-bottom:10px;
/*border-top:1px solid rgba(0,0,0,0.2);
border-bottom:1px solid rgba(0,0,0,0.2);*/
float:left;
}

.copyrightOEK{
	font-weight:100;
	padding-top:80px;
	padding-left: 50px;
position:relative;
float: left;
z-index: 200;
}

.linksSNS{
	border-left: rgb(204, 204, 204);
	padding:20px;
	padding:2px;
	font-weight:100;
	font-size:30px;
	text-align:left;
	color:rgba(255,255,255,1);
	letter-spacing:4pt;
	line-height:1.5;
}
.linksSNS a{
	font-weight:100;
	font-size:15px;
	text-align:center;
	color:rgba(255,255,255,1);
	letter-spacing:4pt;
	line-height:1.5;
}
.linksSNS a:hover{
	font-weight:100;
	font-size:15px;
	text-align:center;
	color:rgba(255,255,255,1);
	letter-spacing:4pt;
	line-height:1.5;
}


.footer-boxe{
	position: relative;
	overflow: hidden;
	margin-top:0px;
padding-bottom:100px;
padding-left:30px;
padding-right:100px;
padding-top:60px;
min-height:200px;
color:#6b6a6a;
background: rgb(28,28,28);
	background: linear-gradient(0deg, rgba(28,28,28,1) 0%, rgba(0,0,0,1) 80%);
	background-size:contain;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100%;
	border:0;
float: left;
}

.videocacth{
	position:absolute;
	left:0;
	bottom:0;
	margin-bottom:50px;
	z-index: 300;
}

.videoshade{
	position: absolute;
	background-color: rgba(0,0,0,0.8);
	margin-top: 0px;
	z-index: 2;
	width:100%;
	height:1000px;
}

.bckgrd-branding{
	position:relative;
	background-color: rgba(226,226,226,1);
	padding:30px;
}
.bckgrd-branding-white{
	position:relative;
	background-color: rgb(255, 255, 255);
	padding:30px;
}
.bckgrd-branding-purple{
	position:relative;
	background-color: rgb(154, 51, 204);
	padding:30px;
}
.gridlist{
float: left;
}

.W-spaces{
	padding: 100px 30px;
	float: left;
}


.headershade{
	position: absolute;
	background: rgb(0, 0, 0);
background: linear-gradient(0deg, rgba(40,40,40,1) 10%, rgba(40,40,40,0.4) 50%, rgba(40,40,40,0) 83%);
	margin-top: 0px;
	z-index: 2;
	width:100%;
	height:1000px;
}
.fullvideo{
	position: relative;
	overflow:hidden;
	height:100vh;
}

.project-headtop{
	position: relative;
	top:0px;
	left:0;
	margin-top: -80px;
	overflow:hidden;
	height:100vh;
	z-index: 10;
}

.project-content {
	position: relative;
	float: left;
}
.project-content img {
	position: relative;
	padding-top: 50px;
	padding-bottom: 50px;
	align:center;
}

.title-section{
	margin-top:100px;
}


/********Works pages ***end********/


.about-small{
/*font-family: 'Spectral', serif, italic;
*/font-size:14px;
text-align:center;
color:rgba(255,255,255,1);
letter-spacing:5pt;
line-height:2;
padding-top:50px;
padding:0px;
float:left;
}
.about-big{
/*	font-family: 'Spectral', serif, italic;
*/
font-weight:100;
font-size:30px;
text-align:center;
color:rgba(255,255,255,1);
padding:2px;
letter-spacing:4pt;
line-height:1.5;
}
.box-title-about{
	padding-bottom: 70px;
}

.Bt-Project{
	position: relative;
	overflow: hidden;
	float: left;
}

.fade-btClick {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.7);
	float: left;
	-moz-transition: all .4s ease-out;
	-o-transition: all .4s ease-out;
	transition: all .4s ease-out;
z-index: 400;
}


.title-bt{
	position: absolute;
	margin-left:20px;
	top:50%;
	font-weight:100;
	font-size:30px;
	text-align:left;
	color:rgba(255,255,255,1);
	padding:2px;
	letter-spacing:4pt;
	line-height:1.5;
	z-index: 410;
}

.desc-bt{
	position: absolute;
	top:50%;
	font-weight:100;
	font-size:15px;
	margin-left:30px;
	margin-top: 50px;
	text-align:left;
	color:rgba(255,255,255,1);
	padding:2px;
	letter-spacing:0pt;
	line-height:1.5;
	z-index: 420;
}

.desc{
	font-weight:100;
	font-size:25px;
	text-align:left;
	color:rgba(255,255,255,1);
	padding:30px;
	letter-spacing:1pt;
	line-height:1.5;
}

.desc-jp{
	font-family:'Times New Roman', Times, serif;
	font-weight:100;
	font-size:20px;
	text-align:left;
	color:rgba(255,255,255,1);
	letter-spacing:3pt;
	line-height:2;
	padding:30px;
}

.Bt-Project .fade-btClick:hover{
	background-color: rgba(0,0,0,0);

	-moz-transition: all .4s ease-out;
	-o-transition: all .4s ease-out;
	transition: all .4s ease-out;
}


.titleservice00{
	position:relative;
/*font-family: 'Spectral', serif, italic;
*/font-size:14px;
text-align:center;
color:rgba(255,255,255,1);
letter-spacing:3pt;
line-height:2;
padding-top:100px;
padding:30px;
float:left;
}
.titleserviceblk{
	position:relative;
/*font-family: 'Spectral', serif, italic;
*/font-size:40px;
text-align:left;
color:rgba(255,255,255,1);
letter-spacing:5pt;
line-height:2;
padding-top:100px;
margin-top:0px;
padding:30px;
float:left;
}

.titleserviceWhite{
	position:relative;
/*font-family: 'Spectral', serif, italic;
*/font-size:40px;
text-align:center;
color:rgba(255,255,255,1);
letter-spacing:5pt;
line-height:2;
padding-top:100px;
margin-top:0px;
padding:30px;
float:left;
}

.content-text{
	position:relative;
/*font-family: 'Spectral', serif, italic;
*/font-size:40px;
text-align:center;
color: linear-gradient(0deg, rgba(28,28,28,1) 0%, rgba(51,51,51,1) 80%);
letter-spacing:5pt;
line-height:2;
padding-top:100px;
margin-top:-100px;
padding:30px;
float:left;
}
.background-contact{
	position: relative;
	margin-bottom: 500px;
	background: rgba(0,0,0,1);
	background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(28,28,28,1) 80%);
	height: 500px;
}
.contact-text{
	position:relative;
/*font-family: 'Spectral', serif, italic;
*/font-size:16px;
text-align:left;
color:rgba(255,255,255,1);
letter-spacing:5pt;
line-height:2;
padding-top:100px;
padding:30px;
float:left;
}
.wave-contact{
	position:relative;
	width:100%;
text-align: center;	
bottom: 50px;
	z-index: 100;
}
.cellboxe{
/*font-family: 'Spectral', serif, italic;
*/font-size: 20px;
text-align: center;
color: rgba(255,255,255,1);
letter-spacing: 2pt;
line-height:1.3;
margin-top: 150px;
/*padding: 50px;
*/}



.bt-contact{
width:auto;
height:auto;
border:1px solid rgba(255,255,255,0.3);
color:rgba(255,255,255,1);
text-align:center;
border-radius: 100px;
letter-spacing:5pt;
padding:15px 40px;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
display:inline-block;
margin: 50px;
float:right;
}

.bt-contact:hover{
border:1px solid rgba(255,255,255,1);
color:rgba(255,255,255,1);
text-align:center;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
}



.bt-allworks{
	font-size:20px;
width:500px;
height:auto;
border:4px solid rgba(252,237,52,1);
color:rgba(255,255,255,1);
text-align:center;
padding:50px;
background-color:rgba(252,237,52,0);
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
display:inline-block;
margin: 0 auto;
}

.bt-allworks:hover{
border:4px solid rgba(252,237,52,0.4);
color:rgba(0,0,0,1);
background-color:rgba(252,237,52,1);
text-align:center;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
}

.servicelist00{
/*line-height:50px;
margin-top:50px;
*/margin-bottom:50px;
padding-top:50px;
text-align:center;
letter-spacing:2pt;
color:rgba(255,255,255,1);
}
.text-links{
line-height:50px;
/*margin-top:50px;
*/margin-bottom:50px;
padding-top:50px;
text-align:center;
letter-spacing:5pt;
color:rgba(255,255,255,1);
}

#navigation{
	background-color: rgba(0,0,0,0);
}






.yellowtext{
	color:rgba(252,237,52,1);
	font-size:16px;
	margin-bottom:50px;
}



.pictoabouttop{
	position:absolute;
margin-top:-80px;
padding:0;
text-align:center;
}


.footerlogo{
/*	margin-top:-50px;
*/
	margin-top:50px;
}

.btGalleryWorks{
	position:relative;
		font-family: 'Playfair Display', serif;
		height:200px;
font-size:31px;
/*line-height:2pt;
*/text-align:center;
	padding:100px;
	background-color:rgba(255,204,0,1);
	color:rgba(0,0,0,1);
	float:left;
	-webkit-transition: .5s ease;
            transition: .5s ease;
}

.btGalleryWorks:hover{
	position:relative;
		font-family: 'Playfair Display', serif;
		height:200px;
font-size:31px;
/*line-height:5pt;
*/text-align:center;
	padding:50px;
	background-color:rgba(255,255,255,1);
	color:rgba(0,0,0,1);
	float:left;
	-webkit-transition: .5s ease;
            transition: .5s ease;
}




/*gallery*/

#gallery-page{
	margin:0 30px 0 30px;
	}
	
.bt-gallery{
/*line-height:50px;
margin-top:50px;
padding-top:50px;*/
	position:relative;
margin-bottom:50px;
text-align:center;
letter-spacing:5pt;
color:rgba(0,0,0,1);
overflow:hidden;

-webkit-transition: .5s ease;
            transition: .5s ease;
			z-index:20;
}


.bt-gallery-click{
	position:absolute;
		background: rgb(2,0,36);
background: linear-gradient(0deg, rgba(2,0,36,0) 0%, rgba(1,0,19,0.4) 46%, rgba(0,0,0,0.5) 100%);
		height:600px;
		width:100%;
margin-left:-500px;
padding:0;
text-align:center;
letter-spacing:1pt;

-webkit-transition: .5s ease;
            transition: .5s ease;
z-index:10;
	}
	
.bt-gallery .bt-gallery-click{
position:absolute;
background: linear-gradient(0deg, rgba(2,0,36,0) 10%, rgba(1,0,19,0.4) 70%, rgba(0,0,0,0.5) 100%);
		height:330px;
		width:100%;
margin-left:0px;
padding:0;
text-align:center;

-webkit-transition: .5s ease;
            transition: .5s ease;
z-index:10;
}

.bt-gallery:hover .bt-gallery-click{
position:absolute;
	background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 46%, rgba(255,255,255,0.5) 100%);
		height:330px;
		width:100%;
margin-left:0px;
padding:0;
text-align:center;

-webkit-transition: .5s ease;
            transition: .5s ease;
z-index:10;
}

.bt-gallery-clickmessage{
position:absolute;
color:#fff;
font-weight:300;
font-size:14px;
text-align:center;
letter-spacing:0pt;
	background-color:rgba(0,0,0,1);
		min-height:50px;
		width:100%;
		margin-top:50%;
		padding-top:-25px;
border:20px solid rgba(0,0,0,1);
-webkit-transition: .5s ease;
            transition: .5s ease;
z-index:15;
}
	
.bt-gallery .bt-gallery-clickmessage{
position:absolute;
color:#fff;
font-weight:300;
font-size:14px;
text-align:center;
letter-spacing:0pt;
	background-color:rgba(0,0,0,1);
		min-height:50px;
		width:100%;
		margin-top:-500px;
		padding-top:-25px;
border:20px solid rgba(0,0,0,1);
-webkit-transition: .5s ease;
            transition: .5s ease;
z-index:15;
}

.bt-gallery .hr{
		width:150px;
			background-color:rgba(255,255,0,1);
			border:none;

}


.bt-gallery:hover .bt-gallery-clickmessage{
position:absolute;
	background-color:rgba(0,0,0,1);
	top:0;
	left:50%;
		height:auto;
		width:220px;
margin-left:-110px;
margin-top:18%;
		padding-top:-0px;
padding:5px;
text-align:center;
box-shadow: 0px 10px 15px rgba(0,0,0,0.3);

-webkit-transition: .5s ease;
            transition: .5s ease;
z-index:25;
}



.title-gallery{
	position:relative;
	color:#000;
	font-family: 'Playfair Display', serif;
font-size:31px;
line-height:1.2;
letter-spacing:2pt;
text-align:center;
padding-top:100px;
padding-bottom:30px;
float:left;
}

.title-gallery-desc{
	position:relative;
	color:#000;
	font-family: 'Playfair Display', serif;
font-size:31px;
letter-spacing:2pt;
line-height:1.2;
text-align:left;
padding-top:100px;
padding-bottom:30px;
float:left;
}

.title-gallery-desc-w{
	color:#fff;
	font-family: 'Playfair Display', serif;
font-size:31px;
letter-spacing:2pt;
line-height:1.2;
}

.title-galleryGrid{
	position:relative;
	color:#000;
font-size:31px;
	font-family: 'Playfair Display', serif;
line-height:1.2;
letter-spacing:2pt;
text-align:center;
margin-top:100px;
padding-top:100px;
padding-bottom:80px;
float:left;
}

.title-galleryGrid2{
	position:relative;
	color:#000;
font-size:31px;
font-family: 'Playfair Display', serif;
line-height:1.2;
text-align:center;
margin-top:600px;
padding-bottom:80px;
}

.desc-gallery-grid-title{
	color:#000;
font-weight:300;
font-weight:bold;
font-size:16px;
text-align:center;
letter-spacing:1pt;
padding-top:20px;
}

.desc-gallery-grid-desc{
	color:#000;
font-weight:300;
font-weight:bold;
font-size:10px;
text-align:center;
letter-spacing:0pt;
}

.desc-gallery{
	position:relative;
	color:#000;
font-size:14px;
margin-bottom:30px;
text-align:center;
}
.desc-gallery-left{
	position:relative;
	color:#000;
font-size:14px;
margin-bottom:30px;
text-align:left;
}
.catchcopy-gradient{
	margin-top: 50px;
		font-size: 30pt;
		font-weight: 300;
		line-height: 1.5;
		background: -webkit-linear-gradient(265deg, rgba(0,0,0,1) 0%, rgba(36,36,36,1) 6%, rgba(175,175,175,1) 69%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	
}

.catchcopy-gradient2{
	margin-top: 50px;
		font-size: 20pt;
		font-weight: 300;
		line-height: 1.5;
		background: -webkit-linear-gradient(265deg, rgba(0,0,0,1) 0%, rgba(36,36,36,1) 6%, rgba(175,175,175,1) 69%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	
}


.title-gallery-left{
	color:#000;
font-size:31px;
line-height:1.2;
text-align:left;
padding-top:50px;
padding-bottom:30px;
float:left;
}

.desc-gallery-content{
	position:relative;
	color:#000;
font-size:14px;
margin-bottom:30px;
padding:30px;
text-align:left;
}

.desc-gallery-content-border{
	position:relative;
	color:#000;
font-size:14px;
margin-bottom:30px;
padding:30px;
text-align:left;
border-top:1px dotted rgba(0,0,0,0.3);
border-bottom:1px dotted rgba(0,0,0,0.3);
}


.gallery-aligncenter{
	position:relative;
	align:center;
	float:left;
}


.gallery-aligncenter .img{
	align:center;
}

.gallery-picture-marg{
	padding:5px;
		align:center;
}

.gallery-desc{
	position:relative;/*
	padding-top:50%;
	margin-top:-100px;*/
	color:#000;
font-size:14px;
padding:30px;
}

.gallery-cell{
	position:relative;
	float:left;
}

/*gallery*/




@-webkit-keyframes opacityanim  {	0% {opacity:0;} 100% {opacity:1;} }
@-moz-keyframes opacityanim {	0% {opacity:0;} 100% {opacity:1;} }
@-ms-keyframes opacityanim {	0% {opacity:0;} 100% {opacity:1;} }
@-o-keyframes opacityanim {	0% {opacity:0;} 100% {opacity:1;} }
@keyframes opacityanim {	0% {opacity:0;} 100% {opacity:1;} }

@-webkit-keyframes opacityanim01  {	0% {opacity:0;} 50% {opacity:0;} 100% {opacity:1;} }
@-moz-keyframes opacityanim01 {	0% {opacity:0;} 50% {opacity:0;} 100% {opacity:1;} }
@-ms-keyframes opacityanim01 {	0% {opacity:0;} 50% {opacity:0;} 100% {opacity:1;} }
@-o-keyframes opacityanim01 {	0% {opacity:0;} 50% {opacity:0;} 100% {opacity:1;} }
@keyframes opacityanim01 {	0% {opacity:0;} 50% {opacity:0;} 100% {opacity:1;} }

@-webkit-keyframes opacityanim02  {	0% {opacity:0;} 50% {opacity:0.3;} 100% {opacity:0;} }
@-moz-keyframes opacityanim02 {	0% {opacity:0;} 50% {opacity:0.3;} 100% {opacity:0;} }
@-ms-keyframes opacityanim02 {	0% {opacity:0;} 50% {opacity:0.3;} 100% {opacity:0;} }
@-o-keyframes opacityanim02 {	0% {opacity:0;} 50% {opacity:0.3;} 100% {opacity:0;} }
@keyframes opacityanim02 {	0% {opacity:0;} 50% {opacity:0.3;} 100% {opacity:0;} }



@-webkit-keyframes intrologoanim {	0% {opacity:0;top:1%;} 50% {opacity:1;top:50%;} 90% {opacity:1;top:50%;} 100% {opacity:0;top:48%} }
@-moz-keyframes intrologoanim {	0% {opacity:0;top:1%;} 50% {opacity:1;top:50%;} 90% {opacity:1;top:50%;} 100% {opacity:0;top:48%} }
@-ms-keyframes intrologoanim {	0% {opacity:0;top:1%;} 50% {opacity:1;top:50%;} 90% {opacity:1;top:50%;} 100% {opacity:0;top:48%} }
@-o-keyframes intrologoanim {	0% {opacity:0;top:1%;} 50% {opacity:1;top:50%;} 90% {opacity:1;top:50%;} 100% {opacity:0;top:48%} }
@keyframes intrologoanim {	0% {opacity:0;top:1%;} 50% {opacity:1;top:50%;} 90% {opacity:1;top:50%;} 100% {opacity:0;top:48%} }


@-webkit-keyframes catchcopyanim {	0% {opacity:0;top:55%;} 60% {opacity:1;top:50%;} 80% {opacity:1;top:50%;} 100% {opacity:0;top:50%} }
@-moz-keyframes catchcopyanim {	0% {opacity:0;top:55%;} 60% {opacity:1;top:50%;} 80% {opacity:1;top:50%;} 100% {opacity:0;top:50%} }
@-ms-keyframes catchcopyanim {	0% {opacity:0;top:55%;} 60% {opacity:1;top:50%;} 80% {opacity:1;top:50%;} 100% {opacity:0;top:50%} }
@-o-keyframes catchcopyanim {	0% {opacity:0;top:55%;} 60% {opacity:1;top:50%;} 80% {opacity:1;top:50%;} 100% {opacity:0;top:50%} }
@keyframes catchcopyanim {	0% {opacity:0;top:55%;} 60% {opacity:1;top:50%;} 80% {opacity:1;top:50%;} 100% {opacity:0;top:50%} }


@-webkit-keyframes whitefadeanim {	0% {opacity:1;width:100%;} 50% {opacity:1;width:100%;} 80% {opacity:0;width:100%} 100% {opacity:0;width:0;}}
@-moz-keyframes whitefadeanim {	0% {opacity:1;width:100%;} 50% {opacity:1;width:100%;} 80% {opacity:0;width:100%} 100% {opacity:0;width:0;}}
@-ms-keyframes whitefadeanim {	0% {opacity:1;width:100%;} 50% {opacity:1;width:100%;} 80% {opacity:0;width:100%} 100% {opacity:0;width:0;}}
@-o-keyframes whitefadeanim {	0% {opacity:1;width:100%;} 50% {opacity:1;width:100%;} 80% {opacity:0;width:100%} 100% {opacity:0;width:0;}}
@keyframes whitefadeanim {	0% {opacity:1;width:100%;} 50% {opacity:1;width:100%;} 80% {opacity:0;width:100%} 100% {opacity:0;width:0;}}



@-webkit-keyframes leftrightanim {	0% {opacity:0;margin-left:-100px;} 100% {opacity:1;margin-left:0px;}}
@-moz-keyframes leftrightanim {	0% {opacity:0;margin-left:-100px;} 100% {opacity:1;margin-left:0px;}}
@-ms-keyframes leftrightanim {	0% {opacity:0;margin-left:-100px;} 100% {opacity:1;margin-left:0px;}}
@-o-keyframes leftrightanim {	0% {opacity:0;margin-left:-100px;} 100% {opacity:1;margin-left:0px;}}
@keyframes leftrightanim {	0% {opacity:0;margin-left:-100px;} 100% {opacity:1;margin-left:0px;}}

@-webkit-keyframes coloranim {	0% {background-color:rgba(204,204,153,0.9);} 40% {background-color:rgba(60,0,0,0.8);} 80% {background-color:rgba(100,60,60,0.9);} 100% {background-color:rgba(204,204,153,0.9);}}
@-moz-keyframes coloranim {	0% {background-color:rgba(204,204,153,0.9);} 40% {background-color:rgba(60,0,0,0.8);} 80% {background-color:rgba(100,60,60,0.9);} 100% {background-color:rgba(204,204,153,0.9);}}
@-ms-keyframes coloranim {	0% {background-color:rgba(204,204,153,0.9);} 40% {background-color:rgba(60,0,0,0.8);} 80% {background-color:rgba(100,60,60,0.9);} 100% {background-color:rgba(204,204,153,0.9);}}
@-o-keyframes coloranim {	0% {background-color:rgba(204,204,153,0.9);} 40% {background-color:rgba(60,0,0,0.8);} 80% {background-color:rgba(100,60,60,0.9);} 100% {background-color:rgba(204,204,153,0.9);}}
@keyframes coloranim {	0% {background-color:rgba(204,204,153,0.9);} 40% {background-color:rgba(60,0,0,0.8);} 80% {background-color:rgba(100,60,60,0.9);} 100% {background-color:rgba(204,204,153,0.9);}}







/********HOME pages********/
/********HOME pages ***end********/



/********WORKS pages********/
/********WORKS pages ***end********/


/********ABOUT pages********/
/********ABOUT pages ***end********/


/********CONTACT pages********/
/********CONTACT pages ***end********/





/********ANIMATIONS********/
/********ANIMATIONS ***end********/