html, body{overflow-x:hidden; height: 100vh; background-color: #e9e9e9;}
p, h2, li{color: #050102 !important;}
.imgCarousel{width: 100%; position: relative;} /* margin-top: 10%; */
.hotspot{position: fixed;}
.hide{display: none;}
.imgsqnc{margin: auto;}
nav{background-color: #52778b !important; color: white !important; width:100%; z-index:999; height: 55px;}
nav .container-fluid{ padding-right: 5%; margin-left: 5%;}
.icon{overflow: hidden; background: url("../images/sprite.png") no-repeat; text-indent: -999px;}
.triangle_up{width: 33px; height: 16px; max-width: 33px; max-height: 16px; background-position: -122px -5px;}
/* .navbar-nav > li a{color: #050102; font-weight: bold; text-transform: uppercase; line-height: 16px; border-bottom: 5px solid #050102; font-family: 'UniversLTW01-67BoldCn', sans-serif; font-size: 1.188em; letter-spacing: 0.02em;} */
.navbar-nav > li a{color: #050102; font-weight: bold; text-transform: uppercase; line-height: 16px; font-family: 'UniversLTW01-67BoldCn', sans-serif; font-size: 1.188em; letter-spacing: 0.02em;}
.navbar-collapse{flex-grow: 0 !important;}
.navbar-nav > li{position: relative; overflow: visible; display: block;}
.navbar-nav > li .triangle_up{display: block; visibility: hidden; position: absolute; left: 50%; bottom: -14px; margin-left: -16px;}
/* .navbar-nav > li:hover a{color: #fff; border-bottom: 5px solid #fff;} */
.navbar-nav > li:hover a{color: #fff;}
/*.navbar-nav > li:hover .triangle_up{visibility: visible;}*/
.cloudimage-360-hotspot-custom-icon{background: #D6292B33 !important; cursor: pointer !important; border: 0px solid #0000033b !important;}
.cloudimage-360-hotspot-custom-icon::before{background-color: #D6292B !important;cursor: pointer !important; width: 24px !important; height: 24px !important; line-height: 1.6 !important;}
.cloudimage-360-hotspot-popup {padding: 12px, 16px !important;border-radius: 10px !important;}
.cloudimage-360-popup-arrow,.cloudimage-360-popup-arrow::before {width: 36px !important; height: 36px !important; z-index: -1 !important
}
.cloudimage-360-modal-title {font-family: 'UniversLTW01-57Cn', sans-serif !important; font-size: 1rem !important; margin: 4px !important; color: #4a4a4a !important;}
.cloudimage-360-modal-description {font-family: 'UniversLTW01-57Cn', sans-serif !important;font-size: 14px !important; margin: 4px !important; color: #4a4a4a !important; line-height: 1.4 !important;}
.cloudimage-360-images-carousel { background-color: #ffffff !important;}
.cloudimage-360-carousel-image { min-height: 12px !important; max-height: 12px !important; margin: 4px !important; margin-bottom: 8px !important;}
.turntable__360-ground-line{position: fixed; width: 40%; left: 30%; top: 65%; height: 10px; overflow: visible;}
.modal-header{position: absolute; right: -20px; z-index: 9;background: #52778b; border-radius: 50px; top: -20px;}
.modal-header button{margin-left: -10px !important;}
.modal-header .btn-close{filter: invert(1);}
video{
width:100%;
height: auto;
z-index: 2; /* Ensure it's behind the video */
}
.test {
background-color: blue;
}
.main-img.invisible-png {
position: absolute; /* Position the image absolutely */
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1; /* Ensure it's behind the video */
visibility: hidden; /* Make it invisible */
}
/*.title{position: absolute; font-size: 32px; z-index:999; margin:auto;left: 5%; z-index:99; top: 5%; margin-top: 25px;}*/
.title-wrapper{position: relative; margin:auto; z-index:99; top: 5%; margin-top: 25px;margin-left: 5%;}
.title{font-size: 32px; font-family: 'UniversLTW01-67BoldCn', sans-serif; font-weight: 500; letter-spacing: -0.055em; word-spacing: 0.2em;}
.instruction{position: absolute; right: 5%; z-index:99; top: 5%;margin-top:25px;}
.instruction h2, .demo h2{font-size: 26px;}
/*.cloudimage-360{width: 1600px !important; height: 821px !important; margin: auto;}*/
footer{z-index: 990; position: fixed; bottom: 0; width: 100%; background-color: #353637 !important;padding-left:50px; padding-right: 50px; color: white !important;}
footer p{color: white !important;}
.onTop{z-index:9;}
.centerThis{display: flex; justify-content: center; align-items: center; height: 65%;}
.mobileThis{display: none !important;}
.deskThis{display: block !important;}
.demo{position: absolute; left: 5%; z-index: 99; bottom: 8%; }
.instructionMob, .demoMob, .mobOnly{display: none;}
ol{padding-left: 17px;}
ul{padding-left: 20px;}
h2{
font-weight: 500;
font-family: 'UniversLTW01-67BoldCn', sans-serif;
font-size: 28px;
text-transform: uppercase;
letter-spacing: -0.055em;
word-spacing: 70%;
}
/* iframe{width: 100%; aspect-ratio:16/9} */
.button-container {
display: flex;
justify-content: center;
align-items: center;
/* margin-top: 55px; */
}
.button {
display: inline-block;
padding: 12px 24px;
margin: 10px;
background-color: #ffffff;
color: #3E3E3E;
border: 2px solid #3E3E3E;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s, border-radius 0.3s;
font-weight: bold;
}
.button:hover {
background-color: #3E3E3E;
color: #ffffff;
border-radius: 6px;
}
.logo-image {
max-height: 40px;
}
/* new options -jtb */
/* .hotspot-legend {
z-index: 990;
flex: 1;
margin-top: 20px;
margin-right: 60px;
margin-left: 12px;
} */
.icon-list {
list-style: none; /* Removes the default bullets */
padding-left: 0;
}
/* Additional styling for list items if needed */
.icon-list li {
margin-bottom: 10px; /* Example margin */
}
label {
display: block;
margin-bottom: 10px;
}
.imgCarouselWrapper {
display: inline-block;
vertical-align: top;
margin-top: 20px;
z-index: 1;
/* flex: 3; */
margin-left: 5%;
margin-right: 5%;
}
.mainWrapper {
display: flex;
}
.active {
color: white;
/* border-bottom: 5px solid #ffffff !important; */
}
.aspect-ratio-container {
width: 100%;
position: relative;
padding-top: 46.874%; /* 1 / 2.1334 = 0.46873535 (46.874%) */
overflow: hidden;
}
.custom-iframe {
position: absolute !important;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.navbar-brand {
font-size: 32px;
font-weight: 700;
letter-spacing: 0.5px;
font-weight: bold;
color: white;
}
.subtitle{
font-size: 20px;
letter-spacing: -0.035em;
line-height: 26px;
text-transform: none;
font-family: 'UniversLTW01-57Cn', sans-serif;
display: inline;
}
.icon-list li {
font-size: 18px;
letter-spacing: -0.035em;
line-height: 26px;
text-transform: none;
font-family: 'UniversLTW01-57Cn', sans-serif;
}
.hotspot-legend {
position: absolute;
top: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.75); /* Opaque white background */
padding: 20px;
border-radius: 10px; /* Rounded corners */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.carousel-background{
background-image: url('../images/carousel/ETG-Background\ Only_00000.jpg');
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
}
.custom-button {
cursor: pointer;
font-size: 24px;
text-transform: none;
letter-spacing: -0.035em;
font-weight: bold;
/* line-height: 26px; */
}
.active-btn {
color: #00B698;
font-family: 'UniversLTW01-57Cn', sans-serif;
}
.inactive-btn {
color: #333333;
font-family: 'UniversLTW01-57Cn', sans-serif;
text-decoration: none;
}
.inactive-btn:hover {
color: #7A7B7D;
}
.front-border{
margin-right: 30px;
}
.side-borders{
margin-left: 10px;
margin-right: 10px;
}
.img-title{font-family: 'UniversLTW01-57Cn', sans-serif !important; font-size: 1rem !important; color: #4a4a4a !important; font-weight: 700 !important;}
.img-caption{font-family: 'UniversLTW01-57Cn', sans-serif !important;font-size: 14px !important; color: #4a4a4a !important; line-height: 1.4 !important;}
.disclaimer{
margin-left: 5%;
margin-left: 5%;
margin-right: 5%;
font-size: 18px;
letter-spacing: -0.035em;
font-family: 'UniversLTW01-57Cn', sans-serif;
}
/*Panellum*/
#panorama {
width: 100%;
height: 100%;
}
.custom-hotspot {
height: 35px;
width: 35px;
background: url('../../pannellum/infospot-icon.png') no-repeat center center;
background-size: cover;
}
div.custom-tooltip span {
visibility: hidden;
position: absolute;
border-radius: 10px;
background-color: #fff;
color: #000;
max-width: 200px;
padding: 5px 10px;
margin-left: -220px;
cursor: default;
box-shadow: 0px 4px 4px 0px #00000040;
font-family: 'UniversLTW01-57Cn', sans-serif !important;
color: #4a4a4a !important;
}
div.custom-tooltip span img {
height: 12px;
margin: 4px !important;
/* margin-bottom: 8px !important; */
}
div.custom-tooltip span h4 {
font-weight: 700;
line-height: 16px;
margin: 4px !important;
font-size: 1rem !important;
}
div.custom-tooltip span p {
font-size: 14px !important;
font-weight: 400;
margin: 4px !important;
line-height: 1.4 !important;
}
div.custom-tooltip:hover span {
visibility: visible;
}
div.custom-tooltip:hover span:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: #fff transparent transparent transparent;
bottom: -20px;
left: -10px;
margin: 0 50%;
}
.carousel-control-prev,
.carousel-control-next {
background-color: rgba(0,0,0,0.5);
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.carousel-control-prev{
transform: translateX(25%);
}
.carousel-control-next{
transform: translateX(-25%);
}
.modal-body {
height: 70vh;
overflow-y: auto; /* Add this to enable vertical scrolling if needed */
}
.modal-dialog {
width: fit-content; /* Allow the width to adjust dynamically */
max-width: 70vw; /* Disable max-width constraint */
}
/* @media(max-width: 1920px){
.cloudimage-360{width: 80% !important;}
}
@media(max-width: 1575px){
.cloudimage-360{width: 80% !important;}
.instruction{width: 20%;}
}
@media(max-width: 1066px){
.cloudimage-360{width: 800px !important;}
.title{left: 10%;}
.instruction{right: 3%;}
.title img{width: 70%;}
.instruction h2{font-size: 24px;}
.instruction li{font-size: 14px;}
.modal-dialog{max-width: 95%;}
.modal-dialog-centered{min-height: 60%;}
.instruction, .demo{display: none;}
.mobOnly{display: block;position: absolute; left: 12%; bottom: 8%;}
.mobOnly h2{font-size: 18px;}
.mobOnly p, .mobOnly li{font-size: 12px;}
.instructionMob{display: block;}
.demoMob{display: block;}
.mobHide{display: none;}
}
@media(max-width: 991px){
.navbar-toggler{display: none;}
}
@media(max-width: 800px){
.cloudimage-360{width: 99% !important;}
footer{padding-right: 10px; padding-left: 10px;}
.title{left: 0%; position: relative;}
.instruction{left: 0%;}
.imgCarousel{margin-top: 2% !important;}
.mobOnly{left: 4%}
}
@media(max-width: 765px){
.cloudimage-360-hotspot-custom-icon{display: none !important;}
.instruction{display: none !important;}
.title{font-size: 28px;}
.mobileThis{display: block !important;}
.deskThis{display: none !important;}
} */
@media(max-width: 650px){
/*.cloudimage-360{width: 650px !important;top: 75px;}*/
footer{padding-right: 10px; padding-left: 10px;}
/* .title{left: 3%;} */
.centerThis{height: 40%;}
}
@media(max-width: 550px){
/*.cloudimage-360{width: 400px !important;top: 75px;}*/
footer{padding-right: 10px; padding-left: 10px; font-size: 12px;}
footer img{height: 30px !important;}
/* .title{left: 3%;} */
}
@font-face {
font-family: 'UniversLTW01-67BoldCn';
src: url('../fonts/Univers 67 Condensed/Univers 67 Condensed Bold/Univers LT Std 67 Bold Condensed.woff') format('woff'),
url('../fonts/Univers 67 Condensed/Univers 67 Condensed Bold/Univers LT Std 67 Bold Condensed.woff2') format('woff2');
/* Add other font formats for wider browser support if available */
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'UniversLTW01-57Cn';
src: url('../fonts/Univers 57 Condensed/Univers 57 Condensed Regular/Univers 57 Condensed Regular.woff') format('woff'),
url('../fonts/Univers 57 Condensed/Univers 57 Condensed Regular/Univers 57 Condensed Regular.woff2') format('woff2');
/* Add other font formats for wider browser support if available */
font-weight: normal;
font-style: normal;
}