@charset "UTF-8";
/* CSS Document */


/*1.  COLORS, LINE 7   */
/*2.  FONTS, LINE XX   */
/*3.  BASIC SETTINGS, TEXT AND HEADINGS  */
/*4.  LAYOUT ON GRID - ONE COLUMN - MOBILE FRIENDLY  */
/*5.  LAYOUT ON GRID - LARGER SCREENS */
/*6.  DETAIL SETTINGS FOR EACH ITEM, NOTATED BY NAME */



/* COLORS --------------------------------------------

Body background: #E6E6E6;  GRAY
Body text color: #333333;  Dark Gray
Barbara's Orange color: #BE521E;  Orange

purple color: #5B1A39;
green color: #58672E;
magenta color: #6f0476;

------------------------------------------------------*/



/* FONTS ---------------------------------------------


Classico URW Regular

font-family: classico-urw, sans-serif;
font-weight: 400;
font-style: normal;

Classico URW Medium

font-family: classico-urw, sans-serif;
font-weight: 500;
font-style: normal;

Classico URW Bold

font-family: classico-urw, sans-serif;
font-weight: 700;
font-style: normal;

Classico URW Black

font-family: classico-urw, sans-serif;
font-weight: 900;
font-style: normal;

Classico URW Regular Italic

font-family: classico-urw, sans-serif;
font-weight: 400;
font-style: italic;

Classico URW Medium Italic

font-family: classico-urw, sans-serif;
font-weight: 500;
font-style: italic;

Classico URW Bold Italic

font-family: classico-urw, sans-serif;
font-weight: 700;
font-style: italic;

Classico URW Condensed T Regular

font-family: classico-urw-condensed, sans-serif;
font-weight: 400;
font-style: normal;


------------------------------------------------------*/



/*-------------------- BASIC SETTINGS -------------------------*/

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

html, body {
  height: 100%;
  margin: 0px;
}

html {
  scroll-behavior: smooth;
}


body {
	font-family: classico-urw, sans-serif;
	color: #666666;
	background-color: #E6E6E6;
	font-size: 16px;
	height: 100%;
}





/*-----------------------Text and Headings ----------------------*/
p {
	font-size: 1em; /*13px */
	color: #333;
	line-height: 140%;
}

em {
	font-family: classico-urw, sans-serif;
	font-style: italic;
}
	
img {
	width: 100%;
	height: auto;
}

h1 {
	font-weight: normal;
	font-size: 1.6em;
	letter-spacing: .5px;
	text-transform: none;
}


h2 {
	font-size: 1em; /*16px*/
	color: #BE521E;
	text-transform: uppercase;
	font-weight: normal;
	text-decoration:none;
}


h3 {
	font-size: .813em; /*13px*/
	color: #333;
	text-transform: uppercase;
	font-weight: normal;
}

h4 {
	font-size: .813em; /*13px*/
	color: #BE521E;
	text-transform: uppercase;
	font-weight: normal;
	text-decoration: none;
}

h5 {
	font-size: .813em; /*13px*/
	color: #333;
	font-weight: bold;
}

h6 {
	font-size: .625em; /*10px*/
	color: #666;
	font-weight: normal;
}

.orange_p_text {
	color: #BE521E;
}

.purple_p_text {
	color: #5B1A39;
}

.green_p_text {
	color: #58672E;
}

.magenta_p_text {
	color: #6f0476;
}

a:link {
	color: dodgerblue;
	text-decoration: none;
}

a:visited {
	color: dodgerblue;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
	color: #BE521E;
}

a:focus {
	text-decoration: underline;
	color: #BE521E;
}

a:active {

}

.sitetitle a:link {
	color: #666666;
	text-decoration: none;
}

.sitetitle a:visited {
	color: #666666;
	text-decoration: none;
}

.sitetitle a:hover {
	text-decoration: none;
	color: #BE521E;
}

.sitetitle a:focus {
	text-decoration: underline;
	color: #BE521E;
}


h2 a:link {
	color: #BE521E;
	text-decoration: none;
}

h2 a:visited {
	color: #808080;
	text-decoration: none;
}

h2 a:hover {
	text-decoration: underline;
	color: #BE521E;
}

h2 a:focus {
	text-decoration: underline;
	color: #BE521E;
}

h2 a:active {

}


p a:link {
	color: dodgerblue;
	text-decoration: underline;
}

