#video-background {
  /*  making the video fullscreen  */

  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  top: 0;
  width: auto;
  height: auto;
  z-index: -100;
}






.col-md-6{

}

#bodyBack
{
  background-color: rgb(50, 50, 50);
  text-decoration:  none;
}
#bodyBackBlack
{
  background-color: #000000;
  text-decoration:  none;
}
.col-lg-4{
  /*border:1px dotted greenyellow;*/
 margin: 15px 0px;
}
.carousel-item{

  padding-bottom: 5%;
}
.row{
height: 100%;
}
#bodyBackContact
{
  background-color: white;
  text-decoration:  none;
}

#Startseite{
  background-size:  cover;
  background-color: rgba(30,30,50,0.5);
  background-blend-mode: soft-light;
}
.unsichtbar{
display: none;
}

.heading{
  width: 900px;
  height: 300px;
  margin: auto;
  position: absolute;
  /*background-color: aqua;*/
  top: 10%;bottom: 0px;right: 0px;left:0px;
}
.titel1{
  font-family: Montserrat, sans-serif;
  display:     block;
  text-align:  center;
  color:       #767676;
  font-size:   60pt;
 font-weight:  bolder;
  margin-top: 4%;

}

.titel-pf, .titel-pf2, .titel-pf-klein{
  font-family:   Montserrat, sans-serif;
  display:       block;
  text-align:    center;
  color:         rgba(201, 201, 201, 0.35);
  font-size:     72pt;
  font-weight:   bolder;
  margin-bottom: 5%;
  padding-top: 2%;
  z-index: 3;
}
.titel-pf2{
  padding-top: 15%;
}
.titel-pf-klein{
padding-top: 5%;
  margin-bottom: 0;
  font-size:     32pt;
  text-align: left;
  font-weight: bolder;
}

.reihe{
  margin:5%;
}

#skills{
  color:white;
 text-align: center;

}
#skills h2{
  font-weight: lighter;
font-size: 12pt;
}
#skills h1{
  margin-top: 10px;
  font-size: 14pt;

}

#iwas{
  width: 800px;
  height: 100px;
}
.titel2{
  font-family: Montserrat, sans-serif;
  display:    block;
  text-align: center;
  color:      #767676;
  font-size:  18pt;
 font-weight: lighter;
  margin-top: 15px;
}


.my-row-content h1{
  margin-left: 100px;
  float: left;
}

.my-row-content{
  background-color: rgb(50, 50, 50);
  height: 20%;
  padding:10%;
  margin-right: auto;
  margin-left: auto;
  background-repeat: no-repeat ;
  background-size: cover;


}
.my-row-me{
  height: 20%;
  margin-top: 25%;
  padding:              20%;
  background-color:   rgba(255, 255, 255, 0);

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.row-cv{
  margin: 0;
  padding:              3%;
  color: white;
}

.my-container-platz{
  padding-bottom: 20px;
  padding-top: 20px;



}
#portrai{
  z-index: 3;

  
}
.portrai_bild{
  z-index: 1;
position: fixed;
height: 100%;
  margin-left:0 ;

}

.my-container-platz2{
  padding-bottom: 5%;
text-align: center;
  background-color: rgb(50, 50, 50);
}

.my-col{
/*border: 2px dotted greenyellow;*/
  text-align: left;

}


.col-lg-3{

  text-align: center;
}


.my-col-textfeld
{
  font-weight: lighter;
  font-size:   20pt;
  color: #ffffff;
  z-index: 2;
  /*border: 2px dotted greenyellow;*/

}
.my-col-textfeld h1{
  text-align: left;
}
.my-col-überschrift{
  font-weight:      bolder;
  text-align:       left;
  color:            rgb(7, 157, 93);
  font-size:        64pt;
  padding-right:    140px;


}
.my-col-carusel{
  font-weight:         bolder;
  text-align:          center;
  color:               rgba(255, 255, 255, 0.31);
  font-size:           52pt;

  background-color: #1c7430;

  background-size:     cover ;
  background-position: center;
  background-repeat: no-repeat;
}

