/********************************************************************************************/
/*********************************************************************************** INIT ***/
/********************************************************************************************/

*{
	float: none;
	font-family: 'Terrazzo', Helvetica, Arial;
	color: #000;
	letter-spacing: 0.02em;
}

body {
	font-family: 'Terrazzo', Helvetica, Arial;
	font-size: 14px;
}

a{
	text-decoration: none;
	color: #000;
}

a:hover{
	color: #000;
}

a:visited{
	color: #000;
}

#page{
	overflow: hidden;
}

.site-branding{
	width: 100%;
	background-color: #fff;
	text-align: center;
}

.site-title{
	font-weight: normal;
	padding: 50px 0;
	margin-bottom: 25px;
	font-size: 1.5em!important;
}

.site-title a{
	color: #000;
	text-decoration: none;
	letter-spacing: 1.8px;
}

.site-branding img{
	max-height: 60%!important;
	max-width: 80%;
	width: auto;
}

/********************************************************************************************/
/*********************************************************************************** MENU ***/
/********************************************************************************************/

#site-navigation{
	display: table;
}

.menu-projects-menu-container{
	display: table-cell;
	vertical-align: middle;
}

#menu-projects-menu{
	margin: auto;
}

#site-navigation ul li{
	text-align: center;
	float: none;
	font-weight: normal;
	letter-spacing: 2px;
}

#site-navigation ul li a{
	display: inline-block;
}

/********************************************************************************************/
/******************************************************************************* PROJECTS ***/
/********************************************************************************************/

.post, .project{
	width: 100%;
	background-color: #fff;
	padding: 50px;
	overflow: hidden;
}

/* TEXT */

.description-box{
	height: 100%;
	display: table;
	width: 24%;
	margin-right: 6%;
	vertical-align: middle;
	float: left;
}

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

.project-title{
	letter-spacing: 2px;
	font-weight: normal;
}

.project-content{
	font-size: 14px;
	display: none;
}

.toggle-content{
	display: inline-block;
	padding: 10px 10px 10px 0;
	font-size: 22px;
	cursor: pointer;

	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-webkit-transition: all 0.3s linear;
	transition: all 0.3s linear;
}

.toggle-content.active{
	-moz-transform: rotateZ(45deg);
	-ms-transform: rotateZ(45deg);
	-o-transform: rotateZ(45deg);
	-webkit-transform: rotateZ(45deg);
	transform: rotateZ(45deg);

	-moz-transform-origin: 35% 50%;
	-ms-transform-origin: 35% 50%;
	-o-transform-origin: 35% 50%;
	-webkit-transform-origin: 35% 50%;
	transform-origin: 35% 50%;
}

/* SLIDER */

.slider-box{
	height: 100%;
	display: table;
	width: 70%;
	vertical-align: middle;
	float: right;
}

.metaslider{
	display: table-cell;
	vertical-align: middle;
	height: 100%;
	padding: 0px!important;
}

.right-zone, .left-zone{
	position: absolute;
	width: 50%;
	height: 100%;
	z-index: 999;
	display: none;
}

.left-zone{
	cursor: url(arrow-left.cur), pointer, auto;
}


.right-zone{
	cursor: url(arrow-right.cur), pointer, auto;
	left: 50%;
}

.slides{
	max-height: 100%!important;
	overflow: hidden;
}

.slides li{
	height: 100%!important;
	white-space: nowrap;
	text-align: center;
}

.helper{
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.slides li img{
	display: inline-block!important;
	width: auto!important;
	max-width: 100%!important;
	max-height: 100%!important;
	vertical-align: middle;
}

/********************************************************************************************/
/************************************************************************* INFO & CONTACT ***/
/********************************************************************************************/

/* BUTTON */

#infoContact{
	position: fixed;
	top: 50%;
	right: -60px;
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
	z-index: 999;
	cursor: pointer;
}

#infoContact li{
	list-style-type: none;
}

#infoContact a{
	pointer-events: none;
	text-decoration: none;
	color: #000;
}

/* PAGE */

#info-contact{
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 100%;
	z-index: 998;
	background-color: #fff;
	padding: 80px 100px;

	-moz-transition: -moz-transform 1s;
	-o-transition: -o-transform 1s;
	-webkit-transition: -webkit-transform 1s;
	transition: transform 1s;
}

#info-contact p{
	margin-bottom: 0;
}

#bio{
	display: inline-block;
	vertical-align: top;
	width: 70%;
	font-size: 21px;
	line-height: 25px;
}

#contact-link{
	display: inline-block;
	vertical-align: top;
	width: 24%;
	margin-left: 5%;
}

#contact-link > a{
	display: block;
}

/* Instagram */
#contact-link > a:last-of-type{
	margin-top: 30px;
}

#contact-link h3{
	margin: 30px 0 20px 0;
}

#contact-link h3:first-of-type{
	margin-top: 0;
}

#back{
	position: absolute;
	top: 50%;
	left: -20px;
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	cursor: pointer;
}

.showUp{
	display: block!important;
	-moz-transform: translatex(-100%) !important;
	-ms-transform: translatex(-100%) !important;
	-o-transform: translatex(-100%) !important;
	-webkit-transform: translatex(-100%) !important;
	transform: translatex(-100%) !important;
}

/********************************************************************************************/
/********************************************************************************* FOOTER ***/
/********************************************************************************************/

.site-footer{
	position: relative;
}

.site-footer>a{
	display: block;
	width: 100%;
	vertical-align: middle;
	text-align: center;
	position: absolute;
	top: 45%;
	font-weight: normal;
}

.site-info{
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 0;
}

.site-info p{
	font-size: 10px;
	line-height: 14px;
}

/********************************************************************************************/
/********************************************************************************* LOADER ***/
/********************************************************************************************/

#loader{
	position : fixed;
	z-index: 9999;
	background-color: #fff;
	top : 0px;
	left : 0px;
	height : 100%;
	width : 100%;
	cursor: wait;
	text-align: center;
}

#loader h1{
	color: #000;
	text-decoration: none;
	letter-spacing: 1.8px;
	text-align: center;
	font-weight: normal;
	padding-top: 50px;
	margin-bottom: 25px;
	margin-top: 200px;
	font-size: 1.5em !important;
	transition: all ease 1s;
	-webkit-transition: all ease 1s;
}

#circle{
	width:50px;
	margin: auto;
}

/********************************************************************************************/
/***************************************************************************** RESPONSIVE ***/
/********************************************************************************************/

@media screen and (max-width: 800px) {

	.description-box{
		width: 100%;
		height: 50%;
	}

	.description-box .project-content, .site-info{
		font-size: 80%;
	}

	.slider-box{
		width: 100%;
		height: 50%;
	}

	.metaslider{
		display: block;
	}

	#info-contact{
		padding: 40px 50px;
		overflow: scroll;
	}

	#bio{
		width: 100%;
	}

	#contact-link{
		width: 100%;
		margin-left: 0;
	}

	#back{
		font-size: 80%;
	}
}