@charset "UTF-8";

/*===================================================================================*/
/*  BASIC                                                                            */
/*===================================================================================*/

body,
html {
	font-size: 16px;
	font-family: 'Open Sans Condensed', 'sans-serif';
	background-color:#CCCCCC;
	
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-webkit-text-rendering: optimizelegibility;
	height: 100%;
}

::selection {color: #fff;}
::-moz-selection {color: #fff;}

a {
	text-decoration: none;
	color: #00A8EC;
	-webkit-transition: all 0.4s ease;
	   -moz-transition: all 0.4s ease;
		-ms-transition: all 0.4s ease;
		 -o-transition: all 0.4s ease;
		    transition: all 0.4s ease;
}

* {
    outline: none;
}

.float-right { float: right; }
.float-left { float: left; }

#wrapper {
	margin: 0 auto;	
	width: 100%;
}

#works  {
	padding: 100px 0;
}

.no-margin-top { margin-top: 0 !important; }
.no-margin-bottom { margin-bottom: 0 !important; }

.vertical-centering{
	width: 100%;
	margin: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}


/*===================================================================================*/
/*  TYPOGRAPHY                                                                       */    
/*===================================================================================*/

h1, h2, h3, h4, h5, h6 {
	color: #394042;
	text-transform: uppercase;
	font-weight:normal;
}

h1 { font-size: 33px; letter-spacing: 2px;}
h3 { font-size: 18px; margin-bottom: 20px;}

p { font-size: 16px; line-height: 18px; }
ul {margin: 0; padding: 0;}
li {list-style: none;}

/*===================================================================================*/
/*  HEADER                                                                           */ 
/*===================================================================================*/

header {
	width: 100%;
	line-height: 120px;
	position: fixed;
	z-index: 999;
	padding: 65px 100px;

	background-color: #333;


	-webkit-transition: all 0.5s ease;
	   -moz-transition: all 0.5s ease;
	    -ms-transition: all 0.5s ease;
	     -o-transition: all 0.5s ease;
	        transition: all 0.5s ease;
}

/*--- menu icon ---*/

.menu-icon {
	position: relative;
	display:  inline-block;
	width: 20px;
	height: 16px;
	bottom: 2px;
}
.txt {
	position: absolute;
	margin-top:-50px;
	text-transform:uppercase;
}
.menu-icon span {
	margin: 0 auto;
	position: relative;
	top: 12px;
}
.menu-icon span:before, .menu span:after {
	position: absolute;
	content: '';
}
.menu-icon span, .menu span:before, .menu span:after {
	width: 20px;
	height: 2px;
	background-color: #00A8EC;
	display: block;
}
.menu-icon span:before {
	margin-top: -6px;
}
.menu-icon span:after {
	margin-top: 6px;
}

/*--- menu icon transition ---*/

.menu-icon span {
	-webkit-transition-duration: 0s;
	-webkit-transition-delay: .2s;
}
.menu-icon.open span {
	background-color: rgba(0,0,0,0.0);
	-webkit-transition-delay: .2s;
}
.menu-icon span:before {
	-webkit-transition-property: margin, -webkit-transform;
	-webkit-transition-duration: .2s;
	-webkit-transition-delay: .2s, 0;
}
.menu-icon.open span:before {
	margin-top: 0;
	-webkit-transform: rotate(45deg);
	-webkit-transition-delay: 0, .2s;
}
.menu-icon span:after {
	-webkit-transition-property: margin, -webkit-transform;
	-webkit-transition-duration: .2s;
	-webkit-transition-delay: .2s, 0;
}
.menu-icon.open span:after {
	margin-top: 0;
	-webkit-transform: rotate(-45deg);
	-webkit-transition-delay: 0, .2s;
}

