/*
Responsive Css
*/
/*============================================================
	For large Desktop
==============================================================*/

@media (min-width: 1920px) {}
/*============================================================ 
	For Small Desktop
==============================================================*/

@media (min-width: 980px) and (max-width: 1150px) {


    /*============================================================
	HOME PAGE    
==============================================================*/
    .navbar-nav.navbar-right:last-child {
        margin-right: 0px;
    }
    .navbar-nav > li > a {
        font-size: 14px;
    }
    .view .customer_sevice_box-content span {
        font-size: 13px;
        padding-left: 0px;
        padding-right: 0px;
    }
    .view-fifth p {
        margin-top: -20px;
    }
    .view-fifth a.info {
        padding-top: 0px;
        padding-bottom: 0px;
        font-size: 13px;
    }
    .price {
        padding-left: 0;
    }
    .price .single_price_active {
        width: 366px;
        max-width: 366px;
    }
    .price .single_price {
        width: 300px;
    }
    .single_price .price_header h5 {
        font-size: 18px;
    }
    .price-btn a i {
        top: 88%;
    }
    #quote-carousel .carousel-indicators {
        top: 160px;
    }
    .mask ul li {
        margin-right: 2px;
    }
    .mask ul {
        top: 40%;
    }
    .single-client img {
        width: 148px !important;
        margin-left: 13px;
    }
    .owl-nav > div.owl-prev {
        left: 3px;
    }
    .owl-nav > div.owl-next {
        right: 3px;
    }
    .newslatter-content h2 {
        font-size: 24px;
    }
    .marketplace-content h2 {
        font-size: 24px;
    }
    ul.memberLst li {
        width: 92px;
    }
    /*---------------------------------------
  BLOG PAGE
-----------------------------------------*/
     
	.tab-excerpt {
        margin-right: 0px;
    }
}
/*============================================================
	Tablet (Portrait) Design for a width of 768px
==============================================================*/

@media (min-width: 768px) and (max-width: 979px) {
    /*============================================================
	HOME PAGE STYLE
==============================================================*/
    .navbar-default .navbar-nav > li > a {
        font-size: 12px;
        padding-left: 6px;
    }
    .navbar-default .navbar-brand {
        font-size: 18px;
    }
    .margin-bottom {margin-bottom:60px;}
    .single-fact p {
        font-size: 20px;
    }
	.og-expander h3 {
        font-size: 18px;
    }
    .og-expander p {
        font-size: 13px;
    }
    .og-expander a {
        font-size: 12px;
    }
    .price .single_price:first-child {
        border-right: 1px solid #ddd;
    }
    .price .single_price:last-child {
        border-left: 1px solid #DDD;
    }
    #quote-carousel .carousel-indicators {
        top: 189px;
    }
	.mask ul {
    top: 50%;
    }
    .thumbnail>img {
        width: 100%;
    }
    #newslatters {
        background-image: none;/* you can background-image:block so, your image will show*/
    }
    
    
    /*---------------------------------------
  BLOG PAGE STYLE 
-----------------------------------------*/
    
    .tab-excerpt {
        margin-right: 420px;
    }
}
/*============================================================
	Mobile (Portrait) Design for a width of 320px
==============================================================*/

