@charset "UTF-8";
/* CSS Document */

body {
	font-family: 'Cinzel', Georgia, serif;
	font-family: "Times New Roman, Times, serif";
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-family: "Helvetica Neue";
	background-color: #F2F2F2;
	font-size: 16px;
}

/*Bootstrap header*/
.hero {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(0,0,0,.75);
      -webkit-transform: translate3d(-50%,-50%,0);
         -moz-transform: translate3d(-50%,-50%,0);
          -ms-transform: translate3d(-50%,-50%,0);
           -o-transform: translate3d(-50%,-50%,0);
              transform: translate3d(-50%,-50%,0);
}
.hero h1 {
    font-size: 8em;    
    font-weight: bold;
    margin: 0;
    padding: 0;
}

/*Overlay*/
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -2;
    background-color: #F25C05;
    opacity: .1;
}

/*Custom Buttons*/
.btn {
	padding: 10px 40px;
}
.btn,
.btn:hover,
.btn:focus {
    color: #f5f5f5;
    background-color: #F25C05;
    border-color: #0D0D0D;
    margin: 20px auto;
}

.breakBtn:hover,
.breakBtn:focus {
    color: #f5f5f5;
    background-color: #F25C05;
    border-color: #0D0D0D;
    margin: 20px auto;
}

/*bootstrap hero*/
.fade-carousel .slides .slide-1 {
  height: 100vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
 /* background-image: url(); */
	background-color: #022873;
}

/*scroll indicator*/
.arrow-wrap {
  position:absolute;
  z-index:1;
  left:50%;
  top:80em;
  margin-left:-5em;
  background:#ed7c00;
	opacity: .9;
  width:10em;
  height:10em;
  padding:4em 2em;
  border-radius:50%;
  font-size:0.5em;
  display:block;
  box-shadow:0px 0px 5px 0px #333;
}

.arrow {
  float:left;
  position:relative;
  width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 3em 3em 0 3em;
	border-color: #f5f5f5 transparent transparent transparent;
  -webkit-transform:rotate(360deg)
}

.arrow:after {
  content:'';
  position:absolute;
  top:-3.2em;
  left:-3em;
  width: 0px;
height: 0px;
border-style: solid;
border-width: 3em 3em 0 3em;
border-color: #ed7c00 transparent transparent transparent;
  -webkit-transform:rotate(360deg)
}

.hint {
  position:absolute;
  top:0.6em;
  width:100%;
  left:0;
  font-size:2em;
  font-style:italic;
  text-align:center;
  color:#fff;
  opacity:0;
}

.arrow-wrap:hover .hint {
  opacity:1;
}

  @-webkit-keyframes arrows {
    0% { top:0; }
    10% { top:12%; }
    20% { top:0; }
    30% { top:12%; }
    40% { top:-12%; }
    50% { top:12%; }
    60% { top:0; }
    70% { top:12%; }
    80% { top:-12%; }
    90% { top:12%; }
    100% { top:0; }
  }
  
  .arrow-wrap .arrow {
    -webkit-animation: arrows 2.8s 0.4s;
    -webkit-animation-delay: 3s;
  }

/*More buttons, divs and content*/
.fiveMinBreak, .tenMinBreak, .fifteenMinBreak, .formLoader, #time  {
	display: none;
}
.20MinDiv, .40MinDiv, .60MinDiv {
	padding: 20px;
	margin: 0 auto;
}
.intro {
	padding: 20px;
}

/*feedback*/
.messages, .workScore {
	min-height: 120px;
	font-size: 20px
}
.modalImageDiv {
	width: 100%;
}
.modalImage {
	max-width: 100%;
}

/*loading indicator*/
.loading {
  margin: 0 auto 10px auto;
  font-size: 14px;
}
.formLoader {
  overflow: hidden;
  height: 100%;
  position: absolute;
  width: 100%;
  min-height: 150px;
}

.formLoader ul {
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 999999;
  margin: 0;
}

@keyframes preload {
  0% {
    background: #ed7c00;
    opacity: 1
  }
  50% {
    background: #fff;
    opacity: 0.5
  }
  100% {
    background: #ed7c00;
    opacity: 1
  }
}

.formLoader .formLoading {
  display: block;
  height: 14px;
  margin: 0 auto;
  top: 45%;
  left: 96%;
  transform: translateY(-50%);
  transform: translateX(-50%);
  position: absolute;
  width: 100%;
  padding: 0;
}

.formLoader .formLoading li {
  background: #fff;
  opacity: 0.5;
  display: block;
  float: left;
  width: 12px;
  height: 12px;
  border: 1px solid #ed7c00;
  line-height: 12px;
  padding: 0;
  position: relative;
  margin: 0 0 0 4px;
  animation: preload 1s infinite;
  top: -50%;
  border-radius: 50%;
}

.formLoader .formLoading li:first-child {
  margin-left: 0
}

.formLoader .formLoading li:nth-child(2) {
  animation-delay: .15s
}

.formLoader .formLoading li:nth-child(3) {
  animation-delay: .3s
}

.formLoader.formLoader-complete {
  opacity: 0;
  visibility: hidden;
  transition-duration: 1s
}

/*I like horizontal rules because I am from the past*/
hr {
	width: 80%;	
}

#time {
	font-size: 25px;
	display: block;
 	height: 14px;
 	margin: 0 auto;
 	top: 44%;
 	/*left: 97.5%;*/
	left: 50%;
	text-align: center;
 	transform: translateY(-50%);
 	transform: translateX(-50%);
 	position: absolute;
 	width: 100%;
 	padding: 0;
	z-index: 5;
}
.visualSignifier {
	margin-top: -20px;
}
svg {
    display: block;
    margin: 50px auto;
    width: 200px;
    height: 200px;
  
  
}
/* To reverse the animation, flip the object using CSS by uncommenting the below */
.svgClass{
	-webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

/*general styles*/
h1 {
	color: #F25C05;
}
#loader { 
	fill: #BFBFBF 
}
#border { 
	fill: #F25C05 
}
.breakBtn {
	background-color: #022873;
}

/*footer bottom */
.footer-bottom {
    padding-top: 10px;
    padding-bottom: 25px;
    border-top: 1px solid #2f2f33 ;
    background-color: #022873;
    
}
.copyright-text p {
    color: #F2F2F2;
    margin-top: 18px;
    margin-bottom: 0;
    font-size:15px;
}

/*media query*/
@media (min-width: 1200px){
.container {
    	max-width: 100%;
}
}
@media screen and (min-width: 981px){
	.container {
		max-width: 100%;
		padding: 0;
	}
    .hero { 
		width: 980px; 
	}


}

@media screen and (min-width: 641px){
    .formLoader {
		top: 1%;
  		left: 1%;
	}  
	#time {
	  	top: 42%;
		left: 50%;
	}
	.arrow-wrap {
		top:80em;
	}
	
}
@media screen and (max-width: 640px){
    .hero h1 { 
		font-size: 4em;
		margin-top: -85px;
	} 
	.formLoader {
		top: -2%;
  		left: -4%;
	}
	.intro {
		padding: 10px;
	}
	#time {
	 	top: 42%;
	  	left: 50%;
		text-align: center;
	}
	.arrow-wrap {
		top:60em;
	}
	.visualSignifier {
		margin-top: -20px;
}
	svg {
    	margin: 20px auto; 
}
	.container {
		margin: 5px auto; 
	}

}