.blog-card2 {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 margin-top: 20px;
 margin-bottom: 20px;
 z-index: 20;
}
.listviewdalam1 {
 position: relative;
 
 width: calc(100% - 10px);
 margin: 0 auto;
 margin-top: 15px;
}
.hurufbesar {
 color: rgba(0,0,0,0.7);
 float: left;
 font-size: 4em;
 line-height: 40px;
 padding-right: 8px;
 position: relative;
 top: 8px;
}
.hurufbesar1 {
 color: rgba(0,0,0,0.7);
 float: right;
 font-size: 4em;
 line-height: 40px;
 padding-right: 8px;
 position: relative;
 top: 8px;
}
.bookshelf {
 float: left;
 margin-top: 0px;
}
.bookshelf .shelf {
 width: 426px;
 height: 440px;
}
.bookshelf .shelf .row-1 {
 position: relative;
 width: 370px;
 height: 158px;
 margin-left: 33px;
}
.bookshelf .shelf .row-1:after, .bookshelf .shelf .row-2:after, .bookshelf .shelf .row-3:after {
 background: url(../pics/wall-bookshelf.png);
 background-size: 100%;
 background-repeat: no-repeat;
 background-position: bottom left;
 width: 426px;
 height: 210px;
 display: block;
 content: "";
 margin-left: -38px;
}
.bookshelf .shelf .row-2 {
 position: relative;
 margin-top: 20px;
 height: 164px;
 width: 370px;
 margin-left: 33px;
}
.bookshelf .shelf .row-2:after {
 height: 216px;
}
.bookshelf .shelf .row-3 {
 position: relative;
 margin-top: 20px;
 height: 164px;
 width: 360px;
 margin-left: 33px;
}
.bookshelf .shelf .row-3:after {
 height: 216px;
}
.bookshelf .shelf .loc {
 position: absolute;
 bottom: 0;
 width: 100%;
}
.bookshelf .shelf .loc > div {
 width: 33%;
 height: 100%;
 float: left;
 text-align: center;
 position: relative;
}
.bookshelf .suggestion {
 font: 12px 'District Thin', helvetica, arial;
 color: #999;
 text-align: center;
 line-height: 40px;
}
.bookshelf .thumb1, .bookshelf-row .thumb1 {
 background-image: url(../pics/book1.png);
 width: 114px;
 height: 150px;
}
.bookshelf .thumb2, .bookshelf-row .thumb2 {
 background-image: url(../pics/book2.png);
 width: 114px;
 height: 150px;
}
.bookshelf .thumb3, .bookshelf-row .thumb3 {
 background-image: url(../pics/book3.png);
 width: 114px;
 height: 150px;
}
.bookshelf .thumb4, .bookshelf-row .thumb4 {
 background-image: url(../pics/book4.png);
 width: 114px;
 height: 150px;
}
.bookshelf .thumb5, .bookshelf-row .thumb5 {
 background-image: url(../pics/book5.png);
 width: 114px;
 height: 150px;
}
.bookshelf .thumb6, .bookshelf-row .thumb6 {
 background-image: url(../pics/book6.png);
 width: 114px;
 height: 150px;
}
.form-style-8 {
 margin: 0 auto;
 padding: 0px;
 color: #000;
 text-align: center;
 width: 80%;
 font-family: "AustralisProSwash-Italic";
}
.form-style-6 {
 margin: 0 auto;
 padding: 0px;
 color: #000;
 text-align: center;
 width: 100%;
 font-family: "AustralisProSwash-Italic";
}
.form-style-9 {
 margin: 0 auto;
 color: #000;
 width: 80%;
 padding-left: 10px;
 padding-right: 80px;
 font-family: "AustralisProSwash-Italic";
}
.learning_member_text h5 {
 font-family: "Consolas", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "Monaco", "Courier New", "monospace";
 color: #000;
 font-size: 32px;
 position: relative;
 text-shadow: 1px 2px 2px white;
}
.jarakatas {
 margin-top: 80px;
}

