@font-face {
  font-family: 'LeVal';
  src: url('../fonts/leval.ttf'); }

* { box-sizing: border-box;   margin:0; padding:0;}

.visible {visibility:visible;}
.invisible {visibility:hidden;}

@font-face {
  font-family: 'entypo';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/entypo.eot');
  src: url('../fonts/entypo.eot?#iefix') format('eot'),
  url('../fonts/entypo.woff') format('woff'),
  url('../fonts/entypo.ttf') format('truetype'),
  url('../fonts/entypo.svg#entypo') format('svg');
}
.entypo-note:before{content:"\266a"}.entypo-note-beamed:before{content:"\266b"}.entypo-music:before{content:"\1f3b5"}.entypo-search:before{content:"\1f50d"}.entypo-flashlight:before{content:"\1f526"}.entypo-mail:before{content:"\2709"}.entypo-heart:before{content:"\2665"}.entypo-heart-empty:before{content:"\2661"}.entypo-star:before{content:"\2605"}.entypo-star-empty:before{content:"\2606"}.entypo-user:before{content:"\1f464"}.entypo-users:before{content:"\1f465"}.entypo-user-add:before{content:"\e700"}.entypo-video:before{content:"\1f3ac"}.entypo-picture:before{content:"\1f304"}.entypo-camera:before{content:"\1f4f7"}.entypo-layout:before{content:"\268f"}.entypo-menu:before{content:"\2630"}.entypo-check:before{content:"\2713"}.entypo-cancel:before{content:"\2715"}.entypo-cancel-circled:before{content:"\2716"}.entypo-cancel-squared:before{content:"\274e"}.entypo-plus:before{content:"\2b"}.entypo-plus-circled:before{content:"\2795"}.entypo-plus-squared:before{content:"\229e"}.entypo-minus:before{content:"\2d"}.entypo-minus-circled:before{content:"\2796"}.entypo-minus-squared:before{content:"\229f"}.entypo-help:before{content:"\2753"}.entypo-help-circled:before{content:"\e704"}.entypo-info:before{content:"\2139"}.entypo-info-circled:before{content:"\e705"}.entypo-back:before{content:"\1f519"}.entypo-home:before{content:"\2302"}.entypo-link:before{content:"\1f517"}.entypo-attach:before{content:"\1f4ce"}.entypo-lock:before{content:"\1f512"}.entypo-lock-open:before{content:"\1f513"}.entypo-eye:before{content:"\e70a"}.entypo-tag:before{content:"\e70c"}.entypo-bookmark:before{content:"\1f516"}.entypo-bookmarks:before{content:"\1f4d1"}.entypo-flag:before{content:"\2691"}.entypo-thumbs-up:before{content:"\1f44d"}.entypo-thumbs-down:before{content:"\1f44e"}.entypo-download:before{content:"\1f4e5"}.entypo-upload:before{content:"\1f4e4"}.entypo-upload-cloud:before{content:"\e711"}.entypo-reply:before{content:"\e712"}.entypo-reply-all:before{content:"\e713"}.entypo-forward:before{content:"\27a6"}.entypo-quote:before{content:"\275e"}.entypo-code:before{content:"\e714"}.entypo-export:before{content:"\e715"}.entypo-pencil:before{content:"\270e"}.entypo-feather:before{content:"\2712"}.entypo-print:before{content:"\e716"}.entypo-retweet:before{content:"\e717"}.entypo-keyboard:before{content:"\2328"}.entypo-comment:before{content:"\e718"}.entypo-chat:before{content:"\e720"}.entypo-bell:before{content:"\1f514"}.entypo-attention:before{content:"\26a0"}.entypo-alert:before{content:"\1f4a5'"}.entypo-vcard:before{content:"\e722"}.entypo-address:before{content:"\e723"}.entypo-location:before{content:"\e724"}.entypo-map:before{content:"\e727"}.entypo-direction:before{content:"\27a2"}.entypo-compass:before{content:"\e728"}.entypo-cup:before{content:"\2615"}.entypo-trash:before{content:"\e729"}.entypo-doc:before{content:"\e730"}.entypo-docs:before{content:"\e736"}.entypo-doc-landscape:before{content:"\e737"}.entypo-doc-text:before{content:"\1f4c4"}.entypo-doc-text-inv:before{content:"\e731"}.entypo-newspaper:before{content:"\1f4f0"}.entypo-book-open:before{content:"\1f4d6"}.entypo-book:before{content:"\1f4d5"}.entypo-folder:before{content:"\1f4c1"}.entypo-archive:before{content:"\e738"}.entypo-box:before{content:"\1f4e6"}.entypo-rss:before{content:"\e73a"}.entypo-phone:before{content:"\1f4dE"}.entypo-cog:before{content:"\2699"}.entypo-tools:before{content:"\2692"}.entypo-share:before{content:"\e73c"}.entypo-shareable:before{content:"\e73e"}.entypo-basket:before{content:"\e73d"}.entypo-bag:before{content:"\1f45c'"}.entypo-calendar:before{content:"\1f4c5"}.entypo-login:before{content:"\e740"}.entypo-logout:before{content:"\e741"}.entypo-mic:before{content:"\1f3a4"}.entypo-mute:before{content:"\1f507"}.entypo-sound:before{content:"\1f50a"}.entypo-volume:before{content:"\e742"}.entypo-clock:before{content:"\1f554"}.entypo-hourglass:before{content:"\23f3"}.entypo-lamp:before{content:"\1f4a1"}.entypo-light-down:before{content:"\1f505"}.entypo-light-up:before{content:"\1f506"}.entypo-adjust:before{content:"\25d1"}.entypo-block:before{content:"\1f6ab"}.entypo-resize-full:before{content:"\e744"}.entypo-resize-small:before{content:"\e746"}.entypo-popup:before{content:"\e74c"}.entypo-publish:before{content:"\e74d"}.entypo-window:before{content:"\e74e"}.entypo-arrow-combo:before{content:"\e74f"}.entypo-down-circled:before{content:"\e758"}.entypo-left-circled:before{content:"\e759"}.entypo-right-circled:before{content:"\e75a"}.entypo-up-circled:before{content:"\e75b"}.entypo-down-open:before{content:"\e75c"}.entypo-left-open:before{content:"\e75d"}.entypo-right-open:before{content:"\e75e"}.entypo-up-open:before{content:"\e75f"}.entypo-down-open-mini:before{content:"\e760"}.entypo-left-open-mini:before{content:"\e761"}.entypo-right-open-mini:before{content:"\e762"}.entypo-up-open-mini:before{content:"\e763"}.entypo-down-open-big:before{content:"\e764"}.entypo-left-open-big:before{content:"\e765"}.entypo-right-open-big:before{content:"\e766"}.entypo-up-open-big:before{content:"\e767"}.entypo-down:before{content:"\2b07"}.entypo-left:before{content:"\2b05"}.entypo-right:before{content:"\27a1"}.entypo-up:before{content:"\2b06"}.entypo-down-dir:before{content:"\25be"}.entypo-left-dir:before{content:"\25c2"}.entypo-right-dir:before{content:"\25b8"}.entypo-up-dir:before{content:"\25b4"}.entypo-down-bold:before{content:"\e4b0"}.entypo-left-bold:before{content:"\e4ad"}.entypo-right-bold:before{content:"\e4ae"}.entypo-up-bold:before{content:"\e4af"}.entypo-down-thin:before{content:"\2193"}.entypo-left-thin:before{content:"\2190"}.entypo-right-thin:before{content:"\2192"}.entypo-up-thin:before{content:"\2191"}.entypo-ccw:before{content:"\27f2"}.entypo-cw:before{content:"\27f3"}.entypo-arrows-ccw:before{content:"\1f504"}.entypo-level-down:before{content:"\21b3"}.entypo-level-up:before{content:"\21b0"}.entypo-shuffle:before{content:"\1f500"}.entypo-loop:before{content:"\1f501"}.entypo-switch:before{content:"\21c6"}.entypo-play:before{content:"\25b6"}.entypo-stop:before{content:"\25a0"}.entypo-pause:before{content:"\2389"}.entypo-record:before{content:"\26ab"}.entypo-to-end:before{content:"\23ed"}.entypo-to-start:before{content:"\23ee"}.entypo-fast-forward:before{content:"\23e9"}.entypo-fast-backward:before{content:"\23ea"}.entypo-progress-0:before{content:"\e768"}.entypo-progress-1:before{content:"\e769"}.entypo-progress-2:before{content:"\e76a"}.entypo-progress-3:before{content:"\e76b"}.entypo-target:before{content:"\1f3af"}.entypo-palette:before{content:"\1f3a8"}.entypo-list:before{content:"\e005"}.entypo-list-add:before{content:"\e003"}.entypo-signal:before{content:"\1f4f6"}.entypo-trophy:before{content:"\1f3c6"}.entypo-battery:before{content:"\1f50b"}.entypo-back-in-time:before{content:"\e771"}.entypo-monitor:before{content:"\1f4bb"}.entypo-mobile:before{content:"\1f4f1"}.entypo-network:before{content:"\e776"}.entypo-cd:before{content:"\1f4bf"}.entypo-inbox:before{content:"\e777"}.entypo-install:before{content:"\e778"}.entypo-globe:before{content:"\1f30e"}.entypo-cloud:before{content:"\2601"}.entypo-cloud-thunder:before{content:"\26c8"}.entypo-flash:before{content:"\26a1"}.entypo-moon:before{content:"\263d"}.entypo-flight:before{content:"\2708"}.entypo-paper-plane:before{content:"\e79b"}.entypo-leaf:before{content:"\1f342"}.entypo-lifebuoy:before{content:"\e788"}.entypo-mouse:before{content:"\e789"}.entypo-briefcase:before{content:"\1f4bc"}.entypo-suitcase:before{content:"\e78e"}.entypo-dot:before{content:"\e78b"}.entypo-dot-2:before{content:"\e78c"}.entypo-dot-3:before{content:"\e78d"}.entypo-brush:before{content:"\e79a"}.entypo-magnet:before{content:"\e7a1"}.entypo-infinity:before{content:"\221e"}.entypo-erase:before{content:"\232b"}.entypo-chart-pie:before{content:"\e751"}.entypo-chart-line:before{content:"\1f4c8"}.entypo-chart-bar:before{content:"\1f4ca"}.entypo-chart-area:before{content:"\1f53e"}.entypo-tape:before{content:"\2707"}.entypo-graduation-cap:before{content:"\1f393"}.entypo-language:before{content:"\e752"}.entypo-ticket:before{content:"\1f3ab"}.entypo-water:before{content:"\1f4a6"}.entypo-droplet:before{content:"\1f4a7"}.entypo-air:before{content:"\e753"}.entypo-credit-card:before{content:"\1f4b3"}.entypo-floppy:before{content:"\1f4be"}.entypo-clipboard:before{content:"\1f4cb"}.entypo-megaphone:before{content:"\1f4e3"}.entypo-database:before{content:"\e754"}.entypo-drive:before{content:"\e755"}.entypo-bucket:before{content:"\e756"}.entypo-thermometer:before{content:"\e757"}.entypo-key:before{content:"\1f511"}.entypo-flow-cascade:before{content:"\e790"}.entypo-flow-branch:before{content:"\e791"}.entypo-flow-tree:before{content:"\e792"}.entypo-flow-line:before{content:"\e793"}.entypo-flow-parallel:before{content:"\e794"}.entypo-rocket:before{content:"\1f680"}.entypo-gauge:before{content:"\e7a2"}.entypo-traffic-cone:before{content:"\e7a3"}.entypo-cc:before{content:"\e7a5"}.entypo-cc-by:before{content:"\e7a6"}.entypo-cc-nc:before{content:"\e7a7"}.entypo-cc-nc-eu:before{content:"\e7a8"}.entypo-cc-nc-jp:before{content:"\e7a9"}.entypo-cc-sa:before{content:"\e7aa"}.entypo-cc-nd:before{content:"\e7ab"}.entypo-cc-pd:before{content:"\e7ac"}.entypo-cc-zero:before{content:"\e7ad"}.entypo-cc-share:before{content:"\e7ae"}.entypo-cc-remix:before{content:"\e7af"}.entypo-github:before{content:"\f300"}.entypo-github-circled:before{content:"\f301"}.entypo-flickr:before{content:"\f303"}.entypo-flickr-circled:before{content:"\f304"}.entypo-vimeo:before{content:"\f306"}.entypo-vimeo-circled:before{content:"\f307"}.entypo-twitter:before{content:"\f309"}.entypo-twitter-circled:before{content:"\f30a"}.entypo-facebook:before{content:"\f30c"}.entypo-facebook-circled:before{content:"\f30d"}.entypo-facebook-squared:before{content:"\f30e"}.entypo-gplus:before{content:"\f30f"}.entypo-gplus-circled:before{content:"\f310"}.entypo-pinterest:before{content:"\f312"}.entypo-pinterest-circled:before{content:"\f313"}.entypo-tumblr:before{content:"\f315"}.entypo-tumblr-circled:before{content:"\f316"}.entypo-linkedin:before{content:"\f318"}.entypo-linkedin-circled:before{content:"\f319"}.entypo-dribbble:before{content:"\f31b"}.entypo-dribbble-circled:before{content:"\f31c"}.entypo-stumbleupon:before{content:"\f31e"}.entypo-stumbleupon-circled:before{content:"\f31f"}.entypo-lastfm:before{content:"\f321"}.entypo-lastfm-circled:before{content:"\f322"}.entypo-rdio:before{content:"\f324"}.entypo-rdio-circled:before{content:"\f325"}.entypo-spotify:before{content:"\f327"}.entypo-spotify-circled:before{content:"\f328"}.entypo-qq:before{content:"\f32a"}.entypo-instagrem:before{content:"\f32d"}.entypo-dropbox:before{content:"\f330"}.entypo-evernote:before{content:"\f333"}.entypo-flattr:before{content:"\f336"}.entypo-skype:before{content:"\f339"}.entypo-skype-circled:before{content:"\f33a"}.entypo-renren:before{content:"\f33c"}.entypo-sina-weibo:before{content:"\f33f"}.entypo-paypal:before{content:"\f342"}.entypo-picasa:before{content:"\f345"}.entypo-soundcloud:before{content:"\f348"}.entypo-mixi:before{content:"\f34b"}.entypo-behance:before{content:"\f34e"}.entypo-google-circles:before{content:"\f351"}.entypo-vkontakte:before{content:"\f354"}.entypo-smashing:before{content:"\f357"}.entypo-sweden:before{content:"\f601"}.entypo-db-shape:before{content:"\f600"}.entypo-logo-db:before{content:"\f603"}

