/*
Site Name: zora del buono
Theme URI: http://zoradelbuono.de/
Description: Website of Zora del Buono
Author: ok@prontonet.eu
Author URI: http://schildgenerator.de/
Version: 1.0
Additional CSS for responsive behaviour
*/

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

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

  #header {
    padding: 25px 30px 0;
  }

  #logo {
    margin-top: 0;
    max-width: 95%;
  }

  #logo img {
    width: 100%;
  }

  #center-element.text-center {
    height: 50%;
  }
  h2,
  h4 {
    font-size: 20px;
  }

  button.textnav {
    font-size: 16px;
  }

  .small-text {
    font-size: 14px;
  }


  /* Navigation */
  #mobile-menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 92%;
    background: white;
    z-index: 1000;
    padding: 4%;
    box-shadow: 0 0 10px 1px ;
  }

  #mobile-menu ul.mobilenavigation {
    list-style: none;
    margin-top: 35px;
    font-size: 20px;
  }

  #mobile-menu ul.mobilenavigation li {
    margin-bottom: 1px;
    background: #a0bcde;
    padding: 10px
  }

  #mobile-menu ul.mobilenavigation li:before {
    content: none;
  }

  #mobile-menu ul.mobilenavigation li.active {
    background: #330000;
  }

  #mobile-menu ul.mobilenavigation li a {
    color: #330000;
    display: block;
    letter-spacing: 1px;
  }

  #mobile-menu ul.mobilenavigation li.active a {
    color: #ffffff;
  }

  i.menu-icon {
    /* critical positioning styles */
    z-index: 2;
    display: block;
    position: absolute;
    top: 36px;
    right: 30px;
    /* non-critical apperance styles */
    height: 12px;
    width: 24px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='24px' height='12px' viewBox='0 0 24 12' enable-background='new 0 0 24 12' xml:space='preserve'><rect x='0' y='0' width='100%' height='100%' fill='rgb(255,255,255)' /><rect y='0' x='0' width='24' height='2' fill='rgb(51, 0, 0)'/><rect x='0' y='5' width='24' height='2' fill='rgb(51, 0, 0)'/><rect x='0' y='10' width='24' height='2' fill='rgb(51, 0, 0)'/></svg>");
    background-size: contain;
  }

  i.menu-close-cross {
    /* critical positioning styles */
    z-index: 2000;
    position: absolute;
    top: 15px;
    right: 15px;
    /* non-critical apperance styles */
    height: 24px;
    width: 24px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3aWR0aD0iNTEycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0yNTYsN0MxMTguNDY3LDcsNywxMTguNDY4LDcsMjU2LjAwMkM3LDM5My41MzMsMTE4LjQ2Nyw1MDUsMjU2LDUwNXMyNDktMTExLjQ2NywyNDktMjQ4Ljk5OCAgQzUwNSwxMTguNDY4LDM5My41MzMsNywyNTYsN3ogTTI1Niw0ODUuMDhjLTEyNi4zMSwwLTIyOS4wOC0xMDIuNzcxLTIyOS4wOC0yMjkuMDc4QzI2LjkyLDEyOS42OTIsMTI5LjY5LDI2LjkyLDI1NiwyNi45MiAgYzEyNi4zMDksMCwyMjkuMDgsMTAyLjc3MSwyMjkuMDgsMjI5LjA4MkM0ODUuMDgsMzgyLjMwOSwzODIuMzA5LDQ4NS4wOCwyNTYsNDg1LjA4eiIgZmlsbD0iIzQyNTY2MSIvPjxwb2x5Z29uIGZpbGw9IiM0MjU2NjEiIHBvaW50cz0iMzY4LjU0NSwxNTcuMDczIDM1NC40NjEsMTQyLjk4OCAyNTUuODYzLDI0MS41ODcgMTU3LjczMywxNDMuNDU2IDE0My42NDgsMTU3LjU0IDI0MS43OCwyNTUuNjcyICAgMTQzLjY0OCwzNTMuODA5IDE1Ny43MzMsMzY3Ljg5MyAyNTUuODYzLDI2OS43NSAzNTQuNDYxLDM2OC4zNjEgMzY4LjU0NSwzNTQuMjc1IDI2OS45NDcsMjU1LjY3MiAiLz48L3N2Zz4=");
    background-size: contain;
  }

  .topline {
    padding-top: 50px;
  }


  .single-book {
    display: block;
    margin-bottom: 75px;
  }

  .single-book-left {
    max-width: 100%;
    margin: 0 30px;
    text-align: center;
  }

  .single-book-left-addon {
    margin-top: 2em;
  }

  .book-cover {
    max-width: 70%
  }

  .book-text {
    max-width: 100%;
    min-width: 0;
    padding: 40px 30px;
    border-top: none !important;
  }

  #footer {
    padding: 0 30px;
  }

  #bottom-nav {
    text-align: right;
  }

  #bottom-nav span {
    display: block;
  }

  /* TEXT */
  .single-text-row {
    display: block;
  }

  .single-text-row .topline {
    padding: 50px 0 35px;
  }

  .text-item-pic {
    max-width: 100%;
    text-align: center;
    padding: 0;
    margin: 0 30px;
  }

  .text-item-pic img {
    display: inline;
  }

  .single-text-row .text-meta {
    width: auto;
    padding: 0 30px 0;
    position: relative;
    border: none;
  }

  .text-download-link {
    position: static;
  }

  .single-text-row .text-info-text {
    width: auto;
    padding: 0 30px 45px;
    border: none;
  }

  /* VITA */
  #vita-container {
    display: block;
    margin: 30px 30px 100px;
    position: relative;
    justify-content: center;
    padding-bottom: 40px;
  }

  #vita-text {
    padding-left: 0;
    width: auto;
    margin-top: 2em;
  }

  #vita-contact {
    padding-left: 0;
  }

  /* General classes*/
  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }
  /* BOOKNAV STYLING */
  #booknav {
    width: 412px;
    margin: 34px auto 50px;
  }

  #booknav > a:nth-child(6n+4){
    margin-left: 58px;
  }


}

