@charset "utf-8";

@media screen and (max-width: 1200px){
    #button-container{display: none}
    .card-img{height: 200px;}
    #getstarted{display: inline-block}
    h1{font-size: 28px}
    h2{font-size: 24px}
    h3{font-size: 20px}
    p{font-size: 15.5px}
    .list{font-size: 15.5px}
    #nav-container{flex: 2!important}
}
@media screen and (max-width: 1000px){
    .container-padded{flex-direction: column; align-items: center} 
    .container{flex-direction: column; align-items: center}
    #elderly-couple{
        width: 75%; 
        margin: auto; 
        position: relative; 
        float: none;
    }
    footer{flex-direction: column; align-items: center}
    .main-flex-left{padding: 40px 7.5% 20px; max-width: 700px; min-width: 0px; width: 85%}
    .main-flex-right{padding: 20px 7.5% 40px; max-width: 700px; min-width: 0px; width: 85%}
	#overlay-right{
		width: auto;
		max-width: 400px;
		left: -25px;
		top: -175px;
	}
    .reverse{flex-flow: column-reverse;}
}
@media screen and (max-width: 975px){
    .card{
        margin: 0;
        width: auto;
        max-width: 400px;
        min-height: 0px;
        padding: 30px;
    }
    #card-center{margin: 30px 0}
	.list{padding-left: 0}
	.list-nested{padding-left: 0}
    #service-cards{flex-direction: column; align-items: center}
}
@media screen and (max-width: 850px){
    .activeMenuItem{border: 1px solid white; border-radius: 35px}
    .banner{height: 300px}
    #bars{display: block}
    #button-container{display: flex}
    footer{top: 100px; position: relative;}
    header{position: fixed}
    #header-button{display: none}
    .logo{height: 60px;}
    main{top: 100px; position: relative;}
    #nav-container{
        align-items: flex-start;
        background: linear-gradient(60deg, #00a88e, #0047BA);
        box-shadow: 0px 2.5px 5px rgba(0, 0, 0, 0.5);
        display: none;
        height: 100vh;
        position: absolute;
        right: 0;
        text-align: center;
        top: 74px;
        width: 100vw;
        max-width: 300px;
        z-index: 4;
    }
    .nav{padding-top: 35px}
    .nav li{
        display: block;
        color: white;
        padding: 15px 25px;
    }
    /*p{text-align: justify}*/
    #sub-header2{padding: 0;}
}
@media screen and (max-width: 800px){
    #social-media{display: none}   
}
@media screen and (max-width: 650px){
	.accordionLabel{font-size: 18px;}
    .banner{height: 250px}
    .hero-heading{font-size: 40px;}
    h1{font-size: 22px}
    h2{font-size: 20px}
    h3{font-size: 18px}
    p{font-size: 14.5px; line-height: 1.5em}
    .list{font-size: 14.5px; line-height: 1.5em}
	#nav-container{width: 100vw!important; max-width: 650px;}
	#overlay-img{
		max-width: 400px;
		width: 100%;
		margin-top: 0px;
		margin-bottom: 25px;
	}
	#overlay-left{
		max-width: 400px;
		width: auto;
		min-width: 0px;
		z-index: 0;
		right: 0px;
		top: 0px;
	}
	#overlay-right{
		width: auto;
		max-width: 400px;
		left: 0px;
		top: 0px;
		padding: 25px;
	}
}
@media screen and (max-width: 550px){
    .card{max-width: 200px;}
    .hero-heading{font-size: 32px;}
    #office-address{display: none}
    #office-hours{display: none}
}