@media only screen and (min-width: 100px) and (max-width: 860px) {

/************************************************
	Header	
*************************************************/

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

.header a{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	color: var(--headerMenuColor);
	font-size: 20px;
	font-weight: 500;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	text-align: left;
	padding: 0 0 0 0;
	margin: 10px 0px;
	width: 100%;
}
.header a:nth-child(even){
	margin: 0 0 0 0;
}

.header a.iconic{
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.header .inner-container .menu{
	min-height: 1px;
	padding: 30px 20px;
	height: auto;
	text-align: left;
	display: none;
}
.header .inner-container .menu.on{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;	
	text-align: left;
	}

.header .inner-container .menu .menu-pc{
	display: none;
	}
.header .inner-container .menu.on .menu-mobile{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	display: block;
	}
	
.header .inner-container .menu.on .menu-page-container{
	position: relative;
	z-index: 1;
	left: 0%;
	top: 0px;
	background-color: transparent;
	border-radius: 8px;
	-webkit-border-radious: 8px;
	-moz-border-radious: 8px;
	box-shadow: none;
	min-width: 100%;
	width: 100%;
	transform: translateX(0) scale(1,1);
	transition: none;
	display: none;
	padding: 20px 0px;
}
.header .inner-container .menu.on .menu-page-container.on{
	display: block;
	visibility: visible;
	opacity: 1;
	animation:inherit;
}

.header .inner-container .menu.on .menu-page-container .menu-page-container ul li.link{
	padding-left: 0px;
	font-weight: 300;
	font-size: 14px;
	}
	

.header .cta .expand-menu{
	display: block;
}
.header .cta .express{
	display: none;
}
	
/************************************************
	TITLE & TEXT	
*************************************************/

.label{
	text-transform: uppercase;
	font-size: 10px;
	color: rgba(50,50,50,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;
	}
	
.title{
	font-size:  32px;
	font-weight: 500;
	line-height: 1.2;
	position: relative;
	padding: 0px 0px;
	margin: 0px 0px 10px 0px;
	letter-spacing: normal;
}

.subtitle{
	font-size:  20px;
	font-weight: 500;
	line-height: 1.4;
	position: relative;
}


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

.text{
	font-size:  14px;
	font-weight: 400;
	line-height: 1.6;
	position: relative;
	width: 100%;
	}
	

.banner .content .title{
	padding: 20px 0px;
	margin: 0 auto;
	font-size:  32px;
	font-weight: 600;
	line-height: 1.2;
	position: relative;
}
.banner .content .text{
	font-size:  16px;
	font-weight: 400;
	line-height: 1.4;
	max-width: 80vw;
	margin: 0 auto;
	position: relative;
	padding: 0px 0px;
}

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

.question-markup{
	color: rgba(50, 97, 197, 1);
	padding: 0px 10px;
	display: block;
}


/************************************************
	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{
	max-width: 96vw;
	}

.menu-combo{
	display: none;
	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: 30px;
	margin-bottom: 30px;
}

.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: 20px auto 20px;
	grid-template-areas: 
		'. slogan .'
		'. graphic .'
		'. content .';
	align-content: flex-start;
	justify-content: flex-start;
	width: 100vw;
	max-width: 100vw;
	overflow-x: hidden;
}

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

.strip.musaic .slogan{
	grid-area: slogan;
	position: relative;
	z-index: 2;
}

.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: 0 0 0 0;
	width: 100% !important;
}	
	
.strip.musaic .graphic{
	grid-area: graphic;
	position: relative;
	z-index: 1;
	padding: 20px 0px;
}

.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: 5%;
	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: 20px auto 20px;
	grid-row-gap: 20px;
	grid-template-areas: 
		'. a .'
		'. b .';
	justify-content: center;
	text-align: center;
}

.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: 20px;
}

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


.strip.splitt.aa .content{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: 
		'slogan'
		'graphic'
		'text'
		'cta';
	justify-content: center;
	text-align: center;
}

.strip.splitt.aa .content .title{
	grid-area: slogan;
	}
.strip.splitt.aa .content .image{
	grid-area: graphic;
	margin: 0 auto;
	margin-top: 10px;
	margin-bottom: 30px;
	}
.strip.splitt.aa .content .text{
	grid-area: text;
	}
.strip.splitt.aa .content .cta-container{
	grid-area: cta;
	}

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

.strip.futures{
	display: block;
	margin: 0 0 0 0;
	padding: 40px 0px 0px 0px;
	width: 100%;
	max-width: 100%;
	overflow:hidden;
	position: relative;
}

.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: 3px solid rgb(30,30,30);
	padding-left: 17px;
	}

.strip.futures .inner{
	display: inline-flex;
	flex-direction: row;
	justify-content: flex-start;
	padding: 0 0 0 20px;
	width: 100%;
	position: relative;
	overflow:hidden;
	overflow-x: scroll;
}

.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{
	min-width: 240px;
	width: 240px;
	max-width: 240px;
}
.strip.futures .inner .box:nth-child(even){
	padding: 0px 20px;
}
.strip.futures .inner .box:last-child{
	padding: 0px 100px 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;
}
.strip.futures .inner .box .text{
	font-size: 14px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	color: rgb(130,130,130);
}





.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: 20px 1fr 20px;
	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: 0px;
	padding: 40px 30px;
}


.section.start .strip.splitt.aa .content.a .title{
	margin: 0 0 0 0;
	}

.section.start .strip.splitt.aa .content.b .title{
	margin: 0 0 0 0;
	}	

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


/* BOOKING */

.section.booking-home .slogan .label{
	padding: 5px 20px;
	background-color: rgb(240,240,240);
	border-radius: 17px;
	-webkit-border-radius: 17px;
	border-radius: 17px;
	height: 20px;
	font-size: 10px !important;
	max-width: 90%;
	margin: 0 auto;
	text-align: center !important;
	}
	

/* POS */

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

.strip.pos .strip.musaic .slogan p{
	text-align: center;
}

.strip.pos .strip.musaic .slogan .label{
	display: flex;
	flex-direction: column;
	padding: 0 0 0 0;
	line-height: 1.5;
	height: auto;
	border-radius: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-left: 0px solid rgba(40,40,40,0);
	margin-bottom: 20px;
}
.strip.pos .strip.musaic .title{
	font-size: 32px;
	font-weight: 600;
}

.strip.pos .strip.musaic .slogan{
	padding-top: 30px;
}

.strip.pos .graphic .image-slider{
	position: relative;
	z-index: 1;
	left: 2%;
	width: 90%;
}
.strip.pos .graphic .image-slider .cta{
	width: 100%;
	bottom: 0px;
}

.strip.pos .strip.futures{
	display: block;
	margin-bottom: 60px;
}
.strip.pos .strip.futures .inner{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

.strip.pos .strip.customers{
	padding: 30px 0 0 0;
	display: grid;
	grid-template-columns: 1fr;
	grid-row-gap: 20px;
	justify-content: center;
	align-content: center;
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
} 

.strip.pos .strip.customers img{
	max-width: 60%;
	height: auto;
	margin: 0 auto;
	}

.strip.pos .strip.customers .logocontainer{
	padding: 50px 0 0 0;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	justify-content: space-between;
	grid-row-gap: 15px;
	width: 90%;
	max-width: 1000px;
	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: 60px;
	width: auto;
}


/* POS > Selfservice */

.section.selfservice .section.selfservice{
	padding: 40px 0 0 0;
	background-color: rgb(245,245,249);
}

.section.selfservice .section.selfservice .strip.musaic.revers{
	grid-template-columns: 20px auto 20px;
	grid-template-areas: 
		'. slogan .'
		'. graphic .'
		'. content .';
}

.section.selfservice .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{
	max-width: 90vw;
	height: auto;
	max-height: auto;
	position: relative;
	left: 10px;
	
}



/* POS > mPOS */

.section.mpos{
	padding: 0px 0px 100px 0px;
	background-color: rgb(245,245,249);
}
.section.mpos .strip.mpos{
	padding: 0 0 0 0;
}
.section.mpos .strip.mpos .strip.musaic{
	grid-template-columns: 20px auto 20px;
}
.section.mpos .strip.mpos .strip.musaic .graphic .image-slider{
	position: relative;
	left: 4%;
	}
.section.mpos .strip.mpos .graphic.mpos .image-slider .frame{
	z-index: 2;
	}
.section.mpos .strip.mpos .strip.musaic .graphic{
	display: grid;
	grid-template-columns: 1fr;
	justify-content: flex-start;
	text-align: center;
}
.section.mpos .strip.mpos .graphic .image-slider .cta{
	width: 20px;
	height: 100%;
	flex-direction: column;
	left: 5%;
}

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


.section.mpos .strip.mpos .graphic .image-slider .frame{
	z-index: 2;
	position: relative;
	}
.section.mpos .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: 0px 0px 0px 0px;
	background-color: rgba(246, 228, 228, 1);
}


.section.tableorder .strip.tableorder .strip.musaic .graphic{
	display: flex;
	justify-content: center;
	align-items: center;
}
.section.tableorder .strip.tableorder .strip.musaic .graphic img{
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	position: relative;
	left: 4%;
}


/* e-commerce */

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

.section.ecommerce .banner .title{
	font-size: 40px;
	padding: 0px 0px;
	}
.section.ecommerce .banner.ecommerce img{
	width: 100%;
	max-width: 92vw;
}


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

.strip.weborder{
	padding: 0px 0px 0px 0px;
}


/* display */

.section.display{
	padding: 0px 0px 60px 0px;
	background: -webkit-linear-gradient(-30deg, rgba(230, 224, 229, 1) 30%, rgba(255,255,255, 1) 60% );
	
}
.section.display:after{
	position: absolute;
	z-index: 9;
	width: 0; 
	height: 0;
	background-color: transparent;
	bottom: 0px;
	left: 0%;
	border-top: 120px solid transparent;
	border-left: 80% solid transparent;
	border-right: 100vw solid rgb(33, 33, 46);
}

.section.display .strip img{
	position: relative;
	left: 0px;
	width: 100%;
}


/* analytics */

.section.analytics{
	padding: 40px 0px 140px;
	background-color: rgba(33, 33, 46, 1);
	overflow-x: visible;
}
.section.analytics:after{
	position: absolute;
	z-index: 9;
	width: 0; 
	height: 0;
	background-color: transparent;
	bottom: 0px;
	left: 0%;
	border-top: 120px solid transparent;
	border-left: 80% solid transparent;
	border-right: 100vw solid rgb(245,245,249);
}

.section.analytics .title{
	color: rgb(250,250,250);
	margin: 20px 0px;
	padding: 0 0 0 0;
	max-width: 90vw;
	margin: 0 auto;
	margin-bottom: 20px;
	}
.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: relative;
	z-index: 1;
	top: 0px;
	left: -70%;
	width: 160%;
}

.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-top: 30px;
	padding-bottom: 30px;
	background-color: rgba(247,247,249, 1);
}

.section.backoffice .banner .content .title{
	font-size: 40px;
	padding: 0 0 0 0;
	}
.section.backoffice .banner .content img{
	margin-bottom: 30px;
	width: 90%;
	}

.section.backoffice .banner .intro-teaser-backoffice{
	display: none;
}
.section.backoffice .banner .intro-teaser-backoffice-mobile{
	display: block;
	width: 90%;
	margin: 0 auto;
	margin-top: 30px;
	margin-bottom: 30px;
}
		
.section.backoffice .strip.futures{
	padding-top: 40px;
}

/* backoffice sortiment */
.strip.sortiment{
	padding: 50px 0 0 0;
}
.strip.sortiment .strip.musaic{
	grid-template-columns: 20px auto 20px;
}
.strip.sortiment .content{
	top:-20%;
}
.strip.sortiment .strip.futures{
	position: relative;
	z-index: 2;
	top:-40px;
}
.strip.sortiment .graphic img{
	position: relative;
	z-index: 1;
	width: 110%;
	left: 30%;
	top: 0px;
	margin-bottom: 20px;
}


/* backoffice loyalty */

.strip.loyalty{
	padding: 0px 0 0 0;
}
.strip.loyalty .strip.musaic{
	grid-template-columns: 20px auto 20px;
}

.strip.loyalty .graphic{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.strip.loyalty .graphic img{
	position: relative;
	z-index: 1;
	width: 110%;
	right: 20%;
	top: 0px;
	margin-bottom: 20px;
}
.strip.loyalty .content{
	top:-20%;
}
.strip.loyalty .strip.futures{
	position: relative;
	z-index: 2;
	top:-40px;
}

/* backoffice economics */

.strip.economics{
	padding: 0 0 0 0;
}
.strip.economics .strip.musaic{
	grid-template-columns: 20px auto 20px;
}

.strip.economics .graphic img{
	position: relative;
	z-index: 1;
	width: 110%;
	left: 30%;
	top: 0px;
	margin-bottom: 20px;
}
.strip.economics .content{
	top:-20%;
}
.strip.economics .strip.futures{
	position: relative;
	z-index: 2;
	top:-40px;
}


.section.getstarted{
	padding: 50px 0px;
	background: -webkit-linear-gradient(-10deg, rgba(244, 128, 155, 0.52) 15%, rgba(161, 169, 247, 0.45) 39%, rgba(113, 113, 250, 0.58) 70%, rgba(250, 125, 154, 0.55) 89%);
	background-size: 300% 300%;
	animation: angradient 20s ease infinite;
}
.section.getstarted .title{
	font-size: 32px;
	color: rgb(255,255,250);
	max-width: 80vw;
	margin: 0 auto;
}
.section.start .cta-container.see-price{
	display: block;
}



.cta-container .price{
	grid-area: price;
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	line-height: 1.4;
}

.cta-container .price font:nth-child(even){
	margin: 0 0 0 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(30,30,35, 1);
	padding: 80px 0px;
	justify-content: flex-start;
}
.section.footer .footline{
	padding-top: 30px;
	}
.section.footer .inner{
	grid-area: inner;
	display: grid;
	grid-template-columns: 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 20px;
	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(220,220,220);
}

.section.footer .inner h2{
	font-size: 14px;
	font-weight: 400;
	color: rgb(200,200,200);
	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(150,150,150);
	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;
	grid-column-gap: 20px;
	justify-content: flex-start;
	align-content: flex-start;
	text-align: left;
}


.posgradient{
	background: -webkit-linear-gradient(-15deg, rgba(244, 128, 155, 0.30) 15%, rgba(161, 169, 247, 0.27) 29%, rgba(113, 113, 250, 0.28) 50%, rgba(250, 125, 154, 0.20) 89%);
	background-size: 200% 180%;
	animation: angradient 18s ease infinite;
}

.popup-privacy{
	width: 80%;
	max-width: 500px;
	height: 60%;
	max-height: 220px;
	position: fixed;
	z-index: 999999;
	bottom: 98px;
	left: 50%;
	transform: translateX(-50%);
	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 .inline-container{
	display: grid;
	grid-template-columns: 3fr 2fr;
}


} /* end media */ 



@media only screen and (min-width: 414px) and (max-width: 460px) {

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

/* POS */

.strip.pos .strip.musaic .slogan p{
	text-align: center;
}

.strip.pos .strip.musaic .slogan .label{
	display: flex;
	flex-direction: column;
	padding: 0 0 0 0;
	line-height: 1.5;
	height: auto;
	border-radius: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-left: 0px solid rgba(40,40,40,0);
	margin-bottom: 20px;
	font-size: 14px;
}
.strip.pos .strip.musaic .title{
	font-size: 42px;
	font-weight: 600;
}
	
	
}

@media only screen and (min-width: 1px) and (max-width: 320px) {

.title{
	font-size:  28px;
	font-weight: 600;
	line-height: 1.2;
	position: relative;
	padding: 0px 0px;
	margin: 0px 0px 10px 0px;
}

.subtitle{
	font-size:  20px;
	font-weight: 500;
	line-height: 1.4;
	position: relative;
}


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

.text{
	font-size:  14px;
	font-weight: 400;
	line-height: 1.6;
	position: relative;
	width: 100%;
	}
	
.cta-container .price{
	grid-area: price;
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	line-height: 1.4;
}
.cta-container .price font,
.cta-container .price font:nth-child(even){
	margin: 0 0 0 0;
	font-size: 11px;
}



	
}

@media only screen and (min-width: 460px) and (max-width: 850px) {

.title{
	font-size:  40px;
	font-weight: 600;
	line-height: 1.2;
	position: relative;
	padding: 0px 0px;
	margin: 0px 0px 10px 0px;
	max-width: 80%;
}

.subtitle{
	font-size:  20px;
	font-weight: 500;
	line-height: 1.4;
	position: relative;
}


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

.text{
	font-size:  16px;
	font-weight: 400;
	line-height: 1.6;
	position: relative;
	width: 90%;
	}

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

.cta-container .price font:nth-child(even){
	margin: 0 0 0 20px;	
}

.strip.musaic{
	margin: 0 0 0 0;
	padding:  0 0 0 0;
	display: grid;
	grid-template-columns: 40px auto 40px;
	grid-template-areas: 
		'. slogan .'
		'. graphic .'
		'. content .';
	align-content: flex-start;
	justify-content: flex-start;
	width: 100vw;
	max-width: 100vw;
	overflow-x: hidden;
}

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



/* pos */

.section.pos .strip.musaic .title{
	max-width: 70%;
	font-size: 56px;
	margin: 0 auto;
}
.section.pos .strip.musaic .graphic .image-slider{
	max-width: 70%;
	margin: 0 auto;
	left: -2%;
}

/* selfservice */


.section.selfservice .strip.musaic .graphic img{
	width: 80%;
	height: auto;
	max-height: auto;
	position: relative;
	left: 0px;
	}

	
}