/*!
 * ThemeKit v2.0 (http://themekit.lavalite.org/)
 * Copyright 2018 The Lavalite Authors
 */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Overpass Mono', monospace;
    line-height: 1.5;
    background-color:#F9EDDA;
}

a, a:link, a:visited, a:active{
    text-decoration: none;
    color: #D18323;
}
a:hover{
    color:#9D621B;
}

h1,h2,h3,h4,h5,h6{
    font-family: 'Emblema One', cursive;
}

h1{
    font-weight: 300;
    font-size: 60px;
    line-height: 1.2;
    margin-bottom: 15px;
    font-size:32px;
}
h2{
    font-size:26px;
}
h3{
    font-size:22px;
}
h4{
    font-size:18px;
}
h5{
    font-size:16px;
}

h6{
    font-size:14px;
}

i{
    font-style: italic;
}

strong{
    display: inline;
    font-weight: 700;
}

.theX{
    /*position: absolute;
    top:100px;
    left:100px;*/
    margin:10px;
    width:80px;
}

.showcase {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 0 20px;
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*background: url('../../assets/img/loading_lg.gif') no-repeat center
        center/cover;*/
}

.loader{
    margin-top:150px;
    display: block;
    position: absolute;
    width:100%;
    z-index: -1;
}
.loader img{
    margin:0px auto;
    display: block;
}

.video-container video {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.video-container:after {
    content: '';
    z-index: 1;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.0);
    position: absolute;
}

#sound{
    position: fixed;
    bottom:50px;
    right:70px;
    z-index: 9999;
    font-size: 2em;
    color:#F9EDDA;
    text-shadow: 1px 1px 3px black;
}

.w-400{
    width:400px !important;
}

.soundTop{
    top:20px !important;
    left:20px !important;
}

/*.soundToggler{
    width:75px;
    height: 75px;
    background-image: url('../../assets/img/ear_icon_white_shadow.png');
    background-size: cover;
}

.soundToggler.off{
    background-image: url('../../assets/img/ear_icon_white_off_shadow.png');
}*/

.content {
    height:100%;
    width:100%;
    z-index: 2;
}


#footer{
    position: absolute;
    bottom:10px;
    left:10px;
    z-index: 1;
    opacity: 0.5;
    font-size:12px;
    color:white;
    text-shadow: 1px 1px 2px black;
}

#debug-icon{
    display: none !important;
}

#header{
    position: fixed;
    text-shadow: 0px 0px 5px black;
    z-index: 800;
    min-height: 50px;
    width:100%;
}

#header:after{
    position: fixed;
    z-index: -2;
    top:0;
    content:'';
    min-height: 50px;
    background-color: #111;

    width:100%;
    /*background: rgb(50,27,10);
    background: linear-gradient(180deg, rgba(50,27,10,0.8295693277310925) 0%, rgba(119,113,93,0) 100%);*/
}

#header .headLeft{
    text-align: left;
}
#header .headLeft a:link{
    color:white;
}
#header .headLeft img{
    width:290px;
    margin-top:12px;
    margin-left:10px;
}

#header .headRight{
    text-align: right;
}
/* Add a black background color to the top navigation */
.topnav {
    position: relative;
  overflow: hidden;
  text-align: right;
  z-index: 950;
}

#menuButton{
    margin:6px 14px;

    font-size:30px;
    color:white;
}

#mainMenu{
    margin-top:13px;
}

#mainMenu a.last{
    margin-right:20px;
}

#mainMenu a img{
    height:25px;
    padding:5px;
}

/* Style the links inside the navigation bar */
.topnav a {
    position: relative;
    z-index: 950;
}

/* Change the color of links on hover */
.topnav a:hover {
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

.mainContent{
    position: relative;
    padding-top:60px;
    color:#333;
    overflow: hidden;
    /*min-width: 300px;*/
}

#mainScroll{
    overflow-y:scroll !important;
}

.mainContent.full{
    padding-top:0px !important;
}

.noSideScroll{
    overflow-x: hidden;
}

.mainContent.withBg{
    position: fixed;
    height:100%;
    width:100%;
    background: rgb(247,229,207);
    background: linear-gradient(0deg, rgba(247,229,207,1) 0%, rgba(249,244,227,1) 100%);
    /*background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-image: url('../../assets/img/bgGradient.jpg');*/
}

.withGradient{
    height:100%;
    width:100%;
}

