@import url('https://fonts.googleapis.com/css?family=Montserrat|Architects+Daughter|Bangers|Raleway|Alegreya+Sans|Shadows+Into+Light|Solway&display=swap');

body {
    margin: 0;
    font-family: "Montserrat";
    background-color: black;
    color: white;
}
.Header {
    background-image: url(../Background/Hot/Background.01.jpg); 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 25vw;
    /*min-height: 10rem;*/
    width: 100%;
}
.Header-02 {
    background-image: url(../Background/Hot/Background.03.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 25vw;
   /* min-height: 10rem;*/
    width: 100%;
}
.Header-03 {
    background-image: url(../Background/Hot/Background.04.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 25vw;
    /* min-height: 10rem;*/
    width: 100%;
}
.Header-04 {
    background-image: url(../Background/Hot/Background.04.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 25vw;
    /* min-height: 10rem;*/
    width: 100%;
}
.Title {
    position: absolute;
    margin-top: 18vw;
    margin-left: 1vw;
    color: white;
    font-size: 2vw;
}
.Page-HD {
    margin-left: 30%;
    margin-right: 30%;
}
.Page-SD {
    margin-left: 5%;
    margin-right: 5%;
}
.Paragraph {
    margin-top: 30px;
    font-family: 'Architects Daughter', cursive;
    font-size: 18px;
}
.Chapter {
    margin-top: 50px;
    margin-bottom: 50px;
    border-bottom: 1px solid white;
}
.Slide-001 {
    position: absolute;
    max-width: 30%;
    left: 70%;
}
.Slide-002 {
    position: absolute;
    max-width: 30%;
    width: 280px;
    left: calc(30% - 280px);
    margin-right: 10px;
}
.Slide-003 {
    position: absolute;
    max-width: 30%;
    left: 70%;
}

.Slide-L {
    position: absolute;
    max-width: 30%;
    left: 0;
}

.Slide-R {
    position: absolute;
    max-width: 30%;
    left: 70%;
}

.Slide-004 {
    position: absolute;
    max-width: 30%;
    width: 368px;
    left: calc(30% - 368px);
    margin-right: 10px;
}

.Hot-Section {
    position: relative;
    width: 100%;
    overflow: auto;
}

.Hot-Column-Band {
    position: relative;
    float: left;
    width: 30%;
    box-sizing: border-box;
    min-height: 1px;
}

.Hot-Column-Body {
    position: relative;
    float: left;
    width: 40%;
    box-sizing: border-box;
}

.Hot-Advert-300-500 {
    position: relative;
    width: 300px;
    height: 500px;
    margin-top: 50px;
    margin-left: calc(50% - 150px);
    margin-bottom: 50px;
    border: 1px solid white;
}

.Hot-Advert-900-250 {
    position: relative;
    width: 900px;
    height: 250px;
    margin-top: 100px;
    margin-left: calc(50% - 450px);
    margin-bottom: 100px;
    border: 1px solid white;
}

.Hot-Advert-728-90 {
    position: relative;
    width: 728px;
    height: 90px;
    margin-top: 100px;
    margin-left: calc(50% - 364px);
    margin-bottom: 100px;
    border: 1px solid white;
}

.Hot-Advert-761-220 {
    position: relative;
    width: 761px;
    height: 220px;
    margin-top: 100px;
    margin-left: calc(50% - 380px);
    margin-bottom: 100px;
    border: 1px solid #1e1e1e;
}

.Hot-Advert-300-250 {
    position: relative;
    width: 300px;
    height: 250px;
    margin-top: 100px;
    margin-left: calc(50% - 150px);
    margin-bottom: 100px;
    border: 1px solid #1e1e1e;
}

.Hot-Advert-468-60 {
    position: relative;
    width: 468px;
    height: 60px;
    margin-top: 100px;
    margin-left: calc(50% - 234px);
    margin-bottom: 100px;
    border: 1px solid #1e1e1e;
}

.Hot-Span-Orange {
    color: orange;
    font-weight: 900;
}

.Hot-Span-Giancarlo {
    color: #b794ff;
    font-weight: 900;
}

.Hot-Span-Erica {
    color: #ff8af1;
    font-weight: 900;
}

.Hot-Span-Anna {
    color: #ff6868;
    font-weight: 900;
}

.Hot-Span-Alessio {
    color: #3bcf5b;
    font-weight: 900;
}

.Hot-Span-Dario {
    color: #ffd868;
    font-weight: 900;
}

.Hot-Span-Lucia {
    color: #ff80d2;
    font-weight: 900;
}

.Hot-Span-Paolo {
    color: #68b9ff;
    font-weight: 900;
}

.Hot-Span-Calogero {
    color: #f44336;
    font-weight: 900;
}

.Hot-Span-Mimma {
    color: #f1bbff;
    font-weight: 900;
}

.Hot-Span-Enzo {
    color: #5fb5ff;
    font-weight: 900;
}

/*NavBar*/

.NavBar {
    position: relative;
    top: -10px;
    /*display: flex;*/
    height: 51px;
    justify-content: flex-start;
    flex-wrap: wrap;
    background-color: rgba(68, 68, 68, 0.2);
    font-family: "Montserrat";
    padding-left: 10px;
    padding-right: 10px;
    transition: 0.3s;
    /*-webkit-box-shadow: 0px 10px 13px -7px rgb(0 0 0 / 50%), 5px 5px 15px 5px rgb(0 0 0 / 0%);
    box-shadow: 0px 10px 13px -7px rgb(0 0 0 / 50%), 5px 5px 15px 5px rgb(0 0 0 / 0%);*/
}

    .NavBar .NavBar-Btn-Glass {
        color: rgba(255, 255, 255, 0.7);
        background-color: rgba(17, 17, 17, 0);
        cursor: pointer;
    }

        .NavBar .NavBar-Btn-Glass:hover {
            border-color: #000000;
            background-color: #111111;
        }

        .NavBar .NavBar-Btn-Glass:active {
            position: relative;
            z-index: 1;
            box-shadow: 0 0 1em 0.5ex rgba(17, 17, 17, 0.5);
        }

        .NavBar .NavBar-Btn-Glass.NavBar-Btn-Primary {
            position: relative;
            float: left;
            color: rgba(255, 255, 255, 0.7);
            background-color: rgba(42, 143, 189, 0);
        }

            .NavBar .NavBar-Btn-Glass.NavBar-Btn-Primary:hover {
                position: relative;
                float: left;
                border-color: #1c607e;
                background-color: #2a8fbd;
            }

            /*Stile quando premo un tasto non in stato Active*/
            .NavBar .NavBar-Btn-Glass.NavBar-Btn-Primary:active {
                position: relative;
                float: left;
                z-index: 1;
                box-shadow: 0 0 1em 0.5ex rgba(42, 143, 189, 0.5); /*Azzurro*/
            }

            /*Stile quando premo un tasto in stato Active*/
            .NavBar .NavBar-Btn-Glass.NavBar-Btn-Primary.NavBar-Btn-Active:active {
                position: relative;
                float: left;
                z-index: 1;
                /*box-shadow: 0 0 1em 0.5ex rgba(189, 42, 174, 0.5);*/ /*Viola*/
                box-shadow: 0 0 1em 0.5ex rgba(255, 0, 0, 0.6); /*Red*/
            }

        .NavBar .NavBar-Btn-Glass.NavBar-Btn-Right {
            top: 0px;
            width: auto;
            position: relative;
            float: right;
            color: rgba(255, 255, 255, 0.7);
            background-color: rgba(42, 143, 189, 0);
            transition: 3s;
            display: block;
        }

            .NavBar .NavBar-Btn-Glass.NavBar-Btn-Right:hover {
                position: relative;
                float: right;
                border-color: #1c607e;
                background-color: #2a8fbd;
            }

            .NavBar .NavBar-Btn-Glass.NavBar-Btn-Right:active {
                position: relative;
                float: right;
                z-index: 1;
                box-shadow: 0 0 1em 0.5ex rgba(42, 143, 189, 0.5); /*Azzurro*/
            }

            .NavBar .NavBar-Btn-Glass.NavBar-Btn-Right.NavBar-Btn-Active:active {
                position: relative;
                float: right;
                z-index: 1;
                /*box-shadow: 0 0 1em 0.5ex rgba(189, 42, 174, 0.5);*/ /*Viola*/
                box-shadow: 0 0 1em 0.5ex rgba(255, 0, 0, 0.6); /*Red*/
            }

.NavBar-Btn-Glass {
    /*flex-grow: 1;*/
    text-align: center;
    display: inline-block;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    /*padding: 1em 2em;*/
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px;
    border: 1px solid transparent;
    letter-spacing: 0.98pt;
    transition: background-position 2s cubic-bezier(0, 1, 0, 1), border-color 500ms, background-color 500ms;
    position: relative;
    background-attachment: fixed, scroll;
    background-size: 100vw 100vh, cover;
    background-position: center center, 0 0;
    /*background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0.075) 10%, rgba(255, 255, 255, 0.075) 14%, rgba(255, 255, 255, 0.15) 14%, rgba(255, 255, 255, 0.15) 15%, rgba(255, 255, 255, 0.075) 17%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0.075) 40%, rgba(255, 255, 255, 0.15) 42%, rgba(255, 255, 255, 0) 43%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.075) 60%, rgba(255, 255, 255, 0.075) 66%, rgba(255, 255, 255, 0.15) 66%, rgba(255, 255, 255, 0.075) 70%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100% ), radial-gradient( ellipse farthest-corner, transparent, rgba(0, 0, 0, 0.2) 110% );
    background-image: repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0.1) 8%, rgba(255, 255, 255, 0.2) 10%, rgba(255, 255, 255, 0.3) 14%, rgba(255, 255, 255, 0.4) 14%, rgba(255, 255, 255, 0.5) 15%, rgba(255, 255, 255, 0.6) 17%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0.3) 42%, rgba(255, 255, 255, 0.4) 43%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0.2) 66%, rgba(255, 255, 255, 0.3) 66%, rgba(255, 255, 255, 0.4) 70%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.1) 100% ), radial-gradient( ellipse farthest-corner, transparent, rgba(0, 0, 0, 0.2) 110% );*/
}

    .NavBar-Btn-Glass:hover {
        background-position: -100vw 0, 0 0;
    }

    .NavBar-Btn-Glass:active {
        background-position: -75vw 0, 0 0;
        border-style: solid;
    }

.NavBar-Btn-Active {
    /*border-color: rgba(189, 42, 174, 0.2)!important;
    background-color: rgba(189, 42, 174, 0.2)!important;*/ /*Viola*/
    border-color: rgba(255, 0, 0, 0.2) !important;
    background-color: rgba(255, 0, 0, 0.6) !important; /*Rosso*/
    color: #cff30c !important;
    background-position: -75vw 0, 0 0;
    border-style: solid;
    animation: Key-NavBar-Btn-Active infinite 10s;
    cursor: default !important;
}

.NavBar-Icon-Warrior {
    background-image: url(../Images/Warrior.01.png);
    background-size: 72px 72px;
    width: 72px;
    height: 72px;
    position: absolute;
    top: -10px;
    left: -40px;
    transition: 1s;
}

.NavBar-Span-User {
    transition: 1s;
    color: rgb(255 152 0);
}