@font-face
  font-family: oswald
  src: url("/wp-content/plugins/masoffer-promotion/fonts/VNF-Oswald Regular.ttf")
@font-face
  font-family: "Open Sans Regular"
  src: url("/wp-content/plugins/masoffer-promotion/fonts/OpenSans-Regular.ttf")
@font-face
  font-family: "Open Sans"
  src: url("/wp-content/plugins/masoffer-promotion/fonts/OpenSans-SemiBold.woff2")


#mopromo-wrapper
  max-width: 100%
  *
    font-family: "Open Sans Regular"
  a
    text-decoration: none !important
    font-family: "Open Sans"
  .title
    color: #000000c7
    font-size: 19px
    &:hover
      color: #39b54a

  @media only screen and (min-width: 576px)
    .promo-row
      border: 1px solid #ddd
      padding: 10px
      margin-bottom: 20px
      display: table
      width: 100%
    .inline-div
      display: table-cell
    .col-pre
      width: 100px
    .col-oth
      margin: 0px auto
      width: 175px
  @media only screen and (max-width: 575px)
    .promo-row
      border: 1px solid #ddd
      padding: 10px
      margin-bottom: 20px
      width: 100%
    .inline-div
      display: block
      margin: auto
      text-align: center
    .col-oth
      width: 175px
    .image
      margin: auto

  .col-oth
    a
      text-transform: uppercase
      display: block
      color: #fff
      font-family: "Open Sans"
      padding-left: 10px
      padding-right: 10px
      font-size: 17px
      text-align: center
      margin: 0px auto
  .image
    height: 90px
    width: 90px
    border: 3px solid #006EC8
    .type
      background-color: #f0f0f0
      text-transform: uppercase
      text-align: center
      letter-spacing: 2px
      line-height: 27px
      font-size: 10px
      color: #637cf9
    .value
      text-transform: uppercase
      text-align: center
      line-height: 27px
      font-size: 26px
      font-weight: bold
      color: #006FC8
      margin-top: 8px
      font-family: oswald
  .info
    font-size: 16px
    strong
      color: #39B54A
  .expired
    text-align: center
    text-transform: uppercase
    font-size: 13px
    font-weight: 600
    color: #d41919
    margin-bottom: 2px
  .get-code
    display: block
    position: relative
    overflow: hidden
    .wrapper
      position: absolute
      width: 100%
      line-height: 0px
      top: 0
      left: 0px
      border-bottom: 40px solid #006EC8
      border-right: 20px solid transparent
      -webkit-transform: translateX(-60px)
      -moz-transform: translateX(-60px)
      -ms-transform: translateX(-60px)
      -o-transform: translateX(-60px)
      transform: translateX(-60px)
      transition: .3s
      .get
        position: absolute
        width: 100%
        top: 0
        left: 25px
        -webkit-transform: translateX(0px)
        -moz-transform: translateX(0px)
        -ms-transform: translateX(0px)
        -o-transform: translateX(0px)
        transform: translateX(0px)
        line-height: 39px
        transition: .3s
    &:hover
      .wrapper
        -webkit-transform: translateX(0px)
        -moz-transform: translateX(0px)
        -ms-transform: translateX(0px)
        -o-transform: translateX(0px)
        transform: translateX(0px)
        border-right: none
        .get
          -webkit-transform: translateX(0px)
          -moz-transform: translateX(0px)
          -ms-transform: translateX(0px)
          -o-transform: translateX(0px)
          transform: translateX(0px)
          left: 0px
          color: white !important
    .ip-code
      letter-spacing: 7px
      text-align: center
      text-transform: uppercase
      color: #c1c1c1
      width: 100%
      border: 2px dashed #ddd
      font-family: "oswald"
      font-size: 13px
      line-height: 20px
  .get-promo
    line-height: 40px
    background-color: #006EC8
    transition: .3s
    border: 2px solid transparent
    &:hover
      color: white
      background: #0094ef