body {
    margin: 0 auto;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 18px;
}

.container {
    margin: 0 auto;
    width: 100%;
    max-width: 1100px;
    text-align: center;
    display: block;
}

.title {
    font-size: 36px;
    margin-top: 20px;
    width: 90%;
}

.venue {
    font-size: 22px;
    margin-top: 20px;
    width: 90%;
}

.author {
    width: 95%;
    max-width: 200px; 
    /* max-width: 300px; */
    font-size: 20px;
}

.affiliation {
    font-size: 20px;
    width: 95%;
    max-width: 450px;
}

.links {
    font-size: 22px;
    width: 95%;
    max-width: 150px;
}

.video-container {
    position: relative;
    overflow: hidden;
    width: 80%;
    padding-top: 45%; /* Formula for 16:9 Aspect Ratio: width * 9 / 16 */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.paper-thumbnail {
    margin: 0 auto;
    width: 40%;
    max-width: 250px;
    display: inline-block;
    vertical-align: top;
    padding: 2% 10% 4% 0;
}

.paper-info {
    width: 45%;
    display: inline-block;
    vertical-align: top;
}

@media (max-width: 999px) {
    .paper-thumbnail {
        width: 60%;
    }

    .paper-info {
        width: 80%;
    }
}


p {
    text-align: left;
    margin: 0 auto;
    margin-bottom: 10px;
}

h1 {
    font-weight: 300;
    text-align: center;
}

h2 {
    text-align: center;
    font-weight: normal;
}

h3 {
    text-align: left;
}

h4 {
    text-align: left;
}

h5 {
    text-align: left;
}

div {
    display: inline-block;
}

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    width: 90%;
}

pre {
    overflow-x: auto;
    text-align: left;
    border: 1px solid grey;
    border-radius: 3px;
    background: #eeeeee;
    padding: 5px 5px 5px 10px;
    line-height: 1.2;
    white-space: pre-wrap;
}

pre code {
    text-align: left;
    word-wrap: normal;
    white-space: pre-wrap;
    font-size: 14px;
}

a:link, a:visited {
    color: #1367a7;
    text-decoration: none;
}

a:hover {
    color: #208799;
}

.layered-paper-big {
    /* modified from: http://css-tricks.com/snippets/css/layered-paper/ */
    box-shadow:
            0px 0px 1px 1px rgba(0,0,0,0.35), /* The top layer shadow */
            5px 5px 0 0px #fff, /* The second layer */
            5px 5px 1px 1px rgba(0,0,0,0.35), /* The second layer shadow */
            10px 10px 0 0px #fff, /* The third layer */
            10px 10px 1px 1px rgba(0,0,0,0.35), /* The third layer shadow */
            15px 15px 0 0px #fff, /* The fourth layer */
            15px 15px 1px 1px rgba(0,0,0,0.35), /* The fourth layer shadow */
            20px 20px 0 0px #fff, /* The fifth layer */
            20px 20px 1px 1px rgba(0,0,0,0.35), /* The fifth layer shadow */
            25px 25px 0 0px #fff, /* The fifth layer */
            25px 25px 1px 1px rgba(0,0,0,0.35); /* The fifth layer shadow */
    margin-left: 10px;
    margin-right: 45px;
}

