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

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

/* ------------------ General settings for entire page ---------------------- */

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

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


html{
    overflow-x:hidden;
}

html, body {
    height: 100%;
    //overflow-x:hidden;
}

/* ---------------------------- Main structure of Website ------------------- */ 

#wrapper{
    margin:0 auto;
    width: 100%;
    //overflow-x:hidden;
    overflow-x: hidden;  
  position:relative;  
}

#header{
    background-color: #181818;  
    //height: 100px;
    width: 100%;
    position:fixed;
    z-index:1;
    padding-left:2%;
    padding-right:2%;
    //overflow:visible;
    
}

#content{
    //background-color: yellow;  
    width: 100%;
    padding: 20px 1% 0% 1%;    
    float:left;
    min-height:90vh;  /* -- Ensuring enough space so that footer is at end of viewport--*/
    margin-top: 130px; // Ensuring that margin-top of content has same height than header
}

#content_blogTutorials{
    //background-color: yellow;  
    width: 100%;    
    float:left;
    min-height:90vh;  /* -- Ensuring enough space so that footer is at end of viewport--*/
    margin-top: 130px; // Ensuring that margin-top of content has same height than header
    padding: 3% 0% 0% 0%; 
}

#footer{
    background-color: #181818; 
    height: 100px;
    width: 100%;
    float:left;
    padding-left:2%;
    padding-right:2%;
    font-size:0.8rem;
}

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

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

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

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

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



/* ---------------------------- Styling of header ------------------- */

#header_left_top{
    //background-color: red;
    background-color: inherit; 
    width:33%;
    float:left;
    height:70px;
    line-height:70px;
    text-align:center;
    
}

#header_left_bottom{
   //background-color: green;
   background-color: inherit;
   width:33%;
   float:left;
   height:60px;
   //box-shadow: 0px 5px 10px #181818;
}

#header_right_top{
    //background-color: lightblue;
    background-color: inherit;
    width:67%;
    float:right;
    height:70px;
    clear:right;    
    line-height:70px;
    text-align:center;
}

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

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

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

.horizontal_line{
    width:100%;    
    margin-left:0%;
    margin-right:0%;
    float:left;   
    height:3px;    
    background-color:#3c3c3c;
    
}

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

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

/* Commands for scrolling */

#header_left_top.scroll{
    //background-color: yellow;  
}

#header_right_top.scroll{
    display:none;
}

#header_left_bottom.scroll{
    display:none;
}

#header_right_bottom.scroll{
    height:70px;
    padding-top:20px;
    //background-color: red; 
}

.wrapper_horizontal_line.scroll{
    display:none;
    
}



/* ---------------------------- Styling of footer ------------------- */

#footer_left_top{
    //background-color: red;
    background-color: inherit; 
    width:40%;
    float:left;
    height:50px;
    //line-height:70px;
    //text-align:center;    
    padding-top:10px;
}

#footer_left_bottom{
   //background-color: green;
   background-color: inherit;
   width:40%;
   float:left;
   height:50px;
   //box-shadow: 0px 5px 10px #181818;
}

#footer_right_top{
    background-color: inherit;
    //background-color: lightblue;
    width:60%;
    float:right;
    height:50px;   
    margin-right:0;
    padding-top:10px;
}

#footer_right_bottom{
  background-color: inherit;
  //background-color: lightcoral;
  width:60%;  
  float:right;
  height:50px;
  padding-top:30px; 
}

.footer_left_top_content{    
    //background-color: pink; 
    float:left;
    color:white;
}

.footer_left_bottom_content{
    //background-color: blue;
    float:left;         
}



.footer_right_bottom_content{
    //background-color: blue;
    float:right;   
    //padding: 12px 0 0 0;
    color:white;
    
}

.logo_inFooter{   
   float:right;   
   height:40px; 
}

