html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
:root {
	--color-white: #fff;
	--color-gray:#f0f0f0;
	--color-black: #000000;
	--color-dark: #343738;
	--color-orange: #f9911d;
	--color-red: #c70008;
	--color-green: #56bc56;
	--color-primary: #f9911d;
	--color-secondary: #f9911d;
	--color-tertiary: #7a9894;
	--color-header: #3e6b67;
	--font-family: 'Montserrat', sans-serif;
	--font-size: 16px;
	--line-height: 26px;
	--font-weight: 300;

	--section-spacing: 90px;
	--offset: 60px;
	--offset-small: 30px;
	--offset-tiny: 15px;
	--base: 1620px;
	--quarter-base: 500px;
	--nav-gap: 35px;
	--hero-height: 900px;

	--column: calc((var(--base) - (var(--offset) * 11)) / 12);

	--z-index-navigation: 2000;
	--z-index-sideactions: 1500;
	--z-index-header: 1000;
	--z-index-cookie: 900;
	--z-index-hero: 800;
	--z-index-hero-facts: 850;
	--z-index-seperator: 500;

	--transition-speed: .25s;

	--grid-1: var(--column);
	--grid-2: calc((var(--column) * 2) + (var(--offset) * 1));
	--grid-3: calc((var(--column) * 3) + (var(--offset) * 2));
	--grid-4: calc((var(--column) * 4) + (var(--offset) * 3));
	--grid-5: calc((var(--column) * 5) + (var(--offset) * 4));
	--grid-6: calc((var(--column) * 6) + (var(--offset) * 5));
	--grid-7: calc((var(--column) * 7) + (var(--offset) * 6));
	--grid-8: calc((var(--column) * 8) + (var(--offset) * 7));
	--grid-9: calc((var(--column) * 9) + (var(--offset) * 8));
	--grid-10: calc((var(--column) * 10) + (var(--offset) * 9));
	--grid-11: calc((var(--column) * 11) + (var(--offset) * 10));
	--grid-12: calc((var(--column) * 12) + (var(--offset) * 11));
}



@media screen and (max-width: 1920px) {
	:root {
		--section-spacing: 70px;
		--offset: 50px;
		--offset-small: 25px;
		--base: 1650px;
		--hero-height: 900px;
	}
}
@media screen and (min-width: 2100px) {
	:root {
		--section-spacing: 70px;
		--offset: 50px;
		--offset-small: 25px;
		--base: 1650px;
		--hero-height: 1400px;
	}
}

@media screen and (max-width: 1630px) {
	:root {
		--section-spacing: 70px;
		--offset: 50px;
		--offset-small: 25px;
		--base: 1350px;
		--nav-gap: 25px;
		--hero-height: 800px;
	}
}

@media screen and (max-width: 1366px) {
	:root {
		--section-spacing: 70px;
		--offset: 56px;
		--offset-small: 25px;
		--base: 1180px;
		--nav-gap: 15px;
		--hero-height: 750px;

	}
}

@media screen and (max-width: 1200px) {
	:root {
		--section-spacing: 70px;
		--offset: 50px;
		--offset-small: 25px;
		--base: 980px;
		--nav-gap: 10px;
		--hero-height: 750px;

	}
}


@media screen and (max-width: 1023px) {
	:root {
		--section-spacing: 60px;
		--offset: 30px;
		--offset-small:15px;
		--base: 700px;
		--font-size: 16px;
		--line-height: 28px;
	}
}

/*Tablet*/
@media (max-width:801px) {
    :root {
        --section-spacing: 70px;
        --offset: 26px;
        --offset-small: 25px;
        --base: 1180px;
        --nav-gap: 15px;
        --hero-height: 750px;
    }
}

@media screen and (max-width: 766px) {
	:root {
		--section-spacing: 60px;
		--offset: 30px;
		--offset-small:15px;
		--base: 360px;
		--font-size: 16px;
		--line-height: 28px;
	}
}
@media screen and (max-width: 380px) {
	:root {
		--section-spacing: 55px;
		--offset: 25px;
		--offset-small:15px;
		--base: 335px;
		--font-size: 15px;
		--line-height: 26px;
	}
}
@media (min-width: 480px) and (max-width: 940px) and (max-height: 500px) {
	:root {
		--section-spacing: 60px;
		--offset: 30px;
		--offset-small:15px;
		--base: 470px;
		--font-size: 16px;
		--line-height: 28px;
	}
}

