@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tangerine&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Icons&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

:root {
    /* define varaible */
    --logo-colorbkgnd: #ee5721;
    --logo-colorbkgndRGB: 238, 87, 33;
    --logo-colorfont: #02418d;
    --text-background-color: #333333;
    --text-background-colorRGB: 51, 51, 51;
    --text-color: #eee;
    --text-colorRGB: 235, 235, 235;
    --text-border-color: #222;
    --text-border-colorRGB: 33, 33, 33, 0.6;
    --menu-border-radius: 3px;
    --frame-border-radius: 3px;
    --button-border-radius: 3px;
    /* variable to adpt font size in responsive box*/
    --title-font-size-minpx: 14px;
    --title-font-size-min: 14;
    --title-font-size-max: 26;
    --text-font-size-minpx: 12px;
    --text-font-size-min: 12;
    --text-font-size-max: 18;
    --view-port-width-minpx: 250px;
    --view-port-width-min: 250;
    --view-port-width-max: 900;
}


/* -----default skin----- */

.ggskin {
    /* font-family: Verdana, Arial, Helvetica, sans-serif; */
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
}


/* -----BODY STUFF----- */

html {
    height: 100%;
    color: #ccc;
    font-family: 'Poppins', sans-serif;
}

body {
    background: #000;
    color: #ccc;
    font-family: 'Poppins', sans-serif;
}

p {
    font-family: sans-serif;
    background: #000;
    color: #ccc;
    font-size: 0.9em;
    line-height: 1.1;
    margin-bottom: 1.2;
}


/* -----H TAG STUFF----- */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #fff;
    font-weight: normal;
}

h1 {
    margin-bottom: 0.8 em;
    font-size: 1.6em;
}

h2 {
    font-size: 1.1em;
    line-height: 0.94;
    font-weight: lighter;
}

h3 {
    line-height: 1em;
}

.introbox_title1,
#introbox_title1,
.introbox_title2,
#introbox_title2,
.introbox_title3,
#introbox_title3 {
    padding: 0;
    text-transform: uppercase;
    line-height: 110%;
    color: var( --text-color);
    text-align: center;
    /* font-weight: bolder; */
    font-size: 1.3rem;
    /* font-family: 'Luckiest Guy', cursive; */
    /* font-family: 'Mitr', sans-serif; */
    /* font-family: 'Monoton', cursive; */
    font-family: 'Roboto', cursive;
    background-color: rgba(var(--text-background-colorRGB), 0);
    text-shadow: -1px -1px 1px rgba(0, 0, 0, .6), 1px 1px 4px rgba(0, 0, 0, .6), -1px 1px 1px rgba(0, 0, 0, .6), 1px -1px 1px rgba(0, 0, 0, .6);
}

.introbox_title2,
#introbox_title2 {
    font-size: 2.2rem;
}

.introbox_title3,
#introbox_title3 {
    text-transform: lowercase;
    font-size: 1.3rem;
}

.info_page_body,
#info_page_body {
    border: 0px;
    padding: 2%;
}

.info_page_text,
#info_page_text {
    text-align: justify;
    text-justify: inter-word;
}

.info_page_text_note,
#info_page_text_note {
    color: rgb(172, 172, 172);
    font-size: 0.9em;
    font-weight: lighter;
    text-align: justify;
    text-justify: inter-word;
    margin-bottom: 1.2;
}

.sdfootnoteanc {
    font-size: 1em;
    font-weight: bold;
    color: aqua;
    text-decoration: none;
}

.sdfootnotesym {
    font-size: 0.9em;
    font-weight: bold;
    color: aqua;
    text-decoration: none;
}

.textbaloon,
#textbaloon {
    text-align: center;
    font-size: 100%;
    padding: 2px 4px;
    background-color: rgba(51, 51, 51, 0.3);
    text-shadow: -1px -1px 1px rgba(0, 0, 0, .6), 1px 1px 1px rgba(0, 0, 0, .6);
}

