/**
 * @Author: Marc Pérez Castells <welvi>
 * @Date:   2016-10-02T17:45:36+02:00
 * @Email:  info@marcperez.cat
 * @Last modified by:   welvi
 * @Last modified time: 2018-03-01T10:17:57+01:00
 */



@media screen and (min-width: 980px) and (max-width: 1024px) {
    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    #top-bar,
    #header,
    #main-menu,
    #super,
    #logos,
    #credits,
    #header {
        width: 100em !important;
        padding: 0 !important;
        margin: 0 0 0 .5% !important;
    }

    .showcase.home {
        margin-left: 0em !important;
        width: 100em !important;
    }

    #main-menu ul li {
        margin-left: 2.9em;
    }

    h1, p.h1 {
        margin-top: 2em;
    }

    h1 img, p.h1 img {
        width: 175px;
    }

    #header #banner-header {
        margin-right: 0;
    }

    .main-column.left,
    .main-column.central {
        width: 37em;
    }

    #wrapper-footer #logos ul li {
        margin: .5em 0 !important;
    }

    .showcase.home .showcase-thumbnail-button-backward,
    .showcase.home .showcase-thumbnail-button-forward {
        margin-left: 2em;
    }

    .showcase.home .showcase-thumbnail-restriction {
        margin-left: 2.5em;
        width: 852px !important;
    }

    #article-detail, .main-column {
        width: 75em !important;
    }

    .main-column.left, .main-column.central {
        width: 37em !important;
    }
}

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

    body {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    .cookies-alert {
        height: 165px;
    }

    .cookies-alert-message {
        height: 165px;
        flex-direction: column;
        margin: 0;
    }

        .cookies-alert-message .text {
            font-size: 15px;
            text-align: center;
            margin: 5px 10px 0;
        }

        .cookies-alert-message .accept-button {
            margin-top: 10px;
        }

        .cookies-alert-message .policy-link {
            margin-top: 10px;
            font-size: 15px;
        }

    #top-bar,
    #header,
    #main-menu,
    #super,
    #logos,
    #credits {
        width: 96% !important;
        padding: 0 !important;
        margin: 0 0 0 2% !important;
    }

    .content {
        width: 100%;
        float: none;
    }

    .cookies-table {
        display: block;
        overflow-x: scroll;
    }

    #wrapper-header,
    #header {
        height: auto;
    }

    #wrapper-header {
        padding-bottom: 1em;
    }

    #wrapper-header #top-bar-wrapper {
        height: 11em;
    }

    #wrapper-header #top-bar-wrapper #top-bar p {
        margin-top: 3px;
        margin-left: 6px;
        margin-right: 6px;
    }

    #wrapper-header #top-bar-wrapper #top-bar .search-box-contact {
        width: 100%;
    }

    #wrapper-header #top-bar-wrapper #top-bar .search-box-contact .contact {
        float: left;
        clear: left;
    }

    #wrapper-header #top-bar-wrapper .search-box-contact form {
        width: 100%;
        margin-top: 10px !important;
        clear: left;
    }

        #wrapper-header #top-bar-wrapper .search-box-contact form .search {
            width: 90%;
            margin: 0 auto;
            display: block;
        }

            #wrapper-header #top-bar-wrapper #top-bar form .search input {
                width: 75%;
            }

            #wrapper-header #top-bar-wrapper #top-bar form .search input,
            #wrapper-header #top-bar-wrapper #top-bar form .search input.submit {
                float: left;
            }

            #wrapper-header #top-bar-wrapper #top-bar form .search input.submit {
                width: 20%;
            }

    #wrapper-header #top-bar-wrapper #top-bar p.contact {
        float: right;
        clear: left;
    }

    #header #banner-header {
        margin: 1em 0 0 0 !important;
        padding: 0 !important;
        width: 100%;
    }

    #banner-header img {
        width: 100%;
    }

    #advertisment .advertisment-content {
        width: 99% !important;
        margin-left: .5% !important;
    }

    #advertisment .advertisment-content img {
        width: 100%;
        display: block;
    }

    h1, p.h1 {
        float: none;
        text-align: center;
    }

    h1 img, p.h1 img {
        display: inline;
    }

    #article-detail h1 {
        text-align: left;
    }

    #wrapper-super {
        overflow: none;
        position: relative;
    }

    #main-menu ul li {
        display: none;
        margin: 0 0 0 .4em;
    }

        #main-menu ul li.selected,
        #main-menu ul li.device {
            display: inline-block;
        }

        #main-menu ul li.device {
            display: inline-block;
            float: right;
            margin-top: 10px;
            margin-right: 5px;
            width: 40px;
            height: 40px;
        }

            #main-menu ul li.device a {
                display: block;
                margin: 0;
                padding: 0;
            }

            #main-menu ul li.device a:hover {
                border: none;
            }

    .twitter-container,
    .facebook-container {
        display: none;
    }

    .column-right {
        float: left;
        width: 100% !important;
        padding: 0 !important;
    }

    .social-block {
        float: left;
    }

    .column-right div#newsletter-form {
        clear: left;
        float: left;
        width: 100%;
    }

        .column-right div#newsletter-form .newsletter-header {
            padding-right: .3em;
        }

    .main-column.left,
    .main-column.central,
    #article-detail,
    .main-column {
        width: 100%;
        margin: 0 !important;
    }

    #article-detail ul.gallery,
    #article-detail ul.gallery li,
    #article-detail ul.gallery li div {
        display: block;
        width: 100%;
        overflow: hidden;
    }

    #article-detail ul.gallery li a img {
        width: 100%;
    }

        #credits div.c-right p span.guime {
            float: left;
        }

        #credits div.c-right p span.welvisolutions {
            float: left;
            clear: left;
        }


    .super div.highlights {
        width: 100% !important;
        margin: 0 auto;
        padding: 0 0 1em 0;
        display: block;
        overflow: hidden;
        height: auto !important;
    }

        .super div.highlights ul li img {
            width: 99% !important;
        }

        .super div.highlights li h2 {
            font-size: 1.8em;
        }

        .super div.highlights li p {
            font-size: 1.4em;
        }

        .super div.highlights li div.text-content {
            position: inherit;
            width: 95%;
            min-height: 15em;
        }

    #showcase {
        width: 99%;
        margin-left: .5%;
    }

    #showcase .showcase-slide,
    .showcase-content {
        background-color: #444444;
        margin-bottom: 2em;
        width: 100%;
        overflow: hidden;
        float: left;
        clear: left;
    }

    .showcase-content-container,
    .showcase-content-wrapper,
    .article-content {
        width: 100% !important;
        display: block !important;
    }

    .showcase-content-wrapper .article-content .article-text {
        float: left;
        clear: left;
        width: 90% !important;
        margin: 0 0 0 4% !important;
    }

    .showcase-content-wrapper .article-content img,
    .showcase-content-wrapper .article-content a {
        border: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .showcase-content-wrapper .article-content img {
        border: 1px solid red;
    }

    .showcase-content-wrapper .showcase-thumbnail {
        display: none;
    }

    #credits div,
    #credits div.c-right {
        float: left !important;
        clear: left;
        width: 100% !important;
        text-align: center;
    }

    #credits div.c-right p {
        float: none;
        width: 100%;
    }

    #credits div.c-right p span.guime,
    #credits div.c-right p span.welvisolutions {
        float: none;
    }

    .column-right div#banner-lateral {
        margin: 0 auto;
        clear: both; 
        float: none;
    }

    .column-right div.extra-lateral-banner {
        text-align: center;
    }

        .column-right div#banner-lateral a,
        .column-right div.extra-lateral-banner a {
            display: inline-block;
        }
}

@media screen and (max-width: 400px) {
    h1 img, p.h1 img {
        width: 300px;
    }

    

    #credits div.c-right p {
        float: left !important;
        width: 90% !important;
    }

        #credits div.c-right p span.welvisolutions {
            clear: none;
            margin-left: .5em;
        }

        #credits div.c-left p.advertise {
            font-size: 1.5em;
        }

        #credits div.c-left p.phone {
            font-size: 2.1em;
        }

        #credits div.c-left p.email {
            font-size: 1.3em;
        }
}

@media only screen and (max-device-width : 840px) {

    #header #banner-header {
        height: auto;
        overflow: hidden;
    }

    .super div.highlights li div.text-content {
        min-height: 18em;
    }

}

@media only screen and (max-device-width : 480px) {

    .super div.highlights li div.text-content {
        min-height: 18em;
    }

}