@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');

/* Reset */
	/* http://meyerweb.com/eric/tools/css/reset/ 
	   v2.0 | 20110126
	   License: none (public domain)
	*/

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: inherit;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

/* Basic */

	body {

	}

	body, input, select, textarea {
		font-family: 'Open Sans', sans-serif;
		color: #444444;
		font-size: 1em;
		line-height: 1.5em;
	}

	hr {
		margin: 2em 0;
	}

	h1 {
		font-size: 2.5em;
		line-height: 2em;
	}

	h2 {
		font-size: 1.5em;
		line-height: 2em;
	}

	h3 {
		font-size: 1.25em;
	}

	a {
		text-decoration: none;
		color: #6666ff;
	}

	a:visited {
		color: #9e31ff;
	}

	a:hover {
		color: #aec0ff;
	}

	a.nocolour {
		color: inherit;
	}

	#main {
		padding: 4em;
	}

	div.stroller-background {
		z-index: -1;
		opacity: 0.1;
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-image: url('/assets/img/stroller-background.jpg');
		background-repeat: no-repeat;
		background-position: center;
		/*background-attachment: fixed;*/
		background-size: cover;
	}

	br {
		clear: both;
	}

	ul {
		list-style-type: disc;
		list-style-position: inside;
	}

	ol {
		list-style-type: decimal;
		list-style-position: inside;
	}

	p.price {
		color: #ff0000;
	}

	p.price b {
		font-size: 1.25em;
	}

	@media screen and (max-width: 736px) {
		
		body {
			font-size: 75%;
			line-height: 2em;
		}

		#main {
			font-size: 125%;
			padding: 4em 2em;
		}

	}


	@media screen and (max-width: 360px) {
		h1 {
			font-size: 2em;
		}
	}

/* Input */

	button {
		cursor: pointer;
	}
	
	button.viewcart {
		display: inline-block;
		font: inherit;
		background-color: #0080ff;
		border: none;
		color: #ffffff;
		font-weight: 600;
		padding: 1em 2em;
		text-decoration: none;
		max-height: 56px;
	}

	button.viewcart:hover {
		background-color: #ffffff;
		color: #676767;
	}

	button.addcart {
		display: block;
		margin: 0.5em 0;
		padding: 0.5em;
		font: inherit;
		color: inherit;
		background-color: inherit;
		border: 1px solid #a0a0a0;
		border-radius: 4px;
		text-decoration: none;
	}

	button.addcart:hover {
		border: 1px solid #606060;
		color: #404040;
	}

	button.black {
		display: inline-block;
		height: 2em;
		width: 2em;
		border: none;
		border-radius: 100%;
		background-color: black;
		margin: 0 1em;
	}

	button.blue {
		display: inline-block;
		height: 2em;
		width: 2em;
		border: none;
		border-radius: 100%;
		background-color: #2e5586;
		margin: 0 1em;
	}

	button.red {
		display: inline-block;
		height: 2em;
		width: 2em;
		border: none;
		border-radius: 100%;
		background-color: #ca1d51;
		margin: 0 1em;
	}

	input.amount {
		max-width: 3em;
	}

	select {
		max-width: 6em;
	}

/* Images */

	img.product {
		max-height: 200px;
	}

	img.feature {
		max-width: 100%;
	}

	img.header {
		width: 100%;
		max-height: 40em;
		object-fit: cover;
		object-position: top;
	}

	div.gallery-controls {
		opacity: 0.5;
		clear: none;
		height: 100%;
		width: 8em;
		position: fixed;
		top: 0;
		background-position: center;
		background-repeat: no-repeat;
	}

	div.gallery-controls:hover {
		opacity: 0.75;
	}

	div.gallery-next {
		right: 0;
		background-image: url('/assets/img/right-arrow.svg');
	}

	div.gallery-back {
		left: 0;
		background-image: url('/assets/img/left-arrow.svg');
	}

	div.gallery-exit {
		opacity: 0.5;
		position: fixed;
		top: 0;
		left: 50%;
		transform: translate(-50%, 0);
		text-align: center;
		color: #ffffff;
		background-color: #808080;
		display: block;
		padding: 1em 4em;
	}

	div.gallery-exit:hover {
		opacity: 0.75;
	}

