/* *********************************************************************************************************************
	ADAM'S

	Why One% ? Let’s count ...
		we have 12 columns (magic number divided by 2, 3, 4, 6)

		for 12 columns we need 11 margins

		so if we count margin 3%, then 3% * 11 margins = 33%

		and if we count width of 1 column 5.5%, than 5.5% * 12 columns = 66%

		in the end we have 33% + 66% = 99% aaand ???

		1% is still here so that's the name - One%

	2 starting options ? Let’s count a bit more ...
		1200px - perfectly fits 1280 screens
			12 columns
			margin 3% / 36px (full-width)
			col1 5.5% / 66px (full-width)

		1000px - perfectly fits 1024 screens
			12 columns
			margin 3% / 30px (full-width)
			col1 5.5% / 55px (full-width)
*/





/* *********************************************************************************************************************
 * Main container for all
 */
.onepcssgrid-1000, .onepcssgrid-1200 {
	margin: 0 auto;
	padding: 0 0 0 1%; /* THAT'S THE NAME ;) */
}

.onepcssgrid-1200 {
	max-width: 1220px;
}

.onepcssgrid-1000 {
	max-width: 1020px;
}

.onerow {
	clear: both;
	padding: 0 10px;
}





/* *********************************************************************************************************************
 * Common columns definitions
 */
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
	float: left;
	margin: 0 3% 0 0;
}

.col1.last, .col2.last, .col3.last, .col4.last, .col5.last, .col6.last, .col7.last, .col8.last, .col9.last, .col10.last, .col11.last, .col12 {
	margin: 0;
}

.col1 { width: 5.5%; }
.col2 { width: 14%; }
.col3 { width: 22.5%; }
.col4 { width: 31%; }
.col5 { width: 39.5%; }
.col6 { width: 48%; }
.col7 { width: 56.5%; }
.col8 { width: 65%; }
.col9 { width: 73.5%; }
.col10 { width: 82%; }
.col11 { width: 90.5%; }
.col12 { width: 99%; margin: 0; }

.col1 img, .col2 img, .col3 img, .col4 img, .col5 img, .col6 img, .col7 img, .col8 img, .col9 img, .col10 img, .col11 img, .col12 img {
	width: 100%;
	height: auto;
	display: block;
}





/* *********************************************************************************************************************
 * Disable padding left/right 10px if I'm 1024 or gibber - correct percentage math
 */
@media all and (min-width: 1024px) {
	.onepcssgrid-1000 {
		max-width: 1000px;
	}

	.onepcssgrid-1000 .onerow {
		padding: 0;
	}
	
	
}





/* *********************************************************************************************************************
 * Small devices
 */
@media all and (max-width: 768px) {
	.onerow {
	}

	.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11 {
		float: none;
		width: 99%;
}



	}
	

/* *********************************************************************************************************************
 * font embedding
 */

@font-face {
  font-family: 'GlyphaBoldOblique';
  src: url('fonts/Glypha-65BoldOblique.eot'); /* IE9 Compat Modes */
  src: url('fonts/Glypha-65BoldOblique.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Glypha-65BoldOblique.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/Glypha-65BoldOblique.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/Glypha-65BoldOblique.svg#sGlyphaBoldOblique') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'GlyphaBold';
  src: url('fonts/Glypha-65Bold.eot'); /* IE9 Compat Modes */
  src: url('fonts/Glypha-65Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Glypha-65Bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/Glypha-65Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/Glypha-65Bold.svg#sGlyphaBold') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'GlyphaRoman';
  src: url('fonts/Glypha-55Roman.eot'); /* IE9 Compat Modes */
  src: url('fonts/Glypha-55Roman.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Glypha-55Roman.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/Glypha-55Roman.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/Glypha-55Roman.svg#sGlyphaRoman') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'GlyphaRegular';
  src: url('fonts/Glypha-Regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/Glypha-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Glypha-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/Glypha-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/Glypha-Regular.svg#sGlyphaRegular') format('svg'); /* Legacy iOS */
}

/* *********************************************************************************************************************
 * navigation
 */

.onerow100 {
clear: both;
padding: 0px;
margin:0px;
}


.navbreak {
width: 100%;
height: 30px;
background: #58574e;
margin-top:30px;

}

#nav-area {
margin-top: 30px;
}

/* *********************************************************************************************************************
 * Individual project page
 */

#logo {
margin-bottom:30px;
}
@media all and (max-width: 768px) {
#logo {
margin-bottom: -50px;
width:90%;
margin-left: auto;
margin-right:auto;
}
}


.heroimage img {
margin-top: 3px;
width:100%;
height: auto;
}



.full-w-bg {
width: 100%;
height:100%;
background: #58574e;
clear: both;
}

#intro-container {
margin-top:30px;
}

#response-container {
margin-bottom:90px;
}


h2.project-title {
color: #58574e;
font-family: GlyphaBold;
font-size: 1.666em;
line-height: 140%;
border-top-style:solid;
border-top-width: 0.275em;
border-top-color:#165f30;
padding-top:15px;
}