/* montserrat-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  src: url('/e2/site/roofvogelboerderij/content/site/fonts/montserrat-v29-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-100italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100;
  src: url('/e2/site/roofvogelboerderij/content/site/fonts/montserrat-v29-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src: url('/e2/site/roofvogelboerderij/content/site/fonts/montserrat-v29-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 200;
  src: url('/e2/site/roofvogelboerderij/content/site/fonts/montserrat-v29-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('/e2/site/roofvogelboerderij/content/site/fonts/montserrat-v29-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 300;
  src: url('/e2/site/roofvogelboerderij/content/site/fonts/montserrat-v29-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('/e2/site/roofvogelboerderij/content/site/fonts/montserrat-v29-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  src: url('/e2/site/roofvogelboerderij/content/site/fonts/montserrat-v29-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('/e2/site/roofvogelboerderij/content/site/fonts/montserrat-v29-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  src: url('/e2/site/roofvogelboerderij/content/site/fonts/montserrat-v29-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('/e2/site/roofvogelboerderij/content/site/fonts/montserrat-v29-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 600;
  src: url('/e2/site/roofvogelboerderij/content/site/fonts/montserrat-v29-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('/e2/site/roofvogelboerderij/content/site/fonts/montserrat-v29-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  src: url('/e2/site/roofvogelboerderij/content/site/fonts/montserrat-v29-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('/e2/site/roofvogelboerderij/content/site/fonts/montserrat-v29-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 800;
  src: url('/e2/site/roofvogelboerderij/content/site/fonts/montserrat-v29-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('/e2/site/roofvogelboerderij/content/site/fonts/montserrat-v29-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 900;
  src: url('/e2/site/roofvogelboerderij/content/site/fonts/montserrat-v29-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {
	color: var(--color-text);
	font-family: 'Montserrat', 'Open Sans', sans-serif;
	line-height: var(--line-height);
	font-size: var(--font-size);
}

h1 {
	font-size: 40px;
	line-height:48px;
	font-weight: 600;
	text-align: center;
	color: var(--color-black);
}

h2 {
	font-size: 36px;
	line-height:42px;
	font-weight: 600;
	color: var(--color-black);

}

h1 span, h2 span {
	display: block;
	font-size: 18px;
	line-height:56px;
	color: var(--color-black);

}

h1 .subtitle {
	color: var(--color-orange);
	font-weight: 600;
	font-size: 24px;
	line-height: 32px;
	margin-top: 15px;
}

h3 {
	font-size: 34px;
	line-height: 32px;
	font-weight: 600;
	color: var(--color-black);

}

h4 {
    text-align: center;
    font-size: 18px;
    line-height: 1.5;
   	color: var(--color-black);

}

h6 {
	font-size: var(--font-size);
}

.big-text p {
    color: var(--color-black);
}

strong, b {
	font-weight: 700;
}

i,em {
	font-style: italic;
}

a {
	color: var(--color-primary);
	text-decoration: underline;
}

#_site_sidemenu {
    text-decoration: none !important;
}

header#header a, a.button span, a.button {
    text-decoration: none !important;
}

a:hover {
	color: var(--color-text);
}

p {
	line-height: 26px;
	font-size: 14px;
	font-weight: 400;
}

li {
    font-size: 16px;
}

@media screen and (max-width: 1023px) {

    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 24px;
    }

    h2 span {
        font-size: 17.5px;
    }

    .wrapper article.text .big-text p {
        font-size: 18px;
        line-height: 30px;
    }
}

@media screen and (max-width: 500px) {

    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 24px;
        line-height: 28px;
    }

    h2 span {
        font-size: 17.5px;
    }

    .wrapper article.text .big-text p {
        font-size: 14px;
        line-height: 22px;
    }
}

  @charset "UTF-8";


  /*!
  Animate.css - http://daneden.me/animate
  Licensed under the MIT license

  Copyright (c) 2013 Daniel Eden

  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */

  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  .animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
  }

  @-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }

    40% {
      -webkit-transform: translateY(-30px);
      transform: translateY(-30px);
    }

    60% {
      -webkit-transform: translateY(-15px);
      transform: translateY(-15px);
    }
  }

  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }

    40% {
      -webkit-transform: translateY(-30px);
      -ms-transform: translateY(-30px);
      transform: translateY(-30px);
    }

    60% {
      -webkit-transform: translateY(-15px);
      -ms-transform: translateY(-15px);
      transform: translateY(-15px);
    }
  }

  .bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
  }

  @-webkit-keyframes flash {
    0%, 50%, 100% {
      opacity: 1;
    }

    25%, 75% {
      opacity: 0;
    }
  }

  @keyframes flash {
    0%, 50%, 100% {
      opacity: 1;
    }

    25%, 75% {
      opacity: 0;
    }
  }

  .flash {
    -webkit-animation-name: flash;
    animation-name: flash;
  }

  /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

  @-webkit-keyframes pulse {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }

    50% {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }

    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }

  @keyframes pulse {
    0% {
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
    }

    50% {
      -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1);
    }

    100% {
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
    }
  }

  .pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
  }

  @-webkit-keyframes shake {
    0%, 100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
      -webkit-transform: translateX(-10px);
      transform: translateX(-10px);
    }

    20%, 40%, 60%, 80% {
      -webkit-transform: translateX(10px);
      transform: translateX(10px);
    }
  }

  @keyframes shake {
    0%, 100% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
      -webkit-transform: translateX(-10px);
      -ms-transform: translateX(-10px);
      transform: translateX(-10px);
    }

    20%, 40%, 60%, 80% {
      -webkit-transform: translateX(10px);
      -ms-transform: translateX(10px);
      transform: translateX(10px);
    }
  }

  .shake {
    -webkit-animation-name: shake;
    animation-name: shake;
  }

  @-webkit-keyframes swing {
    20% {
      -webkit-transform: rotate(15deg);
      transform: rotate(15deg);
    }

    40% {
      -webkit-transform: rotate(-10deg);
      transform: rotate(-10deg);
    }

    60% {
      -webkit-transform: rotate(5deg);
      transform: rotate(5deg);
    }

    80% {
      -webkit-transform: rotate(-5deg);
      transform: rotate(-5deg);
    }

    100% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  }

  @keyframes swing {
    20% {
      -webkit-transform: rotate(15deg);
      -ms-transform: rotate(15deg);
      transform: rotate(15deg);
    }

    40% {
      -webkit-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
      transform: rotate(-10deg);
    }

    60% {
      -webkit-transform: rotate(5deg);
      -ms-transform: rotate(5deg);
      transform: rotate(5deg);
    }

    80% {
      -webkit-transform: rotate(-5deg);
      -ms-transform: rotate(-5deg);
      transform: rotate(-5deg);
    }

    100% {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  }

  .swing {
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
  }

  @-webkit-keyframes tada {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }

    10%, 20% {
      -webkit-transform: scale(0.9) rotate(-3deg);
      transform: scale(0.9) rotate(-3deg);
    }

    30%, 50%, 70%, 90% {
      -webkit-transform: scale(1.1) rotate(3deg);
      transform: scale(1.1) rotate(3deg);
    }

    40%, 60%, 80% {
      -webkit-transform: scale(1.1) rotate(-3deg);
      transform: scale(1.1) rotate(-3deg);
    }

    100% {
      -webkit-transform: scale(1) rotate(0);
      transform: scale(1) rotate(0);
    }
  }

  @keyframes tada {
    0% {
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
    }

    10%, 20% {
      -webkit-transform: scale(0.9) rotate(-3deg);
      -ms-transform: scale(0.9) rotate(-3deg);
      transform: scale(0.9) rotate(-3deg);
    }

    30%, 50%, 70%, 90% {
      -webkit-transform: scale(1.1) rotate(3deg);
      -ms-transform: scale(1.1) rotate(3deg);
      transform: scale(1.1) rotate(3deg);
    }

    40%, 60%, 80% {
      -webkit-transform: scale(1.1) rotate(-3deg);
      -ms-transform: scale(1.1) rotate(-3deg);
      transform: scale(1.1) rotate(-3deg);
    }

    100% {
      -webkit-transform: scale(1) rotate(0);
      -ms-transform: scale(1) rotate(0);
      transform: scale(1) rotate(0);
    }
  }

  .tada {
    -webkit-animation-name: tada;
    animation-name: tada;
  }

  /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

  @-webkit-keyframes wobble {
    0% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }

    15% {
      -webkit-transform: translateX(-25%) rotate(-5deg);
      transform: translateX(-25%) rotate(-5deg);
    }

    30% {
      -webkit-transform: translateX(20%) rotate(3deg);
      transform: translateX(20%) rotate(3deg);
    }

    45% {
      -webkit-transform: translateX(-15%) rotate(-3deg);
      transform: translateX(-15%) rotate(-3deg);
    }

    60% {
      -webkit-transform: translateX(10%) rotate(2deg);
      transform: translateX(10%) rotate(2deg);
    }

    75% {
      -webkit-transform: translateX(-5%) rotate(-1deg);
      transform: translateX(-5%) rotate(-1deg);
    }

    100% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }
  }

  @keyframes wobble {
    0% {
      -webkit-transform: translateX(0%);
      -ms-transform: translateX(0%);
      transform: translateX(0%);
    }

    15% {
      -webkit-transform: translateX(-25%) rotate(-5deg);
      -ms-transform: translateX(-25%) rotate(-5deg);
      transform: translateX(-25%) rotate(-5deg);
    }

    30% {
      -webkit-transform: translateX(20%) rotate(3deg);
      -ms-transform: translateX(20%) rotate(3deg);
      transform: translateX(20%) rotate(3deg);
    }

    45% {
      -webkit-transform: translateX(-15%) rotate(-3deg);
      -ms-transform: translateX(-15%) rotate(-3deg);
      transform: translateX(-15%) rotate(-3deg);
    }

    60% {
      -webkit-transform: translateX(10%) rotate(2deg);
      -ms-transform: translateX(10%) rotate(2deg);
      transform: translateX(10%) rotate(2deg);
    }

    75% {
      -webkit-transform: translateX(-5%) rotate(-1deg);
      -ms-transform: translateX(-5%) rotate(-1deg);
      transform: translateX(-5%) rotate(-1deg);
    }

    100% {
      -webkit-transform: translateX(0%);
      -ms-transform: translateX(0%);
      transform: translateX(0%);
    }
  }

  .wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble;
  }

  @-webkit-keyframes bounceIn {
    0% {
      opacity: 0;
      -webkit-transform: scale(.3);
      transform: scale(.3);
    }

    50% {
      opacity: 1;
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
    }

    70% {
      -webkit-transform: scale(.9);
      transform: scale(.9);
    }

    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }

  @keyframes bounceIn {
    0% {
      opacity: 0;
      -webkit-transform: scale(.3);
      -ms-transform: scale(.3);
      transform: scale(.3);
    }

    50% {
      opacity: 1;
      -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
      transform: scale(1.05);
    }

    70% {
      -webkit-transform: scale(.9);
      -ms-transform: scale(.9);
      transform: scale(.9);
    }

    100% {
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
    }
  }

  .bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
  }

  @-webkit-keyframes bounceInDown {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-2000px);
      transform: translateY(-2000px);
    }

    60% {
      opacity: 1;
      -webkit-transform: translateY(30px);
      transform: translateY(30px);
    }

    80% {
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
    }

    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }

  @keyframes bounceInDown {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-2000px);
      -ms-transform: translateY(-2000px);
      transform: translateY(-2000px);
    }

    60% {
      opacity: 1;
      -webkit-transform: translateY(30px);
      -ms-transform: translateY(30px);
      transform: translateY(30px);
    }

    80% {
      -webkit-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
      transform: translateY(-10px);
    }

    100% {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  }

  .bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
  }

  @-webkit-keyframes bounceInLeft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-2000px);
      transform: translateX(-2000px);
    }

    60% {
      opacity: 1;
      -webkit-transform: translateX(30px);
      transform: translateX(30px);
    }

    80% {
      -webkit-transform: translateX(-10px);
      transform: translateX(-10px);
    }

    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }

  @keyframes bounceInLeft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-2000px);
      -ms-transform: translateX(-2000px);
      transform: translateX(-2000px);
    }

    60% {
      opacity: 1;
      -webkit-transform: translateX(30px);
      -ms-transform: translateX(30px);
      transform: translateX(30px);
    }

    80% {
      -webkit-transform: translateX(-10px);
      -ms-transform: translateX(-10px);
      transform: translateX(-10px);
    }

    100% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
  }

  .bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
  }

  @-webkit-keyframes bounceInRight {
    0% {
      opacity: 0;
      -webkit-transform: translateX(2000px);
      transform: translateX(2000px);
    }

    60% {
      opacity: 1;
      -webkit-transform: translateX(-30px);
      transform: translateX(-30px);
    }

    80% {
      -webkit-transform: translateX(10px);
      transform: translateX(10px);
    }

    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }

  @keyframes bounceInRight {
    0% {
      opacity: 0;
      -webkit-transform: translateX(2000px);
      -ms-transform: translateX(2000px);
      transform: translateX(2000px);
    }

    60% {
      opacity: 1;
      -webkit-transform: translateX(-30px);
      -ms-transform: translateX(-30px);
      transform: translateX(-30px);
    }

    80% {
      -webkit-transform: translateX(10px);
      -ms-transform: translateX(10px);
      transform: translateX(10px);
    }

    100% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
  }

  .bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
  }

  @-webkit-keyframes bounceInUp {
    0% {
      opacity: 0;
      -webkit-transform: translateY(2000px);
      transform: translateY(2000px);
    }

    60% {
      opacity: 1;
      -webkit-transform: translateY(-30px);
      transform: translateY(-30px);
    }

    80% {
      -webkit-transform: translateY(10px);
      transform: translateY(10px);
    }

    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }

  @keyframes bounceInUp {
    0% {
      opacity: 0;
      -webkit-transform: translateY(2000px);
      -ms-transform: translateY(2000px);
      transform: translateY(2000px);
    }

    60% {
      opacity: 1;
      -webkit-transform: translateY(-30px);
      -ms-transform: translateY(-30px);
      transform: translateY(-30px);
    }

    80% {
      -webkit-transform: translateY(10px);
      -ms-transform: translateY(10px);
      transform: translateY(10px);
    }

    100% {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  }

  .bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
  }

  @-webkit-keyframes bounceOut {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }

    25% {
      -webkit-transform: scale(.95);
      transform: scale(.95);
    }

    50% {
      opacity: 1;
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }

    100% {
      opacity: 0;
      -webkit-transform: scale(.3);
      transform: scale(.3);
    }
  }

  @keyframes bounceOut {
    0% {
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
    }

    25% {
      -webkit-transform: scale(.95);
      -ms-transform: scale(.95);
      transform: scale(.95);
    }

    50% {
      opacity: 1;
      -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1);
    }

    100% {
      opacity: 0;
      -webkit-transform: scale(.3);
      -ms-transform: scale(.3);
      transform: scale(.3);
    }
  }

  .bounceOut {
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut;
  }

  @-webkit-keyframes bounceOutDown {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }

    20% {
      opacity: 1;
      -webkit-transform: translateY(-20px);
      transform: translateY(-20px);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateY(2000px);
      transform: translateY(2000px);
    }
  }

  @keyframes bounceOutDown {
    0% {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }

    20% {
      opacity: 1;
      -webkit-transform: translateY(-20px);
      -ms-transform: translateY(-20px);
      transform: translateY(-20px);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateY(2000px);
      -ms-transform: translateY(2000px);
      transform: translateY(2000px);
    }
  }

  .bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown;
  }

  @-webkit-keyframes bounceOutLeft {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }

    20% {
      opacity: 1;
      -webkit-transform: translateX(20px);
      transform: translateX(20px);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateX(-2000px);
      transform: translateX(-2000px);
    }
  }

  @keyframes bounceOutLeft {
    0% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }

    20% {
      opacity: 1;
      -webkit-transform: translateX(20px);
      -ms-transform: translateX(20px);
      transform: translateX(20px);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateX(-2000px);
      -ms-transform: translateX(-2000px);
      transform: translateX(-2000px);
    }
  }

  .bounceOutLeft {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft;
  }

  @-webkit-keyframes bounceOutRight {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }

    20% {
      opacity: 1;
      -webkit-transform: translateX(-20px);
      transform: translateX(-20px);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateX(2000px);
      transform: translateX(2000px);
    }
  }

  @keyframes bounceOutRight {
    0% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }

    20% {
      opacity: 1;
      -webkit-transform: translateX(-20px);
      -ms-transform: translateX(-20px);
      transform: translateX(-20px);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateX(2000px);
      -ms-transform: translateX(2000px);
      transform: translateX(2000px);
    }
  }

  .bounceOutRight {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight;
  }

  @-webkit-keyframes bounceOutUp {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }

    20% {
      opacity: 1;
      -webkit-transform: translateY(20px);
      transform: translateY(20px);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateY(-2000px);
      transform: translateY(-2000px);
    }
  }

  @keyframes bounceOutUp {
    0% {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }

    20% {
      opacity: 1;
      -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
      transform: translateY(20px);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateY(-2000px);
      -ms-transform: translateY(-2000px);
      transform: translateY(-2000px);
    }
  }

  .bounceOutUp {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp;
  }

  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
  }

  @-webkit-keyframes fadeInDown {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-20px);
      transform: translateY(-20px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }

  @keyframes fadeInDown {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-20px);
      -ms-transform: translateY(-20px);
      transform: translateY(-20px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  }

  .fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
  }

  @-webkit-keyframes fadeInDownBig {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-2000px);
      transform: translateY(-2000px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }

  @keyframes fadeInDownBig {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-2000px);
      -ms-transform: translateY(-2000px);
      transform: translateY(-2000px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  }

  .fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig;
  }

  @-webkit-keyframes fadeInLeft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-20px);
      transform: translateX(-20px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }

  @keyframes fadeInLeft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-20px);
      -ms-transform: translateX(-20px);
      transform: translateX(-20px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
  }

  .fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
  }

  @-webkit-keyframes fadeInLeftBig {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-2000px);
      transform: translateX(-2000px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }

  @keyframes fadeInLeftBig {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-2000px);
      -ms-transform: translateX(-2000px);
      transform: translateX(-2000px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
  }

  .fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig;
  }

  @-webkit-keyframes fadeInRight {
    0% {
      opacity: 0;
      -webkit-transform: translateX(20px);
      transform: translateX(20px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }

  @keyframes fadeInRight {
    0% {
      opacity: 0;
      -webkit-transform: translateX(20px);
      -ms-transform: translateX(20px);
      transform: translateX(20px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
  }

  .fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
  }

  @-webkit-keyframes fadeInRightBig {
    0% {
      opacity: 0;
      -webkit-transform: translateX(2000px);
      transform: translateX(2000px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }

  @keyframes fadeInRightBig {
    0% {
      opacity: 0;
      -webkit-transform: translateX(2000px);
      -ms-transform: translateX(2000px);
      transform: translateX(2000px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
  }

  .fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig;
  }

  @-webkit-keyframes fadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translateY(20px);
      transform: translateY(20px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }

  @keyframes fadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
      transform: translateY(20px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  }

  .fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
  }

  @-webkit-keyframes fadeInUpBig {
    0% {
      opacity: 0;
      -webkit-transform: translateY(2000px);
      transform: translateY(2000px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }

  @keyframes fadeInUpBig {
    0% {
      opacity: 0;
      -webkit-transform: translateY(2000px);
      -ms-transform: translateY(2000px);
      transform: translateY(2000px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  }

  .fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig;
  }

  @-webkit-keyframes fadeOut {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  @keyframes fadeOut {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  .fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
  }

  @-webkit-keyframes fadeOutDown {
    0% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateY(20px);
      transform: translateY(20px);
    }
  }

  @keyframes fadeOutDown {
    0% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
      transform: translateY(20px);
    }
  }

  .fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
  }

  @-webkit-keyframes fadeOutDownBig {
    0% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateY(2000px);
      transform: translateY(2000px);
    }
  }

  @keyframes fadeOutDownBig {
    0% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateY(2000px);
      -ms-transform: translateY(2000px);
      transform: translateY(2000px);
    }
  }

  .fadeOutDownBig {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig;
  }

  @-webkit-keyframes fadeOutLeft {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateX(-20px);
      transform: translateX(-20px);
    }
  }

  @keyframes fadeOutLeft {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateX(-20px);
      -ms-transform: translateX(-20px);
      transform: translateX(-20px);
    }
  }

  .fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
  }

  @-webkit-keyframes fadeOutLeftBig {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateX(-2000px);
      transform: translateX(-2000px);
    }
  }

  @keyframes fadeOutLeftBig {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateX(-2000px);
      -ms-transform: translateX(-2000px);
      transform: translateX(-2000px);
    }
  }

  .fadeOutLeftBig {
    -webkit-animation-name: fadeOutLeftBig;
    animation-name: fadeOutLeftBig;
  }

  @-webkit-keyframes fadeOutRight {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateX(20px);
      transform: translateX(20px);
    }
  }

  @keyframes fadeOutRight {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateX(20px);
      -ms-transform: translateX(20px);
      transform: translateX(20px);
    }
  }

  .fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
  }

  @-webkit-keyframes fadeOutRightBig {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateX(2000px);
      transform: translateX(2000px);
    }
  }

  @keyframes fadeOutRightBig {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateX(2000px);
      -ms-transform: translateX(2000px);
      transform: translateX(2000px);
    }
  }

  .fadeOutRightBig {
    -webkit-animation-name: fadeOutRightBig;
    animation-name: fadeOutRightBig;
  }

  @-webkit-keyframes fadeOutUp {
    0% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateY(-20px);
      transform: translateY(-20px);
    }
  }

  @keyframes fadeOutUp {
    0% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateY(-20px);
      -ms-transform: translateY(-20px);
      transform: translateY(-20px);
    }
  }

  .fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
  }

  @-webkit-keyframes fadeOutUpBig {
    0% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateY(-2000px);
      transform: translateY(-2000px);
    }
  }

  @keyframes fadeOutUpBig {
    0% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateY(-2000px);
      -ms-transform: translateY(-2000px);
      transform: translateY(-2000px);
    }
  }

  .fadeOutUpBig {
    -webkit-animation-name: fadeOutUpBig;
    animation-name: fadeOutUpBig;
  }

  @-webkit-keyframes flip {
    0% {
      -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
      transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }

    40% {
      -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
      transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }

    50% {
      -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
      transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }

    80% {
      -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
      transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }

    100% {
      -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
      transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
  }

  @keyframes flip {
    0% {
      -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
      -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
      transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }

    40% {
      -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
      -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
      transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }

    50% {
      -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
      -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
      transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }

    80% {
      -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
      -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
      transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }

    100% {
      -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
      -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
      transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
  }

  .animated.flip {
    -webkit-backface-visibility: visible;
    -ms-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip;
  }

  @-webkit-keyframes flipInX {
    0% {
      -webkit-transform: perspective(400px) rotateX(90deg);
      transform: perspective(400px) rotateX(90deg);
      opacity: 0;
    }

    40% {
      -webkit-transform: perspective(400px) rotateX(-10deg);
      transform: perspective(400px) rotateX(-10deg);
    }

    70% {
      -webkit-transform: perspective(400px) rotateX(10deg);
      transform: perspective(400px) rotateX(10deg);
    }

    100% {
      -webkit-transform: perspective(400px) rotateX(0deg);
      transform: perspective(400px) rotateX(0deg);
      opacity: 1;
    }
  }

  @keyframes flipInX {
    0% {
      -webkit-transform: perspective(400px) rotateX(90deg);
      -ms-transform: perspective(400px) rotateX(90deg);
      transform: perspective(400px) rotateX(90deg);
      opacity: 0;
    }

    40% {
      -webkit-transform: perspective(400px) rotateX(-10deg);
      -ms-transform: perspective(400px) rotateX(-10deg);
      transform: perspective(400px) rotateX(-10deg);
    }

    70% {
      -webkit-transform: perspective(400px) rotateX(10deg);
      -ms-transform: perspective(400px) rotateX(10deg);
      transform: perspective(400px) rotateX(10deg);
    }

    100% {
      -webkit-transform: perspective(400px) rotateX(0deg);
      -ms-transform: perspective(400px) rotateX(0deg);
      transform: perspective(400px) rotateX(0deg);
      opacity: 1;
    }
  }

  .flipInX {
    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
  }

  @-webkit-keyframes flipInY {
    0% {
      -webkit-transform: perspective(400px) rotateY(90deg);
      transform: perspective(400px) rotateY(90deg);
      opacity: 0;
    }

    40% {
      -webkit-transform: perspective(400px) rotateY(-10deg);
      transform: perspective(400px) rotateY(-10deg);
    }

    70% {
      -webkit-transform: perspective(400px) rotateY(10deg);
      transform: perspective(400px) rotateY(10deg);
    }

    100% {
      -webkit-transform: perspective(400px) rotateY(0deg);
      transform: perspective(400px) rotateY(0deg);
      opacity: 1;
    }
  }

  @keyframes flipInY {
    0% {
      -webkit-transform: perspective(400px) rotateY(90deg);
      -ms-transform: perspective(400px) rotateY(90deg);
      transform: perspective(400px) rotateY(90deg);
      opacity: 0;
    }

    40% {
      -webkit-transform: perspective(400px) rotateY(-10deg);
      -ms-transform: perspective(400px) rotateY(-10deg);
      transform: perspective(400px) rotateY(-10deg);
    }

    70% {
      -webkit-transform: perspective(400px) rotateY(10deg);
      -ms-transform: perspective(400px) rotateY(10deg);
      transform: perspective(400px) rotateY(10deg);
    }

    100% {
      -webkit-transform: perspective(400px) rotateY(0deg);
      -ms-transform: perspective(400px) rotateY(0deg);
      transform: perspective(400px) rotateY(0deg);
      opacity: 1;
    }
  }

  .flipInY {
    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
  }

  @-webkit-keyframes flipOutX {
    0% {
      -webkit-transform: perspective(400px) rotateX(0deg);
      transform: perspective(400px) rotateX(0deg);
      opacity: 1;
    }

    100% {
      -webkit-transform: perspective(400px) rotateX(90deg);
      transform: perspective(400px) rotateX(90deg);
      opacity: 0;
    }
  }

  @keyframes flipOutX {
    0% {
      -webkit-transform: perspective(400px) rotateX(0deg);
      -ms-transform: perspective(400px) rotateX(0deg);
      transform: perspective(400px) rotateX(0deg);
      opacity: 1;
    }

    100% {
      -webkit-transform: perspective(400px) rotateX(90deg);
      -ms-transform: perspective(400px) rotateX(90deg);
      transform: perspective(400px) rotateX(90deg);
      opacity: 0;
    }
  }

  .flipOutX {
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important;
  }

  @-webkit-keyframes flipOutY {
    0% {
      -webkit-transform: perspective(400px) rotateY(0deg);
      transform: perspective(400px) rotateY(0deg);
      opacity: 1;
    }

    100% {
      -webkit-transform: perspective(400px) rotateY(90deg);
      transform: perspective(400px) rotateY(90deg);
      opacity: 0;
    }
  }

  @keyframes flipOutY {
    0% {
      -webkit-transform: perspective(400px) rotateY(0deg);
      -ms-transform: perspective(400px) rotateY(0deg);
      transform: perspective(400px) rotateY(0deg);
      opacity: 1;
    }

    100% {
      -webkit-transform: perspective(400px) rotateY(90deg);
      -ms-transform: perspective(400px) rotateY(90deg);
      transform: perspective(400px) rotateY(90deg);
      opacity: 0;
    }
  }

  .flipOutY {
    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY;
  }

  @-webkit-keyframes lightSpeedIn {
    0% {
      -webkit-transform: translateX(100%) skewX(-30deg);
      transform: translateX(100%) skewX(-30deg);
      opacity: 0;
    }

    60% {
      -webkit-transform: translateX(-20%) skewX(30deg);
      transform: translateX(-20%) skewX(30deg);
      opacity: 1;
    }

    80% {
      -webkit-transform: translateX(0%) skewX(-15deg);
      transform: translateX(0%) skewX(-15deg);
      opacity: 1;
    }

    100% {
      -webkit-transform: translateX(0%) skewX(0deg);
      transform: translateX(0%) skewX(0deg);
      opacity: 1;
    }
  }

  @keyframes lightSpeedIn {
    0% {
      -webkit-transform: translateX(100%) skewX(-30deg);
      -ms-transform: translateX(100%) skewX(-30deg);
      transform: translateX(100%) skewX(-30deg);
      opacity: 0;
    }

    60% {
      -webkit-transform: translateX(-20%) skewX(30deg);
      -ms-transform: translateX(-20%) skewX(30deg);
      transform: translateX(-20%) skewX(30deg);
      opacity: 1;
    }

    80% {
      -webkit-transform: translateX(0%) skewX(-15deg);
      -ms-transform: translateX(0%) skewX(-15deg);
      transform: translateX(0%) skewX(-15deg);
      opacity: 1;
    }

    100% {
      -webkit-transform: translateX(0%) skewX(0deg);
      -ms-transform: translateX(0%) skewX(0deg);
      transform: translateX(0%) skewX(0deg);
      opacity: 1;
    }
  }

  .lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  @-webkit-keyframes lightSpeedOut {
    0% {
      -webkit-transform: translateX(0%) skewX(0deg);
      transform: translateX(0%) skewX(0deg);
      opacity: 1;
    }

    100% {
      -webkit-transform: translateX(100%) skewX(-30deg);
      transform: translateX(100%) skewX(-30deg);
      opacity: 0;
    }
  }

  @keyframes lightSpeedOut {
    0% {
      -webkit-transform: translateX(0%) skewX(0deg);
      -ms-transform: translateX(0%) skewX(0deg);
      transform: translateX(0%) skewX(0deg);
      opacity: 1;
    }

    100% {
      -webkit-transform: translateX(100%) skewX(-30deg);
      -ms-transform: translateX(100%) skewX(-30deg);
      transform: translateX(100%) skewX(-30deg);
      opacity: 0;
    }
  }

  .lightSpeedOut {
    -webkit-animation-name: lightSpeedOut;
    animation-name: lightSpeedOut;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  @-webkit-keyframes rotateIn {
    0% {
      -webkit-transform-origin: center center;
      transform-origin: center center;
      -webkit-transform: rotate(-200deg);
      transform: rotate(-200deg);
      opacity: 0;
    }

    100% {
      -webkit-transform-origin: center center;
      transform-origin: center center;
      -webkit-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
    }
  }

  @keyframes rotateIn {
    0% {
      -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
      transform-origin: center center;
      -webkit-transform: rotate(-200deg);
      -ms-transform: rotate(-200deg);
      transform: rotate(-200deg);
      opacity: 0;
    }

    100% {
      -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
      transform-origin: center center;
      -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
    }
  }

  .rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn;
  }

  @-webkit-keyframes rotateInDownLeft {
    0% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
      opacity: 0;
    }

    100% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
    }
  }

  @keyframes rotateInDownLeft {
    0% {
      -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      transform: rotate(-90deg);
      opacity: 0;
    }

    100% {
      -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
    }
  }

  .rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft;
  }

  @-webkit-keyframes rotateInDownRight {
    0% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
      opacity: 0;
    }

    100% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
    }
  }

  @keyframes rotateInDownRight {
    0% {
      -webkit-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
      opacity: 0;
    }

    100% {
      -webkit-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
    }
  }

  .rotateInDownRight {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight;
  }

  @-webkit-keyframes rotateInUpLeft {
    0% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
      opacity: 0;
    }

    100% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
    }
  }

  @keyframes rotateInUpLeft {
    0% {
      -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
      opacity: 0;
    }

    100% {
      -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
    }
  }

  .rotateInUpLeft {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft;
  }

  @-webkit-keyframes rotateInUpRight {
    0% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
      opacity: 0;
    }

    100% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
    }
  }

  @keyframes rotateInUpRight {
    0% {
      -webkit-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      transform: rotate(-90deg);
      opacity: 0;
    }

    100% {
      -webkit-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
    }
  }

  .rotateInUpRight {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight;
  }

  @-webkit-keyframes rotateOut {
    0% {
      -webkit-transform-origin: center center;
      transform-origin: center center;
      -webkit-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
    }

    100% {
      -webkit-transform-origin: center center;
      transform-origin: center center;
      -webkit-transform: rotate(200deg);
      transform: rotate(200deg);
      opacity: 0;
    }
  }

  @keyframes rotateOut {
    0% {
      -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
      transform-origin: center center;
      -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
    }

    100% {
      -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
      transform-origin: center center;
      -webkit-transform: rotate(200deg);
      -ms-transform: rotate(200deg);
      transform: rotate(200deg);
      opacity: 0;
    }
  }

  .rotateOut {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut;
  }

  @-webkit-keyframes rotateOutDownLeft {
    0% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
    }

    100% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
      opacity: 0;
    }
  }

  @keyframes rotateOutDownLeft {
    0% {
      -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
    }

    100% {
      -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
      opacity: 0;
    }
  }

  .rotateOutDownLeft {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft;
  }

  @-webkit-keyframes rotateOutDownRight {
    0% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
    }

    100% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
      opacity: 0;
    }
  }

  @keyframes rotateOutDownRight {
    0% {
      -webkit-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
    }

    100% {
      -webkit-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      transform: rotate(-90deg);
      opacity: 0;
    }
  }

  .rotateOutDownRight {
    -webkit-animation-name: rotateOutDownRight;
    animation-name: rotateOutDownRight;
  }

  @-webkit-keyframes rotateOutUpLeft {
    0% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
    }

    100% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
      opacity: 0;
    }
  }

  @keyframes rotateOutUpLeft {
    0% {
      -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
    }

    100% {
      -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      transform: rotate(-90deg);
      opacity: 0;
    }
  }

  .rotateOutUpLeft {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft;
  }

  @-webkit-keyframes rotateOutUpRight {
    0% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
    }

    100% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
      opacity: 0;
    }
  }

  @keyframes rotateOutUpRight {
    0% {
      -webkit-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
    }

    100% {
      -webkit-transform-origin: right bottom;
      -ms-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
      opacity: 0;
    }
  }

  .rotateOutUpRight {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight;
  }

  @-webkit-keyframes slideInDown {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-2000px);
      transform: translateY(-2000px);
    }

    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }

  @keyframes slideInDown {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-2000px);
      -ms-transform: translateY(-2000px);
      transform: translateY(-2000px);
    }

    100% {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  }

  .slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
  }

  @-webkit-keyframes slideInLeft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-2000px);
      transform: translateX(-2000px);
    }

    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }

  @keyframes slideInLeft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-2000px);
      -ms-transform: translateX(-2000px);
      transform: translateX(-2000px);
    }

    100% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
  }

  .slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
  }

  @-webkit-keyframes slideInRight {
    0% {
      opacity: 0;
      -webkit-transform: translateX(2000px);
      transform: translateX(2000px);
    }

    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }

  @keyframes slideInRight {
    0% {
      opacity: 0;
      -webkit-transform: translateX(2000px);
      -ms-transform: translateX(2000px);
      transform: translateX(2000px);
    }

    100% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
  }

  .slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
  }

  @-webkit-keyframes slideOutLeft {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateX(-2000px);
      transform: translateX(-2000px);
    }
  }

  @keyframes slideOutLeft {
    0% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateX(-2000px);
      -ms-transform: translateX(-2000px);
      transform: translateX(-2000px);
    }
  }

  .slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft;
  }

  @-webkit-keyframes slideOutRight {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateX(2000px);
      transform: translateX(2000px);
    }
  }

  @keyframes slideOutRight {
    0% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateX(2000px);
      -ms-transform: translateX(2000px);
      transform: translateX(2000px);
    }
  }

  .slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight;
  }

  @-webkit-keyframes slideOutUp {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateY(-2000px);
      transform: translateY(-2000px);
    }
  }

  @keyframes slideOutUp {
    0% {
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateY(-2000px);
      -ms-transform: translateY(-2000px);
      transform: translateY(-2000px);
    }
  }

  .slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp;
  }

  @-webkit-keyframes hinge {
    0% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
      -webkit-transform-origin: top left;
      transform-origin: top left;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
    }

    20%, 60% {
      -webkit-transform: rotate(80deg);
      transform: rotate(80deg);
      -webkit-transform-origin: top left;
      transform-origin: top left;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
    }

    40% {
      -webkit-transform: rotate(60deg);
      transform: rotate(60deg);
      -webkit-transform-origin: top left;
      transform-origin: top left;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
    }

    80% {
      -webkit-transform: rotate(60deg) translateY(0);
      transform: rotate(60deg) translateY(0);
      opacity: 1;
      -webkit-transform-origin: top left;
      transform-origin: top left;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
    }

    100% {
      -webkit-transform: translateY(700px);
      transform: translateY(700px);
      opacity: 0;
    }
  }

  @keyframes hinge {
    0% {
      -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
      transform: rotate(0);
      -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
      transform-origin: top left;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
    }

    20%, 60% {
      -webkit-transform: rotate(80deg);
      -ms-transform: rotate(80deg);
      transform: rotate(80deg);
      -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
      transform-origin: top left;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
    }

    40% {
      -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
      transform: rotate(60deg);
      -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
      transform-origin: top left;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
    }

    80% {
      -webkit-transform: rotate(60deg) translateY(0);
      -ms-transform: rotate(60deg) translateY(0);
      transform: rotate(60deg) translateY(0);
      opacity: 1;
      -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
      transform-origin: top left;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
    }

    100% {
      -webkit-transform: translateY(700px);
      -ms-transform: translateY(700px);
      transform: translateY(700px);
      opacity: 0;
    }
  }

  .hinge {
    -webkit-animation-name: hinge;
    animation-name: hinge;
  }

  /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

  @-webkit-keyframes rollIn {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-100%) rotate(-120deg);
      transform: translateX(-100%) rotate(-120deg);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateX(0px) rotate(0deg);
      transform: translateX(0px) rotate(0deg);
    }
  }

  @keyframes rollIn {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-100%) rotate(-120deg);
      -ms-transform: translateX(-100%) rotate(-120deg);
      transform: translateX(-100%) rotate(-120deg);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateX(0px) rotate(0deg);
      -ms-transform: translateX(0px) rotate(0deg);
      transform: translateX(0px) rotate(0deg);
    }
  }

  .rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn;
  }

  /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

  @-webkit-keyframes rollOut {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0px) rotate(0deg);
      transform: translateX(0px) rotate(0deg);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateX(100%) rotate(120deg);
      transform: translateX(100%) rotate(120deg);
    }
  }

  @keyframes rollOut {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0px) rotate(0deg);
      -ms-transform: translateX(0px) rotate(0deg);
      transform: translateX(0px) rotate(0deg);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateX(100%) rotate(120deg);
      -ms-transform: translateX(100%) rotate(120deg);
      transform: translateX(100%) rotate(120deg);
    }
  }

  .rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut;
  }

