/*
Theme Name: Azijn
Theme URI: http://www.azijn.be
Author: Twenty First Media
Author URI: http://www.azijn.be
Description: Custom theme for Azijn.
Version: 0.5
*/

/* --- 0. Resets --- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
{ margin:0; padding:0; border:0; outline:0; vertical-align:baseline; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
html, body { width:100%; }

/* --- 1. Basics --- */

* { margin:0; }
html, body { height:100%; }
html { background:#dedede url('images/bg.jpg') top center no-repeat fixed; 
-webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; }	

ul { list-style:none; }

p { margin:16px 0; }
.left { float:left} .right { float:right; } .center { text-align:center; }
.alignleft { float:left; margin-right:10px; } .alignright { float:right; margin-left:10px; } .aligncenter { display:block; margin:5px auto 5px auto; text-align:center; }

a { text-decoration:none; }

.clearfix { *zoom:1; }
.clearfix:before, .clearfix:after { display:table; content:""; line-height:0; }
.clearfix:after { clear:both; }

/* -- 1.1 Typography -- */

@font-face {
    font-family:'ProxNovReg';
    src:url('js/proxima_nova_regular-webfont.eot');
    src:url('js/proxima_nova_regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('js/proxima_nova_regular-webfont.woff') format('woff'),
        url('js/proxima_nova_regular-webfont.ttf') format('truetype'),
        url('js/proxima_nova_regular-webfont.svg#proxima_nova_rgregular') format('svg');
    font-weight:normal;
    font-style:normal;
}

@font-face {
    font-family:'ProxNovBold';
    src:url('js/proxima_nova_bold-webfont.eot');
    src:url('js/proxima_nova_bold-webfont.eot?#iefix') format('embedded-opentype'),
        url('js/proxima_nova_bold-webfont.woff') format('woff'),
        url('js/proxima_nova_bold-webfont.ttf') format('truetype'),
        url('js/proxima_nova_bold-webfont.svg#proxima_nova_rgbold') format('svg');
    font-weight:normal;
    font-style:normal;
}

body { font-family:'ProxNovReg', Helvetica, arial, sans-serif; font-weight:normal; font-size:18px; }

h1, h2, h3, h4, h5, h6 { text-rendering:optimizelegibility; }

h1 { font-size:22px; font-family:'ProxNovBold'; font-weight:normal; }
h2 { font-size:20px; font-family:'ProxNovBold'; font-weight:normal; }
h3 { font-size:18px; font-family:'ProxNovBold'; font-weight:normal; }
h4 { font-size:16px; font-weight:normal; }
h5 { font-size:14px; font-weight:normal; }
h6 { font-size:13px; font-weight:normal; }

/* --- 2. Wrapper --- */

#wrapper { margin:0 auto -60px; max-width:900px; min-height:100%; height:auto !important; height:100%; }

/* --- 3. Header --- */

#header { width:100%; }

/* -- 3.1 Navigation -- */

#navi { width:100%; height:40px; background:#ea6e81; -webkit-border-radius:0 0 15px 15px; border-radius:0 0 15px 15px; }

#navi a#pull { display:none; position:relative; float:left; margin:0 2%; padding-left:50px; font-family:'ProxNovBold'; font-weight:normal; font-size:16px; line-height:40px; color:#fff; }
#navi a#pull:before { content:""; position:absolute; left:0px; top:8px; width:35px; height:20px; -webkit-border-radius:4px; border-radius:4px; border:2px solid #fff; background:url(images/sprite.png) 5px 4px no-repeat; }

#navi > ul { float:left; text-transform:lowercase; }
#navi > ul > li { position:relative; float:left; display:inline-block; margin:0 25px; height:40px; font-family:'ProxNovBold'; font-weight:normal; font-size:16px; }
#navi > ul > li > a { display:inline-block; line-height:40px; color:#fff; }
#navi > ul > li > a:hover, #navi > ul > li.current-menu-item > a, #navi > ul > li.current-menu-ancestor > a { color:#361f27; }

#navi > ul > li > ul { display:none; position:absolute; padding-top:1px; top:39px; left:-15px; z-index:999; margin:0; background:#ea6e81; }
#navi > ul > li:hover > ul { display:block; }
#navi > ul > li > ul > li { background:#ea6e81; line-height:30px; font-family:'ProxNovReg'; font-weight:normal; }
#navi > ul > li > ul > li > a { white-space:nowrap; display:block; padding:0 15px; color:#fff; }
#navi > ul > li > ul > li > a:hover { color:#fff; background:#361f27; }
#navi > ul > li > ul > li.current-menu-item > a { color:#361f27; }
#navi > ul > li > ul > li.current-menu-item > a:hover { color:#fff; }

#navi > ul > li.lang > a { float:left; margin:14px 3px; width:18px; height:12px; text-indent:-9999px; background-image:url(images/flags.png); background-repeat:no-repeat; border:1px solid #ea6e81; }
#navi > ul > li.lang > a.current { border-color:#FFF; }
#navi > ul > li.lang > a.nl { background-position:0 0; }
#navi > ul > li.lang > a.be { background-position:0 -12px; }
#navi > ul > li.lang > a.fr { background-position:0 -24px; }

#searchform { position:relative; float:right; margin:9px 30px 9px 0; padding:0 10px; width:99px; height:22px; font-family:'ProxNovReg'; font-size:12px; line-height:20px; color:#888; background:#fff; -webkit-border-radius:4px; border-radius:4px; border:0; }

/* -- 3.2 Logo -- */

#logo { margin:12px 0 6px; width:100%; overflow:hidden; }
#logo .left img, #logo .right img { max-width:100%; }

/* --- 4. Container --- */

#container { position:relative; width:100%; background:#fff; -webkit-border-radius:25px 0 25px 0; border-radius:25px 0 25px 0; border:10px solid #ea6e81;
-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

#container .host { position:absolute; bottom:-11px; left:-224px; width:257px; height:555px; background:url(images/host.png?v=1.1) 0 0 no-repeat; }

/* --- 4.1 Frontpage --- */

#front-content { float:left; padding:3%; width:40%;
-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

#front-navi { float:right; width:60%; }
#front-navi ul { margin:6% 0 0; }
#front-navi ul li { float:left; position:relative; margin:0 6% 6% 0; width:44%; background:#fff; -webkit-border-radius:15px 0 15px 0; border-radius:15px 0 15px 0; border:5px solid #ea6e81; overflow:hidden;
-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

#front-navi ul li .cat-image { width:100%; height:60px; background-position:center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; }
#front-navi ul li img { margin:0 auto; display:block; max-width:100%; height:auto; max-height:50px; }
#front-navi ul li a.title { display:block; padding:10px 0; width:100%; text-align:center; font-family:'ProxNovBold'; font-size:24px; line-height:30px; color:#fff; background:#361f27;
-webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -o-transition:all 0.2s ease; transition:all 0.2s ease; }
#front-navi ul li:hover a.title { background:#ea6e81; }

