/*
Theme Name: Freeform
Author URI: http://www.subfauna.com
Description: Ultimate flexibility
Author: Subfauna for Emil Toonen and Futureinform
Version: 0.8
Copyright: (c) 2013 SUBFAUNA
*/

/*** Reset ***/

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;
 font-size:100%;
 vertical-align:top;
 background:transparent;
}

body{
 line-height:1;
 text-align:left;
}

ol,ul{
 list-style:none;
}

blockquote,q{
 quotes:none;
}

blockquote:before,blockquote:after,q:before,q:after{
 content:'';
 content:none;
}

:focus {
 outline:0;
}

::selection {
 background-color: #333;
 color: #fff;
}

ins{
 text-decoration:none;
}

del{
 text-decoration:line-through;
}

table{
 border-collapse:collapse;
 border-spacing:0;
}

/*** Image alignments wp-post ***/
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-bottom: 1em; margin-left: auto; margin-right: auto}
.alignright {float:right; }
.alignleft {float:left; }
.aligncenter {display: block; margin-left: auto; margin-right: auto}


/*** Main ***/

html, body {
 height: 100%;
}

body {
 font: 62.5% Helvetica, Arial, sans-serif;
}

.clear:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
}

.left {
 float: left;
}

.right {
 float: right;
}

.wrapper {
 width: 95%;
 height: 90%;
 margin: 0 auto;
 position: relative;
}


/*** Header ***/

.header {
 margin-bottom: 15px;
 top: 30px;
 position: fixed;
 z-index:500;
}

.logo {
 font-size: 19px;
 width: 150px;
 height: 40px;
 float: left;
 position: relative;
 margin-top: 3px;
}

.logo a {
 color: #f6f6f6;
 background-color: #f6f6f6;
 padding: 3px 7px;
 text-decoration: none;
}

.logo a:hover {
 color: #333;
 -moz-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 -webkit-transition: all 0.3s ease-in-out;
}


/*** Navigation ***/

.nav {
 float: left;
 margin-left: 15px;
 position: relative;
 z-index: 100;
 height: 40px;
}

.nav li {
 float: left;
}

.nav li.current a {
}

.nav a {
 color: #f6f6f6;
 background-color: #f6f6f6;
 padding: 3px 7px;
 font-size: 19px;
 font-weight: bold;
 text-decoration: none;
 display: block;
 margin-left: 10px;
}

.nav a:hover, .nav li.current a:hover, .jsddm_hover a, .sub-menu li a:hover {
 color: #333;
 -moz-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 -webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s;}

li.parent a {
}

li.parent a:hover, li.jsddm_hover a {
}

ul.sub-menu {
 position: absolute;
 visibility: hidden;
 z-index: 100;
 width: 145px;
 background: #333;
 margin-top: 15px;
 padding: 10px 0;
}

ul.sub-menu li {
 margin-left: 0;
 height: auto;
 padding: 0 !important;
 border: none;
 float: none;
 background: none;
 width: 125px;
}

ul.sub-menu li a {
 background: none !important;
 font-size: 12px;
 padding-right: 0;
 color: #ccc;
 width: 125px;
}


/*** Content ***/

.middle {
 padding: 80px 0px 0px 0;
 min-height: 220px;
}

.container {
 padding: 80px 0px;
 min-height: 600px;
 margin: 0 auto;
}

.content {
 width: 785px;
 float: right;
}


#show {
 width: 785px;
 overflow: hidden;
 margin-bottom: 10px;
}

#show img {
 cursor: pointer;
}

#show_nav a {
 font-size: 11px;
 color: #b8b8b8;
 text-decoration: none;
 margin-right: 10px;
}

#show_nav a:hover, #show_nav .activeSlide {
 color: #fff18f;
}


.post_home {
 width: 300px;
 float: left;
 margin: 0 0 30px 30px;
}

.thumb {
 display: block;
 width: 300px;
 height: auto;
 margin-bottom: 5px;
 position: relative;
 color: #333;
}

