body,
html{width:100%;height:100%;margin:0;padding:0;font-family:"proxima-nova",sans-serif; text-align: center}

html { height: 100%; background: #DEDAD7;}

ol, ul{list-style:none;}
h1{font-weight:600;font-size:2.0em;line-height:0.9em;margin:0px;color:#000000;letter-spacing:-2px;text-align: left; }
h2{clear:both;font-weight:600;font-size:2em;margin:0px 0 0 0;color:#333333;letter-spacing:-2px;line-height:0.9em; text-align: left}
h3{font-weight:700;font-size:1.8em;margin:20px 0 0 0;color:#000000;letter-spacing:-2px;    line-height: 1em;}
h4{font-weight:400;font-size:1.2em;margin:10px 0 0 0;color:#000000;letter-spacing:-1px;    line-height: 1em;}
hr{clear:both;border:0px;border-bottom:1px solid #ccc;margin:40px auto 0px;width:100%;}
h1,h2 {font-family:"ff-cocon-pro"; font-weight:400;}
h3,h4 {font-family:"ff-cocon-pro"; font-weight:700;}

h1,h2,h3,h4 p {color:#555555;}
.spacer{padding-top:24px;}
p{color:#4C4C4C;font-size:1em;margin:10px 0 0px 0;line-height:1.2em;font-weight:100;text-align: justify}

.home{text-align:center!important}
.half{float:left;width:48%;margin-right:4%;height:auto;}
.half:nth-of-type(2n){margin-right:0%;}
.half2{float:right;width:48%;margin-left:0%;}

#cform fieldset{margin:3% 0% 2%;padding:0;border:0px;width:100%;position:relative;}
#cform input{float:left;color:#444444;background-color:#ffffff;width:100%;margin:0 0 5% 0%;border:0px solid #000000;padding:8px;box-sizing:border-box;font-family:"proxima-nova",sans-serif;font-size:1em;border-radius:5px;}
#cform .lt{float:left;width:48%;}
#cform .rt{float:right;width:48%;}
#cform select{float:left;color:#000;background-color:#ffffff;height:44px;width:100%;margin:0 0 9% 0%;border:0px solid #000000;padding:8px;box-sizing:border-box;font-family:"proxima-nova",sans-serif;font-size:1em;border-radius:5px;}
#cform textarea{float:left;color:#000;background-color:#ffffff;width:100%;height:80px;margin:0 0 5% 0;border:0px solid #000000;box-sizing:border-box;padding:8px;font-family:"proxima-nova",sans-serif;font-size:1em;border-radius:5px;}
#cform .btn{clear:both;text-align:center;font-size:1.3em;letter-spacing:-1px;background-color:#687734;;color:#ffffff;display:block;width:auto;margin:0px auto 5%;border:0px;padding:10px 20px;font-weight:400;border-radius:5px;font-family:"ff-cocon-pro";}
#cform fieldset label{float:left;width:100%;margin:0px 0 0px;font-size:1.25em;color:#000000;font-weight:600; text-align: left}
#cform .showf{display:none;}

.greenbtn { font-family: 'ff-cocon-pro';
    float: left;
    width: auto;
    font-weight: 400;
    display: inline-block;
    padding: 6px 10px;
    box-sizing: border-box;
    background: transparent;
    border:3px solid #687734;
    text-decoration: none;
    color: #444444;
    border-radius: 5px;
    letter-spacing:-1px;
    font-size: 1.3em;
margin-right:4%;

    margin-top: 4%;}

strong{color:#000000;font-weight:600}
strong a {    color: #000000 !important;    font-weight: 600 !important;	text-decoration:underline !important;}
.left{float:left}
.right{float:right;}
.clear{clear:both;}
.holder{margin:0px auto;max-width:1080px;padding:0px 30px 0}
.holder:before, .holder:after{content:"\0020";display:block;height:0;overflow:hidden; }
.holder:after{clear:both;}

header {clear:both;width:100%;margin:0px 0 0px;height:235px;position:relative;  background-image: url('images/masthead-bg.jpg');background-size:auto 100%;background-position:center center; }
header .holder{padding:10px 0px 0; height:230px;border-bottom:0px; position: relative}
header .toplogo{float:left;width:auto;  margin-top: 15px;}
header .title{float:left;width:50%;color:#ffffff;font-family:"ff-cocon-pro"; font-weight:700;font-size:2.8em;text-align:left;line-height:92%;letter-spacing:-1px;margin:27px 0% 0% 24px; }
/*header .strapline{clear:both; float:left;width:50%;color:#ffffff;font-family:"ff-cocon-pro"; font-weight:400;font-size:2.1em;text-align:left;line-height:110%;letter-spacing:-1px;margin:1% 0% 0% 0%; }*/
header .strapline{clear:both; float:left;width:66%;color:#ffffff;font-family:"ff-cocon-pro"; font-weight:400;font-size:1.8em;text-align:left;line-height:110%;letter-spacing:-1px;margin:1% 0% 0% 0%; }

#introholder{clear:both;width:100%;background:#ffffff;margin:0 0 0px 0;padding:30px 0;text-align:center}
.mainholder{position:relative;z-index:9999;clear:left;float:left;width:100%;margin:0px 0 0px;height:auto;color:#333;text-align:left;padding:3% 0px;box-sizing:border-box}
.mainholder ul ,.maintextbox ul ,.maintextbox ol , .sidebar ul{padding:10px 0% 0 23px}
.mainholder ul li , .maintextbox ul li , .sidebar ul li{list-style-type:circle;padding-left:10px;line-height:1.5em;margin:0px 0 0 0%;font-weight:300;font-size:1.25em;}
.mainholder ul , .half ul{padding:10px 0% 0}
.mainholder ul li , .half ul li {list-style-type:none;background:url(images/yellowtick.png) no-repeat left 8px;padding-left:30px;line-height:1.2em;margin:0px 0 12px 0%;font-weight:400;font-size:1.25em;}
.mainholder .half img {width:100%;}

.half p{text-align: justify}


.col{float:left;width:30%;margin-right:5%;height:auto;box-sizing:border-box;}
.col:nth-of-type(3n){margin-right:0%;}
.col img{/*width:100%;*/}





.whyusholder{clear:both;padding:0% 0 ; position:relative}
.whyusholder .overlay {position:absolute; z-index:999; display:block; left:0px; right:0px; top:150px; bottom:-30px; background-color:#f0f0f0; }
.whyusholder h3{    position: relative;
    z-index: 1000;
    font-size: 1.2em;
    font-weight: 600;
    color: #4C4C4C!important;
	margin-top: 10px;}
.whyusholder p{padding:0px 0px;box-sizing:border-box;text-align:center;position:relative; z-index:1000;  }

.whyusholder .col{ text-align: center; margin-top:5%}
.whyusholder .col .spotimg1 {z-index: 1000;position: relative; transition:all 0.3s ease-out; margin-bottom: 0px;}
.whyusholder .col .spotimg2 {z-index: 998;position: relative; transition:all 0.3s ease-out; margin-top: -150px;}
.whyusholder .col .spotimg3 {z-index: 1001;position: relative; transition:all 0.3s ease-out; margin-top:  -70px;}
.whyusholder .col img{ margin:0% 0%; -o-transition:all 0.2s ease-out;transition:all 0.2s ease-out; ms-transition:all 0.2s ease-out;}


.whyusholder .col a, a.yellowbtn{font-weight:bold;display:inline-block; padding:8px 12px; background:#FDD406;; text-decoration:none; color:#444444; margin:20px auto; border-radius:5px;}
.whyusholder .col a { font-weight:bold;display:inline-block; padding:8px 12px; text-decoration:none; color:#444444; margin:0px auto; border-radius:5px; font-size:1.2em;}
.whyusholder .col:nth-of-type(1) a{ background:#F3C849; }
.whyusholder .col:nth-of-type(2) a{ background:#EC9495; }
.whyusholder .col:nth-of-type(3) a{ background:#8DCE55; }


.bgimgholder{clear:both; padding:2% 0 2%; margin:2% 0 0; }
.bgimgholder p{float:left; width:80%; color:#444444; margin:0px; font-size:1.45em; font-style: italic}
.bgimgholder a{font-family:"ff-cocon-pro"; float:right; width:17%; font-weight:400;display:inline-block; padding:12px 12px; box-sizing: border-box;  background:#ffffff; text-decoration:none; color:#8C7F76;; border-radius:5px; font-size:1.45em;}


#gmap{height:300px;margin-bottom:20px;}




footer{clear:both;width:100%;color:#ffffff;background:#8C7F76;margin:0px auto 0;text-align:center;}
footer .holder{line-height:150%;font-weight:normal;margin:0px auto 0px;padding:2% 0;text-align:center}
footer a{color:#ffffff;text-decoration:none;cursor:pointer !important;}
footer a:hover{text-decoration:underline;}
footer p{color:#ffffff;;font-size:1.25em;line-height:1.25em;margin:0px 0 0px; text-align: inherit}
footer .holder .col span{display:none !important}
footer .col:nth-of-type(1n){float:left; width:50%; margin:0px; text-align:left;}
footer .col:nth-of-type(2n){float:right; width:50%; margin:0px;text-align:right;}
footer svg{height:32px;width:auto;margin:0px 0 -12px 3px}
.now-design-logo{fill:#ffffff;}

#formsent{display:none;background:#000000;text-transform:uppercase;width:100%;padding:30px 0;border-radius:50%;border:0px;color:#ffffff;line-height:1em;transition:0.5s;font-size:1.5em;text-align:center;margin:10px 0 0 0px;}
.respbtn{display:none;}


*,*:after,*:before {	margin:0;	padding:0;	/*box-sizing:border-box;		*/-webkit-font-smoothing:antialiased;	font-smoothing:antialiased;	text-rendering:optimizeLegibility; }

@media only screen
and (min-width:0px)
and (max-width:991px){
	

.holder{width:96%;font-size:1em;padding:0 2%}
h1 br{display:none;}
header{width:100%;margin:0px;padding:0px;z-index:99999; }
header .holder{padding:10px 0px;}

.keyring {float:right; z-index:989; margin-right:-10%; position: relative;opacity:0.0 ; width:75%; }
	
header .toplogo{float:left;font-size:1.5em;line-height:180%;width:100%; margin-top: 15px; text-align: center }
header .toplogo span{display:none}
	
	header .title { width: 100%;  text-align: center; font-size: 3.8vw; margin: 0px 0% 0% 0px; z-index:999; position: relative}
header .strapline {   clear: both; text-align: center;  float: left;   width: 100%; font-size: 3.2vw; z-index:999; position: relative}

footer{clear:both;width:100%;;margin:0px auto 0;}
footer .holder{width:94%;margin:0 3% 1% 3%;background:none;}
footer .title{margin:0px 0 10px;font-size:1.2em;}
footer p{font-size:1.1em;line-height:1.2em;margin:0px 0 0px;text-align:left}

.maintextbox, .sidebar{clear:left;float:left;width:100%;margin:3% 0% 3%;height:auto;color:#333;text-align:left;padding:0 0%}
.maintextbox h2, .mainholder h2{text-align:left;}
.sidebar h2{margin:0% 0% 10px}
.maintextbox a:hover, .mainholder a:hover, .sidebar a:hover{}
.mainholder{clear:left;float:left;height:auto;color:#333;text-align:left;padding:30px 3% 20px 3% !important}
		



}
@media only screen
and (min-width:0px)
and (max-width:690px){
	
	
header { 	}
.keyring {float:right; z-index:989; margin-right:-10%; position: relative;opacity:0.0 ; width:75%; }
	
header .title { width: 100%;  text-align: center; font-size: 4.8vw; margin: 07px 0% 0% 0px; z-index:999; position: relative}
header .strapline {   clear: both; text-align: center;  float: left;   width: 100%; font-size: 4.2vw; z-index:999; position: relative}


.col{float:left;width:100%;margin-right:0%; height:auto;box-sizing:border-box;}


.half{float:left;width:100%;margin-right:0%;height:auto;}


footer .holder{width:94%;margin:0 3% 1% 3%;background:none;}

footer .holder .col{width:100%;text-align:center;margin:0px 0 10px}
footer p{line-height:1.2em;margin:0px 0 0px;text-align:center}
footer .holder .col:nth-of-type(3){width:50%;margin:0 25%;}


#cform .lt{float:left;width:100%;}
#cform .rt{float:right;width:100%;}

.box11{width:100%;}
.box12{width:100%;}
	
	
.col2{float:left;width:100%;margin-right:0%;margin-top:2%;height:auto;box-sizing:border-box; background-size:contain !important; padding:2%;  position: relative; z-index: 9; }
.col2 .title {margin:0%;font-size:1.3em; color:#ffffff; font-weight:bold; text-transform: uppercase; text-align:left;}
.col2:hover{margin-top:2%;padding:2%; }
	
.whyusholder .overlay {position:absolute; z-index:999; display:block; left:0px; right:0px; top:150px; bottom:-30px; background-color:#DEDAD7; }	
.bgimgholder p{float:left; width:100%; color:#444444; margin:20px 0; font-size:1.45em; font-style: italic}

	.bgimgholder a{font-family:"ff-cocon-pro"; float:right; width:100%; font-weight:400;display:inline-block; padding:12px 12px; box-sizing: border-box;  background:#ffffff; text-decoration:none; color:#8C7F76;; border-radius:5px; font-size:1.45em;}

}
.showf{display:none;}