/* 
 * Serious Growth Catalog Website
 * Author: Wynonna Lui
 * Year: 2019
 */

/*	Utilities ------------------------------------ */
	@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
	html { scroll-behavior: smooth; }
	body {
		margin: 0;
		padding: 0;
		height: 100%;
		font-size: 100%;
		box-sizing: border-box;
		line-height: 1.4em;
		color: #474747;
		font-family: 'Roboto', sans-serif;
		font-weight: 400;
	}

	h1, h2, h3, h4 { font-weight: 700; }

	div { display:; }

	.imgResponsive { max-width: 100%; height: auto; }
	.errorField { display: block; background:  #bf0000; color: white; font-weight: 700; margin-top: 0.5rem; margin-bottom: 0.5rem; }
	.noIndent { text-indent: 0px !important; }
	.darkRed { color: #bf0000; }

/*	Header --------------------------------------- */
	#header { 
		width: 100%;
		background-color: white;
		position: fixed;
		display: flex;
		top: 0;
		left: 0;
		flex-direction: column;
		justify-content: center;
		padding: 0;
		box-sizing: border-box;
		
	}

		#brand { max-width: 200px; height: auto; margin-top: 0.8rem; margin-left: 0.5rem;}
		#brandLrg { display: none; }
		#mobileNavIcon { 
			position: absolute; 
			top: 0.8rem;
			right: 1.5rem;
			font-size: 2rem;
			padding: .5rem;
			border-radius: 5px;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border: 1px solid #bf0000;
			color: #bf0000;
			cursor: pointer;
		}

		#navbar ul { list-style-type: none; background: #bf0000; margin-left: -3rem; display: none; box-sizing: border-box;}
			#navbar ul li { padding-top: 1rem; padding-bottom: 1rem; text-align: center; font-size: 1.3rem;}
			#navbar a { color: white; text-decoration: none;}


