﻿.car-covid > input[type="radio"]:nth-child(1):checked ~ .car-covid__prev > label:nth-child(5), .car-covid > input[type="radio"]:nth-child(1):checked ~ .car-covid__next > label:nth-child(2), .car-covid > input[type="radio"]:nth-child(2):checked ~ .car-covid__prev > label:nth-child(1), .car-covid > input[type="radio"]:nth-child(2):checked ~ .car-covid__next > label:nth-child(3), .car-covid > input[type="radio"]:nth-child(3):checked ~ .car-covid__prev > label:nth-child(2), .car-covid > input[type="radio"]:nth-child(3):checked ~ .car-covid__next > label:nth-child(4), .car-covid > input[type="radio"]:nth-child(4):checked ~ .car-covid__prev > label:nth-child(3), .car-covid > input[type="radio"]:nth-child(4):checked ~ .car-covid__next > label:nth-child(5), .car-covid > input[type="radio"]:nth-child(5):checked ~ .car-covid__prev > label:nth-child(4), .car-covid > input[type="radio"]:nth-child(5):checked ~ .car-covid__next > label:nth-child(1) {
  opacity: 1 !important;
  z-index: 3; }

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

.car-covid {
  width: 100%;
  position: relative;
  overflow: hidden; }
  .car-covid > input[type="radio"] {
    position: absolute;
    left: 0;
    opacity: 0;
    top: 0; }
    .car-covid > input[type="radio"]:checked ~ .car-covid__items .car-covid__item, .car-covid > input[type="radio"]:checked ~ .car-covid__prev > label, .car-covid > input[type="radio"]:checked ~ .car-covid__next > label {
      opacity: 0; }
    .car-covid > input[type="radio"]:nth-child(1):checked ~ .car-covid__items .car-covid__item:nth-child(1) {
      opacity: 1; }
    .car-covid > input[type="radio"]:nth-child(1):checked ~ .car-covid__nav > label:nth-child(1) {
      background: #ccc;
      cursor: default;
      pointer-events: none; }
    .car-covid > input[type="radio"]:nth-child(2):checked ~ .car-covid__items .car-covid__item:nth-child(2) {
      opacity: 1; }
    .car-covid > input[type="radio"]:nth-child(2):checked ~ .car-covid__nav > label:nth-child(2) {
      background: #ccc;
      cursor: default;
      pointer-events: none; }
    .car-covid > input[type="radio"]:nth-child(3):checked ~ .car-covid__items .car-covid__item:nth-child(3) {
      opacity: 1; }
    .car-covid > input[type="radio"]:nth-child(3):checked ~ .car-covid__nav > label:nth-child(3) {
      background: #ccc;
      cursor: default;
      pointer-events: none; }
    .car-covid > input[type="radio"]:nth-child(4):checked ~ .car-covid__items .car-covid__item:nth-child(4) {
      opacity: 1; }
    .car-covid > input[type="radio"]:nth-child(4):checked ~ .car-covid__nav > label:nth-child(4) {
      background: #ccc;
      cursor: default;
      pointer-events: none; }
    .car-covid > input[type="radio"]:nth-child(5):checked ~ .car-covid__items .car-covid__item:nth-child(5) {
      opacity: 1; }
    .car-covid > input[type="radio"]:nth-child(5):checked ~ .car-covid__nav > label:nth-child(5) {
      background: #ccc;
      cursor: default;
      pointer-events: none; }
  .car-covid__items {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 100%;
    height: 404px;
    position: relative; }
  .car-covid__item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 88%;
    transition: opacity 2s;
    -webkit-transition: opacity 2s; }
    .car-covid__item img {
      width: 100%;
      vertical-align: middle; }
  .car-covid__prev > label, .car-covid__next > label {
    border: 1px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    opacity: 0;
    z-index: 2; }
    .car-covid__prev > label:hover, .car-covid__prev > label:focus, .car-covid__next > label:hover, .car-covid__next > label:focus {
      opacity: .5 !important; }
    .car-covid__prev > label:before, .car-covid__prev > label:after, .car-covid__next > label:before, .car-covid__next > label:after {
      content: "";
      position: absolute;
      width: inherit;
      height: inherit; }
    .car-covid__prev > label:before, .car-covid__next > label:before {
      background: linear-gradient(to top, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%), linear-gradient(to left, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%);
      width: 60%;
      height: 60%;
      top: 20%; }
  .car-covid__prev > label {
    left: 2%; }
    .car-covid__prev > label:before {
      left: 35%;
      top: 20%;
      transform: rotate(135deg);
      -webkit-transform: rotate(135deg); }
  .car-covid__next > label {
    right: 2%; }
    .car-covid__next > label:before {
      left: 10%;
      transform: rotate(315deg);
      -webkit-transform: rotate(315deg); }
  .car-covid__nav {
    position: absolute;
    bottom: 3%;
    left: 0;
    text-align: center;
    width: 100%;
    z-index: 3; }
    .car-covid__nav > label {
      border: 1px solid #fff;
      display: inline-block;
      border-radius: 50%;
      cursor: pointer;
      margin: 0 .125%;
      width: 20px;
      height: 20px; }
