/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jul 3, 2019, 12:19:09 PM
    Author     : frontend
*/


/*

> 0px   XS - NO NAME


> 576px SM - small devices



> 768px MD  - medium devices


> 992px  LG    large devices



> 1200px  XL   extra large devices

*/



@media( min-width:576px){

    header{
        position: static;

    }

    .home-section .overflow-hidden {
        margin-top: 0;
    }

    .home-section .home-caption h2{
        font-size: 25px;
    }

    .home-section .info {

        margin-top: 50px;
    }

    .navbar-brand {
        max-width: 20%;
    }

    footer .footer-logo img {
        max-width: 100%;
    }

    footer .footer-logo {
        max-width: 20%;
    }

    .gallery-section {
        margin-top: 0;
    }
}




@media(min-width:768px){




    .blog .blog-title {
        margin-bottom: 100px;
    }

    .blog .row div:nth-of-type(2) .blog-item,
    .blog .row div:nth-of-type(3) .blog-item,
    .blog .row div:nth-of-type(6) .blog-item{
        background-color: rgba(77, 77, 77,0.8) !important;
        color: #fff;


    }
    .blog .row div:nth-of-type(4) .blog-item{
        background-color: #fff !important;
        color: #4d4d4d;
        border: none;
    }

    h2{
        font-size: 30px;
        line-height: 45px;
        letter-spacing: 5px;
    }
}


@media(min-width:992px){



    .navbar-light .navbar-nav .nav-link{
        margin-left: 40px;
    }
    
    .home-section .info {

        box-shadow: 0 0 10px #4d4d4d;
        padding: 20px 50px;
        
    }

    .blog .row div:nth-of-type(2) .blog-item,
    .blog .row div:nth-of-type(4) .blog-item,
    .blog .row div:nth-of-type(6) .blog-item{
        background-color: rgba(77, 77, 77,0.8) !important;
        color: #fff;

    }

    .blog .row div:nth-of-type(3) .blog-item{
        background-color: #fff !important;
        color:#4d4d4d;
        border:none;
    }

    footer .footer-logo {
        max-width: 15%;
    }

    .navbar-brand {
        max-width: 15%;
    }
    
    
}


@media(min-width:1200px){

    .container{
        max-width: 1170px;
    } 



}