html,
body {
	margin: 0 !important;
	padding: 0;
}

* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	overflow-y: scroll;
	overflow-x: hidden;
	height: 100%;
}

body {
  margin: 0;
  font-family: Barlow;
  font-size: 20px;
  color: #0285B6;
  line-height: 1.75;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	font-family: Comfortaa;
	margin: 0;
	padding: 0.5rem 2rem;
	display: block;
	line-height: 1.75;
	margin-bottom: 16px;
}

h4,
h5,
h6,
p {
	font-size: 20px;
	padding: 0.5rem 2rem;
	font-family: Montserrat;
}


h1 {
	font-size: 32px;
	background-color: #119B77;
	color: white;
}
h2 {
	font-size: 28px;
	color: #0285B6;
	text-transform: uppercase;
}
h3 {
	font-size: 24px;
	color: #FE8654;
}
h4 {
	font-style: italic;
	text-align: center;
	font-weight: bold;
}
h5 {
	display: block;
	text-transform: uppercase;
	text-align: center;
	font-weight: bold;
}
h6 {
	font-weight: bold;
}

hr {
	margin: 0;
}

#left-col {
	padding: 1rem;
}

#right-col {
	padding: 0.5rem;
}

#left-col img {
	width: 70vw; 
	max-width: 40%;
	height: auto;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

header {
	position: fixed;
	top: 0;
	z-index: 1;
	width: 100%;
	display: block;
	background-color: white;
}

header .progress-container {
	width: 100%;
	height: 8px;
	background: #E5E5E5;
}

header .progress-bar {
	height: 8px;
	width: 0%;
	background-image: linear-gradient(to right, #0285B8, #0285B8, #119B77, #119B77, #119B77, #FE8654, #FE8654, #FE8654, #FE8654);
}
	
header,
.main-content-home,
footer {
	margin: 0;
	padding: 0;
}

header,
header #left-col,
header #right-col {
	width: 100%;
	text-align: center;
	background-color: white;

}
header .hamburger div {
    width: 40px;
    height:3px;
    background: #5E5E5E;
    margin: 8px;
    transition: all 0.3s ease;
}


header .hamburger {
	display: none;
}

header nav {
	text-align: center;
	padding: 0;
	margin: 0;
	height: 51px;	
    z-index: 10;
}

header nav a,
header nav a:hover { color: #3E3E3E; }

header nav .topnav {
	padding: 0;
	list-style-type: none;
	display: inline-block;
	margin: 0 auto;
}

header nav .topnav li {
	color: #fff;
	float: left;
	position: relative;
	text-decoration: none;
	transition-duration: 0.25s;
	display: inline;
}
  
header nav .topnav li a {
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 0.5rem 2rem;
	color: #3E3E3E;
	background-color: white;
}

header nav .topnav li a:hover {
	background-color: #D7D7D7;
	text-decoration: none;
}


header nav .topnav li:hover,
header nav .topnav li:focus-within {
    cursor: pointer;
}

header nav .topnav li:focus-within a {
	outline: none;
}

header nav .topnav li ul {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	transition: all 0.5s ease;
	left: 0;
	display: none;
	padding: 0;
	box-shadow: 4px 8px 16px gray;
	background-color: white;
}

header nav .topnav li:hover ul,
header nav .topnav li:focus-within ul {
	visibility: visible;
	opacity: 1;
	display: block;
}

header nav .topnav li ul li {
	clear: both;
	min-width: 100%;
	text-align: left;
}

header nav .topnav li ul li a {
	color: black;
}

header nav .topnav ul {
    width: auto;
    white-space: nowrap;
}

.header-top {
	position: fixed;
	z-index: 1;
	width: 100%;
}
header.top, .header-top-hidden {
	min-height: 90px;
}

.header-top-hidden {
	visibility: hidden; 
}

.page-wrap, .header-wrap {
	width: 100%;
	min-width: 14rem;
	margin: 0 auto;
	padding: 0;
}

.header-top-hidden .header-wrap {
	width: 100%;
	padding: 0;
}
.header-wrap {
	position: relative;
	padding: 0; 
}

.header-content {
	background: white;
}

.page-wrap {
	position: relative;
}

.toggle .line1{
    transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
    transition: all 0.7s ease;
    width:0;
}
.toggle .line3{
    transform: rotate(45deg) translate(-5px,-6px);
}

.main-content,
.main-content-home {
	position: relative;
	display: block;
	padding: 13rem 0 0;
}

.main-content-home img {
	width: 100%;
	height: auto;
	margin: auto;
}

.main-content-home video {
	width: 100%;
	height: auto;
    padding: 0;
    margin: 0;
}

.main-content-home table {
	margin: 0 auto;
}
.main-content-home table td {
	padding: 8px;
}

.main-content-home table img {
	height: 54px;
	width: auto;
}

#our-hls,
#our-hls-mob {
	width: 90%;
	text-align: center;
	margin: 0 auto;
	padding: 0;
}