.my-col-überschrift2{
  font-weight: normal;
  text-align: left;
  color: #c9c9c9;
  font-size:   44pt;
  padding-bottom: 50px;

}
.my-col-überschrift2-centered{
  font-weight: lighter;
  text-align: center;
  color: #c3c3c3;
  font-size:   36pt;
  padding-bottom: 50px;

}
.my-col-überschrift-transparent{
  font-weight: lighter;
  text-align: center;
  color: #c3c3c3;
  font-size:   36pt;
  padding-bottom: 50px;
  margin-top: 20%;
}

.my-col-transparent{
  color: white;
}

.col-cv{
  text-align: center;



}
#begrusung,#Pat{
  color: white;
}


.my-col-foto{
  width: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;


}
#übermich{
  background-color: #474747;
 color: white;
}
.icon{
  width: 25px;
  height: 25px;
}

.beschreibung{
display: none;
}
.enter, .enter-cv, .enter-black, .playVideo{
  margin: 30px auto;
  display: block;
  width: 180px;
  height: 50px;
  border: 3px solid white;
  background-color: rgba(255, 255, 255, 0);
  color: white;
  border-radius: 3px;
  font-size: 12pt;
  font-weight: bold;
  font-family: Montserrat,sans-serif;

  transition: background-color 1000ms, color 1000ms;
}

.enter-cv{
  width: 130px;
  height: 40px;
  border: 2px solid white;
  font-weight: bolder;
}
.enter-black{

  border: 3px solid black;
  color: black;
  transition: background-color 1000ms, color 1000ms;
}

.enter:hover, .enter-cv:hover, .playVideo:hover{
  background-color: white;
  color: black;
  cursor: pointer;

  transition: background-color 1000ms, color 1000ms;
}

.enter-black:hover{
  background-color: black;
  color: white;
  cursor: pointer;

  transition: background-color 1000ms, color 1000ms;
}

.mehr{
  height: 28px;
  width: 50px;
  background-image:url("pics/button_mehr.png");
  background-color: transparent;
  border: 0;


}
.youtubeVideo{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.responsive-video {
  position: relative;
  padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
  padding-top: 0px;
  height: 0;
  overflow: hidden;
}

.carousel-inner h2{
  font-size: 20pt;
  font-style: oblique;
}

#ich{

  font-weight: normal;
}

.rounded-circle{
  width: 100%;
}

.rounded-circle-50{
  width: 35%;
  border-radius: 50%
}

.jahr{
  font-size: 44pt;
 font-weight: bold;
}

.grenze{
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.meineProjekte{
  margin-top: 0;
  padding: 0;
}
#softskillsh1{
  margin-top: 15%;
}
.aboutme{
  margin-top: 20%;
  background-color: rgba(111, 66, 193, 0);

}
.aboutme h1{
  margin-bottom: 10%;
  margin-top: 15%;
  font-weight: bold;
}

.left{
  text-align: left;
}
.aboutme .my-col{
border:  2px dotted darkcyan;
}
.black{
  color: black;
}

.rounded-circle-50:hover{
  background-color: green;
  cursor: pointer;

  transition: background-color 500ms;
}

.galery{
 width: 100%;
  transition: transform 200ms ease-in-out;
}
.galery:hover{
  transform: scale(1.1,1.1);
  transition: transform 200ms ease-in-out;
  z-index: 15;
}
.hamburger{
  background-image: url("pics/hamburger.png");
  border: 0;
  background-color: rgb(50, 50, 50);
  background-size: cover;
  visibility: hidden;
  margin: 0;
  padding: 0;


}