#front-navi ul li.monthly { width:94%; }
#front-navi ul li.monthly .monthly-left { position:relative; float:left; width:45%; height:100%; }
#front-navi ul li.monthly .monthly-left:after { content:""; display:block; position:absolute; right:-3px; top:0; width:5px; height:100%; background-color:#ea6e81; }

#front-navi ul li.monthly .monthly-right { float:left; width:55%; height:100%; }
#front-navi ul li.monthly .cat-image { width:100%; min-height:120px; }
#front-navi ul li.monthly a.txt { display:block; padding:10px 15px; color:#ea6e81; }

/* --- 4.2 Content --- */

#content { float:left; padding:3%; width:66.666%; border-right:10px solid #ea6e81;
-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

#head { position:relative; width:100%; padding:0 3%; height:150px; border-bottom:10px solid #ea6e81; 
-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
#head h1 { position:absolute; top:50%; margin-top:-50px; font-family:'ProxNovBold'; font-size:40px; line-height:40px; text-transform:lowercase; color:#ea6e81; }
#head h1 .dark { font-size:100px; line-height:100px; color:#361f27; vertical-align:text-top; }
#head .host_one { position:absolute; right:4%; top:-35px; width:185px; height:175px; background:url(images/annabel-ok.png?v=1.1) top left no-repeat; }
#head .host_two { position:absolute; right:4%; top:-23px; width:228px; height:178px; background:url(images/annabel-two.png?v=1.1) top left no-repeat; }