h1.project-task {
color: #229847;
font-family: GlyphaRegular;
font-size: 0.8em;
border-bottom-style:double;
padding-bottom:15px;
margin-top:-20px;
margin-bottom:20px;
}

p.project-intro {
font-family: GlyphaRegular;
font-size: 0.875em; /*14px/16 = 0.875em*/
color:#999999;
line-height: 130%;
padding-top:36px;
}

img.project-intro-img {
padding-top:24px;
margin-bottom:60px;
}

h3.project-results-header {
font-family: GlyphaBold;
font-size:1.8em;
}



h3.project-response-header {
font-family: GlyphaBold;
font-size:1.8em;
}


#response-block {
background: #58574e;
min-height: 270px;
}


#results-container {
background: #fefcf3;
}

#response-img {
max-width:475px;
float:right;
margin: 0;
padding: 0;
}
@media all and (max-width: 768px) {
#response-img {
width: 100%;
float: left;
}
}



p.project-response {
margin-right:25%;
font-family: GlyphaRoman;
font-size: 0.875em; /*14px/16 = 0.875em*/
color:#ffffff;
line-height: 130%;
margin-top:-10px;
}
@media all and (max-width: 768px) {
p.project-response {
margin-right: 0;
}
}


h3.project-response-header {
color: #ffffff;
padding-top:15px;
}


img.pix-border {
max-height: 8px;
margin-top: 30px;
}

h3.project-results-header {
color: #58574e;
padding-top:5px;
}

p.project-results {
font-family: GlyphaRoman;
font-size: 0.875em; /*14px/16 = 0.875em*/
color:#58574e;
line-height: 130%;
margin-top:-10px;
}

img.inline-img{
margin-top: 30px;
}
@media all and (max-width: 768px) {
img.inline-img {
margin-top:10px;
}
}

.left-hand-results-image-2 {
margin-top:40px;
}

#garden-textures{
max-height: 80%;
max-width: 80%;
}

img.result-gallery {
margin-top: 45px;
}
@media all and (max-width: 768px) {
img.result-gallery {
margin-top:0px;
}
}

img.result-gallery-last {
margin-top: 45px;
margin-bottom: 45px;

}


h3.next-steps {
font-family: GlyphaBold;
border-top-style:solid;
border-top-width: 0.275em;
border-top-color:#165f30;
border-bottom-style: double;
border-bottom-color: #229847;
padding-top:10px;
padding-bottom:5px;
color:#58574e;
}

p.next-steps {
color:#58574e;
font-family: GlyphaRoman;
line-height: 130%;
font-size: 0.875em; /*14px/16 = 0.875em*/
}

ul.next-steps-list {
padding-left:20px;
margin-bottom: 90px;
}

ul.next-steps-list li {
list-style-image: url('arrow.png');
margin-top:0.8em;
}

ul.next-steps-list li:hover {
list-style-image: url('arrow1.png');

}

a.next-steps-link {
font-family: GlyphaBold;
color:#165f30;
text-decoration: none;
margin-bottom: 2px;
}

a.next-steps-link:hover {
font-family: GlyphaBold;
color:#229847;
}


#universal-footer {
font-family: GlyphaRoman;
font-size: 0.75em;
color: #ffffff;
padding-top:10px;
text-align: center;
}

p.service-column {
font-family: GlyphaRoman;
font-size: 0.875em; /*14px/16 = 0.875em*/
color:#ffffff;
line-height: 130%;
margin-top:-10px;
}

h3.services-header {
font-family: GlyphaBold;
font-size: 2.6em;
color: #ffffff;
margin-left: 8.5%;
padding-top: 50px;
letter-spacing: 3px;
}

p.service-sub {
font-family: GlyphaRegular;
color: #ffffff;
font-size: 0.875em;
margin-left: 8.5%;
margin-top:-30px;
margin-bottom: 60px;
margin-right: 19.5%;
background:#58574e;
line-height: 130%;
}

#service-block {
background: #58574e;
min-height:525px;
}

h2.home-projects {
font-family: GlyphaRoman;
font-size: 3em;
color: #58574e;
text-align: center;
}
@media all and (max-width: 768px) {
h2.home-projects {
margin-top:-80px;
}
}

p.home-projects-sub {
color: #999999;
font-family: GlyphaRoman;
font-size: 1.05em;
text-align:center;
line-height: 150%;
margin-top: -30px;
}
@media all and (max-width: 768px) {
p.home-projects-sub {
margin-bottom:-55px;
}
}


h5.home-project-title {
font-family: GlyphaBold;
font-size: 1.1em;
color: #196132;
text-align: center;
}

h4.home-project-type {
font-family: GlyphaRegular;
font-size: 1em;
color: #196132;
text-align: center;
margin-top: -25px;
}

p.home-project-about {
color: #999999;
font-family: GlyphaRoman;
font-size: 0.9em;
text-align: center;
margin-top: -10px;
margin-bottom: 90px;
line-height: 150%;
}