/* TEXTNAV STYLING */
@media only screen and (max-width : 920px) and (min-width: 411px) {

  #center-element.text-center {
    height: 50%;
    width: 100%
  }

  #text-nav{
    width: 472px;
    margin: 20px auto;
  }

  #textnav {
    width: 472px;
    justify-content: center;
    margin: 50px auto;
  }

}


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

  #header {
    padding: 25px 15px 0;
  }

  i.menu-icon {
    right: 15px;
  }

  #footer {
    padding: 0 15px;
    font-size: 14px;
  }

  .text-item-pic {
    margin: 0 15px;
  }

  .single-text-row .text-info-text {
    padding: 0 15px 45px;
  }

  .single-text-row .text-meta {
    padding: 0 15px 0;
  }

  .single-book-left {
    margin: 0 15px;
  }

  .book-text {
    padding: 40px 15px;
  }

  #vita-container {
    margin: 30px 15px 100px;
  }

  #vita-pic {
    width: auto;
  }




  #center-element.text-page,
  #center-element.startpage {
    position: relative;
    margin: 50px auto;
  }

  #meta-nav {
    display: flex;
    flex-direction: column;
  }

  #meta-nav a {
    margin-bottom: 5px;
  }

  button.indexnav {
    width: 90px;
    height: 90px;
  }

  .nav-underline {
    width: 278px;
    height: 4px;
    top: -117px;

    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  #textnav {
    width: 412px;
    justify-content: initial;
    margin: 35px auto 50px;
  }

  #textnav > a:nth-child(6n+4) {
    margin-left: 58px;
  }

  #text-nav {
    margin: 0 auto;
    width: 294px;
    justify-content: initial;
  }

  #text-nav > a:nth-child(4n+3) {
    margin-left: 58px;
  }

}

/* BOOKNAV STYLING */
@media only screen and (max-width : 410px) {
  #booknav,
  #textnav {
    width: 294px;
    justify-content: initial;
  }

  #booknav > a:nth-child(6n+4),
  #textnav > a:nth-child(6n+4) {
    margin-left: 0;
  }

  #booknav > a:nth-child(4n+3),
  #textnav > a:nth-child(4n+3) {
    margin-left: 58px;
  }

  #vita-pic {
    height: 550px;
  }

}