/*---------- paragrah commons -----------------*/
.paragraph {
	clear: both;
	overflow: hidden;
}

.paragraph--type--layout-style {
	position: relative;
}

.paragraph--type--layout-style>video {
	position: absolute;
	min-width: 100vw;
	bottom: 0;
}

.paragraph--type--layout-style:not(.layoutwidth)>.inner {
	width: 100%;
}


/*----------------- s1 rightside skews up to leftside ----------------------------------*/

.skewup {
	--skew-angle: -3deg;
	position: relative;
	isolation: isolate;
	overflow: visible;
	padding-block: 5rem;
}

.skewup::after {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 0;
	transform: skewY(var(--skew-angle));
	bottom: -200px;
	/* adding borders for accesibility */
	border-top: 1px solid var(--main-color);
    border-bottom: 1px solid var(--main-color);
	background: inherit;
}

/*-----------------rightside skews down to leftside----------------------------------*/

.skewdown {
	--skew-angle: 3deg;
	position: relative;
	isolation: isolate;
	overflow: visible;
	padding-block: 5rem;
}

.skewdown::after {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 0;
	transform: skewY(var(--skew-angle));
	bottom: -200px;
	/* adding borders for accesibility */
	border-top: 1px solid var(--main-color);
    border-bottom: 1px solid var(--main-color);
	background: inherit;
}

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

.paragraphimgcircle img {
	border-radius: 5000px;
}

/*--------------center----------------------*/
.center picture img {
	margin: 0 auto;
	display: block;
}

.center.paragraph,
.center .paragraph {
	margin-left: auto !important;
	margin-right: auto !important;
}

.center .paragraph--type--video {
  text-align: center;
}

.centervertically,
.centervertically .td {
	display: flex !important;
	align-items: center;
}

.centervertically.center,
.centervertically.center .td {
	justify-content: center;
}

.centervertically .paragraph--type--cluster-of-figures .inner {
	align-items: baseline;
}

/*--------------- make paragraphs taller using view height -------------------*/

.vh10:not(.animation),
.vh10.animation > .inner {
	min-height: 10vh;
}

.vh20:not(.animation),
.vh20.animation > .inner {
	min-height: 20vh;
}

.vh30:not(.animation),
.vh30.animation > .inner {
	min-height: 30vh;
}

.vh40:not(.animation),
.vh40.animation > .inner {
	min-height: 40vh;
}

.vh50:not(.animation),
.vh50.animation > .inner {
	min-height: 50vh;
}

.vh60:not(.animation),
.vh60.animation > .inner {
	min-height: 60vh;
}

.vh70:not(.animation),
.vh70.animation > .inner {
	min-height: 70vh;
}

.vh80:not(.animation),
.vh80.animation > .inner {
	min-height: 80vh;
}

.vh90:not(.animation),
.vh90.animation > .inner {
	min-height: 90vh;
}

.vh100:not(.animation),
.vh100.animation > .inner {
	min-height: 100vh;
}

.vh150:not(.animation),
.vh150.animation > .inner {
	min-height: 150vh;
}

.vh200:not(.animation),
.vh200.animation > .inner {
	min-height: 200vh;
}

/* -------------- padding ------------ */

/*height*/

.pvh5:not(.animation),
.pvh5.animation > .inner {
	padding-top: 5%;
	padding-bottom: 5%;
}

.pvh10:not(.animation),
.pvh10.animation > .inner {
	padding-top: 10%;
	padding-bottom: 10%;
}

.pvh20:not(.animation),
.pvh20.animation > .inner {
	padding-top: 20%;
	padding-bottom: 20%;
}

.pt5:not(.animation),
.pt5.animation > .inner {
	padding-top: 5%;
}

.pb5:not(.animation),
.pb5.animation > .inner {
	padding-bottom: 5%;
}

/* width */
.pw5:not(.animation),
.pw5.animation > .inner {
	padding-left:5%;
	padding-right:5%;
}



/* -------------- additional fonts ------------- */

.montserrat * {
	font-family: 'montserrat', 'Helvetica Neue', Helvetica, sans-serif;
}

.lato * {
	font-family: 'lato', 'Helvetica Neue', Helvetica, sans-serif;
}

.alternate_gothic * {
	font-family: 'alternate_gothic', 'Helvetica Neue', Helvetica, sans-serif;
}

.CatamaranMedium * {
	font-family: 'CatamaranMedium', 'Helvetica Neue', Helvetica, sans-serif;
}

