* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    /* -webkit-user-select: none;  Safari */
    /* -ms-user-select: none;  IE 10 and IE 11 */
    /* user-select: none;  Standard syntax */
}

    *:focus {
        outline: none;
    }

a {
    text-decoration: none;
    color: #007ac3;
}


@font-face {
    font-family: Dolcissimo;
    src: url(resources/font/Dolcissimo.otf);
}

@font-face {
    font-family: Lexend Deca;
    src: url(resources/font/LexendDeca-VariableFont_wght.ttf);
}


@font-face {
    font-family: Roboto;
    src: url(resources/font/Roboto-Regular.woff);
}

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

@font-face {
    font-family: ChunkfiveEx;
    src: url(resources/font/Chunkfive-Ex.ttf);
}



body {
    font-family: Roboto;
    height: 100vh; 
}

form {
    font-family: Roboto;
    height: 100vh;
}

#layout {
    min-width:1300px; 
}

.testmode {
    background-color:red;
    color:white;
    padding:8px;
    font-size:16px;
    text-align:center;
    position: sticky;
    top:0px;
}

#header {
    display: flex;
    justify-content: space-between;
    background-color: #ff4d0d;
    text-align: center;
    height: 60px;
    background: #cf400c;
    background: linear-gradient(0deg,rgba(207, 64, 12, 1) 0%, rgba(255, 77, 13, 1) 9%, rgba(255, 77, 13, 1) 100%);
}

    #header .left {
        display: flex;
        align-content: center;
    }

    #header .center {
        display: flex;
    }

    #header .right {
        display: flex;
        align-items: center;  
    }

    #header .nav {
        display: flex;
        gap:2px;
        align-items: flex-end;
    }

        #header .nav .item {
            background-color: gainsboro;
            height: 40px;
            padding: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            min-width: 200px;
            color:gray;
            cursor:not-allowed;
        }

        #header .nav .sel {
            background-color: #eaeaea;
            color: black;
            cursor: pointer;  
        }


    #header .logo {
        margin-top:10px;
        margin-left: 4px; 
    }

        #header .logo img {
            height: 40px;
        }

    #header .project {
        height: 40px;
        margin-top: 10px;
        margin-left: 10px;
    }

    #header .pos {
        background-color:black;
        color:white;
        text-align: left;  
        font-size: 14px; 
        padding: 4px 4px 0px 4px;
        text-align: center;  
        border-top-right-radius: 6px; 
    }

    #header .virtual {
        background-color: gray;
        color: white;
        text-align: left;
        font-size: 12px;
        padding: 0px 4px 4px 4px;
        text-align: center;
        border-bottom-left-radius: 6px;
    }


    #header .user {
        font-size: 14px;
        margin-right: 20px;
        border-radius: 14px;
        padding: 8px 8px 8px 30px;
        background-color: #333333;
        color: gainsboro;
        height: 34px;
        background-image: url(images/usr0.png);
        background-repeat: no-repeat;
        background-size: 14px 14px;
        background-position-x: 10px;
        background-position-y: center;
    }

        #header .user:hover {
            background-image: url(images/usr1.png);
            color: white;
        }

        #header .Title {
            font-size: 36px;
            font-weight: bold;
            color: #fa4c11;
        }

    #header .Subtitle {
        font-size: 28px;
        font-weight: bold;
        color:gray;
        text-align:right; 
    }

.bar {
    background-color: transparent;
    padding:4px;
    position:relative;
    width:100%; 
    bottom:0; 
    margin-top:-26px;
}

#separator {
    height:20px;
    background-color:black; 
}

#banner {
    position: relative;
    background-color: black;
    padding: 0px;
    margin:0px;
    border-style:none;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

