@charset "utf-8";





body { margin:0px; padding:0px; color:#000; font-family: Arial, Helvetica, sans-serif;}

.bgone {
  background: url(../images/bg1.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100% 100%;
}
.bgtwo {
  background: url("../images/bg2.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.wrapper {
	width:100%;
	height :100vh;
	position:relative;
}


.timerheadebox { width:auto; margin: 0 auto; margin-top: 25%;}
.loginheadebox { width:800px; margin:0 auto; margin-top:4%;} 
.joineheadebox { width:800px; margin:0 auto; margin-top:4%;}
.bottom-logo {position:absolute; right:15px; bottom:15px; padding: 5px; background: rgb(255,255,255,0.8); }
.bottom-logo img{ width:120px;}

.bottom {position:absolute; width: 100%; bottom:15px; padding: 5px; background: }	
.botmidlogo {width: 30%; padding: 15px 10px;}
.countdown { width:80%; margin:0 auto; margin-top:15%; margin-left: 10%; text-align:center;}
.coundownboximg { width:800px; margin:0 auto; margin-top:5%; text-align:center;}
.coundownboximg img{ width:90%; margin:0 auto; margin-left:10%;}
.countdown h1{font-size: 66px;}
.countdown h2{ font-family: Arial, Helvetica, sans-serif; color:#067141; font-size:50px; font-weight:bold;}
.countdown h3{ font-family: Arial, Helvetica, sans-serif; color:#000; font-size:30px;}
.form-control {background-color: #d6e1e4; border-radius: 0px; background-clip: inherit;  border: 1px solid #b1b1b1;}
.disc { width: 100%; font-size: 13px; margin: 0 auto; font-family: Arial, Helvetica, sans-serif; color: #000;}
.coundownbox form{ width:60%; margin:0 auto; }
/*.smalltext { font-size:36px;  font-family: 'BebasNeue'; line-height: 60px; color:#f8c735; text-shadow: 2px 2px 4px #000;}*/
.smalltext {font-size:20px;  font-family: Arial, Helvetica, sans-serif; font-weight: bold; color:#ffffff; line-height: 0px; margin-top: -60px;}
.coundownbox>div {position:relative;}

.botline { position: absolute; bottom: 10%; right: 5%; font-size: 42px; font-weight: bold;}


.joinnow { width: 300px; margin-left: 10%; margin-top: 250px; }

.modal-content { background-color: rgb(000,000,000, 0.7); border-radius: 0px;}
.modal-header { border-bottom: 4px solid #40774b;}
.modal-title { color: #ffff; font-size: 30px; }
.modal-body form{ width: 90%; margin:0 auto;  }
.submit { width: 160px; }
.close {
    position: absolute;
    right: 0px;
    top: -38px;
    z-index: 99;
    color: #fff;
    background: #00123a;
    /* border: 2px solid #fff; */
    padding: 10px 10px 10px 10px!important;
    opacity: 1;
    font-size: 30px;
    line-height: 19px;
    outline: none;
    background-color: rgb(000,000,000)!important;
}
.close:hover {
    color: #fff;
    text-decoration: none;
}
.formbox {
    width: 700px;
	margin:0 auto;
}
.formbox form {
    width: 80%;
    margin: 0 auto;
	margin-top:40px;
}
.form-control {
    color: #000;
    border-radius: 10px;
    background-color: #ffffff;
    background-clip: inherit;
    border: 1px solid #ffffff;}
.loginbtn{ 
	background-image: linear-gradient(to bottom, #c36e07, #cc750d, #d57c12, #de8416, #e78b1b);
	color: #fff;
	width:140px;
    padding: 2px 15px;
    line-height: 1em;
    font-size: 30px;
    border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    letter-spacing: 1.5px;
    border: 2px solid #f4a022!important;
    box-shadow: 1px 2px 9px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 1px 2px 9px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 2px 9px 0px rgba(0,0,0,0.75);} 
 

.gredbox {
    
    display: inline-block;
    margin: 0 auto;
    margin-top: 50px;
}
.video-box {
    margin-bottom: 0px;
    background: #606060;
    width: 1230px;
    height: 679px;
    z-index: 1;
    border-style: solid;
    border-width: 5px;
    border-image: radial-gradient(rgb(24 122 79), rgb(24 122 79), rgb(24 122 79)) 1;

}
.boxp {
    width: 1230px;
    background: #252424;
    color: #fff;
    margin: 0;
    padding: 5px;
    font-size: 20px;
    font-weight: normal;
    text-align: left;
    border: 5px solid #252424;
}

.functionbox {
    width: 100%;
    margin-top: 50%;
    display: inline-block;
}

.functionbox ul {
    padding: 0px;
}
.functionbox ul li {
      width: 26%;
    margin: 10% auto;
    list-style: none;
}
.popclosebtn {
    background: #000!important;
    width: auto!important;
    height: auto!important;
    top: -42px!important;
    right: 0px!important;
    position: absolute!important;
    padding: 9px 10px!important;
    z-index: 9999;
}

#warning-message {display: none;}


@media (max-width:1680px){ 
 
.loginheadebox {
    width: 550px;
    margin: 0 auto;
    margin-top: 0%;
}
.joineheadebox {
    width: 550px;
    margin: 0 auto;
    margin-top: 0%;
}
.botline { font-size: 38px;}
.video-box { width: 1020px; height: 574px;}
.boxp {width: 1020px; font-size: 16px; }
}
@media (max-width:1600px){ 
 
.announcement{margin-top: 10%;}
.gredbox {
    margin-top: 20px;
}
.video-box { width: 950px; height: 534px;}
.boxp {width: 950px; font-size: 15px; }


}
@media (max-width:1536px){ 
 
#clockdiv > div { width: 190px;}
#clockdiv div > span { width: 180px; height: 180px; font-size: 60px; line-height: 130px;letter-spacing: 4px;}
.botline { font-size: 32px; }
.joinnow {
    width: 250px;
    margin-left: 10%;
    margin-top: 220px;
}
}
@media (max-width:1440px){ 
.video-box {
    width: 915px;
    height: 515px;
}
.boxp {
    width: 915px;
    font-size: 14px;
}

}
@media (max-width:1366px){  
.loginheadebox { width:540px; margin:0 auto; margin-top:0%;} 
.joineheadebox { width:540px; margin:0 auto; margin-top:0%;} 
#clockdiv > div { width: 190px;}
#clockdiv div > span { width: 160px; height: 160px; font-size: 50px; line-height: 110px;letter-spacing: 4px;}
.smalltext { font-size: 18px; line-height: 0px;}
.agenda_bg{width:700px; margin:0 auto; margin-top:50px;}
.logo-right {
    width: 180px;
    position: absolute;
    right: 15px;
}
.video-box {
    width: 850px;
    height: 478px;
}
.boxp {
    width: 850px;
    font-size: 13.5px;
}
.countdown h2 {
    font-family: Arial, Helvetica, sans-serif;
    color: #067141;
    font-size: 35px;
}
.joinnow {
    width: 220px;
    margin-left: 10%;
    margin-top: 220px;
}
.submit { width: 140px; }
.botline { font-size: 28px; }
.botmidlogo {
    width: 30%;
    padding: 20px 10px;
}
.botfirstlogo {    padding-top: 15px;}
}
@media (max-width:1343px){ 
.formbox form {
    width: 80%;
    margin: 0 auto;
    margin-top: 15px;
}
}
@media (max-width:1280px){ 
#clockdiv > div { width: 150px;}
#clockdiv div > span { width: 140px; height: 140px; font-size: 40px; line-height: 110px;}
.smalltext { font-size: 15px; line-height: 0px; margin-top: -40px;}

.gredbox {
    margin-top: -20px;
}
.video-box {
    width: 790px;
    height: 444px;
}
.boxp {
    width: 790px;
    font-size: 12px;
}
}
@media (max-width:1250px){ 

}
@media (max-width:1024px){  
.loginheadebox { width:500px;}
.joineheadebox { width:500px;}
.gredbox {
    margin-top: 0px;
}
.video-box {
    width: 640px;
    height: 360px;
}
.boxp {
    width: 640px;
    font-size: 10px;
} 
.botline { font-size: 24px; }
}
@media (max-width:952px){ 
.timerheadebox { margin-top: 18%;}
#clockdiv { margin-top: 15px;}
#clockdiv div > span {  width: 100px; height: 100px; font-size: 30px; line-height: 75px;-webkit-text-stroke-width: 0px;}
#clockdiv > div{font-size: 32px; width: 105px;}
.loginheadebox { width: 300px;  margin-top: -6%;}
.joineheadebox { width: 300px;  margin-top: -2%;}
.formbox form { width: 50%; margin-top: 20px;}
.smalltext { font-size: 11px; line-height: 20px;}
.disc { width: 70%; font-size: 12px;}
.bottom-logo img {
    width: 80px;
}
.announcement{margin-top: 4%;}
.announcement h1{font-size: 55px;}	
.agenda_bg{width:100%; margin:0 auto; margin-top:50px;}

.logo-left {
    width: 150px;
    position: relative;
    left: 15px;
}

.logo-right {
    width: 150px;
    position: absolute;
    right: 15px;
}
.gredbox {
    margin-top: 15px;
}
.video-box {
    width: 400px;
    height: 225px;
}
.boxp {
    width: 400px;
    font-size: 10px; display: none;
} 
.joinnow { width: 150px; margin-top: 100px; }
.submit { width: 100px; }
.disc { display: none; }
.countdown h2 {
    font-family: Arial, Helvetica, sans-serif;
    color: #067141;
    font-size: 25px;
}
.countdown h3 {

    font-size: 20px;
}
.countdown {
    width: 70%;
    margin: 0 auto;
    margin-top: 10%;
    margin-left: 10%;
    text-align: center;
}
.botline {
	position:fixed;
	bottom:6%;
    font-size: 15px;
}
.modal-title { color: #ffff; font-size: 24px; }
.botmidlogo {
    width: 45%;
    padding: 20px 10px;
}
.botfirstlogo { padding-top: 30px; }
.botlastlogo { width: 20%; }
}	

@media (max-width:851px){  
#clockdiv div > span {  width: 95px; height: 95px; font-size: 32px; line-height: 75px;}
#clockdiv > div{font-size: 28px; width: 105px;}
.loginheadebox { width: 260px;  margin-top: -6%;}
.joineheadebox { width: 300px;  margin-top: -2%;}
.coundownbox { margin-top: 10px;}
.smalltext {
    font-size: 10px;
    line-height: 24px;
}
.announcement h1{font-size: 50px;}


.logo-left {
    width: 120px;
    position: relative;
    left: 15px;
}
.logo-right {
    width: 110px;
    position: absolute;
    right: 15px;
}
.video-box {
    width: 350px;
    height: 197px;
}
.boxp {
    width: 350px;
    font-size: 10px;
} 
.botmidlogo {
    width: 45%;
    padding: 30px 10px 5px 10px;
}	
}

@media (max-width:836px){ 
.announcement{margin-top: 2%;}
.announcement h1{font-size: 30px;}	
.functionbox {
    width: 100%;
    margin-top: 30%;

  }
  .functionbox ul li {
    width: 32%;
    margin: 10% auto;
    list-style: none;
}
}
@media (max-width:812px){ 

}
@media (max-width:800px){ 
.announcement{margin-top: 10%;}
.announcement h1{font-size: 35px;}	
}
@media (max-width:776px){
	.formbox {
    width: 100%;}
.agenda{font-size:30px; font-family: Arial, Helvetica, sans-serif; color: #ffffff;}
.agenda_box{width:100%; margin:0 auto; background: rgba(142,29,20); font-size: 16px;}
.agenda_box1{width:100%; margin:0 auto; background: rgba(189,125,13); font-size: 14px;}
.agenda_box2{width:100%; margin:0 auto; background: rgba(87,21,6); font-size: 14px;}
.bottom-logo1 img{ width:90px;}	
.loginheadebox { width: 240px;  margin-top: -6%;}
.joineheadebox { width: 240px;  margin-top: -2%;}

.functionbox ul li {
    width: 40%;
    margin: 10% auto;
    list-style: none;
}

}
@media (max-width:768px){
.agenda{font-size:30px; font-family: Arial, Helvetica, sans-serif; color: #ffffff;}
.agenda_box{width:100%; margin:0 auto; background: rgba(142,29,20); font-size: 16px;}
.agenda_box1{width:100%; margin:0 auto; background: rgba(189,125,13); font-size: 14px;}
.agenda_box2{width:100%; margin:0 auto; background: rgba(87,21,6); font-size: 14px;}
.bottom-logo1 img{ width:90px;}	
}
@media (max-width:750px){
.loginheadebox { width: 240px;  margin-top: -6%;}
.formbox form { width: 50%; margin-top: 10px;}
.Nivea{width:35%; padding-top: 15px; padding-left: 15px;}
.agenda{font-size:30px; font-family: Arial, Helvetica, sans-serif; color: #ffffff;}
.agenda_box{width:100%; margin:0 auto; background: rgba(142,29,20); font-size: 16px;}
.agenda_box1{width:100%; margin:0 auto; background: rgba(189,125,13); font-size: 14px;}
.agenda_box2{width:100%; margin:0 auto; background: rgba(87,21,6); font-size: 14px;}
.bottom-logo1 img{ width:90px;}
}
@media (max-width:672px){ 
#clockdiv div > span {  width: 80px; height: 80px; font-size: 24px; line-height: 50px;}
#clockdiv > div{font-size: 22px; width: 105px;}
.loginbtn {font-size: 22px;}
.disc { width: 70%;  font-size: 10px;}
.announcement{margin-top: 6%;}
.announcement h1{font-size: 35px;}		
}
@media (max-width:667px){ 
.announcement{margin-top: 9%;}
.announcement h1{font-size: 35px;}		
}	
@media (max-width:640px){ 
.Nivea{width:25%; padding-top: 15px; padding-left: 15px;} 
#clockdiv div > span {  width: 75px; height: 75px; font-size: 30px; line-height: 55px;}
#clockdiv > div{font-size: 20px; width: 105px;}
.smalltext { font-size: 22px; line-height: 40px;}
.announcement{margin-top: 6%;}
}
@media (max-width:603px){ 
.Nivea{width:23%; padding-top: 15px; padding-left: 15px;}
.timerheadebox {width:180px; margin:0 auto; margin-top:0;}	
#clockdiv div > span {width: 70px; height: 70px; font-size: 26px; line-height: 55px;}
#clockdiv > div{font-size: 20px; width: 105px;}
.smalltext { font-size: 18px; line-height: 30px;}
.announcement{margin-top: 4%;}
}
@media (max-width:568px){ 
.Nivea{width:28%; padding-top: 15px; padding-left: 15px;}
}


@media (max-width:480px){
.bgone {
  background: url(../images/bg1.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.bgtwo {
  background: url(../images/bg2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.bgtthree {
  background: url(../images/bg3.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
}

@media only screen and (orientation:landscape){
    #warning-message {display:none;}
}
@media only screen and (orientation:portrait){
	html,body{
		width:100%;
		height:100%;
	}
    #wrapper {display:none;}
    #warning-message { 
		display:block;
		width:100%;
		height:100%;
		position:relative;
	}
	#warning-message p { 
		font-family: Arial, Helvetica, sans-serif;
		width:100%;
		color:#000;
		padding:15px;
		font-size:21px;
		line-height:1.5;
		text-align:center;
		letter-spacing:0.0125em;
		font-weight:400;
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		-webkit-transform:translate(-50%,-50%);
		-moz-transform:translate(-50%,-50%);
	}
}

.error {
    color: #fff;
}