p a:visited {
	color: dodgerblue;
	text-decoration: none;
}

p a:hover {
	text-decoration: underline;
	color: #BE521E;
}

p a:focus {
	text-decoration: underline;
	color: #BE521E;
}

p a:active {

}

.quote {
	font-size: 1.3em;
	color: #BE521E;
	text-transform: none;
	font-weight: normal;
	text-decoration:none; 
	font-style: italic;
}

/*--------------------------------------------------------------------------THIS STARTS THE LAYOUT OF THE PAGE ON GRID--------*/
/*--------------------------------------------------------------------------DETAILS TO THE SECTION ARE BELOW--------*/


/*---------------------------------------------------------- ONE COLUMN STRUCTURE --/ BELOW 950PX WIDE*/
.container {
	margin: 0px auto;
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-rows: auto;
	grid-auto-flow: row;
	background-color: white;
}

.shadowbox {
	visibility: hidden;
}

.mainmenu {   	
	grid-column: 1 / -1;
	z-index: 10;
}

.sitetitle {
	grid-row: 1 / 2;
	height: auto;
	z-index: 10;
	text-align: center;
	padding-top: 2em;
}

.header_bar {
	z-index: 10;
	border-bottom: 28px solid #BE521E;
	align-self: center;
}

.header_bar_purple {
	z-index: 10;
	border-bottom: 28px solid #5B1A39;
	align-self: center;
}

.header_bar_green {
	z-index: 10;
	border-bottom: 28px solid #58672E;
	align-self: center;
}

.header_bar_magenta {
	z-index: 10;
	border-bottom: 28px solid #6f0476;
	align-self: center;
}


.subnav {
}

.banner_image {
}

.arrow_line {
}

.index-content-area {
}

.content-area {
}

.content-area-landingpage {
}

.content-onecolumn {
}

.page-title{
}


footer {
}

/*---------------------------------------------------------- END ONE COLUMN STRUCTURE --/ BELOW 950PX WIDE*/




/*--  HOLDING CONTAINER AND SHADOWBOX--------------------------------------------------------------*/


@media (min-width: 768px){
	.sitetitle { 
		text-align: center;
		padding-right: 1em;
	}
	
}


@media (min-width: 980px) {
	
	.container {
		margin: 0px auto;
		width: 100%;
		display: grid;
		grid-template-columns: repeat(8, 1fr);
	}
	
	.mainmenu {   	
		grid-row: 1 / 2;
		grid-column: 3 / 10;
		z-index: 10;
		display: grid;
		align-items: end;
		padding-bottom: 1em;
		height: 9.6em;
	}
	
	.subnav {
		grid-row: 3 / 4;
		grid-column: 3 / 10;
		z-index: 10;
		display: grid;
	}

	.sitetitle { 
		grid-column: 1/3;
		grid-row: 2/3;
		height: auto;
		z-index: 10;
		text-align: right;
		padding-right: 1em;
		padding-top: 0;
	}
	
	.header_bar {
		grid-row: 2 / span 1;
		grid-column: 3 / span 6;
		z-index: 10;
		border-bottom: 38px solid #BE521E;
		align-self: flex-end;
	}
	
	.header_bar_purple {
		grid-row: 2 / span 1;
		grid-column: 3 / span 6;
		z-index: 10;
		border-bottom: 38px solid #5B1A39;
		align-self: flex-end;
	}
	
	.header_bar_green {
		grid-row: 2 / span 1;
		grid-column: 3 / span 6;
		z-index: 10;
		border-bottom: 38px solid #58672E;
		align-self: flex-end;
	}
	
	.header_bar_magenta {
		grid-row: 2 / span 1;
		grid-column: 3 / span 6;
		z-index: 10;
		border-bottom: 38px solid #6f0476;
		align-self: flex-end;
	}
	
	
	.banner_image {
		grid-row: 3 / span 1;
		grid-column: 1 / -1;	
		z-index: 10;
	}

	.arrow_line {
		grid-row: 4 / span 1;
		grid-column: 1 / -1;
		z-index: 10;
		margin: 2em 5em;
	}
	
	.index-content-area {
		grid-row: 5 / span 1;
		grid-column: 1 / -1;
		z-index: 10;
	}
	
	.content-area {
		grid-row: 5 / span 1;
		grid-column: 1 / -1;
		z-index: 10;
	}
	
	.content-area-landingpage {
		grid-row: 5 / span 1;
		grid-column: 1 / -1;
		z-index: 10;
	}
	
	.content-onecolumn {
		grid-row: 5 / span 1;
		grid-column: 1 / -1;
		z-index: 10;
	}

	.page-title{
		grid-row: 4 / 5;
		grid-column: 3 / -1;
		z-index: 10;
	}

	footer {
		grid-column: 1 / -1;
		z-index: 10;
		text-align: center;
		padding: 2em 1em;
	}

}



