@charset "UTF-8";
/* CSS Document */

@font-face {
   font-family: 'jrhandregular';
   src: url('jr!ha___-webfont.eot');
   src: url('jr!ha___-webfont.eot?#iefix') format('embedded-opentype'),
        url('jr!ha___-webfont.woff2') format('woff2'),
        url('jr!ha___-webfont.woff') format('woff'),
        url('jr!ha___-webfont.ttf') format('truetype'),
        url('jr!ha___-webfont.svg#jrhandregular') format('svg');
   font-weight: normal;
   font-style: normal;
}

body{
    background-color: rgb(207,10,44);
    background-image:url(wrapper_bg_cell.svg);
    margin:0 auto;
    
    /* This is what makes the background image rescale based
       on the container's size */
    background-size: cover;
  }
  

  .header{
      position: relative;
      margin-top: 0;
      width: 100%;
      z-index: 4;
      display: none;
  }

  .cell_header{
    position: relative;
   margin:0 auto;
    width: 100%;
    z-index: 4;
}

#countdown {
    position: relative;
    z-index: 5;
 top: 25px;
 } 
 
 h1 {
   font-family: 'Luckiest Guy', sans-serif;
   font-size: 2.5rem;
   color: rgb(207,10,44);
   text-align: center;
   margin: 5%;
   letter-spacing: 1px;
   line-height: 3rem;
 }
  
  #wrapper {
      position: relative;
      z-index: 3;
margin: -1000px auto;
      width: 100%;
  }

  #list_wrapper {
    position: relative;
    z-index: 3;
    width: 100%;

  }
  
  #ornaments {
      display: none;
  }
.home_button {
   position: absolute;
left: 1%;
margin-top: 875px;
  
}

.nice_button {
position: absolute;
left: 33%;
margin-top: 915px;

}

.naughty_button {
position: absolute;
right: 1%;
margin-top: 875px;

}

.home_button_hover {
position: absolute;
left: 1%;
margin-top: 875px;
display:none;
}

/* disiplay on hover home button*/
#home:hover .home_button_hover,
#home:active .home_button_hover {
     display:block;
}

.nice_button_hover {
position: absolute;
left: 33%;
margin-top: 915px;
display: none;
}

/* display on hover nice list button*/
#nice:hover .nice_button_hover,
#nice:active .nice_button_hover {
display:block;
}


.naughty_button_hover {
position: absolute;
right: 1%;
margin-top: 875px;
display: none;
}

/* display on hover naughty list button*/
#naughty:hover .naughty_button_hover,
#naughty:active .naughty_button_hover {
display:block;
}

#nice:hover .nice_button,
#home:hover .home_button,
#naughty:hover .naughty_button{
display:none;
}

/* main navigation animation*/
nav a img:hover {
-moz-transform: rotateY(720deg);
     -ms-transform: rotateY(720deg);
     -o-transform: rotateY(720deg);
     -webkit-transform: rotateY(720deg);
     transform: rotateY(720deg);
     -moz-transition: ease-out 3s;
     -ms-transition: ease-out 3s;
     -o-transition: ease-out 3s;
     -webkit-transition: ease-out 3s;
     transition: ease-out 3s;
}

#ornaments {
    display: none;
}

.menu-wrap {
    display: block;
}

#bigpic {
position: relative;
margin-top: 1050px;
width: 100%;
}

.home_thumb{
display: none;
}

.leftarrow {
   width: 12%;
position: absolute;
margin-top: -155px;
left: 1%;
z-index: 5;
}

.leftarrow:hover {
opacity: .75;
}


.rightarrow {
   width: 12%;
position: absolute;
margin-top: -155px;
right: 1%;
z-index: 5;
}

.rightarrow:hover {
opacity:.75;
}
.hohoho {
width: 75%;
position:absolute;
margin-top: 37px;
left: 12.5%;
}

p{
font-family:jrhandregular, sans-serif;
font-size: 1.5rem;
color: rgb(20,71,51);
text-align: left;
line-height: 2rem;
margin: 5%;
}

.writing {
position: relative;
margin-top: 155px;
padding-bottom: 5px;
}

#footer a:link {
color: white;
}

#footer a:hover,
#footer a:visited{
color: white;
opacity: .6;
}

.writing a:link,
.writing a:visited {
   color: rgb(207,10,44);
   text-decoration: none;
}
.writing a:hover{
    color: rgb(20,71,51);
    text-decoration: none;
    opacity: .5;
 }


#footer {
position: relative;
margin-top: 1000px;
background-color: rgb(207,10,44);
color: white;
width: 96%;
text-align: center;
font-family: helvetica, sans-serif;
font-size: 2rem;
padding: 2%;
z-index: 5;
display: none;
}

