﻿@charset "utf-8";
/* CSS Document */


/*------------------------------------------------------------------
[Table of contents]
1. Clearfix
2. Preloader
3. Typography
4. Headings
5. Buttons
6. Main Nav
7. Main Content
8. Column Grid
9. Revolution Slider Additions
10. Images
11. Icons
12. Lists
13. Footer
14. Google Maps
-------------------------------------------------------------------*/


/* =1. Clearfix
--------------------------------------------------------------------------------------------------------*/
.clear {
    clear: both;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/* ----- clear fix for floats ----- */
.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}
/* hides clearfix from IE-mac */
.clearfix {
    display: block;
}
/* end hide from IE-mac */
.alignleft {
    float: left;
}

.alignright {
    float: right;
}

.aligncenter {
    margin: auto;
    display: block;
}

.alignnone {
    clear: both;
    font-size: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    height: 0;
    width: 0;
}

.centered {
    text-align: center;
}
/* End Clearfix
--------------------------------------------------------------------------------------------------------*/

/* =3. Typography
--------------------------------------------------------------------------------------------------------*/
html {
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
    height: 100%;
    width: 100%;
}

body {
    font: 18px 'Open Sans', Arial, Helvetica, sans-serif;
    color: #555;
    position: absolute;
    height: 100%;
    width: 100%; /*background:#fcfcfc*/
}

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

strong {
    font-weight: 700;
}

a, a > * {
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

a {
    color: #2b2b2b;
    text-decoration: none;
}

p.gifieP {
    padding: 0px 20px 27px 0;
    line-height: 1.5;
    font-weight: 400;
    font-family: 'Merriweather', Georgia, "Times New Roman", Times, serif;
}

.white-popup-block p {
    padding-right: 0;
}

.small {
    font-size: 14px;
}

p a {
    border-bottom: 1px solid #2b2b2b;
}

p.no-border a {
    border: 0;
}

span.arrow {
    font: 13px 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

em {
    font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 600;
}

code {
    font: 13px 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-style: normal;
    line-height: 1.5;
    display: block;
}

pre {
    padding: 13px 40px 0 40px;
}

blockquote {
    line-height: 30px;
    padding: 110px 30px 30px 30px;
    margin: 10px 0 35px 0;
    color: #333;
    text-align: center;
    font-size: 18px;
    font-style: italic;
    background: url(../images/icons/bg-quote.png) center 35px no-repeat;
    background-size: 48px 48px;
    font-family: 'Merriweather', Georgia, "Times New Roman", Times, serif;
    border-bottom: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
}

    blockquote.second {
        background: url(../images/icons/bg-quote2.png) left 40px no-repeat;
        background-size: 48px 48px;
    }

    blockquote span {
        font-size: 14px;
        display: block;
        margin-top: 15px;
        font-style: normal;
        color: #999;
    }
/* End Typography
--------------------------------------------------------------------------------------------------------*/


/* =4. Headings
--------------------------------------------------------------------------------------------------------*/
h1#logo {
    display: block;
    position: relative;
    float: left;
}

    h1#logo a {
        display: block;
        background: url(../images/bg-logo.png) center no-repeat;
        background-size: 92px 25px;
        width: 92px; /*try to keep it at 35px*/
        height: 35px;
        text-indent: -9999px;
    }

.tagline {
    float: left;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    padding: 0px 0 0 20px;
    margin: 0px auto;
    position: relative;
    display: table;
    height: 35px;
    font-style: italic;
}

    .tagline span {
        display: table-cell;
        vertical-align: middle;
    }

h2 {
    font-size: 92px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    line-height: 1;
    padding: 0 100px 26px 0;
    letter-spacing: -1px;
}

.white-popup-block h2, .post h2 {
    font-size: 40px;
    text-transform: none;
    letter-spacing: -1px;
    padding-right: 0;
    line-height: 1.2;
    color: #2b2b2b;
    padding-bottom: 10px;
}

.post h2 {
    margin-top: -6px;
    padding-bottom: 12px;
}

h3 {
    font-size: 60px;
    font-weight: 700;
    color: #2b2b2b;
    line-height: 60px;
    text-transform: uppercase;
    padding: 0 0px 23px 0;
    letter-spacing: -1px;
}

h4 {
    font-size: 19px;
    font-weight: 700;
    color: #2b2b2b;
    line-height: 27px;
    text-transform: uppercase;
    padding: 0 0px 15px 0;
}

article h4 {
    font-size: 26px;
    text-transform: none;
    line-height: 1.2;
    padding-bottom: 12px;
}

h5 {
    font-size: 11px;
    font-weight: 400;
    color: #2b2b2b;
    line-height: 22px;
    padding: 0px 0px 17px 0;
    text-transform: uppercase;
    letter-spacing: 5px;
}
/* End Headings
--------------------------------------------------------------------------------------------------------*/


/* =6. Main Nav
--------------------------------------------------------------------------------------------------------*/
nav {
    margin: 0px auto;
    position: relative;
    display: table;
    height: 35px;
    float: right;
}

