* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
    font-size: 16px;
    font-family: 'Raleway', sans-serif; /* Arial, Helvetica, Verdana, .... Verdana, Geneva, sans-serif; */
	font-optical-sizing: auto;
    font-style:normal;
    font-weight:400;
	line-height: 1.3em;
    background-color:#FFF;
}

/* flex-container syntax: https://www.w3schools.com/css/css3_flexbox_container.asp */

.page {
	margin: 0 auto;
	max-width: 1600px;
}

.section {
	width: 100%;
    padding:10px 50px 10px 50px;
}

.section-narrow {
    width: 100%;
	padding:10px 120px 10px 120px;
}

.section-very-narrow {
    width: 100%;
	padding:10px 240px 10px 240px;
}

.section p {
	margin:20px 20px 20px 20px;	
}

.section-narrow p {
	margin:20px 20px 20px 20px;	
}

.section-very-narrow p {
	margin:20px 20px 20px 20px;	
}

.flex-container-row {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  }
  
.align-items-start {
  align-items: flex-start;
}
  
.flex-container-column {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
/*  width: 25%;*/
  }
  
/* Used for the 'Work With Me' row of items on the home page */
.grid {
	display: grid;
	overflow: hidden;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
	justify-content: center;
/*    align-items: center; */
	/* grid-column-gap: 5px;*/
   /* grid-row-gap: 5px;*/
   	padding-top: 10px;
	margin: auto;
    width: 90%;
}
.grid-item {
	display: flex;
	flex-wrap: nowrap;
    flex-direction: column;
	justify-content: space-between;
}
  
/* ----------------------- BANNER ----------------------- */
.banner {
/*	height: 350px;*/
    padding-top: 50px;
	padding-bottom: 40px;
	display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
	
	background-color: #FFFFFF;
	background-image: url("../_images/background-4_6000x2000.png");
	background-repeat: no-repeat;
	background-size: 4500px;
	background-position: 55% 52%;
}

.banner .wordmark-storyteller {
	font-family: 'Cinzel Decorative', serif;
	font-optical-sizing: auto;
    font-style:normal;
    font-weight:400;
	font-size: 4.5rem; 
/*	line-height: 1.3rem;*/
	color: #FFF;
	text-align: center;
}

.banner .subtitle {
    font-size: 1.5rem;
	color: #FFF;
	text-align: center;
	/*line-height: 2.0rem;*/
}

/* ----------------------- FOOTER ----------------------- */
.footer {
	background-color: #407C8E;
}

.footer p {
    color: #FFF;	
}

.footer .wordmark-storyteller {
	font-family: 'Cinzel Decorative', serif;
	font-optical-sizing: auto;
    font-style:normal;
    font-weight:400;
	font-size: 2.0rem; 
	line-height: 2.0rem;
	color: #FFF;
	text-align: center;
	margin: 20px 20px 10px 20px;
}

.footer .wordmark-visions {
	font-family: 'Agu Display', serif;
	font-optical-sizing: auto;
    font-style:normal;
    font-weight:400;
	font-size: 2.0rem; 
	line-height: 2.0rem;
	color: #FFF;
	text-align: center;
	margin: 4px 10px 10px 10px;
}

/* sunshine  eye icon */
.footer .visions img {
    width: 40px;	
}

.footer img {
    width: 220px;	
}

/* menu items: footer --------------------------- */
.nav-footer-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  	color: #FFF;
}

.nav-footer-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  	color: #FFF;
}

.nav-footer-column a {
	margin: 0px 10px 10px 0px;
}

.X-nav-footer p {
	font-size: 1.1em;
    font-family: 'Raleway', sans-serif;
	font-optical-sizing: auto;
    font-style:normal;
    font-weight:400;
	line-height:0.7em;
	color: #FFF;
}

.footer a:link, 
.footer a:visited {
	color:#FFF;
    text-decoration: none;
}
.footer a:hover {  /* Removed .nav-header a:focus to solve problem of items staying colored after BACK button is clicked */
	color:#9BF1FF; /* text label color */
/*	background-color:#0099cc;*/  /* #0099cc #00ace6 */
	background-size: contain;
	background-position: center center;
	background-repeat:no-repeat;
    overflow:hidden;
    }
.footer a:active {
	color:#69EAFF;  /* text label color */
/*	background-color:#00BFFF;*/
	background-size: contain;
	background-position: center center;
	background-repeat:no-repeat;
    overflow:hidden;
  }
  
