* {
    box-sizing: border-box;
}

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
	margin: 0; padding: 0; border: 0;
}



/* BODY ======================================================================*/
body {
    margin:0;
    padding:0;
    font-size:100%;
/*    background-color: rgb(90,90,90); */
    background-color: rgb(255,255,255);
    font-family:"Palatino Linotype", palatino, georgia, serif;
}

h2, p, a, li, button {
    font-size:1.5em;
}

h1 {
    font-size:3em;
}



/* HEADER ====================================================================*/
header {
    position:fixed;
    z-index: 1;
    top:0;
    overflow:hidden;
    width:100%;
    height:100px;
    margin:0;
    padding:0;
    background:rgb(0,0,0);
}

header img {
	position:absolute;
	height:100px;
	top:0;
	left:50%;
	-ms-transform: translate(-50%, 0%); /* IE 9 */
	-webkit-transform: translate(-50%, 0%); /* Safari and Chrome */
	-o-transform: translate(-50%, 0%); /* Opera */
	-moz-transform: translate(-50%, 0%); /* Firefox */
	transform: translate(-50%, 0%);
	padding:0;
    }

header nav {
    display:none;
}


    
/* ASIDE =====================================================================*/
aside {
    /*position:static;*/
    float:none;
    overflow-y:visible; /*hidden;*/
    overflow-x:visible;
    width:100%;/*The width is 100%, when the viewport is 800px or smaller*/
    /*height:10em;/*17em;*/
    padding:100px 0 0 0;/*12.5em 0 0 0;*/
    white-space:nowrap;
}
    
aside a {
    display:block;
    /*padding:17px;
    /*border-right:1px solid rgb(0,0,0);
    border-left:1px solid rgb(0,0,0);*/
}


.hide {
    display:none;
}

aside h2 {
    display:block;
    margin:0px; /*10px 10px 10px 15px;*/
    padding: 10px 0px 0px 0px;
/*    background:rgb(180,180,200); */
    text-align:center;
}

aside a {
    display:block;
    margin:0px; /*10px 10px 10px 15px;*/
    padding:0px;
}


aside a:link {
    text-decoration:none;
    color:rgb(0,0,0);
}

aside a:hover {
    background-color:rgb(200,50,50);
    color:rgb(255,255,255);
}

aside a.hereList {
    /* border:1px solid rgb(0,0,0); */
    /*border-radius:7em; */
    background-color:rgb(0,0,0);
    color:rgb(255,255,255);
}




/* ARTICLE ===================================================================*/
article {
    float:none;
    width:100%;
    /*padding-top:20px;*/
}

article h1,h2,p {
    margin: 10px 5% 10px 5%;
}


.artLink:link {
    text-decoration:none;
    color:rgb(255,50,50);
    font-size:1em;
}

/* GRID ======================================================================*/
.grid-container {
    /*margin: 10px 5% 10px 5%;*/
    max-width: 1000px;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Auto adjusts */
    padding: 30px;
}

.grid-container > div {
    background-color: rgb(255, 255, 255);
    /*border: 5px solid rgb(0, 0, 0);*/
    margin: 0;
    padding: 0;
}

.gridImg {
    margin: 0;
    padding: 0;
    max-width: 100%; /*auto; /* 100%; */
    width: 100%;
    height: auto; /*100%; /* auto; */    
    /*pointer-events: none;*/
}




/* FOOTER ====================================================================*/
footer {
    clear:both;
    padding:10px;
    text-align:center;
    background:rgb(0,0,0);
    color:rgb(255,255,255);
}

footer a:link {
    text-decoration:none;
    color:rgb(255,255,255);
}




/* FLEX =====================================================================*/
@media (min-width:1200px) {
    header img {
        position:relative;
        float:left;
        max-height:100%;
        padding:0 0 0 5%;
        left:5%;
    }
    header nav {
        display:block;
        overflow:hidden;
        position:absolute;
        right:0;
        top:50%;
        width:950px;
        padding:0;
        margin-top:auto;
        margin-bottom:auto;
        -ms-transform: translate(0%, -50%); /* IE 9 */
        -webkit-transform: translate(0%, -50%); /* Safari and Chrome */
        -o-transform: translate(0%, -50%); /* Opera */
        -moz-transform: translate(0%, -50%); /* Firefox */
        transform: translate(0%, -50%);
    }
    header nav a {
        float:left;
        text-align:center;
        width:16%; /*16.6% 7em;*/
        padding:15px 10px;
        margin:0;
    }
    header nav a:link {
        text-decoration:none;
        border:1px solid rgb(0,0,0);
        border-radius:7em;
        color:rgb(255,255,255);
    }
    header nav a:hover {
        /*border:1px solid rgb(252,60,100);*/
        border-radius:7em;
        background-color:rgb(200,50,50);
    }
    header nav a.here {
        border:1px solid rgb(0,0,0);
        border-radius:7em;
        background-color:rgb(255,255,255);
        color:rgb(0,0,0);
    }
    
    aside {
	float:left;
	width:20%;
	height:auto;
	margin:0;
	padding:130px 0 0 0;
	/*text-align:center;*/
	/*background:rgb(215,215,250);*/
	overflow:visible;
	white-space:normal;
    }
    aside h2 {
	background:none;
	padding:0; /*px 0px 10px 10px;*/
	text-align:left;
	margin: 0; /*10px 5% 10px 5%; */
    }

    .hide {
	display:block;
    }
    aside a {
	padding:10px 10px 10px 10px;
    }
    article {
	float:left;
	width:80%;
	max-width:1150px;
	padding:130px 0px 0px 0px;
	/* background:rgb(200,0,200); */
    }
    .grid-container {
        margin: 10px 5% 10px 5%;
    }
}