@import url(https://fonts.googleapis.com/css?family=Oswald:400,300&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600,700&subset=latin,latin-ext);


@font-face {
    font-family: 'fontello';
    src: url('../_fonts/fontello.eot?4254689');
    src: url('../_fonts/fontello.eot?4254689#iefix') format('embedded-opentype'),
    url('../_fonts/fontello.woff?4254689') format('woff'),
    url('../_fonts/fontello.ttf?4254689') format('truetype'),
    url('../_fonts/fontello.svg?4254689#fontello') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../fonts/fontello.svg?4254689#fontello') format('svg');
  }
}
*/

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-menu:before { content: '\e800'; } /* '' */
.icon-print:before { content: '\e801'; } /* '' */
.icon-cancel:before { content: '\e802'; } /* '' */
.icon-angle-right:before { content: '\e803'; } /* '' */
.icon-angle-left:before { content: '\e804'; } /* '' */
.icon-user:before { content: '\e805'; } /* '' */
.icon-calendar:before { content: '\e806'; } /* '' */
.icon-calendar-empty:before { content: '\e807'; } /* '' */
.icon-down-open:before { content: '\e808'; } /* '' */
.icon-up-open:before { content: '\e809'; } /* '' */
.icon-up-dir:before { content: '\e80a'; } /* '' */
.icon-down-dir:before { content: '\e80b'; } /* '' */
.icon-bookmark-empty:before { content: '\e80c'; } /* '' */
.icon-bookmark:before { content: '\e80d'; } /* '' */
.icon-tags:before { content: '\e80e'; } /* '' */
.icon-tag:before { content: '\e80f'; } /* '' */
.icon-right-open:before { content: '\e810'; } /* '' */
.icon-left-open:before { content: '\e811'; } /* '' */
.icon-search:before { content: '\e812'; } /* '' */
.icon-right-dir:before { content: '\e818'; } /* '' */
.icon-left-dir:before { content: '\e819'; } /* '' */
.icon-angle-up:before { content: '\e81c'; } /* '' */
.icon-angle-down:before { content: '\e81d'; } /* '' */

/* style globalne */
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}


