* {
        box-sizing: border-box;
    }

    body{
        font-family:'EvilEye',Sans-Serif;
        color:#fff;
    }

    .logo-container h1{
        margin: 0;
        padding: 0px 13px;
    }

    .logo-container {
        display: flex;
        justify-content: center;
        margin-top:60px;
        color:#fff;
    }

    .logo{
        text-align:center;
        color:#fff;
        position: relative;
    }

    .ee-logo{
        width:192px;margin-top: 4px;
    }

    .cap{
        position: absolute;
        left: -30px;
        top: -35px;
    }

    .cap-img{
        width:65px;height:60px;
    }
    
    .img-left{
        position: absolute;
        left: 0;
        top: 0;
        max-width: 15%;
    }

    .img-left img{
        width: 100% !important;
        height: fit-content;
        height: auto !important;
    }
    
    .img-right{
        position: absolute;
        right: 0;
        top: 0;
        max-width: 15%;
    }

    .img-right img{
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        width: 100% !important;
        height: fit-content;
        height: auto !important;
    }
    .play-now{ margin: 60px auto;}

    .play-now h1{
        text-align:center;
        color:#fff;
        font-size: 24px;
        font-weight: 100;
        line-height: 35px;
        max-width: 800px;
        margin: auto;
    }

    .flex-container {
        display: flex;
        flex-wrap: wrap;
        font-size: 30px;
        text-align: center;
        max-width:1000px;
        margin:auto;
    }

    .flex-container div{
        padding: 10px;
        flex: 16.6%;
        box-sizing:border-box;
    }

    /* Responsive layout - makes a one column-layout instead of two-column layout */
    @media (max-width: 800px) {
        .flex-container div{
            flex: 30%;
        }
    }

    @media (max-width: 460px) {
        .flex-container div{
            flex: 50%;
        }
    }
    @media (max-width: 320px) {
        .flex-container div{
            flex: 100%;
        }
    }

    body {
        min-height: 100vh;
        overflow-x: hidden!important;
        background:#333333;
    }

    .door {
        position: relative; /* Set relative positioning */
        width: 100%;
        height: 140px;
        border: solid 5px #ee2737;
        display: inline-block;
        transform-origin: left center; /* Set the origin to the left center for opening effect */
    }

    .door:hover {
        transform: translateX(10px);
    }

    .door.open {
        transform: rotateY(55deg); /* Open towards the viewer */
        box-shadow: 10px 0 15px rgba(0, 0, 0, 0.5);
        z-index: 1; /* Ensure the opened door is above others */
    }

    .modal.active {
        display: flex;
    }

    /* Style for the modal */
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;
        z-index:1000;
        padding:0px;
    }

    /* Style for the modal content */
    .main-modal-content {
        background-color: #333333;
        padding: 20px;
        width: 80%;
        max-width: 800px; /* Max width for larger screens */
        max-height: 80%;   /* Allow height to adjust based on content */
        border-radius: 0px; /* Optional: add rounded corners */
        display: flex;
        flex-direction: column; /* Stack content vertically */
        justify-content: center; /* Center items vertically */
        align-items: center; /* Center items horizontally */
        margin: 20px; /* Add equal margin around the modal content */
        overflow-y: auto;   
        position: relative;
        overflow-x: hidden;
    }
    .close-button {
        position: absolute;
        top: -11px;
        right: 0px;
        cursor: pointer;
        font-size: xx-large;
        color: rgba(255, 255, 255, 0.9); /* Text color */
        padding: 2px 15px; /* Padding for the box */
        border: none; /* No border */
    }

    #doorTitle {
        position:relative;
        width:100%
    }

    .close {
        cursor: pointer;
        float: right;
    }

    #innerModalContent{
        width: 100%;
        display:flex;
        flex-direction:column;
        align-items: center; 
        overflow-y: auto;
    }

    .flex-container-horizontal-line{
        display: flex;
        flex-wrap: wrap;
        font-size: 30px;
        text-align: center;
        max-width:1000px;
        margin:auto;
        margin-top: 50px;
    }

    .flex-container-newsletterBox {
        display: flex;
        flex-direction: column; /* Stack children vertically */
        align-items: center;    /* Center items horizontally */
        justify-content: center; /* Center items vertically */
        font-size: 30px;
        text-align: center;
        max-width: 1000px;
        margin: auto;          /* Center the container itself */
        padding: 20px;        /* Optional: add padding for spacing */
    }

    .input-button-container {
        position: relative; /* Make this the positioning context */
        margin-bottom: 10px; /* Space between input and button */
        display: flex;
    }

    input[type="text"] {
        width: 100%; /* Full width for better appearance */
        border: none;
        border-bottom: 1px solid #ccc; /* Only show the bottom border */
        outline: none;
        padding: 12px 0;
        transition: border-color 0.3s;
        background: none;
        color: white;
        font-size: 16px;
    }

    .label {
        position: absolute; /* Position the label absolutely */
        left: 0; /* Align to the left of the container */
        top: 12px; /* Adjusted to align inside the input */
        color: #fff;
        pointer-events: none;
        transition: 0.2s ease all;
        /*font-size: 20px;*/
    }

    input:focus + .label,
    input:not(:placeholder-shown) + .label {
        color: #fff; /* Change color on focus */
        font-size: 12px; /* Adjust label size */
        top: -10px; /* Move the label above the input */
    }

    #registerButton {
        background: #ee2737;
        border: 2px solid #ee2737;
        color: white;
        cursor: pointer;
        display: inline-block;
        font-family: Calibri, CalibriEvilEye, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
        font-weight: 800;
        line-height: 1.4em;
        overflow: hidden;
        padding: .5rem 1.6rem;
        position: relative;
        transition: all .18s ease-in;
        z-index: 1;
        width: 200px;
        margin-left: 20px;
    }

    .door-content {
        display: flex; /* Use flexbox */
        align-items: center; /* Center items vertically */
    }

    .hr-line {
        border: none; 
        border-top: 1px solid white; 
        width: 100%;
    }

    .number{
        Position: absolute;
        font-size: 46px;
        color: #ee2737;
        padding: 0px !important;
    }

    .newsletter-heading-div{
        text-align: center;
    }

    .newsletter-h1 {
    color:white;
    font-size: 36px;
    font-weight: 200;
    }

    .icon-image{
        Position:absolute;
        padding: 0px !important;
    }

    .one-img {width: auto;height: auto;top: 10px;right: 10px;}
    .one-number{bottom: 10px;left: 10px;}

    .two-img {width: auto;height: auto;top: 10px;left: 10px;}
    .two-number{bottom: 10px;right: 10px;}

    .three-img {width: auto;height: auto;top: 10px;right: 10px;}
    .three-number{bottom: 10px;left: 10px;}

    .four-img {width: auto;height: auto;bottom: 10px;left: 10px;}
    .four-number{top: 10px;right: 10px;}

    .five-img {width: auto;height: auto;top: 10px;right: 10px;}
    .five-number{top: 10px;left: 10px;}

    .six-img {width: auto;height: auto;bottom: 10px;left: 10px;}
    .six-number{top: 10px;right: 10px;}

    .seven-img {width: auto;height: auto;top: 10px;right: 10px;}
    .seven-number{bottom: 10px; left: 10px;}

    .eight-img {width: auto;height: auto;top: 10px;left: 10px;}
    .eight-number{bottom: 10px;right: 10px;}

    .nine-img {width: auto;height: auto;top: 10px;right: 10px;}
    .nine-number{bottom: 10px;left: 10px;}

    .ten-img {width: auto;height: auto;top: 10px;right: 10px;}
    .ten-number{top: 10px;left: 10px;}

    .eleven-img {width: auto;height: auto;top: 10px;left: 10px;}
    .eleven-number{bottom: 10px;right: 10px;}

    .twelve-img {width: auto;height: auto;top: 10px;left: 10px;}
    .twelve-number{bottom: 10px;right: 10px;}

    .thirteen-img {width: auto;height: auto;bottom: 10px;left: 10px;}
    .thirteen-number{top: 10px;right: 10px;}

    .fourteen-img {width: auto;height: auto;top: 10px;left: 10px;}
    .fourteen-number{top: 10px;right: 10px;}

    .fifteen-img {width: auto;height: auto;bottom: 10px;right: 10px;}
    .fifteen-number{top: 10px;left: 10px;}

    .sixteen-img {width: auto;height: auto;bottom: 10px;right: 10px;}
    .sixteen-number{top: 10px;left: 10px;}

    .seventeen-img {width: auto;height: auto;bottom: 10px;right: 10px;}
    .seventeen-number{top: 10px;left: 10px;}

    .eighteen-img {width: auto;height: auto;top: 10px;left: 10px;}
    .eighteen-number{bottom: 10px;right: 10px;}

    .nineteen-img {width: auto;height: auto;top: 10px;right: 10px;}
    .nineteen-number{top: 10px;left: 10px;}

    .twenty-img {width: auto;height: auto;bottom: 10px;right: 10px;}
    .twenty-number{top: 10px;left: 10px;}

    .twenty-one-img {width: auto;height: auto;bottom: 10px;left: 10px;}
    .twenty-one-number{top: 10px;right: 10px;}

    .twenty-two-img {width: auto;height: auto;bottom: 10px;left: 10px;}
    .twenty-two-number{top: 10px;right: 10px;}

    .twenty-three-img {width: auto;height: auto;bottom: 10px;right: 10px;}
    .twenty-three-number{top: 10px;left: 10px;}

    .twenty-four-img {width: auto;height: auto;bottom: 10px;left: 10px;}
    .twenty-four-number{top: 10px;right: 10px;}

    /* width */
    ::-webkit-scrollbar {
        width: 10px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        background: #ddd; 
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: #000; 
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #000; 
    }
    
    .newsletter-container {
        display: flex;
        flex-direction: row;
        max-width:600px;
        margin:auto;
    }

    .newsletter-left {
        padding: 10px;
        flex: 70%;
    }

    .newsletter-right {
        padding: 10px;
        flex: 30%;
    }

    /* Responsive layout - makes a one column-layout instead of two-column layout */
    @media (max-width: 600px) {
        .newsletter-container {
            flex-direction: column;
            text-align: center;
        }
    
        .logo-container h1 {
            font-size: 18px;
        }
    
        .play-now h1 {
            font-size: 14px;
            font-weight: 100;
            line-height: 21px;
        
        }
    
        .play-now {
            margin: 15px auto;
        }
    
        .logo-container {
        margin-top:100px;
        }
        .ee-logo{
        width:102px;margin-top: 4px;
        }
    
        .cap{
        position: absolute;
            left: -18px;
            top: -18px;
        }

        .cap-img{
            width:40px;
            height:auto!important;
        }

        .img-right img{
            height:auto!important;
        }
            .img-right{
            max-width: 20%;
        }
    
        .img-left img{
            height:auto!important;
        }
        .img-left{
            max-width: 20%;
        }
    
        #adventEventForm{
            min-height: 952px !important;
            overflow-x: hidden !important; 
            overflow-y: hidden !important; 
        }

        .retailer-iframe-modal-content{
          padding: 0px;
          width: 100%!important;
          height: 100%!important;
        }
    }

 .retailerSearchIframeModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index:9999;
  padding:0px;
}

/* Style for the modal content */
.retailer-iframe-modal-content  {
  background-color: #fff;
  padding: 20px;
  width: 80%;
  max-width: 800px;
  height: 80%;
  overflow: hidden;
  position: relative;
}

.retailer-search-close-button {
  position: absolute;
  top: -8px;
  right: 38px;
  cursor: pointer;
  font-size: xx-large;
  color: #000;
}