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, p,button {
	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;
}

figure {
	font-size: 0;
}

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

:root {
	--color-white: #fff;
	--color-gray:#f0f0f0;
	--color-black: #312f2d;
	--color-dark: #343738;
	--color-yellow: #fbb900; 
	--color-red: #c70008; 
	--color-primary: #435957;
	--color-secondary: #fbb900; 
	--color-tertiary: #7a9894; 
	--color-header: #3e6b67;
	--font-family: 'Noto Sans', sans-serif;
	--font-family-alwyn: 'Alwyn', sans-serif;
	--font-size: 20px;
	--line-height: 36px;
	--font-weight: 300;

	--section-spacing: 90px;
	--offset: 60px;
	--offset-small: 30px;
	--offset-tiny: 15px;
	--base: 1620px;
	--quarter-base: 500px;
	--nav-gap: 40px;
	--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;
	}
}

@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;
	}
}


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

@keyframes bounce-in {
	0% {
		transform: scale(1)
	}

	20% {
		transform: scale(1.4)
	}
	
	40% {
		
		transform: scale(.8)
	}

	60% {
		
		transform: scale(1.2)
	}

	80% {
		
		transform: scale(.9)
	}

	100% {
		transform: scale(1)
	}
}
  @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;
  }

body {
	font-family: var(--font-family); 
	font-size: var(--font-size);
	font-weight: var(--font-weight); 
	line-height: var(--line-height);
	font-color: var(--color-black);
}

h1,h2 
{
	font-size: 38px;
	line-height: 48px;
	font-weight: 300;
	position: relative;
	color: white;
}

h1 span,
h2 span
{
	display: block;
	font-size: 18px;
	line-height: 22px;
	position: relative;
}

h3 {
	font-size: 34px;
	line-height: 36px;
	font-weight: 400;
	color: var(--color-header);
}

h3 span {
	display: block;
	font-size: 14px;
	text-transform: uppercase;
}

h4{
	font-size: 26px;
	line-height: 42px;
	font-weight: 300;

}

h5 {
	font-size: 20px;
	font-weight: 600;
	line-height: 32px;
	color: var(--color-primary);
}

h6 {
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
}

p {
	font-size: var(--font-size); 
	line-height: var(--line-height); 
}

a {
	text-decoration: none;
}

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

b,strong {
	font-weight: 700;
}

em,i {
	font-style: italic;
}

#main ul {}
#main ul li,
#main ol li {
	padding-left: var(--offset-small);
}

#main ul li:before,
#main ol li:before {
	font-family: "Font Awesome 6 Pro";
	content: "\f105";
	color: var(--color-secondary);
	position: absolute;
	margin-left: -20px;
}

/* ---------- colors ---------- */

h1[data-color="white"],
h2[data-color="white"],
h1 span[data-color="white"],
h2 span[data-color="white"] { color: white; }

h1[data-color="yellow"],
h2[data-color="yellow"],
h1 span[data-color="yellow"],
h2 span[data-color="yellow"] { color: var(--color-yellow); }

h1[data-color="black"],
h2[data-color="black"],
h1 span[data-color="black"],
h2 span[data-color="black"] { color: var(--color-black); }

h1[data-color="gray"],
h2[data-color="gray"],
h1 span[data-color="gray"],
h2 span[data-color="gray"] { color: var(--color-gray); }

h1[data-color="gray"]:before,
h2[data-color="gray"]:before { background: var(--color-gray); }
h1[data-color="yellow"]:before,
h2[data-color="yellow"]:before { background: var(--color-yellow); }
h1[data-color="white"]:before,
h2[data-color="white"]:before { background: white; }

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

}

@media screen and (max-width: 1023px) {
	h1,h2 
	{
		font-size: 26px;
		line-height: 33px;
		word-break: break;
		font-weight: 300;
	}
	
	h1 span,
	h2 span
	{
		font-size: 16px;
		line-height: 20px;
	}

	h3{
		font-size: 22px;
		line-height: 28px;
	}
}
/* ---------- vars ---------- */

.pattern:before{
	--overlap: 20px;
}

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

.pattern {
	position: relative;
}

.pattern:before {
	position: absolute;
	width: 100%;
	height: 100%;
	left: var(--overlap);
	top: var(--overlap);
	content: "";
	z-index: -1;
}

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

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


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


}

/* ---------- vars ---------- */
main > section[data-seperator] {
	--seperator-size: 40px;
}

body {


}
html{

}
main {
	overflow-x: hidden;
	
}

main > section {
	scroll-margin: calc(120px + var(--section-spacing));
}

main > section[data-offset-sides="true"] {
	margin-left: var(--offset);
	margin-right: var(--offset);
}

main > section[data-seperator] {
	position: relative;
}

main > section + section {
	/* margin-top: 120px;
	margin-bottom: 120px; */
}

/* main > section:last-child {
	padding-bottom: var(--offset); 
} */

main *[data-offset-top="large"] { padding-top: var(--section-spacing); }
main *[data-offset-top="normal"] { padding-top: var(--offset); }
main *[data-offset-top="small"] { padding-top: var(--offset-small); }
main *[data-offset-top="none"] { padding-top: 0; }
main *[data-offset-bottom="large"] { padding-bottom: var(--section-spacing); }
main *[data-offset-bottom="normal"] { padding-bottom: var(--offset); }
main *[data-offset-bottom="small"] { padding-bottom: var(--offset-small); }
main *[data-offset-bottom="none"] { padding-bottom: 0; }

.far:not(.no-margin), .fas:not(.no-margin), .fal:not(.no-margin) {
	margin-right: 5px;
}

@media screen and (max-width: 1023px) {
	main > section {
		--line-size: 60px;	
	}

	main > section[data-offset-sides="true"] {
		margin-left: var(--offset-tiny);
		margin-right: var(--offset-tiny);
	}
}

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


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

header#header .logo figure {
	padding: 20px 0 20px 0;
	transition: all 0.2s linear;
}

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

.mobile-nav-logo {
    width: 250px;
    margin-bottom: 20%;
}

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

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

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

}

@media screen and (max-width: 1023px) {
	header#header .logo figure  {
		padding: 0px 0;
	}

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

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

	header#header .logo figure img {
		width: 165px;
	}

}

/* ---------- 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 !important;
}

/* ---------- 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: 'Alwyn', sans-serif;
	transition: all var(--transition-speed);
}

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

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

header#header nav ul.nav {
	margin-top: 20px;
}

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

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

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

@media screen and (max-width: 1023px) {
	header#header nav {
		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: center;
		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);
	}

}

/* ---------- 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: 1023px) {
	header#header .navigation-trigger {
		display: flex;
		position: absolute;
		right: 30px;
		z-index: 9999;
	}
	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;
	/*height: 140px;*/
	transition: background-color 230ms linear;
}

header#header .wrapper {
	display: grid;
	grid-template-columns: var(--grid-3) 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: white;
}

a.button.button-job {
	margin-right: 5px;
}

header#header .tour {
	display: none;
}

[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.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
	animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
	position: fixed;
	top: 140px;
	left: 0;
	height: 250px;
	width: 100%;
	background: white;
	display: none;
	z-index: 400;
	transition: top 0.2s linear;
	padding: 30px 0px;
}

.navigation-full-dropdown > .container {
	display: grid;
	height: 100%;
	margin: auto;
	max-width: var(--base);
	justify-content: center;
	column-gap: 25px;
	align-items: flex-start;
	grid-template-columns: var(--grid-5) var(--grid-4) var(--grid-3);
}

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

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

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

.navigation-full-dropdown .button{
	width: 200px;
	margin-top: 30px;
}

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

.navigation-full-dropdown > .container > div > a:hover {
	text-decoration: underline;
}

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

.navigation-full-dropdown .links-2 {
    height: 45%;
}

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

.show {
	display: block;
}

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

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;
}

.navigation-full-dropdown > .container-2 {
grid-template-columns: var(--grid-3) var(--grid-3) 1px var(--grid-3) var(--grid-3);
justify-items: center;
}

.vertical-divider {
    grid-column: span 1;
    border-left: 1px solid #7a9894;
    height: 90%;
    margin: 0 20px;
}

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

@media screen and (max-width: 1630px) {
    .navigation-full-dropdown > .container-2 {
    grid-template-columns: var(--grid-3) var(--grid-3) 1px var(--grid-3) var(--grid-3);
    }

    .navigation-full-dropdown .links {
        flex-wrap: unset;
        justify-content: flex-start;
    }

    .dropdown-content .link-title {
        font-weight: 600;
        font-size: 16px;
        margin-top: 10px;
        margin-bottom: 5px;
        text-decoration: underline;
        }

        .button-job-header {
            margin-top: 10px;
        }

        @media (min-resolution: 1.3dppx),
               (-webkit-min-device-pixel-ratio: 1.3) {

          .navigation-full-dropdown {
              height: 300px;
          }
        }
}

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

	.vertical-divider {
    height: 85%;
    margin: 0 100px;
	}

	@media screen and (max-width: 1260px) {
		.navigation-full-dropdown {
			height: 285px;
		}
	}

	@media (min-resolution: 1.3dppx),
           (-webkit-min-device-pixel-ratio: 1.3) {
        .navigation-full-dropdown {
            height: 275px;
        }
    }

    @media (min-resolution: 1.2dppx) and (max-resolution: 1.29dppx),
           (-webkit-min-device-pixel-ratio: 1.2) and (-webkit-max-device-pixel-ratio: 1.29) {
        .navigation-full-dropdown {
            height: 300px;
        }
    }

    @media (min-resolution: 1.1dppx) and (max-resolution: 1.19dppx),
           (-webkit-min-device-pixel-ratio: 1.1) and (-webkit-max-device-pixel-ratio: 1.19) {
        .navigation-full-dropdown {
            height: 275px;
        }
    }
}

@media screen and (max-width: 1023px) {
	header#header {
		height: auto;
	}

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

	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: -35px;
    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 white; /* Creates the arrow pointing up */
}

/* scroll */
header#header.scroll {
	background-color: var(--color-primary);
	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: 70px;
	margin-top: 12px;
}

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

header#header.scroll .logo figure{
	padding: 0
}
.navigation-full-dropdown.scroll {
	top: 100px;
}
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 (max-width: 1023px)
{
	.dropdown.show {
		display: block
	}

	.dropdown .dropdown-content {
		display: flex !important;
		flex-direction: column;
		gap: 3px;
		text-align: center;
		& > a {
			color: white;
		}
	}

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

/* ---------- 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;
}

footer::before {
	content: "";
	width: 100%;
	height: 100%;
	background-image: url("/e2/site/rijnraad/content/site/image/footer.png");
	opacity: 0.35;
	position: absolute;
	left: 20%;
	overflow: hidden;
	background-repeat: no-repeat;
}

footer a {
	color: black;
	text-decoration: underline;
}

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

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

footer > * {
	grid-column: 1;
}

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

footer > .container {
	max-width: var(--base);
	margin: 0 auto;
	z-index: 999;
	position: relative;
}

footer > .container > .grid {
	display: grid;
	grid-template-columns: var(--grid-2) var(--grid-2) var(--grid-3) var(--grid-5);
	gap: var(--offset);
}

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);
}

footer .bottom {
	padding-top: 75px;
	padding-bottom: 25px;
	display: flex;
	width: 100%;
	justify-content: space-between;
}

.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 > div:nth-last-child(1) {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

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

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

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

@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/rijnraad/content/site/image/footer_mobile.png);
		position: absolute;
		overflow: hidden;
		left: 0;
		background-repeat: no-repeat;
		background-size: cover;
	}

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

	}

	.bottom > ul {
		gap: 12px;
	}
}

@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);
	}
}
/* ---------- layout---------- */
.wrapper {
	width: var(--base); 
	margin-left: auto; 
	margin-right: auto; 
}

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


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

@media screen and (max-width: 1023px) {
	.wrapper {
		padding-left: var(--offset);
		padding-right: var(--offset);
	}
}
/* ---------- vars ---------- */
section.page > .title {
	--title-size: 450px;
}

section.page > .title .overlay .pattern:before {
	--overlap: 0;
}


/* ---------- layout ---------- */
section.page > .title {
	display: grid;
	grid-template-rows: var(--title-size) var(--offset);
}

section.page > .title .background {
	grid-column: 1;
	grid-row: 1;
}

section.page > .title .overlay { 
	grid-column: 1;
	grid-row: 1 / -1;
	z-index: 100;
	display: grid;
	align-items: end; 
}

section.page > .title .overlay .wrapper { 
	display: grid;
	grid-template-columns: var(--grid-2) var(--grid-4) var(--offset);
	grid-template-rows: auto var(--offset-small) var(--offset-small) var(--offset-small);
	gap: 0 var(--offset);
}

section.page > .title .overlay .box {
	grid-column: 1 / 3;
	grid-row: 1 / 4;
}

section.page > .title .overlay .pattern {
	grid-column: 2 / 4;
	grid-row: 2 / 5;
}

section.page > .title[data-layout="center"] .overlay .wrapper {
	grid-template-columns: var(--grid-6);
	justify-content: center;
}

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

section.page > .title .overlay .box {
	background: var(--color-yellow);
	padding: var(--offset); 
}

section.page > .title .background {
	background-size: cover;
	background-position: 50%;
}

section.page > .title .overlay article {
	color: white;
}

section.page > .title[data-layout="center"] .overlay article {
	text-align: center
}

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


@media screen and (max-width: 1023px)
{
	section.page > .title {
		display: grid;
		grid-template-rows: 200px 100px auto;
	}

	section.page > .title .background {
		grid-column: 1;
		grid-row: 1 / 3;
	}

	section.page > .title .overlay,
	section.page > .title[data-layout="center"] .overlay { 
		grid-column: 1;
		grid-row:  1 / 4;
		background: linear-gradient(-180deg, rgba(27, 27, 27, 0) 0px, rgba(27, 27, 27, 1) 300px);
	}

	section.page > .title .overlay .wrapper,
	section.page > .title[data-layout="center"] .overlay .wrapper { 
		grid-template-columns: var(--offset) 1fr var(--offset);
		padding-top: 230px; 
		padding-bottom: var(--section-spacing);
		gap: 0;
	}
}
/* ---------- vars ---------- */

/* ---------- layout ---------- */
section.page .page-text {
	display: grid;
	grid-template-rows: var(--offset) var(--offset) auto var(--offset) var(--offset);
	grid-template-columns: calc(50% + (var(--offset-small) + var(--grid-3)));
}

section.page .page-text .content {
	grid-column: 1 / 3;
	grid-row: 3;
	z-index: 100;
}

section.page .page-text .background {
	grid-column: 2;
	grid-row: 2 / 5;
}

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

section.page .page-text .wrapper {
	display: grid; 
	grid-template-columns: var(--grid-7) var(--grid-4);
	grid-template-rows:1fr;
	grid-template-areas: "article aside";
	gap: var(--offset); 
	justify-content: space-between;
}

section.page .page-text[data-layout="spacing"] .wrapper {
	grid-template-rows: var(--offset) auto var(--offset);
	grid-template-areas: 
		". aside" 
		"article aside"
		". aside";
	gap: 0 var(--offset);
	align-items: start;
}

section.page .page-text .wrapper > article { grid-area: article;}
section.page .page-text .wrapper > aside { grid-area: aside;}

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

section.page .page-text .background {
	opacity: 1;
	background: var(--gradient-bronze);
}

section.page .page-text .wrapper > aside > * + * {
	margin-top: var(--offset);
}

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

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

	section.page .page-text {
		display: grid;
		grid-template-rows: var(--offset) var(--offset) auto var(--offset) var(--offset);
		grid-template-columns: auto var(--offset);
	}

	section.page .page-text .content {
		grid-column: 1 / 3;
		grid-row: 3;
		z-index: 100;
	}
	
	section.page .page-text .background {
		grid-column: 2;
		grid-row: 2 / 5;
		display: none;
	}

	section.page .page-text .wrapper,
	section.page .page-text[data-layout="spacing"] .wrapper {
		display: grid; 
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		grid-template-areas: 
			"article" 
			"aside";
		gap: var(--offset); 
	}

	section.page .page-text .wrapper[data-mobile-order="flipped"] {
		grid-template-areas: 
			"aside"
			"article"; 
	}
	
}


/* ---------- vars ---------- */
section.page .page-full {
	--font-size: 1.2em;
	--line-height: 1.7em;
	--page-column-size: auto var(--grid-12) auto;
}

section.page .page-full[data-size="large"] {
	--page-column-size: auto var(--grid-10) auto;
}

section.page .page-full[data-size="medium"] {
	--page-column-size: auto var(--grid-8) auto;
}

section.page .page-full[data-size="half"] {
	--page-column-size: auto var(--grid-6) auto;
}


/* ---------- layout ---------- */
section.page .page-full {
	display: grid; 
	grid-template-columns: var(--page-column-size);
	gap: var(--offset);
}

section.page .page-full > .content {
	grid-column: 2;
}

section.page .page-full {
	padding: var(--section-spacing) 0;
}

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


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


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

	section.page .page-full > .content {
		grid-column: 1;
		padding: var(--offset-small); 
	}
}
/* ---------- vars ---------- */


/* ---------- layout ---------- */
section.page .page-form {
	display: grid; 
	grid-template-columns: 1fr;
	grid-template-rows: var(--offset) 1fr var(--offset);
}

section.page .page-form .background {
	grid-column: 1;
	grid-row: 1 / -1;
	display: grid;
	grid-template-columns: calc(50% - var(--grid-1)) 1fr;
}

section.page .page-form .content {
	grid-column: 1;
	grid-row: 2;
	z-index: 100;
	display: grid; 
	grid-template-columns: var(--grid-4) var(--grid-6) var(--grid-2);
	justify-content: center;
	gap: var(--offset); 
}

section.page .page-form .content > article {
	margin-top: var(--offset); 
}

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

section.page .page-form .background div:last-child {
	background: var(--color-black); 
}


section.page .page-form .content .form-content {
	background: var(--color-gray);
	padding: var(--offset);
}

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


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

	section.page .page-form .background {
		grid-template-columns: 1fr;
	}

	section.page .page-form .content {
		padding: 0 var(--offset); 
		grid-template-columns: 1fr;
	}
}

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

