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


/* Hero */
.page > header {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 720px;
	background: url(../img/hero_mobile.jpg) no-repeat center top;
	color: white;
}
[dir=rtl] .page > header {
	background-image: url(../img/hero_mobile_rtl.jpg);
}
.page > header h1 {
	color: inherit;
	line-height: 38px;
}
[lang=pl] .page > header h1  {
	font-size: 32px;
}
.page > header > p {
	margin-bottom: 30px;
}
.page > header > a {
	background: #f68f39;
}
@media (min-width:481px) {
	.page > header {
		background-image: url(../img/hero_smalltablet.jpg);
	}
	[dir=rtl] .page > header {
		background-image: url(../img/hero_smalltablet_rtl.jpg);
	}
}
@media (min-width:600px) {
	.page > header {
		background-image: url(../img/hero_tablet.jpg);
	}
	[dir=rtl] .page > header {
		background-image: url(../img/hero_tablet_rtl.jpg);
	}
}
@media (min-width:768px) {
	.page > header {
		background-image: url(../img/hero_smalldesktop.jpg);
	}
	[dir=rtl] .page > header {
		background-image: url(../img/hero_smalldesktop_rtl.jpg);
	}
}
@media (min-width:960px) {
	.page > header {
		height: 500px;
		padding-bottom: 68px;
		background-image: url(../img/hero.jpg);
	}
	[dir=rtl] .page > header {
		background-image: url(../img/hero_rtl.jpg);
	}
	.page > header h1 {
		max-width: 490px;
	}
	.page > header > p {
		max-width: 430px;
	}
}


/* Anchorbar */
.page > nav h2 {
	max-width: 160px;
	padding-right: 20px;
}
.page > nav [href="#overview"] { background-image: url(../img/anchor_eyeball.png) }
.page > nav [href="#features"] { background-image: url(../img/anchor_cog.png) }
.page > nav [href="#download"] { background-image: url(../img/anchor_lifesaver.png) }
.page > nav [href="#compat"] { background-image: url(../img/anchor_scanner.png) }
.page > nav [href="#devkit"] { background-image: url(../img/anchor_code.png) }

@media (min-width: 768px) {
	[lang=hr] .page > nav [href="#devkit"] {
		min-width: 130px;
	}	
}
/* Intro */
#intro {
	padding-top: 56px;
	padding-bottom: 60px;
}
#intro h2 {
	font-size: 36px;
	line-height: 42px;
}
#intro h2 div {
	margin-top: 35px;
}
#intro h2 div img {
	margin-right: 5px;
}
[dir=rtl] #intro h2 div img {
	margin-right: 0;
	margin-left: 5px;
}
#intro > a {
	background: #f68f39;
}
@media (min-width:768px) {
	#intro {
		columns: 2;
	}
	#intro h2 {
		margin-bottom: 0;
	}
	#intro p {
		break-inside: avoid;
	}
}

