View source for Team:KSA KOREA/HP/Integration

<html>

<head>

<style>
.navbar-item.has-dropdown.is-hoverable {
  padding-right: 20px;
}
#sideMenu, #top_title, .patrollink, #firstHeading, #home_logo, #sideMenu { display:none; }
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; border:none;}
body, html {background-color:white; width: 100%; height: 100%;}
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
#bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
</style>

<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/Bulma&action=raw&ctype=text/css" />

<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/bbCSS&action=raw&ctype=text/css" />

<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/demo&action=raw&ctype=text/css" />

<style>


.bb-custom-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  
}

.bb-custom-wrapper .bb-bookblock {
  width: 100%;
  height: 100%;
  -webkit-perspective: 2000px;
  perspective: 2000px;
}

.bb-custom-side {
  width: 50%;
  float: left;
  height: 100%;
  overflow: hidden;
  background: #fff;
  
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.bb-custom-firstpage h1 {
  font-size: 2.625em;
  line-height: 1.3;
  margin: 0;
  font-weight: 300;
  background: #fff;
}

.bb-custom-firstpage h1 span {
  display: block;
  font-size: 60%;
  opacity: 0.3;
  padding: 0 0 0.6em 0.1em;
}

.bb-custom-firstpage {
  text-align: center;
  padding-top: 15%;
  width: 50%;
  float: left;
  height: 100%;
}

.bb-custom-side p {
  padding: 8%;
  font-size: 1.8em;
  font-weight: 300;
}

.bb-custom-wrapper h3 {
  font-size: 1.4em;
  font-weight: 300;
  margin: 0.4em 0 1em;
}

.bb-custom-wrapper>nav {
  width: 100%;
  height: 40px;
  margin: 1em auto 0;
  position: fixed;
  bottom: 20px;
  z-index: 1000;
  text-align: center;
}

#page-nav {
  width: 100%;
  height: 40px;
  margin: 1em auto 0;
  position: fixed;
  bottom: 20px;
  z-index: 1000;
  text-align: center;
}

#page-nav a {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 2px;
  background: #1baede;
  color: #fff;
  font-size: 0;
  margin: 2px;
}

.bb-custom-wrapper>nav a {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 2px;
  background: #1baede;
  color: #fff;
  font-size: 0;
  margin: 2px;
}

#page-nav a:hover {
  opacity: 0.6;
}

.bb-custom-wrapper>nav a:hover {
  opacity: 0.6;
}

.bb-custom-icon:before {
  font-family: 'arrows';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 30px;
  line-height: 40px;
  display: block;
  -webkit-font-smoothing: antialiased;
}

.bb-custom-icon-first:before,
.bb-custom-icon-last:before {
  content: "\e002";
}

.bb-custom-icon-arrow-left:before,
.bb-custom-icon-arrow-right:before {
  content: "\e003";
}

.bb-custom-icon-arrow-left:before,
.bb-custom-icon-first:before {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}


.no-js .bb-custom-wrapper {
  height: auto;
}

.no-js .bb-custom-content {
  height: 470px;
}

@media screen and (max-width: 61.75em) {
  .bb-custom-side {
    font-size: 70%;
  }
}

@media screen and (max-width: 33em) {
  .bb-custom-side {
    font-size: 60%;
  }
}
</style>



<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/fa4&action=raw&ctype=text/css" />



<style>
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

::before,
::after {
  content: "";
}

html,
body {
  height: 100%;
  -webkit-font-smoothing: subpixel-antialiased;
}

html {
  font-size: 100%;
}

body {
  background: #ecf0f1;
  color: #34495e;
  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: 400;
  line-height: 1.2;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: #2c3e50;
  text-decoration: none;
}

.btn {
 
  display: block;
  text-transform: uppercase;

  margin-top: 20px;
  font-size: 0.7em;
  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;
}


.align {
  clear: both;
  margin: 90px auto 20px;
  width: 100%;
  /* max-width: 1170px; */
  max-width: 1400px;
  text-align: center;
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 0;
margin-right: 1.6em;
}

.align>li {
  /* width: 500px; */
  width: 140px;
  /* min-height: 300px; */
  display: inline-block;
  /* margin: 30px 20px 30px 30px; */
  /* padding: 0 0 0 60px; */
  vertical-align: top;
  margin-bottom: -25px;
  margin-top: 30px;
  margin-right: 40px;
}


.book {
  position: relative;
 
  width: 120px;
  
  height: 160px;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}


.hardcover_front li:first-child {
  background-color: #eee;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}


.hardcover_front li:last-child {
  background: #fffbec;
}


.hardcover_back li:first-child {
  background: #fffbec;
}


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

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

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


.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: #999;
}