#nav {
    display: table-cell;
    vertical-align: middle;
}

    #nav li {
        float: left;
        margin: 0px 0px 0px 25px;
        cursor: pointer;
    }

        #nav li a {
            color: #8d8d8d;
            font-family: "Open Sans", Arial, Helvetica, sans-serif;
            font-size: 12px;
            font-weight: 400;
            text-decoration: none;
            text-transform: uppercase;
            display: block;
        }

            #nav li a.external {
                padding-left: 25px;
                border-left: 1px solid #e0e0e0;
            }

        #nav li:hover a {
            color: #2b2b2b;
        }

        #nav li.active a {
            color: #2b2b2b;
        }

.menu-line {
    width: 0;
    height: 1px;
    background: #2b2b2b;
    display: block;
}
/* End Main Nav
--------------------------------------------------------------------------------------------------------*/


/* =7. Main Content
--------------------------------------------------------------------------------------------------------*/
/*header { position:relative; z-index:200; width:100%; background:#fff; padding:26px 40px; -webkit-box-shadow:0 1px 0 rgba(0, 0, 0, 0.12); -moz-box-shadow:0 1px 0 rgba(0, 0, 0, 0.12) ; box-shadow:0 1px 0 rgba(0, 0, 0, 0.12); }*/
header {
    position: relative;
    z-index: 200;
    width: 100%;
    background: #fff;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

#undefined-sticky-wrapper {
    position: absolute;
    z-index: 200;
    width: 100%;
}

.container {
    width: 960px;
    position: relative;
    margin: 0 auto;
}

.section {
    position: relative;
    padding: 50px 0 0px 0;
    display: block;
}

    .section#section1 {
        padding-top: 0;
    }

.blog .section {
    padding-top: 87px;
}

.break {
    height: 87px;
    position: relative;
    display: block;
}

.small-break {
    height: 40px;
    position: relative;
    display: block;
}

.tiny-break {
    height: 20px;
    position: relative;
    display: block;
}

.margin {
    margin: 20px;
}

.overlay {
    display: block;
    position: absolute;
    top: 0;
    background-color: rgba(0,0,0,.5);
    z-index: 10;
    width: 100%;
    height: 100%;
}

.border {
    height: 4px;
    width: 81px;
    background: #2b2b2b;
    display: block;
    margin: 20px 0 45px 0;
    position: relative;
}

.borderline {
    background: #e0e0e0;
    width: 100%;
    display: block;
    height: 1px;
    position: absolute;
    top: 80px;
}

.thin-borderline {
    background: #e0e0e0;
    width: 100%;
    display: block;
    height: 1px;
    position: relative;
    margin: 10px 0 30px 0;
}

#section1 .border {
    background: #fff;
    margin: 20px 0 51px 0;
}

.white-popup-block {
    background: #fff;
    text-align: left;
    max-width: 600px;
    margin: 40px auto;
    position: relative;
}

.popup-content {
    padding: 35px 45px 25px 45px;
}
/* =End Main Content
--------------------------------------------------------------------------------------------------------*/

/* =11. Icons
--------------------------------------------------------------------------------------------------------*/
.icons {
    position: relative;
    height: 48px;
    width: 48px;
    float: left;
    margin-top: 4px;
    margin-bottom: 20px;
}

.centered .icons {
    float: none;
    display: inline-block;
}

.next-to-icon {
    margin-left: 80px;
}

.map {
    background: url(../images/icons/bg-map.png) no-repeat center left;
    background-size: 48px 48px;
    height: 48px;
    width: 48px;
    white-space: nowrap;
    padding-left: 72px;
    padding-top: 5px;
    margin-top: 5px;
}

.winner {
    background: url(../images/icons/bg-winner.png) no-repeat center;
    background-size: 48px 48px;
}

.time {
    background: url(../images/icons/bg-time.png) no-repeat center;
    background-size: 48px 48px;
}

.pig {
    background: url(../images/icons/bg-pig.png) no-repeat center;
    background-size: 48px 48px;
}

.adjust {
    background: url(../images/icons/bg-adjust.png) no-repeat center;
    background-size: 48px 48px;
}

.team {
    background: url(../images/icons/bg-team.png) no-repeat center;
    background-size: 48px 48px;
}

.works {
    background: url(../images/icons/bg-works.png) no-repeat center;
    background-size: 48px 48px;
}

.chat {
    background: url(../images/icons/bg-chat.png) no-repeat center;
    background-size: 48px 48px;
}

.notes {
    background: url(../images/icons/bg-notes.png) no-repeat center;
    background-size: 48px 48px;
}

.camera {
    background: url(../images/icons/bg-camera.png) no-repeat center;
    background-size: 48px 48px;
}

.illustration {
    background: url(../images/icons/bg-illustration.png) no-repeat center;
    background-size: 48px 48px;
}

