/* CSS Document */

body, html { 
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}

.footerback{background-image:url("../images/Footer.png")}

.sustext{text-align: right;}

.bodytext{padding:0% 0% 0% 0%;
text-align: left;
}

h1{margin:auto;font-size:3em; vertical-align:middle;text-shadow: 2px 2px #000000;}


.hrblack{ 
 border: 1px solid #15151A;
}

.hrwhite{ 
 border: 1px solid #fff;
}

.hrcloud {
    border: 0;
    height: 0; /* Firefox... */
    box-shadow: 0 0 1px 1px rgba(177, 192, 199, 1.0);
}
.hrcloud:after {  /* Not really supposed to work, but does */
    content: "\00a0";  /* Prevent margin collapse */
}

/* unvisited link */
.alink:link {
  color: #30b6d7;
	font-size:1.0em;
}

/* visited link */
.alink:visited {
  color: #30b6d7;
}

/* mouse over link */
.alink:hover {
  color: #91d5e5;
}

/* selected link */
.alink:active {
  color: #91d5e5;
}

/*Buttons*/	
.ghost-button-transition {
display: inline-block;
font-size: 1.8em;
font-weight: 400;
width: 6em;
height: 1.0em;
padding: .8em;
color: #ffffff;
border: 0px solid #fff;
border-radius: .2em;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out,color 0.2s ease-out;
}
.ghost-button-transition:hover,
.ghost-button-transition:active {
background-color: #fff;
color: #000000;
transition: background-color 0.3s ease-in,color 0.3s ease-in;
}	

#video{	padding-top:135px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
	
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
		
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0px;
  margin: 0px;
  padding: 20px;
}

.column {  
   justify-content: center;
  align-items: center;
  vertical-align: text-top;
  display: flex;
  padding: 0;
  margin: 0;
}	

.footerbuttons{
	width: 10em;
	font-size: .8em;
	font-weight: bold;
	box-shadow: 1px 1px #000;
	padding:.8em;
	text-shadow: 1px 1px #000;
	background: #23395B;
	color: #30b6d7;
	border:thick #30b6d7;	
	border-radius: 1.0em;
}


.glass{
	/* background styles */
	width:9em;
	height:3.0em;
	position: relative;
	display: inline-block;
	padding: 10px 20px;
	background-color: #28363D; /*for compatibility with older browsers*/
	background-image: linear-gradient(#28363D,#23395B);

	/* text styles */
	text-decoration: none;
	color: #fff;
	font-size: 1.0em;
	font-family: sans-serif;
	font-weight: 100;
	
	border-radius: 3em;
	box-shadow: 0px 1px 4px -2px #333;
	text-shadow: 0px -1px #333;
}

.glass:after{
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}

.glass:hover{
	background: linear-gradient(#406E8E,#CBF7ED);
}