#container {
	/*Dimensions*/
		width: 100vw;
		height: auto;
		float: left;
		padding-left: 3.25vw;
		padding-right: 3.25vw;
	/*Visual aspects(colors, fonts, ect)*/
		background-color: #131112;
}

/*---------MENU DIVS---------*/

#header{
	/*Dimensions*/
		height: auto;
		width: 94.35%;
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;

		padding-top:3%;
		padding-bottom:1.5%;
		float: left;
		clear: left;
	/*Visual aspects(colors, fonts, ect)*/
		background-color: #60656F;
}

.menu-icon{
	/*Dimensions*/
		height: auto;
		width: auto;
		padding-left: 17%;
		border-radius: 5px;
		margin: 10px;
		float: left;
	/*Visual aspects(colors, fonts, ect)*/
	font-family: sans-serif;
}

/*---------MENU ICONS---------*/


.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24,
}

.icon-size
{
	font-size: 2vw !important;
}

/*---------CONTENT DIVS---------*/

.featured {
	/*Dimensions*/
	width: auto;
	height: auto;
	margin-left:6%;
	float: center;
	clear: auto;
	/*Visual aspects(colors, fonts, ect)*/
	background-color: #131112;
}


.content{
	/*Dimensions*/
		height: auto;
		width: 89vw;
		margin-left: 1%;
		padding-right:1.5%;
		padding-left: 1.5%;
		padding-bottom: 2.5%;
		float: left;
		clear: left;
	/*Visual aspects(colors, fonts, ect)*/
		background-color: #FFFFFF;
}

.text{
	height: auto;
	margin: auto;
	width: 40vw;
}

.credits{
	/*Dimensions*/
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
		clear: left;
		height: auto;
		width: 100vw;
		padding-left: 3.25vw;
		padding-right: 3.25vw;
	/*Visual aspects(colors, fonts, ect)*/
		background-color: #60656F;
}

.sort-right
{

	float: right !important; 
	clear: right !important;
}

.sort-left
{
	margin-top: 37vh;
	float: left !important;
	clear: left !important;
}

/*---------END OF CONTENT DIVS---------*/

/*---------'img' TAG SETTINGS---------*/
	.img-logo{
		float:left;
		clear:right;
		width:auto;
		max-width:3.5vw;
		padding:0.5vw;
	}

	.img-showcase{
		float:left;
		width:45%;
		max-width: 40vh;
		padding-top: 2%;
		padding-left: 3%;
	}

	.img-basic{
		float:left;
		clear: left;
		width:45%;
		max-width: 40vw;
		padding-top: 1vh;
		padding-bottom: 1vh;
		padding-left: 1vw;
		padding-right: 1vw;
	}

	.img-horizontal{
		float:left;
		height:47%;
		max-height: 45vw;
		padding-top: 2%;
		padding-left: 3%;
	}

	.img-featured{
		width:60vw;
		margin-right:12%;
		margin-left:12%;
	}
/*---------END OF 'img' TAG SETTINGS---------*/


/*---------'a' TAG SETTINGS---------*/
	/* Link that has never been clicked, un-visited link */
	a:link {
		color: white;
		text-decoration: none;
	}

	/* visited link */
	a:visited {
		color: #59C4CE;
		text-decoration: none;
	}

	/* mouse over link */
	a:hover {
		color: #ACE2E7;
		text-decoration: none;
	}

	/* selected link */
	a:active {
		color: #7AC74F;
		text-decoration: none;
	}
/*---------END OF 'a' TAG SETTINGS---------*/

/*---------'tooltip' SETTINGS---------*/

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  /* Cosmetics */
  background-color: black;
  color: #ffff;
  /*  */
  opacity: 0;
  /* In Seconds */
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1; 
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

/*---------END OF 'ToolTip' SETTINGS---------*/



/*h1 tag settings*/
	h1 
	{
		position: relative;
		text-align: center;
		font-size: 5vh;
		color: #131112;
	}

/*h2 tag settings*/
	h2
	{
		position: relative;
		text-align: center;
		font-size:2em ;
		color: #131112;
	}

/*p tag settings*/
	P
	{
		font-size: 1.5em;
		font-family: sans-serif;
		color: #131112;
	}
/*Removes white border from site*/
body { 
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  overflow-x: hidden;
}

.roboto-regular {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400;
  font-style: normal;
}

.iframe-basic{
	width: 50vw;
	height: 80vh;
	float: left;
	clear: left;
}

.iframe-blackbird{
	width: 65vw;
	height: 80vh;
	float: left;
	clear: left;
}