/* Reset CSS
  * --------------------------------------- */
 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
 form,fieldset,input,textarea,p,blockquote,th,td {
     padding: 0;
     margin: 0;
 }
 a{
   text-decoration:none;
 }

 address,caption,cite,code,dfn,em,strong,th,var {
     font-weight: normal;
     font-style: normal;
 }
 strong{
   font-weight: bold;
 }
 ol,ul {
     list-style: none;
     margin:0;
     padding:0;
 }
 caption,th {
     text-align: left;

 }
 h1,h2,h3,h4,h5,h6 {
     font-weight: normal;
     font-size: 100%;
     font-family: 'Poppins', helvetica, sans-serif;
     margin:0;
     padding:0;
     color:#444;
 }
 q:before,q:after {
     content:'';
 }
 abbr,acronym { border: 0;
 }


 /* Custom CSS
  * --------------------------------------- */
 body{
   font-family: arial,helvetica;
   color: #F2F2F2;
 }
 h1{
   font-size: 3em;
 }
 p{
   font-size: 2em;
 }
 .content{
   text-align: center;
 }

 h2.contact_us {
    font-family: arial,helvetica;
    color: rgba(240, 64, 40, 0.7);
    font-size: 18px;
    font-weight: normal;
    position: relative;
    pointer-events: none;
    margin-top: 40px;
}

div#sign-up {
    max-width: 500px;
    min-width: 300px;
    margin: 0 auto;
}

h2.Sign-Up {
    font-family: arial,helvetica;
    color: rgba(240, 64, 40, 0.7);
    font-size: 18px;
    font-weight: normal;
    position: relative;
    pointer-events: none;
    margin-bottom: 40px;
}

video#video-background {
    background-size: 100% 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    top:0;
    right:0;
    width: 100%;
    height: 100%;
    background-color: black; /* in case the video doesn't fit the whole page*/
    background-image: /* our video */;
    background-position: center center;
    background-size: contain;
    object-fit: cover; /*cover video background */
}
nav{
  position:fixed;
  display:block;
  width: 100%;
  z-index: 9;
}
object.headerlogo {
    height: 250px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
#section0 .arrow{
    color: #fff;
}
#section1 .arrow{
    color: #333;
}
#section3 .arrow{
    color: #333;
}
div#content {
    max-width: 900px;
    min-width: 300px;
    margin: 0 auto;
}

div#sign-up {
    max-width: 500px;
    min-width: 300px;
    margin: 0 auto;
}

div#SignUp_Recaptcha {
    margin-top: -40px;
}

#contact {
    max-width: 500px;
    min-width: 300px;
    height:800;
    margin: 0 auto;
    display: block;
}

@media (max-width: 728px) {
  div#sign-up {
      height: auto;
  }

}

/* TEST */

svg  {
	width: 450px;
	position: absolute;
	left: 50%;
	margin-left: -225px;
	height: 450px;
	margin-top: -450px;
}

@media (max-width: 900px) {
	svg  {
		width: 250px;
		margin-left: -125px;
		height: 250px;
	}
}

@media (max-width: 640px) {
	svg  {
		width: 100px;
		margin-left: -50px;
		height: 100px;
	}
}

@media (max-width: 540px) {
	svg  {
		width: 50px;
		margin-left: -25px;
		height: 50px;
	}
}
@media (max-width: 480px) {
	svg  {
		width: 24px;
		margin-left: -12px;
		height: 24px;
	}
}

div#mission {
    color: #000;
    margin: 5em 20em;
    font-size: 20px;
}



/* Layer with position absolute in order to have it over the video
* --------------------------------------- */
#section0 .layer{
  position: absolute;
  : 4;
  width: 100%;
  left: 0;
  top: 43%;

  /*
  * Preventing flicker on some browsers
  * See http://stackoverflow.com/a/36671466/1081396  or issue #183
  */
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

/*solves problem with overflowing video in Mac with Chrome */
#section0{
  overflow: hidden;
}


/* Bottom menu
* --------------------------------------- */
#infoMenu li a {
  color: #fff;
}

/* Arrow
 * --------------------------------------- */


.arrow {
  z-index: 100000;
  color: #333;
  white-space: nowrap;
  font-size: 5rem;
  position: absolute;
  right: 0;
  bottom: 50px;
  left: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 750ms ease-in-out;
  -ms-transition: all 750ms ease-in-out;
  -o-transition: all 750ms ease-in-out;
  transition: all 750ms ease-in-out;
}

.lift {
  bottom: 74px;
}



