.modal {
   /* display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index:1; /* Sit on top */
    padding-top: 50px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
   /* background-color: rgb(0,0,0); /* Fallback color */
   /* background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
     background-image: url(../images/launching_page/image-bg.jpg);
     -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* Modal Content */
.modal-content {

     color:white;
   font-family: 'Teko',sans-serif; 
   width: 80%;
    overflow: auto; 
   position:relative;
   left: 50%;
   top: 50%;
   min-height: 365px;
   max-width: 800px;
    
    padding: 30px;
    box-sizing: border-box;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: -1;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
   text-align: center;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    
}



/* The Close Button */
.close {
    position: relative;
    top: 0;
    right:0;
    color: white;
    float: right;
    font-size: 36px;
    line-height: 40px;
    font-weight: bold;
    padding: 0 12px 2px 12px;
    text-align: center;
    outline: none;  
    z-index: 9999;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    -ms-transition: all 0.4s ease-in-out 0s;
    -o-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
    width: 50px;
    height:50px;
    background-color:rgba(13,197,197,0.3);
    
}

.close_content a {
   color: white;  
    
}


.close:hover,
.close:focus {
    color: #022123;
    text-decoration: none;
    cursor: pointer;
     background-color:rgba(11,117,117,0.5);
}

.modal-header {
  
 
   /* background-color: #5cb85c;*/
    color: white;
    display: block;
  
}

.modal-body {
    padding: 2px 16px 25px 16px;
    margin-top: 40px;

}

.modal_title{
 
  padding:0 12px 0 12px; 
 text-align: center;
    margin-bottom:25px;

    
    
}

.qr_code{
   
    display: block;
    padding:12px;
    text-align: center;
     
    
}

.qr_code img{
    width: 100%;
    border: 3px solid #fff;
}

.opening {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
 display: block;
   
    max-width:600px;
  margin: 35px auto 15px auto;
        
}


.opening img{
    width: 100%;

}

.opening_title{

font-family: "Oswald", sans-serif;
font-size: 80px;
line-height: 82px;
font-weight: 700;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
text-transform: uppercase;
text-align:center;
letter-spacing: 2px;

}

.opening_title span{
    display: block;
    margin-top:5px;
   font-size: 45px; 
  line-height: 48px;
    letter-spacing:8px;
}


.opening_title_chi{
   
 display:block;
margin-top:10px;
font-family: "Oswald", sans-serif;
font-size: 34px;
font-weight: 700;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
text-transform: uppercase;
text-align:center;
letter-spacing:20px;
line-height:33px;
border-bottom: solid 1px #fff; 
padding-bottom: 25px;
}





.opening_text{
margin-top:12px;
font-family: "Oswald", sans-serif;
font-size: 25px;
font-weight: 500;
line-height:36px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
text-transform: uppercase;
text-align:center;
letter-spacing: 2px;

}


.opening_text_chi{
margin-top:2px;
font-family: "Oswald", sans-serif;
font-size: 19px;
font-weight: 500;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
text-transform: uppercase;
text-align:center;
letter-spacing:6px;
line-height:25px;

}


.modal-footer {
    padding: 2px 16px;

    color: white;
}

.button_home a{
  color: white;
    font-size: 16px;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear; 
font-weight: bold;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
    
}
.button_home a:hover,
.button_home a:focus{
 color: #21cccc ;
   text-decoration: none;  
}



/*-------------------------------------------------*/




.modal_title a:hover,
.modal_title a:focus{
cursor: pointer;
text-decoration: none;
    
}



/*-------------------------------------------------*/



.popup_btn {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;    

  padding: 10px 10px 10px 10px;
 
  width: 100%;
 height: 100%;
margin-top: 10px;
font-size: 18px;
line-height: 18px;
  font-weight: bold;
   
font-family: "Oswald", sans-serif;
letter-spacing: .15em;
text-transform: uppercase;
border: 6px solid #065252;
background-color:rgba(13,197,197,0.5);
 outline: none;    
    
  
-moz-border-radius: 32px;
	-webkit-border-radius: 32px;
	border-radius: 32px;
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
	box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
    
    
  color: #fff;
  /* .style1 */
  /* .style2 */
  /* .style3 */
}

.popup_btn.style1 {
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  position: relative;
  z-index: 1;
}
.popup_btn.style1:after {
  position: absolute;
  content: '';
 border-style: solid;
  border-color: #fff;
  border-width: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;      
  padding:2px;
  z-index: -1;

  -moz-border-radius: 32px;
  -webkit-border-radius: 32px;
   border-radius: 32px;
   
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
	box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);  
    
  -moz-transition: -moz-transform 0.1s, opacity 0.1s, border-width 0.1s;
  -o-transition: -o-transform 0.1s, opacity 0.1s, border-width 0.1s;
  -webkit-transition: -webkit-transform 0.1s, opacity 0.1s, border-width 0.1s;
  transition: transform 0.1s, opacity 0.12s, border-width 0.1s;
    
}

