/* #############################################################################################*/
/* HOME BOX ####################################################################################*/
/* #############################################################################################*/
.srvBoxC {
   position: relative;
   overflow: visible;
   left: -4px;
   width: 101%;
   overflow: hidden;
}

.srvBox22 {
   position: relative;
   float: left;
   left: -0px;
   overflow: hidden;
   width: 330px; /* SERVICES BOX WIDTH   ################################## */
   height: 250px;
   border: 0px;
   margin-right: 5px;
   margin-bottom: 5px;
   border-radius: 40px 5px 15px 5px;
   background-color: black;
}
.srvBox22SF {
   position: relative;
   float: left;
   overflow: hidden;
   width: 100%; /* SERVICES BOX WIDTH   ################################## */
   height: 250px;
   border: 0px;
   margin-bottom: 30px;
   border-radius: 40px 5px 15px 5px;
   background-color: black;
}
.boxImg {
   position: relative;
   width: 330px;        /* SERVICES BOX WIDTH   ################################## */
   height: 255px;
   z-index: 0;
   filter: grayscale(50%);
   opacity: 0.75;
   box-shadow: 0px 0px 100px -20px inset black;
   transition: filter .5s, opacity .5s, box-shadow .5s;
   background-size: cover;
}
.boxImgSF {
   width: 500px; /* SERVICES BOX WIDTH   ################################## */
   height: 255px;
}

.boxCurt {
   position: relative;
   height: 350px;
   margin-top: -255px;
   bottom: 0px;
   z-index: 10;
   transition: bottom .5s;
}
.boxBrk {
   position: relative;
   float: left;
   width: 6px;
   height: 250px;
}

.boxTit {
   font-weight: bolder;
   font-size: 22px;
   height: 45px;
   border: 0px;
   color: White;
   text-indent: 22px;
}
.boxTitSF {
   font-weight: bolder;
   font-size: 24px;
   height: 45px;
   border: 0px;
   color: White;
   text-indent: 22px;
}
.srvBox22 UL {
   font-weight: bold;
   font-size: 20px;
   color: White;
   margin: 0;
   margin-top: 10px;
   margin-bottom: 20px;
}
.srvBox22SF UL {
   font-weight: bold;
   font-size: 22px;
   color: White;
   margin: 0;
   margin-top: 10px;
   margin-bottom: 20px;
}
.boxCurt:hover {
   cursor: pointer;
   bottom: 100px;
}
/* #############################################################################################*/
/* MULTIMEDIA BOX ##############################################################################*/
/* #############################################################################################*/
.mmMask {
   -display: none;
   position: fixed;
   width: 100%;
   height: 100%;
   z-index: 5;
   opacity: 0;
   background: black;
   transition: opacity 1s;
}
.mmTab {
   position: fixed;
   cursor: pointer;
   bottom: 0px;
   width: 100%;
   height: 100%;
   z-index: 2000;
   border: 0px;
   opacity: 0;
   transition: bottom 1s, opacity 1s;
}
.ytPlTab {
   overflow: hidden;
   width: 100%;
   height: 350px;
   border: 0px;
   margin: 0px;
   padding: 0px;
   box-shadow: 0px 0px 180px -0px #0053ff;
}
.ytPlTabSF {
   width: 90%;
}
#ytPlayer {
   position: relative;
   top: 3px;
   width: 100%;
   height: 100%;
   aspect-ratio: 16 / 9;
}
.plTimerExt {
   position: relative;
   top: -185px;
   left: 15px;
   width: 102px;
   height: 102px;
   border-radius: 51px;
   background-color: black;
   z-index: 2500;
   background-image: conic-gradient(black 0deg, red 360deg, black 360deg 350deg);
   box-shadow: -5px 0px 35px 0px #0053ff;
   transform: scale(1.5);
   transition: transform .5s;
}
.plTimerInt {
   width: 100px;
   height: 100px;
   font-weight: bold;
   text-shadow: 3px 3px 2px rgba(0,0,0, 0.75);
   border-radius: 50px;
   background-color: black;
   background-image: conic-gradient(black 0deg, green 360deg, black 360deg 350deg);
}
.plTimer:hover {
   transform: scale(1.7);
}
.plCurT {
   font-size: 30px;
}
.plTotT {
   position: relative;
   top: -5px;
}
.areaFilter {
   position: relative;
   float: left;
   left: 3px;
   width: 165px;
   height: 36px;
   font-size: 20px;
   letter-spacing: 1px;
   color: white;
   margin: 0px 1px 0px 1px;
   padding-top: 2px;
   border-radius: 0px 10px 0px 0px;
   filter: drop-shadow(2px 2px 4px black) saturate(90%);
   transition: transform .2s, filter .2s;
}
.areaFilterM {
   width: 155px;
}
.areaFOra {
   background-color: #ba5600;
   border-bottom: solid 5px #ffaa00;
}
.areaFBlu {
   background-color: #205d89;
   border-bottom: solid 5px #4999b4;
}
.areaFoff {
   background-color: #666;
   border-bottom: solid 5px #999;
   filter: brightness(50%);
}
.areaFilterS {
   position: relative;
   float: left;
   left: 3px;
   width: 165px;
   height: 36px;
   font-size: 20px;
   letter-spacing: 1px;
   margin: 0px 1px 0px 1px;
   padding-top: 2px;
   border-radius: 0px 10px 0px 0px;
   filter: drop-shadow(2px 2px 4px black) brightness(150%) saturate(100%);
   transform: scale(1.075);
}
.areaFilterSM {
   width: 155px;
}

