/* 
	svp microsite
	v2.0.0
*/

:root {
	--blue: #0064b4;
	--red: #ff0000;
	--themecolor: var(--red);

	--subpicto-opacity-speed: 500ms;
	--subpicto-transform-speed: 700ms;
}

* {
	box-sizing: border-box;
}

*,
*:hover,
*:active,
*:focus {
	outline: 0;
}

html,
body {
	margin: 0;
	padding: 0;

	font-family: "Sparkasse Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;

	background-color: #0064b4;
	color: #404040;

	overflow: hidden;

	-webkit-hyphens: auto;
	hyphens: auto;
}

.text-serif {
	font-family: "Sparkasse Web", Georgia, "Times New Roman", Times, serif;
}

i,
a {
	font-weight: normal;
	font-style: normal;
	color: red;
}

.bg-grey-light {
	background-color: #e9e9e9;
}

.modal .bg-grey-light {
	background-color: rgba(233, 233, 233, 0.95);
}

.bg-grey {
	background-color: #d9d9d9;
}

.modal .bg-grey {
	background-color: rgba(217, 217, 217, 0.95);
}

.bg-white {
	background-color: #fff;
}

.text-grey {
	color: #666666;
}

.text-blue {
	color: var(--blue);
}
.text-red {
	color: var(--red);
}

section#start,
section[data-section-name="startdetail"] {
	color: #fff;
}

/* layout */

.full-centered {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
}

.brand {
	position: fixed;
	top: 40px;
	left: 40px;
	width: 125px;
	height: auto;
	z-index: 9;

	-webkit-transform: translateZ(0);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.brand a {
	display: block;
	position: relative;
	transition: opacity 1s;
}
.brand a:last-child {
	position: absolute !important;
	top: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
}

body.hasWhiteBG .brand a:first-child {
	opacity: 0;
}
body.hasWhiteBG .brand a:last-child {
	opacity: 1;
}

.brand img {
	display: block;
	width: 100%;
	height: auto;
}

.hasWhiteBG .brand a:before {
	opacity: 1;
}

.meta {
	position: fixed;
	top: 40px;
	right: 40px;
	line-height: 1;
	z-index: 9;

	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.navigation {
	position: fixed;
	right: 40px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9;
}

.pageAction {
	position: fixed;
	bottom: 11px;
	left: 50%;
	transform: translateX(-50%);
	transition: transform 300ms ease-out;
	font-size: 40px;
	z-index: 9;
	cursor: pointer;
}

.pageAction.last {
	transform: scale(1, -1) translateX(-50%);
}

.background-radar {
	position: fixed;
	z-index: 1;

	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;

	pointer-events: none;
}

.background-radar .img,
.background-radar .mask {
	position: absolute;
	width: 100%;
	height: 100%;
}

.background-radar .img {
	background-image: url(../assets/brands/radar.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 1;
}

.background-radar .img.animated {
	animation: 12s linear 0s normal none infinite rotate;
}

.background-radar .mask {
	background-image: url(../assets/ui/deutschland-maske-verlauf.svg);
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 2;
}

section.section {
	width: 100vw;
	height: 100vh;
	position: relative;
	z-index: 5;
	overflow: hidden;
}

/* components */

.uiActionDisclaimer {
	cursor: pointer;
}

.navigation ul,
.navigation li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: block;
}

.navigation li {
	display: flex;
	color: #fff;
	position: relative;
}

.navigation li a {
	flex: 1 1 auto;
	text-decoration: none;
	text-align: right;
	color: rgba(255, 255, 255, 0.5);
	padding-right: 12px;
	font-weight: 600;

	display: block;
}

.hasWhiteBG .navigation li,
.hasWhiteBG .navigation li a {
	color: #ffb2b2;
}

.navigation li.active a,
.navigation li:hover a {
	color: #fff;
}

.hasWhiteBG .navigation li.active a,
.hasWhiteBG .navigation li:hover a {
	color: var(--red);
}

.navigation li i {
	position: absolute;
	right: -5px;
	top: 0px;
	text-align: right;
}

.navigation li i:before {
	text-align: right;
	line-height: 24px;
	font-size: 1.4rem;
}

.navigation li i {
	color: #fff;
}

.hasWhiteBG .navigation li .icon-dot {
	color: #0064b4;
}

.meta {
	transition: all 1s;
}

.meta .frame {
	display: inline-block;
}

.meta,
.meta a {
	color: white;
}

.meta a {
	color: inherit;
	text-decoration: none;
}

.hasWhiteBG .meta,
.hasWhiteBG .pageAction {
	color: var(--red);
}

#kontakt a {
	color: inherit;
	text-decoration: none;
}

.contact-icon {
	display: inline-block;
	width: 60px;
	height: 60px;
	border-radius: 50%;

	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.contact-email {
	background-image: url(../assets/icons/icon-e-mail.svg);
}

.contact-phone {
	background-image: url(../assets/icons/icon-telefon.svg);
}

.contact-item {
	line-height: 1;
}

.contact-item {
	margin-top: 30px;
}

.modal {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;

	z-index: 20;
	background-color: rgba(255, 255, 255, 0.6);

	opacity: 0;
	transition: opacity 400ms linear;
}

.modal.show {
	opacity: 1;
}

.modal#modal_disclaimer {
	background-color: transparent;
}

.modal-dialog {
	max-width: 480px;
	padding: 25px;
}

.modal-dialog-body {
	max-height: calc(100vh - 135px);
	overflow-y: auto;
	padding-right: 20px;
}

.modal-dialog.modal-extended {
	max-width: 780px;
}

.modal-dialog.accordeon-dialog {
	width: 760px;
	min-width: 760px;
	padding-bottom: 0;
}

.modal-dialog-title {
	color: var(--themecolor);
}

.modal-dialog a {
	text-decoration: none;
	color: var(--themecolor);
}

.modal-dialog-footer {
	margin-top: 10px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.modal-dialog-footer a {
	color: inherit;
}

.modal-dialog-footer a:hover + i:before,
.modal-dialog-footer i:hover:before {
	content: "\e803";
	cursor: pointer;
}

.modal-dialog-footer i {
	font-size: 25px;
}

.modal-dialog-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 0px;
}

.modal-dialog-header i {
	font-size: 25px;
}

.acc-intro.large-text {
	margin-bottom: 0;
}

.accordeon-dialog .modal-dialog-body {
	padding-bottom: 25px;
}

#uiActionCloseModal {
	cursor: pointer;
	white-space: nowrap;
	position: relative;
	top: -5px;
}

