html, body {
  background-color: #33393D;
  color: #FFF;
  font-family: 'Roboto', sans-serif;
  font-size: 1.1rem;
  line-height: 1.4rem;
}
body {
  padding: 10px;
}
body div {
  border-radius: 5px;
}
body a {
  border-radius: 5px;
}
.wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 80px) repeat(12, 210px) repeat(2, 80px) auto;
    grid-template-areas:
        "h1"
        "h2"
        "h3"
        "c1"
        "t1"
        "c2"
        "t2"
        "c3"
        "t3"
        "c4"
        "t4"
        "c5"
        "t5"
        "c6"
        "t6"
        "f3"
        "f2"
        "f1";
}
@media (min-width: 576px) {
  .wrapper {
      display: grid;
      grid-gap: 10px;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 80px) repeat(6, 210px) 80px auto;
      grid-template-areas:
          "h1 h1"
          "h2 h3"
          "c1 t1"
          "t2 c2"
          "c3 t3"
          "t4 c4"
          "c5 t5"
          "t6 c6"
          "f2 f3"
          "f1 f1";
  }
}
@media (min-width: 768px) {
  .wrapper {
      display: grid;
      grid-gap: 10px;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 80px repeat(4, 210px) 80px auto;
      grid-template-areas:
          "h1 h2 h3"
          "c1 t1 c2"
          "t2 c3 t3"
          "c4 t4 c5"
          "t5 c6 t6"
          "f3 f2 f1";
  }
}
@media (min-width: 992px) {
  .wrapper {
      display: grid;
      grid-gap: 10px;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: 80px repeat(3, 210px) auto;
      grid-template-areas:
          "h1 h1 h2 h3"
          "c1 t1 c2 t2"
          "t3 c3 t4 c4"
          "c5 t5 c6 t6"
          "f3 f2 f1 f1";
  }
}

.header1 { grid-area: h1; }
.header2 { grid-area: h2; }
.header3 { grid-area: h3; }

.car1 { grid-area: c1; }
.car2 { grid-area: c2; }
.car3 { grid-area: c3; }
.car4 { grid-area: c4; }
.car5 { grid-area: c5; }
.car6 { grid-area: c6; }

.tile1 { grid-area: t1; }
.tile2 { grid-area: t2; }
.tile3 { grid-area: t3; }
.tile4 { grid-area: t4; }
.tile5 { grid-area: t5; }
.tile6 { grid-area: t6; }

.footer1 { grid-area: f1; }
.footer2 { grid-area: f2; }
.footer3 { grid-area: f3; }

.tile2 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 1fr);
}

.tile {
  /* color: #2AABE4; */
  color: #33393D;
  background-color: #FFF;
  padding: 1rem;
}
.tile.tile-divide {
  background-color: #33393D;
  padding: 0;
  font-size: 0.9rem;
}
.tile i {
  margin-right: 0.5rem;
}

.car-master {
  background-image: url('/static/img/master.jpg');
  background-size: 100%;
}
.car-boxer {
  background-image: url('/static/img/boxer.jpg');
  background-size: 100%;
}
.car-ducato {
  background-image: url('/static/img/ducato.jpg');
  background-size: 100%;
}
.car-jumper {
  background-image: url('/static/img/jumper.jpg');
  background-size: 100%;
}
.car-crafter {
  background-image: url('/static/img/crafter.jpg');
  background-size: 100%;
}
.car-sprinter {
  background-image: url('/static/img/sprinter.jpg');
  background-size: 100%;
}


/*
.car-lt {
  background-image: url('/static/img/lt.jpg');
  background-size: 100%;
}
.car-transit {
  background-image: url('/static/img/transit.jpg');
  background-size: 100%;
}
*/

/* Малые девайсы («ландшафтные телефоны», >= 576px)
@media (min-width: 576px) { ... }

// Средние девайсы («таблетки», >= 768px)
@media (min-width: 768px) { ... }

// Большие девайсы (десктопы, >= 992px)
@media (min-width: 992px) { ... }

// Экстрабольшие девайсы (большие десктопы, >= 1190px)
@media (min-width: 1190px) { ... }
*/

.header1 .logo,
.header1 .brand {
  display: inline-block;
}
.header1 .logo {
  display: none;
}
.header1 .brand h1 {
  font-size: 2rem;
  line-height: 2rem;
  text-align: center;
}
.header1 .brand p {
  display: none;
}

@media (min-width: 576px) {
  .header1 .logo {
    display: inline-block;
  }
  .header1 .brand p {
    display: block;
  }
  .header1 .logo i {
    font-size: 3rem;
    line-height: 3rem;
    vertical-align: bottom;
    margin-right: 1rem;
  }
  .header1 .brand h1 {
    font-size: 1.8rem;
    text-align: left;
  }
}
@media (min-width: 768px) {
  .header1 .logo i {
    font-size: 2rem;
    line-height: 3rem;
    vertical-align: bottom;
    margin-right: 1rem;
  }
  .header1 .brand h1 {
    font-size: 2rem;
    text-align: left;
  }
}

