/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Vars – prilagodi po potrebi */
:root{
  --header-h: 70px;           /* normalna visina headera */
  --header-h-sticky: 70px;    /* visina kad je sticky */
  --logo-h: 28px;             /* početna visina loga */
  --logo-h-sticky: 28px;      /* visina loga kad je sticky */

/*iozdvojeno*/

  --brand-primary:#C1121F; --brand-primary-700:#9D0E19; --brand-primary-100:#F7E9EB;
  --brand-black:#0A0A0A; --brand-graphite:#151515; --brand-charcoal:#1E1E1E;
  --brand-smoke:#9AA0A6; --brand-paper:#F5F6F7; --brand-white:#FFFFFF;
  --brand-gold:#C6A667; --brand-silver:#C0C4C8;
  --brand-success:#2BA84A; --brand-warning:#E6A700;

  --radius:16px;
  --shadow-hard:0 14px 40px rgba(0,0,0,.35);

/* === Dark + Gold tema za tražilicu vozila === */

  --dg-bg: #0b0b0f;          /* pozadina sekcije */
  --dg-panel: #101115;       /* panel polja */
  --dg-text: #e8e8e8;        /* primarni tekst */
  --dg-muted: #a6a6a6;       /* sekundarni tekst */
  --dg-border: #23242a;      /* rub polja */
  --dg-gold: #d4af37;        /* primarna zlatna */
  --dg-gold-dark: #b78b23;   /* tamnija zlatna za gradijent */
  --dg-ring: rgba(212,175,55,.32); /* fokus prsten */
}

/* Mobile fine-tuning (po želji) */
@media (max-width: 767px){
  :root{
    --header-h: 60px;
    --header-h-sticky: 60px;
    --logo-h: 28px;
    --logo-h-sticky: 28px;
  }
}
/* Osnova headera */
#headerMain {
  height: var(--header-h);
  transition: height .35s ease, box-shadow .35s ease, background-color .35s ease;
  will-change: height, box-shadow, background-color;
}

/* Kad Elementor aktivira sticky efekte na sekciji, dobiva ovu klasu */
#headerMain.elementor-sticky--effects {
  height: var(--header-h-sticky);
  background: rgba(255,255,255,0.5);           /* po želji */
  backdrop-filter: blur(6px);                  /* lijepi "glass" efekt (moderno) */
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

/* Logo – glatko smanjivanje */
#headerMain .site-logo img {
  height: var(--logo-h)!important;
}


/* Logo – glatko smanjivanje */
#headerMain.elementor-sticky--effects .site-logo img {
  height: var(--logo-h)!important;
  transition: height .35s ease, transform .35s ease, opacity .35s ease;
  transform-origin: left center;
}

/* Sticky stanje logotipa */
#headerMain.elementor-sticky--effects .site-logo img {
  height: var(--logo-h-sticky)!important;
  transform: translateY(0) scale(1.00);
  opacity: 0.98;
}

/* Mala "slide-in" animacija cijelog sadržaja headera kad postane sticky */
#headerMain .elementor-container {
  transition: transform .35s ease, opacity .35s ease;
}
#headerMain.elementor-sticky--effects .elementor-container {
  transform: translateY(-2px);
  opacity: 1;
}

/* Osiguraj da slider ima visinu (po potrebi) */

/* Slike ispune okvir, režu se po rubovima ako treba */
.splide-vozilo .splide__slide img{
  width: 100%;
  height: 350px;
  object-fit: cover;
  display: block;
        border-radius: 25px;

}


/*trazilica*/
.naslov_tr{
    font-size: 45px;
    font-weight: 300;
    color: var(--e-global-color-77dd8ae);
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #D4AF377D;
    padding: 20px  0px;
    margin:  20px 0px;
    display: flex;
    align-content: flex-end;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;

}
.chip--clear, .chip--clear a{
        font-size: 18px;
    font-weight: 300;
}
.chip{
           font-size: 24px;
    font-weight: 300;
    padding: 0px 0px 10px 10px;
 
}
.vozila-empty{
          font-size: 18px;
    font-weight: 300;
      color: var(--dg-gold);

}

