/*
 * @copyright 2013
 * @license IBEWA
 * @author  Eugene Meyer - (Lead)
 * @author  Rene van der Merwe - (Jnr Dev)
 * @author  Eugene Du Toit - (Jnr Dev)
 * All rights owned by IBE Workflow Automation (PTY) LTD
 */
/* TODO : ROOT ELEMENTS */
@font-face {
  font-family : "IbewaH-Italic";
  src         : url(./fonts/IbewaH-Italic/IbewaH-Italic.eot);
  src         : url(./fonts/IbewaH-Italic/IbewaH-Italic.eot?#iefix) format("embedded-opentype"),
  url(./fonts/IbewaH-Italic/IbewaH-Italic.otf) format("otf"),
  url(./fonts/IbewaH-Italic/IbewaH-Italic.svg#IbewaH-Italic) format("svg"),
  url(./fonts/IbewaH-Italic/IbewaH-Italic.ttf) format("truetype"),
  url(./fonts/IbewaH-Italic/IbewaH-Italic.woff) format("woff");
  }

@font-face {
  font-family : "IbewaH";
  src         : url(./fonts/IbewaH/IbewaH.eot);
  src         : url(./fonts/IbewaH/IbewaH.eot?#iefix) format("embedded-opentype"),
  url(./fonts/IbewaH/IbewaH.otf) format("otf"),
  url(./fonts/IbewaH/IbewaH.svg#IbewaH) format("svg"),
  url(./fonts/IbewaH/IbewaH.ttf) format("truetype"),
  url(./fonts/IbewaH/IbewaH.woff) format("woff");
  }

@font-face {
  font-family : "IbewaB-Bold";
  src         : url(./fonts/IbewaB-Bold/IbewaB-Bold.eot);
  src         : url(./fonts/IbewaB-Bold/IbewaB-Bold.eot?#iefix) format("embedded-opentype"),
  url(./fonts/IbewaB-Bold/IbewaB-Bold.otf) format("otf"),
  url(./fonts/IbewaB-Bold/IbewaB-Bold.svg#IbewaB-Bold) format("svg"),
  url(./fonts/IbewaB-Bold/IbewaB-Bold.ttf) format("truetype"),
  url(./fonts/IbewaB-Bold/IbewaB-Bold.woff) format("woff");
  }

@font-face {
  font-family : "IbewaB";
  src         : url(./fonts/IbewaB/IbewaB.eot);
  src         : url(./fonts/IbewaB/IbewaB.eot?#iefix) format("embedded-opentype"),
  url(./fonts/IbewaB/IbewaB.otf) format("otf"),
  url(./fonts/IbewaB/IbewaB.svg#IbewaB) format("svg"),
  url(./fonts/IbewaB/IbewaB.ttf) format("truetype"),
  url(./fonts/IbewaB/IbewaB.woff) format("woff");
  }

:root {
  --clrPurple      : #492c5c;
  --clrRed         : #cc3539;
  --clrGreyLight1  : rgb(238, 238, 238);
  --clrGreyLight2  : rgb(193, 193, 193);
  --clrGreyDark1   : rgb(137, 137, 137);
  --clrGreyDark2   : rgb(92, 92, 92);
  --transitionFast : all 75ms ease-in-out;
  --transitionSlow : all 150ms ease-in-out;
  }

* {
  accent-color           : transparent;
  -webkit-appearance     : none;
  appearance             : none;
  background-color       : transparent;
  border                 : transparent;
  box-sizing             : border-box;
  -webkit-font-smoothing : antialiased;
  font-style             : normal;
  font-variant           : normal;
  font-weight            : normal;
  gap                    : 0;
  margin                 : 0;
  outline                : none;
  padding                : 0;
  text-align             : left;
  text-align             : -webkit-left;
  text-decoration        : none;
  text-rendering         : optimizeLegibility;
  text-transform         : none;
  width                  : 100%;
  font-family            : "IbewaB", helvetica, sans-serif;
  color                  : var(--clrGreyDark2);
  }

.epicmillH {
  font-family : "IbewaH", helvetica, sans-serif;
  }

/* TODO : HTML TAG ELEMENTS */
html {
  background-image : radial-gradient(circle at 85% 1%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 96%, transparent 96%, transparent 100%),
  radial-gradient(circle at 14% 15%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 1%, transparent 1%, transparent 100%),
  radial-gradient(circle at 60% 90%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 20%, transparent 20%, transparent 100%),
  radial-gradient(circle at 79% 7%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 78%, transparent 78%, transparent 100%),
  radial-gradient(circle at 55% 65%, hsla(190, 0%, 93%, 0.05) 0%, hsla(190, 0%, 93%, 0.05) 52%, transparent 52%, transparent 100%),
  linear-gradient(135deg, rgb(73, 44, 92), rgb(204, 53, 57));
  width            : 100svw;
  height           : 100svh;
  }

body {
  width  : 100%;
  height : 100%;
  margin : 0 auto;
  }

h1,
h2 {
  font-family : "IbewaH", helvetica, sans-serif;
  }

h1 {
  font-size   : 1.5rem;
  line-height : calc(1.5rem / 1.25);
  }

h2 {
  font-size   : 1.4rem;
  line-height : calc(1.4rem / 1.25);
  }

/* TODO : CLASS NAME ELEMENTS */
.headerSectionMainCon {
  padding          : .5rem;
  display          : flex;
  flex-flow        : row nowrap;
  background-color : rgba(255, 255, 255, .3);
  }

.menuHeaderItemMainCon,
.headerMenuMainCon {
  display         : inherit;
  justify-content : start;
  justify-items   : start;
  justify-self    : start;
  flex-flow       : row nowrap;
  gap             : .5rem;
  }

.closeIcon,
.topnavMenuIcon[navExpand="true"],
.topnavMenuIcon[navExpand="false"] {
  align-content      : center;
  align-items        : center;
  border-radius      : .3125rem;
  cursor             : pointer;
  display            : grid;
  gap                : .3125rem;
  grid-template-rows : repeat(3, .3125rem);
  height             : auto;
  justify-content    : center;
  justify-items      : center;
  justify-self       : end;
  padding            : .35rem;
  transition         : var(--transitionFast);
  width              : max-content;
  }

.topnavMenuIcon[navExpand="true"],
.topnavMenuIcon[navExpand="false"] {
  background : linear-gradient(135deg, var(--clrRed) 10%, var(--clrPurple) 100%);
  }

.closeIcon {
  border-radius : 2rem;
  padding       : 0;
  }

.closeIcon > .closeIconBar,
.topnavMenuIcon > .topnavMenuIconBar {
  background-color : var(--clrGreyLight1);
  border-radius    : .3125rem;
  height           : .3125rem;
  margin           : .375rem 0;
  transition       : var(--transitionSlow);
  width            : 2.1875rem;
  }

.closeIcon > .closeIconBar {
  background-color : var(--clrRed);
  border-radius    : calc(.3125rem / 1.5);
  height           : calc(.3125rem / 1.5);
  width            : calc(2.1875rem / 1.5);
  }

.topnavMenuIcon[navExpand="true"] > .topnavMenuIconBar1 {
  transform : translate(0, .625rem) rotate(-45deg);
  }

.closeIcon > .closeIconBar1 {
  transform : translate(0, .625rem) rotate(-45deg);
  }

.closeIcon > .closeIconBar2,
.topnavMenuIcon[navExpand="true"] > .topnavMenuIconBar2 {
  opacity : 0;
  }

.closeIcon > .closeIconBar3,
.topnavMenuIcon[navExpand="true"] > .topnavMenuIconBar3 {
  transform : translate(0, -0.625rem) rotate(45deg);
  }

.closeIcon > .closeIconBar3 {
  transform : translate(0, -0.625rem) rotate(45deg);
  }

.menuHeaderItem {
  width         : max-content;
  padding       : .5rem;
  border-radius : .3125rem;
  color         : var(--clrGreyLight1);
  font-family   : "IbewaH", helvetica, sans-serif;
  }

.ibewaLogo {
  height          : 2rem;
  width           : auto;
  display         : inherit;
  justify-content : start;
  justify-items   : start;
  justify-self    : start;
  }

.ibewaWebsiteMainCon {
  padding : .75rem .75rem 1.5rem;
  }

.companyName {
  color       : var(--clrGreyLight1);
  font-family : "IbewaH-Italic", helvetica, sans-serif;
  text-align  : center;
  margin      : 2rem auto auto;
  font-size   : 3rem;
  line-height : calc(3rem / 1.25);
  }

.menuHeaderContentMainCon > .tabContent,
.tabMainWrappingCon {
  align-content    : center;
  align-items      : center;
  align-self       : center;
  border-radius    : 2.5rem;
  display          : flex;
  flex-flow        : row wrap;
  width            : 92.5%;
  margin           : 2.5rem auto auto;
  box-shadow       : .1875rem .1875rem calc(.1875rem * 2) rgba(0, 0, 0, .35),
  calc(.1875rem * 3) calc(.1875rem * 3) calc((.1875rem * 2) * 3) rgba(0, 0, 0, .3),
  calc(.1875rem * 6) calc(.1875rem * 6) calc((.1875rem * 2) * 6) rgba(0, 0, 0, .25);
  background-color : rgb(255, 255, 255);
  padding          : 1rem;
  }

.menuHeaderContentMainCon > .tabContent {
  padding : 1.375rem 1.75rem;
  }

.tabList {
  justify-content  : space-between;
  justify-items    : stretch;
  background-color : var(--clrGreyLight1);
  border-radius    : 1.5rem;
  padding          : .5rem;
  overflow         : hidden;
  display          : inherit;
  flex-flow        : row wrap;
  gap              : .25rem;
  }

.tabItem,
.tabItem:hover,
.tabItem:active {
  font-size     : .9rem;
  justify-self  : stretch;
  width         : max-content;
  border-radius : 2rem;
  padding       : .5rem 1rem;
  font-family   : "ibewaH", helvetica, sans-serif;
  color         : var(--clrGreyDark2);
  }

.menuHeaderItem:hover,
.menuHeaderItem:active,
.tabItem:hover,
.tabItem:active {
  background : linear-gradient(135deg, var(--clrRed) 10%, var(--clrPurple) 100%);
  color      : var(--clrGreyLight1);
  transition : var(--transitionFast);
  }

.tabContent {
  display    : inherit;
  flex-flow  : column nowrap;
  padding    : .375rem .75rem;
  margin-top : .75rem;
  }

.tabContentHeader {
  display               : grid;
  grid-template-columns : repeat(2, 1fr);
  align-self            : center;
  align-items           : center;
  align-content         : center;
  }

.tabContentHeader > h2 {
  color : var(--clrPurple);
  }

.tabContentHeader > .closeIcon {
  justify-self    : end;
  justify-items   : end;
  justify-content : end;
  }

.tabContent > p,
.tabContent > .websiteContentMainCon {
  margin-top : .5rem;
  }

.contactUsGridCon {
  display               : grid;
  grid-template-columns : repeat(auto-fit, minmax(15rem, 1fr));
  justify-content       : center;
  justify-items         : center;
  justify-self          : center;
  margin-top            : 1.375rem;
  }

.icnTxtGridCon {
  display            : grid;
  grid-template-rows : repeat(2, max-content);
  gap                : .5rem;
  width              : max-content;
  align-content      : center;
  align-items        : center;
  align-self         : center;
  justify-content    : center;
  justify-items      : center;
  justify-self       : center;
  }

.icnTxtGridCon > img {
  height : 3rem;
  width  : auto;
  }

.websiteContentMainCon {
  display         : flex;
  flex-flow       : row wrap;
  justify-content : space-around;
  justify-items   : center;
  justify-self    : center;
  }

.websiteContentMainCon > span {
  display       : flex;
  width         : calc(15rem + 1rem);
  height        : calc(15rem + 1rem);
  border-radius : 50%;
  background    : linear-gradient(135deg, var(--clrRed) 10%, var(--clrPurple) 100%);
  }

.websiteLink {
  display       : flex;
  width         : 15rem;
  height        : 15rem;
  border-radius : 50%;
  margin        : auto;
  padding       : 0;
  }

.websiteLinkRecue,
.websiteLinkEpicmill {
  background-size     : cover;
  background-repeat   : no-repeat;
  background-position : center center;
  overflow            : hidden;
  }

.websiteLinkRecue {
  background-image : url(images/RecueLogo.png);
  }

.websiteLinkEpicmill {
  background-image : url(images/EpicmillLogo.png);
  }

.footer {
  bottom                : 0;
  left                  : 0;
  position              : fixed;
  text-transform        : uppercase;
  width                 : 100%;
  z-index               : 99;
  padding               : .5rem .75rem;
  display               : grid;
  grid-template-columns : repeat(auto-fit, minmax(15rem, 1fr));
  }

.facebookLogoCon {
  width : max-content;
  }

.facebookLogo {
  height : 1.5rem;
  width  : auto;
  }

.footer > p {
  font-family     : IbewaH, Helvetica, sans-serif;
  font-size       : calc(.8rem / 1.05);
  line-height     : calc(.8rem * 1.5);
  color           : rgb(255, 255, 255);
  margin-bottom   : 0;
  align-content   : end;
  align-items     : end;
  align-self      : end;
  text-align      : end;
  justify-content : end;
  justify-items   : end;
  justify-self    : end;
  }

/* TODO: DATA ATTRIBUTES {MUST BE LAST} */
*[display="none"] {
  display : none !important;
  }

*[display="flex"] {
  display : flex !important;
  }

*[display="grid"] {
  display : grid !important;
  }

*[color="none"] {
  background : linear-gradient(135deg, transparent 10%, transparent 100%);
  }

*[color="active"] {
  background : linear-gradient(135deg, var(--clrRed) 10%, var(--clrPurple) 100%);
  color      : var(--clrGreyLight1);
  }