/*  colours - green: #cccc9a, blue: #708bc6  */

* { 
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	-o-box-sizing: border-box; 
	box-sizing: border-box; 
	/* adds animation for all transitions */ 
	-webkit-transition: .25s ease-in-out; 
	-moz-transition: .25s ease-in-out; 
	-o-transition: .25s ease-in-out; 
	transition: .25s ease-in-out; 
	margin: 0; 
	padding: 0; 
	-webkit-text-size-adjust: none; 
	} 
body {
	font-family: colaboratelightregular, Arial, Helvetica, sans-serif;
	font-size: 100%; 
	font-size: 62.5%; 
	margin: 0em;
	background: #708bc6;
	}
@font-face {
    font-family: 'colaboratelightregular';
    src: url('../font/colablig-webfont.eot');
    src: url('../font/colablig-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/colablig-webfont.woff2') format('woff2'),
         url('../font/colablig-webfont.woff') format('woff'),
         url('../font/colablig-webfont.ttf') format('truetype'),
         url('../font/colablig-webfont.svg#colaboratelightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
	  
a {
    font-family: 'colaboratelightregular';
	}
h1 {
    font-family: 'colaboratelightregular';
	color: #fff;
	}
p {
	width: 80%;
	margin-bottom: 1em;
	margin-left: 10%;
	background: none;
	}
.home #nHome {
	display: none;
	}
.home h1 {
    font-family: 'colaboratelightregular';
	font-weight: 100;
	color: #fff;
	}
.home .phrase {
	color: #708bc6;
	}
	  
#page-content {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	max-width: 1150px;
	background: none;
	}
#hmBott, #bott {
	background: #fff;
	}
#hmBott p:last-child {
	padding-bottom: 5em;
	}
.home #content {
	margin-top: -.85em;
	background: #cccc9a;
	}
#bott h2 {
	width: 65%;
	font-size: 200%;
	font-weight: 100;
	color: #708bc6;
	margin-top: 1em;
	margin-left: 13%;
	background: none;
	}
#bott p {
	width: 70%;
	font-size: 150%;
	line-height: 150%;
	margin-left: 15%;
	padding: 10px;
	background: none;
	}
.ins #content {
	background: #cccc9a;
	}
.ins #content p:last-child {
	padding-bottom: 2em;
	background: none;
	}
.print #bott h2 {
	width: 55%;
	font-size: 350%;
	font-weight: bold;
	text-align: center;
	color: #000;
	margin-right: auto;
	margin-bottom: 1em;
	margin-left: auto;
	padding: 5px;
	border-top: 1px dotted #000;
	border-bottom: 1px dotted #000;
	background: none;
	}
.campaign #bott .row h3 {
	width: 55%;
	font-size: 150%;
	text-align: center;
	text-transform: uppercase;
	color: #000;
	margin-right: auto;
	margin-bottom: 2em;
	margin-left: auto;
	}
.campaign #bott .row h3 + p {
	font-size: 175%;
	font-weight: bold;
	color: #909090;
	border-top: 1px dotted #ccc;
	}
.campaign #bott .row p:first-child {
	font-size: 175%;
	font-weight: bold;
	color: #909090;
	margin-top: 5em;
	margin-bottom: 0;
	border-top: 1px dotted #ccc;
	}
#emAddy a {
	color: #cccc9a;
	text-decoration: none;
	}
#emAddy a:hover {
	color: #000;
	}
/*.submit input {
	font-size: 100%;
	color: #fff;
	padding: 3px;
    cursor: pointer;
	background: #cccc9a;
	}*/
.g-recaptcha {
	margin-left: 16%;
	font-size: 150%;
	color: #fff;
	padding: 3px;
    cursor: pointer;
	background: #cccc9a;
	}
.top a {
	color: #708bc6;
	text-decoration: none;
	}
	
img[alt="Five Stones Creative logo"] {
	max-width: 262px;
	vertical-align: middle;
	}	
img[alt="image of reversed stack stones"] {
	max-width: 362px;
	}	
img[alt="bgTexture1"] {
	width: 100%;
	max-width: 964px;
	}	
img[alt="bgTexture2"] {
	width: 100%;
	max-width: 566px;
	margin-bottom: -2px;
	}
img[alt^="logo"] {
	max-width: 315px;
	padding: 30px 0;
	}
img[alt^="web"] {
	max-width: 315px;
	padding: 0;
	border: 1px solid #ccc;
	}
img[alt^="print"] {
	max-width: 290px;
	padding: 0;
	}	
.print img[alt="print-ad-sierra wireless"] {	
	border: 1px solid #ccc;
	}
img[alt="print-catalogue-robeez out"], img[alt="print-catalogue-robeez in"], img[alt="print-catalogue-sumac ridge in"], img[alt="print-flyer-Great Estate Okanagan"], img[alt="print-folder-jumpstart"], img[alt="print-report-asia pacific foundation of canada"], img[alt="print-report-ecotrust"], img[alt="print-report-invest in canada bureau"], img[alt="print-signage-hennessey"] {
	border: 1px dotted #000;
	}
