@import url('https://fonts.googleapis.com/css?family=Armata&display=swap');

body {
	font-family: 'Armata', sans-serif;
	font-size: 18px;
	color: #808080;
	background: #FFF;
	transition: background-color .2s ease-in-out;
}

input,
textarea,
button,
select {
	font-family: 'Armata', sans-serif;
	outline: none!important;
	line-height: normal;
}

input[type="text"],
input[type="email"],
input[type="submit"] {
    -webkit-appearance: none;
    border-radius: 0;
}

a,
a:hover,
a:focus {
	color: #008B97;
}

::-moz-selection {
	background-color: #008B97;
	color:#FFF;
}

::selection {
	background-color: #008B97;
	color: #FFF;
}

::-webkit-input-placeholder {
	color: #95989A;
}

:-moz-placeholder {
	color: #95989A;
	opacity: 1;
}

::-moz-placeholder {
	color: #95989A;
	opacity: 1;
}

:-ms-input-placeholder {
	color: #95989A;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="file"],
textarea,
select {
	width: 100%;
	font-size: 22px;
	border: none;
	line-height: 40px;
	padding: 20px 35px;
	background-color: #E4F1FD;
	color: #000;
}

textarea {
	height: 150px;
}

select {
    -webkit-appearance:none;
    padding-right: 40px!important;
    background-image: url(images/select@2x.png);
    background-repeat: no-repeat;
    background-size: 25px 6px;
    background-position: right center;
}

select::-ms-expand {
    display: none;
}

.wrapper {
	width: 100%;
	overflow: hidden;
}

a,
.button,
input,
.fas,
.configurator-arrows button {
    transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
}

p {
	margin-bottom: 25px;
}

.loader {
	background: #008B97;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	text-align: center;
	transition: all 1s ease-in-out;
}

.loader-logo {
	height: 0px;
	overflow: hidden;
	transition: all .8s ease-in-out;
}

.loader-overlay {
	background: #008B97;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	text-align: center;
	transition: all .8s ease-in-out;
}

.loader.init .loader-overlay {
	height: 0;
}

.loader-logo .image > img {
	max-height: 100vh;
	transition: all 1s ease-in-out;
	position: relative;
	z-index: 5;
	background: #008B97;
	max-width: 90%;
}

.loader-logo .image {
	width: 100%;
	text-align: center;
	position: fixed;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 5;
	left: 0;
	transition: all 1s ease-in-out;
}

.loader.init .loader-logo {
	height: 100vh;
}

.loader.center .loader-logo .image > img {
	max-height: 220px;
}

.loader:not(.finished) + .wrapper {
	height: 0px;
}

.preloader-logo-top {
	position: relative;
	padding-top: 27px;
	white-space: nowrap;
}

.loader-logo .image .text {
	font-size: 0px;
	display: inline-block;
	vertical-align: middle;
	overflow: hidden;
	width: 0px;
	opacity: 0;
	transition: all 1s ease-in-out;
	transform: translateX(-200px);
	position: relative;
	z-index: 1;
}

.loader-logo .image .text-inner {
	padding-right: 27px;
	padding-left: 40px;
}

.showtext .loader-logo .image .text {
	opacity: 1;
	width: 740px;
	transform: translateX(0);
}

.showtext .loader-logo .image .text span {
	transform: translateX(0)!important;
}

.preloader-logo-top span {
	height: 140px;
	display: inline-block;
	vertical-align: top;
	transition: all 1s ease-in-out;
}

.preloader-logo-top span img,
.preloader-logo-bottom span img {
	max-height: 100%;
}

.preloader-logo-top span:nth-child(1) {
	width: 60px;
	transform: translateX(-60px);
}

.preloader-logo-top span:nth-child(2) {
	width: 234px;
	margin-left: -16px;
	transform: translateX(-60px);
}

.preloader-logo-top span:nth-child(3) {
	width: 77px;
	transform: translateX(-230px);
}

.preloader-logo-top span:nth-child(4) {
	width: 41px;
	margin-right: 33px;
	transform: translateX(-270px);
}

.preloader-logo-top span:nth-child(5) {
	width: 60px;
	transform: translateX(-330px);
}

.preloader-logo-top span:nth-child(6) {
	width: 200px;
	margin-left: -16px;
	transform: translateX(-530px);
}

.preloader-logo-top span:nth-child(7) {
	width: 27px;
	position: absolute;
	top: 0;
	right: -27px;
	z-index: 1;
/*	transform: translateX(-530px);*/
}

.preloader-logo-bottom {
	margin-top: 30px;
	padding-bottom: 27px;
	white-space: nowrap;
}

.preloader-logo-bottom span {
	height: 50px;
	display: inline-block;
	vertical-align: top;
	margin-right: 11px;
	transition: all 1s ease-in-out;
}

.preloader-logo-bottom span:nth-child(1),
.preloader-logo-bottom span:nth-child(8) {
	width: 30px;
	transform: translateX(-30px);
}

.preloader-logo-bottom span:nth-child(2),
.preloader-logo-bottom span:nth-child(9) {
	width: 36px;
	transform: translateX(-76px);
}

.preloader-logo-bottom span:nth-child(3),
.preloader-logo-bottom span:nth-child(10) {
	width: 27px;
	margin-right: 32px;
	transform: translateX(-110px);
}

.preloader-logo-bottom span:nth-child(4),
.preloader-logo-bottom span:nth-child(11) {
	width: 50px;
	transform: translateX(-170px);
}

.preloader-logo-bottom span:nth-child(5),
.preloader-logo-bottom span:nth-child(12) {
	width: 41px;
	transform: translateX(-220px);
}

.preloader-logo-bottom span:nth-child(6) {
	width: 27px;
	transform: translateX(-260px);
}

.preloader-logo-bottom span:nth-child(7) {
	width: 8px;
	margin-right: 32px;
	transform: translateX(-300px);
}

.preloader-logo-bottom span:nth-child(8) {
	transform: translateX(-340px);
}

.preloader-logo-bottom span:nth-child(9) {
	transform: translateX(-386px);
}

.preloader-logo-bottom span:nth-child(10) {
	transform: translateX(-430px);
}

.preloader-logo-bottom span:nth-child(11) {
	transform: translateX(-490px);
}

.preloader-logo-bottom span:nth-child(12) {
	transform: translateX(-540px);
}

.preloader-logo-bottom span:nth-child(13) {
	width: 21px;
	margin-right: 8px;
	transform: translateX(-600px);
}

.preloader-logo-bottom span:nth-child(14) {
	width: 39px;
	margin-right: 0;
	transform: translateX(-640px);
}

.preloader-logo-bottom span:nth-child(15) {
	width: 8px;
	margin-right: 0;
	transform: translateX(-660px);
}

.finished .loader-logo .image {
	top: -50%;
}

.loader.finished {
	opacity: 0;
	top: 100%;
}

.logo {
	/*margin: 0;*/
	margin: 0 auto;
	transition: all 1s ease-in-out;
	/*width: 156px;*/
	width: 200px;
	/*position: absolute;*/
	top: 40px;
	left: 40px;
	z-index: 2;
	background-color: #FFF;
}

.frame {
	padding-bottom: 62px;
	min-height: 100vh;
	max-width: 1920px;
	margin: 0 auto;
	position: relative;
}

.frame:before {
	content: '';
	width: 3px;
	height: 100%;
	height: calc(100% - 150px);
	background: #E4F1FD;
	position: absolute;
	left: 387px;
	top: 50px;
	z-index: -1;
	opacity: 0;
	transition: all 1s ease-in-out;
}

.welcome-frame .logo, .welcome-frame .whitelabel-sidebar {
	/*width: 290px;*/
	width: 200px;
	
}

.welcome-frame:before {
	content: '';
	width: 3px;
	height: 100%;
	height: calc(100% - 150px);
	background: #E4F1FD;
	position: absolute;
	left: 387px;
	top: 40px;
	z-index: 1;
	opacity: 1;
}

.welcome-slide {
}

.frame-title {
	padding: 30px 0;
}

.frame-title h2 {
	color: #0074B9;
	font-size: 40px;
	margin: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.frame-title p {
	margin: 0 0 -24px;
	font-size: 16px;
}

ul.top-actions {
	padding: 0;
	margin: 10px 0 0;
	list-style: none;
	float: right;
}

ul.top-actions li {
	float: left;
	line-height: 28px;
	position: relative;
}

body:not(.step-result) ul.top-actions li.top-action-share,
body:not(.step-result) ul.top-actions li.top-action-email,
body:not(.step-result) ul.top-actions li.top-action-print {
	display: none;
}

ul.top-actions li > a {
	display: inline-block;
	text-decoration: none!important;
	color: #363636;
}

ul.top-actions li + li {
	margin-left: 50px;
}

ul.top-actions li > a:before {
	content: '';
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
	display: inline-block;
	vertical-align: -5px;
	margin-right: 7px;
}

ul.top-actions li.top-action-share > a:before {
	background-image: url(../images/top/share.svg);
	width: 26px;
	height: 25px;
}

ul.top-actions li.top-action-email > a:before {
	background-image: url(../images/top/email.svg);
	width: 32px;
	height: 24px;
}

ul.top-actions li.top-action-print > a:before {
	background-image: url(../images/top/print.svg);
	width: 31px;
	height: 25px;
}

ul.top-actions li.top-action-retailer > a:before {
	background-image: url(../images/top/retailer.svg);
	width: 20px;
	height: 28px;
}

.share-buttons {
	background: #FFF;
	padding: 15px;
	position: absolute;
	right: 100%;
	top: -30px;
	box-shadow: 3px 5px 13px rgba(0,0,0,.16);
	display: none;
	white-space: nowrap;
	font-size: 0px;
	width: 210px;
    margin-right: 15px;
}

.share-buttons > a {
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
	width: 50px;
	height: 50px;
	background-size: 100%;
	float: left;
}

.share-buttons > a + a {
	margin-left: 15px;
}

.share-buttons > a:hover {
	opacity: 0.8;
}

.share-buttons > a.share-fb {
	background-image: url(../images/share/fb@2x.png);
}

.share-buttons > a.share-tw {
	background-image: url(../images/share/tw@2x.png);
}

.share-buttons > a.share-pi {
	background-image: url(../images/share/pi@2x.png);
}

.configurator-step {
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.configurator-step.loading:before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: rgba(255,255,255,1) url('../images/spinner.svg') no-repeat center;
	background-size: 100px 100px;
	z-index: 20;
}

.configurator-step.loading2:before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: rgba(255,255,255,.5) url('../images/spinner.svg') no-repeat center;
	background-size: 100px 100px;
	z-index: 20;
}

.configurator-step .image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	height: calc(100vh - 214px);
	max-height: 800px;
}

