@charset "utf-8";
/* CSS Document */

/*
Website Name: Super Mega Attack
Author: Jason Banks
Description: A 19EIGHTYFIVE Workshop
Version: 1.01
*/

/*
Order - Display > Position > Width/Height > Padding > Border > Margin > Alignment > Text > Color > MISC (Transition, Cursor, etc.)
*/

:root {
--cyan:#29abe2;
--magenta:#eb088c;
--yellow:#fcee21;
--black:#000000;
--black90:rgba(0,0,0,0.9);
--black80:rgba(0,0,0,0.8);
--black70:rgba(0,0,0,0.7);
--black60:rgba(0,0,0,0.6);
--black50:rgba(0,0,0,0.5);
--white:#ffffff;
--white50:rgba(255,255,255,0.5);
--primary:#404041;
--secondary:#7AC142;
--tertiary:#007FB2;
--ltgrey:#efefef;
--medgrey:#CCC;
--grey:#C6C6C6;
--grey50:rgba(198,198,198,0.25);
--mdgrey:#868686;
--mddkgrey:#424142;
--dkgrey:#333333;
--border:#D5D5D5;
--placeholder:#C6C6C6;

/*
--body-font:'graphie', sans-serif;
--head-font:'graphie', sans-serif;
*/
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
>>> 00. CSS RESET
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
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:100%; 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;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
>>> 02. BODY & MAIN WRAPPER SETTINGS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/*
html {font-size: 75%; // 12px}
body {font-size: 1em; // 12px}
h1 {font-size: 2em; // 24px}
*/

html { font-size:100%; // 12px }

body { font-family:sans-serif; font-size:1em; // 12px }

#primary-container { margin:; }

* { box-sizing:border-box; }

h1, h2, h3, h4, h5, h6, p { line-height:1.25em; }

h1 { font-weight:bold;  font-size:6em; // 72px }
h2 { font-weight:bold;  line-height:1.25em; font-size:5em; // 60px }
h3 { font-weight:bold;  font-size:4em; // 48px }
h4 { font-weight:bold;  font-size:3em; // 36px }
h5 { font-weight:bold;  line-height:1.25em; font-size:2em; // 24px }
h6 { font-weight:bold;  font-size:1em; // 12px }
p { line-height:1.25em; }

b { font-weight:bold; }
i { font-style:italic; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
>>> 03. MAIN CONTAINER
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
main { padding:2% 20%; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
>>> 03-02. SUB CONTAINERS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#shipping-terms { line-height:24px; }
#shipping-terms h4, #shipping-terms h5, #shipping-terms h6 { padding:10px 0; }

.base-container { line-height:24px; padding:40px 20% 0 20%; }
.base-container h4, #base-container h5, #base-container h6 { padding:10px 0; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
>>> 04. HEADER NAV
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.header-nav { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; /* height:100px; */ padding:10px 40px; background:black ; }

.header-nav aside {  }
.header-nav aside ul li { display:inline; margin-right:20px; }
.header-nav aside ul li a { text-decoration:none; color:var(--white); transition:0.5s ease; }  
.header-nav aside ul li a:hover { text-decoration:line-through; }

.header-nav aside:nth-child(1) { width:30%; /* background-color:var(--ltgrey); */ }
.header-nav aside:nth-child(2) { width:40%; text-align:center;  background:; /* background-color:var(--mdgrey); */ }
.header-nav aside:nth-child(2) img { height:80px; }
.header-nav aside:nth-child(3) { width:30%; text-align:center; /* background-color:var(--mddkgrey); */ }

/* Hamburger Icon */
.hamburger { padding:6px 10px; position:fixed; z-index:10; right:40px; /* right:12px; */ top:20px; display:inline-block; cursor:pointer; border-radius:5px; background:var(--black80); }
.bar1 { width:25px; height:4px; background-color:var(--cyan); margin:4px 0; transition:0.5s ease-in-out; }
.bar2 { width:15px; height:4px; background-color:var(--magenta); margin:4px 0; transition:0.5s ease-in-out; }
.bar3 { width:25px; height:4px; background-color:var(--yellow); margin:4px 0; transition:0.5s ease-in-out; }

.hamburger:hover > .bar1, .hamburger:hover > .bar2, .hamburger:hover > .bar3 { background-color:var(--cyan); }

/* Home Icon */
.home-icon { /* position:fixed; */ z-index:10; right:40px; /* right:12px; top:50%; */ }
.home-icon a svg { fill:var(--cyan); width:24px; transition:0.1s ease-in-out; }
.home-icon a:hover svg { animation-name:fill-hover; animation-duration:1s; }

@keyframes fill-hover {
  0%	{ fill:var(--cyan); }
 50%	{ fill:var(--magenta); }
100%	{ fill:var(--cyan); }
}

/* Off Canvas Menu */
#off-menu-hamburger { overflow:auto; background-color:var(--black90); }
#off-menu-hamburger a { padding:10px 20px; color:var(--cyan); display:block; text-decoration:none; /* line-height:32px; */ transition:0.1s ease-in-out; }
#off-menu-hamburger a:hover { animation-name:text-hover; animation-duration:1s; color:var(--yellow); }
#off-menu-hamburger img { width:200px; }

/*
@keyframes text-hover {
  0%	{ color:var(--cyan); }
 25%	{ color:var(--magenta); }
 50%	{ color:var(--yellow); }
100%	{ color:var(--cyan); }
}
*/

@keyframes text-hover {
   0%	{ color:var(--cyan); }
  25%	{ color:var(--magenta); }
 100%	{ color:var(--yellow); }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
>>> 05. FRONT PAGE HEADER
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.front-page-header { height:; padding:5% 20%; background:black; color:white; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
>>> 06. COLUMN SETTINGS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Two Columns - ACF Group Field */
.two-column { display:flex; flex-direction:row; flex-wrap:wrap; }
.two-column aside { width:48%; margin:1%; text-align:center; text-transform:uppercase; }
.two-column a { text-decoration:none; color:var(--black); }
.two-column img { width:100%; padding:5%; margin-bottom:10px; background-color:var(--ltgrey); }
.two-column p { margin-top:10px; }

/* Three Column - ACF Group Field */
.three-column { display:flex; flex-direction:row; flex-wrap:wrap; }
.three-column aside { width:31.333%; margin:1%; text-align:center; text-transform:uppercase; }
.three-column a { text-decoration:none; color:var(--black); }
.three-column img { width:100%; padding:5%; margin-bottom:10px; background-color:var(--ltgrey); }
.three-column p { margin-top:10px; }

/* Four Column - ACF Group Field */
.four-column { display:flex; flex-direction:row; flex-wrap:wrap; }
.four-column aside { width:23%; margin:1%; text-align:center; text-transform:uppercase; }
.four-column a { text-decoration:none; color:var(--black); }
.four-column img { width:100%; padding:5%; margin-bottom:10px; background-color:var(--ltgrey); }
.four-column p { margin-top:10px; }

/* Six Column - ACF Group Field */
.six-column { display:flex; flex-direction:row; flex-wrap:wrap; padding:0 20%; }
.six-column aside { width:14.666%; margin:1%; text-align:center; text-transform:uppercase; }
.six-column a { text-decoration:none; color:var(--black); }
.six-column img { width:100%; padding:5%; margin-bottom:10px; background:white; }
.six-column p { margin-top:10px; }

/* Main Product Image + Main Product Content - ACF Group Field */
.product-header { display:flex; flex-direction:row; flex-wrap:wrap; }

.product-header aside { /* padding-top:1% !important; */ list-style-position:inside; line-height:1.5; }
.product-header aside:nth-child(1) { width:50%; /* padding:2%; */ /* background-color:var(--ltgrey); */ }
.product-header aside:nth-child(1) img { width:100%; }
.product-header aside:nth-child(2) { width:40%; padding:5%; }
.product-header aside:nth-child(2) h3, .product-header aside:nth-child(2) h4, .product-header aside:nth-child(2) h5, .product-header aside:nth-child(2) ul, .product-header aside:nth-child(2) p { margin-top:20px; }
.product-header aside:nth-child(3) { width:10%; padding:2%; text-align:center; vertical-align:center; }
.product-header aside:nth-child(3) img { width:50px; position:absolute; right:28px }
.product-header aside:nth-child(3) h5 { writing-mode:vertical-rl; /* text-orientation:mixed; */ display:flex; margin:60px auto 0 auto; position:absolute; right:33px; color:#333; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
>>> 07. DISPLAY FLEX SETTINGS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.flex-parent-1-col { display:flex; flex-direction:row; flex-wrap:wrap; /* gap:10px; */}
.flex-parent-1-col div:nth-child(1) { width:100%; }
.flex-child-1-col { width:100%; padding:2%; border:4px solid white; background:var(--ltgrey); }

.flex-parent-2-col { display:flex; flex-direction:row; flex-wrap:wrap; align-items: center; }
.flex-parent-2-col p { padding-top:20px; font-size:1.25em; }
.flex-parent-2-col aside:nth-child(1) { padding-right:5%; width:60%; background:; }
.flex-parent-2-col aside:nth-child(2) { width:40%; background:; }
.flex-parent-2-col aside:nth-child(2) img { width:100%; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
>>> 08. BACK TO TOP SETTINGS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.back-to-top { display:none; position:fixed; z-index:100; right:20px; bottom:20px; width:0; height:0; border-left:30px solid transparent; border-right:30px solid transparent; border-bottom:30px solid #29abe2; opacity:0.8; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
>>> 09. FOOTER SETTINGS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
footer { width:100%; padding:100px 20%; background-color:var(--black); }
footer article { display:flex; flex-direction:row; flex-wrap:wrap; color:#666; font-size:14px; padding:0 0 20px 0; }
footer article nav { width:25%; }
footer article nav:nth-child(2) { padding:0 5%; }

footer article nav ul { list-style:none; }
footer article nav li { line-height:24px; }
footer article nav li:nth-child(1) { color:#ccc; font-size:16px; margin:0 0 10px 0; }
footer article nav a { text-decoration:none; color:#666; transition:0.5s ease; }
footer article nav a:hover { /* color:var(--yellow); */ text-decoration:line-through; }
footer aside { text-align:center; font-size:14px; border-top-width:1px; border-top-style:solid; border-top-color:#E2E2E2; padding:20px 0 0 0; }
footer aside p { color:#666; line-height:21px; }
/*
footer aside a { text-decoration:none; color:#666; transition:all 0.4s ease; }
footer aside a:hover { color:#7AC143; text-decoration:line-through; }
*/

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
>>> 00. SHOPIFY - Shopify Cart Setting (Used in Theme Header to display side cart on every page)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#cart { display:none; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
>>> 00. CONTACT FORM 7 PLUGIN - Custom Settings/Overrides
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.wpcf7-form label {width:100%; margin-left:0; margin-top:20px; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {width:100%; margin-left:0;  padding:10px;}

@media screen and (max-width:768px) {
.wpcf7-form label {width:100%;}
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {width:100%; margin-left:0;}
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
>>> 00. BREADCRUMB NAV XT PLUGIN - Custom Settings
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.breadcrumbs { padding:20px 0 20px 40px; background:black; color:white;  }
.breadcrumbs a { color:var(--cyan); text-decoration:none; transition:0.1s ease-in-out; }
.breadcrumbs a:hover { animation-name:text-hover; animation-duration:1s; }

@keyframes text-hover {
  0%	{ color:var(--cyan); }
 50%	{ color:var(--magenta); }
100%	{ color:var(--cyan); }
}

.current-item { color:white; }







/*----------------------------------------------------------------------------------------------------
.0 BLOG SETTINGS (MAIN TEMPLATE, SINGLE TEMPLATE & SIDEBAR)
----------------------------------------------------------------------------------------------------*/
/* Blog Page
*************************/
#blogPage { display:flex; flex-direction:row; flex-wrap:wrap; width:100%; padding:60px 10%; background:; }
#blogPage a h5 { color:#333; text-decoration:none; }
#blogPage a:hover h5 { color:#007FB2; text-decoration:none !important; }
#blogPage a { color:#007FB2; text-decoration:none; }
#blogPage a:hover { text-decoration:underline; }
#blogPage h6 { color:#333; }
#blogPage article:nth-child(1) { display:flex; flex-direction:row; flex-wrap:wrap; width:70%; margin-right:5%; background:; } /* Container holding Blog Sections */
#blogPage article:nth-child(1) aside { width:33.33%; padding:20px 5%;}
#blogPage article:nth-child(1) aside div { /* display:inline-block; vertical-align:top; */ }
#blogPage article:nth-child(1) aside img { max-width:100%; height:auto; }
#blogPage article:nth-child(1) aside p { color:#999; }
#blogPage article:nth-child(1) aside h5 { margin-top:10px; }

#blogPage article:nth-child(2) { width:20%; margin-left:5%; background:; } /* Container holding SideBar */

@media screen and (max-width:800px)
{
  #blogPage {width:100%; padding:60px 10% 0 10%; background:;}
  #blogPage article aside {width:48%;}
}

@media screen and (max-width:600px)
{
  #blogPage {width:100%; padding:60px 10% 0 10%;}
  #blogPage article aside {width:100%;}
  #blogPage article aside:nth-of-type(even) {margin-left:0;}
}

.textwidget {width: 110%; height: auto; font-size: 20px; font-family: "Graphie"; font-weight: bold; text-align: center; margin: 0px;}
.widgetitle h2 {margin: 0px;}

/* Blog Pagination
*************************/
#blog-pagination {margin:40px 16% 40px 16%; text-align:center;}
#blog-pagination div {display:inline-block; margin:0 20px 0 20px;}

.blog-pagination a {color:#007FB2; transition:0.5s ease;}
.blog-pagination a:hover {text-decoration:none;}

/* Single Post - 2020
*************************/
#singlePost {width:40%; margin:100px 2% 40px 20%; display:inline-block; background:; line-height:24px;}
/*
#singlePost article {display:flex; flex-direction:row; flex-wrap:wrap;}
#singlePost article aside {width:50%;}
*/
/*
#singlePost a {text-decoration:none; color:#333; font-weight:bold;}
#singlePost a:hover {text-decoration:; color:red; transition:.2s ease;}
*/
.faAuthor {text-decoration:none; color:#333; font-weight:bold;}
.faAuthor:before {content: "\f007"; font-family: "Font Awesome 6 Free"; font-weight:400; margin-right:5px;}
.faAuthor:hover {text-decoration:line-through; color:#4FAC52; transition:.25s ease;}
.faCategory {text-decoration:none; color:#333; font-weight:bold;}
.faCategory:before {content: "\f07b"; font-family: "Font Awesome 6 Free"; font-weight:400; margin-right:5px;}
.faCategory:hover {text-decoration:line-through; color:#4FAC52; transition:.25s ease;}
/*
.faTag:before {content: "\23"; font-family: "Font Awesome 6 Free"; font-weight: 400; margin-right:5px;}
*/
.faTag {padding:8px; margin-right:5px; background:#CCC; color:#333; text-decoration:none; border-radius:5px; font-size:10pt;}
.faTag:hover {background:#EFEFEF; transition:.25s ease;}
#singlePost p {color:#999;}
#singlePost h5 {margin-top:10px;}
#singlePost img {width:100%; height:auto; margin-bottom:;}

.singlePostContent {line-height:21px; color:#333;}

.blog-figcaption {border-bottom:solid 2px #F1F2F2; /* border-bottom-width:2px; border-bottom-style:solid; border-bottom-color:#F1F2F2; */ color:#999; font-size:12px; font-style:italic; text-align:right; text-transform:uppercase; padding-bottom:5px; margin-bottom:10px;}

@media screen and (max-width:800px)
{
  #singlePost {width:60%; margin:60px 20% 40px 20%;}
}

@media screen and (max-width:600px)
{
  #singlePost {width:80%; margin:60px 10% 40px 10%;}
}

/* SideBar - 2020
*************************/
/*
#sideBar {width:30%; padding:60px 10% 60px 5%; vertical-align:top; background:green;}
*/
#sideBar ul {list-style-type:none;}
#sideBar li {font-size:16px; margin-bottom:10px;}
#sideBar li a {display:inline-block; /*text-decoration:underline;*/ text-decoration:none; color:#333; transition:all 0.2s;}
#sideBar li a:hover {text-decoration:none; color:#007FB2; cursor:pointer;}
#sideBar li a:active {color:darkgrey; transition:0.0s;}
#sideBar li a:visited {color:#333;}
#sideBar aside h2 {margin:20px 0 6px 0; font-weight:; font-size:24px;}
#s {border:thin solid #007FB2;}

@media screen and (max-width:800px)
{
  #sideBar {width:100%; padding:20px 20%; margin-top:0; border-top-width:2px; border-top-style:solid; border-top-color:#F1F2F2; background:;}
}

@media screen and (max-width:600px)
{
  #sideBar {padding:20px 10%;}
}

/* Blog Bin
*************************/
#blogBin {width:100%; padding:0 10% 40px 10%; background:; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center;}

#blogBin a h5 {color:#333; text-decoration:none;}
#blogBin a:hover h5 {color:#007FB2; text-decoration:none;}
#blogBin a {color:#007FB2; text-decoration:none;}
#blogBin a:hover {text-decoration:underline;}

#blogBin h6 {color:#333;}

#blogBin section {background:; width:33%; padding:0 2% 0 2%;}

#blogBin section div {width:; background:;}
#blogBin section div img {width:100%; height:auto;}
#blogBin section div p {color:#999;}
#blogBin section div h5 {margin-top:10px;}
#blogBin section div:nth-of-type(even) {margin-left:;}

/*
@media screen and (max-width:1200px)
{
	#blogBin section {width:50%; padding:2%;}
}
*/

@media screen and (max-width:1200px)
{
	#blogBin section {width:100%; padding:0 0 5% 0;}
}










/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
>>> 00. UTILITY
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Bootstrap Rem */
0 - sets margin or padding to 0
1 - sets margin or padding to .25rem
2 - sets margin or padding to .5rem
3 - sets margin or padding to 1rem
4 - sets margin or padding to 1.5rem
5 - sets margin or padding to 3rem
auto - sets margin to auto

/* Positioning */
.relative { position:relative; }
.absolute { position:absolute; }
.sticky { position:sticky; top:0; align-self:flex-start; }

/* Background Colors */
.bg-color-cyan { background-color:var(--cyan); color:white; }
.bg-color-magenta { background-color:var(--magenta); color:white; }
.bg-color-yellow { background-color:var(--yellow); color:black; }
.bg-color-black { background-color:var(--black); color:white; }

/* Colors */
.color-cyan { color:var(--cyan); }
.color-magenta { color:var(--magenta); }
.color-yellow { color:var(--yellow); }
.color-black { color:var(--black); }

/* Color Hover */
.color-hover-cyan:hover { color:var(--cyan); }
.color-hover-magenta:hover { color:var(--magenta); }
.color-hover-yellow:hover { color:var(--yellow); }

/* Button - ACF Page Link Field */
.button { padding:15px 20px; border-radius:10px; text-decoration:none; background-color:var(--cyan); color:white; font-weight:bold; transition:0.1s ease-in-out; }
.button:hover { padding:15px 30px; /* background-color:var(--magenta); */ animation-name:button-hover; animation-duration:1s; }

@keyframes button-hover {
  0%	{ background-color:var(--cyan); }
 50%	{ background-color:var(--magenta); }
100%	{ background-color:var(--cyan); }
}

/* Padding */
.padding-t-b-10 { padding:10px 0; }
.padding-t-b-20 { padding:20px 0; }
.padding-t-b-30 { padding:30px 0; }
.padding-t-b-40 { padding:40px 0; }
.padding-t-b-80 { padding:80px 0; }

.padding-t-10 { padding-top:10px; }
.padding-t-20 { padding-top:20px; }
.padding-t-30 { padding-top:30px; }
.padding-t-40 { padding-top:40px; }

.padding-b-10 { padding-bottom:10px; }
.padding-b-20 { padding-bottom:20px; }
.padding-b-30 { padding-bottom:30px; }
.padding-b-40 { padding-bottom:40px; }
.padding-b-80 { padding-bottom:80px; }

/* Alignment */
.center-align { text-align:center; }
.left-align { text-align:left; }

/* Image Width */
.width-100 { width:100%; }

/* Cursor */
.cursor-pointer { cursor:pointer; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
>>> 00. BREAKPOINTS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Bootstrap Max */
@media only screen and (min-width:1800px) {
.flex-child-1-col { width:50%; }

.front-page-header { padding:2% 25%; }
}

/* Bootstrap XXL */
@media only screen and (max-width:1400px) {
main { padding:2% 10%; }

.front-page-header { padding:2% 10%; }
}

/* Bootstrap XL */
@media only screen and (max-width:1200px) {
h3 { font-weight:bold;  font-size:3em; // 36px }

.front-page-header { padding:5% 10%; }
}

/* Bootstrap Large - First notable column switch */
@media only screen and (max-width:992px) {
h4 { font-weight:bold;  line-height:1.25em; font-size:2em; // 24px }
.flex-parent-2-col p { font-size:revert; }

.header-nav { padding:10px 10px; }
.header-nav aside:nth-child(1) { display:none; }
.header-nav aside:nth-child(2) { text-align:left; }
.header-nav aside:nth-child(2) img { height:60px; }

.hamburger { padding:6px 10px; right:20px; top:20px; }

.product-header aside:nth-child(1) { width:100%; padding:2%; }
.product-header aside:nth-child(2) { width:100%; text-align:center;}
.product-header aside:nth-child(2) ul { display:inline-block; text-align:left; }
.product-header aside:nth-child(3) { display:none; }

.flex-child-1-col { width:50%; }

.buy-button-wrapper div { margin:auto; width:100%; }

.four-column aside { width:31.333%; }

.six-column { padding:0 10%; }
}

/* Bootstrap Medium  */
@media only screen and (max-width:768px) {
main { padding:2% 5%; }

.hamburger { padding:6px 10px; right:10px; top:10px; }

.padding-t-b-80 { padding:50px 0; }

.product-header aside { /* padding-top:40px !important; */ }

.back-to-top { border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid #29abe2; }

.flex-parent-2-col aside:nth-child(1) { padding-right:0; width:100%; }
.flex-parent-2-col aside:nth-child(2) { padding-top:40px; width:100%; }

footer article nav { width:100%; border-top-width:1px; border-top-style:solid; border-top-color:#333; text-align:center; margin:20px 0 0 0; padding:20px 0 0 0; }
footer article nav:nth-child(2) { padding:20px 0 0 0; }

footer article aside { width:100%; }
}

/* Bootstrap Small */
@media only screen and (max-width:576px) {
h3 { font-weight:bold;  line-height:1.25em; font-size:2em; // 24px }

.header-nav aside:nth-child(2) img { height:40px; }

.two-column aside { width:98%; }
.three-column aside { width:48%; }
.four-column aside { width:48%; }
.six-column aside { width:31.333%; }

.base-container {padding:20px 5% 0 5%; }
}

/* Bootstrap XS */
@media only screen and (max-width:400px) {
main { padding:2%; }
/* .header-nav aside:nth-child(2) img { width:100%; height:auto; } */

.flex-child-1-col { width:100%; }
}