div {
    position: absolute;
}
.closed{
    display:none;
}
.close{
    right: 0.5%;
    top: 1%;
    width: 2%;
    cursor:pointer;
    z-index: 99;
}
.endFrame{
    width: 100%;
    height: 100%;
    background: url('../images/endFrameBG.jpg') no-repeat center center; 
    background-size: cover;
}
.EndFrameText{
    width: 50%;
    left: 25%;
    top: 0%;
}
.FIDLogo{
    width: 28%;
    left: 36%;
    bottom: 5%;
}
.first-frame{
    width: 100%;
    height: 100%;
}
.startFrameBG{
    width: 100%;
    height: 100%;
    background: url('../images/startFrameBG.jpg') no-repeat center center; 
    background-size: cover;
}
.menImage{
    width: 65%;
    height: 96%;
    top: 5%;
}
.tagLineText{
    width: 80%;
    left: 10%;
    top: 5%;
    display:block;
}
.NeedText{
    width: 30%;
    right: 10%;
    top: 24%;
}
.FindText{
    width: 30%;
    right: 10%;
    top: 30%;
}
.ClickText{
    width: 22%;
    right: 16%;
    bottom: 6%;
    display:block;
}
.ClickArrow{
    width: 9%;
    right: -10%;
    bottom: 15%;
}
.portClickText{
    display:none;
}

.swiper-button-prev{
    display:none;
}
.disable{
    opacity:0.5;
    pointer-events:none !important;
}

@font-face {
    font-family: "Digital-7";
    src: url("../images/digital-7.woff");
    font-weight: normal;
    font-style: normal;
}

/* Pulse */
.pulse {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    left:0%;
    background:#3daf2c;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(33,255,3, 0.5);
    animation: pulse 2s infinite;
}
.pulse::after {
    content: " ";
    position: absolute;
    display: block;
    background-color: #fff;
    height:3px;
    top: 50%;
    transform: translateY(-50%);
    left: 5px;
    right: 5px;
    z-index: 9;
}
.pulse::before {
    content: " ";
    position: absolute;
    display: block;
    background-color: #fff;
    width:3px;
    left: 50%;
    transform: translateX(-50%);
    top: 5px;
    bottom: 5px;
    z-index: 9;
}
.pulse:hover {
    animation: none;
}