.identity #bott p {
	border-bottom: 1px dotted black;
	border-left: 1px dotted black;
	margin-bottom: 5em;
	}
img[alt="print-campaign-tiaf14 ad-style"], img[alt="print-campaign-tiaf14 advertorial-hdr"], img[alt="print-campaign-tiaf14 signage-col-wrap"], img[alt="print-campaign-tiaf14 signage-meterboard"], img[alt="print-campaign-tiaf14 tix-comp-rbc"], img[alt="print-campaign-tiaf14 tix-comp"] {
	border: 1px dotted #000;
	}
img[alt="print-campaign-tiaf14 application-form"] {
	max-width: 460px;
	}
img[alt="print-campaign-tiaf14 ad-front"], img[alt="print-campaign-tiaf14 signage-bloor-hotdocs"], img[alt="print-campaign-tiaf14 signage-sub"], img[alt="print-campaign-tiaf14 tix-comp-rbc"], img[alt="print-campaign-tiaf14 tix-comp"] {
	max-width: 500px;
	}
img[alt="print-campaign-tiaf14 plans"] {
	max-width: 530px;
	}
img[alt="print-campaign-tiaf14 signage-bus"], img[alt="print-campaign-street banners"] {
	max-width: 600px;
	}
img[alt="print-campaign-tiaf14 insert"] {
	max-width: 650px;
	}
img[alt="print-campaign-tiaf14 catalog"], img[alt="print-campaign-tiaf14 showguide"] {
	max-width: 750px;
	}

footer {
	height: 4em;
	background: #414141;
	}
