/* ~~~

   Main CSS behemoth...
   style_v41.css (orig)/ login_vx.css (latter)/ login.css (final)
   by paul mezzullo 

~~~ */
 
 

body {
    height: 100vh; /* 100 is orig */
    background-image: url(../images/GY4A3036TEST.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: block; /* not sure paul */
    color: white;
    color: #F2F3F6;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0%;
    padding: 0;
    overflow-x: hidden; /* n hor scr */
}




/* preload 0928 */
div#preload { display: none; }


.showcase::after {
    content:'';
    height:100vh;   /* 100 is orig */ 
    /*background-image: url(../images/GY4A3036-min.JPG);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;*/
    display: block;    /* not sure paul */
    /* display:grid; */
     /* 10px for effect */
    /*filter: blur(0px);     
    -webkit-filter: blur(0px);*/
}



.showcase:hover::after {
    /*filter: blur(0px);
    -webkit-filter: blur(0px);*/
}



.showcase:hover::content {
    /*filter: blur(12px);
    -webkit-filter: blur(12px)*/;
}



.content {
    position: absolute;
    z-index: 1; 
    margin:auto;
    width: 100%;
    text-align: center;
    /*background-color:orange;*/
}



.transform {
    display:grid;
    grid-template-columns: repeat(1,1fr);   /* (3,1fr) orig 07132020 */
    background:#222222;
    background:#a77777;
    color:#f4f4f4;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-family: 'Rock Salt', cursive;
    font-size: .7rem;
}



.tranline {
    display: flex;
    height: .7rem;
    background: rgba(232, 228, 233, .8); 
    background: rgba(51, 38, 110, .8); 
    margin:auto;
}



.tranline3 {
    display: flex;
    height: .5rem;
    padding: 0;
    margin: 0;
    background: rgba(0,0,0,0.1);   
    background: rgba(255,255,255,.5);  
    margin:auto;
}



.tranline4 {
    display: flex;
    height: .5rem;
    padding: 0;
    margin: 0;
    background: rgba(240,248,255,0.9);
}



.content .logo {
    height: 60px;   /* 60px fit nice on both screens */
    padding: 1rem;
}    



.content .logo2 {
    height: 60px;   
    padding: 1rem;
}    



.content .title {
    font-size: 2.2rem;
    margin-top: 1rem;
}



.content .text {
    line-height: 1.7;
    margin-top: 1rem;
}



.container {
    max-width: 1200px;  /* 960 orig */
    margin: auto;
    overflow:hidden;
    padding:  2rem;   /* 4rem ORIG */
    /* border:1px solid red; */   
}



.apex {
    display: grid;
    grid-template-columns: repeat(3,2fr);
    /* justify-items: left;  */
    background: rgba(0,0,0,.3); /* orig was .7 */
    background: rgba(232, 228, 233,.15);
    /* xtrial 06132023 */
    border-bottom: 1px solid rgba(255,255,255,.09);
    background: rgba(232, 228, 233,.25);
    background: rgba(136, 134, 141,.15);
}



.apex p {
    margin:0;
    padding:3rem;  
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-family: 'Rock Salt', cursive;
    font-family: 'Exo 2', sans-serif;
    font-size: 1.2rem;
    color: white;  
}



.left_ofc {
    text-align: left;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0.2em;
    /* 060324 mods */
    padding-top: 0.7em;
    /* padding-left: 0.7em;*/
}



.center_ofc {
    text-align: center;
    justify-content: center;
    align-items: center;
    margin:0;
    padding:0.2em;
    font-size: 1.6em;    /* .08 orig */
    font-family: 'Rock Salt', cursive; 
    font-weight:600;
    color: rgba(91,0,81,.48);      /* paul 06082021 */
    color: rgba(91,0,81,.68);   
    
}



.right_ofc {
    display: grid;
    grid-template-columns: repeat(3,1fr); /* 4,1fr orig */
    /* text-align: right;   */
    margin: 0;
    padding: 0.2em;
    font-size: .7rem;
    font-family: 'Rock Salt', cursive;
    /* border: 1px solid lime;  */

    /* 060324 mods */
    padding-top: 0.7em;
    padding-right: 0.9em;
}



.button3 {
    background-color: white; 
    border: none;
    color:black;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin:0;
}



.button {
    margin-top: 2rem;
    background-color:orangered; 
    border: none;
    color: white;
    padding: 20px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.2rem;
    font-family: 'Exo 2', sans-serif;
    border-radius: 8px;
    animation-name: example;
    animation-duration: 3s; 
    animation-delay: 2s;
    animation-fill-mode: backwards;   
}



@keyframes example {
    from { background-color:blue; }
      to {background-color: orangered; }
}



.button:hover {
    background-color:blue;        
    color: white;
    /*
    background-color: Transparent;
    background-repeat:no-repeat;
    */
}



.button2 {
    background-color:purple; /* Green */
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}



.mezzo {
    display:grid;
    grid-template-columns: repeat(1,auto);
    font-family: 'Rock Salt', cursive; 
    height:44vh;    /* 40vh was start */
    /* note: justify-content did NOT align */
    /* imp: below moves child gridsnflexes */
    justify-items:center;
    align-items: center;
    margin:auto;
    /* 0908 */
    padding: 0;
    /* border: 1px solid lime; */
}



.mezzoboxa {
    display: grid;
    grid-template-rows: 1fr;
    font-family: 'Rock Salt', cursive; /* orig font */
    font-family: 'Arial Rounded MT' !important; /* as of 0211 */
    font-family: 'Exo 2', sans-serif; /* secondary test 0211 */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 02222023 as per fontgate */
    font-family: 'Arial Rounded MT' !important; /* as of 0211 */
    /*width:320px;*/ /* 320px was orig width with Rock Salt 0211 */


    /* paul commented the width for now 06132023 for Lime green message */
   /* width: 392px; */              /* as of 0211 for non artistic boring font change */ /* orig  width: 332px;*/
    /* cent vert & hor  :) */
    justify-items: center;
    align-items: center;
    /* border: 1px solid lime; */
    /* temp 3 lines below 10282020 not sure i want to keep */
    background: rgba(136, 134, 141,.28); /* orig .08 06132023 */
    padding: 1em;
    border-radius: 9px; /* temp 10262020 not sure i want to keep */
}



.mezzoboxa h2 {
    /* paul enlarged the font 0902 */
    /*font-size:1.2em;*/     /* orig size .9em with Rock Salt 021 */     
    font-size: 1.6em;    /* as of 0211 - orig 1.4em */     
}



.mezzoboxb {
    background: rgba(136, 134, 141,.4); /* 06132023 orig was .4 */
    padding: 6px;
    height: 274px; /* 380final bef bihg screen . 60 height it really good just testing */
    /*width: 290px;*/ /* 410 final bef big screen. this size was cool on 0910 - 450 was tight 0901 */
    border: 1px solid #808080;
    border: 1px solid rgba(255,255,255,.155); /* 11162020 super thin line */
    border: 1px solid rgba(38,110,51,.25);
    border: 1px solid rgba(255,255,255,.09); /* 11162020 super thin line */
    max-width: 700px;
    margin: 0 auto;
    font-family: 'Rock Salt', cursive;
    font-family: 'Exo 2', sans-serif;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    font-size: 1.20em;
    border-radius: 9px; /* temp 10262020 not sure i want to keep */   
}



.mezzoboxb p {
    font-size: .9em;  /* orig was .8em */
}



/* T below latest */
/* ok thus far */
.myForm {
    display: grid;
    grid-template-columns: [labels] auto [controls] 1fr;
    grid-auto-flow: row;
    /* background: #eee; */
    /* grid-gap: .8em; */ /* obsolete 10/26 USE row-gap */
    /* 10262020 row-gap great */
    row-gap: auto;  /* grid-gap was pushing elements to the right 10262020 */
    padding: 0.2em;
    /* border: 1px solid lime; */
}



.myForm > label  {
    grid-column: labels;
    grid-row: auto;
}



.myForm > input,
.myForm > textarea,
.myForm > button {
    grid-column: controls;
    grid-row: auto;
    border: none;
    padding: 1em;
}

   

.myForm > div {
    grid-column: controls;
    grid-row: auto;
    border: none;
    padding: 1em;
}

  

.myForm input:focus { 
    border: 2px solid#d3d3d3;
    background-color: linen;
}



    .myForm input[type=submit] {
        height: 36px;
        color: #ffffff;
        color: #F2F3F6;
        font-size: 12px;
        font-weight: 600;
        background: #33266e;
        background: #51005b;
        cursor: pointer;
        border-radius: 5px; /* 5px orig xtrial paul */
        border: none;
        outline: none;
        margin-top: 0.4em;
        margin: 0.2em;
    }



.myForm input[type=submit]:hover {
    background:#0000e5;
    background:  rgba(255,215,0,.3); /* goldish color */
}



.myForm input[type=text]:hover,
.myForm input[type=password]:hover { 
    background: #e3e0cf;
    background: #fbf7f5;
    /* border:4px solid gray; */
    background-color: papayawhip;
    color:black;
}



    .myForm input[type=text],
    .myForm input[type=password] {
        border: none;
        /*  border-bottom: 1px solid #ffffff;  */
        background: transparent;
        outline: none;
        font-family: 'Exo 2', sans-serif;
        font-size: 12px;
        font-family: 'Rock Salt', cursive;
        text-align: left;
        border: 1px solid #4f4f4f;
        border-radius: 3px;
        background: #fbf7f5;
        margin: 0.2em;
        border-radius: 5px;
    }



.myForm-form-forgot {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-size: .75em !important;         /* .7 was orig */
   color: white;  
   color:#F2F3F6;
   text-align:left !important;
   font-family:'Arial Rounded MT' !important;
}



.myForm-form-forgot:hover {
    text-decoration: underline;
}



.services {
   background: rgba(25,25,255,0.9);
   background-color: #33266e;
   background-color:#5a0066;  /* test 12142021 */
   background-color:#51005b;  /* test 12142021 */
}



.grid-3 {
   /* grid-gap:100px;  */  /* 100px orig */
   display:grid;
   grid-template-columns: repeat(3,1fr);   /* (3,1fr) orig  */ 
   grid-template-columns: repeat(auto-fit,minmax(200px,1fr));   /* (3,1fr) orig  */ 
   /* height:30vh; */     /* This caused repsonvise ERROR */
   justify-content: center; 
   align-items: center;
   margin:auto; 
   background: rgba(25,25,255,0.9);
   background-color: #33266e;
   background-color:#5a0066;  /* test 121420 */
   background-color:#51005b;  /* test 121420 */
}



.grid-3T2 {
    /* grid-gap:100px;  */ /* 100px orig */
    display: grid;
    grid-template-columns: repeat(2,312px); /* (3,1fr) orig 0713202  412px no overlap */  
    /* height:36vh;  */ /* paul as of 081420 */
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-top: 4em; /* paul xtrial 06132023 */
    /* border: 1px solid #ffffff;*/
    grid-gap: 275px;  /* 0717 260 or 275px seems best */
}



.grid-in1 {
   display:grid;  /* paul commented not needed? */
   grid-template-rows: repeat(2,1fr);   
   font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;   
   /* height:20vh; */
   /* put the height at the lowest level for responsivness */
   /*~~~ height is in there  but not sure if leaving it 09092020 */
}



.grid-in1 a {
    text-decoration: none;
    color:white;
    color:#F2F3F6;
    font-family: 'Exo 2', sans-serif;
    font-size: 1.2rem;
}



.grid-in1 a:hover {
    text-decoration: underline;
}



.bg-light {
    background:#f4f4f4;
    color:#333;
    margin:auto; 
    /* height:34vh; */  /* was causing ERROR */
    display:grid;
    /* grid-template-columns: repeat(1,auto); */ 
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); 
    /* cent vert & hor  :) */
    align-items: center;
}



