/*
Theme Name: the7dtchild
Author: Dream-Theme
Author URI: http://dream-theme.com/
Description: The7 is perfectly scalable, performance and SEO optimized, responsive, retina ready multipurpose WordPress theme. It will fit every site – big or small. From huge corporate portals to studio or personal sites – The7 will become a great foundation for your next project!
Version: 1.0.0
License: This WordPress theme is comprised of two parts: (1) The PHP code and integrated HTML are licensed under the GPL license as is WordPress itself.  You will find a copy of the license text in the same directory as this text file. Or you can read it here: http://wordpress.org/about/gpl/ (2) All other parts of the theme including, but not limited to the CSS code, images, and design are licensed according to the license purchased. Read about licensing details here: http://themeforest.net/licenses/regular_extended
Template: dt-the7
*/

/*--------------------------------------------------------------
# Font Declarations
--------------------------------------------------------------*/
@font-face {
  font-family: 'Sofia';
  src: url('https://igniteyourlatinvibe.nl/fonts/sofia.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Anton';
  src: url('https://igniteyourlatinvibe.nl/fonts/anton.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'AntonSoft';
  src: url('https://igniteyourlatinvibe.nl/fonts/AntonSoft.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/*--------------------------------------------------------------
# General Body Styles
--------------------------------------------------------------*/
body {
  font-family: 'Sofia', sans-serif !important;
  font-size: 2rem !important; /* = 32px */
}

/*--------------------------------------------------------------
# Specific Element Styles
--------------------------------------------------------------*/
.branding a img, .branding img {
    width: 400px;
}

.show-mobile-logo .mobile-branding img{
  width:200px;
}

.titel-zwart {
  font-size: 1.8rem;
  color: #000;
  line-height: 1;
}

.ben-jij-desperados {
  font-family: 'Anton', sans-serif !important;
  font-size: 3.5rem;
  color: #000;
  line-height: 1;
  text-transform: uppercase;
}

.ben-jij-desperados2 {
  font-family: 'Anton', sans-serif !important;
  font-size: 3rem;
  color: #000;
  line-height: 1;
  text-transform: uppercase;
}

.ben-jij-desperados3 {
  font-family: 'Anton', sans-serif !important;
  font-size: 2.5rem;
  color: #000;
  line-height: 1;
  text-transform: uppercase;
}

.ben-jij-desperados4 {
  font-family: 'Anton', sans-serif !important;
  font-size: 2.5rem;
  color: #ffffff;
  line-height: 1;
  text-transform: uppercase;
}

.ben-jij-desperados5 {
  font-family: 'Anton', sans-serif !important;
  font-size: 1.8rem;
  color: #000;
  line-height: 1;
  text-transform: uppercase;
}

.ben-jij-desperados6 {
  font-family: 'Anton', sans-serif !important;
  font-size: 1.8rem;
  color: #ffffff;
  line-height: 1;
  text-transform: uppercase;
}

.ben-jij-desperados7 {
  font-family: 'Anton', sans-serif !important;
  font-size: 3rem;
  color: #000;
  line-height: 1;
  text-transform: uppercase;
}





.video {
  display: flex;
  justify-content: center;
  align-items: center;

  background-size: contain; /* <-- belangrijk! toont hele afbeelding */
  background-repeat: no-repeat;
  background-position: center;

  min-height: 50vh; /* vult volledige schermhoogte */
  position: relative;
  overflow: hidden;
}

.video-button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.video-play-button {
  font-size: 150px;
  color: #FFFF00;
  transition: color 0.3s ease;
  z-index: 10;
}

.logos{
  margin-bottom: -70px;
}

.vc_custom_1745912327087 {
  margin-bottom: -70px;
}

..nix18-logo img {
  width: 150px !important; /* of elke gewenste waarde */
  height: 74px !important;
}

.video-play-button:hover {
  color: #FF0004;
}

.main-nav {
  display: none !important;
}



/*--------------------------------------------------------------
# Overlap Image Styles
--------------------------------------------------------------*/
.overlap-image {
  position: relative;
  height: 0; /* geen hoogte nodig, we positioneren erbuiten */
  transform: rotate(20deg);
  transform-origin: center center; /* Draait vanaf de bovenste linkerhoek */
}

.overlap-image img {
  position: absolute;
  right: 0;
  top: -360px; /* hoe ver boven de huidige row */
  z-index: 10;
  max-width: 340px; /* pas dit aan naar wens */
  height: auto;
  animation: smooth-shake 4s ease-in-out infinite; /* Voeg de shake animatie toe */

}

/*--------------------------------------------------------------
# Smooth Shake Animation
--------------------------------------------------------------*/
@keyframes smooth-shake {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  /* Andere kant draaien */
  75% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/*--------------------------------------------------------------
# Contact Form 7 Styles
--------------------------------------------------------------*/
/* Verberg de standaard file upload input */
input[type="file"].file-upload {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  cursor: pointer;
}

/* Maak een wrapper voor de knop en bestandsnaam */
.wpcf7-form-control-wrap[data-name="your-file"] {
  position: relative;
  display: inline-block;
  margin-bottom: 30px;
}

/* Custom button styling */
.file-upload-button {
  background-color: #FFFF00 !important;
  color: #000000 !important;
  padding: 0px 40px 0px 40px;
  border-radius: 50px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  font-size: 1.4rem;
  transition: background-color 0.3s;
  z-index: 5;
  font-family: 'Sofia', sans-serif !important;
}

/* Hover effect voor de knop */
.file-upload-button:hover {
  background-color: #FFFF00;
}

/* Bestandsnaam container */
.file-upload-name-container {
  margin-left: 10px;
  font-size: 1.1rem;
  color: #555555;
  display: none;
  /* Verberg de container standaard */
  margin-top: 10px;
}

.file-upload-name-container .file-upload-text {
  font-weight: bold;
  color: #fff;
  margin-bottom: 5px;
}

.file-upload-name-container .file-upload-name {
  font-size: 1rem;
  color: #fff;
}

.vc_row-has-fill+.vc_row>.vc_column_container>.vc_column-inner {
  padding-top: 0px !important;
}

/*--------------------------------------------------------------
# Acceptance Wrapper Styles
--------------------------------------------------------------*/
.acceptance-wrapper {
  display: flex;
  align-items: center;
  /* Zorgt dat checkbox en tekst verticaal gecentreerd zijn */
  gap: 15px;
  /* Alternatief voor margin-right, optioneel en netter */
}

/* De checkbox zelf */
.acceptance-wrapper input[type="checkbox"] {
  width: 24px !important;
  height: 24px !important;
  background-color: white;
  border: 2px solid #ccc;
  border-radius: 4px;
  appearance: none;
  cursor: pointer;
  position: relative;
  display: inline-block;
  /* of inline-flex */
  vertical-align: middle;
  margin-top: 2px;
  /* optioneel om de checkbox iets naar beneden te duwen */
  flex-shrink: 0;
  /* voorkomt dat hij kleiner wordt */
}

/* Checkbox checked styling */
.acceptance-wrapper input[type="checkbox"]:checked {
  background-color: #FFFF00;
  border-color: #000;
}

/* Vinkje */
.acceptance-wrapper input[type="checkbox"]:checked::before {
  content: "✔";
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 16px;
  color: black;
}

/* Label netjes uitlijnen */
.acceptance-wrapper label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  line-height: 1.4;
}

p.rva-regels {
  font-size: 1.3rem;
}

.scroll-top{
  background-color: #FFFF00;
  color:#FF0000;
}

.scroll-top svg {
    text-transform: none;
    width: 24px;
    line-height: 1;
    fill: #FF0000;
}

/*--------------------------------------------------------------
# Footer Styles
--------------------------------------------------------------*/
#footer {
  display: none;
}

/*--------------------------------------------------------------
# Row Overlap Styles
--------------------------------------------------------------*/
/* Zorg dat de overlap-container position: relative is */
.row-overlap-container {
  position: relative;
  height: 0px;
  /* Of wat jij nodig hebt, dit is de ruimte waarin de afbeelding kan zweven */
  z-index: 1;
  overflow: visible;
}

/* Laat de afbeelding zweven over de andere rows */
.image-overlap {
  position: absolute;
  top: -450%;
  right: -60px;
  /* Of -100px, pas aan naar wens */
  transform: translateY(-83%);
  z-index: 10;
  width: 400px;
  /* Of responsief maken met max-width */
}

/* Zorg dat de bovenste en onderste rows onder de afbeelding blijven */
.row-top,
.row-bottom {
  position: relative;
  z-index: 0;
}

.scheur-footer {
  margin-bottom: -60px;
}

.vacature-staat-ook-op p{
  font-size: 1.3rem;
}

/*--------------------------------------------------------------
# Button Styles
--------------------------------------------------------------*/
.vc_btn3.vc_btn3-color-black,
.vc_btn3.vc_btn3-color-black.vc_btn3-style-flat {
  color: #fff;
  background-color: #000 !important;
  font-family: 'Anton', sans-serif !important;
  font-size: 1.8rem;
  z-index: 1000;
}

.vc_btn3.vc_btn3-color-black:hover {
  color: #000 !important;
  background-color: #ffff00 !important;
  font-family: 'Anton', sans-serif !important;
  font-size: 1.8rem;
}

.vc_btn3.vc_btn3-size-lg {
  padding: 18px 75px !important;
}

.vc_btn3.vc_btn3-size-md {
  font-size: 14px;
  padding: 5px 75px;
}

/*--------------------------------------------------------------
# Text Styles
--------------------------------------------------------------*/
.the-beer-with {
  font-family: 'Anton', sans-serif !important;
  font-size: 3rem;
  color: #000;
  line-height: 1;
}

.latin-vibe-introduces {
  font-family: 'Anton', sans-serif !important;
  font-size: 3rem;
  color: #000;
  line-height: 1;
  margin-left: 30px;
}

.vc_btn3.vc_btn3-color-sandy-brown,
.vc_btn3.vc_btn3-color-sandy-brown.vc_btn3-style-flat {
  color: #000;
  background-color: #ffff00 !important;
  font-family: 'Anton', sans-serif !important;
  font-size: 1.8rem;
}

.vc_btn3.vc_btn3-color-sandy-brown:hover {
  color: #fff;
  background-color: #000000 !important;
  font-family: 'Anton', sans-serif !important;
  font-size: 1.8rem;
}

.tekst-wit {
  font-size: 1.8rem;
  color: #fff;
  line-height: 1.3;
  padding-bottom:30px;
}

/*--------------------------------------------------------------
# Background Image Styles
--------------------------------------------------------------*/
div.vc_row.blok-desperados-logo {
  background-image: url('https://igniteyourlatinvibe.nl/wp-content/uploads/2025/04/Desperados-watermerk2.png');
  background-position: center 110% !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

/*--------------------------------------------------------------
# Contact Form 7 Specific Input Styles
--------------------------------------------------------------*/
.sollicitatieformulier input[type=text] {
  background-color: #ffffff !important;
  padding: 20px 18px 20px 18px;
  border: none !important;
  border-radius: 10px;
  font-family: 'Anton', sans-serif !important;
  font-size: 1.5rem;
  color: #000;
}

input.wpcf7-form-control.wpcf7-email.wpcf7-text {
  background-color: #ffffff !important;
  padding: 20px 18px 20px 18px;
  border: none !important;
  border-radius: 10px;
  font-family: 'Anton', sans-serif !important;
  font-size: 1.5rem;
  color: #000;
}

textarea[name="your-message"] {
  background-color: #ffffff !important;
  padding: 20px 18px 20px 18px;
  border: none !important;
  border-radius: 10px;
  font-family: 'Anton', sans-serif !important;
  font-size: 1.5rem;
  color: #000;
}

textarea[name="your-message"]::placeholder {
  color: #000 !important;
}

input::placeholder {
  color: #000 !important;
}

input[type="submit"]:not([name="update_cart"]):not(.woocommerce-widget-layered-nav-dropdown__submit) {
  color: #fff;
  background-color: #000 !important;
  font-family: 'Anton', sans-serif !important;
  font-size: 2rem;
  border-radius: 30px;
  padding: 17px 40px 17px 40px;
  text-transform: uppercase;
  margin-top: 20px;
}

input[type="submit"]:not([name="update_cart"]):not(.woocommerce-widget-layered-nav-dropdown__submit):hover {
  color: #000;
  background-color: #FFFF00 !important;
}

.wpcf7 input[type=file] {
  padding: 15px 25px;
  background: #e00404;
  color: #fff;
  font-size: 18px;
}

/*--------------------------------------------------------------
# COOKIEBOT CSS
--------------------------------------------------------------*/
/* Algemene banner stijl */
#CybotCookiebotDialog {
  background-color: #000000 !important;
  color: #ffffff !important;
  font-family: Arial, sans-serif;
}

/* Titel */
#CybotCookiebotDialogHeader {
  color: #ffffff !important;
}

/* Tekst en uitleg */
#CybotCookiebotDialogBodyContentText,
#CybotCookiebotDialogBodyContentTitle,
#CybotCookiebotDialogBodyLevelButtonsSelectPaneText {
  color: #ffffff !important;
}

/* Rode knoppen */
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll:hover,
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll:focus,
#CybotCookiebotDialogBodyLevelButtonLevelOptinCustomize,
#CybotCookiebotDialogBodyLevelButtonLevelOptinCustomize:hover,
#CybotCookiebotDialogBodyLevelButtonLevelOptinCustomize:focus,
#CybotCookiebotDialogBodyLevelButtonAccept,
#CybotCookiebotDialogBodyLevelButtonAccept:hover,
#CybotCookiebotDialogBodyLevelButtonAccept:focus,
#CybotCookiebotDialogBodyLevelButtonDecline,
#CybotCookiebotDialogBodyLevelButtonDecline:hover,
#CybotCookiebotDialogBodyLevelButtonDecline:focus {
  background-color: #ff0000 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px;
  padding: 10px 20px;
  font-weight: bold;
}

