.elementor-85472 .elementor-element.elementor-element-5b27565 > .elementor-container{max-width:1289px;}.elementor-85472 .elementor-element.elementor-element-5b27565 > .elementor-background-overlay{background-image:url("https://esna.gg/wp-content/uploads/2021/09/ROG-MOROCCO-POSTER-2-copy-scaled.webp");background-repeat:no-repeat;background-size:cover;opacity:0.86;mix-blend-mode:lighten;transition:background 3s, border-radius 0.3s, opacity 3s;}.elementor-85472 .elementor-element.elementor-element-5b27565:hover > .elementor-background-overlay{opacity:0.5;}.elementor-85472 .elementor-element.elementor-element-5b27565{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:-157px;margin-bottom:0px;}.elementor-85472 .elementor-element.elementor-element-00ede57{text-align:center;z-index:9999;}.elementor-85472 .elementor-element.elementor-element-00ede57 > .elementor-widget-container{margin:34px 0px 0px 0px;}.elementor-85472 .elementor-element.elementor-element-9cbd1fe{margin-top:10px;margin-bottom:10px;}.elementor-bc-flex-widget .elementor-85472 .elementor-element.elementor-element-2c99555.elementor-column .elementor-widget-wrap{align-items:flex-start;}.elementor-85472 .elementor-element.elementor-element-2c99555.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:flex-start;align-items:flex-start;}.elementor-85472 .elementor-element.elementor-element-2c99555.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-85472 .elementor-element.elementor-element-2c99555 > .elementor-element-populated >  .elementor-background-overlay{opacity:0.21;filter:brightness( 147% ) contrast( 100% ) saturate( 100% ) blur( 5.6px ) hue-rotate( 0deg );}.elementor-85472 .elementor-element.elementor-element-2c99555 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-85472 .elementor-element.elementor-element-2c99555 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-bc-flex-widget .elementor-85472 .elementor-element.elementor-element-431b06d.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-85472 .elementor-element.elementor-element-431b06d.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-85472 .elementor-element.elementor-element-431b06d.elementor-column > .elementor-widget-wrap{justify-content:flex-end;}.elementor-bc-flex-widget .elementor-85472 .elementor-element.elementor-element-f1987a8.elementor-column .elementor-widget-wrap{align-items:flex-end;}.elementor-85472 .elementor-element.elementor-element-f1987a8.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:flex-end;align-items:flex-end;}.elementor-bc-flex-widget .elementor-85472 .elementor-element.elementor-element-97c0b60.elementor-column .elementor-widget-wrap{align-items:flex-end;}.elementor-85472 .elementor-element.elementor-element-97c0b60.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:flex-end;align-items:flex-end;}.elementor-85472 .elementor-element.elementor-element-97c0b60.elementor-column > .elementor-widget-wrap{justify-content:flex-end;}.elementor-85472 .elementor-element.elementor-element-b979df4 img{width:100%;max-width:100%;opacity:1;}.elementor-85472 .elementor-element.elementor-element-b979df4 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-bc-flex-widget .elementor-85472 .elementor-element.elementor-element-0928324.elementor-column .elementor-widget-wrap{align-items:flex-end;}.elementor-85472 .elementor-element.elementor-element-0928324.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:flex-end;align-items:flex-end;}.elementor-85472 .elementor-element.elementor-element-0928324 > .elementor-element-populated{margin:0px 0px -272px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-85472 .elementor-element.elementor-element-b022204 img{max-width:100%;opacity:1;}.elementor-bc-flex-widget .elementor-85472 .elementor-element.elementor-element-79eff95.elementor-column .elementor-widget-wrap{align-items:flex-start;}.elementor-85472 .elementor-element.elementor-element-79eff95.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:flex-start;align-items:flex-start;}.elementor-85472 .elementor-element.elementor-element-79eff95.elementor-column > .elementor-widget-wrap{justify-content:flex-end;}.elementor-85472 .elementor-element.elementor-element-17ab710 img{max-width:97%;opacity:1;}.elementor-85472 .elementor-element.elementor-element-17ab710 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-85472 .elementor-element.elementor-element-7c12887 > .elementor-widget-container{margin:-50px 0px -21px 0px;}.elementor-85472 .elementor-element.elementor-element-d533132{text-align:center;}.elementor-85472 .elementor-element.elementor-element-d533132 .elementor-heading-title{color:#FFFFFF;font-family:"rog", Sans-serif;font-size:27px;font-weight:600;text-shadow:0px 0px 83px #0A49F8;}.elementor-85472 .elementor-element.elementor-element-dc58668 > .elementor-container{min-height:409px;}.elementor-85472 .elementor-element.elementor-element-dc58668:not(.elementor-motion-effects-element-type-background), .elementor-85472 .elementor-element.elementor-element-dc58668 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://esna.gg/wp-content/uploads/2021/09/DIRT-WAR-BACKGROUD-V2-1.png");background-repeat:repeat;background-size:contain;}.elementor-85472 .elementor-element.elementor-element-dc58668{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-85472 .elementor-element.elementor-element-dc58668 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-85472 .elementor-element.elementor-element-0dee87a > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-85472 .elementor-element.elementor-element-0dee87a > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-85472 .elementor-element.elementor-element-956ea37{text-align:center;}.elementor-85472 .elementor-element.elementor-element-956ea37 .elementor-heading-title{color:#FFFFFF;font-family:"rog", Sans-serif;font-size:51px;font-weight:600;line-height:1.2em;letter-spacing:5px;}.elementor-85472 .elementor-element.elementor-element-e932cf2{--spacer-size:50px;}.elementor-85472 .elementor-element.elementor-element-e300abb{column-gap:0px;text-align:center;color:#FFFFFF;font-family:"rog", Sans-serif;font-size:39px;font-weight:500;font-style:normal;text-decoration:none;line-height:1.4em;letter-spacing:1.2px;text-shadow:0px 0px 10px #02DEFC;}.elementor-85472 .elementor-element.elementor-element-a31614b .elementor-countdown-wrapper{max-width:100%;}.elementor-85472 .elementor-element.elementor-element-a31614b .elementor-countdown-item{background-color:#6EC1E400;}body:not(.rtl) .elementor-85472 .elementor-element.elementor-element-a31614b .elementor-countdown-item:not(:first-of-type){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-85472 .elementor-element.elementor-element-a31614b .elementor-countdown-item:not(:last-of-type){margin-right:calc( 10px/2 );}body.rtl .elementor-85472 .elementor-element.elementor-element-a31614b .elementor-countdown-item:not(:first-of-type){margin-right:calc( 10px/2 );}body.rtl .elementor-85472 .elementor-element.elementor-element-a31614b .elementor-countdown-item:not(:last-of-type){margin-left:calc( 10px/2 );}.elementor-85472 .elementor-element.elementor-element-a31614b .elementor-countdown-digits{color:#0AB3BF;font-family:"rog", Sans-serif;font-weight:400;}.elementor-85472 .elementor-element.elementor-element-a31614b .elementor-countdown-label{font-family:"rog", Sans-serif;font-weight:400;}.elementor-85472 .elementor-element.elementor-element-64e8d11{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-85472 .elementor-element.elementor-element-64e8d11 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-bc-flex-widget .elementor-85472 .elementor-element.elementor-element-e03d5ac.elementor-column .elementor-widget-wrap{align-items:flex-start;}.elementor-85472 .elementor-element.elementor-element-e03d5ac.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:flex-start;align-items:flex-start;}.elementor-85472 .elementor-element.elementor-element-5e04a93.elementor-column > .elementor-widget-wrap{justify-content:flex-end;}.elementor-85472 .elementor-element.elementor-element-aef2696{--spacer-size:43px;}.elementor-85472 .elementor-element.elementor-element-848bcb4 .elementor-heading-title{color:#0AB3BF;font-family:"rog", Sans-serif;font-size:34px;font-weight:600;}.elementor-85472 .elementor-element.elementor-element-b87061b{text-align:left;color:#FFFFFF;font-family:"rog", Sans-serif;font-weight:400;}.elementor-85472 .elementor-element.elementor-element-2629c7d img{width:87%;opacity:1;}.elementor-85472 .elementor-element.elementor-element-2629c7d > .elementor-widget-container{margin:51px 51px 51px 51px;}.elementor-85472 .elementor-element.elementor-element-ec5b269{text-align:left;}.elementor-85472 .elementor-element.elementor-element-ec5b269 .elementor-heading-title{color:#FFFFFF;font-family:"rog", Sans-serif;font-size:40px;font-weight:600;text-shadow:0px 0px 10px #02DEFC;}.elementor-85472 .elementor-element.elementor-element-d0f888c{text-align:left;color:#FFFFFF;font-family:"rog", Sans-serif;font-size:1px;font-weight:400;}.elementor-85472 .elementor-element.elementor-element-18b4364{text-align:left;}.elementor-85472 .elementor-element.elementor-element-18b4364 .elementor-heading-title{color:#0AB3BF;font-family:"rog", Sans-serif;font-weight:600;}.elementor-bc-flex-widget .elementor-85472 .elementor-element.elementor-element-15c57cb.elementor-column .elementor-widget-wrap{align-items:flex-start;}.elementor-85472 .elementor-element.elementor-element-15c57cb.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:flex-start;align-items:flex-start;}.elementor-85472 .elementor-element.elementor-element-989088b{--spacer-size:35px;}.elementor-85472 .elementor-element.elementor-element-129fa44 .elementor-heading-title{color:#FFFFFF;font-family:"rog", Sans-serif;font-size:34px;font-weight:600;text-shadow:0px 0px 10px #02DEFC;}.elementor-85472 .elementor-element.elementor-element-ba1c25a{--spacer-size:10px;}.elementor-85472 .elementor-element.elementor-element-0ab8a0c .elementor-heading-title{color:#0AB3BF;font-family:"rog", Sans-serif;font-size:34px;font-weight:600;}.elementor-85472 .elementor-element.elementor-element-8abdaff{color:#FFFFFF;font-family:"rog", Sans-serif;font-weight:400;}.elementor-85472 .elementor-element.elementor-element-41e3f76{--spacer-size:83px;}.elementor-85472 .elementor-element.elementor-element-a60925d{text-align:center;}.elementor-85472 .elementor-element.elementor-element-a60925d img{width:100%;}.elementor-85472 .elementor-element.elementor-element-a60925d > .elementor-widget-container{margin:-132px 0px 0px 0px;}.elementor-bc-flex-widget .elementor-85472 .elementor-element.elementor-element-86e6bbf.elementor-column .elementor-widget-wrap{align-items:flex-start;}.elementor-85472 .elementor-element.elementor-element-86e6bbf.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:flex-start;align-items:flex-start;}.elementor-85472 .elementor-element.elementor-element-86e6bbf > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-85472 .elementor-element.elementor-element-86e6bbf > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-85472 .elementor-element.elementor-element-c23669e{--spacer-size:46px;}.elementor-85472 .elementor-element.elementor-element-c06bb33:not(.elementor-motion-effects-element-type-background), .elementor-85472 .elementor-element.elementor-element-c06bb33 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://esna.gg/wp-content/uploads/2021/09/DIRT-WAR-BACKGROUD-V2-1.png");background-repeat:repeat;background-size:cover;}.elementor-85472 .elementor-element.elementor-element-c06bb33{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-85472 .elementor-element.elementor-element-c06bb33 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-85472 .elementor-element.elementor-element-c5941e3 > .elementor-element-populated{border-style:solid;border-width:0px 2px 0px 0px;border-color:#FFFFFF;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-85472 .elementor-element.elementor-element-c5941e3 > .elementor-element-populated, .elementor-85472 .elementor-element.elementor-element-c5941e3 > .elementor-element-populated > .elementor-background-overlay, .elementor-85472 .elementor-element.elementor-element-c5941e3 > .elementor-background-slideshow{border-radius:0px 0px 0px 0px;}.elementor-85472 .elementor-element.elementor-element-c5941e3 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-85472 .elementor-element.elementor-element-b333995{text-align:center;}.elementor-85472 .elementor-element.elementor-element-b333995 .elementor-heading-title{color:#FFFFFF;font-family:"rog", Sans-serif;font-size:33px;font-weight:600;text-shadow:0px 0px 10px #02DEFC;}.elementor-85472 .elementor-element.elementor-element-16d8898{--e-image-carousel-slides-to-show:1;}.elementor-85472 .elementor-element.elementor-element-16d8898 .elementor-swiper-button.elementor-swiper-button-prev, .elementor-85472 .elementor-element.elementor-element-16d8898 .elementor-swiper-button.elementor-swiper-button-next{font-size:20px;}.elementor-85472 .elementor-element.elementor-element-ea984fe{text-align:center;}.elementor-85472 .elementor-element.elementor-element-ea984fe .elementor-heading-title{color:#FFFFFF;font-family:"rog", Sans-serif;font-size:33px;font-weight:600;text-shadow:0px 0px 10px #02DEFC;}.elementor-85472 .elementor-element.elementor-element-87e6cea > .elementor-container{min-height:409px;}.elementor-85472 .elementor-element.elementor-element-87e6cea:not(.elementor-motion-effects-element-type-background), .elementor-85472 .elementor-element.elementor-element-87e6cea > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0C0C0C;background-image:url("https://esna.gg/wp-content/uploads/2021/09/DIRT-WAR-BACKGROUD-V2-1.png");background-repeat:no-repeat;background-size:cover;}.elementor-85472 .elementor-element.elementor-element-87e6cea{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-85472 .elementor-element.elementor-element-87e6cea > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-85472 .elementor-element.elementor-element-d465ec4 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-85472 .elementor-element.elementor-element-d465ec4 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-bc-flex-widget .elementor-85472 .elementor-element.elementor-element-b9b4246.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-85472 .elementor-element.elementor-element-b9b4246.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-85472 .elementor-element.elementor-element-83dd48c img{width:100%;}.elementor-85472 .elementor-element.elementor-element-83dd48c > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-bc-flex-widget .elementor-85472 .elementor-element.elementor-element-2102243.elementor-column .elementor-widget-wrap{align-items:flex-start;}.elementor-85472 .elementor-element.elementor-element-2102243.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:flex-start;align-items:flex-start;}.elementor-85472 .elementor-element.elementor-element-2102243.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-85472 .elementor-element.elementor-element-70e9bba{text-align:center;}.elementor-85472 .elementor-element.elementor-element-70e9bba .elementor-heading-title{color:#FFFFFF;font-family:"rog", Sans-serif;font-size:33px;font-weight:600;text-shadow:0px 0px 10px #02DEFC;}.elementor-85472 .elementor-element.elementor-element-e7ee0d6 > .elementor-widget-container{border-radius:24px 24px 24px 24px;}.elementor-bc-flex-widget .elementor-85472 .elementor-element.elementor-element-a362dc6.elementor-column .elementor-widget-wrap{align-items:flex-start;}.elementor-85472 .elementor-element.elementor-element-a362dc6.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:flex-start;align-items:flex-start;}.elementor-85472 .elementor-element.elementor-element-fdcae97{text-align:center;}.elementor-85472 .elementor-element.elementor-element-fdcae97 .elementor-heading-title{color:#FFFFFF;font-family:"rog", Sans-serif;font-size:33px;font-weight:600;text-shadow:0px 0px 10px #02DEFC;}.elementor-bc-flex-widget .elementor-85472 .elementor-element.elementor-element-b45c7c3.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-85472 .elementor-element.elementor-element-b45c7c3.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-85472 .elementor-element.elementor-element-7eb4533 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-85472 .elementor-element.elementor-element-9d371fb > .elementor-container{min-height:409px;}.elementor-85472 .elementor-element.elementor-element-9d371fb:not(.elementor-motion-effects-element-type-background), .elementor-85472 .elementor-element.elementor-element-9d371fb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://esna.gg/wp-content/uploads/2021/09/DIRT-WAR-BACKGROUD-V2-1.png");background-position:bottom center;background-repeat:no-repeat;background-size:cover;}.elementor-85472 .elementor-element.elementor-element-9d371fb{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-85472 .elementor-element.elementor-element-9d371fb > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-85472 .elementor-element.elementor-element-f954ade{text-align:center;}.elementor-85472 .elementor-element.elementor-element-f954ade .elementor-heading-title{color:#FFFFFF;font-family:"rog", Sans-serif;font-size:51px;font-weight:600;line-height:1.2em;letter-spacing:5px;text-shadow:0px 0px 10px #02DEFC;}.elementor-85472 .elementor-element.elementor-element-1e65ff4{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-85472 .elementor-element.elementor-element-1e65ff4 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-bc-flex-widget .elementor-85472 .elementor-element.elementor-element-f9e5630.elementor-column .elementor-widget-wrap{align-items:flex-end;}.elementor-85472 .elementor-element.elementor-element-f9e5630.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:flex-end;align-items:flex-end;}.elementor-85472 .elementor-element.elementor-element-3190abd{text-align:center;}.elementor-85472 .elementor-element.elementor-element-3190abd .elementor-heading-title{color:#FFFFFF;font-family:"rog", Sans-serif;font-size:64px;font-weight:600;}.elementor-85472 .elementor-element.elementor-element-3970c0e{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-85472 .elementor-element.elementor-element-3970c0e > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-bc-flex-widget .elementor-85472 .elementor-element.elementor-element-0739675.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-85472 .elementor-element.elementor-element-0739675.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-85472 .elementor-element.elementor-element-9a90465 img{width:57%;}.elementor-bc-flex-widget .elementor-85472 .elementor-element.elementor-element-45baa0e.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-85472 .elementor-element.elementor-element-45baa0e.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}@media(max-width:1024px){.elementor-85472 .elementor-element.elementor-element-9d371fb:not(.elementor-motion-effects-element-type-background), .elementor-85472 .elementor-element.elementor-element-9d371fb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://esna.gg/wp-content/uploads/2021/09/DIRT-WAR-BACKGROUD-V2-1.png");}}@media(max-width:767px){.elementor-85472 .elementor-element.elementor-element-5b27565{margin-top:0px;margin-bottom:0px;}.elementor-85472 .elementor-element.elementor-element-a3ef649 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-85472 .elementor-element.elementor-element-95cd5af > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-85472 .elementor-element.elementor-element-95cd5af{width:100%;max-width:100%;}.elementor-85472 .elementor-element.elementor-element-dc58668 > .elementor-container{min-height:0px;}.elementor-85472 .elementor-element.elementor-element-dc58668:not(.elementor-motion-effects-element-type-background), .elementor-85472 .elementor-element.elementor-element-dc58668 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center center;background-repeat:repeat;background-size:contain;}.elementor-85472 .elementor-element.elementor-element-956ea37 .elementor-heading-title{font-size:37px;}.elementor-85472 .elementor-element.elementor-element-031295f > .elementor-container{max-width:500px;}.elementor-85472 .elementor-element.elementor-element-e300abb{font-size:31px;}.elementor-85472 .elementor-element.elementor-element-a31614b .elementor-countdown-digits{font-size:40px;}.elementor-85472 .elementor-element.elementor-element-a31614b .elementor-countdown-label{font-size:10px;}.elementor-85472 .elementor-element.elementor-element-aef2696{--spacer-size:10px;}.elementor-85472 .elementor-element.elementor-element-848bcb4 .elementor-heading-title{font-size:29px;}.elementor-85472 .elementor-element.elementor-element-b87061b{font-size:46px;}.elementor-85472 .elementor-element.elementor-element-2629c7d img{width:100%;}.elementor-85472 .elementor-element.elementor-element-2629c7d > .elementor-widget-container{margin:0px 0px -26px 0px;}.elementor-85472 .elementor-element.elementor-element-ec5b269 .elementor-heading-title{font-size:37px;}.elementor-85472 .elementor-element.elementor-element-18b4364 .elementor-heading-title{font-size:15px;}.elementor-85472 .elementor-element.elementor-element-fd88d85 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-85472 .elementor-element.elementor-element-fd88d85{width:100%;max-width:100%;}.elementor-85472 .elementor-element.elementor-element-989088b{--spacer-size:59px;}.elementor-85472 .elementor-element.elementor-element-35ac28a > .elementor-widget-container{margin:-59px -59px -59px -59px;padding:0px 0px 0px 0px;}.elementor-85472 .elementor-element.elementor-element-1fe1593 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-85472 .elementor-element.elementor-element-1fe1593{width:100%;max-width:100%;}.elementor-85472 .elementor-element.elementor-element-129fa44{text-align:left;}.elementor-85472 .elementor-element.elementor-element-129fa44 .elementor-heading-title{font-size:34px;}.elementor-85472 .elementor-element.elementor-element-ba1c25a{--spacer-size:10px;}.elementor-85472 .elementor-element.elementor-element-41e3f76{--spacer-size:10px;}.elementor-85472 .elementor-element.elementor-element-c23669e{--spacer-size:10px;}.elementor-85472 .elementor-element.elementor-element-c06bb33:not(.elementor-motion-effects-element-type-background), .elementor-85472 .elementor-element.elementor-element-c06bb33 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-repeat:repeat;background-size:contain;}.elementor-85472 .elementor-element.elementor-element-87e6cea > .elementor-container{min-height:0px;}.elementor-85472 .elementor-element.elementor-element-87e6cea:not(.elementor-motion-effects-element-type-background), .elementor-85472 .elementor-element.elementor-element-87e6cea > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://esna.gg/wp-content/uploads/2021/09/DIRT-WAR-BACKGROUD-V2-1.png");background-position:center center;background-repeat:repeat;background-size:contain;}.elementor-85472 .elementor-element.elementor-element-9d371fb > .elementor-container{min-height:0px;}.elementor-85472 .elementor-element.elementor-element-9d371fb:not(.elementor-motion-effects-element-type-background), .elementor-85472 .elementor-element.elementor-element-9d371fb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-repeat:repeat;background-size:contain;}.elementor-85472 .elementor-element.elementor-element-f954ade .elementor-heading-title{font-size:14px;}.elementor-85472 .elementor-element.elementor-element-323bc4f > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-85472 .elementor-element.elementor-element-323bc4f{width:100%;max-width:100%;}.elementor-85472 .elementor-element.elementor-element-d9cb0ba > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-85472 .elementor-element.elementor-element-d9cb0ba{width:100%;max-width:100%;}}@media(min-width:768px){.elementor-85472 .elementor-element.elementor-element-2c99555{width:14.076%;}.elementor-85472 .elementor-element.elementor-element-431b06d{width:47.383%;}.elementor-85472 .elementor-element.elementor-element-f1987a8{width:37.666%;}.elementor-85472 .elementor-element.elementor-element-97c0b60{width:62.807%;}.elementor-85472 .elementor-element.elementor-element-0928324{width:37.193%;}.elementor-85472 .elementor-element.elementor-element-79eff95{width:62.619%;}.elementor-85472 .elementor-element.elementor-element-93dd17a{width:37.381%;}.elementor-85472 .elementor-element.elementor-element-08b8525{width:20%;}.elementor-85472 .elementor-element.elementor-element-ef137dc{width:59.664%;}.elementor-85472 .elementor-element.elementor-element-0724806{width:20%;}.elementor-85472 .elementor-element.elementor-element-e03d5ac{width:10%;}.elementor-85472 .elementor-element.elementor-element-5e04a93{width:40.029%;}.elementor-85472 .elementor-element.elementor-element-15c57cb{width:39.947%;}.elementor-85472 .elementor-element.elementor-element-86e6bbf{width:10%;}.elementor-85472 .elementor-element.elementor-element-b9b4246{width:9.474%;}.elementor-85472 .elementor-element.elementor-element-2102243{width:40.555%;}.elementor-85472 .elementor-element.elementor-element-a362dc6{width:40.4125%;}.elementor-85472 .elementor-element.elementor-element-b45c7c3{width:9.535%;}.elementor-85472 .elementor-element.elementor-element-0739675{width:33.262%;}.elementor-85472 .elementor-element.elementor-element-3e48a21{width:33.071%;}}/* Start custom CSS */.page-id-85472  .navbar-inverse {
    background-color: rgb(25 31 45 / 0%)!important;
}