@media (min-width: 992px) {
  .header1 .logo {
    display: inline-block;
  }
  .header1 .logo i {
    font-size: 3rem;
    line-height: 4rem;
    vertical-align: bottom;
    margin-right: 1rem;
  }
  .header1 .brand h1 {
    font-size: 2rem;
    line-height: 2rem;
    text-align: center;
  }
  .header1 .brand p {
    display: block;
  }
}

.header3 div,
.footer3 div {
  margin-left: 10px;
}
.phone {
  font-size: 1.8rem;
  margin-top: 1rem;
  margin-bottom: 5px;
}
.worktime {
  font-size: 1rem;
}
.tile-ul {
   list-style-type: square;
   margin-left: 0;
   padding-left: 1rem;
}
.tile h3 {
  line-height: 0.9;
  margin-bottom: 1rem;
}
.tile.bg-blue {
  background-color: #2AABE4;
  color: #FFF;
}

/* kostyl*/

.tile.bg-blue {
  padding-top: 2rem;
}

a.tile-btn {
  text-decoration: none;
  color: #FFF;
  background-color: #FF3F21;
  /* background-color: #2AABE4; */
}
a.tile-btn:hover {
  /* color: #33393D; */
  color: #FFF;
  background-color: #2AABE4;
  /* background-color: #FFCD24; */
}
.tile-btn-cont {
  font-size: 1.8rem;
  line-height: 4.4rem;
}
.tile-btn-cont:hover i {
    -webkit-animation: 0.1s tremor ease-out infinite;
    animation: 0.1s tremor ease-out infinite;
}
@-webkit-keyframes tremor {
	0%, 25% {
		left: -1px;
		top:-1px;
        -webkit-transform: translateX(-4%);
        transform: translateX(-4%);
	}
	50%, 100% {
		left: 1px;
		top: 1px;
        -webkit-transform: translateX(4%);
        transform: translateX(4%);
	}
}
@-moz-keyframes tremor {
	0%, 25% {
		left: -1px;
        -webkit-transform: translateX(-4%);
        transform: translateX(-4%);
	}
	50%, 100% {
		left: 1px;
        -webkit-transform: translateX(4%);
        transform: translateX(4%);
	}
}
@-ms-keyframes tremor {
	0%, 25% {
		left: -1px;
        -webkit-transform: translateX(-4%);
        transform: translateX(-4%);
	}
	50%, 100% {
		left: 1px;
        -webkit-transform: translateX(4%);
        transform: translateX(4%);
	}
}
@-o-keyframes tremor {
	0%, 25% {
		left: -1px;
        -webkit-transform: translateX(-4%);
        transform: translateX(-4%);
	}
	50%, 100% {
		left: 1px;
        -webkit-transform: translateX(4%);
        transform: translateX(4%);
	}
}
@keyframes tremor {
	0%, 25% {
		left: -1px;
        -webkit-transform: translateX(-4%);
        transform: translateX(-4%);
	}
	50%, 100% {
		left: 1px;
        -webkit-transform: translateX(4%);
        transform: translateX(4%);
	}
}

.kst-1 {
  padding-top: 3rem;
}
.kst-2 {
  padding-top: 2rem;
}
.kst-3 {
  padding-top: 3rem !important;
}

/* callback button */

.pulse {
  position: fixed;
  bottom: 2%;
  right: 3%;
  transform: translate(-50%, -50%);
  background: #FF3F21;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  color: #fff;
  text-align: center;
  line-height: 58px;
  font-size: 25px;
	cursor: pointer;
}

@media (min-width: 576px) {
	.pulse {
		width: 70px;
		height: 70px;
		bottom: 10%;
		right: 5%;
		line-height: 70px;
	  font-size: 30px;
	}
}

.pulse a {
	color: #fff;
	z-index: 999;
}

.pulse:before,
.pulse:after {
	content: " ";
	display: block;
	position: absolute;
	border: 50%;
	border: 1px solid #FF3F21;
	left: -20px;
	right: -20px;
	top: -20px;
	bottom: -20px;
	border-radius: 50%;
	animation: animate 1.5s linear infinite;
	opacity: 0;
	backface-visibility: hidden;
}

.pulse:after{
	animation-delay: .5s;
}

@keyframes animate {
	0% {
    	transform: scale(0.5);
    	opacity: 0;
		}
	50% {
    	opacity: 1;
		}
	100% {
    	transform: scale(1.2);
    	opacity: 0;
		}
}