.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;
}


.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);
}


.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 {
  -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 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 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);
}


.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 li:first-child:after,
.hardcover_front li:first-child:before {
  
  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 {
 
  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 {
  
  -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);
}


.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before {
 
  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 {
 
  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 {

  -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 {
  -webkit-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
  -moz-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
  transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
  
  width: 20px;
  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);
}


.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 {

  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 {
 
  -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;
}

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

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

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

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


.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;
}


.coverDesign {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  z-index: 1;
  -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: #f8f8f8;
  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%);
}


.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;
}


@media screen and (max-width: 37.8125em) {
  .align>li {
    width: 100%;
    min-height: 440px;
    height: auto;
    padding: 0;
    margin: 0 0 30px 0;
  }

  .book {
    margin: 0 auto;
  }

  figcaption {
    text-align: center;
    width: 320px;
    top: 250px;
    padding-left: 0;
    left: -80px;
    font-size: 90%;
  }
}
</style>



<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/imageZoomcss&action=raw&ctype=text/css" />




<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/modernizr&action=raw&ctype=text/javascript"></script>

<style>
    html,
    body,
    .footer {
      background-color: #93D1D5;
    }

    .wrap {
      /* margin-left: 75px;
  margin-right: 75px; */
      margin: 0 auto;
      width: 90vw;
    }

    .shelf {
      width: 100%;
      height: 150px;
      z-index: -1;
      background: transparent url(https://static.igem.org/mediawiki/2020/e/ea/T--KSA_KOREA--shelf.png) no-repeat center center;
      background-size: contain;
    }

    .align>li {
      width: 100px;
    }

    .book-wrapper {
      height: 100vh;
      width: 90vw;
      margin: 0 auto;
    }

    .bb-custom-side>img {
      display: flex;
      width: 100%;
      /* height: 100%; */
      object-fit: contain;
    }

    /* .dropdown {
  z-index: 2000;
  position: fixed;
  bottom: 3%;
  right: 1%;
} */
    .navbar.is-fixed-top {
      z-index: 2000;
      width: 90vw;
      margin: 0 auto;
    }

    /* .navbar.is-dark {
  background-color: #7FBEBC;
} */
    .coverDesign h1 {
      font-size: 1.3em;
    }

    /* Video Stuff */
    .hero.is-medium .hero-body {
      padding-top: 0;
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 3rem;
    }

    nav#left-pages {
      position: fixed;
      left: 1%;
      top: 40%;
      z-index: 9999;
    }

    nav#right-pages {
      position: fixed;
      right: 1%;
      top: 40%;
      z-index: 9999;
    }

    nav#left-pages a,
    nav#right-pages a {
      display: block;
      margin-top: 2em;
    }

    .navbar.is-primary,
    .button.is-primary {
      background-color: #93D1D5;
    }

    a.btn.bookLink {
padding-top: 0;
margin-top: 0;
}

#flip-nav .button {
    color: white;
    background-color: transparent;
    border: none;
max-width: 100%;
font-size: 2em;
    padding: 0;
    padding-bottom: 1.5em;

}

#flip-nav .button:hover {
background-color: #00d1b2;
}

.footer {
      width: 100%;
      min-height: 35vh;
      z-index: -1;
      background: transparent url(https://static.igem.org/mediawiki/2020/e/eb/T--KSA_KOREA--footer.png) no-repeat center center;
      background-size: contain;
    }


.navbar.is-primary .navbar-brand>a.navbar-item:hover {
background-color: transparent;
}

.navbar-item img {
max-height: 6rem;
}

#bookGroup {
  margin: 0 auto;
  margin-bottom: 15px;
}


  </style>


</head>

<body>


