* {
    padding: 0;
    margin: 0;
    image-rendering: -webkit-optimize-contrast;
}

body {
    font-family: 'WorkSans-Light';
}

.top {
    position: absolute;
}

img {
    /*firefox bug fix: flickering elements*/
    transform: translate3d(0px, 0px, 1px);
}

.carousel-container {
    margin: auto;
    width: 80%;
}

.center {
    font-size: 3em;
    text-align: center;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -55%);
    transform: translate(-50%, -55%);
}

.logo-large {
    color: #1A1A1A;
    opacity: 1;
    font-family: 'Longhaul';
    font-weight: bold;
    font-size: 2em;
    text-align: center;
    /*firefox bug fix: flickering elements*/
    transform: translate3d(0px, 0px, 1px);
    animation: animate-logo-large 1.5s forwards;
}

@keyframes animate-logo-large {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.logo-large>span {
    padding-right: 30px;
    color: #BFBFBF;
    font-size: 0.7em;
}

hr.introtext {
    border: none;
    height: 1px;
    background-color: white;
    width: 500%;
    text-align: right;
    transform: translateX(-80%);
    animation: animate-line 1s forwards;
}

@keyframes animate-line {
    from {
        transform: translate(-500%);
    }
    to {
        transform: translate(-80%);
    }
}

p.introtext {
    font-family: 'D-DINExp-Italic';
    padding-top: 20px;
    text-align: right;
    color: #BFBFBF;
    padding-right: 0;
    line-height: 30px;
    font-size: 0.5em;
    animation: animate-introtext 1.5s forwards;
}

@keyframes animate-introtext {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

p {
    text-align: center;
    font-size: large;
    color: black;
    padding-left: 15px;
    padding-right: 15px;
    /*firefox bug fix: flickering elements*/
    transform: translate3d(0px, 0px, 1px);
}

p.carousel-cell:first-of-type,
p.carousel-cell:last-of-type {
    color: white;
}

.content-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.content-column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
}

.nav {
    overflow-y: visible;
    display: flex;
    justify-content: space-between;
    position: absolute;
    z-index: 20000;
    text-align: center;
    /*firefox bug fix: flickering elements*/
    transform: translate3d(0px, 0px, 1px);
    padding: 0;
    margin: auto;
    content: "";
    height: 80px;
    width: 100%;
    background: none;
    background-color: rgba(255, 255, 255, 1);
    background-repeat: no-repeat;
    background-position: center;
}

.home {
    display: flex;
    justify-content: flex-start;
    margin-left: 10%;
}

.nav a>img {
    margin-top: 0;
    margin-bottom: 0;
    height: 80px;
    width: 120px;
    padding: 0;
    animation: dropDown 700ms linear forwards;
}

.nav a {
    max-height: 80px;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 0;
    margin-left: 0;
    padding: 0 16px;
    text-decoration: none;
    color: black;
    font-size: 16px;
    border: none;
    text-align: center;
    width: auto;
}

.nav a:last-child {
    padding-right: 0;
}

.home a {
    padding: 0;
}

@media (hover: hover) {
    .nav a:hover {
        color: rgb(0, 84, 166);
    }
}

.nav a:active {
    color: rgb(0, 84, 166);
}

.menu {
    display: block;
    position: absolute;
    z-index: 30000;
    background-color: transparent;
    width: 100%;
    height: 6vh;
}

.menu span {
    display: block;
    position: relative;
    content: "";
    width: 65px;
    height: 7px;
    background-color: rgba(0, 0, 0, 0.3);
    margin: 10px 0;
    left: 3%;
    top: 25%;
}

.subMenu {
    margin-right: 10%;
    display: flex;
    justify-content: flex-end;
    flex-direction: unset;
}

.subMenu>a,
.dropdown>a {
    font-size: 16px;
    text-align: center;
    line-height: 80px;
    font-family: 'WorkSans-BoldItalic';
    text-transform: uppercase;
}

.dropdown {
    float: left;
    overflow: hidden;
    font-family: 'WorkSans-BoldItalic';
    display: block;
    flex-direction: unset;
}

.dropdown-content {
    display: none;
    flex-direction: unset;
    position: absolute;
    min-width: 160px;
    max-width: 160px;
    margin: 0;
    /* box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); */
    z-index: 1;
}

.dropdown-content a {
    margin: 0;
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    background-color: white;
}

.dropdown-content a:hover {
    color: rgb(0, 84, 166);
    background-color: rgba(255, 255, 255, 0.95);
}

@media (hover: hover) {
    .dropdown:hover .dropdown-content {
        display: block;
    }
}

.showHideDropdown {
    display: block;
}

.showHideNav {
    flex-direction: unset;
}

@keyframes dropDown {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.wrapper,
.map-wrapper {
    width: 100%;
    height: calc(100vh - 100px - 100px);
    margin-top: 100px;
    margin-bottom: 100px;
}

.box-wrapper {
    width: 100%;
    height: calc(100vh - 100px - 100px);
    margin-top: 100px;
    margin-bottom: 100px;
}

.text-wrapper {
    display: flex;
    height: 50%;
    width: 100%;
}

.text {
    margin-top: auto;
    margin-bottom: 20px;
    line-height: 130%;
}

.map-wrapper .text-wrapper {
    height: 30%;
}

.box-wrapper .text-wrapper {
    height: 50%;
    width: 70%;
    margin: 0 15%;
    text-align: center;
}

.par-text.principi {
    font-family: 'WorkSans-Light';
}

.par-text h1 {
    line-height: 175%;
    font-family: 'WorkSans-SemiBold';
}

.par-text.principi h1>span {
    font-family: 'WorkSans-SemiBoldItalic';
}

.page-line {
    position: fixed;
    bottom: 100px;
    color: black;
    background-color: black;
    border: none;
    height: 1px;
    animation: animate-page-line 1s forwards;
}

.contact-line {
    width: 35%;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 40px;
    color: white;
    background-color: white;
    border: none;
    height: 1px;
}

@keyframes animate-page-line {
    from {
        width: 0;
    }
    to {
        width: 80%
    }
}

.white-round-border {
    padding: 60px 140px;
    border-radius: 5px;
    border: 1px solid white;
}

.white-text {
    color: white;
    font-size: 20px;
}

.contact-label {
    font-size: 30px;
    text-align: center;
}

.white-text a:hover {
    color: crimson;
    font-weight: bold;
}

.white-text a,
.white-text a:link .white-text a:visited,
.white-text a:active {
    text-decoration: none;
    color: white;
}

.semibold {
    font-family: "WorkSans-SemiBold";
}

.italic {
    font-family: "WorkSans-Italic";
}

.box-rect {
    text-align: center;
    height: 50%;
}

.mmap {
    height: 65%;
}

.legend {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    height: 5%;
    transform: translate3d(0px, 0px, 1px);
}

@keyframes animate-legend-show {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.mmap svg {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
    transform: translate3d(0px, 0px, 1px);
}

.legend .line {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80%;
}

.legend .line div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 1%;
    color: white;
    background-color: lightgray;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

#group_1 {
    background: repeating-linear-gradient( -45deg, #003A73, #003A73 5px, #003A73F2 5px, #003A73F2 10px);
}

#group_2 {
    background: repeating-linear-gradient( -45deg, #004891, #004891 5px, #004891F2 5px, #004891F2 10px);
}

#group_3 {
    background: repeating-linear-gradient( -45deg, #005DBA, #005DBA 5px, #005DBAF2 5px, #005DBAF2 10px);
}

#group_4 {
    background: repeating-linear-gradient( -45deg, #177EE5, #177EE5 5px, #177EE5E6 5px, #177EE5E6 10px);
}

#group_5 {
    background: repeating-linear-gradient( -45deg, #4DA6FF, #4DA6FF 5px, #4DA6FFD9 5px, #4DA6FFD9 10px);
}

#group_6 {
    background: repeating-linear-gradient( -45deg, #80BFFF, #80BFFF 5px, #80BFFFCC 5px, #80BFFFCC 10px);
}

#group_7 {
    background: repeating-linear-gradient( -45deg, #B3D9FF, #B3D9FF 5px, #B3D9FFCC 5px, #B3D9FFCC 10px);
}

#group_8 {
    background: repeating-linear-gradient( -45deg, #34393F, #34393F 5px, #34393FF2 5px, #34393FF2 10px);
}

#group_1:hover,
#group_2:hover,
#group_3:hover,
#group_4:hover,
#group_5:hover,
#group_6:hover,
#group_7:hover,
#group_8:hover {
    background: repeating-linear-gradient( -45deg, #9ACD32, #9ACD32 5px, #9ACD32D9 5px, #9ACD32D9 10px);
}

.image-rect {
    height: 50%;
}

.image-rect img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    display: inline-block;
    object-fit: cover;
    background-position: center center;
}

.net-container {
    overflow: hidden;
}

#webBox {
    visibility: hidden;
}

svg {
    overflow: visible;
}

.carousel {
    background: #F2F2F2;
}

.carousel-cell {
    padding: 0;
    width: 100vw;
    height: calc(100vh);
    background: #F2F2F2;
    position: relative;
}

.carousel-cell:first-of-type {
    background: url(../images/background.png);
    -webkit-background-size: cover!important;
    -moz-background-size: cover!important;
    -o-background-size: cover!important;
    background-size: cover!important;
    background-position: center;
    background-repeat: no-repeat;
    image-rendering: -webkit-optimize-contrast;
}

#oProizvodu {
    background: url(../images/box-landscape.png);
    -webkit-background-size: cover!important;
    -moz-background-size: cover!important;
    -o-background-size: cover!important;
    background-size: cover!important;
    background-position: center;
    background-repeat: no-repeat;
    image-rendering: -webkit-optimize-contrast;
}

