@media (min-width: 481px){

    .navbar-default .navbar-toggle {
        margin-right: 15px;
    }

    .navbar-default .navbar-nav > li > a {
        font-size: 20px;
    }

    div.button-wrapper a.yellow-button {
        display: block;
        margin: auto;
        background-size: 306px 88px;
        width: 306px;
        height: 88px;
        padding: 20px 60px;
        font-size: 18px;
        line-height: 1.2;
    }

    div.usp {
        height: 135px;
    }

    div.usp.anim {
        height: 135px;
    }

    div.usp img {
        max-width: 80px;
    }

    p.usp-caption {
        margin-top: 10px;
        margin-bottom: 25px;
        font-size: 17px;
    }

    div.group-icon.anim {
        height: 120px;
    }

    /*Slider*/

    #text-slider .sp-layer {
        font-size: 24px;
    }


    #piwik_optout {
        width: 100%;
        height: 320px;
        overflow: hidden;
    }

}

@media (min-width: 481px) and (max-width: 991px) {
    div.usp:first-child {
        margin-left: 16.66666667%;
        width: 33.333333%;
    }

    div.usp {
        width: 33.333333%;
    }
}

@media (min-width: 768px){
    /*Hinweis Top Info*/
    #top-info {
        width: 60%;
        left: 20%;
        top: 150px;
        font-size: 20px;
    }

    #top-info-header,
    #top-info-text {
        padding: 15px;
    }

    #top-info h2 {
        font-size: 28px;
    }

    #top-info-text {
        font-weight: bold;
    }

    #top-info .close {
        font-size: 65px;
        line-height: 25px;
    }

    body {
        font-size: 18px;
        padding-top: 105px;
    }

    .navbar > .container .navbar-brand, .navbar-brand {
        height: 115px;
        font-size: 18px;
    }

    .navbar > .container .navbar-brand .navbar-brand-image,
    .navbar-brand .navbar-brand-image {
        width: 102px;
        height: 77.52px;
    }

    .navbar-default .navbar-toggle .icon-bar {
        width: 30px;
        height: 4px;
    }

    a.red-button-big,
    a.yellow-button,
    a.orange-button,
    a.white-button {
        display: inline-block;
        margin: 25px 30px 80px;
    }

    div.button-wrapper a.yellow-button {
        background-size: 100% 100%;
        width: 330px;
        height: 90px;
        font-size: 22px;
        padding: 15px 50px;
    }

    div.button-wrapper a.green-button,
    div.button-wrapper a.green-button-big {
        font-size: 24px;
        background-size: 100% 100%;
        width: 197px;
        height: 195px;
        padding: 82px 15px;
    }

    div.button-wrapper a.green-button-big {
        width: 218px;
        padding: 65px 15px;
    }


    /*Container und Padding*/

    .container.section {
        padding: 50px 15px 75px;
    }

    div.background {
        padding: 40px 0;
    }

    div.bg-orange {
        background-color: #f59c00;
    }

    .container-fluid > .row > div.content.padding-120 {
        padding: 80px 100px;
    }

    .container-fluid > .row > div.content.padding-30 {
        padding: 80px 100px;
    }

    /*Slider*/

    .sp-fade-arrows {
        display: block;
    }

    #text-slider .sp-layer {
        font-size: 28px;
    }

    #slider-medium .sp-buttons {
        position: absolute;
        bottom: 30px;
    }

    /*Header*/
    h1 {
        font-size: 60px;
    }

    h2 {
        font-size: 45px;
    }

    h3,
    .header-center .contact h2 {
        font-size: 30px;
    }

    h2.modal-title {
        font-size: 24px;
    }

    .header-center h2 {
        font-size: 60px;
    }

    #mapl4you .overlay-l4you {
        height: 470px;
    }

    /*Footer / Sitemap*/
    #footer ul li {
        display: inline-block;
        margin: 0 15px;
    }

    .contact-icons {
        height: 400px;
    }

    #teddy-footer {
        left: 0;
        bottom: 25%;
    }

    #teddy-bye {
        left: 80px;
        bottom: 25%;
    }

    .traeger {
        display: block;
        margin-top: 80px;
        margin-bottom: 0;
        text-align: left;
    }

    .traeger h3 {
        display: inline-block;
        float: left;
        width: 40%;
        margin: auto;
        font-size: 24px;
        text-align: right;
        padding-right: 10px;
        line-height: 58px;
    }

    .traeger img {
        display: inline-block;
        padding-left: 10px;
        height: 58px;
    }

    /*Inhalte*/

    img.img-responsive {
        margin: auto;
    }

    div.usp {
        height: 1px;
        -webkit-transition: height 0.5s;
        transition: height 0.5s;
    }

    div.usp.anim {
        height: 238px;
    }

    div.usp img,
    div.group-icon img {
        max-width: 100%;
    }

    div.group-icon img {
        -webkit-transition: opacity 1s, -webkit-transform 0.5s;
        transition: opacity 1s, transform 0.5s;
    }

    div.group-icon {
        height: 1px;
        -webkit-transition: height 0.5s;
        transition: height 0.2s;
    }

    #kindergarten-gruppen div.group-icon:first-child::after {
        display: block;
        content:'';
        position: absolute;
        top: 5%;
        right: -20%;
        width: 100%;
        height: 100%;
        background: url(../Images/Gruppen/sprechblase.png) top right no-repeat;
        background-size: 50%;
        -ms-transform: scale(0);
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transition: -webkit-transform 0.3s linear 1s;
        transition: transform 0.3s linear 1s;
    }

    #kindergarten-gruppen div.group-icon:last-child::after {
        display: block;
        content:'';
        position: absolute;
        top: 20%;
        right: -20%;
        width: 100%;
        height: 100%;
        background: url(../Images/Gruppen/sprechblase.png) top right no-repeat;
        background-size: 50%;
        -ms-transform: scale(0);
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transition: -webkit-transform 0.3s linear 0.5s;
        transition: transform 0.3s linear 0.5s;
    }

    #kindergarten-gruppen div.group-icon.anim:last-child::after {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    #kindergarten-gruppen div.group-icon:first-child::after,
    #kindergarten-gruppen div.group-icon.anim:first-child::after {
        -ms-transform: scale(0);
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    p.usp-caption {
        display: none;
        margin-top: 20px;
        font-size: 26px;
    }

    div.group-icon.anim {
        height: 140px;
        padding-left: 15px;
        padding-right: 15px;
    }

    #krippe-gruppe div.group-icon.anim {
        height: 112px;
    }

    .team-l4you {
        margin: 40px 0 0;
    }

    .team-l4you-text {
        margin: 25px 0;
    }

    /*Copyright*/
     .copyright{
        font-size: 14px;
    }

    #piwik_optout {
        width: 100%;
        height: 300px;
        overflow: hidden;
    }
}



