@charset "UTF-8";
/* Обнуление */
* {
margin: 0;
padding: 0;
border: 0;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:focus, :active {
outline: none;
}
a:focus, a:active {
outline: none;
}
header, nav, aside, footer {
display: block;
}
html, body {
height: 100%;
width: 100%;
font-size: 100%;
line-height: 1;
font-size: 14px;
-ms-text-size-adjust:100%;
-moz-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
input, button, textarea {
font-family: inherit;
}
input::-ms-clear {
display: none;
}
button {
cursor: pointer;
}
button::-moz-focus-inner {
padding: 0;
border:0;
}
a, a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
ul li {
list-style: none;
}
img {
vertical-align: top;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: 400;
}
/*--------------------*/
/***********************************
Google Fonts
***********************************/
@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&subset=latin,cyrillic);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400&display=swap);
@import url(https://fonts.googleapis.com/css?family=Roboto:700&display=swap);
/* Основные стили */
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.wrapper {
display: flex;
min-height: 100%;
overflow: hidden;
flex-direction: column;
background-color: #18171c;
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0px 15px;
}
@media (max-width: 1280px) {
.container {
max-width: 970px;
}
}
@media (max-width: 992px) {
.container {
max-width: 750px;
}
}
@media (max-width: 767px) {
.container {
max-width: none;
}
}
.content { /* для прижатия футера */
flex: 1 1 auto;
}
.header {
background-color: #000;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 50;
}
.header:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: 2;
}
.header__body {
position: relative;
display: flex;
justify-content: space-between;
height: 80px;
align-items: center;
}
.header__logo {
flex: 0 0 40%;
position: relative;
z-index: 3;
}
.header__logo img {
max-width: 100%;
display: block;
}
.header__burger {
display: none;
}
.header__menu {}
.header__list {
display: flex;
position: relative;
z-index: 2;
}
.header__list li {
list-style: none;
margin: 0 0 0 20px;
}
.header__link {
color: #fff;
text-transform: uppercase;
font-family: 'PT Sans Narrow', sans-serif;
font-size: 18px;
font-weight: 700;
text-decoration: none;
}
.header__link:hover {
color: #cca700;
}
@media (max-width: 767px) {
body.lock {
overflow: hidden;
}
.header__body {
height: 60px;
}
.header__logo {
flex: 0 0 250px;
}
.header__burger {
display: block;
position: relative;
width: 30px;
height: 20px;
z-index: 3;
}
.header__burger:before,
.header__burger:after {
content: '';
background-color: #fff;
position: absolute;
width: 100%;
height: 2px;
left: 0;
transition: all 0.3s ease 0s;
}
.header__burger span {
position: absolute;
background-color: #fff;
left: 0;
width: 100%;
height: 2px;
top: 9px;
transition: all 0.3s ease 0s;
}
.header__burger:before {
top: 0;
}
.header__burger:after {
bottom: 0;
}
.header__burger.active span {
transform: scale(0);
}
.header__burger.active:before {
transform: rotate(45deg);
top: 9px;
}
.header__burger.active:after {
transform: rotate(-45deg);
bottom: 9px;
}
.header__menu {
position: fixed;
top: -100%;
left: 0;
width: 100%;
height: 100%;
overflow: auto; /* чтобы меню можно было скролить */
background-color: #4d4d4d; /* цвет меню */
padding: 70px 10px 20px 10px;
transition: all 0.3s ease 0s;
}
.header__menu.active {
top: 0;
}
.header__list {
display: block;
text-align: center;
}
.header__list li {
margin: 0 0 20px 0;
}
.header__link {
font-size: 22px;
}
}
/********************************
* *
* CONTENT *
* *
********************************/
.title {
color: #445161;
font-size: 30px;
line-height: 36px;
}
/********************************
* *
* TEST CONTENT *
* *
********************************/
.page {
margin: 100px 0 20px 0;
}
.page__row {
display: flex;
margin: 0 -10px; /* ЗДЕСЬ НЕ РАБОТАЕТ */
border: 5px solid #f99;
}
.page__column {
padding: 0 10px; /* ЗДЕСЬ НЕ РАБОТАЕТ */
border: 5px solid #ff0;
}
.page__column_1 {
flex: 1 1 auto;
order: 2;
background-color: #009;
}
.page__column_2 {
flex: 0 0 20%;
order: 1;
background-color: #00f;
}
.page__content {}
/********************************
* *
* END TEST CONTENT *
* *
********************************/
/********************************
* *
* FOOTER *
* *
********************************/
.footer {
background-color: #000;
}
.footer__row { /* flex-контейнер */
display: flex;
margin: 0 -10px; /* Отступы между колонками. Для этого флекс-контейнер раздвигаем отрицательным margin наполовину отступа */
}
.footer__column { /* flex-элемент */
flex: 0 1 33.333%;
padding: 0 10px; /* Отступы между колонками. А сами колонки сдвигаем */
display: flex; /* чтобы расширить вниз колонки */
}
.footer__item { /* содержимое */
flex-grow: 1; /* чтобы заполнить пространство вправо */
background-color: #fff;
color: #000;
margin: 10px 0 10px 0; /* верхний, правый, нижний, левый */
border-radius: 5px;
}
.footer__content {
padding: 10px;
color: #000;
font-size: 14px;
line-height: 20px;
display: flex;
position: relative; /* для img */
}
.footer__content img {
max-width: 100%;
height: 100%;
object-fit: cover;
opacity: .6;
}
.footer__content img:hover {
opacity: 1;
}
@media screen and (min-width: 320px) and (max-width: 519px) {
.footer__row {
margin: 0;
flex-direction: column;
}
.footer__column { /* flex-элемент */
flex: 0 1 100%;
padding: 0;
}
.footer__item {
margin: 5px 0 5px 0;
}
}