/*
 Theme Name:     Mark Neader Auto Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme made for Mark Neader Auto
 Author:         QTH.com
 Author URI:     https://hosting.qth.com
 Template:       Divi
 Version:        1.0.0
*/


/* =Theme customization starts here
------------------------------------------------------- */



/*
-------------------------------------------------------
Mark Neader Auto Vehicle Functionality
-------------------------------------------------------
*/

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }

/* -----
   Featured / Latest Vehicles
   ----- */
.mna-latest-vehicles-wrap {
   margin: 20px 0 0 0;
}
.mna-latest-vehicles-wrap .vehicle { margin: 0 1% 30px 1%; width: 31.3333%; float: left; }
.mna-latest-vehicles-wrap .vehicle img { display: block; margin: 0 auto; }
.mna-latest-vehicles-wrap .vehicle h3 { font-size: 20px; color: inherit; margin: 5px 0; padding: 0; text-align: center; }
.mna-latest-vehicles-wrap .vehicle .price,
.mna-latest-vehicles-wrap .vehicle .details  { font-size: 16px; color: inherit; margin: 5px 0; padding: 0;text-align: center;  }

/* -----
   Vehicles
   ----- */
.mna-sort-wrap { margin-bottom: 40px; }
.mna-sort-wrap .selected { font-weight: 900; }

.mna-vehicles-wrap {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.mna-vehicles-wrap .vehicle {
   background-color: #fdfdfd;
   padding: 20px;
   border: 1px solid #a1071a;
   border-radius: 20px 20px 20px 20px;
   -webkit-box-shadow: 6px 6px 18px 0px rgba(0,0,0,0.3);
           box-shadow: 6px 6px 18px 0px rgba(0,0,0,0.3);
   flex: 0 1 44%;
   margin: 0 0 30px 0;
}

.mna-vehicles-wrap .vehicle h2 { padding: 0; margin: 0 0 15px 0; font-size: 1.65rem; clear: both; }
.mna-vehicles-wrap .vehicle .top > div { float: left; }

.mna-vehicles-wrap .vehicle .stats {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
.mna-vehicles-wrap .vehicle .stats > div {
   padding: 0 0 10px 15px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
}
.mna-vehicles-wrap .vehicle .stats .title {
   font-size: 0.85rem;
   color: #555;
   font-style: italic;
}
.mna-vehicles-wrap .vehicle .stats .price { font-size: 1.65rem; }

.mna-vehicles-wrap .vehicle .bottom {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-pack: distribute;
       justify-content: space-around;
}

.mna-vehicles-wrap .vehicle .bottom > a {
   display: block;
   border-radius: 20px 20px 20px 20px;
   border: 1px solid #a1071a;
   padding: 4px 10px;
   margin: 5px;
   float: left;
   background-color: #eee;
   text-align: center;
}
.mna-vehicles-wrap .vehicle .bottom > a:hover {
   background-color: #a1071a;
   color: #eee;
}

/* -----
   Single Vehicle
   ----- */
.mna-single-vehicle-wrap { margin-bottom: 40px; }
.mna-single-vehicle-wrap h2 { margin-top: 2rem; }

.mna-single-vehicle-wrap .vehicle-main-thumbs img {
   margin: 5px 10px 5px 0;
   float: left;
   display: block;
}

.mna-single-vehicle-wrap .vehicle-top-wrap > div { width: 60%; float: left; }
.mna-single-vehicle-wrap .vehicle-top-wrap > dl { width: 40%; float: left; }
.mna-single-vehicle-wrap .vehicle-top-wrap dl dt { display: inline-block; width: 48%; margin: 2px 0; padding: 0; text-align: right; }
.mna-single-vehicle-wrap .vehicle-top-wrap dl dd { display: inline-block; width: 48%; margin: 2px 0; padding: 0; }
.mna-single-vehicle-wrap .vehicle-top-wrap .retail-price   { text-decoration: line-through; font-size: 0.85rem; }
.mna-single-vehicle-wrap .vehicle-top-wrap .internet-price { color: #970719; font-weight: 900; }

.mna-single-vehicle-wrap .features-wrap { margin-bottom: 20px; }
.mna-single-vehicle-wrap .feature {
   border-radius: 20px 20px 20px 20px;
   border: 1px solid #a1071a;
   padding: 4px 10px;
   margin: 5px;
   float: left;
   background-color: #eee;
}

@media only screen and ( max-width: 1120px ) {
   .mna-vehicles-wrap .vehicle .top > div,
   .mna-single-vehicle-wrap .vehicle-top-wrap > div,
   .mna-single-vehicle-wrap .vehicle-top-wrap > dl  { float: none; width: 100%; }
   .mna-vehicles-wrap .vehicle .top > div img { width: 100%; }
   .mna-latest-vehicles-wrap .vehicle { border-top: 1px solid #4c4c4c; max-width: 90%; margin: 0 auto; padding: 30px 0;  width: 100%; float: none; }
}

@media only screen and ( max-width: 950px ) {
   .mna-vehicles-wrap { display: block; }
   .mna-vehicles-wrap .vehicle .top > div { width: 50%; float: left; }
   .mna-vehicles-wrap .vehicle { width: 100%; float: none; }
}

@media only screen and ( max-width: 725px ) {
   .mna-vehicles-wrap .vehicle .top > div { float: left; }
   .mna-vehicles-wrap .vehicle .stats > div { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;  }
}

@media only screen and ( max-width: 500px ) {
   .mna-single-vehicle-wrap .vehicle-top-wrap dl dt,
   .mna-single-vehicle-wrap .vehicle-top-wrap dl dd { display: block; width: 100%; margin: 0; text-align: left; }
   .mna-single-vehicle-wrap .vehicle-top-wrap dl dd { margin-left: 10px; }


   .mna-vehicles-wrap .vehicle .top > div { width: 100%; float: none; }



}