/* body */

@font-face {  font-family: "Proxima Nova Thin";  font-weight: 400;  font-style: normal;  
  font-display: swap;  
  /* unicode-range: U+000-5FF;   */
  src: local('Proxima Nova Thin'),       
url('fonts/proximanova-thin-webfont.woff2') format('woff2'),
  url('fonts/proximanova-thin-webfont.woff') format('woff'),
  url('fonts/ProximaNova-Thin.otf') format('otf'), 
  url('/fonts/ProximaNova-Thin.ttf') format('truetype')

  ;
}


/* 

@font-face {
  font-family: 'Proxima Nova';
  
  src: url('fonts/proximanova-thin-webfont.woff2') format('woff2'),
       url('fonts/proximanova-thin-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;

} */


body {
    margin: 0;
    margin-top: 2rem;
    font-family: "Proxima Nova Thin", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: rgb(100, 100, 100);
    font-weight: 400;
    letter-spacing: .02rem;
    line-height: 1.4rem;
    /* font-size: 12pt; */
  }

body b {
  font-weight: bold;
  color: black
}

  h1, h2, h3 {
    color: black;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: .01rem;
    /* color: rgb(147, 11, 11);  <-- this is quite nice  */
  }

  h1 {
    display: block;
    font-size: 1.5rem;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
  } 

  h3 {
    display: block;
    font-size: 1.12rem;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
  }

  hr {
    
      display: block;
      height: 1px;
      border: 0;
      border-top: 1px solid #ccc;
      margin: 1em 0;
      padding: 0;
  
}
select, input[type="button"] {
  background-color: white;
  color: rgb(100, 100, 100);
  border: 2px solid #a7a7a7; 
  padding: .5rem;
}

select:hover, input[type="button"]:hover {
  color: rgb(170, 170, 170);
}

input[type="text"]{
  padding: .5rem;
  border: 2px solid #a7a7a7;
  placeholder-color:rgb(183, 183, 183) 

}



    /* sidebar */

  .sidebar {
    margin: 0;
    padding: 0;
    width: 200px;
    /* background-color: #f1f1f1; */
    position: fixed;
    height: 100%;
    overflow: auto;
    z-index: 1;
  }

  .sidebar h3 {
    line-height: 0%; 
    padding: 16px;
    margin-bottom: 0px;
        


    /* percentage = percent of the text height */
  }

  .sidebar small {
    /* line-height: 100%; */
    line-break: auto;
    padding: 16px;
    display: inline-block; 
    margin-bottom: 0px;
    font-weight: normal;
    letter-spacing: 0px;
    letter-spacing: .04em;
    font-style: normal;
    font-size: 12px;
    color: #aaa;

}


    /* percentage = percent of the text height */
  

  .sidebar .menu {
    display: none;

  }
  
  .sidebar a {
    display: block;
    color: black;
    
    padding: 16px;
    text-decoration: none;
    padding-top: 8px;
    padding-bottom: 8px;
    font-weight: bold;
    letter-spacing: 0px;
    line-height: 1.4em;
    text-transform: none;
    letter-spacing: 0em;
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    display: block;

  }

  .sidebar hr {
    border: 1px dotted darkblue;
    align: left;
    width: 10%

  }
   
  .sidebar a.active {
    /* background-color: #04AA6D; */
    color: rgb(0, 0, 255);
  }
  
  .sidebar a:hover:not(.active) {
    background-color: #555;
    color: white;
  }
  
  div.content {
    /* margin-left: 200px; */
    padding: 1px 16px;
    height: 1000px;
    max-width: 800px;
    margin: auto;

  }

  content {

    position: absolute;
    z-index: 1;
    max-width: 60vw;
    max-height: 100vh;
    
    
}

img {
  max-width: 60vw;
  /* object-fit: contain; */

  /* height: auto; */
}



.iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

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

iframe {
  max-width: 100vw;
}
  
  @media screen and (max-width: 700px) {
    .sidebar {
      width: 100%;
      height: auto;
      position: relative;
    }
    .sidebar a {float: left;}
    div.content {margin-left: 0;}
    img {
      max-width: 80vw;
    }
  }
  
  @media screen and (max-width: 400px) {
    .sidebar .menu {
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      margin-top: .5rem;
      margin-right: .5rem;
      align: right;
      text-align: right;
      float: none;
      color:rgb(112, 112, 112)
    }
    .sidebar a {
      text-align: center;
      float: none;
      display: none;

    }

    img {
      max-width: 90vw;
    }
  }

/* end sidebar */

/* footer */

footer{
    z-index: 4;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    
    height: auto;
    width: 100vw;
    /* padding-top: 40px; */
    /* color: #f4f4f400; */
    /* border:#ff0000; */
    /* background-color: #fff;  fallback color if gradients are not supported */
    background-image: -webkit-linear-gradient(to top, #fff, #b5090900); /* For Chrome and Safari */
    background-image:    -moz-linear-gradient(to top, #fff, #b5090900); /* For old Fx (3.6 to 15) */
    background-image:     -ms-linear-gradient(to top, #fff, #b5090900); /* For pre-releases of IE 10*/
    background-image:      -o-linear-gradient(to top, #fff, #b5090900); /* For old Opera (11.1 to 12.0) */
    background-image:         linear-gradient(to top, #fff 0%, #fff 40%, #ffffff00 100% ); /* Standard syntax; must be last */
}

.footer-content{
    display: flex;

    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    
    /* border-width: 0; */
  }

/* .footer-content h3{
    font-size: 2.1rem;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 3rem;
}

.footer-content p{
    max-width: 500px;
    margin: 10px auto;
    line-height: 28px;
    font-size: 14px;
    color: #cacdd2;
} */

.socials{
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: .5rem 0 .5rem 0;
    
    
}
.socials li{
    margin: 0 10px;
}
.socials a{
    text-decoration: none;
    color: black;
    /* border: 1.1px solid white; */
    /* padding: 5px; */
    border-radius: 50%;
}
.socials a i{
    font-size: 1.1rem;
    width: 20px;
    transition: color .4s ease;
}
.socials a:hover i{
    color: aqua;
}

.indented {
  margin-left: 2rem;
}