.page-id-85472  .navbar-inverse {
    background: linear-gradient( 
90deg , rgb(0 0 0 / 0%) 0%, rgb(37 37 37 / 0%) 100%);
}


.page-id-85472  .social-top {
    float: left;
    left: 57px;
    padding: 0;
    border-radius: 0;
    top: 22px;
    position: relative;
    display: none;
}



.page-id-85472  .navbar-wrapper .logo {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

.page-id-85472  .navbar-wrapper {
    background: linear-gradient( 
90deg , rgb(8 198 255 / 0%) 0%, rgb(16 56 78 / 0%) 100%);
}

.postid-85472 .navbar-wrapper {
    background: linear-gradient( 
90deg , rgb(8 198 255 / 0%) 0%, rgb(16 56 78 / 0%) 100%);
}


.elementor-element.elementor-element-95cd5af.elementor-widget-mobile__width-inherit.elementor-widget.elementor-widget-html.animated.flash {
    text-align-last: center;
}

.elementor-element.elementor-element-7c12887.elementor-widget.elementor-widget-html {
    text-align: -webkit-center;
}

.elementor-element.elementor-element-35ac28a.elementor-widget.elementor-widget-html {
    text-align: -webkit-center;
}
.elementor-element.elementor-element-1fe1593.elementor-widget-mobile__width-inherit.elementor-widget.elementor-widget-html.animated.rollIn {
    text-align-last: center;
}

.elementor-element.elementor-element-d9cb0ba.elementor-widget-mobile__width-inherit.elementor-widget.elementor-widget-html.animated.rollIn {
    text-align: -webkit-center;
}
.elementor-element.elementor-element-323bc4f.elementor-widget-mobile__width-inherit.elementor-widget.elementor-widget-html.animated.rollIn {
    text-align: -webkit-center;
}


/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

.parent-pageid-85472 .social-top {
   
    display: none;
}


/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

.parent-pageid-85472 .social-top {
   
    display: none;
}

/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

#buddypress .settings_user input[type=text], #buddypress .settings_user textarea, #buddypress .settings_user input[type=password], #buddypress .settings_user select, #buddypress .settings_user .wp-editor-wrap {
    width: 100%;
    float: none !important;
}

