/*
Theme Name: Archaeo | 3D (Ver. 2.1)
Author: Conny Coburger
Author URI: http://www.digitalkonstrukt.com
Description: Theme für das 3D Webportal des LfA
Version: 2.1.0
License: keine
License URI: keine
Tags: keine
Text Domain: keine
*/

/* --------------------------------*/
/* -------- default styles --------*/
/* --------------------------------*/
:root {
    --highlight-color: #91a6bc;
    --color-map: #C4C4C4;
    --highlight-color-map: #bbcbdf;
    --gray: #C4C4C4;
    --font-family-lvl1: 'Franklin Gothic Medium', 'Microsoft New Tai Lue', Arial, Helvetica, sans-serif;
    /* h1 & main-nav */
    --font-family-lvl2: 'Segoe UI', 'Frutiger', 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;
    /* finds & leagle-nav */
    --font-family-lvl3: 'Microsoft New Tai Lue', Arial, Helvetica, sans-serif;
    /* other */
    --gap-x: 3vw;
    --left-container-width: 30%;
    --header-height: clamp(125px, 18vh, 175px);
    --main-height: calc(100vh - var(--header-height));
    --mobil-header-height: clamp(132px, 14vh, 189px);
    --mobil-footer-height: clamp(32px, 5vh, 64px);
    --mobil-main-height: calc(100vh - var(--mobil-header-height) - var(--mobil-footer-height));
}

* {
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
	height: -webkit-fill-available;
    margin-top: 0 !important;
}

body {
    width: 100%;
    min-height: 100%;
	min-height: -webkit-fill-available;
    margin: 0;
    padding: 0;
    position: static !important;
    /* wordpress sets relative automatically */
    font-family: 'Microsoft New Tai Lue', Arial, Helvetica, sans-serif;
    color: #000;
    background-color: #fff;
}

body {
    /* min-height: 100vh; */
    min-height: -webkit-fill-available;
}

html {
    height: -webkit-fill-available;
}

a {
    color: var(--highlight-color);
    text-decoration: none;
}

h1 {
    font-size: 2em;
    font-family: 'Franklin Gothic Medium', 'Microsoft New Tai Lue', Arial, Helvetica, sans-serif;
    font-family: var(--font-family-lvl1);
}

h2 {
    font-size: 1.3em;
}

h3 {
    font-size: 1.1em;
}

p {
    line-height: 1.5em;
}

p,
label,
h1,
h2,
h3 {
    hyphens: auto;
}

footer h2 {
    font-size: clamp(0.8rem, 0.6826rem + 0.5217vw, 1.1rem);
}

ul {
    list-style: none;
}

nav ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding-left: 0;
    overflow-wrap: initial;
}

nav ul li a {
    color: #000;
}

hr {
    width: 100%;
    border-bottom: 1px solid #000;
    margin: 2em 0;
    padding: 0;
}

table {
    width: 100%;
}

tr {
    line-height: 2em;
    vertical-align: top;
    /* text-transform: capitalize; */
}

th {
    text-align: left;
}

td {
    padding-left: .5%;
}

button,
.button {
    background-color: #000;
    color: #fff;
    border: none;
    min-height: 32px;
    font-size: 1em;
    padding: 8px;
}

input[type="radio"] {
    display: none;
}

input[type="checkbox"] {
    display: none;
}

select {
    display: none;
}

label::first-letter, button {
    text-transform: capitalize;
}

::selection {
    background: var(--highlight-color);
}

::-moz-selection {
    background: var(--highlight-color);
}

hr {
    border: 0;
    border-bottom: 1px solid #000;
    margin: .75rem 0;
}
h1 + h1 {
	display: none;
}
/* --------------------------------*/
/* --- default pseudo classes -----*/
/* --------------------------------*/
*:focus {
    outline: 1px solid var(--highlight-color);
}

a:hover {
    color: var(--gray);
    cursor: pointer;
}

nav a:hover {
    color: var(--highlight-color);
}

input+label:hover,
button:hover {
    cursor: pointer;
}

input+label:focus {
    color: var(--highlight-color);
}

h1::first-letter,
h2::first-letter,
h3::first-letter,
p::first-letter,
li::first-letter {
    text-transform: capitalize;
}

input[type="radio"]+label:hover {
    color: #91a6bc;
    color: var(--highlight-color);
    cursor: pointer;
}

input[type="radio"]:checked+label {
    color: #fff;
    background-color: #000;
}

input[type="checkbox"]:checked+label {
    cursor: pointer;
}

input[type="checkbox"]+label::before {
    content: "";
    width: .8em;
    height: .8em;
    margin-right: 6%;
    border: 1px solid black;
    background-color: white;
    display: inline-block;
    cursor: pointer;
}

input[type="checkbox"]:checked+label::before {
    box-shadow: 0 0 0 2px #fff inset;
    background-color: #000;
}

input:disabled+label {
    color: var(--gray);
}

/* --------------------------------*/
/* --- default classes        -----*/
/* --------------------------------*/
.hide {
    display: none !important;
}

.show {
    display: block;
}

.no-scroll {
    overflow: hidden;
}

p.lowercase::first-letter {
    text-transform: lowercase;
}

.transition {
    transition-duration: .5s;
    transition-timing-function: ease-in;
}

.background-image {
    background-repeat: no-repeat;
}

.background-image-transition {
    opacity: 0;
}

.button-right {
    position: fixed;
    top: 20vh;
    right: 0;
    z-index: 100;
}

.full-page-grid {
    height: 75vh;
    margin: 2.5vh var(--gap-x) 0;
}

.full-page-grid a {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    border: 1px solid #000;
}

.transparent-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
    background-color: var(--highlight-color);
    opacity: 0;
    transition-duration: .1s;
}

.transparent-overlay:hover {
    opacity: .7;
}

.background-image {
    background-size: cover;
    background-position: center center;
}

.capitalize {
    text-transform: capitalize;
}

