/*
*{border: 1px solid green;} 
*/

/* ------------------ General settings for entire page ---------------------- */
@keyframes example {  
  from {transform: translate(0, 0px);}
  to {transform: translate(0, 15vh);}
}

/* ------Make close button for small screen menu appear after some seconds -- */
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
      to { opacity: 0; }
}


*   {
box-sizing: border-box;    
margin:0;
padding:0;
font-family: Arial;
}

body{ 
 background-color:#3c3c3c; // color: rgb 60 60 60
 
}

/*  Suppress horizontal scrollbar */
html {overflow-x: hidden;      
}

#wrapper_android{
  overflow-x: hidden;  
  position:relative;  
}

/* --------------------- Styling of slide show ------------------------------ */



//body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  //max-width: 1000px;
  position: relative;
  margin: auto; 
  
  //border: 1px solid green;
}

/* Next & previous buttons */
.prev, .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;
  background-color: rgba(0,0,0,0.3);
}

/* 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 {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* 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}
}

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



/* --------------------- Styling of Links ----------------------------------- */

/* unvisited link */
a:link {
  color: #eeeeee;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: #eeeeee;
}

/* mouse over link */
a:hover {
  //color: white;
  text-decoration: none;
}

/* selected link */
a:active {
  color: gray;
}

/* ---------------------------- Notes --------------------------------------- */

/* Color for Header and Footer*/
//background-color: #181818; 

/* Color for body*/
//background-color: #3c3c3c;

/* Additional alternative color */
//background-color: #282828;

/* text off-white */
//color:#eeeeee;


/* ---------------------------- Settings for Headers ------------------------ */ 
 
#header *{
  background-color: inherit;  
  }  

  
#header_index {  
  text-align: center;  
  font-weight: 100;
  color: white;
  //border:5px solid red;
  //padding-left:2%;
  //padding-right:2%;
  position: fixed;
  z-index: 6;
  width:100%;
  box-sizing: border-box;  
  }
  
  
  
  /* ---------------------------- Styling of header ------------------- */

.header_left_top_index{
    //background-color: red;
    background-color: inherit; 
    width:33%;
    float:left;
    height:70px;
    line-height:70px;
    text-align:center;
    padding-left:2%;
}

.header_left_bottom_index{
   //background-color: green;
   background-color: inherit;
   width:33%;
   float:left;
   height:60px;
   padding-left:2%;
}

.header_right_top_index{
    //background-color: lightblue;
    background-color: inherit;
    width:67%;
    float:right;
    height:70px;    
    padding-right:2%;
    line-height:70px;
    text-align:center;
}

.header_right_bottom_index{
  //background-color: lightcoral;
  background-color: inherit;
  width:67%;  
  float:right;
  height:60px;
  padding-top:10px;
  padding-right:2%;
}

.header_right_top_content_index{
    //background-color: pink; 
    float:right;    
}

.header_left_top_content_index{
    //background-color: blue;
    float:left;   
    //padding: 2%;    
    height:70px;
    line-height:70px;
    text-align:center;
    padding-top:5px;    
}



.horizontal_line_index{
    width:96%;    
    margin-left:2%;
    margin-right:2%;
    float:left;   
    height:3px;    
    background-color:#3c3c3c;
    display:none
    
}

.wrapper_horizontal_line_index{
    width:100%;
    float:left;   
    background-color:inherit;    
}


/* Commands for scrolling */

.header_left_top_index.scroll{
    //background-color: red;
    background-color: #181818;
}

.header_left_bottom_index.scroll{
   //background-color: green;
   //background-color: #181818;
   display:none;
}

.header_right_top_index.scroll{
    //background-color: lightblue;
    //background-color: #181818;
    display:none;
}

.header_right_bottom_index.scroll{
  //background-color: lightcoral;
  background-color: #181818;
  height:70px;
  padding-top:20px;
}







.logo_inHeader_index{   
   float:left;   
    //padding: 2%;
    //background-color: red;
    height:42px;
    line-height:42px;
    text-align:center;
    margin-top:14px; 
}

    
    .language_switch{
     margin-right:2%;
     color:white;     
    }    

.endfloat{
    clear:left;    
}

.container_horizontal_line_index{  
   background-color: #181818;
   display:none;  
}


.horizontal_line_index{
   border-bottom: 2px solid #3c3c3c; // color: rgb 60 60 60   
   display:none;   
}

.container_horizontal_line_index.scroll{
  display:block;
  padding: 0px 1% 0px 1%;   
}

.horizontal_line_index.scroll{   
   display:block;   
   
}
/* ---------------------------- Settings for Index slideshow ---------------- */

