/* Default Page  */
#header .logo {
	width: auto;
	height: auto;
}
#header .logo a {
	background: none !important;
}
#header .logo a, #header .logo a  span {
	height: 100%;
	width: 100%;
	display: block;
}
#header .logo a > span:before,
#header .logo a > span:after {
	display: none !important;
}

#header .logo a span {
	background-image: url(../img/logo_chillidrive.png);
	background-size: contain;
}

/* General Page */
#header .logo,
html.general #header .logo {
	width: 120px;
	height: 88px;
	display: table;
}
#header .logo a,
#header .logo a span,
html.general #header .logo a,
html.general #header .logo a span {
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
	left: auto;
	top: auto;
	border-radius: 0;
}

#header .logo a,
html.general #header .logo a {
	display: table-cell;
	vertical-align: middle;
}

html.default #main .title {
color: #1a1a1a;
}

html.score #main .title {
color: #1a1a1a;
}

html.journey #main .title {
color: #1a1a1a;
}

html.account #main .title {
color: #1a1a1a;
}

html.default #main .title .icon {
fill: #00c2aa;
}

html.score #main .title .icon {
fill: #00c2aa;
}

html.journey #main .title .icon {
fill: #00c2aa;
color: #1a1a1a;
}

html.account #main .title .icon {
fill: #00c2aa;
color: #1a1a1a;
}


#header .logo > span,
#header .logo > strong,
html.general #header .logo > span,
html.general #header .logo > strong {
	display: none;
}

html.default #header .logo {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 16px;
}

@media screen and (max-width: 767px) {
	html.default #header .logo a span {
		background-image: url(../../img/logo_chillidrive.png);
	}
}
@media screen and (min-width: 768px) {
	#header .logo,
	html.general #header .logo {
		width: 180px;
	}

	html.default #header .logo {
		margin-bottom: 32px;
	}
}

