.search {
  display: flex;
  height: 3.4rem
}

.search__field {
  border: 1px solid #dcdcdc;
  flex: 1 1;
  padding: 1rem;
  font-size: 1.6rem;
  color: #696969
}

.search__field:focus,
.search__field:hover {
  border-color: #9f9f9f;
  outline: none
}

.search__button {
  border: 0;
  width: 4rem;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAMAAACnUt2HAAAAAXNSR0IB2cksfwAAAQhQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////kOfX3wAAAFh0Uk5TAFGm5v/1vXAKELLhSwvU/os7JDBt1U224Cub/BpD+SCiqygS5THXRheqYfsctVnSSu6GXtwDG2wi71drfwxSuSXnnHWKyOQYWvhxDUmAmGRPzAa8brd38NftZX4AAADOSURBVHicZY97VwFBHIaH3lZYUitiXUJWlMvuStYqlJBb7n3/b2Kavcw5vH/M+8wzc+Z3hhAaj/cCl4LvivD4A7ASFF0XCuM6cnMrRe+AmCPjuE9YlIScsiiNTNY5F/BgQQ4R96U85AKDRxT5TAUl1sATl2VUWD/jhcsqaqzraHCpQmKtQXCdjuYrgxbwZru2gY6NJtB9/4cPA+j1basBg8+v4Tf7/2hs24nC9j9Tka7KzJkwXyyHv/TOitr1hpxEp3Z7ZnfU7k8lOfyp5hHUzRJmiW0S9QAAAABJRU5ErkJggg==) #dcdcdc no-repeat;
  background-position: 50%;
  cursor: pointer
}

.search__button:hover {
  background-color: #9f9f9f
}

.search__field::-webkit-input-placeholder {
  color: #dcdcdc
}

.search__field::-moz-placeholder {
  color: #dcdcdc
}

.search__field:-ms-input-placeholder {
  color: #dcdcdc
}

.search__field:-moz-placeholder {
  color: #dcdcdc
}

.header {
  display: flex;
  justify-content: space-between;
  padding: 3rem 0 3.8rem
}

.header__search,
.header__social {
  width: 28rem;
  display: block
}

.header__link,
.header__logo {
  display: block
}

.header__brand {
  margin: 0 auto
}

.header__social {
  display: flex;
  font-size: 1.3rem;
  color: #dcdcdc;
  align-items: center;
  justify-content: flex-end
}

.header__socialLink {
  margin-left: 1rem;
  position: relative
}

.header__burger {
  display: none
}

.header__socialPicHover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: .5s
}

.header__socialLink:hover .header__socialPicHover {
  opacity: 1
}

@media screen and (max-width:769px) {
  .header__search,
  .header__social {
      display: none
  }
  .header__brand {
      margin: 0 0 0 auto
  }
  .header__logo {
      width: 14rem
  }
  .header {
      border-bottom: 1px solid #dcdcdc;
      margin-bottom: 2rem;
      padding: 1.6rem 0
  }
  .header__burger {
      display: block;
      border: none;
      padding: 0;
      margin: 8px 0 0;
      background: none
  }
  .header__burger,
  .header__burger:after,
  .header__burger:before {
      content: "";
      width: 24px;
      height: 3px;
      background-color: #46aee9;
      display: block;
      position: relative;
      border-radius: 2px
  }
  .header__burger:before {
      position: absolute;
      bottom: 100%;
      border-bottom: 4px solid #fff;
      box-sizing: initial
  }
  .header__burger:after {
      position: absolute;
      top: 100%;
      border-top: 4px solid #fff;
      box-sizing: initial
  }
}

.top-list {
  display: flex;
  flex-wrap: wrap
}

.top {
  list-style: none;
  display: flex;
  padding-right: 2rem;
  width: 25%;
  margin-bottom: 2.8rem
}

.top__content {
  border-top: 1px solid #e6e6e6;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  flex: 1 1
}

@media screen and (max-width:769px) {
  .top {
      width: 50%
  }
  .top__content {
      border-top: none
  }
}

@media screen and (max-width:426px) {
  .top {
      width: 100%
  }
  .top__content {
      border-top: none
  }
}

.top:last-child {
  margin-right: 0
}

.top__link {
  color: #696969;
  text-decoration: none
}

.top__link:hover {
  color: #1e9bde
}

.top__picture {
  width: 10rem;
  display: block;
  position: relative
}