/* Hiding video controls
* See: https://css-tricks.com/custom-controls-in-html5-video-full-screen/
* --------------------------------------- */
video::-webkit-media-controls {
  display:none !important;
}

 /* Section 1
  * --------------------------------------- */
 #section0{
   background-color: #BFDA00;
 }
 #section0 h1{
   color: #444;
 }
 #section0 p{
   color: #333;
   opacity: 0.4;
 }


 /* Section 2
  * --------------------------------------- */
 #section1{
   background-color: #fff;
 }
 #section1 h1{
   color: #000;
 }
 #section1 p{
   opacity: 0.8;
 }


 /* Section 3
  * --------------------------------------- */
  #section3 h1{
    color: #000;
  }
 #section2 h1{
   color: #000;
 }
 #section2 p{
   opacity: 0.8;
 }
</style>

/* Contact Us
* --------------------------------------- */

.form-container {
  border: 2px solid rgba(240, 64, 40, 0.7);
  padding: 40px;
  margin-bottom: 40px;
  margin: 2rem auto;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  text-align: center;
  position: relative;
}

.form-label {
  position: relative;
  top: 0;
  margin: 0;
  transform: translateY(-50%);
  color: rgba(240, 64, 40, 0.7);
  font-weight: 900;

  &:before,
    &:after{
  content: "";
  position: absolute;
  height: 50%;
  width: 100%;
  left: 0;
  : -1;
    }

    &:before{
  background: #ecf0f1;
  top: 0;
    }

    &:after{
  background: #FFF;
  bottom: 0;
    }
  margin:;
}

/* Test  */

/* container sorrounding message */

.message-form-control {
  width: 100%;
  height: 150px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 1rem;
  box-shadow: 0 0 0 1px rgba(240, 64, 40, 0.7);
  transition: all 0.5s ease;
}

.message-form-control:focus {
  outline: 0;
  box-shadow: 0 0 0 2px rgba(240, 64, 40, 0.7);
}

.message-form-control::-webkit-input-placeholder {
  color: rgba(240, 64, 40, 0.7);
  font-size: 18px;
  line-height: 100px;
  transition: all 0.5s ease;
  margin: 0 auto;
}

.message-form-control:focus::-webkit-input-placeholder {
  color: #AAA;
  font-size: 12px;
  line-height: 12px;
  padding-left: 0%;
}


	/* Centered texts in each section
	* --------------------------------------- */
	.section{
		text-align:center;
	}

/* Button styling */

.button {
  border-radius: 0;
  font-family: 'Roboto', sans-serif;
  color: rgba(240, 64, 40, 0.7);
  font-weight: bold;
  letter-spacing: 1px;
  margin-top: 40px;
  border: 2px solid rgba(240, 64, 40, 0.7);
  text-align: center;
}
#contact {
    max-width: 500px;
    min-width: 300px;
    margin: 0 auto;
    display: block;
}
.button:hover {
  background: rgba(240, 64, 40, 0.9);
  color: #FFF;
  border: 2px solid rgba(240, 64, 40, 0.9);
}

.button.raised {
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0);
}

.button.raised:hover {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.button.raised:active {
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
}


/* form starting stylings*/

.group {
  position: relative;
  margin-bottom: 45px;
}

input {
  background: transparent;
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(240, 64, 40, 0.7);
}

input:focus {
  outline: none;
}


/* LABEL */

label {
  color: rgba(240, 64, 40, 0.7);
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
}


/* active state */

input:focus ~ label,
input:valid ~ label {
  top: -20px;
  font-size: 14px;
  color: rgba(240, 64, 40, 0.7);
}


/* BOTTOM BARS */

.bar {
  position: relative;
  display: block;
  width: 51.5%;
}

.bar:before,
.bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: rgba(240, 64, 40, 0.7);
  transition: 0.2s ease all;
}

.bar:before {
  left: 100%;
}

.bar:after {
  right: 0%;
}


/* active state */

input:focus ~ .bar:before,
input:focus ~ .bar:after {
  width: 100%;
}


/* HIGHLIGHTER */

.highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}


/* active state */

input:focus ~ .highlight {
  animation: inputHighlighter 0.3s ease;
}

