/* --------------
Theme name: Origin
Original Author: CryptoCoderz aka Jonathan Dan Zaretsky
Current Author: CryptoCoderz aka Jonathan Dan Zaretsky
Version: 1.6
Created: 7/21/2014, 21:19:11 PM GMT-7:00 DST
Last change: 30/04/2023, 6:48:31 PM GMT-7:00 DST
-------------- */
body {
  background-color: #766ca8;
  z-index: 1;

  /* ------------- CSS CAT IN CLOUD 2022 ------------*/

  /* Colors */
  --border-light: #2E2943;
  --border-cloud: #B2502E;
  --border: #202030;
  --cloud-light: #EA9F5C;
  --cloud-lighter: #E8BB6C;
  --cloud-inside: #492839;
  --cloud: #cccccc;
  --cat-light: #7F6668;
  --cat: #5C4A56;
    --ear: #E89C93;
  --leaf-light: #CD4B4D;
  --leaf: #9C383D;
}

/* Disable content until page load */
.onLoading {
    display: none;
    opacity: 0;
}

/* cloud */
.cloud {
  position: absolute;
  margin: 100px 185px;
  transform: scale(0.4);
}
.cloud *, .cloud *:before, .cloud *:after {
  content: "";
  position: absolute;
}
.cloud .part-1 {
  top: -100px;
  left: -200px;
  width: 150px;
  height: 180px;
  background-color: var(--cloud);
  border: 8px solid var(--border);
  border-radius: 90% / 90%;
}
.cloud .part-2 {
  top: -90px;
  left: -120px;
  width: 180px;
  height: 200px;
  background-color: var(--cloud);
  border-radius: 80% / 80%;
}

.cloud .part-4:before {
    z-index: 1;
    width: 120px;
    height: 70px;
    border-radius: 50%;
    border: 8px solid transparent;
    border-bottom-color: var(--border);
    top: 120px;
    left: -84px;
    transform: rotate(7deg);
}

.cloud .part-4 {
  top: -100px;
  left: -30px;
  width: 150px;
  height: 180px;
  background-color: var(--cloud);
  border: 8px solid var(--border);
  border-radius: 80% / 80%;
}

.cloud .part-4:after {
    z-index: 1;
    width: 120px;
    height: 60px;
    border-radius: 50%;
    border: 8px solid transparent;
    border-bottom-color: var(--border);
    top: 129px;
    left: -65px;
    transform: rotate(-11deg);
}


/* Cat */
.cloud .cat {
    top: -230px;
    left: -150px;
}
.cloud .head {
    height: 160px;
    width: 180px;
    border-radius: 50%;
    background-color: var(--cat);
    border: 8px solid var(--border);
    transform: rotate(20deg) skewX(-6deg);
    overflow: hidden;
}
.cloud .head * {
    transform: skewX(6deg) rotate(-20deg);
}
.cloud .head:before {
    width: 120%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--cat-light);
    top: -20px;
    left: -50px;
}
.cloud .cat-eye {
    height: 30px;
    width: 25px;
    border-radius: 50%;
    background-color: var(--border);
    z-index: 1;
    top: 50px;
    left: 100px;
    box-shadow: -80px 0 var(--border);
    animation: 7s blink 1s linear infinite;
}
.cloud .cat-mouth {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: var(--border);
    top: 92px;
    left: 78px;
    box-shadow: -10px 12px var(--border), 10px 12px var(--border);
    transform: skewX(6deg) rotate(-16deg);
}
.cloud .cat-mouth:before {
    height: 13px;
    width: 3px;
    border-radius: 50%;
    border: 8px solid transparent;
    border-right-color: var(--border);
    left: -14px;
    top: -7px;
    transform: rotate(40deg) skewX(-2deg);
}
.cloud .cat-mouth:after {
    height: 13px;
    width: 3px;
    border-radius: 50%;
    border: 8px solid transparent;
    border-left-color: var(--border);
    left: 3px;
    top: -7px;
    transform: rotate(-40deg) skewX(-2deg);
}
.cloud .ear {
    height: 0;
    width: 0;
    border: solid transparent;
    border-width: 29px 0 25px 50px;
    border-left-color: var(--cat-light);
    top: -14px;
    left: 29px;
    transform: rotate(-1deg);
}
.cloud .ear:before {
    height: 0;
    width: 0;
    border: solid transparent;
    border-width: 13px 0 13px 23px;
    border-left-color: var(--border-light);
    left: -42px;
    top: -16px;
}
.cloud .ear:after {
    height: 0;
    width: 0;
    border: solid transparent;
    border-width: 6px 0 6px 11px;
    border-left-color: var(--ear);
    left: -38px;
    top: -9px;
}
.cloud .ear .border:before {
    height: 49px;
    width: 5px;
    border-radius: 50%;
    border: 8px solid transparent;
    border-left-color: var(--border);
    left: -58px;
    top: -36px;
}
.cloud .ear .border:after {
    height: 53px;
    width: 5px;
    border-radius: 50%;
    border: 8px solid transparent;
    border-right-color: var(--border);
    left: -40px;
    top: -47px;
    transform: rotate(-63deg);
}
.cloud .ear.right {
    left: 140px;
    top: 1px;
    transform: rotate(64deg);
}
.cloud .neck {
    width: 110px;
    height: 18px;
    background-color: var(--cat);
    top: 150px;
    left: 40px;
}
.cloud .neck:before {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: solid transparent;
    border-top-color: var(--cat);
    border-width: 31px 0 0 20px;
    left: 80px;
    top: -15px;
}
.cloud .neck:after {
    height: 40px;
    width: 20px;
    border-radius: 50%;
    border: 8px solid transparent;
    border-right-color: var(--border);
    transform: rotate(-39deg);
    top: -16px;
    left: 115px;
}
.cloud .pattoune {
    height: 30px;
    width: 20px;
    border-radius: 0 0 50% 50%;
    border: 8px solid var(--border);
    border-top: 0 transparent;
    background-color: var(--cat);
    top: 165px;
    left: 10px;
    transform: rotate(30deg);
    overflow: hidden;
}
.cloud .pattoune:before {
    height: 22px;
    width: 19px;
    border-radius: 50%;
    background-color: var(--cat-light);
    left: -3px;
    top: 0px;
}
.cloud .pattoune:after {
    width: 6px;
    height: 13px;
    border-radius: 4px 4px 0 0;
    background-color: var(--border);
    top: 20px;
    left: 2px;
    transform: rotate(-5deg);
    box-shadow: 7px 0 var(--border);
}
.cloud .pattoune.right {
    top: 170px;
    left: 80px;
}
.cloud .pattoune-top {
    height: 20px;
    width: 25px;
    background-color: var(--cat);
    top: 150px;
    left: 30px;
    transform: rotate(28deg);
}
.cloud .pattoune-top.right {
    left: 100px;
    top: 160px;
}
.cloud .pattoune-top:before {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 8px solid transparent;
    border-left-color: var(--border);
    top: -6px;
    left: -6px;
    transform: rotate(5deg);
}
.cloud .pattoune-top.right:before {
    left: -9px;
}
.cloud .pattoune-top:after {
    height: 8px;
    width: 15px;
    border-radius: 0 4px 4px 0;
    background-color: var(--border);
    transform: rotate(-37deg);
    top: -5px;
    left: 2px;
}
.cloud .pattoune-top.right:after {
    top: -6px;
    left: 0;
}
.cloud .pattoune-bottom {
    width: 30px;
    height: 8px;
    background-color: var(--border);
    top: 166px;
    left: 62px;
    transform: rotate(5deg);
}
.cloud .pattoune-bottom:before {
    height: 15px;
    width: 15px;
    border-radius: 50%;
    border: 8px solid transparent;
    border-left-color: var(--border);
    transform: rotate(57deg);
    left: -17px;
}
.cloud .pattoune-bottom-right {
    height: 40px;
    width: 20px;
    border-radius: 50%;
    border: 8px solid transparent;
    border-left-color: var(--border);
    top: 156px;
    left: 117px;
    transform: rotate(54deg);
}
.cloud .pattoune-bottom-right:before {
    height: 60px;
    width: 20px;
    border-radius: 50%;
    border: 8px solid transparent;
    border-left-color: var(--border);
    transform: rotate(42deg);
    top: -43px;
    left: 4px;
}
.cloud .pattoune-bottom-right:after {
    height: 30px;
    width: 20px;
    border-radius: 50%;
    border: 8px solid transparent;
    border-left-color: var(--border);
    left: 26px;
    top: -69px;
}
.cloud .cat .dots {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: var(--border);
    left: 187px;
    top: 170px;
    box-shadow:
        23px -17px var(--border),
        -22px -32px var(--border);
}

