#headerarea img {
   width: 100%;
    display: block;
}

#headerarea {
    width: 100%;
    
}

.headerslide {
    position: relative;
  
    width: 100%;
}

.headerslide2 {
   display: none;
}

.headerslide .quoteareainner{
    position: absolute;
    left:50%;
    bottom: 1em;
    color: #fff;
    width: 85.501em;
      max-width: 100%;
    margin: -1em auto auto -42.7505em;
  
     box-sizing: border-box;
       padding-left: 2.438em;
       padding-right: 2.438em;
       overflow: hidden;
    
}




.quoteareaquote {
    font-weight: bold;
    font-size: 2.375em;
    
   
}

.quoteareaname {
    font-size: 1.563em;
    margin: 0.8em 0 1.5em 0;
   
    max-width: 100%;
}









.quoteareanameinner {
    display: table-cell;
     white-space: nowrap;
     padding-right: 0.5em;
     vertical-align: top;
}

.quoteareabar {
     background: url(../images/bar.png) left 0.55em repeat-x;
     background-size: auto 0.313em;
     display: table-cell;
     
      width: 12em;
     
     text-align: right;
}


.quoteareanameandbar {
  
   
}

.quoteareabar a {
    display: inline-block;
    border:1px solid #fff;
   
    width:0.6em;
    height: 0.6em;
    
    border-radius: 5em;
    margin-right: 0.8em;
    float: right;
    vertical-align: bottom;
    margin-top: 0.35em;
}

.quoteareabar a.circon {
    background:#fff;
}





.headerslide .quotearea .quoteareainner{
       transition: opacity 0.5s,transform 0.5s;
       transform: translateX(0em);
       -webkit-transition: opacity 0.5s,-webkit-transform 0.5s;
       -webkit-transform: translateX(0em);
       opacity: 1;
}

.headerslide .quotearea.faderight .quoteareainner{
       transform: translateX(-2em);
       -webkit-transform: translateX(-2em);
       opacity: 0.2;
}


#headerarea.scrollerhaslink {
  cursor: pointer;
}


@media screen and (max-width : 1368px) {
    .headerslide .quoteareainner{

        left:0;
        right:0;
        
        width: 100%;
        max-width: 100%;
        margin: -1em auto auto auto;
        padding-right: 35px;
        
    }
    
    #headerarea {
      font-size: 12px;
    }

}



@media screen and (max-width : 1125px) {

    #headerarea {
      font-size: 10px;
    }
    
    .quoteareabar a {
      
         margin-top: 0.30em;
     }

}



@media screen and (max-width : 900px) {
   
 
   .quoteareaname {
       margin: 0.8em 0 1.5em 0;
       width: auto;
   }
   
   .quoteareabar {
         background: url(../images/bar.png) left 0.64em repeat-x;
         background-size: auto 2px;
        
    }
   

    
    .quoteareaquote {
      max-width: 100%;
    }
    
    
    .quoteareabar a {
      
         margin-top: 0.32em;
     }

 

}



@media screen and (max-width : 450px) {
   
    .quoteareaname {
      font-size: 12px;
   } 
   
    #headerarea {
      font-size: 7px;
    }
    
     .quoteareabar a {
      
         margin-top: 0.32em;
     }
     
  

}