body {
  position: relative;
  color: #626262 !important;
  
}

h1 {
  font-size:3.25rem;
  font-weight: 700;
}

h2 {
  font-size:2rem;
  margin-bottom:0.5rem;
}

h2, h4 {
  font-weight:800;
}  

footer {
  font-size:1rem;
}

.parallax-wrapper {
  overflow-y: hidden;
}

.parallax {
  background-image: url('/images/stadion.jpg');
  background-size: cover;
  background-position: center;
  height: 40vh;
}


.navbar-brand svg {
  vertical-align: middle;
  max-height: 90px;
  max-width: 160px;
}

.text-lighter {
  font-weight:300;
}

.text-footer {
  color:#b4b4b4;
}

.bg-green {
  background-color: #004245;
}

.bg-light-gray {
  background-color: rgba(0,0,0,0.05);
}

@media (min-width:992px)  {
  body {
    font-size: 1.75rem;
    font-weight:200;
  }
  h1 {
    font-size:4.25rem;
    font-weight: 700;
  }
  
  h2 {
    font-size:3rem;
    margin-top:1.25rem;
  }
  
  h2, h4 {
    font-weight:800;
  }  
	
	footer {
		font-size:1.5rem;
	}
}

@media (min-width:1200px) {
  h1 {
    font-size:4.25rem !important;
    font-weight: 700;
  }
  
  h2 {
    font-size:3rem !important;
    margin-top:1.25rem;
  }

  h4 {
    font-size:1.875rem;
  }
  
  h2, h4 {
    font-weight:800;
  }  
	footer {
		font-size:1.5rem;
	}  
}


/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 100%;
  height: 450px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  cursor: pointer;
  transform-style: preserve-3d;
}

.flip-card .flip-card-inner  {
  transform: rotateY(0deg);
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card .flip-card-inner:hover  {
  transform: rotateY(180deg);
}




/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background: rgb(25,48,51);
background: -moz-linear-gradient(180deg, rgba(25,48,51,1) 0%, rgba(20,98,106,1) 39%);
background: -webkit-linear-gradient(180deg, rgba(25,48,51,1) 0%, rgba(20,98,106,1) 39%);
background: linear-gradient(180deg, rgba(25,48,51,1) 0%, rgba(20,98,106,1) 39%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#193033",endColorstr="#14626a",GradientType=1);

  color: white;
}

/* Style the back side */
.flip-card-back {
  display: table;
  height: 100%;
  background: rgb(25,48,51);
  background: -moz-linear-gradient(180deg, rgba(25,48,51,1) 0%, rgba(20,98,106,1) 39%);
  background: -webkit-linear-gradient(180deg, rgba(25,48,51,1) 0%, rgba(20,98,106,1) 39%);
  background: linear-gradient(180deg, rgba(25,48,51,1) 0%, rgba(20,98,106,1) 39%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#193033",endColorstr="#14626a",GradientType=1);;
  color: white;
  transform: rotateY(180deg);
}

.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #004245;
}



.text-green {
  color:#004245 !important;
}

.bg-green-gradient {
background: rgb(25,48,51);
background: -moz-linear-gradient(180deg, rgba(25,48,51,1) 0%, rgba(20,98,106,1) 89%);
background: -webkit-linear-gradient(180deg, rgba(25,48,51,1) 0%, rgba(20,98,106,1) 89%);
background: linear-gradient(180deg, rgba(25,48,51,1) 0%, rgba(20,98,106,1) 89%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#193033",endColorstr="#14626a",GradientType=1);
}

@media (max-width: 767px) {
  .carousel-inner .carousel-item > div {
      display: none;
  }
  .carousel-inner .carousel-item > div:first-child {
      display: block;
  }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {
  
  #recipeCarousel > .carousel-inner .carousel-item-end.active,
  #recipeCarousel > .carousel-inner .carousel-item-next {
    transform: translateX(33%);
  }
  
  #recipeCarousel > .carousel-inner .carousel-item-start.active, 
  #recipeCarousel > .carousel-inner .carousel-item-prev {
    transform: translateX(-33%);
  }

  #recipeCarousel2 > .carousel-inner .carousel-item-end.active,
  #recipeCarousel2 > .carousel-inner .carousel-item-next {
    transform: translateX(33%);
  }

  #recipeCarousel2 > .carousel-inner .carousel-item-start.active, 
  #recipeCarousel2 > .carousel-inner .carousel-item-prev {
    transform: translateX(-33%);
  }

}

