.guidelist_newcontainer {
  width: calc(100% + 60px);
  margin: 0 0 0 -30px;
  clear: both
}

a.guidebx {
  width: calc(33.33% - 60px);
  margin: 0 30px 80px;
  display: flex;
  background: #fff;
  position: relative;
  padding: 30px;
  height: 210px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgb(0 0 0 / 1%);
  float: left;
}

a.guidebx {
  text-decoration: none;
}

a.guidebx:hover {
  box-shadow: 0 10px 10px rgb(0 0 0 / 4%);
}

a.guidebx .guideimgbx {
  padding: 50px 0 0 0;
  transition: all ease-out 0.3s !important;
  -webkit-transition: all ease-out 0.3s !important;
  -moz-transition: all ease-out 0.3s !important;
  -ms-transition: all ease-out 0.3s !important;
}

a.guidebx:hover .guideimgbx {
  padding: 30px 0 0 0;
  transition: all ease-out 0.3s !important;
  -webkit-transition: all ease-out 0.3s !important;
  -moz-transition: all ease-out 0.3s !important;
  -ms-transition: all ease-out 0.3s !important;
}

a.guidebx p.guidename {
  font-size: 18px;
  font-weight: 600;
  color: #4B4B4B;
  line-height: 26px;
  text-decoration: none;
  display: block;
  display: -webkit-box;
  height: 106px;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.guidebx p.learnmore {
  margin: 30px 0 0 0;
  font-size: 14px;
  text-decoration: underline;
  float: left;
  color: #3E4571;
  display: block;
  display: -webkit-box;
  height: 22px !important;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guidecontentbx {
  padding-left: 20px;
}

.book.guidmrktplc::after {
  background-color: #737373;
}

/*BOOK STYLES*/
.book-container {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 600px;
}

@keyframes initAnimation {
  0% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(-25deg);
  }
}

.book {
  width: 140px;
  height: 190px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-25deg);
  transition: 1s ease;
  animation: 1s ease 0s 1 initAnimation;
}

a.guidebx:hover .book {
  transform: rotateY(0deg);
}

.book> :first-child {
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  width: 140px;
  height: 190px;
  transform: translateZ(15px);
  background-color: #01060f;
  border-radius: 0 5px 5px 0;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
}

.book::before {
  position: absolute;
  content: ' ';
  background-color: blue;
  left: 0;
  top: 2px;
  width: 28px;
  height: 186px;
  transform: translateX(123px) rotateY(90deg);
  background: #e2e2e2;
}

.book::after {
  position: absolute;
  top: 0;
  left: 0;
  content: ' ';
  width: 140px;
  height: 190px;
  transform: translateZ(-15px);
  background-color: #01060f;
  border-radius: 0 5px 5px 0;
  box-shadow: -10px 0 50px 10px rgba(0, 0, 0, 0.3);
}



/*book border color*/
.book.elevatepage::after {
  background-color: #ff7f4e;
}

.book.startupguide::after {
  background-color: #351c32;
}

.book.digitalmktguide::after {
  background-color: #011e3c;
}

.book.guideyoutubeseo::after {
  background-color: #c82d32;
}

.book.guideschemamarkup::after {
  background-color: #54724e;
}

.book.guideserpanalysis::after {
  background-color: #004b7f;
}

/*.book.guidekeywordresearch::after {background-color: #e59629;}*/
.book.guidekeywordresearch::after {
  background-color: #54938b;
}

.book.guideseologfile::after {
  background-color: #004f2e;
}

.book.guidecontentdistri::after {
  background-color: #47b5c2;
}

.book.guideserpfeature::after {
  background-color: #6a5222;
}

.book.guideaudience::after {
  background-color: #f7376a;
}

.book.guidehowtolearnseo::after {
  background-color: #45212f;
}

.book.guidemagento::after {
  background-color: #e55615;
}

.book.guidesmallbusi::after {
  background-color: #801f48;
}

.book.guideecomcontent::after {
  background-color: #10ab9b;
}

.book.guideemailmkt::after {
  background-color: #f24e73;
}

.book.guidewix::after {
  background-color: #e09941;
}

.book.guideprestashop::after {
  background-color: #5550ac;
}

.book.guidewebflow::after {
  background-color: #3545f1;
}

.book.guidesquarespace::after {
  background-color: #8785a2;
}

.book.guidebigcom::after {
  background-color: #262331;
}

.book.guidewoocom::after {
  background-color: #8d4e81;
}

.book.guideshopify::after {
  background-color: #87b139;
}

.book.rankingfactor::after {
  background-color: #0d1556;
}

.book.astepbystepguidetomigratefromshopify::after {
  background-color: #55932c;
}

.book.takeaways::after {
  background-color: #dc8665;
}

.book.guideforecasting::after {
  background-color: #242b2e;
}

.book.aionseo::after {
  background-color: #524b57;
}

.book.guidebigcom::after {
  background-color: #8bacaa;
}




/*responsive styles*/
@media (max-width: 1440px) {

  .guidelist_newcontainer {
    width: calc(100% + 10px);
    margin: 0 0 0 -5px;
  }

  a.guidebx {
    width: calc(33.33% - 10px);
    margin: 0 5px 50px;
    padding: 20px;
  }

  span.guideimgbx {
    width: 130px
  }

  span.guideimgbx img {
    width: 100%;
  }

  span.guidecontentbx {
    width: calc(100% - 130px)
  }

}

@media (max-width: 992px) {

  a.guidebx {
    width: calc(50% - 10px);
  }

  a.guidebx:hover .guideimgbx {
    margin-top: -5px;
  }

}

@media (max-width: 768px) {

  a.guidebx p.guidename {
    font-size: 16px;
    line-height: 20px;
    height: 100px;
    -webkit-line-clamp: 5;
  }

  span.guideimgbx {
    width: 100px;
  }

  span.guidecontentbx {
    width: calc(100% - 90px);
  }

  a.guidebx {
    margin: 0 5px 40px;
    height: 150px
  }




  .book,
  .book::after,
  .book> :first-child {
    width: 100px;
    height: 136px;
  }

  .book::before {
    width: 20px;
    height: 133px;
    transform: translateX(86px) rotateY(68deg);
  }




}

@media (max-width: 575px) {

  a.guidebx {
    width: calc(100% - 10px);
  }

}

@media (max-width: 480px) {

  /*
    .guidelist_newcontainer {width: 100%; margin: 0;}
    a.guidebx {width: 100%; height: auto}
    a.guidebx p.guidename {height: auto; -webkit-line-clamp: inherit;}
    a.guidebx p.learnmore {position: absolute; bottom: 30px;}
*/


}