* {
    box-sizing: border-box;
}

body {
    max-width: 1920px;
    margin: 0 auto;
    background-color: rgb(240, 240, 240);
    width: 100%;
    font-family: 'Karla', sans-serif;
}

img{
    max-width:100% !important;
}

#slide{
    z-index:1;
}

header {
    width: 100%;
    max-width: 1920px;
    background-color: white;
    top: 0;
    height: 230px;
    display: flex;
    z-index: 7;
    margin-top: 0;
}
.btn-home{
    justify-self: center;
    text-align: center;
    background-color: #049344;
    color: white;
    text-decoration: none;
    font-size: 46px;
    font-weight: 700;
    border-radius: 25px;
    padding: 20px;
    width: 320px;
}

.logo {
    margin-top: 40px;
    margin-bottom: 40px;
    display: grid;
    grid-template-columns: 150px 620px;
    width: 800px;
    grid-gap: 20px;
    margin-left: auto;
    margin-right: auto;
}

.logo img {
    width: 150px;
    height: 150px;
}

.fb img {
    padding-top: 20px;
    width: 60px;
    height: 60px;
    padding-right: 20px;
}

.title {
    font-size: 60px;
    font-weight: 900;
    color: #A62035;
    margin-top: 10px;
    margin-bottom: 0;
}

.subT {
    font-size: 50px;
    color: #049344;
    margin-top: 0;
    margin-bottom: 0;
}

.logoName {
    vertical-align: middle;
}

.logo a {
    width: 150px;
}

main {
    background-color: white;
}

.bluebox {border:#06F 2px solid; font-weight:bold; text-align:left; padding:5px; margin-bottom:10px; background-color:#FFF; border-radius:10px;}

.topnav {
    display: none;
}

/*Use the following for top drop-down nav
Change the background-color in #nav to change the color of the navigation bar
Change the background-color in #nav ul li ul to change the background color of the dropdown menus
These values do also need to be changed further down, in the 600px, 400px, and 300px wide sections 
*/
/* -------------------- Start Navigation -------------------- */
#nav{
    position:relative;
    z-index:2;
	width: 100%;
	background-color: #049344;
	padding:1% 0;
    text-align: center;
}

#nav > a{
	display: none;
}

#nav li{
	position: relative;
	list-style-position:inside;
	list-style-type:none;
}
#nav li a{
	padding-top: 0;
    font-size: 32px;
    text-align: center;
    text-decoration: none;
    color: white;
}

/* first level */

#nav > ul{
	text-align:center;
	padding-left:0px !important;
	margin:0 !important;
}
#nav > ul > li{
	margin:0px 25px;
	padding:4px 8px;
	height: 100%;
	display:inline-block;
}
#nav > ul > li > a{
	height: 100%;
	text-align: center;
}
#nav > ul > li:not( :last-child ) > a{
	
}

#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a{
	
}

	/* second level */

#nav li ul{
	background-color:#ccc;
	display: none;
	position: absolute;
	top: 100%;
	margin-left:0 !important;
	padding-left:0 !important;
	width:220px;
	text-align:left;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}
#nav li ul li{
	padding:10px 5px;
}
#nav li:hover ul{
	display: block;
	left: 0;
	right: 0;
}
#nav li:not( :first-child ):hover ul{
	left: -1px;
}
#nav li ul a{
	color:#000;
	padding: 5px 0px;
	font-size:24px;
}
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a
{
}
/* -------------------- End Navigation -------------------- */

.banner-img {
    text-align: center;
    background-image: url("../img/banner.jpg");
    background-position: center;
    background-size: cover;
    height: 520px;
    color: white;
}

.banner-img h1 {
    font-size: 100px;
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: 0px;
    padding-top: 100px;
}

.banner-img h2 {
    font-size: 44px;
    margin-bottom: 40px;
    margin-top: 0;
}

.banner-img a {
    text-decoration: none;
    color: white;
    font-size: 48px;
    border: white 3px solid;
    padding-left: 30px;
    padding-right: 30px;
    text-align: center;
}

.banner-img a:hover {
    font-size: 50px;
}

.button-grid {
    width: 80%;
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
    align-items:center;
    row-gap: 20px;
}

.button-grid a {
    justify-self: center;
    text-align: center;
    background-color: #049344;
    color: white;
    text-decoration: none;
    font-size: 46px;
    font-weight: 700;
    border-radius: 25px;
    padding: 20px;
    width: 360px;
}