/* ----------------------- SUBSECTIONS ----------------------- */
.subsection-text {
    width: 100%;
  }
.subsection-text p {
	text-align: center;
}
.subsection-text-heading {
	font-family: 'Raleway', sans-serif; 
    font-optical-sizing: auto;
	font-size: 1.75rem;
	line-height: 1.95rem;
    font-weight: 500;
	font-style:normal;
}
.subsection-image {
    width: 40%;
  }
.subsection-image-lg {
    width: 70%;
  }
.subsection-image-sm {
    width: 20%;
  }
/* ----------------------- SECTION TITLE IMAGE ----------------------- */  
.section-title-image {
	width: 100%;
	height: 180px;
	background-color: #FFFFFF;
	background-image: url("../_images/background-5_6000x2000.png");
	background-repeat: no-repeat;
	background-size: 850px;
    background-position: 50% 50%;
}

.section-title-image p {
	font-family: 'Raleway', sans-serif; 
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
	font-size: 40px;
	text-align: center;
    line-height: 1.7rem;
	color: #FFF;
	height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
	margin:0;
}
/* ----------------------- SPOT IMAGE ----------------------- */  
.spot-image {
	width: 200px;
	margin:auto;
}
/* ------------------------------ FAQ -------------------------- */  
.faq-q {
	font-weight: 600;
}
.faq-a {
	padding-left: 20px;
}
/* ------------------------ TERMS and PRIVACY ------------------ */  
p.terms-privacy-section-heading {
	font-weight: 600;
}
p.terms {
	padding-left: 0px;
}
p.terms-bold {
	padding-left: 0px;
	font-weight:bold;
}
/* --------------------------- LISTS --------------------------- */ 

.ul-type-1 {
	list-style-position: inside;
    list-style-type: disc; 
	margin-left: 40px;
	padding-left: 20px;
/*	font-size: 1.0rem; */        /* 16px */
/*    font-family: 'Montserrat', sans-serif;*/
/*    font-style:normal;*/
/*    font-weight:400;*/
/*    line-height: 1.4rem;*/       /* 22.4px */
/*    margin-bottom: 1.5rem;*/     /* 24px */
/*    padding-left: 1.0em;*/
}
.ul-type-1 li {
	text-indent: -18px;
	padding: 5px 0px 5px 0px;
/*    margin-left: 30px;*/  /* gives 'room' for the bullets to appear in */
/*    padding-left: 0.3rem;*/  /* sets gutter width between list numbers and text */
}

.ul-type-2 {
/*	list-style-image: url('../_images/disc-sm.png');*/
	list-style-type: none;
	list-style-position: inside;
	margin-left: 40px;
	padding-left: 20px;
	padding-right: 20px;
}
.ul-type-2 li {
	text-indent: -28px;
	padding: 10px 0px 10px 0px;
}


/* REF: https://www.sololearn.com/en/Discuss/387548/liststyleimagethe-image-size */
/* REF: https://www.geeksforgeeks.org/css/how-to-resize-list-style-image-in-css/ */
.ul-type-2 li::before {
	content: '';
	display:inline-block;
	width: 12px;
	height: 12px;
	margin-right: 12px;
	background-size: 12px;
	background-repeat: no-repeat;
	background-image: url('../_images/disc-sm.png');
}

.ol-type-1 {
/*	list-style-position: inside;*/
	margin-left: 40px;
	margin-right: 40px;
	padding-left: 20px;
}
.ol-type-1 li {
	text-indent: 0px;
}
/* ----------------------- JUSTIFICATION ----------------------- */  
.text-align-center p {
	text-align: center;
}

.text-align-left p {
	text-align: left;
  }

.align-items-start {
	align-items: start;
}

/* ----------------------- MARGINS/PADDING ----------------------- */  
p.margin-top-0 {
	margin-top: 0px;
}
.margin-top-20 {
	margin-top: 20px;
}
.padding-top-0 {
	padding-top: 0px;
}
.padding-top-20 {
	padding-top: 20px;
}
.padding-bottom-20 {
	padding-bottom: 20px;
}

.character-padding-pt4em {
	padding-right: 0.4em;
	padding-left: 0.4em;
}

/* ----------------------- MISC TEST STYLES ----------------------- */  
.call-out p {
	font-family: 'Raleway', sans-serif; 
    font-optical-sizing: auto;
	font-size: 1.25rem;
	line-height: 1.5rem;
    font-weight: 500;
	font-style:italic; 
}