@media (min-width: 1268px){
	.shadowbox {
		visibility: visible;
		grid-row: 1 / 12;
		grid-column: 2 / 10;
		z-index: 0;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		background-color: #FFFFFF;
	}
	
	.container {
		background-color: #E6E6E6;
	}
	
	.container {
		margin: 0px auto;
		width: 100%;
		display: grid;
		grid-template-columns: repeat(10, 1fr);
	}

	
	.mainmenu {   	
		grid-row: 1 / 2;
		grid-column: 4 / 10;
		z-index: 10;
		display: grid;
		align-items: end;
		padding-bottom: 1em;
		height: 9.6em;
	}
	
	.subnav {
		grid-row: 3 / 4;
		grid-column: 4 / 10;
		z-index: 10;
		display: grid;
	}

	.sitetitle { 
		grid-column: 2/4;
		grid-row: 2/3;
		height: auto;
		z-index: 10;
		text-align: right;
		padding-right: 1em;
		padding-top: 0;
	}
	
	.header_bar {
		grid-row: 2 / span 1;
		grid-column: 4 / span 6;
		z-index: 10;
		border-bottom: 38px solid #BE521E;
		align-self: flex-end;
	}
	
	.header_bar_purple {
		grid-row: 2 / span 1;
		grid-column: 4 / span 6;
		z-index: 10;
		border-bottom: 38px solid #5B1A39;
		align-self: flex-end;
	}
	
	.header_bar_green {
		grid-row: 2 / span 1;
		grid-column: 4 / span 6;
		z-index: 10;
		border-bottom: 38px solid #58672E;
		align-self: flex-end;
	}
	
	.header_bar_magenta {
		grid-row: 2 / span 1;
		grid-column: 4 / span 6;
		z-index: 10;
		border-bottom: 38px solid #6f0476;
		align-self: flex-end;
	}
	
	.banner_image {
		grid-row: 3 / span 1;
		grid-column: 2 / -2;	
		z-index: 10;
	}

	.arrow_line {
		grid-row: 4 / span 1;
		grid-column: 2 / -2;
		z-index: 10;
		margin: 2em 5em;
	}
	
	.content-area {
		grid-row: 5 / span 1;
		grid-column: 2 / -2;
		z-index: 10;
	}
	
	.index-content-area {
		grid-row: 5 / span 1;
		grid-column: 1 / -1;
		z-index: 10;
	}
	
	.content-area-landingpage {
		grid-row: 5 / span 1;
		grid-column: 2 / -2;
		z-index: 10;
	}
	
	.content-onecolumn {
		grid-row: 5 / span 1;
		grid-column: 2 / -2;
		z-index: 10;
	}
	
	.page-title {
		grid-row: 4 / 5;
		grid-column: 4 / -2;
		z-index: 10;
	}

	footer {
		grid-column: 2 / -2;
		z-index: 10;
		text-align: center;
		padding: 2em 1em;
	}
	
}

/*--  END HOLDING CONTAINER AND SHADOWBOX--------------------------------------------------------------*/




/*-- MAIN MENU -------------------------------------------------------------------------*/

.mainmenu {
}

.mainmenu ul {
	display: flex; 
	flex-direction: column;
	flex-wrap: wrap;
	list-style-type: none;
	justify-content: space-between;
 }

.mainmenu ul {
	font-family: classico-urw, sans-serif;
	font-weight: 400;
	font-style: normal;
	text-transform: uppercase;
	font-size: .84em;
	padding: .5em 2em;
}

.mainmenu ul li {
	margin: 5px 0;
	border-bottom: 1px solid #BE521E;
}

.mainmenu ul li:nth-last-child(2) { 
	border-bottom: none;
}

.mainmenu ul li:nth-last-child(8) {  
	border-top: 1px solid #BE521E;
}


.mainmenu ul li a {
	text-decoration: none;
	color: #666666;
	font-weight: 400;
	font-style: normal;
	display: block;
	padding: 10px 5px;
}

