/* 1. General Styles */
body, html {margin:0; padding:0; font-family:Roboto; font-weight:400; font-size:14px; color:#242424; background-color:#f3f3f3;}
a, a:hover, a:visited {text-decoration:none; color:white; font-weight:400;}
a {transition:color 0.5s; -webkit-transition:color 0.5s; -moz-transition:color 0.5s; -o-transition:color 0.5s;}
a:hover {color:#ffae00;}
@-ms-viewport {width:device-width;}
/* 2. Header */
#header {width:100%; height:620px; position:relative; overflow:auto; background-image:url('pics/header.jpg'); color:white; text-align:center; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover;}
#header a {letter-spacing:2px;}
#header img {float:left; margin-top:30px; margin-left:80px;}
#header ul {float:left; margin:0; padding:0; margin-left:105px; margin-top:50px; list-style-type:none;}
#header ul li {margin-right:20px; display:inline;}
#header h1 {clear:both; padding-top:10px; font-size:36px; font-weight:900; letter-spacing:3px;}
#header g {color:#ffae00; font-size:30px; letter-spacing:5px; font-weight:900; padding-left:15px; padding-right:15px;}
#header span {font-size:14px; display:none; margin-top:30px; text-align:left; margin-left:400px}
#header span:nth-of-type(1) {display:block;}
#header button {width:120px; margin-top:30px; height:40px; color:white; font-family:Roboto; border:1px solid #3aaeaa; background-color:rgb(0,0,0); background-color:rgba(0,0,0,0); cursor:pointer;
transition:background-color 0.5s;
-webkit-transition:background-color 0.5s;
-moz-transition:background-color 0.5s;
-o-transition:background-color 0.5s;}
#header button:hover {background-color:#3aaeaa;}
/* 3. About */
#about {width:1200px; margin:0 auto; text-align:center;}
#about h2 {font-size:36px; font-weight:900; padding-top:40px; margin-bottom:50px; letter-spacing:2px;}
#about .single_item h3 {font-size:20px; font-weight:700; margin-top:10px; text-align:left;}
#about .single_item {float:left; text-align:left; width:256px; margin-left:150px; padding:20px;
-webkit-box-shadow: 0px -5px 5px 0px rgba(50, 50, 50, 0.15);
-moz-box-shadow: 0px -5px 5px 0px rgba(50, 50, 50, 0.15);
box-shadow: 0px -5px 5px 0px rgba(50, 50, 50, 0.15);}
#about .single_item:nth-of-type(1) {margin-left:0;}
#about .single_item .icon {float:left; margin-right:20px; width:50px; height:125px; border-radius:25px; text-align:center; line-height:50px; color:white; font-size:34px; font-weight:900; background-color:#3aaeaa;}
#about .single_item ul {clear:both; font-size:15px; list-style-image:url('pics/ul.png'); margin-top:20px; padding-left:20px;}
#about .single_item ul li {line-height:24px; margin-bottom:10px;}
#about .single_item ul li span {font-weight:900;}
/* 4. Approach */
#tec-diff {float:left; text-align:center; color:white; margin-top:20px; clear:both; width:100%; height:540px; background-color:#242424; background-image:url('pics/polygon.png'); background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover;}
#tec-diff h2 {font-size:36px; font-weight:900; color:#ffae00; margin-top:-30px; letter-spacing:5px;}
#tec-diff h3 {font-size:18px; font-weight:700;}
#tec-diff h4 {font-size:18px; font-weight:400; margin-top:0; text-align:left; margin-left:400px}
#tec-diff .wrapper {width:1200px; margin:0 auto;}
#tec-diff #right {text-align:left; float:right; width:440px;}
#tec-diff #right .icon {clear:both; float:left; margin-right:20px; margin-top:15px; width:40px; height:40px; border-radius:20px; text-align:center; line-height:40px; color:white; font-size:15px; font-weight:900; background-color:#3aaeaa;}
#tec-diff #right .icon + p {padding-top:20px;}
#tec-diff #right .icon:nth-of-type(2) {background-color:#ffae00;}
#tec-diff #right .icon:nth-of-type(3) {background-color:#a0a0a0;}
#tec-diff #left {float:left; text-align:left; width:540px;}
#tec-diff #left #top h5 {text-align:center; margin:0; padding:0; font-size:48px; margin-top:10px;}
#tec-diff #left #top .box {width:240px; font-size:16px; height:70px; border-radius:7px; text-align:center; background-color:#3aaeaa; margin:0 auto; margin-top:15px;}
#tec-diff #left #top .box img {margin-top:13px;}
#tec-diff #left #top .box:nth-of-type(2) {clear:both; float:left; background-color:#a0a0a0;}
#tec-diff #left #top .box:nth-of-type(2) img {margin-bottom:7px;}
#tec-diff #left #top .box:nth-of-type(3) {float:right; background-color:#ffae00;}
/* 5. Benefits */
#benefits {clear:both; width:800px; margin:0 auto; text-align:center;}
#benefits h2 {font-size:36px; font-weight:900; padding-top:40px; margin-bottom:50px; letter-spacing:5px;}
#benefits .wrap {width:310px; float:left;}
#benefits .wrap:nth-of-type(2) {float:right;}
#benefits .single_benefit {float:left; width:310px; padding-right:10px; text-align:left; clear:both; margin-bottom:40px;
transition:background-color 0.5s;
-webkit-transition:background-color 0.5s;
-moz-transition:background-color 0.5s;
-o-transition:background-color 0.5s;}
#benefits .single_benefit h4 {padding-top:5px; font-size:14px;}
#benefits .single_benefit .icon {margin-right:20px; position:relative; float:left; width:80px; height:80px; border-radius:7px; border:1px solid #3aaeaa;
transition:background-color 0.5s;
-webkit-transition:background-color 0.5s;
-moz-transition:background-color 0.5s;
-o-transition:background-color 0.5s;}
#benefits .single_benefit .icon img {position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;}
#benefits .single_benefit:hover {background-color:#e7e7e7;}
#benefits .single_benefit:hover .icon {background-color:#3aaeaa;}
/* 6. How We Work */
#how-we-work {float:left; width:100%; margin-top:100px; background-image:url('pics/header.jpg'); overflow:auto; padding-bottom:40px; color:#242424;}
#how-we-work .wrapper {width:400px; margin:0 auto; text-align:center;}
#how-we-work h2 {font-size:36px; font-weight:900; padding-top:40px; margin-bottom:50px; color:#fff; letter-spacing:3px;}
#how-we-work ul {margin:0; padding:0; margin-left:60px; list-style-type:decimal; text-align:left; font-size:18px; font-weight:700;}
#how-we-work img {float:right; height:320px;
-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.35);
-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.35);
box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.35);}
#how-we-work ul li {margin-top:20px;}
#how-we-work ul li {color:#fff;}
/* 7. Case Study */
#case-study {overflow:auto; color:white; clear:both; width:100%; background-color:#242424; background-image:url('pics/study.jpg'); background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover;}
#case-study h2 {font-size:36px; text-align:center; font-weight:900; margin-top:-30px; letter-spacing:5px;}
#case-study h3 {font-size:18px; font-weight:700; color:#242424; padding-left:60px; padding-top:80px;}
#case-study .pc {margin:0 auto; position:relative; margin-top:60px; width:691px; height:350px; background-image:url('pics/pc.png'); color:#242424;}
#case-study a {color:#ffae00; font-weight:900;}
#case-study a:hover {text-decoration:underline;}
#case-study .pc p {padding-left:60px; width:320px;}
#case-study .pc img {position:absolute; right:60px; top:40px;}
/* 8. Footer */
#footer {width:100%; height:auto; overflow:hidden; padding-top:30px; padding-bottom:30px; background-color:#191919; color:white;}
#footer .wrapper {width:1200px; margin:0 auto;}
#footer h3 {font-size:18px; margin-top:0; padding-top:0;}
#footer .left {float:left; width:320px;}
#footer .mid {float:left; width:320px; margin-left:120px;}
#footer .mid .news {font-size:11px;}
#footer .mid .news img {float:left; margin-right:15px;}
#footer .right {float:right; width:320px;}
#footer .right img {margin-right:15px;}
/* 9. Copyright */
#copyright {width:100%; padding-top:15px; padding-bottom:15px;}
#copyright span {margin-left:120px;}
#copyright .media {float:right; margin-right:120px;}
#copyright .media a img {margin-left:20px;}
#copyright .media a:hover img {opacity:0.5; filter:alpha(opacity=50);}