/*
Theme Name: Kroon Food
Theme URI: http://www.ritho.nl/
Author: NH, RITHO
Author URI: ritho.nl
Description: Responsive Bare Bones framework based on Dave Gamache's getskeleton.com 
Version: 2.0
License: http://www.opensource.org/licenses/mit-license.php.
Tags: Responsive, framework, RITHO, Kroon Food

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* Table of Contents
==================================================
    #Base 960 Grid
    #Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)
    #Clearing */



/* #Base 960 Grid
================================================== */

    .container                                  { position: relative; width: 1200px; margin: 0 auto; padding: 0; }
    .column, .columns                           { float: left; display: inline; margin-left: 0px; margin-right: 0px;}
    
	.container .half-left 						{ width: 50%; float: left; margin: 0 0 0 0; }
	.container .half-right 						{ width: 50%; float: right; margin: 0 0 0 0; }
	
	.contentrow { width: 100%; clear: both; max-width: 2000px; }
	.wide { position: relative; width: 100%; }
	.wide.half { position: relative; width: 50%; float: left; }
	.wide.half.mirror { float: right; }
	.wide.one-third { position: relative; width: 33.33%; float: left; }
	.wide.two-third { position: relative; width: 66.66%; float: left; }
	.wide.quarter { position: relative; width: 25%; float: left; }
	.wide.half .half-left { width: 600px; float: right; margin-top: 40px; margin-right: 0px; margin-bottom: 40px; margin-left: 0px; }
	.wide.half .half-right { width: 600px; float: left; margin-top: 40px; margin-right: 0px; margin-bottom: 40px; margin-left: 0px; }
	.wide.half .half-left.title, .wide.half .half-right.title { margin-top: 40px; margin-bottom: 0px; }
	.wide.half .half-left.content, .wide.half .half-right.content { margin-top: 0px; margin-bottom: 40px; }
	.wide.one-third .one-third { width: 400px; float: right; margin: 40px 0px 40px 0px; }
	.wide.two-third .two-third { width: 800px; float: left; margin: 40px 0px 40px 0px; }
	.wide.half .half-left .content { margin: 0px 40px 0px 40px; }
	.wide.half .half-right .content { margin: 0px 40px 0px 40px; }
	.wide .one-third .content { margin: 0px 40px 0px 40px; }
	.wide .two-third .content { margin: 0px 40px 0px 40px; }
	.wide.half .half-left .contentimg { margin: 0px 0px 0px 0px; }
	.wide.half .half-right .contentimg { margin: 0px 0px 0px 0px; }
	.wide .full { position: relative; width: 1200px;  margin: 0 auto 0 auto; padding: 40px 0; }
	.wide .full .content { margin: 0 0 0 0; }
	.wide .full .content.half { margin: 0 0 0 0; width: 50%; }
	.wide .full .content.one-third { margin: 0 0 0 0; width: 33.33%; float: left; }
	.wide .full .content.two-third { margin: 0 0 0 0; width: 66.66%; float: left; }
	.twocolumn { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2;  -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; }

/* #Desktop
================================================== */

    /* Note: Design for a width of 960px */

    @media only screen and (min-width: 960px) and (max-width: 1199px) {	  
        .container                                  { width: 960px; }
       
        .wide.half .half-left { width: 470px; float: right; margin-top: 40px; margin-right: 10px; margin-bottom: 40px; margin-left: 0px; }
		.wide.half .half-right { width: 470px; float: left; margin-top: 40px; margin-right: 0px; margin-bottom: 40px; margin-left: 10px; }
		.wide.one-third .one-third { width: 320px; float: right; margin: 40px 0px 40px 0px; }
		.wide.two-third .two-third { width: 640px; float: left; margin: 40px 0px 40px 0px; }
		.wide .full { position: relative; width: 940px;  margin: 0 auto 0 auto; padding: 40px 10px; }
		.wide.half .half-left .content { margin: 0px 0px 0px 0px; }
		.wide.half .half-right .content { margin: 0px 0px 0px 0px; }
		
		img.mask-small { margin-top: 140px; margin-right: 25px; width: 200px; height: 200px; position: absolute; }
		img.mask-medium { margin-top: 20px; width: 240px; height: 240px; }
		img.no-mask.imgcount1 { float: right; width: 480px; }
		img.labelfamily { right: 20px; }
		
		.chapter .title, .chapter .desc { width: 70%; margin: 0 15% 0 15%; }
				
		.wideimg { height: 210px; }
		.wideimg .toptitle h2 { font-size: 72px; }
		
		.footer .address .container, .footer .bottom .container { width: 940px !important;  margin: 0 auto 0 auto; padding: 0 10px; }
             
    }      