/*	Main ------------------------------------------ */
	#main { margin-top: 5rem; overflow-y: auto; overflow-x: hidden;}

	/*	Breadcrumb ----------------------------- */
	#breadcrumb { width: 100%; padding: 0.5rem; font-size: 0.8rem;} 
		#breadcrumb ul {display: flex; flex-direction: row; justify-content: flex-start; align-items: middle; list-style-type: none;}
			#breadcrumb ul li { padding-right: 0.5rem; padding-left: 0.5rem; border-right: 2px solid #bf0000;}
			#breadcrumb ul li:first-child { padding-left: 0; }
			#breadcrumb ul li:last-child { padding-right: 0; border-right: none; }
			.current { color: #bf0000; font-weight: 700; }
			#breadcrumb a { color:  #474747; text-decoration: none; }
			#breadcrumb a:hover { color: #bf0000; transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; }

	/*	Welcome Section ------------------------ */

		#welcome-section {
			width: 100%;
			height: auto;
			box-sizing: border-box;
			padding: 10vh 1rem 1rem 1rem;
			background-color: black;
			background-image: url('../img/serious-growth_leo-mobile-bg.jpg');
			background-position: left top -3rem;
			background-repeat: no-repeat;
			background-size:  100% auto;
			-webkit-background-size: 100% auto;
			-moz-background-size: 100% auto;
			
		}

			@media (max-width: 321px){
				#welcome-section { background-position: left top -3rem; }
			}
	

		.welcome-text { box-sizing: border-box; padding: 0.5rem; color: white; background: rgba(0, 0, 0, 0.6);}
		#welcome-section p { text-indent: 0.5rem; }
		#welcome-section a { color: white; }
		#welcome-section a:hover { background: #bf0000; color: white; transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear;}

	/*	Products Section ------------------------ */
		
		#products { 
			padding: 0rem 1rem 1rem 1rem;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
		}
			#products .sectionHeader { color: #bf0000; border-bottom: 1px solid #bf0000; line-height: 2rem; margin-bottom: -1rem;}
			#products .categoryHeader { font-weight: 700; font-size: 1.5rem; line-height: 1.2em;}
			.productWrap { width: 100%; overflow: auto; border-bottom: 1px solid black; margin-bottom: 1rem;}
				.productWrap:last-child { border-bottom: none !important; }
				.product a { color: #bf0000; font-weight: 700; text-decoration: none;}
				.product a:hover { color: black; transition: all 0.8s linear; -webkit-transition: all 0.8s linear; -moz-transition: all 0.8s linear;}
				.product { padding: 0; width: 100%; }
				.product img { display: block; margin: 0 auto; box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);}
				.product h5 { font-size: 1.2rem; line-height: 1.2em; font-weight: 400; margin-top: -0.1rem;}
				.productDetails { width: 100%; padding: 0; list-style-type: none; margin-left: 0; overflow: auto;}
				.price { font-size: 1.1rem; font-weight: 700; color: #bf0000; line-height: 1.2em;}
				.description { text-indent: 0.5rem; }
				.moreInfo { display: block; float: right; padding-top: 0.5rem; padding-bottom: 0.5rem; }
				.button { display: block; float: left; background: #bf0000; padding-right: 0.5rem; padding-left: 0.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;}
					.button:hover { background-color: black; transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; }
					.button a { color: white; }
					.button a:hover { color: white; text-decoration: none; }

	/*	Join Newsletter CTA Section ------------------------ */
		#joinList { 
			box-sizing: border-box; 
			background: #515151;
			color: white;
			width: 100%;
			padding: 1rem 3rem 3rem 3rem;
			text-align: center;
		}

			@media (max-width: 321px){
				#joinList { padding: 1rem 1rem 3rem 1rem; }
			}

			#joinList form { width: 80%; margin: auto; box-sizing: border-box; }
			#joinList label { display: block; width: 100%; text-align: left; padding-bottom: 0.3rem; padding-top: 0.5rem;}
			#joinList label:first-child { padding-top: 0; weight: 700;}
			#joinList input[type="text"] { padding: 0.5rem; width: 100%; background: #515151; border: 1px solid black; color: white; font-weight: 400; font-size: 1.2rem;}
			#joinList input[type="text"]:focus { border: 1px solid #bf0000; background: white; color: black;  transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear;}
			#joinList input[type="submit"] { box-sizing: border-box; width: 100%; margin-right: 0; padding: 0.5rem; display: block; margin-top: 1rem; font-size: 1.2rem; color: white; background: #bf0000; border: none;}

	/*	Blog Posts/CTA Section ------------------ */
		#postsCTA {
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			padding: 0 1rem 1rem 1rem;
			margin-top: 0;
			width: 100%;
		}

			.section { width: 100%; padding: 0 0 1rem 0; border-bottom: 1px solid black; box-sizing: border-box;}
			.section:last-child { border-bottom: none; }
			.section h4 { font-size: 1.2rem; line-height: 1.2em;}
			.section img { margin-bottom: 1rem; box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3); }

			.section .button { text-align: center; width: 95%; display: block; padding: 0.5rem; background: #bf0000; }
			.section .button:hover { background: black; transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; }
			.section a { text-decoration: none; font-weight: 700; color: white; }
			.section a:hover { color: white; }

	/*	Products -------------------------------- */

		#product-header { color: #bf0000; padding: 1rem 0 0 1rem; line-height: 1.2em;}
		#product-info { padding: 1rem; display: flex; flex-direction: column; box-sizing: border-box;}
			#preview-thumbs { width: 100%; }
				#preview-thumbs ul { display: grid; grid-template-columns: 1fr 1fr; list-style-type: none; margin-left: 0; padding: 0;}
					.thumbnail { cursor: pointer; max-width: 100px; height: auto; border: 1px dotted black;}
				.details2 { width: 100%; }
				.details p { text-indent: 0.5rem; }
				.details h4 { font-size: 1.5rem; text-align: center;}
				.productButton { display: block; width: 100%; padding-top: 1rem; padding-bottom: 1rem; text-align: center; font-size: 1.1rem; background: #bf0000; color: white; text-decoration: none;}
				.productButton:hover { color: white; background: black; transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; }
				#reviewTitle { margin-left: 1rem; font-weight: 400; font-size: 1.3rem; }
			.reviewsWrap { display: flex; flex-direction: column; padding: 1rem; box-sizing: border-box;}
				.review { border-bottom: 2px solid #bf0000; padding-bottom: 1rem;  }
				.review:last-child {border-bottom: none;}
				.review p { font-style: italic; }
				.review small { font-weight: 700; line-height: 1.2em; }
				.review h4 { text-align: center; }
	/*	Footer---------------------------------- */

		#footer { 
			width: 100%; 
			text-align: center; 
			background: #333333; 
			color: #d6d6d6;
			padding-top: 1rem; 
			padding-bottom: 0.5rem; 
			margin-bottom: 0;
			font-size: 0.8rem;
			line-height: 1.3em;
		}

			#footer a { color: #d6d6d6; }

/*	Media Queries -------------------------------- */

	/* Larger than mobile */
	@media (min-width: 400px) {}

	/* Larger than phablet */
	@media (min-width: 500px) {
		.show-for-small { display: none; }
		#welcome-section { 
			padding: 15vh 1rem 3rem 1rem; 
			background-position: left top -5rem;
		}
	}

	/* Larger than tablet */
	@media (min-width: 750px) {
	
			
		#welcome-section { 
			padding: 10vh 1rem 5rem 1rem; 
			background-image: url('../img/serious-growth_leo-tablet-bg.jpg');
			background-repeat: no-repeat;
			background-position: left top -7rem;
		}
		.welcome-text { width: 80%; margin: 0 auto;}

		.productWrap {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-column-gap: 1rem;
		}
			.product img { margin: 0; }


		#joinList { 
			box-sizing: border-box; 
			background: #515151;
			color: white;
			width: 100%;
			padding: 1rem 6rem 3rem 6rem;
			text-align: center;
		}

		#postsCTA {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-column-gap: 1rem
		}
			.section { border-bottom: none; }

			
		#product-info { flex-direction: row; }
			.details { box-sizing: border-box; padding-left: 4rem;  margin-top: -1rem;}
			.details h4 { text-align: left;}
			#preview-thumbs ul { display: flex; }
			#preview-thumbs ul li { margin-right: 1rem;}
			#preview-thumbs ul li:last-child { margin-right: 0; }
 		
		.reviewsWrap { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 1rem; }
			.review { background: #efefef; box-sizing: border-box; padding: 0.5rem; margin-bottom: 1rem;}
			.review:last-child { margin-bottom: 0; border-bottom: 2px solid #bf0000; }


	}

	/* Larger than desktop */
	@media (min-width: 1000px) {
		body { background-color: #f2f2f2; }
		#header { padding-left: 5rem; padding-right: 5rem; border-bottom: 2px solid #bf0000; flex-direction: row; justify-content: flex-start; justify-content: center;}
		#brandMedDown { display: none; }
		#brandLrg { display: block !important; max-width: 400px; height: auto; padding-top: 1rem; padding-bottom: 2rem;}
		#mobileNavIcon { display: none; }
		#navbar {width: 100%;}
				#navbar ul { display: block; background: none; float: right; margin-right: 1rem;}
				#navbar ul li { padding-top: 0; padding-bottom: 0; float: left; text-align: left; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; padding-right: 1rem;}
				#navbar ul li:last-child { padding-right: 0; }
				#navbar a { color: #bf0000; }

			#navbar a:hover { color: black; border-bottom: 1px solid black; transition: all 0.8s linear; -webkit-transition: all 0.8s linear; -moz-transition: all 0.8s linear; }

		#main { 
			background-color: #ffffff;
			max-width: 960px; 
			margin: 6rem auto;
			margin-bottom: 0;
			padding-bottom: 0;
			padding-top: 1rem;
			box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);
		}
		
		#welcome-section {
			padding: 10vh 0rem 5rem 0rem;
			background-image: url('../img/serious-growth_leo-desktop-bg.jpg');
			background-repeat: no-repeat;
			background-position: left top -10rem;
			background-size: cover;
			-webkit-background-size: cover;
			-moz-background-size: cover;
		}
		.welcome-text { width: 75%;}
		.productWrap {
			grid-column-gap: 2rem;
		}

		#joinList { padding: 1rem 10rem 3rem 10rem; }
		.preview { width: 200%; }
		#preview-thumbs ul { justify-content: flex-start; }
		.reviewsWrap { grid-template-columns: 1fr 1fr 1fr; }
	}

	/* Larger than Desktop HD */
	@media (min-width: 1200px) {}