.top__picture:after {
  position: absolute;
  width: 2rem;
  height: 2rem;
  line-height: 20px;
  color: #fff;
  background-color: #1e9bde;
  content: attr(data-count);
  bottom: -.4rem;
  right: .6rem;
  font-size: 1.3rem;
  text-align: center;
  text-decoration: none
}

.top__img {
  width: 100%
}

.top__title {
  font-size: 1.3rem
}

.fadeshow {
  position: relative;
  padding-bottom: 55.9%
}

.fadeshow__slide {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
  max-height: 350px;
}

.fadeshow__slide.is-active {
  opacity: 1;
  transition: opacity .5s;
  pointer-events: auto
}

.fadeshow__title {
  font-family: Kanit, "sans serif";
  text-transform: uppercase;
  color: #fff;
  font-size: 4rem
}

.fadeshow__group {
  color: #1e9bde;
  font-size: 1.4rem;
  margin-bottom: 1.8rem
}

.fadeshow__content {
  position: absolute;
  left: 3rem;
  bottom: 10rem;
  z-index: 2
}

.fadeshow__img {
  display: block;
  width: 100%;
  height: 100%
}

.fadeshow__nav {
  position: absolute;
  /*bottom: 2rem;*/
  bottom: 4rem;
  left: 3rem
}

.fadeshow__nav>a {
  width: 1.2rem;
  height: 1.2rem;
  display: inline-block;
  text-decoration: none;
  border: 1px solid #fff;
  margin-right: .4rem;
  text-indent: -9999px
}

.fadeshow__nav>a.is-active,
.fadeshow__nav>a:hover {
  background: #fff;
  opacity: .7
}

@media screen and (max-width:769px) {
  .fadeshow__content {
      bottom: 5rem
  }
  .fadeshow__title {
      font-size: 2rem
  }
}

.plus {
  background-color: #1e9bde;
  color: #fff;
  /*
  width: 3rem;
  height: 3rem;
  */
  display: block;
  text-decoration: none;
  text-align: center;
  line-height: 3rem;
  /*font-size: 2.4rem;*/
  
      font-size: 1.8rem;
    padding: 0px 15px 0px 15px;
}

.plus:hover {
  opacity: .8
}

.timeline {
  background: #f0f0f0;
  position: relative;
  height: 100%
}

.timeline__overflow {
  height: 100%;
  overflow-y: scroll;
  max-height: 38rem
}

.timeline__list>li {
  font-size: 1.4rem
}

.timeline__link {
  text-decoration: none;
  color: inherit;
  display: flex;
  color: #353535
}

.timeline__link:hover {
  color: #1e9bde
}

.timeline__time {
  background: #e7e7e7;
  color: #a3a3a3;
  padding: 1rem
}
.timeline__title:hover {
  background: #dad7d7;
  color:#1e9bde;
}

.timeline__title {
  padding: 1rem
}