#our-hls p,
#our-hls-mob p {
	font-family: Barlow;
}

#our-hls-mob {
	display: none;
	padding-left: 10%;

}

.tablink,
.accordion {
	background-color: #D7D7D7;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 8px 16px;
	margin-bottom: 16px;
	font-weight: bold;
}

.tablink {
	float: left;
	width: 33.3333%;
}

.accordion {
	display: block;
	width: 90%;
	font-size: 20px;
	text-align: center;
	margin: 0 auto;
	margin-bottom: 0;
}

.tablink:hover,
.accordion:hover,
.accordion.active {
	background-color: #E5E5E5;
}

.tablink img,
.accordion img {
	height: 80px;
	width: auto;
	padding-right: 16px;
}

.tabcontent,
.panel {
	display: none;
	padding: 16px;
	text-align: center;
}

.tabcontent {
	background-color: #E5E5E5;
}

.panel {
	background-color: white;
}

.accordion {
	width: 100%;
	background-color: white;
}
.panel {
  overflow: hidden;
}



.voices {
	margin: 0;
}

.flip-card {
	background-color: transparent;
	width: 240px;
	height: 284px;
	perspective: 1000px;
	display: inline-block;
}

.flip-card h5,
.flip-card p {
	font-family: Barlow;
}

.flip-card img {
	width: 240px;
	height: auto;
	padding: 8px;
}

.flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.6s;
	transform-style: preserve-3d;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
	transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.flip-card-front {
	background-color: #D7D7D7;
	color: black;
}

.flip-card-back {
	color: white;
	transform: rotateY(180deg);
	padding: 100px 0;
}

.main-content {}

.main-content table {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.main-content table td {
	padding: 0.5rem;
}

.centertxt {
	text-align: center;
}

.notice-me {
	color: white;
	font-family: Comfortaa;
	border-radius: 1rem;
	display: inline-block;
	text-transform: none;
}

.uppercase-me {
	text-transform: uppercase;
}

.greenbg {
	background-color: #119B77;
}
.bluebg {
	background-color: #0285B6;
}
.flip-card-back,
.orangebg {
	background-color: #FE8654;
}

#our-stories,
.greentxt {
	color: #119B77;
}
#our-home,
.bluetxt {
	color: #0285B6;
}
#our-lives,
.orangetxt {
	color: #FE8654;
}

footer {
	font-size: 16px;
	background-color: #0285B6;
	padding: 1rem 2rem;
	overflow: hidden;
	line-height: 1.35;
}

footer a,
footer a:hover,
footer a:visited {
	color: white;
}

footer a:active {
	color: #FFCCCC;
}

footer a:hover,
footer a:active {
	text-decoration: none;
} 
 

footer #left-col,
footer #right-col {
	color: white;
	background-color: #0285B6;
	padding: 0.5rem;
}
	
footer #left-col {
	float: left;
}
	
footer #right-col {
	float: right;
	background-color: white;
	padding: 0.5rem 1.5rem;
	border-radius: 1.5rem;
}

footer img {
	height: 4rem !important;
	max-height: 100% !important;
	width: auto !important;
}


.bottomnav {
	list-style-type: none;
	padding: 0;
	margin: 0 auto;
}

.bottomnav li {
	display: inline;
}

.bottomnav li::before {
	content: " ";
}

.bottomnav li::after {
    content: " | ";
	word-spacing: 0.5rem;
}

