/* Add here all your css styles (customizations) */
@font-face {
    font-family: Titillium;
    src: url(../fonts/Titillium/Titillium-Regular.otf) format("opentype");
}

@font-face {
    font-family: Titillium Bold;
    src: url(../fonts/Titillium/Titillium-Bold.otf) format("opentype");
}

.font-container {
  height: 47px; 
  background-color:#84bd00; 
  vertical-align: middle;
}

.mt {
  margin-top: 9px;
}

.font-barmer {
  font-family: 'Titillium Bold';
  line-height: 47px;
  font-size: 41px;
  color:#22372b;
  padding-left: 16px;
  padding-right: 16px;
}

.b1 {
  background-color:#84bd00;
}

.b2 {
  background-color:#005468;
}

.b3 {
  background-color:#008a7d;
}

.circleBase {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  transition: width .2s, height .2s;
}

.circleBase:active {
  width: 120px;
  height: 120px;
}

.circleBaseTitle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.circleText {
  color:black;
  font-size:28px;
}

.text {
  font-size:28px;
}

.headerTitleContainer {
  padding-top: 200px;
  padding-bottom:48px;
}

.caption1 {
  font-size: 56px;
  font-weight: bold;
}

.bp-icon {
  font-size: 64px;
}

.rounded-20 {
  border-radius: 20px!important;
}

.size-200-hw {
  height:200px;
  width:200px;
}

.btn-border {
  border-style:solid;
  border-width: 5px;
}

.border-green {
  border-color:#84bd00;
}

.border-blue {
  border-color:#005468;
}

.border-teal {
  border-color:#008a7d;
}



@media screen and (max-width: 1024px) {
  .caption1 {
    font-size: 48px;
  }

  .text {
    font-size:24px;
  }

  .circleBaseTitle {
    width: 180px;
    height: 180px;
    border-radius: 50%;
  }

  .circleText {
    font-size:26px;
  }
}

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

  .caption1 {
    font-size: 44px;
  }

  .text {
    font-size:22px;
  }

  .font-barmer {
    line-height: 50px;
    font-size: 36px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .font-container {
    height: 41px; 
  }

  .mt {
    margin-top: 8px;
  }

  .circleBase {
    width: 96px;
    height: 96px;
    border-radius: 50%;
  }

  .circleBase:active {
    width: 88px;
    height: 88px;
  }

  .circleBaseTitle {
    width: 164px;
    height: 164px;
    border-radius: 50%;
  }

  .circleText {
    font-size:24px;
  }

  .bp-icon {
    font-size: 48px;
  }

  .btn-border {
    border-width: 4px;
  }

  .circleText {
    font-size:24px;
  }

}

/* Für icon buttons  */
@media screen and (max-width: 560px) {

  .caption1 {
    font-size: 32px;
  }

  .text {
    font-size:18px;
  }

  .circleBase {
    width: 72px;
    height: 72px;
    border-radius: 50%;
  }

  .circleBase:active {
    width: 64px;
    height: 64px;
  }

  .circleBaseTitle {
    width: 128px;
    height: 128px;
    border-radius: 50%;
  }

  .circleText {
    font-size:20px;
  }

  .bp-icon {
    font-size: 36px;
  }

  .btn-border {
    border-width: 3px;
  }

  .circleText {
    font-size:20px;
  }
}

/* Für icon buttons  */
@media screen and (max-width: 420px) {

  .text {
    font-size:16px;
  }

  .caption1 {
    font-size: 28px;
  }

  .circleBase {
    width: 72px;
    height: 72px;
    border-radius: 50%;
  }

  .circleBase:active {
    width: 64px;
    height: 64px;
  }

  .circleBaseTitle {
    width: 96px;
    height: 96px;
    border-radius: 50%;
  }

  .circleText {
    font-size:20px;
  }

  .bp-icon {
    font-size: 36px;
  }

  .btn-border {
    border-width: 3px;
  }

  .circleText {
    font-size:16px;
  }
}

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

  .text {
    font-size:14px;
  }

  .caption1 {
    font-size: 24px;
  }

  .font-barmer {
    line-height: 44px;
    font-size: 32px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .font-container {
    height: 36px; 
  }

  .mt {
    margin-top: 7px;
  }

  .circleBase {
    width: 48px;
    height: 48px;
    border-radius: 50%;
  }

  .circleBase:active {
    width: 40px;
    height: 40px;
  }

  .circleBaseTitle {
    width: 76px;
    height: 76px;
    border-radius: 50%;
  }

  .circleText {
    font-size: 16px;
  }

  .bp-icon {
    font-size: 24px;
  }

  .btn-border {
    border-width: 2px;
  }

  .circleText {
    font-size:12px;
  }

}