/* Reset */
a,abbr,acronym,address,applet,big,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,iframe,img,ins,kbd,label,legend,li,object,ol,p,pre,q,s,samp,small,span,strike,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,ul,var{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}:focus{outline:0}body{line-height:1;color:#000;background:#fff}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0}caption,td,th{text-align:left;font-weight:400}blockquote:after,blockquote:before,q:after,q:before{content:""}blockquote,q{quotes:"" ""}

/* Default */
body {font-family: 'Roboto', sans-serif; font-size: 14px; line-height: 150%; font-weight: 300; letter-spacing: 0.2px; background: #fff; color: #506168;}
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
textarea, input, button {font-family: inherit; font-size: inherit; color: inherit;}
a {text-decoration: none;}
a:hover {text-decoration: underline;}
h1 {font-size: 46px;}
h2 {font-size: 36px;}
h3 {font-size: 18px;}
h4 {font-size: 24px;}
.left {float: left;} .right {float: right;}
.button {height: 30px; line-height: 30px; vertical-align: middle; display: inline-block; padding: 0 20px; font-size: 12px; font-weight: bold; color: #fff; background: #c9ced7; border-radius: 3px; border: none; cursor: pointer;}
.button:hover {text-decoration: none; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);}
.button-green {background: #8fa900;}
.button-blue {background: #122f9c;}
.button-blue-hollow {background: none; border: 2px solid #122f9c; color: #122f9c; line-height: 27px;}
.button-grey-hollow {background: none; border: 2px solid #a0aeb3; color: #a0aeb3; line-height: 27px;}
input {height: 30px; line-height: 30px;}

/* Layout */
.box {width: 100%; float: left; padding: 60px 0; border-bottom: 1px solid #e5e5e5;}
.inner {width: 940px; margin: 0px auto;}
.box h2 {font-size: 36px; font-weight: 300; color: #101b1f; text-align: center; text-transform: uppercase; position: relative; margin-bottom: 80px;}
.box h2:after {content: ""; position: absolute; width: 60px; height: 2px; background: #122f9c; left: 50%; bottom: -20px; margin-left: -30px;}

/* Header */
#header {width: 100%; float: left; height: 100px; line-height: 100px; vertical-align: middle; border-top: 5px solid #122f9c; border-bottom: 1px solid #e5e5e5; background: #fff;}
#header .logo {float: left;}
#header .logo img {vertical-align: middle;}
#header .menu {float: right;}
#header .menu li {float: left; margin-right: 20px; text-transform: uppercase;}
#header .menu li a {font-size: 13px; font-weight: bold; color: #6c7d94;}
#header .menu li a:hover, #header .menu li.current a {color: #101b1f; text-decoration: none;}
#header .button {float: right; margin: 35px 0;}

/* Splash */
#splash {width: 100%; height: 500px; float: left; background: url(images/splash.jpg) no-repeat; background-size: cover;}
#splash h1 {width: 100%; margin-top: 240px; text-align: center; font-size: 46px; color: #cadce2; font-family: serif; text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);}
#splash h1 span {color: #98aeff;}

/* Services */
#services {border-bottom: 1px solid #b0b4bc;}
#services .services-box {display: table;}
#services .services-box .item {display: table-cell;}
#services .services-box .item {text-align: center; padding: 0 10px; width:33%}
#services .services-box .item .icon {width: 135px; height: 135px; display: inline-block; line-height: 135px; vertical-align: middle; text-align: center; background: #122f9c; border-radius: 50%;}
#services .services-box .item .icon img {vertical-align: middle;}
#services .services-box .item h3 {font-size: 18px; line-height: 80px; color: #1c2f36; font-weight: 400;}
#services .services-box .item p {font-size: 14px; color: #a0aeb3; font-weight: 300;}

/* Featured project */
#featured-project {position: relative;} 
#featured-project {background: #c9ced7; border-bottom: 1px solid #b0b4bc;}
#featured-project .description {width: 50%; float: left;}
#featured-project .description h4 {background: #122f9c; color: #fff; display: inline; padding: 0 5px;}
#featured-project .description p {color: #506168; margin: 20px 0; padding-right: 20px;}
#featured-project .description .thumbnails li {float: left; width: 140px; height: 80px; overflow: hidden; margin: 0 20px 20px 0; cursor: pointer; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);}
#featured-project .description .thumbnails li img {width: 140px;}

#featured-project .preview {bottom: 0;}
#featured-project .preview {width: 50%; height: 471px; border: 1px solid #fcfcfc; border-bottom: none; background: #ececec; border-radius: 6px 0 0 0; position: absolute; left: 50%; box-shadow: 0px -1px 3px rgba(0, 0, 0, 0.1);}
#featured-project .preview .toolbar {height: 49px; line-height: 49px; background: url(images/bg-toolbar.png) repeat-x; border-bottom: 1px solid #f2f2f2; border-radius: 6px 0 0 0;}
#featured-project .preview .toolbar img {vertical-align: middle; margin-left: 16px;}
#featured-project .preview .screen {height: 422px; background: #9fa0a3; background-size: cover;}

/* All projects */
#all-projects {background: #fcfcfc;}
#all-projects .all-projects-list {}
#all-projects .all-projects-list li {width: 50%; min-height: 230px; margin-bottom: 20px; float: left; padding-right: 20px;}
#all-projects .all-projects-list li h4 {background: #122f9c; color: #fff; display: inline; padding: 0 5px;}
#all-projects .all-projects-list li p {color: #506168; margin-top: 20px;}

/* Clients */
#clients {}
#clients .client-logos {line-height: 90px; display: table; width: 100%;}
#clients .client-logos .item {display: table-cell; text-align: center;}
#clients .client-logos img {vertical-align: middle;}

#clients .client-lists {display: table; width: 100%; margin-top: 40px;}
#clients .client-lists .item {display: table-cell; text-align: center;}
#clients .client-lists .item ul li {line-height: 30px; color: #1c2f36;}

/* News */
#news {background: #fcfcfc;}
#news .news-list li {width: 50%; min-height: 230px; margin-bottom: 20px; float: left; padding-right: 20px;}
#news .news-list li h4 {color: #122f9c; display: inline; font-weight: 400;}
#news .news-list li p {color: #506168; margin: 20px 0;}

/* Contact */
#contact {}
#contact .contact-box {}
#contact .contact-box h4 {color: #122f9c; display: inline; font-weight: 400;}
#contact .contact-box .contact-table {display: table; width: 100%; margin: 30px 0; padding: 30px 0; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;}
#contact .contact-box .contact-table .row {display: table-row;}
#contact .contact-box .contact-table .item {display: table-cell;}

.title-table {display: table; width: 100%;}
.title-table .item {display: table-cell;}
.items-2 .item {width: 50%;}
.items-3 .item {width: 33.33%;}

/* Article */
#article {background: url(images/bg-shade.png) repeat-x; border-bottom: 0;}
#article h4 {color: #122f9c; font-weight: 400; margin-bottom: 10px;}
#article .post-date {font-size: 11px; color: #a0aeb3;}
#article p {color: #506168; margin: 20px 0;}

/* Login */
#login {border-bottom: 0;}
#login h4 {color: #122f9c; font-weight: 400; margin-bottom: 20px;}

/* Footer */
#footer a,
#footer {background: #101b1f; color: #6c7d94; border-bottom: none;}
#footer .copyright {float: left;}
#footer a.back-top {color: #fff; float: right; background: url(images/icon-top.png) no-repeat left center; padding-left: 15px;}