/* Animation */
@-webkit-keyframes 
pulsate {  0% {
 -webkit-transform: scale(1);
 transform: scale(1);
 opacity: 0.8;
}
 45% {
 -webkit-transform: scale(1.75);
 transform: scale(1.75);
 opacity: 0;
}
}
@keyframes 
pulsate {  0% {
 -webkit-transform: scale(1);
 transform: scale(1);
 opacity: 0.8;
}
 45% {
 -webkit-transform: scale(1.75);
 transform: scale(1.75);
 opacity: 0;
}
}


body, html {

  height: 100%;
  margin: 0;
font-family: CustomRegFont, CustomBoldFont, CustomMediumFont ;
display:block !important
  /* overflow: hidden; */
  
}
@font-face { font-family: EatonRegularFont; src: url('../vendor/fonts/EatonReg.otf'); } 
 @font-face { font-family: EatonMediumFont; src: url('../vendor/fonts/EatonMed.otf');}
 @font-face { font-family: EatonBoldFont; src: url('../vendor/fonts/EatonBol.otf');}


 .load2{
  position: absolute;
  z-index: 9999;
  top: 47%;
  left: 46%;
  font-size: 25px;
  color: coral;
  text-align: center;
  width: 8%;
}
.load3{
  position: absolute;
    z-index: 9999;
    top: 70%;
    left: 0;
    font-size: 15px;
    color: coral;
    text-align: center;
    width: 100%;
}

.load4{
  position: absolute;
    z-index: 9999;
    top: 30%;
    left: 0;
    font-size: 15px;
    color: coral;
    text-align: center;
    width: 100%;
}

.hi-light{
  font-family: EatonMediumFont;
  font-size: 22px;
  font-weight: bolder;
}

.para{
  font-family: EatonMediumFont;
  font-size: 21px;
  
  /* letter-spacing: 1px; */
}

#return{
  top: 0px;z-index: 999;font-family: EatonRegularFont;font-size: 32px;background-color:#ff8e00;border: none;width: 11em; 
}

#replay_Button{
  margin-left: 4em;
  padding: 0px;
  position: absolute;
  top: 21em;
}
/* #replay_btn{
top: 0px;z-index: 999;font-family: EatonRegularFont;font-size: 32px; outline-style: none;background-color:#0059b7;padding: 2px 11px;

} */

#replay_btn{
  top: 0px;
    z-index: 999;
    font-family: EatonRegularFont;
    font-size: 32px;
    background-color: #005eb8;
    border: none;
    width: 11em;
}
#replay_btn > .i
{
 font-size: 32px;
}
.topnav {
  overflow: hidden;
  background-color: #005eb8;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

  

  
/* Hotspot */
.logo{
	display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
}

.title{
   font-family: EatonBoldFont;
   color: #0059b7;
   padding-left: 55px;
   font-size: 52px;
   position: absolute;
    width: 10em;
}

.logo-image{
    margin-top: 20px;
}

.img-responsive{
  height: 100px;
  background-size: 100% 100%;
}
.img-action{
  position: absolute;bottom: 8px;right: 25%;
  background-size: 100% 100%;
}

.footer {
    position:fixed;
    bottom :0;
    width: 100%;
    background-color:var(--grey-primary-brand-color,#333f48);
    background-color: rgb(51, 63, 72);
    color: white;
    text-align: center;
    font-weight: lighter;
    font-size: smaller;
    padding: 12px 0;
  }

.footer ul li{
  display: inline;
  text-align:center;

}
#hotspotImg {
  
  background-size: cover;
  background-position: center center;
  position: relative;
}

#hotspotImg .img-responsive { max-width: 100%; }

#hotspotImg .hot-spot {
  position: absolute;
  width: 20px;
  height: 20px;
  text-align: center;
  /* background-color: #0059B6; */
  background-color: #ff8e00;
  color: #fff;
  border-radius: 100%;
  cursor: pointer;
  transition: all .3s ease;
}

#hotspotImg .hot-spot > span{
  position: relative;
  top:-2px;
}

#hotspotImg .hot-spot .circle {
  display: block;
  position: absolute;
  top: 45%;
  left: 45%;
  width: 2em;
  height: 2em;
  margin: -1em auto auto -1em;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  border-radius: 50%;
  /* border: 2px solid  #0059B6; */
  border: 2px solid  #ff8e00;
  opacity: 0;
  -webkit-animation: pulsate 3s ease-out infinite;
  animation: pulsate 2s ease-out infinite;
 
}