/* ---------- layout ---------- */
section.page .map .image {
	position: relative;
	display:grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

section.page .map .image > div {
	grid-row: 1;
	grid-column: 1;
}

section.page .map .image .units { z-index: 100; }

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

section.page .map {
	padding: var(--offset) 0;
}

section.page .map g[data-state="available"] {--color: var(--available); }
section.page .map g[data-state="reserved"] {--color: var(--reserved); }
section.page .map g[data-state="sold"] {--color: var(--sold); }
section.page .map g[data-state="unavailable"] {--color: var(--unavailable); }
section.page .map g:not([data-state="unavailable"]):hover {--color: var(--hover); }

section.page .map .image .units svg > g {
	opacity: 0;
	transition: all var(--transition-speed);  
	cursor: pointer;
}

section.page .map .image .units svg > g[data-state="unavailable"] {
	cursor: default;
}

section.page .map .image .units svg > g .cls-1 {
	fill: var(--color);
}

section.page .map .image .units svg > g > * {
	transition: all var(--transition-speed); 
}

section.page .map .image .units svg > g[data-state] {
	opacity: 1;
}

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


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


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


/* ---------- layout ---------- */
div.details .item {
	display: none;
}

div.details .item.active{
	display: block;
}

div.details .item .state {
	position: relative;
}

div.details .item .state span {
	position: absolute;
	top: -15px;
	left: -15px;
}

div.details .item .data .row {
	display: grid; 
	grid-template-columns: 150px 1fr;
	gap: 10px;
}

div.details .item .action {
	display: flex;
	justify-content: center;
}
/* ---------- lipstick ---------- */
div.details .item .state[data-state="available"] span { background: var(--available); }
div.details .item .state[data-state="sold"] span { background: var(--sold); color: white; }
div.details .item .state[data-state="reserved"] span { background: var(--reserved); }
div.details .item .state[data-state="unavailable"] span { background: var(--unavailable); }

div.details .item .state span {
	font-size: 12px;
	line-height: 20px;
	padding: 5px 30px;
	font-weight: 700;
	text-transform: uppercase;
	box-shadow: 5px 5px 30px rgba(17,17,17,.5);
}

div.details .item figure  { 
	font-size: 0; 
	line-height: 0; 
}
div.details .item figure img { max-width: 100%; }

div.details .item .content {
	padding: var(--offset-small); 
	background: var(--color-yellow);
}

div.details .item article > * + * {
	margin-top: var(--offset-tiny); 
}

div.details .item article header h3 span:first-child {
	color: white;
	line-height: 28px;
}

div.details .item article header h3 span:nth-child(2) {
	font-size: 28px;
	line-height: 36px;
	font-weight: 300;
	text-transform: none;
}

div.details .item article header h3 span:nth-child(3) {
	font-weight: 700;
}

div.details .item .data .row {
	font-size: 14px;
	line-height: 24px;
}

div.details .item .data .row > div {
	padding: 5px;
}

div.details .item .data .row > div:last-child {
	text-align: right;
} 

div.details .item .data .row:nth-child(even)
{
	background: rgba(17,17,17,.1);
}

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


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


}
/* ---------- vars ---------- */
section.page .map .image .legend {
	--circle: 15px;
}

/* ---------- layout ---------- */
section.page .map .image .legend {
	position: absolute;
	top: calc(var(--offset) * -1); 
	left: var(--offset); 
}

section.page .map .image .legend > div {
	display: grid;
	grid-template-columns: var(--circle) 150px;
	grid-template-rows: 30px;
	gap: 15px 10px;
	align-items: start;
}

section.page .map .image .legend > div > span:first-child {
	display: block;
	width: var(--circle);
	height: var(--circle); 
}



/* ---------- lipstick ---------- */
section.page .map .image .legend {
	padding: var(--offset-tiny); 
	font-size: 12px;
	line-height: 18px;
	text-transform: uppercase;
	background: var(--color-primary);
	color: white;
	box-shadow: 5px 5px 20px rgba(17,17,17,.2);
}

section.page .map .image .legend div[data-state="available"] span:first-child { background: var(--available); }
section.page .map .image .legend div[data-state="unavailable"] span:first-child { background: var(--unavailable); }
section.page .map .image .legend div[data-state="reserved"] span:first-child { background: var(--reserved); }
section.page .map .image .legend div[data-state="sold"] span:first-child { background: var(--sold); }

section.page .map .image .legend > div > span:first-child {
	border-radius: 50%;
}

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


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


}

/* ---------- vars ---------- */
section.page .map {
	--available: #95C11F; 
	--reserved: var(--color-yellow); 
	--sold: #E01E1E;
	--unavailable: var(--color-secondary); 
	--hover: #63CADB;
}

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

section.page .map {
	display: grid; 
	grid-template-columns: 1fr 1fr;
	grid-template-rows: var(--offset) auto var(--offset);
	gap: 0;
}

section.page .map .background {
	grid-column: 2;
	grid-row: 1 / -1;
}

section.page .map > .content {
	grid-column: 1 / -1;
	grid-row: 2;
	display: grid; 
	grid-template-columns: var(--grid-9) var(--grid-3); 
	justify-content: center;
	gap: var(--offset); 
	z-index: 100;
}



/* ---------- lipstick ---------- */
section.page .map .background {
	background: var(--color-primary); 
}

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


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


}

/* @import "./page/pagefull.css";
/* ---------- vars ---------- */


/* ---------- layout ---------- */
section.page .page-form {
	display: grid; 
	grid-template-columns: 1fr;
	grid-template-rows: var(--offset) 1fr var(--offset);
}

section.page .page-form .background {
	grid-column: 1;
	grid-row: 1 / -1;
	display: grid;
	grid-template-columns: calc(50% - var(--grid-1)) 1fr;
}

section.page .page-form .content {
	grid-column: 1;
	grid-row: 2;
	z-index: 100;
	display: grid; 
	grid-template-columns: var(--grid-4) var(--grid-6) var(--grid-2);
	justify-content: center;
	gap: var(--offset); 
}

section.page .page-form .content > article {
	margin-top: var(--offset); 
}

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

section.page .page-form .background div:last-child {
	background: var(--color-black); 
}


section.page .page-form .content .form-content {
	background: var(--color-gray);
	padding: var(--offset);
}

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


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

	section.page .page-form .background {
		grid-template-columns: 1fr;
	}

	section.page .page-form .content {
		padding: 0 var(--offset); 
		grid-template-columns: 1fr;
	}
}

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


/* ---------- layout ---------- */
section.page .page-tour {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: var(--offset) var(--offset) auto var(--offset) var(--offset);
}

section.page .page-tour .background {
	grid-row: 2 / 5;
	grid-column: 1;
	display: grid;
	grid-template-columns: calc(50% - var(--grid-2));
	gap: 60px;
}

section.page .page-tour .content {
	grid-row: 3;
	grid-column: 1;
	display: grid; 
	grid-template-columns: 1fr var(--base) 1fr;
}

section.page .page-tour .content iframe {
	grid-column: 2; 
	grid-row: 1;	
	width: 100%;
	height: 70vh;
}

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

section.page .page-tour .background {
	padding: 0 var(--offset)
}

section.page .page-tour .background div {
	background-color: var(--color-bronze-soft);
}

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


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

	section.page .page-tour .background {
		grid-row: 2 / 5;
		grid-column: 1;
		display: grid;
		grid-template-columns: calc(50%);
		gap: 0px;
	}
	section.page .page-tour .background {
		padding: 0 var(--offset-small); 
	}
	

	section.page .page-tour .content {
		padding: 0 var(--offset);
	}
	

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

section.page .page-availabilty {
	--available: #00ff76;
	--sold: #ff001f;
	--reserved: #ffc700;
	--hover: #a5c5f4;
	--unavailable: white;

}

/* ---------- layout ---------- */
section.page .page-availabilty {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: var(--offset) var(--offset) auto var(--offset) auto var(--offset) ;
}

section.page .page-availabilty .background {
	grid-row: 2 / 5;
	grid-column: 1;
	display: grid;
	grid-template-columns: calc(50% - var(--grid-2));
	gap: 60px;
}

section.page .page-availabilty .content {
	grid-row: 3;
	grid-column: 1;
	display: grid; 
	grid-template-columns: 1fr var(--quarter-base) var(--quarter-base) var(--quarter-base) 1fr;
	grid-template-rows: 1fr auto auto 50px 100px 1fr;
	align-items:center;
}

section.page .page-availabilty .content .tabs {
	grid-column: 2 /5; 
	display: grid; 
	grid-template-columns: auto auto;
	gap: 2px;
	justify-content: center;
	padding-bottom: var(--offset-small);
}

section.page .page-availabilty .content .maps {

	grid-column: 2 /5; 
	grid-row: 3 / 6;	
	width: 100%;
	height: 100%;
}

section.page .page-availabilty .content .maps .image {
	display: none;
	width: 100%;
	height: 100%;
}
section.page .page-availabilty .content .maps .image.active {
	display: block;
}

section.page .page-availabilty .states {
	grid-column: 1;
	grid-row: 5;
	display: grid;
	justify-items: center;
	position: relative;
	align-items: end;

}

section.page .page-availabilty .states > div {
	display: none;
	position: absolute;
	opacity: 0; 
}

section.page .page-availabilty .states > div.active {
	display: block;	
	animation: fade-in var(--transition-speed) forwards .1s
}	

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

section.page .page-availabilty .background {
	padding: 0 var(--offset)
}

section.page .page-availabilty .background div {
	background-color: var(--color-bronze-soft);
}

section.page .page-availabilty .content .tabs a {
	display: inline-block;
	padding: 5px 30px;
	background-color: var(--color-bronze-soft);
	color: var(--color-bronze);
	font-weight: 700; 
	transition: all var(--transition-speed); 
}

section.page .page-availabilty .content .tabs a.active {
	background-color: var(--color-blue); 
	color: white;
}

section.page .page-availabilty .content svg .available{
  	fill: var(--available);
	stroke: #010202;
}

section.page .page-availabilty .content svg text,
section.page .page-availabilty .content g#getallen g { pointer-events: none; }

section.page .page-availabilty .content svg .reserved{
	fill:var(--reserved);
	stroke: #010202;
}

section.page .page-availabilty .content svg .sold {
	fill: var(--sold);
	stroke: #010202;
}

section.page .page-availabilty .content svg .unavailable {
	fill:var(--unavailable); 
	stroke: #010202;
}

section.page .page-availabilty .content svg g[id*="object_"] {
	cursor: pointer;
}

section.page .page-availabilty .content svg g[id*="object_"] > * {
	transition: all var(--transition-speed);
}

section.page .page-availabilty .content svg g[id*="object_"]:hover > * {
	fill: var(--hover);
}

section.page .page-availabilty .content .overlay {
	background-color:#fff;
	box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
	padding: var(--offset-small);
}

section .page-availabilty .overlay div:nth-child(1) {
	grid-column: 1 / 3; 
}

section.page .page-availabilty .states .state-box {
	background: white;
	box-shadow:5px 5px 15px rgba(17,17,17,.2);
	padding: calc(var(--offset-tiny)); 
	color: var(--color-text);
	font-size: 12px;
	line-height: 24px;
}

section.page .page-availabilty .states .state-box h4 {
	font-size: 20px;
	font-weight: 700;
	color: var(--color-blue);
}

section.page .page-availabilty .states .state-box h4 span {
	display: block; 
	font-size: 14px;
	font-weight: 400;
	color: var(--color-bronze);
}

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


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

	section.page .page-availabilty {
		grid-template-columns: var(--offset) 1fr var(--offset);
		grid-template-rows: var(--offset) var(--offset) auto var(--offset) auto var(--offset) ;
	}
	
	section.page .page-availabilty .background {
		grid-row: 2 / 5;
		grid-column: 1 / 4;
		grid-template-columns: calc(50% - var(--grid-2));
		gap: 60px;
	}
	
	section.page .page-availabilty .content {
		grid-row: 3;
		grid-column: 2;
		grid-template-columns: var(--offset) 1fr var(--offset);
		grid-template-rows: auto auto;
		align-items:center;
	}
	
	section.page .page-availabilty .content .maps {
		grid-column:2; 
		grid-row: 1;	
		width: 100%;
		height: 100%;
	}


}
/* ---------- vars ---------- */
section.page .page-seperator {
	--seperator-height: 450px;
}

/* ---------- layout ---------- */
section.page .page-seperator {
	display: grid; 
	grid-template-columns: 1fr;
	grid-template-rows: var(--seperator-height);
}

/* ---------- lipstick ---------- */
section.page .page-seperator .image {
	background-position: 50%;
	background-size: cover;
}

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


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


}
/* ---------- vars ---------- */
section.page-seperator.slider {
	--seperator-height: 660px;
	--seperator-nav: 40px;
	--tour-size: 120px;
}


/* ---------- layout ---------- */
section.page-seperator.slider,
section.page-seperator.slider .swiper-slide {
	max-width: 100vw;
	height: var(--seperator-height);
}

section.page-seperator.slider .swiper {
	overflow: hidden;
}

section.page-seperator.slider .image[data-show-tour] a { display: none; }

section.page-seperator.slider .image[data-show-tour="show"] {
	display: grid;
	grid-template-columns: repeat(12,var(--column));
	justify-content: center;
	align-items: end;
} 

section.page-seperator.slider .image[data-show-tour="show"] a {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: var(--tour-size);
	height: var(--tour-size); 
}

section.page-seperator.slider .image[data-show-tour="show"] a  {
	grid-column: -1;
	margin-bottom: 60px;
}


section.page-seperator.slider .navigation {
	display: flex;
	justify-content: space-between;
	position: relative;
	width: 100%;
}

section.page-seperator.slider .navigation > a {
	position: absolute;
	top: calc(((var(--seperator-height) / 2) + (var(--seperator-nav) / 2)) * -1);
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--seperator-nav);
	height: var(--seperator-nav);
}

section.page-seperator.slider .navigation > a[href="#prev"] {
	left: 0; 
}

section.page-seperator.slider .navigation > a[href="#next"] {
	right: 0;
}

[data-interactive="1"] section.page-seperator.slider {
	height: auto;
}

[data-interactive="1"] section.page-seperator.slider .swiper-wrapper {
	display: block;
}

[data-interactive="1"] section.page-seperator.slider .swiper {
	overflow: auto;
	height: auto;
}

/* ---------- lipstick ---------- */
section.page-seperator.slider .image {
	background-position: 50%;
	background-size: cover;
}

section.page-seperator.slider .navigation > a {
	background: var(--color-bronze); 
	color: white;
	transition: all var(--transition-speed);  
}

section.page-seperator.slider .navigation > a:hover {
	background: var(--color-blue);
	box-shadow: 4px 4px 10px rgba(17,17,17,.4);
}

section.page-seperator.slider .image a {
	opacity: 0; 
	transform: scale(.6) rotate(10deg);
	border-radius: 50%; 
	background: var(--color-blue);
	color: white;
	font-size: 36px;
	text-transform: uppercase;
	transition: all var(--transition-speed); 
}

section.page-seperator.slider .image a span {
	font-size: 26px;
}

section.page-seperator.slider .image a:hover {
	transform: scale(1.2) rotate(13deg); 
	background: white;
	color: var(--color-bronze); 
} 

section.page-seperator.slider .image.swiper-slide-active a {
	animation: tour-in .4s both ease-in-out .5s;
}

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

@keyframes tour-in {
	0% {
		margin-bottom: 120px;
		opacity: 0; 
		transform: scale(.6) rotate(10deg);
	}

	30% {
		opacity: 1; 
		transform: scale(1.2) rotate(10deg);
	}

	60% {
		margin-bottom: -20px;
	}

	100% {
		margin-bottom: 60px;
		transform: scale(1) rotate(10deg);
		opacity: 1;
	}
}

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


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


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


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


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


@media screen and (max-width: 1023px) {
}
.button {
	--size: 56px;
	--line-height: 33px;
	--padding: calc((var(--size) - var(--line-height)) / 2) var(--offset-small); 
}

.button .pattern:before {
	--overlap: 10px;
}

.button[data-size="small"] {
	--size: 44px;
}

.button {
	position:relative;
	font-family: var(--font-family-alwyn);
	display: inline-grid; 
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	padding: 6px 35px;
	text-align: center;
	border-radius: 30px;
	font-size: 18px;
	font-weight: 500;
	text-transform: uppercase;
	cursor: pointer;
	transition: all var(--transition-speed);
	align-items: center;
}

button {
	font-family: 'Alwyn', sans-serif;
	font-weight: 500;
}

.button-job {
    padding: 6px 25px;
    background-color: var(--color-yellow);
    border-radius: 2px;
    line-height: 18px;
    font-size: 16px;
}

.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 {
	grid-column: 1;
	grid-row: 1;
	z-index: 100;	
	/* padding: var(--padding); */
	transition: all var(--transition-speed); 
}

.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: white;
	background-color: var(--color-tertiary); 
}

.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:hover {
	filter: brightness(92%);
}

.button[data-color="primary"]:hover {
	background-color: var(--color-primary);
	color: white;
}

.button.active[data-color="primary"] {
	background-color: var(--color-primary);
	color: white;
}

.button-job:hover {
	background-color: var(--color-primary);
	color: white;
}

@media screen and (max-width: 1439px) {
	.button {
		--size: 40px;
	}
}

@media screen and (max-width: 766px) {
	.button {
		padding: 10px 20px !important;
		text-align: center;
		border-radius: 30px;
		font-size: 16px;
		font-weight: 500;
	}
} 
/* General styles for the accordion */
section.accordion {
    background-color: #f4f4f4;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    overflow: hidden;
    z-index: 0;
  }
  
  section.accordion > * {
    grid-column: 1;
    grid-row: 1;
  }
  
  section.accordion > .background {
    position: relative;
    max-height: 850px;
  }
  
  section.accordion > .background > img {
    height: 100%;
    display: block; /* This ensures there's no extra space under the image */
  }
  
  /* Container for the accordion and its content */
  section.accordion > .container {
    padding: 60px 0px;
    z-index: 2;
    position: relative;
    justify-content: center;
    display: grid;
    grid-template-columns: var(--grid-6) var(--grid-6);
    grid-template-areas: "image content";
    column-gap: var(--offset);
  }
  
  /* The first child is the image area */
  section.accordion > .container > *:first-child {
    grid-area: image;
  }
  
  /* The second child is the content area */
  section.accordion > .container > *:last-child {
    grid-area: content;
  }
  
  /* Styling for each content area */
  section.accordion > .container > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  /* Accordion button styles */
  .accordion-button {
    background-color: #FFC107;
    color: var(--color-dark);
    cursor: pointer;
    padding: 0px 20px;
    margin: 6px 0px;
    max-width: 550px;
    width: 100%;
    height: 50px; /* Changed from max-height to height */
    text-align: left;
    border: none;
    outline: none;
    border-radius: 40px;
    transition: background-color 0.4s;
    font-size: 24px;
    display: flex;
    font-family: "Alwyn", sans-serif;
    justify-content: space-between;
    align-items: center;  
}
  
  /* Active state for accordion button */
  .accordion-button.active, .accordion-button:hover {
    background-color: var(--color-tertiary);
    color: white;
  }
  
  /* Accordion content styles */
  .accordion-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.6s ease; /* Adjust time as needed */

    padding: 0 20px;
  }
  .no-display{
    display: none;
  }
  
  .accordion-button.active + .accordion-content {
    max-height: 500px; /* Adjust to the maximum possible height of your content */
  }
  
  
  /* Paragraph styles within accordion content */
  .accordion-content p {
    line-height: 36px;
    font-size: 20px;
  }
  
  .toggle-icon {
    opacity: 1; /* Full visibility */
    transition: opacity 0.3s ease; /* Smooth transition for opacity */
    font-size: 38px;
    font-weight: lighter;
    height: 40px;
  }
  
  /* Style when toggling the icon */
  .toggle-icon.toggle {
    opacity: 0; /* Make icon invisible */
  }
    

  [data-interactive="1"] .accordion-content {
   overflow: visible;
   }

  @media screen and (max-width: 766px) {
  section.accordion > .background {
    display: none !important;
    }
  section.accordion > .container {
    max-width: var(--base);
    width: 100%;
    margin: auto;
    display: unset;
    }
  .accordion-content{
    padding: 0 4px;
   }
  }