/*.button-grid a:hover {
    font-size: 48px;
}**/

.content h2 {
    font-size: 65px;
    font-weight: 700;
    text-align: center;
}

.content-grid {
    border-top: grey 1px solid;
    border-bottom: grey 1px solid;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 420px 420px 420px 420px;
    margin-bottom: 30px;
}

.event-grid {
    display: grid;
    grid-template-columns: 25% 50% 25%;
    
}

.fixed-grid{
    display:-ms-grid;
    display:grid;
    -ms-grid-columns:1fr 1fr;
    grid-template-columns:1fr 1fr;
}

.textSide {
    padding-left: 150px;
    padding-right: 150px;
    padding-top: 50px;
    padding-bottom: 20px;
    position: relative;
    background-color: white;
}

.textSide h3 {
    font-size: 52px;
    color: #A62035;
    font-weight: 700;
    margin: 0;
}

.textSide p {
    font-size: 36px;
    margin-top: 20px;
    margin-bottom: 25px;
}

.textSide a {
    color: #049344;
    font-size: 36px;
    font-weight: 700;
    margin: 0;
}

.pictureSide {
    position: relative;
    overflow: hidden;
}

.pictureSide img {
    width: 960px;
    height: 620px;
}

.report img {
    width: 100%;
}

.bot-content-grid {
    display: grid;
    grid-template-columns: 45% 55%;
    margin-bottom: 50px;
    margin-top: 50px;
}

.bot-left {
    text-align: center;
    padding: 20px 150px;
}

.mid {
    color: #A62035;
    font-size: 32px;
    font-weight: 700;
}

.leftleft {
    width: 515px;
}

.bot-left img {
    width: 337px;
    height: 150px;
}

.bot-right {
    margin-top: 20px;
    margin-right: 100px;
    padding: 0px 30px 20px;
    border: #049344 5px solid;
}

.bot-right-cont {
    display: grid;
    grid-template-columns: 2fr 1fr;
}

.bot-right-cont p {
    font-size: 32px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 10px;
}

.outreach {
    text-align: center;
}

footer {
    background-color: #E6E6E6;
    padding-top: 20px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 10px;
}


/*** About page ***/

.aboutpage {
    margin-left: 100px;
    margin-right: 100px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    margin-bottom: 30px;
}

.aboutpage h3{
    font-size: 30px;
}

.left-content {
    padding-right: 50px;
    border-right: 1px solid grey;
    margin-bottom: 20px;
}

.left-content h2 {
    font-size: 42px;
    font-weight: 700;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
}

.left-content p {
    font-size: 24px;
}

.left-content img {
    width: 150px;
}

.right-content {
    padding-left: 50px;
    margin-top: 50px;
}

.right-content a {
    font-size: 24px;
    text-decoration: none;
    border-bottom: 1px solid #d7d2cb;
    font-weight: 500;
    color: #0067b9;
    transition: all .3s ease;
    background-color: transparent;
}

.right-content a:hover {
    background-color: #dae6f0;
    color: #0b395e;
}

.mobOnly {
    display: none;
}

.footNav {
    text-align:center;
    padding:1% 0;
}

.footNav a{
    color:black;
    text-decoration:none;
    font-size:26px;
    padding:1% 2%;
    margin:0 3%;
}

.footContent {
    font-size: 20px;
    color: #A62035;
}

.creds {
    text-align: center;
    font-size: 22px;
    font-weight: 400;
    padding-top:2%;
}

.contact {
    text-align: center;
}


/**Contact page**/

.contactPage{
    margin-left: 100px;
    margin-right: 100px;
    font-size:22px;
}

.contactPage h2{
    font-size: 42px;
    font-weight: 700;
    margin-top: 50px;
    margin-bottom: 20px;
}

.contactPage h3{
    font-size: 32px;
    font-weight: 700;
}

.contactPage h4{
    font-size: 26px;
}