/* --------------------- 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 {
  background-color: transparent;
  color: gray;
  //text-decoration: underline;
  display: inline;
  padding-bottom: 3px;
  border-bottom:2px solid gray;
  
  
}

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

#mobileMenu{
    //background-color:greenyellow;
    //border:3px solid red;
    width:200px;
    height:100vh;
    //height: calc(100vh - calc(100vh - 100%));
    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:calc(100vh - calc(100vh - 100%));
    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;
  //border:3px solid yellow;
  background-color:#3c3c3c; 
  width:200px;
  height:100vh;
  height: calc(100vh - calc(100vh - 100%));
  position:absolute;
  display:inline;
  left:0px;
}

.mobileMenu_page_galleries{
  //  border:3px solid green;
  background-color:#3c3c3c;
  //background-color:red; 
  width:200px;
  height:calc(100vh - calc(100vh - 100%));
  left:200px;
  position:absolute;
  display:inline;
}

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

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

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

.mobileMenu_page_tutorials{
  //background-color:magenta;
  background-color:#3c3c3c; 
  width:200px;
  height: calc(100vh - calc(100vh - 100%));
  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: gray;
  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: gray;
  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;
}



/* ------------------Category horizontal navigation ------------------------- */

.category_nav { 
  //background-color: green;
  margin: auto;
  width: 100%;
  //border: 3px solid green;
  padding: 40px 0 20px 0;
  text-align: center;
  font-family: "Arial", Arial, sans-serif;
  font-size:1.1rem;
  color:white; 
}

.category_nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0px; 
  display: inline;  
}

.category_nav ul li {
  display: inline-block;
  
}

.category_nav ul li a {
  margin-left: 12px;
  margin-right: 12px;
  //background-color: #dddddd;
  text-decoration: none;
  font-family: "Arial", Arial, sans-serif;
  color:gray;  
  display:block;  
}

.category_nav a:hover {
  color: white;
  background-color: transparent;  
}

.category_nav_current {
  color: white;
  background-color: transparent;  
  display:inline;  
}

.category_nav_current_not {
  color: gray;
  background-color: transparent;  
  display:inline;
   
}

.headline_photoGrid{
    width:100%;
    margin: auto;
    color:white;
    text-align: center;
    padding: 20px 0 10px 0;
    font-weight: 100;
    font-size:2.5em;    
}









/* ---------------------------- Gallerie thumbnails ------------------------ */


.gallery_element{
    width:20%;
    float:left;
    padding-top:1%;
    padding-bottom:1%;
    padding-left:1%; 
    padding-right:1%;    
    display:table;
    //background-color: cyan;
   
}



/* ---------------------Coming soon label on not uploaded ------------------------ */

.coming_soon{
  position:absolute;
  top:25%;
  left:15%;
  width:70%;
  text-align: center;
  margin:0 auto;
  font-size: 3em;
  color:white;
  border:2px solid white;
  background-color: white;
  background: rgba(238, 238, 238, 0.5); /* White see-through */
  transform: rotate(-3deg);  
}

.coming_soon_blogTutorials{
  position:absolute;
  top:25%;
  left:15%;
  width:70%;
  text-align: center;
  margin:0 auto;
  font-size: 2.6em;
  color:white;
  border:2px solid white;
  background-color: white;
  background: rgba(238, 238, 238, 0.5); /* White see-through */
  transform: rotate(-3deg);  
}


/* ------------------- Settings for blog and tutorials ---------------------- */

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

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

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


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

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






.blogTutorials_text p{
   text-align:justify; 
}


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




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

.box_blogTutorials_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_blogTutorials_upper:hover .blogTutorials_overlay {
  opacity: 0;
}



.blogTutorials_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;
}


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

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

.endfloat{
    clear:both;
}

.endfloat_blogTutorials {
    clear:left;    
}

/* ----------------------- Settings for about page -------------------------- */

.about_wrapper {
 //background-color:blue;   
 //width: 100%;
 text-align:justify;
 display:inline-block;
 //overflow:auto;
}

.image_about{
    float:right;
    width:40%;
    margin: 0 0 20px 20px;
}

