/*CSS overrides */

* {
  -webkit-font-smoothing:antialiased;
}


body,p {
  font-family: 'vagrounded-light', Helvetica, Arial, sans-serif;
}

p,h1,h2,h3,h4,h5 {
  color:#133349;
}

p strong {
  font-family: 'vagrounded-bold';
  letter-spacing:1px;
}

/* title and hero */

.title, .footer {
  background-color:#133349;
  color:#fff;
}

.title h1, .footer h1 {
  margin:25px;
  color:#fff;
  font-size:14px;
}

@media (min-width: 768px) {
  .title h1,.footer h1 {
    font-size:28px;
  }
}

.title.mid-title {
  margin-top:50px;
  margin-bottom:50px;
}

.title span, .footer span {
  font-family: 'vagrounded-bold';
}

.footer h1 {
  margin-left:10px;
}

.footer .diffbot-links h1 {
  margin-top:0;
}

.footer a {
  color:#fff;
}

.footer {
  margin-top:30px;
  padding-bottom:20px;
  padding-top:10px;
}

.footer img {
  padding:25px 0 0 10px;
}



.subtitle {
  margin-bottom:25px;
  color:#fff;
  background:;
  background-color: #68c1ed; /* Old browsers */
  background:url('../img/clouds.png') repeat-x bottom, -moz-linear-gradient(top, #68c1ed 0%, #ffffff 100%); /* FF3.6+ */
  background:url('../img/clouds.png') repeat-x bottom, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#68c1ed), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
  background:url('../img/clouds.png') repeat-x bottom, -webkit-linear-gradient(top, #68c1ed 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
  background:url('../img/clouds.png') repeat-x bottom, -o-linear-gradient(top, #68c1ed 0%,#ffffff 100%); /* Opera 11.10+ */
  background:url('../img/clouds.png') repeat-x bottom, -ms-linear-gradient(top, #68c1ed 0%,#ffffff 100%); /* IE10+ */
  background:url('../img/clouds.png') repeat-x bottom, linear-gradient(to bottom, #68c1ed 0%,#ffffff 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#68c1ed', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

.subtitle h1 {
  margin: 20px 15px 0 15px;
  text-transform: uppercase;
  font-size:70px;
  line-height:70px;
   -webkit-text-fill-color: white; /* Will override color (regardless of order) */
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #1f455e;
}
.subtitle h2 {
  margin: 0 15px;
  text-transform: uppercase;
  font-size:60px;
  color:#fff;
}

@media (min-width: 768px) {
  .subtitle h1 {
    font-size:160px;
    line-height:140px;
    margin:30px 15px 0 15px;
  }
  .subtitle h2 {
    font-size:100px;
    margin:0;
  }
}

.row-explainer {
  margin-top:40px;
}

.arrow-box {
  margin-top:10px;
  position: relative;
  background: #cb4540;
}
.arrow-box:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(203, 69, 64, 0);
  border-bottom-color: #cb4540;
  border-width: 25px;
  margin-left: -25px;
}

.row-explainer p {
  color:#fff;
  font-size:15px;
  padding:5px;
  margin:0;
}

@media (min-width: 768px) {
  .row-explainer p {
    font-size:20px;
    padding:26px;
  }
}

/* headings */

.heading {margin-top:45px;}

.heading h1 {
  text-transform:uppercase;
  font-size:30px;
}

.heading-icon {
  color:#68c1ec;
}

@media (min-width: 768px) {
  .heading h1 {
    font-size:66px;
  }
  .heading-icon {
      top:7px;
  }
}


@media (min-width: 768px) {

#subtitle h1 {
    background-image:url('../img/airplane.png');
    background-repeat:no-repeat;
    background-position: 95%;
    background-size: 35%;
}
}

.subheading {
  margin-top:30px;
  margin-bottom:20px;
}

.subheading .border {
  background-image:url('../img/border.png');
  backround-repeat:repeat-x;
  line-height:20px;
  height:20px;
}

.subheading h2 {
  margin:30px;
}

h3 {
  text-transform:uppercase;
  font-size:18px;
  color:#ccc;
}

h4 {
  color:#000;
  font-size:14px;
  white-space: nowrap;
  overflow-x:hidden;
}

@media (min-width: 768px) {
  h4 {
    font-size:22px;
  }
}

/*  bar charts */

.row-bar h4 {
  line-height:36px;
  margin:0;
}

.row-bar {
  height:36px;
  margin-bottom:10px;
}

.row-bar .bar-right, .row-bar .bar-left {
  height:36px;
  line-height:36px;
}

.bar-right .bar {
  margin-left:auto;
  margin-right:0;
  height:36px;
  line-height:36px;
}

.bar-left .bar {
  margin-right:auto;
  margin-left:0;
  height:36px;
  line-height:36px;
}

.row-bar .bar.half {
  height:18px;
  line-height:18px;
}

.green {background-color:#9cc21d;}
.red {background-color:#cb4540;}
.yellow {background-color:#e1c43e;}
.purple {background-color:#826887;}
.lightblue {background-color:#68c1ed;}
.darkblue {background-color:#133349;}
.grey {background-color:#ccc;}
.color-negative {color:#cc4944;}
.color-positive {color:#82c66f;}
.color-neutral {color:#a1a1a1;}

/* tooltips */

.tooltip-inner {
  padding:20px;
  color:#fff;
  font-size:22px;
  font-family: 'vagrounded-bold', Helvetica, Arial, sans-serif;
}

/* default color */

.tooltip > .tooltip-inner {
    background-color: #353535;
    color: #fff;
    border: 1px solid #353535;
}

.tooltip.top > .tooltip-arrow{
    bottom:0;
    left:50%;
    margin-left:-5px;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:5px solid #353535
}
.tooltip.left > .tooltip-arrow{
    top:50%;
    right:0;
    margin-top:-5px;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-left:5px solid #353535;
}
.tooltip.bottom > .tooltip-arrow{
    top:0;
    left:50%;
    margin-left:-5px;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:5px solid #353535;
}
.tooltip.right > .tooltip-arrow{
    top:50%;
    left:0;
    margin-top:-5px;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-right:5px solid #353535;
}

/* tweets */

.darkblue + .tooltip > .tooltip-inner {
    background-color: #55acee;
    color: #fff;
    border: 1px solid #55acee;
}

.darkblue + .tooltip.top > .tooltip-arrow{
    bottom:0;
    left:50%;
    margin-left:-5px;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:5px solid #55acee
}
.darkblue + .tooltip.left > .tooltip-arrow{
    top:50%;
    right:0;
    margin-top:-5px;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-left:5px solid #55acee;
}
.darkblue + .tooltip.bottom > .tooltip-arrow{
    top:0;
    left:50%;
    margin-left:-5px;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:5px solid #55acee;
}
.darkblue + .tooltip.right > .tooltip-arrow{
    top:50%;
    left:0;
    margin-top:-5px;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-right:5px solid #55acee;
}

#sentiment-tooltip + .tooltip.bottom {
  margin-top:12px;
}

#sentiment-tooltip + .tooltip.bottom > .tooltip-inner {
    padding:6px;
    font-size:16px;

}
/* sentiment charts */

/* header */

.sentiment-key {
  height:60px;
  line-height:50px;
  text-transform:uppercase;
  margin-top:25px;
}

.sentiment-index {
  font-size:10px;
}

.sentiment-label {
  padding:2px 0;
  font-size:12px;
  font-family: "vagrounded-bold";
}

@media (min-width: 768px) {
  .sentiment-index {
    font-size:18px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    background-color:#353534;
    color:#fff;
    padding:5px 12px;
  }
  .sentiment-label {
    font-size:16px;
    padding:3px 0;
  }
}

.sentiment-click {
  margin-bottom:20px;
}

.sentiment-circle {
  margin-top:30px;
}

.outer {
  background-color:#e9f4f8;
  width:200px; /* You can define it by % also */
  height:200px; /* You can define it by % also */
  position:relative;
  border:1px solid #bfbfbf;
  border-radius: 50%;
  margin-left:auto;
  margin-right:auto;

}

.inner {
  top: 25%; left:25%; /* of the container */
  width:50%; /* of the container */
  height:50%; /* of the container */
  position: relative;
  border-radius: 50%;
  color:#fff;
}

.sentiment-circle .negative {
    background-color:#da2333;
}

.sentiment-circle .value {
    text-align:center;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: relative;
    font-size:22px;
}

.row-sentiment {
  border-top:1px solid #ccc;
  padding:0;
}

.row-sentiment-graph {
  padding:40px 0;
  margin-left:0;
  margin-right:0;
}

.row-sentiment:nth-child(2n) .row-sentiment-graph {
  background-color:#f2f2f2;
}

.row-sentiment:last-child {
  border-bottom:1px solid #ccc;
}

.row-sentiment:hover .row-sentiment-graph {
  background-color:#edf6fa;
  cursor:pointer;
}

.row-sentiment-graph:hover {

}

.sentiment-logo {
  line-height:50px;
}

.brand-logo {
  display:inline-block;
  vertical-align: middle;
}

.brand-logo img {
  max-height:50px;
  width:auto;
}

.sentiment-graph {
  position:relative;
  display:inline-block;
  width:50%;
  height:50px;
  border:1px solid #949494;
  margin-right:0;
  margin-left:0;
  background-color:#fff;
}
.sentiment-positive {
  border-left:0;
}

.sentiment-graph .sentiment-fill {
  position:absolute;
  height:100%;
}

.sentiment-negative .sentiment-fill {
  right:0;
background: #cc4742; /* Old browsers */
background: -moz-linear-gradient(left, #cc4742 0%, #ffffff 98%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#cc4742), color-stop(98%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #cc4742 0%,#ffffff 98%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #cc4742 0%,#ffffff 98%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #cc4742 0%,#ffffff 98%); /* IE10+ */
background: linear-gradient(to right, #cc4742 0%,#ffffff 98%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc4742', endColorstr='#ffffff',GradientType=1 ); /* IE6*/
}

.sentiment-positive .sentiment-fill {
left:0;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(left, #ffffff 5%, #ffffff 5%, #82c66f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(5%,#ffffff), color-stop(5%,#ffffff), color-stop(100%,#82c66f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ffffff 5%,#ffffff 5%,#82c66f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ffffff 5%,#ffffff 5%,#82c66f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ffffff 5%,#ffffff 5%,#82c66f 100%); /* IE10+ */
background: linear-gradient(to right, #ffffff 5%,#ffffff 5%,#82c66f 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#82c66f',GradientType=1 ); /* IE6-9 */
}

.sentiment-icon span {
  font-size:40px;
  color:#ccc;
}

.sentiment-icon span.collapsed-show {
  display:none;
}

.collapsed .sentiment-icon span.collapsed-hide {
  display:none;
}
.collapsed .sentiment-icon span.collapsed-show {
  display:inline-block;
}



.row-quote {
  border-top:1px dotted #ccc;
  margin-left:0;
  margin-right:0;
}

.featured-quote .heading {
  margin-top:40px;
  text-transform: uppercase;
  font-size:22px;
}

.featured-quote span {
  font-family:'vagrounded-bold';
}

.featured-quote {
  padding-bottom:40px;
}

.featured-quote p {
  padding:25px 10px 0 50px;
  font-size:16px;
  margin:25px 0 0 10px;
  text-align: left;
  background-repeat:no-repeat;
}

.featured-quote.negative p {
    background-image: url('../img/quotes_negative.png');
}
.featured-quote.positive p {
    background-image: url('../img/quotes_positive.png');
}

.featured-quote .quote-source {
  margin-top:10px;
  padding-left:60px;
  margin-bottom:10px;
  font-family:"vagrounded-bold";
}

/* bottom general charts */

.row-newbrands {
  margin-top:30px;
}

.row-newbrands.row-2 {
  margin-top:50px;
}

.sitename a {color:#000;}


.chart-logo {
  line-height:70px;
  height:70px;
  margin-bottom:20px;
}

.chart-logo img{
  max-height:70px;
  width:auto;
}

.sitename {padding-left:20px;}