.circle:hover{
color: #4CAF50;
 background-color: #4CAF50;   
}

/* .circle:hover {
 background-color: #4CAF50;
} */
@keyframes blinkingText{
  0%{     color: #000;    }
  49%{    color: transparent; }
  50%{    color: transparent; }
  99%{    color:transparent;  }
  100%{   color: #000;    }
}


.tooltip {
  background-color:#0059b7;
  background-color:rgba(0, 89, 183, 1);
  animation: true;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
  display: none;
  font-size: 12px;
  opacity: 1.0;
  padding: 5px;
  position: relative;
  text-align: left;
  z-index: 999;
   top: 0em;
left: 0em;
max-width: 100%;
  
 
}




#hotspotImg .hot-spot  .slideshow-container {
 
  /* position: fixed; */
  z-index: 999;

    max-width: 1000px;
    position: absolute;
    margin: auto;

  /* margin : 0;
  
  padding: 10px; */
  
}

.try1{
  margin-bottom: 129px;
}


.header {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

.content {
  padding: 16px;
}



.mySlides3 img {
  animation-name: eye-fill;
  animation-duration: 1.3s;
  animation-timing-function: steps(17);
  animation-iteration-count: infinite;
}



* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
.mySlides2 {display: none;} 
.mySlides3 {display: none;z-index: -1;} 
.mySlides4 {display: none;z-index: -1;}
.mySlides6 {display: none;z-index: -1;}
.mySlides7 {display: none;}
img {vertical-align: middle;}

/* Slideshow container */


/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.container > div > img {  
  width: 100%;  
  height: 100%;  
  object-fit: cover;  
}
   

  .paddingTop32PX{
	padding-top:32px;
  }
  
#leverage{
  position: absolute;
    bottom: 102px;
    float: right;
    right: 0;
}
  .paddingTop102PX{
    padding-top:35%;
    
   
    }

    #close {
      position: absolute !important;
    /* right: 0; */
    left: 26em;
    top: 11em;
    z-index: 999;
    background-color: #0059b7;
      /* position: absolute !important;
      left: 18em;
      top: 11em;
      z-index: 999;
      background-color: #0059b7; */
  
  }
  .closeBtn{
	  /* position: absolute !important; */
	  right: 0;
    z-index: 999;
    background-color: #0059b7;
 
  }

  .closeBtn > .btn {
    flex: none !important;
    right: 0;
    position: absolute !important;
    
  }

  .closeBtn1 > .btn {
	  /* position: absolute !important; */
	  right: 0;
    z-index: 999;
    outline: none;
  }




  #tooltip0{
    margin-top: 20px;
    left: 14em;
    position: absolute;
  }


  #clicker_hotspot{
    position: absolute;
    right: -13em;
    top: 17em;
    width: 39em;
      
  }

  #clicker_hotspot > p{
    font-family: EatonRegularFont;
    color: white;
    position: absolute;
    font-size: 30px;
    background-color: #ff8e00;
   padding : 7px;
  }

 
@media only screen and (max-width: 575px) and (min-width: 300px) {
  .tooltip{
      top: 14em;
      /* margin-bottom: 10px; */
      
    }

  

    .img-action{
      right: 0;
      width: 50%;
      height: auto;
    }

 
    
   .title{
    font-family: EatonBoldFont;
    color: #0059b7;
    padding-left: 55px;
    font-size: 26px;
    position: unset;
    width: auto;
   }
    .paddingTop102PX{
     
     bottom :10px;  
    }
    

    .adjust1{
      margin:  1.1% 1% -3% -1.1%;
       width: 98%;
    }

    #close{
      top :0em;
      left: 0em;
    }
    #return{
     
      z-index: 999;
      font-family: EatonRegularFont;
      font-size: 14px;
      background-color: #ff8e00;
      border: none;
      width: 13em;
    }
    #replay_btn{
      /* top: 0px;z-index: 999;font-family: EatonRegularFont;font-size: 14px; outline-style: none;background-color:#0059b7;padding: 2px 11px; */
      top: 0px;
      z-index: 999;
      font-family: EatonRegularFont;
      font-size: 14px;
      outline-style: none;
      background-color: #0059b7;
      padding: 4px 0.2px;
      width: 9em;
      
      }

      #replay_btn > .i
{
 font-size: 14px;
}
      #replay_Button{
        position: absolute !important;
        margin-left: 1em! important;
        top: 100%;
        left: -1em;

      }
      