.configurator-step .image.cover {
	display: none;
}

.configurator-step[data-step="cover"] .image:not(.cover) {
	display: none;
}

.configurator-step[data-step="cover"] .image.cover {
	display: block;
}

.gorilla-btn {
	width: 99px;
	height: 104px;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 5;
	background: url(../images/thumbnail.jpg) no-repeat center;
	background-size: 100%;
	cursor: pointer;
	box-shadow: -5px -5px 8px rgba(0,0,0,.16);
	display: none;
}

.configurator-step[data-step="cover"].activate-zoom-cover .gorilla-btn {
	display: block;
}

.gorilla-video {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	display: none;
    background: #FFF;
}

.gorilla-video video {
	width: 100%!important;
	height: 100%!important;
	position: absolute;
	left: 0%;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 2;
}

.zoom-btn {
	width: 32px;
	height: 32px;
	background: #FFF url(../images/zoom.svg) no-repeat center;
	background-size: 20px 20px;
	cursor: pointer;
	border-radius: 50%;
	position: absolute;
	box-shadow: 0px 3px 8px rgba(0,0,0,.16);
	display: none;
}

.water-btn {
	width: 32px;
	height: 32px;
	background: #FFF url(../images/droplet.png) no-repeat center;
	background-size: 28px;
	cursor: pointer;
	border-radius: 50%;
	position: absolute;
	box-shadow: 0px 3px 8px rgba(0,0,0,.16);
	display: none;
}

.configurator-step .image[data-shape="rectangle"] ~ .zoom-btn[data-img="1"] {
	left: 48%;
	top: 28%;
}

.configurator-step .image[data-shape="rectangle"] ~ .zoom-btn[data-img="2"] {
	left: 27%;
	top: 58%;
}

.configurator-step .image[data-shape="rectangle"] ~ .zoom-btn[data-img="3"] {
	left: 66%;
	top: 48%;
}

.configurator-step .image[data-shape="rectangle"] ~ .water-btn {
	left: 57%;
	top: 55%;
}

.configurator-step .image[data-shape="roman"] ~ .zoom-btn[data-img="1"] {
	left: 48%;
	top: 28%;
}

.configurator-step .image[data-shape="roman"] ~ .zoom-btn[data-img="3"] {
	left: 66%;
	top: 41%;
}

.configurator-step .image[data-shape="roman"] ~ .zoom-btn[data-img="2"] {
	left: 25%;
	top: 58%;
}

.configurator-step .image[data-shape="roman"] ~ .water-btn {
	left: 57%;
	top: 55%;
}

