body { background-color: #99ccff; text-align: center; margin: 1% 1% 2% 1%; font-family: verdana, roboto, inter open sans; }
@media screen and (min-width: 641px) { body {font-size: 15px;} h1 {font-size: 25px;} h2 {font-size: 20px;}}
@media screen and (max-width: 640px) { body {font-size: 14px;} h1 {font-size: 20px;} h2 {font-size: 15px;}}

img { border: 0; }
table { border: 0; margin: 0px; padding: 0px; } 
caption { color: #ffffff; } 

table { table-layout: fixed; /*таблица не резиновая*/ width: 80%; }
td { hyphens: auto; }
table, th, td { border: 1px solid black; border-collapse: collapse; }
/*Для планшетов*/
@media screen and (max-width: 970px) { 
table { width: 90%; font-size: 0.9em; font-family: roboto, inter open sans;}}
/*Для мобильных*/
@media screen and (max-width: 640px) {
table { width: 100%; font-size: 0.9em; font-family: roboto, inter open sans;}
.vert {writing-mode: vertical-rl; transform: rotate(-180deg);}}
	

a, a:link, a:active, a:visited { color:#0066cc; text-decoration:underline; }
a:hover { color:#000066; text-decoration:underline; }
h1, h1:link, h1:active, h1:visited, h1:hover { color:#ff0000; font-weight:bolder; text-decoration:none; }
h2, h2:link, h2:active, h2:visited, h2:hover { color:#114e8a; font-weight:bolder; text-decoration:none; }

a.top,  a.top:link, a.top:visited { color:#000000; text-decoration:underline}

a.nav, a.nav:link, a.visited /*на море, ссылки*/ { color:#000066; font-weight:bold; text-decoration: underline; }
a.nav:active, a.nav:hover { color:#0066ff; font-weight:bold; text-decoration: underline; } 

a.txt_black, a.txt_black:link, a.txt_black:visited { color:#000066; text-decoration:underline; }
a.txt_black:active, a.txt_black:hover { color:#183d62; text-decoration:underline; } 

span, span:link, span:active, span:visited, span:hover /*оформление сайта*/ { color:#0066cc; font-weight:bold; text-decoration:none; }
span.s, span.s:link, span.s:active, span.s:visited, span.s:hover /*ссылки под таблицами*/ { color:#000066; font-size: 0.9em; font-weight:bold; text-decoration:none; } 
span.m, span.m:link, span.m:active, span.m:visited, span.m:hover /*словарь*/ { color:#114e8a; font-size: 1.3em; font-weight:bolder; text-indent: -10px; text-decoration:none; } 

.topper /*div переносится*/ { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center;
  margin: 0.5%; 
  padding-bottom: 10px}

.mail, .tele /*на десктопе 3 колонки*/ { 
  width: auto; 
  display: flex; 
  flex-wrap: nowrap; 
  justify-content: center; 
  align-items: center; 
  box-sizing: border-box;}

.mail a, .tele p { padding: 0px 20px 0px 20px; } 
.mail a, .tele p { padding: 0px 20px 0px 20px; } 

/*На мобильных 1 колонка (во всю ширину)*/
@media screen and (max-width: 640px) { 
.mail, .tele { width: 100%; }
.mail a, .tele p { padding: 0px 40px 0px 40px; margin-bottom: 0px;}}

header { 
  display: flex; 
  flex-wrap: nowrap; 
  justify-content: center;
  width: 100%
  box-sizing: border-box; /*учитывать отступы*/
  background-color: #000000;
  border-radius: 7px 7px 0px 0px;
  margin: 0px;
  padding: 0px; } 

.fon { 
  display: flex; 
  justify-content: center; 
  box-sizing: border-box; 
  background-color: #000000;
  width: 100%;
  background-image: url('img/fon.gif');
  background-size: 100%; /*покрывает весь контейнер*/
  padding: 0px 20px 20px 20px; 
  border-radius: 0px 0px 7px 7px;
  box-shadow: 1px 5px 10px -5px black; } 

nav { 
  display: flex;
  position: relative; 
  justify-content: center;
  box-sizing: border-box;
  width: 80%;
  background-color: #0066cc;
  border-radius: 7px 7px 0px 0px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 1px 5px 10px -5px black; } 
/*Для планшетов*/
@media screen and (max-width: 970px) { 
nav { width: 90%; }}

.dws-menu * { margin: 0; padding: 0; }
.dws-menu ul, .dws-menu ol { list-style: none; } /*убираем маркеры списка*/ 
.dws-menu > ul { display: flex; justify-content: center; }
.dws-menu > ul li a /*позиционируем надписи*/ { 
  display: block;
  background: #0066cc;
  padding: 10px 35px 10px 35px;
  font-size: 1em; 
  color: #ffffff;
  text-decoration: none;
  text-transform:uppercase;
  transition: all 0.5s ease; } 

/*Позиционируем надписи для планш*/
@media screen and (max-width: 970px) { 
.dws-menu > ul li a { padding: 10px 15px 10px 15px; font-size: 0.85em; }}

.dws-menu > ul li:first-child { border-left: 0px solid #99ccff; }
.dws-menu > ul li:last-child { border-right: 0px solid #99ccff; }  
.dws-menu > ul li { position: relative; border-right: 1px solid #99ccff; }   
.dws-menu li a:hover /*ссылки при наведении*/ { background: #183d62; color: #ffffff; box-shadow: 1px 5px 10px -5px black; transition: all 0.5s ease; }    
.dws-menu li ul /*выпад меню*/ { position: absolute; min-width: 160px; display: none; /*не показ в покое*/ }    
.dws-menu li:hover > ul { display: block; } /*выпад при наведении*/    
.dws-menu li > ul li { border: 1px solid #99ccff; }    
.dws-menu li > ul li a { padding: 10px; background: #0066cc; } 

/*Меню для мобильных*/
@media screen and (max-width: 640px) {
/*отступ от краев*/ .dws-menu { overflow: hidden; }
/*обычное меню скрыть*/ .dws-menu ul { display: none; }}

.slider-news { 
  width: 100%; 
  box-sizing: border-box; /*учитывать отступы*/
  overflow-x: scroll; /*горизонт прокрутка*/
  scroll-behavior: smooth; /*плавно*/
  padding: 5px; 
  table-layout: auto; } 

.slider-news td { 
  background-color: #ffffff;
  box-sizing: border-box; /*учитывать отступы*/
  min-width: 110px; /* % или фиксир ширина или auto */
  height: auto; /* % или фиксир ширина или auto */
  text-align: left; 
  padding: 10px;
  border-radius: 7px;
  border: 3px solid #99ccff; }

.slider-news::-webkit-scrollbar, .slider::-webkit-scrollbar, .slider-vert::-webkit-scrollbar { border-radius: 5px; height: 3hw; }
.slider-news::-webkit-scrollbar-track, .slider::-webkit-scrollbar-track, .slider-vert::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.6); border-radius: 5px; box-shadow: 1px 5px 10px -5px black; }
.slider-news::-webkit-scrollbar-thumb, .slider::-webkit-scrollbar-thumb, .slider-vert::-webkit-scrollbar-thumb { background: #0066cc; border-radius: 5px; box-shadow: 1px 5px 10px -5px black; }
.slider-news::-webkit-scrollbar-thumb:hover, .slider::-webkit-scrollbar-thumb:hover, .slider-vert::-webkit-scrollbar-thumb:hover  { background: #183d62; }


.slider { 
  width: 100%;
  overflow-x: scroll; 
  white-space: nowrap; /*не переносить*/
  scroll-behavior: smooth; }

.slider img {
  display: inline-block; /*в ряд*/
  width: auto; 
  height: 200px; 
  margin-right: 10px; }


.slider-v { 
  min-width: 20%; 
  display: flex; 
  justify-content: center; 
  padding: 50px 0px 30px 10px; }

/*Для планшета*/
@media screen and (max-width: 970px) { 
.slider-v { min-width: 25%; }}
/*Для мобильных*/
@media screen and (max-width: 640px) { 
.slider-v { min-width: 100%; padding: 0px; }}

.slider-vert { 
  width: 101%;
  height: 1400px;
  overflow-y: scroll; 
  overflow-x: none;
  white-space: wrap; /*переносить*/
  scroll-behavior: smooth; }

.slider-vert img, .slider-vert items {
  display: inline-block; /*в ряд*/
  width: 90%; 
  margin-top: 0px; }

/*Для планшета*/
@media screen and (max-width: 970px) { 
.slider-vert { height: 1400px; }}

@media screen and (max-width: 640px) { 
.slider-vert { 
  display: flex; 
  justify-content: center;   
  flex-wrap: wrap; /*не переносить*/
  width: 100%; 
  height: 330px;
  box-sizing: border-box; 
}
.sl { box-sizing: border-box; }
.slider-vert img { width: 95%; padding-right: 10px; }}


.slider-vert2 { 
  width: 100%;
  overflow-y: none; 
  overflow-x: none;
  white-space: wrap; /*переносить*/
  scroll-behavior: smooth; }

.slider-vert2 img, .slider-vert2 items {
  display: inline-block; /*в ряд*/
  width: 90%; 
  margin-top: 0px; 
  padding: 0px 20px 30px 0px;}

@media screen and (max-width: 640px) { 
.slider-vert2 { 
  display: flex; 
  justify-content: center;   
  flex-wrap: wrap; /*не переносить*/
  width: 100%; 
  height: 100%;
  box-sizing: border-box; }
.slider-vert2 img { width: 95%; padding: 0px 10px 30px 0px; }}






footer { 
  background-color: #0066cc; 
  padding: 5px;
  border-radius: 7px;
  box-shadow: 1px 5px 10px -5px black; }


.menu-wrap /* скроем чекбокс при норм экране*/ { 
  display: none;   
  position: fixed;
  top: 1%;
  left: 1%;
  z-index: 1; }
/*Меню для мобильных*/
@media screen and (max-width: 640px) { 
.menu-wrap { 
  display: block; position: fixed;
  top: 1%;
  left: 1%;
  z-index: 1; }}

.menu-wrap .toggler { 
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: 2;
  width: 40px;
  height: 40px;
  opacity: 0; }

.menu-wrap .hamburger { 
  position: absolute;
  top: 0;
  left:0;
  z-index: 1;
  padding: 1em;
  width: 30px;
  height: 30px;
  background-color: rgba(0, 102, 204, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 7px; 
  box-shadow: 1px 5px 10px -5px black; }

/*средняя черта меню*/
.menu-wrap .hamburger > div { 
  position: relative;
  width: 100%;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.9);
  transition: transform 0.5s ease; }

/*верх и ниж черта меню*/
.menu-wrap .hamburger > div::before, .menu-wrap .hamburger > div::after { 
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: inherit; } 

/*сдвиг черту вниз*/
.menu-wrap .hamburger > div::after { top: 10px; }

/*анимация toggler*/
.menu-wrap .toggler:checked + .hamburger > div { transform: rotate(135deg); }

/*поворот черты в X */
.menu-wrap .toggler:checked + .hamburger > div::before, .menu-wrap .toggler:checked + .hamburger > div::after { top: 0;
  transform: rotate(90deg); }

/*поворот Х при наведении*/
.menu-wrap .toggler:checked:hover + .hamburger > div { transform: rotate(225deg); }

/*показать меню*/
.menu-wrap .toggler:checked ~ .menu { visibility: visible; }
.menu-wrap .toggler:checked ~ .menu> div { transform: scale(1); transition-duration: 0.5s; }
.menu-wrap .toggler:checked ~ .menu> div > div { opacity: 1; transition: opacity 0.5s ease; }
.menu-wrap .menu { 
  position: fixed;
  top: 0;
  left: 0;
  width: 75%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  visibility: hidden;
  justify-content: center; }

.menu-wrap .menu > div {
  width: 200vw;
  height: 200vw;
  border-radius: 20%;
  background-color: rgba(153, 204, 255, 0.95);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0px;  
  transform: scale(0);
  transition: all 0.5s ease; }

.menu-wrap .menu > div > div {
  max-width: 90%;
  max-height: 100%;
  text-align: center;
  opacity: 0; 
  transition: opacity 0.5s ease; }

.menu-wrap .menu > div > div > ul > li {
  list-style: none;
  font-size: 1em; 
  padding: 7px; }

.menu-wrap .menu > div > div > ul > li > a {
  list-style: none;
  text-decoration: none;
  text-transform:uppercase; 
  color: #003366;
  padding: 7px 100% 7px 50%;
  transition: color 0.5s ease; } 

.menu-wrap .menu > div > div > ul > li > ul > li, .menu-wrap .menu > div > div > ul > li > ul > li a {
  list-style: none;
  text-decoration: none;
  color: #003366;
  transition: color 0.5s ease; } 
.menu-wrap .menu > div > div > ul > li > ul > li { padding: 7px; } 
.menu-wrap .menu > div > div > ul > li > ul > li a { padding: 7px 110% 7px 10%; } 
  
/*ссылки при наведении*/
.menu-wrap .menu > div > div > ul > li a:hover { background: #183d62;  color: #ffffff;  box-shadow: 1px 5px 10px -5px black; transition: all 0.5s ease; }   


/*Полоса в Галерее и Море*/
.flex > .stripe { width: 100%; height: 3px; background-color: rgba(0, 102, 204, 0.9); margin: 20px 0px 20px 0px; }