/* Smartphones (portrait and landscape) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /* Styles */
    body { background-image: none; }

    .logo { position: relative; left: inherit; top: inherit; transform: none; width: 231px; margin: 0 auto; }

    .contacts {
        position: relative;
        width: 100%;
        left: inherit;
        top: inherit;
        transform: none;
        margin: 60px auto;
        text-align: center;
    }

    .contacts p { width: 90%; text-align: center; margin: 0 auto; }

    .workshop {
        background: #5c2316;
        width: 100%;
        left: 0; right: 0;
        height: 100px;
    }

    .workshop div.content {
        position: relative;
        transform: none;
        width: 80%;
        margin: 10px auto;
        top: inherit; left: inherit; right: inherit; bottom: inherit;
    }

    .contacts p span.sep {
        width: 100%;
        display: block;
        color: white;
        line-height: 0;
    }

    .contacts p span.sep:nth-child(3) { display: none; }
}

/* Smartphones (landscape) */
@media only screen and (min-device-width: 480px)
and (max-device-width: 640px)
and (orientation: landscape)  {
    /* Styles */


}

/* Smartphones (portrait) */
@media only screen and (max-width : 320px) {
    /* Styles */

}

/* iPads (portrait and landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    /* Styles */

}

/* iPads (landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    /* Styles */
}

/* iPads (portrait) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    /* Styles */

}



/* Desktops and laptops */
@media only screen and (min-width : 1224px) {
    /* Styles */
}

/* Large screens */
@media only screen and (min-width : 1824px) {
    /* Styles */

    #element_7 { min-height: 240px; }
}

/* iPhone 4. Comma can be used to apply same rules to multiple media queries. */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */

}

/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {

}

/*iPhone 6 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {

}

/*iPhone 6+ Portrait*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {

}

/*iPhone 6+ landscape*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {

}

/*iPhone 6 and iPhone 6+ portrait and landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){
    /* Styles */

}

/*iPhone 6 and iPhone 6+ portrait*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){

}

/*iPhone 6 and iPhone 6+ landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){

}