.thumb:hover {
 /* opacity: 0.7; */
}

.thumb img {
 width: 300px;
 height: auto!important;
 display: block;
}

.post_home h2 {
 font-size: 11px;
 font-weight: bold;
}

.post_home h2 a {
 color: #ccc;
 text-decoration: none;
}

.post_home h2 a:hover {
 color: #fff18f;
}


.recent {
 font-size: 16px;
 font-weight: bold;
 color: #ccc;
 margin-bottom: 30px;
 border-top: 28px solid #F6F6F6;
 padding-top: 30px;
 width: 100%;
}


.page_meta {
 height: 100px;
}

.page_meta a {
 color: #ccc;
 text-decoration: none;
}

.page_meta a:hover {
 color: #fff18f;
}

.rss, .tags, .search {
 width: 145px;
 height: 100px;
 float: left;
 margin-left: 15px;
 font-size: 11px;
 font-weight: bold;
 line-height: 85px;
 color: #ccc;
 border-bottom: 1px solid #4d4d4d;
}

.heading {
 width: 465px;
 height: 100px;
 float: left;
 margin-left: 15px;
 font-size: 31px;
 font-weight: bold;
 line-height: 85px;
 color: #ccc;
 border-bottom: 1px solid #4d4d4d;
}

.tags {
 position: relative;
}

.tags a {
 background: url("/portfolium/i/tags.gif") 100% 50% no-repeat;
 padding-right: 10px;
}

.tags a:hover {
 background: url("/portfolium/i/tags.gif") 100% 50% no-repeat;
}

.taglist {
 margin-top: 16px;
 background: #333;
 position: absolute;
 left: -15px;
 width: 145px;
 padding: 15px 0 15px 15px;
 visibility: hidden;
}

.taglist li {
 line-height: 1.5;
}

.taglist li a {
 color: #ccc !important;
 background: none !important;
 font-weight: normal;
 display: block;
}

.taglist li a:hover {
 color: #fff18f !important;
}

.tags .jsddm_hover a {
 color: #fff18f;
 background: url("/portfolium/i/tags.gif") 100% 50% no-repeat;
 padding-right: 10px;
}


.search input {
 background: none;
 border: none;
 color: #ccc;
 font: bold 11px Helvetica, Arial, sans-serif;
 width: 145px;
}


.post_list, .post_single {
 padding: 30px 0 45px;
 background: url("/portfolium/i/post_list.gif") 0 100% no-repeat;
}

.post_single {
 background: none;
}

.post_list a, .post_single a {
 color: #fff18f;
 text-decoration: none;
}

.post_list a:hover, .post_single a:hover {
 text-decoration: underline;
}

.post_list h2, .post_single h2, .page h2 {
 font-size: 26px;
 color: #f2f2f2;
 font-weight: normal;
 margin-bottom: 15px;
 padding-left: 175px;
}

.page {
 padding-top: 15px;
}

.page h2 {
 padding-left: 0;
}

.post_list h2 a, .post_single h2 a, .page h2 a {
 color: #f2f2f2;
 text-decoration: none;
}

.post_list h2 a:hover, .post_single h2 a:hover, .page h2 a:hover {
 color: #fff18f;
 text-decoration: none;
}

.post_list_meta, .post_single_meta {
 width: 145px;
 margin-left: 15px;
 float: left;
}

.post_list_meta p, .post_single_meta p, .post_share {
 color: #ccc;
 font-size: 11px;
 margin-bottom: 11px;
 line-height: 1.7;
}

.post_date {
 margin-bottom: 0 !important;
}

.post_share {
 line-height: normal;
}

.sharelist {
 display: none;
 margin-top: 11px;
}

.sharelist li {
 margin-bottom: 3px;
}


.more {
 margin-bottom: 0;
 font-weight: bold;
}

/* Post Content images */

.post_content .alignleft, .post_content img.alignleft {  display: inline;
 float: left;
 margin-right: 15px;
 margin-top: 4px;
 }

