@charset "UTF-8";
/*
	Plugin Name: JF Bone
	Plugin URI: http://www.lowczycka.de/
	Description: c100 Studio Theme – Based on Bone Theme
	Author: Julia Lowczycka
	Version: 0.1
	Author URI: http://www.lowczycka.de/
	Text Domain: 
	 */
@import url('https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre:400,700');

/* BEGIN Regular */
@font-face {
  font-family: GT-America;
  src: url("./fonts/GT-America-Standard-Regular.woff") format("woff2"), url("./fonts/GT-America-Standard-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal; 
font-display: swap;}
  @font-face {
    font-family: Roboto;
    src: url("./fonts/GT-America-Standard-Regular.woff") format("woff2"), url("./fonts/GT-America-Standard-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal; 
  font-display: swap;}
    /* END Regular */



/*
TOC:

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

*/

/* CSS Document */

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

*{
	margin:0;
	padding:0;
}

img {
 height: auto;
}

a img {
 border: none;
}

html, body{ 
 background-color: #ffffff; 
 font-family: 'GT-America', serif;
 font-size: 16px;
 letter-spacing: 0.07rem;
 color: #000000;
 hyphens: auto;
 -webkit-font-smoothing: subpixel-antialiased;
}
	
ul li {
 list-style:none;
}

.wrapper{ 
 position:relative; 	
 width:100%; 
}

.relative-position {
 position:relative;
}
/* -----------  FONTS ----------- */
p{
 font-size: 1.125rem;
 line-height: 1.75rem;
 font-weight:400;
 padding: 15px 0;
}

h1{
 font-size: 1.125rem;
 line-height: 1.6rem;
 font-weight: 400;
 padding: 0 0 20px 0;
}

h1.mobile{
 display: none;
}

h2{
 font-size:1.125rem; 
 line-height: 1.4rem; 
 font-weight: 200;
}

h3{	
 font-size:1.4rem; 
 line-height: 1.6rem; 
 font-weight: 400;
}

h4{
 font-size:1.0rem;
 font-weight: 400;
 letter-spacing: 0.25rem;
}

h5{
 font-size: 0.8rem;
 line-height: 1.125rem;
 font-weight: 400;
}

h6{
 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 {
 color:inherit;
 text-decoration:none;
 outline: 0;
 font-family:inherit;
 font-size: inherit;
 font-weight: inherit;
}

a:hover{
 color: #666666;
 text-decoration: none;
}

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


.alignright{
 float: right;
 clear: right;
 margin: 0;
 width: 50%;
 height: auto;
}

.alignleft{
 margin: 0;
 float: left;
 clear:left;
 width: 50%;
 height: auto;
}

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

/* ----------- 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%;
 z-index:15;
}

.blogtitle{
 padding:0;
}

.ticker-wrap {
  width: 100%;
  overflow: hidden;
  padding-left: 100%;
  box-sizing: content-box;
}

.ticker{
 padding: 7px;
 animation: MoveLeftRight 20s linear infinite;
    display: inline-block;
    white-space: nowrap;
    padding-right: 100%;
    box-sizing: content-box;
    font-family: inherit;
}

@keyframes MoveLeftRight {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

/* ----------- LOGO ----------- */

.logo{
 top:40px;
 left:80px;
 position: absolute;
}

.logo a img {
 max-width: 450px;
 width:100%;
}

/* ----------- SOCIAL ----------- */

.social-icons {
    position: absolute;
    right: -50px;
    display: inline-block;
    top: 2px;
}

.facebook-icon,
.instagram-icon{
display: inline-block;
padding: 5px;
}

.facebook-icon img,
.instagram-icon img{
width: 20px;
}

.facebook-icon img:hover,
.instagram-icon img:hover{
width: 19px;
}

.social{
color: red;
font-size: 0.8rem;
text-align: right;
padding-right: 80px;
letter-spacing: 0.08rem;
}
/* -----------  NAVIGATION ----------- */
.navMobile, .mobileMenu{
 display:none;
}

.nav{
 position: absolute;
 top:37px;
 right:10px;
}

.nav ul {  
 list-style: none; 
}

.nav ul li { 
 display: inline-block;
 padding: 0 0 0 10px;
}


.nav ul li:nth-child(2){
width: 73px;
}

.nav ul li:nth-child(3){
width: 70px;
}

.nav ul li:nth-child(4){
width: 88px;
}

.nav ul li:nth-child(5){
width: 91px;
}

.nav ul li:nth-child(6){
width: 86px;
display: none;
}

.nav ul li:nth-child(7){
width: 105px;
}


.menu {
    display: inline;
    padding-right: 40px;
    float: left;
    padding-top: 0;
     display:inline-block;
 text-align:center;
}

/* ----------- NAVLINKS ----------- */
.nav ul.menu li a {
 font-size: 1.125rem;
 line-height: 1.6rem;
 font-weight: 400;
 padding: 3px 5px 5px;
 text-decoration: none;
 color:#000000;
 display:inline-block;
 text-align:center;
}

ul.menu li.active a{
 color:#666;
}

.nav .menu li a:focus,
.nav .menu li a:hover{
  font-size: 1.15rem;
}


.nav ul.menu li a::after {
    display: block;
    content: attr(title);
    font-size: 1.15rem;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}


.nav ul.menu li a:active {
 color: #aaa;
}

.nav .current_page_item a{
}

 a.mobile{
  display: none;
 }
/* ----------- SEARCH ----------- */
#searchform{
}

#search{
}

#searchsubmit{
}

