/*
Theme Name: Car Shop Rivonia
Theme URI: https://www.fusionweb.co.za
Description: Car Shop Rivonia developed by Fusionweb https://www.fusionweb.co.za
Author: Bryn Lotter
Author URI: https://www.fusionweb.co.za
Text Domain: csr
Version: 1.0.0
*/
.back_banner {
  background-color: rgba(0, 0, 0, 0.8); /* Black background with 90% opacity */
  padding: 20px; /* Adjust padding as needed */
  border-radius: 20px 0 20px 0; /* Top-left and bottom-right corners rounded */
 
  
}

.parallax-banner {
    position: relative;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px; /* Adjust based on your needs */
}

@media (max-width: 768px) {
    .parallax-banner {
        background-attachment: scroll;
    }
}
.video {

}

.chevron {
      
      width: 100%;
     
    }
    
.chevron-up {
    width: 100%;
 
    
 
}
.nav-mobile-left {
    list-style-type: none !important;
    text-transform: uppercase;
    font-size: 17px;
}

.nav-mobile-left li {
  list-style-type: none !important;
  
}

.nav .flex-column li {
  list-style-type: none !important;
}

.nav-mobile-left a:link {
    color:white !important;
}

.nav-mobile-left a:active {
    color:white !important;
}
.nav-mobile-left a:visited {
    color:white !important;
}

.nav-mobile-left a:hover {
    color:red !important;
}

.nav-mobile-left li {
    padding-bottom: 10px;
}

.bike_card {
  color: red;
  height: 50rem;
  background-color: #f7f7f7;
  width: 100%;
  box-sizing: border-box;
  border: 15px solid transparent;
  background-clip:padding-box; 
  }
  
.img_block {
    width: 100%;

}

.bike_card:hover {
background-color: white;
-webkit-box-shadow:0 0 20px #c8c6c6; 
 -moz-box-shadow: 0 0 20px #c8c6c6; 
box-shadow:0 0 20px #c8c6c6;
border: 0px solid transparent;

}

.bottom_bike {
width: 100%;
padding: 10px;
}
.title_h {
    margin: 20px;
    line-height: 15px !important;
}
.title_h a {
    color: red;
}
.title_h a:hover {
    color: #222;
}
.title_h_cs {
  
  line-height: 13px !important;
}
.title_h_cs a {
  color: red;
}
.title_h_cs a:hover {
  color: #222;
}
  .container_bike {
    position: relative;
    width: 100%;
  }
  .image_bike {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .bike_card:hover .overlay_bike {
    opacity: 1;
    cursor:pointer;
  }
    
  .text_bike {
    color: white;
    font-size: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .text_bike a{
color:white !important;
  }
  .text_bike a:hover{
    color:red !important;
      }

  .overlay_bike {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: rgba(34, 34, 34, 0.735);

  }


  * {
    box-sizing: border-box;
  }
  
  /* Create three equal columns that floats next to each other */
  .column_bike {
    float: left;
    width: 30%;
   
     /* Should be removed. Only for demonstration */
  }
  
  /* Clear floats after the columns */
  .row_bike:after {
    content: "";
    display: table;
    clear: both;
  }
  
  .column_bike {
    float: left;
    width: 50%;
  }

  .column_showroom {

    float: left;
    width: 50%;
    line-height: 30px !important;
  }
  /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column_bike {
      width: 92%;

      
    } 

    
  #myBtn {

  bottom: 10px; /* Place the button at the bottom of the page */
  right: 10px;
  }

  .column_showroom {
    width: 100%;
 
  }
  }


.bike_type_area_bikes {
      align-items: center !important;
      
      margin-top: 70px;
      margin-right: 0px !important;
      margin-left: 0px !important;
      width: 100% !important;
      margin-bottom: 70px;
    }

.bike_card_make {
color:red;
font-weight: 400 bold;
font-family: "Inter", sans-serif;
display: block;

text-align: left;    
    }

.bike_card_model{
      color:#222;
      font: bold 22px "Inter", sans-serif;
      letter-spacing: 1.6px;
      display: block;

      text-align: left;    
    }