.post_content .alignright, .post_content img.alignright {  display: inline;
 float: right;
 margin-left: 15px;
 margin-top: 4px;
 }

.post_content .aligncenter, .post_content img.aligncenter {  clear: both;
 display: block;
 margin-left: auto;
 margin-right: auto;
 }

.post_content img.alignleft, .post_content img.alignright, .post_content img.aligncenter {  margin-bottom: 12px;
 }

.post_content .wp-caption {  background: #f1f1f1;
 line-height: 18px;
 margin-bottom: 20px;
 padding: 4px;
 text-align: center;
 }

.post_content .wp-caption img {  margin: 5px 5px 0;
 }

.post_content .wp-caption p.wp-caption-text {  color: #888;
 font-size: 12px;
 margin: 5px;
 }

.post_content .wp-smiley {  margin: 0;
 }

.post_content .gallery {  margin: 0 auto 18px;
 }

.post_content .gallery .gallery-item {  float: left;
 margin-top: 0;
 text-align: center;
 width: 33%;
 }

.post_content .gallery img {   }

.post_content .gallery .gallery-caption {  color: #888;
 font-size: 12px;
 margin: 0 0 15px;
 }

.post_content .gallery dl {  margin: 0;
 }

.post_content .gallery img {   }

.post_content .gallery br+br {  display: none;
 }

.post_content .attachment img {  /* single attachment images should be centered */ display: block;
 margin: 0 auto;
 }


/*** Pagination ***/

.pagination {
 padding: 15px 0 15px 15px;
}

.pagination_ctrl {
 height: 30px;
 width: 145px;
 float: left;
 background: url("/portfolium/i/pagination_ctrl.gif") 50% 50% no-repeat;
 position: relative;
}

.nextpostslink, .previouspostslink {
 display: block;
 width: 63px;
 height: 30px;
 position: absolute;
}

.nextpostslink {
 background: url("/portfolium/i/pagination_arr.gif") 100% 10px no-repeat;
 right: 7px;
}

.previouspostslink {
 background: url("/portfolium/i/pagination_arr.gif") 0 10px no-repeat;
 left: 7px;
}

.nextpostslink:hover {
 background-position: 100% -39px;
}

.previouspostslink:hover {
 background-position: 0 -39px;
}

.pagination_pages {
 height: 30px;
 line-height: 30px;
 float: right;
 margin-left: 15px;
}

.pagination_pages a, .pagination_pages span {
 margin: 0 6px;
 padding: 5px;
 color: #fff18f;
 text-decoration: none;
 font-size: 11px;
}

.pagination_pages a:hover {
 text-decoration: underline;
}

.pagination_pages .current {
 color: #ccc;
}


/*** Comments ***/

.comments_heading {
 padding-bottom: 10px;
}

.add_comment {
 width: 145px;
 height: 25px;
 float: left;
 margin-left: 15px;
 font-size: 11px;
 border-bottom: 1px solid #4d4d4d;
}

.add_comment a {
 color: #fff18f;
 text-decoration: none;
}

.add_comment a:hover {
 text-decoration: underline;
}

.comment_qty {
 width: 785px;
 height: 25px;
 margin-left: 15px;
 float: left;
 border-bottom: 1px solid #4d4d4d;
 color: #ccc;
 font-size: 12px;
}

.nopassword {
 color: #ccc;
 font-size: 12px;
 padding-left: 15px;
}


.comment_item {
 padding: 15px 0;
 background: url("/portfolium/i/post_list.gif") 0 100% no-repeat;
}

.comment_meta {
 float: left;
 width: 145px;
 margin-left: 15px;
 color: #ccc;
 font-size: 11px;
 line-height: 1.7;
}

.comment_meta a {
 color: #fff18f;
 text-decoration: none;
 font-style: normal;
}

.comment_meta a:hover {
 text-decoration: underline;
}

