html, body
{
    padding: 0;
    margin: 0;
	background: #333;
}

@font-face {
    font-family: UniviaProMedium;
    src: url("fonts/UniviaPro-Medium.otf") format("opentype");
}

@font-face {
    font-family: UniviaProThin;
    src: url("fonts/UniviaPro-Thin.otf") format("opentype");
}

@font-face {
    font-family: FuturaLTLight;
    src: url("fonts/FuturaLT-Light.ttf");
}

*,
*::before,
*::after
{
    box-sizing: border-box;
}

.payShield
{
    width: 1220px;
    height: 600px;
	background: url(background.svg) 0 0 no-repeat;
	background-size: cover;
	padding: 80px 60px 80px 60px;
	user-select:none;
	margin: 0 auto 0 auto;
	position: relative;
}

.payShield .progressAnimation
{
	position: absolute;
	width: 100%;
	height: 100%;
	background: #000 url(progress.svg) center center no-repeat;
	background-size: 140px 140px;
	left: 0;
	top: 0;
	z-index: 10;
	opacity: 0.5;
}

.payShieldWrap
{
	width: 100%;
	height: 100%;
	position: relative;
}

.payShield .payShieldWrap .content
{
	width: 100%;
	height: 100%;
}

.payShield .content .column
{
	height: 100%;
	color: #fff;
}

.payShield .content .column.col1,
.payShield .content .column.col3
{
	width: calc(100%/6);
	float: left;
	padding: 80px 0 0 0;
}

.payShield .content .column.col2
{
	width: calc(4 * 100%/6);
	float: left;
	position: relative;
}

.payShield .content .col2 h2
{
	padding: 0;
	margin: 0;
	font-weight: normal;
	text-align: center;
	font-family: UniviaProThin;
	font-size: 30px;
	line-height: 34px;
}

.payShield .content .col2 h2 span
{
	font-family: UniviaProMedium;
}

.payShield .content .col2 h2 span.titleSplit
{
	font-family: UniviaProThin;
	padding: 0 15px 0 15px;
	display: inline-block;
}

.payShield .content .col2 .activeContent
{
	height: 320px;
	position: absolute;
	width: 100%;
	top: 80px;
	left: 0;
	opacity: 1;
	transition: opacity 0.4s ease-in-out, visibility 0.4s linear;
}

.payShield .content .col2 .activeContent.hidden
{
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s ease-out, visibility 0.3s linear;
}

.payShield .content .spinner .panel
{
	position: absolute;
	top: 180px;
	left: 0;
	width: 100%;
	height: 150px;
	display: flex;
	justify-content: center;
	z-index: 4;
}

.payShield .content .spinner .panel .controls
{
	flex: 0 1 auto;
	align-self: auto;
}

.payShield .content .spinner .panel .controls span
{
	float: left;
	width: 321px;
	height: 58px;
	margin: 0 18px 0 0;
	background: url(Button_left_with_line@2x.png) 0 0 no-repeat;
	background-size: 321px 58px;
	user-drag: none;
	cursor: pointer;
	display: inline-block;
}

.payShield .content .spinner .panel .controls span:hover
{
	opacity: 0.9;
	transition: opacity 0.2s ease-out;
}

.payShield .content .spinner .panel .controls span:last-child
{
	background: url(Button_right_with_line@2x.png) 0 0 no-repeat;
	margin: 0 0 0 18px;
	background-size: 321px 58px;
}

.payShield .content .features .sideToggle
{
	display: blockk;
	margin: 0 auto 0 auto;
	background: url(Button_rotate.svg) center 0 no-repeat;
	background-size: 28px;
	position: absolute;
	bottom: 75px;
	left: 0;
	right: 0;
	padding: 36px 0 0 0;
	font-family: FuturaLTLight;
	text-transform: uppercase;
	font-size: 14px;
	height: 50px;
	width: 80px;
	text-align: center;
	z-index: 4;
	color: #00bbdd;
	cursor: pointer;
}

.payShield .content .features .sideToggle:hover
{
	opacity: 0.85;
	transition: opacity 0.2s ease-out;
}

.payShield .content .col2 footer
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	z-index: 10;
}

.payShield .content .col2 footer::after
{
	position: absolute;
	content: "";
	left: 50%;
	border-left: 1px solid #fff;
	top: 3px;
	width: 2px;
	height: 100%;
	opacity: 0.5;
}

