/**
 * #.# Map Module
 *
 * Styles for template-part/modules/map_module.php
**/

.marquee-text{overflow:hidden;white-space:nowrap;position:relative;z-index:2}
.marquee-text-track,.marquee-text-track-rev{display:flex;gap:4.8rem;padding-left:4.8rem;width:max-content}
.marquee-text p{color:var(--white);font-size:clamp(1.75rem,-0.1206rem + 5.9859vw,7.0625rem)}

.marquee-text-track{animation:marquee-move-text var(--speed,40s) linear infinite}

.marquee-text-track-rev{animation:marquee-move-text-rev var(--speed,40s) linear infinite}

.map_module{padding:0;position:relative;padding:50px 0;aspect-ratio:16 / 8.8;overflow:hidden;background-color:var(--black)}
.map_module .container{height:100%}
.clipping-path{background-image:url(../../../img/cliping-path.svg);background-position:center center;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;top:50px;position:absolute;width:calc(100% - 80px);height:100%;z-index:5;left:40px;height:calc(100% - 100px);right:40px;overflow:hidden}
.background-map{top:50px;position:absolute;width:calc(100% - 80px);height:calc(100% - 100px);z-index:1;left:40px;overflow:hidden;right:40px}
.marquee-container{display:flex;align-items:center;height:calc(100% - 50px);overflow:hidden}

@keyframes marquee-move-text {
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@keyframes marquee-move-text-rev {
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}

@media (max-width: 1200px) {

}


@media (max-width: 768px) {
  .map_module {aspect-ratio: 16 / 10;}
  .marquee-container {height: calc(100% - 10px);margin-left: 10px;margin-right: 11px;}
}

@media (max-width: 600px) {
  .map_module {aspect-ratio: 16 / 11;}
  .marquee-container {height: calc(100% - 0px);margin-left: 10px;margin-right: 11px;}
  .marquee-text-track, .marquee-text-track-rev {gap: 2rem;padding-left: 2rem;}
  .map_module .container {height: 100%;padding: 0px 0px;}
  .clipping-path {right:0px;width:100%;left:0px}
  .background-map {
    width: 100%;
    left: 0px;
    right: 0px;
  }  
  .marquee-container {
    margin-left: 0px;
    margin-right: 0px;
  }
}