/* Leaf */
.cloud .leaf {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: var(--border);
    top: 103px;
    left: -440px;
    transform: rotate(55deg);
}
.cloud .leaf.right {
    left: 375px;
    top: 100px;
    transform: rotateZ(-180deg) rotateX(-180deg) rotate(62deg);
}
.cloud .leaf:before {
    width: 20px;
    height: 3px;
    border-radius: 50%;
    border: 8px solid transparent;
    border-bottom-color: var(--border);
    top: -14px;
    left: -5px;
    transform: rotate(-25deg);
}
.cloud .leaf .bg {
    height: 60px;
    width: 20px;
    background-color: var(--leaf-light);
    transform: rotate(53deg);
    top: -51px;
    left: 45px;
}
.cloud .leaf .p1 {
    height: 25px;
    width: 18px;
    background-color: var(--leaf-light);
    border: solid;
    border-radius: 50% 50% 0 0;
    border-color: var(--border) transparent transparent var(--border);
    border-width: 8px 0 0 8px;
    top: -42px; /* Yey */
    left: 20px;
    transform: rotate(-30deg) skewX(-29deg);
}
.cloud .leaf .p2 {
    height: 30px;
    width: 24px;
    background-color: var(--leaf-light);
    border-radius: 50%;
    top: -48px;
    left: 42px; /* Yey */
    transform: rotate(-36deg) skewX(-29deg);
}
.cloud .leaf .p2:before {
    width: 7px;
    height: 17px;
    background-color: var(--border);
    transform: skewX(29deg) rotate(46deg);
    top: -2px;
}
.cloud .leaf .p2:after {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 8px solid transparent;
    border-color: var(--border) var(--border) transparent transparent;
    transform: skewX(19deg);
    left: 2px;
    top: -5px;
}
.cloud .leaf .p3 {
    height: 27px;
    width: 18px;
    background-color: var(--leaf-light);
    border: solid;
    border-radius: 0 0 50% 50%;
    border-color: transparent transparent var(--border) var(--border);
    border-width: 0 8px 8px 8px;
    top: -18px;
    left: 35px;
    transform: rotate(-33deg) skewX(29deg);
}
.cloud .leaf .p4 {
    height: 35px;
    width: 24px;
    background-color: var(--leaf-light);
    border-radius: 50%;
    top: -34px;
    left: 64px;
    transform: rotate(75deg);
}
.cloud .leaf .p4:before {
    width: 7px;
    height: 23px;
    background-color: var(--border);
    transform: rotate(1deg);
    top: 10px;
    left: 20px;
}
.cloud .leaf .p4:after {
    width: 10px;
    height: 13px;
    border-radius: 50%;
    border: 7px solid transparent;
    border-color: var(--border) var(--border) transparent transparent;
    top: -4px;
    left: 3px;
    transform: rotate(-25deg);
}
.cloud .leaf .p5 {
    height: 27px;
    width: 15px;
    border-radius: 50% 50% 0 0;
    background-color: var(--leaf-light);
    border: 7px solid var(--border);
    border-bottom-width: 0;
    top: -61px;
    left: 73px;
    transform: rotate(48deg);
}
.cloud .leaf .dots {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--border);
    left: 41px;
    top: -33px;
    box-shadow:
        22px -10px var(--border),
        38px 5px var(--border);
}
.cloud .leaf .inside {
    width: 70px;
    height: 10px;
    border-radius: 50%;
    border: 6px solid transparent;
    border-bottom-color: var(--leaf);
    top: -37px;
    left: 14px;
    transform: rotate(-35deg);
}
.cloud .leaf .inside:before {
    width: 6px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--leaf);
    top: 7px;
    left: 65px;
}
.cloud .leaf .inside:after {
    width: 10px;
    height: 14px;
    border-radius: 50%;
    border: 6px solid transparent;
    border-left-color: var(--border);
    left: -4px;
    top: -4px;
}

@keyframes blink {
    0% {
        top: 50px;
        height: 30px;
    }
    2% {
        top: 60px;
        height: 10px;
    }
    4% {
        top: 50px;
        height: 30px;
    }
    6% {
        top: 60px;
        height: 10px;
    }
    8% {
        top: 50px;
        height: 30px;
    }
}

