/*!
 * Start Bootstrap - Grayscale Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    width: 100%;
    height: 100%;
    font-family: 'Open Sans', sans-serif;
    color: #444343;
    background-color: #fAFAFA;
   
   
}

html {
    width: 100%;
    height: 100%;         
    margin: 0 auto 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 1em;
    
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    
    text-align: left;
    line-height: 1.3em;
}

h2 {
    font-size: 4rem;
    
    padding-bottom: 5px;  
     
    text-align: center;
    position: relative;
    margin-bottom: 30px;
     
}



h2:after {
    content: '';
    position: absolute;
    bottom: 0;
    left:0;
    height: 5px;
    width: 100%;
    /*background-image: linear-gradient(to right, rgba(164, 46, 131, 0), rgba(164, 46, 131, 0.75), rgba(164, 46, 131, 0));*/
}



p {
    margin: 0 0 25px;
    font-size: 13px;
    line-height: 1.5;
}

@media(min-width:800px) {
    p {
        margin: 0 0 25px;        
        line-height: 1.6;
        font-size: 14px;
    }
}

a {
    color: #5d9cbd;
    font-weight: normal;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

a:hover,
a:focus {
    text-decoration: none;
    color: #5d9cbd;
}

.intro-text a, .intro-text a:hover {
    color:#fff;
   
}

.light {
    font-weight: 400;
}

.navbar-custom {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,.3);
    text-transform: uppercase;
    font-family: Montserrat, sans-serif;
    background-color: #a42e83;
    
    position:absolute;
    top:100%;
    transition: none;
}

.top-nav-collapse {
   position: fixed;
   top:0;
     
}

.navbar-custom .navbar-brand {
    font-weight: 700;
}

.navbar-custom .navbar-brand:focus {
    outline: 0;
}

.navbar-custom .navbar-brand .navbar-toggle {
    padding: 4px 6px;
    font-size: 16px;
    color: #fff;
}

.navbar-toggle i {
    color: #fff;
}

.navbar-custom .navbar-brand .navbar-toggle:focus,
.navbar-custom .navbar-brand .navbar-toggle:active {
    outline: 0;
}

.navbar-custom a {
    color: #FFFDEC;
}

