.blurring .card:hover .image {background-color: rgb(225,225,225); opacity: 0.8}
  .blurring .card:hover {transform:none!important}

  .selectable :hover{
    box-shadow: 0 0 11px #727273;
  }
    
    .slideright{
      animation: lefttoright  0.4s ease-in
    }

    .slideleft {
      animation: righttoleft  0.4s ease-in
    }

    .appearfromleft {
      animation: appearleft  0.4s ease-in
    }

    .appearfromright {
      animation: appearright  0.4s ease-in
    }

    @keyframes appearright {
      0% { left:100%; right:-100%}
      100%{ left : 0; right:0}
    }

    @keyframes appearleft {
      0% { left:-100%; right:100%}
      100%{ left : 0; right:0}
    }

    @keyframes lefttoright {
      0% { left: 0; right:0}
      100%{ left : 100%; right:-100%}
    }

    @keyframes righttoleft {
      0% { right: 0; left:0}
      100%{ right : 100%; left: -100%}
    }

    @media (min-width : 992px) {
      /* Para poner el footer abajo. Le añadimos el css de semantic también ya que es un footer html */
      body {
        display: flex !important;
        flex-direction: column !important;
      }

      main{
        flex:2
      }

      footer {
        margin-top: auto !important;
      }
  }

     /* Para poner el footer abajo. Le añadimos el css de semantic también ya que es un footer html */
    .heading {
      font-size: 30px;
    }

    .heading2{
      font-size:30px;
      float:right;
      margin-right:5px;
      line-height:1.2;
    }


    .days{
      font-size:20px;
    }

    @media only screen and (max-width: 992px) {
       .heading {
         font-size: 20px
       }
       .heading2{
         font-size: 20px
       }
       .days{
         font-size:15px;
       }
       .logo{
         height:40px;
       }

     }

    @keyframes bg-change {
      from {
        background-color: #2185d0;
      }

      to {
        background: 0;
      }
    }
    body {
      display: flex;
      flex-direction: column;
    }

    main{
      flex: 2;
      position:relative;
    }


    @media only screen and (min-width: 1300px){
      .ui.container {
        width:75% !important
      }
    }
      @media only screen and (min-width: 1200px) {
      .ui.container {
      width: 85%;
      }
      }


      @media only screen and (max-width: 1199px) {
      .ui.container {
      width: 90%;
      }
      }