.configurator-step .image[data-shape="true-l"] ~ .zoom-btn[data-img="1"] {
	left: 55%;
	top: 31%;
}

.configurator-step .image[data-shape="true-l"] ~ .zoom-btn[data-img="3"] {
	left: 67%;
	top: 44%;
}

.configurator-step .image[data-shape="true-l"] ~ .zoom-btn[data-img="2"] {
	left: 25%;
	top: 70%;
}

.configurator-step .image[data-shape="true-l"] ~ .water-btn {
	left: 46%;
	top: 58%;
}

.configurator-step .image[data-shape="freeform"] ~ .zoom-btn[data-img="1"] {
	left: 41%;
	top: 33%;
}

.configurator-step .image[data-shape="freeform"] ~ .zoom-btn[data-img="2"] {
	left: 25%;
	top: 60%;
}

.configurator-step .image[data-shape="freeform"] ~ .zoom-btn[data-img="3"] {
	left: 60%;
	top: 50%;
}

.configurator-step .image[data-shape="freeform"] ~ .water-btn {
	left: 64%;
	top: 55%;
}

.configurator-step[data-step="liner"].activate-zoom .zoom-btn,
.configurator-step[data-step="liner"].activate-zoom .water-btn {
	display: block;
}

.configurator-step[data-step="cover"].activate-zoom-cover .zoom-btn {
	display: block;
}

.configurator-step[data-step="cover"] .image[data-shape="rectangle"] ~ .zoom-btn[data-img="3"] {
	left: 41%;
	top: 28%;
}

.configurator-step[data-step="cover"] .image[data-shape="rectangle"] ~ .zoom-btn[data-img="1"] {
	left: 9%;
	top: 68%;
}

.configurator-step[data-step="cover"] .image[data-shape="rectangle"] ~ .zoom-btn[data-img="2"] {
	left: 17%;
	top: 48%;
}

.configurator-step[data-step="cover"] .image[data-shape="roman"] ~ .zoom-btn[data-img="3"] {
	left: 41%;
	top: 34%;
}

.configurator-step[data-step="cover"] .image[data-shape="roman"] ~ .zoom-btn[data-img="1"] {
	left: 6%;
	top: 64%;
}

.configurator-step[data-step="cover"] .image[data-shape="roman"] ~ .zoom-btn[data-img="2"] {
	left: 18%;
	top: 41%;
}

.configurator-step[data-step="cover"] .image[data-shape="true-l"] ~ .zoom-btn[data-img="3"] {
	left: 55%;
	top: 31%;
}

.configurator-step[data-step="cover"] .image[data-shape="true-l"] ~ .zoom-btn[data-img="1"] {
	left: 9%;
	top: 84%;
}

.configurator-step[data-step="cover"] .image[data-shape="true-l"] ~ .zoom-btn[data-img="2"] {
	left: 20%;
	top: 47%;
}

.configurator-step[data-step="cover"] .image[data-shape="freeform"] ~ .zoom-btn[data-img="2"] {
	left: 7%;
	top: 45%;
}

.configurator-step[data-step="cover"] .image[data-shape="freeform"] ~ .zoom-btn[data-img="1"] {
	left: 10%;
	top: 78%;
}

.configurator-step[data-step="cover"] .image[data-shape="freeform"] ~ .zoom-btn[data-img="3"] {
	left: 44%;
	top: 50%;
}

.close-popup {
	width: 40px;
	height: 40px;
	background: #008E9B url(../images/close.svg) no-repeat center;
	background-size: 20px 20px;
	position: absolute;
	right: 20px;
	top: 20px;
	z-index: 5;
	cursor: pointer;
	border-radius: 50%;
	box-shadow: 0px 3px 8px rgba(0,0,0,.16);
}

.zoom-image {
	position: absolute;
	left: 100%;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,.8);
	transition: all 1s ease-in-out;
}

.zoom-image.visible {
	left: 0;
}

.zoom-image img {
	display: block;
	margin-left: auto;
	height: 100%;
	max-width: none;
}

.configurator-form {
	/*margin-top: 190px;*/
	margin-top: 30px;
	padding: 10px 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	/*max-height: calc(100vh - 341px);*/
	max-height: calc(100vh - 300px);
	padding-left: 25px;
}

.step-result .configurator-form,
.welcome-frame .configurator-form {
  margin-top: 190px;
}

.configurator-process .whitelabel-top {
  float: right;
}

.configurator-form::-webkit-scrollbar {
	width: 8px;
}

.configurator-form::-webkit-scrollbar-track {
	background: #E5E5E5;
	border-radius: 4px;
}

.configurator-form::-webkit-scrollbar-thumb {
	background: #0074B9;
	border-radius: 4px;
}

.configurator-form::-webkit-scrollbar-thumb:hover {
	background: #033972;
}

.configurator-process {
	padding-bottom: 71px;
}

.configurator-frame {
	display: none;
	transition: all 1s ease-in-out;
	overflow: hidden;
}

.configurator-process .welcome-slide {
	display: none;
	transition: all 1s ease-in-out;
}

.configurator-form-step {
	display: none;
}

.configurator-process .configurator-frame {
	display: block;
}

.sidebar {
	width: 387px;
	float: left;
	padding: 40px 0 40px 15px;
	position: relative;
	height: calc(100vh - 62px);
}