.mainmenu ul li a:hover {
	color: #BE521E;
}

.mainmenu ul li a:focus {
	color: #BE521E;
}

.mainsubtext {
	visibility: visible;
	font-size: 12px;
	line-height: 15px;
	text-transform: none;
}

.toggle {
    order: 1;
    font-size: 18px;
	padding: 10px;
	text-align: center;
}

.item.button {
    order: 2;
}

.logo {
}

.item {
    order: 3;
    width: 100%;
    text-align: center;
    display: none;
}

.active .item {
    display: block;
}



@media (min-width: 768px){
	
	.mainmenu {
		padding-bottom: 1em;
		padding-top: 1em;
		height: 9.6em;
	}
	
	.mainmenu ul {
		display: flex; 
		flex-direction: row;
		flex-wrap: wrap;
		list-style-type: none;
		justify-content: space-around;
		align-items: stretch;
	 }


	.mainmenu ul {
		font-family: classico-urw, sans-serif;
		font-weight: 400;
		font-style: normal;
		text-transform: uppercase;
		font-size: .84em;
		padding: 1em 0;
	}

	.mainmenu ul li {
		margin: 0 2px;
		border-bottom: none;
	}
	
	
	.mainmenu ul li:nth-last-child(8) {  
		border-top: none;
	}

	.mainmenu ul li a {
		text-decoration: none;
		color: #666666;
		font-weight: 400;
		font-style: normal;
		display: block;
	}

	.mainmenu ul li a:hover {
		color: #BE521E;
	}

	.mainmenu ul li a:focus {
		color: #BE521E;
	}

	.mainsubtext {
		visibility: visible;
		font-size: 12px;
		line-height: 15px;
		text-transform: none;	
	}
	
	.logo {
	}
		
    .item {
        order: 1;
        position: relative;
        display: block;
        width: auto;
		text-align: left;
    }

    .button {
        order: 2;
    }

	 .toggle {
        display: none;
    }	
	
}

/*-- END MAIN MENU -------------------------------------------------------------------------*/




/*-- HEADER AREA - SITE NAME: BARBARA NERI & ORANGE BAR -----------------------------------*/

.sitetitle {
	font-weight: normal;
	font-size: 1.8em;
	letter-spacing: .5px;
	text-transform: uppercase;
}

/*-- END HEADER AREA - SITE NAME: BARBARA NERI & ORANGE BAR -----------------------------------*/



/*-- SUBNAV --------------------------------------------------------------------------------*/

.subnav ul{
	display: flex;
	list-style-type: circle;
	flex-direction: column;
	flex-wrap: wrap;
	background-color: #F4F4ED;
	padding: 1em;
	align-content: baseline;
	justify-content: end;
}