.hi-light{
  font-family: EatonMediumFont;
  font-size: 18px;
  font-weight: bolder;
}

.para{
  font-family: EatonMediumFont;
  font-size: 15px;
  
  /* letter-spacing: 1px; */
}
.tooltip{
    top: 1em;
    left: 0;
  }

  .title{
    font-family: EatonBoldFont;
    color: #0059b7;
    padding-left: 3em;
    font-size: 25px;
    position: unset;
    width: auto;
   }
  
  #clicker_hotspot{
    left: 19%;
    bottom: -2em;
    width: 16em;
    top: 12em;
   }
   #clicker_hotspot > p{
    font-family: EatonRegularFont;
    color: white;
    background-color: #ff8e00;
   font-size: 12px; 
  }
 #leverage{
   bottom: 65px;
 }

  .img-responsive{
    width: 100%;
    height: auto;

  }
  .size1{
    margin: 2.1% 2% -2% -1.1%; width: 100%;
  }

  .size2{
    margin: 0.1% 0% -2% -3.1%;
    width: 100%;
  }

  .size4{
    margin: 0.1% 0% 0% -2%;
    width: 100%;
  }
 

  .img-action{
    position: absolute;
    bottom: 58px;
    width: 27%;
    right: 0em;
  }


  }



  @media only screen and (max-width: 767px) and (min-width: 576px) {
    .tooltip{
        top: 25em;
        left: 0;
      }
      
      #return {
        top: 0px;
        z-index: 999;
        font-family: EatonRegularFont;
        font-size: 12px;
        background-color: #ff8e00;
        border: none;
     
      }

      #replay_Button {
        margin-left: 4em;
        padding: 0px;
        position: absolute;
        /* top: 21em; */
    }
  
        #replay_btn > .i
          {
               font-size: 14px;
                }
      #close{
        top :0em;
        left: 0em;
      }

      .col-sm-3 {
      max-width: 0;
      }
      #clicker_hotspot{
        left: 25%;
        bottom: 0em;
        width: auto;
        top :10em;
       }
    
       #clicker_hotspot > p{
        font-family: EatonRegularFont;
        color: white;
        background-color: #ff8e00;

       font-size: 16px; 
      }
        
      .img-action{
        position: absolute;
        bottom: 1em;
        width: 58%;
        right: 0em;
    }
      .title {
        font-family: EatonBoldFont;
        text-align: center;
        color: #0059b7;
        /*padding-left: 3em;*/
        font-size: 25px;
        position: unset;
        width: auto;
    }
    }

    

@media only screen and (max-width: 900px) and (min-width: 768px) {
.tooltip{
		top: 0em;
    left: 0;
   
  }
  #close{
    position: absolute !important;
    /* right: 0; */
    left: 46em;
    top: 0em;
    z-index: 999;
    background-color: #0059b7;

}

  #img-fluid .default_1{
  margin: 3.9% 1% -3% 1.4%;
  }
  #leverage{
    bottom: 0px;
  }
  #return{
    top: 0px;
    z-index: 999;
    font-family: EatonRegularFont;
    font-size: 14px;
    background-color: #ff8e00;
    border: none;
    width:13em;
  }
  #replay_btn{
    /* top: 0px;z-index: 999;font-family: EatonRegularFont;font-size: 14px; outline-style: none;background-color:#0059b7;padding: 2px 11px; */
    top: 0px;
    z-index: 999;
    font-family: EatonRegularFont;
    font-size: 14px;
    outline-style: none;
    background-color: #0059b7;
    padding: 4px 0.2px;
    width: 9em;
    
    }

    
    #replay_btn > .i
    {
     font-size: 14px;
    }
    #replay_Button{
      position: absolute !important;
      margin-left: 1em! important;
      top: 100%;
      left: 0em;

    }
  .img-responsive{
    width: 190%;
    height: 92px;

  }
  #clicker_hotspot{
    left: 25%;
   
    width: 49%;
    top: 10em;
   }

   #clicker_hotspot > p{
    font-family: EatonRegularFont;
    color: white;
    background-color: #ff8e00;
   font-size: 18px; 
  }
   .title{
    font-family: EatonBoldFont;
    color: #0059b7;
    padding-left: 0;
    text-align: center;
    font-size: 28px;
    position: unset;
    width: auto;
   }

   .img-action{
    position: absolute;
    bottom: 122px;
    width: 100%;
    right: 4em;
}
   
}

