@font-face {
    font-family: Lora;
    src: url(font/Lora-Regular.ttf);
}

@font-face {
    font-family: Lora;
    src: url(font/Lora-Bold.ttf);
    font-weight: bold;
}

@font-face {
    font-family: Lato;
    src: url(font/Lato-Regular.ttf);
}

@font-face {
    font-family: Lato;
    src: url(font/Lato-Light.ttf);
    font-weight: 200;
}

@font-face {
    font-family: Lato;
    src: url(font/Lato-Bold.ttf);
    font-weight: bold;
}

@font-face {
    font-family: Lato;
    src: url(font/Lato-Black.ttf);
    font-weight: 800;
}

@font-face {
    font-family: AvenirNextDemiCn;
    src: url(font/AvenirNextDemiCn.otf) format("opentype");
}


html {
	height: 100%;
	width: 100%;
	overflow: hidden;
	}
	
body {
	width: 100%;
	background: #FFF;
	margin: 0;
	padding: 0;
	font-family: Lato;
	font-size: 20px;
	line-height: 32px;
	color: #555;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}

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


section {
    width: 100%;
    padding-top: 50px;
    position: relative;
	}

ul { 
    display: block;
    list-style: none;
    margin: 0;
   	padding: 0;
}

p {
	font-weight: normal;
}


#preload {
	display: none;
	position: absolute;
	top: 6000px;
	left: 6000px;
	width: 1px;
	height: 1px;
}

#sitewrapper {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin-left: 0;
    margin-top: 0;
    top: 0;
    left: 0;
    max-height: none;
	position: absolute;
	padding: 0;
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	}

#navwrapper {
	width: 100%;
	color: #FFF;
	position: fixed;
	z-index: 10000;
	opacity: 0.9;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transition: all 0.7s ease;
}

#navwrapper:hover {
	opacity: 1;
	background-color: rgba(0,0,0,0.2);
}

#navwrapper.open {
	opacity: 1;
	background-color: rgba(0,0,0,0.97);
}

#navinner {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 24px 50px 0 50px;
	box-sizing: border-box;
}

#navburger {
	width: 20px;
	height: 20px;
	margin-right: 0px;
	z-index: 10001;
	background: url('../assets/burger.png') no-repeat top left;
	background-size: contain;
}

#navburger.dark {
	background: url('../assets/burger_dark.png') no-repeat top left;
	background-size: contain;
}

#navburger.open {
	margin-right: 30px;
	background: url('../assets/burger_close.png') no-repeat top left;
	background-size: contain;
}

#navburger.open.dark {
	background: url('../assets/burger_close_dark.png') no-repeat top left;
	background-size: contain;
}

.navelem {
	font-size: 18px;
	line-height: 18px;
	margin-right: 30px;
	border-bottom: 5px solid transparent;
    opacity: 1;
    visibility: visible;
}

.navelem.last {
	float: right;
}

.navelem, #navburger {
	display: inline-block;
	vertical-align: top;
	cursor: pointer;
	padding-bottom: 14px;
    -webkit-transition: all 0.7s ease, border 0.2s ease, background 0.3s ease;
    -moz-transition: all 0.7s ease, border 0.2s ease, background 0.3s ease;
    -o-transition: all 0.7s ease, border 0.2s ease, background 0.3s ease;
    transition: all 0.7s ease, border 0.2s ease, background 0.3s ease;
}

.navelem.link.hide {
	opacity: 0;
	margin-right: -50px;
	visibility: hidden;
}

.navelem.selected, .navelem:hover {
	border-bottom: 5px solid rgba(0,0,0,0.3);
}

#navwrapper.white.open, #navwrapper.white:hover {
	background-color: rgba(255,255,255,0.95);
	border-bottom: 1px solid #DDD;
}


.projecttop {
	width: 100%;
	height: 300px;
}

.projecttopinfo {
	padding-top: 0px;
}

.sectioninner {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 50px;
}

.sectioninner.project {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.dividerwhite {
	width: 100%;
	height: 51px;
	margin-top: -51px;
}

.dividerimg.white {
	width: 100%;
	height: 51px;
	position: absolute;
}

.dividerimg {
	height: 51px;
	width: 100%;
}

.emblem {
	width: 75px;
	height: 75px;
	background-size: contain;
	left: 50%;
	margin-left: -37px;
	margin-top: -12px;
	position: absolute;
}

.logo {
	background-repeat: no-repeat;
	background-size: contain;
	padding-bottom: 15px;
}

.logo.header {
	padding-bottom: 20px;
}

.headertext, .headline {
	font-family: Lora;
	font-size: 28px;
	line-height: 40px;
	padding-bottom: 20px;
	font-weight: 200;
	-webkit-font-smoothing: auto;
}

.contributiontext {
	color: #FFF;
	padding-bottom: 25px;
	opacity: 0.5;
}

#sec_otherprojects {
	background-color: #F9FBFF;
	color: #666;
	margin-top: 100px;
}

