.card {
  position: relative;

  font-family: neue-kabel, sans-serif;
  font-weight: 900;
  font-style: normal;
  
  float: left;
  font-size: 1.5em;
  color: rgba(255, 255, 255, .0);

  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 100%;
  background-color: black;
  border-radius: 4px;

  
  -webkit-box-shadow: -4px 5px 7px -4px #000000;
  box-shadow: -4px 5px 7px -4px #000000;

  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;

  transition: all 100ms;
  /* overflow: hidden; */
}

.card:hover {
  float: left;
  color: white;
  transform: translateY(-3px) scale(1.1);
  -webkit-box-shadow: -4px 5px 7px -4px #000000;
  box-shadow: -4px 5px 7px -4px #000000;
  cursor: pointer;
  transition: all 500ms;

  
  
}
.card.deactivate{
  cursor:not-allowed;

}


.copyShadow{
  position:absolute;
  text-align: center;
  transition: all 100ms;
  filter: drop-shadow(2px 2px 10px grey);
  z-index: 90;
  }

  .thumbnailBlack{
    display: inline-flex;
    position:relative;
    background-color: black;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    opacity: .0;
    border-radius: 4px;
    transition: all 500ms;

  }


  .thumbnailCTA{
    position: absolute;
    width: 100%;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    z-index: 100;

  }

  .card:hover .thumbnailBlack{
    opacity: .6;
   
  }

  .card:hover {
    background-size: 110% auto;

  }

  @media screen and (max-width: 579px) {

  .thumbnailBlack{
    display: inline-flex;
    position:relative;
    background-color: black;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    opacity: .6;
    border-radius: 4px;
    transition: all 500ms;

  }

  .card{
    color: rgb(255, 255, 255);
  }


  }



  /* DECIPLINE SECTION*/

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

#containerDecipline{
  display: flex;
  justify-content: center;
  }
  

  .extra-copy{
 
    font-weight: 100;
    margin-top: -20px;
    font-size: .5em;
    animation: fadeInUp 0.8s ease-out;


  }

  .boxItem{
    font-family: neue-kabel, sans-serif;
    font-weight: 900;
    font-style: normal;

    font-size: 1.5em;
    text-align: center;
    width: 100%;
    height: 700px;
    vertical-align: middle;
    color: white;
    transition: .5s ease all;
   
  
  
  }
  
  .boxItem:hover{
  
  cursor: pointer;
  background-color: black;
  transition: 0.5;
  color: white;
  width: 120%;
  
  }
  
  
  .btn-design{
  width: 100%;
  height: 100%;
  display: flex;
  background-color: rgba(173,255,47, 0.572);
  background-image: url(./img/diciplineImg/HeaderImages_Design.jpg);
  background-size:cover;
  justify-content: center;
  align-items: center;
  transition: .5s ease all;
  background-blend-mode:multiply;
  flex-direction: column;
  }
  
  .btn-UX{
  width: 100%;
  height: 100%;
  display: flex;
  background-color: rgba(173,255,47, 0.572);
  background-image: url(./img/diciplineImg/HeaderImages_UX.jpg);
  background-size:cover;
  justify-content: center;
  align-items: center;
  transition: .5s ease all;
  background-blend-mode:multiply;
  flex-direction: column;
  
  }


  .btn-Ani{

    width: 100%;
    height: 100%;
    background-color: rgba(173,255,47, 0.572);
    background-image:url(./img/diciplineImg/HeaderImages_Ani.jpg);
    background-size:cover;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .5s ease all;
    background-blend-mode:multiply;
    flex-direction: column;
    }
    
  

  .btn-overlay{
    display: inline-flex;
  
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    background: rgb(2,0,36);
    background: linear-gradient(22deg, rgba(2,0,36,1) 0%, rgba(31,31,157,1) 35%, rgba(0,212,255,1) 100%);
    background-blend-mode:multiply;

  }
  
  .btn-design:hover{
  background-color: white;
  background-image: url(https://images.unsplash.com/photo-1611643378160-39d6dd915b69?q=80&w=2498&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  
  
  }
  
  .btn-Ani:hover{
  background-color: white;
  background-image: url(https://images.unsplash.com/photo-1611643378160-39d6dd915b69?q=80&w=2498&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  
  
  }
  
  .btn-UX:hover{
    background-color: white;
    background-image: url(https://images.unsplash.com/photo-1611643378160-39d6dd915b69?q=80&w=2498&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    
  }