@charset "UTF-8";

@font-face {

	font-family: 'Gotham-Book';
	src: url('fonts/Gotham-Book.eot?') format('eot'), 
	     url('fonts/Gotham-Book.otf')  format('opentype'),
	     url('fonts/Gotham-Book.woff') format('woff'), 
	     url('fonts/Gotham-Book.ttf')  format('truetype'),
	     url('fonts/Gotham-Book.svg#Gotham-Book') format('svg');
	     font-weight: lighter;
	     font-style: normal;
}

@font-face {

	font-family: 'Gotham-Medium';
	src: url('fonts/Gotham-Medium.eot?') format('eot'), 
	     url('fonts/Gotham-Medium.otf')  format('opentype'),
	     url('fonts/Gotham-Medium.woff') format('woff'), 
	     url('fonts/Gotham-Medium.ttf')  format('truetype'),
	     url('fonts/Gotham-Medium.svg#Gotham-Medium') format('svg');
	     font-weight: lighter;
	     font-style: normal;

}

@font-face {

	font-family: 'Bariol-Regular';
	src: url('fonts/Bariol-Regular.eot?') format('eot'), 
	     url('fonts/Bariol-Regular.otf')  format('opentype'),
	     url('fonts/Bariol-Regular.woff') format('woff'), 
	     url('fonts/Bariol-Regular.ttf')  format('truetype'),
	     url('fonts/Bariol-Regular.svg#Bariol-Regular') format('svg');
	     font-weight: lighter;
	     font-style: normal;
}

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

body,
html {
	color: #707C80;
	font-size: 15px;
	font-family: 'Bariol-Regular', serif;
	background-color: #F3F5F3;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-webkit-text-rendering: optimizelegibility;
	height: 100%;
}

::selection {background-color: #7AAFBA; color: #fff;}
::-moz-selection {background-color: #7AAFBA; color: #fff;}

a {
	text-decoration: none;
	color: #F6F6F6;
	-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;	
	max-width: 1290px;
}

.button {
	padding: 20px 50px 18px 50px;
	background-color: #394042;
	-webkit-border-radius: 100px;
	border-radius: 100px;
	font-size: 14px;
	display: inline-block;
	text-transform: uppercase;
	color: #fff;
	font-family: 'Gotham-Book', sans-serif;
	font-weight: 700;
	letter-spacing: 2px;
	
	-webkit-transition: all 0.3s ease;
	   -moz-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		 -o-transition: all 0.3s ease;
		    transition: all 0.3s ease;
}

.button_small {
	padding: 18px 50px 15px 50px;
	background: #7aafba; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdhYWZiYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3MWEyYWMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #7aafba 0%, #71a2ac 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7aafba), color-stop(100%,#71a2ac)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #7aafba 0%,#71a2ac 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #7aafba 0%,#71a2ac 100%); /* Opera 11.10+ */
	background: #000000; /* IE10+ */
	background-position: bottom;
	background-color: #262B2C; /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7aafba', endColorstr='#71a2ac',GradientType=0 ); /* IE6-8 */
	-webkit-border-radius: 90px;
	border-radius: 90px;
	font-size: 14px;
	display: inline-block;
	text-transform: uppercase;
	color: #fff;
	font-family: 'Gotham-Book', sans-serif;
	font-weight: 700;
	letter-spacing: 2px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.button:hover {	background-color: #262b2c; }

.button_small:hover {background: #394042;}
.button_small:active {
	background: #394042;
}

#about-me,#works, #contact {
	padding: 100px 0;
}
#quotes { padding: 125px 0; }
footer { padding: 80px 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%);
}

.name-schema {display: none !important;}

/*===================================================================================*/
/*  LOADER                                                                           */    
/*===================================================================================*/

#loader {
	width: 100%;
	height: 100%;
	position:fixed;
	z-index: 100000;
	background-color: #4A819D; 
	text-align: center;
}

#loader ul.spinner {
      margin: 0 auto ;
      width: 100px;
      text-align: center;
	position: absolute;
	top: 20%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
    }

#loader ul.spinner > li {
      width: 15px;
      height: 15px;
      background-color: #f6f6f6;

      border-radius: 100%;
      display: inline-block;
      -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
      animation: bouncedelay 1.4s infinite ease-in-out;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      margin:0 5px;
    }