.spacer-main {
  height: 110px;
}
/* ------------- CSS CAT IN CLOUD 2022 (END) ------------*/

header {
  color: #FDB4C1;
  font-size: 1.5em;
  font-family: Lucida Sans Unicode;
  text-align: center;
  margin-bottom: 4em;
  margin-top: 2em;
}
header h1 {
  border-bottom: 1px solid;
  margin: 0 auto;
}

/* PADDING IN IMG -9px compensating "a"s 9px padding
    This was done to resolve IMG links being padded 9px over
    after the NAV UI was completed */
    
img {
  width: 100%;
  height: 100%;
  margin-left: -9px;
}

/* IMportant float controls here as well for NAV */
a {
  font-size: 13px;
  color: #FDB4C1;
  font-family: Verdana;
  padding: 15px 9px 15px 9px;/* this is the 9px compensated for previously */
}
/* li and the next few ".navlist" classes are required for the 3D float nav
+ animation This is accomplished by simply adjusting padding sizes upon hover
to cause the page to look like the NAV is popping out. Sleek and effective */
li {
  padding: 5px;
      -webkit-transition: all .3s ease;
      transition: all .3s ease;
      -moz-transition: all .3s ease;
      -ms-transition: all .3s ease;
      -webkit-animation-delay: 1.5s;
      animation-delay: 1.5s;
      -moz-animation-delay: 1.5s;
      -ms-animation-delay: 1.5s;
}

.navlist ul li a:hover {
    color: #1a1a1a;
    background-color: #C5EBD5;
    padding-left: ;
    padding-right:;
    border-radius: 10px;
    box-shadow: 5px 10px 0px 0px #000;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    -ms-animation-delay: 1.5s;

}

.navlist ul li:hover {
  padding: 9px 20px 20px 9px; /* this is the 9px compensated for previously */
          -webkit-transition: all .3s ease;
          transition: all .3s ease;
          -moz-transition: all .3s ease;
          -ms-transition: all .3s ease;
          -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
          -moz-animation-delay: 1.5s;
          -ms-animation-delay: 1.5s;
}

.navlist ul li {
  display: inline;
}

.navlist {
  font-size: 13px;
  color: #C5EBD5;
  text-align: center;
  margin-bottom: auto;
  margin-top: -6.4em;
  margin-right: 40px;
  font-family: Verdana;
}

.bottomborder {
   color: #FDB4C1;
   border-bottom: 1px solid;
}
/* Category border, maybe not best practice but handy in this application
This provides the category "border" that is a bright color and easily 
recognizable seperation */
.catborder {
     color: #C5EBD5;
   border-bottom: 4px solid;
   width: 350px;
   margin-top: -90px;
   margin: 0 auto;
}

/* Search feature implementation (Google Custom Search)
  Goal is to have the search results load on a modal
  the easier route is to have the results load on a 2nd
  page. For this site modal is choice (keep everything local) */
/* SUPPLEMENTAL NOTE: DUE TO ADMINISTRATION DECISION MODAL FUNCTION
    WAS REMOVED AND WILL NOT BE IN USE FOR THIS PAGE 2/10/2016 */
/* SEARCH VIEW Controls------------------------------------------------------------------ */
.gool-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap; 
  flex-flow: row wrap;
  width: 100%;
 /* margin-left: 31%;  Adjusted from 29% to 31% for true* center */
}
.gool-container .goolwrapper {
  -webkit-flex: 50% 0 50%;
  flex: 50% 0 50%;
   border: 2px solid #FDB4C1; 
  border: none;
  /* height: 24vw; ------- REMOVED TO ALLOW FOR ICON OVERFLOW ------ */
  width: 100%; 
  min-width: 360px; 
  
  overflow: hidden;
            -webkit-transition: all .3s ease;
          transition: all .3s ease;
          -moz-transition: all .3s ease;
          -ms-transition: all .3s ease;
          -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
          -moz-animation-delay: 1.5s;
          -ms-animation-delay: 1.5s;
}

#search {
  color: #FDB4C1;  
  margin-left: 2%;
  text-align: center;
  font-size: 1.2em;
  font-family: Lucida Sans Unicode;
  float: left;
  z-index: 700;
  

}
/* ######## RE-INSTATED FOR ALIGNMENT PROPERTIES ###### */
#searchborder {
  color: #FDB4C1;
  margin-left: 35%;
  margin-top: -25px;
  text-align: center;
  font-size: 1.25em;
  font-family: Lucida Sans Unicode;
  float: left;
  z-index: 1;
  
} 
/* SEARCH BORDER COLOR CONTROLS */
.clr-BLU {
color:#3369E8;
}
.clr-RED {
color:#D50F25;
}
.clr-YLW {
color:#EEB211;
}
.clr-GRE {
color:#009925;
}
/* END OF COLOR CONTROLS FOR SEARCH */

/* START -- this starts the "IDs" that are associated to the navbar's links
as none of the sections are individual pages the NAV "jumps" the user down to
the desired section */
#adminlinks {
  color: #FDB4C1;
  font-size: 1.5em;
  font-family: Lucida Sans Unicode;
  text-align: center;
  margin-top: 2em;
}

#emprelinks {
  color: #FDB4C1;
  font-size: 1.5em;
  font-family: Lucida Sans Unicode;
  text-align: center;
  margin-top: 2em;
}

#supportlinks {
  color: #FDB4C1;
  font-size: 1.5em;
  font-family: Lucida Sans Unicode;
  text-align: center;
  margin-top: 2em;
}

#clinaplinks {
  color: #FDB4C1;
  font-size: 1.5em;
  font-family: Lucida Sans Unicode;
  text-align: center;
  margin-top: 2em;
}
/* -- END */

/* Image controls (small) not to be confused with the pop-up controls
found lower in the CSS, this section controls content within the boxes 
and scaling properties. This was patched extensively to support ALL
browsers as of 01/15/2016 */
.img-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap; 
  flex-flow: row wrap;
  width: 350px;
  /* Center horizontally*/
  margin: 0 auto;
  
 /*margin-left: 31%;  CHNGED TO 50PX --- Adjusted from 29% to 31% for true* center */
}
.img-container .wrapper {

  /* border: 2px solid #FDB4C1; */
  border: none;
  height: 6em; /* changed from "vw" so as to resolve the infinite scaling down */
  width: 6em; 

margin: .2em;
  overflow: hidden;
            -webkit-transition: all .3s ease;
          transition: all .3s ease;
          -moz-transition: all .3s ease;
          -ms-transition: all .3s ease;
          -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
          -moz-animation-delay: 1.5s;
          -ms-animation-delay: 1.5s;
}

