*,:before,:after { -webkit-box-sizing: border-box; box-sizing: border-box; }
* { -webkit-font-smoothing: antialiased; }

@font-face { 
    font-family: 'Campton';
    src: url('../fonts/CamptonBook.eot');
    src: url('../fonts/CamptonBook.eot') format('embedded-opentype'),
         url('../fonts/CamptonBook.woff2') format('woff2'),
         url('../fonts/CamptonBook.woff') format('woff'),
         url('../fonts/CamptonBook.ttf') format('truetype'),
         url('../fonts/CamptonBook.svg#CamptonBook') format('svg');
    font-weight: 400;
 }

@font-face { 
    font-family: 'Campton';
    src: url('../fonts/CamptonMedium.eot');
    src: url('../fonts/CamptonMedium.eot') format('embedded-opentype'),
         url('../fonts/CamptonMedium.woff2') format('woff2'),
         url('../fonts/CamptonMedium.woff') format('woff'),
         url('../fonts/CamptonMedium.ttf') format('truetype'),
         url('../fonts/CamptonMedium.svg#CamptonMedium') format('svg');
    font-weight: 500;
 }

@font-face { 
    font-family: 'Campton';
    src: url('../fonts/CamptonSemiBold.eot');
    src: url('../fonts/CamptonSemiBold.eot') format('embedded-opentype'),
         url('../fonts/CamptonSemiBold.woff2') format('woff2'),
         url('../fonts/CamptonSemiBold.woff') format('woff'),
         url('../fonts/CamptonSemiBold.ttf') format('truetype'),
         url('../fonts/CamptonSemiBold.svg#CamptonSemiBold') format('svg');
    font-weight: 600;
 }

@font-face { 
    font-family: 'Campton';
    src: url('../fonts/CamptonBold.eot');
    src: url('../fonts/CamptonBold.eot') format('embedded-opentype'),
         url('../fonts/CamptonBold.woff2') format('woff2'),
         url('../fonts/CamptonBold.woff') format('woff'),
         url('../fonts/CamptonBold.ttf') format('truetype'),
         url('../fonts/CamptonBold.svg#CamptonBold') format('svg');
    font-weight: 700;
 }


/* ==========================================================================
   Base styles
   ========================================================================== */

