* { box-sizing: border-box;}
a {text-decoration:none}

.article {text-decoration: none; color: black}

.header {
	background-image: url("banner.jpg");
    background-color:#182801;
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center;
    display:block;
    text-decoration:none;
	margin-bottom:1em;
    text-shadow: black 0.1em 0.1em 0.2em;
    color:white;
    }

.header h1 {
	font-size:80px;
    margin:0;
    padding:0;
    font-weight:normal;
    }

.header h2 {
	font-size:20px;
    margin:0;
    padding:0;
    font-weight:normal;
    }

#header-image {width: 100%; max-width:800px; padding:54px}

#header-menu {
    font-family: 'Hind', sans-serif;
    list-style-type: none;
    margin:0.5em;
    min-width:40em;
    }

#header-menu li {
    text-decoration: none;
    color:black;
    display: inline-block;
    width:15%;
    padding:0.25em;
    border-radius:0.5em;
    font-size:1.2em;
    }

.clickable {cursor:pointer;cursor:hand;}
.clickable:hover  { background:#eeeeee }
.clickable:active { background:#cccccc }
.clickable-only {cursor:pointer;cursor:hand;}

#social-links {
    background:#eeeeee;
    position:fixed;
    left:0;
    top:50%;
	margin:0;
	margin-top:-108px;
    list-style-type:none;
    padding:10px;
    border-radius:0 10px 10px 0;
	width:70px;
    }

#social-links img { width:50px; height:50px; margin:5px 0; !important}

.footer {
    border-top: 1px solid #cccccc;
    background: #eeeeee;
    width: 100%;
    padding: 2em;
    text-align: right;
	clear: both;
	margin-top:2em;
    }

#main-content {
    margin-left: auto;
    margin-right: auto;
    padding: 0 2em;
	max-width:1200px;
    }

#article-content {
	text-align:left;
	width:90%;
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
	}
#article-content p,
#article-content ul,
#article-content ol {font-size:1.2em;}
#article-content p { text-align:justify; }


#book-content {
	text-align:left;
	width:90%;
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
	font-size: 1.2em;
	}

.book-details {	margin-left:300px;text-align:left;}
.item-details {	margin-left:400px;text-align:left;}
.book-details h2 { margin:0 }
.book-details h3 { margin:0; margin-bottom:0.5em }
.book-details ul { margin:0px; padding:0; text-align:left}
.book-image { float:left; margin-bottom:1em}

.article, .ad, .books {
    position:relative;
	text-decoration: none;
	width: 300px;
	height:300px;
    border: 1px solid #cccccc;
    border-radius: 30px;
    display: inline-block;
	margin: 2em;
    text-align: left;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #cccccc;
    cursor: pointer;
    }

.ad {
    border:0;
	padding-top:25px;
	color:#666666;
    text-align:center;
    font-size:0.9em;
    background:white;
    }

.books {
    background:#FFFFFF;
    text-align:center;
    padding-top:30px;
    min-height:300px;
    height:19em;
    }

.article h1 {
    position:relative;
    top:0;
    font-size:1.5em;
    color:white;
    text-shadow: black 0.1em 0.1em 0.4em;
    background:#182801;
	background:rgba(0, 0, 0, 0.6);
    padding:1em;
    margin-top:-0.5em;
	margin-bottom:0;
    }

.article p {
    position:relative;
    font-size:1em;
    color:white;
    top: 300px;
    transition: top 0.5s;
    width: 300px;
    height:300px;
    padding:1em;
    background:#182801;
	background:rgba(0, 0, 0, 0.6);
	margin-top:0;
    }

.article:hover {
	box-shadow: 0px 0px 5px 4px #cccccc;
	border:1px solid black;
	}

.article:hover p {
	transition: top 0.5s;
	top: 0px;
	}


.ad_unit {
    width: 100%;
    height: 84%;
    margin-top:8%;
    margin-left:auto;
    margin-right:auto;
	}


#header-menu-mobile { display: none; }
#header-menu-mobile h1 {
	font-family: 'Hind', sans-serif;
	display:inline-block;
	margin:0.5em;
	padding:0;
	margin-top:0.75em;
	font-size:1.5em;
	font-weight:normal
	}
#header-menu-mobile {width:100%;text-align:left}
#header-menu-list {
	font-family: 'Hind', sans-serif;
	display: none;
	list-style:none;
	padding:0;
	margin:0;
	margin-top:1em;
	height:auto;
	overflow:hidden;
	}
#header-menu-list li {
	padding:0.5em;
	margin:0.25em 0;
	font-size:1.5em;
	border:2px solid #cccccc;
	border-left:0;
	border-right:0;
	width:100%;
	text-align:center;
	}
#header-menu-list a {text-decoration:none;color:black}
#header-menu-list li:hover {background:#eeeeee}
#header-menu-list li:active {background:#cccccc}

#header-menu-button img {
	float:left;
	width:50px;
	height:50px;
	display:inline-block;
	border:3px solid grey;
	border-radius:0.25em;
	margin:0.5em;
	padding:0.5em
	}
#header-menu-button img:hover {background:#eeeeee}
#header-menu-button img:active {background:#cccccc}
.header-menu-social {float:right;margin:0.5em;}
.header-menu-social img {width:50px;height:50px}