/* ---------- layout---------- */


/* ---------- lipstick ---------- */

header#header .logo figure {
	padding: 20px 0 20px 0;
	margin-top: 20px;
	margin-left: 70px;
	transition: all 0.2s linear;
}

header#header .logo figure img {
	max-width: 100%;
	max-height: 6vw;
	transition: all 0.3s linear;
}

.mobile-logo {
    display: none; /* Hidden by default */
    width: 60vw; /* Adjust as needed */
    margin: 6vh auto 2vh; /* Center the logo */
}

@media (max-width: 1023px) {
    .mobile-logo {
        display: block; /* Show on mobile screens */
    }
}

[data-interactive="1"] header#header .logo figure img { max-width: 200px; }

/* ---------- media query ---------- */

@media screen and (max-width: 1580px) {

}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
	.mobile-logo {
		width: 30vw;
		margin: 2vh auto 2vh;
	}

	header#header .wrapper nav ul li > a, header#header .wrapper nav ul li > button {
		font-size: 30px;
	}

	header#header .wrapper nav ul li > a:hover, header#header .wrapper nav ul li > button:hover {
        color: var(--color-black);
    }
}

@media screen and (max-width: 1366px) {

	.mobile-logo {
        display: block;
    }

	header#header .logo figure  {
		padding: 0px 0;
		margin-top: -13px;
		margin-left: 5vw;
		transition: unset;
	}

	header#header .logo > div {
		height: 52px;
	}

	header#header .logo figure {
		min-height: 60px;
	}

	header#header .logo figure img {
		max-height: 55px;
		transition: unset;
	}

}

/* ---------- vars ---------- */


/* ---------- layout ---------- */
header#header .nav-close {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: calc(var(--z-index-navigation) - 1);
}

header#header nav {
	display: grid;
	grid-template-columns: 1fr;
	justify-content: center;
}

header#header nav .container { width: 100%; }

header#header nav ul {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--nav-gap);
	margin: 0px 0px 10px 0px;
}

.mobile-only {
	display: none;
}

/* ---------- lipstick ---------- */

header#header nav ul li {
	margin: 0 var(--offset-tiny);
}
header#header nav{
	cursor: pointer;
}
header#header nav ul li > a, header#header nav ul li > button {
	color: white;
	font-size: 20px;
	font-weight: 400;
	font-family: 'Montserrat', sans-serif;
	transition: all var(--transition-speed);
}

header#header nav ul li > a:hover, header#header nav ul li > button:hover {
	color: var(--color-primary);
	cursor: pointer;
}

header#header nav ul li a.active {
	color: var(--color-primary);
}

header#header nav ul.nav {
	margin-top: 20px;
	margin-left: 16px;
	height: 30px;
}

ul > li > button {
	background: transparent;
    color: white;
    font-size: 18px;
    font-weight: 400;
    font-family: ' Montserrat', sans-serif;
    border: unset;
}

nav .address-flex > i {
	color: white;
	}
nav .grid{
	padding-top: 40px;
}

.dropdown {
    display: none;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.dropdown.show {
    display: block;
    opacity: 1;
    max-height: 500px; /* Adjust based on content height */
}

.dropdown-arrow {
    position: relative; /* Needed for ::after positioning */
}

.dropdown-content a:nth-child(8) {
    font-size: 20px;
    margin-top: 5px;
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1662px) {
    header#header nav ul {
        gap: calc(25px - ((1662px - 100vw) / 295) * 23);
    }
}

@media screen and (max-width: 1366px) {
	header#header nav {
		display: block;
		overflow: auto;
		/*display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: var(--offset) auto var(--offset);*/
		align-items: stretch;
		position: fixed;
		bottom: 0;
		left: 0;
		transform: translateX(-100%);
		width: 100%;
		top: 0;
		background: var(--color-primary);
		color: white;
		z-index: var(--z-index-navigation);
		transition: all var(--transition-speed);
	}

	.mobile-only{
		display: block !important;
		margin-right: 0;
	}
	header#header nav.active  {
		transform: translateX(0);
	}
	header#header nav > .container > div {
	height: 100%;
	}
	header#header nav.active + .nav-close {
		display: block;
		z-index: 1;
	}

	header#header nav .container {
		grid-column: 1;
		grid-row: 2;
	}

	header#header nav ul {
		display: flex;
		justify-content: flex-start;
		height: 100%;
		align-items: center;
		flex-direction: column;
	}
	header#header nav .top-header{
		display: none;
	}
	header#header nav ul li + li {
		margin-top: var(--offset-small);
	}

	header#header nav ul.nav {
		margin-top: 10vh;
		margin-left: 0px;
		height: unset;
	}
}

/* ---------- layout---------- */
header#header .navigation-trigger {
	--size: 30px;
	--size-small: 20px;
	--spacing: 6px;
}

header#header .navigation-trigger {
	display: flex;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: var(--size);
	height: var(--size);
}

/* ---------- lipstick ---------- */

header#header .navigation-trigger {
	opacity: 1;
	cursor: pointer;
	position: relative;
	width: 40px;
	height: 40px;
	color: var(--color-yellow);
	border-radius: 50%;
}

header#header .navigation-trigger span {
	position: absolute;
	top: 50%;
	opacity: 1;
	display: block;
	background: white;
	height: 2px;
	width: var(--size);
	transform: background var(--transition-speed);
	transition: transform 0.2s linear;
}

header#header .navigation-trigger span:nth-child(1) {
	top: calc(50% - var(--spacing));
	animation-delay: 1.8s;
	width: var(--size-small);
}

header#header .navigation-trigger span:nth-child(3) {
	top: calc(50% + var(--spacing));
	animation-delay: 2.2s;
	width: var(--size-small);
}

header#header .navigation-trigger span:nth-child(2) {
	transition: opacity 0.2s linear;
}

header#header .navigation-trigger:hover {
	background: var(--color-blue);
	border-color: var(--color-blue);
	transform: scale(1.1);
}

header#header .navigation-trigger:hover span {
	background: white;
}

/* ---------- animation ---------- */

@keyframes trigger-init {
	0% {
		width: 3px;
		opacity: 0;
	}

	30% {
		opacity: 1;
	}

	70% {
		width: calc(var(--size) + 10px);
	}

	100% {
		width: var(--size);
		opacity: 1;
	}
}

@keyframes trigger-init-size {
	0% {
		width: 3px;
		opacity: 0;
	}

	30% {
		opacity: 1;
	}

	70% {
		width: calc(var(--size-small) + 10px);
	}

	100% {
		width: var(--size-small);
		opacity: 1;
	}
}

/* ---------- media query ---------- */
@media screen and (max-width: 1366px) {
	header#header .navigation-trigger {
		display: flex;
		z-index: 9999;
		margin-right: 25px;
	}
	header#header .navigation-trigger.active span:nth-child(1),
	header#header .navigation-trigger.active span:nth-child(3) {
		width: var(--size-small); /* Ensure the size matches the close icon design */
		top: 50%;
		transform: rotate(45deg);
	}

	header#header .navigation-trigger.active span:nth-child(3) {
		transform: rotate(-45deg);
	}

	header#header .navigation-trigger.active span:nth-child(2) {
		opacity: 0 !important;
	}
}

/* ---------- vars ---------- */
header#header .socialmedia {
	--size: 40px;
}

/* ---------- layout ---------- */
header#header .socialmedia {
	display: none;
	/* display: flex; */
	justify-content: end;
}

header#header .socialmedia a {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: var(--size); 
	height: var(--size); 
}

/* ---------- lipstick ---------- */

header#header .socialmedia a {
	border-radius: 50%;
	color: var(--color-secondary);
	font-size: 30px;
	transition: all var(--transition-speed); 
}

header#header .socialmedia a:hover {
	border-color: var(--color-yellow); 
	color: var(--color-yellow);
	transform: scale(1.1);
}

header#header .socialmedia a + a {
	margin-left: var(--offset-tiny); 
}

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1580px) {
}

@media screen and (max-width: 1023px) {
	header#header .socialmedia {
		display: none;
	}

}

/* ---------- layout---------- */

header#header {
	position: fixed;
	z-index: var(--z-index-header);
	width: 100%;
	top: 0;
	padding: 0 0 2% 0;
	transition: background-color 230ms linear;
}

header#header .wrapper {
	display: grid;
	grid-template-columns: var(--grid-4) auto;
	align-items: center;
	height: 120px;
}

header#header nav ul.nav{
	transition: margin-top 0.2s linear;
}

/* header#header.scroll > .wrapper > .logo > figure {
	width: 100px;
	transition: 0.5s;

} */

/* ---------- lipstick ---------- */
header#header {
	background: transparent;
	color: var(--color-white);
}

header#header .fadeInRightBig {
	-webkit-animation-name: fadeInRightBigHeader;
	animation-name: fadeInRightBigHeader;
}

a.button.workshop-button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /*padding: 10px 20px;*/
    margin: 0;
    box-sizing: border-box;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 500;
}

a.button.workshop-button i {
	margin-left: 10px;
	line-height: 10px;
	color: var(--color-white);
}

[data-interactive="1"] .blur {
	filter: unset !important;
}

[data-interactive="1"] header#header {
	position: relative;
	height: auto;
	position: relative !important;
	background: var(--color-primary) !important;
	& a {
		color: black;
	}
}

[data-interactive="1"] header#header .wrapper {
	grid-template-columns: 1fr;
}
[data-interactive="1"] .navigation-full-dropdown{
	display: block !important;
	position: relative;
}

.navigation-full-dropdown {
	-webkit-animation: slide-in-top 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
	animation: slide-in-top 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
	position: fixed;
	top: 180px;
	left: 0;
	width: 100%;
	background: var(--color-white);
	display: none;
	z-index: 400;
	transition: top 0.2s linear;
	padding-top: 30px;
	min-height: 260px;
	max-height: 260px;

	.container .links a i {
		padding-right: 5px;
	}
}

#full-width-dropdown-wrks.navigation-full-dropdown {
    padding: unset;
}


.navigation-full-dropdown > .container {
	display: grid;
	height: 100%;
	margin: auto;
	max-width: var(--base);
	justify-content: center;
	column-gap: var(--offset);
	grid-template-columns: 40% 50%;
}

.navigation-full-dropdown > .container > div {
	display: flex;
	flex-direction: column;
	font-size: 16px;
	line-height: 30px;
	gap: 0px;
	align-self: center;
}

.navigation-full-dropdown > .container h3 {
    color: var(--color-primary);
}

.navigation-full-dropdown > .container > .button span {
    color: var(--color-black);
}

/*#full-width-dropdown-wrks > div > div:nth-child(1) > a > span > i {*/
.navigation-full-dropdown > div > div:nth-child(1) > a > span > i {
    color: var(--color-white);
    margin-left: 5px;
}


.navigation-full-dropdown h3 {
	font-size: 20px;
}

.navigation-full-dropdown p {
	font-size: 16px;
	line-height: 28px;
}

.navigation-full-dropdown .button{
	width: fit-content;
	margin-top: 10px;
}

.navigation-full-dropdown .button span{
    display: flex;
    flex-direction: row;
    color: var(--color-black);
}

.navigation-full-dropdown > .container > div > a {
	color: var(--color-black);
	font-size: 16px
	& I {
		color: var(--color-primary);
	}
}

.navigation-full-dropdown > .container > div.links > a:hover {
	text-decoration: none;
}
.navigation-full-dropdown > .container > div > a.button:hover span {
	color: var(--color-white);
}

.navigation-full-dropdown .links {
	height: 59%;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.navigation-full-dropdown .links a {
    text-decoration: none;
}

.navigation-full-dropdown .links a:hover {
    color: var(--color-primary);
    cursor: pointer;
}

.navigation-full-dropdown .links i {
    color: var(--color-primary);
}

.navigation-full-dropdown .links.par {
	height: 55%;
}

.show {
	display: block;
}

.blur {
	filter: blur(1px) brightness(30%);
	transition: filter 0.3s ease;
	background-color: var(--color-white);
}

footer.blur {
    clip-path: unset;
	-webkit-clip-path: unset;
    margin-top: -10px;
}

header:has(.show) {
	background-color: #f0f0f0; /* Change the header background if it directly contains an element with class "show" */
}

._site_snippet_controller_menu_static {
	z-index: 9000;
	position: relative;
}
/* ---------- media query ---------- */

@media screen and (max-width: 1560px) {
	.navigation-full-dropdown {
		height: unset;
	}
	.navigation-full-dropdown .links.par {
		height: 60%;
	}
}

@media screen and (max-width: 1366px) {
	header#header {
		height: auto;
		padding: 2% 0 0 0;
	}

	.navigation-full-dropdown > .container {
		grid-template-columns: var(--grid-12);
		top: 11%;
	}
	a.button.workshop-button {
		margin-right: 0px;
	}

	header#header .wrapper {
		display: flex;
		justify-content: space-between;
		gap: 15px;
		width: 100%;
		padding-top: 15px;
		padding-bottom: 10px;
		margin: 0;
		align-items: center;
	}
}

.dropdown-arrow::after {
    font-family: "Font Awesome 6 Pro";
    content: "\f078";
    display: inline-block;
    margin-left: 5px;
    width: 0;
    height: 0;
    margin-top: -15px;
    font-size: 14px;
    vertical-align: middle;
}

/* To change the arrow direction to 'up' when the dropdown is open, add another class */
.dropdown-open .dropdown-arrow::after {
    border-top: none;
    border-bottom: 5px solid var(--color-white); /* Creates the arrow pointing up */
}

/* scroll */
header#header.scroll {
	background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.9),
        rgba(0, 0, 0, 0.8),
        rgba(0, 0, 0, 0.7)    );/* Fully transparent at the bottom */;
	box-shadow: 15px 0px 15px rgba(52,55,56, 0.5);
}

header#header.scroll .wrapper {
	height: 100px;

}

header#header.scroll .logo figure img{
	max-height: 80px;
	margin-top: 12px;
}

header#header.scroll nav .top-header{
	padding-top: 10px;
}

header#header.scroll .logo figure{
	padding: 0
}
.navigation-full-dropdown.scroll {
	top: 140px;
}
header#header.scroll .wrapper .logo {
	align-self: center;
}

header#header.scroll nav ul.nav{
	margin-top: -4px;
}
header#header.scroll nav ul li > *{
	font-size: 18px;
}
@keyframes slide-out-top {
	0% {
	  transform: translateY(0);
	  opacity: 1;
	}
	100% {
	  transform: translateY(-1000px);
	  opacity: 0;
	}
  }
  @keyframes slide-in-top {
	0% {
	  transform: translateY(-1000px);
	  opacity: 0;
	}
	100% {
	  transform: translateY(0);
	  opacity: 1;
	}
  }


.dropdown-flex {
	display: flex;
	flex-direction: row !important;
	align-items: center;
	gap: 5px;
	& > i {
		color: var(--color-secondary);
	}
}

.dropdown {
	display: none;
}

.dropdown.show {
	display: none;
}

@media screen and (min-width: 1367px) {
	.dropdown-arrow:hover {
		height: 10em;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
	.dropdown.show {
		display: block
	}

	.dropdown .dropdown-content {
        display: flex !important;
        flex-direction: column;
        gap: 5px;
        text-align: center;
        padding-top: 5px;
        & > a {
			color: var(--color-black);
			font-size: 25px;
			padding-top: 15px;
		}
    }
}

@media screen and (max-width: 1023px)
{
    header#header nav ul li > a:hover, header#header nav ul li > button:hover {
        color: var(--color-black);
    }

    header#header.scroll .logo figure img{
	max-height: 55px;
	margin-top: 12px;
    }

	.dropdown.show {
		display: block
	}

	.dropdown .dropdown-content {
		display: flex !important;
		flex-direction: column;
		gap: 3px;
		text-align: center;
		padding-top: 5px;
		& > a {
			color: var(--color-black);
			font-size: 15px;
			padding-top: 4px;
		}
	}

	.dropdown-arrow {
    	display: inline-block;
    	transition: transform 0.3s ease; /* Smooth rotation */
	}

