html,
body {min-height: 100%;height:100%;margin:0;font-family: "Poppins", sans-serif;color:#fff;}

* {box-sizing: border-box;}

a {color:#fff;text-decoration:none;}
a:hover {color:#eecd00;}
p {line-height:2em;}
.ttl {color:#eecd00;font-weight:400}
.subTtl {font-size:0.8em;line-height:2.1em;margin-bottom:30px;}
.subTtl strong {font-size:1.6em;font-weight:600}
h1 {font-size:1.1em;}
.spacer {width:40px;display:inline-block;color:#eecd00;}

#page-container {background: rgb(0,81,42);background: linear-gradient(0deg, rgba(0,81,42,1) 0%, rgba(0,150,64,1) 100%);min-height: 100vh;}
.wrapContent {background-image:url(../images/site/NNK_bg.png);min-height: 100vh;background-repeat:no-repeat;background-position:left top;background-size: auto 100%;}

.container {width:90%;max-width:1900px;margin:0 auto;padding:25px;transition: all 1s ease}

header {padding-top:60px;padding-bottom:80px;}
header .ttl {color:#eecd00;font-size:2em;font-weight:600}

main .container {display:flex;transition: all 1s ease}
main .container article {width:50%;font-size:1.3em;transition: all 1s ease}
main .container aside {width:40%;transition: all 1s ease}

.brand img {max-width:100%;transition: all 1s ease}

.row {display:flex;}
footer p {line-height:1.5em;margin:0;padding:0 0 20px 0}
footer .container {transition: all 1s ease}
footer .row {width:50%;gap:30px;}

@media only screen and (min-width: 1800px) {
	
	main .container article{width:25%}
	
}

@media only screen and (min-width: 1051px) and (max-width: 1400px) {
		
	header {padding-top:50px;padding-bottom:70px;}
	main .container {justify-content:space-between;}
	main .container article {font-size:1.1em;}
	footer .row {width:100%;}
}

@media only screen and (min-width: 951px) and (max-width: 1050px) {
	
	.wrapContent {border:1px solid purple;}
	
	header {padding-top:50px;padding-bottom:70px;}
	main .container {justify-content:space-between;}
	main .container article {font-size:1.1em;}
	footer .row {width:100%;}
	
}

@media only screen and (min-width: 721px) and (max-width: 950px) {		
		
	.wrapContent {background-size: auto 100%;background-position:-200px top}
	
	.container {width:100%}
	
	header {padding-top:50px;padding-bottom:60px;}
	header .ttl {font-size:1.8em;}
	main .container {justify-content:space-between;}
	main .container article p {margin-top:0;}
	.subTtl {margin-bottom:10px}
	main .container article {font-size:1.1em;}
	
	main .container article {width:40%;}
	main .container aside {width:50%;}
		
	footer .row {width:100%;}
}


@media only screen and (min-width: 577px) and (max-width: 720px) {
			
	header {padding-top:0;padding-bottom:0;}
			
	.container {width:100%}
	p {line-height:1.5em;}
	.subTtl {font-size:0.8em;line-height:1.8em;margin-bottom:20px;}
	.subTtl strong {font-size:1.4em;}
	
	.wrapContent {background-image:url(../images/site/NNK_bg.png);background-position:-300px top;background-size: auto 100%;}
	
	.brand img {max-width:100%}
	
	main .container article {width:50%;font-size:1.1em;}
	main .container aside {width:50%;}
		
	footer .row {width:100%;}
	
}

@media only screen and (min-width: 100px) and (max-width: 576px) {
	
	.wrapContent {display:flex;flex-direction:column;background-image:url(../images/site/NNK_bg_mobile.png);background-position:center bottom;background-size:220%}
	header {order:2}
	main {order:1}
	footer {order:3}
	header {padding-top:0;padding-bottom:0;}	
	
	.brand img {width:100%;max-width:280px}
	
	#page-container {background: rgb(0,81,42);background: linear-gradient(60deg, rgba(0,81,42,1) 0%, rgba(0,150,64,1) 100%);}
	
	.container {width:100%}
	p {line-height:1.5em;}
	.subTtl {font-size:0.8em;line-height:1.8em;margin-bottom:20px;}
	.subTtl strong {font-size:1.4em;}
	
	main .container article {width:100%;font-size:1.1em;}
	main .container aside {width:100%;text-align:center}
	
	main .container {flex-direction:column}
	main .container article {width:100%;order:2}
	main .container aside {width:100%;order:1}
	
	footer .row {width:100%;flex-direction:column;gap:10px}
	footer p {padding:0 0 10px 0}

}