/* ////////////////////////////////// FORMS ///////////////////////////////////// */ 


.form-box { padding: 15px; background: #e0e0e0; }
.form-box label, .form-box p { color: #333 !important;  }
.form-box h3 { color: #0F1418; font-weight: 400; }

form .hidden { display: none; }

form { display: block; }
form label { margin-bottom: 10px; color: #666 !important; font-size: 18px; }
form input, form textarea, form select { 
	width: 90%; clear: both; float: none; padding: 15px; box-shadow: none; 
	border: 1px solid #CCC; margin: 10px 0 20px 0; 
	font-family: 'Raleway', 'Helvetica Neue', helvetica, arial, sans-serif; 
	font-size: 16px; color: #666; border-radius: 5px; -webkit-border-radius: 5px;
}
form select { cursor: pointer;}
form .thin { width: 250px; }
form .thinner { width: 150px; }
form .datepicker { cursor: pointer; }
form .float { width: 40%; float: left; margin-right: 20px; }

form fieldset { margin: 10px 0; }
.form-hide { display: none; }

form ul { margin: 0; padding: 0; list-style-type: none; }
form li { clear: both; overflow: hidden; margin: 0 0 10px 0; padding: 0; }
form li.float { width: 45%; float: left; clear: none; margin-right: 10px; }
form li.float input { width: 80%; }
form li.checkbox input { width: 20px; margin-right: 5px; float: left; }
form li.checkbox p { float: left; font-size: 12px; color: #333; margin: 7px 0 0 0;}

form .checkboxes { margin: 10px 0; overflow: hidden; clear: both;  }
form .checkboxes div { float: left; width: auto; margin-right: 10px; }
form .checkboxes input { width: auto; border-radius: 0; -webkit-border-radius: 0; }
form .checkboxes span { margin: 5px 10px 0 10px; }
form .checkboxes span input { width: 20px; height: 20px; margin: 0 !important; float: left; display: inline-block; }
form .checkboxes span label { float: left; display: inline-block; padding: 0; margin: 0 0 0 10px; }

form label { font-weight: normal; color: #666; font-size: 14px;}
form input.submit { border: 0; padding: 15px 30px; margin: 0 0 0 -60px; font-size: 14px; display: block; float: left; width: 200px; clear: both; font-weight: 400; letter-spacing: 0.1em; cursor: pointer; background: #000; color: #FFF; left: 50%; position: absolute; }

form input.wpcf7-submit { 
	border: 0; padding: 10px 20px; margin: 0; font-size: 14px; display: block; float: left; width: 200px; 
	clear: both; font-weight: 200; letter-spacing: 0.1em; cursor: pointer; border-radius: 0; -webkit-border-radius: 0; background: #0F1418; color: #FFF; 
	text-transform: uppercase; border: 0;
	font-family: 'Raleway', helvetica, arial, sans-serif; 
}

form input:focus, form select:focus { border: 1px solid #0F1418; }

form div.date-fields { float: left; overflow: hidden; margin-right: 10px; }
form label.date, form label.date-year  { font-size: 12px; }
form input.date { width: 25px; }
form input.date-year { width: 50px; }

form .datepicker { background: #FFF url(../img/icons/icon-calendar.svg) no-repeat 98% center; background-size: 30px; }

form h4 { color: #333; padding: 0 0 5px 0; margin: 10px 0 10px 0; display: block; }

p.hint { color: #666; font-size:12px;}

form .error {  }
form .error input, form .error select { border: 1px solid #CC0000 !important; border-radius: 4px; -webkit-border-radius: 4px; }
form .error:after { content: "  This is a required field"; color: #CC0000; }

form .match input { border: 1px solid #CC0000 !important; }
form .match:after { content: "  These email fields must match" !important; color: #CC0000; }

form .invalid input { border: 1px solid #CC0000 !important; }
form .invalid:after { content: "  Please check this is a valid email" !important; color: #CC0000; }

.alert { margin: 0 0 20px 0; padding: 12px 10px 12px 10px; display: block; text-align: center; font-weight: bold; font-size: 14px; border-radius: 40px; -webkit-border-radius: 40px; text-transform: uppercase; }
.alert.success { color: #5ba85a; border: 2px solid #5ba85a; }
.alert.errors { color: #CC0000; border: 2px solid #CC0000; }

.smallprint { font-size: 14px; margin: 0 0 10px 0; float: left; clear: both;  }

/* Sucess Message */
.wpcf7-response-output { padding: 15px; margin: 40px 0 0 0; border: 0; width: 90%; color: #FFF; font-size: 16px; }
.wpcf7-mail-sent-ok { background: #398f14; }

/* Social Icons - font awesome */

.social-icons { clear: both; display: block; overflow: hidden; margin-top: 20px; }
.social-icons a { display:inline-table; background:none; margin: 0 5px 0 0; padding: 0; float: left; }
.social-icons i.fa { float:right; background-color: #CCC; color:#FFF; font-size: 15px; border-radius:50%; width: 30px; height: 15px; padding: 7.5px 0; text-align:center; }
.social-icons i.fa:hover { background-color: #DDD; }

.nf-form-fields-required {color: #666; margin-bottom: 50px; padding-bottom: 50px; display: block; clear: both; }
.nf-field-container { margin-bottom: 30px !important; }

form.paypal { margin-top: 30px; width: 250px; }

form.paypal input { margin: 0 !important; padding: 0 !important; border: 0 !important; }


/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////// START OF RESPONSIVE STYLES /////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */





@media screen and (orientation: landscape) and (max-width: 768px) {



}

@media screen and (orientation: portrait) {

}



/* ////////////////////////////////  bigger than mobile version //////////////////////////////// */

@media screen and (min-width: 480px) {


	
}

/* //////////////////////////////// ipad mini or galaxy note version //////////////////////////////// */  

@media screen and (min-width: 480px) {



}

/* //////////////////////////////// big ipad version //////////////////////////////// */

@media screen and (min-width: 768px) {

	form input.thin { width: 300px; }
	form input.medium { width: 400px; }
	form input.wide, form textarea.wide { width: 90%; }	

}

/* //////////////////////////////// full wide version //////////////////////////////// */ 

@media screen and (min-width: 960px) {

.social-icons i.fa { font-size: 18px; width: 40px; height: 20px; padding: 10px 0; text-align:center; }


}

/* //////////////////////////////// very wide version //////////////////////////////// */ 

@media screen and (min-width: 1500px) {



}

/* //////////////////////////////// extra wide version //////////////////////////////// */ 

@media screen and (min-width: 1750px) {



}

/* //////////////////////////////// extra extra wide version //////////////////////////////// */ 

@media screen and (min-width: 2000px) {



}