@media only screen and (max-width: 320px){
    /*============================================================
	HOME PAGE STYLE
==============================================================*/
    .spinner-img h1 {
        font-size: 20px;
    }
    header.header,
    .sticky-wrapper {
        padding: 0px;
    }
    .carousel-control {
        width: 126px;
    }
    .text-carousel .carousel-inner .item .hero {
        left: 41%;
        top: 50%;
    }
    .text-carousel .carousel-inner .item .hero h2 {
        font-size: 36px;
    }
    .text-carousel .carousel-inner .item .hero h1 {
        font-size: 36px;
    }
    .text-carousel .carousel-inner .item .hero p {
        font-size: 15px;
    }
    .page-title h2 {
        font-size: 21px;
    }
    .page-title h2::after {
        top: 60px;
    }
    .promo-content h2 {
        font-size: 20px;
    }
    .promo-bg {
        background: none; /* you can background:block so, your image will show*/
        background-color: #333; /* you can change the background color */
    }
	.margin-bottom {margin-bottom:60px;}
    .view-fifth .mask {
    top: -16px;
	}
    .og-grid li {
        margin-bottom: 20px;
    }
	.price {
    padding-left:5px; 
    }
    .price .single_price:first-child {
        border-right: 1px solid #ddd;
    }
    .price .single_price:last-child {
        border-left: 1px solid #DDD;
    }
    .price .single_price {
    width: 271px;
    height: 613px;
    }
    .price .single_price_active {
        width: 299px;
        height: 591px;
    }
    .price div.price_body_active {
        margin-left: 72px;
    }
    .price-btn a i {
        top: 89%;
    }
    .price-btn-active a i {
        top: 84%;
    }
    .single_price .price_header h5 {
        font-size: 17px;
    }
    .single_price_active .price_header h5 {
        font-size: 17px;
    }
    .price .price_header {
        margin-top: 79px;
    }
    .single_price_active .price_header h3 {
        margin-left: 43px;
    }
    .single_price .price_header h3 {
        margin-left: 34px;
    }
    .page-title-background-image h2 {
        font-size: 18px;
    }
    .page-title-background-image h2::after {
        top: 64px;
    }
    .item blockquote {
        margin-top: -15px;
    }
    #quote-carousel .carousel-indicators {
        top: 290px
    }
    .thumbnail>img {
        width: 100%;
    }
    .single-client img {
        margin-left: 61px;
    }
    #newslatters {
        background-image: none;/* you can background-image:block so, your image will show*/
    }
    .footer-social-icon > ul > li {
        margin-bottom: 10px;
        margin-right: 20px;
    }
    /*---------------------------------------
  BLOG PAGE PAGE    
-----------------------------------------*/
    .tab-excerpt {
    margin-right: -9px;
    }
}
   

   /*============================================================
	Mobile (Portrait) Design for a width of 320px
==============================================================*/

