/* NightLase Technologies Web Development - © Copyright */
/* Updated 31 July 2021 */

/* CONTACT FORM STYLES */

/**/
[class*=ContactWrap] {max-width:100%; margin: 0 auto; padding: 0.4em 0.2em 38em 0.2em;}
[class*=CFimg] {position: relative; float:left; max-width:100%; box-shadow: 0px 0px 8px 0 rgba(0, 0, 0, 0.9), 0px 0px 20px 0 rgba(0, 0, 0, 0.8);}
[id*=ContactForm] {float: right; max-width: 100%; height: 100%; margin: 0 auto; padding: 0em;}
[id*=ContactForm] input, select, textarea {margin: 0.2em; margin-bottom:0.2em; padding: 0.2em; font-size: 0.8em;}

.w3cWrap {margin-top: 32em; font-size: 0.80em} /* Added 1st August 2021, controls formatting of w3c logos. */

@media only screen and (min-width:375px) and (orientation:portrait){
  .ContactWrap{padding: 0.4em 0.5em 56em 0.5em;}  
}

@media only screen and (min-width:724px) and (max-width:764px) and (orientation:landscape){
  .ContactWrap{padding: 0.4em 0.5em 58em 0.5em;}  
}

@media only screen and (min-width:765px) {
	.ContactWrap{max-width:80%; padding-bottom:80em;}
  #ContactForm{max-width:100%;}
  #ContactForm input, select, textarea {margin: 0.2em; margin-bottom:0.4em; padding: 0.4em; font-size: 0.9em;}
}
@media only screen and (max-width: 768px) and (orientation: portrait) {.ContactWrap{padding-top: 2em;}}
@media only screen and (min-width:1024px) and (orientation:Landscape){
  .ContactWrap{max-width: 55em; padding: 1em 0.2em auto 0.2em;}
  .CFimg{max-width:23.5em; margin: 1.4em 0em 0em 0em;}
  #ContactForm{max-width:28em;}
  #ContactForm input, select, textarea {margin: 0.2em; margin-bottom:0.4em; padding: 0.4em; font-size: 0.9em;}
}

@media only screen and (min-width:1920px) {
  .ContactWrap{max-width: 70em; padding: 5em 0.2em auto 0.2em;}
  .CFimg{max-width:30em; margin: 1.4em 0em 0em 0em;}
  #ContactForm{max-width:37em;}
  #ContactForm input, select, textarea {margin: 0.6em; margin-bottom:0.6em; padding: 1em; font-size: 0.9em;}
  .w3cWrap {margin-top: 41em; font-size: 0.80em} /* Added 1st August 2021, controls formatting of w3c logos. */
}

/*
@media only screen and (min-width:667px) and (max-width:767px){.CFimg {max-width: 16.5em;}}
@media only screen and (min-width:667px) and (orientation: Landscape){.CFimg {max-width: 27.5em;}}
@media only screen and (max-width:667px) and (orientation: Landscape){#ContactForm{float:left; padding-left: 0.5em; max-width:100%;}}
@media only screen and (min-width:768px) and (max-width:799px){.CFimg {max-width: 44.5em;}}
@media only screen and (min-width: 800px){.CFimg {max-width: 33em;}}
*/
/* Fonts */
#ContactForm input, select, textarea, select, optgroup, option {font-family: 'Raleway', 'Verdana', 'Helvetica', 'Arial', sans-serif;}
#ContactForm h1 {font-size:1.0em;}
#ContactForm h2 {margin-bottom:0.3em; font-size: 0.8em; font-style:italic; font-weight:normal;}

