.splide__slide img {
	width : 100%;
	height: auto;
}

.splide__slider {
    /*position:relative;*/
    padding: 2rem;
}

.image-container {
    
    /*background: #d4e735;
border-radius: .5rem;
overflow: hidden;
color: #333;*/
}

.column1 {
    padding-right:1rem;
}
.column2 {
    padding-left: 1rem;
}

.detail_text, .detail_text p {
    font-family: Georgia, "Cambria", serif;
    color: #444;
    line-height: 1.5em;
    margin-top: 0;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
    box-shadow: 0 8px 6px -6px grey;
}

html {
  scroll-behavior: smooth;
}

#myBtn {
  display: inline-block;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 999;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #444;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
    opacity: 0.0;
    visibility: hidden;
    transition: 0.5s;
}

#myBtn:hover {
  background-color: #555;
}

#myBtn.active {
    visibility: visible;
    opacity: 0.6;
}

#mapid { height:400px; }

/* --------------------------------------------- */


:root {
    --sidebar-background: #909090;
    --sidebar-color: #fff;
    --link-color: rgb(61, 146, 201);
    --brand-tagline-color: rgb(176, 202, 219);
    --nav-item-border: rgb(176, 202, 219);
    --nav-item-border-hover: rgb(61, 79, 93);
    /*rgb(61, 146, 201);*/
    --filter-button-hover: rgb(61, 79, 93);
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

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

a:hover,
a:focus {
    text-decoration: underline;
}

h3 {
    /*font-weight: 100;*/
    margin-bottom: 6px;
}

/* LAYOUT CSS */
.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

#layout {
    padding: 0;
}

.back-button {
    margin: 1em 1em 0 0;
    text-align: right;
    background: transparent;
border: 2px solid var(--nav-item-border);
color: #fff;
margin-top: 1em;
letter-spacing: 0.05em;
text-transform: uppercase;
font-size: 85%;

}

.header {
    text-align: center;
    top: auto;
    margin: 1em auto;
}

.header img {
    max-width: 100%;
}

.sidebar {
    /*background: rgb(61, 79, 93);*/
    background: var(--sidebar-background);
    color: var(--sidebar-color);
}

.brand-title,
.brand-tagline {
    margin: 0;
}

.brand-title {
    text-transform: uppercase;
}

.brand-tagline {
    font-weight: 300;
    color: var(--brand-tagline-color);
}

.nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-item {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

.nav-item a {
    background: transparent;
    border: 2px solid var(--nav-item-border);
    color: #fff;
    margin-top: 1em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 85%;
}

.nav-item a:hover,
.nav-item a:focus {
    border: 2px solid var(--nav-item-border-hover);
    text-decoration: none;
}

.sidebar #filter h3 {
    margin-bottom: 0em;
    color: var(--brand-tagline-color);
}

button {
    border: none;
    padding: 3px;
    background: none;
    color: var(--sidebar-color);
}

#filter button:focus {
    outline: none;
}

#filter button:hover {
    cursor: pointer;
    color: var(--filter-button-hover);
}

.content-subhead {
    text-transform: uppercase;
    color: #aaa;
    border-bottom: 1px solid #eee;
    padding: 0.4em 0;
    font-size: 80%;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.content-header {
    display: inline-block;
    background-color: #fff;
    z-index: 100;
    margin-left: -3em;
    padding-left: 3em;
    
}

.lang_flag {
    top: 20px;
    right: 20px;
    position: absolute;
}

.content {
    /*padding: 2em 1em 0;*/
}

#map {
    height: 400px;
}

/* Gallery */
.mix,
.gap {
    display: inline-block;
    vertical-align: top;
}

.mix {
    background: #fff;
    border-radius: 2px;
    margin-bottom: 1rem;
    position: relative;
}

.mix:before {
    content: '';
    display: inline-block;
    padding-top: 56.25%;
}

.mixitup-control-active {
    background: var(--filter-button-hover);
}

.c-thumb {
    background: #fff;
    text-align: center;
    color: var(--filter-button-hover);
}

/* 2 Columns */

.mix,
.gap {
    width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
}

/* 3 Columns */

@media screen and (min-width: 541px) {

    .mix,
    .gap {
        width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
    }
}

/* 4 Columns */

@media screen and (min-width: 961px) {

    .mix,
    .gap {
        width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
    }
}

/* 5 Columns */

@media screen and (min-width: 1281px) {

    .mix,
    .gap {
        width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
    }
}

/**
             * (optional) define here the style definitions which should be applied on the slider container
             * e.g. width including further controls like arrows etc.
             */
.cslider {}

.cframe {
    /**
                 * (optional) wrapper width, specifies width of the slider frame.
                 */
    width: 400px;


    position: relative;
    font-size: 0;
    line-height: 0;
    /*overflow: hidden;*/
    white-space: nowrap;
    margin: 0 auto;
}

.cslides {
    display: inline-block;
}

.cslides li {
    position: relative;
    display: inline-block;

    /**
                 * (optional) if the content inside the slide element has a defined size.
                 */
    width: 500px;;
}

.cslides li img {
    max-width: 100%;
    height: auto;
}

.cprev,
.cnext {
    position: absolute;
    top: 50%;
    margin-top: -25px;
    display: block;
    cursor: pointer;
}

.cnext {
    right: 0;
}

.cprev {
    left: 0;
}

.cnext svg,
.cprev svg {
    width: 25px;
}

.footer {
    padding: 1em 0;
}

.footer a {
    color: #ccc;
    font-size: 80%;
}

.footer .pure-menu a:hover,
.footer .pure-menu a:focus {
    background: none;
}

@media (min-width: 48em) {
    .content {
        padding: 2em 3em 0;
        margin-left: 25%;
    }

    .header {
        margin: 10% 1em 0;
        text-align: right;
    }

    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
    }

    .footer {
        text-align: center;
    }
}


.c_slideshow-container {
  max-width: 500px;
  position: relative;
  margin: auto;
}

.c_mySlides img {
    width: 100%;
    height: auto;
}
.c_mySlides {display: none}
img {vertical-align: middle;}

/* Next & previous buttons */
.c_prev, .c_next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.c_next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.c_prev:hover, .c_next:hover {
  background-color: rgba(0,0,0,0.5);
    text-decoration: none;
}


/* The dots/bullets/indicators */

.active {
  background-color: #717171;
}

/* Fading animation */
.c_fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .c_prev, .c_next,.c_text {font-size: 11px}
}