#banner video {
    width: 100%;
    border-style: none; 
    padding:0px;
    display:block;
}

    #banner .text {
        position: absolute;
        font-family: ChunkfiveEx, Verdana;
        text-align: right;
        font-size: 80px;
        color: white;
        top: 60%;
        right: 10%;
        opacity:0;
        animation: appear-bottom 2s ease forwards;
    }

        #banner .text .lin1 {
            padding-right: 80px;
        }



    .menu {
        display: flex;
        align-content: space-between;
        width: 100%;
        padding: 4px 20px 4px 20px;
        background-color: black;
        z-index: 10;
    }

    .menu div {
        width:50%; 
    }

    .menu a {
        color: gainsboro;
    }

    .menu a:hover {
        color:white; 
    }

    .menu .userlogin {
        color: #ff4d0d;
        font-weight:bold;  
    }

        .menu .userlogin:hover {
            color:white; 
        }


.menu ul { display:flex; gap:20px; list-style-type:none; }

    .menu ul li {
        
    }


.ball {
    position: absolute;
    border-radius: 100%;
    opacity: 0.7;
}

#content {
    background-color: gainsboro;
}

    #content .container {
        width: 62%;
        margin: auto;
        min-width: 600px;
        max-width: 1400px;
        background-color: #eeeeee;
    }



        #content .container .title {
            font-family: Dolcissimo, Arial; 
            font-size:44px;
            padding: 20px;
        }


        #content .container .events {
            padding: 30px 30px 60px 30px;
            display: flex;
            gap: 50px;
            flex-wrap: wrap;
            padding-top: 0px;
            flex-direction:column; 
            font-size:18px;
        }

        #content .container .event {
            padding: 30px;
            background-color:white;
            border-radius:10px; 
            display:flex;
            gap:30px;
            min-width:500px; 
            box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
        }

            #content .container .event .image {
                height: 260px;
                box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
                border-radius:4px; 
            }

            #content .container .event .definition {
                position:relative; 
            }

            #content .container .event .name {
                font-family:'Lexend Deca'; 
                font-size: 30px;
                font-weight: bold;
                margin: 6px;
            }

            #content .container .event .date, #content .container .event .time, #content .container .event .lounge {
                display: flex;
                margin: 6px;
                gap: 10px;
                margin-top:10px;
            }

            #content .container .event .col1 {
                width:30%; 
                color:gray;
            }

            #content .container .event .options {
                display: flex;
                gap: 10px;
                flex-wrap: wrap;
                justify-content: center;
                padding:14px;
                width:100%; 
            }

            #content .container .event .optionTrue, #content .container .event .optionFalse {
                position: absolute;  
                font-family: 'Lexend Deca'; 
                display: flex;
                padding: 8px 16px 8px 16px;
                font-size: 18px;
                font-weight: bold;
                align-items: center;  
                border-radius: 8px;
                width:fit-content;  
                gap:10px;
                box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
                bottom:20px; 
                left: 30%;
            }

                #content .container .event .optionTrue img, #content .container .event .optionFalse img {
                    height:24px; 
                }

                #content .container .event .optionTrue {
                    background-color: #ff4d0d;
                    color: white;
                }

            #content .container .event .optionFalse {
                background-color: #406f8d;
                color: #6a99b7;
                cursor: not-allowed !important;
                user-select: none;
            }

                #content .container .event .optionTrue:hover {
                    background-color: #df4209;
                    /* box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;*/
                }


   #footer {
       height: 40px; 
       background-color: #333333;
        
       }

    #footer .contents {
        
    }

.gray {
    color:gray;
}

.lightgray {
    color:lightgray;
}

.center {
    text-align:center;  
}

.right {
    text-align:right;  
}

.bold {
    font-weight:bold;  
}

.pad10 {
    padding:10px;
}

.wdp10 {
    width:10%;
}

.wdp20 {
    width: 20%
}

.wdp20 {
    width: 25%
}

.wdp30 {
    width:30%; 
}

.wdp40 {
    width:40%;
}

.wdp50 {
    width: 50%;
}

.wdp60 {
    width: 60%;
}

.color1 {
   color: #fa4c11;
}

.color2 {
    color: #007ac3;
}

.color3 {
    color: #3c8a43;
}


#subfooter {
    background-color: black;
    display:none;
}


