html {min-height: 100%;   background-image: linear-gradient(#697d9b, #20262f);}

body {
		margin:0;	padding:0;	color: #ffffff; height:100%;
		min-height: 100%;
		font-family: 'Source Sans Pro', sans-serif;
		font-weight: 300; line-height: 22px;	
	}
		
.header {
		padding-top: 150px;
		min-height: 400px;
		text-align: center;
		border: 0px solid red;
	}	
	
.container {max-width: 1000px; min-width: 1000px; margin: 0px auto; border: 0px solid blue;text-align: center;}	
	
.container-inset {max-width: 800px; min-width: 800px; margin: 0px auto; border: 0px solid blue;text-align: center;}		
	
.intro {
		margin-top: 100px;
		min-height: 200px;
		text-align: center;
		border: 0px solid red;
	}		
.clients {
		margin-top: 200px;
		min-height: 200px;
		text-align: center;
		border: 0px solid red;
	}		
	
.iframe {padding: 0; margin: 0; width: 400px; height: 850px !Important;	}
	
.intro .web-ball  {min-width: 105px; min-height: 100px;  border: 0px solid blue; background: url(img/web-ball.png) no-repeat; background-position: center 20px;  -webkit-transition: all 0.5s;}
.intro  .web-ball-shadow {min-width: 105px; min-height: 25px;  border: 0px solid blue; background: url(img/web-ball-shadow.png) no-repeat; background-position: center 0px; background-size: 20%;  -webkit-transition: all 0.5s;}
	
.intro:hover .web-ball  {background-position: center 0px;  -webkit-transition: all 0.5s;}
.intro:hover  .web-ball-shadow {background-position: center 0px; background-size: 50%;   -webkit-transition: all 0.5s;}
	
.about-l {width: 180px; border: 0px solid red;}
.about-r {width: 580px; border: 0px solid red; text-align: left;}

.contact {
		margin-top: 150px;
		margin-bottom: 150px;
		min-height: 200px;
		text-align: center;
		border: 0px solid red;
	}		
	
	.form {
		
		
	}
	
.tiny {font-size: 11px; line-height: 14px;}
.x-small {font-size: 14px; line-height: 18px;}
.small {font-size: 18px;  line-height: 24px;}
.medium {font-size: 24px;  line-height: 30px;}
.large {font-size: 30px;  line-height: 36px;}
.x-large {font-size: 36px;  line-height: 42px;}

.skills {font-family: 'Laila', serif;}




.mobile-only {display: none !important;}

.float-left {
	float: left;
	display: inline-block;
	margin-right: 10px;
}

.float-right {
	float: right;
	display: inline-block;
	margin-left: 10px;
}

 
.clear {clear: both;}

.main-title {
	
		font-family: 'Laila', serif;
		font-size: 36px; color: #eeeeee; 
		text-shadow: 0px 1px #20262f;
		letter-spacing: 4px;
			
		}		
.main-title .biggy{font-size: 48px;}
		
		.semi-bold {font-weight: 400;}
		.bold {font-weight: 600;}
		.spacer{display: block; height: 10px;}
		

ul#product-box li { background: transparent;  text-align: center; border: 1px solid transparent; max-width: 240px; min-width: 240px; min-height: 200px; display: inline-block; -webkit-transition: all 0.25s;}
ul#product-box li:hover {background: rgba(255,255,255,0.15);	border: 1px solid #414b5f; -webkit-transition: all 0.5s; min-height: 200px;}


ul#product-box li .site-launch {
		background: rgba(255,255,255,0.0);
		padding: 1px 6px 1px 6px;
		display: inline-block;
		font-size: 14px;
		font-weight: 400;
		color: transparent;
		text-decoration: none;
		border-radius: 2px;
		border:1px solid transparent;	
		margin:5px auto 5px auto;
		-webkit-transition: all 0.25s;
	}
ul#product-box li:hover .site-launch {background: rgba(255,255,255,0.0); color:#545454; border:1px solid #a7a7a7; -webkit-transition: all 0.0s;	} 

ul#product-box li .image {display: block; background-size: 200px 100px; min-width: 200px; min-height: 100px; border: 0px solid red; -webkit-transition: background 0.0s;}
ul#product-box li:hover .image  { -webkit-transition: background 0.25s;}
	
ul#product-box li .nsl-image {background: url(img/logos/ns-lands-g.png) top center no-repeat;  }	
ul#product-box li:hover .nsl-image {background: url(img/logos/ns-lands.png) top center no-repeat;}	
	
ul#product-box li .ohp-image {background: url(img/logos/ohp-g.png) top center no-repeat;  }	
ul#product-box li:hover .ohp-image {background: url(img/logos/ohp.png) top center no-repeat;}	

ul#product-box li .pro-image {background: url(img/logos/protocase-g.png) top center no-repeat;  }	
ul#product-box li:hover .pro-image {background: url(img/logos/protocase.png) top center no-repeat;}	
	
ul#product-box li .cbi-image {background: url(img/logos/cape-breton-g.png) top center no-repeat;  }	
ul#product-box li:hover .cbi-image {background: url(img/logos/cape-breton.png) top center no-repeat;}	

ul#product-box li .wag-image {background: url(img/logos/wagmatcook-g.png) top center no-repeat;  }	
ul#product-box li:hover .wag-image {background: url(img/logos/wagmatcook.png) top center no-repeat;}	
	
ul#product-box li .ffd-image {background: url(img/logos/45-drives-g.png) top center no-repeat;  }	
ul#product-box li:hover .ffd-image {background: url(img/logos/45-drives.png) top center no-repeat;}	

ul#product-box li .hcp-image {background: url(img/logos/hcp-g.png) top center no-repeat;  }	
ul#product-box li:hover .hcp-image {background: url(img/logos/hcp.png) top center no-repeat;}	
	
ul#product-box li .pmcp-image {background: url(img/logos/pmcp-g.png) top center no-repeat;  }	
ul#product-box li:hover .pmcp-image {background: url(img/logos/pmcp.png) top center no-repeat;}	

ul#product-box li div.tag {display: block; min-height: 30px !important; max-height: 50px !important;  color: transparent; -webkit-transition: all 0.25s;}
ul#product-box li:hover  div.tag {margin-top: 0px; color: #fafafa; -webkit-transition: all 0.25s;}

ul#product-box li:hover .sites {background: rgba(255,255,255,0.5); -webkit-transition: all 0.25s;	}
ul#product-box li:hover .sites:hover {background: rgba(255,255,255,0.75); color: #000;	-webkit-transition: all 0.25s;	}

		
@media screen and (min-width: 320px) and (max-width: 480px) { 

body {padding: 0px}

.no-mobile {display: none !important;}
.mobile-only {display: block !important;}


.container {max-width: 320px !important;  margin: 0px auto; border: 0px solid blue;text-align: center;}	
	
.container-inset {max-width: 280px !important; min-width: 280px;  margin: 0px auto;  border: 0px solid blue;text-align: center;}		
	
.trans-text {display: block; max-width: 260px;}

.intro .web-ball  {min-width: 105px; min-height: 100px;  border: 0px solid blue; background: url(img/web-ball.png) no-repeat; background-position: center 20px;  -webkit-transition: all 0.5s;}
.intro  .web-ball-shadow {min-width: 105px; min-height: 25px;  border: 0px solid blue; background: url(img/web-ball-shadow.png) no-repeat; background-position: center 0px; background-size: 20%;  -webkit-transition: all 0.5s;}
	
.about-l {width: 100%; border: 0px solid red;}
.about-r {display: none;}

.clients {
		max-width: 300px;
		margin-top: 200px;
		min-height: 200px;
		text-align: center;
		padding-left: 0px; margin-left: -10px;
		border: 0px solid red;
	}		
	
ul#product-box li { background: rgba(255,255,255,0.15);	border: 1px solid #414b5f; padding-left: 0px;max-width: 250px; min-width: 250px; min-height: 200px; display: inline-block; -webkit-transition: all 0.25s;}

ul#product-box li .site-launch {
		background: rgba(255,255,255,0.75);
		padding: 1px 6px 1px 6px;
		display: inline-block;
		font-size: 14px;
		font-weight: 400;
		color: 545454;
		text-decoration: none;
		border-radius: 2px;
		border:1px solid #a7a7a7;	
		margin:5px auto 5px auto;
		-webkit-transition: all 0.25s;
	}
	
.iframe {padding: 0; margin: 0; width: 600px; height: 750px !important;	}
	
ul#product-box li div.tag {margin-top: 0px; color: #fafafa; -webkit-transition: all 0.25s;}

ul#product-box li .sites {background: rgba(255,255,255,0.75); color: #000;	-webkit-transition: all 0.25s;	}


ul#product-box li .nsl-image {background: url(img/logos/ns-lands.png) top center no-repeat;}	
	
ul#product-box li .ohp-image {background: url(img/logos/ohp.png) top center no-repeat;}	

ul#product-box li .pro-image {background: url(img/logos/protocase.png) top center no-repeat;}	

ul#product-box li .cbi-image {background: url(img/logos/cape-breton.png) top center no-repeat;}	

ul#product-box li .wag-image {background: url(img/logos/wagmatcook.png) top center no-repeat;}	
	
ul#product-box li .ffd-image {background: url(img/logos/45-drives.png) top center no-repeat;}	

ul#product-box li .hcp-image {background: url(img/logos/hcp.png) top center no-repeat;}	
	
ul#product-box li .pmcp-image {background: url(img/logos/pmcp.png) top center no-repeat;}	

.iframe {padding: 0; margin: 0; width: 320px; height: 1100px;	}



}