/* **********************************************
	PHASE1 - BASICS
	Content placement on the page.
	Placement will adjust depending on
	the screen size.
   ********************************************** */ 
/* ----------------------------------------------
	Media Defaults 
	Layouts will have these settings unless
	otherwise noted in the media queries.
*/

	.box { 
	padding: 5%;
	position: relative; 
	text-align: center; 
	margin: auto;
	width:900px;
	border: 2px solid #006699;
	}

	.main {
    	max-width: 1200px;
    	overflow: hidden;
    	margin: 0 auto;
    	border-radius: 10px;
	display: block;
        padding: auto;
	margin-top: 10px;
	text-align: center;
        background: #ffffff;
	}
	
	.box1, .box2, .box3, .box4 {
			padding: 1%;
			margin: 1%;
			float: left;
			text-align: center;
			background: #000000;
			display: table-cell;
	}

		.box1 {
						border: 2px solid #336633;
						width: 30%;
						TEXT-ALIGN: left;
		}
		.box2 {
						border: 2px solid #336666;
						width: 60%;
						TEXT-ALIGN: left;
		}
		.box3 {
						border: 2px solid #336633;
						width: 60%;
		}
		.box4 {
						border: 2px solid #336666;
						width: 30%;
						
		}

	.desktop {
	display: block;
	width: 100%;
	}

	.mobile {
	display: none;
	}


		

	.content {
	padding: 10px;
	}

/* ----------------------------------------------
	Mobile Settings Query
	We tell things do act differently
	for phones and other tiny screens.
*/

@media screen and (min-width: 600px) and (max-width: 1024px) { /* Start mobile Query */

	.desktop {
	display: none;
	}

	.mobile {
	display: block;
	}


  .main {
    width: 84%;
    overflow: hidden;
    border-radius: 5px;
	margin-top: 2%;
	}

	.box {
	width: 90%;
	
	}

	.imgleft {
	display: block;
	}
	.box1, .box2, .box3, .box4 {
		display: block;
		width: 90%;
		margin: 20px auto;
		PADDING: 2%;
	}
}

/* ----------------------------------------------
	Please, googlebot. Stop.
	If this doesn't satisfy you
	I don't know what will
*/

@media screen and (max-width: 600px) { /* Start other mobile Query */


	.desktop {
	display: none;
	}

	.mobile {
	display: block;
	width: 98%;
	}


  .main {
    width: 98%;
    overflow: none;
    margin: 0 auto;
    border-radius: 5px;
    box-shadow: none;
	}
    
    .content {padding: 5px;}

}






/* **********************************************
	PHASE2 - BASIC FORMAT
 	These are the colors and such of the 
	text, lines, paragraphs, and then some.
	This phase applies to all versions of the site.
   ********************************************** */ 

	body {
	font-family: arial, Helvetica, sans-serif;
	color: #000000;
	background: #072A6C;
	background-image: url("img/tile.gif")}

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


	p {
	}


	h1, .h1like { 
		font-weight: bold;
		padding-left:10px;
		margin:0;
		font-family: 'Julius Sans One';
        clear: both;
        font-size: %150%;
		}



	h2 { 
		font-weight: bold;
		font-family: 'Julius Sans One';
        clear: both;
        text-align: align: left;
		}



	h3 { 	 
		font-weight: bold;
		margin-bottom: 0px;
		font-family: 'Julius Sans One';
		}




	h4 { 
		font-weight: bold;

		}

	

	a { 
	font-weight: bold;
	text-decoration: none;
	color:#25744A;
	}

	a:hover { text-decoration: underline;}

li { 	 
		line-height: 25px;
		margin-left:-5px;
		margin-right:5px;

}

ol li {
	list-style: decimal;
}




/* Image and other element handling */

	.imgborder { 
	BORDER: #5E3F20 1px solid;
	}

	.smalltext { 
	font-size: 12px;
	line-height: 14px;
	}
	
	.borderleft { 
	border-left-width: 1px;
 	border-left-style: solid;
 	border-left-color: #000000;
	}
	
	.imgright {
 	float: right;
 	margin-left: 5px;
	max-width: 50%;
	height: auto;
	}

	.imgleft { 
	float: left;
	height: auto;
	margin-right: 10px;
	margin-bottom: 10px;
	}

	.blockcenter {
 	display: block;
 	margin-left: auto;
 	margin-right: auto;
	}

	.clear {
 	clear: both;
	}
	
	.bluetext { 
	color: #0071BD;
	}

hr {
  display:block;
  border:none;
  height:1px;
 width: 600px;
 max-width: 90%;
  background-image:url('colorbar.gif');
}

	q {
 	quotes: none;
	}
	
	q:before, q:after {
 	content: '';
	content: none;
	}

/* **********************************************
	PHASE3 - FLEX NAVIGATION
 	WHAT'S ON THE MENU?
   ********************************************** */ 

.navbar {
  display: flex;
  justify-content: space-evenly;
    margin: 0px;
    padding: 0px;
    width: 100%;
    align-content: center;
      
}
.navbar a { 
  margin: 0px 0px 0px 10px;
  background: #60B99A;
  color: #fff;
	display: block;
	padding: 8px;
	text-decoration: none;
    width: auto;
    font-size: 150%;
    font-family: 'Julius Sans One';
    font-weight: bold;

}

.navbar li{ list-style-type: none; width: inherit;
 }

@media screen and (max-width: 700px) { /* Start mobile Query */

.navbar a { 
    font-size: 100%;
    font-weight: auto;
    
    
    }


}

/* **********************************************
	PHASE4 - SOCIAL LINKS
    literally the worst part
   ********************************************** */ 
.social {
    padding: 0px;
    margin: auto;
    display: block;
}
.social img {
    margin: 3px;
    max-height: 46px;
}