.awards-wrapper{
    max-height: 100%;
    height: 90%;
    max-height: -webkit-fill-available;
    width: 100vw;
    position: fixed;
    z-index: 20;
    pointer-events: none;
    display: grid;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}

.award-row{
  font-weight: 500;
}

.award-honours{
  padding-top: 10px;
  padding-bottom: 20px;
  font-size: 1.8em;
  font-weight: 800;
  text-align: center;
  background: linear-gradient(163deg, #f7e8cb 0%,#fce494 13%,#7d5b36 100%,#5b5228 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.awards-header-title {
  height: 16vh;
  position: absolute;
  top: 0;
  /* padding-left: 3vw; */
  display: grid;
  /* align-items: end; */
  font-size: 3em;
  width: 100%;
}
.awards-header-title h2 {
  align-self: end;
  text-transform: uppercase;
  justify-self: center;
  color:	gold; /*if no support for background-clip*/
	
	background: -webkit-linear-gradient(transparent, transparent),
             -webkit-linear-gradient(top, rgba(213,173,109,1) 0%, rgba(213,173,109,1) 26%, rgba(226,186,120,1) 35%, rgba(163,126,67,1) 45%, rgba(145,112,59,1) 61%, rgba(213,173,109,1) 100%);
	background: -o-linear-gradient(transparent, transparent);
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.award-holder{
   max-width: calc(95vw - 15px);
   font-size: 1.5em;
   margin-top: -5vh;
   max-height: 65vh;
   overflow-y: auto;
   overflow-x: hidden;
   pointer-events: auto;
   border: 16px double #D5AD6D;
   background-color: #301100;
background-image: url('../img/wood.jpg');
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}

.award-logo-row{
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.award-logo-row img{
  width: 45%;
}

/* SCROLLBAR */
.award-holder::-webkit-scrollbar {
  width: 10px;
}
.award-holder::-webkit-scrollbar-track {
  border-left: 1px #D5AD6D solid; 
}

.award-holder::-webkit-scrollbar-thumb {
  background: #D5AD6D; 
}

.award-holder::-webkit-scrollbar-thumb:hover {
  background: white; 
}

.award-holder::-webkit-scrollbar-button:single-button {
  background-image: url('../img/wood.jpg');
background-repeat:no-repeat;
background-size:cover;
background-position:center;
  display: block;
  border-style: solid;
  height: 13px;
  width: 16px;
}

/* Up */
.award-holder::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #D5AD6D transparent;
}

.award-holder::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  border-color: transparent transparent #D5AD6D transparent;
}
/* Down */
.award-holder::-webkit-scrollbar-button:single-button:vertical:increment {
  border-width: 8px 8px 0 8px;
  border-color: #D5AD6D transparent transparent transparent;
}

.award-holder::-webkit-scrollbar-button:vertical:single-button:increment:hover {
  border-color: #D5AD6D transparent transparent transparent;
}


table {
    /* border: 1px solid #dfd2c9; */
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    text-align: left;
  }

  .award-table p{
    color:	#D5AD6D;
  }

  .award-table p {
    background: linear-gradient(163deg, #f7e8cb 0%,#fce494 13%,#7d5b36 100%,#5b5228 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
  }
  

  td{
    border-bottom: #D5AD6D solid 1.5px;
  }
  

  th{
    border-top: #D5AD6D solid 3px;
    border-bottom: #D5AD6D solid 3px;
    /* text-align: center; */
  }

  th.heading-year, th.heading-result{
    width: 7.5%;
  }
  th.heading-result{
    width: 12.5%;
  }
  
  th.heading-award, th.heading-project, th.heading-category{
    width: 27%;
  }
  
  th,
  td {
    /* border: 1px solid #dfd2c9; */
    width: 35%;
    overflow: hidden;
    padding: 10px 10px;
    
  }


td.award-year, td.award-status{
    width: 15%;
}

td.award-title p, td.award-year p {
    /* --d:8px;  */
    /* padding: 8px; */
    /* background: linear-gradient(rgba(255,255,255,0.4) 0 0) left/var(--d) 100% no-repeat; */
    clip-path: polygon(var(--d) 3px,var(--d) 0,100% 0,100% 100%,var(--d) 100%,var(--d) calc(100% - 3px));
    transform: perspective(1000px) rotateY(0deg);
    /* transition: 0.3s,color 0.3s 0.3s,background-color 0.3s 0.3s; */
  }

 td.award-category p, td.award-status p{
    /* --d:14px; */
    /* padding: 8px; */
    clip-path: polygon(0 0,calc(100% - var(--d)) 0,calc(100% - var(--d)) 3px,calc(100% - var(--d)) calc(100% - 3px),calc(100% - var(--d)) 100%,0 100%); 
    transform: perspective(1000px) rotateY(0deg);
    /* transition: 0.4s,background-color 0.4s 0.4s; */
  }
  td.award-category p:hover, td.award-status:hover {
    clip-path: polygon(0 0,calc(100% - var(--d)) 0,100% 3px,100% calc(100% - 3px),calc(100% - var(--d)) 100%,0 100%); 
    transform: perspective(1000px) rotateY(-40deg);
    transition: 0.4s,clip-path 0.4s 0.4s,transform 0.4s 0.4s;
  }

  td.award-title p:hover, td.award-year p:hover {
      clip-path: polygon(0px 3px,var(--d) 0,100% 0,100% 100%,var(--d) 100%,0  calc(100% - 3px));
      transform: perspective(1000px) rotateY(40deg);
      transition: 0.3s,clip-path 0.3s 0.3s,transform 0.3s 0.3s;
    }


  .gold a, .silver a, .bronze a{
      text-decoration: none;
      color: #D5AD6D;
  }
  
  tr:hover{
    background-color: black;
    color: white;
  }
  
  .silver:hover a{
    color: silver;
  }

  .bronze:hover a{
    color: peru;
  }
    
    .gold:hover a{
       color: gold;
     }

    td.award-production p{
     /* --d:14px; */
     /* padding: 8px; */
     clip-path: polygon(0 0,100% 0,100% calc(100% - var(--d)),calc(100% - 3px) calc(100% - var(--d)),3px calc(100% - var(--d)) ,0 calc(100% - var(--d))); 
     transform: perspective(1000px) rotateX(0deg);
     transition: 0.4s,color 0.4s 0.4s,background-color 0.4s 0.4s;
    }
    
    td.award-production p:hover{
        color: rgba(0, 0, 0, 0.72);
        clip-path: polygon(0 0,100% 0,100% calc(100% - var(--d)),calc(100% - 3px) 100%,3px 100% ,0 calc(100% - var(--d)));
        transform: perspective(1000px) rotateX(40deg);
        transition: 0.4s,clip-path 0.4s 0.4s,transform 0.4s 0.4s;
    }
  .gold td.award-production p:hover a{
        color: rgba(0, 0, 0, 0.72);
    }
  .silver td.award-production p:hover a{
        color:white;
    }
  .bronze td.award-production p:hover a{
        color:black;
    }


    .heading-row{
   background-color: none;
   text-transform: uppercase;
    }
    
    th{
      /* --d: 14px; */
      background: linear-gradient(163deg, #f7e8cb 0%,#fce494 13%,#7d5b36 100%,#5b5228 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
      /* padding: 8px; */
      z-index: 2;
      top: 0; 
      
    }

  .gold p:hover{
    color: rgba(0, 0, 0, 0.72);
 background-color: gold;
  }
  .silver p:hover{
    color: white;;
 background-color: silver;
  }

  .bronze p:hover{
    color: rgba(0, 0, 0, 0.72);;
 background-color: peru;
  }

  @media(max-width: 1300px) {
    .award-holder {
      font-size: 2vw;
  }
}

  @media(max-width: 800px) {

    table {
      text-align: left;
    }

    .award-logo-row img{
      width: 80%;
    }
    
    .award-holder::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    .award-holder::-webkit-scrollbar-track {
      border-left: 2.5px #D5AD6D solid; 
    }
    
    .award-holder::-webkit-scrollbar-track {
      border-top: 2.5px #D5AD6D solid; 
    }
    .award-holder {
      font-size: 0.9em;
  }

  td p{
    /* --d:0px; */
  }

td, th {
    margin: 5px;
}

.award-holder{
  max-width: calc(94vw - 15px);
}
  }
  @media(max-width: 600px) {
.award-holder, table{
  width: 150% !important;
    overflow-x: auto;
}
  }