.h3-style {
    font-size: 1.1em;
    font-weight: bold;
    margin: 1em 0 .5em;
    /* padding-right: 2.5rem; */
}

.h4-style {
    font-size: 1em;
    font-weight: bold;
    margin: 1em 0 .5em;
    /* padding-right: 2.5rem; */
}

.h4-style~p,
.h4-style~div p {
    margin-top: 0;
}

.switch-container {
    position: relative;
}

.switch-container>input,
.switch-container>label {
    position: absolute !important;
    top: 0;
    right: .25rem;
}

.simple-language-switcher {
    background-image: url("assets/icons/icon-simple-language.png");
    padding: .8em;
    position: absolute;
    top: 0;
    right: 16px;
    margin: .2em;
}

.simple-language-switcher:hover {
    background-image: url("assets/icons/icon-simple-language-hover.png");
}

.mobil {
    display: none;
}

.flex-column {
    display: flex;
    justify-content: space-between;
}

.center-horizontal {
    display: flex;
    justify-content: center;
    margin: 1.5em 0;
    flex-wrap: wrap;
}

.clear-float {
    clear: both;
}

.overlay {
    position: relative;
}

.overlay-background,
.overlay-text {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.overlay-background {
    background-color: #000;
    opacity: .8;
}

.overlay-text {
    padding: var(--gap-x);
}
.btn-copy {
    min-height: auto;
    padding: 4px;
}
/* --------------------------------*/
/* --- barrier-free           -----*/
/* --------------------------------*/
.hide-visual,
.hide-headline {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

input.visually-hidden:focus+label {
    color: var(--highlight-color);
}

input.visually-hidden:checked+label {
    color: #fff;
    background-color: #000;
}

/* --------------------------------*/
/* --- voice reader web 20    -----*/
/* --------------------------------*/
button.vrweb_icon {
    background-size: contain;
    width: 1.75em !important;
    height: 1.75em !important;
    min-height: auto;
}

.vrweb_hover_player {
    left: 0 !important;
    top: 0 !important;
}

.VR20S_h_player_container {
    border-radius: 0 !important;
}

/* --------------------------------*/
/* --- wordpress              -----*/
/* --------------------------------*/
body>svg {
    display: none;
    /* Gutenberg Duetone Filter adds svg to body which creates white-space at bottom of site in Firefox */
}

figure.wp-block-image img {
    height: 30vh;
    max-height: 400px;
    width: auto;
}

figure.wp-block-image figcaption {
    font-size: .8em;
    text-align: left;
}

.wp-block-group {
    width: 75vw;
    max-width: 700px;
    height: 30vh;
    max-height: 400px;
    margin: 1em auto;
    clear: both;
}

.wp-block-group__inner-container {
    /* display: flex;
    justify-content: center;
    align-items: flex-start; */
    text-align: center;
}

.wp-block-group__inner-container figure {
    display: inline;
    float: left;
}

.alignnone {
    margin-left: 2%;
    margin-right: 2%;
    margin-bottom: 1%;
}

.alignright {
    float: right;
    margin: 0;
    margin-left: 2%;
    margin-bottom: 1%;
}

.alignleft {
    float: left;
    margin: 0;
    margin-right: 2%;
    margin-bottom: 1%;
}

.aligncenter {
    display: block;
    margin: 1% auto;
}

/* --------------------------------*/
/* --- bootstrap classes      -----*/
/* --------------------------------*/
.row {
    flex-wrap: nowrap !important;
}

.container-xl {
    padding-right: var(--gap-x);
    padding-left: var(--gap-x);
}

/* --------------------------------*/
/* --- gtranslate classes     -----*/
/* --------------------------------*/
#google_translate_element2,
iframe {
    display: none;
}

#language font {
    padding: 0 0.25em;
}
/* --------------------------------*/
/* --- lang classes           -----*/
/* --------------------------------*/
.lang-pl {
    display: none;
}
/* button#language-pl {
    position: fixed;
    left: 0;
    bottom: 20vh;
    padding-left: 1.5rem;
    z-index: 2000;
} */
button#language-pl {
    position: fixed;
    right: 0;
    top: 27vh;
    z-index: 2000;
}
/* --------------------------------*/
/* --- cookie banner          -----*/
/* --------------------------------*/
#cookie-notice {
    box-shadow: 0 0 2em 10px rgba(0, 0, 0, 0.2) !important;
}

#cn-close-notice,
#cn-notice-text>a {
    display: none !important;
}

main .cookie-buttons {
    display: inline-block;
    margin: 1em 1.5rem;
}

.cookie-buttons {
    background-color: #000 !important;
    color: #fff !important;
    border-radius: 0 !important;
    padding: .5em;
}

.cookie-buttons:hover,
button.cookie-lang-switcher:hover {
    background-color: var(--highlight-color) !important;
    cursor: pointer;
}

span.cookie-lang-en {
    display: none;
}

button.cookie-lang-switcher {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 2rem !important;
    min-width: 25px !important;
    height: 2rem !important;
    min-height: 25px !important;
    z-index: 100 !important;
    padding: .5em !important;
}

.cookie-notice-hidden button,
.cookie-notice-hidden~div#header-wrapper {
    display: none !important;
}

#cn-notice-buttons {
    margin-top: 1em;
}

/* --------------------------------*/
/* --- accordion              -----*/
/* --------------------------------*/
.accordion {
    margin-bottom: 1em;
}

.accordion-button:hover {
    cursor: pointer;
}

.accordion-button .icon-arrow-down {
    display: inline-block;
    transition: transform .2s ease-out;
}

.accordion-button.active .icon-arrow-down {
    transform: rotate(-180deg);
}

.accordion-button~.panel {
    overflow: hidden;
    max-height: 0;
}

.accordion-button~.panel .h4-style {
    margin-bottom: 0;
}

