/* General config */
body {
  background-color: #192537;
  font-family: 'Lato', sans-serif;
  margin: 0;
  box-sizing: border-box;
}




#wrapper {
  margin: 0px;
}

.text2 h1, h2, h3, h4, h5{
  width: inherit;
}

/* Text config */
h1,
h2,
h3,
h4,
h5 {
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 24px;
  line-height: 32px;
  text-transform: uppercase;
  font-weight: 300;
  margin: 0 auto;
  width: 780px;
}


/* Mobile */
        @media screen and (max-width: 420px) {
          h1,
          h2,
          h3,
          h4,
          h5 {
            font-size: 2em;
            width: 100%;
            line-height: initial;
          }
        }

h1 {
  font-weight: 300;}

h2 {
  font-weight: 400;}

h3 {
  font-weight: 900;}

h4 {
  font-weight: 300;
  font-style: italic; }

h5 {
    font-size: 14px;
    font-style: italic;
    font-weight: 300;
    width: 780px;
    margin: 0 auto;
    margin-top: 75px;
    margin-left: 19%;
}


p {
  font-family: 'Lato', sans-serif;
  color: #fff;
  font-size: 16px;
  font-weight: 100;
  width: 550px;
}


          @media screen and (max-width: 420px) {
            p {
              width: 100%;
            }
          }


a:active {
    color: #fff;
}


}

a:hover {
    color: red;
}

a:visited {
    color: #c8c8c8;
}


h1.first{
  font-weight: 300;
  font-size: 42px;
  margin-bottom: 20px;
}

h3.headl {
    width: 380px;
}


h3, h2.headl {
    font-weight: 300;
}


/*navigation */

#hamburger {
  position: fixed;
  top: 50px;
  right: 50px;
  z-index: 500;
}


.ham {
  cursor: pointer;
  position: relative;
  padding-left: 1.25em;
  width: 50px;
  height: 50px;
}


.ham:before {
  border-bottom: 3px solid #fff;
  border-top: 10px double #fff;
  content: "";
  height: 4px;
  right: 0;
  position: absolute;
  top: 0.25em;
  width: 40px;
}

a {
  text-decoration: none;
  color: #fff;
}

#nav {
  font-family: 'Lato', sans-serif;
  font-size: 24px;
  line-height: 42px;
  font-weight: 300;
  
  background-color: rgba(0, 0, 1, 0.8);
  color: #fff;
  width: 290px;
  height: 100%;
  text-decoration: none;
  z-index: 1000;
  position: fixed;
  text-transform: lowercase;
  right: 0px;
}

#nav ul {
  height: 100%;
  margin: 0;
  padding: 24px 0 24px 40px;
}

#nav ul li {
  list-style: none;
}

#nav ul li a:hover {
  background-color: #ae2300;
  padding: 5px;
}

#nav ul li a:active {
  background-color: #ae2300;
  padding: 5px;
}


#navx{
  text-transform: uppercase;
  font-weight: 400;
  color:#ae2300;
}

#navx{
  color:#fff;
}


/* Content backgrounds */



.mainbg{
   /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}




.parallax { 
    /* The image used */
    background-image: url(img/bg1.jpg);
    /* Full height */
    height: 530px; 
    background-position-y:-40px;
}


          .layer{
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.4);
          }


.parallax2 { 
    /* The image used */
    background-color: #192537;
    /* Full height */
    height: 420px; 

}

.parallax3 { 
    /* The image used */
    background-image: url(img/bg7.jpg);

    /* Full height */
    height: 240px; 
}


.parallax4 { 
    /* The image used */
    background-color: #fff;
    /* Full height */
    height: 580px; 
    padding: 20px;

}


.parallax5 { 
    /* The image used */
    background-image: url(img/bg7.jpg);
    /* Full height */
    height: 1685px;
}


          .moonbody { 
            background-color: #e0e0e6;
            height: 780px; 
            width: 100%;
            position: relative;
            z-index: 0;
            top: 880px;
          }


          .moon{
            background-image: url(img/Moon.png);
            background-position: center top;
            background-repeat: no-repeat;
            background-size: cover;
            width: 100%;
            height: 1000px;
            position: relative;
            top: -500px;
            margin: 0 auto;
            z-index: 1;
          }


          .mooni{
            width: 100%;
            height: 750px;
            margin-top: -150px;
          }


.parallax6 { 
    /* The image used */
    background-image: url(img/bg7.jpg);
    /* Full height */
    height: 1655px; }

