/***************************************************************** 
tara@stanforddesignllc.com
------------------------------------------------------------------
Creation Date 3-29-2023
******************************************************************
******************************************************************
Updated or Modified Code must be commmented, dated and initialed.
Major revisions are dated and commented here.
-------------------------------------------------------------------
PAGE: styleSheet.CSS
Note: to verify all previous  codes
New content at bottom of page
MODIFIED DATE:
MODIFIED DATE:
*******************************************************************/


/*------------ BODY --------------------------*/

body {
	font-size: 1.0em;
	color: #FFFFFF;
	background-color: #F5F5F5;
	}

/*------------ Fonts -------------------------*/

h1 {
color: #481267;
font-size: 22px;
}

h1.headingD {
color: #481267;
font-family: "Bodoni Moda", serif;
font-size: 22px;
line-height: .4;
}

h1.headingCl {
color: #481267;
font-family: "Bodoni Moda", serif;
font-size: 18px;
line-height: .4;
}

h2 {
font-size: 20px;
}

h3 {
color: #481267;
font-size: 18px;
}

h4 {
color: #481267;
font-size: 14px;
text-decoration: underline;
}

h4.headingIn{
color: #481267;
font-size: 14px;
text-decoration: none;
}

p {
	font-family: "Merriweather", serif;
	font-size: 14px;
	color: #000000;
}

.p-alt {
	font-family: "Merriweather", serif;
	font-size: 14px;
	color: #FFFFFF;
}

.p-alt2 {
	font-family: Helvetica, Arial, "sans-serif";
	font-size: 13px;
	color: #000000;
}

.p-alt2caption {
	font-family: Helvetica, Arial, "sans-serif";
	font-size: 11.5px;
	color: #000000;
	font-weight: bold;
}

.p-alt3 {
	font-family: Helvetica, Arial, "sans-serif";
	font-size: 15px;
	color: #000000;
}

.p-alt4 {
	font-family: Helvetica, Arial, "sans-serif";
	font-size: 16px;
	color: #000000;
}

/*------------ Links ------------------------*/

a:link {
	color: #481267;
	text-decoration: underline;
}

a:visited {
	color: #481267;
	text-decoration: underline;
}

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

a:active {
	color: #481267;
	text-decoration: none;
}

/* --------------- Menu Button Active ---------------*/

a.menuL:link {
					
			color: #FFFFFF;
			border: 2px solid #99FF99;
			background-color: #481267;
		}

a.menuL:visited {
			font-weight: bold;
			color: #481267;
			border: 2px solid #99FF99;
			background-color: #FFFFFF;
		}
a.menuL:hover {
			font-weight: bold;
			color: #481267;
			border: 2px solid #99FF99;
			background-color: #FFFFFF;
		}
a.menuL:active {
			font-weight: bold;
			color: #481267;
			border: 2px solid #99FF99;
			background-color: #FFFFFF;
		}

/* ---------------- Form Style ---------------*/

	input[type=text] {
        padding: 5px;
		font-family: Helvetica, Arial, "sans-serif";
        border: 1px solid #B4B4DA;
        border-radius: 3px;
      }

      input[type=text]:focus {
        border-color: #481267;
      }

      textarea {
        padding: 5px;
        border: 1px solid #B4B4DA;
        border-radius: 3px;
		font-family: Helvetica, Arial, "sans-serif";
      }

      textarea:focus {
        border-color: #481267;
      }

      input[type=submit] {
        padding: 5px 15px;
        background: #B4B4DA;
		color: #481267;
        border: 0 none;
        cursor: pointer;
        border-radius: 5px;
		font-weight: bold;
		}

		input[type=submit]:hover {
		opacity: .75;
		}

      input[type=reset] {
        padding: 5px 15px;
        background: #B4B4DA;
		color: #481267;
        border: 0 none;
        cursor: pointer;
        border-radius: 5px;
		font-weight: bold;
		}

		input[type=reset]:hover {
		opacity: .75;
		}


