mo/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #fff;
    font-size: 1em;
    line-height: 1.4;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: none
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/*	==========================================================================
	Custom styles
	========================================================================== */
html, body {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   position: relative;
   background: #4c535a;
   /*background: #fff;*/
}
body{
	display: flex;
    align-items: center;
    background: #4c535a;
    /*opacity: 0;*/
    /*transition: opacity 0.15s;*/
    display: none;
}

/*body {*/
/*    animation: fadeInAnimation ease 0.15s;*/
/*    animation-iteration-count: 1;*/
/*    animation-fill-mode: forwards;*/
/*}*/
/*@keyframes fadeInAnimation {*/
/*    0% {*/
/*        opacity: 0;*/
/*    }*/
/*    100% {*/
/*        opacity: 1;*/
/*    }*/
/*}*/

#bg {
	/*overflow: scroll;*/
	position: relative;
	display: flex;
	padding: 45px 30px;
	flex-wrap: wrap;
    /*max-width: 1800px;*/
    /*margin-left: auto;*/
    /*margin-right: auto;*/
}
#bg .inner {
	position: relative;
	-webkit-overflow-scrolling: touch;
	display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap:10px;
}
#bg .inner .thumbnails{
	width:calc(16% - 10px);
	position: relative;
}
#bg .inner .thumbnails .tscroller{
	position: absolute;
    top: 0;
    left: 0;
    overflow: scroll;
    height: 100%;
}
#bg .inner .thumbnails .thumb_container{
    display: grid;
    grid-row-gap: 10px;
    overflow: hidden;
    justify-content: start;
}
#bg .inner .thumbnails .thumb_container div[type="button"], #bg .inner .thumbnails .thumb_container a[type="button"] {
	position:relative;	
}
#bg .inner .thumbnails .thumb_container p{
	background: #000000;
    padding: 8px 10px;
    margin: 0;
    color: #fff;
    /*margin-top: -36px;*/
    z-index: 10;
    position: absolute;
    bottom:0;
    width:100%;
}
#bg .inner .thumbnails .thumb_container p.thumb_cap, p.map_cap{
	display: flex;
    align-items: center;
    gap:6px;
}
#bg .inner .thumbnails .thumb_container p .d-number, p.map_cap .d-number{
    border-radius: 50%;
    border: 0;
    background: #ffffff;
    padding: 2px 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #000000;
    /*margin-right:3px;*/
    /*margin-top:3px;*/
    /*margin-bottom:3px;*/
}
#bg .inner .thumbnails .thumb_container p .d-number.pad0, p.map_cap .d-number.pad0{
    padding: 2px 10px
}
#bg .inner .thumbnails .thumb_container p .d-number.pad2, p.map_cap .d-number.pad2{
	padding: 2px 6px;
}
#bg .inner .thumbnails .thumb_container p .d-number.pad3, p.map_cap .d-number.pad3{
	padding: 2px 5px;
}
#bg .inner .thumbnails .thumb_container p .captxt, p.map_cap .captxt {

}
#downscroll {
    bottom: -34px;
    left: 0px;
    color: #fff;
    background: #000000;
    padding: 5px 10px;
    z-index: 30;
    position: absolute;
}
a#home_link {
    position: absolute;
    bottom: 15px;
    left: 22px;
    width: auto;
    background: #000000;
    padding: 6px 10px;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    border-radius: 0;
    border: 1px solid #fff;
    text-decoration: none;
}
#bg .inner .map{
	width:84%;
	position: relative;
}
#bg img {
	width: 100%;
	min-width: 100%;
	height: auto;
}

.logo {
	position: absolute;
	bottom: 15px;
	right: 15px;
	/*background: url('../img/SoundSeal_Logo_White_FINAL.svg') no-repeat;*/
	/*background-size: contain;*/
	width: 250px;
	height: 65px;
	
}
.logo img{
/*	filter: invert(99%) sepia(1%) saturate(59%) hue-rotate(169deg) brightness(121%) contrast(100%);*/
}

