/*
    Verde       -   #327978     -   rgb(50, 121, 120)
    Ocra        -   #E0E096     -   rgb(224, 224, 150)
    Rosso       -   #CA5353     -   rgb(202, 83, 83)
*/


@font-face{
font-family: 'main';
src: url('../font/main.ttf');
}

@font-face{
font-family: 'tit';
src: url('../font/tit.ttf');
}


html, body{
margin: 0vw;
padding: 0vw;

width: 100vw;

font-family: 'main';
font-size: 1vw;
text-align: center;

background-color: rgba(224, 224, 150, 0.2);

overflow-x: hidden;
}

::-webkit-scrollbar{
width: 0.35vw;
height: 0.35vw;

background: none;

cursor: default !important;

z-index: 9999999;
}
::-webkit-scrollbar-track{
cursor: default !important;

z-index: 9999999;
}
::-webkit-scrollbar-thumb{
background: rgba(224, 224, 150, 0.75);

cursor: default !important;

box-shadow: 0vw 0vw 0.15vw #787878;
-webkit-box-shadow: 0vw 0vw 0.15vw #787878;
-moz-box-shadow: 0vw 0vw 0.15vw #787878;
-o-box-shadow: 0vw 0vw 0.15vw #787878;

z-index: 9999999;
}






#debug{
position: fixed;
left: 0vw;
bottom: 0vw; 

box-sizing: border-box;

width: 100vw; 
max-height: 25vh; 
line-height: 40px; 

font-family: monospace;
unicode-bidi: isolate;
text-align: center; 
font-size: 30px; 
color: #333333;

background: #ffcc00; 

overflow: auto;	

resize: vertical;

z-index: 9999999999999999999999;
}



.button{
box-sizing: border-box;

margin: 0vw auto 1vw auto;
padding: 0.15vw 2.5vw 0.35vw 2.5vw;

max-width: calc(100% - 1vw);
width: 20vw;
line-height: 2vw;

font-family: 'tit', sans-serif;
font-size: 1.5vw;
font-weight: bold;
color: #327978;
text-align: center;

background-color: rgba(224, 224, 150, 0.75);

border-radius: 0.15vw;

box-shadow: 0.05vw 0.05vw 0.05vw rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0.05vw 0.05vw 0.05vw rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0.05vw 0.05vw 0.05vw rgba(0, 0, 0, 0.25);
-o-box-shadow: 0.05vw 0.05vw 0.05vw rgba(0, 0, 0, 0.25);

overflow: hidden;

cursor: pointer;

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
    .button:hover{
    box-shadow: inset 0vw 0vw 0.05vw rgba(0, 0, 0, 0.35), 0.05vw 0.05vw 0.05vw rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: inset 0vw 0vw 0.05vw rgba(0, 0, 0, 0.35), 0.05vw 0.05vw 0.05vw rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset 0vw 0vw 0.05vw rgba(0, 0, 0, 0.35), 0.05vw 0.05vw 0.05vw rgba(0, 0, 0, 0.25);
    -o-box-shadow: inset 0vw 0vw 0.05vw rgba(0, 0, 0, 0.35), 0.05vw 0.05vw 0.05vw rgba(0, 0, 0, 0.25);

    background-color: rgb(224, 224, 150, 0.9);
    }
    .button:active{
    box-shadow: inset 0vw 0vw 0.05vw rgba(255, 255, 255, 0.5), 0.05vw 0.05vw 0.05vw rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: inset 0vw 0vw 0.05vw rgba(255, 255, 255, 0.5), 0.05vw 0.05vw 0.05vw rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset 0vw 0vw 0.05vw rgba(255, 255, 255, 0.5), 0.05vw 0.05vw 0.05vw rgba(0, 0, 0, 0.25);
    -o-box-shadow: inset 0vw 0vw 0.05vw rgba(255, 255, 255, 0.5), 0.05vw 0.05vw 0.05vw rgba(0, 0, 0, 0.25);

    background-color: rgb(224, 224, 150, 1);
    }



/*
################################################################################################
################################################################################################
################################################################################################
*/

#menu{
display: flex;
justify-content: end;
align-items: center;

position: fixed;
top: 0vw;
right: 0vw;

box-sizing: border-box;

padding: 0vw 3.5vw;

width: 100vw;
height: 5vw;

font-family: 'tit', sans-serif;
font-size: 2.25vw;
font-weight: bold;
color: #327978;

background-color: rgba(244, 244, 217, 0.9);

overflow: hidden;

z-index: 9;
}
    #menu_icon{
    display: none;
    }

    #menuList{
    display: flex;
    justify-content: end;
    align-items: center;
    column-gap: 3.5vw;
    }
    
    #menu_logo{
    position: absolute;
    top: 0vw;
    left: 3.5vw;

    padding: 0.5vw 0vw;

    height: 4vw;

    opacity: 0;
    }

    .menu{
    cursor: pointer;
    }
        .menu:hover{
        color: #E0E096;
        text-shadow: 0.05vw 0.05vw 0.1vw #327978;
        }