.bg-end {
    background:#222222;
    background:#0A0A23;   /* ARK */
    color:#333;
    margin:0; 
    padding:0;
    /* height:34vh; */  /* was causing ERROR */
    display:grid;
    /* grid-template-columns: repeat(1,auto); */ 
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); 
    /* cent vert & hor  :) */
    align-items: center;
}



.grid-2 {
    display:grid;
    grid-template-columns: repeat(3,auto);    /* ok p */
    margin:auto;
    /* height:40vh; */   /* height ok yay! 09092020 */
    /* border:1px solid lime; */
}



.grid-2T {
    display:grid;
    grid-template-columns: repeat(4,2fr);    /* ok p */
    margin:auto;
    /* border:1px solid lime; */
}



.center {
    text-align: center;
    margin:auto;
}



.center2 {
    text-align: left;
    justify-items: left;
    margin:auto;
}



.bg-dark {
    display:grid;
    grid-template-columns: repeat(1,1fr);   /* (3,1fr) orig 07132020 */
    background:#222222;
    color:#f4f4f4;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: .8rem;
}



.bg-dark_f {
    display:grid;
    grid-template-columns: repeat(3,2fr);   /* (3,1fr) orig 07132020 */
    background: #222222;
    background:#0A0A23;   /* ARK */
    color:#f4f4f4;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: .7em;
    justify-content: center;
    /*~~~ width:1200px; ~~~*/
    /* grid-gap: 20px; */
    /* border:1px solid lime; */
    min-height:300px;    /* paul 0608 2021 adjustment not sure if leaving */
}

 

