@media (max-width:420px)  {

	*{
		font-family: 'Open Sans', sans-serif;
	}

	nav {
		color: #FFFFFF;
		background-color: #BF0029;	
		position: fixed;
		top: 0em;
		height:60px;
		width: 100%;
		font-size: 1.5em;
		z-index: 100;
		font-family: 'Open Sans', sans-serif;
		font-weight: 900;
		margin-left:-8px;
		padding-left:5px;

	}
	nav img{
		visibility:hidden;
		height: 1px;
		width:1px;
	}
	nav ul{
		list-style-type:none;
		font-size: .7em;
		margin:0;
		margin-top:4px;
		padding:0;
        float: right;
	}
	nav ul li{
		display: inline;
		float:left;
		padding-left:10px;
		padding-right:10px;
	}
	
	nav ul li a:link{
		color:white;
		text-decoration:none;
	}
	nav ul li a:visited{
		color:white;
		text-decoration:none;
	}
	nav ul li a:hover{
		color:white;
		text-decoration:none;
	}
	form {
		margin-left: 0%;
		color: white;
	}

	

	nav em{
		font-size: .5em;
	}

	body {
		margin-top: 60px;
		background-color: #222;
	}

	main {
		display:block;
		color:white;
		margin-left:5%;
		margin-right:5%;
		text-align:left;
	}
	
	main img{

		padding:10px;
        display: inline;
	}

	main h1{
		text-align: center;
	}

	.fancy {
		text-align: center;
	}

	.hidden {
		display: none;
	}

	.nav3 {
		color:white;
		font-size: 16px;
		text-align:center;
	}

	#center{
		display:block;
		margin-left:auto;
		margin-right:auto;
	}

	footer {
	 color: white;
	 text-align:center;
	 bottom:-50px;
	}

	footer a{
		color:gray;
	}

	.post-container {
		display:block;
		width: 80%;
		overflow: auto;
		margin-left:10%;
	}
  
    
	.post-thumb {
		
		display: block;
	}

	.post-content {
		
	}

	.postcontainer {
		margin: 20px 20px 0px 0px;  
		border: 5px solid #333;
		border-radius: 25px;
		overflow: auto;
		color:white;
		width:90%;
		margin-left:5%;
	}
	.postthumb {
		display:block;
		padding:5px;
	}
    
    .postthumb::after{
      display:block;
      margin:0px;
      padding-top:-5px;
      content: "(^ Click The Image For More ^)";
      font-size: .7em;
    }
    
	.postcontent {
		margin:5px;
		color:white;
		padding:5px;
	}
	.posttitle {
		font-weight: bold;
		font-size: 200%;
		padding: 9px;
		background: #333;
		color:white;
		margin:auto;
	}

	hr{
		margin:0px;
	}
  
    a.title{
      text-decoration: none;
      color: white;  
    }
  

	#desc{
		margin:-30px;
		margin-bottom: 0px;
		text-align:center;
		font-style:italic;
	}
	#desc1{
		margin:0px;
		margin-bottom: 0px;
		text-align:center;
		font-style:italic;
	}
	
	main a:link{
		color:white;
	}
	
	main a:visited{
		color:white;
	}
	h3 em{
		font-size:.5em;
		margin-top:1em;
	}
	main a:hover{
		color:white;
	}
    
    .resume{
      width=100%;
        float: none;
        align-content: center;
    }
    #left::after{
      display:block;
      text-align: center;
      margin:0px;
      padding-top:-5px;
      content: "(^ Click The Image To Open ^)";
      font-size: .7em;
    }
    #right::after{
      display:block;
      text-align: center;
      margin:0px;
      padding-top:-5px;
      content: "(^ Click The Image To Open ^)";
      font-size: .7em;
    }

}