@-webkit-keyframes pulse {
    0% {
    -webkit-box-shadow: 0 0 0 0 rgba(33,255,3, 0.5);
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(33,255,3, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(33,255,3, 0);
    }
}
@keyframes pulse {
    0% {
    -moz-box-shadow: 0 0 0 0 rgba(33,255,3, 0.5);
    box-shadow: 0 0 0 0 rgba(33,255,3, 0.5);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(33,255,3, 0);
        box-shadow: 0 0 0 10px rgba(33,255,3, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(33,255,3, 0);
        box-shadow: 0 0 0 0 rgba(33,255,3, 0);
    }
}
/* Pulse */

img {
    width: 100%; 
    height: auto;
}
.main-container{
    width: 100%; 
    height: 100%;
    background: #aaa;
}

.Slide1Grey{
    width: 100%;
    height: 100%;
    background: url('../images/slide1GreyBG.jpg') no-repeat center center; 
    background-size: cover;
}

.Slide1Img{
    width: 100%; 
    height: 100%;
    background: url('../images/slide1BG.jpg') no-repeat center center; 
    background-size: cover;
}

.Slide2Grey{
    width: 100%; 
    height: 100%;
    background: url('../images/slide2GreyBG.jpg') no-repeat center center; 
    background-size: cover;
}

.Slide2Img{
    width: 100%; 
    height: 100%;
    background: url('../images/slide2BG.jpg') no-repeat center center; 
    background-size: cover;
}

.Slide3Grey{
    width: 100%; 
    height: 100%;
    background: url('../images/slide3GreyBG.jpg') no-repeat center center; 
    background-size: cover;
}

.Slide3Img{
    width: 100%; 
    height: 100%;
    background: url('../images/slide3BG.jpg') no-repeat center center; 
    background-size: cover;
}

.DuctHotspot, .InductiveHotspot, .HVACHotspot, .HeaterHotspot {
    z-index: 99;
}
.DuctHotspot{
    width: 3%;
    top: 41%;
    left: 31%;
}
.DuctHotspotText{
    width: 20%;
    top: 28%;
    left: 23%;
}
.InductiveHotspot{
    width: 3%;
    top: 24%;
    left: 59%;
}
.InductiveHotspotText{
    width: 20%;
    top: 12%;
    left: 60%;
}

.HVACHotspot{
    width: 3%;
    top: 30%;
    left: 34%;
}
.HVACHotspotText{
    width: 24%;
    top: 10%;
    left: 24%;
}

.HeaterHotspot{
    width: 3%;
    top: 34%;
    left: 64%;
}
.HeaterHotspotText{
    width: 25%;
    top: 36%;
    left: 58%;
}

.Footer{
    width: 100%; 
    height: 20%;
    bottom: 0;
    position: absolute;
    z-index: 9;
}

.Score{
    top: -50%;
    width: 600px;
    height: 300px;
    left: 0;
    right: 0;
    margin: 0 auto;
    position: absolute;
    background-color: #3fb1c8;
    border-top-left-radius: 600px;
    border-top-right-radius: 600px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.savings-label{
  width: 40%;
  left: 28%;
  right: 0;
  top: 8.5%;
}
.savings-total{
    font-family: "Digital-7";
    font-size: 52px;
    color: #efeb3b;
    width: 100%;
    left: 53%;
    top: 13%;
}


.logo{
    width: 25%; 
    top: 50%; 
    transform: translateY(-50%);
    left: 22%;
}
.Cta{
    width: 25%; 
    top: 50%; 
    transform: translateY(-50%);
    left: 52%;
    pointer-events: auto !important;
}
.FooterShape{
    width: 100%;
    bottom: 0;
    background-color: #007298;
    height: 70%;
}

.swiper-container{
    width: 100% !important;
    height: 100% !important;
}
.swiper-button-next > img , .swiper-button-prev > img {
    width: 35px !important;
}
.swiper-button-next, .swiper-button-prev {
    background-image: none;
    top: 50%;
    margin-top: 0;
    outline: none;
    color: transparent;
    flex-direction: column;
}
.swiper-button-next{ right: 2% !important; }
.swiper-button-prev{ left: 1% !important; }
.porttagLineText{
    display:none;
}


/* Tab Land */
  @media only screen and (max-width: 533px) and (max-width: 533px) {
   
    .close{
        width: 3%;
    }
    .pulse {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      left:0%;
      background:#3daf2c;
      cursor: pointer;
      box-shadow: 0 0 0 rgba(33,255,3, 0.5);
      animation: pulse 2s infinite;
  }
    .EndFrameText {
        width: 50%;
        left: 25%;
        top: 14%;
    }
    .FIDLogo {
        width: 28%;
        left: 35%;
        bottom: 27%;
    }    
    .startFrameBG {
        width: 100%;
        height: 100%;
        background: url(../images/startFrameBG.jpg) no-repeat 25% 100%;
        background-size: 128%;
    }
    .Score {
      left: -45px;
      top: -65%;
    }
    .savings-label{
        width: 35%;
        left: 30%;
        right: 0;
        top: 5%;
    }
    .savings-total {
        font-family: "Digital-7";
        font-size: 46px;
        color: #efeb3b;
        width: 100%;
        left: 53%;
        top: 9%;
    }
    .HVACHotspotText {
      width: 24%;
      top: 18%;
      left: 24%;
  }
  .DuctHotspotText {
    width: 20%;
    top: 34%;
    left: 23%;
  }
  .InductiveHotspotText {
    width: 20%;
    top: 15%;
    left: 60%;
  }
  .HeaterHotspotText {
      width: 25%;
      top: 38%;
      left: 58%;
    }
    .ClickText {
      width: 36%;
      right: 12%;
      bottom: 6%;
      display: block;
  }   
}
  /* Mobile landscape */
  @media only screen and (max-width: 458px) and (max-width: 458px) {
    .Score {
            left: -71px;
            top: -80%;
    }
    .savings-label{
      width: 27%;
      left: 34%;
      right: 0;
      top: 5%;
    }
    .savings-total {
        font-family: "Digital-7";
        font-size: 38px;
        color: #efeb3b;
        width: 100%;
        left: 51%;
        top: 7%;
    }
    .EndFrameText {
        width: 50%;
        left: 25%;
        top: 7%;
    }
    .FIDLogo {
        width: 28%;
        left: 36%;
        bottom: 14%;
    }
    .FooterShape {
        width: 100%;
        bottom: -8%;
    }
    .HVACHotspotText {
      width: 24%;
      top: 15%;
      left: 24%;
    }
  .DuctHotspotText {
    width: 20%;
    top: 31%;
    left: 23%;
  }
  .InductiveHotspotText {
    width: 20%;
    top: 12%;
    left: 60%;
  }
  .HeaterHotspotText {
    width: 25%;
    top: 40%;
    left: 58%;
    }

}
/* Tab Potrait */
@media only screen and (min-width: 400px) and (max-width: 400px) {
    .close{
        right: 0.5%;
        top: 1%;
        width: 4%;
        cursor:pointer;
        z-index: 999;
    }
    .closeBtn img {
        width: 70%;
        left: 30%;
      }
      .startFrameBG {
        width: 100%;
        height: 100%;
        background: url(../images/startFrameBG.jpg) no-repeat 25% 100%;
        background-size: 204%;
    }
      .Slide1Grey{
        background: url('../images/slide1GreyBG_1.jpg') no-repeat center center; 
        background-size: cover;
      }
      .Slide1Img{
        background: url('../images/slide1BG_1.jpg') no-repeat center center; 
        background-size: cover;
      }
      .Slide2Grey{
        background: url('../images/slide2GreyBG_1.jpg') no-repeat center center; 
        background-size: cover;
      }
      .Slide2Img{
        background: url('../images/slide2BG_1.jpg') no-repeat center center; 
        background-size: cover;
      }
      .Slide3Grey{
        background: url('../images/slide3GreyBG_1.jpg') no-repeat center center; 
        background-size: cover;
      }
      .Slide3Img{
        background: url('../images/slide3BG_1.jpg') no-repeat center center; 
        background-size: cover;
      }
    
      .DuctHotspot{
        width: 7%;
        top: 30%;
        left: 24%;
      }
      .DuctHotspotText{
        width: 55%;
        top: 26.5%;
        left: 28%;
      }
      .InductiveHotspot{
        width: 7%;
        top: 55%;
        left: 57%;
      }
      .InductiveHotspotText{
        width: 50%;
        top: 56.5%;
        left: 37%;
      }
    
      .HVACHotspot{
        width: 7%;
        top: 57%;
        left: 35%;
      }
      .HVACHotspotText{
        width: 44%;
        top: 59%;
        left: 19%;
      }
    
      .HeaterHotspot{
        width: 7%;
        top: 53%;
        left: 60%;
      }
      .HeaterHotspotText{
        width: 50%;
        top: 55%;
        left: 41%;
      }
      
      .logo{
        width: 40%;
        left: 6%;
      }
      .Cta{
        width: 40%;
        left: 54%;
      }
      .FooterShape{
        background-color: #0e6a8a;
      }
      
      .Score {
        width: 250px;
        height: 200px;
        top: -23%;
        left: -9px;
      }
      .savings-total {
        font-size: 38px;
        left: 53%;
        top: 12%;
      }
      .savings-label {
        width: 56%;
        left: 18%;
        right: 0;
        top: 10%;
      }
      .tagLineText{
          display:none;
      }
      .porttagLineText{
            display:block;
            width: 70%;
            left: 17%;
            top: 4%;
      }
      .menImage {
        width: 90%;
        height: 96%;
        top: 25%;
      }
      .NeedText {
        width: 45%;
        right: 29%;
        top:14%;
      }
      .FindText {
        width: 60%;
        right: 21%;
        top: 18%;
      }
      .ClickText{
        display:none;
    }
    .portClickText{
            display: block;
            width: 60%;
            right: 23%;
            bottom: 1%;
    }
      .ClickArrow{
        width: 9%;
        right: -10%;
        bottom: 15%;
    }
    .EndFrameText {
        width: 85%;
        left: 9%;
        top: 19%;
    }
    .FIDLogo {
        width: 65%;
        left: 19%;
        bottom: 25%;
    }
 
}
/* Mobile Portrait*/
@media only screen and (min-width: 257px) and (max-width: 257px) {
    .close{
        right: 0.5%;
        top: 1%;
        width: 4%;
        cursor:pointer;
        z-index: 999;
    }
    .closeBtn img {
        width: 70%;
        left: 30%;
      }
      .startFrameBG {
        width: 100%;
        height: 100%;
        background: url('../images/startFrameBG.jpg') no-repeat 25% 100%;
        background-size: 292%;
    }
      .Slide1Grey{
        background: url('../images/slide1GreyBG_1.jpg') no-repeat center center; 
        background-size: cover;
      }
      .Slide1Img{
        background: url('../images/slide1BG_1.jpg') no-repeat center center; 
        background-size: cover;
      }
      .Slide2Grey{
        background: url('../images/slide2GreyBG_1.jpg') no-repeat center center; 
        background-size: cover;
      }
      .Slide2Img{
        background: url('../images/slide2BG_1.jpg') no-repeat center center; 
        background-size: cover;
      }
      .Slide3Grey{
        background: url('../images/slide3GreyBG_1.jpg') no-repeat center center; 
        background-size: cover;
      }
      .Slide3Img{
        background: url('../images/slide3BG_1.jpg') no-repeat center center; 
        background-size: cover;
      }
    
      .DuctHotspot{
        width: 7%;
        top: 30%;
        left: 24%;
      }
      .DuctHotspotText{
        width: 55%;
        top: 26.5%;
        left: 28%;
      }
      .InductiveHotspot{
        width: 7%;
        top: 55%;
        left: 57%;
      }
      .InductiveHotspotText {
        width: 50%;
        top: 57.5%;
        left: 37%;
    }
    
      .HVACHotspot{
        width: 7%;
        top: 57%;
        left: 35%;
      }
      .HVACHotspotText {
        width: 44%;
        top: 60%;
        left: 19%;
    }
    
      .HeaterHotspot{
        width: 7%;
        top: 53%;
        left: 60%;
      }
      .HeaterHotspotText{
        width: 50%;
        top: 56%;
        left: 41%;
      }
      
      .logo{
        width: 40%;
        left: 6%;
      }
      .Cta{
        width: 40%;
        left: 54%;
      }
      .FooterShape{
        background-color: #0e6a8a;
      }
      
      .Score {
        width: 250px;
        height: 200px;
        top: -29%;
        left: -9px;
      }
      .savings-total {
        font-size: 38px;
        left: 51%;
        top: 12%;
      }
      .savings-label {
        width: 60%;
        left: 15%;
        right: 0;
        top: 9%;
      }
      .tagLineText{
          display:none;
      }
      .porttagLineText{
            display:block;
            width: 70%;
            left: 17%;
            top: 4%;
      }
      .menImage {
        width: 90%;
        height: 96%;
        top: 25%;
      }
      .NeedText {
        width: 45%;
        right: 29%;
        top:14%;
      }
      .FindText {
        width: 60%;
        right: 21%;
        top: 18%;
      }
      .ClickText{
        display:none;
    }
    .portClickText{
            display: block;
            width: 60%;
            right: 23%;
            bottom: 1%;
    }
      .ClickArrow{
        width: 9%;
        right: -10%;
        bottom: 15%;
    }
    .EndFrameText {
        width: 85%;
        left: 9%;
        top: 19%;
    }
    .FIDLogo {
        width: 65%;
        left: 19%;
        bottom: 35%;
    }

}