/*! 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: #4c535a;
    text-shadow: none;
}

::selection {
    background: #4c535a;
    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: #181818;
   /*background: #fff;*/
}
body{
	display: flex;
    align-items: center;
    background: #181818;
}
#bg {
	/*overflow: scroll;*/
	position: relative;
	display: flex;
	padding: 45px 30px;
	flex-wrap: wrap;
}
#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;
}
#bg .inner .thumbnails .thumb_container div[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{
	display: flex;
    align-items: center;
    gap:6px;
}
#bg .inner .thumbnails .thumb_container p .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.pad2{
	padding: 2px 6px;
}
#bg .inner .thumbnails .thumb_container p .d-number.pad3{
	padding: 2px 5px;
}
#bg .inner .thumbnails .thumb_container p .captxt {

}
#downscroll {
    bottom: -34px;
    left: 0px;
    color: #fff;
    background: #000000;
    padding: 5px 10px;
    z-index: 30;
    position: absolute;
}

#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%);*/
}
#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{
    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{
    right: auto;
    left: 18px;
}
button.popover-modal.next-modal{
    left: auto;
    right: -19px;
}
button.popover-modal.prev-modal i, button.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;
}
.modal-more .fas {
	color: #ffffff;
	text-shadow: 1px 1px 1px #000;
	font-size: 2.5em;
}

.more.one {
    top: 28.5%;
    left: 76%;
}
.more.two {
    top: 30.8%;
    left: 62.6%;
}
.more.three {
    top: 22.5%;
    left: 56.5%;
}
.more.four {
    top: 30%;
    left: 51%;
}
.more.five {
    top: 25%;
    left: 48.1%;
}
.more.six {
    top: 35.5%;
    left: 47.6%;
}
.more.seven {
    top: 9%;
    left: 29.5%;
}
.more.eight {
    top: 24%;
    left: 15%;
}
.more.nine {
    top: 47.5%;
    left: 31.7%;
}
.more.ten {
    top: 49%;
    left: 27.8%;
}
.more.eleven {
    top: 54.3%;
    left: 31%;
}
.line-dot-11-dot {
    width: 6px;
    height: 6px;
    content: '';
    background-color: #000000;
    top: 55.7%;
    left: 28.6%;
    position: absolute;
    border-radius: 50%;
}
.line-dot-11-line {
    width: 34px;
    height: 2px;
    content: '';
    background-color: #000000;
    top: 55.9%;
    left: 28.8%;
    position: absolute;
}
.more.twelve {
    top: 55.7%;
    left: 25.5%;
}
.line-dot-12-dot {
    width: 6px;
    height: 6px;
    content: '';
    background-color: #000000;
    top: 57.2%;
    left: 28.6%;
    position: absolute;
    border-radius: 50%;
}
.line-dot-12-line {
    width: 24px;
    height: 2px;
    content: '';
    background-color: #000000;
    top: 57.5%;
    left: 26.8%;
    position: absolute;
}
/*.popover-modal.eleven:before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    margin-top: 8px;*/
/*    margin-left: -37px;*/
/*    border-bottom: 1px solid #000000;*/
/*    display: block;*/
/*    height: 2px;*/
/*    width: 34px;*/
/*    background-color: #000000;*/
/*}*/
/*.popover-modal.eleven:after {*/
/*    width: 6px;*/
/*    height: 6px;*/
/*    content: '';*/
/*    background-color: #000000;*/
/*    position: absolute;*/
/*    border-radius: 50%;*/
/*    margin-top: 6px;*/
/*    margin-left: -50px;*/
/*}*/
/*.popover-modal.twelve:before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    margin-top: 8px;*/
/*    margin-left: 16px;*/
/*    border-bottom: 1px solid #000000;*/
/*    display: block;*/
/*    height: 2px;*/
/*    width: 19px;*/
/*    background-color: #000000;*/
/*}*/
/*.popover-modal.twelve:after {*/
/*    width: 6px;*/
/*    height: 6px;*/
/*    content: '';*/
/*    background-color: #000000;*/
/*    position: absolute;*/
/*    border-radius: 50%;*/
/*    margin-top: 6px;*/
/*    margin-left: 18px;*/
/*}*/