.icon-arrow-down {
    font-size: .75em;
    margin-left: .5em;
	display: inline-block;
    transition: transform .2s ease-in;
}
span.icon-arrow-down:hover {
    cursor: pointer;
}
.icon-arrow-down.active {
    transform: rotate(-180deg);
}
.icon-arrow-down.rotate-90 {
    transform: rotate(-90deg);
    margin: 0;
}
button.active .icon-arrow-down {
    transform: rotate(90deg);
}
/* --------------------------------*/
/* ---  buttons               -----*/
/* --------------------------------*/
button.mobil {
    position: fixed;
    margin: 0;
    padding: 0;
    font-size: 1.5em;
    z-index: 950;
    width: 4vw;
    min-width: 32px;
    height: 4vw;
    min-height: 32px;
    top: var(--mobil-header-height);
}
button.mobil.btn-left {
    left: 0;
    transition: left .5s ease-in;
}
/* --------------------------------*/
/* ---  slider                -----*/
/* --------------------------------*/
.slider {
    -webkit-appearance: none;
    height: 5px;
    border-radius: 5px;  
    background: #999;
    outline: none;
    -webkit-transition: .2s;
    transition: opacity .2s;
    width: 100px;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.25vw;
    min-width: 16px;
    height: 1.25vw;
    min-height: 16px;
    border-radius: 50%; 
    background: #fff;
    cursor: pointer;
}
.slider::-webkit-slider-thumb,
.slider::-moz-range-thumb {
    width: 1.25vw;
    min-width: 16px;
    height: 1.25vw;
    min-height: 16px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}
/* --------------------------------*/
/* --- loading                -----*/
/* --------------------------------*/
#loading-spinner,
#loading-spinner-map {
    position: fixed;
    top: var(--header-height);
    left: 30%;
    width: 100%;
    height: 100%;
    z-index: 2000;
}

#loading-spinner::after,
#loading-spinner-map::after {
    top: 30%;
    left: 30%;
}

/* --------------------------------*/
/* --- category toggle        -----*/
/* --------------------------------*/
.sub-categories-container {
    overflow: hidden;
    max-height: 0;
}

/* --------------------------------*/
/* --- search                 -----*/
/* --------------------------------*/
#search-button {
    padding: 0;
    font-size: 1.5em;
    color: #000;
    background-color: #fff;
}

#search-console {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fff;
    z-index: 1010;
    align-items: center;
    justify-content: center;
}

#search-button.active+#search-console {
    display: flex;
}

#searchform {
    width: 40%;
    min-width: 150px;
    max-width: 400px;
}

input[class="searchfield"] {
    flex-basis: 90%;
}

#searchsubmit {
    padding: 0.35em 0.25em 0.15em;
    font-size: 1.25em;
}

#search-console--close {
    position: absolute;
    right: 0;
    font-size: 1.2em;
    color: #000;
    background-color: #fff;
}

/* --------------------------------*/
/* --- header                 -----*/
/* --------------------------------*/

#main-header {
    position: fixed;
    top: 0;
    width: 100%;
    min-height: 125px;
    height: 18vh;
    max-height: 175px;
    padding: .5rem 3vw 3vh;
    padding: .5rem var(--gap-x) 3vh;
    font-family: var(--font-family-lvl2);
    background-color: #fff;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 1000;
}

#main-header>* {
    margin: 0;
}

#main-header>*:first-child {
    flex-basis: 20%;
    margin-left: 0;
    padding-left: 0;
}

#main-header>div:last-child {
    height: 100%;
    margin-right: 0;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#main-header ul {
    margin: 0;
}

img#logo-archaeo {
    width: 100%;
    min-width: 200px;
    max-width: 350px;
}

#main-header>div>div:first-child {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#main-header>div>div:first-child>* {
    flex-shrink: 1;
}

#leagle-menu a {
    font-size: .9vw;
    font-size: clamp(0.6rem, 0.2121rem + 0.6061vw, 1rem);
}

#leagle-menu a {
    color: #777;
}

#logo-lfa {
    width: 100%;
    min-width: 150px;
    max-width: 400px;
}

#main-menu {
    margin-bottom: 1.15vw;
    margin-right: 5px;
    font-family: var(--font-family-lvl1);
    font-size: 2.3vw;
    font-size: clamp(1.5rem, 2vw, 2.3rem);
    text-transform: uppercase;
}

#mobil-header-seperator {
    display: none;
}

/* --------------------------------*/
/* --- main                   -----*/
/* --------------------------------*/
main {
    display: block;
    /* for IE */
    position: relative;
    width: 100%;
    min-height: 82vh;
    min-height: var(--main-height);
    margin-top: clamp(125px, 18vh, 175px);
}

/* --------------------------------*/
/* --- footer                 -----*/
/* --------------------------------*/
body>footer {
    display: none;
}

/* --------------------------------*/
/* --- seperate elements      -----*/
/* --------------------------------*/
#cc-image {
    display: block;
    position: fixed;
    bottom: 4px;
    right: -52px;
    width: 80px;
    opacity: 0.3;
    z-index: 1000;
    transition: opacity 1s, right 1s;
}

#cc-image img {
    width: 100%;
}

#cc-image:hover,
.cc-image--touch,
#cc-image:focus {
    right: 0;
    opacity: 1;
}


/* --------------------------------*/
/* --- home                   -----*/
/* --------------------------------*/
#home-background-container>*:not(#slideshow-time) {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

}

#home-overlay {
    width: 30%;
    width: var(--left-container-width);
    height: 82vh;
    height: var(--main-height);
}

#home-text {
    /* width: 25%;
    bottom: auto; */
    color: #91a6bc;
    z-index: 10;
    /* padding-left: var(--gap-x); */
    padding: 8vh var(--gap-x) 15px;
}

#home-text h1 {
    font-size: 2.5em;
    font-size: clamp(1.5em, 4vw, 2.5em);
    margin: 0;
    margin-bottom: 5vh;
}

#home-text p {
    font-size: 1.3em;
    font-size: clamp(1em, 2vw, 1.3em);
}

/* --------------------------------*/
/* --- finds                  -----*/
/* --------------------------------*/
#finds-location {
    max-height: 80vh;
    position: relative;
}