.left img, .right img{
  	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

a {
  text-decoration: none;
  /*font-weight: bold;*/
  color:#425EA3;
}

h1 {
  background:url("../img/logoval.png") top left no-repeat;
  width:600px;
  height:260px;
  text-indent: -9999px;
  margin:0 auto;

}

li {
  list-style: none;
  }

h1 a {
display:block;
float:right;

width:300px;
line-height: 260px;
height:100%;
background: transparent url("../img/title.png") center right no-repeat;
}

body {
  margin: 0 auto;
  background-color:   white;
  font-family: 'LeVal', sans-serif;
  font-size:16px;
  overflow-x:hidden;
}

@media all and (max-width:1100px) {
  body {
    font-size:14px;
  }
}

@media all and (max-width:990px) {
  body {
    font-size:16px;
  }
}

@media all and (max-width:600px) {
h1 {background:url("../img/logoval.png") top center no-repeat;
width:100%; height:330px;}
h1 a {width:100%; background-position:bottom center; }
#footleft,#footright {display:none;}
}

.step-container {
  margin: 150px auto;

  max-width: 960px;
  width: 80%;

  height: 225px;  /* same as left/right */

  /* border: 1px solid black; */
}

.step-container .step-title ,.row .step-title {
  color: #1e3440;
  margin-bottom:15px;
  font-size: 34px;
  font-weight: 700;
}

.row .step-title.text-left {
  margin-right:-50px;
}

.row .step-title.text-right {
  margin-left:-50px;
}
.step-container p,.row p {
  color: #869fac;
  font-size: 18px;
  font-weidht: 300;
  line-height: 24px;
}

.step-container img {
  margin-top: 10px;
  width: 70%;
}


.left {
  float: left;
  width: 49%;

}

.left img {
  float: left;
}

.right {
  float: right;
  width: 49%;
}

.right img {
  /*float: right;*/
}

.left p, .right p,.row p {
  text-align:justify;
  font-size:1.2em;
  line-height:1.5em;
}



.flip-container {
  perspective: 1000;
}
  /* flip the pane when hovered */
  .flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
  }

