/* standard elements */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap');

* {
  margin: 0px;
  padding: 0px;
}

a {
  color: #36C;
  text-decoration: none;
}
a:hover {
  color: #06F;
}
html, body {
  height: 100%;
}
body {
  background: #FFF;
  color: #000;
  font-family: "Source Sans Pro";
}
input {
  color: #555;
  font-family: "Source Sans Pro";
}
p,ul {
  font-size: 20px;
}
h1 {
  font-size: 1.7em;
}
h2 {
  font-size: 1.5em;
}
h1,h2 {
  color: #06C;
}
/* misc */
#clearer {
  clear: both;
}

/* structure */
#container {
  min-height: 100%;
  height: auto !important;
  height: 100%;
}

#container, #footer {
  min-width: 960px;
  width: 100%;
}

#header {
  min-height: 92px;
  height: auto !important;
  height: 92px;
  border-bottom: 11.6px solid #21409A;
  border-image: linear-gradient(to right, #FDB913 25%, #007F44 25%, #007F44 50%, #EF4123 50%, #EF4123 75%, #21409A 75%) 11.6;
}

/* title */
#flags {
  margin-top: 4px;
  float: left;
}
#flags span {
  display: block;
  float: left;
  margin-left: 4px;
}
#help {
  margin-top: 2px;
  float: right;
}
#help span.help_span {
  display: block;
  float: left;
  margin-right: 4px;
}
#help span.help_logout {
  padding-top: 4px;
}
#help .logout-user a {
  font-weight: bold;
  color: black;
}
#help .logout-link a {
  font-weight: bold;
}

.login-link a, .logout-user a {
  color: #36C;
}

#flags img, #help img {
  display: block;
}

#title {
  max-width: 1170px;
  margin: 0 auto 35px;
  display: flex;
  justify-content: space-between;
}

#title .dep-name {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
}

#title .dep-name h1 {
  font-weight: bold;
  font-size: 36px;
  color: black;
  letter-spacing: 5px;
}

#title .dep-name div {
  font-weight: 600;
  font-size: 20px;
}

#title .dep-name div img {
  vertical-align: text-bottom;
  margin-right: 20px;
}

#title .logo {
  align-self: center;
}

#title .headings {
  max-width: 817px;
  text-transform: uppercase;
  height: 100%
}

#title .headings h1 {
  color: black;
  font-weight: 600;
  font-size: 20px;
  line-height: 25px;
  margin-bottom: 17px;
}

#title .headings h2 {
  color: black;
  font-weight: 600;
  font-size: 18px;
}

/* main */
#main {
  clear: both;
  max-width: 1170px;
  margin: 75px auto 85px;
}

/* main left */
#menu {
  float: left;
  /*width: 21.875%;*/
  /*width: 18.86%;*/
  /*width: 23.71%;*/
  width: 29.91%;
  min-width: 245px;
  background-color: #21409A;
  border-radius: 20px;
}

#menu ul {
  margin: 0;
  padding: 50px;
}
#menu li {
  list-style: none;
  margin: 0 0 15px 0;
}
#menu li a {
  color: #222;
  display: block;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  font-size: 20px;
}

#menu li a:hover {
  color: white;
}

#logo {
  margin: 30px 0px 0px 0px;
  text-align: center;
  padding: 2px 0px 0px 0px;
  display: none;
}

/* content */
#content {
  float: left;
  margin-left: 50px;
  width: 65.812%;
  font-size: 18px;
}

#content p {
  font-family: "Source Sans Pro" !important;
}

#content ul {
  list-style-type: "—";
}

#content li {
  margin: 5px 0;
  margin-left: 15px;
  /*padding-bottom: 6px;*/
  padding-left: 9px;
}

#content ul li::marker {
  font-weight: bold;
}

#content h2 {
  font-style: normal;
  font-weight: bold;
  font-size: 36px;
  color: #001B6B;
  margin-bottom: 50px;
}

/* org and commettee */
#content .persons {
  width: 100% !important;
}

#content .persons td {
  width: 33.33%;
}

#content .zam-pred {
  width: 33.27% !important;
}

#content #commettee-details {
  cursor: pointer;
  user-select: none;
}

#content #commettee-summary {
  display: none;
}

#content #commettee-summary.active {
  display: block;
}

#content .persons img, #content .zam-pred img {
  border-radius: 50%;
}

/* main page */
#content .main-info {
  width: 100% !important;
}

#content .main-info td {
  width: 50%;
  vertical-align: top;
}

#content .main-info td:nth-child(2n) {
  padding-left: 5px;
}

#content .main-info td:nth-child(2n+1) {
  padding-right: 5px;
}

#content .about img {
  max-width: 100%
}

#content .about a {
  color: white;
  text-decoration: none;
}

/* culture page */
#content .flexbox {
  display: flex;
  color: white;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}

#content .flexbox .flex-child {
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  margin-bottom: 30px;
  justify-content: center;
}

#content .flexbox .flex-child.first {
  width: 370px;
  background-color: #FDB913;
}

#content .flexbox .flex-child.second {
  width: 370px;
}

#content .flexbox .flex-child.third {
  width: 100%;
  background-color: #48AF70;
}

#content .flexbox .flex-child.fourth {
  width: 270px;
}

#content .flexbox .flex-child.fifth {
  width: 470px;
  background-color: #EF4123;
}

#content .flexbox .flex-child .culture-text {
  padding: 30px;
}

#content .flexbox .flex-child .culture-image {
  width: inherit;
  line-height: 0;
}