.aboutGradient{
    background: rgb(255,234,180);
    background: linear-gradient(0deg, rgba(255,234,180,0.7567401960784313) 0%, rgba(255,252,243,1) 81%);
}

.showGradient{
    background: rgb(255,234,180);
    background: linear-gradient(0deg, rgba(255,234,180,0.7567401960784313) 0%, rgba(255,252,243,1) 81%);
}

.contactGradient{
    background: rgb(255,234,180);
    background: linear-gradient(0deg, rgba(255,234,180,0.7567401960784313) 0%, rgba(255,252,243,1) 81%);
}

.worksGradient{
    background: rgb(255,205,224);
    background: linear-gradient(0deg, rgba(255,205,224,1) 0%, rgba(238,255,212,1) 100%);
}



/*.mainContent.withBg:after{
    content: '';
    z-index: 1;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 240, 240, 0.0);
    position: absolute;
}*/

.mainContent .inner{
    position: relative;
    z-index: 50;
    padding:40px;
}

.fadeIn{
    transition-delay: 0.2s;
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}

.contentBox{
}

.contentBox.small{
    padding:20px;
    margin-left:15%;
    margin-right: 15%;
}

.fullBackground img, .fullBackground .imageMap{
    height:100%;
    width:100%;
    object-fit: cover;
    overflow: hidden;
    /*background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-image: url('../../assets/img/BOX.jpg')*/
}

.fullBackground #mappingImage{
    min-width: 768px;
    /*min-width: 1238px;
    left:50%;
    margin-left: -600px;*/
}

.imageMap{

}

.imageMap area{
    cursor: pointer;
    outline: 0;
    stroke: 0;

}

.notificationFader{
    width:100%;
    margin:0px auto;
    position: fixed;
    top:100px;
    opacity: 1;
    overflow:hidden;
    -moz-animation: cssAnimation 0s ease-in 4s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 4s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 4s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 4s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    transition-property: opacity,width,height;
}

.notificationFader img{
    width:80%;
}

.fadOutSlow {

}
@keyframes cssAnimation {
    0%   {
        opacity: 1;
    }
    90%  {
        opacity: 0;
    }
    100% {
        width:0;
        height:0;
        visibility:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    0%   {
        opacity: 1;
    }
    90%  {
        opacity: 0;
    }
    100% {
        width:0;
        height:0;
        visibility:hidden;
    }
}


.bottomThanks{
    position: absolute;
    bottom:-45px;
    right:-10px;
    z-index: 15;
}
.bottomThanks img{
    width:300px;
}

/* ---- grid ---- */

.grid {
    margin-top:60px;
    margin-bottom:60px;
    margin-left:auto;
    margin-right:auto;
}

.grid .item img{
    width:150px;
    display: inline-block;
}
.grid .item.gigante{
    width:100%;
    margin-bottom: 60px;
}

.grid .item.gigante img{
    width:450px;
}

.grid .item .description{
    width:0px;
    height:0px;
    margin-top:40px;
    opacity:0;
    overflow:hidden;
    margin-left:40px;
    font-size: 0.9em;
    transition-property: opacity;
    transition-duration: 1s;
    vertical-align: top;

}
.grid .item .description.open{
    width:40%;
    vertical-align: top;
    height: 100%;
    opacity: 1;
    display: inline-block;
}
.grid .item .description.closed{
    
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

.modal .carousel .carousel-item img, .modal .carousel .carousel-item video{
    max-height: 100%;
    object-fit: contain;
}

.modal .audio-container{
    background-color: black;
    padding:50px;
}

.modal .audio-container audio{

}

.modal .modal-body{
    max-height: 90%;
}

.modal-body img{

}


/* ---- .element-item ---- */

.item {
  float: left;
  margin: 5px;
  padding: 10px;
}

#flipbook{
    position: relative;
    z-index: 100;
    margin:30px auto !important;
    overflow: hidden;
    max-width: 1392px;
    max-height: 900px;
}

#flipbook .page{
    background-color:white;
}

#flipbook .hard{
    background-color:#666;
}

#flipbook .page img{
    width:100%;
}

.pagePadding{
    padding: 10px;
}