#loader ul.spinner li.bounce1 {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }

#loader ul.spinner li.bounce2 {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }

.upBig {
    opacity:0;  
    -webkit-animation:upBig ease-in 1;  
    -moz-animation:upBig ease-in 1;
    animation:upBig ease-in 1;
 
    -webkit-animation-fill-mode:forwards;  
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:2s;
    -moz-animation-duration:2s;
    animation-duration:2s;
}

.downBig {
    opacity:0;  
    -webkit-animation:downBig ease-in 1;  
    -moz-animation:downBig ease-in 1;
    animation:upBig ease-in 1;
 
    -webkit-animation-fill-mode:forwards;  
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:2s;
    -moz-animation-duration:2s;
    animation-duration:2s;
}

.fade {
    opacity:0;  
    -webkit-animation:fade ease-in 1;  
    -moz-animation:fade ease-in 1;
    animation:fade ease-in 1;
 
    -webkit-animation-fill-mode:forwards;  
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:2s;
    -moz-animation-duration:2s;
    animation-duration:2s;
}


.downBigFade { 
    -webkit-animation:downBig ease-in 1;  
    -moz-animation:downBig ease-in 1;
    animation:upBig ease-in 1;
 
    -webkit-animation-fill-mode:forwards;  
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:1.5s;
    -moz-animation-duration:1.5s;
    animation-duration:1.5s;
}

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

h1, h2, h3, h4, h5, h6 {
	color: #394042;
	font-family: 'Gotham-Medium', sans-serif;
	font-weight: 800;
	text-transform: uppercase;
}

h1 { font-size: 33px; letter-spacing: 2px;}
h2 { margin-top: 0;font-family: 'Gotham-Book'; font-weight: 400; font-size: 22px; margin-bottom: 50px; letter-spacing: 3px;}
h3 {  font-family: 'Gotham-Book'; font-weight: 400; font-size: 15px; margin-bottom: 20px; letter-spacing: 2px;}

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

strong {font-weight: 400;}

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

header {
	width: 100%;
	line-height: 120px;
	position: fixed;
	z-index: 999;
	max-width: 1290px;
	padding: 65px 100px;
	background-color: #F3F5F3;
	-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;
}
.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: #394042;
	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;
}

/*--- social icon ---*/

.social-icon{
	position: relative;
	display:  inline-block;
	width: 19px;
	height: 19px;
	border-radius: 20px;
	border: 2px solid #394042;
}

.social-icon > span {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 9px;
	height: 9px;
	border-radius: 20px;
	border: 2px solid #394042;
	-webkit-transition: all 0.3s ease;
	   -moz-transition: all 0.3s ease;
	    -ms-transition: all 0.3s ease;
	     -o-transition: all 0.3s ease;
	        transition: all 0.3s ease;
	opacity: 0;
}

.social-icon.open > span {
	opacity: 1;
}

header .social .social-icon{ float: left;}
header .menu .menu-icon{
	float: right;
	color: #F6F6F6;
}

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

ul.menu-hider {
	padding: 100px 100px 50px 100px; 
	width: 100%; 
	max-width: 1290px; 
	background-color: #4A819D; 
	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: #F6F6F6;
}
ul.menu-hider i {margin-right: 10px; position: relative; top: 2px;}
ul.menu-hider .float-left span {
	position: relative;
	left: 10px;
	color: #f6f6f6;
}
ul.menu-hider a.behance i {font-size: 17px; top: 4px;}
ul.menu-hider .menu-right{
	text-align: right;
	color: #f6f6f6;
}
ul.menu-hider.small {top: 0px;}

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

