@import 'https://neon.epson-europe.com/files/repo/2019/Shared/page/page.css';
/* @import '../../shared-assets/page/page.css'; */

#Translations { visibility: hidden; height: 100vh; }

/* Hero */
#hero {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 800px;
	background: url(../img/hero_mobile.jpg) no-repeat;
	color: white;
}
#hero h1 {
	color: inherit;
}
#hero a.video {
	background: #f6891f;
}
#hero .buttons {
  margin-top: -10px;
}
#hero .buttons a {
  margin-top: 10px;
	margin-right: 10px;
}
[dir=rtl] #hero .buttons a {
	margin-left: 10px;
  margin-right: 0;
}
@media (max-width: 480px) {
    #hero h1 {
        font-size: 30px;
    }
}
@media (min-width: 481px) {
	#hero {
		background-image: url(../img/hero_smalltablet.jpg);
	}
}
@media (min-width: 600px) {
	#hero {
		background-image: url(../img/hero_tablet.jpg);
	}
}
@media (min-width: 768px) {
	#hero {
		height: 500px;
		justify-content: center;
		background-image: url(../img/hero_smalldesktop.jpg);
	}
	#hero > h1 {
		max-width: 500px;
	}
	#hero > p {
		max-width: 230px;
	}
}
@media (min-width: 960px) {
	#hero {
		background-image: url(../img/hero.jpg);
	}
}

/* Hero video */
#hero video {
	display: none;
}
@media (min-width: 768px) {
	#hero {
		overflow: hidden;
		position: relative;
		background: none;
	}
	#hero video {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		z-index: -1;
		display: block;
	}
}

/* Anchorbar */
#anchorbar [href="#intro"] { background-image: url(../img/anchor_eyeball.png) }
#anchorbar [href="#process"] { background-image: url(../img/anchor_inkdrop.png) }
#anchorbar [href="#benefits"] { background-image: url(../img/anchor_star.png) }
#anchorbar [href="#range"] { background-image: url(../img/anchor_magnifying_glass.png) }

@media (min-width:768px) and (max-width:959px) {
    #anchorbar [href="#range"] {
        width: 155px;
    }
    #anchorbar h2 {
        max-width: 170px;
    }
}

/* Intro */
#intro video {
	width: 100%;
	height: auto;
}
.ie11 #intro video {
	max-height: 540px;
}
#intro > header {
	margin-bottom: 30px;
}
@media (min-width: 768px) {
	#intro {
		padding-top: 60px;
	}
	#intro > header {
		display: flex;
		margin-bottom: 70px;
	}
	#intro h2 {
		width: 400px;
		flex-shrink: 0;
	}
}

