/*
Theme Name: Lost Beers
Theme URI: n/a
Author: Roel Mulder
Author URI: n/a
Description: Theme created for http://lostbeers.com
Version: 1.0

Tags: beer, two-columns
Text Domain: lostbeers




/* ------- CSS Reset ------- */
html, body, div, span,
h1, h2, h3, h4, h5, h6,
p, em, b, a, img, ul, li {
	margin: 0;
	border: 0;
	padding: 0;
	font-size: 100.01%;
	/*vertical-align: baseline;*/
}


/* ------- Colors ------- */
/* oranje: #f3ab16 #fdf0d5 */
/* groen:  #1c853d         */
/* bruin:  #611a00         */

html {
	background-color: #eeeeee;

	background-size: cover;
	height: auto;
	overflow: -moz-scrollbars-vertical;
	overflow-y: scroll;
}

body {
}

h1 {
	font-family: 'open_sansregular', 'Trebuchet MS', sans-serif;
	font-weight: bold;
	text-align: left;
	margin: 0.5em 0.25em 0.5em 0.05em;
}
h2, h3, h4, h5, h6 {
	font-family: 'open_sansregular', 'Trebuchet MS', sans-serif;
	font-size: 1.0em;
	font-weight: bold;
	margin-bottom: 0.1em;
}

p {
	font-family: 'open_sansregular', 'Trebuchet MS', sans-serif;
	margin-bottom: 1.3em;
	xcolor: #553f32;
	color: #000000;
}

a:link, a:visited  {
	text-decoration: none;
	color: #1f3971;
}
a:hover, a:active {
	text-decoration: underline;
	color: #1f3971;
}




img.centered
{
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright
{
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft
{
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

.alignright
{
float: right;
}

.alignleft
{
float: left;
}






img {

    height: auto;
	display: block;
	/* disable img drag */
	user-drag: none; 
	-moz-user-select: none;
	-webkit-user-drag: none;
}



.float-left {
	float: left;
	padding: 0 1em 0.5em 0;
}

.float-right {
	float: right;
	padding: 0 0 0.5em 1em;
}

.clear {
	clear: both;
}




/* Wrapper */
#wrapper {
	width: 92%;
	margin: 0% auto;
	max-width: 1024px;
}

/* Header */
#header {
	position: relative; 
	background-color: #ffffff;
	background-image: url('./images/header-lostbeers.jpg');
	background-repeat: no-repeat;
	background-position: right;
	background-size: 100%;
	height: 100%;
	min-height: 100%;
}
#logo img {
	width: 18%;
	padding: 1%;
}


#sitenaamblok {
	position: absolute;
	text-align: center;
	top: 0.8em; 
	right: 8%; 
}

#sitenaam {
	font-family: 'open_sansregular', 'Trebuchet MS', sans-serif;
	font-size: 3.2em;
	font-weight: bold;
	margin-bottom: -0.2em;
        text-shadow: 2px 2px #000000;
}

#sitenaam a:link,  a:visited, a:hover, a:active {
	color: #e30716;
} 


#siteondertitel {
	font-family: 'open_sansregular', 'Trebuchet MS', sans-serif;
	font-size: 1.2em;
	font-weight: bold;
}




/* Nav */

#nav {
	background-color: #ffffff;
}

hr.navline1 {
	color: #1f3971;
	background-color: #1f3971;
	height: 3px;
	border: none;
	margin: 0;
	padding: 0;
}

hr.navline2 {
	color: #e30716;
	background-color: #e30716;
	height: 3px;
	border: none;
	margin: 0;
	padding: 0;
}

hr.navline3 {
	color: #ffffff;
	background-color: #ffffff;
	height: 8px;
	border: none;
	margin: 0;
	padding: 0;
}


#navmenu li {
	display: inline;
}

#navmenu a {
	line-height: 2em;
	padding: 0.5em 1.5em;
	text-decoration: none;
}


#navmenu li a:link, li a:visited {
	font-size: 1.0em;
	font-weight: bold;
	color: #000000;
	font-family: 'open_sansregular', 'Trebuchet MS', sans-serif;
}

