/* icon-ommx 2015 on fontello.com*/
@font-face {
    font-family: 'icon-ommx';
    src: url('../fonts/icon-ommx.eot');
    src: url('../fonts/icon-ommx.eot?#iefix') format('embedded-opentype'),
         url('../fonts/icon-ommx.woff') format('woff'),
         url('../fonts/icon-ommx.ttf') format('truetype'),
         url('../fonts/icon-ommx.svg#fontelloregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
.browsehappy {
    margin: 0.2em 0;
    padding: 0.2em 0;
    background: #ccc;
    color: #000;
}

/* ==========================================================================
   OMMX Special 
   ========================================================================== */  
::-moz-selection {
  background: #D22929;
  color: #EFEFEF;
  text-shadow: none;
}
/* Highlight text Selection*/
::selection {
  text-shadow: none;
  background: transparent; /*rgba(209,70,42,0.45)*/
  color: rgba(209,70,42,100);
}
::-moz-selection {background: transparent;}

/* webkit scroller */
::-webkit-scrollbar-thumb:vertical { height:10px; border:1px solid #ccc; /* border-radius: 5px; */ background:#ccc;}
::-webkit-scrollbar-thumb:horizontal { height:10px; border:1px solid #ccc; /* border-radius: 5px; */ background:#ccc;}
::-webkit-scrollbar { margin-right:5px; width:12px; height:8px; background:#fff; border:1px solid #ccc;}


/*for Firefox*/ 
a:focus, a:active {outline: none;}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html {
  min-height: 100%;
  overflow-y: scroll;
}

body {
  padding-top: 60px;

  background: #F8F8F8;
  color: #222;
  font-family: 'EB GARAMOND',times, Georgia,serif;
  font-size: 16px;
  line-height: 1.35em;
}

/* Global */
a {
  color: #222;
  font-family: 'montserrat',arial,sans-serif;
  text-transform: uppercase;
}
a:hover {
  text-decoration: none;
}
p {
  margin: 0 0 1.5em;
}

/* shared style */
.expand .content {
  display: none;
  /*overflow: hidden;*/
}

nav a.active:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  border-top: 8px solid #222;
  border-right: 8px solid rgba(0, 0, 0, 0);
  border-left: 8px solid rgba(0, 0, 0, 0);
}
dl {
  padding: 0;
  margin: 0;
}
dt {
  font-family: 'montserrat',arial,sans-serif;
  font-size: 1.1em;
  font-weight:  normal;
  text-transform: uppercase;
  word-spacing: 0;

  margin-top: 1em;
}
dd {
  color: #555;
}
.small {
  color: #777;
  font-family: cousine,sans-serif;
  font-size: 0.9em;
  word-spacing: -3px;
  letter-spacing: .3px;

  line-height: 1.75em;
}
.smallGal {
  color: #222;
  font-family: montserrat;
  font-size: 0.9em;
  line-height: 1.75em;
  margin: 1em 0 0.5em;
}
hr {
  border-top: 2px dotted #ccc;
  width: 700px;
}

/* By blocks */
header {
  margin-bottom: 35px;
}
header h1 {
  font-size: 2.5em;
}
header h3 {
  font-size: 1.4em;
}
header .bookAccess {
  display: inline-block;
  margin-top: 40px;
  padding: 15px 25px;

  color: #888;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;

  border: 1px solid #CCC;

  -webkit-transition: all 0.15s linear;
  -moz-transition:    all 0.15s linear;
  -o-transition:      all 0.15s linear;
  transition:         all 0.15s linear;

  pointer-events: none;

}

/* for JS ANIM FADE IN */
   header, .bookAccess, .messageMobile, section.container {
    opacity: 0;
   }
/* ******************* */

.statement {
  width: 90%;
  text-align: justify;
  font-size: 18px;
  line-height: 1.3em;
  margin-bottom: 0;
}

.about nav {
  /*margin-bottom: 2em;*/
  padding: 2em 0 1em;
}
.about nav a {
  display: inline-block;
  margin: .75em;
  border: 1px solid #aaa;
  padding: .5em;
  font-family: 'montserrat',arial,sans-serif;
  font-size: 13px;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
.about nav a:hover {
/*  border-bottom: none;*/
  color: #222;
}
.about nav a.active {
  position: relative;
  margin: 0;
  padding: 10px 16px 8px;
  border: 1px solid #222;
  font-size: 16px;
/*  font-weight: bold;*/
}
.about .content {
  width: 90%;
  margin: 0 auto;
  font-family: 'cousine',courier new,monospace;
  font-size: 0.75em;
  line-height: 1.5em;
  word-spacing: -2px;
}
.about .content a {
  border-bottom: 1px dotted #222;
  color: #222;
  font-family: 'montserrat',arial,sans-serif;
  font-size: 13px;
  letter-spacing: 0;
  word-spacing: 0;
  margin-right: 1em;
}
.about .content .row a {
  margin-right: 0;
}
.about .content a.zoomImg {
  border-bottom: none;
}
.about .content figcaption {
  margin: 1em 0;
}
.aboutJA figure img {
  width: 30%;
}
.aboutJA p, .aboutBook p {
  color: #555;
  margin-bottom: 0;
  padding: 0 0 1.5em;
}
/* ==========================================================================
   PULP OFF work
   ========================================================================== */

.bonus nav {
  font-size: 0.8em;
  padding: 1em 0 3em;
}
.bonus nav a {
  position: relative;
  display: inline-block;

  margin-right: 1em;
  padding: 10px 20px;
  border: 1px dotted #CCC;

  font-size: 14px;
  text-transform: uppercase;

  -webkit-transition: all 0.15s linear;
  -moz-transition:    all 0.15s linear;
  -o-transition:      all 0.15s linear;
  transition:         all 0.15s linear;
}
.bonus nav a:hover,.bonus nav a.active  {
  color: #222;
  border: 1px solid #222;
}
.bonus .content {
}
.bonus dt {
  font-size:  13px;
}
.bonus .small {
  font-size: 0.7em;
}
.statementPO {
  width: 90%;
  margin: 0 auto;
}
.statementPO a.btn.link {
  border: 1px solid #AAA;
  border-radius: 0;
  margin: .3em .5em 0 0;
  font-size: .65em;

  -webkit-transition: all 0.15s linear;
  -moz-transition:    all 0.15s linear;
  -o-transition:      all 0.15s linear;
  transition:         all 0.15s linear;
}
.statementPO a.btn.link:hover {
  background: #222;
  color: #efefef;
}
.gallery {
  width: 90%;
  text-align: center;
  margin: 0 auto 10em;
}
.gallery .zoomImg {
  margin-bottom: 10px;
}
video {
  width: 100%;
  height: auto;
}
p.greeting {
  clear: both;
  padding: 0;
  margin: 0 5px;
}
.footerSpace {
  height: 250px;
}
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  /*height: 4em;*/
  background: #F8F8F8;

  font-family: 'COUSINE',courier new,sans-serif;
  font-size: 10px;
  text-align: center;
  text-transform: uppercase;

  z-index: 999;
}
 footer p {
   line-height: 1.5em;
   margin: 0;

   word-spacing: -3px;
 }

.exLibris {
  width: 175px;
  padding-bottom: 2em;
}
.exLibris img {
  width: 93%;
  opacity: 0.5;
}

.messageMobile {
  font-family: montserrat,arial, sans-serif;
  font-size: .75em;
  letter-spacing: .5px;
  text-transform: uppercase;
  width: 87%;
  margin: 2em auto;
  color: #222;
  border: 1px solid #222;
  padding: 1em;
  border-radius: 3px;
  background: #EAC8C8;
}
/* ==========================================================================
   ICON-OMMX
   ========================================================================== */
.bookAccess:before {
  content: "\e83e";
  font-size: 16px;
  font-family: icon-ommx;
  margin-right: .3em;
  color: #555;
}
.bookAccess:hover:before {
  content: "\e83d";
/*  font-size: 16px;
  font-family: icon-ommx;
  margin-right: .3em;
  color: #222;*/
}
.infos:before {
  content: "\e807";
  font-size: 12px;
  font-family: icon-ommx;
  margin-right: .3em;
  color: #222;
}
.link:after {
  content: "\e824";
  font-size: 13px;
  font-family: icon-ommx;
  margin-left: .5em;
  color: #222;
  vertical-align: middle;
}
.link:hover:after {
  color: #efefef;
}
.about nav a.active:before {
  content: "\e80A";
  color: transparent;
}
/*.open:before {
  content: "\e81F";
  font-size: 11px;
  font-family: icon-ommx;
  margin-right: .75em;
  vertical-align: baseline;
  color: #222;
}*/

/* ==========================================================================
   SPLASH
   ========================================================================== */
.splash .container {
  opacity: 0;
}
.splash {
  background: black;
  background: rgba(0, 0, 0, 1) url("../img/bg/trix.png") 0 0 repeat;
  color: #222;
  font-family: 'EB GARAMOND',times, Georgia,serif;
  text-align: center;
}

.splash a {
  display:  block;
  width: 100%;
  padding: 1em 1em 3em;
  background: #f8f8f8;
  border-radius: 3px;

  text-transform: none;
}
.splash a:hover {
  color: #222;
}
.splash p {
  font-family: Cousine, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.5em;
  word-spacing: -3px;
  text-align: left;
}
.splash p.copy {
  font-size: 9px;
  color: #777;
  text-align: center;
  margin-top: 3em;
  letter-spacing: .2px;
}
.splash h3 {
  font-family: 'EB GARAMOND',times, Georgia,serif;
  margin-top: -1em;
}
.splash h4 {
  font-family: 'EB GARAMOND',times, Georgia,serif;
  margin: 1em 0 2em;
}
.splash .exLibris {
  width: 130px;
  margin: 2em auto 0;
}
.splash .exLibris img {
  width: 95%;
  opacity: 0.85;
}



/* Customize container */
@media (min-width: 768px) {

  a.container {
    width: 680px;
  }

  .splash p {
    padding: 0 6em;
  }
}

/* ==========================================================================
   Fluid Box
   by Terry Mun   http://codepen.io/terrymun/full/JKHwp
   ========================================================================== */
.fluidbox {
	outline: none;
	cursor: pointer;
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
}
.fluidbox-opened {
	cursor: -webkit-zoom-out;
}
.fluidbox-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	
	background-color: rgba(255,255,255,.85);
	opacity: 0;
	cursor: pointer;
	cursor: -webkit-zoom-out;
	cursor: -moz-zoom-out;
	transition: .25s ease-in-out;
}
.fluidbox-wrap {
	position: relative;
	margin: 0 auto;
	background-position: center center;
	background-size: cover;
	transition: .25s ease-in-out;
}
.fluidbox-ghost {
	position: absolute;
	background-position: center center;
	background-size: cover;
	transition: .25s ease-in-out;

	pointer-events: none;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */
/* Desktops and laptops REF 1224px----------- */
@media only screen and (min-width : 707px) {
	
  header h3 {
    font-size: 24px;
  }
  header .bookAccess {
    pointer-events: auto;
    color: #222;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  }
  header .bookAccess:hover {
    color: #222;
    border: 1px solid #222;
  }

  .messageMobile {
    display: none;
  }

  .statement {
    width: 650px;
  }
  .statementPO {
    width: 650px;
    margin: 0 auto;
  }
/*  .statementPO a.btn.link {
    border: 1px solid #AAA;
    border-radius: 0;
    margin-right: 1em;
    font-size: .70em;
  }*/
  .gallery {
    width: 655px;
  }
  .about .content {
    width: 600px;
    text-align: justify;
    margin-bottom: 5em;
  }
  footer p {
    line-height: 2.5em;
  }
  .bonus nav a {
    position: relative;
    display: inline-block;
    margin-right: 2em;
    padding: 10px 25px;
    border: 1px dotted #CCC;
    font-size: 14px;
    text-transform: uppercase;
    -webkit-transition: all 0.15s linear;
    -moz-transition: all 0.15s linear;
    -o-transition: all 0.15s linear;
    transition: all 0.15s linear;
  }
  .about nav a {
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
  }
}