.welcome-frame .sidebar,
.step-result .sidebar {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.whitelabel-sidebar {
	display: none;
	word-break: break-all;
	font-size: 16px;
}

.whitelabel-sidebar .wl_image {
	padding-top: 15px;
	padding-bottom: 15px;
	margin: 0 auto;
	width: 200px;
}

.whitelabel-sidebar .wl_address {
  margin-left: 30px;
}

.step-result .sidebar .whitelabel-sidebar,
.welcome-frame .sidebar .whitelabel-sidebar {
	display: block;
	/*align-self: flex-end;*/
	width: 100%;
}

.step-result .whitelabel-top {
	display: none;
}

.configurator-frame .whitelabel-top .wl_image {
  width: 200px;
}

.wl_address > *:last-child {
	margin-bottom: 0;
}

.main {
	padding-left: 440px;
	padding-right: 55px;
}

.welcome-slide {
	padding-top: 40px;
	padding-bottom: 15px;
}

.welcome-slide .text {
	font-size: 22px;
	max-width: 1160px;
	margin-bottom: 50px;
}

.welcome-slide .text h1 {
	font-size: 33px;
	color: #005296;
	text-transform: uppercase;
	margin-bottom: 70px;
}

.welcome-slide .text h1 img {
	width: 210px;
	vertical-align: -2px;
	margin: 0 10px;
}

.welcome-slide .text h1 span {
	color: #808080;
}

.welcome-slide .text h2 {
	color: #363636;
	font-size: 44px;
	margin: 0 0 20px;
	font-weight: 700;
}

.form-item {
	margin-bottom: 10px;
}

.initial-form {
	max-width: 1200px;
}

.initial-form .row {
	margin-left: -5px;
	margin-right: -5px;
	display: none;
}

.initial-form .row.mirage2 {
  display: flex;
}

.initial-form .row > div {
	padding-left: 5px;
	padding-right: 5px;
}

.form-actions {
	margin-top: 50px;
}

.form-terms {
	padding-top: 8px;
}

.form-item-checkbox {
	position: relative;
}

.form-item-checkbox input {
	position: absolute;
	left: 35px;
	top: 0;
	z-index: 1;
	opacity: 0;
}

.form-item-checkbox {
	padding-left: 35px;
}

.form-item-checkbox:last-child {
	margin-bottom: 0;
}

.form-item-checkbox label {
	font-size: 12px;
	margin-bottom: 0;
	padding-left: 30px;
	display: inline-block;
	font-weight: 400;
	color: #363636;
	position: relative;
	vertical-align: middle;
}

.form-item-checkbox label a {
	text-decoration: underline;
	color: #0074B9;
}

.form-item-checkbox label a:hover {
	text-decoration: none;
}

.form-item-checkbox label:before {
	content: '';
	width: 20px;
	height: 20px;
	border: 2px solid #008E9B;
	border-radius: 4px;
	position: absolute;
	left: 0;
	top: -1px;
	z-index: 1;
	background-image: url(../images/check.svg);
	background-repeat: no-repeat;
	background-size: 14px 11px;
	background-position: center;
}

.form-item-checkbox input:checked + label:before {
	background-color: #008E9B;
}

.button {
	display: inline-block;
	border: none;
	background: #008E9B;
	color: #FFF!important;
	font-size: 19px;
	text-transform: uppercase;
	line-height: 30px;
	padding: 20px 30px;
	border-radius: 35px;
	min-width: 380px;
	text-align: center;
}

.button:hover {
	background-color: #04747E;
}

.button:after {
	content: '';
	display: inline-block;
	background: url(../images/button-arrow@2x.png) no-repeat center;
	background-size: 100%;
	width: 20px;
	height: 20px;
	vertical-align: middle;
	margin-left: 20px;
}

.footer {
	text-align: center;
	background: #008B97;
	color: #FFF;
	line-height: 1.6;
	padding: 17px 15px;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
}

.footer p {
	margin: 0;
}

.select-shape-field {
	list-style: none;
	padding: 0;
	margin: 0;
	max-width: 195px;
}

.select-shape-field > li + li {
	margin-top: 15px;
}

.select-shape-field .form-item-checkbox {
	padding-left: 0;
}

.select-shape-field .form-item-checkbox label {
	padding-left: 0;
	font-size: 22px;
	cursor: pointer;
    display: block;
}

.select-shape-field .form-item-checkbox label:before {
	display: inline-block;
	position: static;
	vertical-align: -2px;
	margin-right: 10px;
}

.select-paver-field,
.select-liner-field,
.select-cover-field {
	list-style: none;
	padding: 0;
	margin: 0;
}

.select-paver-field > li + li,
.select-liner-field > li + li,
.select-cover-field > li + li {
	margin-top: 10px;
}

.select-paver-field .form-item-checkbox,
.select-liner-field .form-item-checkbox,
.select-cover-field .form-item-checkbox {
	padding-left: 0;
}

.select-paver-field img,
.select-liner-field img,
.select-cover-field img {
	width: 140px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
}

.select-paver-field .form-item-checkbox label,
.select-liner-field .form-item-checkbox label,
.select-cover-field .form-item-checkbox label {
	font-size: 18px;
	padding-left: 0;
	cursor: pointer;
	width: 100%;
}

.select-liner-field .form-item-checkbox label,
.select-cover-field .form-item-checkbox label {
	font-size: 15px;
}

.select-paver-field .form-item-checkbox label:before,
.select-liner-field .form-item-checkbox label:before,
.select-cover-field .form-item-checkbox label:before {
	width: 140px;
	height: 100%;
	top: 0;
	left: 0;
	border: 8px solid #008E9B;
	border: 8px solid rgba(0,142,155,.3);
	background-color: rgba(255,255,255,.7)!important;
	background-image: url(../images/check-tan@2x.png);
	background-size: 88px 72px;
	border-radius: 0;
	opacity: 0;
}

.select-liner-field .form-item-checkbox label:before,
.select-cover-field .form-item-checkbox label:before {
	background-size: 57px 44px;
}

.select-paver-field .form-item-checkbox label span,
.select-liner-field .form-item-checkbox label span,
.select-cover-field .form-item-checkbox label span {
	display: inline-block;
	vertical-align: middle;
	max-width: calc(100% - 160px);
}

.select-paver-field .form-item-checkbox input:checked + label:before,
.select-liner-field .form-item-checkbox input:checked + label:before,
.select-cover-field .form-item-checkbox input:checked + label:before {
	opacity: 1;
}

.configurator-form-step h3 {
	color: #008E9B;
	font-size: 26px;
	margin: 0 0 10px;
}

.configurator-form-step .select-cover-field + h3 {
	margin-top: 30px;
}

.configurator-footer-nav {
	border-top: 1px solid #008E9B;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 10;
	width: 100%;
	padding: 20px 0;
	background: #FFF;
}

.configurator-arrows {
	width: 387px;
	padding: 0 40px;
	float: left;
	padding-right: 65px;
}

.configurator-arrows button {
	border: 2px solid #004895;
	background: #004895;
	color: #FFF;
	border-radius: 20px;
	line-height: 20px;
	padding: 8px 28px;
	font-size: 15px;
	text-transform: uppercase;
}

.configurator-arrows button:after {
	content: '';
	width: 17px;
	height: 17px;
	display: inline-block;
	vertical-align: middle;
	margin-left: 7px;
	background: url(../images/next.svg) no-repeat center;
	background-size: 100%;
}

.configurator-arrows button:hover {
	background-color: #033972;
}

.configurator-arrows button.prev:after {
	display: none;
}

.configurator-arrows button.prev {
	float: left;
}

.configurator-arrows button.next {
	float: right;
}

.configurator-arrows button.prev:before {
	content: '';
	width: 17px;
	height: 17px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 7px;
	background: url(../images/next.svg) no-repeat center;
	transform: rotate(180deg);
	background-size: 100%;
}

.configurator-arrows button:disabled,
.configurator-arrows button.prev {
	border-color: #ABABAB!important;
	background-color: #FFF!important;
	color: #ABABAB!important;
}

.configurator-arrows button:disabled:before,
.configurator-arrows button:disabled:after,
.configurator-arrows button.prev:before,
.configurator-arrows button.prev:after {
	background-image: url(../images/next-alt.svg);
}

.configurator-arrows button.prev:hover {
	background-color: #ECECEC!important;
}

.configurator-menu {
	float: right;
	width: 100%;
	width: calc(100% - 440px);
	padding-right: 55px;
	position: relative;
}

#magic-line {
    position: absolute;
    top: 100%;
	margin-top: 5px;
    left: 0;
    width: 100px;
    height: 25px;
    pointer-events: none;
}