/* Hover controls for image container wrapper element */
.wrapper:hover {
  border-radius: 17.5px;
      color: #1a1a1a;
    background-color: #C5EBD5;
    /* DISABLED SHADOWING FOR ASTHETICS */
  /* box-shadow: 5px 13px 0px 0px #000; */  
          -webkit-transition: all .3s ease;
          transition: all .3s ease;
          -moz-transition: all .3s ease;
          -ms-transition: all .3s ease;
          -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
          -moz-animation-delay: 1.5s;
          -ms-animation-delay: 1.5s;
}

/* MODAL CONTENT WRAPPER CONTROLS ------------------------------------------ */
/* Image controls (small) this section controls content within the boxes 
and scaling properties. This was patched extensively to support ALL
browsers as of 02/10/2016 */
.modalimg-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap; 
  flex-flow: row wrap;
  width: 350px;
 margin-left: 10%; /* CHNGED TO 50PX --- Adjusted from 29% to 31% for true* center */
}

.modalimg-container .modalcontentwrapper {

  /* border: 2px solid #FDB4C1; */
  border: none;
  height: 6em; /* changed from "vw" so as to resolve the infinite scaling down */
  width: 6em; 

margin: .2em;
  overflow: hidden;
            -webkit-transition: all .3s ease;
          transition: all .3s ease;
          -moz-transition: all .3s ease;
          -ms-transition: all .3s ease;
          -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
          -moz-animation-delay: 1.5s;
          -ms-animation-delay: 1.5s;
}

/* Hover controls for image container modalcontentwrapper element */
.modalcontentwrapper:hover {
  border-radius: 17.5px;
      color: #1a1a1a;
    background-color: #766ca8;
    /*background-color: #C5EBD5; */
    /* DISABLED SHADOWING FOR ASTHETICS */
  /* box-shadow: 5px 13px 0px 0px #000; */  
          -webkit-transition: all .3s ease;
          transition: all .3s ease;
          -moz-transition: all .3s ease;
          -ms-transition: all .3s ease;
          -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
          -moz-animation-delay: 1.5s;
          -ms-animation-delay: 1.5s;
}

/* MODAL starts here (page overlays and effects)
This section contorls the overlaying drop down menus
that some links are associated with for cleanliness of the site */

/* Normal styles for the modal (ESP LINK) */
#espmodal {
  margin: 5px 0 0 19%;
  opacity: 0;
  position: relative;
  visibility: hidden;
  width:70%; /* IF ADJUSTMENT OF PAGE BEHIND MODAL IS OFF
   BE SURE TO CONSULT THIS WIDTH PROPERTY AS 80% caused errors
   and 70% corrected them */
 z-index: 99;
  box-sizing:border-box;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;

}
/* Make the modal appear when targeted */
#espmodal:target {
    opacity: 1;
    top:50%;
    visibility: visible;
  }
#espmodal .header,#espmodal .footer {
  border-bottom: 1px solid #766ca8;
  border-radius: 5px 5px 0 0;
    color: #FDB4C1;
  font-size: 1.25em;
  font-family: Lucida Sans Unicode;
}
#espmodal .footer {
    border:none;
    border-top: 1px solid #766ca8;
    border-radius: 0 0 5px 5px;

  }
#espmodal h2 {
  margin:0;
}
#espmodal .btn {
  float:right;
  margin-top: -10px;
}
#espmodal .copy,#espmodal .header, #espmodal .footer {
  padding:15px;
}
.espmodal-content {
  background: #766ca8;
  position: fixed;
  z-index: 20;
  border-radius:5px;
  width: 60%;
  margin: 0 auto;
  margin-top: -250px;
}
#espmodal .copy {
  background: #9B94BE;

}

#espmodal .overlay {
  background-color: #000;
  background: rgba(0,0,0,.5);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

#espmodal h4{
  color: #FDB4C1;
}

/* Normal styles for the modal (FlavorXL LINK) */
#fxlmodal {
  margin: 5px 0 0 19%;
  opacity: 0;
  position: relative;
  visibility: hidden;
  width:70%; /* IF ADJUSTMENT OF PAGE BEHIND MODAL IS OFF
   BE SURE TO CONSULT THIS WIDTH PROPERTY AS 80% caused errors
   and 70% corrected them */
 z-index: 99;
  box-sizing:border-box;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;

}
/* Make the modal appear when targeted */
#fxlmodal:target {
    opacity: 1;
    top:50%;
    visibility: visible;
  }
#fxlmodal .header,#fxlmodal .footer {
  border-bottom: 1px solid #766ca8;
  border-radius: 5px 5px 0 0;
    color: #FDB4C1;
  font-size: 1.25em;
  font-family: Lucida Sans Unicode;
}
#fxlmodal .footer {
    border:none;
    border-top: 1px solid #766ca8;
    border-radius: 0 0 5px 5px;

  }
#fxlmodal h2 {
  margin:0;
}
#fxlmodal .btn {
  float:right;
  margin-top: -10px;
}
#fxlmodal .copy,#fxlmodal .header, #fxlmodal .footer {
  padding:15px;
}
.fxlmodal-content {
  background: #766ca8;
  position: fixed;
  z-index: 20;
  border-radius:5px;
  width: 60%;
  margin: 0 auto;
  margin-top: -250px;
}
#fxlmodal .copy {
  background: #9B94BE;

}

#fxlmodal .overlay {
  background-color: #000;
  background: rgba(0,0,0,.5);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

#fxlmodal h4{
  color: #FDB4C1;
}

/* Normal styles for the modal (ESP LINK) */
#arionmodal {
  margin: 5px 0 0 19%;
  opacity: 0;
  position: relative;
  visibility: hidden;
  width:70%; /* IF ADJUSTMENT OF PAGE BEHIND MODAL IS OFF
   BE SURE TO CONSULT THIS WIDTH PROPERTY AS 80% caused errors
   and 70% corrected them */
 z-index: 99;
  box-sizing:border-box;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;

}
/* Make the modal appear when targeted */
#arionmodal:target {
    opacity: 1;
    top:50%;
    visibility: visible;
  }