#navmenu li a:hover {
	background-color: #1f3971;
	color: #ffffff;
}


#navbuttons a {
	float: right;
	margin-right: 1em;
	margin-top: 0.4em;
}


#navbuttons img {
	height: 1.1em;
}


#searchformnav input{
	float: right;
	color:#1f3971;
	font-family: 'open_sansregular', 'Trebuchet MS', sans-serif;
	font-size: 1.0em;
        border: none;
	background-color: #eeeeee;
	height: 1.1em;
	width: 12em;
	margin-right: 1em;
	margin-top: 0.4em;
}


#responsive-menu-icon { 
        display: none; 
}



/* Holy Grail */
/* 2 Equal Height Columns with Cross-Browser CSS */
#colwrap2 {
	clear: right;
	float: right;
	width: 100%;
	background-color: #ffffff;
	overflow: hidden;
	position: relative;
	padding: 1em 0 0 0;
}

#colwrap1 {
	float: right;
	width: 100%;
	background-color: #ffffff;
	position: relative;
	left: 75%;
}



#col1 {
	float: right;
	width: 21%; /* 21% */
	position: relative;
	right: 77%; /* 77% */
	overflow: hidden;
}
#col1 h1 {
	font-size: 1.0em;
	color: #000000;	
	margin: 0.5em 0.25em 0.5em 0.05em;
}

.subnav ul {
    padding-left: 20px;
	overflow: hidden;
}
.subnav li {
	width: 100%;
	font-family: 'open_sansregular', 'Trebuchet MS', sans-serif;
	font-size: 0.9em;
}

.subnav li a:link, li a:visited {
	display: inline;
	padding: 0.25em 0em 0.25em 0em;
	background-color: #ffffff;
	text-align: left;
	font-family: 'open_sansregular', 'Trebuchet MS', sans-serif;
	font-size: 0.9em;
	color: #e30716;
	-webkit-transition: all 0.18s ease-in-out;
	-moz-transition: all 0.18s ease-in-out;
	-o-transition: all 0.18s ease-in-out;
	transition: all 0.18s ease-in-out;
}

#col2 {
	float: right;
	width: 71%; /* 71% */
	position: relative;
	right: 81%; /* 81% */
	overflow: hidden;
}


#col2 h1 {
	font-size: 2.2em;
	color: #e30716;
}


#col2 hr{
	color: #999999;
	background-color: #999999;
	height: 1px;
	border: none;
	margin: 2.5em 0;
	padding: 0;
}


#breadcrumbs {
	font-size: 0.8em;
	padding: 0.5em;
}

.post li {
	font-family: 'open_sansregular', 'Trebuchet MS', sans-serif;
	margin-left: 1.3em;
	xcolor: #553f32;
	color: #000000;
}

.postmetadata {
	font-size: 0.8em;
	color: #999999;
}

.postmetadatatime {
	color: #1f3971;
}


.wp-caption-text {
	display: none;
}


.sharesocialmedia img {
	height: 1.4em;
	display: inline;
}


.page-navigation {
	font-family: 'open_sansregular', 'Trebuchet MS', sans-serif;
	text-align: center;
	color: #ffffff;
	margin: 2em;
}


.page-numbers {
	background-color: #e30716;
	padding: 0.8em 1.2em;
	margin: 0.5em;	
}

a.page-numbers  {
	color: #ffffff;

}

.current {
	background-color: #e30716;
}


/* Comments */

ol.commentlist {
	list-style-type: initial;
}

cite.fn {
	font-family: 'open_sansregular', 'Trebuchet MS', sans-serif;
	font-size: 1.0em;
	font-weight: bold;
	font-style: normal;
	color: #1f3971;
}

.says {
	font-family: 'open_sansregular', 'Trebuchet MS', sans-serif;
}


.comment-meta {
	font-family: 'open_sansregular', 'Trebuchet MS', sans-serif;
	font-size: 0.8em;
}


/* Footer */


#footer {
	background-color: #eddab9;
	color: #00000;
	text-align: center;
	font-size: 0.9em;
	padding: 0em 0em 1em 0em;
}

