*, body, html, a {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-family: "Open Sans";
    color: #013E39;
    background-color: #fff;

}

	/* Mobile First iPhone 5S 321px ========================================*/

/* Across all Header, Main, Footer */




#masthead-blog {

background:#000 url(../images/hintonampner_field_cropped.jpg) 80% 50% no-repeat;

}

.site {
	text-align:center;
	}

main {
margin-left: 5%;
}


.siteDescrip {
font:.6em "Open Sans";
font-style:italic;
/*margin-left:35px;*/
}


.site-intro {
	margin:1vw;
	}

	#blogposts {
	display:flex;
	justify-content:center;
	flex-direction:column;
	}

aside {
display: block;
width:90%;

  }



h3 {
	margin-top:1em;
	font-weight:800;
	font-size:1.3em;
	}

/* ---- Tag Cloud ---- */
#cloud {
    padding: 0.5em 0.5em 2em 0.8em;
    line-height: 2.2em;
    border-left: 2px solid #013E39;
    display: block;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

#cloud a {
    display: inline-block;
    padding: 3px 10px;
    margin: 3px 2px;
    border-radius: 12px;
    background-color: #f0f7f6;
    border: 1px solid #013E39;
    font-size: 0.85em;
    text-decoration: none;
}

#cloud a:hover {
    background-color: #013E39;
    color: #fff;
}

/* ---- Archive ---- */
#archive {
    padding: 0.5em 0.5em 2.5em 0.8em;
    margin-top: 1em;
    border-left: 2px solid #013E39;
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    position: relative;
    z-index: 1;
}

#blogarchive-nav ul {
    list-style: none;
    padding: 0 0 0 0.3em;
    margin: 0;
    text-align: left;
}

#blogarchive-nav ul li {
    padding: 0.35em 0;
    border-bottom: 1px solid #e8f0ef;
    text-align: left;
}

#blogarchive-nav ul li a {
    font-size: 0.9em;
    text-decoration: none;
    text-align: left;
}

#blogarchive-nav ul li a:hover {
    font-weight: 800;
}

.blogAuthor {
	font:1em 'Times New Roman', Serif;
	font-variant:small-caps;
	font-weight:lighter;
	letter-spacing:.2em;
	}

.blogEntry {
		box-shadow: 1px 1px 10px 1px #013E39;
		border-radius: 25px;
		text-align:left;
		padding: 0 30px 10px 20px;
		margin:20px 0 2em 0;
		max-width:80%;
		}

section.blogEntry picture img {
max-width:100%;
}
.blogDate {
	font:1em 'Times New Roman', Serif;
	margin-bottom:.5em;
	}

p.blogText, p {

line-height:1.6;
margin-bottom:1em;
margin-left:0;
}

p.blogText > p > video, p.blogText > video {
margin-left:0;
}





.blogTopic {     /*21 Aug 2021 for tag column*/

width:20%; /*21 Aug 2021 for tag column*/
border: 2px solid black;
border-radius: 5px;
position:relative;
float:right;
}

p.blogTopic {
	padding-bottom:2em;
	}


h1 {
opacity:.70;
height:30vh;
}



.rotated{
  transform: rotate(0deg); /* Equal to rotateZ(45deg) */
  /*margin:2em 0 2em 0;*/
  font:8em cursive;
  /*opacity:.80;*/
    opacity:.90;
  position:relative;
  top:-40px;
  left:-45%;
  width:8%;
  }

form h3 {
font-size:1em;
}

article{
width:65%;}

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

.validateme {
	color:white;
	background-color:white;
	position:absolute;
	left:-300px;
	top:-300px;
	line-height:0;
	font-size:0px;

	}
/*list apart video solutn

.wrapper-with-intrinsic-ratio {
	position: relative;
	padding-bottom: 20%;
	height: 0;
}

.element-to-stretch {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: teal;
}
*/

@media only screen and (min-width: 400px) { /*================400   ===========*/

/* Across all Header, Main, Footer  Each added here enables different from mobile views*/



.rotated{
  transform: rotate(0deg); /* Equal to rotateZ(45deg) */
  /*margin:2em 0 2em 0;*/
  font:9em cursive;
  /*opacity:.80;*/
    opacity:.90;
  position:relative;
  top:-40px;
  left:-45%;
  width:20%;
  }


p.blogText, p {

	line-height:1.6;
	margin-bottom:1em;
	margin-left: -2.8em;
	}

.blogEntry {
		box-shadow: 10px 10px 7px 7px #013E39;
		border-radius: 25px;
		padding: 0 20px 20px 20px;
		margin:20px 20px;
		max-width:95%;
		}


#sand {
position:relative;
top:380px;
text-align:right;
/*z-index:1;*/
}

@media only screen and (min-width:900px){/*================ 900   ===========*/
	.main-content {
		columns:1;
		padding-right:2em;
		margin-right:auto;
		margin-left:auto;
		}
	aside {
		display:flex;
		flex-direction:column;
		align-content:flex-start;
		align-items:flex-start;
		max-width:25%;
        margin-left:70%;
		  }

	p {
		font-size:1em;
		line-height:1.2em;
		color:#999;
		}

h1 {
opacity:.70;
height:50vh;
}


	.rotated{
	  transform: rotate(-45deg); /* Equal to rotateZ(45deg) */
	  /*margin:2em 0 2em 0;*/
	  font:8em cursive;
	  /*opacity:.80;*/
		opacity:.90;
	  position:relative;
	  top:-40px;
	  left:-45%;
	  width:10%;
	  }

.blogposts {
width:100%;
}

.blogEntry {
	max-width:75%;
	width:75%;
	}




	h3 {
	/*	margin-left:1em; */
		padding-top:1em;
		font-size:1.8em;
		line-height:1.2em;
		color:#999;
		}



}


@media only screen and (min-width: 1200px) { /*================ 1200   ===========*/
/* Across all Header, Main, Footer */

h1{
color:white;
opacity:.60;
}


}}