/* 2016 licuit.com */

html {
    position: relative;
	height: 100%;
    min-height: 100%;
}

html.desktop{
	overflow-y:scroll;
}

body {
    margin: 0;
	height: 100%;
}

/* RESETS */
html.desktop a:hover{
	text-decoration:none;
}

ul{
	padding:0;
	margin:0;
}

*:focus {
    outline: none
}

a{
	outline: 0 !important;
}

a:active, a:focus{
	text-decoration:none !important;
}

::selection {
  background: #f7eaed;
}
::-moz-selection {
  background: #f7eaed;
}

/* TYPO */

@font-face {
  font-family: 'Didot';
  src: url('../fonts/Didot-HTF-M06-Medium-Ital.eot?#iefix') format('embedded-opentype'),  url('../fonts/Didot-HTF-M06-Medium-Ital.otf')  format('opentype'),
	     url('../fonts/Didot-HTF-M06-Medium-Ital.woff') format('woff'), url('../fonts/Didot-HTF-M06-Medium-Ital.ttf')  format('truetype'), url('../fonts/Didot-HTF-M06-Medium-Ital.svg#Didot-HTF-M06-Medium-Ital') format('svg');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Didot';
  src: url('../fonts/Didot-HTF-L06-Light-Ital.eot?#iefix') format('embedded-opentype'),  url('../fonts/Didot-HTF-L06-Light-Ital.otf')  format('opentype'),
	     url('../fonts/Didot-HTF-L06-Light-Ital.woff') format('woff'), url('../fonts/Didot-HTF-L06-Light-Ital.ttf')  format('truetype'), url('../fonts/Didot-HTF-L06-Light-Ital.svg#Didot-HTF-L06-Light-Ital') format('svg');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Didot';
  src: url('../fonts/Didot-HTF-B06-Bold-Ital.eot?#iefix') format('embedded-opentype'),  url('../fonts/Didot-HTF-B06-Bold-Ital.otf')  format('opentype'),
	     url('../fonts/Didot-HTF-B06-Bold-Ital.woff') format('woff'), url('../fonts/Didot-HTF-B06-Bold-Ital.ttf')  format('truetype'), url('../fonts/Didot-HTF-B06-Bold-Ital.svg#Didot-HTF-B06-Bold-Ital') format('svg');
  font-weight: 700;
  font-style: normal;
}

.font1{
	font-family: 'Didot', serif;
}

.font2{
	font-family: 'Libre Baskerville', serif;
}

/* COMMON */
.padding-header{
	padding-top:105px;
}

.h-padding-extend{
	padding-left:3px;
	padding-right:3px;
}

.titleStyle1{
	text-align:center;
	font-size:17px;
	margin:15px 0;
	padding:0;
	color:#555;
}

.titleStyle1.titleStyle1-margin-bottom{
	margin-bottom:50px;
	margin-top:20px;
}

.btnStyle1{
	background-color:#F8F8F8;
	color:#666;
	display:inline-block;
	font-size:13px;
	line-height:1em;
	padding:8px 10px;
}

@media (max-width:768px){
	.titleStyle1.titleStyle1-margin-bottom{
		margin-bottom:30px;
	}
	
}

/* LOADER */
.loader {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  font-size: 40px;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
          transform: translateZ(0);
}

.loader.loader-default {
  width: 1em;
  height: 1em;
  background-color: #a3afb7;
  border-radius: 100%;
  -webkit-animation: loader-default 1s infinite ease-in-out;
       -o-animation: loader-default 1s infinite ease-in-out;
          animation: loader-default 1s infinite ease-in-out;
}