.popup_btn.style1:hover:after {
  /* @include transform(scale(0.96, 0.85)); */
  border-width: 2px;
  background-color:rgba(18,195,195,0.5);
}


.popup_btn:hover, .popup_btn:active {
  color: #FFFFFF;
   border: 6px solid #0a7676;  
      cursor: pointer;
    
}


.popup_btn:active{
border: 6px solid #065252;  
  background-color:#012424;
  box-shadow:none;  

}


.popup_btn.style3:active{
  box-shadow:none;  
  background-color:#012424;
  top:1px;
}

.header {

    color: white;
    display: block;
    text-align: center;
    width: 100%;

}

.header img{
    text-align: center;
   display: inline-block;
   margin: 0 auto 0 auto;
}



/*--------------------------------------*/

 @media (max-width: 768px) {
     
 .modal-content {
  width: 70%;    

     }
 .opening{
       width: 90%;   
     }     


.col-sm-4 {
    width: 33.33333333%;
  float: left;  
     }
     
.opening_title{
 font-size: 56px; 
  letter-spacing:2px;
    line-height:32px;    
    
}     
     
.opening_title span{
    margin-top: 20px;
 font-size: 40px; 
    letter-spacing: 2px;
    line-height: 40px;
    
}       
     
.opening_title_chi{ 
    margin-top: 10px;
font-size: 26px;
    line-height: 26px;
    letter-spacing:12px;
    padding-bottom: 20px;
  }     
          
.popup_btn{
font-size: 14px;  
} 

}



 @media (max-width: 718px) {
     
 .modal-content {
  width: 70%;

margin-top: 550px; 
        padding: 30px 40px 10px 40px;
    
 }    
.col-sm-4 {
  width: 100%; 
  float: none;  
     }     
     
.opening_text{

font-weight:100;


}
     
     


.opening_text_chi{

font-weight:normal;

} 
            
 
     
}






 @media (max-width: 480px) {
     
.modal-content {
  width:100%; 
    
margin-top: 300px; 
 padding: 30px 30px 10px 30px;
    
 }
.modal-body {
    
    width: 70%;
    padding: 2px 16px 15px 16px;
    margin: 20px auto 0 auto;
} 
     
.col-sm-4 {
  width: 100%; 
  float: none;  
     }
     
     
.popup_btn{
font-size: 14px;  
}    
.opening{
       width: 95%;   
     } 

     
     
.opening_title{
 font-size: 36px; 
  letter-spacing:2px;
    line-height:32px;    
    
}     
     
.opening_title span{
    margin-top: 7px;
 font-size: 24px; 
    letter-spacing: 2px;
    line-height: 26px;
    
}       
     
.opening_title_chi{ 
    margin-top: 7px;
font-size: 20px;
    line-height: 22px;
    letter-spacing: 5px;
    padding-bottom: 15px;
  }     
     
     
     
.opening_text{
font-size:16px;
font-weight:normal;
line-height:25px;
color: #fff;
letter-spacing: 2px;

}


.opening_text_chi{
font-size: 16px;
font-weight:normal;
color: #fff;

letter-spacing:0px;
line-height:25px;

} 
     

     
.button_home a{
font-size: 14px;    
     }
     
 
.header img{
    width:45%;
}     
     
     
     
}


 



 @media (max-width: 668px) {
     
 .modal-content {
 width:70%;     


    
 }    
     

     
     
     
}