/*!
 * Start Bootstrap - Landing Page v5.0.0 (https://startbootstrap.com/template-overviews/landing-page)
 * Copyright 2013-2018 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-landing-page/blob/master/LICENSE)
 */

 .hmshowcontainer {}

 #mainshowstitle {
     max-width: 29em;
     bottom: -2em;
     position: relative;
     z-index: 4;
     margin-left: auto;
     margin-right: auto;
     user-select: none;
     rotate: -4deg;
 }
 
 @media (min-width:576px) {
     #mainshowstitle {
         rotate: 0deg;
     }
 }
 
 #hontitle {
     /* max-width: 29em; */
     /* bottom: -2em; */
     position: relative;
     z-index: 3;
     margin-left: 2em;
     margin-right: 2em;
     rotate: 3deg;
     height: 6em;
     margin-bottom: 3em;
     user-select: none;
     /* background: blue; */
     background-image: linear-gradient(45deg, #00000000 0%, #00000000 20%, #00000000 43%, #f9f4b4ff 50%, #00000000 57%, #00000000 80%, #00000000 100%), linear-gradient(90deg, #96702b 40%, #ffd381 50%, #96702b 60%);
     /* -webkit-background-clip: text; */
     -webkit-text-fill-color: transparent;
     animation: shine 8s infinite;
     animation-timing-function: linear;
     background-size: 792%;
     background-position: right, center;
     padding: 1em;
     border-radius: 8px;
     filter: drop-shadow(-1px 4px #976a27);
 }
 
 @media (min-width:576px) {
     #hontitle {
         max-width: 29em;
         margin-left: auto;
         margin-right: auto;
         rotate: 0deg;
     }
 }
 
 .maskshadow {
     filter: drop-shadow(1px -1px #e0be89);
     width: 100%;
     height: 100%;
 }
 
 #honimg {
     mask-image: url("../img/honorablementions.svg");
     mask-repeat: no-repeat;
     width: 100%;
     height: 100%;
     background: blue;
     mask-position: center;
     background-size: 700%, 100%, 700%;
     background-position: right, center, center;
     background-image: linear-gradient(45deg, #00000000 0%, #00000000 20%, #00000000 43%, #f9f4b4ff 50%, #00000000 57%, #00000000 80%, #00000000 100%), linear-gradient(0deg, rgb(193 132 17) 0%, rgb(161 120 58) 50%, #c99322 100%), linear-gradient(30deg, #96702b 40%, #ffd381 50%, #96702b 60%);
     animation: shine 8s linear infinite;
 }
 
 #ssvideosubtitle {
     max-width: 29em;
     bottom: -2em;
     position: relative;
     z-index: 4;
     margin-left: auto;
     margin-right: auto;
     user-select: none;
     rotate: -4deg;
 }
 
 @media (min-width:576px) {
     #ssvideosubtitle {
         rotate: 0deg;
     }
 }
 
 #ssvideosubtitletop {
     max-width: 29em;
     top: -2em;
     position: relative;
     z-index: 3;
     rotate: 6deg;
     margin-left: auto;
     margin-right: auto;
     user-select: none;
 }
 
 @media (min-width:576px) {
     #ssvideosubtitletop {
         rotate: 0deg;
 
     }
 }
 
 .close {
     position: absolute;
     right: -30px;
     top: 0;
     z-index: 999;
     font-size: 2rem;
     font-weight: normal;
     color: #fff;
     opacity: 1;
 }
 
 .ssourshowsubtitlesmall {
 
     font-size: 0.8em;
 
     color: #c5dbeb;
 }
 
 .ss-honorable {
 
     position: relative;
 
     background: linear-gradient(#3f3f3fb3, #ffffff91), url(../img/showcasebg.jpg) center center, linear-gradient(226deg, #838383, #939393, #a3a3a3, #b3b3b3, #b0b0b0, #9a9a9a, #858585, #717171);
 
     background-blend-mode: overlay, color-burn;
 
     background-position: center top;
 
     background-size: auto, auto, 100%;
 
     /* padding-top: 6rem !important; */
 
     /* margin-top: -5em; */
 
     margin-bottom: -5em;
 
     /* bottom: -5em; */
 
     /* z-index: 0; */
 
     /* padding-bottom: 12em !important; */
 
     /* background-color: #000000; */
 
     padding-bottom: 1rem !important;
 
     color: #433e39;
 
     font-weight: 500;
 }
 
 
 .ss-musicvideos {
 
     background-color: rgb(175, 175, 175);
 
 
 }
 
 .ss-experimental {
 
     background-color: grey;
 
     padding-top: 1rem !important;
 
 }
 
 
 
 #ssourshowssubtitlecontainer {
     margin-left: 1em;
     margin-right: 1em;
 
 }
 
 #cmprojectsshowssubtitlecontainer {
     margin-left: 1em;
     margin-right: 1em;
     filter: drop-shadow(2px 8px 0px #00000029);
 }
 
 .ssourshowsubtitlebig {
 
     font-size: 1em;
 
 }
 
 @keyframes floatUp {
     0% {
         transform: translateY(0vh);
 
     }
 
 
     100% {
         transform: translateY(-100vh);
 
     }
 }
 
 @keyframes scaleUp {
     0% {
         scale: 0;
     }
 
     2% {
         scale: 1.5;
 
     }
 
     4% {
         scale: 1;
 
     }
 
     96% {
         scale: 1;
 
     }
 
     100% {
         scale: 1;
 
     }
 }
 
 #ssourshowssubtitle {
     font-family: 'Open Sans';
     font-weight: bold;
     font-size: 1.2em;
     padding: 0.5em;
     FONT-VARIANT: JIS83;
     text-align: center;
     color: #ffffff;
     /* display: none; */
     /* background-image: linear-gradient(0deg, #ffffff, #d72a27); */
     display: flex;
     flex-direction: column;
     width: 100%;
     /* margin-top: -2em; */
     width: fit-content;
     margin-left: auto;
     margin-right: auto;
     background-color: #2475b8;
     border-radius: 1em;
 }
 
 #ssourshowstitle {
     width: 80%;
     margin-top: auto;
     margin-right: auto;
     z-index: 1;
     user-select: none;
     margin-left: auto;
     /* filter: drop-shadow(0px 3px 2px rgba(1,1,1,0.25)); */
 }
 
 @media(min-width:768px) {
     #ssourshowstitle {
         width: 50%;
     }
 
     .ssourshowsubtitlebig {
 
         font-size: 1.2em;
 
     }
 
 }
 
 @keyframes scorepoof {
     0% {
         transform: translateY(0vh) scale(0);
         opacity: 0;
     }
 
     10% {
         transform: translateY(-1vh) scale(1);
         opacity: 1;
     }
 
     71% {
         transform: translateY(-7vh) scale(1.2);
         opacity: 1;
     }
 
     100% {
         transform: translateY(-10vh) scale(1.5);
         opacity: 0;
 
     }
 
 
 }
 
 .scorevalue {
     position: absolute;
     z-index: 3999;
     color: white;
     font-family: Acme;
     font-size: 2em;
     animation: scorepoof 1s forwards linear;
     user-select: none;
     pointer-events: none;
 }
 
 #vertalign {
     display: flex;
     flex-direction: column;
     justify-content: center;
     height: 100%;
     user-select: none;
 }
 
 #scoretopright {
 
     display: flex;
 
     position: fixed;
 
     right: 0;
 
     top: 0;
 
     padding: 2em;
 
     /* background: blue; */
 
     justify-content: right;
 
     gap: 1em;
 }
 
 #score {
     /* position: fixed; */
     /* z-index: 3599; */
     top: 0;
     right: 0;
     /* margin: 0.2em; */
     color: white;
     font-weight: bold;
     /* margin-right: 3em; */
     /* height: 100%; */
     text-align: right;
     vertical-align: middle;
     font-size: 2em;
 }
 
 #scorebuttons {
     display: flex;
     justify-content: center;
     /* width: 250px; */
     gap: 1em;
 }
 
 .finalscoretextcontainer {
     display: flex;
     flex-direction: column;
 }
 
 .finalscoretext {
     color: white;
     font-weight: bold;
     text-transform: uppercase;
     font-size: 2em;
     text-align: center;
 }
 
 #finalscore {
     font-size: 5em;
     font-weight: bold;
     color: #ffee00;
     text-align: center;
 }
 
 #dimoverlay {
     width: 100%;
     height: 100%;
     background: #24313fde;
     position: fixed;
     top: 0;
     z-index: 3500;
     user-select: none;
 }
 
 #tryagaincontainer {
     position: fixed;
     left: 50%;
     transform: translate(-50%, -50%);
     top: 50%;
     /* width: 20em; */
     /* height: 10em; */
     /* background-color: blue; */
     z-index: 3999;
 }
 
 #tryagainbutton {
     border-radius: 5px;
     /* width:2em; */
     padding: 0.2em;
     /* height:2em; */
     background-color: #007bff;
     /* position:fixed; */
     z-index: 3599;
     /* top:0; */
     /* right:0; */
     /* margin:1em; */
     /* background-image: url("../img/delete2.svg"); */
     background-size: 80%;
     background-position: center;
     background-repeat: no-repeat;
     box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25);
     cursor: pointer;
     color: white;
     font-weight: bold;
     font-size: 1.5em;
     user-select: none;
 }
 
 #tryagainbutton:hover {
     background-color: #3b9aff;
 }
 
 #tryagainbutton:active {
     background-color: #a0ceff;
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
 }
 
 #nahbutton {
     border-radius: 5px;
     /* width: 2em; */
     padding: 0.2em;
     /* height: 2em; */
     background-color: #a00000;
     /* position: fixed; */
     z-index: 3599;
     /* top: 0; */
     /* right: 0; */
     /* margin: 1em; */
     /* background-image: url(../img/delete2.svg); */
     background-size: 80%;
     background-position: center;
     background-repeat: no-repeat;
     box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25);
     cursor: pointer;
     color: white;
     font-weight: bold;
     font-size: 1.5em;
     user-select: none;
 }
 
 #nahbutton:hover {
     background-color: rgb(209, 52, 52);
 }
 
 #nahbutton:active {
     background-color: rgb(236, 102, 102);
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
 }
 
 #dimcancelbutton {
     border-radius: 5px;
     width: 2em;
     padding: 2em;
     height: 2em;
     background-color: rgb(160, 0, 0);
     /* position:fixed; */
     z-index: 3599;
     /* top:0; */
     /* right:0; */
     /* margin:1em; */
     background-image: url("../img/delete2.svg");
     background-size: 80%;
     background-position: center;
     background-repeat: no-repeat;
     box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25);
     cursor: pointer;
 }
 
 #dimcancelbutton:hover {
     background-color: rgb(209, 52, 52);
 }
 
 #dimcancelbutton:active {
     background-color: rgb(236, 102, 102);
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
 }
 
 .largertext {
 
     font-size: 1.2em;
 }
 
 .ss-videorow {
 
     padding-left: 4em;
 
     padding-right: 4em;
 
     margin-top: -1em;
 
     /* filter: drop-shadow(5px 5px 0px rgba(255, 168, 0, 0.75)); */
 }
 
 .ss-videorowvn {
 
     padding-left: 4em;
 
     padding-right: 4em;
 
     margin-top: -1em;
 
     filter: drop-shadow(-8px 13px 8px rgba(0, 0, 0, 0.5));
 
     margin-bottom: 2em;
 }
 
 /* @media (min-width:992px) {
         .ss-videorow {
             padding-left: 0;
     
             padding-right: 0;
         }
     
         .ss-videorowvn {
             padding-left: 4em;
     
             padding-right: 4em;
         }
     } */
 
 .ssvid {
     /* box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.479); */
     width: 100%;
     height: 100%;
     user-select: none;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 .ssvid:hover {
     transform: scale(1.5);
     cursor: pointer;
     z-index: 5;
     /* box-shadow: 0px 10px 5px rgba(0, 0, 0, 0.479);; */
 }
 
 .ssvid:active {
     transform: scale(1.4);
 
     /* box-shadow: 0px 7px 4px rgba(0, 0, 0, 0.479) */
 }
 
 .ssvida {
     background: url("../img/playcircle.svg"), url(http://i3.ytimg.com/vi/7lN7dpOdWcY/hqdefault.jpg);
     rotate: -6deg;
     transform: scale(1.15);
     z-index: 0;
     /* border-radius: 0.5em; */
     background-size: 40%, cover;
     background-repeat: no-repeat;
     background-position: center;
 
     filter: contrast(0.9);
     clip-path: polygon(2% 5%, 95% 0%, 95% 100%, 0% 100%);
 }
 
 .ssvidb {
     background: url("../img/playcircle.svg"), url("http://i3.ytimg.com/vi/xqvpWTQbCM8/hqdefault.jpg");
     rotate: 2deg;
     transform: scale(1.25);
     z-index: 3;
     /* border-radius: 0.5em; */
     background-size: 40%, cover;
     background-repeat: no-repeat;
     background-position: center;
     filter: contrast(0.9);
     clip-path: polygon(0% 0%, 97% 4%, 95% 98%, 3% 100%);
 }
 
 .ssvidc {
     rotate: 354deg;
     transform: scale(1.2);
     z-index: 2;
     /* border-radius: 0.5em; */
     background: url("../img/playcircle.svg"), url(http://i3.ytimg.com/vi/DiJJHIzUSPs/hqdefault.jpg);
     background-size: 40%, cover;
     background-repeat: no-repeat;
     background-position: center;
     filter: contrast(0.9);
     clip-path: polygon(0% 0%, 96% 0%, 100% 97%, 0% 95%);
 }
 
 .ssvidd {
     z-index: 1;
     rotate: 359deg;
     transform: scale(1);
     background-color: #ffe795;
     background-image: url("../img/morevideos.webp");
     background-size: cover;
     background-position: center;
     clip-path: polygon(0% 0%, 96% 0%, 100% 97%, 0% 95%)
 }
 
 .ssvgvida {
     background: url("../img/playcircle.svg"), url("http://i3.ytimg.com/vi/CleUrqPLCzU/hqdefault.jpg");
     rotate: -6deg;
     transform: scale(1.15);
     z-index: 0;
     /* border-radius: 0.5em; */
     background-size: 40%, cover;
     background-repeat: no-repeat;
     background-position: center;
     filter: contrast(0.9);
     clip-path: polygon(2% 5%, 95% 0%, 95% 100%, 0% 100%);
 }
 
 .ssvgvidb {
     background: url("../img/playcircle.svg"), url("http://i3.ytimg.com/vi/1hoSYvwnv_E/hqdefault.jpg");
     rotate: -3deg;
     transform: scale(1.25);
     z-index: 2;
     /* border-radius: 0.5em; */
     background-size: 40%, cover;
     background-repeat: no-repeat;
     background-position: center;
     filter: contrast(0.9);
     clip-path: polygon(0% 0%, 97% 4%, 95% 98%, 3% 100%);
 }
 
 .ssvgvidc {
     rotate: 368deg;
     transform: scale(1.2);
     z-index: 2;
     /* border-radius: 0.5em; */
     background: url("../img/playcircle.svg"), url("http://i3.ytimg.com/vi/tFPcx4X9-e8/hqdefault.jpg");
     background-size: 40%, cover;
     background-repeat: no-repeat;
     background-position: center;
     filter: contrast(0.9);
     clip-path: polygon(0% 0%, 100% 0%, 100% 97%, 0% 95%);
 }
 
 
 .ssvgvidd {
     z-index: 1;
     rotate: 353deg;
     transform: scale(1);
     background-color: #ffe795;
     background-image: url("../img/morevideos.webp");
     background-size: cover;
     background-position: center;
     clip-path: polygon(0% 0%, 100% 0%, 100% 97%, 0% 95%);
 }
 
 .ssmvvida {
     background: url("../img/playcircle.svg"), url("http://i3.ytimg.com/vi/8hyk6yxSK_w/hqdefault.jpg");
     rotate: 4deg;
     transform: scale(1.15);
     z-index: 0;
     /* border-radius: 0.5em; */
     background-size: 40%, cover;
     background-repeat: no-repeat;
     background-position: center;
     filter: contrast(0.9);
     clip-path: polygon(0% 0%, 98% 1%, 100% 99%, 0% 100%);
 }
 
 .ssmvvidb {
     background: url("../img/playcircle.svg"), url("http://i3.ytimg.com/vi/CNeW3BbZc9Q/hqdefault.jpg");
     rotate: -1deg;
     transform: scale(1.25);
     z-index: 2;
     /* border-radius: 0.5em; */
     background-size: 40%, cover;
     background-repeat: no-repeat;
     background-position: center;
     filter: contrast(0.9);
     clip-path: polygon(0% 0%, 100% 3%, 100% 98%, 2% 99%);
 }
 
 .ssmvvidc {
     rotate: 3deg;
     transform: scale(1.2);
     z-index: 2;
     /* border-radius: 0.5em; */
     background: url("../img/playcircle.svg"), url("http://i3.ytimg.com/vi/9e5tNkNgzL4/hqdefault.jpg");
     background-size: 40%, cover;
     background-repeat: no-repeat;
     background-position: center;
     filter: contrast(0.9);
     clip-path: polygon(2% 0%, 99% 3%, 100% 98%, 0% 100%);
 }
 
 
 .ssegvida {
     background: url("../img/playcircle.svg"), url("http://i3.ytimg.com/vi/anoO3K5vOEg/hqdefault.jpg");
     rotate: 6deg;
     transform: scale(1.15);
     z-index: 0;
     /* border-radius: 0.5em; */
     background-size: 40%, cover;
     background-repeat: no-repeat;
     background-position: center;
     filter: contrast(0.9);
     clip-path: polygon(2% 5%, 95% 0%, 95% 100%, 0% 100%);
 }
 
 .ssegvidb {
     background: url("../img/playcircle.svg"), url("http://i3.ytimg.com/vi/Klc728qggic/hqdefault.jpg");
     rotate: 349deg;
     transform: scale(1.25);
     z-index: 2;
     /* border-radius: 0.5em; */
     background-size: 40%, cover;
     background-repeat: no-repeat;
     background-position: center;
     filter: contrast(0.9);
     clip-path: polygon(0% 0%, 97% 4%, 95% 98%, 3% 100%);
 }
 
 .ssegvidc {
     rotate: 368deg;
     transform: scale(1.2);
     z-index: 2;
     /* border-radius: 0.5em; */
     background: url("../img/playcircle.svg"), url(http://i3.ytimg.com/vi/n2cOZsgO0OI/hqdefault.jpg);
     background-size: 40%, cover;
     background-repeat: no-repeat;
     background-position: center;
     filter: contrast(0.9);
     clip-path: polygon(0% 0%, 100% 0%, 100% 97%, 0% 95%);
 }
 
 .ssegvidd {
     z-index: 1;
     rotate: 346deg;
     transform: scale(1);
     background-color: #ffe795;
     background-image: url("../img/morevideos.webp");
     background-size: cover;
     background-position: center;
     clip-path: polygon(0% 0%, 100% 0%, 100% 97%, 0% 95%);
 }
 
 
 
 
 
 
 
 
 .ssvidacont {
     display: flex;
     overflow: visible;
     margin-left: auto;
     margin-right: auto;
 }
 
 .ssvidbcont {
     display: flex;
     overflow: visible;
     margin-left: auto;
     margin-right: auto;
 }
 
 .ssvidccont {
     display: flex;
     overflow: visible;
     margin-left: auto;
     margin-right: auto;
 }
 
 .ssviddcont {
     display: flex;
     overflow: visible;
 
 }
 
 .ss-crackcont {
 
     rotate: 5deg;
 }
 
 .ss-crackinnercont {
     filter: drop-shadow(8px 13px 0px rgba(255, 168, 0, 0.75));
 }
 
 .ss-shows {
     padding-top: 9em !important;
     /* background: linear-gradient(327deg, #ffb70078, #ffffff); */
     /* background: linear-gradient(327deg, #3e4859, #000000); */
     background: url("../img/waveA.svg"), url("../img/waveB.svg"), url("../img/waveC.svg");
     background-color: #dbe7f3;
     /* Image fills the div's width, adjusts height automatically */
     background-repeat: repeat-x;
     background-size: 110em 41em, 65em 41em, 29em 41em;
     background-position-x: 0em, 0em, 0em;
     background-position-y: -400%, -200%, -150%;
     animation: wavesUp 1s cubic-bezier(.07, .65, .36, 1) forwards, waves 20s linear infinite;
     /* Animate the background */
     padding-bottom: 1rem !important;
 }
 
 @keyframes waves {
     from {
         background-position-x: 55em, 0em, 0em;
     }
 
     to {
         background-position-x: 275em, 130em, 58em;
     }
 }
 
 @keyframes wavesUp {
     to {
         background-position-y: -70%, -70%, -70%;
     }
 }
 
 
 .ss-villagernews {
     padding-top: 10em !important;
     background-image: radial-gradient(circle, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.17130602240896353) 58%, rgba(0, 0, 0, 0.5) 100%), url("../img/ss_vnbg576.webp");
     background-position-x: center;
     background-position-y: top;
     background-size: auto, 100%;
     background-repeat: repeat-x;
     background-color: #878483;
     color: #271d15;
 }
 
 .ss-crack {
     /* padding-top: 16em !important; */
     background-image: url("../img/ss_crackbg576.webp"), url("../img/cracktile.webp");
     background-position-x: center;
     background-position-y: top;
     background-repeat: no-repeat, repeat;
     background-size: 100%, cover;
     color: #d5bc70;
 }
 
 .ss-eggsguide {
     padding-top: 10em !important;
     padding-bottom: 10em !important;
     background-image: url("../img/ss_egbg576.webp");
     background-color: #122a3d;
     background-position-x: center;
     background-position-y: top;
     background-repeat: no-repeat, repeat;
     background-size: 100%;
     color: #c4d2dd;
 }
 
 .ss-musicvideos {
     padding-top: 10em !important;
     padding-bottom: 10em !important;
     background-image: url("../img/ss_musicvidsbg576.webp");
     background-color: #1b100d;
     background-position-x: center;
     background-position-y: top;
     background-repeat: no-repeat, repeat;
     background-size: 100%;
     color: #ffda86;
 }
 
 @media (min-width:576px) {
 
     .ss-crack {
         /* padding-top: 16em !important; */
         background-image: url("../img/ss_crackbg.webp"), url("../img/cracktile.webp");
         background-position-x: center;
         background-position-y: center;
         background-repeat: no-repeat, repeat;
         background-size: cover;
         color: #d5bc70;
     }
 
     .ss-villagernews {
         padding-top: 10em !important;
         background-image: radial-gradient(circle, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.17130602240896353) 58%, rgba(0, 0, 0, 0.5) 100%), url("../img/ss_vnbg.webp");
         background-position-x: center;
         background-position-y: top;
         background-size: auto, 2310px;
         background-repeat: repeat-x;
         background-color: #878483;
         color: #2d2d2d;
     }
 
     .ss-eggsguide {
         padding-top: 10em !important;
         padding-bottom: 10em !important;
         background-image: url("../img/ss_egbg.webp");
         background-color: #122a3d;
         background-position-x: center;
         background-position-y: center;
         background-repeat: no-repeat, repeat;
         background-size: cover;
         color: #c4d2dd;
     }
 
     .ss-musicvideos {
         padding-top: 10em !important;
         padding-bottom: 10em !important;
         background-image: url("../img/ss_musicvidsbg.webp");
         background-color: #1b100d;
         background-position-x: center;
         background-position-y: top;
         background-repeat: no-repeat, repeat;
         background-size: auto;
         color: #ffda86;
     }
 }
 
 .ss-eggsguidecont {
 
     /* rotate: 5deg; */
 }
 
 .ss-eggsguideinnercont {
     /* filter: drop-shadow(8px 13px 0px rgba(255, 168, 0, 0.75)); */
 }
 
 
 
 .ss-villagernewscont {
 
     rotate: -2deg;
 }
 
 .ss-villagernewsinnercont {
     filter: drop-shadow(-8px 13px 8px rgba(0, 0, 0, 0.5));
 }
 
 
 .ss-villagernewstextfield {
 
     background: url("../img/wood.webp");
 
     padding: 2em !important;
 
     margin-left: 2em;
 
     margin-right: 2em;
 
     /* font-weight: bold; */
 
     color: #000000;
 
     background-size: 74%;
 
     font-family: Silkscreen;
 
     font-size: 1.2em;
 
     line-height: 1;
 
     letter-spacing: -0.1em;
 
     clip-path: polygon(2% 0%, 97% 0%, 99% 100%, 0% 100%);
 }
 
 .ss-villagernewstextfield b {
     font-size: 1.2em;
 
 }
 
 .ss-honorabletext {
     /* background: linear-gradient(45deg, #005885, #00caf7); */
     /* padding-top: 2em !important; */
     /* padding-right: 2em !important; */
     /* padding-bottom: 3em !important; */
     /* padding-left: 2em !important; */
     margin-left: 2em;
     margin-right: 2em;
     /* font-weight: bold; */
     /* color: #ffffff; */
 }
 
 .ss-eggsguidetextfield {
 
     /* background: linear-gradient(45deg, #005885, #00caf7); */
 
     padding-top: 2em !important;
 
     padding-right: 2em !important;
 
     padding-bottom: 3em !important;
 
     padding-left: 2em !important;
 
     margin-left: 2em;
 
     margin-right: 2em;
 
     font-weight: bold;
 
     color: #ffffff;
 
     font-size: 0.95em;
 
     /* border-radius: 0.5em; */
 
     /* box-shadow: 6px 10px 0px 0px #00000075; */
 
     /* rotate: 5deg; */
 
     /* clip-path: polygon(0% -3%, 10% 10%, 1% 1%,5% 5%); */
 
     /* clip-path: polygon(0 0, 99% 5%, 93% 100%, 3% 100%); */
 
     /* filter: drop-shadow(2px 4px 6px black); */
 
     /* filter: drop-shadow(6px 6px 0px rgba(255, 168, 0, 0.75)); */
 }
 
 .ss-cracktextfield {
 
     background: linear-gradient(45deg, #005885, #00caf7);
 
     padding-top: 2em !important;
 
     padding-right: 2em !important;
 
     padding-bottom: 3em !important;
 
     padding-left: 2em !important;
 
     margin-left: 2em;
 
     margin-right: 2em;
 
     font-weight: bold;
 
     color: #ffffff;
 
     /* border-radius: 0.5em; */
 
     /* box-shadow: 6px 10px 0px 0px #00000075; */
 
     /* rotate: 5deg; */
 
     /* clip-path: polygon(0% -3%, 10% 10%, 1% 1%,5% 5%); */
 
     clip-path: polygon(0 0, 99% 5%, 93% 100%, 3% 100%);
 
     /* filter: drop-shadow(2px 4px 6px black); */
 
     /* filter: drop-shadow(6px 6px 0px rgba(255, 168, 0, 0.75)); */
 }
 
 .mvcolA {
     order: 2
 }
 
 .mvcolB {
     order: 1
 }
 
 .mvcolC {
     order: 3
 }
 
 @media (min-width:992px) {
     .mvcolA {
         order: 1
     }
 
     .mvcolB {
         order: 2
     }
 
     .mvcolC {
         order: 3
     }
 
     .musicvidsright {
         width: 100%;
         gap: 1em;
     }
 
     .ss-eggsguide {
 
         background-position-x: center;
 
         background-position-y: top, center;
 
         background-repeat: no-repeat, repeat;
 
         background-size: auto;
     }
 
     .ss-crack {
 
         background-position-x: center;
 
         background-position-y: top, center;
 
         background-repeat: no-repeat, repeat;
 
         background-size: auto;
     }
 
 }
 
 .navbar-toggler-icon {
     background: url("../img/burger.svg") !important;
 
 }
 
 button:focus {
     outline: none;
 }
 
 @font-face {
     font-family: 'Century Gothic Bold';
     src: url('../CenturyGothic-Bold.eot');
     src: url('../CenturyGothic-Bold.eot?#iefix') format('embedded-opentype'),
         url('../CenturyGothic-Bold.woff') format('woff'),
         url('../CenturyGothic-Bold.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Avant Garde';
     src: url('../avant-garde.eot');
     src: url('../avant-garde.eot?#iefix') format('embedded-opentype'),
         url('../avant-garde.woff') format('woff'),
         url('../avant-garde.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
 
 .navbar {
     padding: 0;
 }
 
 .navbar-brand {
 
     padding: .5rem 1rem;
 
     z-index: 1;
 }
 
 .navbar-nav {
     margin: 0.25em;
 }
 
 .nav-item {
     /* background:rgb(94, 183, 255); */
 
 }
 
 
 .navbar-collapse {
     z-index: 1 !important;
     margin-top: 0em;
     position: relative;
 }
 
 .navbar-collapse.show {
     background-color: #3e6586;
     margin-top: -12em;
     position: relative;
     z-index: 0 !important;
     padding: 1em;
     padding-top: 12em;
 }
 
 .navbar-collapse.collapsing {
 
     background-color: #3e6486;
     margin-top: -12em;
     position: relative;
     z-index: 0 !important;
     padding: 1em;
     padding-top: 12em;
 }
 
 
 .danimage {}
 
 .navbar-toggler {
     background-color: #5995c9;
     padding: 0.25em;
     margin: 0.5em;
     border: none;
     z-index: 1;
 }
 
 .navbar-toggler:hover {
     /* background-color: #4e96cd; */
     filter: brightness(1.1)
 }
 
 .navbar-toggler:active {
 
     border: none !important;
 
 }
 
 .commbg {
     background: #e3e3e3;
 }
 
 .flexcentervert {
 
     display: flex;
 
     flex-direction: column;
 
     justify-content: center;
 }
 
 .vnlogo {
     /* background:url(../img/vn_logo.webp); */
     position: absolute;
     top: -9999px;
     bottom: -9999px;
     left: -9999px;
     right: -9999px;
     margin: auto;
 }
 
 .vnlogocont {}
 
 .vntext {
     padding-bottom: auto !important;
 }
 
 .wideappear {
     display: none
 }
 
 .thinappear {
     display: flex
 }
 
 .coinad {
     /* height: 9em; */
     rotate: -5deg;
     width: 75% !important;
     background: #ffd600;
     border-radius: 1.25em;
     color: #ff5500 !important;
     margin-bottom: 0em !important;
 }
 
 .coinad:hover {
     filter: brightness(1.1);
     cursor: pointer;
 }
 
 .coinsimg {
     width: 209%;
     position: absolute;
     /* top: -11em; */
     /* left: -50%; */
     z-index: -1;
     position: absolute;
     top: -9999px;
     bottom: -9999px;
     left: -9999px;
     right: -9999px;
     margin: auto;
 }
 
 .youtube-video {
     aspect-ratio: 16 / 9;
     width: 100%;
     border-radius: 0.5em;
     filter: drop-shadow(6px 8px 0px rgba(0, 0, 0, 0.2));
     margin-bottom: 3em;
 }
 
 .mp_video_container {}
 
 .mp_video_containercol {
     margin-top: auto;
     margin-bottom: auto;
 }
 
 #names-container {
     width: 100%;
     height: 20px;
     position: fixed;
     bottom: 0px;
     z-index: 4000;
     /* background: blue; */
 }
 
 #name {
     position: absolute;
     bottom: 0;
     font-size: 20px;
     /* opacity: 0; */
     /* animation: floatUp 3s forwards; */
     padding: 0.5em;
     background: #5995c9;
     color: white;
     font-weight: bold;
     font-family: "Century Gothic", "Open Sans", sans-serif;
     border-radius: 0.25em;
     /* rotate: 0deg; */
     cursor: pointer;
     user-select: none;
     filter: drop-shadow(0px 5px 5px #00000056);
 }
 
 #name:hover {
     filter: brightness(1.4);
 }
 
 
 .hiddenstat {}
 
 .h1patrons {
     color: white;
     text-shadow: 0 0 8px white;
 }
 
 .stats {
     /* justify-content: center; */
 
 }
 
 .bolder {}
 
 #ourshows {
     z-index: 4;
     position: relative;
     width: 13em;
     transform: translate(13%, -5em);
     rotate: 5deg;
     filter: drop-shadow(0px 4px 0px #a54a00);
 }
 
 .statsboxfactoidcontainer {
     padding: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
 .statsboxcontainer {
     display: flex;
     flex-direction: column;
     gap: 0.4em;
     height: 100%;
     justify-content: center;
 }
 
 .statsboxtexta {
     display: none;
     color: #a7a7a7;
     margin-left: auto;
     margin-right: auto;
     /* text-align: justify; */
     /* padding-left: 1em; */
     padding: 1em;
     margin-top: 1em;
     /* padding-right: 1em; */
 }
 
 .statsboxtextb {
     display: block;
     color: #a7a7a7;
     margin-left: auto;
     margin-right: auto;
     /* text-align: justify; */
     /* padding-left: 1em; */
     padding: 1em;
     /* padding-right: 1em; */
 }
 
 .statsbox {
     transition: 1s !important;
     background: #d3d3d3;
     width: 100%;
     padding: 0.3em;
     border-radius: 0.5em;
     display: flex;
     padding-left: 1em;
     padding-right: 1em;
 }
 
 .statsboxicona {
     background: url("../img/audience.svg");
     background-position: center;
     background-size: 50%;
     background-repeat: no-repeat;
 }
 
 .statsboxiconb {
     background: url("../img/clock.svg");
     background-position: center;
     background-size: 50%;
     background-repeat: no-repeat;
 }
 
 .statsboxiconc {
     background: url("../img/playcircle.svg");
     background-position: center;
     background-size: 50%;
     background-repeat: no-repeat;
 }
 
 .statsboxa {
     background: linear-gradient(135deg, hsl(201 58% 62% / 1) -20%, hsl(201 80% 60% / 1) 20%, hsl(201 66% 48% / 1) 50%);
     color: #00427c;
 }
 
 .statsboxa .statsboxnumber {
     background: none;
     color: #ffffff;
 }
 
 .statsboxb {
     background: linear-gradient(135deg, hsl(132 58% 62% / 1) -20%, hsl(132deg 79.8% 59.93%) 20%, hsl(132deg 65.72% 48.33%) 50%);
     color: #005d3f;
 }
 
 .statsboxb .statsboxnumber {
     background: none;
     color: #ffffff;
     ;
 }
 
 
 .statsboxc {
     background: linear-gradient(135deg, hsl(0deg 58% 62%) -20%, hsl(0deg 100% 70.64%) 20%, hsl(0deg 71.39% 60.05%) 50%);
     color: #770000;
 }
 
 .statsboxc .statsboxnumber {
     background: none;
     color: #ffffff;
 }
 
 .statsboxnumber {
     background: #b1b1b1;
     width: fit-content;
     border-radius: 5px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 0.5em;
 }
 
 .statsboxnumbernumber {
     font-size: 1.5em;
     font-weight: bold;
     font-family: "Century Gothic", "Open Sans", sans-serif;
     /* color: grey; */
     width: 100%;
     /* height: 1em; */
     line-height: 1em;
     text-align: left;
     text-shadow: 0 0 9px white;
 }
 
 .statsboxnumberdesc {
     font-size: 1em;
     font-weight: bold;
     /* font-family: "Century Gothic", "Open Sans", sans-serif; */
     /* color: grey; */
     width: 100%;
     text-align: left;
     line-height: 0.8em;
 }
 
 .statsboxfactoid {
     height: fit-content;
     /* background: blue; */
     padding-top: 1em;
     padding-right: 0;
     padding-bottom: 1em;
     padding-left: 0;
     font-weight: bold;
     /* color: #818181; */
 }
 
 #ourshows img {
     width: 100%;
     height: 100%;
 }
 
 .ossection {
 
     z-index: 5;
 
     position: relative;
 
     height: 0;
 }
 
 .spbg {
     background: url("../img/tilebg.svg");
     background-color: #4273a5;
     background-blend-mode: hard-light;
     background-size: 79em;
     background-position: 48.7% center;
 }
 
 section.mask.spbg {}
 
 .hidden {
     opacity: 0;
     transition: none;
     transform: translateX(-90%);
     transition-timing-function: ease-in;
 }
 
 .hiddenonce {
     opacity: 0;
     transition: none;
     transform: translateX(-90%);
     transition-timing-function: ease-in;
 
 }
 
 .hideslow {
 
     transition: 0.25s !important;
 }
 
 .offset100 {
 
     transition-delay: 100ms !important;
 
 }
 
 .offset200 {
 
     transition-delay: 200ms !important;
 
 }
 
 .offset400 {
 
     transition-delay: 400ms !important;
 
 }
 
 .hiddenup {
     transform: translateY(-40%);
 }
 
 .hiddenright {
     transform: translateX(40%);
 }
 
 .hiddenleft {
     transform: translateX(-40%);
 }
 
 @media(prefers-reduced-motion) {
     .hidden {
         transition: none;
     }
 
 }
 
 .show {
     transition: all 0.2s;
     opacity: 1;
     transform: translateX(0);
     transform: translateY(0);
     transform: translateZ(0);
 }
 
 
 .showposter {
     padding: 0;
     transition: all 0s;
 
 }
 
 .flatten {
     height: 0;
 }
 
 #showposters {
     height: 450px;
 }
 
 @media(min-width:400px) {
 
     #showposters {
         height: 600px;
     }
 
 }
 
 @media(min-width:600px) {
 
     #showposters {
         height: 800px;
     }
 
 }
 
 @media(min-width:992px) {
 
     .wideappear {
         display: flex
     }
 
     .thinappear {
         display: none
     }
 
 
     .showposter {
 
         transition: all 0.2s;
 
     }
 
     .showposter:nth-child(1) {
         transition-delay: 300ms;
     }
 
     .showposter:nth-child(2) {
         transition-delay: 200ms;
     }
 
     .showposter:nth-child(3) {
         transition-delay: 100ms;
     }
 
     .showposter:nth-child(4) {
         transition-delay: 0ms;
     }
 
 }
 
 .shows_box {
 
     height: 100%;
 }
 
 .shows_box_inner {}
 
 
 .shows_box_a {
     transition: all 0.2s !important;
     background-image: url('../img/crackbg.webp');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     width: 100%;
     height: 100%;
 
     background-origin: content-box;
     /* opacity: 0.8; */
 }
 
 .shows_box_a:hover {
     background-size: cover;
     cursor: pointer;
     opacity: 1;
 }
 
 .sba_fg {
     transition: all 0.2s !important;
     background-image: url('../img/crack_full.webp');
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     transform: translateY(2em);
 }
 
 
 
 
 .shows_box_b {
     transition: all 0.2s !important;
     background-image: url('../img/vn_bg.webp');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     width: 100%;
     height: 100%;
 
     background-origin: content-box;
     /* opacity: 0.8; */
 }
 
 .shows_box_b:hover {
     background-size: cover;
     cursor: pointer;
     opacity: 1;
 }
 
 .sbb_fg {
     transition: all 0.2s !important;
     background-image: url('../img/vn_full.webp');
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
 }
 
 
 
 .shows_box_c {
     transition: all 0.2s !important;
     background-image: url('../img/eg_bg.webp');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     width: 100%;
     height: 100%;
 
     background-origin: content-box;
     /* opacity: 0.8; */
 
 }
 
 .shows_box_c:hover {
     background-size: cover;
     cursor: pointer;
     opacity: 1;
 }
 
 .sbc_fg {
     transition: all 0.2s !important;
     background-image: url('../img/eg_full.webp');
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
 }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 .shows_box_d {
     transition: all 0.2s !important;
     background-image: url('../img/ew_bg.webp');
     background-size: cover;
     background-position: 50% center;
     background-repeat: no-repeat;
     width: 100%;
     height: 100%;
     filter: blur(0.5);
     /* opacity: 0.8; */
 }
 
 .sbd_fg {
     transition: all 0.2s !important;
     background-image: url('../img/ew_full.webp');
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
 
 }
 
 .shows_box_d:hover {
     cursor: pointer;
     opacity: 1;
 }
 
 
 
 
 @media(min-width:992px) {
     .statsboxtexta {
         display: block
     }
 
     .statsboxtextb {
         display: none;
     }
 
     #ourshows {
         z-index: 3;
         position: relative;
         width: 18em;
         transform: translate(11em, -6em);
         rotate: 5deg;
     }
 
     #showposters {
         height: 400px;
     }
 
     .shows_box_a {
         transition: all 0.2s !important;
         background-image: url('../img/crackbg.webp');
         background-size: cover;
         background-position: 50% center;
         background-repeat: no-repeat;
         width: 100%;
         height: 100%;
         filter: blur(0.5);
         background-origin: content-box;
         padding: 0;
         /* opacity: 0.8; */
         /* filter: grayscale(0.5); */
     }
 
     .shows_box_a:hover {
         background-size: cover;
         cursor: pointer;
         background-position: 50% center;
         padding: 3em;
         opacity: 1;
     }
 
     .sba_fg {
         transition: all 0.2s !important;
         background-image: url('../img/crackeggs.webp');
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center;
         transform: translate(1%, -5%) scale(1.1);
     }
 
     .shows_box_a:hover .sba_fg {
         transform: translate(-1%, 1%) scale(0.95);
     }
 
     .sba_logo {
         transition: all 0.2s !important;
         background-image: url('../img/cracklogo.webp');
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center;
         transform: translate(11%, -34%) scale(1.0);
         opacity: 0;
         background-origin: content-box;
         padding: 0;
     }
 
     .shows_box_a:hover .sba_logo {
         transform: translate(3%, -13%) scale(0.85);
         opacity: 1;
     }
 
 
 
 
     .shows_box_b {
         transition: all 0.2s !important;
         background-image: url('../img/vn_bg.webp');
         background-size: cover;
         background-position: 50% center;
         background-repeat: no-repeat;
         width: 100%;
         height: 100%;
         filter: blur(0.5);
         background-origin: content-box;
         padding: 19% 32% 19% 19%;
         /* opacity: 0.8; */
     }
 
     .shows_box_b:hover {
         background-size: cover;
         cursor: pointer;
         background-position: 50% center;
         padding: 19% 19% 37% 19%;
         opacity: 1;
     }
 
     .sbb_fg {
         transition: all 0.2s !important;
         background-image: url('../img/vn_fg.webp');
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center;
         transform: translate(-5%, 2%) scale(1.4);
     }
 
     .shows_box_b:hover .sbb_fg {
         transform: translate(0%, -6%) scale(1.1);
     }
 
     .sbb_logo {
         transition: all 0.2s !important;
         background-image: url('../img/vn_logo.webp');
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center;
         transform: translate(-11%, 34%) scale(1.0);
         opacity: 0;
         background-origin: content-box;
         padding: 0;
     }
 
     .shows_box_b:hover .sbb_logo {
         transform: translate(-5%, 14%) scale(1.1);
         opacity: 1;
     }
 
 
 
 
 
     .shows_box_c {
         transition: all 0.2s !important;
         background-image: url('../img/eg_bg.webp');
         background-size: cover;
         background-position: 45% center;
         background-repeat: no-repeat;
         width: 100%;
         height: 100%;
         filter: blur(0.5);
         background-origin: content-box;
         padding: 0;
         /* opacity: 0.8; */
     }
 
     .shows_box_c:hover {
         background-size: cover;
         cursor: pointer;
         /* background-position: 50% center; */
         padding: 0em 0em 1em 2em;
         opacity: 1;
     }
 
     .sbc_fg {
         transition: all 0.2s !important;
         background-image: url('../img/eg_jason.webp');
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center;
         transform: translate(5%, -5%) scale(1.8);
         z-index: 1;
     }
 
     .shows_box_c:hover .sbc_fg {
         transform: translate(2%, 4%) scale(1.3);
     }
 
     .sbc_mg {
         transition: all 0.2s !important;
         background-image: url('../img/eg_steve.webp');
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center;
         transform: translate(-3%, 1%) scale(1.6);
     }
 
     .shows_box_c:hover .sbc_mg {
         transform: translate(-3%, 4.5%) scale(1.3);
     }
 
 
     .sbc_logo {
         transition: all 0.2s !important;
         background-image: url('../img/eg_logo.webp');
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center;
         transform: translate(12%, -30%) scale(1.5);
         opacity: 0;
         background-origin: content-box;
         padding: 0;
     }
 
     .shows_box_c:hover .sbc_logo {
         transform: translate(4%, -19%) scale(1.5);
         opacity: 1;
     }
 
 
 
 
 
 
 
 
     .shows_box_d {
         transition: all 0.2s !important;
         background-image: url('../img/ew_bg.webp');
         background-size: cover;
         background-position: 50% center;
         background-repeat: no-repeat;
         width: 100%;
         height: 100%;
         filter: blur(0.5);
         background-origin: content-box;
         padding: 19% 37% 19% 19%;
         /* opacity: 0.8; */
     }
 
     .shows_box_d:hover {
         background-size: cover;
         cursor: pointer;
         background-position: 50% center;
         padding: 25% 37% 11% 19%;
         opacity: 1;
     }
 
     .sbd_fg {
         transition: all 0.2s !important;
         background-image: url('../img/ew_fg.webp');
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center;
         transform: translate(2%, 3%) scale(1.8);
     }
 
     .shows_box_d:hover .sbd_fg {
         transform: translate(0%, -6%) scale(1.55);
     }
 
     .sbd_logo {
         transition: all 0.2s !important;
         background-image: url('../img/ew_logo.webp');
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center;
         transform: translate(-11%, 34%) scale(1.0);
         opacity: 0;
         background-origin: content-box;
         padding: 0;
     }
 
     .shows_box_d:hover .sbd_logo {
         transform: translate(-5%, 14%) scale(1.1);
         opacity: 1;
     }
 
 }
 
 
 
 
 
 
 
 
 
 body {
     padding-right: 0 !important;
     font-size: 0.85rem;
 }
 
 .whitebgcont {
 
     margin-top: 4em;
     margin-bottom: 4em;
 
 }
 
 .lowreverse {
     flex-direction: row-reverse;
     flex-wrap: wrap-reverse;
 }
 
 .edgefix {
     max-width: 1140px;
 }
 
 .bragcontainer {
     display: flex;
 }
 
 .customblue {
     margin-top: -5em;
 }
 
 .rotateright {
     rotate: 2deg;
 }
 
 .centervertflex {
     display: flex;
     flex-direction: column;
     justify-content: center;
 
 }
 
 #bigabout {
     text-align: center;
 }
 
 #smallabout {
     text-align: center;
 }
 
 .mask {
     -webkit-clip-path: polygon(100.0% calc(100% - 4.0px), 98.0% calc(100% - 4.0576px), 96.0% calc(100% - 4.2176px), 94.0% calc(100% - 4.4928px), 92.0% calc(100% - 4.8768px), 90.0% calc(100% - 5.3696px), 88.0% calc(100% - 5.9648px), 86.0% calc(100% - 6.6624px), 84.0% calc(100% - 7.462400000000001px), 82.0% calc(100% - 8.3584px), 80.0% calc(100% - 9.3504px), 78.0% calc(100% - 10.4256px), 76.0% calc(100% - 11.5904px), 74.0% calc(100% - 12.832px), 72.0% calc(100% - 14.1504px), 70.0% calc(100% - 15.539200000000001px), 68.0% calc(100% - 16.9984px), 66.0% calc(100% - 18.5088px), 64.0% calc(100% - 20.076800000000002px), 62.0% calc(100% - 21.689600000000002px), 60.0% calc(100% - 23.347199999999997px), 58.0% calc(100% - 25.0368px), 56.0% calc(100% - 26.752px), 54.0% calc(100% - 28.492800000000003px), 52.0% calc(100% - 30.240000000000002px), 50.0% calc(100% - 32.0px), 48.0% calc(100% - 33.76px), 46.0% calc(100% - 35.5072px), 44.0% calc(100% - 37.248000000000005px), 42.0% calc(100% - 38.9632px), 40.0% calc(100% - 40.652800000000006px), 38.0% calc(100% - 42.3104px), 36.0% calc(100% - 43.9232px), 34.0% calc(100% - 45.4912px), 32.0% calc(100% - 47.001599999999996px), 30.0% calc(100% - 48.4608px), 28.0% calc(100% - 49.8496px), 26.0% calc(100% - 51.168000000000006px), 24.0% calc(100% - 52.409600000000005px), 22.0% calc(100% - 53.5744px), 20.0% calc(100% - 54.6496px), 18.0% calc(100% - 55.6416px), 16.0% calc(100% - 56.537600000000005px), 14.0% calc(100% - 57.3376px), 12.0% calc(100% - 58.0352px), 10.0% calc(100% - 58.6304px), 8.0% calc(100% - 59.1232px), 6.0% calc(100% - 59.507200000000005px), 4.0% calc(100% - 59.782399999999996px), 2.0% calc(100% - 59.9424px), 0.0% calc(100% - 60.0px), 0.0% 60.0px, 2.0% 59.9424px, 4.0% 59.782399999999996px, 6.0% 59.507200000000005px, 8.0% 59.1232px, 10.0% 58.6304px, 12.0% 58.0352px, 14.0% 57.3376px, 16.0% 56.537600000000005px, 18.0% 55.6416px, 20.0% 54.6496px, 22.0% 53.5744px, 24.0% 52.409600000000005px, 26.0% 51.168000000000006px, 28.0% 49.8496px, 30.0% 48.4608px, 32.0% 47.001599999999996px, 34.0% 45.4912px, 36.0% 43.9232px, 38.0% 42.3104px, 40.0% 40.652800000000006px, 42.0% 38.9632px, 44.0% 37.248000000000005px, 46.0% 35.5072px, 48.0% 33.76px, 50.0% 32.0px, 52.0% 30.240000000000002px, 54.0% 28.492800000000003px, 56.0% 26.752px, 58.0% 25.0368px, 60.0% 23.347199999999997px, 62.0% 21.689600000000002px, 64.0% 20.076800000000002px, 66.0% 18.5088px, 68.0% 16.9984px, 70.0% 15.539200000000001px, 72.0% 14.1504px, 74.0% 12.832px, 76.0% 11.5904px, 78.0% 10.4256px, 80.0% 9.3504px, 82.0% 8.3584px, 84.0% 7.462400000000001px, 86.0% 6.6624px, 88.0% 5.9648px, 90.0% 5.3696px, 92.0% 4.8768px, 94.0% 4.4928px, 96.0% 4.2176px, 98.0% 4.0576px, 100.0% 4.0px);
     clip-path: polygon(100.0% calc(100% - 4.0px), 98.0% calc(100% - 4.0576px), 96.0% calc(100% - 4.2176px), 94.0% calc(100% - 4.4928px), 92.0% calc(100% - 4.8768px), 90.0% calc(100% - 5.3696px), 88.0% calc(100% - 5.9648px), 86.0% calc(100% - 6.6624px), 84.0% calc(100% - 7.462400000000001px), 82.0% calc(100% - 8.3584px), 80.0% calc(100% - 9.3504px), 78.0% calc(100% - 10.4256px), 76.0% calc(100% - 11.5904px), 74.0% calc(100% - 12.832px), 72.0% calc(100% - 14.1504px), 70.0% calc(100% - 15.539200000000001px), 68.0% calc(100% - 16.9984px), 66.0% calc(100% - 18.5088px), 64.0% calc(100% - 20.076800000000002px), 62.0% calc(100% - 21.689600000000002px), 60.0% calc(100% - 23.347199999999997px), 58.0% calc(100% - 25.0368px), 56.0% calc(100% - 26.752px), 54.0% calc(100% - 28.492800000000003px), 52.0% calc(100% - 30.240000000000002px), 50.0% calc(100% - 32.0px), 48.0% calc(100% - 33.76px), 46.0% calc(100% - 35.5072px), 44.0% calc(100% - 37.248000000000005px), 42.0% calc(100% - 38.9632px), 40.0% calc(100% - 40.652800000000006px), 38.0% calc(100% - 42.3104px), 36.0% calc(100% - 43.9232px), 34.0% calc(100% - 45.4912px), 32.0% calc(100% - 47.001599999999996px), 30.0% calc(100% - 48.4608px), 28.0% calc(100% - 49.8496px), 26.0% calc(100% - 51.168000000000006px), 24.0% calc(100% - 52.409600000000005px), 22.0% calc(100% - 53.5744px), 20.0% calc(100% - 54.6496px), 18.0% calc(100% - 55.6416px), 16.0% calc(100% - 56.537600000000005px), 14.0% calc(100% - 57.3376px), 12.0% calc(100% - 58.0352px), 10.0% calc(100% - 58.6304px), 8.0% calc(100% - 59.1232px), 6.0% calc(100% - 59.507200000000005px), 4.0% calc(100% - 59.782399999999996px), 2.0% calc(100% - 59.9424px), 0.0% calc(100% - 60.0px), 0.0% 60.0px, 2.0% 59.9424px, 4.0% 59.782399999999996px, 6.0% 59.507200000000005px, 8.0% 59.1232px, 10.0% 58.6304px, 12.0% 58.0352px, 14.0% 57.3376px, 16.0% 56.537600000000005px, 18.0% 55.6416px, 20.0% 54.6496px, 22.0% 53.5744px, 24.0% 52.409600000000005px, 26.0% 51.168000000000006px, 28.0% 49.8496px, 30.0% 48.4608px, 32.0% 47.001599999999996px, 34.0% 45.4912px, 36.0% 43.9232px, 38.0% 42.3104px, 40.0% 40.652800000000006px, 42.0% 38.9632px, 44.0% 37.248000000000005px, 46.0% 35.5072px, 48.0% 33.76px, 50.0% 32.0px, 52.0% 30.240000000000002px, 54.0% 28.492800000000003px, 56.0% 26.752px, 58.0% 25.0368px, 60.0% 23.347199999999997px, 62.0% 21.689600000000002px, 64.0% 20.076800000000002px, 66.0% 18.5088px, 68.0% 16.9984px, 70.0% 15.539200000000001px, 72.0% 14.1504px, 74.0% 12.832px, 76.0% 11.5904px, 78.0% 10.4256px, 80.0% 9.3504px, 82.0% 8.3584px, 84.0% 7.462400000000001px, 86.0% 6.6624px, 88.0% 5.9648px, 90.0% 5.3696px, 92.0% 4.8768px, 94.0% 4.4928px, 96.0% 4.2176px, 98.0% 4.0576px, 100.0% 4.0px);
     margin-top: -5em;
     margin-bottom: -5em;
     position: relative;
     z-index: 3 !important;
     transform: translateZ(0);
 }
 
 .unmask {
 
     z-index: 0 !important;
 }
 
 .nocurve {
     z-index: 0 !important;
 }
 
 .purewhitebg {
     background: white;
     margin-top: 0em !important;
 }
 
 .playlistitem {
     /* width: 100%; */
     background: rgb(96 177 243);
     border-radius: 0.5em;
     display: flex;
     cursor: pointer;
 
     /* overflow: hidden; */
     /* height: 5em; */
     /* max-height: 3em; */
     /* padding: 4px; */
     /* justify-content: center; */
     /* vertical-align: middle; */
 }
 
 .moreonyoutubecontainer {
 
     display: flex;
     justify-content: end;
 
     padding-top: 1em;
 }
 
 .moreonyoutubebutton {
     background-color: #d94343;
     border-radius: 0.5em;
     max-width: 150px;
     display: flex;
     padding: 0.25em;
     cursor: pointer;
 }
 
 .moreonyoutubebutton:hover {
     transform: scale3d(1.05, 1.05, 1.05);
 }
 
 .moreonyoutubebutton:active {}
 
 .moreonyoutubeimage {
     height: 100%;
     background-image: url("../img/youtube.svg");
     width: 25%;
     background-position: center;
     background-repeat: no-repeat;
     color: white;
     display: flex;
     /* background-size: 80%; */
     flex-direction: column;
     justify-content: center;
     font-size: 1.5em;
 }
 
 .moreonyoutubetext {
     width: 100%;
     color: white;
     font-size: 0.8em;
     font-weight: bold;
     padding-left: 0.5em;
     vertical-align: middle;
     padding-bottom: 0.2em;
 }
 
 .playlistitem:hover {
     background: #9cd2ff;
 
 }
 
 .playlistitem:active {
     background: #d3ebff;
 }
 
 .playlistitemactive {
     background: #d3ebff;
 }
 
 .playlistthumb {
     max-width: 75px;
     weight: 84px;
     /* margin: 20px; */
     background-size: cover;
     overflow: hidden;
     border-radius: 5px;
     display: none;
 }
 
 .playlisttitle {
     width: 100%;
     vertical-align: middle;
     margin-top: auto;
     margin-bottom: auto;
     font-weight: bold;
     color: #1565a7;
     font-size: 0.8em;
 }
 
 .speciallink {
     color: rgb(40 132 203);
     cursor: pointer;
 }
 
 .speciallink:hover {
     color: #79c0f7;
 }
 
 #masterpieceinfoplaylist {
     background: #7fc2f8;
     max-width: 100%;
     /* height: 100%; */
     margin-top: 1em;
     border-radius: 0.5em;
     /* max-height: -webkit-fill-available; */
     overflow-y: scroll;
     overflow-x: hidden;
     max-height: 14em;
     display: flex;
     gap: 0.25em;
     padding: 0.25em;
     padding-right: 0;
 }
 
 #commercialmasterpieceinfoplaylist {
     background: #7fc2f8;
     max-width: 100%;
     /* height: 100%; */
     margin-top: 1em;
     border-radius: 0.5em;
     /* max-height: -webkit-fill-available; */
     overflow-y: scroll;
     overflow-x: hidden;
     max-height: 14em;
     display: flex;
     gap: 0.25em;
     padding: 0.25em;
     padding-right: 0;
 }
 
 /* Firefox */
 * {
     scrollbar-width: auto;
     scrollbar-color: #5995c9 #b8d2ea;
 }
 
 /* Chrome, Edge, and Safari */
 *::-webkit-scrollbar {
     width: 16px;
 }
 
 *::-webkit-scrollbar-track {
     background: #b8d2ea;
 }
 
 #masterpieceinfoplaylist::-webkit-scrollbar-track {
     background: #7fc2f8;
     border-top-right-radius: 0.4em;
     border-bottom-right-radius: 0.4em;
 }
 
 #commercialmasterpieceinfoplaylist::-webkit-scrollbar-track {
     background: #7fc2f8;
     border-top-right-radius: 0.4em;
     border-bottom-right-radius: 0.4em;
 }
 
 *::-webkit-scrollbar-thumb {
     background-color: #5995c9;
     border-radius: 10px;
     border: 0px none #ffffff;
 }
 
 #masterpieceinfoplaylist::-webkit-scrollbar-thumb {
     background-color: #ffffff;
     border-radius: 10px;
     border: 4px solid #7fc2f8;
 }
 
 #commercialmasterpieceinfoplaylist::-webkit-scrollbar-thumb {
     background-color: #ffffff;
     border-radius: 10px;
     border: 4px solid #7fc2f8;
 }
 
 
 
 
 #ytlogo {
     background-image: url("../img/yt_logo_rgb_light.webp");
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
     height: 1.8em;
     margin-bottom: 0.7em;
 }
 
 
 #masterpieceinfoinner {}
 
 #masterpieceOuter {
     /* background: gold; */
     padding: 6px;
     border-radius: 1em;
     /* background-image: linear-gradient(61deg, #5995c9 30%, #97cdfb 50%,  #5995c9  70%); */
     background-position: center;
     background-size: 200%;
 }
 
 #masterpieceinfo {
     /* background: #bf8945; */
     position: relative;
     margin-top: -1em;
     margin-left: 0;
     margin-right: 0;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-between;
     /* gap: 17px; */
 }
 
 #masterpiecetitle {
     background: #c3af72;
     margin-left: auto;
     margin-right: auto;
     width: fit-content;
     padding: 10px;
     border-radius: 5px;
     font-weight: bold;
     text-transform: uppercase;
     color: white;
     padding-left: 1em;
     margin-top: 0.5em;
     padding-right: 1em;
     top: 1.7em;
     position: relative;
 }
 
 #masterpiecedescription {
     background: #e9d9a9;
     border-radius: 0.5em;
     /* font-weight: bold; */
     font-size: 0.8em;
     padding: 1em;
     padding-top: 2.5em;
     color: #494f53;
     text-align: justify;
     font-weight: bold;
 }
 
 
 #commercialmasterpieceinfoinner {
     width: 100%;
 }
 
 #commercialmasterpieceOuter {
     /* background: gold; */
     padding: 6px;
     border-radius: 1em;
     /* background-image: linear-gradient(61deg, #5995c9 30%, #97cdfb 50%,  #5995c9  70%); */
     background-position: center;
     background-size: 200%;
 }
 
 #commercialmasterpieceinfo {
     /* background: #bf8945; */
     position: relative;
     margin-top: -1em;
     margin-left: 0;
     margin-right: 0;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-between;
     /* gap: 17px; */
 }
 
 #commercialmasterpiecetitle {
     background: #c3af72;
     margin-left: auto;
     margin-right: auto;
     width: fit-content;
     padding: 10px;
     border-radius: 5px;
     font-weight: bold;
     text-transform: uppercase;
     color: white;
     padding-left: 1em;
     margin-top: 0.5em;
     padding-right: 1em;
     top: 1.7em;
     position: relative;
 }
 
 #commercialmasterpiecedescription {
     background: #e9d9a9;
     border-radius: 0.5em;
     /* font-weight: bold; */
     font-size: 0.8em;
     padding: 1em;
     padding-top: 2.5em;
     color: #494f53;
     text-align: center;
     font-weight: bold;
 }
 
 #showcase {
     padding-left: 0;
     padding-right: 0;
 }
 
 #commercial {
     padding-left: 0;
     padding-right: 0;
 }
 
 .gold {
 
     background-image: linear-gradient(45deg, #00000000 0%, #00000000 20%, #00000000 45%, #f9f4b4ff 50%, #00000000 55%, #00000000 80%, #00000000 100%), linear-gradient(90deg, #cfa453 30%, #ffc963 50%, rgb(202, 162, 87) 70%);
 
     -webkit-background-clip: text;
 
     -webkit-text-fill-color: transparent;
 
     animation: shine 3s infinite;
 
     animation-timing-function: linear;
 
     background-size: 200%;
 
     background-position: right, center;
 
     text-shadow: none !important;
 
     filter: drop-shadow(-1px 4px #976a27) hue-rotate(108deg) saturate(0.5);
 }
 
 .goldyt {
 
     background-image: linear-gradient(45deg, #00000000 0%, #00000000 20%, #00000000 45%, #f9f4b4ff 50%, #00000000 55%, #00000000 80%, #00000000 100%), linear-gradient(90deg, #cfa453 30%, #ffc963 50%, rgb(202, 162, 87) 70%);
 
     -webkit-background-clip: text;
 
     -webkit-text-fill-color: transparent;
 
     animation: shine 3s infinite;
 
     animation-timing-function: linear;
 
     background-size: 200%;
 
     background-position: right, center;
 
     text-shadow: none !important;
 
     filter: drop-shadow(-1px 4px #976a27);
 
 }
 
 @keyframes shine {
     to {
         background-position: left, center;
     }
 
 }
 
 
 
 
 
 
 .img-right {
     float: none;
     max-width: 100%;
     cursor: zoom-in;
 }
 
 .img-right-clicked {
     max-width: 100%;
     cursor: zoom-out;
 }
 
 .img-left {
     float: none;
     max-width: 100%;
     cursor: zoom-in;
 }
 
 .img-left-clicked {
     max-width: 100%;
     cursor: zoom-out;
 }
 
 .bluebgbasic {
     font-weight: bold;
     color: #1561a3;
     max-width: 100ch;
     margin-left: auto;
     margin-right: auto;
     text-align: left;
     padding-left: 1em;
     padding-right: 1em;
 }
 
 .whitebgbasic {
     font-weight: bold;
     color: #777777;
     margin-left: auto;
     margin-right: auto;
     /* text-align: justify; */
     padding-left: 1em;
     /* background: blue; */
     /* border-radius: 1.25em; */
     padding-right: 1em;
 }
 
 .extrapad {
     padding-top: 1em;
     padding-bottom: 1em;
 }
 
 .img-article {}
 
 .img-article-shadow {
     filter: drop-shadow(6px 8px 0px rgba(89, 149, 201, 0.2));
 }
 
 .articlecontainers {
     padding: 0.25em;
     padding-left: 1.5em;
     padding-right: 1.5em;
     text-align: left;
 }
 
 .articleheader {
     font-size: 1.5em;
     font-weight: bold;
     display: block;
     /* max-width: 100%; */
     /* margin-left: auto; */
     /* margin-right: auto; */
     text-align: center;
     padding: 0rem;
 }
 
 .modalcontentmain {
     /* padding: 2rem; */
     padding-top: 0.5rem;
     padding-right: 2rem;
     padding-bottom: 2rem;
     padding-left: 2rem;
 }
 
 .articlebox {
     background: white;
     z-index: 1;
     height: fit-content;
     margin-top: -2rem;
     /* margin-left: 2rem; */
     /* margin-right: 2rem; */
     /* width: 95%; */
 }
 
 .projectinfodropdown {
     z-index: 1;
     margin-top: 0.5rem;
     position: relative;
     /* background: #afafaf; */
     cursor: pointer;
     padding: 0.5rem;
     font-weight: bold;
     user-select: none;
     text-transform: uppercase;
     padding-left: 1rem;
 }
 
 .projectinfodropdown.collapsed {
     z-index: 1;
     margin-top: 0.5rem;
     position: relative;
     /* background: #afafaf; */
     cursor: pointer;
     padding: 0.5rem;
     font-weight: bold;
     user-select: none;
     text-transform: uppercase;
     padding-left: 1rem;
 }
 
 .techdeetsdropdown {
     z-index: 1;
     margin-top: 0.5rem;
     position: relative;
     /* background: #afafaf; */
     cursor: pointer;
     padding: 0.5rem;
     font-weight: bold;
     user-select: none;
     text-transform: uppercase;
     padding-left: 1rem;
 }
 
 .techdeetsdropdown.collapsed {
     z-index: 1;
     margin-top: 0.5rem;
     position: relative;
     /* background: #afafaf; */
     cursor: pointer;
     padding: 0.5rem;
     font-weight: bold;
     user-select: none;
     text-transform: uppercase;
     padding-left: 1rem;
 }
 
 
 .modalnontitle {
     position: relative;
 }
 
 .navbar-nav {
     margin-top: 1em !important;
 
 }
 
 .creditsboxtitle {
     font-size: 1.25rem;
     font-weight: bold;
     padding-top: 1rem;
 }
 
 .creditsbox {
     padding-bottom: 1.0rem !important;
 }
 
 .projectinfodropdown:hover {
     filter: brightness(1.1);
 }
 
 .techdeetsdropdown:hover {
     filter: brightness(1.1);
 }
 
 .creditsinfocontainer {
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
     height: fit-content;
     font-size: 0.8rem;
     /* background: #d2ffbc; */
     /* border-radius: 5px; */
     /* margin: -15px; */
 }
 
 .creditsinfo {}
 
 .creditsinfotitle {
     font-weight: bold;
     color: black;
 }
 
 .creditsrow {}
 
 .modaltitle {
     font-size: 1em;
     font-weight: bold;
     margin-left: auto;
     width: fit-content;
     margin-right: auto;
     /* position: absolute; */
     overflow: hidden;
     /* top: -2.7rem; */
     z-index: 1;
     left: 0;
     right: 0;
     text-overflow: ellipsis;
     white-space: nowrap;
     max-width: 100%;
 }
 
 .modalcontentinnershapeshadow {
     position: absolute;
     left: -3rem;
     right: -3rem;
     top: -2rem;
     bottom: -2rem;
 }
 
 .modalcontentinnershape {
     position: relative;
     width: 100%;
     height: 100%;
     background: green;
 }
 
 .modal-content {
     position: relative;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-direction: column;
     flex-direction: column;
     width: 100%;
     pointer-events: auto;
     border: none;
     border-radius: 0;
     background: none;
     filter: drop-shadow(-10px 26px 0px rgba(0, 0, 0, 0.2));
 }
 
 .h1blue {
     color: #ffffff;
     text-shadow: -1px 2px 0px #8e9eb3;
     font-size: 2rem;
 }
 
 .wide {
     display: inline-block;
     -webkit-transform: scale(2, 1);
     /* Safari and Chrome */
     -moz-transform: scale(2, 1);
     /* Firefox */
     -ms-transform: scale(2, 1);
     /* IE 9 */
     -o-transform: scale(2, 1);
     /* Opera */
     transform: scale(2, 1);
     /* W3C */
 }
 
 .latestvideos {
     display: inline;
 }
 
 .shadowfilter {
     filter: drop-shadow(-13px 17px 0px rgba(89, 149, 201, 0.2));
 }
 
 .projecttitle {
     margin-left: auto;
     margin-right: auto;
     width: fit-content;
     font-family: "Century Gothic", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-weight: 700;
     font-size: 2rem;
     padding: 2rem;
     padding-top: 1rem;
     padding-bottom: 1rem;
     text-transform: uppercase;
 
 }
 
 .projectsubtitle {
     font-family: 'Century Gothic', Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
     margin-top: 1rem;
     font-weight: 700;
     font-size: 1.25rem;
     text-transform: uppercase;
 }
 
 .projecttitle {
     margin-left: auto;
     margin-right: auto;
     width: fit-content;
     font-family: "Century Gothic", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-weight: 700;
     font-size: 1.5rem;
     padding: 2rem;
     padding-top: 1rem;
     padding-bottom: 1rem;
     text-transform: uppercase;
 }
 
 .projectsubtitle {
     font-family: 'Century Gothic', Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
     margin-top: 1rem;
     font-weight: 700;
     font-size: 1rem;
     text-transform: uppercase;
 }
 
 .rightarrow {
     width: 15px;
     height: 15px;
     background-color: rgb(193 144 0);
     -webkit-mask-image: url("../img/rightarrow.svg");
     display: inline-block;
 }
 
 .rowrelative {
     position: relative;
     margin-top: 2em;
 }
 
 .projectrowparent {
     position: absolute;
     /* width: 104%; */
     /* height: 100%; */
     left: -50px;
     right: -50px;
     top: -50px;
     bottom: -50px;
 }
 
 .projectrow {}
 
 .projectrowA {
     /* margin-top: 3em; */
 }
 
 .projectrowB {
     flex-direction: row-reverse;
     margin-top: 3em;
 
 }
 
 #aboutshape {
     /* -webkit-clip-path:polygon(0 0, 100% 35%, 100% 65%, 0% 100%); */
     /* clip-path:polygon(0 0, 100% 35%, 100% 65%, 0% 100%); */
     /* width:200px; */
     height: 100%;
     clip-path: polygon(100% 0, 100% 0%, 96% 98%, 0 105%, 0 0);
     background-color: rgb(180, 197, 27);
 }
 
 .ytframe {}
 
 #abouttitle {
     /* margin-top: 2em; */
     margin-left: 2em;
     margin-right: 2em;
 }
 
 .stretch {
     width: 100%;
     height: 100%;
 
 }
 
 .item img {
     width: 100%;
 }
 
 .tinytext {
     font-size: 0.7em;
     vertical-align: super;
     font-style: italic;
     /* text-transform: capitalize; */
     color: #d75b5b;
 }
 
 #framedtext {
     font-weight: 600;
     text-align: left;
     color: #424242;
     /* margin-top: 2em; */
     word-break: break-word;
     /* box-shadow: 5px 5px 0px 0px black; */
     /* word-spacing: 1px; */
     filter: drop-shadow(-13px 17px 0px rgba(89, 149, 201, 0.2));
 }
 
 #framedtextpatreon {
     font-weight: 600;
     text-align: left;
     color: #424242;
     /* margin-top: 2em; */
     word-break: break-word;
     /* box-shadow: 5px 5px 0px 0px black; */
     /* word-spacing: 1px; */
     transform: rotate(4deg);
     filter: drop-shadow(-13px 17px 0px rgba(89, 149, 201, 0.2));
     margin-bottom: 3.5em;
 }
 
 .projectrowbgB {
     background: #99bedd;
     width: 100%;
     height: 100%;
     /* position: absolute; */
     top: 0;
     left: 0;
     clip-path: polygon(5% 12%, 94% 0%, 100% 96%, 1% 86%);
     z-index: -1;
 }
 
 .projectrowbgA {
     background: #99bedd;
     width: 100%;
     height: 100%;
     /* position: absolute; */
     top: 0;
     left: 0;
     clip-path: polygon(2% 7%, 97% 12%, 94% 86%, 5% 94%);
     z-index: -1;
 }
 
 .framedtexttextleft {
     height: 100%;
     height: 100%;
     clip-path: polygon(2% 3%, 96% 4%, 97% 95%, 2% 98%);
     background-color: rgb(233 245 255);
     /* box-shadow: -2px -15px 0px 12px inset #fff581; */
     padding: 2.5em;
     /* border-radius: 25px; */
 }
 
 .framedtexttextright {
     height: 100%;
     height: 100%;
     clip-path: polygon(1% 7%, 96% 4%, 99% 100%, 0% 95%);
     background-color: rgb(233 245 255);
     /* box-shadow: -2px -15px 0px 12px inset #fff581; */
     padding: 2.5em;
     /* border-radius: 25px; */
 }
 
 .framedtexttextalt {
     height: 100%;
     height: 100%;
     clip-path: inset(0% 0% 0% 0% round 10px);
     background-color: rgb(233 245 255);
     padding: 2.5em;
     /* transform: rotate(4deg); */
     margin-bottom: 1em;
     /* transform: rotate(4deg); */
     /* border-radius: 25px; */
     /* transform: rotate(4deg); */
     /* filter: drop-shadow(-13px 17px 0px rgba(89, 149, 201, 0.2)); */
 }
 
 .modalcontentinner {
     /* background: blue; */
     padding: 0.5em;
     z-index: 2;
     position: relative;
     filter: drop-shadow(3px 11px 1px rgba(89, 149, 201, 0.25));
 }
 
 #masterpiece {
 
     border-radius: 10px;
 
     overflow: hidden;
 
     /* width: 452px; */
 
     /* background: darkblue; */
 }
 
 #commercialmasterpiece {
 
     border-radius: 10px;
 
     overflow: hidden;
 
     /* width: 452px; */
 
     /* background: darkblue; */
 }
 
 #subbuttontexttext {
     font-family: "Minecraft";
     font-size: 1em;
 
 }
 
 #myCanvas {
     width: 100%;
     font-family: "Minecraft";
     cursor: pointer;
 
 }
 
 .subbutton {
     user-select: none;
     cursor: pointer;
     width: 30%;
     height: 15%;
     border-radius: 10px;
     background-color: #5995c9;
     color: white;
     display: flex;
     position: relative;
     top: -35%;
     left: 62%;
     box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.356);
 }
 
 #subbuttontext {
     display: flex;
     flex-direction: column;
     height: 100%;
     justify-content: center;
     width: 100%;
     font-size: initial;
 }
 
 .projectmorebuttonshadow {
     width: 100%;
     display: flex;
     flex-direction: row-reverse;
     filter: drop-shadow(5px 6px 0px rgba(89, 149, 201, 0.2));
 }
 
 .projectmorebuttonshadow:hover {
     filter: drop-shadow(8px 8px 0px rgba(89, 149, 201, 0.2));
     cursor: pointer;
 }
 
 .projectmorebutton {
     /* position:absolute; */
     background-color: rgb(255, 215, 97);
     width: fit-content;
     padding: 0.5em;
     padding-left: 1em;
     padding-right: 1em;
     font-weight: bold;
     color: rgb(193 144 0);
     text-transform: uppercase;
     clip-path: polygon(2% 0%, 100% 0%, 94% 91%, 0% 100%);
 }
 
 .projectmorebutton:hover {
     clip-path: polygon(3% 1%, 99% 1%, 95% 90%, 1% 99%);
     filter: brightness(1.05);
 }
 
 .carouselleft {
 
     clip-path: polygon(2% 0%, 99% 3%, 98% 97%, 4% 100%);
 
 }
 
 .carouselright {
 
     clip-path: polygon(1% 8%, 95% 1%, 100% 100%, 0% 98%);
 }
 
 .subbuttonarrow {
     display: flex;
     width: 20%;
     flex-direction: column;
     height: 100%;
     justify-content: center;
 
 }
 
 .carousel-fade {
 
     transition-duration: 2s !important;
 
 }
 
 .subimagecont {
 
     /* width: 100%; */
 
     /* height: 100%; */
 
     /* height: 0; */
 
     /* padding-top: 78.9%; */
 
     /* position: relative; */
 
     /* background-image: url("../img/subs.png"); */
 
     /* background-size: contain; */
 
     /* z-index: -1; */
 
     /* background-repeat: no-repeat; */
 }
 
 .substext {
 
     position: relative;
     top: 50%;
 }
 
 .doublewrap {
     flex-wrap: wrap;
 }
 
 .itemmore {
     background-color: #30446c;
     background-image: url('/img/morevids.png');
     background-position: center;
     background-repeat: no-repeat;
     box-shadow: inset 0 0 20px 0px #3f77cb;
     background-size: contain;
 }
 
 .aboutsection {
     width: 100%;
 }
 
 .onehundred {
     /* width:100%; */
 }
 
 .h1project {
     color: #006da1;
     /* text-shadow: -2px 4px 0px #00000026; */
     font-size: 2em;
     margin-top: 13px;
 }
 
 .subscribe {
     /* width:100%; */
     /* width: 100%; */
     /* height: 0; */
     /* height: 0; */
     /* padding-top: 78.9%; */
     /* position: relative; */
     background-image: url(../img/areyou.png);
     background-size: contain;
     /* z-index: -1; */
     background-position: center;
     cursor: pointer;
     background-repeat: no-repeat;
     font-family: 'Minecraft';
 }
 
 .england {
     /* width:100%; */
     /* width: 100%; */
     /* height: 0; */
     /* height: 0; */
     /* padding-top: 78.9%; */
     /* position: relative; */
     /* background-image: url(../img/england0000.png); */
     /* display: flex; */
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
     font-family: 'Minecraft';
     margin-top: auto;
     margin-bottom: auto;
     padding: 3em;
 }
 
 html {
     scroll-behavior: smooth;
 }
 
 .main-logo-img {
     width: 100%;
 }
 
 .headertext {
     margin-left: auto;
     margin-right: auto;
     width: 100%;
     font-size: 4vw !important;
     margin-top: 0em;
     font-family: "Century Gothic", "Open Sans", sans-serif;
     font-weight: bold;
 }
 
 .nbicons {
     width: 150px;
     display: none;
     flex-wrap: wrap;
     margin-left: 15px
 }
 
 .icon {
     min-width: 30px;
     height: 30px;
     background-repeat: no-repeat;
     background-position: center;
     /*! background-color: white; */
     border-radius: 5px;
     background-size: cover;
     margin: 2px;
     /* filter: contrast(0.5) sepia(1) hue-rotate(320deg) saturate(2.2) contrast(1.2) hue-rotate(201deg) brightness(1.5); */
 }
 
 .icon:hover {
 
     filter: brightness(1.5);
 
     cursor: pointer;
 }
 
 .ic-youtube {
     background-image: url(../img/youtube-square.svg);
 
 }
 
 .ic-tw {
     background-image: url(../img/twitter-square.svg);
 
 }
 
 .ic-insta {
     background-image: url(../img/instagram.svg);
 
 }
 
 .ic-tik {
     background-image: url(../img/tiktok.svg);
 }
 
 .ic-fb {
     background-image: url(../img/facebook-square.svg);
 
 }
 
 .ic-discord {
     background: url(../img/discord.svg);
     background-repeat: no-repeat;
     height: 34px;
 
 
 }
 
 .ic-patreon {
     background-image: url(../img/patreon.svg);
     background-color: transparent;
     border-radius: 0px;
 
 }
 
 .scrolldowncircle {
 
     width: 70px;
 
     height: 70px;
 
     background: url(../img/scrolldowncircle.svg);
 
     margin-left: auto;
 
     margin-right: auto;
 
     /* position: fixed; */
 
     display: none;
 
     /* left: 50%; */
 
     /* margin-left:-50px; */
 
     /* right: 50%; */
 
     /* bottom: 57px; */
 
     /* margin-bottom: 10000px; */
 
     background-repeat: no-repeat;
 
     /* opacity:0.1; */
 
 }
 
 .scrolldowncircle:hover {
     cursor: pointer;
     opacity: 1;
 
 }
 
 .scrolldownarrow {
 
     width: 70px;
 
     height: 70px;
 
     background: url(../img/scrolldownarrow.svg);
 
     margin-left: auto;
 
     margin-right: auto;
 
     /* position: fixed; */
 
     /* left: 50%; */
 
     /* margin-left:-50px; */
 
     /* right: 50%; */
 
     background-repeat: no-repeat;
 
     background-size: 35px 35px;
 
     background-position: center;
 
     /* opacity: 0.5; */
 }
 
 header {
     position: relative;
     background-color: rgb(0, 0, 0);
     height: 75vh;
     min-height: 25rem;
     width: 100%;
     overflow: hidden;
 }
 
 .headervideo {
 
     position: absolute;
 
     top: 50%;
 
     left: 50%;
 
     /* min-width: 100%; */
 
     min-height: 675px;
 
     width: auto;
 
     height: 100%;
 
     z-index: 1;
 
     -ms-transform: translateX(-50%) translateY(-50%);
 
     -moz-transform: translateX(-50%) translateY(-50%);
 
     -webkit-transform: translateX(-50%) translateY(-50%);
 
     transform: translateX(-50%) translateY(-50%);
 
 
 }
 
 .headerbgvideo {
 
     position: absolute;
 
     top: 50%;
 
     left: 50%;
 
     min-width: 100%;
 
     /* max-height: 100%; */
 
     /* width: auto; */
 
     /* height: auto; */
 
     z-index: 0;
 
     -ms-transform: translateX(-50%) translateY(-50%);
 
     -moz-transform: translateX(-50%) translateY(-50%);
 
     -webkit-transform: translateX(-50%) translateY(-50%);
 
     transform: translateX(-50%) translateY(-50%);
 
     /* -webkit-mask-image: linear-gradient(to left,transparent,#000000b0,black,black,black,black,black,black,black,#000000b0, transparent); */
 
     filter: blur(30px) brightness(0.7);
 
 }
 
 
 header .container {
     position: relative;
     z-index: 2;
 }
 
 header .overlay {
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     background-color: black;
     opacity: 0.5;
     z-index: 2;
 }
 
 /* Media Query for devices withi coarse pointers and no hover functionality */
 
 /* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */
 /*   
                                            @media (pointer: coarse) and (hover: none) {
                                              header {
                                                background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
                                              }
                                            
                                              header video {
                                                display: none;
                                              }
                                            } */
 
 
 
 
 
 
 
 
 
 
 .navbar-light .navbar-nav .active>.nav-link,
 .navbar-light .navbar-nav .nav-link.active,
 .navbar-light .navbar-nav .nav-link.show,
 .navbar-light .navbar-nav .show>.nav-link {
     color: rgba(255, 255, 255, 0.9);
 
 }
 
 .navbar-brand {
     display: flex !important;
 }
 
 .navbar-light .navbar-nav .nav-link {
     color: #b1dbff;
     font-weight: bold;
 }
 
 .navbar-light .navbar-nav .nav-link:focus,
 .navbar-light .navbar-nav .nav-link:hover {
     color: rgba(255, 255, 255, 0.7);
 }
 
 .wavecontainer {
     display: flex;
     position: fixed;
     height: 100px;
     background-repeat: repeat-x;
     z-index: 1;
     top: 0;
     left: 0;
     right: 0;
     background-image: url(../img/wavebg.svg);
 }
 
 .leftwave {
     width: 100%;
     background-repeat: no-repeat;
     background-position-x: right;
     background-size: initial;
     background-image: url(../img/leftwave.svg);
     background-position-y: top;
     background-size: 832px 100px;
 }
 
 .midwave {
 
     min-width: 1200px;
     /* flex-grow: 4; */
     background-repeat: no-repeat;
     background-position-x: left;
     background-size: contain;
     background-image: url(../img/rightwave.svg);
     background-position-y: top;
     background-size: 832px 100px;
 
 
 
 }
 
 .newmidwave {
 
     min-width: 1200px;
 
     position: absolute;
 
     /* display: inline; */
 
     /* width: 100%; */
 
     height: 100%;
 
     /* flex-grow: 4; */
 
     bottom: 0;
 
     left: 0;
 
     /* background-position: bottom; */
 
     z-index: -4;
 
     background-repeat: no-repeat;
 
     background-position-x: left;
 
     background-size: contain;
 
     background-image: url(../img/rightwavemenu.svg);
 
     background-position-y: bottom;
 
     /* background-color: white; */
 
     background-size: 1693px 663px;
 }
 
 .rightwave {
     width: 100%;
 
 }
 
 
 
 .harryscustomH1 {
     color: #ffffff;
     padding-bottom: 3rem;
 }
 
 .harryscustomH2 {
     color: #5896C9;
     padding-top: 3rem;
     padding-bottom: 3rem;
 }
 
 .harryscustombutton {
     background-color: #5896C9;
     border-color: #5896C9;
 }
 
 .harryscustomsection {
     padding-bottom: 3rem;
 }
 
 .patronclassinner {
     background: #c6d8ec;
     color: white;
     border-radius: 5px;
     height: 3rem;
     /* background: #c6d8ec; */
     /* color: white; */
     width: 100%;
     display: flex;
     justify-content: center;
     flex-direction: column;
 }
 
 .patronclassinner:hover {
     background: #ecd58d;
     color: #fff3b1;
     cursor: pointer;
 }
 
 .patronclass {
     font-weight: bold;
     /* height: 2.5rem; */
     /* display: flex; */
     /* justify-content: center; */
     /* flex-direction: column; */
     padding: 5px;
     /* width: 100%; */
 }
 
 .container-main {
     padding-left: 0;
     padding-right: 0;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-between;
     gap: 17px;
     margin-top: 25px;
 }
 
 
 .container-1 {
     /* margin: auto; */
     max-width: 1100px;
     width: 150px;
     /* height: 200px; */
     border-radius: 5px;
     overflow: hidden;
     /* opacity: 0.8; */
     flex-grow: 1;
     color: #2a4d69;
     padding-left: 0;
     padding-right: 0;
 }
 
 .container-1:hover {
     opacity: 1;
     transform: scale3d(1.05, 1.05, 1.05);
     cursor: pointer;
     color: white;
 }
 
 .title {
     width: 100%;
     /* max-height: 4em; */
     color: #413c00;
     font-weight: bolder;
     overflow: hidden;
     /* font-weight: bold; */
     font-size: 0.7em;
     padding-top: 5px;
     padding-right: 5px;
     padding-bottom: 5px;
     padding-left: 5px;
     background-size: 200%;
     background-image: linear-gradient(45deg, #00000000 0%, #00000000 20%, #00000000 30%, #f9f4b4ff 50%, #00000000 70%, #00000000 80%, #00000000 100%), linear-gradient(90deg, #cfa453 30%, #ffc963 50%, rgb(202, 162, 87) 70%);
     user-select: none;
     text-overflow: ellipsis;
     background-position: center;
     text-transform: uppercase;
     /* overflow-wrap: break-word; */
     white-space: normal;
     text-shadow: 1px 1px 2px #ffe49a, -1px -1px 20px #5d5437;
 }
 
 .item {
     /* width: 100%; */
     /* height: 84px; */
     /* margin: 20px; */
     /* background-size: cover; */
 }
 
 .downloadbutton {
     background: #5995c9;
     color: white;
     width: fit-content;
     border-radius: 5px;
     padding-top: 0.25em;
     padding-right: 0.5em;
     padding-bottom: 0.25em;
     padding-left: 0.5em;
     font-size: 1.25em;
     text-transform: uppercase;
     font-weight: bold;
     box-shadow: 0 3px 1px 0px #00000061;
 }
 
 .downloadbutton:hover {
     user-select: none;
     background: #7ec3ff;
     cursor: pointer;
 }
 
 .downloadbutton:active {
     box-shadow: 0 0 0 0;
     background-color: #c2e3ff
 }
 
 .img-thumbnail {
     height: 180px;
     width: 320px;
 }
 
 .img-fluid2 {
     max-width: 100%;
     /* height: fit-content; */
     /* max-height: 100px; */
     margin-left: auto;
     margin-right: auto;
     overflow: hidden;
     border-radius: 10px;
 }
 
 .imageylink {
     -webkit-transform: scale3d(1, 1, 1);
     transform: scale3d(1, 1, 1);
 }
 
 .imageylink:hover {
     -webkit-transform: scale3d(1.2, 1.2, 1.2);
     transform: scale3d(1.2, 1.2, 1.2);
 }
 
 .bluebg {
     position: relative;
     background: url(../img/bg2.webp) center center;
     /* background-size: cover; */
     /* padding-top: 8rem !important; */
     /* padding-bottom: 8rem !important; */
     z-index: 1;
 }
 
 .whitebg {
     position: relative;
     background: url(../img/bg3.jpg) no-repeat center center;
     background-size: cover;
     padding-top: 8rem;
     padding-bottom: 8rem;
     margin-top: -5em;
     margin-bottom: -5em;
     /* bottom: -5em; */
     z-index: 0;
     /* padding-bottom: 12em !important; */
 }
 
 .purewhite {
     position: relative;
     background: url(../img/bg3.jpg) no-repeat center center;
     background-size: cover;
     padding-top: 8rem;
     padding-bottom: 8rem;
     margin-top: -5em;
     margin-bottom: -5em;
     /* bottom: -5em; */
     z-index: 0;
     /* padding-bottom: 12em !important; */
 }
 
 .showcasebg {
     position: relative;
     background: url(../img/showcasebg.jpg) center center, linear-gradient(226deg, #af5e0f, #ffdbbc, #b14100);
     background-blend-mode: hard-light;
     background-position: center;
     background-size: auto, 100%;
     padding-top: 3rem !important;
     padding-bottom: 5rem !important;
     margin-top: -5em;
     /* bottom: -5em; */
     z-index: 0;
 }
 
 .showcasebg {}
 
 
 .showcasebgyt {
     /* position: relative; */
     background: url(../img/showcasebg.jpg) center center, linear-gradient(44deg, #898989, #ffffff, #6d6d6d);
     background-blend-mode: hard-light;
     background-position: center;
     background-size: auto, 100%;
     /* padding-top: 3rem !important; */
     padding-bottom: 8rem;
     /* margin-top: -5em !important; */
     margin-bottom: -5em;
     /* bottom: -5em; */
     z-index: 0;
     /* padding-bottom: 12em !important; */
 }
 
 .centerthings {
     display: block;
     width: 100%;
     justify-content: center;
     height: auto;
 }
 
 .close {
     position: absolute;
     right: -30px;
     top: 0;
     z-index: 999;
     font-size: 2rem;
     font-weight: normal;
     color: #fff;
     opacity: 1;
 }
 
 html,body{
     overflow-x: hidden;
 }
 
 nav {
     padding-right: 0 !important;
 }
 
 body {
     font-family: "Open Sans", sans-serif;
     position: relative;
 }
 
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: "Century Gothic Bold", Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
     /* font-weight: 100; */
     margin-top: -0.35em;
     color: #5896c9;
 }
 
 header.masthead {
     position: relative;
     background-color: #343a40;
     background: url(../img/vidbg.webp), linear-gradient(45deg, #5f402b, #ffebce);
     background-position: center;
     background-blend-mode: overlay;
     background-size: cover, cover;
     background-repeat: repeat, no-repeat;
     padding-top: 8rem;
     padding-bottom: 8rem
 }
 
 @media(min-width:768px) {
     header.masthead {
         position: relative;
         background-color: #343a40;
         background: url(../img/vidbg.webp), linear-gradient(45deg, #5f402b, #ffebce);
         background-position: center;
         background-blend-mode: overlay;
         background-size: contain, cover;
         background-repeat: repeat, no-repeat;
         padding-top: 8rem;
         padding-bottom: 8rem
     }
 
 
 }
 
 header.masthead .overlay {
     position: absolute;
     background-color: #212529;
     height: 100%;
     width: 100%;
     top: 0;
     left: 0;
     /* background-image: url("../img/pix.png"); */
     opacity: .3;
     background-size: 1%;
 }
 
 .wave {
     background-image: url(../img/TLwhitewave.svg);
     position: absolute;
     bottom: -1px;
     width: 100%;
     height: 70px;
     z-index: 5;
     background-repeat: no-repeat;
 }
 
 .wavetop {
     background-image: url(../img/TLwhitewave.svg);
     position: absolute;
     top: -1px;
     width: 100%;
     height: 70px;
     z-index: 5;
     background-repeat: no-repeat;
 }
 
 .wavebottom {
     background-image: url(../img/TLwhitewave.svg);
 
     position: absolute;
     bottom: -1px;
     width: 100%;
     height: 70px;
     z-index: 5;
 
     -webkit-transform: scale(-1);
     transform: scale(-1);
     background-repeat: no-repeat;
 }
 
 header.masthead .wave {
 
     transform: scaleY(-1) scaleX(-1);
 }
 
 header.masthead h1 {
     font-size: 2rem
 }
 
 @media (min-width:768px) {
 
 
     .h1blue {
         color: #ffffff;
         text-shadow: -2px 4px 0px #8e9eb3;
         font-size: 3rem;
     }
 
     #abouttitle {
         /* margin-top: 2em; */
         margin-left: 0;
         /* margin-right: 4em; */
     }
 
 
     .doublewrap {
         flex-wrap: nowrap;
     }
 
     .nbicons {
         display: flex;
     }
 
     .container-1 {
         /* width: 240px; */
         border-radius: 10px;
     }
 
     .title {
         font-size: .85em;
         /* height: 50px; */
         padding-top: 5px;
     }
 
     .item {
         /* width: 240px; */
         /* height: 134px; */
     }
 
     header.masthead {
         padding-top: 12rem;
         padding-bottom: 12rem;
         margin-top: 60px;
     }
 
     header.masthead h1 {
         font-size: 3rem
     }
 }
 
 .showcase .showcase-text .commercialshowcase {
     padding: 3rem
 }
 
 .showcase .showcase-img .commercialshowcase {
     min-height: 30rem;
     background-size: cover
 }
 
 @media (min-width:768px) {
 
 
     .stats {
         max-width: 71%;
         margin-left: auto;
         margin-right: auto;
 
     }
 
     .projecttitle {
         margin-left: auto;
         margin-right: auto;
         width: fit-content;
         font-family: "Century Gothic", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
         font-weight: 700;
         font-size: 2rem;
         padding: 2rem;
         padding-top: 1rem;
         padding-bottom: 1rem;
         text-transform: uppercase;
 
     }
 
     .projectsubtitle {
         font-family: 'Century Gothic', Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
         margin-top: 1rem;
         font-weight: 700;
         font-size: 1.5rem;
         text-transform: uppercase;
     }
 
     .headertext {
         margin-left: auto;
         margin-right: auto;
         width: 70%;
         font-size: 2em !important;
     }
 
     .main-logo-img {
         width: 70%;
 
     }
 
     .showcase .showcase-text {
         padding: 7rem
     }
 }
 
 .features-icons {
     padding-top: 6rem;
     padding-bottom: 6rem;
 }
 
 .features-icons .features-icons-item {
     max-width: 20rem
 }
 
 .features-icons .features-icons-item .features-icons-icon {
     height: 7rem
 }
 
 .features-icons .features-icons-item .features-icons-icon i {
     font-size: 4.5rem
 }
 
 .features-icons .features-icons-item:hover .features-icons-icon i {
     font-size: 5rem
 }
 
 .testimonials {
     padding-top: 7rem;
     padding-bottom: 7rem
 }
 
 .testimonials .testimonial-item {
     max-width: 18rem
 }
 
 .testimonials .testimonial-item img {
     max-width: 12rem;
     -webkit-box-shadow: 0 5px 5px 0 #adb5bd;
     box-shadow: 0 5px 5px 0 #adb5bd
 }
 
 .downloadhref:hover {
     text-decoration: none;
 }
 
 .call-to-action {
     position: relative;
     background-color: #343a40;
     background: url(../img/bg.jpg) no-repeat center center;
     background-size: cover;
     padding-top: 7rem;
     padding-bottom: 7rem
 }
 
 .call-to-action .overlay {
     position: absolute;
     background-color: #212529;
     height: 100%;
     width: 100%;
     top: 0;
     left: 0;
     opacity: .3
 }
 
 footer.footer {
     padding-top: 4rem;
     padding-bottom: 4rem
 }
 
 @media(min-width:992px) {
     .vntext {
         padding-bottom: 4em !important;
     }
 
     .youtube-video {
         margin-bottom: auto;
     }
 
     .shows_box {
         height: 150%;
         width: 133.5%;
         position: absolute;
         top: -25%;
         left: -19%;
         clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
     }
 
     .mask {
         /* -webkit-mask-image: -webkit-linear-gradient(white,white), url("../img/TLwhitewave.svg"),url("../img/BRwhitewave.svg"); */
         /* -webkit-mask-repeat: no-repeat,no-repeat,no-repeat; */
         /* -webkit-mask-position: center,0px -1px, bottom right; */
         /* -webkit-mask-size: 100% 101%,1200px,1199px; */
         /* -webkit-mask-composite: xor; */
         /* mask: linear-gradient(#ffffff,#ffffff), url("../img/TLwhitewave.svg"),url("../img/BRwhitewave.svg"); */
         /* mask-repeat: no-repeat; */
         /* mask-position: center,top left, bottom right; */
         /* mask-size: 101%,1200px,1200px; */
         /* mask-composite: subtract,add; */
         clip-path: polygon(100% calc(100% - 4.0px), calc(50% + 600.0px) calc(100% - 4.0px), calc(50% + 576.0px) calc(100% - 4.0576px), calc(50% + 552.0px) calc(100% - 4.2176px), calc(50% + 528.0px) calc(100% - 4.4928px), calc(50% + 504.0px) calc(100% - 4.8768px), calc(50% + 480.0px) calc(100% - 5.3696px), calc(50% + 456.0px) calc(100% - 5.9648px), calc(50% + 432.0px) calc(100% - 6.6624px), calc(50% + 408.0px) calc(100% - 7.462400000000001px), calc(50% + 384.0px) calc(100% - 8.3584px), calc(50% + 360.0px) calc(100% - 9.3504px), calc(50% + 336.0px) calc(100% - 10.4256px), calc(50% + 312.0px) calc(100% - 11.5904px), calc(50% + 288.0px) calc(100% - 12.832px), calc(50% + 264.0px) calc(100% - 14.1504px), calc(50% + 240.0px) calc(100% - 15.539200000000001px), calc(50% + 216.0px) calc(100% - 16.9984px), calc(50% + 192.0px) calc(100% - 18.5088px), calc(50% + 168.0px) calc(100% - 20.076800000000002px), calc(50% + 144.0px) calc(100% - 21.689600000000002px), calc(50% + 120.0px) calc(100% - 23.347199999999997px), calc(50% + 96.0px) calc(100% - 25.0368px), calc(50% + 72.0px) calc(100% - 26.752px), calc(50% + 48.0px) calc(100% - 28.492800000000003px), calc(50% + 24.0px) calc(100% - 30.240000000000002px), calc(50% + 0.0px) calc(100% - 32.0px), calc(50% - 24.0px) calc(100% - 33.76px), calc(50% - 48.0px) calc(100% - 35.5072px), calc(50% - 72.0px) calc(100% - 37.248000000000005px), calc(50% - 96.0px) calc(100% - 38.9632px), calc(50% - 120.0px) calc(100% - 40.652800000000006px), calc(50% - 144.0px) calc(100% - 42.3104px), calc(50% - 168.0px) calc(100% - 43.9232px), calc(50% - 192.0px) calc(100% - 45.4912px), calc(50% - 216.0px) calc(100% - 47.001599999999996px), calc(50% - 240.0px) calc(100% - 48.4608px), calc(50% - 264.0px) calc(100% - 49.8496px), calc(50% - 288.0px) calc(100% - 51.168000000000006px), calc(50% - 312.0px) calc(100% - 52.409600000000005px), calc(50% - 336.0px) calc(100% - 53.5744px), calc(50% - 360.0px) calc(100% - 54.6496px), calc(50% - 384.0px) calc(100% - 55.6416px), calc(50% - 408.0px) calc(100% - 56.537600000000005px), calc(50% - 432.0px) calc(100% - 57.3376px), calc(50% - 456.0px) calc(100% - 58.0352px), calc(50% - 480.0px) calc(100% - 58.6304px), calc(50% - 504.0px) calc(100% - 59.1232px), calc(50% - 528.0px) calc(100% - 59.507200000000005px), calc(50% - 552.0px) calc(100% - 59.782399999999996px), calc(50% - 576.0px) calc(100% - 59.9424px), calc(50% - 600.0px) calc(100% - 60.0px), 0% calc(100% - 60.0px), 0% 60.0px, calc(50% - 600.0px) 60.0px, calc(50% - 576.0px) 59.9424px, calc(50% - 552.0px) 59.782399999999996px, calc(50% - 528.0px) 59.507200000000005px, calc(50% - 504.0px) 59.1232px, calc(50% - 480.0px) 58.6304px, calc(50% - 456.0px) 58.0352px, calc(50% - 432.0px) 57.3376px, calc(50% - 408.0px) 56.537600000000005px, calc(50% - 384.0px) 55.6416px, calc(50% - 360.0px) 54.6496px, calc(50% - 336.0px) 53.5744px, calc(50% - 312.0px) 52.409600000000005px, calc(50% - 288.0px) 51.168000000000006px, calc(50% - 264.0px) 49.8496px, calc(50% - 240.0px) 48.4608px, calc(50% - 216.0px) 47.001599999999996px, calc(50% - 192.0px) 45.4912px, calc(50% - 168.0px) 43.9232px, calc(50% - 144.0px) 42.3104px, calc(50% - 120.0px) 40.652800000000006px, calc(50% - 96.0px) 38.9632px, calc(50% - 72.0px) 37.248000000000005px, calc(50% - 48.0px) 35.5072px, calc(50% - 24.0px) 33.76px, calc(50% + 0.0px) 32.0px, calc(50% + 24.0px) 30.240000000000002px, calc(50% + 48.0px) 28.492800000000003px, calc(50% + 72.0px) 26.752px, calc(50% + 96.0px) 25.0368px, calc(50% + 120.0px) 23.347199999999997px, calc(50% + 144.0px) 21.689600000000002px, calc(50% + 168.0px) 20.076800000000002px, calc(50% + 192.0px) 18.5088px, calc(50% + 216.0px) 16.9984px, calc(50% + 240.0px) 15.539200000000001px, calc(50% + 264.0px) 14.1504px, calc(50% + 288.0px) 12.832px, calc(50% + 312.0px) 11.5904px, calc(50% + 336.0px) 10.4256px, calc(50% + 360.0px) 9.3504px, calc(50% + 384.0px) 8.3584px, calc(50% + 408.0px) 7.462400000000001px, calc(50% + 432.0px) 6.6624px, calc(50% + 456.0px) 5.9648px, calc(50% + 480.0px) 5.3696px, calc(50% + 504.0px) 4.8768px, calc(50% + 528.0px) 4.4928px, calc(50% + 552.0px) 4.2176px, calc(50% + 576.0px) 4.0576px, calc(50% + 600.0px) 4.0px, 100% 4.0px);
         margin-top: -5em;
         margin-bottom: -5em;
         z-index: 3 !important;
         position: relative;
     }
 
     .lowreverse {
         flex-direction: row;
         flex-wrap: wrap;
     }
 
     .england {
 
         padding: 0em;
     }
 
     #masterpieceinfoplaylist {
         margin-top: 3em;
     }
 
     #commercialmasterpieceinfoplaylist {
         margin-top: 3em;
     }
 
     .playlistitem {
         /* width: 100%; */
         background: rgb(96 177 243);
         border-radius: 0.5em;
         display: flex;
         cursor: pointer;
 
         /* overflow: hidden; */
         height: unset;
         /* max-height: 3em; */
         /* padding: 4px; */
         /* justify-content: center; */
         /* vertical-align: middle; */
     }
 
     .playlistthumb {
         display: block;
     }
 
     #showcase {
         padding-left: 8em;
         padding-right: 8em;
     }
 
     #commercial {
         padding-left: 8em;
         padding-right: 8em;
     }
 
     .img-right {
         float: right !important;
         max-width: 50%;
     }
 
     .img-left {
         float: left !important;
         max-width: 50%;
     }
 
     .modaltitle {
         font-size: 2em;
         /* top: -2em; */
     }
 
     .navbar-nav {
         margin-top: 0em;
     }
 
     .modalcontentinner {
         /* background: blue; */
         /* padding: 2em; */
         /* z-index: 1; */
         position: relative;
     }
 }
 
 .pbuttoncontainer {
     position: absolute;
     width: 100%;
     bottom: -4em;
     left: 1em;
 }
 
 .patronbuttonbase {
     background: #199bdb;
     /* border-radius: 0.25em; */
     padding: 1em;
     color: white;
     margin-left: auto;
     margin-right: auto;
     width: 79%;
     text-align: center;
     padding: 1rem;
     /* font-size: 1.25rem; */
     cursor: pointer;
     user-select: none;
     display: flex;
 }
 
 .patronbuttonicon {
     width: 59px;
     background-image: url("../img/patreonwhite.svg");
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
 }
 
 .namesbuttonicon {
     width: 59px;
     background-image: url(../img/star.svg);
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
 }
 
 .patronbuttonbase:hover {
     /* color: white; */
     filter: brightness(1.2);
     /* cursor: pointer; */
     transform: translate(-2px, -2px);
 }
 
 .patronbuttonbase:active {
     /* color: white; */
     filter: brightness(0.8);
     /* cursor: pointer; */
     transform: translate(2px, 2px);
 }
 
 .becomepatronbutton {
     clip-path: polygon(3% 5%, 93% 8%, 98% 91%, 0% 98%);
     rotate: -5deg;
     background-color: #4685b5;
 }
 
 .shownamesbutton {
     clip-path: polygon(5% 7%, 94% 0, 99% 100%, 0 93%);
     rotate: 7deg;
     background-color: #4685b5;
     /* display: flex; */
     background-color: #d78a03;
 }
 
 @media (min-width:1200px) {
     .edgefix {
         min-width: inherit
     }
 
     .moreonyoutubecontainer {
         padding-left: 4em;
         padding-right: 4em;
     }
 
     #masterpieceinfo {
         /* background: #bf8945; */
 
         margin-left: 4em;
         margin-right: 4em;
     }
 
     #commercialmasterpieceinfo {
         /* background: #bf8945; */
 
         margin-left: 4em;
         margin-right: 4em;
     }
 
     .container-main {
         padding-left: 4em;
         padding-right: 4em;
 
     }
 
     .centerthings {
         display: flex;
         width: 100%;
         justify-content: center;
         height: auto;
     }
 
     .headervideo {
 
         position: absolute;
 
         top: 50%;
 
         left: 50%;
 
         /* min-width: 100%; */
 
         max-height: 100%;
 
         width: auto;
 
         height: 100%;
 
         z-index: 1;
 
         -ms-transform: translateX(-50%) translateY(-50%);
 
         -moz-transform: translateX(-50%) translateY(-50%);
 
         -webkit-transform: translateX(-50%) translateY(-50%);
 
         transform: translateX(-50%) translateY(-50%);
 
         -webkit-mask-image: linear-gradient(to left, transparent, #000000b0, black, black, black, black, black, black, black, #000000b0, transparent);
 
     }
 
 
     .headerbgvideo {
         display: inline;
         position: absolute;
 
         top: 50%;
 
         left: 50%;
 
         min-width: 100%;
 
         /* max-height: 100%; */
 
         /* width: auto; */
 
         /* height: auto; */
 
         z-index: 0;
 
         -ms-transform: translateX(-50%) translateY(-50%);
 
         -moz-transform: translateX(-50%) translateY(-50%);
 
         -webkit-transform: translateX(-50%) translateY(-50%);
 
         transform: translateX(-50%) translateY(-50%);
 
         /* -webkit-mask-image: linear-gradient(to left,transparent,#000000b0,black,black,black,black,black,black,black,#000000b0, transparent); */
 
         filter: blur(30px) brightness(0.7);
 
     }
 }
 
 .sscard {
     position: relative;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-direction: column;
     flex-direction: column;
     min-width: 0;
     word-wrap: break-word;
     background-clip: border-box;
 }
 
 .ssdropdownbtn {
     display: inline-block;
     font-weight: 400;
     text-align: center;
     white-space: nowrap;
     vertical-align: middle;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     border: 1px solid transparent;
     padding: .375rem .75rem;
     font-size: 1rem;
     line-height: 1.5;
     border-radius: .25rem;
     transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
 
 }
 
 .sscardheader {
     padding: .75rem 1.25rem;
     margin-bottom: 0;
     /* background-color: rgba(0, 0, 0, .03); */
     /* border-bottom: 1px solid rgba(0, 0, 0, .125); */
 }
 
 .sscard-body {
     -ms-flex: 1 1 auto;
     flex: 1 1 auto;
     padding: 1.25rem;
     background: none;
     border: none;
     padding-top: 0;
 }
 
 .ssbtn-group {
     margin-left: auto;
     margin-right: auto;
     position: relative;
     display: -ms-inline-flexbox;
     font-size: 0.8em;
     margin-top: 3em;
     /* vertical-align: middle; */
 }
 
 @media(min-width:768px) {
     .ssbtn-group {
         font-size: 1em;
     }
 
 }
 
 .btn-ss {
     color: white;
     border: none;
     background: none;
     cursor: pointer;
     font-weight: bold;
 }
 
 .btn-ss.collapsed {
     color: inherit;
 
 }
 
 .btn-ss:after {
     color: rgb(255, 255, 255);
     content: "\f107";
     /* down arrow */
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
 }
 
 .btn-ss.collapsed:after {
     color: inherit;
 
     content: "\f105";
     /* right arrow */
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
 }
 
 .btn-ss.collapsed:hover {
     color: white;
 
 }
 
 .sscreditsimagecontainer {
     /* rotate: 368deg; */
     /* transform: scale(1.2); */
     z-index: 3;
     border-radius: 0.25em;
     background: url(../img/playcircle.svg), url(http://i3.ytimg.com/vi/n2cOZsgO0OI/hqdefault.jpg);
     background-size: 40%, cover;
     background-repeat: no-repeat;
     background-position: center;
     /* filter: contrast(0.9); */
     clip-path: polygon(0% 0%, 100% 0%, 100% 97%, 0% 95%);
     box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.479);
     width: 100%;
     /* height: 100%; */
     user-select: none;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 .sscreditsimagecontainer:hover {
     transform: scale(1.05);
     cursor: pointer;
     z-index: 5;
     /* box-shadow: 0px 10px 5px rgba(0, 0, 0, 0.479);; */
 }
 
 .sscreditsimagecontainer:active {
     transform: scale(0.95);
 
     /* box-shadow: 0px 7px 4px rgba(0, 0, 0, 0.479) */
 }
 
 .boldtext {
 
     font-weight: bold;
 }
 
 .episodetitle {
     font-weight: bold;
     font-size: 1em;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
 }
 
 @media (min-width:576px) {
 
     .episodetitle {
 
         font-size: 1.2em;
 
     }
 }
 
 .episodeinfocontainer {
     /* background: #ffffff1a; */
     padding: 0.5em;
     /* margin: 0.5em; */
     border-radius: 0.5em;
     /* max-height: 10em; */
     /* Set your desired height */
     /* overflow: hidden; */
     /* position: relative; */
     /* transition: max-height 0.3s ease; */
 }
 
 .creditsimgbuttoncol {
 
     padding: 0;
 }
 
 .innerrow {
     margin: 0;
 
 }
 
 .outerrow {
 
     background: #ffffff2e;
 
     border-radius: 0.5em;
 
     padding: 0.5em;
 }
 
 .episodecreditscol {
     margin-bottom: 1em;
 }
 
 .creditscategoryrow {
     background: #ffffff0d;
     /* margin-top: 1em; */
     padding: 0 !important;
 
     margin: 0 !important;
 
     margin-top: 1em !important;
 
     padding-top: 1em !important;
 
     border-radius: 5px;
     font-size: 0.8em;
 }
 
 .creditsexpanded {
     height: auto !important;
 }
 
 .episodedesc {
 
     font-size: 0.8em;
 }
 
 .readmorebuttonrow {
     width: 100%;
     display: flex;
     flex-direction: row-reverse;
 }
 
 .readmorebutton {
     /* background: #ffffff26; */
     /* border-radius: 5px; */
     /* padding-top: 2px; */
     /* padding-right: 6px; */
     /* padding-bottom: 2px; */
     /* padding-left: 6px; */
     font-size: 0.9em;
     font-weight: bold;
     cursor: pointer;
 }
 
 .hidediv {
     display: none !important;
 }
 
 .texthide {
     display: -webkit-box;
     -webkit-line-clamp: 3;
     /* Limit the number of lines */
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
     transition: all 0.3s ease;
 }
 
 .readmorebutton.creditsopen:after {
     content: " \f0d8";
     /* down arrow */
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
 }
 
 .readmorebutton:after {
     content: " \f0d7";
     /* right arrow */
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
 }
 
 .modal-bg {
     background: rgb(48, 48, 48);
 }
 
 #modalbgloading {
     will-change: transform;
     width: 100px;
     height: 100px;
     background-image: url("../img/jasonface.webp");
     background-size: contain;
     /* background-color: white; */
     background-position: center;
     background-repeat: no-repeat;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) rotate(90deg);
     animation: rotate-clockwise 0.5s linear infinite;
     /* Add animation */
 }
 
 @keyframes rotate-clockwise {
     from {
         transform: translate(-50%, -50%) rotate(0deg);
         /* Starting point */
     }
 
     to {
         transform: translate(-50%, -50%) rotate(360deg);
         /* Ending point */
     }
 }
 
 @media(min-width:768px) {
     #modalbgloading {
         width: 200px;
         height: 200px;
     }
 
 
 }
 
 .solid {
 
     border-top: 3px solid rgb(0 0 0 / 7%);
 }
 
 .trivialine {
 
     margin: 0;
 
 }
 
 .subshowcontainer {
     padding-bottom: 1.5em;
     border-bottom: 2px solid #0000001c;
 }
 
 .subshowcontainer:nth-child(n+1):last-child {
 
     border-bottom: none;
 
 }
 
 .subshowtitle {
     font-size: 1.5em;
     font-weight: bold;
 }
 
 .subshowdesc {}
 
 .subshowtitlesection {
     padding: 0;
     padding-top: 1.5em;
     padding-bottom: 1.5em;
     text-align: center;
     /* border-top: solid #0000001f 2px; */
 }
 
 .sshon-img {
     width: 75%;
     margin-left: auto;
     margin-right: auto;
 }
 
 .sshon-logo {
     width: 75%;
 }
 
 @media(min-width:992px) {
     .sshon-img {
         width: 100%;
     }
 
     .sshon-logo {
         width: 50%;
     }
 
     .musicvideologo {
         width: 100%;
     }
 }
 
 .ss-othervideos {
 
     background-color: rgb(64 66 71);
 
     /* padding-top:0 !important; */
 
     background-image: linear-gradient(65deg, #535353, #6f6f6f, #8d8d8d, #ababab, #a8a8a8, #838383, #5f5f5f, #3E3E3F), linear-gradient(62deg, #737373, #f1f1f1);
 
     background-blend-mode: overlay;
 
     color: #dfdfdf;
 
     /* font-weight: bold; */
 }
 
 .musicvidsright {
     width: 100%;
 
 }
 
 .notes-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     /* overflow: hidden; */
     /* Hide notes that go beyond the image */
 }
 
 .note {
     position: absolute;
     font-size: 1em;
     opacity: 1;
     /* animation: moveAndFade 10s cubic-bezier(0,.51,.38,.76) forwards, FadeInOut 10s ease forwards; */
     animation: moveAndFade 10s linear forwards, FadeInOut 10s ease forwards;
 
 
 
     z-index: 2;
     filter: drop-shadow(0px 10px 4px rgba(99, 0, 0, 0.192));
 }
 
 @keyframes moveAndFade {
     0% {
         transform: translate(0, 0) rotate(var(--rotate)) scale(var(--scale));
     }
 
     100% {
         transform: translate(var(--moveX), var(--moveY)) rotate(calc(var(--rotate) + var(--rotateSpeed))) scale(var(--scale));
     }
 }
 
 @keyframes FadeInOut {
     0% {
         opacity: 0;
 
     }
 
     20% {
         opacity: 1;
 
     }
 
     50% {
         opacity: 1;
 
     }
 
     100% {
         opacity: 0;
     }
 }
 
 .mvfg {
     z-index: 3;
     animation: beat 0.7s infinite;
     animation-timing-function: linear;
     transform: scale(1);
 }
 
 
 
 
 .mvbg {
     position: absolute;
     z-index: 1;
     animation: beatbg 0.7s infinite;
     transform: scale(1);
 }
 
 @keyframes beat {
     0% {
         transform: scale(1);
 
     }
 
     45% {
         transform: scale(1);
 
     }
 
     50% {
         transform: scale(1.007);
 
     }
 
     65% {
         transform: scale(1);
     }
 
 
     100% {
         transform: scale(1);
 
     }
 }
 
 @keyframes beatbg {
     0% {
         transform: scale(1);
 
     }
 
     45% {
         transform: scale(1);
 
     }
 
     50% {
         transform: scale(1.0025);
 
     }
 
     65% {
         transform: scale(1);
     }
 
 
     100% {
         transform: scale(1);
 
     }
 }
 
 .musicvidsfavorites {
     font-weight: bold;
     margin-left: auto;
     margin-right: auto;
     color: #ffc983;
     rotate: 8deg;
     margin-top: 2em;
     margin-bottom: 1em;
     z-index: 10;
     filter: drop-shadow(0px 4px 0px rgb(82, 43, 12));
 }
 
 .musicvidsfavorites svg {
     width: 50%;
 }
 
 @media (min-width:992px) {
     .musicvidsfavorites {
         margin-bottom: 0;
 
     }
 
     .musicvidsfavorites svg {
         width: 100%;
     }
 }
 
 .widersubtitle {
     max-width: 38em !important;
     top: 0em !important;
 }
 
 
 .otherbottomcols {
     width: 100%;
     /* background: blue; */
     padding: 1em;
 }
 
 .otherbottomcolsrow {
     /* gap: 5px; */
     /* flex-direction: row; */
 
 }
 
 .commercialstuffcol {
 
     /* padding-left: 0; */
 
     background: #ffffff;
 
     /* border-radius: 1em; */
 
     padding: 2em;
 
     /* box-shadow: -2px 1px 0px 0px #00000030; */
 
     /* border: #1d4f71 solid 6px; */
 
     -moz-box-shadow: inset 0px 0px 0px 10px #f00;
 
     /* box-shadow: inset 0px 0px 0px 6px #00172b; */
 
     /* padding-left: 0; */
 
     /* padding-right: 0; */
 
     width: 100%;
 
     user-select: none;
 
     height: 100%;
 
     background-size: cover;
 
     cursor: pointer;
 
     background-image: url(../img/mooncollision.webp);
 
     margin: 0;
 
     background-repeat: no-repeat;
 
     top: 0;
 
     left: 0;
 
     flex-direction: row-reverse;
 
     position: absolute;
 
     clip-path: polygon(0% 0%, 100% 3%, 100% 98%, 2% 99%);
 }
 
 
 .youtubestuffcol {
 
     /* padding-left: 0; */
 
     background: #ffffff;
 
     /* border-radius: 1em; */
 
     padding: 2em;
 
     /* box-shadow: -12px 5px 0px 0px #b10c0c; */
 
     /* border: #5995c9 solid 6px; */
 
     /* padding-left: 0; */
 
     /* padding-right: 0; */
 
     width: 100%;
 
     user-select: none;
 
     cursor: pointer;
 
     height: 100%;
 
     margin: 0;
 
     top: 0;
 
     left: 0;
 
     position: absolute;
 
     clip-path: polygon(1% 0%, 98% 0%, 100% 99%, 0% 96%);
 }
 
 
 .ytlinktextclass {
     color: #1e6caf;
     font-size: 2.5vw;
     font-weight: bold;
     /* font-family: 'Open Sans'; */
     max-height: 60%;
 }
 
 .commlinktextclass {
     font-size: 2.15vw;
     font-weight: bold;
     color: #ffe2c8;
 }
 
 .otherbottomcolsrow {
     font-size: 0.75em;
 }
 
 @media (min-width:576px) {
     .otherbottomcolsrow {
         font-size: 1em;
     }
 
     .ytlinktextclass {
         font-size: 1.25em;
 
     }
 
     .commlinktextclass {
         font-size: 1em;
     }
 }
 
 
 
 .ytlinkimageclass {
     width: 100%;
     /* padding-left: 1em; */
     padding-top: 2em;
     /* padding-right: 1em; */
 }
 
 .ytlinkcheeseimageclass {
     color: #1e6caf;
     font-size: 1.5em;
     font-weight: bold;
     /* font-family: 'Open Sans'; */
 }
 
 .embed-no-overflow {
     overflow: visible;
 }
 
 .tycommbutton {
     filter: drop-shadow(2px 8px 4px #00000020);
 }
 
 .tycommbutton:hover {
     transform: scale(1.05);
     filter: drop-shadow(2px 9px 12px #00000077);
 }
 
 .tycommbutton:active {
     transform: scale(0.95);
 }
 
 .fontawesomeicon {
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     font-size: 2em;
     margin: 0.5em;
 }
 
 .bottomclipleft {
 
     clip-path: polygon(100% calc(100% - 4.0px),
             calc(50% + 600.0px) calc(100% - 4.0px),
             calc(50% + 576.0px) calc(100% - 4.0576px),
             calc(50% + 552.0px) calc(100% - 4.2176px),
             calc(50% + 528.0px) calc(100% - 4.4928px),
             calc(50% + 504.0px) calc(100% - 4.8768px),
             calc(50% + 480.0px) calc(100% - 5.3696px),
             calc(50% + 456.0px) calc(100% - 5.9648px),
             calc(50% + 432.0px) calc(100% - 6.6624px),
             calc(50% + 408.0px) calc(100% - 7.462400000000001px),
             calc(50% + 384.0px) calc(100% - 8.3584px),
             calc(50% + 360.0px) calc(100% - 9.3504px),
             calc(50% + 336.0px) calc(100% - 10.4256px),
             calc(50% + 312.0px) calc(100% - 11.5904px),
             calc(50% + 288.0px) calc(100% - 12.832px),
             calc(50% + 264.0px) calc(100% - 14.1504px),
             calc(50% + 240.0px) calc(100% - 15.539200000000001px),
             calc(50% + 216.0px) calc(100% - 16.9984px),
             calc(50% + 192.0px) calc(100% - 18.5088px),
             calc(50% + 168.0px) calc(100% - 20.076800000000002px),
             calc(50% + 144.0px) calc(100% - 21.689600000000002px),
             calc(50% + 120.0px) calc(100% - 23.347199999999997px),
             calc(50% + 96.0px) calc(100% - 25.0368px),
             calc(50% + 72.0px) calc(100% - 26.752px),
             calc(50% + 48.0px) calc(100% - 28.492800000000003px),
             calc(50% + 24.0px) calc(100% - 30.240000000000002px),
             calc(50% + 0.0px) calc(100% - 32.0px),
             calc(50% - 24.0px) calc(100% - 33.76px),
             calc(50% - 48.0px) calc(100% - 35.5072px),
             calc(50% - 72.0px) calc(100% - 37.248000000000005px),
             calc(50% - 96.0px) calc(100% - 38.9632px),
             calc(50% - 120.0px) calc(100% - 40.652800000000006px),
             calc(50% - 144.0px) calc(100% - 42.3104px),
             calc(50% - 168.0px) calc(100% - 43.9232px),
             calc(50% - 192.0px) calc(100% - 45.4912px),
             calc(50% - 216.0px) calc(100% - 47.001599999999996px),
             calc(50% - 240.0px) calc(100% - 48.4608px),
             calc(50% - 264.0px) calc(100% - 49.8496px),
             calc(50% - 288.0px) calc(100% - 51.168000000000006px),
             calc(50% - 312.0px) calc(100% - 52.409600000000005px),
             calc(50% - 336.0px) calc(100% - 53.5744px),
             calc(50% - 360.0px) calc(100% - 54.6496px),
             calc(50% - 384.0px) calc(100% - 55.6416px),
             calc(50% - 408.0px) calc(100% - 56.537600000000005px),
             calc(50% - 432.0px) calc(100% - 57.3376px),
             calc(50% - 456.0px) calc(100% - 58.0352px),
             calc(50% - 480.0px) calc(100% - 58.6304px),
             calc(50% - 504.0px) calc(100% - 59.1232px),
             calc(50% - 528.0px) calc(100% - 59.507200000000005px),
             calc(50% - 552.0px) calc(100% - 59.782399999999996px),
             calc(50% - 576.0px) calc(100% - 59.9424px),
             calc(50% - 600.0px) calc(100% - 60.0px),
             0% calc(100% - 60.0px), 0% 0%,
             100% 0%);
 }
 
 .trivialinecont {
     margin: 1em;
 }
 
 .ss-othervideos-logo {
 
     top: 0;
 
     height: 0px;
 
     z-index: 5;
 }
 
 
 
 .cm-projects {
     padding-top: 9em !important;
     /* background: linear-gradient(327deg, #ffb70078, #ffffff); */
     /* background: linear-gradient(327deg, #3e4859, #000000); */
     background-image: radial-gradient(#8f8f8f, #000000), url(../img/commwaveA.svg), url(../img/commwaveB.svg), url(../img/commwaveC.svg), linear-gradient(180deg, #999999, #000000), url("../img/commwaveA.svg"), url("../img/commwaveB.svg"), url("../img/commwaveC.svg");
     background-color: #272727;
     /* Image fills the div's width, adjusts height automatically */
     background-repeat: repeat-x;
     background-size: 100% 100%, 110em 41em, 65em 41em, 29em 41em;
     background-position-x: 0em, 0em, 0em;
     background-position-y: 0, -400%, -200%, -150%;
     animation: commwavesUp 1s cubic-bezier(.07, .65, .36, 1) forwards, commwaves 20s linear infinite;
     /* Animate the background */
     /* padding-bottom: 0rem !important; */
     background-blend-mode: overlay, normal, normal, normal, normal;
     margin-bottom: -4rem !important;
 }
 
 @keyframes commwavesUp {
     from {
         background-position-y: 0, 25em, 23em, 21em;
     }
 
     to {
         background-position-y: 0, 17em, 19em, 20em;
     }
 }
 
 @keyframes commwaves {
     from {
         background-position-x: 0, 55em, 0em, 0em;
     }
 
     to {
         background-position-x: 0, 275em, 130em, 58em;
     }
 }
 
 #cmourprojectstitle {
     position: relative;
     width: 100%;
     /* Set this to your desired container width */
     max-width: 90%;
     /* Optional: max width to control scaling */
     margin: 1em;
     margin-left: auto;
     animation: glassesDownContainer 4s linear forwards;
     margin-right: auto;
 }
 
 .commerciallogo {
     width: 100%;
     position: relative;
     height: auto;
     /* Keeps the aspect ratio of the base image */
     display: block;
     /* Ensures there’s no extra space */
     z-index: 4;
 }
 
 .commercialoo {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* Ensures the image scales to cover the base image */
 }
 
 .commercialglasses {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* Ensures the image scales to cover the base image */
     animation: glassesDown 2s linear forwards;
 }
 
 @keyframes glassesDown {
     from {
         top: -17em;
     }
 
     to {
         top: 0em;
     }
 }
 
 #cmourprojectstitle img {
     max-width: 100%;
     /* Ensures all images scale with the container */
     height: auto;
 }
 
 @keyframes glassesDownContainer {
     0% {
         transform: scale(1);
     }
 
     50% {
         transform: scale(1);
     }
 
     53% {
         transform: scale(1.05);
     }
 
     100% {
         transform: scale(1);
     }
 
 
 }
 
 #cmprojectssubtitle {
 
     font-weight: bold;
     font-size: 1em;
     padding: 0.5em;
     FONT-VARIANT: JIS83;
     text-align: center;
     color: #67aae5;
     /* display: none; */
     /* background-image: linear-gradient(0deg, #ffffff, #d72a27); */
     display: flex;
     flex-direction: column;
     width: 100%;
     /* margin-top: -2em; */
     width: fit-content;
     margin-left: auto;
     margin-right: auto;
     background-color: #ffffff;
     /* border-radius: 1em; */
     clip-path: polygon(1% 2%, 99% 8%, 100% 93%, 0% 100%);
     padding: 1em;
 }
 
 @media (min-width:576px) {
     #cmprojectssubtitle {
         font-size: 1.2em;
 
     }
 
     #cmourprojectstitle {
         max-width: 75%;
         /* Optional: max width to control scaling */
     }
 }
 
 .cmprojectsubtitlebig {
 
     font-size: 1em;
 
 }
 
 .cmprojectsubtitlesmall {
 
     font-size: 0.8em;
 
     color: #45769b;
 }
 
 #cmprojectssubtitlecontainer {
     margin-left: auto;
     margin-right: auto;
     filter: drop-shadow(0px 8px 0px #00000029);
     max-width: 75%;
 }
 
 #musicvideos_moreinfo svg {
     width: 4em;
     margin-right: 0.5em;
 }
 
 #musicvideos_moreinfo a {
 
     color: inherit;
 
     text-decoration: none;
 
     font-weight: bold;
 }
 
 #musicvideos_moreinfo a:hover {
     color: white;
 
 }
 
 .clientlogos svg {
 
     width: 100%;
 }
 
 .clientstitle {}
 
 .clientlogos {
     overflow: visible;
     max-width: 5em;
 }
 
 @media (min-width:576px) {
     .clientlogos {
         max-width: 7em;
     }
 }
 
 @media (min-width:1200px) {
     .clientlogos {
         max-width: 9em;
     }
 }
 
 .cmprojects_clientsrow {
 
     gap: 2em;
 
     justify-content: center;
 }
 
 #cmprojects_clientscontainer {
     margin-left: auto;
     margin-right: auto;
     color: #ffffff;
 }
 
 .cmprojects_clientstitle {
     margin-left: auto;
     margin-right: auto;
     text-align: center;
     width: 100%;
     margin-top: 2em;
     font-size: 1.2em;
     font-weight: bold;
     font-style: italic;
     color: #c1e5ff;
     margin-bottom: 1em;
 }
 
 .cmtitle {
 
     max-width: 29em;
 
     /* bottom: -2em; */
 
     position: relative;
 
     z-index: 4;
 
     margin-left: auto;
 
     top: -3em;
 
     margin-right: auto;
 
     user-select: none;
 
     /* rotate: -4deg; */
 }
 
 .cmothertitle {
 
 max-width: 29em;
 
 top: -5em;
 
 position: relative;
 
 z-index: 4;
 
 margin-left: auto;
 
 margin-right: auto;
 
 user-select: none;
 
 rotate: 2deg;
 }
 
 .cm-thingswedo {
     background-image: linear-gradient(357deg, #ffffff, #5995c9);
     /* background-color: #5995c9; */
     color: #3f4b7b;
     /* font-size: 0.8em; */
     padding-bottom: 4em;
     padding-top: 10em;
 }
 
 .cm-morethanastudio {
     /* background-color: #ffffff; */
     color: #15466b;
     /* background-image: linear-gradient(0deg, #c3c3c3, #ffffff); */
     /* background-blend-mode: overlay; */
     /* font-size: 0.8em; */
     padding-top: 14em;
     padding-bottom: 10em;
 }
 
 .whatwedotitle {
     font-size: 1.4em;
     font-weight: bold;
     /* color: blue; */
 }
 
 .whatwedosubtitle {
     /* font-weight: bold; */
 }
 
 .whatwedolist {
     margin: 0em;
     margin-top: 1em;
     justify-content: center;
 }
 
 .whatwedolistitem {
     padding: 0.25em;
     border-radius: 000.5em;
     /* background: #9b9b9b; */
     /* display: flex; */
     /* margin: 1em; */
 }
 
 .whatwedolisticon svg {
     width: inherit;
 }
 
 .whatwedolisticon {
     width: 3em;
     /* height: 100%; */
     align-content: center;
 }
 
 .whatwedolisttext {
     font-weight: bold;
     width: 100%;
     padding-left: 1em;
 }
 
 .whatwedolistiteminner {
     display: flex;
     padding: 0.5em;
     border-radius: 0.85em;
     margin: 0;
     height: 100%;
     flex-direction: column;
     background: #ffffff8a;
     box-shadow: -2px 3px #00000026;
 }
 
 .wwdimagecol {
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .wwdimagecol img {
     width: 100%;
 }
 
 .whatwedotop {
     padding-left: 3em;
     padding-right: 2em;
 }
 
 .flextoblock-md {
     display: flex;
 }
 
 .gregg {
     width: 115% !important;
     position: relative;
     right: 0em;
     transform-origin: 50% 85%;
 }
 
 @keyframes greggjump {
     10% {
         top: 0em
     }
 
     ;
 
     15% {
         top: -1.6em;
     }
 
     21% {
         top: -1.9em;
     }
 
     27% {
         top: -2em;
     }
 
     32% {
         top: -1.9em;
     }
 
     37% {
         top: -1.6em;
     }
 
     39% {
         top: 0em;
     }
 }
 
 @keyframes greggscale {
     0% {
         transform: scaleY(100%)
     }
 
     2% {
         transform: scaleY(75%)
     }
 
     4% {
         transform: scaleY(70%)
     }
 
     22% {
         transform: scaleY(100%)
     }
 
     32% {
         transform: scaleY(102%)
     }
 
     43% {
         transform: scaleY(110%)
     }
 
     49% {
         transform: scaleY(85%)
     }
 
     57% {
         transform: scaleY(98%)
     }
 
     72% {
         transform: scaleY(100%)
     }
 }
 
 @keyframes greggwiggle {
     0% {
         rotate: 0deg;
     }
 
     10% {
         rotate: 2deg;
     }
 
     20% {
         rotate: 4.8deg;
     }
 
     25% {
         rotate: 5deg;
     }
 
     30% {
         rotate: 4.8deg;
     }
 
     45% {
         rotate: -4.8deg;
     }
 
     50% {
         rotate: -5deg;
     }
 
     55% {
         rotate: -4.8deg;
     }
 
     75% {
         rotate: 5deg;
     }
 
     90% {
         rotate: 1deg;
     }
 
     100% {
         rotate: 0deg;
     }
 }
 
 @keyframes greggspeechfade {
     0% {
         opacity: 1;
     }
 
     75% {
         opacity: 1;
     }
 
     100% {
         opacity: 0;
     }
 }
 
 
 @media(min-width:992px) {
     .gregg {
         width: 115% !important;
         position: relative;
         /* right: 12em; */
         user-select: none;
         transform: scaleY(1);
     }
 
     .flextoblock-md {
         display: block;
     }
 }
 
 .greggcombinedimage {}
 
 .greggbubble {
     position: absolute;
     width: 0%;
     top: 15%;
     left: 75%;
     rotate: -6deg;
 
 }
 
 @keyframes greggspeech {
     from {
         width: 0%;
         top: 70%;
         left: 70%;
         rotate: 7deg;
     }
 
     to {
         width: 30%;
         top: 25%;
         left: 75%;
         rotate: -15deg;
     }
 }
 
 #greggcontainer {
     cursor: pointer;
     user-select: none;
     z-index: 5;
 }
 
 .floatcancel {
     float: inline-start;
 }
 
 
 .hr-blurry {
     background-image: linear-gradient(90deg, #00000000, #c5c5c557, #00000000);
     border-top: none;
     height: 2px;
 }
 
 .villager5script {
     position: relative;
     z-index: 1;
     transform: scale(0.85)
 }
 
 .villager5l_eye {
     position: absolute;
     transform: scale(0.85) translate(1.5%, 0%);
 
 }
 
 .villager5r_eye {
     position: absolute;
     transform: scale(0.85) translate(0%, 0%);
 }
 
 #vn5container {
     position: relative;
     cursor: pointer;
     user-select: none;
     transform: scale(-1, 1);
     z-index: 5;
 }
 
 .villager5script,
 .villager5l_eye,
 .villager5r_eye {}
 
 
 @keyframes lefteye {
 
     0% {
         transform: scale(0.85) translate(1.5%, 0%);
 
     }
 
     2% {
         transform: scale(0.85) translate(2%, -0.25%);
     }
 
     6% {
         transform: scale(0.85) translate(2%, -0.25%);
     }
 
     30% {
         transform: scale(0.85) translate(1.5%, -0.4%);
     }
 
     50% {
         transform: scale(0.85) translate(1.5%, -0.4%);
     }
 
     52% {
         transform: scale(0.85) translate(2%, 0.15%);
     }
 
     56% {
         transform: scale(0.85) translate(2%, 0.15%);
     }
 
     80% {
         transform: scale(0.85) translate(1.5%, 0%);
     }
 
     100% {
         transform: scale(0.85) translate(1.5%, 0%);
     }
 
 }
 
 @keyframes righteye {
     0% {
         transform: scale(0.85) translate(0%, 0%);
 
     }
 
     2% {
         transform: scale(0.85) translate(0.5%, -0.45%);
     }
 
     6% {
         transform: scale(0.85) translate(0.5%, -0.45%);
     }
 
     30% {
         transform: scale(0.85) translate(0%, -0.5%);
     }
 
     50% {
         transform: scale(0.85) translate(0%, -0.5%);
     }
 
     52% {
         transform: scale(0.85) translate(0.5%, 0%);
     }
 
     56% {
         transform: scale(0.85) translate(0.5%, 0%);
     }
 
     80% {
         transform: scale(0.85) translate(0%, 0%);
     }
 
     100% {
         transform: scale(0.85) translate(0%, 0%);
     }
 
 }
 
 @keyframes lookleft {
     1% {
         transform: scale(0.85) translate(3.2%, -0.5%);
     }
 
     95% {
         transform: scale(0.85) translate(3.2%, -0.5%);
     }
 
 }
 
 @keyframes lookright {
     1% {
         transform: scale(0.85) translate(2.2%, -0.5%);
     }
 
     95% {
         transform: scale(0.85) translate(2.2%, -0.5%);
     }
 
 }
 
 .justify-center {
 
     justify-content: center;
 }
 
 .elementbotbg {
     position: relative;
     transform: translate(0%, 0%) scale(1);
     animation: elementbot 1.75s linear forwards;
     transform-origin: 35% 99%;
 }
 
 .elementbotfg {
     position: absolute;
     transform: translate(0%, 0%) scale(1);
 
     transform-origin: 35% 99%;
 }
 
 @keyframes elementbotbg {
     0% {
         transform-origin: 35% 99%;
     }
 
     0.75% {
         transform-origin: 35% 99%;
         transform: translate(0%, 0%) scale(1) rotate(-3deg);
     }
 
     1.5% {
         transform-origin: 35% 99%;
         transform: translate(0%, 0%) scale(1) rotate(-5deg);
     }
 
     2.25% {
         transform-origin: 35% 99%;
         transform: translate(0%, 0%) scale(1) rotate(-6deg);
     }
 
     3.75% {
         transform-origin: 35% 99%;
         transform: translate(0%, 0%) scale(1) rotate(-7deg);
     }
 
     5.25% {
         transform-origin: 35% 99%;
         transform: translate(0%, 0%) scale(1) rotate(-6deg);
     }
 
     9% {
         transform-origin: 35% 99%;
         transform: translate(0%, 0%) scale(1) rotate(0deg);
     }
 
     9.075% {
         transform-origin: 65% 99%;
         transform: translate(0%, 0%) scale(1) rotate(0deg);
     }
 
     12.75% {
         transform-origin: 65% 99%;
         transform: translate(0%, 0%) scale(1) rotate(14deg);
     }
 
     15.75% {
         transform-origin: 65% 99%;
         transform: translate(0%, 0%) scale(1) rotate(15deg);
     }
 
     17.25% {
         transform-origin: 65% 99%;
         transform: translate(0%, 0%) scale(1) rotate(14.8deg);
     }
 
     18.75% {
         transform-origin: 65% 99%;
         transform: translate(0%, 0%) scale(1) rotate(14deg);
     }
 
     21% {
         transform-origin: 65% 99%;
         transform: translate(0%, 0%) scale(1) rotate(0deg);
     }
 
     21.075% {
         transform-origin: 35% 99%;
         transform: translate(0%, 0%) scale(1) rotate(0deg);
     }
 
     23.25% {
         transform-origin: 35% 99%;
         transform: translate(0%, 0%) scale(1) rotate(-9deg);
     }
 
     24.75% {
         transform-origin: 35% 99%;
         transform: translate(0%, 0%) scale(1) rotate(-12deg);
     }
 
     25.5% {
         transform-origin: 35% 99%;
         transform: translate(0%, 0%) scale(1) rotate(-14deg);
     }
 
     28.5% {
         transform-origin: 35% 99%;
         transform: translate(0%, 0%) scale(1) rotate(-15deg);
     }
 
     30% {
         transform-origin: 35% 99%;
         transform: translate(0%, 0%) scale(1) rotate(-14.9deg);
     }
 
     30.75% {
         transform-origin: 35% 99%;
         transform: translate(0%, 0%) scale(1) rotate(-14deg);
     }
 
     33.75% {
         transform-origin: 35% 99%;
         transform: translate(0%, 0%) scale(1) rotate(0deg);
     }
 }
 
 @keyframes elementbotfg {
     0% {
         transform-origin: 35% 99%;
         transform: translate(5%, 0%) scale(1) rotate(-3deg);
 
     }
 
     0.75% {
         transform-origin: 35% 99%;
         transform: translate(5%, 0%) scale(1) rotate(-3deg);
     }
 
     1.5% {
         transform-origin: 35% 99%;
         transform: translate(5%, 0%) scale(1) rotate(-5deg);
     }
 
     2.25% {
         transform-origin: 35% 99%;
         transform: translate(5%, 0%) scale(1) rotate(-6deg);
     }
 
     3.75% {
         transform-origin: 35% 99%;
         transform: translate(5%, 0%) scale(1) rotate(-7deg);
     }
 
     5.25% {
         transform-origin: 35% 99%;
         transform: translate(0%, 0%) scale(1) rotate(-6deg);
     }
 
     9% {
         transform-origin: 35% 99%;
         transform: translate(0%, 0%) scale(1) rotate(0deg);
     }
 
     9.075% {
         transform-origin: 65% 99%;
         transform: translate(0%, 0%) scale(1) rotate(0deg);
     }
 
     12.75% {
         transform-origin: 65% 99%;
         transform: translate(0%, 0%) scale(1) rotate(14deg);
     }
 
     15.75% {
         transform-origin: 65% 99%;
         transform: translate(0%, 0%) scale(1) rotate(15deg);
     }
 
     17.25% {
         transform-origin: 65% 99%;
         transform: translate(0%, 0%) scale(1) rotate(14.8deg);
     }
 
     18.75% {
         transform-origin: 65% 99%;
         transform: translate(0%, 0%) scale(1) rotate(14deg);
     }
 
     21% {
         transform-origin: 65% 99%;
         transform: translate(0%, 0%) scale(1) rotate(0deg);
     }
 
     21.075% {
         transform-origin: 35% 99%;
         transform: translate(0%, 0%) scale(1) rotate(0deg);
     }
 
     23.25% {
         transform-origin: 35% 99%;
         transform: translate(0%, 0%) scale(1) rotate(-9deg);
     }
 
     24.75% {
         transform-origin: 35% 99%;
         transform: translate(0%, 0%) scale(1) rotate(-12deg);
     }
 
     25.5% {
         transform-origin: 35% 99%;
         transform: translate(0%, 0%) scale(1) rotate(-14deg);
     }
 
     28.5% {
         transform-origin: 35% 99%;
         transform: translate(0%, 0%) scale(1) rotate(-15deg);
     }
 
     30% {
         transform-origin: 35% 99%;
         transform: translate(0%, 0%) scale(1) rotate(-14.9deg);
     }
 
     30.75% {
         transform-origin: 35% 99%;
         transform: translate(0%, 0%) scale(1) rotate(-14deg);
     }
 
     33.75% {
         transform-origin: 35% 99%;
         transform: translate(0%, 0%) scale(1) rotate(0deg);
     }
 
     41.25% {
         transform-origin: 35% 99%;
         transform: translate(9%, 0%) scale(1) rotate(0deg);
     }
 
     50% {
         transform-origin: 35% 99%;
         transform: translate(9%, 0%) scale(1) rotate(0deg);
     }
 
     55% {
         transform-origin: 35% 99%;
         transform: translate(3%, 0%) scale(1) rotate(0deg);
     }
 
     65% {
         transform-origin: 35% 99%;
         transform: translate(3%, 0%) scale(1) rotate(0deg);
     }
 
     70% {
         transform-origin: 35% 99%;
         transform: translate(7%, 0%) scale(1) rotate(0deg);
     }
 
     80% {
         transform-origin: 35% 99%;
         transform: translate(7%, 0%) scale(1) rotate(0deg);
     }
 
     85% {
         transform-origin: 35% 99%;
         transform: translate(5%, 0%) scale(1) rotate(0deg);
     }
 
     100% {
         transform-origin: 35% 99%;
         transform: translate(5%, 0%) scale(1) rotate(0deg);
     }
 }
 
 
 #elementbotcontainer {
     cursor: pointer;
     transform: scale(-0.9, 0.9);
     z-index: 5;
 }
 
 .elementbotshadow {
     position: absolute;
     transform: scale(1);
     transform-origin: 35% 99%;
 
 }
 
 
 @keyframes elementbotshadowleft {
     0% {
         opacity: 1;
     }
 
 
     3.75% {
         opacity: 1;
     }
 
     9% {
         opacity: 1;
     }
 
     15.75% {
         opacity: 0;
     }
 
 
     21% {
         opacity: 1;
     }
 
     21.075% {}
 
     23.25% {}
 
     24.75% {}
 
     25.5% {}
 
     28.5% {
         opacity: 1;
     }
 
     30% {}
 
     30.75% {}
 
     33.75% {
         opacity: 1;
     }
 }
 
 @keyframes elementbotshadowright {
     0% {
         opacity: 1;
     }
 
 
     3.75% {
         opacity: 0;
     }
 
     9% {
         opacity: 1;
     }
 
     15.75% {
         opacity: 1;
     }
 
 
     21% {
         opacity: 1;
     }
 
     21.075% {
         opacity: 1;
     }
 
     23.25% {}
 
     24.75% {}
 
     25.5% {}
 
     28.5% {
         opacity: 0;
     }
 
     30% {}
 
     30.75% {}
 
     33.75% {
         opacity: 1;
     }
 }
 
 .whatwedolistsubtext {
     padding: 0;
     font-size: 0.9em;
     display: inline-block;
     margin-top: 0.5em;
     padding-top: 0.5em;
     border-top: 1px solid #00000033;
 }
 
 .whatwedolistsubtext a {}
 
 .btn-advisory {
     color: #492f29;
     border: none;
     background: #936b41;
     /* margin-left:auto; */
     margin-right: auto;
     margin-top: 1em;
     cursor: pointer;
     font-weight: bold;
     padding: 0.5em;
     border-radius: 0.5em;
     padding-left: 1em;
     padding-right: 1em;
     /* margin-bottom: 1em; */
 }
 
 .btn-advisory:hover {
     color: #ffffff;
 }
 
 .btn-advisory.collapsed {
     /* color: inherit; */
 }
 
 .btn-advisory:after {
     color: inherit;
     content: "\f107";
     /* down arrow */
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
 }
 
 .btn-advisory.collapsed:after {
     color: inherit;
 
     content: "\f105";
     /* right arrow */
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
 }
 
 .btn-advisory.collapsed:hover {
     color: #ffffff;
 }
 
 .collapse {
     -webkit-transition: height 0.35s ease;
     -moz-transition: height 0.35s ease;
     -o-transition: height 0.35s ease;
     transition: height 0.35s ease;
 }
 
 .advisorycard-body {
 
     -ms-flex: 1 1 auto;
 
     flex: 1 1 auto;
 
     /* padding: 1.25rem; */
 
     background: none;
 
     border: none;
 
     padding-top: 0;
 
 }
 
 .greggimaginfo {
 
     position: absolute;
 
     max-width: 85%;
 
     font-size: 0.8em;
 
     background: #bd8544;
 
     color: #fff0c6;
 
     padding-left: 5px;
 
     padding-right: 5px;
 
     padding: 7px;
 
     z-index: 4;
 
     top: 100%;
 }
 
 .elementbotimageinfo {
     transform: scale(-1, 1);
     position: absolute;
     z-index: 5;
     font-size: 0.8em;
     top: 108%;
     background: #595959;
     border-radius: 0.5em;
     color: #ffffff;
     padding-left: 5px;
     padding-right: 6px;
     margin-left: -15px;
     margin-right: -15px;
     padding: 7px;
     border: 1px solid #595959;
 }
 
 #vn5imageinfo {
     transform: scale(-1, 1);
     position: absolute;
     z-index: 5;
     top: 100%;
     font-size: 0.8em;
     background: #4f4027;
     border-radius: 0.5em;
     color: #f1cc88;
     padding-left: 5px;
     padding-right: 6px;
     margin-left: -15px;
     margin-right: -15px;
     padding: 7px;
 }
 
 .infoarrowup {
     width: 0;
     height: 0;
     border-left: 13px solid transparent;
     border-right: 13px solid transparent;
     border-bottom: 13px solid black;
     position: absolute;
     top: -13px;
     left: calc(50% - 7px);
 }
 
 #elementbotimageinfo .infoarrowup {
 
     border-bottom: 13px solid #595959;
 
 }
 
 #vn5imageinfo .infoarrowup {
 
     border-bottom: 13px solid #4f4027;
 
 }
 
 #greggimageinfo .infoarrowup {
 
     border-bottom: 13px solid #bd8544;
 
 }
 
 @media(min-width:992px) {
 
     .elementbotimageinfo {
         top: 110%;
     }
 
     .vn5imageinfo {
         top: 110%;
     }
 
     .greggimaginfo {
         top: 85%;
     }
 }
 
 .mtas-title {
     font-size: 1.5em;
     font-weight: bold;
     color: #85d4f3;
 }
 
 .mtas-other {
     /* font-weight: bold; */
     /* background: #15466b; */
     /* color: white; */
     /* padding: 1em; */
     /* border-radius: 1em; */
 }
 
 .mtas-row {
     margin-top: 1em;
     margin-bottom: 1em;
     background: #15466b;
     color: white;
     padding: 1em;
     border-radius: 1em;
 }
 
 .mtas-top {
     /* font-weight: bold; */
 }
 
 #mtas_col .row {
     margin-left: 0;
     /* rotate: -1deg; */
     margin-right: 0;
 }
 
 #mtas_col {
 
     background: #f5f5f5;
 
     padding: 2em;
 
     /* rotate: 1deg; */
 
     border-radius: 1em;
 
     box-shadow: -7px 5px #00000063;
 
     /* margin-left: 2em; */
 
     /* margin-right: 2em; */
 }
 
 .studioicons {
     color: #85d4f3;
     padding: 0;
 }
 
 #mtas_col a {
     color: #78c5ff;
 }
 
 .scroll-container-all {
 
     /* position: absolute; */
 
     /* background: blue; */
 
     height: 773px;
 
     position: absolute;
 
     left: calc(-400% - 773px);
 
     top: 50%;
 
     transform: translateY(-50%);
 }
 
 .tiledscreenshotlayerone {
     flex: 0 0 auto;
     /* Prevents flex item from shrinking */
     width: 100%;
     /* Set width to ensure proper tiling */
 
     opacity: 1;
 }
 
 .tiledscreenshotlayertwo {
     flex: 0 0 auto;
     /* Prevents flex item from shrinking */
     width: 100%;
     /* Set width to ensure proper tiling */
     animation: infiniteScrolllayer2 40s linear infinite;
     /* Change duration as needed */
     filter: blur(0px);
     opacity: 1;
 }
 
 .scroll-containerlayerone {
     animation: infiniteScroll 100s linear infinite;
     /* Change duration as needed */
     transform: perspective(443px) rotateY(356deg) scale(0.8);
     display: flex;
     /* Ensures elements are lined up horizontally */
     width: 8010px;
     height: 773px;
     background-image: linear-gradient(90deg, #ffffff, #00000000, #ffffff), url(../img/tiledscreenshots.webp);
     background-repeat: repeat-x;
     background-size: 100%, 4010px 773px;
     /* Set the background size to the image size */
     background-position: 0 50%;
     /* Aligns the background */
     opacity: 0.5;
 }
 
 .scroll-containerlayertwo {
     animation: infiniteScrolllayer2 120s linear infinite;
     /* Change duration as needed */
     transform: perspective(443px) rotateY(356deg) scale(1);
     display: flex;
     /* Ensures elements are lined up horizontally */
     width: 8010px;
     height: 773px;
     background-image: linear-gradient(0deg, #ffffff, #00000000, #00000000), linear-gradient(90deg, #ffffff, #ffffffad, #ffffffa1, #ffffff, #ffffff, #ffffff), url(../img/tiledscreenshots.webp);
     background-repeat: repeat-x;
     background-size: 100% 100%, 100% 100%, 4010px 773px;
     /* Set the background size to the image size */
     background-position: 0 0, 0 0, 0 50%;
     /* Aligns the background */
     position: absolute;
     top: 0;
 }
 
 .scroll-container-scaler {
     /* overflow: hidden; */
     /* width: 100%; */
     /* height: 100%; */
     position: absolute;
     top: 50%;
     z-index: -1;
     /* left: -25%; */
     padding-top: 50em;
     transform: translateX(-1500px);
 }
 
 @keyframes infiniteScroll {
     0% {
         background-position-x: 0, 0, 0px;
     }
 
     100% {
         background-position-x: 0, 0, -4010px;
     }
 }
 
 @keyframes infiniteScrolllayer2 {
     0% {
         background-position-x: 0, 0, -2005px;
     }
 
     100% {
         background-position-x: 0, 0, -6015px;
     }
 }
 
 #mtas_col2 {
 
     filter: brightness(1.2) contrast(0.9) drop-shadow(7px 3px #000000aa);
 
 }
 
 .greggrow {
     background-color: #dfd0b5;
     /* border-radius: 1em; */
     /* box-shadow: -2px 3px #7f4a2345; */
     padding: 2em;
     color: #ffffff;
     background-image: linear-gradient(97deg, #c5c5c5, #494949);
     background-blend-mode: overlay;
     clip-path: polygon(calc(0% + 1em) calc(0% + 1em), calc(100% - 1em) calc(0% + 0em), calc(100% - 0em) calc(100% - 1em), calc(0% + 0em) calc(100% - 0em));
 }
 
 .greggrow .whatwedosubtitle {
     color: #494949;
 }
 
 .greggrowouter {
     filter: drop-shadow(-4px 4px #c2722750);
 }
 
 .greggrow .whatwedolistiteminner {
 
 
     background: #73430085;
 }
 
 .greggrow .whatwedotitle {
     color: #a16800;
 }
 
 #greggcontainer {
     color: rgb(85, 72, 41);
 }
 
 
 
 .elementbotrow {
     background-color: #b8cad9;
     /* border-radius: 1em; */
     /* box-shadow: -2px 3px #7f4a2345; */
     padding: 2em;
     color: #ffffff;
     background-image: linear-gradient(97deg, #c5c5c5, #494949);
     background-blend-mode: overlay;
     clip-path: polygon(calc(0% + 1em) calc(0% + 1em), calc(100% - 1em) calc(0% + 0em), calc(100% - 0em) calc(100% - 1em), calc(0% + 0em) calc(100% - 0em));
 }
 
 .elementbotrow .whatwedosubtitle {
     color: #0e3c65;
 }
 
 .elementbotrowouter {
     filter: drop-shadow(4px 4px #00256973);
 }
 
 .elementbotrow .whatwedolistiteminner {
 
     background: #37648b;
 }
 
 .elementbotrow .whatwedotitle {
     color: #37648b;
 }
 
 .whatwedosubtitle p {
     margin: 0;
 }
 
 .villagerrow {
     background-color: #9b9b9b;
     /* border-radius: 1em; */
     /* box-shadow: -2px 3px #7f4a2345; */
     padding: 2em;
     color: #ffffff;
     background-image: linear-gradient(90deg, #e3e3e3, #cfcfcf);
     background-blend-mode: overlay;
     clip-path: polygon(calc(0% + 1em) calc(0% + 0em), calc(100% - 1em) calc(0% + 0em), calc(100% - 0em) calc(100% - 0em), calc(0% + 0em) calc(100% - 1em));
 }
 
 .villagerrow .whatwedosubtitle {
     color: #492f29;
 }
 
 .villagerrowouter {
     filter: drop-shadow(-4px 4px #00000025);
 }
 
 .villagerrow .whatwedolistiteminner {
 
     background: #756c63;
 }
 
 .villagerrow .whatwedotitle {
     color: #936b41;
 }
 
 .villagerrow .whatwedolistsubtext a {
 
     color: #ffd600;
 }
 
 .commercialhighlightstitle {
     max-width: 50em;
     top: 0em;
     position: relative;
     z-index: 4;
     margin-left: auto;
     margin-right: auto;
     user-select: none;
     rotate: 358deg;
     /* height: 12em; */
     filter: drop-shadow(-5px 5px #492c0036) drop-shadow(-1px 1px #724400) drop-shadow(1px -1px #ffe7c6);
 }
 
 .commercialhighlightstitle svg {
     width: 100%;
     /* position: relative; */
 }
 
 .commercialhighlightstitle_bg {
     color: gold;
     position: relative;
 }
 
 .commercialhighlightstitle_fg {
     color: red;
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: revert-layer;
 }
 
 .commercialhighlightsOUTERmask {
     background-image: linear-gradient(45deg, #00000000 0%, #00000000 20%, #00000000 43%, #f9f4b4ff 50%, #00000000 57%, #00000000 80%, #00000000 100%), linear-gradient(90deg, #96702b 40%, #ffd381 50%, #96702b 60%);
     /* -webkit-background-clip: text; */
     -webkit-text-fill-color: transparent;
     mask-image: url(../img/commercialhighlightsbg.svg);
     mask-repeat: no-repeat;
     mask-position: center;
     background-position: center;
     animation: shine 8s infinite;
     animation-timing-function: linear;
     background-size: 792%, 1210%;
     background-position: right, center;
     padding: 1em;
     border-radius: 8px;
     filter: drop-shadow(-1px 4px #976a27);
     width: 100%;
     height: 100%;
 }
 
 .commercialhighlightsINNERshadow {
 
     width: 100%;
 
     height: 100%;
     filter: drop-shadow(1px -1px #e0be89);
 
 }
 
 .commercialhighlightsINNERmask {
     mask-image: url(../img/commercialhighlightstitle.svg);
     mask-repeat: no-repeat;
     width: 100%;
     height: 100%;
     background: blue;
     mask-position: center;
     background-size: 700%, 100%, 700%;
     background-position: right, center, center;
     background-image: linear-gradient(45deg, #00000000 0%, #00000000 20%, #00000000 43%, #f9f4b4ff 50%, #00000000 57%, #00000000 80%, #00000000 100%), linear-gradient(0deg, rgb(193 132 17) 0%, rgb(161 120 58) 50%, #c99322 100%), linear-gradient(30deg, #96702b 40%, #ffd381 50%, #96702b 60%);
     animation: shine 8s linear infinite;
 }
 
 .whplaceholder {
     width: 239px;
     height: 31px;
 }
 
 .csc_pp_container {
     /* height: 27em; */
     background: #9d66e8;
     border-radius: 0.75em;
     padding: 0.5em;
     margin: 0;
     overflow: hidden;
     /* border-radius: 0.25em; */
     background-size: 700%;
     background-image: linear-gradient(45deg, #00000000 0%, #00000000 20%, #00000000 43%, #f9f4b4ff 50%, #00000000 57%, #00000000 80%, #00000000 100%), linear-gradient(90deg, #96702b 40%, #ffd381 50%, #96702b 60%);
     background-position: center;
     /* background-blend-mode: luminosity; */
     box-shadow: -5px 6px #00000057;
     color: #ab8441;
 }
 
 .previous-showcase {
 
     padding-top: 10em !important;
 
     margin-top: 0em;
 
     padding-bottom: 9em !important;
 
 
 }
 
 .csc_pp_desc_button_container {
     /* background: #00000073; */
     margin: 0;
     /* background: #65461085; */
     color: #e5cda1;
     font-weight: bold;
     /* background: #6546104f; */
     color: #593900;
     font-weight: bold;
     padding: 0.25em;
     padding: 0.5em;
 }
 
 .csc_pp_desc_readmorebutton {
     width: 12em;
     /* background: linear-gradient(51deg, #96702b 40%, #ffd381 50%, #96702b 60%); */
     margin-left: auto;
     margin-right: auto;
     padding: 3.5px;
     background-size: 1000%;
     text-align: center;
     background-position: center;
     /* border-radius: 0.25em; */
     /* box-shadow: -1px 2px 0px #00000052; */
     color: #533c00;
     font-size: 0.9em;
     cursor: pointer;
 }
 
 .csc_pp_desc_text {
     background: #6546104f;
     color: #593900;
     font-weight: 500;
     border-radius: 0.5em;
     padding: 0.5em;
 }
 
 .csc_pp_desc_title {
     padding: 0.25em;
     text-align: center;
     font-weight: BOLD;
     font-size: 1.3em;
     /* background: #776e5f; */
     /* background-size: 733%; */
     /* background-image: linear-gradient(45deg, #00000000 0%, #00000000 20%, #00000000 43%, #f9f4b4ff 50%, #00000000 57%, #00000000 80%, #00000000 100%), linear-gradient(90deg, #96702b 40%, #ffd381 50%, #96702b 60%); */
     /* background-position: center; */
     /* background-blend-mode: overlay; */
 }
 
 .csc_pp_desc_container {
     margin: 0px;
     margin-top: 0;
     /* background: #00000073; */
     /* padding: 0.5em; */
     /* border-bottom-left-radius: 0.5em; */
     /* border-top-left-radius: 0.5em; */
     /* border-top-right-radius: 0.5em; */
     /* border-bottom-right-radius: 0.5em; */
     overflow: hidden;
     width: 100%;
 }
 
 .csc_pp_image_container {
     margin: 0;
 
     bottom: 0.em;
     overflow: hidden;
     /* border-radius: 0.5em; */
     border-top-left-radius: 0.5em;
     border-top-right-radius: 0.5em;
 }
 
 .csc_pp_container {}
 
 .csc_pp_col {
     padding: 0em;
     margin: 0.25em;
 }
 
 .videowallabsolute {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
 
 }
 
 .square-video {
     position: relative;
     width: 100%;
     padding-bottom: 100%;
     /* This ensures a 1:1 ratio */
 }
 
 .videowallvideocontainer video {
     position: absolute;
     /* top: 0; */
     /* left: 0; */
     width: 100%;
     height: 100%;
     /* padding: 0.2em; */
     /* border-radius: 0.7em; */
 }
 
 
 
 .tall-video-25 {
     position: relative;
     width: 100%;
     padding-bottom: 25%;
     /* This ensures a 1:1 ratio */
 }
 
 .tall-video-33 {
     position: relative;
     width: 100%;
     padding-bottom: 33.3333%;
     /* This ensures a 1:1 ratio */
 }
 
 .tall-video-50 {
     position: relative;
     width: 100%;
     padding-bottom: 50%;
     /* This ensures a 1:1 ratio */
 }
 
 .tall-video-66 {
     position: relative;
     width: 100%;
     padding-bottom: 66.6666%;
     /* This ensures a 1:1 ratio */
 }
 
 .tall-video-75 {
     position: relative;
     width: 100%;
     padding-bottom: 75%;
     /* This ensures a 1:1 ratio */
 }
 
 .tall-video-100 {
     position: relative;
     width: 100%;
     padding-bottom: 100%;
     /* This ensures a 1:1 ratio */
 }
 
 .tall-video-106 {
     position: relative;
     width: 100%;
     padding-bottom: 106.56666%;
 }
 
 .tall-video-125 {
     position: relative;
     width: 100%;
     padding-bottom: 125%;
     /* This ensures a 1:1 ratio */
 }
 
 .tall-video-133 {
     position: relative;
     width: 100%;
     padding-bottom: 133.3333%;
     /* This ensures a 1:1 ratio */
 }
 
 .tall-video-150 {
     position: relative;
     width: 100%;
     padding-bottom: 150%;
     /* This ensures a 1:1 ratio */
 }
 
 .tall-video-166 {
     position: relative;
     width: 100%;
     padding-bottom: 166.6666%;
     /* This ensures a 1:1 ratio */
 }
 
 .tall-video-175 {
     position: relative;
     width: 100%;
     padding-bottom: 175%;
     /* This ensures a 1:1 ratio */
 }
 
 .tall-video-200 {
     position: relative;
     width: 100%;
     padding-bottom: 200%;
     /* This ensures a 1:1 ratio */
 }
 
 
 /* Override for sm screens to make the videos 16:9 ratio */
 @media (max-width: 992px) {
     .square-video {
         padding-bottom: 50%;
         /*60.25 This ensures a 16:9 ratio */
     }
 
     .tall-video-25 {
         padding-bottom: 50%;
         /* This ensures a 16:9 ratio */
     }
 
     .tall-video-33 {
         padding-bottom: 50%;
         /* This ensures a 16:9 ratio */
     }
 
     .tall-video-50 {
         padding-bottom: 50%;
         /* This ensures a 16:9 ratio */
     }
 
     .tall-video-66 {
         padding-bottom: 50%;
         /* This ensures a 16:9 ratio */
     }
 
     .tall-video-75 {
         padding-bottom: 50%;
         /* This ensures a 16:9 ratio */
     }
 
     .tall-video-100 {
         padding-bottom: 50%;
         /* This ensures a 16:9 ratio */
     }
 
     .tall-video-106 {
         padding-bottom: 50%;
         /* This ensures a 16:9 ratio */
 
     }
 
     .tall-video-125 {
         padding-bottom: 50%;
         /* This ensures a 16:9 ratio */
     }
 
     .tall-video-133 {
         padding-bottom: 50%;
     }
 
     .tall-video-150 {
         padding-bottom: 50%;
         /* This ensures a 16:9 ratio */
     }
 
     .tall-video-166 {
         padding-bottom: 50%;
     }
 
     .tall-video-175 {
         padding-bottom: 50%;
         /* This ensures a 16:9 ratio */
     }
 
     .tall-video-200 {
         padding-bottom: 50%;
         /* This ensures a 16:9 ratio */
     }
 }
 
 @media(max-width:992px) {
 
 
     .video-column:nth-child(4n+1) .videowallvideocontainer {
         clip-path: polygon(calc(0% + 0em) calc(0% + 0.7em), calc(100% - 0em) calc(0% + 0.25em), calc(100% - 1em) calc(100% - 0.5em), calc(0% + 1em) calc(100% - 1em));
     }
 
     .video-column:nth-child(4n+2) .videowallvideocontainer {
         clip-path: polygon(calc(0% + 1em) calc(0% + 0em), calc(100% - 1em) calc(0% + 0.25em), calc(100% - 0em) calc(100% - 1em), calc(0% + 0em) calc(100% - 0em));
     }
 
     .video-column:nth-child(4n+3) .videowallvideocontainer {
         clip-path: polygon(calc(0% + 0em) calc(0% + 1em), calc(100% - 0em) calc(0% + 0em), calc(100% - 0.25em) calc(100% - 1em), calc(0% + 0.25em) calc(100% - 1em));
     }
 
     .video-column:nth-child(4n) .videowallvideocontainer {
         clip-path: polygon(calc(0% + 0em) calc(0% + 0em), calc(100% - 0.25em) calc(0% + 0em), calc(100% - 0em) calc(100% - 1em), calc(0% + 0em) calc(100% - 0.5em));
     }
 
 }
 
 @media(min-width:992px) {
 
 
     .video-column:nth-child(1) .videowallvideocontainer {
         clip-path: polygon(calc(0% + 1em) calc(0% + 0em), calc(100% - 1em) calc(0% + 1em), calc(100% - 0em) calc(100% - 1em), calc(0% + 0em) calc(100% - 0em));
     }
 
     .video-column:nth-child(2) .videowallvideocontainer {
         clip-path: polygon(calc(0% + 0em) calc(0% + 1em), calc(100% - 1em) calc(0% + 0.5em), calc(100% - 0em) calc(100% - 1.5em), calc(0% + 1em) calc(100% - 1em));
     }
 
     .video-column:nth-child(3) .videowallvideocontainer {
         clip-path: polygon(calc(0% + 0em) calc(0% + 1.5em), calc(100% - 1em) calc(0% + 0.75em), calc(100% - 0em) calc(100% - 0em), calc(0% + 0.5em) calc(100% - 1em));
     }
 
     .video-column:nth-child(4) .videowallvideocontainer {
         clip-path: polygon(calc(0% + 1em) calc(0% + 0.25em), calc(100% - 0em) calc(0% + 0em), calc(100% - 0em) calc(100% - 0em), calc(0% + 0em) calc(100% - 0.45em));
     }
 
     .video-column:nth-child(5) .videowallvideocontainer {
         clip-path: polygon(calc(0% + 0em) calc(0% + 0.7em), calc(100% - 0em) calc(0% + 0.25em), calc(100% - 1em) calc(100% - 0.5em), calc(0% + 1em) calc(100% - 1em));
     }
 
     .video-column:nth-child(6) .videowallvideocontainer {
         clip-path: polygon(calc(0% + 0.5em) calc(0% + 0em), calc(100% - 0em) calc(0% + 1em), calc(100% - 0em) calc(100% - 0.5em), calc(0% + 0em) calc(100% - 0em));
     }
 
     .video-column:nth-child(7) .videowallvideocontainer {
         clip-path: polygon(calc(0% + 1em) calc(0% + 0em), calc(100% - 0em) calc(0% + 1em), calc(100% - 1em) calc(100% - 0.5em), calc(0% + 1em) calc(100% - 0.55em));
     }
 
     .video-column:nth-child(8) .videowallvideocontainer {
         clip-path: polygon(calc(0% + 0em) calc(0% + 0.7em), calc(100% - 0em) calc(0% + 0.25em), calc(100% - 1em) calc(100% - 0.5em), calc(0% + 1em) calc(100% - 1em));
     }
 
     .video-column:nth-child(9) .videowallvideocontainer {
         clip-path: polygon(calc(0% + 1em) calc(0% + 0.25em), calc(100% - 1em) calc(0% + 0.25em), calc(100% - 0em) calc(100% - 0.5em), calc(0% + 0.2em) calc(100% - 1em));
     }
 
     .video-column:nth-child(10) .videowallvideocontainer {
         clip-path: polygon(calc(0% + 0em) calc(0% + -0.3em), calc(100% - 0em) calc(0% + 0.25em), calc(100% - 1em) calc(100% - 0.5em), calc(0% + 0.5em) calc(100% - 0em));
     }
 
     .video-column:nth-child(11) .videowallvideocontainer {
         clip-path: polygon(calc(0% + 1em) calc(0% + 0em), calc(100% - 1em) calc(0% + 0.25em), calc(100% - 0em) calc(100% - 1em), calc(0% + 0em) calc(100% - 0em));
     }
 
     .video-column:nth-child(12) .videowallvideocontainer {
         clip-path: polygon(calc(0% + 0.5em) calc(0% + 0.7em), calc(100% - 1em) calc(0% + 0.25em), calc(100% - 1em) calc(100% - 1em), calc(0% + 1em) calc(100% - 1em));
     }
 
     .video-column:nth-child(13) .videowallvideocontainer {
         clip-path: polygon(calc(0% + 0em) calc(0% + 1em), calc(100% - 1em) calc(0% + 0.0em), calc(100% - 0em) calc(100% - 0em), calc(0% + 0em) calc(100% - 0em));
     }
 
     .video-column:nth-child(14) .videowallvideocontainer {
         clip-path: polygon(calc(0% + 0em) calc(0% + 0em), calc(100% - 1em) calc(0% + 0em), calc(100% - 0em) calc(100% - 0.5em), calc(0% + 1em) calc(100% - 0em));
     }
 
     .video-column:nth-child(15) .videowallvideocontainer {
         clip-path: polygon(calc(0% + 0em) calc(0% + 1em), calc(100% - 0em) calc(0% + 1em), calc(100% - 1em) calc(100% - 0.5em), calc(0% + 1em) calc(100% - 0em));
     }
 
     .video-column:nth-child(16) .videowallvideocontainer {
         clip-path: polygon(calc(0% + 1em) calc(0% + 0.8em), calc(100% - 0em) calc(0% + 0.25em), calc(100% - 0.5em) calc(100% - 1em), calc(0% + 0em) calc(100% - 0.55em));
     }
 
     .video-column:nth-child(17) .videowallvideocontainer {
         clip-path: polygon(calc(0% + 1em) calc(0% + 0.8em), calc(100% - 0.5em) calc(0% + 0em), calc(100% - 1em) calc(100% - 0em), calc(0% + 1em) calc(100% - 1.5em));
     }
 
 
 
 }
 
 .video-column {
     padding: 0px;
     margin: 0px;
     cursor: pointer;
 }
 
 .videowallvideocontainer {
     position: absolute;
     width: 100%;
     height: 100%;
 }
 
 .videowalltextcontainer {
     z-index: 10;
     position: absolute;
     bottom: 0;
     left: 0;
     padding: 0.5em;
     color: white;
     border-radius: 0.5em;
     background: #00000066;
     margin: 1em;
 }
 
 .videowalltitle {
     font-weight: bold;
     margin-bottom: 0.25em;
 }
 
 .videowalldescription {}
 
 .videoshapecontainer {
     filter: drop-shadow(-3px 4.5px 0px #00000050);
 }
 
 .videoshapecontainer:hover {
 
     filter: drop-shadow(-3px 4.5px 0px #ffffff50);
 }
 
 #videowall {
    padding: 1em;
}
 
 .videowallshowmorecontainer {
     width: fit-content;
     filter: drop-shadow(-2px 4px 0px #00000020);
     padding: 2em;
     margin-left: auto;
     margin-right: auto;
     cursor: pointer;
 }
 
 .videowallheader {}
 
 .videowallheadertext {
     width: 100%;
     text-align: center;
     font-weight: bold;
     padding-bottom: 1.5em;
     font-size: 1.2em;
     color: #8f7956;
 }
 
 .videowallshowmorebutton {
     padding: 1em;
     background: #efbe62;
     margin-left: auto;
     margin-right: auto;
     width: fit-content;
     /* border-radius: 5px; */
     clip-path: polygon(calc(0% + 0em) calc(0% + 0em), calc(100% - 0em) calc(0% + 0.25em), calc(100% - 0.5em) calc(100% - 0.25em), calc(0% + 0.5em) calc(100% - 0em));
     text-align: center;
     font-weight: bold;
     font-size: 1.2em;
     color: #8f7956;
 }
 
 .videowallshowmorebutton:after {
     color: rgb(255, 255, 255);
     content: "\f105";
     /* down arrow */
     font-family: "Font Awesome 5 Free";
 
     font-weight: bold;
     padding-bottom: 1em;
     font-size: 1em;
     color: #8f7956;
 }
 
 .videowallshowmorecontainer:hover {
 
     transform: translate(2px, -2px);
     filter: drop-shadow(-4px 5px 0px #00000020);
     
 }

 .videowallshowmorecontainer:hover .videowallshowmorebutton {
    color:white
 }

 .videowallshowmorecontainer:hover  .videowallshowmorebutton:after{
    color:white
 }
 .sectionlogo {
     height: 0;
 }
#commInfoContainer{
    /* background: #000000eb; */
    /* color: white; */
    /* padding: 2em; */
    /* clip-path: polygon(calc(0% + 1em) calc(0% + 0.25em), calc(100% - 1em) calc(0% + 0.25em), calc(100% - 0em) calc(100% - 0.5em), calc(0% + 0.2em) calc(100% - 1em)); */
    padding: 1em;
    padding-bottom: 2em;
    background-color: #616161;
    background-image: linear-gradient(345deg, #000000d9, #ffffff00);
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    /* border-radius: 5px; */
    clip-path: polygon(calc(0% + 0em) calc(0% + 0em), calc(100% - 0em) calc(0% + 0.25em), calc(100% - 0.5em) calc(100% - 0.25em), calc(0% + 0.5em) calc(100% - 0em));
    /* text-align: center; */
    /* font-weight: bold; */
    /* font-size: 1.2em; */
    color: #a7a7a7;
    width: 100%;
}



 .subinfocontainer{


 }
 .subinfotitle{
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    background: #181616;
    padding: 0.8em;
    font-size: 1.5em;
    color: #b1b1b1;
    font-weight: bold;
    clip-path: polygon(calc(0% + 0em) calc(0% + 0em), calc(100% - 0em) calc(0% + 0.25em), calc(100% - 0.5em) calc(100% - 0.25em), calc(0% + 0.5em) calc(100% - 0em));
    position: absolute;
    bottom: -1em;
    left: 0;
    right: 0;
}

 .subinfoimage{}

 .sub_info_content_container{
    margin-top: 2em;
    padding: 1em;
}

 .subinfotitlecontainer{
    position: relative;
}

.commcontactcontainer{

padding: 5em;

text-align: center;
}
.commcontacttitle{
    font-size: 1.5em;
    font-weight: bold;
}

.commcontactmessage{}
.commcontact{}

#contactbutton:active{}
#contactbutton:hover{
    background: #89b3d8;
}

#contactbutton {
    padding: 1em;
    background: #5995c9;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    /* border-radius: 5px; */
    clip-path: polygon(calc(0% + 0em) calc(0% + 0em), calc(100% - 0em) calc(0% + 0.25em), calc(100% - 0.5em) calc(100% - 0.25em), calc(0% + 0.5em) calc(100% - 0em));
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
    color: #ffffff;
    /* background-image: url("../img/contactbutton.svg"); */
    width: 10em;
    /* height: 3em; */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%;
    margin-top: 1em;
    user-select: none;
    cursor: pointer;
}
.contactmodalcont{
    background: #5995c9;
    padding: 1em;
    border-radius: 1em;
}
.privacymodalcont{
    background: #5995c9;
    padding: 1em;
    border-radius: 1em;
}
.contactmodaltitle{
    color: white;
    margin-left: auto;
    margin-right: auto;
    font-weight: bold;
}
.contactfooter{
    border: none;
    padding: 0;
}
.contactmodalbody{}
.contactmodaltext{
    text-align: center;
    color: white;
}
.contactmodaltext a{
    color:#ffa500;
    font-weight:bold;
}
#contact-form{
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    color: white;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
    z-index: 10000;
    position: fixed;
    margin-left: 0;
    margin-right: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display:none;
}


#navbar-placeholder{display:block;}

@media(min-width:576px){
#privacyModal .modal-dialog{ max-width:750px}
}

.privacymodalbody{
    padding: 2em;
}
.privacymodaltext{
    color: white;
}
.privacymodaltext a{
    color:#ffa500;
    font-weight:bold;
}