@font-face {
    font-family: OpenSans;
    src: url(../assets/vendor/google/Open_Sans/OpenSans-Light.ttf);
} 

@media only screen and (min-width: 992px) {
    .center-div{
        display: flex;
        flex-wrap: wrap;  
        justify-content: center;  
        align-items: center;  
    }
    #loginbox {
        border-radius: 20px;
    }
}

@media only screen and (max-width: 991px) {
    #usertypes-container1 {
        margin-bottom: 20%;
    }

    #loginbox {
        border-radius: 20px;
    }
    .bg-footer-mobile {
        /* background-color:  #69c3a2; */
    }
    .lp-bg::after {
        background-image: url('../images/background7-mobile.jpg');
    }
}

body,
html {
    height: 100vh;
}

#particles-js canvas {
    display: block;
    vertical-align: bottom;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
    transition: opacity .8s ease, transform 1.4s ease
}

#particles-js {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
}

#particles-js-index {
    background-color: #b61924;
    position: absolute;
    /* top: 0; */
    right: 0;
    /* bottom: 0; */
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

#overlay {
    position: relative;
    padding: 50px;
  }


article{
    font-family: 'OpenSans', sans-serif;
}

figure {
    margin: 0 0 0rem !important;
}

footer {
    position: relative;
    left:0px;
    bottom:0px;
    height:auto;
    width:100%;
}

.b-3em {
    display: block;
    height: 3em;
}


.banner {
    width: 100%;
    height: 50%;
    background-image: url('../images/Titelbild.png');
    background-repeat: no-repeat;
    background-position: center bottom;  
    background-size: cover;
    position: relative; 
}

.bg-color-peterriver {
    background-color: #3498db !important;
}

.bg-color-snapone {
    background-color: #69c3a2 !important;
}

.bg-color-lightGray{
    background-color: #ffffff !important;
}

.back-to-top {
    background:#3498db;
    position: fixed;
    bottom:20px;
    right:20px;
    padding:1em;
}

.bg-white{
    background-color: white;
}

.btnBack {
    color: rgb(150, 150, 150) !important;
}

.btnBack:hover {
    color: rgb(78, 78, 78) !important;
}

.center {
    margin: auto;
    width: 50%;
    padding: 10px;
}

.center-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.center-text {
    text-align: center;
} 

.color-peterriver {
    color: #3498db !important;
}

.color-white {
    color:white !important;
}

.cookie-message p, .cookie-message a{
    color: white !important;
}

.cursor-pointer {
    cursor: pointer;
}

.description {
    color:gray;
    font-size: 13pt;
}
.enableBlur>* {
    filter: blur(4px);
  }

.disableBlur {
    filter: blur(0px);
  }

.font {
    font-family: 'OpenSans', Tahoma, Geneva, Verdana, sans-serif;
    font-size:1vw; 
}

.form input[type="password"],
.form input[type="text"],
.form input[type="submit"] {
    width: 100%;
}

.lp-bg::after {
    content: "";
    /* background: url(image.jpg); */
    /* background-repeat: no-repeat;
    background-size: "cover";
    background-image: url('../images/background8.jpg');
    background-attachment: fixed; */
    /* opacity: 0.6; */
    /* filter: blur(3px); */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;  
    /* background-color: rgb(253, 253, 253); */
    /* background: linear-gradient(130deg, #B0C1E2, #B2D9DF, #c9f3e4, #F6F6F6); */
    /* background-size: 400% 400%; */
}

.bg-color-gradient {
    /* background: linear-gradient(130deg, #B0C1E2, #B2D9DF, #c9f3e4, #F6F6F6); */
}

.hide {
    display:none;
}

.mt-20 {
    margin-top: 20px;
}

.padding-2 {
    padding: 2.7rem !important;
}

.space-around {
    display: flex;
    justify-content: space-around;
}

.text-center {
    text-align: center;
}

.text-small {
    font-size: 10pt !important;
}

.text-success {
    color:green;
}

.text-error {
    color:red;
}

.title {
    font-size: 2em;
}

[class*="u-block-hover"], 
[class*="u-block-hover"]::before, 
[class*="u-block-hover"]::after {
    transition: all .9s ease !important;
}

.user-types {
    position: fixed;
    bottom: 0;
}

.user-type {
    cursor: pointer;
}

/* NEU Benutzerauswahl */

.loader {
    border: 8px solid #f3f3f3;
    border-radius: 50%;
    border-top: 8px solid lightgrey;
    width: 60px;
    height: 60px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

.user-type-selected {
    background-color: #21A79D;
}

.user-type-selected span{
    color: #fff;
}

.user-selection {
    width: 503px;
    height: 50%;
} 

.user-types-img {
    width: 100%;
    height: auto;
}

.vl {
    border-left: 4px dotted gray;
    height: 70%;
}

#admin {
    font-family: 'OpenSans', sans-serif;
}

