@charset "UTF-8";
/* 101 Noodle Express CSS Document */

:root {
	--red: #a12924;
}

html {
	box-sizing: border-box;
	font-size: 10px;
	scroll-behavior: smooth;
}

*, *::before, *::after {
	box-sizing: inherit;
	padding: 0;
	margin: 0;
}
a, a:hover {
	color: inherit;
	text-decoration: none;
}
ul, ol {
	list-style-type: none;
}
img {
	display: block;
}

body {
	font-family: 'Roboto Condensed', sans-serif;
	margin: 0;
	padding: 0;
}

#wrapper {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}
header {
	padding: 15px 2vw;
	position: sticky;
	top: 0;
	background: var(--red);
	color: white;
	display: flow-root;
}

.header_logo {
	font-size: 1px;
	text-indent: -1000em;
	width: 18%;
	margin-right: 2vw;
	background-image: url("../images/101-Logo.png");
	background-size: contain;
	background-repeat: no-repeat;
	aspect-ratio: 1.63 / 1;
	float: left;
}

.location {
	display: flex;
	width: 61%;
	justify-content: space-around
}
.address {
	width: 45%;
}
.address a:hover, .address a:focus {
	color: yellow;
}
.address:last-child {
	margin-top: 5px;
}
.address p, .address h2 {
	font-size: calc(14px + 0.3vw);
	line-height: 1.4em;
}
.address p strong {
	font-size: 1.2em;
	color: yellow;
}
.indicator {
	width: 20px;
	height: auto;
	display: inline-block;
	transform: translateY(5px);
}

section img {
	width: 100%;
}

footer {
	background: var(--red);
	padding: 2vh;
	text-align: center;
	color: white;
	font-size: calc(10px + 0.25vw);
}

@media (max-width: 700px) {
	header {
		padding: 10px 5vw 5px 5vw;
	}
	
	.header_logo {
		width: 35%;
		float: none;
	}
	.location {
		width: 100%;
	}
	.address p, .address h2 {
	line-height: 1.2em;
	}
}