/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body {
    font: 16px/26px Helvetica, Helvetica Neue, Arial;
}

.wrapper {
    width: 90%;
    margin: 0 5%;
}

/* ===================
    ALL: Orange Theme
   =================== */

.header-container {
    border-bottom: 20px solid #e44d26;
}

.footer-container,
.main aside {
    border-top: 20px solid #e44d26;
}

.header-container,
.footer-container,
.main aside {
    background: #f16529;
}

.title {
    color: white;
}

/* ==============
    MOBILE: Menu
   ============== */

nav ul {
    margin: 0;
    padding: 0;
}

nav a {
    display: block;
    margin-bottom: 10px;
    padding: 15px 0;

    text-align: center;
    text-decoration: none;
    font-weight: bold;

    color: white;
    background: #e44d26;
}

nav a:hover,
nav a:visited {
    color: white;
}

nav a:hover {
    text-decoration: underline;
}

/* ==============
    MOBILE: Main
   ============== */

.main {
    padding: 30px 0;
}

.main article h1 {
    font-size: 2em;
}

.main aside {
    color: white;
    padding: 0px 5% 10px;
}

.footer-container footer {
    color: white;
    padding: 20px 0;
}

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 .title {
    padding-top: 20px;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
p { margin: 0;}

html,
body { height: 100%; }
body { font-size: 17px; line-height: 1.5; font-family: 'Lato', sans-serif; color: #1d1a1b; background: #fff; min-width: 100%; text-align: center; }

a { color: #009999; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
a img { border: 0; }
img { vertical-align: middle; }

ul,
ol { list-style-position: inside; margin: 0; }

h1,h2,h3,h4,h5,h6 { margin: 0; }

h1 { font-size: 30px; }
h2 { font-size: 26px; }
h3 { font-size: 22px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

.container { min-height: 100%; position: relative; }
.shell { width: 1140px; margin: 0 auto; }

/*
NAVIGATION
==================*/
.navigation { text-align: right; border-bottom: 2px solid #ddecec; padding: 13px 0; }
.navigation ul { list-style: none outside none; }
.navigation li { display: inline; }
.navigation li + li { padding-left: 25px; }
.navigation li a:hover,
.navigation li.current a { color: #003333; text-decoration: none; }

.nav-btn { display: none; height: 50px; line-height: 50px; background-color: #009999; color: #fff; text-align: center; padding-left: 10px; }
.nav-btn span { display: inline-block; background: url(../img/nav-plus.png) no-repeat 0 0; width: 9px; height: 9px; position: relative; top: -2px; }
.open .nav-btn span { background-image: url(../img/nav-minus.png); }

/*
HEADER
==================*/
.header { padding: 33px 0; }
.header .shell { width: 840px; }
.logo { padding: 0 0 23px 0; }
.logo a { display: block; background: url(../img/logo.png) no-repeat 0 0; background-size: cover; width: 344px; height: 121px; margin: 0 auto; }
.logo img { width: 100%; height: auto; }
.intro { font-size: 24px; }

/*
MAIN
==================*/
.main { padding: 0; }
.main .shell { width: 840px; }

/*video*/
.video { padding-bottom: 20px; }
.video a { display: block; position: relative; text-align: center; color: #fff; font-size: 23px; word-spacing: 9px; }
.video a:hover { text-decoration: none; }
.video > a > img { width: 100%; height: auto; }
.video span { position: absolute; top: 50%; margin-top: -4%; left: 0; width: 100%; }
.video span img { display: block; width: 7%; height: auto; margin: 0 auto 7px; }

.links { font-size: 21px; font-family: 'Arvo', serif; margin-bottom: 30px; }
.links p { padding-bottom: 30px; }
.links span { color: #009999; }
.links a { display: inline-block; color: #1d1a1b; }
.links a:hover { background-color: #c4e2e2; border-radius: 5px; text-decoration: none; }

.about { padding-bottom: 20px; line-height: 1.45; font-family: 'Arvo', serif; }
.about-homepage { color: #666; font-family: 'Lato', sans-serif; }
.about p { padding-bottom: 15px; }

.links,
.about-homepage,
.founders,
.socials { background: url(../img/line.png) no-repeat center bottom; }

/*
FOOTER
==================*/
.footer { padding-bottom: 120px; }

.socials ul { height: 42px; width: 242px; list-style: none outside none; padding: 20px 0; margin: 0 auto 30px; }
.socials li { float: left; }
.socials li + li { padding-left: 8px; }
.socials a { float: left; background: url(../img/socials.png) no-repeat 0 0; width: 42px; height: 42px; }
.socials .facebook-link a { background-position: 0 0; }
.socials .twitter-link a { background-position: 0 -43px; }
.socials .linkedin-link a { background-position: 0 -86px; }
.socials .instagram-link a { background-position: 0 -129px; }
.socials .vimeo-link a { background-position: 0 -172px; }

.contacts { font-family: 'Arvo', serif; padding-bottom: 50px; }
.contacts h3 { font-family: 'Arvo', serif; color: #009999; font-weight: normal; }
.contacts a { color: #1d1a1b; }

.footer-bottom { background-color: #009999; height: 120px; position: absolute; bottom: 0; left: 0; width: 100%; line-height: 120px; font-size: 14px; }
.footer-bottom .shell { overflow: hidden; }
.scroll-top { display: block; background: url(../img/scrolltop.png) no-repeat center center; width: 73px; height: 73px; margin: 0 auto; margin-top: 24px; }

.footer-nav { list-style: none outside none; float: left; padding: 0; }
.footer-nav li { display: inline; padding-right: 20px; }
.footer-nav a { color: #fff; }

.design { float: right; color: #fff; }
.design a { color: #fff; }

/* =====================================================
    #ABOUT
====================================================== */

.banner { margin-bottom: 30px; }
.banner img { width: 100%; }

.clients { background-color: #ececec; border-top: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; padding: 13px 0 20px; margin-bottom: 40px; }
.clients h2 { padding-bottom: 16px; }
.clients p { color: #666; }

.founders { padding-bottom: 30px; }
.founders h2 { padding-bottom: 18px; }
.founders h3 { padding-bottom: 15px; font-family: 'Arvo', serif; font-weight: normal; }
.founders img { margin-bottom: 10px; }
.founders p { padding-bottom: 25px; color: #666; }
.founders .col { font-size: 17px; text-align: left; }
.cols { overflow: hidden; }
.col { display: inline-block; *display: inline; *zoom: 1; width: 244px; vertical-align: top; }
.col + .col { font-size: 17px; padding-left: 50px; }

/* contact-form */
.contact-form { background-color: #f8f8f8; border-top: 9px solid #009999; max-width: 600px; padding: 30px 51px; margin: 0 auto; font-family: 'Arvo', serif; position: relative; }
.contact-form h2 { font-size: 29px; padding-bottom: 30px; font-weight: normal; }
.contact-form p { color: #666; padding-bottom: 34px; }
.field { display: block; width: 382px; border: 0; background-color: #fff; padding: 15px 13px; margin: 0 auto; font-family: 'Open Sans', sans-serif; font-size: 14px; margin-bottom: 9px; }
.field:focus { outline: 0; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5); }
textarea.field { resize: none; height: 160px; }

.submit { display: block; background-color: #009999; border: 0; width: 194px; height: 41px; margin: 0 auto; font-family: 'Arvo', serif; font-size: 19px; color: #fff; cursor: pointer; margin-top: 22px; }
.submit:hover { background-color: #007d7d; }


/* ==========================================================================
   Media Queries
   ========================================================================== */

@media (max-width: 1200px) {
    .shell { width: 960px; }
}

@media (max-width: 979px) {
    .shell { width: 90%; padding: 0 5%; }
    .header .shell { width: 90%; padding: 0 5%; }
    .main .shell { width: 90%; padding: 0 5%; }

    .intro { font-size: 21px; }

    .video a { font-size: 20px; }
    .video span { margin-top: -5%; }
    .video span img { width: 10%; }

    .links,
    .contacts,
    .contacts h3 { font-size: 19px; }
    .links { margin-bottom: 20px; }
    .links p { padding-bottom: 20px; }
    .about { padding-bottom: 10px; }
    .socials { margin-bottom: 20px; }
    
    .clients { margin-bottom: 20px; }
    .clients h2,
    .founders h2 { font-size: 23px; padding-bottom: 10px; }
}

@media (max-width: 767px) {
    body { font-size: 14px; }

    .navigation { text-align: center; }

    .header { padding: 20px 0; }
    .logo a { width: 280px; height: 100px; margin: 0 auto; }
    .intro { text-align: center; }
    .intro { font-size: 19px; }
    .intro p { display: inline; }

    .video a { font-size: 15px; word-spacing: 4px; }

    .links,
    .contacts,
    .contacts h3 { font-size: 17px; }
    .links { margin-bottom: 10px; }
    .about { padding-bottom: 0; }
    .socials { margin-bottom: 10px; }
    
    .design,
    .footer-nav { display: none; }
    .scroll-top { display: block; width: 100%; height: 120px; margin-top: 0; }
    .footer-bottom .shell { width: 100%; padding: 0; }

    .banner { margin-bottom: 20px; }
    .founders { padding-bottom: 0; }
    
    .contact-form { padding: 30px 20px; }
    .contact-form p,
    .contact-form h2 { padding-bottom: 10px; }
    .field { width: 96%; padding: 15px 2%; }
}

@media (max-width: 640px) {
    .founders h2 { display: none; }
    .founders .col { text-align: center; }
    .col { display: block; margin: 0 auto; font-size: 15px; }
    .col + .col { padding-left: 0; }
}

@media (max-width: 480px) {
    .navigation { padding: 0; border-bottom: 0; font-size: 17px; }
    .navigation .shell { width: 100%; padding: 0; }
    .navigation ul { display: none; padding: 0; }
    .navigation li { display: block; padding: 5px 0 4px; }
    .navigation li + li { padding-left: 0; border-top: 1px solid #ddecec; }
    .navigation li a { display: block; }
    .nav-btn { display: block; }

    .video a { font-size: 12px; }
    .video span { margin-top: -7%; }
    .video span img { width: 15%; margin-bottom: 0; }
}

@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
    .logo a { background-image: url(../img/logo@2x.png); background-size: 100% 100%; }
    .nav-btn span { background-image: url(../img/nav-plus@2x.png); background-size: 100% 100%; }
    .open .nav-btn span { background-image: url(../img/nav-minus@2x.png); }
    .scroll-top { background-image: url(../img/scrolltop@2x.png); background-size: 73px 73px; }

    button.mfp-close { background-image: url(../img/close@2x.png); background-size: 100% 100%; }
    .mfp-ajax-holder .mfp-close { background-image: url(../img/close-ajax@2x.png); }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}