.payShield .content .col2 footer ul
{
	margin: 0;
	padding: 0;
	flex: 0 1 auto;
	align-self: auto;
	list-style: none;
}

.payShield .content .col2 footer ul li
{
	float: left;
	width: 50%;
	padding: 0 20px 0 15px;
	list-style: none;
}

.payShield .content .col2 footer span
{
	text-align: right;
	font-family: UniviaProThin;
	font-size: 56px;
	line-height: 56px;
	text-decoration: none;
	white-space: nowrap;
	color: #fff;
	opacity: 0.5;
	cursor: pointer;
	display: inline-block;
}

.payShield .content .col2 footer span:hover
{
	opacity: 1;
	transition: opacity 0.3s ease-out;
}

.payShield .content .col2 footer span.active
{
	color: #00bbdd;
	opacity: 1;
}

.payShield .content .col2 footer span.active:hover
{
	opacity: 1;
	cursor: default;
}

.payShield .content .col2 footer span:last-child
{
	text-align: left;
}

.payShield .content .col1 h3
{
	margin: 0;
	padding: 0 0 20px 0;
	font-size: 18px;
	line-height: 20px;
	position: relative;
	font-family: UniviaProThin;
	font-weight: normal;
}

.payShield .content .col1 h3::after
{
	content: "";
	width: 30px;
	height: 1px;
	border-bottom: 1px solid #00bbdd;
	bottom: 10px;
	left: 0;
	position: absolute;
}

.payShield .content .col1 ul
{
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: FuturaLTLight;
}

.payShield .content .col1 ul li
{
	list-style: none;
	font-size: 15px;
	line-height: 16px;
	margin: 0 0 17px 0;
	padding: 32px 0 0 0;
	position: relative;
}

.payShield .content .col1 ul li:last-child
{
	line-height: 19px;
}

.payShield .content .col1 ul li::before
{
	content: "";
	height: 32px;
	width: 32px;
	top: 0;
	left: 0;
	position: absolute;
}

.payShield .content .col1 ul li:nth-child(1)::before
{
	background: url(Icon_power.svg) 0 0 no-repeat;
	background-size: 28px;
}

.payShield .content .col1 ul li:nth-child(2)::before
{
	background: url(Icon_intuituve.svg) 0 0 no-repeat;
	background-size: 28px;
}

.payShield .content .col1 ul li:nth-child(3)::before
{
	background: url(Icon_pci.svg) 0 0 no-repeat;
	background-size: 28px;
}

.payShield .content .col1 ul li:nth-child(4)::before
{
	background: url(Icon_performance.svg) 0 0 no-repeat;
	background-size: 28px;
}

.payShield .content .col3 .hotspotPopup
{
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.15s ease-out, visibility 0.15s linear;
}

.payShield .content .col3 .hotspotPopup.active
{
	visibility: visible;
	opacity: 1;
	transition: opacity 0.2s ease-in-out, visibility 0.2s linear;
}

.payShield .content .col3 .hotspotPopup .dataBottom
{
	background: #171a21;
	padding: 12px 12px 16px 12px;
	border-bottom-left-radius: 11px;
	border-bottom-right-radius: 11px;
}

.payShield .content .col3 .hotspotPopup h3
{
	margin: 0;
	padding: 0 0 20px 0;
	font-size: 18px;
	line-height: 20px;
	position: relative;
	font-family: UniviaProThin;
	font-weight: normal;
}

.payShield .content .col3 .hotspotPopup h3::after
{
	content: "";
	width: 30px;
	height: 1px;
	border-bottom: 1px solid #00bbdd;
	bottom: 10px;
	left: 0;
	position: absolute;
}

.payShield .content .col3 .hotspotPopup img
{
	width: 100%;
	display: block;
}

.payShield .content .col3 .hotspotPopup p
{
	padding: 0;
	margin: 0;
	color: #fff;
	font-family: FuturaLTLight;
	font-size: 15px;
	line-height: 19px;
}

.payShield .hotspot_indicator:hover
{
	opacity: 0.8;
}

.payShield .indicator_active,
.payShield .hotspot_indicator.indicator_active:hover
{
	opacity: 0.4;
}