#admin a {
    font-size: 15pt;
    color: rgb(149, 98, 197);
}

#ausbilder_img:hover {
    background-image: url('/images/ausbilder_on.png');
}

#azubi_img:hover {
    background-image: url('/images/azubi_on.png');
}

#container {
    height: 100%;
}

#datenschutz-container{
    background-color: rgba(255, 255, 255, 0.6);
    margin-top: 10%;
    max-height: 80%;
}

#footer-container {
    background-color:  red;
    background: linear-gradient(130deg, #B0C1E2, #B2D9DF, #c9f3e4, #F6F6F6);
    width: 100%;
    height: 20%;
}

#impressum-container{
    margin-top: 10%;
    background-color: rgba(255, 255, 255, 0.6);
}

#loginForm{
width: 80% !important;
}

#loginbox {
    padding-top: 2vw;
    padding-bottom: 2vw;
    float: none;
    margin: 0 auto;
    float: center; 
    display: table-cell;
    vertical-align: middle; 
    display: flex;  
    flex-direction: column;
    justify-content: center;
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0px 20px 0 rgba(0,0,0,0.1);
    transition: 0.3s;
    align-items: center;
}
#logo-container {
    float: right;
    width: 10%;
}
#loginbox h1 {
    text-align: center;
    color: rgb(95, 95, 95);
    font-size:2vw;
}

#loginbox input {
    margin-top: 5px;
}
#login-container {
    margin-top: 0%;
    width: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center; 
    background-size: cover;
} 

#password-reset-container {
    margin-top: 0%;
    width: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center; 
    background-size: cover;
}

#resetbox {
    padding-top: 2vw;
    padding-bottom: 2vw;
    padding-left: 1vw;
    padding-right: 1vw;
    float: none;
    margin: 0 auto;
    float: center; 
    display: table-cell;
    vertical-align: middle; 
    display: flex;  
    flex-direction: column;
    justify-content: center;
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0px 20px 0 rgba(0,0,0,0.1);
    transition: 0.3s;
    align-items: center;
}

#resetForm {
width: 80% !important;
}

#subtitle {
    max-width: 600px;
    background-color: #cdcec9;
    list-style-type: none;
    text-align: center;
    color: #616161;
}

#subtitle li {
    color:rgb(49, 49, 49);
    display: inline-block;
    font-size: 15pt;
    padding: 20px;
}

#trainee {
    font-family: 'OpenSans', sans-serif;
    width: 100%;
    flex-grow: 0;
    height: auto;
} 

#trainee a {
    font-size: 15pt;
    color: rgb(105, 185, 195,1);
    /* color: #009999; */
}

#trainer {
    font-family: 'OpenSans', sans-serif;
    justify-content: center; 
    align-items:center;
    background-color: pink;
}

#trainer a {
    font-size: 15pt;
    color: rgb(102, 133, 192);
    /* color: #009999; */
}

#ul-area {
    height: 50%;
}

.color-snapone {
    color:#69c3a2;
}

.color-title {
    color: white/*#788587*/;
}

.color-description {
    color:white/*#b9b9b9*/;
}

#usertype-container a {
    text-decoration: none;
    color:gray;
    text-decoration: none; 
    background-color: none;
}

#usertypes-container1 {
    height: 70%;
} 

#usertype-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute; 
    bottom: -12.5%;
    background-color:rgb(253, 253, 253);
    width: 40%;
    height: 25%;
    right:25%;
    left:50%;
    margin-left:-20%;
    color: gray;
    overflow: auto;
}  

#user-type img {
    background-repeat: no-repeat;
    background-position: center center; 
    background-size: cover;
    width: 100%;
    min-width: 30pt;
    height: auto;
}

.flex-container {
    display: flex;
}

.flex-container-column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

.cardContainer {
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    /* Add shadows to create the "card" effect */
    box-shadow: 0 0px 20px 0 rgba(0,0,0,0.1);
    transition: 0.3s;
  }

  .flex-container > div {
    background-color: DodgerBlue;
    width: 380px;
    margin: 10px;
    padding: 10px;
    text-align: center;
  }

  .flex-container-column > div {
    background-color: DodgerBlue;
   justify-content: center;
    color: white;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }

  #login-username {
      color:#69c3a2 ;
    background-color: #eeeeee;
}

  #login-password {
    color:#69c3a2 ;
      background-color: #eeeeee;
  }