.bg-dark_f > div {
    margin-top: 2rem;
    margin-bottom: 4rem;
    /*~~~ height:180px;   ~~~*/   /* cntl foot h 130was ok  */
    /* align-items:left; */
    justify-content: right;
    /* border:1px solid lime; */
    /* imp: below moves child gridsnflexes */
    height:18vh;
}



.toes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* background-color: purple; */
    font-family: 'Exo 2', sans-serif;
    color: #F2F3F6;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-family: 'Exo 2', sans-serif;
    font-size: 1.35em;
    line-height:1.4;
}



.toes a {
  color: white;
  color: #F2F3F6;
  font-family: 'Exo 2', sans-serif;
  font-family: 'MuseoModerno', cursive;
  font-family: 'Exo 2', sans-serif;
  font-weight: 600;
  font-size: 1.3em;
}



.toes_nail {
    font-size: .5em;
    font-style: italic;
    font-family: 'Exo 2', sans-serif;
}



.toes_nail_icons {
    display:grid;
    grid-template-columns: repeat(4,1fr);  
    grid-auto-flow: column;
    column-gap: 1.5em;
}



.toes2 {
    font-family: 'Rock Salt', cursive; 
    font-size: .9rem;
    display:flex;
    flex-direction: column;
    align-items:flex-end; 
}



