body {
    margin: 0px;
    padding: 0px;
    font-family: 'Roboto', sans-serif;
}
.lobby-box .innerbody {
    margin: 0px;
    padding: 0px;
    font-family: 'Roboto', sans-serif;
}
div, ul, li, p, input{ margin:0px; padding:0px; box-sizing:border-box; list-style:none;}
h1, h2, h3, h4, h5, h6{ margin:0px; padding:0px;}
a{ text-decoration:none;}
p{ margin:0xp; padding:0px;}

.main-background{ width:100%; height:100%; position:fixed; left:0px; top:0px; background:url(../images/login-background.jpg) center top no-repeat; background-size:cover; }
.main-background:before{ width:100%; height:100%; position:absolute; left:0px; top:0px; content:''; background:#000; opacity:0.5;}
.main-wrapper{ position:relative; z-index:9000;}


/*header menu*/
.header-menu{border-bottom: rgba(255,255,255,0.2) solid 1px; width:100%; padding:3px 0px; background:rgba(0,0,0,0.2); position:relative; z-index:100;}
.header-menu .inner{ width:1170px; margin:0px auto; display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap;}
.header-menu .inner .logo{margin:0px auto 0px 0px;}
.header-menu .inner .iceil{ margin:-5px 10px 0px 0px;}
.header-menu .inner .mnuright{ }
.header-menu .inner .mnuright ul{margin:0px; padding:0px;}
.header-menu .inner .mnuright ul li{ padding:0px 5px; margin:0px; display: inline-block; text-align:center;}
.header-menu .inner .mnuright ul li a{ font-size:10px; color:#fff; text-transform:uppercase;}
.header-menu .inner .mnuright ul li a img{width:20px; margin:5px 0px;}
/*header menu*/

/*login start*/
.loginwrapper{ background:url(../images/login-background.jpg) center top no-repeat; background-size:cover; width:100%; height:100vh; display:flex; align-items:center;justify-content:center; position:relative;}
.loginwrapper:before{ width:100%; height:100%; background:#000; opacity:0.5; position:absolute; left:0px; top:0px; content:'';}
.login-box{ width:350px; display:flex; margin:0px auto; background:#fff; padding:20px; border-radius:12px; align-items:center; justify-content:space-between; position:relative; z-index:4;}
.login-box .image.signup{height:420px;}
.login-box .image img{ width:100%; height:100%;}
.login-box .form{width:100%; margin:0px;}
.login-box .form h2{ font-size:25px; color:#524f4f; font-weight:600; margin:0px 0px 12px 0px;}
.login-box .form ul{ width:auto;}
    .login-box .form ul li {
        width: auto;
        margin: 8px 0px;
        display: block;
        text-transform: inherit !important;
    }
        .login-box .form ul li.border {
            border:0px !important;
            border-bottom: 2px #ebebeb solid !important;
        }
.login-box .form ul li label{ color:#544e4e; margin:0px; padding:0px; text-transform:capitalize;}
.login-box .form ul li .text{ width:100%; background:#f3f3f3!important; padding:6px; border:0px; border:1px #eee solid; font-size:14px; border-radius:6px; color:#000;}
.login-box .form ul li ::placeholder{font-size:14px;}
.login-box .form ul li .btn{width:100%; background:#0084ff; padding:10px; font-size:16px; font-weight:600; border:0px; border-radius:6px; color:#fff;
margin:5px 0px 5px 0px; cursor:pointer; }
        .login-box .form ul li p {
            width: auto;
            color: #544e4e;
            text-align: center;
            padding: 0px 0px 10px 0px;
            font-size: 15px;
            font-weight: 600;
        }
.login-box .form ul li:last-child p{ padding:0px; border:0px;}
.login-box .form ul li p a{ width:auto; color:#0084ff; font-weight:500;}
    .login-box.short {
        width:auto;        
        display: block;
        min-width: 500PX;
    }

        .login-box.short .form {
            width: 100%;
            margin: 0px;
        }

        .login-box.short .procedd-image {
            width: auto;
            display:flex;
        }

            .login-box.short .procedd-image img {
                width:450px;
                height: auto;
                margin:0px 5px;
            }


    .login-box .login-box { }
    /*login close*/
    /*canvas start*/
/*canvas start*/
.canvasbox{margin:0px; padding:0px; width:100%; height:100%; position:absolute; left:0px; top:0px; box-sizing:border-box; overflow:hidden; text-align:center;}
.canvasbox div{ text-align:center;}
.canvasbox .entryvideo{ width:100%; height:100%; background:#000; position:absolute; left:0px; top:0px; z-index:10; display:none;}
.canvasbox canvas{ width:100%; height:800px;}
.canvasbox .button{ width:100%; height:100%; position:absolute; left:0px; top:0px; background:rgba(0,0,0,0.1); display:flex; align-items:flex-end; 
justify-content:center; text-align:left;}
.canvasbox .button a{ width:110px; background:#0169a8; border-radius:20px; display:block; color:#fff; padding:10px 15px; position:relative; 
margin:0px 0px 40px 0px;}
.canvasbox .button a:hover{ background:#32b314;}
.canvasbox .button a span{ width:28px; height:28px; border-radius:50%; background:#fff; position:absolute; right:5px; top:6px;}
.canvasbox .button a span img{-webkit-animation: arrow 0.8s infinite; margin: 9px 0px 0px 9px;}
@-webkit-keyframes arrow {
  0% {margin: 9px 0px 0px 6px;}
  100% {margin: 9px 0px 0px 10px;}
}
/*canvas start*/
}
/*canvas start*/

/*intro start*/
.introvideo{ width:100%; height:100vh; position:relative; overflow:hidden;}
/*intro start*/
.wrap {   word-wrap: break-word !important;}
/*lobby start*/

.lobby-box{ width:auto; margin:50px 0px 0px 0px; display:flex; align-items:center; position:relative; }		
.lobby-box .inner{ width:1170px; display:flex; justify-content:center;  margin:0px auto; align-items:flex-start; position:relative; z-index:10;}
.leftbox{ width:60%; margin:0px 20px 0px 0px; height:500px;}
.leftbox img{ width:100%!important; object-fit:cover;}


.rightbox{ width:40%; margin:10px 0px 0px 0px;}
.rightbox .content{ width:auto;}
.rightbox .content .boxex{ width:auto; text-align:center;}

.rightbox .content .boxex .box{  cursor:pointer; position:relative;  margin:5px 3px; display:inline-block;}
.rightbox .content .boxex .box a{ display:block; text-decoration:none; color:#000; background:#002984; border:1px #878282 solid; border-radius:8px; 
padding:7px 20px; display:block;}
.rightbox .content .boxex .box .name{ color:#fff; font-weight:600; font-size:15px;}
.rightbox .content .boxex .box .name span{ color:#ffcc01; display:inline-block; margin:0px 0px 0px 3px;}
.rightbox .content .boxex .box .detail{ display:none; position: absolute; border-radius:6px; left:-60px; top:45px; padding:10px; width:250px; z-index:50;}
.rightbox .content .boxex .box .detail:before{ width:23px; height:10px; position:absolute; left:0px; right:0px; top:-18px; margin:0px auto; content:''; 
border-top:10px transparent solid; border-right:10px transparent solid; border-bottom:10px #fff solid; border-left:10px transparent solid;}

.rightbox .content .boxex .box .detail h2{ color:#002984; text-align:center; font-size:14px; font-weight:700; margin:0px 0px 5px 0px;}
.rightbox .content .boxex .box .detail h3{ font-size:14px; margin: 0px 0px 3px 0px; font-weight: 600; color:#000;}
.rightbox .content .boxex .box .detail h4{ font-size:14px; margin: 0px 0px 3px 0px; font-weight: 600; color:#000;}


.rightbox .content .boxex .box .detail p{font-size:13px; line-height:12pt;}
.rightbox .content .boxex .box:hover .detail{ display:block; background:#fff; border-radiu:6px;}
.rightbox .box-heading{ display:block; text-align:center; margin:5px 0px; }
.rightbox .box-heading strong{ display:inline-block; font-size:15px; background:#000; color:#fff; padding:5px 20px; border-radius:20px;}
.leftbox .sponsered{ width:auto; text-align:center; background:#fff; margin:10px 0px 0px 0px; position:relative; z-index:5;}
.leftbox .sponsered img{ margin:0 auto; width:100%; height:auto;}

/*lobby close*/

.background-shadow{ width:100%; height:100%; position:fixed; left:0px; top:0px;background:url(../images/login-background.jpg) center top no-repeat;
                      background-size:cover;}
		.background-shadow:before {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    content: '';
    background: #000;
    opacity: 0.5;
}
            .wrapper{ width:auto; position:relative; left:0px; top:0px; margin:90px 0px 0px 0px;}

            .main-wrapper{width:1170px; margin:0 auto;}
            .wrapper-frame{ width:auto; display:flex; justify-content:space-between; box-sizing:border-box;
                            align-items:stretch;}

            /*camera part*/
            .cemara-part { width:660px; height:400px; box-sizing:border-box; position:relative; display:flex; align-items:center;
			justify-content:space-between; overflow:hidden;}
            .cemara-part .overlay{ width:660px; height:400px; position:absolute; left:0px; top:0px;}
            .cemara-part .overlay img{ width:660px; height:453px; }
            .cemara-part .content{ width:50%; position:relative; z-index:5; padding:20px;}
            .cemara-part .content .staticphoto{ width:auto;}

			.cemara-part .box{ width:auto; border-top:1px #7f8391 dashed; padding:6px 0px 0px; text-align:center;}
            .cemara-part .box h1{ color:#fff; font-size:25px; font-weight:600; margin:0px; padding:0px; line-height:23pt;}
            .cemara-part .box h2{ color:#fff; font-size:18px; font-weight:600; margin:0px; padding:0px;}
			.cemara-part .right-content{ width:48%; text-align:center; padding:20px; position:relative; z-index:10;}

			.cemara-part .video-box{ width:280px; height:350px; background:#000; position:relative;}
            .cemara-part .video-box video{ width:100%; height:100%;}
            .cemara-part .video-box .capture{ position:absolute; left:0px; right:0px; bottom:20px; margin:0 auto; width:40px; height:40px;
                                              background:#b41f1f; border:3px rgba(0,0,0,0.4) solid; outline:1px #b41f1f solid; border-radius:50%; z-index:500; cursor:pointer;}
            /*camera part*/


            /*frames*/
            .frames{ width:390px; background:#000000;}
            .frames .title{ background:url(assets/images/frame-head.png) left top no-repeat; width:128px; height:39px; color:#fff; font-weight:500; font-size:25px;
                            padding:15px 0px 0px 17px; text-shadow:0px 1px 1px #000; }
            .frames .fram-set{ width:auto; display:flex; flex-wrap:wrap; align-items:flex-start; padding:10px; justify-content:space-between;}
            .frames .fram-set .box{ margin:0px; width:29%; margin:8px; height:97px; padding:8px; border:1px #606060 dashed;}
            .frames .fram-set .box img{ width:100%; height:100%;}
            /*frames*/

            /*results*/
            .result-box{ width:auto; margin:0px;}
            .result-box .title{ font-size:25px; color:#fff; font-weight:500; display:none;}
            .result{ width:auto; display:flex; margin:10px 0px 10px 0px; flex-wrap:wrap; align-items:flex-start;}
            .result .box{ width:173px; height:110px; background:#151d34; border:1px #606060 dashed; padding:10px; margin:0px 10px 10px 0px; position:relative;}
            .result .box .btns{ width:100%; height:100%; background:#000; position:absolute; left:0px; top:0px; display:flex; align-items:center;
                                justify-content:center; opacity:0; -webkit-transition:all 0.5s; -moz-transition:all 0.5s;}
            .result .box .btns:hover{opacity:0.7;}
            .result .box .btns .btn{ width:30px; color:#fff; background:#fff; cursor:pointer; height:30px; margin:0px 4px; border-radius:50%; background:#0F0; border:0px;}
            .result .box .btns .btn.delete{ background:url(assets/images/delete-icon.png) center center no-repeat #fff; }
            .result .box .btns .btn.share{ background:url(assets/images/share-icon.png) center center no-repeat #fff;}
            .result .box .btns .btn.download{ background:url(assets/images/download-icon.png) center center no-repeat #fff;}
            .result div img{ width:100%; height:100%;}

            /*results*/

            .output-frame{ width:699px; height:453px;}
            .output-frame .conver-image{position:absolute; width:100%; height:100%; right:0px; top:0px;}

			.livevideo{ width:1346px; position:relative; z-index:10; margin:0px auto;}
        .livevideo img{ width:100%;}
		.livevideo iframe{ position:absolute; left:300px; top:97px; width:745px; height:420px;}


.alertify-notifier {
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    background: #1fb45b;
    padding: 10px;
    color: #fff;
    text-align: center;
    z-index: 10000;
}


.box-wrapper {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: url(../images/login-background.jpg) center top no-repeat;
    background-size: cover;
    position: relative;
}

    .box-wrapper:before {
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.5;
        position: absolute;
        left: 0px;
        top: 0px;
        content: '';
    }

    .box-wrapper .btnbox {
        width: 100%;
        text-align: center;
        position: relative;
        z-index: 10;
    }

        .box-wrapper .btnbox .box {
            display: inline-block;
            width: 350px;
            height:200px;
            margin: 0px 10px;
            position: relative;
            overflow: hidden;
        }
            .box-wrapper .btnbox .box img {
                width: 100%;
                height: 100%;
            }


            .box-wrapper .btnbox .box a {
                width: 100%;
                height: 100%;
                border-radius: 6px;
                display: block;
                overflow: hidden;
            }

            .box-wrapper .btnbox .box .detail {
                width: 100%;
                background:rgba(0,0,0,0.8);
                position: absolute;
                left: 0px;
                bottom: -100px;
                padding: 5px 10px;
                -webkit-transition: all 0.2s;
                -moz-transition: all 0.2s;
            }
            .box-wrapper .btnbox .box:hover .detail {
                bottom: 0px;
            }
                .box-wrapper .btnbox .box .detail h1 {
                    color: #fff;
                    font-weight: 500;
                    font-size: 18px;
                    text-align: left;
                    margin: 0px 0px 5px 0px;
                    font-family: 'Roboto', sans-serif;
                }

                .box-wrapper .btnbox .box .detail h2 {
                    color: #fff;
                    font-weight:500;
                    font-size: 16px;
                    text-align: left;
                    margin: 5px 0px 0px 0px;
                    font-family: 'Roboto', sans-serif;
                }

.gallery {
    width: auto;
    position: relative;
    z-index: 10;
    margin:20px 0px 0px 0px;
}

    .gallery .inner {
        width: 1170px;
        margin: 0px auto;
        display: flex;
        flex-wrap: wrap;
        justify-content:center;
    }

    .gallery .box {
    width: 10%;
    height: 100px;
    margin-bottom: 30px !important;
    margin: 5px;
}

        .gallery .box img {
            width: 100%;
            height: 100%;
        }


.popupwrapper {
    width: 100%;
    height: 100vh;
    position: absolute;
    left: 0px;
    top: 0px;
    background: rgba(0,0,0,0.6);
    z-index: 10000;
    display: none;
}

    .popupwrapper .inner {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .popupwrapper .popupbox {
        width: 1346px;
        margin: 0px auto;
        position: relative;
    }

        .popupwrapper .popupbox img {
            width: 100%;
            position: relative;
        }

        .popupwrapper .popupbox iframe {
            position: absolute;
            left: 297px;
            top: 97px;
            width: 745px;
            height: 420px;

        }

     .popupwrapper .inner .closebox {
        position: absolute;
        right:0px;
        top: 20px;
        border-radius: 10px 0px 0px 10px;
        background: rgb(255 0 0);
        color: #fff;
        text-align: center;
        font-weight: 600;
        padding: 5px 10px;
        z-index: 50;
        cursor: pointer;
        font-size: 14px;
    }

.form-group {
    position: absolute;
    left: 0px;
    bottom: 20px;
    text-align: center;
    margin: 0px auto;
    width: 350px;
    right: 0px;
    background: #fff;
    padding: 0px 0px 10px 0px;
}

    .form-group label {
        color: #000;
        font-weight: 800;
        margin: 10px 0px 0px 0px;
        padding: 0px;
    }

    .footer{ position:fixed; width:100%; left:0px; bottom:0px; padding:5px 0px; background:rgba(0,0,0,0.6);}
    .footer p { color:#fff; text-align:center; font-size:12px;}
    .footer p a {color:#fff;}

    
.ratingactive{
    
    background-color: #e0a800;
    border-color: #d39e00;
        color: #efb610!important;
    }

@media(min-width:0px) and (max-width:764px) {
    .login-box.short { min-width:inherit;}
        .login-box.short .procedd-image img { width:100%; height:auto;}
    .livevideo {
        width: 380px;
    }

        .livevideo iframe {
            position: absolute;
            left: 84px;
            top: 28px;
            width: 212px;
            height: 118px;
        }

    .login-box {
        width: 90%!important;
        flex-wrap: wrap;
        padding:15px;
    }

        .login-box .image {
            width: auto;
            height:auto;
        }

        .login-box .form {
            width: 100%;
            margin: 10px 0px 0px 0px;
        }

    .canvasbox {
        height: auto;
    }

        .canvasbox canvas {
            height: auto;
        }

    .header-menu .inner {
        width: auto;
    }

        .header-menu .inner .mnuright {
            width: 100%;
        }

            .header-menu .inner .mnuright ul {
                text-align: center;
            }

                .header-menu .inner .mnuright ul li {
                    padding: 0px;
                }

    .lobby-box .inner {
        width: auto;
    }

    .leftbox {
        width: auto;
        margin:0px;
		height:auto;
		
    }


    .wrapper {
        width: auto;
        margin: 0px;
    }

    .main-wrapper {
        width:100%;
        padding: 0px;
        margin: 0px auto;
    }

    .wrapper-frame {
        flex-wrap: wrap;
    }

    .cemara-part .student-detail {
        width: 170px;
        height: 52px;
    }

        .cemara-part .student-detail h3 {
            font-size: 12px;
        }

        .cemara-part .student-detail h4 {
            font-size: 11px;
        }

    .output-frame {
        width: 380px;
        height: 200px;
    }

    .cemara-part {
        width: 380px;
        height: 200px;
        flex-wrap: wrap;
    }

        .cemara-part .overlay {
            width: 380px;
            height: 200px;
        }

            .cemara-part .overlay img {
                width: 380px;
                height: 200px;
            }

        .cemara-part .content .staticphoto {
            width: auto;
        }

            .cemara-part .content .staticphoto img {
                width: 100%;
                height: auto;
            }

        .cemara-part .box {
            padding: 0px 0px;
        }

            .cemara-part .box img {
                width: 100px;
                height: auto;
            }

            .cemara-part .box h1 {
                font-size: 12px;
                font-weight: 500;
                line-height: 15pt;
            }

            .cemara-part .box h2 {
                font-size: 10px;
                font-weight: 500;
                margin: 0px;
            }

            .cemara-part .box h3 {
                font-size: 15px;
            }

            .cemara-part .box h4 {
                font-size: 12px;
            }

        .cemara-part .content {
            padding: 10px;
        }

    .frames {
        width: auto;
        margin: 10px 0px 0px 0px;
    }

        .frames .title {
            background: #f1c40f;
            width: auto;
            text-align: center;
            padding: 5px;
        }

    .cemara-part .right-content {
        width: 50%;
        padding: 10px;
    }

    .cemara-part .video-box {
        width: 170px;
        height: 172px;
    }

    .wrapper-frame .frames {
        justify-content: space-between;
    }

        .wrapper-frame .frames .box {
            width: 10%;
            height: 30px;
            padding: 0px;
            margin: 0px;
        }

    .result {
        margin: 0px 0px 0px 0px;
        justify-content: space-between;
        align-items: flex-start;
    }

        .result .box {
            width: 100%;
            height: auto;
            margin: 0px 0px 10px 0px
        }

    .lobby-box .rightbox {
        margin: 10px 0px 0px 0px;
        width:100%;
    }

    .rightbox .content .boxex{ flex-wrap:wrap;}
	.rightbox .content .boxex .box {
        width:100%;
        text-align: center;
        margin:5px 0px 10px 0px;
    }
	.rightbox .content .boxex .box .detail{ display:block!important; position:relative!important; background:#fff; left:0px; top:0px; width:100%!important;
     margin:10px 0px 0px 0px;
	 	
	}

        .rightbox .content .boxex .box a {
            display: block;
            padding: 10px 0px;
        }

    .lobby-box {
        margin: 15px 0px 0px 0px;
        padding: 10px;
    }

        .lobby-box .inner {
            flex-wrap: wrap;
        }

    .header-menu .inner .logo { width:100%; text-align:center;
    }

    .popupwrapper { position:fixed; background:rgba(0,0,0,0.9);}
        .popupwrapper .inner { align-items:flex-start; height:90%;}
        .popupwrapper .popupbox img { display:none;}
    .popupwrapper .popupbox {
        width: 380px;
        margin:130px auto 0px auto;        
    }
        .popupwrapper .popupbox iframe {
            position:inherit;
            left:0px;
            top:0px;
            width:100%;
            height:auto;
        }
    .gallery .inner { width:auto;
    }
	.header-menu .inner .mnuright ul li{ margin:0px 10px;}

}