/************ Ramadan Pattern *************/
.shiftPattern .shiftButtons ul li:hover { transform: scale(1.1); transform-origin: center; }
.shiftPatternClip {display:inline-block;float:right;width:100%;height:460px;margin-bottom:50px}
.shiftPattern { background: #000; position: relative; z-index: 0;}
.shiftPattern .shiftHeader { display: inline-block; width: 100%; height: 60px; float: right; padding: 0 20px; position: relative; z-index: 2; }
.shiftPattern .shiftHeader a { display: inline-block; width: auto; height: 100%; float: right; position: relative;color:#E53B24 }
.shiftPattern .shiftHeader a img { display: inline-block; width: 115px; height: auto; border: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.shiftPattern .shiftHeader a.more { float: left; color: #26ff00; width: auto; height: auto; display: inline-block;  font-size: 16px; line-height: 2.5 }
.shiftPattern .shiftHeader p { color: #E53B24; font-family: AllGenderBold, Arial; overflow: hidden; font-size: 20px; width: auto; float: right; line-height: 70px; }
.shiftPattern .shiftContent { display: inline-block; width: calc(100% - 330px); float: right; height: auto; padding: 20px; position: relative; z-index: 2; }
.shiftPattern .shiftButtons { display: inline-block; width: 100%; float: right }
.shiftPattern .shiftButtons ul li { display: inline-block; float: right; width: calc((100% - 20px) /2); margin-left: 20px; padding: 10px;}
.shiftPattern .shiftButtons ul li:last-child, .shiftPattern .shiftButtons ul li:nth-of-type(2n) { margin-left: 0 }
.shiftPattern .shiftButtons ul li a { display: inline-block; width: 100%; color: #fff;  text-align: center; }
.shiftPattern .shiftButtons ul li a:before { color: #26ff00; line-height: 50px; display: block }
.shiftPattern .shiftButtons ul li a.reviewsbutton:before { content: '!'; font-size: 34px; }
.shiftPattern .shiftButtons ul li a.newsbutton:before { content: 'g';font-size: 28px; }
.shiftPattern .shiftButtons ul li a.reportsbutton:before { content: '.';font-size: 28px; }
.shiftPattern .shiftButtons ul li a.usedCarsbutton:before { content: 'l' ;font-size: 28px;}
.shiftPattern .shiftButtons ul li a.comparebutton:before { content: '{' ;font-size: 40px;}
.shiftPattern .shiftButtons ul li a.specsbutton:before { content: ';';;font-size: 36px; }
.shiftPattern .shiftButtons ul li a img{display:inline-block;height:auto;float:right}
.shiftPattern .shiftButtons ul li a span { color: #fff; font-size: 16px; display: inline-block ;width:100%;line-height:1;position:absolute;left:50%;transform:translateX(-50%);bottom:20px}
.shiftPattern ul li { display: inline-block; position: relative; width: calc((100% - 20px) /2); float: right; margin-left: 20px; margin-bottom: 20px; }
.shiftPattern ul li:nth-of-type(2n) { margin-left: 0 }
.shiftPattern ul li:nth-of-type(5), .shiftPattern ul li:last-child { margin-bottom: 0 }
.shiftPattern ul li .imageCntnr { float: right; display: inline-block; position: relative; overflow: hidden; width: 150px; padding-bottom: calc((150px * 66.6) /100); margin-left: 10px; }
.shiftPattern ul li .imageCntnr img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0 auto; width: 100%; height: 100%; border: none;}
.shiftPattern ul li .desc { float: right; width: calc(100% - 180px); height: auto; cursor: pointer; display: inline-block; }
.shiftPattern ul li .desc p { color: #000;  overflow: hidden; font-size: 16px; line-height: 1.6; max-height: 77px; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; }
.shiftPattern ul li:hover .desc h2 { color: #26ff00 }
.shiftPattern .shiftHeader .poweredBy { display: inline-block; width: 100px; height: 100%; float: left !important; position: relative; margin: 0; padding: 0 }
.shiftPattern .shiftHeader .poweredBy img { display: inline-block; width: 100px; height: auto; border: none; }
/** Shift Search **/
.shiftPattern .shiftSearch { display: inline-block; width: 100%; float: right }
.shiftClipRotate { display: inline-block; float: right; width: 320px; height: 362px; overflow: hidden; padding: 5px 10px; position: relative; z-index: 2;  padding-right: 20px; }
.shiftPattern .clipRotate { display: inline-block; float: right; position: relative; }

.shiftPattern.ramadanSec { background: #F1D8BA; position: relative; z-index: 0 }
.shiftPattern.ramadanSec .shiftButtons ul li { height: 104px; position: relative }
.shiftPattern.ramadanSec .shiftButtons ul li a { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; line-height: 104px; padding: 0 10px; text-align: center }
.shiftPattern.ramadanSec .shiftButtons ul li a:before { color: #fff; }

.shiftPattern.ramadanSec .shiftButtons ul li:first-child{background:#A70069}
.shiftPattern .shiftButtons ul li:first-child a img{width:32px;    margin: 15px calc((100% - 32px) / 2) 0;}

.shiftPattern.ramadanSec .shiftButtons ul li:nth-child(2n){background: #9546AF;}
.shiftPattern .shiftButtons ul li:nth-child(2n) a img{width:48px;    margin: 18px calc((100% - 48px) / 2) 0;}

.shiftPattern.ramadanSec .shiftButtons ul li:nth-child(3n){background: #F19B06;}
.shiftPattern .shiftButtons ul li:nth-child(3n) a img{width:44px;    margin: 15px calc((100% - 44px) / 2) 0;}

.shiftPattern.ramadanSec .shiftButtons ul li:nth-child(4n){background: #3298C9;}
.shiftPattern .shiftButtons ul li:nth-child(4n) a img{width:32px;    margin: 20px calc((100% - 32px) / 2) 0;}

.shiftPattern.ramadanSec .shiftButtons ul li:nth-child(5n){background: #93AD4E;}
.shiftPattern .shiftButtons ul li:nth-child(5n) a img{width:30px;    margin: 15px calc((100% - 30px) / 2) 0;}

.shiftPattern.ramadanSec .shiftButtons ul li:last-child{background: #D22C16;}
.shiftPattern .shiftButtons ul li:last-child a img{width:26px;    margin: 15px calc((100% - 26px) / 2) 0;}

@media screen and (min-width:1023px) and (max-width:1680px) {

    .shiftPattern ul li .desc p{font-size:14px;max-height:68px}
}

@media screen and (min-width:1280px) and (max-width:1359px) {
    .shiftPattern ul li .imageCntnr { width: 130px; padding-bottom: calc((130px * 66.6) /100); }
    .shiftPattern ul li .desc { width: calc(100% - 146px); }
     .shiftPattern ul li { width: calc((100% - 40px) /2); margin-left: 40px }
    .shiftPattern .shiftContent ul li { margin-bottom: 40px }
    .shiftPattern .shiftContent ul li:nth-of-type(5), .shiftPattern .shiftContent ul li:last-child { margin-bottom: 0; }
}

@media screen and (min-width:1152px) and (max-width:1279px) {
    
        .shiftPattern ul li { width: calc((100% - 40px) /2); margin-left: 40px }
         .shiftPatternClip{height:782px}
    .shiftClipRotate { padding: 0 20px; width: 100%; border-right: 0 }
    .shiftPattern .shiftButtons ul li { margin-left: 10px; width: calc((100% - 10px) /2); }
    .shiftPattern .shiftButtons ul li a span { font-size: 12px }
    .shiftPattern .shiftContent { width: 100%; }
    .shiftPattern ul li { margin-bottom: 20px }
     .shiftPattern ul li .imageCntnr { width: 130px; padding-bottom: calc((130px * 66.6) /100); margin-left: 16px; }
    .shiftPattern ul li .desc { width: calc(100% - 146px); }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
         .shiftPatternClip{height:782px}
    .shiftClipRotate { padding: 0 20px; width: 100%; border-right: 0 }
    .shiftPattern .shiftButtons ul li { margin-left: 10px; width: calc((100% - 10px) /2); }
    .shiftPattern .shiftButtons ul li a span { font-size: 12px }
    .shiftPattern .shiftContent { width: 100%; }
      .shiftPattern ul li .imageCntnr { width: 130px; padding-bottom: calc((130px * 66.6) /100); margin-left: 16px; }
    .shiftPattern ul li .desc { width: calc(100% - 146px); }
    .shiftPattern ul li { margin-bottom: 20px }
}

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

    
        .shiftPattern ul li { margin-bottom: 20px }

     .shiftPatternClip{height:782px}
    .shiftClipRotate { padding: 0 20px; width: 100%; border-right: 0 }
    .shiftPattern .shiftButtons ul li { margin-left: 10px;width: calc((100% - 10px) /2);}
    .shiftPattern .shiftButtons ul li a span { font-size: 11px }
    .shiftPattern .shiftContent { width: 100%; }
    .shiftPattern ul li { margin-bottom: 20px }
     .shiftPattern ul li .imageCntnr { width: 130px; padding-bottom: calc((130px * 66.6) /100); margin-left: 16px; }
    .shiftPattern ul li .desc { width: calc(100% - 146px); }
}

@media screen and (min-width: 320px) and (max-width: 767px) {
       .shiftPattern ul li .imageCntnr img { width: 100%; height: auto; top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%) }
          .shiftPattern { background: #000; width: calc(100% - 20px); margin: 0 10px 40px }
    .shiftPattern .shiftHeader { padding: 0 10px; height: 45px }
    .shiftPattern.ramadanSec:after{width: 50px;height:80px;background-size: auto 100%;}
    .shiftPattern .shiftHeader a { padding: 0; width: 85px }
    .shiftPattern .shiftHeader a img { width: 85px }
    .shiftPattern .shiftContent { width: 100%; margin: 0; padding: 10px }
    .shiftPattern .shiftHeader .poweredBy { width: 80px }
    .shiftPattern .shiftHeader .poweredBy img { width: 80px }
    .shiftPatternClip{height:944px}
    .shiftClipRotate { padding: 0 10px }
    .shiftPattern .shiftButtons ul li { width: calc((100% - 10px) /2); margin-left: 10px; margin-bottom: 15px !important; padding: 10px }
    .shiftPattern .shiftButtons ul li:nth-of-type(2n) { margin-left: 0 }
    .shiftPattern .shiftButtons ul li:nth-of-type(5), .shiftPattern .shiftButtons ul li:nth-of-type(6) { margin-bottom: 0 !important }
    .shiftPattern .shiftButtons ul li a span { font-size: 16px }
    .shiftPattern .shiftButtons ul li a.compare:before { font-size: 20px }
    .shiftPattern .shiftHeader a.more { font-size: 15px; line-height: 3 }
    .shiftPattern ul li .imageCntnr { width: 104px; padding-bottom: calc((104px * 56.25) /100); margin-left: 0 }
    .shiftPattern ul li .desc { width: calc(100% - 104px); padding-right: 10px }
    .shiftPattern ul li .desc h2 { font-size: 12px; max-height: 62px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
    .shiftPattern ul li { width: 100%; margin-left: 0; margin-bottom: 25px }
    .shiftPattern ul li:last-child { margin-bottom: 0 }
    .shiftPattern ul li:nth-of-type(5) { margin-bottom: 25px }
    .shiftPattern ul li:last-child { margin-bottom: 0 !important }
    .shiftPattern .shiftHeader p { font-size: 16px; line-height: 2.6 }

        .shiftPattern ul li .desc p {
        font-size: 14px;
        max-height: 45px;
    }
}

@media screen and (max-width:767px) and (orientation:landscape) {
     .shiftClipRotate { padding: 0 10px }
    .shiftPattern .shiftButtons ul li { width: calc((100% - 20px) /3); margin-left: 10px; margin-bottom: 10px; padding: 10px }
    .shiftPattern .shiftButtons ul li:nth-of-type(2n) { margin-left: 10px }
    .shiftPattern .shiftButtons ul li:nth-of-type(3n) { margin-left: 0 }
    .shiftPattern .shiftButtons ul li a span { font-size: 12px }
    .shiftPattern .shiftButtons ul li a.compare:before { font-size: 20px }
}