#otherprojects_links {
	font-size: 0px;
	margin-top: 20px;
}

.otherprojectstext {
	font-size: 21px;
	line-height: 50px;
}

#otherprojects_links a:link, #otherprojects_links a:visited {
	color: #555;
}

#otherprojects_links a:hover {
	text-decoration: underline;
}

#otherprojects_links li {
	display: block;
	width: 100%;
	margin-bottom: 30px;
}

#firstli {
	margin-left: 0!important;
}

.otherprojectsimg {
	width: 100%;
	background-size: 100% auto;
	background-repeat: no-repeat;
	margin-bottom: 10px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border-radius: 10px 10px 0 0;
    background-position: 0 0;
    max-height: 220px;
}

.otherprojectsimg:hover {
	background-position: 0 0;
}

.otherprojects_trans {
	width: 100%;
	height: auto;
	position: relative;
	top: 0;
	left: 0;
	display: block;
}

#otherprojectsimg_ou {
	background-image: url('../assets/otherprojects_ou.png');
	background-color: #00AB80;
}

#otherprojectsimg_ns {
	background-image: url('../assets/otherprojects_ns.png');
	background-color: #FF656C;
}

#otherprojectsimg_pl {
	background-image: url('../assets/otherprojects_pl.png');
	background-color: #592770;
}

#otherprojectsimg_ps {
	background-image: url('../assets/otherprojects_ps.png');
	background-color: #333;
}

#otherprojectsimg_kcd {
	background-image: url('../assets/otherprojects_kcd.png');
	background-color: #60BDF4;
}

#sec_contact {
	background-color: #0E1522;
	color: #FFF;
}

#contact_secinner {
	text-align: center;
	padding: 40px 0 80px 0;
}

#otherprojects_secinner {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 50px;
}

#contact_together, #otherprojects_title {
	font-size: 30px;
	line-height: 30px;
	padding-bottom: 30px;
	font-family: Lora;
}

#otherprojects_title {
	color: #0E1522;
}

#contact_button {
	margin: 0 auto;
}

.button {
    font-size: 15px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.4);
    width: 130px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    border-radius: 5px;
	}

.button:hover {
    border: 1px solid rgba(255, 255, 255, 0.6);
    background-color: rgba(255,255,255,0.1);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
	}

.button a {
	text-decoration: none!important;
}

.table {
	display: table;
	width: 100%;
}

.col.left, .col.right {
	display: table-cell;
	vertical-align: middle;
	position: relative;
}

.col.left.hero {
	width: 50%;
}

.col.right.hero {
	text-align: right;
	width: 50%;
}

.rightalign {
	text-align: right;
}

.img {
	width: 100%;
	max-width: 375px;
	height: auto;
	background-repeat: no-repeat;
	background-size: contain;
	margin-bottom: 70px;
}

.img100 {
	width: 100%;
	height: auto;
	padding: 40px 0;
}

.mw300 {
	max-width: 300px;
	}

.img_hero {
	width: 100%;
	max-width: 270px;
	height: auto;
	position: relative;
	z-index: 1000;
}

.pad {
	padding-bottom: 20px;
}

.extrapad {
	padding-top: 100px;
}

.fifty {
	width: 50%;
}

.ninety {
	width: 90%;
}

#beforeafterwrapper, .beforeafterwrapper {
	padding: 40px 0;
	margin: auto;
	width: 200px;
	text-align: center;
	font-size: 1.1em;
}

.beforeafter {
	font-weight: bold;
	color: #36B;
	text-decoration: underline;
	cursor: pointer;
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.beforeafter:hover {
	color: #4D9DEC;
}

.beforeafter.selected {
	font-weight: bold;
	text-decoration: none;
	color: #333;
	cursor: default;
}

#beforeafterdivider, .beforeafterdivider {
	padding: 0 10px;
	color: #DDD;
}

.productlabel {
	font-size: 0.8em;
	font-weight: 800;
	margin-bottom: 20px;
	color: #444;
}

.productlabel.margin {
	margin-top: 50px;
}

.processsubtitle {
	font-size: 0.8em;
	line-height: 1.8em;
	color: #999;
	margin-bottom: 40px;
}