/*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-top-color:transparent;
				 border-bottom-color:transparent;
				 border-right-color:transparent;
         margin: 8px 0 38px 30px;
				 vertical-align:top;
      }
      .arrow-right{
         width: 0px;
         height: 0px;
         border-style: solid;
         border-width: 20px 34.6px 20px 0;
				 border-top-color:transparent;
				 border-bottom-color:transparent;
				 border-left-color:transparent;
         margin: 8px 0 38px 0;
      }
      .hm{
         position: relative;
         svg.frames{
            position: absolute;
            top: -4%;
            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; 
               }
            }

         }
      }
   }
   &.maxSize-767.minSize-479{
      .fields{
         .col-right{
            margin-top: 80px;
         }
      }
      .barHeatMap{
         position: absolute;
         //margin-top: -15px;
         top: 50%;
      }
   }
   .barHeatMap{
      text-align: center;
      margin: 20px auto;
      .content{
         margin: 0 auto;
         .circle{
            float: none;
            display: inline-block;
            margin: 0 10px;
         }
         ul{
            float: none;
            display: inline-block;
            li{
               background: @refColor01;
               width: 30px;
               height: 12px;
               float: none;
               display: inline-block;
            }
         }
      }
   }
   &.maxSize-767{
      .fields {
         .col-right{
            margin-top: 80px;
         }       
      }
   }
   &.maxSize-479{
      .fields {
         .barHeatMap .content ul li{
            width: 16px;
         } 
         .col-right{
            margin-top: 0;
         }         
      }
   }

}
/*Fin HeatMap*/