/* --- 4.3 Sidebar --- */

#sidebar { float:right; padding:3%; width:33.333%;
-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

#sidebar .entry { font-size:14px; line-height:22px; }

/* -- 5. Archive --- */

.entry .archimage { float:left; display:block; margin-bottom:25px; margin-right:3%; width:22%; overflow:hidden; }
.entry .archimage img { width:auto; max-width:100%; height:auto; }
.entry .excerpt { float:right; margin-bottom:25px; width:75%; }
.entry .excerpt p { margin:0; }

/* --- 6. Entry --- */

.entry { font-size:14px; line-height:21px; color:#222; }
.entry a { color:#ea6e81; text-decoration:underline; }
.entry a:hover { color:#361f27; }
.entry h1 { color:#ea6e81; }
.entry h1 a { text-decoration:none; }
.entry strong, .entry dt { font-family:'ProxNovBold'; font-weight:normal; }
.entry dl { margin:16px 0; }
.entry blockquote, .entry blockquote p { color:#555; font-style:italic; }
.entry cite, .entry dfn, .entry em, .entry i { font-style:italic; }

.entry del { color:#555; }
.entry ins { background:#fff9c0; text-decoration:none; }

.entry img { max-width:100%; height:auto; }
.entry ol { margin:16px 0 16px 20px; list-style:decimal outside none; }
.entry ul { margin:16px 0 16px 20px; list-style:disc outside none; }
.entry li > ol, .entry li > ul  { margin:0 0 0 20px; }

.entry hr { margin:20px 0; width:100%; height:1px; background:#ccc; border:0; }

.entry table, .entry th, .entry td {	border:1px solid rgba(0, 0, 0, 0.1); }
.entry table {	margin:16px 0; border-collapse:separate; border-spacing:0; border-width:1px 0 0 1px; width:100%; }
.entry th, .entry td { padding:5px; font-weight:normal; text-align:left; }
.entry th { border-width:0 1px 1px 0; font-weight:bold; }
.entry td { border-width:0 1px 1px 0; }

.entry .wp-caption { position:relative; max-width:100%; background:#f2f2f2; overflow:hidden; }
.entry .wp-caption .wp-caption-text { position:absolute; bottom:0; width:100%; margin:0; padding:5px 15px; height:0px; color:#888; background:#f9f9f9; 
-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
-webkit-transition:height 0.3s ease; -moz-transition:height 0.3s ease; -ms-transition:height 0.3s ease; -o-transition:height 0.3s ease; transition:height 0.3s ease;
}
.entry .wp-caption:hover .wp-caption-text { height:35px; }

.entry .embed { position:relative; padding-bottom:56.25%; /* 16:9 */ padding-top:25px; height:0; }
.entry .embed iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

.entry pre, .entry code { padding:8px; margin-bottom:24px; max-width:100%; overflow:auto; white-space:pre; white-space:pre-wrap; word-wrap:break-word; border:1px solid rgba(0, 0, 0, 0.1); 
-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
}

/* --- 7. Contactform --- */

#contact { width:100%; }
#contact fieldset { margin:10px 0; display:block; }
#contact fieldset label { float:left; display:inline-block; max-width:40%; color:#333; line-height:22px; }
#contact fieldset label span { color:red; }
#contact fieldset p, #contact fieldset br { display:none; }
#contact fieldset .text, #contact fieldset .wpcf7-select { float:right; padding:6px; width:58%; font-family:'ProxNovReg', Helvetica, arial, sans-serif; font-weight:normal; font-size:14px; font-weight:normal; color:#333; -webkit-border-radius:3px; border-radius:3px; border:1px solid #ccc;
-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
#contact fieldset .wpcf7-radio, #contact fieldset .wpcf7-checkbox { float:right; padding:6px; width:58%; font-family:'ProxNovReg', Helvetica, arial, sans-serif; font-weight:normal; font-size:14px; font-weight:normal; color:#333; 
-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
#contact fieldset .wpcf7-list-item { margin:0 !important; display:block; }
#contact .button { padding:5px 15px; font-family:'ProxNovReg', Helvetica, arial, sans-serif; font-weight:normal; font-size:14px; color:#361f27; background:#ea6e81; -webkit-border-radius:5px; border-radius:5px; border:0; }
#contact .button:hover { color:#fff; background:#361f27; cursor:pointer; }

div.wpcf7-response-output { margin:2em 0 1em !important; padding:0.5em 1em !important; -webkit-border-radius:3px; border-radius:3px; }
div.wpcf7-mail-sent-ok { color:#398f14 !important; border:2px solid #398f14; }
span.wpcf7-not-valid-tip { display:inline-block !important; }

/* --- 8. Footer --- */

.push  { height:60px; }
footer { margin:25px auto 0; max-width:900px; height:35px; }

footer > ul { width:100%; height:35px; text-transform:lowercase; background:#ea6e81; -webkit-border-radius:15px 15px 0 0; border-radius:15px 15px 0 0; }
footer > ul > li { position:relative; display:inline; margin:0 12px; height:35px; font-family:'ProxNovBold', Helvetica, arial, sans-serif; font-weight:normal; font-size:13px; }
footer > ul > li:first-child { margin-left:30px; }
footer > ul > li a { display:inline-block; line-height:35px; color:#fff; }
footer > ul > li a:hover, footer > ul > li.current-menu-item a, footer > ul > li.current-menu-ancestor > a { color:#361f27; }

footer > ul > li > ul { display:none; position:absolute; bottom:25px; left:-15px; z-index:999; margin:0; background:#eee; }
footer > ul > li:hover > ul { display:block; }
footer > ul > li > ul li { background:#ea6e81; line-height:30px; font-family:'ProxNovReg'; font-weight:normal; }
footer > ul > li > ul li a { white-space:nowrap; display:block; padding:0 15px; }
footer > ul > li > ul li a:hover { color:#fff; background:#361f27; }
footer > ul > li.current-menu-item > ul > li > a { color:#fff; }
footer > ul > li > ul > li.current-menu-item > a { color:#361f27; }
footer > ul > li > ul > li.current-menu-item > a:hover { color:#fff; }

footer > ul > li.legal { float:right; margin-right:30px; text-transform:none; font-family:'ProxNovReg'; font-weight:normal; font-size:13px; color:#fff; line-height:35px; }

/* --- Cookie Message --*/

.cookie-message {
    -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 24px 160px 12px 160px;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #d8d8d8;
    z-index: 999;
    max-height: 70%;
    overflow: hidden;
    overflow-y: scroll;
}
.cookie-message h2 {
    font-size: 16px;
}
.cookie-message p {
    margin: 10px 0;
    font-size: 13px;
    line-height: 1.6;
}
.cookie-message a {
	color: #0054a3;
	text-decoration: underline;
}
.cookie-message a:hover {
	text-decoration: none;
}
.cookie-close {
	display: inline-block;
    padding: 12px 16px;
    color: #fff !important;
    border-radius: 2px;
    background-color: #3fc756;
    -webkit-box-shadow: 0 1px 0 0 #599716;
    box-shadow: 0 1px 0 0 #599716;
    text-decoration: none;
    border: 0;
    font-size: 15px;
    cursor: pointer;
	text-decoration: none !important;
}
.cookie-close:after {
    content: none;
}


/* --- 10. Responsiveness ---*/

.one_half { width:48%; }
.one_third { width:30.66%; }
.two_third { width:65.33%; }
.one_fourth { width:22%; }
.three_fourth { width:74%; }
.one_fifth { width:16.8%; }
.two_fifth { width:37.6%; }
.three_fifth { width:58.4%; }
.four_fifth { width:67.2%; }
.one_sixth { width:13.33%; }
.five_sixth { width:82.67%; }
.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth { float:left; position:relative; margin-right:4%; }
.centered { margin:0 auto; float:none; }
.last { margin-right:0 !important; clear:right; }
.clearboth { clear:both; display:block; font-size:0; height:0; line-height:0; width:100%; }

@media (max-width:900px) {

#wrapper { margin:0 2%; max-width:96%; }

}

@media (max-width:767px) {

#navi > ul > li { margin:0 20px; }

#logo { text-align:center; }
#logo .left, #logo .right { margin:0 auto; float:none; }
#logo .right img { margin-top:-20px; }

#front-content { float:none; padding:3%; width:100%;
-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
#front-navi { float:none; padding:3%; width:100%; 
-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
#front-navi ul { margin:2% 0 0; }

#head { position:relative; width:100%; padding:0 3%; height:150px; border-bottom:10px solid #ea6e81; 
-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
#head h1 { position:absolute; top:50%; margin-top:-50px; font-family:'ProxNovBold'; font-size:30px; line-height:40px; text-transform:lowercase; color:#ea6e81; }
#head h1 .dark { font-size:60px; line-height:100px; color:#361f27; vertical-align:text-top; }
#head .host_one, #head .host_two { right:-2%; }

#content { float:none; padding:3%; width:100%; border-right:0; border-bottom:10px solid #ea6e81;
-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

#sidebar { float:none; padding:3%; width:100%;
-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

.cookie-message { 
    padding: 10px;
}

}   

@media (max-width:860px) {

#navi a#pull { display:block; }
#navi > ul { display:none; clear:both; padding:15px 0; margin-top:-15px; width:100%; height:auto; background:#ea6e81; -webkit-border-radius:0 0 15px 15px; border-radius:0 0 15px 15px; overflow:hidden; } 
#navi ul li { float:none !important; margin:0; width:100% !important; height:auto; }
#navi ul li a { display:block; margin-left:4%; line-height:30px; }
#navi ul li ul { position:static; display:block; width:100%; list-style:disc inside; color:#fff; background:#ea6e81; overflow:hidden; }
#navi ul li ul li { margin-left:5%; width:100%; }
#navi ul li ul li a { white-space:nowrap; display:inline; padding:0; margin-left:0; width:100%;  }
#navi ul li ul li a:hover { color:#361f27; background:none; }

.push { display:none; }
footer { margin:25px 2% 0; max-width:96%; height:auto; }
footer > ul { height:auto; text-align:center; overflow:hidden; }
footer > ul > li > ul { display:none !important; }

footer > ul > li.legal { float:none; display:inline-block; margin:0; }
}

@media (max-width:480px) {

#front-navi ul li { float:none; position:relative; margin:0 3% 3% 0; width:100%;
-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

#front-navi ul li.monthly { width:100%; }
#front-navi ul li.monthly .monthly-left, #front-navi ul li.monthly .monthly-right { float:none; width:100%; height:auto; }
#front-navi ul li.monthly .monthly-left:after { content:none; }

#head h1 { position:absolute; top:50%; margin-top:-50px; font-family:'ProxNovBold'; font-size:20px; line-height:40px; text-transform:lowercase; color:#ea6e81; }
#head h1 .dark { display: block; line-height: 1.5 !Important; font-size:40px; line-height:100px; color:#361f27; vertical-align:text-top; }

}