/*
@font-face {
    font-family: 'texgyreadventorbold_italic';
    src: url('fonts/texgyreadventor-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'texgyreadventoritalic';
    src: url('fonts/texgyreadventor-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}*/
/*
@font-face {
    font-family: 'texgyreadventorregular';
    src: url('fonts/texgyreadventor-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'texgyreadventorbold';
    src: url('fonts/texgyreadventor-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
*/



::selection { background: #2c4f6f ; color:#FFFFFF; /* Safari */ }
::-moz-selection {background: #2c4f6f ; color:#FFFFFF ; /* Firefox */ }


body {
	font-weight:400;
	color:#737373;
	font-size:16px;
    font-family: 'Open Sans';
    margin:0;
    line-height: 1.8em;
}

img {
    max-width: 100%;
}

a,button {
	text-decoration: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
a {
	color:inherit;
}
a:hover {
	color:#e36f1e;
}


strong,b {
	font-weight:700;
}

h2 {
	margin-top:0;
	color:inherit;    
	line-height: 1.4em;
	font-family: 'Muli';
	font-weight: 200;
}

p {
	font-size: 1em;
	margin-top:0;
	color:inherit;
}


section {
	position: relative;
    width: 100%;
    height: 100%;
}

#arrow-holder {
	position: fixed;
    z-index: 1000;
	bottom:50px;
    width: 100%;

    pointer-events: none;
}
#arrow-holder .grid {
	text-align: right;
	overflow: visible;
}

#scroll-arrow {
	/*display: inline-block;*/
	width: 40px;
    height: 20px;
    background-repeat: no-repeat;
    background-image: url(../images/down-arrow.svg);
    background-position: center;
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
    pointer-events: all;
    display: none;
}
#scroll-arrow.showMe {
	display: inline-block;
}

#scroll-arrow:hover {
    margin-bottom: 5px;
}


.logo .tagline {
	font-size: 22px;
}
.logo img {
	max-width:270px;
}


.grid {
	max-width: 990px;
}


header {
    /*border-bottom: 1px solid transparent;*/
    border-bottom: 1px solid #a1a3a4;
	padding: 20px 0;
	background-color: #fff;
    position: fixed;
    z-index: 1000000;
    top:0;
    left:0;
    width:100%;
    font-family: 'Muli';
    font-weight: 200;
}

/*header.about-open {
    border-color: #a1a3a4;
}*/

header .btns {
	padding-right:0;
}
header .btns a {
	/*text-transform: uppercase;*/
	font-weight: 200;
	font-size: 18px;
    float: right;
    text-align: right;
    padding: 0 5%;
    margin-top: 26px;
    position: relative;
}

header a:not(.about-btn) {
    border-right:1px solid #d0d1d1;
}



header a.about-btn:after {
	content:'';
	position: absolute;
	top:30px;
	right:0;
	left:0;
	margin:auto;
	height: 20px;
    background-repeat: no-repeat;
    background-image: url(../images/down-arrow.svg);
    background-position: center;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}


header a.about-btn.clicked:after {
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}




@media screen and (min-width:1025px) {
	header a.about-btn:hover:after {
		top:35px;
	}

	header a.about-btn.clicked:after {
		top:35px;
	}

	header a.about-btn.clicked:hover:after {
		top:30px;
	}
}
@media screen and (max-width:767px) {
	header {
		position: relative;
	}
	header .btns {
	    padding-bottom: 15px;
	    padding-top: 15px;
    	text-align: center;
	}
	header .btns a {
		float:none;
    	font-size: 14px;
   		margin-top: 20px;
    	padding: 0 3%;
	}
	/*header a:not(.about-btn) {
		border-right:none;
	    border-left:1px solid #d0d1d1;
	}*/
	header .logo {
		padding: 0;
		text-align: center;
	    width: 70%;
	    margin: 0 auto;
	}
	.logo .tagline {
	    font-size: 16px;
	}
}


/*////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////*/

#about {
	padding: 50px 0 20px;
    position: fixed;
    z-index: 1000;
    height: auto;
    color: #fff;
    background: #e36f1e;
    top: 120px;
}
#about.before-load {
	top:1200px;
}