/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .container                                  { width: 768px; }
        
        .wide.half { width: 100%; }
        .wide.half .half-left { width: 748px; float: none; margin-top: 40px; margin-right: auto; margin-bottom: 40px; margin-left: auto; }
		.wide.half .half-right { width: 748px; float: none; margin-top: 40px; margin-right: auto; margin-bottom: 40px; margin-left: auto; }
		.wide.half .half-left.title, .wide.half .half-right.title { width: 748px; margin-top: 40px; margin-bottom: 0px; }
		.wide.one-third { width: 100%; float: none; margin-top: 40px; margin-right: auto; margin-bottom: 40px; margin-left: auto; }
		.wide.two-third { width: 100%; float: none; margin-top: 40px; margin-right: auto; margin-bottom: 40px; margin-left: auto; }
		.wide.one-third .one-third { width: 100%; float: none; margin-top: 40px; margin-right: auto; margin-bottom: 40px; margin-left: auto; }
		.wide.two-third .two-third { width: 100%; float: none; margin-top: 40px; margin-right: auto; margin-bottom: 40px; margin-left: auto; }
		.single-cp_recipes .wide.one-third { width: 300px; float: left; }
		.single-cp_recipes .wide.two-third { width: 448px; float: left; }
		.single-cp_recipes .wide.one-third .one-third { width: 300px; float: right; margin: 40px 0px 40px 10px; }
		.single-cp_recipes .wide.two-third .two-third { width: 448px; float: left; margin: 40px 10px 40px 0px; }
		.wide .full { position: relative; width: 748px;  margin: 0 auto 0 auto; padding: 40px 10px; }
		.wide.half .half-left .content { margin: 0px 0px 0px 0px; }
		.wide.half .half-right .content { margin: 0px 0px 0px 0px; }
		.textpadding { padding: 0 10% 0 10%; }
		
		img.mask-small { margin-top: -20px; margin-right: 74px; float: right; }
		img.mask-medium { margin-top: 0px; margin-left: 74px;  }
		img.labelfamily { position: absolute; top: 0px; right: 74px; }
		img.no-mask.imgcount1 { float: none; width: 600px; margin-left: 74px; margin-right: 74px; }
		
		.news .itm {  height: 290px; }
		.news .itm .newsimg { height: 180px; }
		.wideimg { height: 170px; }
		.wideimg .toptitle h2 { font-size: 52px; }
		
		.footer .address .container, .footer .bottom .container { width: 748px !important;  margin: 0 auto 0 auto; padding: 0 10px; }
		
		.chapter .title, .chapter .desc { width: 80%; margin: 0 10% 0 10%; }
		
		.productitm { width: 350px; }
        
    }   
    