.toesf {
    font-family: 'Rock Salt', cursive; 
    font-size: 2em;
    display:flex;
    flex-direction: column;
    align-items:flex-end; 
    color:#F2F3F6;
    font-size:1.2rem;
}



footer {
    padding:.2rem;   /* orig paul */
}



footer p {
    margin: 0;
}



/* S L I D E ~~~~~~~*/
/* new slide out menu 09102020 */
a {
    text-decoration: none;
    color: #1E1E23;
    opacity:1;
    font-family: 'work sans', sans serif;
    font-size: 1.5em;
    font-weight: 400;
    transition: 200ms;
}



a:hover {
    opacity:0.5;
}



ul {
    padding: 0;
    list-style-type: none;
}

  

nav {
    /* background-color: #1E1E23; */
    height: 65px;

}

  

.menuToggle {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 25px;
    left: 25px;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
}

  

.menuToggle input {
    display: flex;
    width: 40px;
    height: 32px;
    position: absolute;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
}

  

.menuToggle span {
    display: flex;
    width: 29px;
    height: 3px;
    margin-bottom: 5px;
    position: relative;
    background: #ffffff;
    font-weight:bold;   /* 3 lines */
    border-radius: 3px;
    z-index: 1;
    transform-origin: 5px 0px;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
}

  