/* Overview */
#overview {
	overflow: hidden;
	position: relative;
	padding-top: 54px;
	padding-bottom: 0;
}
#overview::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
	background: #efefef;
}
#overview h2 {
	margin-bottom: 33px;
}
/* Overview nav */
#overview > nav {
	margin-bottom: 45px;
}
#overview > nav ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	justify-content: space-between;
	padding: 0;
}
#overview > nav li {
	width: 100%;
	margin-bottom: 10px;
	font-size: 13px;
}
@media (min-width:481px) {
	#overview > nav li {
		width: calc(50% - 10px);
	}
}
@media (min-width:960px) {
	#overview > nav li {
		width: calc(25% - 16px);
	}
}
#overview > nav a {
	display: block;
	width: 100%;
	padding: 0;
	background: none;
	color: #575756;
	border-width: 0 0 4px 0;
	border-bottom: solid #575756;
	text-align: left;
}
#overview > nav a.active,
#overview > nav a:hover {
	color: #10218b;
	border-color: #10218b;
	opacity: 1;
	text-decoration: none;
}
[dir=rtl] #overview > nav a {
	text-align: right;
}
#overview > div:not(.active) {
	display: none;
}
/* Overview custom list */
#overview > div ul {
	list-style: none;
	padding: 0;
}
#overview > div li {
	position: relative;
	padding-left: 15px;
}
[dir=rtl] #overview > div li {
	padding-left: 0;
	padding-right: 15px;
}
#overview > div ul li::before {
	content: '\25AA';
	position: absolute;
	top: 1px;
	left: 0;
	font-size: 13px;
	color: #10218b;
}
[dir=rtl] #overview > div ul li::before {
	left: auto;
	right: 0;
}
/* Overview subsections */
#overview > div:not(#separate) > section {
	margin-bottom: 48px;
}
#overview > div:not(#separate) > section img {
	max-width: 100%;
}
@media (max-width:767px) {
	#overview > div:not(#separate) > section {
		display: flex;
		flex-direction: column;
	}
	#overview > div:not(#separate) > section h3:nth-of-type(1) {
		order: -2;
	}
	#overview > div:not(#separate) > section img {
		order: -1;
		margin-bottom: 20px;
	}
}
@media (min-width:768px) {
	#overview > div:not(#separate) > section {
		columns: 2;
		margin-bottom: 48px;
	}
	#overview > div > section > * {
		break-inside: avoid;
	}
}
/* Overview content */
#capture ul + p {
	color: #10218b;
	font-weight: bold;
}
#sortandsep {
	padding-bottom: 20px;
}
#sortandsep h3,
#sortandsep h4 {
	font-size: 16px;
	font-weight: bold;
	color: #000963;
}
#sortandsep h3 {
	margin-bottom: 24px;
}
#sortandsep h4 {
	margin-bottom: 11px;
}
#sortandsep section {
	margin-bottom: 33px;
	padding-top: 66px;
	text-align: center;
	background-repeat: no-repeat;
	background-position: center top;
}
#sortandsep section:nth-of-type(1) { background-image: url(../img/icon_01.png) }
#sortandsep section:nth-of-type(2) { background-image: url(../img/icon_02.png) }
#sortandsep section:nth-of-type(3) { background-image: url(../img/icon_03.png) }
#sortandsep section:nth-of-type(4) { background-image: url(../img/icon_04.png) }
#sortandsep section:nth-of-type(5) { background-image: url(../img/icon_05.png) }

@media (min-width: 600px) {
	#sortandsep {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#sortandsep h3 {
		width: 100%;
	}
	#sortandsep > section {
		width: calc(50% - 20px);
	}
}
@media (min-width: 960px) {
	#sortandsep > section,
	#sortandsep::after {
		width: calc(33% - 14px);
	}
	#sortandsep::after {
		content: '';
	}
	.ie11 #sortandsep::after {
		display: block;
	}
}
#opticalrec {
	position: relative;
	padding: 55px 0;
	background-image: url(../img/ocr.png);
	background-repeat: no-repeat;

}
@media (max-width: 767px) {
	#opticalrec {
		padding-top: 320px;
		background-position: center top 50px;
	}
}
@media (min-width: 767px) {
	#opticalrec {
		background-position: right top 50px;
	}
	[dir=rtl] #opticalrec {
		background-position: left top 50px;
	}
	#opticalrec > *:not(section) {
		width: calc(100% - 370px);
	}
}
#opticalrec::before {
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 100vw;
	height: 100%;
	background: #dcdcdc;
	content: '';
}
#opticalrec h4 {
	margin: 33px 0 10px;
	color: #10218b;
}

