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

 

p{
    text-align:center;
}

a{
    text-decoration: none;
    color:rgb(124, 190, 110);
    font-weight: 500;
}

  .section-illustration{
      padding-top: 50px;
      text-align:center;
      padding-bottom:50px;
  }
  
  .section{
    background: rgb(15, 15, 15);
  }
  



  .col-md-4{
    margin-left: 45%;
    padding-bottom: 50px;
    padding-top: 90px;
    }

   
  
  /* ------lines----- */
  
  .container-Lines{
  position: relative;
  width:100%;
  display:flex;
  justify-content: flex-end;
  align-items:center;
  flex-direction: row-reverse;
  }
  
  .container-Lines .ring{
  position: relative;
  width:100px;
  height:100px;
  margin:-30px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top:4px solid #2b65f7;
  animation: animate 4s linear infinite;
  
  }
  
  @keyframes animate
  {
  0%
  {transform: rotate(0deg);}
  100%
  {transform: rotate(360deg);}
  }
  
  
  .container-Lines .ring::before{
  content:'';
  position:absolute;
  top:10px;
  right:5px;
  border-radius:100%;
  width:8px;
  height:8px;
  background: #86d0fe;
  box-shadow: 0 0 12px 5px #24b2ffaf, 
  0 0 12px 10px #24ecff22, 
  0 0 12px 20px #24edff1d, 
  0 0 10px 30px #24edff0f;
  }
  
  
  
  
  .container-Lines .ring:nth-child(2){
  animation: animate2 4s linear infinite;
  border-top:4px solid rgb(0, 255, 251);
  animation-delay: -3s;
  }
  
  @keyframes animate2{
  0%
  {
  transform: rotate(360deg);}
  100%
  {
  transform: rotate(0deg);}
  }
  
  .container-Lines .ring:nth-child(2)::before{
    content:'';
    position:absolute;
    bottom:10px;
   left:5px;
    border-radius:100%;
    width:8px;
    height:8px;
    background: #16ffff;
    box-shadow: 0 0 12px 5px #24f8ffaf, 
    0 0 12px 10px #24ecff22, 
    0 0 12px 20px #24edff1d, 
    0 0 10px 30px #24edff0f;
    }
  
   
  .container-Lines .ring:nth-child(3){
  position: absolute;
  top:-66.66px;
  animation-delay: -3.5s;
  border-top:4px solid #f72be9;
  }
  
  .container-Lines .ring:nth-child(3)::before{
    background: #fd81e2;
    box-shadow: 0 0 12px 5px #f972d1af, 
    0 0 12px 10px #ff249122, 
    0 0 12px 20px #d024ff1d, 
    0 0 10px 30px #ff24f80f;
    }
  





/* -------------illustration gallery ---------*/




  .col-sm-4{
    padding: 5px;
    height: 300px;
    flex-wrap: wrap;
    align-content: space-around;
    flex-direction: column;
    }
    
  .col-sm-8{
    padding: 5px;
    height: 300px;
    display: inline-flex;
    flex-wrap: wrap;
    align-content: space-around;
    flex-direction: column;
    }

  .col-sm-6{
    padding: 5px;
    height: 300px;
    display: inline-flex;
    flex-wrap: wrap;
    align-content: space-around;
    flex-direction: column;
    }


#img1{

  width: 100%;
  height: 100%;
  background-image:url(/img/Illustration/Acquatic_Planet.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#img2{

  width: 100%;
  height:100%;
  background-image:url(/img/Illustration/Forest_Planet.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
}


#img3{

  width: 100%;
  height:100%;
  background-image:url(/img/Illustration/Ryslanda.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
}



#img4{

  width: 100%;
  height:100%;
  background-image:url(/img/Illustration/Bloom_Planet_v01.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
}




#img5{

  width: 100%;
  height: 100%;
  background-image:url(/img/Illustration/Crystal_Planet_V2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#img6{

  width: 100%;
  height:100%;
  background-image:url(/img/Illustration/Golden_Planet_v03.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
}


#img7{

  width: 100%;
  height:100%;
  background-image:url(/img/Illustration/Starship.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
}



#img8{

  width: 100%;
  height:100%;
  background-image:url(/img/Illustration/Khazadun_Industrial.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
}


#img9{

  width: 100%;
  height: 100%;
  background-image:url(/img/Illustration/Desert_Planet.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#img10{

  width: 100%;
  height:100%;
  background-image:url(/img/Illustration/MethaneLake.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
}


#img11{

  width: 100%;
  height:100%;
  background-image:url(/img/Illustration/Pherzets_Planet.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
}



#img12{

  width: 100%;
  height:100%;
  background-image:url(/img/Illustration/TreeLife_Planet_v02b.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
}




#img13{

  width: 100%;
  height: 100%;
  background-image:url(/img/Illustration/PersonalQuarterB.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#img14{

  width: 100%;
  height:100%;
  background-image:url(/img/Illustration/StoreRoom1.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
}


#img15{

  width: 100%;
  height:100%;
  background-image:url(/img/Illustration/Storeroom2_PreviewNightAndDay.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
}
#img16{

  width: 100%;
  height:100%;
  background-image:url(/img/Illustration/LUPO.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
}
#img17{

  width: 100%;
  height:100%;
  background-image:url(/img/Illustration/Kitchen-Door.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
}
#img18{

  width: 100%;
  height:100%;
  background-image:url(/img/Illustration/carlino.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
}







/* -------------books ---------*/






































@media(max-width:2560px){
  .col-md-4{
    margin-left: 47%;
   
    }

}
  
@media (min-width: 768px){
  .logo {
      margin-top: 5px;
  }
  }
  
  
  @media(max-width:1180px){
  
  
  .top ul li {
    position: relative;
    float: left;
    width: 25%; 
    height: 25%; 
    overflow: hidden;
  }
  
  }
  
  @media(max-width:992px){
  .top ul li {
    position: relative;
    float: left;
    width: 100%; 
    height: 30%;  
    overflow: hidden;
  }
  }
  
  @media(max-width:882px){
  .top ul li {
    position: relative;
    float: left;
    width:100%; 
    height: 30%; 
    overflow: hidden;
  
  }
  .col-md-4{
    margin-left: 37%;
    padding-bottom: 50px;
    padding-top: 90px;
    }
  }
  
  @media(max-width:680px){
  .top ul li {
    display: flex;
    position: relative;
    float: left;
    width: 50%;
    height: 30%;
    overflow: hidden;
    align-content: center;
    flex-direction: column-reverse;
    justify-content: center;
  }
  .col-md-4{
    margin-left: 35%;
    padding-bottom: 50px;
    padding-top: 90px;
    }
  }
  
  @media(max-width:550px){
  .top ul li {
    display: flex;
    position: relative;
    float: left;
    width: 100%; 
    height: auto; 
    overflow: hidden;
    align-content: center;
    flex-direction: column-reverse;
    justify-content: center;
  }
  }
  
  @media(max-width:450px){
  .top ul li {
    position: relative;
    float: left;
    width: 100%; 
    height: auto; 
    overflow: hidden;
  }
     
  }
  @media(max-width:380px){
  .top ul li {
    position: relative;
    float: left;
    width: 100%; 
    height: auto; 
    overflow: hidden;
  }
  }
  @media(max-width:360px){
   
  
  }