/* ---------------- Screen Sizing ------------*/
       *{
			box-sizing: border-box;
		}
		
		.row::after {
			content: "";
			clear: both;
			display: table;
		}
		
		[class*="col-"] {
			float:left;
			padding: 15px;
		}
		
		/* ex small mobile phones */
		@media only screen and (max-width: 600px) {
		[class*="col-"] {
				width: 100%;
			}
		}
		
		/* small tablets and large phones */
		@media only screen and (min-width: 600px) {
		.col-s-1 {width: 8.33%;}
		.col-s-2 {width: 16.66%;}
		.col-s-3 {width: 25%;}
		.col-s-4 {width: 33.33%;}
		.col-s-5 {width: 41.66%;}
		.col-s-6 {width: 50%;}
		.col-s-7 {width: 58.33%;}
		.col-s-8 {width: 66.66%;}
		.col-s-9 {width: 75%;}
		.col-s-10 {width: 83.33%;}
		.col-s-11 {width: 91.66%;}
		.col-s-12 {width: 100%;}
		}
		
		/* medium devices and desktops */
		@media only screen and (min-width: 768px) {
		.col-m-1 {width: 8.33%;}
		.col-m-2 {width: 16.66%;}
		.col-m-3 {width: 25%;}
		.col-m-4 {width: 33.33%;}
		.col-m-5 {width: 41.66%;}
		.col-m-6 {width: 50%;}
		.col-m-7 {width: 58.33%;}
		.col-m-8 {width: 66.66%;}
		.col-m-9 {width: 75%;}
		.col-m-10 {width: 83.33%;}
		.col-m-11 {width: 91.66%;}
		.col-m-12 {width: 100%;}
		}
		
		/* landscape designation, same as medium -- I will need to test this on phones - also do I need it with the other screen size element calls? */
		@media only screen and (orientation: landscape) {
		.col-m-1 {width: 8.33%;}
		.col-m-2 {width: 16.66%;}
		.col-m-3 {width: 25%;}
		.col-m-4 {width: 33.33%;}
		.col-m-5 {width: 41.66%;}
		.col-m-6 {width: 50%;}
		.col-m-7 {width: 58.33%;}
		.col-m-8 {width: 66.66%;}
		.col-m-9 {width: 75%;}
		.col-m-10 {width: 83.33%;}
		.col-m-11 {width: 91.66%;}
		.col-m-12 {width: 100%;}
		}
		
		/* desktops and laptops */
		@media only screen and (min-width: 992px) {
		.col-lg-1 {width: 8.33%;}
		.col-lg-2 {width: 16.66%;}
		.col-lg-3 {width: 25%;}
		.col-lg-4 {width: 33.33%;}
		.col-lg-5 {width: 41.66%;}
		.col-lg-6 {width: 50%;}
		.col-lg-7 {width: 58.33%;}
		.col-lg-8 {width: 66.66%;}
		.col-lg-9 {width: 75%;}
		.col-lg-10 {width: 83.33%;}
		.col-lg-11 {width: 91.66%;}
		.col-lg-12 {width: 100%;}
		}
		
		/* extra large desktops and laptops */
		@media only screen and (min-width: 1200px) {
		.col-xl-1 {width: 8.33%;}
		.col-xl-2 {width: 16.66%;}
		.col-xl-3 {width: 25%;}
		.col-xl-4 {width: 33.33%;}
		.col-xl-5 {width: 41.66%;}
		.col-xl-6 {width: 50%;}
		.col-xl-7 {width: 58.33%;}
		.col-xl-8 {width: 66.66%;}
		.col-xl-9 {width: 75%;}
		.col-xl-10 {width: 83.33%;}
		.col-xl-11 {width: 91.66%;}
		.col-xl-12 {width: 100%;}
		}
		