#arionmodal .header,#arionmodal .footer {
  border-bottom: 1px solid #766ca8;
  border-radius: 5px 5px 0 0;
    color: #FDB4C1;
  font-size: 1.25em;
  font-family: Lucida Sans Unicode;
}
#arionmodal .footer {
    border:none;
    border-top: 1px solid #766ca8;
    border-radius: 0 0 5px 5px;

  }
#arionmodal h2 {
  margin:0;
}
#arionmodal .btn {
  float:right;
  margin-top: -10px;
}
#arionmodal .copy,#arionmodal .header, #arionmodal .footer {
  padding:15px;
}
.arionmodal-content {
  background: #766ca8;
  position: fixed;
  z-index: 20;
  border-radius:5px;
  width: 60%;
  margin: 0 auto;
  margin-top: -250px;
}
#arionmodal .copy {
  background: #9B94BE;

}

#arionmodal .overlay {
  background-color: #000;
  background: rgba(0,0,0,.5);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

#arionmodal h4{
  color: #FDB4C1;
}

/* Normal styles for the modal (ESP LINK) */
#infomodal {
  margin: 5px 0 0 19%;
  opacity: 0;
  position: relative;
  visibility: hidden;
  width:70%; /* IF ADJUSTMENT OF PAGE BEHIND MODAL IS OFF
   BE SURE TO CONSULT THIS WIDTH PROPERTY AS 80% caused errors
   and 70% corrected them */
 z-index: 99;
  box-sizing:border-box;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;

}
/* Make the modal appear when targeted */
#infomodal:target {
    opacity: 1;
    top:50%;
    visibility: visible;
  }
#infomodal .header,#infomodal .footer {
  border-bottom: 1px solid #766ca8;
  border-radius: 5px 5px 0 0;
    color: #FDB4C1;
  font-size: 1.25em;
  font-family: Lucida Sans Unicode;
}
#infomodal .footer {
    border:none;
    border-top: 1px solid #766ca8;
    border-radius: 0 0 5px 5px;

  }
#infomodal h2 {
  margin:0;
}
#infomodal .btn {
  float:right;
  margin-top: -10px;
}
#infomodal .copy,#infomodal .header, #infomodal .footer {
  padding:15px;
}
.infomodal-content {
  background: #766ca8;
  position: fixed;
  z-index: 20;
  border-radius:5px;
  width: 60%;
  margin: 0 auto;
  margin-top: -250px;
}
#infomodal .copy {
  background: #9B94BE;

}

#infomodal .overlay {
  background-color: #000;
  background: rgba(0,0,0,.5);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

#infomodal h4{
  color: #FDB4C1;
}

/* Normal styles for the modal (ESP LINK) */
#konjmodal {
  margin: 5px 0 0 19%;
  opacity: 0;
  position: relative;
  visibility: hidden;
  width:70%; /* IF ADJUSTMENT OF PAGE BEHIND MODAL IS OFF
   BE SURE TO CONSULT THIS WIDTH PROPERTY AS 80% caused errors
   and 70% corrected them */
 z-index: 99;
  box-sizing:border-box;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;

}
/* Make the modal appear when targeted */
#konjmodal:target {
    opacity: 1;
    top:50%;
    visibility: visible;
  }
#konjmodal .header,#konjmodal .footer {
  border-bottom: 1px solid #766ca8;
  border-radius: 5px 5px 0 0;
    color: #FDB4C1;
  font-size: 1.25em;
  font-family: Lucida Sans Unicode;
}
#konjmodal .footer {
    border:none;
    border-top: 1px solid #766ca8;
    border-radius: 0 0 5px 5px;

  }
#konjmodal h2 {
  margin:0;
}
#konjmodal .btn {
  float:right;
  margin-top: -10px;
}
#konjmodal .copy,#konjmodal .header, #konjmodal .footer {
  padding:15px;
}
.konjmodal-content {
  background: #766ca8;
  position: fixed;
  z-index: 20;
  border-radius:5px;
  width: 60%;
  margin: 0 auto;
  margin-top: -250px;
}
#konjmodal .copy {
  background: #9B94BE;

}

#konjmodal .overlay {
  background-color: #000;
  background: rgba(0,0,0,.5);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

#konjmodal h4{
  color: #FDB4C1;
}

/* Normal styles for the modal (ESP LINK) */
#ppcnmodal {
  margin: 5px 0 0 19%;
  opacity: 0;
  position: relative;
  visibility: hidden;
  width:70%; /* IF ADJUSTMENT OF PAGE BEHIND MODAL IS OFF
   BE SURE TO CONSULT THIS WIDTH PROPERTY AS 80% caused errors
   and 70% corrected them */
 z-index: 99;
  box-sizing:border-box;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;

}
/* Make the modal appear when targeted */
#ppcnmodal:target {
    opacity: 1;
    top:50%;
    visibility: visible;
  }
#ppcnmodal .header,#ppcnmodal .footer {
  border-bottom: 1px solid #766ca8;
  border-radius: 5px 5px 0 0;
    color: #FDB4C1;
  font-size: 1.25em;
  font-family: Lucida Sans Unicode;
}
#ppcnmodal .footer {
    border:none;
    border-top: 1px solid #766ca8;
    border-radius: 0 0 5px 5px;

  }
#ppcnmodal h2 {
  margin:0;
}
#ppcnmodal .btn {
  float:right;
  margin-top: -10px;
}
#ppcnmodal .copy,#ppcnmodal .header, #ppcnmodal .footer {
  padding:15px;
}
.ppcnmodal-content {
  background: #766ca8;
  position: fixed;
  z-index: 20;
  border-radius:5px;
  width: 60%;
  margin: 0 auto;
  margin-top: -250px;
}
#ppcnmodal .copy {
  background: #9B94BE;

}

#ppcnmodal .overlay {
  background-color: #000;
  background: rgba(0,0,0,.5);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

#ppcnmodal h4{
  color: #FDB4C1;
}

/* Normal styles for the modal (ESP LINK) */
#nftymodal {
  margin: 5px 0 0 19%;
  opacity: 0;
  position: relative;
  visibility: hidden;
  width:70%; /* IF ADJUSTMENT OF PAGE BEHIND MODAL IS OFF
   BE SURE TO CONSULT THIS WIDTH PROPERTY AS 80% caused errors
   and 70% corrected them */
 z-index: 99;
  box-sizing:border-box;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;

}
/* Make the modal appear when targeted */
#nftymodal:target {
    opacity: 1;
    top:50%;
    visibility: visible;
  }