/*vozilo*/
/* === Single vozilo: istaknuta slika (hero) === */
.vozilo-featured{
  position: relative;
  background: #0D0D0D;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius,16px);
  overflow: hidden;
  /* 16:9 hero okvir (uskladi s .lux-card__media) */
  aspect-ratio: 16/9;
  box-shadow: var(--shadow-hard, 0 14px 40px rgba(0,0,0,.35));
}

/* full-bleed varijanta (makni ako želiš standardnu širinu) */
.vozilo-featured--fullbleed{
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  box-shadow: none;
}

/* slika unutra */
.vozilo-featured__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform .45s ease, filter .45s ease;
}

/* lagani "parallax-like" hover na desktopu */
@media (hover: hover){
  .vozilo-featured:hover .vozilo-featured__img{
    transform: scale(1.03);
    filter: saturate(1.02);
  }
}

/* tamni "glass" badge u kutu (ako poželiš npr. stanje vozila) */
.vozilo-featured .lux-card__badge{
  position:absolute; top:12px; left:12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(4px);
  color:#F1F3F4;
  border-radius:999px;
  padding:.35rem .7rem;
  font-size:.8rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}




/* respektiraj reduced motion */
@media (prefers-reduced-motion: reduce){
  .vozilo-featured__img{ transition: none; }
}


/* GRID WRAPPER naslovna*/
.vozila-grid{
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;                 /* mob */
}
@media (min-width: 640px){
  .vozila-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }   /* sm */
}
@media (min-width: 992px){
  .vozila-grid.vozila-grid--cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }  /* md+ */
  .vozila-grid.vozila-grid--cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }  /* md+ */
}

/* STACK KARTICA (slika gore, tekst dolje) */
.car-card--stack.lux-vehicle-card{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  border-radius: var(--radius, 16px);
  overflow: hidden;
}
.car-card--stack .lux-card__media{
  margin: 0;
  aspect-ratio: 16/9;
  border-radius: 0;
}
.car-card--stack .lux-card__body{
  padding: 16px 18px 18px;
}
.car-card--stack .lux-card__title{ margin-bottom: 10px; }
.car-card--stack .lux-card__meta,
.car-card--stack .lux-card__meta_a{
  margin-bottom: 12px;
  grid-template-columns: 1fr 1fr;       /* kompaktnije u grid kartici */
}



/*logotipi*/
#logo-slider img{
    height: 35px;
    width: 100%;
    object-fit: contain;
    padding-right: 15px;
    padding-left: 15px;
}

/* Add your custom styles here */


/* ========== Kartice vozila (dark split) ========== */
.car-card{
  background: linear-gradient(180deg, var(--brand-graphite), var(--brand-charcoal));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  color: var(--brand-white);
}

.vozilo-related__title{
  color: #d4af37;
      font-size:1.8rem;
    font-weight: 300;

}



.car-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-hard);
  border-color: rgba(198,166,103,.45); /* gold edge on hover */
}

/* Layout: slika lijevo, tekst desno */
.car-card.car-card--split{
  display:grid;
  grid-template-columns: 13fr 7fr; /* umjesto minmax(300px,48%) 1fr */
  gap: 28px;
  padding: 20px;
  align-items:center;
}


/* Mobitel: stack */
@media (max-width: 992px){
  .lux-vehicle-card{ grid-template-columns: 1fr; }
}

@media (max-width: 992px){
  .car-card.car-card--split{
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 16px;
  }
}

/* Media blok i slider neka ispunjavaju prostor */
.lux-card__media {
  position: relative;
  border-radius: calc(var(--radius, 16px) - 6px);
  overflow: hidden;
  background: #0D0D0D;
  aspect-ratio: 16 / 9; /* ili 4/3 ako tako voliš */
}

