body {
  font-family: 'Lufthansa Text Web', sans-serif;
  color: #05164D;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* Aligns the footer at the bottom*/
footer {
  margin-top: auto !important;
}

a{
  color: inherit;
  font-weight: bold;
}

a:hover{
  color: inherit;
}

p {
  margin-bottom: 16px;
}

ul,
ol {
  margin-bottom: 16px;
}
/* buttons*/

.btn-primary {
  background-color: #374571;
  border-color: #374571;
}

.btn-primary:hover {
  color: #fff;
  background-color: #05164D;
  border-color: #05164D;
}

label {
  font-family: "Lufthansa Text Web Regular", sans-serif;
  font-size: 16px;
  color: #05164D;
}

/*fonts*/
H1, .h1,
H2, .h2,
H3, .h3,
H4, .h4,
H5, .h5 {
  margin-bottom: 16px;
}
H1, .h1{
  font-size: 3.125rem;
  text-transform: uppercase;
  font-family: "Lufthansa Head Web Light";
  margin-bottom: 27px;
}
H2, .h2{
  font-size: 2.375rem;
  font-family: "Lufthansa Head Web Light";
}
 H3,  .h3{
  font-size: 1.75rem;
  font-family: "Lufthansa Head Web Bold";
}
 H4,  .h4{
  font-size: 1.313rem;
  font-family: "Lufthansa Head Web Bold";
   margin-bottom: 14px;
}
 H5,  .h5{
  font-size: 1rem;

}
 p{
  font-family: "Lufthansa Text Web Light";
  font-size: 1.125rem;
}
/*classes*/
.dark-content{
  background-color: #05164D;
  color: #FFFFFF;
}
.dark-content a{
  color: #FFFFFF;
  text-decoration: none;
}
.dark-content a:hover{
  color: #FFFFFF;
  text-decoration: underline;
}
.grey-content{
  background-color: #F4F4F4;
  color: #05164D;
}
footer .grey-content a{
  color: #05164D;
  text-decoration: none;
}
.grey-content a:hover{
  text-decoration: underline;
}
.white-content{
  background-color: #FFFFFF;
  color: #05164D;
}
 .bold{
  font-family: "Lufthansa Head Web Bold";
}
.search-hide{
  display: none;
}
.tutorials a{
  font-weight: normal;
  color: blue;
}
/*nav*/
header .space-nav{
  height: 80px;
  width: 100%;
}
header .navbar{
  background-image: linear-gradient(10deg, rgba(141,140,136,1) 24%, rgba(29,84,108,1) 67%, rgba(3,53,91,1) 100%);
  padding: 10px 0;
  padding-inline: 48px;
  color: white;
}

header .internal.navbar{
  background-image: none;
  background-color: #05164D;
}

header .navbar .user-dropdown{
  margin-left: 35px;
}
header .navbar a.user-dropdown{
  color: white;
}
header .navbar a.user-dropdown:hover{
  cursor: pointer;
}
header .navbar a.user-dropdown:focus{
  text-decoration: none;
}
header .navbar .user-dropdown img{
  margin-left: 50%;
  transform: translateX(-50%);
  height: 35px;
  width: auto;
}
header .navbar .dropdown-menu{
  /*Change Background Color when final Navbar*/
  background-color: #05164D;
  left: unset;
  right: 0;
}
header .navbar .dropdown-menu .dropdown-item{
  color: white;
}
header .navbar .dropdown-menu .dropdown-item:hover{
  color: #05164D;
}
header .navbar .dropdown-menu .dropdown-item:focus{
  background-color: white;
  color: #05164D;
}
header .navbar .dropdown-menu .dropdown-divider{
  border-top-color: white;
}
header .navbar .logo{
  height: 50px;
  width: auto;
}
header .navbar .navbar-collapse{
  justify-content: right;
}

header .navbar .navbar-nav .nav-link, header .navbar .btn-link {
  color: white;
  font-size: 1.25rem;
  text-transform: uppercase;
  margin-left: 35px;
  font-family: "Lufthansa Head Web Bold";
}

header .navbar .btn-link{
  width: 100px;
  height: 48px;
  font-size: 1rem;
  border: 2px solid #FFFFFF;
  border-radius: 2px;
  background-color: transparent;
  font-family: "Lufthansa Head Web Light";
}

header .navbar .btn-link:hover{
  border-color: #00AFCB;
}

header .navbar .navbar-nav a.nav-link:visited, header .navbar button.btn-link:visited{
  color: white;
}

header .navbar .navbar-nav a.nav-link:focus, header .navbar button.btn-link:focus{
  color: white;
}

header .navbar .navbar-nav a.nav-link:hover{
  color: #00AFCB;
}

header .navbar .navbar-nav a.nav-link:active{
  font-family: "Lufthansa Head Web Bold";
  border-bottom: 3px solid #00AFCB;
  color: white;
}

/*hero image container*/
.hero-image{
  position: relative;
  background-image: url("../img/header_img_final.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 731px;
}
.hero-image .card{
  position: absolute;
  left: 60px;
  bottom: 84px;
  height: 440px;
  width: 440px;
  background: #FFFFFF;
  border: 3px solid #05164D;
  padding: 60px 30px 60px 30px;
}
.hero-image .card .card-body{
  position: relative;
  padding: 0 0 48px 0;
}

.hero-image .card .card-text{
  font-size: 1.625rem;
  font-family: "Lufthansa Text Web Light";
}
.hero-image .card button{
  height: 48px;
  position: absolute;
  bottom: 0;
}
/*Cards*/
.card.modules{
  width: 288px;
  margin: 0 9px;
}
/* Text Elements */
.text-image{
  height: auto;
  width: 100%;
}
/*Searchbar*/
.search-bar{
  width: 50%;
  margin-left: 5px;
}
/*footer*/
 footer .container-fluid{
  height: 90px;
  position: relative;
}
 footer a{
   font-weight: normal;
 }
 footer ul{
  position: absolute;
  right: 58px;
  padding-left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
}
 footer p{
  position: absolute;
  top: 50%;
  left: 60px;
  transform: translateY(-50%);
  font-size: 1rem;
}
 footer ul li{
  display: inline-block;
  list-style: none;
  margin-left: 30px;

}
 footer ul li::before{
  background-image: none;
}

/*
No media query for `XXL` since this is the default in this Template
*/

/* XL 1399 and down*/
@media (max-width: 1399px){
  .card.modules{
    width: 288px;
    margin: 0 34px;
  }
}

/* LG 1199 and down*/
@media (max-width: 1199px){
  .search-bar{
    width: 60%;
    margin-left: 5px;
  }
  .text-image{
    width: 50%;
    height: auto;
  }
  .card.modules{
    margin: 0 4px;
  }
}

/* MD 991px and down*/
@media (max-width: 991px){
  H1, .h1{
    font-size: 2.5rem;
    text-transform: uppercase;
    font-family: "Lufthansa Head Web Light";
  }
  H2, .h2{
    font-size: 2rem;
    font-family: "Lufthansa Head Web Light";
  }
  H3,  .h3{
    font-size: 1.3rem;
    font-family: "Lufthansa Head Web Bold";
  }
  H4,  .h4{
    font-size: 1.15rem;
    font-family: "Lufthansa Head Web Bold";
  }

  /*hero image*/
  .hero-image{
    height: 500px;
  }
  .hero-image .card{
    height: 380px;
    width: 400px;
  }
  .card.modules{
    margin: 0 24px;
  }
}

/* SM 767 and down*/
@media (max-width: 767px){
  /* As soon as Burger Nav is shown*/
  header .navbar .user-dropdown img{
    margin-left: 0;
    transform: none;
  }
  /*nav*/
  header .navbar .navbar-toggler{
    color: transparent;
    border-color: transparent;
    padding: 0;
  }
  header .navbar .dropdown-menu{
    background-color: transparent;
    border: none;
  }
  header .navbar .navbar-toggler .burger-icon{
    height: 50px;
    width: auto;
  }
  header .navbar .navbar-nav .nav-link, header .navbar .btn-link, header .navbar .user-dropdown {
    margin-left: 0;
    padding: 8px 0;
  }
  header .navbar .user-dropdown{
    margin-left: -5px;
  }
  header .navbar .dropdown-menu{
    padding-top: 0;
    margin-top: 0;
  }
  header .navbar .dropdown-menu .dropdown-item{
    padding-left: 0;
  }
  /*hero image*/
  .hero-image{
    height: 400px;
  }
  /* Content */
  .search{
    width: 408px;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .search-bar{
    width: 345px;
    margin-left: 5px;
  }
  .text-image{
    width: 100%;
    height: auto;
  }
  .card.modules{
    width: 408px;
    margin: 0 54px;
  }
  footer p{
    left: 10px;
  }
  footer ul{
    right: 10px;
  }
}

/* XS 575px and down */
@media (max-width: 575px) {
  header .navbar{
  padding: 10px;
  }
  H1, .h1{
    font-size: 2rem;
    text-transform: uppercase;
    font-family: "Lufthansa Head Web Light";
  }
  .card.modules{
    width: 288px;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .search{
    width: auto;
    margin-left: 0;
    transform: none;
  }
  .search label{
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .search-bar{
    width: 100%;
    margin-left: 0;
  }
  /*footer*/
  footer ul{
    position: static;
    padding: 0;
    transform: none;
    margin: 0;
  }
  footer p{
    position: static;
    transform: none;
  }
  footer .grey-content ul li{
    display: inline-block;
    list-style: none;
    margin-left: 10px;
    padding: 33px 0;
  }
  footer .dark-content p{
    margin: 17px 0 8px 10px;
  }
  footer .dark-content ul li{
    display: inline-block;
    list-style: none;
    margin: 0 0 17px 10px;
  }
}