.reports-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.locate{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.left-content li{
    font-size: 18px;
}

.jobs{
    display:-ms-grid;
    display:grid;
    -ms-grid-columns:1fr 1fr;
    grid-template-columns:1fr 1fr;
}

.jobs div{
    padding:2% 5%;
}

.apartment{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.footer-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
}

.exhibit-hours{
    width:350px;
    padding:2%;
    background-color:#049344;
    color:#fff;
    position:relative;
    float:right;
    text-align:center;
    border-radius:16px;
    margin:1% 2%;
}

@media only screen and (max-width: 1625px) {
    .nav {
        height: 48px;
        padding-top: 5px;
        margin-bottom: 25px;
    }
    .nav a {
        font-size: 34px;
        padding-right: 21px;
        padding-left: 21px;
    }
    .bot-right-cont {
        grid-template-columns: 3fr 2fr;
    }
    .phone {
        text-align: right;
    }
    .textSide h3 {
        font-size: 50px;
    }
    .textSide p {
        font-size: 32px;
    }
    .textSide a {
        font-size: 32px;
    }
}

@media only screen and (max-width:1471px) {
    .bot-right-cont p {
        font-size: 28px;
    }
    .leftleft {
        font-size: 26px;
        padding-right: 120px;
    }
}

@media only screen and (max-width: 1380px) {
    .textSide {
        padding-left: 100px;
        padding-right: 100px;
    }
    .textSide p {
        font-size: 32px;
        margin-top: 5px;
        margin-bottom: 10px;
    }
    .textSide a {
        font-size: 32px;
    }
    .bot-right {
        margin-right: 50px;
    }
    .bot-right-cont {
        grid-template-columns: 3fr 2fr;
    }
    .bot-right-cont p {
        font-size: 25px;
        margin-bottom: 15px;
    }
    .button-grid {
        width: 90%;
    }
    .button-grid a {
        width: 250px;
        font-size: 42px;
    }
}

@media only screen and (max-width: 1250px){
    .reports-grid{
         grid-template-columns: 1fr 1fr;
    }
    
    .button-grid{
        grid-template-columns:1fr 1fr;
        grid-gap:10px;
    }
    
    .apartment{
		margin-top: 20px !important;
		grid-template-columns: 1fr ;
		text-align: center;
	}
    .logo {
        width: 700px;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    header {
        height: 210px;
    }
    .banner-img {
        height: 450px;
    }
    .banner-img h1 {
        padding-top: 80px;
        font-size: 95px;
    }
    .banner-img h2 {
        font-size: 42px;
    }
    .banner-img a {
        font-size: 46px;
    }
    .content h2 {
        font-size: 58px;
        margin-bottom: 24px;
    }
    .textSide h3 {
        font-size: 42px;
    }
    .bot-left {
        padding: 20px 20px;
    }
    .foot-logo {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .creds p {
        margin-bottom: 0;
    }
    .footTitle {
        font-size: 25px;
    }
    .footContent {
        font-size: 19px;
    }
}
@media only screen and (max-width: 1118px) {
    .bot-right {
        margin-right: 40px;
    }
    .bot-right-cont p {
        font-size: 23px;
        margin-bottom: 14px;
    }
}

@media only screen and (max-width: 1031px) {
    
    .bot-right-cont {
        grid-template-columns: 1fr;
    }
    .content-grid {
        grid-template-rows: 450px 450px 450px 450px 450px;
    }
    .footTitle {
        font-size: 23px;
    }
    .footContent {
        font-size: 23px;
    }
    .textSide h3 {
        font-size: 38px;
    }
    .textSide p {
        font-size: 28px;
    }
    .textSide a {
        font-size: 28px;
    }
    .footTitle {
        font-size: 22px;
    }
    .footContent {
        font-size: 21px;
    }
    .reports-grid{
         grid-template-columns: 1fr;
         text-align: center;
        
    }
}

@media only screen and (max-width: 925px) {
    /* -------------------- Start Navigation -------------------- */
	#nav{
        position: relative;
    }
	#nav > a{
	}
	
	#nav:not( :target ) > a:first-of-type,
	#nav:target > a:last-of-type{
		display: block;
		width:100%;
		text-align:center;
		color:#fff;
		font-size:20px;
		padding:5px 0px;
	}
	
	#nav a{
		font-size:18px;	
	}
 
    /* first level */
 
    #nav > ul{
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
		background-color:#000;
		margin-top:8px !important;
		padding-bottom:10px;
    }
	#nav:target > ul{
		display: block;
	}
	#nav > ul > li{
		width: 100%;
		float: none;
		margin:0px !important;
	}

    /* second level */
 
    #nav li ul{
        position: static;
		width:98%;
		margin:0 !important;
		text-align:center;
		padding:0 !important;
    }
	#nav li ul a{
		padding:0.5em 0;
		margin:0.25em 0;
	}
	/*End Navigation*/
    .active {
        background-color: #04AA6D;
        color: white;
    }
    .banner-img h1 {
        font-size: 80px;
    }
    .banner-img h2 {
        font-size: 36px;
    }
    .banner-img a {
        font-size: 36px;
    }
    .banner-img {
        height: 400px;
    }
    .button-grid a {
        width: 200px;
        font-size: 32px;
    }
    
    .fixed-grid{
        -ms-grid-columns:1frr;
        grid-template-columns:1fr;
    }
    .content h2 {
        font-size: 55px;
    }
    .content-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 230px 400px 230px 400px 230px 400px 230px 400px 230px 400px;
    }
    .pictureSide {
        width: 90%;
        margin-left: auto;
        margin-bottom: 30px;
        margin-right: auto;
    }
    .textSide {
        padding-top: 20px;
    }
    .hideMob {
        display: none;
    }
    .mobOnly {
        display: inline;
    }
    .bot-content-grid {
        grid-template-columns: 1fr;
    }
    .leftleft {
        padding-right: 0;
        width: 100%;
    }
    .bot-right {
        margin-left: 40px;
    }
    .bot-right-cont {
        grid-template-columns: 3fr 2fr;
    }
    header {
        height: 190px;
    }
    .content {
        text-align: center;
    }
    .address {
        text-align: left;
    }
    .logoTx {
        width: 90%;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .logoLink img {
        width: 95%;
    }
    .footNav {
        margin-bottom: 20px;
    }
    
    .aboutpage {
        display: grid;
        grid-template-columns: 1fr;
    }
    
    .left-content {
        padding-right: 0;
        border-right: 0;
        margin-bottom: 5px;
        text-align: center;
    }
    
    .right-content{
        text-align: center;
        padding-left: 0;
        margin-bottom: 20px;
        margin-top: 20px;
    }
    
    .contactPage{
        margin-left:25px;
        margin-right:25px;
    }
    
    .jobs{
        -ms-grid-columns:1fr;
        grid-template-columns:1fr;
    }

}