.italic {
	font-style:italic; 
}

p.italic {
	font-style:italic; 
}

p.bold {
	font-weight: 600;
}

p.intro {
	font-family: 'Raleway', sans-serif; 
    font-optical-sizing: auto;
	font-size: 1.25rem;
	line-height: 1.5rem;
    font-weight: 500;
	font-style:normal; 
}

p.center {
	text-align:center;
}

.superscript {  
    vertical-align: super; /* text-top; */
	font-size: 0.6em;
}

.superscript-type-2 {
	position: relative; 
	top: -1.2rem; 
	font-size: 0.6em; /* 80% */
/*	vertical-align: super;*/
}

.superscript-type-3 {
	position: relative; 
	top: -0.6rem; 
	font-size: 0.6em; /* 80% */
/*	vertical-align: super;*/
} 
 
.superscript-type-4 {
	position: relative; 
	top: -0.6rem; 
	font-size: 0.4em; /* 80% */
	letter-spacing:0.1rem;
}  

/* Raleway TM mark on Visions of Illumination in footer */
.superscript-type-5 {
	position: relative; 
	top: -0.6rem; 
	font-size: 0.4em; /* 80% */
	letter-spacing:0.1rem;
	
	font-family: 'Raleway', sans-serif; 
    font-optical-sizing: auto;
	font-size: 1.0rem;
	line-height: 1.5rem;
    font-weight: 400;
	font-style:normal; 
}  

/* ----------------------- FIGURES ----------------------- */
figure {
	width:100%;
}

/* How to center an image: https://www.w3schools.com/howto/howto_css_image_center.asp */
figure img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
figcaption p {
  text-align: center;	
}

.figure-title-heading {
	font-family: 'Raleway', sans-serif; 
    font-optical-sizing: auto;
	font-size: 1.25rem;
    font-weight: 500;
	font-style:normal;
}
/* ----------------------- ID'd ELEMENTS ----------------------- */
#welcome {
	align-items: flex-start;
}

#image-headshot {
	width:100%;
	max-width: 460px;
	margin-top: 20px;
	order: 2;
	clip-path: circle();
}

#text-welcome {
	order: 1;
}
/* ----------------------- BUTTONS ----------------------- */
.button:link, .button:visited {
	display:block;
    /*width:100%;*/
	max-width: 200px;	
    height:auto;
    border:none;
	border-radius: 8px;
	font-size: 1.0rem;
	text-align:center;
	text-decoration: none; 
	color:#FFF; /* text label color */
	background-color:#0086B3;  /* #407C8E; #006080* 0086b3 */
	background-size: contain;
	background-position: center center;
	background-repeat:no-repeat;
	overflow:hidden;
/*    text-indent:-9999px;  *//* hide default text by offsetting beyond button boundaries */
	opacity: 1.0;
	margin:auto;
	padding:8px;
    cursor:pointer;
  }

.button:hover, .button:focus {
	color:#FFF; /* text label color */
	background-color:#0099cc;  /* #0099cc #00ace6 */
	background-size: contain;
	background-position: center center;
	background-repeat:no-repeat;
    overflow:hidden;
    }

.button:active {
	color:#FFF; /* text label color */
	background-color:#00BFFF;
	background-size: contain;
	background-position: center center;
	background-repeat:no-repeat;
    overflow:hidden;
  }

.button.button-inside-pulldown-menu:link, .button.button-inside-pulldown-menu:visited {
	color:#FFF; 
	font-size:1.25rem;
	margin-top: 12px;
  }
  
.button.button-inside-pulldown-menu:hover, .button.button-inside-pulldown-menu:focus {
	background-color:#0099cc;
  }

.button.button-inside-pulldown-menu:active {
	background-color:#00BFFF;
  }
  
.button.button-white-border:link, .button.button-white-border:visited, 
.button.button-white-border:hover, .button.button-white-border:focus,
.button.button-white-border:active  {
	border:#FFF solid 4px;
	color:#FFF;
  }


.button.button-large:link, .button.button-large:visited, 
.button.button-large:hover, .button.button-large:focus,
.button.button-large:active  {
	font-size: 1.0rem; 
	width:auto;
	max-width: none;
    margin:4px; 	/* margin-top:4px; */
	padding:14px;
  }
  
.button.button-large.dark:link, .button.button-large.dark:visited {
	background-color:#006080;
}