.areaFilter:hover {
   cursor: pointer;
   filter: drop-shadow(2px 2px 4px black) brightness(150%);
   transform: scale(1.075);
}
.areaFoff:hover {
   cursor: pointer;
   z-index: 6;
   filter: brightness(90%);
   transform: scale(1.05);
}
.mmCRmsg {
   position: relative;
   font-size: 22px;
   padding: 3px 15px 3px 15px;
   border: solid 3px #66d9ff;
   border-radius: 10px;
   background-color: black;
   z-index: 20;
   transform: scale(.5);
   box-shadow: 0px 0px 25px -2px #0063ff;
   opacity: 0;
   transition: transform .5s, opacity .5s;
}
iframe {
   position: relative;
   -top: 3px;
   margin: 0px;
   padding: 0px;
   border: 0px;
}
.ytBtt {
   position: relative;
   overflow: hidden;
   z-index: 3;
   height: 50px;
   margin: 5px;
   filter: drop-shadow(2px 2px 4px black);
   transition: transform .5s;
}
.ytBtt:hover {
   cursor: pointer;
   transform: scale(1.25);
}
.scBtt {
   position: relative;
   overflow: hidden;
   z-index: 3;
   height: 55px;
   margin: 5px;
   filter: drop-shadow(2px 2px 4px black);
   transition: transform .5s, filter .7s;
}
.scBtt:hover {
   cursor: pointer;
   transform: scale(1.25);
}
.scPlayer {
   position: relative;
   top: 5px;
   width: 100%;
   height: 120px;
   margin: 0px;
   padding: 0px;
   border: 0px;
   opacity: 0%;
   background: transparent;
   box-shadow: 0px 0px 150px -15px black;
   transform: scale(95%);
   transition: opacity 1s, transform .5s;
}
.topWindow {
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   transition: box-shadow .5s;
}
.topWindow:hover {
   -box-shadow: 0px 0px 200px -100px black inset;
}
.avWindow {
   position: relative;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   box-shadow: 0px 0px 200px 35px black inset;
   transition: box-shadow .5s;
}
   .avWindow:hover {
      -box-shadow: 0px 0px 200px -100px black inset;
   }
.mmIco {
   position: relative;
   height: 35px;
   margin: -10px 4px 8px 0px;
   z-index: 5;
   filter: drop-shadow(2px 2px 4px black);
   transition: transform .2s;
}
   .mmIco:hover {
      z-index: 6;
      cursor: pointer;
      transform: scale(1.15);
   }
