Current File : /home/obaba/public_html/assets/less/wide-banners.less

.wide-banner {
  overflow: hidden;
    .image{
         img {
            display: block;
            width: 100%;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
         }
     }
     &:hover{
        img{
             -webkit-transform: rotate(-1deg) scale(1.1);
              -moz-transform: rotate(-1deg) scale(1.1);
              -ms-transform: rotate(-1deg) scale(1.1);
              -o-transform: rotate(-1deg) scale(1.1);
              opacity: 0.9;
        }
    }
}

.cnt-strip {
  position: relative;

 .strip {
      position: absolute;
      bottom: 15px;
      width: 100%;
      padding: 8px 30px 5px 30px;
      h1{
        font-size:50px;
        color:#ff4c4c;
        margin: 0;
        text-transform: uppercase;
        font-family: 'BebasNeueBold';
      }
      h2{
        font-size:45px;
        color:#f39c12;
        margin: 0;
        text-transform: uppercase;
        font-family: 'BebasNeueBold';
        .shopping-needs{
            font-family: 'BebasNeueRegular';
            color:#434343;
          }
      }
      h3{
        font-size:30px;
        color:#434343;
        margin: 0;
        text-transform: uppercase;
        font-family: 'BebasNeueRegular';
      }

      h4{
        font-size:20px;
        margin: 0;
        text-transform: uppercase;
        font-family: 'BebasNeueRegular';
      }
      &.strip-text{
            width:60%;        
          
        }
        .red{
          color:#ff7878;
        }
        .black{
          color:#434343;
        }
        .green{
          color:#83c038;
        }
        .white{
          color:#fff;
        }
        .normal-shopping-needs{
          font-size:35px;
          font-family:'Roboto';
        }
    }
    .new-label{
         background: url("../images/label.png") no-repeat scroll right top;
         height: 72px;
        position: absolute;
        left: -1px;
        top: -1px;
        width: 72px;
        z-index: 999;
         .text{
             color: #fff;
            font-family: 'Roboto',sans-serif;
            font-size: 18px;
            font-weight: normal;
            line-height: 22px;
             left: -13px;
            position: absolute;
            text-align: center;
            top: 14px;
             -ms-transform: rotate(-43deg); /* IE 9 */
            -webkit-transform: rotate(-43deg); /* Chrome, Safari, Opera */
            transform: rotate(-43deg);
            width: 100%;
         }
    }
}

.wide-banners{
    margin-top:-10px;
    &.homepage-banner{
      margin-top:30px;
      h4{
        font-size:30px;
        font-family: 'FjallaOneRegular';
      }
      h3{
        font-size:35px;
        font-family: 'FjallaOneRegular';
      }
    }
}

.new-banner{
  margin-top:30px;
  .cnt-strip{
    .strip{
      width:auto;
      padding:0px;
      right:23px;
      h3{
        background:#707070;
        padding:13px 23px 13px 16px;
        line-height:24px;
        font-size:30px;
         font-family: 'FjallaOneRegular';
      }
      h5{
        font-size:16px;
        line-height:30px;
        font-weight:700;
         padding-right:21px;          
           text-transform: uppercase;
           span{
            background: none repeat scroll 0 0 #707070;
            -moz-box-shadow: -1.4em 0 0 #707070,1.4em 0 0 #707070;
            -webkit-box-shadow: -1.4em 0 0 #707070,1.4em 0 0 #707070;
            box-shadow: -1.4em 0 0 #707070,1.4em 0 0 #707070;
              
            padding: 0.6em 0;
           }

      }
    }
  }
}

.new-banner.no-margin{
  margin-top:-10px;
}

 .megamenu-banner{
      margin-top:30px !important;
      h3{
        font-size:30px;
        font-family: 'BebasNeueRegular';
      }
      h2{
        font-size:40px;
         font-family: 'BebasNeueBold';
      }
    }

    .wide-banner-4{
      .cnt-strip{
       .strip{ 
        h1{
          font-size:50px;
          font-family: 'FjallaOneRegular';
        }
        h2{
          font-size:40px;
          font-family: 'FjallaOneRegular';
        }
          h3{
          font-size:30px;
          font-family: 'FjallaOneRegular';
        }
            h4{
          font-size:20px;
          font-family: 'FjallaOneRegular';
        }
        

        p{
          font-size:23px;
          font-family:'Roboto';
          margin-bottom:0px;
        }
      }
    }
  }