@media only screen and (max-width: 450px) {
.blog-card2 {
 flex-direction: column;
 width: 100%;
 margin-top: 20px;
}
.jarakatas {
 margin-top: 30px;
}
.form-style-6 {
 margin: 0 auto;
 border-radius: 5px;
 padding: 15px;
 color: #000;
 width: 99%;
 text-align: center;
 font-family: "AustralisProSwash-Italic";
}
.form-style-8 {
 margin: 0 auto;
 border-radius: 5px;
 padding: 15px;
 color: #000;
 width: 99%;
 text-align: center;
 font-family: "AustralisProSwash-Italic";
}
.form-style-9 {
 margin: 0 auto;
 border-radius: 5px;
 color: #000;
 width: 99%;
 padding: 10px;
 font-family: "AustralisProSwash-Italic";
}
.bookshelf .shelf {
 width: 320px;
}
.bookshelf .shelf .row-1 {
 position: relative;
 width: 320px;
 margin-left: 13px;
}
.bookshelf .shelf .row-1:after, .bookshelf .shelf .row-2:after, .bookshelf .shelf .row-3:after {
 width: 300px;
 height: 190px;
 margin-left: -18px;
}
.bookshelf .shelf .row-2 {
 position: relative;
 width: 320px;
 margin-left: 13px;
}
.bookshelf .shelf .loc > div {
 width: 29%;
 height: 100%;
 float: left;
 text-align: center;
 position: relative;
}
.bookshelf .thumb1, .bookshelf-row .thumb1 {
 background-image: url(../pics/book11.png);
 width: 80px;
 height: 105px;
}
.bookshelf .thumb2, .bookshelf-row .thumb2 {
 background-image: url(../pics/book21.png);
 width: 80px;
 height: 105px;
}
.bookshelf .thumb3, .bookshelf-row .thumb3 {
 background-image: url(../pics/book31.png);
 width: 80px;
 height: 105px;
}
.bookshelf .thumb4, .bookshelf-row .thumb4 {
 background-image: url(../pics/book41.png);
 width: 80px;
 height: 105px;
}
.bookshelf .thumb5, .bookshelf-row .thumb5 {
 background-image: url(../pics/book51.png);
 width: 80px;
 height: 105px;
}
.bookshelf .thumb6, .bookshelf-row .thumb6 {
 background-image: url(../pics/book61.png);
 width: 80px;
 height: 105px;
}
}
.tabs-container {
 width: 40%;
 float: left;
 z-index: 20;
 height: 420px;
}
/* tabs names */
.tabs-container label {
 padding: 15px;
 cursor: pointer;
 user-select: none;
 width: 100%;
 margin: 0 auto;
}
.tab-content {
 padding: 20px;
 width: 60%;
 float: left;
 text-align: center;
 z-index: 19;
 display: none;
 height: 420px;
 border-radius: 20px;
 margin: 0 auto;
}
.tab-content img {
 width: 70%;
}
.tab-content:after {
 content: "";
 clear: both;
}
/* Hide input radio from users */
input[name="tab"] {
 display: none;
}
/* Show tab when input checked */
input[name="tab"]:checked + .tab-content {
 display: block;
 animation: slide 0.5s forwards;
}
.listviewdalam {
 text-align: left;
 overflow: hidden;
 border-radius: 15px;
 margin-bottom: -20px;
 border: #DADCDD 1px solid;
 width: 100%;
 font-size: 14px;
 padding: 20px 10px 10px 10px;
 position: relative;
 box-shadow: 2px 2px 2px #aaaaaa;
 display: inline-block;
 vertical-align: middle;
}
.listviewdalam img {
 float: left;
 margin: 0 15px 0 0;
}
.listviewdalam p {
 width: 90%;
 color: #464747;
}
.boderinset {
 box-shadow: inset 0 0 0px transparent; height: 450px; margin: 0 auto; padding: 0px 20px 0px 40px; position: relative; vertical-align: middle;
}
/* Slide animation for tab contents */
@keyframes slide {
 from {
 left: -100%;
 opacity: 0;
}
 to {
 left: 0;
 opacity: 1;
}
}


#multi-wave {
  position: absolute;
  left: 0;
  right: 0;
  top: 60px;
  z-index: -1;
  height: 100%;
  width: 100%;
}
  section {
   position: absolute;
   width: 100%;
   height: 300vh;
   top: 0;
   background: #3586FF;
   background: radial-gradient(ellipse at center, rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #3586FF 100%);
   overflow: hidden;
   z-index: -2;
}

section .wave {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 198px;
   background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg');
   backgroud-size: 1600px 198px;
}

section .wave.wave1 {
   animation: animate-wave-1 30s linear infinite;
   z-index: 1000;
   opacity: 1;
   animation-delay: 0s;
   bottom: 0;
}

section .wave.wave2 {
   animation: animate-wave-2 15s linear infinite;
   z-index: 999;
   opacity: 0.5;
   animation-delay: -5s;
   bottom: 10px;
}

section .wave.wave3 {
   animation: animate-wave-3 30s linear infinite;
   z-index: 998;
   opacity: 0.2;
   animation-delay: -2s;
   bottom: 15px;
}

section .wave.wave4 {
   animation: animate-wave-4 5s linear infinite;
   z-index: 997;
   opacity: 0.7;
   animation-delay: -5s;
   bottom: 20px;
}

@keyframes animate-wave-1 {
   0% {
      background-position-x: 0;
   }
   100% {
      background-position-x: 1600px;
   }
}

@keyframes animate-wave-2 {
   0% {
      background-position-x: 0;
   }
   100% {
      background-position-x: -1600px;
   }
}

@keyframes animate-wave-3 {
   0% {
      background-position-x: 0;
   }
   100% {
      background-position-x: 1600px;
   }
}

@keyframes animate-wave-4 {
   0% {
      background-position-x: 0;
   }
   100% {
      background-position-x: -1600px;
   }
}
@media (max-width: 414px) {
.tabs-container {
 width: 100%;
 min-height: 200px;
}
.tab-content {
 width: 100%;
 min-height: 200px;
}
 .gambardalam{
 width: 90%;
}
 #multi-wave {
  height: 40%;
  width: 100%;
}
 section {
   height: 420vh;
}
 .tab-content {
 margin-top: 20px;
}
 .tab-content img {
 width: 100%;
}
 .listviewdalam {
 font-size: 12px;
 padding: 20px 10px 10px 10px;
}
 .boderinset {
 height: 630px;padding: 0px 0px 0px 0px;
 box-shadow: inset 0 0 0px transparent;
}
 .learning_member_text h5 {
 font-size: 24px;
}
}