<div class="wrap">
    <ul class="align" id="bookGroup">
      <li>
        <figure class='book'>
          <!-- Front -->
          <ul class='hardcover_front'>
            <li>
              <img src="https://static.igem.org/mediawiki/2020/9/9b/T--KSA_KOREA--covers_1.png" alt="" width="100%" height="100%">
            </li>
            <li></li>
          </ul>
          <!-- Pages -->
          <ul class='page'>
            <li></li>
            <li>
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Description">Description</a>
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Results">Results</a>
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Measurement">Measurement</a>
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Modeling">Modeling</a>
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Implementation">Implementation</a>
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Appendix">Appendix</a>
            </li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <!-- Back -->
          <ul class='hardcover_back'>
            <li></li>
            <li></li>
          </ul>
          <ul class='book_spine'>
            <li></li>
            <li></li>
          </ul>
        </figure>
      </li>

      <li>
        <figure class='book'>
          <!-- Front -->
          <ul class='hardcover_front'>
            <li>
              <img src="https://static.igem.org/mediawiki/2020/c/ce/T--KSA_KOREA--covers_2.png" alt="" width="100%" height="100%">
            </li>
            <li></li>
          </ul>
          <!-- Pages -->
          <ul class='page'>
            <li></li>
            <li>
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Ligninator">Ligninator</a>
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Biosensor">Biosensor</a>
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Collection">Collection</a>
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Contribution">Contribution</a>
            </li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <!-- Back -->
          <ul class='hardcover_back'>
            <li></li>
            <li></li>
          </ul>
          <ul class='book_spine'>
            <li></li>
            <li></li>
          </ul>
        </figure>
      </li>
      <li>
        <figure class='book'>
          <!-- Front -->
          <ul class='hardcover_front'>
            <li>
              <img src="https://static.igem.org/mediawiki/2020/b/b2/T--KSA_KOREA--covers_3.png" alt="" width="100%" height="100%">
            </li>
            <li></li>
          </ul>
          <!-- Pages -->
          <ul class='page'>
            <li></li>
            <li>
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HW/Flourometer">Fluorometer</a>
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HW/Business">Business</a>
            </li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <!-- Back -->
          <ul class='hardcover_back'>
            <li></li>
            <li></li>
          </ul>
          <ul class='book_spine'>
            <li></li>
            <li></li>
          </ul>
        </figure>
      </li>
      <li>
        <figure class='book'>
          <!-- Front -->
          <ul class='hardcover_front'>
            <li>
              <img src="https://static.igem.org/mediawiki/2020/a/af/T--KSA_KOREA--covers_4.png" alt="" width="100%" height="100%">
            </li>
            <li></li>
          </ul>
          <!-- Pages -->
          <ul class='page'>
            <li></li>
            <li>
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Software/Biosensor">Biosensor App</a>
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Software/Crispy">Crispy</a>
        
            </li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <!-- Back -->
          <ul class='hardcover_back'>
            <li></li>
            <li></li>
          </ul>
          <ul class='book_spine'>
            <li></li>
            <li></li>
          </ul>
        </figure>
      </li>
      <li>
        <figure class='book'>
          <!-- Front -->
          <ul class='hardcover_front'>
            <li>
              <img src="https://static.igem.org/mediawiki/2020/f/fc/T--KSA_KOREA--covers_5.png" alt="" width="100%" height="100%">
            </li>
            <li></li>
          </ul>
          <!-- Pages -->
          <ul class='page'>
            <li></li>
            <li>
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HP/Overview">Overview</a>
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HP/Identification">Identification</a>
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HP/Integration">Integration</a>
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HP/Improvement">Improvement</a>
              <a class="btn bookLink" href="https://docs.google.com/document/d/e/2PACX-1vSt2M1WlhUYAtq64M2OOh4E0CNE-a7yO33OZq_PeJLidhzN4fS84CBk1EqZLObt9OoZd1eoCzVsr26Z/pub">Survey Analysis</a>
            </li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <!-- Back -->
          <ul class='hardcover_back'>
            <li></li>
            <li></li>
          </ul>
          <ul class='book_spine'>
            <li></li>
            <li></li>
          </ul>
        </figure>
      </li>
      <li>
        <figure class='book'>
          <!-- Front -->
          <ul class='hardcover_front'>
            <li>
              <img src="https://static.igem.org/mediawiki/2020/b/b2/T--KSA_KOREA--covers_6.png" alt="" width="100%" height="100%">
            </li>
            <li></li>
          </ul>
          <!-- Pages -->
          <ul class='page'>
            <li></li>
            <li>
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Education">Education</a>
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Collaboration">Collaboration</a>
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Web">Web Presence</a>
            </li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <!-- Back -->
          <ul class='hardcover_back'>
            <li></li>
            <li></li>
          </ul>
          <ul class='book_spine'>
            <li></li>
            <li></li>
          </ul>
        </figure>
      </li>
      <li>
        <figure class='book'>
          <!-- Front -->
          <ul class='hardcover_front'>
            <li>
              <img src="https://static.igem.org/mediawiki/2020/6/6c/T--KSA_KOREA--covers_7.png" alt="" width="100%" height="100%">
            </li>
            <li></li>
          </ul>
          <!-- Pages -->
          <ul class='page'>
            <li></li>
            <li>
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Members">Members</a>
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Attributions">Attributions</a>
            </li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <!-- Back -->
          <ul class='hardcover_back'>
            <li></li>
            <li></li>
          </ul>
          <ul class='book_spine'>
            <li></li>
            <li></li>
          </ul>
        </figure>
      </li>

      <li>
        <figure class='book'>
          <!-- Front -->
          <ul class='hardcover_front'>
            <li>
              <img src="https://static.igem.org/mediawiki/2020/7/73/T--KSA_KOREA--covers_8.png" alt="" width="100%" height="100%">
            </li>
            <li></li>
          </ul>
          <!-- Pages -->
          <ul class='page'>
            <li></li>
            <li>
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Logistics/Judging">Judging</a>
       
          
            </li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <!-- Back -->
          <ul class='hardcover_back'>
            <li></li>
            <li></li>
          </ul>
          <ul class='book_spine'>
            <li></li>
            <li></li>
          </ul>
        </figure>
      </li>
    </ul>
    <div class="shelf"></div>
  </div>



  <!-- *************************************** START OF BOOK *********************************************** -->



    <div class="book-wrapper">
    <nav class="navbar is-fixed-top is-primary is-spaced" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA">
          <img src="https://static.igem.org/mediawiki/2020/6/64/T--KSA_KOREA--logo.png" width="100" height="50">
        </a>
        <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div id="navbarBasicExample" class="navbar-menu">
        <div class="navbar-start">
          

          <!-- This is end of navbar start -->
        </div>

        <div class="navbar-end">
          <!-- Team -->
          <div class="navbar-item has-dropdown is-hoverable ">
            <a class="navbar-link  ">
              Team
            </a>

            <div class="navbar-dropdown">
              <a class="navbar-item " href="https://2020.igem.org/Team:KSA_KOREA/Members">
                Members
              </a>
              
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Attributions">
                Attributions
              </a>
            </div>
          </div>

          <!-- Project -->

          <div class="navbar-item has-dropdown is-hoverable">
            <a class="navbar-link">
              Project
            </a>

            <div class="navbar-dropdown">
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Project/Description">
                Description
              </a>
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Project/Results">
                Results
              </a>
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Project/Measurement">
                Measurement
              </a>
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Project/Modeling">
                Modeling
              </a>
            </div>
          </div>

          <!-- PARTS-->

          <div class="navbar-item has-dropdown is-hoverable ">
            <a class="navbar-link">
              Parts
            </a>

            <div class="navbar-dropdown">
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Ligninator">
                Ligninator
              </a>
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Biosensor">
                Biosensor
              </a>
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Collection">
                Collection
              </a>
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Contribution">
                Contribution
              </a>

            </div>
          </div>

          <div class="navbar-item has-dropdown is-hoverable ">
            <a class="navbar-link has-text-light has-background-primary ">
              Human Practices
            </a>
            <div class="navbar-dropdown">
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HP/Overview">
                Overview
              </a>
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HP/Identification">
                Identification
              </a>
              <a class="navbar-item has-text-light has-background-primary " href="https://2020.igem.org/Team:KSA_KOREA/HP/Integration">
                Integration
              </a>
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HP/Improvement">
                Improvement
              </a>
              <a class="navbar-item" href="https://docs.google.com/document/d/e/2PACX-1vSt2M1WlhUYAtq64M2OOh4E0CNE-a7yO33OZq_PeJLidhzN4fS84CBk1EqZLObt9OoZd1eoCzVsr26Z/pub">
                Survey Analysis
              </a>
            </div>
          </div>


         <div class="navbar-item has-dropdown is-hoverable ">
            <a class="navbar-link">
              Hardware & Business
            </a>
            <div class="navbar-dropdown">
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HW/Fluorometer">
                Fluorometer
              </a>  
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HW/Business">
                Business
              </a>  
            </div>
          </div>


         <div class="navbar-item has-dropdown is-hoverable ">
            <a class="navbar-link">
              Logistics
            </a>
            <div class="navbar-dropdown">
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Logistics/Judging">
                Judging
              </a>
              
              
            </div>
          </div>

         <div class="navbar-item has-dropdown is-hoverable ">
            <a class="navbar-link">
              Communication
            </a>
            <div class="navbar-dropdown">
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Education">
                Education
              </a>
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Collaboration">
                Collaboration
              </a>
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Web">
                Web Presence
              </a>
            </div>
          </div>


         <div class="navbar-item has-dropdown is-hoverable ">
            <a class="navbar-link">
              Software
            </a>
            <div class="navbar-dropdown">
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Software/Biosensor">
                Biosensor
              </a>
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Software/Crispy">
                Crispy
              </a>
           
            </div>
          </div>

         

          

        </div>


      </div>
    </nav>


    <div class="bb-custom-wrapper">
      <div id="bb-bookblock" class="bb-bookblock">
    
        
        <div class="bb-item">
          <div class="bb-custom-side">
            <img src="https://static.igem.org/mediawiki/2020/e/eb/T--KSA_KOREA--int1.png" />
          </div>
          <div class="bb-custom-side">
            <img src="https://static.igem.org/mediawiki/2020/4/4a/T--KSA_KOREA--int2.png" />
          </div>
        </div>
        <div class="bb-item">
          <div class="bb-custom-side">
            <img src="https://static.igem.org/mediawiki/2020/1/1d/T--KSA_KOREA--int3.png" />
          </div>
        </div>
      </div>


    </div>

  </div>
