.flex-vertical-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.pad{
    padding: 3% 0;
}

body {
    font-family: 'Rubik', sans-serif;
}
body h1{
    color: #7e7e7e;
    padding: 0 15px;
    font-size: 24px;
}
.wrapper {
  margin-right: auto; 
  margin-left:  auto; 

  max-width: 960px; 

  padding-right: 0px; 
  padding-left:  0px; 
}

/* ----------------------- Navigation Styling ------------------------*/
.navbar-custom{
    padding: 10px 0;
}
.header-logo{
    width: 200px;
    height: auto;
    padding: 12px 0;
    margin-left: 10px;
}
.navbar{
    margin-bottom: 0px;
}
.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 12px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color:   transparent;
    background-image: none;
    border: 1px solid #d1cfd0;
    border-radius: 4px;
}
.navbar-toggle .icon-bar {
    background-color: #d1cfd0;
}
.navbar-nav li{
    margin-top: 0px;
    
}
.nav-menu{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 15px;
}
.nav-menu li{
    padding-left: 15px;
}
.nav-menu a{
    color: #7e7e7e;
    font-size:  18px;
    text-decoration: none;
}
.navbar-custom .navbar-toggle {
    border-color: transparent;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
    background-color: transparent;
}
.navbar-custom .navbar-toggle .icon-bar {
    background-color: black;
    border-bottom: 2px solid black;
    width: 25px;
}

.hero{
    background-image: url(../images/hero.jpg);
    background-size: cover;
    width: 100%;
    height: 250px;
    color: white;
}
.hero h2{
    font-size: 1.5em;
    line-height: 1.5;
    margin-bottom: 1.5em;
}
.hero h1{
    font-size: 3em;
    line-height: 1.15;
    font-weight: 700;
    color: white;
}
.hero a{
    color: white;
}
.menu{
    padding: 30px 0;
}
.menu li{
    margin-top: 5px;
    transition: .3s ease all;
}
.menu li:hover{
    background-color: #0b253f;
    
}
.menu li a{
    color: white;
    font-size: 20px;
    display: block;
}
.contact{
    background-color: #2196f3;
    width: 100%;
    height: 100px;
    margin: 0 auto;
}
.reset{
    background-color: #4f75f8;
    width: 100%;
    height: 100px;
    margin: 0 auto;
}
.cancel{
    background-color: #81b441;
    width: 100%;
    height: 100px;
    margin: 0 auto;
}
footer{
    padding: 10px 0 20px 0;
    opacity: .7;
}
.ftr-menu{
    display: inline;
}
.ftr-menu a{
    padding: 3px 5px;
    border-right: 1px solid #b6b6b6;
    color: black;
}
.ftr-menu a:last-child{
    border-right: 1px solid white;
}


/* ----------------------- Form Styling ------------------------*/
form{
    width: 90%;
    margin: 0 auto;
}
.form-control {
    display: block;
    width: 100%;
    height: auto;
    padding: 15px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 0px solid transparent;
    border-radius: 0px;
    margin-bottom: 15px;
}
.form-control-subject{
    display: block;
    width: 100%;
    height: 200px;
    padding: 15px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 0px solid transparent;
    border-radius: 0px;
    margin-bottom: 15px;
}
/* ----------------------- Modal Styling ------------------------*/ 

.modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: auto;
	left: 0;
	z-index: 999;
	display: block;
	display: none\9;                     /* 1 */
	height: 100%;
	opacity: 0;
	transition: opacity 0.2s;
	transform: translate3d(0, -100%, 0); /* 2 */
}

/* Modal overlay, only visible when modal becomes a popup */
.modal:before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	background: rgba(8, 21, 31, 0.9);
	content: "";
}
    
/**
 * 1. Include a `display: block;` hack for IE9
 * 2. Move the modal into view
 */

.modal:target {
	display: block\9;           /* 1 */
	outline: none;
	opacity: 1;
	transition: opacity 0.2s ease-in-out;
	transform: translate(0, 0); /* 2 */
}