#finds-location>* {
    position: fixed;
    top: 20vh;
}

#location-districts {
    width: 30%;
    width: var(--left-container-width);
    left: 0;
}
#location-districts .image-container {
    align-items: flex-start;
}
#location-districts .image-container img {
    width: 100%;
    object-fit: contain;
}
/* #finds-location div:nth-child(2):not(.find-position) { */
#location-map {
    width: 65%;
    height: 65vh;
    right: var(--gap-x);
}

#finds-location div:last-child:not(.find-position) {
    /* height: 15vh;
    max-height: 125px; */
    height: clamp(100px, 10vh, 125px);
    top: auto;
    bottom: 0;
    left: var(--gap-x);
    right: var(--gap-x);
}

#map-select-overlay,
.overlay-black {
    z-index: 100;
    position: absolute;
    top: 1vh;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
}

#map-select-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay-black {
    background-color: #000;
    opacity: .8;
}

.overlay-window {
    z-index: 101;
    width: 30vh;
    min-width: 350px;
    background-color: #fff;
}

.overlay-window>h2 {
    background-color: #000;
    padding: .5em 1em;
    color: #fff;
    margin: 0;
    margin-bottom: 1em;
}

.overlay-window>p {
    padding-left: 1.3em;
    font-size: 1.2em;
}

/* DISTRICTS */
#location-districts input:checked+label {
    /* color: white !important;        overwrite inline style from js */
    /* background-color: #000; */
}

#location-districts label {
    display: block;
    width: 90%;
    padding: clamp(.05em, 2vw, .25em);
    padding-left: var(--gap-x);
    font-size: clamp(1em, 2vw, 1.2em);
}

/* #location-districts + button {
    display: none;
}
#location-districts select {
	display: none;
} */
/* #form-districts input {
    display: none;
} */
#location-districts .image-wrapper {
    margin-top: 3vh;
    margin-left: 9%;
    flex-wrap: wrap;
    width: 91%;
}

#location-districts .image-wrapper>* {
    flex-shrink: 1;
    width: 100%;
    /* workaround chrome flex image scaling */
    height: 100%;
    /* workaround chrome flex image scaling */
    min-width: 0;
    /* workaround chrome flex image scaling */
}

/* MAP */
.map-finds-position {
    fill: #000;
}

#finds-location svg {
    width: 95%;
    height: 100%;
    margin: 15px auto;
}

.map-svg-polygon {
    fill: var(--color-map);
}

.svg-normal:hover {
    fill: var(--highlight-color-map);
    cursor: pointer;
}

#svg-elbe:hover {
    fill: none;
}

.svg-river {
    fill: none;
    stroke: #91A6BC;
    stroke-width: 7.5;
}

.svg-group {
    visibility: hidden;
}

.map-finds-position {
    fill: #000;
    transform-box: fill-box;
    transform-origin: center;
    transform: rotate(45deg);
}

.map-finds-position:hover {
    fill: var(--highlight-color);
    cursor: pointer;
}

.map-finds-position--box {
    position: absolute;
    color: #fff;
    background-color: #000;
    font-size: 1rem;
    padding: 5px;
}

.map-finds-position--box a {
    display: block;
}

#svg-rect-container g {
    display: none;
}

#svg-rect-container g.active {
    display: initial;
}

/* TIME */
#location-time>* {
    display: flex;
    justify-content: space-between;
    height: 100%;
}

#location-time fieldset {
    border: none;
    text-align: center;
    display: flex;
    margin: 0;
    margin-right: 10px;
    padding: 0;
    position: relative;
    min-width: 150px;
    flex-grow: 1;
}

#location-time fieldset>label {
    /* flex-shrink: 1; */
}

#location-time fieldset:last-child {
    margin-right: 0;
}

#location-time legend {
    background-color: #000;
    color: #fff;
    font-weight: bold;
    font-size: clamp(1.2em, 2vw, 1.75em);
    text-transform: uppercase;
    width: 100%;
    height: 30%;
    min-height: 1.5em;
    position: absolute;
    bottom: 0;
}

/* #location-time input {
    display: none;
} */
#location-time label {
    height: 70%;
    max-height: 150px;
}

#location-time legend,
#location-time label {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .2vh .5vw;
}

#location-time input:checked+label {
    background-color: #000;
    color: #fff;
}

/* --------------------------------*/
/* --- top 10                 -----*/
/* --------------------------------*/
#top10 {
    width: 96%;
    height: calc(97vh - var(--header-height));
    margin: 1.5vh auto;
    display: flex;
    /*for IE */
    flex-wrap: wrap;
    /*for IE */
    justify-content: space-between;
    /*for IE */
    display: grid;
    grid-template-columns: 19.2% 1% 19.2% 1% 19.2% 1% 19.2% 1% 19.2%;
    grid-template-rows: 48% 2% 24% 2% 24%;
    grid-template-areas:
        " top1 . top2 top2 top2 . top3 . top4 "
        " top1 . . . . . top3 . . "
        " top1 . top6 . top7 . top3 . top10 "
        " . . top6 . . . . . top10 "
        " top5 . top6 . top8 . top9 . top10 ";
}

#top10>div {
    border: 1px solid #000;
    position: relative;
    flex-basis: 19.2%;
    /*for IE */
    align-content: space-between;
    /*for IE */
}

#top10 div>span {
    position: absolute;
    bottom: .1em;
    right: .3em;
    font-size: 170%;
    font-family: var(--font-family-lvl1);
    font-weight: bold;
}

#top10 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#top10-1 {
    grid-area: top1;
}

#top10-1 div {
    background-size: auto 80% !important;
    background-position-x: left !important;
}

#top10-2 {
    grid-area: top2;
}

#top10-3 {
    grid-area: top3;
}

#top10-3 div {
    background-size: auto 85% !important;
    background-position-x: left !important;
}

#top10-4 {
    grid-area: top4;
}

#top10-5 {
    grid-area: top5;
}

