.anim-lines{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 3rem;
    grid-column-gap: 1rem;
    justify-content: space-between;
}

.line{
    height: 20px;
    display: flex;
    background: white;
    padding: 2rem;
}

.line-1{
    padding: 0.3rem;
    width: 100%;
}

.line-2{
    padding: 0.4rem;
    width: 90%;
}

.line-3{
    padding: 0.2rem;
    width: 70%;
}

.appearing-lines{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 5rem;
    padding: 5.5rem 0rem 5.5rem 0rem;
}

.animate.lines-slide { animation-name: animate-lines-slide; }

@keyframes animate-lines-slide {
  0% {
    opacity: 0;
    transform: translate(-500px, 0px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

.animate.line-rot-slide { animation-name: animate-line-rot-slide; }

@keyframes animate-line-rot-slide {
  0% {
    opacity: 0;
    transform: translate(300px, 0px)  rotate(-45deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(-45deg);
  }
}

.line-rotated{
    z-index: -1;
    margin-top: -5.45rem;
    margin-left: -1.9rem;
    position: absolute;
    height: 0px;
    display: flex;
    background: white;
    width: 15rem;
    padding: 0.3rem;
    transform: rotate(-45deg);
    align-content: center;
}

.anim-circle{
    width: 200px;
    display: flex;
}

.circle {
    border: 0.5rem wheat solid;
    margin-top: -2rem;
    right: 0rem;
    position: absolute;
    border-radius: 50%;
    width: 8rem;
    height: 8rem;
    border-color: white;
}

.section{
  height: auto;
  width: 100%;
  background: black;
}

.section .container{
  position:relative;
  overflow: hidden;
}

.section .container h2{
  position: relative;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  font-weight: 100;
  color: #151515;
  font-size: 1.5em;
  line-height: 0.5em;
  letter-spacing: 4px;
}

.section .container h2 span.text1{
  animation-delay: 0.5s;
  filter: hue-rotate(225deg);
}
.section .container h2 span.text2{
  animation-delay: 1s;
  filter: hue-rotate(225deg);
}

.section .container h2 span.text3{
  animation-delay: 1.5s;
  filter: hue-rotate(180deg);
}

.section .container h2 span{
  position: relative;
  z-index: 1;
  color: #fff;
  animation: animate 5s linear infinite;
}

@keyframes animate {
  0%,5%,10.1%,15.1%,25.1%,45%,70.1%,90%,100% {
    color: #222;
    text-shadow: 0 0 0 #222;
  }
  5.1%,10%,15.2%,25%,45.1%,70%,90.1%,95%{
    color: #fff;
    text-shadow:  0 0 10px #ff3177,
                  0 0 20px #ff3177,
                  0 0 40px #ff3177,
                  0 0 80px #ff3177,
                  0 0 160px #ff3177;

  }
}

.blogs{
  padding-top: 20rem;
    padding-bottom: 20rem;
    transition: all 1s;
}

#blogs-text{
    transition: all 1s;
}

.icons{
  display: flex;
  justify-content: center;
  align-items: center;
}

.blogs ul{
  position: relative;
  display: flex;
  transform-style: preserve-3d;
  transform: rotate(-25deg) skew(25deg);
}

.blogs ul li{
  position: relative;
  list-style: none;
  width: 110px;
  height: 110px;
  margin: 10px 10px;
}

.blogs ul li:before{
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  background: #2a2a2a;
  transform-origin:  top;
  transform: skewX(-41deg);
}

.blogs ul li:after{
  content: '';
  position: absolute;
  top: 0;
  left: -9px;
  width: 9px;
  height: 100%;
  background: #2a2a2a;
  transform-origin: right;
  transform: skewY(-49deg);
}

.blogs ul li span{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex !important;
  justify-content: center;
  align-items: center;
  background: #333;
  color: rgba(255,255,255,0.2);
  font-size: 50px !important;
  transition: 0.2s;
}

.blogs ul li:hover span{
  z-index: 1000;
  transition: 0.5s;
  color: #fff;
  box-shadow: -1px 1px 1px rgba(0,0,0,0.05);
}

.blogs ul li:hover span:nth-child(5){
  transform: translate(40px, -40px);
  opacity: 1;
}
.blogs ul li:hover span:nth-child(4){
  transform: translate(30px, -30px);
  opacity: 0.8;
}
.blogs ul li:hover span:nth-child(3){
  transform: translate(20px, -20px);
  opacity: 0.6;
}
.blogs ul li:hover span:nth-child(2){
  transform: translate(10px, -10px);
  opacity: 0.4;
}
.blogs ul li:hover span:nth-child(1){
  transform: translate(0px, -0px);
  opacity: 0.2;
}

.blogs ul li:nth-child(1):hover span{
  background: rgba(255,255,255,0.2);
}

.blogs ul li:nth-child(2):hover span{
  background: #236c0d;
}

.blogs ul li:nth-child(3):hover span{
  background: rgba(126, 253, 117, 0.76);
}

.blogs ul li:nth-child(4):hover span{

  background: #25D366;
}
.blogs ul li:nth-child(5):hover span{
  background: rgba(56, 155, 80, 0.2);
}

.blogs ul li:nth-child(6):hover span{
  background: #118a02;
}

.blogs ul li:nth-child(7):hover span{
  background: #459a54;
}

.blogs ul li:nth-child(8):hover span{

  background: rgba(97, 255, 157, 0.6);
}

@media screen and (max-width: 1098px){
   .blogs{
     margin-top: 0;
    overflow: hidden;
    width: 100%;
    height: 400px;
    padding-top: 200px;
  }
  .blogs ul li span{
    font-size: 40px !important;
  }

  .blogs ul li{
  width: 70px;
  height: 70px;
}
}

@media screen and (max-width: 508px){
  .section{
    position: relative;
  }
}