body, html{
	font-family: 'Light';
	height: 100%;
}
@font-face {
	font-family: 'Light';
	src: url('../fonts/DINNextLTArabic-Light_0.ttf');
}
h1, h2, h3{
	font-family: 'Light';
}
a:focus{
	color: #fff;
	text-decoration: none;
}
/* start global*/

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

 
header .navbar-default{
	background-color: #0db3e3;
	border-color: #0db3e3;
}
header .navbar-default .navbar-nav > li > a{
	color: #FFF;
	font-weight: bold;
	font-size: 16px;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .35 ease-in-out;
}
header .navbar-default .navbar-nav > li > a:hover{
	color: #71ea1f;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .35 ease-in-out;
}
header .navbar{
	margin-bottom: 0;
}
/* start header*/

header{
    position: fixed;
    width: 100%;
    z-index: 999999;
    top: 0;
    transition: 400ms all;
}
header.notfixed{
    top: -150px;
}
.bg-header{
	background-color: #0db3e3;
	 padding-bottom: 14px;
    padding-top: 14px;
}
header .fa{
	color: #FFF;
    font-size: 22px;
 
    margin-left: 10px;
}
.t-left{
	text-align: left;
}
header .fa-facebook{
	padding: 10px 14px 10px 14px;
}
header .fa-instagram{
	padding: 10px 12px 11px 12px;
}
header .show-fa{
	padding: 10px 12px 12px 12px;
	cursor: pointer;
}
.btn-search .fa-search{
	color: #0db3e3
}
.search{
	box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    padding: 15px 30px;
    overflow: hidden;
    background-color: #fff;
    border-bottom: 1px solid #e8eaed;
    transition: top .25s,opacity .4s;
    font-size: 16px;
    display: none;
    z-index: 999;
    position: absolute;
    right: 0;
    left: 0;
    margin-bottom: 30px;
}
.btn-search{
    margin-bottom: -29px;
    margin-left: 17px;
    color: #0db3e3;
    text-align: left;
    display: block;
    border: 0;
    background: none;
    float: left;
    padding-top: 8px;
}
.btn-search:focus{
     outline: none;
}

.subscribe{
	padding-top: 120px;
	padding-bottom: 30px;
	color: #0db3e3;
}
.subscribe h1{
	font-size: 50px;
    font-weight: bold;
    margin-top: 50px;
    margin-bottom: 20px;
}
.subscribe p{
	font-size: 40px;
}
.sub-butn{
	background-color: #0db3e3;
    color: #FFF;
    border: 1px solid #0db3e3;
    padding: 3px 23px 8px 23px;
    font-size: 18px;
    border-radius: 5px;
    margin-top: 50px;
    font-weight: bold;
    -webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .35 ease-in-out;
}
.sub-butn:hover{
	background-color: #fff;
    color: #0db3e3;
    -webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .35 ease-in-out;
}
.rasel{
	font-size: 20px;
	padding-right: 10px;
	color: #0db3e3;
    font-weight: bold;
}
.present{
    padding-top:10px;
    min-height: 10px;
}
.present span{
    height:50px;
    width:50px;
    border-radius: 50%;
    background-color:#0db3e3;
    color:#fff;
    font-size: 25px;
    line-height: 50px;
    
}

.present h2{
    color:#333;
    position: relative;
    margin: 40px auto;
    width:250px;
}
.present h2:after{
    position: absolute;
    bottom: -20px;
    left: 71px;
    content: '';
    border-bottom: 1px solid #0db3e3;
    width: 115px;
}
.present p{
    font-size: 20px;
    width: 44%;
    margin: auto;
    margin-bottom: 20px;
}
.present .row >div{
    margin-top:40px;
}
/* end present section*/

/* start merits*/

.merits{
    background:url("/content/theme-game/image/bg.png") no-repeat top center;
    background-size: 100% 100%;
    padding:120px 0;
    margin-top:50px;
}
.merits span{
    width:50px;
    height:50px;
    border-radius: 50%;
    color:#fff;
    background-color:#6d60af;
    line-height: 50px;
    font-size: 25px;
    text-align: center;
}
.merits h2{
    font-size: 40px;
}
.merits .container >div{
    padding-right: 40px;
}
.merits ul{
    list-style: none;
    font-size: 18px;
    font-weight: bold;
}
.btn-merits{
    margin-right: 30px;
    background-color:#fff;
    border:1px solid #0db3e3;
    color:#0db3e3;
    border-radius: 20px;
    font-size: 18px;
    padding: 6px 21px 13px 21px;
    font-weight: bold;
    -webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .35 ease-in-out;
}
.btn-merits:hover{
    background-color:#0db3e3;
    border-color: #FFF;
    color:#FFF;
    -webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .35 ease-in-out;
}
.btn-merits:focus{
	outline: none;
}
.icon-5{
    background-color: #ffbb44;
    width: 64px;
    text-align: center;
    margin: auto;
    border-radius: 50%;
    padding: 12px 0 10px 0;
}
.icon-6{
    background-color: #71eb20;
    width: 64px;
    text-align: center;
    margin: auto;
    border-radius: 50%;
    padding: 12px 0 10px 0;
}
/* end merits*/


/* start prices*/

.prices{
    min-height: 10px; 
    padding:50px 0;
}
.prices span{
    height:50px;
    width:50px;
    border-radius: 50%;
    background-color:#0db3e3;
    color:#fff;
    font-size: 25px;
    line-height: 50px;
    display:block;
    margin:auto;
}

.prices h2{
    color:#333;
    position: relative;
    margin: 40px auto;
    width:300px;
}
.prices h2:after{
    position: absolute;
    bottom: -20px;
    left: 91px;
    content: '';
    border-bottom: 1px solid #ffbb44;
    width: 111px;
    height: 10px;
}
.prices p{
    font-size: 20px;
    margin-top:30px;
    width: 44%;
    margin: auto;
}
.prices h3{
    margin:20px 0;
}
.prices .row >div{
    margin-top:40px;
}
.prices-box{
	border: 1px solid #e8e8e8;
	padding:40px;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .35 ease-in-out;
}
 .prices-box p{
    color: #333;
    font-size: 25px;
    font-weight: bold;
    width: 100%;
    margin-top: 10px;
    -webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .35 ease-in-out;
}
 .prices-box h3 {
    color: #0db3e3;
    font-size: 30px;
    margin-bottom: 30px;
    -webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .35 ease-in-out;
}

.prices-box .btn{
    border-radius: 10px;
    color:#fff;
    background-color: #0db3e3;
    border:0;
    outline: none;
    padding: 3px 13px 5px 13px;
    -webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .35 ease-in-out;
}
.prices-box:hover .btn{
    color:#0db3e3;
    background-color: #fff;
    -webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .35 ease-in-out;
}
.prices-box:hover{
    background-color: #0db3e3;
    color: #FFF;
    -webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .35 ease-in-out;
}
.prices-box:hover span{
    background-color: #0db3e3;
    color: #0db3e3;
    background-color: #FFF;
    -webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .35 ease-in-out;
}
.prices-box:hover p{
    color: #FFF;
    -webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .35 ease-in-out;
}
.prices-box:hover h3{
    color: #FFF;
    -webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .35 ease-in-out;
}