#top10-6 {
    grid-area: top6;
}

#top10-7 {
    grid-area: top7;
}

#top10-8 {
    grid-area: top8;
}

#top10-9 {
    grid-area: top9;
}

#top10-10 {
    grid-area: top10;
}

/* --------------------------------*/
/* --- archive                -----*/
/* --------------------------------*/
#archive {
    margin: 15px auto;
    position: relative;
}

#archive-categories {
    position: absolute;
    top: 0;
    width: 28%;
    padding: 0 15px 0 0;
    line-height: 2.5em;
}

/* first level */
#archive-categories>ul {
    margin: 0;
    padding-left: 0;
}

#archive-categories>ul>li {
    margin-bottom: 1vh;
    padding: 0;
    font-family: var(--font-family-lvl1);
    font-size: clamp(1.5em, 1vw, 2em);
    font-weight: bold;
}

/* second and third level */
#archive-categories>ul ul {
    padding-left: clamp(.5em, 1vw, 1em);
    font-family: var(--font-family-lvl3);
    font-size: .7em;
    font-weight: normal;
}

#archive>#archive-finds-result {
    margin-left: 30%;
}

.loading-spinner-ring,
#filter-container {
    position: sticky;
    top: 0;
    padding: 0 0 15px;
    background-color: #fff;
    z-index: 900;
}

#filter-container button {
    font-size: .8rem;
    padding: .2rem;
    min-height: auto;
    margin-right: .5rem;
}

#archive section {
    display: flex;
    flex-wrap: wrap !important;

}

#archive section>*:not(#filter-container) {
    flex-grow: 1;
    height: 20vh;
    min-width: 230px;
    min-height: 230px;
    margin-bottom: 2vh;
}

section#archive-finds-container {
    padding-right: 0;
    /* padding-top: 2.5rem; */
}

section#archive-finds-container a {
    display: block;
}

section#archive-finds-container article {
    width: 100%;
    height: 100%;
    border: 1px solid #000;
}

section#archive-finds-container div:not(#filter-container) {
    width: 100%;
    height: 70%;
    overflow: hidden;
    border-bottom: 1px solid #000;
    padding: 1vh;
}

section#archive-finds-container div>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

section#archive-finds-container footer {
    height: 4em;
    padding: 2%;
}

section#archive-finds-container h2 {
    margin: 0;
    color: #000;
}

/* --------------------------------*/
/* --------    process !!!!    --------*/
/* --------------------------------*/
#process-wrapper {
    width: 100%;
    height: calc(97vh - var(--header-height));
    margin: 2% 0;
    display: grid;
    grid-template-columns: 30.5% 1% 12% .5% 12% .5% 12% 1% 30.5%;
    grid-template-rows: 40% 1% 17% 2% 40%;
    grid-template-areas:
        " excavation . scanner scanner scanner scanner scanner . museum "
        " excavation . . . . . . . museum "
        " excavation . scanner-1 . scanner-2 . scanner-3 . museum "
        " excavation . . . . . . . museum "
        " excavation . restore restore restore restore restore . museum "
}

#process-wrapper>div {
    border: 1px solid #000;
    position: relative;
    padding: 0 2em;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#process-wrapper div#excavation {
    grid-area: excavation;
    background-image: url("./assets/images/3dlabor-excavation.jpg");
    background-position: top;
}

#process-wrapper div#scanner {
    grid-area: scanner;
    background-image: url("./assets/images/3dlabor-scanner.png");
}

#process-wrapper div#scanner-1 {
    grid-area: scanner-1;
    background-image: url("./assets/images/3dlabor-scanner-1.png");
}

#process-wrapper div#scanner-2 {
    grid-area: scanner-2;
    background-image: url("./assets/images/3dlabor-scanner-2.png");
}

#process-wrapper div#scanner-3 {
    grid-area: scanner-3;
    background-image: url("./assets/images/3dlabor-scanner-3.png");
}

#process-wrapper div#restore {
    grid-area: restore;
    background-image: url("./assets/images/3dlabor-restore.jpg");
}

#process-wrapper div#museum {
    grid-area: museum;
    background-image: url("./assets/images/3dlabor-museum.jpg");
    background-position: top;
}

#process-wrapper .overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
    background-color: var(--highlight-color);
    opacity: 0;
}

#process-wrapper .text,
#process-wrapper .text-scanner {
    position: absolute;
    right: 2em;
    top: 1em;
    left: 2em;
    opacity: 0;
}

#process-wrapper .text-scanner {
    right: .5em;
    top: .5em;
    left: .5em;
    text-align: center;
}

#process-wrapper h2 {
    margin-top: 1em;
    font-family: var(--font-family-lvl2);
}

#process-wrapper .text-scanner h2 {
    margin-top: .5em;
}

#process-wrapper p {
    font-family: var(--font-family-lvl3);
}

#process-wrapper>div:hover .overlay {
    opacity: .7;
}

#process-wrapper>div:hover .text {
    opacity: 1;
}

#process-wrapper>div .text a {
    color: var(--main-color-fonts)
}

#process-wrapper>div a:hover .text {
    color: var(--main-color-fonts);
}

/* --------------------------------*/
/* --- glossary               -----*/
/* --------------------------------*/
#glossary {
    position: relative;
}

#glossary-form {
    position: fixed;
    top: var(--header-height);
    left: var(--gap-x);
    right: var(--gap-x);
    width: auto;
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
    background-color: #fff;
    z-index: 999;
}

#glossary-form label {
    font-size: clamp(1rem, 0.8889rem + 0.1736vw, 2rem);
    padding: .2em .5em .1em;
    flex-shrink: 1;
}

#glossary>div {
    padding-top: 4rem;
}

/* --------------------------------*/
/* --- find objects           -----*/
/* --------------------------------*/
#find-object-container {
    height: 77vh;
    margin: 0;
    margin-right: var(--gap-x);
    display: flex;
    justify-content: space-between;
}