.dropdown-arrow.rotated {
    transform: rotate(180deg); /* Rotate the arrow */
}

	.workshop-li, .par-li {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

@keyframes fadeInRightBigHeader {
    0% {
    	opacity: 0;
      	-webkit-transform: translateX(500px);
      	-ms-transform: translateX(500px);
      	transform: translateX(500px);
    }

    100% {
    	opacity: 1;
      	-webkit-transform: translateX(0);
      	-ms-transform: translateX(0);
      	transform: translateX(0);
	}
}

/* ---------- vars ---------- */


/* ---------- layout ---------- */


footer .links {
	display: flex;
	flex-direction: column;
}

/* ---------- lipstick ---------- */

footer .links a {
	color: var(--color-black); 
	transition: all var(--transition-speed); 
	padding-left: 12px;
}

footer .links a:before {
	font-family: "Font Awesome 6 Pro";
	transition: all var(--transition-speed); 
	content: "\f105";
	position: absolute; 
	margin-left: -12px;
	color: var(--color-bronze);
	font-weight: 400;
	font-size: 14px;
}

footer .links a:hover,
footer .links a:hover:before {
	color: var(--color-blue);
}

footer .links a:hover:before {
	margin-left: -8px;
}
/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


}
/* ---------- vars ---------- */


/* ---------- layout ---------- */
footer .calltoaction {
	
}

/* ---------- lipstick ---------- */

footer .calltoaction {
	padding: var(--offset); 
	background: var(--color-yellow); 
}


/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


}
/* ---------- vars ---------- */


/* ---------- layout ---------- */
footer .columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--offset-small) var(--offset); 
}

footer .columns .bottom {
	grid-column: 1 / -1;
	grid-row: 2;
	display: flex;
	justify-content: space-between;
}

/* ---------- lipstick ---------- */

footer .columns {
	font-size: 16px;
}

footer .columns h6 + * {
	margin-top: var(--offset-small);
}

footer .columns img { max-width: 100%; max-height: 70px;  }

footer .columns .bottom a {
	color: var(--color-black);
} 

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {
	footer .columns {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: var(--offset); 
	}

	footer .columns .bottom {
		grid-row: 4;
		flex-direction: column;
	}

	footer .columns .development figure img {
		max-width: 280px;
	}
}

/* ---------- vars ---------- */

/* ---------- layout ---------- */

footer {
	background-color: #f0f0f0;
	overflow: hidden !important;
	position: relative;
    -webkit-clip-path: polygon(0 0, 100% 25%, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 25%, 100% 100%, 0% 100%);
    height: 500px;
    padding: var(--offset) 0;
    z-index: 1;
    font-size: 16px;


    h2 {
        font-size: 22px;
    	color: var(--color-primary);
    	font-weight: 500;
    }

    .internal-link i {
    	color: var(--color-primary);
    	padding-right: 5px;
    }

    ul .internal-link i:before{
    	content: '';
    }

    ul span.social-link {
    	color: var(--color-primary);
    	font-size: 18px;
    }

    .bottom section.landingspage > .container {
	    display: flex;
	    flex-direction: column;
	    margin: 0 auto;
	    max-width: var(--grid-12);
	    gap: 10px;
	}

    .landingspage .container {
    	display: block;
    	text-align: center;
        margin-top: 25px;

    	.links-container {
		    grid-template-columns: repeat(5, 1fr);
		    text-align: left;
		    margin-top: 2px;
		    gap: 4px;
		    padding: 0 20%;
		}

		.link-landingspage {
		    font-size: 11px;
		    font-weight: 600;
		    color: var(--color-primary);
/*		    -webkit-appearance: none;
		    appearance: none;*/
		}
    }

    .landingspage .toggle-button {
        cursor: pointer;
        padding: 0;
        border: none;
        font-size: 12px;
        max-width: 220px;
        margin: 0 auto;
        transition: background-color 0.3s ease;
    }
}

footer a {
	color: var(--color-text-soft);
    text-decoration: none;
}

footer a:hover {
	color: var(--color-primary);
}

footer .flex {
	display: flex;
	justify-content: space-between;
	gap: 5px;
}

footer .flex-grid {
	display: grid;
	grid-template-columns: 90px 160px;
}

footer > * {
	grid-column: 1;
}

footer > .container > img {
	padding: 50px 0px 0px 0px;
}

footer > .container {
	margin: 0 11%;
	z-index: 999;
	position: relative;
}

footer > .container > .grid {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 20px;
    margin-top: 20px;
}

footer > .container > .grid > div > div > address {
	font-size: 15px;
	line-height: 30px;
}

footer > .container > .grid > div  > p {
	font-size: 15px;
	line-height: 30px;
}

.address-flex {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	vertical-align: top;
}

footer .address-flex > i {
	color: var(--color-primary);
    font-size: 24px;
    line-height: 30px;
}

footer .bottom {
	padding-top: 50px;
/*	padding-bottom: 75px;*/
	display: grid;
	grid-template-columns: 50% 50%;
	align-items: center;
	gap: 20px;
}

footer .landingspage {
	padding-bottom: 10vh;
}

.bottom > ul {
	padding: 0;
	display: flex;
	font-size: 12px;
	line-height: 32px;
	gap: 8px;
}

.bottom > p {
	font-size: 12px;
	line-height: 32px;
	white-space: nowrap;
}

footer > .container > .grid > .rightside {
	display: flex;
	flex-direction: row;
	gap: 20px;
	justify-self: end;
	margin-right: 100px;
}

footer > .container > .grid > div:nth-last-child(1) > h4 {
	margin-top: -70px;
}

.footer-text {
	margin-top: -15px;
}

footer .footer-links {
    text-decoration: underline;
    cursor: pointer;
        font-size: 12px;
}

footer .footer-links a {
    text-decoration: underline;
}

footer .footer-socials {
    text-decoration: none;
    cursor: pointer;
    gap: 20px;
    display: grid;
    grid-template-columns: 25px 25px 25px 25px;
}

footer .footer-socials .footer-svg{
    height: 25px;
    transform: scale(7.5);
    display: flex;
    position: relative;
    top: -11.5vh;
    right: 2vw;
}

footer .wrapper {
	display: flex;
    justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}

footer .wrapper > div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

footer .wrapper div.legal {
	width: 100%;
}

footer .leftside {
    display: flex;
    flex-direction: row;
    gap: 4rem;
}

footer .grid .rightside .koplink div:first-of-type {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    column-gap: 5px;
    row-gap: 5px;
    margin-right: 20px;
}

footer .footer-socials a span i {
    font-size: 24px;
    margin-right: 10px;
}

footer .bottom div:first-of-type {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

#bodyImage > footer > div > div.bottom > div {
    justify-content: end;
}

#chevronIcon {
    margin-left: 10px;
}

.linnks-container, #linksContainer {
    flex-direction: row;
    column-gap: 15px;
    position: absolute;
    justify-content: center;
    flex-wrap: wrap;
}
/* ---------- lipstick ---------- */

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1600px) {

    footer .leftside {
        flex-direction: column;
        gap: 1rem;
    }
}

@media screen and (max-width: 1370px)
 {
     transform: scale(6.5);
 }

@media screen and (max-width: 1213px) and (min-width: 1180px) {
    footer .bottom {
        grid-template-columns: 45% 55%;
    }
}

@media screen and (max-width: 1199px) {

    footer .grid .rightside .koplink div:first-of-type {
        column-gap: 50px;
        grid-template-columns: 1fr 1fr;
    }

    footer > .container > .grid > .rightside {
        justify-content: left;
    }

    footer .leftside {
        flex-direction: column;
        gap: 1rem;
    }
}

@media screen and (max-width: 1180px) {
    footer .bottom {
	grid-template-columns: 40% 60%;
    }

    footer > .container > .grid > .rightside {
        justify-self: left;
    }

    footer .leftside {
        gap: 1rem;
        flex-direction: column;
    }

    footer .footer-socials .footer-svg {
        transform: scale(5.5);
        right: 4vw;
    }
}

@media screen and (max-width: 1024px) {

    footer {
        -webkit-clip-path: polygon(0 0, 100% 25%, 100% 100%, 0% 100%);
        clip-path: polygon(0 0, 100% 12%, 100% 100%, 0% 100%);
        height: 500px;
        padding-top: 0;
    }

    div.page.vip-workshop:has(#form-giftcard) .media figure:nth-of-type(2) img {
        transform: scale(0.9) translateY(-50px);
    }

    footer .footer-svg {
        display: none !important;
    }

    footer > .container {
        max-width: 100%;
        justify-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .grid, .bottom {
        margin: 0;
    }

    footer > .container > img {
        width: 250px;
    }

    footer > .container .grid {
        display: flex;
        flex-direction: column;
    }

    footer .leftside {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    footer > .container .bottom {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        padding-top: 30px;
    }

    footer > .container .bottom p {
        order: 2;
    }

    footer .bottom div:first-of-type {
        width: 100%;
    }

    footer > .container .bottom ul:nth-child(1) {
        order: 2;
        text-align: center;
        display: flex;
        flex-direction: column;
        margin-bottom: -30px;
    }

    footer > .container .bottom ul:nth-child(2) {
        order: 1;
        align-self: center;
    }

    footer .bottom div:first-of-type {
        flex-direction: column;
    }

    footer .footer-socials a span i {
        font-size: 36px;
        margin: 0 10px;
    }

}

@media screen and (max-width: 1023px) {
	footer .container {
		grid-template-columns: 1fr;
	}

	footer .container .calltoaction,
	footer .container .columns {
		grid-column: 1;
	}

	footer > .container > .grid {
		display: grid;
		grid-template-columns: var(--grid-12);
		align-items: center;
		gap: var(--offset);
	}

	footer > .container > .grid > div:nth-last-child(1) {
		display: none;
	}

	footer::before {
		content: "";
		width: 100%;
		height: 100%;
/*		background-image: url(/e2/site/roofvogelboerderij/content/site/image/footer_mobile.png);*/
		position: absolute;
		overflow: hidden;
		left: 0;
		background-repeat: no-repeat;
		background-size: cover;
	}

	footer:after {
    content: "";
    display: block;
    background:unset;
    height: 450px;
    width: 8000px;
    position: absolute;
    z-index: 1;
    bottom: 40%;
    left: 50%;
    margin-left: -2000px;
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg);
}

	.bottom {
		padding-top: 60px;
		flex-direction: column;
		justify-content: center;
		text-align: left;

	}

	.bottom > ul {
		gap: 12px;
	}

	footer .wrapper {
		flex-direction: column;
		align-items: flex-start;
	}

	footer .wrapper > div:first-child {
		flex-direction: column;
		align-items: flex-start;
	}

	footer div:first-child a + span,
	div:first-child span + a,
	footer div.legal a + a  {
		margin-left: 0;
	}

	footer .wrapper > div span {
		display: none;
	}

	footer .wrapper div.legal {
		flex-direction: column;
		align-items: flex-start;
	}
}

/*Tablet*/
@media (max-width:801px) {
    footer .bottom div:first-of-type {
        width: 90%;
    }

    footer {
        height: 550px;
    }

    footer .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 50px;
    }

    footer > div > div.bottom > div {
        display: flex;
        flex-direction: column-reverse;
        align-items: self-end;
    }

    #bodyImage > footer > div > div.bottom > p {
        margin: 0px;
    }

    footer .bottom {
        align-items: center;
        padding-top: 25px;
    }

    footer > .container > img {
        width: 50vw;
    }

    footer .footer-svg {
        right: 2%;
        display: none !important;
    }

    .links-container, #linksContainer {
        padding: unset;

    }
}

@media screen and (max-width: 380px) {
    footer {
        height: 70vh;
    }
}


@media (min-width: 480px) and (max-width: 940px) and (max-height: 500px) {
	footer > .container > .grid {
		display: grid;
		grid-template-columns: var(--grid-6) var(--grid-6);
		align-items: center;
		gap: var(--offset);
	}
}

.grid, .bottom {
	display: grid;
	justify-content: center;
	align-items: center;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-flow: row;
	column-gap: var(--offset);
	margin-left: auto;
	margin-right: auto;
}

.grid .grid-content {
	grid-column: 1 / 12;
}

.grid .grid-content[data-size="large"] {
	grid-column: 3 / 11;
}

.grid-content[data-size="half"] {
	grid-column: 4 / 10;
}


*,
*:before,
*:after {
	box-sizing: border-box;
}

body {
	background: #FFF;
	overflow-x: hidden;
}

main > section {
	/* padding-bottom: 50px; */
}

.wrapper {
    width: 90vw;
	margin-left: auto;
	margin-right: auto;
}

/* Mobile */
/* @media screen and (max-width: 1023px) {
	.wrapper {
		width: calc(100% - 30px);
	}
} */

header#main .navigation-overlay {
	display: none;
	position: fixed; 
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100vh;
	background: #ed5c24;
	color: #FFF;
	z-index: var(--z-index-navigation);
	transition: opacity 1s;
	opacity: 0;
	overflow: hidden;
	--column-width: 326px;
}

header#main .navigation-overlay .container-inner {

	width: 100%;
	height: 95vh;
	overflow-y: auto;
}

header#main .navigation-overlay .wrapper {
	display: flex; 
	align-items: stretch;
	justify-content: space-between;
	flex-direction: row;
	width: var(--base);
}

header#main .navigation-overlay .wrapper .columns {
	display: flex; 
	align-items: stretch;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
	width: calc((var(--column-width) * 2) + var(--offset));
}

header#main .navigation-overlay .wrapper .image {
	width: var(--column-width);
	min-height: 326px;
}

header#main .navigation-overlay[data-state="inactive"] 
{
	display: none;
}

header#main .navigation-overlay[data-state="active"] {
	display: block;
	animation: navigation-in .3s forwards;
}

header#main .navigation-overlay {
	padding: 25px  0;
}

header#main .navigation-overlay .wrapper .columns > .column {
	margin-left: var(--offset); 
	margin-top: var(--offset);
	width: var(--column-width); 
	display: flex;
	flex-direction: column;
}

header#main .navigation-overlay .wrapper .columns > .column:nth-child(2n+1) { margin-left: 0; }

header#main .navigation-overlay h3 {
	font-size: 24px;
	margin-bottom: calc(var(--offset) / 3); 
}

header#main .navigation-overlay a {
	color: #fff; 
	text-decoration: none;
}

header#main .navigation-overlay a[href="#close"] {
	position: absolute;
	right: var(--offset);
	top: var(--offset);
	color: #FFF;
	font-size: 40px;
}

header#main .navigation-overlay[data-color="red"] {
	color: #FFF;
	background: #ed5c24;
}

header#main .navigation-overlay[data-color="blue"] {
	color: #FFF;
	background: #266bae;
}

header#main .navigation-overlay[data-color="pink"] {
	color: #FFF;
	background: #b792c5;
}

[data-interactive="1"] header#main .navigation-overlay,
[data-interactive="1"] header#main .navigation-overlay[data-state="inactive"]  {
	display: block;
	position: relative; 
	opacity: 1;
	width: auto;
	min-height: auto;
	padding: 0 25px;
}

[data-interactive="1"] header#main .navigation-overlay a[href="#close"] {
	display: none;
} 

[data-interactive="1"] header#main .navigation-overlay .wrapper {
	display: block;
	width: auto;
}

[data-interactive="1"] header#main .navigation-overlay .wrapper h3 {
	margin-bottom: 0;
}

[data-interactive="1"] header#main .navigation-overlay .container-inner {
	height: auto;
}
[data-interactive="1"] header#main nav .container .item,
[data-interactive="1"] header#main .navigation-overlay .wrapper .columns .column {
	margin-left: 0;
	width: 100%;
}

@keyframes navigation-in {
	0% { opacity: 0; }
	100% { opacity: 1; }
}


/* Mobile */
@media screen and (max-width: 1023px) {
	header#main .navigation-overlay .wrapper {
		display: flex; 
		align-items: center;
		flex-direction:column;
		justify-content: flex-start;
		flex-wrap: nowrap;
		width: calc(100% - 30px);
	}

	header#main .navigation-overlay .wrapper .columns {
		width: 100%;
	}

	header#main .navigation-overlay .wrapper .columns .column {
		width: 100%;
		margin-left: 0; 
	}

	header#main .navigation-overlay .wrapper .image {
		margin-top: var(--offset);
	}
}

header#main nav .container {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
}

header#main nav .container .item {
	margin-top: calc(var(--offset) / 2);
/* 	margin-left: var(--offset); */
	/* min-width: calc((100% - (var(--offset) * 3)) / 4); */
}

header#main nav .container .item:nth-child(4n+1) {
	margin-left: 0; 
}

header#main nav .container .item > a {
	font-size: 18px;
	line-height: 18px;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 700;
	color: var(--color-text); 
}

header#main nav .container .item > a span {
	display: block;
	font-size: 14px;
}

header#main nav .container .item > a:hover {
	color: #666;
}

header#main nav .container .overlay {
	display: none;
}

[data-interactive="1"] header#main nav .container {
	flex-direction: column;
}


/* Mobile */
@media screen and (max-width: 1023px) {
	header#main nav .container {
		flex-direction: column;
	}

	header#main nav .container .item {
		margin-left: 0; 
		margin-top: 10px;
	}

	header#main nav .container .item:first-child {
		margin-top: var(--offset);
	}
}
header#main .language {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	position: relative;
}

header#main .language ul {
	position: absolute;
	margin-top: -100px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

header#main .language ul li {
	font-size: 18px;
	font-weight: 700;

}

header#main .language ul li + li {
	margin-left: 10px; 
}

header#main .language ul li a {
	text-transform: uppercase;
	font-size: 12px;
	opacity: .5;
}

header#main .language ul li.active a {
	font-size: 18px;
	opacity: 1;
}

header#main .language ul li a:hover {
	opacity: 1;
}

/* Mobile */
@media screen and (max-width: 1023px) {
	header#main .language {
		justify-content: center;
	}

	header#main .language ul {
		position: relative;
		margin-top: 0; 
	}
}

header#main {
	padding: 25px 0;
}

header#main .wrapper {
	display: flex; 
	flex-direction: column;
	justify-content: space-between;
}

header#main figure {
	width: 100%;
	text-align: center;
}

/* Mobile */
@media screen and (max-width: 1023px) {
	header#main .wrapper .language {
		order: 1;
	}
	
	header#main .wrapper figure {
		order: 2;
	}
	
	header#main .wrapper nav {
		order: 3;
	}
}
div.page.book .wrapper {
	flex-direction: column;
	align-items: center;
}

div.page.book .text + figure {
	margin-top: var(--offset); 
}

div.page.book .text + figure img {
	max-width: 100%;
}

div.page.book .books-container {
	display: none;
}

[data-interactive="1"] div.page.book .books-container {
	display: block;
}

/* --------------- overlay --------------- */

div.books {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--offset); 
	max-width: var(--base);
}

div.books .book figure {
	text-align: center;
	height: 300px;
}

div.books .book article {
	margin-top: var(--offset-small);
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	text-align: center;
	min-height: 150px;
}

div.books .book article a {
	margin-top: auto;
}

div.books .book img {
	max-width: 100%;
	max-height: 100%;
}

/* Mobile */
@media screen and (max-width: 1023px) {
	div.books {
		max-width: 90%;
	}
}
/* ---------- layout---------- */

div.page.vlogs {
	--size: calc((var(--column) * 3) + (var(--offset) * 2));
}

div.page.vlogs .wrapper {
	display: grid; 
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	gap: var(--offset);
}

/* div.page.vlogs .wrapper .container {
	display: grid; 
	grid-template-columns: repeat(auto-fill, minmax(var(--size), 1fr));
	gap: var(--offset);
} */

div.page.vlogs .item {
	display: grid; 
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	gap: 15px;
	max-width: 703px;
}


/* ---------- lipstick ---------- */

div.page.vlogs .item .image {
	background-position: 50%; 
	background-size: cover;
	height: 395px;
	background-color: black;
	display: grid; 
	align-items: center;
	justify-content: center;

}

div.page.vlogs .item .image a {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--color-text);
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	transition: all .3s;
}

div.page.vlogs .item .image a:before {
	color: var(--color-secondary); 
	font-family: "Font Awesome 5 Pro";
	content: "\f04b";
	font-size: 30px;
	font-weight: 700;
}

div.page.vlogs .item .image a:hover {
	transform: scale(1.2); 
}

div.page.vlogs .item h2 {
	font-size: 18px;
	line-height: 24px;
	margin: 0;
}

/* ---------- media query ---------- */

