@media only screen and (min-width: 1400px) and (max-width: 1800px) {

.services-details .services-details-pic img{ height: 88%;}

	

}	







@media (max-width: 1199px) {

.dScroll{ height:100%;overflow: hidden;}

.nav-toggle {-webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: pointer; height: 2rem; right: .8rem; position: absolute; top: 1.5rem; width: 2rem; z-index: 99999; border-color: transparent; border: none; background: transparent; color: #fff;}

.nav-toggle:hover {opacity: 0.8;}

.nav-toggle .nav-toggle-bar, .nav-toggle .nav-toggle-bar::after, 

.nav-toggle .nav-toggle-bar::before { position: absolute;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-ms-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;background: #fff;content: '';padding: 2px 0;width: 100%;border-radius: 10px;}

.nav-toggle .nav-toggle-bar {margin-top: 0;}

.nav-toggle .nav-toggle-bar::after {margin-top: 12px;width: 60%;left: 0;bottom: 0;}

.nav-toggle .nav-toggle-bar::before {margin-top: -12px;width: 60%;right: 0;top: 0;}

.nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {margin-top: 0;}

.nav-toggle.expanded .nav-toggle-bar { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);}

.nav-toggle.expanded .nav-toggle-bar::after { -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); margin: 5px 0 0 7px;}

.nav-toggle.expanded .nav-toggle-bar::before {-ms-transform: rotate(90deg);-webkit-transform: rotate(90deg);transform: rotate(90deg);margin: -8px 5px 0px 0;}

.bar-collapse { -webkit-transition: left 0.6s ease;-moz-transition: left 0.6s ease;-ms-transition: left 0.6s ease;-o-transition: left 0.6s ease; transition: left 0.6s ease; background: rgb(255 255 255 / 1.0); color: #fff; cursor: pointer; font-weight: 500; height: 100vh; position: fixed; left: -100%; padding: 15px 0; top: 0; width: 75%; z-index: 9999; overflow: hidden; overflow-y: scroll; display: block !important; border-bottom: 1px solid rgb(0 0 0 / 0.15);}

.bar-collapse .header-btn { margin-top: 25px;}

.bar-collapse .header-btn .button { margin-left: 0;}

.bar-collapse.expanded2 li, .bar-collapse.expanded2 li.active { background: transparent; margin: 0; padding: 0px 0; margin-bottom: 2px; border-bottom: 1px solid rgb(0 0 0 / 0.15);}

.bar-collapse.expanded2 li:last-child{ border-bottom: 0 !important;}

.bar-collapse.expanded2 li a:hover { border-bottom: 0px; color: var(--main-color);}

.bar-collapse.expanded2 navbar-nav{ flex-direction: column !important;}

.bar-collapse.expanded2 li a {color: #000 !important;font-size: 14px;font-weight: 400;padding: 15px 10px !important;}

.bar-collapse.expanded2 {-webkit-transition: left 0.6s ease;-moz-transition: left 0.6s ease;-ms-transition: left 0.6s ease;-o-transition: left 0.6s ease;transition: left 0.6s ease;left: 0rem;box-shadow: 0 0px 10px 1px #565656; padding: 30px;}

.main-header .navbar-expand-lg .navbar-nav .nav-item{margin: 0;}

.navbar-expand-lg .navbar-nav {flex-direction: column;width: 100%;}

.main-header .dropdown-menu a{ color: #fff !important;}





}







@media only screen and (max-width: 991px){
.carousel-caption h2 br{ display: none;}	
.bulk-panel	.dnone{ display: block !important;}
.woocommerce-tabs .tabs li{ display: block; padding: 8px 0px; margin: 5px;}	
.woocommerce-product-gallery__wrapper{ margin-bottom: 20px;}	
.nav-btn-one{ width: 200px; margin: 0 auto;}	
.mnone{ display: none !important;}	
.mblock{ display: block !important;}	
.top-header .top-box ul li:first-child{ margin:0 10px 0 0;}
.header-gap{ padding: 0 12px;}
.services-panel-left-text .spl-btn .click-here{ padding: 5px 20px; font-size: 14px;}
.services-panel-left-text .spl-btn .order-now{ padding: 5px 20px; font-size: 14px;}	

.header-bottom{ padding: 5px 0;}

.logo-dextop{ display: none;}

.logo-mobile{ display: inline-block;}

.header-bottom .logo-outer figure{ position: relative; top: 0;}

.header-bottom .logo-outer figure img{ height: 100px; width: 110px !important; }

.banner-panel{ background: url('../images/banner/banner-1.webp') no-repeat; height: auto; background-size: cover;}

.banner-after-one{ padding: 25px 25px 0 25px; margin-top: 0px;}

.services-panel .service-box .morebtn{ bottom: 107px;}

.testimonial-panel{ background: inherit;}

h2{ font-size: 30px !important;}

.top-left{ display: none;}

.contact-panel .cpr{ margin: 0; z-index: 1;}

.footer-col-1 p{ margin: 0;}

.contact-panel{ padding: 0;}

.contact-panel-right{ padding: 30px 0;}

.contact-panel-left{ padding: 30px 15px;}

.faq-panel{ background-size: cover;}

.news-part{ margin: 0 0 20px 0; border-radius: 0 0 10px 10px;}

.bulk-panel-right{ margin-bottom: 30px;}

.packages-panel{ padding: 60px 0 !important;}

.packages-panel-left{ margin-bottom: 30px;}

.meat-table table{ margin:0px 0 2px 0 !important;}

.quality-panel .quality-panel-left .btn-learn-more{ margin: 20px 0;}

.process{ margin-top: 40px;}

.services-panel-left{ width: 100%;}

.services-panel-left-text{ left: 15px; right: 15px; padding: 30px 0;}

.services-panel-left-text h4{ font-size: 14px;}

.services-panel-left-text p{ font-size: 12px;}

.services-panel-left-text ul { margin: 10px 0 10px 20px;}

.services-panel-left-text ul li{ font-size: 12px; padding-bottom: 5px;}

.services-panel-left-text .spl-btn{ margin-top: 15px;}

.services-panel-right{ width: 100%; min-height: 260px;}

.services-panel-right img{ height: 260px;}

.services-panel-right-text{ right: 15px; left: 15px;}

.services-panel-right-text h6{ font-size: 12px;}

.services-panel-right-text h2{ font-size: 20px !important; margin: 10px 0;}

.services-panel-right-text p{ font-size: 12px;}

.services-panel-right-text ul{ margin: 10px 0 10px 20px;}

.services-panel-right-text ul li{ font-size: 12px; padding-bottom: 5px;}

.hero_request_call{ display: none;}

.top-header .top-box .text-end li{ width: auto; height: auto;}

.top-header .top-box ul li{ background: none;}

.nav-btn-one .form-control{ padding: 5px 10px; font-size: 12px;}

.nav-btn-one .nav-search{ top: 5px; right: 10px; font-size: 12px;}

.product-box{ margin-bottom: 35px;}

.purchase-table .btn-purchase{ padding: 12px 10px; border-radius: 10px; width: 110px; font-size: 10px;}

.purchase-table h6{ font-size: 12px;}

.purchase-table tr td{ padding: 8px;}

.banner-right .form-group textarea{ height: 55px;}

.services-panel{ margin: 0 12px;}

.contact-panel .contact-panel-left ul li{ padding: 8px 0;}

.contact-panel .contact-panel-left ul li a{ font-size: 16px;}

.contact-panel-right .form-group .form-control{ font-size: 14px; margin-bottom: 8px;}

.contact-panel-right .form-group textarea{ height: 60px;}

.footer-bottom .copywrite-panel{ text-align: center; display: inline-block;}

.product-gallery{ margin-bottom: 30px;}

.image-list li{ margin: 0 2px;}

.product-details-panel .price-btn{ display: inline-block; margin-top: 10px;}

.pdescription { margin-left: 0;}

.details-btn-part .details-btn{ padding: 10px 30px; height: auto; font-size: 13px;}

.aboutus-part .experience{ display: none;}

.about-panel-left .contact-form{ margin-bottom: 20px;}

.address-panel .contact-part{ background: none; margin-bottom: 20px; display: inline-block; text-align: center; width: 100%;}

.address-panel .contact-part-last{ background: none; margin-bottom: 20px; display: inline-block; text-align: center; width: 100%;}



	

.breadcrumb-wrapper .banner-right{ display: none;}	

.main-header{ background-color: #fff; border-bottom: 1px solid #ccc;}	

  .header-bottom .logo-outer{

    display: block;

    text-align: center;

    padding: 0px;

  }

  .header-bottom .menu-area{

    display: block;

    top: 0px;

  }

  .main-slider .owl-nav{

    display: none;

  }

  .header-bottom .outer-box{

    position: absolute;

    float: none;

    top: 15px;

    right: 5px;

    padding: 0px;

  }

  .main-header .header-top .top-left,

  .main-header .header-top .top-right{

    float: none;

    display: block;

    text-align: center;

  }

  .main-header .header-top .social li,

  .main-header .header-top .top-right li{

    float: none;

    display: inline-block;

  }

  .main-header .header-top li a.upper-btn{

    display: none;

  }

  .main-header .header-top{

    padding-bottom: 15px;

  }

  .main-menu .navigation > li > ul > li{

    padding: 0px 0px;

  }

  .main-menu .navigation > li > ul > li:hover{

    background: #333333;

    border-bottom: 1px solid #333333;

  }

  .main-menu .navigation > li > ul > li,

  .main-menu .navigation > li > ul > li:hover,

  .main-menu .navigation > li > ul > li > ul > li{

    border-bottom: 1px solid rgba(255, 255, 255, 0.1)

  }

  .main-menu .navigation > li > ul > li > ul > li > a{

    color: #ffffff !important;

  }

  

  .fixed-header .sticky-header{

    display: none;

  }

  .header-style-two .main-menu .navbar-header .navbar-toggle .icon-bar{

    background: #222222;

  }

  .header-style-two .search-box.now-visible, 

  .header-style-two .search-box-area .search-box{

    top: 39px;

  }

  .header-style-two .header-top .left-column{

    float: none;

    display: block;

    text-align: center;

    margin-bottom: 10px;

  }

  .header-style-two .header-top .left-column li{

    float: none;

    display: inline-block;

  }

  .header-style-two .header-top .right-column,

  .header-style-two .header-top .right-column ul{

    float: none;

    display: block;

    text-align: center;

  }

  



}





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

.top-header .top-box ul{ text-align: center !important;}	

.header .logo{ top: 0; left: -15px; padding: 8px 0 10px 15px; height: auto;}

.main-header .navbar{ height: auto;}

.header .logo::before{ display: none;}	

.header .logo img{ height: 70px;}

.main-header .dropdown-menu li a{ color: #fff !important;}

.carousel-caption .morebtn{ margin-top: 10px;}

.banner-left h2{ font-size: 25px; line-height: 35px;}

.banner-left p{ font-size: 14px; line-height: 20px; padding: 0;}

.banner-panel .banner-left{ }

.about-panel-right{ margin-bottom: 30px;}

.about-panel-left .experience{right: 3%; bottom: 6%;}

.about-panel-left .experience h4{ font-size: 20px; padding-right: 5px;}

.about-panel-left .experience span{ font-size: 12px;}	

.services-panel .service-box{ margin-bottom: 20px;}	

.service-name .smore{ width: 18%; text-align: center;}

.service-name .stext .tj-icon{ top: -20%; left: -12%;}	

.roofing-materials .tab-content .tab-pane .mate{ position: relative; bottom: 0;}		

.quote-now{ background: inherit; height: auto;}	

.sheading-white .stitle{ font-size: 25px; color: #000;}

.sheading-white .stitle span{ margin-left: 0;}

.sheading-white .stitle:before{ display: none;}	

.sheading-white .stitle:after{ display: none;}	

.testimonials h2{ font-size: 25px; color: #000;}

.tj-icon{ top: 20%; right: 10%;}

.area-we-served{ background-color: #f5f5f5;}	

.area-we-served .sheading{ margin-bottom: 20px;}	

.area-we-served .sheading .sdec{ display: inline-block; margin-top: 20px;}

.area-we-served .nav-pills .nav-link{ width: 100%;}	

.sheading .stitle{ font-size: 25px;}

.sheading .stitle:after{ left: 0; right: 0; margin: 0 auto; bottom: -15px;}	

.area-we-served .tab-content>.tab-pane img{ top: 0; border-radius:0; width: 100%; height: auto; position: relative; border: none;}

.sarea{ padding: 20px; border-radius: 0 0 0 30px;}

.area-we-served .nav-pills .nav-link::before{ top: -1px; background-color: #f5f5f5;}

.banner-panel .banner-right{ display: none;}

.banner-mobile{ display: block; background-color: #002e4a; padding: 15px 0;}

.banner-mobile .banner-left{ margin-bottom: 20px; display: none;}

.banner-mobile .banner-left p{ color: #fff;}

.banner-right .form-group .form-control{ padding: 5px; margin-bottom: 8px; font-size: 14px;}

.banner-right{ margin-left: 0;}	

.roofing-materials .tab-content .marrow{ display: none;}

.roofing-materials .nav-tabs .nav-item{ height: auto;}

.roofing-materials .tab-content .tab-pane img{ height: auto;}

.mobile-banner{ display: block;}

.carousel-indicators{ text-align: center;}

.carousel-caption{ text-align: center;}

.carousel-caption h2{ color: #fff; font-size:22px !important; margin-bottom: 10px;}

.carousel-caption p{ color: #fff; font-size:14px; line-height: 20px;} 

.banner-right .form-group select{ padding: 10px 0px; font-size: 14px;}

.aicon{ display: none;}

.mnone{ display: none;}

.dnone{ display: block;}

.industries-panel{ background-color: #053B64; background-image: none;}

.techno-panel-mid{ display: none;}

.techno-panel-left{ display: inline-block;}

.techno-panel-left .techno-panel-left-text{ width: 65%; display: inline-block; text-align: left; margin: 0 0 0 20px;}

.techno-panel-left .techno-panel-left-pic{ display: inline-block; float: left;}

.industries-panel-left .ipl-panel p{ margin: 0;}

.faq-panel .card .card-header h5 a{ display: flex;}

.faq-panel .card .card-header h5 span{ width: 92%;}

.faq-panel .card .card-header{ padding: 10px;}

.footer-top{ padding: 50px 0;}

.footer-col-1 ul li{ width: 48%;}

.footer-col-1 ul li a .fa{ display: none;}

.footer-bottom{ text-align: center;}

.footer-bottom .flogo{ text-align: center;}

.footer-col-1{ background: none; padding:0 0 30px 0;}

.footer-col-2{ background: none; padding:0 0 30px 0;}

.footer-col-3{ background: none;}

.top-header .top-box ul li{ padding: 0px;}

.carousel-inner { height: 310px;}	

.carousel-inner .carousel-item img { height: 310px;}

.bnone {display: none;}

.breadcrumb-wrapper {padding: 60px 0;}

.carousel-indicators{ bottom: 0px;}

.welcome-text h2{ font-size:25px;}

.welcome-text:after{ height: 80px;}

.heading-text h2{ font-size:25px !important;}

.fwidget .ftitle{padding-bottom: 0; font-weight: 700;}

.offcanvas__close button{ border: none;}

.services-details .services-details-pic{ height: auto; margin-bottom: 20px;}

.ser-area a h4{ font-size: 18px;}

.area-box{ margin-bottom: 40px; min-height: 120px;}

.area-details-pic img{ border-radius: 5px; margin-bottom: 20px;}

.area-details-pic iframe{ border-radius: 5px; margin-top: 20px;}

.service-area a h4{ font-size: 22px;}

.areas-panel{ background-size: cover;}

.partner{ width: 100%;}



.banner-panel img{ display: none;}

.banner-panel .banner-panel-text{ position: relative; top: 25px;}

.areas-panel .lower-mainland{ width: 60%;}





	

}