@font-face {
    font-family: PPNeueMontreal;
    src: url("fonts/PPNeueMontreal-Book.otf") format("opentype");
}

@font-face {
    font-family: PPNeueMontreal;
    font-weight: bold;
    src: url("fonts/PPNeueMontreal-Medium.otf") format("opentype");
}


@font-face {
    font-family: PPNeueMontreal;
    font-style: italic;
    src: url("fonts/PPNeueMontreal-Italic.otf") format("opentype");
}

.header h2 {
   margin: 0px 0 10px 0;
}

strong {
   font-weight: medium;
}

.header {
   padding-top: 15px;
   padding-left: 15px;
   padding-bottom: 60px;
}

.header p {
   font-size: 16pt;
   margin:0;
   line-height: 1.2;
}

.header-row {
   border-top: solid 2px green;
/*   border-bottom:solid 2px green;*/
}


@media (max-width: 500px) {
   body {
      margin: 0;
      padding: 0;
      background-color: #E3FBDF;
      color: #1A680D;
      font-family: PPNeueMontreal, sans-serif;
      word-wrap: break-word;
      width: auto;
      font-size:16pt;
   }

   tr {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      column-gap:5px  ;
      border-bottom: solid 1px green;
      padding: 10px;
   }

   .header-row {
      border-top: none;
      border-bottom: solid 2px green;
   }

   th {
      opacity: 0;
      max-height: 0;
   }

   .row-content {
      display:grid;
      grid-template-columns: repeat(1, 1fr);
   }

   .row-content img {
      width:100%;
   }


   .row-content p {
      font-size:12pt;
   /*   padding-left:10px;*/
   }

   .plus-icon {
      display:inline-block;
      transition: all 0.3s ease-in;
      transform: rotate(0deg);
   }

   .x-icon {
      transform-origin: center;
      transition: all 0.3s ease-in;
      transform: rotate(45deg);
   }
}

@media (min-width: 500px){

   body {
      margin: 0;
      padding: 0;
      background-color: #E3FBDF;
      color: #1A680D;
      font-family: PPNeueMontreal, sans-serif;
      word-wrap: break-word;
      font-size:16pt;
   }


   tr {
      display: grid;
      grid-template-columns: 30% 20% 25% 15% 5%;
      column-gap:10px  ;
      border-bottom: solid 1px green;
      padding: 15px;
   }

   tr:hover {
      background-color: #CAFBC1;
      cursor:pointer;
   }

   tr.header-row:hover  {
      background-color: #E3FBDF;
      cursor:auto;
   }


   .row-content {
      display:grid;
      grid-template-columns: 30% 20% 25% 15% 5%;
      column-gap: 10px;
      padding:15px;
   }

   .row-content img {
      grid-column: 1;
      width:80%;
      image-orientation: 0deg;
   }


   .row-content p {
      grid-column: 2/-1;
      font-size:12pt;
      margin:auto 0;
   /*   padding-left:10px;*/
   }


   .plus-icon {
      text-align: center;
      transition: all 0.3s ease-in;
      transform: rotate(0deg);
   }

   .x-icon {
      transition: all 0.3s ease-in;
      transform: rotate(225deg);
   }
}

a {
   text-decoration: none;
   color: black;
}

a:visited {
   color: black;
}

a:hover {
   text-decoration: wavy underline;
}

table {
   width: 100vw;
   margin: 0;
   padding: 0;
}

th {
   text-align: left;
}

td {
/*   padding: 10px 10px 0px 10px;*/
}


.expanded-row-content {
   display: grid;
   grid-column: 1/-1;
   opacity: 100%;

   max-height: 500px;
   transition: all 0.6s ease-in;
}

.hide-row {
   opacity: 0;

   max-height: 0;
   transition: all 0.5s ease-out;
   overflow: hidden;
}