iframe {border:0px}



@media screen {
#SkipTo {		display: none; }
}


/* Media Queries  -------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {

/* 
body:before {
							content: "480px";
							font-size: .3rem;
							background-color: red;
							}
							
							*/ 
#skipTo 			{	display: block;	}
header nav, #main, aside {
							clear: left;
							float: left;
							margin: 0 0 10px;
							width: 100%;
							}
							
.wrapper-two-column-img-container.flipped,
.wrapper-two-column-right-filler.flipped,
.wrapper-two-column-right.flipped  {
							width: 90%; 
							}
							
														
header nav li 				{
							background: #efefef;
							display: block;
							margin-bottom: 3px;
							margin: 0;
						}
header nav a 			{
							display: block;
							padding: 10px;
							text-align: center;
							}
#main figure,
#main figcaption {
							margin: 1em 0px;
							padding: 0px;
							}

} /* end media  480*/









/* Media Queries  ------------------------------------------------------------------------- 768   ------------------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {




#skipTo {					display: block;	}

/* debug */
/* 
body:before { 	content: "768"; font-size: 1rem;
							background-color: pink;
							} */

html {						background-color: beige !important
							margin: auto;
							}

body > nav  {
							border: 0px solid red;
							padding-left: 0px;
							}

.wrapper-two-column  {
						  	display: block;
	}
div.wrapper-two-column-img-container {
							width: 90% !important;
							box-sizing: border-box;
							margin: auto;
							}

div.wrapper-two-column-right {
							width: 90% !important;
							box-sizing: border-box;
							margin: auto;
							font-size: 1.1rem;
							padding: 1rem;
							}
							
.wrapper-two-column-img-container.flipped,
.wrapper-two-column-right-filler.flipped,
.wrapper-two-column-right.flipped  {
							width: 90%; 
							}

main {	/* main--> nav + content  */
							margin: auto;
							width: 100%;
							display: flex;
							flex-wrap: wrap;
							}

main > nav { 	/* Media Queries */
							align-self: start;
							border: 0px solid blue !important;
							box-sizing: border-box;
							flex-grow: 1;
							margin: 0;
							padding: 0;
							position: relative; 	/* turn off stickiness */
							top: auto;
							width: 90%;
							}

main.blogpost > nav.section-nav { 	/* Media Queries */
							align-self: start;
							border: 0px solid blue !important;
							box-sizing: border-box;
							flex-grow: 1;
							margin: 0;
							padding: 0;
							position: relative; 	/* turn off stickiness */
							top: auto;
							width: 90%;
							}
main > content {
							border: 0px solid blue;
							box-sizing: border-box;
							flex-grow: 1;
							margin: 0;
							padding: auto;
							width: 90%;
							}

.flex-item { /* once this turns into a percentage it will stop wrapping, duh */
							box-sizing: border-box;
							height: auto;
							margin: 2rem;
							max-width: 50rem;
							padding: 5px;
							text-align: center;
							width: 100% !important;
							}

.flexbox {					flex-flow: row wrap;
							border: 5px solid #efefef !important;
										}
.flexbox>.left {  			background-color: orange !important;
							order: 1;
							width:100%; }
.flexbox>.right {			order: 2;
							width:100%; }

.flexbox>.center {			order: 3;
							width:100%;	}



footer section.ft-main {
							justify-content: start;
							width: 100%;
							flex-wrap: wrap;
							flex-direction: row;
							}

footer section.ft-main .ft-main-item.paragraph {
  							max-width: 100%;
  							border: 0px solid pink;
							}


}




/* Media Queries  ------------------------------------------------------------------------- 768  to 1120   ------------------------------------------------------------------------------------- */

