/* Table of Content
==================================================
	#Font-Face
	#Site Styles
	#Media Queries */

/* #Font-Face
================================================== */


/* #Site Styles
================================================== */

/* ### general ### */
* { margin: 0px; padding: 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html, body { font-family: Arial; font-size: 12px; color: #000; }
input, select, textarea { font-family: Arial; font-size: 12px; color: #000; }
body { background: #fff; }
img { border: 0px; display: block; }
ul, li { list-style: none; }
:focus { outline: none; }
 fieldset,form { border: none; }
/* ### global classes ### */
.clear { clear: both; visibility: hidden; line-height: 0; height: 0; }

/* ### popupBox ### */
.popupBox { width: 738px; position: fixed;  right: -200%;  top: 0px;  height: 100%;  background: #123457; z-index:99991; transition: all 0.5s; }
.popupBox h5 {font-size: 13px; color: #fff; padding: 12px 0; font-weight: 300;}
.popupBox .innerpopup { padding: 0 0 20px 0; height: 100vh;  overflow-y: auto; padding-bottom: 50px; }
.popupBox .inner { padding: 18px 20px 0 20px; }
.popupBox .image { width: 100%; height: calc(100% - 170px); border-bottom: 2px solid rgba(255,255,255,0.1);  position: relative; }
.popupBox .limitedoffer { width: 169px; height: 113px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.popupBox .limitedoffer .firstanimation { margin-bottom:10px; animation: blinker 1s step-start infinite; }
.popupBox .limitedoffer .secondanimation {  animation: blinker 1s linear infinite;}

.opendiv .popupBox { overflow: hidden;}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
.popupBox .img { width: 100%; height: 100%; border-bottom: 2px solid rgba(255,255,255,0.1);}
.popupBox .inputText {width: calc(50% - 15px); margin-right:15px;  padding: 12px 15px; float:left; color:#000; font-size: 14px;  margin-bottom: 13px; border: 2px solid #fff;  background: none; border-radius: 35px; background: #fff;}
.popupBox .button { background:#fd6802; padding: 12px 20px; color: #fff; border-radius: 35px;  margin-top: 10px; display: block; text-align: center;
    font-size: 20px; width: 100%; border: none; font-weight: 600; cursor:pointer; }
.popupBox .button:hover {     background: #e79029}
.close_btn {position: absolute; cursor:pointer; left: 20px; top: 8px; z-index: 9; font-size: 26px;  color: #fff;}
.close_btn:hover { color: #e79029; }
.popupBox .inputText::-webkit-input-placeholder { color: #666;}
.popupBox .inputText::-moz-placeholder { color: #666; }
.popupBox .inputText:-ms-input-placeholder { color: #666; }
.popupBox .inputText:-moz-placeholder {  color: #666; }

.page_overlay {z-index: 9999; background-color: rgba(0, 0, 0, 0.33); opacity: 0; transition: opacity 0.6s ease; position: fixed;  left: 0px;  top: 0px;  width: 100%;  height: 100%;}

.popupBox.expend { right: 0px; }
 
.gift_button { width: 100px; position: fixed; right: 0px; bottom: 50%; transform: translateY(50%); z-index:5; }
.gift_button img { width: 100%;}
.opendiv { overflow: hidden; }
/* #Media Queries
================================================== */

@media only screen and (max-width: 980px) {
 .popupBox .inner { padding: 20px 20px 0 20px;}
}
@media only screen and (max-width: 767px) {
	.popupBox { width: 100%;}
	.popupBox .limitedoffer { width: 119px; height: 82px;}
	.popupBox .limitedoffer .firstanimation { width: 100%;}
	.popupBox .limitedoffer .secondanimation { width: 100%;}
	.popupBox .inputText { width:100%; margin-right: 0px; }
	
	}
@media only screen and (max-width: 479px) {
.popupBox { width: 100%; }
.popupBox .limitedoffer { width: 92px; height: 68px;}
.popupBox .image{height: calc(90% - 250px);}
.popupBox .inner { padding-top:43px; }

}