/***********************************************
HE
************************************************/

/***********************************************
Screen 1200px+
***********************************************/
#graph {
    width:100%;
    height:400px;
    margin:0 0 50px 0;
}

.bar{
    float:left;
    width:10%;
    height:100%;
    margin:0 1.2% 0 1.2%;
    background-color:#f9ecd1;
    position:relative;
}

.perc {
    width:100%;
    background-color:#e09e1a;
    position:absolute;
    left:0;
    bottom:0;
    overflow:hidden;
}

.perclabel {
    position:relative;
    height: 100%;
    width: 100%;
}

.perclabeltext {
    color:#ffffff;
    font-size:14px; 
    font-weight:bolder;   
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; /* 0=0, 1=90, 2=180, 3=270 */
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: left top;
    -moz-transform: rotate(-90deg);
    -moz-transform-origin: left top;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin: left top;
    -o-transform: rotate(-90deg);
    -o-transform-origin: left top;
    transform: rotate(-90deg);
    transform-origin: left top;   
    position:absolute;
    bottom:0;
    left:40%;
    white-space: nowrap;
}

.ctitle h3 {font-size:38px; font-weight:lighter;line-height:1.8em;}

.flexslider {background: transparent; border: 0px solid #fff;}
.flex-control-paging li a {background: #ffffff; background: rgba(255,255,255,0.5); -webkit-box-shadow: inset 0 0 3px rgba(255,255,255,0.3); -moz-box-shadow: inset 0 0 3px rgba(255,255,255,0.3); -o-box-shadow: inset 0 0 3px rgba(255,255,255,0.3); box-shadow: inset 0 0 3px rgba(255,255,255,0.3); }
.flex-control-paging li a:hover { background: #fff; background: rgba(255,255,255,0.7); }
.flex-control-paging li a.flex-active { background: #fff; background: rgba(255,255,255,0.9); cursor: default; }


#DeviceSlider .flex-control-paging li a {background: #000000; background: rgba(235,235,235,0.5); -webkit-box-shadow: inset 0 0 3px rgba(235,235,235,0.3); -moz-box-shadow: inset 0 0 3px rgba(235,235,235,0.3); -o-box-shadow: inset 0 0 3px rgba(235,235,235,0.3); box-shadow: inset 0 0 3px rgba(235,235,235,0.3); }
#DeviceSlider .flex-control-paging li a:hover { background: #000; background: rgba(117,117,117,0.7); }
#DeviceSlider .flex-control-paging li a.flex-active { background: #000; background: rgba(117,117,117,0.9); cursor: default; }

.casestudy {
    border:1px solid #dfdfdf;
    padding:20px 20px 0 20px;
}

.casestudylogo {
    max-width:300px;
    margin:10% 0 0 0;
}

.quotetext {
    color:#333;
}

.quotesignature {
    color:#919191;
}

.flxwrapper {
    text-align:center;
    position:relative;
}

.flxbox {
    text-align:center;
    float:left;
    width:10%;
    margin:0 1%;
    font-weight:600;
}

.flximg {
    margin: 0 auto;
    max-height: 90px;
    max-width: 90px;
}

.flxline {
    float:left;
    width:5.6%;
    margin:2.4% 0;
}

/***********************************************
Screen Smaller than 1199px
***********************************************/
@media only screen and (min-width:960px) and (max-width: 1199px) {
    
.casestudylogo {
    margin:20% 0 0 0;
}
}

/***********************************************
Tablet (Smaller than 959px)
***********************************************/
@media only screen and (min-width:768px) and (max-width: 959px) {
    
.casestudylogo {
    margin:40% 0 0 0;
}

.flxbox {
    text-align:center;
    float:left;
    width:20%;
    margin:0 1%;
}

.flximg {
    margin: 0 auto;
    max-height: 90px;
    max-width: 90px;
}

.flxline {
    float:left;
    width:16.8%;
    margin:4% 0;
}

.flxbreakpoint {
    width:100%;
    margin:40px 0;
}

.flxbreakpoint hr {
    display:none;
}

}

/***********************************************
Mobile (portrait 300px)
***********************************************/
@media only screen and (max-width:767px) {
    
.perclabeltext {
    font-size:12px;
    left:10%;
}


.ctitle h3 {
    font-size:24px;
    line-height:1.4em;
}


.casestudylogo {
    margin:0;
}

.flxbox {
    text-align:center;
    float:left;
    width:100%;
    margin:0%;
}

.flximg {
    margin: 0 auto;
    max-height: 90px;
    max-width: 90px;
}

.flxline {
    float:left;
    width:100%;
    margin:0;
}

}

/***********************************************
Mobile (landscape 420px)
***********************************************/
@media only screen and (min-width: 480px) and (max-width: 767px) {
 
.perclabeltext {
    font-size:12px;
    left:30%;
}

.ctitle h3 {
    font-size:32px;
    line-height:1.4em;
}

.casestudylogo {
    margin:0;
}

.flxbox {
    text-align:center;
    float:left;
    width:20%;
    margin:0 1%;
}

.flximg {
    margin: 0 auto;
    max-height: 90px;
    max-width: 90px;
}

.flxline {
    float:left;
    width:16.8%;
    margin:4% 0;
}

.flxbreakpoint {
    width:100%;
    margin:40px 0;
}

.flxbreakpoint hr {
    display:none;
}

}