#button-container {
    flex-basis: 5vw;
    min-width: 32px;
    margin-right: 3vw;
}

#button-container>button {
    color: #000;
    background-color: #fff;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 2rem;
    margin-bottom: 1rem;
    padding: .25rem;
    padding-right: 1rem;
}

#button-container>button:hover {
    color: var(--highlight-color);
}

#button-container>button.active {
    background-color: #000;
    color: #fff;
}

#view-3d {
    flex-basis: 45vw !important;
    flex-grow: 1;
    flex-shrink: 1;
    margin-right: 3vw;
}

#view-3d canvas {
    width: 100% !important;
    height: 100% !important;
}

/* #find-object-container > *:nth-child(3) {
    flex-basis: 40vw;
    flex-shrink: 1;
    
} */
#object-data-container {
    height: 100%;
    flex-basis: 40vw;
    min-width: 400px;
    flex-shrink: 1;
}

#object-data-container>*:first-child {
    margin-top: 5px;
}

#object-data-container #object-data {
    height: 85%;
    overflow-y: scroll;
}

#find-object-container img {
    /* max-width: ; */
}
.switch-default {
	margin-bottom: 0;
}
#related-objects-images {
    display: flex;
    flex-wrap: wrap;
}

#related-objects-images>* {
    flex-basis: 10vw;
    height: 10vw;
    min-width: 100px;
    max-width: 200px;
    min-height: 100px;
    max-height: 200px;
    overflow: hidden;
    margin: 10px;
}

#related-objects-images>*>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#return-map {
    text-align: right;
    border-top: 1px solid #000;
    padding-top: .75em;
}

#return-map a {
    color: #000 !important;
    height: 1.5em;
    font-weight: bold;
}

/* --------------------------------*/
/* --- search                 -----*/
/* --------------------------------*/
#searchform {
    display: flex;
}

#searchform label {
    display: none;
}

/* --------------------------------*/
/* --- contact                -----*/
/* --------------------------------*/
.contact {
    width: 75%;
    min-width: 300px;
    max-width: 700px;
    margin: auto;
}

.contact input[type="text"],
.contact textarea,
.contact input[type="email"],
.contact select {
    width: 100%;
    min-width: 300px;
    display: block;
    border: 1px solid black;
    border-radius: 0;
    line-height: 1.5em;
    font-size: 1em;
    padding: .2em .5em;
}

.contact option {
    font-size: 1em;
    padding: 0;
}

.contact input[type="submit"] {
    width: 10%;
    min-width: 100px;
    height: 3vh;
    min-height: 32px;
    background-color: #000;
    color: #fff;
    cursor: pointer;
}

.contact input[type="submit"]:hover {
    background-color: var(--highlight-color);
}

.wpcf7-response-output,
.wpcf7-validation-errors {
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--highlight-color);
}

/* --------------------------------*/
/* --- partner                -----*/
/* --------------------------------*/
.partner {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 1.5em;
}

.partner>*:first-child {
    flex-basis: 35%;
}