.lux-card__media .splide,
.lux-card__media .splide__track,
.lux-card__media .splide__list,
.lux-card__media .splide__slide {
  height: 100%;
}

.lux-card__media .splide__slide .lux-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Navigacija Splidea finija u dark/lux stilu */
.splide-vozilo .splide__arrow {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(4px);
    
    align-items: center;
    background: #ccc;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    height: 2.5em;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: .5;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5em;
    z-index: 1;    
    
    
}
.splide-vozilo .splide__arrow svg { fill: #fff; }
.splide-vozilo .splide__pagination__page {
  background: rgba(255,255,255,.35);
}
.splide-vozilo .splide__pagination__page.is-active {
  background: var(--brand-gold, #C6A667);
}

/* Badge (glass) */
.car-card .lux-card__badge{
  position:absolute; top:12px; left:12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(4px);
  color:#F1F3F4;
  border-radius:999px;
  padding:.35rem .7rem;
  font-size:.8rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* Body + tipografija */
.car-card .lux-card__body{ color:var(--brand-white); }
.car-card .lux-card__title, .car-card .lux-card__title a{
  margin:0 0 8px 0;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height:1.14; font-weight:400; letter-spacing:.01em;
    color:var(--brand-white);
}

/* Meta grid: Proizvođač / Model / Godina */
.car-card .lux-card__meta{
  list-style:none; padding:0; margin:0 0 18px 0;
  display:grid; gap:10px 18px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 576px){
  .car-card .lux-card__meta{ grid-template-columns: 1fr 1fr; }
}
.car-card .lux-card__meta li{
  display:grid; gap:2px; min-width:0;
}
.car-card .lux-card__meta li span{
  color:var(--brand-smoke);
  font-size:0.9rem; letter-spacing:.04em; text-transform:uppercase;
}
.car-card .lux-card__meta li strong{
  font-size:1.1rem; font-weight:600; color:var(--brand-white);
}
/* Meta grid: Proizvođač / Model / Godina */
.car-card .lux-card__meta_a{
  list-style:none; padding:0; margin:0 0 18px 0;
  display:grid; gap:10px 18px;
  /*grid-template-columns: repeat(2, minmax(0,1fr));*/
    
   grid-template-columns: 2fr 1fr;    /* prva ≈ 2 gornje */
    
}
@media (max-width: 576px){
  .car-card .lux-card__meta_a{ grid-template-columns: 1fr 1fr; }
  .car-card .lux-card__meta{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.car-card .lux-card__meta_a li{
  display:grid; gap:2px; min-width:0;
}
.car-card .lux-card__meta_a li span{
  color:var(--brand-smoke);
  font-size:12px; letter-spacing:.04em; text-transform:uppercase;
}
.car-card .lux-card__meta_a li strong{
  font-size:0.9rem; font-weight:600; color:var(--brand-white);
}

/* Gumb — diskretni premium gold */
.car-card .lux-card__btn, .vozila-trazilica button[type="submit"]{
  display:inline-block;
  padding:8px 15px; border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)) border-box,
    linear-gradient(90deg, var(--brand-gold), #e0c990) border-box;
  border:1px solid transparent;
  color:#111; text-decoration:none; font-weight:700;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
  font-weight: 500;
  font-size: 0.8rem;
    text-transform: uppercase;

}
.car-card .lux-card__btn:hover, .vozila-trazilica button[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(0,0,0,.35);
  opacity:.96;
}
/* Submit gumb – zlatni gradijent + "shine" efekt */
.vozila-trazilicaaa button[type="submit"]{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  border-radius: 12px;
  border: 1px solid rgba(212,175,55,.36);
  background-image: linear-gradient(135deg, var(--dg-gold), var(--dg-gold-dark));
  color: #1a1a1a; /* čitljivost na zlatu */
  font-weight: 500;
  letter-spacing: .03em;
    font-size: 0.9rem;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(212,175,55,.25);
  transition: transform .15s ease, box-shadow .25s ease, filter .25s ease;
  cursor: pointer;
}
.vozila-trazilicasaa button[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(212,175,55,.32);
  filter: brightness(1.03);
}
.vozila-trazilicaaa button[type="submit"]:active{
  transform: translateY(0);
}
/* Ako ne želiš dirati HTML i gumb ima .w-100 (Bootstrap), pregazi ga: */
.vozila-trazilica button.btn.w-100 { width: auto !important; }
.vozila-trazilica button.btn { white-space: nowrap; justify-self: end; }

/* "Shine" preljev pri hoveru */
.vozila-trazilicaaa button[type="submit"]::after{
  content: "";
  position: absolute;
  top: -20%;
  left: -40%;
  width: 40%;
  height: 140%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.55), rgba(255,255,255,0));
  filter: blur(2px);
  opacity: 0;
  transition: left .6s ease, opacity .35s ease;
  pointer-events: none;
}
.vozila-trazilicaaa button[type="submit"]:hover::after{
  left: 140%;
  opacity: 1;
}






/* Opcionalno: cijena ako je dodaš */
.car-price{ font-weight:700; color:#fff; }
.car-price .currency{ color:var(--brand-smoke); font-weight:500; }




/* Prefer-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .lux-card__img,
  .lux-card__btn{ transition: none; }
}
/*paginacija*/
/* PAGINACIJA — dark/gold elegant */
.vozila-pagination{
  margin: 24px 0 36px;
  display: flex;
  justify-content: center;
}
.vozila-pagination .pagination{
  display: flex;
  gap: 10px;
  padding: 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border: 1px solid var(--dg-border, rgba(255,255,255,.12));
  box-shadow:
    0 14px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.04);
  /* mobile scroll */
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.vozila-pagination .pagination::-webkit-scrollbar{ height: 8px; }
.vozila-pagination .pagination::-webkit-scrollbar-thumb{
  background: rgba(212,175,55,.35);
  border-radius: 10px;
}

/* Reset liste */
.vozila-pagination .pagination li{ list-style: none; }

/* Link / gumb */
.vozila-pagination .pagination li a,
.vozila-pagination .pagination li span,
.vozila-pagination .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 12px;
  border: 1px solid var(--dg-border, rgba(255,255,255,.12));
  background: var(--dg-panel, rgba(255,255,255,.04));
  color: var(--dg-text, #eaeaea);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  transition: border-color .25s ease, box-shadow .25s ease, transform .15s ease, background-color .25s ease;
}

/* Hover */
.vozila-pagination .pagination li a:hover,
.vozila-pagination .page-numbers:not(.current):hover{
  border-color: rgba(212,175,55,.38);
  box-shadow:
    0 8px 20px rgba(0,0,0,.25),
    0 0 0 2px rgba(212,175,55,.12) inset;
  transform: translateY(-1px);
}

/* Focus (keyboard) */
.vozila-pagination .pagination li a:focus-visible,
.vozila-pagination .page-numbers:focus-visible{
  outline: none;
  border-color: var(--dg-gold, #d4af37);
  box-shadow: 0 0 0 3px var(--dg-ring, rgba(212,175,55,.22));
}

/* Active/Current */
.vozila-pagination .pagination li.active a,
.vozila-pagination .page-numbers.current{
  background: linear-gradient(180deg, rgba(212,175,55,.92), rgba(212,175,55,.85));
  color: #121212;
  border-color: rgba(212,175,55,1);
  box-shadow:
    0 10px 26px rgba(212,175,55,.25),
    inset 0 1px 0 rgba(255,255,255,.35);
}

/* Disabled (ako koristiš Prev/Next s onemogućenim stanjem) */
.vozila-pagination .pagination li.disabled a,
.vozila-pagination .pagination li.disabled span{
  opacity: .5;
  pointer-events: none;
}

/* Elipsa "…" (paginate_links zna ispisati) */
.vozila-pagination .pagination li span.dots,
.vozila-pagination .page-numbers.dots{
  border: 1px dashed var(--dg-border, rgba(255,255,255,.16));
  background: transparent;
  color: var(--dg-muted, #9aa0a6);
}

/* Manja varijanta – po želji primijeni klasu .is-compact na <nav> */
.vozila-pagination.is-compact .pagination{
  gap: 8px; padding: 6px;
}
.vozila-pagination.is-compact .pagination li a,
.vozila-pagination.is-compact .pagination li span,
.vozila-pagination.is-compact .page-numbers{
  min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px;
  font-weight: 600;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .vozila-pagination *{ transition: none !important; }
}


/*trazilica*/
    .vozila-trazilica { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items:end; }
    .vozila-trazilica .d-flex { display:flex; }
    @media (max-width: 992px){ .vozila-trazilica { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 576px){ .vozila-trazilica { grid-template-columns: 1fr; } }



/* (Opcijski) sekcija na crnoj podlozi */
.section-dark {
  background: var(--dg-bg);
  color: var(--dg-text);
}

/* Omotač forme (možeš dodati <div class="section-dark"> oko shortcoda) */
.section-dark .vozila-trazilica,
.vozila-trazilica.on-dark {
  /* stakleni panel */
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0));
  border: 1px solid rgba(212,175,55,.14);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow:
    0 14px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* Grid koji smo već imali – malo "daha" između polja */
.vozila-trazilica {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr)) max-content; /* zadnja = širina gumba */
  gap: 14px 16px;
  align-items: end;
}
@media (max-width: 992px){ .vozila-trazilica { grid-template-columns: 1fr 1fr; } }
@media (max-width: 576px){ .vozila-trazilica { grid-template-columns: 1fr; } }

/* Naslovi polja */
.vozila-trazilica .form-label{
  color: var(--dg-muted);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Input/select – tamni, glatki, s diskretnim zlatnim fokusom */
.vozila-trazilica .form-control,
.vozila-trazilica .form-select{
  background: var(--dg-panel);
  color: var(--dg-text);
  border: 1px solid var(--dg-border);
  border-radius: 12px;
  height: 48px;
  padding: 10px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease, transform .15s ease;
      cursor: pointer;

}
.vozila-trazilica .form-control::placeholder{ color: #8b8d93; }

.vozila-trazilica .form-control:hover,
.vozila-trazilica .form-select:hover{
  border-color: rgba(212,175,55,.28);
}

.vozila-trazilica .form-control:focus,
.vozila-trazilica .form-select:focus{
  border-color: var(--dg-gold);
  box-shadow: 0 0 0 3px var(--dg-ring);
  outline: none;
}



/* Fokus unutar cijele forme – zlatni "halo" oko panela */
.vozila-trazilica:focus-within{
  box-shadow:
    0 16px 44px rgba(0,0,0,.55),
    0 0 0 2px rgba(212,175,55,.18),
    inset 0 1px 0 rgba(255,255,255,.04);
  border-color: rgba(212,175,55,.26);
}

/* Sitni detalji: zlatni naglasci na linkovima i badgevima (ako ih dodate) */
.vozila-trazilica a{ color: var(--dg-gold); }
.vozila-trazilica .text-muted{ color: var(--dg-muted) !important; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .vozila-trazilica *,
  .vozila-trazilica button[type="submit"]::after{
    transition: none !important;
  }
}













/* Poštuj prefer-reduced-motion */
@media (prefers-reduced-motion: reduce){
  #headerMain, 
  #headerMain .site-logo img,
  #headerMain .elementor-container {
    transition: none !important;
  }
}
/*bootstrap*/
/* === Bootstrap-like grid za Elementor === */

/* Osnovne col-* (uvijek) */
[class*="col-"] {
  flex: 0 0 auto;
}

/* XS – default (mobile first) */
.col-1  { width: 8.3333%; }
.col-2  { width: 16.6667%; }
.col-3  { width: 25%; }
.col-4  { width: 33.3333%; }
.col-5  { width: 41.6667%; }
.col-6  { width: 50%; }
.col-7  { width: 58.3333%; }
.col-8  { width: 66.6667%; }
.col-9  { width: 75%; }
.col-10 { width: 83.3333%; }
.col-11 { width: 91.6667%; }
.col-12 { width: 100%; }

/* SM ≥ 576px */
@media (min-width: 576px) {
  .col-sm-1  { width: 8.3333%; }
  .col-sm-2  { width: 16.6667%; }
  .col-sm-3  { width: 25%; }
  .col-sm-4  { width: 33.3333%; }
  .col-sm-5  { width: 41.6667%; }
  .col-sm-6  { width: 50%; }
  .col-sm-7  { width: 58.3333%; }
  .col-sm-8  { width: 66.6667%; }
  .col-sm-9  { width: 75%; }
  .col-sm-10 { width: 83.3333%; }
  .col-sm-11 { width: 91.6667%; }
  .col-sm-12 { width: 100%; }
}

/* MD ≥ 768px */
@media (min-width: 768px) {
  .col-md-1  { width: 8.3333%; }
  .col-md-2  { width: 16.6667%; }
  .col-md-3  { width: 25%; }
  .col-md-4  { width: 33.3333%; }
  .col-md-5  { width: 41.6667%; }
  .col-md-6  { width: 50%; }
  .col-md-7  { width: 58.3333%; }
  .col-md-8  { width: 66.6667%; }
  .col-md-9  { width: 75%; }
  .col-md-10 { width: 83.3333%; }
  .col-md-11 { width: 91.6667%; }
  .col-md-12 { width: 100%; }
}

/* LG ≥ 992px */
@media (min-width: 992px) {
  .col-lg-1  { width: 8.3333%; }
  .col-lg-2  { width: 16.6667%; }
  .col-lg-3  { width: 25%; }
  .col-lg-4  { width: 33.3333%; }
  .col-lg-5  { width: 41.6667%; }
  .col-lg-6  { width: 50%; }
  .col-lg-7  { width: 58.3333%; }
  .col-lg-8  { width: 66.6667%; }
  .col-lg-9  { width: 75%; }
  .col-lg-10 { width: 83.3333%; }
  .col-lg-11 { width: 91.6667%; }
  .col-lg-12 { width: 100%; }
}

/* XL ≥ 1200px */
@media (min-width: 1200px) {
  .col-xl-1  { width: 8.3333%; }
  .col-xl-2  { width: 16.6667%; }
  .col-xl-3  { width: 25%; }
  .col-xl-4  { width: 33.3333%; }
  .col-xl-5  { width: 41.6667%; }
  .col-xl-6  { width: 50%; }
  .col-xl-7  { width: 58.3333%; }
  .col-xl-8  { width: 66.6667%; }
  .col-xl-9  { width: 75%; }
  .col-xl-10 { width: 83.3333%; }
  .col-xl-11 { width: 91.6667%; }
  .col-xl-12 { width: 100%; }
}

/* XXL ≥ 1400px */
@media (min-width: 1400px) {
  .col-xxl-1  { width: 8.3333%; }
  .col-xxl-2  { width: 16.6667%; }
  .col-xxl-3  { width: 25%; }
  .col-xxl-4  { width: 33.3333%; }
  .col-xxl-5  { width: 41.6667%; }
  .col-xxl-6  { width: 50%; }
  .col-xxl-7  { width: 58.3333%; }
  .col-xxl-8  { width: 66.6667%; }
  .col-xxl-9  { width: 75%; }
  .col-xxl-10 { width: 83.3333%; }
  .col-xxl-11 { width: 91.6667%; }
  .col-xxl-12 { width: 100%; }
}