.open-menu {cursor: pointer;}

/*===================================================================================*/
/*  HOME                                                                             */ 
/*===================================================================================*/

#home {
	position: relative;
	text-align: center;
	height: 100vh;
	width: 100%;
	overflow: hidden;
	background-color: #5996B6;
	-webkit-backface-visibility: hidden;
	-webkit-transform: scale(1);
	overflow: hidden;
}

#home .mobile {height: 0 !important;}

#home h1, #home h2 { margin: 0 0; }

#home h1 { 	
 	color: #fff; 
 	letter-spacing: 6px; 
 	margin-bottom: 15px; 
 	font-weight: 400;
}

#home h2 {
	font-size: 18px;
	font-family: 'Bariol-Regular', serif; 
	text-transform: none;
	color: #fff;
	letter-spacing: 1px;
	margin-bottom: 125px;

}

#home hr {
	margin: 30px auto;
	width: 150px;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 1px solid #eee;
}

#home a {
	-webkit-animation-delay: 0.3s;
	-moz-animation-delay: 0.3s;
	animation-delay: 0.3s;
}

.header-group{
	width: 100%;
	margin: auto;
	position: absolute;
	top: 65%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	background-color: #5996B6;
}

/*===================================================================================*/
/*  ABOUT ME                                                                         */ 
/*===================================================================================*/

#about-me {
	background: #fff ;
	position: relative;
	height: 860px;
	overflow: hidden;
	height: auto;
}

#about-me .picture-frame {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 45%;	
	min-height: 100%;
	overflow: hidden;
}

#about-me a:hover {color: #394042;}

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

#about-me .picture-frame img {
	min-height: 100%;
	height: auto;
}

#about-me #author {
	position: absolute;
	bottom: 50px;
	left:50px;
	width: 90px;
	text-align: left;
	line-height: 40px;

}

#about-me .picture-frame .author {
	width: 50px;
	height: 50px;
	position: relative;
	vertical-align: center;
	bottom: 0;
	left:0;
	background: url('../img/icon/svg/photo.svg') center center no-repeat rgba(255,255,255,0.8);
	z-index: 300;
	-webkit-border-radius: 50px;
	        border-radius: 50px;
	-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;
	display: inline-block;
}

#about-me .picture-frame #author span{
	width: 250px;
	position: absolute;
	padding: 17px 15px;
	font-size: 14px;
	left: 80px;
	bottom: 17px;
	text-align: center;
	-webkit-border-radius: 2px;
	        border-radius: 2px;
	background-color: #fff;
	color: #394042;
	opacity: 0;
	line-height: 12px;
}

#about-me .picture-frame #author:hover .author{	
	background-color: rgba(57,64,66,0.90);
	-moz-transform: scale(1.2) rotateY(-180deg);
	-webkit-transform: scale(1.2) rotateY(-180deg);
	-o-transform: scale(1.2) rotateY(-180deg);
	-ms-transform: scale(1.2) rotateY(-180deg);
	transform: scale(1.2) rotateY(:;0deg);
}

#about-me .picture-frame #author:hover  span {
	opacity: 1;
	animation: fade 1s;
	-webkit-animation:fade 1s;
}

#about-me .picture-frame #author span .arrow-left {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	
	border-right:10px solid #fff; 
	
	position: absolute;
	top: 11px;
	left: -10px;
}

#about-me p {margin: 0;}

#about-me h3 {font-weight: 300; margin: 0 0 15px 0;}


ul.things li:first-child {margin-bottom: 60px;}
ul.things li {overflow: hidden; position: relative;}

ul.things li div.icon {position: absolute; top: 0; height: 100%; width: 43px; text-align: center;margin-right: 25px;}
ul.things li div.description {margin-left: 68px; overflow: hidden;}

ul.things.things-left {
	padding-right: 10px;
}

