@charset "UTF-8";
/*
	Plugin Name: JF Bone
	Plugin URI: http://www.lowczycka.de/
	Description: Bone Theme
	Author: Julia Lowczycka
	Version: 0.1
	Author URI: http://www.lowczycka.de/
	Text Domain: 
	 */
@import url(http://fonts.googleapis.com/css?family=Questrial);
/*
TOC:

-   GLOBALSETTINGS
--  FONTS
--- LINKS
--  CUSTOMIMAGE
--  VIDEORESPONSIVE 
-   HEADER
--  LOGO
--  SOCIAL
--  NAVIGATION
--- NAVLINKS
--  SEARCH
-   ARCHIVE
--  FRONTPAGE 
--  SLIDER
--  MASONRY
--  AJAX
-   SINGLE
--  CONTACT
-   SIDEBAR
-   FOOTER

*/

/* CSS Document */

/* ----------- GLOBALSETTINGS ---------- */

*{
	margin:0;
	padding:0;
}

img {
 height: auto;
}

a img {
 border: none;
}

html, body{ 
 font-family: "Questrial",Helvetica, Arial, sans-serif;
 font-weight: normal;
 font-style: normal;
 /*background-color: #282827; */
 background-color: #fff; 
 font-size: 16px;
 letter-spacing: 0.05rem;
 color: #000;
 -moz-hyphens: auto;
 hyphens: auto;
}
	
.wrapper{ 
 position:relative; 	
 margin: 170px 80px 80px 80px;
}

.relative-position {
 position:relative;
}
/* -----------  FONTS ----------- */
p{
 /*color:#c6c6c6;*/
 color: #000;
 padding: 10px 0;
 font-size: 1.125rem;
 line-height: 1.75rem;
}

h1{
 /*color:#c6c6c6;*/
 color: #000;
 font-size: 1.75rem;
 line-height: 2.3rem;
 font-weight: 400;
 padding: 0 0 20px 0;
}

h2{
 /*color:#c6c6c6;*/
 color: #000;
 font-size:1.0rem; 
 line-height: 1.4rem; 
 font-weight: 200;
}

h3{	
 /*color:#c6c6c6;*/
 color: #000;
 font-size:1.4rem; 
 line-height: 1.6rem; 
 font-weight: 400;
}

h4{
 /*color:#c6c6c6;*/
 color: #000;
 font-size:1.0rem;
 font-weight: 400;
 letter-spacing: 0.25rem;
}

h5{
 /*color:#c6c6c6;*/
 color: #000;
 font-size: 0.8rem;
 line-height: 1.2rem;
 font-weight: 400;
}

h6{
 /*color:#c6c6c6;*/
 color: #000;
 font-size: 0.6rem;
 line-height: 1rem;
 font-weight: 400;
}

.text-small{
 font-size: 0.5rem;
 line-height: 0.7rem;
}

.smallcaps{
 text-transform: uppercase;
}

/* -----------  LINKS ----------- */
a {
 text-decoration:none;
 outline: 0;
 /*color:#c6c6c6;*/
 color: #000;
}

a:hover{
 text-decoration: none;
}


/* ----------- CUSTOMIMAGE ----------- */


.size-imagehalf,
.size-image-half{
 width:50%;
 height: auto;
}

.size-full,
.size-image-full {
 width:100%;
 height: auto;
}

.alignright{
 float: right;
 margin: 0 0 0 2%;
 width: 48%;
}

.alignleft{
 margin: 0 2% 0 0;
 float: left;
 width: 48%;
 clear:left;
}

.alignnone{
 width: 100%;
 height: auto;
 margin: 0px;
}

/* ----------- VIDEORESPONSIVE ----------- */
.vid-container {
 width: 100%;
 height: auto;
 position: relative;
}

.vid-container iframe,  
.vid-container object,  
.vid-container embed{
 position: absolute;
 width: 100%;
 height: 100%;
 border: 0;
}

.entry-content img, 
.entry-content iframe, 
.entry-content object, 
.entry-content embed {
 max-width: 100%;
}

.video-js {
 position: static !important;
 height:100%;
 width: 100%;
}

.vid-container:after {
 content: '.';
 display: block;
 position: relative;
 visibility: hidden;
}

.ar16-9:after {
 padding: 56.25% 0 0 0; /* (height/width)*100%, eg. 56.25% for 16:9 75% for 4:3 */
}

.ar4-3:after {
 padding: 75% 0 0 0; /* (height/width)*100%, eg. 56.25% for 16:9 75% for 4:3 */
}

.ar1:after {
 padding: 100% 0 0 0; /* (height/width)*100%, eg. 56.25% for 16:9 75% for 4:3 */
}

/* -----------  HEADER ----------- */
.header{
 position: fixed;
 top:0;
 left:0;
 width:100%;
 height: 120px;
 z-index:5;
}

/* ----------- LOGO ----------- */
.logo,
.nav{
 padding: 80px;
 position: absolute;
 top:0;
}

.logo{
 left:0;
}

.nav{
 right:0;
}

/* ----------- SOCIAL ----------- */
.social {
}

.social a img{
 width: 24px;
 height: 24px;
 margin: 4px;
}

.social a:hover img{
 width: 30px;
 height: 30px;
 margin: 1px;
}

/* -----------  NAVIGATION ----------- */
.nav{
}

.nav ul {  
 list-style: none; 
}

.nav ul li { 
 display: inline;
 padding: 0 0 0 20px;
}

.menu{
}

/* ----------- NAVLINKS ----------- */
.header a {
 font-weight: 400;
 font-size: 1.125rem;
 padding: 3px 5px 5px;
 text-decoration: none;
}

.nav .menu a:focus{
}

.nav .menu a:hover{
}

.nav .menu a:hover:after {
}

.nav .menu a:active{
}

.nav .current_page_item a{
}

/* ----------- SEARCH ----------- */
#searchform{
 position:relative;
}