.img-badge img {
    max-height: 17px;
    position: relative;
    left: 62px;
}

ibadge {
    top: 10px;
    left: 9px;
    position: relative;
}
.img-badge img {
    max-height: 24px;
    position: relative;
    left: 77px;
    top: -15px;
}
.bbp-user-page #buddypress > #item-nav, .team-page .team-nav, .bp-user #buddypress #item-nav {
    position: absolute;
    top: calc(100% - 65px);
    left: 0px;
    width: auto;
    z-index: 30;
    display: flex;
}



img.icone {
    width: 25px;
    padding-bottom: 70p;
    position: relative;
    left: 48px;
    top: -33px;
}

select.select_games {
    width: 48% !important;
}

div.idgamegames_name {
    position: absolute;
    left: 650px;
	margin-top: -117px;
    width: 49%;
}

label.IdGameLabel {
    width: 100%;
}

img.testimg {
    width: 30px;
}
.user-wrap .dropdown {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    top: 79px;
    background: #181818;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    -ms-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
    visibility: hidden;
    opacity: 0;
    border: solid 2px rgba(0, 0, 0, 0.2);
    border-width: 1px 2px 2px 2px;
    z-index: 1050;
    box-sizing: content-box;
    list-style: none;
    margin: 0;
    padding: 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
}


