/* ====================================================
Theme Name: WebEd9 Production Template
Author: Interactive Partners
Author URL: https://www.interactivepartners.com.au
Created: January 2020
Version: 1.1.13
======================================================= */



/* ==================================================================================================

    Table of contents - Start

    0 - Reset ( This is needed to minimise compatibility issues accross different browsers )

    I - This will contain styling for mobile ( We will use mobile first approach )

        1. Brand - This will contain brand styling ( e.g. fonts, colours etc. )

        2. Typography - This will contain styling for texts ( e.g. h1 - h6, p, span, anchor etc. )

        3. Layout - This will contain layout styling ( e.g. section, div, sidebar, footer , etc. )

        4. Curly Brackets or Objects - This will contain styling for curly brackets.

        5. Others - this will be the styling for modifiers only (e.g. bold, text-center etc. )


    II - this will contain styling for larger phones  ( min-width: 480px )  !== Optional ==!

        1. Typography - This will contain styling for texts ( e.g. h1 - h6, p, span, anchor etc. )

        2. Layout - This will contain layout styling ( e.g. section, div, sidebar, footer , etc. )

        3. Curly Brackets or Objects - This will contain styling for curly brackets.


    III - this will contain styling for tablets ( min-width: 768px )

        1. Typography - This will contain styling for texts ( e.g. h1 - h6, p, span, anchor etc. )

        2. Layout - This will contain layout styling ( e.g. section, div, sidebar, footer , etc. )

        3. Curly Brackets or Objects - This will contain styling for curly brackets.


    IV - this will contain styling for desktops ( min-width: 992px ) 

        1. Typography - This will contain styling for texts ( e.g. h1 - h6, p, span, anchor etc. )

        2. Layout - This will contain layout styling ( e.g. section, div, sidebar, footer , etc. )

        3. Curly Brackets or Objects - This will contain styling for curly brackets.


    V - this is optional for screen sizes larger than desktops ( min-width: 1400px or 1200px )

        1. Typography - This will contain styling for texts ( e.g. h1 - h6, p, span, anchor etc. )

        2. Layout - This will contain layout styling ( e.g. section, div, sidebar, footer , etc. )

        3. Curly Brackets or Objects - This will contain styling for curly brackets.


    Table of contents - End

  
  /* ==================================================================================================
                                        I - Mobile - Start
  ===================================================================================================== */
  
  /* ==========================================================
            1. Brand - Start
  
    This will contain client related styles
    CSS custom properties is not supported on IE browser
    Please include an IE fallback option if possible.
  ============================================================= */
  
  :root {
    --brand-colour: ;          /* Please set color value */
    --brand-alt-colour: ;      /* Please set color value */
    --brand-colour-3: ;        /* Please set color value */
    --brand-colour-body: ;     /* Please set color value */
    --brand-font: '';              /* Please set font family value */
  }
  
  /* ==========================================================
            1. Brand - End
  ============================================================= */
  
  /* ==========================================================
            2. Typography - Start
  ============================================================= */
  
  /* ==========================================================
            2. Typography - End
  ============================================================= */
  
  /* ==========================================================
            3. Layout - Start
  ============================================================= */
  
  /*  SECTION CONTENT  */
  .content--container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
  }
  #content {
    width: 100%;
    height: auto;
    background: #ffffff;
    padding: 20px;
  }
  /*  SECTION CONTENT  */
  
  .vehicle-results__container .vehicle-item__container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    width: 100%;
  }
  .vehicle-item .vehicle-title {
    background: #f1f1f1;
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .vehicle-item .vehicle-title h4 {
    margin: 10px;
    font-weight: 700;
    text-transform: uppercase;
  }
  .vehicle-item .vehicle-title span {
    margin: 10px;
    font-weight: 300;
    font-size: 13px;
    font-style: italic;
    color: #999;
  }
  .vehicle-results__container .vehicle-item {
    /*display: flex;*/
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid #ccc;
  }
  .vehicle-results__container .vehicle-item .product-thumbnail img {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
  .vehicle-results__container .vehicle-item .details__container {
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
  }
  .vehicle-results__container .vehicle-item .details__container .title__container {
    display: flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-wrap: wrap;
    padding-top: 5px;
  }
  .vehicle-results__container .vehicle-item .details__container .title__container .title:after {
    content: ': ';
  }
  .vehicle-results__container .vehicle-item .details__container .title__container .title {
    font-weight: 700;
  }
  .vehicle-item__container .vehicle-item .product-details .details__container .price {
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
  }
  .vehicle-item__container .vehicle-item .details__container .price div {
    width: 100%;
  }
  
  .vehicle-item__container .vehicle-item .details__container .title__container .item {
    width: 100%;
  }
  .vehicle-results__container .vehicle-item .details__container .title__container .item:first-child {
      width: 100%;
  }
  .vehicle-item__container .vehicle-item .details__container .item {
    font-size: 16px;
  }
      .price__container .value {
          color: #000;
          font-size: 24px;
      }
      .price__container .title {
          color: #555;
          font-size: 11px;
          text-transform: uppercase;
      }
      .vehicle-item__container .vehicle-item .details__container .compare__container {
        text-align: right;
        padding-bottom: 10px;
      }
      .vehicle-item__container .vehicle-item .details__container .compare__container .compare,
      .vehicle-item__container .vehicle-item .details__container .compare__container a.compare {
          font-size: 13px;
          text-transform: uppercase;
          background: #f9f9f9;
          padding: 5px;
          text-decoration: none;
      }
      .vehicle-item__container .vehicle-item .details__container .compare__container a.compare,
      .vehicle-item__container .vehicle-item .details__container .compare__container a.compare:visited {
        color: #555 !important;
      }
      .vehicle-item__container .vehicle-item .details__container .compare__container a.compare:focus,
      .vehicle-item__container .vehicle-item .details__container .compare__container a.compare:hover,
      .vehicle-item__container .vehicle-item .details__container .compare__container a.compare:active {
        color: #000 !important;
      }
  
  .cta-overlay .cta__container {
    display: flex !important;
  }
  .cta__container a {
    display: flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  .cta__container a {
    margin: 5px 0;
  }
  .cta__container a.red, .cta__container button.red {
    background: #950014;
    color: #fff !important;
    text-transform: uppercase;
    text-decoration: none;
    padding: 5px 10px;
    line-height: 2;
  }
  .cta__container a.grey, .cta__container button.grey {
    background: #3D4045;
    color: #fff !important;
    text-transform: uppercase;
    text-decoration: none;
    padding: 5px 10px;
    line-height: 2;
  }
  .cta__container a span, .cta__container button {
    color: #fff !important;
    text-transform: uppercase;
    text-decoration: none;
  }
  .cta__container a:hover, .cta__container a:focus, .cta__container a:active,
  .cta__container button:hover, .cta__container button:focus, .cta__container button:active {
    background: #000;
    color: #fff !important;
    text-decoration: none;
  }
  .cta__container a:first-child {
    margin-top: 0;
  }
  .cta__container {
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    text-align: center;
  }
  
  .vehicle-results__container .vehicle-item .details__container .cta-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .2s ease;
    background-color: rgba(255,255,255,0.8);
  }
  
  /*  PRODUCTS GRID  */
  
  
  
  /* ==========================================================
            3. Layout - End
  ============================================================= */
  
  /* ==========================================================
            4. Curly Brackets or Objects - Start
  ============================================================= */
  
  .vehicle-thumbnail {
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    width: 100%;
  }
  
  .vehicle-thumbnail div {
    margin: 5px 0;
    width: 100%;
  }
  .vehicle-thumbnail div:first-child {
    margin-top: 0;
  }
  .vehicle-thumbnail div img {
    width: 100%;
    height: auto;
  }
  .vehicle-details {
    width: 100%;
    padding: 10px;
  }
  
  .vehicle-results__container .vehicle-item .cta-overlay {
    width: 100%;
    padding: 10px;
  }
  
  .price__container {
    display: flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    justify-content: space-between;
    padding-bottom: 10px;
  }
  .price__container .price, .price__container .mileage {
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    width: 50%;
  }
  .price__container .price {
    margin-right: 0;
    margin-bottom: 0;
  }
  .price__container .mileage {
    margin-left: 0;
    margin-top: 0;
  }
  
  .tag__container {
    padding-top: 10px;
  }
  
  .selected-vehicle {
    border-width: medium!important;
    border-color: #950014!important;
  }
  
  .selected-vehicle div.vehicle-title {
    background: #950014;
      color: #fff!important;
  }

  /* ==========================================================
            4. Curly Brackets or Objects - End
  ============================================================= */
  
  /* ==========================================================
            5. Others - Start
  ============================================================= */
  
  /* ==========================================================
            5. Others - End
  ============================================================= */
  
  
  /* ==================================================================================================
                                        I - Mobile - End
  ===================================================================================================== */
  
  
  /* ==================================================================================================
                                        II - Large Mobile - Start
  ===================================================================================================== */
  
  @media (min-width: 480px) {
    
    /* ==========================================================
                1. Typography - Start
    ============================================================= */
    
    /* ==========================================================
                1. Typography - End
    ============================================================= */
  
    /* ==========================================================
                2. Layout - Start
    ============================================================= */
    
    /* ==========================================================
                2. Layout - End
    ============================================================= */
  
    /* ==========================================================
                3. Curly Brackets or Objects - Start
    ============================================================= */
  
    /* ==========================================================
                3. Curly Brackets or Objects - End
    ============================================================= */
  
  }
  
  /* ==================================================================================================
                                        II - Large Mobile - End
  ===================================================================================================== */
  
  
  /* ==================================================================================================
                                        III - Tablets - Start
  ===================================================================================================== */
  
  @media (max-width: 768px) {
    
    .vehicle-item .vehicle-title {
      display: flex;
      flex-direction: column;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      -ms-flex-direction: column;
      -o-flex-direction: column;
      justify-content: flex-start;
      align-items: center;
    }
  
    .vehicle-results__container .vehicle-item__container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      position: relative;
      width: 100%;
    }
    
    .vehicle-thumbnail div {
      margin: 5px 0;
    }
  
    .vehicle-thumbnail div:first-child {
      margin-top: 0;
    }

    .vehicle-thumbnail div:nth-child(2) {
      display: none;
    }
    
    .vehicle-thumbnail {
      display: flex;
      flex-direction: column;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      -ms-flex-direction: column;
      -o-flex-direction: column;
      width: 100%;
    }
    .vehicle-thumbnail #second {
      display: none;
    }
    
    .vehicle-details {
      width: 100%;
    }
    
    .vehicle-item__container .vehicle-item .details__container .title__container .item {
      width: 100%;
    }
    
    .vehicle-results__container .vehicle-item .cta-overlay {
      width: 100%;
    }
    
    .price__container .price {
      margin-right: 0;
      margin-bottom: 0;
    }
    .price__container .mileage {
      margin-left: 0;
      margin-top: 0;
    }
  
  }
  
  @media (min-width: 769px) {
    
    /* ==========================================================
                1. Typography - Start
    ============================================================= */
  
  	.price__container .value {
        font-size: 26px;
    }
  
    /* ==========================================================
                1. Typography - End
    ============================================================= */
  
    /* ==========================================================
                2. Layout - Start
    ============================================================= */
  
    
    /* WebEd Grid */
    .w-100 {width: 100%;}
    .w-95 {width: 95%;}
    .w-90 {width: 90%;}
    .w-85 {width: 85%;}
    .w-80 {width: 80%;}
    .w-75 {width: 75%;}
    .w-70 {width: 70%;}
    .w-65 {width: 65%;}
    .w-60 {width: 60%;}
    .w-55 {width: 55%;}
    .w-50 {width: 50%;}
    .w-45 {width: 45%;}
    .w-40 {width: 40%;}
    .w-35 {width: 35%;}
    .w-33 {width: 33%;}
    .w-30 {width: 30%;}
    .w-25 {width: 25%;}
    .w-20 {width: 20%;}
    .w-15 {width: 15%;}
    .w-10 {width: 10%;}
    .w-5 {width: 5%;}
  
  
    .content--container {
        padding: 0;
    }
  
  
    .vehicle-item .vehicle-title {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
  
  /*  CONTENT  */
  
  
  
    /* ==========================================================
                2. Layout - End
    ============================================================= */
  
  
    /* ==========================================================
                3. Curly Brackets or Objects - Start
    ============================================================= */
  
  
  /*  SECTION CONTENT  */
  #content {
    padding: 50px;
  }
  /*  SECTION CONTENT  */
  
  
  .vehicle-results__container .vehicle-item__container {
    display: flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    position: relative;
    width: 100%;
  }
  
  .vehicle-thumbnail div {
    margin: 10px 5px;
    width: 50%;
  }
  .vehicle-thumbnail div:first-child {
    margin-top: 10px;
    margin-left: 10px;
  }
  
  .vehicle-thumbnail {
    display: flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    width: 38%;
    margin-top: 10px;
  }
  
  .vehicle-details {
    width: 35%;
  }
  
  .vehicle-item__container .vehicle-item .details__container .title__container .item {
    width: 50%;
    padding-right: 10px;
  }
  
  .vehicle-results__container .vehicle-item .cta-overlay {
    width: 27%;
  }
  
  .price__container .price {
    margin-right: 5px;
    margin-bottom: 0;
  }
  .price__container .mileage {
    margin-left: 5px;
    margin-top: 0;
  }
  
   
    
    /* ==========================================================
                3. Curly Brackets or Objects - End
    ============================================================= */
  
  }
  
  /* ==================================================================================================
                                        III - Tablets - End
  ===================================================================================================== */
  
  
  /* ==================================================================================================
                                        IV - Desktop - Start
  ===================================================================================================== */
  
  @media (min-width: 992px) {
    
    /* ==========================================================
                1. Typography - Start
    ============================================================= */
    
	.price__container .title {
		font-size: 12px;
	}

    /* ==========================================================
                1. Typography - End
    ============================================================= */
  
    /* ==========================================================
                2. Layout - Start
    ============================================================= */
  
  
    /* ==========================================================
                2. Layout - End
    ============================================================= */
  
    /* ==========================================================
                3. Curly Brackets or Objects - Start
    ============================================================= */
  
    /* ==========================================================
                3. Curly Brackets or Objects - End
    ============================================================= */
  
  }
  
  
  
  /* ==================================================================================================
                                        IV - Desktop - End
  ===================================================================================================== */
  
  /* ==================================================================================================
                                        V - Large Desktop - Start
  ===================================================================================================== */
  
  @media (min-width: 1400px) {
    
    /* ==========================================================
                1. Typography - Start
    ============================================================= */
    
	.price__container .value {
        font-size: 28px;
    }

    /* ==========================================================
                1. Typography - End
    ============================================================= */
  
    /* ==========================================================
                2. Layout - Start
    ============================================================= */

    /* ==========================================================
                2. Layout - End
    ============================================================= */
  
    /* ==========================================================
                3. Curly Brackets or Objects - Start
    ============================================================= */
  
    /* ==========================================================
                3. Curly Brackets or Objects - End
    ============================================================= */
  
  }
  
  @media (max-width:1399px) {
  
    /* ==========================================================
                2. Layout - Start
    ============================================================= */
    
    
  
    /* ==========================================================
                2. Layout - End
    ============================================================= */
  }
  
  /* ==================================================================================================
                                        V - Large Desktop - End
  ===================================================================================================== */
  
  
  /* ==================================================================================================
                IMPORTANT: Do not write below this. Kindly write or update the css above.
  ===================================================================================================== */