#mainnav { background: url("images/placemat.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; padding: 3em; line-height: 1.5em; font-weight: 700; text-align: center; }

#main { display: table; width: 100%; }
#main .inside { width: 100%; min-height: 300px; padding-top:3em; padding-bottom: 3em; display: table-cell; vertical-align: middle; }
#main .inside:before, #main .inside:after { top: 2vw; }
#main .inside:before { left: 2vw; }
#main .inside:after { right: 2vw; }
#main .mod_article { max-width: 100%; margin: 0 auto; }


@media screen and (min-width: 1400px) {
	#mainnav { font-size: 3em; }
	#main .mod_customnav { left: 50%; margin-left: 380px; }
}
@media screen and (min-width: 500px) and (max-width: 1399px) {
	#mainnav { font-size: 4.29vw; }
	#main .mod_customnav { right: 1vw; }
}
@media screen and (min-width: 1200px) {
	#main .mod_customnav { bottom: 2em;  }
}
@media screen and (min-width: 1000px) and (max-width: 1199px) {
	#main .mod_customnav { bottom: 2em; }
}
@media screen and (min-width: 800px) and (max-width: 999px) {
	#main .mod_customnav { bottom: 2em; }
}
@media screen and (min-width: 600px) and (max-width: 799px) {
	#main .mod_customnav { bottom: 1em; }
}
@media screen and (min-width: 400px) and (max-width: 599px) {
	#main .mod_customnav { bottom: 0; }
}
@media screen and (max-width: 399px) {
	#main .mod_customnav { }
}

@media screen and (min-width: 800px) {
	#main .inside:before, #main .inside:after { width: 18vw; height: calc(18vw * 1.06); }
}
@media screen and (max-width: 799px) {
}

@media screen and (min-width: 500px) and (max-width: 799px) {
	#main .inside:before, #main .inside:after { width: 26vw; height: calc(26vw * 1.06); }
}

@media screen and (min-width: 500px) {
	#main .mod_article { width: 85vw; }
}
@media screen and (max-width: 499px) {
	#main .mod_article { width: 100vw; }
	#main .inside:before, #main .inside:after { width: 30vw; height: calc(30vw * 1.06); }
	#mainnav { font-size: 5.5vw; }
}