/*.logo.inside_logo{
    bottom: 50px;
    left: 15px;
}*/

#rightscroll, #rightscroll2 {
	display: none;
}
@media screen and (orientation:portrait) {
	#bg {
		height: 100vh;
		width: auto;
	}
	#bg img.background_img {
		height: 100vh;
		width: auto;
	}
	/*#rightscroll {*/
	/*	position: fixed;*/
	/*	diplay: block;*/
	/*	bottom: 15px;*/
	/*	right: 0px;*/
	/*	color: #fff;*/

	/*    background: #000000;*/
	/*    padding: 5px 10px;*/
	/*}*/
}
@media screen and (orientation:landscape) {
	#bg {
		height: auto;
		width: 100vw;
	}
	#bg img.background_img {
		min-height: 100%;
		/*min-width: 1280px;*/
		width: 100%;
		height: auto;
		position: relative;
	}
	/*#rightscroll {*/
	/*	position: fixed;*/
	/*	diplay: block;*/
	/*	bottom: 15px;*/
	/*	right: 0px;*/
	/*	color: #fff;*/

	/*    background: #000000;*/
	/*    padding: 5px 10px;*/
	/*}*/
}
@media (min-width: 1279px) and (orientation:landscape) {
	#bg .inner {
		width: 100%;
	}
	/*#rightscroll {*/
	/*	display: none!important;*/
	/*	visibility: hidden;*/
	/*}*/
}
button:focus, :focus {
	outline: none;
}
button, [type="button"] {
	-webkit-appearance: none;
	background: transparent;
	border: none;
	padding: 0;
	line-height: 1.2rem;
	text-align: left;
}
button:hover, [type="button"]:hover {
	cursor: pointer;
}
.popover, .popover-modal {
	border-radius: 50%;
    border: 0;
    background: #000000;
    padding: 2px 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
}
.popover.pad2, .popover-modal.pad2{
	padding: 2px 6px;
}
.popover.pad3, .popover-modal.pad3{
	padding: 2px 5px;
}
.popover:hover, .popover-modal:hover {
	color: #ffffff;
	text-decoration: none;
}
.popover {
	padding: 0;
}

.popover-modal.active{
    background-color: #a42c2a;
}

button.popover-modal.prev-modal, button.popover-modal.next-modal, a.popover-modal.prev-modal, a.popover-modal.next-modal{
    position: absolute;
    top: 50%;
    bottom: auto;
    width: auto;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1000;
    border-radius: 0;
    padding: 0;
    font-size: 28px;
}
button.popover-modal.prev-modal, a.popover-modal.prev-modal{
    right: auto;
    left: 18px;
}
button.popover-modal.next-modal, a.popover-modal.next-modal{
    left: auto;
    right: -19px;
}
button.popover-modal.prev-modal i, button.popover-modal.next-modal i, a.popover-modal.prev-modal i, a.popover-modal.next-modal i {
    padding: 15px 10px;
}
.modal.fade .modal-dialog {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s .2s, opacity .2s linear;
    transform: none;
}
.modal.show .modal-dialog {
    visibility: visible;
    opacity: 1;
    transition: opacity .2s linear;
    transform: none;
}
.popover-body {
	text-align: center;
}
.popover-body p {
	margin: 0 0 10px 0;
}
.popover-body a {
	color: #ffffff;
	border-bottom: 1px solid #fff;
}
.popover-body a:hover {
	text-decoration: none;
}
@media(min-width: 576px) {
	.d-sm-block {
		display: inline-block!important;
	}
}
.more, .modal-more {
	position: absolute;
	border-radius: 0;
    border: 1px solid #fff;
}
.modal-more .fas {
	color: #ffffff;
	text-shadow: 1px 1px 1px #000;
	font-size: 2.5em;
}


p.map_cap {
    margin: 0;
    padding: 2px 0;
}