.square {
    clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%);
    background-color: var(--color-primary);
    position: absolute;
    top: -340px;
    right: -470px;
    width: 1200px;
    height: 1200px;
    border-radius: 15px;
    transform: rotate(30deg);
    overflow: hidden;
}

.square::before {
    content: "";
    transform: rotate(-30deg);
    position: absolute;
    width: 100%;
    height: 120%;
    z-index: -1;
    background-repeat: no-repeat;
    background-image: url("/e2/site/rijnraad/content/site/image/amy-dekker-MD0g_0FbuA8-unsplash.png");
    background-position: center;
    background-size: cover;
}

.square-left {
    position: relative;
    z-index: 0;

}

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


/* ---------- layout ---------- */
.text .text-column {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--offset);
	place-items: start;
}

.text .text-column[data-vertical="center"] { align-items: center; }
.text .text-column[data-vertical="bottom"] { align-items: end; }

/* ---------- lipstick ---------- */
.text .text-column > div > * + * {
	margin-top: var(--offset-small); 
}

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

@media screen and (max-width: 1023px) {
	.text .text-column {
		grid-template-columns: 1fr;
		gap: var(--offset);
		place-items: start;
	}
	
	.text .text-column[data-vertical="center"],
	.text .text-column[data-vertical="bottom"] { align-items: start; }
}
main .faq-module .container  { width: 600px; display: flex; flex-direction: column;}
main .faq-module .question { margin: 0px; }
main .faq-module .question + .question { margin: 10px 0px 0px 0px; }
main .faq-module .question .answer {  overflow: hidden; height: 0; }
main .faq-module .question .title { padding: 0; text-decoration: Underline; font-weight: 700; color: var(--color-blue); }
main .faq-module .question .title span { color: var(--color-bronze); }
main .faq-module .question .inner { display: flex; justify-content: flex-start; }
main .faq-module .question .inner .text-answer { margin-left: 15px; order: 1; }
main.static .faq-module .question .answer {  overflow: auto; height: auto; }
main.static .faq-module .question { padding: 10px; border: 1px solid #ddd; }
main.static .faq-module .question span { color: var(--color-bronze); }

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


/* ----------  ---------- */

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

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

.text[data-text-size="small"],
.text[data-text-size="small"] p {
	--font-size: 14px;
	--line-height: 24px;
	font-size: var(--font-size); 
	line-height: var(--line-height);
}

.text > * + *,
[data-interactive="1"] .text > * + * {
	margin-top: var(--line-height); 
}

.text h3 + p {
	margin-top: 15px; 
}

.text-large p {
	font-size: 1.4em;
	line-height: 1.4em;
	font-weight: 400;
	position: relative;
}

.text ul li,
.text ol li {
	padding-left: var(--offset-small); 
}

.text ul li:before,
.text ol li:before {
	font-family: "Font Awesome 6 Pro";
	content: "\f105";
	color: var(--color-primary);
	position: absolute; 
	margin-left: -20px;
}

.text ol li:before { font-family: var(--font-family); font-weight: 700; }
.text ol li:nth-child(1):before { content: "1"; }
.text ol li:nth-child(2):before { content: "2"; }
.text ol li:nth-child(3):before { content: "3"; }
.text ol li:nth-child(4):before { content: "4"; }
.text ol li:nth-child(5):before { content: "5"; }
.text ol li:nth-child(6):before { content: "6"; }
.text ol li:nth-child(7):before { content: "7"; }
.text ol li:nth-child(8):before { content: "8"; }
.text ol li:nth-child(9):before { content: "9"; }
.text ol li:nth-child(10):before { content: "10"; }


/* .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;
}
 */
.text p a,
.text ul a {
	color: var(--color-primary); 
	transition: all var(--transition-speed); 
}

.text p a:hover,
.text ul a:hover {
	color: var(--color-secondary);
} 

.text figure img {
	max-width: 100%;
}


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

}

@media screen and (max-width: 1023px) {
	.text-large p {
		font-size: 18px;
		line-height:28px;
		font-weight: 400;
	}
}

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

section.hero.mobile {
    display: none;
}

/* ---------- layout ---------- */
section.hero {
    background:
        url('/e2/site/rijnraad/content/site/image/rijnraad_header.webp') center / cover no-repeat,
        linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0) 70%),
        url('/e2/site/rijnraad/content/site/image/loading_header.webp') right / contain no-repeat;
    height: var(--hero-height);
    margin-bottom: -120px;
}

section.hero.flipped {
    background:
        url('/e2/site/rijnraad/content/site/image/rijnraad_header_flipped.webp') right top / cover no-repeat,
        linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0) 70%),
        url('/e2/site/rijnraad/content/site/image/loading_flipped.webp') left top no-repeat;
    margin-bottom: -300px;
    position: relative;
}

section.hero > .container {
    height: 100%;
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: var(--grid-5) var(--grid-7);
    column-gap: var(--offset);
    color: white;
}

section.hero > .container > div > p {
    font-size: 18px;
    color: white;
    font-weight: 200;
}

section.hero > .container > div {
    display: flex;
    flex-direction: column;
    gap: 35px;
    margin-right: 200px;
}

section.hero > .container > div:first-child {
    margin-top: -150px;
    z-index: 200;
}

section.hero > .container > div > div {
    display: flex;
    gap: 35px;
}

/* ---------- 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);
}

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

@media screen and (max-width: 1630px) {
    section.hero > .container > div:first-child {
        margin-top: -100px;
    }
}

@media screen and (max-width: 1366px) {
    section.hero > .container {
        grid-template-columns: var(--grid-8) var(--grid-4);
    }
}

@media screen and (max-width: 1180px) {
    section.hero, section.hero.flipped {
        display: none;
        background-size: cover !important;
        --hero-height: 80vh !important;
        margin-bottom: 0px !important;
    }

    section.hero.mobile {
        display: block;
        background: url('/e2/site/rijnraad/content/site/image/loading_header_mobile.webp') center / cover no-repeat;
        background-blend-mode: luminosity;
        position: relative;
        max-height: 500px;
        z-index: 1;
        background-position: center !important;
    }
    
    section.hero.mobile::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 332;
        filter: grayscale(100%);
    }

    section.hero.mobile::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.8;
        background-color: var(--color-primary);
        z-index: 3;
    }

    section.hero.mobile h1 {
        position: relative;
        z-index: 111;
    }

    section.hero > .container > div > p {
        font-size: 18px;
        color: white;
        font-weight: 200;
    }

    section.hero > .container {
        height: 100%;
        display: grid;
        align-items: center;
        justify-content: center;
        text-align: center;
        grid-template-columns: var(--grid-12);
    }

    section.hero > .container > div {
        padding-left: 0px;
        margin-right: 0px;
    }

    section.hero > .container > div > div {
        display: flex;
        gap: 20px;
        flex-direction: column;
        align-items: center;
    }

    section.hero > .container > div > div > a {
        width: 100%;
    }

    section.hero > .container > .test {
        position: relative;
        display: none;
        height: 100%;
        width: 100%;
        margin-left: 20%;
        background-position: right top;
    }

    section.hero .content .wrapper {
        grid-template-columns: 1fr;
    }

    section.hero > .container > div:first-child {
        margin-top: 0px;
    }
}


@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-6) var(--grid-6);
    }
    section.hero > .container > div > div {
        max-width: 250px;

    }
}


@media screen and (min-width: 2100px) {
    section.hero {
        background:
            url('/e2/site/rijnraad/content/site/image/rijnraad_header.webp') center / cover no-repeat,
            url('/e2/site/rijnraad/content/site/image/header-rekenkamer.png') right / cover no-repeat;
        margin-bottom: -200px !important;
    }
}

@media (min-width: 480px) and (max-width: 940px) and (max-height: 500px) {
    section.hero.mobile {
        --hero-height: 140vh !important;
    }
}

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


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

.intro{
	padding-top:120px;
	display: grid;
	grid-template-columns: var(--grid-6);
	justify-content: center;
	color: black;
	text-align: center;
}
.intro  h2{
	color: #111111;
}
.intro  p{
	padding-top: 37px;
	font-size: 20px;
	line-height: 35px;
	font-weight: 300;
	color: #111111;

}
section.introduction  .container {
    padding-top: 60px;
    justify-content: center;
    display: grid;
    grid-template-columns: var(--grid-4) var(--grid-4) var(--grid-4);
    gap: var(--offset);
    grid-row: auto;
    overflow: hidden; 
	padding-bottom: 120px;
}

section.introduction  .container a .item {
    padding: 30px;
    border-radius: 15px;
    border: 1px solid var(--color-gray);
    position: relative;
	display: flex;
	flex-direction: column;
    overflow: hidden; 
	background-color: white;

}
section.introduction  .container a .item  * {
	transition: all 0.35s ease-in-out;
} 
section.introduction  .container a .item  span { 
    color: var(--color-dark);
    font-size: 16px;
    line-height: 36px;
	padding-bottom: 29px;
}

section.introduction  .container a .item  p {
	padding-top: 30px;
    font-size: 18px;
    line-height: 32px;
    font-weight: 300;
    color: var(--color-dark);
}

section.introduction  .container a .item  div {
    background-color:#7a9894;
    width: 100%;
    height: 100%;
    border-radius: 32220px;
    position: absolute;
    right: -68%;
    top: -60%;
}

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

section.introduction  .container a .item  div {
    background-color:#7a9894;
    width: 100%;
    height: 100%;
    border-radius: 32220px;
    position: absolute;
    right: -63%;
    top: -71%;
}
section.introduction .container a .item div i {
    bottom: 12%;
    position: absolute;
    font-size: 50px;
    left: 16%;
    color: white;
    font-weight: 300;
}
}
section.introduction  .container a .item  div  i {
bottom: 14%;
position: absolute;
font-size: 55px;
left: 15%;
color: white;
font-weight: 300;
}
section.introduction  .container a .item  i{
color: var(--color-header);
position: relative;
display: flex;
justify-content: flex-end;
font-size: 36px;
}
section.introduction  .container a .item  h3{
font-size: 26px;

}
section.introduction  .container  div:hover {
background-color: #92929213;
& h3{
color: var(--color-secondary);

}
& div{
	background-color: var(--color-secondary);

}
& div  i{
		color: var(--color-dark);
	   
}
& a  i{
	color: var(--color-secondary);
}

}

section.introduction  .container  .usp-contact{
	background-color: transparent;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 30px;
	padding: 0px 30px;
}
section.introduction  .container  .usp-contact:hover{
	background-color: transparent !important;
}
section.introduction  .container  .usp-contact  p:nth-child(1){
	color: var(--color-dark);
	font-size: 19px;
	line-height: 36px;
	font-weight: 600;
}
section.introduction  .container  .usp-contact  p:nth-child(2){
	color: var(--color-dark);
	font-size: 18px;
	line-height: 32px;
	font-weight: 300;
}
section.introduction  .container  .usp-contact  div{
display: flex;
flex-direction: column;
gap: 3px;
background-color: transparent;
	&  a{
	display: flex;
	font-size: 16px;
	color: black;
align-items: center;
gap: 15px;
	line-height: 24px;
	font-weight: 300;
	&  i{ 
		color: var(--color-secondary);
	}
}
}
section.introduction  .container  div  h3 {
	font-size: 28px;
	line-height: 32px; 
	
}
section.introduction  .container  .usp-contact:hover{
background-color: transparent !important;
&  *{
	background-color: transparent !important;
}
}
section.introduction  .container  .usp-contact  div   a:hover{
text-decoration: underline;
}
/* ---------- lipstick ---------- */
[data-interactive="1"] section.introduction  .container a .item  div {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: relative;
border-radius: 0;
width: 236px;
height: 276px;

}
[data-interactive="1"] section.introduction  .container a .item{
padding: 0px;
overflow: auto;
display: hide;
}
[data-interactive="1"] section.introduction  .container{
display: block;
}
[data-interactive="1"] section.introduction  .container  div:hover {
	background-color: #2F7CAD !important;
	& div{
		background-color: #2F7CAD !important;
	
	}
}
/* ---------- mediaquery ---------- */
@media screen and (max-width: 1023px) {
	section.introduction  .container a .item  div {
		background-color:#7a9894;
		width: 100%;
		height: 100%;
		border-radius: 32220px;
		position: absolute;
		top: -64%;
	}	
	.intro{
		grid-template-columns: var(--grid-11);
	}
	section.introduction .container a .item {
		padding: 30px;
		border-radius: 15px;
		border: 1px solid var(--color-gray);
		position: relative;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background-color: white;
		justify-content: space-between;
		height: 100%;
	}


}

@media screen and (max-width: 766px) {
	.intro{
		padding-top: 43px;
		display: grid;
		grid-template-columns: var(--grid-12);
		justify-content: center;
		color: black;
		text-align: center;
	}

	.intro  p {
		font-size: 14px;
		line-height: 25px;
	} 
	section.introduction  .container a .item  div  i {
		bottom: 17%;
		left: 16%;
	}
	section.introduction  .container  div  a{
		color: var(--color-header);
		position: relative;
		display: flex;
		justify-content: flex-end;
		font-size: 24px;
		}
		section.introduction  .container a .item  div {
			background-color:#7a9894;
			width: 100%;
			height: 100%;
			border-radius: 32220px;
			position: absolute;
			right: -66%;
			top: -60%;
		}	
	section.introduction  .container {
		padding-top: 30px;
		justify-content: center;
		display: grid;
		grid-template-columns: var(--grid-12);
		gap: var(--offset);
		grid-row: auto;
		overflow: hidden; /* Set overflow property to auto */
	}

		section.introduction  .container  div  span { 
			color: var(--color-dark);
			font-size: 12px;
			line-height: 25px;
			padding-bottom: 29px;
		}
		section.introduction  .container  div  p {
		font-size: 13px;
		line-height: 22px;
		font-weight: 200;
		} 
		section.introduction  .container  div  h3 {
			font-size: 24px;
			line-height: 26px; 
}
		/* section.introduction  .container  div  div {
			background-color: #7a9894;
			width: 236px;
			height: 276px;
			border-radius: 32220px;
			position: absolute;
			right: -40%;
			top: -65%;
		} */
			.usp-contact > div{
				align-items: flex-start;
			}
}
@media screen and (min-width: 766px) and (max-width: 1023px) {
	section.introduction  .container {
		padding-top: 120px;
		justify-content: center;
		display: grid;
		grid-template-columns: var(--grid-6) var(--grid-6) ;
		gap: var(--offset);
		grid-row: auto;
		overflow: hidden; /* Set overflow property to auto */
	}
	}
/* ---------- vars ---------- */
section.seperator {
	--seperator-height: 460px;
}


/* ---------- layout ---------- */
section.seperator {
	display: grid; 
	grid-template-columns: calc(50% - (var(--grid-5) + var(--offset-small))) 1fr;
	grid-template-rows: var(--offset) var(--seperator-height) var(--offset);
}

section.seperator[data-image="left"] {
	grid-template-columns: calc(50% + (var(--grid-5) + var(--offset-small))) 1fr;
}

section.seperator .image {
	grid-column: 2 / -1;
	grid-row: 2 / -1;
	z-index: 100;
}

section.seperator[data-image="left"] .image { grid-column: 1; }

section.seperator .background { 
	position: relative;
	grid-column: 1 / -1;
	grid-row: 1 / 3;
	display: grid;
	grid-template-columns: 1fr;
	align-items: stretch;
}

section.seperator[data-image="left"] .background { justify-items: end; }

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

section.seperator .background { 
	background: var(--color-black); 
}

section.seperator[data-color="gray"] .background { 
	background: var(--color-gray); 
}

section.seperator .background img {
	opacity: .5;
}



section.seperator .image {
	background-position: 50%;
	background-size: cover;
}


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


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

	section.seperator {
		--seperator-height: 40vh;
	}
}

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


/* ---------- layout ---------- */
section.mediagallery {
	display: grid; 
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	align-items: stretch;
}
section.mediagallery .background,
section.mediagallery .content {
	grid-column: 1;
	grid-row: 1;
}

section.mediagallery .background {
	display: grid;
	grid-template-columns: calc(50% - var(--grid-2));
	gap: 60px;
}

section.mediagallery[data-media-position="right"] .background {
	grid-template-columns: auto calc(50% - var(--grid-2));
}

section.mediagallery[data-media-position="right"] .background > div {
	grid-column: 2;
}

section.mediagallery .content {
	z-index: 200;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--offset);
}

section.mediagallery .content figure{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 50px 1fr;
}

section.mediagallery .content figure h3{
	text-align: center;
}

section.mediagallery .content figure img{
   	max-width: 100%;
   	height: 700px;
  	margin: auto;
}
/* ---------- lipstick ---------- */

section.mediagallery .content {
	padding: var(--offset) 0;
}


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


@media screen and (max-width: 1023px) {
	section.mediagallery .background { display: none; }
} 


/* ---------- layout ---------- */
section.textmedia {
	display: grid; 
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	align-items: stretch;
}

section.textmedia .background,
section.textmedia .content {
	grid-column: 1;
	grid-row: 1;
}

section.textmedia .background {
	display: grid;
	grid-template-columns: calc(50% - (var(--grid-2) + var(--offset-small)) );
	gap: 60px;
}

section.textmedia[data-media-position="right"] .background {
	grid-template-columns: auto calc(50% - var(--grid-2));
}

section.textmedia[data-media-position="right"] .background > div {
	grid-column: 2;
}

section.textmedia .content {
	z-index: 200;
	display: grid;
	grid-template-columns: auto var(--grid-6) var(--column) var(--grid-5) auto;
	grid-template-areas: ". image . text .";
	place-items: center center;
	gap: var(--offset);
}

section.textmedia[data-media-position="right"] .content {
	grid-template-columns: auto var(--grid-5) var(--column) var(--grid-6) auto;
	grid-template-areas: ". text . image .";
}

section.textmedia .content article { grid-area: text; }
section.textmedia .content aside { grid-area: image; }

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

section.textmedia .content {
	padding: var(--offset) 0;
}

section.textmedia .background div {
	background: var(--color-gray); 
	height: 100%;
}

section.textmedia .background[data-color="black"] div {
	background: var(--color-black);
}

section.textmedia .content aside .media.youtube {
	--height: 442px;
	display: block;
	width: var(--grid-5); 
}

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


@media screen and (max-width: 1023px) {
	
	section.textmedia .content {
		padding: var(--offset);
		grid-template-columns: 1fr;
		grid-template-areas: 
			"image"
			"text";
	
	}
	
	section.textmedia[data-media-position="right"] .content {
		grid-template-columns: 1fr;
		grid-template-areas: 
			"text"
			"image";
	}

	section.textmedia .background { display: none; }
}
/* ---------- vars ---------- */


