@media(max-width: 1900px) {
    #portfolio-grid.movies li { height: 320px !important; overflow: hidden; }
}




@media(max-width: 1800px) {
    #portfolio-grid li { height: 370px !important; overflow: hidden; }
}

@media(max-width: 1750px) {
    #portfolio-grid.movies li { height: 300px !important; overflow: hidden; }
}


@media(max-width: 1650px) {
    #portfolio-grid li { height: 340px !important; overflow: hidden; }
    #portfolio-grid.movies li { height: 280px !important; overflow: hidden; }
}

@media(max-width: 1550px) {
    #portfolio-grid li { height: 320px !important; overflow: hidden; }
    #portfolio-grid.movies li { height: 260px !important; overflow: hidden; }
}

@media(max-width: 1450px) {
    #portfolio-grid li { height: 300px !important; overflow: hidden; }
    #portfolio-grid.movies li { height: 240px !important; overflow: hidden; }
}

@media(max-width: 1350px) {
    #portfolio-grid li { height: 280px !important; overflow: hidden; }
    #portfolio-grid.movies li { height: 220px !important; overflow: hidden; }
}

@media(max-width: 1250px) {
    #portfolio-grid li { height: 260px !important; overflow: hidden; }
    #portfolio-grid.movies li { height: 200px !important; overflow: hidden; }
}



@media (max-width: 1160px) {

    /* --------------------------------------------------------------------- */
    /* 5. NAVIGATION
    /* --------------------------------------------------------------------- */

    #main-navigation a { font-size: 1.2em; padding: 15px 0; }
    #portfolio-grid li { height: 240px !important; overflow: hidden; }
    #portfolio-grid.movies li { height: 190px !important; overflow: hidden; }
}

@media(max-width: 1070px) {
    #portfolio-grid li { height: 220px !important; overflow: hidden; }
    #Main-menu li { padding: 0 5px !important; }
    #portfolio-grid.movies li { height: 170px !important; overflow: hidden; }
}



@media (max-width: 980px) {

    /* --------------------------------------------------------------------- */
    /* 1. DOCUMENT SETUP
    /* --------------------------------------------------------------------- */

    body { font-size: 95%; }


    /* --------------------------------------------------------------------- */
    /* 5. NAVIGATION
    /* --------------------------------------------------------------------- */

    #navigation-container { width: 70%; }
    #portfolio-grid li { height: 200px !important; overflow: hidden; }
    #Main-menu li { display: inline-block !important; padding: 0 5px; }
        #Main-menu li a { font-size: 12px !important; }
    /* --------------------------------------------------------------------- */
    /* 8. PORTFOLIO
    /* --------------------------------------------------------------------- */

    #portfolio-grid li { width: 50%; }

        #portfolio-grid li.double { width: 50%; }
        #portfolio-grid li.duple { width: 50%; }

    #portfolio-controls { top: auto; bottom: 0; left: 0; margin-top: 0; }

        #portfolio-controls a { float: left; }


    /* --------------------------------------------------------------------- */
    /* 9. TEAM
    /* --------------------------------------------------------------------- */

    .team .team-member { width: 50%; }

        .team .team-member .layer h3 { font-size: 1.2em; }


    /* --------------------------------------------------------------------- */
    /* 10. BLOG
    /* --------------------------------------------------------------------- */

    #blog-grid h3 { font-size: 1.2em; }

    #blog-controls { top: auto; bottom: 0; left: 0; margin-top: 0; }

        #blog-controls a { float: left; }


    /* --------------------------------------------------------------------- */
    /* 12. COUNTER (SHORTCODES)
    /* --------------------------------------------------------------------- */

    .counter li { width: 33.33333%; padding: 40px 0; }
}