/*Main Medical Facility Page*/
.more.one {
    top: 41.5%;
    left: 21%;
}
.more.two {
    top: 69.5%;
    left: 23.5%;
}
.more.three {
    top: 64%;
    left: 39.5%;
}
.more.four {
    top: 45%;
    left: 49%;
}
.more.five {
    top: 57%;
    left: 53.1%;
}
.more.six {
    top: 25.5%;
    left: 52.6%;
}
.more.seven {
    top: 48%;
    left: 66.5%;
}

.more.eight {
    top: 14%;
    left: 76%;
}
.more.nine {
    top: 38.5%;
    left: 83%;
}

/*Waiting room 1 page*/
.wait_1 .more.one {
    top: 26%;
    left: 12%;
}
.wait_1 .more.two {
    top: 51.5%;
/*    right: auto;*/
    left: 22%;
}
.wait_1 .more.three {
    top: 40.5%;
    left: 40%;
}
.wait_1 .more.four {
    top: 35%;
    left: 51%;
}
@media (max-width: 1450px) {
    .wait_1 .more.three {
        top: 42.5%;
        left: 40%;
    }
    .wait_1 .more.four {
        top: 34%;
        left: 51%;
    }
}
@media (max-width: 750px) {
    .wait_1 .more.three {
        top: 40.5%;
        left: 40%;
    }
    .wait_1 .more.four {
        top: 35%;
        left: 51%;
    }
}

/*waiting room 2 page*/
.wait_2 .more.one {
    top: 61.5%;
    left: 16%;
}
.wait_2 .more.two {
    top: 17.8%;
    left: 57.6%;
}

/*doc page*/
.doc .more.one {
    top: 28.5%;
    left: 17%;
}
.doc .more.two {
    top: 4%;
    left: 51%;
}
.doc .more.three {
    top: 22%;
    left: auto;
    right: 1%;
}



/*mri Page*/
.mri .more.one {
    top: 30.5%;
    left: 10%;
}
.mri .more.two {
    top: 7%;
    left: 46%;
}
.mri .more.three {
    top: 17%;
    left: auto;
    right: 2%;
}
.mri .more.three {
    top: 17%;
    left: auto;
    right: 10%;
}
.mri .more.four {
    top: 84.3%;
    left: 17.5%;
}
@media (max-width: 2000px) {
    .mri .more.one {
        top: 28.5%;
        left: 7%;
    }
}

/*roof page*/
.roof .more.one {
    top: 63.5%;
    left: 16%;
}
.roof .more.two {
    top: 39.8%;
    left: auto;
    right: 11%;
}

/*breakroom page*/
.breakroom .more.one {
    top: 9%;
    left: 51%;
}
.breakroom .more.two {
    top: 35%;
    left: 26%;
}
.breakroom .more.three {
    top: 31.5%;
    left: 48%;
}
.breakroom .more.four {
    top: 27%;
    left: auto;
    right: 13%;
}

@media (max-width: 1350px) {
    .breakroom .more.two {
        top: 38%;
        left: 26%;
    }
    .breakroom .more.four {
        top: 20%;
        left: auto;
        right: 12%;
    }
}
@media (max-width: 750px) {
    .breakroom .more.two {
        top: 35%;
        left: 26%;
    }
    .breakroom .more.four {
        top: 27%;
        left: auto;
        right: 13%;
    }
}


/*exam page*/
.exam .more.one {
    top: 28%;
    left: 4%;
}
.exam .more.two {
    top: 3.8%;
    left: 56.5%;
}
.exam .more.three {
    top: 28.5%;
    left: 49%;
}


/*.exam .three:before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    margin-top: -19px;*/
/*    margin-left: 41.5%;*/
/*    border-bottom: 1px solid #fff;*/
/*    display: block;*/
/*    height: 17px;*/
/*    width: 1px;*/
/*    background-color: #fff;*/
/*}*/
.exam .three:before {
    content: '';
    position: absolute;
    margin-top: -14px;
    margin-left: 41.5%;
    border-bottom: 1px solid #fff;
    display: block;
    height: 12px;
    width: 1px;
    background-color: #fff;
}

