/*
 Theme Name:   TruckRecord
 Theme URI:    http://www.truckrecord.com.au
 Description:  Child theme for the Truck Record website
 Author:       CarRecord Pty Ltd
 Author URI:   http://www.carrecord.com.au
 Template:     kleo
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  kleo
*/

input#vin-search, input#vin-search-submit {
  line-height: 48px;
  float: left;
  border: 0;
  padding: 0;
  margin: 0;
}

#vin-search {
  border-radius: 5px 0 0 5px;
  float: left;
  padding: 0 10px !important;
  opacity: 1;
  font-size: 20px;
  text-align: center;
  box-sizing: border-box;
  width: calc(100% - 50px);
}

#vin-search-submit:focus {
  outline: none;
}

#vin-search-submit {
  background-color: #5bb75b;
  background-image: -moz-linear-gradient(top, #62c462, #51a351);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
  background-image: -webkit-linear-gradient(top, #62c462, #51a351);
  background-image: -o-linear-gradient(top, #62c462, #51a351);
  background-image: linear-gradient(to bottom, #62c462, #51a351);
  background-repeat: repeat-x;
  border-color: #51a351 #51a351 #387038;
  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
  border-radius: 0 5px 5px 0;
  padding: 0 0 !important;
  font-size: 28px;
  cursor: pointer;
  width: 50px !important;
  color: #FFF !important;
}

div#socket {
	display: none;
}

#cant-find-vin {
  color: #FFF;
}

#cant-find-vin > p {
  display: inline-block;
  text-decoration: underline;
  cursor: help;
}

#cant-find-vin > p:hover ~ #cant-find-vin-tooltip, #cant-find-vin-tooltip:hover {
  display: block;
}

#cant-find-vin-tooltip {
  text-align: left;
  border: 5px solid rgba(0,0,0,0.3);
  display: none;
  font-size: 14px;
  margin-top: -50px;
  padding: 10px;
  background: rgba(0,0,0,0.9);
  color: #eee;
  width: 400px;
  position: absolute;
  top: 70px;
  left: 50%;
  margin-left: -205px;
  z-index: 99;
}

@media screen and (max-width: 420px) {

  #cant-find-vin-tooltip {
	text-align: left;
	border: 5px solid rgba(0,0,0,0.3);
	display: none;
	font-size: 14px;
	margin-top: -50px;
	padding: 10px;
	background: rgba(0,0,0,0.9);
	color: #eee;
	width: 300px;
	position: absolute;
	top: 70px;
	left: 50%;
	margin-left: -155px;
	z-index: 99;
  }
}

#cant-find-vin-tooltip > ul {
  margin: 0;
  padding: 20px 0 20px 20px;
}

#cant-find-vin-tooltip > a {
  color: #FFF;
  font-weight: 600;
  text-decoration: underline;
}

#cant-find-vin-tooltip > a:hover {
  color: #EEE;
  font-weight: 600;
  text-decoration: none;
}


@media screen and (max-width: 768px) {
    .margin-top {
	margin-top: 21.7px;
    }
}

@media screen and (max-width: 1280px) {
    article > div.article-content > section.container-wrap.main-color.text-center {
        padding-top: 80px !important;
    }
}

.value {
  padding: 20px 10px;
}

.value > ul {
  padding-left: 0;
  margin: 0;
}

.value > ul > li {
  list-style-type: none;
  color: #FFF;
  font-family: Roboto Condensed;
  font-size: 1.1em;
}

.value > ul > li:before {
  content: '✔︎';
  color: #58B158;
  margin-right: 10px;
}

.price-holder > img {
  width: 30vw;
  max-width: 300px;
  min-width: 110px;
}

.flex-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flex-item {
  flex-basis: 1;
}

@media screen and (max-width: 768px) {

	h2.text-center {
		font-size: 16px;
	}

  div.wrap-content > article > div.article-content > section.container-wrap.main-color.text-center {
    padding-top: 1.5vh !important;
		padding-bottom: 1.5vh !important;
	}

  div.wrap-content > article > div.article-content > section.container-wrap.main-color.text-center h1 {
    font-size: 28px;
    text-shadow: 2px 2px 1px black;
    margin-bottom: 10px;
  }

  div.wrap-content > article > div.article-content > section.container-wrap.main-color.text-center div.kleo_text_column.wpb_content_element.lead strong {
    font-size: 16px;
  }

  div.wrap-content > article > div.article-content > section.container-wrap.main-color.text-center div.kleo_text_column.wpb_content_element {
    margin-bottom: 20px;
  }

  .margin-top {
	  margin-top: 21.7px;
  }

  .wpb_column.vc_column_container.vc_col-sm-3 {
    float: left;
    width: 49.5%;
  }

  h2.text-center {
    line-height: 22px;
    margin: 5px 0;
  }

}

@media screen and (min-width: 360px) {
  .value > ul > li {
    line-height: 20px;
    font-size: 18px;
  }
  section.container-wrap.main-color.text-center div.kleo_text_column.wpb_content_element.text-shadow.lead > div > p {
    line-height: 20px;
  }
}

@media screen and (min-width: 414px) {
  .value > ul > li {
    line-height: 24px;
  }
}

@media screen and (min-width: 768px) {
  .value > ul > li {
    line-height: 30px;
    font-size: 20px;
  }
	h2.text-center {
		font-size: 22px;
	}
}

@media screen and (min-width: 992px) {
  .navbar-header {
    width: 20% !important;
  }
}

@media screen and (min-width: 1024px) {
  .value > ul > li {
    line-height: 32px;
    font-size: 24px;
  }
  section.container-wrap.main-color.text-center div.kleo_text_column.wpb_content_element.text-shadow.lead > div > p {
    line-height: 32px;
  }
	h2.text-center {
		font-size: 24px;
	}
}

@media screen and (min-width: 1152px) {
  .value > ul > li {
    line-height: 36px;
  }
}

@media screen and (min-width: 1280px) {
  .value > ul > li {
    line-height: 38px;
  }
}

@media screen and (min-width: 1440px) {
    .navbar-header {
        width: auto;
    }
		h2.text-center {
			font-size: 28px;
		}
}

.text-shadow {
    text-shadow: 2px 2px 2px black;
}

.collapse.navbar-collapse.nav-collapse {
    width: 80%;
}

.kleo-main-header .navbar-collapse > ul > li > a {
    margin: 0;
}

.navbar-nav {
    float: right !important;
}