@media (min-width: 2500px) {
    .more.twelve {
        top: 56.8%;
    }
    .line-dot-12-line {
        width:3%;
        top: 57.4%;
        left: 25.8%;
    }
}
@media (max-width: 2100px) {
    .more.twelve {
        top: 56.1%;
    }
    .line-dot-12-line {
        width:3%;
        top: 57.4%;
        left: 25.8%;
    }

}
@media (min-width: 2100px) {
    .more.eleven {
         top: 55%;
    }
    .line-dot-11-line {
        width: 2.5%;
    }
    .more.twelve {
        top: 56.8%;
    }
    .line-dot-12-line {
        width:3%;
        top: 57.4%;
        left: 25.8%;
    }
}
@media (max-width: 1900px) {
    .more.eleven {
         top: 54.4%;
    }

}
@media (max-width: 1700px) {
    .line-dot-12-line {
/*        width: 2%;*/
    }
     .more.twelve {
        top: 56%;
    }
}
/*@media (max-width: 1600px) {*/
/*.more.eleven {*/
/*    top: 54.2%;*/
/*}*/
/*}*/
/*@media (max-width: 1475px) {*/
/*    .more.eleven {*/
        /*top: 54.5%;*/
/*        left: 31.2%;*/
/*    }*/
/*}*/
/*@media (max-width: 1400px) {*/
/*    .more.eleven {*/
/*        left: 31.4%;*/
/*    }*/
/*}*/
@media (max-width: 1350px) {
    /*.popover-modal.eleven:before {*/
    /*    margin-left: -29px;*/
    /*    width: 25px;*/
    /*}*/
    /*.popover-modal.eleven:after {*/
    /*        margin-left: -41px;*/
    /*}*/
    /*.popover-modal.twelve:before {*/
    /*    margin-left: 15px;*/
    /*    width: 15px;*/
    /*}*/
    /*.popover-modal.twelve:after {*/
    /*    margin-left: 14px;*/
    /*}*/
}
/*@media (max-width: 1100px) {*/
/*    .popover-modal.twelve:before {*/
        /*margin-left: 15px;*/
/*        width: 8px;*/
/*    }*/
/*    .popover-modal.twelve:after {*/
/*        margin-left: 9px;*/
/*    }*/
/*}*/
.more.thirteen {
    top: 54.5%;
    left: 17.5%;
}
.more.fourteen {
    top: 64%;
    left: 23%;
}
.more.fifteen {
    top: 74%;
    left: 4.6%;
}
.more.sixteen {
    top: 70%;
    left: 22%;
}
.more.seventeen {
    top: 74%;
    left: 27%;
}
.more.eighteen {
    top: 67%;
    left: 29%;
}
.more.nineteen {
    top: 82%;
    left: 33%;
}
.more.twenty {
    top: 84%;
    left: 39.3%;
}
.more.twentyone {
    top: 79%;
    left: 43.4%;
}
.more.twentytwo {
    top: 74%;
    left: 39%;
}
.more.twentythree {
    top: 48%;
    left: 43%;
}
.more.twentyfour {
    top: 49%;
    left: 54%;
}
.more.twentyfive {
    top: 72%;
    left: 59%;
}
.more.twentysix {
    top: 64%;
    left: 63%;
}
.more.twentyseven {
    top: 59%;
    left: 71.5%;
}
.more.twentyeight {
    top: 24%;
    left: 90.5%;
}
.more.twentynine {
    top: 14%;
    left: 81.3%;
}

.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.fade {
    opacity: 0;
}
.modal-backdrop.show {
	opacity: .5;
}

.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;
    }
}

.clip_circle{
    width: 45px;
    height: 45px;
    content: '';
    background-color: transparent;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #002e5b;
    top: 35.4%;
    left: 71.8%;
}

@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.pad2{
		padding: 2px 6px;
	}
	#bg .inner .thumbnails .thumb_container p .d-number.pad3{
		padding: 2px 5px;
	}
	.popover, .popover-modal {
		font-size: 12px;
	}
	.clip_circle{
        left: 71.4%;
    }
	
	
	
}

@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"] {
	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;
    }
	.clip_circle{
	    top: 34.5%;
        left: 71%;
    }
}

@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;*/
 /*   }  */
    	.clip_circle{
	    top: 33.8%;
        left: 70.5%;
    }
}
@media (max-width: 700px) {
    /*.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;*/
    /*}  */
    	.clip_circle{
	           top: 33%;
        left: 70%;

    }
}
@media (max-width: 700px) {
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 - 310px);
        overflow: visible;
        position: relative;
    }
    #bg img.background_img {
        width: auto;
        height: calc(100vh - 310px);
    }
    #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"] {
        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.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);
    }
    /*.modal-header {*/
    /*    width: calc( 100% - 140px);*/
    /*}*/
}
@media (max-width: 550px) {

    .clip_circle{
	    top: 34%;
        left: 70%;
        width: 30px;
        height: 30px;

    }
}