.title-bar {
   font-family: 'Roboto', sans-serif !important;
   font-size:16px;
}

.title-bar h1 {
   font-weight: 500;
   font-size:40px;
   color:#003468;
}

.title-bar em {
   color:#003468;
}

.cl-box {
   height:100%;
}

.cl-container {
   border: 1px solid #000;
   margin-bottom: 0.5em;
   cursor: pointer;
   background: #e0e0e0; /* Old browsers */
   background: -moz-linear-gradient(left, #e0e0e0 1%, #ffffff 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(left, #e0e0e0 1%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to right, #e0e0e0 1%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e0', endColorstr='#ffffff', GradientType=1 ); /* IE6-9 */
   -webkit-transition: background 0.2s linear;
   -moz-transition: background 0.2s linear;
   -o-transition: background 0.2s linear;
   transition: background 0.2s linear;
}

.cl-container:hover {
   background:#e0e0e0;
}

.title-box {
   height:200px;
   padding:0 !important;
   position:relative;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
}

.info-box {
   height:200px;
   position:relative;
}

.title-img {
   position:absolute;
   height:100%;
   width:auto;
}

.cl-logo {
   height:70%;
   white-space: nowrap;
}

.helper {
   display: inline-block;
   height: 100%;
   vertical-align: middle;
}

.cl-logo>img {
   max-height:75%;
   max-width:75%;
   width:auto;
   vertical-align: middle;
   -webkit-filter: drop-shadow(-1px 1px 1px rgb(34, 34, 34));
   filter:         drop-shadow(-1px 1px 1px rgb(34, 34, 34)); 
}

.cl-rating {
   height:30%;
   font-size:35px;
   text-align: center;
   color:rgb(255, 197, 50);
}

.cl-rating>i {
   text-shadow: -2px 1px 2px #494949;
}

.cl-info {
   height:100%;
   position:relative;
}

.cl-btn {
   height:100%;
   white-space: nowrap;
   text-align:center;
   padding:0 !important;
}

.cl-btn>i {
   vertical-align: middle;
}

.cl-stats {
   padding:0 !important;
}

.stat-container {
   height:100%;
}

.cl-stats>ul {
   list-style-type: none;
   padding:0 0 0 5px !important;
}

.cl-stats>ul>li {
   padding:10px 0px;
   border-collapse: collapse;
   -webkit-transition: background-color 200ms linear;
   -ms-transition: background-color 200ms linear;
   transition: background-color 200ms linear;
}

.cl-interest {
   padding:0 !important;
   font-family: 'Roboto', sans-serif;
}

.cl-interest>ul {
   list-style-type: none;
}

.cl-interest>ul>li {
   color:black;
   padding:8px;
}

@media (max-width:768px)
{
   .info-box {
      height:auto !important;
   }

   .cl-container {
      background: -moz-linear-gradient(top, #e0e0e0 0%, #ffffff 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(top, #e0e0e0 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom, #e0e0e0 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
   }

   .stat-container {
      border-top: solid 1px #000;
      border-bottom: solid 1px #000;
   }
   
   .cl-interest {
      padding-top:15px !important;
   }

   .cl-btn {
      padding:15px !important;
      font-weight:700;
      border-top:solid 1px #000;
   }
}


@media (min-width:768px)
{
   .cl-stats {
      position: relative;
      transform: translateY(-50%);
      top: 50%;
   }

   .cl-interest {
      position: relative;
      transform: translateY(-50%);
      top: 50%;
   }

   .stat-container {
      border-left: solid 1px #000;
      border-right: solid 1px #000;
   }   
}