/* Main Site Styles
================================================== */

body {
	background: #006caf url(../images/bg-balloon-blue.jpg) right top no-repeat;
	background-position: right 15% top;
	color: #FFF;
	font-size: 100%;
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	-webkit-text-size-adjust: 100%;
}
	
	img.fit-to-grid {width: 100%; float: left;}
	
	.textright {text-align: right;}
	.textcenter {text-align: center;}
	.textleft {text-align: left;}
	
    .clearfix:before,
    .clearfix:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .clearfix:after {
      clear: both; }
    .clearfix {
      zoom: 1; }
	
/* Typography + Links + Buttons
================================================== */	

h1, h2, h3, h4, h5, h6 {
	color: #FFF;
	font-family: "komika_axisregular", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	margin-top: 0;
	text-shadow: 4px 4px 0 rgba(0,62,101,0.5)
}

h1 {font-size: 46px; line-height: 54px;}
h2 {font-size: 26px; line-height: 34px;}
h3 {font-size: 20px; line-height: 28px;}
h4 {font-size: 16px; line-height: 24px;}
h5 {font-size: 16px; line-height: 24px;}

p, ul, ol {
	font-size: 16px;
	line-height: 24px;
	margin: 0 0 20px;
}

a, a:visited {
	color: #FFF;
	text-decoration: underline;
	outline: 0; 
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;		
}

a:hover, a:focus { color: #FFF; text-decoration: underline; cursor: pointer;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {text-decoration: none;}

.pure-button {
	background: none;
	border: 2px #FFF solid;
	border-radius: 50px;
	color: #FFF;
	font-weight: bold;
	padding: 0.6em 1.8em;
	margin-bottom: 0.8em;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;	
}

	.pure-button:hover,
	.pure-button:focus {
		background: none;
		border-color: #b2e4f9;
		color: #b2e4f9;
		text-decoration: none;
	}
	
/* Header + Footer
================================================== */	

.hdr {
	width: 960px;
	margin: 0 auto 60px;
	display: block;
}

	.logo {margin-top: 20px;}

	.hdr .pure-menu {
		background: none;
		border: 2px solid #b2e4f9;
		border-radius: 50px;
		margin-top: 40px;
		width: auto;
		float: right;
	}
	
	.pure-menu a {
		color: #FFF;
		font-weight: bold;
	}
	
	.hdr .pure-menu a:hover,
	.hdr .pure-menu a:focus,
	.hdr .pure-menu .pure-menu-selected a {
		background: none;
		color: #b2e4f9;
		text-decoration: none;
	}
	
	.slicknav_menu {display:none;}
	
.ftr {
	background: #222;
	padding: 60px 0;
}

	.ftr .logo {margin: 0; float: left;}

	.ftr footer {
		max-width: 960px;
		margin: 0 auto;
	}
	
	.ftr .pure-menu {
		text-align: right;
		background: none;
		width: auto;
	}
	
	.ftr .pure-menu a {
		padding: 0 1em;
	}
	
	.ftr .pure-menu a,
	.ftr a {
		color: #CCC;
		font-weight: bold;
		font-size: 14px;
		line-height: 14px;
		text-decoration: none;
	}
	
	.ftr .pure-menu a:hover,
	.ftr .pure-menu a:focus,
	.ftr a:hover,
	.ftr a:focus {
		background: none;
		color: #FFF;
	}	
	
	.ftr p {
		font-size: 14px;
		line-height: 20px;
		text-align: right;
		color: #999;
		padding: 0 1em;
	}

/* Home Page Styles
================================================== */	

.feature {
	max-width: 960px;
	margin: 0 auto 60px;
	text-align: center;
}

	.feature h1 {
		font-size: 36px;
		line-height: 44px;
	}
	
	.feature p {
		width: 80%;
		margin-left: 10%;
		margin-right: 10%;
	}

	.feature span {
		background: #FFF;
		border-radius: 500px;
		box-shadow: 4px 4px 0 rgba(0,62,101,0.5);
		color: #006caf;
		display: block;
		font-family: "komika_axisregular", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 26px;
		line-height: 36px;
		width: 100%;
		height: 0;
		padding-top: 30%;
		padding-bottom: 70%;
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg);
	}
		
.feature-about {
	background: #e33c94 url(../images/bg-balloon-pink.jpg) left top no-repeat;
	background-position: left 15% top;
	padding: 60px 0;
}

	.feature-about section {
		max-width: 960px;
		margin: 0 auto;
		text-align: center;
	}
	
	.feature-about h2 {text-shadow: 4px 4px 0 rgba(146,39,95,0.5)}

	.feature-about .pure-button:hover,
	.feature-about .pure-button:focus {
		border-color: #f6d2e9;
		color: #f6d2e9;
	}	

.feature-contact {
	background: #2ed99b url(../images/feature-contact-pattern.gif) -10px -10px repeat;
	padding: 60px 0;
}

	.feature-contact section {
		max-width: 960px;
		margin: 0 auto;
		text-align: center;
	}
	
	.feature-contact h2 {text-shadow: 4px 4px 0 rgba(39,183,131,0.5)}

	.feature-contact .pure-button:hover,
	.feature-contact .pure-button:focus {
		border-color: #b9f6e0;
		color: #b9f6e0;
	}	
	
	.fotorama {background: rgba(0,30,49,0.8);}
	

/* Individual Page Styles
================================================== */

.content {
	max-width: 960px;
	margin: 0 auto;
}