/* Mobile */
@media screen and (max-width: 1023px) {
	div.page.vlogs {
		--size: 250px;
	}

	div.page.vlogs .item .image {
		height: 250px;
	}
}

@media screen and (min-width: 2100px) {
    div.page {
        padding: 250px 0 250px 0 !important;
    }
}

div.page {
	/* padding: 250px 0 250px 0; */
}

div.page.vip-workshop {
	padding: var(--offset) 0 0 0;
}


.one-block .wrapper {
    justify-content: center !important;
}

div.page .wrapper {
	display: flex;
	align-items: flex-start;
	justify-content: unset;
}

div.page .wrapper > article.text {
	width: calc((var(--column) * 8) + (var(--offset) * 7));
	margin: 0 5%;
}

div.page .wrapper > aside {
	width: calc((var(--column) * 4) + (var(--offset) * 3));
}

article.text {
    text-align: center;

    a:hover {
    	text-decoration: underline;
    }
}

article.text h2 span {
    color: var(--color-primary);
    line-height: 1.5;
}



article.text p + p {
    margin-top: 0px;
}

article.text .big-text p, .big-text p{
  font-size: 18px !important;
  line-height: 26px !important;
  font-weight: 500 !important;
}

/* Mobile */
@media screen and (max-width: 1023px) {
	div.page .wrapper {
		flex-direction: column;
	}

	div.page .wrapper > article.text,
	div.page .wrapper > aside {
		width: 100%;
	}

	div.page .wrapper > aside {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	section.video .wrapper-video {
	display: flex;
	flex-direction: column;
	}
}

@media screen and (max-width: 500px) {
            article.text .big-text p, .big-text p{
        font-size: 14px;
        line-height: 22px;
        font-weight: 500;
    }
}

div.text-static {
	padding-top: var(--offset);
}

div.text-static.hidden {
	display: none;
}

div.text-static .wrapper > article.text {
	width: calc((var(--column) * 8) + (var(--offset) * 7));
}

/* Mobile */
@media screen and (max-width: 1023px) {
	div.text-static .wrapper > article.text {
		width: 100%;
	}
}
.text .price { margin-top: var(--offset); display: flex; justify-content: flex-start; align-items: stretch; font-weight: 700; }
.text .price div { padding: 10px; font-size: 18px; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--color-border); border-right: 0; }
.text .price div + div { border-left: 1px solid var(--color-border); }
.text .price div span { font-size: 14px; }
.text .price a { display: flex; justify-content: center; align-items: center; color: #fff; padding: 10px 20px; background: var(--color-secondary); text-transform: uppercase; border-left: 1px solid #fff; text-decoration: none; }

/* Mobile */
@media screen and (max-width: 1023px) {
	.text .price {
		flex-wrap: wrap;
	}
	.text .price > div:nth-child(3) {
		border-right: 1px solid var(--color-border);
	}
}
div.program div.times {
	border: 1px solid var(--color-border);
	padding: calc(var(--offset) / 2);
}

div.program div.times > div {
	display: flex;
	justify-content: space-between;
}

div.program div.times > div + div {
	margin-top: 10px;
}

div.program div.times > div > div:nth-child(1) {
	width: 150px;
	font-weight: 400;
}

div.program div.times > div > div:nth-child(2) {
	width: calc(100% - 170px);
}

div.program div.times h3 { font-weight: 400; }

div.program div.times + .attention {
	margin-top: var(--offset);
}

/* Mobile */
@media screen and (max-width: 1023px) {
	div.program div.times > div {
		flex-direction: column;
	}
	div.program div.times > div > div:nth-child(1),
	div.program div.times > div > div:nth-child(2) {
		width: 100%;
	}

	div.program div.times > div > div:nth-child(1) {
		font-weight: 700;
	}
}
.text .program-links { display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; margin-top: var(--offset); border: 1px solid #ddd; }
.text .program-links div { width: calc((100% / 2)); }
.text .program-links div:nth-child(odd) { border-right: 1px solid var(--color-border); }
.text .program-links div:nth-child(n+3) { border-top: 1px solid  var(--color-border); }
.text .program-links div a { color: var(--color-text); font-size: 14px; font-weight: 700; text-transform: uppercase; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; padding: 40px 30px; text-decoration: none;}
.text .program-links div:hover { background: rgba(209,209,209,.2); }
.text .program-links div a > i {font-size: 60px; color: var(--color-text); margin-bottom: 10px; }
.text .program-links div a span i {font-size: 18px; color: var(--color-primary); }
.text .partners {  }
.text .partners .container { display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; margin-top: 24px; }
.text .partners .container .item { width: calc(50% - 15px); padding: 15px; border: 1px solid var(--color-border); }
.text .partners .container .item[data-size="large"] { width: 100%; }
.text .partners .container .item figure  { width: 100%; }
.text .partners .container .item figure a { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; }
.text .partners .container .item img { max-width: 100%; max-height: 100%; height: 100px; transition: all .2s; }
.text .partners .container .item[data-size="large"] img { max-width: 100%; max-height: 100%; height: auto; }
.text .partners .container .item img:hover { transform: scale(.9); }
.text .partners .container .item[data-size="large"] img:hover { transform: scale(.95); }
.text .partners .container .item strong { color: var(--color-text); }
.text .partners .container .item:nth-child(n+3) { margin-top: 24px; }

*[data-text-align="center"] {
    text-align: center;
}
*[data-text-align=""]{
	text-align: inherit;
}

*[data-text-align="left"] {
    text-align: left;
}

*[data-text-align="right"] {
    text-align: right;
}

/* .text > * + * {
	margin-top: var(--line-height);
} */

.text h3 {

}

/*
.text > p + ul {
	margin-top: 0;
}
 */
.text ul {}
.text ul li {
	padding-left: 30px;
}

.text ul li:before {
	font-family: "Font Awesome 6 Pro";
	content: "\f00c";
	color: var(--color-green);
	position: absolute;
	margin-left: -30px;
	font-weight: 600;
}

.text ol li {
	padding-bottom: 5px;
}

.text ol {
	padding-left: 30px;
}

.text ol li:before {
	font-family: "Font Awesome 6 Pro";
	content: "\f111";
	color: var(--color-orange);
	position: absolute;
	margin-left: -30px;
	font-weight: 600;
}

.text .text-column {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.text .text-column div {
	width: calc((100% - (var(--offset) * 1)) / 2);
	margin-top: 0;
}

@media screen and (max-width: 1023px) {
	.text .text-column {
		display: block;
		justify-content: space-between;
		align-items: flex-start;

		div {
			width: 100%;
		}
	}
}
.button {
	position:relative;
	display: inline-grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	padding: 6px 30px;
	border-radius: 30px;
	z-index: 100;
	color: var(--color-black);
	background: var(--color-orange);
	text-transform: uppercase;
	--size: 56px;
	--line-height: 33px;
	--padding: calc((var(--size) - var(--line-height)) / 2) var(--offset-small);
}

#scroll-to-button {
	border: none;
}

.button .pattern:before {
	--overlap: 10px;
}

.button[data-size="small"] {
	--size: 44px;
}

.button span {
	font-family: 'Montserrat', sans-serif;;
	padding: 10px;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
	cursor: pointer;
	align-items: center;
}

button {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
}

.workshop-button {
    padding: 6px 25px;
    background-color: var(--color-orange);
    border-radius: 2px;
    line-height: 18px;
    font-size: 16px;
    text-transform: uppercase;
}

.tel-button {
	color: white;
	font-size: 16px;
}

.tel-button > i {
	color: var(--color-secondary);
	margin-right: 5px;
}
.button > div {
	min-height: var(--size);
}

.button > div:first-child {
	grid-column: 1;
	grid-row: 1;
	z-index: 50;
}

.button:disabled {
	pointer-events: none;
    opacity: .4;
}

.button[data-size="small"] {
	font-size: 12px;
	min-width:auto;
}

.button:hover div:last-child {
	color: white;
	background: var(--color-black);
}

.button[data-color="primary"] {
	color: var(--color-black);
	background-color: var(--color-primary);
	i {
		color: #fff;
	}
}

/*.button[data-color="secondary"] {
	background-color: var(--color-secondary);
	color: var(--color-dark);
}*/

.button[data-color="black"]:hover {
	background-color: white;
	color: var(--color-black);
}

.header-button {
	color: white;
	padding: 4px 25px;
}

.button[data-color="secondary"]:hover {
	background-color: var(--color-primary);
	color: var(--color-white);
}


.button[data-color="primary"]:hover {
	background-color: var(--color-primary);
	color: white;
}

.button.active[data-color="primary"] {
	background-color: var(--color-primary);
	color: white;
}

.workshop-button:hover {
	background-color: var(--color-black);
	color: var(--color-primary);
}

div.page.vip-workshop .intern-link-button {
    justify-self: left;
    margin: 25px 0;
}

@media screen and (max-width: 1439px) {
	.button {
		--size: 40px;
	}
}

@media screen and (max-width: 1024px) {
    .button span {
	padding: 6px;
    }
}

/*Tablet*/
@media (min-width:801px) {
    .button span {
    	font-size: 13px;
    }
}

@media screen and (max-width: 766px) {
	.button {
		padding: 10px 20px !important;
		text-align: center;
		border-radius: 30px;
		font-size: 16px;
		font-weight: 500;
	}
}

.media figure {
	position: relative;
	display: flex; 
	align-items: flex-start;
	justify-content: center;
}


.media figure img,
div.figure .container img { 
	max-width: 100%;
}

/* --------------- container --------------- */

div.figure {
	--two-images: calc((100% - var(--offset-small) * 1) / 2);
	--three-images: calc((100% - var(--offset-small) * 2) / 3);
	--four-images: calc((100% - var(--offset-small) * 3) / 4);
}

div.figure .container {	
	display: grid; 
	grid-template-columns: repeat(auto-fill, minmax(var(--two-images), 1fr));
	gap: var(--offset-small); 
}


div.figure .container > div {
	background-size: cover;
	background-position: 50%;
}

div.figure .container[data-size="3"] {	
	grid-template-columns: repeat(auto-fill, minmax(var(--three-images), 1fr));
}

div.figure .container[data-size="4"] {	
	grid-template-columns: repeat(auto-fill, minmax(var(--four-images), 1fr));
}

div.figure .container[data-size="2"] > div {
	height: 225px;
}	

div.figure .container[data-size="3"] > div {
	height: 175px;
}	

div.figure .container[data-size="4"] > div {
	height: 125px;
}	

/* Mobile */
@media screen and (max-width: 1023px) {
	div.figure {
		--two-images: calc((100% - var(--offset-small) * 1) / 2);
		--three-images: var(--two-images);
		--four-images: var(--two-images);
	}

	div.figure .container[data-size="2"] > div, 
	div.figure .container[data-size="3"] > div,
	div.figure .container[data-size="4"] > div {
		height: 175px;
	}
}
input[type="tel"],
input[type="password"],
select,
textarea {
	font-size: 14px;
	line-height: 35px;
	width: 60%;
	background-color: transparent;
	height: 35px;
	background: #fff;
	padding: 0 5px;
	outline: none;
	border: 1px solid #ddd;
}
textarea { min-height: 96px; line-height: 24px;  }

/* Mobile */
@media screen and (max-width: 1023px) {
	input[type="text"],
	input[type="password"],
	select,
	textarea {
		width: 100%;
	}
}

.order .order-overview { margin: var(--offset) 0; background: rgba(0,0,0,.05);  padding: calc(var(--offset) / 2) var(--offset); text-align: center; }
.order .order-overview .title { font-weight: 700; }
.order .order-overview .products div { display: flex; justify-content: space-between; align-items: flex-start; }
.order .order-overview .products > div:last-child div:last-child { font-weight: 700; }

/* Mobile */
@media screen and (max-width: 1023px) {
	.order .order-overview { padding: 10px; }
	.order .order-overview .products > div { 
		flex-wrap: wrap;
	}
}

form { width: 100%; }
.form { padding: var(--offset); gap: 40px;}
.form .fields { width: 100%; text-align: left; align-content: flex-start; margin-top: 50px;}
.form .fields + .fields { margin-top: var(--offset); }
.form .fields .row { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; gap: 15px; }
.form .fields .row + .row,
.form .fields .row + *,
.form .fields .options-container  { margin-top: calc(var(--offset) /2); }
.form .fields .options-container h4 { font-weight: 700; display: block; }
.form .fields .options-container .row.checkbox { align-items:center; }

.form .fields .options-container { background: rgba(0,0,0,.05); padding: calc(var(--offset) / 2); }
.form .fields .options-container .row { width: 100%; }
.form .fields .options-container .row div { width: calc(100% - 15px); }

.form .fields .row div:last-child { width: 100%; }
.form .fields .row.action  { justify-content: flex-end; margin-right: 4rem;}
.form .fields .row.inactive { display: none; }
.form .fields .row.notice {  display: none; }
.form .fields .row.notice div { width: 100%; padding: 10px; background: rgba(255,255,255,.2); font-size: 14px; line-height: 18px; }
.form .fields .row.inactive + .row.notice { display: flex; }
.form .fields .row div label { font-weight: 700;}
.form .fields .row.checkbox div:last-child label { font-weight: normal;  padding-left: 20px; display: inline-block; }
.form .fields .row.checkbox div:last-child label + label { margin-left: 10px; }
.form .fields .row.checkbox div:last-child label > input { display: none; }
.form input[type="text"],
.form input[type="tel"],
.form select { width: 100%; }

#form-workshop input[type="text"] {}

#purchase_submit {
    display: flex;
    flex-direction: row;
    min-width: 230px;
    padding: 10px 35px;
    justify-content: center;
    text-transform: uppercase;
    margin: 5px 0 0 5px;
    border: none;
}

#purchase_submit i {
    color: #fff;
    font-size: 15px;
    padding-left: 5px;
}

.form .fields + .fields {
    margin: unset;
}


.fields input[type="text"],
.fields input[type="tel"],
.fields input[type="email"],
.fields input[type="number"],
.fields select {
    width: 100%;
    padding: 10px 10px 10px 40px;
    border: 1px solid var(--color-orange);
    border-radius: 20px;
    font-size: 16px;
    color: #333333;
    outline: none;
    transition: border-color 0.3s ease;
    min-height: 42px;
    max-height: 42px;
}

.fields textarea {
    width: 100%;
    padding: 10px 10px 10px 40px;
    border: 1px solid var(--color-orange);
    border-radius: 20px;
    font-size: 16px;
    color: #333333;
    outline: none;
    transition: border-color 0.3s ease;
}

.fields input[type="text"]:focus,
.fields input[type="tel"]:focus,
.fields input[type="email"]:focus,
.fields input[type="number"]:focus,
.fields select:focus,
.fields textarea:focus {
    border-color: #D4742A;
}

.fields textarea {
    resize: none;
    height: 100px;
}

.fields label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333333;
}

.input-container, .input-container-textarea {
    position: relative;
    width: 100%;
}

.input-container i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: black;
    font-size: 18px;
}

.input-container-textarea i {
    position: absolute;
    left: 10px;
    top: 25px;
    transform: translateY(-50%);
    color: black;
    font-size: 18px;
}

.fields input[type="text"]:focus {
    border-color: #D4742A;
}

::placeholder {
    color: black;
    opacity: 1;
    font-family: Montserrat;
}

#purchase_date, #purchase_date option {
    font-family: Montserrat;
}

#form-newsletter .form {
    padding: var(--offset) 0;
    gap: 20px;
    grid-template-columns: 1fr;
}

form#form-giftcard {
    justify-content: center;
}

/*[data-page-code="vip-workshop"] form#form-workshop .row .input-container#alternative_date {
    display: none !important;
}*/


/* Mobile */
@media screen and (max-width: 1023px) {
	.form .fields .row {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.form .fields {
	margin-top: 10px;
	}

	.form .fields .row.action  {
	margin-right: unset;
	}

	.mobile-input-container {
  position: relative;
  width: 85vw; /* Matches your style */
}

input[type="date"] {
  width: 100%;
  font-size: 18px; /* Slightly larger for touch screens */
  border: 1px solid #ddd;
  border-radius: 25px;
  background-color: #f9f9f9;
  color: #333;
  padding: 14px 18px; /* Spacing for touch-friendly fields */
  box-sizing: border-box; /* Prevent overflow */
  font-family: Montserrat, sans-serif;
  outline: none;
  appearance: none; /* Ensures consistent styling across browsers */
}

input[type="date"]:focus {
  border-color: #aaa;
}

label.mobile-placeholder {
  position: absolute;
  top: 50%;
  left: 18px; /* Aligns with input padding */
  transform: translateY(-50%);
  font-size: 16px;
  color: #aaa;
  pointer-events: none;
  transition: 0.3s ease all;
}

input[type="date"]:focus + .mobile-placeholder,
input[type="date"]:valid + .mobile-placeholder {
  top: -10px; /* Moves label above input */
  left: 16px; /* Adjusted for consistency */
  font-size: 14px;
  color: #666;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  color: transparent;
  opacity: 0; /* Hide the default calendar icon for better customization */
}

#alternative_date > label {
    width: 100%;
    height: 50px;
    text-align: center;
}

	#purchase_submit {
	width: 100%;
	}

	.form .fields .row div:first-child,
	.form .fields .row div:last-child { width:100%; }
}

div.attention {
	background: var(--color-text);
	color: #FFF;
	padding: var(--offset);

}

div.attention article.text p{
	font-size: 22px;
	line-height:32px;
}
/*@import "components/trainer/trainer.css";*/
.text .product-overview { margin-top: 24px; }
.text .product-overview .product + .product { margin-top: 24px; border-top: 1px solid #e1e1e1; padding-top: 24px; }
.text .product-overview .product { display: flex; justify-content: flex-start; align-items: center;  }
.text .product-overview .product .date { display: flex; justify-content: center; align-items: center; flex-direction: column; background: #000; border: 1px solid var(--color-border); line-height: 20px; }
.text .product-overview .product .date span:first-child { font-weight: 700; font-size: 24px; padding: 8px 10px;  background: #FFF; }
.text .product-overview .product .date span:last-child { font-weight: 300; font-size:12px; padding: 1px 10px;  color:#FFF;  }
.text .product-overview .product .content { width: calc(100% - 80px); margin-left: 20px; background: none; }
.text .product-overview .product .content a { margin-top: 2px; }
.text .product-overview .product .price { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 80px; margin-top: 0; text-transform: lowercase; line-height: 20px; }
.text .product-overview .product .price span { font-size: 14px; color: #999; }
div.reference {
	margin-top: var(--offset);

}

div.reference .item {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	text-align: center;
	flex-direction: column;
}

div.reference .item article {
	padding: var(--offset-small);
	border: 1px solid var(--color-border);
	max-width: 326px;
}

div.reference .item article p {
	font-family: 'Montserrat', 'Open Sans', sans-serif;
	font-size: 18px;
	font-weight: 700;
}

div.reference .item .fas {
	font-size: 30px;
	position: absolute;
	margin-top: 20px;
	color: var(--color-border);
}

div.reference .swiper-pagination {
	margin-top: 35px;
	position: relative;
}

div.reference .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background: var(--color-secondary);
}

[data-interactive="1"] div.reference .swiper-container { padding: 0 20px; }
[data-interactive="1"] div.reference .swiper-container,
[data-interactive="1"] div.reference .swiper-container .swiper-wrapper { overflow: none; height: auto; display: block;}
[data-interactive="1"] div.reference .swiper-container .swiper-wrapper .swiper-slide { display: block; }
[data-interactive="1"] div.reference .item .fas { display: none; }

/* ---------- vars ---------- */

section.hero.mobile {
    display: none;
}

/* ---------- layout ---------- */
section.hero {
    height: var(--hero-height);
    -webkit-clip-path: polygon(0 0%, 100% 0%, 100% 85%, 0% 100%);
    clip-path: polygon(0 0%, 100% 0%, 100% 85%, 0% 100%);

    h1 .subtitle {
        font-size: 22px;
    }
}

#hero {
    position: relative;
}

.mask-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('/e2/site/roofvogelboerderij/custom/site/upload/image/hero/roofvogelboerderij_home.png') center / cover no-repeat;
    opacity: 1;
    z-index: 1;
}

.container {
    position: relative;
    z-index: 2;
}

section.hero > .container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: var(--offset);
    color: var(--color-white);
    flex-direction: row;
}

section.hero .hero-buttons {
    align-self: center;
    margin-top: 30px;
    cursor: pointer;
}

section.hero h1 {
    color: var(--color-white);
}

section.hero .hero-buttons:hover {
    cursor: pointer;
}

section.hero .fa-chevron-right:before {
    color: white;
}

section.hero > .container > div > p {
    color: white;
    text-align: center;
    margin: 0 10%;
}

section.hero > .container > div {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin-top: 25vh;
}

section.hero > .container > div a {
    min-width: 230px;
}

/*section.hero > .container > div:first-child {
    margin-top: -150px;
    z-index: 200;
}*/

section.hero > .container > div > div {
    display: flex;
    gap: 35px;
    margin: 0 15% 10px;
}

section.hero .intern-link-button {
    width: fit-content;
    text-transform: uppercase;
}

/* ---------- lipstick ---------- */

section.hero .image {
    background-size: cover;
    background-position: 50%;
}

section.hero .content .box article {
    padding: var(--offset);
    background: rgba(49, 47, 45, 0.95);
    color: white;
}

section.hero .content .box .action {
    padding-left: var(--offset);
}

#hero > div.container > div.wow.fadeInUp.animated > h1 {
	color: white;
}

