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


/* ------GENERALI------ */
html{
    background-image: url('/images/sfondo2.jpeg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;

    background-position: -10px 0px 0px 0px;

    font-family: Helvetica;
    color: black;

    overflow: hidden;
}

.intro{
    height: 100vh;
    width: 100vw;

    top: 0px;
    left: 0px;
    position: absolute;
    z-index: 1;

    margin-top: -50px;

    animation: fade 3s, togli 3.2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}


img{
    max-width: 100%;
}


.container 
{
    width: 52%;
    height: 100%;
    margin: 75px auto 0 auto; /*auto a dx e sx permette di centrarlo*/
    /* background-color: #91cdcc;*/ 
}


/*--------PULSANTI--------*/
.button{
    background: transparent;    /*perché sia una vera PNG*/
    cursor: pointer;

    border-style: none;
    width: 4%;

    position: absolute;

    transition: transform .2s; /*per animazione*/
}

.button:hover{
    transform: scale(1.3);
}

.b1{
    top: 36%;
    left: 15%;
}

.b2{
    top: 54%;
    left: 24%;
}

.b3{
    top: 62%;
    left: 91%;
} 

.b4{
    top: 36%;
    left: 64%;
} 

.b5{
    top: 87%;
    left: 68%;
} 

/*--------MODALI--------*/
.modal{
    text-align: center;
    align-content: center;
    background-color: #cfc3cf;

    display: flex;

    position:   relative;     /*necessario per lo z-index*/
    z-index: 2;

    border-radius: 30px;
    margin: 0;
    padding: 0;

    overflow: hidden;   /*per non far vedere che scorrono sotto luci e alberi*/
    transform: scale(1);
    transition: transform 0.5s; /*transition dice "se questa proprietà cambia, rallentala"*/
}

.m-hidden{
    visibility: hidden;
}

.m-contenuto{   /*FOTO*/
    margin-bottom: 0px;
    object-fit: contain;    
    width: 100%;
}

.m-contenuto img{
    width: 100%;
    height: 100%;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}



/*-------LUCI A COMPARSA-------*/
.luci{
    background-color: #cfc3cf;
    display: flex;
    height: 55%;
    width: 90.9%;

    position: absolute;
    bottom: 0px;
    left: 0;
    border-bottom-left-radius: 30px;
}

#luci{
    display: none;
}

/*-------ALBERI COMPARSA-------*/
.alberi{
    background-color: #cfc3cf;
    display: flex;
    height: 55%;
    width: 90.9%;

    position: absolute;
    /* margin: -380px 0 auto 0; */
    bottom: 0;
    left: 0;
    border-bottom-left-radius: 30px;
}

#alberi{
    display: none;
}

#acero{
    border-bottom-left-radius: 30px;
    width: 36%;
    border-right: solid 1px black;
}

#frassino{
    width: 40%;
    border-right: solid 1px black;
}

#carpino{
    width: 34%;
    border-right: solid 1px black;
}

.alberi img, .luci img{
    padding-top: 20px;
    margin-bottom: 10px;

    width: 140px;
    height: 140px;
}

.alberi h1, .luci h1{
    align-content: center;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.6;
}

.alberi h2, .luci h2{
    align-content: center;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

/* ALTRI BOTTONI */
.totem{
    background-color: #cfc3cf;
    display: flex;
    height: 55%;
    width: 90.9%;

    position: absolute;
    /* margin: -380px 0 auto 0; */
    bottom: 0;
    left: 0;
    border-bottom-left-radius: 30px;
}

.m-video{
    margin-top: 180%;
}

#totem{
    display: none;
}

.m-totem{
    height: 27%;
    object-fit: contain;
    
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    cursor: pointer;
}

.totem h2{
    line-height: 1;
    padding-top: 10%;
}

.totem #acero h2{
    padding-top: 12%;
}

.totem #carpino h2{
    padding-top: 13%;
}

.p{
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
}

/* .totem #frassino p{
    font-style: italic;
} */


.totem #carpino p, .totem #acero p{
    padding-left: 2%;
    padding-right: 2%;
}

h3{
    align-content: right;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

/*----ELEMENTI A DESTRA----*/
.m-resto{   
    display: flex;
    flex-direction: column;
    width: 10%;
}

/* BOTTONE CHIUSURA */
.m-button{
    padding: 22px 10px 10px 10px;
    height: 18%;
    width: 100%;
    border-style: solid;
    border-width: 0px 0px 1px 0px;    
    font-weight: bold;
    font-size: 40px;
    background-color: transparent;

    cursor: pointer;
}

.m-resto img{
    padding: 8px;
    transition: all .2s ease-in-out;
}

.m-resto img:hover{
    padding: 2px;
}

/* BOTTONE LUCI */
.m-luci{
    height: 27%;
    object-fit: contain;
    
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    cursor: pointer;
}

/* BOTTONE ALBERO */
.m-tree{
    height: 27%;
    object-fit: contain;
    
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    cursor: pointer;
}

.active{
    background-color: #f6e9f9;
}

/* BOTTONE DISEGNO TECNICO */
.m-tecnico{
    height: 27%;
    object-fit: contain;
    cursor: pointer;
}

#secondario{
    display: none;
}


/*--------TRANSIZIONI--------*/
.m-hidden .modal { /*se -window è figlio di -hidden*/
    transform: scale(0); 
  }
  


/*--------ANIMAZIONE D'INGRESSO AL LOADING--------*/
@keyframes fade {
    
    0% {
        opacity: 100;
    }
    
    
	70% {
	    opacity: 40;
	}

    100% {
	    opacity: 0;
	}
}


@keyframes togli {
    
    0% {
        visibility: visible;
    }

    98% {
        visibility: visible;
	}

    100% {
        visibility: hidden;
	}
}