/* ============================================
   Green Genra - Minimal custom responsive styles
   Works alongside Bootstrap 3.3.7
   ============================================ */
/* ==========================================
   TABLET DEVICES (<= 991px)
   ==========================================*/
@media (max-width: 991px){

.pl-3{padding-left:15px;}
.mt-1{margin-top:0rem;}
.gg-section{
    padding:45px 0;
}

.gg-btn-green {
    padding: 8px 16px;
    font-size: 12px;
    margin-bottom: 10px;
}

.gg-section-title,
.gg-section-title-left{
    font-size:24px;
}

/* ==================== HERO SLIDER ==================== */
.gg-hero-section{
    margin-top:150px;
}

.gg-hero-carousel .item {
    padding: 10px 0px 40px 0px !important;
    background-size: 100% 100% !important;
    background-position: center!important;
    min-height:315px;
}

.gg-hero-carousel h1{
    font-size:26px;
    line-height:32px;
}

.gg-hero-sub{
    font-size:18px;
}

.gg-hero-btns .btn{
    margin-bottom:10px;
}
.gg-hero-btns {
    margin-bottom: 10px;
}
.gg-hero-badges span img {
    vertical-align: middle;
    width: 14px;
    height: auto;
}

.gg-hero-badges .fa {
    margin-right: 2px;
    font-size: 14px;
}

.gg-hero-img{
    margin-top:20px;
}

.gg-hero-badges span{
    font-size:10px;
    padding:5px 10px;
}

.gg-hero-ctrl.left, .gg-hero-ctrl.right{display:none;}

/* ==================== Oil And Grease Trap ==================== */
.gg-section-green {
    background-size: cover !important;
    background-position: center !important;
    padding:30px 0;
}

.gg-info{
    padding:25px 18px;
}

.gg-info-card{
    margin-top:0px;
}

.gg-info-card .gg-info h3, .gg-info-card .gg-info h4 {
    font-size: 18px;
}

.gg-section-green p {
    font-size: 14px!important;
}

.gg-video-title{
    font-size:20px;
    margin-top: 30px;
}
/* ==================== INSTALL CARDS ==================== */
.gg-install-card{
    padding: 15px;
}

.gg-install-card .cb {
    position: absolute;
    bottom: 12px;
    right: 15px;
    text-align: right;
}

.gg-install-card .col-md-3 {
    position: relative;
    bottom: 0px;
}
.gg-install-card h4{
    font-size:14px;
}

.gg-install-card p{
    font-size:11px;
}

.gg-product-card{
    min-height:auto;
}

.gg-product-card img{
    max-height:100px;
}


/* ==================== FIND THE RIGHT SIZE ==================== */
.gg-section-title-left:after {
    left: 4%;
}
.grease-trap-calcultor .calculator {
    padding: 50px 50px 50px 35px;
    margin: 30px 0 20px 0px;
}



/* ==================== CONTACT STRIP ==================== */
.gg-contact-strip{
    text-align:center;
    background-size: cover;
}

.gg-contact-strip h2{
    font-size:24px;
}

.gg-contact-strip h2 {
    margin: 0;
}

.gg-contact-strip h2.second{
    font-size:26px;
}

.gg-contact-block{
    margin-top:30px;
    padding: 10px 10px 0px 10px;
}

.gg-contact-icon img{
    width:45px;
}

.gg-testimonial-body{
    padding:15px;
}

.gg-avatar{
    width:55px;
    height:55px;
}

.gg-testimonial-body h5{
    font-size:16px;
}

.gg-blog-body{
    padding:12px;
}

.gg-blog-body p{
    font-size:11px;
}

.gg-footer-main{
    text-align:center;
}

.gg-footer-title{
    margin-top:20px;
}

.gg-news-form{
    flex-direction:column;
}

.gg-news-form input{
    border-radius:3px;
    margin-bottom:6px;
}

.gg-news-form button{
    border-radius:3px;
    padding:8px;
}

.gg-social{
    justify-content:center;
}

.gg-whatsapp-float{
    width:45px;
    height:45px;
    line-height:45px;
    font-size:22px;
}
}

/* ==========================================
   MOBILE DEVICES (<= 767px)
   ==========================================*/
@media (max-width:767px){

.pl-3{padding-left:15px;}
.mt-1{margin-top:1rem;}
.gg-section{
    padding:30px 0;
}

.gg-btn-green {
    padding: 8px 16px;
    font-size: 12px;
    margin-bottom: 10px;
}

.gg-section-title,
.gg-section-title-left{
    font-size:24px;
}

/* ==================== HERO SLIDER ==================== */
.gg-hero-section{
    margin-top:0px;
}

.gg-hero-carousel .item {
    padding: 10px 0px 40px 0px !important;
    background-size: cover !important;
    background-position: left!important;
}

.gg-hero-carousel h1{
    font-size:26px;
    line-height:32px;
}

.gg-hero-sub{
    font-size:18px;
}

.gg-hero-btns .btn{
    margin-bottom:10px;
}
.gg-hero-btns {
    margin-bottom: 10px;
}
.gg-hero-badges span img {
    vertical-align: middle;
    width: 14px;
    height: auto;
}

.gg-hero-badges .fa {
    margin-right: 2px;
    font-size: 14px;
}

.gg-hero-img{
    margin-top:20px;
}

.gg-hero-badges span{
    font-size:10px;
    padding:5px 10px;
}

.gg-hero-ctrl.left, .gg-hero-ctrl.right{display:none;}

/* ==================== Oil And Grease Trap ==================== */
.gg-section-green {
    background-size: cover !important;
    background-position: center !important;
    padding:30px 0;
}

.gg-info{
    padding:25px 18px;
}

.gg-info-card{
    margin-top:0px;
}

.gg-info-card .gg-info h3, .gg-info-card .gg-info h4 {
    font-size: 18px;
}

.gg-section-green p {
    font-size: 14px!important;
}

.gg-video-title{
    font-size:20px;
    margin-top: 30px;
}
/* ==================== INSTALL CARDS ==================== */
.gg-install-card{
    padding:15px;
}

.gg-install-card h4{
    font-size:14px;
}

.gg-install-card p{
    font-size:11px;
}

.gg-product-card{
    min-height:auto;
}

.gg-product-card img{
    max-height:100px;
}


/* ==================== FIND THE RIGHT SIZE ==================== */
.gg-section-title-left:after {
    left: 7%;
}


/* ==================== CONTACT STRIP ==================== */
.gg-contact-strip{
    text-align:center;
    background-size: cover;
}

.gg-contact-strip h2{
    font-size:24px;
}

.gg-contact-strip h2 {
    margin: 0px 0 0 0;
}

.gg-contact-strip h2.second{
    font-size:26px;
}

.gg-contact-block{
    margin-top:30px;
    padding: 10px 10px 0px 10px;
}

.gg-contact-icon img{
    width:45px;
}

.gg-testimonial-body{
    padding:15px;
}

.gg-avatar{
    width:55px;
    height:55px;
}

.gg-testimonial-body h5{
    font-size:16px;
}

.gg-blog-body{
    padding:12px;
}

.gg-blog-body p{
    font-size:11px;
}

.gg-footer-main{
    text-align:center;
}

.gg-footer-title{
    margin-top:20px;
}

.gg-news-form{
    flex-direction:column;
}

.gg-news-form input{
    border-radius:3px;
    margin-bottom:6px;
}

.gg-news-form button{
    border-radius:3px;
    padding:8px;
}

.gg-social{
    justify-content:center;
}

.gg-whatsapp-float{
    width:45px;
    height:45px;
    line-height:45px;
    font-size:22px;
}

}