.parallax7 { 
    /* The image used */
    background-image: url(img/bg6.jpg);
    /* Full height */
    height: 750px; 
}




            @media (max-width: 1025px) {
                                    
                    .mainbg{
                         background-attachment: unset;
                         background-size: cover;
                           
                          }

                      
                  .parallax{
                    background-position-y: 0px;
                    height: 450px;
                      }


                  .space2 {
                   padding-top: 60px;
                    }


                   .parallax3 {
                      background-size: 100%;
                      background-position: bottom;
                      }


                    .parallax5 {
                      background-size: contain;
                      background-repeat: repeat-y; 
                      }
                      


                    .parallax6 {
                       background-size: contain;
                      background-repeat: repeat-y;
                      }

                      .parallax7 {
                        background-size: cover;
                        height: 550px;

                      }
                


                   h1, h2, h3, h4, h5 { 
                      width: 100%;
                      padding-left: 20px;
                      box-sizing: border-box;
                    }


                     p{
                      font-weight: 300;
                      }  

              }


/* content */


.text {
  min-height: 10px;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  position: relative;
  padding-top: 120px;

}

       @media (max-width: 1025px) {

          .text {
            width: 90%;
            padding-top: 80px;}

        }  




.text2 {
    width: 600px;
    height: 450px;
    padding: 20px;
    margin: 0 auto;
    margin-top: 40px;
    background-image: url(img/stars.png);
      background-size: 14%;
    background-repeat: no-repeat;
    background-position: left top;
    background-position-y: 26%;
    background-position-x: 7%;
}


.star{
  border-radius: 40px;
  width: 40px;
  height: 40px;
  background-color: #dfdfe5; 
  margin:20px;
}

#points{
      width: 150px;
    height: 250px;
    position: absolute;
    float: left;
}

.point {
    position: absolute;
    width: 380px;
    height: 250px;
    left: 225px;
    top: 60px;
}



.s2{
  margin-left: 75px;
  border-radius: 30px;
  width: 30px;
  height: 30px;
  margin-bottom: 65px;
  margin-top: 55px;
}


.s4{
    margin-left: 75px;
    border-radius: 30px;
    width: 30px;
    height: 30px;
    margin-top: 42px;
}


.red{
  background-color: #ae2300;
}

.ship{
  background-image: url(img/Schiff_1.png);
  background-repeat: no-repeat;
  width: 57px;
  height: 34px;
  margin-left: -105px;
}


.ship1{
  margin-top: -160px;
  margin-left: -150px;
}

.ship2{
  margin-top: -125px;
}


.ship3{
  margin-top: 30px;
  margin-left: -150px;
}

.ship4{
  margin-top: 105px;
}




#firstp{
  background-color: #ae2300;
}

h3,h2.headl {
    font-weight: 300;
}

.point p{
width: 380px;
}



.parallax4 h2{
    font-weight: 300;
    color: #000;
    margin-top: 40px;
    margin-bottom: 40px;
}



/* tool bar */

.skills{
  width: 600px;
  margin: 0 auto;
  margin-top: -15px;

}

.skills h2{
  font-size: 42px;
  font-weight: 300;
    margin-left: -5px;
}

.skill{
  width: 600px;
  height: 60px;
  margin: 0 auto;
  float: left;
  color: #000;
  height: 20px;
  margin-bottom: 20px;
} 


.skill p{
    float: left;
    color: #000;
    font-weight: 300;
    width: 180px;
    height: 50px;
    margin-right: 20px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    line-height: 0px;
  }



.bar{
  background-color: #dfdfe5;
  width: 380px;
  height: 20px;
  float: left;

}


.barbase{
 background-color: #ae2300;
  height: 20px;
  text-align: right;
  color: #fff;
  font-weight: 300;
  box-sizing: border-box;
  padding:2px; 
  padding-right: 20px;
  width:0px;
}

.bar10,
.bar11, 
.bar12, 
.bar13{
  background-color: #660600;
}

.sk2 {
  margin-bottom: 40px;
}

.sk2 p{
  height: 60px;
  line-height:18px;
  margin-top: -4px;
}

.sk3 {
  margin-bottom: 40px;
}


.skill ul li{
  font-size: 14px;
  font-weight: 300;
  text-transform: uppercase;
  list-style: none;
  width: 500px;
  margin-top: -8px;

}



/* way on the moon */

.space{
padding-top: 160px;
font-weight: 300;
font-size: 42px;

}


.line{
background-color: #d1d1d8;
width: 2px;
margin:0 auto;
height: 1350px;
float: left;
position: relative;
left: 46%;
top:-340px;
z-index: -1;
}

.line1{
background-color: #000001;
width: 2px;
margin:0 auto;
height: 1350px;
float: left;
position: relative;
left: 46%;
top:-340px;
z-index: -1;
}


div.dreieck {
    width: 0;
    height: 0px;
    border-left: 0px solid transparent;
    border-right: 140px solid transparent;
    border-bottom: 80px solid #ae2300;
    margin: 0 auto;
    position: relative;
    top: -260px;
    left: 5%;
    z-index: 1;
}