.social {
    background: url(../images/icons/bg-social.png) no-repeat center;
    background-size: 48px 48px;
}

.vector {
    background: url(../images/icons/bg-vector.png) no-repeat center;
    background-size: 48px 48px;
}

.commerce {
    background: url(../images/icons/bg-commerce.png) no-repeat center;
    background-size: 48px 48px;
}

.search {
    background: url(../images/icons/bg-search.png) no-repeat center;
    background-size: 48px 48px;
}

.like {
    background: url(../images/icons/bg-like.png) center no-repeat;
    background-size: 48px 48px;
}

.share {
    background: url(../images/icons/bg-share.png) center no-repeat;
    background-size: 48px 48px;
}

.document {
    background: url(../images/icons/bg-document.png) center no-repeat;
    background-size: 48px 48px;
}
/* End Icons
--------------------------------------------------------------------------------------------------------*/

/* =13. Footer
--------------------------------------------------------------------------------------------------------*/
footer {
    min-height: 97px;
    margin: 75px 0px 0 0px;
    background: #f0f0f0;
    width: 100%;
}

    footer .container {
        padding: 26px 10px;
    }

    footer p {
        color: #888;
    }

        footer p a {
            color: #555;
            border: 0;
        }
/* End Footer
--------------------------------------------------------------------------------------------------------*/


/* custom gifie styles */
header nav#nav-left {
    float: left;
    padding-top: 10px;
    padding-left: 40px;
}

    header nav#nav-left img {
        height: 70px;
    }

header nav#nav-right {
    margin: 26px 40px;
}

@media only screen and (max-width: 1000px) {
    header > #nav-button {
        margin-top: 33px;
        margin-right: 40px;
    }
}

.event-box {
    height: 350px;
    margin: 10px;
}

#thankyou-message {
    display: none;
}

/* popup box HACKS */
.white-popup-block #popup-image-box {
    margin: 0;
    width: 558px;
    height: 558px;
}

    .white-popup-block #popup-image-box img {
        max-width: 100%;
    }

/* MOBILE */
@media only screen and (max-width: 767px) {
    #image-container {
        margin: 0;
        width: initial !important;
    }

    .white-popup-block #popup-image-box {
        width: initial !important;
        height: initial !important;
    }
}

/* TABLET */
@media only screen and (max-width: 999px) and (min-width: 768px) {
    .white-popup-block #popup-image-box {
        width: 600px;
        height: 600px;
    }
}

/* DESKTOP */
@media only screen and (min-width: 1000px) {
    .white-popup-block {
        max-width: 960px;
        max-height: 90%;
    }
}


.event-box h4 {
    text-align: center;
}

.event-box .images .gif {
    display: none;
}

@media only screen and (min-width: 1000px) {
    #image-container {
        height: 558px;
    }
}

#image-container .col1-3 {
    margin: 0 0 0 40px;
}

#custom-content .mfp-close {
    width: 48px;
    height: 48px;
    position: absolute;
    right: 11px;
    top: 17px;
    background: url(../images/icons/bg-close_black.png) no-repeat;
    background-size: 40px 40px;
    text-indent: -9999px;
    display: block;
}

#image-container a {
    font-size: 0.8em;
}

.child {
    height: 295px;
}

.icon-label-fix .next-to-icon {
    height: 90px;
}


.totem {
    background: url(../images/icons/about_totem.png) no-repeat center;
    background-size: 48px 48px;
}

.backdrop {
    background: url(../images/icons/about_backdrop.png) no-repeat center;
    background-size: 48px 48px;
}

.print {
    background: url(../images/icons/about_print.png) no-repeat center;
    background-size: 48px 48px;
}

.gif {
    background: url(../images/icons/about_gif.png) no-repeat center;
    background-size: 48px 48px;
}

.front_screen {
    background: url(../images/icons/about_front_screen.png) no-repeat center;
    background-size: 48px 48px;
}

.privacy {
    background: url(../images/icons/about_privacy.png) no-repeat center;
    background-size: 48px 48px;
}

.camera {
    background: url(../images/icons/about_camera.png) no-repeat center;
    background-size: 48px 48px;
}

.flash {
    background: url(../images/icons/about_flash.png) no-repeat center;
    background-size: 48px 48px;
}

.fastprint {
    background: url(../images/icons/about_fastprint.png) no-repeat center;
    background-size: 48px 48px;
}

.wifi {
    background: url(../images/icons/about_wifi.png) no-repeat center;
    background-size: 48px 48px;
}

.sharing {
    background: url(../images/icons/about_sharing.png) no-repeat center;
    background-size: 48px 48px;
}



#nav li.sep span {
    color: #8d8d8d;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    text-transform: uppercase;
    display: block;
}

#nav li.sep {
    margin-left: 5px;
}

    #nav li.sep ~ li {
        margin-left: 5px;
    }

#infscr-loading > img {
    vertical-align: middle;
    margin: 0 10px 0 10px;
}

#infscr-loading > div {
    display: inline;
}
