/*------------------------
BODY/WRAPPERS
-------------------------*/
body {
	margin:0;
	background-color: #444;
	background-image: url('../images/arches.png');
	width:100%;
}
.loading {
	background: url(../images/load.gif) center no-repeat #fff;
	/*background: #fff;*/
	height:100vh;
	width:100vw;
	opacity: .1;
}
/*------------------------
FONT STYLES
-------------------------*/
body {
	font-family: 'Open Sans', Helvetica, sans-serif;
	font-size: 18px;
	color:white;
}

a.white-link {
	color: white;
	text-decoration: underline;
}

a#no-decoration {
	text-decoration: none!important;
}

hr.dashed-line {
	margin:2% 0;
	border-style: dashed;
}

a.white {
	color:white;
}

p.intro-text{
	/*text-align:center;*/ 
	margin: 0 0 5% 0;
}

ol.above-button {
	margin-bottom: 5%;
}
h1.first-slide {
	color:white;
	text-align:center;   
	margin-top: 100px;
	font-size:60px;
}

h1.h1-top {
	margin-top: 100px;
}

h1.centered-top {
	margin-top: 100px;
	/*text-align:center;*/ 
}

h1.centered-bottom {
	margin-bottom: 5%;
	/*text-align:center;*/ 
}

h1.h1-answer {
	margin-top: 100px;
}

.h1-answer.about {
	margin-top: 50px;
}

h1.headline {
	margin-top: 100px;
	margin-bottom: 5%;
}

h2.h2-question {
	margin-top: 100px;
}

h2.sub-headline {
	/*text-align:center;*/ 
	margin-top: 100px;
	margin-bottom: 5%;
}

h2.centered-above-text {
	/*text-align:center;*/  
	margin-bottom: 5%;
}

h2.h2-centered {
	/*text-align:center;*/ 
}

h2.question-descriptor {
	margin-bottom: 5%;
}

h2.h2-answer {
	margin-top: 100px;
	margin-bottom: 5%;
}

h3.h3-answer {
	margin-top: 100px;
	margin-bottom: 5%;
}

h3.sub-h3 {
	margin-bottom: 3%;
}

h4.h4-descriptor {
	margin-bottom: 5%;
}

h4.h4-subdescription {
	margin-bottom:5%;
	margin-top: 3%;
}


/*------------------------
HEADER
-------------------------*/
.header {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	min-height:20px;
	background: #333;
	color:#fff;
	margin-top: 0;
}
.header-items {
	margin:0;
	padding: 0;
}
.header-items > li {
	display: inline-block;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 20px;
}

.dropdown-menu>li>button {
  text-align: left;
   padding: 5px 12px!important;
}

.dropdown-menu>li>a {
  padding: 5px 12px;
  }

nav div.container {
	margin-left:0!important;
	padding-left:30px;
	width:100%;
}

.navbar-inverse {
  background-color: rgba(0,0,0,.3);
}

.navbar-nav {
  float: right;
  padding-right:10px;
}

li#social a {
	padding-right: 0!important;
}

.navbar-brand {
  padding: 8px;
}

.navbar {
  min-height: 60px!important;
}

.navbar-nav>li>a {
  padding-top: 20px;
}

.dropdown-menu {
	background-color: #080808;
}

#question {
  position: fixed;
  width: 100%;
  height: 95%;
  top: 59px;
  float: none;
  padding: 3% 2% 4% 4%;
  overflow: scroll;
}

#about-us {
  position: fixed;
  width: 100%;
  height: 95%;
  top: 59px;
  float: none;
  padding: 3% 2% 4% 4%;
  overflow: scroll;
}

.question-item {
	font-size: 16px;
	color: #888;
}
.question-item:hover{
	cursor: pointer;
	color:#f0f0f0;
}

.answer-item {
	margin-bottom: 10px;
  	margin-top: 5px;
}

#view-answers {
	margin-right: 30px;
}

/*------------------------
UI ELEMENTS
-------------------------*/
.button{
	font-size: 20px;
	padding: 10px;
	background: transparent;
	color:#fff;
	border:2px solid #fff;
	margin: 0 15px 0 0;
  	width: 100px;
  	-webkit-transition: all .4s linear;
	-o-transition: all .4s linear;
	-moz-transition: all .4s linear;
	-ms-transition: all .4s linear;
	transition: all .4s linear;
}

#firstbutton {
	display: block;
  	margin: 0 auto;
  	margin-top: 5%;
  	-webkit-transition: all .4s linear;
	-o-transition: all .4s linear;
	-moz-transition: all .4s linear;
	-ms-transition: all .4s linear;
	transition: all .4s linear;
	width: 187px;
}

button.intro {
	width: 100%!important;
  	text-align: left!important;
  	border:none!important;
}

h1.intro {
	margin:10px 0!important;
}

div.intro {
	  margin-top: 10%;
}

#firstbutton:active, #firstbutton:hover, .button:active, .button:hover {
	background: rgba(0,0,0,.3);
}

div.button-area {
	position: fixed;
	display: block;
	width: 100%;
	margin: 0 auto;
	bottom:20px;
	background: rgba(0,0,0,.2);
  	padding: 1% 0;
}

.button-back {
	background: transparent;
  	border: none;
  	font-size: 24px;
  	margin-right: 10px;
  	-webkit-transition: all .4s linear;
	-o-transition: all .4s linear;
	-moz-transition: all .4s linear;
	-ms-transition: all .4s linear;
	transition: all .4s linear;
}

.button-back:active, .button-back:hover {
	color: rgba(0,0,0,.3);
}

