/*CSS for HEM - October, 2014*/
/*Edited for Highly Effective Selling - May, 2019*/

/* Set HTML basics */
* {margin: 0px;padding: 0px;}

/* Set the body main parameters */
body {background: #FFFFFF;font-family: trebuchet ms, tahoma, verdana, arial, sans-serif;font-size: 18px;color: #5B5B5B;overflow: auto;}

.bgimg101 {position:fixed;top:0;left:0;min-width:100%;min-height:100%;width:auto;height:auto;z-index:1;background-image: url('../images/Site/SalesOffice@Work2SharpScreen.png');background-repeat: no-repeat;
background-attachment: fixed;background-position: center -280px;}
.bgimg201{}
.bgimg211{}
.bgimg221{}
.bgimg301{}
.bgimg311{}
.bgimg321{}
.bgimg401{}
.bgimg411{}
.bgimg421{}
.bgimg501{}
.bgimg511{}
.bgimg521{}
.bgimg999{position:fixed;top:160px;left:0;min-width:100%;min-height:100%;width:auto;height:auto;z-index:1;background-image: url('../images/Site/404Dog.png');background-size:auto 290px;background-repeat: no-repeat;background-position: center 0;}
/*.video {position:fixed;top:50%;left:50%; transform:translate(-50%, -50%);min-width:100%;min-height:100%;width:auto;height:auto;z-index:1;}*/

#container {position: relative;top:0;left:0;width: 100%;margin:0;padding:0;box-sizing:border-box;background-color:transparent;z-index:2;}

/*Set the page header */
#top {position: relative;top:0;left:0;width: 100%;height: 155px;margin:0px;padding: 0px;
background-color:#FFFFFF;z-index:3;}
.topbrand {margin: 20px 0px 0px 25px; width:34.4%; max-width:478px; height: auto;}
.topbrandsmall {display: none;}
.mascot {position: absolute; top: 5px; right: 1.5%; width:200px; height: 200px; padding: 0px; background-color: transparent; z-index: 4;}

/* Set the Menu */

#menu {position: absolute; left: 8px;top: 90px;background-color: transparent;width: auto;font-family: 'Roboto', sans-serif;z-index:8;}
.menuone, .menutwo{float: left;width: auto;}
.menucontent {float: left;width: auto;height: 15px;background-color: transparent;color: #7E4C29;padding: 0px 5px 0px 1px;font-family: Arial,Helvetica, sans-serif;font-size: 0.8em;font-weight: normal;text-align: left;}
.menubul {float: left;width: 12px;height: 12px;margin: 3px 3px;}

img.menu {margin: 0px auto -4px;width: 20px;height: 20px;border: 0px solid transparent;background-color: #FFFFFF;padding: 0px;}

a:link.menu {display: inline;color: #5B5B5B; text-decoration: none}
a:visited.menu {display: inline;color: #5B5B5B; text-decoration: none}
a:hover.menu {display: inline;color: #CC2006;text-decoration: underline}
a:link.menu2 {display: inline;color: #FFFFFF; text-decoration: none}
a:visited.menu2 {display: inline;color: #FFFFFF; text-decoration: none}
a:hover.menu2 {display: inline;color:/* #F7DE00; #FBA700;*/ #FFFFFF;text-decoration: underline}


/*Set the backwindow div */
#backwindow{position: relative;top: 0;margin: 0;width: 100%;height:300px;padding: 0;background: transparent;}

/* Set the page Content Container */
#carrycontent{position: relative;top:0;left:0;width: 100%;margin:0;padding:0;background-color:#FFFFFF;z-index:3;}
#container1, #container2 {display:block;width: 80%;max-width: 1400px;background-color: #FFFFFF;margin: 0px auto 20px;padding:  0px 10px;font-family: 'Roboto', sans-serif;}
#container2 {width: 100%;max-width: none;margin: 10px 0px 0px;padding:  0px 10px 70px;}

.colleft, .colmid, .colright{float: left;display:block;width: 30%;background-color: transparent;margin-left: 0;padding:  0 1%;font-size: 0.9em;text-align: justify;}
.colmid, .colright{margin-left: 2%;}

.bottompad {background-color: transparent;height: 70px; width:90%;margin:auto;}
.bottompadforms {background-color: transparent;height: 300px; color: #AAAAAA;padding: 10px 0px;text-align: center;font-size: 0.8em;font-style: italic;display: none;}

/* Set the Container contents */

.colpad1 {background-color: transparent;display:block;width: 100%;height:200px;}
.pad2 {background-color: transparent;display:block;width: 100%;height:70px;color: white;}
.textbox1 {position: absolute;left: 30%;top: 130px;width: 120px;height: 120px;background-color: red;}
.textbox2 {position: absolute;left: 50%;top: 130px;width: 120px;height: 120px;background-color: red;}
.quotedcomment {clear: both;color: #AAAAAA;padding: 10px 0px;text-align: center;font-size: 0.8em;font-style: italic;}
a:link.content {display: inline;color: #CC2006;text-decoration: none}
a:visited.content {display: inline;color: #CC2006;text-decoration: none}
a:hover.content {display: inline;color:#5B5B5B;text-decoration: underline}
ul.content {margin-left: 20px;}

/* Set form  styles */

#formholder {width: 94%;padding: 0% 2% 2%;background-color: #FAFAFA;border: 1px solid #EAEAEA;text-align: left;}
.formlabel, .formlabeltop, .formlabelcheck {font-size: 0.8em;font-weight: normal;color: #5B5B5B;margin: 1em 0% 0em;}
.formlabeltop {margin: 0.3em 0% 0em;}
.formlabelcheck {font-size: 1em;margin: 0.3em 0% 0em 2%;}
.formbox, .formbox1, .formbox2, .formbox3, .formbox4, .formbox5, .formboxcheck, .formboxlocality, .formboxpostcode,  .formboxphone1,  .formboxphone2 {font-size: 0.8em;background-color: #FFFFFF;font-weight: normal;color: #333333;font-family: Verdana, Arial, Helvetica, sans-serif ;border: 1px solid;}
.formbox1 {width: 98%;}
.formbox2 {float: left;width: 48%;}
.formbox2R {float: left;margin-left: 2%;width: 48%;}
.formbox3  {width: 98%;height: 10em;}
.formbox4  {width: 44%;margin: auto;font-size: 2em;}
.formbox5  {width: 30%;margin: auto;}
.formboxcheck  {float: left;margin: 4px 8px auto;}
.formboxlocality {float: left;width: 81%;}
.formboxpostcode {float: left;margin-left: 2%;width: 15%;}
.formboxphone1 {float: left;width: 48%;}
.formboxphone2 {float: left;margin-left: 2%;width: 48%;}
.formbuttonbox {width: 98%;margin: 0.4em auto;background-color: transparent}
.formbutton1, .formbutton2, .formbutton3 {background-color: #CC2006;color: #FFFFFF;padding : 5px;font-family: Verdana, Arial, Helvetica, sans-serif ;font-weight : bold;font-size: 0.8em;text-decoration: none;clip: rect( ); border: 1px solid #5B5B5B;border-radius: 3px;-ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px;}
.formbutton1 {float: left;margin: 0% 0% 0%10%;}
.formbutton3 {float: right;margin: 0%10% 0% 0%;}
.button1{background-color: #CC2006;color: #FFFFFF;padding : 5px;font-family: Verdana, Arial, Helvetica, sans-serif ;font-weight : bold;font-size: 0.8em;text-decoration: none;clip: rect( ); border: 1px solid #5B5B5B;border-radius: 3px;-ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px;}
#humantest {width:98%;margin: 1em auto 1em 0%;background-color: #EAEAEA;border: 1px solid #5B5B5B;}
.humantesthead {width: 100%;background-color: #5B5B5B;color: #FFFFFF;text-align: center;font-size: 0.9em;font-weight: bold;}
.humantestimg {background-color: transparent;float: left;margin-left: 0%;width: 58%;text-align: center;}
.humantestconfirm {background-color: transparent;float: right;margin-right:0%;width: 38%;text-align: center;font-size: 0.7em;font-weight: bold;}
.humantesthelp1, .humantesthelp2 {width: 37%;background-color: #EAEAEA;text-align: center;font-size: 0.9em;font-weight: bold;}
.humantesthelp1{float: left;margin-left: 12%;}
.humantesthelp2 {float: right;margin-right: 12%;}

/* Set styles for Team Members  */

#memberlist {width: 98%;margin: 0px auto;height: 21em;overflow:hidden;background-color: transparent;}
#memberhold {width: 97%;margin: 0px auto;background-color: transparent;}
.membershow {height: 20em;padding: 0px 3px;overflow-y: auto;}
.memberspace {width: 100%;height: 10em;}

/* Set the footer */

#footer1 {position: fixed; left: 0px;bottom: 0px;height: 60px;width: 100%;background-color: #5A5A5A;font-family: 'Droid Sans', sans-serif;text-align: center;font-size: 1em;}
#footer2 {display: none;position: fixed; left: 0px;bottom: 0px;height: 60px;width: 100%;background-color: #5A5A5A;
font-family: 'Droid Sans', sans-serif;text-align: center;font-size: 0.8em;}
.footerpara {color: #FFFFFF;padding-top: 15px;}
a:link.footer {display: inline;color: #FFFFFF; text-decoration: none}
a:visited.footer {display: inline;color: #FAFAFA;text-decoration: none;}
a:hover.footer {display: inline;color: #00A6A6;text-decoration: underline}

/* List Styles */

ul.one{margin: 0.5em 0 0.5em 20px;}
li.one{font-size:1.2em;line-height:140%;}

/* General Styles */

h2 {text-align: center;color: #5B5B5B;margin: 0.5em 0;padding-top:1em;}
h2.blank {text-align: center;color: transparent;margin: 0.5em 0;padding-top:1em;}
.padtop {margin: 0.5em 0 0;}
.padbot {margin: 0 0 0.5em;}
.spaced {margin: 0.5em 0;}
.headspaced {margin: 1em 0px 0.5em;}
.bold {font-weight: bold;}
.italic {font-style: italic;}
.small {font-size: 0.8em;}
.medium {font-size: 1.2em;}
.large {font-size: 1.4em;}
.big {font-size: 1.8em;}
.xbig {font-size: 2.2em;}
.black {color: #000000;}
.grey {color: #5B5B5B;}
.lightgrey {color: #888888;}
.red {color: #CC2006;}
.white {color: #FFFFFF;}
.left {text-align:left;}
.center {text-align: center;}
.justify {text-align: justify;}
.inset {margin-left: 20px;}
.textgrey {color: #5B5B5B;}
.textgreycenter {color: #5B5B5B;text-align: center;}
.textgreyjustify {color: #5B5B5B;text-align: justify;}
.smallcaption {font-size: 0.6em;text-align: center;}
.clear {background-color: transparent;clear: both;width: 100%;height: 1px;margin: 0px;padding: 0px;}


/* Media Queries Begin */

@media screen and (min-width: 1360px) and (max-width: 1600px) {
.mascot {position: absolute; top: 5px; right: 1.5%; width:180px; height: 180px; padding: 0px; background-color: transparent; z-index: 4;}
.menucontent {font-size: 0.7em;}
.humantestimg {width: 98%;max-width: 98% !important;}
.humantestconfirm {width: 98%;}
}


@media screen and (min-width: 1101px) and (max-width: 1360px) {
#top {height: 130px;}
.mascot {position: absolute; top: 5px; right: 1.5%; width:150px; height: 150px; padding: 0px; background-color: transparent; z-index: 4;}
#menu {top:75px;}
.menucontent {width: auto;height: 30px;font-size: 0.7em;}
.menupad {float: left;width: 8px;height: auto;padding-top: 3px;background-color: transparent;}
.menubul {float: left;width: 8px;height: 8px;margin: 5px 2px 2px;}
.humantestimg {width: 98%;max-width: 98% !important;}
.humantestconfirm {width: 98%;}
.humantesthelp1{float: left; margin-left: 8%;}
.humantesthelp2 {float: right; margin-right: 8%;}
.formbutton1 {float: left;margin: 0% 0% 0% 5%;}
.formbutton3 { float: right;margin: 0% 5% 0% 0%;}
}

@media screen and (min-width: 900px) and (max-width: 1100px) {
#menu {top:75px;}
.mascot {position: absolute; top: 5px; right: 1.5%; width:165px; height: 165px; padding: 0px; background-color: transparent; z-index: 4;}
.menubul {float: left;width: 8px;height: 8px;margin: 5px 2px 2px;}
.menutwo {margin-top: 8px;margin-left: 175px;}
.colleft, .colmid, .colright{float:none;width: 85%;margin: auto;font-size: 1em;}
.formbox1 {font-size: 1.5em;}
.formbox2  {font-size: 1.2em;}
.formbox3  {font-size: 1.5em;}
.humantestimg {width: 98%;max-width: 98% !important;}
.humantestconfirm {width: 98%;}
.humantesthelp1{float: left;margin-left: 4%;}
.humantesthelp2 {float: right;margin-right: 4%;}
.formbuttonbox {width: 98%;margin: 0.4em auto;background-color: transparent;text-align: center;}
.formbutton1 {float: none;position: static;margin: 0.2em auto;}
.formbutton3 {float: none;position: static;margin: 0.2em auto;}
.bottompadforms {display: block;}
}

@media screen and (min-width: 761px) and (max-width: 899px) {
#top {width: 100%;height:140px;margin: 0;padding: 8px 1% 3px;box-sizing:border-box;font-size: 1.0em;text-align: left;}

#menu {position: absolute; left: 8px;top: 90px;background-color: transparent;width:90%;box-sizing:border-box;}
.mascot {display: none;}
.menutwo {margin-top: 8px;margin-left: 80px;}
.menubul {float: left;width: 8px;height: 8px;margin: 5px 2px 2px;}
#container1 {display:block;width: 80%;margin: 20px auto;background-color: #FFFFFF;padding:  0px 0.5%;}
.colleft, .colmid, .colright{float:none;width: 85%;margin: auto;font-size: 1em;}
.formbox1 {font-size: 1.5em;}
.formbox2  {font-size: 1.2em;}
.formbox3  {font-size: 1.5em;}
.humantestimg {width: 98%;max-width: 98% !important;}
.humantestconfirm {width: 98%;}
.humantesthelp1{float: left;margin-left: 4%;}
.humantesthelp2 {float: right;margin-right: 4%;}
.formbuttonbox {width: 98%;margin: 0.4em auto;background-color: transparent;text-align: center;}
.formbutton1 {float: none;position: static;margin: 0.2em auto;}
.formbutton3 {float: none;position: static;margin: 0.2em auto;}
.bottompadforms {display: block;}
#footer1 {display: none;}
#footer2 {display: block;}
.footerpara {padding-top: 10px;}
}

@media screen and (min-width: 460px) and (max-width: 760px) {
#top {width: 100%;height:110px;margin: 0;padding: 8px 1% 3px;box-sizing:border-box;font-size: 1.0em;text-align: left;}
.topbrand {display: none;}
.topbrandsmall {display: block;margin:0px;width: 300px;height: auto;}
.mascot {display: none;}
#menu {position: absolute; left: 8px;top: 50px;background-color: transparent;width:90%;box-sizing:border-box;}
.menuone, .menutwo {float: left;width: 225px;}
.menucontent {width: 96%;height: 20px;padding: 2%;}
.menubul {float: left;width: 12px;height: 12px;margin: 5px 2px 2px;}

#container1 {margin-top:0;width: 100%;padding:  0;}
.colleft, .colmid, .colright{float:none;width: 85%;margin: auto;font-size: 1em;}
.colpad1 {display:none;}
h2.blank {display: none;}
.formbox1 {font-size: 1.5em;}
.formbox2  {font-size: 1.2em;}
.formbox3  {font-size: 1.5em;}
#footer1 {display: none;}
#footer2 {position: static;display: block;}
.footerpara {padding-top: 10px;}
}

@media screen and (max-width: 459px) {
#top {width: 100%;margin: 0;padding: 8px 0 3px;box-sizing:border-box;font-size: 1.0em;text-align: left;}
.topbrand {display: none;}
.topbrandsmall {display: block;margin:0 auto;width: 100%;height: auto;}
.mascot {display: none;}
#menu {position: absolute; left: 8px;top: 70px;background-color: transparent;width:90%;box-sizing:border-box;}
.menuone, .menutwo{float: left;width:100%;box-sizing:border-box;}
.menucontent {width: 96%;height: 20px;padding: 2%;box-sizing:border-box;}
.menubul {float: left;width: 12px;height: 12px;margin: 5px 2px 2px;box-sizing:border-box;}

#container1 {margin-top:0;width: 100%;padding:  0;}
.colleft, .colmid, .colright{float:none;width: 95%;margin: auto;padding: 2%;font-size: 0.9em;}
.colpad1 {display:none;}
h2.blank {display: none;}
.formbox1 {font-size: 1.5em;}
.formbox2  {font-size: 1.2em;}
.formbox3  {font-size: 1.5em;}
.humantestimg {width: 98%;}
.humantestconfirm {width: 98%;}
.formbutton1 {margin-left: 5%;}
.formbutton3 {margin-right: 5%;}

#footer1 {display: none;}
#footer2 {position: static;display: block;}
.footerpara {padding-top: 10px;font-size: 0.8em;}
}



/* Media QueriesEnd */


/* Code Ends */