footer p {
	font-size: 100%;
	color: #818181;
	margin-left: 0;
	padding: 5px;
	}
	
	
		  @media screen 
		  and (min-width : 240px) 
		  and (max-width : 374px) {	
		  h1 {
			  width: 80%;
			  font-size: 500%;
			  margin-left: 10%;
			  padding-top: .5em;
			  background: none;
			  }
		  p {
			  font-size: 200%;
			  line-height: 120%;
			  }	
		  .home h1 {
			  width: 90%;
			  font-size: 700%;
			  text-align: right;
			  position: relative;
			  top: 2.75em;
			  right: 17%;
			  background: none;
			  }
		  .home .phrase {
			  font-size: 175%;
			  margin: 0;
			  position: relative;
			  top: 10.5em;
			  left: 55%;
			  background: none;
			  }
				  
		  /***** menu *****/
		  /* Makes sure that everything is 100% height */ 
		  /*html,body { 
		  height: 100%; 
		  overflow: hidden; 
		  }  */
		  
		  /* gets \ actual input out of the way; 
		  style the label instead */ 
		  #drawer-toggle { 
			  position: absolute; 
			  opacity: 0; 
			  }
		  
		  #drawer-toggle-label { 
			  -webkit-touch-callout: none; 
			  -webkit-user-select: none; 
			  -khtml-user-select: none; 
			  -moz-user-select: none; 
			  -ms-user-select: none; 
			  user-select: none;
			  top: 10px; 
			  left: 10px; 
			  height: 50px; 
			  width: 50px; 
			  display: block; 
			  position: fixed; 
			  background: rgba(255,255,255,.0);
			  z-index: 1; 
			  } 
		  
		  /* menu icon */ 
		  #drawer-toggle-label:before { 
			  content: ''; 
			  display: block; 
			  position: absolute; 
			  height: 3px; 
			  width: 20px; 
			  background: #000; 
			  left: 10px; 
			  top: 10px; 
			  box-shadow: 0 6px 0 #000, 0 12px 0 #000; 
			  }  
		  
		  header { 
			  width: 100%;
			  background: #fff;
			  z-index: 0; 
			  }
		  
		  /* drawer menu pane - note the 0px width */ 
		  #drawer { 
			  position: fixed; 
			  top: 0; 
			  left: -300px; 
			  height: 100%; 
			  width: 300px; 
			  background: #cccc9a;
			  overflow-x: hidden; 
			  overflow-y: scroll; 
			  padding: 20px; 
			  -webkit-overflow-scrolling: touch; 
			  } 
		  
		  /* actual page content pane */ 
		  #page-content, #contact #page-content { 
			  margin-left: auto;
			  margin-right: auto;
			  width: 100%; 
			  height: calc(100% - 50px); 
			  overflow-x: hidden; 
			  overflow-y: scroll; 
			  -webkit-overflow-scrolling: touch; 
			  }
		  
		  /* checked styles (menu open state) */ 
		  #drawer-toggle:checked ~ #drawer-toggle-label { 
			  height: 100%; 
			  width: calc(100% - 300px); 
			  background: rgba(255,255,255,.8);
			  } 
		  
		  #drawer-toggle:checked ~ #drawer-toggle-label, 
		  #drawer-toggle:checked ~ header { 
			  left: 300px; 
			  } 
		  
		  #drawer-toggle:checked ~ #drawer { 
			  left: 0px; 
			  } 
		  
		  #drawer-toggle:checked ~ #page-content { 
			  margin-left: 300px; 
			  }
		  
		  /* Menu item styles */ 
		  #drawer ul { 
			  list-style-type: none; 
			  } 
		  #drawer ul li {
			  border-bottom: 1px dotted black;
			  } 
		  
		  #drawer ul a {
			  display: block; 
			  font-size: 400%; 
			  font-weight: bold;
			  color: #fff; 
			  text-decoration: none;
			  padding: 40px 20px; 
			  } 
		  
		  #drawer ul a:hover { 
			  color: #000; 
			  }
				  
		  nav#sub {
			  width: 100%;
			  height: 128px;
			  text-align: center;
			  line-height: 400%;
			  margin-bottom: 5em;
			  background: none;
			  }
		  nav#sub ul li {
			  width: 25%;
			  display: block;
			  padding: 5px 0px;
			  border: 1px solid white;
			  float: left;
			  background: #708bc6;
			  }
		  nav#sub ul li a {
			  font-size: 150%;
			  color: #fff;
			  text-decoration: none;
			  }
		  nav#sub ul li a:hover {
			  color: #000;
			  border-bottom: 0;
			  }
		  
			  
		  #content {
			  margin-top: .05em;
			  background: none;
			  }
		  .home #content {
			  margin-top: 0em;
			  }
		  #hmBott h2 {
			  width: 65%;
			  font-size: 300%;
			  font-weight: 100;
			  color: #708bc6;
			  margin-top: 1em;
			  margin-left: 13%;
			  background: none;
			  }
		  #hmBott p {
			  width: 70%;
			  font-size: 175%;
			  line-height: 150%;
			  margin-left: 15%;
			  padding: 10px;
			  background: none;
			  }
		  .identity #bott p:nth-child(2n+3) {
			  width: 70%;
			  font-weight: 100;
			  margin-top: -5em;
			  background: none;
			  }
		  .web #bott h2 {
			  width: 70%;
			  font-weight: 100;
			  color: #000;
			  margin-top: 2em;
			  margin-bottom: 0;
			  background: none;
			  }
		  .web #bott p {
			  margin-left: 5%;
			  }
		  img[alt^="web-"] {
			  max-width: 270px;
			  width: 100%;
			  padding: 0;
			  border: 1px solid #ccc;
			  }
		  aside {
			  background: none;
			  }
				  
		  img[alt="Five Stones Creative logo"] {
			  width: 70%;
			  margin-left: 10%;
			  padding: 10px;
			  background: none;
			  }
		  .home img[alt="image of reversed stack stones"] {
			  width: 50%;
			  margin: 0;
			  margin-top: -10em;
			  margin-left: 45%;
			  margin-bottom: 10em;
			  background: none;
			  }
		  img[alt^="logo"] {
			  width: 100%;
			  margin-right: auto;
			  margin-left: auto;
			  }
		  .print img[alt^="print"] {
			  max-width: 205px;
			  margin-left: 1%;
			  padding: 0;
			  }
		  .print .printMast, .print .sp {
			  display: none;
			  }
		  .print img[alt="bgTexture1"] {
			  display: none;
			  }
		  img[alt="specPrint-folder-sierra wireless"] {
			  max-width: 315px;
			  }
		  
		  .bh {
			  display: none;
			  }
		  }
		  

		@media screen 
		and (min-width : 375px) 
		and (max-width : 525px) {
		.home h1 {
			width: 90%;
			font-family: 'colaboratelightregular';
			font-size: 700%;
			font-weight: 100;
			color: #fff;
			text-align: right;
			position: relative;
			top: 4em;
			right: 17%;
			background: none;
			}
		.home .phrase {
			font-size: 175%;
			color: #708bc6;
			margin: 0;
			position: relative;
			top: 15.5em;
			left: 55%;
			background: none;
			}	
		h1 {
			width: 80%;
			font-size: 500%;
			margin-left: 10%;
			padding-top: .5em;
			background: none;
			}
		p {
			width: 80%;
			font-size: 175%;
			line-height: 120%;
			margin-bottom: 1em;
			margin-left: 10%;
			background: none;
			}
				
		/***** menu *****/
		/* Makes sure that everything is 100% height */ 
		/*html,body { 
		height: 100%; 
		overflow: hidden; 
		}  */
		
		/* gets \ actual input out of the way; 
		style the label instead */ 
		#drawer-toggle { 
			position: absolute; 
			opacity: 0; 
			}
		
		#drawer-toggle-label { 
			-webkit-touch-callout: none; 
			-webkit-user-select: none; 
			-khtml-user-select: none; 
			-moz-user-select: none; 
			-ms-user-select: none; 
			user-select: none;
			top: 10px; 
			left: 10px; 
			height: 50px; 
			width: 50px; 
			display: block; 
			position: fixed; 
			background: rgba(255,255,255,.0);
			z-index: 1; 
			} 
		
		/* menu icon */ 
		#drawer-toggle-label:before { 
			content: ''; 
			display: block; 
			position: absolute; 
			height: 3px; 
			width: 20px; 
			background: #000; 
			left: 10px; 
			top: 10px; 
			box-shadow: 0 6px 0 #000, 0 12px 0 #000; 
			}  
		
		header { 
			width: 100%;
			background: #fff;
			z-index: 0; 
			}
		
		/* drawer menu pane - note the 0px width */ 
		#drawer { 
			position: fixed; 
			top: 0; 
			left: -300px; 
			height: 100%; 
			width: 300px; 
			background: #cccc9a;
			overflow-x: hidden; 
			overflow-y: scroll; 
			padding: 20px; 
			-webkit-overflow-scrolling: touch; 
			} 
		
		/* actual page content pane */ 
		#page-content, #contact #page-content { 
			margin-left: auto;
			margin-right: auto;
			width: 100%; 
			height: calc(100% - 50px); 
			overflow-x: hidden; 
			overflow-y: scroll; 
			-webkit-overflow-scrolling: touch; 
			}
		
		/* checked styles (menu open state) */ 
		#drawer-toggle:checked ~ #drawer-toggle-label { 
			height: 100%; 
			width: calc(100% - 300px); 
			background: rgba(255,255,255,.8);
			} 
		
		#drawer-toggle:checked ~ #drawer-toggle-label, 
		#drawer-toggle:checked ~ header { 
			left: 300px; 
			} 
		
		#drawer-toggle:checked ~ #drawer { 
			left: 0px; 
			} 
		
		#drawer-toggle:checked ~ #page-content { 
			margin-left: 300px; 
			}
		
		/* Menu item styles */ 
		#drawer ul { 
			list-style-type: none; 
			} 
		#drawer ul li {
			border-bottom: 1px dotted black;
			} 
		
		#drawer ul a {
			display: block; 
			font-size: 400%; 
			font-weight: bold;
			color: #fff; 
			text-decoration: none;
			padding: 40px 20px; 
			} 
		
		#drawer ul a:hover { 
			color: #000; 
			}
			
		nav#sub {
			width: 100%;
			height: 128px;
			text-align: center;
			line-height: 400%;
			margin-bottom: 5em;
			background: none;
			}
		nav#sub ul li {
			width: 25%;
			display: block;
			padding: 5px 0px;
			border: 1px solid white;
			float: left;
			background: #708bc6;
			}
		nav#sub ul li a {
			font-size: 150%;
			color: #fff;
			text-decoration: none;
			}
		nav#sub ul li a:hover {
			color: #000;
			border-bottom: 0;
			}
			
		#content {
			margin-top: .05em;
			background: none;
			}
		.home #content {
			margin-top: 0em;
			}
		#hmBott h2 {
			width: 65%;
			font-size: 300%;
			font-weight: 100;
			color: #708bc6;
			margin-top: 1em;
			margin-left: 13%;
			background: none;
			}
		#hmBott p {
			width: 70%;
			font-size: 200%;
			line-height: 130%;
			margin-left: 15%;
			padding: 10px;
			background: none;
			}
		.identity #bott p:nth-child(2n+3) {
			width: 70%;
			font-weight: 100;
			margin-top: -5em;
			background: none;
			}
		.web #bott h2 {
			width: 70%;
			font-weight: 100;
			color: #000;
			margin-top: 2em;
			margin-bottom: 0;
			background: none;
			}
		.print #bott h2 {
			width: 70%;
			font-weight: 100;
			color: #000;
			margin-top: 2em;
			margin-bottom: 1em;
			background: none;
			}
		.print #bott .row p {
			width: 80%;
			margin: 0;
			margin-right: auto;
			margin-left: auto;
			margin-bottom: 3em;
			background: none;
			}
		aside {
			background: none;
			}
				
		img[alt="Five Stones Creative logo"] {
			width: 70%;
			margin-left: 10%;
			padding: 10px;
			background: none;
			}
		.home img[alt="image of reversed stack stones"] {
			width: 50%;
			margin: 0;
			margin-top: -7em;
			margin-left: 45%;
			margin-bottom: 10em;
			background: none;
			}
		img[alt^="logo"] {
			width: 100%;
			margin-right: auto;
			margin-left: auto;
			}
		.web img[alt^="web-"] {
			width: 100%;
			margin-right: auto;
			margin-left: auto;
			}
		.print img[alt^="print"] {
			width: 100%;
			margin-right: auto;
			margin-left: auto;
			}
		.print .printMast, .print .sp {
			display: none;
			}
		img[alt="print-misc-sandi siemens"] {
			max-width: 140px;
			}
		img[alt="specPrint-folder-sierra wireless"] {
			max-width: 315px;
			}
		.print img[alt="bgTexture1"] {
			display: none;
			}
		
		.bh {
			display: none;
			}
		}


	  @media screen 
	  and (min-width : 526px) 
	  and (max-width : 767px) {	
	  h1 {
		  width: 80%;
		  font-size: 500%;
		  margin-left: 10%;
		  padding-top: .5em;
		  background: none;
		  }
	  p {
		  font-size: 175%;
		  line-height: 120%;
		  }
	  .home h1 {
		  width: 90%;
		  font-size: 900%;
		  text-align: right;
		  position: relative;
		  top: 5em;
		  right: 20%;
		  background: none;
		  }
	  .home .phrase {
		  font-size: 200%;
		  margin: 0;
		  position: relative;
		  top: 22em;
		  left: 67%;
		  background: none;
		  }
	  
	  /***** menu *****/
	  /* Makes sure that everything is 100% height */ 
	  /*html,body { 
	  height: 100%; 
	  overflow: hidden; 
	  }  */
	  
	  /* gets \ actual input out of the way; 
	  style the label instead */ 
	  #drawer-toggle { 
		  position: absolute; 
		  opacity: 0; 
		  }
	  
	  #drawer-toggle-label { 
		  -webkit-touch-callout: none; 
		  -webkit-user-select: none; 
		  -khtml-user-select: none; 
		  -moz-user-select: none; 
		  -ms-user-select: none; 
		  user-select: none; 
		  left: 0px; 
		  height: 50px; 
		  width: 50px; 
		  display: block; 
		  position: fixed; 
		  background: rgba(255,255,255,.0);
		  z-index: 1; 
		  } 
	  
	  /* menu icon */ 
	  #drawer-toggle-label:before { 
		  content: ''; 
		  display: block; 
		  position: absolute; 
		  height: 3px; 
		  width: 20px; 
		  background: #000; 
		  left: 20px; 
		  top: 20px; 
		  box-shadow: 0 6px 0 #000, 0 12px 0 #000; 
		  }
			  
	  nav#sub {
		  width: 100%;
		  height: 128px;
		  text-align: center;
		  line-height: 400%;
		  margin-bottom: 5em;
		  background: none;
		  }
	  nav#sub ul li {
		  width: 25%;
		  display: block;
		  padding: 5px 0px;
		  border: 1px solid white;
		  float: left;
		  background: #708bc6;
		  }
	  nav#sub ul li a {
		  font-size: 150%;
		  color: #fff;
		  text-decoration: none;
		  }
	  nav#sub ul li a:hover {
		  color: #000;
		  border-bottom: 0;
		  }  
	  
	  header { 
		  width: 100%;
		  background: #fff;
		  z-index: 0;
		  }
	  
	  /* drawer menu pane - note the 0px width */ 
	  #drawer { 
		  position: fixed; 
		  top: 0; 
		  left: -300px; 
		  height: 100%; 
		  width: 300px; 
		  background: #cccc9a; 
		  overflow-x: hidden; 
		  overflow-y: scroll; 
		  padding: 20px; 
		  -webkit-overflow-scrolling: touch; 
		  } 
	  
	  /* actual page content pane */ 
	  #page-content, #contact #page-content { 
		  margin-left: auto;
		  margin-right: auto;
		  width: 100%; 
		  height: calc(100% - 50px); 
		  overflow-x: hidden; 
		  overflow-y: scroll; 
		  -webkit-overflow-scrolling: touch; 
		  }
	  
	  /* checked styles (menu open state) */ 
	  #drawer-toggle:checked ~ #drawer-toggle-label { 
		  height: 100%; 
		  width: calc(100% - 300px); 
		  background: rgba(255,255,255,.8);
		  } 
	  
	  #drawer-toggle:checked ~ #drawer-toggle-label, 
	  #drawer-toggle:checked ~ header { 
		  left: 300px; 
		  } 
	  
	  #drawer-toggle:checked ~ #drawer { 
		  left: 0px; 
		  } 
	  
	  #drawer-toggle:checked ~ #page-content { 
		  margin-left: 300px; 
		  }
	  
	  /* Menu item styles */ 
	  #drawer ul { 
		  list-style-type: none; 
		  } 
	  #drawer ul li {
		  border-bottom: 1px dotted black;
		  } 
	  
	  #drawer ul a {
		  display: block; 
		  font-size: 400%; 
		  font-weight: bold;
		  color: #fff; 
		  text-decoration: none;
		  padding: 40px 20px; 
		  } 
	  
	  #drawer ul a:hover { 
		  color: #000; 
		  }
	  
	  #content {
		  background: none;
		  }
	  #hmBott h2 {
		  width: 65%;
		  font-size: 300%;
		  font-weight: 100;
		  color: #708bc6;
		  margin-top: 1em;
		  margin-left: 13%;
		  background: none;
		  }
	  #hmBott p {
		  width: 70%;
		  font-size: 200%;
		  line-height: 130%;
		  margin-left: 15%;
		  padding: 10px;
		  background: none;
		  }
	  .identity #bott p:nth-child(2n+3) {
		  width: 70%;
		  font-weight: 100;
		  margin-top: -5em;
		  background: none;
		  }
	  .web #bott h2 {
		  width: 70%;
		  font-weight: 100;
		  color: #000;
		  margin-top: 2em;
		  margin-bottom: 0;
		  background: none;
		  }
	  .web img[alt^="web-"] {
			max-width: 450px;
			width: 250%;
			margin-right: auto;
			margin-left: auto;
			}
	  .campaign #bott .row p {
		  text-align: center;
		  margin-right: auto;
		  margin-left: auto;
		  }
	  
	  aside {
		  background: none;
		  }
			  
	  img[alt="Five Stones Creative logo"] {
		  width: 70%;
		  margin-left: 10%;
		  padding: 10px;
		  background: none;
		  }
	  .home img[alt="image of reversed stack stones"] {
		  width: 50%;
		  margin: 0;
		  margin-top: -8em;
		  margin-left: 45%;
		  margin-bottom: 10em;
		  background: none;
		  }
	  img[alt^="logo"] {
		  width: 100%;
		  margin-right: auto;
		  margin-left: auto;
		  padding-left: 10px;
		  }
	  .print .printMast, .print .sp {
		  display: none;
		  }
	  .print img[alt="bgTexture1"] {
		  display: none;
		  }
	  img[alt="print-campaign-tiaf14 ad-front"], img[alt="print-campaign-tiaf14 application-form"], img[alt="print-campaign-tiaf14 plans"], img[alt="print-campaign-tiaf14 catalog"], img[alt="print-campaign-tiaf14 showguide"], img[alt="print-campaign-tiaf14 insert"], img[alt="print-campaign-tiaf14 signage-bus"], img[alt="print-campaign-street banners"], img[alt="print-campaign-tiaf14 signage-bloor-hotdocs"], img[alt="print-campaign-tiaf14 signage-sub"], img[alt="print-campaign-tiaf14 tix-comp-rbc"], img[alt="print-campaign-tiaf14 tix-comp"] {
		  max-width: 400px;
		  }
	  img[alt="specPrint-folder-sierra wireless"] {
		  max-width: 400px;
		  }
	  .bh {
		  display: none;
		  }
	  }


	@media screen 
	and (min-width :768px) 
	and (max-width : 990px) {
	.home h1 {
		width: 50%;
		font-size: 900%;
		text-align: center;
		padding-top: 1.25em;
		background: none;
		}
	.home .phrase {
		width: 25%;
		font-size: 225%;
		margin-top: -.5em;
		margin-right: 17%;
		margin-left: 30%;
		float: left;
		background: none;
		}
	header {
		width: 100%;
		max-width: 1150px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0;
		background: #fff;
		}
		
		
	/***** menu *****/
	#drawer-toggle {
		display: none;
	}
	nav {
		width: 70%;
		margin-top: 0;
		margin-right: auto;
		margin-left: auto;
		background: none;
		}
	
	#drawer {
		width: 75%;
		height: 40px;
		text-align: center;
		margin-top: -4em;
		margin-left: 25%;
		background: none;
		}
	#drawer ul {
		margin-top: 9px;
		background: none;
		}
	#drawer ul li {
		display: inline;
		margin: 0 15px;
		background: none;
		}
	#drawer ul li a {
		color: #000;
		font-size: 200%;
		text-decoration: none;
		padding: 5px;
		background: none;
		}
	#drawer li a:hover {
		color: #cccc9a;
		}
	.identity #nIdentity, .print #nPrint, .web #nWeb, .contact #nContact {
		text-transform: uppercase;
		font-weight: bold;
		border-top: 1px dotted black;
		border-radius: 8px;
		padding: 20px 0 10px 0;
		background: none;
		}
	.identity #nIdentity a, .print #nPrint a, .web #nWeb a, .contact #nContact a, 
	.identity #nIdentity a:hover, .print #nPrint a:hover, .web #nWeb a:hover, .contact #nContact a:hover {
		color: #cccc9a;
		}
		
	nav#sub {
		width: 70%;
		text-align: center;
		margin-bottom: 5em;
		background: none;
		}
	nav#sub ul li {
		display: inline;
		padding: 10px 16px;
		background: none;
		}
	nav#sub ul li a {
		font-size: 150%;
		line-height: 200%;
		color: #cccc9a;
		text-decoration: none;
		border-bottom: 1px dotted #cccc9a;
		}
	nav#sub ul li a:hover {
		color: #000;
		border-bottom: 0;
		}
	
	
	/* actual page content pane */ 
	#page-content, #contact #page-content {
		width: 100%; 
		margin-left: auto;
		margin-right: auto;
		}
		
	#content {
		margin-top: -.85em;
		background: none;
		}	
	.ins #content h1 {
		width: 90%;
		font-size: 500%;
		margin-left: 10%;
		padding-top: .5em;
		background: none;
		}
	p {
		width: 80%;
		font-size: 175%;
		line-height: 130%;
		margin-bottom: 1em;
		margin-left: 10%;
		background: none;
		}
	#hmBott h2 {
		width: 65%;
		font-size: 300%;
		font-weight: 100;
		color: #708bc6;
		margin-top: 2em;
		margin-bottom: .25em;
		margin-left: 13%;
		background: none;
		}
	#hmBott p {
		width: 65%;
		font-size: 185%;
		margin-left: 17%;
		background: none;
		}
	.identity #bott p {
		font-size: 150%;
		border-bottom: 0;
		border-left: 0;
		margin-bottom: 4em;
		}
	.identity #bott p:nth-child(2n+3) {
		width: 65%;
		font-weight: 100;
		background: none;
		}
	.web #bott h2 {
		width: 70%;
		font-weight: 100;
		color: #000;
		margin-top: 1.5em;
		margin-bottom: 0;
		background: none;
		}
	.web #bott {
		clear: both;
		padding-bottom: 250px;
		}
	img[alt^="web-"] {
		max-width: 500px;
		width: 150%;
		}
	aside {
		background: none;
		}	
	img[alt="Five Stones Creative logo"] {
		width: 25%;
		padding: 5px;
		background: none;
		}
	.home img[alt="image of reversed stack stones"] {
		margin-top: -19em;
		margin-bottom: 3em;
		margin-left: 50%;
		background: none;
		}
	img[alt^="logo"] {
		margin-right: 90px;
		float: left;
		background: none;
		border: 0;
		}
	.print #bott p {
		margin-left: auto;
		}
	.campaign #bott .row p {
		text-align: center;
		margin-right: auto;
		margin-left: auto;
		}
	.web img[alt="bgTexture2"] {
		display: none;
		}
	img[alt="print-campaign-street banners"] {
		max-width: 400px;
		}
	img[alt="specPrint-folder-sierra wireless"] {
		max-width: 450px;
		}
	img[alt="print-campaign-tiaf14 catalog"], img[alt="print-campaign-tiaf14 showguide"], img[alt="print-campaign-tiaf14 insert"], img[alt="print-campaign-tiaf14 signage-bus"] {
		max-width: 500px;
		}
	
	.bh {
		display: none;
		}
	}
	
	
	  @media only screen 
	  and (min-device-width : 768px) 
  and (max-device-width : 1024px) 
  and (orientation : landscape) {
  p {
	  font-size: 175%;
	  line-height: 130%;
	  }
  #content {
	  margin-top: -.85em;
	  background: none;
	  }	
  .ins #content h1 {
	  width: 90%;
	  font-size: 500%;
	  margin-left: 10%;
	  padding-top: .5em;
	  background: none;
	  }
  #hmBott h2 {
	  width: 65%;
	  font-size: 300%;
	  font-weight: 100;
	  color: #708bc6;
	  margin-top: 2em;
	  margin-bottom: .25em;
	  margin-left: 13%;
	  background: none;
	  }
  #hmBott p {
	  width: 65%;
	  font-size: 185%;
	  margin-left: 17%;
	  background: none;
	  }
  .identity #bott p {
	  font-size: 150%;
	  border-bottom: 0;
	  border-left: 0;
	  margin-bottom: 4em;
	  }
  .identity #bott p:nth-child(2n+3) {
	  width: 65%;
	  font-weight: 100;
	  background: none;
	  }
	  
  nav#sub {
	  width: 90%;
	  text-align: center;
	  margin-bottom: 5em;
	  background: none;
	  }
  nav#sub ul li {
	  display: inline;
	  padding: 10px 16px;
	  background: none;
	  }
  nav#sub ul li a {
	  font-size: 150%;
	  color: #cccc9a;
	  text-decoration: none;
	  border-bottom: 1px dotted #cccc9a;
	  }
  nav#sub ul li a:hover {
	  color: #000;
	  border-bottom: 0;
	  }
	  
  .web #bott h2 {
	  width: 70%;
	  font-weight: 100;
	  color: #000;
	  margin-top: -1em;
	  margin-bottom: 3.5em;
	  background: none;
	  }
  .web #bott {
	  clear: both;
	  padding-bottom: 250px;
	  }
  img[alt^="web-"] {
	  max-width: 500px;
	  width: 150%;
	  }
  
  aside {
	  background: none;
	  }	
  img[alt="Five Stones Creative logo"] {
	  width: 25%;
	  padding: 5px;
	  background: none;
	  }
  .home img[alt="image of reversed stack stones"] {
	  margin-top: -19em;
	  margin-bottom: 3em;
	  margin-left: 50%;
	  background: none;
	  }
  img[alt^="logo"] {
	  margin-right: 90px;
	  float: left;
	  background: none;
	  border: 0;
	  }
  .web img[alt="bgTexture2"] {
	  display: none;
	  }
  
  .bh {
	  display: none;
	  }
  }
  