.exam .three:after {
    width: 40px;
    height: 40px;
    content: '';
    background-color: transparent;
    position: absolute;
    border-radius: 50%;
    margin-top: -81px;
    margin-left: 32%;
    border: 1px solid #fff;
}
 @media (max-width: 2750px) {   
    .exam .more.three {
        top: 27.6%;
        left: 50.1%;
    }
}
 @media (max-width: 2300px) {   
    .exam .more.three {
        top: 28%;
        left: 49.5%;
    }
}

 @media (max-width: 2000px) {   
    .exam .more.three {
        top: 28.75%;
        left: 48.25%;
    }
}
 @media (max-width: 1800px) {   
    .exam .more.three {
        top: 29.75%;
        left: 47.75%;
    }
}
 @media (max-width: 1650px) {   
    .exam .more.three {
        top: 30%;
        left: 47.25%;
    }
    .exam .three:before {
        margin-top: -19px;
        margin-left: 40%;
        height: 16px;
    }
    .exam .three:after {
        width: 35px;
        height: 35px;
        margin-top: -81px;
        margin-left: 32%;
    }
}
 @media (max-width: 1450px) {   
    .exam .more.three {
        top: 30.5%;
        left: 46.25%;
    }
}
 @media (max-width: 1300px) {   
    .exam .more.three {
        top: 31.5%;
        left: 44.75%;
    }
}
 @media (max-width: 1050px) {   
    .exam .more.three {
        top: 33%;
        left: 43%;
    }
}
 @media (max-width: 1000px) {   
    .exam .more.three {
        top: 32%;
        left: 44%;
    }
}
 @media (max-width: 900px) {   
   .exam .more.three {
        top: 33%;
        left: 43%;
    }
	.exam .more.five {
    	top: 24%;
    }
}
 @media (max-width: 800px) {   
    .exam .more.three {
        top: 34%;
        left: 42%;
    }
}
 @media (max-width: 750px) {   
    .exam .more.three {
        top: 30%;
        left: 47.25%;
    }

    .exam .three:before {
        margin-top: -19px;
        margin-left: 41.5%;
    	height: 17px;
    }
}


.exam .more.four {
    top: 43%;
    left: 50%;
}
.exam .more.five {
    top: 26%;
    left: auto;
    right: 3%;
}




/*Mechanical Room page*/
.mech_room .more.one {
    top: 46.5%;
    left: 48px;
}
.mech_room .more.two {
    top: 29.8%;
    left: 8.6%;
}
.mech_room .more.three {
    top: 58.5%;
    left: 28%;
}
.mech_room .more.four {
    top: 6%;
    left: 29%;
}



/*audiology page*/
.audiology .more.one {
    top: 9.5%;
    left: 8%;
}
/*@media (max-width: 750px) {
.audiology .more.one {
    left: calc(50% - 105px);
}
}*/
/*@media (max-width: 1600px) {*/
/*.library .more.one {*/
/*    top: 29.5%;*/
/*    left: 40.5%;*/
/*}*/
/*}*/
.audiology .more.two {
    top: 7.5%;
    left: 36.5%;
}
.audiology .more.three {
    top: 32.5%;
    left: 58%;
}


/*mech page*/
.mech .more.one {
    top: 12.5%;
    left: 49%;
}
.mech .more.two {
    top: 31%;
    left: 24%;
}
.mech .more.three {
    top: 79%;
    left: calc(38.5% - 160px);
}
.mech .more.four {
    top: 76%;
    left: 48%;
}

@media (max-width: 750px) {
    .mech .more.three {
    left: calc(38.5% - 140px);
}

}