ul.things.things-right {
	padding-left: 10px;
}

#about-me  hr {
	width: 100%;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 1px solid #eee;
	margin: 100px 0;
}

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

#works {
	background-color: #5996B6;
}
#works p, #works h2 {text-align: center;}
#works p {
	margin-bottom: 75px;
	color: #f6f6f6;
}
#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: #4A819D;
	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 { 
	font-family: 'Gotham-Book', sans-serif; 
	color: #fff; 
	animation: down 1s;
	-webkit-animation: down 1s;
}

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


#works ul li span a {
	color: #fff; 
	line-height: 10px;
	animation: up 2s;
	-webkit-animation: up 1s;

	line-height: 8px;
	position: relative;
	left: -2px;
}

#works ul li span a div { 
	background: url(../img/icon/svg/arrow.svg) center right no-repeat;
	width: 20px; 
	height: 10px; 
	display: inline-block;
	position: relative;
	top: 1px;
	left: 7px;
	-webkit-transition: all 0.2s ease;
	   -moz-transition: all 0.2s ease;
	    -ms-transition: all 0.2s ease;
	     -o-transition: all 0.2s ease;
	        transition: all 0.2s ease;
}

#works ul li span a:hover div {left: 15px;}

#works hr { margin: 75px 0; border-top: 0; border-right: 0; border-left: 0; border-bottom: 1px solid #DCDCDC;}

#works .question h4 {
	font-family: 'Gotham-Book', sans-serif;
	font-weight: 400;
	letter-spacing: 2px;
	color: #000000;
}


#works .question ul {text-align: right;}
#works .question li {display: inline;}
#works .question li a {margin-left: 25px;}


#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%);

}


/*===================================================================================*/
/*  QUOTES                                                                           */ 
/*===================================================================================*/


#quotes {
	background-color: #FFFFFF;
	text-align: center;
	position: relative;
}
#quotes blockquote {
	font-size: 16px;
	margin-bottom: 5px;
	color: #394042;
}
#quotes a.author {color: #394042;text-transform: uppercase; font-family: 'Gotham-Book', sans-serif; letter-spacing: 1px;}

#quotes hr {margin-top:35px; margin-bottom: 35px; width: 50px; border-top: 0; border-right: 0; border-left:0; border-bottom: 1px solid #EEEEEE;}

#quotes ul {text-align: center;}

/* flexslider style */
ul.flex-direction-nav li { overflow: auto; }
ul.flex-direction-nav li a { 9display: inline-block; position: absolute;}
ul.flex-direction-nav li a.flex-prev {
	left: 100px;
	top: 50%;
	color: #394042;
}
ul.flex-direction-nav li a.flex-next { right: 100px; top: 50%;
color: #394042;
}

ul.flex-direction-nav li a:before{
	font-family: "icon" !important;
	font-style: normal !important;
	font-weight: normal !important;
	font-variant: normal !important;
	text-transform: none !important;
	line-height: 1;
	font-size: 25px;
	display: inline-block;
}

.flexslider ul.flex-direction-nav li a.flex-next:before {
	content: url(../icons/aright.png);
}

.flexslider ul.flex-direction-nav li a.flex-prev:before {
	content: url(../icons/aleft.png);
}

ul.flex-direction-nav li a.flex-prev:hover,
ul.flex-direction-nav li a.flex-next:hover {
	color: #394042;
}



/*===================================================================================*/
/*  CONTACT                                                                          */ 
/*===================================================================================*/

#contact {
	background-color: #5996B6;
}
#contact * { color: #394042; }
#contact h2 {color: #fff !important;}
#contact hr {
	margin: 100px auto;
	width: 100%;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 1px solid #394042;	
}

#contact hr {border-bottom: 1px solid #626c70;}

#contact ul li {
	letter-spacing: 1px;
	margin: 15px 0;
	padding: 10px 50px;
}

