/*
 * DESIGN
 * By
 * JULIUS DAUM
 *
 * ©2019, familienfahrschule-ingoaude.de
 */
body{
    background:rgb(245,245,245);
    font-family:'Raleway', sans-serif;
    font-size:1.05em;
    font-weight:100!important;
}
/*
 * The following code determines the behavior of the navigation.
 * The navigation has a modern design.
 */
nav.navbar{
    background: rgb(255,255,255);
    padding:15px;
    box-shadow:1px 1px 4px rgba(0,0,0,0.5);
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,0,0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
nav.navbar > div.container > div.navbar-collapse > ul.navbar-nav > li.nav-item{
    padding:0 5px;
    position:relative;
}
nav.navbar > div.container > div.navbar-collapse > ul.navbar-nav > li.nav-item:last-child{
    padding-right:none;
}
nav.navbar > div.container > div.navbar-collapse > ul.navbar-nav > li.nav-item > a.nav-link{
    font-family:'Montserrat', sans-serif;
    color:rgb(55,55,55);
    font-weight:100!important;
    font-size:.85em;
    transition:.1s;
    border-bottom:1px solid transparent;
}
nav.navbar > div.container > div.navbar-collapse > ul.navbar-nav > li.nav-item > a.nav-link:hover{
    color:#b20000;
    border-bottom-color: #b20000;
}
@media(max-width:427px){
    a.navbar-brand > img.img-fluid{
        height:35px;
        max-width: 100%!important;
    }
}
/*
 * The following code determines the behavior of the header.
 * It is only visible at the main/home page.
 */
header > div#carouselExampleIndicators > div.carousel-inner > div.carousel-item {
    max-height:100%;
    background: no-repeat center center scroll;
}
header > div#carouselExampleIndicators > div.carousel-inner > div.carousel-item > img.img-fluid{
    opacity:.8;
}
/*
 * The following code will determines the behavior of the content.
 * Exactly the content of the different pages.
 */
.bg-white{
    background:rgb(245,245,245)!important;
}
main > section.bg-white > div.container > div.row > div.contact-col{
    margin:25px 0;
    padding:5px 0;
    border-right:1px solid rgb(220,220,220);
}
main > section.bg-white > div.container > div.row > div.contact-col:last-child{
    border-right:none;
}
main > section.bg-white > div.container > div.row > div.contact-col > h3.contact-icons{
    color:rgb(219,219,219);
    /*color:rgba(0,191,255, 0.2);*/
}
main > section.bg-white > div.container > div.row > div.contact-col > h5.contact-headings{
    text-transform:uppercase;
    color:rgba(178,0,0, 0.8);
    font-weight:bold;
    padding:5px;
}
main > section.bg-white > div.container > form.row{
    padding-bottom:40px;
}
main > section.bg-white > div.container > form.row > div > div.form-group > input.form-control,
main > section.bg-white > div.container > form.row > div > div.form-group > textarea.form-control{
    font-family:'Raleway', sans-serif;
    border-radius:0;
    background-color:rgb(245,245,245);
}
main > section.bg-white > div.container > form.row > div > div.form-group > input.form-control:active,
main > section.bg-white > div.container > form.row > div > div.form-group > textarea.form-control:active,
main > section.bg-white > div.container > form.row > div > div.form-group > input.form-control:focus,
main > section.bg-white > div.container > form.row > div > div.form-group > textarea.form-control:focus{
    box-shadow:none;
    border:1px solid rgba(0,51,255,.3);
}
main > section.bg-white > div.container > form.row > div > div.form-group > button.c-btn{
    border-radius:0;
    text-transform:uppercase;
    padding:5px 20px;
}

/*
 * The following code determines the behavior of the footer.
 * The footer has a minimalistic design.
 */
footer{
    padding:20px 0;
    background:rgb(55,55,55);
    color: rgb(119,124,129);
    font-size:.95em;
    font-weight:100!important;
}
footer > div.container > div.row > div > ul,
footer > div.container > div.row > div{
    list-style:none;
    display:flex;
    justify-content:center;
    padding-left:0;
    margin-bottom:0;
}
footer > div.container > div.row > div > ul > li{
    float:left;
}
footer > div.container > div.row > div > ul > li:first-child{
    padding-right:5px;
}
footer > div.container > div.row > div > ul > li:first-child::after{
    content: ' | ';
}
footer > div.container > div.row > div > ul > li > a{
    color:rgb(119,124,129);
}
footer > div.container > div.row > div > ul > li > a:hover,
footer > div.container > div.row > div > ul > li > a:active,
footer > div.container > div.row > div > ul > li > a:visited{
    color:rgb(139,144,149);
}
/*
 * The style of the partner site.
 */
 div.partner-space{
     text-align:center;
     height:200px;
     position:relative;
     top:0;
     left:0;
     right:0;
     bottom:0;
 }
 div.partner-space > a{
     position:absolute;
     max-height:200px;
     max-width:100%;
     bottom:0%;
     left:50%;
     transform:translate(-50%,0);
     -ms-transform:translate(-50%,0);
 }