/* ---------- layout ---------- */
.media.double-images {
	display: grid;
	grid-template-columns: 1fr var(--offset) 1fr;
	grid-template-rows: auto var(--offset) auto;
}

.media.double-images figure:first-child {
	grid-column: 1 / 3 ;
	grid-row: 1 / 3;
	z-index: 100;
}

.media.double-images figure:last-child {
	grid-column: 2 / 4;
	grid-row: 2 / 4;
}

/* ---------- lipstick ---------- */
.media.double-images figure img {
	max-width: 100%;
}

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


@media screen and (max-width: 1023px) {
	.media.double-images {
		position: relative;
	}
	
	.media.double-images:before {
		top: var(--offset); 
		left: var(--offset); 
		content: "";
		background: var(--color-bronze-soft); 
		width: calc(100% - calc(var(--offset) * 2));
		height: calc(100% - calc(var(--offset) * 2));
		display: block; 
		position: absolute;
		z-index: -1;
	}

} 
/* ---------- vars ---------- */
.media.youtube {
	--height: 551px;
}

/* ---------- layout ---------- */
.media.youtube .overlay {
	min-height: var(--height); 
	display: grid;
	place-items: center;
}

/* ---------- lipstick ---------- */
.media.youtube .overlay {
	background: rgba(17,17,17,.2);
	font-size: 60px;
	transition: all var(--transition-speed);	
}

.media.youtube {
	transform-origin: center;
	transition: all var(--transition-speed);	
	background-size: cover;
	background-position: 50%;
}

.media.youtube .overlay:hover {
	background: rgba(17,17,17,.4);
	box-shadow: 0 0 30px rgba(17,17,17,.1);
}

.media.youtube .overlay span {
	transition: all var(--transition-speed);
	color: var(--color-secondary); 
}

.media.youtube .overlay:hover span {
	animation: play-button .5s forwards ease-in;
}

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


@media screen and (max-width: 1023px) {
	.media.youtube {
		--height: 250px;
	}

}

@keyframes play-button {
	0% {
		transform: scale(1);
	}

	30% {
		transform: scale(.6);
	}

	50% {
		transform: scale(1.2);
	}

	80% {
		transform: scale(.8);
	}

	100% {
		transform: scale(1.5);
	}
}
/* ---------- vars ---------- */

.media.image .pattern:before {
	--overlap: 0;	
}
/* ---------- layout ---------- */

.media.image {
	position: relative;
	display: grid;
	grid-template-columns: var(--column) var(--grid-3) 1fr;
	grid-template-rows: var(--offset) 1fr var(--offset);
}

.media.image[data-pattern-size="small"] {
	grid-template-rows: var(--offset-small) 1fr var(--offset-small);
}
.media.image[data-pattern-size="none"] {
	grid-template-rows: 0 1fr 0;
}

.media.image[data-pattern-position="right"] {  
	grid-template-columns: 1fr var(--grid-3) var(--column);
}

.media.image figure {  grid-column: 1 / -1; grid-row: 2;  }
.media.image .pattern {  grid-column: 2; grid-row: 1 / -1;  }



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

.media.image figure {
	padding: 0;
	line-height: 0;
}

.media.image figure img {
	max-width: 100%;
}
section.picture-grid > .container{
	display: grid;
	max-width: var(--base);
	margin: 0 auto;
	justify-content: center;
	grid-template-columns: var(--grid-10);
}

section.picture-grid .media.image figure img{
	width: 100%;
}
[data-interactive="1"] .swiper-wrapper{
	display: block;
}

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


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

	.media.image[data-pattern-position="right"],
	.media.image[data-pattern-position="left"] {
		grid-template-columns: var(--offset) 40vw 1fr;
	}

	.media.image .textbox {
		font-size: 14px;
		line-height: 20px;
		width: 200px; 
	}
}



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

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

section.grid-2 {
    background-color: #f4f4f4;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    overflow: hidden;
    z-index: 0;
}
section.grid-2[data-color="gray"]{
    background-color: #f4f4f4;
}

section.grid-2[data-color="white"]{
    background-color: white;
}

section.grid-2 > * {
    grid-column: 1;
    grid-row: 1;
}

section.grid-2 > .background {
    position: relative;
    max-height: 850px;
}

section.grid-2.square-image > .background {
	max-height: 650px;
}

section.grid-2 > .background-flipped {
    display: grid;
    grid-template-columns: calc(50% + (var(--offset-small))) 1fr;
}

section.grid-2 > .background-flipped > div {
    height: 100%;
    min-width: var(--grid-6);
    background-size: cover;
    grid-column: 2;
}

section.grid-2 > .background > img {
    height: 100%;
}

section.grid-2.square-image > .background > img {
    height: auto;
}

section.grid-2 > .container {
    padding: 60px 0px;
    z-index: 2;
    position: relative;
    justify-content: center;
    display: grid;
    grid-template-columns: var(--grid-1) var(--grid-5) var(--grid-1) var(--grid-5) var(--grid-1);
    grid-template-areas: ". image . content .";
    grid-row: 1;
    column-gap: var(--offset);
}

section.grid-2 > .container[data-flipped="1"] {
    grid-template-areas: ". content .  image .";
}

section.grid-2 > .container > *:first-child {
    grid-area: image;
}

section.grid-2 > .container > *:last-child {
    grid-area: content;
    gap: 35px;
    & h2 {
        color: var(--color-dark);
    }
    & h4 {
        color: var(--color-dark);
        padding-top: 0px;
    }
    & p {
        padding-top: 0px;
    }
    & a {
        margin-top: 0px;
        max-width: 280px;
    }
}

section.grid-2 > .square-left {
    z-index: 0;
    position: relative;
}

section.grid-2 > .container > div > .media{
    padding: 0 !important;
    display: block !important;
}

section.grid-2 > .container > div > div > figure > img {
    aspect-ratio: 550/550;
    object-fit: cover;
    max-width: 550px;
    max-height: 550px;
    border-radius: 15px;
}

section.grid-2.square-image > .container > div > div > figure > img {
    aspect-ratio: 550 / 550;
    object-fit: cover;
    max-width: 550px;
    border-radius: 15px;
}

section.grid-2 > .container > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

section.grid-2-text {
    overflow: hidden;
    z-index: 0;
    &  a{
        max-width: 280px;
    }
}

section.grid-2-text > .container {
    padding: 80px 0px 120px 0px;
    z-index: 2;
    position: relative;
    justify-content: center;
    margin: 0 auto;
    display: grid;
    max-width: var(--base);
    grid-template-columns:  var(--grid-2) var(--grid-1) var(--grid-6);
    grid-template-areas: " title . text";
    grid-row: 1;
    column-gap: var(--offset);
}

section.grid-2-text h2 {
    font-weight: 300;
    text-align: right;
    min-height: 230px;
    max-height: 230px;
    min-width: 230px;
    max-width: 240px;
}

section.grid-2-text .text-large > p {
    font-size: 26px;
    line-height: 42px;
    font-weight: 300;
}

section.grid-2-text > .container > div:nth-child(1) {
    grid-area: title;
}

section.grid-2-text > .container > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 30px;
    grid-area: text;
}

section.grid-2-text .flex-container{
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
margin-top: 55%;
}
section.grid-2-text .flex{
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 20px;
    & h4 {
        font-size: 24px;
        white-space: nowrap;
    }
    & i {
       color: var(--color-secondary);
       font-size: 36px;
    }
}
section.grid-2-text .icon-grid{
    height: 100%;
    display: flex;
    align-items: center;
    & > i{
    color: var(--color-secondary);
    font-size: 150px;
    display: flex;
    justify-content: center;
    }
}
/* ---------- lipstick ---------- */

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


@media screen and (max-width: 1630px) {
section.grid-2 > .background {
    position: relative;
    margin-left: -10%;
}

section.grid-2-text > .container {
    grid-template-columns: var(--grid3) var();
}

section.grid-2-text h2 {
    margin-left: 5vw;
}
}

@media screen and (max-width: 1368px) {
    section.grid-2 > .background {
        margin-left: -16%;
    }

    section.grid-2-text h2 {
        margin-left: 2vw;
        margin-top: 5vh;
    }
}
    @media screen and (max-width: 1200px) {
        section.grid-2 > .background {
            margin-left: -30%;
        }
        section.grid-2 > .container > div > div > figure > img {
            aspect-ratio: 1/1;
            object-fit: cover;
            border-radius: 15px;
            max-width: 450px;
        }

        section.grid-2-text h2 {
            margin-left: -2vw;
            margin-top: 5vh;
        }

        .media.image figure {
            justify-self: center;
            margin-bottom: 50px;
        }
    }

@media screen and (max-width: 1180px) {
    section.grid-2-text h2 {
        min-height: unset;
        max-height: unset;
        min-width: unset;
        max-width: unset;
        margin-left: 0px;
    }
}

@media screen and (max-width: 1023px) {
    section.grid-2-text > .container {
        grid-template-columns: 1fr; /* Makes it a single column */
        grid-template-areas:
            "title"
            "text";
   		gap: var(--offset);
        padding: 40px 0px 40px 0px;
    }
    section.grid-2-text .flex{
        display: flex;
        flex-direction: row-reverse;
        justify-content: start;
        align-items: center;
        gap: 20px;
    }
    section.grid-2-text .flex-container{
        margin-top: 20px;
    }
    section.grid-2-text .text-large > p {
        font-size: 18px;
        line-height: 30px;
        font-weight: 300;
    }
    section.grid-2-text h2 {
        text-align: left;
    }
	section.grid-2 > .container > *:last-child {

        & h4 {

            font-size: 19px;
            line-height: 30px;
            font-weight: 200;
        }
        & h2 {
            font-size: 30px;
            line-height: 36px;
            font-weight: 400;
        }

        & p {
            font-size: 15px;
            line-height: 27px;
            font-weight: 200;
        }
        & a {
            max-width: 200px;
        }
    }

    section.grid-2 > .container {
        grid-template-columns: 1fr; /* Adjust column layout for mobile */
        grid-template-areas: "image" "content"; /* Adjust grid areas for mobile */
        padding: 30px 0; /* Adjust padding for mobile */
        height: 100%;
        display: grid;
        align-items: center;
        justify-content: center;
        text-align: left;
        grid-template-columns: var(--grid-12);
        background: url('/e2/site/rijnraad/content/site/image/media_block_start.webp') no-repeat;
        background-size: 80%;
        background-position-x: -70px;
        background-position-y: -190px;
    }

	section.grid-2 {
	    display: block;
	}

	section.grid-2 > .background {
	    display: none;
	}

	section.grid-2 > .grid-2 > .container > div ul {
		list-style-type: unset;
	}

	section.grid-2 > .container[data-flipped="1"] {
	    grid-template-columns: 1fr; /* Adjust column layout for mobile */
	    grid-template-areas: "image" "content"; /* Adjust grid areas for mobile */
	    padding: 30px 0; /* Adjust padding for mobile */
	    height: 100%;
	    display: grid;
	    align-items: center;
	    justify-content: center;
	    text-align: left;
	    grid-template-columns: var(--grid-12);
	    background: url('/e2/site/rijnraad/content/site/image/media_block_end.webp') no-repeat;
	    background-size: 120%;
	    background-position-x: 90vw;
	    background-position-y: -40vh;
	}

	section.grid-2 > .container > div > div > figure > img {
	    border-radius: 15px;
	    width: 100%;
	}
    section.grid-2-text .icon-grid{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        & > i{
        color: var(--color-secondary);
        font-size: 120px;
        display: flex;
        justify-content: center;
        }
    }

}

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

	section.grid-2 > .container[data-flipped="1"] {
	    grid-template-columns: 1fr; /* Adjust column layout for mobile */
	    grid-template-areas: "image" "content"; /* Adjust grid areas for mobile */
	    padding: 30px 0; /* Adjust padding for mobile */
	    height: 100%;
	    display: grid;
	    align-items: center;
	    justify-content: center;
	    text-align: left;
	    grid-template-columns: var(--grid-12);
        background: url('/e2/site/rijnraad/content/site/image/media_block_start.webp') no-repeat;
        background-size: 57vh;
        background-position-x: -70px;
        background-position-y: -100px;
        gap: var(--offset);
	}
    section.grid-2 > .container {
        grid-template-columns: 1fr; /* Adjust column layout for mobile */
        grid-template-areas: "image" "content"; /* Adjust grid areas for mobile */
        padding: 30px 0; /* Adjust padding for mobile */
        height: 100%;
        display: grid;
        align-items: center;
        justify-content: center;
        text-align: left;
        grid-template-columns: var(--grid-12);
        background: url('/e2/site/rijnraad/content/site/image/media_block_start.webp') no-repeat;
        background-size: 83%;
        background-position-x: -60px;
        background-position-y: -200px;
        gap: var(--offset);
    }

    .media.image figure {
        margin-bottom: 0px
    }

    section.news-block > .container > div > .card > a {
        padding: 10px 20px 20px 0px;
    }

}
@media screen and (max-width: 600px){
    section.grid-2 > .container {
        background-size: 90%;
        background-position-x: -60px;
        background-position-y: -150px;
        }
    }


@media screen and (max-width: 445px){
section.grid-2 > .container {
    background-size: 100%;
    background-position-x: 0px;
    background-position-y: -10px;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1180px) {
    section.grid-2-text h2{
    text-align: left;
    }
    section.grid-2-text > .container {
        padding: 80px 0px 120px 0px;
        z-index: 2;
        position: relative;
        justify-content: center;
        margin: 0 auto;
        display: flex;
        max-width: var(--base);
        column-gap: var(--offset);
        flex-direction: column;
        gap: 20px;
    }
    }

section.news-block > .container {
   display: grid;
   justify-content: center;
   grid-template-columns: var(--grid-4) var(--grid-4) var(--grid-4);
   gap: var(--offset);
   grid-row: 1;
   padding: 120px 0px;
   max-width: var(--base);
   margin: 0 auto;
}
section.news-block > .container.no-padding {

padding: 0;
}
section.news-block > .container > .intro-nieuws-text > div > p:nth-child(1) {
   font-size: 18px;
   line-height: 32px;
   color: var(--color-dark);
   font-weight: 300;
   padding-top: 20px;
}

section.news-block > .container > .intro-nieuws-text > div > p:nth-child(2) {
   font-size: 16px;
   line-height: 32px;
   color: var(--color-dark);
   font-weight: 300;
   padding-top: 20px;
}
section.news-block > .container > div {
   display: flex;
   flex-direction: column;
   gap: 13px;
}

section.news-block > .container > div > .card {
   width: 100%;
   height: 100%;
   border-radius: 0px 10px 10px 10px;
   overflow: hidden;
   border: 1px solid #e5e5e5;
   transition: all 0.3s ease-in-out;
   cursor: pointer;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

section.news-block > .container > div > .card > div > div > p > span {
	font-size: 0.8em;
	color: var(--color-primary);
}

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

	section.news-block > .container > div > .card {
	   height: 70%;
	   border-radius: 0px 10px 10px 10px;
	   overflow: hidden;
	   border: 1px solid #e5e5e5;
	   transition: all 0.3s ease-in-out;
	   cursor: pointer;
	   display: flex;
	   flex-direction: column;
	   justify-content: space-between;
	}

}

section.news-block > .container > div > a {
	background-color: #b7c5c4;
	max-width: 220px;
	margin-top: 40px;
}

section.news-block > .container > div > .card > div > img {
   aspect-ratio: 457/187;
   max-height: 187px;
   width: 100%;
   padding: 0px;
   object-fit: cover;
}

section.news-block > .container > .news-card {
   flex-direction: row;
   gap: 0px;
}

section.news-block > .container > .news-card > .date-label {
   background-color: #b1d6d1;
   max-height: 187px;
   border-radius: 10px 0px 0px 10px;
   display: flex;
   padding: 15px;
}

section.news-block > .container > .news-card > .date-label > p {
   font-size: 14px;
   color: var(--color-dark);
   letter-spacing: 50%;
   font-weight: 400;
   writing-mode: vertical-lr;
   transform: rotate(180deg);
   text-transform: uppercase;
   display: flex;
   line-height: 0;
   white-space: nowrap;
   justify-content: center;
}

section.news-block > .container > div > .card > div > div {
   padding: 6px 30px 0px 30px;
   display: flex;
   flex-direction: column;
   gap: 3px
}

section.news-block > .container > div > .card > div > div > div > .tag{
   background-color: var(--color-secondary);
   font-family: "Alwyn";
   text-transform: uppercase;
   font-size: 14px;
   width: fit-content;
   padding: 0px 12px;
   margin-bottom: 0;
   border-radius: 6px
}

section.news-block > .container > div > .card > div > div > div {
   display: flex;
   gap: 10px;
   margin-bottom: 12px;
}

section.news-block > .container > div > .card > a {
	color: var(--color-header);
	position: relative;
	display: flex;
	justify-content: flex-end;
	font-size: 36px;
	padding: 0px 20px 20px 0px;
}

section.news-block > .container > div > .card > div > div > p:nth-child(3) {
   font-size: 16px;
   line-height: 30px;
   color: var(--color-primary);
   font-weight: 200;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   
}

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

@media screen and (max-width: 1023px) {
   section.news-block > .container {
	      max-width: var(--base);
	      display: block;
	      margin: 0 auto;
	      padding: 50px 0px;
	}

	section.news-block > .container > .news-card > .date-label {
	   background-color: #b1d6d1;
	   max-height: 187px;
	   border-radius: 10px 10px 0px 0px;
	   display: flex;
	   padding: 5px;
	   max-width: 150px;
	}

	section.news-block > .container > .news-card {
	   flex-direction: column;
	   gap: 0px;

	}

	section.news-block > .container > .news-card:nth-child(2) {
	   padding-top: 60px;
	}

	section.news-block > .container > .news-card:nth-child(3) {
	   padding-top: 20px;
	}

	section.news-block > .container > .news-card > .date-label > p {
	    font-size: 10px;
	    color: var(--color-dark);
	    letter-spacing: 1px;
	    font-weight: 400;
	    writing-mode:initial;
	    transform: rotate(0deg);
	    text-transform: uppercase;
	    display: flex;
	    line-height: 0;
	    white-space: nowrap;
	    padding: 10px 0px;
	    width: 100%;
	    justify-content: center;
	}

	section.news-block > .container > div > .card > div > a  {
	   font-size: 30px;
	}

}
/* ---------- layout---------- */
.form .fields .row .checkboxes label {}

.form .fields .row .checkboxes label input { display: none; }


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

.form .fields .row .checkboxes label {
	display: block;
	font-weight: 600;
	cursor: pointer;
}

.form .fields .row .checkboxes label + label {
	margin-top: 5px;
}

.form .fields .row .checkboxes label > span {
	display: inline-flex;
	align-items: center;
	margin-right: 5px;
}

.form .fields .row .checkboxes label > span:before {
	display: inline-block;
	font-family: "Font Awesome 6 Pro";
	content: "\f058";
	color: var(--color-white);
	opacity: .2;
	font-weight: 700;
	font-size: 20px;
	margin-right: 5px;
}

.form .fields .row .checkboxes label > input:checked + span:before {
	color: var(--color-primary);
	content: "\f058";
	opacity: 1;
}

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


/* ---------- layout---------- */
input[type="text"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type='file']
input[type="password"],
textarea,
select {
	font-size: 14px;
	line-height: var(--line-height); 
	border: 0px; 
	padding: calc((var(--input-size) - var(--line-height)) / 2) 15px;
	border-radius: 6px; 
	background-color: var(--color-gray);
	width: 100%;
	font-family: var(--font-family);
	outline: none;
 color: var(--color-primary);
}
.custom-file-input {
	font-size: 14px;
	color: transparent;
	line-height: var(--line-height); 
	border: 0px; 
	padding: calc((var(--input-size) - var(--line-height)) / 2) 15px;
	border-radius: 6px; 
	background-color: var(--color-gray);
	font-family: var(--font-family);
	width: 100%;
	padding-right: 20px;
  }
  .custom-file-input::-webkit-file-upload-button {
	color: var(--color-primary);
	background-color: transparent;
	border: none;
	margin-left: 15px;
	font-family: var(--font-family);
	font-size: 14px;
  }
.custom-file-input::before {
	font-family: "Font Awesome 6 Pro";
	content: "\f15b";
	color: var(--color-primary);
	position: absolute;
	margin-left: 2px;

}
input::placeholder {
	font-size: 14px; 
	color: var(--color-gray-soft); 
}

/* ---------- lipstick ---------- */
select {
	min-height: var(--input-size);
}

textarea {
	min-height: calc(var(--line-height) * 4);
}

form button {
background-color: var(--color-primary);
color: white;
}
/* ---------- media query ---------- */

/* ---------- layout---------- */
.form {
	--input-size: 42px;
	--border-radius: calc(var(--input-size) / 2);
}

.form .fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px var(--offset-small);
}

