@media only screen and (min-width: 199px) and (max-width: 470px) {
    /* For Mobile: */
    .col-s-0 {
        width: 3%;
    }

    .col-s-1 {
        width: 8.33%;
    }

    .col-s-2 {
        width: 16.66%;
    }

    .col-s-3 {
        width: 25%;
    }

    .col-s-4 {
        width: 33.33%;
    }

    .col-s-5 {
        width: 41.66%;
    }

    .col-s-6 {
        width: 50%;
    }

    .col-s-7 {
        width: 58.33%;
    }

    .col-s-8 {
        width: 66.66%;
    }

    .col-s-9 {
        width: 75%;
    }

    .col-s-10 {
        width: 83.33%;
    }

    .col-s-11 {
        width: 91.66%;
    }

    .col-s-12 {
        width: 100%;
    }

    html, body {
        background: url(image url) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 100%;
        overflow: hidden;
    }

    h1 {
        font-size: 38px !important;
    }

    h2 {
        font-size: 12px !important;
    }

    h3 {
        font-size: 18px !important;
    }

    h4 {
        font-size: 9px !important;
    }

    p {
        font-size: 12px !important;
    }

    strong {
        font-size: 38px !important;
    }

    .button-call {
        position: absolute;
        padding: 10px;
        color: #fff;
        background-color: #ff6600;
        box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.12);
        -moz-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.12);
        -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.12);
        border-radius: 10px;
        bottom: 22px;
        right: 20px;
        z-index: 1;

    }

    .button {
        font-family: Roboto, sans-serif;
        font-size: 12px !important;
    }

    .counter {
        width: 80px !important;
        margin: 0 !important;
    }

    .counter__heading {
        font-size: 16px !important;
        margin: 0 !important;
    }

    .counter__icon {
        font-size: 25px !important;
    }

    .clientes {
        margin-top: 10px;
        margin-left: 5px;
        margin-right: 5px;
    }

    /* menu responsive
* --------------------------------------- */
    #menu {
        display: none;
    }

    .topnav {
        position: fixed;
        text-align: right;
        top: 20px;
        right: 10%;
        padding: 10px 15px;
        margin: 0;
        background: rgba(255, 255, 255, 0.5);
    }

    .dropdown-content {
        top: 45px;
        overflow: hidden;
    }

    .invisible-on-mobile {
        display: none;
    }

    .slide {
        background-image: url('assets/img/bg/shapes2.svg');

    }
}


@media only screen and (min-width: 471px) and (max-width: 959px) {
    /* For desktop: */
    h1 {
        font-size: 38px !important;
    }

    h2 {
        font-size: 12px !important;
    }

    h3 {
        font-size: 8px !important;
    }

    p {
        font-size: 12px !important;
    }

    strong {
        font-size: 38px !important;
    }

    .col-1 {
        width: 8.33%;
    }

    .col-2 {
        width: 16.66%;
    }

    .col-3 {
        width: 25%;
    }

    .col-4 {
        width: 33.33%;
    }

    .col-5 {
        width: 41.66%;
    }

    .col-6 {
        width: 50%;
    }

    .col-7 {
        width: 58.33%;
    }

    .col-8 {
        width: 66.66%;
    }

    .col-9 {
        width: 75%;
    }

    .col-10 {
        width: 83.33%;
    }

    .col-11 {
        width: 91.66%;
    }

    .col-12 {
        width: 100%;
    }

    .content {
        display: none;
    }

    .button {
        padding: 10px 20px;
        font-size: 1em !important;
    }

    .clientes {
        margin-top: 10px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .counter {
        width: 60px !important;
        margin: 0 !important;
    }

    .counter__heading {
        font-size: 12px !important;
        margin: 0 !important;
    }

    .counter__icon {
        font-size: 25px !important;
    }

    .invisible-on-mobile {
        display: none;
    }

    body {
        -webkit-full-screen

    }

    .slide {
        background-image: url('assets/img/bg/shapes.svg');
        width: 100%
    }

}


@media only screen and (min-width: 960px) {
    /* For desktop: */
    .col-1 {
        width: 8.33%;
    }

    .col-2 {
        width: 16.66%;
    }

    .col-3 {
        width: 25%;
    }

    .col-4 {
        width: 33.33%;
    }

    .col-5 {
        width: 41.66%;
    }

    .col-6 {
        width: 50%;
    }

    .col-7 {
        width: 58.33%;
    }

    .col-8 {
        width: 66.66%;
    }

    .col-9 {
        width: 75%;
    }

    .col-10 {
        width: 83.33%;
    }

    .col-11 {
        width: 91.66%;
    }

    .col-12 {
        width: 100%;
    }

    .content {
        display: none;
    }

    .button {
        padding: 10px 20px;
        font-size: 1em !important;
    }

    .invisible-on-pc {
        display: none;
    }

    .slide {
        background-image: url('assets/img/bg/shapes.svg');
        width: 100%
    }

}