/* code that is here, until the first @media block, will apply to any screen size */

body {
	margin:0;
}

#container	{
	margin:0;
}

#top-strip {
	height:auto;
	width:100%;
	background-color:#FFFFFF;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
}

#top-image	{
	background:right;
	background-repeat:no-repeat;
	}

#apply-image	{
	background:right;
	background-repeat:no-repeat;
	}


.info-box-small {

}

#main-info-medium-container	{
	height:auto;
}

.main-info-medium-column {
	height:auto;
}









@media screen and (max-width: 680px) {
  /* comes into effect for screens less than or equal to 680 pixels */


#top-menu	{
	width:50%;
}

#top-menu li {
	width:98%;
}

.main-info-medium-column {
	width:100%;
}
  
  .info-box-medium {
    width: 100%;
  }
  
  .info-box-small {
    width: 45%;
  }
  

.footer-box	{
	width:100%;
}

}

@media screen and (min-width: 681px) {
  /* comes into effect for screens between 681 and above */



#top-menu	{
	width:75%;
}

#top-menu li {
	width:22%;
}

.main-info-medium-column {
	width:49.5%;
}

  .info-box-medium {
    width: 100% ;
  }
  
  .info-box-small {
    width: 23%;
  }
  

#main-contact-form	{
	width:92%;
}

.footer-box	{
	width:48%;
}


  
}



@media screen and (min-width: 1025px) {
  /* Minor Break Point - when screen is above 1024px wide then limit body to 1024px */

#container {
	width:1000px;
	margin-left: auto;
	margin-right: auto;
} 

   
}



/* code that is here will apply to any screen size */

body {
 	font-family: 'Open Sans', sans-serif;
 	font-size:14px;
} 


#top-logo	{
	
}

.info-box-small {
	height:auto;
	padding:5px;
	margin-top:5px;
	background-color:#F5F5F5;
	box-shadow:1px 1px 0px 0px #CCC;
}

.info-box-medium {
	height:auto;
	font-size:16px;
	padding:10px;
	margin-top:5px;
	background-color:#005580;
	color:#ffffff;
	box-shadow:#CCC 1px 1px;
}


.main-content-box	{
	width:96%;
	color:#000000;
	background-color:#F6F6F6;
	font-size:16px;
	padding:2%;
}

.main-content-box-header	{
	width:96%;
	font-size:18px;
	margin-top:5px;
	background-color:#005580;
	color:#FFFFFF;
	padding-left:2%;
	padding-right:2%;
	padding-top:5px;
	padding-bottom:5px;
	border-top:1px solid #000;
	border-bottom:1px solid #000;
}

.main-content-question-container {
	width:100%;
	display:flex;
  	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	
}

.main-content-question-box-label {
	width:28%;
	background-color:#DDD;
	border:#999 1px solid;
	padding-left:0.5%;
	margin-top:15px;
	border-top-left-radius:8px;
}

.main-content-question-box {
	width:70%;
	background-color:#DDD;
	border:#999 1px solid;
	border-left:none; 
	padding-left:0.5%;
	margin-top:15px;
	border-top-right-radius:8px;
}

.main-content-answer-box-label {
	width:28%;
	background-color:#FFFFFF;
	border:#999 1px solid;
	border-top:none;
	padding-left:0.5%;
	border-bottom-left-radius:8px;
}

.main-content-answer-box {
	width:70%;
	background-color:#FFFFFF;
	border:#999 1px solid;
	border-top:none;
	border-left:none;
	padding-left:0.5%;
	border-bottom-right-radius:8px;
}

#main-info-medium-container	{
	width:100%;
	display:flex;
  	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
}



.main-info-medium-header	{
	font-size:20px;
}

#main-info-small-container	{
	height:auto;
	display: flex;
  	flex-direction: row;
	flex-wrap: wrap;
	justify-content:space-around;
}

#main-contact-form	{
	height:auto;
	font-size:16px;
	padding:4%;
	margin-top:5px;
	background-color:#005580;
	color:#FFFFFF;
}

.main-link-button {
	width:auto;
	height:auto;
	padding:3px;
	background-color:#FF0;
	border-radius:5px
}





/* TOP MENU */

#top-menu {
	
}

#top-menu ul {
	/*Make parent element a flex container*/
  list-style-type:none;
  font-size:16px;
}

#top-menu li {
	color:#006699;
	padding:4px 6px; 
	margin-top:1px;
	border:none;
	height:100%;
}

a:link {
	text-decoration: none;
	color:#006699;
}
a:visited {
	text-decoration: none;
	color:#006699;
}
a:hover {
	text-decoration:none;
	color:#0082BF;
}
a:active {
	text-decoration: none;
	color:#006699;
}

/*  END OF TOP MENU*/

/* White Links */

.white-links a:link {
	text-decoration: none;
	color:#ffff88;
}
.white-links a:visited {
	text-decoration: none;
	color:#ffff88;
}
.white-links a:hover {
	text-decoration:none;
	color:#FFFF66;
}
.white-links a:active {
	text-decoration: none;
	color:#ffff88;
}

/* END OF White Links */


/* Form Styling */

.form-label	{
	width:38%;
	padding: 6px 10px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
    box-sizing: border-box;
	font-size:12px;
	background-color:#333333;
}

.form-item	{
	width:50%;
}

input[type=text], select, textarea {
	width:100%;
    padding: 6px 10px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
    box-sizing: border-box;
	font-size:14px;
}


input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 7px 10px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

/* END OF Form Styling */


/* Footer Styling */

#footer-container {
	background-color:#333333;
	color:#FFFFFF;
	width:100%;
	margin-top:10px;
	font-size:12px;
	display: flex;
  	flex-direction: row;
	flex-wrap: wrap;
	justify-content:space-around;	
}

.footer-box-header	{
	font-size:16px;
}

.footer-box	{
	padding:5px;
	margin-top:5px;
}

.footer-box a:link {
	text-decoration: none;
	color:#99dfff;
}
.footer-box a:visited {
	text-decoration: none;
	color:#99dfff;
}
.footer-box a:hover {
	text-decoration:none;
	color:#ccefff;
}
.footer-box a:active {
	text-decoration: none;
	color:#99dfff;
}

/* End of Footer Styling */

.legal {
	color:#333333;
	font-size:13px;
	padding:2%;
}

/* Buttons */

.green-button {background-color:#4CAF50; width:150px; padding:14px 20px; margin:8px 0; border:none; border-radius:4px; cursor:pointer;
}

.green-button:hover {
	background-color: #45a049;
}


/* END OF Buttons */