.searchresult{
	height: auto;
}

.searchresult p {
	padding: 0 0 20px 0;
}
/* ----------- HOME ----------- */
.imprint,
.info{
 padding: 15%;
 border-bottom: 1px solid #555;
 position: relative;
}

.project-index-wrapper{
 padding: 100px 5% 50px;
 border-bottom: 1px solid #555;
 position: relative;
}

.project-archive-wrapper{
 padding: 250px 5% 210px;
 border-bottom: 1px solid #555;
 position: relative;
}

.project-nav {
 width: 1200px;
 position: absolute;
 right: 80px;
 top: 125px;
 display: none;
}

.clear{
 clear: both;
}

.project-nav ul li,
.project-list ul li,
.project-list-archive ul li{
 display: block;
 font-size: 0.8rem;
 line-height: 1.6rem;
 font-weight: 400;
 float:left;
 letter-spacing: 0.05rem;
}

.project-nav ul li{
 text-align: right;
 width: 200px;
 cursor:pointer;
}

.project-nav ul li:hover,
.project-nav ul li.active {
 color:#666;
}

.project-list ul li{
 width: 31%;
 margin: 1%;
}

.project-list-archive ul li{
 width: 16.66%;
 height: auto;
}

.project-list ul li.hidden,
.project-list-archive ul li.hidden{
 display:none;
}

.pj-link{
 position: relative;
 display:block;
}

.pj-thumb {
 display: block;
 position: relative;
 padding: 10px;
}

.pj-title{
 display:none;
  position: absolute;
  width: 90%;
  top: 50%;
  text-align: center;
  margin: -15px 5%;
 color:#000000;
 font-size: 1.04rem;
}

.pj-link:hover .pj-title{
 display:block;
}

.pj-thumb img {
 width:100%;
}

.pj-link:hover .pj-thumb img {
 opacity: 0.2;
}

.content{
    width: 100%;
    position: relative;
}


/* ----------- FLEXSLIDER  ----------- */


.flexslider .slides > li > *{
 padding-left:1px;
 padding-right:1px;
}
#slider-container .flexslider .slides > li > *{
padding:0;
}

.info .flexslider .slides > li,
.imprint .flexslider .slides > li {
 display: block;
 margin:0 0 50px 0;
}

.wrapper .flex-direction-nav .cirk-prev { 
 opacity: .6; 
 left: 10px;
}

.wrapper .flex-direction-nav .cirk-next { 
 opacity: .6; 
 right: 10px;
}

.wrapper .flex-direction-nav .flex-prev:hover, 
.wrapper .flex-direction-nav .flex-next:hover{
opacity: 1;
}

#slider-container{
overflow:hidden;
position:relative;
}

#slider-container .flex-viewport {
 overflow:visible !important;
}

.wrapper .flexslider {
position: static;
}

.info .flex-control-nav,
.imprint .flex-control-nav{
 position:static;
 text-align: left;
 width: auto;
 margin:14px 0 0 0;
}

.journal .flex-control-nav{
  position: relative;
}

.info .flex-control-paging li a,
.imprint .flex-control-paging li a{
 background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
 height:14px;
 width:14px;
 border:1px solid #000000;
}

.info .flex-control-paging li a:hover,
.imprint .flex-control-paging li a:hover{
 background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
}

.info .flex-control-paging li a.flex-active,
.imprint .flex-control-paging li a.flex-active{
 background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);
}