@media screen 
and (min-width :991px) 
and (max-width : 1824px) {
body {
	background: #708bc6;
	}
p {
	font-size: 200%;
	line-height: 130%;
	}
	
.home h1 {
	width: 50%;
	font-size: 900%;
	text-align: center;
	margin-left: 7%;
	padding-top: 1em;
	background: none;
	}
.home .phrase {
	width: 20%;
	font-size: 225%;
	margin-top: -.5em;
	margin-right: 17%;
	margin-left: 30%;
	float: left;
	background: none;
	}
header {
	width: 100%;
	max-width: 1150px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	background: #fff;
	}

/***** menu *****/
#drawer-toggle {
	display: none;
	}
nav {
	width: 70%;
	max-width: 1150px;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	background: none;
	}

#drawer {
	width: 70%;
	height: 40px;
	text-align: center;
	/*position: relative;*/
	margin-top: -4em;
	background: none;
	}
#drawer ul {
	margin-top: 9px;
	background: none;
	}
#drawer ul li {
	display: inline;
	margin: 10px;
	}
#drawer ul li a {
	color: #000;
	font-size: 200%;
	text-decoration: none;
	padding: 5px;
	background: none;
	}
#drawer li a:hover {
	color: #cccc9a;
	}
.identity #nIdentity, .print #nPrint, .web #nWeb, .contact #nContact {
	text-transform: uppercase;
	font-weight: bold;
	border-top: 1px dotted black;
	border-radius: 8px;
	padding: 20px 10px 10px 10px;
	background: none;
	/*background: linear-gradient(0deg, white 80%, #cccc9a 100%);*/
	}
