/*
font-family: 'Oranienbaum', serif;
font-family: 'Poppins', sans-serif
*/



/* ============================================================
  RESET - http://meyerweb.com/eric/tools/css/reset/
============================================================ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
	}

ol, ul {
	list-style: none;
	}
blockquote, q {
	quotes: none;
	}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
/* ============================================================
  BOX SIZING & CLEARFIX
============================================================ */
*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}


/* ============================================================
  HTML & BODY
============================================================ */

body{
	background-color: #484242;

	background-color: #373333;
	background-color: #3e3939;
	}
body.is-loading #viewport{
	display: none
	}
:root{
	font-size: 62.5%;
	color: #c8c7c7;
	color: #a8a6a6;
	}
h1{
	font-family: 'Oranienbaum', serif;
	font-size: clamp(7rem, 8.5vw, 20rem);
	font-size: clamp(5rem, 8.5vw, 20rem);
	font-size: clamp(4rem, 8.5vw, 20rem);
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-webkit-transform: translate3d(0,0,0) !important;
	transform: translate3d(0,0,0) !important;
	text-transform: uppercase;
	margin-bottom: 3vh;

	}
h5{
	font-family: 'Oranienbaum', serif;
	font-size: clamp(2rem, 2vw, 3rem);
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-webkit-transform: translate3d(0,0,0) !important;
	transform: translate3d(0,0,0) !important;
	text-transform: uppercase;
	margin-bottom: 3vh;

	}

/*<p>
p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
If 2.5vw is less than 1rem, the font-size will be 1rem.
If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem.
Otherwise, it will be 2.5vw.
</p>*/

 



h2{
	font-family: 'Oranienbaum', serif;
	font-size: clamp(5rem, 6.5vw, 15rem);
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-webkit-transform: translate3d(0,0,0) !important;
	transform: translate3d(0,0,0) !important;
	text-transform: uppercase;
	margin-bottom: 3vh;
	}



	
p{
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	font-size: clamp(1.8rem, 1.2vw, 2.8rem);
	line-height: 1.5;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	}
p.small{
	font-size: clamp(1.8rem, 1vw, 2.4rem);
	}
p b{
	font-weight: 500;
	}
p a{
	color: #a8a6a6;
	text-decoration: none;
	transition: all 0.50s ease-in-out;
	}
p a:hover{
	color: #FFF;
	transition: all 0.50s ease-in-out;
	}











/* ============================================================
  Content Layout
============================================================ */

#viewport {
	overflow: hidden; 
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
  }

.main-content{
	padding: 0px 0vw;
	}


/* ============================================================
  PROJECT
============================================================ */

.project-01{
	padding: 10vh 8vw;
	}
.project-02{
		padding: 0vh 0vw;
		}
		.project-02.last{
			padding: 0vh 0vw 10vh 0vw;
			}
.project-showcase-wrap{
	width: 100%;
	max-width: 1700px;

	margin: auto;
	}
.project-image,
.project-image img{
	width: 100%;
	height: auto;
	line-height: 0px;
	margin: 0px;
	padding: 0px;
	font-size: 0px;

	}
.section-cut{
	padding-bottom: 0px;
	}
			





/* ============================================================
  WORK SHOWCASE
============================================================ */
.work-showcase{
	padding: 0vh 8vw 10vh 8vw;
	}
.work-showcase-wrap{
	width: 100%;
	max-width: 1700px;
	margin: auto;
	}


.feature-showcase{
	width: 80%;
	margin-top: 15vh;

	}
.feature-showcase.project-right{
	float: right;

	}
.feature-showcase.project-left{
	float: left;
			
	}
.feature-showcase.first-project{
	margin-top: 0vh;
	}
.clear-both{
	clear: both;
	width: 100%;
	height: 1px;
	}




.image-wrap{
	overflow: hidden;
	font-size: 0px;
	line-height: 0px;
	}
.feature-showcase img{
	width: 100%;
	height: auto;
	transition: all 0.75s ease-in-out;
	}
.work-showcase-wrap a:hover img {
	transform: scale(1.1);
	transition: all 0.75s ease-in-out;
	}



.work-showcase-wrap a{
	color: #a8a6a6;
	text-decoration: none;
	}
.work-showcase-wrap a p.client-name{
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 15px 0px 0px 0px
	}
.work-showcase-wrap a p.client-task{
	margin: 0px 0px 0px 0px;
	text-transform: uppercase;
	}













/* LOVELY */
.lovely h1{
	color: #82a77b;
	}
.lovely .color{
	background-color: #82a77b;
	}

/* RAylven */
.raylven h1{
	color: #c39d63;
	}
.raylven .color{
	background-color: #c39d63;
	}
/* Viotas */
.viotas h1{
	color: #c36665
	}
.viotas .color{
	background-color: #f3cab5;
	}
/* Angels */
.angels h1{
	color: #97b8a3
	}
.angels .color{
	background-color: #97b8a3
	}
/* Almost Sexy */
.almostsexy h1{
	color: #c5beaa
	}
.almostsexy .color{
	background-color: #c5beaa
}
/* caesarstone */

.caesarstone h1{
	color: #a7bbc3
	}