.gold:hover .btn{
    color: #DAA520 !important;
    background-color: #fff;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .35 ease-in-out;
}
.gold:hover{
    background-color: #DAA520 ;
    color: #FFF;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .35 ease-in-out;
}
.gold:hover span{
    color: #DAA520 !important;
    background-color: #FFF !important;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .35 ease-in-out;
}
.gold:hover p{
    color: #FFF !important;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .35 ease-in-out;
}
.gold:hover h1{
    color: #FFF !important;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .35 ease-in-out;
}
/*  end prices*/

/* start video*/

.video{
     background:url("/content/theme-game/image/bg-v.png") no-repeat top center;
    background-size: 100% 100%;
    padding:250px 0;
    margin-top:50px;
    text-align: center;
}
.video .fa-play{
	color: #FFF;
    background: #0db3e3;
    border-radius: 50%;
    padding: 24px 26px 25px 27px;
    font-size: 20px;
}

/* end video*/

/* start news*/

.news{
    padding:50px 0;
    min-height: 10px;
}
.news span{
    width:50px;
    height:50px;
    border-radius: 50%;
    color:#fff;
    background-color:#71ea1f;
    line-height: 50px;
    font-size: 25px;
    display:block;
    margin:auto;
}
.news h2{
    color:#333;
    position: relative;
    margin: 40px auto;
    width:300px;
}
.news h2:after{
    position: absolute;
    bottom: -20px;
    left: 107px;
    content: '';
    border-bottom: 1px solid #71ea1f;
    width: 94px;
    height: 10px;
}
.news .container  p{
    font-size: 20px;
    margin:30px 0;
    width: 64%;
    margin: auto;
}
.news .row >div>div{
    padding-bottom: 30px;
    -webkit-box-shadow: 2px 6px 17px 2px rgba(219,204,219,1);
-moz-box-shadow: 2px 6px 17px 2px rgba(219,204,219,1);
box-shadow: 2px 6px 17px 2px rgba(219,204,219,1);
}
.news h3{
    font-size: 18px;
    color:#333;
    margin:10px 20px;
}
.news h4{
    font-size: 13px;
    margin:0 20px;
}
.news .row p{
    font-size: 12px;
    color:#bbb;
    margin:5px 20px;
}
.news aside{
    width:100%;
    height:250px;
    position: relative;
    margin-top:30px;
}
.news aside i{
    position: absolute;
    bottom: 20px;
    left:20px;
    width:40px;
    height: 40px;
    border-radius: 50%;
    color:#fff;
    text-align: center;
    font-size: 20px;
    line-height: 40px;
}
.news .left aside{
    background:url("https://cdn.viralscape.com/wp-content/uploads/2014/03/Girl-With-Glasses.jpg") no-repeat top center;
    background-size: 100% 100%;
}
.news .center aside{
    background:url("https://www.essaywow.com/wp-content/uploads/2014/03/man-at-computer.jpg") no-repeat top center;
    background-size: 100% 100%;
}
.news .right aside{
    background:url("https://lifestyle.beiruting.com/wp-content/uploads/2011/09/business-man-resume.jpg") no-repeat top center;
    background-size: 100% 100%;
}
.news .left i{
    background-color:#0db3e3;
}
.news .center i{
    background-color:#ffbb44;
}
.news .right i{
    background-color:#6d60b0;
}
/* end news*/

/* start contact*/

.contact{
    background-color:#0db3e3;
    padding:50px 0;
}
.contact span{
    width:50px;
    height:50px;
    border-radius: 50%;
    color:#0db3e3;
    background-color:#fff;
    line-height: 50px;
    font-size: 25px;
    display:block;
    margin:auto;
}
.contact h2{
    color:#fff;
    position: relative;
    margin: 40px auto;
    width:300px;
}
.contact h2:after{
    position: absolute;
    bottom: -20px;
    left: 109px;
    content: '';
    border-bottom: 1px solid #fff;
    width: 84px;
    height: 10px;
}
.contact .container> p{
    font-size: 20px;
    margin:30px 0;
    color:#fff;
    width: 44%;
    margin: auto;
}
.contact .input-group{
    width:90%;
}
.contact .form-control{
    width:100%;
    background-color:transparent;
    color:#fff;
    border-top:0;
    border-bottom: 1px solid #fff;
    border-right: 0;
    border-left: 0;
    outline: none;
    margin-top:20px;
    box-shadow:none;
}
.contact textarea{
    width:97%;
    margin:40px 0;
    background-color:transparent;
    color:#fff;
    border-top:0;
    border-bottom: 1px solid #fff;
    border-right: 0;
    border-left: 0;
    outline: none;
}
.contact input::-webkit-input-placeholder { 
    color: #fff !important; 
    opacity: 1 !important;
    
}
.contact input:-moz-placeholder { 
    color: #fff !important;
    
}
.contact input::-moz-placeholder {
    color: #fff !important;
    
}
.contact input:-ms-input-placeholder {
    color: #fff !important;
    
}
.contact textarea::-webkit-input-placeholder { 
    color: #fff !important; 
    opacity: 1 !important;
    
}
.contact textarea:-moz-placeholder { 
    color: #fff !important;
    
}
.contact textarea::-moz-placeholder {
    color: #fff !important;
    
}
.contact textarea:-ms-input-placeholder {
    color: #fff !important;
    
}
.contact input[type="submit"]{
    
    background-color:#fff;
    color:#0db3e3;
    text-align: center;
    border-radius: 10px;
    margin: auto;
    display:block;
    font-size: 20px;
    font-weight: bold;
    outline: none;
    border:0;
    padding: 1px 31px 8px 31px;
}
/* end contact*/

/* start footer*/
footer{
    min-height: 10px;
    padding:40px 0;
}
footer p{
    font-size: 16px;
}

/* end footer*/

.bg-all{
	padding-top: 100px;
	padding-bottom: 50px;
	background-color: #ededed;
	overflow: hidden;
}
.bg-btm{
    padding-top: 35px;
    padding-bottom: 50px;
    background-color: #ededed;
    overflow: hidden;
}
.padding-none {
    padding: 0;
}
.box-data {
    background-color: #FFF;
    padding: 50px 0px 0 0 ;
    margin: 1px;
    text-align: center;
    margin-bottom: 25px;
    -webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .35 ease-in-out;
	display: block;
	font-weight: bold;
}
.box-data:hover {
    background: rgba(0,0,0,0.1);
    -webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .35 ease-in-out;

}
.box-data:hover a {
    background-color: #8ada55;
    color: #FFF;
    text-decoration: none;
    -webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .35 ease-in-out;
	display: block;
}
.data-img-user {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: block;
    margin: auto;
}
.box-data a{
    background-color: #0db3e3;
    color: #FFF;
    margin: 80px 0 0 0;
    padding: 5px 5px 21px 5px;	
    font-size: 20px;
    -webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .35 ease-in-out;
	display: block;
	font-weight: bold;
}

