/*
	Theme Name: Blog h2a
	Theme URI: http://h2a.lu
	Author: h2a
	Author URI: http://h2a.lu
	Description: h2a theme rock's !
	Version: 2.0
*/

/* h2a reset */
@import url('css/normalize.css');
@import url('css/standards.css');

/* Avenir webfont */
@import url('css/fonts/font.css');

/* Source sans webfont */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic);

/* -----------------------------------
	BASE
------------------------------------ */

/* Body */
body { font-family: 'Open Sans', sans-serif; color: #666; font-size: 15px; background-color: #f6f6f6; }

/* Headlines */
h1, h2, h3, h4, h5, h6 { font-family: 'Avenir', sans-serif; }
h1, .h1 { color: #CC0033; font-size: 35px; }
h2, .h2 { color: #CC0033; font-size: 30px; }
h3, .h3 { color: #CC0033; font-size: 25px }
h4, .h4 { color: #CC0033; font-size: 20px; text-transform: uppercase; }
h5, .h5 { color: #CC0033; font-size: 18px; text-transform: uppercase; }
h6, .h6 { color: #CC0033; font-size: 16px; text-transform: uppercase; }

/* Fonts */
.font-1 { font-family: 'Avenir', sans-serif; }
.font-2 { font-family: Georgia, serif; font-style: italic; }

/* Links */
a { color: #CC0033; text-decoration: underline;  }
a:hover { text-decoration: none; }
a:focus { outline: 0; }

/* Btn */
.btn { font-family: 'Avenir'; background-color: #CC0033; color: white; border-radius: 3px; padding: 6px 18px; display: inline-block; text-decoration: none; font-size: 14px; }
.btn:hover { background-color: #333; }

/* Forms */
input[type="text"], input[type="password"] { border-radius: 3px; padding: 10px; color: #666; background-color: white; }
input[type="submit"] { font-family: 'Avenir'; background-color: #CC0033; color: white; border-radius: 3px; padding: 6px 18px; display: inline-block; text-decoration: none; font-size: 14px; border: 0; }
textarea { max-width: 280px; }
button { border: 0; }

/* Blockquote */
blockquote { color: #CC0033; margin: 30px 0; padding-left: 40px; border-left: 1px solid #CC0033; font-family: Georgia, serif; font-style: italic; }

/* Misc */
img { max-width: 100%; height: auto !important; }
#wpstats { position: absolute; left: 0; bottom: 0; clip:rect(0 0 0 0); opacity: 0; z-index: -5000; }
p { margin: 0; }
* + p { margin-top: 15px; }

/* -----------------------------------
	LAYOUT
------------------------------------ */
#wrapper { margin: 100px auto 0 auto; position: relative; padding: 0 30px; }
#header { float: left; width: 15%; }
#main { width: 68%; float: left; padding-left: 50px; display: block; }
#aside { width: 15%; max-width: 250px; float: right; }

/* -----------------------------------
	HEADER
------------------------------------ */

	/* Top bar */
	#menu-top-bar { position: fixed; top: 0; left: 0; right: 0; background: #CC0033; text-align: center; font-size: 13px; padding: 15px 0; z-index: 800; box-shadow: 0 0 5px rgba(0,0,0,.2); height:54px; -webkit-transition: top 0.2s ease-in-out; transition: top 0.2s ease-in-out; letter-spacing: -4px; }
	#menu-top-bar .menu-item { display: inline-block; letter-spacing: normal; }
	#menu-top-bar .menu-item + .menu-item { margin-left: 40px; }
	#menu-top-bar a { color: white; text-decoration: none; display: block; }
	#menu-top-bar .menu-item.rss a { background: url(img/sprite.png) -315px top no-repeat; width: 16px; height: 15px; text-indent: 5000px; overflow: hidden; position: relative; top: 3px; }
	
	/* Branding */
	.branding { font-size: 13px; max-width: 200px; }
	.branding-logo { margin-bottom: 25px; }
	.branding-intro { color: #333; font-size: 16px; display: block; font-weight: normal; border-bottom: 1px solid #666; padding-bottom: 15px; }
	
	/* Menu */
	.menu { }
	.menu-content { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: #CC0033; z-index: 300; padding-top: 120px; }
	.menu.js-closed .menu-content { display: none; }
	.menu-btn { position: fixed; left: 0; top: 0; color: white; z-index: 1000; text-decoration: none; font-size: 14px; padding-left: 70px; height: 54px; background-color: #ae002c; line-height: 50px; padding-right: 50px; -webkit-transition: top 0.2s ease-in-out; transition: top 0.2s ease-in-out; }
	.menu-btn:before { content: ""; position: absolute; left: 30px; top: 18px; width: 25px; height: 2px; background: white; box-shadow: 0 7px 0 0 white, 0 14px 0 0 white; }
	.menu-list { -moz-columns: 3; -moz-column-gap: 3em; -moz-column-rule: 1px solid #ae002c; -webkit-columns: 3; -webkit-column-gap: 3em; -webkit-column-rule: 1px solid #ae002c; columns: 3; column-gap: 3em; column-rule: 1px solid #ae002c; width: 95%; max-width: 960px; margin: 0 auto; }
	.menu-list .cat-item { position: relative; }
	.menu-list .cat-item a { color: white; text-decoration: none; font-size: 18px; font-weight: 100; padding: 10px 15px; display: block; position: relative; }
	.menu-list .cat-item a:hover { background-color: #ae002c; border-radius: 3px; }
	.menu-list .cat-item .menu-num { background-color: #ae002c; font-size: 12px; padding: 3px 8px 5px 8px; border-radius: 3px; position: absolute; right: 0; top: 8px; color: white; }	
	
		#searchform { text-align: center; width: 90%; max-width: 700px; margin: 0 auto 80px auto; position: relative; }
		#searchform label { display: none; }
		#searchform input[type=text] { background-color: #ae002c; border: none; color: white; font-size: 25px; font-weight: 100; border-radius: 50px; padding: 16px 35px; width: 100%; }
		#searchform input[type=submit] { background-color: transparent; border-radius: 0; padding: 0; position: absolute; width: 31px; height: 30px; right: 24px; top: 16px; background: url(img/sprite.png) -315px -42px no-repeat; text-indent: -5000px; overflow: hidden; opacity: .3 }
		#searchform input[type=submit]:hover { opacity: 1; }
		
		#searchform ::-webkit-input-placeholder { color: white !important; opacity: .3 !important; }
		#searchform ::-moz-placeholder {  color: white !important; opacity: .3 !important; }
		
		.lt-ie9 .menu-content { position: absolute; top: -100px; }
		
	#header.nav-up #menu-top-bar,
		#header.nav-up .menu-btn { top: -54px; }
	
/* -----------------------------------
	POST LIST
------------------------------------ */
.post-list { border-left: 1px solid #eee; border-top: 1px solid #eee; }
.post-list .post-item { width: 50%; float: left; border-bottom: 1px solid #eee; border-right: 1px solid #eee; position: relative; overflow: hidden; }
.post-list .post-item .post-link { color: #666; text-decoration: none; font-size: 13px; display: block; position: relative; top: 0; height: 350px; padding: 30px 30px 60px 30px; background-color: white; transition: all 200ms ease-in-out; }
.post-list .post-item:hover .post-link:after { content: ""; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border: 1px solid #CC0033; z-index: 500; }
.post-list .post-item .post-link:hover {  }
.post-list .post-item .post-title { color: #CC0033; font-size: 18px; font-weight: normal; margin-bottom: 0; margin-top: 15px; }
.post-list .post-item .read-more { color: #CC0033; border-bottom: 1px solid #CC0033; padding-bottom: 2px; }
.post-list .post-item img { border-radius: 5px; }

	/* Post metas */
	.post-list .post-metas { position: absolute; left: 0; right: 0; bottom: 15px; padding: 0 30px; display: block; z-index: 50; font-size: 12px; color: #999; }
	.post-list .post-metas .post-metas-item { display: inline-block; }
	.post-list .post-metas .post-metas-item + .post-metas-item:before { content: ", "; display: inline; }
	.post-list .post-metas .post-metas-item .post-metas-link { color: #999; }
	
	.post-list .post-metas .post-metas-comments { position: absolute; bottom: 0; right: 20px; }
	.post-list .post-metas .post-metas-comments:before { display: none !important; }
	.post-list .post-metas .post-metas-comments span { display: none; }
	.post-list .post-metas .post-metas-comments a { background: #eee; border-radius: 20px; width: 20px; display: block; height: 20px; text-align: center; text-decoration: none; position: relative; }
	.post-list .post-metas .post-metas-comments a:before { content: ""; display: block; width: 0; height: 0; border-top: 10px solid #eee; border-right: 10px solid transparent; position: absolute; bottom: -4px; left: 3px; }

	/* Navigation */
	.navigation { margin-top: 40px; }
	.navigation a:first-child { float: left; }
	.navigation a:last-child { float: right; }
	.navigation a[rel=prev] { float: left; }
	.navigation a[rel=next] { float: right; }
	
	/* Wp page navi */
	.wp-pagenavi { margin-top: 40px; font-size: 12px; text-align: center; }
	.wp-pagenavi span, .wp-pagenavi a { display: inline-block; margin-right: 5px; border: 1px solid transparent; }
	.wp-pagenavi a { background-color: white; padding: 7px 10px; text-decoration: none; border-radius: 3px; border-color: white; }
	.wp-pagenavi a:hover { border-color: #CC0033; }
	.wp-pagenavi .current { background-color: white; padding: 7px 10px; text-decoration: none; border-radius: 3px; font-weight: bold; }
	.wp-pagenavi .pages { font-family: Georgia, serif; font-style: italic; margin-right: 25px; color: #999; }
	
	/* Category title */
	.index-title { margin-top: 60px; }
	
/* -----------------------------------
	POST SINGLE
------------------------------------ */
.post-single { margin: 0 auto; color: #3c3839; width: 90%; -moz-osx-font-smoothing: grayscale; }
	
	.post-single .post-header { background-color: white; padding: 50px 50px 0 50px; border-top-left-radius: 5px; border-top-right-radius: 5px; }
	.post-single .post-header .post-img { margin-bottom: 30px; width: 100%; }
	.post-single .post-title { font-weight: bold; text-align: center; font-size: 42px; margin: 0; line-height: normal; }
	
	.post-single .post-metas { text-align: center; color: #666; margin-top: 10px; }
	.post-single .post-metas-item { display: inline-block; }
	.post-single .post-metas a { text-decoration: none; color: #666; text-decoration: underline; }
	.post-single .post-metas a:hover { text-decoration: none; color: #CC0033; }
	.post-single .post-metas-item + .post-metas-item:before { content: "∙"; display: inline-block; padding: 0 5px; color: #ccc; }
	
	.post-single .post-content { line-height: 23px; background-color: white; padding: 50px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
	.post-single .post-content blockquote { font-size: 18px; line-height: 28px; }
	.post-single .post-content iframe { background: #eee; border-radius: 5px; max-width: 100%; }
	.post-single .post-content img { border-radius: 5px; }
	.post-single .post-content p:first-child { margin: 0; text-align: center; }
	
	.post-single .post-share { border-top: 1px solid #CC0033; border-bottom: 1px solid #CC0033; padding: 30px 0; margin: 40px 0; }
	.post-single .post-share-title { margin: 0 0 20px 0; }
	.post-single .post-share-item { width: 32%; float: left; text-align: center; }
	.post-single .post-share-item + .post-share-item { border-left: 1px solid #ccc; }
	
	/* Comments */
	.commentlist { padding: 0; }
	.commentlist .comment { list-style-type: none; background-color: white; padding: 20px 20px 20px 35px; border-radius: 5px; position: relative; }
	.commentlist .comment + .comment { margin-top: 10px; }
	.comment-author,
	.comment-meta { color: #CC0033; font-family: Georgia, serif; font-style: italic; }
	.comment-author .avatar { position: absolute; left: -19px; top: 25px; border-radius: 5px; border: 3px solid white; }
		
		.commentlist .children { margin-top: 20px; }
		.commentlist .children .comment { border-left: 1px solid #CC0033; border-radius: 0; padding: 0; padding-left: 20px; background-color: transparent; }
		.commentlist .children .comment + .comment { margin-top: 20px; }
		.commentlist .children .comment-author .avatar { position: relative; left: auto; top: auto; }
	
/* -----------------------------------
	ASIDE
------------------------------------ */
.aside-block { text-align: center; }
.aside-block img { box-shadow: 0 0 3px #ccc; }
.aside-block + .aside-block { margin-top: 20px; }


/* -----------------------------------
	FOOTER
------------------------------------ */
#footer { border-top: 1px solid #eee; margin-top: 60px; padding-bottom: 50px; background-color: #CC0033; font-size: 13px; color: white; }
.footer-content { width: 95%; margin: 0 auto; max-width: 1100px }

	#footer a { color: white; }
	#footer .btn-cta { display: block; background: #CC0033; color: white; text-decoration: none; padding: 10px 0 12px 0; text-transform: uppercase; font-size: 15px; font-weight: normal; border-radius: 3px; border: 1px solid white; }
	#footer .btn-cta + .btn-cta { margin-top: 5px; }
	
	/* Skillz */
	#menu-competences { border-bottom: 1px solid white; color: white; padding: 50px 0; text-align: center; letter-spacing: -4px; }
	#menu-competences .menu-item { display: inline-block; text-align: center; width: 16.666%; vertical-align: top; letter-spacing: normal; }
	#menu-competences .menu-item a { text-decoration: none; }
	#menu-competences .menu-item a:hover { opacity: .8; }
	#menu-competences .menu-item a:before { content:""; display: block; width: 45px; height: 45px; background: url(img/sprite.png) left top no-repeat; margin: 0 auto 10px auto; }
	
	#menu-competences .menu-item.opmarketing a:before { background-position: left top; }
	#menu-competences .menu-item.emarketing a:before { background-position: -45px top; }
	#menu-competences .menu-item.graphicdesign a:before { background-position: -90px top; }
	#menu-competences .menu-item.webdesign a:before { background-position: -135px top; }
	#menu-competences .menu-item.webdev a:before { background-position: -180px top; }
	#menu-competences .menu-item.mobile a:before { background-position: -225px top; }
	#menu-competences .menu-item.pub a:before { background-position: -270px top; }
	
	/* Cols */
	.footer-col { border-bottom: 1px solid white; }
	.footer-col-item { display: inline-block; width: 33.3333%; padding: 25px 30px; text-align: center; vertical-align: top; height: 210px; }
	.footer-col-item + .footer-col-item { border-left: 1px solid white; margin-left: -1px; }
	.footer-col-item .logo-h2a { margin-bottom: 20px; display: block; }
	.footer-col-title { color: white; text-transform: none; font-weight: normal; margin: 0 0 15px 0; }
	
		/* Social */
		.social { position: relative; top: 30px; }
		.social-item { display: inline-block; width: 25%; text-align: center; }
		.social-item + .social-item { border-left: 1px solid white; margin-left: -1px; }
		.social-link { width: 27px; height: 27px; background: blue; display: block; margin: 0 auto; text-indent: -5000px; overflow: hidden; background: url(img/sprite.png) -315px -15px no-repeat; }
		.social-link.facebook { background-position: -315px -15px; }
		.social-link.twitter { background-position: -342px -15px; }
		.social-link.pinterest { background-position: -369px -15px; }
		.social-link.google { background-position: -396px -15px; }
	
		.social-link:hover { opacity: .8; }
	
	/* Address */
	.footer-address { font-style: normal; text-align: center; padding: 30px; }
	.footer-address span + span { }

/* ----------------------------------
	MEDIA QUERIES
------------------------------------- */

/* Larges screens */
@media screen and (min-width: 1500px) {
	#main {  }
	#wrapper { padding: 0 50px; }
	.menu-btn { padding-left: 100px; }
	.menu-btn:before { left: 50px; }
	.post-list .post-item { width: 25%; }
	.post-list .post-item:first-child { width: 50%; }
	.post-list .post-item:first-child h3 { font-size: 25px; }
	.post-list .post-item:first-child .post-link:before { content: ""; display: block; width: 0; height: 0; border-top: 40px solid #CC0033; border-right: 40px solid transparent; position: absolute; left: 0; top: 0; }
	.post-list .post-item:first-child .read-more { margin-top: 10px; display: inline-block; }
	.post-list .post-item .post-link { height: 390px; }
	.post-single { width: 70%; }
}

@media screen and (max-width: 1150px) {
	#header { width: 20%; margin-bottom: 35px; }
	#aside { float: left; width: 20%; }
	#main { float: right; width: 80%; padding-right: 0; padding-left: 30px; }
	
	#menu-top-bar { text-align: right; padding-right: 15px; }
	#menu-top-bar .menu-item + .menu-item { margin-left: 20px; }
	
	#menu-competences .menu-item { width: 33.3333%; margin-bottom: 30px; }
	.footer-col-item:first-child { width: 100%; border-bottom: 1px solid white; }
	.footer-col-item { width: 50%; height: auto; }
	.footer-col-item + .footer-col-item { border-left: none; }
	.footer-col-item:last-child { border-left: 1px solid white; }
	
}

@media screen and (max-width: 1040px) {
	
	.menu-list { -moz-columns: 2; -moz-column-gap: 3em; -moz-column-rule: 1px solid #ae002c; -webkit-columns: 2; -webkit-column-gap: 3em; -webkit-column-rule: 1px solid #ae002c; columns: 2; column-gap: 3em; column-rule: 1px solid #ae002c; width: 90%; margin: 0 auto; text-align: left; }
	
	.menu-content { padding-top: 88px; }
	#searchform { margin-bottom: 25px; }
	#searchform input[type=text] { font-size: 18px; padding: 11px 22px; }
	#searchform input[type="submit"] { right: 16px; top: 7px; }
	
}

@media screen and (max-width: 768px) {
	#wrapper { padding: 0 15px; }
	#header { float: none; width: 100%; margin-bottom: 20px; text-align: center }
	#aside { float: none; width: auto; max-width: none; margin-left: -15px; margin-top: 60px; }
	#main { float: none; width: 100%; padding: 0; }
	.branding { width: 100%; max-width: none; }
	.post-single { width: 100%; max-width: none; }
	.aside-block { float: left; width: 33.3333%; padding-left: 15px; }
	.aside-block + .aside-block { margin-top: 0 }
}

@media screen and (max-width: 750px) {
	#menu-top-bar .menu-item { display: none; }
	#menu-top-bar .menu-item:last-child { display: inline-block; }
}

@media screen and (max-width: 695px) {
	
	.menu-list { -moz-columns: 1; -moz-column-gap: 3em; -moz-column-rule: 1px solid #ae002c; -webkit-columns: 1; -webkit-column-gap: 0; -webkit-column-rule: 1px solid #ae002c; columns: 1; column-gap: 3em; column-rule: 1px solid #ae002c; width: 90%; margin: 0 auto;  }
	.post-single .post-title { font-size: 30px; }
	
	.post-single .post-share-item { width: 100%; float: none; text-align: left; }
	.post-single .post-share-item + .post-share-item { border-left: none; border-top: 1px solid #ccc; padding-top: 15px; margin-top: 15px; }
	
	#menu-competences .menu-item { width: 50%; }
	.footer-col-item { width: 100% !important; height: auto; }
	.footer-col-item:last-child { border-left: none; border-top: 1px solid white; margin-top: 40px; }
	
}

@media screen and (max-width: 480px) {
	#aside { margin-left: auto; }
	.branding-txt { display: none; }
	.branding-intro { border: none; padding-bottom: 0; }
	.post-list { border-left: none; border: 0; }
	.post-list .post-item { width: 100%; margin-bottom: 15px; border: 0; }
	.post-list .post-item .post-link { height: auto; padding: 15px 15px 65px 15px; border-radius: 5px; }
	.post-single .post-header, .post-single .post-content { padding: 15px; }
	.post-single .post-title { font-size: 25px; }
	.post-list .post-metas { padding: 0 15px; }
	.wp-pagenavi .pages { display: none; }
	.wp-pagenavi .last { display: none; }
	.wp-pagenavi .extend { display: none; }
	.aside-block { float: none; width: auto; padding-left: 0; }
	.aside-block + .aside-block { margin-top: 15px; }
	#menu-competences .menu-item { width: 100%; }
}

@media screen and (max-height: 700px) {
	
	.menu-content { position: absolute; top: -100px; }
		
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
	.header-top a.rss,
	 #menu-competences .menu-item a:before,
	 #searchform input[type=submit],
	 .social-link { background-image: url('img/sprite@x2.png'); background-size: 500px 267px; }
}