@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:400,700);

/* =============================================
	CREATED BY WAY2CONCEPT
============================================= */
*{margin:0;padding:0;border:0;outline:0;font-size:14px; line-height:20px; vertical-align:baseline;background:transparent;font-family:'Josefin Sans', Arial, 'Helvetica Neue', Helvetica, sans-serif;font-weight:400; color:#333;}
html	{background-color:#fff;}
html, body	{height:100%;}
body	{min-height:550px;}

h1, h1 *	{font-weight:700;}
ul li	{list-style:none;}
a	{text-decoration:none;}
h1	{font-size:30px;}
h1, h1 *	{font-size:60px; line-height:63px; }
h2	{margin-bottom:20px;text-align:center;text-transform:uppercase; color:#777; }
h2, h2 *	{font-size:30px;line-height:33px; }
h3	{margin-bottom:10px; }
h3, h3 *	{font-size:40px;line-height:43px; }
h4	{margin-bottom:10px; }
h4, h4 *	{font-size:30px;line-height:33px; }
h5	{margin-bottom:5px; }
h5, h5 *	{font-size:16px;line-height:20px; }
h6	{margin-bottom:5px; }
h6, h6 *	{font-size:14px;line-height:17px; }
p	{line-height:14px; line-height:22px; margin-bottom:20px; font-size:16px;}
img	{vertical-align:middle;}
strong	{font-weight:bold;}
em	{font-style:italic;}


.mfp-bg{z-index:1300}
.clearfix	{clear:both;display:block;height:0;}
.wrapper	{width:870px;padding:0 10px;margin:0 auto;}
.col-left, .col-left-inside	{float:left;}
.col-right, .col-right-inside	{float:right;}
.last	{margin-right:0 !important;}
textarea{resize: none;}
a:hover{text-decoration:underline;}
.table{display:table}
.table-cell{display:table-cell; vertical-align:middle}
.active{color:#c69c6d; text-decoration:none; cursor:default}
.active:hover{text-decoration:none;}
.special-separator, .special-separator *{color:#333; font-size:26px; margin-bottom:60px;}

.mCSB_scrollTools .mCSB_draggerRail{width:5px !important; border-radius:0 !important;}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:rgba(51, 51, 51, 0.75) !important; border-radius:0 !important; width:5px !important;}

#mobile-menu{display:none}
#mobile-switch{display:none}

#page-mask {background-color:#fff;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1001;}

/* ####################################################################### 
								POP UP
####################################################################### */
.highlighted{overflow:hidden;}
#page-mask iframe{width:100%; height:100%}
.btn-close{background:url(../images/close.png) no-repeat center center; width: 44px; height: 44px;line-height: 44px;position: absolute;right: 20px;top: 20px; text-decoration: none;text-align: center;opacity: 0.65;color: #FFF;font-style: normal;font-size: 28px; font-family: Arial,Baskerville,monospace;cursor:pointer; z-index:1200;}
.btn-close:hover{opacity: 1;}

/* ####################################################################### 
								HEADER
####################################################################### */
header	{background-color:#fff;position:fixed;top:0;left:0;width:100%;height:100px;z-index:1000;}
header .wrapper	{height:70px;padding:15px 0;}
header .col-left	{height:100%;}
header .logo	{display:block;height:100%;}
header .logo img	{height:120%;}

nav a	{font-weight:700;text-transform:uppercase;margin-left:30px; font-size:10px; padding:10px 0; color:#777;}
nav a:hover{color:#333; text-decoration:none;}

#general-container	{padding:150px 0 0;}
/* ####################################################################### 
								FOOTER
####################################################################### */

/* ####################################################################### 
								BANNER
####################################################################### */
#banner	{height:515px;overflow:hidden;margin-bottom:60px;}
.bx-wrapper .bx-pager{bottom:0 !important;}
.bx-wrapper .bx-pager.bx-default-pager a{background-color:#000 !important; border:none !important; opacity: 0.5; width:10px !important; height:10px !important; border-radius:10px !important; margin:0 10px !important;}
.bx-wrapper .bx-pager.bx-default-pager a.active{opacity: 1}
.bx-wrapper .bx-pager.bx-default-pager a:hover{opacity: 1}

/* ####################################################################### 
								WORKS
####################################################################### */
#works	{background:url(../images/separador.jpg) no-repeat center 0; padding-top:50px;}
#works-list	{margin-bottom:30px;}
#works-list li	{float:left;width:260px;height:260px;margin:15px;}
#works-list	a	{display:block;width:100%;height:100%;position:relative;overflow:hidden;}
#works-list .thumb	{display:block;width:100%;height:100%;}
#works-list .thumb img	{display:block;width:100%;;height:100%;}

#works-list .info	{background-color:rgba(34,34,34,0.9);display:table;width:100%;height:100%;position:absolute;top:100%;left:0;transition: all 0.5s ease;}
#works-list .info-cell	{display:table-cell;vertical-align:bottom;padding:15px;}
#works-list .title	{color:#fff;font-weight:bold;text-transform:uppercase;display:block;}
#works-list .subtitle	{color:#fff;text-transform:uppercase;display:block;}
#works-list	a:hover .info, #works-list	a.active .info	{top:0;}


/* ####################################################################### 
								WORK DETAIL
####################################################################### */
#works-detail{margin-bottom:60px;}
#works-detail .image	{width:100%;text-align:center;margin-bottom:30px;}
#works-detail .image img	{width:100%;}
#works-detail .content .title{font-size:22px; text-transform:uppercase; line-height:25px; text-align:center; margin-bottom:5px;}
#works-detail .content .subtitle{font-size:20px;text-align:center;margin-bottom:30px; line-height:23px;}
#works-detail .content .text{background:url(../images/separador.jpg) no-repeat center bottom; width:600px; margin:0 auto; padding-bottom:30px;}

/* ####################################################################### 
								PHILOSOPHY
####################################################################### */
#philosophy{background:url(../images/separador.jpg) no-repeat center 0; padding-top:50px; margin-bottom:50px;}
#philosophy .text{width:600px; margin:0 auto 40px auto}
#philosophy .text .e-text	{width:10px;height:10px;display:inline-block;vertical-align:top;margin-top:5px;}
#philosophy .image{background:url(../images/less-is-more-background.jpg) repeat 0 0; height:476px; text-align:center;}
#philosophy .image img{margin-top:50px;}

/* ####################################################################### 
								PEOPLE
####################################################################### */
#people{background:url(../images/separador.jpg) no-repeat center 0; padding-top:50px; margin-bottom:35px;}
#people .about{width:600px; margin:0 auto 40px auto}
#people #people-list{width:600px;margin:0 auto}
/*opacity:0.5;*/
#people-list li	{float:left;width:286px;height:410px;margin:0 20px 20px 0;position:relative;z-index:9;}
#people-list li:nth-child(2n)	{background-color:#e6e6e6;margin-right:0;}
#people-list li.active	{z-index:10;}
#people-list li .people-box	{background-color:#fff;width:286px; height:410px;position:absolute;top:0;left:0;overflow:hidden;border-bottom:solid 1px #777; }
#people-list li .people-box .face	{float:left;width:286px; height:410px; cursor:pointer;}
#people-list li .people-box .face .icon {background:url(../images/close-face.png) no-repeat center center; display:block; width:18px; height:18px; position:absolute; margin-top:20px; margin-left:20px; opacity:0; transition: all 0.5s ease-out;}
#people-list li .people-box .container	{float:right;width:286px; opacity:0; transition: all 0.5s ease-out;}
#people-list li.active{/*width:600px*/}
#people-list li.active .people-box .container	{ opacity:1;}
#people-list li.active .people-box	{width:592px;}
#people-list li.active .people-box .face .icon{opacity:1;}

#people-list li:nth-child(2n) .people-box .face .icon{margin-left:246px;}
#people-list li:nth-child(2n).active .people-box	{left:-306px;}
#people-list li:nth-child(2n) .people-box .face	{float:right;}
#people-list li:nth-child(2n) .people-box .container	{float:left;}

#people-list li .thumb	{width:286px; height:286px; margin-bottom:45px;}
#people-list li .thumb img{width:100%}
#people-list li .card .cardFront	{background:url(../images/text-next.png) no-repeat right bottom;}
#people-list li .card .cardBack	{background:url(../images/text-prev.png) no-repeat right bottom;}

#people li .name	{text-transform:uppercase; font-size:22px; color:#777; margin-bottom:5px; text-align:center;}
#people li .role	{text-transform:uppercase; font-size:14px; color:#777;text-align:center;}
#people li .text	{padding:15px 10px;}

/*#people .flip .card:nth-child(2n){margin-right:0;}
#people .flip .card .front{background:#fff; text-align:center;}
#people .flip .card .thumb{width:286px; height:286px; overflow:hidden; margin-bottom:45px;}
#people .flip .card .thumb img{width:100%}
#people .flip .card .cardFront {border-bottom:solid 1px #777}
#people .flip .card:last-child .cardFront{border:none;}
#people .flip .card .cardFront .name{text-transform:uppercase; font-size:22px; color:#777; margin-bottom:5px; text-align:center;}
#people .flip .card .cardFront .role{text-transform:uppercase; font-size:14px; color:#777;text-align:center;}
#people .flip .card .cardBack{padding:0 10px; width:268px; border-top:solid 1px #777;  border-bottom:solid 1px #777;}
#people .flip .card .cardBack .text{overflow-y:auto; height:calc(100% - 30px); margin-top:15px;position:relative;}*/

@media screen and (min-width:1024px){
.card {
	perspective: 1000px;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-o-perspective: 1000px;
	-ms-perspective: 1000px;
	width:286px;
	height:410px;
	vertical-align:top;
	position:ralative;
	display:block;
	float:left; margin-right:10px; margin-bottom:20px; 
	cursor:pointer;
}



.card .content {
	transition: 0.5s ease-out;
	-webkit-transition: 0.5s ease-out;
	-moz-transition: 0.5s ease-out;
	-o-transition: 0.5s ease-out;
	-ms-transition: 0.5s ease-out;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;

	/* content backface is visible so that static content still appears */
	backface-visibility: visible;
	-webkit-backface-visibility: visible;
	-moz-backface-visibility: visible;
	-o-backface-visibility: visible;
	-ms-backface-visibility: visible;


	position:relative;
	width: 286px;
	height: 390px;
	
}
.card.applyflip .content {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
}


.card .content .cardStatic {
	/* Half way through the card flip, rotate static content to 0 degrees */
	transition: 0s linear 0.17s;
	-webkit-transition: 0s linear 0.17s;
	-moz-transition: 0s linear 0.17s;
	-o-transition: 0s linear 0.17s;
	-ms-transition: 0s linear 0.17s;
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);

	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	height: 0;
	width: 100%;
	line-height:100px;
}

.card.applyflip .content .cardStatic {
	/* Half way through the card flip, rotate static content to -180 degrees -- to negate the flip and unmirror the static content */
	transition: 0s linear 0.17s;
	-webkit-transition: 0s linear 0.17s;
	-moz-transition: 0s linear 0.17s;
	-o-transition: 0s linear 0.17s;
	-ms-transition: 0s linear 0.17s;
	transform: rotateY(-180deg);
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
}

/*.card .content .cardFront {
    background-color: skyblue;
    color: tomato;
}

.card .content .cardBack {
    background-color: tomato;
    color: skyblue;
}*/

.card .content .cardFront, .card .content .cardBack {
	/* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: visible;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	
}
.card .content .cardFront, .card.applyflip .content .cardFront {
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
}

.card .content .cardBack, .card.applyflip .content .cardBack {
	transform: rotateY(-180deg);
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
}

.card .content .cardFront, .card.applyflip .content .cardBack {
	/* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
	animation: stayvisible 0.5s both;
	-webkit-animation: stayvisible 0.5s both;
	-moz-animation: stayvisible 0.5s both;
	-o-animation: stayvisible 0.5s both;
	-ms-animation: donothing 0.5s;
	-ms-transition: visibility 0s linear 0.17s;
	visibility: visible;
}
.card.applyflip .content .cardFront, .card .content .cardBack {
	/* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
	animation: stayvisible 0.5s both;
	-webkit-animation: stayvisible 0.5s both;
	-moz-animation: stayvisible 0.5s both;
	-o-animation: stayvisible 0.5s both;
	-ms-animation: donothing 0.5s;
	-ms-transition: visibility 0s linear 0.17s;
	visibility: hidden;
}
@keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-ms-keyframes donothing { 0% { } 100% { } }
}

/* ####################################################################### 
								CONTACTS
####################################################################### */
#contacts	{background:url(../images/separador.jpg) no-repeat center 0; padding-top:50px;}
#contacts .container{background:url(../images/footer-background.png) repeat 0 0; width:100%; padding:100px 0;}
#contacts .content{background:#fff; width:314px; margin:0 auto; padding:50px 0;}
#contacts .content .image{width:212px; padding:20px 50px 0 50px; margin-bottom:50px; border-top:dotted 1px #333;}
#contacts .content .text{padding:0 50px 20px 50px; border-bottom:dotted 1px #333; text-align:center}
#contacts .content .text  p:last-child{margin-bottom:0}
#contacts .content .text *{font-size:14px;}

@media screen and (max-width: 1023px){
	#general-container{width:auto; padding:150px 10px 0 10px;}
	.wrapper	{width:auto;margin:0 auto; padding:0;}
	header nav{display:none;}
	/*#banner{display:none;}*/
	#banner	{height:auto}
	
	#mobile-switch{background:url(../images/mobile-menu-icon.png) no-repeat center center; display:block; padding:9px 10px; width:22px; height:14px; border-radius:4px; border:solid 1px #ddd; float:right; margin-right:10px; transition: all 0.5s ease;}
	#mobile-switch:hover{background-color:#ddd;}
	#mobile-menu{background:#fff; display:block; position:fixed; top:100px; width:100%; z-index:1000; height:0; overflow:hidden; transition: all 0.5s ease; border:none;}
	#mobile-menu nav a{display:block; padding:15px 15px 15px 30px; margin:0; border-bottom:solid 1px #e6e6e6; }
	#mobile-menu.active{height:204px; border-top:solid 1px #777;}
	
	/* ####################################################################### 
								WORKS
	####################################################################### */
	#works-list li{width:48% ; height:200px; overflow:hidden;margin:1%}
	#works-list li img{height:auto !important}
	
	/* ####################################################################### 
								WORKS DETAILS
	####################################################################### */
	#works-detail .image{height:auto;}
	#works-detail .image img{width:100%; height:auto;}
	#works-detail .content .text{width:80%;}
	
	/* ####################################################################### 
								PHILOSOPHY
	####################################################################### */
	#philosophy .text{width:80%}
	
	/* ####################################################################### 
								PEOPLE
	####################################################################### */
	
	#people .about{width:80%}
	#people #people-list{width:80%}
	#people .card{width:100%; height:auto; margin-right:2%}
	#people .card:last-child{margin-right:0;}
	#people .card .content{width:100%; height:390px;  }
	#people .card .thumb{width:100% !important; height:200px !important; overflow:hidden !important;}
	#people .flip .card .cardBack{width:90%; padding:0 5%}
	
	#people-list li, #people-list li.active{width:100%;float:none;  height:auto !important;}
	#people-list li .people-box, #people-list li.active .people-box{width:100%; height:auto !important; position:relative;}
	#people-list li .people-box .face, #people-list li.active .people-box .face{width:100%; height:auto !important; margin-bottom:20px; cursor:default;}
	#people-list li .people-box .face .thumb, #people-list li.actve .people-box .face .thumb{width:100% !important; height:300px !important; overflow:hidden !important; margin-bottom:20px !important}
	#people-list li .people-box .container, #people-list li.active .people-box .container	{width:100%;}
	#people-list li .people-box .container *, #people-list li.active .people-box .container *{display:inline}
	#people-list li .people-box, #people-list li.active .people-box {height:auto !important}
	#people-list li .people-box, #people-list li.active .people-box{width:100%}
	#people-list li .people-box .container, #people-list li.active .people-box .container{width:100%; float:none;height:auto !important; opacity:1;float:none; padding-bottom:30px;}
	#people .card .content, #people .card .content.active{height:auto !important;}
	#people-list li .people-box .container .cardFront, #people-list li.active .people-box .container .cardFront{background:none; width:100%; haight:auto; padding:0;}
	#people-list li .people-box .container .cardBack, #people-list li.active .people-box .container .cardBack{background:none; width:100%; height:auto;padding:0; display:block !important;}
	#people li .text, #people li.active .text{padding:0;}
	#people-list li.active .people-box .face .icon {display:none}
	
	#people-list li:nth-child(2n) .people-box .face .icon{margin-left:0px;}
	#people-list li:nth-child(2n).active .people-box	{left:0px;}
	#people-list li:nth-child(2n) .people-box .face	{float:none;}
	#people-list li:nth-child(2n) .people-box .container	{float:none; padding-bottom:30px;}
}

/*@media screen and (max-width: 480px)*/
@media screen and (max-width: 767px){
	#general-container{width:auto; padding:150px 10px 0 10px;}
	.wrapper	{width:auto;margin:0 auto; padding:0;}
	header nav{display:none;}
	/*#banner{display:none;}*/
	#banner	{height:auto}
	
	#banner .bx-controls-direction	{display:none;}
	
	#mobile-switch{background:url(../images/mobile-menu-icon.png) no-repeat center center; display:block; padding:9px 10px; width:22px; height:14px; border-radius:4px; border:solid 1px #ddd; float:right; margin-right:10px; transition: all 0.5s ease;}
	#mobile-switch:hover{background-color:#ddd;}
	#mobile-menu{background:#fff; display:block; position:fixed; top:100px; width:100%;  z-index:1000; height:0; overflow:hidden; transition: all 0.5s ease; border:none;}
	#mobile-menu nav a{display:block; padding:15px 15px 15px 30px; margin:0; border-bottom:solid 1px #e6e6e6; }
	#mobile-menu.active{height:204px;border-top:solid 1px #777;}
	
	/* ####################################################################### 
								WORKS
	####################################################################### */
	#works-list li{width:100% !important; height:300px; overflow:hidden; float:none; margin:0 0 15px 0}
	#works-list li img{height:auto !important}
	
	/* ####################################################################### 
								WORKS DETAILS
	####################################################################### */
	#works-detail .image{height:auto;}
	#works-detail .image img{width:100%; height:auto;}
	#works-detail .content .text{width:100%;}
	
	/* ####################################################################### 
								PHILOSOPHY
	####################################################################### */
	#philosophy .text{width:100%}
	#philosophy .image{height:auto; }
	#philosophy .image img{width:80%; margin-bottom:50px;}
	
	/* ####################################################################### 
								PEOPLE
	####################################################################### */
	
	#people .about{width:100%}
	#people #people-list{width:100%}
	
	#people-list li, #people-list li.active{width:100%;float:none;  height:auto !important;}
	#people-list li .people-box, #people-list li.active .people-box{width:100%; height:auto !important; position:relative;}
	#people-list li .people-box .face, #people-list li.active .people-box .face{width:100%; height:auto !important; margin-bottom:20px; cursor:default;}
	#people-list li .people-box .face .thumb, #people-list li.actve .people-box .face .thumb{width:100% !important; height:300px !important; overflow:hidden !important; margin-bottom:20px !important}
	#people-list li .people-box .container, #people-list li.active .people-box .container	{width:100%;}
	#people-list li .people-box .container *, #people-list li.active .people-box .container *{display:inline}
	#people-list li .people-box, #people-list li.active .people-box {height:auto !important}
	#people-list li .people-box, #people-list li.active .people-box{width:100%}
	#people-list li .people-box .container, #people-list li.active .people-box .container{width:100%; float:none;height:auto !important; opacity:1;float:none; padding-bottom:30px;}
	#people .card .content, #people .card .content.active{height:auto !important;}
	#people-list li .people-box .container .cardFront, #people-list li.active .people-box .container .cardFront{background:none; width:100%; haight:auto; padding:0;}
	#people-list li .people-box .container .cardBack, #people-list li.active .people-box .container .cardBack{background:none; width:100%; height:auto;padding:0; display:block !important;}
	#people li .text, #people li.active .text{padding:0;}
	#people-list li.active .people-box .face .icon {display:none}
	
	#people-list li:nth-child(2n) .people-box .face .icon{margin-left:0px;}
	#people-list li:nth-child(2n).active .people-box	{left:0px;}
	#people-list li:nth-child(2n) .people-box .face	{float:none;}
	#people-list li:nth-child(2n) .people-box .container	{float:none; padding-bottom:30px;}
	
	
	
	/* ####################################################################### 
								CONTACTS
	####################################################################### */
	#contacts .wrapper{width:90% !important}
	#contacts .content{width:100%}
	#contacts .image{padding:20px 0 0 0 !important; width:100% !important; text-align:center;}
	#contacts .image img{width:212px !important}
	
}