/** MOBILE **/

@media only screen and (max-width: 360px) {
    
    /** HEADER **/
    header { padding:0px 15px; }
    
    .header-main { height:60px; }

    .header-logo { padding:0px 0px; }
    .header-menu { padding:0px 0px; }

    .header-menu-close { position:absolute; width:24px; height:24px; right:15px; top:18px; }

    .page-head-wrapper h1 { font-size: 28px; }
    .page-head-wrapper h4 { font-size: 15px; }

    /** SLIDER **/

    .slider-item-content { padding:0px 30px; }
    .slider-item-content-title h1 { font-size:40px; }

    .slider-number { display:none; padding-left:15px; }
    .slider-social { display:none; padding-right:15px; }

    .owl-dots button {  width:25px; height:16px; margin:0px 2px; outline: none; }

    .owl-dots { line-height: 60px; }
    .small-carousel { padding:60px 30px; }

    /** MASONRY **/

    .masonry-item { padding:30px 15px; }
    .masonry-item-content { position:relative; padding:30px 30px; }
    .masonry-item-content p { font-size:12px; }
    .masonry-item-title h2 { font-size:35px; }

    .masonry-item-wrapper:hover .masonry-item-image { opacity:1; }

    .no-padding .masonry-item { padding:30px 15px !important; }
    .no-padding .masonry-item-content { position:relative; padding:30px 30px !important; }

    /** BUSINESS **/
    .business { margin:25px 0px; }
    
    .business-head { padding:25px 15px; }
    .business-head h2 { font-size:28px; }

    .business-wrapper { padding:0px 15px; }
    .business-item { margin-bottom:30px; }

    /** CLIENTS **/
    .clients { margin:25px 0px; }

    .clients-head { padding:25px 15px; }
    .clients-head h2 { font-size:28px; }

    .clients-wrapper { padding:0px 15px; }
    .clients-item { margin-bottom:30px; }

    /** TOP ITEM **/
    .top-item-title h1 { font-size:40px; }

    /** WORK **/
    .work-image { padding:30px 30px; }
    .work-content { padding:100px 0px 30px 0px; }

    /** CONTACT **/
    .contact-detail-item { margin-bottom:15px; }
    
}

@media only screen and (max-width: 480px) {

    /** HEADER **/
    header { padding:0px 30px; }
    
    .header-main { height:60px; }

    .header-logo { padding:0px 0px; }
    .header-menu { padding:0px 0px; }

    .header-menu-close { position:absolute; width:24px; height:24px; right:30px; top:18px; }

    /** HOME **/
    .page-head { }

    .page-head-wrapper { padding:100px 15px 0px 15px; }
    .page-head-wrapper h1 { font-size: 35px; }
    .page-head-wrapper h4 { font-size: 18px; }

    .page-head-wrapper hr { margin:50px auto; }

    .page-head-info { margin:25px 0px; }
    .page-head-social { margin:25px 0px; }

    /** SLIDER **/

    .slider-item-content { padding:0px 50px; }
    .slider-item-content-title h1 { font-size:50px; }

    .slider-number { display:none; padding-left:30px; }
    .slider-social { display:none; padding-right:30px; }

    .owl-dots button {  width:25px; height:16px; margin:0px 2px; outline: none; }

    .owl-dots { line-height: 60px; }
    .small-carousel { padding:60px 30px; }

    /** MASONRY **/

    .masonry-item { padding:30px 15px; }
    .masonry-item-content { position:relative; padding:30px 30px; }
    .masonry-item-content p { font-size:12px; }
    .masonry-item-title h2 { font-size:35px; }

    .masonry-item-wrapper:hover .masonry-item-image { opacity:1; }

    .no-padding .masonry-item { padding:30px 15px !important; }
    .no-padding .masonry-item-content { position:relative; padding:30px 30px !important; }

    /** BUSINESS **/
    .business { margin:25px 0px; }
    
    .business-head { padding:25px 15px; }
    .business-head h2 { font-size:28px; }

    .business-wrapper { padding:0px 15px; }
    .business-item { margin-bottom:30px; }

    /** CLIENTS **/
    .clients { margin:25px 0px; }

    .clients-head { padding:25px 15px; }
    .clients-head h2 { font-size:28px; }

    .clients-wrapper { padding:0px 15px; }
    .clients-item { margin-bottom:30px; }

    /** TOP ITEM **/
    .top-item-title h1 { font-size:40px; }

    /** WORK **/
    .work-image { padding:30px 30px; }
    .work-content { padding:100px 0px 30px 0px; }

    /** CONTACT **/
    .contact-detail-item { margin-bottom:15px; }

}

