/* Hero */
.page > header {
	padding-top: 456px;
	background: #B2B6C0 url(../img/hero_mobile.jpg) no-repeat center top;
	color: white;
}
.page > header h1 {
	color: inherit;
}
.page > header p {
	margin-bottom: 30px;
}
@media (max-width:480px){
	.page > header h1 {
		font-size: 28px;
	}
}
@media (min-width:481px){
	.page > header {
		background-image: url(../img/hero_smalltablet.jpg);
	}
}
@media (min-width:600px){
	.page > header {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 500px;
		padding-top: 50px;
		background-image: url(../img/hero_tablet.jpg);
	}
	[dir=rtl] .page > header {
		background-image: url(../img/hero_tablet_rtl.jpg);
	}
	.page > header > * {
		max-width: 260px;
	}
}
@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);
	}
	.page > header > * {
		max-width: 410px;
	}
  [lang=it] .page > header > * {
    max-width: 430px;
  }
}
@media (min-width:960px){
	.page > header {
		background-image: url(../img/hero.jpg);
	}
	[dir=rtl] .page > header {
		background-image: url(../img/hero_rtl.jpg);
	}
}

/* Anchorbar */
.page > nav h2 {
	width: 250px;
}
[dir=rtl] .page > nav h2 {
	width: 200px;
	margin-left: 0;
}
.page > nav a[href="#intro"] { background-image: url(../img/anchor_eyeball.png) }
.page > nav a[href="#solutions"] { background-image: url(../img/anchor_puzzle.png) }
.page > nav a[href="#software"] { background-image: url(../img/anchor_projector.png) }

/* Intro */
#intro {
	text-align: center;
	padding-bottom: 20px;
}
#intro header p {
	font-weight: bold;
}

/* Solutions */
#solutions {
	padding-top: 0;
	padding-bottom: 0;
}
#solutions h2 {
	margin-top: 30px;
	font-size: 22px;
	text-align: center;
}
/* Solutions Nav */
#solutions > nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0;
	list-style: none;
	text-align: center;
}
#solutions > nav li {
	position: relative;
	line-height: 20px;
	border: 1px solid #e6e6e6;
}
#solutions > nav li,
#solutions > nav ul::after {
	width: 168px;
	margin: 0 10px 20px;
	content: '';
}

#solutions > nav a {
	display: block;
	width: auto;
	padding: 115px 10px 40px;
	font-weight: inherit;
	text-decoration: none;
	color: inherit;
	background-repeat: no-repeat;
	background-position: center top 23px;
	opacity: 1;
}
#solutions > nav li:hover {
	border-color: transparent;
	background-color: #f68f39;
}
#solutions > nav li:hover a {
	color: white;
}
#solutions > nav a::after {
	content: attr(data-cta);
	position: absolute;
	bottom: 18px;
	left: 0;
	width: 100%;
	font-size: 12px;
	font-weight: bold;
	color: #10218b;
}
#solutions > nav li:hover a::after {
	color: inherit;
}
#solutions > nav [href="#wireless"] { background-image: url(../img/icon_wireless.png) }
#solutions > nav [href="#interact"] { background-image: url(../img/icon_interactivity.png) }
#solutions > nav [href="#control"] { background-image: url(../img/icon_monitoring.png) }
#solutions > nav [href="#setup"] { background-image: url(../img/icon_set-up.png) }
#solutions > nav [href="#contentm"] { background-image: url(../img/icon_content-management.png) }

#solutions > nav li:hover [href="#wireless"] { background-image: url(../img/icon_wireless_hover.png) }
#solutions > nav li:hover [href="#interact"] { background-image: url(../img/icon_interactivity_hover.png) }
#solutions > nav li:hover [href="#control"] { background-image: url(../img/icon_monitoring_hover.png) }
#solutions > nav li:hover [href="#setup"] { background-image: url(../img/icon_set-up_hover.png) }
#solutions > nav li:hover [href="#contentm"] { background-image: url(../img/icon_content-management_hover.png) }

/* Solutions sections */
#solutions > section {
	position: relative;
	margin-bottom: 45px;
	padding-top: calc(52.15vw + 30px);
}
#solutions > section#contentm {
	margin-bottom: 0;
	padding-bottom: 40px;
	color: white;
}
#solutions > section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 100vw;
	height: 52.15vw;
	transform: translateX(-50%);
	background-repeat: no-repeat;
	background-size: contain;
}
#wireless::before { background-image: url(../img/img_wireless_tablet.jpg) }
#interact::before { background-image: url(../img/img_interactivity_tablet.jpg) }
#control::before { background-image: url(../img/img_monitoring_tablet.jpg) }
#setup::before { background-image: url(../img/img_set-up_tablet.jpg) }
#contentm::before { background-image: url(../img/img_content-management_tablet.jpg) }

