/* ==========================================================================
   Helper classes
   ========================================================================== */

    /* Add the .hidden class to any elements that you want to hide
    from all presentations, including screen readers. It could be an element
    that will be populated later with JavaScript or an element you will hide
    with JavaScript. Do not use this for SEO keyword stuffing.
    That is just not cool. */

    .hidden {
        display: none !important;
        visibility: hidden;
    }

    /* Add the .visuallyhidden class to hide text from browsers
    but make it available for screen readers. You can use this to hide text
    that is specific to screen readers but that other users should not see. */

    .visuallyhidden {
        border: 0;
        clip: rect(0, 0, 0, 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    .visuallyhidden.focusable:active,
    .visuallyhidden.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
    }

    /* Add the .invisible class to any element you want to hide
    without affecting layout. When you use display: none an element
    is effectively removed from the layout. But in some cases
    you want the element to simply be invisible while remaining
    in the flow and not affecting the positioning of surrounding content. */

    .invisible {
        visibility: hidden;
    }

    /* Adding .clearfix to an element will ensure that it always
    fully contains its floated children. There have been many variants
    of the clearfix hack over the years, and there are other hacks
    that can also help you to contain floated children, but the HTML5
    Boilerplate currently uses the micro clearfix. */

    .clearfix:before,
    .clearfix:after {
        content: " ";
        display: table;
    }

    .clearfix:after {
        clear: both;
    }


/* ==========================================================================
  My CSS
   ========================================================================== */
		
    html{
	font-size: 16px;
	font-size: 1em; 
	background-color: #fff;	
    }	
	body {
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "Helvetica, Arial, sans-serif";		
	text-decoration: none;	
	background-color: #fff;		
	color: #000;
	}
	body, html {		
	height: auto;	
	}		
	h1, 
	h3, 
	p, 
	ul, 
	img {
    margin: 0;				
    }
	h1{
	font-size: 36px;
	font-size: 2.25em;	
	line-height: 40px;	
	line-height: 2.5em;
	}			
	h2{
	font-size: 20px;	
	font-size: 1.25em;		
	line-height: 24px;
	line-height: 1.5em;
	}
	h3 {
	line-height: 16px;
	line-height: 1em;
	}
	li {
	list-style-type: none;	
	line-height: 24px;	
	line-height: 1.5em;
	}
	
	#container {
	max-width: 1024px;
	max-width: 64em;
	width:100%;	  
	background-color: white;	
	margin: 0 auto;	
	color: #000;	  
	}
	
	/* ==========================================================================
   Logo and header
   ========================================================================== */
	#top {
	display: block;	
	text-align: center;
	}
	#top figure {	
	margin: 0;
	padding: 20px 0 10px 0;
	padding: 1.25em 0 0.62em 0;
	width: 95%;		
	}
	#container > header {
    background-color: #fff;
    }	
	#logo-mobile img, 
	#logo-mobile-home img {
	padding-bottom: 16px;
	padding-bottom: 1em;
	margin-left: 10px;
	margin-left: 0.62em;
	text-align: center;
	}
	#logo-mobile img { /*index page mobile size with no black line */
	border-bottom: #000 thin solid;
	}
	/* ==========================================================================
   Navigation
   ========================================================================== */
	nav {
	margin: 0;		
	z-index:10;	
	padding-bottom: 0;
	}
	nav ul {
	background-color: #fff;
	padding: 16px;	
	padding: 1em;
	}		
	nav li {
	display: inline-block;	
	text-decoration: none;
	line-height: 0;
	color: #047310; /*green*/
	}		
	nav li a {
	padding: 5px 15px;	
    padding: 	0.31em 0.93em;
	font-size: 18px;	
	font-size: 1.12em;
	color: #047310;	
	text-decoration: none;
	line-height: 0;
	}		
	nav a:hover{
	background-color:#cadfc4; /*light green*/
	color:#000;
	}
	nav a:active{
	background-color:#cadfc4;
	color:#000;
	}
	.current_link{
	background-color:#cadfc4;
	color:#000;
	}

 /* ==========================================================================
   styles 
   ========================================================================== */
	.home-mobile {
	text-align: left;
	}
	.order-online {
	text-align: center;
	padding-top: 20px;
	padding-top: 1.25em;
	}	
	.title-link a:hover {
	background-color: #cadfc4; /*light green*/
	color: #000;
	padding-right: 5px;
	padding-right: 0.31em;
	}
	.colorgreen {
	color: #047310;
	}
	.tocenter,
	 img {
	text-align: center;
	}
	.goright {
	float: right;
	}
	.goleft {
	float: left;
	}
	.title-link,
	.services {
	padding-top: 10px;
	padding-top: 0.62em;
	}
	.borderblack {
	border: 1px solid #000;
	border: 0.063em solid #000;
	margin-top: 10px;
	margin-top: 0.62em;
	}
	.maptitle,
    .title	{
	padding-top: 10px;
	padding-top: 0.62em;
	}
	.maptitle2 {
	font-size: 24px;
	font-size: 1.5em;
	}
	.line {
	border-bottom: #000 thin solid;
	}
	.click { /*for zoom*/
	margin:0;
	color: #000;
	}
	.online {
	float: right;
	padding-top: 40px;
	padding-top: 2.5em;
	padding-right:0;
	}
	.online-text {
	padding-top: 8px;
	padding-top: 0.5em;	
	float:right;
	}
	.online-flower, 
    .online-text	{
	padding-right: 10px;
	padding-right: 0.62em;
	}
	.paragraph {
	margin-bottom: 16px;
	margin-bottom: 1em;
	}
	.sentence-mobile, /*index page main sentence */
    .space-bottom1	{
	padding-bottom: 10px;
	padding-bottom: 0.62em;
	}
	.space {
	padding-top: 20px;
	padding-top: 1.25em;
	}
	.space-bottom {
	padding-bottom: 20px;
	padding-bottom: 1.25em;
	}
	.space-bottom2 {
	padding-bottom: 0;
	}
	.space-10,
	.about-space {
	padding-top: 10px;
	padding-top: 0.62em;
	} 
	.contact-space {
	padding-top: 30px;
	padding-top: 1.87em;
	}	
	.title1 { /*main sentence index page */
	text-align: center;
	} 
	.maps {
	padding-top: 25px;
	padding-top: 1.56em;
	}
	.maps2 {
	padding-top: 20px;
	padding-top: 1.25em;
	}
	.maps-mobile {
	padding-top: 16px;
	padding-top: 1em;
	}
	.click2 {
	padding-top: 5px;
	padding-top: 0.31em;
	float: right;
	}
	#drag {
	font-size: 14px;
	font-size: 0.87em;
	line-height: 16px;
	line-height: 1em;
	padding-top: 8px;
	padding-top: 0.5em;
	}
	/* ==========================================================================
  Footer
   ========================================================================== */
	#footer,
    #footer2	{
	border-top: 1px solid #000;
	border-top: 0.063em solid #000;
	padding: 10px 0 10px 0;
	padding: 0.62em 0 0.62em 0;	
	}	
	#footer {
	margin: 25px 0 10px 0; 
	margin: 1.56em 0 0.62em 0;
	}
	#footer2 { /*for contact page */
	margin: 0 0 10px 0;
	margin: 0 0 0.62em 0;
	}
	#footer ul li,
    #footer2 ul li  {
	display: inline;
	padding: 10px; /*10px all*/
	padding: 0.62em;
	color:#000;
	}	
	#footer ul,
	#footer2 ul {	
	text-align: left;
	margin:0;
	padding: 5px;
	padding: 0.31em;
	}   
	.icons {
	border-right: #CCC thin solid;
	}
	.copyright {
	border-right: #fff thin solid;	
	}
		/* ==========================================================================
   @media
   ========================================================================== */
	/* all ids and classes with the mobile word are for mobile screen sizes */
	@media screen and (min-width: 10em) { 
		#fortablet, 						/*number of columns changes from 6-6 in about page */
		.location-mobile, 				/*about page location paragraph for mobile */
		#slider-mobile, 				/*slider for mobile smaller size and different images */
		.sentence-mobile, 			/*change size of paragraphs in index page*/
		#logo-mobile, 					/*logo for mobile navigation index page - with no bottom black line */
		#logo-mobile-home, 		/*logo for mobile navigation all pages but index */
		.landscape-title-mobile, 	/*for sections in plans and rendering pages */
		#about-mobile { 				/*title for about mobile page */		 	
		display: block;
		}
		/*hidden in mobile starts here */
		#fordesktop, 			/*number of columns changes from 6-6 to 4-8 */
		.location,					 /*about page location paragraph*/
		#slider,					/* slider index page*/
		.sentence,
		#logo,
		.landscape-title	,
		.formobile,
		.map1,				/*click on plan instructions  for plans page*/
		#about,
		#rendering {
		display: none;
		}
		.title1 { 					/*main sentence index page */
		padding: 15px 0 5px 0;
		padding: 0.93em 0 0.31em 0;
		}		
		nav li a {			 /*for meanmenu */
		font-size: 24px;
		font-size: 1.5em;
		}
		#footer ul,
        #footer2 ul {
		font-size: 12px;
		font-size: 0.75em;
		}	
	}
	@media screen and (min-width: 30em) {
	   #slider-mobile { 
	   display: none;
	   }
	    #slider { 			/*slider for tablet and big screens */
	   display: block;
	   }
	  }
	@media screen and (min-width: 37.5em) {		
		nav {
		text-align: center;	
		}		
		#footer ul,
        #footer2 ul {
		font-size: 16px;
		font-size: 1em;
		}			
	}
	@media screen and (min-width: 42em) {
		.location-mobile,
		.sentence-mobile,
		#logo-mobile, 
		#logo-mobile-home,	
		#about-mobile {
		display: none;
		}
		.location,
		.sentence, 		/*home page*/
		#logo,
		.formobile,		
		#about,
		#rendering {
		display: block;
		}
		.formobile {
		padding-top: 48px;
		padding-top: 3em;
		}
		nav li a {
		font-size: 18px;
		font-size: 1.12em;
		}
		.title1 {
		padding: 25px 0 5px 0;
		padding: 1.56em 0 0.31em 0;
		text-align: center;
		}			
	}	
	@media screen and (min-width: 52em) {		
		.landscape-title-mobile,
		#fortablet		{ 
		display: none;
		}		
		.landscape-title,
		#fordesktop, 	/*number of columns changes from 6-6 to 4-8 */
		.map1 {			/*click on plan instructions  for plans page*/
		display: block;
		}	
        .formobile {
		padding-top: 0;
		}	
        .space-bottom2 {
		padding-bottom: 24px;
		padding-bottom: 1.5em;
		}		
		
	}