/*
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: 13px; 
    }
    .view .customer_sevice_box-content span {
        font-size: 13px;
        
    }
    .view-fifth a.info {
        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: 11px;
        padding-left: 2px;
    }
    .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;
    }
    .fade-carousel .carousel-inner .item .hero {
        left: 41%;
        top: 60%;
    }
    .fade-carousel .carousel-inner .item.active .hero {
        left: 41%;
        top: 60%;
    }
    .fade-carousel .carousel-inner .item .hero h2 {
        font-size: 30px;
    }
    .fade-carousel .carousel-inner .active .hero h2 {
        font-size: 30px;
    }
    .fade-carousel .carousel-inner .item .hero h1 {
        font-size: 36px;
    }
    .fade-carousel .carousel-inner .active .hero h1 {
        font-size: 36px;
    }
    .fade-carousel .carousel-inner .item .hero p {
        font-size: 18px;
    }
    .fade-carousel .carousel-inner .active .hero p {
        font-size: 18px;
    }
    .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: 669px;
    }
    .price .single_price_active {
    width: 277px;
    height: 786px;
    }
    .price div.price_body_active {
        margin-left: 72px;
    }
    .single_price .price_header h5 {
        font-size: 15px;
    }
    .single_price_active .price_header h5 {
        font-size: 15px;
    }
    .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;
    }
    .fade-carousel .carousel-inner .item .hero {
        left: 35%;
        top: 60%;
    }
    .fade-carousel .carousel-inner .item.active .hero {
        left: 35%;
        top: 60%;
    }
    .fade-carousel .carousel-inner .item .hero h2 {
        font-size: 30px;
    }
    .fade-carousel .carousel-inner .active .hero h2 {
        font-size: 30px;
    }
    .fade-carousel .carousel-inner .item .hero h1 {
        font-size: 36px;
    }
    .fade-carousel .carousel-inner .active .hero h1 {
        font-size: 36px;
    }
    .fade-carousel .carousel-inner .item .hero p {
        font-size: 18px;
    }
    .fade-carousel .carousel-inner .active .hero p {
        font-size: 18px;
    }
    .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:610px;
    }
    .price .single_price_active {
       width: 314px;
       height: 621px;
    }
    .price div.price_body_active {
        margin-left: 72px;
    }
    
    .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;
    }
    .fade-carousel .carousel-inner .item .hero {
        left: 35%;
        top: 60%;
    }
    .fade-carousel .carousel-inner .active .hero {
        left: 35%;
        top: 60%;
    }
    .fade-carousel .carousel-inner .item .hero h2 {
        font-size: 36px;
    }
    .fade-carousel .carousel-inner .active .hero h2 {
        font-size: 36px;
    }
    .fade-carousel .carousel-inner .item .hero h1 {
        font-size: 36px;
    }
    .fade-carousel .carousel-inner .active .hero h1 {
        font-size: 36px;
    }
    .fade-carousel .carousel-inner .item .hero p {
        font-size: 20px;
    }
    .fade-carousel .carousel-inner .active .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 .single_price {
    width: 308px;
    height: 622px;
    }
	.price .single_price_active {
    width: 352px;
    height: 615px;
    }
	.single_price .price_header h5 {
        font-size: 18px;
    }
    .single_price_active .price_header h5 {
        font-size: 18px;
    }
    .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;
    }
    .fade-carousel .carousel-inner .item .hero {
        left: 35%;
    }
    .fade-carousel .carousel-inner .item.active .hero {
        left: 35%;
    }
    .fade-carousel .carousel-inner .item .hero h1 {
        font-size: 42px;
    }
    .fade-carousel .carousel-inner .active .hero h1 {
        font-size: 42px;
    }
    .fade-carousel .carousel-inner .item .hero h2 {
        font-size: 42px;
    }
    .fade-carousel .carousel-inner .active .hero h2 {
        font-size: 42px;
    }
    .fade-carousel .carousel-inner .item .hero p {
        font-size: 14px;
    }
    .fade-carousel .carousel-inner .active .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;
    }
}