#uiActionCloseModal:hover i:before {
	content: "\e809";
}

.acc-body-copy.AsFollower {
	display: none;
}

.acc-item.firstLevel.active .acc-body-copy.AsFollower {
	display: block;
}

.lines-2 {
	position: absolute;
	width: 715px;
	height: 560px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin-left: -70px;
	margin-top: 0px;
	z-index: -1;
}

.lines-2-asset {
	width: 100%;
	height: 100%;
	background-image: url(../assets/ui/linien-rechts.svg);
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0;
	transition: all 600ms linear;
	background-size: 90%;
}

.lines-2.active .lines-2-asset {
	opacity: 1;

	transition: all 500ms linear;
}

.lines-3 {
	position: absolute;
	width: 700px;
	height: 487px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin-left: 70px;
	margin-top: 0;
	z-index: -1;
}

/* 
	left side opened 
*/
.lines-3-asset {
	width: 100%;
	height: 100%;
	background-image: url(../assets/ui/linien-links.svg);
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0;
	transition: all 100ms linear;
	background-size: 90%;
}

.lines-2.active .lines-2-asset {
	opacity: 1;
	transition: all 600ms linear 000ms;
}

.lines-3.active .lines-3-asset {
	opacity: 1;
	transition: all 600ms linear 000ms;
}

#pictoWrapper.transform1 .picto-center,
#pictoWrapper.transform2 .picto-center {
	cursor: pointer;
}

#pictoWrapper.transform1 .picto:not(.picto-8):hover {
	background-color: #d9d9d9 !important;
}

#pictoWrapper.transform1 .picto:not(.picto-8):hover:before {
	display: none !important;
	content: "";
}

#pictoWrapper.transform2 .picto:not(.picto-3):hover {
	background-color: #d9d9d9 !important;
}

#pictoWrapper.transform2 .picto:not(.picto-3):hover:before {
	display: none !important;
	content: "";
}

#pictoWrapper.transform1 .lines-1,
#pictoWrapper.transform2 .lines-1 {
	opacity: 0;
	transition: opacity 300ms linear;
}

