* {
    box-sizing: border-box;
}

body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
  height: 100%;
  color: #777;
  line-height: 1.8;
}

h4 a{
  text-decoration: none;
}
h8 {
  font-size: 10pt;
  font-weight: 800;
    color:black;
}
 h9 {
  font-size: 10pt;
  font-weight: 200;
   color:black;
     
}


h10 { 
    font-size: 12pt;
   color: #18307E;
   
}
header {
  text-align: right;
 
}

/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 1.0;
}

/* First image (Logo. Full height) */
.bgimg-1 {
    background-image: url('../images/parallax1.jpg');
    min-height: 75%;
}

/* Second image (Portfolio) */
.bgimg-2 {
    background-image: url("../images/parallax2.jpg");
    min-height: 600px;

}

/* Third image (Contact) */
.bgimg-3 {
    background-image: url("../images/parallax3.jpg");
    min-height: 500px;
}

.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}



.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

/* image Gallery */


.project-text {
  width: 300px;
  height: 300px;
  position: absolute;
  background-color: rgba (61,0,22,0.7);
  top:0;
  display:flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}

.w3-hover-text-orange {
  text-decoration: none;

}


/*// ********************************************************
//                 OVERVIEW OVERLAY
// *********************************************************/
.mosaik-container {
  display: flex;
  flex-wrap: wrap;
  margin-left: 80px;
}


.image {
  position: relative;
  width: 260px;
 margin:10px;

}

.image__img{
  display: block;
  width: 100%;

}

.image__overlay {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
}

.image__overlay:hover {
opacity: 0.9;
}

.image__title {
  font-size: 1.3em;
  font-weight: 400em;

}

.image__title a {
  text-align: center;
  margin:0;
  text-decoration: none;
}

.image__description p{
   font-size: 0.9em;
  font-weight: normal;
  float:left;
}


/*// ********************************************************
//                 NEWS 
// *********************************************************/

.flexbox-news-s {
    padding-left: 20px;
    padding-right:10px;
 
}

.flex-container-news-s {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
      
}


.flex-item-news {
    padding:30px;
    padding-bottom: 250px;
}


@media (max-width: 800px) {
    .flex-container-news {
    flex-direction: column;
    display: none;
  }
}

@media (min-width: 800px) {
    .flexbox-news-s{
    flex-direction: column;
        
    display: none;
  }
}

hr.new4 {
  border: 1px solid grey;
}
    
/*// ********************************************************
//                 PROJEKTSEITEN
// *********************************************************/


.container {
margin-top: 50px;
}

.h5 {
  margin-top: 25px;
}

.images {
  margin-top:0px;
}
.project-img {
  max-width:80%;
  margin: 20px;
}


/*// ********************************************************
//                 FOOTER
// *********************************************************/


.footer {
  max-height: 50px;
}


/*// ********************************************************
//                 BACK INDEX
// *********************************************************/

 .back-side img{
    padding-right: 50px;
    padding-top: 30px;
    outline: none;
}

.back-bottom a {
    font-size: 32px;
    font-weight: lighter;
    text-align: center;
}


/*// ********************************************************
//                 top
// *********************************************************/


@media screen and (min-width:993px) {
#myBtn {
    padding-right:50px;
}
}

#myBtn {
  display: none;
  position: fixed;
  height:60px;
  width:50px;
  bottom: 50px;
  right: 80px;
  z-index: 99;
  font-size: 15px;
  border: none;
  outline: none;
  background-color: #333333;
  color: white;
  padding: 15px;
  border-radius: 0px;
}

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

/*// ********************************************************
//                 MEDIA
// *********************************************************/

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
    .bgimg-1, .bgimg-2, .bgimg-3 {
        background-attachment: scroll;
    }
}
@media screen and (max-width:720px) {
  img {
      vertical-align: middle;
      padding-top: 30px;
  }
}