#magic-line:before {
	content: '';
	height: 18px;
	background: #008E9B;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
}

#magic-line span {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 50px 7px 50px;
	border-color: transparent transparent #008E9B transparent;
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	z-index: 1;
}

.configurator-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: space-between;
}

.configurator-menu ul li {
	cursor: pointer;
	font-size: 22px;
	color: #004895;
	text-transform: uppercase;
	padding: 2px 0 1px;
}

.configurator-menu ul li span:not(.hide):before {
	content: '';
	display: inline-block;
	margin-right: 5px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	vertical-align: baseline;
	height: 28px;
}

.configurator-menu ul li:nth-child(1) span:not(.hide):before {
	background-image: url(../images/menu/shape.svg);
	background-size: 28px 20px;
	width: 28px;
	background-position: 0px 8px;
}

.configurator-menu ul li:nth-child(2) span:not(.hide):before {
	background-image: url(../images/menu/paver.svg);
	width: 22px;
	background-size: 22px 22px;
	background-position: 0px 5px;
}

.configurator-menu ul li:nth-child(3) span:not(.hide):before {
	background-image: url(../images/menu/liner.svg);
	width: 48px;
	background-size: 48px 28px;
}

.configurator-menu ul li:nth-child(4) span:not(.hide):before {
	background-image: url(../images/menu/cover.svg);
	width: 48px;
	background-size: 48px 28px;
}

.configurator-menu ul li:nth-child(5) span:not(.hide):before {
	background-image: url(../images/menu/result.svg);
	width: 19px;
	background-size: 19px 19px;
	background-position: 0px 9px;
}

.configurator-menu ul li span:not(.hide) {
	display: block;
}

.configurator-menu ul li.magic-line {
	width: 100%;
}

.result-block {
	display: none;
	height: calc(100vh - 214px);
    max-height: 800px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	background: #FFF;
	padding: 30px;
}

.result-block-content {
	max-width: 832px;
	margin: 0 auto;
	color: #363636;
	line-height: 1.8;
}

.result-logo {
	max-width: 294px;
	margin: 0 0 20px;
}

.result-actions ul li .share-buttons {
    right: 52px;
    top: auto;
    bottom: 100%;
    margin-bottom: 10px;
}

.result-block-content h2,
.print-only-result h2 {
	color: #0074B9;
	font-size: 80px;
	margin: 0 0 15px;
}

.result-note {
	margin: 30px 0 0;
}

.result-block-content .result-message p span.url {
  font-size: 20px;
}

.start-over {
	display: inline-block;
	color: #363636;
	text-decoration: underline;
	text-transform: uppercase;
	font-size: 21px;
}

.start-over:before {
	content: '';
	width: 25px;
	height: 20px;
	background: url(../images/result/restart.svg) no-repeat center;
	background-size: 100%;
	display: inline-block;
	vertical-align: middle;
	margin-right: 8px;
}

.start-over:hover {
	color: #0074B9;
}

.result-actions {
	margin: 30px 0;
}

.result-actions ul {
	padding: 0;
	margin: 0 -10px;
	list-style: none;
}

.result-actions ul li {
	float: left;
	padding: 0 10px;
	width: 33.3333%;
	position: relative;
}

.result-actions ul li > a {
	display: inline-block;
	font-size: 21px;
	text-transform: uppercase;
	text-decoration: none!important;
	border-radius: 100px;
	padding: 17px 35px;
	color: #FFF!important;
	min-width: 210px;
	text-align: center;
}

.result-actions ul li > a:before {
	content: '';
	display: inline-block;
	vertical-align: -5px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	margin-right: 10px;
}

.result-actions ul li.result-action-share > a {
	background-color: #FFF;
	border: 2px solid #0074B9;
	color: #0074B9!important;
	padding-top: 15px;
	padding-bottom: 15px;
}

.result-actions ul li.result-action-share > a:hover {
	background-color: #f0f0f0;
}

.result-actions ul li.result-action-share > a:before {
	background-image: url(../images/result/share.svg);
	width: 26px;
	height: 25px;
}

.result-actions ul li.result-action-email a {
	background-color: #0074B9;
}

.result-actions ul li.result-action-email a:hover {
	background-color: #026CAB;
}

.result-actions ul li.result-action-email a:before {
	background-image: url(../images/result/email.svg);
	width: 32px;
	height: 24px;
}

.result-actions ul li.result-action-print a {
	background-color: #008E9B;
}

.result-actions ul li.result-action-print a:hover {
	background-color: #007C87;
}

.result-actions ul li.result-action-print a:before {
	background-image: url(../images/result/print.svg);
	width: 31px;
	height: 25px;
}

