@import "../css/normalize.css";
@import "../fonts/ErasITC-Light/styles.css";
@import "../fonts/ErasITC-Demi/styles.css";
@import "http: //fonts.googleapis.com/css?family=Open+Sans:400, 300, 300italic, 400italic, 600, 600italic, 700, 700italic, 800, 800italic";
.divided-menu {
    padding-left: 20px;
    padding-right: 20px;
}
.divide-double {
    background-image: url(../images/divide.png), url(../images/divide.png);
    background-position: center bottom, center top;
    background-repeat: no-repeat;
}
.divide {
    background-image: url(../images/divide.png);
    background-repeat: no-repeat;
    background-position: center bottom;
}
.center-pad {
    margin: auto;
    padding-left: 20px;
    padding-right: 20px;
}
.row {
    width: 20%;
    float: left;
    margin-left: 2.5%;
    margin-right: 2.5%}
.row-of-2 {
    width: 42%;
    float: left;
    margin-left: 4%;
    margin-right: 4%}
.row-of-1 {
    width: 90%;
    float: left;
    margin-left: 5%;
    margin-right: 5%}
.button {
    background-color: #618f1f;
    padding: 10px 30px;
    margin: 30px auto 50px;
    border: none;
    font-size: 22px;
    color: #FFF;
    clear: both;
    display: inline-block;
    text-transform: uppercase;
}
.button:hover {
    background-color: #618f1f;
    text-decoration: none;
}
img {
    max-width: 100%;
    height: auto;
}
main {
    text-align: center;
}
.wrap {
    max-width: 1200px;
    margin: auto;
    padding-left: 20px;
    padding-right: 20px;
}
footer, header {
    background-color: #333;
    overflow: hidden;
    padding: 20px;
}
header {
    padding-top: 14px;
    padding-bottom: 14px;
}
div.narrow, section {
    max-width: 960px;
    margin: auto;
    padding-left: 20px;
    padding-right: 20px;
}
div.narrow ul {
    padding: 0;
}
div.full-width, section.full-width {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}
section.full-width p {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}
header[role=banner] a {
    display: block;
    color: #ccc;
    font-size: 37px;
    font-family: ErasITC-Light;
    background-repeat: no-repeat;
}
@media screen and (max-width:420px) {
    header[role=banner] a {
        font-size: 30px;
    }
}figcaption span, h2 span, header[role=banner] a span {
     font-family: ErasITC-Demi;
     color: #618f1f;
 }
header[role=banner] a:hover, header[role=banner] a:hover span {
    text-decoration: none;
}
header[role=banner] a:hover span {
    color: #b44800;
}
header[role=banner] h1 {
    margin: 0;
}
header[role=banner] h1 a {
    float: left;
    background-image: url(../images/logo.png);
    padding-left: 80px;
    background-position: center left;
    opacity: .8;
    filter: alpha(opacity=80);
    padding-top: 12px;
    padding-bottom: 12px;
}
header[role=banner] h1 a:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}
header[role=banner] a.usb {
    float: right;
    padding-right: 70px;
    background-image: url(../images/conect.png);
    background-position: center right;
    padding-top: 12px;
    padding-bottom: 12px;
    opacity: .8;
    filter: alpha(opacity=80);
}
@media only screen and (max-width:700px) {
    header[role=banner] a.usb {
        display: none;
    }
}header[role=banner] a.usb:hover {
     opacity: 1;
     filter: alpha(opacity=100);
 }
a, a:active, a:link, a:visited {
    color: #dd5800;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
    color: #3f5d14;
}
section[role=navigation] a {
    font-size: 37px;
    font-family: ErasITC-Light;
    color: #3f5d14;
}
p {
    font-family: 'Open Sans';
    color: grey;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 18px;
}
figcaption, h1, h2, h3, h4, h5, h6 {
    color: #3f5d14;
    font-weight: 400;
}
figcaption, h1, h2 {
    font-family: ErasITC-Light;
}
figcaption, h2 {
    font-size: 48px;
    padding-left: 20px;
    padding-right: 20px;
}
@media only screen and (max-width:700px) {
    figcaption, h2 {
        font-size: 37px;
    }
}@media only screen and (max-width:440px) {
    figcaption, h2 {
        font-size: 30px;
    }
}h3 {
     font-weight: 600;
 }
.area h3 {
    margin-top: 20px;
}
nav {
    text-align: center;
}
ul[role=menubar] {
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 0;
    margin-bottom: 20px;
    background-image: url(../images/divide.png);
    background-repeat: no-repeat;
    background-position: center 48px;
    background-color: #C1D1A5;
}
@media only screen and (max-width:700px) {
    ul[role=menubar] {
        background-image: none;
    }
}ul[role=menubar] li {
     display: inline-block;
     padding-top: 15px;
     padding-bottom: 15px;
 }