.panno * {
	font-family: 'panno', 'Helvetica Neue', Helvetica, sans-serif;
}

.roboto * {
	font-family: 'roboto', 'Helvetica Neue', Helvetica, sans-serif;
}

.opensans * {
	font-family: 'open_sansregular', 'Helvetica Neue', Helvetica, sans-serif;
}

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

.bgcolorany::before {
	opacity: .5;
}

.bgcolormain:not(.skewup):not(.skewdown):not(.animation):not(.tablecellboxes),
.bgcolormain:not(.skewup):not(.skewdown):not(.tablecellboxes).animation > .inner,
.bgcolormain.skewup::after,
.bgcolormain.skewdown::after,
.bgcolormain.tablecellboxes .td{
	background-color: rgba(var(--main-bg-color-base), var(--bg-transparency));
	color: var(--main-color);
}

.bgcolorsecond:not(.skewup):not(.skewdown):not(.animation):not(.tablecellboxes),
.bgcolorsecond:not(.skewup):not(.skewdown):not(.tablecellboxes).animation > .inner,
.bgcolorsecond.skewup::after,
.bgcolorsecond.skewdown::after,
.bgcolorsecond.tablecellboxes .td {
	background-color: rgba(var(--second-bg-color-base), var(--bg-transparency));
	color: var(--second-color);
}

.bgcolorthird:not(.skewup):not(.skewdown):not(.animation):not(.tablecellboxes),
.bgcolorthird:not(.skewup):not(.skewdown):not(.tablecellboxes).animation > .inner,
.bgcolorthird.skewup::after,
.bgcolorthird.skewdown::after,
.bgcolorthird.tablecellboxes .td {
	background-color: rgba(var(--third-bg-color-base), var(--bg-transparency));
	color: var(--third-color);
}

.bgcolorfourth:not(.skewup):not(.skewdown):not(.animation):not(.tablecellboxes),
.bgcolorfourth:not(.skewup):not(.skewdown):not(.tablecellboxes).animation > .inner,
.bgcolorfourth.skewup::after,
.bgcolorfourth.skewdown::after,
.bgcolorfourth.tablecellboxes .td {
	background-color: rgba(var(--fourth-bg-color-base), var(--bg-transparency));
	color:var(--light-color);
}

.bgcolorfifth:not(.skewup):not(.skewdown):not(.animation):not(.tablecellboxes),
.bgcolorfifth:not(.skewup):not(.skewdown):not(.tablecellboxes).animation > .inner,
.bgcolorfifth.skewup::after,
.bgcolorfifth.skewdown::after,
.bgcolorfifth.tablecellboxes .td {
	background-color: rgba(var(--fifth-bg-color-base), var(--bg-transparency));
	color:var(--light-color);
}

.bgcolorsixth:not(.skewup):not(.skewdown):not(.animation):not(.tablecellboxes),
.bgcolorsixth:not(.skewup):not(.skewdown):not(.tablecellboxes).animation > .inner,
.bgcolorsixth.skewup::after,
.bgcolorsixth.skewdown::after,
.bgcolorsixth.tablecellboxes .td {
	background-color: rgba(var(--sixth-bg-color-base), var(--bg-transparency));
	color:var(--main-color);
}

.bgcolorseventh:not(.skewup):not(.skewdown):not(.animation):not(.tablecellboxes),
.bgcolorseventh:not(.skewup):not(.skewdown):not(.tablecellboxes).animation > .inner,
.bgcolorseventh.skewup::after,
.bgcolorseventh.skewdown::after,
.bgcolorseventh.tablecellboxes .td {
	background-color: rgba(var(--seventh-bg-color-base), var(--bg-transparency));
	color:var(--main-color);
}

.bgcoloreight:not(.skewup):not(.skewdown):not(.animation):not(.tablecellboxes),
.bgcoloreight:not(.skewup):not(.skewdown):not(.tablecellboxes).animation > .inner,
.bgcoloreight.skewup::after,
.bgcoloreight.skewdown::after,
.bgcoloreight.tablecellboxes .td {
	background-color: rgba(var(--eight-bg-color-base), var(--bg-transparency));
	color:var(--main-color);
}

.bgcolorninth:not(.skewup):not(.skewdown):not(.animation):not(.tablecellboxes),
.bgcolorninth:not(.skewup):not(.skewdown):not(.tablecellboxes).animation > .inner,
.bgcolorninth.skewup::after,
.bgcolorninth.skewdown::after,
.bgcolorninth.tablecellboxes .td {
	background-color: rgba(var(--ninth-bg-color-base), var(--bg-transparency));
	color:var(--main-color);
}

