/* Fonts */

@font-face {
    font-family: 'RobotoThin';
    src: url('../fonts/roboto-thin-webfont.eot');
    src: url('../fonts/roboto-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-thin-webfont.woff') format('woff'),
         url('../fonts/roboto-thin-webfont.ttf') format('truetype'),
         url('../fonts/roboto-thin-webfont.svg#robotothin') format('svg');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'RobotoBold';
    src: url('../fonts/roboto-bold-webfont.eot');
    src: url('../fonts/roboto-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-bold-webfont.woff') format('woff'),
         url('../fonts/roboto-bold-webfont.ttf') format('truetype'),
         url('../fonts/roboto-bold-webfont.svg#robotobold') format('svg');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-light-webfont.eot');
    src: url('../fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-light-webfont.woff') format('woff'),
         url('../fonts/roboto-light-webfont.ttf') format('truetype'),
         url('../fonts/roboto-light-webfont.svg#robotolight') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-regular-webfont.eot');
    src: url('../fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-regular-webfont.woff') format('woff'),
         url('../fonts/roboto-regular-webfont.ttf') format('truetype'),
         url('../fonts/roboto-regular-webfont.svg#robotoregular') format('svg');
    font-weight: 400;
    font-style: normal;
}

/* Global reset */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:''}
strong { font-weight:bold }
em { font-style:italic }
a img { border:none }

/* LAYOUT */
/* ----------------------------------------- */

  .container                                  { position: relative; width:100%; max-width: 960px; margin: 0 auto; padding: 0; }
  .container .column,
  .container .columns                         { float: left; display: inline; margin-left: 1.041666666666667%; margin-right: 1.041666666666667%; }
  .row                                        { margin-bottom: 4.166666666666667%; }

  /* Nested Column Classes */
  .column.alpha, .columns.alpha               { margin-left: 0; }
  .column.omega, .columns.omega               { margin-right: 0; }

    /* Base Grid */
    .container .one.column,
    .container .one.columns                     { width: 4.166666666666667%; }
    .container .two.columns                     { width: 10.41666666666667%; }
    .container .three.columns                   { width: 16.66666666666667%; }
    .container .four.columns                    { width: 22.91666666666667%; }
    .container .five.columns                    { width: 29.16666666666667%; }
    .container .six.columns                     { width: 35.41666666666667%; }
    .container .seven.columns                   { width: 41.66666666666667%; }
    .container .eight.columns                   { width: 47.91666666666667%; }
    .container .nine.columns                    { width: 54.16666666666667%; }
    .container .ten.columns                     { width: 60.41666666666667%; }
    .container .eleven.columns                  { width: 66.66666666666667%; }
    .container .twelve.columns                  { width: 72.91666666666667%; }
    .container .thirteen.columns                { width: 79.16666666666667%; }
    .container .fourteen.columns                { width: 85.41666666666667%; }
    .container .fifteen.columns                 { width: 91.66666666666667%; }
    .container .sixteen.columns                 { width: 97.9%; }

    .container .one-third.column                { width: 31.25%; }
    .container .two-thirds.column               { width: 64.58333333333333%; }

.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
.clear { clear: both; display: block;  overflow: hidden;  visibility: hidden;  width: 0; height: 0;}

/* STYLES */
/* ----------------------------------------- */

