.listWebpart{
   ul{
      margin:0px;
      padding:0px;

    li{ 
        list-style: none;
        float:left;
              img {
                    width: 100%;
                    max-width: 100%;
                    margin-bottom: 15px;
               }
    }
}
}

.promoListWebpart {
     // start promo list webpart
     h2 {
         text-align: center;
     }
     ul // start ul
     {
         margin: 0px;
         padding: 0px;
         list-style: none;
         li // start Li
         {
             float: left;
             padding: 15px;
             a // start A
             {
                 position: relative;
                 overflow: hidden;
                 height: 170px;
                 display: block;
                 color: $link-font-color;
                 background-size: cover !important; // important needed to overide in page style="background:ur('');
                 background-position: 0px enter !important; // important needed to overide in page style="background:ur('');
                 span {
                     position: absolute;
                 }
                 .info {
                     position: absolute;
                     display: inline-block;
                     bottom: 0px;
                     right: 0px;
                     padding: 20px 40px 20px 20px;
                     background: $span-info-color;
                     width: 100%;
                     opacity: 0.90;
                     filter: alpha(opacity=90);
                     /* For IE8 and earlier */
                     line-height: 1.42857;
                     font-weight: 300;
                 }
                 img {
                     position: absolute;
                 }
                 &:hover span.info,
                 &:focus span.info {
                     background: $span-info-hover;
                     text-decoration: none;
                     opacity: 1;
                     filter: alpha(opacity=100);
                     /* For IE8 and earlier */
                 }
                 .secondaryInfo {
                     font-family: $font-secondary;
                     color: $span-info-secondary-color;
                     width: 70%;
                     display: block;
                     opacity: 1;
                     filter: alpha(opacity=100);
                     /* For IE8 and earlier */
                     position: relative;
                 }
                 .arrow {
                     position: absolute;
                     right: 0px;
                     bottom: 0px;
                     padding: 30px 0;
                     width: 15%;
                     display: block;
                     background: $span-arrow-base;
                     height: 100%;
                     text-align: center;
                     &:after {
                         font-family: FontAwesome;
                         font-size: 35px;
                         content: "\f105";
                         color: $arrow-color;
                         position: absolute;
                         display: inline-block;
                         vertical-align: middle;
                         right: 0px;
                         width: 100%;
                         top: 50%;
                         margin: -15px 0 0 -36px;
                     }
                 }
                 span.thirdInfo {
                     background: $span-third-info-base;
                     right: 0px;
                     color: $third-info-font-color;
                     width: 33.3%;
                     min-width: 220px;
                     max-width: 100%;
                     text-align: center;
                     line-height: 60px;
                     font-size: $base-font-size * 1.2;
                 }
             } // End A
             a[rel="xl"],
             a[rel="pdf"],
             a[rel="doc"],
             a[rel="pp"],
             a[rel="external"] {
                 &:after {
                     content: "";
                 }
             }
             a[rel="xl"] {
                 .arrow {
                     &:after {
                         content: "\f1c3";
                     }
                 }
             }
             a[rel="pdf"] {
                 .arrow {
                     &:after {
                         content: "\f1c1";
                     }
                 }
             }
             a[rel="doc"] {
                 .arrow {
                     &:after {
                         content: "\f1c2";
                     }
                 }
             }
             a[rel="pp"] {
                 .arrow {
                     &:after {
                         content: "\f1c4";
                     }
                 }
             }
             a[rel="external"] {
                 .arrow {
                     &:after {
                         content: "\f08e";
                     }
                 }
             }
             &.heightTwo a {
                 height: 370px;
             }
             &.one {
                 span.thirdInfo {
                     width: 100%;
                     min-width: 100%;
                 }
             }
         } // End li
     } // End Ul
     /* change of style for info span on larger features -------------------------------------------------------- */
     li.six a span.info {
         font-size: $base-font-size * 2.5;
     }
     .six a span.secondaryInfo {
         font-size: $base-font-size * 1.3;
         display: block;
     }
     .two a span.info,
     .three a span.info,
     .four a span.info,
     .quarter a span.info {
         font-size:24px;
         padding: 20px 80px 20px 20px;
         font-weight:600;
         line-height:30px;
     }
     .two a span.secondaryInfo,
     .three a span.secondaryInfo,
     .four a span.secondaryInfo,
     .quarter a span.secondaryInfo {
         font-size: $base-font-size;
         font-weight:200;
         margin-top:10px;
     }
     .four.heightTwo a {
         font-size: $base-font-size * 2.3;
     }
     @media screen and (max-width: 1000px) {
         a span.info,
         li.four.heightTwo a span.info,
         
         li.six a span.info {
             font-size: $base-font-size * 1.5;
         }
         a span.secondaryInfo,
         li.four.heightTwo a span.secondaryInfo,
         li.six a span.secondaryInfo {
             font-size: $base-font-size *1.2;
         }
     }
     @media screen and (min-width: 1000px) {
         // different style for larger screens on Four and Six width listwebparts 
         li.six a span.info,
         li.four a span.info {
             bottom: 0px;
             top: 0px;
             right: 0px;
             padding: 20px;
             text-align: center;
             width: 33.3%;
             min-width: 220px;
         }
         li.six a span.info,
         li.four.heightTwo a span.info {
             padding: 80px 20px 20px 20px;
             .arrow {
                 height: 80px;
             }
         }
         .four a span.secondaryInfo,
         .six a span.secondaryInfo {
             text-align: center;
             width: 100%
         }
     }
     li.promoImage a span {
         display: none;
     }
     .imgRight a //  align an image right
     {
         background-position: 0px right !important; // important needed to overide in page style="background:ur('');
     }
     .imgBottom a //  align an image bottom
     {
         background-position: bottom !important; // important needed to overide in page style="background:ur('');
     }
     .imgCenter a // center an image
     {
         background-position: center center !important; // important needed to overide in page style="background:ur('');
     }
     .contentLink {
         // Start contentLink Style
         position: relative;
         color: $contentFontColor;
         font-weight: 100;
         padding-bottom: 100px;
         height: 200px;
         h2 {
             font-size: $base-font-size * 2.2;
         }
         a {
             color: $contentFontColor;
             .arrow {
                 &:after {
                     color: $content-arrow-color;
                 }
             }
             &:hover {
                 color: #fff;
                 .arrow {
                     &:after {
                         color: $arrow-color;
                     }
                 }
             }
         }
         &.color {
                a{
           bottom:10px !important;
       }


             p {
                 color: $contentFontColor;
             }
             div {
                 background: $span-info-color;
                 padding: 15px 15px 30px 15px;
             }
             &.lighter {
                 div {
                     background: lighten($span-info-color, 7%);
                 }
             }
             &.darker {
                 div {
                     background: darken($span-info-color, 7%);
                 }
             }
             @media only screen and (max-width: 1200px) and (min-width:601px) {
                 div {
                     display: table-cell;
                     vertical-align: middle;
                     height: 305px;
                     width: inherit;
                 }
             }
             a {
                 border: none;
                 margin: 0px;
                 width: 100%;
                 .info {
                     background: #fff;
                     color: #333;
                     border: none;
                     opacity: 1;
                     &:hover,
                     &:focus {
                         color: #fff;
                     }
                     .arrow {
                         background-color: $span-arrow-base;
                     }
                 }
             }
         }
         &.heightAuto {
             height: auto;
             padding-bottom: 0px;
             a {
                 position: relative;
             }
         }
         &.heightTwo {
             height: 400px;
         }
         &.heightTwo a,
         a // start contentLink a
         {
             position: absolute;
             z-index: auto;
             bottom: 15px;
             margin: 0 4.4%;
             left: 0px;
             height: 80px;
             width: 91.8%;
             background-color: transparent;
             span.info {
                 background-color: transparent;
                 border-top: 1px solid $content-border-color;
             }
             span.arrow {
                 background-color: transparent;
             }
             &:hover span.info,
             &:focus span.info {
                 background: $span-info-hover;
             }
         } // end  contentLink a
         p {
             text-align: center;
             font-size: 24px;
             line-height: 28px;
             strong {
                 text-align: center;
                 font-family: oswald, serif;
                 line-height: 30px;
                 font-size: 30px;
                 margin-top: 20px;
                 display: block;
             }
         }
         &.heightTwo p strong {
             font-size: 50px;
             line-height: 50px;
             margin-top: 40px;
         }
         @media only screen and (max-width: 600px) {
             &.heightTwo {
                 height: auto;
             }
             p strong {
                 margin-top: 10px;
             }
         }
     }
     @media only screen and (max-width: 600px) {
         .contentLink {
             height: auto;
         }
     }
     // end content Link Style
     .content {
         // Start content Style
         position: relative;
         font-weight: 100;
         padding-bottom: 100px;
         height: 200px;
         color: $contentFontColor;
         &.color {
             div {
                 background: $span-info-color;
                 padding: 15px 15px 30px 15px;
             }
             &.lighter {
                 div {
                     background: lighten($span-info-color, 10%);
                 }
             }
             &.darker {
                 div {
                     background: darken($span-info-color, 20%);
                 }
             }
         }
         &.heightAuto {
             height: auto;
             padding-bottom: 0px;
         }
         &.heightTwo {
             height: 400px;
         }
         &.heightTwo a,
         a // start content a
         {
             display: none;
             &.button {
                 display: block;
                 height: auto;
                 float: left;
                 font-size: 20px;
                 margin-right: 15px;
             }
         } // end  contentLink a
         p {
             text-align: center;
             font-size: 24px;
             line-height: 28px;
             strong {
                 text-align: center;
                 font-family: oswald, serif;
                 line-height: 30px;
                 font-size: 30px;
                 margin-top: 20px;
                 display: block;
             }
         }
         &.heightTwo p strong {
             font-size: 50px;
             line-height: 50px;
             margin-top: 40px;
         }
         @media only screen and (max-width: 600px) {
             &.heightTwo {
                 height: auto;
             }
             p strong {
                 margin-top: 10px;
             }
         }
     } // end content Style    
     .promo {
         .info {
             left: -10000em;
         }
     }
 } // end promo list webpart
 .one {
     width: 16.6667%;
 }

 .quarter{
     width:25%;
 }
 
 .two {
     width: 33.33333%;
 }
 
 .three {
     width: 50%;
 }
 
 .four {
     width: 66.66666%
 }
 
 .six {
     width: 100%;
 }
 
 @media only screen and (max-width: 1200px) {
     .one,
     .two,
     .four,
     .quarter {
         width: 50%;
     }
 }
 
 @media only screen and (max-width: 600px) {
     .one,
     .two,
     .three,
     .four,
     .quarter {
         width: 100%;
     }
 }
 
 .promoListWebpart ul li.catergory {
     padding: 15px 15px 0 15px;
     img {
         margin-top: 10px;
     }
     a {
         .info {
             background: rgba(0, 0, 0, 0.5);
             width: 100%;
             opacity: 1;
             border-top: 1px solid #999;
             font-size: 18px;
             text-transform: uppercase;
             text-align: center;
         }
     }
     &.heightAuto {
         a {
             border: 1px solid #999;
             height: auto;
             display: table;
             float: left;
             width: 100%;
             .info {
                 opacity: 1;
                 position: relative;
                 border: none;
                 vertical-align: middle;
                 display: table-cell;
                 height: auto;
             }
         }
     }
 }
 
 @mixin promoListWebpartColors($span-info-color, $link-font-color, $span-info-secondary-color, $span-arrow-base, $arrow-color) {
     .info {
         background: $span-info-color;
         color: $link-font-color;
         .secondaryInfo {
             color: $span-info-secondary-color;
         }
         .arrow {
             background: $span-arrow-base;
             &:after {
                 color: $arrow-color;
             }
         }
     }
 }
 
 .promoListWebpart {
     ul li {
         &.orange a {
             @include promoListWebpartColors($orange, #fff, #fff, darken($orange,2%), #fff);
         }
         &.lime a {
             @include promoListWebpartColors($lime, #fff, #fff, darken($lime,5%),#fff);
         }
         &.yellow a {
             @include promoListWebpartColors($yellow, #fff, #fff, darken($yellow,5%),#fff);
         }
         &.magenta a {
             @include promoListWebpartColors($magenta, #fff, #fff,  darken($magenta,5%),#fff);
         }
         &.pink a {
             @include promoListWebpartColors($pink, #fff, #fff, darken($pink,5%),#fff);
         }
         &.purple a {
             @include promoListWebpartColors($purple, #fff, #fff,darken($purple,5%),#fff);
         }
         &.green a {
             @include promoListWebpartColors($green, #fff, #fff, darken($green,5%),#fff);
         }
     }
     .contentLink {
         border: 15px solid #fff;
         padding: 0px;
         &.heightTwo a,
         a {
             width: 100%;
             margin: 0px;
             bottom: 0px;
             &:hover .info {
                 background: rgba(0, 0, 0, 1) !important;
             }

         }
         p {
             text-align: center;
             font-size: 18px;
             line-height: 25px;
             margin: 30px;
             strong {
                 text-align: center;
                 line-height: 30px;
                 font-size: 30px;
                 margin-top: 30px;
                 display: block;
             }
         }
         &.heightTwo p strong {
             font-size: 40px;
             line-height: 40px;
             margin-top: 40px;
         }
         &.heightTwo.one p strong {
             font-size: 30px;
             line-height: 30px;
             margin-top: 30px;
         }
         &.lime {
             background: $lime;
             h2,
             h3,
             p {
                 color: #fff;
             }


             a span.info{
                border-top:1px solid #fff;
             }
         }
         &.yellow {
             background: $yellow;
             h2,
             h3,
             p {
                 color: #fff;
             }


             a span.info{
                border-top:1px solid #fff;
             }
         }
         &.orange {
             color: #fff;
             background: $orange;
             h2,
             h3,
             p {
                 color: #fff;
             }


             a span.info{
                border-top:1px solid #fff;
             }

         }
         &.magenta {
             color: #fff;
             background: $magenta;
             h2,
             h3,
             p {
                 color: #fff;
             }


             a span.info{
                border-top:1px solid #fff;
             }
         }
         &.pink {
             background: $pink;
             h2,
             h3,
             p {
                 color: #fff;
             }
             .info{
                border-top:1px solid #fff;
             }


             a span.info{
                border-top:1px solid #fff;
             }


         }
         &.purple {
             background: $purple;
             h2,
             h3,
             p {
                 color: #fff;
             }


             a span.info{
                border-top:1px solid #fff;
             }
         }
         &.green {
             background: $green;
             h2,
             h3,
             p {
                 color: #fff;
             }


             a span.info{
                border-top:1px solid #fff;
             }
         }
     }
 }



.promoListWebpart ul li{


&.contentLink {

   border-color:transparent;

    h2{
        font-size:35px;
        margin:0.4em 0px;
    }

    p{
        font-size:25px;
    }

    .info{
        font-size:22px;
    }

    
}


    &.catergory a {

background-size:540px !important; 
background-position:top center!important;   

.info{
    background:transarent;
}

    text-align:center;
 .fa {
    color: #fff;
    font-size: 80px;
    margin-top: 10px;
}




 &:hover{
        border-color:transparent;
}


img{
    text-align: center;
}

.info {
    background: rgba(0,0,0,0);
    width: 100%;
    opacity: 1;
    border-top: 1px solid #888;
    padding:20px;
    font-size: 18px;
    text-transform: uppercase;   
    opacity: 1;
    filter: alpha(opacity=1);




    .arrow{
        background:transparent;


        &:after{
            display:none;
        }
    }
}

}
}

@media only screen and (max-width: 600px){
.promoListWebpart .contentLink.heightTwo {
    padding-bottom: 80px;
}
}



 @mixin promoListWebpartDarkerLighter($span-info-color) {
   .color{
   
       .info .arrow {
           background:#f6f6f6;
           &:after{
               color:#333;
           }
       }
        
        div{
         background:$span-info-color
       }

        
       &.darker div{
          background: darken($span-info-color,5%);
       }

         
       &.lighter  div {
          background: lighten($span-info-color,5%);
       }
   }
 }