.pmi_title .img-badge img {
    max-height: 36px;
    position: relative;
    left: 331px;
    top: -40px;
}

table.dataTable.no-footer {
    border-bottom: 1px solid #e80808;
    border-radius: 25px;
}
table#table {
    width: 1163px !important;
}
img.icone {
    width: 25px;
    padding-bottom: 70p;
    position: relative;
    left: 48px;
    top: -33px;
}

select.select_games {
    width: 48% !important;
}


div.idgamegames_name {
        width: 50%;
    padding-bottom: 70p;
    position: relative;
    left: 634px;
    top: 0px;
}

label.IdGameLabel {
    width: 100%;
}
select.select_games {
    width: 48% !important;
}
.games_name{
  margin-bottom: 113px;
}

.idgamegames_name{
  margin: -117px;
    margin-left: -2px;
}
.mode_game{
      margin-top: 24px;
}


.page-id-85472 a, .parent-pageid-85472 a {
    color: #ffffff !important;
}

a.icon {
    color: #040404 !important;
}

.page-id-85472 i.fas.fa-lock, .parent-pageid-85472 i.fas.fa-lock  {
  background-color: #0fa2ab !important;
}

.parent-pageid-85472 .login-btn {
    color: #0fa3ac !important;
}

.page-id-85472 .login-btn {
    color: #0fa3ac !important;
}

.parent-pageid-85472 button[type='submit']
{
background-color: #028a9c!important;
}

.page-id-85472 button[type='submit']
{
background-color: #028a9c!important;
}



.page-id-85472 input.age-gate-submit {
    background-color: #1b4a7a !important;
}