.bgcolorgradient:not(.skewup):not(.skewdown):not(.animation):not(.tablecellboxes),
.bgcolorgradient:not(.skewup):not(.skewdown):not(.tablecellboxes).animation > .inner,
.bgcolorgradient.skewup::after,
.bgcolorgradient.skewdown::after,
.bgcolorgradient.tablecellboxes .td {
	background-image: linear-gradient(45deg, rgba(var(--second-bg-color-base), var(--bg-transparency)), rgba(var(--main-bg-color-base), var(--bg-transparency)));
}

.fontcolormain * {
	color: var(--main-color) !important;
	border-color: var(--main-color) !important;
}

.fontcolorsecond * {
	color: var(--second-color) !important;
	border-color: var(--second-color) !important;
}

.fontcolorthird * {
	color: var(--third-color) !important;
	border-color: var(--third-color) !important;
}

.fontcolordark *,
.fontcolortextshadowdark * {
	color: var(--dark-color) !important;
	border-color: var(--dark-color) !important;
}


.fontcolorlight *,
.fontcolortextshadowlight * {
	color: var(--light-color) !important;
	border-color: var(--light-color) !important;
}

.fontcolorwhite * {
	color: #FFF !important;
	border-color: #FFF !important;
}

.contrast-mode .fontcolorwhite * {
	color: var(--main-color-base) !important;
	border-color: var(--main-color-base) !important;
}

.orangetitles h2,
.orangetitles h3 {
	color: #d36900;
}
.contrast-mode .orangetitles h2,
.contrast-mode .orangetitles h3 {
color: var(--main-color-base) !important;
}

.fontcolortextshadowdark * {
    text-shadow: 2px 2px 2px var(--light-color);
}

.fontcolortextshadowlight * {
    text-shadow: 2px 2px 2px var(--dark-color);
}


/*----------collapse------------------*/

details > summary {
	background-color: var(--light-color);
	color: var(--dark-color);
	cursor: pointer;
	padding: .5rem 1rem;
}
  
details > summary > * {
	display: inline;
}

details:not([open]) .field-paragraphs {
	/* any direct child elements other than summary, or any direct child text nodes */
	display: none;
}

.bgcolor > .inner > details > summary {
	background-color: inherit;
	color: inherit;
}

details > summary:focus{
   outline: 0px solid var(--second-bg-color) !important;
   outline-offset:0px !important;
   border-bottom: 0px solid var(--main-color);
}
  
/*----------table calendar-----------*/

.tablecalendar {
	margin-bottom: 5vh;
}

.tablecalendar .field-paragraphs, 
.tablecalendar .trow {
	padding-left: 1.2rem;
}

.tablecalendar .trow {
	background-color: var(--main-bg-color);
}

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

	.tablecalendar .field-paragraphs {
		padding-left: initial !important;
	}

	.tablecalendar .paragraph.paragraph--type--table {
		padding-right: 0 !important;
	}
	
	.tablecalendar .trow {
		padding-right: 21px !important;
	}
}

/************** wave *******************/

.wave:not(.animation)::after,
.wave.animation > .inner::after {
    background-image: url("../images/waves.webp?v=20250811");
    background-position: bottom;
    background-size: contain;
    background-repeat: repeat-x;
    z-index: 2;
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 150px;
}

.wave p {
    z-index: 3;
    position: relative;
}

.dropshadowforimages img {
	filter: drop-shadow(0px 0px 3px var(--main-color));
    padding: 4px;
}

/* slick slider carousel */

.slick-arrow {
    width: 48px !important;
    height: 48px !important;
    background: var(--light-color) !important;
    border-radius: 0;
}

.slick-prev {
    left: 5px !important;
    z-index: 9;
}
.slick-next {
    right: 5px !important;
	z-index: 9;
}

.slick-prev::before, .slick-next::before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900;
	display: block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased !important;
    color: var(--dark-color) !important;
    opacity: 1 !important;
    font-size: 40px !important;
    width: 48px !important;
    height: 40px !important;
    z-index: 9;
}

.slick-prev::before {
    content: "\f104" !important;
}

.slick-next::before {
    content: "\f105" !important;
}

.tablecellboxes .td {
    padding: 1rem 3rem;
    border-radius: 5%;
}