ul[role=menubar] li a {
    padding-left: 20px;
    padding-right: 20px;
    color: #23330b;
    font-size: 17px;
}
li.last a, li.last a:active, li.last a:link, li.last a:visited {
    border: none;
}
ul[role=menubar] li.current {
    background-color: #fff;
}
ul[role=menubar] li.current a {
    border-color: #fff;
    color: #dd5800;
}
.intro figcaption {
    margin-top: 30px;
}
h2.lead {
    font-size: 14px;
    font-family: 'Open Sans';
    font-weight: 600;
    margin-top: 10px;
}
p.lead {
    font-size: 20px;
    color: #dd5800;
    font-weight: 300;
    font-style: italic;
    margin-top: 0;
    margin-bottom: 40px;
}
@media screen and (max-width:960px) {
    p.lead {
        font-size: 22px;
    }
}@media screen and (max-width:760px) {
    p.lead {
        font-size: 20px;
    }
}nav.page-links {
     background-color: #333;
     overflow: hidden;
 }
nav.page-links ul {
    padding: 1.7% 1% 0;
    margin: auto;
    max-width: 1680px;
    overflow: hidden;
}
nav.page-links li {
    float: left;
    background-color: #fff;
    color: grey;
    line-height: 1.5;
    width: 31.3%;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 2%;
    padding-bottom: 2%
}
nav.page-links.home li {
    padding-bottom: 2%;
    padding-top: 2%
}
@media screen and (max-width:1200px) {
    nav.page-links li {
        width: 48%;
        margin-left: 1%;
        margin-right: 1%;
        margin-bottom: 3%;
        padding-bottom: 3%}
    nav.page-links ul {
        padding-bottom: 0;
        padding-top: 3%}
}
@media screen and (max-width:740px) {
    nav.page-links li {
        width: 94%;
        margin-left: 3%;
        margin-right: 3%;
        margin-bottom: 4%;
        padding-bottom: 4%}
    nav.page-links ul {
        padding-bottom: 0;
        padding-top: 4%}
}
nav.page-links li a {
     font-size: 36px;
     color: #3f5d14;
     font-family: ErasITC-Light;
     display: block;
 }
nav.page-links.websites li a {
    font-size: 18px;
    font-family: "Open Sans";
    color: #dd5800;
    display: inline;
}
nav.page-links.websites li a[role=button]  {
    color: #fff;
    margin-top: 0px;
    margin-bottom: 0;
    display: block;
    width: fit-content;
}
nav.page-links.websites li span {
    padding:15px;
    display: block;
    font-size: 18px;
    font-family: "Open Sans";
}
@media screen and (max-width:1450px) {
    nav.page-links li a {
    font-size: 28px;
    }
}
nav.page-links li a span {
    font-family: ErasITC-Demi;
}
nav.page-links li a:hover {
    color: #dd5800;
    text-decoration: none;
}
nav.page-links.row-of-4 li {
    width: 25%;
    box-sizing: border-box;
    border: #fff solid 1px;
}
nav.page-links.row-of-4.video-embed ul {
    max-width: 100%;
}
nav.page-links.row-of-4.video-embed li {
    position: relative;
    padding-bottom: calc(56.70% * 0.23); /* 16:9 */
    width: 23%;
    height: 0;
    box-sizing: border-box;
    border: #fff solid 1px;
    margin-left: 1%;
    margin-right: 1%;
}
nav.page-links.row-of-4.video-embed li iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media screen and (max-width:1200px) {
    nav.page-links.row-of-4.video-embed li {
        width: 48%;
        padding-bottom: calc(56.70% * 0.48); /* 16:9 */
        margin-left: 1%;
        margin-right: 1%;
        margin-bottom: 3%;
    }
    nav.page-links.row-of-4 ul {
        padding-bottom: 0;
        padding-top: 3%}
}
@media screen and (max-width:740px) {
    nav.page-links.row-of-4.video-embed li {
        width: 94%;
        margin-left: 3%;
        margin-right: 3%;
        margin-bottom: 4%;
        padding-bottom: calc(56.70% * 0.94); /* 16:9 */
    }
    nav.page-links.row-of-4 ul {
        padding-bottom: 0;
        padding-top: 4%}
}
nav.page-links.logo-rows li{
    padding-bottom: 0;
}
nav.page-links.app-rows li{
    padding-bottom: 0;
    background-color:revert;
}
nav.page-links.no-frame li{
    padding-bottom: 0;
    background-color:revert;
}