/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
        .container { width: 300px; }
        
        .wide.half { width: 100%; }
        .wide.half .half-left { width: 280px; float: none; margin-top: 40px; margin-right: auto; margin-bottom: 40px; margin-left: auto; }
		.wide.half .half-right { width: 280px; float: none; margin-top: 40px; margin-right: auto; margin-bottom: 40px; margin-left: auto; }
		.wide.half .half-left.title, .wide.half .half-right.title { width: 280px; margin-top: 40px; margin-bottom: 0px; }
		/*.wide.one-third { width: 300px; float: left; }
		.wide.two-third { width: 300px; float: left; }
		.wide.one-third .one-third { width: 280px; float: right; margin: 40px 0px 40px 10px; }
		.wide.two-third .two-third { width: 280px; float: left; margin: 40px 10px 40px 0px; }*/
		.wide.one-third { width: 100%; float: none; margin-top: 40px; margin-right: auto; margin-bottom: 40px; margin-left: auto; }
		.wide.two-third { width: 100%; float: none; margin-top: 40px; margin-right: auto; margin-bottom: 40px; margin-left: auto; }
		.wide.one-third .one-third { width: 100%; float: none; margin-top: 40px; margin-right: auto; margin-bottom: 40px; margin-left: auto; }
		.wide.two-third .two-third { width: 100%; float: none; margin-top: 40px; margin-right: auto; margin-bottom: 40px; margin-left: auto; }
		.wide .full { position: relative; width: 280px;  margin: 0 auto 0 auto; padding: 40px 10px; }
		/*.wide.half.mobile { width: 100%; float: none; }*/
		.wide.half .half-left .content { margin: 0px 0px 0px 0px; }
		.wide.half .half-right .content { margin: 0px 0px 0px 0px; }
		.wide .full .content.one-third { margin: 0 0 0 0; width: 300px; float: left; }
		.wide .full .content.two-third { margin: 0 0 0 0; width: 300px; float: left; }
		.textpadding { padding: 0 10px 0 10px; }
		.twocolumn { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1;  -webkit-column-gap: 0px; -moz-column-gap: 0px; column-gap: 0px; }
		
		img.mask-small { margin-top: 0px; margin-right: 10px; margin-bottom: 0px; margin-left: 0px; float: right; }
		img.mask-medium { margin-top: 0px; margin-left: 10px;  }
		img.labelfamily { position: absolute; top: 0px; right: 10px; }
		img.no-mask.imgcount1 { float: none; width: 300px; margin-left: 0px; margin-right: 0px; }
		
		.wideimg { height: 200px; }
		.wideimg .toptitle h2 { font-size: 38px; }
		img.recipe.alignright { float: left; }
		
		.news .itm { width: 96%; height: 260px; }
		.news .itm .newsimg { height: 150px; }
		.news .itm .title h4 { font-size: 30px; line-height: 30px; }
		.header .mobilebar { top: -170px; height: 170px; }
		.header .topbar .logo, .header .topbar.smaller .logo { width: 280px; padding: 10px 0px; font-size: 16px; color: #fff; }
		.header .topbar.smaller .logo { color: #E00B25; }
		.header .topbar .logo img, .header .topbar.smaller .logo img { width: 130px; }
		.header .label { width: 40px; height: 78px; }
		.header .menuicon #menuToggle { top: 30px; }
		.header.home .headercontent { height: 300px; }
		.header .headercontent .icon { width: 90px; height: 90px; }
		.header .headercontent h2 {	font-size: 100px; line-height: 90px; }
		.header .headercontent h4 { font-size: 30px; line-height: 42px; }
		
		.chapter .title, .chapter .desc { width: 70%; margin: 0 15% 0 15%; }
		.recipes { width: 100%; margin: 0 0 0 0; }
		
		.header .langbox { right: 86px; }
		.header .langbox ul.wpm-language-switcher li:first-child { margin: 0px 5px 0 0; }
		.header .langbox ul.wpm-language-switcher li { width: 32px; float: none; margin: -7px 5px 0 0; }
		.header .langbox ul.wpm-language-switcher li img { width: 24px; height: 24px; }
		
		.productitm { width: 300px; }
		
		.footer .address { height: auto; }
        
    }

/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }
        
        .wide.half { width: 100%; }
        .wide.half .half-left { width: 400px; float: none; margin-top: 40px; margin-right: auto; margin-bottom: 40px; margin-left: auto; }
		.wide.half .half-right { width: 400px; float: none; margin-top: 40px; margin-right: auto; margin-bottom: 40px; margin-left: auto; }
		.wide.half .half-left.title, .wide.half .half-right.title { width: 400px; margin-top: 40px; margin-bottom: 0px; }
		/*.wide.one-third { width: 420px; float: left; }
		.wide.two-third { width: 420px; float: left; }
		.wide.one-third .one-third { width: 400px; float: right; margin: 40px 0px 40px 10px; }
		.wide.two-third .two-third { width: 400px; float: left; margin: 40px 10px 40px 0px; }*/
		.wide.one-third { width: 100%; float: none; margin-top: 40px; margin-right: auto; margin-bottom: 40px; margin-left: auto; }
		.wide.two-third { width: 100%; float: none; margin-top: 40px; margin-right: auto; margin-bottom: 40px; margin-left: auto; }
		.wide.one-third .one-third { width: 100%; float: none; margin-top: 40px; margin-right: auto; margin-bottom: 40px; margin-left: auto; }
		.wide.two-third .two-third { width: 100%; float: none; margin-top: 40px; margin-right: auto; margin-bottom: 40px; margin-left: auto; }
		.wide .full { position: relative; width: 400px;  margin: 0 auto 0 auto; padding: 40px 10px; }
		/*.wide.half.mobile { width: 100%; float: none; }*/
		.wide.half .half-left .content { margin: 0px 0px 0px 0px; }
		.wide.half .half-right .content { margin: 0px 0px 0px 0px; }
		.wide .full .content.one-third { margin: 0 0 0 0; width: 400px; float: left; }
		.wide .full .content.two-third { margin: 0 0 0 0; width: 400px; float: left; }
		.textpadding { padding: 0 10px 0 10px; }
		.twocolumn { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1;  -webkit-column-gap: 0px; -moz-column-gap: 0px; column-gap: 0px; }
		
		img.mask-small { margin-top: 0px; margin-right: 10px; margin-bottom: 0px; margin-left: 0px; float: right; }
		img.mask-medium { margin-top: 0px; margin-left: 10px;  }
		img.labelfamily { position: absolute; top: 0px; right: 10px; }
		img.no-mask.imgcount1 { float: none; width: 400px; margin-left: 10px; margin-right: 10px; }
		
		.wideimg { height: 200px; }
		.wideimg .toptitle h2 { font-size: 38px; }
		img.recipe.alignright { float: left; }
		
		.news .itm { width: 96%; height: 290px; }
		.news .itm .newsimg { height: 210px; }
		.header .topbar .logo { width: 400px; padding: 10px 20px; font-size: 18px; color: #fff; }
		.header .topbar .logo img { width:150px; }
		.header .label { width: 40px; height: 78px; }
		.header .menuicon #menuToggle { top: 30px; }
		.header.home .headercontent { height: 300px; }
		.header .headercontent .icon { width: 90px; height: 90px; }
		.header .headercontent h2 {	font-size: 100px; line-height: 90px; }
		.header .headercontent h4 { font-size: 30px; line-height: 42px; }
		
		.productitm { width: 400px; }
		
		.recipes { width: 100%; margin: 0 0 0 0; }
		
		.footer .address { height: auto; }        
        
      }

