/* ---------------------------------
 Header
--------------------------------- */
body.welcome #header .header-logo,
body.welcome #header .btn-signup {
  opacity: 0;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

body.welcome #header.scrolled {
  background-color: #131313;
  z-index: 999;
}

body.welcome #header.scrolled .header-logo,
body.welcome #header.scrolled .btn-signup {
  opacity: 1;
}

/* ---------------------------------
 Background Image
--------------------------------- */
body.welcome {
  background-size: 100%;
  background-image: url(/image/private/index/guest/welcome-hello.jpg);
  background-position: right top;
  background-position-x: right;
  background-position-y: top;
  background-color: #131313;
  background-repeat: no-repeat;
}

body.welcome .container {
  padding: 0 5vw;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

@media (max-width: 1199.98px) {
  body.welcome {
    background-size: 130%;
  }
}

@media (max-width: 991.98px) {
  body.welcome {
    background-size: 180%;
  }
}

@media (max-width: 767.98px) {
  body.welcome {
    background-size: 200%;
  }
  body.welcome #header .container {
    padding: 0 2vw;
  }
}

/* ---------------------------------
 Hero
--------------------------------- */
#hero {
  border-bottom: solid 2px rgba(255, 255, 255, 0.1);
}

#hero h2 {
  font-size: 2rem;
}

#hero .logo {
  width: calc(500px * 0.6);
  height: calc(100px * 0.6);
}

@media (min-width: 992px) {
  #hero {
    height: 80vh;
  }
}

@media (max-width: 1199.98px) {
  #hero {
    height: 70vh;
  }
}

@media (max-width: 991.98px) {
  #hero h2 {
    margin: auto;
  }
  body.ja #hero h2 {
    font-size: 1.875rem;
  }
}

@media (max-width: 767.98px) {
  #hero {
    height: 70vh;
  }
  #hero h2 {
    font-size: 1.5rem;
  }
  #hero .logo {
    width: calc(500px * 0.4);
    height: calc(100px * 0.4);
  }
  body.ja #hero h2 {
    font-size: 1.25rem;
  }
}

/* ---------------------------------
 Sign up form
--------------------------------- */
.signup-form {
  max-width: 500px;
}

.signup-form input[type="email"] {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.signup-form input[type="submit"] {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  text-transform: uppercase;
}

#footer-signup .signup-form {
  max-width: 500px;
  margin: auto;
}

/* ---------------------------------
 Features
--------------------------------- */
.features {
  background-color: #131313;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .features {
    padding: 3rem 0;
  }
}

.features__text {
  padding: 0px 5vw;
}

.features__text p {
  line-height: 1.4;
}

.features__image img {
  width: 100%;
}

@media (min-width: 576px) {
  .features__text {
    width: 50%;
  }
  .features__text h2 {
    font-size: 2.25rem;
  }
  .features__text p {
    font-size: 1.25rem;
  }
  .features__image {
    width: 50%;
    text-align: left;
  }
}

@media (max-width: 767.98px) {
  .features__text h2 {
    font-size: 1.5rem;
  }
  .features__text p {
    font-size: 1.125rem;
  }
}

.trailer-button .btn {
  margin: 0 0.25rem 0.5rem 0;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  background-color: #f0f0f0;
}

.trailer-button .btn svg {
  width: calc(500px * 0.25);
  height: calc(150px * 0.25);
}

@media (max-width: 1199.98px) {
  .trailer-button .btn svg {
    width: calc(500px * 0.2);
    height: calc(150px * 0.2);
  }
}

/* ---------------------------------
 FAQ
--------------------------------- */
.accordion__item {
  margin: 0 0 8px 0;
}

.accordion__button {
  background: #303030;
  color: #fff;
  width: 100%;
  border: 0;
  text-align: left;
  padding: 0.8em 2.2em 0.8em 1.2em;
  margin-bottom: 1px;
  cursor: pointer;
}

.accordion__button .accordion__icon {
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
  margin-left: auto;
}

.accordion__button.collapsed .accordion__icon {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.accordion__body {
  background: #303030;
  color: #fff;
  line-height: 1.4;
}

@media (min-width: 576px) {
  #faq__title {
    font-size: 2.5rem;
  }
  #faq__accordion {
    width: 75%;
    margin: 2em auto;
    max-width: 815px;
  }
  .accordion__button .accordion__icon {
    font-size: 32px;
    margin-right: -32px;
  }
  .accordion__body {
    font-size: 1.5rem;
  }
  .accordion__body div {
    padding: 1.2em;
  }
  body.ja .accordion__body {
    font-size: 1.25rem;
  }

  #twitter__timeline {
    width: 75%;
    margin: 2em auto;
    max-width: 815px;
  }
}

@media (max-width: 767.98px) {
  #faq__title {
    font-size: 1.625rem;
  }
  .accordion__button {
    font-size: 1.125rem;
  }
  .accordion__button .accordion__icon {
    font-size: 26px;
    margin-right: -26px;
  }
  .accordion__body {
    padding: 1em;
    font-size: 1.125rem;
  }
  body.ja .accordion__body {
    font-size: 0.937rem;
  }
}

/* ---------------------------------
 Margin
--------------------------------- */
#faq,
#footer-signup {
  margin: 7.5rem 0;
}