.mmIcoA {
   float: right;
   width: 60px;
   height: 22px;
   font-family: MyriadPro-Regular;
   font-weight: bold;
   font-size: 14px;
   text-align: center;
   border-radius: 0px 0px 10px 0px;
   margin: -6px 4px 8px 0px;
   background: red;
   box-shadow: 0px 0px 25px -20px black inset;
   filter: drop-shadow(2px 2px 4px black);
}
.mmIcoA SPAN {
   position: relative;
   top: 3px;
}
.afMu, .afMuo, .afMuc {
   border-bottom: solid 5px #00bc10;
}
.afVo, .afVos, .afVod {
   border-bottom: solid 5px #01a9fb;
}
.afSo, .afSor, .afSoe {
   border-bottom: solid 5px #ff0000;
}
.mmMU {
   position: relative;
   background: #e67000;
   border-bottom: solid 3px #00bc10;
   z-index: 5;
   transition: transform .2s
}
.mmVO {
   position: relative;
   background: #e67000;
   border-bottom: solid 3px #01a9fb;
   z-index: 5;
   transition: transform .2s
}
.mmSO {
   position: relative;
   background: #e67000;
   border-bottom: solid 3px #ff0000;
   z-index: 5;
   transition: transform .2s
}
.mmMU:hover {
   z-index: 6;
   cursor: pointer;
   transform: scale(1.15);
}
.mmVO:hover {
   z-index: 6;
   cursor: pointer;
   transform: scale(1.15);
}
.mmSO:hover {
   z-index: 6;
   cursor: pointer;
   transform: scale(1.15);
}
.mmTop1 {
   position: relative;
   top: -40px;
   right: 5px;
   width: 53px;
   height: 75px;
   font-family: MyriadPro-Light;
   font-weight: bold;
   font-size: 14px;
   text-align: center;
   letter-spacing: 0.5px;
   color: white;
   text-shadow: 3px 2px 2px black;
   transform: rotate(15deg);
   filter: drop-shadow(0px 0px 7px #770000);
   background-image: url('../img/element/cockade_red_500.png');
   background-repeat: no-repeat;
   background-position: center;
   background-size: 50px 70px;
}
   .mmTop1 p {
      padding-top: 18px;
   }
.mmTop2 {
   position: relative;
   top: -40px;
   right: 5px;
   width: 53px;
   height: 75px;
   font-family: MyriadPro-Light;
   font-weight: bold;
   font-size: 14px;
   text-align: center;
   letter-spacing: 0.5px;
   color: white;
   text-shadow: 3px 2px 2px black;
   transform: rotate(15deg);
   filter: drop-shadow(0px 0px 7px #770000);
   background-image: url('../img/element/cockade_redG_500.png');
   background-repeat: no-repeat;
   background-position: center;
   background-size: 50px 70px;
}
   .mmTop2 p {
      padding-top: 18px;
   }
.mmOrig {
   position: relative;
   top: -40px;
   width: 80px;
   height: 90px;
   font-family: MyriadPro-Light;
   font-weight: bold;
   font-size: 16px;
   text-align: center;
   letter-spacing: 0.5px;
   color: white;
   text-shadow: 3px 2px 2px black;
   transform: rotate(15deg);
   filter: drop-shadow(0px 0px 7px #ffcb00);
   background-image: url('../img/element/arms_gold.png');
   background-repeat: no-repeat;
   background-position: center;
   background-size: 76px 90px;
}
   .mmOrig p {
      padding-top: 22px;
   }
.mmCover {
   position: relative;
   top: -40px;
   width: 80px;
   height: 90px;
   font-family: MyriadPro-Light;
   font-weight: bold;
   font-size: 16px;
   text-align: center;
   letter-spacing: 0.5px;
   color: white;
   text-shadow: 3px 2px 2px black;
   transform: rotate(15deg);
   filter: drop-shadow(0px 0px 7px #00ff5b);
   background-image: url('../img/element/arms_green.png');
   background-repeat: no-repeat;
   background-position: center;
   background-size: 70px 85px;
}
   .mmCover p {
      padding-top: 20px;
   }
.mmArr {
   position: relative;
   top: -40px;
   width: 80px;
   height: 90px;
   font-family: MyriadPro-Light;
   font-weight: bold;
   font-size: 15px;
   text-align: center;
   letter-spacing: 0.5px;
   color: white;
   text-shadow: 3px 2px 2px black;
   transform: rotate(15deg);
   -filter: drop-shadow(0px 0px 7px #8800cc);
   filter: drop-shadow(0px 0px 7px #bb0000);
   background-image: url('../img/element/arms_red.png');
   background-repeat: no-repeat;
   background-position: center;
   background-size: 76px 90px;
}
   .mmArr p {
      padding-top: 18px;
   }
.mmVip {
   position: relative;
   top: -50px;
   width: 90px;
   height: 90px;
   font-family: MyriadPro-Light;
   font-weight: bold;
   font-size: 20px;
   text-align: center;
   letter-spacing: 0.5px;
   color: #ffcb00;
   transform: rotate(15deg);
   filter: drop-shadow(0px 0px 7px #ffd95e);
   background-image: url('../img/element/Star_Gold_05.png');
   background-repeat: no-repeat;
   background-position: center;
   background-size: 90px;
}
.mmVip p {
   padding-top: 38px;
}
.mmContainer {
  
}
.mmFullTop {
   width: 100%;
   height: 100%;
}
.mmFullO {
   position: relative;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 1002px; /* MAIN WIDTH  ############################################################################################## */
   z-index: 3;
   box-shadow: 0px 0px 200px 20px black inset;
   transition: box-shadow .5s, transform .5s, filter .5s;
}
.mmFullS {
   position: relative;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 1002px; /* MAIN WIDTH  ############################################################################################## */
   z-index: 3;
   box-shadow: 0px 0px 100px -50px black inset;
   filter: drop-shadow(0px 0px 50px black);
   transform: scale(1.05);
}
.mmFullO:hover {
   box-shadow: 0px 0px 100px -50px black inset;
   filter: drop-shadow(0px 0px 50px black);
   transform: scale(1.05);
}
.tdBlur {
   backdrop-filter: blur(50px)
}
.noBlur {
   backdrop-filter: blur(0px)
}
.mmTRInfo {
   background-image: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.5));
}
.mmTit {
   font-family: MyriadPro-Light;
   font-size: 24px;
   font-weight: bold;
   color: #fff;
}
.mmArea {
   display: block;
   width: 50px;
   height: 20px;
   margin: 0px;
   font-size: 10px;
   margin-top: 5px;
   background: green;
}
.mmInfo {
   overflow: hidden;
   height: 10px;
   margin: 0px 0px 0px 5px;
   padding: 0px;
}
.mmTrg {
   position: relative;
   left: -5px;
   font-family: MyriadPro-Light;
   font-size: 20px;
   color: #fff;
}
.mmGen {
   font-family: MyriadPro-Light;
   font-size: 20px;
   color: #fff;
}
.mmDesc {
   font-family: MyriadPro-Light;
   font-size: 20px;
   color: #fff;
}
.mmDem {
   color: white;
   background: linear-gradient(to right, rgb(200,0,0,1) 35%, rgb(250,0,0,0) 100%);
}
.mmAdv {
   color: white;
   background: linear-gradient(to right, rgb(200,0,0,1) 35%, rgb(250,0,0,0) 100%);
}
.mmGam {
   color: white;
   background: linear-gradient(to right, rgb(255,0,0,1) 35%, rgb(255,0,0,0) 100%);
}
.mmMov {
   color: white;
   background: linear-gradient(to right, rgb(0,0,255,1) 35%, rgb(0,0,255,0) 100%);
}
.mmPub {
   color: white;
   background: linear-gradient(to right, rgb(0,150,0,1) 35%, rgb(0,150,0,0) 100%);
}
.mmTht {
   color: white;
   background: linear-gradient(to right, rgb(200,85,0,1) 35%, rgb(200,85,0,0) 100%);
}
.mmMsc {
   color: white;
   background: linear-gradient(to right, rgb(0,150,180,1) 35%, rgb(0,150,180,0) 100%);
}
.mmDsc {
   color: white;
   background: linear-gradient(to right, rgb(200,0,150,1) 35%, rgb(200,85,0,0) 100%);
}
.mmTv {
   color: white;
   background: linear-gradient(to right, rgb(115,0,255,1) 35%, rgb(115,0,255,0) 100%);
}
.mmDoc {
   color: white;
   background: linear-gradient(to right, rgb(0,110,250,1) 35%, rgb(0,110,250,0) 100%);
}