#search{
}

#searchsubmit{
}

.searchresult{
	height: auto;
}

.searchresult p {
	padding: 0 0 20px 0;
}

/* ----------- ARCHIVE ----------- */
.content{
 text-align:center;
}

.post-item {
     display: inline-block;
     padding: 30px;
}

.post-item,
.post-item img{
 max-width:100%;
}

/* ----------- POSTNAVIGATION ----------- */
.post-nav-link {
 text-align:right;
 padding: 0 1% 0 0;
}

/* ----------- SINGLE ----------- */
.article{
	width: 100%;	
	padding: 14px 0 0 0;	
}

.content.single {
 margin: 0 12%;
 overflow: auto;
}

.content.single p {
 clear: both;
}

.content.single img{
 margin: 50px 0 0 0;
}

/* ----------- Newsletter Plugin ----------- */
.tnp-subscription{
  text-align: left;
  margin: 15px 0 !important;
}


/* ------------------------------ */
/* -----------  MOBILE ---------- */
/* ------------------------------ */

@media screen and (max-width: 900px)  {
 .wrapper {
  margin: 110px 50px 50px 50px;
 }

 .nav,
 .logo{
  padding: 50px;
 }

 .nav ul li {
  display: block;
  text-align:right;
 }

 .alignleft,
 .alignright{
  width: 100%;
  float: none;
 }
}

@media screen and (max-width: 600px) {
 .wrapper {
  margin: 130px 30px 30px 30px;
 }

 .nav,
 .logo{
  padding: 30px 0 0 30px;
  position: static;
 }

 .post-item {
  padding: 30px 0;
 }

 .nav ul li {
  text-align:left;
  padding:0;
 }

 .content.single{
  margin: 0;
  padding: 30px 0;
 }

}

@media screen and (max-width: 500px)  {
 body,html{
  font-size:13px;
 }
}