#nftymodal .header,#nftymodal .footer {
  border-bottom: 1px solid #766ca8;
  border-radius: 5px 5px 0 0;
    color: #FDB4C1;
  font-size: 1.25em;
  font-family: Lucida Sans Unicode;
}
#nftymodal .footer {
    border:none;
    border-top: 1px solid #766ca8;
    border-radius: 0 0 5px 5px;

  }
#nftymodal h2 {
  margin:0;
}
#nftymodal .btn {
  float:right;
  margin-top: -10px;
}
#nftymodal .copy,#nftymodal .header, #nftymodal .footer {
  padding:15px;
}
.nftymodal-content {
  background: #766ca8;
  position: fixed;
  z-index: 20;
  border-radius:5px;
  width: 60%;
  margin: 0 auto;
  margin-top: -250px;
}
#nftymodal .copy {
  background: #9B94BE;

}

#nftymodal .overlay {
  background-color: #000;
  background: rgba(0,0,0,.5);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

#nftymodal h4{
  color: #FDB4C1;
}

/* Normal styles for the modal (ESP LINK) */
#ccashmodal {
  margin: 5px 0 0 19%;
  opacity: 0;
  position: relative;
  visibility: hidden;
  width:70%; /* IF ADJUSTMENT OF PAGE BEHIND MODAL IS OFF
   BE SURE TO CONSULT THIS WIDTH PROPERTY AS 80% caused errors
   and 70% corrected them */
 z-index: 99;
  box-sizing:border-box;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;

}
/* Make the modal appear when targeted */
#ccashmodal:target {
    opacity: 1;
    top:50%;
    visibility: visible;
  }
#ccashmodal .header,#ccashmodal .footer {
  border-bottom: 1px solid #766ca8;
  border-radius: 5px 5px 0 0;
    color: #FDB4C1;
  font-size: 1.25em;
  font-family: Lucida Sans Unicode;
}
#ccashmodal .footer {
    border:none;
    border-top: 1px solid #766ca8;
    border-radius: 0 0 5px 5px;

  }
#ccashmodal h2 {
  margin:0;
}
#ccashmodal .btn {
  float:right;
  margin-top: -10px;
}
#ccashmodal .copy,#ccashmodal .header, #ccashmodal .footer {
  padding:15px;
}
.ccashmodal-content {
  background: #766ca8;
  position: fixed;
  z-index: 20;
  border-radius:5px;
  width: 60%;
  margin: 0 auto;
  margin-top: -250px;
}
#ccashmodal .copy {
  background: #9B94BE;

}

#ccashmodal .overlay {
  background-color: #000;
  background: rgba(0,0,0,.5);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

#ccashmodal h4{
  color: #FDB4C1;
}

/* Normal styles for the modal (ESP LINK) */
#rnrcmodal {
  margin: 5px 0 0 19%;
  opacity: 0;
  position: relative;
  visibility: hidden;
  width:70%; /* IF ADJUSTMENT OF PAGE BEHIND MODAL IS OFF
   BE SURE TO CONSULT THIS WIDTH PROPERTY AS 80% caused errors
   and 70% corrected them */
 z-index: 99;
  box-sizing:border-box;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;

}
/* Make the modal appear when targeted */
#rnrcmodal:target {
    opacity: 1;
    top:50%;
    visibility: visible;
  }
#rnrcmodal .header,#rnrcmodal .footer {
  border-bottom: 1px solid #766ca8;
  border-radius: 5px 5px 0 0;
    color: #FDB4C1;
  font-size: 1.25em;
  font-family: Lucida Sans Unicode;
}
#rnrcmodal .footer {
    border:none;
    border-top: 1px solid #766ca8;
    border-radius: 0 0 5px 5px;

  }
#rnrcmodal h2 {
  margin:0;
}
#rnrcmodal .btn {
  float:right;
  margin-top: -10px;
}
#rnrcmodal .copy,#rnrcmodal .header, #rnrcmodal .footer {
  padding:15px;
}
.rnrcmodal-content {
  background: #766ca8;
  position: fixed;
  z-index: 20;
  border-radius:5px;
  width: 60%;
  margin: 0 auto;
  margin-top: -250px;
}
#rnrcmodal .copy {
  background: #9B94BE;

}

#rnrcmodal .overlay {
  background-color: #000;
  background: rgba(0,0,0,.5);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

#rnrcmodal h4{
  color: #FDB4C1;
}

/* Normal styles for the modal (ESP LINK) */
#insnmodal {
  margin: 5px 0 0 19%;
  opacity: 0;
  position: relative;
  visibility: hidden;
  width:70%; /* IF ADJUSTMENT OF PAGE BEHIND MODAL IS OFF
   BE SURE TO CONSULT THIS WIDTH PROPERTY AS 80% caused errors
   and 70% corrected them */
 z-index: 99;
  box-sizing:border-box;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;

}
/* Make the modal appear when targeted */
#insnmodal:target {
    opacity: 1;
    top:50%;
    visibility: visible;
  }
#insnmodal .header,#insnmodal .footer {
  border-bottom: 1px solid #766ca8;
  border-radius: 5px 5px 0 0;
    color: #FDB4C1;
  font-size: 1.25em;
  font-family: Lucida Sans Unicode;
}
#insnmodal .footer {
    border:none;
    border-top: 1px solid #766ca8;
    border-radius: 0 0 5px 5px;

  }
#insnmodal h2 {
  margin:0;
}
#insnmodal .btn {
  float:right;
  margin-top: -10px;
}
#insnmodal .copy,#insnmodal .header, #insnmodal .footer {
  padding:15px;
}
.insnmodal-content {
  background: #766ca8;
  position: fixed;
  z-index: 20;
  border-radius:5px;
  width: 60%;
  margin: 0 auto;
  margin-top: -250px;
}
#insnmodal .copy {
  background: #9B94BE;

}

#insnmodal .overlay {
  background-color: #000;
  background: rgba(0,0,0,.5);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

#insnmodal h4{
  color: #FDB4C1;
}

/* Normal styles for the modal (ESP LINK) */
#empowermodal {
  margin: 5px 0 0 19%;
  opacity: 0;
  position: relative;
  visibility: hidden;
  width:70%; /* IF ADJUSTMENT OF PAGE BEHIND MODAL IS OFF
   BE SURE TO CONSULT THIS WIDTH PROPERTY AS 80% caused errors
   and 70% corrected them */
 z-index: 99;
  box-sizing:border-box;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;

}
/* Make the modal appear when targeted */
#empowermodal:target {
    opacity: 1;
    top:50%;
    visibility: visible;
  }
