html, body{height: 100%;}

#main{
    position: relative;
}
#main img  {
    width:100%;
}
.img_log{
    display:block;
}
.img_mob ,.img_tab{
    display:none;
}
footer img{
   display:none;
    max-width: 65%;
    margin:0 auto;
    opacity: 0;
}

        .login_window{
            position: absolute;
            top:4%;
            right:5%;
            width:21%;
            /*float:right;*/
            /*margin-right:5%;*/
            /*margin-top:2%;*/
            background-color: white;
            border-radius:10px;
            box-shadow:1px 1px 7px #333;

        }
        .login_tittle{
            text-align: center;
            color:#1D4E93;
        }
        input#user_password , input#user_email   {
            width:80%;
            margin: 10px auto;
        }
        #remember{
            width:20px;
            height:20px;
        }
        #login_form input[type=checkbox]{
            display:inline-block;
            float:left;
            margin-left:10%;
        }
        #login_form label{
            line-height: 200%;
            float:left;
            display: inline-block;
            margin-left:10px;
        }
        #loginBtn{
            width:80%;
            margin:50px 10% 40px 10%;
        }
        .msg{
            text-align: center;
        }
        .info_btns{
            margin:5% auto;



            color:white;
        }
        .info_btns :last-child{

        }


        @media only screen and (min-device-width: 698px) and (max-device-width: 1200px){
            footer img{
                display:none;
                max-width: 85%;
            }
            #main img  {
                width:100%;
            }
            .img_tab{
                display:block;
            }
            .img_mob ,.img_log{
                display:none;
            }
            .login_window{
                position:absolute;
                width:66%;
                left:0;
                right:0;
                top:11%;
                margin:auto;
                /*float:none;*/
                /*margin:16% auto 0 auto;*/
                background-color: white;
                border-radius:10px;
                box-shadow:1px 1px 7px #333;
            }
            #loginBtn{
                width:80%;
                margin:40px 10% 25px 10%;
            }
            .wrap_class{
                width:80% !important;
                height:60% !important;
                top:25% !important;
                left:10% !important;
                padding:40px;
                z-index: 2000;
            }
            #about_close{
                position: absolute;
                top:3%;
                left:90%;
                font-size: 18px;
                color:#333;
                background: transparent;
                border:none;
            }


        }

        .toggle {
            margin: 0 0 0.3rem;
            box-sizing: border-box;
            font-size: 0;
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: stretch;
        }
        .toggle input {
            width: 0;
            height: 0;
            position: absolute;
            left: -9999px;
        }
        .toggle input + label {
            margin: 0;
            padding: .3rem 1rem;
            box-sizing: border-box;
            position: relative;
            display: inline-block;
            border: solid 1px #DDD;
            background-color: #FFF;
            font-size: 1.5rem;
            line-height: 140%;
            font-weight: 600;
            text-align: center;
            box-shadow: 0 0 0 rgba(255, 255, 255, 0);
            transition: border-color .15s ease-out,  color .25s ease-out,  background-color .15s ease-out, box-shadow .15s ease-out;
            /* ADD THESE PROPERTIES TO SWITCH FROM AUTO WIDTH TO FULL WIDTH */
            /*flex: 0 0 50%; display: flex; justify-content: center; align-items: center;*/
            /* ----- */
        }
        .toggle input + label:first-of-type {
            border-radius: 6px 0 0 6px;
            border-right: none;
        }
        .toggle input + label:last-of-type {
            border-radius: 0 6px 6px 0;
            border-left: none;
        }
        .toggle input:hover + label {
            border-color: #213140;
        }
        .toggle input:checked + label {
            background-color: #337ab7;
            color: #FFF;
            box-shadow: 0 0 10px rgba(102, 179, 251, 0.5);
            border-color: #337ab7;
            z-index: 1;
        }
        .toggle input:focus + label {
            outline: dotted 1px #CCC;
            outline-offset: .45rem;
        }
        .toggle_wrap{
            margin:5% auto;
            display: table;
        }
        .contact_devide{
            margin:0 5% 15px 5%;
        }



        .wrap_class{
            border-radius: 5px;
            opacity: 0.1;
            width:50%;
            height:60%;
            background: white;
            position: fixed;
            top:20%;
            left:10%;
            padding:60px;
            overflow-y: scroll;
        }
        #about_close{
            position: absolute;
            top:5%;
            left:95%;
            color:#333;
            background: transparent;
            border:none;
            font-size: 18px;
        }

        /*------scroll bar---------------------*/

        ::-webkit-scrollbar {
            width: 7px;
            height: 7px;
        }
        ::-webkit-scrollbar-button {
            width: 0px;
            height: 0px;
        }
        ::-webkit-scrollbar-thumb {
            background: #3086cc;
            border: 0px none #ffffff;
            border-radius: 50px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #3086cc;
        }
        ::-webkit-scrollbar-thumb:active {
            background: #3086cc;
        }
        ::-webkit-scrollbar-track {
            /*background: #333238;*/
            border: 0px none #ffffff;
            border-radius: 50px;
        }
        ::-webkit-scrollbar-track:hover {
            /*background: #333238;*/
        }
        ::-webkit-scrollbar-track:active {
            /*background: #333238;*/
        }
        ::-webkit-scrollbar-corner {
            background: transparent;
        }


        .layer{
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 2200;
            background: #292929;
            opacity: 0.5;
            top: 0;
            left: 0;
            border-radius: 10px;
        }
        .loader{
            position: absolute;
            height: 50px;
            width: 50px;
            left: 44%;
            top: 45%;
            background: transparent;
            border-top: 5px solid white;
            border-radius: 50%;
            box-shadow: 2px 2px 10px white;
            -webkit-animation: rotating 2s linear infinite;
            -moz-animation: rotating 2s linear infinite;
            -ms-animation: rotating 2s linear infinite;
            -o-animation: rotating 2s linear infinite;
            animation: rotating 2s linear infinite;

        }
        @keyframes rotating {
            from {
                -ms-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            to {
                -ms-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }




        @media only screen and (min-device-width: 20px) and (max-device-width: 697px){
            footer img{
                display:none;
                max-width: 100%;
            }
            #main img  {
                width:100%;
            }
            .img_mob{
                display:block;
            }
            .img_tab ,.img_log{
                display:none;
            }

            .login_window{
                position:absolute;
                width:90%;
                top:20%;
                left:0;
                right:0;
                margin:auto;
                background-color: white;
                border-radius:10px;
                box-shadow:1px 1px 7px #333;
            }
            #loginBtn{
                width:80%;
                margin:40px 10% 40px 10%;
            }
            .wrap_class{
                border-radius: 5px;
                opacity: 0.1;
                width:90%;
                height:80%;
                background: white;
                position: fixed;
                top:20%;
                left:5%;
                padding:50px 20px;
                overflow-y: scroll;
                z-index: 2000;
            }
            #about_close{
                position: absolute;
                top:3%;
                left:90%;
                font-size: 18px;
                color:#333;
                background: transparent;
                border:none;
            }


        }

        #forgot{
            display:none;
        }