.flip-container, .front, .back {
  width: 200px;
  height: 290px;
}



/* flip speed goes here */
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;

  position: relative;
}

/* hide back of pane during swap */
.front, .back {
  backface-visibility: hidden;

  position: absolute;
  top: 0;
  left: 0;
}

/* front pane, placed above back */
.front {
  z-index: 2;
}

/* back, initially hidden pane */
.back {
  transform: rotateY(180deg);
}

.flip-container {
  perspective: 1000;
}


.panel {
  margin: 0 auto ;
  height: 325px;

  position: relative;
  width:224px;
  z-index:999;
  -webkit-perspective: 1200px;

  -moz-perspective: 1200px;
}



.panel .front,
.panel .back {
  text-align: center;
}

.panel .front {
  height: inherit;
  position: absolute;
  top: 0;
  width:224px;
  height:325px;
  z-index: 900;
  text-align: center;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
  -webkit-transition: all .4s ease-in-out;
     -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
     -o-transition: all .4s ease-in-out;
      transition: all .4s ease-in-out;

}

.panel .back {
  height: inherit;
  position: absolute;
  top: 0;
  width:224px;
  height:325px;
  z-index: 950;
  -webkit-transform: rotateY(-180deg);
     -moz-transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
  -webkit-transition: all .4s ease-in-out;
     -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
     -o-transition: all .4s ease-in-out;
      transition: all .4s ease-in-out;
}
.panel.flip .front {
  z-index: 900;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
}
.panel.flip .back {
  z-index: 1000;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  -moz-transform: rotateX(0deg) rotateY(0deg);
}
.box1{
  background-color: #14bcc8;
  width: 250px;
  height: 150px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
.box2{
  background-color: #ff7e70;
  width: 250px;
  height: 150px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

.BeforeScroll
{

  display: none;
}


/*Use this class when you want your content to be shown after some scroll*/
.AfterScroll
{

  display: block;
      animation: DD 2.5s;
    -moz-animation: DD 2.5s; /* Firefox */
    -webkit-animation: DD 2.5s; /* Safari and Chrome */
    -o-animation: DD 2.5s; /* Opera */
}

@keyframes DD {
    from {
        opacity:0;
        padding-right:200px;
    }
    to {
        opacity:1;
        padding-right:0px
    }
}
@-moz-keyframes DD { /* Firefox */
    from {
        opacity:0;
        padding-right:200px;
    }
    to {
        opacity:1;
        padding-right:0px
    }
}
@-webkit-keyframes DD {
    from {
        opacity:0;
        padding-right:200px;
    }
    to {
        opacity:1;
        padding-right:0px
    }
}
@-o-keyframes DD { /* Opera */
    from {
        opacity:0;
        padding-right:200px;
    }
    to {
        opacity:1;
        padding-right:0px
    }
}

.wrapper{ width:400px; height:200px; }
#ceu{ fill:#4990E2; transition:all 500ms ease-in-out; }
#sol{ fill:#F8E81C; transition:all 500ms ease-in-out; }
#lua{ fill:#DDD; transition:all 500ms ease-in-out; }
#montanha-fundo{ fill:#417505; transition:all 500ms ease-in-out; }
.montanha-frente{ fill:#7ED321; transition:all 500ms ease-in-out; }
.estrela{ fill:white; fill-opacity:0; transition:all 500ms ease-in-out; }

.wrapper:hover #ceu{ fill:#000; }
.wrapper:hover #sol{ -webkit-transform:translatey(400px); }
.wrapper:hover #lua{ -webkit-transform:translatey(-572px); }
.wrapper:hover #montanha-fundo{ fill:#0D1702; }
.wrapper:hover .montanha-frente{ fill:#162803; }
.wrapper:hover .estrela{ fill-opacity:0.6; }


/* ///////////////////////////////////////////////////

HARDCOVER
Table of Contents

1. container
2. background & color
3. opening cover, back cover and pages
4. position, transform y transition
5. events
6. Bonus
  - Cover design
  - Ribbon
  - Figcaption
7. mini-reset

/////////////////////////////////////////////////////*/

/*
  1. container
*/
/*#val1 {margin-top:-110px; float:left;}
#val2 {margin-top:-110px; float:right;}*/
.book {
  position:relative;

  margin:0 auto;
  width:215px;
  height: 265px;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

/*
  2. background & color
*/

/* HARDCOVER FRONT */
.hardcover_front li:first-child {
  background-color: #fff;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* reverse */
.hardcover_front li:last-child {
  background: #fff;
}

/* HARDCOVER BACK */
.hardcover_back li:first-child {
  background: #fffbec;
}

/* reverse */
.hardcover_back li:last-child {
  background: #fffbec;
}

.book_spine li:first-child {
  background: #E8E8E8;
}
.book_spine li:last-child {
  background: #E8E8E8;
}

/* thickness of cover */

.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before,
.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before,
.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before,
.hardcover_back li:last-child:after,
.hardcover_back li:last-child:before,
.book_spine li:first-child:after,
.book_spine li:first-child:before,
.book_spine li:last-child:after,
.book_spine li:last-child:before {
  background: #fff;
}

/* page */

.page > li {
  background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
  background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
  background: -ms-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
  background: linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
  box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2);
  border-radius: 0px 5px 5px 0px;
}

/*
  3. opening cover, back cover and pages
*/

.hardcover_front {
  -webkit-transform: rotateY(-34deg) translateZ(8px);
  -moz-transform: rotateY(-34deg) translateZ(8px);
  transform: rotateY(-34deg) translateZ(8px);
  z-index: 100;
}

.hardcover_back {
  -webkit-transform: rotateY(-15deg) translateZ(-8px);
  -moz-transform: rotateY(-15deg) translateZ(-8px);
  transform: rotateY(-15deg) translateZ(-8px);
}

.page li:nth-child(1) {
  -webkit-transform: rotateY(-28deg);
  -moz-transform: rotateY(-28deg);
  transform: rotateY(-28deg);
}

.page li:nth-child(2) {
  -webkit-transform: rotateY(-30deg);
  -moz-transform: rotateY(-30deg);
  transform: rotateY(-30deg);
}

.page li:nth-child(3) {
  -webkit-transform: rotateY(-32deg);
  -moz-transform: rotateY(-32deg);
  transform: rotateY(-32deg);
}

.page li:nth-child(4) {
  -webkit-transform: rotateY(-34deg);
  -moz-transform: rotateY(-34deg);
  transform: rotateY(-34deg);
}

.page li:nth-child(5) {
  -webkit-transform: rotateY(-36deg);
  -moz-transform: rotateY(-36deg);
  transform: rotateY(-36deg);
}

/*
  4. position, transform & transition
*/

.hardcover_front,
.hardcover_back,
.book_spine,
.hardcover_front li,
.hardcover_back li,
.book_spine li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.hardcover_front,
.hardcover_back {
  -webkit-transform-origin: 0% 100%;
  -moz-transform-origin: 0% 100%;
  transform-origin: 0% 100%;


}

.hardcover_front:after,.hardcover_back:after {
    content: "";
    width: 180px;
    height: 0px;

    display: block;
    position: absolute;
    bottom:0px;
    left:0;
    z-index: -1;
    -webkit-box-shadow: 10px 0px 18px 3px #000000;
       -moz-box-shadow: 10px 0px 18px 3px #000000;
            box-shadow: 10px 0px 18px 3px #000000;}

/*.book_spine{box-shadow: 1px 1px 12px #555;}*/

.hardcover_front {
  -webkit-transition: all 0.8s ease, z-index 0.6s;
  -moz-transition: all 0.8s ease, z-index 0.6s;
  transition: all 0.8s ease, z-index 0.6s;

}

/* HARDCOVER front */
.hardcover_front li:first-child {
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-transform: translateZ(2px);
  -moz-transform: translateZ(2px);
  transform: translateZ(2px);
}

.hardcover_front li:last-child {
  -webkit-transform: rotateY(180deg) translateZ(2px);
  -moz-transform: rotateY(180deg) translateZ(2px);
  transform: rotateY(180deg) translateZ(2px);
}

/* HARDCOVER back */
.hardcover_back li:first-child {
  -webkit-transform: translateZ(2px);
  -moz-transform: translateZ(2px);
  transform: translateZ(2px);
}

.hardcover_back li:last-child {
  -webkit-transform: translateZ(-2px);
  -moz-transform: translateZ(-2px);
  transform: translateZ(-2px);
}

/* thickness of cover */
.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before,
.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before,
.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before,
.hardcover_back li:last-child:after,
.hardcover_back li:last-child:before,
.book_spine li:first-child:after,
.book_spine li:first-child:before,
.book_spine li:last-child:after,
.book_spine li:last-child:before {
  position: absolute;
  top: 0;
  left: 0;

}

/* HARDCOVER front */
.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before {
  width: 4px;
  height: 100%;
}

.hardcover_front li:first-child:after {
  -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
  -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
  transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}

.hardcover_front li:first-child:before {
  -webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
  -moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
  transform: rotateY(90deg) translateZ(158px) translateX(2px);
}

.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before {
  width: 4px;
  height: 160px;
}

.hardcover_front li:last-child:after {
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
  transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
}
.hardcover_front li:last-child:before {
  box-shadow: 0px 0px 30px 5px #333;
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
  transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
}

/* thickness of cover */

.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before {
  width: 4px;
  height: 100%;
}

.hardcover_back li:first-child:after {
  -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
  -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
  transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}
.hardcover_back li:first-child:before {
  -webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
  -moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
  transform: rotateY(90deg) translateZ(158px) translateX(2px);
}

.hardcover_back li:last-child:after,
.hardcover_back li:last-child:before {
  width: 4px;
  height: 160px;
}

.hardcover_back li:last-child:after {
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
  transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
}

.hardcover_back li:last-child:before {
  box-shadow: 10px -1px 80px 20px #666;
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
  transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
}

/* BOOK SPINE */
.book_spine {
  -webkit-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
  -moz-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
  transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
  width: 16px;
  z-index: 0;
}

.book_spine li:first-child {
  -webkit-transform: translateZ(2px);
  -moz-transform: translateZ(2px);
  transform: translateZ(2px);
}

.book_spine li:last-child {
  -webkit-transform: translateZ(-2px);
  -moz-transform: translateZ(-2px);
  transform: translateZ(-2px);
}

/* thickness of book spine */
.book_spine li:first-child:after,
.book_spine li:first-child:before {
  width: 4px;
  height: 100%;
}

.book_spine li:first-child:after {
  -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
  -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
  transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}

.book_spine li:first-child:before {
  -webkit-transform: rotateY(-90deg) translateZ(-12px);
  -moz-transform: rotateY(-90deg) translateZ(-12px);
  transform: rotateY(-90deg) translateZ(-12px);
}

.book_spine li:last-child:after,
.book_spine li:last-child:before {
  width: 4px;
  height: 16px;
}

.book_spine li:last-child:after {
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
  transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
}

.book_spine li:last-child:before {
  box-shadow: 5px -1px 100px 40px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
  transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
}

.page,
.page > li {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;

}

.page {
  width: 100%;
  height: 98%;
  top: 1%;
  left: 3%;
  z-index: 10;

}

.page > li {
  width: 100%;
  height: 100%;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  transition-timing-function: ease;
}

.page > li:nth-child(1) {
  -webkit-transition-duration: 0.6s;
  -moz-transition-duration: 0.6s;
  transition-duration: 0.6s;
  border: 1px solid #eee;
}

.page > li:nth-child(2) {
  -webkit-transition-duration: 0.6s;
  -moz-transition-duration: 0.6s;
  transition-duration: 0.6s;
  border: 1px solid #eee;
}

.page > li:nth-child(3) {
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  transition-duration: 0.4s;
  border: 1px solid #eee;
}


.page > li:nth-child(4) {
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  border: 1px solid #eee;
}

.page > li:nth-child(5) {
  -webkit-transition-duration: 0.6s;
  -moz-transition-duration: 0.6s;
  transition-duration: 0.6s;
}

/*
  5. events
*/

.book:hover > .hardcover_front {
  -webkit-transform: rotateY(-145deg) translateZ(0);
  -moz-transform: rotateY(-145deg) translateZ(0);
  transform: rotateY(-145deg) translateZ(0);
  z-index: 0;

}

.book:hover > .page li:nth-child(1) {
  -webkit-transform: rotateY(-30deg);
  -moz-transform: rotateY(-30deg);
  transform: rotateY(-30deg);
  -webkit-transition-duration: 1.5s;
  -moz-transition-duration: 1.5s;
  transition-duration: 1.5s;
}

.book:hover > .page li:nth-child(2) {
  -webkit-transform: rotateY(-35deg);
  -moz-transform: rotateY(-35deg);
  transform: rotateY(-35deg);
  -webkit-transition-duration: 1.8s;
  -moz-transition-duration: 1.8s;
  transition-duration: 1.8s;
}

.book:hover > .page li:nth-child(3) {
  -webkit-transform: rotateY(-118deg);
  -moz-transform: rotateY(-118deg);
  transform: rotateY(-118deg);
  -webkit-transition-duration: 1.6s;
  -moz-transition-duration: 1.6s;
  transition-duration: 1.6s;
}

.book:hover > .page li:nth-child(4) {
  -webkit-transform: rotateY(-130deg);
  -moz-transform: rotateY(-130deg);
  transform: rotateY(-130deg);
  -webkit-transition-duration: 1.4s;
  -moz-transition-duration: 1.4s;
  transition-duration: 1.4s;
}

.book:hover > .page li:nth-child(5) {
  -webkit-transform: rotateY(-140deg);
  -moz-transform: rotateY(-140deg);
  transform: rotateY(-140deg);
  -webkit-transition-duration: 1.2s;
  -moz-transition-duration: 1.2s;
  transition-duration: 1.2s;
}

/*
  6. Bonus
*/

/* cover CSS */

.coverDesign {
  position: absolute;
  color:black;
    background-color: #fff;

  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.coverDesign::after {
  background-image: -webkit-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
  background-image: -moz-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
  background-image: linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

}

.coverDesign h1 {
  color: #fff;
  font-size: 2.2em;
  letter-spacing: 0.05em;
  text-align: center;
  margin: 54% 0 0 0;
  text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
}

.coverDesign p {
  color: #000;
  font-size: 1em;
  text-align: center;
  text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
}

.yellow {
  background-color: #f1c40f;
  background-image: -webkit-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
  background-image: -moz-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
  background-image: linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
}

.blue {
  background-color: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db 58%, #2a90d4 0%);
  background-image: -moz-linear-gradient(top, #3498db 58%, #2a90d4 0%);
  background-image: linear-gradient(top, #3498db 58%, #2a90d4 0%);
}

.grey {
  background-color: #f8e9d1;
  background-image: -webkit-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
  background-image: -moz-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
  background-image: linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
}

/* Basic ribbon */

.ribbon {
  background: #c0392b;
  color: #fff;
  display: block;
  font-size: 0.7em;
  position: absolute;
  top: 11px;
  right: 1px;
  width: 40px;
  height: 20px;
  line-height: 20px;
  letter-spacing: 0.15em;
  text-align: center;
  -webkit-transform: rotateZ(45deg) translateZ(1px);
  -moz-transform: rotateZ(45deg) translateZ(1px);
  transform: rotateZ(45deg) translateZ(1px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 10;
}

.ribbon::before,
.ribbon::after{
  position: absolute;
  top: -20px;
  width: 0;
  height: 0;
  border-bottom: 20px solid #c0392b;
  border-top: 20px solid transparent;
}

.ribbon::before{
  left: -20px;
  border-left: 20px solid transparent;
}

.ribbon::after{
  right: -20px;
  border-right: 20px solid transparent;
}

/* figcaption */

figcaption {
  padding-left: 240px;
  text-align: left;
  pointer-events: none;
  margin: 0 auto;
width: 680px;

height: 255px;

}

figcaption .aboutb {
height:100%;
  background-color:transparent;
  margin: 0;
  text-align: justify;
  overflow:auto;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

figcaption .aboutb h3 {margin:15px 5px 15px 25px;}
figcaption .aboutb h3 small { color:#828282; margin-left:20px;}
figcaption .aboutb p {margin:-15px 145px 0 145px; font-size:14px;}

figcaption h1 {
  margin: 0;
}

figcaption span {
  color: #16a085;
  padding: 0.6em 0 1em 0;
  display: block;
}

figcaption p {
  color: #63707d;
  line-height: 1.3;
}

.btn {
  display: inline-block;
  text-transform: uppercase;
  /*border: 2px solid #2c3e50;*/
  margin-top: 100px;
  color:#333;
  font-size: 1.1em;
  font-weight: 700;
  padding: 0.1em 0.4em;
  text-align: center;
  -webkit-transition: color 0.3s, border-color 0.3s;
  -moz-transition: color 0.3s, border-color 0.3s;
  transition: color 0.3s, border-color 0.3s;
}

.btn:hover {
  border-color: #16a085;
  color: #16a085;
}

/* basic grid, only for this demo */

.align {
  clear: both;
  margin: 90px auto 20px;
  width: 100%;
  max-width: 1170px;
  text-align: center;
}

.align > li {
  width: 500px;
  min-height: 300px;
  display: inline-block;
  margin: 30px 20px 30px 30px;
  padding: 0 0 0 60px;
  vertical-align: top;
}

.footer {
  padding: 20px 0;
  background-color: #eee;
  text-align: center;
}

.social {
  display: inline-block;
  width: 70px;
  height: 70px;
  margin: 0 10px;
  line-height: 70px;
  font-family: entypo;
  font-size: 35px;
  text-align: center;
  color: #bbb;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  transition: color .3s;
}

.social:hover {
  color: #59d;
  cursor: pointer;
}

.social {
  box-shadow: rgb(220, 220, 220) 1px 1px,
    rgb(220, 220, 220) 2px 2px,
    rgb(221, 221, 221) 3px 3px,
    rgb(221, 221, 221) 4px 4px,
    rgb(221, 221, 221) 5px 5px,
    rgb(222, 222, 222) 6px 6px,
    rgb(222, 222, 222) 7px 7px,
    rgb(222, 222, 222) 8px 8px,
    rgb(223, 223, 223) 9px 9px,
    rgb(223, 223, 223) 10px 10px,
    rgb(224, 224, 224) 11px 11px,
    rgb(224, 224, 224) 12px 12px,
    rgb(224, 224, 224) 13px 13px,
    rgb(225, 225, 225) 14px 14px,
    rgb(225, 225, 225) 15px 15px,
    rgb(225, 225, 225) 16px 16px,
    rgb(226, 226, 226) 17px 17px,
    rgb(226, 226, 226) 18px 18px,
    rgb(226, 226, 226) 19px 19px,
    rgb(227, 227, 227) 20px 20px,
    rgb(227, 227, 227) 21px 21px,
    rgb(228, 228, 228) 22px 22px,
    rgb(228, 228, 228) 23px 23px,
    rgb(228, 228, 228) 24px 24px,
    rgb(229, 229, 229) 25px 25px,
    rgb(229, 229, 229) 26px 26px,
    rgb(229, 229, 229) 27px 27px,
    rgb(230, 230, 230) 28px 28px,
    rgb(230, 230, 230) 29px 29px,
    rgb(231, 231, 231) 30px 30px;
   text-shadow: rgb(226, 226, 226) 1px 1px,
    rgb(237, 237, 237) 2px 2px,
    rgb(237, 237, 237) 3px 3px,
    rgb(238, 238, 238) 4px 4px,
    rgb(239, 239, 239) 5px 5px,
    rgb(239, 239, 239) 6px 6px,
    rgb(240, 240, 240) 7px 7px,
    rgb(240, 240, 240) 8px 8px,
    rgb(241, 241, 241) 9px 9px,
    rgb(242, 242, 242) 10px 10px,
    rgb(242, 242, 242) 11px 11px,
    rgb(243, 243, 243) 12px 12px,
    rgb(243, 243, 243) 13px 13px,
    rgb(244, 244, 244) 14px 14px,
    rgb(245, 245, 245) 15px 15px,
    rgb(245, 245, 245) 16px 16px,
    rgb(246, 246, 246) 17px 17px,
    rgb(246, 246, 246) 18px 18px,
    rgb(247, 247, 247) 19px 19px,
    rgb(248, 248, 248) 20px 20px;
}

#socialul li{
  /*display:block;*/

}

#socialul a {color:#bbb; display:block;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;}
#socialul a:hover {color:#425EA3!important; text-decoration: none;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;}

#footleft, #footright{

  width:200px;
  position:absolute;
  font-size:0.8em ;
  color:#B1B1B1;

}

#footleft a, #footright a {color:#B1B1B1; text-decoration: none;}
#footleft a:hover, #footright a:hover {color:#425EA3; }

#footright{
  margin-right:20px;
  right:0;
  text-align:right;
}

#footleft {
  margin-left:20px;
  text-align:left;

}

.popover-title{display:none;}
.popover-content{text-align:center; font-weight: bold; color:#869fac;}