/* Card Based Layout - Base styles */

body {
	background: hsl(0, 0%, 30%);
}

.masthead {
	background: hsl(0, 0%, 20%);
}

.logo {
	/* margin-top: 25px; */
	padding-top: 2em;
    width: 150px;
    max-width: 150px;
    height: 207px;
    max-height: 207px;
}



.site-branding h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 1em;
    color: #0FF500;
    /* letter-spacing: .6em; */
    text-align: center;
    padding-top: 40px;
	padding-bottom: 0;

}

.site-branding h2 {
    color: #E8E8E8;
    /* margin-top: 1em; */
    text-align: center;
    font-size: .65em;
    /* letter-spacing: .6em; */
    font-family: Verdana, Geneva, sans-serif;
	margin-top: -1em;
}

.site-branding h3 {
    color: #E8E8E8;
    font-size: 1em;
    text-align: center;
	padding-bottom: 2em;
	text-decoration: none;
}

a[href^="tel"] {
  color: inherit; /* Inherit text color of parent element. */
  text-decoration: none; /* Remove underline. */

}

.runner {
	background: black;
	/* background: red; */
}



.main-nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    /* background: hsl(0, 0%, 15%); */
	background: black;
}

.main-nav li {
    padding-top: .5em;

}

.main-nav li a {
    display: block;
    text-decoration: none;
    color: #99FF00;
		padding: .6em 1em;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
		font-size: 0.9em;
}

.main-nav li a:hover {
	background: hsl(0, 0%, 30%);

}

a.active {
	background: hsl(0, 0%, 30%);
}




/* For Off Canvas Menu*/
.main-nav {
	height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
	position: fixed; /* Stay in place */
    z-index: 2; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    /* padding-top: 60px; /* Place content 60px from the top */ */
    transition: 10s; /* 0.5 second transition effect to slide in the sidenav */
}

.main-nav a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 25px;
	color: #818181;
	display: block;
	transition: .2s;
}

.main-nav .closebtn {
    position: absolute;
    top: 1.5em;
    right: 26px;
    font-size: 36px;
    margin-left: 50px;
}

.trigger {
	position: fixed;
	display: block;
	bottom: 1.5em;
	left: 0;
	transition: 10s;
	padding: .1em .5em 2.5em .5em;
	color: white;
	background: hsl(0, 0%, 10%);
	border: none;
	transform: rotate(90deg);
	z-index: 2;
}
/* #wrapper {
    transition: margin-left .5s;
    padding: 20px;
} */

.hero img {
    max-width: 75em;
	margin: 2em 0;
	 -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
	z-index: 0;
}







.card {
	background: Inherit;
	margin-bottom: 2em;
}

.card.welcome {
	color: black;
}

.card a {
	color: black;
	text-decoration: none;
	transition: color 2s ease-in-out;
}

.card p a {
	color: #0FF500;
}

.card a:hover {
	/* box-shadow: 3px 3px 8px hsl(0, 0%, 62%); */
	color: #E8E8E8;
	/* font-weight: bold; */

}

.card-content {
	padding: 1.4em;
}

.card-content h2 {
	margin-top: 0;
	margin-bottom: .5em;
	font-weight: normal;
	color: #E8E8E8;
}

.card-content p {
	font-size: 95%;
}

.principal {
	color: black;
}

#testimonials aside{
  display:none;
}

.quote {
	/* margin: 0px; */
    background-color: #404040;
    color: #E8E8E8;
    /* min-height: 800px;
    max-height: 1500px; */
}

blockquote {
	padding: 1.4em;
	font-weight: normal;
	font-size: 95%;
}

.quote-attrib {
	margin-left: 2em;
	padding-bottom: 4em;
}

li {
	list-style: none;
}

em {
	margin-top: -4em;
	margin-left 2em;
}

aside.quote::before {
    position: relative;
    content: '\201c'; color: #0FF500;
    line-height: .5em;
    top: 40px; left: 8px;
    font-size: 5em; font-family: serif;
}

aside.quote p::after {
    content: '\201d'; font-family: serif;
}

div .quote-attrib::before {
    content: '\2014';
    top: -1px;
}





footer {
	background: hsl(0, 0%, 15%);
	margin-top: 2em;
	padding: 1em;
	margin-bottom: 0;
}

.foot h4 {
	color: rgba(15,245,0,.7);
}

footer a {
    display: block;
    color: rgba(255,255,255,0.6);
    font-size: 1em;
	text-decoration: none;
	transition: color 0.3s ease-in-out;
	padding-bottom: .5em;
}

footer a span {
    font-weight: bold;
    color: rgba(255, 255, 255, 0.3);
}

footer a:hover {
	color: rgba(255,255,255,1);
}

.foot ul {
	list-style-type: none;
}
.foot li a {
	text-decoration: none;
}