html {font-size: 14px;}
body  {margin: 0; padding: 0; text-align: left; background: #ffffff url('../_img/crossword.png') repeat 0 0; }
body, p, a, td, th, input, textarea, select, option  {color: #333; font-weight: 300; font-size: 1.2rem; line-height: 1.3; font-family: 'Source Sans Pro', Arial, sans-serif;}

strong, b {font-weight: 600;}
h1, h2, h3, h4, h5, h6 {margin: 0 0 1rem 0; padding: 0;}
h1, h2, h3, h4, h5, h6 ,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {font-weight: 300;}
h1, h1 a {font-size: 1.5rem;}
h2, h2 a {font-size: 2.5rem;}
h3, h3 a {font-size: 2.2rem;}
h4, h4 a {font-size: 2rem;}
h5, h5 a {font-size: 1.7rem;}
h6, h6 a {font-size: 1.5rem;}
div, span, ul, ol, li {margin: 0; padding: 0;}
ul, ol, li {list-style-type: none;}
p {margin: 0 0 1rem 0; padding: 0; }
form, fieldset {margin: 0; padding: 0; border-width: 0;}
a {text-decoration: none; cursor: pointer; color: #00aeef; transition: all 0.3s;}
a:hover {text-decoration: underline;}
img {max-width: 100%;}
img,
a img {border: none;}
a, input, object {outline-width: 0;}
.clear {clear: both; font-size: 0; line-height: 0; width: 100%; float: left;}
.no-float {clear: both; font-size: 0; line-height: 0; width: 100%; height: 0; float: none !important;}
.clearfix:before,
.clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}
.one-column {width: 100%; clear: both; float: left;}
.one-line {clear: both; width: 100%; float: left; padding: 0 0 0.85rem 0;}
.print-only {display: none;}

/* formularze - ogólnie */
input[type="text"],
input[type="password"],
input[type="search"],
textarea,
select {background-color: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 0; display: block; padding: 0.5rem 1rem; margin: 0;  vertical-align: middle; width: 95%; -webkit-appearance: none;}
textarea {height: 8rem; line-height: 1.3; }
.btn {-moz-user-select: none; -webkit-appearance: none; border: 1px solid #00aeef; border-radius: 0; color: #00aeef; background-color: #fff; cursor: pointer; display: inline-block; margin: 0; padding:0.5rem 1rem; text-align: center; vertical-align: middle; white-space: nowrap; transition: all 0.3s;}
.btn:hover {background-color: #00aeef; color: #ffffff;}
.form-line {width: 100%; clear:both; margin-bottom: 1rem;}
.form-line .form-label {float: left; width: 15%; margin: 0.5rem 0 0 0; display: block;}
.form-line .form-controls {float: right; width: 80%;}
.form-line .add-info {font-size: 0.8rem; color: #999999;}

input[type="text"],
input[type="password"],
input[type="search"],
textarea,
select {width: 100%;}
.form-line .form-label {display: none;}
.form-line .form-controls {width: 100%;} 


/* layout */
.page-container {width: 100%; max-width: 1200px; min-width: 320px; margin: 0 auto 1.5rem auto; text-align: left; clear: both; }
.page-title {margin: 0 1rem 3rem 1rem; text-align: center; line-height: 1.1;}

.page-container ul {margin-bottom: 1.5rem;}
.page-container ul li {padding: 0 0 0.5rem 1rem; position: relative;}
.page-container ul li:before {position: absolute; top: 0; left: 0; content: '+'; content: '-';}


header {clear: both;  max-width: 1200px; min-width: 320px; margin: 0 auto; padding: 1rem;}
header h1 {float: left; margin: 0;}
header h1 img {vertical-align: middle; margin-right: 1rem; }
header h1 a {font-family: Oswald, sans-serif; color: #333;}
header h1 a:hover {text-decoration: none; color: #00aeef;}
header .search-form {float: right; width: 300px; position: relative; margin-top: 1.2rem;}

header .search-form:after {position: absolute; top: 0.25rem; right: 0.7rem; content: ''; font-family: 'fontello'; content: '\e812'; margin: 0; font-size: 1.6rem; color: #ccc; display: block;}
header .search-form input[type="search"]{width: 100%; padding-right: 3rem;}
header .search-form input[type="submit"]{position: absolute; top: 0; right: 0; z-index: 10; width: 3rem; height: 100%; border-width: 0; background-color: transparent; font-size: 0; line-height: 0; cursor: pointer;}

.top-nav {background: #000 url('../_img/tweed.png') repeat 0 0; text-align: center; padding: 1.5rem 0; margin-bottom: 2rem;}
.top-nav ul {max-width: 1200px; min-width: 320px; text-align: center; margin: 0 auto;}
.top-nav ul li {display: inline-block; margin: 0.35rem 0.7rem;}
.top-nav ul li a {color: #f9f9f9; font-size: 1.5rem; font-family: Oswald, sans-serif; text-transform: uppercase;}
.top-nav ul li a:hover {color: #00aeef; text-decoration: none;}


.bottom-nav {width: 100%; background-color: #f7f7f7; }
.bottom-nav a {color: #5c5c5c; width: 50%; padding: 2rem; }
.bottom-nav a:hover {text-decoration: none; color: #00aeef; background-color: #efefef;}
.bottom-nav a i:before {margin: 0; vertical-align: middle;}
.bottom-nav a .title {text-transform: uppercase; font-family: Oswald, sans-serif; display: block; margin-top: 1rem; font-size: 1.5rem;}
.bottom-nav .prev {float: left;}
.bottom-nav .next {float: right;text-align: right;}

footer {clear: both; padding: 1.5rem 0; background: #000 url('../_img/tweed.png') repeat 0 0; }
.footer-container {width: 100%; max-width: 1200px; min-width: 320px; margin: 0 auto 0 auto; clear: both; }
footer h6 {text-transform: uppercase; font-family: Oswald, sans-serif; }
footer,
footer p {color: #f9f9f9;}
footer .footer-col {width: 33%; float: left; padding: 0 1rem;}
footer .tag-cloud .wp-tag-cloud {font-size: 0;}
footer .tag-cloud li {display: inline; opacity: 0.7;}
footer .tag-cloud li a {color: #000;}
footer .copyrights {padding: 2rem 1rem 0 1rem; margin-top: 3rem; text-align: center; border-top: solid 1px #666;}


.photo-link {/*box-shadow: 3px 3px 2px -2px rgba(0,0,0,0.4);*/ box-shadow: 3px 3px 10px -3px rgba(0, 0, 0, 0.4); border-radius: 3px; position: relative; display: block;}
.photo-link:after {content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; visibility: hidden; opacity: 0; transition: all .3s;}
.photo-link:hover:after {box-shadow: inset 0px 0px 50px 20px rgba(255,255,255,0.7); visibility: visible; opacity: 1;}
.photo-link img {border-radius: 3px; display: block;}


/* strona z przepisem (pojedynczy wpis)) */
.recipe-page {}
.recipe-ingredients {width: 20%; float: left; padding: 0 1rem;}
.recipe-ingredients .add-info {opacity: 0.7; margin-top: -1rem; font-size: 1.1rem;}
.recipe-ingredients ul li:before {content: '+'; }
.recipe-page main {width: 60%; float: left; padding: 0 2rem;}
.recipe-meta {width: 20%; float: right; padding: 0 1rem 1rem 1rem; border-left: solid 1px #ccc;}
.recipe-meta .recipe-category a {zcolor: #f9f9f9; font-size: 1.5rem; font-family: Oswald, sans-serif; text-transform: uppercase;}
.recipe-meta .recipe-category a:hover {color: #333; text-decoration: none;}
.recipe-meta .recipe-date {}
.recipe-meta .tag-cloud {padding-top: 0.5rem;}

.tag-cloud a {font-size: 1rem; background-color: #F2F2F2; display: inline-block; margin: 0 0.5rem 0.5rem 0; padding: 0.4rem 0.8rem; text-decoration: none; color: #333;}
.tag-cloud a:hover {color: #00aeef;}

.recipe-method {padding-bottom: 2rem; counter-reset: method-steps;}
.recipe-method .one-step {padding: 1rem 1rem 1rem 5rem; position: relative; border-bottom: solid 1px #eee; min-height: 5rem;}
.recipe-method .one-step:last-child {border-bottom-width: 0;}
.recipe-method .one-step:before {counter-increment: method-steps;  content: counter(method-steps); position: absolute; left: 1rem; top: 1rem; border: solid 2px #eee; border-radius: 50%; width: 3rem; height: 3rem; text-align: center; font-size: 1.75rem; line-height: 1.4; color: #666;}
.recipe-method .step-photo {float: right; max-width: 150px; margin: 0 0 0 1rem;}
.recipe-method .step-photo img {border-radius: 3px; display: block; box-shadow: 3px 3px 2px -2px rgba(0,0,0,0.4);}
.recipe-method .step-desc {padding-top: 0.6rem;}

.recipe-add-info {padding-bottom: 1rem;}

.single-post-thumb {clear: both;}

.gallery {padding-bottom: 2rem; text-align: center;}
.gallery .gallery-photo-link img {margin-bottom: 0.5rem;}
.gallery-item {margin-bottom: 1rem;}


.post-list-item {width: 25%; float: left; margin-bottom: 1.5rem; padding: 0 1rem; text-align: center;}
.post-list-item:nth-child(4n+1) {clear: left;}
.post-list-item .post-thumb-link {display: block; width: 100%; margin: 0 0 0.75rem 0;  }
.post-list-item .post-thumb-link img {width: 100%; }
.post-list-item .post-category {position: absolute; top: 0; width: 100%; text-align: center; }
.post-list-item .post-category .inside {margin: 0 auto; display: inline-block; background-color: rgba(0,0,0,0.4); color: rgba(255, 255, 255, 0.8); padding: 0.5rem; font-family: Oswald, sans-serif; font-weight: 300; text-transform: uppercase; line-height: 1; font-size: 1rem; }
.post-list-item .post-title {line-height: 1; font-size: 1rem;}
.post-list-item .post-title a {color: #333; line-height: 1.1; font-size: 1.2rem; font-weight: 400;}
.post-list-item .post-title a:hover {color: #00aeef; text-decoration: none;}




.posts-navigation {clear: both; width: 100%; padding: 0 2rem 2rem 2rem; text-align: center;}
.posts-navigation .nav-link-ct {background-color: #ececec;  white-space: nowrap; /*float: left;*/ display: inline-block; width: 15rem; text-align: center; margin: 0 0 0.2rem 0;}
.posts-navigation .nav-link-ct a {color: #888888; padding: 1rem; display: block;}
.posts-navigation .prev i:before {margin-left: 0;}
.posts-navigation .next i:before {margin-right: 0;}

/* lista komentarzy */
.post-comments {clear: both; }
.post-comments .comments-list {margin-bottom: 2rem; }
.post-comments .comment {margin-bottom: 0.75rem; }
.post-comments .comment .comment-author,
.post-comments .comment .comment-author a {font-size: 1rem; font-weight: bold;}
.post-comments .comment time {font-size: 1rem; color: #999999;}

/* formularz dodawania komentarza */
.add-comment {padding-bottom: 1rem;}

/* strony */
.single-page .single-page-content {margin: 0 1rem 2rem 1rem; padding-bottom: 2rem; border-bottom: 1px dashed #CCCCCC;}
.single-page .single-page-content .page-title {margin-left: 0; margin-right: 0;}
.single-page .single-page-content p {padding: 0 0 0.8rem 0;}
.single-page .single-page-content .page-desc {padding-bottom: 1rem;}

.post-not-found {margin: 0 1rem 2rem 1rem;}


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

@media screen and (max-width: 960px) {
    .post-list-item {width: 33.3333333333333333%; }
    .post-list-item:nth-child(4n+1) {clear: none;}
    .post-list-item:nth-child(3n+1) {clear: left;}    
    
    .recipe-meta {float: none; margin: -1rem auto 0 auto; width: 90%; text-align: center; border-bottom: 1px solid #eee; border-left-width: 0; padding-bottom: 0; margin-bottom: 2rem;}
    .recipe-ingredients {width: 30%;}
    .recipe-page main {width: 70%; padding-right: 1rem;}
}


@media screen and (max-width: 720px) {    
    input[type="text"],
    input[type="password"],
    input[type="search"],
    textarea,
    select {width: 100%;}
    .form-line .form-label {display: none;}
    .form-line .form-controls {width: 100%;}     
    
    .post-list-item {width: 50%; }
    .post-list-item:nth-child(3n+1) {clear: none;}
    .post-list-item:nth-child(2n+1) {clear: left;}      
    
    header .search-form {width: 200px;}
    
    .recipe-ingredients {width: 100%; float: none; clear: both; margin-bottom: 2rem;}
    .recipe-page main {width: 100%; float: none; clear: both; padding-left: 1rem;}
    
    .bottom-nav .prev,
    .bottom-nav .next {float: none; width: 100%; clear: both; display: block; text-align: center; border-top: solid 1px #efefef;}
    
    footer .footer-col {width: 100%; float: none; clear: both; padding-bottom: 2rem; }
    
    
}

@media screen and (max-width: 480px) {
    .post-list-item {width: 300px; margin-left: auto; margin-right: auto; float: none;}
    .post-list-item:nth-child(3n+1) {clear: both;}
    
    header h1 {float: none; text-align: center;}
    header .search-form {width: 100%; float: none; clear: both;}
    
    .recipe-method .step-photo {float: none; clear: both; display: inline-block; max-width: 100%; margin-left: 0;}
}

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

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