/* if viewport is 340px or less -- small mobile devices*/
@media only screen and (max-width: 340px){
    .header_area .main-menu .navbar,
    .header_area .main-menu .navbar-brand,
    .header_area .main-menu .nav-item .nav-link,
    .header_area .main-menu .navbar-nav .active,
    .header_area .main-menu .navbar-nav a:hover,
    .site-main .about-area,
    .site-main .brand-area,
    .site-main .services-area .services-title,
    .site-main .services-area .services-list,
    .site-main .recents-area,
    .site-main .recents-area .button-group,
    .site-main .recents-area .element-item,
    .site-main .reference-area .about-title p 
    {
        padding: 2%;
        margin: 0%;
    }

    .site-main .site-banner .site-buttons{
        margin: 0rem 1.8rem;
    }

    .site-main .site-banner .button{
        font-size: 20px;
        font-weight: 500;
    }

    .site-main .about-area .about-title h2{
        margin: 0rem 2rem;
        text-align: center;
    }

    .site-main .about-area .about-title .paragraph{
        margin: 0rem 2.2rem;
        text-align: center;
    }

    .site-main .about-area .button{
        margin: 0rem -.3rem;
    }

    .site-main .site-banner .site-title h1{
        font-size: 48px;
    }

    .site-main .reference-area .about-title h1{
        font-size: 32px;
    }

    .site-main .site-banner .site-title h4,
    .site-main .about-area .paragraph p,
    .site-main .services-area .services-title,
    .site-main .reference-area .about-title p{
        font-size: 20px;
    }

    .site-main .site-banner .banner-image{
        width: 200px;
        height: 200px;
    }

    .site-main .about-area .about-image{
        width: 200px;
        height: 200px;
    }

    .site-main .brand-area .experience-area .years-area,
    .site-main .brand-area .experience-area .call-area
    {
        padding:0%;
        padding-left: 0%;
    }

    .site-main .brand-area .experience-area .bg-panel{
        margin-left: 220px;
    }

    .site-main .services-area .services{
        padding: 0%;
        margin: 2rem -1.2rem;
    }

    .site-main .recents-area .project-title h1{
        margin: 0rem 2.2rem;
        text-align: center;
        font-size: 32px;
    }

    .site-main .recents-area .button-group{
        text-align: center;
        margin-left: -2px;
    }

    .site-main .recents-area .element-item{
        margin: 0rem 2.2rem;
    }

    .site-main .about-area .about-video{
        max-width: 200px;
    }
}



/* if viewport is 792px or less -- most mobile devices*/
@media only screen and (max-width: 792px){
    .header_area .main-menu .navbar,
    .header_area .main-menu .navbar-brand,
    .header_area .main-menu .nav-item .nav-link,
    .header_area .main-menu .navbar-nav .active,
    .header_area .main-menu .navbar-nav a:hover,
    .site-main .about-area,
    .site-main .brand-area,
    .site-main .services-area .services-title,
    .site-main .services-area .services-list,
    .site-main .recents-area,
    .site-main .recents-area .button-group,
    .site-main .recents-area .element-item,
    .site-main .reference-area .about-title p 
    {
        padding: 6%;
        margin: 0%;
    }

    .site-main .site-banner .site-buttons{
        margin: 0rem 1.8rem;
    }

    .site-main .site-banner .button{
        font-size: 20px;
        font-weight: 500;
    }

    .site-main .about-area .about-title h2{
        margin: 0rem 0rem;
        text-align: center;
    }

    .site-main .about-area .about-title .paragraph{
        margin: 0rem 2.2rem;
        text-align: center;
    }

    .site-main .about-area .button{
        margin: 0rem -.3rem;
    }

    .site-main .site-banner .site-title h1{
        font-size: 48px;
    }

    .site-main .reference-area .about-title h1{
        font-size: 32px;
    }

    .site-main .site-banner .site-title h4,
    .site-main .about-area .paragraph p,
    .site-main .services-area .services-title,
    .site-main .reference-area .about-title p{
        font-size: 20px;
    }

    .site-main .site-banner .banner-image{
        width: 300px;
        height: 300px;
    }

    .site-main .about-area .about-image{
        width: 300px;
        height: 300px;
    }

    .site-main .brand-area .experience-area .years-area,
    .site-main .brand-area .experience-area .call-area
    {
        padding:0%;
        padding-left: 0%;
    }

    .site-main .brand-area .experience-area .bg-panel{
        margin-left: 220px;
    }

    .site-main .services-area .services{
        padding: 0%;
        margin: 2rem -1.2rem;
    }

    .site-main .recents-area .project-title h1{
        margin: 0rem 2.2rem;
        text-align: center;
        font-size: 32px;
    }

    .site-main .recents-area .button-group{
        text-align: center;
        margin-left: -2px;
    }

    .site-main .recents-area .element-item{
        margin: 0rem 2.2rem;
    }

    .site-main .about-area .about-video{
        max-width: 450px;
    }

}