/**
 * Template Name: Avtouzbegim
 * Description: Avtouzbegim - Rent Car in Tashkent
 * Template URL: http://autoprokat.uz/
 * Version: 1.0
 */

/* ==================================================================
	 Basic document styles
================================================================== */

html,
body {
  height: 100%;
}

body {
  position: relative;
  color: #fff;
  font-size: 14px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  line-height: 1.42857;
}

a {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

/* ==================================================================
	 Typography
================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.1;
}

h1 {
  font-weight: 700;
  color: #e74a39;
  line-height: 1.1;
}

.Phone {
  position: relative;
  display: block;
  margin: 0;
  width: 1em;
  height: 1em;
  font-size: 25vmin;
  background-color: #3498db;
  border-radius: 0.5em;
  box-shadow: 0 0 0 0em rgba(#3498db, 0), 0em 0.05em 0.1em rgba(#000000, 0.2);
  transform: translate3d(0, 0, 0) scale(1);
}

.Phone::before,
.Phone::after {
  position: absolute;
  content: '';
}

.Phone::before {
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  background-color: rgba(#fff, 0.1);
  border-radius: 100%;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(0);
}

.social {
  width: 200px;
  height: 220px;
  position: fixed;
  margin-top: 30px;
  perspective: 1000px;
}

.social li a {
  display: block;
  height: 20px;
  width: 40px;
  background: #222;
  border-bottom: 1px solid #333;
  font: normal normal normal 16px/20px 'FontAwesome', 'Source Sans Pro',
    Helvetica, Arial, sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  padding: 10px;
  text-decoration: none;
  text-align: center;
  transition: background 0.5s ease 0.3ms;
}

.social li:first-child a:hover {
  background: #3b5998;
}

.social li:nth-child(2) a:hover {
  background: #00acee;
}

.social li:nth-child(3) a:hover {
  background: #ea4c89;
}

.social li:nth-child(4) a:hover {
  background: #dd4b39;
}

.social li:first-child a {
  border-radius: 0 5px 0 0;
}

.social li:last-child a {
  border-radius: 0 0 5px 0;
}

.social li a span {
  width: 100px;
  float: left;
  text-align: center;
  background: #222;
  color: #fff;
  margin: -25px 74px;
  padding: 8px;
  transform-origin: 0;
  visibility: hidden;
  opacity: 0;
  transform: rotateY(45deg);
  border-radius: 5px;
  transition: all 0.5s ease 0.3ms;
}

.social li span:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: -20px;
  top: 7px;
  border: 10px solid transparent;
  border-right: 10px solid #222;
}

.theme-blue {
  .badge {
    &.badge-primary {
      background-color: #005eaa !important;
      &.badge-right:after {
        border-left-color: #005eaa;
      }
      &.badge-left:before {
        border-right-color: #005eaa;
      }
    }
    &.badge-secondary {
      background-color: #88c3ea !important;
      &.badge-right:after {
        border-left-color: #88c3ea;
      }
      &.badge-left:before {
        border-right-color: #88c3ea;
      }
    }
    &.badge-tertiary {
      background-color: #c0e9ff !important;
      &.badge-right:after {
        border-left-color: #c0e9ff;
      }
      &.badge-left:before {
        border-right-color: #c0e9ff;
      }
    }
    &.badge-quaternary {
      background-color: #edf9ff !important;
      &.badge-right:after {
        border-left-color: #edf9ff;
      }
      &.badge-left:before {
        border-right-color: #edf9ff;
      }
    }
  }
}

.theme-amber {
  .badge {
    &.badge-primary {
      background-color: #fbab18 !important;
      &.badge-right:after {
        border-left-color: #fbab18;
      }
      &.badge-left:before {
        border-right-color: #fbab18;
      }
    }
    &.badge-secondary {
      background-color: #ffd54f !important;
      &.badge-right:after {
        border-left-color: #ffd54f;
      }
      &.badge-left:before {
        border-right-color: #ffd54f;
      }
    }
    &.badge-tertiary {
      background-color: #ffecb3 !important;
      &.badge-right:after {
        border-left-color: #ffecb3;
      }
      &.badge-left:before {
        border-right-color: #ffecb3;
      }
    }
    &.badge-quaternary {
      background-color: #fff7e1 !important;
      &.badge-right:after {
        border-left-color: #fff7e1;
      }
      &.badge-left:before {
        border-right-color: #fff7e1;
      }
    }
  }
}

.badge-corner:empty {
  display: inline-block;
}
.badge-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 66px solid #888;
  border-top-color: rgba(0, 0, 0, 0.3);
  border-left: 66px solid transparent;
  padding: 0;
  background-color: transparent;
  border-radius: 0;
}
.badge-corner span {
  position: absolute;
  top: -52px;
  left: -28px;
  font-size: 16px;
  color: #fff;
}
.badge-corner-base {
  border-top-color: #3498db;
}
.badge-corner-alt {
  border-top-color: #9cd70e;
}
.badge-corner-light {
  border-top-color: #ecf0f1;
}
.badge-corner-light span {
  color: #2c3e50;
}
.badge-corner-dark {
  border-top-color: #131313;
}
.badge-corner-orange {
  border-top-color: #ff8a3c;
}

.social li a:hover span {
  visibility: visible;
  opacity: 1;
  transform: rotateY(0);
}

.Phone::after {
  top: 0.25em;
  left: 0.25em;
  width: 0.5em;
  height: 0.5em;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTYuNiAxMC44YzEuNCAyLjggMy44IDUuMSA2LjYgNi42bDIuMi0yLjJjLjMtLjMuNy0uNCAxLS4yIDEuMS40IDIuMy42IDMuNi42LjUgMCAxIC40IDEgMVYyMGMwIC41LS41IDEtMSAxLTkuNCAwLTE3LTcuNi0xNy0xNyAwLS42LjQtMSAxLTFoMy41Yy41IDAgMSAuNCAxIDEgMCAxLjIuMiAyLjUuNiAzLjYuMS40IDAgLjctLjIgMWwtMi4zIDIuMnoiIGZpbGw9IiNmZmZmZmYiLz48L3N2Zz4=);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  transform: translate3d(0, 0, 0);
}

.Phone.is-animating {
  animation: phone-outer 3000ms infinite;

  &::before {
    animation: phone-inner 3000ms infinite;
  }

  &::after {
    animation: phone-icon 3000ms infinite;
  }
}

@keyframes phone-outer {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow: 0 0 0 0em rgba(#3498db, 0), 0em 0.05em 0.1em rgba(#000000, 0.2);
  }
  33.3333% {
    transform: translate3d(0, 0, 0) scale(1.1);
    box-shadow: 0 0 0 0em rgba(#3498db, 0.1),
      0em 0.05em 0.1em rgba(#000000, 0.5);
  }
  66.6666% {
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow: 0 0 0 0.5em rgba(#3498db, 0),
      0em 0.05em 0.1em rgba(#000000, 0.2);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow: 0 0 0 0em rgba(#3498db, 0), 0em 0.05em 0.1em rgba(#000000, 0.2);
  }
}

@keyframes phone-inner {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(0);
  }
  33.3333% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(0.9);
  }
  66.6666% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0);
  }
}

@keyframes phone-icon {
  0% {
    transform: translate3d(0em, 0, 0);
  }
  2% {
    transform: translate3d(0.01em, 0, 0);
  }
  4% {
    transform: translate3d(-0.01em, 0, 0);
  }
  6% {
    transform: translate3d(0.01em, 0, 0);
  }
  8% {
    transform: translate3d(-0.01em, 0, 0);
  }
  10% {
    transform: translate3d(0.01em, 0, 0);
  }
  12% {
    transform: translate3d(-0.01em, 0, 0);
  }
  14% {
    transform: translate3d(0.01em, 0, 0);
  }
  16% {
    transform: translate3d(-0.01em, 0, 0);
  }
  18% {
    transform: translate3d(0.01em, 0, 0);
  }
  20% {
    transform: translate3d(-0.01em, 0, 0);
  }
  22% {
    transform: translate3d(0.01em, 0, 0);
  }
  24% {
    transform: translate3d(-0.01em, 0, 0);
  }
  26% {
    transform: translate3d(0.01em, 0, 0);
  }
  28% {
    transform: translate3d(-0.01em, 0, 0);
  }
  30% {
    transform: translate3d(0.01em, 0, 0);
  }
  32% {
    transform: translate3d(-0.01em, 0, 0);
  }
  34% {
    transform: translate3d(0.01em, 0, 0);
  }
  36% {
    transform: translate3d(-0.01em, 0, 0);
  }
  38% {
    transform: translate3d(0.01em, 0, 0);
  }
  40% {
    transform: translate3d(-0.01em, 0, 0);
  }
  42% {
    transform: translate3d(0.01em, 0, 0);
  }
  44% {
    transform: translate3d(-0.01em, 0, 0);
  }
  46% {
    transform: translate3d(0em, 0, 0);
  }
}

/* ==================================================================
	 Form
================================================================== */

.form-field,
.form-group {
  padding: 0;
  margin: 0 0 10px 0;
  border: none;
}

.form-control {
  position: relative;
}
/* ==== PHONE ==== */
.phone-button {
  position: fixed;
  right: 5%;
  bottom: 5%;
  transform: translate(-50%, -50%);
  background: #e74a39;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  color: #fff;
  text-align: center;
  line-height: 100px;
  font-size: 50px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-button a {
  color: #fff;
}

#bg_popup {
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#popup {
  background: #fff;
  width: 520px;
  margin: 25% auto;
  padding: 5px 20px 13px 20px;
  border: 2px solid #1ba600;
  position: relative;
  -webkit-box-shadow: 0px 0px 20px #000;
  -moz-box-shadow: 0px 0px 20px #000;
  box-shadow: 0px 0px 20px #000;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

.close {
  display: block;
  position: absolute;
  top: -12px;
  right: 5px;
  width: 25px;
  height: 25px;
  line-height: 28px;
  color: #fff;
  background: #1ba600;
  cursor: pointer;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  border-radius: 15px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}
.close:hover {
  background-color: #f30;
}

.phone-button:before,
.phone-button:after {
  content: ' ';
  display: block;
  position: absolute;
  border: 50%;
  border: 1px solid #e74a39;
  left: -20px;
  right: -20px;
  top: -20px;
  bottom: -20px;
  border-radius: 50%;
  animation: animate 1.5s linear infinite;
  opacity: 0;
  backface-visibility: hidden;
}
.phone-button:after {
  animation-delay: 0.5s;
}
.phone-button i {
  color: #fff;
  transition: 0.3s;
  animation: 1200ms ease 0s normal none 1 running shake;
  animation-iteration-count: infinite;
}
@keyframes animate {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@keyframes shake {
  0% {
    transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
  }
  10% {
    transform: rotateZ(-30deg);
    -ms-transform: rotateZ(-30deg);
    -webkit-transform: rotateZ(-30deg);
  }
  20% {
    transform: rotateZ(15deg);
    -ms-transform: rotateZ(15deg);
    -webkit-transform: rotateZ(15deg);
  }
  30% {
    transform: rotateZ(-10deg);
    -ms-transform: rotateZ(-10deg);
    -webkit-transform: rotateZ(-10deg);
  }
  40% {
    transform: rotateZ(7.5deg);
    -ms-transform: rotateZ(7.5deg);
    -webkit-transform: rotateZ(7.5deg);
  }
  50% {
    transform: rotateZ(-6deg);
    -ms-transform: rotateZ(-6deg);
    -webkit-transform: rotateZ(-6deg);
  }
  60% {
    transform: rotateZ(5deg);
    -ms-transform: rotateZ(5deg);
    -webkit-transform: rotateZ(5deg);
  }
  70% {
    transform: rotateZ(-4.28571deg);
    -ms-transform: rotateZ(-4.28571deg);
    -webkit-transform: rotateZ(-4.28571deg);
  }
  80% {
    transform: rotateZ(3.75deg);
    -ms-transform: rotateZ(3.75deg);
    -webkit-transform: rotateZ(3.75deg);
  }
  90% {
    transform: rotateZ(-3.33333deg);
    -ms-transform: rotateZ(-3.33333deg);
    -webkit-transform: rotateZ(-3.33333deg);
  }
  100% {
    transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
  }
}

/* ========= PHONE END ======== */

/* ==== LANG ==== */
.lang-button {
  position: fixed;
  right: 5%;
  bottom: 28%;
  transform: translate(-50%, -50%);
  background: #e74a39;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  color: #fff;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  z-index: 9999;
}
.lang-button a {
  color: #fff;
}
.lang-button:before,
.lang-button:after {
  content: ' ';
  display: block;
  position: absolute;
  border: 50%;
  border: 1px solid #e74a39;
  left: -20px;
  right: -20px;
  top: -20px;
  bottom: -20px;
  border-radius: 50%;
  animation: animate 1.5s linear infinite;
  opacity: 0;
  backface-visibility: hidden;
}
.lang-button:after {
  animation-delay: 0.5s;
}
.lang-button i {
  color: #fff;
  transition: 0.3s;
  animation: 1200ms ease 0s normal none 1 running shake;
  animation-iteration-count: infinite;
}
@keyframes animate {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@keyframes shake {
  0% {
    transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
  }
  10% {
    transform: rotateZ(-30deg);
    -ms-transform: rotateZ(-30deg);
    -webkit-transform: rotateZ(-30deg);
  }
  20% {
    transform: rotateZ(15deg);
    -ms-transform: rotateZ(15deg);
    -webkit-transform: rotateZ(15deg);
  }
  30% {
    transform: rotateZ(-10deg);
    -ms-transform: rotateZ(-10deg);
    -webkit-transform: rotateZ(-10deg);
  }
  40% {
    transform: rotateZ(7.5deg);
    -ms-transform: rotateZ(7.5deg);
    -webkit-transform: rotateZ(7.5deg);
  }
  50% {
    transform: rotateZ(-6deg);
    -ms-transform: rotateZ(-6deg);
    -webkit-transform: rotateZ(-6deg);
  }
  60% {
    transform: rotateZ(5deg);
    -ms-transform: rotateZ(5deg);
    -webkit-transform: rotateZ(5deg);
  }
  70% {
    transform: rotateZ(-4.28571deg);
    -ms-transform: rotateZ(-4.28571deg);
    -webkit-transform: rotateZ(-4.28571deg);
  }
  80% {
    transform: rotateZ(3.75deg);
    -ms-transform: rotateZ(3.75deg);
    -webkit-transform: rotateZ(3.75deg);
  }
  90% {
    transform: rotateZ(-3.33333deg);
    -ms-transform: rotateZ(-3.33333deg);
    -webkit-transform: rotateZ(-3.33333deg);
  }
  100% {
    transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
  }
}

.dettex {
  color: #000;
}

/* ========= LANG END ======== */

.form-control input,
.form-control select {
  position: relative;
  padding: 0 15px;
  width: 100%;
  height: 35px;
  border: none;
  background-color: transparent;
  box-sizing: border-box;
  font-family: 'Roboto Condensed', sans-serif;
  z-index: 2;
  border-radius: 0;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.form-control select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.form-control select option {
  padding: 5px 15px;
  background: #283c4f;
  color: #fff;
}

.form-control input:focus,
.form-control select:focus {
  outline: none;
}

.form-control input::-webkit-input-placeholder {
  color: inherit;
  opacity: 1 !important;
}

.form-control input:-moz-placeholder {
  opacity: 1;
}

.form-control input::-moz-placeholder {
  opacity: 1;
}

.form-control input:-ms-input-placeholder {
  opacity: 1;
}

.form-control .fa {
  position: absolute;
  top: 10px;
  right: 15px;
  z-index: 1;
}

.form-control .fa + input {
  padding-right: 35px;
}

.form-group {
  margin: 0 -13px 10px;
}

.form-group .form-control {
  float: left;
  width: 50%;
  padding-left: 13px;
  padding-right: 13px;
  box-sizing: border-box;
}

.form-group .form-control .fa {
  right: 30px;
}

/* ==================================================================
	 .clearfix
================================================================== */

.clearfix:after,
.container:after,
.cars-list:after,
.about_row:after,
.advantages_item:after {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* ==================================================================
     .pickmeup
================================================================== */

.pickmeup {
  background: #283c4f;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  display: none;
  position: absolute;
  z-index: 9;
  box-shadow: 0px -3px 0 #e74a39, 0 0 5px rgba(0, 0, 0, 0.3);
}

.pickmeup * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.pickmeup .pmu-instance {
  display: inline-block;
  padding: 0.5em;
  text-align: center;
  width: 15em;
}

.pickmeup .pmu-instance .pmu-button {
  color: #eee;
  cursor: pointer;
  outline: none;
  text-decoration: none;
}

.pickmeup .pmu-instance .pmu-today {
  background: rgba(231, 74, 57, 0.5);
  color: #fff;
}

.pickmeup .pmu-instance .pmu-button:hover {
  background: 'transparent';
  color: #b6b9ba;
}

.pickmeup .pmu-instance .pmu-not-in-month {
  color: #666;
}

.pickmeup .pmu-instance .pmu-disabled,
.pickmeup .pmu-instance .pmu-disabled:hover {
  color: #333;
  cursor: default;
}

.pickmeup .pmu-instance .pmu-selected {
  background: #e74a39;
  color: #eee;
}

.pickmeup .pmu-instance .pmu-not-in-month.pmu-selected {
  background: rgba(231, 74, 57, 0.5);
}

.pickmeup .pmu-instance nav {
  margin-bottom: 10px;
  color: #eee;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  line-height: 2em;
}

.pickmeup .pmu-instance nav *:first-child :hover {
  color: #88c5eb;
}

.pickmeup .pmu-instance nav .pmu-prev,
.pickmeup .pmu-instance nav .pmu-next {
  display: none;
  height: 2em;
  width: 1em;
}

.pickmeup .pmu-instance nav .pmu-month {
  width: 14em;
}

.pickmeup .pmu-instance .pmu-years *,
.pickmeup .pmu-instance .pmu-months * {
  display: inline-block;
  line-height: 3.6em;
  width: 3.5em;
}

.pickmeup .pmu-instance .pmu-day-of-week {
  color: #999;
  cursor: default;
  border-top: 1px solid #354759;
  border-bottom: 1px solid #354759;
}

.pickmeup .pmu-instance .pmu-day-of-week *,
.pickmeup .pmu-instance .pmu-days * {
  display: inline-block;
  line-height: 1.5em;
  width: 2em;
}

.pickmeup .pmu-instance .pmu-day-of-week * {
  line-height: 1.8em;
}

.pickmeup .pmu-instance:first-child .pmu-prev,
.pickmeup .pmu-instance:last-child .pmu-next {
  display: block;
}

.pickmeup .pmu-instance:first-child .pmu-month,
.pickmeup .pmu-instance:last-child .pmu-month {
  width: 13em;
}

.pickmeup .pmu-instance:first-child:last-child .pmu-month {
  width: 12em;
}

.pickmeup:not(.pmu-view-days) .pmu-days,
.pickmeup:not(.pmu-view-days) .pmu-day-of-week,
.pickmeup:not(.pmu-view-months) .pmu-months,
.pickmeup:not(.pmu-view-years) .pmu-years {
  display: none;
}

/* ==================================================================
     .hidden
================================================================== */

.hidden {
  display: none !important;
}

/* ==================================================================
	 .btn
================================================================== */

.btn {
  padding: 0;
  min-width: 230px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 50px;
  text-transform: uppercase;
  border: none;
  background-color: #e74a39;

  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.btn:hover {
  color: #fff;
  background-color: #ab3225;
}

.btn:focus {
  outline: none;
}

.btn::-moz-focus-inner {
  border: none;
  padding: 0;
}

.btn2 {
  padding: 0;
  min-width: 100%;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 50px;
  text-transform: uppercase;
  border: none;
  border-radius: 10px;
  background-color: #e74a39;

  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.btn2:hover {
  color: #fff;
  background-color: #ab3225;
}

.btn2:focus {
  outline: none;
}

.btn2::-moz-focus-inner {
  border: none;
  padding: 0;
}

/* ==================================================================
	 .connector
================================================================== */

.connector {
  position: relative;
  display: block;
  height: 65px;
  width: 1px;
  margin: 0 auto;
}

.connector:after {
  content: '';
  position: absolute;
  left: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.connector.__top:after {
  bottom: 0;
}

.connector.__bottom:after {
  top: 0;
}

.connector.__black {
  background-color: #000;
}

.connector.__black:after {
  background-color: #000;
}

.connector.__gray {
  background-color: #f3f3f3;
}

.connector.__gray:after {
  background-color: #f3f3f3;
}

.connector.__red {
  background-color: #e74a39;
}

.connector.__red:after {
  background-color: #e74a39;
}

/* ==================================================================
	 .bg-pattern
================================================================== */

.bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5) url(../img/bg/bg-pattern.png) repeat scroll 0 0;
  z-index: 1;
}

/* ==================================================================
	 .socials
================================================================== */

.socials {
  margin: 0;
  padding: 0;
  text-align: center;
  list-style: none;
}

.socials li {
  display: inline-block;
  margin: 0 5px;
}

.socials_ico {
  display: block;
  width: 37px;
  color: #283c4f;
  font-size: 20px;
  line-height: 37px;
  text-align: center;
  background-color: #fff;
}

.socials_ico:hover {
  color: #fff;
  background-color: #e74a39;
}

/* ==================================================================
	 .menu-toggle
================================================================== */

.menu-toggle {
  display: none;
  padding: 0;
  width: 40px;
  color: #283c4f;
  font-size: 18px;
  border: none;
  background-color: transparent;

  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.menu-toggle:hover {
  color: #fff;
  background: #e74a39;
}

/* ==================================================================
	 .container
================================================================== */

.container {
  margin: 0 auto;
  padding: 0 15px;
  width: 1170px;
  box-sizing: border-box;
}

/* ==================================================================
	 .header
================================================================== */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 10;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.header_col.__left {
  float: left;
}

.header_col.__right {
  float: right;
}

.header_phone {
  display: block;
  padding: 17px 0;
  width: 376px;
  color: #fff;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
  background-color: #e74a39;
}

.header_phone .fa {
  margin-right: 15px;
  font-size: 40px;
  vertical-align: top;
}

.header_phone span {
  font-size: 27px;
  font-weight: 700;
}

.header_nav_wrap {
  position: relative;
}

.header_nav_wrap.__visible {
  display: block;
}

.header_nav {
  float: left;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 74px;
  list-style: none;
  overflow: hidden;
}

.header_nav li {
  float: left;
}

.header_nav a {
  position: relative;
  display: block;
  padding: 0 18px;
  color: #283b4f;
  text-transform: uppercase;
  text-decoration: none;
}

.header_nav a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 3px;
  background-color: #e74a39;
  visibility: hidden;

  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.header_nav .active a:after,
.header_nav a:hover:after {
  left: 18px;
  right: 18px;
  visibility: visible;
}

.header_lang {
  float: left;
  margin: 0 0 0 10px;
  padding: 30px 0;
  font-size: 13px;
  list-style: none;
  line-height: 13px;
  text-transform: uppercase;
}

.header_lang li {
  float: left;
  padding: 0 10px;
  border-left: 2px solid #eee;
}

.header_lang li:first-child {
  border: none;
}

.header_lang_mobile li:first-child {
  border: none;
  visible: none;
}

.header_lang .active {
  color: #e74a39;
}

.header_lang_mobile .active {
  color: #fff;
}

.header_lang a {
  color: #fff;
  text-decoration: none;
}

.header_lang_mobile a {
  color: #fff;
  text-decoration: none;
}

/* ==================================================================
	 .logo
================================================================== */

.logo {
  margin: 0 auto 35px;
  width: 300px;
  height: 116px;
  text-indent: -9999px;
  background: url(../img/bg/sprite2.png) 0 0 no-repeat;
}

/* ==================================================================
	 .section
================================================================== */

.section_head {
  text-align: center;
}

.section_abd p {
  color: #000;
}

.section_abd {
  width: 80%;
}

.section_head h1 {
  margin: 35px 0;
  font-size: 24px;
  text-transform: uppercase;
}

.section_body {
  position: relative;
}

.section_body.__gray {
  background-color: #f3f3f3;
}

/* ==================================================================
	 .section.__home
================================================================== */

.section.__home {
  background: url(../img/bg/promo22.jpg) no-repeat fixed 50% 50% / cover;
}

.section.__home .container {
  position: relative;
  height: 100%;
  padding-top: 74px;
}

.section.__home .section_col {
  display: inline-block;
  padding: 45px 0;
  width: 376px;
  background-color: rgba(40, 59, 79, 0.65);
}

.section.__home .section_text {
  position: absolute;
  bottom: 0;
  right: 15px;
}

/* ==================================================================
	 .section.__about
================================================================== */

.section.__about .section_body {
  background: url(../img/bg/promo-about.jpg) no-repeat fixed 50% 50% / cover;
}

.section.__about .container {
  position: relative;
  z-index: 2;
}

/* ==================================================================
	 .section.__contacts
================================================================== */

.section.__contacts .section_body {
  position: relative;
}

/* ==================================================================
	 .booking-form
================================================================== */

.booking-form_head {
  margin-bottom: 30px;
  border-bottom: 3px solid #e74a39;
}

.booking-form_head h3 {
  display: inline-block;
  margin: 0;
  padding: 10px 20% 10px 20%;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  line-height: 25px;
  text-transform: uppercase;
  background-color: #e74a39;
}

.booking-form_body {
  padding: 0 30px;
  margin-bottom: 40px;
}

.booking-form .form-control input,
.booking-form .form-control select {
  color: #7d858b;
  border-bottom: 1px solid #354759;
}

.booking-form .form-control input:focus,
.booking-form .form-control select:focus {
  color: #fff;
  border-color: #fff;
}

.booking-form .form-control .fa {
  color: #7d858b;
}

.booking-form_note {
  color: #7d858b;
  font-size: 12px;
  text-align: right;
}

.booking-form_note a {
  color: #7d858b;
}

.booking-form_footer {
  padding: 30px 0;
  text-align: center;
  background-color: #283c4f;
}

/* ==================================================================
	 .booking-promo
================================================================== */

.booking-promo {
  padding: 0 45px 150px 0;
  color: #fff;
  text-align: right;
}

.booking-promo h2 {
  margin: 0 0 10px;
  font-size: 48px;
  font-weight: 700;
  text-transform: uppercase;
}

.booking-promo h3 {
  margin: 10px 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  text-transform: uppercase;
}

/* ==================================================================
	 .cars-list
================================================================== */

.cars-list {
  margin: 0;
  padding: 45px 30px;
  list-style: none;
}

.cars-list_item {
  float: left;
  margin: 15px 0;
  padding: 0 15px;
  width: 25%;
  box-sizing: border-box;
}

.car {
  box-shadow: 0 2px 0 #e5e5e5;
  background-color: #fff;
  border-radius: 20px;
}

.buttonruls {
  background-color: #e74a39; /* Green */
  border: none;
  color: white;
  padding: 13px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
}

.pos1 {
  box-shadow: 0 2px 0 #e5e5e5;
  background-color: #fff;
  color: #000;
}

.car_img {
  margin: 0;
}

.car_img img {
  width: auto;
  height: 135px;
  vertical-align: top;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.car_img2 img {
  width: auto;
  height: 100px;
  vertical-align: top;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.car_caption {
  padding: 20px 20px;
}

.car_name {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #000;
  text-transform: uppercase;
}

.car_name2 {
  margin: 0 0 10px 0;
  font-size: 12px;
  color: #000;
  text-transform: uppercase;
}
.car_name2_small {
  margin: 0 0 10px 0;
  font-size: 10px;
  color: #000;
  text-transform: uppercase;
}

.car_price-label {
  color: #000;
  font-size: 12px;
  text-transform: uppercase;
}

.car_price {
  color: #e74a39;
  font-size: 14px;
  font-weight: 700;
}

.car_time-limit {
  color: #000;
}

/* ==================================================================
	 .about
================================================================== */

.about {
  padding: 60px 45px 40px;
  color: #fff;
}

.about_row {
  margin: 0 -15px;
}

.about_col {
  float: left;
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}

.about h3 {
  margin: 0 0 20px;
  font-size: 20px;
  text-transform: uppercase;
}

.about p {
  margin: 0 0 20px 0;
  text-align: justify;
}

.about a {
  color: #fff;
}

/* ==================================================================
	 .advantages
================================================================== */

.advantages {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.advantages:after {
  content: '';
  position: absolute;
  margin: 0 auto;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 1px;
  background-color: #e74a39;
}

.advantages_item {
  position: relative;
  margin-top: 95px;
}

.advantages_item:first-child {
  margin-top: 0;
}

.advantages_item:before {
  content: '';
  position: absolute;
  margin: 0 auto;
  top: 28px;
  left: 0;
  right: 0;
  width: 7px;
  height: 7px;
  border: 1px solid #e74a39;
  border-radius: 50%;
  background-color: #fff;
  z-index: 1;
}

/* ==================================================================
	 .advantage
================================================================== */

.advantage {
  float: left;
  width: 50%;
  box-sizing: border-box;
}

.advantage.__left {
  padding-right: 60px;
  text-align: right;
}

.advantage.__right {
  padding-left: 60px;
}

.advantage_ico {
  position: relative;
  width: 65px;
  height: 65px;
  text-align: center;
  background-color: #e74a39;
  border-radius: 50%;
}

.advantage_ico:after {
  content: '';
  position: absolute;
  margin: -5px 0 0 0;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.advantage.__left .advantage_ico {
  float: right;
  margin-left: 25px;
}

.advantage.__right .advantage_ico {
  float: left;
  margin-right: 25px;
}

.advantage.__left .advantage_ico:after {
  right: -5px;
  border-left: 6px solid #e74a39;
}

.advantage.__right .advantage_ico:after {
  left: -5px;
  border-right: 6px solid #e74a39;
}

.advantage_ico .fa {
  color: #fff;
  font-size: 21px;
  line-height: 65px;
}

.advantage_body {
  padding-top: 13px;
  width: 270px;
}

.advantage.__left .advantage_body {
  float: right;
}

.advantage.__right .advantage_body {
  float: left;
}

.advantage_body h3 {
  margin: 0 0 5px 0;
  font-size: 16px;
  font-weight: normal;
  line-height: 20px;
  text-transform: uppercase;
}

.advantage_body p {
  margin: 0;
  color: #b5b9b9;
}

/* ==================================================================
	 .contacts
================================================================== */

.contacts {
  position: relative;
  width: 376px;
  height: 625px;
  background-color: rgba(40, 59, 79, 0.85);
  z-index: 2;
}

.contacts_head {
  display: inline-block;
  margin: 30px 0 50px 0;
  padding: 0 45px;
  color: #fff;
  font-size: 15px;
  line-height: 50px;
  text-transform: uppercase;
  background-color: #e74a39;
}

.contacts_list {
  margin: 0;
  padding: 0 45px;
  color: #fff;
  list-style: none;
}

.contacts_list li {
  margin: 0 0 30px 0;
  overflow: hidden;
}

.contacts_list .fa {
  float: left;
  margin: 0 17px 0 0;
  width: 20px;
  font-size: 20px;
  text-align: center;
}

.contacts_list p {
  margin: 0;
  overflow: hidden;
}

.contacts_list a {
  color: #fff;
  text-decoration: none;
}

.contacts .socials {
  position: absolute;
  bottom: 70px;
  left: 0;
  right: 0;
}

.contacts_map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* ==================================================================
	 .footer
================================================================== */

.footer {
  padding: 30px 0;
  background-color: #283c4f;
}

.footer_copy {
  margin: 0;
  color: #b5b8b9;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 1199px) {
  .header .container {
    position: relative;
    background-color: #e74a39;
  }

  .container {
    width: 970px;
  }

  .header_nav_wrap {
    display: none;
    position: absolute;
    padding: 20px;
    top: 74px;
    right: 0;
    background-color: #283c4f;
  }

  .header_nav {
    float: none;
  }

  .header_nav a {
    color: #fff;
    line-height: 50px;
    white-space: nowrap;
  }

  .header_nav li {
    float: none;
  }

  .header_lang {
    float: none;
    padding: 25px 0 10px;
    margin: 25px 0 0 8px;
    overflow: hidden;
    border-top: 1px solid #354759;
  }
  .header_lang_mobile {
    padding: 15px;
    overflow: hidden;
    color: #e74a39;
    list-style: none;
  }

  .header_lang li {
    border-color: #354759;
    border-width: 1px;
  }

  .menu-toggle {
    display: block;
  }

  .section.__home,
  .section.__about .section_body {
    background-attachment: scroll;
  }

  .booking-promo h2 {
    font-size: 40px;
  }

  .booking-promo h3 {
    font-size: 13px;
  }
}

@media (max-width: 991px) {
  .container {
    width: 750px;
  }

  .header_phone {
    width: auto;
    color: #fff;
    font-size: 25px;
    text-align: left;
    background-color: transparent;
  }

  .section.__home .section_col {
    display: block;
    margin: 60px auto;
    padding-bottom: 0;
  }

  .section.__home .section_text {
    position: static;
  }

  .booking-promo {
    padding: 0 0 60px 0;
    text-align: center;
  }

  .cars-list_item {
    width: 50%;
  }

  .about_col {
    float: none;
    width: auto;
  }

  .contacts {
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .container {
    width: auto;
  }

  .advantages {
    padding: 45px 15px 0;
    border: 1px solid #e74a39;
  }

  .advantages:after,
  .advantages_item:before,
  .advantage_ico:after {
    display: none;
  }

  .advantage {
    float: none;
  }

  .advantages_item {
    margin: 0;
  }

  .advantage.__left,
  .advantage.__right {
    margin: 0 0 45px 0;
    padding: 0;
    width: 100%;
    text-align: center;
  }

  .advantage.__left .advantage_ico,
  .advantage.__right .advantage_ico {
    float: none;
    margin: 0 auto 20px;
  }

  .advantage.__left .advantage_body,
  .advantage.__right .advantage_body {
    float: none;
    padding: 0;
    width: auto;
  }
}

@media (max-width: 479px) {
  .form-group .form-control {
    float: none;
    width: 100%;
    margin-top: 10px;
  }

  .form-group .form-control:first-child {
    margin-top: 0;
  }

  .header_nav_wrap {
    left: 0;
  }

  .section.__home .section_col {
    margin-top: 15px;
    width: auto;
  }

  .logo {
    margin: 0 auto 35px;
    width: 230px;
    background-size: 100% auto;
  }

  .contacts {
    width: auto;
  }

  .cars-list {
    padding: 30px 0;
  }

  .cars-list_item {
    width: 100%;
  }

  .booking-promo h2 {
    font-size: 24px;
  }

  .booking-promo h3 {
    font-size: 14px;
    line-height: 20px;
    text-transform: none;
  }

  .about {
    padding: 30px 15px;
  }
  /*кнопка звонка*/

  .callback-bt {
    background: #38a3fd;
    border: 2px solid #38a3fd;
    border-radius: 50%;
    box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3);
    cursor: pointer;
    height: 68px;
    text-align: center;
    width: 68px;
    position: fixed;
    right: 8%;
    bottom: 18%;
    z-index: 999;
    transition: 0.3s;
    -webkit-animation: hoverWave linear 1s infinite;
    animation: hoverWave linear 1s infinite;
  }

  .callback-bt .text-call {
    height: 68px;
    width: 68px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
  }

  .callback-bt .text-call span {
    text-align: center;
    color: #38a3fd;
    opacity: 0;
    font-size: 0;
    position: absolute;
    right: 4px;
    top: 22px;
    line-height: 14px;
    font-weight: 600;
    text-transform: uppercase;
    transition: opacity 0.3s linear;
    font-family: 'montserrat', Arial, Helvetica, sans-serif;
  }

  .callback-bt .text-call:hover span {
    opacity: 1;
    font-size: 11px;
  }
  .callback-bt:hover i {
    display: none;
  }

  .callback-bt:hover {
    z-index: 1;
    background: #fff;
    color: transparent;
    transition: 0.3s;
  }
  .callback-bt:hover i {
    color: #38a3fd;
    font-size: 40px;
    transition: 0.3s;
  }
  .callback-bt i {
    color: #fff;
    font-size: 34px;
    transition: 0.3s;
    line-height: 66px;
    transition: 0.5s ease-in-out;
  }

  .callback-bt i {
    animation: 1200ms ease 0s normal none 1 running shake;
    animation-iteration-count: infinite;
    -webkit-animation: 1200ms ease 0s normal none 1 running shake;
    -webkit-animation-iteration-count: infinite;
  }

  @-webkit-keyframes hoverWave {
    0% {
      box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3),
        0 0 0 0 rgba(56, 163, 253, 0.2), 0 0 0 0 rgba(56, 163, 253, 0.2);
    }
    40% {
      box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3),
        0 0 0 15px rgba(56, 163, 253, 0.2), 0 0 0 0 rgba(56, 163, 253, 0.2);
    }
    80% {
      box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3),
        0 0 0 30px rgba(56, 163, 253, 0), 0 0 0 26.7px rgba(56, 163, 253, 0.067);
    }
    100% {
      box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3),
        0 0 0 30px rgba(56, 163, 253, 0), 0 0 0 40px rgba(56, 163, 253, 0);
    }
  }
  @keyframes hoverWave {
    0% {
      box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3),
        0 0 0 0 rgba(56, 163, 253, 0.2), 0 0 0 0 rgba(56, 163, 253, 0.2);
    }
    40% {
      box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3),
        0 0 0 15px rgba(56, 163, 253, 0.2), 0 0 0 0 rgba(56, 163, 253, 0.2);
    }
    80% {
      box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3),
        0 0 0 30px rgba(56, 163, 253, 0), 0 0 0 26.7px rgba(56, 163, 253, 0.067);
    }
    100% {
      box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3),
        0 0 0 30px rgba(56, 163, 253, 0), 0 0 0 40px rgba(56, 163, 253, 0);
    }
  }

  /* animations icon */

  @keyframes shake {
    0% {
      transform: rotateZ(0deg);
      -ms-transform: rotateZ(0deg);
      -webkit-transform: rotateZ(0deg);
    }
    10% {
      transform: rotateZ(-30deg);
      -ms-transform: rotateZ(-30deg);
      -webkit-transform: rotateZ(-30deg);
    }
    20% {
      transform: rotateZ(15deg);
      -ms-transform: rotateZ(15deg);
      -webkit-transform: rotateZ(15deg);
    }
    30% {
      transform: rotateZ(-10deg);
      -ms-transform: rotateZ(-10deg);
      -webkit-transform: rotateZ(-10deg);
    }
    40% {
      transform: rotateZ(7.5deg);
      -ms-transform: rotateZ(7.5deg);
      -webkit-transform: rotateZ(7.5deg);
    }
    50% {
      transform: rotateZ(-6deg);
      -ms-transform: rotateZ(-6deg);
      -webkit-transform: rotateZ(-6deg);
    }
    60% {
      transform: rotateZ(5deg);
      -ms-transform: rotateZ(5deg);
      -webkit-transform: rotateZ(5deg);
    }
    70% {
      transform: rotateZ(-4.28571deg);
      -ms-transform: rotateZ(-4.28571deg);
      -webkit-transform: rotateZ(-4.28571deg);
    }
    80% {
      transform: rotateZ(3.75deg);
      -ms-transform: rotateZ(3.75deg);
      -webkit-transform: rotateZ(3.75deg);
    }
    90% {
      transform: rotateZ(-3.33333deg);
      -ms-transform: rotateZ(-3.33333deg);
      -webkit-transform: rotateZ(-3.33333deg);
    }
    100% {
      transform: rotateZ(0deg);
      -ms-transform: rotateZ(0deg);
      -webkit-transform: rotateZ(0deg);
    }
  }

  @-webkit-keyframes shake {
    0% {
      transform: rotateZ(0deg);
      -ms-transform: rotateZ(0deg);
      -webkit-transform: rotateZ(0deg);
    }
    10% {
      transform: rotateZ(-30deg);
      -ms-transform: rotateZ(-30deg);
      -webkit-transform: rotateZ(-30deg);
    }
    20% {
      transform: rotateZ(15deg);
      -ms-transform: rotateZ(15deg);
      -webkit-transform: rotateZ(15deg);
    }
    30% {
      transform: rotateZ(-10deg);
      -ms-transform: rotateZ(-10deg);
      -webkit-transform: rotateZ(-10deg);
    }
    40% {
      transform: rotateZ(7.5deg);
      -ms-transform: rotateZ(7.5deg);
      -webkit-transform: rotateZ(7.5deg);
    }
    50% {
      transform: rotateZ(-6deg);
      -ms-transform: rotateZ(-6deg);
      -webkit-transform: rotateZ(-6deg);
    }
    60% {
      transform: rotateZ(5deg);
      -ms-transform: rotateZ(5deg);
      -webkit-transform: rotateZ(5deg);
    }
    70% {
      transform: rotateZ(-4.28571deg);
      -ms-transform: rotateZ(-4.28571deg);
      -webkit-transform: rotateZ(-4.28571deg);
    }
    80% {
      transform: rotateZ(3.75deg);
      -ms-transform: rotateZ(3.75deg);
      -webkit-transform: rotateZ(3.75deg);
    }
    90% {
      transform: rotateZ(-3.33333deg);
      -ms-transform: rotateZ(-3.33333deg);
      -webkit-transform: rotateZ(-3.33333deg);
    }
    100% {
      transform: rotateZ(0deg);
      -ms-transform: rotateZ(0deg);
      -webkit-transform: rotateZ(0deg);
    }
  }
  /* конец кнопки звонка */
}

@media screen and (max-width: 600px) {
  .mobilever {
    display: none;
  }
}

.mobilever2 {
  text-align: center;
}

@media screen and (min-width: 900px) {
  .mobilever2 {
    display: none;
  }
}

@media screen and (min-width: 900px) {
  .mobile_con {
    display: none;
  }
}
@media screen and (max-width: 500px) {
  .mobile_con {
    display: block;
  }
}

.mobile_con {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 100;
  background-color: #e74a39;
  border-radius: 10px 10px 0px 0px;
  width: 100%;
  height: 50px;
}

.table_mobilecon {
  width: 90%;
  margin: auto;
}

.table_pricerul {
  width: 80%;
  margin: auto;
}

/* свойства модального окна по умолчанию */
.modalrul {
  position: fixed; /* фиксированное положение */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5); /* цвет фона */
  z-index: 1050;
  opacity: 0; /* по умолчанию модальное окно прозрачно */
  -webkit-transition: opacity 200ms ease-in;
  -moz-transition: opacity 200ms ease-in;
  transition: opacity 200ms ease-in; /* анимация перехода */
  pointer-events: none; /* элемент невидим для событий мыши */
  margin: 0;
  padding: 0;
}
/* при отображении модального окно */
.modalrul.is-open {
    opacity: 1;
    /* делаем окно видимым */
    pointer-events: auto;
    /* элемент видим для событий мыши */
    overflow-y: auto;
    /* добавляем прокрутку по y, когда элемент не помещается на страницу */
}
/* ширина модального окна и его отступы от экрана */
.modalrul-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}
@media (min-width: 576px) {
  .modalrul-dialog {
    max-width: 700px;
    margin: 30px auto; /* для отображения модального окна по центру */
  }
}
/* свойства для блока, содержащего контент модального окна */
.modalrul-content {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  outline: 0;
}
@media (min-width: 768px) {
  .modalrul-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  }
}
/* свойства для заголовка модального окна */
.modalrul-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid #eceeef;
}
.modalrul-title {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.5;
  font-size: 1.25rem;
  font-weight: 500;
}
/* свойства для кнопки "Закрыть" */
.close1 {
  float: right;
  font-family: sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.5;
  text-decoration: none;
}
/* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */
.close1:focus,
.close1:hover {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.75;
}
/* свойства для блока, содержащего основное содержимое окна */
.modalrul-body {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 15px;
  overflow: auto;
}