div.social-share {
	display: inline-block;
    margin: 0 2% 5%;
}
.navigation-trail {
	position: fixed;
	bottom:100px;
	width:100%;
}
#progressbar {
      width: 100%;
      height: 20px;
      background-color: rgba(0,0,0,.3);
      padding: 2px;
      margin: .6em 0;
      border: 1px #000 double;
      clear: both;
  }
  #progress {
      background: #A1C969; /*-- Color of the bar --*/
      height: 15px;
      width: 5%;
      max-width: 100%;
      float: left;
      -webkit-animation: progress 2s 1 forwards;
      -moz-animation: progress 2s 1 forwards;
      -ms-animation: progress 2s 1 forwards;
      animation: progress 2s 1 forwards;
  }
  #pbaranim {
      height: 15px;
      width: 100%;
      overflow: hidden;
      background: url('../images/progress.gif') repeat-x;
      -moz-opacity: 0.25;
      -khtml-opacity: 0.25;
      opacity: 0.25;
      -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25);
      filter: progid:DXImageTransform.Microsoft.Alpha(opacity=25);
      filter: alpha(opacity=25);
  }

.dropdown-menu>li>button {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: white;
  white-space: nowrap;
  border: none;
  font-size: 14px;
  width: 100%;
  padding-left: 0;
}

.dropdown-menu>li>a {
	color:white;
	width: 100%;
	-webkit-transition: all .4s linear;
	-o-transition: all .4s linear;
	-moz-transition: all .4s linear;
	-ms-transition: all .4s linear;
	transition: all .4s linear;
}

.dropdown-menu>li>button:focus, .dropdown-menu>li>button:hover {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}

/*style scroll in chrome and safari*/

::-webkit-scrollbar
{
  width: 12px;  /* for vertical scrollbars */
  height: 12px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb
{
  background: rgba(0, 0, 0, 0.2);
}

/*------------------------
CONTENT
-------------------------*/
/*.content {
	margin-top: 50px;
}*/
.row {
	margin:0!important;
}

.about-us {
	height: 100vh;
}

.section {
	position:absolute;
	height: 100vh;
	width:100%;
	color:#fff;
	display:none;

}
.section-style-1 {
	background: #5c4685;
	height: 100vh;
	width:100%;
	background-image: url('../images/arches.png');
	padding-bottom:50px;
}
.section-style-2 {
	background: #005e75;
	height: 100vh;
	width:100%;
	background-image: url('../images/arches.png');
	padding-bottom:50px;
}
.section-style-3 {
	background: #154175;
	height: 100vh;
	width:100%;
	background-image: url('../images/crissxcross.png');
	padding-bottom:50px;
}
.section-style-4 {
	background: #00705d;
	height: 100vh;
	width:100%;
	background-image: url('../images/crissxcross.png');
	padding-bottom:50px;
}
.section-style-5 {
	background: #5c4685;
	height: 100vh;
	width:100%;
	background-image: url('../images/asphalt.png');
	padding-bottom:50px;
}
.section-style-6 {
	background: #154175;
	height: 100vh;
	width:100%;
	background-image: url('../images/asphalt.png');
	padding-bottom:50px;
}
li.dropdown.take-me #start-page {
	display:none;
}
/*------------------------
IMAGES
-------------------------*/

img.leftside-character{
	/*margin-left: 50%;*/
	margin-top: 100px;
	float:right;
}
img.rightside-character{
	/*margin-right: 50%;*/
	margin-top: 100px;
	float: left;
}


/*------------------------
MEDIA QUERIES
-------------------------*/
@media all and (max-width: 1200px) {
	.section, .section-style-1, .section-style-2, .section-style-3, .section-style-4, .section-style-5, .section-style-6 {
		padding-top:1px;
		width:100%;
	}
	.col-lg-6, .col-lg-8 {
		width: 90%;
  		margin: 0 auto;
	}
	img.leftside-character, img.rightside-character {
		display:none;
	}
	
}

/*@media screen and (max-width: 979px) {
	.col-lg-6, .col-lg-8 {
		width: 90%;
  		margin: 0 auto;
	}
}*/

@media all and (max-width: 767px) {
	.navbar-inverse .navbar-collapse .navbar-nav {
	  float: left;
	}
	h1.first-slide {
		font-size: 26px!important;
		margin-top: 70px;
	}

	h1 {
		font-size: 20px!important;
		margin-top: 70px;
	}

	h2 {
  		font-size: 16px!important;
  		
	}

	h3, h4 {
	  	font-size: 14px!important;
	}

	.section, .section-style-1, .section-style-2, .section-style-3, .section-style-4, .section-style-5, .section-style-6 {
		height: 100vh;
	}

	.col-lg-6, .col-lg-8 {
		padding-top: 5%;
	}

	.big-list {
		font-size:16px;
	}

	h1.h1-top, h1.h1-answer {
 		margin-top: 70px;
	}

	#section59 .section-style-1, #section59 .section-style-2, #section59 .section-style-3, #section59 .section-style-4, #section59 .section-style-5, #section59 .section-style-6 {
		height: 100vh;
	}

	.navbar-inverse {
  		background-color: rgba(0,0,0,.3);
	}

	.navbar-collapse {
		background-color: rgba(0,0,0,.8);
		margin-left: -30px!important;
		margin-top: 10px!important;
		border-bottom: solid 1px #333!important;
		outline: solid 2px #333;
	}

	.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
	  	background-color: #404040;
	}

	h1.centered-bottom {
		margin-top: 30px;
	}

	h2.h2-question {
		margin-top: 70px;
		font-size: 20px!important;
	}
	#question {
	  width: 100%;
	  left:0;
	  background: black;
	  padding: 80px 10px!important;
	  overflow-y:scroll;
	  height:100%;
	}
	div.social-share {
 	  	width: 100px;
	}
	.save-answers {
		padding: 5px!important;
  		top: 60px!important;
	}
}
#percentage {
	display: none;
}