header .txt{color:#00A8EC; font-size:24px;}
header .menu .menu-icon{float: right;}

header.small{ height: 70px; padding: 27px 100px;}

ul.menu-hider {
	padding: 100px 100px 50px 100px; 
	width: 100%; 
	background-color: #333;
	z-index:-1; 	
	position: fixed;
	top: 50px;

	-webkit-transition: all 0.5s ease;
	   -moz-transition: all 0.5s ease;
	    -ms-transition: all 0.5s ease;
	     -o-transition: all 0.5s ease;
	        transition: all 0.5s ease;

	opacity: 0;
	display: none;
}

ul.menu-hider a:hover, ul.menu-hider li.current a {color: #FFF;}
ul.menu-hider i {margin-right: 10px; position: relative; top: 2px;}
ul.menu-hider .float-left span {position: relative; left: 10px;}
ul.menu-hider a.behance i {font-size: 17px; top: 4px;}
ul.menu-hider .menu-right{text-align: right;}
ul.menu-hider.small {top: 0px;}

ul.menu-hider > li > ul > li{margin: 10px 0;}
ul.menu-hider .menu-right ul li {margin: 12px 0;}
ul.menu-hider .menu-right ul li a.journal {display: inline-block; padding-bottom: 4px; border-bottom: 1px dotted #707C80;}
ul.menu-hider .menu-right ul li a.journal:hover {border-bottom: 1px dotted #394042;}
ul.menu-hider.open {
	opacity: 1;
	display: block;
	z-index: 900;
}

.open-menu {cursor: pointer;}

/*===================================================================================*/
/*  WORKS                                                                            */ 
/*===================================================================================*/

#works {background-color: #CCC;}
#works p {text-align: center; margin-bottom: 75px;}
#works ul li {
	margin-top:10px;
	margin-bottom:10px; 
	position: relative; 
    -webkit-backface-visibility: hidden;
    -webkit-transform: scale(1);
    overflow: hidden;
}

#works p a:hover {color: #394042;}

#works p a {border-bottom: 1px dotted #394042; display: inline-block; padding-bottom: 1px;}

#works > div > ul > li > img {min-width: 100%;max-width: 100%; display: block; height: auto; width: 100%; }

#works ul li span {
	position: absolute;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(57,64,66,0.80);
	text-align: center;
	-webkit-transition: all 1s ease;
	   -moz-transition: all 1s ease;
	    -ms-transition: all 1s ease;
	     -o-transition: all 1s ease;
	        transition: all 1s ease;
	display: none;
}

#works > div > ul > li:hover > img {
	-webkit-filter: blur(6px); 
	   -moz-filter: blur(6px); 
	     -o-filter: blur(6px); 
	    -ms-filter: blur(6px); 
	        filter: blur(6px); 
}

#works ul li:hover span {
	display: block;
}

#works ul li span h3 { 
	color: #fff; 
}

#works ul li span p { 
	margin-bottom: 25px; 
	animation: fade 3s;
	-webkit-animation: fade 1s;
	color: #56AEDE;
}


#works ul li span a {
	color: #fff; 
	line-height: 10px;
	position: relative;
}

#works ul li span > div {
	padding: 30px 50px;
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);

}
.footer {
	height:20px; 
	width:100%; 
}
/*===================================================================================*/
/*  404                                                                              */ 
/*===================================================================================*/

#home.page404 h1 {font-size: 50px !important; line-height: 45px;}
#home.page404 h2 {margin-bottom: 100px;}
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }


@media screen and (max-width: 960px) {
	#works .question .col-6 {width: 100%; text-align: center;}
	#works .question ul {text-align: center;}
	#works .question ul a {margin-left: 0; margin: 25px 25px 0 25px;}
}

/*===================================================================================*/
/*  MEDIA 800 PX (TABLET)                                                            */ 
/*===================================================================================*/


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

	.header-group{
		width: 100%;
		margin: auto;
		position: absolute;
		top: 55%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
	}	

	#home h2 {
		margin-bottom: 65px;
	}

	/*--- basic ---*/
	header, header.small{ height: 70px; padding: 27px 50px;}
	header {width: 100%;}
	/*--- quotes ---*/
	
	.flex-direction-nav {display: none;}

	input[type="text"],
	input[type="email"] {
		border-bottom: 1px solid #000;
		width: 100%;
		border-radius: 0;

	}
	
	#works .question ul {text-align: center;}
	#works .question ul a {margin-left: 0; margin: 25px 25px 0 25px;}
	.question h4 {text-align: center;}

	ul.things.things-right {padding-right: 0;}

	ul.menu-hider {padding-left: 50px; padding-right: 50px; padding-top: 50px;}
	ul.menu-hider.open {padding-left: 50px; padding-right: 50px; padding-top: 70px;}
	#about-me .me {text-align: center; width: 100%; padding: 0 17%;}

	#about-me {padding: 550px 0 100px 0;}

	#about-me .col-3 {
		width: 47.9%;
	}

	#about-me .picture-frame {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		width: 100%;
		height: 450px;
		overflow: hidden;
		min-height: 300px;
	}

	#about-me .picture-frame img {
		position: absolute;
		min-width: 100%;
		top: -70%;
	}

	ul.menu-mobile {display: none;}

	#about-me .picture-frame .author {display: none;}
	footer ul li.col-2 { width: 14.566% !important; margin-top:25px; margin-bottom:25px;}

	#contact h2, #contact p {text-align: center;}

	#contact ul li {text-align: center; padding: 35px 50px 10px 50px; margin-top: 35px;}
	#contact ul li.phone{padding: 39px 50px 10px 50px;}
	
	#contact ul li.location { background: url(../img/icon/svg/location.svg) no-repeat top center; }
	#contact ul li.phone { background: url(../img/icon/svg/phone.svg) no-repeat  top center; }
	#contact ul li.mail { background: url(../img/icon/svg/mail.svg) no-repeat center 5px; margin-bottom: 50px;}

	input[type="submit"].button {
		margin-right: 8px;
	}

	ul.things li {text-align: center;}

	ul.things li div.icon {margin-bottom:25px;position: relative; top: 0; height: 100%; width: 100%; text-align: center;margin-right: none; height: 48px;}

	ul.things.things-left {
		padding-right: 0;
	}

	ul.things li {padding: 0;}

	ul.things li div.description {margin-left: 0;}

	ul.things li {padding: 0 25px 0 23px; margin: 75px 0;}
	ul.things li:first-child {margin: 0;}

	ul.things.things-right {
		padding-left: 0;
	}

	#contact ul {overflow: hidden; width: 100%;}
	

	input[type="button"].button {margin-right: 8px;}

	ul.things.things-left li:first-child p{
		padding: 0 8px;
	}


}