/* Custom2*/
#video-background {
  : 10;
}
.next_arrow{
  : 11;
}
nav #section1 {
  : 10;
}
div#section1 {
   background:  rgba(182, 251, 255, 0.6); /* fallback for old browsers */
   background: -webkit-linear-gradient (rgba(131, 164, 212, 0.5), rgba(182, 251, 255, 0.5)); /* Chrome 10-25, Safari 5.1-6 */
   background: linear-gradient(rgba(131, 164, 212, 0.5), rgba(182, 251, 255, 0.5)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   color: #333;
}
div#section2 {
   background: rgba(170, 255, 169, 0.5); /* fallback for old browsers */
   background: -webkit-linear-gradient (rgba(182, 251, 255, 0.5), rgba(170, 255, 169, 0.4)); /* Chrome 10-25, Safari 5.1-6 */
   background: linear-gradient( rgba(182, 251, 255, 0.5), rgba(170, 255, 169, 0.4)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   color: #333;
}
div#section3 {
   background: # rgba(252, 234, 187, 0.7); /* fallback for old browsers */
   background: -webkit-linear-gradient (rgba(170, 255, 169, 0.4),rgba(252, 234, 187, 0.5)); /* Chrome 10-25, Safari 5.1-6 */
   background: linear-gradient(rgba(170, 255, 169, 0.4), rgba(252, 234, 187, 0.5)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   color: #333;
}
div#section4 {
   background: rgba(255, 195, 160, 0.6); /* fallback for old browsers */
   background: -webkit-linear-gradient (rgba(252, 234, 187, 0.5), rgba(255, 177, 166, 0.5)); /* Chrome 10-25, Safari 5.1-6 */
   background: linear-gradient(rgba(252, 234, 187, 0.5), rgba(255, 177, 166, 0.5)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   color: #333;
}
div#section5 {
   background: rgba(255, 175, 189, 0.6); /* fallback for old browsers */
   background: -webkit-linear-gradient (rgba(255, 177, 166, 0.5),rgba(255, 131, 138, 0.5)); /* Chrome 10-25, Safari 5.1-6 */
   background: linear-gradient(rgba(255, 177, 166, 0.5),rgba(255, 131, 138, 0.5));; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   color: #333;
}
div#section7 {
   background: #83a4d4; /* fallback for old browsers */
   background: -webkit-linear-gradient (rgba(255, 131, 138, 0.5), rgba(255, 131, 138, 0.6)); /* Chrome 10-25, Safari 5.1-6 */
   background: linear-gradient(rgba(255, 131, 138, 0.5), rgba(255, 131, 138, 0.6)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   color: #333;
}

div#section1 a {
   color: rgb(73, 147, 255);
   text-decoration: underline;
}
div#section3 a {
   color: rgb(73, 147, 255);
   text-decoration: underline;
}
#section0 {
  color: white;
  z-index: 10;
}
h2.thanks {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    font-size: 14em;
    color: rgba(240, 64, 40, 0.7);
    margin: auto;
}
.thanks {
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background: rgba(255, 177, 166, 0.5);
    margin: auto;
}
/* Standard Setup */
.thanks {
  width: 100%;
  height: 100%;
}

.thanks_text {
  width: 100px;
  height: 100px;
}

/* Place characters in center of box */
.thanks_text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* Mixins */
/* Flex Stuff */
.thanks {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.social-li{
  padding: 0 30px;
  font-size: 30px;
}

ul.menu-footer-social-menu {
  display: inline-flex;
  margin: 30px;
}

.footer {
  margin: 20px 0;
}
.footer a {
  color: rgba(240, 64, 40, 0.7);
  text-decoration: none;
}

.splash_link{
  color: rgba(240, 64, 40, 0.7);
  text-decoration: underline;
}

/* Background Gradient*/






/* ANIMATIONS */

@keyframes inputHighlighter {
  from {
    background: #5264AE;
  }
  to {
    width: 0;
    background: transparent;
  }
}
@media (max-height: 950px) {
  .headerlogo{
    max-height: 175px;
  }
}
@media (max-height: 850px) {
  .headerlogo{
    max-height: 150px;
  }
}
@media only screen and (max-width: 750px) {
  h2{
     font-size: 12px
  }
  h1{
    font-size: 24px
 }
 .headerlogo{
   max-height: 100px;
 }
 .arrow{
   font-size: 2rem;
   bottom: 0;
 }
  div#sign-up {
    height: 300px;
  }
  h2.Sign-Up {
    font-size: 12px;
    margin-bottom: 30px;
  }
  .button {
    border-radius: 0;
    margin-top: 20px;
  }
  .button.raised:active {
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
  }
  .button.raised:hover {
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  }
  .button.raised {
      transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0);
  }
  .button:hover {
      background: rgba(240, 64, 40, 0.9);
      color: #FFF;
      border: 2px solid rgba(240, 64, 40, 0.9);
  }
  input:focus {
      outline: none;
  }
  .button:hover {
    background: rgba(240, 64, 40, 0.9);
    color: #FFF;
    border: 2px solid rgba(240, 64, 40, 0.9);
}
  .group {
    margin-bottom: 25px;
  }
  input {
    font-size: 14px;
    padding: 10px 10px 10px 5px;
    width: 100%;
    border-radius: 0;
  }
  div#SignUp_Recaptcha {
    margin-top: -20px;
  }
  div#contact{
    width: auto;
    margin-top: 20px;

  }
  .message-form-control{
    border: 1px solid box-shadow: 0 0 0 1px rgba(240, 64, 40, 0.7);
    height: 75px;
  }
  ul.menu-footer-social-menu {
    margin: 0 auto;
    margin-top: 30px;
  }
}