.bs-popover-auto[x-placement^=top] .arrow::before, .bs-popover-top .arrow::before {
	border-top-color: rgba(255,255,255,5);
}
.bs-popover-auto[x-placement^=top] .arrow::after, .bs-popover-top .arrow::after {
	border-top-color: #06173f;
}
.bs-popover-auto[x-placement^=bottom] .arrow::before, .bs-popover-bottom .arrow::before {
	border-bottom-color: rgba(255,255,255,5);
}
.bs-popover-auto[x-placement^=bottom] .arrow::after, .bs-popover-bottom .arrow::after {
	border-bottom-color: #06173f;
}
.popover p, .popover button {
	color: #fff;
}
.modal-open {
	overflow: scroll;
}
.modal-open #bg {
	overflow: hidden;
}
.modal {
	position: fixed;
	top: 50%;
	right: auto;
	bottom: auto;
	left: 50%;
	width: 95%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	height: auto;
	/*max-height: 90%;*/
    padding: 30px;
    max-width: 1200px;
}
@media screen and (orientation:landscape) {
	.modal {
		/*height: 100%;*/
	}
}
@media (min-width: 1279px) {
	/*.modal {*/
	/*	width: 90%;*/
	/*	position: absolute;*/
	/*	top: 0;*/
	/*	-webkit-transform: translateX(-50%);*/
	/*	-ms-transform: translateX(-50%);*/
	/*	transform: translateX(-50%);*/
	/*}*/
}
.modal-backdrop.show {
	opacity: .8;
}
.modal-dialog {
	max-width: none;
	margin: 0;
}
.modal-content {
	background-color: transparent;
	border: none;
	border-radius: 0;
	color: #fff;
}
.modal-header {
	background: #000000;
	border-bottom: none;
	border-top-left-radius: 0;
	border:#ffffff;
	position: relative;
}
.modal-header.full-header {
	width:100%;
}
.modal-header h3 {
	color: #fff;
	line-height: 60px;
}
.modal-header p, .modal-header a {
	color: #fff;
	margin-top: 1em;
	padding: 0 50px 0 0;
}
.modal-header a {
	padding: 0;
	border-bottom: 1px solid #fff;
}
.modal-header a:hover {
	text-decoration: none;
	border-bottom: none;
}
.modal-header button.close, .modal-header a.close {
	font-size: 46px;
	line-height: 46px;
	font-weight: 300;
	color: #fff;
	text-shadow: 0 1px 0 #1b1b1b;
	opacity: 1;
	z-index: 100;
	padding: 9.5px 10px!important;
	margin: 0;
	height: 100%;
}
.modal-header a.close {
    border-bottom: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.modal-body {
	position: relative;
	padding: 0;
	max-height: 100%;
}
.close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover {
	color: #fff;
}
#bg .modal-body img {
	width: 100%;
	min-width: 100%;
	height: auto;
}

.modal-header a.close.close_top_level {
    max-width: 140px;
    line-height: .1em;
    padding-top: 9px !important;
    padding-bottom: 10px !important;
    text-align: right;
}
.modal-header a.close.close_top_level span{
    font-size: .3em;
}
.modal-header a.close.close_top_level:after{
    display:none;
}
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster */
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}


@media (max-width: 1175px) {
	#bg {
		padding: 45px 15px;
	}
	#bg .inner .thumbnails .thumb_container p {
    	padding: 6px 6px;
	}
	.thumb_container p .captxt {
	    font-size: 14px;
	}
	#bg .inner .thumbnails .thumb_container p .d-number {
		font-size: 12px;
		padding: 2px 8px;
	}
	#bg .inner .thumbnails .thumb_container p .d-number.pad0{
	    padding: 2px 10px;
	}
	#bg .inner .thumbnails .thumb_container p .d-number.pad2{
		padding: 2px 6px;
	}
	#bg .inner .thumbnails .thumb_container p .d-number.pad3{
		padding: 2px 5px;
	}
	.popover, .popover-modal {
		font-size: 12px;
	}
}

