.container {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    overflow: hidden;
}
.blog {
    max-width: 710px;
}
.blogHeadline{
    line-height: normal;
    font-size: 3.5rem;
    font-weight:600;
    text-transform: none;
    color: #363636;
    letter-spacing: normal;
}
.blogBody{
    margin-top: 5rem;
    margin-bottom: 9rem;
}
.date{
    margin-top: 1rem;
    font-family: "Lato", sans-serif;
    font-size: 1.4rem;
    color: #9b9b9b;
}
.date-posts{
    margin-top: -2.5rem;
    font-family: "Lato", sans-serif;
    font-size: 1.4rem;
    color: #9b9b9b;
}
.author{
    font-family: "Lato", Helvetica, Arial, sans-serif;
    font-size: 1.4rem;
    color: #c19f6f;
    font-weight:600;
}
.authorTitle{
    font-family: "Lato", Helvetica, Arial, sans-serif;
    font-size: 1.4rem;
    color: #c19f6f;
    font-weight:400;
}
.content {
    margin-top:7em;
    font-family: Georgia, serif;
}
.authorImage{
    vertical-align:middle;
    height: 100px;
    width: 100px;
    border-radius: 50%;
}
.sidebar {
    margin-top:8em;
    font-family: "Lato", sans-serif;
}
.closing{
    font-family: "Lato", Helvetica, Arial, sans-serif;
    font-size: 1.8rem;
    font-style: italic;
    margin-bottom: 2rem;
}
.comments{
    padding: 3em 0 3em 0;
    background-color: #fffefb;
}
.featured-image{
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.search{
    margin-top: 12rem;
    height: 100%;
}
.column, .columns {
    width: 100%;
    float: left;
    box-sizing: border-box;
}
@media (min-width: 400px) {
    .container {
        width: 80%;
        padding: 0;
    }
}
@media (min-width: 550px) {
    .container {
        width: 90%;
    }
    .column, .columns {
        margin-left: 4%;
    }
    .column:first-child, .columns:first-child {
        margin-left: 0;
    }
    .one.column, .one.columns {
        width: 4.66666666667%;
    }
    .two.columns {
        width: 13.3333333333%;
    }
    .three.columns {
        width: 22%;
    }
    .four.columns {
        width: 30.6666666667%;
    }
    .five.columns {
        width: 39.3333333333%;
    }
    .six.columns {
        width: 48%;
    }
    .seven.columns {
        width: 56.6666666667%;
    }
    .eight.columns {
        width: 65.3333333333%;
    }
    .nine.columns {
        width: 74.0%;
    }
    .ten.columns {
        width: 82.6666666667%;
    }
    .eleven.columns {
        width: 91.3333333333%;
    }
    .twelve.columns {
        width: 100%;
        margin-left: 0;
    }
    .one-third.column {
        width: 30.6666666667%;
    }
    .two-thirds.column {
        width: 65.3333333333%;
    }
    .one-half.column {
        width: 48%;
    }
    .offset-by-one.column, .offset-by-one.columns {
        margin-left: 8.66666666667%;
    }
    .offset-by-two.column, .offset-by-two.columns {
        margin-left: 17.3333333333%;
    }
    .offset-by-three.column, .offset-by-three.columns {
        margin-left: 26%;
    }
    .offset-by-four.column, .offset-by-four.columns {
        margin-left: 34.6666666667%;
    }
    .offset-by-five.column, .offset-by-five.columns {
        margin-left: 43.3333333333%;
    }
    .offset-by-six.column, .offset-by-six.columns {
        margin-left: 52%;
    }
    .offset-by-seven.column, .offset-by-seven.columns {
        margin-left: 60.6666666667%;
    }
    .offset-by-eight.column, .offset-by-eight.columns {
        margin-left: 69.3333333333%;
    }
    .offset-by-nine.column, .offset-by-nine.columns {
        margin-left: 78.0%;
    }
    .offset-by-ten.column, .offset-by-ten.columns {
        margin-left: 86.6666666667%;
    }
    .offset-by-eleven.column, .offset-by-eleven.columns {
        margin-left: 95.3333333333%;
    }
    .offset-by-one-third.column, .offset-by-one-third.columns {
        margin-left: 34.6666666667%;
    }
    .offset-by-two-thirds.column, .offset-by-two-thirds.columns {
        margin-left: 69.3333333333%;
    }
    .offset-by-one-half.column, .offset-by-one-half.columns {
        margin-left: 52%;
    }
}
html {
    font-size: 62.5%;
}
body {
    font-size: 1.8em;
    line-height: 1.6;
    font-weight: 400;
    font-family: "Lato", Helvetica, Arial, sans-serif;
    color: #222;
    /*background-color: #ebebeb;*/
    display: flex;
    flex-direction: column;
    height:100%;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Lato", Helvetica, Arial, sans-serif;
}
h1 {
    font-size: 2rem;
    line-height: 1.4;
    letter-spacing: .1rem;
    color: #0E4ABF;
    text-shadow: 0px px #5f78a8;
    text-transform: uppercase;
}
h2 {
    line-height: 1.2;
    letter-spacing: .2rem;
    margin-top: 8rem;
    margin-bottom: 4rem;
    font-size: 3rem;
    text-transform: uppercase;
}
h3 {
    font-size: 1.8rem;
    line-height: 1.25;
    letter-spacing: .2rem;
    margin: 1.5rem 0 .2rem 0;
}
h4 {
    font-size: 1.7rem;
    line-height: 1.25;
    letter-spacing: .05rem;
    color: #767676;
    margin-top: -3rem;
    font-weight: 400;
}
h5 {
        
    font-size: 2.3rem;
    font-weight:400;
    margin:2.5em 0 1em 0;
    }
@media (min-width: 550px) {
    h1 {
        font-size: 3rem;
    }
    h2 {
        font-size: 3rem;
    }
    h3 {
        font-size: 1.9rem;
    }
    body {
        font-size: 2em;
    }
}
p {
    margin-top: 2rem;
    z-index: 2;
}
a {
    color: #b18449;
    text-decoration: none;
    font-weight: 400;
}
a:hover {
    color: #e6bc83;
    text-decoration: none;
    border-bottom: 0px;
}
.getintouch{
    display: inline-block;
    height: 48px;
    padding: 0 15px;
    color: #656565;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    line-height: 34px;
    letter-spacing: .1rem;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border-radius: 4px;
    border: 6px solid #ffcf8e;
    cursor: pointer;
    box-sizing: border-box;
    margin: 1rem 0rem 6rem 0rem;
}
a.getintouch:hover{
    border: 6px solid #f0b666;
}
.button, button, input[type="submit"], input[type="button"] {
    display: inline-block;
    height: 38px;
    padding: 0 30px;
    color: #555;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: .1rem;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border-radius: 4px;
    border: 1px solid #bbb;
    cursor: pointer;
    box-sizing: border-box;
}
.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="button"]:focus {
    color: #333;
    border-color: #F17900;
    outline: 0;
}
input[type="email"], input[type="phone"], input[type="search"], input[type="text"], textarea, select {
    height: 38px;
    padding: 6px 10px;
    background-color: #fff;
    border: 1px solid #D1D1D1;
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
}
input[type="email"], input[type="phone"], input[type="search"], input[type="text"], textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
textarea {
    min-height: 65px;
    padding-top: 6px;
    padding-bottom: 6px;
}
input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
    border: 1px solid #FBB829;
    outline: 0;
}
label, legend {
    display: block;
    margin-bottom: .25rem;
    margin-top: 1rem;
    font-weight: 600;
}
fieldset {
    padding: 0;
    border-width: 0;
}
input[type="checkbox"], input[type="radio"] {
    display: inline;
}
label > .label-body {
    display: inline-block;
    margin-left: .5rem;
    font-weight: normal;
}
ul {
    list-style: disc circle;
}
ol {
    list-style: decimal inside;
}
ol, ul {
    margin-top: 0;
}