.timeline__plus {
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

@media screen and (max-width:1040px) {
  .timeline__plus {
      display: none
  }
}

.intro {
  max-width: 100rem;
  width: 100%;
  display: flex;
  max-height: 38rem;
  margin-bottom: 5rem;
  flex-wrap: nowrap;
  flex-direction: row;
  max-height: 350px;
}

.intro__fadeshow {
  flex: 1 1
}

.intro__timeline {
  width: 32rem
}

@media screen and (max-width:1040px) {
  .intro {
      flex-wrap: wrap;
      max-height: none;
      flex-direction: column;
      margin-bottom: 3rem
  }
  .intro__fadeshow,
  .intro__timeline {
      width: 100%
  }
}

.card {
  width: 100%;
  position: relative;
  margin-bottom: 3rem
}

.card__group {
  position: absolute;
  bottom: 100%;
  left: 2rem;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
  color: #fff;
  font-size: 1.2rem;
  padding: .6rem .9rem;
  z-index: 2
}

.card--red .card__group {
  background-color: #d10a07
}

.card--green .card__group {
  background-color: #62ba14
}

.card--blue .card__group {
  background-color: #1e9bde
}

.card--gold .card__group {
  background-color: #a07b0c
}

.card--red .card__title:hover {
  color: #d10a07
}

.card--green .card__title:hover {
  color: #62ba14
}

.card--blue .card__title:hover {
  color: #1e9bde
}

.card--gold .card__title:hover {
  color: #a07b0c
}

.card--red:after {
  background-color: #d10a07
}

.card--green:after,
.card--red:after {
  position: absolute;
  content: "";
  height: 2px;
  top: 0;
  left: 0;
  width: 100%
}

.card--green:after {
  background-color: #62ba14
}

.card--blue:after {
  background-color: #1e9bde
}

.card--blue:after,
.card--gold:after {
  position: absolute;
  content: "";
  height: 2px;
  top: 0;
  left: 0;
  width: 100%
}

.card--gold:after {
  background-color: #a07b0c
}

.card__img {
  width: 100%
}

.card__title {
  font-size: 2rem;
  margin-top: 1.2rem
}

.card__title>a {
  color: inherit;
  text-decoration: none
}

@media screen and (max-width:769px) {
  .card__title {
      font-size: 1.2rem
  }
}

.title {
  text-transform: uppercase;
  font-weight: 700;
  font-family: Kanit, sans-serif;
  font-size: 3.8rem;
  margin-bottom: 4rem;
  padding-left: 2rem;
  line-height: .7
}

.title--blue {
  color: #1e9bde;
  border-left: 2px solid #1e9bde
}
.title--gold {
  color: #a07b0c;
  border-left: 2px solid #a07b0c
}
.title--orange {
  color: #f60;
  border-left: 2px solid #f60
}


.title--red {
  color: #d10a07;
  border-left: 2px solid #d10a07
}

.title--green {
  color: #62ba14;
  border-left: 2px solid #62ba14
}

.title--dark {
  color: #000;
  border-left: 2px solid #000
}

.title__main {
  margin-right: 1rem
}

.title__secondary {
  opacity: .8
}

.title--break .title__secondary {
  display: block;
  margin-top: .6rem
}

@media screen and (max-width:769px) {
  .title {
      font-size: 3rem;
      margin-bottom: 3rem
  }
}

.footer {
  color: #b4b4b4;
  background: #282828
}

.footer__body {
  display: flex;
  justify-content: space-between;
  max-width: 104rem;
  margin: 0 auto;
  padding: 3.4rem 0
}

.footer__nav {
  padding: 0 2rem
}

.footer__end {
  background: #000
}

.footer__endlist {
  max-width: 104rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  padding: 2.5rem 0
}

.footer__endlist>li {
  padding: 0 1rem;
  font-size: 1.3rem
}

.footer__link {
  color: inherit;
  text-decoration: none;
  font-size: 1.3rem;
  display: block;
  margin-bottom: 1rem
}

.footer__endlink:hover,
.footer__link:hover {
  color: #fff
}

.footer__link--title {
  color: #c9c9c9;
  text-transform: uppercase;
  font-family: Kanit, "sans-serif";
  font-size: 1.6rem;
  margin-bottom: 2rem
}

.footer__endlink {
  color: inherit;
  text-decoration: none;
  font-size: inherit
}

@media screen and (max-width:769px) {
  .footer__endlist {
      flex-direction: column;
      text-align: center
  }
  .footer__endlist>li {
      padding: .5rem
  }
  .footer__link {
      display: none
  }
  .footer__link--title {
      display: block;
      margin: 1rem 0
  }
  .footer__body {
      flex-direction: column;
      text-align: center;
      margin-bottom: 0
  }
}

.social {
  background: #f0f0f0;
  padding: 2rem 2.4rem;
  margin-bottom: 3rem
}

.social__title {
  font-family: Kanit, sans-serif;
  text-transform: uppercase;
  text-align: center;
  color: #333;
  font-size: 2rem;
  font-weight: 700;
  padding-bottom: 2rem
}

.social__icons {
  border-top: 1px solid #dcdcdc;
  padding-top: 2rem;
  display: flex;
  justify-content: space-between
}

.social__icons>li {
  width: 4rem
}

.social__icon {
  color: #333;
  font-size: 1.4rem;
  text-align: center;
  text-decoration: none
}

.social__count {
  display: block;
  margin-top: 1rem
}

.agenda {
  background-color: #f0f0f0;
  padding: 2rem;
  position: relative
}

.agenda__head {
  margin-bottom: 4rem
}

.agenda__headline {
  color: #1e9bde;
  font-size: 2.4rem
}

.agenda__list>li {
  border-bottom: 1px solid #dadada;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: #505050
}

.agenda__list>li>a {
  text-decoration: none;
  color: inherit
}

.agenda__list>li>a:hover {
  opacity: .8
}

.agenda__title {
  font-family: Kanit, sans-serif;
  font-weight: 700;
  display: block;
  text-transform: uppercase;
  font-size: 2.2rem;
  margin-bottom: .4rem
}

.agenda__plus {
  position: absolute;
  top: 2rem;
  right: 2rem
}

.post {
  display: flex;
  margin-bottom: 2.4rem
}

.post--column {
  flex-direction: column
}

.post__img {
  width: 100%
}

.post--line-top .post__media,
.post--line .post__media {
  width: 50%;
  padding-right: 1.4rem
}

.post__headline {
  color: #a0a0a0;
  font-size: 1.1rem;
  display: block;
  margin-bottom: 1rem
}

.post--column .post__headline {
  margin-top: 1rem
}

.post__content {
  flex: 1 1
}

.post--line .post__content {
  justify-content: center;
  display: flex;
  flex-direction: column
}

.post--column .post__headline,
.post--line .post__headline {
  font-size: 1.2rem
}

.post--column .post__title>a,
.post--line .post__title>a {
  font-size: 2.2rem
}

.post__title>a {
  font-size: 1.7rem;
  color: inherit;
  text-decoration: none
}

.post__title>a:hover {
  opacity: .8
}

@media screen and (max-width:769px) {
  .post--column .post__title>a,
  .post--line .post__title>a,
  .post__title>a {
      font-size: 1.5rem
  }
  .post--column .post__headline,
  .post--line .post__headline,
  .post__headline {
      font-size: 1rem
  }
  /*
  .mediabox__slide:nth-child(2) {
	  display:none;
	}
	.mediabox__media:nth-of-type(3) {
		display:none;
	}
	*/
}

.mediabox__header {
  background-color: #282828;
  height: 6rem;
  padding: 0 1.2rem;
  position: relative
}

.mediabox__nav {
  display: flex;
  height: 100%
}

.mediabox__nav>li {
  display: flex;
  align-items: center
}

.mediabox__go {
  color: #b4b4b4;
  font-weight: 800;
  text-decoration: none;
  padding: 0 1.2rem;
  white-space: nowrap
}

.mediabox__go:hover {
  color: #1e9bde
}

.mediabox__go.is-active {
  color: #1e9bde;
  cursor: default;
  position: relative
}

.mediabox__go.is-active:after {
  content: "";
  position: absolute;
  bottom: -.7rem;
  left: 1.2rem;
  right: 1.2rem;
  height: 2px;
  background: #1e9bde
}

.mediabox__content {
  background-color: #000;
  flex-wrap: wrap;
  display: none
}

.mediabox__slide {
  padding: 4rem 1rem 2rem
}

.mediabox__media {
  width: 33.333%;
  padding: 0 1rem 2rem
}

.mediabox__picture>img {
  display: block;
  width: 100%;
  height: auto
}

.mediabox__title {
  color: #dcdcdc;
  margin-top: 1rem;
  display: block;
  text-decoration: none
}

.mediabox__content.is-active {
  display: flex
}

.mediabox__slide {
  width: 100%;
  display: flex;
  flex-wrap: wrap
}

.mediabox__wrap {
  overflow: hidden
}

.mediabox__buttons {
  position: absolute;
  right: 2rem;
  top: 0;
  bottom: 0;
  display: flex
}

.mediabox__buttons>button {
  background: none;
  color: #fff;
  opacity: .8;
  border: none;
  padding: 0;
  cursor: pointer;
  margin: 0 .6rem
}

.mediabox__buttons svg {
  fill: #fff;
  width: 1.2rem
}

.mediabox__buttons>button:hover {
  opacity: 1
}

.mediabox__buttons>button:disabled {
  opacity: .2;
  cursor: default
}

@media screen and (max-width:769px) {
  .mediabox__media {
      width: 50%
  }
  .mediabox__title {
      font-size: 1.2rem
  }
  .mediabox__slide {
      padding: 2rem 1rem 0
  }
  .mediabox__nav {
      margin-right: 7rem;
      overflow-x: scroll
  }
}

.items-list {
  border-left: 1px solid #dcdcdc;
  padding-left: 2rem;
  margin-bottom: 4.8rem
}

.items-list__title {
  color: #46aee9;
  text-transform: uppercase;
  margin-bottom: 2.8rem;
  font-family: Kanit, sans-serif;
  font-size: 2.4rem;
  font-weight: 700
}

@media screen and (max-width:769px) {
  .items-list {
      border-left: 0;
      padding-left: 0
  }
}

.album {
  display: flex;
  margin-bottom: 2rem
}

.album__media {
  margin-right: 1.2rem;
  display: block
}

.album__media>a {
  display: block
}

.album__cover {
  width: 11rem;
  height: 11rem;
  display: block
}

.album__time {
  text-transform: uppercase;
  font-size: 1.3rem;
  background: #1e9bde;
  color: #fff;
  padding: .6rem .7rem;
  display: inline-block;
  margin-bottom: 1rem
}

.album__artist {
  font-weight: 300;
  margin-bottom: .2rem
}

.album__artist,
.album__title {
  font-size: 1.4rem;
  text-transform: uppercase;
  font-family: Kanit, sans-serif
}

.album__title {
  font-weight: 700
}

.album__artist>a,
.album__title>a {
  text-decoration: none;
  color: inherit
}

.album__artist>a:hover,
.album__title>a:hover {
  opacity: .8
}

.album__more {
  margin-top: 1rem;
  font-size: 1.2rem;
  font-family: arial, sans-serif;
  line-height: 1.2
}

.album__label {
  color: #1e9bde
}

.nav__main {
  display: flex;
  background: #000
}

.nav__main>li {
  position: relative
}

.nav__main>li>a {
  color: #fff;
  font-size: 1.5rem;
  text-decoration: none;
  opacity: .7;
  padding: 1.3rem 1.4rem;
  display: block;
  text-transform:uppercase;
  font-weight:bold;
}

.nav__main>li>a:hover {
  opacity: 1
}

.nav__main>li.is-active>.nav__link--blue,
.nav__main>li.is-active>.nav__link--blue+.nav__sublinks,
.nav__main>li:hover>.nav__link--blue,
.nav__main>li:hover>.nav__link--blue+.nav__sublinks {
  background: #1e9bde
}

.nav__main>li.is-active>.nav__link--green,
.nav__main>li.is-active>.nav__link--green+.nav__sublinks,
.nav__main>li:hover>.nav__link--green,
.nav__main>li:hover>.nav__link--green+.nav__sublinks {
  background-color: #62ba14
}

.nav__main>li.is-active>.nav__link--red,
.nav__main>li.is-active>.nav__link--red+.nav__sublinks,
.nav__main>li:hover>.nav__link--red,
.nav__main>li:hover>.nav__link--red+.nav__sublinks {
  background-color: #d10a07
}

.nav__main>li.is-active>.nav__link--orange,
.nav__main>li.is-active>.nav__link--orange+.nav__sublinks,
.nav__main>li:hover>.nav__link--orange,
.nav__main>li:hover>.nav__link--orange+.nav__sublinks {
  background-color: #f60
}

.nav__main>li.is-active>.nav__link--yellow,
.nav__main>li.is-active>.nav__link--yellow+.nav__sublinks,
.nav__main>li:hover>.nav__link--yellow,
.nav__main>li:hover>.nav__link--yellow+.nav__sublinks {
  background-color: #a07b0c
}

.nav__link>span {
  margin-left: .24rem;
  font-size: 1.3rem;
  opacity: .6;
  position: relative;
  top: -1px
}


.nav__sublinks {
  display: none;
  position: absolute;
  top: 100%;
  background-color: #000;
  color: #fff;
  z-index: 999
}

.nav__main>li.is-active>.nav__sublinks,
.nav__main>li:hover>.nav__sublinks {
  display: block
}

.nav__sublink {
  color: #fff;
  text-decoration: none;
  opacity: .7;
  padding: 1.3rem 1.4rem;
  display: block;
  white-space: nowrap
}

.nav__sublink:hover {
  opacity: 1
}

@media screen and (max-width:769px) {
  .nav__main {
      flex-direction: column
  }
  .nav__sublinks {
      position: relative
  }
  .nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, .4);
      opacity: 0;
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
      transition: opacity .5s;
      z-index: 4;
      pointer-events: none
  }
  .nav.is-active {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0);
      pointer-events: auto
  }
  .nav__main {
      width: 70vw;
      height: 100vh;
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
      overflow-y: scroll
  }
  .nav.is-active .nav__main,
  .nav__main {
      transition: -webkit-transform .5s;
      transition: transform .5s;
      transition: transform .5s, -webkit-transform .5s
  }
  .nav.is-active .nav__main {
      -webkit-transform: translateX(0);
      transform: translateX(0)
  }
  .nav__link>span {
      margin-left: 1rem;
      font-size: 1.8rem
  }
  span.nav__link_mob {
      margin-left: 1rem;
      font-size: 1.8rem
  }
}

