@import url("//fast.fonts.net/t/1.css?apiType=css&projectid=71a2c862-2b46-4237-a456-b770c7af1330");
@font-face{
font-family:"Neue Helvetica W01_n2";
src:url("Fonts/56be84de-9d60-4089-8df0-0ea6ec786b84.eot?#iefix") format("eot")
}
@font-face{
font-family:"Neue Helvetica W01";
src:url("Fonts/56be84de-9d60-4089-8df0-0ea6ec786b84.eot?#iefix");
src:url("Fonts/56be84de-9d60-4089-8df0-0ea6ec786b84.eot?#iefix") format("eot"),url("Fonts/50d35bbc-dfd4-48f1-af16-cf058f69421d.woff") format("woff"),url("Fonts/278bef59-6be1-4800-b5ac-1f769ab47430.ttf") format("truetype"),url("Fonts/2e309b1b-08b8-477f-bc9e-7067cf0af0b3.svg#2e309b1b-08b8-477f-bc9e-7067cf0af0b3") format("svg");
font-weight: 200;
font-style: normal;
}
@font-face{
font-family:"Neue Helvetica W01_n3";
src:url("Fonts/ae1656aa-5f8f-4905-aed0-93e667bd6e4a.eot?#iefix") format("eot")
}
@font-face{
font-family:"Neue Helvetica W01";
src:url("Fonts/ae1656aa-5f8f-4905-aed0-93e667bd6e4a.eot?#iefix");
src:url("Fonts/ae1656aa-5f8f-4905-aed0-93e667bd6e4a.eot?#iefix") format("eot"),url("Fonts/530dee22-e3c1-4e9f-bf62-c31d510d9656.woff") format("woff"),url("Fonts/688ab72b-4deb-4e15-a088-89166978d469.ttf") format("truetype"),url("Fonts/7816f72f-f47e-4715-8cd7-960e3723846a.svg#7816f72f-f47e-4715-8cd7-960e3723846a") format("svg");
font-weight: 300;
font-style: normal;
}
@font-face{
font-family:"Neue Helvetica W01_n5";
src:url("Fonts/b7693a83-b861-4aa6-85e0-9ecf676bc4d6.eot?#iefix") format("eot")
}
@font-face{
font-family:"Neue Helvetica W01";
src:url("Fonts/b7693a83-b861-4aa6-85e0-9ecf676bc4d6.eot?#iefix");
src:url("Fonts/b7693a83-b861-4aa6-85e0-9ecf676bc4d6.eot?#iefix") format("eot"),url("Fonts/bcf54343-d033-41ee-bbd7-2b77df3fe7ba.woff") format("woff"),url("Fonts/b0ffdcf0-26da-47fd-8485-20e4a40d4b7d.ttf") format("truetype"),url("Fonts/da09f1f1-062a-45af-86e1-2bbdb3dd94f9.svg#da09f1f1-062a-45af-86e1-2bbdb3dd94f9") format("svg");
font-weight: 500;
font-style: normal;
}

