html,
body {
    background: #91c5ed url(../img/background.png) no-repeat center top fixed;
    background-size: contain;
}

body {
    font-family: 'Open Sans', sans-serif;
    padding: 0;
    margin: 0;
    color: #000;
}

.wrapper {
	-webkit-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.8);
	-moz-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.8);
	box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.8);
}

.container {
    padding: 0;
    margin: 0 auto;
    background-color: #FFF;
    max-width: 600px;
    overflow: hidden;
}
    
/* Display Sections */

#displayIntro {
    display: block;
}

#displayResults {
    display: none;
}

/* Headers and Fonts */

a {
    color: #FFF;
}

	a:hover {
		color: #FFF;
	    text-decoration: underline;
	}

p {
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1.6em;
}

.text-highlight {
    color: #FFF;
    font-weight: 500;
}

h1 {
	margin: 0;
}

h2 {
    font-size: 1.8em;
    line-height: 1.4em;
    background: #fee6ce;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
}

h3 {
	font-size: 1.8em;
    line-height: 1.4em;
}

h4 {
    font-size: 1.5em;
    color: #f6830e;
    margin: 20px 0 0;
    font-weight: normal;
}

h5 {
    font-size: 1.2em;
    color: #f6830e;
    line-height: 1.4em;
    margin: 0;
}

label {
    font-size: 1.2em;
    margin: 10px 0;
    width: 100%;
    font-weight: normal;
}

.big-text {
	font-size: 1.5em;
	color: #f6830e;
	font-weight: 700;
}

/* Sections */

section {
	text-align: center;
	background: #FFF;
}

.slim-container {
	margin: 0 auto;
	max-width: 614px;
}

#headerSection, #headerSection2 {
    background: #0761c1 url(../img/background-header.jpg) no-repeat center top;
    background-size: cover;
    padding: 20px 20px 35px;
    color: #FFF;
    position: relative;
}

	#headerSection p, #headerSection2 p {
	    max-width: 500px;
	    margin: 10px auto;
	    font-size: 1.1em;
	    color: #000;
	}
	
	#headerSection2 {
		padding-bottom: 84px;
	}
	
	#headerSection2 p {
	    margin: 10px auto 65px;
	}
	
	#headerSection .btn {
		position: relative;
		z-index: 2;
	}

#inputSection {
    position: relative;
    background-color: #FFFFFF;
}

	#inputSection form {
		margin: 40px auto 5px;
	    border-radius: 10px;
	    border: 1px solid #fee6ce;
	}
	
	#inputSection h2 {
	    margin-top: -10px;
	}

#timeResults p {
	font-size: 25px;
}

#dreamSection {
	background: #031044 url(../img/background-starry.jpg) fixed no-repeat center center;
	background-size: cover;
	position: relative;
	padding: 100px 0 140px;
}

	#dreamSection .dreamTitle {
		color: #FFF;
		background-color: rgba(0,4,17,0.4);
	}
	
#snoozeSection {
	
}
	
	#snoozeResults .snoozeBlock {
		opacity: 0;
		display: none;
	}
	
	#snoozeResults .separator {
		display: none;
	}
	
	#snoozeResults .snoozeImg {
		width: 100%;
		max-width: 206px;
	}
	
	#snoozeResults .snoozeText {
		padding: 50px 0;
	}
	
#activitySection {
	background: #499ddb url(../img/activity-background.jpg) no-repeat center top;
	background-size: contain;
	position: relative;
	padding: 100px 0 140px;
}
	 
	#activitySection h2 {
		background-color: rgba(38,123,185,0.5);
	}
	
	#activitySection .slim-container .activity {
		margin-bottom: 40px;
		opacity: 0;
	}

#bubblesContainer {
	position: relative;
}


.bubbleIcon {
	margin: 0 auto;
	max-width: 60px;
	width: 100%;
}

.bubbleMan {
	max-width: 129px;
	width: 100%;
	vertical-align: middle;
}

.triangle-border {
	position:relative;
	padding:15px;
	margin:0;
	border: none;
	color:#333;
	background:#fff;
	/* css3 */
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:50px;
}

