@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700,800,900");

:root{
    --base-color: #363636;
    --base-width: 1100px;
    --secondary-color: #478fcc;
    --contrast-color: #FFFFFF;
    --shade-color: #F2F2F2;
    --gray: #D2D2D2;
    --border-color: #cccccc;
    --dark-border: #CCCCCC;
    --muted: #BBBBBB;
    --delete-color: #a30000;
    --delete-contrast: yellow;
    --saved: #107c41;
  }

  *, *:before, *:after {
    box-sizing: border-box;
  }  

body {
    background: #4a4a4a;
    font-family: "Roboto", Helvetica, sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    position: relative;
    z-index: 1;
}

p {
    font-size: 1em;
    line-height: 1.3em;
}
a{
    color:rgba(14, 89, 181, 1);
}
a:visited{
    color:rgba(14, 89, 181, 1);
}

audio                  {display:block;padding:.25em;border-radius:0rem;}
.audio                 {list-style:none;margin:0;padding:0;}
.audio li              {display:flex;}
.audio li.list         {border-bottom: 1px solid #006331;margin:0;padding:0;}
.audio li div h3       {background: #cedfd1;border-top: 1px solid #006331;border-bottom: 1px solid #006331;color: #343e34;font-size:1em;margin:0;padding:.6em .5em;}
.audio li div span     {display:block;font-size:1em;margin:0;padding:.8em .5em;}
.audio li div.flex     {flex:1;}
.audio li div.center   {text-align:center;}

.audio_listing         {list-style:none;margin:0;padding:0 !important;}
.audio_listing li      {background:#F2F2F2;display:flex;padding:0 !important;}
.audio listing li.player {padding:0;background:yellow;}
.audio_listing li div  {border-bottom:1px solid #CCC;padding: 0;}
.audio_listing li audio {border-radius:0rem;display:block;margin:0;padding:0;width:100%;}

.content {
    background: #FFFFFF;
    margin: 0 auto;
    width: var(--base-width);
    position: relative;
}

.content div.two-column{
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-gap: 2em;
}

.content video{
    display:block;
    margin: 0;
}

.side-content img {
    margin-top: 1.5em;
    width:100%;
}

.full-background{
    background: #363636;
}
.full-image{background:orange;
    margin: 0;
    padding: 0;
}
.full-image img {
    display:block;
}

.content-navigation{
    background: #363636;
}

.secondary {
    list-style:none;
    margin: 0;
    overflow:hidden;
    padding: 0;
}
.secondary li {
    float: left;
    padding: 1em .5em 1em .5em;
}
.secondary li:first-child{
    padding-left: 1em;
}
.secondary li a {
    background: #2C2C2C;
    color: #FFF1BE;
    display: block;
    padding: .5em 3em;
    text-decoration:none;
}
.secondary li a:hover {
    background: #676767;
    color: #FFFFFF;
}
.secondary li a.chosen {
    background: #000000;
    color: #FFF1BE;
}

.slidercontainer {
    background: #363636;
    padding: 0 1.5em 1em 1.5em;
    text-align: center;
  }
  .slider {
    margin: 0;
  }
  #custom-handle {
    width: 12em;
    height: 2.5em;
    top: 20%;
    margin-top: -0.8em;
    text-align: center;
    line-height: 1.6em;
    background:#000000;
    border: 1px solid #000000;
    color: #FFF1BE;
    padding: .5em 1em;
  }
  .ui-slider-horizontal{
      height: 1.8em;
      background: #2C2C2C;
      border: 1px solid #2C2C2C !important;
      width:85%;
  }



.year-navigation{
    background: #363636;
    padding: 0 1em 1em 1em;
}
.year-navigation ul {
    list-style:none;
    margin: 0;
    padding: 0;
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(6em,1fr));
    grid-gap:.5em;
}
.year-navigation ul li a {
    background: #2C2C2C;
    color: #FFF1BE;
    display:block;
    padding: .5em 1em;
    text-align:center;
    text-decoration:none;
}
.year-navigation ul li a:hover {
    background: #676767;
    color: #FFFFFF;
}
.year-navigation ul li a.chosen{
    background: #000000;
    color: #FFF1BE;
}

.content div.main-content{
    padding-bottom: 2em;
}
.main-content a {
    color:rgba(14, 89, 181, 1);
    text-decoration:underline;
}
.main-content h1 {
    font-size: 1.7em;
    margin: 0;
    padding: .5em 1em .15em 0;
}
.main-content h1.editor {
    font-size: 1.5em;
    margin: 0;
    padding: .5em 1em 0 0;
}
.main-content h2 {
    font-size: .9em;
    font-weight: 300;
    margin: 0;
    padding-bottom: .15em;
    text-transform: uppercase;
}
.main-content h3 {
    font-size: 1em;
    font-weight: 500;
    margin: 0;
}
.main-content img.right{
    float:right;
    padding-left: 1em;
    padding-bottom: .75em;
}
img.rightsmall{
    float:right;
    max-width: 250px;
    padding-left: 1em;
    padding-bottom: .75em;
}
.main-content img.full {
    width: 100%;
}
.main-content p{
    padding-right: 2.5em;
    line-height: 1.5em;
}
.main-content p.image{
    padding-right: 0;
}
.main-content p content {
    display: block;
    background: #FFF1BE;
}
.main-content p.center{
    text-align:center;
}
.main-content div.image {
    float:right;
    margin: 0 0 1em 1em;
    padding: 0;
    background: #FFF1BE;
    width: 350px;
}
.main-content div.image img {
    width: 100%;
}
.main-content div.image p {
    padding: .5em 1em 0 1em;
    font-size: .9em;
}
.main-content ul{
    margin: 0;
    padding: 0 8em 0 4em;
}
.main-content ul li {
    line-height: 1.4em;
    padding-bottom: 1em;
}
.main-content ul ul {
    padding: 0 0 0 4em;
}
.main-content ol{
    margin: 0;
    padding: 0 8em 0 4em;
}
.main-content ol li {
    line-height: 1.4em;
    padding-bottom: 1em;
}
.main-content ol li:last-child{
    padding-bottom: .5em;
}

.guestbook{
    margin: 0 0 4em 0 !important;
    padding: 0 !important;
    list-style:none;
}
.guestbook li {
    padding: 0 !important;
    line-height: 1.3em !important;
}
.guestbook li:first-child{
    font-weight: bold;
}

.opening {
    height: 730px;
    position: relative;
}
.opening ul {
    list-style:none;
    margin: 0;
    padding: 0;
}
.opening ul li:nth-child(n+2){
    display:none;
}
.opening img {
    display:block;
    height: 100%;
    width: 100%;
}
.opening dl {
    width: 25em;
}
.opening dl.version01{
    margin: -400px 0 0 150px;
}
.opening dl.version02{
    margin: -670px 0 0 635px;
}
.opening dl.version03{
    margin: -450px 0 0 435px;
}
.opening dl dt {
    margin: 0;
    font-size: 3em;
    font-weight: 900;
    text-align:center;
}
.opening dl dd {
    margin: 0;
    font-size: 2em;
    font-weight: 300;
    text-align:center;
}

.columns{
    background: #363636;
    /* background: #FFF1BE; */
    font-size: 1em;
    font-weight: 300;
    margin: 0;
    padding: 1em 1em 1em 0;
    list-style:none;
}
.columns.no-top{
    padding-top: 0em !important;
}
.columns li {
    margin: 0;
    padding: 0;
}
.columns li.hide {
    display:none;
}
.columns li.title {
    color: #FFF1BE;
    font-weight: 700;
    padding: 1em .5em .5em 1em;
}
.columns li a {
    color: #FFF1BE;
    display:block;
    font-size: .9em;
    padding: .5em .5em .5em 1em;
    text-decoration: none;
}
.columns li a:hover {
    background: #FFFFFF;
    color: #363636;
}
.columns li a.chosen{
    /* background: #4a4a4a ; */
    background: #FFF1BE;
    color: #363636;
}
.columns li a div {
    font-size: .8rem;
}

.pquote{
    background: #FFF1BE;
    font-size: 1em;
    font-weight: 500;
    padding: 1em 1em;
}
.pquote blockquote{
    margin: 0;
}
.pquote blockquote h1{
    margin: 0;
    padding: .5em 0 0 0;
}
.pquote blockquote p{
    line-height: 1.5em;
    padding-right: 1em;
}
.pquote blockquote p.by{
    font-size: .9em;
    font-style: italic;
    font-weight: 700;
}
.pquote blockquote ul {
    margin: 0;
    padding: .5em 0 0 0;
    list-style:none;
}

.inline{
    float:right;
    font-size: 1.1em;
    font-weight: 400;
    margin-left: 1.5em;
    margin-bottom: 1em;
    padding-left: 1.5em;
    width: 30%;
}

.top-margin-2{
    margin-top: 1.6em;
}

.relative                    {position: relative;overflow:hidden;z-index:1;}
.relative:hover .overlay     {display:block;overflow:hidden;height:100%;left:0;opacity:0.75;padding:1em;top:0;text-align:center;width:100%;}

.viewer {
    margin-top: 2em;
}
.viewer img {
    width: 90%;
}

.absolute                    {position: absolute;z-index:1;}
	
.overlay                     {background: #F2F2F2;display:none;width:0;height:0;z-index:5;}
.overlay a                   {display:block;font-size:.8em;height:100%;justify-content:center;text-decoration:none;text-transform:uppercase;width:100%;}
.overlay a p                 {background: #FFFFFF;border-top: 1px solid #363636;border-bottom: 1px solid #363636;color:#363636;font-weight:900;line-height: 1.6em;margin: 0;padding:3em .25em;}
.overlay a p i {padding-left: 1em;}


/******/

.wrapper {
    display:block;
    margin: 0 auto;
    padding: 0;
    position:relative;
    min-height: 100vh;
}
header{
    background: #363636;
    display:block;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}
header h1{
    color: #FFFFFF;
    display:flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6em;
    font-weight: 900;
    height: 60px;
    margin: 0;
    padding: .5em 0;
    text-align:center;
}
header h1 span {
    display:block;
    font-weight: 100;
    padding-left: 1em;
}
header label {
    display:none;
}
.header-wrapper{
    margin: 0 auto;
    width: var(--base-width);
}

.divider {
    background: rgb(255,229,127);
    background: linear-gradient(90deg, rgba(255,229,127,1) 0%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 100%);
    display: block;
    height: .75em;
    margin: 1.5em 0;
}

footer{
    background: #363636;
    display:block;
    margin: 0;
    padding: 0;
    width: 100%;
}
footer p{
    color: #FFFFFF;
    font-size: .8em;
    font-weight: 300;
    margin: 0 auto;
    padding: 2em 0 2em 0;
    text-align:center;
}
.footer-wrapper{
    margin: 0 auto;
    width: var(--base-width);
}

.navigation{
    background: #ffffff;
    width: var(--base-width);
    margin: 0 auto;
    display:block;
}
.toggle{
    display:none;
}
.navigation label{
    display:none;
}
.navigation ul {
    font-size: 1em;
    margin: 0;
    padding: 0;
    overflow:hidden;
    list-style:none;
}
.navigation ul li {
    float: left;
}
.navigation ul li.empty{
    color: #777;
    padding: .75em 1.25em;
}
.navigation ul li.right{
    float: right;
    overflow:hidden;
}
.navigation ul li.right label {
    float:left;
    font-weight:700;
    display:block;
    padding:.75em .75em;
    text-align:right;
}
.navigation ul li a{
    color:  rgba(14, 89, 181, 1);
    display: block;
    font-size: 1em;
    padding: 1.25em 1.5em;
    text-decoration: none;
}
.navigation ul li.new a{
    background: var(--saved);
    color: var(--contrast-color);
}
.navigation ul li.chosen a{
    background: var(--base-color);
    color: #FFF1BE;
}
.navigation ul li.hide{
    display:none;
}
.navigation ul li a:hover{
    background: #9b9b9b;
    color: #FFF;
}
.navigation ul li.chosen a:hover{
    background: var(--base-color);
    color: var(--contrast-color);
}
.navigation select
{
    border:none;
    float:right;
    font-size:1em;
    padding: .75em .25em;
}

.search-content{
    background: #363636;
    color: #FFF1BE;
    margin: 0;
    padding: 1.5em 0 1.5em 0;
}
.search-content form.editor {
    margin: 0 !important;
}
.search-content form.editor a {
    background: #FFF1BE;
    color: #363636;
    margin-right: 1em;
}
.search-content form.editor ul li {
    padding-bottom: 0;
}

.result-content{
    min-height: 50vh;
    padding: 1em;
}
.result-content ul {
    list-style:none;
    margin: 0;
    overflow:hidden;
    padding: 0;
}
.result-content ul li.count {
    background: #535353;
    color: #FFFFFF;
    padding: .75em .5em;
}
.result-content ul li.title {
    display: flex;
}
.result-content ul li.title div {
    background: #363636;
    color: #FFF1BE;
    font-weight: bold;
    padding: .75em.5em;
}
.result-content ul li a {
    border-bottom: 1px solid #DDDDDD;
    color: #000000;
    display:flex;
    font-size: .9em;
    padding: .75em .5em;
    text-decoration:none;
}
.result-content ul li a div {
    margin: 0;
    padding: 0;
}
.result-content ul li a:hover {
    background: #FFF1BE;
}
.result-content ul li.empty {
    padding: 1.5em .5em;
    border-bottom: 1px solid #DDDDDD;
}
#checkbox_toggle{
    display:none;
}


form.editor{
    margin: 1.5em 1em 0 0;
    position: relative;
    overflow:hidden;
}

form.editor ul {box-sizing:border-box;font-weight:.9em;list-style:none;margin:0;padding:0;}
form.editor ul li {display:flex;align-items:center;padding-bottom:.5em;}
form.editor ul li.empty {font-size:.9em;padding:.5em 1em;text-align:center;}
form.editor ul li.empty div {text-align:center;}
form.editor ul li label {box-sizing:border-box;font-size:.9em;font-weight:700;padding:.5em 0 .5em 1em;}
form.editor ul li label.entrants {text-align:left;}
form.editor ul li label.heading {color:var(--secondary-color);font-weight:500;padding:0 .3em;}
form.editor ul li input {border:1px solid var(--border-color);box-sizing:border-box;font-size:.9em;padding:.5em;}
form.editor ul li input.center {text-align:center;}
form.editor ul li input[type=radio] {border:none;}
form.editor ul li input[type=checkbox] {border:none;}
form.editor ul li input[type=file] {font-size:.8em;}
form.editor ul li input.score {padding:.5em .3em;}
form.editor ul li input.total {font-weight:700;width:3em;}
form.editor ul li select {border:1px solid var(--border-color);box-sizing:border-box;font-size:.9em;padding:.5em;}
form.editor ul li textarea {border:1px solid var(--border-color);box-sizing:border-box;font-size: 1em;font-family:Roboto,Arial,sans-serif;padding:.5em;}
form.editor ul li div.radio {display:flex;align-items:center;}
form.editor ul li div.radio label {font-weight:normal;padding-right: 1.5em;padding-left: .25em;}
form.editor ul li a {background:#363636;color:#FFFFFF;box-sizing:border-box;display:block;font-size:.9em;margin-left:auto;padding:.5em .5em;text-align:center;text-decoration:none;}
form.editor ul li a:hover {background:rgb(255,229,127);color: #000000;}

.grid-1 {width:5%;}
.grid-2 {width:10%;}
.grid-3 {width:15%;}
.grid-4 {width:20%;}
.grid-5 {width:25%;}
.grid-6 {width:30%;}
.grid-7 {width:35%;}
.grid-8 {width:40%;}
.grid-9 {width:45%;}
.grid-10 {width:50%;}
.grid-11 {width:55%;}
.grid-12 {width:60%;}
.grid-13 {width:65%;}
.grid-14 {width:70%;}
.grid-15 {width:75%;}
.grid-16 {width:80%;}
.grid-17 {width:85%;}
.grid-18 {width:90%;}
.grid-19 {width:95%;}
.grid-20 {width:100%;}

.grid-gitter {margin-right: 5%;}

.row-1 {height:2.5em;}
.row-2 {height:5em;}
.row-3 {height:7.5em;}
.row-4 {height:10em;}
.row-5 {height:12.5em;}

.gallery-content {
    padding: 1em 2em 2em 0;
}
.gallery-content h1{
    font-size: 1.6em;
    font-weight: 900;
    margin: 0;
    padding: 0;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem,  1fr));
    grid-auto-rows: 1fr;
    grid-gap: .6em;
    list-style:none;
    padding: 0 !important;
}
.gallery:before {
    content: '';
    width: 0;
    padding-bottom: 100%;
    grid-row: 1 / 1;
    grid-column: 1 / 1;
}
.gallery > *:first-child{
    grid-row: 1 / 1;
    grid-column: 1 / 1;
}
.gallery ul li {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    line-height: 0 !important;
    width:100%;
}
.gallery li img {
    width: 100%;
    height: 100%;
    max-height: 186px;
    object-fit: cover;
}

@media screen and (max-width: 600px) {

    .wrapper {
        width: 100%;
    }

    #checkbox_toggle:checked ~ .navigation{
        display: block;
    }

    header h1{
        font-size: 1.3em;
    }

    header label{
        align-items: center;
        cursor: pointer;
        justify-content: center;
        display: flex;
        font-size: 24px;
        height: 60px;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 60px;
    }

    footer{
        width: 100%;
    }

    .navigation{
        background: rgba(245, 245, 245, 0.95);
        display: none;
        margin: 0 auto;
        padding: 0;
        position: absolute;
        top: 0px;
        left: 0px;
        width:100%;
        z-index: 10;
    }
    .navigation div.toggle{
        display: block;
        overflow:hidden;
        position: relative;
    }
    .toggle label {
        align-items: center;
        color: rgba(6, 34, 69,1 );
        cursor: pointer;
        justify-content: center;
        display: flex;
        float: left;
        font-size: 24px;
        height: 60px;
        position: absolute;
        width: 60px;
    }
    .toggle h1 {
        margin: 0;
        padding: 0;
        display:flex;
        align-items: center;
        justify-content: center;
        font-size: 20.75px;
        font-weight: bold;
        height: 60px;
        margin: 0;
        text-align:center;                
    }
    .navigation ul {
        margin: 0;
        padding: 0;
        list-style:none;
    }
    .navigation ul li {
        display:block;
        float:none;
        border-bottom: 1px solid #CCC ;
    }
    .navigation ul li.right{
        float:none;
    }
    .navigation ul li:first-child{
        border-top: 1px solid #CCC;
    }
    .navigation ul li a{
        color: rgba(6, 34, 69,1);
        display: block;
        font-size: 24px;
        padding: 1.75em .75em;
        text-decoration: none;
        transition: background-color .5s;
    }
    .navigation ul li a:hover{
        background: rgba(14, 89, 181, 1);
        color: #FFF;
    }

    .to-do{
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 1em;
    }

}


.orange {background: orange;}
.lime {background: green;}
.cyan {background: cyan;}
.yellow {background: yellow;}


/* Style the Image Used to Trigger the Modal */

#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
  }
  
  #myImg:hover {opacity: 0.7;}
  
  /* The Modal (background) */
  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  }
  
  /* Modal Content (Image) */
  .modal-content {
    margin:  0 auto;
    display: block;
    max-width: 1024px;
    max-height: 700px;
  }
  .modal-content:hover{
      cursor:pointer;
  }
  
  /* Caption of Modal Image (Image Text) - Same Width as the Image */
  .caption {
     margin: auto;
    display: block;
    width: 80%;
    max-width: 1024px;
    text-align: center;
    color: #ccc;
    padding: 0;
  }
  .caption ul {
    align-items:center; 
    justify-content: center; 
    box-sizing: border-box;
    list-style:none;
    margin: 0;
    overflow:hidden;
    padding: 0;
  }
  .caption ul li{
      float: left;
      font-size: 1em;
      font-weight: 500;
      text-align:center;
      padding: 1em;
      width:90%;
  }
  .caption ul li:first-child {
      float:left;
      font-size: 1.8em;
      font-weight: 700;
      padding: .25em;
      width: 5%;
  }
  .caption ul li:last-child{
      float:right;
      font-size: 1.8em;
      font-weight: 700;      
      padding: .25em;
      width: 5%;
  }
  
  /* Add Animation - Zoom in the Modal */
  .modal-content, #caption {
    animation-name: zoom;
    animation-duration: 0.6s;
  }
  
  @keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
  }
  
  /* The Close Button */
  .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }
  .left:hover{
    cursor: pointer;
    color: #FFF1BE;
  }
  .right:hover{
    cursor: pointer;
    color: #FFF1BE;
  }
  
  .close:hover,
  .close:focus {
    color: #FFF1BE;
    text-decoration: none;
    cursor: pointer;
  }

  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 700px){
    .modal-content {
      width: 100%;
    }
  }