html{
 font-family: 'Poppins', sans-serif;
}

body{

}


/* h1 grösse für responsive design */
h1{
  font-size: 2.5em;
}

@media (min-width:768px){
  h1{
    font-size: 3em;
  }
}


p{
  font-size: 17px;
}

hr{
  border-top: 3px solid #f77f00;
  width: 5vh;
  float: left;
}

hr.fat{
  border-top: 5px solid #f77f00;
  width: 8vh;
  float: left;
}

/* herder secton und img */
.bg-header{
  background-image: url("../img/hero.jpg");
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  height: auto;
}

/* page sections */
.page-section-header{
  padding-top: 80px;
  padding-bottom: 100px;
}

.page-section-lg{
  padding-top: 150px;
  padding-bottom: 150px;
}

.page-section-md{
  padding-top: 100px;
  padding-bottom: 100px;
}

.page-section-sm{
  padding-top: 50px;
  padding-bottom: 50px;
}

/* Eckige Ecken */
.border-edgy{
  border-radius: 0px;
}

/* Runde Ecken */
.border-rounded{
  border-radius: 33px;
}

/*background Farben*/
.bg-lightgray{
  background-color: #FAFAFA;
}

.bg-midgray{
  background-color: #CED0CF;
}

.bg-darkgray{
  background-color: #9E9FA1;
}

/* Normaler cursor wird zu pointer */
.pointer{
  cursor: pointer;
}

/* Shadow für Bilder*/
.shadow{
  -webkit-box-shadow: 0px 10px 15px -2px rgba(0,0,0,0.57);
  -moz-box-shadow: 0px 10px 15px -2px rgba(0,0,0,0.57);
  box-shadow: 0px 10px 15px -2px rgba(0,0,0,0.57);
}

.gray-filter{
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

/* Tags für Fade in animation bei page scroll down */
.tag {
opacity: 0;
transform: translate(0, 5vh);
transition: all 0.5s;
}

.tag.visible {
opacity: 1;
transform: translate(0, 0);
}

.h-100vh{
  min-height: 100vh;
}


/*default bootstrap button farbe ändern*/
.btn-custom-orange{
  background-color: #eb8a23 !important;
}
.btn-custom-orange:hover{
  background-color: #E07F1C !important;
}


/* ------------------------------------------------------------- Developer section ------------------------------------------------------------- */
.red{
  background: red;
}