* {
    box-sizing:border-box;
}

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


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

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

h1 {
    font-size:1.5em;
}

/* 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:15em;/*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 {
    width:100%;
    padding-top:20px;
}

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

article a h1 { 
    font-size:2.5em;
}

article a:link {
    text-decoration:none;
    color:rgb(0,0,0);
}
article a:hover {
/*    background-color:rgb(200,50,50); */
    color:rgb(200,50,50);
}


article div.button{
    overflow:hidden;
}

article div.button a {
    display:block;
    margin:0;
    padding:0;
    padding:10px;
    width:6em;
    border:1px solid rgb(0,0,0);
    border-radius:7em;
    text-align:center;
}

article div.button a:link {
    text-decoration:none;
    color:rgb(0,0,0);
}

article div.button a:hover {
    background-color:rgb(200,50,50);
    color:rgb(255,255,255);
}

article div.buyLink a {
    background-color:rgb(255,255,160);
    text-decoration:none;
    text-align:center;
    font-size:2.5em;
    color:rgb(0,0,0);
    margin:0;
    padding-left:3%;
    padding-right:3%;
    padding-bottom:1%;
    padding-top:1%;
    border:3px solid rgb(252,60,100);
    border-radius:7em;
}

article div.buyLink a:hover {
    background-color:rgb(252,60,100);
    color:rgb(255,255,160);
    border:3px solid rgb(0,0,0);
}

a.prev {
    float:left;
}

div.overview {
    /* float:left; */
    display: flex;
    justify-content: center;
    align-items: center;
}

a.next {
    float:right;
}

article div {
    margin: 0 5% 0 5%;
    /*padding-left:5%;
    padding-right:5%;*/
}

article h1,h2,p {
    margin: 10px 5% 10px 5%;
    /*padding-left:5%;
    padding-right:5%;*/
}

a.archive {
    display:block;
    margin:0;
    padding:5px;
    padding-left:5%;
}

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

a.archive:hover {
    background-color:rgb(252,60,100);
    color:rgb(255,255,255);
}

.buy {
    font-size:1.1em;
    color:rgb(0,0,0);
    font-weight: bold;
    text-decoration: none;
}

img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto;
    pointer-events: none;
}



.center {
  display: flex;
  justify-content: center;
  align-items: center;
}


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

/* 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);
    }

/*@media (min-width:950px) {*/
    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); */
    }
}

@media (min-width:800px) {
    img.displayed {
	width: 70%;
    }
}