.modalrul p {
  color: #000;
}

.modalrul h3 {
  color: #e74a39;
}

/* WhatsApp Widget Styles -- FINAL VERSION 3.0 */

/* Главный контейнер для позиционирования */
.whatsapp-widget {
  position: fixed;
  bottom: 8%;
  right: 18%;
  z-index: 9998;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

/* Зеленая кнопка */
.whatsapp-widget a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 68px;
  height: 68px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  font-size: 34px;
  text-decoration: none;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3);
  z-index: 2; /* Важно, чтобы кнопка была над текстом */
}

/* Анимация пульсации */
.whatsapp-widget a:before,
.whatsapp-widget a:after {
  content: ' ';
  display: block;
  position: absolute;
  border: 1px solid #25d366;
  left: -20px;
  right: -20px;
  top: -20px;
  bottom: -20px;
  border-radius: 50%;
  animation: animate 1.5s linear infinite;
  opacity: 0;
  backface-visibility: hidden;
}

.whatsapp-widget a:after {
  animation-delay: 0.5s;
}

/* Текстовый popover */
.whatsapp-widget .widget-text {
  position: relative;
  background-color: #e74a39; /* Основной красный цвет сайта */
  color: white;
  padding: 15px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  width: 250px;
  margin-right: 15px;
  order: -1; /* Ставит текстовый блок слева от иконки */

  /* Начальное состояние: скрыто */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease, visibility 0.4s ease; /* Плавность для hover */
}