.button.button-large.dark:hover, .button.button-large.dark:focus {
	background-color:#007399;
}  

.button.button-large.dark:active {
	color:#00AEEF; /* text label color */
	background-color:#FFF;
}
/* ------------------------------------------------------------------ */
  
  
  
  
/* -------------------------------------------------------------------- */  
/* ----------------------- NAVIGATION AND MENUS ----------------------- */
/* -------------------------------------------------------------------- */ 

/* ----------------------- NAVIGATION HEADER ----------------------- */
.nav-header {
	display: flex;
    position: relative;  /* static;  */
    justify-content: space-between; /*  center; */
    align-items: center;
	width: 100%;
    height: 120px;	
	padding: 10px 100px 10px 100px;
	background-color: #FFFFFF;
}

.nav-header p {
	font-size: 1.1em;
    font-family: 'Raleway', sans-serif;
	font-optical-sizing: auto;
    font-style:normal;
    font-weight:400;
}

.nav-header a:link, .nav-header a:visited {
	color:#000;
    text-decoration: none;
}
.nav-header a:hover {  /* Removed .nav-header a:focus to solve problem of items staying colored after BACK button is clicked */
	color:#09C; /* text label color */
/*	background-color:#0099cc;*/  /* #0099cc #00ace6 */
	background-size: contain;
	background-position: center center;
	background-repeat:no-repeat;
    overflow:hidden;
    }
.nav-header a:active {
	color:#00BFFF;  /* text label color */
/*	background-color:#00BFFF;*/
	background-size: contain;
	background-position: center center;
	background-repeat:no-repeat;
    overflow:hidden;
  }

.nav-header figure {
	width: 220px;
	/*height: 120px;*/
}

.nav-header img {
	width: 220px;
   /* height: 100%;*/
}

/* menu items: text along top menu bar --------------------------- */
.nav-items-desktop {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}




/* ----------------------- DROP-DOWN MENU ----------------------- */
/* Hide the links inside the menu (except for logo/home) */
.menu-dropdown  { /* > #dropdown-links */
	/* display: none; */ /* hide drop-down menu until icon is clicked */
	
	/* overflow: hidden; */
  
  /* SUCCESS ...changed from relative to absolute ... makes drop-down menu overlap text */
  /* PROBLEM ... menu items are transparent */
  /* absolute: positions properly and overlaps ... but, transparent */
  /* relative: positions properly              ... but, displaces text */

    display: none;  /* flex; */  /* set initially to 'none' to avoid displaying upon browser refresh */ 
    flex-direction: column;
  
  /* SOLUTION ... STYLE THE INDIVIDUAL <LI> ELEMENTS TO SPECIFY A BACKGROUND COLOR AND WIDTH */
  
  /* position the drop-down menu on the right side of the menu bar, */
  /* below the hamburger icon area */
    position: absolute;
    top:100%;   /* aligns top of drop-down menu with bottom of parent (menu-bar) */
    right: 0px;

    z-index: 2;  /* needed to bring menu items forward | Use 2 to bring it in front of the call to action "BUY ART" label */
  
  /* to make drop-down menu a specific width, ... */ 
  /* ... delete this width ... */ 
  /* ... and set the width in the links (#dropdown-links a) */
    width: 100%;
	
  /* extend height of drop-down menu to full screen height */
	height: 100vh;
	background-color: #FFF;
}

/* THIS IS REQUIRED TO ELIMINATE THE TRANSPARENCY PROBLEM */
.dropdown-links li {
  /* background-color IS REQUIRED TO ELIMINATE THE TRANSPARENCY PROBLEM */
  background-color: #FFF; 
  list-style: none;
  text-align: center; /* aligns items horizontally */
}

/* Style navigation menu links */
.dropdown-links a {
  font-size: 1.25rem;
  color: #000;
  padding: 12px 20px;
  text-decoration: none;
  display: block;
  z-index: 1;
}

.dropdown-links a:hover {
  /* Add a grey background color on mouse-over */
/*  background-color: #FFF;*/
  color: #09C;
  /* add  line inside bottom of gray bar */
/*  box-shadow: inset 0px -4px 0px 0px #FC0; */
/*  transition: 0.2s;*/
}