#image-overlay-background {
    display:none;
    position:fixed;
    height:100%;
    width:100%;
    top:0;
    left:0;
    background:#000000;
    opacity:0.9;
    border:1px solid #cecece;
    z-index:1;
	}

#image-overlay {
	z-index:100;
	width:90%;
	display:none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}

#image-overlay-image {
	z-index:100;
	max-width:100%;
	}

.zoom-image {
	cursor: zoom-in;
	}


#background-overlay{
    display:none;
    position:fixed;
    height:100%;
    width:100%;
    top:0;
    left:0;
    background:#000000;
    opacity:0.8;
    border:1px solid #cecece;
    z-index:1;
	}

#info-overlay{
    display:none;
    position:fixed;
    width:90%;
    border:3px solid #182801;
    background:#eeffee;
    z-index:2;
    padding:1em;
	padding-bottom:2em;
    overflow:hidden;
    border-radius:15px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}

#info-overlay h1 {font-size:1em; margin-top:2em}
#info-overlay p {margin:1em;}

#info-overlay-close{
    right:0.5em;
    top:0.5em;
    position:absolute;
    display:block;
    text-decoration: none;
    border:1px solid black;
    border-radius:0.5em;
    font-size:1em;
	}


.image-left {
	width:45%;
	max-width:480px;
	min-width:400px;
	padding:1em;
	margin:0;
	margin-bottom:1em;
	margin-right:1em;
	float:left;
	padding-left:0;
	}

.image-list {
	width:45%;
	max-width:360px;
	min-width:300px;
	padding:1em;
	margin:0;
	margin-bottom:1em;
	margin-left:1em;
	float:right;
	padding-right:0;
	}

.image-right {
	width:45%;
	max-width:480px;
	min-width:400px;
	padding:1em;
	margin:0;
	margin-bottom:1em;
	margin-left:1em;
	float:right;
	padding-right:0;
	}

.images-center {
	display:inline-block;
	width:45%;
	max-width:480px;
	min-width:300px;
	vertical-align:top;
	margin:0.5em;
	}

.images-center img,
.image-list img,
.image-left img,
.image-right img {width:100%;border:1px solid lightgrey}

#article-content .images-center p,
#article-content .image-left p,
#article-content .image-list p,
#article-content .image-right p {font-style:italic;font-size:1em;}


#bottom-menu {text-align:left;padding:2em 0;display:block;min-height:40px;clear:both;}
#bottom-menu div {display:none;}  /* the social links */


.content-ad { width:100%; text-align:center; clear:both; margin: 1.5em 0; padding:1em; }
.book-banner { border:1px solid lightgrey;}
.search-banner { text-align:right }


@media screen and (max-width: 1200px) {
	#social-links {
		position:absolute;
		top:50%;
		margin-top:-107px;
	}
	.header {position:relative}

	#bottom-menu div {display:inline-block};

}

@media screen and (max-width: 1000px) {
	#main-content {
		margin-left: 0em;
		margin-right: 0em;
		padding: 0 1em;
		}

	#article-content {
		text-align:left;
		width:100%;
		max-width:1000px;
		margin-left:0;
		margin-right:0;
		padding-left:1em;
		padding-right:1em;
		}


	.article, .ad, .book { margin:1em; }
}

@media screen and (min-width: 754px) and (max-width:999px) {

	.article:hover {
		box-shadow: 0px 0px 5px 4px #cccccc;
		border:1px solid black;
		}

	.article:hover p {
		transition: top 0.5s;
		top: 50px;
		}
}


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

    #main-content { padding:0 0.5em; }
    .ad, .books { border: 0; }
	.books {display:none;}

    .article {
        width:100%;
        height:100px;
		border-radius:5px;
        margin:0.5em 0;
		float:left;
		clear:both;
		background-size:auto 100px;
		background-position:0px 0px;
		background-color: white;
        }

    .books {
        margin:0;
        min-height:0;
        height:auto;
        padding-top:0;
        }

    .article h1 {
		width: 100%;
		height:auto;
		font-size:1.2em;
		padding-left:120px;
		background:transparent;color:black;
		text-shadow: none;
		}
	.article p {display:none;}
	#header-image {padding:40px 0 }
	#social-links { display:none; }
    #social-links li { display:inline-block;}
    #header-menu { display: none;}
    #header-menu-mobile { display: inline-block; }

    .ad_unit { width: 100%; height: 80px; margin-top:6px;}

	.image-left {
		width:100%;
		float:none;
		max-width:480px;
		min-width:0px;
		margin-left:auto;
		margin-right:auto;
		}

	.image-right {
		width:100%;
		float:none;
		max-width:480px;
		min-width:0px;
		margin-left:auto;
		margin-right:auto;
		}

	.images-center {
		width:100%;
		max-width:480px;
		min-width:0px;
		}

	.image-list {
		width:100%;
		float:none;
		max-width:480px;
		min-width:0px;
		margin-left:auto;
		margin-right:auto;
		}

	.book-details { margin-left:0px; text-align:left;}
	.item-details { margin-left:0px; text-align:left;}
	.book-image { float:none; text-align:center}
	.header img {padding:30px;}

	}


@media screen and (max-width: 400px) {
	#header-image {padding:20px 0 }
	.article h1 {font-size:1em;}
	}