/******************************************
** Created by WebWorker777 on 13.10.2018 **
*******************************************
** pnv777@outlook.com        --- sdg --- **
******************************************/

@import url('https://fonts.googleapis.com/css?family=Montserrat|Lato');

h1,h2,h3,h4,h5,h6 {
    font-family: 'Montserrat', sans-serif;
}
body {
    font-family: 'Lato', sans-serif;
    font-size:1.5em;
}
a:visited, a:focus {
    text-decoration: none;
}
#selfmade {
    position:fixed;
    bottom:50px;
    right:10px;
    width:60px;
    cursor:pointer;
}
#selfmade-popup {
    position:fixed;
    top:20%;
    width:400px;
    left:calc(50% - 200px);
    border:10px solid #C31901;
    background:#fff;
    border-radius:15px;
    padding:15px;
    -webkit-box-shadow: 5px 5px 3px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 5px 5px 3px 0px rgba(0,0,0,0.75);
    box-shadow: 5px 5px 3px 0px rgba(0,0,0,0.75);
}
#selfmade-popup-img {
    position:relative;
    left:calc(50% - 60px);
    width:120px;
    margin-bottom:15px;
    
}
#selfmade-popup-text {
    text-align: justify;
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-chars: auto 3;
    -webkit-hyphenate-limit-lines: 4;
    -ms-hyphens: auto;
    -ms-hyphenate-limit-chars: auto 3;
    -ms-hyphenate-limit-lines: 4
}
.slick-next{display:none;}
.jumbotron {
    margin-bottom:0;
    margin-top:0;
    padding-bottom:10px;;
}
.jumbotron p {
    text-align: justify;
    hyphens:auto;
}
.jumbotron h1 {
    hyphens:none;
}

.starttext {
    background:#fff;
    border-radius:15px;
    border:10px solid #2A86CC;
}
.startimg {
    border:10px solid #2A86CC;
    text-align:center;
    width:250px;
    background:#fff;
    margin-left:20px;
    border-radius:15px;
}
.startimg img {
    padding-bottom:15px;
}

#loginpic {
    text-align:center;
    margin-bottom:20px;
}
.login_logo {
    margin-left:-150px;
    max-width:500px;    
}

.container {
    margin-bottom:20px;
}

.headerimg {
    margin-top: 70px;
    margin-left: 0;
    width:100%;
}
.headerimg img {
    width:100%;
    -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);    
}
.card {
    width:100%;
    padding:10px;
    background:#fff;
    height:420px;
    border-radius:10px;
    -webkit-box-shadow: 5px 5px 3px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 5px 5px 3px 0px rgba(0,0,0,0.75);
    box-shadow: 5px 5px 3px 0px rgba(0,0,0,0.75);    
}
.card hr {
    margin:0;
    margin-bottom:10px;
    padding:0;
}
.card-img-top {
    width:240px;
}
.card-body {

}
.card-title {
    margin-top:15px;
    font-weight:bold;
    text-align:center;
}
.card-text {
    text-align:justify;
}

#vorstellungstext, .l-right { 
    margin-left:-150px;
    margin-top:60px;
    background:#fff;
    border-radius:15px;
    border:10px solid #2A86CC;
    padding:20px;
    -webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.75);
    box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.75);
}
.l-right {
    border-top-left-radius: 0;
}
.l-left {
    margin-top:60px;
    background:#fff;
    border-radius:15px;
    border:10px solid #2A86CC;
    padding:20px;
    -webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.75);
    box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.75);
    font-weight:bold;
}
.llh1 {
    margin-top:0;
    font-size: 2.2em;
}
.b_gray {
        border:10px solid #c9c9c9;
}
#vorstellungsimg {
    position:relative;
    z-index:9; 
}

.zeugnisimg img {
    width:25%;
    margin:3%;
    border:1px solid #000;
}

.los_btn {
    position: relative;
    margin-left:50%;
    left:-50px;
}
.weiter_btn, .weiter_btn2 {
    position: relative;
    text-align: center;
    top: 20px;
    left: -50px;
    z-index:0;
    margin-bottom:10px;
}
.weiter_btn2 {
    left:0;
}

.mg-top {
    margin-top:50px;
}

.int_btn {
    padding:10px 15px;
    border-radius:10px;
    background:#2A86CC;
    color:#fff;
    margin-right:50px;
    margin-top:20px;
    display:inline-block;
}
.int_btn:hover, .int_btn:visited, .int_btn:focus {
    text-decoration:none;
    background: #5BC0DE;
    color:black;
}
.pr_header {
    text-align:center;
    margin-top:0;
    margin-bottom:25px;
}
/* Media Queries */

@media (max-width: 1200px) {
    #vorstellungstext {
        margin-left:-80px;
    }
    .card img {
        box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3);
        border:1px solid black;
    }  
    .startimg {display:none;}
}