/* Containers */
	
	#wrapper {
		max-width: 140em;
		margin-top: 3.5em;
	}

	.center {
		float: initial;
		display: block;
		margin: 0 auto;
	}

	.centertext {
		text-align: center;
	}

	.inline {
		display: inline-block;
	}

	div.clear {
		clear: both;
	}

	div.left3 {
		display: inline-block;
		float: left;
		width: 33%;
	}
	div.left2 {
		display: inline-block;
		float: left;
		width: 49%;
	}

	div.left60 {
		width: 60%;
		max-width: 60%;
	}

	@media screen and (max-width: 767px) {

		#wrapper {
			margin-top: 0;
		}

		div.left3 {
			display: initial;
			float: initial;
			width: 100%;
		}
		div.left2 {
			display: initial;
			float: initial;
			width: 100%;
		}

		div.left60 {
			width: initial;
			max-width: initial;
		}

	}

/* Table */

	div.table {
		display: table;
		margin: 1em;
		border: 1px solid black;
		border-top: none;
	}

	div.row {
		display: table-row;
	}

	div.cell {
		display: table-cell;
		padding: 1em;
		border-top: 1px solid black;
	}

	@media screen and (max-width: 767px) {
		div.cell {
			display: block;
			padding: 1em;
			border-top: 1px solid black;
		}
	}

/* Navigation */

	#navigation {
		position: fixed;
		top: 0;
		width: 100%
	}

	#navigation a {
		display: block;
		padding: 1em 2em;
		color: #ffffff;
		font-weight: 600;
	}

	#navigation a:hover {
		color: #676767;
	}

	#navigation ul {
		background-color: #0080ff;
		list-style: none;
		overflow: hidden;
	}

	#navigation li {
		display: inline-block;
		float: left;
	}

	#navigation li.right {
		float: right;
	}

	#navigation li:hover {
		background-color: #ffffff;
	}

	@media screen and (max-width: 767px) {

		#navigation {
			width: 48px;
			height: 48px;
			background-size: 100%;
			background-image: url('/assets/img/threebars.svg');
		}

		#navigation ul {
			display: none;
			position: fixed;
			top: 48px;
			left: 0;
			z-index: 1;
		}

		#navigation:hover ul {
			display: block;
		}

		#navigation li {
			display: block;
			float: none;
		}
		#navigation li.right {
			float: none;
		}

	}

/* Header */

	#header {
		margin-top: 56px;
		/*padding: 2em;
		text-align: center;
		background-image: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.6) 100%), url('/assets/img/BackgroundNoText.jpg');
		background-size: 100%;
		background-position: 0 30%;
		color: #0080ff;*/
	}


	#header h1 {
		font-size: 6em;
		line-height: 1.5em;
	}

	#header h2 {
		font-size: 2em;
		line-height: 2em;
	}

	@media screen and (max-width: 736px) {

		#header {
			/*background-size: 200%;*/
			margin: 0;
		}

		#header h1 {
			font-size: 4em;
		}

	}

/* Footer */

	#footer {
		padding: 2em 4em;
		border-top: 1px solid #ccc; 
		background-color: #a0a0a0;
		color: #ffffff;
	}

	#footer a {
		color: #ffffff;
	}

	#footer a:hover {
		color: #676767;
	}

	#footer li {
		font-weight: 300;
	}

	#footer h1 {
		font-size: 2em;
		line-height: 2em;
	}

	#footer ul {
		list-style: none;
	}

	#footer div.left3 {
		max-width: 20em;
	}

	@media screen and (max-width: 736px) {
		#footer {
			padding: 2em 2em;
		}

		#footer li {
			font-size: 125%;
		}
	}