@media (max-width: 1000px) {
    #bg {
        width: 100%;
        height:auto;
        overflow: hidden;
    }
    
    #bg .inner {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        gap: 10px;
        width: 100%;
    }
    #downscroll {
    	display: none!important;
    }
    
    #bg .inner .thumbnails {
    	width:100%;
    	background: #181818;
    }
    #bg .inner .thumbnails .tscroller {
    	overflow: hidden;
        position: relative;
        top: auto;
        left: auto;	
        
    }
    #bg .inner .thumbnails .thumb_container {
        grid-gap: 10px;
        grid-auto-flow: column;
        overflow: scroll;	
    }
    
    #bg .inner .thumbnails .thumb_container div[type="button"], #bg .inner .thumbnails .thumb_container a[type="button"]  {
    	width:250px;	
    }
    #bg img.background_img {
            width: 100%;
            height: auto;
        }
    #bg .inner .map {
        width: 100%;
    }
    #rightscroll2 {
        position: absolute;
        display: block;
        top: 30px;
        right: 15px;
        color: #fff;
        background: #000000;
        padding: 5px 10px;
        z-index: 30;
        font-size: 12px;
    }
    .logo{
    	right: 15px;
    	left: auto;
    }
 /*   .popover.pad2, .popover-modal.pad2{*/
	/*padding: 3px 8px;*/
	/*}*/
	/*.popover.pad3, .popover-modal.pad3{*/
	/*	padding: 3px 7px;*/
	/*}*/
	/*.popover-modal.twelve:before {*/
	/*    margin-left: -23px;*/
	/*    width: 23px;*/
	/*}*/
}

@media (max-width: 900px) {
    .popover-modal.eleven:after {
    margin-left: -34px;
    }
    .popover-modal.eleven:before {
        margin-left: -24px;
        width: 19px;
    }   
}
@media (max-width: 800px) {
    .popover-modal.eleven:after {
        margin-left: -29px;
    }
 .popover-modal.eleven:before {
        margin-left: -16px;
        width: 15px;
    }   
}
@media (max-width: 750px) {
    .popover-modal.eleven:after {
        margin-left: -39px;
    }
    .popover-modal.eleven:before {
        margin-left: -29px;
        width: 25px;
    } 
    .popover-modal.twelve:after {
        margin-left: 20px;
    }
    .popover-modal.twelve:before {
        margin-left: 12px;
        width: 21px;
    }  
}
@media (max-width: 750px) {
    body {
        display: block;
    }
    #bg {
        width: 100%;
        height: auto;
        overflow: scroll;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    
    #bg::-webkit-scrollbar {
	  display: none;
	}
	#bg {
	  -ms-overflow-style: none;  /* IE and Edge */
	  scrollbar-width: none;  /* Firefox */
	}
    #bg .inner {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        gap: 10px;
        width: 100vh;
    }
    #bg .inner .thumbnails {
        width: 100%;
        position: fixed;
        bottom: 0;
        background: #181818;
        z-index: 100;
    }
    #bg .inner .map {
        width: auto;
        height: calc(100vh - 360px);
        overflow: visible;
        position: relative;
    }
    #bg img.background_img {
        width: auto;
        height: calc(100vh - 360px);
    }
    #rightscroll {
        position: absolute;
        display: block;
        top: 30px;
        left: 15px;
        color: #fff;
        background: #000000;
        padding: 5px 10px;
        z-index: 30;
        font-size: 12px;
    }
    #bg .inner .thumbnails .thumb_container div[type="button"], #bg .inner .thumbnails .thumb_container a[type="button"] {
        width: 175px;
    }
	#bg .inner .thumbnails .thumb_container p {
    	padding: 4px 4px;
	}
	.thumb_container p .captxt {
	    font-size: 12px;
	}
	#bg .inner .thumbnails .thumb_container p .d-number {
		font-size: 10px;
		padding:2px 8px;
	}
	#bg .inner .thumbnails .thumb_container p .d-number.pad0{
		padding: 2px 10px;
	}
	#bg .inner .thumbnails .thumb_container p .d-number.pad2{
		padding: 2px 6px;
	}
	#bg .inner .thumbnails .thumb_container p .d-number.pad3{
		padding: 2px 5px;
	}
    .popover, .popover-modal {
        font-size: 10px;
    }
    .modal{
    	/*max-height: 100%;*/
    	padding: 15px;
    }
    .modal-header {
	    padding-right: 60px!important;
	}
	.logo {
        left: 15px;
        right: auto;
    }
}
@media (max-width: 600px) {
    .modal-header h3 {
        text-align:left!important;
        width: calc(100% - 85px);
    }
}