@font-face {
    font-family:'Bebas';
    src:url("../fonts/BEBAS___-webfont.eot");
    src: url("../fonts/BEBAS___-webfont.eot?#iefix") format("embedded-opentype"),
    url("../fonts/BEBAS___-webfont.woff") format("woff"),
    url("../fonts/BEBAS___-webfont.ttf") format("truetype"),
    url("../fonts/BEBAS___-webfont.svg#BebasRegular") format("svg");
    font-weight:normal;
    font-style:normal;
}

footer, header, nav, section {
    display: block;
}

html {
    font-size: 100%;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-size: 16px;
    line-height: 1.231;
}

body, input, select, textarea {
    font-family: helvetica, arial, sans-serif;
    color: #222;
}

::-moz-selection {
    background: #ad3500;
    color: #fff;
    text-shadow: none;
}

::selection {
    background: #ad3500;
    color: #fff;
    text-shadow: none;
}

h1, h2, h3, h4, h5, h6 {
    margin:0;
    padding:0;
    font-family:Bebas;
    font-weight:normal;
}

form, fieldset, legend, ul, li, ol {
    margin: 0;
    padding: 0;
}

li {
    list-style:none;
}

.big {
    font-size:20px;
}

a {
    text-decoration: none;
    color:#ad3500;
    outline:none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
    -o-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0);
}

h3, h4 {
    word-spacing:0.1em;
}

header {
    background:url(../img/header-bg.png) bottom center repeat-x #000;
    padding:35px 40px;
    overflow:hidden;
}

header h1 {
    width:285px;
    height:50px;
    display:block;
    margin:0 auto;
    text-indent:-9999px;
    background:url(../img/logo.png) top left no-repeat;
}

header nav {
    text-align:center;
    line-height:50px;
}

header nav a {
    height:50px;
    font-family:Bebas;
    color:#fff;
    font-size:24px;
    display:inline-block;
    margin:0 10px;
    padding:0 10px;
    border-radius:7px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;  
}

header nav a:hover, header nav a:active {
    background:#d00;
}

.content {
    padding:30px;
    overflow:hidden;
}

#welcome {
    text-align:center;
    padding-top:40px;
}

#welcome .highlight {
    padding:10px;
    margin-bottom:20px;
    border-radius:20px;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
}

#welcome .highlight:hover {
    background:#ffc;
}

#welcome h2 {
    font-size:44px;
    color:#777;
    word-spacing:0.3em;
}

#welcome .highlight p {
    margin:0;
    padding-bottom:20px;
    font-size:26px;
}

#work-together {
    display:block;
    margin:40px auto 0 auto;
    height:57px;
    width:318px;
    line-height:49px;
    text-align:center;
    font-size:20px;
    font-weight:bold;
    color:#fff;
    text-shadow:-1px -1px 1px #000;
    -moz-text-shadow:-1px -1px 1px #000;
    -webkit-text-shadow:-1px -1px 1px #000;
    background:url(../img/work-together-btn.png) top left no-repeat;
}

#lets-talk {
    text-align:left;
    padding:30px;
    background:#ddd;
    margin-top:30px;
    border-radius:20px;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    display:none;
    box-shadow:3px 3px 3px rgba(0, 0, 0, 0.5);
}

#lets-talk p {
    margin:1em 0;
    font-size:20px;
}

#lets-talk form {
    width:80%;
    margin:0 auto;
}

#lets-talk label {
    display:inline-block;
    width:auto;
    padding:10px 0 5px 0;
    color:#555;
    font-family:Bebas;
    word-spacing:0.1em;
}

#lets-talk div input, #lets-talk textarea {
    display:block;
    width:90%;
    padding:10px;
    font-size:20px;
    color:#555;
    background:#fff;
    border:1px solid #aaa;
    outline:none;
}

#lets-talk form p {
    text-align:center;
}

#lets-talk p input {
    display:inline-block;
    height:49px;
    width:162px;
    line-height:49px;
    text-align:center;
    font-size:20px;
    font-weight:bold;
    color:#fff;
    text-shadow:-1px -1px 1px #000;
    -moz-text-shadow:-1px -1px 1px #000;
    -webkit-text-shadow:-1px -1px 1px #000;
    letter-spacing:1px;
    background:url(../img/subscribe-btn.png) bottom left no-repeat;
    margin:10px;
    border:none;
    outline:none;
}

