/* ============================================================
   TRIWOLY – Styly pro stránku: DJ stránka (body.DJ)
   Doplněk k style.css a media-queries.css
   ============================================================ */

/* --- Základní styly --- */
body.DJ{font-family:'Montserrat',Tahoma,Verdana,Arial}
body.DJ h2,body.DJ h3{font-family:inherit}
body.DJ h4{font-weight:600}
body.DJ .time h4{display:block;height:280px;aspect-ratio:16/9}
body.DJ .chapter strong{font-weight:700}
body.DJ #fifth .col-table{margin:0 auto}
span.travel.dest{-webkit-mask-image:url(../images/position-location-svgrepo-com.svg);-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;-webkit-mask-size:70px auto;mask-image:url(../images/position-location-svgrepo-com.svg);mask-repeat:no-repeat;mask-position:50% 50%;mask-size:70px auto;background:var(--orange)}body.DJ span.travel.dest{background:var(--red)}
body.DJ .destination{background:rgba(255,255,255,.1);border-radius:10px;width:96%!important;font-weight:300}
body.DJ h1 em:after{background:var(--red)}
body.DJ .first .half-col .capital{padding:0 0 0 30px;margin:50px 0!important;border-left:3px solid #30306066}
body.DJ header{height:90px;padding-top:0}
body.DJ header .centering a:before{background:var(--red)}
body.DJ header .centering a:after{background:var(--red)}
body.DJ header span.centering{margin:36px 0 0}
body.DJ header.darkHeader span.centering{margin:29px 0 0}
body.DJ .darkHeader,body.DJ .darkHeader-stabil{height:60px}
body.DJ header a.logo:before{display:none}
body.DJ header a.logo{width:200px;height:60px;background:url(../images/DJ-Gufi.png) no-repeat;background-size:200px auto;margin-left:0}
body.DJ .mlogo,body.DJ .mlogo-stabil{margin-left:0!important}
body.DJ .mlogo,body.DJ .mlogo-stabil{width:160px!important;height:50px!important;background-size:160px auto!important}
body.DJ .chapter{padding:130px 0}
body.DJ .cont_form{background:var(--mid-blue)}
body.DJ .treti{padding:0;clip-path:polygon(100% 0vw,100% 100%,0% 100%,0% 0vw,50% 0);margin-top:0;border-top:1px solid #f7f7f7}
body.DJ .countUp div p{color:#888}
body.DJ .variant{cursor:default;background:var(--dark-blue);border-radius:5px;border:0}
body.DJ .variant .top-img{height:300px}
body.DJ .variant .obraz-1{background:url(../images/DJ-obrad.webp)}
body.DJ .variant .obraz-2{background:url(../images/DJ-raut.jpg)}
body.DJ .variant .obraz-3{background:url(../images/DJ-first-dance.jpg)}
body.DJ .variant .obraz-4{background:url(../images/DJ-hry.jpg)}
body.DJ .variant .obraz-5{background:url(../images/DJ-afterparty.jpg)}
body.DJ .variant h3{font-size:.9em;background:rgba(var(--red_rgb),.9);font-weight:400;top:0;text-align:center;bottom:auto;padding:10px 0}
body.DJ .variant p{color:#aaa;text-align:center;padding:15px}
body.DJ footer .footer-social a{background:var(--red)}
body.DJ footer .footer-contact p em{background:var(--red)}
body.DJ .button{display:inline-block;background:var(--red);background:linear-gradient(135deg,var(--red),#d12a2a);color:#fff!important;text-decoration:none;padding:14px 28px;border-radius:40px;font-weight:700;font-size:16px;transition:all .3s ease;border:0}
.header-button i{content:'';display:inline-block;width:22px;height:16px;margin:0 0 -2px 8px;background:#fff;-webkit-mask-image:url(../images/mail-svgrepo-com.svg);-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 50%;-webkit-mask-size:22px auto;mask-image:url(../images/mail-svgrepo-com.svg);mask-repeat:no-repeat;mask-position:50% 50%;mask-size:22px auto}body.DJ .button:hover{background:linear-gradient(135deg,#b52c2c,#e43a3a)}
body.DJ .order:hover{color:var(--red)!important}
body.DJ .chapter a{color:var(--red)}
body.DJ ul.djl{position:relative;list-style:none;text-align:left;background:#fff;padding:80px;color:#303060;letter-spacing:.05em;font-size:1.15em;box-shadow:1px 1px 3px rgba(0,0,0,.2);margin-bottom:40px}
body.DJ ul.djl:before{content:'';position:absolute;top:0;right:0;bottom:0;left:50%;background:url(../images/booth.jpg) no-repeat;background-size:cover;z-index:1;border:1px solid #fff}
body.DJ ul.djl li{margin:8px 0}
body.DJ ul.djl li:before{content:"";position:relative;display:inline-block;width:16px;height:16px;background:url(../images/Gufi-nota.png) no-repeat;background-size:14px auto;margin-right:10px}

/* --- Responsive --- */
@media screen and (max-width:1280px) {
  body.DJ ul.djl:before{left:60%}
}

@media screen and (max-width:1000px) {
  body.DJ header a.logo{width:220px;height:70px;background-size:220px auto}
  body.DJ header span.centering{margin:49px 0 0}
  .chapter,body.DJ .chapter{padding:80px 0}
  body.svatby .first .half-col .capital,body.DJ .first .half-col .capital{padding:15px;margin:40px 0;border-radius:5px;background:#fad1be57;font-size:14px}
  body.DJ ul.djl:before{left:0;opacity:.1}
  .treti,body.DJ .treti{padding:0}
  body.DJ .introduction div{width:46%}
}

@media screen and (max-width:768px) {
  body.DJ .destination p{font-size:13px}
  body.DJ p.trailer{width:inherit}
  body.DJ h1{font-size:40px;width:100%}
  body.DJ h1 span{font-size:16px}
  body.DJ h3{font-size:18px;font-weight:600}
  body.DJ header,body.DJ .darkHeader{height:44px}
  body.DJ header a.logo,body.DJ .mlogo,body.DJ .mlogo-stabil{width:140px!important;height:43px!important;background-size:140px auto!important;margin:0!important}
  body.DJ header div.tow{margin-top:12px}
  body.DJ header.darkHeader span.centering,body.DJ header span.centering{margin:80px 0 0}
  body.DJ .fullHeight{height:100%;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}
  body.DJ .first{clip-path:none;margin-top:-20px}
  body.DJ #fifth .half-col{box-shadow:rgba(60,64,67,0) 0 1px 2px 0px,rgba(60,64,67,0) 0 2px 6px 2px;padding:20px 2%}
  body.DJ #fifth .col-table{border-spacing:0}
  p.highlight,body.DJ ul.djl{padding:40px;font-size:17px;margin-bottom:0}
  body.DJ .introduction div.full{padding:0;overflow:hidden}
  body.DJ ul.djl li{margin:5px 0}
  .treti,body.DJ .treti{padding:0}
  body.DJ .introduction div{width:100%;margin:10px 0;padding:20px}
  body.DJ .introduction{box-shadow:none;border:0}
  footer h3,body.DJ footer h3{font-size:1.2em}
  body.DJ .calculator-row p{font-size:.7em}
}