@media ( max-width : 980px ) {

    #HeaderMobile { z-index: 10; background-color: transparent; line-height: 30px; font-size: 1.7em; position: fixed; right: 0; top: 0; }
        #HeaderMobile .top { padding: 20px 15px; }
            #HeaderMobile .top a { color: #fdb915; }
            #HeaderMobile .top .nav { float: right; font-size: 40px; margin-right: 75px; }
        #HeaderMobile ul { font-size: 14px; display: none; }
            #HeaderMobile ul a { display: block; padding: 10px 25px; background-color: #000; text-transform: uppercase; color: #FFF; }
                #HeaderMobile ul a:hover { background-color: #fdb915; }
    #HeaderMobile-top { width: 100%; height: 80px; position: absolute; z-index: 10; }
        #HeaderMobile-top .effect-white { background-color: #fff; opacity: .7; display: block; width: 100%; height: 80px; }
        #HeaderMobile-top .normal-logo { display: inline-block; position: absolute; top: 14px; right: 0; left: 0; margin: auto; width: 225px; }
    #HeaderMobile ul li a.btn-create { background-color: #fdb915; }

    #portfolio-grid li { height: 180px !important; overflow: hidden; }
    .desktop { display: none; }
    .mobile { display: block !important; }
        .mobile .clientArea { padding: 0 25px !important; position: relative; z-index: 11; }
            .mobile .clientArea .fa { font-size: 22px; }
    #Main-menu { display: none; }
    /* --------------------------------------------------------------------- */
    /* 4. PAGE HEADER
    /* --------------------------------------------------------------------- */

    #logo { left: 20px; }

    #open-navi { padding: 0 20px; }


    /* --------------------------------------------------------------------- */
    /* 7. SECTION HEADLINE
    /* --------------------------------------------------------------------- */

    .section-headline .scroll-down-container { left: 18px; }


    /* --------------------------------------------------------------------- */
    /* 8. TABS (SHORTCODES)
    /* --------------------------------------------------------------------- */

    .tab-navi { padding-right: 0; }

        .tab-navi a.active { width: auto; }

        .tab-navi.horizontal li { display: block; }

        .tab-navi.horizontal a.active { border-top: 3px solid #70a8da; border-left: none; width: auto; padding: 15px 30px; margin-bottom: 4px; }

    #Fslider .slides img { height: auto !important; max-width: 100% !important; }
    .team-member .layer .text { top: 20px !important; }

    #blog .gallery { width: 800px !important; margin: auto; }
}

@media ( max-width : 810px ) {
    #portfolio-grid li { height: 160px !important; overflow: hidden; }
}

@media ( max-width : 720px ) {
    #portfolio-grid li { height: 140px !important; overflow: hidden; }
}



@media screen and (max-width: 580px) {

    /* --------------------------------------------------------------------- */
    /* 5. NAVIGATION
    /* --------------------------------------------------------------------- */

    #navigation-container { width: 80%; }


    /* --------------------------------------------------------------------- */
    /* 8. PORTFOLIO
    /* --------------------------------------------------------------------- */

    #portfolio-grid li { width: 100%; }

        #portfolio-grid li.double { width: 100%; }
        #portfolio-grid li.duple { width: 100%; }



    /* --------------------------------------------------------------------- */
    /* 9. TEAM
    /* --------------------------------------------------------------------- */

    .team .team-member { width: 100%; }


    /* --------------------------------------------------------------------- */
    /* 10. CONTACT
    /* --------------------------------------------------------------------- */

    .contact-row .icon-container, .contact-row .info { float: none; }

    .contact-row .info { padding: 5px 0 10px 0; }


    /* --------------------------------------------------------------------- */
    /* 11. FOOTER
    /* --------------------------------------------------------------------- */

    .footer-content .text { display: block; padding-bottom: 10px; }


    /* --------------------------------------------------------------------- */
    /* 1. TYPOGRAPHY (SHORTCODES)
    /* --------------------------------------------------------------------- */

    h1 { font-size: 2.5em; margin-bottom: 30px; }


    /* --------------------------------------------------------------------- */
    /* 12. COUNTER (SHORTCODES)
    /* --------------------------------------------------------------------- */

    .counter li { width: 100%; padding: 25px 0; }


    /* --------------------------------------------------------------------- */
    /* 14. TIMELINE (SHORTCODES)
    /* --------------------------------------------------------------------- */

    .timeline-grid { padding: 0 30px; }

        .timeline-grid li { width: 210px; }

            .timeline-grid li.date { width: 50px; }

                .timeline-grid li.date .year { left: -25px; }
}




@media screen and (max-width: 680px) {

    /* --------------------------------------------------------------------- */
    /* 3. WRAPPER
    /* --------------------------------------------------------------------- */

    section { position: relative; padding: 50px 0; }


    /* --------------------------------------------------------------------- */
    /* 7. SECTION HEADLINE
    /* --------------------------------------------------------------------- */

    .section-headline .row { padding-top: 100px; }
    #portfolio-grid.movies li { height: 120px !important; overflow: hidden; }

    #blog .gallery { width: 400px !important; margin: auto; }
}

@media (max-width: 630px) {
    #portfolio-grid li { height: 120px !important; overflow: hidden; }
}

@media (max-width: 540px) {
    #portfolio-grid li { height: 200px !important; overflow: hidden; }
        #portfolio-grid li.tduple2, #portfolio-grid li.tduple, #portfolio-grid li.duple { width: 100% !important; }
    #portfolio-grid.movies li { height: 200px !important; }
}

@media (max-width: 480px) {

    /* --------------------------------------------------------------------- */
    /* 5. NAVIGATION
    /* --------------------------------------------------------------------- */

    #main-navigation { top: 40px; }
        #main-navigation a { font-size: 1em; padding: 12px 0; }
    #navigation-container .bottom-container { bottom: 20px; }
    #navigation-container .bottom-text { display: none; }
    #navigation-container .social-links { margin-bottom: 0; }


    /* --------------------------------------------------------------------- */
    /* 7. SECTION HEADLINE
    /* --------------------------------------------------------------------- */

    .section-headline .row { padding-top: 60px; padding-bottom: 150px; }
}

@media (max-width: 450px) {
    #portfolio-grid li { height: auto !important; overflow: hidden; }
    #portfolio-grid.movies li { height: auto !important; }
}

@media (max-width: 380px) {

    /* --------------------------------------------------------------------- */
    /* 5. NAVIGATION
    /* --------------------------------------------------------------------- */

    #navigation-container .bottom-container { display: none; }

    #logo img { max-height: 70px !important; width: auto; padding-top: 10px !important; }
    .mobile { display: none; }
    .smallmobile { display: block; }
    .team-member .layer .text { top: 20px !important; }
    #blog .gallery { width: 300px !important; margin: auto; }
    #blog .gallery a img{max-width: 200px !important;}
}