html.score #nav {
  background: #002d44;;
  background: -moz-linear-gradient(top, #002d44; 0%, #002d44 100%);
  background: -webkit-linear-gradient(top, #002d44 0%, #002d44 100%);
  background: linear-gradient(to bottom, #002d44 0%, #002d44 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color1', endColorstr='$color2',GradientType=0 );
}

html.journey #nav {
  background: #00294d;
  background: -moz-linear-gradient(left, #00294d 0%, #303346 100%);
  background: -webkit-linear-gradient(left, #00294d 0%, #303346 100%);
  background: linear-gradient(to right, #00294d 0%, #303346 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color1', endColorstr='$color2',GradientType=1 );
}

html.account #nav {
  background: #00294d;
  background: -moz-linear-gradient(left, #00294d 0%, #303346 100%);
  background: -webkit-linear-gradient(left, #00294d 0%, #303346 100%);
  background: linear-gradient(to right, #00294d 0%, #303346 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color1', endColorstr='$color2',GradientType=1 );
}

html.score #header::before {
  background: #002d44 ;
  background: -moz-linear-gradient(left, #002d44 70%, #002d44 100%);
  background: -webkit-linear-gradient(left, #002d44 70%, #002d44 100%);
  background: linear-gradient(to right, #002d44 70%, #002d44 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color1', endColorstr='$color2',GradientType=1 );
}

html.journey #header::before {
  background: #002d44 ;
  background: -moz-linear-gradient(left, #002d44 70%, #002d44 100%);
  background: -webkit-linear-gradient(left, #002d44 70%, #002d44 100%);
  background: linear-gradient(to right, #002d44 70%, #002d44 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color1', endColorstr='$color2',GradientType=1 );
}

html.account #header::before {
 background: #002d44 ;
  background: -moz-linear-gradient(left, #002d44 70%, #002d44 100%);
  background: -webkit-linear-gradient(left, #002d44 70%, #002d44 100%);
  background: linear-gradient(to right, #002d44 70%, #002d44 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color1', endColorstr='$color2',GradientType=1 );
}

html.score .carousel .header .item .content ul li:nth-child(1) {
  padding-right: 4px;
  text-align: right;
  color: #00c2aa;
}

html.score .carousel .header .item .content ul li:nth-child(1) strong,
html.score .carousel .header .item .content ul li:nth-child(1) small {
  color: #00c2aa;
}


html.default #main .title {
  color: #00c2aa;
}

html.journey #main .title {
  margin-bottom: 16px;
  color: #1a1a1a;
}

html.score #main .title {
  color: #1a1a1a;
}

html.account #main .title {
  color: #1a1a1a;
}

.list.box .item .content ul li small,
.list.box .item .content ul li strong {
  color: #e84148;
  text-align: right;
  float: right;
  font-size: 2rem;
  line-height: inherit;
}

@media (min-width: 768px) {
  html.default #header {
    background: #002d44 ;
    background: -moz-linear-gradient(top, #002d44 0%, #002d44 100%);
    background: -webkit-linear-gradient(top, #002d44 0%, #002d44 100%);
    background: linear-gradient(to bottom, #002d44 0%, #002d44 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color1', endColorstr='$color2',GradientType=0 );
    width: 640px;
    padding-top: 240px;
    padding-left: 140px;
    left: auto;
    right: 0;
  }
  html.default #header .container {
    padding-left: 64px;
    padding-right: 64px;
  }
}

.btn.btn-primary {
  background: #00c2aa;
  background: -moz-linear-gradient(left, #00c2aa 0%, #00c2aa 100%);
  background: -webkit-linear-gradient(left, #00c2aa 0%, #00c2aa 100%);
  background: linear-gradient(to right, #00c2aa 0%, #00c2aa 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color1', endColorstr='$color2',GradientType=1 );
  border-color: transparent;
}

.btn.btn-primary:hover {
  background: #00c2aa;
  background: -moz-linear-gradient(left, #00c2aa 0%, #00c2aa 100%);
  background: -webkit-linear-gradient(left, #00c2aa 0%, #00c2aa 100%);
  background: linear-gradient(to right, #00c2aa 0%, #00c2aa 100%;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color1', endColorstr='$color2',GradientType=1 );
}

@media (min-width: 768px) {
  html.score #header::before {
    background: #002d44 ;
    background: -moz-linear-gradient(top, #002d44 0%, #002d44 100%);
    background: -webkit-linear-gradient(top, #002d44 0%, #002d44 100%);
    background: linear-gradient(to bottom, #002d44 0%, #002d44 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color1', endColorstr='$color2',GradientType=0 );
  }
}

.nav li.is-active > a {
    background: #486D87;
  color: #ffffff;
}

@media (min-width: 768px) {
  html.journey #header::before {
    background: #00294d;
    background: -moz-linear-gradient(top, #00294d 0%, #303346 100%);
    background: -webkit-linear-gradient(top, #00294d 0%, #303346 100%);
    background: linear-gradient(to bottom, #00294d 0%, #303346 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color1', endColorstr='$color2',GradientType=0 );
  }
}

@media (min-width: 768px) {
  html.account #header::before {
    background: #00294d;
    background: -moz-linear-gradient(top, #00294d 0%, #303346 100%);
    background: -webkit-linear-gradient(top, #00294d 0%, #303346 100%);
    background: linear-gradient(to bottom, #00294d 0%, #303346 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color1', endColorstr='$color2',GradientType=0 );
  }
}


.btn.btn-secondary {
  background: #D22630;
  background: -moz-linear-gradient(left, #D22630 0%, #D63D36 100%);
  background: -webkit-linear-gradient(left, #D22630 0%, #D63D36 100%);
  background: linear-gradient(to right, #D22630 0%, #D63D36 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color1', endColorstr='$color2',GradientType=1 );
  border-color: transparent;
  color: #ffffff;
}

.btn.btn-secondary:hover {
  background: #D22630;
  background: -moz-linear-gradient(left, #D22630 0%, #D63D36 100%);
  background: -webkit-linear-gradient(left, #D22630 0%, #D63D36 100%);
  background: linear-gradient(to right, #D22630 0%, #D63D36 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color1', endColorstr='$color2',GradientType=1 );
}



@media (max-width: 575px) {
  html.general #header .logo {
    max-width: 190px;
      margin-top: -20px;
  }
}