.box{
    position:relative;
    padding:0;
    width:300px;
    display:block;
    cursor:pointer;
    overflow:hidden;
    }
    .content {
    opacity:0;
    font-size: 40px;
    position:absolute;
    top:0;
    left:0;
    color:#ebf5fc;
    background-color:rgba(88, 87, 87, 0.50);
    width:300px;
    height:400px;
    -webkit-transition: all 400ms ease-out;
    -moz-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    -ms-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
    text-align:center;
    }
    .box .content:hover { opacity:1; }      
    .box .content .text {
    height:0;
    opacity:1;
    transition-delay: 0s;
    transition-duration: 0.4s;
    }
    .box .content:hover .text {
    opacity:1;
    transform: translateY(180px);
    -webkit-transform: translateY(180px);
    }
    .custom-toggler{
      background-color: #17a2b8;
    }
    .fixed-top {
    
      background-color:#17a2b8 !important/* here */
      
  }
    body, html {
        height: 100%;
        text-align: center;
      }
      
      .loader {
      display: inline-block;
      width: 30px;
      height: 30px;
      position: relative;
      border: 4px solid #Fff;
      top: 50%;
      animation: loader 2s infinite ease;
      }
      
      .loader-inner {
      vertical-align: top;
      display: inline-block;
      width: 100%;
      background-color: #fff;
      animation: loader-inner 2s infinite ease-in;
      }
      
      @keyframes loader {
      0% {
        transform: rotate(0deg);
      }
      
      25% {
        transform: rotate(180deg);
      }
      
      50% {
        transform: rotate(180deg);
      }
      
      75% {
        transform: rotate(360deg);
      }
      
      100% {
        transform: rotate(360deg);
      }
      }
      
      @keyframes loader-inner {
      0% {
        height: 0%;
      }
      
      25% {
        height: 0%;
      }
      
      50% {
        height: 100%;
      }
      
      75% {
        height: 100%;
      }
      
      100% {
        height: 0%;
      }
      }
        .preload{
          position: fixed;
          top: 0;
          width: 100%;
          height: 100vh;
          justify-content: center;
          align-items: center;
          background: rgb(7, 95, 228);
          z-index: 999999;
          transition: opacity 0.5s ease;
        }
      
        .preload-finish{
          opacity: 0;
          pointer-events: none;
        }
      
        .center{
          display: block;
          margin-left: auto;
          margin-right: auto;
          width: 50%;
        }
        
        .head{
          background-image: url("./publications/publicaton_back.jpg");
          height: 40vh;
          background-repeat: no-repeat;
          width: 100vw;
          background-size: cover;
        }
        .headline{
          position: relative;
          top: 50%;
          transform: translateY(-50%);
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
        }

      .text-white{
          color: white;
      }
      
      .text-dark{
          color: darkslategray;
      }

      .heading_text{
        vertical-align:middle;
        font-weight: 400;
        text-align: center;
        
    }

    .cover_main{
      background-image: url('./publications/publication_back.jpg') !important;
      min-height: 40vh;

  }

  .pub_covers{
    background-color: #fff !important;
    max-width: 100vw;
  }

  #button {
    display: inline-block;
    background-color: #FF9800;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: background-color .3s, 
      opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
  }
  #button::after {
    content: "\f077";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    font-size: 2em;
    line-height: 50px;
    color: #fff;
  }
  #button:hover {
    cursor: pointer;
    background-color: #333;
  }
  #button:active {
    background-color: #555;
  }
  #button.show {
    opacity: 1;
    visibility: visible;
  }