.bottomnav li:last-child::after {
    content: " ";
	clear: both;
}

.bottomnav a:hover {
	text-decoration: underline;
}

.nowrap,
nobreak,
.nobr {
	white-space: nowrap;
}


@media screen and ( max-width: 800px ) {
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p {
		margin-bottom: 13px;
	}
	
	h1 {
		font-size: 28px;
	}
	h2 {
		font-size: 24px;
	}
	h3 {
		font-size: 20px;
	}	
	body,
	h4,
	h5,
	h6,
	p {
		font-size: 16px;
	}
	.main-content,
	.main-content-home {
		position: relative;
		display: block;
		padding: 11rem 0 0;
	}
	
	main-content img {
		width: 80%;
		height: auto;
	}
/*	header nav {
		position: fixed;
		z-index: 3;
	}
	
	header .hamburger {
		display: block;
        position: absolute;
        cursor: pointer;
        right: 2rem;
        top: 3rem;
        transform: translate(-5%, -50%);
        z-index: 2;
        transition: all 0.7s ease;
	}
	
	.topnav {
		display: none;
		
		position: absolute;
		margin-top: 50pxl
        width: 100%;
        flex-direction: column;
        clip-path: circle(50px at 90% -20%);
        -webkit-clip-path: circle(50px at 90% -10%);
        transition: all 1s ease-out;
        pointer-events: none;
	}.topnav.open{
        clip-path: circle(1000px at 90% -10%);
        -webkit-clip-path: circle(1000px at 90% -10%);
        pointer-events: all;
		display:block;
    }.topnav li{
        opacity: 0;
    }
    .topnav li:nth-child(1){
        transition: all 0.5s ease 0.2s;
    }
    .topnav li:nth-child(2){
        transition: all 0.5s ease 0.4s;
    }
    .topnav li:nth-child(3){
        transition: all 0.5s ease 0.6s;
    }
    .topnav li:nth-child(4){
        transition: all 0.5s ease 0.7s;
    }
    .topnav li:nth-child(5){
        transition: all 0.5s ease 0.8s;
    }
    .topnav li:nth-child(6){
        transition: all 0.5s ease 0.9s;
        margin: 0;
    }
    .topnav li:nth-child(7){
        transition: all 0.5s ease 1s;
        margin: 0;
    }
    li.fade{
        opacity: 1;
    }
	
	.topnav li a {
		display: block;
	}
*/	
		.main-content-home {
			float: none;
			display: block;
			width: 100%;
		}
		
		.flip-card {
			width: 180px;
			height: 213px;
		}
		
		.flip-card img {
			width: 180px;
		}
		
		.flip-card-back {
			padding: 74px 0;
		}
		
		footer {
			font-size: 13px;
		}
		
		footer #left-col,
		footer #right-col {
			width: 100%;		
		}
		
		footer #right-col {
			margin-top: 1rem;
			text-align: center;
		}
}



@media screen and ( max-width: 328px ) {
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p {
		margin-bottom: 11px;
	}
	
	h1 {
		font-size: 24px;
	}
	h2 {
		font-size: 20px;
	}
	h3 {
		font-size: 16px;
	}	
	body,
	h4,
	h5,
	h6,
	p {
		font-size: 14px;
	}
	
	#our-hls {
		display: none;
	}
	
	#our-hls-mob {
		display: initial;
	}
	
	.flip-card,
	.flip-card-back {
		width: 120px;
		height: 142px;
	}
	
	.flip-card img {
		width: 120px;
	}
	
	.flip-card-back {
		padding: 46px 0;
	}

	.main-content-home table,
	.main-content table {
		margin: 0 auto;
	}
	
	.main-content-home table td,
	.main-content table td {
		padding: 8px;
	}
	.main-content-home table img,
	.main-content table img {
		height: 44px;
		width: auto;
	}
	
	footer {
		font-size: 11px;
	}
	
	footer #left-col,
	footer #right-col {
		width: 100%;		
	}
	
	footer #right-col {
		margin-top: 1rem;
		text-align: center;
	}
	footer img {
		height: 2.5rem !important;
		max-height: 100% !important
		width: auto !important;
	}
}