.carousel-cell:last-of-type {
    position: absolute;
    background: url(../images/last.png);
    -webkit-background-size: cover!important;
    -moz-background-size: cover!important;
    -o-background-size: cover!important;
    background-size: cover!important;
    background-position: center;
    background-repeat: no-repeat;
    image-rendering: -webkit-optimize-contrast;
}

.doza {
    overflow: visible;
    width: 16em;
    height: 16em;
    padding-top: 8%;
    margin-left: 55%;
}

#container {
    position: relative;
    width: 100%;
    height: 100%;
}

#circle0 {
    display: block;
    margin: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 125, 197, 0.03);
    border-radius: 50%;
    border: 1px solid rgba(0, 84, 166, 0.03);
}

#circle1 {
    margin: 12.5%;
    position: absolute;
    width: 75%;
    height: 75%;
    background-color: rgba(0, 125, 197, 0.1);
    border-radius: 50%;
    border: 1px solid rgba(0, 84, 166, 0.03);
}

#circle2 {
    margin-top: 17.5%;
    margin-left: 17.5%;
    position: absolute;
    width: 65%;
    height: 65%;
    background-color: transparent;
    border-radius: 50%;
    border: 1px solid rgba(0, 84, 166, 0.3);
}

#circle3 {
    margin-top: 22.5%;
    margin-left: 22.5%;
    position: absolute;
    width: 55%;
    height: 55%;
    background-color: transparent;
    border-radius: 50%;
    border: 1px solid rgba(0, 84, 166, 0.8);
}

