.link::after
{
    position: absolute;
   width: 0%;
   height: 2px; 
   content: '';
   bottom: 0%;
   left: 0;
   background-color: #1e5e98;
   transition: all ease-in-out .3s ;
}
.droped::before
{
    position: absolute;
   width: 0;
   height: 0; 
   content: '';
   bottom: 0;
   right: -0.75rem;
   cursor: pointer;
   border-top: 5px solid #1e5e98;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
}
.link:hover::after{
   width: 100%;
}
#dropdown
{
    height: 0;
    margin-top: -0.5rem;
    z-index: 10;
    overflow-y: hidden;
}
.cover{
    background-color: transparent;
}
#Slidescontainer
{
    background-size: cover;
}
.unobserve
{
    opacity: 0;
    filter: blur(5px);
    transform: translateY(100%);
    transition: all 1s;
}
.observed
{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.lefthidden
{
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-100%);
    transition: all 1s; 
}
.leftshow{
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}
.boxs:nth-child(2)
{
    transition-delay: 200ms;
}
.boxs:nth-child(3)
{
    transition-delay: 400ms;
}
.boxs2:nth-child(2)
{ 
    
    transition-delay: 200ms;
}
.boxs2:nth-child(3)
{
    transition-delay: 400ms;
}
.boxs3:nth-child(3)
{
    
    transition-delay: 200ms;
}
.boxs3:nth-child(4)
{

    transition-delay: 400ms;
}
  
/* blogs tags animations */

#tag::after
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 6px;
    width: 0%;
    height: 100%;
    z-index: 10;
    background: linear-gradient(#1e5e98,#0f0c29);
    content: '';
    transition: all ease-in-out .5s ;
}
#tag:hover::after
{
    width: 100%;
}

/* form input animation */

#name:focus+#label-name
{
    top: -0.75rem;
    padding: 0 0.5rem;
    color: #1e5e98
}
#email:focus+#label-email
{
    top: -0.75rem;
    padding: 0 0.5rem;
    color: #1e5e98
}
#content:focus+#label-content
{
    top: -0.75rem;
    padding: 0 0.5rem;
    color: #1e5e98
}

/* contact infos design */
#contactInfos::before
{
    position: absolute;
    top: 19px;
    left: 10px;
    width: 1px;
    height: 100%;
    background-color: #1e5e98;
    content: '';
}
/**
loading animation
**/

.loader {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  
  .loader div {
    width: 8%;
    height: 24%;
    background: rgb(128, 128, 128);
    position: absolute;
    left: 50%;
    top: 30%;
    opacity: 0;
    border-radius: 50px;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
    animation: fade458 1s linear infinite;
  }
  
  @keyframes fade458 {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0.25;
    }
  }
  
  .loader .bar1 {
    transform: rotate(0deg) translate(0, -130%);
    animation-delay: 0s;
  }
  
  .loader .bar2 {
    transform: rotate(30deg) translate(0, -130%);
    animation-delay: -1.1s;
  }
  
  .loader .bar3 {
    transform: rotate(60deg) translate(0, -130%);
    animation-delay: -1s;
  }
  
  .loader .bar4 {
    transform: rotate(90deg) translate(0, -130%);
    animation-delay: -0.9s;
  }
  
  .loader .bar5 {
    transform: rotate(120deg) translate(0, -130%);
    animation-delay: -0.8s;
  }
  
  .loader .bar6 {
    transform: rotate(150deg) translate(0, -130%);
    animation-delay: -0.7s;
  }
  
  .loader .bar7 {
    transform: rotate(180deg) translate(0, -130%);
    animation-delay: -0.6s;
  }
  
  .loader .bar8 {
    transform: rotate(210deg) translate(0, -130%);
    animation-delay: -0.5s;
  }
  
  .loader .bar9 {
    transform: rotate(240deg) translate(0, -130%);
    animation-delay: -0.4s;
  }
  
  .loader .bar10 {
    transform: rotate(270deg) translate(0, -130%);
    animation-delay: -0.3s;
  }
  
  .loader .bar11 {
    transform: rotate(300deg) translate(0, -130%);
    animation-delay: -0.2s;
  }
  
  .loader .bar12 {
    transform: rotate(330deg) translate(0, -130%);
    animation-delay: -0.1s;
  }