@media only screen and (max-width: 991px) and (min-width: 901px) {

  #clicker_hotspot{
    left: 28%;
    bottom: 0em !important;
    width: auto;
   }

   #clicker_hotspot > p{
    font-family: EatonRegularFont;
    color: white ;
    background-color: #ff8e00;
   font-size: 20px !important; 
  }


    #leverage{
      bottom: 7px;
    }
  
    .img-responsive{
      width: 190%;
      height: 92px;
  
    }

   
      
     .title{
      font-family: EatonBoldFont;
      color: #0059b7;
      padding-left: 0;
      font-size: 39px;
      position: unset;
      width: auto;
      text-align: center;
     }

     .img-action{
      position: absolute;
      bottom: 111px;
      right: 36%;
      width: 100%;
     }
}


@media only screen and (max-width: 1280px) and (min-width: 992px) {

    #leverage{
      bottom: 7px;
    }
  
    .img-responsive{
      width: 190%;
      height: 92px;
  
    }

    #clicker_hotspot{
      left: 2em;
      bottom: 9em;
      width: 24em;
      top: 12em;
     }
  
     #clicker_hotspot > p {
      font-family: EatonRegularFont;
      color: white;
      background-color: #ff8e00;
      font-size: 17px;
  }

  #close {
    position: absolute !important;
    /* right: 0; */
    left: 17em;
    top: 6em;
    z-index: 999;
    background-color: #0059b7;
}
  #return {
    top: 0px;
    z-index: 999;
    font-family: EatonRegularFont;
    font-size: 17px;
    background-color: #ff8e00;
    border: none;
    width: 12em;
}
#replay_Button{
  top:15em;
}

#replay_btn {
  top: 0px;
  z-index: 999;
  font-family: EatonRegularFont;
  font-size: 15px;
  background-color: #005eb8;
  border: none;
  width: 12em;
}


#replay_btn > .i
{
 font-size: 17px;
}
     .title{
      font-family: EatonBoldFont;
      color: #0059b7;
      padding-left: 55px;
      font-size: 26px;
      position: absolute;
      width: 10em;
     }

     .img-action{
      position: absolute;
      bottom: 111px;
      right: 36%;
      width: 100%;
     }
  
  }


  @media only screen and (max-width: 1799px) and (min-width: 1281px) {

    #leverage{
      bottom: 7px;
    }
  
    .img-responsive{
      width: 190%;
      height: 92px;
  
    }
    #replay_Button{
      top:16em;
      margin-left: 5em;;
    }

    #clicker_hotspot{
      right: 0;
      bottom: 9em;
      width: 24em;
      left: 3em;
      top: 13em;
     }
  
     #close {
      position: absolute !important;
      /* right: 0; */
      left: 17em;
      top: 7em;
      z-index: 999;
      background-color: #0059b7;
  }

  #replay_btn {
    top: 0px;
    z-index: 999;
    font-family: EatonRegularFont;
    font-size: 15px;
    background-color: #005eb8;
    border: none;
    width: 12em;
  }
  
  
  #replay_btn > .i
  {
   font-size: 17px;
  }
     #clicker_hotspot > p{
      font-family: EatonRegularFont;
      color: white;
      background-color: #ff8e00;
      font-size: 17px;
    }
    #return {
      top: 0px;
      z-index: 999;
      font-family: EatonRegularFont;
      font-size: 17px;
      background-color: #ff8e00;
      border: none;
      width: 12em;
  }
      
     .title{
      font-family: EatonBoldFont;
      color: #0059b7;
      padding-left: 55px;
      font-size: 35px;
      position: absolute;
      width: 10em;
     }

     .img-action{
      position: absolute;
      bottom: 111px;
      right: 36%;
      width: 22em;
     }
  
  }

  @media only screen and (max-width: 3000px) and (min-width: 1800px) {
    .img-action{
      position: absolute;
      bottom: 6px;
      right: 20%;
     }
     #clicker_hotspot > p{
      font-family: EatonRegularFont;
      color: white;
      background-color: #ff8e00;
   
    }
  
  }



.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../images/ajax-loader.gif) center no-repeat #fff;
}

.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.test1 {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../images/SWBD_Front_View.png) center no-repeat #fff;
}