/*
################################################################################################
*/ 

.hr{
width: 100%;
height: 5vw;

background: url("../../img/hr.png") center center no-repeat;
background-size: 25vw auto;
}

/*
################################################################################################
*/ 

#home1{
display: flex;
justify-content: space-between;
align-items: center;

box-sizing: border-box;

padding: 5vw;

width: 100vw;
height: 100vh;

cursor: default;
}

    #home1_img{
    max-width: 40vw;
    max-height: 40vh;

    transform: rotate(-2.5deg);
    }

    #home1_txt{
    width: 40vw;
    max-height: 85vh;
    
    font-size: 1.25vw;
    text-align: justify;
    }
    
/*
################################################################################################
*/ 

.homeBox{
display: flex;
align-items: center;
column-gap: 5vw;

box-sizing: border-box;

margin: 1.5vw auto;
padding: 5vw;

width: 100vw;

cursor: default;
}

    .homeTit{
    width: 5vw;

    writing-mode: vertical-rl;
    text-orientation: mixed;

    font-family: 'tit', sans-serif;
    font-size: 3vw;
    font-weight: bold;
    color: #327978;

    transform: rotate(-180deg);
    }
    
/*
################################################################################################
*/ 

    #home2_txt{
    order: 1;
        
    width: 40vw;
    max-height: 85vh;
    
    font-size: 0.9vw;
    text-align: justify;
    }
        #home2_button{
        margin-top: 2vw;
        }

    #home2_img{
    order: 2;

    max-width: 40vw;
    max-height: 70vh;

    transform: rotate(2.5deg);
    }

/*
################################################################################################
*/ 

    .home3box{
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.5vw;
    row-gap: 0.5vw;
    justify-content: center;
    align-items: center;

    width: 82.5vw;
    }
        .home3boxList{
        position: relative;

        width: 13vw;
        height: 13vw;

        background-position: left center;
        background-repeat: no-repeat;
        background-size: cover;

        border-radius: 0.1vw;
        
        box-shadow: 0.05vw 0.05vw 0.15vw rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: 0.05vw 0.05vw 0.15vw rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0.05vw 0.05vw 0.15vw rgba(0, 0, 0, 0.5);
        -o-box-shadow: 0.05vw 0.05vw 0.15vw rgba(0, 0, 0, 0.5);

        cursor: pointer;
        }
        .home3boxListL{
        position: relative;

        width: 14vw;
        height: 20vw;

        background-position: left center;
        background-repeat: no-repeat;
        background-size: cover;

        border-radius: 0.1vw;
        
        box-shadow: 0.05vw 0.05vw 0.15vw rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: 0.05vw 0.05vw 0.15vw rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0.05vw 0.05vw 0.15vw rgba(0, 0, 0, 0.5);
        -o-box-shadow: 0.05vw 0.05vw 0.15vw rgba(0, 0, 0, 0.5);

        cursor: pointer;
        }
            
            .home3boxListDescr{
            display: none;

            position: absolute;
            bottom: 0vw;
            left: 0vw;

            padding: 0.5vw 0vw;

            width: 100%;

            color: #327978;
            text-align: center;
            
            background-color: rgba(224, 224, 150, 0.9);

            z-index: 2;
            }

                .home3boxListVideo{
                margin-bottom: 1vw;

                font-size: 125%;
                }

            .home3boxListSongBox{
            display: flex;
            align-items: center;
            justify-content: center;
            column-gap: 3vw;
            }

                .home3boxListTit{
                font-weight: bold;
                }
                .home3boxListAuth{
                font-size: 75%;
                font-style: italic;
                }
                
                .home3boxListSubtit{
                margin-top: 1vw;

                font-size: 65%;
                }

    #home3boxHr{
    width: 100%;
    height: 5vw;
    }

