/*! HTML5 Boilerplate v7.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 1.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */


/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

   html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

p {
  display: block;
  margin-block-start: 0.7em;
  margin-block-end: 0.7em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}


 /* ==========================================================================
   Author's custom styles
   ========================================================================== */
*,
*:before,
*:after {
  box-sizing: border-box;
}

@font-face {
    font-family: NEXTART; /* Гарнитура шрифта */
    src: url(../fonts/NEXT_ART_Regular.otf); /* Путь к файлу со шрифтом */
   }
@font-face {
    font-family: NEXTART THIN; /* Гарнитура шрифта */
    src: url(../fonts/NEXT_ART_Thin.otf); /* Путь к файлу со шрифтом */
   }
@font-face {
    font-family: NEXTART LIGHT; /* Гарнитура шрифта */
    src: url(../fonts/NEXT_ART_Light.otf); /* Путь к файлу со шрифтом */
   }
@font-face {
    font-family: NEXTART BOLD; /* Гарнитура шрифта */
    src: url(../fonts/NEXT_ART_SemiBold.otf); /* Путь к файлу со шрифтом */
   }
@font-face {
    font-family: Houschka Pro; /* Гарнитура шрифта */
    src: url(../fonts/HouschkaPro-Medium.otf); /* Путь к файлу со шрифтом */
   }
@font-face {
    font-family: Houschka Pro; /* Гарнитура шрифта */
    src: url(../fonts/HouschkaPro-Bold.otf); /* Путь к файлу со шрифтом */
    font-weight: bold;
   }
@font-face {
    font-family: Houschka Pro EXTRA BOLD; /* Гарнитура шрифта */
    src: url(../fonts/HouschkaPro-ExtraBold.otf); /* Путь к файлу со шрифтом */
    font-weight: bold;
   }

body {
  /*overflow: hidden;*/
}
 /* ===================================
   Header - menu
   ==================================== */
.header {
  /*height: 70px;*/
  min-height: 50px;
  height: 10vh;
  width: 100%;
  position: fixed;
  z-index: 100;
  background: #22997b;
  display: flex;
  justify-content: center;
  align-items: center;
}