/* Process */
#process {
	position: relative;
	padding-top: 30px;
	padding-bottom: calc(205vw + 50px);
	background: #f7f6f5;
}
#process::before {
	position: absolute;
	left: 0;
	bottom: 30px;
	height: 205vw;
	width: 100%;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: calc(100vw - 20px);
	content: '';
}
[lang=en] #process::before { background-image: url(../img/img_printing-process_en_mobile.png); }
[lang=ar] #process::before { background-image: url(../img/img_printing-process_mobile_ar.png); }
[lang=de] #process::before { background-image: url(../img/img_printing-process_mobile_de.png); }
[lang=bg] #process::before { background-image: url(../img/img_printing-process_mobile_bg.png); }
[lang=cs] #process::before { background-image: url(../img/img_printing-process_mobile_cs.png); }
[lang=da] #process::before { background-image: url(../img/img_printing-process_mobile_da.png); }
[lang=el] #process::before { background-image: url(../img/img_printing-process_mobile_el.png); }
[lang=es] #process::before { background-image: url(../img/img_printing-process_mobile_es.png); }
[lang=hr] #process::before { background-image: url(../img/img_printing-process_mobile_hr.png); }
[lang=hu] #process::before { background-image: url(../img/img_printing-process_mobile_hu.png); }
[lang=il] #process::before { background-image: url(../img/img_printing-process_mobile_il.png); }
[lang=it] #process::before { background-image: url(../img/img_printing-process_mobile_it.png); }
[lang=nl] #process::before { background-image: url(../img/img_printing-process_mobile_nl.png); }
[lang=no] #process::before { background-image: url(../img/img_printing-process_mobile_no.png); }
[lang=pl] #process::before { background-image: url(../img/img_printing-process_mobile_pl.png); }
[lang=pt] #process::before { background-image: url(../img/img_printing-process_mobile_pt.png); }
[lang=ro] #process::before { background-image: url(../img/img_printing-process_mobile_ro.png); }
[lang=sk] #process::before { background-image: url(../img/img_printing-process_mobile_sk.png); }
[lang=sl] #process::before { background-image: url(../img/img_printing-process_mobile_sl.png); }
[lang=sr] #process::before { background-image: url(../img/img_printing-process_mobile_sr.png); }
[lang=sv] #process::before { background-image: url(../img/img_printing-process_mobile_sv.png); }
[lang=tr] #process::before { background-image: url(../img/img_printing-process_mobile_tr.png); }
[lang=he] #process::before { background-image: url(../img/img_printing-process_mobile_he.png); }
[lang=fi] #process::before { background-image: url(../img/img_printing-process_mobile_fi.png); }
[lang=fr] #process::before { background-image: url(../img/img_printing-process_mobile_fr.png); }

#process > * {
	margin-bottom: 10px;
}
#process header {
	line-height: 1.4;
}
#process h2 {
	margin: 20px 0 13px;
}
#process h3 {
	margin: 26px 0 12px;
	font-size: 20px;
	font-weight: normal;
}
#process section {
	font-size: 14px;
	line-height: 23px;
}
@media (min-width: 768px) {
	#process {
		columns: 2;
		column-fill: balance;
		column-gap: 50px;
		padding-bottom: calc(69vw + 50px);
	}
	#process::before {
		height: 69vw;
	}

	[lang=en] #process::before { background-image: url(../img/img_printing-process_en.png); }
	[lang=ar] #process::before { background-image: url(../img/img_printing-process_ar.png); }
	[lang=de] #process::before { background-image: url(../img/img_printing-process_de.png); }
	[lang=bg] #process::before { background-image: url(../img/img_printing-process_bg.png); }
	[lang=cs] #process::before { background-image: url(../img/img_printing-process_cs.png); }
	[lang=da] #process::before { background-image: url(../img/img_printing-process_da.png); }
	[lang=el] #process::before { background-image: url(../img/img_printing-process_el.png); }
	[lang=es] #process::before { background-image: url(../img/img_printing-process_es.png); }
	[lang=hr] #process::before { background-image: url(../img/img_printing-process_hr.png); }
	[lang=hu] #process::before { background-image: url(../img/img_printing-process_hu.png); }
	[lang=il] #process::before { background-image: url(../img/img_printing-process_il.png); }
	[lang=it] #process::before { background-image: url(../img/img_printing-process_it.png); }
	[lang=nl] #process::before { background-image: url(../img/img_printing-process_nl.png); }
	[lang=no] #process::before { background-image: url(../img/img_printing-process_no.png); }
	[lang=pl] #process::before { background-image: url(../img/img_printing-process_pl.png); }
	[lang=pt] #process::before { background-image: url(../img/img_printing-process_pt.png); }
	[lang=ro] #process::before { background-image: url(../img/img_printing-process_ro.png); }
	[lang=sk] #process::before { background-image: url(../img/img_printing-process_sk.png); }
	[lang=sl] #process::before { background-image: url(../img/img_printing-process_sl.png); }
	[lang=sr] #process::before { background-image: url(../img/img_printing-process_sr.png); }
	[lang=sv] #process::before { background-image: url(../img/img_printing-process_sv.png); }
	[lang=tr] #process::before { background-image: url(../img/img_printing-process_tr.png); }
	[lang=he] #process::before { background-image: url(../img/img_printing-process_he.png); }
	[lang=fi] #process::before { background-image: url(../img/img_printing-process_fi.png); }
	[lang=fr] #process::before { background-image: url(../img/img_printing-process_fr.png); }

	#process header,
	#process section {
		display: inline-block;
	}
}
@media (min-width: 1010px) {
	#process {
		padding-bottom: 815px;
	}
	.ie11 #process {
		padding-bottom: 730px;
	}
	#process::before {
		bottom: 70px;
		height: 696px;
		background-size: auto;
	}
}