.collage_about{
  display:inline-block;
  width:100%;    
  padding-top:5%;  
  padding-bottom:5%;    
  //padding-left:0px;
  //padding-right:15px;
}

.logo_landscape{
  display:none;
  width:20%;
  position:absolute;
}

.mobileMenu_footer_index{
    display:none;
}


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

@media only screen and (max-width:1920px) {
/* Change number of thumbnails from 5 to 4 */
.gallery_element{ 
width:25.0%;  
}
.logo_inHeader{   
    height:36px;
    line-height:36px;
    text-align:center;
    margin-top:17px; 
}


}

@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{   
   float:left;   
    //padding: 2%;
    //background-color: blue;
    height:24px;
    line-height:24px;
    text-align:center;
    margin-top:23px; 
}


}

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

.blogTutorials_element{
    width:50%;   
   
}

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

#header {  
  position: absolute;
  //height:50%;
  //z-index:-5;
  }
  
#content{    
    margin-top: 50px; // Ensuring that margin-top of content has same height than header
}

#content_blogTutorials{
    margin-top: 50px; // Ensuring that margin-top of content has same height than header  
}

#header_left_top{   
   height:40px;
   width:70%
}

#header_right_top{   
   height:40px;
   width:30%
}

#header_left_bottom{   
   height:10px;
   width:70%
}

#header_right_bottom{   
   height:10px;
   width:30%
}

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

.header_right_top_content{
  display:none;  
}

.menu_icon{
    display:block;   
}

.close_icon{
    display:block;   
}

.menu_smallScreen_container{
 display:block;   
}

/* Settings for category navigation */

.category_nav { 
  font-size:0.85rem;  
}

.category_nav ul li a {
  margin-left: 5px;
  margin-right: 5px;  
}


.wrapper_horizontal_line{
    display:none;
}

.logo_inFooter{   
   height:38px; 
}

body{ 
 font-size:0.9rem;
}

/* Settings for Footer */   

.footer_right_bottom_content{  
    font-size:0.7rem;
}

/* Settings for Footer of mobile Menu */

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

.mobileMenu_footer_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%;
}

.blogTutorials_element{
    width:100%;   
   
}

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

.menu_icon{
    display:block;   
}


body{ 
 font-size:0.8rem;
}

/* Settings for Footer */   

#footer{
    height:80px;
}

#footer_left_top{
width:30%;
}

#footer_right_top{
width:70%;
}


.footer_right_bottom_content{  
    font-size:0.55rem;
}

#footer_left_bottom{
    height: 30px;
    width:30%;
}

#footer_right_bottom{
   height: 30px; 
   padding-top:10px;
   width:70%;
}

.logo_inFooter{   
   height:28px; 
}

/* Settings for category navigation */

.category_nav { 
  font-size:0.6rem;  
}

.category_nav ul li a {
  margin-left: 3px;
  margin-right: 3px;  
}


}


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

.blogTutorials_element{
    width:100%;   
   
}

body{ 
 font-size:0.75rem;
}

/* Settings für Fonts von kleinen Bildschirmen -------------------------------------------- */   

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



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

#footer{
    height:40px;
    font-size:0.5rem; 
}

#footer_left_top #footer_left_bottom{
width:30%
}

#footer_right_top #footer_right_bottom{
width:70%
}


#footer_left_top{
    height: 30px;
    padding-top:5px;
}

#footer_right_top{
   height: 30px; 
   padding-top:5px;
}

#footer_left_bottom{
    height: 10px;
}

#footer_right_bottom{
   height: 10px;
   padding-top:5px;
   //background-color:blue;
}


.footer_right_bottom_content{  
    font-size:0.35rem;
}


.logo_inFooter{   
   height:18px; 
}

/* Settings for category navigation */

.category_nav { 
  font-size:0.45rem;  
}

.category_nav ul li a {
  margin-left: 2px;
  margin-right: 2px;  
}

}