@font-face {
    font-family: logotype;
    src: url("../typo/Elsie-Regular.ttf");
}

@font-face {
    font-family: readtext;
    src: url("../typo/OpenSans-Regular.ttf");
}

@font-face {
    font-family: headertext;
    src: url("../typo/CrimsonText-Bold.ttf");
}

@font-face {
    font-family: sublogo;
    src: url("../typo/CrimsonText-Roman.ttf");
}

@font-face {
    font-family: smallread;
    src: url("../typo/IBMPlexSans-Regular.ttf");
}

.allcenter {
    margin: 0;
    position: fixed;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
}


#homeclick{
    transition: 1s;
    z-index: -1;
    text-align: center;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
}

.hoverlink:hover{
    animation-name:hovermenur;
    animation-duration: 4s;
    -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
    animation-iteration-count: infinite;
    cursor:grab;
}

.hoverlink2:hover{
    animation-name:hovermenur2;
    animation-duration: 4s;
    -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
    animation-iteration-count: infinite;
    cursor:grab;
}

.hovercolor:hover{
    animation-name:hovercolor;
    animation-duration: 4s;
    -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
    animation-iteration-count: infinite;
    cursor:wait;
}

@keyframes hovercolor {
    0%   {color:inherit;transform: translate(0%, 0%);}
    25%  {color: 505050;transform: translate(0%, -10%);}
    50%  {color:C0C0C0;transform: translate(0%, -20%);}
    100% {color:inherit;transform: translate(0%, 0%);}
}

@keyframes hovermenur {
    0%   {letter-spacing: normal;}
    25%  {letter-spacing: 15px;}
    50%  {letter-spacing: 30px;}
    100% {letter-spacing: normal;}
}

@keyframes hovermenur2 {
    0%   {letter-spacing: normal;}
    25%  {letter-spacing: 15px;}
    100% {letter-spacing: normal;}
}

.menuwhite {
  color:black;
  background-color:white;
  font-family: readtext;
  width:50%;
  display:block;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  height:0%;
  transition: 1s;
  position:fixed;
  z-index: 1;
  }

.buttons{
  max-height: 15px;
  position: absolute;
  transform: translate(-50%, -50%);
}

.buttons2{
  max-height: 20px;
  position: absolute;
  right: 0;
  margin: 10px;
}

.buttons2:hover{
  animation-name:closehover;
  animation-duration: 4s;
  -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
  animation-iteration-count: infinite;
    cursor: grab;
}

@keyframes closehover {
    0%   {opacity: 1;}
    25%  {opacity: 0.1;}
    100% {opacity: 1;}
}

.buttons:hover{
  animation-name:closehover;
  animation-duration: 4s;
  -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
  animation-iteration-count: infinite;
}

.menu-content {
  font-family: readtext;
  margin-left: 10%;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;

}


.small {
    text-align: left;
    line-height: 70%;
}

@keyframes hoverstrike {
    0%   {text-indent: 0;}
    25%  {text-indent: 10px;}
    100% {text-indent: 0;}
}

.small:hover {
    animation-name:hoverstrike;
    animation-duration: 4s;
    -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
    animation-iteration-count: infinite;
}

.smallnote {
  color: black;
}

.right {
    display:inline-block;
    width: 49%;
    margin-left: 50%;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    height:100%;
    overflow: hidden;
    
}

body{
    margin:0px;
    padding:0px; 
}


#sketch-holder{
    position: fixed;
    z-index: -2;
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


.right_black {
    display:inline-block;
    width: 0%;
    margin-left: 51%;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    background-color: 050505;
    color: FAFAFA;
    transition: 1s;
    overflow-x:hidden;
    max-width: 49%;
    height:0%;
    z-index: 2;
}

.logo {
    font-family:logotype;
    font-size: 75;
    line-height: 90%;

}

.logosmall {
    font-family:logotype;
    font-size: 40;
    line-height: 100%;

}

.logosub {
    font-family:sublogo;
    font-size: 20;
    line-height: 100%;

}
.logosubsmall {
    font-family:sublogo;
    font-size: 20;
    line-height: 100%;

}

.mobilemenu {
    Position:fixed;
    display:none;

}



.menulink{
  pointer-events: none;
}

p.indent{
  padding-left: 1.3em; 
}

a:visited {  
 color:#505050;
}

a:link {
    color: darkgray;
    text-decoration: none;
}


.intitules {
    color:dimgray;
}


.booktitle{
    font-family: headertext;
    font-size: 55;
    line-height:93%;
    float:center;
    padding-left:10%;
    padding-right:10%;
    padding-top:5%;
}

.bookinfo{
    width:80%;
    padding-left:10%;
    padding-top:2%;
    margin-bottom:3%;
    font-size:13;
    height:auto;
    font-family: smallread;
   text-align: justify;
    position:initial;
    display: block;
}
#mobilemenu {display: none;}

@media screen and (orientation:portrait) and (max-width:1024px){

  

.smalllogo {
    font-family:logotype;
    font-size: 40;
    line-height: 90%;
    padding-top: 10px;
    padding-left: 10;

}


.smalllogosub {
    font-family:sublogo;
    font-size: 17;
    line-height: 70%;
    padding-left: 10px;

}


 .allcenter {
    margin: 0;
    position:relative;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
}
  

    .logosmall {
        display:none;}
    .logosubsmall {
        display:none;}
    
.booktitle{
    font-size: 35;
    float:left;
    padding-left:5%;
    padding-right:5%;
    padding-top:5%;
    width: 100%
}
    
 .bookinfo{
    width:90%;
    padding-left:5%;
    margin-bottom:2%;
    font-size:12.5;
    position:initial;
    display: block;
}
    
    .right_black {
    display:block;
    width: 0%;
    height:auto;
    left:0;
    padding-top: 0;
    margin-left: 0;
    float: center;
    max-width: 100%;
    z-index: 2;
}
    
    .small {
    text-align:center;
    line-height: 100%;
    margin: 10;
}
@keyframes hoverstrike2 {
    0%   {text-indent: 0;}
    25%  {text-indent: 10px;}
    50%  {text-indent: -10px;}
    100% {text-indent: 0;}
}

.small:hover {
    animation-name:hoverstrike2;
    animation-duration: 4s;
    -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
    animation-iteration-count: infinite;
}
    .buttons2{
    display: none;}

    .menuwhite {
  font-family: readtext;
  width:100%;
  display:block;
  opacity: 0;
  height:0%;
  transition: 1s;
  position:relative;
        z-index: -1;
}
#sketch-holder{
    position: fixed;
    z-index: -2;
    }
#homeclick{
    z-index: 1;
    }
.menu-content {
    font-size: 80%;
    margin-left: 0%;
    position: relative;
  }
    
    .smalllogo {
    font-family:logotype;
    font-size: 30;
    line-height: 90%;
    padding-left:5%;
}

    
#mobilemenu {
    width:100%;
    Position:fixed;
    color:black;
    top:0;
    left:0;
    background-color: white;
    display:none;
    height:60px;
    z-index: 0;
    vertical-align: middle;
}
    

.smalllogosub {
    font-family:sublogo;
    font-size: 15;
    line-height: 100%;
    padding-left:5%;
    color: dimgrey;

}
    
.buttons3{
  max-height: 15px;
  position: relative;
    vertical-align: baseline;
}
}