#solutions > section#contentm::after {
	content: '';
	position: absolute;
	z-index: -1;
	left: 50%;
	height: 100%;
	top: 0;
	width: 100vw;
	transform: translateX(-50%);
	background: #1d201f;
}
#solutions #contentm > header p {
	margin-bottom: 20px;
	font-weight: bold;
}
#solutions h3 {
	font-size: 28px;
	margin-bottom: 26px;
	line-height: 32px;
}
#solutions #contentm h3 {
	color: inherit;
}
#solutions h3 + p {
	margin-bottom: 30px;
}
#solutions > section > section {
	border-color: #e5e5e5;
	border-style: solid;
	border-width: 1px 0 0;
}
#solutions > section > section.expanded {
	padding-bottom: 20px;
}
#solutions > section > section:last-of-type {
	border-bottom-width: 1px;
}
#solutions > section > section:not(.expanded) > *:not(h4) {
	display: none;
}
#solutions h4 {
	position: relative;
	margin: 0;
	padding: 11px 17px 11px 0;
	cursor: pointer;
}
[dir=rtl] #solutions h4 {
	padding-left: 17px;
	padding-right: 0;
}
#solutions h4::after {
	content: '';
	position: absolute;
	right: 0;
	top: 14px;
	width: 17px;
	height: 17px;
	background: url(../img/plusminus.png) no-repeat 0 0;
}
#solutions .expanded h4::after {
	background-position: -17px 0px;
}
[dir=rtl] #solutions h4::after {
	right: auto;
	left: 0;
}
#solutions > .expanded h4::after {
	background-position: 0 0;
}
#solutions h5 {
	margin: 9px 0 13px;
	font-size: inherit;
	font-weight: inherit;
	color: #10218b;
}
#solutions h5:not(:first-of-type) {
	margin-top: 20px;
}
#solutions > section > a,
#solutions > section > section > a {
	margin-bottom: 15px;
	margin-right: 10px;
}
#solutions > section > a {
	margin-top: -10px;
	margin-bottom: 20px;
}
[dir=rtl] #solutions > section > section > a {
	margin-left: 10px;
	margin-right: 0;
}
#solutions small {
	display: block;
	margin: 15px 0;
}
#solutions #contentm small {
	margin: 25px 0 30px;
}
@media (min-width: 768px){
	#solutions {
		overflow: hidden;
	}
	#solutions > nav {
		margin-bottom: 55px;
	}
	#solutions > section {
		display: flex;
		flex-direction: column;
		padding-top: 0;
	}
	#solutions > section:nth-of-type(odd) {
		align-items: flex-end;
	}
	#wireless {
		min-height: 650px;
		padding-top: 55px !important;
	}
	#interact {
		min-height: 410px;
		padding-top: 59px !important;
	}
	#control {
		min-height: 570px;
		padding-top: 78px !important;
	}
	#setup {
		min-height: 520px;
		margin-bottom: 0 !important;
		padding-top: 86px !important;
	}
	#contentm {
		height: 550px;
		padding-top: 40px !important;
		justify-content: center;
		align-items: flex-start !important;
		padding-left: calc(50% + 40px);
	}
	#solutions > section::before {
		top: 0;
		transform: none;
		height: 100%;
		background-size: auto;
		background-position: right top;
	}
    body:not([dir=rtl]) #solutions > section::before,
    [dir=rtl] #solutions > section:nth-of-type(even)::before {
        left: auto;
		right: calc(50% + 40px);
		width: calc(50vw - 40px);
    }
	body:not([dir=rtl]) #solutions > section:nth-of-type(even)::before,
    [dir=rtl] #solutions > section::before {
		right: auto;
		left: calc(50% + 40px);
		background-position: left top;
	}
	#wireless::before { background-image: url(../img/img_wireless.jpg) }
	#interact::before { background-image: url(../img/img_interactivity.jpg) }
	#control::before { background-image: url(../img/img_monitoring.jpg) }
	#setup::before { background-image: url(../img/img_set-up.jpg) }
	#contentm::before { display: none; }

	#contentm::after {
		background: url(../img/img_content-management.jpg) center top no-repeat !important;
	}

	#solutions > section:not(#contentm) > *:not(a) {
		width: calc(50% - 40px);
	}
	#contentm > *:not(a) {
		max-width: 400px;
	}
}

