/* Colors
yellow: #ffbe00;
navy: #192b37;
*/

/* Universal reset */
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

img {
	max-width: 100%;
}

/* Optional padding to override default gridlex columns */
[class*="col"] {
	padding: 0;
}

/***************** Universal styles & utility classes *****************/

/* Padding Utility Classes */
.padded-sm {
	padding: 2.5%;
}
.padded {
	padding: 5%;
}
.padded-lg {
	padding: 10%;
}

.padded-05 {
	padding: 0.5rem;
}
.padded-1 {
	padding: 1rem;
}
.padded-2 {
	padding: 2rem;
}

.padded-t {
	padding-top: 5%;
}
.padded-b {
	padding-bottom: 5%;
}
.padded-l {
	padding-left: 5%;
}
.padded-r {
	padding-bottom: 5%;
}

.padded-tb {
	padding-top: 5%;
	padding-bottom: 5%;
}
.padded-lr {
	padding-left: 5%;
	padding-right: 5%;
}

.padded-t-1 {
	padding-top: 1rem;
}
.padded-b-1 {
	padding-bottom: 1rem;
}
.padded-l-1 {
	padding-left: 1rem;
}
.padded-r-1 {
	padding-bottom: 1rem;
}

.padded-t-2 {
	padding-top: 2rem;
}
.padded-b-2 {
	padding-bottom: 2rem;
}
.padded-l-2 {
	padding-left: 2rem;
}
.padded-r-2 {
	padding-bottom: 2rem;
}

.padded-t-0 {
	padding-top: 0;
}
.padded-b-0 {
	padding-bottom: 0;
}
.padded-l-0 {
	padding-left: 0;
}
.padded-r-0 {
	padding-bottom: 0;
}

/* Margin Utility Classes */

.margin-t {
	margin-top: 5%;
}
.margin-b {
	margin-bottom: 5%;
}
.margin-l {
	margin-left: 5%;
}
.margin-r {
	margin-right: 5%;
}

.margin-t-1 {
	margin-top: 1rem;
}
.margin-b-1 {
	margin-bottom: 1rem;
}
.margin-l-1 {
	margin-left: 1rem;
}
.margin-r-1 {
	margin-right: 1rem;
}

.margin-t-2 {
	margin-top: 2rem;
}
.margin-b-2 {
	margin-bottom: 2rem;
}
.margin-l-2 {
	margin-left: 2rem;
}
.margin-r-2 {
	margin-right: 2rem;
}

.margin-t-0 {
	margin-top: 0;
}
.margin-b-0 {
	margin-bottom: 0;
}
.margin-l-0 {
	margin-left: 0;
}
.margin-r-0 {
	margin-right: 0;
}

.margin-tb {
	margin-top: 5%;
	margin-bottom: 5%;
}
.margin-lr {
	margin-left: 5%;
	margin-right: 5%;
}

/* Text styles */

.featured-text {
	color: #ffbe00;
}

.white-text {
	color: white;
}

/* Background styles */

/* Image styles */

.flex-flip:nth-child(even) {
	flex-direction: row-reverse;
}