a.project-links {
text-decoration: none;
}

a.project-links:visited {
text-decoration: none;
}

a.project-links:hover {
text-decoration: underline;
color: #229847;

}

h1.home-title-small {
font-family: GlyphaBold;
font-size: 0.1em;
color: #ffffff;
}


h2.home-title {
font-size: 3.75em;
color: #58574e;
font-family: GlyphaBold;
line-height: 130%;
border-top-style:solid;
border-top-width: 0.175em;
margin-top:20px;
padding-top: 20px;
border-top-color:#165f30;
border-bottom-style:double;
padding-bottom:15px;
border-bottom-color: #229847;
}

p.home-intro {
color: #999999;
font-family: GlyphaRoman;
font-size: 0.8em;
line-height: 150%;
margin-top: 50px;
}
@media all and (max-width: 768px) {
p.home-intro {
margin-top:0px;
margin-bottom:0px;
font-size: 1.0em;

}
}

img.card {
margin-bottom: 90px;
}

p.about-contact {
color: #999999;
font-family: GlyphaRoman;
font-size: 0.8em;
margin-top:50px;
line-height: 130%;
margin-bottom: 90px;

}

h4.nav-item {
font-size: 0.9em;
font-family: GlyphaBold;
text-align: centre;
color: #196132;
padding-top:31px;
}
@media all and (max-width: 768px) {
h4.nav-item {
text-align: center;
font-size: 1.8em;
margin-bottom: -20px;
}
}

a.nav-item-link {
text-decoration: none;
}

a.nav-item-link:visited {
text-decoration: none;
}
@media all and (max-width: 768px) {
a.nav-item-link:visited {
text-decoration: none;
}
}


a.nav-item-link .nav-item:hover {
text-decoration: underline;
text-decoration-style: double;
color: #229847;

}
@media all and (max-width: 768px) {
a.nav-item-link .nav-item:hover {
font-size: 1.8em;
}
}



/* additions from rich add  border: none to the images img css to hide border in ie8 */
.project-links img {
border: none;
}


/* add width: auto to fix ie8 issue */
#response-img {
width: auto;
max-width:475px;
float:right;
margin: 0;
padding: 0;
}


/* remove the min-height:525px */
/* add a clearfix to correct the issues caused by float */
#service-block {
background: #58574e;
/* min-height:525px; */
}

#service-block:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* mygardens styling */

#mygardens-block {
background: #153d23;
min-height:335px;
}

#mygardens-block {
background: #153d23;
/* min-height:525px; */
}

#mygardens-block:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.full-w-bg-mg {
width: 100%;
height:100%;
background: #153d23;
clear: both;
margin-top: 3px;
}

#mygardens-dummy {
font-size:0.1em;
color:#153d23;
font-family: GlyphaRoman;
text-align: center;
}

#mygardens-header {
font-size:4.1em;
color:#ffffff;
font-family: GlyphaBold;
text-align: center;
line-height: 111%;
}

#mygardens-intro {
color: #ffffff;
font-family: GlyphaRegular;
font-size: 1.1em;
text-align: center;
line-height: 131%;
margin-top:-40px;
}

#mygardens-project1 {
margin-top: 60px;
}

#my-gardens-image-1 {
margin-bottom: 60px;
margin-top: 60px;


}

#my-gardens-image-2 {
padding-top: 60px;
padding-bottom: 60px;

}

#my-gardens-image-3 {
margin-top: 60px;
margin-bottom: 60px;

}

#my-gardens-image-4 {
padding-top:60px;
margin-bottom: 60px;

}

.mygardens-description {
font-family: GlyphaRoman;
font-size: 1.1em;
color: #999999;
line-height: 131%;
}

.mygardens-title-description {
font-family: GlyphaBold;
font-size: 2.2em;
color:#153d23;
line-height 131%;
}

/* mygardens HOMEPAGE SIGNPOST styling */

#mgsignpost-container {
margin-bottom:90px;
}

#mgsignpost-block {
background: #153d23;
min-height: 380px;
}

#mgsignpost-img {
max-width:675px;
float:right;
margin: 0;
padding: 0;
}
@media all and (max-width: 768px) {
#mgsignpost-img {
width: 100%;
float: left;
}
}

/* add width: auto to fix ie8 issue */
#mgsignpost-img {
width: auto;
max-width:675px;
float:right;
margin: 0;
padding: 0;
}

.full-w-bg-mgsignpost {
width: 100%;
height:100%;
background: #153d23;
clear: both;
}


.mygardenssignpost-link {
font-family: GlyphaBold;
color:#ffffff;
text-decoration: none;
margin-bottom: 2px;
margin-left: 20px;
}

.mygardenssignpost-link:hover {
font-family: GlyphaBold;
color:#ffffff;
text-decoration: underline;
margin-left: 20px;
}

p.mygardenssignpost-text-link {
background:url(arrow2.png) no-repeat 0 0;
}