.box {margin-bottom: 40px;}
	
	.box div {
		background: #FFF;
		padding: 40px;
		color: #666;
		text-align: left;
	}
	
	.box div *:first-child {margin-top: 0px;}
	.box div>*:last-child {margin-bottom: 0px;}
	
	.box h1, .box h2, .box h3, .box h4, .box h5, .box h6 {color: #006caf; text-shadow: none;}
	.box h1 {font-size: 30px; height: 40px;}
	
	.box a, .box a:visited {color: #22bcf5;}
	
.sidebar {}

	.sidebar div {padding: 40px 0 0 40px;}
	.sidebar h1, .sidebar h2, .sidebar h3, .sidebar h4, .sidebar h5, .sidebar h6 {color: #1e9cd7; text-shadow: none;}
	
	.sidebar ul {
		list-style: none;
		padding: 0;
	}
	
	.sidebar li a {
		color: #b2e4f9;
		font-weight: bold;
		display: block;
		padding: 0.5em 0;
		text-decoration: none;
	}
	
	.sidebar li a:hover,
	.sidebar li a:focus {
		color: #FFF;
	}

.subnav.pure-menu {
	background: none;
	text-align: center;
	margin-bottom: 40px;
}

	.subnav.pure-menu a {
		padding: 0.5em 1em;
		border-radius: 50px;
	}
	
	.subnav.pure-menu a:hover,
	.subnav.pure-menu a:focus {
		background: none;
		color: #b2e4f9;
		text-decoration: none;
	}
	
	.subnav .pure-menu-selected a,
	.subnav .current-cat a {
		color: #006caf;
		background: #b2e4f9;
	}
	
.cards {
	width: 960px;
	margin: 0 auto 20px;
}

	.card {width: 25%; color: #666; float: left;}
	
	.card div {background: #FFF; margin: 10px; margin-top: 0; padding: 10px; padding-top: 0;}
	
		.card a {margin: 10px 10px -3px; display: block;}
		.card img {width: 100%;}
	
		.card h3 {
			color: #22bcf5;
			text-shadow: none;
			border-top: 1px #b4e5f9 solid;
			border-bottom: 1px #b4e5f9 solid;
			padding: 5px 10px 12px;
			margin: 0 -10px 10px -10px;
		}
	
		.card p, .card ul {margin: 0;}
		
		.card ul {padding: 0; list-style: none;}
		.card li {padding-left: 24px;}
		
		.deliveries li {background: url(../images/truck.png) 0 5px no-repeat;}


/* Media Queries
================================================== */

/* Retina/HiDPI */
@media 	(-webkit-min-device-pixel-ratio: 2),
		(min-resolution: 192dpi) { 
	.feature-contact {background: #2ed99b url(../images/feature-contact-pattern@2x.gif) -10px -10px repeat;}
	.deliveries li {background: url(../images/truck@2x.png) 0 5px no-repeat; background-size: 16px 12px;}
}


/* Smaller than 960 */
@media (max-width:959px) {
	.hdr {width: auto;}
	
	.cards {
		width: 100%;
		margin: 0 0 20px;
	}
}

/* Tablets */
@media (max-width:766px) {
	.hdr .pure-menu,
	#menu {display:none;}
	.slicknav_menu {display:block;} 

	.hdr {margin-bottom: 40px;}
	.hdr .logo {position: absolute; top: 20px; left: 20px; margin: 0;}
	
	h1, h2, h3, h4, h5, h6 {text-shadow: 2px 2px 0 rgba(0,62,101,0.5) }
	h1 {font-size: 26px; line-height: 36px;}
	
	.content {margin: 0 20px;}
	
	.feature {margin-bottom: 20px;}
		.feature span {font-size: 16px; line-height: 20px;}

		.feature h1 {font-size: 20px; line-height: 30px;}	
		.feature p {width: 100%; margin-left: 0; margin-right: 0;}
	
	.feature-about {background-position: left -400px top; padding: 20px 0;}
		.feature-about p {padding: 0 20px;}

	.feature-contact {padding-bottom: 0; padding-top: 20px;}
		.feature-contact img {float: left; margin-top: 20px;}

	.box {margin-bottom: 20px;}
		.box div {}

	.sidebar {}
		.sidebar div {padding: 0 40px;}
		
	.cards {}
	.card {width: 50%;}
	.card a {text-align: center; background: #FFF;}

}

/* Phones */
@media only screen and (max-width:480px) {
	.hdr {height: 40px; margin-bottom: -40px;}
	.hdr .logo {height: 40px; top: 10px; left: 10px;}

	h1 {font-size: 20px; line-height: 30px;}
	h2 {font-size: 20px; line-height: 30px;}

	.ftr {padding: 20px 0; text-align: right;}
	.ftr .logo {height: 40px; float: none;}
	.ftr .pure-menu {display: none;}
	
	.feature {text-align: left; margin-top: 20px;}
	.feature span {font-size: 10px; line-height: 12px; text-align: center;}
	.feature h1, .feature p {padding-left: 10px;}
	.feature *:last-child {margin-bottom: 0;}
	
	.feature-about {background-size: cover;}
		.feature-about h2 {text-shadow: 2px 2px 0 rgba(146,39,95,0.5)}
		.feature-contact h2 {text-shadow: 2px 2px 0 rgba(39,183,131,0.5)}

	.content p:last-child {margin-bottom: 0;}
	
	.box div {padding: 20px;}
	.sidebar div {padding: 0 20px;}
	
	.subnav.pure-menu {margin-bottom: 10px;}
	
	.card h3 {font-size: 14px; line-height: 16px;}
}




/* Fonts
================================================== */

@font-face {
    font-family: 'komika_axisregular';
    src: url('../fonts/KOMIKAX_-webfont.eot');
    src: url('../fonts/KOMIKAX_-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/KOMIKAX_-webfont.woff') format('woff'),
         url('../fonts/KOMIKAX_-webfont.ttf') format('truetype'),
         url('../fonts/KOMIKAX_-webfont.svg#komika_axisregular') format('svg');
    font-weight: normal;
    font-style: normal;

}