h1, h2, h3, h4, h5, h6, ul, ol, li, form, p, filedset, img{ margin:0; padding:0;  border:0;  font-weight:normal;}form, fieldset{ margin:0;  padding:0;  border:none;}
:focus{ outline:none;}
img{border:0;}
html{-webkit-text-size-adjust: none;-webkit-appearance: none; background:#fff }
html{margin:0; padding:0;height: 100%;}
body{font-family: 'Roboto', sans-serif;color:#5B595A;font-size:12px; background:#333333 ;}
a{outline:none;text-decoration:none;color:#5B595A;-webkit-transition:all 200ms ease-in;-o-transition:all 200ms ease-in;transition:all 200ms ease-in;}
a:hover{ text-decoration:underline; color:#5B595A}
a:visited{color:#5B595A}
strong {font-family: 'RobotoBold';}

/** HEADER **/

header {width:100%; height:70px;padding:40px 0 60px; background:#fff}
header nav.main {float:right;}
header nav.main ul {float:right; margin:30px 0 0 0}
header nav.main ul li {float:left}
header nav a, header nav a:visited {color:#333333;font-size:17px; margin: 0 1px;  padding: 5px 12px;}
header nav a:hover, header nav ul li a.active {text-decoration:none; color:#fff; background:#5aa7f2}

/* Responsive Nav */

nav.mobi {display:none; float:left; width:100%}
#mobi-menu { background: url("../images/mob-nav-bg.gif") no-repeat scroll right 8px; border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; color:#666666; cursor: pointer; margin:20px 1%; font-size: 18px; font-weight: 400; height: auto;padding: 4px 0 7px;visibility: visible; width: 98%;}
#mobi-menu ul{display: none;margin: 15px 0 0;}
#mobi-menu ul li {display:block; float:none; margin: 0 0 8px 14px;}

/* HOME CONTENT */

.banner-home {  background: url("../images/home-banner.jpg") no-repeat center top; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width:100%;padding:100px 0 0 0; height:337px; position:relative; z-index:1}
.banner-home .inner{ background: none repeat scroll 0 0 #FFFFFF; padding: 20px 3% 20px 3.3%; width: 43%;}
.banner-home .inner h1 {font-size:38px; font-family: 'RobotoThin', sans-serif; color:#000;}

article.container {background:#434242; padding-top:40px; margin-top:-35px; position:relative; z-index:10}
.home-left {width: 50%; float:left;}
.home-right {width: 50%; float:right;}

.home-left .inner{padding: 0 6% 0 7%;border-right:1px solid #393838}
.home-left h2 {font-size:34px; font-family: 'RobotoBold', sans-serif; color:#fff; margin:0 0 10px 0}
.home-left h3 {font-size:30px; font-family: 'RobotoThin', sans-serif; color:#fff}
.home-left h3 strong {color:#5aa9f2}

.home-right .inner {padding: 0 6%;border-left:1px solid #5e5d5d; margin-bottom: 40px;}
.home-right p {font-size:21px; color:#fff; margin:0 0 15px 0; font-family: 'RobotoThin', sans-serif;line-height: 30px;}
.home-right a {font-size:21px;color:#5aa9f2; font-family: 'RobotoBold', sans-serif; text-decoration:underline}

.box {width: 19%; float:left; padding:105px 3% 50px; position:relative; -webkit-transition:all 400ms ease-in;-o-transition:all 400ms ease-in; transition:all 400ms ease-in; -moz-transition:all 400ms ease-in; }
.box h4 {text-align:center; color:#fff; font-family: 'RobotoBold', sans-serif; font-size:20px; margin:0 0 10px 0}
.box p {text-align:center; color:#fff; font-weight:300; font-size:18px; height:70px;}
.box p u {text-decoration:none}
.box a {height: 100%;  left: 0; position: absolute; top: 0;width: 100%; z-index: 10;}

.box:hover { background-position: 100% 100%; -webkit-transition:all 400ms ease-in;-o-transition:all 400ms ease-in; transition:all 400ms ease-in; -moz-transition:all 400ms ease-in; }

.skills-home { background: url("../images/home-skills.png") no-repeat center 24px #4f9eeb;}
.contact-home {background:url("../images/home-contact.png") no-repeat center 24px #5fc5ee;}
.about-home {background:url("../images/home-about.png") no-repeat center 24px #2a70b4;}
.work-home {background:url("../images/home-work.png") no-repeat center 24px #8cd3f0;}

.skills-home:hover { background: url("../images/home-skills-hover.png") no-repeat center 16px #1a4c80;}
.contact-home:hover {background:url("../images/home-contact-hover.png") no-repeat center 16px #1a4c80;}
.about-home:hover {background:url("../images/home-about-hover.png") no-repeat center 16px #1a4c80;}
.work-home:hover {background:url("../images/home-work-hover.png") no-repeat center 16px #1a4c80;}

/* SKILLS CONTENT */

.banner-skills {  background: url("../images/skills-banner.jpg") no-repeat center top; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width:100%;padding:100px 0 0 0; height:215px; position:relative; z-index:1}
.banner-skills .inner{ background: none repeat scroll 0 0 #FFFFFF; padding: 15px 3% 20px 3.3%; float:left}
.banner-skills .inner h1 {font-size:38px; font-family: 'RobotoThin', sans-serif; color:#000;}

.skills-content {padding-bottom:40px}
.skills-main .inner{padding: 0 3.5%;}
.skills-main h2 {font-size:20px; font-family: 'RobotoThin', sans-serif; color:#fff;line-height: 30px;}
.skills-content h3 {padding: 4px 3.5% 10px; font-size:28px;font-family: 'RobotoThin', sans-serif; background:#5aa9f2; color:#fff; float:left; margin:35px 0}

.skillset .inner{padding:0 3.5%;}
li.skill-box {min-height: 260px; padding: 35px 3% 10px; width: 27.15%;margin:0 1px 1px 0; background:#fff; float:left}
li.skill-box img {display:block; margin:0 auto}
li.skill-box h4 {font-family: 'RobotoBold', sans-serif; font-size:18px; text-align:center; color:#5aa9f2;margin:10px 0}
li.skill-box p {font-size:14px;font-family: 'RobotoBold'; color:#333; text-align:center}

/* APPROACH

.banner-app {  background: url("../images/home-banner.jpg") no-repeat center top; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width:100%;padding:100px 0 0 0; height:215px; position:relative; z-index:1}
.banner-app .inner{ background: none repeat scroll 0 0 #FFFFFF; padding: 15px 3% 20px 3.3%; float:left}
.banner-app .inner h1 {font-size:38px; font-family: 'RobotoThin', sans-serif; color:#000;}

.app-content {padding-bottom:40px}

.app .inner{padding:0 3.5%;}
.app h2 {font-size:32px; font-weight:300; color:#fff; text-align:center}
.app h3 {font-size:22px; font-weight:300; color:#fff; text-align:center}
.app h3 strong {color:#5aa9f2;}

.app li {padding:0 0 70px 0; background: url("../images/app-line.jpg") no-repeat center bottom;}
.app li:last-child {background:none; padding:0}
.app li h4 {font-size:28px; text-align:center; font-family: 'RobotoThin', sans-serif; color:#fff}
.app li p {font-size:18px; font-weight:300; text-align:center; color:#fff;line-height: 22px;}

.app li.start h4 {background: url("../images/app-start.jpg") no-repeat center center;padding: 30px 0;margin:40px 0 20px 0}
.app li.during h4 {background: url("../images/app-during.jpg") no-repeat center center;padding: 30px 0;margin:15px 0 20px 0}
.app li.delivery h4 {background: url("../images/app-delivery.jpg") no-repeat center center;padding: 45px 0;margin:15px 0 20px 0}
.app li.pricing h4 {background: url("../images/app-pricing.jpg") no-repeat center center;padding: 30px 0;margin:15px 0 20px 0}
.app li.culture h4 {background: url("../images/app-culture.jpg") no-repeat center center;padding: 30px 0;margin:15px 0 20px 0}

*/

/* ABOUT */

.banner-about {  background: url("../images/about-banner.jpg") no-repeat center top; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width:100%;padding:100px 0 0 0; height:215px; position:relative; z-index:1}
.banner-about .inner{ background: none repeat scroll 0 0 #FFFFFF; padding: 15px 3% 20px 3.3%; float:left}
.banner-about .inner h1 {font-size:38px; font-family: 'RobotoThin', sans-serif; color:#000;}

.about-content {padding-bottom:20px}
.about .inner{padding:0 3.5%;}
.about h2 {font-family: 'RobotoThin', sans-serif; font-size:20px; color:#fff; }
.about h2 strong span {color:#5aa9f2;}

.about-content h3 { background: none repeat scroll 0 0 #5AA9F2; color: #FFFFFF; float: left;font-size: 28px;font-family: 'RobotoThin', sans-serif;margin: 35px 0; padding: 4px 3.5% 10px;}

.portfolio-wrap {border-bottom:1px solid #5e5d5d; margin:0 3.5% 20px;padding:0 0 10px 0}

.left-image .image-wrap {float:left; width:34%}
.left-image  .portfolio-text {float:right; width:64%; padding:0 0 0 2%}

.image-wrap img {max-width:100%; height:auto;margin: 8px 0 0;}
.portfolio-text h4 {font-family: 'RobotoBold', sans-serif; font-size:20px; color:#fff; color:#5aa9f2; margin:0 0 10px 0}
.portfolio-text p {font-size:16px; font-weight:300; color:#fff;line-height: 20px;margin:0 0 10px 0}

.right-image .image-wrap {float:right; width:34%}
.right-image .image-wrap img {float:right}
.right-image .portfolio-text {float:left; width:64%; padding:0 2% 0 0}


/* WORK OVERVIEW */

.banner-work {  background: url("../images/home-banner.jpg") no-repeat center top; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width:100%;padding:100px 0 0 0; height:215px; position:relative; z-index:1}
.banner-work .inner{ background: none repeat scroll 0 0 #FFFFFF; padding: 15px 3% 20px 3.3%; float:left}
.banner-work .inner h1 {font-size:38px; font-family: 'RobotoThin', sans-serif; color:#000;}

.work-content {padding-bottom:40px}
.work-content .inner{padding:0 3.5%;}
.work h2 {font-family: 'RobotoThin', sans-serif; font-size:20px; color:#fff; }
.work h2 strong span {color:#5aa9f2;}

.work-content h3 { background:#5AA9F2; color: #FFFFFF; float: left;font-size: 28px;font-family: 'RobotoThin', sans-serif;margin: 35px 0; padding: 4px 3.5% 10px;}

.gallery {margin:0 0 35px 0}
.gallery ul li {background:#fff;}
.gallery ul li .slide-image {float:left; width:38%; height: 350px;}
.gallery ul li .slide-image img {max-width:100%; height:auto; display:block; margin:70px auto; vertical-align: middle;}
.gallery ul li .slide-text {float:right; width:61%; position:relative; padding:0 0 40px 0}

.gallery ul li .slide-text h3 { background: none; color: #000; float:none;font-size: 20px;font-family: 'RobotoBold', sans-serif;margin: 30px 0; padding:0 0 0 7%;}
.gallery ul li .slide-text p { color: #000; font-size: 16px;font-family: 'RobotoBold', sans-serif;padding:0 0 0 7%;}
.gallery ul li .slide-text ul li { color: #000; font-size: 14px;font-weight: 300;padding:5px 0 0 7%;}
.gallery ul li .slide-text a {background:#5AA9F2;color:#fff; position:absolute; right:50px; bottom:40px; font-size:13px; font-weight:400; padding:5px 10px}

.bx-wrapper {display:block; margin: 0 auto; position:relative; }

a.bx-prev {position:absolute;  top: 170px; font-size:17px; color:#fff; font-weight:300; padding:5px 25px 5px 35px;  left: -80px; background: url("../images/prev.png") no-repeat 10px center #509FE8;   }
a.bx-next {position:absolute;  top: 170px; font-size:17px; color:#fff; font-weight:300; padding:5px 35px 5px 25px;  right: -80px; background: url("../images/next.png") no-repeat 75px center #509FE8;   }

.work-content h4 {font-family: 'RobotoThin', sans-serif; font-size:20px; color:#fff; margin:0 0 10px 0}
.lower-w-content ul li {list-style:disc; color:#5aa9f2; padding:15px 0 0 0 ; float:left; width:45%; margin:0 0 0 20px}
.lower-w-content ul li p {color:#fff; font-size:16px; font-weight:300 }


/* WORK SUB */

.banner-sub-work {  background: url("../images/work-banner.jpg") no-repeat center top; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width:100%;padding:100px 0 0 0; height:215px; position:relative; z-index:1}
.banner-sub-work .inner{ background: none repeat scroll 0 0 #FFFFFF; padding: 15px 3% 20px 3.3%; float:left}
.banner-sub-work .inner h1 {font-size:38px;  color:#000;}

.work-sub-content {padding-bottom:20px}
.work-sub-content .inner{padding:0 3.5%;}

.work-sub-content a { color: rgb(90, 169, 242); text-decoration: underline; }
.work-sub-content a.nav-link { background:#5AA9F2; color: #FFFFFF; float: left;font-size: 19px;font-family: 'RobotoThin', sans-serif;margin: 0 0 35px 0; padding: 4px 3.5% 5px; text-decoration: none;}
.work-sub-content h2 {font-family: 'RobotoBold', sans-serif; font-size:30px; color:#fff; margin:0 0 35px 0}
.image-sub {width:43%; float:left}
.image-sub img {max-width:100%; height:auto; }

.text-sub {float:right; width:54%;}
.text-sub h3 {font-family: 'RobotoBold', sans-serif; font-size:16px; color:#5AA9F2; margin:0 0 3px 0}
.text-sub p {font-size:18px; font-weight:300; color:#fff;line-height: 22px; margin:0 0 20px 0}

/* CONTACT */

.banner-contact {  background: url("../images/blog.jpg") no-repeat center top; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width:100%;padding:100px 0 0 0; height:215px; position:relative; z-index:1}
.banner-contact .inner{ background: none repeat scroll 0 0 #FFFFFF; padding: 15px 3% 20px 3.3%; float:left}
.banner-contact .inner h1 {font-size:38px; font-family: 'RobotoThin', sans-serif; color:#000;}

.contact-content {padding-bottom:40px}
.contact-content .inner{padding:0 3.5%;}
.contact-content h2 {font-family: 'RobotoThin', sans-serif; font-size:20px; color:#fff; margin:0 0 30px 0}
.contact-content p {font-size:18px; font-weight:300; color:#fff;line-height: 22px; margin:0 0 20px 0}
.contact-content ul li {font-size:18px; font-weight:400; color:#fff;line-height: 22px; margin:0 0 20px 0}
.contact-content a {color:#5AA9F2;}

.contact-info {float:left}
.contact-form {float:right; width:50%}
.contact-form table {width: 100%;}
.contact-form input, .contact-form textarea {font-family: 'Roboto', sans-serif;font-size:18px; color:#666666; padding:5px; width:95%; margin:0 0 10px 0}
.contact-form input.submit-button {width:175px; border:0; background:#5AA9F2;font-weight:400;  color:#fff; font-size:16px; text-align:center; padding:5px 0}
.contact-form input.watermark, .contact-form textarea.watermark {color:#bbbbbb}

.contact-form input.error, .contact-form textarea.error {border:2px solid red;}

/* BLOG */

.banner-blog {  background: url("../images/blog.jpg") no-repeat center top; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width:100%;padding:100px 0 0 0; height:215px; position:relative; z-index:1}
.banner-blog .inner{ background: none repeat scroll 0 0 #FFFFFF; padding: 15px 3% 20px 3.3%; float:left}
.banner-blog .inner h1 {font-size:38px; font-family: 'RobotoThin', sans-serif; color:#000;}

article.container.blog-content {min-height:350px;}
.blog-content {padding-bottom:20px}
.blog-content .inner{padding:0 3.5%;}

.pager {margin: 15px 0 0;}
.pager p {margin: 5px 0 0; color:#fff; font-size:15px; text-align:center;}
.pager a.prev {float:left; font-size:17px; color:#fff; font-weight:300; padding:5px 25px 5px 35px; background: url("../images/prev.png") no-repeat 10px center #509FE8;   }
.pager a.next {float:right; font-size:17px; color:#fff; font-weight:300; padding:5px 35px 5px 25px; background: url("../images/next.png") no-repeat 75px center #509FE8;   }

.pager a.disabled {background-color: rgb(90, 90, 90); color: rgb(110, 110, 110); text-decoration:none;}
.pager a.disabled.prev {background-image: url("../images/prev-disabled.png")}
.pager a.disabled.next {background-image: url("../images/next-disabled.png")}

.inner { position: relative; }

.archives {position: absolute; top: 0; left: 0; width:170px; padding:15px 2%; background:#383737; margin:0 2%;}

.archives p {font-weight:400; font-size:16px; font-weight:400; color:#fff; margin:0 0 10px 0}
.archives ul li {display:block}
.archives a {font-size:18px; color:#5AA9F2; font-weight:300; text-decoration:underline}

.posts {margin-left:210px; padding-left:1%;}

.post-wrap {border-bottom: 1px solid #5E5D5D; margin: 0 0 20px; padding: 0 0 20px;}

.post-wrap .byline a, .post-wrap h2 a {color:#fff;}
.post-wrap .byline a:hover, .post-wrap h2 a:hover {color:#5AA9F2; text-decoration:none;}
.post-wrap p.byline {margin-bottom: 20px; font-size:16px;}

.post-wrap h1 {font-family: 'RobotoBold',sans-serif; font-size: 18px; color: rgb(90, 169, 242); margin: 15px 0px 15px;} 

.post-wrap summary p {font-size:16px; display:inline;}

.post-wrap li {padding-left:10px;}
.post-wrap ul, .post-wrap ol, .post-wrap li {list-style: square outside none; color:#fff; margin-left:10px;}
.post-wrap a {color:#5AA9F2;}
.post-wrap p {font-size:18px; font-weight:300; color:#fff;line-height: 22px; margin:0 0 10px;}
.post-wrap p.date {font-style: italic; font-family: 'RobotoThin', sans-serif;}
.post-wrap h2 {color:#5AA9F2;font-family: 'RobotoBold', sans-serif; font-size:22px; margin: 0 0 5px;}

.post-wrap .align-left {float:left; margin-right:20px}
.post-wrap .align-right {float:left; margin-left:20px}
.post-wrap .centre {display:block; margin-left:auto; margin-right:auto}

.post-wrap img {max-width:100%; height:auto; margin-top:10px; margin-bottom:20px;}

/** FOOTER **/

footer {background:#fff; width:100%; position: relative; z-index:1; margin-top:-35px; padding:60px 0 15px 0}
footer p {color:#999999;margin:0 0 20px 0; font-size:13px; line-height:22px}
footer img {max-width:100%; height:auto}
footer .links ul li {display:block; margin:0 0 3px 0}
footer .links ul li a, footer .links ul li a:visited {color:#999999; font-size:13px;}
footer .links ul li a:hover {color:#999999; font-size:13px; text-decoration:underline;}

footer .socials ul li {height: 42px;  width: 42px; background:#999999; float:left; margin:0 10px 10px 0;-webkit-transition:all 200ms ease-in;-o-transition:all 200ms ease-in;transition:all 200ms ease-in;-webkit-border-radius: 22px; -moz-border-radius: 22px;border-radius: 22px; }
footer .socials ul li:hover {background:#5AA9F2}
footer .socials ul li a.twitter {background:url("../images/twitter.png") no-repeat center center; width:42px; height:42px; display:block}
footer .socials ul li a.facebook {background:url("../images/facebook.png") no-repeat center center; width:42px; height:42px; display:block}
footer .socials ul li a.linkedin {background:url("../images/linkedin.png") no-repeat center center; width:42px; height:42px; display:block}

/** ERROR ***/

.banner-error {  background: url("../images/train-wreck.jpg") no-repeat center top; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width:100%;padding:100px 0 0 0; height:215px; position:relative; z-index:1}
.banner-error .inner{ background: none repeat scroll 0 0 #FFFFFF; padding: 15px 3% 20px 3.3%; float:left}
.banner-error .inner h1 {font-size:38px; font-family: 'RobotoThin', sans-serif; color:#000;}

.error-content {padding-bottom:20px}
.error-content .inner{padding:0 3.5% 20px;}
.error-content h2 {text-align:left; font-family: 'Roboto', sans-serif; font-size:1600%; color:#fff;}
.error-content p {color:#fff; font-weight:300; font-size:16px;}


/* RESPONSIVE */
/* ----------------------------------------- */

    @media only screen and (max-width: 768px) {
       	
       /* Home */
       
       .banner-home .inner {width: 75%;}	
       .box {width: 44%;}
       
       /* Approach */
       
       .app p {padding: 0 3.5%}
       
       /* Skills */
       
       li.skill-box {width: 43.65%;}
       .banner-skills .inner h1 {font-size: 28px;}
       
       /* Work */
       
       a.bx-next {top: 0;right: 0;}
       a.bx-prev {top: 0;left: 0;}
    
    }

	@media only screen and (max-width: 700px) {
	
		/* Header */
	
		header {min-height: 70px; height:auto; padding: 40px 0 10px;}
		header img {display:block; margin:0 auto}
		header .container .four.columns {width:100%; margin-left:0; margin-right:0}
		nav.main {display:none !important}
		nav.mobi {display:block;}
	
	}
	
	@media only screen and (max-width: 600px) {
		
		/* Home */
		
		.banner-home .inner h1 {font-size: 31px;}
		.home-left {width: 100%;}
		.home-right {width: 100%;}
		.home-right .inner, .home-left .inner {border: 0;margin: 0 6%;padding: 0;}
		.home-right .inner {padding:20px 0 40px ;border-top: 1px solid #5E5D5D;}
		.home-left .inner {padding:0 0 20px 0; border-bottom: 1px solid #393838;}
		
		/* About */
		
		.left-image .image-wrap {width: 100%;margin:0 0 10px 0}
		.left-image .image-wrap img {display:block; margin:0 auto}
		.left-image .portfolio-text {width: 100%;}
		.right-image .image-wrap {width: 100%;margin:0 0 10px 0}
		.right-image .image-wrap img {display:block; margin:0 auto; float:none}
		.right-image .portfolio-text {width: 100%;}
		
		/* Work */
		
		.lower-w-content ul li {width: 78%;}
		.gallery ul li .slide-text a { bottom: 0;right: 0;}
		
		/* Work Sub */
		
		.image-sub {width: 100%; margin:0 0 25px 0}
		.image-sub img {display:block; margin:0 auto}
		.text-sub {width:100%;}

		/* Blog */
		
		.banner-blog .inner h1 {font-size: 22px;}
		.archives {width:95%; margin:0 0 10px; position:relative;}
		.posts {margin-left:0; padding:0;}


	}
	
	@media only screen and (max-width: 460px) {
		
		/* Home */
		
		.box {width: 94%;}
		.box p u {text-decoration:underline;}
		
		/* Footer */
		
		footer .container .four.columns {width: 97.9%;margin:0 0 20px}
		footer p {text-align: center;}
		footer .links ul li a, footer .links ul li a:visited {display:block; text-align: center;}
		footer img {display:block; margin:0 auto}
		footer .socials ul li {margin: 0 45% 15px;}
		
		/* Skills */
		.banner-skills .inner h1 {font-size: 22px;}
		li.skill-box {width: 93.65%;padding: 35px 3%; min-height:100px}
		
		/* Approach */
		
		.banner-app .inner h1 {font-size: 22px;} 
		
		/* About */
		
		.banner-about .inner h1 {font-size: 22px;} 
		
		/* Work */
		
		.banner-work .inner h1 {font-size: 22px;}
		.gallery ul li .slide-image {width: 100%;}
		.gallery ul li .slide-text {border-top: 1px solid #000000;padding: 20px 0 40px;width: 100%; border-left:0}
		
		/* Work Sub */
		
		.banner-sub-work .inner h1 {font-size: 22px;}
		
		/* Contact */
		
		.banner-contact .inner h1 {font-size: 22px;}
		.contact-info, .contact-form {width:100%}
		.contact-form input, .contact-form textarea { width: 92%;}
		
		
	}