*{
  margin: 0px;
  padding: 0px;
  text-decoration: none;
}
a{
  text-decoration: none;
}
 a:link{
   text-decoration: none;
   font-weight:     bolder;

   color:           #acacac;
}

 a:visited{
   text-decoration: none;
font-weight: bolder;
   color:           #acacac;
}

 a:active{
   text-decoration: none;
   color:       white;
}

 a:hover{
   text-decoration: none;
   color:       white;
}


.popup_oeffnen:hover , .popup_oeffnen2:hover{
  color:  #53b54e;
  cursor: pointer;
}














/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption,.carousel-caption-black {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 40vh;

}
.carousel-item > img {
  position: center;
  top: 0px;
  left: 0;
  width: 100%;
  min-height: 100%;

}






@media (min-width: 576px) {
  .container, .grenze {
    max-width: 540px;
  }
  .nav-masthead .nav-link
  {
    padding: 0 0;
    margin: 0;
  }
}

@media (min-width: 768px) {
  .container, .grenze {
    max-width: 720px;
  }
  .carousel-item {
    aheight: 30vh;

  }
}

@media (min-width: 992px) {
  .container, .grenze {
    max-width: 960px;
  }
  .carousel-item {
    aheight: 40vh;

  }
}

@media (min-width: 1200px) {
  .container, .grenze {
    max-width: 1140px;
  }
  .carousel-item {
    aheight: 50vh;

  }
}

@media (min-width: 1800px) {
  .container, .grenze {
    max-width: 1700px;
  }
  .carousel-item {
    aheight: 75vh;

  }
}





@media (max-width: 400px) {
  .enter, .enter-cv, .enter-black, .playVideo{
    font-size: 8pt;
    width: 130px;
    height: 40px;

  }
  .my-col-textfeld
  {
    font-size: 12pt;
  }

  .my-col-überschrift2{
    font-size:28pt
  }
  .masthead-brand{
    font-size: 14pt;
  }

  .carousel-caption.h2{
    font-size: 0;
  }
  .hamburger{

    visibility: visible;
  }
  .icon{
    width: 20px;
    height: 20px;
  }
  .enter, .enter-black,.enter-cv {


  }
  .col-cv h2{
    font-size: 14pt;
  }
  .jahr {
    font-size: 12pt;
  }
  .masthead-brand{
    font-size: 14pt;
  }
}




@media (max-width: 575px) {

  nav li{
    padding: 20px 0.5rem;
  }

  #dach{
    font-size:        8px;
  }

  .my-col-überschrift2{
    font-size:36pt;
    padding: 0;
  }
  h1{
    font-size: 16pt;
  }

  h2{
    font-size: 12pt;
  }
  .enter, .enter-cv, .enter-black, .playVideo{
    margin: 30px auto;
  }
.carousel-indicators{
  margin: 8px;
  height: auto;
}
  .carousel-caption {
    bottom: 0;
    margin: 0;


  }
  .masthead-brand{
    font-size: 18pt;
  }
  .hamburger{

    visibility: visible;
  }

  .my-col-textfeld .my-col {


  }
  .rounded-circle{
    height: 100px;
    width: 100px;
  }
}


@media (max-width: 767px) {
  nav li{
    padding: 20px 1.8rem;
  }

  #dach{
    font-size:        12px;
  }
  .jahr{
    font-size:        34px;}

  h1{
    font-size: 20pt;
  }

  h2{
    font-size:        14px;
  }
  .titel-pf, .titel-pf2{
    font-size:        36px;
  }
  .hamburger{

    visibility: visible;
  }
  a.nav-link.nav-item{
    margin: 0 0 0 0;

  }
  .rounded-circle-50{
    margin-top: 30px;
  }

}

@media (max-width: 991px) {
  nav li{
    padding: 20px 2.5rem;
  }

  #dach{
    font-size:        22px;
  }
  #dach{
    font-size:        16px;
  }
  .reihe .col-lg-4{
    padding: 20px;
  }
  .jahr{
    font-size:        44px;
  }
  h2{
    font-size:        24px;
  }
  .titel-pf, .titel-pf2{
    font-size:        46px;
  }

}