/*
min: über dem in der Abfrage definierten Wert liegen
niemals schmaler
wird breiter, wenn der Inhalt die min-width angabe überschreitet

max: unter dem in der Abfrage definierten Wert liegen
wird nicht breiter selbst wenn CSS width einen größeren Wert enthält.
*/

@media (max-width: 768px) {
    /*------------------------------------
                GLOBAL
    ------------------------------------*/
    .main {
        padding: 50px 0 70px;
    }
    
    .footer {
        padding: 50px 0 40px;
    }


    /*------------------------------------
                SPACE
    ------------------------------------*/
    .responsive-mbottom30 {
        margin-bottom: 30px;
    }
    
    
    /*------------------------------------
                FONTS
    ------------------------------------*/
    h1 {
        font-size: 32px;
        margin: 0 0 35px;
    }
    
    h2 {
        font-size: 22px;
    }

    h3 {
        font-size: 20px;
        margin: 0 0 14px;
    }

    .panelinfo p {
        font-size: 14px;
    }

    .ulshort:after,
    .ulshortblue:after, 
    .ullong:after,
    .ullongblue:after {
        display: none;
    }


    /*------------------------------------
                IMG
    ------------------------------------*/
    .bgteeth-img1:before, 
    .bgteeth-img2:after, 
    .bgteeth-img3:before, 
    .bgteeth-img4:after, 
    .bgteeth-img5:after, 
    .bgteeth-img6:before, 
    .bgteeth_adult:after    {
        display: none;
    }

    
    /*------------------------------------
                ELEMENTS
    ------------------------------------*/  
    .panelinfo {
        box-sizing: border-box;
        padding: 10px 0 5px;
    }

    .quote {
        font-size: 24px;
        box-sizing: border-box;
        padding: 0 0;
        margin: 0 0 60px;
    }
    
    .concenter {
        display: none;
    }

    button.btn {
        width: 100%;
    }


    /*------------------------------------
                COMPONENTS
    ------------------------------------*/
    .carousel-caption {
        display: none;
    }

    a.navbar-brand img {
       display: none; 
    }
    
    .navbar-header:before {
        content: url(../img/responsive-logo.png);
        display: block;
        width: 214px;
        height: 75px;
        position: absolute;
        top: 12px;
        left: 15px;
    }

    .navbar-default ul.navbar-nav {
        margin-left: 15px;
    }
    
    .navbar-default ul.navbar-nav > li > a:hover {
        border: none;
    }

    ul.navbar-right li {
        float: left;
    }
    
    .footer ul.list,
    .footer ul.list dots {
        font-size: 16px;
    }
    
    .footer ul.list.contact li {
        float: none;
    }

    .responsive-iframe {
        width: 260px;
    }

    iframe.responsive-iframe-full {
        width: 100%;
    }
}


@media (max-width: 992px) {
    /*------------------------------------
                GLOBAL
    ------------------------------------*/
    .main {
        padding: 40px 0 60px;
    }
    

    /*------------------------------------
                SPACE
    ------------------------------------*/
    .responsive-mbottom30 {
        margin-bottom: 30px;
    }


    /*------------------------------------
                FONTS
    ------------------------------------*/
    
    .h1 {
        font-size: 35px;
        margin: 0 0 25px;
    }

    .ulshort:after,
    .ulshortblue:after, 
    .ullong:after,
    .ullongblue:after {
        display: none;
    }


    /*------------------------------------
                IMG
    ------------------------------------*/
    .bgteeth-img1:before, 
    .bgteeth-img2:after, 
    .bgteeth-img3:before, 
    .bgteeth-img4:after, 
    .bgteeth-img5:after, 
    .bgteeth-img6:before, 
    .bgteeth_adult:after    {
        display: none;
    }
    

    /*------------------------------------
                ELEMENTS
    ------------------------------------*/
    .quote {
        font-size: 24px;
        box-sizing: border-box;
        padding: 0 0;
        margin: 0 0 60px;
    }
    
    .concenter {
        align-items: baseline;
        display: flex;
        flex-direction: column;
    }
    

    /*------------------------------------
                COMPONENTS
    ------------------------------------*/
    .carousel-caption {
        display: none;
    }

    .navbar-brand {
        padding: 15px 15px 15px 30px;
    }
    
    .nav li a {
        font-size: 14px;
        padding: 10px 8px;
    }
    
    .navbar-default .navbar-nav > li > a:hover:after {
        content: none;
    }
    
    .navbar-default .navbar-nav > li > a:hover {
        border-bottom: 1px solid #4bbee6;
    }
    
    .navbar-default .navbar-right > li > a:hover {
        border-bottom: none;
    }
}


@media (max-width: 1200px) {
    /*------------------------------------
                IMG
    ------------------------------------*/
    .bgteeth-img1:before, 
    .bgteeth-img2:after, 
    .bgteeth-img3:before, 
    .bgteeth-img4:after, 
    .bgteeth-img5:after, 
    .bgteeth-img6:before, 
    .bgteeth_adult:after    {
        display: none;
    }
    
    
    /*------------------------------------
                ELEMENTS
    ------------------------------------*/
    .quote {
        font-size: 24px;
        box-sizing: border-box;
        padding: 0 0;
        margin: 0 0 60px;
    }


    /*------------------------------------
                COMPONENTS
    ------------------------------------*/
    .nav > li > a {
        padding: 10px 5px;
    }

    .carousel-caption {
        font-size: 40px;
        padding: 30px 0;
        bottom: 300px;
    }
}