body.stats {
  background: #222428;
}

button:focus, a:focus {outline:0!important;}

.container, .container-fluid {margin-bottom:40px;}
.stats .con-top, .stats .con-top .btn, .stats .con-top a, .doughnutTip{font-family: "Oswald", sans-serif;}
hr {border-top: 1px solid rgba(255,255,255,0.1); margin-top:50px; margin-bottom:50px;}

h1 {font-size:42px;}

h1, h2, h3 {
  color: #eee;
  text-align: center;
  margin: 20px 0;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  line-height:1.4;
}
.brands {width:540px;}
.focal {width:480px;}
.tab-pane {padding-left:60px;}
.focal-content > .tab-pane {padding-left:0px;}
.tab-pane h2, .tab-pane h3, .c-settings h2, .c-settings h3{text-align:left; margin-left:50px;}
.tab-pane h2.text-center, .tab-pane h3.text-center{text-align:center; margin-left:0px;}
.c-settings {padding-bottom:80px;}

p.intro {color: #fff; font-size: 18px; font-family: 'Montserrat', sans-serif; font-weight: 400!important; line-height:1.6; text-indent: 30px;}
h1.intro {font-size: 36pt; text-transform: none; margin-top:40px;}
p.intro a {font-size: 18px; font-family: 'Montserrat', sans-serif!important; color: #fecb00; text-decoration:underline;}
.chart {
  width: 300px;
  height: 300px;
  position: relative;
}
.doughnutTip {
  position: absolute;
  float: left;
  min-width: 30px;
  max-width: 300px;
  padding: 5px 15px;
  border-radius: 1px;
  background: rgba(0,0,0,.8);
  color: #ddd;
  font-size: 17px;
  text-shadow: 0 1px 0 #000;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  letter-spacing: .06em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  transform: all .3s;
  pointer-events: none;
}
.doughnutTip:after {
  position: absolute;
  left: 50%;
  bottom: -6px;
  content: "";
  height: 0;
  margin: 0 0 0 -6px;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 6px solid rgba(0,0,0,.7);
  line-height: 0;
}
.doughnutTip span {color:#ffba00;}

.doughnutSummary {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #d5d5d5;
  text-align: center;
  text-shadow: 0 -1px 0 #111;
  cursor: default;
}
.doughnutSummaryTitle {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -27%;
  font-size: 22px;
  letter-spacing: .06em;
}


.doughnutSummaryNumber {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -15%;
  font-size: 55px;
}
.chart path:hover { 
  opacity: .65; 
}

#brandChart .doughnutSummaryTitle {text-indent:-9999px;  background:url(brands-ico.png) no-repeat; line-height:4; left:35px; margin-top:0px; top:0px;}
#brandChart .doughnutSummaryTitle:after {content:'Total Images'; text-indent:0; display:block; position:absolute; left:-25px; top:40px; color:#fff;}
#brandChart .doughnutSummaryNumber {font-size:24px; margin-top:30%;}

#cameraChart .doughnutSummaryTitle {text-indent:-9999px;  background:url(camera-ico.png) no-repeat; line-height:4; left:30px; margin-top:0px; top:0px;}
#cameraChart .doughnutSummaryTitle:after {content:'Total Images'; text-indent:0; display:block; position:absolute; left:-20px; top:40px; color:#fff;}
#cameraChart .doughnutSummaryNumber {font-size:24px; margin-top:30%;}

#lenseChart .doughnutSummaryTitle {text-indent:-9999px;  background:url(lense-ico.png) no-repeat; line-height:4.7; left:37px; margin-top:0px; top:-5px;}
#lenseChart .doughnutSummaryTitle:after {content:'Total Images'; text-indent:0; display:block; position:absolute; left:-25px; top:40px; color:#fff;}
#lenseChart .doughnutSummaryNumber {font-size:24px; margin-top:30%;}

#cameraChart1 .doughnutSummaryTitle {text-indent:-9999px;  background:url(camera-ico.png) no-repeat; line-height:4; left:30px; margin-top:0px; top:0px;}
#cameraChart1 .doughnutSummaryTitle:after {content:'Total Images'; text-indent:0; display:block; position:absolute; left:-20px; top:40px; color:#fff;}
#cameraChart1 .doughnutSummaryNumber {font-size:24px; margin-top:30%;}

#lenseChart1 .doughnutSummaryTitle {text-indent:-9999px;  background:url(lense-ico.png) no-repeat; line-height:4.7; left:37px; margin-top:0px; top:-5px;}
#lenseChart1 .doughnutSummaryTitle:after {content:'Total Images'; text-indent:0; display:block; position:absolute; left:-25px; top:40px; color:#fff;}
#lenseChart1 .doughnutSummaryNumber {font-size:24px; margin-top:30%;}

#cameraChart2 .doughnutSummaryTitle {text-indent:-9999px;  background:url(camera-ico.png) no-repeat; line-height:4; left:30px; margin-top:0px; top:0px;}
#cameraChart2 .doughnutSummaryTitle:after {content:'Total Images'; text-indent:0; display:block; position:absolute; left:-20px; top:40px; color:#fff;}
#cameraChart2 .doughnutSummaryNumber {font-size:24px; margin-top:30%;}

#lenseChart2 .doughnutSummaryTitle {text-indent:-9999px;  background:url(lense-ico.png) no-repeat; line-height:4.7; left:37px; margin-top:0px; top:-5px;}
#lenseChart2 .doughnutSummaryTitle:after {content:'Total Images'; text-indent:0; display:block; position:absolute; left:-25px; top:40px; color:#fff;}
#lenseChart2 .doughnutSummaryNumber {font-size:24px; margin-top:30%;}

#cameraChart3 .doughnutSummaryTitle {text-indent:-9999px;  background:url(camera-ico.png) no-repeat; line-height:4; left:30px; margin-top:0px; top:0px;}
#cameraChart3 .doughnutSummaryTitle:after {content:'Total Images'; text-indent:0; display:block; position:absolute; left:-20px; top:40px; color:#fff;}
#cameraChart3 .doughnutSummaryNumber {font-size:24px; margin-top:30%;}

#lenseChart3 .doughnutSummaryTitle {text-indent:-9999px;  background:url(lense-ico.png) no-repeat; line-height:4.7; left:37px; margin-top:0px; top:-5px;}
#lenseChart3 .doughnutSummaryTitle:after {content:'Total Images'; text-indent:0; display:block; position:absolute; left:-25px; top:40px; color:#fff;}
#lenseChart3 .doughnutSummaryNumber {font-size:24px; margin-top:30%;}

#cameraChart4 .doughnutSummaryTitle {text-indent:-9999px;  background:url(camera-ico.png) no-repeat; line-height:4; left:30px; margin-top:0px; top:0px;}
#cameraChart4 .doughnutSummaryTitle:after {content:'Total Images'; text-indent:0; display:block; position:absolute; left:-20px; top:40px; color:#fff;}
#cameraChart4 .doughnutSummaryNumber {font-size:24px; margin-top:30%;}

#lenseChart4 .doughnutSummaryTitle {text-indent:-9999px;  background:url(lense-ico.png) no-repeat; line-height:4.7; left:37px; margin-top:0px; top:-5px;}
#lenseChart4 .doughnutSummaryTitle:after {content:'Total Images'; text-indent:0; display:block; position:absolute; left:-25px; top:40px; color:#fff;}
#lenseChart4 .doughnutSummaryNumber {font-size:24px; margin-top:30%;}

#cameraChart5 .doughnutSummaryTitle {text-indent:-9999px;  background:url(camera-ico.png) no-repeat; line-height:4; left:30px; margin-top:0px; top:0px;}
#cameraChart5 .doughnutSummaryTitle:after {content:'Total Images'; text-indent:0; display:block; position:absolute; left:-20px; top:40px; color:#fff;}
#cameraChart5 .doughnutSummaryNumber {font-size:24px; margin-top:30%;}

#lenseChart5 .doughnutSummaryTitle {text-indent:-9999px;  background:url(lense-ico.png) no-repeat; line-height:4.7; left:37px; margin-top:0px; top:-5px;}
#lenseChart5 .doughnutSummaryTitle:after {content:'Total Images'; text-indent:0; display:block; position:absolute; left:-25px; top:40px; color:#fff;}
#lenseChart5 .doughnutSummaryNumber {font-size:24px; margin-top:30%;}


.lensby .chart .doughnutSummaryTitle {text-indent:-9999px;  background:url(camera-ico.png) no-repeat; line-height:4; left:30px; margin-top:0px; top:0px;}
.lensby .chart .doughnutSummaryTitle:after {content:'Total Images'; text-indent:0; display:block; position:absolute; left:-20px; top:40px; color:#fff;}
.lensby .chart .doughnutSummaryNumber {font-size:24px; margin-top:30%;}

#isoChart .doughnutSummaryTitle {text-indent:-9999px;  background:url(iso-ico.png) no-repeat; line-height:4.7; left:37px; margin-top:0px; top:20px;}
#isoChart .doughnutSummaryTitle:after {content:'Total Images'; text-indent:0; display:block; position:absolute; left:-25px; top:15px; color:#fff;}
#isoChart .doughnutSummaryNumber {font-size:24px; margin-top:30%;}

.setting .chart .doughnutSummaryTitle {text-indent:-9999px;  background:url(set-ico.png) no-repeat; line-height:4; left:30px; margin-top:0px; top:0px;}
.setting .chart .doughnutSummaryTitle:after {content:'Total Images'; text-indent:0; display:block; position:absolute; left:-20px; top:40px; color:#fff;}
.setting .chart .doughnutSummaryNumber {font-size:24px; margin-top:30%;}

.doughnutSummaryNumber {font-size:24px; margin-top:30%;}


.chart-block {position:relative;}
.chart-block ul {position:absolute; top:30px; left:360px; display:inline-block;}
.chart-block li {padding-bottom:15px;}
.chart-block ul li a {font-size:20px; color:#fff; display:block;}
.chart-block ul li a:hover, .chart-block ul li a:focus {text-decoration:none; color:#fecb00;}
.chart-block ul li a i {margin-right:8px;}
.chart-circ {width:17px; height:20px; position:relative; top:2px; margin-right:8px;}
.chart-block ul li:first-child a .chart-circ{fill:#3366CC;}
.chart-block ul li:nth-child(2)  a .chart-circ{fill:#990099;}
.chart-block ul li:nth-child(3) a .chart-circ{fill:#109618;}
.chart-block ul li:nth-child(4) a .chart-circ{fill:#FF9900;}
.chart-block ul li:nth-child(5) a .chart-circ{fill:#DC3912;}
.chart-block ul li:last-child a .chart-circ{fill:#000000;} 

.chart-block ul li {font-size: 20px; color: #fff; display: block; cursor:pointer;}
.chart-block ul li:hover, .chart-block ul li:focus {text-decoration:none; color:#fecb00;}
.chart-block ul li i {margin-right:8px;}
.chart-block ul li:first-child .chart-circ{fill:#3366CC;}
.chart-block ul li:nth-child(2) .chart-circ{fill:#990099;}
.chart-block ul li:nth-child(3) .chart-circ{fill:#109618;}
.chart-block ul li:nth-child(4) .chart-circ{fill:#FF9900;}
.chart-block ul li:nth-child(5) .chart-circ{fill:#DC3912;}
.chart-block ul li:last-child .chart-circ{fill:#000000;}

.grouping {text-align:center; margin:40px 0;}
.grouping .btn-group {display:inline-block;}

.chart-block {margin:40px auto 0;}



@media (min-width: 1600px) {
    .c-settings .chart-block {margin-left:calc(100% - 700px);}
    .c-settings h2 {margin-left:calc(100% - 650px);}

    .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
        float: left;
    }

    .col-xl-12 {
        width: 100%;
    }

    .col-xl-11 {
        width: 91.66666667%;
    }

    .col-xl-10 {
        width: 83.33333333%;
    }

    .col-xl-9 {
        width: 75%;
    }

    .col-xl-8 {
        width: 66.66666667%;
    }

    .col-xl-7 {
        width: 58.33333333%;
    }

    .col-xl-6 {
        width: 50%;
    }

    .col-xl-5 {
        width: 41.66666667%;
    }

    .col-xl-4 {
        width: 33.33333333%;
    }

    .col-xl-3 {
        width: 25%;
    }

    .col-xl-2 {
        width: 16.66666667%;
    }

    .col-xl-1 {
        width: 8.33333333%;
    }
}

@media(max-width:1600px) {
    .c-settings .chart-block {margin-left:60px;}
    .c-settings h2 {margin-left:110px;}    
}

@media(max-width:1366px) {
h1.intro {font-size: 24pt;}    
}
@media(max-width:1200px) {
.c-settings .chart-block {margin-bottom:60px;}
.c-settings {padding-bottom:0px;}
}

@media(max-width:830px) {
.grouping {display:none;}    
.tab-content > .tab-pane {display:block!important;}
.tab-pane h2, .tab-pane h3, .c-settings h2, .c-settings h3{text-align:center; margin-left:0px;}
.brands {width:100%;}
.focal {width:100%;}
.tab-pane {padding-left:0px;}
.c-settings .chart-block {margin-left:0px;}
.c-settings h2 {margin-left:0px;}
.chart-block {width:100%!important;  text-align:center;}    
.chart {margin:0 auto;}
.chart-block ul {position:static; display:inline-block; margin-top:15px;}
.chart-block ul li {text-align:left;}
}