.bike_card_model_sub {
color:#666;
display: block;
font-family: "Inter", sans-serif;
font-size: 12px;
    text-align: left;    
    }

    .bike_price {
      color:red;
      font: bold 30px "Inter", sans-serif;
      display: block;
      
      text-align: left;
    }

    /* Create three equal columns that floats next to each other */
.column_year {
  float: left;
  width: 33.33%;
  height: 50px;
  
  line-height: 15px !important;
   /* Should be removed. Only for demonstration */
}
.column_year h5 {
  font-size: 15px;
  color: #222;
  text-align: center;
}

.column_year p {
  color: #222;
  text-align: center;
  
}
/* Clear floats after the columns */
.row_year:after {
  content: "";
  display: table;
  clear: both;
}

#table1 {
  border-collapse: separate !important;
  border-spacing: 0px !important;
}

.bike_specs {
color:#666;
display: block;
font-family: "Inter", sans-serif;
font-size: 13px;
text-align: left; 
}

.bike_specs_info {
color:#666;
display: block;
font-family: "Inter", sans-serif;
font-size: 13px;
text-align: left; 
}

td {
  padding: 0px !important;
  vertical-align: middle !important;
}

tr {
  padding: 0px !important;
}

table {
  padding: 0px !important;
  border-spacing: 0px !important;
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 60px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: rgba(0, 0, 0, 0); /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 0px;
  
  border-radius: 50px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

html {
  scroll-behavior: smooth;
}

.col-sm-4 {
  width: 100% !important;
  padding: 0px !important;

}

.bikeshop_text {
  font: bold 40px "Inter", sans-serif;
  color: red;
  /* Keyword values */
  writing-mode: vertical-rl;
  text-orientation: upright;
 
}
.caro_cs {
  padding: 15px;
  
}
.caro_dt {
  background-color: #fff;
}

.btn_wds {
  width: 100% !important;
}

.container_cs {
  padding: 10p;
}

.phone_ic_box {
  margin-top: 30px;
background-color: #222;
color:#fff;
padding: 15px;
border-radius: 10px;
}

.phone_ic_box:hover {
  background-color: #000;
  color:rgb(255, 0, 0);
}

.phone_ic_box .icon-phone_2 {
  color:red !important;
  text-decoration: none; 
  width: 40px !important;
  font-size: 30px !important;

}

.phone_ic_box .icon-phone_2:hover {
  background-color:white !important;
}

.wide_side {
  width: 100% !important; 
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --select-border: #777;
  --select-focus: blue;
  --select-arrow: var(--select-border);
}


.uk-input {

  font: normal 400 16px/3.56 ;
  background: #ffffff;
  height: 57px;
  padding-left: 25px;
  border-radius: 3px;
  color: #222222;
}

.uk-input::-webkit-input-placeholder {
  font: normal 400 16px ;
  color: #888888;
}

.uk-input::-moz-placeholder {
  font: normal 400 16px ;
  color: #888888;
}

.uk-input:-ms-input-placeholder {
  font: normal 400 16px ;
  color: #888888;
}

.uk-input::-ms-input-placeholder {
  font: normal 400 16px ;
  color: #888888;
}

.uk-input::placeholder {
  font: normal 400 16px ;
  color: #888888;
}

.uk-select {
  font: normal 400 16px ;
  color: #222222;
  background-color:#fff;
  background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
	-moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
    /* and then whatever styles you want*/
	height: 30px; 
	width: 100px;
	padding: 5px;
  
}

.uk-select::-webkit-input-placeholder {
  font: normal 400 16px ;
  color: #888888;
}

.uk-select::-moz-placeholder {
  font: normal 400 16px ;
  color: #888888;
}

.uk-select:-ms-input-placeholder {
  font: normal 400 16px ;
  color: #888888;
}

.uk-select::-ms-input-placeholder {
  font: normal 400 16px ;
  color: #888888;
}

.uk-select::placeholder {
  font: normal 400 16px ;
  color: #888888;
}

.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
  border-color: #e63619;
}

.uk-input,
.uk-textarea {
  font: normal 400 16px ;
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 3px;
  color: #777777;
}