.menuToggle span:first-child {
    transform-origin: 0% 0%;
}

  

.menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

  

.menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-3px, -1px);
    background: #36383F;
}



.menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

  

.menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
}

  

.menu {
    position: absolute;
    width: 180px;
    height: 220px;
    box-shadow: 0 0 10px #85888C;
    margin: -50px 0 0 -50px;
    padding: 50px;
    padding-top: 125px;
    background-color: #F5F6FA;
    background-color: ghostwhite;  /* menu itself pmat */
    background-color: rgba(136, 134, 141,1); /* test 091020 */
    background-color:wheat;
    border-radius: 5px; /* test 091020 */
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

  

.menu li {
    padding: 10px 0;
    transition-delay: 2s;
}

  

.menuToggle input:checked ~ ul {
    transform: none  !important ;
}




/* small screens varying */
/* media section 768 first */
@media screen and (min-width: 760px) and (max-width: 1800px) {
    .menuToggle {
        display:none;
    }

    nav {
        display:none;
    }
}         /* media L */




/* small screens varying */
/* 560 orig 07162020 */
/* small screens */
@media (max-width:760px) {    /* 560 orig 07162020 */
    .showcase::after {
        height: 50vh;
    }

    .content {
        top:5%;
        margin-top:  5px;
    }    

    .content .logo {
       height:70px;   
    }

    .container .text {
        display: none;
    }

    .grid-3 {
        grid-template-columns: 1fr;
        grid-gap:6em;   /* paulie new 090920 */
        font-family: 'Exo 2', sans-serif;
    }

    .grid-3T2 {
        display:none;
    }

    .grid-in1 p {
        font-family: 'Exo 2', sans-serif;
    }

    /* paulie new 090920 */
    .bg-light {
        grid-template-columns: 1fr;
        grid-gap:6em;   /* paulie new 090920 */
        justify-items:center;
    }

    .gspan {
        display:none;
    }

    .logo {
        height:80px;   
    }

    .bg-dark_f {
        grid-template-columns: 1fr;
        grid-gap:1em;   /* paulie new 090920 */
        justify-items:center;
    }

    .toes {
        align-items:center;
        /* background-color: purple; */
        font-family: 'Exo 2', sans-serif;
    }

    .toesf {
        display:none;
    }

    .lilcons {
        display:none;
    }

   .bg-dark_f > div {
        height:1vh;
    }

   .apex {
        display:none;
    }

   .showcase::after {
        content:'';
        height:100vh;   /* 100 is orig */ 
    }
}  /* media S */


.red_7a {
    /* paul rendition 06 2021 */
    font-size: 10px !Important; /* 9px org */
    color: white;
    background-color: rgba(255,0,0,.65);   /* orig .45 04042024 */
    padding: 10px;
    border-radius: 4px;
    border: 1px solid rgba(255,0,0,.55);
    font-weight: 400;
    margin-top: 4px;
    font-family: 'Nunito Sans', sans-serif;
}

   
/*-- ANIMATION !!!!! --*/
/*--- p for fun 02262021 ----*/
.circle, .squircle {
  /* border-top: 0.1em solid rgba(255,255,255,0.4); */
  height: 5.5em;
  position: absolute;
  width: 5.5em;
}


.circle {
  border-radius: 50%;
  /* box-shadow: 0 1em 2em rgba(0,0,0,0.5); */
  left: calc(50% - 1.25em);
  top: calc(50% - 5.5em);
  transform-origin: 50% 5.5em;
}


.one {
  /*background: rgba(16, 63, 236, 0.75);*/   /* paul 06082021 */
  transform: rotateZ(225deg);
}


.two {
  /*background: rgba(37, 172, 162, 0.75);*/  transform: rotateZ(180deg);
}


.three {
  /*background: rgba(233, 124, 32, 0.75);*/ 
  transform: rotateZ(135deg);

}


.four {
  /*background: rgba(235, 67, 35, 0.75);*/  
  transform: rotateZ(90deg);
}


.five {
  /*background: rgba(190, 28, 65, 0.75);*/ 
  transform: rotateZ(45deg);
}


.six {

  /*background: rgba(208, 57, 159, 0.75);*/ 
 
  transform: rotateZ(0);
}


.seven {
  /*background: rgba(150, 32, 198, 0.75);*/
  transform: rotateZ(-45deg);
}


.eight {
  /*background: rgba(95, 33, 203, 0.75);*/ 
  transform: rotateZ(-90deg);
}


.squircle {
  border-radius: 25%;
}


.small {
  width: 4em;
  height: 4em;
  left: calc(50% - 2em);
  top: calc(50% - 15em);
  transform-origin: 50% 15em;
  box-shadow: 0 0.25em 0.5em rgba(0,0,0,0.2);
}


.small.squircle {
  background: none;
  border: none;
  box-shadow: none;
}


.small.squircle::after {
  background: red;
  border-radius: 25%;
  box-shadow: -0.25em 0.25em 0.5em rgba(0,0,0,0.2);
  content: "";
  height: 100%;
  position: absolute;
  transform: rotateZ(-45deg);
  width: 100%;
}


.small.squircle.two::after {
  background: rgba(37, 172, 162, 0.75);
}


.small.squircle.four::after {
  background: rgba(235, 67, 35, 0.75);
}


.small.squircle.six::after {
  background: rgba(208, 57, 159, 0.75);
}


.small.squircle.eight::after {
  background: rgba(95, 33, 203, 0.75);
}


.large.squircle {
  background: rgba(30, 7, 66, 0.65);
  border: none;
  height: 15em;
  left: calc(50% - 7.5em);
  position: absolute;
  top: calc(50% - 7.5em);
  transform: none;
  width: 15em;
}


.large.squircle.one {
  transform: rotateZ(45deg);
}


/* paul rendition 030121 replaced the global SPAN tag mod
  with a the spanner_div right below it in order to correct the meu
  bar issueing the same <SPAN> ! ...... :) */
  /* ---- commented it for now ---- */
  /*
span {
  display: block;
  height: 20em;
  left: calc(50% - 10em);
  position: absolute;
  top: calc(50% - 10em);
  width: 20em;
}
*/


/* paul rendition */
.spanner_new {
  display: block;
  height: 10em;
  left: calc(50% - 10em);
  position: absolute;
  top: calc(50% - 10em);
  width: 20em;
}


.large-circles {
  animation: spin 10s linear infinite;
  margin-top:40px;
}


.small-shapes {
  animation: spin 30s linear infinite;
}


.content-squircle {
  animation: spin 20s linear infinite;
}



@keyframes spin {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}


.logo_anime {
  height:6.4em;   
  padding-top:4em;
} 




/* temp 14 charatcer message */

.bannerWa h1, .bannerWa h6 {
    margin: 0;
    /*text-shadow: 2px 2px 6px #e5e5e5;*/
    /*  text-align: left;*/
    font-size: .6em;
}

.bannerWa h2, .bannerWa h3 {
    font-size: .9em;
    font-family: 'Prompt', sans-serif;
    font-family: 'Nunito Sans', sans-serif;
}


.bannerWa {
    color: black;
    /* display: flex;*/
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto auto;
    text-align: center;
    /* justify-content: center;*/
    /* align-items: center;*/
    /* ############## */
    /* p xtrials 1027 */
    background-color: #f0ecf1 !important;
    border-radius: 7px;
    padding: 15px;
    background-color: rgba(212, 230, 241,.22) !important;
    background-color: rgba(250,219,216,.32) !important;
    background-color: rgba(234, 237, 237,.42) !important;
    background-color: rgba( 241, 229, 239,.92) !important;
    border: 1px solid rgba( 167, 106, 154,.22);
    background-color: rgba( 241, 229, 239,.26) !important;
    background-color: yellow !important; /* 0525 */
    background-color: #00e600 !important; /* 0525 */
    background-color: #bfff00 !important; /* 0525 */
    background-color: #99ff33 !important; /* 0525 */
}