.identity #nIdentity a, .print #nPrint a, .web #nWeb a, .contact #nContact a, 
.identity #nIdentity a:hover, .print #nPrint a:hover, .web #nWeb a:hover, .contact #nContact a:hover {
	color: #cccc9a;
	}
	
/* actual page content pane */ 
#page-content, #contact #page-content { 
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	}

#content {
	margin-top: -.85em;
	background: none;
	}
#content p {
	width: 60%;
	color: #000;
	background: none;
	}	
.ins #content h1 {
	width: 90%;
	font-size: 700%;
	margin-left: 10%;
	padding-top: .5em;
	background: none;
	}
#hmBott h2 {
	width: 65%;
	font-size: 300%;
	font-weight: 100;
	color: #708bc6;
	margin-top: 2em;
	margin-bottom: .25em;
	margin-left: 13%;
	background: none;
	}
#hmBott p {
	width: 50%;
	font-size: 185%;
	margin-left: 17%;
	background: none;
	}
.identity #bott p {
	font-size: 150%;
	border-bottom: 0;
	border-left: 0;
	margin-bottom: 4em;
	background: none;
	}
.web #bott {
	clear: both;
	padding-bottom: 50px;
	background: #fff;
	}
.web #bott h2 {
	width: 70%;
	font-weight: 100;
	color: #000;
	margin-top: 0;
	margin-bottom: 0;
	border-top: 1px dotted #000;
	background: none;
	}
