/* COLORS
Dark Green - #599025 
Dark Blue #002EB8
Black Blue #3A4461
Dark Red #B82E00
Green #006633
Light Purple #CCCDFF
Dark Brown #664D33
Pink #FF5C5C
LIGHT GREY #B8B9BF
DARK GREY #525354

THIS SITE : DARK BLUE HEADER #20323e
LIGHT BLUE : #4b6574
VERY LIGH BLUE - #7b99aa
Even lighter #a4b9c5


*/

/*IMPORT FONT*/

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,300,800);

/*	Resets
	------	*/
*
{margin: 0; padding: 0;}
	
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

/*BOX SIZING RESET*/
*,
*::before,
*::after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {display: block;}

a img {border: 0;}
figure {position: relative;}
figure img {width: 100%;}
ul {list-style-type:none;}

body {font-family: 'Open Sans' , sans-serif, arial; line-height: 1.5; font-size:16px; /*background-color :#B8B9BF;*/}
/*BODY FONT SIZE SETS EM SIZE FOR PAGE*/
h1, h2, h3, h4, h5, h6 { font-weight: 600; font-family: 'Open Sans' , sans-serif; color: #4e4e4e; }
h1 {font-family: "Trebuchet MS" , Arial, Helvetica; font-size: 165%; color: #000; }
h2 {font-family: "Trebuchet MS" , Arial, Helvetica; font-size: 150%;}
h3 {font-size: 16px; color: #787878; font-weight: 400; line-height: 135%; }
h4 {font-size: 16px; }
a {color:  #000; text-decoration: none; -webkit-transition: color 300ms, background-color 300ms; -moz-transition: color 300ms, background-color 300ms; -o-transition: color 300ms, background-color 300ms; transition: color 300ms, background-color 300ms; }
a:hover, a:focus { color: /*#000000;*/ #ffffff;}
hr { border-top: 1px solid #e5e5e5; border-bottom: 4px solid black; }
.cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }

/*---------------------------------------------------*/


/*MASTER PAGE*/
/*ALSO RUNS WITH A SCRIPT*/
#container {margin: 1% auto; width :1100px; px solid #B8B9BF; overflow:auto;}
/*LOTS OF Z-INDEX SETTINGS*/

/*Main Nav Bar*/
/*Z-Index - Applied to NAV, Masthead & Mastslider - So dropdown appears above slider image*/
nav {float: left; width: 100%; margin: 0; padding: 0; background-color: #447921; position: relative;z-index:2; }
nav p { text-align: center; }
.toggle, [id^=drop] { display: none; }
nav:after { content: ""; display: table; clear: both; }
nav ul {float: left; padding: 0; margin: 0; list-style: none; position: relative; }
/*Overlays Main Nav Bar - Background applies to Dropdown Area*/
nav ul li { margin: 0px; display: inline-block; float: left; background-color:  #447921;}
/*SPACE BETWEEN EACH LINK*/
nav a { display: block; padding: 0 20px; color: #FFF; font-size: 110%; line-height: 2.5; text-decoration: none; }
/*No effect must be second li group*/
/*nav ul li ul li:hover { background: blue; }*/
nav a:hover { background-color:#31573f; color :#ffffff;}
nav ul ul { display: none; position: absolute; top: 40px;}
nav ul li:hover > ul { display: inherit;}
nav ul ul li { width: 130%; /*170px;*/ float: none; display: list-item; position: relative; /*ADDED >*/ background-color :#31573f; color :black; }
nav ul ul ul li { position: relative; top: -60px; left: 110%;}
nav li > a:after { content: ' +'; }
nav li > a:only-child:after { content: ''; }


/*----------------------------------------------*/
/* MASTHEAD BACKGROUND GRADIENT - REFERENCE http://www.css3factory.com/linear-gradients/*/
.masthead {z-index: -1; float: left; width: 100%; height: auto; margin: 0% 0% 0 0; padding-bottom :2%; 
background-image: -webkit-gradient( linear, right top, right bottom, color-stop(0.44, rgb(68, 120, 33)), color-stop(1, rgb(161, 202, 27)) ); 
background-image: -o-linear-gradient(bottom, rgb(68, 120, 33) 44%, rgb(161, 202, 27) 100%); background-image: -moz-linear-gradient(bottom, rgb(68, 120, 33) 44%, rgb(161, 202, 27) 100%); 
background-image: -webkit-linear-gradient(bottom, rgb(68, 120, 33) 44%, rgb(161, 202, 27) 100%); background-image: -ms-linear-gradient(bottom, rgb(68, 120, 33) 44%, rgb(161, 202, 27) 100%); 
background-image: linear-gradient(to bottom, rgb(68, 120, 33) 44%, rgb(161, 202, 27) 100%); }

.topleft {float: left; width: 45%; height: auto; margin:3% 0% 0 2%;}
.topleft h1 {float:left; font-size:200%; text-align :center; width:100%;line-height :0.9;color :#ffffff; margin-top:1%; }
.topleft h2 {float: left; width: 100%;font-size :165%; text-align :center; padding-bottom :1%; line-height :0.8; margin:2% 0 0 0%; color :white; font-family: 'Titillium Web', sans-serif, Arial; font-weight: 600; /*font-style :italic ;*/  }
.topimage {float:left; width:90%;height:auto; margin :10% 0 0 2%; }
.topimage img {display:block; width: 50%; margin-left :auto; margin-right :auto; border:none ;}

/*MASTHEAD SLIDER*/
/*! http://responsiveslides.com v1.54 by @viljamis */
/*TWO VERSIONS - MASTHEAD AND GALLERY PAGE*/

.mastslider {z-index :1;float: left; width: 45%; height: auto; margin: 3% 1% 1% 3%;background-color  :#ffffff; border-radius :2%; position:relative; top: 0px; left: 0px; }

/*SLIDER - ID SLIDER 4 SEE SCRIPT*/
/*.rslides {margin: 0 auto 40px;}*/
/*.rslides {margin: 0 auto;}*/
a { color: #fff; text-decoration: none; }
#download { background: #333; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; display: block; font-size: 20px; font-weight: bold; margin: 60px auto; max-width: 500px; padding: 20px; }
#download:hover { background: rgba(255,255,255,.15); }
.events { list-style: none; }
.callbacks_container { margin: 1%; /*position: relative;*/ float: left; width: 98%; top: 0px; left: 0px;border-radius :5px; }
.callbacks { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; }
.callbacks li { position: absolute; width: 100%; left: 0; top: 0; }
.callbacks img { display: block; position: relative; z-index: 1; height: auto; width: 100%; border: 0; }
.callbacks_nav { position: absolute; -webkit-tap-highlight-color: rgba(0,0,0,0); top: 52%; left: 0; opacity: 0.7; z-index: 3; text-indent: -9999px; overflow: hidden; text-decoration: none; height: 61px; width: 38px; background: transparent url("themes/themes.gif") no-repeat left top; margin-top: -45px; }
.callbacks_nav:active { opacity: 1.0; }
.callbacks_nav.next { left: auto; background-position: right top; right: 0; }

/*----------------------------*/

/*2nd Slider - from Themes.*/
.rslides { margin: 0 auto; }
.rslides_container { margin-bottom: 50px; position: relative; float: left; width: 100%; }
.centered-btns_nav { z-index: 3; position: absolute; -webkit-tap-highlight-color: rgba(0,0,0,0); top: 50%; left: 0; opacity: 0.7; text-indent: -9999px; overflow: hidden; text-decoration: none; height: 61px; width: 38px; background: transparent url('../images/themes.gif') no-repeat left top; margin-top: -45px; }
    .centered-btns_nav:active { opacity: 1.0; }
    .centered-btns_nav.next { left: auto; background-position: right top; right: 0; }
.transparent-btns_nav { z-index: 3; position: absolute; -webkit-tap-highlight-color: rgba(0,0,0,0); top: 0; left: 0; display: block; background: #fff; /* Fix for IE6-9 */ opacity: 0; filter: alpha(opacity=1); width: 48%; text-indent: -9999px; overflow: hidden; height: 91%; }
    .transparent-btns_nav.next { left: auto; right: 0; }
.large-btns_nav { z-index: 3; position: absolute; -webkit-tap-highlight-color: rgba(0,0,0,0); opacity: 0.6; text-indent: -9999px; overflow: hidden; top: 0; bottom: 0; left: 0; background: #000 url('../images/themes.gif') no-repeat left 50%; width: 38px; }
    .large-btns_nav:active { opacity: 1.0; }
    .large-btns_nav.next { left: auto; background-position: right 50%; right: 0; }
    .centered-btns_nav:focus,
    .transparent-btns_nav:focus,
    .large-btns_nav:focus { outline: none; }
.centered-btns_tabs,
.transparent-btns_tabs,
.large-btns_tabs { margin-top: 10px; text-align: center; }
    .centered-btns_tabs li,
    .transparent-btns_tabs li,
    .large-btns_tabs li { display: inline; float: none; _float: left; *float: left; margin-right: 5px; }
    .centered-btns_tabs a,
    .transparent-btns_tabs a,
    .large-btns_tabs a { text-indent: -9999px; overflow: hidden; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; background: #ccc; background: rgba(0,0,0, .2); display: inline-block; _display: block; *display: block; -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3); -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3); box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3); width: 9px; height: 9px; }
.centered-btns_here a,
.transparent-btns_here a,
.large-btns_here a { background: #222; background: rgba(0,0,0, .8); }

/*---------------------------------------*/


.main {float:left; width :100%; height:auto; z-index:1;}
.maintextarea {float:left; width :94%; margin-left:3%; padding-top:1%; padding-bottom:1%; height:auto; background-color: transparent; /*border:1px solid red;*/}
.maintextarea p {font-size: 95%; line-height:1.5; padding :1% 2% 1% 2%; }
.maintextarea a {color:#002EB8; text-decoration: none; }
.maintextarea a:hover {text-decoration: underline; }

/*FOOTER*/
.foot {float:left; width: 100%; height: auto; background-color: #447821; margin-bottom:1%; }
.footlogo {float:left; width: 5%; height: auto; margin :1.5% 0 1% 2%;}
.footlogoimg {display:block; width: 80%; margin: 1% auto 1% auto; }
.footlogo2 {float:left; width: 10%; height: auto; margin :1.5% 0 1% 3%;}
.footlogoimg2 {display:block; width: 100%; margin: 1% auto 1% auto; }
.footservices {float:left; width: 68%; height: auto; margin :1% 0 1% 1%;}
.footservices h3 {font-size: 110%; text-align: center; line-height: 1.2; font-weight: bold; color:#ffffff;}
.footservices p { font-size: 105%; text-align: center; line-height: 1.2; font-weight: bold; color:#ffffff;}

/*END OF MASTER PAGE*/

/*===============================*/

/*MAIN CONTENT PAGES*/

.innerleft {float: left; width: 75%; background-color: transparent;}
/*.innerleft p {font-size:95%; }*/
.innerleftpanel {float: left; width: 100%; background-color: #ffffff; border-radius :10px; padding-bottom:0.5%; margin-left: 0px; margin-top: 1%; margin-bottom: 10px; }
.innerleftpanel h1 {text-align:left; font-size:135%; line-height:1.2; padding: 1% 0 1% 2%; color :#000000; }
.innerleftpanel h2 {text-align:left; font-size:115%; line-height:1.2; padding: 1% 0 0 2%;}
/*test iphone*/
    .innerleftpanel p {font-size:95%;  }

/*IMAGES*/
.innerlefttext_right {float: right; margin-left: 2%; margin-top :1%; margin-bottom: 2%; width:35%; height:auto; }
.innerlefttext_right img {display:block; width: 90%; margin: 2% auto 2% auto; }
.innerlefttext_left {float: left; margin-left: 2%; margin-top :1%; margin-bottom: 2%; width:35%; height:auto; }
.innerlefttext_left img {display:block; width: 90%; margin: 6% auto 8% auto; }

/*MAIN PAGES RIGHT COLUMN*/
.innerright {float: left; width: 23%; height:auto; margin-left:2%; margin-right:0%; margin-top:1%; background-color: #ffffff; /*border:1px solid green;*/ /*border-radius :10px;*/ }
.innerrighthead {float:left; width:100%; height:auto; padding:2% 0 0 1%; }
.innerrightheadpic {float:left; width:23%; height:auto; margin-left:2%;}
.innerrighthead img {display:block; width: 80%; margin: auto auto;}
.innerrightcaption {float:left; width:70%; height:auto; font-size:120%; margin:2% 0 0 0; color:#447821; font-weight :bold; text-align :center; }
.innerrighttext {float: left; width: 90%; height: auto; margin: 3% 5% 2% 5%;} 
.innerrightimage {float: left; width: 90%; margin-left:5%;}
.innerrightimage img {display:block; width: 80%; margin: 4% auto 4% auto;}

.innerrightbtn {float:left; width:100%; height:auto; margin-top:1%; margin-bottom :2%;}
.innerrightbtn img {display: block; width: 70%; height: auto; margin: auto auto; padding-top:2%;}

/*SWITCH INNER RIGHT IN MEDIA QUERIES*/
.innerleftpaneloff {float: left; display: none; visibility: hidden; width: 100%; margin: 1% 0 10px 0px; background-color: #ffffff; border-radius :10px; padding-bottom:0.5%;}
.innerleftpaneloff h2 {text-align:left; font-size:115%; line-height:1.2; padding: 1% 0 0 2%; text-align :center; color:#447821;}
.innerleftpaneloff img {float: left; width: 17%; height:auto; margin-right:2%; margin-left:1%;}
.innerleftpaneloff p {font-size:95%; line-height :1.2; text-align:center; }
.innerleftpaneloffhead {float:left; width:100%; height:auto; padding:2% 0 0 1%; }

/*FULL PAGE WIDTH - NO RIGHT COL NO PANEL BELOW INNER LEFT */
.innerleftfull {float: left; width: 100%; background-color: transparent; /*border-radius :10px;*/}
.innerleftpanelfull {float: left; width: 100%; background-color: #ffffff; border-radius :10px; padding-bottom:0.5%; margin-left: 0px; margin-top: 1%; margin-bottom: 10px; }
.innerleftpanelfull h1 {text-align:left; font-size:135%; line-height:1.2; padding: 1% 0 1% 2%; color :#000000; }
.innerleftpanelfull h2 {text-align:left; font-size:115%; line-height:1.2; padding: 1% 0 0 2%;}

/*===============================*/
/*Q&A*/
.qatbl {float: left; width: 90%; height:auto; margin: 2% 5% 2% 5%; }
.qatbl1 {float: left; width: 30%; height:auto; margin:0% 0 2% 2%; font-size:105%; font-weight :bold; color :#355e1A;}
.qatbl2 {float: left; width: 65%; height:auto; margin:0% 0 2% 2%; font-size:95%;}

/*END MAIN PAGES*/
/*====================================================*/
/*WHAT WE OFFER*/
/*SPLIT LEFT RIGHT BORDER TOP*/
.offerpanel {float:left; width:45%; height:auto; margin : 1% 0% 1% 3%; }
.offerboxL {float:left; width:95%; height:auto; margin : 1% 0% 1% 3%; border-top:1px solid #B8B9BF; border-bottom:1px solid #B8B9BF; }
.offerboxR {float:left; width:95%; height:auto; margin : 1% 0% 1% 3%; border-top:1px solid #B8B9BF; border-bottom:1px solid #B8B9BF; }
.offerbox {float:left; width:95%; height:auto; margin : 1% 0% 1% 3%; border-bottom:1px solid #B8B9BF; }
.offerboxpic {float:left; width:40%; height:auto;margin:1% 0% 1% 2%; }
.offerboxpic img {display:block; width: 90%; margin: auto auto; }
.offerboxtext {float:left; width:55%; height:auto; margin:1% 0% 1% 2%; font-size :90%; line-height :1.2; text-align :center ;}
.offerboxtext h4 {float:left; width:100%; font-size :110%; font-weight :bold; text-align :center ; padding-bottom :2%; }

/*====================================================*/
/*THINGS TO DO - FULL WIDTH*/ 
/*SPLIT LEFT RIGHT BORDER TOP*/
.todocol {float:left; width:47%;height:auto; margin:1% 0 1% 2%;}
.todopanelL {float:left; width:98%; height:auto; border-top:1px solid #B8B9BF; border-bottom :solid 1px #4b6574; margin:1% 0 1% 0;}
.todopanelR {float:left; width:98%; height:auto; border-top:1px solid #B8B9BF; border-bottom :solid 1px #4b6574; margin:1% 0 1% 0;}
.todopanel {float:left; width:98%; height:auto; border-bottom :solid 1px #4b6574; margin:1% 0 1% 0;}
.todobox {float:left; width:30%; height:auto; margin: 1% 0 1% 0; padding:1%; /*border:solid 1px red;*/ }
.todobox h2 {float:left; width:95%; height:auto; font-size : 95%; color:#20323e; font-weight :bold; text-align: center; padding-bottom:1%; }
.todopic {float:left; width:100%; height:auto; margin: 2% 0 0 1%; padding-bottom :1%; }
.todopic img {display:block; width: 90%; margin: auto auto; }
.todoboxtxt {float:left; width:65%; height:auto; margin: 1% 0 1% 2%; padding: 0%; /*border:1px solid purple;*/ }
.todoboxtxt p {font-size :85%; line-height :1.2; }
/*====================================================*/

/*VIDEO - iframe width="560" height="315 SET ON PAGE*/
.videoWrapper {position: relative; padding-bottom: 56.25%; /* 16:9 */padding-top: 25px; height: 0; margin-top:3%;}
.videoWrapper iframe {position: absolute; top: 0; left: 0; width: 80%; height: 80%; margin:0% 0% 0% 10%;}

/*=======================================================*/
/*GALLERY - USES A SECOND SLIDED CSS FILE AND SCRIPT - "rslides_container"*/
.gallerybox { float: left; width: 70%; height: auto; margin: 2% 15% 2% 15%; }
.gallerypanel {float:left; width:80%; height:auto; margin:2% 10% 2% 10%; border:1px solid purple; }
.gallerypanel h1{float:left; margin: 0 0 2% 2%; font-size: 110%; font-weight :bold;  color: #20323e;}
.gallerypartone a { color: #20323e; text-decoration:underline; background:white; font-style :italic ;}
.galleryleftouter {float: left; width: 530px; height:auto; margin:2px 0px 0px 110px; }
.gallerypartonetxt {float:left; width:680px; height:auto; padding:2px; margin-bottom :5px; }
.gallerypartonesplit { float: left; width: 679px; height: auto; margin:5px 0px 0px 0px;  }

/*==========================================*/

/*CONTACT US*/
.contactemail {float: left; width: 90%; height: auto; margin:1% 0 2% 5%; }
.contactemailform {float: left; width: 90%; height: auto; margin: 1% 0 2% 5%;}
.contactemailtitles {float:left; width:30%; height:auto; padding: 1% 1%; font-size: 95%; font-weight: bold; margin-bottom: 1%;}
.contactemailfield {float:left; width:55%; height :3%; margin:0 0 1% 2%; padding:0.5%; font-size: 95%; }
.contactemailenquiry {float: left; width:55%; height: 120px; padding:0.5%; margin:0 0 1% 2%; font-size:0%;font-family: 'Open Sans' , sans-serif, arial; }
.emailquestion {float:left; width:25%; height:auto; margin: 2% 0 2% 2%; font-size :150%; font-weight :bold; color :green; }
.emailnumber {float:left; margin: 2% 0 2% 5%; width:15%; height:auto; padding:3% 0 3% 0; border:1px solid black; text-align :center ; font-size :120%; color :#447921;}

/*.emailcatch { float: left; width: 15%; height: auto; margin: 2% 0 0 5%; border:1px solid black;}*/
.emailerror {float:left; width:425px; height:auto; margin:2% 0 2% 30%; font-size:95%; color:#447921; text-decoration :underline ;}
.emailsend {float: left; width: 50%; height: auto; margin: 2% 0 0% 20%; }
.emailsend img {display:block; width: 90%; margin: auto auto;  }
.emailclear {float: left; width: 20%; height: auto; margin: 2% 0 0% 20%; }
.emailclear img {display:block; width: 90%; margin: auto auto; }
.contactemailmessage {float: left; font-size :90%; text-align :center; margin:2% 0 2% 5%; width: 90%; height: auto; color:#447921;}
/*.emailtd1 {vertical-align :top; width: 95px; margin: 2px 0px 0px 0px; font-family :Arial;font-size:13px;padding-bottom :10px; }*/

/*FEEDBACK*/
.feedbackinnerleft {float: left; width: 90%; margin:0% 0% 0% 5%; background-color: transparent;}
/*.innerleft p {font-size:95%; }*/
.feedbackinnerleftpanel {float: left; width: 100%; background-color: #ffffff; border-radius :10px; padding-bottom:0.5%; margin-left: 0px; margin-top: 1%; margin-bottom: 10px; }
.feedbackinnerleftpanel h1 {text-align:left; font-size:135%; line-height:1.2; padding: 1% 0 1% 2%; color :#000000; }
.feedbackinnerleftpanel h2 {text-align:left; font-size:115%; line-height:1.2; padding: 1% 0 0 2%;}

.feedbackemail {float: left; width: 90%; height: auto; margin:1% 0 2% 5%; }
.feedbackemailform {float: left; width: 90%; height: auto; margin: 1% 0 2% 5%;}

/*Comments Page*/
.commentcolumn {float:left; width:95%; margin: 2% 0% 2% 2%; height:auto; border:1px solid #B8B9BF;}

.commentleft {float:left; width:15%;height:auto; margin :1% 1% 1% 1%; }
.commentleft img {float:none ; display:block; width: 60%; margin-left : auto; margin-right : auto; border:none ;}

.commentright {float: left; width: 80%; height: auto; margin: 1% 1% 1% 1%;; padding: 0% 0% 0% 0%; }
.commenthead {float:left; margin :0px 0px 0px 0px; width :75%; line-height :1.0;font-size :105%; font-weight :bold; color:#447921; }
.commentdate {float:right; margin: 0% 1% 0% 0%; font-size: 90%; color: black; width: 20%; text-align :right ; font-style :italic ; }
.commenttext {float: left; width: 95%; height: auto; margin: 0% 1% 0% 0%; padding: 0px; font-size: 95%;}
.commentguest {float:right; margin: 0% 1% 0% 0%; font-size: 90%; color: black; width: 80%; text-align :right ; font-style :italic ; font-weight :bold;}

/*================================*/


/*==========================================*/
/*PRICES*/
.pricegrid { float: left; width: 86%; margin: 2% 7% 2% 7%; }

/*==========================================*/
/*END CSS*/
/*==========================================*/



/*----
USEFUL MEDIA QUERIES LINKS
http://presscustomizr.com/snippet/media-queries-responsiveness/
----*/

/*CHECK MENU.CSS FOR OTHER SIZES*/
/*--------------------------------------------------------------*/
@media (max-width: 1824px) {
      #container {width :1100px;}    
}
/*--------------------------------------------------------------*/

/*1680 width*/
    /*Less than 1200px*/
    @media (max-width:1280px) {
    #container {width:1100px;} 
        
    }

/*------------------------------------------------------------------*/
/* Medium Devices, Desktops */
/*1024 width*/
    @media (max-width : 1024px) {
   #container {width :980px;}
    
    }


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

    #container { width: 95%; }
    body { line-height: 1.3; font-size: 90%; }
    .topleft {width: 50%; height: auto; margin:3% 0% 0 2%;}
    .topleft h1 { font-size: 170%; }
    .topleft h2 { font-size: 130%; padding-top:2%; }
    .topimage { margin: 5% 0 0 2%; }

    .mastslider {width: 40%; margin: 5% 1% 1% 3%;}
    
    .footservices h3 {font-size: 90%; line-height: 1.0;}
    .footservices p { font-size: 90%; line-height: 1.0;}
    
    .innerleft { float: left; width: 100%; font-size:90%; }
    .innerleft p {font-size:95%; }
    .innerlefttext_right {float: right; margin-left: 1%; margin-top :1%; margin-bottom: 2%; width:35%; height:auto; }
    .innerlefttext_right img {display:block; width: 75%; margin: 2% auto 2% auto; }
    /*.innerrightpanel { display: none; visibility: hidden; }*/
    .innerright {display: none; visibility: hidden; }
    .innerleftpaneloff { display: block; visibility: visible; }
    .innerleftpaneloff h2 {font-size:125%;}
    .innerleftpaneloff img {float: left; width: 17%; height:auto; margin-right:2%; margin-left:1%;}
    .innerleftpaneloff p {font-size:95%; text-align:center; } /*PANEL AT BOTTOM*/

     nav { margin: 0; }
    .toggle + a,
    .menu {display: none; }
    /*.toggle {display: block; background-color: #254441; padding: 0 20px; color: #FFF; font-size: 20px; line-height: 60px; text-decoration: none; border: none; }*/
    .toggle {display: block; background-color:  /*#355e1a;*/ /*#254441;*//*#000000;*/#355e1a; padding: 0 20px; color: #FFF; font-size: 110%; line-height: 2.5; /*font-size: 20px; line-height: 60px;*/ text-decoration: none; border: none; }
    .toggle:hover { background-color: #88a900;/*#355e1a;*/ /*#447921;*//*#000000;*/ }
    [id^=drop]:checked + ul { display: block; }
    nav ul li { display: block; width: 100%; }
    nav ul ul .toggle,
    nav ul ul a { padding: 0 40px;/*40px;*/ }
    nav ul ul ul a { padding: 0 80px; }
    nav a:hover,
    nav ul ul ul a { background-color:#88a900; /*#447921;*//*orange*/ /*#000000*/ }
    nav ul li ul li .toggle,
    nav ul ul a { background-color: #88a900/*#212121*/; }
    nav ul ul { float: none; position: static; color: #ffffff; }
        nav ul ul li:hover > ul,
        nav ul li:hover > ul { display: none; }
        nav ul ul li { display: block; width: 100%; }
        nav ul ul ul li { position: static; }
}
   
@media screen and (max-width: 640px) {

    .topleft h1 { font-size: 135%; }
    .topleft h2 { font-size: 105%; }

    .offerpanel {width:70%; margin : 1% 15% 1% 15%; }
    .offerboxL {width:95%;}
    .offerboxR {width:95%; border-top:none;}
    .offerbox {width:95%;}
    .offerboxpic {width:40%; }
    .offerboxpic img {width: 60%;}

    .todocol {float:left; width:90%;height:auto; margin:1% 5% 1% 5%;}
    .todopanelL {width:95%;}
    .todopanelR {width:95%; border-top:none;}
    .todopanel {width:95%;}
    .todobox {float:left; width:30%; height:auto;}
    .todobox h2 { float: left; width: 95%; height: auto; }
    .todopic {float:left; width:100%; height:auto; margin: 2% 0 0 1%; padding-bottom :1%; }
    .todopic img {display:block; width: 90%; margin: auto auto; }
    .todoboxtxt {float:left; width:65%; height:auto; margin: 1% 0 1% 2%; padding: 0%; /*border:1px solid purple;*/ }
    .todoboxtxt p {font-size :90%; line-height :1.2; }
    

     .footservices h3 {font-size: 90%; line-height: 1.0;}
    .footservices p { font-size: 90%; line-height: 1.0;}

}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
        
        
        .topleft { width: 100%; }
        .topimage {width:40%;height:auto; margin :2% 30% 0 30%; }
        .topimage img {display:block; width: 70%; margin-left :auto; margin-right :auto; border:none ;}

        .mastslider {width: 60%; margin: 5% 20% 1% 20%;}
        .offerpanel {width:86%; margin : 1% 7% 1% 7%; }
       
        .innerleftpanel h1 {text-align:center; padding: 1% 3% 1% 3%;}
        /*.innerleft p {font-size:90%; }*/

        /*iphone font side test*/
        .innerleftpaneloff p {font-size:85%; }
        .innerleftpanel p {font-size:85%;}
        

        .footlogo {width: 10%;}
        .footlogoimg {width: 65%;}
        .footlogo2 {width: 15%;}
        .footlogoimg2 {width: 90%;}
        .footservices {width: 55%;}
        .footservices h3 {font-size: 80%;}
        .footservices p { font-size: 75%;}
}

    /*------------------------------------------------------------------*/

/*iphone*/
/*@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape)
 { 
#container { width: 95%; }
    body { line-height: 1.3; font-size: 90%; }
    .innerleft p {font-size:90%; }
}*/


    /* Custom, iPhone Retina */
    @media (max-width : 320px) {
     body {line-height: 1.3; font-size:70%;}
    .footlogo {margin-top:3%;}
    .footlogo2 {margin-top:3%;}

    nav ul li {display: block; width: 98%;}
    
    }


    @media screen and (max-width:240px) {
  

    }