@media (max-width: 991px) {
    #vorstellungstext {
       margin-left:0; 
    }
    #vorstellungsimg {display:none;}
    .l-right {
        margin-left:0;
        margin-top: -10px;
        border-top-right-radius: 0;
    }
    .l-left {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }    
}
@media (max-width: 768px) {
    .login_inputs {
        max-width:60%;
        margin-left:20%;
    }
    .login_logo {
        max-width:400px;    
    }    
    #vorstellungsimg {display:none;}
}
@media (max-width: 480px) {
    .login_logo {
        margin-left:-120px;
        max-width:300px;    
    } 
    #footer {
        font-size:0.8em;
    }
    #copyright {
        display:inline-block;
    }
    .jumbotron h1 {
        font-size:1.1em;
    } 
    .slick-slider {
        margin-top: 70px;
    } 
    h1 {
        font-size:1.5em!important;
    }
    #selfmade-popup {
        position:fixed;
        width:300px;
        left:calc(50% - 150px); 
    }
    #selfmade {
        width:40px;
    }    
}
@media print { 
    #fixedheader,#print,#back_header,#login_header,#logout_header,#sidebar { display: none !important; } 
    .divTableCell {width:100%;}
    #terminlistencontainer {
        padding:0;
    }
}

/* Other */

.index-content a:hover{
    color:black;
    text-decoration:none;
}
.index-content{
    margin-bottom:20px;
    padding:50px 0px;
    
}
.index-content .row{
    margin-top:20px;
}
.index-content a{
    color: black;
}
.index-content .card{
    background-color: #FFFFFF;
    padding:0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius:4px;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3);
    height:100%;
}
.index-content .card:hover{
    box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.3);
    color:black;
}
.index-content .card img{
    max-width:100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.index-content .card h4{
    margin:20px;
}
.index-content .card p{
    margin:20px;
    opacity: 0.65;
}
.index-content .blue-button{
    width: 100px;
    -webkit-transition: background-color 1s , color 1s; /* For Safari 3.1 to 6.0 */
    transition: background-color 1s , color 1s;
    min-height: 20px;
    background-color: #002E5B;
    color: #ffffff;
    border-radius: 4px;
    text-align: center;
    font-weight: lighter;
    margin: 0px 20px 15px 20px;
    padding: 5px 0px;
    display: inline-block;
}
.index-content .blue-button:hover{
    background-color: #dadada;
    color: #002E5B;
}
@media (max-width: 1200px) {

    .index-content .col-lg-3 {
        margin-top: 20px;
    }
    .index-content .card img{
        left: calc(50% - 143px);
        position: relative;
        margin-top:10px;
    }
    .index-content .card{
        max-width:500px;
        margin-left:auto;
        margin-right:auto;
    }
}
@media (max-width: 768px) {


}

.progress {
    position: relative;
	height: 25px;
}
.progress > .progress-type {
	position: absolute;
	left: 0px;
	font-weight: 800;
	padding: 3px 30px 2px 10px;
	color: rgb(255, 255, 255);
	background-color: rgba(25, 25, 25, 0.2);
}
.progress > .progress-completed {
	position: absolute;
	right: 0px;
	font-weight: 800;
	padding: 3px 10px 2px;
}

/* Beben */
@-webkit-keyframes beben {
0% { -webkit-transform: rotate(0deg) translate(2px, 1px); }
10% { -webkit-transform: rotate(2deg) translate(1px, 2px); }
20% { -webkit-transform: rotate(-2deg) translate(3px, 0px) ; }
30% { -webkit-transform: rotate(0deg) translate(0px, -2px); }
40% { -webkit-transform: rotate(-2deg) translate(-1px, 1px); }
50% { -webkit-transform: rotate(2deg) translate(1px, -2px); }
60% { -webkit-transform: rotate(0deg) translate(3px, -1px); }
70% { -webkit-transform: rotate(2deg) translate(-2px, -1px); }
80% { -webkit-transform: rotate(-2deg) translate(1px, 1px); }
90% { -webkit-transform: rotate(0deg) translate(-2px, -2px); }
100% { -webkit-transform: rotate(2deg) translate(-1px, 2px); }
}
@keyframes beben {
0% { transform: rotate(0deg) translate(2px, 1px); }
10% { transform: rotate(2deg) translate(1px, 2px); }
20% { transform: rotate(-2deg) translate(3px, 0px) ; }
30% { transform: rotate(0deg) translate(0px, -2px); }
40% { transform: rotate(-2deg) translate(-1px, 1px); }
50% { transform: rotate(2deg) translate(1px, -2px); }
60% { transform: rotate(0deg) translate(3px, -1px); }
70% { transform: rotate(2deg) translate(-2px, -1px); }
80% { transform: rotate(-2deg) translate(1px, 1px); }
90% { transform: rotate(0deg) translate(-2px, -2px); }
100% { transform: rotate(2deg) translate(-1px, 2px); }
}
#selfmade:hover {
-webkit-animation-name: beben;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-name: beben;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
/* Beben ende */