html {
  height: 100vh;
}

body {
  font-size: .875rem;
  background: rgb(255,255,255);
  overflow-x: hidden;
  height: 100vh;
  position: relative;
}

/*
 * horizontal bar
 */

.home_card {
    width:            100%;
    background:       rgba(0,0,0,0.4);
    margin-top:       81px;
    padding:          0px;
    z-index: 1;
}

/* card STYLE
-------------------------------------------------- */

.card-price {
    background: rgba(255,255,255,0.7);
}

.card-header .border-primary {
    background: rgb(15,76,154);
}

.card-price-prime {
    background: rgba(255,255,255,0.7);
    border-color: rgb(15,76,154);
}

/* NAVBAR STYLE
-------------------------------------------------- */

.navbar-dark {
    position: fixed;
    z-index: 10;
    top: 0;
    display: flex;
    left: 0px;
    width:100%;
    overflow-y: visible;
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* NAVBAR WRITING */
.navbar-dark .navbar-nav .nav-item .nav-link {
    color: rgb(188,197,201);
}

.navbar-dark  .navbar-nav .nav-item .nav-link:hover {
     color: rgb(255, 255, 255);
}

.dropdown-menu-custom {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

.dropdown-menu-custom .dropdown-item{
    color: rgba(255, 255, 255);
}

.dropdown-menu-custom .dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

/* NAVBAR BOTTOM
-------------------------------------------------- */

.bg-dark-bottom {
  background: rgba(0,0,0,0.7);
  position: relative;
  bottom: 0;
  width: 100%;


}

.nav-bottom {
 color: rgb(188,197,201);
}

.nav-bottom:hover {
    color: rgb(255, 255, 255);
}

/* Scrollable
-------------------------------------------------- */

.container-fluent {
  width: 100%;
  height: 100%;

}

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  flex-shrink: 0;
  min-height: 100vh;


}

/* main BUTTON
-------------------------------------------------- */

.btn-secondary, .btn-secondary:focus, .btn-secondary:active, .btn-secondary:visited {
    background-color: rgb(15,76,154);
    border-color: rgb(255,255,255);

    border: hidden !important;
    box-shadow: none !important;
}

.btn-secondary:hover {
    color: rgb(255,255,255);
    background-color: rgb(188,197,201);
    border-color: rgb(188,197,201);
}

.chart-home {

  @media only screen and (min-width: 480px) {bottom: 0;}

}


/*
 * Dummy devices (replace them with your own or something else entirely!)
 */

/* test
-------------------------------------------------- */

.product-device {
  position: relative;
  z-index: 1;
  left: 70%;
  bottom: 40%;
  width: 500px;
  height: 400px;
  background-color: #333;
  border-radius: 7px;
  transform: rotate(13deg);
  box-shadow: 0 0 10px 0 rgba(100, 100, 100, 0.7);
}

.product-device img {
  position: absolute;
  top: 5%;
  right: 1%;
  width:98%;
  height:94%
}

.round_img_corners {
  border-radius: 5px;
}

/* laptop
-------------------------------------------------- */

/* The laptop with borders */
.laptop {
  -webkit-transform-origin: 0 0;
  transform-origin: -10% 55%;
  -webkit-transform: scale(.3) translate(-50%); /* Scaled down for a better Try-it experience (change to 1 for full scale) */
  transform: scale(.3) translate(-50%); /* Scaled down for a better Try-it experience (change to 1 for full scale) */
  position: relative;
  left: 50%;
  width: 1366px;
  height: 800px;
  border-radius: 6px;
  border-style: solid;
  border-color: black;
  border-width: 24px 24px 80px;
  background-color: black;

}

/* The keyboard of the laptop */
.laptop:after {
  content: '';
  display: block;
  position: absolute;
  width: 1600px;
  height: 60px;
  margin: 60px 0 0 -140px;
  background: black;
  border-radius: 6px;
}

/* The top of the keyboard */
.laptop:before {
  content: '';
  display: block;
  position: absolute;
  width: 250px;
  height: 30px;
  bottom: -110px;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  background: #f1f1f1;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 1;
}

/* The screen (or content) of the device */
.laptop img {
  width: 1366px;
  height: 900px;
  overflow: hidden;
  border: none;
}

/* smartphone
-------------------------------------------------- */

/* The device with borders */
.smartphone {
  position: relative;
  width: 360px;
  height: 640px;
  margin: auto;
  border: 16px black solid;
  border-top-width: 60px;
  border-bottom-width: 60px;
  border-radius: 36px;
  transform: scale(.6) rotate(20deg);
}

/* The horizontal line on the top of the device */
.smartphone:before {
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 10px;
}

/* The circle on the bottom of the device */
.smartphone:after {
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 50%;
}

/* The screen (or content) of the device */
.smartphone img {
  width: 360px;
  height: 640px;
  background: white;
}

/* steuern bilder
-------------------------------------------------- */

.image_after_tax {
    position: relative;
    top: -20%;
    left: -150%;

    transform: scale(.6) rotate(-10deg);
    z-index: 3;
}

/* kosten bilder
-------------------------------------------------- */

.costs_pic {
    position: relative;
    top: 10%;
    left: -40%;
    transform: scale(.8) rotate(4deg);
    z-index: 3;
}

/* versicherer logos
-------------------------------------------------- */

.nurn_pic {
    position: relative;
    bottom: 17%;
    right: 0%;
    max-width: 100%;
    transform: scale(.8);
    z-index: 2;
}

.conti_pic {
    position: relative;
    bottom: 13%;
    right: 0%;
    max-width: 100%;
    transform: scale(.6);
    z-index: 2;
}

.ergo_pic {
    position: relative;
    bottom: 23%;
    right: 0%;
    max-width: 100%;
    transform: scale(.6);
    z-index: 2;
}

.al_pic {
    position: relative;
    top: 12%;
    right: 0%;
    max-width: 100%;
    transform: scale(.9);
    z-index: 2;
}

.strikethrough {
  position: relative;
}
.strikethrough:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 2px solid;
  border-color: inherit;

  -webkit-transform:rotate(-7deg);
  -moz-transform:rotate(-7deg);
  -ms-transform:rotate(-7deg);
  -o-transform:rotate(-7deg);
  transform:rotate(-7deg);
}