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

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

.paragraph--type--layout-style>video {
	position: absolute;
}

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

.skewup * {
	color: var(--light-color);
}

/*-----------------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;
	background: var(--gradient-bg-color);
	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);
}

.skewdown * {
	color: var(--light-color);
}

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

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

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

.center.paragraph,
.center .paragraph {
	margin: 0 auto !important;
}

.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 {
	min-height: 10vh;
}

.vh20 {
	min-height: 20vh;
}

.vh30 {
	min-height: 30vh;
}

.vh40 {
	min-height: 40vh;
}

.vh50 {
	min-height: 50vh;
}

.vh60 {
	min-height: 60vh;
}

.vh70 {
	min-height: 70vh;
}

.vh80 {
	min-height: 80vh;
}

.vh90 {
	min-height: 90vh;
}

.vh100 {
	min-height: 100vh;
}

.vh150 {
	min-height: 150vh;
}

.vh200 {
	min-height: 200vh;
}

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

/*height*/

.pvh5 {
	padding-top: 5vh;
	padding-bottom: 5vh;
}

.pvh10 {
	padding-top: 10vh;
	padding-bottom: 10vh;
}

.pvh20 {
	padding-top: 20vh;
	padding-bottom: 20vh;
}

/* width */
.pw5 {
	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;
}

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

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

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

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

.fontcolordark * {
	color: var(--dark-color);
}

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

.bgcolormain {
	background-color: rgba(var(--main-bg-color-base), var(--bg-transparency));
}

.bgcolorsecond {
	background-color: rgba(var(--second-bg-color-base), var(--bg-transparency));
}

.bgcolorthird {
	background-color: rgba(var(--third-bg-color-base), var(--bg-transparency));
}

.bgcolorgradient {
	background-image: linear-gradient(45deg, rgba(var(--second-bg-color-base), var(--bg-transparency)), rgba(var(--main-bg-color-base), var(--bg-transparency)));
}

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

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