header {
width:100%;
z-index:10;
top:0;
padding-top:15px;
padding-bottom:15px;
background-color:#ffffff;
display:grid;
grid-template-columns: 2% 10% 86% auto;
}

nav {
padding:0;
text-align:right;
margin-top:22px;
}

main {
}

article {
}

section {
}

aside {
}

footer {
width:100%;
background-color:#212f49;
}


@media only screen and (max-width: 1600px) {

header {
grid-template-columns: 2% 11% 85% auto;
}

nav {
margin-top:20px;
}

main {
}

article {
}

section {
}

aside {
}

footer {
}

}



@media only screen and (max-width: 1500px) {

header {
grid-template-columns: 2% 12% 84% auto;
}

nav {
margin-top:18px;
}

main {
}

article {
}

section {
}

aside {
}

footer {
}

}




@media only screen and (max-width: 1300px) {

header {
grid-template-columns: 2% 14% 82% auto;
}

nav {
margin-top:20px;
}

main {
}

article {
}

section {
}

aside {
}

footer {
}


}





@media only screen and (max-width: 1200px) {

header {
grid-template-columns: 2% 15% 81% auto;
}

nav {
margin-top:22px;
}

main {
}

article {
}

section {
}

aside {
}

footer {
}


}




@media only screen and (max-width: 1100px) {

header {
grid-template-columns: 2% 16% 80% auto;
}

nav {
margin-top:22px;
}

main {
}

article {
}

section {
}

aside {
}

footer {
}

}



@media only screen and (max-width: 1000px) {

header {
grid-template-columns: 2% 17% 79% auto;
}

nav {
margin-top:20px;
}

main {
}

article {
}

section {
}

aside {
}

footer {
}

}




@media only screen and (max-width: 900px) {

header {
grid-template-columns: 2% 18% 78% auto;
}

nav {
margin-top:18px;
}

main {
}

article {
}

section {
}

aside {
}

footer {
}

}



@media only screen and (max-width: 800px) {

header {
grid-template-columns: 2% 19% 77% auto;
}

nav {
margin-top:16px;
}

main {
}

article {
}

section {
}

aside {
}

footer {
}

}


@media only screen and (max-width: 700px) {

header {
text-align:center;
grid-template-columns: 100%;
}

nav {
text-align:center;
margin-top:20px;
}

main {
}

article {
}

section {
}

aside {
}

footer {
}

}





@media only screen and (max-width: 600px) {

header {
}

nav {
}

main {
}

article {
}

section {
}

aside {
}

footer {
}

}





@media only screen and (max-width: 500px) {

header {
}

nav {
margin-top:15px;
}

main {
}

article {
}

section {
}

aside {
}

footer {
}

}



@media only screen and (max-width: 450px) {

header {
}

nav {
}

main {
}

article {
}

section {
}

aside {
}

footer {
}

}


@media only screen and (max-width: 400px) {

header {
}

nav {
margin-top:20px;
}

main {
}

article {
}

section {
}

aside {
}

footer {
}

}




@media only screen and (max-width: 350px) {

header {
}

nav {
}

main {
}

article {
}

section {
}

aside {
}

footer {
}

}