* {
  padding: 0;
  margin: 0;
}
.mobileLandsDivider,
.mobile,
.mobileLandscape,
.tablet,
.tabletLandscape {
  display: none;
}
div#videoStart {
  max-width: 75%;
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 1111;
}
.bottomBanner.resizedView {
  height: 100%;
}
.fa-play-circle:before {
  content: "\f144";
}.fa-pause-circle:before {
  content: "\f28b";
}
i.far.fa-play-circle {
  background-image: url('./../images/play.png');
  color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
i.far.fa-pause-circle{
  background-image: url('./../images/pause.png');
  color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.travelProductWrap.active img.travelPlusIcon {
  display: none;
}
.travelProductWrap.active img.travelPlusIcon.MinusIcon {
  display: block;
}

.travelProductWrap.active img.TravelExpanded {
  display: block;
}


.bladeWrap.active img.bladePlusIcon {
  display: none;
}
.bladeWrap.active img.bladePlusIcon.MinusIcon {
  display: block;
}

.bladeWrap.active img.BladeExpandedCopy {
  display: block;
}

/*  */

.ShavegelWrap.active img.ShavegelPlusIcon {
  display: none;
}
.ShavegelWrap.active img.ShavegelPlusIcon.MinusIcon {
  display: block;
}

.ShavegelWrap.active img.GelExpandedCopy {
  display: block;
}



/*  */

.RazorProductWrap.active1 img.OrangeRazorplusIcon1 {
  display: none;
}
.RazorProductWrap.active1 img.OrangeRazorplusIcon1.MinusIcon {
  display: block;
}

.RazorProductWrap.active1 img.RazorBladesExpanded {
  display: block;
}


/*  */

.RazorProductWrap.active img.OrangeRazorplusIcon2 {
  display: none;
}
.RazorProductWrap.active img.OrangeRazorplusIcon2.MinusIcon {
  display: block;
}

.RazorProductWrap.active img.RazorHandleExpanded {
  display: block;
}



.rtopVideoPlayerWrapper .rtopVideoPlayer .rtopVideoHolder.hasFAIcons:after {
  background-image: url(./../images/playIcon.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
}
.resizedState {
  display: none;
}
.videoOverlay{
  background-color: rgb(0 0 0 / 70%);
  height: 100%;
  width: 100%;
  left: 0;
  right: 0;
  z-index: 11;
  top: 0;
  bottom: 0;
  position: fixed;
}img.videoClose {
  position: fixed;
  z-index: 11;
}
.bottomBanner {
  height: 150px;
  width: 100%;
  background: #d7dad7;
  position: fixed;
  bottom: 0;
}

img.bannerText {
  max-height: 88px;
  position: absolute;
  top: 50%;
  left: 15%;
  transform: translateY(-50%);
}

img.expandButton {
  position: absolute;
  left: 40%;
  max-height: 32px;
  top: 62%;
}

img.divider, .mobileLandsDivider , .dividerLandscape{
  position: absolute;
  left: 20%;
  top: 21%;
  max-width: 21vw;
}
img.divider{
  display: none;
}
img.BannerRazor {
  max-height: 186px;
  position: absolute;
  right: 30%;
}

img.Shavegel {
  max-height: 70vh;
  max-width: 18vw;
}

img.shape {
  height: 15px;
  margin: 2px;
  border: 2px solid white;
  border-radius: 6px;
}

img.logo {
  max-height: 4.5vh;
  position: absolute;
  left: 5%;
  top: 94%;
}

img.ShavegelPlusIcon {
  height: 4vh;
  position: absolute;
  top: 50%;
  right: 18%;
}

.whiteShade {
  position: absolute;
  left: 24%;
  bottom: 12%;
  background: white;
  padding: 2px 7px;
  border-radius: 5px;
  display: flex;
}

img.RazorBladesExpanded {
  position: absolute;
  height: 25vh;
  top: 31%;
  cursor: pointer;
  left: 60%;
  z-index: 1;
  display: none;
}

.bladeWrap {
  position: absolute;
  max-width: 22vw;
  left: 79%;
  top: 25%;
}

img.BladeExpandedCopy {
  position: absolute;
  max-height: 20vh;
  top: -18vh;
  cursor: pointer;
  left: -21vh;
  z-index: 1;
  display: none;
}

.MinusIcon {
  display: none;
}

img.RazorHandleExpanded {
  position: absolute;
  height: 21vh;
  top: 45%;
  cursor: pointer;
  left: -45%;
  z-index: 1;
  display: none;
}

img.blade {
  max-height: 27vh;
  max-width: 13vw;
}

img.GelExpandedCopy {
  position: absolute;
  height: 21vh;
  top: 20%;
  cursor: pointer;
  left: 11%;
  z-index: 1;
  display: none;
}


img.TravelExpanded {
  position: absolute;
  height: 20vh;
  top: 40%;
  cursor: pointer;
  left: 90%;
  z-index: 1;
  display: none;
}

img.bladePlusIcon {
  height: 4vh;
  position: absolute;
  top: 9%;
  left: 16%;
}

.ShavegelWrap {
  position: absolute;
  max-width: 22vw;
  left: 72%;
  top: 41%;
}

img.OrangeRazorplusIcon1 {
  height: 4vh;
  position: absolute;
  top: 27%;
  right: 35%;
}

img.OrangeRazorplusIcon2 {
  position: absolute;
  height: 4vh;
  bottom: 24%;
  left: 5%;
}

.RazorProductWrap {
  position: absolute;
  max-width: 22vw;
  left: 54%;
  top: 17%;
}

img.RazorProduct {
  max-width: 22vw;
  max-height: 80vh;
}

img.posterImage {
  max-height: 38vh;
  position: absolute;
  max-width: 32vw;
  left: 5%;
  top: 43%;
}

img.travelPlusIcon {
  position: absolute;
  height: 4vh;
  top: 27%;
  cursor: pointer;
  right: 0px;
}

img.ctaRez {
  max-height: 5.5vh;
  position: absolute;
  left: 5%;
  top: 84%;
}

.travelProductWrap {
  position: absolute;
  max-width: 22vw;
  left: 50%;
  top: 0%;
}

img.travelProduct {
  max-height: 25vh;
}

img.newRZrText {
  max-height: 17vh;
  position: absolute;
  left: 5%;
  top: 5%;
  max-width: 36vw;
}

img.getRez {
  max-height: 15vh;
  position: absolute;
  left: 5%;
  top: 24%;
  max-width: 42vw;
}

img.logoBanner {
  max-height: 27px;
  position: absolute;
  right: 18%;
  bottom: 17%;
}

img.bannerDivider {
  position: absolute;
  bottom: 10%;
  max-width: 270px;
  left: 17.6%;
}

img.bannerClose,.videoClose,.resizedClose {
  max-height: 45px;
  right: 0;
  position: absolute;
  top: 0;
  cursor: pointer;
  z-index: 1;
}

.NewRazorText {
  display: none;
}

@media only screen and (orientation:landscape) and (min-width:2556px) {

  img.divider {
    left: 20%;
    max-width: 21vw;
  }

}

@media only screen and (orientation:portrait) {
  .rtopVideoPlayerWrapper .rtopVideoPlayer .rtopVideoHolder.hasFAIcons:after{
    background-size: 20%;
  }
  .bannerText {
    display: none;
  }img.divider{
    display: block;
  }
  .dividerLandscape{
    display: none;
  }

  img.NewRazorText {
    position: absolute;
    left: 5%;
    max-height: 57px;
    top: 17%;
    display: block;
  }

  img.expandButton {
    left: 31%;
    max-height: 25px;
    top: 65%;
  }

  img.bannerClose {
    max-height: 30px;
  }

  img.BannerRazor {
    right: 0;
    max-height: 135px;
    transform: rotate(-15deg);
    bottom: -5px;
  }

  img.bannerDivider {
    top: 54%;
    max-width: 150px;
    left: 32%;
  }

  img.logoBanner {
    left: 5%;
    max-height: 17px;
    bottom: 21%;
  }

  .desktop {
    display: none;
  }

  .tablet {
    display: block;
  }

}


@media only screen and (max-width:350px) and (orientation:portrait) {


  img.NewRazorText {
    max-height: 35px;
    top: 28%;
  }

  img.expandButton {
    left: 34%;
    max-height: 15px;
    top: 62%;
  }

  img.bannerClose {
    max-height: 30px;
  }

  img.BannerRazor {
    right: -8px;
    max-height: 123px;
    transform: rotate(-15deg);
    bottom: -5px;
  }

  img.bannerDivider {
    top: 51%;
    max-width: 95px;
    left: 31%;
  }

  img.logoBanner {
    left: 5%;
    max-height: 12px;
    bottom: 29%;
  }
}

@media only screen and (max-width:750px) and (orientation:landscape) {
  img.newRZrText.desktop {
    display: none;
  }

  img.bannerText {
    left: 5%;
    max-height: 50px;
    top: 50%;
  }

  .tabletLandscape {
    display: block;
  }

  img.bannerDivider {
    left: 9%;
    max-width: 154px;
    bottom: 17%;
  }

  img.logoBanner {
    right: 5%;
    max-height: 15px;
  }

  img.bannerClose {
    max-height: 30px;
  }

  img.expandButton {
    max-height: 18px;
    left: 46%;
  }

  img.BannerRazor {
    max-height: 117px;
    right: 14%;
    transform: rotate(-15deg);
    bottom: -25px;
  }

  .bottomBanner {
    height: 100px;
  }

  img.BannerRazor {
    max-height: 130px;
    right: 8%;
  }

}

@media only screen and (max-width:800px) and (orientation:landscape) {
  img.GelExpandedCopy {
    top: 2%;
    left: -25%;
  }
  img.divider{
    display: block;
  }
  .dividerLandscape{
    display: none;
  }
  img.logo {
    top: 78%;
    max-height: 3vh;
  }

  img.ctaRez {
    max-height: 4vh;
    top: 70%;
  }

  img.RazorHandleExpanded {
    left: -64%;
    top: 31%;
  }

  .RazorProductWrap {
    max-width: 50vw;
    left: 45%;
    top: 30%;
  }

  img.RazorProduct {
    max-width: 25vw;
  }

  img.divider {
    top: 21%;
  }

  img.newRZrText {
    top: 10%;
  }

}

@media only screen and (max-width:520px) and (orientation:landscape) {
  
  .tabletLandscape, .divider{
    display: none !important;
  }
  .mobileLandscape, .mobileLandsDivider {
    display: block;
  }
  img.divider {
    top: 24%;
    /* top: -6%; */
  }
  .mobileLandsDivider{
    top: 24%;
  }
  img.ctaRez {
    top: 78%;
  }

  img.getRez {
    top: 27%;
  }

  img.logo {
    top: 85%;
    max-height: 3vh;
  }

  img.GelExpandedCopy {
    top: 16%;
    left: -3%;
  }

  img.RazorHandleExpanded {
    top: 43%;
    left: -50%;
  }

  img.shape {
    height: 10px;
    border-width: 1px;
    margin: 1px;
    border-radius: 2px;
  }

  .whiteShade {
    padding: 2px;
    bottom: 9%;
  }

  img.bannerText {
    max-height: 40px;
  }

  img.resizedClose {
    max-height: 30px;
  }

  img.bannerDivider {
    max-width: 125px;
    bottom: 23%;
  }

  img.BannerRazor {
    max-height: 130px;
    right: 17%;
    bottom: -38px;
  }

  img.expandButton {
    max-height: 16px;
    left: 40%;
  }
}

@media only screen and (orientation:portrait) {
  img.BladeExpandedCopy {
    max-height: 16vh;
    top: -14vh;
    left: 27%;
  }

  img.divider {
    max-width: 51.4vw;
    right: 5%;
    left: auto;
    top: 22%;
  }

  img.bladePlusIcon {
    top: 5%;
    left: 7%;
  }

  img.ShavegelPlusIcon {
    left: 11%;
  }

  img.GelExpandedCopy {
    left: -82%;
    top: 5%;
  }

  img.RazorHandleExpanded {
    top: 33%;
    left: -62%;
  }

  img.travelPlusIcon {
    left: 0px;
  }

  img.TravelExpanded {
    left: -126%;
    height: 15vh;
  }

  .travelProductWrap {
    right: 8%;
    left: auto;
    top: 22%;
  }

  .RazorProductWrap {
    max-width: 50vw;
    top: auto;
    left: 45%;
    bottom: 0;
  }

  img.RazorProduct {
    max-width: 45vw;
  }

  .ShavegelWrap {
    top: auto;
    bottom: -10%;
    max-width: 50vw;
    left: auto;
    right: -14%;
  }

  img.Shavegel {
    max-width: 33vw;
  }

  img.logo {
    max-height: 2.5vh;
  }

  img.newRZrText {
    max-width: 90vw;
    top: 8%;
  }

  .bladeWrap {
    left: 16%;
    top: 76%;
    max-width: 53vw;
  }

  img.blade {
    max-width: 22vw;
    transform: rotate(150deg);
  }

  img.resizedClose {
    max-height: 32px;
  }

  img.ctaRez {
    top: 65%;
    max-height: 4vh;
  }

  img.posterImage {
    max-width: 55vw;
    top: 39%;
  }

  img.getRez {
    max-width: 73vw;
    top: 26%;
  }

  img.RazorBladesExpanded {
    height: 25vh;
    top: -14%;
    left: 3%;

  }

  .whiteShade {
    bottom: 10%;
  }

  img.OrangeRazorplusIcon1 {
    right: 27%;
    top: 29%;
  }

  img.shape {
    height: 12px;
    border-radius: 3px;
    border-width: 1px;
  }
}

@media only screen and (max-width:350px) and (orientation:portrait) {
  img.TravelExpanded {
    left: -166%;
  }
  .tablet {
    display: none;
}
  .mobile {
    display: block;
  }

  img.newRZrText {
    top: 11%;
  }

  img.RazorBladesExpanded {
    height: 25vh;
    top: -31%;
    left: -25%;
  }

  img.GelExpandedCopy {
    left: -79%;
    top: 7%;
    height: 15vh;
  }

  img.RazorHandleExpanded {
    top: 24%;
    left: -71%;
    height: 18vh;
  }

  .whiteShade {
    left: 24%;
    bottom: 9%;
    padding: 2px;
    border-radius: 4px;
  }

  img.shape {
    height: 10px;
    border-radius: 3px;
    margin: 1px;
    border-width: 1px;
  }

}