.form .fields .row.extended {
	grid-column: 1;
}

.form .fields .row {
	display: grid;
	grid-template-columns:  1fr;
	gap: var(--offset-small);
	justify-content: center;
	align-items: center;
}
.row.top-align{
	align-items: flex-start !important;
}
.form .fields .row .inline {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}

.form .fields .row .inline > * + * {
	margin-left: var(--offset-small);
}


/* .form .fields .row.origin > div:last-child {
	display: grid;
	grid-template-columns: 50px 1fr;
	gap: var(--offset);
	align-items: center;
}
 */
/* ---------- lipstick ---------- */

.form .fields {
/* 	padding: var(--offset); */
}

.form .fields .row div:first-child {
	line-height: 18px;
}

.form .fields .row label {
	font-weight: 300;
	font-size: 16px;
}

.form .fields .row.hide {
	display: none;
}
button[type="submit"]{
	padding: var(--padding);
	display: flex;
	gap: 15px;
	padding: 10px 25px;
}
.form .fields .row.action {
	margin-top: var(--offset-small);
	display: flex;
	justify-content: flex-end;
}

.form .fields .row > h3 {
	font-size: 32px;
	font-weight: 300;
	position: relative;
}



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

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

	.form .fields {
		grid-template-columns: 1fr;
	}

	.form .fields .row.extended {
		grid-column: 1;
	}

	.form .fields .row {
		grid-template-columns: 1fr;
		gap: 5px;
	}

}

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


/* ---------- layout ---------- */
section.attention .content {
	display: grid; 
	grid-template-columns: calc(50% - (var(--grid-6) + var(--offset-small))) var(--grid-12);
}

section.attention .content .message {
	grid-column: 2;
	grid-row: 1;
}


/* ---------- lipstick ---------- */
section.attention {
	margin-top: 0; 
	
}

section.attention .content {
	background: var(--color-yellow); 	
	padding: var(--offset-small) 0; 
}


section.attention .content .message  {
	text-transform: uppercase;
}

section.attention .content .message h3 {
	font-weight: 700;
	font-size: 2.5em;
}

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


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


}
/* ---------- vars ---------- */
.news.list .item {
	--image-size: var(--grid-3); 
	--image-height: 260px;
	--date-size: 140px;
}

/* ---------- layout ---------- */
.news.list .item {
	display: grid; 
	grid-template-columns: calc(var(--image-size) - calc(var(--date-size) / 2)) calc(var(--date-size) / 2) calc(var(--date-size) / 2) 1fr;
	grid-template-rows: var(--offset-small) auto var(--offset-small);
	align-items: center;
}

.news.list .item .image { 
	grid-column: 1 / 3; 
	grid-row: 1 / -1; 
	align-self: stretch; 
	min-height: var(--image-height); 
}

.news.list .item .date {
	grid-column: 2 / 4;
	grid-row: 2;
}

.news.list .item .content {
	grid-column: 4;
	grid-row: 2;
}

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

.news.list .item {
	cursor: pointer;
}

.news.list .item + .item {
	margin-top: var(--offset); 
}

.news.list .item .image {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50%;
}

.news.list .item .content {
	padding-left: var(--offset-small); 
}

.news.list .item .content h3 {
	font-weight: 700;
}

.news.list .item .content article > * + * {
	margin-top: var(--offset-tiny); 
}


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


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

	.news.list .item {
		--image-size: 1fr; 
		--image-height: 260px;
		--date-size: 90px;
	}

	.news.list .item{
		display: grid; 
		grid-template-columns: var(--offset-small) var(--date-size) 1fr;
		grid-template-rows: calc(var(--image-height) - 30px) 30px auto auto;
		align-items: center;
		gap: 0px 0;
	}

	.news.list .item .image { 
		grid-column: 1 / -1; 
		grid-row: 1 / 3; 
		align-self: stretch; 
		min-height: var(--image-height); 
	}
	
	.news.list .item .date {
		grid-column: 2;
		grid-row: 2 / 5;
		align-self: start;
	}
	
	.news.list .item .content {
		grid-column: 3;
		grid-row: 4;
		padding-top: var(--offset-small); 
	}	
}
/* ---------- vars ---------- */


/* ---------- layout ---------- */
section.page.news.detail > .title .overlay .wrapper { 
	display: grid;
	grid-template-columns: var(--grid-2) var(--grid-4) var(--offset);
	grid-template-rows: auto var(--offset-small) var(--offset-small) var(--offset-small);
	gap: 0 var(--offset);
}

section.page.news.detail > .title .overlay .box {
	grid-column: 1 / 3;
	grid-row: 1 / 4;
}

section.page.news.detail > .title .overlay .pattern {
	grid-column: 2 / 4;
	grid-row: 2 / 5;
}

section.page.news.detail > .title .overlay {
	display: grid; 
	grid-template-columns: 1fr;
	grid-template-rows: 1fr auto auto;
}

section.page.news.detail > .title .overlay .date-row {
	grid-row: 2;
	display: grid;
	grid-template-columns: var(--base);
	justify-content: center;
	position: relative;
}

section.page.news.detail > .title .overlay .date-row .date {
	bottom: -20px;
	left: 40px;
}

section.page.news.detail > .title .overlay .wrapper {
	grid-row: 3;
}

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


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


@media screen and (max-width: 1023px) {
	section.page.news.detail > .title .overlay .wrapper { 
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto var(--offset-small) var(--offset-small) var(--offset-small);
		gap: 0 var(--offset);
	}

	section.page.news.detail > .title .overlay .pattern {
		grid-column: 1;
		grid-row: 2 / 5;
	}
}

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


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


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


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


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


}
section.jobs > .container {
	padding-top: 60px;
	justify-items: center;
	display: grid;
	margin: 0 auto;
	grid-template-columns: var(--grid-6) var(--grid-6);
	gap: var(--offset);
	max-width: var(--base);
	grid-row: auto;
	overflow: hidden;

}
section.jobs > .container .mobile-background {
	display: none;
}

section.jobs > .container > .item {
	cursor: pointer;
	padding: 0px;
	border-radius: 15px;
	max-height: 93%;
	max-width: 93%;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	&:after {
		content: "";
		background: url("/e2/site/rijnraad/content/site/image/werken_bij_mask.webp") no-repeat;
		background-size: cover;
		display: block;
		position: absolute;
		width: 100%; 
		height: 100%;
	}
}

section.jobs > .container > .item > .flex {
	bottom: 20px;
	padding: 0px 30px;
	align-items: center;
	position: absolute;
	display: flex;
	width: 100%;
	justify-content: space-between;
	z-index: 3;
	& > div > h3 {
		color: white;
		font-size: 26px;
		line-height: 30px;
	}
}

section.jobs > .container > div > h3 {
	padding-top: 20px;
	padding-left: 15px;
	font-size: 30px;
	line-height: 32px;
}

section.jobs.padding-jobs {
	padding-top: 126px;
    padding-bottom: 60px;
}

section.jobs > .container > div > p {
	padding-bottom: 20px;
	padding-left: 15px;
	font-size: 18px;
	line-height: 32px;
	font-weight: 300;
	color: var(--color-dark);
}

section.jobs > .container > div > img {
	aspect-ratio: 700/580;
	object-fit: cover;
	object-position: top;
}

section.jobs .flex-container {
	display: flex;
	gap: 15px;
}

section.jobs .flex {
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
    display: flex;
    gap: 10px;
    align-items: center;
    color: white;
    &  > i{ 
        color: var(--color-secondary);
    }
}

section.jobs .buttton-arrow {
	margin-top: 20px;
    & > a > i{
        color: white;
        font-size: 30px;
    }
}

section.job-detail .text-large, section.job-detail h2 {
	color: black;
}

section.jobs .text-container {
    text-align: center;
    display: flex;
    flex-direction: column;
	max-width: var(--base);
	margin: 0 auto;
    gap: 20px;
    & > header > h2{
        font-weight: 400;
    }
    &  > .text-large p{
        font-weight: 300;
    }
}

section.job-usps {
	margin-top: 100px;
	color: black  !important;
}

@media screen and (max-width: 1365px) {
	section.jobs .flex-container {
		display: none;
	}
}

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

section.jobs > .container {
	grid-template-columns: var(--grid-12);
}

section.jobs > .container .mobile-background {
	display: block;
	min-height: 280px;
	background: #425e5b;
	z-index: 1;
	position: relative;
	top: -110px;
	border-radius: 15px;v
	}
	/*section.jobs .flex-container {
		display: block;
	}*/
	section.jobs > .container > .item > .flex {
		position: relative;
		bottom: 10px;

	}
	section.jobs > .container > .item {
		cursor: pointer;
		padding: 0px;
		border-radius: 15px;
        max-height: 450px;
		max-width: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		&:after {
			content: "";
			background: url("/e2/site/rijnraad/content/site/image/werken_bij_mask.webp") no-repeat;
			background-size: cover;
			display: block;
			position: absolute;
			width: 100%; 
			height: 100%;
			background-position-y: -85px;
		}
	}
}

.mr-0{
	margin-right: 0 !important;
}