.comment_text {
 width: 785px;
 margin-left: 15px;
 float: left;
 color: #ccc;
 font-size: 12px;
 line-height: 1.5;
}


#respond {
 margin-top: 30px;
}

.respond_meta {
 float: left;
 width: 145px;
 margin-left: 15px;
 color: #ccc;
 font-size: 12px;
 font-weight: bold;
}

.comment_form {
 padding-bottom: 60px;
 width: 785px;
 float: left;
 margin-left: 15px;
}

.comment_fields {
 margin-bottom: 25px;
}

#author, #email, #url {
 width: 225px;
 float: left;
 margin: 0 15px 0 0;
 padding: 0;
 color: #ccc;
 font-size: 12px;
 border: none;
 border-bottom: 1px solid #4d4d4d;
 background: none;
 padding-bottom: 8px;
 overflow: hidden;
}

#url {
 width: 305px;
 margin: 0;
}

.comment_form textarea {
 width: 785px;
 height: 125px;
 overflow: auto;
 border: none;
 border-bottom: 1px solid #4d4d4d;
 background: none;
 color: #ccc;
 font: 12px Helvetica, Arial, sans-serif;
 margin-bottom: 15px;
}

.comment_submit {
 text-align: right;
}

#submit {
 width: 170px;
 height: 40px;
 padding: 0 15px;
 background: #4d4d4d url("/portfolium/i/comment_submit.gif") 146px 17px no-repeat;
 border: none;
 text-align: left;
 color: #f2f2f2;
 font: 12px Helvetica, Arial, sans-serif;
 cursor: pointer;
}

#submit:hover {
 background: #fff18f url("/portfolium/i/comment_submit.gif") 146px -26px no-repeat;
 color: #4d4d4d;
}

.comment_message {
 color: #f2f2f2;
 font-size: 12px;
 margin-bottom: 12px;
}

.comment_message a {
 color: #fff18f;
 text-decoration: none;
}

.comment_message a:hover {
 text-decoration: underline;
}


/*** Post Work ***/
.post_work {
 position: fixed;
 top: 30px;
 right: 20px;
 z-index:600;
 width: 350px;
 text-align: left;
 color: #333;
 background-color: #f6f6f6;
}

 .post_work label {
  display: block;
  cursor: pointer;
  opacity: 0;
  font-size: 19px;
  padding: 3px 0px 3px 7px;
  font-weight: bold;
  }

  .post_work label:hover {
  opacity: 1;
  background: transparent url(/portfolium/i/arrow_down.png) no-repeat right;
  -moz-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  -webkit-transition: opacity 0.5s ease-in-out;
 }

  .post_work input:checked + label, .post_work input:checked + label:hover {
  opacity: 1;
  }

  .post_work input {
  display: none;
  }

  .post_work article {
   background-color: #f6f6f6;
   position: relative;
   margin-top: -1px;
   overflow: hidden;
   height: 0px;
   transition: 
    height 0.3s ease-in-out;
  }

  .post_work p {
   padding: 10px;
   margin-top: 15px;
  }
  
  .post_work input:checked ~ article {
    transition: 
     height 0.3s ease-in-out;
  }

  .post_work input:checked ~ article.post_small{
    height: auto;
}

  
.post_work a {
 text-decoration:none;
 font-weight: bold;
 font-size: 19px;
 color: #f6f6f6;
}

.post_work a:hover {
 color: #333;
}

.post_work p {
 font-size: 13px;
 line-height: 1.5;
 font-weight: bold;
}

.post_title {
 font-size: 19px;
 font-weight: bold;
 cursor: default;
}

.post_content {
 font-weight: bold;
 line-height: 1.5;
 font-size: 13px;
}

.post_content a {
 color: #fff18f;
 text-decoration: none;
}

.post_content a:hover {
 text-decoration: none;
}

.post_image td{
 padding: 20px;
}

.post_image {
 margin: 0 auto;
 text-align: center;
}

.post_image p {
  font-size: 13px;
  font-weight: bold;
}

