@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%; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
>>> 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:100%; }

/*
@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 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. 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; }

/* 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%; }
}

/* 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:4px 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%; }
}

/* 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%; }
}