.picto-center {
	width: 130px;
	height: 130px;
	overflow: hidden;
	border-radius: 50%;
	background-image: url(../assets/ui/SVP-Kreisverlauf-2.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 108% 108%;
	position: absolute;
	z-index: 3;
}

.picto-1:hover {
	background-color: var(--col-sicherungssystem);
}

.picto-2:hover {
	background-color: var(--col-businesski);
}

.picto-3:hover {
	background-color: var(--col-sibus);
}

.picto-4:hover {
	background-color: var(--col-erfahrungsaustausch);
}

.picto-5:hover {
	background-color: var(--col-zmdb);
}

.picto-6:hover {
	background-color: var(--col-regionale);
}

.picto-7:hover {
	background-color: var(--col-risiko);
}

.picto-8:hover,
#pictoWrapper.transform1 .picto-8 {
	background-color: var(--col-sibusanalyse);
}

.picto-9:hover {
	background-color: var(--col-xbrl);
}

.picto-10:hover {
	background-color: var(--col-nachhaltigkeit);
}

.picto-20:hover,
.picto-21:hover,
.picto-22:hover,
.picto-23:hover,
.picto-24:hover,
.picto-25:hover,
.picto-26:hover,
#pictoWrapper.transform2 .picto-3 {
	background-color: #8cd000;
}

.sub-picto.picto-10:hover,
.sub-picto.picto-11:hover,
.sub-picto.picto-12:hover,
.sub-picto.picto-13:hover {
	background-color: #1badcf;
}

.picto img {
	width: 90%;
	height: auto;
}

.lines-1 {
	position: absolute;
	z-index: 1;
	width: 407px;
	height: 390px;
	top: calc(50% - 0px);
	left: 50%;
	transform: translate(-50%, -50%);
}

.lwrapper {
	position: relative;
	width: 400px;
	height: 400px;
}

.lines-1 .lines {
	position: absolute;
	width: 400px;
	height: 400px;
	top: 0;
	left: 0;
	opacity: 0;
	transform: scale(0.78);
	transition: transform 600ms ease-out;
}

.lines-1.active .lines {
	transform: none;
	opacity: 1;
}

.transform1,
.transform1 .picto,
.transform2,
.transform2 .picto {
	transition: transform 600ms ease-out;
}

.pico-10,
.pico-11,
.pico-12,
.pico-13,
.picto-20,
.picto-21,
.picto-22,
.picto-23,
.picto-24,
.picto-25,
.picto-26,
.picto-27 {
	opacity: 0;
	transition-delay: 0.3s;
	transform: translate3d(0, 0, 0) scale(0);
}

.picto-10.show {
	transition:
		opacity var(--subpicto-opacity-speed) linear 200ms,
		transform var(--subpicto-transform-speed) cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transform: translate(-132px, -182px) scale(1);
	opacity: 1;
}

.picto-11.show {
	transition:
		opacity var(--subpicto-opacity-speed) linear 300ms,
		transform var(--subpicto-transform-speed) cubic-bezier(0.68, -0.55, 0.265, 1.55) 100ms;
	transform: translate(-216px, -67px) scale(1);
	opacity: 1;
}

.picto-12.show {
	transition:
		opacity var(--subpicto-opacity-speed) linear 400ms,
		transform var(--subpicto-transform-speed) cubic-bezier(0.68, -0.55, 0.265, 1.55) 200ms;
	transform: translate(-216px, 76px) scale(1);
	opacity: 1;
}

.picto-13.show {
	transition:
		opacity var(--subpicto-opacity-speed) linear 500ms,
		transform var(--subpicto-transform-speed) cubic-bezier(0.68, -0.55, 0.265, 1.55) 300ms;
	transform: translate(-130px, 186px) scale(1);
	opacity: 1;
}

.picto-20.show {
	transition:
		all var(--subpicto-opacity-speed) linear,
		transform var(--subpicto-transform-speed) cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transform: translate3d(-69px, -220px, 0) scale(1);
	opacity: 1;
}

.picto-21.show {
	transition:
		opacity var(--subpicto-opacity-speed) linear 100ms,
		transform var(--subpicto-transform-speed) cubic-bezier(0.68, -0.55, 0.265, 1.55) 30ms;
	transform: translate3d(74px, -218px, 0) scale(1);
	opacity: 1;
}

