body, html {
  height: 100%;
  margin: 0;
  font: 400 18px/1.5 "Lato", sans-serif;
  font: 400 18px/1.5 "Verdana", sans-serif;
  color: #9191a0;
}
.bgimg {
    min-height: 100%;
    opacity: 0.75;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 1px 25px 25px;
    position: relative;
    opacity: 0.75;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.flex_container{
display: flex;
    padding: 18px 0px;
    max-width: 700px;
    margin: auto;
    background-color: rgba(0, 0, 0, 0.39);
}
.flex_element{
flex: 1;
    /* flex-grow: 1; */
    /* flex-basis: 0; */
    padding: 5px;
    border-right: solid 1px #eadcc4;
    text-align: center;
}
.flex_element a{
 color: #e8dbc3;
}
.flex_element:last-child{
border-right: none;
}

.footer{
    color: #f0ead84d;
    background-color: rgba(193, 163, 137, 0.16); 
    padding: 25px 5px;
    text-align: justify;
    background: linear-gradient(135deg, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgb(184, 150, 95) 51%,rgba(233,212,179,1) 100%);
    /* background: rgba(38, 68, 156, 0.9); */
}
.caption1 {
position: absolute;
    left: 0;
    top: 11em;
    width: 100%;
}

.caption2 {
    position: absolute;
    left: 0;
    /* max-width: 700px; */
    /* margin: auto; */
    padding: 20px 0px;
    bottom: 3em;
    width: 100%;
    background: linear-gradient(135deg, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgb(184, 150, 95) 51%,rgba(233,212,179,1) 100%);
}
.caption3 {
    position: absolute;
    left: 0;
    /* max-width: 700px; */
    /* margin: auto; */
    padding: 20px 0px;
    bottom: 3em;
    width: 100%;
    background: linear-gradient(135deg, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgb(184, 150, 95) 51%,rgba(233,212,179,1) 100%);
}


/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
    .bgimg {
        <!-- background-attachment: scroll; -->
    }
}
/* menu */
.mainmenu{
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    transition: width 2s, height 2s, transform 2s;
}
.mainmenu ul{
list-style-type: none;
    padding: 0;
    margin-top: -13px;
}
li.last {
    float: right !important;
    margin-right: 0px;
}
<!-- li { -->
    <!-- float: left; -->
    <!-- padding: 0; -->
    <!-- margin: auto; -->
    <!-- width: 160px; -->
    <!-- margin-right: 3px; -->
    <!-- margin-bottom: 3px; -->
<!-- } -->
ul.subs.btn-group li a {
    background-color: rgba(38, 68, 156, 0.9);
}
ul li a {
    display: block;
    padding: 8px;
    //text-align: center;
        color: #ebddc4;
}
.mainmenu{
margin: auto;
    display: block;
    width: 100%;
    height: auto;
    z-index: 99;
    max-width: 700px;
    background-color: #26449c;
    //padding: 0px;
    //margin-top: 2px;
    //box-shadow: 0px 7px 42px #282a78;
    top: -4px;
    position: relative;
    }
 
  
}
    
.mainmenu_link{
}
#movingpictures{
    margin: auto;
    /* height: 45vh; */
    z-index: 9;
    position: relative;
}
.mainlogo_pos{
}
.mainlogo{
//align-self: center;
//top: -152px;
//background-color: black;
width: 100%;
margin: 0 auto;
z-index: 99;
position: absolute;
    background: rgba(38, 68, 156, 0.9);
}
.mainlogo img{
    width: 100%;
    height: auto;
    z-index: 99;
    max-width: 734px;
    margin: auto;
    display: block;
opacity: 0.9;
}
.submenu{
    float: left;
    width: calc((100vw - 60px - 124px) / 3);
    border: 1px solid black;
    height: 300px;
    background-color: rgba(38, 68, 156, 0.43);
    color: #c1a389;
    text-shadow: 2px 2px 2px black, -2px 2px 2px black;
    overflow: hidden;
    padding: 1%;
    text-align: justify;
}
#submenu_1{
}
#submenu_2{
}
#submenu_3{
}

.stuck ul li{
padding: 13px 0px 0px 0px;
margin-top: -13px;
}
.stuck {
    position:fixed;
    top:0px;
    width: 100%;
    margin: 0px auto;
    z-index: 99;
    max-width: 100%;
    background-image: url("../img/JUNO_v09_head.png");
    background-repeat: no-repeat;
    background-size: 38px 38px;
    background-position: 5px 6px;
    background-attachment: fixed;
    padding-left: 43px;
    height: 2.8em;
        opacity: 0.9;
}
/*slider*/
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 700px;
    position: relative;
    margin: auto;
    max-height: 58vh;
    overflow: hidden;
    border-bottom: 4px solid rgba(191, 145, 42, 0.25);
    box-shadow: 0px 0px 9px 3px rgba(0, 0, 0, 0.41);
    /* top: -8em; */
    background: linear-gradient(135deg, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgb(184, 150, 95) 51%,rgba(233,212,179,1) 100%);
    padding: 4px;
}
.mySlides {
    display: none;
    margin-bottom: -6px;
}
/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
    font-size: 3em;
    opacity: 0.8;
}
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text_title {
  color: #f2f2f2;
  font-size: 1.1em;
  padding: 8px 12px;
  position: absolute;
  /* top: 0.5em; */
  /* width: 100%; */
  text-align: center;
  text-shadow: 1px 1px 1px black;
    background-color: #0000008c;
        animation-name: ani_in;
    animation-duration: 4s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    max-width: 25em;
    margin: 0 auto;
    left: 0;
    right: 0; 
}
/* The animation code */
@keyframes ani_in {
    from {top: 1em;opacity:0;}
    to {top: 0.5em;opacity:1;}
}