#lets-talk input[type=reset] {
    opacity:0.5;
}

#lets-talk p input:hover {
    background-position:top left;
}

#lets-talk form a {
    display:block;
    padding:10px;
    background:#777;
    color:#fff;
    text-align:center;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    font-size:20px;
    text-shadow:-1px -1px 1px #000;
    -moz-text-shadow:-1px -1px 1px #000;
    -webkit-text-shadow:-1px -1px 1px #000;
}

#about {
    background:url(../img/about-wrap.jpg) #ddd;
}

#about-wrap-top {
    background:url(../img/about-wrap-top.png) top left repeat-x;
}

#about-wrap-bottom {
    background:url(../img/about-wrap-bottom.png) bottom left repeat-x;
}

#about .content {
    padding:70px 30px;
}

#about h3 {
    color:#777;
    font-size:30px;
}

#work-together:hover {
    background-position:bottom left;
}

#services h3 {
    color:#ad3500;
    font-size:32px;
    padding-bottom:30px;
}

#services .col h4 {
    font-size:24px;
    padding-bottom:10px;
}

#services .col ul {
    padding-bottom:30px;
}

#bottom {
    background:url(../img/band.png) top left repeat-x #000;
    color:#fff;
    padding-bottom:10px;
}

#blog {
    padding:30px 0;
}

#blog ul {
    padding:20px 0;
}

#blog li {
    padding-bottom:2px;
    border-bottom:1px solid #555;
    margin-bottom:.7em;
}

#blog a {
    color:#bbb;
}

#blog a:hover {
    color:#eee;
}

#blog-subscribe {
    display:block;
    height:49px;
    width:162px;
    line-height:49px;
    text-align:center;
    font-size:20px;
    font-weight:bold;
    color:#ccc !important;
    text-shadow:-1px -1px 1px #000;
    -moz-text-shadow:-1px -1px 1px #000;
    -webkit-text-shadow:-1px -1px 1px #000;
    letter-spacing:1px;
    background:url(../img/subscribe-btn.png) top left no-repeat;
}

#blog-subscribe:hover {
    background-position:bottom left;
}

#contact {
    padding:90px 0 50px 0;
}

#contact h3 {
    padding-bottom:20px;    
}

#contact p {
    font-size:24px;
}

#contact nav a {
    display:inline-block;
    width:45px;
    height:45px;
    margin:0 10px 10px 0;
    text-indent:9999px;
    background:url(../img/social-sprite.png);
    background-repeat:no-repeat;
    opacity:0.6;
}

#contact .github { background-position:0 0 ; }
#contact .tumblr { background-position:-60px 0; }
#contact .twitter { background-position:-120px 0; }
#contact .facebook { background-position:-180px 0; }

#contact .github:hover { background-position:0 -45px ; }
#contact .tumblr:hover { background-position:-60px -45px; }
#contact .twitter:hover { background-position:-120px -45px; }
#contact .facebook:hover { background-position:-180px -45px; }

footer {
    clear:both;
    background:#ad3500;
    color:#fff;
    padding:3px 0;
    text-align:center;
}

footer a {
    color:#fff;
}

#bottom-wrap {
    background-image:url(../img/circle.svg);
    background-repeat:no-repeat;
    background-size:30em 30em;
}

@media only screen and (max-width: 380px) {
    #welcome .content, header .wrap, header {
        padding-left:0;
        padding-right:0;
    }
}

@media only screen and (max-width: 767px) {

    header nav {
        margin-top:20px;
    }
}

@media only screen and (min-width: 768px) {
    header h1 {
        float:left;
    }
    header nav, header nav a {
        width:auto;
    }
    header nav {
        text-align:right;
    }
    #services .col {
        width:50%;
        float:left;
    }
    #blog {
        width:50%;
        float:left;
    }
    #contact {
        width:45%;
        float:right;
        text-align:right;
    }
}

@media only screen and (min-width: 960px) {
    #services .col {
        width:25%;
        float:left;
    }
}

@media only screen and (min-width: 1020px) {
    .content, header .wrap {
        width:960px;
        margin:0 auto;
    }