.images_slideshow_index{
   //max-width: 100%;   
   //width:100%;   
  // clip-path: inset(0 0 60vh 0);
   height:100vh;
   //width:100vw;
   }

.box_images_slideshow_index{
   //max-width: 100%;
   
   //width:100%;
   height:100vh;
   //clip-path: inset(0 0 10% 0);
 // border: 10px solid green; 
}

.text_index_slideshow{
  position:absolute;
  //width:25%;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  //left:40%;
  text-align: center;
  border: 5px solid #eeeeee; 
  color: #eeeeee;
  font-weight: 200;
  font-size:4.5em;
  background: rgba(238, 238, 238, 0.3); /* White see-through */
  padding:5px;
  z-index:5;
}

.text_index_slideshow_arrows{
  position:absolute;
  //width:25%;
  top: 65%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  //left:40%;
  text-align: center;
  line-height:0.8em;
  color: #eeeeee;
  font-weight: 200;
  font-size:5em;
  
  //padding:5px;
}

/* ---------------------------- Settings for Index collage ---------------- */

.collage_index{
  width:100%;  
  text-align: center;
  margin:0 auto;
  padding-top:20px;  
  padding-bottom:50px;    
  //padding-left:40px;
  //background-color: green;
}

.collage_index_element{
 border:4px solid #eeeeee;   
}


/* --------------------- Styles for footer of index ------------------------- */
footer {
  background-color: #181818; 
  padding-left:2%;
  padding-right:2%;  
  color: white;
  font-size:0.8rem;
}

.footer_navigation_index{
    width:100%;
    padding-right:50%;    
}

/*Boxen mit halber Seiten-Breite für Footer*/

.footer_left_top_index {
 //background-color:blue;  
 float: left;
 width: 40%;  
 height:50px;
 padding-top:10px;
 box-sizing: border-box;
}

.footer_left_top_index a{
 text-decoration:none;
}


.footer_left_bottom_index {
 //background-color:red;    
 float: left;
 width: 40%;  
 height:40px;
 box-sizing: border-box; 
}

.footer_right_top_index {
 //background-color:red;   
 text-align:right;
 float: right;
 width: 60%;
 margin-right: 0;
 height:50px;
 padding-top:10px;
 box-sizing: border-box;
}

.footer_right_bottom_index {
 //background-color:green; 
 text-align:right;
 float: right;
 width: 60%;
 margin-right: 0;
 height:40px;
 padding-top:20px;
 box-sizing: border-box;
 font-size:0.8em; 
}

.logo_footer_index{
   height:40px; 
}


/* ----- */

#impressum_copyright_index { 
 //font-size:0.8em; 
}

.endfloat_index {
    clear:left;    
}

 
/* --------------------- Main horizontal navigation ------------------------- */


.main_nav_right_index.scroll { 
 font-size:6pt;
}



/* --------------------- Main horizontal navigation ------------------------- */
nav {
  //background-color: yellow;
 text-align:right;
 //vertical-align: middle;
 //margin: 100px 0 100px 0;
 //padding: 100px 0 100px 0;
 font-family: "Arial", Arial, sans-serif;
 font-weight: bold;
 //font-size:10pt;
}
nav ul {
  list-style: none;
  text-align: right;
}
nav ul li {
  display: inline-block;  
  
}
nav ul li a {    
  display: block;
  padding: 5px;
  //background-color:yellow;
  text-decoration: none;
  font-family: "Arial", Arial, sans-serif;
  color:white; 
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
  transition: all .5s;
}
nav ul li a:hover {
  color: gray;
  text-decoration: none;
}


/* stroke */
nav.stroke ul li a,
nav.fill ul li a {
  position: relative;
}

nav.stroke ul li a:after
{
  position: absolute;
  bottom:0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: gray;
  height: 2px;
}
nav.stroke ul li a:hover:after {
  width: 100%;
}





.nav_current_index {
  background-color: transparent;
  color: gray;
  //text-decoration: underline;
  display: inline;
  padding-bottom: 2px;
  border-bottom:3px solid gray;
  
  
}

/* --------------------Settings für Felder unter Slideshow auf Index -------------------------- */

.container_index_light{
  //background-color: yellow;
  color:#eeeeee;
  text-align: center;
  margin: 0 auto;
  padding: 0% 1% 0% 1%;
  
}

.container_index_dark{
  background-color: #282828;
  //background-color: greenyellow;
  color:#eeeeee;
  text-align: center;
  margin: 0 auto;
  padding: 0% 1% 0% 1%;
}

.maxWidth_index{
  //background-color: red;  
  max-width:1400px;
  margin: 0 auto;
  //padding: 2% 0% 1% 0%;
}

