@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600&family=Questrial&display=swap');

@font-face {
  font-family: 'logo';
  src:  url('fonts/logo.eot?iuiem0');
  src:  url('fonts/logo.eot?iuiem0#iefix') format('embedded-opentype'),
    url('fonts/logo.ttf?iuiem0') format('truetype'),
    url('fonts/logo.woff?iuiem0') format('woff'),
    url('fonts/logo.svg?iuiem0#logo') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="logo-"], [class*=" logo-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'logo' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.logo-swepearl-logo-horizontal-black:before {
  content: "\e900";
}

p,h1{
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}

:root{
	
	--white : 255,255,255;
	--light : 250,250,255;
	--darkBlue : 22,22,30;
	--darkerBlue : 20,20,35;
	
	--bgHtml: rgb(255,255,255);
	--bgBody: rgb(var(--bgHtml));
	
	--bannerFontFamily: 'Roboto';
	
	
	--bannerTitleSize: 30px;
	--bannerTitleSizeL: 4vw;
	--bannerTitleSizeXL: 5vw;
	--bannerTitleSizeM: 3vw;
	--bannerTitleSizeS: 2vw;
	--bannerTitleMaxWidth: 80%;
	
	--bannerBoxTitleSize: 30px;
	
	--bannerLabelSize: 20px;
	--bannerLabelColor: rgba(250,250,250,0.2);
	
	--bannerTextSize: 20px;
	--bannerTextMaxWidth: 80%;
	--bannerTextInitialSize: 15px;
	--bannerTextColor: rgba(20,20,24,1);
	
	--bannerSubTextSize: 12px;
	--bannerSubTextMaxWidth: 20%;
	--bannerSubTextColor: rgba(180,180,180,1);
	
	--headerMenuFontSize: 15px;
	--headerMenuColor: rgba(30,30,30,1);
	--headerMenuColorHover: rgba(0,0,0);
	
	--headerMenuColorLight: rgba(250,250,250,1);
	--headerMenuColorHoverLight: rgba(255,255,255,1);
	
	--ctaBTNFontSize: 20px;
	
	--borderColor: rgb(78,85,113);
	
}

button:hover{
	cursor: pointer;
}

html{
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	background-color:  var(--bgHtml);
	width: 100vw;
	min-height: 100vh;
	height: auto;
	overflow:hidden;
	overflow-y: auto;
}

body{
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	background-color: var(--bgBody);
	width: 100vw;
	min-height: 100vh;
	height: auto;
	font-family: var(--bannerFontFamily);
	font-weight: 400;
	overflow:hidden;
	overflow-y: auto;
}

.header{	
	position: fixed;
	z-index: 99;
	top: 0px;
	left: 0px;
	width: 100vw;
	min-height: 80px;
	height: auto;
	background-color: rgba(250,250,250,0);
	border-bottom: 0.5px solid rgba(200,200,200);
	transition: 0.2s linear background;
	padding: 0 0 0 0;
}

.header .inner-container{	
	display: grid;
	grid-template-columns: 30px 200px 1fr 200px 30px;
	grid-template-areas: ". logo menu cta .";
	grid-column-gap: 20px;
	justify-content: center;
	align-content: center;
	width: 100%;
	max-width: 1200px !important;
	min-height: 80px;
	height: auto;
	margin: 0 auto;
}


.hbgpos{ 
	background-color: rgb(247,247,249);
}
.hbgselfservice{ 
	background-color: rgb(247,247,249);
}
.hbgmpos{ 
	background-color: rgb(247,247,249);
}
.hbgtableorder{ 
	background-color: rgb(246, 228, 228);
}
.hbgecommerce{ 
	background-color: rgb(250, 249, 245);
}
.hbgdisplay{ 
	background-color: rgb(230, 224, 229);
}
.hbganalytics{ 
	background-color: rgb(33, 33, 46);
	border-bottom: 1px solid rgb(43, 43, 59);
}
.header.hbganalytics .expand-menu div.top,
.header.hbganalytics .expand-menu div.bottom{
	background-color: rgb(150,150,150); 
}

.hbgbackoffice{ 
	background-color: rgb(247,247,249);
}
.hbgfooter{ 
	background-color: rgba(27, 28, 37, 1);
	border-bottom: 1px solid rgb(50,50,50);
}
.header.hbgfooter .expand-menu div.top,
.header.hbgfooter .expand-menu div.bottom{
	background-color: rgb(150,150,150); 
}

.hbgbooking{ 
	background-color: rgba(250, 249, 245, 0.6);
	backdrop-filter: blur( 3px );
	-webkit-backdrop-filter: blur( 3px );
}

.hbgstart{ 
	background-color: rgba(250,250,252, 1);
}

.headerlight{
	background-color: rgba(255,255,255,1);
}
.hbgon{
	background-color: rgb(247,247,249);
}

.header .inner-container .logo{
	grid-area: logo;
	height: 80px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	font-size: 40px;
	color: rgb(60,60,60);
}

.hbganalytics .inner-container .logo{
	color: rgb(200,200,200);
}
.hbganalytics .inner-container .menu a,
.hbganalytics .inner-container .menu li{
	color: rgb(200,200,200);
}
.hbganalytics .inner-container .cta a{
	color: rgb(200,200,200);
}



.hbggetstarted{ 
	background-color: rgb(33, 33, 42);
	border-bottom: 1px solid rgb(50,50,50);
}
.header.hbggetstarted .expand-menu div.top,
.header.hbggetstarted .expand-menu div.bottom{
	background-color: rgb(150,150,150); 
}

.hbggetstarted .inner-container .logo{
	color: rgb(200,200,200);
}
.hbggetstarted .inner-container .menu a,
.hbggetstarted .inner-container .menu li{
	color: rgb(200,200,200);
}
.hbggetstarted .inner-container .cta a{
	color: rgb(200,200,200);
}