/* Popups */
#popups .PagePopup__content {
	background: white url(../img/pss_popup-bg.jpg) no-repeat right bottom;
}
#popups > section {
	display: none;
	padding-top: 45px;
	padding-bottom: 25px;
}
.PagePopup #popups > section {
	display: block;
}
#popups > section::before {
	content: '';
	display: block;
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
}
#popups a {
    margin-bottom: 10px;
}
.ie11 #popups a,
.msedge #popups a {
	display: inline-block;
}
#iprojectionIosAndroid::before,
#iprojectionPCMac::before,
#iprojectionChrome::before {
	background-image: url(../img/pss_iprojection.jpg);
}
#miracast::before {
	background-image: url(../img/pss_miracast.jpg);
}
#wirelesslan::before {
	background-image: url(../img/pss_wireless-lan.jpg);
}
#usbkey::before {
	background-image: url(../img/pss_usb.jpg);
}
#interactivetools::before {
	background-image: url(../img/pss_tools.jpg);
	}
#projectmanage::before {
	background-image: url(../img/pss_easymp-network-monitor.jpg);
}
#throwDistanceCalc::before {
	background-image: url(../img/pss_tdc.jpg);
}
#popups h2 {
	font-size: 22px;
	line-height: 28px;
}
#popups > section > a {
	margin-bottom: 15px;
}
body:not([dir=rtl]) #popups > section > a {
	margin-right: 10px;
}
[dir=rtl] #popups > section > a {
	margin-left: 10px;
}
#popups > section small {
	display: block;
	margin: 15px 0 0;
}
#popups a.appstore,
#popups a.googleplay,
#popups a.chromestore {
	overflow: hidden;
	text-indent: -9999px;
	background-repeat: no-repeat;
	border: none;
}
#popups a.appstore,
#popups a.googleplay {
	width: 142px;
	height: 42px;
}
#popups a.appstore {
	background-image: url(../img/pss_appstore.jpg);
}
#popups a.googleplay {
	background-image: url(../img/pss_googleplay.jpg);
}
#popups a.chromestore {
	width: 203px;
	height: 58px;
	background-image: url(../img/pss_chromestore.jpg);
}
@media (min-width: 768px) {
	#popups > section {
		padding-left: 170px;
	}
	#popups > section::before {
		position: absolute;
		left: 40px;
		top: 44px;
	}
	[dir=rtl] #popups > section::before {
		left: auto;
		right: 40px;
	}
}

/* Software archive popup */
#softarchive {
	padding-top: 30px;
	font-size: 14px;
}
#softarchive h2 {
	margin-bottom: 40px;
	color: inherit;
	text-align: center;
}
#softarchive h3 {
	margin-bottom: 10px;
	font-size: 18px;
	font-weight: normal;
}
#softarchive p {
	margin-bottom: 15px;
}
#softarchive > section {
	display: flex;
	flex-direction: column;
	padding-left: 130px;
	background-repeat: no-repeat;
	background-position: left top;
}
#softarchive > section:not(:last-of-type) {
	margin-bottom: 60px;
}
[dir=rtl] #softarchive > section {
    padding-right: 130px;
	padding-left: 0;
    background-position: right top;
}
#usbkey {
	overflow: hidden;
}
#usbkey::after {
	content: '';
	background-image: url(../img/pss_quick-wireless-image.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left center;
	display: block;
	height: 157px;
}
#usbkey > a {
	order: 1;
}
#usbkey {
	background-image: url(../img/pss_usb.jpg);
}
#easymp {
	background-image: url(../img/pss_easymp-network-monitor.jpg);
}
@media (max-width: 480px) {
	#softarchive > section {
        padding-top: 120px;
		padding-left: 0;
        padding-right: 0;
	}
}

