/* Styling minimum height of body
 NEEDS WORK TO SCALE TO VIEWPORT*/
html, body {
	height: 100%;
}

/* Style the header */
.header {
	width: 100%;
	background-color: #F1F1F1;
	padding-top: 0.5vw;
	padding-bottom: 0.5vw;
	text-align: center;
}

/* Clear floats after header*/
.header:after {
	content: "";
	display: table;
	clear: both;
}

/* Style the title */
.title {
	text-align: center;
	margin: auto;
	width: 70%;
	font-size: 5vw;
	font-family: "Bell MT", "Times New Roman", serif;
	font-weight: bold;
}

/* Style the RI logo element */
.logo{
	position:relative;
	float:left;
	text-align: left;
	margin: 0 auto;
	width: 10vw;
}

/* Style the RI logo img */
.logo img {
	position:absolute;
	width: 100%;
	opacity: 1;
}

/* Fade the RI logo upon hover */
.top:hover {
	opacity: 0;
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}


/*
.logo:hover img{
	opacity: 0;
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}
*/


/* Add a black background color to the top navigation */
.topnav {
	overflow: hidden;
	width: 100%;
	background-color: #333;
}

/* Style the links inside the navigation bar */
.topnav a {
	height: 32px;
	float:left;
	padding-top: 0.5vw;
	padding-bottom: 0.5vw;
	color: #f2f2f2;
	text-align: center;
	font-family: "Bell MT", "Times New Roman", serif;
	text-decoration: none;
	font-size: 24px;
}

.nav-item1 {
	width: 10%;
}

.nav-item2 {
	width: 12.5%;
}

.nav-item3 {
	width: 15%;
}

/* Style the color of links on hover*/
.topnav a:hover{
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
	background-color: #ddd;
	color: black;
}

/* Style the active link */
.topnav a.active{
	background-color: #4CAF50;
}

/* Style the topnav (mobile) icon */
.topnav .icon {
  display: none;
}

@media screen and (max-width: 800px) {
  .header{height:12vw;}
  .logo{width: 20vw; margin-right: 1px;}
  .title{width: calc(75%-1px); flex-grow:1; text-align: center; font-size: 7vw; margin: 0px; margin-left: 25%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
  .topnav a{padding-top: 12px;	padding-bottom: 12px; font-size: 26px;}
  .topnav a:first-child {width: 25%;}
  .topnav a:not(:first-child) {display: none; width: 100%;}
  .topnav a.icon {
	width: 25%;
    float: right;
    display: block;
  }
}

@media screen and (max-width: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
	text-align: center;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
}

/* Clear floats after navbar */
.topnav:after {
	content: "";
	display: table;
	clear: both;
}

#QuadVideo {
  width: 100%;
}

.main {
	float: none;
	background-color: #A9A9A9;
	text-align: left;
	width: auto;
	min-height: 90%;
	padding: 0.5vw;
	margin-top: 0.5vw;
	margin-bottom: 0.5vw;
	padding-bottom: 1vw;
}

.center-text {
	text-align: center; /* Center-align text */
}

/* SERVICES PAGE */

img {
	max-width: 100%;
	height: auto;
}

.heading {
	border-style: solid;
	background-color: #333;
	color: #6ad589;
	width: auto;
	height: auto;
	font-size: 2vw;
	font-family: "Bell MT", "Times New Roman", serif;
	font-weight: bold;
	padding:0.2vw;
}

.picture {
	height:100%;
	margin: 0.3vw;
}

.col-3 {
	text-align: center;
	float: left;
	width: 31.33%;
	height: 26vw;
	margin-top: 1%;
	margin-right: 1%;
	margin-left: 1%;
}

.iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 800px) {
	.col-3{width:98%; height:auto;}
	.heading{font-size: 8vw;}
	.pad{line-height: 50px;}
}

.row {
	width: 100%;
}

/* Clear floats after columns */
.row:after {
	content: "";
	display: table;
	clear: both;
}

/*
[class*="col-"] {
	float: left;
}
/*
.col-1 {width: 12.5%;}
.col-2 {width: 25%;}
.col-3 {width: 37.5%;}
.col-4 {width: 50%;}
.col-5 {width: 62.5%}
.col-6 {width: 75%;}
.col-7 {width: 87.5%;}
.col-8 {width: 100%;}
*/