.hero-other > div.container > div.wow.fadeInUp.animated > h1 {
	color: white;
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1630px) {
    /*section.hero > .container > div:first-child {
        margin-top: 170px;
    }*/
}

@media screen and (max-width: 1366px) {
    section.hero > .container {
        grid-template-columns: var(--grid-8) var(--grid-4);
    }
}

@media screen and (max-width: 1180px) {
    /* Base Hero Section Styling */
    section.hero, section.hero.flipped {
        display: none;
        background-size: cover !important;
        --hero-height: 80vh !important;
        margin-bottom: 0 !important;
    }

    /* Mobile Hero Section */
    section.hero.mobile {
        display: block;
        background: url('/e2/site/roofvogelboerderij/content/site/image/loading_header_mobile.webp') center / cover no-repeat;
        background-blend-mode: luminosity;
        position: relative;
        max-height: auto;
        z-index: 1;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
        background: linear-gradient(from top to bottom, black);
        background-position: center !important;
        overflow: hidden;
    }

    section.hero.mobile::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        filter: grayscale(100%);
        z-index: 2;
    }

    section.hero.mobile::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
        z-index: 3;
    }

    section.hero-other.mobile::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
        z-index: 3;
    }

    /* Hero Section Text Styling */
    section.hero.mobile h1 {
        position: relative;
        z-index: 4;
        color: white;
    }

    section.hero > .container > div > p {
        font-size: 18px;
        color: white;
        font-weight: 200;
    }

    /* Container and Layout Adjustments */
    section.hero > .container {
        height: 100%;
        display: grid;
        align-items: center;
        justify-content: center;
        text-align: center;
        z-index: 4;
        grid-template-columns: var(--grid-12);
    }

    section.hero > .container > div {
        padding-left: 0;
        margin-right: 0;
    }

    section.hero > .container > div > div {
        display: flex;
        gap: 20px;
        flex-direction: column;
        align-items: center;
        margin: 0;
    }

    section.hero > .container > div > div > a {
        width: 100%;
    }
    }

    /* Responsive Adjustments */
    @media screen and (min-width: 1024px) and (max-width: 1180px) {
        section.hero.mobile {
            max-height: 650px;
            z-index: 1;
            background-position: center !important;
        }

        section.hero > .container {
            height: 100%;
            display: grid;
            align-items: center;
            justify-content: center;
            text-align: left;
            grid-template-columns: var(--grid-12);
        }

        section.hero > .container > div > div {
            margin: 0 10%;
        }
    }


@media screen and (min-width: 2100px) {
    section.hero {
        background:
        margin-bottom: -200px !important;
    }
}

@media (min-width: 480px) and (max-width: 940px) and (max-height: 500px) {
    section.hero.mobile {
        --hero-height: 140vh !important;
    }
}

@media screen and (max-width: 802px) {
    section.hero.mobile h1 {
        font-size: 1.5rem;
        line-height: 1rem;
        margin: 0 2rem;
    }

    section.hero > .container {
        display: flex;
    }

    section.hero > .container > div > div {
        margin: 0 2rem;
    }

    section.hero > .container > div {
        margin-top: 20vh;
    }
}

@media screen and (max-width: 700px) {
    #hero > div > div > h1 {
        margin-bottom: 25px;
    }

    #hero > div > div > div:nth-child(2) > p {
        display: none;
    }
}

/* ---------- vars ---------- */

section.hero-other.mobile {
    display: none;
}

/* ---------- layout ---------- */
section.hero-other {
    background:
        linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0) 70%),
        url('/e2/site/roofvogelboerderij/content/site/image/loading.png')
        center / cover no-repeat;
    height: 600px;
    -webkit-clip-path: polygon(0 0%, 100% 0%, 100% 85%, 0% 100%);
    clip-path: polygon(0 0%, 100% 0%, 100% 85%, 0% 100%);

    h1 .subtitle {
        font-size: 22px;
    }
}

section.hero-other.small {
    height: 450px;
}

section.hero-other.small > .container > div:first-child {
    margin-top: 160px;
}

section.hero-other.small .mask-overlay {
    top: -420px;
}

section.hero-other > .container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    margin-left: 11%;
    column-gap: var(--offset);
    color: white;
    width: 30vw;
}

section.hero-other h1 {
    color: var(--color-white);
}

section.hero-other h2 {
    color: var(--color-white);
}

section.hero-other + section.block-centered {
    padding-top: 50px;
}

section.hero-other .hero-other-buttons {
    align-self: center;
    margin-top: 30px;
}

section.hero-other .fa-chevron-right:before {
    color: white;
}

section.hero-other > .container > div > p {
    font-size: 16px;
    color: white;
    font-weight: 300;
    text-align: left;
    line-height: 1.5;
}

section.hero-other > .container > div > h1 {
    text-align: left;
    line-height: 1;
}

section.hero-other > .container > div > h1 > span {
    line-height: 32px;
    margin-top: 10px;
}

section.hero-other > .container > div {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20vh;
}


section.hero-other > .container > div:first-child {
    margin-top: 100px;
    z-index: 200;
}

section.hero-other > .container > div > div {
    display: flex;
    gap: 35px;
}

section.hero-other .intern-link-button {
    width: fit-content;
    text-transform: uppercase;
}

/* ---------- lipstick ---------- */

section.hero-other .image {
    background-size: cover;
    background-position: 50%;
}

section.hero-other .content .box article {
    padding: var(--offset);
    background: rgba(49, 47, 45, 0.95);
    color: white;
}

section.hero-other .content .box .action {
    padding-left: var(--offset);
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 600px) {
    #hero-other\.mobile > div {
        grid-template-columns: var(--grid-12);
        margin-left: 0px;
        width: unset;
    }

    footer .landingspage {
        display: none;
    }
}

@media screen and (max-width: 1366px) {
    section.hero-other > .container {
        grid-template-columns: auto;
        justify-content: center;
    }

    section.hero-other > .container > div > h1 {
        text-align: center;
    }

    section.hero-other > .container > div > div {
        align-self: center;
        text-align: center;
    }
}

@media screen and (max-width: 1180px) {
    section.hero-other, section.hero-other.flipped {
        display: none;
        background-size: cover !important;
        --hero-height: 80vh !important;
        margin-bottom: 0px !important;
    }

    section.hero-other.mobile {
        display: block;
        background: url('/e2/site/roofvogelboerderij/content/site/image/loading_header_mobile.webp') center / cover no-repeat;
        background-blend-mode: luminosity;
        position: relative;
        max-height: auto;
        z-index: 1;
        background-position: center !important;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
        background: linear-gradient(from top to bottom, black);
        overflow: hidden;

    }

    section.hero-other.mobile::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 332;
        filter: grayscale(100%);
    }

    section.hero-other.mobile::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
        z-index: 3;
    }

    section.hero-other.mobile h1 {
        position: relative;
        z-index: 111;
    }

    section.hero-other > .container > div > p {
        font-size: 18px;
        color: white;
        font-weight: 200;
    }

    section.hero-other > .container {
        height: 100%;
        display: grid;
        align-items: center;
        justify-content: center;
        text-align: center;
        z-index: 4;
        grid-template-columns: var(--grid-12);
    }

    section.hero-other > .container > div {
        padding-left: 0px;
        margin-right: 0px;
    }

    section.hero-other > .container > div > div {
        display: flex;
        gap: 20px;
        flex-direction: column;
        align-items: center;
    }

    section.hero-other > .container > div > div > a {
        width: 100%;
    }

    section.hero-other > .container > .test {
        position: relative;
        display: none;
        height: 100%;
        width: 100%;
        margin-left: 20%;
        background-position: right top;
    }

    section.hero-other .content .wrapper {
        grid-template-columns: 1fr;
    }

    section.hero-other > .container > div:first-child {
        margin-top: 0px;
    }
}

@media screen and (max-width: 600px) {
    section.hero-other.mobile {
        align-items: center;
        justify-content: center;
        text-align: center;
        z-index: 4;
        grid-template-columns: unset;
    }

    section.hero-other > .container {
        grid-template-columns: var(--grid-10) var(--grid-2);
        align-items: end;
        height: 85%;
    }
}

@media screen and (max-width: 1024px),
screen and (max-height: 700px) {
    section.pilaren-card .container .card-descr {
        grid-template-rows: 60vh;
    }

    section.workshop-card .container .item  .card-descr {
        grid-template-rows: 35vh;
    }

    .button span {
        font-size: 13px;
    }
}



@media screen and (min-width: 1024px) and (max-width: 1180px) {
    section.hero-other.mobile {
        max-height: 650px;
        z-index: 1;
        background-position: center !important;
    }
    section.hero-other > .container {
        height: 85%;
        display: grid;
        align-items: flex-end;
        justify-content: center;
        text-align: left;
        grid-template-columns: var(--grid-6) var(--grid-6);
    }
    section.hero-other > .container > div > div {
        max-width: 250px;
    }

    section.hero-other > .container > div {
        height: 75%;
        justify-content: flex-end;
    }

    section.hero-other.mobile {
        max-height: 85vh;
    }
}


@media screen and (min-width: 2100px) {
    [data-page-code="onze-vogels"] section.hero-other {
        margin-bottom: unset;
    }

    [data-page-code="workshop"] section.hero-other {
        margin-bottom: unset;
    }

    [data-page-code="bedrijf"] section.hero-other {
        margin-bottom: unset;
    }

    section.hero-other {
        margin-bottom: -200px;
    }

}

/* @media (min-width: 480px) and (max-width: 940px) and (max-height: 500px) {
    section.hero-other.mobile {
        --hero-height: 140vh !important;
    }
} */

body {
  /*background-size: cover;*/
  background-repeat: no-repeat;
  background-position: center bottom 350px;
}

#full-width-dropdown-wrks>div>div:nth-child(1)>div.intern-link-button>a>span,
#full-width-dropdown-company>div>div:nth-child(1)>div.intern-link-button>a>span,
#full-width-dropdown-roofvogel>div>div:nth-child(1)>div.intern-link-button>a>span {
  color: white;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
  }

  .modal-content {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 90%;
    height: 200px;
    overflow: hidden;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .modal-header {
    background-color: #f8f8f8;
    padding: 1rem;
    border-bottom: 1px solid #e0e0e0;
  }

  .modal-header h2 {
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 18px;
    color: #333;
  }

  .modal-body {
    padding: 1rem;
  }

  .modal-body p {
    margin: 0 0 1rem 0;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
  }

  .close {
    float: right;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    color: #666;
    background-color: #e0e0e0;
    padding: 5px 10px;
    border-radius: 4px;
  }

  .close:hover {
    background-color: #d0d0d0;
  }

  @media screen and (max-width: 480px) {
    .modal-content {
      width: 95%;
      height: 200px;
    }
  }

    .scroll-content {
        text-align: left;
        padding: 2em 0;
    }

#header>div>nav>div>div>ul.top-header>a {
  margin-right: 5%;
}

section.block-centered>.container {
    height: 100%;
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: var(--grid-2) var(--grid-8) var(--grid-2);
    column-gap: var(--offset);
    color: white;
    text-align: center;
}

section.block-centered h2 {
  color: var(--color-black);
}

section.block-centered span {
  color: var(--color-black);
  line-height: 1.5;
  margin-top: 30px;
}

.btn-div>.button>i {
  color: white;
}

section.block-centered>.container p {
  margin: 25px 2% 30px;
  color: var(--color-black);
}

.workshop-card {
  margin: 0px 0px;
}

section.workshop-card .container {
  justify-content: center;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 0 10%;
  gap: var(--offset);
  grid-row: auto;
  overflow: hidden;
}

section.workshop-card .container .item {
    border-radius: 15px;
    border: 1px solid var(--color-gray);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: transparent;
}

section.workshop-card .container .item .image {
  min-height: 250px;
  background-size: cover;
  background-repeat: no-repeat;
}

section.workshop-card .container .item .image .ribbon-wrapper-red {
  width: 305px;
  height: 218px;
  overflow: hidden;
  position: absolute;
  top: -14px;
  right: -21px;
}

section.workshop-card .container .item .image .ribbon-red {
  font-size: 24px;
  text-align: center;
  text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  position: relative;
  padding: 50px 0 10px 0;
  left: 55px;
  top: 2px;
  width: 390px;
  background-color: #bc0001;
  color: #fff;
}

section.workshop-card .container .item .image .ribbon-red:empty {
  background-color: transparent;
}

section.workshop-card .container .item .image .ribbon-red:before,
section.workshop-card .container .item .image .ribbon-red:after {
  content: "";
  border-top: 3px solid #b90005;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  position: absolute;
  bottom: -3px;
}

section.workshop-card .container .item .image .ribbon-red:before {
  left: 0;
}

section.workshop-card .container .item .image .ribbon-red:after {
  right: 0;
}

section.workshop-card .container .item .card-descr .subtitle {
  text-align: center;
}

section.workshop-card .container .item .info {
  padding: 12px 0;
  text-align: center;
}

section.workshop-card .container .item .info .left {
  width: 67%;
  float: left;
}

section.workshop-card .container .item .info .right {
  width: 33%;
  float: left;
}

section.workshop-card .container .item h3 {
  color: var(--color-primary);
  text-align: center;
  font-size: 22px;
}

section.workshop-card .container .item .subtitle {
  color: #555050;
  font-weight: 600;
  text-align: center;
}

section.workshop-card .container .item .text {
  text-align: center;
}

section.workshop-card .container .item .text p {
  margin-top: 0;
}

section.workshop-card .container .item .btn-div {
  text-align: center;
  margin-top: 30px;
}

section.workshop-card .container .item .btn {
  color: var(--color-black);
  background-color: var(--color-primary);
  border-radius: 30px;
  padding: 13px 30px 13px 30px;
  width: fit-content;
  text-align: center;
  text-transform: uppercase;
}

section.workshop-card .container .item .btn i {
  color: #fff;
}

#main>section.pilaren-card>div>div:nth-child(1)>div.card-descr>div.info>div:nth-child(1)>i {
  color: var(--color-primary);
  padding-right: 5px;
}

section.pilaren-card .item.bird-card .card-descr,
section.pilaren-card .item.team-card .card-descr {
  grid-template-rows: 50px 150px;
}

section.pilaren-card .item {
  display: flex;
  flex-direction: column;
  margin-top: 5px;
}

section.pilaren-card .card-descr {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  padding: 20px;
}

section.pilaren-card .btn-div {
  margin-top: auto;
  text-align: center;
}

section.pilaren-card .btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  /* Adjust this color as needed */
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
}

[data-interactive="1"] section.pilaren-card .container,
[data-interactive="1"] section.workshop-card .container {
  grid-template-columns: 25%;
}


section.pilaren-card .container {
  justify-content: center;
  display: grid;
  grid-template-columns: 25% 25% 25%;
  gap: var(--offset);
  grid-row: auto;
  overflow: hidden;
}

section.pilaren-card .container .item {
  border-radius: 15px;
  border: 1px solid var(--color-gray);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: transparent;
}

section.pilaren-card .container .item .image {
  min-height: 250px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

section.pilaren-card .container .item .ribbon-wrapper-red {
  width: 305px;
  height: 218px;
  overflow: hidden;
  position: absolute;
  top: -14px;
  right: -21px;
}

section.pilaren-card .container .item .ribbon-red {
  font-size: 45px;
  text-align: center;
  text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  position: relative;
  padding: 35px 0 20px 0;
  left: 56px;
  top: 0px;
  width: 390px;
  background-color: #bc0001;
  color: #fff;
}

section.pilaren-card .container .item .ribbon-red:empty {
  background-color: transparent;
}

section.pilaren-card .container .item .ribbon-red:before,
section.pilaren-card .container .item .ribbon-red:after {
  content: "";
  border-top: 3px solid #b90005;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  position: absolute;
  bottom: -3px;
}

section.pilaren-card .container .item .ribbon-red:before {
  left: 0;
}

section.pilaren-card .container .item .ribbon-red:after {
  right: 0;
}

section.pilaren-card .container .item .card-descr {
  padding: 20px;
  display: grid;
  grid-template-rows: 360px;
}

section.pilaren-card .container .item .card-descr .subtitle {
  text-align: center;
}

[data-page-code="home"] section.pilaren-card .container .item .card-descr {
    grid-template-rows: 300px;
}

@media screen and (max-width: 1800px) {
    [data-page-code="home"] section.pilaren-card .container .item .card-descr {
        grid-template-rows: 380px;
    }
}

@media screen and (max-width: 1485px) {
    [data-page-code="home"] section.pilaren-card .container .item .card-descr {
        grid-template-rows: 380px;
    }
}

[data-page-code="bedrijf"] section.pilaren-card .container .item .card-descr {
    grid-template-rows: 220px;
}

[data-page-code="overlastbestrijding"] section.pilaren-card .container .item .card-descr {
    grid-template-rows: 280px;
}

[data-page-code="onze-vogels"] section.pilaren-card .container .item .card-descr {
    grid-template-rows: 50px 100px;
}


section.trapezium div.page {
  padding: 150px 0 100px;
}


section.trapezium {
    padding-bottom: 50px;
}

section.pilaren-card .container .item .info {
  text-align: center;
  font-size: 14px;
}

section.pilaren-card .container .item .info .left {
  width: 67%;
  float: left;
}

section.pilaren-card .container .item .info .right {
  width: 33%;
  float: left;
}

section.pilaren-card .container .item h3 {
  color: var(--color-primary);
  text-align: center;
  font-size: 26px;
  line-height: 36px;
}

section.pilaren-card .container .item .subtitle {
  color: #555050;
  font-weight: 500;
  text-align: center;
}

section.pilaren-card .container .item .text {
  text-align: center;
  min-height: 220px;
}

section.pilaren-card .container .item .text p:nth-child(2) {
  padding: 12px 0px 12px;
}

section.pilaren-card .container .item .btn-div {
  text-align: center;
  margin-top: 15px;
  align-content: flex-end;
}

section.pilaren-card .container .item .btn-div i {
  color: white;
  margin-left: 5px;
}

section.pilaren-card .card-descr .info .center i,
section.workshop-card .card-descr .info .center i {
  color: var(--color-primary);
  padding-right: 5px;
}

section.workshop-card>.container>.item>.card-descr>.btn-div>.button i {
  color: white;
  margin-left: 5px;
}

section.trapezium {
  background-repeat: no-repeat;
  background-size: cover;
  margin: 50px 0px 0px 0px;
  background-position: top;
  background-color: grey;
}

section.trapezium .wrapper {
  margin-right: 10%;
}

#trapezium>div>div>aside>h2 {
  color: white;
  text-align: center;
  margin-bottom: 5px;
}