/* Variant : for left positioned triangle
------------------------------------------ */

.triangle-border.left {
	margin-left:10px;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-border.right {
	margin-right:10px;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border:before {
	content:"";
	position:absolute;
	bottom:-20px; /* value = - border-top-width - border-bottom-width */
	left:40px; /* controls horizontal position */
	border-width:20px 20px 0;
	border-style:solid;
	border-color:#FFF transparent;
	/* reduce the damage in FF3.0 */
	display:block;
	width:0;
}

/* Variant : top
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.top:before {
	top:-20px; /* value = - border-top-width - border-bottom-width */
	bottom:auto;
	left:auto;
	right:40px; /* controls horizontal position */
	border-width:0 20px 20px;
}

/* Variant : left
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.left:before {
	top:40%; /* controls vertical position */
	bottom:auto;
	left:-30px; /* value = - border-left-width - border-right-width */
	border-width:15px 30px 15px 0;
	border-color:transparent #FFF;
}

/* Variant : right
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.right:before {
  top:40%; /* controls vertical position */
  bottom:auto;
  left:auto;
  right:-30px; /* value = - border-left-width - border-right-width */
  border-width:15px 0 15px 30px;
  border-color:transparent #FFF;
}

#footerSection {
    padding: 105px 20px 30px;
    text-align: center;
    margin: 0 auto;
    background: #0761c1 url(../img/footer.gif) no-repeat center top;
    background-size: cover;
}

#footerSection p {
    max-width: 700px;
    margin: 0 auto;
}

#loadContainer {
    background: rgba(0, 0, 0, 0.6);
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    display: none;
    z-index: 999;
}

#loading {
    font-size: 1.2em;
    text-align: center;
    position: absolute;
    background-color: #df9f01;
    color: white;
    border-radius: 50px;
    width: 220px;
    height: 65px;
    padding: 20px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
}

#shareBlock {
    background: #f78306;
    display: block;
    margin: 54px auto 40px;
    max-width: 700px;
    padding: 25px 30px 6px;
    text-align: center;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.resultSection {
    padding: 25px 20px 0px;
}

.cloud-top {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}

.cloud-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}

.floating-clock-top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	height: 104px;
	width: 91px;
	margin: 0 auto;
}

.floating-clock-bottom {
	position: absolute;
	bottom: 24px;
	left: 0;
	right: 0;
	z-index: 3;
	height: 104px;
	width: 91px;
	margin: 0 auto;
}

.separator {
	position: relative;
	margin: 15px 0;
}

	.separator span {
		position: relative;
		text-align: center;
		color: #AAA;
		background: #FFF;
		display: inline;
		text-transform: uppercase;
		padding: 0 20px;
		z-index: 1;
	}
	
	.separator::before {
	    background: #ccc none repeat scroll 0 0;
	    content: "";
	    display: block;
	    height: 1px;
	    left: 0;
	    position: absolute;
	    top: 50%;
	    width: 100%;
	    z-index: 1;
	}

.separator-zzz {
	position: relative;
	margin: 25px 0 15px;
}

	.separator-zzz::before {
	    background: #90c5ed none repeat scroll 0 0;
	    content: "";
	    display: block;
	    height: 1px;
	    left: 0;
	    position: absolute;
	    top: 50%;
	    width: 100%;
	    z-index: 1;
	}
	
	.separator-zzz span {
		position: relative;
		text-align: center;
		color: #90c5ed;
		background: #FFF;
		display: inline;
		text-transform: uppercase;
		padding: 0 20px;
		z-index: 1;
	}
	
		.separator-zzz span img {
			width: 75px;
		}

.aboutStyle {
    border: 3px solid #df9f01;
}

#shareSection {
    background-color: #ececec;
    border-top: 1px solid #c4c4c4;
    padding: 20px;
}

.bar {
	opacity: 0;
}

#bar0 {
	background: #238bc0;
}

	#bar0 .innerbar {
		background: #319bd5;
	}

#bar1 {
	background: #24bbc2;
}

	#bar1 .innerbar {
		background: #3bcad0;
	}
	
#bar2 {
	background: #24c288;
}

	#bar2 .innerbar {
		background: #32d499;
	}
	
