// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }


body { font-family: 'Open Sans', sans-serif; font-weight: 400; color: #222; }

.header { background: #fff; padding: 30px 20px; box-shadow: 0 6px 12px rgba(0,0,0,0.15); position: relative; }
	.header-left {  }
	.header-left .logo { margin: 0 auto; }
	.header-right { text-align: right; }

.banner { background: #ddd; padding: 20vh 0; text-align: center; background: url('../banner1.jpg') center center no-repeat; background-size: cover; color: #fff; }
	.banner h1 { margin: 0 0 25px 0; font-family: 'Huben-Regular'; font-weight: normal; text-transform: uppercase; letter-spacing: 1.5px; font-size: 56px; }
	.banner h2 { margin: 0 0 25px 0; font-size: 25px; font-weight: ; padding: 0 20vw; line-height: 1.5; }
	.banner p { margin: 0; }
	.banner p span { font-weight: 700; }

.module { padding: 70px 0; }
	.module h2 { font-family: 'Huben-Regular'; text-transform: uppercase; letter-spacing: 2px; color: #2492eb; }

.benefits {  }

.videos { background: #f1f2f1; }
	.videos h3 { font-size: 1.55rem; margin-bottom: 23px; }
	.videos iframe { border: 0 none; }

.retailers { padding: 70px 0 0 0; }
    .retailers h3 { margin: 0 0 30px 0; }
    .retailers iframe { height: 640px; border: 0 none; }

.selling-points { background: red; }

.footer { background: #fff; }
	.footer h2 { margin: 0 0 50px 0; }
	.footer h3 { font-size: 24px; }
	.footer h4 { font-size: 32px; font-weight: 600; }
	.footer p { font-size: 20px; color: #777; }
	.footer hr { width: 58px; margin: 40px 0; border-top: 6px solid #d9dad9; }
	.footer a { color: #222; }

/* Desktop first */

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 
	.header-left { text-align: center; }
	.header-right { text-align: center; }
	.banner { padding: 12vh 0; }
	.banner h2 { padding: 0 10vw; }
	.footer h2 { margin: 0 0 25px 0; }
	.footer h4 { margin: 0 0 25px 0; }
	.footer hr { margin: 10px 0 30px 0; }
	.retailers iframe { height: 300px; }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) { 
	.videos iframe { height: 300px; }
	.retailers iframe { height: 400px; }
}



/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) { 
	.clever-things { margin: 10px 0 0 0; }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) { 
	.clever-things { margin: 15px 0 0 0; }
}

@media (min-width: 1360px) { 
	.container { max-width: 1334px; }
	.clever-things { margin: 5px 0 0 0; }
}