@charset "UTF-8";
/* CSS Document */

/* Style the form */
#regForm {
  background-color: #ffffff;
  margin: 100px auto;
  padding: 40px;
  width: 70%;
  min-width: 300px;
}

/* Style the input fields */
input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
 
	font-family: 'Lato', sans-serif;
  border: 1px solid #aaaaaa;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
  display: none;
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

/* Mark the active step: */
.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #4CAF50;
}




/* THERMOMETER */
#countdown-wrap {
  width: 95%;
  height: 70px;
  //border: 1px solid black;
  font-family: 'Lato', sans-serif;
  max-width: 700px;
  margin: 15px auto 15px;
}

#goal {
  font-size: 40px;
  text-align: right;
  color: #FF0004;
  @media only screen and (max-width : 640px) {
    text-align: center;  
  }
  
}

#glass {
  width: 100%;
  height: 20px;
  background: #c7c7c7;
  border-radius: 10px;
  float: left;
  overflow: hidden;
}

#progress {
  float: left;
  width: 16%;
  height: 20px;
  background: #FF5D50;
  z-index: 333;
  //border-radius: 5px;
}

.goal-stat {
  width: 20%;
  //height: 30px;
  padding: 10px;
  float: left;
  margin: 0;
  color: #FF0004;
  
  @media only screen and (max-width : 640px) {
    width: 50%;
    text-align: center;
  }
}

.goal-number, .goal-label {
  display: block;
}

.goal-number {
  font-weight: bold;
}


.footerall {
width: 100%; 
min-height: 80px;
background-image: -webkit-linear-gradient(270deg,rgba(255,0,0,1.00) 4.24%,rgba(97,27,28,1.00) 100%);
background-image: -moz-linear-gradient(270deg,rgba(255,0,0,1.00) 4.24%,rgba(97,27,28,1.00) 100%);
background-image: -o-linear-gradient(270deg,rgba(255,0,0,1.00) 4.24%,rgba(97,27,28,1.00) 100%);
background-image: linear-gradient(180deg,rgba(255,0,0,1.00) 4.24%,rgba(97,27,28,1.00) 100%);
text-align: center;
color: white;
line-height: 150%;
}
.footerall a {
	color: #FFFFFF;
}
		
		
		@media only screen and (min-width : 480px) and (max-width : 768px) {
			.price_block {width: 50%;}
			.price_block:nth-child(odd) {border-right: 1px solid transparent;}
			.price_block:nth-child(3) {clear: both;}
			
			.price_block:nth-child(odd):hover {border: 0 none;}
		}
		@media only screen and (min-width : 768px){
			.price_block {width: 25%;}
			.price_block {border-right: 1px solid transparent; border-bottom: 0 none;}
			.price_block:last-child {border-right: 0 none;}
			
			.price_block:hover {border: 0 none;}
		}
		
		
	
		


/** all devices and responsive browser windows **/
@media screen and (max-width: 800px) {
	body {
		padding: 10px 15px;
	}
	#container {
		width: 100%;
	}
	#hongkiat-form #aligned {
		width: 100%;
		float: none;
		display: block;
	}
	#hongkiat-form #aside {
		width: 100%;
		display: block;
		float: none;
	}
	#hongkiat-form .txtinput, #hongkiat-form textarea {
		width: 85%;
	}
	#prioritycase {
		float: left;
		display: block;
	}
	#recipientcase {
		float: left;
		display: block;
		margin-right: 55px;
	}
}


/* smaller screen dropoff *******/
@media only screen and (max-width: 550px) {
 	#hongkiat-form .txtinput, #hongkiat-form textarea {
		width: 80%;
	}
}

/* iPhone Landscape ********/
@media only screen and (max-width: 480px) {
	body {
		padding: 10px 0px;
	}
	select.selmenu {
		width: 190px;
	}
}

/* iPhone portrait *******/
@media only screen and (max-width: 320px) {
	body {
		padding: 10px 0px;
	}
 	#hongkiat-form .txtinput, #hongkiat-form textarea {
		width: 70%;
	}
	#hongkiat-form #aligned {
		overflow: hidden;
	}
	select.selmenu {
		width: 160px;
	}
	#recipientcase {
		margin-right: 30px;
	}
}

