/* Файл с общими изменениями на всём сайте */

*{  /* Стили, приминимые ко всем элементам */
    padding: 0; /* Убирает внутренние отступы от границ элемента до его содержимого */
    margin: 0; /* Убирает внешние отступы  от границ элемента до соседних элементов */
    border: 0; /* Убирает границы */
    box-sizing: border-box; /* Не будут добавляться внутренние отступы и границы к итоговой ширине */
    text-decoration: none; /* Убирает подчеркивание для текста */
    list-style: none; /* Убрает маркеры списка */
    outline: none; /* Убирает отображение контура */
}

html, body{ /* Стили, приминимые к элементам html и body */
    height: 100%; /* Устанавливает высоту */
    width: 100%; /* Устанавливает ширину */
	font-family: arial; /* Устанавливает шрифт arial */
    font-size: 16px; /* Устанавливает размер шрифта */
}

.wrapper{ /* Стили, приминимые к классу wrapper */
    display: flex; /* Является flex-контейнером */
    flex-direction: column; /* Располагает элементы в столбец, сверху вниз */
    min-height: 100%; /* Устанавливает минимальную высоту */
}

main{ /* Стили, приминимые к элементу main */
    flex: 1 1 auto; /* Позволяет flex элементу сжиматься и увеличиваться по мере необходимости */
    padding-bottom: 100px; /* Устанавливает внутренний отступ снизу равный 100 пикселям */
    background-color: #c1d9f9; /* Изменение цвета задника */
}

h1, h2, b{ /* Стили, приминимые к элементам h1, h2, b */
    color: #0a1c34 /* Изменение цвета текста */
}

.content{ /* Стили, приминимые к классу content */
    width: 80%; /* Устанавливает ширину 80% для удобства воспиятия контента */
    max-width: 1350px; /* Устанавливает максимальную ширину */
    margin: 0 auto; /* Центрирование объектов */
    padding: 0 20px 20px 20px; /* Устанавливает внутренние отступы. Верхний - 0px, правый, нижний, левый - 20px */
    background: #fcfcfc; /* Изменение цвета задника */
    border-radius: 20px; /* Закругление элемента */
    margin-top: 40px; /* Устанавливает внешний отступ сверху равный 40 пикселям */
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); /* Задание тени объекту */
}

hr{ /* Стили, приминимые к элементам h1, h2, b */
    background: linear-gradient(to right, transparent, rgba(10, 28, 52, 0.877), transparent); /* Устанавливает градиент от центра в лево и право */
    height: 2px; /* Устанавливает высоту градиента */
    margin: -2px 0 10px 0; /* Устанавливает внешние отступы */
} 

.preloader {
    /*фиксированное позиционирование*/
    position: fixed;
    /* координаты положения */
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    /* фоновый цвет элемента */
    background: #e0e0e0;
    /* размещаем блок над всеми элементами на странице (это значение должно быть больше, чем у любого другого позиционированного элемента на странице) */
    z-index: 1001;
  }

  .preloader__row {
    position: relative;
    top: 50%;
    left: 50%;
    width: 70px;
    height: 70px;
    margin-top: -35px;
    margin-left: -35px;
    text-align: center;
    animation: preloader-rotate 2s infinite linear;
  }

  .preloader__item {
    position: absolute;
    display: inline-block;
    top: 0;
    background-color: #337ab7;
    border-radius: 100%;
    width: 35px;
    height: 35px;
    animation: preloader-bounce 2s infinite ease-in-out;
  }

  .preloader__item:last-child {
    top: auto;
    bottom: 0;
    animation-delay: -1s;
  }

  @keyframes preloader-rotate {
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes preloader-bounce {

    0%,
    100% {
      transform: scale(0);
    }

    50% {
      transform: scale(1);
    }
  }

  .loaded_hiding .preloader {
    transition: 0.3s opacity;
    opacity: 0;
  }

  .loaded .preloader {
    display: none;
  }

  .fa-arrow-down{ /* Стили, приминимые к классу fa-arrow-dow */
    margin-left: 5px; /* Устанавливает внешнией отступ слева */
    font-size: 20px; /* Устанавливает размер шрифта */
}


.upbtn{ /* Стили, приминимые к классу upbtn */
    z-index: 10; /* Задание индекса */
    width: 0px; /* Устанавливает высоту */
    height: 100%; /* Устанавливает ширину */
    position: fixed; /* Фиксирует положение */
	top: 0; /* Устанавливает отступ сверху */
	left: 0; /* Устанавливает отступ слева */
    cursor: pointer; /* Изменяет курсор при наведении */
    opacity: 0.3; /* Устанавливает прозрачность */
    transition: all .4s ease-in-out; /* Время эффекта */
    background-position: center; /* Устанавливает положение задника */
    background-repeat: no-repeat; /* Запрещает повторения */
    background-color: #037e9a; /* Устанавливает цвет задника */
    background-image: url(../img/arrow-up.svg); /* Устанавливает изображение в контейнере */
    background-size: 50%; /* Устанавливает размер изображения */
}

.upbtn:hover{ /* Стили, приминимые к классу upbtn при наведении */
    opacity: 0.9; /* Устанавливает прозрачность */
}