.path2{
    background-image: url(img/path_2.png);
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    height: 1035px;
    width: 80px;
    margin-left: 200px;
    top: 75px;
}


.secondpath p {
    width: 220px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    }


.pp0{
  color:#000;
  position: relative;
  left: 70%;
  top: 33px;
  margin-bottom: 73px;
}

.pp1{
  color:#000;
  position: relative;
  left: 70%;
  top: 63px;
}

.pp2{
  color: #000;
  position: relative;
  left: 40%;
  top: 200px;
}

.pp3{
  color: #000;
  position: relative;
  left: 70%;
  top: 336px;
}


.pp4{
  color: #000;
  position: relative;
  left: 65%;
  top: 506px;
}

.pp5{
  color: #000;
  position: relative;
  left: 40%;
  top: 733px;
}

.secondpath{
  float: left;
  width: 200px;
  height: 200px;
  position: relative;
  margin-left: -400px;
  text-align: right;
  top: 33px;
  
}



.space2{
padding-top: 160px;
font-weight: 300;
font-size: 42px;

}


        @media (max-width: 1025px) {
                                

            .space2 {
               padding-top: 60px;
             }
         }



.bubbles {
    width: 780px;
    height: 1080px;
    position: relative;
    top: -15px;
}


.path{
  width: 780px;
  height: 1080px;
  margin: 0 auto;
  position: relative;
}



.bubblep{
  width: 150px;
  height: 100px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  z-index: 10;
  margin-bottom: 20px;
}


.bubblep p{
  text-align: left;
  color: #000;
  margin-left: 160px;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 14px;
  width: 100%;
}


.bubblep p strong{
  font-weight: 900;
}


.bubblep p span{
  font-style: italic;
  font-weight: 100%;
}




/* Vita BUBBLES */




#bub1,
#bub2,
#bub3,
#bub4,
#bub5,
#bub6,
#bub7,
#bub8,
#bub9,
#bub10 {
  background-color: #192537;
  box-sizing: border-box;
  border: solid 1px #fff;
  border-radius: 100px;
  color: #fff;
  font-family: 'lato';
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 300;
  transition: all 0.5s ease-in-out;
  cursor: default;
  margin: 0 auto;
  padding-top: 30px;
  z-index: 10;
  float: left;
}


#bub6 span  {
  font-style: italic;
  font-weight: 300;
}

#bub1:hover,
#bub2:hover,
#bub3:hover,
#bub4:hover,
#bub5:hover,
#bub6:hover,
#bub7:hover,
#bub8:hover,
#bub9:hover,
#bub10:hover {
  background-color: #ae2300;
}
/* heller werden beim hover */



#bub5 {
  width: 50px;
  height: 50px;
  padding-top: 13px;
  margin-left: 20px;
}


#bub10, #bub7, #bub3{
  width: 60px;
  height: 60px;
  padding-top: 20px;
  margin-left: 15px;
  margin-bottom: -10px;

}


#bub8, #bub4{
  width: 80px;
  height: 80px;
  margin-left: 5px;
}


#bub6 {
  width: 100px;
  height: 100px;
  margin-left: -5px;
  margin-bottom: 30px;
}


#bub9 {
  width: 100px;
  height: 100px;
  padding-top: 40px;
  margin-left: -5px;
}

#bub2{
  width: 100px;
  height: 100px;
  padding-top: 20px;
  background-color: #d1d1d8;
  text-transform: uppercase;
  color: #192537;

}

#bub2 span{
  font-style: italic;
  font-weight: 300;
}







/*   References <<<<<<<<<<< */
/* boxes for references */

#mainbox {
  margin: 0 auto;
  width: 780px;
  margin-top: 60px;
}

      @media (max-width: 720px) {
        #mainbox {
          width: 100%;
        }
      }






#mainbox:after {
  clear: both;
  display: table;
  content: '';
}


.box {
  display: block;
  background-color: rgba(25,37,55,0.5);
  background-repeat: no-repeat;
  background-position: center;
  float: left;
  height: 135px;
  padding-left: 20px;
  padding-top: 20px;
  width: 160px;
  margin: 5px;
}



      @media (max-width: 720px) {
        .box {
          width: 130px;
        }
      }






.box.nobg {
  background-image: none;
}


div .box p {
  margin: 2px 0 0;
  width: 180px;
  font-size: 10px;
  font-weight: 300;
}


.headline {
  color: #fff;
  display: inline-block;
  font-size: 12px;
  margin-bottom: 15px;
  text-transform: uppercase;
}



.x1 {
  background-image: url("img/logo_1.png");
  left: 100px;
  top: 310px;
}

        .x2 {
          background-image: url("img/logo_2.png");
          left: 110px;
          top: 310px;
        }


        .x22 {
          background-image: url("img/logo_16.png");
          left: 110px;
          top: 310px;
        }