img[alt^="web-"] {
	max-width: 720px;
	width: 100%;
	border: 0px;
	}
nav#sub {
	width: 90%;
	text-align: center;
	margin-bottom: 5em;
	background: none;
	}
nav#sub ul li {
	display: inline;
	padding: 10px 16px;
	background: none;
	}
nav#sub ul li a {
	font-size: 150%;
	color: #cccc9a;
	text-decoration: none;
	border-bottom: 1px dotted #cccc9a;
	}
nav#sub ul li a:hover {
	color: #000;
	border-bottom: 0;
	}
.print #bott {
	background: #fff;
	}
.print .row {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	background: none;
	}
.print #bott .row p {
	width: 33%;
	margin: 0;
	float: left;
	background: none;
	}
.print #bott .row p:last-child {
	clear: right;
	background: none;
	}
.print .row1 #bott p:nth-child(3) {
	padding-bottom: 8em;
	}
.print #bott .row p.sp:nth-child(3) {
	width: 30%;
	height:300px;
	background: none;
	}		
.print #bott p.ro, .print #bott p.ht {
	padding-bottom: 15em;
	}
.campaign #bott .row p {
	width: 100%;
	text-align: center;
	margin-bottom: 2em;
	float: none;
	background: none;
	}
.top {
	display: none;
	}
	
aside {
	background: none;
	}
		
img[alt="Five Stones Creative logo"] {
	width: 25%;
	padding: 5px;
	background: none;
	}
.home img[alt="image of reversed stack stones"] {
	margin-top: -19em;
	margin-bottom: 3em;
	margin-left: 50%;
	background: none;
	}
img[alt^="logo"] {
	margin-right: 90px;
	float: left;
	background: none;
	border: 0;
	}
		
img[alt="specPrint-folder-sierra wireless"] {
	max-width: 570px;
	}
.web img[alt="bgTexture2"] {
	display: none;
	}
	
.bh {
	width: 15%;
	display: block;
	padding: 5px;
	float: right;
	background: none;
	}
.bh a {
	font-size: 200%;
	color: #545454;
	text-decoration: none;
	}
}