@media (min-width:1200px) {
  #recipeCarousel > .carousel-inner .carousel-item-end.active,
  #recipeCarousel > .carousel-inner .carousel-item-next {
    transform: translateX(25%);
  }
  
  #recipeCarousel > .carousel-inner .carousel-item-start.active, 
  #recipeCarousel > .carousel-inner .carousel-item-prev {
    transform: translateX(-25%);
  }

  #recipeCarousel2 > .carousel-inner .carousel-item-end.active,
  #recipeCarousel2 > .carousel-inner .carousel-item-next {
    transform: translateX(33%);
  }

  #recipeCarousel2 > .carousel-inner .carousel-item-start.active, 
  #recipeCarousel2 > .carousel-inner .carousel-item-prev {
    transform: translateX(-33%);
  }
}

#recipeCarousel2 > .carousel-inner .carousel-item-end,
#recipeCarousel2 > .carousel-inner .carousel-item-start { 
transform: translateX(0);
}

#recipeCarousel >.carousel-inner .carousel-item-end,
#recipeCarousel >.carousel-inner .carousel-item-start { 
transform: translateX(0);
}



@media (min-width: 576px) {

  .carousel-inner .carousel-item {
    max-height:480px;
  }

  blockquote {
    font-size:60%;
  }

    .border-sm-top {
      border-top: 1px solid #e3e7eb !important;
    }
    .border-sm-right {
      border-right: 1px solid #e3e7eb !important;
    }
    .border-sm-bottom {
      border-bottom: 1px solid #e3e7eb !important;
    }
    .border-sm-left {
      border-left: 1px solid #e3e7eb !important;
    }
    .border-sm-top-0 {
      border-top: 0 !important;
    }
    .border-sm-right-0 {
      border-right: 0 !important;
    }
    .border-sm-bottom-0 {
      border-bottom: 0 !important;
    }
    .border-sm-left-0 {
      border-left: 0 !important;
    }
    .border-sm-x {
      border-left: 1px solid #e3e7eb !important;
      border-right: 1px solid #e3e7eb !important;
    }
    .border-sm-y {
      border-top: 1px solid #e3e7eb !important;
      border-bottom: 1px solid #e3e7eb !important;
    }
    .border-sm {
      border-top: 1px solid #e3e7eb !important;
      border-bottom: 1px solid #e3e7eb !important;
      border-left: 1px solid #e3e7eb !important;
      border-right: 1px solid #e3e7eb !important;
    }
    .border-sm-0 {
      border-top: 0 !important;
      border-bottom: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
    }
  }
  
  @media (min-width: 768px) {

    .flip-card, .carousel-inner .carousel-item {
      max-height:300px;
    }

    blockquote {
      font-size:80%;
    }

    .border-md-top {
      border-top: 1px solid #e3e7eb !important;
    }
    .border-md-right {
      border-right: 1px solid #e3e7eb !important;
    }
    .border-md-bottom {
      border-bottom: 1px solid #e3e7eb !important;
    }
    .border-md-left {
      border-left: 1px solid #e3e7eb !important;
    }
    .border-md-top-0 {
      border-top: 0 !important;
    }
    .border-md-right-0 {
      border-right: 0 !important;
    }
    .border-md-bottom-0 {
      border-bottom: 0 !important;
    }
    .border-md-left-0 {
      border-left: 0 !important;
    }
    .border-md-x {
      border-left: 1px solid #e3e7eb !important;
      border-right: 1px solid #e3e7eb !important;
    }
    .border-md-y {
      border-top: 1px solid #e3e7eb !important;
      border-bottom: 1px solid #e3e7eb !important;
    }
    .border-md {
      border-top: 1px solid #e3e7eb !important;
      border-bottom: 1px solid #e3e7eb !important;
      border-left: 1px solid #e3e7eb !important;
      border-right: 1px solid #e3e7eb !important;
    }
    .border-md-0 {
      border-top: 0 !important;
      border-bottom: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
    }
    .carousel-control-next, .carousel-control-prev {
      width:11%;
    }
  }
  
  @media (min-width: 992px) {

    .nav-link.scroll {
      font-size: 1.4rem;
      line-height: 2;
    }

    .flip-card, .carousel-inner .carousel-item {
      max-height:450px;
    }

    .border-lg-top {
      border-top: 1px solid #e3e7eb !important;
    }
    .border-lg-right {
      border-right: 1px solid #e3e7eb !important;
    }
    .border-lg-bottom {
      border-bottom: 1px solid #e3e7eb !important;
    }
    .border-lg-left {
      border-left: 1px solid #e3e7eb !important;
    }
    .border-lg-top-0 {
      border-top: 0 !important;
    }
    .border-lg-right-0 {
      border-right: 0 !important;
    }
    .border-lg-bottom-0 {
      border-bottom: 0 !important;
    }
    .border-lg-left-0 {
      border-left: 0 !important;
    }
    .border-lg-x {
      border-left: 1px solid #e3e7eb !important;
      border-right: 1px solid #e3e7eb !important;
    }
    .border-lg-y {
      border-top: 1px solid #e3e7eb !important;
      border-bottom: 1px solid #e3e7eb !important;
    }
    .border-lg {
      border-top: 1px solid #e3e7eb !important;
      border-bottom: 1px solid #e3e7eb !important;
      border-left: 1px solid #e3e7eb !important;
      border-right: 1px solid #e3e7eb !important;
    }
    .border-lg-0 {
      border-top: 0 !important;
      border-bottom: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
    }

    blockquote {
      padding: 2rem;
    }
    .carousel-control-next, .carousel-control-prev {
      width:15%;
    }
  }
  
  @media (min-width: 1200px) {

    .carousel-inner .carousel-item {
      max-height:600px;
    }

    .border-xl-top {
      border-top: 1px solid #e3e7eb !important;
    }
    .border-xl-right {
      border-right: 1px solid #e3e7eb !important;
    }
    .border-xl-bottom {
      border-bottom: 1px solid #e3e7eb !important;
    }
    .border-xl-left {
      border-left: 1px solid #e3e7eb !important;
    }
    .border-xl-top-0 {
      border-top: 0 !important;
    }
    .border-xl-right-0 {
      border-right: 0 !important;
    }
    .border-xl-bottom-0 {
      border-bottom: 0 !important;
    }
    .border-xl-left-0 {
      border-left: 0 !important;
    }
    .border-xl-x {
      border-left: 1px solid #e3e7eb !important;
      border-right: 1px solid #e3e7eb !important;
    }
    .border-xl-y {
      border-top: 1px solid #e3e7eb !important;
      border-bottom: 1px solid #e3e7eb !important;
    }
    .border-xl {
      border-top: 1px solid #e3e7eb !important;
      border-bottom: 1px solid #e3e7eb !important;
      border-left: 1px solid #e3e7eb !important;
      border-right: 1px solid #e3e7eb !important;
    }
    .border-xl-0 {
      border-top: 0 !important;
      border-bottom: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
    }
    blockquote {
      padding: 3.5rem;
    }
    .carousel-control-next, .carousel-control-prev {
      width:17%;
    }
  }

  .btn-primary {
    background-color:#004245 !important;
    border-color: #06595d !important;
  }

  .btn-primary:hover {
    background-color:#034a4e !important;
    border-color: #06595d !important;
  }

  .nav-item.active .nav-link {
    color:#fff;
    opacity: 1.0;
  }

  blockquote {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-size: 1rem;
    font-weight: 100;
    max-width: 500px;
    line-height: 1.4;
    position: relative;
    margin: 0;
    padding: 1.5rem;
    max-height: max-content;
  }
  
  blockquote:before,
  blockquote:after {
    position: absolute;
    color: #f1efe6;
    font-size: 31rem;
    width: 4rem;
    height: 4rem;
    opacity: 0.15;
  }
  
  blockquote:before {
    content: '\201C';
    left: 0rem;
    top: -11rem;
  }

  .carousel-control-next, .carousel-control-prev {
    width:9%;
  }