#footer h1 {
	font-size: 1.4em;
	text-align: center;
}

#footer p {
	margin: 0em;
}

/* Homepage */

#homepagefirstblock {
	position: relative; 
	width:  100%;
	height: 30em;
	overflow: hidden;
}


#homepagefirstblock img {
	width:  100%;
	padding: 1em 0.5em; 
}

#homepagefirstblocktext {
	position: absolute; 
	color: #ffffff;
	bottom: 0; 
	left: 0.5em; 
	width: 100%;
	background: rgb(0, 0, 0); /* fallback color */
	background: rgba(0, 0, 0, 0.7);
	padding: 0.2em 1em; 
	width: 95%;
}

#homepagefirstblocktext h1, h2 {
	margin-bottom: 0.1em;
}

#homepagefirstblocktext h3 {
	font-size: 0.8em;
	font-weight: normal;
	margin-bottom: 0.2em;
}

#homepagefirstblocktext a:link {
	color: #ffffff;
}


#homepagefirstblocktext a:visited {
	color: #ffffff;
}

#homepagefirstblocktext p {
	color: #ffffff;
}


#homepagelowerpart {
	clear: left;
	float: left;
	width: 100%;
	background-color: #ffffff;
	overflow: hidden;
	position: relative;
}

#homepagelowerpart hr{
	color: #999999;
	background-color: #999999;
	height: 1px;
	border: none;
	margin: 2em 2.5em 0 2.5em;
	padding: 0;
}



#homepagelowerpart h1 {
	font-size: 1.4em;
	margin-bottom: 0.1em;
}

#homepagelowerpart h1 a:link, a:visited {
	color: #000000;
}

.homepageothersixblocks {
	display: inline-block;
	vertical-align:top; 
	width: 28%;
	padding: 2em 1em 1em 2em; 
	background-color: #ffffff;
}

.homepageothersixblocksplaatje {
	width:  100%;
	height: 10em;
	overflow: hidden;
	background-color: #eddab9;
}


.homepageothersixblocksplaatje img {
	width: 100%;
}


#speciaalvoorsamsung h1 a:link, a:visited {
	color: #e30716;
}


/* Media Queries */
@media screen and (min-width: 1023px) {
	html { font-size: 100%; }
}
@media screen and (max-width: 801px) {
	html { font-size: 90%; }
}

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


#wrapper { width: 100%; margin: 0; }

	#sitenaam { 
        font-size: 2.7em; 
}
        #col1 { display: none; }
        #col2 { width: 95%; 
	float: right;
	position: relative;
	right: 78%; /* 81% */
	overflow: visible;
}

.entry img {
    max-width: 100%;
    height: auto;
    float:none;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#header { background-image: url('./images/header-lostbeers-empty.jpg'); }

#responsive-menu-item { 
        display: none; 
}

#responsive-menu-icon { 
        display: inline; 
}

.wp-caption-text {
	display: inline;
        color: #555555;
}

.wp-caption {
    width: 100% !important;
    height: auto;
    margin-bottom: 1em;
}


.homepageothersixblocks {
	width: 93%;
	padding: 1em 1em 1em 1em; 
}



.page-navigation {
	margin: 1em;
}


.page-numbers {
	padding: 0.4em 0.7em;
	margin: 0.4em;	
        line-height: 2.6em;
}
	 
}






@media screen and (max-width: 401px) {
#xxlogo img { display: none; }
#header {
	background-repeat: repeat;
	height: 6em;
}



#searchformnav input{
	width: 9em;
}



}


.panel{ position: fixed; right: -15.625em; width: 15.625em; background:#222;}
.push{position:relative;}
.menu-link img { height: 1.4em;}
.mobile-menu li{border-bottom:1px #444 solid;list-style-type: none;
	font-size: 1.0em;
	font-weight: bold;
	font-family: 'open_sansregular', 'Trebuchet MS', sans-serif;
        line-height: 2.6em;
}

@media only screen and (max-width:900px) {
#primary-menu{display:none;}
.mobile-menu #primary-menu{display:block;}
.menu-link{display:inline-block;}
}