.picto-22.show {
	transition:
		opacity var(--subpicto-opacity-speed) linear 200ms,
		transform var(--subpicto-transform-speed) cubic-bezier(0.68, -0.55, 0.265, 1.55) 60ms;
	transform: translate3d(186px, -135px, 0) scale(1);
	opacity: 1;
}

.picto-23.show {
	transition:
		opacity var(--subpicto-opacity-speed) linear,
		transform var(--subpicto-transform-speed) cubic-bezier(0.68, -0.55, 0.265, 1.55) 80ms;
	transform: translate3d(230px, 0px, 0) scale(1);
	opacity: 1;
}

.picto-27.show {
	transition:
		opacity var(--subpicto-opacity-speed) linear 200ms,
		transform var(--subpicto-transform-speed) cubic-bezier(0.68, -0.55, 0.265, 1.55) 100ms;
	transform: translate3d(189px, 115px, 0) scale(1);
	opacity: 1;
}

.picto-26.show {
	transition:
		opacity var(--subpicto-opacity-speed) linear 200ms,
		transform var(--subpicto-transform-speed) cubic-bezier(0.68, -0.55, 0.265, 1.55) 100ms;
	transform: translate3d(186px, 136px, 0) scale(1);
	opacity: 1;
}

.picto-25.show {
	transition:
		opacity var(--subpicto-opacity-speed) linear 200ms,
		transform var(--subpicto-transform-speed) cubic-bezier(0.68, -0.55, 0.265, 1.55) 120ms;
	transform: translate3d(70px, 220px, 0) scale(1);
	opacity: 1;
}

.picto-24.show {
	transition:
		opacity var(--subpicto-opacity-speed) linear 100ms,
		transform var(--subpicto-transform-speed) cubic-bezier(0.68, -0.55, 0.265, 1.55) 140ms;
	transform: translate3d(-72px, 220px, 0) scale(1);
	opacity: 1;
}

.accordeon {
	margin-left: -25px;
	margin-right: -25px;
}

.acc-title {
	align-items: center;
	border-top: 2px solid #ffffff;
	display: flex;
	justify-content: space-between;
	min-height: 44px;
	padding-left: 25px;
	padding-right: 25px;

	cursor: pointer;
}

.acc-title .text-grey {
	color: #000;
}

.acc-body-copy {
	padding-left: 25px;
	padding-right: 25px;
	padding-bottom: 15px;
}

.acc-body-copy p {
	margin-bottom: 0;
	margin-top: 0.75rem;
}

.acc-toggle-icon {
	font-size: 25px;
}

.acc-snd-level:not(.asFirst) {
	background-color: rgba(219, 219, 219, 0.75);
}

.acc-body {
	display: none;
}

.acc-item.active > .acc-body {
	display: block;
}

.acc-item.active > .acc-title .acc-toggle-icon i:before {
	content: "\e806";
}

.accordeon-dialog {
	max-height: 100%;
	overflow-y: auto;
}

.acc-body-copy strong {
	font-weight: 600;
}

.accordeon ul,
.accordeon li,
.modal-dialog-body ul,
.modal-dialog-body li {
	display: block;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.accordeon li,
.modal-dialog-body li {
	position: relative;
	padding-left: 13px;
}

.accordeon li:before,
.modal-dialog-body li:before {
	content: "•";
	position: absolute;
	left: 0;
	color: var(--red);
}

.vorteiler_wrapper {
	width: 100%;
	height: 100%;
	position: relative;
}

.vorteiler_wrapper:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -200px;
	margin-left: -200px;
	width: 400px;
	height: 400px;
	/*background-image: url(../assets/ui/svp-kreisverlauf-grau.png);*/
	background-image: url(../assets/ui/SVP-Kreisverlauf-grau-2.png);
	background-repeat: no-repeat;
	background-size: cover;
	animation: 12s linear 0s normal none infinite rotate;
}

#nutzen-und-mehrwerte.active .vorteiler_wrapper:before {
	animation: 12s linear 0s normal none infinite rotate;
}

.vorteil-tag {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
}

.vorteil-tag:hover,
.vorteil-tag.show {
	color: var(--red);
	cursor: pointer;
}