/* NOTE: Removed .nav-header a:focus to solve problem of items staying colored after BACK button is clicked */
/* give keyboard navigation the same hover experience as using a mouse. */
.XXX_dropdown-links a:focus {
  /* Add a grey background color on mouse-over */
  background-color: #666;
  color: #FFF;
  /* add  line inside bottom of gray bar */
  box-shadow: inset 0px -4px 0px 0px #FC0; 
  transition: 0.2s;
}

/* Style the active link (or home/logo) */
.dropdown-links a:active {
  background-color: #FFF;
  color: #00BFFF;
}

/* ----------------------- DROP-DOWN MENU ICON  --------------------- */
/* ----------------------- ANIMATED HAMBURGER ----------------------- */

/* menu-icon background area */
.menu-icon {
  display: flex;
  position:absolute; /* TEST ... trying to get dropdown under the hamburger menu icon */
  top: 0%;
  right: 0%;
  justify-content: center;  /* aligns items horizontally */
  align-items: center;      /* aligns items vertically   */
  
  cursor: pointer;
  width: 80px;  
  height: 100%; 
  background-color: #FFF;
}

.menu-icon:hover {
  /* background-color: #999; */ /*  medium gray */
  background-color: #FFF;
  transition: 0.2s;
}

/* change background-color when clicked ... */      /* THIS DOESN'T WORK */
/* hold that way until clicked again */                
.change .menu-icon {
  background-color: #999;
}

/* container for hamburger menu icon */
/* attributes in parent center this both horizontally and vertically */
.Xbar-container {
/*  width: 28px;*/
/*  height: 28px;*/
}
/* change color of bars when parent (bar-container) is hovered */
.bar-container:hover .bar {
  background-color: #09C;
}

/* hamburger icon is made up of four bars,                     */
/* with the center one made from two overlapping bars ...      */
/* ... bar mid-a and mid-b overlap to appear as a single bar   */
/* until the icon is clicked, then they both appear as an "X". */
.bar {
  width: 28px;
  height: 2px;
  background-color: #000; /* color of bars */
}

.bar-top {
  transition: 0.2s;
}

.bar-mid-a {
  margin-top: 11px;
  transition: 0.4s;
}

.bar-mid-b {
  margin-top: -2px;
  transition: 0.4s;
}

.bar-bottom {
  margin-top: 11px;
  transition: 0.2s;
}

.change .bar-top {
  opacity: 0.0;
  -webkit-transform: translate(0px, 10px);
  transform: translate(0px, 10px);
}

.change .bar-mid-a {
  -webkit-transform: rotate(45deg) translate(0px, 0px);
  transform: rotate(45deg) translate(0px, 0px);
}

.change .bar-mid-b {
  -webkit-transform: rotate(-45deg) translate(0px, 0px);
  transform: rotate(-45deg) translate(0px, 0px);
}

.change .bar-bottom {
  opacity: 0;
  -webkit-transform: translate(0px, -10px);
  transform: translate(0px, -10px);
}
/* -------------------------------------------------------------------- */ 




  
  
  
  
  
/* -------------------------------------------------------------------- */ 
/* ------------------------ BREAK POINT SYTLES ------------------------ */
/* -------------------------------------------------------------------- */ 
/*
https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/
    320px—480px: Mobile devices
    481px—768px: iPads, Tablets
    769px—1024px: Small screens, laptops
    1025px—1200px: Desktops, large screens
    1201px and more — Extra large screens, TV
*/

/* ------------------------ NARROW SCREENS ------------------------ */
@media only screen and (min-width: 0px) and (max-width: 600px) {
  body {
    font-size: 15px;
	line-height: 1.3em;
  }
  .flex-container-row {
	flex-wrap: wrap;
  }
  .section {
    /*padding-top: 30px;*/
	padding: 10px 0px 10px 0px;
  }
  .section-narrow {
    width: 100%;
	/*padding-top: 30px;*/
	padding: 30px 0px 10px 0px;
  }
  .section-very-narrow {
    width: 100%;
	padding:10px 40px 10px 40px;
  }
  .subsection-text-heading {
	font-size: 1.35rem;
	line-height: 1.75rem;
  }
  .section p {
	margin: 10px 20px 20px 20px;	
}
  .call-out p {
	font-size: 1.2rem;
	line-height: 1.35rem;
  }
  p.intro {
	font-size: 1.2rem;
	line-height: 1.35rem;
  }
  .padding-top-0 {
	padding-top: 0px;
  }
  .subsection-image {
    width: 50%;
  }
  figure img {
    width: 80%;
  }
  
  /* Used for the 'Work With Me' row of items on the home page */
  .grid {
	display: flex;
	flex-wrap: no-wrap;
	flex-direction: column;
	justify-content: center;
 /*   align-items: center; */
    padding-top: 10px;
	margin: auto;
    width: 80%;
  }
  .grid-item {
	margin-bottom: 30px;
  }
  .grid-item:last-of-type {
	margin-bottom: 0px;
  }
  .grid-item p {
	margin: 0px 20px 20px 20px  
  }
  .grid-item figure img {
	width: 50%;
	margin-bottom: 20px;
  }
   
  /* ---------- ORDER ---------- */
  #image-headshot {
	width:100%;
	margin-top: 0px;
    max-width: 500px;
	order: 1;
  }
  #image-headshot img {
	  width: 70%;
  }
  #text-welcome {
	order: 2;
  }
  
  #image-partner {
    order: 1;
  }
  #text-partner {
	order: 2;
  }
  
  #image-your-story {
    order: 1;
  }
  #text-your-story {
	order: 2;
  }
  
  .order {order: 2;}
}

