h1 {margin-top:10%;}     
p {color: #4d4d4d; line-height: 1.5;}

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,700);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
*, *:before, *:after {
  box-sizing: border-box;
}

h1 {margin-top:10%;
    text-align: center;
     padding:5px 0 0 0;
	
} 

ol {
text-align:justify;
color:#4d4d4d; line-height: 1.5;
}

ul {
text-align:justify;
color:#4d4d4d; line-height: 1.5;
}


a:link {color: #2638E6; text-decoration: none; font-size: 16px;} 
a:active {color: #0D8F63; text-decoration: none;}
a:visited {color: #2638E6; text-decoration: underline;}
a:hover {text-decoration: underline;}

H1 {color: black; font-weight: bold; font-size: 22px;}
H2 {color: black; font-weight: bold; font-size: 20px; text-align:left;}
H3 {color: black; font-weight: bold; font-size: 18px;}
p {margin-left: 10px; font-size: 16px;}

ol {font-size: 16px;}

ul {font-size: 16px;}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

/* скрываем чекбокс */
#menu__toggle {
  opacity: 0;
}
/* стилизуем кнопку */
.menu__btn {
  display: flex; /* используем flex для центрирования содержимого */
  align-items: center;  /* центрируем содержимое кнопки */
  position: absolute;
  top: 2%;
  right: 20px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 12;
}

/* добавляем "гамбургер" */
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #000;
}
.menu__btn > span::before {
  content: '';
  top: -8px;
}
.menu__btn > span::after {
  content: '';
  top: 8px;
}

/* контейнер меню */
.menu__box {
  display: block;
  position: fixed;
  visibility: hidden;
  top: 0;
  right: -100%;
  width: 300px;
  height: 100%;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  text-align: center;
  background-color: #fff;
  box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
  z-index: 11;
}
/* элементы меню */
.menu__item {
  display: block;
  padding: 12px 24px;
  color: #333;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
}

a.menu__item {color:#000;
text-decoration:none;    
font-size: 20px;
font-weight: 500;}
a:hover.menu__item {color: #fff;
}

.menu__item:hover {
  background-color: #000;
}

#menu__toggle:checked ~ .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn > span::before {
  top: 0;
  transform: rotate(0);
}
#menu__toggle:checked ~ .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  visibility: visible;
  right: 0;
 
}

.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  transition-duration: .25s;
}
.menu__box {
  transition-duration: .25s;
}
.menu__item {
  transition-duration: .25s;
}

h2 {text-align:left;}







@media screen and (min-width:376px) and (max-width:768px) {
    .hide {display:none;}}
    
@media screen and (min-width:240px) and (max-width:375px) {
    .hide {display:none;}}  

@media only screen and (max-width : 980px){
    .hide {display:none;}}

@media screen and (min-width:240px) and (max-width:375px){
    .hide {display:none;}}

@media screen and (min-width:376px) and (max-width:768px){
    .hide {display:none;}}

@media screen and (min-width:240px) and (max-width:375px) {
    .hide {display:none;}}