@charset "UTF-8";

/* Cell phone size. Had to put it first or else my phone wouldn't respect the file. */
@media screen and (max-width: 480px)
{	
	table.black 
	{
		display: flex;
		position: relative;
		width: 95%;
		background-color: black;
		border: 0px solid red;
		border-collapse: collapse;
		margin: 0px;
		padding: 0px;
	}
	
	table.black_site_header
	{
	width: 95%; 
	height: 33vw;
	align-items: center;
	justify-content: center;
	}
	
	table.black_page_title
	{
	width: 95%; 
	height: 11vw;
	align-items: center;
	justify-content: center;
	}
		
	td.black
	{
	display: flex;
	position: relative;
	justify-items: center;
	align-items: center;
	border: 0px solid white;
	width: 100%
	}

	/* This is the page title between the buttons and the body. */
	/* phone size */
	td.title_black_with_gray_text
	{
		display: inline-block;
		position: relative;
		font-size: 5.5vw;
		font-weight: bold;
		font-family: arial, helvetica, system;
		line-height: 5.5vw;
		width: 100%;
		height: 6.5vw;
		background-color: transparent;
		color: gray;
		border: 0vw solid goldenrod;
		padding: 0 auto;
		margin: 0 auto;
	}	

	table.white
	{
		display: inline-block;
		position: relative;
		background-color: white;
		width: 95%;
		table-layout: fixed;
		padding: 0px;
		margin-left: auto;
		margin-right: auto;
		border: 0px solid red;
		border-collapse: collapse;
		z-index: 0;
	}

	.title_blue_bar
	{	
		display: block;
		position: relative;
		width: 95%;
		height: .2%;
		border: 0px solid red;
		padding: 0px;
		margin: 0px;
		background-color: blue;
		z-index: -1;
	}
	
	.main_menu_button
	{
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: arial-black, helvetica, system;
		font-weight: bold;
		overflow: hidden;
		font-size: 2.5vw;
		width: 28.5vw;
		height: 7vw;
		background-color: #DDDDDD;
		text-decoration: none;
		padding: 0vw;
		margin: 0 auto;
		border-color: white gray gray white;
		border-width: 3px;
		border-style: solid;		
	}
	
	.main_menu_button:active
	{	
		transform: translatex(.3vw) translatey(.1vw);
	}	
	
	.grid-container {
	  display: inline-grid;
	  position: relative;
	  width: 94%;
	  height: 20vw;
	  grid-template-columns: repeat(3, 31.333%);
	  grid-template-rows: repeat(2, 50%);
	  grid-gap: 2vw;
	  grid-row-gap: 0%;
	  background-color: black;
	  border: 0vw solid blue;
	  padding-top: 2vw;
	  padding-bottom: .5vw;
	  padding-left: 1vw;
	  padding-right: 0vw;
	}

	div.menu_button_text
	{
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #DDDDDD;
		font-size: 3.2vw;
		height: 7.5vw;
		padding: 0vw;
		margin: 0 auto;
		border-color: white gray gray white;
		border-width: .5vw;
		border-style: solid;
	}
	
	.menu_button_text:hover
	{
		background-color: #EEEEEE;
	}

	.menu_button_text:active
	{
		height: 7.2vw;
		padding-left: .3vw;
		padding-top: .3vw;
		border-color: grey white white gray;
	}

	div.page_button
	{
		display: block;
		position: relative;
		padding-left: 1vw;
		padding-top: .5vw;
		padding-bottom: .5vw;
		background-color: white;
		width: 100%;
		height: auto;
		border: 0px solid black;
	}
	
	td.body_title
	{
		display: block;
		position: relative;
		font-size: 5.5vw;
		font-family: arial-black, helvetica, system;
		font-weight: bold;
		text-align: left;
		text-justify: inter-word;
		height: auto;
		width: 100%;
		border: 0px solid red;
		padding: 0vw;
		padding-top: 1vw;
		padding-bottom: 1vw;
		margin: 0vw;
	}
	
	td.body_home_page
	{
		display: block;
		position: relative;
		font-size: 5.5vw;
		font-family: arial-black, helvetica, system;
		font-weight: normal;
		text-align: justify;
		text-justify: inter-word;
		height: auto;
		width: 100%;
		border: 0vw solid white;
		padding: 0vw;
		padding-bottom: 4vw;
		margin: 0vw;
	}

	td.body_detail_page
	{
		display: block;
		position: relative;
		font-size: 5.5vw;
		font-family: arial-black, helvetica, system;
		font-weight: normal;
		text-align: justify;
		text-justify: inter-word;
		height: auto;
		width: auto;
		border-width: .1vw;
		border-style: none;
		margin: 0vw;
		padding: .2vw;
		padding-top: 0vw;
		padding-bottom: .0vw;
	}
	
	td.body_other_page
	{
		display: inline-block;
		position: relative;
		font-size: 5.5vw;
		font-family: arial-black, helvetica, system;
		font-weight: normal;
		height: auto;
		width: auto;
		border: 0px solid blue;
		border-spacing: 0px;
		padding: 0vw;
		padding-bottom: 2vw;
		margin: 0vw;
	}

	td.body_stats
	{
		font-size: 5.5vw;
		font-family: arial-black, system;
		font-weight: normal;
		text-align: justify;
		text-justify: inter-word;
		word-wrap: break-word;
		line-height: 4vw;
		border: .2vw;
		border-color: black;
		border-style: solid;
		padding: 0vw;
		margin: 0vw;
		width: 1%;
	}

	td.body_social_media_descreiption
	{
		font-size: 5vw;
		font-family: arial-black, system;
		font-weight: normal;
		text-align: justify;
		text-justify: inter-word;
		height: auto;
		width: auto;
		border: .2vw;
		border-color: black;
		border-style: none;
		padding: 0vw;
		padding-left: 10vw;
		padding-bottom: 1vw;
		margin: 0vw;
	}

	td.body_copyright_page
	{
		font-size: 2.5vw;
		font-family: arial-black, system;
		font-weight: normal;
		text-align: justify;
		text-justify: inter-word;
		height: 2.5vw;
		border: .2vw;
		border-color: black;
		border-style: none;
		padding: 0vw;
		padding-bottom: 1vw;
		margin: 0vw;
	}
	
	.form_label
	{
		font-family: arial-black, helvetica, system;
		line-height: 5vw;
		vertical-align: top;
		text-align: right; 
		display: inline-block;
		width: 35vw;
		padding: .2vw;
		margin: 0vw;
		border: 0vw;
		border-width: 2vw;
	}
	
	.form_input
	{
		font-family: arial-black, helvetica, system;
		width: 95%;
		vertical-align: top;
		text-align: left;
		padding: .2vw;
		margin: 0vw;
		border-color: black;
		border-width: .1vw;
		border-style: solid;
		border-radius: 0px;
	}
	
	img.page_header
	{
	display: inline-block;
	position: relative;
	margin: auto;
	width: 65vw; 
	height: 31vw;
	}	
	
	img.custom_business_software
	{
		display: float;
		float: left;
		vertical-align: middle;
		height: 8vw;
		width: 11vw;
		padding-right: 1vw;
	}
	
	img.applications
	{
		display: float;
		float: left;
		width: 30vw;
		height: 21vw;
		padding-right: 1vw;
	}
	
	button.social_media
		{
		color: #000000;
		font-family: arial-black, system;
		font-weight: bold;
		font-size: 5vw;
		background-color: #FFFFFF;
		text-align: center;
		display: inline-block; 
		padding-left: .4vw;
		padding-right: .4vw;
		padding-top: .1vw;
		padding-bottom: .1vw;
		margin: 0vw;
		border-width: 1vw;
		border-style: solid;
		border-color: #0000FF;
		}	
		
	button.social_media:hover
		{
		color: blue;
		}	
	
	img.social_media
	{
		display: inline-block;
		position: relative;
		height: 10vw;
		width: 10vw;
		padding-right: 1vw;
	}
	
	a.social_media
	{
		display: inline-block;
		position: inline-block;
		font-size: 5.5vw;
		text-align: left;
		height: auto;
		width: auto;
	}
	
	button.page_button
	{	
		display: inline-flex; 
		align-items: center;
		justify-content: center;
		overflow: hidden;
		font-size: 3.5vw; 
		line-height: 3vw;
		font-weight: bold;
		color: black;
		background-color: #DDDDF0;
		min-width: 20vw;
		height: 7vw;
		border-color: white gray gray white;
		border-width: 3px;
		border-style: solid;  
		padding-top: 1px;
		margin: 0px;
		margin: 1vw .5vw 0vw 0vw;
	}
	
	button.page_button:active
	{
		color: #AAAAFF;
		border-color: gray white white gray;
		transform: translatex(.3vw) translatey(.1vw);
	}	
	
	@media not (pointer: coarse)
	{
		button.page_button
		{
			display: none;
		}
	}
	
	@media (pointer: coarse)
	{	
		form.page_button_form
		{
			display: flex;
			background-color: #eeeeee;
			width: 95%;
			height: 10vw;
			border: 0vw;
			margin: 0vw;
			padding: 0px 0px 0px 0px;
			padding-left: .5vw;
			z-index: 0px;
		}
	}
	
	div, td.heading
	{	
		font-weight: bold;
	}

	div, tr, td.spacer_3
	{
		height: .3vw;
		border: 0px solid black;
	}
	
	div, tr, td.spacer_5
	{
		height: .5vw;
		border: 0px solid black;
	}
	
	div, tr, td.spacer_10
	{
		height: 1vw;
		border: 0px solid black;
	}
	
	div, tr, td.spacer_15
	{
		height: 1.5vw;
		border: 0px solid black;
	}
	
	div, tr, td.spacer_20
	{
		height: 2vw;
		border: 0px solid black;
	}	
}