/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
    display: block;
    background-color: transparent;
    width: 280px;
    height: 280px;
    border: 1px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
  }
  
  /* This container is needed to position the front and back side */
  .flip-box-inner {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-box:hover .flip-box-inner {
    display: block;
    transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .flip-box-front, .flip-box-back {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-box-front {
    display: block;
    background-color: #bbb;
    color: black;
  }
  
  /* Style the back side */
  .flip-box-back {
    display: block;
    background-color: rgb(0, 0, 0);
    color: white;
    transform: rotateY(180deg);
  }





/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box2 {
  display: block;
  background-color: transparent;
  width: 180px;
  height: 180px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

 /* This container is needed to position the front and back side */
 .flip-box2-inner {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box2:hover .flip-box2-inner {
  display: block;
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box2-front, .flip-box2-back {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-box2-front {
  display: block;
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-box2-back {
  display: block;
  background-color: rgb(0, 0, 0);
  color: white;
  transform: rotateY(180deg);
}

/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box2 {
  display: block;
  background-color: transparent;
  width: 180px;
  height: 180px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

 /* This container is needed to position the front and back side */
 .flip-box2-inner {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}


/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box3:hover .flip-box3-inner {
  display: block;
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box3-front, .flip-box3-back {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-box3-front {
  display: block;
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-box3-back {
  display: block;
  background-color: rgb(0, 0, 0);
  color: white;
  transform: rotateY(180deg);
}

/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box3 {
  display: block;
  background-color: transparent;
  width: 165px;
  height: 165px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

 /* This container is needed to position the front and back side */
 .flip-box3-inner {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}



  /* Bottom left text */
  .bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
  }
  
  /* Top left text */
  .top-left {
    position: absolute;
    top: 8px;
    left: 16px;
  }
  
  /* Top right text */
  .top-right {
    position: absolute;
    top: 8px;
    right: 16px;
  }
  
  /* Bottom right text */
  .bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
  }
  
  /* Centered text */
  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
  }

/* Bottom right text */
.text-block {
    position: absolute;
    top: 80%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    background-color: black;
    color: white;
    opacity: 0.5;
    line-height: 5px; 
  }

  .content {
    display: block;
    position: absolute; /* Position the background text */
    bottom: 0; /* At the bottom. Use top:0 to append it to the top */
    background: rgb(0, 0, 0); /* Fallback color */
    background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
    color: #f1f1f1; /* Grey text */
    width: 100%; /* Full width */
    line-height: 35px;
    text-align: center;
  }

  .empty-box {
    display: block;
    background-color: transparent;
    width: 112px;
    height: 224px;
    border: 0px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    font-size:x-large; 
  }
  .empty-smallbox1 {
    display: block;
    background-color: transparent;
    width: 20px;
    height: 112px;
    border: 0px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    font-size:x-large; 
  }
  .empty-smallbox2 {
    display: block;
    background-color: transparent;
    width: 40px;
    height: 112px;
    border: 0px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    font-size:x-large; 
  }

.empty-smallbox3 {
    display: block;
    background-color: transparent;
    width: 40px;
    height: 280px;
    border: 0px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    font-size:x-large; 
  }
  .empty-smallbox4 {
    display: block;
    background-color: transparent;
    width: 49px;
    height: 280px;
    border: 0px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    font-size:x-large; 
  }
  .empty-smallbox5 {
    display: block;
    background-color: transparent;
    width: 130px;
    height: 25px;
    border: 0px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    font-size:x-large; 
  }
  .empty-smallbox6 {
    display: block;
    background-color: transparent;
    width: 20px;
    height: 20px;
    border: 0px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    font-size:x-large; 
  }
  .empty-smallbox7 {
    display: block;
    background-color: transparent;
    width: 40px;
    height: 20px;
    border: 0px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    font-size:x-large; 
  }

  .empty-smallbox8 {
    display: block;
    background-color: transparent;
    width: 180px;
    height: 30px;
    border: 0px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    font-size:x-large; 
  }
  .empty-smallbox9 {
    display: block;
    background-color: transparent;
    width: 20px;
    height: 180px;
    border: 0px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    font-size:x-large; 
  }
  .empty-smallbox10 {
    display: block;
    background-color: transparent;
    width: 80px;
    height: 20px;
    border: 0px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    font-size:x-large; 
  }



  * {box-sizing:border-box}



/* Slideshow container */
.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
  }
  
  /* Next & previous buttons */
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }

  .prev {
    left: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
  }
  
  /* Caption text */
  .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
  }
  
  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }
  
  /* The dots/bullets/indicators */
  .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  
  .active, .dot:hover {
    background-color: #717171;
  }
  
  /* Fading animation */
  .fade {
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }
  
  /* On smaller screens, decrease text size */
  @media only screen and (max-width: 224px) {
    .prev, .next,.text {font-size: 11px}
  }

  /* .row {
    display: flex;
    justify-content: space-between;
  } */

  .column {
    margin: 0px;
  }

  .generater {
    display: flex;
    justify-content: space-between;
    width: 80%;
  }

  .first-img,
  .last-img,
  .left-img {
    margin: 1px 15px;
    cursor: pointer;
  }

  .clicked-image {
    border: 4px solid rgb(0, 162, 255);
    transform: scale(1.05);
    transition: transform 0.3s ease;
  }

  .cat-img {
    width: 100%;
  }

  .img-container {
    display: flex;
    justify-content: space-between;
    width: 40%;
    margin-top: 10px;
  }
  .cat-main {
      margin-left: auto;
      margin-right: auto;
  }