body {
padding-bottom:40px;
color:#5a5a5a
}

.navbar-wrapper {
position:absolute;
top:0;
left:0;
right:0;
z-index:15;
margin-top:20px;
margin-bottom:-90px
}

.navbar .navbar-inner {
border:0;
-webkit-box-shadow:0 2px 10px rgba(0,0,0,.25);
-moz-box-shadow:0 2px 10px rgba(0,0,0,.25);
box-shadow:0 2px 10px rgba(0,0,0,.25)
}

.navbar .brand {
padding:14px 20px 16px;
font-size:16px;
font-weight:700;
text-shadow:0 -1px 0 rgba(0,0,0,.5)
}

.navbar .nav>li>a {
padding:15px 20px
}

.navbar .btn-navbar {
margin-top:10px
}

.carousel {
margin-bottom:60px
}

.carousel .container {
position:relative;
z-index:9
}

.carousel-control {
height:80px;
margin-top:0;
font-size:120px;
text-shadow:0 1px 1px rgba(0,0,0,.4);
background-color:transparent;
border:0;
z-index:10
}

.carousel .item {
height:500px
}

.carousel img {
position:absolute;
top:0;
left:0;
min-width:100%;
height:500px
}

.carousel-caption {
background-color:transparent;
position:static;
max-width:550px;
padding:0 20px;
margin-top:200px
}

.carousel-caption .lead,.carousel-caption h1 {
margin:0;
line-height:1.25;
color:#fff;
text-shadow:0 1px 1px rgba(0,0,0,.4)
}

.carousel-caption .btn {
margin-top:10px
}

.marketing .span4 {
text-align:center
}

.marketing h2 {
font-weight:400
}

.marketing .span4 p {
margin-left:10px;
margin-right:10px
}

.featurette-divider {
margin:80px 0
}

.featurette {
padding-top:120px;
overflow:hidden
}

.featurette-image {
margin-top:-120px
}

.featurette-image.pull-left {
margin-right:40px
}

.featurette-image.pull-right {
margin-left:40px
}

.featurette-heading {
font-size:50px;
font-weight:300;
line-height:1;
letter-spacing:-1px
}

@media (max-width:979px) {
.container.navbar-wrapper {
margin-bottom:0;
width:auto
}

.navbar-inner {
border-radius:0;
margin:-20px 0
}

.carousel .item {
height:500px
}

.carousel img {
width:auto;
height:500px
}

.featurette {
height:auto;
padding:0
}

.featurette-image.pull-left,.featurette-image.pull-right {
display:block;
float:none;
max-width:40%;
margin:0 auto 20px
}
}

@media (max-width:767px) {
.navbar-inner {
margin:-20px 0
}

.carousel {
margin-left:-20px;
margin-right:-20px
}

.carousel .item {
height:300px
}

.carousel img {
height:300px
}

.carousel-caption {
width:65%;
padding:0 70px;
margin-top:100px
}

.carousel-caption h1 {
font-size:30px
}

.carousel-caption .btn,.carousel-caption .lead {
font-size:18px
}

.marketing .span4+.span4 {
margin-top:40px
}

.featurette-heading {
font-size:30px
}

.featurette .lead {
font-size:18px;
line-height:1.5
}
}