.article {
  margin-bottom: 8rem
}

.article--bordered {
  border-left: 2px solid #dcdcdc;
  padding-left: 1.6rem
}

.article__title {
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: 1.6rem
}

.article__title>span {
  /*color: #46aee9*/
  color:inherit;
}

.article__pic {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 2.5rem
}

.article__text {
  font-size: 1.6rem;
  line-height: 2.6rem;
  color: #323232
}

.related__list .article__text {
	line-height: 1.8rem;
}

.article__text>a {
  color: #46aee9;
  text-decoration: underline
}

.article__text>a:hover {
  text-decoration: none
}

.article__more {
  margin-top: 4.8rem;
  display: flex
}

.article__moreTitle {
  color: #b4b4b4;
  font-size: 1.3rem;
  position: relative
}

.article__moreLabel {
  color: #8c8c8c;
  text-decoration: none;
  font-size: 1.5rem;
  position: relative;
  display: block;
  margin-top: 1rem
}

.article__moreTitle:after {
  content: "";
  background-color: #f0f0f0;
  height: 1px;
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0
}

.article__moreLabel:hover {
  text-decoration: underline
}

.article__moreBlock {
  margin-left: 1rem;
  flex: 1 1
}

.article__intro {
  display: flex;
  justify-content: space-between;
  color: #b4b4b4;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #dcdcdc;
  font-size: 1.3rem
}