.subnav ul li:first-child {
	list-style-type: none;
	color: #BE521E;
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.subnav ul li {
	margin: .5em 1em;
}


.subnav ul li a {
	text-decoration: none;
	color: #666666;
	font-weight: 400;
	font-style: normal;
	display: block;
}

.subnav ul li a:hover {
	color: #BE521E;
}

.subnav ul li a:focus {
	color: #BE521E;
}

.select {
	text-decoration: underline;
}


@media (min-width: 768px){
	.subnav ul{
		display: flex;
		list-style-type: circle;
		flex-direction: row;
		flex-wrap: wrap;
		background-color: #F4F4ED;
		padding: 1em;
		align-content: baseline;
		justify-content: flex-start;

	}


	.subnav ul li:first-child {
		list-style-type: none;
		color: #BE521E;
		font-size: 1em;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	.subnav ul li {
		margin: 0 1em;
	}


	.subnav ul li a {
		text-decoration: none;
		color: #666666;
		font-weight: 400;
		font-style: normal;
		display: block;
	}

	.subnav ul li a:hover {
		color: #BE521E;
	}

	.subnav ul li a:focus {
		color: #BE521E;
	}

	.select {
		text-decoration: underline;
	}
}

/*-- END SUBNAV --------------------------------------------------------------------------------*/




/*-- PAGE TITLE -----------------------------------------------------------------------------------------------*/

.page-title{
	padding: 2em;
	text-align: center;
}

@media (min-width: 768px) {
	.page-title{
		padding: 2em 2em;
		text-align: left;
	}
}

@media (min-width: 980px) {
	.page-title{
		padding: 2em 1.5em;
		text-align: left;
	}
}

/*-- END PAGE TITLE -----------------------------------------------------------------------------------------------*/





/*-- INDEX PAGE SETTINGS  -------------------------------------------------------------------------------*/
/*-- HOME PAGE BANNER IMAGE ----------------------------------------------------------------*/

.banner_image {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 1px;
	justify-self: center;
	align-self: center;
	margin-top: 2.5em;
	padding: 1em 1em;
}


.banner_image img {
	height: auto;
	width: 100%;
	object-fit: contain;
	object-position: center;
	margin: 0 1px;
}


@media (min-width: 560px) {	 /*@media (min-width: 768px) */
	.banner_image {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-gap: 1px;
		justify-self: center; 
		align-self: center;
		margin-top: 2.5em;
		padding: 2em 4em;
	}

	.banner_image img {
		height: auto;
		width: 100%;
		object-fit: contain;
		object-position: center;
		margin: 0 1px;
	}
}


.arrow_line {
	visibility: hidden;
	margin: 0;
}

@media (min-width: 768px) {
	.arrow_line {
		visibility: visible;
		margin: 1em 5em;
	}
}

hr.style-seven {
    overflow: visible; /* For IE */
    height: 30px;
    border-style: solid;
    border-color: #999999;
    border-width: 1px 0 0 0;
    border-radius: 20px;
}
hr.style-seven:before { /* Not really supposed to work, but does */
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: #999999;
    border-width: 0 0 1px 0;
    border-radius: 20px;
}


/*-- INDEX PAGE SINGLE COLUMN TEXT  --------------------*/
.index-content-area {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto;
	grid-auto-flow: row;
	grid-gap: 35px;
	padding: 1em 2em;
}


@media (min-width: 560px) {
	.index-content-area {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows:auto;
		grid-gap: 35px;
		padding: 1em 4em;	
		}	

	.main_text {
		grid-column: 2 / span 4;
	}
}


@media (min-width: 1268px) {
	.index-content-area {
		display: grid;
		grid-template-columns: repeat(8, 1fr);
		grid-template-rows:auto;
		grid-gap: 35px;
		padding: 1em 4em;	
		}	

	.main_text {
		grid-column: 3 / span 4;
	}
}

/*END INDEX PAGE ---------------------------------------------------------------------------------------------*/




/*-- CONTENT AREA - ONE COLUMN LAYOUT   --------------------------------------------------------------*/

.content-onecolumn {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto;
	grid-auto-flow: row;
	grid-gap: 35px;
	padding: 1em 2em;
}


.onecolumn-span-5 {
	min-width: 0; /*NEW*/
	min-height: 0; /*NEW*/
/*	overflow-x: hidden;
*/}

@media (min-width: 560px) {
	.content-onecolumn {
		display: grid;
		grid-template-columns: .5fr 1fr 1fr 1fr 1fr .5fr;
		grid-template-rows: auto;
		grid-gap: 35px;
		padding: 2em 4em;	
		}	
	
	
		.onecolumn-span-1 {
			grid-column: span 1;
		}
		.onecolumn-span-2 {
			grid-column: span 2;
		}
		.onecolumn-span-3 {
			grid-column: span 3;
		}
	
		.onecolumn-span-5 {
			grid-column: 2 / span 4;
		}
}

/*-- END CONTENT AREA - ONE COLUMN LAYOUT   --------------------------------------------------------------*/




/*-- CONTENT AREA - LEFT SIDEBAR AND MAIN COLUMN --------------------------------------------------------------*/

.content-area {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-gap: 35px;
	padding: 1em 2em;
}

.sidebar {
	text-align: left;
}

.content {
	min-width: 0; /* NEW */
	min-height: 0; /* NEW */
/*	overflow-x: hidden;
*/}


@media (min-width: 768px) {
	.content-area {
		display: grid;
		grid-template-columns: 1.8fr 6fr;
		grid-gap: 35px;
		padding: 1em 2em;
	}
	
	.sidebar {
		text-align: right;
	}
	
}

.sidebar h2, .sidebar h3, .sidebar h4, .sidebar h5, .sidebar h6 {
	/*max-width: 20ch;*/
}

.content {
}

.content p {
	max-width: 80ch;
}


/* -------------------CONTENT GRIDS FOR THE SIDEBAR AND CONTENT LAYOUT*/

/* 1. TWO COLUMN */

.two_col_subgrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-gap: 20px;
	padding: 1em 0;
	list-style-type: none;
}

.two_col_wide {
	grid-column: 1 / span 1;
}


@media (min-width: 768px) {
	.two_col_subgrid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr)); 
		grid-template-rows: auto;
		grid-gap: 15px;
		padding: 1em 0;	
		}	
	
	.two_col_wide {
		grid-column: 1 / span 2;
	}
	
}


