/*
Theme Name: Venn
Theme Description: An SEO-friendly blog theme by Henlo
Theme URI: http://henlo.co
Author: Henry Lockett
Version: 0.9
*/

/*html,
body { display: none !important; }*/

/* Styles go in css/style.css */

@font-face {
    font-family: 'Prox';
    src: url('./subsite/fonts/Proxima/proxima-nova-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Prox';
    src: url('./subsite/fonts/Proxima/proxima-nova-regular-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Prox';
    src: url('./subsite/fonts/Proxima/proxima-nova-bold-italic-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'Prox';
    src: url('./subsite/fonts/Proxima/proxima-nova-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body { font-family: 'Prox', sans-serif; }
h1, h2, h3, h4, h5, h6, input, textarea, select { font-family: 'Prox', sans-serif; }
/*h1,h2,h3, #mainNavContainer a { font-family: 'Prox Subrayada', sans-serif; }*/
h1,h2,h3, #mainNavContainer a { letter-spacing: 1px; }
blockquote { padding-top: 0; }
blockquote p { color: #555; }

h3 { text-transform: uppercase; }

.button { background-color: transparent; border: solid 3px #566c08; color: #566c08; border-radius: 0;  }
.button:hover { background-color: #566c08; color: #fff; }
.bgcol1 .button,
.bgcol4 .button,
.bgcol1trans .button,
.bgcol4trans .button { border-color: #fff; color: #fff; }
.bgcol1 .button:hover,
.bgcol4 .button:hover,
.bgcol1trans .button:hover,
.bgcol4trans .button:hover { background-color: #fff; color: #566c08; }

#header_logo { float:left; margin: 10px 10px 0 0; height: 40px; }
#header_title {  }

.page-featured-image { margin-top: 3em; height: 200px; background-position: 50% 50%; background-size: cover; }
.page-featured-image.circle { border-radius: 50%; width: 180px; height: 180px; margin: 4em auto 1em auto; }

.page-content { padding: 0 1em 10em 1em; }
.page-content .body { font-size: 125%; } 
/*#henloTiles { position: absolute; left: 0; top: 0; height: 300px; width: 100%; z-index: 0; }*/

.page-content img { display: inline-block; width: 100%; height: auto; margin-bottom: 20px; }
.page-content img.alignleft { float: left; }
.page-content img.alignright { float: right; }

#footer_image { margin-top: 3em; text-align: center; }
#footer_image img { width: 160px; height: auto; margin: 0 auto; }

.vcenter { height: 100%; width: 100%; display: table; table-layout: fixed; }
.vcenter > div,
.vcenter > span { display: table-cell; vertical-align: middle; text-align: center; width: 100%; }

.coverbg { background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
.coverlink { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }

.page-content { padding-bottom: 50px; }
/*.page-content img { width: 100% !important; height: auto !important; }*/
/*.page-content * { font-size: 14px; line-height: 30px; } */
.page-content h1 { text-transform: uppercase; letter-spacing: 2px; margin: 2.5em 0 1em 0; text-align: center; }
.page-content h1 { font-size: 2em; }
.page-content h2 { font-size: 1.4em;  }
.page-content p { text-align: justify; }
.page-content p,
.page-content li { font-size: 80%; }
.page-content.image h1 { margin-top: 0.5em; }
.page-content .page-summary * { font-size: 1.4em; }
.page-content .page-date p { margin-bottom: 1em; opacity: 0.5; }

.page-content.archive .page-title a { font-size: 1.4em; text-transform: uppercase; }

/*.navbar-default .navbar-nav>li>a { text-align: right; }*/

#pageMain { overflow: hidden; margin-bottom: 5em; }

#mainHeader { height: 3em; }
#mobile_logo,
#burger > div { width: 2em; }
#mobile_logo,
#burger > div { height: 2em; }
#mainHeader { padding: 1em; }
#mobile_logo { margin: 0.5em; }
#burger { padding: 0.5em; top: 0; }
#mainNavContainer > nav { left: 0; }
#mainNavContainer > nav > ul { padding: 4em 0.5em; margin: 0; }

#mobile_logo_text { margin-left: 1em; position: absolute; }
#mobile_logo_text { display: table; table-layout: fixed; width: 3em; height: 3em; }
#mobile_logo_text a { display: table-cell; vertical-align: middle; text-align: left; font-size: 24px;  }

#mainHeader { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; }
#mobile_logo { position: absolute; top: 0; left: 0; z-index: 120; display: inline-block; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; }
#logo { display: none; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; }
#logo { width: 100%; margin: 2em 0 1em 0; }
#text_logo { font-size: 28px; line-height: 30px; display: none; margin-bottom: 5px; }

#headerAbout { display: none; font-size: 14px; margin-bottom: 1em; }

/* Menu */
#mainNavContainer { height: 100%; }
#mainNavContainer > nav { /*box-sizing: content-box;*/ position: absolute; z-index: 110; width: 100%; top: 0; background: rgba(0,0,0,0.95); visibility: hidden; }
#mainNavContainer > nav.on,
#mainNavContainer > nav.off { visibility: visible; }
#mainNavContainer a { text-transform: uppercase; font-size: 0.75em; padding: 1em; display: inline-block; width: 100%; font-weight: bold; line-height: 1.5em; }
#mainNavContainer a:hover { background-color: rgba( 255,255,255,0.25); }
#mainNavContainer li { list-style: none; }
#mainNavContainer li.p { /*border-bottom: solid 1px rgba(255,255,255, 0.25); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); */ position: relative; }
#mainNavContainer li.p:last-child { border-bottom: none; }
#mainNavContainer ul.k { margin: 0; position: relative; }
#mainNavContainer ul.k a { opacity: 0.8; }
#mainNavContainer .navArrow { display: none; color: #fff; float: right; position: absolute; left: 0; top: 0; height: 42px; width: 42px; cursor: pointer; }
#mainNavContainer ul.k:hover .navArrow { background-color: rgba(255,255,255,0.25); }
#mainNavContainer ul.k a:hover { background-color: rgba(255,255,255,0.25); }
#burger { position: absolute; right: 0; display: inline-block; z-index: 130; cursor: pointer; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; }
#burger:hover,
#burger.on { background-color: rgba(255,255,255,0.2); }
#burger > div { position: relative; }
.burgerline {  position: absolute; left: 0; width: 100%; }
.burgerlineTop { top: 0; }
.burgerlineMiddle { height: 100%; }
.burgerlineBottom { top: auto; bottom: 0; }

.burgerlineTop,
.burgerlineMiddle > div > div,
.burgerlineBottom {
  -webkit-animation-fill-mode: both; 
  animation-fill-mode: both;
  animation-duration: 300ms;
  animation-delay: 0;
  /* If you change the height, also change the margins in the animations */
  height: 2px;
}
.burgerlineTop {
  -webkit-transform-origin: 50% 50% 0; 
  transform-origin: 50% 100% 0;
}
.burgerlineMiddle > div > div {
  -webkit-transform-origin: 50% 50% 0;
  transform-origin: 50% 50% 0;
}
.burgerlineBottom {
  -webkit-transform-origin: 50% 50% 0;
  transform-origin: 50% 0% 0;
}

#burger.on .burgerline {    

}
#burger.on .burgerlineTop { animation-name: burgerlineTopOn; }
#burger.on .burgerlineMiddle > div > div { animation-name: burgerlineMiddleOn; }
#burger.on .burgerlineBottom { animation-name: burgerlineBottomOn; }

#burger .burgerlineTop { animation-name: burgerlineTopOff; }
#burger .burgerlineMiddle > div > div { animation-name: burgerlineMiddleOff; }
#burger .burgerlineBottom { animation-name: burgerlineBottomOff; }

@keyframes burgerlineTopOn {
    0% { top: 0; -webkit-transform: rotate(0); transform: rotate(0); margin-top: 0; }
    50% { top: 50%; -webkit-transform: rotate(0); transform: rotate(0); margin-top: -1px; }
    100% { top: 50%; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -1px; }
}
@keyframes burgerlineMiddleOn {
    0% { opacity: 1; }
    50% { opacity: 1; }
    51% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes burgerlineBottomOn {
    0% { bottom: 0%; -webkit-transform: rotate(0); transform: rotate(0); margin-bottom: 0; }
    50% { bottom: 50%; -webkit-transform: rotate(0); transform: rotate(0); margin-bottom: -1px; }
    100% { bottom: 50%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-bottom: -1px; }
}
@keyframes burgerlineTopOff {
    100% { top: 0%; -webkit-transform: rotate(0); transform: rotate(0); margin-top: 0; }
    50% { top: 50%; -webkit-transform: rotate(0); transform: rotate(0); margin-top: -1px; }
    0% { top: 50%; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -1px; }
}
@keyframes burgerlineMiddleOff {
    100% { opacity: 1; }
    51% { opacity: 1; }
    50% { opacity: 0; }
    0% { opacity: 0; }
}
@keyframes burgerlineBottomOff {
    100% { bottom: 0%; -webkit-transform: rotate(0); transform: rotate(0); margin-bottom: 0; }
    50% { bottom: 50%; -webkit-transform: rotate(0); transform: rotate(0); margin-bottom: -1px; }
    0% { bottom: 50%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-bottom: -1px; }
}

aside { padding-top: 10px; }
aside .gallery img { width: 100%; margin-bottom: 10px; }

.post-cards.row { margin-left: -1em; margin-right: -1em; }
.post-card-item { margin-bottom: 2em; }
.post-card-item > div { padding: 1em; margin: 1em; height: 100%; background-color: rgba(255,255,255,0.25); }
.post-card-item h3 { font-weight: bold; margin-bottom: 1em; }
.post-card-item a { text-transform: uppercase; font-size: 1.4em; }
.post-card-item .post-card-img { padding-bottom: 60%; margin-bottom: 1.5em; position: relative; }
.post-card-item p { margin-bottom: 0; }
.post-card-item .post-card-note { font-size: 0.8em; text-transform: uppercase; opacity: 0.75; }

.post-category { position: absolute; top: 0; left: 0; z-index: 100; width: 100%; font-size: 0.75em; font-weight: bold; text-transform: uppercase; border-top: solid 0.5em; border-color: #000; }
.post-category a { padding: 0.5em; padding: 0.25em 1em 0.5em 1em; display: inline-block; color: #fff; background-color: #000; float: right; }


.gallerygrid { width: 100%; display: inline-block; text-align: center; }
.gallerygriditem { position: relative; display: inline-block; float: left; margin-right: 10px; margin-bottom: 10px; }
/*.gallerygriditem.landscape { width: 33%; padding-bottom: 25%; }
.gallerygriditem.portrait { width: 33%; padding-bottom: 50%; }*/
.gallerygriditem {  }
.gallerygridimg { cursor: pointer; height: 160px;  }



.modalControls { position: fixed; top: 1em; right: 1em; z-index: 1005; text-align: right; background-color: #fff; }
.modalControls a { cursor: pointer; padding: 1em; display: inline-block; border: solid 1px rgba(0,0,0,0.25); border-left: none;  }
.modalControls a:nth-child(1) { border-left: solid 1px rgba(0,0,0,0.25); }
.modalControls a:hover { border-bottom: solid 1px rgba(0,0,0,0.5); background-color: rgba(180,180,180,0.2); }
.modalOuter { position: fixed; top: 0; left: 0; background-color: rgba(255,255,255,0.95); width: 100%; height: 100%; z-index: 1000; padding: 10% 10% 10% 10%; }
.modalOuter { display: table; table-layout: fixed; }
.modalInner { display: table-cell; vertical-align: middle; text-align: center; width: 100%; position: relative; }
.modalBox { z-index: 1000; display: inline-block; width: 90%; position: absolute; width: 100%; height: 100%; top:0; left: 0; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; }
.modalOuter,
.modalBox { display: none; }
.modalOuter.on { display: table; }
.modalBox.on { display: inline-block; }
.modalText { position: fixed; width: 90%; box-sizing: border-box;  bottom: 1em; left: 5%; padding: 1em; border: solid 1px rgba(0,0,0,0.25); background-color: #fff; text-align: center;  }
.modalText h3 { margin: 0 0 0.2em 0; }

body.archive .content-area article:nth-child(1) { padding-top: 0; }


/* Comments */
.comment-author img { display: none; }
.commentlist { list-style: none; margin-left: 0; }
.commentlist cite { width: auto; float: left; margin-right: 6px; }
.commentlist cite:before { content: ''; }

/* Social Icons */
.socialicons a { float: left; display: inline-block; width: 3em; height: 3em; }
.socialicons a:before {  width: 3em; height: 3em;line-height: 3em; text-align: center; display: inline-block;  }

#mainHeader .socialicons { position: absolute; top: 0; right: 3em; }
#mainHeader .socialicons a { color: #fff; }

/* MAX */
@media only screen and (max-width: 767px) {	

	#headerToolbar { position: static; }	
	
}


/* MIN */
@media only screen and (min-width: 480px) {
	.page-content p { text-align: left; }
	.page-content p,
	.page-content li { font-size: 100%; }

	#burger,
	#mainHeader,
	#mobile_logo { position: fixed; }

	#mobile_logo_text { margin-left: 0; }
	#mobile_logo_text a { text-align: center; }

	#mainHeader { height: 100%; }
	#mainNavContainer > nav { width: auto; height: auto; }

	#burger { left: 0; right: auto; }

	#mobile_logo,
	#burger > div { width: 2em; }
	#mobile_logo,
	#burger > div { height: 2em; }
	#mainHeader { padding: 1em; width: 3em; }
	#mobile_logo { margin: 0.5em; }
	#burger { padding: 0.5em; top: 3em; }
	#mainNavContainer > nav { left: 0; top: 6em; }
	#mainNavContainer > nav > ul { padding: 0 0 0 3em; }

	#mainNavContainer a { padding-right: 2em; white-space: nowrap; }

	.page-featured-image { margin: 0 0 0 3em; }
	.page-featured-image.circle { margin-left: 5em; margin-top: 4em; }
	.page-content { margin-left: 4em; padding-top: 3em; }
	.page-content h1 { margin-top: 4px; text-align: left; }
	.page-content.image { padding-top: 1em; }

	#mainHeader .socialicons { right: auto; top: auto; bottom: 0; left: 0; }
	#mainHeader .socialicons a { clear: both; display: block; }

	.page-content img { display: inline-block; width: 50%; height: auto; }
	.page-content img.alignleft { margin-right: 10px; }
	.page-content img.alignright { margin-left: 10px; }

}

@media only screen and (min-width: 767px) {

	.page-featured-image { height: 18.75em; box-sizing: content-box; }
	.page-featured-image { margin: 0 0 0 14em; max-width: 50em; }
	.page-featured-image.circle { margin-left: 17em; }
	.page-content { margin-left: 16em; max-width: 48em; padding-top: 6em; }

	/*#footer_image { position: fixed; left: 1em; bottom: 1em; }*/
	#footer_image { text-align: left; }
	#footer_image img { margin: 3em 0 0 0; }

	#burger { display: none; }

	#logo,
	#text_logo { display: inline-block; margin-top: 1.5em; }
	#mobile_logo,
	#mobile_logo_text { display: none; }
	
	#headerAbout { display: inline-block; }

	#mainHeader { padding: 1em; width: 14em; }
	#mobile_logo { margin: 0.5em; }

	#mainNavContainer { height: auto; width: 100%; /*position: absolute; top: 18.75em;*/ margin: 0 -1em; }
	#mainNavContainer > nav	{ visibility: visible; width: 100%; position: static; background-color: transparent; overflow: visible; }
	#mainNavContainer > nav > ul { padding: 0; }
	#mainNavContainer ul.p { border-bottom: none; }
/*	#mainNavContainer li.p { box-shadow: inset 0 -1px 0 rgba(255,255,255,0.25); }	*/
	#mainNavContainer ul.k { position: absolute; left: 100%; margin-left: -42px; top: 0; width: 42px; padding-left: 42px; overflow: hidden; }
	#mainNavContainer li.k { background-color: #33a; }
	#mainNavContainer ul.k:hover { width: 300px; }
	#mainNavContainer .navArrow { display: table;  }
	#mainNavContainer a { padding-left: 1.5em; }
	#mainNavContainer li.k a { background-color: rgba(0,0,0,0.1); }

	#mainHeader .socialicons a { font-size: 1.5em; }

}

@media only screen and (min-width: 1024px) {
	.page-content p { text-align: left; }
}