/* text_description */
.text_description {
  color: #f2f2f2;
  font-size: 1.1em;
  padding: 8px 12px;
  position: absolute;
  bottom: 10px;
  width: calc(100% - 8px);
  text-align: center;
    text-shadow: 1px 1px 1px black;
    background-color: #0000008c;
}
.text_description2 {
      color: #f2f2f2;
    font-size: 1em;
    //padding: 8px 12px;
    bottom: 10px;
    width: 100%;
    max-width: 700px;
    margin: auto;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.72), -1px -1px 2px rgba(0, 0, 0, 0.5);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active, .dot:hover {
  background-color: #717171;
}
/* Fading animation */
.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}
}

.footer_box{
    max-width: 700px;
    margin: auto;
    /* background-size: 100%; */
    color: white;
    background-color: rgba(0, 0, 0, 0.28);
    padding: 5px;
    font-size: 0.8em;
}
.footer_box a{
color:rgb(216, 201, 180);
}

.icon_address{
    background-image: url('../img/Contacts_128px.png');
}    

.icon_phone{
    background-image: url('../img/Phone_book_128px.png');
}    

.icon_mail{
    background-image: url('../img/Mail_128px.png');
}
.icon_setup{
    background-repeat: no-repeat;
    padding-left: 2.6em;
    display: block;
    background-size: 2.4em;
    height: 2.5em;
    line-height: 2.4em;
}    
    
    
    
    



/* MENU NAVIGATION 
#nav span {
  display: none;
}

*/
#nav,
#nav ul {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}
#nav {
  font-family: 'Josefin Sans', sans-serif;
  position: relative;
  text-align: center;
  //float: left;
  //margin-left: 1%;
  //margin-right: 1%;
  <!-- width: 98%; -->
}
#nav ul.subs {
  background-color: #FFFFFF;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  color: #333333;
  //left: 0;
  padding: 1px;
  position: absolute;
    top: 1.7em;
    //left: 10.8em;
  //width: 96%;
}
#nav > li {
  border-bottom: 5px solid transparent;
  float: left;
  margin-bottom: -5px;
  text-align: left;
  transition: all 600ms ease-in-out 0s;
  margin-right: 1px;
}
#nav li a {
  display: block;
  text-decoration: none;
  transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
  white-space: normal;
}
#nav > li > a {
  //color: #333333;
  display: block;
  line-height: 29px;
  padding: 0 15px;
  text-transform: uppercase;
  font-size: 0.8em;
}
#nav > li:hover > a,
#nav > a:hover {
  background-color: #d7ab4c;
  color: #FFFFFF;
}
#nav li.active > a {
  background-color: #333333;
  color: #FFFFFF;
}
/* submenu */
#nav ul.subs > li {
  <!-- display: inline-flex; -->
  <!-- float: left; -->
  <!-- padding: 10px 1%; -->
  //vertical-align: top;
// width: 26%;
    //border: 1px solid #da9b15;
    <!-- margin: 2px; -->
    }
#nav ul.subs > li a {
      color: #ebddc4;
  line-height: 20px;
}
#nav ul li a:hover {
  color: #F55856;
}
#nav ul.subs > li > a {
  font-size: 0.8em;
    padding: 10px;
    margin: 2px;
    text-transform: uppercase;
    border: 1px solid #da9b15;
}
#nav ul.subs > li li {
  float: none;
  padding-left: 8px;
  transition: padding 150ms ease-out 0s;
}
#nav ul.subs > li li:hover {
  padding-left: 15px;
}
#nav > li > ul {
  opacity: 0;
  transform: translateY(25%);
  transition: all 150ms ease;
  pointer-events: none;
}
#nav > li:hover > ul {
  opacity: 1;
  transform: translateY(0%);
  pointer-events: auto;
background: linear-gradient(135deg, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgb(184, 150, 95) 51%,rgba(233,212,179,1) 100%);}
#nav > li > ul > li > ul {
  opacity: 0;
  transform: translateX(50%);
  transition: all 150ms ease;
}
#nav > li > ul > li:hover > ul {
  opacity: 1;
  transform: translateX(0%);
      background: linear-gradient(135deg, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgb(184, 150, 95) 51%,rgba(233,212,179,1) 100%);
}

    
@media screen and (max-width: 400px), screen and (max-height: 400px) {
    .mainmenu{
        
        //background-color: #949c26;
    }
    #nav > ul > subs {
    left:9.2em;
    }
    #nav > li > a {
        font-size: 0.7em;
        padding: 0 5px;
    }
    .text_description{
            font-size: 0.75em;
    }
    .text_title{
        max-width: 95%;
    }
}      
/* @media screen and (max-width: 640px), (orientation: landscape) { */
    /* .caption1{ */
        /* top: 6.8em; */
    /* } */
    /* .text_title{ */
        /* font-size: 0.9em; */
    /* } */
/* } */