html {
    margin: 0;
    padding: 0;
}

body {
    margin: 0
}

main {
    border: 0px solid black;
    margin: 0
}

.page-text {
    font-family: Arial;
}
.starter-template {
    text-align: center;
    color:#fff
}

tr, td, hr__ {
    border-top: 1px solid #fff;
}
.ml__tb {
    padding-left: 15px;
    text-align: left;
}
.st__lh {
    line-height: 25px;
}
.tit__h2 {
    text-align: center;
    cursor: default;
    color: #fff;
    font-family: Arial;
}
@media only screen and (max-width: 600px) {
    .hrketl__img {
        border: 0px solid white;
        width:100%;
        height:320px
    }
    .h-img{
        width:70%;
        margin-left:15%
    }
    .vr {
        border: 0px solid blue;
        width: 200px;
        height: 400px;
        margin-left:50px;
        margin-top: -50px;
        -webkit-transform: rotate(-90deg);
    }

    .vertline {
        width: 200px;
        background-color: #000;
        margin-top: -10%;
        animation: lineup 3s forwards;
        transform: rotate(.5trun);
        animation-name: n0
    }

    @keyframes n0 {
        0% {
            height: 100%;
        }

        100% {
            height: 0;
        }
    }

    .hrkt-yzi {
        border: 0px solid red;
        width: 100%;
        height: 130px;
        color: #000;
        font-size: 16pt;
        text-align: center;
        margin-top: -260px;
        margin-bottom: 20px;
    }

    .mov-box {
        width: 100%;
        height: 123px;
        border: 0px solid blue;
        margin-top: 5%
    }

    .p__txt__one {
        color: #fff;
        font-size: 15pt;
    }

    .modal-top {
        margin-top: 5px
    }
}
@media (min-width: 601px) and (max-width: 990px) {
    .hrketl__img {
        border: 0px solid red;
        width: 100%;
        height: 480px
    }

    .h-img {
        width: 60%;
        margin-left: 20%
    }
    .vr {
        border: 0px solid blue;
        width: 160px;
        height: 960px;
        margin-left: 383px;
        margin-top: -250px;
        -webkit-transform: rotate(-90deg);
    }

    .vertline {
        width: 160px;
        background-color: #000;
        margin-top: -10%;
        animation: lineup 3s forwards;
        transform: rotate(.5trun);
        animation-name: n0
    }

    @keyframes n0 {
        0% {
            height: 100%;
        }

        100% {
            height: 0;
        }
    }

    .hrkt-yzi {
        border: 0px solid red;
        width: 100%;
        height:130px;
        color: #000;
        font-size: 16pt;
        text-align: center;
        margin-top: -530px;
        margin-bottom: 20px;
    }
    .mov-box {
        width: 100%;
        height: 123px;
        border: 0px solid blue;
        margin-top:5%
    }

    .p__txt__one {
        color: #fff;
        font-size: 15pt;
    }
    .modal-top{
        margin-top:5px
    }
}

@media (min-width: 992px) and (orientation: landscape) {
    .vr {
        border: 0px solid blue;
        width: 70px;
        height: 1780px;
        margin-top: -780px;
        margin-left: 40%;
        -webkit-transform: rotate(-90deg);
    }

    .vertline {
        width: 70px;
        background-color: #000;
        animation: lineup 3s forwards;
        transform: rotate(.5trun);
        animation-name: n0
    }

    @keyframes n0 {
        0% {
            height: 100%;
        }

        100% {
            height: 0px;
        }
    }

    .hrkt-yzi {
        border: 0px solid red;
        width: 100%;
        height:70px;
        color: #000;
        font-size: 16pt;
        text-align: center;
        margin-top: -925px;
    }

    .mov-box {
        width: 100%;
        height: 151px;
        border: 0px solid gray;
    }

    .mov-hrkt {
        right: 0;
        width: 520px;
        height: 50px;
        border: 0px solid blue;
        margin-left:5%;
        animation: myfirst 5s 1;
        animation-duration: 2s;
        animation-direction: alternate;
    }

    @keyframes myfirst {
        0% {
            bottom: 0px;
            top: 130px;
            opacity: 0;
        }

        100% {
            bottom: 0px;
            top: 0px;
            opacity: 1
        }
    }
    .p__txt__one {
        color: #fff;
        font-size: 16pt;
    }
    .hrketl__img {
        margin-left: 25%;
    }
}

    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.4);
    }

    .modal-one {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.4);
    }

    .modal-content {
        background-color: #fefefe;
        margin: 4% auto;
        padding: 20px;
        border: 0px solid #888;
        width: 50%;
        border-radius: 5px
    }

    .modal-content-one {
        background-color: #fefefe;
        margin: 3% auto 0 auto;
        padding: 20px;
        border: 0px solid #888;
        width: 50%;
        border-radius: 5px
    }

    @media (min-width: 0px) and (max-width: 768px) {
        .modal-content {
            width: 80%;
        }

        .modal-content-one {
            width: 80%;
        }
    }
    /* The Close Button */
    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        text-align: right;
    }

    .close-one {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    .close-one:hover,
    .close-one:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }