*,:before,:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}


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

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

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

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


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

html {background: #f9f9f9; font-family: 'DIN Alternate', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 400; color: #000; line-height: 16px;}

html, body, .main-wrapper, .wrapper, .main {height: 100%;}

::-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: #000; text-decoration: none; -webkit-transition: color 0.6s ease-out; -moz-transition: color 0.6s ease 0s; -o-transition: color 0.6s ease 0s; transition: color 0.6s ease 0s;}
a:hover {font-weight: 500;}

h1 {margin: 0 0 10px; font-size: 18px; font-weight: 400; line-height: 22px;}
h1 span {display: block; font-weight: 300;}
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: 12px; font-weight: 400;}

.main {margin-left: 180px; padding: 23px 20px 20px;}

a.active {font-weight: 500;}


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

header {width: 180px; height: 100%; padding: 20px; background: #f9f9f9; position: fixed; top: 0; left: 0;}

header nav {overflow: hidden;}
header nav ul {margin: 0; padding: 0; list-style: none; overflow: hidden; text-transform: lowercase;}
.menu-bt {display: none;}

.logo {position: fixed; bottom: 100px;}
.logo img {width: 38px;}


.welcome header {display: none; background: none; z-index: 9999;}
.welcome header nav a {color: #FFF;}
.welcome header .logo {display: none;}



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

.home-slider {width: 100%; height: 100%; background: #f9f9f9; position: fixed; top: 0; left: 0;}
.slide {width: 100%; height: 100%; position: relative;}
.video_contain {width: 200%; height: 200%; position: absolute; top: -50%; left: -50%;}
video {min-width: 50%; min-height: 50%; margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

.home-logo {display: none; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 9999;}
.home-logo img {width: 60vw;}



/* ==========================================================================
   grid
   ========================================================================== */

.grid-sizer {display: none;}

.grid-item.isotope-hidden {opacity: 0;}

.col-1-3 {width: 33.333%; padding: 0 20px 20px 0; float: left;}
.col-1-3 .main-img {width: 100%; margin-bottom: 10px; -webkit-transition: opacity .6s ease-in-out; -moz-transition: opacity .6s ease-in-out; -o-transition: opacity .6s ease-in-out; transition: opacity .6s ease-in-out;}

.col-1-4 {width: 24%; padding: 0 20px 60px 0; float: left;}
.col-1-4 .main-img {width: 70%; height: 130px; margin-bottom: 10px; background-size: contain; background-position: bottom left; background-repeat: no-repeat; -webkit-transition: opacity .6s ease-in-out; -moz-transition: opacity .6s ease-in-out; -o-transition: opacity .6s ease-in-out; transition: opacity .6s ease-in-out;}

.ajax-call:hover h2 {font-weight: 500;}
.ajax-call:hover img {opacity: 0.6;}
.ajax-call:hover .main-img {opacity: 0.6;}

.project {height: 100%; padding: 20px; background: #3a3a3a; color: #FFF; overflow-x: hidden;}
.project .content {width: 360px; float: left;}
.project .content h1 {width: 360px; margin-bottom: 40px;}
.project .text {width: 360px; position: absolute; bottom: 20px;}
.project .media {width: calc(100vw - 640px); margin: 0 0 0 20px; float: right;}
.project .media img {max-width: 100%; max-height: 80vh; margin-bottom: 20px;}
.project .media .media-img:last-child img {margin-bottom: 0;}

.project .go-back {margin-right: 10px; color: #FFF; position: fixed;}
.project .go-back i {margin-right: 10px; color: #FFF;}

.project-overlay {width: calc(100% - 180px); height: 100%; background: #3a3a3a; position: fixed; right: 0; top: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); -webkit-transition: transform .6s ease-in-out; -moz-transition: transform .6s ease-in-out; -o-transition: transform .6s ease-in-out; transition: transform .6s ease-in-out; z-index: 999;}
.project-overlay.active {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}

body.pages p {margin: 0 0 10px;}

.main.page {width: 50%; padding: 23px 20px 20px;}
.main.page .main-img {width: 50%; padding: 0 20px 30px 0;}
.main.page .main-img.contacts {width: 100%;}
.main.page .text {font-size: 18px; line-height: 22px;}

.info {width: calc(50% - 20px); margin-right: 40px; padding: 20px 0; float: left;}
.info:last-child {margin-right: 0; }


body.page-2 .main .text {font-weight: 300;}
body.page-2 .main .text strong {font-weight: 400;}

body.project-open {overflow: hidden;}


/* ==========================================================================
   Archive
   ========================================================================== */

.archive-toolbar {height: 16px; margin-top: -3px; margin-bottom: 20px; text-transform: lowercase;}
.archive-toolbar-item {float: left;}
.archive-toolbar-item i {margin-left: 10px;}
.archive-toolbar-item a {float: left;}

.year {margin-right: 10px; position: relative;}
.year-items {display: none; width: 100%; padding: 10px; background: #000; position: absolute; top: 20px; left: 0; z-index: 10;}
.year-items a {color: #FFF;}

.typology-items {display: none; float: left;}
.typology-items a {margin-left: 10px;}


.project .go-back, .project .h1, .project .text, .project .media-img {display: none;}


.page .text, .page .info {display: none;}

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

footer {position: fixed; bottom: 20px; left: 20px;}
.welcome footer {display: none; color: #FFF; z-index: 9999;}
.welcome footer a {color: #FFF;}

footer .langs {margin-bottom: 10px;}



/* ==========================================================================
   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 (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (max-width: 1630px) {
    .singular {max-width: 1000px;}
}

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

    header {width: 100px; z-index: 9;}

    .logo img {width: 35px;}
    .main {margin-left: 100px; padding: 20px 0;}
    .col-1-3, .col-1-4 {width: 100%; padding: 0 20px 30px 0; float: none; clear: both;}

    .home-anim h1 {font-size: 36vw;}

    .home-logo img {width: 80vw;}

    header nav ul {display: none; width: 200px; height: 100%; margin: 0; padding: 20px; background: #f9f9f9; position: fixed; top: 0; left: -200px; z-index: 999;}
    header nav li {display: block; margin: 0!important; float: none;}
    header nav ul a {display: block; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
    header nav ul a:hover {color: #FFF;}

    .cycle-slideshow {background: #333;}
    .cycle-slideshow .slide {opacity: 0.5!important;}

    .menu-bt {display: block; padding: 20px; font-size: 21px; text-align: right; position: absolute; top: 0; left: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
    .menu-open .menu-bt {width: calc(100% - 200px); height: 100%;}

    .welcome header nav li a {color: #000;}

    .welcome.menu-open footer, .welcome.menu-open footer a {color: #000;}

    .main.page {width: calc(100% - 100px); height: auto; padding: 20px 20px 40px;}

    h1, .main .text {font-size: 18px; line-height: 20px;}

    .main.page .main-img {width: 100%; padding: 0 0 30px 0;}

    .info, .project .content, .project .media {width: 100%; margin: 0; padding: 20px 0 0; float: none;}

    .project .content {padding-top: 0;}

    .project-overlay {width: 100%; -webkit-overflow-scrolling: touch;}
    .project .content h1, .project .text, .project .go-back {width: 100%; margin-top: 20px; position: static; -webkit-transform: translateY(0); -ms-transform: translateY(-0); transform: translateY(0);}

    footer {z-index: 9;}

    .home-slider {z-index: 999;}

    table td {display: block; width: 100%!important; margin-bottom: 30px;}

    .typology {margin-right: 10px; position: relative;}
    .typology-items {display: none; width: 140px; padding: 10px; background: #000; position: absolute; top: 20px; left: 0; z-index: 10;}
    .typology-items a {display: block;
        width: 100%; margin-left: 0; color: #FFF;}

    #map {height: 350px!important;}


}



@media only screen and (max-width: 700px) and (orientation:landscape) {

    .project-overlay {width: calc(100% - 100px); -webkit-overflow-scrolling: touch;}

    .col-1-3 {width: 50%;}
    .col-1-4 {width: 33.333%; padding: 0 20px 20px 0;}
    .col-1-4 .main-img {height: 90px;}

    table td {display: table-cell; width: 50%!important; margin-bottom: 0;}

    #map {height: 240px!important;}

}



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

    .project-overlay {width: calc(100% - 100px); -webkit-overflow-scrolling: touch;}

    .col-1-3 {width: 50%;}
    .col-1-4 {width: 33.333%; padding: 0 20px 20px 0;}
    .col-1-4 .main-img {height: 90px;}

    table td {display: table-cell; width: 50%!important; margin-bottom: 0;}

}


@media only screen and (max-height: 320px) {

    .logo {bottom: 80px;}
    .logo img {width: 34px;}

}

@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: #000 !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;}
}