/* Google Font loaded in HTML head for better performance */

/* colors used 
YELLOW: #f7da24, #f6e053, #f7e88a, #f6e053, #f7da24
BORDEAUX: #49040a 20%, #6b060f, #49040a
BEIGE: #fcd7bf, #f7e1d2, #fcd7bf
GREEN: #1c410e, #2e6d18, #1c410e)
*/
/* Modify the backgound color */
body {
  /* user-select: none; */
  background-image: linear-gradient(90deg, #0a2001, #2e6d18, #0a2001);
}

/* max width */
.max {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
}

@media (min-width: 1200px) {
  .max {
    border-left-style: ridge;
    border-right-style: ridge;
    border-width: 7px;
    border-color: #fbceb1 #fcd7bf #fcd7bf #fbceb1;
    z-index: 1091;
  }
}
 
/* overlay */

.overlay {
  position: absolute;
  padding-top: 1rem;
  padding-bottom: 1rem;
  box-shadow: 0px 0px 0px 4px #6b060f;
  border: 2px solid #360307;
  top: 50%;
  left: 50%;
  background-color: rgba(73, 76, 78, 0.8);
  width: 60%;
  z-index: 1090;
}

.ctr {
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1090;
}

/* @media (max-width:574px)  */

@media (max-width: 574px) {
  .overlay {
    width: 80%;
  }
}

/* OVERLAY VENNTRILOGIE */

.overlayvenn {
  position: absolute;
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-right: 1.5rem;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
  /* border-style: ridge;
  border-width: 7px;
  border-color: #f7e1d2 #fcd7bf #fcd7bf #f7e1d2;
  border-radius: 10px; */
  border-radius: 5px;
  top: 50%;
  left: 50%;
  background-color: rgba(73, 76, 78, 0.2);
  /* Blur effect */
  backdrop-filter: blur(1px);
  width: 60%;
  color: #500707;
  font-weight: 700;
  z-index: 1090;
}

.rotate {
  rotate: -45deg;
}

.ctrvenn {
  transform: translate(-50%, -50%);
  text-align: center;

  z-index: 1090;
}

/* Large screen override for overlayvenn */
@media (min-width: 992px) {
  .overlayvenn {
    width: 75%;
  }
}

.overlay3 {
  position: absolute;
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-right: 1.5rem;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
  /* border-style: ridge;
  border-width: 7px;
  border-color: #f7e1d2 #fcd7bf #fcd7bf #f7e1d2;
  border-radius: 10px; */
  border-radius: 5px;
  top: 30%;
  left: 30%;
  background-color: rgba(73, 76, 78, 0.2);
  /* Blur effect */
  backdrop-filter: blur(4px);
  width: 60%;
  height: 50%;
  color: #500707;
  font-weight: 700;
}

.overlay3-countdown {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #8d120f 0%, #c32c17 100%);
  color: #fff7df;
  padding: 0.7rem 1.75rem;
  border-radius: 999px;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 10px 25px rgba(80, 7, 7, 0.25);
}

/* OVERLAY VENNTRILOGIE INDEXPAGE */
.ctr3 {
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1090;
}

/* @media (max-width:574px) */

@media (max-width: 574px) {
  .overlay3 {
    padding-top: 2rem;
    padding-bottom: 1.5rem;
    width: 85%;
    height: auto !important;
    top: -3%;
    left: 50%;
    transform: translate(-50%, 0);
  }

  .overlay3-countdown {
    top: -12px;
    width: calc(100% - 2rem);
    font-size: 0.95rem;
    padding: 0.65rem 1rem;
  }
}

@media (min-height: 750px) and (max-height: 999px) and (min-width: 575px) {
  .overlay3 {
    padding-top: 3rem;
    height: 60%;
  }
}

@media (min-height: 650px) and (max-height: 749px) and (min-width: 575px) {
  .overlay3 {
    padding-top: 3rem;
    height: 80%;
  }
}

@media (min-height: 1025px) {
  .overlay3 {
    padding-top: 3rem;
    width: 50%;
    height: auto;
  }
}

@media (min-width: 1000px) {
  .overlay3 {
    padding-top: 3rem;
    width: 50%;
    height: auto;
  }
}

.close-button {
  position: absolute;
  /* Absolute positioning */
  top: 10px;
  /* Afstand vanaf de bovenkant */
  right: 10px;
  padding-bottom: 6px;
  padding-left: 12px;
  padding-right: 12px;

  /*  achtergrondkleur */
  background-color: #f4433600;
  /*  tekstkleur */
  color: rgb(160, 137, 2);
  /*  rand */
  border: 1px solid rgb(160, 137, 2);
  /* Afgeronde hoeken */
  border-radius: 5px;
  /* Cursor verandert in een pointer */
  cursor: pointer;
  /* Lettergrootte */
  font-size: 15px;
  /* Soepele overgang voor achtergrondkleur */
  transition: background-color 1s;
}

.btn3 {
  padding: 0.3rem 0.4rem 0.5rem 0.5rem;
  background-image: linear-gradient(#3a0308, #6b060f, #3a0308);
  color: #fff;
  font-family: "IM Fell Double Pica SC", serif;
  border-radius: 5px;
  margin-left: 240px;
  margin-right: 220px;
}

/* @media (max-width:1100px) */
@media (max-width: 1100px) {
  .btn3 {
    margin-left: 140px;
    margin-right: 120px;
  }
}

/* @media (max-width:574px) */
@media (max-width: 574px) {
  .overlay2 {
    width: 80%;
  }

  /* buttons */
  /*t, r, b, l. padding: 0rem 0rem 0rem 0rem; */
  .btn3 {
    margin-left: 20px;
    margin-right: 0;
  }
}

.taal img {
  margin-bottom: 10px;
  box-shadow: 0px 0px 0px 2px #6b060f;
  border: 3px solid #360307;
  width: 80%;
  height: 70%;
}

/* header */
.header {
  padding: 0px 0px 0px 0px;
  background-image: linear-gradient(
    rgb(216, 184, 4),
    gold,
    rgb(252, 224, 69),
    gold,
    rgb(216, 184, 4)
  );
}

/* NAVBAR */
.navbar-custom {
  background-image: linear-gradient(#49040a 20%, #6b060f, #49040a);
  padding-right: 10px;
  /* border-top-style: ridge;
        border-width: 7px;
        border-color: #f7e1d2 #fcd7bf #fcd7bf #f7e1d2; */
}

.nav-link {
  font-size: 11px;
  font-family: "IM Fell Double Pica SC", serif;
  margin: 0px -1px;
}

.vlag {
  border: solid 2px;
  border: 0px solid rgba(0, 0, 0, 0.5);
  padding: 0px 0px 3px 0px;

  /*t, r, b, l. */
}

.nav-flags {
  display: flex;
  margin-left: auto;
}

@media (min-width: 577px) {
  .nav-flags {
    gap: 10px;
  }
}

@media (max-width: 576px) {
  .nav-flags {
    width: 100%;
    justify-content: space-around;
    align-items: center;
    margin-top: 10px;
    padding-bottom: 12px;
    margin-left: 0;
  }

  .vlag {
    width: 50px;
    height: 32px;
    padding: 0px 0px 0px 0px;
    margin: 0;
  }

  .vlag img {
    float: right;
    margin-bottom: 10px;
    width: 50px;
    height: 32px;
    border: solid 2px rgba(0, 0, 0, 0.8);
  }

  .navbar-collapse {
    text-align: center;
  }

  .navbar-collapse li a {
    font-size: 10pt;
  }

  .dropdown-menu .dropdown-item {
    text-align: center;
  }

  .navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem;
  }

  .navbar-toggler-icon {
    color: rgba(71, 6, 250, 0.25);
    border-color: rgba(71, 6, 250, 0.1);
  }

  .overlayvenn {
    width: 79%;
  }
}

.dropdown {
  font-size: 11px;
}

.dropdown-item {
  font-size: 11px;
  text-align: center;
  padding: 1.1rem 1rem 1rem;
  margin-top: -10px;
  margin-bottom: -10px;
  background-image: linear-gradient(#fcd7bf, #f7e1d2, #fcd7bf);
  font-family: "IM Fell Double Pica SC", serif;
  font-weight: bold;
  color: #49040a;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}

.dropdown-item:hover {
  background-image: linear-gradient(#49040a, #6b060f, #49040a);
  border: none;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
  font-weight: normal;
  color: #fff;
  font-family: "IM Fell Double Pica SC", serif;
}

.btn-primary {
  padding: 0.5rem 0.4rem 0.5rem 0.5rem;
  background-image: linear-gradient(#3a0308, #6b060f, #3a0308);
  width: 110px;
  border: none;
  color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-family: "IM Fell Double Pica SC", serif;
}

.btn-primary:hover {
  background-image: linear-gradient(#1c410e, #2e6d18, #1c410e);
  border: none;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-family: "IM Fell Double Pica SC", serif;
}

.btn-secondary {
  padding: 0.5rem 0.5rem 0.5rem 0.4rem;
  background-image: linear-gradient(#3a0308, #6b060f, #3a0308);
  width: 110px;
  border: none;
  color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-family: "IM Fell Double Pica SC", serif;
}

.btn-secondary:hover {
  background-image: linear-gradient(#1c410e, #2e6d18, #1c410e);
  border: none;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-family: "IM Fell Double Pica SC", serif;
}

.btn-tertiary {
  padding: 0.5rem 0.5rem 0.5rem 0.4rem;
  background-image: linear-gradient(#3a0308, #6b060f, #3a0308);
  width: 300px;
  border: none;
  color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-family: "IM Fell Double Pica SC", serif;
}

.btn-tertiary:hover {
  background-image: linear-gradient(#1c410e, #2e6d18, #1c410e);
  border: none;
  color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-family: "IM Fell Double Pica SC", serif;
}

/*t, r, b, l. */
.resknop {
  margin-left: 2rem;
  margin-right: -1rem;
}

.resknop2 {
  margin-left: -3rem;
  margin-right: 1rem;
}

.vennknop {
  margin: 1rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-body-venn {
  margin-bottom: 0rem;
  padding: 2rem 1.5rem 1.5rem 1.5rem;
  background-color: #f7e1d2;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
}

.card2 {
  border: 0px solid rgba(0, 0, 0, 0);
  /*EDIT this part*/
  margin: 2rem -1.5rem 1.5rem -1.5rem;
  border-radius: 0.4rem;
  background-image: linear-gradient(#fcd7bf, #f7e1d2 20%, #fcd7bf);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
}

/* left column */
/*t, r, b, l. */
.left {
  padding: 2rem 1rem 2rem 1rem;
  background-image: linear-gradient(
    #f7e1d2,
    #fcd7bf,
    #fcd7bf,
    #fcd7bf,
    #f7e1d2,
    #f7e1d2
  );
}

.left img {
  max-width: auto;
  max-height: 286px;
  margin-top: 30px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
  border-style: ridge;
  border-width: 7px;
  border-color: #fbceb1 #fcd7bf #fcd7bf #fbceb1;
  border-radius: 10px;
}

.left p {
  margin-bottom: -10px;
}

/* swiper left column */
.leftswip {
  margin-top: -30px;
  padding: 0rem 1rem 2rem 1rem;
  background-image: linear-gradient(
    #f7e1d2,
    #fcd7bf,
    #fcd7bf,
    #fcd7bf,
    #f7e1d2,
    #f7e1d2
  );
}

.leftswip img {
  max-width: auto;
  max-height: 286px;
  margin-top: 30px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
  border-style: ridge;
  border-width: 7px;
  border-color: #fbceb1 #fcd7bf #fcd7bf #fbceb1;
  border-radius: 10px;
}

.leftswip p {
  margin-bottom: -10px;
}

/* end swiper left column end */

.video a {
  max-width: auto;
  min-height: 150px;
  max-height: 286px;
}

.infoto1 img {
  padding: 0rem 0rem 0rem 0rem;
  margin-top: 30px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
  border-style: ridge;
  border-width: 7px;
  border-color: #f7e1d2 #fcd7bf #fcd7bf #f7e1d2;
  border-radius: 10px;
}

.video {
  max-width: 484px;
  height: auto;
  margin-top: 30px;
  padding: 0rem 0rem 0rem 0rem;
  margin-top: 30px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
  border-style: ridge;
  border-width: 7px;
  border-color: #f7e1d2 #fcd7bf #fcd7bf #f7e1d2;
  border-radius: 10px;
}

.metatext {
  color: #f7e1d2;
  opacity: 0;
  float: left;
}

/* right column */
/*t, r, b, l. */
.right {
  padding: 4rem 1rem 2rem 1rem;
  background-image: linear-gradient(
    #f7e1d2,
    #fcd7bf,
    #fcd7bf,
    #fcd7bf,
    #f7e1d2,
    #f7e1d2
  );
}

.right h2,
h3,
h4,
h5,
h6 {
  color: #6b060f;
  font-family: "IM Fell Double Pica SC", serif;
}

/* end swiper right column end */
/*t, r, b, l. */
.rightswip {
  margin-top: -30px;
  padding: 0rem 1rem 2rem 1rem;
  background-image: linear-gradient(
    #f7e1d2,
    #fcd7bf,
    #fcd7bf,
    #fcd7bf,
    #f7e1d2,
    #f7e1d2
  );
}

.rightswip h2,
h3,
h4,
h5,
h6 {
  color: #6b060f;
  font-family: "IM Fell Double Pica SC", serif;
}
/* end swiper right column end */

.accordion {
  padding-bottom: 8rem;
}

.noborder td,
.noborder th {
  border: none !important;
}

.fotocolumn1expand {
  text-align: center;
}

.FotoExpKnop {
  width: 85%;
  /* box-shadow:inset 0px 8px 0px 0px  rgba(255, 255, 255, 0.4); */
  background: linear-gradient(#350307, #6b060f, #350307);
  border-radius: 3px;
  border: none;
  border-image-source: linear-gradient(
    0deg,
    rgb(111, 111, 124) 0%,
    #6b060f 27%,
    #350307 100%
  );
  border-image-slice: 1;
  display: inline-block;
  cursor: pointer;
  color: #fff;
  padding-top: 3px;
  padding-bottom: 3px;
  font-family: "IM Fell Double Pica SC", serif;
  font-size: 11px;
  text-decoration: none;
  text-align: center;
  margin-top: 0.6rem;
  margin-bottom: 1rem;
}

.FotoExpKnop:hover {
  background: linear-gradient(to right, #1c410e, #2e6d18, #1c410e);
}

.FotoExpKnop:active {
  position: relative;
  top: 1px;
}

.fotocolumn1expand {
  width: 100%;
}

.infoto p {
  padding-left: 1rem;
  padding-right: 1rem;
  margin: 0 auto;
  padding-bottom: 1rem;
}

.card {
  border: 0px solid rgba(0, 0, 0, 0);
  /*EDIT this part*/
  border-radius: 0.4rem;
  background-image: linear-gradient(#fcd7bf, #f7e1d2 20%, #fcd7bf);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
}

/* Cards */
/*t, r, b, l. */
.card-header {
  background-image: linear-gradient(#fcd7bf 20%, #f7e1d2, #fcd7bf);
  margin-bottom: -0.2rem;
  padding: 1.5rem 0.2rem 0rem 0.2rem;
  border: 0px solid rgba(0, 0, 0, 0);
  border-radius: 1rem;
}

.card-header-end {
  background-image: linear-gradient(#fcd7bf 20%, #f7e1d2, #fcd7bf);
  margin-bottom: -0.2rem;
  padding: 0rem 0.2rem 0rem 0.2rem;
  border: 0px solid rgba(0, 0, 0, 0);
  border-radius: 0.3rem;
}

.card-header h5 {
  margin-top: -10px;
}

.card-body {
  margin-bottom: -1rem;
  padding: 2rem 1.5rem 1.5rem 1.5rem;
  background-color: #f7e1d2;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
}

.card-body1 {
  padding: 2rem 1.5rem 2rem 1.5rem;
  margin: -1rem -1.3rem -2rem -1.3rem;
  background-color: #f7e1d2;
}

.kaart {
  padding: 2rem 1rem 0rem 2rem;
}

/* prijzenpagina's tables right column */
.noborder td,
.noborder th {
  border: none !important;
}

.table {
  color: #6b060f;
  font-family: "IM Fell Double Pica SC", serif;
  margin-top: -10px;
}
/* carousel layout */
/* Reduce the width of the arrow containers */
.carousel-control-prev,
.carousel-control-next {
  transform: translateY(-50%);
  opacity: 1;
    color: #0b16f0; /* or any color */
}
/* Pull arrows closer to the table edges */

.carousel-item {
  /* transition: transform 0.6s ease-in-out; */
    transition: none !important;
}
.custom-arrow {
  font-size: 2rem;
  color: #0b16f0; /* or any color */
  padding: 10px;
  border-radius: 50%;
}

/* groepen */
.carousel-control-next {
  background-color: #f7e1d200;
  color: #0b16f0; /* or any color */
  width: 100px;
  height: 30px;
    right: 200px;
  padding-left: 40px;
  padding-top: 3em;
}

/* individueel */
.carousel-control-prev {
  background-color: #f7e1d200;
  color: #0b16f0; /* or any color */
  width: 160px;
  height: 30px;
  left: 160px;
  padding-top: 3em;
}

@media (max-width: 574px)
{
  /* groepen */
.carousel-control-next {
    right: 10px;
  padding-left: 40px;
  padding-top: 3em;
}

/* individueel */
.carousel-control-prev {
  left: -30px;
  padding-top: 3em;
}

}

/* Informatiepagina's cards right column */

.list-group li {
  margin-left: 0.5rem;
}

/* reserveringspagina */

.control-label {
  padding: 1rem 0rem 0rem 1rem;
  margin-top: -3px;
  margin-bottom: -3px;
  font-family: "IM Fell Double Pica SC", serif;
  color: #6b060f;
}

.kaartmob {
  margin-top: -3px;
}

.form-control {
  margin-top: 10px;
  font-family: "IM Fell Double Pica SC", serif;
  height: 1.7rem;
  padding: 0rem 0.5rem;
}

.date-field {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 10px;
}

.date-field .form-control {
  width: 100%;
  margin-top: 0;
  padding-right: 2.5rem;
}

.date-field .input-group-text {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6b060f;
  pointer-events: none;
  z-index: 3;
}

.date-field .input-group-text i {
  font-size: 0.95rem;
  line-height: 1;
}

.form-check {
  font-family: "IM Fell Double Pica SC", serif;
  color: #6b060f;
}

.loose {
  margin-top: 10px;
  padding-left: 2rem;
  padding-right: 1.5rem;
}

.centersmal {
  margin-top: -60px;
  margin-bottom: 0px;
  padding-top: 2rem;
}

.cadeaubon h6 {
  margin-top: -15px;
}

.verzekering {
  padding-left: 1rem;
}

.nobullet ul {
  list-style-type: none;
}

/* Footer */
.footer-custom {
  background-image: linear-gradient(#49040a 20%, #6b060f, #49040a);
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 1187px;
  height: 30px;
  z-index: 1200;
}

.updated {
  background-image: 0 0 0, 0, 1;
  position: fixed;
  bottom: 21px;
  text-align: right;
  padding-right: 10px;
  width: 100%;
  max-width: 1186px;
  height: 30px;
}

.micro-left {
  font-size: 10px;
  color: white;
  margin-top: 0.2rem;
  margin-left: 0rem;
  padding-top: 0.3rem;
}

.micro-left a {
  color: white;
}

.SocialMedia {
  padding-top: 0.2rem;
}

.micro-right {
  font-size: 10px;
  color: white;
  margin-top: 0.2rem;
  margin-right: 0rem;
  padding-top: 0.3rem;
}

.micro-right a {
  color: white;
}

/* nested accordion*/
.list-group.panel > .list-group-item {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.list-group-submenu {
  margin-left: 0px;
}

#SubMenu1 {
  background-color: none;
}

.tut {
  padding-top: 1em;
  padding-bottom: 0.5em;
}

.flut {
  margin-top: -1em;
}

/* datetimepicker */

/* Style readonly date input fields to appear white instead of gray */
input[readonly] {
  background-color: #ffffff !important;
  color: #000000;
  cursor: pointer;
}

/* Overlay toggle: set to visible to re-enable overlays site-wide */
:root {
  --overlay-visibility-mode: hidden;
}

/* Global overlay kill-switch */
.overlay,
.overlayvenn,
.overlay2,
.overlay3,
.overlay3-countdown,
#overlay,
#overlay2,
#overlay3,
#overlay3-countdown-text,
.video-overlay,
.early-booker-popup,
.ui-widget-overlay,
.modal-backdrop,
.ekko-lightbox,
.ekko-lightbox-container,
.lightbox,
[class*="overlay"] {
  visibility: var(--overlay-visibility-mode) !important;
}

/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/