@media (min-width: 992px){
    body {
        padding-top: 115px;
        font-size: 16px;
    }

    /* 20% - Column */
    .col-md-20 {
        width: 20%;
    }


    /*Logo und Navigation*/
    .navbar > .container .navbar-brand,
    .navbar-brand {
        margin-left: 0px;
        height: 115px;
        padding: 10px 0;
    }

    .navbar-default {
        box-shadow: none;
        border-bottom: 0;
    }

    .navbar-nav {
        padding: 0;
        margin: 0 !important;
        float: right;
    }

    .navbar-default .navbar-nav > li {
        margin: 0;
    }

    .navbar-default .navbar-nav > li > a {
        display: inline-block;
        padding: 47.5px 15px;
        text-align: center;
        font-size: 24px;
    }

    /*Buttons*/

    a.red-button-big,
    a.yellow-button,
    a.orange-button,
    a.white-button {
        margin: 15px 40px 90px;
    }

    div.button-wrapper a.yellow-button {
        background-size: 100% 100%;
        width: 391px;
        height: 107px;
        font-size: 24px;
        padding: 25px 60px;
    }

    /*Container und Padding*/
    .container-fluid > .row > div.content.padding-120 {
        padding: 40px;
        text-align: justify;
    }

    .container-fluid > .row > div.content.padding-100 {
        padding: 40px;
        text-align: justify;
    }

    .container-fluid > .row > div.content.padding-30 {
        padding: 30px;
        text-align: justify;
    }

    /*Slider*/

    .slider-pro h1.sp-layer {
        font-size: 80px;
    }

    #text-slider .sp-layer {
        font-size: 30px;
    }

    #slider-medium .sp-buttons {
        position: absolute;
        bottom: 40px;
    }

    /*Header*/
    h1 {
        font-size: 80px;
    }

    h2 {
        font-size: 40px;
    }

    h2.home {
        font-size: 62px;
    }

    h2.modal-title {
        font-size: 37px;
    }

    h3,
    .header-center .contact h2 {
        font-size: 37px;
    }

    .header-center h2 {
        font-size: 80px;
    }

    .text-justify h2 {
        text-align: left;
    }


    /*Inhalte*/

    div.group-icon.anim {
        height: 230px;
    }

    #krippe-gruppe div.group-icon.anim {
        height: 184px;
    }

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

    .team-l4you-header {
        font-size: 24px;
    }

    /*Google Map*/
    #mapl4you #map{
        float:left;
        width:67%;
        height:600px;
    }

    #mapl4you .overlay-l4you{
        width:33.33333333%;
        height: 600px;
        position:absolute;
        right:0;
        padding: 60px 40px;
        text-align: center;
    }

    /*Footer / Sitemap*/

    #footer ul li {
        margin: 0 25px;
    }

    #footer .sitemap a {
        font-size: 22px;
    }

    #teddy-footer {
        -ms-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -ms-transform-origin: center center;
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-transition: none;
        transition: none;
    }

    div.contact:hover #teddy-footer {
        -ms-transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
        -ms-transform-origin: center center;
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
    }

    #teddy-bye {
        -ms-transform: scale(0);
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
    }

    div.contact:hover #teddy-bye {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: -webkit-transform 0.3s;
        -webkit-transition-delay: 0.7s;
        transition: transform 0.3s;
        transition-delay: 0.7s;
    }

    #teddy-bye.fixed {
        -webkit-transition: margin-left 0.7s ease, margin-bottom 0.7s ease, -webkit-transform 0.3s;
        transition: margin-left 0.7s ease, margin-bottom 0.7s ease, transform 0.3s;
    }

    #teddy-footer.fixed {
        -webkit-transition: margin-left 0.7s ease, margin-bottom 0.7s ease;
        transition: margin-left 0.7s ease, margin-bottom 0.7s ease;
    }

    .traeger img {
        height: 64px;
    }

    .traeger h3 {
        line-height: 64px;
        width: 50%;
    }

    .copyright {
        line-height: 60px;
    }

    .sitemap {
        height: 60px;
        padding: 15px;
    }

    .isocert {
        display: inline-block;
        height: 60px;
        width: auto;
        margin-left: 50px;
        margin-top: 0;
    }

    /*PIWIK ANALYSETOOL OPTOUT IFRAME*/

    #piwik_optout {
        width: 100%;
        height: 200px;
        overflow: hidden;
    }


}