.uk-input::-webkit-input-placeholder,
.uk-textarea::-webkit-input-placeholder {
  font: normal 400 16px ;
  color: #777777;
}

.uk-input::-moz-placeholder,
.uk-textarea::-moz-placeholder {
  font: normal 400 16px ;
  color: #777777;
}

.uk-input:-ms-input-placeholder,
.uk-textarea:-ms-input-placeholder {
  font: normal 400 16px ;
  color: #777777;
}

.uk-input::-ms-input-placeholder,
.uk-textarea::-ms-input-placeholder {
  font: normal 400 16px ;
  color: #777777;
}

.uk-input::placeholder,
.uk-textarea::placeholder {
  font: normal 400 16px ;
  color: #777777;
}

.uk-textarea {
  height: 120px;
  padding-top: 15px;
}

.uk-dotnav > * > * {
  background: #dddddd;
  width: 21px;
  height: 21px;
  border: 6px solid #ffffff;
  border-radius: 0;
  outline: 1px solid transparent;
}

.uk-dotnav > .uk-active > * {
  border: 6px solid #ffffff;
  outline: 1px solid #e63619;
}

.uk-dotnav > * > :hover {
  border: 6px solid #ffffff;
  outline: 1px solid transparent;
}

.uk-pagination {
  background: #f8f8f8;
  margin-bottom: 0;
  padding: 15px 50px;
}

.uk-pagination > * > * {
  font: normal 500 18px/1.3 ;
  padding: 2px 10px;
  color: #777777;
  text-transform: uppercase;
}

.uk-pagination > li:first-child a,
.uk-pagination > li:last-child a {
  background: #222222;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-sizing: border-box;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: block;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #ffffff;
  transition: 0.3s;
}

.uk-pagination > li:first-child a:hover,
.uk-pagination > li:first-child a:focus,
.uk-pagination > li:first-child a:active,
.uk-pagination > li:last-child a:hover,
.uk-pagination > li:last-child a:focus,
.uk-pagination > li:last-child a:active {
  background: #e63619;
}

.uk-pagination > li:first-child {
  margin-right: 30px;
}

.uk-pagination > li:last-child {
  margin-left: 30px;
}

.uk-pagination > .uk-active > * {
  color: #e63619;
}

.widjet {
  padding: 0 30px;
}

.widjet + .widjet {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #eee;
}

.widjet__title {
  display: block;
  position: relative;
  margin-bottom: 30px;
}

.widjet__title::before {
  background: #e63619;
  display: block;
  position: absolute;
  top: 0;
  left: -30px;
  width: 1px;
  height: 100%;
  content: '';
}

.widjet__title .uk-h4 {
  font: normal 500 22px/1.1 ;
  margin: 0;
  color: #222222;
  text-transform: uppercase;
}

.widjet__title span {
  font: normal 300 12px/1.1 ;
  color: #666666;
  text-transform: uppercase;
}

.widjet__content {
  display: block;
  position: relative;
}

.range-box__desc {
  font: normal 400 14px/1 ;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 20px;
  color: #777777;
}

.range-box__desc input {
  font: normal 700 16px/1 ;
  display: inline-block;
  width: 60px;
  min-width: auto;
  margin-top: -2px;
  border: none;
  outline: none;
  background: none;
  color: #222222;
  letter-spacing: normal;
  text-align: center;
  pointer-events: none;
}

.range-box {
  display: block;
  position: relative;
}

.range-box .irs--round {
  top: -25px;
  height: 20px;
}

.range-box .irs--round .irs-line {
  background: #eeeeee;
}

.range-box .irs--round .irs-bar {
  background: #666666;
}

.range-box .irs--round .irs-handle {
  background: url(img/icon/range-slider.svg) 0 0/cover transparent;
  -webkit-box-shadow: none;
  top: 15px;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.uk-form-large:not(textarea):not([multiple]):not([size]) {
  height: 50px;
}
select {
  background-color: #fff !important;
}
.sorting {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-box-align: center;
  -ms-flex-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 50px;
}

.sorting-left {
  display: block;
  position: relative;
}

.sorting-right {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.uk-h4 {
  font-weight: bold;
}