.about {
    background-image: url(../images/divide.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    padding-bottom: 40px;
}
ul.brand-logos {
    padding: 0;
}
ul.brand-logos li {
    list-style-type: none;
    display: inline;
    padding-left: 20px;
    padding-right: 20px;
}
.split div.area {
    width: 20%;
    float: left;
    margin-left: 2.5%;
    margin-right: 2.5%;
    text-align: left;
}
.split div.area p {
    padding-left: 0;
    padding-right: 0;
}
@media screen and (max-width:960px) {
    .split div.area {
        width: 42%;
        float: left;
        margin-left: 4%;
        margin-right: 4%}
    .clearall, .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        margin: 0;
    }
}@media screen and (max-width:700px) {
    .split div.area {
        width: 90%;
        float: left;
        margin-left: 5%;
        margin-right: 5%}
}.split {
     overflow: hidden;
 }
a[role=button] {
    background-color: #618f1f;
    padding: 10px 30px;
    margin: 30px auto 50px;
    border: none;
    font-size: 22px;
    color: #FFF;
    clear: both;
    display: inline-block;
    text-transform: uppercase;
}
a:hover[role=button] {
    background-color: #78b126;
    text-decoration: none;
}
footer {
    color: #ccc;
}
footer p {
    float: left;
    color: #ccc;
    margin: 0;
    padding: 0;
}
footer ul {
    float: right;
    margin: 0;
    padding: 0;
}
footer ul li {
    display: inline-block;
}
footer ul li a, footer ul li a:active, footer ul li a:link, footer ul li a:visited {
    padding-left: 20px;
    padding-right: 20px;
    border-color: #999;
    color: #ccc;
}
@media only screen and (max-width:1000px) {
    footer {
        text-align: center;
    }
    footer p {
        padding-bottom: 20px;
        float: none;
    }
    footer ul {
        float: none;
    }
    footer ul li {
        padding-bottom: 20px;
    }
}section.responsive {
     background-image: url(../images/divide.png);
     background-repeat: no-repeat;
     background-position: center bottom;
 }
section.responsive button {
    margin-top: 0;
}
ul.web-designs {
    padding: 1%;
    max-width: 1600px;
    margin: 40px auto 20px;
    overflow: hidden;
    background-color: #333;
}
ul.web-designs.fill-width {
    max-width: 100%;
}
ul.web-designs li {
    display: inline;
    width: 23%;
    float: left;
    margin: 1%;
    list-style-type: none;
    padding: 0;
}
ul.web-designs.ai li {
    border: #999999 1px solid;
    box-sizing: border-box;
    font-size: 0;
}
@media only screen and (max-width:960px) {
    ul.web-designs li {
        width: 46%;
        margin: 2%}
    ul.web-designs {
        padding: 2%}
}@media only screen and (max-width:600px) {
    ul.web-designs li {
        width: 92%;
        margin: 4%}
    ul.web-designs {
        padding: 2%}
}ul.web-designs li img {
     opacity: .6;
     filter: alpha(opacity=60);
 }
@media only screen and (max-width:968px) {
    ul.web-designs li img {
        opacity: 1;
        filter: alpha(opacity=100);
    }
}ul.web-designs li:hover img {
     opacity: 100;
     filter: alpha(opacity=1);
 }