@keyframes appear-bottom {
    to {
        top: 30%;
        opacity: 1;
    }
}


@media only screen and (max-width:980px) {

    body {

    }

    #layout {
        min-width: 600px;
    }


    #header {
        background-image: none;
    }


        #header img {
            height: 100px;
            
        }

        #header .Title {
            font-size: 60px;
        }

        #header .Subtitle {
            font-size: 40px;
        }

    #slider {
       
    }

    #content .container {
        width: 96%;
        margin: auto;
        min-width: 600px;
        max-width: 1400px;
    }

        #content .container .title {
            font-family: Dolcissimo, Arial;
            font-size: 60px;
            padding: 40px;
        }


    #content .container .header {
        position: relative;
    }

    #content .container .header .selection {
        display: block;
        background-color:gainsboro; 
    }

        #content .container .header .selection .title {
            border-bottom-right-radius: 0px;
            font-size:60px; 
        }

        #content .container .header .selection .options {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            display:flex;
            flex-wrap:wrap;  
            overflow:unset;  
            background-color:gainsboro;  
        }

            #content .container .header .selection .options .option {
                font-size:40px;
                padding:30px;
                border-radius:30px; 
            }

            #content .container .header .bottom {
                background-image: none;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                height: 40px;
            }

        #content .container .events {
             gap:30px;
        }

    #content .container .event {
        width: 100%;
        margin-bottom:20px;
        padding:40px;
        font-size:40px;
        display:block; 
    }

        #content .container .event .image {
            height: auto;
            width:100%;

        }

        #content .container .event .description {
            font-size: 40px;
            width: 100%;
        }

            #content .container .event .description div {
            }

        #content .container .event .name {
            font-size: 50px;
            margin: 40px;
        }

        #content .container .event .date {
            margin: 20px;
            font-size: 40px;
        }

        #content .container .event .format {
            margin: 20px;
            font-size: 30px;
        }


        #content .container .event .time {
            margin: 20px;
            font-size: 40px;
        }


        #content .container .event .lounge {
            margin: 20px;
            font-size: 40px;
        }

        #content .container .event .category {
            margin: 10px;
            font-size: 30px;
            color:black;
        }

        #content .container .event .classification {
            margin-bottom: 20px;
            margin: 10px;
            font-size: 30px;
        }
        #content .container .event br {
            display:none; 
        }

        #content .container .event .program {
            padding: 20px;
            font-size: 30px;
            border-radius: 20px;
            max-width:none; 
        }

        #content .container .event .sale {
            display: block;
            padding:40px 0px 0px 0px;
        }

        #content .container .event .optionTrue, #content .container .event .optionFalse {
            position: relative;
            font-size: 40px;
            padding:20px;
        }

        #content .container .event .optionTrue img, #content .container .event .optionFalse img {
            height:40px; 
        }


        #content .container .event .program .sale {
            display: none;
            width: 100%;
        }

            #content .container .event .program img {
                height: 40px;
            }

            #content .container .event .program .advice {
                color: black;
                font-size: 40px;
                padding-top: 4px;
                padding-left: 8px;
            }


        #content .container .event .definition {
            font-size:40px; 
        }

        #content .container .event .options {
            display: flex;
            gap: 30px;
            padding: 20px;
        }

        #content .container .event .option {
            border-radius: 20px;
            padding:20px;
            font-size:30px; 
        }

        #content .container .event .optiontrue, #content .container .event .optionfalse {
            padding: 30px 30px 30px 30px;
            font-size: 30px;
            display:block;
        }


    #footer .contents {
        
    }

  

}

@media print {

    #layout {
        min-width: 0px;
        background-color: yellow;
    }

    #header {
        display:none;
    }

    #header img {
        height: 40px;
    }

    #header .Title {
        font-size: 18px;
    }

    #header .Subtitle {
        font-size: 16px;
    }

    .menu {
        display:none;
    }


    #content .container {
        width: 100%;
    }

    #footer {
        display:none;
    }

}