.article__date {
  margin-bottom: .4rem
}

.article__who>strong {
  font-weight: 700;
  color: #8c8c8c
}

.article__share {
  display: flex;
  align-items: center
}

.article__soc {
  margin-left: 1rem;
  position: relative
}

.article__socHover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: .5s
}

.article__soc:hover .article__socHover {
  opacity: 1
}

@media screen and (max-width:769px) {
  .article {
      margin-bottom: 4rem
  }
  .article__text {
      font-size: 1.4rem
  }
  .article__moreLabel {
      font-size: 1.3rem
  }
  .article__title {
      font-size: 2rem
  }
  .article__intro {
      flex-direction: column
  }
}

.starter {
  margin-bottom: 3rem
}

.starter__title {
  font-family: Kanit, sans-serif;
  text-transform: uppercase;
  font-size: 4.2rem;
  margin: 3rem 8rem 2rem;
  font-weight: 700
}

.starter__subtitle {
  margin: 1rem 8rem 3rem;
  font-size: 2rem
}

.starter__pic {
  display: block;
  width: 100%;
  height: auto
}

@media screen and (max-width:769px) {
  .starter__title {
      font-size: 2rem;
      margin: 2rem 0
  }
  .starter__subtitle {
      font-size: 1.4rem;
      margin: 2rem 0
  }
}