.x3 {
  background-image: url("img/logo_3.png");
  left: 120px;
  top: 310px;
}

        .x4 {
          background-image: url("img/logo_4.png");
          left: 130px;
          top: 310px;
        }

.x5 {
  background-image: url("img/logo_5.png");
  left: -560px;
  top: 465px;
}

        .x6 {
          background-image: url("img/logo_6.png");
          left: 275px;
          top: 320px;
        }

.x7 {
  background-image: url("img/logo_7.png");
  left: 285px;
  top: 320px;
}

        .x8 {
          background-image: url("img/logo_8.png");
          left: 295px;
          top: 320px;
        }

.x9 {
background-image: url("img/logo_9.png");
left: 295px;
top: 320px;
}

        .x10 {
          background-image: url("img/logo_10.png");
          left: 295px;
          top: 320px;
        }


.x11 {
background-image: url("img/logo_11.png");
left: 295px;
top: 320px;
}

          .x12 {
          background-image: url("img/logo_12.png");
          left: 295px;
          top: 320px;
          }
.x13 {
  background-image: url("img/logo_13.png");
  left: 295px;
  top: 320px;
  }

          .x14 {
          background-image: url("img/logo_14.png");
          left: 295px;
          top: 320px;
          }

 .x15 {
  background-image: url("img/logo_15.png");
  left: 295px;
  top: 320px;
  }





/*   Formular / drop me a message */


form {
  width: 770px;
  margin: 0 auto;
  margin-top: 60px;
  font-weight: 300;
  color:#ffffff;
  
}

      @media (max-width: 1025px) {
          form {
            width: 550px;
            margin-left: 30px;
          }
        }




        @media (max-width: 600px) {
          form {
            width: 100%;
            margin-left: 30px;
          }
        }


input,
textarea {
  display: block;
  margin-bottom: 10px;
  background-color: rgba(174, 35, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  color: white;
  font-weight: 300;
  color:#ffffff;
}


input {
  padding: 4px;
  padding-left: 10px;
  width: 278px;
  height: 28px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 300;
  color:#ffffff;

}


textarea {
  width: 380px;
  padding: 4px;
  padding-left: 10px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 300;
  color:#ffffff;

}


          @media (max-width: 400px) {
            textarea {
              width: 95%;
            }
          }



input[type='submit'] {
  width: initial;
  color: black;
  background-color: white;
  border: 0;
  padding: 5px 25px;
  cursor: pointer;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 300;
}



            @media (max-width: 400px) {
              input[type='submit'] {
                margin-left: 175px;
              }
            }

      





#i1 {
  background-image: url("img/facebook_icon.png");
}

#i1:hover {
  background-image: url("img/facebook_icon_red.png");
}
    

#i2 {
  background-image: url("img/google_icon.png");

}

#i2:hover {
  background-image: url("img/google_icon_red.png");
}


#i3 {
  background-image: url("img/xing_icon.png");

}

#i3:hover {
  background-image: url("img/xing_icon_red.png");
}


.icon {
  background-repeat: no-repeat;
  width: 35px;
  height: 35px;
  display: block;
  float: right;
  margin-right: 16px;
}



.icon_container {
  height: 35px;
  width: 155px;
  position: relative;
  float: right;
  margin-right: 3%;
  bottom: 5%;
}



/* Quotes */

.quo {
  width: 780px;
  height: 80px;
  margin: 0 auto;
  margin-top: 160px;
}

.qu{
  font-size: 18px;
  font-style: italic;
}

.space3{
  margin-bottom: 60px;
}

p.puh {
    font-weight: 500;
    margin-top: 40px;
}



    .slider {
        width: 60%;
        margin: 60px auto;
        background-color: rgba(25,37,55,0.5);
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
      color: red;
    }


    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }
    
    .slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    }

.lazy p {
    width: 100%;
}






/*menü icons */

#m1 {
  background-image: url("img/facebook_icon.png");
}

#m2 {
  background-image: url("img/google_icon.png");

}

#m3 {
  background-image: url("img/xing_icon.png");

}


.micon {
  background-repeat: no-repeat;
  width: 35px;
  height: 35px;
  display: block;
  float: left;
  margin-left: 20px;
  margin-top: 40px;
  display: none;

}

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

            .micon {
            display: inline-block;          
          }
           

  }






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

  #wrapper {
    overflow:hidden;
  }

           .path {
              width: 100%;
              }


              div.dreieck {
                left: 6%; }

              
              .bubbles {
                   width: 100%;}

             .bubblep p {
                margin-left: 120px;}

               .bubbles {
                    width: 100%;}


                #mainbox {
               width: 570px;}

               .quo {
                width: 550px;}



          }


 p.imp {

    width: 210px;
    margin: 50px;
    float: left;
    padding-left: 16%;
    font-weight: 600;
    color: white;

}



a:hover{

    color: red;
}