@import url(_reset.css);
@import url(font-awesome.css);
.cl {
  clear: both; }

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .flex-between--wrap {
    flex-wrap: wrap; }

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

.htitle {
  font-size: 35px;
  font-weight: 300; }

a {
  color: inherit;
  text-decoration: none; }

a.blue-button {
  color: white;
  background-color: #2f83eb;
  padding: 10px 25px;
  display: inline-block;
  margin: 20px 0; }

b, strong {
  font-weight: 700; }

h1 {
  font-size: 32px;
  font-weight: 400;
  text-transform: uppercase; }

body {
  min-width: 1280px;
  color: #000;
  font-family: "Open Sans";
  font-size: 16px;
  color: #333; }

.wrap {
  width: 1280px;
  margin: 0 auto;
  position: relative; }

section {
  background-color: #333333;
  width: 100%;
  padding: 10px 0; }
  section .top-menu {
    width: 850px; }
    section .top-menu ul {
      display: flex;
      align-items: center;
      justify-content: space-around; }
      section .top-menu ul li a {
        color: white; }
  section .phone {
    color: #edb00d;
    font-size: 24px; }
  section.bottom .phone {
    font-size: 20px; }

.filter {
  margin-top: 20px; }
  .filter-item {
    width: 320px;
    height: 250px; }
    .filter-item .min-price {
      width: 100%;
      height: 210px;
      position: relative;
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat; }
      .filter-item .min-price span {
        position: absolute;
        left: 0;
        top: 0;
        background-color: #2f83eb;
        color: white;
        padding: 10px 20px; }
    .filter-item .title {
      font-weight: 300;
      text-align: center;
      font-size: 30px; }

.cars {
  margin: 20px 0;
  margin-top: 50px; }
  .cars-item {
    width: 280px;
    box-shadow: 0 0 9px 2px #ccc; }
    .cars-item .photo {
      width: 100%;
      height: 190px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      position: relative; }
      .cars-item .photo span {
        position: absolute;
        top: 0;
        left: 0;
        padding: 10px 15px;
        color: white;
        background-color: #2f83eb; }
    .cars-item .info {
      padding: 10px; }
      .cars-item .info .title {
        font-weight: 600;
        padding: 5px 0; }
      .cars-item .info .introtext {
        height: 50px;
        text-align: justify; }
    .cars-item .button {
      width: 100%;
      display: block;
      text-align: center;
      background-color: #edb00d;
      padding: 10px 0;
      color: white; }

.services {
  margin: 20px 0; }
  .services-item {
    width: 426.6666666667px;
    height: 270px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center; }
    .services-item .border-button {
      color: white;
      border: 2px solid white;
      padding: 10px 50px; }
      .services-item .border-button:hover {
        border: 2px solid #edb00d;
        background-color: #edb00d; }

.knowledge {
  background-color: #f8f8f8;
  width: 100%;
  padding: 30px 0;
  margin-bottom: 30px; }
  .knowledge .context {
    margin-top: 20px; }
    .knowledge .context .questions {
      width: 50%;
      float: left; }
      .knowledge .context .questions .question {
        width: 80%;
        padding: 0px 10px;
        height: 70px;
        position: relative;
        display: flex;
        align-items: center;
        border-left: 3px solid #f8f8f8; }
        .knowledge .context .questions .question.active {
          border-left: 3px solid #edb00d;
          background-color: #e6e6e6; }
          .knowledge .context .questions .question.active::after {
            content: '';
            border: 35px solid transparent;
            border-left: 25px solid #e6e6e6;
            position: absolute;
            right: -60px;
            top: 0; }
    .knowledge .context .answers {
      width: 50%;
      float: right; }
      .knowledge .context .answers .hor {
        width: 100px;
        height: 3px;
        background-color: #edb00d;
        margin-bottom: 20px; }
      .knowledge .context .answers .answer {
        display: none; }
        .knowledge .context .answers .answer.active {
          display: block; }

.about {
  line-height: 19px;
  text-align: justify;
  margin-bottom: 20px; }
  .about img {
    margin-left: 10px; }

.bc {
  margin: 20px 0;
  font-size: 14px;
  text-transform: uppercase; }

.content {
  margin-bottom: 40px; }
  .content .cars-item {
    margin: 20px 0; }

.car-info {
  height: 420px; }
  .car-info .photo {
    float: left;
    width: 550px;
    height: 100%; }
  .car-info .other-photos {
    float: left;
    display: none; }
  .car-info .info {
    float: right;
    width: 730px;
    box-sizing: border-box;
    background-color: #e6e6e6;
    padding: 20px;
    padding-left: 20px;
    height: 420px; }
    .car-info .info .price table {
      width: 100%;
      margin-top: 20px; }
      .car-info .info .price table tr td {
        padding: 5px; }
        .car-info .info .price table tr td:first-child {
          padding-left: 0; }
    .car-info .info .price .button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #edb00d;
      color: white; }
    .car-info .info .text {
      height: 240px;
      overflow-y: scroll; }