/* Checkbox vinkjes rood */
input[type="checkbox"]:checked + label::before {
  background-color: #ff0000 !important;
  border-color: #ff0000 !important;
}

/* Ongecheckte checkbox randkleur ook rood */
input[type="checkbox"] + label::before {
  border-color: #ff0000 !important;
}

/* Footer/onderste tekst wit */
#CybotCookiebotDialogPoweredbyLink,
#CybotCookiebotDialogPoweredby {
  color: #ffffff !important;
}

/* Toggle achtergrond als hij aan staat (actief) */
.cybot-checkbox input:checked + .cybot-checkbox-label .cybot-checkbox-slider {
  background-color: #ff0000 !important;
}

/* De "bol" van de toggle */
.cybot-checkbox .cybot-checkbox-slider::before {
  background-color: #ffffff !important;
  /* wit bolletje */
}

/* De slider zelf (inactieve kleur) */
.cybot-checkbox .cybot-checkbox-slider {
  background-color: #333333 !important;
  /* donkergrijs als hij uit staat */
  border: 1px solid #ff0000 !important;
}

#CybotCookiebotDialog form input[type=checkbox][disabled]:checked+.CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: #FF0000 !important;
  pointer-events: none;
}

#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: #FF0000 !important;
}

/* Gradient-overlay onderaan de tekst (meestal zichtbaar op mobiel) */
#CybotCookiebotDialogBodyContent::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3em;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000) !important;
  /* van transparant naar zwart */
  z-index: 10;
}