#bar3 {
	background: #24c254;
}

	#bar3 .innerbar {
		background: #37cc64;
	}
	
#bar4 {
	background: #36c225;
}

	#bar4 .innerbar {
		background: #4fcf3e;
	}
	
#bar5 {
	background: #8dbb1d;
}

	#bar5 .innerbar {
		background: #a1cf31;
	}
	
#bar6 {
	background: #aea919;
}

	#bar6 .innerbar {
		background: #c9c233;
	}
	
#bar7 {
	background: #c19324;
}

	#bar7 .innerbar {
		background: #cf9d24;
	}
	
#bar8 {
	background: #c26e25;
}

	#bar8 .innerbar {
		background: #d27c31;
	}
	
#bar9 {
	background: #c15024;
}

	#bar9 .innerbar {
		background: #d05a2c;
	}
	
#bar10 {
	background: #c83931;
}

	#bar10 .innerbar {
		background: #d74840;
	}

/* Form elements */

form {
	padding: 0px 30px 20px;
	margin: 20px auto;
    max-width: 700px;
    background: #fbf3e0;
}

.form-control {
    border: 2px solid #ccc;
    border-radius: 6px;
    max-width: 100px;
    display: inline;
    height: 52px;
    font-size: 1.0em;
    padding-left: 20px;
    /*background: url(../img/arrow.png) no-repeat right #fff;
    -webkit-appearance: none;
    background-position: 94% 50%;*/
}

	.form-control:active, .form-control:focus {
		
	}
	
input {
	border: 2px solid #ccc;
    border-radius: 6px;
    padding: 5px;
    font-size: 1.0em;
    text-align: center;
    max-width: 100px;
}

.form-group {
	border-bottom: 1px solid #fee6ce;
	margin-bottom: 0;
}

.timeSelect {
	padding-bottom: 20px;
}

/* Images */

.titleClock {
	width: 100%;
	max-width: 575px;
	margin: 0;
}

.titleImg {
    width: 100%;
    max-width: 575px;
    margin: 0;
}

.hillarysLogo {
    max-width: 200px;
    margin-bottom: 20px;
    margin-top: 20px;
}

/* Buttons */

.btn-default {
    font-size: 25px;
    border-radius: 30px;
    border: 3px solid #FFF;
    background-color: #f78306;
    color: white;
/*     padding: 5px 50px 9px; */
    margin: 15px 0px 0px;
}

	.btn-default:hover {
	    background-color: #c01f07;
	    border-color: #FFF;
	    color: #FFF;
	}
	
	.btn-default .arrow {
	    margin-left: 12px;
	    padding-bottom: 1px;
	    width: 14px;
	}

.shareButton {
    list-style: none;
    position: relative;
    height: 55px;
    padding: 0px;
    width: 55px;
    margin: 20px 7px 10px;
    display: inline-block;
    cursor: pointer;
}

