header{
  background-color: #67271E;
  margin: 0;
}

body{
  margin: 0;
}

header img{
  width: 250px;
  padding: 10px 0px 10px 10px;
}

h4{
  font-family: lato, sans-serif;
}

p{
  font-family: lato, sans-serif
}


a.menu-link {
  	    float: right;
		    display: block;
		    padding: 1em;
        padding-top: 40px;
			  width: 200px;
        color: white;
		}

nav ul li{
  height: 40px;
}

nav ul li a {
  color: white;
  margin: 0 auto;
  padding: 0px;
  text-align: center;
  font-family: lato, sans-serif;
}

.topGrid{
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "header header"
    "text1 text1";
  margin: 5px;
}

.topGrid .subpagehead{
  grid-area: header;
}

/* .bigtext{
  font-size: 2em;
  margin: 3px 10px 50px 10px;
  grid-area: header;
  border-bottom: 2px solid black;
  font-family: malaga, serif;
} */

.smallertext{
  grid-area: text1;
  padding: 5px 10px 15px 10px;
  font-size: 1.2em;
  font-family: lato, sans-serif;
}

.bigtext h2{
  font-size: 2.5em;
  padding: 0;
  margin: 0;
  font-family: malaga, serif;
}

.bigimage{
}

img{
  width: 60%;
  text-align: center;
  padding: 10px;
  margin: 0 auto;
  grid-column-start: 1/2;
}

main{
  height: 105%;
}

footer{
  background-color: #67271E;
  height:200px;
  color: white;
}

.footerDiv{
  display: flex;
}

.footerLogo{
  text-align: center;
  padding: 10px;
  width: 65%;
}

.footerLogo img{
  padding-top: 10px;
  width:60%;
}

.footerSoc{
  padding: 10px;
  font-family: lato, sans-serif;
  font-weight: 300;
}

.slide1back{
  background-image: url("images/j0400019.jpg");
  background-size:cover;
  width: 100%;
  height: 500px;
  padding: 100px 75px 100px 75px;
}

.slide1tes{
  background-color:rgb(214,152,105, .75);
  padding: 15px;
  height: 300px;
  width: 85%;
  min-width: 300px;
  margin: auto;
  font-size: 1.2em;
  display: flex;
  flex-direction: column;
  font-family: lato, sans-serif;
}

.slide1tes h4{
  text-align: right;
  align-self: flex-end;
  font-family: malaga, serif;
}

.slide2back{
  background-image: url("images/Accountingmaleandfemale.jpg");
  background-size:cover;
  width: 100%;
  height: 500px;
  padding: 50px 50px 50px 50px;
}

.slide2tes{
  background-color:rgb(214,152,105, .75);
  padding: 15px;
  height: 400px;
  width: 85%;
  min-width: 300px;
  margin: auto;
  font-size: 1.2em;
  font-family: lato, sans-serif;
}

.slide2tes h4{
  margin: 0;
  padding-top: 15px;
  text-align: right;
  font-family: malaga, serif;
}

.slide3back{
  background-image: url("images/Financial-Guide-to-a-Young-Mind.jpg");
  background-size:cover;
  width: 100%;
  height: 500px;
  padding: 50px 50px 50px 50px;
}

.slide3tes{
  background-color:rgb(214,152,105, .75);
  padding: 15px;
  height: 400px;
  width: 85%;
  min-width: 300px;
  margin: auto;
  font-size: 1.2em;
  font-family: lato, sans-serif;
}

.slide3tes h4{
  text-align: right;
  margin: 0;
  padding-top: 40px;
  font-family: malaga, serif;
}

