/* colors */
:root {
    --scarlet: #DF3A24;
}

.bg-scarlet {background-color: var(--scarlet);}
.text-scarlet { color:var(--scarlet);}

/* general */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Mulish:wght@300&display=swap');

@font-face {
  font-family: "Vesterbro";
  src: url("/fonts/Vesterbro-Light.ttf") format("truetype");
  font-style: normal;
}

@font-face {
  font-family: "Vesterbro";
  src: url("/fonts/Vesterbro-LightItalic.ttf") format("truetype");
  font-style: italic;
}

body, html { font-family: 'Mulish', sans-serif; }
h5 {font-family: 'Marcellus', serif;}
h1.title {font-family: 'Marcellus', serif;font-weight: 400;font-size: 70px;line-height: 88px;}
h1 {font-weight: 300;font-size: 80px;line-height: 90px;letter-spacing: 0.01em;font-family: 'Vesterbro', serif;  }
h2 {font-size: 70px;font-weight: 400;line-height: 87.77px;font-family: 'Marcellus', serif;}

/* bootstrap custom */

ul.navbar-nav li.nav-item a.nav-link.active { border-bottom: 4px solid var(--scarlet) !important; }
ul.navbar-nav li.nav-item.static a.nav-link, ul.navbar-nav li.nav-item a.nav-link { font-family: 'Vesterbro', serif;font-weight: 300;font-size: 16px;line-height: 19px; }

/* tricks */
.mt-start {margin-top: 5rem;}

.bg-image {background-position: center;background-repeat: no-repeat;background-size: cover;height: 75vh;z-index:0;}
.bg-filter {position: relative;}
.bg-filter::after {content: "";width: 100%;height: 100%;background-color: rgba(0, 0, 0, .5);position: absolute;}

.bg {background-position: center !important;background-size: cover!important; background-repeat: no-repeat!important;background-position-x: center!important;}
.banner {height: 45vh;}

.t-effect {position: relative;z-index:1;}
.t-effect::before {z-index:1;content: "";position: absolute;left:0;top:-2px;width: 5.6rem;height: 5.6rem;background: url('/assets/images/angle.png');background-repeat: no-repeat;}
.t-effect.traingle-black::before {border-color: transparent black transparent transparent;}
.t-effect.traingle-scarlet::before {border-color: transparent var(--scarlet) transparent transparent;}


.text-vertical {content: "MID MIX"; writing-mode: vertical-rl;transform: rotate(180deg); left:100px; top:50%;}

.swiper {
  width: 100%;
  height: 100%;
}
.swiper-slide {margin-bottom: 1rem;display: flex;}

/* buttons */
a.nuuk-btn {color:var(--scarlet); background-color: black;text-decoration: none;padding:12px 24px 16px 32px;display: inline-flex;align-items: center;}
a.float-bottom-container {position: absolute;bottom:-25px;z-index: 1;}

a.nuuk-btn-scarlate, .nuuk-btn-scarlate {border:none;background-color:var(--scarlet); color: black;text-decoration: none;padding:12px 24px 16px 32px;display: inline-flex;align-items: center;}
a.float-top-container {position: absolute;top:-25px;z-index: 1;right: 4rem;}

a.nuuk-btn-white {color:var(--scarlet); background-color: white;text-decoration: none;padding:12px 24px 16px 32px;display: inline-flex;align-items: center; border:1px solid var(--scarlet);}

/* form */
select.form-select {background-color:#F0F8FD;background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");}


input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #919191;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: black;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3.6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #919191;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #919191;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: black;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #919191;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #919191;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: black;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #919191;
}
input[type=range]:focus::-ms-fill-upper {
  background: #919191;
}

@media screen and (max-width: 570px) {
  .t-effect::before {display:none;}
}

@media screen and (max-width: 1400px) {
  h1.contact {font-size: 50px !important;}
}


@media screen and (max-width: 784px) {
    h1 {font-size: 30px!important;line-height: normal!important;}
    a.float-bottom-container {position: relative;}
    .swiper-slide {max-width: 100%!important;margin-right: 1rem;}
}

@media screen and (max-width: 768px) {
  h1 {font-size: 50px!important;line-height: 1!important;}
}

@media screen and (max-width: 400px) {
  h1 {font-size: 30px!important;}
  h2 {font-size: 30px!important;}
  .t-effect::before {display:none;}
}

@media screen and (min-width: 995px) {
  .position-lg-absolute {position: absolute;}
}

/* pagination */
ul.custom-pagination { list-style: none; display: flex;}
ul.custom-pagination li.page-item { margin-left: 1rem; margin-right: 1rem;color:var(--scarlet); display: flex; align-items: center;}
ul.custom-pagination li.page-item-slides, ul.custom-pagination li.page-item.active { margin-left: 1rem; margin-right: 1rem;color:white; background-color: black;padding: .5rem 1rem; display: flex; align-items: center;}
ul.custom-pagination li.page-item.active {padding: 0rem .5rem;}
ul.custom-pagination li.page-item a.page-link.disabled {background-color: gray!important;pointer-events: none!important;}


.h-badge {position: relative;overflow: hidden;}
.h-badge span.h-badge {z-index: 1;overflow: hidden;transform: rotate(310deg);display:block;background-color: var(--scarlet); text-align: center;padding: .5rem 5rem;width: fit-content; position: absolute; top:50px;left:-60px;}

.carousel-control-prev-icon, .carousel-control-next-icon { display:flex; align-items:center;justify-content: center; background-color: #F5F5F5;border-radius: 50%;color:black;background-image: none;}


.gallery-grid {display:flex;flex-direction:row;flex-wrap: wrap;}
.gallery-grid div.container-img {width: 33% !important; height:20rem;background-repeat:no-repeat;background-size:cover;position:relative;}
.gallery-grid div.container-img div {background-color:rgba(0, 0, 0, .5);width:100%; height:100%;color:white;display:flex;justify-content:center;align-items:center;opacity:0%; transition:1s ease-in-out;cursor:pointer;}
.gallery-grid div.container-img div:hover {opacity: 1;}

.mnt-5 {margin-top: -10px;}

.border-start-red {padding-left: 6rem;margin-top:3rem;margin-bottom: 3rem;padding-top: 1.5rem;padding-bottom: 1.5rem;border-left: 6px solid var(--scarlet);}
.navbar-dark a {color: white!important;}
.navbar-light a {color: black!important;}