.useful-information {
/*  height: 40vw;*/
  position: relative;
  z-index: 1
}

.useful-information .background-title {
  line-height: 400px;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  transition: opacity 800ms ease-in-out;
  margin-left: 0;
  background-color: #ff8828;
  font-size: 16vw;
}

.useful-information .background-title .background-title-inner {
  display: block;
  margin: auto;
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 0;
  z-index: -1;
  transform: translateY(-50%);
  white-space: nowrap
}

.useful-information .background-title .background-title-inner .clone {
  white-space: nowrap;
  padding-right: 100px
}

.useful-information .background-title .background-title-inner .letter {
  display: inline-block
}

.useful-information .background-title .background-title-inner .letter.space {
  width: .3em
}

.header .space {
  margin-right: 5%;
}

.useful-information .background {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
  transition: background-color 300ms ease-in-out
}

.useful-information .open-button {
  color: transparent;
  display: block;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10
}

.useful-information .close-button {
  display: block;
  overflow: hidden;
  position: absolute;
  top: 40px;
  right: 40px;
  z-index: 20;
  height: 80px;
  width: 80px;
  transition: none 300ms ease-in-out;
  transition-property: visibility, opacity
}

.useful-information .close-button .line {
  background-color: black;
  position: absolute;
  z-index: 1;
  transition: none 300ms ease-in-out;
  transition-property: transform, background-color;
  width: 24px;
  height: 3px
}

.useful-information .close-button .line.line1 {
  top: 29px;
  left: 28px;
  transform-origin: left bottom;
  transform: rotate(45deg)
}

.useful-information .close-button .line.line2 {
  top: 47px;
  left: 28px;
  transform-origin: left top;
  transform: rotate(-45deg)
}

.useful-information .close-button:hover .line {
  background-color: white
}

.useful-information .useful-information-inner {
  align-items: flex-start;
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
  z-index: 1;
  background-color: rgba(255, 136, 40, 0.5);
}

.useful-information .useful-information-inner .useful-information-content {
  display: flex;
  height: 40vw;
  margin-right: auto;
  margin-left: auto;
  padding: 120px;
  transition: opacity 300ms ease-in-out
}

.useful-information .content a:not(.zoom):not(.link-important):not(.button):not(.link-button):not(.link-image):not(.post-link):not(.post-image-link):not(.link-category) {
  background-image: linear-gradient(to top, #000000 0, #000000 0), linear-gradient(to top, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .2) 0);
  color: black;
  font-weight: 400
}

.useful-information .extra-form {
  flex: 1 1 auto;
  max-width: 760px
}

@media only screen and (max-width:1280px) {
  .useful-information .useful-information-inner .useful-information-content {
    flex: 1;
    padding: 60px
  }
  .useful-information .form-line {
    display: block
  }
  .useful-information .extra-form {
    flex: 1 1 auto;
    margin-right: 20px;
    max-width: 600px
  }
}

@media only screen and (max-width:690px) {
  .useful-information .useful-information-inner .useful-information-content {
    display: block
  }
  .useful-information .background-title {
    font-size: 150px
  }
}

@media only screen and (max-width:500px) {
  .useful-information .useful-information-inner .useful-information-content {
    padding: 60px 20px
  }
  .useful-information .close-button {
    top: 0;
    right: 0
  }
}

#useful-information-overlay {
  background: rgba(0, 0, 0, .2);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  transition: opacity 300ms ease-in-out
}

#useful-information-switcher:checked ~ #useful-information-overlay {
  opacity: 1;
  pointer-events: auto;
  z-index: 199
}

#useful-information-switcher {
  display: none
}

#useful-information-switcher:checked + .useful-information {
  z-index: 200
}

#useful-information-switcher:checked + .useful-information .open-button {
  visibility: hidden
}

#useful-information-switcher:checked + .useful-information .useful-information-inner .close-button {
  opacity: 1;
  visibility: visible
}

#useful-information-switcher:checked + .useful-information .useful-information-inner .useful-information-content {
  opacity: 1;
  transition-delay: 600ms
}

#useful-information-switcher:checked + .useful-information .background {
  background-color: #a3d5bd;
  transition-delay: 300ms
}

#useful-information-switcher:checked + .useful-information .background-title {
  opacity: .3
}

#useful-information-switcher:not(:checked) + .useful-information .open-button {
  visibility: visible
}

#useful-information-switcher:not(:checked) + .useful-information .useful-information-inner .close-button {
  opacity: 0;
  visibility: hidden
}

#useful-information-switcher:not(:checked) + .useful-information .useful-information-inner .useful-information-content {
  opacity: 0
}

#useful-information-switcher:not(:checked) + .useful-information .background {
  background-color: #b4e4c9
}

#useful-information-switcher:not(:checked) + .useful-information .open-button:hover ~ .background {
  background-color: #a3d5bd
}