#vorteil1 {
	margin-top: -255px;
}
#vorteil2 {
	margin-top: 117px;
	margin-left: -308px;
}

#vorteil3 {
	margin-top: 117px;
	margin-left: 318px;
}

#vorteileLinien {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin-top: -60px;
}
/* animation */

@keyframes rotate {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);
	}
}

/* fixes IE */

#module {
	position: relative;
}

.sub-picto {
	top: 50%;
	left: 50%;
	margin-top: -60px;
	margin-left: -60px;
}

#modal_disclaimer {
	visibility: hidden;
}

#modal_disclaimer.active {
	visibility: visible;
	opacity: 1;
}

/*
	Hero Module, new banner position
*/

div#banner {
	background: #fff;
	border-radius: 8px;
	max-width: 330px;
	padding: 27px 20px;
	position: absolute;
	left: calc(-66px + 10vw);
	top: 22vh;
	text-align: left;
	width: 17vw;
}

#banner .banner-head {
	margin-top: 10px;
}

#banner.active {
	opacity: 1;
}

#banner .banner-header {
	text-align: center;
}

#banner .banner-icon {
	background-image: url("../assets/icons/svp-markt.svg");
	background-color: #ed57cf;
	display: inline-block;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 100px;
	height: 100px;
}

#searchBtn {
	display: inline-block;
	position: relative;
	padding-right: 0;
	width: 50px;
	margin-left: 10px;
	height: 12px;
}

#searchBtn svg {
	width: 40px;
	position: absolute;
	height: auto;
	top: 50%;
	transform: translateY(-50%);
}
#searchBtn svg circle {
	fill: #fff;
	transition: all 1s;
}

#searchBtn svg path {
	fill: #17babf;
	transition: all 1s;
}

body.hasWhiteBG #searchBtn svg path {
	fill: #fff;
}

body.hasWhiteBG #searchBtn svg circle {
	fill: var(--red);
}

#searchBtn em {
	position: absolute;
	right: 0;
	top: 0;
	height: 17px;
	width: 17px;

	background-image: url(../assets/ui/SVP-Lupe.png);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 72px 144px;
}

.hasWhiteBG #searchBtn em {
	background-position: 0 -72px;
}

#searchBar {
	padding: 25px;
	width: 760px;
	opacity: 0;
	-webkit-transition: opacity 300ms linear 500ms;
	-o-transition: opacity 300ms linear 500ms;
	transition: opacity 300ms linear 500ms;
}

#searchBar #uiActionCloseModal {
	right: -5px;
}

#contantModalModule.show #searchBar {
	opacity: 1;
}

#searchBar .tx-indexedsearch-title a {
	font-weight: 500;
	text-decoration: none;
}

#searchBar .searchbar-header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-bottom: 15px;
}

#searchBar .searchbar-footer {
	margin-top: 15px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

#searchBar .searchbar-footer a {
	text-decoration: none;
	color: #666;
}

#searchBar .searchbar-footer a:hover .icon-right-circled {
	background-position: -498px -66px;
}

#startSearch {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;

	position: relative;
	right: -5px;
}

#searchBar input[type="text"] {
	font-family: "Sparkasse Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 2rem;
	color: #666;
	width: 100%;
	background-color: #fff;
	border: 0;
	padding: 15px;
}

#searchResults {
	margin-left: -25px;
	margin-right: -25px;
	/* padding-left: 25px;
	padding-right: 25px;
	padding-top: 25px; */
	color: #666;
	-webkit-box-shadow: 0 2px 0 0 #fff inset;
	box-shadow: 0 2px 0 0 #fff inset;
	margin-top: 20px;

	max-height: 400px;
	overflow-y: auto;
}

.tx-indexedsearch-res {
	border-bottom: 2px solid #fff;
	padding: 10px 25px;
	margin-top: 30px;
}
#searchResults > p {
	padding: 10px 25px;
}
.tx-indexedsearch-res:last-child {
	border-bottom: 0;
	margin-bottom: 0;
}

.tx-indexedsearch-res h3 {
	padding: 0;
	margin: 0;
}

.result-item {
	cursor: pointer;
}

.result-item:not(:first-child) {
	margin-top: 25px;
}

.result-item-title {
	color: #0064b4;
	font-size: 1.5rem;
	line-height: 1.3;
	padding-bottom: 10px;
}