.partner>*:last-child {
    flex-basis: 60%;
}
.partner img {
    width: 80%;
    min-width: 150px;
    max-width: 350px;
}
.additional-mention--seperator {
	margin-top: 2rem;
	border-top: 1px solid black;
	height: 2rem;
	border-bottom: 1px solid black;
	margin-bottom: 2rem;
}
.additional-mention {
	text-align: center;
}
/* --------------------------------*/
/* --- 404                    -----*/
/* --------------------------------*/
.page-404 {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

/* --------------------------------*/
/* --- media queries          -----*/
/* --------------------------------*/
@media only screen and (min-width: 1200px) {}

@media only screen and (max-width: 1024px) {
    select {
        display: block;
        width: 100%;
        height: 100%;
        padding-left: 10px;
        font-size: 1.2rem;
        background-color: #fff;
        border: 1px solid #000;
        border-radius: 0;
    }

    .mobil {
        display: initial;
    }

    .desktop {
        display: none;
    }

    #cc-image {
        bottom: auto;
        top: 4px;
    }

    nav ul {
        flex-direction: column;
    }
    #loading-spinner,
    #loading-spinner-map {
        top: var(--mobil-header-height);
        left: 0;
        bottom: var(--mobil-footer-height);
        height: auto;
    }

    #loading-spinner::after,
    #loading-spinner-map::after {
        top: 42%;
        left: 48%;
    }
    /* --------------------------------*/
    /* --- voice reader web 20    -----*/
    /* --------------------------------*/
    .vrweb_hover_player {
        position: fixed !important;
        left: calc(50vw - 124px) !important;
        top: 0 !important;
        right: auto !important;
        z-index: 1200;
    }

    /* --------------------------------*/
    /* --- header  (max 1024px)   -----*/
    /* --------------------------------*/
    #main-header {
        height: 10vh;
        min-height: 100px;
        max-height: 125px;
        align-items: center;
        padding: 0 15px;
    }

    #main-header>*:first-child {
        margin-top: 25px;
    }

    #main-header>div:last-child {
        display: none;
    }

    #mobil-header-container {
        /* position: fixed;
        width: 50%;
        min-width: 100px;
        top: 15px;
        right: 15px;
        display: flex;
        justify-content: flex-end;
        align-items: center; */
    }

    #language {
        position: fixed;
        top: 4px;
        right: 2vw;
    }

    #search-button {
        position: fixed;
        top: 4px;
        right: 105px;
        max-width: 32px;
    }

    #voice-reader {
        position: fixed !important;
        display: block !important;
        top: 4px;
        right: 120px;
        width: 72px;
        padding: 0;
    }

    #mobil-header-seperator {
        display: flex;
        align-items: center;
        position: fixed;
        top: clamp(100px, 10vh, 125px);
        width: 100%;
        height: 4vh;
        min-height: 32px;
        max-height: 64px;
        padding: 0 15px;
        background-color: black;
        color: #fff;
        z-index: 999;
    }

    #mobil-header-seperator h1 {
        flex-basis: 100%;
        white-space: nowrap !important;
        font-size: clamp(1.2rem, 1.0373rem + 0.7229vw, 1.5rem);
    }

    /* --------------------------------*/
    /* --- main (max 1024px)      -----*/
    /* --------------------------------*/
    main {
        height: var(--mobil-main-height);
        /* min-height: calc(100% - 230px); */
        margin-top: var(--mobil-header-height);
        padding-bottom: var(--mobil-footer-height);
    }

    /* --------------------------------*/
    /* --- home (max 1024px)      -----*/
    /* --------------------------------*/
    #home-overlay {
        width: 100%;
        max-width: 576px;
        height: var(--mobil-main-height);
        padding: 15px;
    }

    #home-overlay>* {
        top: auto;
        height: 30vh;
        min-height: 175px;
    }

    #home-text {
        font-size: 1.2em;
        padding: 5vh 15px 15px;
    }

    #home-overlay>h1 {
        margin-bottom: 2vh;
    }

    /* --------------------------------*/
    /* --- finds (max 1024px)     -----*/
    /* --------------------------------*/
    .main-finds {
        height: auto;
        min-height: auto;
        position: absolute;
        /* top: clamp(132px, 14vh, 214px); */
        top: 0;
        /* bottom: var(--mobil-footer-height); */
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #form-button-container--mobil {
        flex-basis: 5%;
        /* flex-shrink: 1; */
        display: flex;
        min-height: 32px;
    }

    #form-button-container--mobil>*:first-child {
        flex-basis: 90vw;
    }

    #form-button-container--mobil>*:last-child {
        flex-basis: 10vw;
        position: initial;
    }

    #finds-location {
        flex-basis: 70%;
        flex-grow: 1;
        flex-shrink: 1;
        /* max-height: 55vh; */
        min-height: calc(var(--mobil-header-height) - var(--mobil-footer-height) - 64px - 32px);
    }

    #location-map {
        position: relative;
        width: calc(100% - 30px);
        max-width: 700px;
        height: calc(100% - 30px);
        overflow: hidden;
        margin: 0 auto;
        padding: 15px;
        right: auto;
        top: auto;
    }

    #finds-location svg {
        width: 96%;
        height: 100%;
        margin: 0 auto;
        object-fit: contain;
    }

    .map-finds-position {
        width: 25px;
        height: 25px;
    }

    #form-times--mobil {
        flex-basis: 10%;
        /* flex-shrink: 1; */
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 64px;
    }

    #form-times--mobil>* {
        flex-basis: 50%;
        min-height: 32px;
    }

    label[for="select-times--mobil"] {
        display: flex;
        justify-content: center;
        align-items: baseline;
        width: 100%;
        font-weight: bold;
        font-size: clamp(1.2em, 3vh, 1.75em);
        text-transform: uppercase;
        color: #fff;
        background-color: #000;
    }

    /* --------------------------------*/
    /* --- top10   (max 1024px)   -----*/
    /* --------------------------------*/
    #top10 {
        padding: 15px 0;
        height: calc(94vh - var(--mobil-header-height));
    }

    /* --------------------------------*/
    /* --- archive (max 1024px)   -----*/
    /* --------------------------------*/
    #archive {
        position: relative;
        display: block;
        width: auto;
        height: 100%;
        padding: 15px 0;
        margin: 0 calc(5vw - 15px) 0 5vw;
    }

    #archive-categories {
        position: fixed;
        width: 30vw;
        min-width: 350px;
        max-width: 500px;
        top: clamp(132px, 14vh, 214px);
        bottom: var(--mobil-footer-height);
        left: clamp(-350px, -30vw, -500px);
        padding: 15px 5vw 0 15px;
        overflow-y: scroll;
        border-right: 1px solid #000;
        background-color: #fff;
        z-index: 940;
        transition: left .5s ease-in;
    }

    #archive-categories.active {
        left: 0;
    }

    #archive>button.active {
        left: clamp(350px, 30vw, 100%);
    }

    #archive>button.active span {
        transform: rotate(90deg);
    }

    #archive>div:not(#loading-spinner) {
        margin-left: auto;
    }

    #archive-finds-container {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    #filter-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* --------------------------------*/
    /* --- glossary (max 1024px)  -----*/
    /* --------------------------------*/
    #glossary-form {
        position: fixed;
        overflow-y: scroll;
        top: var(--mobil-header-height);
        left: 0;
        right: auto;
        bottom: var(--mobil-footer-height);
        width: 38px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 1rem 0;
        z-index: 501;
        text-align: center;
        border-right: 1px solid #000;
        direction: rtl;
    }

    #glossary-form label {
        width: 100%;
        height: 32px;
        padding-left: 5px;
    }

    #glossary-form label:last-child {
        display: none;
    }

    #glossary>div {
        padding-top: 15px;
        padding-left: 35px;
    }

    /* --------------------------------*/
    /* --- single (max 1024px)    -----*/
    /* --------------------------------*/
    #find-object-container {
        position: relative;
        height: 79.5vh;
        margin: 0;
        overflow: hidden;
		position: relative;
    }

    #button-container {
        position: absolute;
        padding: 15px 0;
        border-right: 1px solid #000;
		width: 40px;
        transition: left .2s ease-in;
		top: 0;
		bottom: 0;
		left: -40px;
		z-index: 900;
        background-color: #fff;
    }

    #button-container>button {
        padding: .25rem;
    }
    #btn-controls {
		font-size: 1.1em;
        left: 0;
        transition: left .2s ease-in;
    }
	#btn-controls > span {
		font-size: 1.1em;
	}
    #btn-controls.active {
        left: 40px;
    }
    #button-container.active {
        left: 0;
    }
    #view-3d {
        margin-right: 0;
        height: calc(100% - 16px);
    }

    #view-3d>div.corner {
        display: none;
    }

    button#find-objects-info {
        width: 3rem;
        left: auto;
        right: 0;
        transition: left .5s ease-in, right .5s ease-in;
        z-index: 960;
        font-size: 1em;
    }

    #object-data-container {
        position: absolute;
        width: 100%;
        height: auto;
        right: -100%;
        top: 0;
        bottom: 0;
        padding: 40px 15px 0;
        background-color: #fff;
        overflow-y: scroll;
        z-index: 500;
        transition: right .5s ease-in;
        overflow: hidden;
        min-width: auto;
    }

    button#find-objects-info.active {
        right: calc(100% - 3rem);
    }

    button#find-objects-info.active+#object-data-container {
        right: 0;
    }

    /* --------------------------------*/
    /* --- partner (max 1024px)   -----*/
    /* --------------------------------*/
    .partner {
        margin-top: 1em;
    }

    .partner>*:first-child {
        flex-basis: 35%;
    }

    .partner>*:last-child {
        flex-basis: 60%;
    }

    /* --------------------------------*/
    /* --- footer (max 1024px)    -----*/
    /* --------------------------------*/
    body>footer .row {
        margin: 0;
    }

    body>footer,
    body>footer button {
        height: 5vh;
        min-height: 32px;
        max-height: 64px;
        color: #fff;
    }

    body>footer {
        display: block;
        position: fixed;
        bottom: calc(-40vh + clamp(32px, 5vh, 64px));
        left: 0;
        right: 0;
        background-color: #fff;
        transition: bottom .5s ease-in;
        z-index: 1001;
        min-height: 40vh;
    }

    body>footer.active {
        bottom: 0;
    }

    body>footer button {
        width: 100%;
        background-color: #000;
    }

    body>footer>div {
        width: 100%;
        height: calc(100% - 30px);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
    }

    body>footer>div>* {
        flex-basis: 50%;
    }

    body>footer>div>*:last-child {
        height: 90%;
        padding-left: 15px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    body>footer>div>*:last-child>* {
        flex-grow: 1;
    }

    #main-menu--mobile {
        flex-basis: 50vw;
        font-size: 3.5vh;
        font-family: var(--font-family-lvl1);
        text-transform: uppercase;
        border-right: 1px solid #000;
    }

    #main-menu--mobile li {
        margin: 7.5px 0;
    }

    #logo-lfa--mobile {
        width: 100%;
        max-width: 300px;
    }

    #leagle-menu--mobil ul {
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #leagle-menu-list--mobil a {
        font-size: 2vh;
        font-family: var(--font-family-lvl2);
    }

}