.menu-wrap {
    position: fixed;
    top: 0;
    right: 10px;
    z-index: 6;
}

.menu-wrap .toggler {
    position: absolute;
    top: 0;
    right: 10px;
    z-index: 15;
    cursor: pointer;
    width: 30px;
    height: 30px;
    opacity: 0;
}

.menu-wrap .hamburger {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 14;
    width: 40px;
    height: 40px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(207,10,44);
    padding: 1px;
}

/* Hamburger line */
.menu-wrap .hamburger > div {
    position: relative;
    width: 90%;
    height: 3px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

/* Top and bottom lines */
.menu-wrap .hamburger > div:before,
.menu-wrap .hamburger > div:after {
    content: '';
    position: absolute;
    z-index: 5;
    top: -10px;
    width: 90%;
    height: 3px;
    background: inherit;

}

/* Moves line down */
.menu-wrap .hamburger > div:after {
    top: 10px;
}

/* Toggler animate */
.menu-wrap .toggler:checked + .hamburger > div {
    transform: rotate(135deg);
}

/* Turn lines into X */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
    top: 0;
    transform: rotate(90deg);
}

/* Rotate on hover when checked */
.menu-wrap .toggler:checked:hover + .hamburger > div {
    transform: rotate(225deg);
}

/* Show menu */
.menu-wrap .toggler:checked ~ .menu {
    visibility: visible;
}

.menu-wrap .toggler:checked ~ .menu > div {
    transform: scale(1);
    transition-duration: var(--menu-speed);
}

.menu-wrap .toggler:checked ~ .menu > div > div {
    opacity: 1;
    transition: opacity 0.4s ease;
}
.menu-wrap .menu {
    position: fixed;
   margin: -450px -700px;
    width: 800px;
    height: 1200px;
    visibility: hidden;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.menu-wrap .menu > div {
    position: relative;
    top: 00px;
    right: -150px;
    background: black;
    opacity:.75;
    width: 400px;
    height: 400px;
    border-radius: 200px;
    display: inline;
    flex: none;
    transform: scale(0);
    transition: all 0.4s ease;
    z-index: 10;
    text-align: center;
    z-index: 10;

}

.menu-wrap .menu > div > div {
    text-align: center;
    opacity: 1;
    transition: opacity 0.4s ease;
    z-index: 10;
}

.menu-wrap .menu > div > div > ul > li {
    position:relative;
margin-left: 12.5%;
margin-top: 50px;
 list-style: none;
color:  white;
font-size: 1.5rem;
padding-top: 10px;
z-index: 11;
opacity: 1;
width: 75%;
}

.menu-wrap .menu > div > div > ul > li > a {
    position: relativee;
    line-height: 10px;
    font-family: Arial, Helvetica, sans-serif;
    color:white;
    text-decoration: none;
    transition: color 0.4s ease;
    opacity: 1;
    z-index: 12;
}

.menu-wrap .menu > div > div > ul > li > a:hover
.menu-wrap .menu > div > div > ul > li > a:active {
    color: rgb(207,10,44);
}


.list_pic {
    position: fixed;
    bottom:0;
    z-index: 2;
    width: 100%;
 }
 
 .list {
    position: absolute;
   left: 17.5%;
    width: 65%;
    margin-top: 1275px;
    z-index: 5;
    text-align: center;
 }
 
 .title_letter{
    width: 85%;
    text-align: center;
    margin-bottom: 5x;
 }
 
 .list_names {
    margin-bottom: 35x;
    text-align: center;
    font-size: 2rem;
 }
 
 .list_header {
    position: absolute;
    width: 75%;
    left: 12.5%;
 margin-bottom: 5x;
    z-index: 5;
    margin-top: 1050px;
 }
 
 .list_message {
    position: absolute;
    top: 9300px;
    left: 8.5%;
    width: 75%;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 30px;
    z-index: 5;
 }

 .form_intro {
    position:relative;
  margin-top: 950px;
  margin-left: 10%;
  width: 80%;
  font-size: 2rem;
  line-height: 2.5rem;
  text-align: center;
 }
 
 .thank_you{
    position: relative;
    left: 20px;
    font-size: 1.75rem;
 }
 
 form {
    width: 80%;
    margin: 0 auto;
    background-color: rgba(20,71,51,.8);
    border: 5px solid rgb(20,71,51);
 padding: 6px;
 }
 
 form p {
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    border: rgb(20,71,51);
    width: 90%;
 }
 
 input {
    font-size: 1rem;
    width: 18rem;
 }
 
 form textarea {
    width: 18rem;
 }

 .submit {
     width: 12rem;
     margin-left: 6%;
 }

 .reset {
     width: 12rem;
     margin-left: 6%;
 }