/**
 * Demo loader
 */
 
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	height: 100%;
}
body {
	position: relative;
	background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
		background-size: 400% 400%;
		-webkit-animation: Gradient 15s ease infinite;
		-moz-animation: Gradient 15s ease infinite;
		animation: Gradient 15s ease infinite;
	
	font-family: 'Roboto', sans-serif;
	height: 100%;
	min-height: 100%;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

h1 {
	font-family: 'Spectral', serif;
	margin: 0 auto;
	color: white;
	text-align: center;
	font-size: 2.2em;
}

h2 {
	font-family: 'Spectral', serif;
	margin: 0 auto;
	color: white;
	text-align: center;
}

h4 {
	margin-top: 50px;
	color: white;
	text-align: center;
}

h4 a {
	color: black;
}

h5 {
	color: white;
	margin-top: 20px;
}

body > footer {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100%;
	padding: 10px;
	
	background-color: rgba( 255, 255, 255, 0.8);
}

body > header {
	/*
	position: absolute;
	top: 0;
	left: 0;
	*/
	width: 100%;
	padding: 10px;
}
body > header > a {
}
body > header > a > img {
	display: block;
}

.logo {
	max-width: 100px;
}

body > header.status_message {
	
	width: 80%;
	
	margin: 10px auto 10px auto;
	padding: 10px;
	text-align: center;
	background-color: #ee8888;
	border: 1px solid #ee8888;
	color: #000000;
	
	border-radius: 5px;
}
body > header.status_message > p {
	margin: 0;
	padding: 0;
}

body > main {
	 
	width: 100%;
	height: 100%;
	padding: 90px 10px 50px 10px;
}

body > main form {
	
	display: block;
	
	padding: 20px;
	
	background-color: rgba( 255, 255, 255, 0.8);
	border-radius: 5px;
}

body > main p {
	margin: 10px 0 10px 0;
}

.points {
	margin-top: 40px;
	color: white;
}

.points ul li {
	list-style-type: none;
	text-decoration: none;
}

/* ============================================================================
   Layout */

.flex-container {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.flex-container > .flex-column {
	
	order: 1;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	align-self: center;
}

.flex-container > .flex-column.whitespace {
	
	height:   10px;
	flex-grow: 10;
}

/* ============================================================================
   useful stuff */
body > main  form .button {
	
	background-color: #aaaaaa;
	border: 1px solid #aaaaaa;
	border-radius: 5px;
	color: #ffffff;
	font-size: 1.2em;
	padding: 8px;
	cursor: pointer;
	margin-top: 20px;
}
body > main  form .button.button-blue {
	
	background-color: #5ED77F;
	border: 1px solid #419457;
}

body > main  form .button.button-blue:hover {
	background: #E5E6AB;
}

body > main  form .text-centered {
	text-align: center;
}

input.field {
	font-size: 1.1em;
	margin-top: 10px;
	width: 100%;
	border-radius: 2px;
	border: 0;
	padding: 5px;
}

/* ============================================================================
   spinner */
@keyframes spinner_keyframes {
	  0% { top: 0px; left:   0px; }
	100% { top: 0px; left: 200px; }
}

/* The element to apply the animation to */
.spinner {
	position: relative;
	top: 0;
	left: 0;
	
	width:  20px;
	height: 20px;
	
	margin: 0 auto 0 auto;
	
	border-radius: 10px;
	border: 1px solid #88ff88;
	background-color: #88ff88;
	animation-name: spinner_keyframes;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

/* ============================================================================
   Video Popup */
   
.lightbox {
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
}
.lightbox:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	display: block;
}

.lightbox a {
	text-decoration: none!important;
	color: white;
}

/** videoModal **/
#videoModal {
  border-radius: 0;
  width: 870px;
  margin:auto;}
  #videoModal .modal-header {
    background: #000;
    border: 0;
    color: #fff;
    position: relative;
		  height:35px; }
    #videoModal .modal-header h3 {
      font-size: 18px;
      line-height: 22px;
	  font-family:Arial, Helvetica, sans-serif;
	  padding:5px;
      text-decoration: none!important;	
    }
  #videoModal .modal-body {
    height: 489px;
    padding: 0;
    max-height: none;
    overflow: hidden; }
  #videoModal .modal-footer:empty {
    display: none !important; }
  #videoModal .close {
    background: #DB00B8;
    color: #fff;
    font-size: 24px;
    margin: 0;
    opacity: 1;
    position: absolute;
    right: 0;
    text-shadow: none;
    top: 0;
    width: 38px; 
    border: none;
  }

.modal-body {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.modal-body iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}