.msg {
    width:100%;
    font-size: 140%;
    text-align: center;
}

.left-pointing-triangle::after {
  content: "\25C0 \FE0E";
}
.right-pointing-triangle::after {
  content: "\25B6 \FE0E";
}

body {
    max-width:1000px;
    margin: 1em auto 1em auto;
    padding: 3em;
    background-color:black;
    color:white;
}

#main {

    width:80%;
    float:left;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    
}

h1 {
    font-size:4.5vmin;
    text-align: center;
}

.nav {
    font-family:"Cambria Math",AppleColorEmoji;
    font-size:12vmin;
    cursor: pointer;
    float:left;
    /* margin-top: 2em; */
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */    
}

.nav:hover {
    color:#272670;
}
    
.navdiv {
    float:left;
    width:10%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#thumbnails {
    clear:both;
    width:99%;
    /* height:80px; */

    overflow: hidden;
}

.thumbnail {
    max-height:80px;
    filter: grayscale(100%);
    max-width: 100%;    
}

#thumbnails {
    margin: 0.5em 0;
}

.tndiv {
    float: left;
    width: 10%;
    text-align: center;
    margin: 2px;
}

.selected {
    
    filter:none;
}

#slide {

    max-width: 80%;
    max-height: 600px;     
}

#main img {
    display:block;
    margin:auto;
}



.clear {
    clear:both;
}

label {
    float:left;
    font-size:4vmin;
}

.lbl {
    padding-right:0.5em;
}

.padleft {
    padding-left:1em;
}

/* switch code from https://www.w3schools.com/howto/howto_css_switch.asp   */

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  /*
  width: 60px;
  height: 34px;
  */
  width: 13vmin;
  height: 7vmin;
  
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
/*
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
*/
  height: 5vmin;
  width: 5vmin;
  left: 1vmin;
  bottom: 1vmin;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 3vmin;
}

.slider.round:before {
  border-radius: 50%;
}





/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 1000px) {
  #holder {
      width: 100%;
  }
  
    body {
        max-width:90%;
        margin: 1em auto 1em auto;
        padding: 3em;
    }  
}


/* Use a media query to add a breakpoint at 800px: */
@media screen and (min-width: 1001px) {
  #holder {
      width: 100%;
      height:600px;
  }
  
    body {
        max-width:800px;
    }  
    
    label {
        font-size:3.5vmin;
    }    
        
    
    /* The switch - the box around the slider */
    .switch {
      width: 7vmin;
      height: 4vmin;
    }
    
    /* Hide default HTML checkbox */
    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .slider:before {
      height: 3vmin;
      width: 3vmin;
      left: 0.5vmin;
      bottom: 0.5vmin;
    }    
}

/*
@media screen and (max-width: 1000px) {
  #holder {
      height:605px;

  }
}

@media screen and (max-width: 700px) {
  #holder {
      height:500px;

  }
}

@media screen and (max-width: 600px) {
  #holder {
      height:420px;

  }
}
*/

@media screen and (max-width: 565px) {
  .tndiv {
      width: 9%;

  }
  
  /*
  #holder {
      height:380px;

  }  
  */
  
}

@media screen and (max-width: 0px) {
  #holder {
      height:224px;

  }
}



/*

@media screen and (max-width: 321px) {
  #holder {
      height:224px;

  }
}

@media screen and (max-width: 565px) {
  #holder {
      height:400px;

  }
}

@media screen and (max-width: 601px) {
  #holder {
      height:420px;

  }
}

@media screen and (max-width: 780px) {
  #holder {
      height:540px;

  }
}

*/