.shareButton:hover {
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.shareButton img {
    width: 40px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.shareContainer {
    padding-bottom: 10px;
    text-align: center;
    color: #FFF;
    position: relative;
}

.social-clock {
	position: absolute;
	top: -120px;
	left: 0;
	right: 0;
	margin: 0 auto;
	height: 104px;
}

/* Result Items */

article {
    position: relative;
    padding: 20px 0;
    border: 2px;
    max-width: 700px;
    margin: 0px auto 0px;
    overflow: hidden;
}

.bar {
    background-color: black;
    color: white;
    margin-bottom: 10px;
    padding: 18px 30px;
    position: relative;
    text-align: left;
    width: 100%;
}

	.bar .innertext {
	    display: block;
	    position: relative;
	    width: 60%;
	    z-index: 2;
	}
	
	.bar .hourstext {
	    position: absolute;
	    right: 20px;
	    top: 20px;
	    z-index: 3;
	}
	
	.bar .innerbar {
	    height: 100%;
	    left: 0;
	    position: absolute;
	    top: 0;
	    width: 0;
	    z-index: 1;
	}

ul {
    padding: 0px;
    margin: 0px;
}

.listItem {
    padding: 10px 10px;
    width: 100%;
    margin: 0 auto;
}

.listPadding {
    border-bottom: 3px solid #fbf3e0;
}

.listItem p,
.listItem h4 {
    text-align: center;
}

.listItem img {
    width: 100%;
    max-width: 100px;
}

.listName {
    font-size: 2.5em;
    font-weight: 700;
    margin: 0px;
    line-height: 1em;
    margin: 10px 0px 7px;
}

.listCost {
    font-size: 1em;
    font-weight: 300;
    margin: 0px;
    text-transform: none !important;
    font-family: "Open Sans";
    line-height: 1.2em;
}

.listButton {
    text-align: center;
    padding: 20px 40px;
    margin-bottom: 30px;
    background-color: #fbf2e0;
    font-size: 1.5em;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    border: 3px solid #df9f01;
}

/* Other UI elements */

.bottomBar {
    position: relative;
    width: 100%;
    margin-top: 0px;
    background-color: #df9e01;
    z-index: 1;
    height: 70px;
}

.bottomBar p {
    position: absolute;
    width: 100%;
    top: 15px;
    font-size: 1.6em;
    font-weight: 300;
}

/* Error Message */

#displayError {
    position: relative;
    background-color: #ffeceb;
    padding: 15px;
    max-width: 450px;
    margin: 30px auto 10px;
    border: solid 3px #f7685f;
    color: #f7685f;
    opacity: 0;
    display: none;
}

#displayError:after {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #f7685f;
    border-width: 10px;
    margin-left: -10px;
}

/* Animation */

.animate {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

/* Larger Devices */

@media only screen and (min-width: 992px) {
    .container {
        width: 100%;
        max-width: 900px;
    }
    
    .listItem p,
    .listItem h4 {
        text-align: left;
    }
}

@media only screen and (max-width: 991px) {

}

/* Smaller Devices */

@media(max-width:380px) {
    article {
	    padding-left: 10px;
	    padding-right: 10px;
    }
    
    #clock2 {
	    top: -17px;
    }
    
    #headerSection2 {
		padding-bottom: 48px;
	}
    
    #inputSection {
	    margin: 0 10px;
    }
    
    #inputSection form .btn {
	    width: 100%;
    }
    
    .slim-container {
	    max-width: none;
    }
    
    .form-control, input {
	    font-size: 1.2em;
	    padding-top: 10px;
	    padding-bottom: 10px;
	}
	
	.form-control {
		padding-left: 5px;
		padding-right: 0;
	}
	
	.btn-default {
		font-size: 21px;
	}
	
	.triangle-border {
		padding: 3px;
		border-radius: 12px;
	}
	
	.triangle-border.left:before {
		left:-20px;
		border-width:15px 20px 15px 0;
	}
	
	.triangle-border.right:before {
		right:-20px;
		border-width:15px 0 15px 20px;
	}
	
	.bubbleTextContainer p {
		font-size: 1em;
	}
	
	#ampm {
		max-width: 75px;
	}
	
	#dreamSection {
		padding-top: 54px;
		padding-bottom: 75px;
	}
	
	.floating-clock-bottom {
		bottom: -25px;
	}
	
	#snoozeResults .snoozeText {
		padding: 10px 0;
	}
	
	.bubbleMan {
		max-width: 80px;
	}
	
	#shareBlock {
		border-radius: 0;
	}
	
	.big-text {
		display: block;
	}
	
	#activitySection {
		padding-bottom: 67px;
	}
	
	#activitySection .activity {
		padding: 0;
	}
	
	#activity1 div.col-xs-4, #activity3 div.col-xs-4, #activity5 div.col-xs-4 {
		padding-right: 0;
		float: right;
	}
	
	#activity2 div.col-xs-4, #activity4 div.col-xs-4 {
		padding-left: 0;
	}
	
	#activity1 div.col-xs-8, #activity3 div.col-xs-8, #activity5 div.col-xs-8 {
		padding-left: 0;
	}
	
	#activity2 div.col-xs-8, #activity4 div.col-xs-8 {
		padding-right: 0;
		float: right;
	}
	
	#footerSection {
		padding-top: 185px;
	}
}