.navbar-custom .nav li a {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.navbar-custom .nav li a:hover {
    outline: 0;
    color: rgba(255,255,255,.8);
    background-color: transparent;
}

.navbar-custom .nav li a:focus,
.navbar-custom .nav li a:active {
    outline: 0;
    background-color: transparent;
}

.navbar-custom .nav li.active {
    outline: 0;
}

.navbar-custom .nav li.active a {
    background-color: rgba(255,255,255,.3);
}

.navbar-custom .nav li.active a:hover {
    color: #fff;
}

@media(min-width:768px) {
    .navbar-custom {
        padding: 0px 0;
        border-bottom: 0;
        letter-spacing: 1px;
        color:#fff;
        
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .navbar-custom.top-nav-collapse {
        padding: 0;
        border-bottom: 1px solid rgba(255,255,255,.3);
        background:  #a42e83;

        
    }
}

.intro {
    display: table;
    width: 100%;
    height: 100%;
    padding: 100px 0;
    text-align: center;
    color: #fff;
    background: url('../img/spielraum2019/titel.jpg?v2') no-repeat bottom center scroll;
    
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    
    
    
}

.intro .intro-body {
    display: table-cell;
    vertical-align: middle;
}

.intro .intro-body .brand-heading {
  
}

.intro .intro-body .intro-text {
    font-size: 18px; 
    color:#fff
}

@media(min-width:768px) {
    .intro {
        height: 100%;
        padding: 0;
    }

    .intro .intro-body .brand-heading {
        font-size: 100px;
    }

    .intro .intro-body .intro-text {
        font-size: 26px;
    }
}

.btn-circle {
    width: 70px;
    height: 70px;
    margin-top: 15px;
    padding: 7px 16px;
    border: 2px solid #fff;
    border-radius: 100%!important;
    font-size: 40px;
    color: #fff;
    background: 0 0;
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.btn-circle:hover,
.btn-circle:focus {
    outline: 0;
    color: #fff;
    background: rgba(255,255,255,.1);
}

.btn-circle i.animated {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
}

.btn-circle:hover i.animated {
    -webkit-animation-name: pulse;
    -moz-animation-name: pulse;
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
}

@-webkit-keyframes pulse {    
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-moz-keyframes pulse {    
    0% {
        -moz-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -moz-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -moz-transform: scale(1);
        transform: scale(1);
    }
}

.content-section {
    padding-top: 100px;
    padding-bottom: 100px;
}

.download-section {
    width: 100%;
    padding: 50px 0;
    color: #fff;
    background: url(../img/downloads-bg.jpg) no-repeat center center scroll;
    background-color: #000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}


@media(min-width:767px) {
    .content-section {
        padding-top: 100px;
    }

    .download-section {
        padding: 100px 0;
    }

}

.btn {
    border-radius: 0;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    
}

.btn-default {
    border: 1px solid #42dca3;
    color: #42dca3;
    background-color: transparent;
}

.btn-default:hover,
.btn-default:focus {
    border: 1px solid #42dca3;
    outline: 0;
    color: #000;
    background-color: #42dca3;
}

ul.banner-social-buttons {
    margin-top: 0;
}

@media(max-width:1199px) {
    ul.banner-social-buttons {
        margin-top: 15px;
    }
}

footer {
    padding: 50px 0;
}

footer p {
    margin: 0;
}
/*
::-moz-selection {
    text-shadow: none;
    background: #fcfcfc;
    background: rgba(255,255,255,.2);
}

::selection {
    text-shadow: none;
    background: #fcfcfc;
    background: rgba(255,255,255,.2);
}

img::selection {
    background: 0 0;
}

img::-moz-selection {
    background: 0 0;
}
*/
body {
    webkit-tap-highlight-color: rgba(255,255,255,.2);
     font-size: 13px;
}

h2 {
    color: #3A3A3A;
}

.calendar td, .calendar th {
    padding: 5px;
    vertical-align: top;
}

.calendar td {
    
}

.calendar th {
    
}

h3 {margin-top:20px;}



.carousel {
    width: 100%; 
    margin: 0 auto 20px auto;    
    background:none;   
}

.carousel-control.left,.carousel-control.right {
  background-image: none;
  filter: none;
  background-repeat: no-repeat;
}


.cv li {
    
}

.cv li:before {
    content: "\f138";
    font-family: "FontAwesome";
    
    margin-right: 7px;
}

ul.cv ul li:before {
    display:none}

@media(max-width:950px) {
    .variant1, .variant2, .variant3 {        
         padding-left: 5%;
        padding-right: 5%; 
        
        position: relative;   
                
    }        
}

.startlogo {
        width: 60%;
    }

.kurs {
    
    float:left;
    padding: 15px;
    
    border-radius: 12px;
    margin: 10px 13px 10px 0;
   
    background:#fff3d6;    
    min-height: 318px;
    min-width: 12em;
    
}

.kurs h3 {
    min-height: 35px;
    border-bottom:1px solid #fbbb16;
    font-weight: bold;
    
    
}

.ekiz {
    background:#f7efde;   
    padding: 27px;
    border-radius: 12px;
    margin-top: 58px; 
    overflow: auto;
    
}

@media(min-width:950px) {
    .variant1, .variant2, .variant3 {
        
        padding-left: 10%;
        padding-right: 10%; 
        position: relative;
    }
    
     .kurs {
        padding: 20px;
    }
}

@media(min-width:1200px) {
    .variant1, .variant2, .variant3 {

        padding-left: 10%;
        padding-right: 10%; 
        position: relative;
    }
    
    .kurs {
        padding: 20px;
    }
}


/* 1 */
.variant1 {
    background: #b5c67c;
}

.variant1 h2 {
    color: #A42E83;
    font-weight: lighter;
    
}

.variant1 h3 {
    color: #a42e83;
}

.variant2 {
   background: #fbbb16;    
}

.variant3 {
    background:#385b9d;            
    
    
}
.variant3 a {
    color:#fff;
}


.variant2:before, .variant1:before, .variant3:before {
    content: ' ';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 15px 0 15px;
   
    position: absolute;
    top: 0;
    left: 50%;
    
    z-index: 1;    
}
.variant2:before {      
    border-color: #b5c67c transparent transparent transparent;
}


.variant1:before {
    border-color: #fbbb16 transparent transparent transparent;
    
}

.variant3:before {
    border-color: #fbbb16 transparent transparent transparent;
    
}

.variant2 h2 {
    color: #A42E83;
    font-weight: lighter;    
}

.variant2 h3 {
  font-weight: lighter;    
}

.variant1.noicon:before {    
    display: none;
}

.new {
    color: #444343;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    
}

.about {
    background-image: url('../img/footer.jpg');
    background-size:cover;
    background-repeat: no-repeat;
    height: 150px;
    width:100%;
    position: absolute;
    top:0;
    left:0;
    right:0;
}

.calendar h3 {
    font-size: 14px;
    color: #555454;
    margin:0 0 10px 0 ;        
    font-weight: bold;
    line-height: 1.35em;
    padding-bottom: 5px;
}


.tag:before {    
    content: "";
    font-family: "FontAwesome";
    
    margin-right: 7px;
    font-weight: bold;
    display:inline-block;
    width: 15px;
}
/*
.ort:before {
    content: "";
    font-family: "FontAwesome";
    
    margin-right: 7px;
}
*/
.termine:before {
    content: "";
    font-family: "FontAwesome";
    
    margin-right: 7px;
     display:inline-block;
    width: 15px;
}
/*
.eltern:before {
     content: "";
    font-family: "FontAwesome";
    
    margin-right: 7px;
    
}*/

.eltern {
    font-weight: bold;
    margin: 5px 0px;
}
.eltern ul, .eltern li {
    font-weight: normal;
    list-style: none;  

    padding: 0;
    margin: 0;
}

.eltern ul {

}

.kurs:first-child {
    
}

.nav-tabs {
    display: inline-block;
    border-radius: 12px;
 
}

.nav-tabs {border:0}
.nav-tabs a { color:#333;}
.nav-tabs>li>a {      
    border-radius: 12px;
    margin:0;
    background-color: #ffecbc;
    border-color: #ffecbc;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {   
    background-color: #f24f0f;
    border-color: #f24f0f;
    color:#fff;
}

.nav>li>a:focus, .nav>li>a:hover {
    background-color: #fff;
}

.safe {
    background:  #fff; 
    border: 2px solid #A42E83;
    border-radius: 5px;
    padding: 16px;
    opacity:.8;
}

.safe h2, .safe h3 {color: #333}

.rounded {
    margin-top:20px;    
    border-radius: 70px;
    border: 3px solid #A42E83;
}

a.impressum {
    display:block;
    margin: 12px 0 0 0;
    font-weight: normal;
    cursor: pointer;
}

.liebedich {
    display:block;
    background-image: url(../img/liebedich.jpg); 
    
    height: 450px;
     
    background-size: cover;
    background-position: top;    
    
    
    
    left:0;
    right:0;
    
    border-radius: 15px;
}
.ruth {
    display:block;
        
    width: 90%;
    background-repeat: no-repeat;
    
    border-radius: 186px;
    background-clip: border-box;
    text-align: center;
}

.highlight {
    background:#fff;
    padding:20px;
    
    border-radius: 7px;
    margin: 0 0 15px 0;
    position: relative;
    
    background:#f5fcde
    
}

.special {background:#fff;}

.sub {display:block;}

.emp {font-style: italic}


@media(max-width:950px) {
content-section .btn {
    font-size: 12px;
}
}

/* quotations */
blockquote {
    
    min-height: 100%;
    font-size:13px;
    margin: 1em 15% 0 15%;
    padding: 1.25em 0px;
    line-height: 1.45;
    position: relative;
    color: #333;
    border-left: 0;
    z-index: 1;
    
    
}
blockquote:before {
    display: block;
    content: "\201C";
    font-size: 140px;
    font-family: Georgia;
    position: absolute;
    left: -29px;
    top: -55px;
    color: #DEDEDE;
    z-index: -1;    
    
}

blockquote .from {
    color:#aaa;
    display: block;
    margin-top:10px;   
}

.carousel-fade {
    position: relative;
    height:220px;
}

.carousel-fade .item {
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s ease-in-out;
    transform: none;
}

.carousel-fade .item {
    opacity: 0;
    display: block;
    position:absolute;
    top:0;
    
}

.carousel-fade .carousel-inner {
    height: 100%;
}

.carousel-fade .item.active {
    opacity: 1;    
}


/* required for sliding tabs */
.tab-content .tab-pane {    
    position: relative;    
}

.sptermin {
    border: 1px solid #b5c67c;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
}

.sptermin p {
    margin:0;
}

.sptermin p:first-child {
    font-weight: bold;
}

.navbar-fixed-top {
    display: none;
}

@media(max-width:767px) {
    ul.banner-social-buttons li {
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }

    ul.banner-social-buttons li:last-child {
        margin-bottom: 0;
    }
    .nav-tabs {background:transparent !important}
    .kurs {
        
        width: 100% !important;
        min-height: auto;
        
    }
    .kurs h3 {font-size: 16px}
    
}

/** monate **/

.agediagram {
    font-size 10px;
    margin:0;
    padding:0;
}
.agediagram .label {
      font-weight: normal;
    font-size: 12px;
    padding: 0;
    background: #bbb;
    color: #fff;
    padding: 6px;
    border-radius: 6px;
    display: inline-block;
}




.age {
    position: relative;
    margin-bottom: 12px;
    color:#fff;
    max-width: 350px;
}

.age .skala {
     background: #FBBB16;  
    border-radius: 6px;
}

.age ul.skala {
    padding: 4px 0 4px 4px;
    margin: 0;
}

.age .skala li {
    display: inline-block;
    list-style: none;
    width: 8.44%;
    margin:0;
    padding:0;
}



.age .point {
    position: absolute;
    background: #FFF;
    border:3px solid black;
    border-radius: 9px;
    margin:0;
    padding:0 0px 0 0;
    opacity:.3;
        top: 0;
    height: 100%;
    
}



/** COOKIE HINWEIS**/

#cookienote a { text-decoration:none;}

#cookienote a:hover {text-decoration:underline;}

#cookienote div {padding:10px; padding-right: 143px;}

#cookienote { 
   outline: 1px solid #7b92a9; 
   text-align:right; 
   border-top:1px solid #fff;
   background: #d6e0eb;     
   background: linear-gradient(to bottom, #d6e0eb 0%,#f2f6f9 100%);    
   position:fixed;
   bottom:0px; 
   z-index:10000; 
   width:100%; 
   font-size:14px; 
   line-height:24px;
   opacity: .8;

}

#cookienoteCloser {
   color: #333;
   font: 14px/100%;
   position: absolute;
   right: 25px;
   text-decoration: none;
   text-shadow: 0 1px 0 #fff;
   top: 5px;
   cursor:pointer;
   
   border: 1px solid #999; 
   
   padding:4px;
   background: #ced6df; /* Old browsers */
   
   border-radius: 4px;     
 }

#cookienoteCloser:hover {background:#fff}
/** / COOKIE HINWEIS**/

.datenschutz {
    padding: 40px;
}
.datenschutz h1 {
    font-size: 25px;
    text-align: center;
}
.datenschutz h2 {
    font-size: 16px;}


.datenschutz h3 {
    font-size: 14px;}