/** main blocks **/
#container { 
display: block;
max-width: 800px;
margin-left: auto; 
margin-right: auto; 
margin-top: 5px; 
margin-bottom: 26px;
border-radius: 6px; 
-webkit-border-radius: 6px; 
-moz-border-radius: 6px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; 
box-sizing: border-box;  
}


.monthly {
border: 1px;
    position: inherit;
    margin-top: -11px;
    margin-bottom: 11px;
    margin-left: 19px;
    background-color: #b3d9fb;
    padding: 24px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    width: 83%;
    height: 22px;
}



/** the form elements **/
#hongkiat-form { box-sizing: border-box; }

#hongkiat-form .txtinput { 
display: block;
font-family: 'Lato', sans-serif;
border-style: solid;
border-width: 1px;
border-color: #dedede;
margin-bottom: 20px;
margin-left: 5%;
font-size: 1.55em;
padding: 10px;
width: 90%;
color: #777;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; 
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}

#hongkiat-form .txtinput:focus { 
color: #333;
border-color: rgba(41, 92, 161, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
outline: 0 none; 
}

#hongkiat-form input#name {
}
#hongkiat-form input#email {
}
#hongkiat-form input#website {
}
#hongkiat-form input#telephone {
}

#hongkiat-form textarea {
display: block;
font-family: 'Lato', sans-serif;
border-style: solid;
border-width: 1px;
border-color: #dedede;
margin-bottom: 15px;
margin-left:5%;
font-size: 1.5em;
padding: 11px 25px;
padding-left: 55px;
width: 60%;
height: 50px;
color: #777;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; 
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#hongkiat-form textarea:focus {
color: #333;
border-color: rgba(41, 92, 161, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
outline: 0 none; 
}
#hongkiat-form textarea.txtblock {
}

#hongkiat-form #slider { width: 60%; }

#hongkiat-form #aligned { 
box-sizing: border-box; 
float: left; 
margin-right: 20px; 
margin-bottom: 90px;
}
#hongkiat-form #aside {
	float: left;
	width: 370px;
	padding: 0;
	box-sizing: border-box;
}

#wrapping { width: 100%; box-sizing: border-box; }

span.radiobadge { display: block; margin-bottom: 8px; }
span.radiobadge label { font-size: 1.2em; padding-bottom: 4px; }

select.selmenu {
font-size: 17px;
color: #676767;
padding: 9px !important;
border: 1px solid #aaa;
width: 200px;
}

/** custom buttons **/

#buttons { display: block; padding-top: 10px; }

#buttons #submitbtn {
display: block;
float: left;
height: 3em;
padding: 0 1em;
border: 1px solid;
outline: 0;
font-weight: bold;
font-size: 1.3em;
color:  #fff;
text-shadow: 0px 1px 0px #222;
white-space: nowrap;
word-wrap: normal;
vertical-align: middle;
cursor: pointer;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
border-color: #5e890a #5e890a #000;
-moz-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
-ms-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
-webkit-box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
box-shadow: inset 0 1px 0 rgba(256,256,256, .35);
background-color: rgb(226,238,175);
background-image: -moz-linear-gradient(top, rgb(226,238,175) 3%, rgb(188,216,77) 3%, rgb(144,176,38) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(3%,rgb(226,238,175)), color-stop(3%,rgb(188,216,77)), color-stop(100%,rgb(144,176,38))); 
background-image: -webkit-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);
background-image: -o-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);
background-image: -ms-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);
background-image: linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2eeaf', endColorstr='#90b026',GradientType=0 );
}
#buttons #submitbtn:hover, #buttons #submitbtn:active {
border-color: #7c9826 #7c9826 #000;
color: #fff;
-moz-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
-ms-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0 1px 0 rgba(256,256,256,0.4),0 1px 3px rgba(0,0,0,0.5);
background: rgb(228,237,189);
background: -moz-linear-gradient(top, rgb(228,237,189) 2%, rgb(207,219,120) 3%, rgb(149,175,54) 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgb(228,237,189)), color-stop(3%,rgb(207,219,120)), color-stop(100%,rgb(149,175,54))); 
background: -webkit-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); 
background: -o-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); background: -ms-linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); background: linear-gradient(top, rgb(228,237,189) 2%,rgb(207,219,120) 3%,rgb(149,175,54) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4edbd', endColorstr='#95af36',GradientType=0 );
}
.styled-selectState {
background-color: #F3F0F0;
background-image: url("../images/down_arrow_select.jpg");
background-position: right center;
background-repeat: no-repeat;
height: 52px;
overflow-x: hidden;
overflow-y: hidden;
-webkit-border-radius: 6px;
width: 27%;
float: left;
margin-left: 5%;
}

