/*___________ Redirect Index Page _____________ */
body#rd {
	background: rgb(9, 35, 92) !important;
	color: #fff;
	text-align: center;
}

body#rd section{
	width: 50%;
	margin: 0 auto;
	padding: 50px;
}

body#rd a, body#rd a:visited, body#rd a:active { color: #fff;} 

/*___________ Typography _____________ */
@font-face {
    font-family: 'Brandon';
    src: url('/fonts/Brandon/regular.woff2') format('woff2'),
         url('/fonts/Brandon/regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Brandon';
    src: url('/fonts/Brandon/bold.woff2') format('woff2'),
         url('/fonts/Brandon/bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'Brandon';
    src: url('/fonts/Brandon/italic.woff2') format('woff2'),
         url('/fonts/Brandon/italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;

}

/*___________ General _____________ */
body {
    background: #fff;
    font-family: 'Brandon', sans-serif;
    color: #fff;
    font-size: 16px;
    font-weight: 200;
}

section#wrapper {
    width: 1280px;
    height: 720px;
    margin: 0 auto;
    padding: 0;
    position: relative;
}

/*___________ Carousel _____________ */
.carousel-inner {
	min-width: 1280px;
	min-height: 720px;
}

.carousel .item {
	width: 1280px;
	height: 720px;
}

.carousel-control { display: none; }

/*
  Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://codepen.io/Rowno/pen/Afykb
*/

.carousel-fade .carousel-inner .item {
  opacity: 0;

  transition: opacity .6s ease-out;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .item.active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;

}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {

    z-index: 2;
}

.front .carousel-fade .carousel-control { display: none; }

/*
  WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  Need to override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.fade-out {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}


/*___________ Info display _____________ */
/*.item { background: rgba(0,0,0,.3); }*/

.item#slide-01 { padding: 200px 0 0;}
.item#slide-01 img { margin: 0 0 0 71px; width: 600px; }

.item#slide-02 { padding: 40px;}
.item#slide-02 img { width: 400px; }

h2#current-dollars, h2#current-votes { color: rgba(202,48,115,1.0); }

/*.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-train-station .odometer-digit { color: #f6bd17; }*/

h2 span.odometer {
	font-size: 10rem;
}

#goal {
	position: absolute;
	top: 0;
	right: 100px;
	width: 500px;
	height: 500px;
	text-align: center;
	-webkit-transform: rotate(-10deg);
}

#goal span.main-star {
	position: absolute;
	top: 0;
	left: 0;
	width: 500px;
	height: 500px;
	font-size: 30em;
	background-position: 0 0;
	background-repeat: no-repeat;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 4px rgba(202,48,115,0.8);
}
#goal span.sub-star {
	position: absolute;
	top: 20px;
	left: -20px;
	width: 500px;
	height: 500px;
	font-size: 30em;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 12px rgba(202,48,115,0.8);
}


#goal h2 {
	position: absolute;
	top: 150px;
	left: 167px;
	color: rgba(202,48,115,0.8);
	font-size: 5.5rem;
}

#goal h3 {
	position: absolute;
	top: 212px;
	left: 200px;
	color: rgba(202,48,115,0.8);
	font-size: 5.0rem;
	text-transform: uppercase;
}

/*___________ Shiny ________________*/
h2.shiny {
	/*  styling */
	display: inline-block;
	width: 100%;
	text-transform: uppercase;
	font-size: 10em;
	font-weight: bold;
	letter-spacing: 5px;
	-webkit-text-fill-color: rgba(120,120,120,0.8);
	-webkit-text-stroke: 4px rgba(202,48,115,1.0);
	padding: 25px;
	/*  centering */
	position: absolute;
	text-align: center;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	/* Animation */
  background: #222 -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
  -webkit-background-size: 150px 170px;
  -webkit-background-clip: text;
  -webkit-animation-name: shine;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
}

/*  */
@-webkit-keyframes shine {
	0% {
		background-position: -1065px 0px;
	}
	30% {
		background-position: 1065px 0px;
	}
	100% {
		background-position: 1065px 0px;
	}
}