/* Verwijder de gradient van de fader */
.CybotCookiebotFader {
  background-image: none !important;
}

/*--------------------------------------------------------------
# Age Filter CSS
--------------------------------------------------------------*/
.age-gate__headline {
  font-family: 'AntonSoft', sans-serif !important;
  font-size: 4rem;
  line-height: 1;
  padding-bottom: 25px;
  color: #fff !important;
}

.age-gate__label {
  font-family: 'AntonSoft', sans-serif !important;
  font-size: 2rem;
  line-height: 1;
}

.age-gate-error,
.age-gate__error {
  color: #fff;
  font-size: 1rem;
}

/*
input[type=text]:not(.elementor-field):not(.searchform-s){
  background-color: #ffff00 !important;
  padding: 20px 18px 20px 18px;
  border:none !important;
  border-radius: 10px;
  font-family: 'Anton', sans-serif !important;
  font-size: 2rem;
}*/

input.age-gate__input.age-gate__input--day {
  background-color: #ffff00 !important;
  padding: 20px 18px 20px 18px !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'Anton', sans-serif !important;
  font-size: 2rem !important;
}

input.age-gate__input.age-gate__input--month {
  background-color: #ffff00 !important;
  padding: 20px 18px 20px 18px !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'Anton', sans-serif !important;
  font-size: 2rem !important;
}

