/*   */
body {font-size: 14px; font-weight: 200; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; overflow: hidden;}

.story { height: 1080px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(0,0,0,0.4); box-shadow: 0 0 50px rgba(0,0,0,0.8);}

a {text-decoration: none;}

.wrapper {position: relative; width: 100%; height: 100%; float: left;}

h2, h3, h4 {line-height: normal; font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; font-size: 72px; font-weight: 100; }

.disclaimer {margin-top: 30px; color: #888 !important; width: 100%; float: left;}

#navigation {position: fixed; width: 100%; height: 43px; background: black; top: 0; left: 0; z-index: 1000; box-shadow: 0 1px 5px black;}
#navigation ul {margin: 0 auto; width: 1020px; padding: 0; list-style: none; margin-top: 17px;}
#navigation ul li {float: left; margin: 0 34px;}
#navigation ul li:first-child {margin-left: 0;}
#navigation ul li:last-child {margin-right: 0;}
#navigation ul li img {margin-top: -12px;}
#navigation ul li a {color: #777; cursor: pointer;}
#navigation:hover ul li a {color: #aaa;}
#navigation ul li a:visited {color: #777;}
#navigation ul li a:hover {color: #fff; text-shadow: 1px 0 12px white, -1px 0 12px white, 0 0 12px white;}
#navigation ul li a:active {color: #ccc;}
#navigation ul li a.active {color: #fff; text-shadow: 1px 0 12px white, -1px 0 12px white, 0 0 12px white;}

#first { background: #ccc url(../images/layout/bg1.jpg) 50% 0 repeat fixed;  z-index: 1;}
#second { background: url(../images/layout/bg2.jpg) 50% 0 repeat fixed;  z-index: 2;}
#third { background: url(../images/layout/bg3.jpg) 50% 0 repeat fixed; z-index: 3; }
#fourth { background: url(../images/layout/bg3_2.jpg) 60% 300px repeat fixed; height: 1750px; overflow: hidden;}
#fifth { background: #ccc url(../images/layout/bg4.jpg) 50% 0 repeat fixed; }
#sixth { background: url(../images/layout/bg4.jpg) 50% 0 repeat fixed; }
#theend { background: url(../images/layout/bg6.jpg) 50% top repeat fixed; }

/* Introduction */
#first .logoStart { background: url(../images/layout/logoStart.png) 50% 180px no-repeat fixed; min-height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; }
#first article { width: 1000px; left: 50%; margin-left: -480px; top: 470px; position: absolute; text-align: center; }
#first #icons {width: 100%; height: 300px; margin-top: 30px;}
#first #icons div {width: 333px; height: 100%; float: left; position: relative;}
#first #icons div img {position: absolute; top: 0; left: 26px; cursor: pointer;}
#first #icons div img:first-child {left: 40px; top: 10px;}
#first #icons div img.startIcon:hover {width: 255px; margin: -8px 0 0 -4px;}
#first #icons div img.startText:hover {width: 200px; margin: -4px 0 0 -4px;}

/* About us */
#second { padding: 0px 0;}
#second article { width: 940px; height: 940px; color: #fff; left: 50%; margin: 144px 0 0 -470px; position: absolute; top: 0; }
#second .pIcon { background: url(../images/layout/pIcon.png) transparent 85% 100px no-repeat fixed; min-height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; }
#second .paper { width: 480px; height: 750px; border: 10px solid white; background: #f1f1f1; position: absolute; top: 0; left: 0; z-index: 100; box-shadow: 0 1px 9px #ccc;}
#second .hand { width: 438px; height: 320px; background: url(../images/layout/hand.png) right top; position: absolute; top: 626px; left: -311px; z-index: 100;}

#second .reiter {border: 1px solid transparent; cursor: pointer; text-align: right; width: 130px; height: 15px; padding: 11px 14px; color: white; position: absolute; z-index: 10;}
#second .reiterDo  {background: #e2007a; left: 490px; top: 23px;}
#second .reiterAre {background: #009ee0; left: 355px; top: 65px;}
#second .reiterBg {font-size: 14px; font-weight: 200; border: 1px dashed #fff; background-color: rgba(255,255,255,0.3); cursor: pointer; color: #000; text-shadow: 0 1px 0 white; text-align: right; width: 130px; height: 15px; padding: 11px 14px; position: absolute; left: 490px; top: 23px; z-index: 1;}
#second .reiterBg + .reiterBg {top: 65px;}
#second .reiterBg + .reiterBg + .reiterBg {top: 107px;}

#second .paper div {position: relative; width: 100%; height: 660px; float: left;}
#second .paper div + div {display: none;}

#second .paper .paperDo  {background: url(../images/layout/bgDo.png) no-repeat left top; }
#second .paper .paperAre {background: url(../images/layout/bgAre.png) no-repeat left top; }

#second .paper h2 {line-height: 60px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  width: 400px; left: 50%; margin-left: -200px; position: absolute; top: 70px; }
#second .paper .paperDo  h2 {color: #e2007a;}
#second .paper .paperAre h2 {color: #009ee0;}

#second .paper .text {font-size: 15px; line-height: 25px; width: 400px; color: #222; text-align: justify; left: 50%; margin-left: -200px; bottom: 160px; position: absolute; height: auto;}
#second .paper .text > div {display: block;}
#second .paper .text img {}

#second .paper .getInTouch {cursor: pointer; margin-top: 18px; float: right;}

/* Clients */
#third { padding: 0px 0;}
#third article { width: 940px; height: 940px; color: #fff; left: 50%; margin: 144px 0 0 -470px; position: absolute; top: 0; }
#third .paper { width: 480px; height: 750px; border: 10px solid white; background: #f1f1f1; position: absolute; top: 0; left: 0; z-index: 100; box-shadow: 0 1px 9px #ccc;}

#third .reiter {border: 1px solid transparent; cursor: pointer; text-align: right; width: 130px; height: 15px; padding: 11px 14px; color: white; position: absolute; z-index: 10;}
#third .reiterFor {background: #ffa200; left: 355px; top: 107px;}
#third .reiterBg {font-size: 14px; font-weight: 200; border: 1px dashed #fff; background-color: rgba(255,255,255,0.3); cursor: pointer; color: #000; text-shadow: 0 1px 0 white; text-align: right; width: 130px; height: 15px; padding: 11px 14px; position: absolute; left: 490px; top: 23px; z-index: 1;}
#third .reiterBg + .reiterBg {top: 65px;}
#third .reiterBg + .reiterBg + .reiterBg {top: 107px;}

#third .paper div {position: relative; width: 100%; height: 660px; float: left;}
#third .paper div + div {display: none;}

#third .paper .paperFor {background: url(../images/layout/bgFor.png) no-repeat left top; }

#third .paper h2 {line-height: 60px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  width: 400px; left: 50%; margin-left: -200px; position: absolute; top: 70px; }
#third .paper .paperFor h2 {color: #ffa200;}

#third .paper .text {font-size: 15px; line-height: 25px; width: 400px; color: #222; text-align: justify; left: 50%; margin-left: -200px; bottom: 70px; position: absolute; height: auto; }
#third .paper .text > div {display: block;}
#third .paper .text img {}

#third .paper .getInTouch {cursor: pointer; margin-top: 18px; float: right;}

#third .paper2 {height: 458px; width: 480px; margin-left: 563px; margin-top: 51px; background: none repeat scroll 0 0 #F1F1F1; border: 10px solid #FFFFFF; box-shadow: 0 1px 9px #CCCCCC; }

/* Services */
#fourth article { border: 0px solid black; width: 500px; height: 500px; background: url(../images/layout/iconTranslateServices.png) 0px 200px no-repeat; color: #fff; padding: 0px; margin: 0 0 0 67%; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.5em; color: #fff; position: absolute; top: 30px; }

#fourth .icoContent { background: url(../images/layout/iconDesignServices.png) transparent 50% 100px no-repeat fixed; min-height: 3240px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; }
#fourth .icoContent .icoText {color: #222; margin: 90px 0 0 -470px; width: 450px; height: 900px; position: absolute; left: 50%; }
#fourth .icoContent .icoText h2 {width: 480px; font-size: 58px; line-height: 50px; display: block; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; float: left;}

#fourth h2#h2doc {color: #e2007a;}
#fourth h2#h2vis {color: #009ee0;}
#fourth h2#h2tra {color: #ffa200;}

#fourth .icoContent .wrapper > div div {width: 400px; height: 550px; border: 1px solid white; background-color: rgba(255,255,255,0.3); border-radius: 12px; margin: 20px 0; float: left; text-align: justify; padding: 15px;}
#fourth .icoContent .wrapper > div div span {display: block; width: 100%; text-align: left; font-style: italic; font-size: 22px; float: left; margin: 0 0 10px 0;}
#fourth .icoContent .wrapper > div div ul {margin: 20px 0px 10px 40px; float: left; width: 100%; font-weight: 400;}

#fourth .icoContent .wrapper > div {display: none; top: 120px; position: fixed; width: 480px; z-index: 0;}

#fourth .icoContent #servicesNav {position: fixed; top: 150px; left: 200px; display: none;}
#fourth .icoContent .servicesNext {cursor: pointer; float: left; margin-top: -88px; margin-left: 20px; }

#fourth .icoContent .getInTouch {cursor: pointer; margin-top: -96px; margin-left: 60px; }

/* Portfolio */
#fifth article {  background: transparent; color: #fff; left: 50%; margin-left: -473px; position: absolute; top: 200px; width: 942px; text-align: center;}
#fifth .photograph { background: url(../images/layout/iconTranslate.png) transparent 40% 100px no-repeat fixed; min-height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; }

#fifth article ul {border: 1px solid transparent; width: 100%; background: transparent; margin: 0; padding: 0 0 0 1px; list-style: none;}
#fifth article ul li {background: #ddd; height: 130px; width: 186px; border: 1px solid #fff; float: left; overflow: hidden; text-align: center;}
#fifth article ul li:hover {border-color: #000; background: #dfdfdf; cursor: pointer; }
#fifth article ul li.liMage:hover {border-color: #e2007a; }
#fifth article ul li.liCyan:hover {border-color: #009ee0; }
#fifth article ul li.liYell:hover {border-color: #ffa200; }

/* #fourth article ul li:first-child {text-align: center; font-size: 32px; cursor: default; padding-top: 47px; height: 83px;}
#fourth article ul:first-child li:first-child {background: #e2007a; }
#fourth article ul + ul li:first-child:hover {background: #009ee0; }
#fourth article ul + ul + ul li:first-child:hover {background: #ffa200; } */
#fifth article .getInTouch {cursor: pointer; margin-top: 30px;}

/* People */
#sixth article { color: #fff; left: 50%; margin-left: -340px; position: absolute; top: 80px; width: 942px; min-height: 500px;}
#sixth .photograph { background: url(../images/layout/iconDesign.png) transparent 40% 100px no-repeat fixed; min-height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; }

#sixth ul {margin: 0; padding: 0 0 0 20px; list-style: none;}
#sixth ul li {float: left; position: relative; width: 210px; height: 210px; margin: 7px; background: #ddd; overflow: hidden; cursor: pointer;}
#sixth ul li > div {padding: 25px 15px; display: none; position: absolute; top: 0; left: 0; width: 180px; height: 100%;}
#sixth ul li > div h3 {font-size: 18px; border-bottom: 1px solid white; margin-bottom: 9px;}
#sixth ul li:hover > div {display: block; opacity: 0.8;}
#sixth ul li.liCyan > div {background: #009ee0;}
#sixth ul li.liMage > div {background: #e2007a;}
#sixth ul li.liYell > div {background: #ffa200;}
#sixth ul li:first-child {text-align: center; font-size: 32px; cursor: default; padding-top: 86px; height: 123px;}
#sixth ul li:first-child:hover {background: #ffa200;}

#sixth article .getInTouch {cursor: pointer; margin-top: 10px;}
/* The End */
#theend {height: 900px;}
#theend .byebye {display: none; height: 1000px; padding: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; }

#theend article { color: #333; left: 50%; margin-left: -473px; position: absolute; top: 80px; width: 942px; min-height: 500px;}

#theend .contactUs {width: 305px; margin-top:80px; float: left;}
#theend h2 {color: #e2007a;}
#theend h4 {font-size: 18px;}

#theend iframe {width: 450px; height: 600px; border: 1px solid transparent; overflow: hidden; float: right; margin-top: 132px;}

#contactForm table {font-size: 18px; color: #333;}
#contactForm table tr td {font-size: 18px; padding: 7px; vertical-align: middle;}
#contactForm table tr:last-child td {vertical-align: top;}
#contactForm p {margin: 10px 0;}
#contactForm input {font-family: Quicksand, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 100; height: 22px; padding-top: 3px; border: 1px solid #ccc; background: white;}
#contactForm tr:hover td {color: #000;}
#contactForm tr:hover input {border: 1px solid #e2007a; background: #f5f5f5; color: #222;}
#contactForm tr:hover textarea {border: 1px solid #009ee0; background: #f5f5f5; color: #222;}

#contactForm textarea {font-family: Quicksand, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 100; width: 204px;}

#contactForm .sendMail {background: white; padding: 10px 12px 7px 12px; height: auto; margin-left: 10px; margin-top: 20px;}
#contactForm .sendMail:hover {background: #f5f5f5; color: black; border: 1px solid #e2007a;}
.thanks h4 {color: #e2007a; font-size: 18px;}