.index_element{
    width:33.33%;
    margin: 0 auto;
    float:left;  //  einschalten sobald mehr als ein element, Zeile drüber ausschalten
    //background-color: red;
    padding: 1% 1% 2% 1%;
   
}

.index_text{
    width:100%;
    float:left;
    //background-color: cyan;
   padding: 4% 0.5% 3% 0.5%;
}

.box_index_upper {     
     width:100%;     
     background-color:#3c3c3c;
     color:white;
     //padding: 2% 4% 3% 4%;
     //position:absolute;
     text-align:left;
     position:relative;
     overflow:hidden;
}

.box_index_lower {
     border-top: 2px solid white;
     width:100%;
     //vertical-align: top;
     background-color:#3c3c3c;
     color:white;
     padding: 2% 4% 3% 4%;
     //position:absolute;
     text-align:left;
}



.box_index_upper:hover .blogTutorials_overlay {
  opacity: 0;
}



.index_overlay {
     position:absolute;
     width:100%;
     background: rgb(0, 0, 0);
     background: rgba(0, 0, 0, 0.5); /* Black see-through */
     z-index:2;
     bottom:0;
     height:50px;
     line-height:50px;
     //padding: 6% 1% 1% 1%;
     text-align: center;
     color:white;
     transition: 0.7s ease;
     //position:absolute;
}

.index_image {
  display: block;
  width: 100%;
  height: auto;
  
}

.index_image:hover {
  opacity: 0.7;
  transition: 1.0s ease;
  transform: scale(1.1);
}

.text_index{
    color:#eeeeee;
    text-align: center;    
    padding: 40px 10% 40px 10%;
    
}

.text_index h1{
    //font-size: 34pt;
}

.text_index h2{
   font-size: 8pt;
}



.text_index_diffColor{
    color:white;
    text-align: center;
    padding-top:20px;
    background-color: #282828;
}

/* --------------------Neueste Gallerien auf Index--------------------------- */

.wrapper_index {
    text-align: center;
    background-color: #282828;
    padding: 0px 10% 0px 10%;
    //background-color:yellow;   
}

.box_index {
     display: inline-block;
     width:29.2%;
     vertical-align: top;
     //background-color:yellow;     
     position: relative;
     padding-top:15px;
     padding-bottom:60px;
     margin-left:5%;  
}

.box_index:first-child {    
     margin-left:0%;  
}

.box_index_lower {
     border-top: 2px solid white;
     width:100%;
     //vertical-align: top;
     background-color:#3c3c3c;
     color:white;
     padding: 2% 4% 3% 4%;
     //position:absolute;
     text-align:left; 
}

.index_container {
  position: relative;
  width: 100%;
  overflow: hidden;  
  margin: 0 auto;
}

.index_overlay {
     position:absolute;
     width:100%;
     background: rgb(0, 0, 0);
     background: rgba(0, 0, 0, 0.5); /* Black see-through */
     z-index:2;
     bottom:0;
     height:50px;
     line-height:50px;
     //padding: 6% 1% 1% 1%;
     text-align: center;
     color:white;
     transition: 0.7s ease;
     //position:absolute;
}

.index_container:hover .index_overlay {
  opacity: 0;
}

.index_image {
  display: block;
  width: 100%;
  height: auto;
  
}

.index_image:hover {
  opacity: 0.7;
  transition: 1.0s ease;
  transform: scale(1.1);
}

/* ---------Überschrift über neuesten Gallerien auf Index ------------------- */

.headline_galleries_index {  
  color:white; 
  width:100%;
  margin:0 auto;
  text-align:center;
  background-color: #282828;
  padding: 40px 0 10px 0;
}

/* ---------Arrows auf index------------------- */

.arrows{    
    margin: 0 auto;
    left: 0;
    right: 0;
    position: absolute;
    width: 2%;
    padding: 70vh 0 0 0;   
    z-index:5;
   //background-color: green;

    animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

.hideArrows{
    display:none;
    //background-color: red;
}

/* ------------------Navigation for small screens  - Easy and New ------------ */

#mobileMenu{
    //background-color:greenyellow;
    //border:3px solid red;
    width:200px;
    height:100vh;
    position:absolute;
    left:100vw;
    top:0;
    overflow:hidden;
    z-index:20;
}

#mobileMenu_shadow{
    //background-color:red;    
    display:block;
     box-shadow:20px 0px 10px -20px black inset;
     z-index:1;
     height:100vh;
     width:20px;
     position:absolute;
     top:0;
     //border:2px solid red;
    // margin-top:-50px;
}