@media (min-width:420px)  {
	*{
		font-family: 'Open Sans', sans-serif;
	}
  
    a.title{
      text-decoration: none;
      color: white;  
    }

	nav {
		color: #FFFFFF;
		background-color: #BF0029;	
		position: fixed;
		top: 0em;
		height:75px;
		width: 100%;
		font-size: 3.3em;
		z-index: 100;
		font-family: 'Open Sans', sans-serif;
		font-weight: 900;
		margin-left:-8px;
		padding-left:10px;
	}
	form {
		color: white;
		margin-left:0%;
	}
	#headright{
		text-align: right;
		color:#FFFFFF;
		font-size: .5em;
		margin-top: -2.75em;
		margin-right: 30px;

	}

	ul #first{
		padding: 7px;
		list-style: none;
		margin-right: 20px;
		width: 50px;
		border-bottom: none;
		text-align: right;
		top: -20px;
	}

	ul li {
		position: relative;
		top: -65px;
		width: 200px;
		border: 1px black;
	}

	li ul {
		position: absolute;
		width: 50px;
		left: -100px;
		margin-top: 2em;
		padding: 0px;
		border: 1px black;
		background:rgba(0,0,0,0);
	}

	nav em{
		font-size: 20px
	}

	ul#nav li ul { 
		display: none;
	}
	ul#nav li:hover>ul {
		display:block;
		color:black;
	}
	ul#nav li:hover>a {
		color:black;
	}

	#nav2 ul{
		position: relative;
		display: inline-block;
		list-style: none;
	}

	#nav2 ul ul{
		position: absolute;
		display: none;
		top:100%;
	}

	#nav2 ul li a:link{ 
		background-color: #BF0029;
		display: block;
		font-weight: bold;
		padding: 5px 14px 5px 5px;
		text-decoration: none;
		border: 1px black;
		border-radius: 2px;
		color: white;
		opacity: 1;
	}

	#nav2 ul li a:visited{
		color: white;
		opacity: 1;

	}

	#nav2 ul li a:hover{
		color: black;
		background: #FFFFFF;
		border-color: #FFFFFF;
		opacity: 1;

	}

	body {
		margin-top: 80px;
		background-color: #222;
	}

	main {
		display:block;
		color:white;
		padding-top: 20px;
		margin-left:5%;
		margin-right:5%;
		text-align: justify;
	}

	main h1{
		text-align: center;
	}

	.fancy {
		text-align: center;
	}

	.hidden {
		display: none;
	}

	.nav3 {
		color:white;
		font-size: 16px;
		text-align:center;
	}

	#center{
		display:block;
		margin-left:auto;
		margin-right:auto;
	}

	footer {
	 color: white;
	 text-align:center;
	 bottom:-50px;
	}

	footer a{
		color:gray;
	}

	.post-container {
		display:block;
		width: 75%;
		overflow: auto;
		margin-left:12.5%;
	}
	.post-thumb {
		float: right;
		display: block;
	}

	.post-content {
		margin-right: 210px
	}

	.postcontainer {
		margin: 20px 20px 0px 0px;  
		border: 5px solid #333;
		border-radius: 25px;
		overflow: auto;
		color:white;
		width:90%;
		margin-left:5%;
	}
	.postthumb {
		float:left;
		display:block;
		padding:5px;
		padding-right:10px;
	}
    .postthumb::after{
      display:block;
      margin:0px;
      padding-top:-5px;
      content: "(^ Click The Image For More ^)";
      font-size: .7em;
    }
	.postcontent {
		margin:5px;
		color:white;
		padding:5px;
	}
	.posttitle {
		font-weight: bold;
		font-size: 200%;
		padding: 9px;
		background: #333;
		color:white;
		margin:auto;
	}

	hr{
		margin:0px;
	}

	#desc{
		margin:-30px;
		margin-bottom: 0px;
		text-align:center;
		font-style:italic;
	}
	#desc1{
		margin:0px;
		margin-bottom: 0px;
		text-align:center;
		font-style:italic;
	}
	
	main a:link{
		color:white;
	}
	
	main a:visited{
		color:white;
	}
	h3 em{
		font-size:.5em;
		float:right;
		margin-top:1em;
	}
	main a:hover{
		color:white;
	}

    .resume{
      width = 720px;
    }

    #left{
      float:left;
    }
  
    #left::after{
      display:block;
      text-align: center;
      margin:0px;
      padding-top:-5px;
      content: "(^ Click The Image To Open ^)";
      font-size: .7em;
    }

    #right{
      float:right;
    }

    #right::after{
      display:block;
      text-align: center;
      margin:0px;
      padding-top:-5px;
      content: "(^ Click The Image To Open ^)";
      font-size: .7em;
    }
	
	@media (max-width:720px)  {
		nav{
			width:720px;
			position:absolute;
		}
		body{
			width: 720px;
		}
	}
}