<!-- HERE IS END OF BOOK WRAPPER -->

  <div id="flip-nav">
    <nav id="left-pages">
      <a id="bb-nav-prev" href="#" class="button is-primary"><</a>
      <a id="bb-nav-first" href="#" class="button is-primary"><<</a>
    </nav>


    <nav id="right-pages">
      <a id="bb-nav-next" href="#" class="button is-primary">></a>
      <a id="bb-nav-last" class="button is-primary">>></a>
    </nav>
  </div>


<div class="footer"></div>





  <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/bookBlockjs&action=raw&ctype=text/javascript"></script>



  <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/imageZoomjs&action=raw&ctype=text/javascript">
  </script>




  <script>
    $(document).ready(function() {
      var Page = (function() {

        var config = {
            $bookBlock: $('#bb-bookblock'),
            $navNext: $('#bb-nav-next'),
            $navPrev: $('#bb-nav-prev'),
            $navFirst: $('#bb-nav-first'),
            $navLast: $('#bb-nav-last')
          },
          init = function() {
            console.log("enter");
            var $content = $('#bb-bookblock');
            while ($content.length === 0) {
              setTimeout(() => {
                console.log($content.length);
              }, 200);
              $content = $("bb-bookblock");
            }

            config.$bookBlock.bookblock({
              speed: 1000,
              shadowSides: 0.8,
              shadowFlip: 0.4
            });
            initEvents();
          },
          initEvents = function() {

            var $slides = config.$bookBlock.children();

            // add navigation events
            config.$navNext.on('click touchstart', function() {
              config.$bookBlock.bookblock('next');
              return false;
            });

            config.$navPrev.on('click touchstart', function() {
              config.$bookBlock.bookblock('prev');
              return false;
            });

            config.$navFirst.on('click touchstart', function() {
              config.$bookBlock.bookblock('first');
              return false;
            });

            config.$navLast.on('click touchstart', function() {
              config.$bookBlock.bookblock('last');
              return false;
            });

            // add swipe events
            $slides.on({
              'swipeleft': function(event) {
                config.$bookBlock.bookblock('next');
                return false;
              },
              'swiperight': function(event) {
                config.$bookBlock.bookblock('prev');
                return false;
              }
            });

            // add keyboard events
            $(document).keydown(function(e) {
              var keyCode = e.keyCode || e.which,
                arrow = {
                  left: 37,
                  up: 38,
                  right: 39,
                  down: 40
                };

              switch (keyCode) {
                case arrow.left:
                  config.$bookBlock.bookblock('prev');
                  break;
                case arrow.right:
                  config.$bookBlock.bookblock('next');
                  break;
              }
            });
          };

        return {
          init: init
        };

      })();
      Page.init();
    });
    
  </script>


<script>
$(document).ready(function() {
document.getElementById("content").style.background = "#93D1D5";
});

</script>


  <script>
    $(document).ready(function() {
      var $nav = $('.navbar.is-fixed-top'); //Caching element
      var $books = $('.wrap .align');
      var $video = $(".hero.is-medium");
      var $pageNav = $("#flip-nav");
      // hide .navbar first - you can also do this in css .nav{display:none;}
      $nav.hide();
      $pageNav.hide();

      // fade in .navbar
      $(function() {
        $(window).scroll(function() {
          // set distance user needs to scroll before we start fadeIn
          if ($(this).scrollTop() > $books.height()) { 
            $nav.fadeIn();
          } else {
            $nav.fadeOut();
          }
        });
      });

      $(function() {
        $(window).scroll(function() {
          // set distance user needs to scroll before we start fadeIn
          if ($(this).scrollTop() > $books.height()) { 
            $pageNav.fadeIn();
          } else {
            $pageNav.fadeOut();
          }
        });
      });

    });
  </script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('.bb-custom-side img').each(function() {
        $(this).imageZoom();
      });
    });
  </script>
</body>


</html>