.flexslider .flex-direction-nav a{
 top:0;
 bottom:0;
 width:150px;
 max-width:12%;
 height:auto;
 margin:0;
 opacity: 0.6;
}

#slider-container .flexslider .flex-direction-nav a{
 width:50px;
}

#slider-container .flexslider .flex-direction-nav a.flex-prev{
 cursor: url("images/Arrow-Slideshow-Left.png"), default;
 cursor: url("images/Arrow-Slideshow-Left.png") 30 40 , move;
 width:50%;
 max-width:50%;
 background: none;
}

#slider-container .flexslider .flex-direction-nav a.flex-next{
 cursor: url("images/Arrow-Slideshow-Right.png"), default;
 cursor: url("images/Arrow-Slideshow-Right.png") 30 40, move;
 width:50%;
 max-width:50%;
 background: none;
}

.flexslider .flex-direction-nav a.flex-prev{
      background: url('images/Arrow-Journal-Info-Left.png') no-repeat;
      background-position: 12% 50%;
      left:0;
}
.flexslider .flex-direction-nav a.flex-next{
  right:0;
  background: url('images/Arrow-Journal-Info-Right.png') no-repeat;
  background-position: 88% 50%;
}

.wrapper #slider-container .flex-direction-nav a.flex-next::before,
.wrapper #slider-container .flex-direction-nav a.flex-prev::before{
 content:none;
}

.wrapper .flex-direction-nav a.flex-next::before,
.wrapper .flex-direction-nav a.flex-prev::before{
  content: none;
 position:absolute;
 top:48%;
 color:#fff;
}

.wrapper .flex-direction-nav a.flex-next::before{
 right:20px;
}
.wrapper .flex-direction-nav a.flex-prev::before{
 left:20px;
}



/* ----------- ARCHIVE ----------- */

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

/* ----------- SINGLE ----------- */

.single-post {
 margin: 100px auto 0;
 width: 90%;
}

.single-post p {
 padding: 0 80px 30px 0;
}

.single-post p.image {
 padding:0;
}

.single-post p.image img {
 display:block;
 padding: 0 0 3% 0;
}

.single-post-text{
  width: 80%;
  margin: 100px auto 0;
  position: relative;
}

/* ----------- SIDEBAR ----------- */
.side{
}

/* ----------- FOOTER ----------- */
.footer{
  position: fixed;
  bottom: 10px;
  text-align: right;
  right: 10px;
  color: #444444;
  z-index: 100;
}

/* ----------- WOO COMMERCE SHOP ----------- */
#container {
    width: 90%;
    padding: 120px 0 0 5%;
}

.woocommerce {
    width: 90%;
    padding: 0 5%;
}

.woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-result-count,
.woocommerce-breadcrumb,
.woocommerce-products-header__title,
#sidebar{
  display: none;
}

.woocommerce ul.products li.product .price{
  color: #000000;
}

.woocommerce button.button.alt{
  color: #515151;
background-color: #ebe9eb;
font-family: inherit;
}

.woocommerce #respond input#submit.alt:hover, 
.woocommerce a.button.alt,
.woocommerce a.button.alt:hover, 
.woocommerce button.button.alt:hover, 
.woocommerce input.button.alt:hover 
.woocommerce #respond input#submit, 
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button
{
    background-color: #515151;
      color: #ffffff;
      font-family: inherit;
      opacity: 1;
}

.woocommerce input.button:disabled, .woocommerce input.button:disabled[disabled] {
    opacity: 0;
}

.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
    background-color: #51515;
    color: #ffffff;
    -webkit-font-smoothing: antialiased;
}

.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {
    background-color: #444444;
}

.woocommerce .quantity .qty {
    padding: 0.618em 1em;
    background-color: #ebe9eb;
    color: #000000;
    border: none;
    border-radius: 3px;
    font-weight: bold;
    padding: 0.618em 0.5em;
    font-size: 14px;
    height: 17px;
    width: 44px;
    text-align: left;
    font-family: inherit;
}

.woocommerce div.product p.price, .woocommerce div.product span.price {
    color: #000000;
}

h1.product_title,
#tab-description h2{
  font-size: 2rem;
  padding: 0 0 16px 0;
}

.woocommerce-tabs{
padding: 60px 0 0 0;
}

.woocommerce-tabs ul.tabs {
  display: none;
}

.woocommerce-message {
    border-top-color: transparent;
}

.woocommerce-error, .woocommerce-info, .woocommerce-message {
    border-radius: 5px;
}