.pagi{
	text-align: center;
	margin-top: 40px;
	display: block;
}
.pagination{
	margin:  50px 0 20px 0;
}
.fa-long-arrow-left{
	padding-top: 11px;
    position: absolute;
    margin-right: 15px;
}
.title{
	text-align: center;
    margin-top: -20px;
    margin-bottom: 35px;
    color: #0db3e3;
}
.border-c {
    border-bottom: 2px solid #0db3e3;
    width: 111px;
    margin: auto;
    margin-top: -20px;
    margin-bottom: 20px;
}
.t-courc{
	margin-top: 30px;
}
.team{
	background-color: #FFF;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	padding-bottom: 10px; 
	margin-bottom: 20px;
}
.team img{
	width: 100%;
}
.name-img{
	text-align: center;
	color: #fff;
	background: #000;
	width: 90%;
    margin: auto;
    margin-top: 12px;
    padding: 5px 5px 10px 5px;

}
.icon-show{
	text-align: left;
	color: #0db3e3;
	font-size: 35px;
}

.icon-show .fa{
	cursor: pointer;
}
.box-list{
	padding: 35px 65px;
	background-color: #FFF;
	display: none;
}
.box-list h1{
	color: #0db3e3;
	font-size: 25px;
	font-weight: bold;
}
.box-list a{
	color: #0db3e3;
	font-size: 25px;
	font-weight: bold;
	display: inline-block;
	 -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);
}
.box-list a:hover{
	text-decoration: none;
	  -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);
}
.box-list p{
	font-size: 20px;
}
.cir-a{
	width: 15px;
    height: 15px;
    background: #0db3e3;
    display: inline-block;
    margin-left: 10px;
}
.bg-w{
	padding: 20px;
	background-color: #FFF;
	margin-bottom: 5px;
}
.team-card {
    padding-top: 20px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    background: #fff;
    border-radius: 10px;
    -webkit-box-shadow: 0px 2px 58px -10px rgba(0, 0, 0, 0.48);
    -moz-box-shadow: 0px 2px 58px -10px rgba(0, 0, 0, 0.48);
    box-shadow: 0px 2px 58px -10px rgba(0, 0, 0, 0.48);
}
.bg-te{
    padding-bottom: 20px;
    margin-bottom: 30px;
    background: #fff;
    border-radius: 10px;
    -webkit-box-shadow: 0px 2px 58px -10px rgba(0, 0, 0, 0.48);
    -moz-box-shadow: 0px 2px 58px -10px rgba(0, 0, 0, 0.48);
    box-shadow: 0px 2px 58px -10px rgba(0, 0, 0, 0.48);
    overflow: hidden;
}

.team-card img {
    border-radius: 50%;
    margin: 0 auto;
    width: 60%;
    margin-bottom: 20px;
}
.team-card p {
    color: #2c2c2c;
    font-size: 25px;
    margin-bottom: 5px;
    font-weight: bold;
    text-align: center;
}
.team-card span {
    color: #21b799;
    display: block;
    font-size: 18px;
    text-align: center;
}
 .team-card .social-row {
    margin-top: 15px;
    padding: 20px 50px 20px 20px;
    background: #f7f7f7;
    margin-bottom: 20px;
}
 .team-card .social-row:hover {
    color: #21b799;
}
 .team-card .social-row a {
    color: #A0A0A0;
    padding: 15px;
    border-left:1px solid #e4e4e4;
    transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -o-transition: 0.5s ease;
}
 .social-row a:last-child {
    border-left: 0px;
}
.gold{
	color: #DAA520 !important;
}
.fa-diamond{
	background-color: #DAA520 !important;
}
.title-video{
    text-align: center;
    font-size: 21px;
    margin-top: -20px;	
}

.bg-video{
    padding: 15px;
    text-align: center;	
     background: #fff;
    border-radius: 10px;
    -webkit-box-shadow: 0px 2px 58px -10px rgba(0, 0, 0, 0.48);
    -moz-box-shadow: 0px 2px 58px -10px rgba(0, 0, 0, 0.48);
    box-shadow: 0px 2px 58px -10px rgba(0, 0, 0, 0.48);
    margin: auto;
}
.title-d a{
    display: block;
    font-size: 20px;
    background: #0db3e3;
    margin-bottom: 20px;
    color: #fff;
    padding: 6px 4px 12px 4px;
    font-weight: bold;
    border: 1px solid #0db3e3;
    -webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .35 ease-in-out;
	border-radius: 5px;
}
a:hover{
	text-decoration: none;
}

.title-d a:hover{
    background: #fff;
    color: #0db3e3;
    -webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .35 ease-in-out;
}
.title-d .fa{
    font-size: 16px;

}
.num{
	text-align: center;
	font-weight: bold;
	font-size: 18px;
}
.input__label-content{
	padding: 1px 10px 0;
    font-size: 14px;
    text-align: right;
}
.input__field--hoshi {
    padding: 1.85em 0.15em;
    font-size: 13px;
}
.textarea-a{
	max-width: 100%;
}
.btn-send{
	padding: 0px 24px 5px 25px;
    font-size: 20px;
    background-color: #0db3e3;
    border: 1px solid #0db3e3;
    color: #FFF;
    display: block;
    margin: auto;
     -webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .35 ease-in-out;
}
.btn-send:hover{
    background: #fff;
    color: #0db3e3;
    -webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .35 ease-in-out;
}
.form-module {
  position: relative;
  background: #ffffff;
  max-width: 320px;
  width: 100%;
  border-top: 5px solid #33b5e5;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.form-module .form {
  padding: 40px;
}