.hbgfooter .inner-container .logo{
	color: rgb(200,200,200);
}
.hbgfooter .inner-container .menu a,
.hbgfooter .inner-container .menu li{
	color: rgb(200,200,200);
}
.hbgfooter .inner-container .cta a{
	color: rgb(200,200,200);
}



.header .inner-container .logo:hover{ cursor: pointer; }

.header .inner-container .menu{
	grid-area: menu;
}

.header .inner-container .menu .menu-pc{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	min-height: 80px;
	height: auto;
	background-color: none;
	}

.header .inner-container .menu .menu-mobile{
	display: none;
	padding-bottom: 20px;
	}

.header a{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	color: var(--headerMenuColor);
	font-size: var(--headerMenuFontSize);
	font-weight: 400;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	position: relative;
}
.header a:nth-child(even){
	margin: 0px 30px;
}
.header .inner-container .menu.light a{
	color: rgba(250,250,250,1);
}
.header a.blue{
	color: rgba(75,76,255,1);
}
.header a.light{
	color: rgba(255,255,255,1);
}

.header a:hover{
	color: var(--headerMenuColorHover);
	cursor: pointer;
}

.header a icon{
	margin-right: 8px;
	font-size: 20px;
}

.header .cta{
	grid-area: cta;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	text-align: center;
}

.header .cta .expand-menu{
	display: none;
}
.header .cta .express{
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}

.header .cta .expand-icon-container{
	width: 30px;
	height: 20px;
	position: relative;
	display: block;
	margin: 0 auto;
}

.header .cta .expand-icon-container .top{
	position: absolute;
	z-index: 1;
	top:5px;
	width: 100%;
	height: 1px;
	background-color: rgb(60,60,60);
	transition: 0.2s ease all;
	}
.header .cta .expand-icon-container .bottom{
	position: absolute;
	z-index: 1;
	bottom:5px;
	width: 100%;
	height: 1px;
	background-color: rgb(60,60,60);
	transition: ease-in-out 0.2s all; 
	}

.header .cta .expand-menu.on .expand-icon-container .top{ 
	top: 10px;
}
.header .cta .expand-menu.on .expand-icon-container .bottom{
	bottom: 10px;
}	

.hbgbookinghome{ 
	background-color: rgba(43, 43, 44, 0.8);
	border-bottom: 1px solid rgba(50,50,50,0.5);
}
.hbgbookinghome a,
.hbgbookinghome .menu-mobile a{
	color: white;
	}
.hbgbookinghome a:hover,
.hbgbookinghome .menu-mobile a:hover{
	color: rgb(150,150,150);
}
.hbgbookinghome .logo-swepearl-logo-horizontal-black{
	color: white;
}
.header.hbgbookinghome .expand-menu div.top,
.header.hbgbookinghome .expand-menu div.bottom{
	background-color: rgb(250,250,250); 
}

.menu-page-container{
	position: absolute;
	z-index: 99;
	left: 50%;
	top:49px;
	padding: 2px;
	background-color: white;
	border-radius: 8px;
	-webkit-border-radious: 8px;
	-moz-border-radious: 8px;
	box-shadow: 0px 15px 40px rgba(10,10,10,0.3);
	min-width: 300px;
	transition: ease-in-out 0.2s all; 
	transform: translateX(-50%) scale(1,1);
	display: none;
	visibility: none;
	opacity: 0;
}

.menu-page-container.on{
	display: block;
	visibility: visible;
	opacity: 1;
	animation: menupopup 0.2s ease-in 1;
}

.header .header-menu-separator.mobile{
	display: block;
	width: 100%;
	height: 20px;
	margin-top: 30px;
	border-top: 1px solid rgba(20,20,20,0.2);
	
}

.header.hbgbookinghome .header-menu-separator.mobile{
	display: block;
	width: 100%;
	height: 20px;
	margin-top: 30px;
	border-top: 1px solid rgba(255,255,255,0.5);
}


@keyframes menupopup {
	0% {
		scale: 1.02;
	}
	50% {
		scale: 0.98;
	}
	100% {
		scale: 1;
	}
}

.menu-page-container .inner{
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	display: block;
	height: auto;
	width: auto;
}
.menu-page-container .inner .pointer{
    position: absolute;
    z-index: 99;
    display: block;    
    width: 20px;
    height: 20px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    top: 0px;
    left: 50%;
    background-color: rgba(255, 255, 255, 1);
    transform: rotate(45deg) translateX(-50%);
}

.menu-page-container .splitt{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 20px;
	padding: 40px;
}
.menu-page-container .splitt.c{
	grid-template-columns: 1fr 1fr 1fr;
	}