@-webkit-keyframes slide-in-top {
	0% {
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes slide-in-top {
	0% {
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

section.employees > .container {
	padding-top: 60px;
	justify-items: center;
	display: grid;
	margin: 0 auto;
	grid-template-columns: var(--grid-3) var(--grid-3) var(--grid-3) var(--grid-3);
	gap: var(--offset);
	max-width: var(--base);
	grid-row: auto;
	overflow: hidden;
	padding-bottom: 120px;
}

section.employees > .container > .item {
	cursor: pointer;
	padding: 0px;
	border-radius: 0px;
	max-width: 350px;
	max-height: 533px;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	&:after {
		content: "";
		background: url("/e2/site/rijnraad/content/site/image/employee_mask.webp") no-repeat;
		background-size: cover;
		display: block;
		position: absolute;
		width: 350px;
		height: 533px;
	}
}
section.employees > .container > .item > div {
	bottom: 13px;
	padding: 0px 20px;
	align-items: center;
	position: absolute;
	display: flex;
	width: 100%;
	justify-content: space-between;
	z-index: 3;
	& > div > h3 {
		color: var(--color-primary);
		font-size: 25px;
		line-height: 30px;
	}
	& > div > p {
		color: var(--color-primary);
		font-size: 18px;
		line-height: 24px;
		font-style: italic;
	}
	& > div > i {
		color: var(--color-primary);
		font-size: 27px;
		bottom: 4px;
		position: absolute;
		right: 30px;
	}
}

section.employees > .container > .item:hover > div {
	& > div > h3 {
		color: var(--color-secondary);
	}
	& > div > i {
		color: var(--color-secondary);
	}
	& > div > p {
		color: var(--color-secondary);
	}
}

section.employees > .container > .item > * {
	transition: all 0.35s ease-in-out;
}

section.employees .container-buttons {
	margin: 0 auto;
    justify-content: center;
    display: flex;
    gap: 20px;
}
.container-buttons > button {
	font-size: 14px;
	padding: 6px 16px;
	line-height: 18px;
}

.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
	background-color: white;
	border-radius: 10px;
	overflow: hidden;
	margin: 8% auto;
	border: 1px solid #888;
	width: 750px;
	position: relative;
	-webkit-animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
	animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.close {
	color: white;
	float: right;
	font-size: 28px;
	font-weight: bold;
	position: absolute;
	right: 10px;
	top: 3px;
}

.close:hover,
.close:focus {
	color: white;
	text-decoration: none;
	cursor: pointer;
}

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

section.employees > .container > div > h3 {
	padding-top: 20px;
	padding-left: 15px;
	font-size: 30px;
	line-height: 32px;
}
section.employees > .container > div > p {
	padding-bottom: 20px;
	padding-left: 15px;
	font-size: 18px;
	line-height: 32px;
	font-weight: 300;
	color: var(--color-dark);
}
section.employees > .container > div > img {
	aspect-ratio: 420/640;
	object-fit: cover;
	object-position: top;
}
/* ---------- mediaquery ---------- */

.modal-item {
	aspect-ratio: 740/610;
	display: grid;
	grid-template-columns: 1fr 2fr;
}
.modal-item > div {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.modal-item > div > h3,
.modal-item > div > p,
.modal-item > div > a {
	padding: 0px 20px;
}
.modal-item > div > h3 {
	padding-top: 20px;
	font-size: 18px;
	line-height: 20px;
	font-weight: bold;
}

.modal-item > div > p {
    font-size: 15px;
    line-height: 25px;
    margin-bottom: 15px;
}

.modal-item > div > a:nth-last-of-type(1) {
	padding-bottom: 20px !important;
}
.modal-item > div > div {
	position: relative;
	height: 100%;
	padding: 20px;
}
.modal-item > div > div > * {
	color: white;
}
.modal-item > img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	object-position: top;
}
.modal-item > div > a {
	color: var(--color-dark);
	& > i {
		color: var(--color-secondary);
	}
}
.modal-item > div > a {
	align-items: center;
	display: flex;
	gap: 8px;
	font-size: 15px;
	line-height: 27px;
}
.modal-item > div::after{
    content: '';
    position: absolute;
    top: 50px;
    left: -67px;
    width: 50%;
    height: 40%;
    background-image: url(/e2/site/rijnraad/content/site/image/footer.png);
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    transform: rotate(-90deg);
}





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



section.employees > .container{
	grid-template-columns: var(--grid-4) var(--grid-4) var(--grid-4);
}
}

@media screen and (min-width: 1024px) and (max-width: 1180px) {
		section.employees > .container{
				grid-template-columns: var(--grid-6)  var(--grid-6);
			}
			section.employees > .container-buttons {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr;
			}
	}
	

@media screen and (max-width: 766px) {
	.intro {
		padding-top: 43px;
		display: grid;
		grid-template-columns: var(--grid-12);
		justify-content: center;
		color: black;
		text-align: center;
	}

	section.employees .container-buttons{
		flex-direction: column;
	}

	.intro > p {
		font-size: 14px;
		line-height: 25px;
	}

	section.employees > .container > div > a {
		color: var(--color-header);
		position: relative;
		display: flex;
		justify-content: flex-end;
		font-size: 24px;
	}
	section.employees > .container {
		padding-top: 30px;
		justify-content: center;
		display: grid;
		grid-template-columns: var(--grid-12);
		gap: var(--offset);
		grid-row: auto;
		overflow: hidden; 
	}
	section.employees > .container > div > div > i {
		bottom: 14%;
		position: absolute;
		font-size: 55px;
		left: 16%;
		color: white;
		font-weight: 300;
	}
	section.employees > .container > div > span {
		color: var(--color-dark);
		font-size: 12px;
		line-height: 25px;
		padding-bottom: 29px;
	}
	section.employees > .container > div > p {
		font-size: 13px;
		line-height: 22px;
		font-weight: 200;
	}
	section.employees > .container > div > h3 {
		font-size: 24px;
		line-height: 26px;
	}
	.modal-item {
		grid-template-columns: 1fr;
	}
	.modal-item > div::after{
		content: '';
		position: absolute;
		top: 0px;
        left: 0px;
		width: 100%;
		height: 40%;
		background-image: url(/e2/site/rijnraad/content/site/image/footer.png);
		overflow: hidden;
		background-size: cover;
		background-repeat: no-repeat;
		transform: rotate(0deg);
	}
	.modal-content {
		max-width: var(--base);
}
}

@media screen and (min-width: 766px) and (max-width: 1023px) {
    section.employees > .container {
        padding-top: 60px;
        justify-content: center;
        display: grid;
        grid-template-columns: var(--grid-12);
        column-gap: var(--offset);
        grid-row: auto;
        overflow: hidden;
    }
	section.employees > .container > div > div > i {
		bottom: 11%;
		position: absolute;
		font-size: 55px;
		left: 16%;
		color: white;
		font-weight: 300;
	}
}

section.employees > .container-buttons{
    display: flex;
    max-width: var(--base);
    gap: 20px;
    justify-content: center;
& > button{
    grid-column: unset;
    grid-row: unset;
}
}

section.swiper-team-reviews .swiper-slide.review {
    background-color: white;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 30px;
    padding: 20px 40px;
    min-height: 320px;
	-webkit-box-shadow: 10px 10px 27px -12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 10px 10px 27px -12px rgba(0, 0, 0, 0.2);
	box-shadow: 10px 10px 27px -12px rgba(0, 0, 0, 0.2);
& p {
	font-size: 18px;
	font-style: italic;
}
	& > div {
		display: flex;
		gap: 20px;
		width: 100%;
		align-items: center;
	}
	& > div img{
		border-radius: 100%;
		max-width: 100px;
		max-height: 100px;
		aspect-ratio: 1/1;
		object-fit: cover;
		object-position: top;
	}
	& > div div h3 {
		font-size: 24px;
		line-height: 36px;
		color: var(--color-primary);
	}
	& > div div h4 {
		font-size: 20px;
		line-height: 36px;
		text-align: left;
		font-weight: 300;
		color: var(--color-primary);
	}
}




section.swiper-team-reviews .swiper-slide.customer {
	background-color: var(--color-primary);
	border-radius: 30px;
	max-width: 500px;
	min-height: 340px;
	display: flex;
	flex-direction: column;
	color: white;
	text-align: left;
gap: 20px;
padding: 30px;
	max-height: unset;
	-webkit-box-shadow: 10px 10px 27px -12px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 10px 10px 27px -12px rgba(0, 0, 0, 0.2);
	box-shadow: 10px 10px 27px -12px rgba(0, 0, 0, 0.2);
& p {
	font-size: 18px;
	font-style: italic;
}
	& > div {
		display: flex;
		gap: 20px;
		width: 100%;
		align-items: center;
	}
	& > div .image-klanten{
		aspect-ratio: 1 / 1;
        background: white;
        display: flex;
        border-radius: 210px;
		padding: 20px;
        width: 90px;
        height: 90px;
        display: flex;
        justify-content: center;
        align-items: center;
	}

	& > div img{
		max-width: 60px;
        max-height: 60px;
        object-fit: contain;
	}
	& > div div h3 {
		font-size: 24px;
		line-height: 36px;
		color: var(--color-white);
	}
	& > div div h4 {
		font-size: 20px;
		line-height: 36px;
		text-align: left;
		font-weight: 300;
		color: var(--color-white);
	}
}





section.swiper-team-reviews {
	background-color: #f0f0f0;
	padding-bottom: 210px;
}
section.swiper-team-reviews .container {
	max-width: var(--grid-11);
	margin: 0 auto;
	text-align: center;
	width: 100%;
}
section.swiper-team-reviews .swiper {
	overflow: visible;
}
section.swiper-team-reviews h2 {
	padding: 75px 0px;
}

@media screen and (max-width: 768px) {
section.swiper-team-reviews {
	padding-bottom: 50px;
	}
		.image-klanten{
	width: unset !important;
	height: 70px !important;
	& > img {
        max-width: 50px !important;
        max-height: 50px !important;
        object-fit: contain;
	}
	}
	section.swiper-team-reviews .swiper-slide.review, section.swiper-team-reviews .swiper-slide.customer {
	& > div div h3 {
        font-size: 20px;
        line-height: 26px;
    
    }
	}
}
/* ---------- vars ---------- */
div.date {
	--size: var(--date-size, 120px);
	--bar: 10px;
}

/* ---------- layout ---------- */
div.date {
	position: relative;
	display: grid;
	justify-content: center;
	align-items: center;
	grid-template-columns: auto auto;
	grid-template-rows: 1fr;
	gap: 10px;
	width: var(--size);
	height: var(--size); 
}

div.date:before {
	--height: calc(var(--size) - var(--offset));
	position: absolute;
	display: block;
	top: calc(50% - (var(--height) / 2));
	left: calc(var(--bar) * -1);
	content: "";
	width: var(--bar);
	height: var(--height);
}

div.date > div:last-child span {
	display: block;
}

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

div.date {
	text-transform: uppercase;
	background: var(--color-black);
	color: white;
}

div.date:before {
	background: var(--color-yellow);
}

div.date > div:first-child span {
	text-align: center;
}

div.date > div:first-child {
	font-size: 60px;
	font-weight: 700;
}

div.date > div:last-child {
	line-height: 24px;
}

div.date[data-color="yellow"],
div.date[data-color="black"]:before {
	background: var(--color-yellow);
	color: var(--color-black);
}

div.date[data-color="black"],
div.date[data-color="yellow"]:before  {
	background: var(--color-black);
	color: white;
}

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


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

	div.date {
		--size: var(--date-size, 80px);
		--bar: 5px;
		font-size: 14px;
	}

	div.date > div:first-child {
		font-size: 40px;
		font-weight: 700;
	}

	div.date > div:last-child {
		line-height: 18px;
	}
}
/* ---------- vars ---------- */

section.paginate {
	--size: 40px;
}

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

section.paginate {
	margin-top: 0; 
	padding-top: 0;
	display: flex;
	justify-content: center;
	gap: 5px;
}

section.paginate a:not(.text) {
	width: var(--size);
	height: var(--size);
	display: flex;
	justify-content: center;
	align-items: center;
}

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


section.paginate {
	border-top: 1px solid rgba(218, 218, 218, .5);
	padding: var(--offset-small);
}

section.paginate, 
section.paginate a {
	color: var(--color-black);
	transition: all var(--transition-speed); 
}

section.paginate a:not(.text) {
	background: #fff;
	box-shadow: 3px 3px 10px rgba(1,1,2,.2);
	border-radius: 2px;
	text-decoration: none;
	font-weight: 500;
	line-height: 20px;
}

section.paginate a:not(.text):not(.active):hover {
	background: var(--color-yellow); 
	color: var(--color-black);
}

section.paginate a.text {
	margin-left: calc(var(--offset-small) / 2);
	text-transform: lowercase;
	font-weight: 500;
	font-size: 0.8em;
	color: var(--color-primary);
}

section.paginate a.text:hover {
	color: var(--color-yellow);
}

section.paginate > a.text:first-child {
	margin-left: 0; 
	margin-right:calc(var(--offset-small) / 2);
}

section.paginate a.active {
	background: var(--color-primary); 
	color: #FFF;
}
section.contact-block-form > .container {
	justify-content: center;
	display: grid;
	grid-template-columns: var(--grid-3) var(--grid-6);
	gap: var(--offset);
	grid-row: auto;
	margin: 0 auto;
	overflow: hidden;
	padding-bottom: 120px;
	position: relative;
}

section.contact-block > .container {
	max-width: var(--base);
	margin: 0 auto;
	justify-content: center;
	z-index: 999;
	display: flex;
	position: relative;
}

section.contact-block > .container > .flex {
	display: flex;
	flex-direction: column;
	position: relative;
	gap: 20px;
}

section.contact-block > .container > .grid {
	display: grid;
	grid-template-columns: var(--grid-3) var(--grid-3) var(--grid-3);
	align-items: center;
	gap: var(--offset);
}

section.contact-block > .container > .grid > div > div > address {
	font-size: 16px;
	line-height: 30px;
}

section.contact-block > .container > .grid > div > p {
	font-size: 16px;
	line-height: 30px;
}

.address-flex {
	display: flex;
	gap: 10px;
	align-items: baseline;
}

.address-flex address {
	font-size: 16px;
	line-height: 26px;

	& h4 {
		font-size: 20px;
		line-height: 32px;
		margin-bottom: 10px;
	}
}

.address-flex address span {
	width: 75px;
	display: inline-block;
}

section.contact-block .address-flex > i {
	color: var(--color-primary);
}

.bottom {
	padding-top: 90px;
	display: flex;
	width: 100%;
	justify-content: space-between;
}

.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;
}

section.contact-block > .container > .grid > div:nth-last-child(1) {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

section.contact-block > .container > .grid > div:nth-last-child(1) > h4 {
	margin-top: -80px;
}

section.contact-block a {
	color: black;
}

.dropdown-contact h4 {
	font-size: 18px;
}

.dropdown-contact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
}

.dropdown-contact img {
	max-width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    object-fit: cover;
    object-position: top;
}

.dropdown-contact div {
	display: flex;
	flex-direction: column;
	& > a {
		display: flex;
		gap: 5px;
		color: black;
		align-items: baseline;

		& i{
			color: var(--color-secondary);
			text-decoration: none;
		}
	}

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

@media screen and (max-width: 766px) {
	section.contact-block > .container > .grid {
		display: grid;
		grid-template-columns: var(--grid-12);
	}

	section.contact-block-form > .container {
		grid-template-columns: var(--grid-12);
	}

	section.contact-block > .container {
		justify-content: flex-start;
		padding-top: 0;
	}
}
/* ---------- vars ---------- */
.documents {
	--icon: 60px;
	--icon-half: calc(var(--icon) / 2);
}

/* ---------- layout ---------- */
.documents {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	align-items: stretch;
	gap: var(--offset); 
}

.documents a {
	display: grid; 
	grid-template-columns: var(--icon-half) var(--icon-half) 1fr;
	align-items: stretch;
}

.documents a .icon {
	align-self: center;
	grid-column: 1 / 3;
	grid-row: 1;
	z-index: 200;
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--icon);
	height: var(--icon);
}

.documents > a div.pattern {
	grid-column: 2 / 4;
	grid-row: 1; 
	position: relative;
}

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

.documents a .icon {
	background: var(--color-black);
	color: white; 
	transition: all var(--transition-speed); 
}

.documents a .icon i:before { content: "\f15c"; }
.documents a[href*="brochure.pdf"] .icon i:before { content: "\f005"; }
.documents a[href*="tekening"] .icon i:before { content: "\f568"; }
.documents a[href*="formulier"] .icon i:before { content: "\f31c"; }

.documents a div.pattern {
	background: white;
	padding: 15px 15px 15px calc(var(--icon-half) + 15px);
	box-shadow: 5px 5px 30px rgba(17,17,17,.1);
	color: var(--color-black); 
	transition: all var(--transition-speed); 
}

.documents a:hover div.pattern {
	background: var(--color-yellow); 
}

.documents a div.pattern h3 {
	font-size: 18px;
	font-weight: 700;
	color: #000; 
	line-height: 24px;
}

.documents a div.pattern p {
	font-size: 14px;
	line-height: 24px;
	color: var(--color-text);
}

.documents a div.pattern u {
	font-size: 14px;
	font-weight: 700;
}

.documents a:hover div.pattern h3,
.documents a:hover div.pattern p,
.documents a:hover div.pattern u {
	color: #000;
}


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


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


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

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

.roadmap-intro {
	padding-top: 120px;
	display: grid;
	grid-template-columns: var(--grid-6);
	justify-content: center;
	color: black;
	text-align: center;
}
.roadmap-intro > h2 {
	color: #111111;
}
.roadmap-intro > p {
	padding-top: 37px;
	font-size: 20px;
	line-height: 35px;
	font-weight: 300;
	color: #111111;
}
section.roadmap > .container {
	padding-top: 60px;
	justify-content: center;
	display: grid;
	grid-template-columns: var(--grid-5);
	gap: var(--offset);
	grid-row: auto;
	overflow: hidden;
	padding-bottom: 120px;
}

section.roadmap > .container > div > .item {
    padding: 30px 0px;
    border-radius: 15px;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    justify-content: center;
    background-color: var(--color-primary);
    padding-left: 220px;
    width: 692px;
    height: 200px;
}
section.roadmap > .container > div{
	display: flex;

	align-items: center;
}
section.roadmap > .container > div > i{
transform: rotate(180deg);
margin-right: -10px;
color: var(--color-primary);
}
section.roadmap > .container > div > .item > * {
	transition: all 0.35s ease-in-out;
}
section.roadmap > .container > div > .item > span {
	color: white;
	font-size: 16px;
	line-height: 36px;
	padding-bottom: 29px;
}

section.roadmap > .container > div > .item > p {
	font-size: 20px;
	padding-top: 15px;
	line-height: 38px;
	font-weight: 300;
	max-width: 330px;
	color: white;
}

section.roadmap > .container > div > .item > div {
	background-color: rgba(255, 255, 255, 0.077);
    width: 250px;
    height: 250px;
    border-radius: 100%;
    position: absolute;
    left: -70px;
    bottom: -25px;
}
section.roadmap > .container > div > .item > div > i {
	bottom: 84px;
    left: 110px;
    position: absolute;
    font-size: 90px;
    color: white;
}
section.roadmap > .container > div > .item  > h3{
	color: white;
	font-size: 30px;
	font-weight: 300;
}
section.roadmap > .container > div > .item > a {
	color: var(--color-header);
	position: relative;
	display: flex;
	justify-content: flex-end;
	font-size: 36px;
}
section.roadmap > .container > div > div:hover {
	background-color: var(--color-secondary);
	& h3 {
		color: black;
	}
	& p {
		color: black;
	}
	& div > i {
		color: white;
	}
	& a > i {
		color: white;
	}
}

section.roadmap > .container > .usp-contact {
	background-color: transparent;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 30px;
	padding: 0px 30px;
}
section.roadmap > .container > .usp-contact:hover {
	background-color: transparent !important;
}
section.roadmap > .container > .usp-contact > p:nth-child(1) {
	color: var(--color-dark);
	font-size: 18px;
	line-height: 36px;
	font-weight: 600;
}
section.roadmap > .container > .usp-contact > p:nth-child(2) {
	color: var(--color-dark);
	font-size: 18px;
	line-height: 32px;
	font-weight: 300;
}
section.roadmap > .container > .usp-contact > div {
	display: flex;
	flex-direction: column;
	gap: 3px;
	background-color: transparent;
	& > a {
		display: flex;
		font-size: 16px;
		color: black;
		align-items: center;
		gap: 15px;
		line-height: 24px;
		font-weight: 300;
		& > i {
			color: var(--color-secondary);
		}
	}
}
section.roadmap > .container > .usp-contact:hover {
	background-color: transparent !important;
	& > * {
		background-color: transparent !important;
	}
}
section.roadmap > .container > .usp-contact > div > a:hover {
	text-decoration: underline;
}
/* ---------- lipstick ---------- */
[data-interactive="1"] section.roadmap > .container > div > .item > div {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: relative;
	border-radius: 0;
	width: 236px;
	height: 276px;
}
[data-interactive="1"] section.roadmap > .container > div > .item {
	padding: 0px;
	overflow: auto;
	display: hide;
}
[data-interactive="1"] section.roadmap > .container {
	display: block;
}
[data-interactive="1"] section.roadmap > .container > div:hover {
	background-color: #2f7cad !important;
	& div {
		background-color: #2f7cad !important;
	}
}
section.roadmap .intro {
	padding-top: 100px;
}
/* ---------- mediaquery ---------- */

@media screen and (max-width: 766px) {
	.intro {
		padding-top: 43px;
		display: grid;
		grid-template-columns: var(--grid-12);
		justify-content: center;
		color: black;
		text-align: center;
	}

	.intro > p {
		font-size: 14px;
		line-height: 25px;
	}

	section.roadmap > .container > div > div > a {
		color: var(--color-header);
		position: relative;
		display: flex;
		justify-content: flex-end;
		font-size: 24px;
	}
	section.roadmap > .container {
		padding-top: 30px;
		justify-content: center;
		display: grid;
		grid-template-columns: var(--grid-12);
		gap: var(--offset);
		grid-row: auto;
		overflow: hidden; /* Set overflow property to auto */
	}

	section.roadmap > .container > div > div > span {
		color: var(--color-dark);
		font-size: 12px;
		line-height: 25px;
		padding-bottom: 29px;
	}
	section.roadmap > .container > div > div > p {
		font-size: 13px;
		line-height: 22px;
		font-weight: 200;
	}
	section.roadmap > .container > div > div > h3 {
		font-size: 24px;
		line-height: 26px;
	}
	section.roadmap > .container > div > div > div {
		background-color: #7a9894;
		width: 236px;
		height: 276px;
		border-radius: 32220px;
		position: absolute;
		right: -40%;
		top: -65%;
	}
	section.roadmap > .container > div > .item > div {
		background-color: #7a9894;
		width: 300px;
		height: 300px;
		border-radius: 100%;
		position: absolute;
		left: -160px;
		bottom: 202px;
	}
	section.roadmap > .container > div > .item > div > i {
		bottom: 30px;
		right: 60px;
	left: 0;
	}
	section.roadmap > .container > div  > div > .item  {
		padding: 40px 20px;
		border-radius: 15px;
		border: 1px solid var(--color-gray);
		position: relative;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background-color: white;
		text-align: right;
		padding-left: 20px;
}
@media screen and (min-width: 766px) and (max-width: 1023px) {
	section.roadmap > .container {
		padding-top: 120px;
		justify-content: center;
		display: grid;
		grid-template-columns: var(--grid-6) var(--grid-6);
		gap: var(--offset);
		grid-row: auto;
		overflow: hidden; /* Set overflow property to auto */
	}
	section.roadmap > .container > div > div > div > i {
		bottom: 11%;
		position: absolute;
		font-size: 55px;
		left: 16%;
		color: white;
		font-weight: 300;
	}
}
}
.frst-container {
  max-width: var(--base);
  margin: 0 auto;
  padding: 0px 15px 100px 15px;
}
/* 
.frst-timeline-block:hover{
  
& > .frst-timeline-img > span{
  background-color: var(--color-secondary) !important;
  transition: all 0.2s ease-in-out;
}

& > .frst-timeline-content > .frst-timeline-content-inner.green {
  background-color: var(--color-secondary) !important;
  transition: all 0.2s ease-in-out;
  & > .text-section > *{
    color: var(--color-dark) !important;
    transition: all 0.2s ease-in-out;
  }
}
  & > .frst-timeline-content > .frst-timeline-content-inner.green::after {
    border-right-color: var(--color-secondary) !important;
    border-left-color: var(--color-secondary) !important;
    transition: all 0.2s ease-in-out;
  }
} */

.frst-container::after {
  content: "";
  display: table;
  clear: both;
}
.frst-timeline {
  position: relative;
}
.frst-right-align {
  text-align: right;
}
.frst-timeline-block {
  position: relative;
  min-height: 16px;
  padding-left: 35px;
  padding-right: 35px;
}
.frst-timeline-block::before {
  content: "";
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
}
.frst-timeline-block:last-child::before {
  display: none;
}
.frst-right-align .frst-timeline-block::before {
  right: 0;
  left: auto !important;
  margin-left: 0 !important;
}
.frst-timeline-block::after {
  content: "";
  display: table;
  clear: both;
}

.frst-date,
.frst-timeline-img i {
  display: block;
}
.frst-timeline-img {
  position: absolute;
  min-width: 1px;
  min-height: 1px;
  left: 0;
  top: 0;
}
.frst-right-align .frst-timeline-img {
  margin-left: 0 !important;
  left: auto !important;
  right: 0;
}
.frst-last-empty-item .frst-timeline-img span {
  vertical-align: top;
}
.frst-timeline-content-inner {
  position: relative;
}

.cssanimations .frst-timeline-content.is-hidden {
  visibility: hidden;
}
.cssanimations .frst-timeline-content.animated {
  visibility: visible;
}
.frst-labels span {
  display: inline-block;
}
.frst-labels {
  padding: 20px 0;
}
.frst-labels.frst-start-label {
  padding-top: 0 !important;
}
.frst-labels.frst-end-label {
  margin-bottom: 0 !important;
}
.green {
  background: var(--color-primary);
}

@media only screen and (min-width: 1023px) {
  .frst-date-opposite,
  .frst-left-align.frst-date-opposite {
    margin-left: 190px;
  }

  .frst-right-align.frst-date-opposite {
    margin-right: 190px;
    margin-left: 0;
    text-align: right;
  }

  .frst-date-opposite.frst-alternate {
    margin: 0;
  }

  .frst-timeline.frst-alternate.frst-left-align .frst-timeline-content,
  .frst-timeline.frst-alternate.frst-right-align .frst-timeline-content,
  .frst-timeline.frst-date-opposite.frst-left-align .frst-timeline-content,
  .frst-timeline.frst-date-opposite.frst-right-align .frst-timeline-content {
    width: 100%;
  }

  .frst-alternate .frst-timeline-block::before {
    left: 50%;
  }

  .frst-alternate .frst-timeline-img {
    left: 50% !important;
  }

  .frst-alternate .frst-timeline-block.frst-even-item .frst-timeline-content {
    float: right;
  }

  .frst-alternate .frst-timeline-block.frst-odd-item .frst-timeline-content {
    float: left;
  }

  .frst-date-opposite .frst-date {
    position: absolute;
    top: 0;
    text-align: right;
  }

  .frst-alternate .frst-timeline-block.frst-odd-item .frst-timeline-content,
  .frst-alternate.frst-date-opposite .frst-timeline-block.frst-even-item .frst-date,
  .frst-date-opposite.frst-left-align .frst-date,
  .frst-right-align {
    text-align: left;
  }

  .frst-alternate.frst-date-opposite .frst-timeline-block.frst-odd-item .frst-timeline-content .frst-date,
  .frst-date-opposite.frst-right-align .frst-date {
    text-align: left;
  }

  .frst-alternate .frst-timeline-label-block {
    text-align: center;
  }

  .frst-alternate .frst-timeline-label-block .frst-labels span {
    left: 0;
    right: 0;
  }
}

@media only screen and (max-width: 1023px) {
  .frst-container {
    padding: 0 ;
  }
  .frst-timeline {
    margin-left: 0px;
  }
  .frst-timeline-block {
    padding-left: 0;
    padding-right: 0;
  }
  .frst-timeline.frst-responsive-right,
  .frst-timeline.frst-right-align {
    margin-right: 20px;
    margin-left: 0;
  }
  .frst-responsive-right .frst-timeline-block::before,
  .frst-responsive-right .frst-timeline-img {
    margin-left: 0 !important;
    left: auto !important;
    right: 0;
  }
  .frst-responsive-right {
    text-align: right;
  }
  .frst-date {
    margin-bottom: 10px;
  }
}

/*-------- Type- 01 ------*/

.frst-timeline-style-3 {
  color: #000;
}
.frst-timeline-style-3 .frst-timeline-block::before {
  background: rgba(0, 0, 0, 0);
  margin-left: -2px;
  border: 2px dotted transparent;
  top: 80px;
  background-image: -moz-radial-gradient(#6e6f72 25%, rgba(255, 255, 255, 0) 0%);
  background-image: -webkit-radial-gradient(#6e6f72 25%, rgba(255, 255, 255, 0) 0%);
  background-image: radial-gradient(#6e6f72 25%, rgba(255, 255, 255, 0) 0%);
  background-position: center;
  background-size: 10px 13px;
  background-repeat: repeat-y;
}

.frst-timeline-style-3.frst-right-align .frst-timeline-block::before {
  margin-right: -2px;
}

.frst-timeline-block {
  padding-bottom: 30px;
  padding-left: 45px;
  padding-right: 45px;
}

.frst-timeline-style-3 .frst-timeline-img {
  padding: 0;
  margin-left: -21px;
  top: 60px; /*--- Box shadow value --*/
  width: 42px;
  height: 42px;
  color: #fff;
  text-align: center;
  font-size: 24px;
}
.frst-timeline-style-3 .frst-timeline-img span {
  display: inline-block;
  margin: auto;
  padding: 6px;
  min-height: 20px;
  min-width: 20px;
  background: #d8d8d8;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  vertical-align: top;
}
.frst-timeline-style-3 .frst-timeline-img i {
  display: block;
}

.frst-timeline-style-3.frst-right-align .frst-timeline-img {
  margin-right: -21px;
}

.frst-timeline-style-3 .frst-timeline-content {
  color: white;
}

.frst-timeline-style-3 .frst-date {
  font-size: 30px;
  color: var(--color-primary);
  font-weight: bold;
}

.frst-timeline-style-3 h2 {
  margin: 0 0 5px;
  font-weight: 800;
  color: white;
  font-size: 16px;
  text-transform: uppercase;
}

.frst-timeline-block > .frst-timeline-content > .frst-timeline-content-inner.green {
  padding: 30px 20px 80px 20px;
  border-radius: 15px;
  position: relative;
  display: flex;
  background-color: var(--color-primary);

  & .text-section > h3 {
    color: white;
    font-size: 24px;
    line-height: 36px;
    font-weight: 300;
  }

  & .text-section > p {
    font-size: 18px;
    line-height: 32px;
    font-weight: 300;
    color: white;
    padding: 15px 0px 15px 0px;
  }
}
.text-section > p {
	overflow-wrap: break-word;
}
.frst-timeline-block.frst-even-item > .frst-timeline-content > .frst-timeline-content-inner.green > .text-section {
	padding-left: 160px;
}
.frst-timeline-block.frst-odd-item > .frst-timeline-content > .frst-timeline-content-inner.green > .text-section {
	padding-right: 160px !important;
	padding-left: 40px;
}

.frst-timeline-block.frst-even-item > .frst-timeline-content > .frst-timeline-content-inner.green > .logo-icon {
  background-color: rgba(255, 255, 255, 0.077);
  width: 200px;
  height: 200px;
  border-radius: 100%;
  position: absolute;
  left: -50px;
  bottom: -5px;
  & > i {
    bottom: 55px;
    left: 70px;
    position: absolute;
    font-size: 80px;
    color: white;
  }
}

.frst-timeline-block.frst-odd-item > .frst-timeline-content > .frst-timeline-content-inner.green > .logo-icon {
  background-color: rgba(255, 255, 255, 0.077);
  width: 200px;
  height: 200px;
  border-radius: 100%;
  position: absolute;
  right: -50px;
  bottom: -15px;
  & > i {
    bottom: 55px;
    left: 50px;
    position: absolute;
    font-size: 80px;
    color: white;
  }
}

.frst-timeline-style-3 .frst-labels span {
  position: relative;
  left: -35px;
  width: 78px;
  height: 78px;
  background: #f13d9e;
  color: #fff;
  font-weight: 800;
  padding: 23px 10px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  text-transform: uppercase;
  text-align: center;
  font-size: 14px;
  margin-left: -39px;
}
.frst-timeline-style-3.frst-right-align .frst-labels span {
  left: auto;
  right: -47px;
  margin-right: -39px;
  margin-left: 0;
}

.frst-timeline-style-3 .frst-timeline-content-inner {
  padding: 30px;
  position: relative;
  /*-webkit-border-radius: 4px;
  border-radius: 4px;*/
  background: #546866;
}

.frst-timeline-style-3 .frst-timeline-content-inner::after {
	border-width: 20px 20px 20px 0;
	border-right-color: var(--new-border-color, #546866);
	left: -15px;
	top: 50px;
	content: "";
	border-style: solid;
	border-color: transparent;
	position: absolute;
}

.frst-timeline-style-3.frst-right-align .frst-timeline-content-inner::after {
	border-width: 20px 0 20px 20px;
	border-left-color: var(--new-border-color, #546866);
	right: -15px;
	left: auto;
}

/*green*/
.frst-timeline-style-3 .frst-timeline-content-inner.green::after {
  border-right-color: var(--new-border-color, #435957);
}

.frst-timeline-style-3.frst-right-align .frst-timeline-content-inner.green::after {
  border-left-color: var(--new-border-color, #435957);
}

/*---------- Responsive part ------------*/
@media only screen and (min-width: 1023px) {
  .frst-date-opposite {
    margin-left: 203px;
  }
 
  .frst-left-align.frst-date-opposite {
    margin-left: 203px;
  }

  .frst-right-align.frst-date-opposite {
    margin-right: 203px;
    margin-left: 0;
  }
  .frst-timeline-style-3.frst-alternate .frst-timeline-content,
  .frst-timeline-style-3.frst-date-opposite .frst-timeline-content {
    width: calc(50% - 44px);
  }

  .frst-timeline-style-3.frst-date-opposite .frst-date {
    left: -248px;
    line-height: 20px;
    width: 160px;
    top: 60px;
  }

  .frst-timeline-style-3.frst-date-opposite.frst-right-align .frst-date,
  .frst-timeline-style-3.frst-date-opposite.frst-alternate .frst-timeline-block.frst-odd-item .frst-date {
    right: -248px;
    left: auto;
    text-align: left;
    top: 60px;
  }
  .frst-timeline-style-3 .frst-timeline-content-inner {
    padding-left: 110px;
    position: relative;
  }
  .frst-timeline-style-3.frst-right-align .frst-timeline-content-inner,
  .frst-timeline-style-3.frst-alternate .frst-timeline-block.frst-odd-item .frst-timeline-content-inner {
    padding-left: 0;
  }

.frst-timeline-style-3 .frst-timeline-content-inner.green::after {
  border-right-color:  var(--new-border-color, #546866);
}

  .frst-timeline-style-3 .frst-date {
    position: absolute;
    left: 0;
    width: 80px;
  }
  .frst-timeline-style-3.frst-right-align .frst-date,
  .frst-timeline-style-3.frst-alternate .frst-timeline-block.frst-odd-item .frst-date {
    left: auto;
    right: 0;
  }
  .frst-timeline-style-3.frst-alternate .frst-labels span {
    margin: 0;
  }

  .frst-timeline-style-3.frst-alternate .frst-odd-item .frst-timeline-content-inner::after {
    border-width: 20px 0 20px 20px;
    border-left-color: var(--new-border-color, #546866);
    right: -15px;
    left: auto;
  }
}

@media only screen and (max-width: 1023px) {
  .frst-timeline-style-3.frst-responsive-right .frst-timeline-block::before {
    margin-right: -2px;
  }
  .frst-timeline-style-3.frst-responsive-right .frst-timeline-img {
    margin-right: -21px;
  }
  .frst-timeline-style-3.frst-responsive-right .frst-labels span {
    left: auto;
    right: -35px;
    margin-left: 0;
    margin-right: -39px;
  }

  .frst-timeline-style-3.frst-responsive-right .frst-timeline-content-inner::after {
	border-left-color: var(--new-border-color, #546866);
	/*var(--color-primary);*/
  }

  .frst-timeline-block {
	padding-left: 30px;
	padding-right: 0px;
  }

  .frst-timeline-style-3 .frst-date {
	color: white;
  }
}

@media only screen and (max-width: 1023px) {
.frst-timeline-block.frst-even-item > .frst-timeline-content > .frst-timeline-content-inner.green > .logo-icon, .frst-timeline-block.frst-odd-item > .frst-timeline-content > .frst-timeline-content-inner.green > .logo-icon{
	position: relative;
}
.logo-icon{
	display: none;
}

.frst-timeline-block.frst-odd-item > .frst-timeline-content > .frst-timeline-content-inner.green > .text-section, .frst-timeline-block.frst-even-item > .frst-timeline-content > .frst-timeline-content-inner.green > .text-section{
	padding: 0px !important;
}

.text-section > p {
		font-size: 15px !important;
		line-height: 26px !important;
	}

& .text-section > h3 {
		font-size: 21px !important;
		line-height: 30px !important;
	}
}

.text-section{
	max-height: 115px;
	overflow: hidden;
	white-space: wrap;
	transition: 0.3s linear max-height;
}

.expanded {
	max-height: 800px; /* Use a large value to simulate 'unset' */
}
@media screen and (min-width: 1024px) and (max-width: 1180px) {

  .expanded {
    max-height: 1400px; /* Use a large value to simulate 'unset' */
  }

}
.accordion-toggle{
	font-family: var(--font-family-alwyn);
	font-size: 16px;
	line-height: 15px;
	font-weight: 400;
	position: absolute;
	bottom: 30px;
	cursor: pointer;
	color: var(--color-dark);
	background: var(--color-secondary);
	padding: 10px 20px;
	border-radius: 20px;
	text-transform: uppercase;
}

.frst-even-item .accordion-toggle {
	left: 175px;
}

.frst-odd-item .accordion-toggle {
	right: 175px;
}

.accordion-toggle:hover {
	background: var(--color-primary);
	color: #fff;
	border: 1px solid #fff;
}

@media screen and (max-width: 766px) {
	.frst-even-item .accordion-toggle, .frst-odd-item .accordion-toggle {
		left: unset;
		right: unset;
		font-size: 15px;
		/*line-height: 26px;*/
	}

	.text-section{
		min-height: 130px;
	}
}
@font-face {
	font-display:swap;
    font-family: 'Alwyn';
    src: url('/e2/site/rijnraad/content/site/style/font/Alwyn-Regular.woff2') format('woff2'),
         url('/e2/site/rijnraad/content/site/style/font/Alwyn-Regular.ttf') format('truetype');
   font-style: normal;
   font-weight: 400;
}

@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 300;
  src: url('/e2/site/rijnraad/content/site/style/font/noto-sans-v36-latin-300.woff2') format('woff2'),
       url('/e2/site/rijnraad/content/site/style/font/noto-sans-v36-latin-300.ttf') format('truetype');
}

@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/e2/site/rijnraad/content/site/style/font/noto-sans-v36-latin-regular.woff2') format('woff2'),
       url('/e2/site/rijnraad/content/site/style/font/noto-sans-v36-latin-regular.ttf') format('truetype');
}

@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  src: url('/e2/site/rijnraad/content/site/style/font/noto-sans-v36-latin-500.woff2') format('woff2'),
       url('/e2/site/rijnraad/content/site/style/font/noto-sans-v36-latin-500.ttf') format('truetype');
}

@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url('/e2/site/rijnraad/content/site/style/font/noto-sans-v36-latin-700.woff2') format('woff2'),
       url('/e2/site/rijnraad/content/site/style/font/noto-sans-v36-latin-700.ttf') format('truetype');
}
/*
/* ---------- vars ---------- */


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

.intro{
	padding-top:120px;
	display: grid;
	grid-template-columns: var(--grid-6);
	justify-content: center;
	color: black;
	text-align: center;
}
.intro  h2{
	color: #111111;
}
.intro  p{
	padding-top: 37px;
	font-size: 20px;
	line-height: 35px;
	font-weight: 300;
	color: #111111;

}
section.introduction  .container {
    padding-top: 60px;
    justify-content: center;
    display: grid;
    grid-template-columns: var(--grid-4) var(--grid-4) var(--grid-4);
    gap: var(--offset);
    grid-row: auto;
    overflow: hidden; 
	padding-bottom: 120px;
}

section.introduction  .container a .item {
    padding: 30px;
    border-radius: 15px;
    border: 1px solid var(--color-gray);
    position: relative;
	display: flex;
	flex-direction: column;
    overflow: hidden; 
	background-color: white;

}
section.introduction  .container a .item  * {
	transition: all 0.35s ease-in-out;
} 
section.introduction  .container a .item  span { 
    color: var(--color-dark);
    font-size: 16px;
    line-height: 36px;
	padding-bottom: 29px;
}

section.introduction  .container a .item  p {
	padding-top: 30px;
    font-size: 18px;
    line-height: 32px;
    font-weight: 300;
    color: var(--color-dark);
}

section.introduction  .container a .item  div {
    background-color:#7a9894;
    width: 100%;
    height: 100%;
    border-radius: 32220px;
    position: absolute;
    right: -68%;
    top: -60%;
}

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

section.introduction  .container a .item  div {
    background-color:#7a9894;
    width: 100%;
    height: 100%;
    border-radius: 32220px;
    position: absolute;
    right: -63%;
    top: -71%;
}
section.introduction .container a .item div i {
    bottom: 12%;
    position: absolute;
    font-size: 50px;
    left: 16%;
    color: white;
    font-weight: 300;
}
}
section.introduction  .container a .item  div  i {
bottom: 14%;
position: absolute;
font-size: 55px;
left: 15%;
color: white;
font-weight: 300;
}
section.introduction  .container a .item  i{
color: var(--color-header);
position: relative;
display: flex;
justify-content: flex-end;
font-size: 36px;
}
section.introduction  .container a .item  h3{
font-size: 26px;

}
section.introduction  .container  div:hover {
background-color: #92929213;
& h3{
color: var(--color-secondary);

}
& div{
	background-color: var(--color-secondary);

}
& div  i{
		color: var(--color-dark);
	   
}
& a  i{
	color: var(--color-secondary);
}

}

section.introduction  .container  .usp-contact{
	background-color: transparent;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 30px;
	padding: 0px 30px;
}
section.introduction  .container  .usp-contact:hover{
	background-color: transparent !important;
}
section.introduction  .container  .usp-contact  p:nth-child(1){
	color: var(--color-dark);
	font-size: 19px;
	line-height: 36px;
	font-weight: 600;
}
section.introduction  .container  .usp-contact  p:nth-child(2){
	color: var(--color-dark);
	font-size: 18px;
	line-height: 32px;
	font-weight: 300;
}
section.introduction  .container  .usp-contact  div{
display: flex;
flex-direction: column;
gap: 3px;
background-color: transparent;
	&  a{
	display: flex;
	font-size: 16px;
	color: black;
align-items: center;
gap: 15px;
	line-height: 24px;
	font-weight: 300;
	&  i{ 
		color: var(--color-secondary);
	}
}
}
section.introduction  .container  div  h3 {
	font-size: 28px;
	line-height: 32px; 
	
}
section.introduction  .container  .usp-contact:hover{
background-color: transparent !important;
&  *{
	background-color: transparent !important;
}
}
section.introduction  .container  .usp-contact  div   a:hover{
text-decoration: underline;
}
/* ---------- lipstick ---------- */
[data-interactive="1"] section.introduction  .container a .item  div {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: relative;
border-radius: 0;
width: 236px;
height: 276px;

}
[data-interactive="1"] section.introduction  .container a .item{
padding: 0px;
overflow: auto;
display: hide;
}
[data-interactive="1"] section.introduction  .container{
display: block;
}
[data-interactive="1"] section.introduction  .container  div:hover {
	background-color: #2F7CAD !important;
	& div{
		background-color: #2F7CAD !important;
	
	}
}
/* ---------- mediaquery ---------- */
@media screen and (max-width: 1023px) {
	section.introduction  .container a .item  div {
		background-color:#7a9894;
		width: 100%;
		height: 100%;
		border-radius: 32220px;
		position: absolute;
		top: -64%;
	}	
	.intro{
		grid-template-columns: var(--grid-11);
	}
	section.introduction .container a .item {
		padding: 30px;
		border-radius: 15px;
		border: 1px solid var(--color-gray);
		position: relative;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background-color: white;
		justify-content: space-between;
		height: 100%;
	}


}

@media screen and (max-width: 766px) {
	.intro{
		padding-top: 43px;
		display: grid;
		grid-template-columns: var(--grid-12);
		justify-content: center;
		color: black;
		text-align: center;
	}

	.intro  p {
		font-size: 14px;
		line-height: 25px;
	} 
	section.introduction  .container a .item  div  i {
		bottom: 17%;
		left: 16%;
	}
	section.introduction  .container  div  a{
		color: var(--color-header);
		position: relative;
		display: flex;
		justify-content: flex-end;
		font-size: 24px;
		}
		section.introduction  .container a .item  div {
			background-color:#7a9894;
			width: 100%;
			height: 100%;
			border-radius: 32220px;
			position: absolute;
			right: -66%;
			top: -60%;
		}	
	section.introduction  .container {
		padding-top: 30px;
		justify-content: center;
		display: grid;
		grid-template-columns: var(--grid-12);
		gap: var(--offset);
		grid-row: auto;
		overflow: hidden; /* Set overflow property to auto */
	}

		section.introduction  .container  div  span { 
			color: var(--color-dark);
			font-size: 12px;
			line-height: 25px;
			padding-bottom: 29px;
		}
		section.introduction  .container  div  p {
		font-size: 13px;
		line-height: 22px;
		font-weight: 200;
		} 
		section.introduction  .container  div  h3 {
			font-size: 24px;
			line-height: 26px; 
}
		/* section.introduction  .container  div  div {
			background-color: #7a9894;
			width: 236px;
			height: 276px;
			border-radius: 32220px;
			position: absolute;
			right: -40%;
			top: -65%;
		} */
			.usp-contact > div{
				align-items: flex-start;
			}
}
@media screen and (min-width: 766px) and (max-width: 1023px) {
	section.introduction  .container {
		padding-top: 120px;
		justify-content: center;
		display: grid;
		grid-template-columns: var(--grid-6) var(--grid-6) ;
		gap: var(--offset);
		grid-row: auto;
		overflow: hidden; /* Set overflow property to auto */
	}
	}
/* ---------- vars ---------- */
section.seperator {
	--seperator-height: 460px;
}


/* ---------- layout ---------- */
section.seperator {
	display: grid; 
	grid-template-columns: calc(50% - (var(--grid-5) + var(--offset-small))) 1fr;
	grid-template-rows: var(--offset) var(--seperator-height) var(--offset);
}

section.seperator[data-image="left"] {
	grid-template-columns: calc(50% + (var(--grid-5) + var(--offset-small))) 1fr;
}

section.seperator .image {
	grid-column: 2 / -1;
	grid-row: 2 / -1;
	z-index: 100;
}

section.seperator[data-image="left"] .image { grid-column: 1; }

section.seperator .background { 
	position: relative;
	grid-column: 1 / -1;
	grid-row: 1 / 3;
	display: grid;
	grid-template-columns: 1fr;
	align-items: stretch;
}

section.seperator[data-image="left"] .background { justify-items: end; }

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

section.seperator .background { 
	background: var(--color-black); 
}

section.seperator[data-color="gray"] .background { 
	background: var(--color-gray); 
}

section.seperator .background img {
	opacity: .5;
}



section.seperator .image {
	background-position: 50%;
	background-size: cover;
}


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


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

	section.seperator {
		--seperator-height: 40vh;
	}
}

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


/* ---------- layout ---------- */
section.mediagallery {
	display: grid; 
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	align-items: stretch;
}
section.mediagallery .background,
section.mediagallery .content {
	grid-column: 1;
	grid-row: 1;
}

section.mediagallery .background {
	display: grid;
	grid-template-columns: calc(50% - var(--grid-2));
	gap: 60px;
}

section.mediagallery[data-media-position="right"] .background {
	grid-template-columns: auto calc(50% - var(--grid-2));
}

section.mediagallery[data-media-position="right"] .background > div {
	grid-column: 2;
}

section.mediagallery .content {
	z-index: 200;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--offset);
}

section.mediagallery .content figure{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 50px 1fr;
}

section.mediagallery .content figure h3{
	text-align: center;
}

section.mediagallery .content figure img{
   	max-width: 100%;
   	height: 700px;
  	margin: auto;
}
/* ---------- lipstick ---------- */

section.mediagallery .content {
	padding: var(--offset) 0;
}


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


@media screen and (max-width: 1023px) {
	section.mediagallery .background { display: none; }
} 


/* ---------- layout ---------- */
section.textmedia {
	display: grid; 
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	align-items: stretch;
}

section.textmedia .background,
section.textmedia .content {
	grid-column: 1;
	grid-row: 1;
}

section.textmedia .background {
	display: grid;
	grid-template-columns: calc(50% - (var(--grid-2) + var(--offset-small)) );
	gap: 60px;
}

section.textmedia[data-media-position="right"] .background {
	grid-template-columns: auto calc(50% - var(--grid-2));
}

section.textmedia[data-media-position="right"] .background > div {
	grid-column: 2;
}

section.textmedia .content {
	z-index: 200;
	display: grid;
	grid-template-columns: auto var(--grid-6) var(--column) var(--grid-5) auto;
	grid-template-areas: ". image . text .";
	place-items: center center;
	gap: var(--offset);
}

section.textmedia[data-media-position="right"] .content {
	grid-template-columns: auto var(--grid-5) var(--column) var(--grid-6) auto;
	grid-template-areas: ". text . image .";
}

section.textmedia .content article { grid-area: text; }
section.textmedia .content aside { grid-area: image; }

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

section.textmedia .content {
	padding: var(--offset) 0;
}

section.textmedia .background div {
	background: var(--color-gray); 
	height: 100%;
}

section.textmedia .background[data-color="black"] div {
	background: var(--color-black);
}

section.textmedia .content aside .media.youtube {
	--height: 442px;
	display: block;
	width: var(--grid-5); 
}

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


@media screen and (max-width: 1023px) {
	
	section.textmedia .content {
		padding: var(--offset);
		grid-template-columns: 1fr;
		grid-template-areas: 
			"image"
			"text";
	
	}
	
	section.textmedia[data-media-position="right"] .content {
		grid-template-columns: 1fr;
		grid-template-areas: 
			"text"
			"image";
	}

	section.textmedia .background { display: none; }
}
/* ---------- vars ---------- */


/* ---------- layout ---------- */
.media.double-images {
	display: grid;
	grid-template-columns: 1fr var(--offset) 1fr;
	grid-template-rows: auto var(--offset) auto;
}

.media.double-images figure:first-child {
	grid-column: 1 / 3 ;
	grid-row: 1 / 3;
	z-index: 100;
}

.media.double-images figure:last-child {
	grid-column: 2 / 4;
	grid-row: 2 / 4;
}

/* ---------- lipstick ---------- */
.media.double-images figure img {
	max-width: 100%;
}

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


@media screen and (max-width: 1023px) {
	.media.double-images {
		position: relative;
	}
	
	.media.double-images:before {
		top: var(--offset); 
		left: var(--offset); 
		content: "";
		background: var(--color-bronze-soft); 
		width: calc(100% - calc(var(--offset) * 2));
		height: calc(100% - calc(var(--offset) * 2));
		display: block; 
		position: absolute;
		z-index: -1;
	}

} 
/* ---------- vars ---------- */
.media.youtube {
	--height: 551px;
}

/* ---------- layout ---------- */
.media.youtube .overlay {
	min-height: var(--height); 
	display: grid;
	place-items: center;
}

/* ---------- lipstick ---------- */
.media.youtube .overlay {
	background: rgba(17,17,17,.2);
	font-size: 60px;
	transition: all var(--transition-speed);	
}

.media.youtube {
	transform-origin: center;
	transition: all var(--transition-speed);	
	background-size: cover;
	background-position: 50%;
}

.media.youtube .overlay:hover {
	background: rgba(17,17,17,.4);
	box-shadow: 0 0 30px rgba(17,17,17,.1);
}

.media.youtube .overlay span {
	transition: all var(--transition-speed);
	color: var(--color-secondary); 
}

.media.youtube .overlay:hover span {
	animation: play-button .5s forwards ease-in;
}

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


@media screen and (max-width: 1023px) {
	.media.youtube {
		--height: 250px;
	}

}

@keyframes play-button {
	0% {
		transform: scale(1);
	}

	30% {
		transform: scale(.6);
	}

	50% {
		transform: scale(1.2);
	}

	80% {
		transform: scale(.8);
	}

	100% {
		transform: scale(1.5);
	}
}
/* ---------- vars ---------- */

.media.image .pattern:before {
	--overlap: 0;	
}
/* ---------- layout ---------- */

.media.image {
	position: relative;
	display: grid;
	grid-template-columns: var(--column) var(--grid-3) 1fr;
	grid-template-rows: var(--offset) 1fr var(--offset);
}

.media.image[data-pattern-size="small"] {
	grid-template-rows: var(--offset-small) 1fr var(--offset-small);
}
.media.image[data-pattern-size="none"] {
	grid-template-rows: 0 1fr 0;
}

.media.image[data-pattern-position="right"] {  
	grid-template-columns: 1fr var(--grid-3) var(--column);
}

.media.image figure {  grid-column: 1 / -1; grid-row: 2;  }
.media.image .pattern {  grid-column: 2; grid-row: 1 / -1;  }



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

.media.image figure {
	padding: 0;
	line-height: 0;
}

.media.image figure img {
	max-width: 100%;
}
section.picture-grid > .container{
	display: grid;
	max-width: var(--base);
	margin: 0 auto;
	justify-content: center;
	grid-template-columns: var(--grid-10);
}

section.picture-grid .media.image figure img{
	width: 100%;
}
[data-interactive="1"] .swiper-wrapper{
	display: block;
}

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


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

	.media.image[data-pattern-position="right"],
	.media.image[data-pattern-position="left"] {
		grid-template-columns: var(--offset) 40vw 1fr;
	}

	.media.image .textbox {
		font-size: 14px;
		line-height: 20px;
		width: 200px; 
	}
}



/* ---------- vars ---------- */
section.calltoaction {
	--cta-height: 660px;
}

/* ---------- layout ---------- */
section.calltoaction {
	display: grid; 
	grid-template-columns: 1fr var(--grid-6) 1fr;
	grid-template-rows: var(--cta-height) var(--offset);
	align-items: end;
	justify-content: center;
	width: 100%;
}

section.calltoaction .image {
	grid-column: 1 / 4;
	grid-row: 1; 
	height: 100%;
}

section.calltoaction .content {
	grid-column: 2;
	grid-row: 1 / 3;
}

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

section.calltoaction .image {
	background-position: 50%;
	background-size: cover;
}

section.calltoaction .content {
	padding: var(--offset);
	background: var(--color-blue); 
	color: white;
}

section.calltoaction .content .button[data-color="white"]:hover {
	border-color: var(--color-bronze);
	color: var(--color-bronze);
}
/* ---------- mediaquery ---------- */


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

	section.calltoaction {
		--cta-height: 500px;
		grid-template-columns: var(--offset) 1fr var(--offset);
		grid-template-rows: minmax(40vh, var(--cta-height)) var(--offset);
	}
}
/* ---------- layout---------- */
.form .fields .row .checkboxes label {}

.form .fields .row .checkboxes label input { display: none; }


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

.form .fields .row .checkboxes label {
	display: block;
	font-weight: 600;
	cursor: pointer;
}

.form .fields .row .checkboxes label + label {
	margin-top: 5px;
}

.form .fields .row .checkboxes label > span {
	display: inline-flex;
	align-items: center;
	margin-right: 5px;
}

.form .fields .row .checkboxes label > span:before {
	display: inline-block;
	font-family: "Font Awesome 6 Pro";
	content: "\f058";
	color: var(--color-white);
	opacity: .2;
	font-weight: 700;
	font-size: 20px;
	margin-right: 5px;
}

.form .fields .row .checkboxes label > input:checked + span:before {
	color: var(--color-primary);
	content: "\f058";
	opacity: 1;
}

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


/* ---------- layout---------- */
input[type="text"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type='file']
input[type="password"],
textarea,
select {
	font-size: 14px;
	line-height: var(--line-height); 
	border: 0px; 
	padding: calc((var(--input-size) - var(--line-height)) / 2) 15px;
	border-radius: 6px; 
	background-color: var(--color-gray);
	width: 100%;
	font-family: var(--font-family);
	outline: none;
 color: var(--color-primary);
}
.custom-file-input {
	font-size: 14px;
	color: transparent;
	line-height: var(--line-height); 
	border: 0px; 
	padding: calc((var(--input-size) - var(--line-height)) / 2) 15px;
	border-radius: 6px; 
	background-color: var(--color-gray);
	font-family: var(--font-family);
	width: 100%;
	padding-right: 20px;
  }
  .custom-file-input::-webkit-file-upload-button {
	color: var(--color-primary);
	background-color: transparent;
	border: none;
	margin-left: 15px;
	font-family: var(--font-family);
	font-size: 14px;
  }
.custom-file-input::before {
	font-family: "Font Awesome 6 Pro";
	content: "\f15b";
	color: var(--color-primary);
	position: absolute;
	margin-left: 2px;

}
input::placeholder {
	font-size: 14px; 
	color: var(--color-gray-soft); 
}

/* ---------- lipstick ---------- */
select {
	min-height: var(--input-size);
}

textarea {
	min-height: calc(var(--line-height) * 4);
}

form button {
background-color: var(--color-primary);
color: white;
}
/* ---------- media query ---------- */

/* ---------- layout---------- */
.form {
	--input-size: 42px;
	--border-radius: calc(var(--input-size) / 2);
}

.form .fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px var(--offset-small);
}

.form .fields .row.extended {
	grid-column: 1;
}

.form .fields .row {
	display: grid;
	grid-template-columns:  1fr;
	gap: var(--offset-small);
	justify-content: center;
	align-items: center;
}
.row.top-align{
	align-items: flex-start !important;
}
.form .fields .row .inline {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}

.form .fields .row .inline > * + * {
	margin-left: var(--offset-small);
}


/* .form .fields .row.origin > div:last-child {
	display: grid;
	grid-template-columns: 50px 1fr;
	gap: var(--offset);
	align-items: center;
}
 */
/* ---------- lipstick ---------- */

.form .fields {
/* 	padding: var(--offset); */
}

.form .fields .row div:first-child {
	line-height: 18px;
}

.form .fields .row label {
	font-weight: 300;
	font-size: 16px;
}

.form .fields .row.hide {
	display: none;
}
button[type="submit"]{
	padding: var(--padding);
	display: flex;
	gap: 15px;
	padding: 10px 25px;
}
.form .fields .row.action {
	margin-top: var(--offset-small);
	display: flex;
	justify-content: flex-end;
}

.form .fields .row > h3 {
	font-size: 32px;
	font-weight: 300;
	position: relative;
}



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

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

	.form .fields {
		grid-template-columns: 1fr;
	}

	.form .fields .row.extended {
		grid-column: 1;
	}

	.form .fields .row {
		grid-template-columns: 1fr;
		gap: 5px;
	}

}