/* Software filter */
#software {
	padding-top: 60px;
	padding-bottom: 0;
}
#software h2 {
	margin-bottom: 18px;
}
#software > header {
	margin-bottom: 25px;
	font-size: 18px;
}
#software > nav {
	margin-bottom: 25px;
}
#software > nav h3 {
	margin-bottom: 10px;
	color: inherit;
	font-size: 12px;
	font-weight: bold;
}
#software > nav ul {
	list-style: none;
	padding: 5px 0 20px;
	border: solid #e5e5e5;
	border-width: 2px 0 1px;
}
#software > nav li {
	position: relative;
	align-items: center;
	margin-top: 14px;
	padding-left: 32px;
	line-height: 21px;
	cursor: pointer;
}
[dir=rtl] #software > nav li {
	padding-left: 0;
	padding-right: 32px;
}
#software > nav li::before {
	content: '';
	position: absolute;
	left: 0;
	top: -1px;
	width: 20px;
	height: 20px;
	border: 1px solid #D9D9D9;
	border-radius: 50%;
}
[dir=rtl] #software > nav li::before {
	left: auto;
	right: 0;
}
#software > nav li.active::after {
	content: '';
	position: absolute;
	left: 7px;
	top: 6px;
	width: 6px;
	height: 6px;
	background: #10218B;
	border-radius: 50%;
}
[dir=rtl] #software > nav li.active::after {
	left: auto;
	right: 7px;
}
#software > nav li:hover::before {
	border-color: #10218B;
}
#software > nav p {
	padding-bottom: 19px;
	border-bottom: 	1px solid #e5e5e5;
}
#software > nav p a {
	display: block;
	margin-top: 13px;
	font-size: 13px;
}
.ie11 #software > nav p a {
	text-align: left;
}
[dir=rtl] .ie11 #software > nav p a {
	text-align: right;
}
#softResources h3 {
	overflow: hidden;
	margin-bottom: 40px;
	color: inherit;
	font-size: 18px;
	font-weight: inherit;
}
#softResources > section {
	float: left;
	width: 214px;
	margin-right: 20px;
	margin-bottom: 60px;
	padding-top: 160px;
	background-repeat: no-repeat;
	background-position: center top;
}
[dir=rtl] #softResources > section {
	float: right;
	margin-right: 0;
	margin-left: 20px;
}
#softResources > section h4 {
	min-height: 40px;
	font-size: 13px;
	color: #10218B;
}
#iproj_iosandr_r, #iproj_chrome_r, #iproj_macwin_r { background-image: url(../img/pss_app_iprojection.jpg); }
#iproj_mira_r { background-image: url(../img/pss_app_miracast.jpg); }
#iproj_wifi_r { background-image: url(../img/pss_app_wifi.jpg); }
#monitor_r { background-image: url(../img/pss_app_easymp-network-monitor.jpg); }
#tdc_r { background-image: url(../img/pss_app_tdc.jpg); }
#tools_r { background-image: url(../img/pss_app_tools.jpg); }

@media (min-width: 768px){
	#software {
		padding-bottom: 20px;
	}
	#software > nav {
		float: left;
		width: 200px;
	}
	[dir=rtl] #software > nav {
		float: right;
	}
	#softResources {
		overflow: hidden;
		padding-left: 30px;
	}
	[dir=rtl] #softResources {
		padding-left: 0;
		padding-right: 30px;
	}
}

/* ctp */
#ctp {
	padding-top: calc(52.1% + 30px);
	padding-bottom: 30px;
	background: #122688 url(../img/img_ctp_tablet.jpg) no-repeat center top/contain;
	color: white;
}
#ctp h2 {
	color: inherit;
}
#ctp a {
	padding: 0;
	opacity: 1;
}
#ctp a:hover {
	text-decoration: underline;
}
@media (min-width: 768px) {
	#ctp {
		overflow: hidden;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 500px;
		padding-top: 0;
		padding-bottom: 0;
		background: none;
	}
	#ctp::before {
		content: '';
		position: absolute;
		z-index: -1;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100%;
		background: url(../img/img_ctp.jpg) no-repeat center top;
	}
	[dir=rtl] #ctp:before {
		transform: scale(-1,1)
	}
	#ctp > * {
		width: 350px;
		margin: 0;
		padding: 20px 20px 0;
		background: #122688;
	}
	#ctp > a {
		text-align: left;
		padding: 20px 20px 15px;
	}
    [dir=rtl] #ctp > a {
        text-align: right;
    }
}

/* Logos */
#logos {
	padding-bottom: 0;
}
#logos img {
	margin-right: 20px;
}
[dir=rtl] #logos img {
	margin-right: 0;
	margin-left: 20px;
}

/* other fixes */
[lang=pl] #interact > a.more {
	white-space: nowrap;
}