/* Features */
#features {
	padding-bottom: 60px;
}
#features .scroller {
	overflow-x: auto;
}
#features table {
	table-layout: fixed;
	border-collapse: collapse;
	min-width: 768px;
}
#features thead th {
	width: 150px;
}
#features thead th:nth-of-type(1) {
	width: 340px;
}
#features tbody tr:first-child:not(.active) ~ tr {
	display: none;
}
#features th,
#features td {
	padding: 9px 11px;
}
#features tbody tr:first-child th {
	position: relative;
	padding-top: 8px;
	padding-bottom: 8px;
	font-weight: bold;
}
#features tbody tr:first-child th::after {
	position: absolute;
	right: 9px;
	top: -5px;
	content: '+';
	font-weight: normal;
	font-size: 30px;
}
[dir=rtl] #features tbody tr:first-child th::after {
	right: auto;
	left: 9px;
}
#features tbody tr.active th::after {
	content: '−';
}
#features thead th {
	padding-top: 5px;
	padding-bottom: 12px;
}
body:not([dir=rtl]) #features th:not(:first-child),
body:not([dir=rtl]) #features td:not(:first-child) {
	border-left: 1px solid white;
}
[dir=rtl] #features th:not(:first-child),
[dir=rtl] #features td:not(:first-child) {
	border-right: 1px solid white;
}
#features th {
	font-weight: normal;
	text-align: left;
}
[dir=rtl] #features th {
	text-align: right;
}
#features thead th {
	vertical-align: top;
}
#features thead tr,
#features tbody tr:nth-of-type(odd) {
	background: #efefef;
}
#features tbody > tr:first-child th {
	border-top: 2px solid white;
	background: #848484;
	color: white;
	cursor: pointer;
	background-clip: padding-box;
}
#features tbody tr:not(:first-child) td {
	text-align: center;
	color: #10218b;
}
#features td.check {
	background: url(../img/checkout_blue.png) no-repeat center;
}

/* Download */
#download {
	background: #333;
	color: white;
}
#download h2 {
	color: inherit;
	font-weight: 400;
	line-height: 42px;
}
#download > img {
	margin-bottom: -20px;
}
#download > a {
	background: #f68f39;
}
@media (min-width: 600px){
	#download {
		columns: 2;
		column-gap: 70px;
		padding-top: 70px;
		padding-bottom: 70px;
	}
	#download > img {
		margin-bottom: 0;
	}
}
@media (min-width: 768px){
	#download {
		padding-bottom: 0;
	}
}

/* Download form popup */
#downloadForm,
#downloadForm::before {
	display: none;
}
#downloadForm {
	max-width: 770px;
}
.PagePopup #downloadForm {
	display: block;
}
@media (min-width: 600px) {
    #downloadForm fieldset[name=main] select,
    #downloadForm fieldset[name=main] input {
        width: calc(50% - 20px) !important; /* !important cms */
    }
	.msedge #downloadForm fieldset[name=main] select,
	.msedge #downloadForm fieldset[name=main] input {
        width: calc(49% - 20px) !important;
    }
}
#downloadForm [name=Title] {
	order: -1;
}
@media(max-width: 480px) {
	#downloadForm input[name=Email]::placeholder {
		font-size: 11px;
	}
}
@media(min-width: 481px) {
	#downloadForm input[name=Email]::placeholder {
		font-size: 9px;
	}
}
@media(min-width: 600px) {
	#downloadForm input[name=Email]::placeholder {
		font-size: 12px;
	}
}
@media(min-width: 768px) {
	#downloadForm input[name=Email]::placeholder {
		font-size: 13px;
	}
}
/* Download links popup */
#downloadLinks {
	display: none;
    max-width: 790px;
    padding-bottom: 24px;
    flex-wrap: wrap;
    justify-content: space-between;
}
.PagePopup #downloadLinks {
	display: flex;
}
.ie11 #downloadLinks {
	width: 100vw;
}
#downloadLinks h2,
#downloadLinks h2 + p {
    flex-basis: 100%;
}
#downloadLinks > section {
    width: 100%;
    margin-bottom: 20px;
    padding: 15px;
	border: 1px solid #E5E5E5;
}
#downloadLinks h3 {
    margin-bottom: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}