@media only screen and (max-width: 992px) {

    /* --------------------------------*/
    /* --- wordpress classes      -----*/
    /* --------------------------------*/
    .alignnone {
        margin-left: 2%;
        margin-right: 2%;
        margin-bottom: 1%;
    }

    .alignleft,
    .alignright,
    .aligncenter {
        float: none;
        width: 96% !important;
        max-width: 500px;
        height: auto;
        margin: 2% auto 4%;
        display: block;
    }

    .alignleft img,
    .alignright img,
    .aligncenter img {
        width: 100% !important;
        height: auto !important;
        ;
    }

    /* --------------------------------*/
    /* --- partner (992px)        -----*/
    /* --------------------------------*/
    .partner {
        justify-content: center;
        flex-wrap: wrap;
    }

    .partner>*:first-child {
        flex-basis: 100%;
        text-align: center;
    }

    .partner>*:last-child {
        flex-basis: 100%;
    }

    /* --------------------------------*/
    /* ---- process (992px)      ------*/
    /* --------------------------------*/
    .main-process {
        padding: 10px 0 0;
    }

    .main-process>div {
        padding-bottom: var(--mobil-footer-height);
    }

    #process-wrapper {
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    #process-wrapper>div {
        flex-basis: 29%;
        height: 30vh;
        flex-shrink: 1;
        flex-grow: 1;
        margin: 1%;
    }

    #process-wrapper>div#process-3 {
        flex-basis: 100%;
        height: 40vh;
    }

    #process-wrapper h2.small {
        font-size: 1.3em;
    }
}

@media only screen and (max-width: 768px) {

    /* --------------------------------*/
    /* --- top10 (min 768px)      -----*/
    /* --------------------------------*/
    .main-top10 {
        padding-bottom: 5vh;
    }

    #top10 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        height: auto;
        padding: 0 0 var(--mobil-footer-height);
    }

    #top10>div {
        flex-basis: 43vw;
        flex-grow: 1;
        flex-shrink: 1;
        height: 40vw;
        min-height: 100px;
        max-height: 300px;
        margin: 2%;
        padding: 2%;
    }

    #top10 img {
        object-fit: contain;
    }
}

@media only screen and (max-width: 576px) {

    /* --------------------------------*/
    /* --- voice reader web 20    -----*/
    /* --------------------------------*/
    .vrweb_hover_player {
        left: 0 !important;
    }

    .vrweb_settings_wrapper {
        top: 45px !important;
        right: 0 !important;
        position: fixed !important;
    }

    /* --------------------------------*/
    /* ---- header (576px)       ------*/
    /* --------------------------------*/
    /* #search-button {
        top: 32px;
        right: 15px;
    } */
    #voice-reader {
        right: 135px;
    }

    /* --------------------------------*/
    /* ---- archive (576px)      ------*/
    /* --------------------------------*/
    #archive-categories {
        width: 100vw;
        left: -100vw;
        min-width: auto;
        max-width: none;
    }

    #archive>button.active {
        left: calc(100vw - clamp(32px, 4vw, 64px));
    }

    #archive-finds-container>a {
        min-width: 100px !important;
        padding-left: 0px;
    }

    /* --------------------------------*/
    /* ---- process (576px)      ------*/
    /* --------------------------------*/
    #process-wrapper>div {
        flex-basis: 100%;
        height: 40vh;
        min-height: 200px;
    }
}

@media only screen and (max-width: 400px) {

    /* --------------------------------*/
    /* ---- header (400px)       ------*/
    /* --------------------------------*/
    #voice-reader {
        right: 145px;
    }
}