@media only screen and (min-width: 600px) and (max-width: 1000px) {
  .flex-container-row {
	flex-wrap: wrap;
  }
  .section {
    /*padding-top: 30px;*/
	padding: 30px 30px 10px 30px;
  }
  .padding-top-0 {
	padding-top: 0px;
  }
  .section-narrow {
    width: 100%;
	/*padding-top: 30px;*/
	padding: 30px 20px 10px 20px;
  }
  .section-very-narrow {
    width: 100%;
	padding:10px 140px 10px 140px;
  }
  figure img {
    width: 70%;
  }
  
  /* Used for the 'Work With Me' row of items on the home page */
  .grid {
	display: flex;
	flex-wrap: no-wrap;
	flex-direction: column;
	justify-content: center;
/*    align-items: center; */
    padding-top: 10px;
	margin: auto;
    width: 80%;
  }
  .grid-item {
	margin-bottom: 30px;
  }
  .grid-item:last-of-type {
	margin-bottom: 0px;
  }
  .grid-item p {
	margin: 0px 20px 20px 20px;
  }
  .grid-item figure img {
	width: 36.34%;
	margin-bottom: 20px;
  }
/*  .grid-item p.button:link, .button:visited {
	width: 80%;
  }*/
  
  /* ---------- ORDER ---------- */
  #image-headshot {
	width:100%;
	margin-top: 0px;
    max-width: 500px;
	order: 1;
  }
  #text-welcome {
	order: 2;
  }
  
  #image-partner {
    order: 1;
  }
  #text-partner {
	order: 2;
  }
  
  #image-your-story {
    order: 1;
  }
  #text-your-story {
	order: 2;
  }
  
  .order {order: 2;}
}

/* ------------------------ DESKTOP / LAPTOP SCREENS ------------------------ */
@media only screen and (min-width: 1000px) {
  .flex-container-row {
	flex-wrap: nowrap;
  }
  .section {
   /* padding-top:10px;*/
	padding:10px 50px 10px 50px;
  }
  .section-narrow {
    width: 100%;
	padding-top:10px;
  }
  .padding-top-0 {
	padding-top: 0px;
  }
/*  .section-very-narrow {
    width: 100%;
	padding:10px 240px 10px 240px;
  }*/
  figure img {
    width: 80%;
  }
  
  .grid-item figure img {
	width: 60.67%;
  }
  
  #image-headshot {
	width:100%;
	max-width: 460px;
	order: 2;
  }
  #text-welcome {
	order: 1;
  }
  
  #image-partner {
    order: 1;
  }
  #text-partner {
	order: 2;
  }
  
  #image-your-story {
    order: 2;
  }
  #text-your-story {
	order: 1;
  }
}

/* ----------------------- SECTION TITLE IMAGE ----------------------- */
@media only screen and (min-width: 0px) and (max-width: 380px) {
  .section-title-image {
	height: 120px;
	background-size: 550px;
  }
  .section-title-image p {
	font-size: 24px;
	padding-left: 20px;
	padding-right: 20px;
  }
}

@media only screen and (min-width: 380px) and (max-width: 680px) {
  .section-title-image {
	height: 120px;
	background-size: 600px;
  }
  .section-title-image p {
	font-size: 28px;
  }
}