#content .flexbox .flex-child p {
  width: inherit;
}

#content .flexbox .flex-child p img {
  width: inherit;
  object-fit: cover;
  border-radius: 5px 5px 0 0;
  max-width: 770px;
}

/* archive */
#content .slide-container {
  width: 100%;
  position: relative;
  margin-bottom: 50px;
  height: 489px;
  overflow: hidden;
}

#content .slide-container .slide-item {
  opacity: 0;
  line-height: 0;
  transition: opacity 1s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#content .slide-container .slide-item.active {
  opacity: 1;
}

#content .slide-container .slide-item.active img {
  height: 100%;
}

#content .slide-container .slide-item p {
  width: inherit;
}

#content .slide-container .slide-item p img {
  width: inherit;
  border-radius: 5px;
  object-fit: cover;
}

#content .slide-container .slider-dots {
  display: flex;
  justify-content: space-between;
  bottom: 30px;
  width: 88.31%;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
}

#content .slide-container .slider-dots .slide-selector {
  width: 6.49%;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  user-select: none;
}

#content .slide-container .slider-dots .slide-selector:hover,
#content .slide-container .slider-dots .slide-selector.active {
  background: rgba(255, 255, 255, 0.9);
}

#content #archive-closer {
  display: none;
}

#content #archive-closer.active {
  display: block;
  cursor: pointer;
}

#content .archive-descriptions a {
  color: #FF764F;
}

#content .archive-descriptions .archive-expandable {
  display: none;
  margin-bottom: 50px;
}

#content .archive-descriptions .archive-expandable.opened {
  display: block;
}

#content .archive-descriptions .archive-expandable .expandable-title{
  margin-bottom: 30px;
}

#content .archive-dates {
  display: flex;
  flex-wrap: wrap;
  column-gap: 50px;
  padding: 0 10px;
  margin-bottom: 50px;
  font-weight: 600;
}

#content .archive-dates .archive-date-selector {
  cursor: pointer;
}

#content #archive-button {
  box-sizing: border-box;
  padding: 15px 30px;
  width: 246px;
  min-height: 55px;
  background: #EF4123;
  border-radius: 5px;
  color: white;
  text-align: center;
  font-weight: 600;
  cursor: pointer;
}

/* footer */
/*#footer, #push {
  height: 32px;
  margin: 6px auto 0px auto;
}*/
#footer {
  height: 370px;
  background-color: #001B6B;
  color: #FFFFFF;
  padding-top: 85px;
  box-sizing: border-box;
}

#footer h3 {
  text-align: center;
  font-weight: bold;
  font-size: 36px;
  margin-bottom: 50px;
}

#footer .footer-info {
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
  width: 60.73%;
}

#footer .footer-info .contacts {
  font-size: 18px;
}

#footer .footer-info .contacts .contacts-item {
  margin-bottom: 30px;
  line-height: 100%;
}

#footer .footer-info .contacts .contacts-item:last-child {
  margin-bottom: 0;
}

#footer .footer-info .support {
  font-weight: bold;
  font-size: 24px;
  text-align: right;
  align-self: end;
  margin-left: 10px;
}

#footer .footer-info .support .text {
  margin-bottom: 30px;
  line-height: 100%;
}

#footer a {
  color: white;
  text-decoration: none;
}

#footer .footer-info .support .support-link {
  border: 1px solid white;
  outline: none;
  width: 200px;
  height: 60px;
  background-color: transparent;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
}

/*crutch for min-width for explorer*/
* html .crutch1 {
  padding-left:960px;
}
* html .crutch3 {
  margin-left:-960px;
  position:relative;
}
* html .crutch1,
* html .crutch2,
* html .crutch3 {
  height:1px;
}

/*login page*/
form#loginForm table {
  border: none;
}

form#loginForm table tr {
  display: block;
  font-family: "Source Sans Pro";
  background: none;
}

form#loginForm table tr.line1 {
  margin-bottom: 25px;
}

form#loginForm table tr.line2 {
  margin-bottom: 15px;
}


form#loginForm table tr td {
  border: none;
  background: none;
  display: block;
  padding: 0;
}

form#loginForm table tr td.login-label {
  text-transform: uppercase;
  font-weight: normal;
  font-size: 18px;
  margin-bottom: 10px;
}

form#loginForm table tr td input.login-text {
  width: 370px;
  height: 50px;
  padding: 12.5px 15px;
  border: 2px solid #21409A;
  box-sizing: border-box;
  border-radius: 5px;
  font-weight: normal;
  font-size: 20px;
  outline: none;
  color: black;
}

form#loginForm table tr td .login-stay {
  font-size: 16px;
}

form#loginForm table tr td .login-stay,
form#loginForm table tr td .login-input {
  float: none;
}

form#loginForm table tr td .login-input input {
  width: 370px;
  height: 50px;
  background: #21409A;
  outline: none;
  border: none;
  border-radius: 5px;
  font-weight: 600;
  font-size: 20px;
  color: white;
  margin-top: 10px;
  cursor: pointer;
}

@media only screen and (max-width:1440px) {

  #menu li a {
    font-size: 18px;
  }

  #content {
    width: 65.712%;
  }
}

@media only screen and (max-width:1170px) {
  #menu {
    margin-left: 10px;
  }
  
  #main {
    margin-left: 0;
    margin-right: 0;
  }

  #content {
    width: 63%;
  }
  
  #content .flexbox {
    flex-direction: column;
    align-items: center;
  }
}