.info_box,
#info_box {
    padding: 0;
    -webkit-box-shadow: 5px 5px 15px 5px #0E0E0E;
    box-shadow: 5px 5px 15px 5px #0E0E0E;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.info_baloon,
#info_baloon {
    font-weight: bold;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, .6), 1px 1px 1px rgba(0, 0, 0, .6);
}

.dida_baloon,
#dida_baloon {
    color: rgb(24, 24, 24);
    background-color: rgba(var(--logo-colorbkgndRGB), 0.3);
    border-radius: 5pt;
    padding: 2%;
}

.operadida,
#operadida {
    font-family: "Roboto", sans-serif;
    line-height: 120%;
}

.operaart,
#operaart {
    font-size: 100%;
    font-weight: bolder;
    text-align: right;
    text-transform: uppercase;
}

.operaborn,
#operaborn {
    font-size: 80%;
    font-style: italic;
}

.operatit,
#operatit {
    font-size: 110%;
    font-weight: bold;
    /* text-shadow: -0pt -0pt 0px rgb(211, 211, 211, .6), 1px 1px 0px rgb(211, 211, 211, .6), -0px 0px 0px rgb(211, 211, 211, .6), 0px -0px 0px rgb(211, 211, 211, .6); */
}

.operadim,
#operadim {
    font-size: 90%;
    font-weight: bold;
    text-align: left;
}

.operatec,
#operatec {
    font-size: 90%;
    line-height: 110%;
    text-align: left;
}

.operacol,
#operacol {
    font-size: 80%;
    font-style: italic;
    text-align: right;
}

.operanote,
#operacol {
    font-size: 80%;
    font-style: italic;
    text-align: center;
}

.panoloader,
#panoloader {
    fill: #FF6700;
}

.panoloader path,
#panoloader path {
    fill: #FF6700;
}

.tourmaker_link,
#tourmaker_link {
    font-size: smaller;
    color: rgb(73, 26, 26);
}

.opengooglemaptxt,
#opengooglemaptxt {
    display: flex;
    position: relative;
    align-items: center;
    box-sizing: border-box;
    padding: 5px 4px 0 0;
    justify-content: left;
    font-family: Poppins, sans-serif;
    font-size: .7em;
    font-weight: bold;
    -webkit-animation: glowing 1500ms infinite;
    -moz-animation: glowing 1500ms infinite;
    -o-animation: glowing 1500ms infinite;
    animation: glowing 1500ms infinite;
}

@-webkit-keyframes glowing {
    0% {
        background-color: #B20000;
        -webkit-box-shadow: 0 0 3px #B20000;
    }
    50% {
        background-color: #FF0000;
        -webkit-box-shadow: 0 0 40px #FF0000;
    }
    100% {
        background-color: #B20000;
        -webkit-box-shadow: 0 0 3px #B20000;
    }
}

@-moz-keyframes glowing {
    0% {
        background-color: #B20000;
        -moz-box-shadow: 0 0 3px #B20000;
    }
    50% {
        background-color: #FF0000;
        -moz-box-shadow: 0 0 40px #FF0000;
    }
    100% {
        background-color: #B20000;
        -moz-box-shadow: 0 0 3px #B20000;
    }
}

@-o-keyframes glowing {
    0% {
        background-color: #B20000;
        box-shadow: 0 0 3px #B20000;
    }
    50% {
        background-color: #FF0000;
        box-shadow: 0 0 40px #FF0000;
    }
    100% {
        background-color: #B20000;
        box-shadow: 0 0 3px #B20000;
    }
}

@keyframes glowing {
    0% {
        background-color: #B20000;
        box-shadow: 0 0 3px #B20000;
    }
    50% {
        background-color: #FF0000;
        box-shadow: 0 0 40px #FF0000;
    }
    100% {
        background-color: #B20000;
        box-shadow: 0 0 3px #B20000;
    }
}