/*
################################################################################################
*/ 

    #home4main{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 1vw;
    row-gap: 1vw;
    }
        .home4box{
        box-sizing: border-box;

        padding: 1vw;

        width: 40vw;

        border-radius: 0.25vw;

        background-color: rgba(224, 224, 150, 0.5);
        background-position: 1vw 0.75vw;
        background-repeat: no-repeat;
        background-size: auto 4vw;

        box-shadow: 0.05vw 0.05vw 0.25vw rgba(0, 0, 0, 0.25);
        -webkit-box-shadow: 0.05vw 0.05vw 0.25vw rgba(0, 0, 0, 0.25);
        -moz-box-shadow: 0.05vw 0.05vw 0.25vw rgba(0, 0, 0, 0.25);
        -o-box-shadow: 0.05vw 0.05vw 0.25vw rgba(0, 0, 0, 0.25);
        }
            .home4boxTit{
            padding-left: 5.5vw;

            font-family: 'tit', sans-serif;
            font-size: 1.75vw;
            font-weight: bold;
            color: #327978;
            text-align: left;
            }
            .home4boxSubtit{
            padding-left: 5.5vw;

            font-family: 'tit', sans-serif;
            font-size: 1vw;
            font-weight: bold;
            font-style: italic;
            color: #327978;
            text-align: left;
            }

            .home4boxListBox{
            margin-top: 1vw;
            }
                .home4boxList{
                display: flex;
                align-items: center;
                column-gap: 1vw;
                
                margin-top: 0.5vw;
                }
                    .home4boxListTit{
                    flex-shrink: 0;

                    width: 13.5vw;

                    font-weight: bold;
                    text-align: right;
                    }
                    .home4boxListSubtit{
                    font-size: 75%;
                    text-align: justify;
                    }


/*
################################################################################################
*/ 

    #home5main{
    padding-left: 5vw;

    font-size: 1.25vw;
    }
        #home5email{
        padding: 1.5vw 0vw;

        font-family: 'tit', sans-serif;
        font-size: 2vw;
        font-weight: bold;
        color: #327978;

        transform: rotate(2.5deg);
        }

/*
################################################################################################
################################################################################################
################################################################################################
*/ 



#foot{
box-sizing: border-box;

margin-top: 10vw;
padding: 2.5vw 0vw;

width: 100vw;

font-family: 'tit', sans-serif;
font-size: 1.5vw;
color: #FFFFFF;

background-color: rgba(50, 121, 120, 0.75);

border-top: 0.25vw solid #E0E096;

box-shadow: inset 0vw 0vw 0.25vw rgba(0, 0, 0, 0.35);
-webkit-box-shadow: inset 0vw 0vw 0.25vw rgba(0, 0, 0, 0.35);
-moz-box-shadow: inset 0vw 0vw 0.25vw rgba(0, 0, 0, 0.35);
-o-box-shadow: inset 0vw 0vw 0.25vw rgba(0, 0, 0, 0.35);

cursor: default;
}
    #footSocials{
    display: flex;
    column-gap: 1.5vw;
    align-items: center;
    justify-content: center;

    margin-bottom: 2vw;
    }
        .footSocial{
        height: 3vw;

        cursor: pointer;
        }