/*Revlon*/

.intro-bg {
      background: url(../img/revlon-bg.jpg) center no-repeat;
      background-size: cover;
    }

    .intro h1 {
      margin-left: 14px;
    }

      .play:after {
        top: 43%;
    }

    .ms-skin-default .ms-nav-next, .ms-skin-default .ms-nav-prev {
      top: 50%;
    }

    @media only screen and (max-width : 1800px) {
      .story {
        height: 40%;
      }
    }

        @media only screen and (max-width : 800px) {
      .right, .left {
        width: 100%;
      }

      .nav-circle {
        display: none;
      }

      .stry img {
        height: 400px;
      }

      .story{
        width: 500px;
        height: 66%;
      }

      .story h1 {
        font-size: 2em;
      }

      .story p {
        font-size: .8em;
        line-height: 20px;
      }

      .quot img {
        height: 440px;
      }

      .quote {
        width: 75%;
        top: 0;
        font-size: 1.1em;
        line-height: 26px;
      }

      .mark {
        margin-left: -26px;
      }

      .location, .contact {
        font-size: 1.25em;
        width: 100%;
        padding: 65px 0 0 80px;

      }

      .copyright {
        font-size: 1em;
        clear: both;
        text-align: left;
        padding: 80px 0 30px 80px;

      }

      @media only screen and (max-width : 600px) {

        .quot img {
          height: 350px;
        }

        .quote {
        top: -19%;
        font-size: 1em;

      }

        .mark {
          margin-left: -24px;
        }

        .mark-bot {
          margin-left: -2px;
        }

      }


      @media only screen and (max-width : 480px) {
        .intro-text h1 {
          font-size: 1.8em;
          margin-top: 20px;
        }

        .play:after {
          top: 59%;
      }

      .play {
        font-size: 1em;
        width: 100%;
        text-align: center;
        margin-left: -40px;
        letter-spacing: 1px;
      }

      .story {
        width: 370px;
        height: 71%;
        text-align: center;
        line-height: 18px;
      }

      .story h2 {
        width: 70%;
        margin: auto;
      }

      .story h1 {
        font-size: 2em;
      }

      .story p {
        font-size: .7em;
        line-height: 17px;
        text-align: center;
        width: 100%;
        margin: auto;
      }

      .quot img {
        height: 300px;
      }

      .quote {
        width: 78%;
        top: -14%;
        font-size: .9em;
        line-height: 23px;

      }

      .mark {
        margin-left: -22px;
      }

      .mark-bot {
          margin-left: 0px;
        }



      }

      @media only screen and (max-width : 400px) {

        .stry img {
          height: 360px;
        }

        .story {
          width: 76%;
          line-height: 15px;
          height: 75%;
        }

        .story h1 {
          font-size: 1.4em;
        }

        .story h2 {
          width: 100%;
        }

        .story p {
          font-size: .7em;
          line-height: 14px;
        }

        .quot img {
          height: 350px;
        }

        .quote {
        width: 72%;
        top: -24%;
        font-size: .9em;
        line-height: 18px;
        }

        .mark {
        margin-left: -22px;
        }

        .footer {
          font-size: .8em;
        }

        .location, .contact {

        padding: 65px 0 0 30px;

      }

      .copyright {
        clear: both;
        padding: 80px 0 30px 30px;

      }

      }

    @media only screen and (max-width : 320px) {

      .story {
        height: 80%;
      }

      .stry img {
        height: 360px;
      }

    }