#contact ul li.location { background: url(../img/icon/svg/location.svg) no-repeat 3px 1px; }
#contact ul li.phone { background: url(../img/icon/svg/phone.svg) no-repeat 4px 1px; }
#contact ul li.mail {
	background: url(../img/icon/svg/mail.svg) no-repeat left 6px;
	color: #5996B6;
}

#contact ul li a:hover {color: #fff;}

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

/* form style */

input[type="text"],
input[type="email"],
input[type="password"],
textarea{
	color: #888;
	padding: 0 0 12px 0;
	font-size: 14px;
	font-family: inherit;
	font-weight: 400;
	font-style: normal;
	text-transform: normal;
	overflow: auto;
	vertical-align: middle;
	margin-bottom: 50px;
	background-color: #fff;
	border: none;
	
	-webkit-transition: all .3s ease-in-out;
	   -moz-transition: all .3s ease-in-out;
	    -ms-transition: all .3s ease-in-out;
	     -o-transition: all .3s ease-in-out;
	        transition: all .3s ease-in-out;

	border-radius: 0 !important;
}

input[type="text"],
input[type="email"] {
	border-bottom: 1px solid #000;
	width: 100%;
	min-height: 31px;
}

textarea{
	width: 100%;
	vertical-align: top;
	margin-bottom: 0;
	min-height: 150px !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
	background-color: #fff;
	border-color: #394042;
	border-radius: 0;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
	color: #707C80;
}

.name input {
	background: url(../icons/persona.png) no-repeat 4px top;
	padding-left: 40px;
}

 .email input {
	background: url(../icons/email.png) no-repeat left 4px;
	padding-left: 40px;
}


input::-moz-placeholder,
textarea::-moz-placeholder{
	color: #707C80;
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder{
	color: #707C80;
}

input[type="button"].button{
	border: none;
	float: right;
	margin-top: 50px;
	color: #fff !important;
	font-weight: 400;
	padding: 18px 50px 15px 50px;
	background-repeat: no-repeat !important;
	height: 50px; 
	width: 155px;
	background-position: center -50px;

}

input[type="button"].button.normal {
	background-color: #394042;
	-webkit-animation:fade .5s;	
	animation:fade .5s;	
}

input[type="button"].button.error-button {
	background: #A50606 url('../img/icon/svg/icon-error.svg') center center;
	background-repeat: no-repeat !important;
	background-position: center center;
	width: 155px;
	padding: 0;
	height: 50px;
}

input[type="button"].button.send-email {
	background: #79AEB9 url('../img/icon/svg/icon-check.svg');
	background-repeat: no-repeat !important;
	background-position: center center;
	width: 155px;
	padding: 0;
	height: 50px;
}

#response {margin-top: 50px;}
#response p{margin: 10px 0 0 0;}


/*===================================================================================*/
/*  FOOTER                                                                           */ 
/*===================================================================================*/

footer {
	background-color: #4A819D;
}
footer ul li {text-align: center;}
footer ul li i {margin-right: 7px; position: relative;font-size: 25px;}
footer ul li a.behance i {font-size: 27px;}
footer ul li a:hover {color: #fff;}

/*===================================================================================*/
/*  SUB FOOTER                                                                       */ 
/*===================================================================================*/

#sub-footer{
	background-color: #F3F5F3;
	padding: 100px 0;
	width: 100%;
	text-align: center;
	font-family: 'Gotham-Book', sans-serif;
	color: #f6f6f6;
}

#sub-footer p { font-size: 12px; letter-spacing: 1px;}

#sub-footer span { padding-bottom: 3px;}

#sub-footer img {
	position: relative; 
	top: 2px; 
	margin: 0 5px;
}

ul.menu-mobile {display: none;}

/*===================================================================================*/
/*  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%);
		color: #394042;
	}	

	ul.menu-hider {display: none;}

	ul.menu-hider{
		background-color: #4A819D; 
		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;
}