.pageAction .icon-down-open-big {
	-webkit-animation: animateArrow 4s infinite;
	animation: animateArrow 4s infinite;
	display: inline-block;
}

@-webkit-keyframes animateArrow {
	80% {
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
	}
	90% {
		-webkit-transform: translateY(7px);
		transform: translateY(7px);
	}
	100% {
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
	}
}

@keyframes animateArrow {
	80% {
		transform: translateY(0px);
	}
	90% {
		transform: translateY(7px);
	}
	100% {
		transform: translateY(0px);
	}
}

.flex-start {
	margin-top: 20px;
	display: flex;
	align-items: flex-start;
}

.checkboxCookies {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	border: 2px solid #777;
	display: block;
	overflow: hidden;
	margin-right: 10px;
}

#stateCookies {
	display: none;
}

#stateCookies:checked + .checkboxCookies {
	background-image: url("../assets/ui/checkmark.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border: 0;
}

#bg1 {
	opacity: 0.5;
}

#start .xxlarge-text {
	position: relative;
	max-width: clamp(566px, calc(90% - 500px), 1379px);
	width: 80%;
}

#banner {
	font-size: 16px;
	line-height: 1.35;
}

.videowrapper {
	width: 60%;
	height: calc(60vw * 0.5625);
	background: black;
}

.vjs-default-skin .vjs-controls {
	visibility: visible;
	opacity: 1;
}

.video-js .vjs-big-play-button {
	background-color: rgba(0, 0, 0, 0.65);
	font-size: 3em;
	border-radius: 50%;
	height: 3em !important;
	width: 3em !important;
	line-height: 3em !important;
	border: 0 !important;
	margin-top: 0 !important;
	margin-left: 0 !important;
	transform: translate(-50%, -50%) !important;
}

.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:focus,
.video-js .vjs-big-play-button:active {
	background-color: rgba(0, 0, 0, 0.9);
}

.video-js .vjs-big-play-button .vjs-icon-placeholder::before,
.video-js .vjs-play-control .vjs-icon-placeholder::before,
.vjs-icon-play::before {
	font-size: 2em;
}
.picto-10.show {
	transition:
		opacity 300ms linear,
		transform 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transform: translate(-132px, -182px) scale(1);
	opacity: 1;
}

.picto-11.show {
	transition:
		opacity 300ms linear 100ms,
		transform 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 100ms;
	transform: translate(-216px, -67px) scale(1);
	opacity: 1;
}

.picto-12.show {
	transition:
		opacity 300ms linear 200ms,
		transform 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 200ms;
	transform: translate(-216px, 76px) scale(1);
	opacity: 1;
}

.picto-13.show {
	transition:
		opacity 300ms linear 300ms,
		transform 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 300ms;
	transform: translate(-130px, 186px) scale(1);
	opacity: 1;
}

.picto-20.show {
	transition:
		all 300ms linear,
		transform 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transform: translate3d(-69px, -220px, 0) scale(1);
	opacity: 1;
}

.picto-21.show {
	transition:
		opacity 300ms linear 100ms,
		transform 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 30ms;
	transform: translate3d(74px, -218px, 0) scale(1);
	opacity: 1;
}

.picto-22.show {
	transition:
		opacity 300ms linear 200ms,
		transform 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 60ms;
	transform: translate3d(186px, -135px, 0) scale(1);
	opacity: 1;
}

.picto-23.show {
	transition:
		opacity 300ms linear,
		transform 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 80ms;
	transform: translate3d(230px, 0px, 0) scale(1);
	opacity: 1;
}

.picto-27.show {
	transition:
		opacity 300ms linear 200ms,
		transform 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 100ms;
	transform: translate3d(189px, 115px, 0) scale(1);
	opacity: 1;
}

.picto-26.show {
	transition:
		opacity 300ms linear 200ms,
		transform 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 100ms;
	transform: translate3d(186px, 136px, 0) scale(1);
	opacity: 1;
}

.picto-25.show {
	transition:
		opacity 300ms linear 200ms,
		transform 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 120ms;
	transform: translate3d(70px, 220px, 0) scale(1);
	opacity: 1;
}

.picto-24.show {
	transition:
		opacity 300ms linear 100ms,
		transform 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 140ms;
	transform: translate3d(-72px, 220px, 0) scale(1);
	opacity: 1;
}