ul.car {
    background-image: url(../images/spin.png);
    background-repeat: no-repeat;
    background-position: top right;
}
section.art {
    background-image: url(../images/divide.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    overflow: hidden;
}
section.art ul img {
    max-width: none;
}
.art-feature {
    padding: .5% 20px 30px;
    margin: auto;
    background-image: url(../images/divide.png);
    background-repeat: no-repeat;
    background-position: center bottom;
}
section.logos ul.band {
    padding-left: 0;
    display: block;
    max-width: 1660px;
    margin: auto;
}
section.logos li {
    display: inline;
    width: 46%;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
    list-style-type: none;
    padding: 0;
}
section.logos ul.band li {
    width: 25%;
    margin-left: 0;
    margin-right: 0;
    padding-top: 50px;
    padding-bottom: 50px;
}
@media only screen and (max-width:960px) {
    section.logos ul.band li {
        width: 50%;
        padding-top: 0;
        padding-bottom: 0;
    }
    section.logos ul.band {
        margin-top: 30px;
        padding-bottom: 30px;
    }
}@media only screen and (max-width:700px) {
    section.logos li {
        width: 92%;
        margin-left: 4%;
        margin-right: 4%}
}@media only screen and (max-width:600px) {
    section.logos ul.band li {
        width: 100%}
}.city-backdrop {
     background-image: url(../images/city.jpg);
     background-repeat: no-repeat;
     background-position: center 100px;
 }
.ai-backdrop {
    background-image: url(../images/ai/ai-bg.jpg);
    background-repeat: no-repeat;
    background-position: center 250px;
}
.graphics-backdrop {
    background-image: url(../images/graphics-bg.jpg);
    background-repeat: no-repeat;
    background-position: center 170px;
}
.web-backdrop {
    background-image: url(../images/web-design-bg.jpg);
    background-repeat: no-repeat;
    background-position: center 170px;
}
.web-dev-backdrop {
    background-image: url(../images/web-dev-bg.jpg);
    background-repeat: no-repeat;
    background-position: center 170px;
}
.ui-ux-backdrop {
    background-image: url(../images/ui-ux-bg.jpg);
    background-repeat: no-repeat;
    background-position: center 170px;
}
.social-backdrop {
    background-image: url(../images/social-bg.jpg);
    background-repeat: no-repeat;
    background-position: center 170px;
}
figure.intro {
    background-image: url(../images/home-bg.jpg);
    background-repeat: no-repeat;
    background-position: center 100px;
}
@media only screen and (max-width:640px) {
    .city-backdrop, .ai-backdrop {
        background-image: none;
    }
}section.illustration {
     background-image: url(../images/divide.png);
     background-repeat: no-repeat;
     background-position: center bottom;
     padding-bottom: 30px;
 }
form {
    text-align: left;
    width: 50%;
    margin: auto;
}
form h2 {
    padding: 0;
}
form label {
    padding-bottom: 6px;
    display: block;
}
input:not(:focus):invalid {
    outline: red solid 1px;
}
input:focus:invalid {
    outline: #00f solid 1px;
}
input[type=email], input[type=tel], input[type=text], textarea {
    width: 60%;
    border: 2px;
    border-color: #5b871d;
    border-style: solid;
    padding: 2%}
textarea {
    width: 96%;
    height: 200px;
}
.me {
    margin: auto;
    text-align: center;
}
@media only screen and (max-width:960px) {
    form {
        width: 70%}
}@media only screen and (max-width:648px) {
    form {
        width: 80%}
    input[type=email], input[type=tel], input[type=text] {
        width: 70%}
}@media only screen and (max-width:440px) {
    input[type=email], input[type=tel], input[type=text], textarea {
        width: 96%}
}.roundabout-holder {
     list-style: none;
     width: 800px;
     padding-top: 0;
     padding-right: 0;
     padding-left: 0;
     margin-left: auto;
     margin-right: auto;
     text-align: center;
     margin-bottom: 100px;
     display: block;
 }
.car {
    background-image: url(assets/images/fade.jpg);
    background-repeat: no-repeat;
    background-position: center 20px;
    height: 320px;
}
.car2 {
    background-image: url(assets/images/fade.jpg);
    background-repeat: no-repeat;
    background-position: center 20px;
    height: 360px;
}
.car3 {
    background-image: url(assets/images/fadeNarrow.jpg);
    background-repeat: no-repeat;
    background-position: center 40px;
    height: 260px;
}
.roundabout-moveable-item {
    cursor: pointer;
}
.roundabout-in-focus {
    cursor: auto;
    border: 2px solid #fff;
    padding: 0;
}
.car img {
    display: block;
}
.fancybox-custom .fancybox-skin {
    box-shadow: 0 0 50px #222;
}
@media only screen and (max-width:1200px) {
    .roundabout-holder {
        width: 600px;
    }
}@media only screen and (max-width:1100px) {
    .roundabout-holder {
        width: 550px;
    }
}@media only screen and (max-width:1000px) {
    .roundabout-holder {
        width: 500px;
    }
}@media only screen and (max-width:900px) {
    .roundabout-holder {
        width: 450px;
    }
}@media only screen and (max-width:800px) {
    .roundabout-holder {
        width: 400px;
    }
}@media only screen and (max-width:700px) {
    .roundabout-holder {
        width: 350px;
    }
}@media only screen and (max-width:600px) {
    .roundabout-holder {
        width: 300px;
    }
}@media only screen and (max-width:500px) {
    .roundabout-holder {
        width: 250px;
    }
}@media only screen and (max-width:400px) {
    .roundabout-holder {
        width: 200px;
    }
}@media only screen and (max-width:300px) {
    .roundabout-holder {
        width: 150px;
    }
}


.desktop {
    display: block;
    margin:auto;
}
.mobile {
    display: none;
}
@media only screen and (max-width:1000px) {
    .desktop {
        display: none;
    }
    .mobile {
        display: block;
        margin:auto;
    }
}
@media only screen and (max-width:1200px) {
    .device {
        display: none;
    }
}