a {color:#2D2D2D}
a:hover {text-decoration: none}

.contacts-content a {color:#fff}

.header-wrapper {
  height: 90%;
  width: 90%;
  align-self: center;
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.header .logo {
  min-height: 40px;
  height: 6vh;
}

.header .menu {
  /*width:60%;*/
  position: relative;
  display: flex;
  list-style-type: none;
  flex-direction: row;
  justify-content: flex-end;
}
.menu{
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 0;
  position: relative;
}

.menu a {
  line-height: 0.87;
  letter-spacing: 0.3px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  /*font-size: 12px;*/
  font-size: 0.8rem;
  font-family: "NEXTART", Arial;
  margin: 0 10px;
}

.language-selector {
  width: 40px;
  font-family: " Houschka Pro EXTRA BOLD", Arial;
  /*font-size: 1.1rem;*/
  font-weight: 600;
  /*text-decoration: underline white;*/
  margin-left: 5vw;
  /*background-color: #1c7f67;*/
}

.language-selector select {
  display: none;
}
.language-selector .select-selected {
  /*background-color: #1c7f67;*/
}

.language-selector:after {

}

/* Style the arrow inside the select element: */
.language-selector .select-selected:after {
  position: relative;
  content: "";
  display: block;
  width: 100%;
  border-bottom: 1px solid;
  margin: 0 auto;
  top: 0
}

.language-selector .select-items a {
  color:#fff;
}

.activity-header {text-align: center;}

/* style the items (options), including the selected item: */
.language-selector .select-items div,.select-selected {

  color: #ffffff;
  padding: 4px 8px;
  /*border: 1px solid transparent;*/
  /*border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;*/
  cursor: pointer;
  width: 40px;
}

.language-selector .select-items div:after {
    position: relative;
    content: "";
    display: block;
    width: 100%;
    border-bottom: 1px solid;
    margin: 0 auto;
    top: 0;
}

.language-selector .select-items {
  position: absolute;
}

/* Style items (options): */
.language-selector .select-items div{
  /*position: absolute;*/
  background-color: #22997B;
  /*top: 100%;*/
  /*left: 0;*/
  /*right: 0;*/
  /*z-index: 99;*/
}

/* Hide the items when the select box is closed: */
.language-selector .select-hide {
  display: none;
}

.language-selector .select-items div:hover, .same-as-selected {
  background-color: #1c7f67;
  /*display: none;*/
}

.menu a:last-child {
  margin-right: 0;
}
.menu a.active{
  position: relative;
}

.menu a.active::after {
    position: relative;
    content: "";
    display: block;
    width: 100%;
    border-bottom: 1px solid;
    margin: 0 auto;
    top: 5px
}
 /* ===================================
   Base flex css
   ==================================== */
.flex-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  min-height: 675px;
  position: relative;
  -webkit-transition: height 0.5s 0ms, min-height 0.5s 0ms;
  transition: height 0.5s 0ms, min-height 0.5s 0ms;
}

.flex-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 90%;
}

.flex-section h1 {
  letter-spacing: 5px;
  text-decoration: none;
  text-transform: uppercase;
  /*font-size: 70px;*/
  font-size: 4.2rem;
  font-family: "NEXTART THIN", Arial;
  margin: 0;
  text-align: center;
}

.flex-section .flex-content h2 {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#53b998+0,33a492+100 */
  background: #53b998; /* Old browsers */
  background: -moz-linear-gradient(-24deg, #53b998 0%, #33a492 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-24deg, #53b998 0%,#33a492 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(114deg, #53b998 0%,#33a492 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#53b998', endColorstr='#33a492',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  letter-spacing: 0.5px;
  text-transform: uppercase;
  /*font-size: 20px;*/
  font-size: 1.2rem;
  font-family: "NEXTART", Arial;
  margin: 0;
  padding: 1vh 1vw;
  color: #fff;
  /*width: min-content;*/
}
@media (min-width: 767px) {
  .management .management-content .management-description .management-committee h2 {margin-right: 30px}
}

.flex-section .flex-content h3 {
  letter-spacing: 0.5px;
  text-transform: uppercase;
  /*font-size: 20px;*/
  font-size: 0.9rem;
  font-family: "NEXTART BOLD", Arial;
  margin: 1em;
  width: 100%;
  font-weight: bold;
  /*text-align: center;*/
}


.flex-section .flex-content span, .flex-section .flex-content div.column, .flex-section .flex-content ul {
  color: #2D2D2D;
  /*font-size: 13px;*/
  /*font-size: 0.9rem;*/
  font-family: "Houschka Pro", Arial;
  line-height: 1.4;
  flex-grow: 1;
}

img.gray-img {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray; /* IE 6-9 */

  -webkit-transition: grayscale 1s;
  -moz-transition: grayscale 1s;
  -o-transition: grayscale 1s;
  transition: grayscale 1s;
}
 /* ===================================
   Main section
   ==================================== */
.main {
  background:
    url(../img/main/MainBackgroundGeneral.png) no-repeat,
    url(../img/main/MainBackgroundBottom.png) no-repeat,
    url(../img/main/MainBackgroundLeftLine.png) no-repeat,
    url(../img/main/MainBackgroundRightLine.png) no-repeat;
  background-size:  cover, 30%, 40%, 10%;
  background-position: center, bottom, left top, top right;
}

.main .main-content {
  flex-direction: row;
  width: 80%;
  height: 100%;
  background: url(../img/main/MainImageFull1.png) no-repeat 90%;
  justify-content: left;
}

.main .main-content .main-logo {
  display: flex;
  align-self: center;
  width: 40%;
  margin: 0 0 5vh 0;
  min-width:400px;
}

.main .main-content .description {
  display: flex;
  text-align: center;
  margin: 25px 0;
  width: 100%;
}

 /* ===================================
   About section
   ==================================== */
.about-forum {
  background: url(../img/about/AboutBackground.png) no-repeat center;
  background-size: cover;
}

.about-forum .about-forum-content {
  height: 100%;
  width: 80%;
}

.about-forum .about-forum-content .about-forum-logo {
  display: flex;
  width: 450px;
  align-self: center;
}
.about-forum .about-forum-content .about-forum-description {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-self: center;
  margin-top: 40px;
  margin-bottom: 20px;
  width: 80vw;
}

.about-forum .about-forum-content .about-forum-description div.column{
  max-width: 38vw;
}

.about-forum .about-forum-content .about-forum-description div.column p {
  margin-top:0
}

.about-forum .about-forum-content .detail{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#53b998+0,33a492+100 */
  background: #53b998; /* Old browsers */
  background: -moz-linear-gradient(-24deg, #53b998 0%, #33a492 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-24deg, #53b998 0%,#33a492 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(114deg, #53b998 0%,#33a492 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#53b998', endColorstr='#33a492',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  align-self: center;
  color: #fff;
  text-transform: uppercase;
  font-family: "NEXTART", Arial;
  letter-spacing: 0.3px;
  text-decoration: none;
  padding: 1vh 3vw;
}

 /* ===================================
   Management section
   ==================================== */
.management {
  background: url(../img/management/ManagementBackground.png) no-repeat center;
  background-size: cover;
}

.management .management-content .management-description {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-self: center;
  margin-top: 40px;
  margin-bottom: 20px;
  width: 55vw;
}
.management .management-content .management-description li{
  line-height: 1.2;
  margin-bottom: 7px;
}

.management .management-content .management-description .management-committee{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /*width: 40vw;*/
}

.management .management-content .management-description .management-leaders{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /*width: 40vw;*/
}

.management .management-content .management-description ul{
  margin: 2vh 0 0;
  padding:0;
}
.management .management-content .management-description ul li {
  display:block;
  margin-bottom: 10px;
}
.management .management-content .management-description ul li em {
  display:block;
  font-style:normal;
  font-size: 0.9rem;
}

.management .management-content .management-description .detail{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5aabcc+0,115894+100 */
  background: #5aabcc; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #5aabcc 0%, #115894 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #5aabcc 0%,#115894 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #5aabcc 0%,#115894 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5aabcc', endColorstr='#115894',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  color: #fff;
  text-transform: uppercase;
  font-family: "NEXTART", Arial;
  letter-spacing: 0.3px;
  text-decoration: none;
  padding: 0.5vh 1vw;
  width: min-content;
  /*font-size: 15px;*/
  font-size: 1rem;
}

 /* ===================================
   Activity section
   ==================================== */
.activity {
  background: url(../img/activity/ActivityBackground.png) no-repeat center;
  background-size: cover;
  justify-content: flex-start;
  overflow: hidden;
}

.flex-section.activity {
  min-height: 1100px
}
.flex-section.activity.max {min-height: 1650px}

.activity .activity-content {
  margin-top: 30vh;
}

.activity .activity-content .activity-description {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: center;
  margin-top: 30px;
  margin-bottom: 20px;
  width: 100%;
}

.activity .activity-content .activity-description .activity-slide-headers{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-self: center;
  width: 90%;
}

.activity .activity-content .activity-description .activity-slide-content{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-self: center;
  width: 80%;
  min-height: 300px;
}

.activity .activity-content .activity-description .activity-slide-content > div{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.activity .activity-content .activity-description > div > h2 {
  width: 100%;
}

.activity .activity-content .activity-content-logo {
  display: flex;
  /*width: 40%;*/
  margin-left: auto;
  margin-right: auto;
}


.activity .activity-content .activity-description div.column {
  margin: 3vh 3vw 0 1vw;
  max-width: 39vw;
}

.activity .activity-content .activity-description .detail{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5aabcc+0,115894+100 */
  background: #5aabcc; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #5aabcc 0%, #115894 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #5aabcc 0%,#115894 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #5aabcc 0%,#115894 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5aabcc', endColorstr='#115894',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  color: #fff;
  text-transform: uppercase;
  font-family: "NEXTART", Arial;
  letter-spacing: 0.3px;
  text-decoration: none;
  padding: 0.5vh 1vw;
  width: min-content;
  /*font-size: 15px;*/
  font-size: 1rem;
  position: relative;
  float: right;
  top: 2vh;
}


 /* ===================================
   Documents section
   ==================================== */
.documents {
  background: url(../img/documents/DocumentsBackground.png) no-repeat center;
  background-size: cover;
  justify-content: flex-start;
}

.documents .documents-header {
  display: flex;
  flex-direction: column;
  /*background: url(../img/DocumentsImage.png) no-repeat center;*/
  background-size: cover;
  width: 100%;
  height: 43vh;
  padding: 4vh 4vw;
}


.documents .documents-header h1{
  margin-top: 10vh;
  /*display: flex;*/
  text-align:center;
  /*color: #fff;*/
}

.documents .documents-header span{
  display: flex;
  /*color: #fff;*/
  width: 420px;
  /*font-size: 13px;*/
  font-size: 0.9rem;
  font-family: "Houschka Pro", Arial;
  line-height: 1.3;
  align-self: center;
}

.documents .documents-content {
  margin-top: 5%;
  width: 50vw;
  height: 60%;
  justify-content: flex-start;
}

.documents .documents-content h2 {
  width: 100%;
  margin-bottom: 1vh;
}

.documents .documents-content .download-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 1vh 0 1vh 1vw;

}

.documents .documents-content .download-item span{
  color: #2D2D2D;
  /*font-size: 16px;*/
  font-size: 1.1rem;
  font-family: "Houschka Pro", Arial;
  line-height: 1.3;

}

.documents .documents-content .download-item .item-title{
}

.documents .documents-content .download-item a, .documents .documents-content .download-item span {
  line-height:28px;
}
.documents .documents-content .download-item .item-title {
  background: url('../img/pdf.png') left center no-repeat;
  padding-left:36px;
  height:32px

}

.main .main-content .description strong {
  font-weight: normal;
  font-size: 1.4rem;
}

.documents .documents-content .download-item a {
  text-align: start;
  display: flex;
  margin-left: 1vh;

}

.documents .documents-content .download-item .item-download {
  transform: scale(1.2, 1.2);
}

 /* ===================================
   Contacts section
   ==================================== */
.contacts {
  background-color: #22997f; /* Old browsers */
  background-image: url(../img/contacts/ContactsBackground.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.contacts .contacts-content {
  width: auto;
}

.contacts .contacts-content h1 {
  color: #fff;
  margin-bottom: 5vh;
}

.contacts .contacts-content span {
  color: #fff;
}


 /* ==========================================================================
   Media classes
   ========================================================================== */
@media (min-width: 1900px) {
  html {
    font-size: 26px;
  }
}

@media (min-width: 1400px) {
  html {
    font-size: 22px;
  }

  .contacts .contacts-content h1 {
    font-size: 7rem;
  }

  .contacts .contacts-content span {
    font-size: 1.5rem;
  }
}

.flex-section .flex-content h2 em {
  font-style: normal;
  display: block;
}

@media (max-width: 1700px) {
  .management .management-content .management-description {
    width: 70vw;
  }
}

@media (max-width: 1400px) {
  .management .management-content .management-description {
    width: 80vw;
  }
}

@media (max-width: 1200px) {
  .flex-section .flex-content h2 em {
    max-width: 350px;
  }
  .management .management-content .management-description {
    width: 92vw;
  }

  .activity .activity-content .activity-description > div > div > p {
    font-size: 0.9rem;
  }

}


@media (min-width: 1200px) {

  html {
    font-size: 16px;
  }

  .header .menu a {
    font-size: 100%;
  }

  .contacts .contacts-content h1 {
    font-size: 5rem;
  }

  .contacts .contacts-content span {
    font-size: 1.2rem;
  }
}
@media (min-width: 896px) {
  .about-forum .about-forum-content .about-forum-description div.column,
  .flex-section .flex-content .management-committee ul,
  .flex-section .flex-content .management-leaders ul  {
        font-size: 1.2rem;
  }
  .header .menu-icon {
    display: none;
  }
}

@media (max-width: 1200px) {
  .main .main-content {
    background: url(../img/main/MainImageFull1.png) no-repeat right/47%;
    width:90%;
  }
}

@media (max-width: 895px) {
  .main {
    background:
      url(../img/main/MainBackgroundLeft768.png) no-repeat,
      url(../img/main/MainBackgroundLeftLine768.png) no-repeat,
      url(../img/main/MainBackgroundBottom.png) no-repeat,
      url(../img/main/MainBackgroundRightLine768.png) no-repeat,
      url(../img/main/MainBackgroundRight768.png) no-repeat;
    background-size:  cover, 70%, 60%, 30%, cover;
    background-position: left, left top, bottom, right top, right;
  }


  .main .main-content {
    background: url(../img/main/MainImageFull1.png) no-repeat right/40vh;
    background-position: right 50% bottom 10vh;
    justify-content: center;
  }

  .main .main-content .main-logo {
    width: 400px;
    margin: 0 0 25vh 0;
  }



  .about-forum {
    background:
      url(../img/about/AboutBackground768.png) no-repeat,
      url(../img/about/AboutBackgroundRight768.png) no-repeat;
    background-size:  100%, 100%;
    background-position: left, right;
  }
  .contacts {
    background-image: url(../img/contacts/ContactsBackground.png);
    background-position: left;
  }

  .management .management-content .management-description {
    width: 80vw;
  }

  .documents .documents-content {
    width: 70vw;
  }
  .contacts .contacts-content {width: 60%}
  .flex-section .flex-content h2 em {max-width: 300px;}
  .menu a {
    /*font-size: 10px;*/
    font-size: 0.7rem;
  }

  .flex-section h1 {
    /*font-size: 50px;*/
    font-size: 3.6rem;
  }

  .flex-section .flex-content h2 {
    /*font-size: 16px;*/
    font-size: 1rem;
  }

  .flex-section .flex-content .detail {
    /*font-size: 16px;*/
    font-size: 0.9rem;
  }

  .flex-section .flex-content span {
    /*font-size: 1rem;*/
  }

  .header .menu {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: absolute;
    height: 100vh;
    width: 100%;
    left: 0;
    background: rgba(34, 153, 123, 0.95);
    padding-top: 20vh;
    z-index: -1;
    align-self: baseline;
  }

  .header .menu a {
    /*font-size: 25px;*/
    font-size: 2.2rem;
    text-align: center;
    font-family: "NEXTART LIGHT", Arial;
    margin: 1.5vh 0;
  }

  .header .menu-icon, .header .menu-icon > img {
    min-height: 50px;
    display: flex;
    height: 7vh;
    margin: auto;
  }

  .header-right {
    display: flex;
    justify-content: flex-end;
  }

  .language-selector {
    min-height: 50px;
    height: 10vh;
    width: 100%;
    min-width: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    margin-right: 3vw;
    text-align: center;
  }
  .language-selector .select-selected:after {
    display: none;
  }
  .language-selector .select-selected {
    width: 100%;
    min-width: 50px;
    /*font-size: 1.4rem;*/
    align-self: center;
    text-align: center;
  }
  .language-selector .select-items {
    width: 50px;
    position: absolute;
    top:10vh;
    /*font-size: 1.4rem;*/
  }

  .language-selector .select-items div {

    color: #ffffff;
    padding: 2.5vh 0;
    /*border: 1px solid transparent;*/
    /*border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;*/
    cursor: pointer;
    width: 100%;
    min-width: 70px;
    height: 10vh;
    text-align: center;
  }
  .language-selector .select-items div:after {
      display: none;
  }
  .activity .activity-content .activity-description > div > div > p {
    font-size: 0.8rem;
  }
  .activity .activity-content .activity-description .activity-slide-headers{
    flex-direction: column;
  }
  .activity .activity-content .activity-description .activity-slide-content{
    width: 96%;
  }

}

.activity .activity-content .activity-description div.column span.more {
  display:block;margin-top:10px
}

@media (max-width: 767px) {
  html {
    font-size: 1.3em;
  }

  .flex-section h1 {
    letter-spacing: 3px;
    /*font-size: 40px;*/
    font-size: 9vw;
  }

  .flex-section .flex-content h2 {
    letter-spacing: 0.4px;
    /*font-size: 15px;*/
    font-size: 3vw;
  }

  .flex-section .flex-content span, .flex-section .flex-content p, .flex-section .flex-content ul {
    /*font-size: 11px;*/
    font-size: 0.9rem;
    margin-bottom: 0.5vh;
  }


  .flex-section.about-forum {min-height: 985px}
  .about-forum .about-forum-content .about-forum-logo {margin-top:20px}
  .flex-section.management {min-height: 985px}
  .flex-section.activity {min-height: 1185px}
  .flex-section.documents {min-height: 400px}

  .flex-section.activity.max {min-height: 2050px}

  .main .main-content {
    background: url(../img/main/MainImageFull1.png) no-repeat right/40vh;
    background-position: right 50% bottom 10vh;
    justify-content: center;
  }

  .main .main-content .main-logo {
    width: 80%;
    max-width: 400px;
    margin: 0 0 25vh 0;
  }

  .about-forum {
    background: url(../img/about/AboutBackground768.png) no-repeat center;
  }

  .contacts {
    background-image: url(../img/contacts/ContactsBackground768.png);
    background-position: left;
    /*background-repeat: no-repeat;*/
    background-size: cover;
  }


  .about-forum .about-forum-content {
    max-width: 450px;
  }

  .about-forum .about-forum-content .about-forum-description {
    flex-direction: column;
    margin-top: 25px;
    margin-bottom: 15px;

  }

  .about-forum .about-forum-content .about-forum-description span, .about-forum .about-forum-content .about-forum-description div.column {
    margin: 10px;
    max-width: 100%;
  }

  .about-forum .about-forum-content .detail{
    font-size: 2vw;
  }

  .management .management-content .management-description {
    flex-direction: column;
    margin-top: 25px;
    margin-bottom: 15px;
    margin-left: 20px;
  }
  .management .management-content .management-description div.column{
    margin-bottom: 0.1vh;
  }

  .management .management-content .management-description .management-committee{
    width: 100%;
    margin-bottom: 1vh;
  }

  .management .management-content .management-description .management-leaders{
    width: 100%;
  }

  .management .management-content .management-description .detail {
    font-size: 2vw;
  }

  .activity .activity-content .activity-description {
    flex-direction: column;
    margin-top: 15px;
    margin-bottom: 10px;
  }

  .activity .activity-content .activity-description div.column{
    max-width: 100%;
    margin-bottom:20px
  }


  .activity .activity-content .activity-description .detail{
    font-size: 2vw;
  }

  .documents .documents-content {
    width: 80vw;
    min-width: 300px;
    max-width: 500px;
    height: 60%;
    justify-content: flex-start;
  }

  .documents .documents-header span{
    width: 600px;
    font-size: 0.8rem;
    margin: 20px 0 40px 0;
  }

  .contacts .contacts-content {
    width: 80%;

  }

  .contacts .contacts-content h1 {
    color: #fff;
    margin-bottom: 5vh;
    /*font-size: 70px;*/
    font-size: 15vw;
    align-self: center;
  }

  .contacts .contacts-content span {
    color: #fff;
    /*font-size: 16px;*/
    font-size: 1rem;
    /*margin-left: 5vw;*/
    align-self: baseline;
  }

}

@media (max-width: 500px) {
  html {
    font-size: 90%;
  }
  .header .menu a {
    font-size: 8vw;
  }

  .main .main-content .main-logo {
    width: 90%;
    min-width: 300px;
    margin: 0 0 15vh 0;
  }


  .flex-section.management {min-height: 685px}
  .flex-section.activity {min-height: 1200px}
  .flex-section.activity.max {min-height: 2000px}

  .main .main-content .description {
    margin: 3vh 0;
  }
  .about-forum .about-forum-content {
    width: 90%;
  }

  .about-forum .about-forum-content .about-forum-logo {
    width: 90%;
  }
  .about-forum .about-forum-content .about-forum-logo img{
    width: 100%;
  }
  .flex-section.about-forum {min-height: 785px}

  .about-forum .about-forum-content .about-forum-description {
    margin-top: 5vw;
    margin-bottom: 2vh;
  }
  .documents .documents-header span{
    width: 90%;
  }
}

@media (max-width: 320px) {
  html {
    font-size: 85%;
  }

  .flex-section {
    height: 90vh;
  }

  .about-forum .about-forum-content .about-forum-logo {
    width: 50%;
  }

  .about-forum .about-forum-content .about-forum-description {
    margin-top: 6vw;
    margin-bottom: 1vh;
  }

  .about-forum .about-forum-content .about-forum-description .separator{
    height: 1vh;
  }

  .about-forum .about-forum-content .about-forum-description span{
    margin: 0.5vh;
  }

  .about-forum .about-forum-content .about-forum-description .detail{
    margin-bottom: 10vh;
  }

  .documents .documents-content {
    min-width: 0;
    height: 60%;
    justify-content: flex-start;
  }
}

 /* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

 .hidden {
  display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap; /* 1 */
}

/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
  white-space: inherit;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
  visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}


/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

   @media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}


/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

   @media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster */
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

span.more {display: block;margin-top:10px}