@font-face{
    font-family: Roboto-Bold;
    src: url('/static/fonts/roboto/Roboto-Bold.ttf'),
    url('/static/fonts/roboto/Roboto-Bold.ttf');
}
.title{ 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 100px;
    letter-spacing: -6px;
    font-weight: bolder;
}
.header {
    padding: 12px 16px;
    position: fixed;
    color: black;
    z-index: 1;

  }
  /* Page content */
  .content {
     padding: 16px;

  }

  /* The sticky class is added to the header with JS when it reaches its scroll position */
  .sticky {
    position: fixed;
    top: 0;
    width: 100%
  }

  /* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
  .sticky + .content {
    padding-top: 102px;
  }

  .images{
    position: relative;
    /* z-index: -5; */
  }
  .links {
    position: fixed;
    right: 0;
    top: 45%;
    width: 100%;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0px;
    color: black;
    font-weight: bold;

  }
  a {
    color: inherit; /* blue colors for links too */
    text-decoration: inherit; /* no underline */
  }

  img {
    width: 800px;
    height: auto;
  }
  .dropdown-links{
    display:inline;
  }
  .dropdown:hover>.dropdown-menu {
    display: block;
    /* scolor: pink; */
    
  }

  
  .dropdown>.dropdown-toggle:active {
    /*Without this, clicking will make it sticky*/
      pointer-events: none;
  }

  a:hover{
    text-decoration: none;
    color: pink;
  }

  .item-link:hover{

    color: pink;
  }

 .item-link{
   padding: 5px;
 }


 .homepage{
  padding: 8% 12px;


 }
 footer {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;

  text-align: center;
  padding: 3px;
  color: grey;

}

.cv-wrapper{
  text-align: center;
}

.cv{
  display: inline-block;
}

.pdf{
  position: absolute; 
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
iframe{
  
}

.cv-image{
  max-width: 400px !important;
  height: 30%;
  
}

.image-wrapper{
  text-align: left;
}

.cv-card-main{
  width: 15rem;
  border: none;
  text-align: left;
}
.cv-card-bio{
  width: 38rem;
  border: none;
  text-align: left;
}
.cv-card-works{
  width: 34rem;
  border: none;
  text-align: left;
}


.gallery {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-width: 33%;
  -moz-column-width: 33%;
  column-width: 33%; }
  .gallery .pics {
  -webkit-transition: all 350ms ease;
  transition: all 350ms ease; }
  .gallery .animation {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1); }
  
  @media (max-width: 450px) {
  .gallery {
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
  -webkit-column-width: 100%;
  -moz-column-width: 100%;
  column-width: 100%;
  }
  }
  
  @media (max-width: 400px) {
  .btn.filter {
  padding-left: 1.1rem;
  padding-right: 1.1rem;
  }
  }

  .email{
    display: inline-block;
    text-align: left;
  }

  .collection-wrapper{
    text-align: right;
  }
  
  .collection-title{
    display: inline-block;
  }

  .collection-img .collection-img-title {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
  }
  
  .collection-img:hover .collection-img-title {
    visibility: visible;
  }

  .works{
    white-space: nowrap;
    font-size: 90%;
  }

  .bio{
    overflow: visible;

    
   
  }
  .bio-font{
    
  }

  

  .img-link-container {
    position: relative;
    width: auto;
    
  }
  
  .img-link-image {
    opacity: 1;
    /* display: block; */

    transition: .5s ease;
    backface-visibility: hidden;
  }
  
  .img-link-middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    bottom: 0%;
    right: 2%; 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 50px;
 
    font-weight: bolder;
    
  }
  
  .img-link-container:hover .img-link-image {
    opacity: 0.3;
  }
  
  .img-link-container:hover .img-link-middle {
    opacity: 1;
  }
  
  .img-link-text {
   
    color: white;
    font-size: 30px;
    padding: 16px 32px;
    
    
  }


  .gallery-cover-container {

    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
}
.gallery-cover-item {
  display: inline-block;
  
}