@media screen and (max-width: 569px) {
	
	#home h1 {
		font-size: 27px;
		letter-spacing: 2px;
	}
}


/*===================================================================================*/
/*  MEDIA 504 PX (SMARTPHONE)                                                        */ 
/*===================================================================================*/


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

	.button {
		padding: 19px 35px 16px 35px;
		font-size: 13px;
	}

	.header-group{
		width: 100%;
		margin: auto;
		position: absolute;
		top: 60%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
	}	

	ul.menu-hider {display: none;}

	ul.menu-hider{
		background-color: #f6f6f6; 
		z-index:900; 	
		position: fixed;
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		padding: 110px 50px 50px 50px;
		z-index: 900;
		right: -350px;
		display: block;
		width: 60%; 
	}	

	ul.menu-hider.open{
		right: 0;
	}	

	ul.menu-hider .float-left {float: right;}


	ul.menu-hider > li {width: 100%;}

	ul.menu-hider > li > ul > li i{float: right; margin-right: 0;} 
	ul.menu-hider > li:first-child {
		padding-bottom: 20px;
		margin-bottom: 20px;
		border-bottom: 1px solid #eee;
	}

	ul.menu-hider li.float-left span {position: relative; !important; left: -20px;}

	ul.menu-hider > li:last-child {text-align: right;}

	ul.menu-hider > li > ul > li {
		margin:10px 0;
	}

	form .send {width: 100%; text-align: center;}

	/*--- about me ---*/
	.picture-frame {display: none;}
	ul.things li div.icon {position: relative; width: 100%;}
	#about-me {text-align: center; overflow: hidden;}
	ul.things li div.description {margin-left: 0;}
	
	/*--- works ---*/
	#works hr {display: none;}
    #works .question {display: none;}
	#works ul li {margin: 10px 0 10px 4px;}

	/*--- footer ---*/
	footer ul li.col-2 {width: 32% !important; margin:25px 0 !important;}
	#sub-footer {padding: 40px;}
	
	input[type="submit"].button {
		float: none;
		margin-right: auto;
		margin-left: auto;
		display: inline-block;
	}

	#contact ul li {text-align: center; padding: 35px 50px 10px 50px; margin-top: 35px;}
	#contact ul li.phone{padding: 39px 50px 10px 50px;}
	
	#contact ul li.location { background: url(../img/icon/svg/location.svg) no-repeat top center; }
	#contact ul li.phone { background: url(../img/icon/svg/phone.svg) no-repeat  top center; }
	#contact ul li.mail { background: url(../img/icon/svg/mail.svg) no-repeat  top center; margin-bottom: 50px;}


	.form {padding: 50px 30px;}
	

	input[type="text"],
	input[type="email"] {
		border-bottom: 1px solid #000;
		width: 100%;
		border-radius: 0;

	}
	#about-me {padding: 100px 0 100px 0;}
	#about-me {height: auto;}
	#about-me .me {padding: 0; width: 100%;}
	#about-me .col-3 {width: 100%; }
	ul.things li div.icon {margin-bottom:25px;position: relative; top: 0; height: 100%; width: 100%; text-align: center;margin-right: none;}

	ul.things.things-left {
		padding-right: 0;
	}

	ul.things li {padding: 0 25px 0 23px; margin: 75px 0;}
	ul.things li:first-child {margin: 0;}

	ul.things.things-right {
		padding-left: 0;
	}
	
	ul.menu-hider li ul li {margin: 12px 0;}

	#contact h2, #contact p{text-align: center !important;}
	#sub-footer {padding: 100px 0;}
	#sub-footer p {line-height: 30px; padding: 0 10%;}
	#sub-footer strong {display: none;}


	input.name {
		background: url(../img/icon/svg/user.svg) no-repeat 4px top;
		padding-left: 40px;
	}

	input.email {
		background: url(../img/icon/svg/mail.svg) no-repeat left top;
		padding-left: 40px;
	}

	#about-me,#works, #contact {
		padding: 75px 0;
	}

	input[type="button"].button {
		display: inline-block;
		float: none;
	}

	#submit {width: 100%; text-align: center; overflow: hidden;}
	
	#quotes { padding: 100px 0; }
	#about-me hr, #contact hr {margin: 75px 0;}
	footer {padding:50px 0;}

	#works p {margin-bottom: 50px;}

}

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}