body { font-family: Roboto;}
.background-header { width: auto; height: 696px; object-fit: contain; background: url(../../html/theViewer/content/getstarted/background-theboundry.jpg);  position: relative; overflow: hidden; margin-top: 80px; }
.background-content { background: #ffffff; }
.background-companies { background: #f5f5f5; overflow: hidden; }
.background-youtube {  background: #ffffff; padding: 150px 0px 200px 0px;}
.copy-right { text-align: right; bottom: -75px; position: relative; padding-right: 15px; }
.copy-right > span { font-size: 17px; line-height: 1.65; text-align: center; color:#fff; font-weight: 300; font-style: normal; font-stretch: normal; vertical-align: sub; }
.top-header { margin: 0 auto; top: 25%; position: relative;}
#hero-header { text-align: center; margin: 0 auto; }
#hero-content { overflow: hidden; position: relative; top: -70px; }
#hero-header > header > h1 { width: 75%; margin: 0 auto; padding-bottom: 26px; text-shadow: 0 2px 40px #000000; font-size: 50px; font-weight: bold; line-height: 1.2; text-align: center; color: #ffffff; }
#hero-header > header > h2 { width: 55%; margin: 0 auto; padding-bottom: 55px; color: #fff; text-shadow: 0 2px 40px #000000; font-size: 28px; line-height: 1.43; }
.section-wrapper { padding-top: 130px; z-index:0;}
.section-padding { padding-bottom: 200px; padding-top: 130px;}
.get-started-btn { width: 200px; height: 48px; text-align:center; padding: 12px 28px 10px 28px; display: block; margin: 0 auto;color:#fff !important; border-radius: 5px; background-color: #00b7cb; font-size: 18px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; }
.get-started-btn:hover {}
.get-started-btn:visited { color:#fff !important; text-decoration: none; }
.content { text-align: center; }
.panos { text-align: center; }
.wrapper-content { background: #fff; box-shadow: 0px -46px 10px 0px rgba(0, 0, 0, 0.1); padding: 60px 20px 40px 20px; font-style: normal; font-stretch: normal; letter-spacing: normal; text-align: center;  }
.wrapper-content > h2 {font-size: 24px; font-weight: bold; line-height: normal; color: #111111;}
.wrapper-content > p { font-size: 17px; font-weight: normal; line-height: 1.65; color: #777777; min-height: 120px;}
.wrapper-logotypes {  display: flex; justify-content: center; align-items: center; }
.logotypes img { opacity: 0.5; max-width: 100%; }
#img-devices { text-align: right; display: block;}
.img-devices { display: none; }
#hero-companies { padding-bottom: 50px;}
.companies-header { text-align: center; padding-top: 30px;padding-bottom:20px; color: #111; }
.companies-header > h3 { font-size: 24px; font-weight: bold; }
.read-more { font-size: 17px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 1.65; letter-spacing: normal; text-align: center; color: #02c1d3; }
.content-description { margin-left: 70px; padding-bottom: 30px; }
.content-description > section > h2 { font-size: 35px; font-weight: bold; color: #cccccc; }
.content-description > section > h2+h2 { font-size: 24px; font-weight: bold; color: #343434; line-height: 1.35;}
.content-description > section > p { font-size: 17px !important; line-height: 1.47; letter-spacing: normal; font-family: Roboto !important; color: #343434 !important; text-transform: none !important; font-weight: normal !important; padding: 20px 0px 20px 0px !important;}
.content-description > section > h2+h2 > i { border-bottom: 4px solid #00b7cb; font-style: normal; }
.content-description ul { font-size: 17px; line-height: 2.12; color: #343434; list-style-type: none; padding: 0; max-width: 470px; }
.content-description li { border-bottom: solid 1px #cccccc; padding: 17px 0px 17px 0px; line-height: 1.47;}
.content-description li:last-child { border: none; }
.tick-icon { content: ""; background:url(../../html/theViewer/content/getstarted/tick.png); width:19px; height: 19px; vertical-align: middle; display: inline-block; margin-right: 11px; }
.editor { padding:0; margin:0; }
.editor a { margin: 0;}
.container { margin-bottom: 0;}
#youtube-editor {  }
#youtube-editor iframe { width: 755px; height: 424px; max-width: 100%; max-height: calc((100vw - 40px) / (16/9));}
#hero-editor > .row { position:relative;}
#hero-editor .wrap-link { position: absolute; left: 14px; bottom: -40px; }
.example-tour-header { text-align: center; }
.example-tour iframe { height: 100%; width: 100%; border: none;padding:0;margin:0;}
.example-tour { line-height:0; height: 535px;}
.example-tour-header > section > h2 { font-size: 48px; line-height: 1.5; text-align: center; color: #343434; }
.example-tour-header > section > img { width: 33.33333333%; }
.no-padding { padding: 0; margin: 0; }
.get-started-btn:hover { color:#fff !important; text-decoration: none; background: #00c7dd;}
.slider2 span { background: #000; color: #fff; padding: 1px 16px; border-radius: 6px; font-size: 15px; float: right;}
.slider1 > .copy-right { position: absolute; right: 0; bottom: 0; padding: 15px;}
.slider1 > .copy-right img { transform: scale(0.9);}
.slider1, .slider2 {display: none}
.slider1, .slider2  img {object-fit: contain; background-size: cover; background-position: center; background-repeat: no-repeat; }
img {vertical-align: middle;}
.slideshow-container { position: relative; margin: auto; }
.prev, .next {	cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; }
.next { right: 0; z-index:1; }
.prev { left:0; z-index: 1;}
.prev > span {	background:url(../../html/theViewer/content/getstarted/back-arrow.png); width: 20px;height: 38px;display: block;opacity: 0.6; }
.next > span {	background:url(../../html/theViewer/content/getstarted/next-arrow.png);	width: 20px;height: 38px;display: block;opacity: 0.6; }
.prev > span:hover, .next > span:hover {opacity: 1;}
.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; }
@-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} }
@keyframes fade { from {opacity: .4} to {opacity: 1}}

.platforms .prev {left: 0%;}
.platforms .next {right: 0%;}
.slider2 > img { height: 400px; }
.platforms .slideshow-container { padding: 30px 70px;}
.platforms .slider2 { width: 500px; display: inline-block; order:1;}
.platforms .prev > span {	background:url(../../html/theViewer/content/getstarted/back-arrow-black.png); width: 20px;height: 38px;display: block; }
.platforms .next > span {	background:url(../../html/theViewer/content/getstarted/next-arrow-black.png);	width: 20px;height: 38px;display: block; }
.platforms, .features { background: #f5f5f5;}
.platforms .dot-wrapper { display: none; }
.platform-description { display: inline-block; order: 0; position: absolute; width: 660px;}
.platform-description h2 { font-size: 36px; font-weight: bold; line-height: 1; text-align: center; color: #343434;}
.platform-description .wrapper p {width: 65%; text-align: center; margin: 0 auto; font-size: 17px;line-height: 1.47; color: #343434; padding-top: 36px;}
.platform-stor-icons > a > img { max-width: 100px; border-radius: 8px; padding: 4px; color: transparent !important;}
.platform-stor-icons { text-align: center; padding-top: 30px;}

/* The dots/bullets/indicators */
.dot-wrapper { text-align: center; position: absolute; bottom: 12px;left: 0; right: 0; }
.dot-wrapper .dot-element { cursor: pointer; height: 13px; width: 13px; margin: 0 2px; background-color: #ffffff75; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease;}
.dot-wrapper .active, .dot-element:hover { background-color: #fff;}
/*  MOBILE STYLES */
@media (min-width: 1400px) { .background-companies > .container {width: 1400px;	} .platforms > .container {	width: 1400px;	} }
@media (min-width: 1200px) {#img-devices {	padding-top: 100px;	} }
@media (min-width: 1200px) and (max-width: 1400px){	.platform-description{ 	width: 50% !important;	} }
@media only screen and (min-width: 300px) and (max-width: 580px) {	
	.background-header { background: url(../../html/theViewer/content/getstarted/background-theboundary-mobile-x2.jpg) no-repeat center/cover;	margin-top: 80px; height: 527px;}
	.top-header { top: 10%;	padding-bottom: 60px; }
	#hero-header > header > h1 {font-size: 26px !important;	line-height: 36px !important;width: 80%;}
	#hero-header > header > h2 {width: 73%;	font-size: 20px;text-align: center;	}
	#hero-content {	top: -20px;	}
	.copy-right {	padding: 0;	text-align: center;	}
	.slider1 > .copy-right > span {	font-size: 12px;vertical-align: middle;}
	.companies-header {	padding: 30px 30px 0px 30px; }
	.companies-header > h3 {line-height: 1.5;}
	.element-order-flex {display: flex;	flex-flow: column;	}
	.section-wrapper, .section-padding {	padding-top: 60px;	}
	.content-description {	margin-left: 0px;	}
	.content-description > section > h2 { font-size: 24px;	}
	.example-tour-header > section > h2 {font-size: 1.5em; }
	.platform-description h2 { font-size: 24px; }
	.slideshow-container { padding: 0 !important; }
	.platform-description .wrapper p { width: auto !important;}
	.platforms .prev, .platforms .next  { top: 95%; transform: scale(0.5); display: block;}
	#google-store-icon > img, #apple-store-icon > img{ max-width: 150px !important; margin: 0px 4px 22px 4px;}
	.example-tour-header > section > img { width: 80% !important;}
	.wrapper-logotypes { display: block; overflow: hidden; text-align: center;}
	.logotypes img { object-fit: scale-down;opacity: 0.5; width: 100%; height: 90px;}
	.slider2 span { position: absolute; bottom: 70px; right: 8px;}
	#youtube-editor {}
	.dot-wrapper { bottom: -42px;z-index:1;}
	.dot-wrapper .dot-element { background: #00b7cb91; transform: scale(0.8);}
	.dot-wrapper .active { background: #00b7cb;}
	.panos .prev, .panos .next { top: 108%; transform: scale(0.5);}
	.prev > span { background: url(../../html/theViewer/content/getstarted/back-arrow-blue.png); transform: scale(0.8); opacity:1; width: 20px; height: 36px;}
	.next > span { background: url(../../html/theViewer/content/getstarted/next-arrow-blue.png); transform: scale(0.8); opacity:1; width: 20px; height: 36px;}
	#logo-1 { display: contents; }
	#logo-1 img { width: 60%;}
	.platforms .dot-wrapper .dot-element { background: #1e1e1e;}
	.platforms .dot-wrapper { bottom: 19px; display: block; }
}
@media only screen and (max-width: 767px) {
	#img-devices {display: none;}
	.img-devices {	display: block;	}
	#youtube-editor {display: block;text-align: center;}
	#signup-free-3 {margin: 0 auto;	}
	.section-wrapper { padding-top:70px; padding-bottom: 70px;}
	#hero-editor .wrap-link { position:unset; position: relative;left:0; bottom: -30px;} 
}
@media only screen and (max-width: 991px) {
	.wrapper-content { 	box-shadow: 0px -6px 10px 0px rgba(0, 0, 0, 0.07);	}
	.content {	padding-bottom: 50px;	}
	.platform-description {	width: auto !important;	}
	.platforms .slideshow-container {	display: flex;	flex-flow: column;	}
	.platforms .slider2 { width: auto !important;margin: 0 auto;}
	.platform-description { position: relative !important;}
}
@media only screen and (min-width: 580px) and (max-width: 991px) {
	.platforms .prev, .platforms .next  { top: 70%;}
}
@media only screen and (min-width: 580px) and (max-width: 780px) {
	.background-header {background: url(../../html/theViewer/content/getstarted/background-theboundary-mobile-x2.jpg) no-repeat center/cover;margin-top: 80px;	}
	#hero-header > header > h1 {font-size:32px;	width: 100%;}
	#hero-header > header > h2 {font-size: 20px;width: 75%;	}
	.copy-right {text-align: center;	bottom: -125px;	}
	.example-tour-header > section > h2 {font-size: 34px;}
}
@media only screen and (min-width: 375px) and (max-width: 580px) {
	.background-header {	background: url(../../html/theViewer/content/getstarted/background-theboundary-mobile-x2.jpg) no-repeat center/cover;	margin-top: 80px;	}
}
@media only screen and (min-width: 767px) and (max-width: 1200px) {
	#img-devices {	position: relative;	top: 220px;	}
	
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
	#hero-header > header > h1 {font-size: 50px;width: 100%;	}
	#hero-header > header > h2 {width: 60%;}
	.platform-description {	width: 60% !important;	}
	.slider2 {	width: 40% !important;	}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	#hero-header > header > h1 {font-size: 45px;width: 100%;}
	#hero-header > header > h2 {width: 75%;}
	.copy-right {text-align: center;}
	.example-tour-header > section > h2 {font-size: 45px;}
	#hero-editor .wrap-link { bottom: -50px;} 
}