input.age-gate__input.age-gate__input--year {
  background-color: #ffff00 !important;
  padding: 20px 18px 20px 18px !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'Anton', sans-serif !important;
  font-size: 2rem !important;
}

button.age-gate__button {
  background-color: #000;
  font-family: 'AntonSoft', sans-serif !important;
  font-size: 2rem;
  border-radius: 15px;
  padding: 0px 40px 0px 40px;
  color: #ffff00;
}

/*--------------------------------------------------------------
# BREAKPOINTS
--------------------------------------------------------------*/
@media (max-width: 480px) {
  body {
    font-family: 'Sofia', sans-serif !important;
    font-size: 1rem !important;
    /* = 32px */
  }

  .tekst-wit {
    font-size: 1.2rem;
    color: #fff;
    line-height: 1.3;
  }

  .ben-jij-desperados {
    font-family: 'Anton', sans-serif !important;
    font-size: 2.5rem;
    color: #000;
    line-height: 1;
  }

  .titel-zwart {
    font-size: 1.4rem;
    color: #000;
    line-height: 1;
  }

  .titel-zwart2 {
    font-size: 1.2rem;
    color: #000;
    line-height: 1;
  }

  .video {
    padding: 30px 0 30px 0;
  }

  .video-play-button {
    display: inline-block;
    font-size: 90px;
    color: #FFFF00;
    transition: color 0.3s ease;
  }

  .dt-mobile-menu-icon:not(.floating-btn) {
    display: none;
  }

  #main {
    padding: 0px 0 70px 0 !Important;
  }

  .vc_btn3.vc_btn3-color-black,
  .vc_btn3.vc_btn3-color-black.vc_btn3-style-flat {
    color: #fff;
    background-color: #000 !important;
    font-family: 'Anton', sans-serif !important;
    font-size: 1.4rem;
  }

  .vc_btn3.vc_btn3-color-black:hover {
    color: #000 !important;
    background-color: #ffff00 !important;
    font-family: 'Anton', sans-serif !important;
    font-size: 1.4rem;
  }

  .vc_btn3.vc_btn3-color-sandy-brown,
  .vc_btn3.vc_btn3-color-sandy-brown.vc_btn3-style-flat {
    color: #000;
    background-color: #ffff00 !important;
    font-family: 'Anton', sans-serif !important;
    font-size: 1.4rem;
  }

  .vc_btn3.vc_btn3-color-sandy-brown:hover {
    color: #fff;
    background-color: #000000 !important;
    font-family: 'Anton', sans-serif !important;
    font-size: 1.4rem;
  }

  div.vc_row.blok-desperados-logo {
    background-image: url('https://igniteyourlatinvibe.nl/wp-content/uploads/2025/04/Desperados-watermerk2.png');
    background-position: center 103% !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
  }

  .scheur-footer {
    margin-bottom: -40px;
  }

  .video {
    background-size: 220% auto;
    background-repeat: no-repeat;
    background-position: center top;
    min-height: 200px;
  }

  .overlap-image img {
    max-width: 120px;
    top: -130px;
  }

  .ben-jij-desperados2 {
  font-family: 'Anton', sans-serif !important;
  font-size: 2.5rem;
  color: #000;
  line-height: 1;
  text-transform: uppercase;
  }