/* Стрелка-указатель */
.whatsapp-widget .widget-text::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent transparent #e74a39;
}

/* Показываем popover при наведении на весь виджет */
.whatsapp-widget:hover .widget-text {
  visibility: visible;
  opacity: 1;
}

/* Класс для первоначальной анимации */
.whatsapp-widget .widget-text.show-initially {
  animation: fade-in-out 6s ease-in-out forwards;
}

.whatsapp-widget .widget-text strong {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

/* Ключевые кадры для анимации появления и исчезновения */
@keyframes fade-in-out {
  0% {
    visibility: visible;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    visibility: hidden;
    opacity: 0;
  }
}

/* Styling for New Sections */

/* Services Grid (Транспортные услуги) */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  padding: 40px 0;
}

.service-card {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 25px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding: 10px;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.service-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 25px;
}

.service-card h4 {
  color: #283c4f;
  font-size: 16px;
}

.service-card p {
  color: #7d858b;
  font-size: 14px;
  padding: 0 15px 20px 15px;
  margin: 0;
}

/* About Us Banner */
.about-banner-container {
  padding: 0;
}

.about-banner-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* About Us Text Section */
.about-text {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 0;
  color: #000;
  text-align: center;
}
.about-text h3 {
  font-size: 24px;
  color: #283c4f;
  margin-bottom: 20px;
}
.about-text p {
  text-align: justify;
  line-height: 1.7;
}