#trapezium>div>div>aside>h2>span {
  margin-top: 15px;
}

section.trapezium {
  clip-path: polygon(0 0, 100% 15%, 100% 85%, 0% 100%);
  -webkit-clip-path: polygon(0 0, 100% 15%, 100% 85%, 0% 100%);
  align-content: center;
}

section.trapezium div.page {
  padding: 150px 0 50px;
}

@media screen and (min-width: 1702px) {
  section.trapezium div.page {
    padding: 150px 0 150px;
  }

}

@media screen and (max-width: 1023px) {
  section.trapezium div.page {
    padding: 120px 0 140px 0;
  }

  @media screen and (max-width: 767px) {
    section.trapezium div.page {
      padding: 120px 0 120px 0;
    }

    article.text .big-text p,
    .big-text p {
      font-size: 12px;
      line-height: 22px;
    }
  }
}

section.trapezium[data-color="grey"] {
  background: linear-gradient(to bottom, #f0f0f0, transparent);
}

div.page.one-block .review-content .review-box {
  min-height: unset;
}

#trapezium>div>div>aside {
  color: white;
  text-align: center;
}

#trapezium>div>div>aside h2 span {
  color: var(--color-primary);
  line-height: 1.5;
}

#trapezium>div>div>aside p {
  margin-bottom: 25px;
  margin-top: 17px;
}

#trapezium>div>div>aside>div:nth-child(2)>p {
  text-align: center;
}

section.video {
  position: relative;
  background-color: #f0f0f0;
  min-height: 400px;
  align-content: center;
  margin-bottom: 52px;
}

section.video::before {
  content: "";
  position: absolute;
  top: -200px;
  left: 0;
  right: 0;
  height: 200px;
  background-color: #f0f0f0;
  z-index: -1;
}

section.video .wrapper-video {
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: center;
  justify-content: center;
  margin: 0 5% 58px 5%;
}

section.video .wrapper-video h2,
section.video .wrapper-video p {
  text-align: center;
  margin: 0px 0 25px 0;
}

section.video article.text {
  margin-left: 120px;
  margin-right: 120px;
  align-content: center;
  text-align: center;
}

section.video div.page {
  padding: 0px 0;
}

section.video[data-color="grey"] {
  background-color: #f0f0f0;
}

#video>div>div>aside {
  text-align: center;
}

#video>div>div>aside h2 span {
  color: var(--color-primary);
  line-height: 1.5;
}

div.works-info {
  display: grid;
  grid-template-columns: var(--grid-4) var(--grid-4);
  margin-top: 30px;
}

div.works-info i {
  color: var(--color-orange);
  padding-right: 10px;
}

.intern-link-button .button span i {
  color: #fff;
  margin-left: 5px;
}

.review-content {
  position: relative;
  margin: 20px 20px 0 20px;
  min-height: 200px;
}

.review-content .review-text span {
  color: var(--color-orange);
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-content .review-text:before {
  font-family: "Font Awesome 6 Pro";
  content: "\f10d";
  left: 20px;
  top: -10px;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-size: 65px;
  position: relative;
  color: var(--color-primary);
}

div.page.one-block:has(.review-content) h2 span {
  margin-top: 16px;
}

div.page.vip-workshop {
  display: grid;
  grid-template-columns: 45% 45%;
  justify-content: center;
  /* margin: 0 5%; */
}

.page.vip-workshop:has(.agenda-content) {
  margin: 0;
}

.page.vip-workshop:has(.review-content) {
  /* margin-bottom: -100px; */
}

div.page.vip-workshop .works-info {
  text-align: left;
  grid-template-columns: auto auto;
  padding-top: 10px;
}

div.page.vip-workshop .works-info span {
  display: grid;
  grid-template-columns: 80px 200px;
  margin-bottom: 15px;
  align-items: center;
  font-size: 16px;
}

div.page.vip-workshop .wrapper {
  justify-content: center;
}

div.page.vip-workshop .wrapper:has(.newsletter-form) {
  display: flex;
}

div.page.vip-workshop .wrapper>article.text {
  width: 75%;
  padding: 0 0 0 1.5%;
}

article.text a:not(.button) {
  color: var(--color-primary);
}

div.page.vip-workshop .wrapper>article p {
  font-size: 16px;
  font-weight: 400;
}

div.page.vip-workshop>div>article>div>div>span>i {
  font-size: 32px;
  justify-self: center;
}

div.page.vip-workshop .wrapper p,
div.page.vip-workshop .wrapper ul {
  text-align: left;
}

div.page.vip-workshop .media {
  width: 50%;
  /* padding: 0 0 0 5%; */
}

div.page.vip-workshop .media figure:nth-of-type(1) img {
  border: 5px solid #eff0f0;
  border-radius: 40px;
  transform: scale(1.4) translateX(50px) translateY(-100px);
  z-index: 2;
}

div.page.vip-workshop .media figure:nth-of-type(2) img {
  transform: scale(2) translateY(60px);
  border-radius: 25px;
}

div.page.vip-workshop .review-content {
  margin-top: 35vh;
  position: relative;
}

div.page.one-block:has(div.review-content) {
  margin-top: 50px;
}

div.page.vip-workshop .review-content .regular {
  margin-left: 10%;
  position: relative;
}

div.page .review-content .item {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

div.page .review-content .item.active {
  opacity: 1;
  position: relative;
}

div.page .review-content .review-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 20vh;
}

div.page.one-block .review-content .review-box div:first-of-type {
  display: flex;
  flex-direction: row;
  align-self: center;
  text-align: center;
}

div.page.one-block .review-content .review-box .rating-box .rating-number {
  margin: 0px;
}

div.page.one-block .review-content .review-box .rating-box {
  margin-top: 10px;
}

div.page .review-content span:nth-of-type(2) {
  color: var(--color-primary);
  font-size: 18px;
  font-weight: 500;
  display: flex;
  height: 100%;
  margin-bottom: 10px;
}

div.page .review-content .rating-box span {
  color: var(--color-primary);
  font-size: 28px;
  line-height: 30px;
  font-weight: 600;
  display: flex;
  flex-direction: row;
  margin-right: 5px;
  place-self: center;
  margin-bottom: unset;

}

div.page.vip-workshop .wrapper p.rating-number {
  text-align: center;
}

div.page.vip-workshop .review-text:before {
  left: -60px;
}

div.page .review-content span span.rating {
  margin-left: 15px;
}

div.page .review-content span i {
  color: #FFD700;
}

div.page .wrapper:has(#form-workshop) {
  width: 100%;
  display: grid;
  align-items: flex-start;
  justify-content: unset;
  margin: unset;
}

div.page .wrapper>article.text:has(#form-workshop) {
  width: 90%;
  justify-self: center;
  padding: 0 6%;
  text-align: left;
}

div.page .wrapper>article.text>.order>article.text h2,
div.page .wrapper>article.text>.order>article.text p {
  text-align: left;
  margin-left: 50px;
}

div.page .wrapper>article.text>.order>article.text h2,
div.page .wrapper>article.text>.order>article.text p:has(.newsletter-form) {
  text-align: left;
  margin-right: 20%;
  margin-left: unset;
}

#form-newsletter .fields .row.action {
  justify-content: flex-start;
  margin-right: 4rem;
}


#form-newsletter .form .fields {
  width: 550px;
}

.form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.cadeau-tip-blok {
  position: relative;
  height: 500px;
  z-index: 1;
}

.cadeau-tip-blok:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 200px;
  z-index: 0;
}

.cadeau-tip-blok .wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  /* margin-top: 50px; */
}

.cadeau-tip-blok .wrapper .text {
  margin: 0 20%;
}

.cadeau-tip-blok .wrapper img {
    max-width: 75%;
  max-height: 450px;
  border-radius: 40px;
}

[data-page-code="workshop"] .cadeau-tip-blok {
    margin-top: 100px;
}

[data-page-code="teambuilding"] section.trapezium {
    margin-bottom: unset;
}

.button:hover {
  color: white;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.9),
      rgba(0, 0, 0, 0.8),
      rgba(0, 0, 0, 0.7));
  cursor: pointer;
}

.page.wone-block {
  margin: 5% 0 0 0;
}


.page.one-block .wrapper {
  align-items: center;
  display: flex;
}

.page.one-block .wrapper:has(.review-content) {
  justify-content: center;
}

.page.one-block .review-box span {
  color: var(--color-black);
}

.page.one-block .review-box span:nth-of-type(1) {
  color: var(--color-black);
}


div.workshop-form article h2 {
  font-size: 35px;
  line-height: 35px;
}

div.page .wrapper>article.text>.order.workshop-form>article.text h2,
div.page .wrapper>article.text>.order.workshop-form>article.text p {
  text-align: left;
  margin-left: 5px;
}

div.workshop-form .form {
  padding: 0px 7px;
}

div.workshop-form .form.no-agenda .fields {
  margin-top: 0;
}

div.workshop-form .form.no-agenda {
  grid-template-columns: 1fr;
}

div.contact-form h2,
div.contact-form p {
  padding-left: 7px;
}

div.contact-form .form {
  display: block;
  padding: 0px 7px;
}

div.contact-form .form .fields {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  align-items: start;
}

div.contact-form .form .fields .row {
  flex-direction: column;
  margin-top: 0;
}

div.contact-form .form .fields .row.action {
  align-items: flex-end;
}

div.contact-form .form .fields textarea {
  height: 156px;
}

div.contact-form article h2 {
  font-size: 35px;
  line-height: 35px;
}

div.page .wrapper>article.text>.order.contact-form>article.text p {
  margin-left: 0;
}

.input-container {
  display: block;
  width: 100%;
}

#alternative-date-input {
  width: 100%;
  padding: 10px 16px;
  font-size: 16px;
  border: 1px solid var(--color-orange);
  border-radius: 25px;
  background-color: #f9f9f9;
  color: #333;
  transition: border-color 0.3s, background-color 0.3s;
  outline: none;
  font-family: Montserrat, sans-serif;
}

#alternative-date-input::placeholder {
  color: #999;
  opacity: 0.8;
}

#alternative-date-input:focus {
  border-color: var(--color-primary);
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

.form.no-agenda .fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  grid-gap: 16px;
  align-items: start;
}

.form.no-agenda .fields .row:nth-child(1) {
  grid-row: 1;
  grid-column: 1;
  align-self: flex-start;
}

.form.no-agenda .fields .row:nth-child(2) {
  grid-row: 2;
  grid-column: 1;
  margin-top: -4rem;
}

.form.no-agenda .fields .row:nth-child(3) {
  grid-row: 1;
  grid-column: 2;
  align-self: flex-start;

}

.form.no-agenda .fields .row:nth-child(4) {
  grid-row: 2;
  grid-column: 2;
  margin-top: -4rem;

}

.form.no-agenda .fields .row:nth-child(5) {
    grid-row: 2;
    grid-column: 2;
    margin-top: -4rem;
}

.form.no-agenda .fields .row:nth-child(6) {
    grid-row: 1;
    grid-column: 3;
}

.form.no-agenda .fields .row.action {
    grid-row: 2;
    grid-column: 3;
}

.form.no-agenda .fields .row.comment {
    grid-row: 1;
    grid-column: 3;
}

.form.no-agenda .fields .row.person {
    grid-row: 3;
    grid-column: 1;
}

.form.no-agenda .fields .row {
    margin-top: 0px;
}

.agenda {
    text-align-last: center;
}

.agenda-content {
  max-width: 1000px;
}

.agenda-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
  border-radius: 8px;
}

.agenda-table td {
  font-size: 14px;
  color: #333;
  border: none;
  transition: background-color 0.3s ease;
  padding: 5px 0 5px 0;
}

.agenda-table .month td {
  font-weight: 600;
  font-size: 18px;
  text-align: left;
  color: #2c3e50;
  border-radius: 8px 8px 0 0;
}

.agenda-table tr:not(.month) {
  border-radius: 4px;
}

.agenda-table tr:not(.month):hover {
  background-color: #f8fafc;
}

.agenda-table td:nth-child(1) {
  font-weight: 500;
  color: var(--color-black);
  text-align: left;
  padding-left: 10px;
  max-width: 50px;
}

.agenda-table td:nth-child(2),
.agenda-table td:nth-child(3),
.agenda-table td:nth-child(4) {
  text-align: center;
  max-width: 100px;
}

.agenda-table td:nth-child(3) {
  max-width: 60px;
  text-align: left;
}

.agenda-table td:nth-child(5) {
  font-weight: 600;
  text-align: left;
  max-width: 100px;
}

.agenda-table td:nth-child(6) {
  font-weight: 500;
  color: var(--color-primary);
  text-align: left;
  max-width: 100px;
}

.agenda-table td:nth-child(6) {
  text-align: right;
}

.agenda-table td:nth-child(7) {
  font-weight: 600;
}

.table-button {
  color: var(--color-black);
  text-decoration: underline;
  border: none;
  font-size: 14px;
  padding: 0px 10px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s ease;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.table-button i {
  color: var(--color-primary);
}

.table-button:hover {
  background-color: var(--color-black);
  color: var(--color-white);
  text-decoration: none;
}

.table-button i {
  margin-left: 8px;
  font-size: 14px;
}

.month td {
  padding-top: 25px;
}

.agenda-table tr:nth-child(odd):not(.month) {
  background-color: #f9f9f9;
}

.page .wrapper:has(.form) {
  display: inherit;
  justify-items: center;
}

.faq-question {
  cursor: pointer;
  font-weight: bold;
  display: flex;
  align-items: center;
  display: grid;
  grid-template-columns: 25px auto;
}

.faq-question i {
  transition: transform 0.3s;
}

.faq-question.expanded i {
  transform: rotate(90deg);
}

.faq-answer {
  max-height: 10px;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.faq-question.expanded+.faq-answer {
  max-height: 500px;
}

.faq-column {
  min-height: 150px;
  overflow: hidden;
}

div.page.one-block .review-text:before {
  font-family: "Font Awesome 6 Pro";
  content: "\f10d";
  left: 20px;
  top: -10px;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-size: 44px;
  position: relative;
  color: var(--color-primary);
}

#main>div.page.vip-workshop>div>article>div:nth-child(2)>div:nth-child(2) {
  align-self: center;
}

#main>div.page.vip-workshop>div>article>div:nth-child(2)>div:nth-child(2)>figure>img {
  width: 350px;
}

#main>div.page.vip-workshop>div>article>div:nth-child(4)>div:nth-child(2)>figure>img {
  width: 350px;
}

[data-page-code="workshop"] section.workshop-card .container .card-descr {
  padding: 20px;
  display: grid;
  grid-template-rows: 18rem 4rem;
}

section.workshop-card .container .item .card-descr {
  padding: 20px;
  display: grid;
  grid-template-rows: 18rem 5rem;
}

/* Styling for the specific page where the video is located */
[data-page-code="cadeaubonnen"] .video-frame {
  margin-bottom: 25px;
  max-width: 450px;
  justify-self: center;
}

[data-page-code="cadeaubonnen"] div.page.vip-workshop .media {
  margin-top: 50px;
  padding: 25px;
  border-radius: 8px;
  background-color: var(--color-gray);
}

.video-frame {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  background-color: var(--color-gray); /* Assumes a CSS variable for gray color */
  border-radius: 8px;
}

.video-frame video {
  max-width: 100%;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.play-button {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.play-button:hover {
  transform: scale(1.1);
}

.play-button::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 20px solid white;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 5px;
}

.play-button.hidden {
  display: none;
}

.bird-info div, .team-info div {
  display: grid;
  grid-template-columns: 6rem auto;
}

@media screen and (max-width: 1180px) {
    section.trapezium:has(a[href="/site/roofvogelboerderij/cadeaubonnen"])::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    z-index: 3;
    }

    section.pilaren-card .container .item .card-descr {
      grid-template-rows: max-content;
    }

    [data-page-code="home"] section.pilaren-card .container .item .card-descr {
      grid-template-rows: max-content;
    }

    #trapezium > div > div > aside > div:nth-child(2), #trapezium > div > div > aside > h2 {
      z-index: 4;
    }

    section.trapezium {
      clip-path: polygon(0 0, 100% 5%, 100% 95%, 0% 100%);
      -webkit-clip-path: polygon(0 0, 100% 5%, 100% 95%, 0% 100%);
      background-position: right !important;
      margin-top: 0px;
      position: relative;
    }

    div.page .wrapper > aside {
      flex-direction: column;
      padding: 0 5%;
    }

    [data-page-code="home"] div.page .wrapper > aside {
      flex-direction: column;
      width: 75%;
      align-items: center;
      z-index: 5;
    }

    [data-page-code="home"] div.page .wrapper {
        align-items: center;
    }

    section.video .wrapper-video {
      display: flex;
      flex-direction: column;
      margin: 10% 0;
    }

    section.video .wrapper-video .media iframe {
      height: 250px;
      width: 90vw;
      margin-top: 50px;
    }

    section.video article.text {
      margin: 0 5%;
    }

    div.page.vip-workshop {
      display: flex;
      flex-direction: column;
      grid-template-columns: unset;
    }

    div.page.vip-workshop .media {
      width: 100%;
      padding: 0;
    }

    section.workshop-card .container {
      display: flex;
      flex-direction: column;
      margin: 5% 0;
    }

    div.page.vip-workshop .wrapper > article.text {
      width: 90%;
    }

    div.page.vip-workshop .wrapper:nth-child(2) {
      align-self: center;
    }

    .wrapper {
      width: 100%;
    }

    div.works-info {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin: 30px 0 25px 0;
    }

    #main > div.page.vip-workshop > div > article > div:nth-child(2) > p {}

    div.figure .container {
      display: flex;
      flex-direction: column;
    }

    div.figure .container:has(img) {
      margin-top: -100px;
      margin-bottom: 50px;
    }

    div.page.vip-workshop .media figure:nth-of-type(2) {
        display: none;
    }

    div.page.vip-workshop .media figure:nth-of-type(1) img {
      transform: unset;
      margin-top: 150px;
    }

    .media figure img, div.figure .container img {
      max-width: 90%;
    }

    .review-content {
      min-height: 25vh;
    }

    div.page .wrapper:has(#form-workshop) {
      display: flex;
      flex-direction: column;
    }

    div.page .wrapper > article.text:has(#form-workshop) {
      padding: 0;
    }

    .form {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    div.page.vip-workshop .review-content {
      margin: 10% 0;
    }

    div.page.vip-workshop .review-content .regular {
      margin: 0 10px;
      place-content: center;
    }

    div.page .review-content span:nth-of-type(1) {
      font-size: 20px;
    }

    div.page .review-content .review-box {
      text-align: center;
      padding: 0 5%;
    }

    div.page .review-content .rating-box {
      align-self: center;
    }

    .cadeau-tip-blok .wrapper {
      display: flex;
      flex-direction: column;
      margin-top: 0;
    }

    .cadeau-tip-blok .wrapper .text {
      margin: 5% 5%;
    }

    .cadeau-tip-blok {
      height: 100%;
    }

    .cadeau-tip-blok .wrapper img {
      height: unset;
      max-width: 90%;
      margin-bottom: 5%;
    }

    .agenda {
      align-content: center;
    }

    .agenda-content {
      max-width: 100%;
      /*padding: 0 10px;*/
      overflow-x: auto;
    }

    .agenda-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      border-radius: 8px;
    }

    .agenda-table td {
      font-size: 14px;
      color: #333;
      border: none;
      transition: background-color 0.3s ease;
      padding: 8px 5px;
      max-width: 500px;
    }

    .agenda-table tr.month {
      background-color: initial;
      grid-template-columns: 1fr;
      text-align: center;
      margin: 10px 0;
    }

    .agenda-table .month td {
      font-weight: 600;
      font-size: 18px;
      text-align: left;
      color: #2c3e50;
      border-bottom: 0px;
      border-radius: 8px 8px 0 0;
      padding: 10px 5px;
    }

    .form.no-agenda .fields {
      display: flex;
      flex-direction: column;
    }

    .form.no-agenda .fields .row {
      margin-top: 5px;
    }

    .form.no-agenda .fields .row:nth-child(5) {
        margin-top: 5px;
    }

    .form.no-agenda .fields .row:nth-child(2) {
      margin-top: 5px;
    }

    .form.no-agenda .fields .row:nth-child(4) {
      margin-top: 5px;
    }

    section.video {
      margin-bottom: 45px;
    }

    div.contact-form .form h2 {
      margin-right: 0;
    }

    div.contact-form .form .fields {
      grid-template-columns: 1fr;
    }

    div.contact-form .form .fields .row.hide {
      display: none;
    }

    div.contact-form .form .fields .row.action {
      align-items: center;
    }

    .bird-info div, .team-info div {
        display: grid;
        grid-template-columns: 8rem auto;
    }

    .bird-info div p, .team-info div p {
        margin: 0;
        padding: 0;
    }
}