/* 1. TWO COLUMN SUBGRID NON-COLLAPSING */


	.two_col_subgrid_stay {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr)); 
		grid-template-rows: auto;
		grid-gap: 15px;
		padding: 1em 0;	
		}	
	





/* 2. THREE COLUMN */
.three_col_subgrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-gap: 20px;
	padding: 1em 0;
}

.fixed_height img{
	height: 5em;
	width: auto;
}

.ebb_one {
	grid-row: 1 / span 1;
}

.ebb_two {
	grid-row: 2;
}

.ebb_three {
	grid-row: 3;
}

.ebb_four {
	grid-row: 4;
}

.subgrid_height img {
	height: 100%;
	object-fit: initial;
}

@media (min-width: 768px) {
	.three_col_subgrid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr)); 
		grid-template-rows: repeat(4, auto);
		grid-gap: 15px;
		padding: 1em 0;	
		}		
	
	.ebb_one {
		grid-column: 1 / span 3;
		grid-row: 1 / span 1;
	}
	
	.ebb_one p {
		max-width: 300ch;
	}

	.ebb_two {
		grid-column: 1 / span 1;
		grid-row: 2;
	}

	.ebb_three {
		grid-column: 2 / span 1 ;
		grid-row: 2;
	}

	.ebb_four {
		grid-column: 3 / span 1;
		grid-row: 2;
	}
	
	.subgrid_height img {
		height: 40vh;
		object-fit: cover;
	}
	
}

/* 1. FOUR COLUMN */

.four_col_subgrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-gap: 10px;
	padding: 1em 0;
	list-style-type: none;
}


.vis-art img {
	height: auto;
	width: 100%;
	object-fit: contain;
	object-position: center;
}



/*-- END CONTENT AREA - LEFT SIDEBAR AND MAIN COLUMN --------------------------------------------------------------*/





/*-- CONTENT AREA - // SECTION OVERVIEW PAGES (WORK ARCHIVE.CURRENT PROJECTS)  --------------------------------------------------------------*/

.content-area-landingpage {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto;
	grid-auto-flow: row;
	grid-gap: 35px;
	padding: 1em 2em;
	min-width: 0; /* NEW */
	min-height: 0; /* NEW */
}


@media (min-width: 560px) {
	.content-area-landingpage {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: repeat(4, auto);
		grid-gap: 35px;
		padding: 1em 4em;	
		}	
	
	
	.span-2 {
		grid-column: span 2;
	}
	
	/*current projects landing page*/
	.cp_one {
		grid-column: 2 / span 2;
		grid-row: 1 / span 3;
	}

	.cp_two {
		grid-column: 2 / span 2;
		grid-row: 2;
	}

	.cp_three {
		grid-column: 4 / span 2 ;
		grid-row: auto;
	}

	.cp_four {
		grid-column: 4 / span 2;
		grid-row: 2;
	}

	.text {
		grid-column: 2 / span 4;
	}	
}

.content-area-landingpage h2 {
	text-align: center;
}

/*-- END CONTENT AREA - // SECTION OVERVIEW PAGES (WORK ARCHIVE.CURRENT PROJECTS)  --------------------------------------------------------------*/





/*-- FOOTER   -------------------------------------------------------------------------------*/

footer {
	padding: 2em 1em;
	text-align: center;
	min-width: 0; /* NEW */
	min-height: 0; /* NEW */
}

footer p {
	font-size: .9em;
	text-transform: uppercase;
}

footer hr {
	margin: 0 1em;
}


@media (min-width: 560px) {
	footer hr {
		margin: 0 5em;
	}
}

hr.style-orange {
    overflow: visible; /* For IE */
    height: 30px;
    border-style: solid;
    border-color: #BE521E;
    border-width: 1px 0 0 0;
    border-radius: 20px;
}
hr.style-orange:before { /* Not really supposed to work, but does */
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: #BE521E;
    border-width: 0 0 1px 0;
    border-radius: 20px;
}