@media (min-width: 1100px){

    /*Google Map*/
    #mapl4you #map{
        height:530px;
    }

    #mapl4you .overlay-l4you{
        height: 530px;
    }

}

@media (min-width: 1200px) {
    /*Hinweis Top Info*/
    #top-info {
        width: 50%;
        left: 25%;
        top: 140px;
        font-size: 20px;
    }

    #top-info-header,
    #top-info-text {
        padding: 25px;
    }

    #top-info h2 {
        font-size: 36px;
    }

    .navbar-default .navbar-nav > li > a {
        font-size: 26px;
    }

    .header-center h2 {
        font-size: 100px;
    }

    .container-fluid > .row > div.content.padding-120 {
        padding: 30px;
    }

    .container-fluid > .row > div.content.padding-100 {
        padding: 30px;
    }

    #footer ul li {
        margin: 0 40px;
    }

    #footer .sitemap a {
        font-size: 24px;
    }

    .traeger img {
        height: 65px;
    }

    .traeger h3 {
        font-size: 28px;
        line-height: 65px;
    }
}

@media (min-width:1400px){
    body {
        font-size: 18px;
    }

    .contact {
        font-size: 20px;
    }

    h2 {
        font-size: 50px;
    }

    h3,
    .header-center .contact h2 {
        font-size: 45px;
    }

    .container-fluid > .row > div.content.padding-120 {
        padding: 50px;
    }

    .container-fluid > .row > div.content.padding-100 {
        padding: 30px;
    }
}

@media (min-width: 1700px) {
    /*Container und Padding*/
    .container-fluid > .row > div.content.padding-100 {
        padding: 70px;
    }

    .container-fluid > .row > div.content.padding-30 {
        padding: 30px 70px;
    }

    .container-fluid > .row > div.content.padding-120 {
        padding: 80px;
    }
}

@media (min-width: 1800px) {
    .container-fluid > .row > div.content.padding-30 {
        padding: 65px 70px;
    }

    .container-fluid > .row > div.content.padding-120 {
        padding: 95px;
    }

    .container-fluid > .row > div.content.padding-100 {
        padding: 80px;
    }
}

@media (min-width: 1900px) {
    .container-fluid > .row > div.content.padding-30 {
        padding: 30px 100px;
    }
}

@media(min-width: 1921px){
    .slider-pro h1.sp-layer {
        font-size: 100px;
    }
}

@media(min-width: 768px) and (max-width: 845px),(min-width: 992px) and (max-width: 1085px),(min-width: 1200px) and (max-width: 1305px){
    #kindergarten-gruppen div.group-icon.anim:last-child::after {
        -ms-transform: scale(0);
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transition: -webkit-transform 0.2s;
        transition: transform 0.2s;
    }

    #kindergarten-gruppen div.group-icon.anim:first-child::after {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: -webkit-transform 0.2s;
        transition: transform 0.2s;
    }
}