/*------------ Layout -----------------------*/

		.header {
			background-color: #481267;
			padding: 15px;
			border-bottom: 5px solid #99FF99;
			box-shadow: 0 2px 3px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.24);
			border-top-left-radius: 80px 80px;
			/* border-bottom-right-radius: 40px 40px; */
		}
		
		.footer {
			background-color: #B4B4DA;
			text-align: center;
			font-size: 13px;
			padding: 1px;
			/* --- border: 1px solid #99FF99; --- */
			/* --- box-shadow: 0 2px 3px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.24); --- */
		}
		
		.main {
			display: block;
			background-color: #FFFFFF;
			padding: 15px;
			margin-bottom: 7px;
			margin-top: 7px;
			box-shadow: 0 2px 2px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.24);
		}
		
		.aside {
			font-size: 18px;
			color: #481267;
			padding: 15px;
			background-color: #FFFFFF;
			text-align: center;
			border: 1px solid #481267;
			box-shadow: 0 2px 3px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.24);
		}

		.pricing {
			display: block;
			font-size: 18px;
			color: #481267;
			padding: 15px;
			background-color: #FFFFFF;
			text-align: center;
			border: 1px solid #481267;
			box-shadow: 0 2px 3px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.24);
		}

		/* hide pricing from top use pricing2 for placement above the copyright */
		div.hidePricing {
			
		}
				
		@media screen and (max-width: 600px) {
			div.hidePricing{
			display: none;
			}
		}

		/* hide pricing from bottom use until viewport is small enough - placement above the copyright */
		div.hidePricing2 {
			
		}
				
		@media screen and (min-width: 601px) {
			div.hidePricing2{
			display: none;
			}
		}

		@media screen and (max-width: 600px) {
		div.pricing2 {
			display: block;
			font-size: 18px;
			color: #481267;
			padding: 15px;
			background-color: #FFFFFF;
			text-align: center;
			border: 1px solid #481267;
			box-shadow: 0 2px 3px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.24);
		}
}
		
		.menu ul {
			list-style-type: none;
			margin: 0px;
			padding: 0px;
		}

		.menu li a {
			display: block;
			color: #FFFFFF;
			text-decoration: none;
			font-size: 18px;
			padding: 8px;
			margin-bottom: 7px;
			background-color: #481267;
			border: 2px solid #99FF99;
			box-shadow: 0 2px 3px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.24);
		}

		.menu li a:hover {
			font-weight: bold;
			color: #481267;
			border: 2px solid #99FF99;
			background-color: #FFFFFF;
		}

		.menu li a.active {
			font-weight: bold;
			color: #481267;
			border: 2px solid #99FF99;
			background-color: #FFFFFF;
		}
				
		.list ul {
			color: #000000;;
		}

		.list li {
			color: #000000;
			font-size: 16px;
			font-family: Helvetica, Arial, "sans-serif";
			line-height: 1.8;
		}

		body {
   		 font-family: "Merriweather", serif;
		}
			
		p.welcome1 {
			font-size: 16px;
			line-height: 1.5;
		}
		
		p.welcome2 {
			font-size: 13px;			
		}
		
		a.email {
			display: inline-flex;
			text-decoration: underline;		
		}
		
		img {
  			max-width: 100%;
 			height: auto;
		}

		img.border {
			border: 1.5px solid #808080;
		}

		img.shadow {
			display: block;
			border: 1.5px solid #808080;
			background-color: #FFFFFF;
			box-shadow: -1px -1px 2px rgba(0,0,0,0.25), 3px 3px 3px rgba(0,0,0,0.25);
		}

		img.wrap {
			padding-bottom: 6px;
			padding-right: 10px;
		}

		.tag {
			 display: block;
  			 margin-left: auto;
  			 margin-right: auto;
		}

		hr {
			display: block;
			height: 2px;
			border-width: 0;
			color: #481267;
			box-shadow: 0 2px 3px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.24);
		}

		table {
			border-collapse: collapse;
		}

		tr.show {
			border-bottom: 1.5px solid #481267;
		}

		tr.showG {
			border-bottom: 1px dotted #481267;
		}

		tr.hide {
			border-style: hidden; 
		}

		table.buttons {
			margin: 0 auto;
		}

		div.back {
			align-content: flex-end;
			font-size: 13px;
			color: #481267;
		}

		
/*------------ Sidebar Menu --------------------------*/


.sidepanel  {
  margin-top: 8px;
  height: 268.5px;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #481267;
  border: 2px solid #B4B4DA;
  opacity: .925;
  overflow-x: hidden;
  transition: 0.3s;
  padding-top: 30px;
  border-top-left-radius: 80px 80px;
  box-shadow: 0 2px 3px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.24);
}

.sidepanel a {
  padding: 10px 10px 2px 10px;
  text-decoration: none;
  font-size: 16px;
  color: #FFFFFF;
  display: block;
  transition: 0.3s;
}

.sidepanel a:hover {
  color: #B4B4DA;
}

.sidepanel .closebtn {
  position: absolute;
  top: 0;
  right: 15px;
  font-size: 24px;
  margin-right: 0px;
}

.openbtn {
  cursor: pointer;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  opacity: .7;
}

/*---------------- Image Links ----------------*/
/*--- called on the for images on hover------*/

a.linkImg:link {
	padding: 0px;
}

a.linkImg:visited {
	padding: 0px;
}

a.linkImg:hover {
	padding: 0px;
	opacity: 0.70;
	cursor: pointer;
}

a.linkImg:active {
	padding: 0px;
	opacity: 0.70;
	cursor: pointer;
}


/*------------ Clients Links Layout 3 columns--------------------------*/

div.clientLinks {
	display: flex;
	justify-content: center;
}

.rowCl {
	display: flex;
	flex-wrap: wrap;
	padding: 0 4px;
	max-width: 85%;
}

/*------------ Creates 3 equal columns --------------------------*/

.columnCl {
  flex: 33.33%;
  max-width: 33.33%;
  padding: 0 25px;
  border: .25px dotted #B4B4DA;
}

/*------------ Creates 2 equal columns --------------------------*/

@media screen and (max-width: 900px) {
  .columnCl {
    flex: 50%;
    max-width: 50%;
  }
}

/*------------ Creates a single column --------------------------*/

@media screen and (max-width: 800px) {
  .columnCl {
    flex: 100%;
    max-width: 100%;
  }
}


/*------------ Gallery Container Layout 4 columns--------------------------*/

div.galleryCont {
	display: flex;
	justify-content: center;
}

.rowGal {
	display: flex;
	flex-wrap: wrap;
	padding: 0 4px;
	max-width: 85%;
}

/*------------ Creates 4 equal columns --------------------------*/

.columnGal {
  flex: 25%;
  max-width: 25%;
  padding: 0 25px;
	/* ---
  border: .25px solid #B4B4DA; ---*/
}

/*------------ Creates 2 equal columns --------------------------*/

@media screen and (max-width: 900px) {
  .columnGal {
    flex: 50%;
    max-width: 50%;
  }
}

/*------------ Creates a single column --------------------------*/

@media screen and (max-width: 800px) {
  .columnGal {
    flex: 100%;
    max-width: 100%;
  }
}


/*------------ Gallery Container Layout 2 columns--------------------------*/

div.galleryCont-2 {
	display: flex;
	justify-content: center;
}

.rowGal-2 {
	display: flex;
	flex-wrap: wrap;
	padding: 0 4px;
	max-width: 85%;
}

/*------------ Creates 2 equal columns --------------------------*/

.columnGal-2 {
  flex: 50%;
  max-width: 50%;
  padding: 0 25px;
	/*---
  border: .25px solid #B4B4DA; ---*/
}


/*------------ Creates a single column --------------------------*/

@media screen and (max-width: 900px) {
  .columnGal-2 {
    flex: 100%;
    max-width: 100%;
  }
}


/*------------ Gallery Container Layout 1 column--------------------------*/

div.galleryCont-single {
	display: flex;
	justify-content: center;
}

.rowGal-single {
	display: flex;
	flex-wrap: wrap;
	padding: 0 4px;
	max-width: 85%;
}

/*------------ Creates 2 equal columns --------------------------*/

.columnGal-single {
  flex: 100%;
  max-width: 100%;
  padding: 0 25px;
	/*---
  border: .25px solid #B4B4DA; ---*/
}


/*------------ Creates a single column --------------------------*/

@media screen and (max-width: 900px) {
  .columnGal-single {
    flex: 100%;
    max-width: 100%;
  }
}

/*---------------- The Modal (background) ----------------*/
		
		
.modal {
  display: none;
  position: fixed;
  z-index: 5;
  padding-top: 30px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #FFFFFF;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #FFFFFF;
  opacity: 1;
  margin: auto;
  padding: 0;
  width: 98%;
  max-width: 1080px;
}

/* The Close Button */
.close {
  color: #481267;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 30px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #B4B4DA;
  text-decoration: none;
  cursor: pointer;
}

.myImages {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev2,
.next2 {
  cursor: pointer;
  /* position: absolute; */
  /* top: 50%; */
  /*width: auto; */
  padding: 10px;
  /* margin-top: -50px; */
  color: #481267;
  font-weight: bold;
  font-size: 25px;
  transition: 0.6s ease;
  border-radius: 3px 0 0 3px;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next2 {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add slight opacity to show action and no underline */
.prev2:hover,
.next2:hover {
	opacity: .45;
	text-decoration: none;
}		
		
/* Number text (1/3 etc) */
.numbertext2 {
  color: #481267;
  font-size: 16px;
  padding-top: 4px;
  padding-bottom: 10px;
  position: relative;
  text-align: center;
  font-weight: bold;
  top: 0;
}
	
.caption {
  color: #481267;
  font-size: 14px;
  padding-top: 4px;
  padding-bottom: 2px;
  position: relative;
  width: 100%;
  text-align: center;
  font-weight: bold;
}

.text2 {
  color: #481267;
  font-size: 11px;
  padding-top: 4px;
  padding-bottom: 4px;
  position: relative;
  width: 100%;
  text-align: center;
}

.demo {
  opacity: 0.6;
}
.active,
.demo:hover {
  opacity: 1;
}