/* ---------- vars ---------- */
.news.list .item {
	--image-size: var(--grid-3); 
	--image-height: 260px;
	--date-size: 140px;
}

/* ---------- layout ---------- */
.news.list .item {
	display: grid; 
	grid-template-columns: calc(var(--image-size) - calc(var(--date-size) / 2)) calc(var(--date-size) / 2) calc(var(--date-size) / 2) 1fr;
	grid-template-rows: var(--offset-small) auto var(--offset-small);
	align-items: center;
}

.news.list .item .image { 
	grid-column: 1 / 3; 
	grid-row: 1 / -1; 
	align-self: stretch; 
	min-height: var(--image-height); 
}

.news.list .item .date {
	grid-column: 2 / 4;
	grid-row: 2;
}

.news.list .item .content {
	grid-column: 4;
	grid-row: 2;
}

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

.news.list .item {
	cursor: pointer;
}

.news.list .item + .item {
	margin-top: var(--offset); 
}

.news.list .item .image {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50%;
}

.news.list .item .content {
	padding-left: var(--offset-small); 
}

.news.list .item .content h3 {
	font-weight: 700;
}

.news.list .item .content article > * + * {
	margin-top: var(--offset-tiny); 
}


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


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

	.news.list .item {
		--image-size: 1fr; 
		--image-height: 260px;
		--date-size: 90px;
	}

	.news.list .item{
		display: grid; 
		grid-template-columns: var(--offset-small) var(--date-size) 1fr;
		grid-template-rows: calc(var(--image-height) - 30px) 30px auto auto;
		align-items: center;
		gap: 0px 0;
	}

	.news.list .item .image { 
		grid-column: 1 / -1; 
		grid-row: 1 / 3; 
		align-self: stretch; 
		min-height: var(--image-height); 
	}
	
	.news.list .item .date {
		grid-column: 2;
		grid-row: 2 / 5;
		align-self: start;
	}
	
	.news.list .item .content {
		grid-column: 3;
		grid-row: 4;
		padding-top: var(--offset-small); 
	}	
}
/* ---------- vars ---------- */


