JS-Tech/resj

@import "../../global/variables";

.container-orators-show {
  .std-top {
    background-image: image-url("orators/fond-orateur.jpg");
  }

  .std-container {
    p.contact {
      color: $color-orange;
      padding: 50px 0 0 0;

      a {
        background-color: $color-orange;
        color: #fff;
        padding: 7px 35px;
        margin: 0 0 0 10px;
        text-decoration: none;
      }
    }

    h2.subjects {
      /* displayed on mobile */
      display: none;
      text-transform: uppercase;
      color: $color-orange;
      padding: 30px 0 5px 0;
    }

    div.redbox {
      background-color: $color-orange;
      color: #fff;
      padding: 18px 28px;
      margin: 60px 0 0 0;

      h3 {
        font-size: 1em;
        padding: 0 0 7px 0;

        &:not(:first-of-type) {
          padding: 20px 0 7px 0;
        }
      }

      p {
        padding: 0 0 5px 0;
      }
    }

    & > div:nth-child(2) {
      flex: 2;
      color: $color-orange;

      img {
        max-width: 100%;
        padding: 50px;
      }

      h2 {
        text-transform: uppercase;
        color: $color-orange;
      }

      p.canton {
        padding: 5px 0;
      }
    }
  }

  div.contact {
    padding: 30px 0 0 0;
  }

  form#form {
    padding: 10px 0;

    #error {
      p.title {
        text-align: left;
      }

      ul {
        padding: 0 0 14px 0;
      }
    }
  }

  @media only screen and (max-width: $mobile-width) {
    .std-container {
      & > div:nth-child(1) {
        p.contact {
          display: flex;
          flex-direction: column;
          margin: 0;

          span {
            text-transform: uppercase;
            font-size: 34px;
          }

          a {
            margin: 20px 0px 10px 0;
            text-align: center;
            padding: 20px;
          }
        }

        h2.subjects {
          display: block;
        }

        div.redbox {
          margin: 10px 0 0 0;
        }
      }

      & > div:nth-child(2) {
        padding: 0 $mobile-padding 50px $mobile-padding;

        p.img {
          text-align: center;
        }

        img {
          width: 400px;
          text-align: center;
          padding: $mobile-padding;
        }
      }
    }
  }
}