#about .content {
	font-size: 16px;
	/*color:#706c68;*/
	color:#fff;
	font-family: 'Muli';
	font-weight: 300;
}

#about .grid > div.text:first-of-type {
	padding-right:2em;
}

#about .grid > div.text:last-of-type {
	padding-left:2em;
	padding-right:0;
}

#about .text a {
	color:#e36f1e;
}
#about .text a:hover {
	text-decoration: underline;
}

#about .text ul {
	padding-left: 1.5em;
}

#about .text li {
	list-style-type: none;
    position: relative;
}
#about .text li:before {
	content:'+';
    margin-right: 0.7em;
    position: absolute;
    top: -0.15em;
    left: -1.5em;
}


/*----- Footer -----*/
footer{
	position: relative;
	margin-top: 30px;
}
footer ul {	
	width: 100%;
  	font-size: 14px;
  	padding:0;
}
footer ul li {
	display: inline-block;
	/*color:#ccc;*/
}

footer ul li a { 
	color:inherit;
	text-decoration: underline;
	/*color:#ccc;*/

}
footer ul li a:hover { 
	text-decoration: none;
}


footer ul li.coded-by {
	float:right;
}
footer ul li.coded-by a {
	text-decoration: none;
}
footer ul li.coded-by a:hover {
	text-decoration: underline;
}

@media screen and (max-width:767px) {
	#about {
    	top: 0px;
    	position: relative;
    	padding-top: 10px;
	}
	#about .grid > div.text:first-of-type,
	#about .grid > div.text:last-of-type {
		padding:0;
	}
	/*#about .content {
	    font-size: 16px;
	    padding: 0 15px;
	}*/
	footer ul {
	    font-size: 13px;
	}
	footer ul li.coded-by {
	    float: left;
	}
}

/*////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////*/


#projects {
	padding-top: 240px;
    max-width: 760px;
}

#projects:after {
	content:'';
	position: fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0);
	-webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    transition: background-color 0.3s;
    pointer-events:none;
}
#projects.overlay:after {
	background-color:rgba(0,0,0,0.4);
    pointer-events:all;
}

.proj-item {
	margin-bottom: 60px;
    border-bottom: 1px dashed #dedede;
    padding-bottom: 40px;
}
.proj-item .ih {
    min-height: 150px;
}
.proj-item .text {
	margin-top: -70px;
}

.proj-item .text a {
	color:#e36f1e;
}

.proj-item .text a:hover {
	text-decoration: underline;
}


.proj-item p.scope {
	font-family: 'Muli';
	font-weight: 600;
}

@media screen and (max-width:767px) {
	.proj-item .text {
	    margin-top: -20px;
	}

	#projects {
	    padding-top: 30px;
	}
}

/*////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width:1140px) {
	.grid {
		max-width:960px;
	}
}

@media screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
	.grid {
		max-width:720px;
		min-width:700px;
	}
	#projects {
		max-width:720px;
	}
	header .btns a {
		font-size:14px;
    	margin-top: 30px;
	}
	.logo img {
	    max-width: 290px;
	}
	.logo .tagline {
	    font-size: 17.6px;
	}
	#about {
		top:120px;
	}
	/*#about .content {
	    font-size: 16px;
	}*/
	#about .grid > div.text:first-of-type {
	    padding-right: 1em;
	}
	#about .grid > div.text:last-of-type {
	    padding-left: 1em;
	}
	footer ul {
	    font-size: 12px;
	    text-align: center;
	}
	footer ul li.coded-by {
		float:none;
	}
}
@media screen and (max-width:767px) {
	#projects:after {
		height:700px;
	}
	header a.about-btn:after {
		top: 25px;
		height: 15px;
	}
	.grid {
		padding-left:20px;
		padding-right:20px;
	}
	footer ul {
	    font-size: 12px;
	    text-align: center;
	}
	footer ul li.coded-by {
		float:none;
	}
	footer {
		margin-top: 30px !important;
		line-height: 1.3em;
		padding: 0;
	}
	
	footer,
	footer .content {
		padding:0 0px !important;
	}
}


.clearfloat {
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}