.menu-page-container ul{
	position: relative;
	list-style: none;
	display: grid;
	justify-content: flex-start;
	align-content: flex-start;
	grid-template-columns: 1fr;
	grid-row-gap: 8px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

.menu-page-container ul li{
	font-size: font-size: var(--headerMenuFontSize);
	color: rgb(20,20,30);
	width: 240px;
	max-width: 260px;
}
.menu-page-container ul li icon{
	font-size: 24px;
	}
.menu-page-container ul li.title{
	font-weight: 500;
	display: grid;
	grid-template-columns: 34px auto;
	justify-content: flex-start;
	align-items: center;
	color: rgb(140,140,145);
	font-size: 14px;
	text-transform: uppercase;
	margin-bottom: 20px;
	letter-spacing: 1px;
}

.menu-page-container ul li.link{
	padding-left: 34px;
	font-weight: 300;
	font-size: font-size: var(--headerMenuFontSize);
	font-size: 14px;
	}

.menu-page-container ul li.link:hover{
	cursor: pointer;
	color:  rgba(75,76,255,1);
	}

.menu-page-container ul li.link p{
	font-weight: 500;
	margin-top: 10px;
	} 
.menu-page-container ul li.link span{
	display: block;
	color: rgb(130,130,135);
	padding: 5px 0px;
	font-weight: 300;
}

.header a.login{
	height: 40px;
	line-height: 40px;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	background-color: black;
	color: white;
	padding: 0px 20px;
}



/************************************************
	section	
*************************************************/

.section{
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	min-width: 100vw;
	max-width: 100vw;
	height: 100%;
	position: relative;
}
.section:after{
	content: '';
	display: block;
	clear: both;
}

.section.dark{ background-color: rgba(22,22,30,1); }
.section.creme{ background-color: rgba(247, 245, 241, 1); }
.section.blanc{ background-color: rgba(255, 255, 255, 1); }
.section.cold{ background-color: rgba(245, 245, 249, 1); }
.section.light-nude{ background-color: rgba(255, 239, 244, 1); }



/************************************************
	TITLE & TEXT	
*************************************************/

.label{
	text-transform: uppercase;
	font-size: 10px;
	color: rgba(60,60,60,1);
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	padding: 0px 10px;
	background-color: rgba(220,220,220,1);
	display: inline-block;
	height: 20px;
	line-height: 20px;
	margin-bottom: 10px;
	font-weight: 400;
	letter-spacing: 1px;
	}
.title{
	font-size:  50px;
	font-weight: 500;
	line-height: 1.1;
	position: relative;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	letter-spacing: -1px;
}

.subtitle{
	font-size:  30px;
	font-weight: 500;
	line-height: 1.1;
	position: relative;
	padding: 20px 0px;
}


.brand{
	font-size:  70px;
	font-weight: 500;
	line-height: 1.1;
	position: relative;
}

.text{
	font-size:  16px;
	font-weight: 400;
	line-height: 1.5;
	width: 90%;
	position: relative;
	color: rgb(20,20,20);
	}
	

.banner .content .title{
	font-weight: 500;
	padding: 20px 0px;
	margin: 0 auto;
	font-size:  60px;
	font-weight: 500;
	line-height: 1.1;
	position: relative;
}
.banner .content .text{
	font-size:  18px;
	font-weight: 400;
	line-height: 1.4;
	width: 80%;
	max-width: 600px;
	margin: 0 auto;
	position: relative;
	padding: 0px 0px;
}

.strip.splitt .content .title{
	font-weight: 500;
	padding: 20px 0px;
	margin: 0 auto;
	font-size:  50px;
	line-height: 1.1;
	position: relative;
}
.strip.splitt .content .text{
	font-size:  16px;
	font-weight: 400;
	line-height: 1.5;
	width: 80%;
	max-width: 700px;
	margin: 0 auto;
	position: relative;
}

.question-markup{
	color: rgba(51, 135, 237, 1);
	padding: 0px 0px;
	display: block;
}
.inline-markup{
	color: rgba(51, 135, 237, 1);
}
.inline-markup.weborder{
	color: rgba(98, 202, 207, 1);
	font-weight: 500;
}

/************************************************
	STRIP BANNER	
*************************************************/
.strip{
	padding: 80px 0px;
	margin: 0px 0px;
	max-width: 100%;
	overflow-x: hidden;
}

/************************************************
	BANNER	
*************************************************/

.banner{
	display: grid;
	grid-template-columns: 1fr;
	grid-row-gap: 15px;
	text-align: center;
	justify-content: center;
}
.banner .content img{
	width: 80%;
	max-width: 800px;
	}

.menu-combo{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	align-items: center;
	padding: 0px 20px;
	height: 60px;
	border: 2px solid rgba(10,10,10,1);
	border-radius: 31px;
	-webkit-border-radius: 31px;
	-moz-border-radius: 31px;
	margin: 0 auto;
	margin-top: 40px;
	margin-bottom: 40px;
}

.menu-combo a{
	padding: 0px 30px;
	font-weight: 400;
	font-size: 18px;
	border-left: 2px solid rgba(10,10,10,1);
	text-decoration: none;
	color: rgb(10,10,10);
	height: 60px;
	line-height: 60px;
}
.menu-combo a:nth-child(1){
	border:0px;
}



/************************************************
	MUSAIC CONTENT	
*************************************************/


.strip.musaic{
	margin: 0 0 0 0;
	padding:  0 0 0 0;
	display: grid;
	grid-template-columns: 50px 1fr 50px 1fr 50px;
	grid-template-areas: 
		'. slogan . graphic .'
		'. content . graphic .'
		'. . . graphic .';
	align-content: flex-start;
	justify-content: space-around;
	width: 100%;
	max-width: 1200px;
	overflow-x: hidden;
	margin: 0 auto;
	
}

.strip.musaic.revers{
	margin: 0 0 0 0;
	padding:  0 0 0 0;
	display: grid;
	grid-template-columns: 50px 1fr 50px 1fr 50px;
	grid-template-areas: 
		'. graphic . slogan .'
		'. graphic . content .'
		'. graphic . . .';
	align-content: flex-start;
	justify-content: flex-start;
	margin: 0 auto;
	max-width: 1200px;
}

.strip.musaic .slogan{
	grid-area: slogan;
	position: relative;
	z-index: 2;
	border: 0px solid #000;
}

.strip.musaic .content{
	grid-area: content;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-content: flex-start;
	position: relative;
	z-index: 2;
	padding: 40px 0px;
}	

.strip.musaic .content .text:nth-child(even){
	margin-top: 10px;
	}

.strip.musaic .graphic{
	grid-area: graphic;
	position: relative;
	z-index: 1;
}

.strip.musaic .graphic .image-slider{
	position: relative;
}
.strip.musaic .graphic .image-slider:after{
	content: '';
	display: block;
	clear: both;
}
.strip.musaic .graphic .image-slider img{
	max-height: 100%;
}
.strip.musaic .graphic .image-slider .cta{
	width: 100%;
	height: 40px;
	position: absolute;
	z-index: 1;
	left: 0px;
	bottom: 20px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
}
.strip.musaic .graphic .image-slider .cta div{
	width: 8px;
	height: 8px;
	background-color: rgba(10,10,10,1);
	border: 1px solid rgb(10,10,10);
	margin: 5px;
	border-radius: 5px;
}
.strip.musaic .graphic .image-slider .cta div.off{
	background-color: rgba(10,10,10,0);
}

.strip.musaic .graphic .image-slider .frame{
	position: relative;
	z-index: 1;
	top: 0px;
	left: 0px;
}
.strip.musaic .graphic .image-slider .image{
	position: absolute;
	z-index: 2;
	top: 0px;
	left: 0px;
}
.strip.musaic .graphic .image-slider .image:hover{
	cursor: e-resize;
}
.strip.musaic .graphic .image-slider .image.off{
	display: none;
}


/************************************************
	STRIP SPLITT	
*************************************************/

.strip.splitt.aa{
	display: grid;
	grid-template-columns: 40px 1fr 40px 1fr 40px;
	grid-template-areas: '. a . b .';
	justify-content: center;
	text-align: center;
	max-width: 1200px;
	margin: 0 auto;
}
.strip.splitt.aa .content.a{
	grid-area: a;
}
.strip.splitt.aa .content.b{
	grid-area: b;
}
.strip.splitt.aa .content img{
	width: 80%;
	max-width: 460px;
	height: auto;
	}

.strip.splitt.aa .content{
	background-color: rgba(255,255,255,0);
	border:1px solid rgba(232, 228, 217, 1);
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	padding: 50px;
}

.strip.splitt.aa .content .text{
	width: 100%;
}


/************************************************
	STRIP APPLICATION FUTURES	
*************************************************/

.strip.futures{
	display: block;
	margin: 0 0 0 0;
	padding: 40px 0px 0px 0px;
	width: 100%;
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
	position: relative;
	z-index: 9;
}

.strip.futures .container-label{
	position: absolute;
	z-index: 1;
	top:0px;
	left: 0px;
	text-align: left;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: normal;
	color: rgb(30,30,30);
	margin: 0 0 0 0;
	border-left: 2px solid rgb(30,30,30);
	padding-left: 15px;
	}

.strip.futures .inner{
	display: grid;
	grid-template-columns: repeat(4,1fr);
	grid-row-gap: 15px;
	justify-content: flex-start;
	padding: 0px 0px;
	max-width: 1200px;
	position: relative;
	width: auto;
}

.strip.futures .cta{
	position: absolute;
	z-index: 2;
	width: 50px;
	height: 50px;
	font-size: 30px;
	color: rgb(50,50,50);
	background-color: rgba(250,250,250,1);
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	text-align: center;
	line-height: 50px;
	top: 50%;
	transform: translateY(-50%);
	display: none;
}

.strip.futures .cta.left{
	left: 30px;
}
.strip.futures .cta.right{
	right: 30px;
}
.strip.futures .cta.left.on,
.strip.futures .cta.right.on{
	display: none;
}


.strip.futures .inner .box{
	width: 240px;
}
.strip.futures .inner .box:nth-child(even){
	margin: 0px 20px;
}
.strip.futures .inner .box icon{
	font-size: 20px;
	}
.strip.futures .inner .box .title{
	font-size: 14px;
	margin: 0 0 0 0;
	padding: 10px 0px;
	font-weight: 500;
	letter-spacing: normal;
	color: rgb(30,30,30);
}
.strip.futures .inner .box .text{
	font-size: 14px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	color: rgb(130,130,130);
	font-weight: 400;
}


/********************************************************************************
	*****************************************************************************/
	

/* Booking Home */

.section.booking-home{
	position: relative;
	padding: 100px 0 150px 0;
	background-color: rgb(13,13,20);
	background-image: url(../image/swepearl/BMS/swepearl-BMS-OfficeComplex-tuned.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position:center bottom;
}
.section.booking-home:after{
	position: absolute;
	z-index: 9;
	width: 0; 
	height: 0;
	background-color: transparent;
	bottom: 0px;
	left: 0%;
	border-top: 150px solid transparent;
	border-left: 80% solid transparent;
	border-right: 100vw solid rgb(255,255,255);
}

.section.booking-home .strip{
	width: 860;
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
}

.section.booking-home .strip .content{
	margin: 0 auto;
	text-align: center;
	width: 90%;
	max-width: 700px;
	font-size: 16px;
}


.section.booking-home .strip .slogan{
	color: white;
	margin: 0 auto;
}

.section.booking-home .strip .slogan .label{
	padding: 0px 15px;
	margin: 0 0 20px 5px;
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	background-color: rgba(0,0,0,0);
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border: 1px solid #fff;
	color: white;
}
	
.section.booking-home .strip .title{
	font-size: 60px;
	font-weight: 600;
	color: white;
	text-align: center;
	padding: 0px 0px 20px 0px;
	margin: 0 auto;
}
.section.booking-home .strip .text{
	font-size: 24px;
	font-weight: 400;
	color: white;
	margin: 0 auto;
}
.section.booking-home .strip .cta-container{
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
}


/********************************************************************************
	*****************************************************************************/
	

/* POS */

.section.pos{
	position: relative;
	padding: 30px 0 150px 0;
}
.section.pos:after{
	position: absolute;
	z-index: 9;
	width: 0; 
	height: 0;
	background-color: transparent;
	bottom: 0px;
	left: 0%;
	border-top: 150px solid transparent;
	border-left: 80% solid transparent;
	border-right: 100vw solid rgb(245,245,249);
}

.strip.pos .strip.musaic{
	overflow-x: visible;
}

.strip.pos .strip.musaic .title{
	font-size: 60px;
	font-weight: 600;
}

.strip.pos .strip.musaic .slogan{
	padding-top: 30px;
}
.strip.pos .strip.musaic .slogan .label{
	padding: 0 0 0 10px;
	margin: 0 0 20px 5px;
	height: 16px;
	line-height: 16px;
	font-size: 14px;
	background-color: rgba(0,0,0,0);
	border-radius: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-left: 2px solid rgba(40,40,40,1);
}
	
.strip.pos .graphic .image-slider .cta{
	width: 100%;
}
.strip.pos .graphic{
	padding-top: 40px;
}
.strip.pos .graphic .image-slider img{
	max-width: 110%;
}
.strip.pos .graphic .image-slider .image{
	max-width: 100%;
	padding-top: 6.5%;
	padding-left: 5%;
	padding-right: 10%;
}
.strip.pos .graphic .image-slider .frame{
	width: 110%;
	}

.strip.pos .strip.futures{
	display: none;
}
.strip.pos .strip.futures .inner{
	display: grid;
	grid-template-columns: repeat(6,1fr);
	grid-row-gap: 30px;
}
.strip.pos .strip.futures .on{
	display: none;
}


.strip.pos .strip.customers{
	padding: 50px 0 0 0;
	display: grid;
	grid-template-columns: 1fr;
	justify-content: space-between;
	grid-row-gap: 20px;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	position: relative;
}
.strip.pos .strip.customers .logocontainer{
	padding: 50px 0 0 0;
	display: grid;
	grid-template-columns: repeat(5,1fr);
	justify-content: space-between;
	grid-row-gap: 15px;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	position: relative;
}
.strip.pos .strip.customers .logocontainer div{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	align-items: center;
}
.strip.pos .strip.customers .logocontainer img{
	max-height: 90px;
	width: auto;
}

.strip.pos .strip.customers .container-label{
	position: absolute;
	z-index: 1;
	top:0px;
	left: 0px;
	text-align: left;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: normal;
	color: rgb(30,30,30);
	margin: 0 0 0 0;
	border-left: 2px solid rgb(30,30,30);
	padding-left: 15px;
}
.strip.pos .strip.customers img{
	max-width: 60%;
	height: auto;
	margin: 0 auto;
	}


/* POS > Selfservice */

.section.selfservice{
	background-color: rgb(245,245,249);
}
.section.selfservice .strip.musaic.revers{
	grid-template-columns: 20px 3fr 20px 4fr 80px;
}
.section.selfservice .strip.musaic .slogan{
	padding-top: 0px;
}
.section.selfservice .strip.musaic .graphic.selfservice{
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	text-align: right;
}
.section.selfservice .strip.musaic .graphic.selfservice img{
	width: auto;
	height: 90%;
	max-height: 700px;
	position: relative;
	left: 30px;
}


/* POS > mPOS */

.section.mpos{
	padding: 0px 0 100px 0px;
	background-color: rgb(245,245,249);
}
.strip.mpos .strip.musaic{
	grid-template-columns: 50px 1fr 30px 1fr 50px;
}


.strip.mpos .strip.musaic .graphic{
	display: grid;
	grid-template-columns: 1fr;
	justify-content: flex-start;
	text-align: center;
}
.strip.mpos .graphic .image-slider .cta{
	width: 20px;
	height: 100%;
	flex-direction: column;
	left: 10%;
}

.strip.mpos .strip.musaic .image-slider img{
	max-width: 60%;
}


.strip.mpos .graphic .image-slider .frame{
	z-index: 2;
	position: relative;
	}
.strip.mpos .graphic .image-slider .image{
	z-index: 1;
	max-width: 100%;
	padding-top: 0.8%;
	padding-left: 7%;
	padding-right: 15.4%;
}


/* POS > tableorder */

.section.tableorder{
	padding: 100px 0px;
	background-color: rgba(246, 228, 228, 1);
}

.strip.tableorder .strip.musaic .graphic{
	display: grid;
	grid-template-columns: 1fr;
	justify-content: flex-start;
	text-align: right;
}
.strip.tableorder .strip.musaic .graphic img{
	width: 120%;
	max-width: 120%;
	height: auto;
	position: relative;
	left:-20px;
}


/* e-commerce */

.section.ecommerce{
	display: grid;
	grid-template-columns: 1fr;
	justify-content: center;
	background-color: rgba(251, 249, 245, 1);
	padding: 150px 0px 80px 0px;
	}

.section.ecommerce .banner .title{
	margin: 0 auto;
	margin-top:40px;
	margin-bottom: 30px;
	font-size: 80px;
	}

.section.ecommerce .strip.onlineorder .graphic img{
	width: 110%;
}
.section.ecommerce .strip.weborder .graphic img{
	width: 110%;
}

/* display */

.section.display{
	padding: 80px 0px;
	background-color: rgba(230, 224, 229, 1);
}

.section.display .strip.musaic{
	overflow-x: visible;
}
.section.display .strip img{
	position: relative;
	left: -20px;
	width: 130%;
}

/* analytics */

.section.analytics{
	padding: 150px 0px;
	background-color: rgba(33, 33, 46, 1);
	overflow-x: visible;
}

.section.analytics .title{
	color: rgb(250,250,250);
	margin: 20px 0px;
	padding: 0 0 0 0;
	}

.section.analytics .text{
	color: rgba(203, 203, 213, 1);
	}

.section.analytics .strip.analytics{
	padding: 0 0 0 0;
	overflow-x: visible;
	}

.section.analytics .strip.analytics .strip.musaic{
	overflow-x: visible;
}
.section.analytics .strip .graphic img{
	position: absolute;
	z-index: 1;
	top: -70px;
	right: 5%;
	width: 200%;
}

.section.analytics .strip.futures{
	margin-top: 0px;
}
.section.analytics .strip.futures .container-label{
	color: rgba(51, 135, 237, 1);
	border-left: 2px solid rgba(51, 135, 237, 1);
	font-weight: 500;
}
.section.analytics .strip.futures .box icon{
	color: rgba(51, 135, 237, 1);
}
.section.analytics .strip.futures .box .title{
	color: rgba(51, 135, 237, 1);
}
.section.analytics .strip.futures .box .text{
	color: rgba(203, 203, 213, 1);
}

.section.analytics .strip.futures .inner{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-row-gap: 30px;
}
.section.analytics .strip.futures .cta.left.on,
.section.analytics .strip.futures .cta.right.on{
	display: none;
}

/*************************
	backoffice ***********/

.section.backoffice{
	padding: 150px 0px 100px 0px;
	background-color: rgba(247,247,249, 1);
}
.section.backoffice .banner .content .title{
	font-size: 80px;
	}

.section.backoffice .banner .intro-teaser-backoffice{
	display: block;
	width: 80%;
	max-width: 860px;
	margin: 0 auto;
	margin-top: 40px;
	margin-bottom: 40px;
}
.section.backoffice .banner .intro-teaser-backoffice-mobile{
	display: none;
}

/* backoffice sortiment */

.strip.sortiment{
	overflow: visible;
}

.strip.sortiment .strip.musaic{
	grid-template-columns: 50px 1fr 30px 1fr 50px;
	overflow-x: visible;
}
.strip.sortiment .strip.musaic .slogan{
	padding-top: 40px;
}
.strip.sortiment .graphic{
	display: flex;
	justify-content: center;
	align-items: center;
}
.strip.sortiment .graphic img{
	position: absolute;
	z-index: 1;
	width: 160%;
	left: 15%;
	top: -50px;
}

.strip.sortiment .strip.futures{
	margin-top: 30px;
	}
	
	
/* backoffice loyalty */

.strip.loyalty .strip.musaic{
	grid-template-columns: 50px 2fr 30px 3fr 50px;
	overflow: visible;
}

.strip.loyalty .strip.musaic .slogan{
	padding-top: 40px;
}
.strip.loyalty .graphic{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	overflow: visible;
}
.strip.loyalty .graphic img{
	position: absolute;
	z-index: 1;
	width: 200%;
	right: -5%;
	top: -14%;
}
.strip.loyalty .strip.futures{
	margin-top: 6%;
	}

/* backoffice economics */

.strip.economics .strip.musaic{
	grid-template-columns: 50px 1fr 30px 1fr 50px;
	overflow-x: visible;
}

	
.strip.economics .strip.musaic .slogan{
	padding-top: 40px;
}
.strip.economics .graphic{
	display: flex;
	justify-content: center;
	align-items: center;
}
.strip.economics .graphic img{
	position: absolute;
	z-index: 1;
	width: 160%;
	left: 15%;
	top: -50px;
}
.strip.economics .strip.futures{
	margin-top: 30px;
	}


.section.getstarted{
	padding: 100px 0px;
	background-color: rgba(33, 33, 42, 1);
}
.section.getstarted .title{
	font-size: 35px;
	color: rgb(250,250,250);
}



/* Start Contact */

.section.start{
	display: grid;
	grid-template-columns: 1fr;
	justify-content: center;
	background-color: rgba(250,250,252, 1);
	padding: 50px 0px 80px 0px;
	margin: 0 0 0 0;
	}

.section.start .strip.splitt.aa{
	display: grid;
	grid-template-columns: 0px 3fr 40px 2fr 0px;
	grid-template-areas: '. a . b .';
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}
.section.start .strip.splitt.aa .content.a{
	grid-area: a;
	display: flex;
	flex-direction: column;
	text-align: left;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	padding: 0 0 0 0;
}
.section.start .strip.splitt.aa .content.b{
	grid-area: b;
	display: flex;
	flex-direction: column;
	background-color: #efefef;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	text-align: left;
	margin-top: 80px;
}

.section.start .strip.splitt.aa .content{
	border: 0px;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}

.section.start .strip.splitt.aa .content p{
	width: 100%;
}

.section.start .strip.splitt.aa .content.b .title{
	font-size: 26px;
	padding: 0 0 0 0;
	letter-spacing: normal;
	text-align: left ;
	
}

.section.start .strip.splitt.aa .content.b .text{
	font-size: 14px;
	text-align: left;
}
	
.section.start .strip.future-list{
	display: grid;
	grid-template-columns: 1fr;
	grid-row-gap: 10px;
	justify-content: flex-start;
	align-content: flex-start;
	padding: 0px 0px;
	margin: 20px 0px;
	font-size: 14px;
}

.section.start .strip.future-list .container-label{
	margin-bottom: 10px;
	font-weight: 500;
	
}

.section.start .strip.future-list .container-label.price{
	color: #2a9c67;
	}
	
.section.start .strip.future-list  .info{
	font-size: 10px;
	padding: 10px 0 0 0;
	line-height: 16px;
	font-weight: 300;
	color: rgb(100,100,100);
}

.section.start .strip.future-list .box{
	display: grid;
	grid-template-columns: 25px 1fr;
	font-size: 10px;
}
.section.start .strip.future-list .box p{
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
}
.section.start .strip.future-list .box icon{
	font-size: 16px;
	line-height: 16px;
}

.section.start form{
	padding: 20px 0px;
	width: 100%;
}

.section.start form p{
	font-size: 14px;
	line-height: 40px;
	padding: 0px 15px;
}

.section.start form input{
	width: 90%;
	max-width: 500px;
	border: 0px;
	outline: none;
	outline-color: rgba(0,0,0,0);
	height: 30px;
	padding: 10px 15px;
	background-color: #efefef;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	font-size: 14px;
	color: #25503c;
	border: 1px solid #efefef;
	transition: ease-in 0.2s border;
}

.section.start form textarea{
	width: 90%;
	max-width: 500px;
	height: 150px;
	border: 0px;
	outline: none;
	outline-color: rgba(0,0,0,0);
	padding: 10px 15px;
	background-color: #efefef;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	font-size: 14px;
	color: #25503c;
	border: 1px solid #efefef;
	transition: ease-in 0.1s border;
}

.section.start form input.error,
.section.start form textarea.error{
	border: 1px solid rgba(181, 49, 84, 1);
	}

.section.start .cta-container.see-price{
	display: none;
}

.section.start .cta-container.contact-me button{
	text-align: left;
	word-break: break-word;
	max-width: 400px;
	line-height: 20px;
}



/******************************
	footer  				  */

.section.footer{
	width: 100%;
	display: grid;
	grid-template-columns: minmax(30px,auto) 1fr minmax(30px,auto);
	grid-template-areas: 
		'. inner .'
		'. footline .';
	background-color: rgba(27, 28, 37, 1);
	padding: 80px 0px;
	justify-content: flex-start;
}

.section.footer .footline{
	grid-area: footline;
	display: grid;
	grid-template-columns: 1fr;
	justify-content: flex-start;
	margin: 0 auto;
	width: 100%;
	max-width: 1100px;
	padding: 15px 0px 0px 0px;
}
.section.footer .footline p{
	text-decoration: none;
	font-size: 10px;
	color: rgba(79, 80, 86, 1);
	font-weight: 400;
}

.section.footer .inner{
	grid-area: inner;
	display: grid;
	grid-template-columns: 200px auto auto auto auto;
	grid-column-gap: 30px;
	margin: 0 auto;
	width: 100%;
	max-width: 1100px;
}

.section.footer .inner .links{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-content: flex-start;
	text-align: left;
	padding: 0 0 0 0;
	margin: 20px 0px;
}

.section.footer .inner h1{
	font-size: 18px;
	font-weight: 500;
	color: rgb(250,250,250);
}

.section.footer .inner h2{
	font-size: 14px;
	font-weight: 400;
	color: rgb(250,250,250);
	margin: 0 0 8px 0;
	padding: 0 0 0 0;
}

.section.footer .inner p{
	text-decoration: none;
	font-size: 14px;
	color: rgb(150,150,150);
	font-weight: 400;
	padding: 4px 0px;
}


.section.footer .inner a{
	text-decoration: none;
	font-size: 14px;
	color: rgb(180,180,180);
	font-weight: 400;
	padding: 4px 0px;
}
.section.footer .inner a:hover{
	color: rgb(255,255,255);
}
.section.footer .inner .sitemap{
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-content: flex-start;
	align-content: flex-start;
	text-align: left;
}



a{
	text-decoration: none;
}




.cta-btn{
	height: 40px;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	background: none;
	font-size: 16px;
	padding: 0px 20px;
	outline: none;
	appearance: visible;
	-webkit-appearance: none;
    -moz-appearance: none;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	font-weight: 400;
	border:0px;
	color: rgb(30,30,30);
	line-height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	align-conten: center;
	position: relative;
	min-width: 60px;
	width: auto !important;
}
.cta-container .wi,
.wi{
	padding-right: 30px;
}
.cta-btn span{
	display: block;
}
.cta-btn icon{
	position: absolute;
	right: 8px;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	font-size: 20px;
}

.cta-container{
	display: grid;
	grid-template-areas: 'act . price';
	justify-content: flex-start;
	padding: 30px 0px;
}

.banner .content .cta-container{
	justify-content: center;
}

.strip.splitt .content .cta-container{
	justify-content: center;
}

.cta-container button:nth-child(even){
	margin: 0px 10px;
}

.cta-container .act{
	grid-area: act;
}
.cta-container .price{
	grid-area: price;
	text-align: left;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	line-height: 1.4;
	position: relative;
}
.cta-container .price font:nth-child(even){
	margin-left: 15px;
}

.btnblue{
	color: white;
	background-color: rgba(75,76,255,1);
	border:1px solid rgba(75,76,255,1);
}
.btnblue:hover{
	color: rgba(75,76,255,1);
	background-color: rgba(13,13,13,0);
	border:1px solid rgba(75,76,255,1);
}

.btngreen{
	color: white;
	background-color: rgba(13, 145, 75, 1);
	border:1px solid rgba(13, 145, 75,1);
}

.btnblack{
	color: white;
	background-color: rgba(10,10,10,1);
	border:1px solid rgba(10,10,10,1);
}
.btnblack:hover{
	color: rgba(10,10,10,1);
	background-color: rgba(10,10,10,0);
	border:1px solid rgba(10,10,10,1);
}

.btnblack-negativ{
	border:1px solid rgba(30,30,30,1);
	color: rgba(30,30,30,1);
}
.btnblue-negativ{
	border:1px solid rgba(75,76,255,1);
	color: rgba(75,76,255,1);
}

.btninline-blue{
	border:1px solid rgba(75,76,255,0);
	color: rgba(75,76,255,1);
}
.btninline-blue:hover{
	border:1px solid rgba(75,76,255,1);
	background-color: none;
}

.btnwhite-negativ{
	border:1px solid rgba(75,76,255,0);
	color: white;
}

.btnlight{
	color: color: rgba(237, 237, 237, 1);
	border: 1px solid rgba(255,255,255,0);
	background-color: rgba(255,255,255,0);
}
.btnlight:hover{
	border:1px solid rgba(255,255,255,0.5);
	background-color: rgba(255,255,255,0);
}








.light{
	color: rgba(250,250,250, 1);
}
.delight{
	color: rgba(225,225,230, 1);
}
.bgc-light{
	background-color: rgba(245, 245, 249, 1);
}
.bgc-bright{
	background-color: rgba(255, 255, 255, 1);
}
.bgc-graydelight{
	background-color: rgb(245,245,245);
}
.bgc-creme{
	background-color: rgba(238, 229, 217, 1);
}
.bgc-nude{
	background-color: rgba(240, 222, 228, 1);
}

/* GRADIENT */

.posgradient{
	background: -webkit-linear-gradient(-10deg, rgba(244, 128, 155, 0.22) 15%, rgba(161, 169, 247, 0.25) 39%, rgba(113, 113, 250, 0.18) 70%, rgba(250, 125, 154, 0.25) 89%);
	background-size: 400% 400%;
	animation: angradient 20s ease infinite;
}

.gradient{
	background: -webkit-linear-gradient(-45deg, rgba(247,93,129,1) 18%, rgba(123,137,255,1) 39%, rgba(74, 74, 255, 1) 70%, rgba(247,93,129,1) 89%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.gradient.purplepink{
	background: -webkit-linear-gradient(-45deg, rgba(107, 13, 200, 1) 15%, rgba(249, 124, 154,1) 60%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.gradient.purply{
	background: -webkit-linear-gradient(-45deg, rgba(99, 18, 180, 1) 15%, rgba(238, 156, 228, 1) 60%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.gradient.delight{
	background: -webkit-linear-gradient(-40deg, rgba(255,255,255,1) 40%, rgba(200,200,200,1) );
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}
	
.gradient.pinki{
	background: -webkit-linear-gradient(-45deg, rgba(239, 100, 202, 1) 20%, rgba(241, 200, 200, 1) 60% );
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}

.gradient.mery{
	background: -webkit-linear-gradient(-45deg, rgba(238, 27, 108, 1) 30%, rgba(246, 82, 145, 1) 80% );
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}
		
.gradient.ocean{
	background: -webkit-linear-gradient(-10deg, rgba(33, 76, 170, 1) 10%, rgba(58, 144, 214, 1) 80%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}

.gradient.greenchi{
	background: -webkit-linear-gradient(-5deg, rgba(49, 252, 178, 1) 20%, rgba(52, 241, 185, 1) 30%, rgba(11, 241, 180, 1) 60%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}

.gradient.coolgray{
	background: -webkit-linear-gradient(-30deg, rgba(43, 43, 51, 1) 30%, rgba(109, 109, 114, 1) 60%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}


.gradient.backoffice{
	background: -webkit-linear-gradient(-30deg, rgba(33, 33, 41, 1) 40%, rgba(162, 162, 166, 1) 60%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}
	



.gradient.commerce{
	background:none;
	-webkit-background-clip:content;
	-webkit-text-fill-color:currentcolor;
	color: rgb(150,150,150);	  
	}

.gradient.onlineorder{
	background: -webkit-linear-gradient(-5deg, rgba(29, 217, 126, 1) 20%, rgba(29, 217, 126, 1) 60%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}
		
.gradient.weborder{
	background: -webkit-linear-gradient(-10deg, rgba(98, 202, 207, 1) 20%, rgba(98, 202, 207, 1) 60%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}

.gradient.display{
	background: -webkit-linear-gradient(-45deg, rgba(99, 18, 180, 1) 15%, rgba(161, 107, 213, 1) 60%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.gradient.analytics{
	background: -webkit-linear-gradient(-10deg, rgba(33, 76, 170, 1) 10%, rgba(60, 191, 252, 1) 80%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}

.gradient.analytics.questions{
	background: -webkit-linear-gradient(-75deg, rgba(33, 76, 170, 1) 10%, rgba(60, 191, 252, 1) 80%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}
	
.gradient.economics{
	background: -webkit-linear-gradient(20deg, rgba(47, 55, 108, 1) 30%, rgba(105, 113, 181, 1) 60%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}
	

.gradient.getstarted{
	background: -webkit-linear-gradient(-40deg, rgba(33, 33, 42,1) 40%, rgba(51, 51, 63, 1) );
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}
	
				
.bgc-animate{
	background-size: 200% 200%;
	animation: angradient 20s ease infinite;
}


.bgg-nudi{
	background: -webkit-linear-gradient(-40deg, rgba(248, 227, 232, 1) 10%, rgba(238, 200, 202, 1) );
}




@keyframes angradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}



.privacy_settings{
	height: 60px;
	width: 60px;
	border-radius: 60px;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	background: rgba(51, 26, 179, 1);
	font-size: 50px;
	padding: 0 0 0 0;
	outline: none;
	appearance: visible;
	-webkit-appearance: none;
    -moz-appearance: none;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	font-weight: 400;
	border:0px;
	color: rgb(255,255,255);
	line-height: 60px;
	text-align: center;
	position: fixed;
	z-index: 999;
	bottom: 30px;
	right: 30px;
}

.popup-privacy{
	width: 80%;
	max-width: 500px;
	height: 60%;
	max-height: 220px;
	position: fixed;
	z-index: 999999;
	bottom: 90px;
	right: 90px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	background-color: white;
	overflow: hidden;
	overflow-y: scroll;
	padding: 20px 20px 40px 20px;
	filter: drop-shadow(2px 1px 20px rgba(13,13,13,0.5));
	display: none;
}
.popup-privacy.on{
	display: block;
}

.popup-privacy .line{
	border: 0px;
	height: 1px;
	background-color: #ccc;
	margin: 20px 0px;
	display: block;
}
.popup-privacy .space{
	border: 0px;
	height: 1px;
	background-color: #fff;
	margin: 20px 0px;
	display: block;
}
.popup-privacy .inline-container{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}
.popup-privacy .inline-container button:nth-child(even){
	margin: 0px 10px;
}

.popup-privacy .title{
	font-size: 20px;
	color: rgb(13,13,13);
	font-weight: 500;
	letter-spacing: normal;
	margin: 10px 0px;
}
.popup-privacy .text{
	font-size: 12px;
	color: rgb(80,80,80);
	font-weight: 400;
	letter-spacing: normal;
}

.cookie-settings-container{
	display: grid;
	grid-template-columns: 1fr 40px;
	margin: 10px 0px;
	padding: 10px;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border:1px solid #ccc;
}
.cookie-settings-container .settings-cta{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	font-size: 20px;
	color: rgba(51, 26, 179, 1);
}
.cookie-settings-container .settings-cta:hover{
	cursor: pointer;
}
.cookie-settings-container .settings-cta.off{
	color: rgb(150,150,150);
	}