.post_image img, .wp-caption-text {
padding-top: 15px;
}


/*** Page ***/
.page_content {
 width: 70%;
 text-align: left;
 color: #333;
 margin: 0 auto;
}

.page_text {
 width: 70%;
 text-align: left;
 color: #333;
 padding-bottom:70px;
}


.page_content p, .page_text p {
 font-size: 19px;
 line-height: 1.3;
}

.page_content strong, .page_text strong {
  font-weight: bold;
}

.page_content h6, .page_text h6 {
 font-size: 13px;
 font-weight: bold;
 line-height: 1.2;
}

.page_content a, .page_text a {
 text-decoration: none;
 border-bottom: 1px solid inherit;
}

.page_content a:hover, .page_text a:hover {
 background-color: #333;
 color: white;
}

/*** Footer ***/

.footer {
 position: fixed;
 bottom: 20px;
 padding: 7px;
 background-color: #f6f6f6;
 color: #F6f6f6;
 font-size: 10px;
 font-weight: bold;
 text-transform: uppercase;
 cursor: default;
 clear: both;
}

.footer:hover {
 color: #999;
}


/*** Infinite Drag ***/
#viewport {
 overflow:hidden;
 width:100%;
 height: 100%;
 color:#fff;
 background-color: #333;
}


#wall ._tile {
 /* Default settings by code:
 * position: absolute,
 * left: [auto],
 * top: [auto],
 * width: [set by constructor],
 * height: [set by constructor],
 * overflow: hidden
 */
 font-size:36px;
 font-weight:bold;
 color:#fff;
 }

.box {
 background-color: transparent;
 text-transform: uppercase;
 font-size: 13px;
 /* border: solid #FFF 15px;
 -webkit-box-shadow:5px 5px 5px 0px rgba(0, 0, 0, 0.3);
 box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.3);
     */
    width: 300px;
    float: left;
}


/* Responsive */
@media screen and (max-width: 325px) {
  .post_home {
   margin: 0 0 30px 0px;
   padding: 0px;
   width: 99%;
 }

  .post_home img {
   width: 100%;
   height: auto;
  }
 
 .thumb  {
  width: inherit;
 }

 .post_work label, .post_work {
  width: 280px;
 }

 .post_work {
  padding: 0px;
 }

}


@media screen and (max-width: 570px) {
 .wrapper {
  margin: 10px;
  padding: 0px;
 }
 .container, .page_content {
  width: 95%;
  margin: 0px;
  padding: 0px;
 }
 .header {
  position: relative;
  margin-bottom: 0px;
 }

 .post_work {
  padding: 0px 0px 0px 0px;
  top: 0px;
  right: 0px;
  position: relative;
  text-align: left;
 }
 
 .post_image {
  width: 100%;
  padding-top: 30px;
  margin: 0px;
 }


 .post_image td{
  padding: 5px;
 }

}

@media screen and (max-width: 770px) {
.post_image img {
  width: 100%;
  height: auto;
  }

.post_image .wp-caption, .post_image .wp-caption img {
 width: 100% !important;
 height: auto;
}

.page_content img, .page_home img{
  width: 100%;
  height: auto;
 }

}   


@media screen and (min-width: 326px) and (max-width: 1035px) {
  .post_home {
   margin: 0 0 30px 15px;
 }
}


@media screen and (max-width: 1035px) {
 .nav li a, .logo a, .post_title, .post_content  {
  color: #333;
  }

 .nav { 
 margin: 0px 0px 0px 10px;}
 .nav li a {
 }

 .logo a, .post_title {
 }

 .footer {
  position: relative;
  color: #999;
  background-color: transparent;
  padding-bottom: 20px;
  bottom: 0px;
  padding-top: 50px;
  left:0px;
 }
 .post_work{
  width: 300px;
 }
 .post_work label, .post_work article {
  opacity: 1;
 }
 .post_work label {
  background: transparent url(/portfolium/i/arrow_down.png) right no-repeat;
 }
}