/*!
 * Start Bootstrap - Full Slider HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

html,
body {
    height: 100%;
    color: #000;
    background: #333;
	overflow-x: hidden;
}

 h1{margin:0.6em 0 0;font-size:2em; color: #000;}
.h1,h1{
	font-size:30px; 
line-height: 10px; 
text-align: right; 
color: #fff; 
text-shadow: 1px 1px 0 rgba(0,0,0,0.7), 0 0 120px #000, 0 0 80px #000; 
font-style: italic; 
text-transform: uppercase;
font-family: anton, sans-serif;
line-height: 0.95;
}
  @media (max-width:700px){.h1,h1{margin-left: 240px;font-size: 17px;}}
  @media (max-width:480px){.h1,h1{text-align: left; margin-left: 0;margin-top: 0px; font-size: 14px;}}

.carousel,
.item,
.active {
    height: 100%;
}

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

.carousel-inner {
    height: 100%;
}

.navbar-brand {
  padding: 0px;
}
.navbar-inverse {
	background: none;
}
/* Background images are set within the HTML using inline CSS, not here */

.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.fill.alignTop {
	background-position: center top;
}
.smallerImgWrap {
	width: 80%;
	height: 500px; 
	margin: 0 auto;
	text-align: center;
}
.smallerImg {
    margin: 260px 0 0 320px;
    box-shadow: 0px 6px 30px rgba(0,0,0,0.3);
    width: 60%;
}

.deets {
    position: absolute;
    top: 30%;
    z-index: 999;
    width: 30%;
    background: rgba(255,255,255, 0.9);
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
}

.wider {
    width: 50%;
}

.deets-left {
    left: 10%;
}
.deets-right {
    right: 10%;
}
@media (max-width:600px){
    .deets {
        width: 80%;
        top: 150px;
    }
}
.deets h4 {
    text-transform: uppercase;
    font-size: 26px;
    margin-bottom: 10px;
    font-weight: bold;
}

.deets h3 {
    font-size: 16px;
}

.deets-img {
    margin: 0 auto;
    text-align: center;
    margin-top: -100px;
}

footer {
    margin: 50px 0;
}

.horsepower-container {
    position: absolute;
    bottom: 10%;
    left: 10%;
    width: 550px;
    line-height:20px;
    color: white;
    z-index: 9999;
    text-align: center;
}

.horsepower {
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 40px;
    border: 1px solid white;
    text-align: left;
    background: rgba(211, 176, 176, 0.7);
}

.label-start {
    float: left;
    margin-left: -5px;
}

.label-end {
    float: right;
    margin-right: -10px;
}


.bar {
    height: 100%;
    background: url(../images/bar.png) no-repeat right;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    -webkit-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;
}

.bar p {
    margin-left: 20px;
    padding: 12px 0 10px 0;
	margin-bottom: 0;
}


.bar span {
    font-size: 10px;
    text-transform: uppercase;
}
@media screen and ( max-height: 600px ){
    .horsepower-container {
         bottom: 10px;
        width: 80%;
        line-height:10px;
    }
    .horsepower {
        font-size: 12px;
    }

    .bar p {
        font-size: 12px;
        padding: 5px 0 0px 0;
        margin: 0 0 0 5px;
    }
}

@media (max-width:600px){
    .horsepower-container {
        /*position: relative;*/
        bottom: 10px;
        width: 80%;
        line-height:10px;
    }

    .bar p {
        font-size: 12px;
        padding: 5px 0 0px 0;
        margin: 0 0 0 5px;
    }

    .deets h4 {
        text-transform: uppercase;
        font-size: 20px;
        margin-bottom: 10px;
        font-weight: bold;
    }

}

.film-list {
    position: absolute;
    top: 100px;
    z-index: 9999;    
    overflow: hidden;
    background: rgba(0, 0, 0, 0.6);
    text-align: center;
	width: 100%;
}

.film-list img {
    width: 100%;
    max-width: 100%;
}

.film-list ul {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    width: 1560px;
}

.film-list ul li {
    display: inline;
    float: left;
    text-align: left;
    position: relative;
}

.film-list ul li a {
    color: white;
    opacity: 0.6;
    font-size: 20px;
    font-weight: bold;	
	transition: opacity 0.4s;
    text-decoration: none;
    border-right: 1px solid black;
     line-height: 2.5em;
     padding: 2em 0.5em;
}
.film-list ul li a:hover {
    opacity: 1;
	transition: opacity 0.15s;
    text-decoration: none;
}

.film-list li.current a {
	opacity: 1;
    font-size: 36px;
    text-decoration: none;
    line-height: 1.4em;
}

@media screen and (max-width: 480px){
    .film-list {
        top: 100px;
		overflow: auto;
    }

    .film-list ul li a {
        color: white;
        opacity: 0.6;
        font-size: 15px;
        font-weight: bold;  
        transition: opacity 0.4s;
        text-decoration: none;
        border-right: 1px solid black;
         line-height: 2.5em;
         padding: 2em 0.5em;
    }

    .film-list li.current a {
        opacity: 1;
        font-size: 26px;
        text-decoration: none;
        line-height: 1.4em;
    }

	.carousel-control .icon-prev, .carousel-control .icon-next {
		width: auto;
		height: auto;
	}
	.carousel-control .icon-prev, .carousel-control .glyphicon-chevron-left {
		left: 0;
		margin-left: 0;
	}
	.carousel-control .icon-next, .carousel-control .glyphicon-chevron-right {
		right: 0;
		margin-right: 0;
	}
}

@media screen and (max-width: 1200px){
    .smallerImg {
        width: 60%;
    }
} 
@media (max-width:480px){

	.smallerImg{ 	
        width: 100%;
		margin: 650px 0 0 0;
	}
	
		
	.film-list li.current:before {
		display: none;
	}
 }

@media screen and (max-width: 480px){
    .container > .navbar-header,
    .container-fluid > .navbar-header,
    .container > .navbar-collapse,
    .container-fluid > .navbar-collapse {
      margin-right: -15px;
      margin-left: -15px;
      float: none;
    }
} @media (max-width:480px){.fill{height: 140%;}} @media (expand){.fill{height: 200%;}