.parent-pageid-85472 .button-small{
background-color: #028a9c!important;}


.parent-pageid-85472 a {
color: #ffffff;
}

.parent-pageid-85472 input[type='submit'] {
    background-color: #2c5881!important;
}
.parent-pageid-85472 .user-avatar {
background-color: #0ddeff;
}
.parent-pageid-85472 .title-wrapper {
border-color: #0ddeff !important;
}

.parent-pageid-85472  h3 {
    font-family: rog;
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.parent-pageid-85472 body {
    font-family: 'rog';
    line-height: 24px;
    font-weight: 300;
    font-style: normal;
    color: #f7f7f7;
    font-size: 12px;
    font-display: swap;
}

.parent-pageid-85472 textarea:focus {
    border-color: aqua;
}


.parent-pageid-85472 .btn {
  background-color: #08bbc7;

}

.postid-85857 .header-background-image {
    background: url(https://esna.ma/storage/2021/09/ROG-MOROCCO.png) no-repeat center center !important;
    background-size: contain !important;
}

.postid-85857 .btn {
  background-color: #08bbc7;

}


.postid-85857 .social-top {
    float: left !important;
    left: -10px !important;
    padding: 0;
    border-radius: 0;
    top: 22px !important;
    position: fixed !important;
    display: none;
}

.postid-85857 button[type='submit']{
background-color: #028a9c!important;}

.postid-85857 .button-small{
background-color: #028a9c!important;}


.postid-85857 a {
color: #ffffff;
}
.postid-85857 .user-avatar {
background-color: #0ddeff;
}
.postid-85857 .title-wrapper {
border-color: #0ddeff !important;
}

.postid-85857  h3 {
    font-family: rog;
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.postid-85857 body {
    font-family: 'rog';
    line-height: 24px;
    font-weight: 300;
    font-style: normal;
    color: #f7f7f7;
    font-size: 12px;
    font-display: swap;
}

.postid-85857 textarea:focus {
    border-color: aqua;
}

.postid-85857 .tbinfo ul li  { border-color: #08bbc7 !important;
}


button.custom-btn.btn-3 a {
    color: white;
}
.frame {
  width: 100%;
  margin: 60px auto;
  text-align: center;
}
button {
  margin: 20px;
}
.custom-btn {
  color: #fff;
  width: 260px ;
  height: 40px;
  padding: 10px 25px;
  font-family: 'rog', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  
}

/* 1 */
.btn-1 {
  border: none;
  background-color: #ff9aff;
  box-shadow: 0 0 5px #ef97e8;
}
.btn-1:hover {
   box-shadow: 0 0 10px #ef97e8, 0 0 20px #ef97e8, 0 0 20px #fff inset;
}

/* 2 */
.btn-2 {
  color: #0bf4f3;
  border: 1px solid #0bf4f3;
  box-shadow:  0 0 5px #0bf4f3,  0 0 5px #0bf4f3 inset;
}
.btn-2:before {
  height: 0%;
  width: 2px;
}
.btn-2:hover {
  color: #fff;
  box-shadow: inset 0 0 10px #0bf4f3, 0 0 20px #0bf4f3 inset, 0 0 20px #0bf4f3 inset;
}


/* 3 */
.btn-3 {
  background: #0ab3bf;
   box-shadow:  0 0 5px #0ab3bf,  0 0 8px #0ab3bf;
  line-height: 42px;
  padding: 0;
  border: none;
  z-index: 2;
  -webkit-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
.btn-3:hover{
  background-color: transparent;
  color: #0ab3bf;
  box-shadow: 0 5px 3px -3px #00aced, 0 -5px 3px -3px #0ab3bf,
    0 5px 3px -3px #0ab3bf, 0 -5px 3px -3px #0ab3bf;
}
.btn-3:before,
.btn-3:after {
  position: absolute;
  content: "";
  left: 0;
  width: 100%;
  height: 50%;
  right: 0;
  z-index: -1;
  background: #0ab3bf;
  box-shadow: 0 0 5px #0ab3bf;
  transition: all 0.3s ease;
}
.btn-3:before {
  top: 0;
}
.btn-3:after {
  bottom: 0;
}
.btn-3:hover:before,
.btn-3:hover:after {
  height: 0;
  background-color: #0ab3bf;
}


/* 4 */
.btn-4 {
  color: #8ce436;
  padding: 0;
  border: 1px solid #8ce436;
  box-shadow: 0 0 5px #8ce436, 0 0 5px inset;
}
.btn-4:after {
  position: absolute;
  content: "";
  top: 5px;
  left: 6px;
  width: 90%;
  height: 70%;
  border: 1px solid #8ce436;
  box-shadow: 0 0 5px #8ce436 inset;
  opacity: 0;
  transition: all 0.3s ease;
}
.btn-4:hover:after {
  opacity: 1;
}

/* 5 */
.btn-5 {
  background: #21ebff;
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-5:hover{
  background: transparent;
  color: #21ebff;
}
.btn-5:before,
.btn-5:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  background: #21ebff;
  width:0;
    box-shadow:  0 0 5px #21ebff,  0 0 5px #21ebff inset;
  transition:400ms ease all;
}
.btn-5:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
.btn-5:hover:before,
.btn-5:hover:after{
  width:100%;
  transition:800ms ease all;
}


/* 6 */
.btn-6 {
  background: #8ce436;
  line-height: 40px;
  padding: 0;
  border: none;
  box-shadow: 0 0 5px #8ce436;
}
.btn-6 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-6:hover{
  background: transparent;
}
.btn-6:before,
.btn-6:after {
  position: absolute;
  content: "";
  height: 0%;
  width: 2px;
  background: #8ce436;
 box-shadow: 0 0 5px #8ce436;
}
.btn-6:before {
  right: 0;
  top: 0;
  transition: all 500ms ease;
}
.btn-6:after {
  left: 0;
  bottom: 0;
  transition: all 500ms ease;
}
.btn-6:hover:before {
  transition: all 500ms ease;
  height: 100%;
}
.btn-6:hover:after {
  transition: all 500ms ease;
  height: 100%;
}
.btn-6 span:before,
.btn-6 span:after {
  position: absolute;
  content: "";
  background: #8ce436;
  box-shadow: 0 0 5px #8ce436;
}
.btn-6 span:before {
  left: 0;
  top: 0;
  width: 0%;
  height: 2px;
  transition: all 500ms ease;
}
.btn-6 span:after {
  right: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  transition: all 500ms ease;
}
.btn-6 span:hover:before {
  width: 100%;
}
.btn-6 span:hover:after {
  width: 100%;
}

/* 7 */
.btn-7 {
  color: #21ebff;
  line-height: 40px;
  padding: 0;
  border: none;
}
.btn-7 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-7:before,
.btn-7:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: #21ebff;
  box-shadow: 0 0 5px #21ebff;
  transition: all 0.3s ease;
}
.btn-7:before{
   height: 50%;
   width: 2px;
}
.btn-7:after {
  width: 20%;
  height: 2px;
}
.btn-7:hover:before {
  height: 100%;
}
.btn-7:hover:after {
  width: 100%;
}
.btn-7 span:before,
.btn-7 span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: #21ebff;
  box-shadow: 0 0 5px #21ebff;
  transition: all 0.3s ease;
}
.btn-7 span:before {
  width: 2px;
  height: 50%;
}
.btn-7 span:after {
  height: 2px;
  width: 20%;
}
.btn-7 span:hover:before {
  height: 100%;
}
.btn-7 span:hover:after {
  width: 100%;
}

/* 8 */
.btn-8 {
  line-height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid #ff9aff;
  box-shadow: 0 0 5px #ff9aff, 0 0 5px #ff9aff inset;
  position: relative;
  z-index: 2;
  color: #fff;
  -webkit-perspective: 300px;
  perspective: 300px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.btn-8:hover{
  color: #ff9aff;
}
.btn-8:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ff9aff;
  box-shadow: 0 0 5px #ff9aff;
  z-index: -1;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: rotateX(0);
  transform: rotateX(0);
  transition: all 0.3s ease;
}
.btn-8:hover:after {
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
}
  

/* 9 */
.btn-9 {
  color: #fff352;
  border: 1px solid #fff352;
  box-shadow: 0 0 5px #fff352, 0 0 5px #fff352 inset;
  z-index: 2;
  transition: all 0.3s ease;
  overflow: hidden;
}
.btn-9:after {
  position: absolute;
  content: " ";
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}
.btn-9:hover {
  color: #000;
}
.btn-9:hover:after {
  background: #fff352;
  -webkit-transform: scale(2) rotate(180deg);
  transform: scale(2) rotate(180deg);
  box-shadow:  4px 4px 6px 0 rgba(255,255,255, 1),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255, 1),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
}

/* 10 */
.btn-10 {
  border: 1px solid #ff9aff;
  box-shadow: 0 0 5px #ff9aff, 0 0 5px #ff9aff inset;
  color: #ff9aff;
  background: #000;
  z-index: 2;
  transition: all 0.3s ease;
  overflow: hidden;
}
.btn-10:after {
  position: absolute;
  content: " ";
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: #ff9aff;
  transition: all 0.3s ease;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.btn-10:hover {
  color: #fff;
}
.btn-10:hover:after {
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* 11 */
.btn-11 {
  border: 1px solid #21ebff;
  color: #21ebff;
  box-shadow: 0 0 5px #21ebff, 0 0 5px #21ebff inset;
  transition: all 0.3s ease;
}
.btn-11:hover{
   text-shadow:
    0 0 20px #21ebff,
    0 0 50px rgba(33, 235, 255, .9),
    0 0 75px rgba(33, 235, 255, .8),
    0 0 76px rgba(33, 235, 255, .7),
    0 0 77px rgba(33, 235, 255, .6),
    0 0 78px rgba(33, 235, 255, .5),
    0 0 79px rgba(33, 235, 255, .4),
    0 0 80px rgba(33, 235, 255, .3),
    0 0 85px rgba(33, 235, 255, .2),
     0 0 99px rgba(33, 235, 255, .1);
}



/* 12 */
.btn-12{
  color: #0bf4f3;
  position: relative;
  right: 20px;
  bottom: 20px;
  border:none;
  width: 130px;
  height: 40px;
  line-height: 40px;
  -webkit-perspective: 230px;
  perspective: 230px;
}
.btn-12 span {
  display: block;
  position: absolute;
  width: 130px;
  height: 40px;
  border: 1px solid #0bf4f3;
  box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
  margin:0;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.btn-12 span:nth-child(1) {
  box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
}
.btn-12 span:nth-child(2) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
}
.btn-12:hover span:nth-child(1) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.btn-12:hover span:nth-child(2) {
  background: #000;
  color: #000;
  box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}


/* 13 */
.btn-13 {
  color: #0bf4f3;
  box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
  border: 1px solid #0bf4f3;
  z-index: 1;
}
.btn-13:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
  transition: all 0.3s ease;
}
.btn-13:hover {
  
}
.btn-13:hover:after {
  top: 0;
  height: 100%;
}
.btn-13:active {
  top: 2px;
}


/* 14 */
.btn-14 {
  position: relative;
  color: #00aced;
  border: none;
  z-index: 2;
}
.btn-14:before,
.btn-14:after {
  position: absolute;
  content: "";
  width: 20%;
  height: 20%;
  border: 1px solid;
  
  z-index: -1;
  transition: all 0.3s ease;
}
.btn-14:before{
   top: 0;
   left: 0;
   border-bottom-color: transparent;
   border-right-color: transparent;
   border-top-color: #00aced;
   border-left-color: #00aced;
}
.btn-14:after{
   bottom: 0;
   right: 0;
   border-top-color: transparent;
   border-left-color: transparent;
   border-bottom-color: #00aced;
   border-right-color: #00aced;
}
.btn-14:hover:before,
.btn-14:hover:after {
  border-color: #00aced;
  height: 100%;
  width: 100%;
  box-shadow: 0 0 5px #00aced, 0 0 5px #00aced inset;
}


/* 15 */
.btn-15 {
  color: #ff9aff;
  border: 1px solid#ff9aff;
  box-shadow: 0 0 5px #ff9aff, 0 0 5px #ff9aff inset;
  z-index: 1;
}
.btn-15:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  background: #ff9aff;
  box-shadow:
   0 0 20px  #ff9aff;
  transition: all 0.3s ease;
}
.btn-15:hover {
  color: #fff;
}
.btn-15:hover:after {
  left: 0;
  width: 100%;
}
.btn-15:active {
  top: 2px;
}


/* 16 */
.btn-16 {
  border: 1px solid #fff;
  box-shadow: 0 0 5px #fff, 0 0 5px #fff inset;
}
.btn-16:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  direction: rtl;
  z-index: -1;
  box-shadow:
   -7px -7px 20px 0px #fff9,
   -4px -4px 5px 0px #fff9,
   7px 7px 20px 0px #0002,
   4px 4px 5px 0px #0001;
  transition: all 0.3s ease;
}
.btn-16:hover {
 box-shadow: rgba(255,255,255, 1) -1px -1px,  -2px -2px, rgba(255,255,255, 1) -3px -3px, rgba(255,255,255, .9) -4px -4px,
   rgba(255,255,255,.8) -5px -5px, rgba(255,255,255,.7) -6px -6px, rgba(255,255,255,.6) -7px -7px, rgba(255,255,255,.5) -8px -8px,
      rgba(255,255,255,.4) -9px -9px, rgba(255,255,255,.3) -10px -10px, rgba(255,255,255,.2) -11px -11px, rgba(255,255,255,.1) -12px -12px;
}
.btn-16:hover:after {
  left: auto;
  right: 0;
  width: 100%;
}
.btn-16:active {
  top: 2px;
}


$holo-color: #00FCFC;
$width: 150px;
$height: 5px;

.card {
 // when holo effect is inside of you parent class
 position: relative;
 //
 width: 200px;
 height: 170px;
 margin-top: 70px;
 background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Flag_of_Morocco.svg/2560px-Flag_of_Morocco.svg.png);
 background-size: contain;
 background-repeat: no-repeat;
 animation: float 1s infinite alternate;
 
 // apply this style if you want to put your holo inside
 .holo {
  position: absolute;
  bottom: 0;
 }
}

.holo {
 position: relative;
 z-index: 2;
 // apply this style if you want to put your holo inside
 // position: absolute;
 // bottom: 0;
 //
 width: $width;
 height: $height;
 margin: -5px auto 0;
 background-color: rgba($holo-color, .35);
 border-radius: 100%;
 filter: blur(2.5px);
 transform: perspective(100px) rotateX(-30deg);
 transform-style: preserve-3d;
 animation: holographic 1.5s infinite alternate;
 backface-visibility: hidden;
 
 &:after {
  position: absolute;
  left: -10px;
  right: -10px;
  content: "";
  height: 10px;
  background-color: rgba($holo-color, .5);
  border-radius: 100%;
  filter: blur(2.5px);
 }
 
 + .holo {
  animation-duration: .75s;
  opacity: .5;
 }
}

@keyframes float {
 from {
  will-change: unset;
  transform: translateY(-10px)
 } to {
  will-change: transform;
  transform: translateY(-30px)
 }
}

@keyframes holographic {
 from {
  will-change: box-shadow;
  box-shadow:
  0 -75px 5px rgba($holo-color, .15),
  0 -1px 2px rgba($holo-color, .5),
  0 -45px 5px rgba($holo-color, .15),
  0 -2px 3px rgba($holo-color, .5),
  0 -3px 4px rgba($holo-color, .5),
  0 -4px 6px rgba($holo-color, .5),
  0 -5px 10px rgba($holo-color, .75),
  0 -7px 20px rgba($holo-color, .75),
  0 -10px 30px rgba($holo-color, .75),
  0 -15px 40px rgba($holo-color, .75),
  0 -25px 50px rgba($holo-color, .75),
  0 -35px 60px rgba($holo-color, .85),
  0 -45px 70px rgba($holo-color, .95),
  0 -65px 80px rgba($holo-color, 1),
  0 -75px 90px rgba($holo-color, 1),
  ;
 } to {
  will-change: unset;
  box-shadow:
  0 -1px 5px rgba($holo-color, .15),
  0 -1px 2px rgba($holo-color, .5),
  0 -1px 5px rgba($holo-color, .15),
  0 -2px 3px rgba($holo-color, .5),
  0 -3px 4px rgba($holo-color, .5),
  0 -4px 6px rgba($holo-color, .5),
  0 -5px 7px rgba($holo-color, .75),
  0 -7px 10px rgba($holo-color, .75),
  0 -10px 15px rgba($holo-color, .75),
  0 -15px 20px rgba($holo-color, .75),
  0 -25px 25px rgba($holo-color, .75),
  0 -35px 30px rgba($holo-color, .85),
  0 -45px 35px rgba($holo-color, .95),
  0 -65px 40px rgba($holo-color, 1),
  0 -75px 50px rgba($holo-color, 1),
  ;
 }
}
.page-id-85472 a, .parent-pageid-85472 a {
    color: #ffffff !important;
}

a.icon {
    color: #040404 !important;
}

.page-id-85472 i.fas.fa-lock, .parent-pageid-85472 i.fas.fa-lock  {
  background-color: #0fa2ab !important;
}

.parent-pageid-85472 .login-btn {
    color: #0fa3ac !important;
}

.page-id-85472 .login-btn {
    color: #0fa3ac !important;
}

.parent-pageid-85472 button[type='submit']
{
background-color: #028a9c!important;
}

.page-id-85472 button[type='submit']
{
background-color: #028a9c!important;
}



.page-id-85472 input.age-gate-submit {
    background-color: #1b4a7a !important;
}




.parent-pageid-85472 .button-small{
background-color: #028a9c!important;}


.parent-pageid-85472 a {
color: #ffffff;
}

.parent-pageid-85472 input[type='submit'] {
    background-color: #2c5881!important;
}
.parent-pageid-85472 .user-avatar {
background-color: #0ddeff;
}
.parent-pageid-85472 .title-wrapper {
border-color: #0ddeff !important;
}

.parent-pageid-85472  h3 {
    font-family: rog;
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.parent-pageid-85472 body {
    font-family: 'rog';
    line-height: 24px;
    font-weight: 300;
    font-style: normal;
    color: #f7f7f7;
    font-size: 12px;
    font-display: swap;
}

.parent-pageid-85472 textarea:focus {
    border-color: aqua;
}


.parent-pageid-85472 .btn {
  background-color: #08bbc7;

}

.postid-85857 .header-background-image {
    background: url(https://esna.ma/storage/2021/09/ROG-MOROCCO.png) no-repeat center center !important;
    background-size: contain !important;
}

.postid-85857 .btn {
  background-color: #08bbc7;

}


.postid-85857 .social-top {
    float: left !important;
    left: -10px !important;
    padding: 0;
    border-radius: 0;
    top: 22px !important;
    position: fixed !important;
    display: none;
}

.postid-85857 button[type='submit']{
background-color: #028a9c!important;}

.postid-85857 .button-small{
background-color: #028a9c!important;}


.postid-85857 a {
color: #ffffff;
}
.postid-85857 .user-avatar {
background-color: #0ddeff;
}
.postid-85857 .title-wrapper {
border-color: #0ddeff !important;
}

.postid-85857  h3 {
    font-family: rog;
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.postid-85857 body {
    font-family: 'rog';
    line-height: 24px;
    font-weight: 300;
    font-style: normal;
    color: #f7f7f7;
    font-size: 12px;
    font-display: swap;
}

.postid-85857 textarea:focus {
    border-color: aqua;
}

.postid-85857 .tbinfo ul li  { border-color: #08bbc7 !important;
}


button.custom-btn.btn-3 a {
    color: white;
}
.frame {
  width: 100%;
  margin: 60px auto;
  text-align: center;
}
button {
  margin: 20px;
}
.custom-btn {
  color: #fff;
  width: 260px ;
  height: 40px;
  padding: 10px 25px;
  font-family: 'rog', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  
}

/* 1 */
.btn-1 {
  border: none;
  background-color: #ff9aff;
  box-shadow: 0 0 5px #ef97e8;
}
.btn-1:hover {
   box-shadow: 0 0 10px #ef97e8, 0 0 20px #ef97e8, 0 0 20px #fff inset;
}

/* 2 */
.btn-2 {
  color: #0bf4f3;
  border: 1px solid #0bf4f3;
  box-shadow:  0 0 5px #0bf4f3,  0 0 5px #0bf4f3 inset;
}
.btn-2:before {
  height: 0%;
  width: 2px;
}
.btn-2:hover {
  color: #fff;
  box-shadow: inset 0 0 10px #0bf4f3, 0 0 20px #0bf4f3 inset, 0 0 20px #0bf4f3 inset;
}


/* 3 */
.btn-3 {
  background: #0ab3bf;
   box-shadow:  0 0 5px #0ab3bf,  0 0 8px #0ab3bf;
  line-height: 42px;
  padding: 0;
  border: none;
  z-index: 2;
  -webkit-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
.btn-3:hover{
  background-color: transparent;
  color: #0ab3bf;
  box-shadow: 0 5px 3px -3px #00aced, 0 -5px 3px -3px #0ab3bf,
    0 5px 3px -3px #0ab3bf, 0 -5px 3px -3px #0ab3bf;
}
.btn-3:before,
.btn-3:after {
  position: absolute;
  content: "";
  left: 0;
  width: 100%;
  height: 50%;
  right: 0;
  z-index: -1;
  background: #0ab3bf;
  box-shadow: 0 0 5px #0ab3bf;
  transition: all 0.3s ease;
}
.btn-3:before {
  top: 0;
}
.btn-3:after {
  bottom: 0;
}
.btn-3:hover:before,
.btn-3:hover:after {
  height: 0;
  background-color: #0ab3bf;
}


/* 4 */
.btn-4 {
  color: #8ce436;
  padding: 0;
  border: 1px solid #8ce436;
  box-shadow: 0 0 5px #8ce436, 0 0 5px inset;
}
.btn-4:after {
  position: absolute;
  content: "";
  top: 5px;
  left: 6px;
  width: 90%;
  height: 70%;
  border: 1px solid #8ce436;
  box-shadow: 0 0 5px #8ce436 inset;
  opacity: 0;
  transition: all 0.3s ease;
}
.btn-4:hover:after {
  opacity: 1;
}

/* 5 */
.btn-5 {
  background: #21ebff;
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-5:hover{
  background: transparent;
  color: #21ebff;
}
.btn-5:before,
.btn-5:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  background: #21ebff;
  width:0;
    box-shadow:  0 0 5px #21ebff,  0 0 5px #21ebff inset;
  transition:400ms ease all;
}
.btn-5:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
.btn-5:hover:before,
.btn-5:hover:after{
  width:100%;
  transition:800ms ease all;
}


/* 6 */
.btn-6 {
  background: #8ce436;
  line-height: 40px;
  padding: 0;
  border: none;
  box-shadow: 0 0 5px #8ce436;
}
.btn-6 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-6:hover{
  background: transparent;
}
.btn-6:before,
.btn-6:after {
  position: absolute;
  content: "";
  height: 0%;
  width: 2px;
  background: #8ce436;
 box-shadow: 0 0 5px #8ce436;
}
.btn-6:before {
  right: 0;
  top: 0;
  transition: all 500ms ease;
}
.btn-6:after {
  left: 0;
  bottom: 0;
  transition: all 500ms ease;
}
.btn-6:hover:before {
  transition: all 500ms ease;
  height: 100%;
}
.btn-6:hover:after {
  transition: all 500ms ease;
  height: 100%;
}
.btn-6 span:before,
.btn-6 span:after {
  position: absolute;
  content: "";
  background: #8ce436;
  box-shadow: 0 0 5px #8ce436;
}
.btn-6 span:before {
  left: 0;
  top: 0;
  width: 0%;
  height: 2px;
  transition: all 500ms ease;
}
.btn-6 span:after {
  right: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  transition: all 500ms ease;
}
.btn-6 span:hover:before {
  width: 100%;
}
.btn-6 span:hover:after {
  width: 100%;
}

/* 7 */
.btn-7 {
  color: #21ebff;
  line-height: 40px;
  padding: 0;
  border: none;
}
.btn-7 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-7:before,
.btn-7:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: #21ebff;
  box-shadow: 0 0 5px #21ebff;
  transition: all 0.3s ease;
}
.btn-7:before{
   height: 50%;
   width: 2px;
}
.btn-7:after {
  width: 20%;
  height: 2px;
}
.btn-7:hover:before {
  height: 100%;
}
.btn-7:hover:after {
  width: 100%;
}
.btn-7 span:before,
.btn-7 span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: #21ebff;
  box-shadow: 0 0 5px #21ebff;
  transition: all 0.3s ease;
}
.btn-7 span:before {
  width: 2px;
  height: 50%;
}
.btn-7 span:after {
  height: 2px;
  width: 20%;
}
.btn-7 span:hover:before {
  height: 100%;
}
.btn-7 span:hover:after {
  width: 100%;
}

/* 8 */
.btn-8 {
  line-height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid #ff9aff;
  box-shadow: 0 0 5px #ff9aff, 0 0 5px #ff9aff inset;
  position: relative;
  z-index: 2;
  color: #fff;
  -webkit-perspective: 300px;
  perspective: 300px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.btn-8:hover{
  color: #ff9aff;
}
.btn-8:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ff9aff;
  box-shadow: 0 0 5px #ff9aff;
  z-index: -1;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: rotateX(0);
  transform: rotateX(0);
  transition: all 0.3s ease;
}
.btn-8:hover:after {
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
}
  

/* 9 */
.btn-9 {
  color: #fff352;
  border: 1px solid #fff352;
  box-shadow: 0 0 5px #fff352, 0 0 5px #fff352 inset;
  z-index: 2;
  transition: all 0.3s ease;
  overflow: hidden;
}
.btn-9:after {
  position: absolute;
  content: " ";
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}
.btn-9:hover {
  color: #000;
}
.btn-9:hover:after {
  background: #fff352;
  -webkit-transform: scale(2) rotate(180deg);
  transform: scale(2) rotate(180deg);
  box-shadow:  4px 4px 6px 0 rgba(255,255,255, 1),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255, 1),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
}

/* 10 */
.btn-10 {
  border: 1px solid #ff9aff;
  box-shadow: 0 0 5px #ff9aff, 0 0 5px #ff9aff inset;
  color: #ff9aff;
  background: #000;
  z-index: 2;
  transition: all 0.3s ease;
  overflow: hidden;
}
.btn-10:after {
  position: absolute;
  content: " ";
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: #ff9aff;
  transition: all 0.3s ease;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.btn-10:hover {
  color: #fff;
}
.btn-10:hover:after {
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* 11 */
.btn-11 {
  border: 1px solid #21ebff;
  color: #21ebff;
  box-shadow: 0 0 5px #21ebff, 0 0 5px #21ebff inset;
  transition: all 0.3s ease;
}
.btn-11:hover{
   text-shadow:
    0 0 20px #21ebff,
    0 0 50px rgba(33, 235, 255, .9),
    0 0 75px rgba(33, 235, 255, .8),
    0 0 76px rgba(33, 235, 255, .7),
    0 0 77px rgba(33, 235, 255, .6),
    0 0 78px rgba(33, 235, 255, .5),
    0 0 79px rgba(33, 235, 255, .4),
    0 0 80px rgba(33, 235, 255, .3),
    0 0 85px rgba(33, 235, 255, .2),
     0 0 99px rgba(33, 235, 255, .1);
}



/* 12 */
.btn-12{
  color: #0bf4f3;
  position: relative;
  right: 20px;
  bottom: 20px;
  border:none;
  width: 130px;
  height: 40px;
  line-height: 40px;
  -webkit-perspective: 230px;
  perspective: 230px;
}
.btn-12 span {
  display: block;
  position: absolute;
  width: 130px;
  height: 40px;
  border: 1px solid #0bf4f3;
  box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
  margin:0;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.btn-12 span:nth-child(1) {
  box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
}
.btn-12 span:nth-child(2) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
}
.btn-12:hover span:nth-child(1) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.btn-12:hover span:nth-child(2) {
  background: #000;
  color: #000;
  box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}


/* 13 */
.btn-13 {
  color: #0bf4f3;
  box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
  border: 1px solid #0bf4f3;
  z-index: 1;
}
.btn-13:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
  transition: all 0.3s ease;
}
.btn-13:hover {
  
}
.btn-13:hover:after {
  top: 0;
  height: 100%;
}
.btn-13:active {
  top: 2px;
}


/* 14 */
.btn-14 {
  position: relative;
  color: #00aced;
  border: none;
  z-index: 2;
}
.btn-14:before,
.btn-14:after {
  position: absolute;
  content: "";
  width: 20%;
  height: 20%;
  border: 1px solid;
  
  z-index: -1;
  transition: all 0.3s ease;
}
.btn-14:before{
   top: 0;
   left: 0;
   border-bottom-color: transparent;
   border-right-color: transparent;
   border-top-color: #00aced;
   border-left-color: #00aced;
}
.btn-14:after{
   bottom: 0;
   right: 0;
   border-top-color: transparent;
   border-left-color: transparent;
   border-bottom-color: #00aced;
   border-right-color: #00aced;
}
.btn-14:hover:before,
.btn-14:hover:after {
  border-color: #00aced;
  height: 100%;
  width: 100%;
  box-shadow: 0 0 5px #00aced, 0 0 5px #00aced inset;
}


/* 15 */
.btn-15 {
  color: #ff9aff;
  border: 1px solid#ff9aff;
  box-shadow: 0 0 5px #ff9aff, 0 0 5px #ff9aff inset;
  z-index: 1;
}
.btn-15:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  background: #ff9aff;
  box-shadow:
   0 0 20px  #ff9aff;
  transition: all 0.3s ease;
}
.btn-15:hover {
  color: #fff;
}
.btn-15:hover:after {
  left: 0;
  width: 100%;
}
.btn-15:active {
  top: 2px;
}


/* 16 */
.btn-16 {
  border: 1px solid #fff;
  box-shadow: 0 0 5px #fff, 0 0 5px #fff inset;
}
.btn-16:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  direction: rtl;
  z-index: -1;
  box-shadow:
   -7px -7px 20px 0px #fff9,
   -4px -4px 5px 0px #fff9,
   7px 7px 20px 0px #0002,
   4px 4px 5px 0px #0001;
  transition: all 0.3s ease;
}
.btn-16:hover {
 box-shadow: rgba(255,255,255, 1) -1px -1px,  -2px -2px, rgba(255,255,255, 1) -3px -3px, rgba(255,255,255, .9) -4px -4px,
   rgba(255,255,255,.8) -5px -5px, rgba(255,255,255,.7) -6px -6px, rgba(255,255,255,.6) -7px -7px, rgba(255,255,255,.5) -8px -8px,
      rgba(255,255,255,.4) -9px -9px, rgba(255,255,255,.3) -10px -10px, rgba(255,255,255,.2) -11px -11px, rgba(255,255,255,.1) -12px -12px;
}
.btn-16:hover:after {
  left: auto;
  right: 0;
  width: 100%;
}
.btn-16:active {
  top: 2px;
}


$holo-color: #00FCFC;
$width: 150px;
$height: 5px;

.card {
 // when holo effect is inside of you parent class
 position: relative;
 //
 width: 200px;
 height: 170px;
 margin-top: 70px;
 background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Flag_of_Morocco.svg/2560px-Flag_of_Morocco.svg.png);
 background-size: contain;
 background-repeat: no-repeat;
 animation: float 1s infinite alternate;
 
 // apply this style if you want to put your holo inside
 .holo {
  position: absolute;
  bottom: 0;
 }
}

.holo {
 position: relative;
 z-index: 2;
 // apply this style if you want to put your holo inside
 // position: absolute;
 // bottom: 0;
 //
 width: $width;
 height: $height;
 margin: -5px auto 0;
 background-color: rgba($holo-color, .35);
 border-radius: 100%;
 filter: blur(2.5px);
 transform: perspective(100px) rotateX(-30deg);
 transform-style: preserve-3d;
 animation: holographic 1.5s infinite alternate;
 backface-visibility: hidden;
 
 &:after {
  position: absolute;
  left: -10px;
  right: -10px;
  content: "";
  height: 10px;
  background-color: rgba($holo-color, .5);
  border-radius: 100%;
  filter: blur(2.5px);
 }
 
 + .holo {
  animation-duration: .75s;
  opacity: .5;
 }
}

@keyframes float {
 from {
  will-change: unset;
  transform: translateY(-10px)
 } to {
  will-change: transform;
  transform: translateY(-30px)
 }
}

@keyframes holographic {
 from {
  will-change: box-shadow;
  box-shadow:
  0 -75px 5px rgba($holo-color, .15),
  0 -1px 2px rgba($holo-color, .5),
  0 -45px 5px rgba($holo-color, .15),
  0 -2px 3px rgba($holo-color, .5),
  0 -3px 4px rgba($holo-color, .5),
  0 -4px 6px rgba($holo-color, .5),
  0 -5px 10px rgba($holo-color, .75),
  0 -7px 20px rgba($holo-color, .75),
  0 -10px 30px rgba($holo-color, .75),
  0 -15px 40px rgba($holo-color, .75),
  0 -25px 50px rgba($holo-color, .75),
  0 -35px 60px rgba($holo-color, .85),
  0 -45px 70px rgba($holo-color, .95),
  0 -65px 80px rgba($holo-color, 1),
  0 -75px 90px rgba($holo-color, 1),
  ;
 } to {
  will-change: unset;
  box-shadow:
  0 -1px 5px rgba($holo-color, .15),
  0 -1px 2px rgba($holo-color, .5),
  0 -1px 5px rgba($holo-color, .15),
  0 -2px 3px rgba($holo-color, .5),
  0 -3px 4px rgba($holo-color, .5),
  0 -4px 6px rgba($holo-color, .5),
  0 -5px 7px rgba($holo-color, .75),
  0 -7px 10px rgba($holo-color, .75),
  0 -10px 15px rgba($holo-color, .75),
  0 -15px 20px rgba($holo-color, .75),
  0 -25px 25px rgba($holo-color, .75),
  0 -35px 30px rgba($holo-color, .85),
  0 -45px 35px rgba($holo-color, .95),
  0 -65px 40px rgba($holo-color, 1),
  0 -75px 50px rgba($holo-color, 1),
  ;
 }
}/* End custom CSS */