/** TABLET **/

@media only screen and (min-width:480px) and (max-width: 768px) {

    /** HEADER **/
    header { padding:0px 30px; }
    
    .header-main { height:60px; }

    .header-logo { padding:0px 0px; }
    .header-menu { padding:0px 0px; }

    .header-menu-close { position:absolute; width:24px; height:24px; right:30px; top:18px; }

    /** HOME **/
    .page-head { }

    .page-head-wrapper { padding:100px 0px 0px 0px; }
    .page-head-wrapper h1 { font-size: 35px; }
    .page-head-wrapper h4 { font-size: 18px; }

    .page-head-wrapper hr { margin:50px auto; }

    .page-head-info { margin:25px 0px; }
    .page-head-social { margin:25px 0px; }

    /** SLIDER **/
    .slider-number { padding-left:30px; }
    .slider-social { padding-right:30px; }

    .owl-dots button {  width:25px; height:16px; margin:0px 2px; outline: none; }

    .small-carousel { padding:60px 30px; }

    /** MASONRY **/

    .masonry { padding:0px 0px; }
    .masonry-item { padding:15px 15px; }
    .masonry-item-content { position:relative; padding:30px 30px; }
    .masonry-item-content p { font-size:12px; }
    .masonry-item-title h2 { font-size:35px; }

    .masonry-item-wrapper:hover .masonry-item-image { opacity:1; }

    /** BUSINESS **/
    .business { margin:25px auto; }
    
    .business-head { padding:25px 15px; }
    .business-head h2 { font-size:28px; }

    .business-wrapper { padding:0px 15px; }
    .business-item { margin-bottom:30px; }

    /** CLIENTS **/

    .clients { margin:25px auto; }

    .clients-head { padding:25px 15px; }
    .clients-head h2 { font-size:28px; }

    .clients-wrapper { padding:0px 15px; }
    .clients-item { margin-bottom:30px; }

    /** TOP ITEM **/
    .top-item-title h1 { font-size:60px; }

    /** WORK **/
    .work-image { padding:15px 15px; }
    .work-content { padding:100px 0px 30px 0px; }

}


/** DESKTOP **/

@media only screen and (min-width:768px) and (max-width:1200px) {

    .container { max-width:960px !important; }

    /** HEADER **/
    header { padding:0px 30px; }
    
    .header-main { height:60px; }

    .header-logo { padding:0px 0px; }
    .header-menu { padding:0px 0px; }

    .header-menu-close { position:absolute; width:24px; height:24px; right:30px; top:18px; }

    /** HOME **/
    .page-head { }

    .page-head-wrapper { padding:100px 15px 0px 15px; }
    .page-head-wrapper h1 { font-size: 35px; }
    .page-head-wrapper h4 { font-size: 18px; }

    .page-head-wrapper hr { margin:50px auto; }

    .page-head-info { margin:25px 0px; padding:0px 30px; }
    .page-head-social { margin:25px 0px; }

    /** SLIDER **/
    .slider-number { padding-left:30px; }
    .slider-social { padding-right:30px; }

    .owl-dots button {  width:25px; height:16px; margin:0px 2px; outline: none; }

    .small-carousel { padding:60px 30px; }

    /** MASONRY **/
    .masonry { padding:0px 0px; }
    .masonry-item { padding:15px 15px; }
    .masonry-item-content { position:relative; padding:30px 30px; }
    .masonry-item-content p { font-size:12px; }
    .masonry-item-title h2 { font-size:35px; }

    .masonry-item-wrapper:hover .masonry-item-image { opacity:1; }

    .no-padding .masonry-item-content { position:absolute !important; bottom:0px; }

    /** BUSINESS **/
    .business { margin:25px 0px; }
    
    .business-head { padding:60px 15px; }
    .business-head h2 { font-size:28px; }

    .business-wrapper { padding:0px 15px; }
    .business-item { margin-bottom:30px; }

    /** CLIENTS **/

    .clients { margin:25px 0px; }

    .clients-head { padding:60px 15px; }
    .clients-head h2 { font-size:28px; }

    .clients-wrapper { padding:0px 15px; }
    .clients-item { margin-bottom:30px; }

}


/** DESKTOP **/

@media only screen and (min-width:1200px) and (max-width:1600px) {

    .small-carousel { padding:90px 90px; }

}