.woocommerce table.shop_table {
    border: 1px solid rgba(225,225,225,1);
    }


#add_payment_method table.cart td.actions .coupon .input-text, 
.woocommerce-cart table.cart td.actions .coupon .input-text, .woocommerce-checkout table.cart td.actions .coupon .input-text {
    border: 1px solid #ffffff;
    margin: 0 10px 0 0;
    line-height: 1.5;
    width: 150px;
    border-radius: 5px;
    font-family: inherit;
    font-size: inherit;
}

.woocommerce table.shop_table td {
    border-top: 1px solid rgba(225,225,225,1);
}

/* ----------- Newsletter ----------- */

.tnp-subscription{
  margin: 20px 0 0 0 !important;
}

.tnp-subscription label {
    font-size: inherit !important;
    font-weight: normal !important;

}

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

@media screen and (min-width: 2000px)  {
 .project-list-archive ul li{
  width:250px;
 }
}


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

 .project-list-archive ul li{
  width:20%;
 }

 .project-nav{
  width:600px;
  top:100px;
 }
}


@media screen and (max-width: 1250px)  {
 
 .project-list-archive ul li{
  width:25%;
 }

}

@media screen and (max-width: 1015px)  {
 
 .nav ul li{
  padding: 0 0 0 5px;
 }

}

@media screen and (max-width: 1000px)  {
 .project-list-archive ul li{
  width:33.3%;
 }
}


@media screen and (max-width: 970px)  {
	
.ticker-wrap{
  display: none;
}

/* Start Mobile Navigation */	
 .menu-menu-container{ 
  display: none;
 }

 .showMobileNav {
  display:block;
 }

 .nav {
top: 60px;
right: 88px;
}


 .menu {
    display: inline;
    padding-right: 0;
    float: unset;
    padding-top: 0;
    display: unset;
    text-align: center;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #ffffff;
    height: 100vh;
    padding-top: 33px;

}

.nav ul li{
  display: block;
  padding: 5px;
}
.nav ul li:nth-child(2),
.nav ul li:nth-child(3),
.nav ul li:nth-child(4),
.nav ul li:nth-child(5),
.nav ul li:nth-child(6),
.nav ul li:nth-child(7){
width: auto;
}

.nav ul li:nth-child(6){
display: block;
}


.nav ul.menu li a {
  padding: 15px 50px;
}

.tnp-subscription {
    width: 90% !important;

}


 h1.mobile{
  display: block;
  position: absolute;
  top:40px;
  left:20px;
 }

 a.mobile{
  display: block;
  position: absolute;
  top:40px;
  right: 20px;
  font-size: 1.125rem;
 }

  .menuToggle { 
position: absolute;
top: 0px;
right: 0px;
cursor: pointer;
display: block;
padding: 15px 20px 20px 10px;
 }

 .menuToggle span{ 
background: none repeat scroll 0 0 rgba(0,0,0,1);
display: block;
height: 3px;
margin-bottom: 4px;
width: 28px;
border-radius: 10px;
 }


 .logo{
  top:10px;
  left:20px;
  position: absolute;
 }

 .single-post p {
  padding: 0 20px 30px 0;
 }

 .single-post {
  margin: 50px auto 0;
 }

 .single-post-text {
  margin-top: 50px;
 }

  .project-list-archive ul li{
  width:33%;
 }

 .project-list ul li {
    width: 44%;
    margin: 3%;
}

.footer{
  display: none;
}

 /* ----------- SOCIAL ----------- */


.social{
  text-align: left;
  padding: 0 0 10px 20px;
  }

  .social-icons {
    position: absolute;
    right: -70px;
    display: inline;
    top: -15px;
}

.facebook-icon, 
.instagram-icon {
    display: block;
    padding: 10px 7px;
}

}

@media screen and (max-width: 860px)  {
#slider-container{
padding: 0 0;
}
}

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


.nav {
    right: 80px;
}

.menuToggle {
    padding: 10px 13px 20px 10px;

}

 .project-nav{
  width:400px;
  top:77px;
 }

 .project-list-archive ul li{
  width:50%;
 }

 .project-list ul li {
    width: 46%;
    margin: 2%;
}

}

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

 body,html {
  font-size:13px;
 }

 p{
  padding: 15px 0;
 }

 .project-nav {
  display: none !important;
 }

 .project-index-wrapper {
  padding: 15%;
 }

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

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

  .project-list-archive ul li{
  width:100%;
 }

  .project-list ul li{
  width:100%;
  margin: 0;
 }

}