.hotspotlabeltxt,
#hotspotlabeltxt {
    text-shadow: 1px 1px 0px #3f3f3f, -1px 1px 0px #3f3f3f, 1px -1px 0px #3f3f3f, -1px -1px 0px #3f3f3f;
    font-size: 1em;
    font-family: Poppins, sans-serif !important;
    line-height: 1;
    border: 2px;
}

.hotspotlabel_smalltxt,
#hotspotlabel_smalltxt {
    font-family: Poppins, sans-serif !important;
    color: rgba(var( --text-colorRGB), 1) !important;
    background: none;
    text-shadow: 1px 1px 0px #3f3f3f, -1px 1px 0px #3f3f3f, 1px -1px 0px #3f3f3f, -1px -1px 0px #3f3f3f;
    font-size: 0.8em !important;
    overflow-y: hidden;
}

.float_info_title,
#float_info_title {
    text-shadow: 1px 1px 0px #333333, -1px 1px 0px #333333, 1px -1px 0px #333333, -1px -1px 0px #333333;
    font-size: 1em;
    color: yellow;
}

.float_info_text,
#float_info_text {
    text-shadow: 1px 1px 0px #333333, -1px 1px 0px #333333, 1px -1px 0px #333333, -1px -1px 0px #333333;
    font-size: 0.9em;
    color: yellow;
}

.menutxt,
#menutxt {
    display: flex;
    padding: 0;
    box-sizing: border-box;
    align-items: center;
    text-shadow: 1px 1px 0px #333333, -1px 1px 0px #333333, 1px -1px 0px #333333, -1px -1px 0px #333333;
    font-size: 0.9em;
    font-family: Poppins, sans-serif;
    color: #eeeeee;
}

.tour_title {
    font-family: Poppins, sans-serif;
    font-size: 1.4em;
    font-weight: normal;
    color: #f0f0f0;
    /* background-color: rgba(240, 240, 240, 0.7); */
    background-color: rgba(var(--text-background-colorRGB), .1);
    text-shadow: -1px -1px 0px rgba(0, 0, 0, .6), -1px 1px 0px rgba(0, 0, 0, .6), 1px -1px 0px rgba(0, 0, 0, .6), 1px 1px 0px rgba(0, 0, 0, .6);
}

.tour_subtitle {
    font-family: Poppins, sans-serif;
    font-size: 2em;
    font-weight: normal;
    line-height: 1.4;
    color: #f0f0f0;
    /* background-color: rgba(240, 240, 240, 0.7); */
    background-color: rgba(var(--text-background-colorRGB), .1);
    text-shadow: -1px -1px 0px rgba(0, 0, 0, .6), -1px 1px 0px rgba(0, 0, 0, .6), 1px -1px 0px rgba(0, 0, 0, .6), 1px 1px 0px rgba(0, 0, 0, .6);
}

.menutxt,
#menutxt {
    font-family: Poppins, sans-serif;
    font-size: 1em;
    border-radius: var(--menu-border-radius);
    color: var( --text-color);
    background-color: rgba(var(--text-background-colorRGB), .8);
    text-shadow: -1px -1px 0px rgba(var(--text-border-colorRGB)), -1px 1px 0px rgba(var(--text-border-colorRGB)), 1px -1px 0px rgba(var(--text-border-colorRGB)), 1px 1px 0px rgba(var(--text-border-colorRGB));
}

.menutxt :hover,
#menutxt :hover {
    color: rgba(var(--text-background-colorRGB), 1) !important;
    background-color: rgba(var( --text-colorRGB), 0.8);
    text-shadow: -1px -1px 0px rgba(var(--text-colorRGB)), -1px 1px 0px rgba(var(--text-colorRGB)), 1px -1px 0px rgba(var(--text-colorRGB)), 1px 1px 0px rgba(var(--text-colorRGB));
    border-radius: var(--menu-border-radius);
}

.address-box,
#address-box {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var( --text-color) !important;
    font-family: Poppins, sans-serif;
    font-size: 0.9em;
    line-height: 1.2;
    border-radius: var(--frame-border-radius);
    background-color: rgba(var(--text-background-colorRGB), .8);
}