/*VARIABLE*/
/*Screen Size*/
/*Common*/
/*VARIABLE END*/
/*MIXIN*/
/*MIXIN END*/
/* STYLE.CSS START */
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&subset=latin-ext");
@import url("https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700&subset=latin-ext");
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&subset=latin-ext");
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

ul,
li {
  list-style: none;
  padding: 0;
  margin: 0; }

body {
  background: #F5F5F5; }

/*Common Css*/
.row {
  margin: 0;
  display: block;
  float: left;
  position: relative;
  width: 100%; }

.clrB {
  clear: both; }

.imsakMainScope {
  width: 100%;
  position: relative;
  float: left;
  margin-bottom: 20px; }
  .imsakMainScope .imsakHeader {
    width: 100%;
    position: relative;
    float: left;
    padding: 10px 20px;
    background: url(../img/bg-yellow-app.png) #fbc12d repeat-x top center;
    background-size: auto 202px;
    height: 74px;
    overflow: hidden; }
    @media only screen and (max-width: 800px) {
      .imsakMainScope .imsakHeader {
        height: 240px;
        background: url(../img/bg-yellow-app.png) #fbc12d repeat-x top center;
        background-size: auto 102px; } }
    .imsakMainScope .imsakHeader .imsakStatus {
      float: right;
      position: relative;
      margin-right: 140px; }
      @media only screen and (max-width: 800px) {
        .imsakMainScope .imsakHeader .imsakStatus {
          float: left;
          width: 100%;
          clear: both; } }
    .imsakMainScope .imsakHeader .imsakLogo {
      float: left;
      position: relative;
      padding-top: 15px; }
      @media only screen and (max-width: 800px) {
        .imsakMainScope .imsakHeader .imsakLogo {
          clear: both;
          position: absolute;
          bottom: 20px; }
          .imsakMainScope .imsakHeader .imsakLogo img {
            height: 20px;
            width: auto; } }
      @media only screen and (max-width: 340px) {
        .imsakMainScope .imsakHeader .imsakLogo img {
          height: 15px;
          width: auto; } }
    @media only screen and (max-width: 800px) {
      .imsakMainScope .imsakHeader .imsakViewScope {
        right: 0;
        position: absolute;
        bottom: 0;
        width: 165px;
        height: 50px;
        overflow: hidden;
        clear: both; }
        .imsakMainScope .imsakHeader .imsakViewScope .imsakView {
          right: -17px;
          width: 165px;
          height: 136px;
          top: -37px; }
          .imsakMainScope .imsakHeader .imsakViewScope .imsakView span {
            margin-top: 44px;
            margin-left: 50px; } }
    .imsakMainScope .imsakHeader .imsakView {
      position: absolute;
      right: -17px;
      width: 170px;
      background: #fff;
      height: 140px;
      top: -25px;
      -webkit-transform: rotate(20deg);
      -moz-transform: rotate(20deg);
      -ms-transform: rotate(20deg);
      -o-transform: rotate(20deg);
      transform: rotate(20deg); }
      .imsakMainScope .imsakHeader .imsakView span {
        position: relative;
        float: left;
        -webkit-transform: rotate(-20deg);
        -moz-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
        -o-transform: rotate(-20deg);
        transform: rotate(-20deg);
        font-size: 14px;
        letter-spacing: 0.3px;
        text-align: left;
        color: #000000;
        margin-top: 45px;
        margin-left: 50px; }
        .imsakMainScope .imsakHeader .imsakView span:before {
          content: "";
          position: absolute;
          left: -37px;
          width: 27px;
          height: 24px;
          top: 50%;
          margin-top: -12px;
          background: url(../img/calendar.png) no-repeat;
          background-size: 100% 100%; }
        .imsakMainScope .imsakHeader .imsakView span:after {
          content: "";
          position: absolute;
          right: -20px;
          width: 10px;
          height: 6px;
          top: 50%;
          margin-top: -3px;
          background: url(../img/arrow.png) no-repeat;
          background-size: 100% 100%;
          -webkit-transform: rotate(-90deg);
          -moz-transform: rotate(-90deg);
          -ms-transform: rotate(-90deg);
          -o-transform: rotate(-90deg);
          transform: rotate(-90deg); }
    .imsakMainScope .imsakHeader .dropDownSelectScope {
      padding-top: 16px;
      float: left;
      position: relative; }
      @media only screen and (max-width: 800px) {
        .imsakMainScope .imsakHeader .dropDownSelectScope {
          float: none;
          margin: 0 auto;
          display: table;
          clear: both; }
          .imsakMainScope .imsakHeader .dropDownSelectScope .dropDownSelect {
            font-size: 19px !important;
            width: auto;
            background: url(../img/arrow.png) transparent no-repeat right top 10px !important;
            background-size: 10px auto !important; } }
      .imsakMainScope .imsakHeader .dropDownSelectScope .iconMap {
        float: left;
        position: relative; }
        @media only screen and (max-width: 800px) {
          .imsakMainScope .imsakHeader .dropDownSelectScope .iconMap {
            display: none; } }
      .imsakMainScope .imsakHeader .dropDownSelectScope .iconMapMobile {
        float: left;
        position: relative;
        display: none; }
        @media only screen and (max-width: 800px) {
          .imsakMainScope .imsakHeader .dropDownSelectScope .iconMapMobile {
            display: block; } }
      .imsakMainScope .imsakHeader .dropDownSelectScope .dropDownSelect {
        float: left;
        position: relative;
        margin-left: 5px;
        margin-right: 10px;
        padding-right: 10px;
        width: auto;
        height: 24px;
        font-family: Roboto;
        font-size: 17px;
        font-weight: 500;
        letter-spacing: 0.3px;
        text-align: left;
        color: #27262c;
        text-decoration: underline;
        outline: none;
        -moz-appearance: none;
        /* Firefox */
        -webkit-appearance: none;
        /* Safari and Chrome */
        appearance: none;
        border: 0;
        background: url(../img/arrow.png) transparent no-repeat right center;
        background-size: 10px auto; }
    .imsakMainScope .imsakHeader .timerText {
      float: left;
      position: relative;
      font-size: 17px;
      letter-spacing: 0.3px;
      text-align: left;
      color: #27262c;
      padding-top: 16px;
      margin-right: 10px; }
      @media only screen and (max-width: 800px) {
        .imsakMainScope .imsakHeader .timerText {
          width: 100%;
          text-align: center;
          clear: both;
          padding-top: 5px;
          font-size: 19px;
          margin-bottom: 10px; } }
    .imsakMainScope .imsakHeader .timerTextMobile {
      display: none; }
      @media only screen and (max-width: 800px) {
        .imsakMainScope .imsakHeader .timerTextMobile {
          display: inline-block; } }
    @media only screen and (max-width: 800px) {
      .imsakMainScope .imsakHeader .timerTextDesktop {
        display: none; } }
    .imsakMainScope .imsakHeader .timerScope {
      float: left;
      position: relative;
      height: 48px;
      font-size: 24px;
      font-weight: bold;
      letter-spacing: 0.5px;
      text-align: center;
      color: #27262c;
      margin-right: 10px; }
      @media only screen and (max-width: 800px) {
        .imsakMainScope .imsakHeader .timerScope {
          float: none;
          margin: 0 auto;
          clear: both;
          font-size: 36px;
          height: auto; } }
      .imsakMainScope .imsakHeader .timerScope .timerMain {
        position: relative;
        margin: 0 auto;
        display: table; }
        .imsakMainScope .imsakHeader .timerScope .timerMain .jst-hours {
          width: 38px;
          height: 54px;
          -webkit-border-radius: 6px;
          -moz-border-radius: 6px;
          -ms-border-radius: 6px;
          border-radius: 6px;
          background-color: #fbc12d;
          border: solid 1.2px #27262c;
          margin: 0 3px;
          padding-top: 9px; }
          .imsakMainScope .imsakHeader .timerScope .timerMain .jst-hours span {
            width: 100%;
            position: relative;
            float: left;
            font-size: 8px;
            text-align: center;
            color: #27262c;
            margin-top: -4px; }
          @media only screen and (max-width: 800px) {
            .imsakMainScope .imsakHeader .timerScope .timerMain .jst-hours {
              width: 60px;
              border: solid 2.2px #000000;
              height: 75px;
              -webkit-border-radius: 10.8px;
              -moz-border-radius: 10.8px;
              -ms-border-radius: 10.8px;
              border-radius: 10.8px;
              margin: 0 4px;
              padding-top: 4px; }
              .imsakMainScope .imsakHeader .timerScope .timerMain .jst-hours span {
                font-size: 13px;
                font-weight: 500;
                margin-top: -6px; } }
        .imsakMainScope .imsakHeader .timerScope .timerMain .jst-minutes {
          width: 38px;
          height: 54px;
          -webkit-border-radius: 6px;
          -moz-border-radius: 6px;
          -ms-border-radius: 6px;
          border-radius: 6px;
          background-color: #fbc12d;
          border: solid 1.2px #27262c;
          margin: 0 3px;
          padding-top: 9px; }
          .imsakMainScope .imsakHeader .timerScope .timerMain .jst-minutes span {
            width: 100%;
            position: relative;
            float: left;
            font-size: 8px;
            text-align: center;
            color: #27262c;
            margin-top: -4px; }
          @media only screen and (max-width: 800px) {
            .imsakMainScope .imsakHeader .timerScope .timerMain .jst-minutes {
              width: 60px;
              border: solid 2.2px #000000;
              height: 75px;
              -webkit-border-radius: 10.8px;
              -moz-border-radius: 10.8px;
              -ms-border-radius: 10.8px;
              border-radius: 10.8px;
              margin: 0 4px;
              padding-top: 4px; }
              .imsakMainScope .imsakHeader .timerScope .timerMain .jst-minutes span {
                font-size: 13px;
                font-weight: 500;
                margin-top: -6px; } }
        .imsakMainScope .imsakHeader .timerScope .timerMain .jst-seconds {
          width: 38px;
          height: 54px;
          -webkit-border-radius: 6px;
          -moz-border-radius: 6px;
          -ms-border-radius: 6px;
          border-radius: 6px;
          background-color: #fbc12d;
          border: solid 1.2px #27262c;
          margin: 0 3px;
          padding-top: 9px; }
          .imsakMainScope .imsakHeader .timerScope .timerMain .jst-seconds span {
            width: 100%;
            position: relative;
            float: left;
            font-size: 8px;
            text-align: center;
            color: #27262c;
            margin-top: -4px; }
          @media only screen and (max-width: 800px) {
            .imsakMainScope .imsakHeader .timerScope .timerMain .jst-seconds {
              width: 60px;
              border: solid 2.2px #000000;
              height: 75px;
              -webkit-border-radius: 10.8px;
              -moz-border-radius: 10.8px;
              -ms-border-radius: 10.8px;
              border-radius: 10.8px;
              margin: 0 4px;
              padding-top: 4px; }
              .imsakMainScope .imsakHeader .timerScope .timerMain .jst-seconds span {
                font-size: 13px;
                font-weight: 500;
                margin-top: -6px; } }

.imsakScope {
  width: 100%;
  position: relative;
  float: left; }
  .imsakScope .imsakHeader {
    width: 100%;
    position: relative;
    float: left;
    padding: 15px 20px;
    background: #fff;
    height: 78px;
    overflow: hidden; }
    @media only screen and (max-width: 520px) {
      .imsakScope .imsakHeader {
        padding: 15px 0px; } }
    .imsakScope .imsakHeader .dropDownSelectScope {
      padding-top: 12px;
      float: left;
      position: relative; }
      @media only screen and (max-width: 520px) {
        .imsakScope .imsakHeader .dropDownSelectScope {
          float: left;
          left: 50%;
          margin-left: -58px;
          padding-top: 6px;
          transform: translateX(-50%); } }
      .imsakScope .imsakHeader .dropDownSelectScope .iconMap {
        float: left;
        position: relative; }
      .imsakScope .imsakHeader .dropDownSelectScope .dropDownSelect {
        float: left;
        position: relative;
        margin-left: 5px;
        margin-right: 10px;
        padding-right: 10px;
        width: auto;
        height: 20px;
        font-family: Roboto;
        font-size: 17px;
        font-weight: 500;
        letter-spacing: 0.3px;
        text-align: left;
        color: #162c54;
        text-decoration: underline;
        outline: none;
        -moz-appearance: none;
        /* Firefox */
        -webkit-appearance: none;
        /* Safari and Chrome */
        appearance: none;
        border: 0;
        background: url(../img/arrow.png) transparent no-repeat right center;
        background-size: 10px auto; }
    .imsakScope .imsakHeader .timerText {
      float: left;
      position: relative;
      font-size: 17px;
      letter-spacing: 0.3px;
      text-align: left;
      color: #162c54;
      padding-top: 12px;
      margin-right: 20px; }
      @media only screen and (max-width: 520px) {
        .imsakScope .imsakHeader .timerText {
          width: 100%;
          padding-top: 2px;
          margin-right: 0;
          clear: both;
          text-align: center;
          padding-right: 130px;
          font-size: 14px; } }
    .imsakScope .imsakHeader .timerScope {
      float: left;
      position: relative;
      width: 153px;
      height: 48px;
      border-radius: 24px;
      background-color: #3d3d3d;
      font-size: 26px;
      font-weight: 400;
      letter-spacing: 0.5px;
      text-align: center;
      color: #ffffff; }
      @media only screen and (max-width: 800px) {
        .imsakScope .imsakHeader .timerScope {
          float: right; } }
      @media only screen and (max-width: 520px) {
        .imsakScope .imsakHeader .timerScope {
          margin-top: -35px;
          margin-right: 0px;
          width: 130px;
          -webkit-border-radius: 0;
          -moz-border-radius: 0;
          -ms-border-radius: 0;
          border-radius: 0;
          height: 180px;
          -webkit-transform: rotate(20deg);
          -moz-transform: rotate(20deg);
          -ms-transform: rotate(20deg);
          -o-transform: rotate(20deg);
          transform: rotate(20deg);
          position: absolute;
          float: none;
          right: 0; }
          .imsakScope .imsakHeader .timerScope .timer {
            -webkit-transform: rotate(-20deg);
            -moz-transform: rotate(-20deg);
            -ms-transform: rotate(-20deg);
            -o-transform: rotate(-20deg);
            transform: rotate(-20deg);
            padding-top: 42px !important;
            padding-right: 26px;
            font-size: 24px; } }
    @media only screen and (max-width: 520px) and (max-width: 340px) {
      .imsakScope .imsakHeader .timerScope .timer {
        font-size: 18px;
        padding-top: 45px !important; } }

      @media only screen and (max-width: 340px) {
        .imsakScope .imsakHeader .timerScope {
          width: 110px; } }
      .imsakScope .imsakHeader .timerScope .timer {
        position: relative;
        margin: 0 auto;
        display: table;
        padding-top: 7px; }
    .imsakScope .imsakHeader .timerRightText {
      font-size: 17px;
      letter-spacing: 0.3px;
      text-align: left;
      color: #162c54;
      padding-top: 5px;
      float: right; }
      .imsakScope .imsakHeader .timerRightText strong {
        font-weight: 700;
        font-size: 26px;
        -webkit-transform: translateY(2px);
        -moz-transform: translateY(2px);
        -ms-transform: translateY(2px);
        -o-transform: translateY(2px);
        transform: translateY(2px);
        position: relative;
        display: inline-block; }
      @media only screen and (max-width: 800px) {
        .imsakScope .imsakHeader .timerRightText {
          display: none; } }
  .imsakScope .imsakCalendar {
    width: 100%;
    position: relative;
    float: left;
    background: #fbc12d;
    padding: 40px 15px;
    background: linear-gradient(224deg, #ff6a11, #ffc023);
    background: -webkit-linear-gradient(224deg, #ff6a11, #ffc023);
    background: -moz-linear-gradient(224deg, #ff6a11, #ffc023);
    background: -o-linear-gradient(224deg, #ff6a11, #ffc023); }
    .imsakScope .imsakCalendar .sun {
      position: absolute;
      top: 18%;
      left: 6%; }
    .imsakScope .imsakCalendar .advertisement {
      position: relative;
      display: table;
      width: 100%;
      max-width: 620px;
      margin: 0 auto;
      margin-bottom: 30px;
      text-align: left; }
      .imsakScope .imsakCalendar .advertisement .logoIconScope {
        float: left;
        position: relative; }
        @media only screen and (max-width: 800px) {
          .imsakScope .imsakCalendar .advertisement .logoIconScope img {
            width: 53px;
            height: auto; } }
        @media only screen and (max-width: 400px) {
          .imsakScope .imsakCalendar .advertisement .logoIconScope img {
            width: 45px;
            height: auto; } }
      .imsakScope .imsakCalendar .advertisement .logoIconText {
        float: left;
        position: relative;
        margin-left: 15px;
        padding-top: 5px;
        width: 100%;
        max-width: 150px; }
        @media only screen and (max-width: 800px) {
          .imsakScope .imsakCalendar .advertisement .logoIconText {
            max-width: 150px;
            margin-left: 10px; } }
        @media only screen and (max-width: 400px) {
          .imsakScope .imsakCalendar .advertisement .logoIconText {
            max-width: 110px;
            margin-left: 5px;
            padding-top: 2px; } }
        .imsakScope .imsakCalendar .advertisement .logoIconText .logoIconTitle {
          width: 100%;
          position: relative;
          float: left;
          font-size: 28px;
          font-weight: 500;
          color: #fff; }
          @media only screen and (max-width: 800px) {
            .imsakScope .imsakCalendar .advertisement .logoIconText .logoIconTitle {
              font-size: 20px; } }
          @media only screen and (max-width: 400px) {
            .imsakScope .imsakCalendar .advertisement .logoIconText .logoIconTitle {
              font-size: 20px; } }
        .imsakScope .imsakCalendar .advertisement .logoIconText .logoIconSubtitle {
          width: 100%;
          position: relative;
          float: left;
          font-size: 14px;
          font-weight: 400;
          color: #fff; }
          @media only screen and (max-width: 400px) {
            .imsakScope .imsakCalendar .advertisement .logoIconText .logoIconSubtitle {
              font-size: 12px; } }
      .imsakScope .imsakCalendar .advertisement .appIconScope {
        float: right;
        position: relative;
        padding-top: 25px; }
        @media only screen and (max-width: 800px) {
          .imsakScope .imsakCalendar .advertisement .appIconScope {
            padding-top: 15px; }
            .imsakScope .imsakCalendar .advertisement .appIconScope img {
              height: 32px; } }
    .imsakScope .imsakCalendar .advertisementLeft {
      position: absolute;
      left: 20px;
      text-align: center;
      width: 240px;
      margin-top: 180px;
      font-size: 34px;
      font-weight: 700;
      line-height: 1.47;
      letter-spacing: 0;
      text-align: center;
      color: #050505;
      display: none; }
      @media only screen and (max-width: 1200px) {
        .imsakScope .imsakCalendar .advertisementLeft {
          font-size: 25px;
          width: 150px; } }
      @media only screen and (max-width: 980px) {
        .imsakScope .imsakCalendar .advertisementLeft {
          display: none; } }
    .imsakScope .imsakCalendar .advertisementRight {
      position: absolute;
      right: 20px;
      text-align: center;
      width: 240px;
      margin-top: 180px;
      font-size: 34px;
      font-weight: 700;
      line-height: 1.47;
      letter-spacing: 0;
      text-align: center;
      color: #050505;
      display: none; }
      @media only screen and (max-width: 1200px) {
        .imsakScope .imsakCalendar .advertisementRight {
          font-size: 22px;
          width: 150px; } }
      @media only screen and (max-width: 980px) {
        .imsakScope .imsakCalendar .advertisementRight {
          display: none; } }
    .imsakScope .imsakCalendar .advText, .imsakScope .imsakCalendar .advImg {
      display: inline-block; }
      .imsakScope .imsakCalendar .advText img, .imsakScope .imsakCalendar .advImg img {
        width: 75%;
        height: auto; }
    .imsakScope .imsakCalendar .imsakCalendarBox {
      position: relative;
      display: table;
      width: 100%;
      max-width: 620px;
      margin: 0 auto;
      padding: 20px 40px;
      background: #fff;
      -webkit-box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.19);
      -moz-box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.19);
      box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.19); }
      @media only screen and (max-width: 800px) {
        .imsakScope .imsakCalendar .imsakCalendarBox {
          padding: 20px; } }
      .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalHeader {
        width: 100%;
        position: relative;
        float: left;
        border: solid 1px #d3d3d3;
        font-size: 11px;
        line-height: 1.27;
        letter-spacing: 0;
        text-align: center;
        color: #162c54;
        font-weight: 500; }
        .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalHeader .imCalRow {
          width: 100%;
          position: relative;
          float: left;
          border-bottom: solid 1px #d3d3d3;
          padding: 10px 0; }
          .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalHeader .imCalRow:last-child {
            border: 0; }
          .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalHeader .imCalRow .imCalThree {
            width: 33.33%;
            position: relative;
            float: left;
            text-align: center; }
          .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalHeader .imCalRow .imCalFour {
            width: 25%;
            position: relative;
            float: left;
            text-align: center; }
      .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalDate {
        width: 100%;
        position: relative;
        float: left;
        padding: 30px 0;
        text-align: center;
        min-height: 300px; }
        .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalDate .imsakOtherCountry {
          position: absolute;
          left: 0px;
          width: 65px;
          height: auto;
          top: 70px; }
          @media only screen and (max-width: 520px) {
            .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalDate .imsakOtherCountry {
              top: 15px; } }
          .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalDate .imsakOtherCountry.imsakRight {
            left: auto;
            right: 0; }
          .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalDate .imsakOtherCountry .imsakOtherTitle {
            width: 100%;
            position: relative;
            float: left;
            left: 50%;
            width: auto;
            transform: translateX(-50%);
            font-size: 11px;
            font-weight: 700;
            line-height: 1.27;
            color: #162c54;
            background: url(../img/hours.png) no-repeat center left;
            background-size: 13px auto;
            padding-left: 16px; }
          .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalDate .imsakOtherCountry .imsakOtherBox {
            width: 100%;
            position: relative;
            float: left;
            border: solid 1px #d3d3d3;
            padding: 10px;
            font-size: 11px;
            text-align: center;
            color: #717171;
            letter-spacing: 0.8px;
            font-weight: 400;
            margin-top: 10px;
            line-height: 180% !important; }
            .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalDate .imsakOtherCountry .imsakOtherBox strong {
              font-weight: 700;
              color: #222222; }
        @media only screen and (max-width: 400px) {
          .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalDate .imsakDateBigText {
            padding-top: 45px; } }
        @media only screen and (max-width: 340px) {
          .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalDate .imsakDateBigText {
            padding-top: 65px; } }
        .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalDate .imsakDateBigText .imsakMonth {
          font-size: 50.3px;
          font-weight: 700;
          letter-spacing: 1px;
          text-align: center;
          color: #162c54;
          line-height: 100% !important; }
          @media only screen and (max-width: 520px) {
            .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalDate .imsakDateBigText .imsakMonth {
              font-size: 30px; } }
          @media only screen and (max-width: 400px) {
            .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalDate .imsakDateBigText .imsakMonth {
              font-size: 20px; } }
          @media only screen and (max-width: 340px) {
            .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalDate .imsakDateBigText .imsakMonth {
              font-size: 16px; } }
        .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalDate .imsakDateBigText .imsakDay {
          font-size: 190.3px;
          font-weight: 700;
          letter-spacing: 3.8px;
          text-align: center;
          color: #162c54;
          line-height: 110% !important; }
          @media only screen and (max-width: 520px) {
            .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalDate .imsakDateBigText .imsakDay {
              font-size: 120px; } }
          @media only screen and (max-width: 400px) {
            .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalDate .imsakDateBigText .imsakDay {
              font-size: 90px; } }
          @media only screen and (max-width: 340px) {
            .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalDate .imsakDateBigText .imsakDay {
              font-size: 60px; } }
        .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalDate .imsakDateBigText .imsakDayName {
          font-size: 44px;
          font-weight: 700;
          letter-spacing: 1px;
          text-align: center;
          color: #162c54;
          line-height: 100% !important; }
          @media only screen and (max-width: 520px) {
            .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalDate .imsakDateBigText .imsakDayName {
              font-size: 30px; } }
          @media only screen and (max-width: 400px) {
            .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalDate .imsakDateBigText .imsakDayName {
              font-size: 20px; } }
          @media only screen and (max-width: 340px) {
            .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalDate .imsakDateBigText .imsakDayName {
              font-size: 16px; } }
      .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalFooter {
        width: 100%;
        position: relative;
        float: left;
        text-align: center;
        font-size: 14px;
        line-height: 1.36;
        letter-spacing: 0;
        text-align: center;
        color: #162c54;
        padding: 0 40px; }
        @media only screen and (max-width: 520px) {
          .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalFooter {
            padding: 0;
            font-size: 12px; } }
        .imsakScope .imsakCalendar .imsakCalendarBox .imsakCalFooter .imsakLine {
          width: 100%;
          position: relative;
          float: left;
          height: 1px;
          background-color: #d3d3d3;
          clear: both;
          margin: 10px 0; }
  .imsakScope .imsakTitle {
    width: 100%;
    position: relative;
    float: left;
    margin-bottom: 20px;
    font-size: 38px;
    font-weight: bold;
    line-height: 1.47;
    letter-spacing: 0;
    color: #162c54; }
    @media only screen and (max-width: 800px) {
      .imsakScope .imsakTitle {
        font-size: 24px; } }
  .imsakScope .imsakPrayerScope {
    width: 100%;
    position: relative;
    float: left;
    background: url(../img/bg-prayer.png) repeat;
    background-size: auto 240px;
    padding: 20px 20px;
    margin: 20px 0 0 0; }
    .imsakScope .imsakPrayerScope .imsakPrayerRow {
      width: 100%;
      position: relative;
      float: left; }
      .imsakScope .imsakPrayerScope .imsakPrayerRow .imsakPrayerCol {
        width: 16.66%;
        position: relative;
        float: left;
        text-align: center;
        font-size: 30.3px;
        font-weight: 700;
        text-align: center;
        color: #162c54; }
        .imsakScope .imsakPrayerScope .imsakPrayerRow .imsakPrayerCol strong {
          font-size: 28px;
          color: #e00809; }
        @media only screen and (max-width: 800px) {
          .imsakScope .imsakPrayerScope .imsakPrayerRow .imsakPrayerCol {
            font-size: 20px; }
            .imsakScope .imsakPrayerScope .imsakPrayerRow .imsakPrayerCol strong {
              font-size: 20px; } }
        @media only screen and (max-width: 520px) {
          .imsakScope .imsakPrayerScope .imsakPrayerRow .imsakPrayerCol {
            width: 100%;
            position: relative;
            float: left;
            margin-bottom: 20px; }
            .imsakScope .imsakPrayerScope .imsakPrayerRow .imsakPrayerCol br {
              display: none; }
            .imsakScope .imsakPrayerScope .imsakPrayerRow .imsakPrayerCol strong {
              width: 75px;
              margin-right: 10px;
              display: inline-block;
              text-align: right; } }
  .imsakScope .imsakDayContentScope {
    width: 100%;
    position: relative;
    float: left;
    margin: 20px 0 0 0; }
    @media only screen and (max-width: 800px) {
      .imsakScope .imsakDayContentScope {
        padding: 20px;
        background: #fff;
        margin-bottom: 20px; } }
    .imsakScope .imsakDayContentScope .imsakDayRow {
      width: 100%;
      position: relative;
      float: left; }
      .imsakScope .imsakDayContentScope .imsakDayRow .imsakDayCol {
        width: 18.4%;
        position: relative;
        float: left;
        margin-right: 2%;
        margin-bottom: 20px;
        background: #fff;
        padding: 20px;
        min-height: 240px;
        font-size: 14px;
        line-height: 1.43;
        letter-spacing: 0;
        text-align: left;
        color: #162c54; }
        .imsakScope .imsakDayContentScope .imsakDayRow .imsakDayCol:nth-child(5n+0) {
          margin-right: 0; }
        .imsakScope .imsakDayContentScope .imsakDayRow .imsakDayCol .imsakDayClickHead {
          cursor: pointer; }
          .imsakScope .imsakDayContentScope .imsakDayRow .imsakDayCol .imsakDayClickHead:after {
            content: "";
            position: absolute;
            width: 10px;
            height: 6px;
            right: 0px;
            top: 50%;
            margin-top: -3px;
            background: url(../img/arrow.png) no-repeat center center;
            background-size: 100% 100%;
            -webkit-transition: all 0.34s ease;
            -moz-transition: all 0.34s ease;
            -ms-transition: all 0.34s ease;
            -o-transition: all 0.34s ease;
            transition: all 0.34s ease; }
          .imsakScope .imsakDayContentScope .imsakDayRow .imsakDayCol .imsakDayClickHead.open:after {
            -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            transform: rotate(180deg); }
        .imsakScope .imsakDayContentScope .imsakDayRow .imsakDayCol .imsakDayTextClose {
          height: 0;
          overflow: hidden;
          -webkit-transition: all 0.34s ease;
          -moz-transition: all 0.34s ease;
          -ms-transition: all 0.34s ease;
          -o-transition: all 0.34s ease;
          transition: all 0.34s ease; }
        .imsakScope .imsakDayContentScope .imsakDayRow .imsakDayCol .imsakDayHead {
          width: 100%;
          position: relative;
          float: left;
          margin-bottom: 20px;
          font-size: 20px;
          font-weight: 500;
          line-height: 1.2;
          letter-spacing: 0;
          text-align: left;
          color: #e00809; }
        .imsakScope .imsakDayContentScope .imsakDayRow .imsakDayCol .imsakDayText {
          width: 100%;
          position: relative;
          float: left; }
        @media only screen and (max-width: 980px) {
          .imsakScope .imsakDayContentScope .imsakDayRow .imsakDayCol {
            width: 32%;
            position: relative;
            float: left; }
            .imsakScope .imsakDayContentScope .imsakDayRow .imsakDayCol:nth-child(3n+0) {
              margin-right: 0%; }
            .imsakScope .imsakDayContentScope .imsakDayRow .imsakDayCol:nth-child(5n+0) {
              margin-right: 2%; } }
        @media only screen and (max-width: 800px) {
          .imsakScope .imsakDayContentScope .imsakDayRow .imsakDayCol {
            width: 100%;
            position: relative;
            float: left;
            margin-right: 0;
            padding: 0;
            min-height: 1px;
            margin-bottom: 0px; } }
  .imsakScope .imsakPrayerMonthScope {
    width: 100%;
    position: relative;
    float: left;
    background: #fff;
    padding: 20px 0 0px 0; }
    .imsakScope .imsakPrayerMonthScope .imsakTitle {
      width: 100%;
      position: relative;
      float: left;
      padding: 0 20px 20px 20px; }
    .imsakScope .imsakPrayerMonthScope .imsakPrayerMonthTable {
      width: 100%;
      position: relative;
      float: left; }
      .imsakScope .imsakPrayerMonthScope .imsakPrayerMonthTable table {
        width: 100%; }
        .imsakScope .imsakPrayerMonthScope .imsakPrayerMonthTable table thead th {
          background: transparent;
          font-size: 20px;
          font-weight: 500;
          color: #e00809;
          padding: 10px; }
          @media only screen and (max-width: 800px) {
            .imsakScope .imsakPrayerMonthScope .imsakPrayerMonthTable table thead th {
              font-size: 13px; } }
        .imsakScope .imsakPrayerMonthScope .imsakPrayerMonthTable table tbody td {
          padding: 10px;
          vertical-align: middle; }
        .imsakScope .imsakPrayerMonthScope .imsakPrayerMonthTable table tbody tr {
          font-size: 14px;
          font-weight: 400;
          text-align: left;
          color: #162c54;
          background: #fff;
          padding-left: 20px;
          -webkit-transition: all 0.34s ease;
          -moz-transition: all 0.34s ease;
          -ms-transition: all 0.34s ease;
          -o-transition: all 0.34s ease;
          transition: all 0.34s ease; }
          @media only screen and (max-width: 800px) {
            .imsakScope .imsakPrayerMonthScope .imsakPrayerMonthTable table tbody tr {
              font-size: 13px; } }
          .imsakScope .imsakPrayerMonthScope .imsakPrayerMonthTable table tbody tr strong {
            font-weight: 400; }
          .imsakScope .imsakPrayerMonthScope .imsakPrayerMonthTable table tbody tr:nth-child(2n+0) {
            background: #f9f9f9; }
          .imsakScope .imsakPrayerMonthScope .imsakPrayerMonthTable table tbody tr:hover {
            /*@include transform(scale(1.05));
            background: #162c54;
            color: #fff;*/ }
          .imsakScope .imsakPrayerMonthScope .imsakPrayerMonthTable table tbody tr.active {
            -webkit-transform: scale(1.02);
            -moz-transform: scale(1.02);
            -ms-transform: scale(1.02);
            -o-transform: scale(1.02);
            transform: scale(1.02);
            background: #162c54;
            color: #fff; }
            .imsakScope .imsakPrayerMonthScope .imsakPrayerMonthTable table tbody tr.active .imsakPrayerMonthCol {
              border-left: 1px solid #fff; }
        .imsakScope .imsakPrayerMonthScope .imsakPrayerMonthTable table .imsakPrayerMonthDate {
          width: 40%;
          text-align: left;
          padding-left: 20px; }
          .imsakScope .imsakPrayerMonthScope .imsakPrayerMonthTable table .imsakPrayerMonthDate .pryMnthMobile {
            display: none; }
          @media only screen and (max-width: 800px) {
            .imsakScope .imsakPrayerMonthScope .imsakPrayerMonthTable table .imsakPrayerMonthDate {
              width: 14.285%;
              text-align: center;
              padding: 5px;
              padding-left: 0px; }
              .imsakScope .imsakPrayerMonthScope .imsakPrayerMonthTable table .imsakPrayerMonthDate .pryMnthMobile {
                display: block; }
              .imsakScope .imsakPrayerMonthScope .imsakPrayerMonthTable table .imsakPrayerMonthDate .pryMnthDesktop {
                display: none; } }
          @media only screen and (max-width: 340px) {
            .imsakScope .imsakPrayerMonthScope .imsakPrayerMonthTable table .imsakPrayerMonthDate {
              padding: 0px;
              font-size: 12px; } }
        .imsakScope .imsakPrayerMonthScope .imsakPrayerMonthTable table .imsakPrayerMonthCol {
          width: 10%;
          text-align: center; }
          @media only screen and (max-width: 800px) {
            .imsakScope .imsakPrayerMonthScope .imsakPrayerMonthTable table .imsakPrayerMonthCol {
              width: 14.285%;
              padding: 5px; } }
          @media only screen and (max-width: 340px) {
            .imsakScope .imsakPrayerMonthScope .imsakPrayerMonthTable table .imsakPrayerMonthCol {
              padding: 0px;
              font-size: 12px; } }

.jst-hours {
  float: left; }

.jst-minutes {
  float: left; }

.jst-seconds {
  float: left; }

.jst-clearDiv {
  clear: both; }

.jst-timeout {
  color: red; }

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