.image {
                  position: relative;
                  width: 100%; /* for IE 6 */
              }


              a1:hover {
                  background-color: yellow;
              }

@media only screen and (min-width: 501px) {
    .video-container {
        position: absolute;
        top: 0px;
        left: 0;
        bottom: 0;
        z-index: -1;
        display: block;
        background-color: #fff;
        min-width: 635px;
        max-width: 635px;
        min-height: 640px;
        max-height: 640px;
        border: none;
    }
}

@media only screen and (max-width: 500px) {
    .video-container {
        position: absolute;
        top: 120px;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        display: inline-block;
        width: 640px;
        height: 640px;
        background-color: #fff;
    }
}

@media only screen and (min-width: 501px) {
    .fillwidth {
        margin-top: 0px;
        min-height: 640px;
        max-height: 640px;
        height: 600px;
        background-color: #fff;
        display: inline-block;
        max-width: 635px;
        min-width: 635px;
        width: 635px;
        vertical-align: top;
    }

}

@media only screen and (max-width: 500px) {
    .fillwidth {
        width: 100% !important;
        height: 650px !important;
        background-color: #fff;
        display: inline-block;
    }
}
    

     


    .fs1 {
        color: #303030;
    }

.black {
    position: fixed;
    top: 0;
    background: transparent;
    width: 100%;
    height: 90px;
    display: table;
}

        .black ul {
            list-style-type: none;
            padding: 0;
        }

            .black ul li {
                display: inline-block;
                width: 100px;
                color: red;
            }

    .blue {
        position: fixed;
        top: 0;
        background: #444444;
        width: 100%;
        height: 50px;
    }


    #left-panel {
        position: fixed;
        top: 0;
        left: 0;
        width: 80%;
        height: 100%;
        z-index: 2;
        overflow: auto;
        height: 2000px;
    }


    .typewriter h1 {
        overflow: hidden; /* Ensures the content is not revealed until the animation */
        border-right: .1em solid orange; /* The typwriter cursor */
        white-space: nowrap; /* Keeps the content on a single line */
        margin: 0 auto; /* Gives that scrolling effect as the typing happens */
        letter-spacing: .02em; /* Adjust as needed */
        animation: typing 2.3s steps(40, end), blink-caret .75s step-end infinite;
    }

    /* The typing effect */
    @keyframes typing {
        from {
            width: 0%;
        }

        to {
            width: 100%;
        }
    }

    /* The typewriter cursor effect */
    @keyframes blink-caret {
        from, to {
            border-color: transparent;
        }

        50% {
            border-color: white;
        }
    }


    .submit {
        border: 1px solid #563d7c;
        border-radius: 5px;
        color: white;
        padding: 5px 10px 5px 25px;
    }



    .order {
        text-align: center;
        opacity: 1;
        width: 80% !important;
        background-color: transparent;
        background: transparent;
        color: #919191;
        border-radius: 50%;
        -webkit-animation: bounce .3s infinite alternate;
        -moz-animation: bounce .3s infinite alternate;
        animation: bounce .3s infinite alternate;
        -webkit-animation-iteration-count: 6;
        -moz-animation-iteration-count: 6;
        animation-iteration-count: 6;
    }

    @-webkit-keyframes bounce {
        to {
            -webkit-transform: scale(1.2);
        }
    }

    @-moz-keyframes bounce {
        to {
            -moz-transform: scale(1.2);
        }
    }

    @keyframes bounce {
        to {
            transform: scale(1.2);
        }
    }

    @-webkit-keyframes bounce {
        0% {
            transform: scale(1,1) translate(0px, 0px);
        }

        30% {
            transform: scale(1,0.8) translate(0px, 10px);
        }

        75% {
            transform: scale(1,1.1) translate(0px, -25px);
        }

        100% {
            transform: scale(1,1) translate(0px, 0px);
        }
    }

    .bounce {
        text-align: center;
        margin: 0 auto;
        margin-top: 100px;
        height: 20px;
        width: 150px;
        padding: 20px;
        background: tomato;
        -webkit-animation: bounce 0.75s infinite;
    }




    table {
        font-family: arial;
        border-collapse: separate !important;
        border: 1px solid #000;
        border-bottom: 3px solid #00cccc;
        height: 300px;
    }

    td {
        border: 0px solid #ddd;
        padding: 0px 0px;
        background-color: transparent; /* rgba(255, 255, 255, 1); */
        box-shadow: 14px 20px 30px rgba(0, 0, 0, .4);
    }

        td:empty {
            display: none;
        }


    html {
        height: 100%;
    }

    h1 {
        text-align: center;
        margin: 100px auto;
        font-weight: 200;
        font-size: 70px;
    }

    .xbody {
        font-family: sans-serif;
        background: -webkit-linear-gradient(rgba(248, 154, 60, 1), rgba(135, 60, 255, 0.0) 0%), -webkit-linear-gradient(-45deg, rgba(246, 154,60, 0.9) 46%, rgba(255, 255, 255, 1) 0%);
        background: -ms-linear-gradient(rgba(248, 154, 60, 1), rgba(135, 60, 255, 0.0) 0%), -ms-linear-gradient(-45deg, rgba(246, 154,60, 0.9) 46%, rgba(255, 255, 255, 1) 0%);
        background: -moz-linear-gradient(rgba(248, 154, 60, 1), rgba(135, 60, 255, 0.0) 0%), -moz-linear-gradient(-45deg, rgba(246, 154,60, 0.9) 46%, rgba(255, 255, 255, 1) 0%);
    }


    .a12 {
        border: 0px solid #000;
        padding: 10px 10px;
        background-color: transparent; /* rgba(255, 255, 255, 1); */
        box-shadow: 14px 20px 30px rgba(0, 0, 0, .4);
        width: 67%;
        color: #303030;
    }

    .xn1 {
        font-size: 39px;
        text-align: center;
        display: inline-block;
        width: 100%;
        font-weight: normal;
        font-family: sans-serif;
        padding-top: 15px;
        color: #000;
    }

    .xn2 {
        font-size: 23px;
        padding-bottom: 0px;
        padding-top: 15px;
        text-align: justify;
        display: inline-block;
        width: 100%;
        font-weight: bold;
        font-family: Calibri;
        padding-bottom: 10px;
    }

    .xn3 {
        font-family: Calibri;
        text-align: justify;
        display: inline-block;
        width: 100%;
        font-weight: normal;
        padding-bottom: 10px;
        padding-left: 3px;
        color: #333333;
        font-weight: bold;
        font-size: 23px;
    }

    .xn4 {
        display: block;
        font-size: 23px;
        line-height: 128%;
        font-family: sans-serif;
        width: 100%;
        float: left !important;
        font-family: Calibri !important;
        color: #4a4949 !important;
        text-align: justify;
        padding-bottom: 10px;
    }

    .xn5 {
        display: inline-block;
        width: 80%;
        text-align: justify !important
    }




    #test p {
        margin-top: 25px;
        font-size: 21px;
        text-align: center;
        -webkit-animation: fadein 6s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein 6s; /* Firefox < 16 */
        -ms-animation: fadein 6s; /* Internet Explorer */
        -o-animation: fadein 6s; /* Opera < 12.1 */
        animation: fadein 6s;
    }

    @keyframes fadein {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* Firefox < 16 */
    @-moz-keyframes fadein {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* Safari, Chrome and Opera > 12.1 */
    @-webkit-keyframes fadein {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }



    /* Opera < 12.1 */
    @-o-keyframes fadein {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }