@charset "UTF-8";

header, nav, aside, article, footer, section, main, figure, figcaption {
	display:block;
}
* {
 	margin:0;
	border:0;
	padding:0;
  scroll-behavior: smooth;
}
*:focus {
  outline: 0;
}

header p {
    margin-top: -20px;
    text-align: center;
    background-color: #ffffff;
    font-family: 'Balsamiq Sans', cursive;
    color: #3953a4
  }

#container {
  margin: auto;
  background-color: #bdb7b7;
  max-width: 1920px;
}

h1,
h2,
h3 {
  font-family: 'Balsamiq Sans', cursive;
  color: #3953a4
}

h1 {
  font-size: 36pt;
}

h2 {
  font-size: 32pt;
}

h3 {
  font-size: 28pt;
}

h4,
h5,
h6 {
  font-family: 'Noto Serif', serif;
}



h4 {
  font-size: 24pt;
}

h5 {
  font-size: 20pt;
}

h6 {
  font-size: 18pt;
  }

p {
  font-family: 'Noto Serif', serif;
  color: #414042;
}

body {
  font-family: 'Noto Serif', serif;
  font-size: 18px;
}

.orange {
  color: #faa41a;
}

.yellow {
  color: #f7ec13;
}

.green {
  color: #6abd45;
}

.blue {
  color: #3953a4;
}

.purple {
  color: #683695;
}

.orange-reverse {
  background-color: #faa41a;
  color: #414042;
}

.yellow-reverse {
  background-color: #f7ec13;
  color: #414042;
}

.green-reverse {
  background-color: #6abd45;
  color: #414042;
}

.blue-reverse {
  background-color: #3953a4;
  color: #e6e7e8;
}

.purple-reverse {
  background-color: #683695;
  color: #e6e7e8;
}


/*==========================

  sticky footer styling

===========================*/

.site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.site-content {
  flex: 1;
}

.align-left {
  float: left;
  max-width: 250px;
  margin: -40px 0 100px 3rem;
}

footer {
    border-top: solid #683695 24px;
    text-align: center;
    color: #414042;
    display: inline-block;
}

footer p {
  color: #3953a4;
  font-size: 20px;
}

footer ul li a,
footer p a {
    color: #3953a4;
    font-size: 18px;
    transition: .3s;
    list-style: none;
    text-decoration: none;
    display: inline-block;
    list-style-image: none;
}

.footer-item {
  list-style: none;
  text-decoration: none;
  display: inline-block;
  list-style-image: none;
}

footer a:hover {
    color: #6abd45;
    transition: .3s;
}

footer::first-line {
  font-family: 'Noto Serif', serif;
	font-size: 24px;
	font-weight: bold;
}

/*=======================================================

  top logo

========================================================*/

.logo {
  display: block;
  margin: auto;
  width: 98%;
  background-color: #ffffff;
  padding: 25px 0 0 0;
}


/*=======================================================

  hamburger menu

========================================================*/


.hamburger{
  background:none;
  position:absolute;
  top: 60px;
  right:0;
  line-height:45px;
  padding:5px 15px 0px 15px;
  color:#999;
  border:0;
  font-size:1.4em;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.cross{
  background:none;
  position:absolute;
  top: 60px;
  right:0;
  padding:7px 15px 0px 15px;
  color:#999;
  border:0;
  font-size:3em;
  line-height:65px;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;
}
.menu{z-index:1000000; font-weight:bold; font-size:0.8em; width:100%; background:#f1f1f1;  position:absolute; text-align:center; font-size:12px;}
.menu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
.menu li {display: block;   padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
.menu li:hover{display: block;    background:#ffffff; padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;}
.menu ul li a { text-decoration:none;  margin: 0px; color:#666;}
.menu ul li a:hover {  color: #666; text-decoration:none;}
.menu a{text-decoration:none; color:#666;}
.menu a:hover{text-decoration:none; color:#666;}

.flexbox-nav {
	display: none;
}


/*=====================================================

  home page styling

=======================================================*/

main {
  padding: 25px 2rem 25px 3rem;
}

main figcaption {
  text-align: center;
  font-style: italic;
  color: #3953a4;
}

.figure-flex img {
  text-align: center;
  width: 100%;
}

.figure-flex {
  padding: 25px 1rem 25px 1rem;
}

aside {
  padding: 25px 1rem 25px 1rem;
  background-color: #bcbec0;
}

aside h2 {
  text-align: left;
  color: #3953a4;
}
.aside-figures img {
  text-align: center;
  width: 100%;
  margin: auto;
}

figcaption {
  text-align: center;
  font-style: italic;
  color: #3953a4;
}




/*======================================================

  Partner Page styling

======================================================*/

.partner-intro {
  flex: 2;
  padding: 50px 1rem 50px 3rem;
  background-color: #e6e7e8;
}

.partner-container {
  flex: 5;
  padding: 50px 1rem 50px 1rem;
}

.partner-ad {
  flex: 1;
  padding: 50px 3rem 50px 1rem;
}

.partner-ad figure {
  align-items: center;
  /* position: fixed; */
  transition: 2s;
}

.partner-ad figcaption {
  font-size: 10px;
  color: #ed2024;
}

.partner-ad:hover figure {
  max-width: 450px;
  transition: 2s;
}


.home-study {
  border: 5px solid #faa41a;
  display: flex;
  flex-direction: column;
  padding: 15px 1rem 15px 1rem;
  margin-bottom: 25px;
}

.home-study-img {
  flex: 1;
  font-family: 'Balsamiq Sans', cursive;
  text-align: center;
}

.home-study-content {
  flex: 4;
  align-self: center;
}

.attorneys {
  border: 5px solid #f7ec13;
  display: flex;
  flex-direction: column;
  padding: 15px 1rem 15px 1rem;
  margin-bottom: 25px;
}

.attorney-img {
  flex: 1;
  font-family: 'Balsamiq Sans', cursive;
  text-align: center;
}

.attorney-content {
  flex: 4;
  align-self: center;
  padding-left: 1rem;
}

.consultants {
  border: 5px solid #6abd45;
  display: flex;
  flex-direction: column;
  padding: 15px 1rem 15px 1rem;
  margin-bottom: 25px;
}

.consultant-img {
  flex: 1;
  font-family: 'Balsamiq Sans', cursive;
  text-align: center;
}

.consultant-content {
  flex: 4;
  align-self: center;
  padding-left: 1rem;
}

.consultants {
  border: 5px solid #6abd45;
  display: flex;
  flex-direction: column;
  padding: 15px 1rem 15px 1rem;
  margin-bottom: 25px;
}

.consultant-img {
  flex: 1;
  font-family: 'Balsamiq Sans', cursive;
  text-align: center;
}

.consultant-content {
  flex: 4;
  align-self: center;
  padding-left: 1rem;
}

.agencies {
  border: 5px solid #3953a4;
  display: flex;
  flex-direction: column;
  padding: 15px 1rem 15px 1rem;
  margin-bottom: 25px;
}

.agency-img {
  flex: 1;
  font-family: 'Balsamiq Sans', cursive;
  text-align: center;
}

.agency-content {
  flex: 4;
  align-self: center;
  padding-left: 1rem;
}

.resources {
  border: 5px solid #683695;
  display: flex;
  flex-direction: column;
  padding: 15px 1rem 15px 1rem;
  margin-bottom: 25px;
}

.resource-img {
  flex: 1;
  font-family: 'Balsamiq Sans', cursive;
  text-align: center;
}

.resource-content {
  flex: 4;
  align-self: center;
  padding-left: 1rem;
}





/*=====================================================

  partner page / ad styling

======================================================*/

.partner-ad figure {
  align-items: center;
  /* position: fixed; */
  transition: 2s;
}

.partner-ad:hover figure {
  max-width: 450px;
  transition: 2s;
}

/*========================================================

  Gallery styling

==========================================================*/

.family {
	display: flex;
	flex-direction: column;
	text-align: center;
}

.NMportraits {
	max-width: 22%;
	text-align: center;
	margin: 0 auto;
	align-items: center;
}

.family-text {
	flex: 1;
	padding-bottom: 10px;
}

.lightbox {
	flex: 2;
	padding: 25px;
}

.friends {
	text-align: center;
}

.friends p {
	padding-bottom: 25px;
}

.bx-wrapper {
	margin: 0 auto;
	text-align: center;
	padding-top: 50px;
}


/*========================================================

  FAQ styling

==========================================================*/

/* .container-ad {
	display: flex;
} */

.faq-container {
	/* flex: 3; */
	border: 0;
  box-sizing: border-box;
  margin: 50px;
  /* max-width: 900px; */
  /* padding: 20px; */
  background: #ffffff;
  min-height: 100vh;
  text-align: left;
  /* color: #6d6e71; */
}

/* .faq-aside {
	flex-direction: row;
} */


/* .faq-aside figure {
	padding-top: 50px;
	text-align: center;
} */

details {
  border: 1px solid black;
  background: #e6e7e8;
  padding: 15px 20px;
}

summary {
  font-weight: bold;
  transition: .3s;
}

summary:hover {
  cursor: pointer;
  color: #3953a4;
  transition: .3s;
}

details p {
  padding: 15px 0 10px 0;
}

summary::-webkit-details-marker {
  display: none;
}

summary:before {
  content: "\f0fe";
  font-family: 'Font Awesome 5 Free';
  margin-right: 10px;
  font-weight: normal;
  color: #ed2024;
  transition: .3s;
}

summary:hover:before {
  color: #6abd45;
  transition: .3s;
}

details[open] summary:before {
  content: "\f146";
}

.faq-aside {
	background-color: #ffffff;
	margin: 0 auto;
}

/*=====================================================

	START CSSS3 Animation (AD/FAQ page)

======================================================*/

.faq-ad {
	/* position: relative;
	right: 0;
	bottom: -25px;
	animation: right-left 30s linear infinite normal; */
	max-width: 260px;
	max-height: 410px;
	box-sizing: border-box;
	text-align: center;
	/* padding: 5px; */
	/* box-shadow: 0 -1px 10px rgb(237 32 36/ .7);
	transform-style: inherit; */
	background-color: #ffffff;
}

/* @keyframes right-left {
	from {
		left: 100%;
	}
	to{
		left: 0%;
	}
} */

.red-italics {
	color: #ed2024;
	font-size: 12px;
	font-style: italic;
}

/*=====================================================

	END CSSS3 Animation (AD/FAQ page)

======================================================*/

  /*======================================================

  contact us Page styling

  ========================================================*/

.contact-container {
  border: 0;
  box-sizing: border-box;
  margin: 50px auto 100px;
  max-width: 900px;
  /* padding: 20px; */
  background: #ffffff;
  min-height: 100vh;
  text-align: center;
}

.contact-form {
  background: #3953a4;
  /* padding: 20px; */
  max-width: 750px;
  color: #f7ec13;
  margin: 20px auto;
}

.contact-container h3 {
  text-align: center;
}

.contact-container h4 {
  color: #ffffff;
  text-align: center;
}

.contact-container h5,
.contact-container h6 {
  color: #faa41a;
}




.addresscontainer {
  text-align: center;
}

.label_input_wrap {
  display: block;
}

/* .label {
  font-weight: bold;
} */

.reset input,
.submit input {
  padding: 5px 20px;
}

.reset input {
  background: #ed2024;
  color: white;
}

.submit input {
  background: #6abd45;
  color: white;
}

.reset,
.submit {
  display: inline;
}

.input-section,
.add-input-section {
  margin-bottom: 10px;
}

input {
  padding: 5px 10px;
}

textarea {
  padding: 10px 10px;
}

.select {
  max-width: 200px;
  padding: 8px 0;
}




/********************************* start media query 500px *********************/

@media (min-width: 500px) {

	.hamburger,
	.cross,
	.menu {
		display: none;
	}

	.flexbox-nav {
		display: inline;
		width: 100%;
	}

	.flexbox-nav ul {
		display: flex;
		background: #683695;
		list-style: none;
	}

	.flexbox-nav li {
		flex-grow: 1;
		padding: 5px;
		margin-right: 10px;
		text-align: center;
		font-weight: bold;
	}

	.flexbox-nav li a {
		color: #ffffff;
		text-decoration: none;
	}

	.flexbox-nav:last-child {
		margin-right: 0;
	}



	.parent-container {
		display: flex;
	}

	.p1container {
		flex: 1;
	}

	.p2container {
		flex: 1;
		flex-direction: row;
	}


}

/********************************* end media query 500px *********************/

/********************************* start media query 760px *********************/

@media (min-width: 760px) {

  #container {
    max-width: 760px;
  }

  aside {
    flex: 1;
    display: flex;
    flex-direction: row;
    padding: .5rem;
    text-align: center;
  }

  .aside-figures {
    padding: 5px;
  }

	.faq-container {
		max-width: 760px;
		margin: 50px auto;
	}



/********************************* end media query 760px *********************/

/********************************* start media query 960px *********************/

@media (min-width: 960px) {

  #container {
    max-width: 960px;
  }

  .desktop-flex {
    display: flex;
  }

  main {
    flex: 3;
  }

  .figure-flex {
    flex: 2;
    display: flex;
    flex-direction: column;
  }

  aside {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 25px 1rem 25px 1rem;
  }

  .align-left {
    margin: -40px 0 100px 3rem;
  }



/*-------------------------------partner page--------------------------------*/

  .partner-intro {
    flex: 2;
    padding: 50px .5rem 50px 3rem;
    background-color: #e6e7e8;
  }

  .partner-container {
    flex: 2;
    padding: 50px .5rem 50px .5rem;
  }

  .partner-ad {
    flex: 1;
    padding: 50px 3rem 50px .5rem;
  }

  .partner-ad figure {
    align-items: center;
    position: fixed;
    transition: 2s;
  }

  .partner-ad figcaption {
    font-size: 10px;
    color: #ed2024;
  }

  .partner-ad:hover figure {
    max-width: 450px;
    transition: 2s;
  }


  .home-study {
    border: 5px solid #faa41a;
    display: flex;
    flex-direction: column;
    padding: 15px 1rem 15px 1rem;
    margin-bottom: 25px;
  }

  .home-study-img {
    font-family: 'Balsamiq Sans', cursive;
    flex: 1;
  }

  .home-study-content {
    flex: 4;
  }

  .attorneys {
    border: 5px solid #f7ec13;
    display: flex;
    flex-direction: column;
    padding: 15px 1rem 15px 1rem;
    margin-bottom: 25px;
  }

  .attorney-img {
    flex: 1;
    font-family: 'Balsamiq Sans', cursive;
    font-size: 24px;
    text-align: center;
  }

  .attorney-content {
    flex: 4;
    align-self: center;
    padding-left: 1rem;
  }

  .consultants {
    border: 5px solid #6abd45;
    display: flex;
    flex-direction: column;
    padding: 15px 1rem 15px 1rem;
    margin-bottom: 25px;
  }

  .consultant-img {
    flex: 1;
    font-family: 'Balsamiq Sans', cursive;
    font-size: 24px;
    text-align: center;
  }

  .consultant-content {
    flex: 4;
    align-self: center;
    padding-left: 1rem;
  }

  .consultants {
    border: 5px solid #6abd45;
    display: flex;
    flex-direction: column;
    padding: 15px 1rem 15px 1rem;
    margin-bottom: 25px;
  }

  .consultant-img {
    flex: 1;
    font-family: 'Balsamiq Sans', cursive;
    font-size: 24px;
    text-align: center;
  }

  .consultant-content {
    flex: 4;
    align-self: center;
    padding-left: 1rem;
  }

  .agencies {
    border: 5px solid #3953a4;
    display: flex;
    flex-direction: column;
    padding: 15px 1rem 15px 1rem;
    margin-bottom: 25px;
  }

  .agency-img {
    flex: 1;
    font-family: 'Balsamiq Sans', cursive;
    font-size: 24px;
    text-align: center;
  }

  .agency-content {
    flex: 4;
    align-self: center;
    padding-left: 1rem;
  }

  .resources {
    border: 5px solid #683695;
    display: flex;
    flex-direction: column;
    padding: 15px 1rem 15px 1rem;
    margin-bottom: 25px;
  }

  .resource-img {
    flex: 1;
    font-family: 'Balsamiq Sans', cursive;
    font-size: 24px;
    text-align: center;
  }

  .resource-content {
    flex: 4;
    align-self: center;
    padding-left: 1rem;
  }

}


/********************************* end media query 960px *********************/

/* ******************************** start media query 1200px *********************/

@media (min-width: 1200px) {

  #container {
    max-width: 1200px;
  }

  .logo {
    max-width: 1200px;
  }


  main {
    font-size: 20px;
    /* padding-left: .5rem; */
  }


.partner-intro {
  flex: 2;
  padding: 50px 1rem 50px 3rem;
  background-color: #e6e7e8;
}

.partner-container {
  flex: 5;
  padding: 50px 1rem 50px 1rem;
}

.partner-ad {
  flex: 1;
  padding: 50px 3rem 50px 1rem;
}

.partner-ad figure {
  align-items: center;
  position: fixed;
  transition: 2s;
}

.partner-ad figcaption {
  font-size: 10px;
  color: #ed2024;
}

.partner-ad:hover figure {
  max-width: 450px;
  transition: 2s;
}


.home-study {
  border: 5px solid #faa41a;
  display: flex;
  flex-direction: row;
  padding: 15px 1rem 15px 1rem;
  margin-bottom: 25px;
}

.home-study-img {
  flex: 1;
  font-family: 'Balsamiq Sans', cursive;
  font-size: 24px;
  text-align: center;
}

.home-study-content {
  flex: 4;
  align-self: center;
  padding-left: 1rem;
}

.attorneys {
  border: 5px solid #f7ec13;
  display: flex;
  flex-direction: row;
  padding: 15px 1rem 15px 1rem;
  margin-bottom: 25px;
}

.attorney-img {
  flex: 1;
  font-family: 'Balsamiq Sans', cursive;
  font-size: 24px;
  text-align: center;
}

.attorney-content {
  flex: 4;
  align-self: center;
  padding-left: 1rem;
}

.consultants {
  border: 5px solid #6abd45;
  display: flex;
  flex-direction: row;
  padding: 15px 1rem 15px 1rem;
  margin-bottom: 25px;
}

.consultant-img {
  flex: 1;
  font-family: 'Balsamiq Sans', cursive;
  font-size: 24px;
  text-align: center;
}

.consultant-content {
  flex: 4;
  align-self: center;
  padding-left: 1rem;
}

.consultants {
  border: 5px solid #6abd45;
  display: flex;
  flex-direction: row;
  padding: 15px 1rem 15px 1rem;
  margin-bottom: 25px;
}

.consultant-img {
  flex: 1;
  font-family: 'Balsamiq Sans', cursive;
  font-size: 24px;
  text-align: center;
}

.consultant-content {
  flex: 4;
  align-self: center;
  padding-left: 1rem;
}

.agencies {
  border: 5px solid #3953a4;
  display: flex;
  flex-direction: row;
  padding: 15px 1rem 15px 1rem;
  margin-bottom: 25px;
}

.agency-img {
  flex: 1;
  font-family: 'Balsamiq Sans', cursive;
  font-size: 24px;
  text-align: center;
}

.agency-content {
  flex: 4;
  align-self: center;
  padding-left: 1rem;
}

.resources {
  border: 5px solid #683695;
  display: flex;
  flex-direction: row;
  padding: 15px 1rem 15px 1rem;
  margin-bottom: 25px;
}

.resource-img {
  flex: 1;
  font-family: 'Balsamiq Sans', cursive;
  font-size: 24px;
  text-align: center;
}

.resource-content {
  flex: 4;
  align-self: center;
  padding-left: 1rem;
}

/********************************* end media query 1200px *********************/

/********************************* start media query 1400px *********************/

@media (min-width: 1400px) {

  main {
    font-size: 24px;
    color: #939598;
  }

  .align-left {
    max-width: 250px;
    margin: -40px 0 50px 3rem;
  }

  footer p {
    font-size: 24px;
  }

  footer a ul li {
      font-size: 20px;
  }

  aside h2 {
    font-size: 36px;
  }

  aside figure img {
    text-align: center;
    margin: auto;
  }

  aside figcaption {
    text-align: center;
    font-style: italic;
    color: #3953a4;
  }
}



/********************************* end media query 1400px *********************/