/*MAZ  MY CUSTOM CSS*/
a:not([class]) {
    text-decoration: none!important; /*was underline*/
}

body {
 /* font-family: var(--cassiopeia-font-family-body,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",);  */
    font-size: 0.85rem; /*was 1rem*/
    font-weight: 400;
    line-height: 1.5;
    color: #22262a;
    -webkit-text-size-adjust: 100%;
}


/*styling module header. This styles ALL module headers
.module_header h3 { 
    color: #900!important;*/
}
/*styling module header. This styles SPECIFIC module headers -  place redTitle in module/advanced/ 'Module Class Suffix*/
.redTitle .module_header h3 {
    color: #900!important;
}
/* to make pages edge to edge. put  maz-page-wide-class  in menu link/page display/ page class */
.maz-page-wide-class .grid-child.container-component {
	grid-column: full-start/full-end !important;
}
/*BOF header with gradient*/
.container-header {
    z-index: 10;
    background-color:#fff;  /*was #1D1F22 */
   background-image: linear-gradient(135deg,#fff,#fff); /*  was   linear-gradient(135deg,#1D1F22,#424079); */
    box-shadow: 0 0 0 1px rgba(0,0,0,.15),0 2px 3px rgba(0,0,0,.2);/*  was  inset 0 5px 5px rgba(0,0,0,.03) */
	/*border-bottom:solid 2px #f4f4f4;maz added */
}
/*EOF header with gradient*/
/*BOF header menu padding top and bottom*/
.container-header .container-nav {
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 0em; /*was 1em */
}
.container-header .grid-child {
    padding: .5em;
        padding-top: 0.0em; /*was 0.5em */
        padding-right: 0.5em;
        padding-bottom: 0.0em; /*was 0.5em */
        padding-left: 0.5em;
}
/*BOF header menu padding top and bottom*/
/*BOF footer with gradient*/
.footer {
    margin-top: 1em;
    color: #666;
    background-color:  #F9FAFB;/*was  #6B7A99 */
    background-image: linear-gradient(135deg, #F9FAFB, #F9FAFB);/*was   linear-gradient(135deg,#122a59,#424079) */
}
/* EOF footer with gradient*/
/* MAZ BOF front page display*/
/* BOF front page display*/
ul { /*control list hover opacity*/
  padding: 0;
  margin: 0;
  list-style: none;
  /* actual part that reduces opacity of non-hovered bit*/
  &:hover {
    .cute-bit {
      opacity: 0.5;
      &:hover {
        opacity: 1;
      }
    }
  }
} /*// EOF control list hover opacity*/
.ancatomy { /*BOF OUTER control image position + CONTENT*/
  position: relative;
  text-align: center;
  font-size: 1vw;
  color: #900;

  img { /*image position*/
    display: block;
    width: 30em;
    margin: 0 auto;
  } /*EOF image position*/

  .cute-bit { /*control elements */
    position: absolute;
    min-width: 15em;
    transition: all 0.25s ease-out;
    &:hover {
      /* !important here allows custom base value with consistent hover*/
      min-width: 21em !important;
    }
    
    /* REFACTOR OPPORTUNITY:*/
    /* pad both sides, then  add matching before/after & hide as needed*/ 
    &.grow-left {
      text-align: left;
      h2 {color:#900;
        padding-right: 1em;
        &:after {
          right: 0;
          transform: translate(50%, 50%);
        }
      }
    }
    &.grow-right {
      text-align: right;
      h2 {color:#900;
        padding-left: 1em;
        &:after {
          left: 0;
          transform: translate(-50%, 50%);
        }
      }
    }
    
    h2 {color:#900;
      position: relative;
      padding: 0 0 0.4em;
      border-bottom: solid 0.2em;
      margin: 0 0 0.4em;
      text-shadow: 0 0 1em 1em rgba(0,0,0,0.1);
      &:after {
        position: absolute;
        bottom: -0.1em;
        content: "";
        width: 1em;
        height: 1em;
        border-radius: 50%;
        background: #fff;
      }
    } /* EOF h2*/
    p {
      margin: 0;
      padding: 0;
      text-shadow: 0 0 1em 1em rgba(0,0,0,0.1);
    }

    &.cute-ears {
      right: 43%;
      top: 8%;
      /* custom value only applies to non-hover*/
      min-width: 12em;
    }
    &.cute-eyes {
      right: 58%;
      top: 44%;
    }
    &.cute-nose {
      left: 47.5%;
      top: 55%;
      /* custom value only applies to non-hover*/
      min-width: 16em;
    }
    &.cute-paws {
      left: 39%;
      bottom: 10%;
    }
  } /* EOF .cute-bit*/ /*EOF control elements */
  
} /* // EOF OUTER control image position + CONTENT*/

.sr-only {/* heading of display*/
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
/* //EOF front page display*/
/* //MAZ EOF front page display*/

/* //MAZ BOF front page display 2 spinning circles*/
/*------------------------------------------------*\
  Mixins
\*------------------------------------------------*/

@mixin square ($size: 20px) {
  width: $size;
  height: $size;
}

@mixin round ($size: 20px) {
  @include square($size);
  border-radius: 50%;
}

@mixin center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}



/*------------------------------------------------*\
  Target
\*------------------------------------------------*/

$target-round-size: 18px;
$target-round-border-color: lighten(#000, 70%);
$target-triangle-size: 10px;
$target-triangle-color: lighten(#000, 70%);

@keyframes target {
  0% { transform: rotateZ(0) scale(.6); }
  50% { transform: rotateZ(180deg) scale(1); }
  100% { transform: rotateZ(360deg) scale(.6); }
}

.target {
  position: relative;
  background-color: #fff;
  border: 2px solid $target-round-border-color;
  box-shadow: 0 0 4px 2px rgba(#000, .2);
  animation: target 2s linear infinite;
  
  @include round($target-round-size);
  
  &:before,
  &:after {
    content: "";
    display: block;
    position: absolute;
  }
  
  &:before {
    top: 16px;
    left: 16px;
    
    width: 0;
    height: 0;
    border-style: solid;
    border-width: $target-triangle-size $target-triangle-size 0 0;
    border-color: $target-triangle-color transparent transparent transparent;
  }
  
  &:after {
    bottom: 16px;
    right: 16px;
    
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 $target-triangle-size $target-triangle-size;
    border-color: transparent transparent $target-triangle-color transparent;
  }
}



/*------------------------------------------------*\
  sq
\*------------------------------------------------*/

$sq-color: #46d9c0;
$sq-color-dark: darken($sq-color, 20%);

@keyframes sq {
  from { box-shadow: 0 0 0 0 rgba(#fff, 1), 0 0 0 0 rgba(#fff, 1); }
  to { box-shadow: 0 0 0 8px rgba(#fff, 0), 0 0 0 12px rgba(#fff, 0); }
}

.sq {
  @include square(24px);
  
  position: relative;
  border-radius: 20%;
  background-color: rgba($sq-color, .6);
  box-shadow: inset 0 0 8px 6px rgba($sq-color-dark, .4), 0 0 4px 2px rgba(#000, .2);
  transform: rotateZ(45deg);
  
  &:before {
    @include round(6px);
    @include center;
    
    content: "";
    display: block;
    background-color: rgba(#fff, .4);
    animation: sq 800ms infinite;
  }
}



/*------------------------------------------------*\
  Morph
\*------------------------------------------------*/

$morph-color: #f72d41;
$morph-size: 36px;
$morph-inner-size: $morph-size / 2;

@keyframes morph {
  0% { transform: rotateZ(0); border-radius: 20%; }
  50% { transform: rotateZ(45deg); border-radius: 50%; }
  100% { transform: rotateZ(90deg); border-radius: 20%; }
}

.morph {
  @include square($morph-size);
  
  position: relative;
  box-shadow: 0 0 6px 4px rgba($morph-color, .4);
  animation: morph 1s linear infinite;
  
  &,
  &:before {
    background-color: rgba($morph-color, .6);
  }
  
  &:before {
    @include center;
    @include round($morph-inner-size);
    
    content: "";
    display: block;
  }
}



/*------------------------------------------------*\
  Egg
\*------------------------------------------------*/

$egg-color: #f77e2d;
$egg-size: 40px;
$egg-center-size: $egg-size / 2;

@keyframes egg {
  from { box-shadow: inset 0 0 12px 6px rgba($egg-color, .6); }
  to { box-shadow: inset 0 0 4px 2px rgba($egg-color, .4); }
}

.egg {
  @include round($egg-size);
  
  position: relative;
  box-shadow: inset 0 0 6px 4px rgba($egg-color, .6);
  animation: egg 600ms linear infinite;
  animation-direction: alternate;
  
  &:before {
    @include round($egg-center-size);
    @include center;
    
    content: "";
    display: block;
    background-color: rgba($egg-color, .8);
    border: 2px solid $egg-color;
  }
}



/*------------------------------------------------*\
  Wheel
\*------------------------------------------------*/

$green: #37b475;
$wheel-size: 40px;
$wheel-decrement: 20px;
$wheel-border-width: 4px;

@keyframes wheel {
  from { transform: rotateZ(0); }
  to { transform: rotateZ(-360deg); }
}

.wheel {
  @include round($wheel-size);
  
  position: relative;
  border: $wheel-border-width dashed $green;
  animation: wheel 6s linear infinite;
  box-shadow: inset 0 0 4px 2px rgba($green, .6);
  
  &:before {
    @include round($wheel-size - $wheel-decrement);
    @include center;
    
    content: "";
    display: block;
    background-color: $green;
  }
}



/*------------------------------------------------*\
  Wheel Alt
\*------------------------------------------------*/

.wheel-alt {
  box-shadow: inset 0 0 0 2px lighten($green, 10%);
  border-color: lighten($green, 10%);
  
  &:before {
    border: 2px solid darken($green, 5%);
    box-shadow: 0 0 2px 2px rgba(#000, .3);
  }
}



/*------------------------------------------------*\
  Wheel Alt 2
\*------------------------------------------------*/

.wheel-alt2 {
  box-shadow: none;
  border-color: darken($green, 5%);
  
  &:before {
    border: 2px solid darken($green, 5%);
  }
}



/*------------------------------------------------*\
  Swoop
\*------------------------------------------------*/

$blue: #67c1ea;
$swoop-bg: white;

@keyframes swoop {
  0% { box-shadow: inset 0 0 0 0 $blue, inset 0 0 0 0 $swoop-bg; }
  50% { box-shadow: inset 0 0 0 0 $blue, inset 0 0 0 15px $swoop-bg; }
  100% { box-shadow: inset 0 0 0 15px $blue, inset 0 0 0 15px $swoop-bg; }
}

.swoop {
  @include round(30px);
  
  animation: swoop 1s infinite;
  animation-direction: reverse;
  animation-timing-function: cubic-bezier(0.71, 0.13, 1, 0.71);
  background-color: $blue;
}



/*------------------------------------------------*\
  Slack
\*------------------------------------------------*/

$white: #fff;
$black: #000;
$slack-size: 20px;
$slack-ring-size: $slack-size * 2;
$slack-ring-border: 4px;
$slack-increment: 10px;

@keyframes slack {
  from {
    transform: translate(-50%, -50%) scale(1);
  }
  
  to {
    transform: translate(-50%, -50%) scale(1.5);
  }
}

.slack {
  @include round($slack-size);
  
  position: relative;
  background-color: $white;
  box-shadow: 0 0 4px 2px rgba($black, .2);
  
  &:before {
    @include center;
    @include round($slack-ring-size);
    
    content: "";
    display: block;
    border: $slack-ring-border solid $white;
    box-shadow: inset 0 0 4px 2px rgba($black, .2), 0 0 4px 2px rgba($black, .2);
    animation: slack 400ms linear infinite;
    animation-direction: alternate;
  }
}



/*------------------------------------------------*\
  Sonar
\*------------------------------------------------*/

$pink: #ff93df;
$sonar-size: 20px;

@keyframes sonar {
  from { box-shadow: 0 0 0 0 rgba($pink, 1), 0 0 4px 2px rgba(#000, .4); }
  to { box-shadow: 0 0 0 10px rgba($pink, 0), 0 0 4px 2px rgba(#000, .4); }
}

.sonar {
  @include round($sonar-size);
  
  background-color: $pink;
  border: 2px solid darken($pink, 10%);
  animation: sonar 800ms ease-out infinite;
}



/*------------------------------------------------*\
  Uninteresting stuff
\*------------------------------------------------*/

$item-size: 150px;
$item-margin: 10px;

*,
*:before,
*:after {
  box-sizing: border-box;
}

.wrapper {
  width: 5 * ($item-size + $item-margin * 2);
  margin: 20px auto;
}

.item {
  display: table;
  float: left;
  width: $item-size;
  height: $item-size;
  border: 2px solid #dadada;
  margin: $item-margin;
  &:nth-of-type(even) { background-color: #eee; }
}

.item-inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  
  > a {
    text-decoration: none;
    display: inline-block;
  }
}

/* //MAZ EOF front page display 2 spinning circles*/