/*
0-600px Phone
600-900px Tablet portrait
900-1200px Tablet landscape
1200-1800 is our normal styles apply
1800px + Big desktop

$breakpoint argument choices:
- phone
- tab-port
- tab-land
- big-desktop
1em=16px

ORDER:base+typography > general layout + grid>page layout >components
*/
.section--event {
  margin-top: 4%; }
  @media (max-width: 767px) {
    .section--event .event-base {
      padding: 0 15px;
      padding-bottom: 8%; } }
  @media (min-width: 768px) {
    .section--event .event-base {
      position: relative;
      padding: 20px;
      padding-right: 40px;
      min-height: 715px; }
      .section--event .event-base-line {
        position: absolute;
        left: 41%;
        top: 30px;
        width: 1px;
        height: calc(100% - 60px);
        background-color: #1d6682; }
        .section--event .event-base-line:before, .section--event .event-base-line:after {
          content: '';
          position: absolute;
          left: 50%;
          width: 4px;
          height: 4px;
          background-color: #1d6682;
          transform: translateX(-50%) rotate(45deg); }
        .section--event .event-base-line:before {
          top: 0; }
        .section--event .event-base-line:after {
          bottom: 0; } }
  .section--event .event-nav {
    text-align: center; }
    @media (max-width: 767px) {
      .section--event .event-nav {
        float: none;
        width: 100%; } }
    .section--event .event-nav__list {
      margin-bottom: 0;
      font-size: 0; }
      .section--event .event-nav__list li {
        display: inline-block;
        width: 24%;
        margin: 0 auto;
        vertical-align: top; }
        @media (min-width: 768px) {
          .section--event .event-nav__list li.active a {
            background-color: #cceaff;
            color: #024280;
            filter: grayscale(0%);
            border: 2px solid #cceaff;
            position: relative; } }
        @media (max-width: 767px) {
          .section--event .event-nav__list li {
            margin: 8px 0;
            width: 50%; }
            .section--event .event-nav__list li.active a {
              background-color: #99ddff;
              color: #336699; } }
      .section--event .event-nav__list a {
        display: inline-block;
        margin-bottom: 10px;
        font-size: 16px;
        letter-spacing: 1px;
        text-decoration: none;
        animation-delay: .3s;
        font-size: 20px;
        letter-spacing: 1px;
        border: 1px solid #cceaff;
        width: 100%; }
        .section--event .event-nav__list a.btn--undo {
          background: #1d6682;
          border: 0px; }
          .section--event .event-nav__list a.btn--undo img {
            filter: brightness(0); }
        @media (max-width: 767px) {
          .section--event .event-nav__list a {
            padding: 16px 0;
            width: 90%;
            font-size: 18px;
            border: 2px solid #336699;
            background: #fff;
            padding: 22% 2%;
            letter-spacing: 0; } }
        .section--event .event-nav__list a h6 {
          line-height: 1.8em;
          font-size: 16px;
          font-weight: 400;
          margin: 8px 0 5px; }
          @media (max-width: 1199px) {
            .section--event .event-nav__list a h6 {
              min-height: 88px; } }
          @media (max-width: 767px) {
            .section--event .event-nav__list a h6 {
              min-height: auto; } }
          @media (max-width: 411px) {
            .section--event .event-nav__list a h6 {
              min-height: 56px; } }
        .section--event .event-nav__list a span {
          font-size: 14px;
          display: block;
          min-height: 24px;
          letter-spacing: 1px;
          color: #336699;
          line-height: 1.2em; }
        .section--event .event-nav__list a:hover {
          background-color: #e9f5fe;
          color: #336699; }
        .section--event .event-nav__list a img {
          display: block;
          margin: 6px auto 3px;
          max-width: 60%;
          width: 150px;
          height: 150px; }
          @media (max-width: 767px) {
            .section--event .event-nav__list a img {
              display: none; } }
  .section--event .event-panel {
    padding-left: 50px;
    margin-top: 2%; }
    @media (max-width: 767px) {
      .section--event .event-panel {
        float: none;
        width: 100%;
        padding: 0;
        margin-top: 10px; } }
    .section--event .event-panel h3 {
      color: #1d6682; }
    .section--event .event-panel__content {
      color: #1d6682; }
      @media (max-width: 767px) {
        .section--event .event-panel__content {
          padding: 10px 20px;
          background-color: #fff;
          box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.4); } }
    .section--event .event-panel__heading {
      position: relative;
      border-bottom: 2px solid #cceafe; }
      .section--event .event-panel__heading:before {
        left: 0; }
      .section--event .event-panel__heading:after {
        right: 0; }
    .section--event .event-panel__title {
      margin-top: 10px;
      margin-bottom: 14px;
      color: #024280;
      letter-spacing: 1px; }
    .section--event .event-panel__subtitle {
      margin-top: 0;
      font-size: 18px;
      letter-spacing: 1px; }
    .section--event .event-panel__detail {
      padding: 20px 0;
      padding-left: 4px; }
      .section--event .event-panel__detail strong {
        border: 1px solid #024280;
        padding: 3px 5px;
        margin-right: 5px; }
      .section--event .event-panel__detail .well {
        float: left;
        background-color: #ffffff;
        border-bottom: 3px solid #aaa; }
      .section--event .event-panel__detail .img-center {
        max-width: 100%;
        text-align: center; }
    .section--event .event-panel__info {
      margin-bottom: 20px; }
      .section--event .event-panel__info li + li {
        margin-top: 10px; }
      .section--event .event-panel__info .gift-box {
        text-align: center; }
        .section--event .event-panel__info .gift-box img {
          border: 3px solid #eaeaea;
          margin-bottom: 2%; }
        .section--event .event-panel__info .gift-box .gift-title {
          line-height: 1.3;
          word-break: keep-all;
          margin: 2% 0; }
        .section--event .event-panel__info .gift-box .circle-number {
          background-color: #1d6682;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          color: #fff;
          line-height: 40px;
          padding: 6px 5px;
          display: inline-block; }
    .section--event .event-panel__badge {
      display: inline-block;
      padding: 0 6px;
      margin-right: 5px;
      background-color: #024280;
      color: #fff;
      border-radius: 5px; }
    .section--event .event-panel__form {
      max-width: 600px; }
    .section--event .event-panel__logo {
      max-width: 150px; }
  .section--event .present--more--text {
    color: #1d6682;
    font-size: 16px;
    text-align: center;
    padding: 6px 0; }
  .section--event .deco-event1:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -10%;
    width: 200px;
    height: 200px;
    background: url("../img/event1.png") no-repeat;
    background-size: 100%;
    opacity: .5; }
  .section--event .deco-event2:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -10%;
    width: 200px;
    height: 200px;
    background: url("../img/event2.png") no-repeat;
    background-size: 100%;
    opacity: .5; }
  .section--event .deco-event3:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -5%;
    width: 200px;
    height: 200px;
    background: url("../img/event3.png") no-repeat;
    background-size: 100%;
    opacity: .5; }
  .section--event .deco-event4:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -40%;
    width: 200px;
    height: 200px;
    background: url("../img/event-simple-4.png") no-repeat;
    background-size: 100%;
    opacity: .5; }
  .section--event .deco-event5:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -45%;
    width: 200px;
    height: 200px;
    background: url("../img/event-simple-5.png") no-repeat;
    background-size: 100%;
    opacity: .5; }
  .section--event .deco-event6:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -24%;
    width: 200px;
    height: 200px;
    background: url("../img/event6.png") no-repeat;
    background-size: 100%;
    opacity: .5; }
  .section--event .deco-event7:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0%;
    width: 200px;
    height: 200px;
    background: url("../img/event7.png") no-repeat;
    background-size: 100%;
    opacity: .5; }
  .section--event .deco-event8:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -20%;
    width: 200px;
    height: 200px;
    background: url("../img/event8.png") no-repeat;
    background-size: 100%;
    opacity: .5; }
  .section--event .deco-event9:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -10%;
    width: 200px;
    height: 200px;
    background: url("../img/event9.png") no-repeat;
    background-size: 100%;
    opacity: .5; }
  .section--event .event2-img {
    float: right; }
    @media (max-width: 767px) {
      .section--event .event2-img {
        float: none;
        margin-top: 20px; } }
  .section--event .deco-tshirt {
    max-width: 400px; }
  .section--event .event7-img {
    margin-top: 40px; }
    .section--event .event7-img img {
      max-width: 100%; }
  .section--event .event9-img {
    display: block;
    width: 90%;
    margin: 20px auto 0;
    padding: 20px;
    text-align: center; }
    .section--event .event9-img img {
      max-width: 100%; }

/*# sourceMappingURL=events.css.map */