#empowermodal .header,#empowermodal .footer {
  border-bottom: 1px solid #766ca8;
  border-radius: 5px 5px 0 0;
    color: #FDB4C1;
  font-size: 1.25em;
  font-family: Lucida Sans Unicode;
}
#empowermodal .footer {
    border:none;
    border-top: 1px solid #766ca8;
    border-radius: 0 0 5px 5px;

  }
#empowermodal h2 {
  margin:0;
}
#empowermodal .btn {
  float:right;
  margin-top: -10px;
}
#empowermodal .copy,#empowermodal .header, #empowermodal .footer {
  padding:15px;
}
.empowermodal-content {
  background: #766ca8;
  position: fixed;
  z-index: 20;
  border-radius:5px;
  width: 60%;
  margin: 0 auto;
  margin-top: -250px;
}
#empowermodal .copy {
  background: #9B94BE;

}

#empowermodal .overlay {
  background-color: #000;
  background: rgba(0,0,0,.5);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

#empowermodal h4{
  color: #FDB4C1;
}

/* Normal styles for the modal (FROG LINK) */
#frogmodal {
  margin: 5px 0 0 19%;
  opacity: 0;
  position: relative;
  visibility: hidden;
  width:70%; /* IF ADJUSTMENT OF PAGE BEHIND MODAL IS OFF
   BE SURE TO CONSULT THIS WIDTH PROPERTY AS 80% caused errors
   and 70% corrected them */
 z-index: 99;
  box-sizing:border-box;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;

}
/* Make the modal appear when targeted */
#frogmodal:target {
    opacity: 1;
    top:50%;
    visibility: visible;
  }
#frogmodal .header,#frogmodal .footer {
  border-bottom: 1px solid #766ca8;
  border-radius: 5px 5px 0 0;
    color: #FDB4C1;
  font-size: 1.25em;
  font-family: Lucida Sans Unicode;
}
#frogmodal .footer {
    border:none;
    border-top: 1px solid #766ca8;
    border-radius: 0 0 5px 5px;

  }
#frogmodal h2 {
  margin:0;
}
#frogmodal .btn {
  float:right;
  margin-top: -10px;
}
#frogmodal .copy,#frogmodal .header, #frogmodal .footer {
  padding:15px;
}
.frogmodal-content {
  background: #766ca8;
  position: fixed;
  z-index: 20;
  border-radius:5px;
  width: 60%;
  margin: 0 auto;
  margin-top: -250px;
}
#frogmodal .copy {
  background: #9B94BE;

}

#frogmodal .overlay {
  background-color: #000;
  background: rgba(0,0,0,.5);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

#frogmodal h4{
  color: #FDB4C1;
}

/* Normal styles for the modal (DIMI LINK) */
#dimimodal {
  margin: 5px 0 0 19%;
  opacity: 0;
  position: relative;
  visibility: hidden;
  width:70%; /* IF ADJUSTMENT OF PAGE BEHIND MODAL IS OFF
   BE SURE TO CONSULT THIS WIDTH PROPERTY AS 80% caused errors
   and 70% corrected them */
 z-index: 99;
  box-sizing:border-box;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;

}
/* Make the modal appear when targeted */
#dimimodal:target {
    opacity: 1;
    top:50%;
    visibility: visible;
  }
#dimimodal .header,#dimimodal .footer {
  border-bottom: 1px solid #766ca8;
  border-radius: 5px 5px 0 0;
    color: #FDB4C1;
  font-size: 1.25em;
  font-family: Lucida Sans Unicode;
}
#dimimodal .footer {
    border:none;
    border-top: 1px solid #766ca8;
    border-radius: 0 0 5px 5px;

  }
#dimimodal h2 {
  margin:0;
}
#dimimodal .btn {
  float:right;
  margin-top: -10px;
}
#dimimodal .copy,#dimimodal .header, #dimimodal .footer {
  padding:15px;
}
.dimimodal-content {
  background: #766ca8;
  position: fixed;
  z-index: 20;
  border-radius:5px;
  width: 60%;
  margin: 0 auto;
  margin-top: -250px;
}
#dimimodal .copy {
  background: #9B94BE;

}

#dimimodal .overlay {
  background-color: #000;
  background: rgba(0,0,0,.5);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

#dimimodal h4{
  color: #FDB4C1;
}

/* Normal styles for the modal (ESP LINK) */
#docsmodal {
  margin: 5px 0 0 19%;
  opacity: 0;
  position: relative;
  visibility: hidden;
  width:70%; /* IF ADJUSTMENT OF PAGE BEHIND MODAL IS OFF
   BE SURE TO CONSULT THIS WIDTH PROPERTY AS 80% caused errors
   and 70% corrected them */
 z-index: 99;
  box-sizing:border-box;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;

}
/* Make the modal appear when targeted */
#docsmodal:target {
    opacity: 1;
    top:50%;
    visibility: visible;
  }
#docsmodal .header,#docsmodal .footer {
  border-bottom: 1px solid #766ca8;
  border-radius: 5px 5px 0 0;
    color: #FDB4C1;
  font-size: 1.25em;
  font-family: Lucida Sans Unicode;
}
#docsmodal .footer {
    border:none;
    border-top: 1px solid #766ca8;
    border-radius: 0 0 5px 5px;

  }
#docsmodal h2 {
  margin:0;
}
#docsmodal .btn {
  float:right;
  margin-top: -10px;
}
#docsmodal .copy,#docsmodal .header, #docsmodal .footer {
  padding:15px;
}
.docsmodal-content {
  background: #766ca8;
  position: fixed;
  z-index: 20;
  border-radius:5px;
  width: 60%;
  margin: 0 auto;
  margin-top: -250px;
}
#docsmodal .copy {
  background: #9B94BE;

}

#docsmodal .overlay {
  background-color: #000;
  background: rgba(0,0,0,.5);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

#docsmodal h4{
  color: #FDB4C1;
}

/* Normal styles for the modal (ESP LINK) */
#chatmodal {
  margin: 5px 0 0 19%;
  opacity: 0;
  position: relative;
  visibility: hidden;
  width:70%; /* IF ADJUSTMENT OF PAGE BEHIND MODAL IS OFF
   BE SURE TO CONSULT THIS WIDTH PROPERTY AS 80% caused errors
   and 70% corrected them */
 z-index: 99;
  box-sizing:border-box;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;

}
/* Make the modal appear when targeted */
#chatmodal:target {
    opacity: 1;
    top:50%;
    visibility: visible;
  }