@media screen and (min-width: 769px) and (max-width: 1119px) {



footer section.ft-main .ft-main-item.paragraph {
  							max-width: 60%;
  							border: 0rem solid red !important;
							}


footer section.ft-main {
							border:0px solid pink;
							justify-content: space-between;
							margin-left:  auto;
							padding: 1.25rem;
							}


/* debug 
body:before {  	content: "769 to 1120"; font-size: .3rem;
							background-color: purple;
							color: white;
							} */


main nav { /* once this turns into a percentage it will stop wrapping, duh */
							/* debug  border: 3rem solid pink;  */
							margin: 0;
							padding: 0;
							}


main nav + content div.flex-container .flex-item { /* once this turns into a percentage it will stop wrapping, duh */
							/* debug
							border: 3rem solid pink; */
							box-sizing: border-box;
							height: auto;
							margin: .5rem;
							max-width: 50rem;
							padding: 5px;
							text-align: center;
							width: 100% !important;
							}

div.wrapper-two-column-img-container {

							width: 40% !important; }

div.wrapper-two-column-right {
							width: 60% !important;
							border: 0px solid blue;
							font-size: 1.1rem;
							padding: 1rem;
							}

.wrapper-two-column-img-container.flipped,
.wrapper-two-column-right-filler.flipped,
.wrapper-two-column-right.flipped  {
							width: 33%; 
							}
							
							


.flexbox       {   			flex-flow: row wrap;  }
.flexbox>.left {			order: 1;
							flex: 0.5;
							}
.flexbox>.right {
							order: 2;
							flex: 0.5;
							}
.flexbox>.center {
							order: 3;
							width: 100%;
							}
}

/* Media Queries  ------------------------------------------------------------------------- 1120  to 1500  ------------------------------------------------------------------------------------- */


@media screen and (min-width: 1120px) and (max-width: 1500px) {


footer section.ft-main .ft-main-item.paragraph {
							border: 0rem solid red !important;
							max-width: 40rem;
							border: 0px solid red;
							}

footer section.ft-main {
							border: 0px solid cyan;
							justify-content: space-between;
							margin-left:  auto;
							padding: 1.25rem;
							}

/* debug */
/*
body:before { 	/* content: "1120px to 1500px"; font-size: .3rem;
							background-color: salmon;
							}
*/


.wrapper-two-column-right {
							font-size: 1.1rem;
							padding: 1.5rem;
							}
	

.wrapper-two-column-img-container.flipped,
.wrapper-two-column-right-filler.flipped,
.wrapper-two-column-right.flipped  {
							width: 33%; 
							}

	
main > nav { 	/* Media Queries */
							align-self: start;
							border: 0px solid brown !important;
							box-sizing: border-box;
							flex-grow: 1;
							margin: 0;
							padding: 0;
							position: relative; 	/* turn off stickiness */
							top: auto;
							width: 20%;
							}
.flex-item {
							box-sizing: border-box;
							height: auto;
							text-align: left;
							width: 45% ;  /* once this turns into a percentage it will stop wrapping, duh */
							
							}


.flexbox {		    		flex-flow: row wrap;  }
.flexbox > div {    		width: 33.33% !important;  }
.flexbox>.left {			order: 1;  }
.flexbox>.center {			order: 2;  }
.flexbox>.right {			order: 3;  }

} /* end media */


/* Media Queries  ------------------------------------------------------------------------- 1120  to 1500  ------------------------------------------------------------------------------------- */


@media screen and (min-width: 1501px) {


footer section.ft-main .ft-main-item.paragraph {
							border: 0rem solid purple !important;
							max-width: 40rem;
							border: 0px solid red;
							}

footer section.ft-main {
							border: 0px solid cyan;
							justify-content: space-between;
							margin-left:  auto;
							padding: 1.25rem;
							}
 /* debug */

/* 
body:before {	content: "1501px and up"; font-size: .3rem;
							background-color: slategray;
							color: white;
							}
							*/
							
							
.wrapper-two-column-right-filler { /* ? When is this used? */
							background-color: slategray; 
							display: flex; display: inherit;
							width: 30%;
							border:  0px solid orange;
}


main > nav { 	/* Media Queries */
							align-self: start;
							border: 0px solid yellow !important;
							box-sizing: border-box;
							flex-grow: 1;
							margin: 0;
							padding: 0;
							position: relative; 	/* turn off stickiness */
							top: auto;
							width: 10%;
							}


.flex-item {
							box-sizing: border-box;
							height: auto;
							text-align: left;
							width: 30% ;  /* once this turns into a percentage it will stop wrapping, duh */
							}

.flexbox {					flex-flow: row wrap; }
.flexbox > div {			width: 33.33% !important;   }
.flexbox>.left {		   	order: 1;   }
.flexbox>.center {		    order: 2;  }
.flexbox>.right {		    order: 3;  }


} /* Media Queries end -------------- */