* { margin: 0; padding: 0; border: 0; }
html, body { height: 100%; background: #007aff; font: 300 18px/24px "Neue Helvetica W01", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333; }
.wrapper { width: 940px; margin: 0 auto; }
a { color: #007aff; -webkit-transition-duration: 0.5s; transition-duration: 0.5s;}
a:hover { text-decoration: none; color: #f29128; }
b, strong { font-weight: 500; }

#header { background: #007aff; width: 100%; height: 230px; position: absolute; top: 0; z-index: 20; }
h1 { text-align: center; color: #fff; font-size: 96px; line-height: 150px; padding-bottom: 80px; font-weight: 200; height: 150px; }
h1 sup { font-size: 28px; }
#menu { position: absolute; width: 100%; background: #007aff; margin-top: -80px; height: 80px; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; z-index: 11; }
#viewed { position: absolute; background: #000; height: 100%; }
.fl_menu { margin: 0; text-align: center; list-style: none; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; position: relative; }
.fl_menu li, .fl_menu a { display: inline-block; }
.fl_menu a { padding: 0 10px; line-height: 80px; color: #fff; font-size: 24px; text-decoration: none; }
.fl_menu a.highlight { background: #f29128; }
.fl_menu a.highlight:hover { opacity: 1; cursor: default; }
.pic { background: #f29128; background-position: center; height: 500px; background-size: cover; position: relative; }
.parallax .pic { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
.noparallax #pic_0 { margin-top: 230px; }

.content { background: #fef9f4; padding: 100px 0; position: relative; z-index: 11; }
.content h2 { float: left; width: 250px; text-align: right; border-right: 1px solid #cbe0f6; padding-right: 40px; text-transform: lowercase; font-weight: 200; color: #007aff; font-size: 28px; line-height: 32px; }
.content h3 { text-transform: lowercase; font-weight: 200; color: #007aff; font-size: 24px; line-height: 24px; margin: 20px 0; }
.content ul { margin: 20px 20px; list-style: none; }
.content li { margin-bottom: 3px; }
.content li:before { content: "■ "; position: relative; top: -2px; font-size: 14px; line-height: 14px; margin: 0 5px 0 -18px; color: #f29128; }

.content .contwrap { border-left: 1px solid #cbe0f6; margin-left: 290px; padding-left: 40px; }
.content p { margin: 10px 0; }
.content p:first-child { margin-top: 0; }
.content p:last-child { margin-bottom: 0; }
.footer { background: #007aff; padding: 20px 0; font-size: 14px; line-height: 20px; position: absolute; z-index: 10; bottom: 0; left: 0; right: 0; text-align: center; }
.footer a { color: #fff; }
.noparallax #cont_3 { padding-bottom: 160px; }

.clear { clear: both; }
.fl_menu a:hover, #menu h3 a:hover, .footer a:hover { opacity: 0.6; }

#menu h3 { position: absolute; display: none; font-size: 36px; line-height: 40px; padding-top: 20px; font-weight: 200; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; z-index: 21; }
#menu h3 a { color: #fff; text-decoration: none; }
#menu.fixmenu { position: fixed; top: 0; z-index: 20; margin-top: 0; }
#menu.fixmenu h3 { display: block; }
#menu.fixmenu .fl_menu { text-align: right; margin-right: -10px; }
#menu.smmenu { height: 40px; }
#menu.smmenu h3 { padding-top: 0; }
#menu.smmenu .fl_menu a { line-height: 40px; font-size: 18px; }

#pic_0 { z-index: 7; background-image: url('../gfx/natter-screens.jpg');}
#pic_1 { background-image: url('../gfx/responsive-design.jpg');}
#pic_2 { background-image: url('../gfx/headset-keyboard.jpg');}
#pic_3 { background-image: url('../gfx/chat-bubbles.jpg');}

#header, .content { box-shadow: 0 0 10px #333; }
#menu.fixmenu { box-shadow: 0 5px 10px -5px #333; }
@media screen and (max-width: 979px) {
	.wrapper { width: 740px; }
	.content h2 { width: 150px; }
	.content .contwrap { margin-left: 190px; }
}
@media screen and (max-width: 767px) {
	.wrapper { width: auto; padding: 0 20px; }
}
@media screen and (max-width: 599px) {
	#header { height: 160px; }
	h1 { font-size: 72px; line-height: 100px; height: 100px; padding-bottom: 60px; }
	h1 sup { font-size: 24px; }
	#menu { height: 60px; margin-top: -60px; }
	.fl_menu a { line-height: 60px; }
	#menu h3 { display: none!important; }
	#menu.fixmenu .fl_menu { text-align: center; margin-right: 0; }
	.noparallax #pic_0 { margin-top: 160px; }
	.footer { text-align: left; }
}

@media screen and (max-width: 579px) {
	.content h2 { float: none; width: auto; border-right: 0; padding-right: 0; text-align: left; margin-bottom: 20px; }
	.content .contwrap { margin-left: 0; padding-left: 0; border-left: 0; }
}
@media screen and (max-width: 400px) {
	.fl_menu a { font-size: 18px; }
}