/* unitPlan */
#unitPlan {
    width: 270px;
    height: auto;
    margin:10px;
    margin-top: 40px;
    float: right;
    opacity: 0.5;
  }
  
  #unitPlan img {
    max-width:100%;
    display: block;
  }
  
  .point {
    width:30px;
    height:30px;
    background-image:   url(https://tookteecomhome.files.wordpress.com/2019/02/mappoint.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
  }
  
  .pointActive {
    background-image:   url(https://tookteecomhome.files.wordpress.com/2019/02/mappointactive.png);
  }
  
  
  #pin-1 {
    top: 170px;
    right: 50px;
    bottom: auto;
    opacity: 0.6;
    position: absolute;
  }
  
  #pin-2 {
    top:95px;
    right:50px;
    opacity: 0.6;
    position: absolute;
  }
  
  #pin-3 {
    top:120px;
    right:125px;
    opacity: 0.6;
    position: absolute;
  }
  #pin-4 {
    top:115px;
    right:210px;
    opacity: 0.6;
    position: absolute;
  }
  #pin-5 {
    top:80px;
    right:210px;
    opacity: 0.6;
    position: absolute;
  }
  #pin-6 {
    top:170px;
    right:200px;
    opacity: 0.6;
    position: absolute;
  }
  
  @media screen and (min-width: 320px) and (max-width:568px) {
    #unitPlan {
      width: 150px;
      height: auto;
      margin-right:10px;
      margin-top: 55px;
      float: right;
      opacity: 0.5;
    }
  
    #unitPlan img {
      max-width:100%;
      display: block;
    }
    
    .point {
      width:20px;
      height:20px;
      background-image: url(https://tookteecomhome.files.wordpress.com/2019/02/mappoint.png);
      background-position: top center;
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
    }
    .pointActive {
      background-image: url(https://tookteecomhome.files.wordpress.com/2019/02/mappointactive.png);
    }
  
    #pin-1 {
        top: 124px;
        right: 35px;
        bottom: auto;
        opacity: 0.6;
        position: absolute;
      }
      
      #pin-2 {
        top:75px;
        right:32px;
        opacity: 0.6;
        position: absolute;
      }
      
      #pin-3 {
        top:98px;
        right:73px;
        opacity: 0.6;
        position: absolute;
      }
      #pin-4 {
        top:98px;
        right:120px;
        opacity: 0.6;
        position: absolute;
      }
      #pin-5 {
        top:75px;
        right:120px;
        opacity: 0.6;
        position: absolute;
      }
      #pin-6 {
        top:125px;
        right:115px;
        opacity: 0.6;
        position: absolute;
      }
  }
  
  
  .pin-1:hover > #pin-1 {
    opacity: 1;
  }
  
  .pin-2:hover > #pin-2 {
    opacity: 1;
  }
  
  .pin-3:hover > #pin-3 {
    opacity: 1;
  }
  
  
  /* toggledeviceOrientation */
  
  #toggleDeviceOrientation {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0px;
    left: 40px;
    background-color: rgb(103,115,131);
    background-color: rgba(103,115,131,0.8);
  }
  
  #toggleDeviceOrientation img {
    width: 25px;
    margin: 8px;
  }
  
  #toggleDeviceOrientation .disable {
    display: none;
  }
  
  #toggleDeviceOrientation.enabled .disable {
    display: block;
  }
  
  #toggleDeviceOrientation.enabled .enable {
    display: none;
  }
  
  @media screen and (max-width: 500px) {
    #toggleDeviceOrientation {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 0px;
      left: 50px;
      background-color: rgb(103,115,131);
      background-color: rgba(103,115,131,0.8);
    }
    #toggleDeviceOrientation img {
      width: 30px;
      margin: 8px;
    }
  }