* {
    font-family: Verdana;
    box-sizing: border-box;
}
body{
    background-color: #a8a8a8;
}
.big{
    margin: 0 auto 0 auto;
    font-size: 16pt;
    padding: 0;
    width: calc(100% - 60px);
    p{
        padding: 0 1em 0 1em;
        margin-right: 1em;
    }
    img{
        max-width: 100%;
        padding: 0;
        box-shadow: 5px 5px 5px #5a5a5a;
    }
}
div#scared{
  position: relative;
  max-width: min(800px, 100%);
  margin-left: auto;
  margin-right: auto;
  background-color: #d3d3d3;
  padding: 1em;
  h2{text-align: center;}
  box-shadow: 5px 5px 5px #5a5a5a;
  img{
    max-width: 100%;
    padding: 0;
  }
  p {
    position: relative;
  }
}
.main{
    margin: 2em auto 2em auto;
    padding: 0;
    max-width: 1920px;
    width: calc(100% - 60px);
    background-color: #d3d3d3;
    border: solid 1px #888;
    box-shadow: 5px 5px 5px #666;
    li{padding-right: 1em;}

    div.jr-right{
      max-width: 864px;
      flex-shrink: 3;
    }
    div.jr-left{
      max-width: 700px;
      flex-shrink: 1;
    }
    img{
        max-width: 100%;
        padding: 0 1em 1em 1em;
    }
    p{
        padding: 0 1em 0 1em;
        margin-right: 1em;
    }
    h1{
        padding-left: 4pt;
    }
    h2{
        padding-left: 1em;
    }
    h3{
        padding-left: 1em;
    }
}
.left{
    float: left;
}
.right{
    float: right;
}
.left{
  float: left;
}
.clear-both{
    clear: both;
}
#title-header{
    position: absolute;
    top: 4vh;
    left: 54px;
    h1{
        margin: 0;
        padding: 0;
        font-size: 4em;
    }
}
#title-caption{
    position: absolute;
    top: 13vh;
    left: 64px;
    padding: inherit;
    width: 45vw;
}
#Permit{
    width: 23vw;
}
#col-left{
  flex-basis: 70%;
}
#col-right{
  flex-basis: 30%;
}
img#YWB{
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 292px;
  z-index: 0;
  opacity: .3;
}
img#col-floor{
  max-width: 50%;
  box-shadow: none;
  background-color: inherit;
  h2{padding-bottom: 1em;}
}
img#summit-wall{
  max-width: 750px;
}
img#step-on-me{
  max-width: 70%;
  float: right;
}
img[id*=notch-shot] {
  max-height: 90vh;
}
figure{
    background-color: white;
    margin-bottom: 1em;
    box-shadow: 5px 5px 5px #666;
    padding: 1em;
    img{
        /* padding: 1em; */
    }
    figcaption{
        padding: 0 1em 1em 1em;
    }
    h2{
        padding-top: 6pt;
        margin: 0;
        text-align: center;
    }
}
figure#summit-wall{
  max-width: 1288px;
  background-color: #d3d3d3;
}
div#summit-wall{
  align-items: center;
}
.flex-container{
    display: flex;
}
.justify-content-evenly{
  justify-content: space-evenly;
}
.align-items-center{
  align-items: center;
}
.flex-left, .flex-right{
    width: 45%;
    >img{
        padding: 1em;
    }
}
#Permit{
    width: 28%;
    img{
        padding-left: 3em;
        padding-right: 3em;
    }
    /* padding-left: 2em;
    padding-right: 2em; */
}
#Bearfoot{
    width: 72%;
}
._70{
  width: 70%;
}
.right{
  float: right;
}
.center-me{
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#main-tweak{
  background-color: #a8a8a8;
  box-shadow: none;
  border: none;
  img {
    box-shadow: 5px 5px 5px #5a5a5a;
    padding: 0;
  }
  .tighten-caption{
    width: max(100%, 50vw);
    margin-left: auto;
    margin-right: auto;
  }
}
#big-tweak{
  width: 80vw;
}

figure#downclimb-from-false{
  display: flex;
  flex-direction: column;
}

@media (max-width: 2120px){
  #title-caption{
      position: static;
      width: 100%;
  }
}
@media (max-width: 1400px){
  #title-header{
    top: 0;
    h1{font-size: 3em;} 
  }
  .big-caption{
    font-size: 12pt;
  }
  div.flex-container{
    flex-direction: column;
    align-items: center;
  }
  .flex-left, .flex-right{
    width: 80%;
    min-width: min(650px, 100%)
  }
  div.jr-left{
    width: min(1020px, 100%);
  }
  #Bearfoot{
    min-width: min(1035px, 100%);
  }
  #Permit{
    min-width: min(400px, 100%);
  }
  #col-bivy{
      max-width: min(100%, 400px);
      float: left;
  }
  img#col-floor{
    margin: 0;
    float: left;
    max-width: 400px;
  }
  .right, .left{
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: min(880px, 100%);
  }
}
@media (max-width: 1000px){
  #title-header{
    h1{font-size: 2em;}
    top: 1em;
  }
}
@media (max-width:850px){
  #col-bivy{display: block;}
  #col-bivy{
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
  img#step-on-me{
    max-width: 100%;
    float: none;
  }
}
@media (max-width: 574px){
  .big, .main{
    max-width: 100%;
    width: 100%;
  }
  #title-header{
    h1{
      font-size: 16pt;
    }
  }
  cite{
    font-size: 6pt;
  }  
}
@media (max-width: 375px){
  #title-header{
    h1{
      font-size: 1em;
    }
  }
}