.overlap-image {
  transform: rotate(10deg);
  transform-origin: center center; /* Draait vanaf de bovenste linkerhoek */
}

.latin-vibe-introduces {
  font-size: 2.5rem;
}

.the-beer-with{
  font-size: 2.5rem;
}

 .video {
    min-height: 200px;
  }

  .video-play-button {
    font-size: 70px;
  }

}

/* Kleine tablets en grotere telefoons (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {


  .video-play-button {
    font-size: 90px;
  }
  .video {
    min-height: 35vh; /* vult volledige schermhoogte */
  }
}

/* Tablets en kleine laptops (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {

  .video {
    min-height: 35vh; /* vult volledige schermhoogte */
  }
}


@media (max-width: 768px) {
  body {
    font-family: 'Sofia', sans-serif !important;
    font-size: 1rem !important;
    /* = 32px */
  }

  .tekst-wit {
    font-size: 1.2rem;
    color: #fff;
    line-height: 1.3;
  }

  .ben-jij-desperados {
    font-family: 'Anton', sans-serif !important;
    font-size: 2.5rem;
    color: #000;
    line-height: 1;
  }

  .titel-zwart {
    font-size: 1.4rem;
    color: #000;
    line-height: 1;
  }

  .video {
    padding: 30px 0 30px 0;
  }

  .video-play-button {
    display: inline-block;
    font-size: 90px;
    color: #FFFF00;
    transition: color 0.3s ease;
  }

  .dt-mobile-menu-icon:not(.floating-btn) {
    display: none;
  }

  #main {
    padding: 0px 0 70px 0 !Important;
  }

  /* CODE FLES ABSOLUTE */
  .row-overlap-container {
    position: relative;
    height: 0px;
    /* Of wat jij nodig hebt, dit is de ruimte waarin de afbeelding kan zweven */
    z-index: 1;
    overflow: visible;
  }

  /* Laat de afbeelding zweven over de andere rows */
  .image-overlap {
    position: absolute;
    top: -120%;
    right: 30%;
    /* Of -100px, pas aan naar wens */
    transform: translateY(-52%);
    z-index: 10;
    width: 130px;
    /* Of responsief maken met max-width */
  }

  /* Zorg dat de bovenste en onderste rows onder de afbeelding blijven */
  .row-top,
  .row-bottom {
    position: relative;
    z-index: 0;
  }

  div.vc_row.blok-desperados-logo {
    background-image: url('https://igniteyourlatinvibe.nl/wp-content/uploads/2025/04/Desperados-watermerk2.png');
    background-position: center 103% !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
  }

  .scheur-footer {
    margin-bottom: -40px;
  }

  .video {
    background-size: 220% auto;
    background-repeat: no-repeat;
    background-position: center top;
    min-height: 200px;
  }

  .overlap-image img {
    max-width: 120px;
    top: -130px;
  }

    .ben-jij-desperados2 {
  font-family: 'Anton', sans-serif !important;
  font-size: 2.5rem;
  color: #000;
  line-height: 1;
  text-transform: uppercase;
  }

  .overlap-image {
  transform: rotate(10deg);
  transform-origin: center center; /* Draait vanaf de bovenste linkerhoek */
}

