// Reusable LESS items
@import '/sites/all/themes/custom/bootstrap_iin/less/reusable.less';

body.sample-class {
  .band.primary-menu-wrapper {
    .background-full('curric_header');
  }

  .band.white {
    .sans-serif;
    .light-text;
    .col-sm-12 {
      @media @desktop-tablet {
        background-color: #fcfbfd;
        border: 2px solid #dddddd;
        margin-top: -100px;
        position: static;
      }
      h2 {
        line-height: @line-height-base;
        font-size: @font-size-h3;
        margin: 30px auto;
        font-weight: 300;
        width: 90%;
        @media @desktop-tablet {
          width: 75%;
        }
      }
    }
  }

  .band.content {
    .col-sm-12 {
      position: relative;
      @media @tablet {
        padding-bottom: 46px;
      }
      @media @desktop {
        padding-bottom: 35px;
      }
      @media @desktop-tablet {
        border: 2px solid #dddddd;
        border-top: 0;
        margin-bottom: 10px;
      }
      .notice {
        @media @desktop-tablet {
          font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
          font-weight: 100;
          letter-spacing: 1px;
          -webkit-font-smoothing: antialiased;
          text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
          text-align: center;
          margin: 35px auto;
        }
      }
      .region-container {
        display: block;
        border-bottom: 5px solid #dddddd;
        position: relative;
        /*width: 38.5%;*/
        @media @tablet {
          width: 48.5%;
        }
        @media @desktop {
          width: 36.5%;
        }
        @media only screen and (min-width: 1170px) and (max-width: 1199px) {
          width: 38%;
        }
        .text {
          position: relative;
          .sans-serif;
          font-weight: bold;
          color: @brand-quaternary;
          font-size: @font-size-h3;
        }
        &.left-content {
          left: 13.2%;
          @media @tablet {
            left: 2.1%;
          }
          @media @desktop-tablet {
            clear: both;
            float: left;
          }
          @media only screen and (min-width: 1170px) and (max-width: 1199px) {
            left: 12.7%;
          }
          .text {
            left: 10px;
          }
        }
        &.right-content {
          float: right;
          @media @tablet {
            width: 47.8%;
            right: 1.5%;
          }
          @media @desktop {
            right: 13.5%;
          }
          @media only screen and (min-width: 1170px) and (max-width: 1199px) {
            right: 11%;
          }
          .text {
            margin-left: 75px;
          }
        }
      }
      .classes-container {
        width: 95%;
        margin: 0 auto 20px;
        display: block;
        @media @tablet {
          width: 50%;
          margin: 0 0 7.5%;
        }
        @media @desktop {
          width: 40%;
          margin: 0 0 5.7%;
        }
        @media @desktop-tablet {
          top: 65px;
        }
        &.left-content {
          position: relative;
          left: 0;
          @media @tablet {
            left: 7.5%;
          }
          @media @desktop {
            left: 14.1%;
          }
          @media only screen and (min-width: 1170px) and (max-width: 1199px) {
            left: 16%;
          }
          @media @desktop-tablet {
            clear: both;
            /*float: left;*/
          }
          .icon-border {
            float: left;
            @media @desktop-tablet {
              float: right;
            }
          }
          .class-container {
            .icon-border {
              &:before {
                display:none;
              }
              &:after {
                display:none;
              }
            }
            @media @tablet {
              left: -10%;
            }
            @media @desktop {
              left: -2.5%;
            }
            @media only screen and (min-width: 1170px) and (max-width: 1199px) {
              left: -8.3%;
            }
            &:after, &:before {
              left: 100%;
            }
            &:after {
              border-left-color: #fcfbfd;
            }
            &:before {
              border-left-color: #dddddd;
            }
          }
        }
        &.right-content {
          right: 0;
          @media @tablet {
            right: 6.7%;
          }
          @media @desktop {
            right: 14.7%;
          }
          @media @desktop-tablet {
            float: right;
            clear: both;
            position: relative;
          }
          .icon-border {
            float: left;
            @media @desktop-tablet {
              float: none;
            }
          }
          .class-container {
            @media @desktop-tablet {
              float: right;
            }
            @media @tablet {
              left: 10%;
            }
            @media @desktop {
              left: 2.5%;
            }
            @media only screen and (min-width: 1170px) and (max-width: 1199px) {
              left: 8%;
            }
            .icon-border {
              &:before {
                display:none;
              }
              &:after {
                display:none;
              }
            }
            &:after, &:before {
              right: 100%;
            }
            &:after {
              border-right-color: #fcfbfd;
            }
            &:before {
              border-right-color: #dddddd;
            }
          }
        }
        .icon-border {
          border-radius: 50%;
          border-width: 5px;
          border: 5px solid #dddddd;
          width: 70px;
          height: 70px;
          position: relative;
          @media @desktop-tablet {
            width: 100px;
            height: 100px;
          }
          &:before {
            content: "";
            position: absolute;
            top: -75px;
            bottom: 100%;
            left: 49%;
            border-right: 5px solid #dddddd;
          }
          &:after {
            content: "";
            position: absolute;
            top: 100%;
            bottom: -85px;
            left: 49%;
            border-right: 5px solid #dddddd;
          }
          @media @tablet {
            &:after {
              content: "";
              position: absolute;
              top: 100%;
              bottom: -98px;
              left: 49%;
              border-right: 5px solid #dddddd;
            }
          }
          .opened {
            &.color {
              background-color: #4ca31d;
              border-radius: 50%;
              border-width: 5px;
              border: 5px solid #fff;
              width:60px;
              height:60px;
              @media @desktop-tablet {
                width:90px;
                height:90px;
              }
            }
            .icon {
              float: right;
              position: absolute;
              cursor: pointer;
            }
            .audio {
              width: 45px;
              height: 43px;
              background-image: url(//amznstatic01.integrativenutrition.com/d7/icons/sampleclass-audioicon.svg);
              background-repeat: no-repeat;
              top: 16%;
              left: 13%;
              @media @desktop-tablet {
                width: 56px;
                height: 49px;
                cursor: pointer;
                top: 23%;
                left: 20%;
              }
            }
            .video {
              width: 39px;
              height: 24px;
              background-image: url(//amznstatic01.integrativenutrition.com/d7/icons/sampleclass-vidicon.svg);
              background-repeat: no-repeat;
              top: 30%;
              left: 26%;
              @media @desktop-tablet {
                width: 50px;
                height: 30px;
                top: 33%;
                left: 30%;
              }
            }
          }
        }
        .modal-dialog {
          @media @mobile {
            right: 5%;
            left: 5%;
            position: absolute;
          }
          button.close {
            .close;
          }
          @media @desktop-tablet {
            width: 662px;
            margin: 10px;
            position: fixed;
            margin: -242px 0 0 -331px;
            top: 50%;
            left: 50%;
          }
        }
        .class-container {
          position: relative;
          background: #fcfbfd;
          border: 3px solid #dddddd;
          width: 100%;
          padding: 10px;
          min-height: 145px;
          @media @desktop-tablet {
            bottom: 23px;
            width: 75%;
            &:after, &:before {
              top: 50%;
              border: solid transparent;
              content: " ";
              height: 0;
              width: 0;
              position: absolute;
              pointer-events: none;
            }
            &:after {
              border-color: rgba(252, 251, 253, 0);
              border-width: 14px;
              margin-top: -14px;
            }
            &:before {
              border-color: rgba(221, 221, 221, 0);
              border-width: 18px;
              margin-top: -18px;
            }
          }
          .title,
          .description,
          .time {
            font-size: @font-size-h4;
            font-weight: 500;
          }
          .title {
            color: #338a86;
            margin: 0 0 0 25%;
            @media @desktop-tablet {
              margin: 0;
            }
          }
          .description {
            color: @brand-secondary;
            overflow: hidden;
            margin: 7px 0 0 25%;
            @media @desktop-tablet {
              margin: 0;
            }
          }
          .time {
            color: @brand-quaternary;
            float: right;
          }
        }
      }
    }
  }

  .band.extra1 {
    .col-sm-12 {
      .sans-serif;
      -webkit-font-smoothing: antialiased;
      text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
      @media @desktop-tablet {
        .light-text;
        padding: 80px 0;
      }
      h2 {
        line-height: @line-height-base;
        font-size: @font-size-large;
        margin: 15px auto;
        font-weight: 500;
        width: 90%;
        @media @desktop-tablet {
          font-size: @font-size-h2-large;
          font-weight: 300;
          margin: 0 auto;
          width: 75%;
        }
      }
      .swirl {
        width: 49px;
        height: 53px;
        background: url(//amznstatic01.integrativenutrition.com/d7/logos/swirl.png);
        margin: 20px auto;
        @media @desktop-tablet {
          margin: 40px auto;
        }
      }
      .red {
        color: @brand-primary;
      }
    }
  }

  // Styling for the Affiliate Sample Class pages
  &.affiliate-sample-class {
    .band.white {
      background-color: #f1f1f1;
      margin-top: 0;
      .col-sm-12 {
        @media @desktop-tablet {
          background-color: #f1f1f1;
          border: none;
          margin-top: 0;
          position: initial;
        }
        h2 {
          text-align: left;
          line-height: 32px;
          font-size: @font-size-h1;
          margin: 10px 0 0;
          width: 100%;
        }
      }
    }
    .band.content {
      .col-sm-12 {
        @media @desktop-tablet {
          border: none;
        }
      }
    }
  }
}