.modalContentWrap{
    margin:0px auto;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.modalContentWrap img, .modalContentWrap video{
    object-fit: contain;
    max-height: 100%;
    max-width: 100%;
}

.modalContentWrap img{
    width:auto;
    margin:0px auto;
    max-height: calc(100vh - 200px);
}

.topSpace{
    margin-top:40px;
}

.modal .modal-content{
    background:0;
    border:0;
    
}

.modal .modal-footer{
    border-top:0;
}

.modal .modal-header{
    border-bottom:0;
}

/*.modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}*/

.carousel-control-next, .carousel-control-prev{
    font-size:60px;
    text-shadow:0px 0px 10px black;
    z-index: 100;
    width:60px;
    opacity: 1;
}

.carousel-control-next i{
    margin-left:10px;
}

.carousel-control-prev i{
    margin-right:10px;
}

.modal-content button.close{
    color:white;
    text-align: right;
    margin-top:36px;
}

.modal-content button.close:hover{
    color:white !important;
    opacity:1;
}

/*.modal-dialog{
    margin: 2.75rem auto !important;
}*/

.modal-dialog{
    position: relative;
    display: table; /* This is important */ 
    overflow-y: auto;    
    overflow-x: auto;
    width: auto;
    min-width: 300px;
    max-height: 100%;
    margin-top: 50px;
}

#aspectWarning{
    display: none;
    background-color: rgba(200,150,150,0.9);
    padding:10px;
    color:white;
    text-shadow: 1px 1px 1px black;
    position: fixed;
    top:230px;
    width:100%;
    z-index: 900;
}


@media (min-aspect-ratio: 16/9) {
    #videoBG {
        width:100%;
        height: auto;
    }
}
@media (max-aspect-ratio: 16/9) {
    #videoBG { 
        width:auto;
        height: 100%;
    }
}
@media (max-width: 767px) {
    #videoBG {
        /*display: none;*/
    }
    body {
        /*background: url('../../assets/img/loading_lg.gif');
        background-size: cover;*/
    }
}



@media only screen and (max-width : 490px) {
    #aspectWarning{
        display: block;
    }
}




@media only screen and (max-width : 480px) {
    .mainContent .inner{
        padding:10px;
    }
    .grid .item .description.open{
        width:100%;
    }
}
@media only screen and (max-width : 595px) {
    #flipbook{
        margin-top:40px;
        margin-left: 5px !important;
    }
    .modal .carousel-control-next i{
        margin-left:60px;
    }

    .modal .carousel-control-prev i{
        margin-right:60px;
    }
    .grid .item img{
        width:60px;
    }
    .grid .item.gigante img{
        width:150px;
    }
}
@media only screen and (max-width : 690px) {
    .contentBox.small{
        padding:0px;
        margin-left:1%;
        margin-right: 1%;
    }
    .grid .item img{
        width:160px;
    }
}
@media only screen and (max-width : 800px) {
    .notificationFader img{
        width:80%;
    }

    .notificationFader.fadOutSlow{
        opacity:1;
        width:100%;
        transition-delay: 0.5s;
    }
    .contentBox.small{
        padding:0px;
        margin-left:5%;
        margin-right: 5%;
    }
    .mainContent .inner{
        padding:20px;
    }
    #menuButton{
        position: fixed;
        top:0px;
        right:0px;
    }
    .topnav a:not(.current) {display: none;}
    .topnav a.icon {
        float: right;
        display: block;
    }
    .topnav a.current img{
        margin-right:50px;
        margin-top: 0px !important;
    }
    #mainMenu a.current img{
        height:26px;
    }
    .topnav.responsive {
        background-color: #111;
        position: absolute;
        right:0px;
        width:150px;
        z-index:950;
    }
    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    #flipbook{
        margin-top:40px;
        margin-left: 10px !important;
    }
    .grid .item img{
        width:200px;
    }
    .grid .item.gigante img{
        width:400px;
    }
    .grid .item .description.open{
        width:100%;
    }

}
@media only screen and (min-width : 800px) and (max-width : 962px) {
    #mainMenu a img{
        margin-top:3px;
        height:20px;
        padding:3px;
    }
}
@media only screen and (min-width : 800px) and (max-width : 876px) {
    #mainMenu a img{
        margin-top:4px;
        height:16px;
        padding:2px;
    }
}
@media only screen and (min-width : 800px) and (max-width : 1024px) {
    .contentBox.small{
        padding:10px;
        margin-left:5%;
        margin-right:5%;
    }
}
@media only screen and (min-width : 1024px) and (max-width : 1224px) {/*--- Tablet landscape --- */}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}