.copyright-container {
	background: hsl(0, 0%, 15%);
	margin: 0;
	padding-top: 1em;
	padding-bottom: 6em;
}
.copyright p {
	color: rgba(15,245,0,.7);
	text-align: center;
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
}
/* Flexbox code */

@media screen and (min-width: 40em) {

	/* .masthead img {
       display: flex;
       flex-direction: row;
       justify-content: flex-start;
       margin-left: 4em;
       margin-right: 0;
       padding-bottom: 3em;
       padding-top: 3em;
   }

   .site-branding h1 {
       margin-top: -10em;
	}

	.site-branding h3 {
		padding-bottom: 5em;
	} */

	.masthead-container {
		display: flex;
		flex: 0 1 calc(50% - .5em)
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.logo {
		margin: 0;
		padding: 0;
		padding-top: 2em;
		flex: 0 1 auto;
		margin-bottom: 2em;

	}


	.site-branding {
		flex: 0 1 auto;
		flex-direction: column;
	}




	.site-branding h1 {
		padding-top: 2em;
		font-size: 1.2em;
		letter-spacing: .1em;
	}

	.site-branding h2 {
		padding-top: 1em;
		font-size: .7em;
		letter-spacing: .1em;
	}

	.site-branding h3 {
		padding-top: 2em;
		font-size: 1.5em;
		letter-spacing: .1em;
	}

	.runner {
		padding-top: 3em;
	}



   .main-nav ul {
       display: flex;
	   flex-direction: column;
       flex-wrap: wrap;
       justify-content: space-around;
	   padding-top: 8em;
   }

   .main-nav li {
       flex: 1 0 auto;
       text-align: center;
   }



	.cards {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: -1em;
	}

	.card {
		display: flex;
		flex: 0 1 calc(50% - .5em);
		/* width: calc(33% -1em); */
		margin-bottom: 1em;
	}
	.card.welcome {
		flex: 0 1 auto;
	}

	.principal {
		flex: 0 1 auto;
		flex-direction: column;
	}

	.footer-container {
		display: flex;
		justify-content: space-between;
	}

	.foot {
		/* flex: auto; */
		flex: 0 1 calc(50% - .5em);
	}
}

@media screen and (min-width: 75em) {

	.logo {
		display: flex;
		flex: 0 1 calc(33% - 1em);
		margin-bottom: 2em;
	}

	.site-branding {
		display: flex;
		flex: 0 2 calc(66% - .5em);
		flex-direction: column;
	}

	.site-branding h1 {
	    font-size: 1.5em;
	    letter-spacing: .2em;
	    padding-top: 40px;
		margin-bottom: 0;
	}


	.site-branding h2 {
	    margin-top: 5px;
	    font-size: .9em;
	    letter-spacing: .2em;
	  }

	.site-branding h3 {
	    font-size: 1em;
	    letter-spacing: .5em;
	}

	.runner {
		padding-top: 1.5em;
	}

	.trigger {
		display: none;
	}

	div.nav-container {
		display: flex;
	}
	.main-nav .closebtn {
	    position: absolute;
	    top: 0;
	    right: 0;
	    font-size: 0;
	    margin-left: 0;
		display: none;
	}

	.main-nav li.close {
		display: none;
	}

	.main-nav {
		position: relative;
		/* height: auto; */
		width: 75em;
		padding: 0;
		/* margin: 0; */
		display: flex;
		/* flex-direction: row; */
		/* overflow: hidden; */
		/* justify-content: space-between; */
	}

	.main-nav ul {
	    flex-direction: row;
		padding-top: 1em;
		width: 75em;
	}

	.main-nav li {
	    /* flex: 1 0 auto;
	    text-align: center; */
		padding-top: 0;
		/* justify-content: flex-end; */
	}

	.main-nav li a {
		    padding: .6em .5em;
		/* padding: 8px 8px 8px 32px; */
		/* flex: auto; */
		/* justify-content: space-around; */
		/* justify-content: flex-end; */
	}

	.cards {
		margin-top: inherit;
	}

	.card {
		flex: 0 1 calc(33% - 1em);
		/* width: calc(33% -1em); */
		margin-bottom: 2em;
	}

	.card.welcome {
		flex: 0 1 calc(33% - 1em);
	}

	.principal-quote-container  {
		display: flex;
		justify-content: space-between;
		/* resize: horizontal; */
		/* overflow: hidden; */
		/* margin: 1em; */

	}

	.principal {
		display: flex;
		flex: 0 2 calc(66% - .5em);
		margin-bottom: 2em;
		/* margin-right: 1em; */
	}

	.quotes {
		display: flex;
		flex: 0 1 calc(33% - 1em);
		margin-bottom: 2em;
		/* margin-left: 1em; */
	}

	.foot {
		/* flex: auto; */
		flex: 0 1 calc(33% - 1em);
	}

}