.latin-vibe-introduces {
  font-size: 2.5rem;
}

.the-beer-with{
  font-size: 2.5rem;
}
}

@media (min-width: 769px) and (max-width: 1024px) {
  body {
    font-family: 'Sofia', sans-serif !important;
    font-size: 1rem !important;
    /* = 32px */
  }

  .tekst-wit {
    font-size: 1.2rem;
    color: #fff;
    line-height: 1.3;
  }

  .ben-jij-desperados {
    font-family: 'Anton', sans-serif !important;
    font-size: 2.5rem;
    color: #000;
    line-height: 1;
  }

  .titel-zwart {
    font-size: 1.4rem;
    color: #000;
    line-height: 1;
  }

  .dt-mobile-menu-icon:not(.floating-btn) {
    display: none;
  }

  .scheur-footer {
    margin-bottom: -45px;
  }
  .video {
    min-height: 20vh; /* vult volledige schermhoogte */
  }
}


@media (min-width: 1025px) and (max-width: 1280px){
  .video {
    min-height: 35vh; /* vult volledige schermhoogte */
  }
}


@media (min-width: 1281px) and (max-width: 1440px){
   .video {
    min-height: 35vh; /* vult volledige schermhoogte */
  }
}


@media (min-width: 1441px) and (max-width: 1920px){
   .video {
    min-height: 40vh; /* vult volledige schermhoogte */
  }
}

@media (min-width: 1921px){
   .video {
    min-height: 50vh; /* vult volledige schermhoogte */
  }
}