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

@font-face {
    font-family: 'CamptonBook';
    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: normal;
}

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


.text table h2 {opacity: 1!important; display: block!important; color: #000!important; visibility: visible!important; transform: translateY(0px) scale(1)!important}
/* ==========================================================================
   GRID
   ========================================================================== */

[class*='mgrid'],
[class*='col_'],
[class*='mobile-'],
.mgrid:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

[class*='col_'] {
    float: left;
    min-height: 1px;
    padding-right: 60px
}

[class*='col_'] [class*='col_']:last-child {
    padding-right: 0
}

.mgrid {width: 100%;margin: 0 auto;overflow: hidden}
.mgrid:after { content: ""; display: table; clear: both}
.mgrid-pad {padding-top: 0px; padding-left: 60px; padding-right: 0}


.col_1 {width: 100%; padding: 0px; float: none}
.col_1_2{width: 50%}
.col_1_3 {width: 33.33%}

.col_1, .col_1_2, .col_1_3 {margin-bottom: 60px;}
.col_1 img, .col_1_2 img, .col_1_3  img {width: 100%;}
.col_1_2:nth-child(2n+1) {clear: left;}



.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



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

html {font-family: 'CamptonBook', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; color: #000; letter-spacing: 2px; line-height: 1.2;}

html, body, .main-wrapper, .wrapper {position: relative;}

.main-wrapper {min-height: 120vh; overflow: hidden;}

::-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;}

h1 {margin: 0 0 10px; font-size: 30px; font-weight: normal;}
h2 {margin: 0; font-size: 12px; font-weight: normal; line-height: 1.4;}
h3 {margin: 0; font-size: 12px; font-weight: normal; line-height: 1.4;}
h4, h5, h6 {margin: 0 0 10px; font-size: 12px; font-weight: normal;}

.main {margin-bottom: 60px; padding: 0px 46px 0 43px; overflow: hidden;}



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

header {width: 100%; padding: 50px 40px 40px;}
.welcome header {position: fixed; top: 0; left: 0; z-index: 999;}

header nav {width: 100%; position: relative; z-index: 999;}
header nav ul {display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; overflow: hidden;}
header nav li {vertical-align: top; -webkit-transition: all 1.2s ease-out; -moz-transition: all 1.2s ease 0s; -o-transition: all 1.2s ease 0s; transition: all 1.2s ease 0s;}
header nav li a {font-size: 28px; font-weight: normal; text-transform: uppercase; letter-spacing: 4px;}
header nav li a:hover, header nav li a.active {text-decoration: underline;}
.stretch {width: 100%; display: none; font-size: 0; line-height: 0;}
.menu-bt {display: none;}

.logo {display: block; width: 400px; height: 392px; margin: -196px 0 0 -200px; background: url('../img/studio-astolfi-logo.png') no-repeat center; background-size: 400px 392px; position: fixed; top: 50%; left: 50%; -webkit-transition: all 1.2s ease-out; -moz-transition: all 1.2s ease 0s; -o-transition: all 1.2s ease 0s; transition: all 1.2s ease 0s; z-index: 9999;}
.logo.change-elem-white {background-image: url('../img/studio-astolfi-logo-white.png');}
.logo.change-elem-black {background-image: url('../img/studio-astolfi-logo.png');}

.jq-clipthru-clone {clip: auto!important;}
.jq-clipthru-clone:nth-child(3) {display: none!important;}
.logo.jq-clipthru-origin:first-child {opacity: 0;}

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


.welcome header.change-elem-white nav a {color: #FFF;}
.welcome header.change-elem-black nav a {color: #000;}


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

.home-slider {width: 100%; height: 100%; background: #FFF;}
.slide {display: flex; width: 100%; height: 100vh!important; position: relative; justify-content: center; align-items: flex-end;}
.slide .text {margin-bottom: 70px; text-align: center;}
.slide .text h1 {margin-bottom: 20px; font-size: 22px; letter-spacing: 4px; text-transform: uppercase;}
.slide .text h2 {font-size: 12px;}
.slide .text h1 a:hover {text-decoration: underline;}

.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;}


.arrow {width: 100%; text-align: center; position: absolute; bottom: 30px;}
.arrow img {width: 50px;}



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

.grid {display: none; margin: 0px -20px; position: relative;}

.grid-sizer {display: none!important;}

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

.col-1-3 {width: 33.333%; margin-bottom: 32px; padding: 0 20px; float: left; position: relative;}
.col-1-3:nth-child(3n-1) {clear: left;}

.col-1-4 {display: inline-block; margin-bottom: 32px; padding: 0 20px; float: left; position: relative;}

.col-1-3 .ajax-call, .col-1-4 .ajax-call {display: block;}

.grid-item {-webkit-transition: background 0.6s ease-out; -moz-transition: background 0.6s ease 0s; -o-transition: background 0.6s ease 0s; transition: background 0.6s ease 0s;}
.grid-item h2 {margin: 0 0 10px;}
.grid-item h2.subtitle {margin: 10px 0 0; font-weight: normal; text-align: center;}

.img-hover {display: inline-block; background-position: center; background-size: cover;}
.grid-item:hover .img-hover img {visibility: hidden;}

.grid.table {width: 100%; left: 0;}
.table .grid-item {display: flex; align-items: center; width: 100%; padding: 8px 0; border-bottom: 1px solid #000; overflow: hidden; float: none;}
.table .col-1-2 {width: 50%; padding: 0; float: left;}
.table .col-1-3 {width: 33.333%; padding: 0; float: left;}
.table .grid-item h2 {display: block; height: auto; margin: 0; padding: 0 30px 0 0; font-size: 15px; position: static;}
.table .grid-item h3 {margin: 0; padding: 2px 0 2px 10px; font-weight: normal; color: #000; text-align: right;}
.table .grid-item h3 a:hover {text-decoration: underline;}

.grid.press .grid-sizer, .grid.press .col-1-4 {width: 25%;}
.grid.press .col-1-4 {margin: 0 0 30px;}
.grid.press .col-1-4 img {width: 100%;}
.grid.press .col-1-4:nth-child(4n+1) {clear: left;}

.grid.press .col-1-4 .ajax-call {-webkit-transition: opacity 0.6s ease-out; -moz-transition: opacity 0.6s ease 0s; -o-transition: opacity 0.6s ease 0s; transition: opacity 0.6s ease 0s;}
.grid.press .col-1-4 .ajax-call:hover {opacity: 0.5;}

/*

.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: 100%; height: 100%; background: #FFF; 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; overflow-y: scroll; z-index: 999999;}
.project-overlay.active {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}

.go-back {margin-top: 30px;}

.border-top {width: 100%; height: 8px; background: #FFF100; position: absolute; top: 0; left: 0;}
.border-right {width: 8px; height: 100%; background: #FFF100; position: absolute; top: 0; right: 0;}
.border-bottom {width: 100%; height: 8px; background: #FFF100; position: absolute; bottom: 0; left: 0;}
.border-left {width: 8px; height: 100%; background: #FFF100; position: absolute; top: 0; left: 0;}

.project h1 {margin-bottom: 30px; text-align: center; text-transform: uppercase;}
.project h2 {font-size: 14px; text-align: center; text-decoration: underline;}
.project-show h2, .project-show h3 {font-size: 14px;}
.project .text {width: 440px; font-weight: normal; float: left;}
.project .text h2 {text-align: left;}
.project .text p, .smaller.text {font-size: 14px; font-weight: normal; line-height: 20px;}

.smaller {width: 60%; margin: 0px auto 60px auto;}

.project a:hover {text-decoration: underline;}

#project {position: relative;}

.main-img-full {position: relative; z-index: 9;}

.related-projects {margin: 0 80px; position: relative;}
.related-project .ajax-call {display: block; padding: 10px 10px 5px; border: 2px solid transparent;}
.related-project .ajax-call:hover {border: 2px solid #FFF100;}

.related-project {margin: 0; padding: 0; vertical-align: top; white-space: normal; float: none;}

.related-project h2 {margin: 10px 0 0; font-size: 12px;}
.related-project img {height: 182px;}

.related-left {width: 40px; height: 100%; background: #FFF url('../img/arrow-prev.png?v=2') no-repeat left 95px; background-size: 30px; cursor: pointer; position: absolute; top: 0; left: -50px; z-index: 99;}
.related-right {width: 40px; height: 100%; background: #FFF url('../img/arrow-next.png?v=2') no-repeat right 95px; background-size: 30px; cursor: pointer; position: absolute; top: 0; right: -50px; z-index: 99;}

.project-show h1 + h2 {text-decoration: none;}

.related-wrap {min-height: 250px; position: relative; overflow: hidden;}

.prev-new a:hover {text-decoration: underline;}
    
body.pages p {margin: 0 0 10px;}

.main.page {width: 100%;}
.main.page .main-img {width: 50%; padding: 0 20px 30px 0;}
.main.page .main-img.contacts {width: 100%;}
.main.page .highlight {width: 50%; font-size: 25px; font-weight: normal; float: left;}
.main.page .highlight table {font-size: 12px; font-weight: normal;}
.main.page .text {width: 50%; float: left;}
.main.page a {text-decoration: underline;}
.main.page a:hover {text-decoration: none;}

table td {vertical-align: top;}

.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: normal;}
body.page-2 .main .text strong {font-weight: normal;}

body.project-open {overflow: hidden;}

.items-col {margin-right: 30px; float: left;}
.items-col:last-child {margin-right: 0;}


.project-show header, .project-show .logo, .project-show .rotate-left, .project-show .rotate-right, .project-show footer {display: none;}
.pages header, .pages .logo, .pages .rotate-left, .pages .rotate-right, .pages footer {display: none;}

.project-show .rotate-right.share {display: block; margin-top: -6px; right: 0px; z-index: 999;}


.lock-logo .logo {width: 90px; height: 90px; margin: 0 0 0 -45px; background-size: 100%; top: 18px; position: absolute;}
.lock-logo header {margin-top: 90px}
/*.lock-logo header nav li:nth-child(2) {margin-right: 60px;}
.lock-logo header nav li:nth-child(3) {margin-left: 60px;}*/


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

.archive-toolbar {display: none; margin-bottom: 30px; overflow: hidden;}
.archive-toolbar-item {position: relative;}
.archive-toolbar-item span { font-weight: normal; position: relative;}
.archive-toolbar-item .items {display: flex; justify-content: space-between; text-transform: uppercase;}
.archive-toolbar-item .items a {display: block;}
.archive-toolbar-item .items a.active {text-decoration: underline;}


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

.rotate-left {margin-top: -7px; font-size: 10px; text-transform: uppercase; -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); position: fixed; top: 50%; left: -19px;}
.rotate-left span {display: none;}
.rotate-left:hover {left: -106px;}
.rotate-left:hover span {display: inline;}
.rotate-left a:hover {text-decoration: underline;}
.rotate-right {margin-top: -7px; font-size: 10px; text-transform: uppercase; -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); position: fixed; top: 50%; right: -43px;}

footer {font-size: 10px; text-transform: uppercase; text-align: center; position: absolute; bottom: 15px; left: 0; right: 0;}
footer a:hover {text-decoration: underline;}


/* ==========================================================================
   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) {

  .lock-logo header {margin-top: 0px;}
	.col_1_2, .col_1_3 {width: 100%; float: none;}
	
    header {width: 100px; z-index: 999;}

    .logo {width: 200px; height: 190px; margin: -98px 0 0 -100px; background-size: 100%;}
    .main {padding: 20px 40px;}
    .col-1-3, .col-1-4 {width: 100%; margin: 0; padding: 0 0 30px 0; float: none; clear: both;}

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

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

    header nav {z-index: 99999;}
    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 0 10px!important; float: none;}
    header nav ul a {display: block; font-size: 20px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

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

    .menu-bt {display: block; 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 {z-index: 99999;}

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

    .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;}

    .col-1-4 .ajax-call {padding: 0;}

    .img-wrap img {width: 100%;}

    .archive-toolbar {display: none!important;}

    .grid {margin: 30px 0 0!important;}
    .grid.press {margin: 60px 0 0!important}

    .archive-toolbar-item .items {display: block; margin-top: 20px;}
    .archive-toolbar-item .items a {margin: 5px 14px 0 0; float: left;}

    .grid.press .grid-sizer, .grid.press .col-1-4 {width: 100%;}


    .main > .project div {width: 100%!important; margin: 0 0 30px!important; padding: 0!important; float: none!important;}
    .main > .project div.embed-container {padding-bottom: 56.25%!important;}

    .media-img {width: 100%!important; margin: 0; padding: 0!important; float: none!important;}
    .media-img + .media-img {margin-top: 30px!important;}

    #project .main:first-child > .project .content div {margin: 30px 0 0!important;}

    .main > .project .text {margin-bottom: 0!important;}

    #project .main {margin: 0!important; padding: 40px 40px!important;}


    .related-projects {margin: 0; padding: 0 40px;}

    .related-left {width: 32px; background-size: 20px; background-position: left 70px; left: 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
    .related-right {width: 32px; background-size: 20px; background-position: right 70px; right: 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

    .related-project {width: 215px!important; text-align: left;}
    .related-project img {max-width: 215px; max-height: 155px;}
    .related-project h2 {text-align: left;}

    .related-projects, .related-wrap {height: 220px;}


.table .grid-item {display: block;}

    .table .col-1-3 {width: 100%; padding: 0; float: none;}

    .grid.press .col-1-4 {margin-bottom: 0;}


}



@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: auto; padding: 0; float: left;}
    .col-1-4 .main-img {height: 90px;}

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

    .img-wrap img {width: auto; height: 180px;}

    .col-1-4 .ajax-call {padding: 0 40px 32px 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;}
}