@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* Font Family */
body, h4, .big, h5, h6 {font-family: 'Open Sans', sans-serif; font-weight: 300;}
h1, h2, h3     {font-family: 'Raleway'  , sans-serif; font-weight: 800;}
/* Font Size */
body    {font-size: 2.7vmin;}
h1      {font-size: 1.9em;}
h2,.big {font-size: 1.5em;}
h3      {font-size: 1.4em;}
table   {font-size: 0.6em;}
.small  {font-size: 2.2vmin !important;}

/* Font Weight */
h4, strong {font-weight: 600;}
.big, .cnt {font-weight: 700;}

/* Colors */
body, h1, h2, h3, h4, b, a, a:active, a:visited {color: #444;}
a, a:active, a:visited {color: #258;}
a {text-decoration-color: #fa3;}
    a:hover{color: #37a; text-decoration-color: #fa3;}
th, tr {border-bottom: 1px solid #ccc;}
.tdh {background-color: #ddd; font-weight: bold;}

/* Layout */
body {
    max-width: 1000px;
    min-width: 400px;
    margin: 3em auto 4em auto;
    text-align: left;
    line-height: 1.5;
}

/* Margins */
div.content {margin: 0 2em 0 2em;}
h1, h2, h3, h4 {margin-top: 1.25em; line-height: 1.5; margin-bottom: 0.75em;}
p, ul, ol {margin-bottom: 1em;}
h1 {line-height: 1.25;}
h3 {margin-bottom: 0.2em;}
h4 {margin-bottom: 2em;}
h5, h6 {line-height: 1.5; margin: 0; text-align: center;}
.mb0 {margin-bottom: 0;}
.mt0 {margin-top: 0;}
.mb1 {margin-bottom: 1em;}
.mt1 {margin-top: 1em;}
.mb05 {margin-bottom: 0.5em;}
.mt05 {margin-top: 0.5em;}

/* Links */
a, a:visited, a:active {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 0.1em;
}

.clr {
  text-decoration-line: none !important;
  text-decoration-style: none !important;
  color: #444 !important;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 0.1em;
}

a:hover {
    text-decoration-style: solid;
}

img, a img, a img:hover, img:hover {
        border-style: none;
        text-decoration: none;
}

/* Align */
.ta-right {text-align: right;}
.ta-left  {text-align: left;}
.ta-center, h1 {text-align: center;}
.w100 {width: 100%;}

/* Lists */
li {
    list-style-type: none;
    margin-bottom: 1em;
    position: relative;
    left: 0.5em;
    }
    li:before {
        content: "\2014";
        position: absolute;
        left: -2em;
        color: #fa3;
    }
    ul ul li:before {
      content: ">";
      left: -1.5em;
}

/* Images */
/* a, img, #map {filter: grayscale(75%);} */
img:hover, #map:hover, .lb-image, a:hover {filter: none;}

/* Layout */
.row  {display: flex;}
.elem {flex: 1; padding: 0 1em;}

.grid2x1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 5em;
  grid-row-gap: 0px;
}

.grid3x1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 5em;
  grid-row-gap: 0px;
}

.grid4x3 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 5em;
    grid-row-gap: 2em;
    align-items: center;
  }    

img.logo {width: 12em;}
.phone {float: right; line-height: 1.2; margin-top: 0; margin-bottom: 0; margin-right: 2em;}
.w50 {width: 50%;}
.w33 {width: 33.33%;}
.h1 {height: 1em;}

.round {clip-path: circle(50% at 50% 50%); text-align: center; display: inline-block;}

table {
    border-collapse: collapse;
    }
    table td, table th {
        padding: 0.5em 0.5em;
        vertical-align: top;
}

.yamap {height: 50vh; padding: 0; margin: 0;}

/* Effects */

.shadow {
    box-shadow: 2px 2px 5px rgba(0,0,0,0.25); /* Параметры тени */
    padding: 10px;
}

.shadow:hover {
box-shadow: 4px 4px 10px rgba(0,0,0,0.25); /* Параметры тени */
padding: 10px;
}

/* section:hover > h2, .elem:hover > h3 {color: #444; text-shadow: -1px -1px 1px rgba(255,170,51,.1), 1px 1px 1px rgba(0,0,0,.5), 0px 0px 1px rgba(255,238,0,1);} */

/* Wobble Horizontal */
@-webkit-keyframes hvr-wobble-horizontal{16.65%{-webkit-transform: translateX(8px);transform: translateX(8px)}33.3%{-webkit-transform: translateX(-6px);transform: translateX(-6px)}49.95%{-webkit-transform: translateX(4px);transform: translateX(4px)}66.6%{-webkit-transform: translateX(-2px);transform: translateX(-2px)}83.25%{-webkit-transform: translateX(1px);transform: translateX(1px)}100%{-webkit-transform: translateX(0);transform: translateX(0)}}@keyframes hvr-wobble-horizontal{16.65%{-webkit-transform: translateX(8px);transform: translateX(8px)}33.3%{-webkit-transform: translateX(-6px);transform: translateX(-6px)}49.95%{-webkit-transform: translateX(4px);transform: translateX(4px)}66.6%{-webkit-transform: translateX(-2px);transform: translateX(-2px)}83.25%{-webkit-transform: translateX(1px);transform: translateX(1px)}100%{-webkit-transform: translateX(0);transform: translateX(0)}}

.hvr-wobble-horizontal, section:hover > h2, .elem:hover > h3 {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  }
.hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active, section:hover > h2, .elem:hover > h3, li:hover:before {
    -webkit-animation-name: hvr-wobble-horizontal;
    animation-name: hvr-wobble-horizontal;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
  }
  section:hover > h2, .elem:hover > h3 {display: block;}

/* Menu */
header nav {
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}
header nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  left: 50%;
  top: 8em;
  transition: all 0.3s ease-in-out;
  transform: translateX(-50%);
}
header nav ul li {
  transform: translateY(50px);
  opacity: 0;
  position: static;
}
header nav ul li a, header nav ul li a:visited {
  display: block;
  font-size: 2em;
  text-decoration: none;
  padding: 0.2em 0;
  text-align: center;
  color: #eee;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
header nav ul li a:hover {
  color: #fa3;
}

.toggle-btn {
  display: block;
  position: fixed;
  z-index: 10;
  right: 1em;
  top: 1em;
  cursor: pointer;
}
.toggle-btn .bar {
  width: 2em;
  height: 0.1em;
  margin: 0.41em auto;
  background-color: #555;
  transition: all 0.3s ease-in-out;
}
.toggle-btn .bar:nth-child(2) {
  width: 2em;
}
#toggle:checked ~ nav {
  opacity: 1;
  visibility: visible;
}
#toggle:checked ~ nav ul {
  top: 70px;
}
#toggle:checked ~ nav ul li {
  transform: translateY(0px);
  opacity: 1;
}
#toggle:checked ~ nav ul li:nth-child(1) {
  transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.1s;
}
#toggle:checked ~ nav ul li:nth-child(2) {
  transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.2s;
}
#toggle:checked ~ nav ul li:nth-child(3) {
  transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.3s;
}
#toggle:checked ~ nav ul li:nth-child(4) {
  transition: all 0.3s cubic-bezier(0.6, 0, 0.8, 1.5) 0.4s;
}
#toggle:checked + label.toggle-btn .bar {
  background-color: red;
}
#toggle:checked + label.toggle-btn .bar:nth-child(2) {
  transform: translateX(2.5em);
  opacity: 0;
}
#toggle:checked + label.toggle-btn .bar:nth-child(1) {
  transform: translateY(0.56em) rotate(45deg);
}
#toggle:checked + label.toggle-btn .bar:nth-child(3) {
  transform: translateY(-0.475em) rotate(-45deg);
}
header nav ul li:before {content: none;}

nav {z-index: 2;}