@import url(../Fresh/StyleSheet.css);

/*Colors
E61461 red
0072ce blue
00b0b9 teal
00558c dk blue
*/

.listingdisplaypanel .listingimage img {padding: 0; margin:auto; position: relative; right: 0px;}


@media (min-width: 768px) and (max-width: 991.98px) {
    .mgdisplaylistinghome .listingdesc {padding:5px 10px; min-height:240px; font-size:15px;}
    .listingprice {font-size:18px; font-weight:bold;}
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .mgdisplaylistinghome .listingdesc {padding:5px 10px; min-height:195px;}
    .listingprice {font-size:18px; font-weight:bold;}
}

@media (min-width: 1200px) {
    .mgdisplaylistinghome .listingdesc {padding:5px 10px; min-height:210px;}
    .listingprice {font-size:18px; font-weight:bold;}
    .listingdate {padding:5px 0;}
}


@media (max-width: 767px) {
    /*summary listings sold ribbon*/
    .listingimage {min-height:100px; margin-top:20px;}
    .listingimage img {padding:0; position:relative; right:15px;}
    .mgdisplaylisting .ribbon {
       position: absolute;
       left: -5px; top: -15px;
       z-index: 1;
       overflow: hidden;
       width: 100px; height: 100px; 
       text-align: left;
    }

    /*summary listings sold ribbon columns home page*/
    .mgdisplaylistinghome  .ribbon {
       position: absolute;
       left: -5px; top: -5px;
       z-index: 1;
       overflow: hidden;
       width: 100px; height: 100px; 
       text-align: left;
    }
    .ribbon span {
       font-size: 16px;
       font-weight:bold;
       color: #fff; 
       text-transform: uppercase; 
       text-align: center;
       font-weight: bold; line-height: 26px;
       -webkit-transform:  rotate(-45deg); /* Needed for Safari */
       transform: rotate(-45deg);
       width: 100px; display: block;
       background: #c81a01;
       background: linear-gradient(#e63e26 0%, #c81a01 100%);
       box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
       position: absolute;
       top: 14px; left: -23px;
    }

    .ribbon span::before {
       content: '';
       position: absolute; 
       left: 0px; top: 100%;
       z-index: -1;
       border-left: 3px solid #c81a01;
       border-right: 3px solid transparent;
       border-bottom: 3px solid transparent;
       border-top: 3px solid #c81a01;
    }
    .ribbon span::after {
       content: '';
       position: absolute; 
       right: 0%; top: 100%;
       z-index: -1;
       border-right: 3px solid #c81a01;
       border-left: 3px solid transparent;
       border-bottom: 3px solid transparent;
       border-top: 3px solid #c81a01;
    }

    /*detailed listings sold ribbon*/
    .ribbon-left {
    position: absolute;
    left: 7px; top: -3px;
    z-index: 9999;
    overflow: hidden;
    width: 100px; height: 100px;
    text-align: right;
    }
    .ribbon-left span {
    font-size: 18px;
    font-weight:bold;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold; line-height: 38px;
    -webkit-transform: rotate(-45deg); /* Needed for Safari */
    transform: rotate(-45deg);
    width: 135px; display: block;
    background: #c81a01;
    background: linear-gradient(#e63e26 0%, #c81a01 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 16px; left: -29px;
    }

    .ribbon-left span::before {
       content: '';
       position: absolute; 
       left: 0px; top: 100%;
       z-index: -1;
       border-left: 3px solid #c81a01;
       border-right: 3px solid transparent;
       border-bottom: 3px solid transparent;
       border-top: 3px solid #c81a01;
    }
    .ribbon-left span::after {
       content: '';
       position: absolute; 
       right: 0%; top: 100%;
       z-index: -1;
       border-right: 3px solid #c81a01;
       border-left: 3px solid transparent;
       border-bottom: 3px solid transparent;
       border-top: 3px solid #c81a01;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
     /*summary listings sold ribbon*/
    .listingimage {min-height:100px; margin-top:20px;}
    .listingimage img {padding:0; position:relative; right:15px;}
    .mgdisplaylisting .ribbon {
       position: absolute;
       left: -6px; top: -16px;
       z-index: 1;
       overflow: hidden;
       width: 100px; height: 100px; 
       text-align: left;
    }

    /*summary listings sold ribbon columns home page*/
    .mgdisplaylistinghome  .ribbon {
       position: absolute;
       right: -5px; top: -4px;
       z-index: 1;
       overflow: hidden;
       width: 100px; height: 100px; 
       text-align: right;
    }
    .mgdisplaylisting .ribbon span {
       font-size: 16px;
       font-weight:bold;
       color: #fff; 
       text-transform: uppercase; 
       text-align: center;
       font-weight: bold; line-height: 24px;
       -webkit-transform: rotate(-45deg); /* Needed for Safari */
       transform: rotate(-45deg);
       width: 100px; display: block;
       background: #c81a01;
       background: linear-gradient(#e63e26 0%, #c81a01 100%);
       box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
       position: absolute;
       top: 14px; left: -23px;
    }
    .mgdisplaylistinghome .ribbon span {
       font-size: 16px;
       font-weight:bold;
       color: #fff; 
       text-transform: uppercase; 
       text-align: center;
       font-weight: bold; line-height: 24px;
       -webkit-transform: rotate(45deg); /* Needed for Safari */
       transform: rotate(45deg);
       width: 100px; display: block;
       background: #c81a01;
       background: linear-gradient(#e63e26 0%, #c81a01 100%);
       box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
       position: absolute;
       top: 14px; right: -23px;
    }

    .ribbon span::before {
       content: '';
       position: absolute; 
       left: 0px; top: 100%;
       z-index: -1;
       border-left: 3px solid #c81a01;
       border-right: 3px solid transparent;
       border-bottom: 3px solid transparent;
       border-top: 3px solid #c81a01;
    }
    .ribbon span::after {
       content: '';
       position: absolute; 
       right: 0%; top: 100%;
       z-index: -1;
       border-right: 3px solid #c81a01;
       border-left: 3px solid transparent;
       border-bottom: 3px solid transparent;
       border-top: 3px solid #c81a01;
    }

    /*detailed listings sold ribbon*/
    .ribbon-left {
    position: absolute;
    left: 7px; top: -3px;
    z-index: 9999;
    overflow: hidden;
    width: 100px; height: 100px;
    text-align: right;
    }
    .ribbon-left span {
    font-size: 18px;
    font-weight:bold;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold; line-height: 38px;
    -webkit-transform: rotate(-45deg); /* Needed for Safari */
    transform: rotate(-45deg);
    width: 135px; display: block;
    background: #c81a01;
    background: linear-gradient(#e63e26 0%, #c81a01 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 16px; left: -29px;
    }

    .ribbon-left span::before {
       content: '';
       position: absolute; 
       left: 0px; top: 100%;
       z-index: -1;
       border-left: 3px solid #c81a01;
       border-right: 3px solid transparent;
       border-bottom: 3px solid transparent;
       border-top: 3px solid #c81a01;
    }
    .ribbon-left span::after {
       content: '';
       position: absolute; 
       right: 0%; top: 100%;
       z-index: -1;
       border-right: 3px solid #c81a01;
       border-left: 3px solid transparent;
       border-bottom: 3px solid transparent;
       border-top: 3px solid #c81a01;
    }

}


@media  (min-width: 992px) and (max-width: 1199.98px) {
    /*summary listings sold ribbon*/
    .listingimage {min-height:100px; margin-top:20px;}
    .listingimage img {padding:0; position:relative; right:15px;}

    .mgdisplaylisting .ribbon {
       position: absolute;
       left: -6px; top: -16px;
       z-index: 1;
       overflow: hidden;
       width: 100px; height: 100px; 
       text-align: left;
    }

    /*summary listings sold ribbon columns home page*/
    .mgdisplaylistinghome  .ribbon {
       position: absolute;
       right: -5px; top: -4px;
       z-index: 1;
       overflow: hidden;
       width: 100px; height: 100px; 
       text-align: right;
    }
    .mgdisplaylisting .ribbon span {
       font-size: 16px;
       font-weight:bold;
       color: #fff; 
       text-transform: uppercase; 
       text-align: center;
       font-weight: bold; line-height: 24px;
       -webkit-transform: rotate(-45deg); /* Needed for Safari */
       transform: rotate(-45deg);
       width: 100px; display: block;
       background: #c81a01;
       background: linear-gradient(#e63e26 0%, #c81a01 100%);
       box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
       position: absolute;
       top: 14px; left: -23px;
    }
    .mgdisplaylistinghome .ribbon span {
       font-size: 16px;
       font-weight:bold;
       color: #fff; 
       text-transform: uppercase; 
       text-align: center;
       font-weight: bold; line-height: 24px;
       -webkit-transform: rotate(45deg); /* Needed for Safari */
       transform: rotate(45deg);
       width: 100px; display: block;
       background: #c81a01;
       background: linear-gradient(#e63e26 0%, #c81a01 100%);
       box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
       position: absolute;
       top: 14px; right: -23px;
    }

    .ribbon span::before {
       content: '';
       position: absolute; 
       left: 0px; top: 100%;
       z-index: -1;
       border-left: 3px solid #c81a01;
       border-right: 3px solid transparent;
       border-bottom: 3px solid transparent;
       border-top: 3px solid #c81a01;
    }
    .ribbon span::after {
       content: '';
       position: absolute; 
       right: 0%; top: 100%;
       z-index: -1;
       border-right: 3px solid #c81a01;
       border-left: 3px solid transparent;
       border-bottom: 3px solid transparent;
       border-top: 3px solid #c81a01;
    }

    /*detailed listings sold ribbon*/
    .ribbon-left {
    position: absolute;
    left: 7px; top: -3px;
    z-index: 9999;
    overflow: hidden;
    width: 100px; height: 100px;
    text-align: right;
    }
    .ribbon-left span {
    font-size: 18px;
    font-weight:bold;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold; line-height: 38px;
    -webkit-transform: rotate(-45deg); /* Needed for Safari */
    transform: rotate(-45deg);
    width: 135px; display: block;
    background: #c81a01;
    background: linear-gradient(#e63e26 0%, #c81a01 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 16px; left: -29px;
    }

    .ribbon-left span::before {
       content: '';
       position: absolute; 
       left: 0px; top: 100%;
       z-index: -1;
       border-left: 3px solid #c81a01;
       border-right: 3px solid transparent;
       border-bottom: 3px solid transparent;
       border-top: 3px solid #c81a01;
    }
    .ribbon-left span::after {
       content: '';
       position: absolute; 
       right: 0%; top: 100%;
       z-index: -1;
       border-right: 3px solid #c81a01;
       border-left: 3px solid transparent;
       border-bottom: 3px solid transparent;
       border-top: 3px solid #c81a01;
    }
}


@media (min-width: 1200px) {
    /*summary listings sold ribbon*/
    .listingimage {min-height:100px; margin-top:20px;}
    .listingimage img {padding:0; position:relative; right:15px;}
    .mgdisplaylisting .ribbon {
       position: absolute;
       left: -6px; top: -16px;
       z-index: 1;
       overflow: hidden;
       width: 100px; height: 100px; 
       text-align: left;
    }

    /*classified summary listings sold ribbon columns home page*/
    .mgdisplaylistinghome  .ribbon {
       position: absolute;
       right: -5px; top: -4px;
       z-index: 1;
       overflow: hidden;
       width: 100px; height: 100px; 
       text-align: right;
    }
    .mgdisplaylisting .ribbon span {
       font-size: 16px;
       font-weight:bold;
       color: #fff; 
       text-transform: uppercase; 
       text-align: center;
       font-weight: bold; line-height: 24px;
       -webkit-transform: rotate(-45deg); /* Needed for Safari */
       transform: rotate(-45deg);
       width: 100px; display: block;
       background: #c81a01;
       background: linear-gradient(#e63e26 0%, #c81a01 100%);
       box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
       position: absolute;
       top: 14px; left: -23px;
    }
    .mgdisplaylistinghome .ribbon span {
       font-size: 16px;
       font-weight:bold;
       color: #fff; 
       text-transform: uppercase; 
       text-align: center;
       font-weight: bold; line-height: 24px;
       -webkit-transform: rotate(45deg); /* Needed for Safari */
       transform: rotate(45deg);
       width: 100px; display: block;
       background: #c81a01;
       background: linear-gradient(#e63e26 0%, #c81a01 100%);
       box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
       position: absolute;
       top: 14px; right: -23px;
    }

    .ribbon span::before {
       content: '';
       position: absolute; 
       left: 0px; top: 100%;
       z-index: -1;
       border-left: 3px solid #c81a01;
       border-right: 3px solid transparent;
       border-bottom: 3px solid transparent;
       border-top: 3px solid #c81a01;
    }
    .ribbon span::after {
       content: '';
       position: absolute; 
       right: 0%; top: 100%;
       z-index: -1;
       border-right: 3px solid #c81a01;
       border-left: 3px solid transparent;
       border-bottom: 3px solid transparent;
       border-top: 3px solid #c81a01;
    }

    /*detailed listings sold ribbon*/
    .ribbon-left {
    position: absolute;
    left: -10px; top: -5px;
    z-index: 9999;
    overflow: hidden;
    width: 100px; height: 100px;
    text-align: right;
    }
    .ribbon-left span {
    font-size: 18px;
    font-weight:bold;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold; line-height: 38px;
    -webkit-transform: rotate(-45deg); /* Needed for Safari */
    transform: rotate(-45deg);
    width: 135px; display: block;
    background: #c81a01;
    background: linear-gradient(#e63e26 0%, #c81a01 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 16px; left: -29px;
    }

    .ribbon-left span::before {
       content: '';
       position: absolute; 
       left: 0px; top: 100%;
       z-index: -1;
       border-left: 3px solid #c81a01;
       border-right: 3px solid transparent;
       border-bottom: 3px solid transparent;
       border-top: 3px solid #c81a01;
    }
    .ribbon-left span::after {
       content: '';
       position: absolute; 
       right: 0%; top: 100%;
       z-index: -1;
       border-right: 3px solid #c81a01;
       border-left: 3px solid transparent;
       border-bottom: 3px solid transparent;
       border-top: 3px solid #c81a01;
    }

}