@media screen and (min-width: 1000px) and (min-height: 1135px) {
[data-page-code="legends"] section.trapezium, [data-page-code="vip-workshop"] section.trapezium {
    margin-top: -75px;
}

[data-page-code="all-inclusive"] section.trapezium {
    margin-top: -40px;
}

[data-page-code="ouder-kind-uitje"] section.trapezium,
[data-page-code="meet-greet-amerikaanse-vogel"] section.trapezium,
[data-page-code="meet-greet-uilen"] section.trapezium,
[data-page-code="roofvogel-demonstratie-educatie"] section.trapezium,
[data-page-code="jubileum-verjaardag"] section.trapezium,
[data-page-code="bedrijfsuitje"] section.trapezium,
[data-page-code="teambuilding"] section.trapezium {
    margin-top: -50px;
}
}

@media screen and (max-height: 1135px) {

[data-page-code="legends"] section.trapezium, [data-page-code="vip-workshop"] section.trapezium {
    margin-top: -25px;
}

[data-page-code="all-inclusive"] section.trapezium {
    margin-top: -10px;
}

[data-page-code="ouder-kind-uitje"] section.trapezium {
    margin-top: -10px;
}

[data-page-code="meet-greet-amerikaanse-vogel"] section.trapezium,
[data-page-code="meet-greet-uilen"] section.trapezium,
[data-page-code="roofvogel-demonstratie-educatie"] section.trapezium,
[data-page-code="jubileum-verjaardag"] section.trapezium,
[data-page-code="bedrijfsuitje"] section.trapezium,
[data-page-code="teambuilding"] section.trapezium {
    margin-top: -15px;
}
}

[data-page-code="overlastbestrijding"] section.pilaren-card .container .item .card-descr {
    grid-template-rows: 320px;
}


@media screen and (max-width: 1780px) {
    footer .bottom div:first-of-type {
      width: unset;
    }
  }

  @media screen and (max-width: 1700px) {
    [data-page-code="workshop"] section.workshop-card .container .card-descr {
      padding: 20px;
      display: grid;
      grid-template-rows: 22rem 4rem;
    }

    [data-page-code="overlastbestrijding"] section.pilaren-card .container .item .card-descr {
        grid-template-rows: 350px;
    }

    .cadeau-tip-blok .wrapper img {
        max-width: 75%;
        height: unset;

    }

    section.workshop-card .container .item .card-descr {
      padding: 20px;
      display: grid;
      grid-template-rows: 22rem 5rem;
    }

    .agenda-table td:nth-child(1), .agenda-table td:nth-child(2), .agenda-table td:nth-child(3), .agenda-table td:nth-child(4), .agenda-table td:nth-child(5), .agenda-table td:nth-child(6), .agenda-table td:nth-child(7) {
        display: block;
        text-align: left;
        align-content: center;
        padding: 1px 5px;
    }

    .agenda-table tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: #fff;
        border: unset;
        border-bottom: 1px solid #e0e6ed;
        border-radius: 0px;
        padding: 5px;
        /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/
    }

    .agenda-table {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .agenda-table td:nth-child(2), .agenda-table td:nth-child(3), .agenda-table td:nth-child(4), .agenda-table td:nth-child(5), .agenda-table td:nth-child(6) {
        text-align: center;
        max-width: max-content;
    }
  }

  @media screen and (max-width: 1550px) {
      [data-page-code="bedrijf"] section.pilaren-card .container .item .card-descr {
          grid-template-rows: 280px;
      }
  }

  @media screen and (max-width: 1500px) {
    section.workshop-card .container .item .card-descr {
      padding: 20px;
      display: grid;
      grid-template-rows: 28rem 5rem;
    }

    .cadeau-tip-blok .wrapper img {
        max-width: 75%;
    }

    [data-page-code="workshop"] section.workshop-card .container .item .card-descr {
      padding: 20px;
      display: grid;
      grid-template-rows: 22rem 4rem;
    }

    [data-page-code="overlastbestrijding"] section.pilaren-card .container .item .card-descr {
        grid-template-rows: 380px;
        grid-template-columns: 310px;
    }
  }

  /*Tablet*/
  @media screen and (max-width: 1366px) {
    .agenda-table {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .table-button i {
      color: white;
    }

    [data-page-code="agenda"] #main > div.page.vip-workshop > div > article > div.agenda-content > table > tbody > tr > td > a > span {
        color: black;
    }

    [data-page-code="overlastbestrijding"] main > section {
        padding: 0 5%;
    }

    [data-page-code="overlastbestrijding"] section.pilaren-card .container .item .card-descr {
        grid-template-rows: 280px;
        grid-template-columns: 1fr;
    }

    [data-page-code="cadeaubonnen"] #main > div.page.vip-workshop > div > aside {
        order: 1;
    }

    [data-page-code="cadeaubonnen"] #main > div.page.vip-workshop > div > article {
        order: 2;
        width: unset;
        padding: unset;
        margin: unset;
        width: unset;
    }

    [data-page-code="cadeaubonnen"] div.page .wrapper:has(form#form-giftcard) {
        padding: 0 1%;
    }

    div.page.vip-workshop:has(form#form-giftcard) {
      display: flex;
      flex-direction: column;
    }

    div.page .wrapper:has(form#form-giftcard) {
      display: flex;
      flex-direction: column;
      align-items: center !important;
    }

    section.pilaren-card .container {
      grid-template-columns: 50% 50%;
      overflow: unset;
      margin: 0 5%;
    }

    .agenda-table tr {
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: #fff;
      border: unset;
      border-bttom: 1px solid #e0e6ed;
      border-radius: 8px;
      padding: 5px;
      margin-bottom: 10px;
      /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/
    }

    .agenda-table td {
      display: flex;
      justify-content: space-between;
      padding: 1px 5px;
      font-size: 14px;
      color: #333;
      border: none;
      max-width: 500px !important;
    }

    .agenda-table td:nth-child(1),
    .agenda-table td:nth-child(2),
    .agenda-table td:nth-child(3),
    .agenda-table td:nth-child(4),
    .agenda-table td:nth-child(5),
    .agenda-table td:nth-child(6),
    .agenda-table td:nth-child(7) {
      display: block;
      /* Stack data within the card */
      text-align: left;
      padding: 1px 0px;
    }

    .agenda-table td strong {
      font-weight: 600;
    }

    .agenda-table td span {
      font-weight: 400;
      word-wrap: break-word;
    }

    .agenda-table .month td {
      font-size: 16px;
      font-weight: 600;
      text-align: center;
    }

    .agenda-table tr:nth-child(odd):not(.month) {
      background-color: #f9f9f9;
    }

    /* Button styling remains unchanged */
    .table-button {
      margin-top: 10px;
      font-size: 14px;
      padding: 5px 10px;
      border-radius: 4px;
      color: var(--color-black);
      background: var(--color-primary);
      border: none;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .table-button:hover {
      background-color: var(--color-black);
      color: var(--color-white);
    }


    section.pilaren-card .container .card-descr {
      grid-template-rows: 320px;
    }

    section.video article.text {
      margin-left: 50px;
      margin-right: 50px;
    }

    .video-frame iframe {
      max-width: 80vw;
      width: 500px;
    }

    section.workshop-card .container {
      padding: 0 50px;
      gap: 20px;
    }

    .grid, .bottom {
      width: 95%;
    }

    footer > .container > .grid > .rightside {
      justify-content: center;
    }

    footer .bottom div:first-of-type {
      width: 100%;
      justify-content: center;
      align-items: center;
      gap: 0px;
      display: flex;
      flex-direction: column-reverse;
      align-items: flex-end;
    }

    footer > .container {
      max-width: 90vw;
    }

    footer > .container > .grid > .rightside {
      align-content: center;
      margin-right: 50px;
    }

    section.hero-other > .container {
      grid-template-columns: auto;
      align-items: end;
      height: 75%;
      margin-left: 0px;
      width: 60%;
      justify-self: center;
      column-gap: 0px;
    }

    div.page.vip-workshop {
      grid-template-columns: 50% 50%;
    }

    section.page.vip-workshop .wrapper {
      width: 100vw;
    }

    .form .fields {
      align-content: center;
    }

    div.page.vip-workshop .works-info {
      grid-template-columns: 40% 40% !important;
    }
  }

  /*Tablet*/
    @media screen and (max-width: 801px) {
        section.video article.text {
            margin-left: 60px;
            margin-right: 60px;
        }

        section.mapblock .container .desktop iframe {
            max-width: 80vw;
            text-align: center;
        }

        .video-frame iframe {
            width: 100%;
        }

        .review-content {
            margin: unset;
        }

        div.page.vip-workshop .review-content {
            margin-top: unset;
            min-width: 250px;
        }

        input#alternative-date-input:before {
            content: attr(placeholder) !important;
            color: #aaa;
            margin-right: 0.5em;
        }

        input#alternative-date-input:focus:before, input#alternative-date-input:valid:before {
            content: "";
        }

        input#alternative-date-input.has-value:before {
            content: attr(value) !important;
            color: #000;
        }
    }

  @media screen and (max-width: 1024px) {
    section.block-centered > .container {
      display: flex;
      flex-direction: column;
      margin: 5% 5%;
    }

    footer .bottom div:first-of-type {
        flex-direction: column;
        align-items: unset;
    }

    section.workshop-card .container .item .card-descr {
      padding: 20px;
      display: grid;
      grid-template-rows: 12rem 5rem;
    }

    [data-page-code="workshop"] section.workshop-card .container .card-descr {
      padding: 20px;
      display: grid;
      grid-template-rows: auto auto auto auto auto;
    }

    .faq-question.expanded + .faq-answer {
      margin: 0 5%;
    }

    .video-frame iframe {
      width: 90vw;
      height: 40vh;
      margin: 50px 0;
    }

    #main > div.page.vip-workshop > div > article > div:nth-child(2) > ol {
      margin-top: 20px;
    }

    #main > div.page.vip-workshop > div > article > div:nth-child(2) > div:nth-child(2) > figure {
      text-align: center;
    }

    #main > div.page.vip-workshop > div > article > div:nth-child(2) > div:nth-child(2) > figure > img, #main > div.page.vip-workshop > div > article > div:nth-child(4) > div:nth-child(2) > figure > img {
      width: 350px;
      margin-top: 25px;
    }

    section.block-centered > .container p {
      margin: 5px 1%
    }

    .workshop-card {
      margin: 20px 0 0 0;
    }

    section.pilaren-card .container {
      display: flex;
      flex-direction: column;
      margin: 5% 5%;
    }


  }


  /* Mobile Styles */
  @media (max-width: 767px) {
    .agenda-table {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    [data-page-code="overlastbestrijding"] section.pilaren-card .container .item .card-descr {
        grid-template-rows: max-content;
        grid-template-columns: 100%
    }

    [data-page-code="overlastbestrijding"] section.pilaren-card .container .item .card-descr h3 {
        font-size: 1.5rem;
    }

    .agenda-table tr {
      display: flex;
      flex-direction: row;
      grid-template-columns: 1fr 1fr;
      background: #fff;
      border: unset;
      border-bottom: 1px solid var(--color-gray);
      padding: 10px 5px;
      flex-wrap: wrap;
      column-gap: 20px;
      row-gap: 0px;
      align-items: center;
      border-radius: unset;
      /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/
    }

    .agenda-table td {
      display: flex;
      justify-content: space-between;
      padding: 1px 5px;
      font-size: 14px;
      color: #333;
      border: none;
      max-width: 500px !important;
    }

    .agenda-table td:nth-child(1),
    .agenda-table td:nth-child(2),
    .agenda-table td:nth-child(3),
    .agenda-table td:nth-child(4),
    .agenda-table td:nth-child(5),
    .agenda-table td:nth-child(6),
    .agenda-table td:nth-child(7) {
      display: block;
      /* Stack data within the card */
      text-align: left;
      padding: 2px 0px;
    }

    .agenda-table td strong {
      font-weight: 600;
    }

    .agenda-table td span {
      font-weight: 400;
      word-wrap: break-word;
    }

    .agenda-table .month td {
      font-size: 16px;
      font-weight: 600;
      text-align: center;
    }

    .agenda-table tr:nth-child(odd):not(.month) {
      background-color: #f9f9f9;
    }

    /* Button styling remains unchanged */
    .table-button {
      margin-top: unset;
      font-size: 14px;
      padding: 5px 10px;
      border-radius: 4px;
      color: var(--color-black);
      background: var(--color-primary);
      border: none;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .table-button:hover {
      background-color: var(--color-black);
      color: var(--color-white);
    }

    section.workshop-card .container .card-descr {
      padding: 20px;
      display: grid;
      grid-template-rows: auto auto auto auto auto !important;
      row-gap: 10px;
    }

    section.workshop-card .container .item .btn-div {
      margin-top: 0px;
    }

    section.workshop-card .container .info {
      padding: 2px 0 !important;
    }

    div.page.vip-workshop .review-text:before {
      left: -45%;
      font-size: 50px;
      top: 0;
    }

    .bird-info div, .team-info div {
      display: grid;
      grid-template-columns: 6rem auto;
    }
  }

  @media screen and (max-width: 400px) {
    section.workshop-card .container {
      padding: 0 25px;
      gap: 20px;
    }

    article.text .big-text p, .big-text p {
      font-size: 14px;
      line-height: 22px;
    }

    div.page {
      padding: 60px 0 60px;
    }

    #block-centered > div > div:nth-child(2) > div > p {
      font-size: 14px;
      line-height: 22px;
    }

    .media figure {
      min-height: 310px;
    }
  }

#form-giftcard .form {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 200px;
    padding: 50px 0;

    .fields .row {
        display: grid;
        grid-template-columns: 150px 1fr;
        justify-content: center;
        align-items: center;
        gap: 15px;
    }

    .fields select {
        padding: 10px;
    }

    .order-overview {
        background: var(--color-gray);
        border-radius: 15px;
        padding: 1em;

        .product-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            padding: 10px;

            .left {
                text-align: left;
            }

            .right {
                text-align: right;

            }

            .right.bold {
                font-weight: 600;
            }
        }
    }
}

#form-giftcard .form .fields .row.checkbox div:last-child label > input {
 display: inline-block;
}

#form-giftcard .fields input[type="text"], #form-giftcard .fields input[type="tel"] {
    padding: 10px 14px;
}

#form-giftcard .form .fields .row.action {
    display: block;
}

#form-giftcard #purchase_submit {
    float: right;
}

div.page .wrapper:has(form#form-giftcard) {
    display: flex;
    align-items: flex-start;
    /*margin-top: 50px;
    width: 80vw;
    margin-left: auto;
    margin-right: auto;*/

    .form .fields {
        margin-top: 0px;
    }
}

#form-giftcard .product-container {
    justify-content: center;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-top: 50px;
    gap: var(--offset-small);
    grid-row: auto;
    overflow: hidden;

    .item {
        border-radius: 15px;
        border: 1px solid var(--color-gray);
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 150px;
        align-items: end;
        justify-content: center;
        overflow: hidden;
        background-color: transparent;

        h3 {
            font-size: 20px;
            line-height: 22px;
            font-weight: 600;
        }

        h4 {
            line-height: 2.5;
        }

        .image {
            background-size: contain;
            background-repeat: no-repeat;
            min-height: 200px;
            max-height: 200px;
            background-position: center;
            margin-top: 20px;
            margin-bottom: 10px;
        }

        .card-descr {
            padding: 10px 5px;
            display: grid;
        }

        .btn-div {
            display: flex;

            .icon-div {
                width: 25%;

                button {
                    padding: 0;
                    background: none;
                    border: none;
                    cursor: pointer;
                    i {
                        color: var(--color-primary);
                        font-size: 30px;
                    }
                }
            }

            .quantity-div {
                width: 50%;

                input {
                    border: none;
                    width: 70px;
                    text-align: center;
                    font-size: 20px;
                    outline: none;
                }
            }
        }
    }
}

@media screen and (max-width: 1600px) {

}

@media screen and (max-width: 1023px) {
    div.page .wrapper .container:has(form#form-giftcard) {
        width: 100%;
    }

    div.page .wrapper:has(form#form-giftcard) {
        width: 100%;
    }

    #form-giftcard .product-container .item .btn-div .icon-div button i  {
        font-size: 25px;
    }

    #form-giftcard .product-container  .item .btn-div .quantity-div input {
        font-size: 16px;
    }

    #form-giftcard .form {
        & .order-overview {
            .product-row {
                padding: 6px;
            }
        }
    }

    #form-giftcard .form {
        padding: unset;
        margin-bottom: unset;
    }

    [data-page-code="cadeaubonnen"] div.page.vip-workshop .media {
        width: 90vw;
        margin-bottom: 200px;
    }

    #form-giftcard .product-container {
        grid-template-columns: auto;
    }

    #form-giftcard .product-container .item .image {
        min-height: 200px;
    }

    #form-giftcard .product-container .item h3 {
        font-size: 16px;
        line-height: 20px;
    }

    #form-giftcard .product-container .item h4 {
        font-size: 16px;
    }

    #form-giftcard .form .fields .row {
        grid-template-columns: 1fr;
        width: 100%;
        gap: 5px;
    }

    #form-giftcard #purchase_submit {
        float: unset;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 1024px) {
    [data-page-code="cadeaubonnen"] div.page.vip-workshop .media {
        margin-bottom: unset;
    }

    #form-giftcard > div.product-container > div:nth-child(4) {
        margin-bottom: 25px;
    }
}

div.attention {
	background: var(--color-text);
	color: #FFF;
	padding: var(--offset);

}

div.attention article.text p{
	font-size: 22px;
	line-height:32px;
}
div.cookie {
	background: rgba(0,0,0,.9);
	color: #FFF;
	padding: calc(var(--offset) / 2) 0;
	position: fixed;
	bottom: 0;
	z-index: var(--z-index-cookie);
	width: 100%;
	display: none;
}

div.cookie.active {
	display: block;
}

div.cookie .wrapper {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	width: 70vw;
	margin-left: 20vw;
	margin-right: 100px;
}

div.cookie .text p {
	font-size:14px;
	line-height: 24px;
	margin-top: 5px;
	font-weight: 500;
}

div.cookie .text h3 {
	margin-top: 0;
	padding-bottom: 20px;
	color: white;
}

div.cookie .btn-div {
	padding-top: 40px;
}

div.cookie .wrapper div:last-child {
	padding-left: var(--offset);
}

/* Mobile */
@media screen and (max-width: 1023px) {
	div.cookie .wrapper {
		flex-direction: column;
		width: unset;
		margin-left: unset;
		margin-right: unset;
	}

	div.cookie .wrapper div:last-child {
		margin-top: 0;
		padding: 0 0 10px 0;
	}

	div.cookie .text  {
		padding: 10px;
	}

	div.cookie .text h3 {
		font-size: 21px;
		line-height: 24px;
		padding-bottom: 10px;
	}

	div.cookie .btn-div {
		position: relative;
	    margin-left: auto;
	    margin-right: auto;
	}
}

@media screen and (max-width: 380px) {
	div.cookie .wrapper {
		flex-direction: column;
		width: unset;
		margin-left: unset;
		margin-right: unset;
	}

}