/* ---------- layout ---------- */
section.page.news.detail > .title .overlay .wrapper { 
	display: grid;
	grid-template-columns: var(--grid-2) var(--grid-4) var(--offset);
	grid-template-rows: auto var(--offset-small) var(--offset-small) var(--offset-small);
	gap: 0 var(--offset);
}

section.page.news.detail > .title .overlay .box {
	grid-column: 1 / 3;
	grid-row: 1 / 4;
}

section.page.news.detail > .title .overlay .pattern {
	grid-column: 2 / 4;
	grid-row: 2 / 5;
}

section.page.news.detail > .title .overlay {
	display: grid; 
	grid-template-columns: 1fr;
	grid-template-rows: 1fr auto auto;
}

section.page.news.detail > .title .overlay .date-row {
	grid-row: 2;
	display: grid;
	grid-template-columns: var(--base);
	justify-content: center;
	position: relative;
}

section.page.news.detail > .title .overlay .date-row .date {
	bottom: -20px;
	left: 40px;
}

section.page.news.detail > .title .overlay .wrapper {
	grid-row: 3;
}

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


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


@media screen and (max-width: 1023px) {
	section.page.news.detail > .title .overlay .wrapper { 
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto var(--offset-small) var(--offset-small) var(--offset-small);
		gap: 0 var(--offset);
	}

	section.page.news.detail > .title .overlay .pattern {
		grid-column: 1;
		grid-row: 2 / 5;
	}
}

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


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


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


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


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


}
/* ---------- vars ---------- */
div.date {
	--size: var(--date-size, 120px);
	--bar: 10px;
}

/* ---------- layout ---------- */
div.date {
	position: relative;
	display: grid;
	justify-content: center;
	align-items: center;
	grid-template-columns: auto auto;
	grid-template-rows: 1fr;
	gap: 10px;
	width: var(--size);
	height: var(--size); 
}

div.date:before {
	--height: calc(var(--size) - var(--offset));
	position: absolute;
	display: block;
	top: calc(50% - (var(--height) / 2));
	left: calc(var(--bar) * -1);
	content: "";
	width: var(--bar);
	height: var(--height);
}

div.date > div:last-child span {
	display: block;
}

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

div.date {
	text-transform: uppercase;
	background: var(--color-black);
	color: white;
}

div.date:before {
	background: var(--color-yellow);
}

div.date > div:first-child span {
	text-align: center;
}

div.date > div:first-child {
	font-size: 60px;
	font-weight: 700;
}

div.date > div:last-child {
	line-height: 24px;
}

div.date[data-color="yellow"],
div.date[data-color="black"]:before {
	background: var(--color-yellow);
	color: var(--color-black);
}

div.date[data-color="black"],
div.date[data-color="yellow"]:before  {
	background: var(--color-black);
	color: white;
}

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


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

	div.date {
		--size: var(--date-size, 80px);
		--bar: 5px;
		font-size: 14px;
	}

	div.date > div:first-child {
		font-size: 40px;
		font-weight: 700;
	}

	div.date > div:last-child {
		line-height: 18px;
	}
}  */