ol > li:before {
    font-weight: 600;
}
ul ul, ul ol, ol ol, ol ul {
    margin: 1.5rem 0 1.5rem 3rem;
    font-size: 90%;
}
li {
    margin-bottom: 1rem;
}
th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #E1E1E1;
}
th:first-child, td:first-child {
    padding-left: 0;
}
th:last-child, td:last-child {
    padding-right: 0;
}
button, .button {
    margin-bottom: 1rem;
}
input, textarea, select, fieldset {
    margin-bottom: 1.5rem;
}
pre, dl, figure, table, p, ul, ol, form {
    margin-bottom: 2.5rem;
}
blockquote{
    font-weight: 400;
    font-size: 2.2rem;
    font-style: italic;
}
.u-full-width {
    width: 100%;
    box-sizing: border-box;
}
.u-max-full-width {
    max-width: 100%;
    box-sizing: border-box;
}
.u-pull-right {
    float: right;
}
.u-pull-left {
    float: left;
}
hr {
    margin-top: 3rem;
    margin-bottom: 3.5rem;
    border-width: 0;
    border-top: 1px solid #E1E1E1;
}
.container:after, .row:after, .u-cf {
    content: "";
    display: table;
    clear: both;
}
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}
audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline;
}
audio:not([controls]) {
    display: none;
    height: 0;
}
[hidden], template {
    display: none;
}
a {
    background-color: transparent;
}
a:active, a:hover {
    outline: 0;
}
abbr[title] {
    border-bottom: 1px dotted;
}
b, strong {
    font-weight: 600;
}
dfn {
    font-style: italic;
}
mark {
    background: #ff0;
    color: #000;
}
small {
    font-size: 80%;
}
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
img {
    border: 0;
    max-width: 100%;
}
svg:not(:root) {
    overflow: hidden;
}
figure {
    margin: 1em 40px;
}
hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}
pre {
    overflow: auto;
}
code, kbd, pre, samp {
    font-family: monospace, monospace;
    font-size: 1em;
}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}
button {
    overflow: visible;
}
button, select {
    text-transform: none;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}