html { font-family: 'Campton', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; color: #231f20; line-height: 1.4; }
body { background: #FFF; -webkit-transition: opacity 800ms; transition: opacity 800ms; }

body.is-not-visible { opacity: 0; }

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

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

audio, canvas, iframe, img, svg, video { vertical-align: middle; }

fieldset { margin: 0; padding: 0; border: 0; }
textarea { resize: vertical; }



/* ==========================================================================
   General
   ========================================================================== */

a { color: #231f20; text-decoration: none; -webkit-transition: color 0.6s ease-out; -webkit-transition: color 0.6s ease 0s; transition: color 0.6s ease 0s; }
a:hover, a.active { font-weight: 700; }

h1 { margin: 0 0 10px; font-size: 24px; font-weight: 700; letter-spacing: 0.064em; text-transform: uppercase; line-height: 1.2; }
h2 { margin: 0; font-size: 12px; font-weight: 400; }
h3 { margin: 0; font-size: 12px; font-weight: 400; }
h4, h5, h6 { margin: 0 0 10px; font-size: 10px; font-weight: 400; text-transform: uppercase; }


b, strong { font-weight: 600; }


.cc_cookies_page .cc_used_cookies_container {text-align: left}
.cc_main_text {margin-bottom: 60px;}
.cc_cookies_page h2 {font-size: 18px; margin: 20px 0px;}

/* ==========================================================================
   Header
   ========================================================================== */

header { height: 60px; padding: 0 40px; background: #FFF; position: fixed; top: 0; right: 0; left: 0; z-index: 999; }

    .welcome header { border: none; position: static; }
    .projects header { border-bottom: 1px solid rgba(0, 0, 0, 0.3); }

    header h1 { width: 180px; margin: 0; position: fixed; top: 16px; left: 40px; }
        header h1 img { width: 100%; }

    .nav-icon { display: none; width: 30px; height: 26px; cursor: pointer; position: absolute; top: 18px; right: 20px; z-index: 999; -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; -webkit-transform: rotate(0deg); transform: rotate(0deg); }
        .nav-icon span { display: block; width: 100%; height: 4px; background: #000; opacity: 1; position: absolute; left: 0; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;-webkit-transform: rotate(0deg); transform: rotate(0deg);  }
        .nav-icon span:nth-child(1) { top: 0; }
        .nav-icon span:nth-child(2), .nav-icon span:nth-child(3) { top: 10px; }
        .nav-icon span:nth-child(4) { top: 20px; }
        .open-nav .nav-icon span:nth-child(1) { width: 0; top: 14px; left: 50%; }
        .open-nav .nav-icon span:nth-child(2) { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
        .open-nav .nav-icon span:nth-child(3) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
        .open-nav .nav-icon span:nth-child(4) { width: 0; top: 14px; left: 50%; }

    header nav { padding-top: 24px; }
        header nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; margin: 0; padding: 0; list-style: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
        header nav ul li { margin: 0 15px; }
        header nav ul li a { font-size: 15px; letter-spacing: 0.100em; text-transform: uppercase; }
        .menu-bt { display: none; }
        header nav .social-icons { display: none; }

    header .right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; position: fixed; top: 20px; right: 40px; }

        .lang { margin-right: 10px; font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.080em; text-align: right; }

        .social-icons { font-size: 18px; font-weight: 500; color: #FFF; letter-spacing: 0.080em; }
            .social-icons a { margin-left: 20px; }


/* ==========================================================================
   Home Slider
   ========================================================================== */

.home-slider { width: 100vw; height: calc(100vh - 60px); }
    .cycle-slideshow { width: 100%; height: 100%; }
    .slide { display: none; width: 100%; height: 100%; position: relative; }
    .first-slide { display: block; }

.home-logo { width: 70%; text-align: center; opacity: 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity 800ms; transition: opacity 800ms; z-index: 9999; }
    .home-logo.is-visible { opacity: 1; }
    .home-logo img { width: 60vw; max-width: 800px; }

    .home-logo  .mobile { width: 200px; position: absolute; bottom: -50px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }


/* ==========================================================================
   Pages
   ========================================================================== */

.wrapper { padding-bottom: 40px; }
    .welcome .wrapper { padding-bottom: 0; }

.main { min-height: calc(100vh - 60px - 40px); margin-top: 60px; }
    .welcome .main { margin: 0 40px; }
    .projects .main { margin: 110px 40px 0; }
    .has-nav { min-height: calc(100vh - 110px - 40px); margin-top: 110px; }

.page { display: -webkit-box; display: -ms-flexbox; display: flex; }

    .page-1 .page, .team .page { display: block; }

    .page nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 50px; max-height: 50px; background: #FFF; border-top: 1px solid #222; position: fixed; top: 60px; right: 0; left: 0; z-index: 9999; }
    .page nav a { margin: 0 15px; font-size: 14px; letter-spacing: 0.064em; text-transform: uppercase; }

    .page .left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 50%; overflow-y: auto; }
    .page .right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 50%; }
    .page .full { width: 100%; }

    .full .left { height: auto; }
        .full .left .content { width: 80%; margin: 0; padding: 0; text-align: left; }

        .full .left .content h1 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 0.064em; text-transform: uppercase; text-align: center; }
        .full .left .content h2 { margin: 0 0 40px; font-size: 14px; font-weight: 500; letter-spacing: 0.064em; text-transform: uppercase; text-align: center; }
    .full .right { height: auto; }
        .full .main-img { padding-bottom: 68%; }

    .restrict-columns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin: 60px; }

    .page .align-left { text-align: left; }

    .page .content { width: 80%; padding: 40px 20px; font-size: 15px; font-weight: 400; line-height: 1.4; }
    .full .content { width: 100%; max-width: 970px; margin: 0 auto; text-align: center; }

    .page table { border-top: 1px solid #FFF; }
    .page table td { width: 33.3333333%; padding: 40px 20px 0 0; font-size: 14px; vertical-align: top; }

    .page .content h3 { font-size: 14px; font-weight: 500; text-transform: uppercase; }

    .page .content .fa { margin: 0 6px; text-indent: -9999px; }
    .page .content .fa:hover { cursor: pointer; }
    .page .content .fa:before { text-indent: 0; float: left; }

    .page .right .main-img, .page .right .cycle-slideshow { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
    .page .main-img, .page .slide { width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; }
    .page-1 .slide { padding-bottom: 62%; }

    cite { display: block; margin-top: 30px; font-size: 10px; font-style: normal; text-transform: uppercase; text-align: center; }

.team .page .full { background: none; }

.team-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 100px 30px 60px; color: #231f20; }

    .person { width: 25%; padding: 15px; -webkit-transition: opacity 800ms; transition: opacity 800ms; }
        .person:hover { opacity: 0.6; }
        .person.is-expanded:hover { opacity: 1; }
        .person h1 { margin: 0; text-align: center; }
        .person h2 { margin: 0 0 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.064em; text-transform: uppercase; text-align: center; }
        .person img { width: 100%; }
        .person .text { font-size: 15px; font-weight: 400; line-height: 1.4; }

#cd-google-map { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 100%; height: 100%; }
#google-container { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 100%; height: 100%; }

#cd-google-map address { position: absolute; bottom: 50px; left: 50px; border-radius:3px; padding:30px; background-color: rgba(255, 255, 255, 0.9); font-family: 'Roboto'; font-weight:400; font-size: 15px; line-height:23px; letter-spacing:1px; color:#747474; text-align: left;}
#cd-zoom-in, #cd-zoom-out { height: 32px; width: 32px; cursor: pointer; margin-left: 10px; background-repeat: no-repeat; background-size: 32px 64px; opacity:.7; background-color:#000000; -webkit-transition: all 300ms linear; transition: all 300ms linear; color: #FFF; font-size: 18px; line-height: 32px; text-align: center; }
#cd-zoom-out { font-size: 24px; }
.no-touch #cd-zoom-in:hover, .no-touch #cd-zoom-out:hover { opacity:1; }
#cd-zoom-in:hover, #cd-zoom-out:hover { opacity:1; }
@media only screen and (min-width: 768px) {
  #cd-zoom-in, #cd-zoom-out { margin-left: 50px; }
}
#cd-zoom-in { background-position: 50% 0; margin-top: 50px; margin-bottom: 1px; }
#cd-zoom-out { background-position: 50% -32px; }


.main.page blockquote { text-align: center; }
    .main.page blockquote p { margin: 65px 0 30px; font-size: 65px; font-weight: 700; line-height: 68px; letter-spacing: 4px; }
    .main.page blockquote h2 { font-size: 18px; font-weight: 600; line-height: 22px; letter-spacing: 1px; }
    .main.page blockquote h3 { margin-bottom: 20px; font-size: 18px; font-weight: 400; line-height: 22px; }

.info { width: calc(50% - 20px); margin-right: 40px; padding: 20px 0; float: left; }
    .info:last-child { margin-right: 0;  }
    .info p { font-size: 18px; line-height: 22px; }


/* ==========================================================================
   Projects
   ========================================================================== */

.portfolio-categories { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 50px; max-height: 50px; background: #FFF; position: fixed; top: 60px; right: 0; left: 0; z-index: 9999; }
    .portfolio-categories a { margin: 0 15px; font-size: 14px; letter-spacing: 0.064em; text-transform: uppercase; }

.portfolio { margin: 0 -10px 40px; overflow: hidden; }
    .project { width: 20%; padding: 10px; opacity: 0; text-align: center; float: left; -webkit-transition: opacity 200ms; transition: opacity 200ms; }
        .project.is-visible { opacity: 1; }
        .project:nth-child(5n+1) { clear: left; }
        .project a { display: block; -webkit-transition: opacity 600ms; transition: opacity 600ms; }
            .project a:hover { opacity: 0.7; }

        .thumb { width: 100%; padding-bottom: 66.6%; background-position: center; background-size: cover; background-repeat: no-repeat; }
        .project img { width: 100%; }
        .project h2 { margin: 20px 0 0; font-size: 14px; font-weight: 500; color: #000; letter-spacing: 0.080em; }
        .project h3 { font-size: 10px; font-weight: 400; color: #000; letter-spacing: 0.080em; text-transform: uppercase; }

.project-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; height: calc(100vh - 110px - 40px); }

    .project-media { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: calc(100% - 280px); -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
        .project-media .cycle-slideshow { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 100%; }
        .project-media .slide { height: 100%; background-repeat: no-repeat; background-position: center right; background-size: contain; }

    .project-main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 280px; padding: 0 20px; text-align: center; position: relative; }

        .project-content { margin: 40px 0; }

        .project-main h1 { margin: 0; }
        .project-main .subtitle { font-size: 14px; color: #000; letter-spacing: 0.064em; line-height: 1.4; }
            .project-main .subtitle p { margin: 0; }
        .project-main .text p { font-size: 10px; font-weight: 400; color: #000; letter-spacing: 0.080em; text-transform: uppercase; }

        .project-back { font-size: 10px; font-weight: 400; color: #000; letter-spacing: 0.080em; text-transform: uppercase; }

        .media-nav {  }
            .media-nav img { width: 10px; }
            .media-nav span { display: inline-block; margin: 0 10px; cursor: pointer; }


/* ==========================================================================
   Footer
   ========================================================================== */

footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 40px; padding: 0 40px; background: #FFF; font-size: 10px; font-weight: 400; color: #000; letter-spacing: 0.080em; text-transform: uppercase; position: fixed; right: 0; bottom: 0; left: 0; z-index: 99999; }

    .welcome footer { background: none; color: #FFF; }
    .welcome footer a { color: #FFF; }

    footer .logo-black { display: block; }
    footer .logo-white { display: none; }

    footer .right img { width: 260px; }

    footer .social-icons { display: none; }


/* ==========================================================================
   Isotope
   ========================================================================== */

.grid-sizer, .grid-item { width: 25%; }
.grid-sizer { display: none; }

.grid-item { float: left; }
.grid-item .text { display: none; }

.grid-item .grid-item-content { cursor: pointer; }

.grid-item.is-expanded { width: 50%; z-index: 2; }
.grid-item.is-expanded .text { display: block; }


/* ==========================================================================
   Embed Video
   ========================================================================== */

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; visibility: visible!important; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; visibility: visible!important; }


/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

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

    header { padding: 0 20px; z-index: 9999999; }

        header h1 { top: 18px; left: 20px; }

        header .nav-icon { display: block; z-index: 99999999; }

        header nav { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; margin: 0; padding: 20px; background: #232323; position: fixed; top: 0; left: -100%; -webkit-transition: all 1200ms; transition: all 1200ms; z-index: 9999999; }
        header nav ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
        header nav ul li { margin: 15px 0; }
        header nav ul li a { font-size: 20px; color: #FFF; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
        header nav ul a:hover { color: #FFF; }

        header nav .social-icons { display: block; margin: 0; text-align: center; position: absolute; right: 0; bottom: 20px; left: 0; }
            header nav .social-icons a { color: #FFF; }

        header .right { display: none; }

        .open-nav header nav { display: -webkit-box; display: -ms-flexbox; display: flex; left: 0; }
        .open-nav header .nav-icon span { background: #FFF; }

    .page { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-bottom: 80px; }
        .page .left, .page .right { width: 100%; }
        .page .cycle-slideshow, #cd-google-map { height: calc(100vh - 100px); }
        .page-1 .cycle-slideshow { height: auto; }

        .page .content { width: 100%; }

        .page-4 .left { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
        .page-4 .right { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }

        .page table, .page table tbody, .page table tr, .page table td { display: block; width: 100%; }
        .page table td { padding: 40px 0 0; text-align: center; }

        .full .align-left-mobile { text-align: left; }

    .team-grid { margin: 100px 20px 60px }
        .person { padding: 15px 0; }

        .grid-sizer, .grid-item, .grid-item.is-expanded { width: 100%; }
        .grid-item .text { display: block; }

    .projects .main { margin: 80px 0 0; }

        .portfolio { margin: 0 0 40px; }

        .portfolio-categories { display: none; -ms-flex-wrap: wrap; flex-wrap: wrap; height: 70px; max-height: 70px; padding: 20px 0; }
            .portfolio-categories a { margin: 2px 8px; }

        .project { width: 100%; padding: 10px 20px; }

        .project-wrap { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

            .project-media { -webkit-box-flex: 1; -ms-flex: 1 0 70vh; flex: 1 0 auto; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; width: 100%; height: auto; padding: 0 0 20px; }
                .project-media .slide { background-position: center; padding-bottom: 136%; }
            .project-main { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; width: 100%; padding-bottom: 40px; }
                .project-main .media-nav { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; margin-bottom: 20px; }
                .project-main .project-back { display: none; }
                .project-main .project-content { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }

    footer { display: block; height: auto; padding: 10px; text-align: center; bottom: 0; }
        .copy span { display: none; }

}


@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) { 
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print { 
    *, *:before, *:after { background: transparent !important; color: #232323 !important; -webkit-box-shadow: none !important; 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) ")"; }
    a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; }
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    thead { display: table-header-group; }
    tr, img { page-break-inside: avoid; }
    img { max-width: 100% !important; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3 { page-break-after: avoid; }
}