@-webkit-keyframes loader-default {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-o-keyframes loader-default {
  0% {
    -webkit-transform: scale(0);
         -o-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes loader-default {
  0% {
    -webkit-transform: scale(0);
         -o-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  }
}

/* GLOBAL */
header{
	padding:15px 0 10px;
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:10;
	background-color:rgba(255,255,255,.98);
}

header.transparent{
	background-color:rgba(255,255,255,0);
	transition:background-color .35s ease-in-out;
}

header.transparent.scrolled{
	background-color:rgba(255,255,255,.98);
}

	header .logo{
		color:#333;
	}
	
	header.transparent .logo{
		opacity:0;
		transition:opacity .35s ease-in-out;
	}
	
	header.transparent.scrolled .logo{
		opacity:1;
	}
	
		header .logo img,
		header .logo svg{
			height:75px;
			width:auto;
			transition:height .3s ease-in-out;
			overflow:visible;
		}
		
	header.transparent .logo img,
	header.transparent .logo svg{
		height:45px;
	}
		
		header.scrolled .logo img,
		header.scrolled .logo svg{
			height:45px;
		}
		
			
			header .logo #logo_estudio,
			header .logo #logo_line{
				opacity:1;
				transition:opacity .3s ease-in-out;
			}
			
			header.scrolled .logo #logo_estudio,
			header.scrolled .logo #logo_line{
				opacity:0;
			}
	
	header nav{
		text-align:right;
	}
	
		header nav ul{
			list-style:none;
			margin-top:15px;
		}
		
			header nav ul li{
				display:inline-block;
				font-size:15px;
				
			}
			
			header nav ul li + li{
				margin-left:15px;
			}
			
			header nav ul li a{
				color:#999;
			}
			
			html.desktop header nav ul li a:hover,
			header nav ul li a:active,
			header nav ul li a:focus,
			header nav ul li.active a{
				color:#333;
				text-decoration:none;
			}
	
.wrapper{
	position:relative;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin:0 auto;
	padding-bottom:80px;
}
			
footer{
	padding:3px 0;
	background-color:#e5c3c9;
}

@media (max-width:768px){
	.padding-header{
		padding-top:100px;
	}
	
	header{
		padding:10px 0;	
	}
	
	header .logo img{
		height:50px;
		width:auto;
	}
}


/* WORKS-LIST */
.works-list{
	position:relative;
	box-sizing:border-box;
	width:100%;
	margin:0 auto;
}

	.works-list .work{
		display:block;
		overflow:hidden;	
	}
	
	.works-list .gutter-sizer{
		width:  40px;
	}
	
	.works-list .grid-sizer{
		width:  calc( ( 100% - 80px ) / 3 );
	}
	
	.works-list .work[data-size="1"]{
		width:  calc( ( 100% - 80px ) / 3 );
	}
	
	.works-list .work[data-size="2"]{
		width:  calc( ( 100% - 80px ) * ( 2 / 3 ) + 40px );
	}
	
	.works-list .work a{
		display:block;
		margin:0;
		padding:0;
		/*margin:0px 35px 0px 35px;*/
	}
	
		.works-list .work a .img{
			position:relative;
			z-index:1;
			margin-bottom:90px;
		}
		
		.works-list .work[data-size="2"] a .img{
			margin-bottom:90px;
		}
		
		.works-list .work a .img:after{
			content:"";
			position:absolute;
			display:block;
			z-index:2;
			background-color:#e5c3c9;
			left:0;
			top:0;
			width:100%;
			height:100%;
			opacity:0;
			transition:opacity .45s ease-in-out;
		}
		
		html.desktop .works-list .work a:hover .img:after{
			opacity:1;
		}
		
		.works-list .work a .img img{
			position:relative;
			z-index:1;
		}
		
		.works-list .work a .img .plus-icon{
			position:absolute;
			z-index:3;
			top:15px;
			left:15px;
			text-align:center;
			border:#FFF solid 2px;
			border-radius:19px;
			width:38px;
			height:38px;
			opacity:0;
			transition:opacity .35s ease-in-out;
		}
		
		html.desktop .works-list .work a:hover .img .plus-icon{
			opacity:1;
		}
		
			.works-list .work a .img .plus-icon img{
				display:inline-block;
				width:22px;
				height:22px;
				margin:5px 0 0 0;
			}
			
		.works-list .work a .text{
			position:absolute;
			z-index:2;
			right:15px;
			bottom:90px;
			left:15px;
			margin-bottom:-1.4em;
			color:#111;
			font-size:22px;
			line-height:1em;
			letter-spacing:-1px;
			padding:0 15px;
			opacity:0;
			transition:opacity .35s ease-in-out;
		}
		
		.works-list .work[data-size="2"] a .text{
			bottom:90px;
		}
		
		html.desktop .works-list .work a:hover .text{
			opacity:1;
		}
		
			.works-list .work a .text span.title{
				display:block;
				font-weight:700;
			}
			
			.works-list .work a .text span.info{
				font-weight:400;
			}
			
			.works-list .work a .text span.info:before{
				content:"— ";
			}

@media (max-width:768px){
	.works-list .gutter-sizer{
		width:  20px;
	}
	
	.works-list .grid-sizer{
		width:  calc( ( 100% - 80px ) / 5 );
	}
	
	.works-list .work[data-size="1"]{
		width:  calc( ( 100% - 80px ) * ( 2 / 5 ) + 20px );
	}
	
	.works-list .work[data-size="2"]{
		width:  calc( ( 100% - 80px ) * ( 3 / 5 ) + 40px );
	}
	
	.works-list .work a .img{
		margin-bottom:10px;
	}
	
	.works-list .work[data-size="2"] a .img{
		margin-bottom:10px;
	}
	
	.works-list .work a .text{
		position:relative;
		bottom:0px;
		opacity:1;
		font-size:14px;
		right:0px;
		left:0;
		margin-bottom:20px;
		padding:0 0px;
	}
	
	.works-list .work[data-size="2"] a .text{
		bottom:0px;
	}
}

/* WORK-DETAIL */
.work-detail{
	
}

	.work-detail .cover{
		background-size:cover;
		background-position:center center;		
		min-height:400px;
		display: -webkit-flex;
		-webkit-flex-direction: row;
		display: flex;		
	  	-webkit-align-items: center;
		align-items: center;		
	  	-webkit-justify-content: center;
		justify-content: center;		
	}
	
	html.desktop .work-detail .cover{
		background-attachment: fixed;
	}
	
	.work-detail .cover h1{
		position:relative;
		background-color:rgba(255,255,255,.9);
		font-weight:400;
		font-size:25px;
		padding:40px 70px;
		text-align:center;
	}
	
	.work-detail .cover h1:after{
		content:"";
		position:absolute;
		border:#DDD solid 1px;
		top:10px;
		right:10px;
		bottom:10px;
		left:10px;
	}
	
	.work-detail .info-lines{
		text-align:center;
		background-color:#FCFCFC;
		font-size:14px;
		line-height:1.1em;
		padding:1em 0;
		border-bottom:#F6F6F6 solid 1px;
		border-top:#F6F6F6 solid 1px;
	}
	
		.work-detail .info-lines .text-title{
			color:#333;
			font-weight:700;
			margin:2em 0 .4em;
			font-size:18px;
		}
		
		.work-detail .info-lines .text-line{
			color:#888;
			font-weight:400;
			margin:.3em 0 2em;
			line-height:1.6em;			
			font-size:12px;
		}
		
		.work-detail .info-lines .text-line a{
			color:#caa2a9;
			text-decoration:underline;
		}
		
		.work-detail .info-lines .text-title.text-title-description{
			margin-top:0;
			padding-top:2em;
			position:relative;
		}
		
		.work-detail .info-lines .text-title.text-title-description:after{
			content:"";
			position:absolute;
			top:0em;
			left:50%;
			margin-left:-20px;
			width:40px;
			height:1px;
			background-color:#BBB;
		}
		
	.work-detail .gallery{
		margin-top:40px;
	}
	
	.work-detail .gallery img{
		display:block;
		width:100%;
		height:auto;
		margin-bottom:40px;
	}
	
@media (max-width:768px){
	.work-detail .cover h1{
		margin:0 30px;
	}
}

/* ABOUT + CONTACT */
.about{
	
}
	.about h1{
		margin-bottom:20px;
		margin-top:20px;
	}
	
	.about img{
		margin:30px 0;
		padding:0;
	}
		
	.contact .img-holder{
		position:relative;
		width:100%;
		padding-top:66.10%;
	}
	
	.contact img,
	.contact svg{
		margin:0;
		padding:0;
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}
	
	.about h2,
	.contact h2{
		color:#333;
		font-size:17px;
	}
	
	.about h2:after,
	.contact h2:after{
		content:"";
		display:block;
		width:30px;
		height:1px;
		background-color:#333;
		margin:8px 0 15px;
	}
	
	.about p,
	.contact p{
		color:#888;
		font-weight:400;
		line-height:1.6em;			
		font-size:12px;
	}
	
	.contact p{
		margin-top:3em;
	}
	
	.about p span,
	.contact p span{
		color:#333;
		text-decoration:underline;
	}
	
	.about p a,
	.contact p a{
		color:#888;
		transition:color .3s ease-in-out;
	}
	
	html.desktop .about p a:hover,
	html.desktop  .contact p a:hover{
		color:#333;
	}

.intro{
	box-sizing:content-box;
	min-height:400px;
	position:relative;
	overflow:hidden;
	margin-bottom:50px;
	padding-top:30px;
}

	.intro .intro-items{
		position:relative;		
		width:65%;
		max-width:800px;
		margin-left:auto;
		margin-right:auto;
		cursor:pointer;
	}
		
		.intro .intro-items .content-holder{
			position:relative;
			z-index:2;
			left:0;
			top:0;
			width:100%;
			padding-top:80.28%;
		}
		
		.intro .intro-items .content{
			padding-top:0%;
			position:absolute;
			z-index:1;
			width:100%;
			height:100%;
			top:0;
			left:0;
		}
		
		.intro .intro-items .bg{
			position:absolute;
			z-index:1;
			bottom:-11%;
			left:-.8%;
			width:205%;
			height:auto;
			opacity:0;
			transition:opacity .7s ease-in-out;
		}
		
		.intro .intro-items .decoration-holder{
			position:absolute;
			z-index:2;
			bottom:10%;
			left:-4.5%;
			width:29%;
			padding-top:43.59%;
		}
		
		.intro .intro-items .decoration{
			position:absolute;
			top:0;
			left:0;
			z-index:1;
			width:100%;			
			height:100%;
		}
		
		/* ANIMATION */
		.intro-items.animate .bg{
			opacity:1;
		}
		
			.intro-items .content{
				opacity:0;
			}
			
			.intro-items.animate .content{
				opacity:1;
			}
			
			.intro-items .content #logo{
				opacity:0;				
				transform:translate(0%,3%);
				transition:transform .85s ease-in-out .05s, opacity .85s ease-in-out .05s;
			}
			
			.intro-items .content #estudio{
				opacity:0;
				transform:translate(0%,3%);
				transition:transform .55s ease-in-out .3s, opacity .55s ease-in-out .3s;
			}
			
			.intro-items.animate .content #logo,
			.intro-items.animate .content #estudio{				
				transform:translate(0%,0%);
				opacity:1;				
			}
			
			.intro-items .content #lines{
				opacity:0;
				-webkit-transform-origin: 0% 0%;
				transform-origin: 23% 0%;
				transform:scale(0.01,1);
				transition:transform .85s ease-in-out .15s, opacity .35s ease-in-out .15s;
			}
			
			.intro-items.animate .content #lines{
				opacity:1;
				transform:scale(1,1);
			}
			
			.intro-items .content #texts1{
				opacity:0;
				transform:translate(3.5%,-6%);
				transition:transform .55s ease-in-out .7s, opacity .55s ease-in-out .8s;
			}
			
			.intro-items .content #texts2{
				opacity:0;
				transform:translate(3.5%,-6%);
				transition:transform .55s ease-in-out .85s, opacity .55s ease-in-out .95s;
			}
			
			.intro-items.animate .content #texts1,
			.intro-items.animate .content #texts2{
				transform:translate(0%,0%);
				opacity:1;				
			}
			
			.intro-items .decoration #lineright{
				opacity:0;
				transform-origin: 0% 26.94%;
				transform:scale(1,0.01);
				transition:transform .45s ease-in-out .15s, opacity .25s ease-in-out .15s;
			}
			
			.intro-items .decoration #linebottom{
				opacity:0;
				transform-origin: 100% 0%;
				transform:scale(0.01,1);
				transition:transform .45s ease-in-out .45s, opacity .25s ease-in-out .45s;
			}
			
			.intro-items .decoration #lineleft{
				opacity:0;
				transform-origin: 0% 100%;
				transform:scale(1,0.01);
				transition:transform .45s ease-in-out .75s, opacity .25s ease-in-out .75s;
			}
			
			.intro-items .decoration #linetop{
				opacity:0;
				transform-origin: 0% 0%;
				transform:scale(0.01,1);
				transition:transform .45s ease-in-out 1.05s, opacity .25s ease-in-out 1.05s;
			}
			
			.intro-items.animate .decoration #lineright,
			.intro-items.animate .decoration #linebottom,
			.intro-items.animate .decoration #lineleft,
			.intro-items.animate .decoration #linetop{
				opacity:1;
				transform:scale(1,1);
			}
			
			.intro-items .decoration #txt1{
				opacity:0;
				transform:translate(0%,10%);
				transition:transform .65s ease-in-out .15s, opacity .65s ease-in-out .15s;
			}
			
			.intro-items .decoration #txt2{
				opacity:0;
				transform:translate(0%,10%);
				transition:transform .65s ease-in-out .45s, opacity .65s ease-in-out .45s;
			}
			
			.intro-items .decoration #txt3{
				opacity:0;
				transform:translate(0%,10%);
				transition:transform .65s ease-in-out .75s, opacity .65s ease-in-out .75s;
			}
			
			.intro-items .decoration #block{
				opacity:0;
				transform:translate(-50%,0%);
				transition:transform .75s ease-in-out .65s, opacity .75s ease-in-out .65s;
			}
			
			.intro-items.animate .decoration #txt1,
			.intro-items.animate .decoration #txt2,
			.intro-items.animate .decoration #txt3,
			.intro-items.animate .decoration #block{
				transform:translate(0%,0%);
				opacity:1;				
			}
			
@media (max-width:768px){
	.intro{
		padding-top:0px;
		/*min-height:0 !important;*/
	}
	
	.intro .intro-items{
		position:absolute;		
		width:100%;
		height:100%;
		top:0;
		left:0;
	}
	
	.intro .intro-items .bg{
		bottom:auto;
		left:0;
		right:auto;
		width:285%;
		top:-29%;
	}
	
	.intro .intro-items .content{
		width:110%;
		margin-left:-3%;
		position:absolute;
		top:50%;
		margin-top:10%;
	}
	
		.intro .intro-items .content #lines,
		.intro .intro-items .content #texts1,
		.intro .intro-items .content #texts2{
			display:none;
		}
		
		.intro-items.animate .decoration #txt1,
		.intro-items.animate .decoration #txt2,
		.intro-items.animate .decoration #txt3,
		.intro-items.animate .decoration #block,
		.intro-items.animate .decoration #lineleft,
		.intro-items.animate .decoration #lineright,
		.intro-items.animate .decoration #linebottom,
		.intro-items.animate .decoration #linetop{
			display:none;			
		}
}