.form-module h2 {
  margin: 0 0 20px;
  color: #33b5e5;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
}
.form-module input {
  outline: none;
  display: block;
  width: 100%;
  border: 1px solid #d9d9d9;
  margin: 0 0 20px;
  padding: 10px 15px;
  box-sizing: border-box;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.form-module input:focus {
  border: 1px solid #33b5e5;
  color: #333333;
}
.form-module button {
    cursor: pointer;
    background: #33b5e5;
    width: 100%;
    border: 0;
    font-size: 20px;
    padding: 9px 15px 15px;
    color: #ffffff;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    font-weight: bold;
}
.form-module button:hover {
  background: #178ab4;
}
.form-module .cta {
  background: #b9b0b0;
  width: 100%;
  padding: 15px 40px;
  box-sizing: border-box;
  color: #fff;
  font-size: 14px;
   font-weight: bold;
  text-align: center;
}
.form-module .cta a {
  color: #fff;
  text-decoration: none;
}
.log-so{
	font-size: 18px !important;
	margin-top: 20px !important;
}
.face{
    background-color: #3b5998;
    color: #fff;
    padding: 5px 17px 8px 15px;
    font-size: 20px;
}
.google{
    background-color: #d34836;
    color: #fff;
    padding: 5px 13px 8px 14px;
    font-size: 20px;
}
.face:hover{
    color: #fff;
}
.google:hover{
    color: #fff;
}
.contact-a{
	margin-top: 30px;
}
.contact-a textarea{
	height: 100px !important;
	border: 1px solid #cccccc !important;
	width: 100%;
	display: block;
	margin-bottom: 20px;
}
.textarea-b{
	padding-right: 15px;
	padding-left: 15px;
}
.contact-a .input-group{
	height: 70px;
	margin-bottom: 20px;
}
.contact-a .form-control{
	height: 70px;
	border-right: 0;
	box-shadow: none;
	font-size: 18px;
    font-weight: bold;
}
.contact-a .form-control:focus{
	border-color: #cccccc;
}
.contact-a .input-group-addon{
	background: #FFF;

}
.form-module2{
	max-width: 420px;
}
.form-module2 input{
	font-size: 15px ;
	font-weight: bold;
}
.bg-s{
	background-image: url(/content/theme-game/image/2.jpg);
    background-size: 100%;
    background-repeat: no-repeat; 
    background-color: #eff2f3; 
}
.no-padding{
	padding-right: 0;
	padding-left: 2px;
}

.video2{
	font-size: 16px;
	font-weight: bold;
}
.form-module h3{
	margin: -10px 0 10px;
    color: #33b5e5;
    font-size: 16px;
    cursor: pointer;
}
.modal-content{
    padding: 35px;
    margin-top: 60px;
}
.show-video-btn{
	font-size: 20px;
	font-weight: bold;
	margin-top: 20px !important;
	cursor: pointer;
}
.video-lac{
	width: 90%;
	margin: auto;
	display: none;
}
.show-mobile-btn{
	font-size: 20px;
	font-weight: bold;
	margin-top: 20px !important;
	cursor: pointer;
}
.mobile-num{
	width: 90%;
	margin: auto;
	display: none;
}
.text-online{
    text-align: center;
    font-size: 16px;
    line-height: 1.7;
}
.online-p{
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    color: #000;
    display: block;
}
.social-row2{
     padding: 0px 50px 0px 50px !important;
}
.img-online{
    width: 75% !important;
    border: 5px solid #37dcbb;
    max-height: 280px !important;
}
.img-off{
     border: 5px solid #ec4343;
}

.box-question{
    padding: 20px;
    background-color: #FFF;
    overflow: hidden;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 15px;
     -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);
    cursor: pointer;
}
.box-dictionary{
  background: none;
}
.box-question:hover{
      -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.1);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.1);
    transition: all 200ms ease-in;
    transform: scale(1.1);
}
.box-question a{
    display: block;
    color: #0db3e3;
    margin-top: 6px;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;   
}
.box-question a:focus{
    color: #0db3e3;  
}
.box-question p{
    font-weight: bold;
}
.bg-course {
    padding-top: 80px;
    background-image: url(/content/theme-game/image/3.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: #eff2f3;
}
.time-text{
    font-size: 20px;
}
.bold{
    font-weight: bold;
}
.bg-qu {
    padding-top: 80px;
    background-image: url(/content/theme-game/image/4.jpg);
    background-size: 100% 100% ;
    background-repeat: no-repeat;
    background-color: #eff2f3;
}
.bg-te2{
    padding-bottom: 20px;
    margin-bottom: 30px;
    background: rgba(255,255,255,0.7);
    border-radius: 10px;
    overflow: hidden;
}
.start{
    border: 1px solid #0db3e3;
    background-color: #0db3e3;
    color: #FFF;
    font-size: 18px;
    font-weight: bold;
    padding: 5px 25px 9px 25px;
     -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .35 ease-in-out;
}
.start:hover{
    background-color: #fff;
    color: #0db3e3;
     -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .35 ease-in-out;
}
.start:focus{
     outline: none;
}
.t-q{
    font-size: 18px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 5px;
}
.bg-te3{
    padding: 20px !important;
}
.bg-te3 input[type="radio"] {
  display: none;
}

.bg-te3 input[type="radio"] + label {
  color: #292321;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.bg-te3 input[type="radio"] + label span {
  display: inline-block;
  width: 23px;
  height: 23px;
  margin: -1px 4px 0 4px;
  vertical-align: middle;
  cursor: pointer;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.bg-te3 input[type="radio"] + label span {
  border:1px solid #292321;
}

.bg-te3 input[type="radio"]:checked + label span {
  background-color: #0db3e3;
}

.bg-te3 input[type="radio"] + label span,
.bg-te3 input[type="radio"]:checked + label span {
  -webkit-transition: background-color 0.4s linear;
  -o-transition: background-color 0.4s linear;
  -moz-transition: background-color 0.4s linear;
  transition: background-color 0.4s linear;
}
.bg-te3 .modal-dialog{
    width: 80%;
}
.pointer{
    cursor: pointer;
}
.none-a{
    display: none;
}
.text-back{
    display: block;
    text-align: center; color: #0db3e3;
}
.text-back:focus{
    color: #0db3e3;
}
#timerFixed {
    display: block;
    position: fixed;
    bottom: 0;
    background-color: #0db3e3;
    left: 0;
    text-align: center;
    color: #FFF;
    padding: 20px;
    z-index: 1000;
    font-size: 20px;
    height: 130px;
}
.done{
        border: 1px solid #f1f1f1;
    background: #f1f1f1;
    font-size: 16px;
    padding: 1px 15px 3px 15px;
    margin-top: 11px;
}
.qus{
    font-weight: bold;
    font-size: 20px;
    padding-right: 5px;
}
.answer{
     font-weight: bold;
    font-size: 16px;
    padding-right: 25px;
}
.answ{
    display: none;
}
.bg-te4{
    padding: 20px 40px;
}
.btn-tirm{
    border: 1px solid #0db3e3;
    background-color: #0db3e3;
    color: #FFF;
    font-size: 16px;
    padding: 9px 5px 13px 5px;
    margin: auto;
    display: block;
    margin-bottom: 10px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .35 ease-in-out;
}
.btn-tirm:hover{
    background-color: #fff;
    color: #0db3e3;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .35 ease-in-out;
}
.btn-tirm:focus{
    outline: none;
}
.top-a{
    margin-top: 70px;
}

.start-exam{
    border: 1px solid #0db3e3;
    background-color: #0db3e3;
    color: #FFF;
    font-size: 18px;
    font-weight: bold;
    padding: 5px 25px 9px 25px;
     -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .35 ease-in-out;
}
.start-exam:hover{
    background-color: #fff;
    color: #0db3e3;
     -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .35 ease-in-out;
}
.start-exam:focus{
     outline: none;
}
.details-online{
    font-weight: inherit !important;
    font-size: 16px !important;
}
.modal textarea{
    height: 100px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.title-game{
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}
.title-game span{
    color: #0db3e3;
}
.save-btn{
    margin-top: 20px;
}
.save-a{
   background-color: #0db3e3;
   border: 1px solid #0db3e3;
   color: #FFF;
   padding: 5px 15px 9px 15px;
    font-size: 18px;
        -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: 0 7px #27496d;
    -moz-box-shadow: 0 7px #27496d;
     box-shadow: 0 7px #27496d; 
}
.save-b{
   background-color: #fd4140;
   border: 1px solid #fd4140;
   color: #FFF;
   padding: 5px 15px 9px 15px;
    font-size: 18px;
        -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: 0 7px #c72222;
    -moz-box-shadow: 0 7px #c72222;
     box-shadow: 0 7px #c72222; 
}
.bg-s2{
    margin-top: 50px;
}
.none-game{
    display: none;
}
.save-btn button:focus{
    outline: none;
}
.bg-s3{
}
.bg-s3 p{
    font-size: 15px;
    padding-bottom: 10px;
    padding-top: 10px;
    font-weight: bold;
    border-bottom: 1px solid #000;
    margin: 0;
}
.bg-s3 a{
    color: #000;
}
.top-p{
    margin-top: 21px;
}
.bg-s3 .fa-check{
    color: #4fa00b;
}
.bg-s3 .fa-times{
    color: #ff491e;
}
.vip-gold{
    font-size: 22px !important;
    margin-top: -10px !important;    
}
.col-singup{
    padding-right: 0;
    padding-left: 0;
    border-left: 1px solid;
}
.color-g{
    background-color: #f7bc27;
    color:#FFF;

 }
 .color-b{
     background-color: #f3f3f3;
    color:#000;

 }
 .color-g .fa-check{
    color: #4fa00b !important;
}
.color-g  .fa-times{
    color: #ff491e !important;
}
 .color-b .fa-check{
    color: #4fa00b !important;
}
.color-b  .fa-times{
    color: #ff491e !important;
}
.bg-s4{
    background: none
}
.img-user img{
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background-color: #fff;
    transition: all .2s ease-in-out;
    box-shadow: rgba(0,0,0,.05) 0 0 3px 1px;
    margin: auto;
    display: block;
    margin-top: 30px;
    border: 10px solid #b6efff;
}
.profile{
    padding: 50px;
    background-color: #FFF;
    border-bottom: 1px solid #e0e0e0;
}
.name-user{
    color: #000;
    text-align: center;
}
.type-user{
    font-size: 18px;
    font-weight: bold;
    color: #929292;
    text-align: center;
}
.navbar-secondary {
    background-color: #f5f5f5;
    padding-top: 20px;
    padding-bottom: 25px;
    text-align: right;
}
.navbar-secondary a{
    font-size: 18px;
    margin-left: 3px;
    padding: 8px 10px 13px 10px;
    color: #575858;
    border-radius: 9px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .35 ease-in-out;
}

.data-user{
    background: #f0f0f0;
    padding-top: 30px;
    padding-bottom: 30px;
}
.bg-data{
    background: #FFF;
    padding: 10px 30px;
}
.bg-data h3{
    font-weight: bold;
    font-size: 22px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}
.bg-data p{
    font-size: 16px;
    text-align: justify;
}
.title-data{
    color: #0db3e3;
}
.bg-data2{
    margin-bottom: 20px;
}
.bg-data2 p{
    font-size: 16px;
    font-weight: bold;
}
.fa-bookmark{
    padding-left: 5px;
}
.fa-comments{
    padding-left: 5px;
}
.fa-pencil-square-o{
    float: left;
    cursor: pointer;
}
.btn-send2{
      padding: 0px 11px 5px 11px;
    font-size: 20px;
    background-color: #0db3e3;
    border: 1px solid #0db3e3;
    color: #FFF;  
}
 
.t-message{
    text-align: center;
    margin-top: 4px;
    margin-bottom: 2px;
    color: #0db3e3;
}
.t-form{
    text-align: right;
}

.t-form label{
    font-size: 18px;
}
thead tr th{
    text-align: center;
}
.read .fa-envelope{
    color:#0db3e3;
}
.message-title{
    color:#0db3e3;
    font-size: 16px;
    font-weight: bold;
}
.inbox2{
    display: none;
}
.t-message2{
    font-size: 28px;
}
.prices-box2 span{
    height: 70px;
    width: 70px;
    font-size: 31px;
    line-height: 71px;
    position: absolute;
    top: -39px;
    text-align: center;
    left: 40%;
}

.compar{
    font-size: 20px;
    background: #0db3e3;
    margin: auto;
    display: block;
    width: 120px;
    margin-top: 50px;
    color: #fff;
    padding: 6px 4px 12px 4px;
    font-weight: bold;
    border: 1px solid #0db3e3;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .35 ease-in-out;
    border-radius: 5px;
}

.compar:hover{
    background: #fff;
    color: #0db3e3;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .35 ease-in-out;
    border-radius: 5px;
}
.chart{
    padding-bottom: 50px;
    padding-top: 50px;
}
.chart h2{
    color:#333;
    position: relative;
    margin: 40px auto;
    width:300px;
}
.chart h2:after{
    position: absolute;
    bottom: -20px;
    left: 91px;
    content: '';
    border-bottom: 1px solid #ffbb44;
    width: 111px;
    height: 10px;
}
.title-chart{
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 20px;
}
.small-box {
    border-radius: 2px; 
    position: relative;
    display: block;
    margin-bottom: 20px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.bg-a1{
    background-color: #4cc3d9;
    color: #fff ;
}
.bg-a2{
    background-color: #2ecc71 ;
    color: #fff ;
}
.bg-a3{
    background-color: #d96557;
    color: #fff ;
}
.bg-a4{
    background-color: #ffc65d;
    color: #fff ;
}
.small-box>.inner {
    padding: 35px 10px;
}
.small-box h3 {
    font-size: 38px;
    font-weight: bold;
    margin: 0 0 10px 0;
    white-space: nowrap;
    padding: 0;
}
.small-box p {
    font-size: 15px;
}
.small-box .icon {
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    position: absolute;
    top: -10px;
    left: 10px;
    z-index: 0;
    font-size: 90px;
    color: rgba(0,0,0,0.15);
}
.small-box>.small-box-footer {
    position: relative;
    text-align: center;
    padding: 13px 0;
    color: #fff;
    color: rgba(255,255,255,0.8);
    display: block;
    z-index: 10;
    background: rgba(0,0,0,0.1);
    text-decoration: none;
}
.box.box-danger {
    border-top-color: #dd4b39;
}
.box {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #d2d6de;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.box-header.with-border {
    border-bottom: 1px solid #f4f4f4;
}
.box-header {
    color: #444;
    display: block;
    padding: 10px;
    position: relative;
}

.box-header>.box-tools {
    position: absolute;
    right: 10px;
    top: 5px;
}
.btn-box-tool {
    padding: 5px;
    font-size: 12px;
    background: transparent; 
    color: #97a0b3;
}
.box-header>.fa, .box-header>.glyphicon, .box-header>.ion, .box-header .box-title {
    display: inline-block;
    font-size: 18px;
    margin: 0;
    line-height: 1;
}
.modal-lg-2{
    width: 95%;
}
.modal-lg-2 p{
    width: 100%;
}
.modal-lg-2 .modal-content{

    padding: 0;
}
.panel-title{
    font-family: 'Light';
    font-weight: bold;
}

.panel-title  a:focus{
    color: #0db3e3 !important;
}
.panel-default > .panel-heading {
    color: #0db3e3;
    background-color: #ffffff;
    border-color: #0db3e3;
}

/* User dropdown menu */
.user-icon {
    height: 45px;
    cursor: pointer;
}
.premium-user {
    position: absolute;
    height: 2em;
    margin: 2em -0.5em;
}
.premium-text {
    display: none;
    position: absolute;
    background-color: #f8b517;
    color: #fff;
    font-weight: bold;
    width: 8em;
    text-align: center;
    margin: 6.3em 1em;
    z-index: 1;
    line-height: 0.5em;
    padding-top: 0.5em;
    border-radius: 0.5em;
}
.user-menu {
    display: none;
    position: absolute;
    background-color: #fff;
    list-style: none;
    padding: 0;
    box-shadow: 1px 4px 12px rgba(0,0,0,0.1);
    border-radius: 0.3em;
    width: 10em;
}
.display-block {
    display: block !important;
}
.user-menu img {
    display: inline-block;
    margin-left: 0.6em;
    height: 1em;
}
.user-menu p {
    display: inline-block;
}
.user-menu li {
    color: #333;
    padding: 0.7em 1em 0.3em 2em;
}
.user-menu li:hover {
    background-color: #ededed;
}
.user-menu .logout {
    border-top: 1px solid lightgray;
}

/* Verify Page */
.verify {
    padding: 10em 0 5em;
    text-align: center;
    border-bottom: 1px solid lightgray;
}
.verify img {
    margin-bottom: 2em;
}
.verify p {
    font-size: 1.3em;
}
.verify input {
    margin-top: 1.5em;
    font-size: 1.3em;
    padding: 0.5em 1em 0.8em;
    border: none;
    background-color: #0db3e3;
    color: #fff;
}
.verify input:hover {
    background-color: #0a96bd;
}

/* Game */
.game {
    padding-top: 5.7em;
    height: 100vh;
    background-color: #383837;
}
.game p, li, h1, h2, h3 {
    cursor: context-menu;
}
.game-top {
    height: 60%;
    background-image: url(/content/theme-game/image/game/Audience.svg);
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}
.game-bottom {
    height:50%;
    background-color: #0db3e3;
    background-image: url(/content/theme-game/image/game/pattern.svg);
    background-repeat: no-repeat;
    background-size: cover;
}

.game-score {
    display: inline-block;
    color: #fff;
    background-color: rgba(0,0,0,0.25);
    height: 100%;
    width: 25vh;
}
.game-score ul {
    list-style: none;
    padding: 1em 0;
    font-size: 2.5vh;
    text-align-last: center;
}
.game-score ul li {
    padding: 0 3em 0.2em;
}
.game-list-highlight {
    color: #2e2d2c !important;
    background-color: #ffd22c;
    font-weight: bold;
}
.game-score ul li:hover {
    color: #8fc857;
}

.game-question-number {
    margin-right: 4vw;
    width: 54vw;
    display: inline-block;
    color: #fff;
    text-align-last: center;
    padding: 0 0 1.1%;
    background-color: #2e2d2c;
    border-right: 0.5em solid #8fc857;
    border-left: 0.5em solid #8fc857;
}
.game-question-number h2 {
    font-size: 4vh !important;
}
.game-question-number span {
    color: #ffd22c;
    font-weight: bold;
    margin-right: 0.3em;
}

.game-quit {
    float: left;
    background-color: #5c5958;
    height: 3vw;
    width: 8vw;
    border: none;
    margin-right: 0.5em;
}
.game-quit:hover {
    background-color: #676462;
}
.game-quit p {
    display: inline-block;
    color: #fff;
    font-size: 1.6vw;
    cursor: pointer;
}
.game-quit img {
    height: 50%;
    display: inline-block;
    margin-left: 2%;
    margin-top: -5%;
}

.game-timer {
    position: absolute;
    margin-right: 43vw;
    margin-top: 1vw;
    height: 3vw;
    color: #fff;
    width: 10vw;
}
.game-timer p {
    display: inline-block;
    font-size: 1.6vw;
}
.game-timer span {
    padding: 0 8%;
}
.game-timer img {
    display: inline-block;
    height: 70%;
}

.game-help {
    position: absolute;
    width: 50vw;
    margin-top:20vh;
    margin-right: 27vw;
}

.game-help-button {
    height: 8vw;
    width: 15vw;
    display: inline-block;
    border-radius: 165px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #726e6d;
    border: 2px solid #8fc857;
    opacity: 0.8;
    cursor: pointer;
}

.hide-answer{
    visibility: hidden;
}

.help2-wrap{
    border: 3px solid rgba(143, 200, 87, 0.70);
    display: inline-block;
    position: relative;
}

.help2-number{
    min-height: 5.8vw;
    width: 10vw;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    padding-top: 20px;
    padding-bottom: 20px;
}

.help2-number span{
    text-align: center;
    vertical-align: middle;
    color: #fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 3rem;
}

.help2-number.success span{
    background: #8fc857;
    display: inline-block;
}

.help2-wrap .game-help-button{
    position: absolute;
    top: -35px;
    left: -45px;
    width: 75px;
    height: 75px;
    background-size: 60%;
    border: none;
    background-color: #8fc857;
    cursor: default;
    opacity: 1;
}

.help2-wrap .game-help-button:hover{
    background-color: #8fc857;
    opacity: 1;
}

.help3-wrap{
    border: 3px solid rgba(143, 200, 87, 0.70);
    display: inline-block;
    position: relative;
    top: -45px;
    background-image: url(/content/theme-game/image/game/game-help-audience-bg.png);
    background-color: rgba(255,255,255,0.2);
}

.help3-number{
    min-height: 5.8vw;
    width: 10vw;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    padding-top: 15px;
    padding-bottom: 15px;
}

.help3-number span{
    text-align: center;
    vertical-align: middle;
    color: #fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 3rem;
}

.help3-number div{
    min-height: 100px;
    position: relative;
}

.help3-number .percentage{
background: #FFD22C;
    margin: 0;
    opacity: 1;
    display: inline-block;
    width: 35px;
    position: absolute;
    bottom: 0;
    left: 38.5%;
}

.help3-number.success .percentage{
    background: #8fc857;
    display: inline-block;
}

.help3-wrap .game-help-button{
    position: absolute;
    top: -35px;
    left: -45px;
    width: 75px;
    height: 75px;
    background-size: 75%;
    border: none;
    background-color: #8fc857;
    cursor: default;
    opacity: 1;
}

.help3-wrap .game-help-button:hover{
    background-color: #8fc857;
    opacity: 1;
}

.game-help-delete {
    background-image: url(/content/theme-game/image/game/help-delete.svg);
    background-size: 70%;
}
.game-help-friend {
    background-image: url(/content/theme-game/image/game/help-friend.svg);
    background-size: 35%;
    margin: 0 2%;
}
.game-help-audience {
    background-image: url(/content/theme-game/image/game/help-audience.svg);
    background-size: 55%;
}
.game-help-button:hover {
    opacity: 1;
    background-color: #8fc857;
}
.game-help-button:hover p {
    opacity: 1;
}
.game-help p {
    color: #8fc857;
    font-weight: bold;
    font-size: 2vw;
    margin-top: 54%;
    text-align: center;
    opacity: 0;
}

.game-question h1{
    font-weight: bold;
    text-align: center;
    margin: 0;
    font-size: 5vh;
}
.game-answers {
    width: 72.5vw;
    margin: 0 auto;
}
.game-answer {
    display: inline-block;
    width: 35vw;
    margin-top: 2vw;
    background-image: url(../image/game/answer.svg);
    background-repeat: no-repeat;
    background-position: center;
    height: 6vw;
    color: #fff;
    cursor: pointer;
}
.game-answer:nth-child(2), .game-answer:nth-child(4) {
    margin-right: 1.2vw;
}
.game-answer-temp:hover {
    background-image: url(../image/game/answer-hover.svg);
    color: #333
}
.game-answer h3 {
    font-weight: bold;
    font-size: 2.2vw;
    display: block;
    margin: 4.2% 5.5% 0 0;
    cursor: pointer;
}
.game-correct {
    background-image: url(/content/theme-game/image/game/answer-right.svg);
    color: #333
}
.game-wrong {
    background-image: url(/content/theme-game/image/game/answer-wrong.svg);
    color: #333
}

#quit {
    position: absolute;
    width: 100vw;
    height: calc(100vh - 80px);
    background-color: rgba(0,0,0,0.65);
    z-index: 2;
    display: none;
}
.quit-msg {
    width: 60vw;
    height: 26.4vw;
    margin: 20vh auto;
    background:#0e0e0e94;
	border:4px solid #0db3e3;
	border-radius:15px;
    background-repeat: no-repeat;
}
.quit-msg h2 {
    color: #0db3e3;
    font-weight: bold;
    font-size: 5vw;
    text-align: center;
    padding-top: 3.5vw;
}
.quit-msg a {
    font-size: 2.5vw;
    font-weight: bold;
    color: #fff;
    display: inline-block;
    width: 25%;
    text-align: center;
    margin-top: 5vw;
    margin-right: 16%;
    padding: 2% 3% 3% 3%;
    border-radius: 20%;
    cursor: pointer;
}
.quit-msg a:nth-child(2) {
    background-color: #8fc857;
}
.quit-msg a:nth-child(3) {
    background-color: #c65858;
}
.quit-msg a:nth-child(2):hover {
    background-color: #7caf4a;
}
.quit-msg a:nth-child(3):hover {
    background-color: #ae4d4d;
}

.check-top {
    height: 70%;
    overflow: hidden;
}
.check-top img {
    height: 90%;
    display: block;
    padding: 0;
    margin: 2% auto;
}
.check {
    height: 30vw;
    background-image: url(/content/theme-game/image/game/check.svg);
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    margin: 2% auto;
}
.check-data {
    color: #6e5555;
    position: absolute;
    font-size: 1.5vw;
    font-weight: bold;
    -ms-transform: rotate(-1.5deg); /* IE 9 */
    -webkit-transform: rotate(-1.5deg); /* Chrome, Safari, Opera */
    transform: rotate(-1.5deg);
    margin: 10.5% 33.5%;
}
.check-amount {
    padding-top: 3%;
}
.check-amount-digit {
    margin: -12% 160%;
}
.check-options {
    padding-top: 3vw;
}
.check-options a {
    font-size: 3vw;
    font-weight: bold;
    border-radius: 10%;
    padding: 0.5vw 2vw 1.5vw;
    display: block;
    text-align: center;
    margin: 0 auto;
}
.check-options a:nth-child(1) {
    width: 22vw;
    background-color: #8fc857;
    color: #383837;
    margin-bottom: 3vw;
}
.check-options a:nth-child(1):hover {
    background-color: #7caf4a;
}
.check-options a:nth-child(2) {
    width: 16vw;
    background-color: #c65858;
    color: #fff;
}
.check-options a:nth-child(2):hover {
    background-color: #ae4d4d;
}










.text-center {
    text-align: center;
}

.content-w3ls {
margin-top:115px;
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.agileits-grid {
    max-width: 500px;
    margin: 0 5vw;
    padding: 3.5vw;
    box-sizing: border-box;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    background: rgba(249, 249, 249, 0.24);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.49);
}
.content-w3ls .quit-msg {
    width: 60vw;
    height: auto;
    margin: 12vh auto;
  background:#0e0e0e94;
	border:4px solid #0db3e3;
	border-radius:15px;
    background-repeat: no-repeat;
}
.content-top-agile,
.content-bottom,
.wthree-field {
    flex-basis: 100%;
	width:70%;
	margin:12px auto;
    -webkit-flex-basis: 100%;
}

.content-top-agile {
  margin: 6px auto;
    padding: 2px 2em;
  
    border-radius: 20px;
    width: 70%;
}

.content-w3ls .quit-msg .content-top-agile h2 {
    color: #ffffff;
    font-weight: 400;
	padding:0px;
	
    font-size: 1.3em;
    text-transform: uppercase;
}

.field_w3ls {
    background: #fff;
}

h1.title-agile {
    font-size: 2.8em;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 3px;
    word-spacing: 3px;
    margin: 1em 1vw 1em;
    text-align: center;
   
}

.content-w3ls ul li {
    display: inline-block;
}

li.switch-agileits {
    float: left;
}

ul.list-login li:nth-child(2) {
    float: right;
}

li:nth-child(2) a {
    color: #000;
}

/* form style  */

form .field-group {
    display: flex;
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Chrome */
}

.field-icon {
    float: right;
    margin-left: -30px;
    margin-top: 25px;
    position: relative;
    z-index: 2;
}

ul.list-login {
    margin: 2em 0 0;
}

.field_w3ls {
    background: #ffffff;
    border-radius: 5px;
    margin: 0em 0;
}

.field-group input:last-child {
    border-bottom: 1px solid #c2c5ca;
}

.field-group input {
    padding: 12px 15px;
    font-size: 16px;
    border: none;
    background: transparent;
    box-sizing: border-box;
    width: 100%;
   
    outline: none;
}

.wthree-field input[type="submit"] {
    background: #0db3e3;
    width: 100%;
    border: none;
    color: #fff;
    padding: 12px 15px;
    border-radius: 20px;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;

    cursor: pointer;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

.wthree-field input[type="submit"]:hover {
    background: #000;
    color: #fff;
    letter-spacing: 2px;
}

/* switch */

label.switch {
    position: relative;
    display: inline-block;
    height: 23px;
    padding-left: 5em;
    cursor: pointer;
    color: #000;
}

li:nth-child(2) a,
label.switch {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 26%;
    background-color: #777;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: #0db3e3;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* //switch */

.copyright {
    margin: 4em 0 2em;
}

.copyright p {
    color: #000;
    letter-spacing: 1px;
    margin: 0 1em 1em;
    font-weight: 600;
    font-size: 1em;
}

.copyright p a {
    color: #000;
}

/* //content */

@media (max-width: 1920px) {
    h1 {
        font-size: 3.5vw;
    }
}

@media screen and (max-width: 768px) {
    .content-top-agile {
        padding: 2em;
    }
}

@media screen and (max-width: 480px) {
    .content-w3ls {
        margin: 3em 1em;
    }
    h1.title-agile {
        font-size: 2.3em;
        letter-spacing: 3px;
    }
    label.switch {
        padding-left: 4em;
    }
    .content-top-agile {
        padding: 1.5em;
    }
}

@media screen and (max-width: 414px) {
    h1.title-agile {
        font-size: 2.2em;
    }
    ul.list-login li:nth-child(2),
    li.switch-agileits {
        float: none;
    }
    ul.list-login li:nth-child(2) {
        margin-top: 1em;
    }
    form .field-group .wthree-field {
        flex: 3 40%;
    }
}

@media screen and (max-width: 384px) {
    h1.title-agile {
        font-size: 2.1em;
    }
    .content-w3ls {
        margin: 2em 1em;
    }
    .wthree-field input[type="submit"] {
        padding: 7px 15px;
    }
    .content-top-agile {
        padding: 1.3em;
    }
}

@media screen and (max-width: 375px) {
    h1.title-agile {
        font-size: 2em;
    }
    .content-bottom {
        padding: 1em;
    }
    .field_w3ls {
        margin: 1em 0;
    }
    .copyright p {
        letter-spacing: 0.5px;
    }
}

@media screen and (max-width: 320px) {
    h1.title-agile {
        font-size: 1.7em;
    }
    .content-bottom {
        padding: 2em 1.5em;
    }
    .content-top-agile h2 {
        font-size: 1.2em;
    }
    .content-bottom {
        padding: 1em 0em;
    }
    .content-top-agile {
        padding: 1em;
    }
}









.biblotech{text-align:center;
background:rgba(0,0,0,0.75);
border-radius:15px;
padding:0px 12px 20px 12px;
     position: absolute;
    left: 3%;
    top: 30%;
}
.biblotech h2{color:#ffd22c;
}
.biblotech p{color:#fff;
}
.biblotech button{    font-size: 15px;
    font-weight: bold;
    text-align: center;
    text-transform: capitalize;
    letter-spacing: 2px;
    width: 70%;
    margin: 0 auto;
    display: block;
    padding: 8px;
    background: #ffe427;
    border: none;
	border-radius:13px;
    outline: none;
    color: #000;
    cursor: pointer;
}







.agile-top {
    width: 45%;
    margin: 0 auto;
    background: #0b0c0cbf;
    padding: 30px;
    box-shadow: 2px 2px #ffe427;
	position: absolute;
	top:30%;
	right:30%;
	
}
.agile-top h2 {
    font-size: 35px;
    font-weight: 500;
    text-align: center;
    text-transform: capitalize;
    letter-spacing: 1px;
    color: #fff;
    margin: 15px 0 15px 0;
    padding: 0;
}
.agile-top p {
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    text-transform: capitalize;
    letter-spacing: 2px;
    color: #fff;
    margin: 30px 0 30px 0;
    padding: 0;
}
.agile-top input[type="email"] {
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    text-transform: capitalize;
    letter-spacing: 1px;
    padding: 10px;
    margin: 0 0 50px 0;
    width: 100%;
    box-sizing: border-box;
    border: none;
    outline: none;
    color: #000;
    background: #eae7e7;
}
.agile-top button.submit {
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    text-transform: capitalize;
    letter-spacing: 2px;
    width: 30%;
    margin: 0 auto;
    display: block;
    padding: 8px;
    background: #ffe427;
    border: none;
    outline: none;
    color: #000;
	cursor:pointer;
}
.agile-top button:hover {
    background: #05c386;
    color: #fff;
    transition: 0.5s ease-in;
}

.agile-top span{color:#ffe427;
font-weight:bold;}
.alert-close {
    background: url(../image/game/into.png)no-repeat 0px 0px;
    cursor: pointer;
    height: 22px;
    width: 22px;
    position: absolute;
    right:0px;
    top: 13px;
    transition: color 0.2s ease-in-out;
   
}
/*--responsive--*/
@media(max-width:1920px){
	
}
@media(max-width:1680px){
	
}
@media(max-width:1600px){
	
}
@media(max-width:1440px){
	
}
@media(max-width:1366px){
	
}
@media(max-width:1280px){
	.agile-top {
		width: 51%;
	}
}
@media(max-width:1080px){
	.agile-top {
		width: 60%;
	}
	.biblotech {
      text-align: center;
    background: rgba(0,0,0,0.75);
    border-radius: 15px;
    padding: 0px 1px 20px 4px;
    position: absolute;
    left: 3%;
    top: 30%;
    width: 20%;
}
.biblotech h2{font-size:18px;
margin-top:8px;
}
@media(max-width:1050px){
	
}
@media(max-width:1024px){
	.agile-top {
		width: 65%;
	}
}
@media(max-width:991px){
	.agile-top {
		width: 70%;
		right:20%;
	}
}
@media(max-width:900px){
	.agile-top {
		width: 75%;
		right:20%;
	}
}
@media(max-width:800px){
	.agile-top {
		width: 80%;
		right:10%;
	}
}
@media(max-width:768px){
	.biblotech {
    text-align: center;
    background: rgba(0,0,0,0.75);
    border-radius: 15px;
    padding: 0px 2px 8px 2px;
    position: absolute;
    left: 22%;
    width: 38%;
    top: 38%;
}
}
@media(max-width:736px){
	.agile-top {
		width: 85%;
		right:10%;
	}
}
@media(max-width:667px){
	.agile-top h2 {
		font-size: 30px;
	}
	.agile-top button.submit {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-transform: capitalize;
    letter-spacing: 2px;
    width: 70%;
    margin: 0 auto;
    display: block;
    padding: 8px;
    background: #ffe427;
    border: none;
    outline: none;
    color: #000;
    cursor: pointer;
}
	.agile-top p {
		font-size: 13px;
	}
	span {
		font-size: 30px;
	}
	.biblotech h2{color:#ffd22c;
	font-size:14px;
	    margin-top: 5px;
}
.biblotech p{color:#fff;
font-size:10px;
}
.biblotech button {
    font-size: 11px;
    font-weight: bold;
    text-align: center;

    width: 90%;
    margin: 0 auto;
    display: block;
    padding: 5px;
    background: #ffe427;
    border: none;
    border-radius: 13px;
    outline: none;
    color: #000;
    cursor: pointer;
}
}
@media(max-width:600px){
	
}
@media(max-width:568px){
	
}
@media(max-width:480px){
	h1 {
		font-size: 30px;
	}
	.biblotech {
    text-align: center;
    background: rgba(0,0,0,0.75);
    border-radius: 15px;
    padding: 0px 2px 8px 2px;
    position: absolute;
    left: 2%;
    width: 58%;
    top: 38%;
}
}
@media(max-width:414px){
	.agile-top {
		width: 80%;
	}
	
	h1 {
		font-size: 25px;
	}
}
@media(max-width:384px){
	
	.agile-top {
		width: 78%;
	}
}
@media(max-width:375px){
	
}
@media(max-width:320px){
	.agile-top h2 {
		font-size: 25px;
	}
	span {
		font-size: 25px;
	}
	.agile-top p {
		font-size: 12px;
	}
			
}
/*--/responsive--*/