/* Font Awesome 5 fix for radar icon */
.fa-radar {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

/* About Us Banner Styles */
.about-banner {
  position: relative;
  padding: 100px 15px;
  background-image: url('https://images.pexels.com/photos/1637859/pexels-photo-1637859.jpeg?auto=compress&cs=tinysrgb&dpr=1');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed; /* Эффект параллакса */
  text-align: center;
  color: #fff;
}

.about-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(
    40,
    59,
    79,
    0.65
  ); /* Полупрозрачный оверлей в цвет сайта */
  z-index: 1;
}

.about-banner-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
}

.about-banner-content h2 {
  font-size: 36px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.about-banner-content p {
  font-size: 18px;
  margin-bottom: 30px;
  line-height: 1.6;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 767px) {
  .about-banner {
    padding: 60px 15px;
    background-attachment: scroll; /* Отключаем параллакс на мобильных */
  }

  .about-banner-content h2 {
    font-size: 28px;
  }

  .about-banner-content p {
    font-size: 16px;
  }
}

/* Новый, более надёжный способ блокировки скролла */
body.modal-open {
    position: fixed;
    /* Фиксируем body на месте */
    width: 100%;
    overflow: hidden;
    /* Этот overflow теперь для подстраховки */
}

/* Коррекция стилей для тега <a> с классом .btn */
a.btn {
  display: inline-block; /* Позволяет применять отступы и размеры как к блочному элементу */
  text-decoration: none; /* Убирает подчеркивание у ссылки */
  text-align: center; /* Центрирует текст внутри кнопки */
}