@media only screen and (min-width: 320px) and (max-width: 479px) {

    /*============================================================
	HOME PAGE STYLE
==============================================================*/
   
    .spinner-img h1 {
        font-size: 20px;
    }
    header.header,
    .sticky-wrapper {
        padding: 0px;
    }
    .carousel-control {
        width: 126px;
    }
    .text-carousel .carousel-inner .item .hero {
        left: 41%;
        top: 50%;
    }
    .text-carousel .carousel-inner .item .hero h2 {
        font-size: 36px;
    }
    .text-carousel .carousel-inner .item .hero h1 {
        font-size: 36px;
    }
    .text-carousel .carousel-inner .item .hero p {
        font-size: 15px;
    }
    .page-title h2 {
        font-size: 21px;
    }
    .page-title h2::after {
        top: 60px;
    }
    .promo-content h2 {
        font-size: 20px;
    }
    .promo-bg {
        background: none; /* you can background:block so, your image will show*/
        background-color: #333; /* you can change the background color */
    }
	.margin-bottom {margin-bottom:60px;}
    
    .og-grid li {
        margin-bottom: 20px;
    }
    .price {
    padding-left:5px; 
    }
    .price .single_price:first-child {
        border-right: 1px solid #ddd;
    }
    .price .single_price:last-child {
        border-left: 1px solid #DDD;
    }
    .price .single_price {
    width: 290px;
    height: 540px;
    }
    .price .single_price_active {
        width: 300px;
        height: 591px;
    }
    .price div.price_body_active {
        margin-left: 72px;
    }
    .price-btn a i {
        top: 89%;
    }
    .price-btn-active a i {
        top: 84%;
    }
    .single_price .price_header h5 {
        font-size: 17px;
    }
    .single_price_active .price_header h5 {
        font-size: 17px;
    }
    .price .price_header {
        margin-top: 79px;
    }
    .single_price_active .price_header h3 {
        margin-left: 43px;
    }
    .single_price .price_header h3 {
        margin-left: 34px;
    }
    .page-title-background-image h2 {
        font-size: 18px;
    }
    .page-title-background-image h2::after {
        top: 64px;
    }
    .item blockquote {
        margin-top: -15px;
    }
    #quote-carousel .carousel-indicators {
        top: 290px
    }
    .thumbnail>img {
        width: 100%;
    }
    .single-client img {
        margin-left: 61px;
    }
    #newslatters {
        background-image: none;/* you can background-image:block so, your image will show*/
    }
    .footer-social-icon > ul > li {
        margin-bottom: 10px;
        margin-right: 20px;
    }
    /*---------------------------------------
  BLOG PAGE PAGE    
-----------------------------------------*/
    
    
    .tab-excerpt {
        margin-right: 10px;
    } 
}
@media only screen and (min-width: 375px) and (max-width: 667px) {
    /*============================================================
	HOME PAGE STYLE
==============================================================*/
    .spinner-img h1 {
        font-size: 20px;
    }
    header.header,
    .sticky-wrapper {
        padding: 0px;
    }
    .carousel-control {
        width: 126px;
    }
    .text-carousel .carousel-inner .item .hero {
        left: 35%;
        top: 50%;
    }
    .text-carousel .carousel-inner .item .hero h2 {
        font-size: 36px;
    }
    .text-carousel .carousel-inner .item .hero h1 {
        font-size: 36px;
    }
    .text-carousel .carousel-inner .item .hero p {
        font-size: 20px;
    }
    .page-title h2::after {
        top: 60px;
    }
    .promo-bg {
        background: none; /* you can background:block so, your image will show*/
        background-color: #333; /* you can change the background color */
    }
    .promo-content h2 {
        font-size: 20px;
    }
	.margin-bottom {margin-bottom:60px;}
    .og-grid li {
        margin-bottom: 20px;
    }
    .price .single_price:first-child {
        border-right: 1px solid #ddd;
    }
    .price .single_price:last-child {
        border-left: 1px solid #DDD;
    }
    .price-btn a i {
        top: 89%;
    }
    .price-btn-active a i {
        top: 87%;
    }
    .single_price .price_header h5 {
        font-size: 19px;
    }
    .single_price_active .price_header h5 {
        font-size: 19px;
    }
    .price .price_header {
        margin-top: 79px;
    }
    .single_price_active .price_header h3 {
        margin-left: 49px;
    }
    .page-title-background-image h2::after {
        top: 64px;
    }
    .item blockquote {
        margin-top: -15px;
    }
    #quote-carousel .carousel-indicators {
        top: 244px;
    }
    .thumbnail>img {
        width: 100%;
    }
    .single-client img {
        margin-left: 79px;
    }
    #newslatters {
        background-image: none;/* you can background-image:block so, your image will show*/
    }
    .footer-social-icon > ul > li {
        margin-bottom: 10px;
        margin-right: 20px;
    }
    /*---------------------------------------
  BLOG PAGE PAGE
-----------------------------------------*/
    
    .tab-excerpt {
        margin-right: 62px;
    }
}
/*============================================================
	Mobile (Landscape) Design for a width of 480px
==============================================================*/

@media only screen and (min-width: 480px) and (max-width: 767px) {
    /*============================================================
	HOME PAGE
==============================================================*/
    header.header,
    .sticky-wrapper {
        padding: 0px;
    }
    .text-carousel .carousel-inner .item .hero {
        left: 35%;
    }
    .text-carousel .carousel-inner .item .hero h1 {
        font-size: 42px;
    }
    .text-carousel .carousel-inner .item .hero h2 {
        font-size: 42px;
    }
    .text-carousel .carousel-inner .item .hero p {
        font-size: 14px;
        
     }
    .promo-bg {
        background: none; /* you can background:block so, your image will show*/
        background-color: #333; /* you can change the background color */
    }
    .margin-bottom {margin-bottom:60px;}
	.og-expander h3 {
        font-size: 18px;
    }
    .og-expander p {
        font-size: 13px;
    }
    .og-expander a {
        font-size: 12px;
    }
    .price .single_price:first-child {
        border-right: 1px solid #ddd;
    }
    .price .single_price:last-child {
        border-left: 1px solid #DDD;
    }
    #quote-carousel .carousel-indicators {
        top: 155px;
    }
    .mask ul {
    top: 50%;
    }
    .thumbnail>img {
        width: 100%;
    }
    .home-page-blog-slider img {
        width: 100%
    }
    #newslatters {
        background-image: none;/* you can background-image:block so, your image will show*/
    }
   
/*---------------------------------------
  BLOG PAGE PAGE    
-----------------------------------------*/
    
    .tab-excerpt {
        float: none;
        margin-right: 0px;
        margin-left: 150px;
    }
}