#mobileMenu_container{
    //background-color:yellow;    
    width:800px;
    height:100vh;
    position:absolute;
    left:0px;    
}

#mobileMenu_container ul{
    //background-color:yellow;
   list-style: none;
   text-align: left;
  //margin-left:20px;
}

#mobileMenu_container ul li{
  display: block;  
  width:100%;
  font-size: 1rem;
  border-top:1px solid grey;
  height:6vh;
  line-height:6vh;
  //padding-top:3vw;
  padding-left:20px;
  //background-color: #181818;
  //background-color:#3c3c3c;
  //background-color:red;
  //text-align: center;
}

#mobileMenu_container ul li:first-child{
  border-top-style: none;
}

.mobileMenu_page{
  //background-color:cadetblue;
  background-color:#3c3c3c; 
  width:200px;
  height:100vh;
  position:absolute;
  display:inline;
  left:0px;
}

.mobileMenu_page_galleries{
  background-color:#3c3c3c; 
  width:200px;
  height:100vh;
  left:200px;
  position:absolute;
  display:inline;
}

.mobileMenu_page_galleries-landscapes{
  //background-color:magenta;  
  background-color:#3c3c3c; 
  width:200px;
  height:100vh;
  left:400px;
  position:absolute;
  display:inline;
}

.mobileMenu_page_galleries-cities{
  //background-color:magenta;
  background-color:#3c3c3c; 
  width:200px;
  height:100vh;
  left:600px;
  position:absolute;
  display:inline;
}

.mobileMenu_page_blog{
  //background-color:magenta; 
  background-color:#3c3c3c; 
  width:200px;
  height:100vh;
  left:800px;
  position:absolute;
  display:inline;
}

.mobileMenu_page_tutorials{
  //background-color:magenta;
  background-color:#3c3c3c; 
  width:200px;
  height:100vh;
  left:1000px;
  position:absolute;
  display:inline;
}

.menu_icon{
   // border:1px solid green;
   display:none;
   width:30px;
   height:50px;
   padding-top:15px;
   cursor:pointer;
   float:right;
   //background-color: green;
   z-index:7;
   position:relative;   
}

.menu_icon_hide{
   // border:1px solid green;
   display:none;
   width:30px;
   height:50px;
   padding-top:15px;
   
   float:right;
   //background-color: green;
   z-index:7;
   position:relative;
   animation: fadeOut 1s;
   //transform: translateX(-15vw);
   // transition: transform 2s;
}

.burger {   
  display: block;
  width: 100%;
  height: 3px;
  background: white;
  margin-bottom:5px;
  //transition: .3s;
}

.close_icon{
    display:none;    
    position:absolute;
    padding-top:20px;
    width:25px;   
    height:50px;
    right:200px;
    top:0;
    //background-color: coral;
    z-index:7;   
    animation: fadeIn 4s;
    cursor:pointer;
}


.close_icon_hide{
   display:none;    
    position:absolute;
    width:25px;    
    right:200px;
    height:20px;
    //background-color: coral;
    z-index:7;
    animation: fadeOut 1s;
   
}

.cross{
  display: block;
  width: 100%;
  height: 3px;
  background: white;
  margin-bottom:8px;
  position:absolute;
  //transform:rotate(45deg);
}

.icon_subMenu{    
   color:gray;  
  cursor:pointer; 
  float:right;
  margin-right:30px;
  line-height:4vh;
  height:4vh;
  margin-top:1vh;
  font-size:2rem; 
  //margin-bottom:8px;
  //position:absolute;
  //transform:rotate(45deg);
  //background-color: green;
}



.backTo_parentMenu{
  //background-color: aqua;
  color:white;
  display:inline;
  float:right;
  margin-right:30px;
  margin-top:20px;
  cursor:pointer;
}


.mobileMenu_footer_index{
    display:none;
}


/* ------------------------------------------------------------------------- */
/* ------------------------RESPONSIVE DESIGN ------------------------------- */
/* ------------------------------------------------------------------------- */




@media only screen and (min-width:1024px) {  
  .box_index {    
     width:80%;     
     padding-top:15px;
     padding-bottom:60px;
     margin-left:0%;
  }

  
  .images_slideshow_index{
   //max-width: 100%;   
   //width:100%;   
  // clip-path: inset(0 0 60vh 0);
   height:100vh;
   width:100vw;
   object-fit: cover;
    object-position: 20% 10%; /* try 20px 10px */ 
   }
                                            

   
}



@media only screen and (max-width:1920px) {
/* Change number of thumbnails from 5 to 4 */

.logo_inHeader_index{   
    height:36px;
    line-height:36px;
    text-align:center;
    margin-top:17px; 
}

.arrows{  
    width: 3%;    
}



}

