/*==========  Desktop First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
    .menu li {
        display: block;
        background-color: darkslategrey;
        text-align: center;
    }
    .menu li:hover {
        background-color: #fff;
    }
    .menu li a {
        color: black;
    }
    .buttons {
        flex-direction: column;
    }
    .soc_btn {
        height: 80px;
        width: 80px;
        font-size: 50px;
    }
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    .menu li {
        display: block;
        background-color: darkslategrey;
        text-align: center;
    }
    .menu li:hover {
        background-color: #fff;
    }
    .menu li a {
        color: black;
    }
    .navbar-header button {
        display: none;
    }
    header {
        height: 100vh;
    }
    header:after {
        /*background-image: none;*/
    }
    .title_block {
        margin-top: 50vh;
    }
    .works {
        /*margin-top: 100px;*/
    }
    .brand:after {
        background-image: none;
    }
    .p_block img {
        height: 100%;
    }
    .soc_btn {
    	display: block;
    }
    .soc_btn, .fab:before, .soc_btn, .fa:before {
    	margin: 0;
    	padding: 0;
    }
    .soc_btn, .contact_phone p a {
        opacity: 1;
    }
    .brand_block {
        height: 200px;
    }
    .brand_block img {
        width: 150px;
        height: auto;
    }
    .instaimg {
        height: auto;
    }
    .brand_work img {
    	margin: auto;
    }
    .container {
    	width: auto;
    }
    .contacts .buttons a {
    	margin-bottom: 10px;
    }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
    .menu li {
        display: block;
        background-color: darkslategrey;
        text-align: center;
    }
    .menu li:hover {
        background-color: #fff;
    }
    .menu li a {
        color: black;
    }
    .navbar-header button {
        display: none;
    }
    header {
        height: 100vh;
    }
    header:after {
        /*background-image: none;*/
        background-attachment: scroll;
    }
    .title_block {
        margin-top: 50vh;
    }
    .works {
        /*margin-top: 100px;*/
    }
    .brand:after {
        background-image: none;
    }
    .p_block img {
        height: 100%;
    }
    .soc_btn {
        opacity: 1;
        display: block;
    }
    .title_block h1 {
        font-size: 44px;
    }
    .brand_block {
        height: 200px;
    }
    .brand_block img {
        width: 150px;
        height: auto;
    }
    .instaimg {
        height: auto;
    }
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
    .menu li {
        display: block;
        background-color: darkslategrey;
        text-align: center;
    }
    .menu li:hover {
        background-color: #fff;
    }
    .menu li a {
        color: black;
    }
    .navbar-header button {
        display: none;
    }
    header {
        height: 100vh;
    }
    header:after {
        /*background-image: none;*/
        background-attachment: scroll;
    }
    .title_block {
        margin-top: 50vh;
    }
    .works {
        /*margin-top: 100px;*/
    }
    .brand:after {
        background-image: none;
    }
    .p_block img {
        height: 100%;
    }
    .soc_btn {
        opacity: 1;
        display: block;
    }
    .title_block h1 {
        font-size: 32px;
    }
    .title_block p {
        font-size: 20px;
    }
    .brand_block {
        height: 200px;
    }
    .brand_block img {
        width: 150px;
        height: auto;
    }
    .instaimg {
        height: auto;
    }
}


/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}