/*CSS Styles 2.0*/
/*INIT CODE*/
	/* CHARSET DEFINE */
	@charset "utf-8";
	/* UNIVERSAL RESET */
	*	{margin: 0;
		padding: 0;}
	/* SMOOTH SCROLLING */
	html {
		scroll-behavior: smooth;
		overflow: auto;
	}
/*INIT CODE END*/


/*Upper_Container & Contents*/
#container{
	position: fixed;
	top: 0;
	width: 100%;
	//background-color: green;
	//background-image: image(images/logo.png);
}
#upper_container{
	//position: fixed;
	height: 100%;
	//background-color: darkseagreen;	
}
/*DIV Containers : Upper Contents*/
	#upper_logo{	
		position: relative;
		margin-top:3%;
		margin-bottom: 2%;
		left: 32.187%;
		width: 35.625%;
		/*background-color: crimson;}*/
	}
	#upper_logo img {
		
		width: 100%;
		height: 100%;
	}
	#upper_contactphone{
		position: fixed;
		right: 5.625%;
		top: 3.25%; /*REDUCED by 3%*/
		z-index 5;
		/*background-color: crimson;*/
	}
	#upper_navbar{
		background-color: #d7d7d7;
		position: relative;
		left: 10%;
		width: 80%;
		height: 5%;
		/*OLD CENTER ALIGN margin: 0 auto;*/
		/*OLD UNKNOWN text-align: center;*/
	}
	#upper_promotional{
		position: absolute;
		left: 10%;
		width: 80%;
		height: 50%;
		z-index: -1;
		/*background-color: blanchedalmond;*/
	}
		#upper_promotional_line{
			background-color: #e1e1e1;
			position: relative;
			left: 0%;
			width: 100%;
			height: 5%;
			z-index: -1;
		}
		/*Upper Promotional Box */
		#upper_promotional_image{
			scroll 0 0 transparent;
			background-image: url("images/springbg.jpg"); background-size: cover; 
			height: 94%;
			z-index: -1;
			/*
			//background-repeat:no-repeat;
			//background-position: center top;
			//position: relative;
			//opacity: 100%;
			//left: 0%;
			//width: 100%;
			//text-align: center;
			//top: 9%; //^Upper Gap Size
			//margin: 0 auto;
			//background-color: #ffffff;
			//background: url("../images/springbg.jpg") no-repeat */
		}
			#upi_text{
				background-image: url("images/upi_TEXT_BOX.png"); background-size: contain; 
				background-repeat:no-repeat;
				background-position: center; /*CenterAlign*/
				margin: 0 auto; /*CenterAlign*/
				position: relative;
				top: 10%;
				height: 75%; /*Dimension Y*/
				width: 50%; /*Dimension X*/
				z-index: 0;
				/*NOTE: When Window is Wider than it is Long, height and width values above are perfect, but when the window is longer than it is wide, INVERT these values, use adaptive web design to add this later.*/ 
				/*//position: relative;
				//text-align: center;
				//top: 10%; //^Upper Gap Size
				//left: 20%;
				//opacity: 100%;
				//background-color: #ffffff;*/
			}
		#upper_promotional_line2{
			background-color: #e1e1e1;
			position: relative;
			left: 0%;
			width: 100%;
			height: 5%;
			z-index: -1;
		}
		/*End Upper Promotional Box */

		#clarity_advantage{
		position: relative;
		//margin-top: 10%;
		padding: 12%;
		padding-top:10%;
		height: auto;
		}
		#our_services{
		position: relative;
		//margin-top: 10%;
		padding: 12%;
		padding-top:10%;
		}
		#our_team{
		position: relative;
		//margin-top: 10%;
		padding: 2%;
		padding-top:10%;
		}
		#our_mission{
		position: relative;
		//margin-top: 10%;
		padding: 2%;
		padding-top:10%;
		}
		#quote{
		position: relative;
		//margin-top: 10%;
		padding: 2%;
		padding-top:10%;
		}




/*#middle_container{
	//background-color: coral;
	//position: fixed;
	//top: 80%;
	//left: 10%;
	//width: 100%;
}

#middle_content1

#lower_container{
	//background-color: darkgoldenrod;
}
*/



/*Hyperlink stuff?*/
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #d7d7d7;
}

li {
  float: left;
	width: 20%;
}

li a {
  	display: block;
  	color: #555555;
  	text-align: center;
  	text-decoration: none;
	font-size: 0.9vw;
    font-family: 'Poppins';
    text-align: center;
}

li a:hover {
  background-color: #F3F3F3;
}


/*Headings and stuff?*/
.h1 {
	//background-color: lightgray;
    font-size: 64px;
    font-family: 'Poppins Light';
    text-align: center;
}

.h2 {
	//background-color: lightgray;
    font-size: 22px;
    font-family: 'Poppins Light';
    text-align: center;
}

.h3 {
	//background-color: lightgray;
    font-size: 2.3vw;
    font-family: 'Micaroline';
    text-align: center;
}

.h4 {
	//background-color: lightgray;
    font-size: 1.75vw;
    font-family: 'Micaroline';
    text-align: center;
}

.h5 {
	//background-color: lightgray;
    font-size: 1.75vw;
    font-family: 'Micaroline';
    text-align: center;
}

.h6 {
	//background-color: lightgray;
    font-size: 1.3vw;
	/*1.4vw*/
    font-family: 'Poppins Light';
    text-align: justify;
}

.h7 {
	//background-color: lightgray;
    font-size: 3vw;
    font-family: 'Poppins Light';
    text-align: center;
}

.h8 {
	//background-color: lightgray;
    font-size: 1.5vw;
	/*1.4vw*/
    font-family: 'Poppins Light';
    text-align: left;
}

.center {
 display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 30%;
}

.r1 {
    font-size: 20px;
    font-family: Micaroline;
    text-align: end;
    font-style: normal;
    font-weight: bold;
}

.button1 {
  background-color: #e7e7e7; color: black; /* GRAY */
  border: none;
  border-radius: 12px;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  font-family: "Micaroline";
}

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: tomato;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: indianred;
}

/* Add a background color and some padding around the form */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}