body,html{
	height: 100%;
}
.popup{
	position:fixed;
	background: rgba(0,0,0,0.8);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1000;
	display: none;
}

.popupbox{
	box-shadow: 6px 6px 20px -6px #666;
	background-color: #fff;
	overflow: hidden;
	margin: 7% auto;
	width: 30%;
	min-width: 600px;
}


.popup_tag{
	position:fixed;
	background: rgba(0,0,0,0.8);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1000;
	display: none;
}

.popupbox_tag{
	box-shadow: 6px 6px 20px -6px #666;
	background-color: #fff;
	overflow: hidden;
	margin: 7% auto;
	width: 30%;
	min-width: 600px;
}

.popuphead, .popupfoot{
	background-color: #f4f4f4;
	overflow: hidden;
	padding: 10px;

}

.popuphead{
	border-bottom: 1px solid #ddd;
}

.popupfoot{
	border-top: 1px solid #ddd;
}
.mainbar{
	font-size: 0;
	overflow: hidden;
}
.mainbar>span{
	display: inline-block;
	width: 29%;
	margin: 1%;
	vertical-align: middle;
	text-align: center;
	background-color:#f4f4f4;
	padding:5% 1%;
	font-size: 15px;
	transition:all ease-in 0.2s;
}

.step2 .mainbar>span{
	display: block;
	width: 80%;
	margin: 0 auto;
	vertical-align: middle;
	text-align: left;
	background-color:#fff;
	padding:10px 0px;
	font-size: 15px;
	transition:all ease-in 0.2s;
}

.step2 .mainbar>span input{
	width: 240px;
}

.step2 .mainbar>span:hover{
	box-shadow: none;
}
.step2 .mainbar>span>p{
	margin: 10px 0px;
}
.mainbar>span:hover{
	/*cursor: pointer;*/
	box-shadow: 0px 0px 40px -20px #aaa inset;
}

.closeit:hover{
	cursor: pointer;
}

.vesylit{
	background-color: #4C85BD;
    color: #FFFFFF;
    display: inline-block;
    font-size: 12px;
    padding: 8px 15px;
    transition: all 0.2s ease-in 0s;
}
.vesylit:hover{
	cursor: pointer;
}

.popupfoot span:last-child{
	font-size: 12px;
	margin-left: 20px;
}

.step2, .step3{
	display: none;
}

.mainbar .equal{
	width: 38%;
	padding: 2%;
}
.mainbar .equal2{
	width: 54%;
	padding: 1%;
	padding-left: 3%;
}
.mainbar .equal span, .mainbar .equal div,.mainbar .equal2 span, .mainbar .equal2 div{
	font-size: 12px;
}

.mainbar .equal2 input{
	background: #f2f2f2;
   	border: none;
   	margin: 0;
   	padding: 0 5px;
   	height: 30px;
   	width: 100%;
        outline: aqua;
}

.mainbar .equals select{
	width: 100%;
}



.mainbar .equal:first-child div>span,.mainbar .equal2:first-child div>span{
	display: inline-block;
	vertical-align: middle;
}

.mainbar .equal:first-child div>span img:hover,.mainbar .equal2:first-child div>span img:hover{
	cursor: pointer;
}

.step3 .popupbody h2{
	font-size: 15px;
	border-bottom: 1px solid #eee;
	padding: 10px;
}

.step3 .selectbound select {
   background: transparent;
   padding: 5px;
   font-size: 13px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   font-weight: 100;
   /*font-family: "open sans";*/ 
flow:right;
   }

   .step3 .twoinarow .selectbound select {
   	width: 40%; flow:right;
   }
  .step3 .twoinarow .selectbound {
  	width: 40%;
  }
  .step3 .selectbound {
   width: 40%;
   height: 30px;
   overflow: hidden;
   background: url("../images/select_arrow.png") no-repeat right #f2f2f2;
   border: none;
   flow:right;
   }
   
   .step3 .selectbound1 select {
   background: transparent;
   padding: 5px;
   font-size: 13px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   font-weight: 100;
   font-family: "open sans"; 
flow:right;
   }

   .step3 .twoinarow .selectbound1 select {
   	width: 40%; flow:right;
   }
  .step3 .twoinarow .selectbound1 {
  	width: 40%;
  }
  .step3 .selectbound1 {
   width: 40%;
   height: 30px;
   overflow: hidden;
   background: url("../images/select_arrow.png") no-repeat right #f2f2f2;
   border: none;
   flow:right;
   }

   .step3 div.equal span.twoinarow{
   	font-size: 0;
   }

   span.twoinarow{
   	display: block;
   }
   .mainbar .equal span.twoinarow div input{
   	width: 130px!important;
   	margin: 0;
   	padding: 0;
   	height: 30px;
   	background: #f2f2f2;
   	border-top: none;
   }

   span.twoinarow>div{
   	display: inline-block;
   	margin-right: 5px;
   	vertical-align: top;
   	height: 34px;
   }

   span.twoinarow>div:last-child{
   	margin-right: 0px;
   }
	div.spanspace>span{
		margin: 5px 0px;
		display: block;
	}

	div.commentspace{
		background-color: #f2f2f2;
		padding: 5px;
		display: block;
		min-height: 40px;
		width: 96%;
		margin:0px auto;
		margin-bottom: 10px;
	}


.popupinvite{
	position:fixed;
	background: rgba(0,0,0,0.8);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1000;
	display: none;
}

.popuppromotion{
	position:fixed;
	background: rgba(255,255,255,0.6);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1000;
	display: none;
}

.popuppromotion > .popupbox{
	border: 20px solid #ebe5e8;
	box-shadow: 6px 6px 20px -6px #666;
	padding: 10px;
	background-color: #fff;
	width: 400px;
	overflow: hidden;
	margin: 7% auto;
	border-radius: 12px;
        position: relative;
}
.popuppromotion > .popupbox > .whitebox > .promotionwrapper{
	max-height: 450px;
	overflow-y: scroll;
	overflow-x: hidden;
}