@media only screen and (max-width: 800px) {
    header {
        height: 170px;
    }
    
    .exhibit-hours{
        width:90%;
        padding:2%;
        background-color:#049344;
        color:#fff;
        position:relative;
        float:right;
        text-align:center;
        border-radius:16px;
        margin:1% 3%;
    }
}

@media only screen and (max-width: 735px) {
    .banner-img h1 {
        font-size: 64px;
    }
    .banner-img h2 {
        font-size: 30px;
    }
    .banner-img a {
        font-size: 30px;
    }
    .banner-img {
        height: 350px;
    }
    .button-grid {
        grid-template-columns: 1fr;
    }
    .button-grid a {
        padding: 10px;
        margin-bottom: 12px;
    }
    header {
        height: 160px;
    }
    .content h2 {
        font-size: 45px;
    }
}

@media only screen and (max-width: 705px) {
    header {
        height: 140px;
    }
    
    .aboutpage{
        margin-left: 50px;
        margin-right: 50px;
    }
    
    .contactPage {
        margin-left: 50px;
        margin-right: 50px;
    }
}

@media only screen and (max-width: 635px) {
    .textSide {
        padding-left: 50px;
        padding-right: 50px;
    }
    .bot-right-cont {
        grid-template-columns: 1fr;
    }
    
    .locate{
    display: grid;
    grid-template-columns: 1fr;
}
    
}

@media only screen and (max-width: 603px) {
    header {
        height: 130px;
    }
    .banner-img h1 {
        font-size: 50px;
        padding-top: 70px;
    }
    .banner-img h2 {
        font-size: 24px;
    }
    .banner-img a {
        font-size: 25px;
    }
}

@media only screen and (max-width: 533px) {
    header {
        height: 120px;
    }
    .textSide {
        padding-left: 10px;
        padding-right: 10px;
    }
    .textSide h3 {
        font-size: 32px;
    }
    .textSide p {
        font-size: 24px;
    }
    .textSide a {
        font-size: 24px;
    }
}

@media only screen and (max-width: 500px) {
    header {
        height: 110px;
        padding-left: 10px;
    }
    .aboutpage{
        margin-left: 30px;
        margin-right: 30px;
    }
    
    .contactPage{
        margin-left: 30px;
        margin-right: 30px;
    }
}

@media only screen and (max-width: 450px) {
    header {
        height: 95px;
    }
}

@media only screen and (max-width: 450px) {
    header {
        padding-top: 10px;
    }
}

@media only screen and (max-width: 420px) {
        .banner-img h1 {
            padding-top: 60px;
        }
        .bot-left img {
            width: 300px;
        }
        header {
            height: 85px;
        }
}