/*
 * Below the classes for the spaces and the general settings.
 */
section{
    padding:10px 0;
}
main > section.crumb{
    z-index:20;
    background:#e5e5e5;
}
main > section > div > div.row > div.crumb-space > ul.c-breadcrumb{
    display:block;
    list-style:none;
    margin-left:0;
    padding:10px 0;
    margin-bottom:0;
    float: right;
    padding:5px 20px;
}
main > section > div > div.row > div.crumb-space > ul.c-breadcrumb > li{
    float:left;
    font-size:0.75em;
    font-weight:100!important;
    color:rgb(159,164,169);
    padding-right:5px;
    text-transform:lowercase;
}
main > section > div > div.row > div.crumb-space > ul.c-breadcrumb > li:last-child{
    padding-right:0;
}
main > section > div > div.row > div.crumb-space > ul.c-breadcrumb > li:last-child::after{
    content:'';
}
main > section > div > div.row > div.crumb-space > ul.c-breadcrumb > li::after{
    content:' »';
}
h1:first-child{
    font-family:'Raleway', sans-serif;
    position:relative;
    padding-bottom:10px;
    margin-bottom:20px;
    color:rgb(50,50,50);
}
.bg-white{
    background:rgb(255,255,255);
}
.space-10{
    padding:10px 0;
}
.space-20{
    padding:20px 0;
}
.space-30{
    padding:30px 0;
}
.space-40{
    padding:40px 0;
}
.space-50{
    padding:50px 0;
}
.space-60{
    padding:60px 0;
}
.space-70{
    padding:70px 0;
}
.space-80{
    padding:80px 0;
}
.space-90{
    padding:90px 0;
}
/*
 * The style is for the javascript accordion at the faq's page.
 */
.accordion {
  /*background-color: rgba(0,191,255,0.15);*/
   background-color:rgb(220,220,220);
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
.active, .accordion:hover {
  /*background-color: rgba(0,191,255,0.5);*/
    background-color: rgb(200,200,200);
}
.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
div.active:after {
  content: "\2212";
}
.panel {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
/*
 * The style for the back to top button.
 */
 #back-to-top {
    position: fixed;
    bottom: 50px;
    right: 30px;
    z-index: 9999;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 30px;
    color:rgb(245,245,245);
    cursor: pointer;
    border: 0;
    border-radius:60px;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    opacity: 0;
    background:rgba(0,0,0,0.75);
    transition:.15s;
    padding:15px;
    font-size:1.2em;
 }
 #back-to-top:hover {
    background:rgba(0,0,0,.85);
 }
 #back-to-top.show {
    opacity: 1;
 }
 #content {
    height: 2000px;
 }
 @media(max-width:350px){
    #back-to-top{
        position:fixed!important;
        bottom:20px!important;
        right:30px!important;
        width:40px!important;
        height:40px!important;
        text-align: center!important;
        padding:5px!important;
    }
 }
/* The laoding animation */
.loader-wrapper{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
}

.loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  border: 4px solid #bf0000;
  animation: loader 2s infinite ease;
}

.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #bf0000;
  animation: loader-inner 2s infinite ease-in;
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(180deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-inner {
  0% {
    height: 0%;
  }

  25% {
    height: 0%;
  }

  50% {
    height: 100%;
  }

  75% {
    height: 100%;
  }

  100% {
    height: 0%;
  }
}
@media (max-width:768px) {
    div.contact-col{
        border:none!important;
    }
}
/*
 * Determine the behavior of the elements when the display is small.
 */
@media(max-width:540px){
    body{
        font-size:14.4px!important;
    }
    h1{
        font-size:28.8px!important;
    }
    h2{
        font-size:21.6px!important;
    }
    h3{
        font-size:16.848px!important;
    }
    h4{
        font-size:14.4px!important;
    }
}