/*-- END FOOTER   -------------------------------------------------------------------------------*/






/*------------- IMAGE FLOATS------------------------  IMAGE PLACEMENT STYLING -----------------------*/

#leftimage {
	float:left;
	margin-right: 1.5em;
	margin-bottom: 1.5em;
	padding: 0px;
	width: 27vw;
}

#leftimage img {
	clear: right;
}

#leftimage p {
	color: #666;
	line-height: 17px;
}

#rightimage {
	float:right;
	margin-left: 1.5em;
	margin-bottom: 1.5em;
	padding: 5px;
	width: 30vw; 
}

#rightimage img {
	clear: left;
}

#rightimage p {
	color: #666;
	line-height: 17px;

}

.caption {
		color: #666;
		line-height: 17px;
		font-size: .8em;
}


.leftfloat {
	float:left;
	margin-right: 1.5em;
	margin-bottom: 1.5em;
	padding: 0px;
	width: 27vw;
}

.leftfloat img {
	clear: right;
}

.leftfloat p {
	color: #666;
	line-height: 17px;
}

.rightfloat {
	float:right;
	margin-left: 1.5em;
	margin-bottom: 1.5em;
	padding: 5px;
	width: 30vw; /*30vw testing out % instead of vw*/
}

.rightfloat img {
	clear: left;
}

.rightfloat p {
	color: #666;
	line-height: 17px;

}

.leftfloat_small {
	float:left;
	margin-right: 1.5em;
	margin-bottom: 1.5em;
	padding: 0px;
	width: 17vw;
}

.rightfloat_small {
	float:right;
	margin-left: 1.5em;
	margin-bottom: 1.5em;
	padding: 5px;
	width: 17vw;
}

.centerfloat {
	margin: 1em auto;
	width: 90%;
}

@media (min-width: 768px) {
	.centerfloat {
	margin: 1em auto;
	width: 30vw;
	}
	
}

/*------------- END IMAGE FLOATS ------------------------  IMAGE PLACEMENT STYLING -----------------------*/





/*-------- POP OPEN WINDOW ---------------------*/

#pop_wrapper {
	margin: 10px auto;
	padding: 10px 25px;
	text-align: left;
	background-color: #FFF;
	
}

/*purple*/
.purple #menuh ul ul a
	{
	border-top: 2px solid #5B1A39;
	}

.purple #header_bar {
	background-color: #5B1A39;
}

.purple #rightsidebar h1, .purple #rightsidebar h1 a{
	color: #5B1A39;
	text-decoration: none;
}

.purple h2 {
	color: #5B1A39;
}

.purple h4, .purple h4 a, .purple h4 a:link {
	color: #5B1A39;
}

.purplequote {
	color: #5B1A39;
}

.purple_p_text {
	color: #5B1A39;
}

/*-------- END POP OPEN WINDOW ---------------------*/



/*-------- COLOR CODING -------------------------*/


.purple.subnav ul li:first-child {
	color: #5B1A39;
}

.purple.subnav ul li a:hover {
	color: #5B1A39;
}

.purple.subnav ul li a:focus {
	color: #5B1A39;
}

.quote-purple {
	color: #5B1A39;
}
	
.purple {
	color: #5B1A39;
}


/*GREEN - UNLOCKING DESIRE */

.green.subnav ul li:first-child {
	color: #58672E;
}

.green.subnav ul li a:hover {
	color: #58672E;
}

.green.subnav ul li a:focus {
	color: #58672E;
}

.green {
	color: #58672E;
}

.green h2 {
	color: #58672E;
}

.green h4, .green h4 a, .green h4 a:link {
	color: #58672E;
}

/*MAGENTA - */

.magenta.subnav ul li:first-child {
	color: #6f0476;
}

.magenta.subnav ul li a:hover {
	color: #6f0476;
}

.magenta.subnav ul li a:focus {
	color: #6f0476;
}

.magenta {
	color: #6f0476;
}

.magenta h2 {
	color: #6f0476;
}

.magenta h4, .magenta h4 a, .magenta h4 a:link {
	color: #6f0476;
}

.magenta {
	color: #6f0476;
}

/*contact form
#contact {
	padding: 1em;
	margin: 1em;
}

.field-wrapper {
	margin: 1.5em;
}

.g-recaptcha {
	margin: 1.5em;
}

.primary {
	margin: 1.5em;
}
*/