#downloadLinks dl {
    margin-top: 12px;
}
#downloadLinks dt {
    margin-top: 0px;
    /* padding-top: 75px; */
    font-size: 14px;
    background-repeat: no-repeat;
}
[dir=rtl] #downloadLinks dt {
	background-position: right top;
}
#downloadLinks dd + dt {
    margin-top: 25px;
}
#downloadLinks dd {
    margin: 15px 0 0;
}
#downloadLinks dd a {
	background: #f68f39;
}
#pcContainer dt:first-of-type,
#docCapturePro_PC {
    padding-top: 75px;

	background-image: url(https://i8.amplience.net/i/epsonemear/document-capture-pro_1121_dcp_logo);
}
#proServerContainer dt:first-of-type,
#docCaptureProServer_PC {
    padding-top: 75px;

	background-image: url(https://i8.amplience.net/i/epsonemear/document-capture-pro_1121_dcps_logo);
}
#macContainer dt:first-of-type,
#docCapture_OSX_10_5__10_8 {
    padding-top: 75px;

    background-image: url(https://i8.amplience.net/i/epsonemear/document-capture-pro_1121_dc_logo);
}
dt#docCapture_OSX_10_9 {
	padding-top: 0;
}
@media (min-width: 768px) {
	#downloadLinks {
		margin: 0 -10px;
	}
    #downloadLinks > section {
		flex: 1;
    }
	#downloadLinks > * {
		margin-left: 10px;
		margin-right: 10px;
	}
}

/* Compatible products */
#compat {
	text-align: center;
	background: #e6e6e6;
}
#compat h2 {
	margin-bottom: 70px;
}
#compat section {
	margin-bottom: 20px;
	padding-bottom: 60px;
	background: white;
}
#compat section::before {
	content: '';
	display: block;
	height: 300px;
	margin-bottom: 35px;
	background-repeat: no-repeat;
	background-position: center bottom;
}
@media (min-width: 481px) {
	#compat {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	#compat h2 {
		width: 100%;
	}
	#compat section {
		width: 340px;
	}
}
@media (min-width: 768px) {
	#compat {
		justify-content: space-between;
	}
	#compat section {
		display: flex;
		flex-direction: column;
		width: 300px;
	}
	#compat section > a {
		align-self: center;
		margin-top: auto;
	}
}
@media (min-width: 960px) {
	#compat section {
		width: 300px;
	}
}
#compat section:nth-of-type(1)::before { background-image: url(../img/network_mpf.png) }
#compat section:nth-of-type(2)::before { background-image: url(../img/network_scanner.png) }
#compat section:nth-of-type(3)::before { background-image: url(../img/dedicated_scanner.png) }

/* Developer kit */
#devkit {
	padding-top: 330px;
	color: white;
	background: #333 url(../img/img_developer_kit_2.jpg) no-repeat center top 50px;
}
#devkit h2 {
	color: inherit;
}
#devkit > a {
	display: none;
	background: #f68f39;
}
#devkit > p:nth-of-type(2) {
	margin: -10px 0 23px;
}
#devkit > a:not(:nth-of-type(1)) {
	margin-left: 35px;
}
[dir=rtl] #devkit > a:not(:nth-of-type(1)) {
	margin-right: 0;
	margin-left: 35px;
}
@media (min-width: 768px) {
	#devkit  {
		min-height: 350px;
		padding-top: 50px;
		padding-bottom: 60px;
	}
	body:not([dir=rtl]) #devkit {
		padding-left: calc(50vw + 20px);
		background-position: right calc(50vw + 40px) top 59px;
	}
	[dir=rtl] #devkit {
		padding-right: calc(50vw + 20px);
		background-position: left calc(50vw + 40px) top 59px;;
	}
}