/* Horizontal Rule Formatting*/
.ContactFormHR {display: flex; margin-bottom: 1.4em; border-bottom: 0.1em solid #339900;}

fieldset {display: block; margin: 0em 0.18em 0em -0.15em; padding: 0em 0em 3em 0em; border: None;}

/* label {float: left; width: 80px; margin-right: 10px; color: #FFFFCC; text-align: right;} */

/* Text Formating */
.Required {color: #FF0000; font-size: 1.0em; font-weight: bold;}
#req-field-desc {font-size: 0.7em; font-style: italic;}

#ContactForm input, select, textarea  { 
	width: 100%;
/*padding: 0.5em;
  margin-bottom: 0.7em; */
	box-sizing: border-box;
	color: Gray; 
	background-color: #111111; 
	border: 1px solid #333333;
	-moz-border-radius:0.1em;
  -webkit-border-radius:0.1em;
  border-radius:0.1em;
}

#ContactForm textarea {height: 8em;}
optgroup {color: #FFFF99; font-size: 0.9em;}
option 	 {color: #FFFFFF; font-size: 0.95em;}

#ContactForm #submit-button {
  width: 6em;
  background-color:#333333;
  color:#FFFFFF;
  display:block;
  float:right;
  margin: 0.4em -0.15em 0em 0em; 
  font-size: 0.9em;
  font-style: bold;
  border: 1px solid #666666;
  border-radius:0.4em; -moz-border-radius:0.4em; -webkit-border-radius:0.4em;
  box-shadow: 1px 1px 2px #222; -moz-box-shadow: 1px 1px 2px #222; -webkit-box-shadow: 1px 1px 2px #222;         
}

.hpot {
	opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  z-index: -10;
}

.hpotTest {
	opacity: 1;
  position: relative;
}
 
#ContactForm #submit-button:hover {background-color: #335533;}
#ContactForm #submit-button:active {position:relative; top:1px;}

/* Custom Checkbox */
.FormCheckbox {
	font-size: 0.9em;
}

.FormCheckbox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

.FormCheckbox .bespoke-checkbox1 {
	position: relative;
  float: left;
	top: 0.2em;
  left: 0.2em;
  margin-right: 0.8em;
	height: 0.8em;
	width: 0.8em;
	background-color: transparent;
	border-radius: 1em;
	border: 1px solid #FF8B8B;
}

.FormCheckbox .bespoke-checkbox1::after {
	position: absolute;
	content:"";
	top: 12px;
	left: 12px;
	height: 0em;
	width: 0em;
	background-color: transparent;
	border-radius: 0.2em;
	border: solid #FF0000;
	border-width: 0px 2px 2px 0px;
	transform: rotate(0deg) scale(0);
  -webkit-transform: rotate(0deg) scale(0);
	opacity: 1;
}

.FormCheckbox input:checked ~ .bespoke-checkbox1 {

	background-color: #333333;
	border-radius: 1em;
	border: 1px solid #83D186;
	transform: rotate(0deg) scale(1);
  -webkit-transform: rotate(0deg) scale(1);
  opacity: 1;
}

.FormCheckbox input:checked ~ .bespoke-checkbox1::after {
	position: absolute;
	top: -4px;
	left: 6px;
	width: 3px;
  height: 12px;
	background-color: transparent;
	border-radius: 0em;
	border: solid #FF8B8B;
	border-width: 0px 2px 2px 0px;
	transform: rotate(45deg) scale(1);
  -webkit-transform: rotate(45deg) scale(1);
	opacity: 1;
}

/*
#contact-form #loading {
  width:32px;
  height:32px;
  background-image:url(img/loading.gif);
  display:block;
  position:absolute;
  right:130px;
  bottom:16px;
  display:none;
}
*/

/* Message Boxes */ 
#errors {
  border:solid 1px red;
  padding: 0.6em;
  margin: 1em 0em;
  display:block;
  max-width: 100%;
  height: auto;
  -webkit-border-radius:0.6em;
  -moz-border-radius:0.6em;
  border-radius:0.6em;
  background:#ffb3b3 url(img/cross_24.png) no-repeat 26em center;  
  display:none;
}
 
#errors li {padding:0.1em; list-style:none; color: black; font-size: 0.7em;}
#errors li:before {content: ' - ';} 
#errors #info {color: black; font-size: 0.7em; font-weight:bold;}
#errors #info:before {content: '';}
 
#success {
  border:solid 1px green;
  padding: 0.6em 0.8em;
  margin: 1em 0em;
  display:block;
  max-width:100%;
  -webkit-border-radius:0.6em;
  -moz-border-radius:0.6em;
  border-radius:0.6em;
  background:#b3ffb3 url(img/tick_24.png) no-repeat 37em center;  
  color: #484848;
  font-size: 0.7em;
  font-weight:bold;
  display:none;
}

@media only screen and (width:375px) {
	#errors {height: 5.5em; background:#ffb3b3 url(img/cross_24.png) no-repeat 16em center;}
	#success {background:#b3ffb3 url(img/tick_24.png) no-repeat 23em center;}
}
@media only screen and (width:667px) and (orientation:Landscape) {
	#errors {background:#ffb3b3 url(img/cross_24.png) no-repeat 25em center;}
	#success {background:#b3ffb3 url(img/tick_24.png) no-repeat 36em center;}
}

#errors.visible, #success.visible {display:block;}
 
/* Normalize placeholder styles */
input:-ms-input-placeholder, textarea:-ms-input-placeholder {color: #666666 !important;}  /* IE */
input:-moz-placeholder, textarea:-moz-placeholder {color:#666666; font-style:italic;}     /* mozilla */
input::-webkit-input-placeholder {color:#666666; font-style:italic;}                      /* chrome, safari */
input.placeholder-text, textarea.placeholder-text {color:#666666; font-style:italic;}    /* ie (faux placeholder) */

/* Remove Form hightlights */
input:required, textarea:required {-moz-box-shadow:none; -webkit-box-shadow:none; -o-box-shadow:none; box-shadow:none;}