.comment {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
  color: #b4b4b4;
  font-size: 1.3rem;
  padding: .8rem 0;
  align-items: center;
  margin-bottom: 2rem
}

.comment__logo {
  display: inline-block;
  margin: 0 0 0 .8rem;
  position: relative
}

.comment__social {
  display: flex;
  align-items: center
}

.comment__social>span {
  display: inline-block;
  margin-right: .4rem
}

.comment__logoHover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: .5s
}

.comment__logo:hover .comment__logoHover {
  opacity: 1
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: initial
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block
}

body {
  line-height: 1
}

ol,
ul {
  list-style: none
}

blockquote,
q {
  quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
  content: "";
  content: none
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

*,
:after,
:before {
  box-sizing: border-box
}

html {
  font-size: 62.5%
}

body {
  font-family: Open Sans, sans-serif;
  font-size: 1.4rem;
  color: #323232
}

.page {
  max-width: 104rem;
  margin: 0 auto;
  padding: 0 2rem
}

.page__cards {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1rem
}

.page__card {
  width: 33.3333%;
  padding: 0 1rem
}

.page__mediabox {
  margin: 0 -2rem 5rem
}

.page__split {
  display: flex;
  margin: 0 -1rem 8rem
}

.page__main {
  margin: 0 1rem;
  flex: 1 1
}

.page__secondary {
  margin: 0 1rem;
  width: 30rem
}

.page__gridlist {
  display: flex;
  margin: 0 -1rem
}

.page__gridcol {
  flex: 1 1;
  margin: 0 1rem
}

.page__posts {
  border-bottom: 1px solid #dcdcdc;
  padding-bottom: 4rem;
  margin-bottom: 3rem
}

@media screen and (max-width:769px) {
  .page__card {
      width: 50%
  }
  .page__split {
      flex-direction: column
  }
  .page__mediabox {
      margin: 0 -2rem 3rem
  }
  .page__secondary {
      width: auto;
      margin: 0 1rem;
      flex: 1 1
  }
  .page__split {
      margin: 0 -1rem 4rem
  }
  .page__gridlist {
      flex-direction: column
  }
  .page__posts {
      padding-bottom: 1rem
  }
}
.breadcrumb--bordered {
	border-bottom: 1px solid #e9e9e9;
	margin-bottom: 20px;
	padding-bottom: 15px;
}.breadcrumb {
	font-size: 12px;
	font-size: 1.2rem;
	margin-top:30px;
}
/* line 6, ../sass/modules/_breadcrumb.sass */

.breadcrumb > li {
	display: block;
	margin-right: 5px;
	margin-bottom: 5px;
}

@media screen and (min-width: 728px) {
/* line 6, ../sass/modules/_breadcrumb.sass */

.breadcrumb > li {
	display: inline-block;
}
}

@media screen and (min-width: 728px) {
/* line 16, ../sass/modules/_breadcrumb.sass */

.breadcrumb > li + li:before {
	content: ">";
	display: inline-block;
	margin: 0 4px 0 0;
}
}
/* line 21, ../sass/modules/_breadcrumb.sass */

.breadcrumb__link {
	display: inline-block;
	background-color: #f2f2f2;
	color: #878787;
	padding: 7px 10px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
/* line 27, ../sass/modules/_breadcrumb.sass */

.breadcrumb__link:hover {
	background-color: #ededed;
}


.fadeshow__content {
    position: absolute;
    left: 3rem;
    bottom: 5rem;
    margin-right: 3rem;
    z-index: 2;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.8);
}
.timeline__time {
    min-width: 60px;
}
.timeline__list>li:nth-child(even) {
	background-color:#dedcdc;	
}
.timeline__list>li:nth-child(odd) {
	background-color:#f0f0f0;	
}


.timeline_odd {
	background-color:#dedcdc;	
}
.timeline_even {
	background-color:#f0f0f0;	
}

.mediabox__header {
    background-color: #1e9bde;
				}
				.mediabox__go {
    color: #fbfafa;
				}
				.mediabox__go:active,
				.mediabox__go:hover {
    /*color: #000;*/
				}
				.mediabox__slide {
    padding: 1rem 1rem 2rem;
}
.mediabox__content {
    background-color: #1e9bde;
}

.img--blue { border-top:2px solid #1e9bde; }
.img--red { border-top:2px solid #d10a07; }
.img--green { border-top:2px solid #62ba14; }
.img--gold { border-top:2px solid #a07b0c; }
.img--orange { border-top:2px solid #f60; }

.fd--blue { background-color:#1e9bde; }
.fd--red { background-color:#d10a07; }
.fd--green { background-color:#62ba14; }
.fd--gold { background-color:#a07b0c; }
.fd--orange { background-color:#f60; }


.first--blue::first-letter { color:#1e9bde; }
.first--red::first-letter { color:#d10a07; }
.first--green::first-letter { color:#62ba14; }
.first--gold::first-letter { color:#a07b0c; }
.first--orange::first-letter { color:#f60; }


.nav__sublinks { min-width:160px; }
.opacity1 { opacity:1 !important; }


@media screen and (max-width: 700px) {
	#btn_yt_abo_mob {
		display:flex !important;
	}
	#btn_yt_abo_desk {
		display:none !important;
	}
	ul.nav__sublinks {
		position: initial;
	}
	.article__date,
	.article__who {
		display:inline-block;
	}
		
}
@media screen and (min-width: 700px) {
	#btn_yt_abo_mob {
		display:none !important;
	}
	#btn_yt_abo_desk {
		display:flex !important;
	}
}
@media screen and (max-width:769px) {
.nomob {
	display: none;
}
}
@media screen and (min-width:769px) {
.nodesk {
	display: none;
}
}