/* responsive styles */

.h3-phone a {
	color: #024773;
	text-transform: uppercase;
	font-weight: 400;
	font-size: 16px;
	font-family: Roboto;
	line-height: 24px;
	text-decoration: none;
	margin-left: 5px;
	margin-right: 5px;
	border-bottom: 1px solid transparent;
	transition: border-bottom-color .3s;
}

.h3-phone a:hover {
	border-bottom-color: currentColor;
}

@media (max-width: 1199px) {

	html {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	*, *::before, *::after {
		-webkit-box-sizing: inherit;
		box-sizing: inherit;
	}
	body {
		min-width: 320px;
	}

	#header {
		width: 100%;
		height: auto;
		max-width: 1020px;
		flex-wrap: wrap;
		justify-content: center;
	}

	#h1,	#h2,	#h3,	#h4 {
		flex-basis: 50%;
		padding: 15px;
		display: flex;
		flex-direction: column;
	}

	#h1, #h2 {align-items: flex-end;}
	#h2, #h4 {order: 2;padding-top: 0;}
	.h2-schedule > span:first-child { padding-left: 5px; }
	.h2-schedule > span:last-child { padding-right: 5px; }

	#menuButton {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10px auto 20px;
		cursor: pointer;
		transition: transform .3s, opacity .3s, background-color .3s;
	}

	#menuButton p {
		color: #049572;
		text-transform: uppercase;
		font-weight: 400;
		font-size: 26px;
		font-family: Roboto;
		margin-bottom: 0;
	}

	.menuButton-wrapper {
		width: 28px;
		height: 22px;
		display: flex;
		margin-left: 10px;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	#menuButton span {
		display: block;
		background-color: #049572;
		width: 28px;
		height: 2px;
		transition: transform .3s, opacity .3s, background-color .3s;
	}

	#menuButton:hover {opacity: 0.7;}
	#menuButton span {transform-origin: center center;transform: translate(0,0) rotate(0);}
	#menuButton span + span {margin-top: 8px;}
	.menu-is-open #menuButton span:nth-child(1) {transform: translateY(10px) rotate(45deg) scale(1.2)}
	.menu-is-open #menuButton span:nth-child(2) {transform: rotateY(90deg)}
	.menu-is-open #menuButton span:nth-child(3) {transform: translateY(-10px) rotate(-45deg) scale(1.2)}
}

@media (max-width: 641px) {
	
	#h1, #h2, #h3, #h4 {
		flex-basis: 100%;
		align-items: center;
		order: 0;
		padding-bottom: 0;
	}

	#h1 {padding-top: 15px;}
	#h2, #h3, #h4 {padding-top: 5px;}

}