#chatmodal .header,#chatmodal .footer {
  border-bottom: 1px solid #766ca8;
  border-radius: 5px 5px 0 0;
    color: #FDB4C1;
  font-size: 1.25em;
  font-family: Lucida Sans Unicode;
}
#chatmodal .footer {
    border:none;
    border-top: 1px solid #766ca8;
    border-radius: 0 0 5px 5px;

  }
#chatmodal h2 {
  margin:0;
}
#chatmodal .btn {
  float:right;
  margin-top: -10px;
}
#chatmodal .copy,#chatmodal .header, #chatmodal .footer {
  padding:15px;
}
.chatmodal-content {
  background: #766ca8;
  position: fixed;
  z-index: 20;
  border-radius:5px;
  width: 60%;
  margin: 0 auto;
  margin-top: -250px;
}
#chatmodal .copy {
  background: #9B94BE;

}

#chatmodal .overlay {
  background-color: #000;
  background: rgba(0,0,0,.5);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

#chatmodal h4{
  color: #FDB4C1;
}

/* Normal styles for the modal (ESP LINK) */
#twittermodal {
  margin: 5px 0 0 19%;
  opacity: 0;
  position: relative;
  visibility: hidden;
  width:70%; /* IF ADJUSTMENT OF PAGE BEHIND MODAL IS OFF
   BE SURE TO CONSULT THIS WIDTH PROPERTY AS 80% caused errors
   and 70% corrected them */
 z-index: 99;
  box-sizing:border-box;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;

}
/* Make the modal appear when targeted */
#twittermodal:target {
    opacity: 1;
    top:50%;
    visibility: visible;
  }
#twittermodal .header,#twittermodal .footer {
  border-bottom: 1px solid #766ca8;
  border-radius: 5px 5px 0 0;
    color: #FDB4C1;
  font-size: 1.25em;
  font-family: Lucida Sans Unicode;
}
#twittermodal .footer {
    border:none;
    border-top: 1px solid #766ca8;
    border-radius: 0 0 5px 5px;

  }
#twittermodal h2 {
  margin:0;
}
#twittermodal .btn {
  float:right;
  margin-top: -10px;
}
#twittermodal .copy,#twittermodal .header, #twittermodal .footer {
  padding:15px;
}
.twittermodal-content {
  background: #766ca8;
  position: fixed;
  z-index: 20;
  border-radius:5px;
  width: 60%;
  margin: 0 auto;
  margin-top: -250px;
}
#twittermodal .copy {
  background: #9B94BE;

}

#twittermodal .overlay {
  background-color: #000;
  background: rgba(0,0,0,.5);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

#twittermodal h4{
  color: #FDB4C1;
}

/* Normal styles for the modal (ESP LINK) */
#redditmodal {
  margin: 5px 0 0 19%;
  opacity: 0;
  position: relative;
  visibility: hidden;
  width:70%; /* IF ADJUSTMENT OF PAGE BEHIND MODAL IS OFF
   BE SURE TO CONSULT THIS WIDTH PROPERTY AS 80% caused errors
   and 70% corrected them */
 z-index: 99;
  box-sizing:border-box;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;

}
/* Make the modal appear when targeted */
#redditmodal:target {
    opacity: 1;
    top:50%;
    visibility: visible;
  }
#redditmodal .header,#redditmodal .footer {
  border-bottom: 1px solid #766ca8;
  border-radius: 5px 5px 0 0;
    color: #FDB4C1;
  font-size: 1.25em;
  font-family: Lucida Sans Unicode;
}
#redditmodal .footer {
    border:none;
    border-top: 1px solid #766ca8;
    border-radius: 0 0 5px 5px;

  }
#redditmodal h2 {
  margin:0;
}
#redditmodal .btn {
  float:right;
  margin-top: -10px;
}
#redditmodal .copy,#redditmodal .header, #redditmodal .footer {
  padding:15px;
}
.redditmodal-content {
  background: #766ca8;
  position: fixed;
  z-index: 20;
  border-radius:5px;
  width: 60%;
  margin: 0 auto;
  margin-top: -250px;
}
#redditmodal .copy {
  background: #9B94BE;

}

#redditmodal .overlay {
  background-color: #000;
  background: rgba(0,0,0,.5);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

#redditmodal h4{
  color: #FDB4C1;
}

/* [CSS] Cat loader 2022 
*  Original Concept by: Copyright (c) 2022 Rplus
*  Current Design by: Copyright (c) 2022-2023 CryptoCoderz
*  License: The MIT License (MIT)
*/

.catL {
  position: relative;
  width: 100%;
  max-width: 20em;
  overflow: hidden;
  background-color: #9B94BE;
}
.catL::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.catL:hover > * {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.catL:active > * {
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.catL__body, .catL__tail, .catL__head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-animation: rotating 2.79s cubic-bezier(0.65, 0.54, 0.12, 0.93) infinite;
          animation: rotating 2.79s cubic-bezier(0.65, 0.54, 0.12, 0.93) infinite;
}
.catL__body::before, .catL__tail::before, .catL__head::before {
  content: "";
  position: absolute;
  width: 50%;
  height: 50%;
  background-size: 200%;
  background-repeat: no-repeat;
  background-image: url("../img/image.png");
}

.catL__head::before {
  top: 0;
  right: 0;
  background-position: 100% 0%;
  transform-origin: 0% 100%;
  transform: rotate(90deg);
}

.catL__tail {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.catL__tail::before {
  left: 0;
  bottom: 0;
  background-position: 0% 100%;
  transform-origin: 100% 0%;
  transform: rotate(-30deg);
}

.catL__body {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.catL__body:nth-of-type(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.catL__body::before {
  right: 0;
  bottom: 0;
  background-position: 100% 100%;
  transform-origin: 0% 0%;
}

@-webkit-keyframes rotating {
  from {
    transform: rotate(720deg);
  }
  to {
    transform: none;
  }
}

@keyframes rotating {
  from {
    transform: rotate(720deg);
  }
  to {
    transform: none;
  }
}
.boxL {
  display: flex;
  /*display: none;*/
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  justify-content: center;
  align-items: center;
  background-color: #9B94BE;
  z-index: 1;
  margin: 0;
  height: 100vh;
}