.caesarstone .color{
	background-color: #a7bbc3
	}
/* yaron */

.yaron h1{
	color: #a6cfe2
	}
.yaron .color{
	background-color: #a6cfe2
	}

/* ownehr */

.ownehr h1{
	color: #66b7ad
	}
.ownehr .color{
	background-color: #66b7ad
	}
/* King David */

.king h1{
	color: #e5b37e
	}
.king .color{
	background-color: #e5b37e
	}

/* ============================================================
  INTRO
============================================================ */
.main-intro{
	padding: 20vh 8vw 15vh 8vw;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	}
.project-title{
width: clamp(30rem, 70vw, 200rem);	
overflow: hidden;
display: block;
}
.project-description{
width: 100%;
overflow: hidden;
display: block;
}


/* ============================================================
  SECTION INFO
============================================================ */
.job-info{
	padding: 0vh 8vw 0vh 8vw;
	}
.job-info-wrap{
	padding: 5vh 5vw 5vh 0vw;
	width: 100%;
	overflow: hidden;
	display: block;
	border-top: 1px solid#5e5959
	}
.job-info.first-block .job-info-wrap{
	border-top: 0px solid#5e5959;
	padding: 0vh 5vw 5vh 0vw;
	}
.job-info.last-block{
	padding-bottom: 15vh;
	}
.job-info.last-block .job-info-wrap{
	border-bottom: 1px solid#5e5959
	}
.job-info h2{
	margin-bottom: 0px
	}
.job-year{
	margin-bottom: 30px;
	}



















	.main-intro .mask-title{
		overflow: hidden;

		display: block;
	
	}
	.main-intro .mask-title span{

		display: block;
	}










@media (min-width: 688px){


}



@media (min-width: 992px){
.feature-showcase{
	width: 45%;
	margin-top: 15vh;

	}

}



@media (min-width: 1312px){
	.job-info-wrap,
	.project-description{
		max-width: 1200px;
	
		}

}

@media (min-width: 2000px){
	.job-info-wrap,
	.project-description{
		max-width: 1500px;
		
		
		}

}





/* ============================================================
  LOADING
============================================================ */
#loading-container{
	width: 100vw;
	height: 100vh;
	background-color: #534d4d;
	position: absolute;
	z-index: 999;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	}

/* LOADER */
.loader .progress {

	position: absolute;
	left: 0;
	top: 0;
	width: 300px;
	height: 10px;
	}
.loader {
	border: 7px solid #484242;
	border-top: 7px solid #b0aca9;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: spin 0.8s linear infinite;
		margin: 50px
	}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
	}
/* ============================================================
  NEXT CASE LINK
============================================================ */
h3{
	font-family: 'Oranienbaum', serif;
	font-size: clamp(5rem, 8.5vw, 20rem);
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-webkit-transform: translate3d(0,0,0) !important;
	transform: translate3d(0,0,0) !important;
	text-transform: uppercase;
	margin-bottom: 3vh;
	}
.see-case h3{
	display: block;
	width: 100%;
	}
.see-case h3.prev-case{
	text-align: right;
	}
.see-case h3 a{
	text-decoration: none;
	color: #a8a6a6;
	display: inline-block;
	width: auto;
	min-width: 0px;
	padding-right: 5vw;
	background: transparent url("../img/arrow.svg") no-repeat;
	background-size: auto 90%; 
	background-position: center right;
	transition: all 0.50s ease-in-out;
	}
.see-case h3.prev-case a{
	background: transparent url("../img/arrow-p.svg") no-repeat;
	background-size: auto 90%; 
	background-position: center left;
	}
.see-case h3.prev-case a{
	padding-right: 0vw;
	padding-left: 5vw;
	}
.see-case h3.prev-case a:hover{
	padding-right: 0vw;
	padding-left: 5vw;
	}
.see-case h3 a div{
	background-color: #3e3939;
	display: inline-block;
	}
.see-case h3 a:hover{
	color: #a8a6a6;
	min-width: 100%;
	transition: all 0.50s ease-in-out;
	}



/* ============================================================
  HEADER
============================================================ */
header{
	text-align: right;
	position: absolute;
	width: 100%;
	}
.header-wrapper{
	padding: 5vh 0px 10vh 0px;
	width: 90%;
	margin: auto
	}
header a{
	font-family: 'Oranienbaum', serif;
	font-size: 3rem;
	font-size: clamp(30px, 3.2vw, 40px);
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-webkit-transform: translate3d(0,0,0) !important;
	transform: translate3d(0,0,0) !important;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;
	vertical-align: middle;
	color: #a8a6a6;
	transition: all 0.50s ease-in-out;
	}
header a.active{
	color: #FFF
	}
header a:hover{
	color: #FFF;
	transition: all 0.50s ease-in-out;
	}
header .divider{
	display: inline-block;
	width: clamp(15px, 2vw, 30px);
	height: 1px;
	background-color: #a8a6a6;
	margin: 0px 7px;
	vertical-align: middle;
	}
/* ============================================================
  FOOTER
============================================================ */
footer{
	padding: 0vh 8vw 5vh 8vw;
	}
.footer-wrap{
	width: 100%;
	margin: auto;
	}