/*Heat Map*/
.heatMap {
   position: relative;
   ul.time{
      margin:10px 0;
      a{
         color: @bg_type;
         padding: 5px 25px;
         font-size: 12px;
         text-decoration: none;
         display: block;
         &:hover, &.active, &:focus{
            background: @color02;
            color: @color01_h_type;
            text-decoration: none;
         }
      }
   }
   .fields{
      margin: 50px 0;
      .col-right{
         &:after{
            .G_divider;  
            height:100%;      
            top:0; 
         }
      }
      .arrow-left{
         width: 0px;
         height: 0px;
         border-style: solid;
         border-width: 20px 0 20px 34.6px;
         border-color: transparent transparent transparent @bg_dest_type;
         margin: 8px 0 38px 30px;
      }
      .arrow-right{
         width: 0px;
         height: 0px;
         border-style: solid;
         border-width: 20px 34.6px 20px 0;
         border-color: transparent @bg_dest_type transparent transparent;
         margin: 8px 0 38px 0;
      }
      .hm{
         position: relative;
         svg.frames{
            position: absolute;
            top: -6px;
            width: 84%;
            left: 0;
            right: 0;
            margin: 0 auto;
            height: 100%;
            filter:alpha(opacity=70);
            opacity:.70; 
            .pl{
               -webkit-animation: fadeInFromNone 3s 1;
               -moz-animation:    fadeInFromNone 3s 1;
               animation:         fadeInFromNone 3s 1;
            }
            @-webkit-keyframes fadeInFromNone{
               0%{ 
                  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
                  opacity:0; 
               }
               100% { 
                  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.7);
                  opacity:1; 
               }
            }
            @-moz-keyframes fadeInFromNone {
               0%{ 
                  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
                  opacity:0; 
               }
               100% { 
                  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.7);
                  opacity:1; 
               }
            }
            @-o-keyframes fadeInFromNone {
               0%{ 
                  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
                  opacity:0; 
               }
               100% {
                  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.7);
                  opacity:1; 
               }
            }
            @keyframes fadeInFromNone {
               0%{ 
                  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
                  opacity:0; 
               }
               100% { 
                  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.7);
                  opacity:1; 
               }
            }

         }
      }
   }
   .barHeatMap{
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      margin:0 auto -42px;
      .content{
         margin-left: 38%;
         .circle{
            float: left;
         }
         ul{
            margin: 10px 18px 0 0;
            float: left;
            li{
               background: @refColor01;
               width: 30px;
               height: 12px;
               float: left;
            }
         }
      }
      @media (max-width: 1280px) {
         .content{
            margin-left: 37%;
         }
      }
      @media (max-width: 1100px) {
         .content{
            margin-left: 35%;
         }
      }
      @media (max-width: @md) {
         .content{
            margin-left: 33%;
         }
      }
      @media (max-width: 840px) {
         .content{
            margin-left: 31%;
         }
      }
      @media (max-width: @sm) {
         bottom: 46%;
         margin: 0;
         .content{
            margin-left: 29%;
         }
      }
      @media (max-width: 670px) {
         .content{
            margin-left: 27%;
         }
      }
      @media (max-width: 580px) {
         .content{
            margin-left: 20%;
         }
      }
      @media (max-width: @xs) {
         bottom: 0;
         margin: 0 auto -41px;
         .content{
            margin-left: 14%;
         }
      }
      @media (max-width: 390px) {
         .content{
            margin-left: 6%;
         }
      }
      @media (max-width: 370px) {
         .content{
            margin-left: 3%;
            ul{
               li{
                  width: 28px;
               }
            }
         }
      }
      @media (max-width: 320px) {
         .content{
            ul{
               li{
                  width: 24px;
               }
            }
         }
      }
      @media (max-width: 290px) {
         .content{
            ul{
               li{
                  width: 22.5px;
               }
            }
         }
      }
      @media (max-width: 270px) {
         .content{
            ul{
               li{
                  width: 19px;
               }
            }
         }
      }
      @media (max-width: 250px) {
         .content{
            ul{
               li{
                  width: 16px;
               }
            }
         }
      }
   }

   @media (max-width: @sm) {
      .fields {
         .col-right{
            margin-top: 80px;
         }
         .hm{
            svg.frames{
               top: -8px;
            }
         }
      }
   }
   @media (max-width: @xs) {
      .fields{
         .col-right{
            margin-top:0;
         }
      }
   }
   @media (max-width: 580px) {
      .fields{
         .hm{
            svg.frames{
               top: -5px;
            }
         }
      }
   }
   @media (max-width: 390px) {
      .fields{
         .hm{
            svg.frames{
               top: -3px;
            }
         }
      }
   }
}
/*Fin HeatMap*/