@media only screen and (min-width: 680px) and (max-width: 800px) {
  .section-title-image {
	height: 140px;
	background-size: 700px;
  }
  .section-title-image p {
	font-size: 30px;
  }
}

/* -------------------- MAIN NAVIGATION MENU  ------------------- */
@media only screen and (min-width: 0px) and (max-width: 380px) {
  .nav-header {
	justify-content: left;  
	padding: 10px 20px 10px 20px;
	height: 80px;
  }
  .nav-header figure {
	width: 160px;
  }

  .nav-header img {
	width: 160px;
  }
  .nav-items-desktop {
    display: none;
  }
  .menu-icon {
    display: flex;
  }
  .menu-dropdown {
	display: none;
  }

}

@media only screen and (min-width: 380px) and (max-width: 680px) {
  .nav-header {
	justify-content: left;  
	padding: 10px 30px 10px 30px;
  }
  .nav-items-desktop {
    display: none;
  }
  .menu-icon {
    display: flex;
  }
  .menu-dropdown {
	display: none;
  }
}
  
@media only screen and (min-width: 680px) and (max-width: 1179px) {
  .nav-header {
	justify-content: left; 
	padding: 10px 30px 10px 30px; 
  }
  .nav-items-desktop {
    display: none;
  }
  .menu-icon {
    display: flex;
  }
  .menu-dropdown {
	display: none;
  }

}

@media only screen and (min-width: 1180px) {
  .nav-header {
	justify-content: space-between;  
  }
  .nav-items-desktop {
    display: flex;
  }
  .menu-icon {
    display: none;
  }
  .menu-dropdown {
	display: none;
  }
}



/* -------------------- MAIN NAVIGATION MENU  ------------------- */
@media only screen and (min-width: 0px) and (max-width: 599px) {
  .nav-footer-row {
    display: none;
  }
}

	
@media only screen and (min-width: 600px) {
  .nav-footer-column {
	display: none;
  }
}





/* ------------------------ BANNER  ------------------------ */
@media only screen and (min-width: 0px) and (max-width: 380px) {
  .banner {
	padding-top: 10px;
	padding-bottom: 30px;
  }
  .banner .wordmark-storyteller {
	font-size: 2.4rem; 
	line-height: 2.4rem;
/*	width: 80%;*/
    margin-bottom: 0px;
	margin-right: 50px;
	margin-left: 50px;
  }	
  .banner .subtitle {
    font-size: 1.05rem;
	line-height: 1.5rem;
	width: 300px;
	margin-top: 10px;
    margin-bottom: 5px;
  }
}

@media only screen and (min-width: 380px) and (max-width: 800px) {
  .banner {
	padding-top: 20px;
	padding-bottom: 30px;
  }
  .banner .wordmark-storyteller {
	font-size: 3.0rem; 
	line-height: 3.0rem;
	width: 400px;
    margin-bottom: 0px;
  }	
  .banner .subtitle {
    font-size: 1.05rem;
	line-height: 1.5rem;
	width: 300px;
	margin-top: 10px;
    margin-bottom: 5px;
  }
}

@media only screen and (min-width: 800px) and (max-width: 900px) {
  .banner {
	padding-top: 30px;
	padding-bottom: 30px;
  }
  .banner .wordmark-storyteller {
	font-size: 3.0rem; 
    margin-bottom: 0px;
  }	
  .banner .subtitle {
    font-size: 1.05rem;
    margin-bottom: 5px;
  }
}

@media only screen and (min-width: 900px) and (max-width: 1015px) {
  .banner {
	padding-top: 30px;
	padding-bottom: 30px;
  }
  .banner .wordmark-storyteller {
	font-size: 3.5rem; 
    margin-bottom: 5px;
  }	
  .banner .subtitle {
    font-size: 1.2rem;
    margin-bottom: 5px;
  }
}

@media only screen and (min-width: 1015px) and (max-width: 1120px) {
  .banner {
	padding-top: 40px;
	padding-bottom: 30px;
  }
  .banner .wordmark-storyteller {
	font-size: 4.0rem; 
    margin-bottom: 10px;
  }	
  .banner .subtitle {
    font-size: 1.35rem;
    margin-bottom: 10px;
  }
}

@media only screen and (min-width: 1120px) {
  .banner {
	padding-top: 50px;
	padding-bottom: 40px;
  }
  .banner .wordmark-storyteller {
	font-size: 4.5rem; 
  }
  .banner .subtitle {
    font-size: 1.5rem;
  }
}