.styled-selectState select {
	background: transparent;
	padding: 5px;
	border: 1px solid #ccc;
	height: 52px;
	width: 110%;
	font-size:21px;

}

.styled-selectMonthly {
background-color: #F3F0F0;
    background-image: url(../images/down_arrow_select.jpg);
    background-position: right center;
    background-repeat: no-repeat;
    height: 52px;
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-border-radius: 6px;
    width: 53%;
    float: right;
    margin-right: 25px;
    margin-top: -13px;
}

.styled-selectMonthly select {
	background: transparent;
	padding: 5px;
	border: 1px solid #ccc;
	height: 52px;
	width: 110%;
	font-size:21px;

}
.styled-selectStateCA {
	background-color: #F3F0F0;
	background-image: url("../images/down_arrow_select.jpg");
	background-position: right center;
	background-repeat: no-repeat;
	height: 52px;
	overflow-x: hidden;
	overflow-y: hidden;
	-webkit-border-radius: 6px;
	width: 45%;
	float: left;
	margin-left: 5%;
}

.styled-selectStateCA select {
	background: transparent;
	padding: 5px;
	border: 1px solid #ccc;
	height: 52px;
	width: 120%;
	font-size:21px;
}

.styled-selectSeats {
    background-color: #F3F0F0;
    background-image: url("../images/down_arrow_select.jpg");
    background-position: right center;
    background-repeat: no-repeat;
	height: 52px;
    overflow-x: hidden;
    overflow-y: hidden;
	-webkit-border-radius: 6px;
	width: 90%;
	margin-bottom: 20px;
	margin-left:5%;
}

.styled-selectSeats select {
	background: transparent;
	padding: 5px;
	border: 1px solid #ccc;
	height: 52px;
	width: 110%;
	font-size: 21px;

}
/** @group clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

/** all devices and responsive browser windows **/
@media screen and (max-width: 800px) {
	body {
		padding: 10px 15px;
	}
	#container {
		width: 100%;
	}
	#hongkiat-form #aligned {
		width: 100%;
		float: none;
		display: block;
	}
	#hongkiat-form #aside {
		width: 100%;
		display: block;
		float: none;
	}
	#hongkiat-form .txtinput, #hongkiat-form textarea {
		width: 75%;
	}
	#prioritycase {
		float: left;
		display: block;
	}
	#recipientcase {
		float: left;
		display: block;
		margin-right: 55px;
	}
}


/* smaller screen dropoff *******/
@media only screen and (max-width: 550px) {
 	#hongkiat-form .txtinput, #hongkiat-form textarea {
		width: 80%;
	}
}

/* iPhone Landscape ********/
@media only screen and (max-width: 480px) {
	body {
		padding: 10px 0px;
	}
	select.selmenu {
		width: 190px;
	}
}

/* iPhone portrait *******/
@media only screen and (max-width: 320px) {
	body {
		padding: 10px 0px;
	}
 	#hongkiat-form .txtinput, #hongkiat-form textarea {
		width: 70%;
	}
	#hongkiat-form #aligned {
		overflow: hidden;
	}
	select.selmenu {
		width: 160px;
	}
	#recipientcase {
		margin-right: 30px;
	}
}


/* Customize the label (the container) */
.container1 {
display: inline;
    position: relative;
    padding-left: 35px;
    margin-bottom: 5px;
    cursor: pointer;
    font-size: 21px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.container1 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container1:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container1 input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container1 input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container1 .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}



/* Dropdown Button */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}