.customnext{

	background-color: #5FB9ED;
    color: #FFFFFF;
    font-size: 15px;
    letter-spacing: 0;
    padding: 5px 15px;
    transition: all 0.2s ease-in 0s;

}

.customnext:hover{
	background-color: #3F9ED4;
	cursor : pointer;
}


.addcommentuser{

	background-color: #5FB9ED;
    color: #FFFFFF;
    font-size: 15px;
    letter-spacing: 0;
    padding: 5px 15px;
    transition: all 0.2s ease-in 0s;
    float: left;
    margin-top: 5px;

}

.addcommentuser:hover{
	background-color: #3F9ED4;
	cursor : pointer;
}


.vesylit > input[type="submit"] {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    color: #FFFFFF;
    cursor: pointer;
}

.book-popup{
	
	
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1000;
	
}

.book-popupbox{
	box-shadow: 6px 6px 20px -6px #666;
	background-color: #fff;
	overflow: hidden;
	margin: 7% auto;
	width: 45%;
}

.book-popuphead, .book-popupfoot{
	background-color: #f4f4f4;
	overflow: hidden;
	padding: 10px;

}

.book-popuphead{
	border-bottom: 1px solid #ddd;
}

.book-popupfoot{
	border-top: 1px solid #ddd;
}

.book-popupbody {
    overflow: visible;
    padding: 0 20px;
}

.book-popupbody h2{
	font-size: 15px;
	border-bottom: 1px solid #eee;
	padding: 10px;
}

.book-mainbar{
	font-size: 14px;
	overflow: hidden;
}
.book-mainbar>span{
	display: inline-block;
	width: 29%;
	margin: 1%;
	vertical-align: middle;
	text-align: center;
	background-color:#f4f4f4;
	padding:5% 1%;
	font-size: 15px;
	transition:all ease-in 0.2s;
}

.book-mainbar>span:hover{
	/*cursor: pointer;*/
	box-shadow: 0px 0px 40px -20px #aaa inset;
}


.bookstep .book-popupbody h2{
	font-size: 15px;
	border-bottom: 1px solid #eee;
	padding: 10px;
}

.bookstep .selectbound select {
   background: transparent;
   padding: 5px;
   font-size: 13px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   font-weight: 100;
   font-family: "open sans";
   width: 100%;
   }

   .bookstep .twoinarow .selectbound select {
   	width: 120px;
   }
  .bookstep .twoinarow .selectbound {
  	width: 100px;
  }
  .bookstep .selectbound {
   width: 100%;
   height: 30px;
   overflow: hidden;
   background: url("../images/select_arrow.png") no-repeat right #f2f2f2;
   border: none;
   }

   .bookstep .selectbound1 select {
   background: transparent;
   padding: 5px;
   font-size: 13px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
/*   -webkit-appearance: none;*/
   font-weight: 100;
   font-family: "open sans";
   width: 100%;
   }

   
   .bookstep div.eaual span.twoinarow{
   	font-size: 14px;
   }
   
   .book-mainbar .equal{
	width: 40%;
	padding: 5%;
}

.book-mainbar .equal span, .book-mainbar .equal div{
	font-size: 12px;
}

.book-mainbar .equal input{
			background: #f2f2f2;
   	border: none;
   	margin: 0;
   	padding: 0 5px;
   	height: 30px;
   	width: 100%;
        outline: aqua;
}

.book-mainbar .equal select{
	width: 100%;
}



.book-mainbar .equal:first-child div>span{
	display: inline-block;
	vertical-align: middle;
}

.book-mainbar .equal:first-child div>span img:hover{cursor: pointer;}

div.book-spanspace > span {display: block;margin: 20px 0;}

.fl.book-equal {float: left;height: auto;width: 100%;}
.fl.book-equal > span {float: left;text-align: center;width: 100%;}
.fl.book-equal > span > img { max-width: 100%;}
.fl.book-equal.book-spanspace {float: left;padding: 5%;width: 94%;}
.fl.book-equal.book-spanspace > span {float: left;text-align: justify;width: 100%;}
.fl.book-equal.book-spanspace > span > input{width:97%;}
.book-mainbar .equal select {width: 100%;}
.fl.book-equal.book-spanspace > .twoinarow > .selectbound,.fl.book-equal.book-spanspace > .twoinarow > div{width: 100%;}
.fl.book-equal.book-spanspace > .twoinarow > .selectbound > select {width: 100%;}
.fl.book-equal.book-spanspace > .twoinarow > .selectbound1,.fl.book-equal.book-spanspace > .twoinarow > div{width: 100%;}
.fl.book-equal.book-spanspace > .twoinarow > .selectbound1 > select {width: 100%;}

@media (max-width:880px)
{
    .book-popupbox{
	box-shadow: 6px 6px 20px -6px #666;
	background-color: #fff;
	overflow: hidden;
	margin: 7% auto;
	width: 100%;
        float:left;
    }
}
@media (max-width:350px)
{
    #contentbar .whitebox > div {margin: 0 auto; width: 100%;}
    .fl.book-equal.book-spanspace > span > input{width:93%;}
}


.fl.equal2.spanspace > span {
    float: left;
    width: 100%;
}

.fl.equal2.spanspace > span > p {
    float: left;
    height: auto;
    width: 100%;
}


.fl.equal2.spanspace > span {
    float: left;
    width: 100%;
}

.fl.equal2.spanspace > span > .selectbound{width:100%; height: auto; float: left;}
.fl.equal2.spanspace > span > .selectbound > select {
    float: left;
    width: 100%;
}