button[disabled], html input[disabled] {
    cursor: default;
}
button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}
input {
    line-height: normal;
}
input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}
input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}
legend {
    border: 0;
    padding: 0;
}
textarea {
    overflow: auto;
}
optgroup {
    font-weight: bold;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
td, th {
    padding: 0;
}
.header {
    position: relative;
    float: center;
    padding: 4rem;
    margin-top: 3rem;
    height: 350px;
    background: url('../images/noise_background_black.png');

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}
.logo {
    display:none;
}
.biglogo{
    position:relative;
    width: 50%;
}
h6 {
    padding: 2rem 0 0rem 0;
}
.device{
    position: relative;
    left: -200%;
    cursor: pointer;
    margin: 0 auto;
    margin-top: 5rem;
    max-width: 815px;
    height: 80%;
}
.slide{
    -webkit-animation: slide .8s forwards;
    -webkit-animation-delay: .4s;
    animation: slide .8s forwards;
    animation-delay: .4s;
}

@-webkit-keyframes slide {
    100% {
        left: 0;
    }
}
@keyframes slide {
    100% {
        left: 0;
    }
}
.display{
    z-index: 100;
    position:absolute;
    width: 100%;
}
.video{
    z-index: 99;
    position: absolute;
    margin: 12% 0 0 13.25%;
    width: 73%;
}
.intro{
    width: 100%;
    text-align: center;
    margin-top: -8rem;
    animation: fadein 3s;
    -moz-animation: fadein 3s;
    -webkit-animation: fadein 3s;
    -o-animation: fadein 3s;
}
.dummy{
    padding-top: 100%;
}
.stats-img {
    display: block;
    text-align: center;
    margin: 2.5rem auto 0;
}
.nav{
    font-family: "Lato", Helvetica, Arial, sans-serif;
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 6.5rem;
    background: #fff;
    z-index: 101;
    border-bottom: 1px solid #eee;
    display: block;
    animation: fadein 2s;
    -moz-animation: fadein 2s;
    -webkit-animation: fadein 2s;
    -o-animation: fadein 2s;
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
.nav-spacer {
    display: none;
}
.nav > .container {
    width: 100%;
}
.nav-list {
    list-style: none;
    margin-bottom: 0;
}
.nav-item {
    position: relative;
    float: right;
    margin-bottom: 0;
}
.nav-link {
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: .2rem;
    margin-right: 17px;
    text-decoration: none;
    line-height: 6.5rem;
    color: #222;
}
.nav-link.active {
    color: #FBB829;
}
.nav a:hover {
    color: #9b9b9b;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid #F17900;
    padding-bottom: 4px;
}

.about {
    position: relative;
    color: #343434;
    margin-top: 0rem;
    padding-top: 0rem;
    border-top: 5px solid #f4f4f4;
    border-bottom: 5px solid #f4f4f4;
    background-color: #fffbf1;
}



.aboutpage {
    position: relative;
    color: #343434;
    margin-top: 0rem;
    padding-top: 0rem;
    background-color: #fffbf1;
}

.quote{
    font-size: 2rem;
    font-style:italic;
    margin-top: 6rem;
    padding-bottom: 2rem;
    z-index: 2;
}
.quoteAuthor{
    text-align: right;
    font-weight: 600;
    margin-top: -3rem;
    margin-bottom: 5rem;
}
.shadow {
    text-shadow: 1px 1px #222;
}
.work {
    color: #222;
    padding-top: 5rem;
    padding-bottom: 10rem;
    background-color: #fff;
}
.work h2{
    margin-top: 7rem;
    margin-bottom: -3rem;
    font-size: 3rem;
}
.example{
    width: 100%;
	padding-bottom: 56.25%; /* 16:9 */
	position: relative;
    background-size: cover;
    margin-top: 8rem;

}
.example:hover {
    opacity: .80;
    filter: alpha(opacity=80);
}
.description{
    text-align: right;
}
.work-description{
    text-align: left;
    margin: 2rem 0 5rem 0;
}
.samsungsmartcam{
    background-image: url(../images/samsung_smartcam.jpg);
}
.nakedflockjamboree{
    background-image: url(../images/nakedflockjamboree.jpg);
}
.rogershifi{
    background-image: url(../images/rogershifi.jpg);
}
.musestuck{
    background-image: url(../images/musestuck.jpg);
}
.logitech{
    background-image: url(../images/logitech.jpg);
}
.nakedflock{
    background-image: url(../images/nakedflock.jpg);
}
.brainwavz{
    background-image: url(../images/brainwavz.jpg);
}
.stella{
    background-image: url(../images/stella_artois.jpg);
}
.adultswim{
    background-image: url(../images/adult_swim_station_ids.jpg);
}
.interjet{
    background-image: url(../images/interjet.jpg);
}
.timePosted{
    color: #FFF;
    float: right;
    font-size: 1.5rem;
    padding-bottom: 0;
}
.tweet{
    color: #222;
    font-family: "Lato", Helvetica, Arial, sans-serif;
    font-weight: 600;
}
.tweet a{
    color: #FFF;
}
.contact{
    background-color: #fffbf1;
    margin: 5rem 0rem 1rem 0rem;
}

.error{
    color: #E80000;
    background-color: #edbfbf;
    font-weight: 600;
    text-indent: 2rem;
}

.success{
    color: #000;
    background-color: #bcf997;
    font-weight: 200;
    text-indent: 2rem;
}
.contact-img {
    max-width: 100%;
    margin-top: 2rem;
}
a.noborder:hover {
    text-decoration: none;
    border: none;
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
    margin-top:3em;
} 
.embed-container iframe, .embed-container object, .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.footer {
    position: relative;
    text-align: center;
    font-size: 1.3rem;
    width: 100%;
    height: 5rem;
    margin-top:2rem;
    margin-bottom:0;
    border-top: 3px solid #fff;
    line-height: 100%;
    background-color: #e3e0d7;
    bottom:0;
}

.absolute-center {
    display:-ms-flexbox;
    -ms-flex-pack:center;
    -ms-flex-align:center;
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    display:box;
    box-pack:center;
    box-align:center;
}
@media (min-width: 550px) {
    blockquote{
    font-size: 3rem;
    padding: 3rem 0 3rem 0;
}
    .nav-list{
    margin-right: 35px;
    }
    .nav-link{
    font-size: 1.6rem;
    }
    .header {
        height: 550px;
    }
    .about {
        padding-top: 6rem;
        padding-bottom: 2rem;
    }
    .quote{
        padding-bottom: 0rem;
    }
    .example {
        margin-top: 8rem;
    }
    .author{
    margin-left: -2rem;
    }
    .authorTitle{
    margin-left: -2rem;
    }
    .send-yourself-copy {
        float: right;
        margin-top: 12px;
    }
    .contact-img {
        max-width: 100%;
        margin-top: 0rem;
    }
}
@media (min-width: 750px) {
    .header{
        /*height: 750px;*/
        height: 100vh;
    }
    .device{
    height: 600px;
}
    .logo {
    position: absolute;
    float: left;
    margin-left: 4rem;
    margin-bottom: 1.9rem;
    width: 200px;
    /*height: 35px;*/
    bottom: 0px;
    transition: bottom 1s;
    -webkit-transform: translateZ(0);
    display: block;
    }
    .staticlogo{
        bottom: 0px;
    }
    .about{
        background-size: 12%, 6%;
    }
    @keyframes fadein {
        from {
            opacity:0;
        }
        to {
            opacity:1;
        }
    }
    @-moz-keyframes fadein {
        from {
            opacity:0;
        }
        to {
            opacity:1;
        }
    }
    @-webkit-keyframes fadein {
        from {
            opacity:0;
        }
        to {
            opacity:1;
        }
    }
    @-o-keyframes fadein {
        from {
            opacity:0;
        }
        to {
            opacity: 1;
        }
    }
    .work h2{
        font-size: 4rem;
    }
    .welcome{
        font-size: 3rem;
        margin-top:0;
    }
}