.bg-image {
	background-color: rgb(240,240,240);
	background-image: url("images/the-sleep-co-bed.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.bg-dark {
	background-color: #192b37;
	color: white;
}

.bg-featured {
	background-color: #ffbe00;
}

.bg-lightblue {
	background: #e3ecf2;
}

/* Aspect Ratio  */
.portrait-tall { padding-bottom: 175%; }
.portrait { padding-bottom: 125%; }
.square { padding-bottom: 100%; }
.landscape { padding-bottom: 66%; }
.landscape-wide { padding-bottom: 56%; }

/* Background Position */
.bg-pos-t {
	background-position: top;
}
.bg-pos-b {
	background-position: bottom;
}
.bg-pos-l {
	background-position: left;
}
.bg-pos-r {
	background-position: right;
}

/* Typography styles */

.normal-weight-text {
	font-weight: 400;
}

.text-left {
	text-align: left;
}

.text-center {
	text-align: center;
}

.right {
	text-align: right;
}

.tall-50 {
	min-height: 50vh;
}
.tall-60 {
	min-height: 60vh;
}
.tall-70 {
	min-height: 70vh;
}
.text-right {
	text-align: right;
}

.tall-80 {
	min-height: 80vh;
}
.tall-90 {
	min-height: 90vh;
}
.tall-100 {
	min-height: 100vh;
}

/* Typography styles */

.font-weight-light {
	font-weight: 200;
}

.font-weight-normal {
	font-weight: normal;
}

.font-weight-extra-bold {
	font-weight: 800;
}

.small-text {
	font-size: 1.5rem;
}

.medium-text {
	font-size: 2rem;
}

.big-text {
	font-size: 4.5rem;
}

.subtitle {
	font-size: 1.2rem;
	color: rgb(120, 120, 125);
}

.quote-icon {
	font-size: 6rem;
	display: inline-block;
	color: rgb(120, 120, 125);
	line-height: 1;
}

body {
	font-family: "Catamaran", sans-serif;
	color: #192b37;
}

h2,
h3,
h4,
h5,
h6 {
	margin-bottom: 1rem;
	line-height: 1.1;
}

h2 {
	font-size: 2.5rem;
	line-height: 1.1;
	margin-bottom: 1rem;
}

h3 {
	line-height: 1;
}

p {
	font-weight: 200;
	line-height: 1.5;
	margin-bottom: 1rem;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: #ffbe00;
}

/* Background images */

.bg-bed {
	background-image: url("images/the-sleep-co-bed.jpg");
	background-position: center;
	background-size: cover;
}
.bg-pug {
	background-image: url("images/the-sleep-co-pug.jpg");
	background-position: 50% 35%;
	background-size: cover;
}
.bg-sheet {
	background-image: url("images/the-sleep-co-sheets.jpg");
	background-position: center;
	background-size: cover;
}
.bg-yellow-lights {
	background-image: url("images/the-sleep-co-yellow.jpg");
	background-position: 50% 20%;
	background-size: cover;
}

/* Header and footer styles */
header {
	background-image: url("images/white-pillows.jpg");
	background-size: cover;
	background-position: top;
	padding: 2% 3%;
}

header h3 {
	font-size: 5.5rem;
	line-height: 1;
}

.logo h2 {
	margin-bottom: 0;
	text-align: left;
}

nav a {
	margin: 0 0.5rem;
	font-size: 1.2rem;
	display: inline-block;
}

/* Icon styling */

.fas {
	display: block;
	font-size: 3rem;
	margin-bottom: 3rem;
	text-align: center;
}

/* Gallery Styling */

.gallery [class*="col-"] {
  padding: 0.5%;
}

/* Buttons and forms */

input,
textarea {
	width: 100%;
	display: block;
	margin-bottom: 0.5rem;
	padding: 0.5rem;
	font-family: inherit;
	font-size: 0.9rem;
	border: 2px solid transparent;
}

input:focus,
textarea:focus {
	border: 2px solid #ffbe00;
	outline: none;
}

label {
	font-size: 1.3rem;
}

button {
	padding: 0.5rem 2rem;
	background-color: #ffbe00;
	appearance: none;
	border: 2px solid #ffbe00;
	color: inherit;
	margin-top: 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

button:hover {
	color: #ffbe00;
	background: white;
	border: 2px solid white;
}
.hamburger-icon {
	cursor: pointer;
	font-size: 2rem;
}
.mobile-menu {
	background: #ffbe00;
}

.mobile-nav {
	text-align: center;
	display: none;
}

.mobile-nav a {
	display: block;
	padding: 0.5rem;
	font-size: 1.2rem;
	text-transform: uppercase;
}

/* General CSS Responsive Styles (Apply everywhere unless overridden) */

.mob-show {
	display: none;
}

/* ------- MD Media Query (64em / 1024px) --------------- */
/* - Styles added here will apply at devices smaller than 1024px, or zoomed in equivalent */

@media (max-width: 64em) {
	.mob-show {
		display: block;
	}
	.mob-hide {
		display: none;
	}
	.show-md {
		display: block;
	}
	.hide-md {
		display: none;
	}

	.md-tall-80 {
		min-height: 80vh;
	}

	.mobile-nav a:hover {
		color: white;
	}
}

/* ------- SM Media Query (48em / 767px) --------------- */
/* - Styles added here will apply at devices smaller than 768px, or zoomed in equivalent */

@media (max-width: 47em) {
	.show-sm {
		display: block;
	}
	.hide-sm {
		display: none;
	}

	.sm-text-center {
		text-align: center;
	}
	.sm-text-left {
		text-align: left;
	}
	.sm-text-right {
		text-align: right;
	}

	.sm-padded {
		padding: 5%;
	}
	.sm-padded-1 {
		padding: 1rem;
	}
	.sm-padded-05 {
		padding: 0.5rem;
	}

	.sm-padded-t-0 {
		padding-top: 0;
	}
	.sm-padded-b-0 {
		padding-bottom: 0;
	}
	.sm-padded-l-0 {
		padding-left: 0;
	}
	.sm-padded-r-0 {
		padding-right: 0;
	}

	.sm-margin-t-0 {
		margin-top: 0;
	}
	.sm-margin-b-0 {
		margin-bottom: 0;
	}
	.sm-margin-l-0 {
		margin-left: 0;
	}
	.sm-margin-r-0 {
		margin-right: 0;
	}

	.logo h2 {
		font-size: 2rem;
	}

	header h3 {
		font-size: 11vw;
	}

	h2 {
		font-size: 9vw;
	}

	footer h2 {
		text-align: left;
	}
}

/* ------- XS Media Query (36em / 576px) --------------- */
/* - Styles added here will apply at devices smaller than 576px, or zoomed in equivalent */

@media (max-width: 36em) {
	.show-xs {
		display: block;
	}
	.hide-xs {
		display: none;
	}

	.xs-padded-05 {
		padding: 0.5rem;
	}

	.xs-padded-0 {
		padding: 0;
	}

	.xs-text-center {
		text-align: center;
	}
	nav a {
		font-size: 1rem;
	}

	h1 {
		font-size: 1.4rem;
		line-height: 1.1;
	}

	h2 {
		text-align: center;
		line-height: 1.1;
	}

	.big-text {
		font-size: 2.5rem;
	}

	.big-text .big-text-span {
		font-size: 1.2rem;
	}

	.bg-yellow {
		background-color: #ffbe00;
		background-image: none;
	}

	.testimonial {
		font-size: 1.2rem;
		padding: 0 0.5rem;
	}

	.subtitle {
		font-size: 0.8rem;
	}

	.quote-icon {
		font-size: 3rem;
	}
}