/*---Hide the things until the js loads---*/
.hidden
{
   visibility: hidden;
}


/*CSS Amination Intro Text with Delays1*/
@-webkit-keyframes fadeIn1 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn1 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn1.in-view {
  position: relative;
  top: 125px;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
}

@-webkit-keyframes fadeOut1 {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut1 {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut1.in-view {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
  animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-delay: 3s;
}

/*CSS Animation Intro Text with Delays 2*/
@-webkit-keyframes fadeIn2 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn2 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn2.in-view {
  position: relative;
  top: 105px;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-delay: 5s;
}

@-webkit-keyframes fadeOut2 {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut2 {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut2.in-view {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
  animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-delay: 8s;
}


/*CSS Animation Intro Text with Delays 3*/
@-webkit-keyframes fadeIn3 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn3 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn3.in-view {
  position: relative;
  top: 85px;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-delay: 10s;
}

@-webkit-keyframes fadeOut3 {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut3 {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut3.in-view {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
  animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-delay: 13s;
}


/*CSS Animation Intro Text with Delays 4*/
@-webkit-keyframes fadeIn4 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn4 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn4.in-view {
  position: relative;
  top: 65px;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-delay: 15s;
}

@-webkit-keyframes fadeOut4 {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut4 {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut4.in-view {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
  animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-delay: 17s;
}

/*CSS Animation Intro Text with Delays 5*/
@-webkit-keyframes fadeIn5 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn5 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn5.in-view {
  position: relative;
  top: 60px;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-delay: 19s;
}

@-webkit-keyframes fadeOut5 {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut5 {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut5.in-view {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
  animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-delay: 23s;
}

/*CSS Animation Intro Text with Delays 6 - No fadeOut*/
@-webkit-keyframes fadeIn6 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn6 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn6.in-view {
  position: relative;
  bottom: 100px;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  animation-duration: 5s;
  -webkit-animation-duration: 5s;
  animation-delay: 25s;
}

/*--- BODY STYLE ---*/
body
{
padding:0px;
float:center;
}
form
{
padding-left: 375px;
padding-right:0px;
padding-top: 5px;
margin-right:auto !important;
margin-left:auto !important;
}
form
{
margin-right:auto !important;
margin-left:auto !important;
}


/*--- FORM CONTAINER STYLE ---*/
.mainDiv
{
margin-right:auto !important;
margin-left:auto !important;
}

/*--- FIELD INPUT STYLE ---*/
.clickdform input[type='text'],
.clickdform textarea,
.clickdform select
{
    font-family:"Verdana" !important;
    font-size:13px !important;
    color:#333;
    margin:0;
    padding:2px 0;
    border-top:1px solid #7c7c7c;
    border-left:1px solid #c3c3c3;
    border-right:1px solid #c3c3c3;
    border-bottom:1px solid #ddd;
}

/*--- LIST DROPDOWN STYLE ---*/
.clickdform select
{
	height:26px;
}

/*--- SUBMIT BUTTON STYLE ---*/
#btnSubmit
{
    margin: 15px 0 0 0;
    font-family:Verdana;
    font-size:13px;
    clear:both;
    display:none;
}

/*--- PREVIOUS BUTTON STYLE ---*/
.clickdform .WizardPrevButton{
    margin: 15px 10px 0 0;
    font-family:Verdana;
    font-size:13px;
    float:left;
}

/*--- NEXT BUTTON STYLE ---*/
.clickdform .WizardNextButton
{
    margin: 15px 0px 0 0;
    font-family:Verdana;
    font-size:13px;
    float:right;
    clear:both;
}


/*--- Count Up Number Styling ---*/
#counter1
{
color:#39707e;
font-size: 175px;
font-family: Arial, Helvetica, sans-serif;
}
#counter2
{
color: #67c8c7;
font-size: 175px;
font-family: Arial, Helvetica, sans-serif;
}
#counter3
{
color: #fbae47;
font-size: 175px;
font-family: Arial, Helvetica, sans-serif;
}
#counter4
{
color: #ef4629;
font-size: 175px;
font-family: Arial, Helvetica, sans-serif;
}
#counter5
{
color: #a41e24;
font-size: 175px;
font-family: Arial, Helvetica, sans-serif;
}
#counter6
{
color: #711e46;
font-size: 175px;
font-family: Arial, Helvetica, sans-serif;
}

#counter7
{
color: #FFFFFF;
font-size: 175px;
font-family: Arial, Helvetica, sans-serif;
}

/*---CSS Animations General Animation parameters---*/
.animated {
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}


/*CSS fadeIn Amination*/
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn.in-view {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  animation-duration: 5s;
  -webkit-animation-duration: 5s;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut.in-view {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
  animation-duration: 5s;
  -webkit-animation-duration: 5s;
}

/*CSS fadeinLeft Animation*/

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft.in-view {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  animation-duration: 4s;
  -webkit-animation-duration: 4s;
}

/*CSS Animation "fadeInRight"*/

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight.in-view {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
  animation-duration: 4s;
  -webkit-animation-duration: 4s;
}

/*---CSS Overlay for images in Story Breakouts---*/

.outer {
    position:relative;
    width: 100%;
    height: 100%;
}
.overlay {						
    display: none;
}

.outer:hover .overlay {	
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
    top: 0;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    animation-duration: .75s;
    -webkit-animation-duration: .75s;
}
.text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 36px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%);
    color:white;
}

/*---General Link Styling---*/
a:link {
  color: #39707e;
} 
a:hover {
  color: #fbae47;
} 
a:visited {
  color: #39707e;
}

/*---CSS for Popup Windows---*/

.popup {
  display: none;
  position: fixed;
  padding: 10px;
  left: 13%;
  width: 75%;
  height: 75%;
  top: 30%;
  margin-top: -150px;
  background: #FFF;
  z-index: 20;
  overflow: auto;
}


#popup1 {
  -webkit-box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

#popup2 {
  -webkit-box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

#popup3 {
  -webkit-box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

#popup4 {
  -webkit-box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

#popup5 {
  -webkit-box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

#popup6 {
  -webkit-box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

#popup7 {
  -webkit-box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* From here on, just aesthetics */

.popup a:link {
  color: #39707e;
} 
.popup a:hover {
  color: #FFFFFF;
} 
.popup a:visited {
  color: #39707e;
}
 img {
  padding: 10px 10px 10px 10px;
}

/*---CSS that randomly might center align this damn form---*/
.responsiveRow {
font-size: 14px;
}

#clickdimensionsForm {
width: 800px;
margin-right: auto !important;
margin-left: auto !important;
}

/*---Styles for Paragraphs---*/
.indented {
  padding-left: 5%;
  position: relative;
}

.italic {
  font-style: italic;
}


/*---Box Animation around "See the Whole Story" links---*/
a.storylink:link {
  line-height: 50px;
  padding: 0 20px;
  position: absolute;
  text-decoration: none;
  transition: all 0.5s ease;
  overflow: hidden;
  display: block;
  transition:all 0.25s;
}
a.storylink:hover{
  color: white;
  background-color: black;
  line-height: 50px;
  position: absolute;
  padding: 0 20px;
  transition: ease;
}