/* Benefits */
#benefits {
	font-size: 14px;
	line-height: 24px;
}
#benefits h2 {
	margin-bottom: 0px;
}
#benefits h3 {
	display: flex;
	align-items: flex-end;
	min-height: 60px;
	margin-bottom: 10px;
	padding-left: 65px;
	font-size: 20px;
	font-weight: normal;
	line-height: 25px;
	background-repeat: no-repeat;
	background-position: left top;
}
[dir=rtl] #benefits h3 {
	background-position: right top;
	padding-right: 65px;
	padding-left: 0;
}
#benefits section {
	padding-bottom: 30px;
	border-top: 1px solid #c3c2c1;
}
#benefits section:first-of-type {
	border: none;
}
#benefits section::before {
	display: block;
	margin-bottom: 20px;
	padding-top: 68%;
	background-repeat: no-repeat;
	background-position: center 35px;
	background-size: contain;
	cursor: pointer;
	content: '';
}
@media (min-width: 768px) {
	#benefits h2 {
		margin-bottom: 20px;
	}
	#benefits section {
		position: relative;
		min-height: 313px;
		padding-top: 25px;
	}
	#benefits section::before {
		position: absolute;
		width: calc(50% - 30px);
		height: 100%;
		top: 0;
		padding: 0;
	}
	#benefits section:nth-of-type(odd) {
		padding-right: calc(50% + 30px)
	}
	#benefits section:nth-of-type(odd)::before {
		right: 0;
	}
	#benefits section:nth-of-type(even) {
		padding-left: calc(50% + 30px)
	}
	#benefits section:nth-of-type(even)::before {
		left: 0;
	}
}
#benefits .time::before {
	background-image: url(../img/img_save-time.jpg);
}
#benefits .time h3 {
	background-image: url(../img/icon_save-time.png);
}
#benefits .power::before {
	background-image: url(../img/img_use-less-power.jpg);
}
#benefits .power h3 {
	background-image: url(../img/icon_use-less-power.png);
}
#benefits .environment::before {
	background-image: url(../img/img_fewerreplacement.jpg);
}
#benefits .environment h3 {
	background-image: url(../img/icon_fewer-replacement.png);
}
#benefits .productivity::before {
	background-image: url(../img/img_less-intervention.jpg);
}
#benefits .productivity h3 {
	background-image: url(../img/icon_less-intervention.png);
}

/* Range teaser */
#range {
	padding-top: calc(60% + 30px);
	background: url(../img/teaser_discover-health-benefits_mobile.jpg) no-repeat center top/contain;
}
#range p {
	margin: -5px 0 30px;
}

#range a {
	background: #f6891f;
}
@media (min-width: 768px) {
	#range {
        position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 463px;
		padding-top: 0;
		padding-bottom: 0;
        background: none;
	}
    #range::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background: url(../img/teaser_discover-health-benefits.jpg) no-repeat center top;
    }
    [dir=rtl] #range::before {
        transform: scale(-1,1);
    }
	#range h2 {
		width: 290px;
	}
	#range p {
		width: 250px;
	}
}

/* */
.popupimage {
	display: none;
}
.PagePopup .popupimage {
	display: block;
}