@media only screen and (max-width:1400px) {
/* Change number of thumbnails from 4 to 3 */    
.gallery_element{ 
width:33.333333%;  
}

.blogTutorials_element{
    width:33.333%;   
   
}

.logo_inHeader_index{   
   float:left;   
    //padding: 2%;
    //background-color: blue;
    height:24px;
    line-height:24px;
    text-align:center;
    margin-top:23px; 
}

.arrows{  
    width: 4%;    
}



}

@media only screen and (max-width:900px) {
/* Change number of thumbnails from 3 to 2 */    
.gallery_element{ 
width:50%;  
}

.index_element{
    width:50%;   
   
}

.logo_inHeader_index{   
   float:left;   
    //padding: 2%;
    //background-color: blue;
    height:22px;    
    margin-top:9px; 
}

#header_index {  
  position: absolute; 
  }



/* Do not Display menu items anymore and instead display menu icon */
nav ul li a {    
  display:none;
}

.header_right_top_content{
  display:none;  
}

.wrapper_horizontal_line{
    display:none;
}

.arrows{  
    width: 5%;    
}

.menu_icon{
    display:block;    
}

.close_icon{
    display:block;   
}

.menu_smallScreen_container{
 display:block;   
}

.header_right_top_content_index{
    display:none;   
}

body{ 
 font-size:0.9rem;
}

/* Settings for Footer */ 

.logo_footer_index{
   height:30px; 
}

#impressum_copyright_index{  
    font-size:0.7rem;
}


/* Settings for Footer of mobile Menu */

.mobileMenu_footer_index{
    display:block;
    //background-color: red;    
    position:absolute;
    margin-top:93vh;  
}

.mobileMenu_footer_index_content{
    width:200px;
    text-align:center;
    color:white;
}


}

@media only screen and (max-width:640px) {
/* Change number of thumbnails from 2 to 1 */    
.gallery_element{ 
width:100%;
 padding:5% 1% 5% 1%;
}

.index_element{
    width:100%;   
   
}

.logo_inHeader_index{   
   float:left;   
    //padding: 2%;
    //background-color: blue;
    height:18px;
    line-height:22px;
    text-align:center;
    margin-top:11px; 
}

.arrows{  
    width: 8%;    
}

/* Settings for Footer */   

.footer_left_top_index{
width:30%;
}

.footer_right_top_index{
width:70%;
}


#impressum_copyright_index{  
    font-size:0.55rem;
}

.footer_left_bottom_index{
    height: 30px;
    width:30%;
}

.footer_right_bottom_index{
   height: 30px; 
   padding-top:10px;
   width:70%;
}

.logo_footer_index{   
   height:25px; 
}


/* Settings für eingerahmte Stichwörter ------------------------------------- */

.text_index_slideshow{   
  font-weight: 200;
  font-size:3.5em;
  border: 4px solid #eeeeee; 
}

/* Settings für Überschriften ------------------------------------- */

.index_text h1{   
    font-size: 5.5vw;    // Einzeilige h1-Überschriften für kleine Bildschirme
}
.index_text h4{   
    font-size: 3vw;    // Einzeilige h1-Überschriften für kleine Bildschirme
}

/* Settings für Bildercollage ------------------------------------- */

.collage_index_element{
 border:3px solid #eeeeee;   
}



}


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

/* Settings for Footer -------------------------------------------- */   

footer { 
  font-size:0.5rem;
}

.footer_left_top_index .footer_left_bottom_index{
width:30%
}

.footer_right_top_index .footer_right_bottom_index{
width:70%
}


.footer_left_top_index{
    height: 30px;
    padding-top:5px;
}

.footer_right_top_index{
   height: 30px; 
   padding-top:5px;
}

.footer_left_bottom_index{
    height: 10px;
}

.footer_right_bottom_index{
   height: 10px;
   padding-top:5px;
   //background-color:blue;
}


#impressum_copyright_index{  
    font-size:0.35rem;
}


.logo_footer_index{   
   height:18px; 
}

/* Settings für eingerahmte Stichwörter ------------------------------------- */

.text_index_slideshow{   
  font-weight: 200;
  font-size:2.0em;
  border: 3px solid #eeeeee; 
}

/* Settings für Überschriften ------------------------------------- */

.index_text h1{   
    font-size: 6vw;    // Einzeilige h1-Überschriften für kleine Bildschirme
}
.index_text h4{   
    font-size: 3vw;    // Einzeilige h1-Überschriften für kleine Bildschirme
}

/* Settings für Bildercollage ------------------------------------- */

.collage_index_element{
 border:2px solid #eeeeee;   
}

}