.weather-app {
background:linear-gradient(#13d8ff,#002aa3);
color:#fefefe;
max-width:375px;
margin:0 auto;
box-shadow:0 2px 3px rgba(0,0,0,.1);
border-radius:6px;
box-sizing:border-box;
padding:10px;
overflow:hidden;
position:relative
}

.weather-app .date-time {
margin-top:20px;
margin-bottom:15px;
border-bottom:1px solid #959595;
padding-bottom:15px;
position:relative;
overflow:hidden;
font-size:94%
}

.weather-app .time {
font:5.5em/.8em Roboto;
float:left;
overflow:hidden
}

.weather-app .time span {
font-size:.15em;
font-weight:700;
line-height:1.25em;
vertical-align:top;
margin-left:5px
}

.weather-app .date {
float:right;
margin-right:35px;
margin-top:30px
}

.weather-app .date .day {
font-family:Roboto;
font-weight:700
}

.weather-app .weather-icon {
color:#2c2c2c;
font-size:2.25em;
line-height:1.5em;
z-index:1;
position:absolute;
right:5px;
top:5px
}

.weather-app .location-weather,.weather-app .weather-temp {
font-size:90%
}

.weather-app .location-weather {
position:relative
}

.weather-app .location-weather label {
position:absolute;
left:-1px;
top:-5px;
transition:left .3s ease
}

.weather-app .location-weather label.hovered>.set-icon {
color:#999
}

.weather-app .location-weather label.hovered~.weather-status,.weather-app .location-weather label:hover~.weather-status {
margin-left:5px;
max-width:208px
}

.weather-app .location-weather .set-icon {
color:#959595;
cursor:pointer;
font-size:1.5em;
float:left;
line-height:1.5em;
padding:0 5px 0 0;
transition:color .2s ease
}

.weather-app .location-weather .set-icon:hover {
color:#999
}

.weather-app .location-weather .weather-status {
float:left;
overflow:hidden;
margin-left:-8px;
max-width:247px;
width:100%;
position:relative;
transition:all .3s ease
}

.weather-app .location-weather .userCity {
border:none;
box-sizing:border-box;
border-bottom:1px solid #1e90ff;
font-size:1.25em;
padding:0 0 5px 5px;
width:100%;
visibility:hidden;
position:absolute;
margin-left:-85px;
top:0
}

.weather-app .location-weather .userCity:focus {
outline:0;
visibility:visible
}

.weather-app .location-weather #xBxHack {
display:none
}

.weather-app .location-weather #xBxHack:checked~.userCity {
visibility:visible
}

.weather-app .location-weather #xBxHack:checked~.city,.weather-app .location-weather #xBxHack:checked~.forcast {
visibility:hidden
}

.weather-app .location-weather .city {
font-family:Roboto;
font-weight:700;
font-size:1.1em;
line-height:.9em;
cursor:pointer
}

.weather-app .location-weather .forcast {
font-size:1em;
color:#999;
text-transform:capitalize
}

.weather-app .weather-temp {
float:right;
overflow:hidden;
margin-top:-1px
}

.weather-app .weather-temp .temperature {
color:#00f8ffde;
float:left;
font-family:Roboto;
font-weight:700;
font-size:3.4em;
line-height:1em;
margin-right:5px;
margin-top:-5px
}

.weather-app .weather-temp .temperature:after {
content:"\00b0";
font-size:.7em;
font-family:Roboto;
line-height:1.1em;
vertical-align:text-top
}

.weather-app .weather-temp .high-low {
color:#e9e9e9d4;
font-family:Roboto;
line-height:1.2em;
float:right;
text-align:right
}

.weather-app .weather-temp .high-low .high:after,.weather-app .weather-temp .high-low .low:after {
content:"\00b0";
font-size:.8em;
font-family:Roboto;
line-height:1.25em;
vertical-align:text-top
}

@media screen and (min-width:380px) {
.weather-app .weather-icon {
color:#fff
}

.weather-app .weather-icon:after {
background:#444;
border-radius:50%;
border:3px solid #1e90ff;
content:"";
height:160px;
width:160px;
position:absolute;
top:-90px;
right:-90px;
z-index:-1
}

.weather-app .date-time {
font-size:110%
}

.weather-app .location-weather label:hover~.weather-status {
max-width:233px
}

.weather-app .location-weather .weather-status {
max-width:235px;
width:85%
}

.weather-app .high-low .high:before,.weather-app .high-low .low:before {
font-size:.8em;
font-weight:700;
text-transform:uppercase;
vertical-align:middle;
text-align:left
}

.weather-app .high-low .high:before {
content:"high: "
}

.weather-app .high-low .low:before {
content:"low: "
}
}