body.step-result {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f0f0f0+0,ffffff+100 */
	background: #f0f0f0; /* Old browsers */
	background: -moz-linear-gradient(top,  #f0f0f0 0%, #ffffff 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #f0f0f0 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #f0f0f0 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

body.step-result .result-block {
	display: block;
}

body.step-result .configurator-step {
	display: none;
}

body.step-result .frame-title h2,
body.step-result .frame-title .text {
	display: none;
}

.frame-title h2 i,
.print-only-result h2 {
	display: none;
	font-style: normal;
}

body.step-result .logo {
	background-color: transparent;
	/*width: 290px;*/
	width: 200px;
	top: 100px;
}

body.step-result .configurator-arrows button.next {
	display: none;
}

.print-only-result {
	display: none;
	padding: 30px;
	background: #FFF;
}

.print-only-result table,
.print-only-result table td {
	border: none;
}

.print-only-result .print-cov-img:not(.visible) {
	display: none;
}

.print-pool-details {
	margin: 30px 0;
}

.print-pool-details strong {
	display: block;
}

.portrait-warning {
	display: none;
	background: #008B97;
	text-align: center;
	color: #FFF;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
}

.portrait-warning .text {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 2;
	padding: 30px;
}

.portrait-warning .text button,
.portrait-warning .text .h2 {
	margin: 0 0 30px;
	font-size: 28px;
	line-height: 1.4;
}

.portrait-warning .text button { margin-top: 2em;}

.portrait-warning .image {
	max-width: 200px;
	margin: 0 auto 15px;
}

.share-page .main {
	padding-top: 100px;
}
.playpause {
    background-image:url(../images/replay.png);
    background-repeat:no-repeat;
    width:20%;
    height:20%;
    position:absolute;
    left:0%;
    right:0%;
    top:0%;
    bottom:0%;
    margin:auto;
    background-size:contain;
    background-position: center;
z-index:10;
display:none;
}
@media print {
	body.step-result .print-only-result {
		display: block;
	}
	
	.frame-title {
		display: none;
	}
	
	body {
		background: #FFF!important;
	}
	
	.sidebar {
		float: none;
		padding: 30px;
		width: auto;
	}
	
	.logo {
		width: 140px!important;
		position: static!important;
	}
	
	.main {
		padding: 0;
	}
	
	body.step-result .result-block {
		display: none!important;
	}
	
	.configurator-footer-nav {
		display: none;
	}
	
	.configurator-form {
		display: none!important;
	}
}

@media screen and (max-width: 1599px) {
	.frame-title h2 {
		font-size: 30px;
	}
	
	.configurator-menu ul li {
		font-size: 18px;
	}
    
/*
    .gorilla-video video {
		width: 130%!important;
		left: -15%;
	}
*/
}

@media screen and (max-width: 1519px) {
    .welcome-slide .text h1 {
        margin-bottom: 10px;
    }
    
    .welcome-slide .text {
        margin-bottom: 30px;
    }
    
    .form-actions {
        margin-top: 25px;
    }
}

@media screen and (max-width: 1465px) {
	.configurator-menu ul li span.hide {
		display: none;
	}
}

@media screen and (max-width: 1390px) {
/*
    .gorilla-video video {
		width: 140%!important;
		left: -20%;
	}
*/
	.welcome-slide .text {
		font-size: 16px;
	}
	
	.welcome-slide .text h1 {
		font-size: 26px;
		margin-bottom: 35px;
	}
	
	.welcome-slide .text h1 img {
		width: 160px;
	}
	
	.welcome-slide .text h2 {
		font-size: 32px;
	}
	
	.welcome-frame .logo, .welcome-frame .whitelabel-sidebar  {
		width: 210px;
	}
	
	.sidebar {
		width: 270px;
		padding: 20px 0 20px 15px;
	}
	
	.logo {
		top: 20px;
		left: 20px;
		width: 120px;
	}
	
	.main {
		padding-left: 290px;
		padding-right: 20px;
	}
	
	.welcome-slide {
		padding-top: 20px;
	}
	
	.frame:before {
		left: 260px;
		top: 20px;
		height: calc(100% - 95px);
	}
	
	.button {
		font-size: 16px;
		padding: 10px 25px;
		min-width: auto;
	}
	
	.form-actions {
		margin-top: 30px;
	}
	
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="tel"],
	input[type="number"],
	input[type="file"],
	textarea,
	select {
		font-size: 16px;
		line-height: 24px;
		padding: 12px 20px;
	}
	
	.form-item-checkbox {
		padding-left: 20px;
	}
	
	.loader.center .loader-logo .image > img {
		max-height: 132px;
	}
	
	.preloader-logo-top span {
		height: 80px;
	}
	
	.preloader-logo-top span:nth-child(1) {
		width: 34px;
		transform: translateX(-34px);
	}

	.preloader-logo-top span:nth-child(2) {
		width: 134px;
		margin-left: -6px;
		transform: translateX(-45px);
	}

	.preloader-logo-top span:nth-child(3) {
		width: 44px;
		transform: translateX(-160px);
	}

	.preloader-logo-top span:nth-child(4) {
		width: 24px;
		margin-right: 15px;
		transform: translateX(-220px);
	}

	.preloader-logo-top span:nth-child(5) {
		width: 34px;
		transform: translateX(-230px);
	}

	.preloader-logo-top span:nth-child(6) {
		width: 115px;
		margin-left: -6px;
		transform: translateX(-330px);
	}

	.preloader-logo-top span:nth-child(7) {
		width: 17px;
		right: -17px;
	}
	
	.loader-logo .image .text-inner {
		padding-right: 17px;
		padding-left: 25px;
	}
	
	.preloader-logo-top {
		padding-top: 17px;
	}
	
	.showtext .loader-logo .image .text {
		width: 430px;
	}
	
	.preloader-logo-bottom span {
		height: 32px;
		margin-right: 5px;
	}
	
	.preloader-logo-bottom span:nth-child(1),
	.preloader-logo-bottom span:nth-child(8) {
		width: 19px;
		transform: translateX(-19px);
	}

	.preloader-logo-bottom span:nth-child(2),
	.preloader-logo-bottom span:nth-child(9) {
		width: 23px;
		transform: translateX(-46px);
	}

	.preloader-logo-bottom span:nth-child(3),
	.preloader-logo-bottom span:nth-child(10) {
		width: 17px;
		margin-right: 15px;
		transform: translateX(-110px);
	}

	.preloader-logo-bottom span:nth-child(4),
	.preloader-logo-bottom span:nth-child(11) {
		width: 32px;
		transform: translateX(-170px);
	}

	.preloader-logo-bottom span:nth-child(5),
	.preloader-logo-bottom span:nth-child(12) {
		width: 26px;
		transform: translateX(-220px);
	}

	.preloader-logo-bottom span:nth-child(6) {
		width: 17px;
		transform: translateX(-260px);
	}

	.preloader-logo-bottom span:nth-child(7) {
		width: 5px;
		margin-right: 15px;
		transform: translateX(-300px);
	}

	.preloader-logo-bottom span:nth-child(8) {
		transform: translateX(-340px);
	}

	.preloader-logo-bottom span:nth-child(9) {
		transform: translateX(-386px);
	}

	.preloader-logo-bottom span:nth-child(10) {
		transform: translateX(-430px);
	}

	.preloader-logo-bottom span:nth-child(11) {
		transform: translateX(-490px);
	}

	.preloader-logo-bottom span:nth-child(12) {
		transform: translateX(-540px);
	}

	.preloader-logo-bottom span:nth-child(13) {
		width: 13px;
		margin-right: 1px;
		transform: translateX(-600px);
	}

	.preloader-logo-bottom span:nth-child(14) {
		width: 24px;
		margin-right: 0;
		transform: translateX(-640px);
	}

	.preloader-logo-bottom span:nth-child(15) {
		width: 5px;
		margin-right: 0;
		transform: translateX(-660px);
	}
	
	.preloader-logo-bottom {
		padding-bottom: 17px;
		margin-top: 20px;
	}
	
	body {
		font-size: 16px;
	}
	
	.footer {
		padding: 12px 15px;
	}
	
	.frame-title {
		padding: 20px 0;
	}
	
	.frame-title h2 {
		font-size: 24px;
	}
	
	ul.top-actions {
		margin-top: 0;
	}
	
	.configurator-form {
		padding-left: 4px;
		margin-top: 145px;
		max-height: calc(100vh - 274px);
	}
	
	.select-shape-field {
		max-width: 170px;
	}
	
	.configurator-arrows {
		width: 290px;
		padding: 0 65px 0 35px!important;
	}
	
	.configurator-arrows button {
		font-size: 0px;
	}
	
	.configurator-menu {
		width: calc(100% - 290px);
		padding-right: 20px;
	}
	
	.configurator-arrows button:after,
	.configurator-arrows button:before {
		margin: 0!important;
	}
	
	.configurator-process {
		padding-bottom: 70px;
	}
	
	.configurator-step .image {
		height: calc(100vh - 180px);
	}
	
	.configurator-footer-nav {
		padding: 15px 0;
	}
	
	.select-shape-field .form-item-checkbox label {
		font-size: 18px;
	}
	
	.select-paver-field img,
	.select-liner-field img,
	.select-cover-field img {
		width: 80px;
	}
	
	.select-paver-field .form-item-checkbox label:before,
	.select-liner-field .form-item-checkbox label:before,
	.select-cover-field .form-item-checkbox label:before {
		width: 80px;
		border-width: 5px;
		background-size: 50px 41px;
	}
	
	.select-liner-field .form-item-checkbox label:before,
	.select-cover-field .form-item-checkbox label:before {
		background-size: 37px 30px;
	}
	
	.select-paver-field .form-item-checkbox label span,
	.select-liner-field .form-item-checkbox label span,
	.select-cover-field .form-item-checkbox label span {
		max-width: calc(100% - 95px);
	}
	
	.select-paver-field .form-item-checkbox label,
	.select-liner-field .form-item-checkbox label,
	.select-cover-field .form-item-checkbox label {
		font-size: 12px;
	}
	
	.frame-title p {
		font-size: 12px;
		margin-bottom: -18px;
	}
	
	.configurator-form-step h3 {
		font-size: 20px;
	}
	
	.gorilla-video video {
		width: 150%!important;
		left: -25%;
	}
	
	body.step-result .frame-title .text {
		display: none;
	}
	
	ul.top-actions li + li {
		margin-left: 25px;
	}
	
	ul.top-actions li {
		font-size: 14px;
		line-height: 22px;
	}
	
	ul.top-actions li.top-action-share > a:before {
		width: 21px;
		height: 20px;
	}
	
	ul.top-actions li.top-action-email > a:before {
		width: 25px;
		height: 19px;
	}
	
	ul.top-actions li.top-action-print > a:before {
		width: 25px;
		height: 20px;
	}
	
	ul.top-actions li.top-action-retailer > a:before {
		width: 15px;
		height: 22px;
	}
	
	body.step-result .logo {
		width: 200px;
		top: 70px;
	}
	
	.result-block {
		padding: 20px;
		height: calc(100vh - 160px);
	}
	
	.result-logo {
		max-width: 200px;
		margin: 0 0 20px;
	}
	
	.result-block-content h2,
	.print-only-result h2 {
		font-size: 48px;
	}
	
	.result-note {
		margin-top: 35px;
	}
	
	.result-actions ul li > a {
		font-size: 16px;
		min-width: auto;
		width: 100%;
	}
	
	.share-buttons > a {
		width: 32px;
		height: 32px;
	}
	
	.share-buttons {
		width: 146px;
		padding: 10px;
		margin-right: 15px;
		top: -15px;
	}
	
	.result-actions ul li .share-buttons {
		right: 28px;
		top: auto;
		bottom: 100%;
		margin-bottom: 10px;
	}
}

@media screen and (orientation:portrait) and (max-width: 1024px) {
	.portrait-warning {
		display: block;
	}
}

@media screen and (max-width: 991px) {
	body {
		font-size: 14px;
	}
	
	.sidebar {
		padding: 15px 15px;
		width: 240px;
	}
	
	.welcome-frame .logo, .welcome-frame .whitelabel-sidebar  {
		width: 200px;
	}
	
	.logo {
		top: 15px;
		left: 15px;
		width: 100px;
	}
	
	.loader.center .loader-logo .image > img {
		max-height: 86px;
	}
	
	.preloader-logo-top span {
		height: 32px;
	}
	
	.preloader-logo-top span:nth-child(1) {
		width: 14px;
		transform: translateX(-34px);
	}

	.preloader-logo-top span:nth-child(2) {
		width: 53px;
		margin-left: 0px;
		transform: translateX(-45px);
	}

	.preloader-logo-top span:nth-child(3) {
		width: 18px;
		transform: translateX(-160px);
	}

	.preloader-logo-top span:nth-child(4) {
		width: 9px;
		margin-right: 10px;
		margin-left: 4px;
		transform: translateX(-220px);
	}

	.preloader-logo-top span:nth-child(5) {
		width: 14px;
		transform: translateX(-230px);
	}

	.preloader-logo-top span:nth-child(6) {
		width: 46px;
		margin-left: 0px;
		transform: translateX(-330px);
	}

	.preloader-logo-top span:nth-child(7) {
		width: 10px;
		right: -10px;
	}
	
	.loader-logo .image .text-inner {
		padding-right: 10px;
		padding-left: 15px;
	}
	
	.preloader-logo-top {
		padding-top: 10px;
	}
	
	.showtext .loader-logo .image .text {
		width: 198px;
	}
	
	.preloader-logo-bottom span {
		height: 12px;
		margin-right: 3px;
	}
	
	.preloader-logo-bottom span:nth-child(1),
	.preloader-logo-bottom span:nth-child(8) {
		width: 7px;
		transform: translateX(-19px);
	}

	.preloader-logo-bottom span:nth-child(2),
	.preloader-logo-bottom span:nth-child(9) {
		width: 9px;
		transform: translateX(-46px);
	}

	.preloader-logo-bottom span:nth-child(3),
	.preloader-logo-bottom span:nth-child(10) {
		width: 6px;
		margin-right: 10px;
		transform: translateX(-90px);
	}

	.preloader-logo-bottom span:nth-child(4),
	.preloader-logo-bottom span:nth-child(11) {
		width: 12px;
		transform: translateX(-70px);
	}

	.preloader-logo-bottom span:nth-child(5),
	.preloader-logo-bottom span:nth-child(12) {
		width: 10px;
		transform: translateX(-120px);
	}

	.preloader-logo-bottom span:nth-child(6) {
		width: 6px;
		transform: translateX(-160px);
	}

	.preloader-logo-bottom span:nth-child(7) {
		width: 2px;
		margin-right: 10px;
		transform: translateX(-200px);
	}

	.preloader-logo-bottom span:nth-child(8) {
		transform: translateX(-140px);
	}

	.preloader-logo-bottom span:nth-child(9) {
		transform: translateX(-186px);
	}

	.preloader-logo-bottom span:nth-child(10) {
		transform: translateX(-230px);
	}

	.preloader-logo-bottom span:nth-child(11) {
		transform: translateX(-290px);
	}

	.preloader-logo-bottom span:nth-child(12) {
		transform: translateX(-240px);
	}

	.preloader-logo-bottom span:nth-child(13) {
		width: 5px;
		margin-right: 1px;
		transform: translateX(-300px);
	}

	.preloader-logo-bottom span:nth-child(14) {
		width: 9px;
		margin-right: 0;
		transform: translateX(-340px);
	}

	.preloader-logo-bottom span:nth-child(15) {
		width: 2px;
		margin-right: 0;
		transform: translateX(-360px);
	}
	
	.preloader-logo-bottom {
		padding-bottom: 10px;
		margin-top: 12px;
	}
	
	.portrait-warning .text .h2 {
		font-size: 21px;
	}
	
	.portrait-warning .image {
		max-width: 160px;
	}
	
	.footer {
		padding: 5px 15px;
	}
	
	.sidebar {
		width: 200px;
	}
	
	.welcome-frame .logo, .welcome-frame .whitelabel-sidebar  {
		width: 160px;
	}
	
	.main {
		padding-left: 200px;
		padding-right: 15px;
	}
	
	.frame:before {
		display: none;
	}
	
	p {
		margin-bottom: 15px;
	}
	
	.welcome-slide .text h1 {
		font-size: 20px;
		margin-bottom: 25px;
	}
	
	.welcome-slide .text h1 img {
		width: 140px;
	}
	
	.welcome-slide .text h2 {
		font-size: 22px;
	}
	
	.welcome-slide .text {
		font-size: 14px;
		margin-bottom: 30px;
	}
	
	.form-item-checkbox {
		padding-left: 0;
	}
	
	.form-item-checkbox label {
		font-size: 11px;
	}
	
	.form-item-checkbox label:before {
		top: -2px;
	}
	
	.configurator-arrows button {
		padding: 6px 7.5px;
	}
	
	.configurator-footer-nav {
		padding: 5px 0;
	}
	
	.configurator-arrows {
		width: 200px;
		padding-top: 4px!important;
	}
	
	.configurator-menu {
		width: calc(100% - 200px);
		padding-right: 15px;
	}
	
	.configurator-menu ul li {
		font-size: 14px;
		text-align: center;
		padding: 0;
	}
	
	.configurator-menu ul li span:not(.hide):before {
		display: block;
		height: 20px;
		margin: 0 auto 3px;
		background-position: center bottom!important;
	}
	
	.configurator-menu ul li:nth-child(1) span:not(.hide):before {
		width: 23px;
		background-size: 23px 16px;
	}
	
	.configurator-menu ul li:nth-child(2) span:not(.hide):before {
		width: 17px;
		background-size: 17px 17px;
	}
	
	.configurator-menu ul li:nth-child(3) span:not(.hide):before {
		width: 35px;
		background-size: 35px 20px;
	}
	
	.configurator-menu ul li:nth-child(4) span:not(.hide):before {
		width: 34px;
		background-size: 34px 20px;
	}
	
	.configurator-menu ul li:nth-child(5) span:not(.hide):before {
		width: 16px;
		background-size: 16px 16px;
	}
	
	#magic-line {
		margin-top: -3px;
	}
	
	.configurator-process {
		padding-bottom: 55px;
	}
	
	.logo {
		width: 70px;
	}
	
	.configurator-form {
		padding-left: 1px;
		margin-top: 85px;
		max-height: calc(100vh - 170px);
	}
	
	.frame-title {
		padding: 15px 0;
	}
	
	.frame-title h2 {
		font-size: 16px;
	}
	
	ul.top-actions li {
		font-size: 12px;
	}
	
	.configurator-step .image {
		height: calc(100vh - 120px);
	}
	
	.select-shape-field .form-item-checkbox label {
		font-size: 15px;
	}
	
	.select-shape-field .form-item-checkbox label:before {
		vertical-align: -4px;
	}
	
	.select-shape-field {
		max-width: 135px;
	}
	
	.select-paver-field img,
	.select-liner-field img,
	.select-cover-field img {
		width: 60px;
	}
	
	.select-paver-field .form-item-checkbox label:before,
	.select-liner-field .form-item-checkbox label:before,
	.select-cover-field .form-item-checkbox label:before {
		width: 60px;
	}
	
	.select-paver-field .form-item-checkbox label span {
		max-width: calc(100% - 75px);
	}
	
	.select-liner-field .form-item-checkbox label span,
	.select-cover-field .form-item-checkbox label span {
		display: block;
		max-width: none;
	}
	
	.select-liner-field .form-item-checkbox label img,
	.select-cover-field .form-item-checkbox label img {

		display: block;
		width: 100px;
	}
	
	.select-liner-field .form-item-checkbox label:before,
	.select-cover-field .form-item-checkbox label:before {
		width: 100px;
		height: 51px;
	}
	
	.frame-title p {
		display: none;
	}
	
	.form-item-checkbox input {
		left: 0;
	}
	
	.configurator-form-step h3 {
		font-size: 16px;
	}
	
	.gorilla-btn {
		display: none!important;
	}
	
	body.step-result .logo {
		width: 160px;
		top: 55px;
	}
	
	.result-logo {
		max-width: 140px;
	}
	
	.result-block-content h2,
	.print-only-result h2 {
		font-size: 36px;
	}
	
	.result-block {
		padding: 15px;
		height: calc(100vh - 120px);
	}
	
	.result-actions ul li > a {
		font-size: 13px;
		padding: 10px 20px;
	}
	
	.result-actions ul li.result-action-share > a {
		padding-top: 8px;
		padding-bottom: 8px;
	}
	
	.result-actions ul li.result-action-share > a:before {
		width: 21px;
		height: 20px;
	}
	
	.result-actions ul li.result-action-email a:before {
		width: 27px;
		height: 20px;
	}
	
	.result-actions ul li.result-action-print a:before {
		width: 25px;
		height: 20px;
	}
	
	.start-over {
		font-size: 16px;
	}
	
	.start-over:before {
		width: 20px;
		height: 16px;
	}
	
	.share-buttons {
		right: auto;
		left: 0;
		top: 100%;
		margin: 10px 0 0;
	}
	
	.share-page .main {
		padding-top: 55px;
	}
	
	.share-page .row > div {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: 10px;
	}
}