.buttondiv{
  padding: 0px 3px 20px 3px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.subpagehead{
  border-bottom: 2px solid #67271E;
  padding: 5px 10px 0px 10px;
  margin-bottom: 15px;
  font-family: malaga, serif;
}

.subpagehead p{
  font-size: 1.2em;
  font-family: lato, sans-serif;
}

.subpagehead h2{
  text-align: center;
  font-size: 2.5em;
  padding: 10px 0px 5px 0px;
  margin: 0;
  color: #67271E;
}

.subpagehead2{
  padding: 5px 10px 0px 10px;
  margin-bottom: 15px;
  font-family: malaga, serif;
}

.subpagehead2 p{
  font-size: 1.2em;
  font-family: lato, sans-serif;
}

.subpagehead2 h2{
  text-align: center;
  font-size: 2.5em;
  padding: 10px 0px 5px 0px;
  margin: 0;
  color: #67271E;
}

.subpageheadarticle{
  border-bottom: 2px solid #67271E;
  padding: 5px 10px 0px 10px;
  margin-bottom: 15px;
  font-family: malaga, serif;
}

.subpageheadarticle p{
  font-size: 0.9em;
  font-family: lato, sans-serif;
  text-align: center;
}

.subpageheadarticle h2{
  text-align: center;
  font-size: 2.5em;
  padding: 10px 0px 5px 0px;
  margin: 0;
  color: #67271E;
}

button{
  width: 170px;
  height: 150px;
  text-align: center;
  font-size: 20px;
  border-radius: 15px;
  background-color: #E8C6AA;
  color: #67271E;
  margin-bottom: 15px;
  cursor: pointer;
  transition-duration: 0.4s;
  border: none;
  font-family: malaga, serif;
}

button:hover{
  background-color: #67271E;
  color: #E8C6AA;
}

.teamcontainer{
  width: 100%;
  height: 100%;
}

.teamcontainer h3{
  text-align: center;
  font-family: malaga, serif;
}

.teammember{
  width: 90%;
  background-color: rgb(214,152,105);
  margin: 0 auto;
  display:flex;
  margin-bottom: 10px;
  height: 500px
}

.memberPicCont{
  width: 25%;
  background-color: #67271E;
  color: white;
  padding: 5px;
  font-size: 0.7em;
  text-align: center;
  line-height: 1.4em;
  font-family: lato, sans-serif;
}

.memberPicCont img{
  width: 100%;
}

.membertext{
  width: 75%;
  padding: 7px;
  font-family: lato, sans-serif;
  font-size: 0.9em;
}

.aboutimageDiv{
  background-image: url("images/about-us-pic.jpg");
  background-size: cover;
  width: 80%;
  height: 400px;
  margin: 0 auto;
}

.insightsMainDiv{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.insightArticle{
  width: 45%;
  background-color: #E8C6AA;
  margin: 5px;
  color: #67271E;
  text-align: center;
  padding: 15px;
  border-radius: 10px;
}

.insightArticle a{
  text-decoration: none;
  color: #67271E;
  display: block;
}

.insightArticle h3{
  margin: 0 auto;
  width: 85%;
  border-bottom: 2px solid #67271E;
  padding: 2px 0px 3px 0px;
}

.articlepic1{
  background-image: url("images/bkg_troubled_accounting.jpg");
  background-size: cover;
  width: 70%;
  height: 200px;
  margin: auto;
  border-radius: 5px;
}

.articlepic2{
  background-image: url("images/income-tax-forms.jpg");
  background-size: cover;
  width: 70%;
  height: 200px;
  margin: auto;
  border-radius: 5px;
}

.newsForm{
  width:65%;
  margin: auto;
  margin-bottom: 15px;
  text-align: center;
}

input[type=email]{
  margin: auto;
  margin-bottom: 15px;
  height: 2.5em;
  width: 80%;
  border-radius: 3px;
  border: none;
  background-color: #E8C6AA;
  border-bottom: 2px solid #67271E;
}

input[type=email]:hover{
  border-bottom: 4px solid #67271E;
}

input[type=email]::placeholder{
  text-transform: uppercase;
  font-size: 0.8em;
  color: #67271E;
}

input[type=email]:focus{
  border-bottom: 4px solid #67271E;
  outline: none;
}

.newsForm button{
  height: 70px;
  width:100px;
}

select{
  width: 80%;
  height: 2.5em;
  border: none;
  border-radius: 3px;
  background-color: #E8C6AA;
  border-bottom: 2px solid #67271E;
  color: #67271E;
  font-size: 0.8em;
  margin-bottom: 15px;
  outline: none;
}

input[type=week]{
  width: 80%;
  height: 2.5em;
  border: none;
  background-color: #E8C6AA;
  border-radius: 3px;
  border-bottom: 2px solid #67271E;
  color: #67271E;
}

input[type=week]:focus{
  border: none;
  border-bottom: 4px solid #67271E;
  outline: none;
}

input[type=text]{
  width: 80%;
  height: 2.5em;
  border: none;
  background-color: #E8C6AA;
  border-radius: 3px;
  border-bottom: 2px solid #67271E;
  color: #67271E;
  margin-bottom: 15px;
}

input[type=text]::placeholder{
  color: #67271E;
  font-size: 0.8em;
}

input[type=text]:focus{
  border-bottom: 4px solid #67271E;
  outline: none;
}

select:focus{
  border-bottom: 4px solid #67271E;
}

.articleContainer{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.articleContainer .indivArticlePic{
  background-image: url("images/bkg_troubled_accounting.jpg");
  background-size: cover;
  width: 80%;
  height: 350px;
  margin: auto;
}

.articleContainer p{
  width:80%;
  margin: auto;
  padding-top: 15px;
}

.servicesDiv{
  width: 95%;
  margin: auto;
  padding-top: 10px;
}

.bulletDiv{
  width: 60%;
  margin: auto;
  padding: 15px;
}

.bulletDiv p{
  line-height: 1.3em;
}

.servicesButton{
  width:65%;
  margin: auto;
  margin-bottom: 15px;
  text-align: center;
}

.servicesButton button{
  height: 100px;
}

.contactDiv{
  display: flex;
  flex-wrap: wrap;
}

.buildingimg{
  background-image: url("images/buildingphoto.jpg");
  background-size:cover;
  width:200px;
  height:300px;
  margin: auto;
}

.contactText{
  font-weight: 300px;
  font-size: 1.4em;
  text-align: center;
  margin: 0 auto;
}


/* Adds Code for Pure CSS Hamburger Button */

.menu-link__hamburger {
	margin: 0 auto;
	text-align: center;
	width: 33px;
	float: left;
	transform: translate(0,0);
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

.menu-link__label {
	float: left;
  text-align: center;
	padding-left: .75em;
  color: white;
}

a.menu-link span {
  display: block;
  height: 5px;
  margin-bottom: 5px;
  position: relative;
  background: white;
  border-radius: 3px; /* Adjust the rounding of the hamburger here */
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

a.menu-link span:first-child {
  transform-origin: 0% 0%;
}


a.menu-link span:nth-child(3) {
  transform-origin: 0% 100%;
}

.menu-link.active .menu-link__hamburger {
	transform: translate(10px, 0);
}

.menu-link.active span {
  opacity: 1;
	background: white;
  transform: rotate(45deg) translate(-2px, -1px);
}

.menu-link.active span:nth-child(2) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

.menu-link.active span:nth-child(3){
  opacity: 1;
  transform: rotate(-45deg) translate(0, -1px);
}

nav[role=navigation] {
			clear: both;
			-webkit-transition: all 0.3s ease-out;
			-moz-transition: all 0.3s ease-out;
			-ms-transition: all 0.3s ease-out;
			-o-transition: all 0.3s ease-out;
			transition: all 0.3s ease-out;
		}
		.js nav[role=navigation] {
			overflow: hidden;
			max-height: 0;
		}
		nav[role=navigation].active {
			max-height: 25em;
		}
		nav[role=navigation] ul {
			margin: 0;
			padding: 0;
			border-top: 1px solid #808080;
		}
		nav[role=navigation] li a {
			display: block;
			padding: 0.8em;
			border-bottom: 1px solid #808080;
		}

		@media screen and (min-width:800px) {
			a.menu-link {
			   display: none;
			}
			.js nav[role=navigation] {
				max-height: none;
			}
			nav[role=navigation] ul {
				margin: 0 0 0 -0.25em;
				border: 0;
			}

			nav[role=navigation]  li {
				display: inline-block;
				margin: 0 0.25em;
			}
			nav[role=navigation] li a {
				border: 0;
			}
		}


* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  width: 100%;
  height: 100%;
  position: relative;
  margin: auto;
}

    /* Hide the images by default */
.mySlides {
  display: none;
}



    /* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@media screen and (min-width: 800px){
  nav{
    font-size: 80%;
    float: right;
    padding-right: 5px;
    padding-top: 30px;
  }

  nav ul li{
    height: 50px;
  }

  header img{
    width: 250px;
  }

  nav ul li:hover{
    display:inline-block;
    background-color: #E8C6AA;
    transition: 0.5s;
  }

  nav ul li a:hover{
    color: #67271E;
  }

  .footerDiv{
    display: flex;
    justify-content: space-evenly;
  }

  .footerLogo{
    text-align: center;
    padding: 10px;
    width: 50%;
  }

  .footerLogo img{
    padding-top: 10px;
    width:60%;
  }

  .footerSoc{

    padding: 10px 200px 10px 50px;
    font-family: lato, sans-serif;
    font-weight: 300;
  }

  main{
    max-width: 85%;
    margin: 0 auto;
  }

  .buttondiv{
    justify-content: space-around;
  }

  .subpagehead{
    margin: auto;
    margin-bottom: 15px;
  }

  .subpagehead h2{
    font-size: 3em;
  }

  .subpagehead p{
    font-size: 1.3em;
    width: 85%;
    margin: auto;
  }

  .subpagehead2{
    margin: auto;
    margin-bottom: 15px;
  }

  .subpagehead2 h2{
    font-size: 3em;
  }

  .subpagehead2 p{
    font-size: 1.3em;
    width: 85%;
    margin: auto;
  }

  .servicesDiv{
    font-size: 1.2em;
  }

  input[type=email]{
    height: 40px;
    font-size: 0.9em;
  }

  input[type=week]{
    height: 40px;
    font-size: 0.9em;
  }

  input[type=text]{
    height: 40px;
    font-size: 0.9em;
  }

  select{
    height: 40px;
    font-size: 0.9em;
  }

  .newsForm button{
    width: 160px;
  }

  .teammember{
    width: 700px;
    height: 400px;
  }

  .slide1tes{
    font-size: 1.4em;
  }

  .slide2tes{
    font-size: 1.4em;
  }

  .slide3tes{
    font-size: 1.4em;
  }

  .buildingimg{
    width: 300px;
    height: 450px;
  }

  .contactText{
    font-size: 1.6em;
  }

}

@media screen and (min-width: 900px){
  nav{
    font-size: 1em;
  }
}

@media screen and (min-width: 1000px){
  nav{
    padding-top: 20px;
    font-size: 1.2em;
  }
  nav ul li{
    height: 60px;
  }
}

@media screen and (min-width: 1100px){
  nav{
    font-size: 1.3em;
  }
}


@media screen and (min-width: 1325px){
  nav{
    font-size: 1.5em;
    float: right;
    padding-top: 40px;
    padding-right: 20px;
  }

  nav ul li{
    height: 75px;
  }

  nav ul li:hover{
    display:inline-block;
    background-color: #E8C6AA;
    transition: 0.5s;
  }

  nav ul li a:hover{
    color: #67271E;
  }

  header img{
    width: 400px;
    padding: 10px 0px 10px 10px;
  }

  main{
    max-width: 1200px;
    margin: 0 auto;
  }


  footer{
    background-color: #67271E;
    height:300px;
    color: white;
  }

  .footerDiv{
    display: flex;
    justify-content: space-evenly;
  }

  .footerLogo{
    text-align: center;
    padding: 10px;
    width: 50%;
  }

  .footerLogo img{
    padding-top: 10px;
    width:60%;
  }

  .footerSoc{

    padding: 10px 200px 10px 50px;
    font-family: lato, sans-serif;
    font-weight: 300;
  }

  .topGrid{
    display: grid;
    grid-template-columns: 5fr 4fr;
    grid-template-areas:
      "header image"
      "text1 text1";
    margin: 5px;
  }

  .topGrid .subpagehead{
    grid-area: header;
  }

  .topGrid .subpagehead h2{
    font-size: 4em;
  }

  .topGrid .subpagehead p{
    font-size: 1.7em;
  }

  .topGrid .bigimage{
    grid-area: image;
    background-image: url("images/accountingsupport.jpg");
    background-size: cover;
    height:300px;
    margin: 5px;
  }

  .smallertext{
    font-size: 1.5em;
  }

  .servicesButton h3{
    font-size: 1.5em;
  }

  .servicesButton button{
    height: 100px;
    width: 200px;
  }

  .slide1back{
    height: 600px;
    padding: 150px 75px 150px 75px;
  }

  .slide1tes{
    font-size: 2em;
  }

  .slide2back{
    height: 600px;
    padding: 100px 50px 50px 50px;
  }

  .slide2tes{
    font-size: 2em;
  }

  .slide3back{
    height: 600px;
    padding: 100px 50px 50px 50px;
  }

  .slide3tes{
    font-size: 2em;
  }

  .subpagehead{
    margin: auto;
    margin-bottom: 15px;
  }

  .subpagehead h2{
    font-size: 3.5em;
  }

  .subpagehead p{
    font-size: 1.5em;
    width: 85%;
    margin: auto;
  }

  .subpagehead2{
    margin: auto;
    margin-bottom: 15px;
  }

  .subpagehead2 h2{
    font-size: 3.5em;
  }

  .subpagehead2 p{
    font-size: 1.5em;
    width: 85%;
    margin: auto;
  }

  .buttondiv button{
    width: 180px;
    margin-bottom: 25px;
  }

  .servicesDiv{
    font-size: 1.3em;
    width: 85%;
  }

  input[type=email]{
    height: 50px;
    font-size: 1em;
  }

  input[type=week]{
    height: 50px;
    font-size: 1em;
  }

  input[type=text]{
    height: 50px;
    font-size: 1em;
  }

  select{
    height: 50px;
    font-size: 1em;
  }

  .newsForm button{
    width: 180px;
  }

  .insightArticle{
    width: 30%;
  }

  .articleContainer{
    display: grid;
    grid-template-columns: 2fr 3fr;
  }

  .indivArticlePic{
    width: 100%;
  }

  .indivArticleText {
    width: 95%;
  }

  .teamcontainer{
    display:flex;
    flex-wrap: wrap;
  }

  .teamcontainer h3{
    width: 100%;
  }

  .teammember{
    width: 550px;
  }

  .aboutContentDiv{
    display: flex;
    flex-wrap: wrap;
  }

  .aboutContentDiv .subpagehead{
    width: 85%;
  }

  .aboutContentDiv .subpagehead p{
    font-size: 1.2em;
  }

  .aboutContentDiv .subpagehead2{
    width: 55%;
  }

  .aboutContentDiv .subpagehead2 p{
    font-size: 1.2em;
  }

  .aboutimageDiv{
    width: 45%;
    margin-top: 20px;
  }

}