#circle4 {
    display: block;
    position: absolute;
    transition: transform 0.2s;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgb(0, 125, 197), rgb(0, 84, 166));
    border-radius: 50%;
    z-index: -100;
}

#circle5 {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0, 125, 197, 0.15);
    border-radius: 50%;
    z-index: -90;
}

.doza:hover #circle4 {
    z-index: 100;
    transform: scale(1.5);
    -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5);
}

.doza:hover #circle5 {
    z-index: 90;
    display: block;
}

.doza:hover .doza-text {
    font-size: 17px;
    display: block;
    animation: animate-text-show 1.2s linear;
}

@keyframes animate-text-slide {
    0% {
        transform: translateY(75px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes animate-text-show {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes animate-line-text {
    0% {
        width: 0;
        height: 0;
    }
    25% {
        height: 90px;
        width: 0;
    }
    100% {
        width: 350px;
    }
}

.center-text {
    text-align: center;
    display: block;
    position: absolute;
    /*firefox bug fix: flickering elements*/
    transform: translate3d(0px, 0px, 1px);
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -35%);
    transform: translate(-50%, -35%);
    width: 100%;
    font-size: 15px;
    font-family: 'WorkSans-ExtraBoldItalic';
    color: rgb(0, 125, 197);
    text-align: center;
}

.doza-text {
    text-align: center;
    display: block;
    position: absolute;
    /*firefox bug fix: flickering elements*/
    transform: translate3d(0px, 0px, 1px);
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -35%);
    transform: translate(-50%, -35%);
    width: 80%;
    height: 100%;
    color: white;
    display: block;
    z-index: 100;
}

.above {
    font-size: 14px;
    font-family: 'WorkSans-BoldItalic';
    text-align: center;
}

.under {
    font-size: 12px;
    margin-top: 25px;
    font-weight: 100;
    text-align: center;
}

.under>div {
    margin-top: 5px;
}

.under div span {
    font-family: 'WorkSans-SemiBoldItalic';
}

.carousel-cell:last-of-type::before {
    background-color: transparent;
}

.flickity-button {
    background: transparent;
    color: rgba(0, 125, 197, 0.2);
}

.flickity-button:hover {
    background: transparent;
}

.flickity-prev-next-button {
    width: 60px;
    height: 60px;
}

.flickity-button-icon {
    fill: rgba(0, 0, 0, 0.2);
}

.flickity-button:disabled {
    display: none;
}

.flickity-page-dots {
    bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flickity-page-dots .dot {
    min-height: 6px;
    min-width: 6px;
    height: 6px;
    width: 6px;
    margin: 20px;
    padding: 0;
    border-radius: 50%;
    text-align: center;
    text-decoration: none;
}

.flickity-page-dots .dot:not(.is-selected) {
    opacity: 1;
    background-color: black;
}

.flickity-page-dots .dot:not(.is-selected):hover {
    opacity: 1;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}

.flickity-page-dots .is-selected {
    min-height: 20px;
    min-width: 20px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 2px solid black;
    text-align: center;
    text-decoration: none;
    background-color: transparent;
}

.flickity-page-dots {
    /*fixes the line in chrome*/
    /* display: block; */
    width: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.brodobr {
    margin-top: 15px;
    font-size: 0.7em;
}

.principi a {
    text-decoration: none;
    color: rgb(0, 84, 166);
    font-size: 0.8em;
    font-style: italic;

}

.principi a:hover {
    font-weight: bold;
}

@keyframes drawBorder {
    from {
        width: 0%;
    }
    to {
        width: 80%;
    }
}

@font-face {
    font-family: 'Longhaul';
    src: url('../fonts/Longhaul.ttf');
}

@font-face {
    font-family: 'D-DINExp-Italic';
    src: url('../fonts/D-DINExp-Italic.otf');
}

@font-face {
    font-family: 'WorkSans-Regular';
    src: url('../fonts/WorkSans-Regular.ttf');
}

@font-face {
    font-family: 'WorkSans-Italic';
    src: url('../fonts/WorkSans-Italic.ttf');
}

@font-face {
    font-family: 'WorkSans-Light';
    src: url('../fonts/WorkSans-Light.ttf');
}

@font-face {
    font-family: 'WorkSans-Bold';
    src: url('../fonts/WorkSans-Bold.ttf');
}

@font-face {
    font-family: 'WorkSans-Black';
    src: url('../fonts/WorkSans-Black.ttf');
}

@font-face {
    font-family: 'WorkSans-SemiBold';
    src: url('../fonts/WorkSans-SemiBold.ttf');
}

@font-face {
    font-family: 'WorkSans-SemiBoldItalic';
    src: url('../fonts/WorkSans-SemiBoldItalic.ttf');
}

@font-face {
    font-family: 'WorkSans-BoldItalic';
    src: url('../fonts/WorkSans-BoldItalic.ttf');
}

@font-face {
    font-family: 'WorkSans-ExtraBoldItalic';
    src: url('../fonts/WorkSans-ExtraBoldItalic.ttf');
}

@font-face {
    font-family: 'WorkSans-MediumItalic';
    src: url('../fonts/WorkSans-MediumItalic.ttf');
}

@media screen and (orientation: portrait) {
    .legend .line {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: auto;
        margin-right: auto;
        width: 70%;
        max-width: 100%;
        height: 80%;
        font-size: 0.8em;
        font-family: 'WorkSans-SemiBold';
    }
    .doza {
        width: 16em;
        height: 16em;
        padding-top: 15%;
        margin-left: 60%;
    }
    #oProizvodu {
        background: url(../images/box-portrait.png);
        -webkit-background-size: cover!important;
        -moz-background-size: cover!important;
        -o-background-size: cover!important;
        background-size: cover!important;
        background-position: center;
        background-repeat: no-repeat;
        image-rendering: -webkit-optimize-contrast;
    }
}

@media only screen and (min-device-width: 800px) and (max-device-width: 1080px) and (orientation: landscape) {
    .mmap {
        height: 62%;
    }
    .legend {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 8%;
    }
    .legend .line {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 100%;
        height: 100%;
        font-size: 0.9em;
        font-family: 'WorkSans-SemiBold';
    }
    .box-wrapper {
        width: 100%;
        height: calc(100vh - 100px - 100px);
        margin-top: 100px;
        margin-bottom: 100px;
    }
    .text {
        margin-top: auto;
        margin-bottom: 30px;
        line-height: 110%;
        font-size: 1.2em;
    }
    .box-wrapper .text-wrapper {
        height: 30%;
        width: 80%;
        margin: 0 10%;
        text-align: center;
    }
    .box-rect {
        text-align: center;
        height: 70%;
    }
}

@media only screen and (max-device-width: 1366px) and (max-device-height: 1080px) and (orientation: portrait) {
    .par-text.principi {
        font-family: 'WorkSans-Light';
    }
    .par-text h1 {
        line-height: 130%;
        font-family: 'WorkSans-SemiBold';
    }
}

@media only screen and (max-device-width: 1366px) and (max-device-height: 1080px) and (orientation: landscape) {
    .box-wrapper {
        width: 100%;
        height: calc(100vh - 100px - 100px);
        margin-top: 100px;
        margin-bottom: 100px;
    }
    .text {
        margin-top: auto;
        margin-bottom: 30px;
        line-height: 110%;
        font-size: 1.2em;
    }
    .box-wrapper .text-wrapper {
        height: 25%;
        width: 90%;
        margin: 0 5%;
        text-align: center;
    }
    .box-rect {
        text-align: center;
        height: 75%;
    }
}

@media only screen and (max-device-width: 750px),
only screen and (max-device-width: 1080px) and (max-device-height: 750px) and (orientation: landscape) {
    .flickity-page-dots {
        display: none;
    }
    .page-line {
        display: none;
    }
    .logo-large {
        font-size: 1.7em;
    }
    p.introtext {
        font-size: 0.35em;
    }
    @media screen and (orientation: portrait) {
        .wrapper,
        .map-wrapper {
            width: 100%;
            height: calc(100vh - 8vh - 100px);
            margin-top: 8vh;
            margin-bottom: 100px;
        }
        .box-wrapper {
            width: 100%;
            height: calc(100vh - 8vh - 6vh);
            margin-top: 8vh;
            margin-bottom: 6vh;
        }
        .text-wrapper {
            display: flex;
            height: 45%;
            width: 100%;
        }
        .text {
            margin-top: auto;
            margin-bottom: 20px;
            line-height: 110%;
            font-size: 1.2em;
        }
        .map-wrapper .text-wrapper {
            height: 55%;
            font-size: 1.2em;
        }
        .box-wrapper .text-wrapper {
            margin: 0 15%;
            height: 50%;
            width: 70%;
            text-align: center;
        }
        .box-wrapper .text {
            padding-bottom: 35%;
        }
        .par-text.principi {
            font-family: 'WorkSans-Light';
        }
        .par-text h1 {
            line-height: 130%;
            font-family: 'WorkSans-SemiBold';
        }
        .box-rect {
            text-align: center;
            height: 50%;
        }
        .mmap {
            height: 30%;
        }
        .legend {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 15%;
        }
        .legend .line {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 0;
            margin-right: 0;
            width: 100%;
            height: 30%;
            font-family: 'WorkSans-SemiBold';
        }
        .image-rect {
            height: 55%;
        }
        .doza {
            width: 25em;
            height: 25em;
            padding-top: 25%;
            margin-left: 50%;
        }
        .center-text {
            font-size: 1.7em;
        }
        .above {
            font-size: 1.2em;
        }
        .under {
            font-size: 1.2em;
        }
        .white-round-border {
            margin-top: 0;
            padding: 240px 60px;
            border-radius: 5px;
            border: 1px solid white;
        }
        .white-text {
            color: white;
            font-size: 2.8em;
            width: 60%;
        }
        .contact-label {
            font-size: 1.3em;
            text-align: center;
        }
        .contact-line {
            width: 60%;
            margin-bottom: 80px;
            margin-top: 30px
        }
        .menu {
            display: block;
            position: absolute;
            z-index: 30000;
            background-color: transparent;
            width: 100%;
            height: 8vh;
        }
        .menu span {
            display: block;
            position: relative;
            content: "";
            width: 65px;
            height: 7px;
            background-color: rgba(0, 0, 0, 0.3);
            margin: 10px 0;
            left: 3%;
            top: 25%;
        }
        .nav {
            justify-content: unset;
            overflow-y: scroll;
            margin-top: 7vh;
            position: absolute;
            z-index: 20000;
            text-align: center;
            /*firefox bug fix: flickering elements*/
            transform: translate3d(0px, 0px, 1px);
            height: calc(100vh - 7vh);
            width: 100%;
            background: linear-gradient(rgba(0, 125, 197), rgb(0, 84, 166));
            background-repeat: no-repeat;
            background-position: center;
            display: none;
        }
        .home {
            display: flex;
            justify-content: flex-start;
            margin-left: 0;
        }
        .nav a {
            max-height: none;
            width: 100%;
            font-size: 2.5em;
            padding-top: 5%;
            padding-bottom: 5%;
            text-align: center;
            font-family: 'WorkSans-BoldItalic';
            text-transform: uppercase;
            text-decoration: none;
            color: white;
            border-bottom: 1px rgba(255, 255, 255, 0.33) solid;
        }
        .nav a>img {
            margin-top: 5%;
            margin-bottom: 10%;
            display: block;
            margin-left: auto;
            margin-right: auto;
            height: 75%;
            width: 60%;
        }
        .menuToggle {
            background-color: rgb(0, 125, 197);
        }
        @media screen and (min-aspect-ratio: 3/4) {
            .box-wrapper .text-wrapper {
                margin: 0 15%;
                height: 35%;
                width: 70%;
                text-align: center;
            }
            .box-rect {
                text-align: center;
                height: 65%;
            }
            .doza {
                width: 16em;
                height: 16em;
                padding-top: 15%;
                margin-left: 60%;
            }
            .center-text {
                font-size: 16px;
            }
            .above {
                font-size: 0.9em;
            }
            .under {
                font-size: 0.75em;
            }
        }
    }
    @media screen and (orientation: landscape) {
        .wrapper,
        .map-wrapper {
            width: 100%;
            height: calc(100vh - 12vh - 2vh);
            margin-top: 12vh;
            margin-bottom: 2vh;
        }
        .box-wrapper {
            width: 100%;
            height: calc(100vh - 12vh - 2vh);
            margin-top: 12vh;
            margin-bottom: 2vh;
        }
        .text-wrapper {
            display: flex;
            height: 60%;
            width: 100%;
        }
        .text {
            margin-top: auto;
            margin-bottom: 20px;
            line-height: 110%;
            font-size: 1.2em;
        }
        .map-wrapper .text-wrapper {
            height: 30%;
        }
        .box-wrapper .text-wrapper {
            height: 25%;
            width: 70%;
            margin: 0 15%;
            text-align: center;
        }
        .par-text.principi {
            font-family: 'WorkSans-Light';
        }
        .par-text h1 {
            line-height: 130%;
            font-family: 'WorkSans-SemiBold';
        }
        .box-rect {
            text-align: center;
            height: 75%;
        }
        .mmap {
            height: 60%;
        }
        .legend {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 10%;
        }
        .legend .line {
            font-size: 0.9em;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 0;
            margin-right: 0;
            width: 100%;
            height: 85%;
            font-family: 'WorkSans-SemiBold';
        }
        .image-rect {
            height: 40%;
        }
        .white-round-border {
            margin-top: 0;
            padding: 60px 140px;
            border-radius: 5px;
            border: 1px solid white;
        }
        .menu {
            display: block;
            position: absolute;
            z-index: 30000;
            background-color: transparent;
            width: 50%;
            height: 12vh;
        }
        .menu span {
            display: block;
            position: relative;
            content: "";
            width: 40px;
            height: 4px;
            background-color: rgba(0, 0, 0, 0.3);
            margin: 6px 0;
            left: 3%;
            top: 4vh;
        }
        .nav {
            justify-content: unset;
            overflow-y: scroll;
            margin-top: 11vh;
            position: absolute;
            z-index: 20000;
            text-align: center;
            /*firefox bug fix: flickering elements*/
            transform: translate3d(0px, 0px, 1px);
            height: calc(100vh - 11vh);
            width: 100%;
            background: linear-gradient(rgba(0, 125, 197), rgb(0, 84, 166));
            background-repeat: no-repeat;
            background-position: center;
            display: none;
            border-right: 1px solid white;
        }
        .home {
            display: flex;
            justify-content: flex-start;
            margin-left: 0;
        }
        .nav a {
            max-height: none;
            width: 100%;
            font-size: 1.2em;
            padding-top: 3%;
            padding-bottom: 3%;
            text-align: center;
            font-family: 'WorkSans-BoldItalic';
            text-transform: uppercase;
            text-decoration: none;
            color: white;
            border-bottom: 1px rgba(255, 255, 255, 0.13) solid;
        }
        .nav a>img {
            margin-top: 2.5%;
            margin-bottom: 5%;
            display: block;
            margin-left: auto;
            margin-right: auto;
            height: 60%;
            width: 60%;
        }
        .menuToggle {
            background-color: rgb(0, 125, 197);
            border-right: 1px solid white;
        }
    }
    .subMenu {
        display: flex;
        justify-content: flex-end;
        flex-direction: column;
        margin: 0;
        position: relative;
    }
    .subMenu>a,
    .dropdown>a {
        line-height: normal;
        text-align: center;
        padding-left: 0;
        padding-right: 0;
    }
    .dropdown>a {
        display: none;
    }
    .dropdown {
        display: flex;
        flex-direction: column;
        font-family: 'WorkSans-BoldItalic';
    }
    .dropdown-content {
        display: flex;
        flex-direction: column;
        position: relative;
        min-width: 100%;
        width: 100%;
        z-index: 1;
        visibility: visible;
    }
    .dropdown-content a {
        padding-left: 0;
        padding-right: 0;
        background-color: transparent;
    }
    .menuPrincipi {
        display: none;
        visibility: hidden;
    }
    .nav a:hover {
        color: rgb(0, 84, 166);
        background-color: rgba(255, 255, 255, 0.95);
    }
    .showHideNav {
        display: flex;
        flex-direction: column;
    }
}