:root {
    --main-color: #e3000e;
    --main-menu-background: #fff;
    --main-bg-color: #f8f8f8;
    --main-bg-element-color: #fff;
    --main-font: "Roboto";
    --title-font: "Roboto";
    --line-height-h: 1.4;
    --line-height-post: 1.8;
    --font-size-h: 2rem;
    --font-size-h3: 1.8rem;
    --font-color-text: #555;
    --font-color-h: #e3000e;
    --font-weight-h: 900;
    --font-color-link: #e3000e;
    --font-color-link-hover: #fd5b03;
    --font-color-btn: #fff;
    --font-size-text: .9rem;
    --font-size-post: 1.2rem;
    --font-size-mob-post: .9rem;
    --font-size-mob-h: 1.5rem;
    --border-radius-btn: 4px;
    --padding-btn: 15px 20px;
    --color-marker: #e3000e;
    --btn: #e3000e;
    --btn-hover: #fd5b03;
    --border-radius-post: 15px;
    --footer-bg-color: #333;
    --footer-font-color: #fff;
}
/*Иконки*/
@font-face {
    font-family: 'glyphs';
    src: url('../fonts/glyphs/glyphs.eot');
    src: url('../fonts/glyphs/glyphs.eot') format('embedded-opentype'),           
    url('../fonts/glyphs/glyphs.woff') format('woff'),           
    url('../fonts/glyphs/glyphs.ttf') format('truetype'),           
    url('../fonts/glyphs/glyphs.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'icons';
    src: url('../fonts/glyphs/icons.eot');
    src: url('../fonts/glyphs/icons.eot') format('embedded-opentype'),           
    url('../fonts/glyphs/icons.woff') format('woff'),           
    url('../fonts/glyphs/icons.ttf') format('truetype'),           
    url('../fonts/glyphs/icons.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/*Roboto*/
@font-face {
font-family:'Roboto';
font-weight: 400;
font-style: Normal;
src:url('../fonts/Roboto/Roboto-Regular.ttf');
font-display: swap;
}
@font-face {
font-family:'Roboto';
font-weight: 700;
font-style: Normal;
src:url('../fonts/Roboto/Roboto-Bold.ttf');
font-display: swap;
}
/*Убрать временную полупрозрачную полосу*/
* {
   -webkit-tap-highlight-color: transparent !important;
}
body {
    background-color: var(--main-bg-color);
    margin: 0;
    padding: 0;
}
header {
    background-color: var(--main-menu-background);
    margin: 0 auto 40px;
    padding: 0 5%;
    position: fixed;
    top: 0;
    width: 90%;
    height: 108px;
    z-index: 2;
    -webkit-filter: drop-shadow(0px 4px 8px rgba(46, 58, 76, 0.15));
    filter: drop-shadow(0px 4px 8px rgba(46, 58, 76, 0.15));
}
.logo {
    float: left;
    padding: 19px 0;
}
.contact {
    position: absolute;
    float: right;
    top: 40px;
    right: 15%;
}
.contact a,
.contact a:visited,
.contact a:focus {
    font-family: var(--main-font);
    font-size: 1.2rem;
    text-decoration: none;
    color: var(--font-color-link);
    font-weight: 700;
}
.contact a:hover {
    color: var(--font-color-link-hover);
}
.contact a:before {
    font-family: glyphs;
    content: "\e905";
    position: relative;
    color: var(--font-color-link);
    top: 1.5px;
    margin-right: 10px;
    text-decoration: none;
}
.contact a:hover:before {
    color: var(--font-color-link-hover);  
    outline: none;
    text-decoration: none;  
    background-color: transparent;
    text-decoration: none;
}
.center {
    text-align: center;
}
.content {
    max-width: 1200px;
    min-height: calc(100vh - 258px);
    margin: 150px auto 30px;
    overflow: hidden;
    background-color: var(--main-bg-element-color);
    border-radius: var(--border-radius-post);
    -webkit-box-shadow: 10px 1px 30px rgb(46 58 76 / 12%);
    box-shadow: 10px 1px 30px rgb(46 58 76 / 12%);
}
.postcontent {
    padding: 5%;
}
h1 {
    font-family: var(--title-font);
    font-weight: var(--font-weight-h);
    line-height: var(--line-height-h);
    font-size: var(--font-size-h);
    text-align: center;
    color: var(--font-color-h);
    margin: 0 auto 40px;
    padding: 0 5%;
    letter-spacing: 1px;
}
h2 {
    font-family: var(--title-font);
    font-weight: var(--font-weight-h);
    line-height: var(--line-height-h);
    font-size: var(--font-size-h);
    text-align: center;
    color: var(--font-color-h);
    margin: 50px auto 0;
    padding: 0 5%;
    letter-spacing: 1px;
}
h3 {
    font-family: var(--title-font);
    font-weight: var(--font-weight-h);
    line-height: var(--line-height-h);
    font-size: var(--font-size-h3);
    text-align: center;
    color: var(--font-color-h);
    margin: 0 auto 0;
    padding: 0 5%;
    letter-spacing: 1px;
}
h4 {
    font-family: var(--title-font);
    font-weight: var(--font-weight-h);
    line-height: var(--line-height-h);
    font-size: var(--font-size-h);
    text-align: center;
    color: var(--font-color-h);
    margin: 0 auto 0;
    padding: 0 5%;
    letter-spacing: 1px;
}
h5 {
    font-family: var(--title-font);
    font-weight: var(--font-weight-h);
    line-height: var(--line-height-h);
    font-size: var(--font-size-h);
    text-align: center;
    color: var(--font-color-h);
    margin: 50px auto 0;
    padding: 0 5%;
    letter-spacing: 1px;
}
h6 {
    font-family: var(--title-font);
    font-weight: var(--font-weight-h);
    line-height: var(--line-height-h);
    font-size: var(--font-size-h3);
    text-align: center;
    color: var(--font-color-h);
    margin: 50px auto 0;
    padding: 0 5%;
    letter-spacing: 1px;
}
/*Таблица*/
table {
    table-layout: fixed;
    width: 100%;
    font-family: var(--main-font);
    font-size: var(--font-size-post);
    color: var(--font-color-text);
    border: 1px solid #ddd;
}
th, td {
    padding: 20px;
}
table tbody tr:nth-child(2n) {
    background: #fafafa;
}
.photo {
    display: grid;
    grid-gap: 12px;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 60px auto 70px;
}
.photo img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-post);
}
.products {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
p {
    font-family: var(--main-font);
    line-height: var(--line-height-post);
    font-size: var(--font-size-post);
    color: var(--font-color-text);
}
ul {
    padding-inline-start: 10px;
    margin-top: 40px;
}
ul li,
ol li {
    font-family: var(--main-font);
    line-height: var(--line-height-post);
    font-size: var(--font-size-post);
    color: var(--font-color-text);
}
ul.ok li {
    list-style-type: none;
}
ul.ok li:before {
    font-family: "glyphs";
    content: "\e906";
    color: var(--color-marker);
    margin-right: 5px;
}
.button {
    display: flex;
    margin-top: 30px;
}
a.btn, a.btn:focus {
    font-size: var(--font-size-text);
    font-family: var(--main-font);
    font-weight: 400;
    font-style: normal;
    background-image: linear-gradient(270deg, rgba(179, 22, 22, 0) 48.44%, #eee 75.52%, rgba(230, 73, 73, 0) 100%);
    animation: bg-move linear 5s infinite;
    background-repeat: no-repeat;
    background-color: var(--btn);
    color: var(--font-color-btn) !important;
    text-shadow: none;
    text-decoration: none;
    text-transform: none;
    border: none;
    box-shadow: none;
    padding: var(--padding-btn);
    border-radius: var(--border-radius-btn);
    width: auto;
}
@-webkit-keyframes bg-move {
  0%   { background-position: -500px 0; }
  100% { background-position: 1000px 0; }
}
@keyframes bg-move {
  0%   { background-position: -500px 0; }
  100% { background-position: 1000px 0; }
}
.btn:hover {
    background-color: var(--btn-hover);
}
.form {
    text-align: center;
    margin: 0 auto;
}
.footer {
    background-color: var(--footer-bg-color);    
}
.copyright {
    font-family: var(--main-font);
    font-size: var(--font-size-text);
    color: var(--footer-font-color);
    padding: 30px 5%;
    background-color: var(--footer-bg-color);
    max-width: 1200px;
    margin: auto;
}
@media only screen
and (max-width : 1023.9px) {
.content {
    margin: 110px auto 0;
}
}
@media only screen
and (max-width : 767.9px) {
.contact {
    right: 5%;
}
.contact a,
.contact a:hover,
.contact a:visited,
.contact a:focus {
    font-size: 0;
    padding: 25px;
    -webkit-tap-highlight-color: transparent;
}
.contact a:before {
    font-size: 24px;
    margin-right: 0;
}
.contact a:hover:before {
    color: var(--font-color-link);
}
}
@media only screen
and (max-width : 480px) {
h1, h2, h3 {
    font-size: var(--font-size-mob-h);
    margin: 30px auto 0;
}
.link { 
    margin-bottom: 5%;
}
a.btn,
a.btn:hover,
a.btn:visited,
a.btn:focus {
    width: 100%;
    text-align: center;
}
p,
ul li, 
ol li,
table {
    font-size: var(--font-size-mob-post);
}
ul, ol {
    padding-inline-start: 5%;
}
.photo {
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
    margin: 40px auto;
}
.photo img {
    width: 90%;
    height: auto;
}
.form {
    text-align: center;
    margin: 0 auto;
}
.copyright {
    line-height: var(--line-height-post);
    text-align: center;
}
}