/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }
    .jobs .content .btn {
	    position: absolute;
	    bottom: 0;
	    left: 16px;
	}
    body.page-id-913 .title h1 {
	    margin-bottom: -83px;
	}

	.jobs.set_border_radius .content {
	    border-radius: 0;
	}

	body.single-cp_jobs ul li {
	    text-align: left;
	    position: relative;
	}

	.jobs.set_border_radius .content strong {
	    color: #fff !important;
	}

	.jobs.set_border_radius .content ul {
	    margin-top: -18px;
	}

	@media only screen and (max-width: 740px) {	  
		.jobs.set_border_radius .content ul {
		    margin-top: -60px !important;
		}
	}

	@media only screen and (max-width: 479px) {	  
		.jobs.set_border_radius .content ul {
		    margin-top: -60px !important;
		}
	}

	@media only screen and (max-width: 1530px) {	
		.custom_column {
		    width: 66% !important;
		}
	}

	@media only screen and (max-width: 1200px) {
		.custom_col {
		    width: 100% !important;
		}
	}

	@media only screen and (max-width: 640px) {
		.custom_column {
		    width: 75% !important;
		}
	}

	.custom_column {
	    width: 58%;
	    margin: 0 auto;
	    position: relative;
	}

	.custom_col {
	    width: 50%;
	    float: left;
	    margin-bottom: 25px;
	}