.modal-contact {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 11;
	overflow-x: hidden;
    overflow-y: auto;
	padding: 20px;
	width: 100%;
	height: 100%;
	background-color: #2196f3;
    color: white;    
}
.modal-reset {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 11;
	overflow-x: hidden;
    overflow-y: auto;
	padding: 20px;
	width: 100%;
	height: 100%;
	background-color: #4f75f8;
    color: white;    
}
.modal-cancel {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 11;
	overflow-x: hidden;
    overflow-y: auto;
	padding: 20px;
	width: 100%;
	height: 100%;
	background-color: #81b441;
    color: white;   
}

.modal-header {
	display: table;
	margin-bottom: 20px;
	width: 100%;
}

.modal-title,
.modal-close {
	display: table-cell;
	vertical-align: middle;
}

.modal-title {
	margin: 0 0 20px;
	font-size: 2em;
}

.modal-close {
	width: 44px;
	height: 44px;
	border-radius: 3px;
	background-color: transparent;
	color: white;
	text-align: center;
	text-decoration: none;
	font-weight: 700;
	font-size: 2rem;
	line-height: 0;
}

.modal-close:hover {
	background-color: #ccc;
	color: #444;
}

/* ----------------------- Media Query Styling------------------------*/
@media only screen and (min-width: 600px) {  
/* Main content */   
.hero h1{
    font-size: 4em;
}     
.hero{
    height: 400px;
}   
body h1{
    font-size: 36px;
}   
.navbar-custom{
    padding: 40px 0;
}
.header-logo{    
    margin-left: 0px;
}    
    
/* Make modal look like a popup */
.modal-contact {
    overflow-y: hidden;
    margin: 100px auto;
    padding: 0;
    max-width: 550px;
    max-height: 600px;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    border: 2px solid white;
    box-shadow: none;
}
.modal-reset {
    overflow-y: hidden;
    margin: 100px auto;
    padding: 0;
    max-width: 550px;
    max-height: 600px;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    border: 2px solid white;
    box-shadow: none;
}
.modal-cancel {
    overflow-y: hidden;
    margin: 100px auto;
    padding: 0;
    max-width: 550px;
    max-height: 600px;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    border: 2px solid white;
    box-shadow: none;
}
    
.contact{
    width: 60%;
}
.reset{
    width: 60%;
}
.cancel{
    width: 60%;
}
    
/* Modal overlay, only visible when modal becomes a popup */
.modal:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    background: rgba(8, 21, 31, 0.975);
    content: "";
}

.modal-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin-bottom: 0;
    padding: 1em;
    background-color: transparent;
}

.modal-close {
    background-color: transparent;
}

.modal-close:hover {
    background-color: rgba(64, 64, 64, 0.7);
    text-decoration: none;
    color: white;
}

/* 1. Push down to make room for `.modal-header` */
.modal-body {
    position: absolute;
    top: 76px; /* 1 */
    bottom: 0;
    left: 0;
    width: 100%;
    overflow-y: auto;
    padding: 0 1em;
}

.modal-body > :first-child {
    margin-top: 40px;
}
    
 
    
    
}





@media (min-width: 600px) and (max-width: 960px)  {
.wrapper {
  padding-right: 10px; 
  padding-left:  10px; 
}
    
}

.error {
    text-align: left; background-color: #fcc; border: 1px solid #600; color: #600; display: block; margin: 1em 0; padding: .33em 6px;
}

.members-table {
    margin-left:auto; 
    margin-right:auto;
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.members-table thead th {
    background-color: #DDEFEF;
    border: solid 1px #DDEEEE;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
.members-table tbody td {
    background-color: #fff;
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}

canvas{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    color: black;
    overflow: visable;
    position: absolute;
    top: 0;
    left: 0;
}

#overlay-0, #overlay-1, #overlay-2, #overlay-3 {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 10;
  cursor: pointer;
}

#text{
    background-color: #888;
    border: solid 5px #333;
    color: #fff;
    padding: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 30px;
    color: white;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}