/* Add a black background color to the top navigation */
.topnav {
        overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: right;
    color: #ffffff;
    text-align: center;
    padding: 20px 20px;
    text-decoration: none;
    font-size: 15px;
    font-family: sans-serif;
    /*dont know how to change what font the type is?*/
}

/* Change the color of links on hover */
.topnav a:hover {
    opacity: 0.4;
}

/* Add a color to the active/current link */
.topnav a.active {
    color: #B91150;
}

a, a:hover{
  color:white;
  text-decoration: none;
}

.hiddenbox{
height: 35px;
  width: 35px;
  position:absolute;
  margin-top:-15px; 
  margin-left:-15px;
    top: 50%;
    z-index: 999;
}

.dots{
height: 8px;
  width: 8px;
  background-color: #ffffff;
  border-radius: 50%;
  position:absolute;
  top: 50%;
}

.hiddenbox1, .dot1{
  left: 3%;
}

.hiddenbox2, .dot2 {
  left: 6%;
}

.hiddenbox3, .dot3 {
  left: 9%;
}

.hiddenbox4, .dot4 {
  left: 12%;
}
.hiddenbox5, .dot5 {
  left: 15%;
}

.hiddenbox6, .dot6 {
  left: 18%;
}
.hiddenbox7, .dot7 {
  left: 21%;
}

.hiddenbox8, .dot8 {
  left: 24%;
}
.hiddenbox9, .dot9 {
  left: 27%;
}

.hiddenbox10, .dot10 {
  left: 30%;
}
.hiddenbox11, .dot11 {
  left: 33%;
}

.hiddenbox12, .dot12 {
  left: 36%;
}
.hiddenbox13, .dot13 {
  left: 39%;
}
.hiddenbox14, .dot14 {
  left: 42%;
}
.hiddenbox15, .dot15 {
  left: 45%;
}
.hiddenbox16, .dot16 {
  left: 48%;
}
.hiddenbox17, .dot17 {
  left: 51%;
}
.hiddenbox18, .dot18 {
  left: 54%;
}
.hiddenbox19, .dot19 {
  left: 57%;
}
.hiddenbox20, .dot20 {
  left: 60%;
}
.hiddenbox21, .dot21 {
  left: 63%;
}
.hiddenbox22, .dot22 {
  left: 66%;
}
.hiddenbox23, .dot23 {
  left: 69%;
}
.hiddenbox24, .dot24 {
  left: 72%;
}
.hiddenbox25, .dot25 {
  left: 75%;
}
.hiddenbox26, .dot26 {
  left: 78%;
}
.hiddenbox27, .dot27 {
  left: 81%;
}
.hiddenbox28, .dot28 {
  left: 84%;
}
.hiddenbox29, .dot29 {
  left: 87%;
}
.hiddenbox30, .dot30 {
  left: 90%;
}
.hiddenbox31, .dot31 {
  left: 93%;
}
.hiddenbox32, .dot32 {
  left: 96%;
}


.day{
display: none;
}

.line{
border-left: 1px solid white;
position: absolute;
top: 50%;
}

.box{
width: 190px;
  border: 1px solid white;
 height:80px;
  position: absolute;
  top: 50%;
  padding:10px;
}

.header{
color: #ffffff;
    text-align: left;
    text-decoration: none;
    font-size: 25px;
    font-family: sans-serif;
     position: absolute;
   top: 50%;
    opacity: 0.9;
}

.day .reveal:hover{
opacity:0.4;
}

/*.day .bodytext:hover{
opacity:0.4;
}*/

.bodytext{
color: #ffffff;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
    font-family: sans-serif;
        position: absolute;
     top: 50%;
    opacity:0.6;
}

.moon{
    position: absolute;
    top: 50%;
}

.day1 .moon1{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -15px;
    left:3%;
}

.day1 .line1{
    height: 150px;
    margin-left: 4px;
    left: 3%;
}

.day1 .box1{

    margin-top: 150px;
    margin-left: -20px;
    left: 3%;
}

.day1 .header1{
    margin-top: 170px;
    margin-left: 0px;
    left: 3%;
}

.day1 .body1{    
    margin-top: 205px;
    margin-left: 0px;
    left: 3%;
}


.day2 .moon2{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -15px;
    left:6%;
}

.day2 .line2{

    height: 290px;
    margin-left: 4px;
    left: 6%;
}

.day2 .box2{
    margin-top: 290px;
    margin-left: -40px;
    left: 6%;

}

.day2 .header2{
    margin-top: 310px;
    margin-left: -20px;
    left: 6%;

}

.day2 .body2{
    margin-top: 345px;
    margin-left: -12px;
    left: 6%;
}




.day3 .moon3{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -21px;
    margin-left: -22px;
    left:9%;
    opacity: 0.2;
}

.day3 .line3{
    /*rotate so it draws upwards rather than downwards*/
    transform:rotate(180deg);
    transform-origin: top;
    height: 125px;
    margin-left: 4px;
    left: 9%;
}

.day3 .box3{
    margin-top: -226px;
    margin-left: -85px;
    left: 9%;
}

.day3 .header3{
    margin-top: -205px;
    margin-left: -65px;
    left: 9%;
}

.day3 .body3{
    margin-top: -170px;
    margin-left: -55px;
    left: 9%;
}



.day4 .moon4{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: 2px;
    left:12%;
}

.day4 .line4{
    transform:rotate(180deg);
    transform-origin: top;
    height: 35px;
    margin-left: 4px;
    left: 12%;
}

.day4 .box4{
    margin-top: -136px;
    margin-left: -85px;
    left: 12%;
}

.day4 .header4{
    margin-top: -115px;
    margin-left: -65px;
    left: 12%;
}

.day4 .body4{
    margin-top: -80px;
    margin-left: -59px;
    left: 12%;
}



.day5 .moon5{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: 2px;
    left:15%;
}

.day5 .line5{
    height: 190px;
    margin-left: 4px;
    left: 15%;
}

.day5 .box5{
    margin-top: 190px;
    margin-left: -90px;
    left: 15%;
}

.day5 .header5{
    margin-top: 210px;
    margin-left: -70px;
    left: 15%;
}

.day5 .body5{
    margin-top: 245px;
    margin-left: -60px;
    left: 15%;
}




.day6 .moon6{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: 0px;
    left:18%;
}


.day6 .line6{
    transform:rotate(180deg);
    transform-origin: top;
    height: 225px;
    margin-left: 4px;
    left: 18%;
}

.day6 .box6{
  width:215px;
    margin-top: -326px;
    margin-left: -90px;
    left: 18%;
}

.day6 .header6{
    margin-top: -305px;
    margin-left: -55px;
    left: 18%;
}

.day6 .body6{
    margin-top: -270px;
    margin-left: -70px;
    left: 18%;
}




.day7 .moon7{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -2px;
    left:21%;
}

.day7 .line7{
    height: 80px;
    margin-left: 4px;
    left: 21%;
}

.day7 .box7{
    margin-top: 80px;
    margin-left: -90px;
    left: 21%;
}

.day7 .header7{
    margin-top: 100px;
    margin-left: -70px;
    left: 21%;
}

.day7 .body7{
    margin-top: 135px;
    margin-left: -70px;
    left: 21%;
}




.day8 .moon8{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -4px;
    left:24%;
}


.day8 .line8{
    transform:rotate(180deg);
    transform-origin: top;
    height: 55px;
    margin-left: 4px;
    left: 24%;
}

.day8 .box8{
  width:200px;
    margin-top: -156px;
    margin-left: -90px;
    left: 24%;
}

.day8 .header8{
    margin-top: -135px;
    margin-left: -65px;
    left: 24%;
}

.day8 .body8{
    margin-top: -100px;
    margin-left: -70px;
    left: 24%;
}


.day9 .moon9{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -7px;
    left:27%;
}


.day9 .line9{
    transform:rotate(180deg);
    transform-origin: top;
    height: 140px;
    margin-left: 4px;
    left: 27%;
}

.day9 .box9{
  width:195px;
    margin-top: -241px;
    margin-left: -90px;
    left: 27%;
}

.day9 .header9{
    margin-top: -220px;
    margin-left: -65px;
    left: 27%;
}

.day9 .body9{
    margin-top: -185px;
    margin-left: -70px;
    left: 27%;
}


.day10 .moon10{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -10px;
    left:30%;
}


.day10 .line10{
    height: 240px;
    margin-left: 4px;
    left: 30%;
}

.day10 .box10{
    margin-top: 240px;
    margin-left: -90px;
    left: 30%;
}

.day10 .header10{
    margin-top: 260px;
    margin-left: -70px;
    left: 30%;
}

.day10 .body10{
    margin-top: 295px;
    margin-left: -70px;
    left: 30%;
}


.day11 .moon11{
    margin-top: -20px;
    margin-left: -12px;
    left:33%;
}


.day11 .line11{
    height: 140px;
    margin-left: 4px;
    left: 33%;
}

.day11 .box11{
  width:205px;
  height:65px;
    margin-top: 140px;
    margin-left: -90px;
    left: 33%;
}

.day11 .header11{
    margin-top: 160px;
    margin-left: -65px;
    left: 33%;
}

.day11 .body11{
    margin-top: 195px;
    margin-left: -70px;
    left: 33%;
}


.day12 .moon12{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -15px;
    left:36%;
}


.day12 .line12{
  transform:rotate(180deg);
    transform-origin: top;
    height: 65px;
    margin-left: 4px;
    left: 36%;
}

.day12 .box12{
    margin-top: -166px;
    margin-left: -90px;
    left: 36%;
}

.day12 .header12{
    margin-top: -145px;
    margin-left: -70px;
    left: 36%;
}

.day12 .body12{
    margin-top: -110px;
    margin-left: -70px;
    left: 36%;
}


.day13 .moon13{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -16px;
    left:39%;
}


.day13 .line13{
    height: 300px;
    margin-left: 4px;
    left: 39%;
}

.day13 .box13{
    margin-top: 300px;
    margin-left: -90px;
    left: 39%;
}

.day13 .header13{
    margin-top: 320px;
    margin-left: -70px;
    left: 39%;
}

.day13 .body13{
    margin-top: 355px;
    margin-left: -55px;
    left: 39%;
}


.day14 .moon14{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -18px;
    left:42%;
}


.day14 .line14{
    height: 190px;
    margin-left: 4px;
    left: 42%;
}

.day14 .box14{
  width:205px;
  height:65px;
    margin-top: 190px;
    margin-left: -90px;
    left: 42%;
}

.day14 .header14{
    margin-top: 210px;
    margin-left: -63px;
    left: 42%;
}

.day14 .body14{
    margin-top: 245px;
    margin-left: -70px;
    left: 42%;
}


.day15 .moon15{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -19px;
    left:45%;
}


.day15 .line15{
    height: 80px;
    margin-left: 4px;
    left: 45%;
}

.day15 .box15{
    margin-top: 80px;
    margin-left: -90px;
    left: 45%;
}

.day15 .header15{
    margin-top: 100px;
    margin-left: -70px;
    left: 45%;
}

.day15 .body15{
    margin-top: 135px;
    margin-left: -55px;
    left: 45%;
}


.day16 .moon16{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -21px;
    left:48%;
}


.day16 .line16{
  transform:rotate(180deg);
    transform-origin: top;
    height: 255px;
    margin-left: 4px;
    left: 48%;
}

.day16 .box16{
  width:200px;
    margin-top: -356px;
    margin-left: -90px;
    left: 48%;
}

.day16 .header16{
    margin-top: -335px;
    margin-left: -65px;
    left: 48%;
}

.day16 .body16{
    margin-top: -300px;
    margin-left: -70px;
    left: 48%;
}


.day17 .moon17{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -21px;
    left:51%;
}


.day17 .line17{
  transform:rotate(180deg);
    transform-origin: top;
    height: 155px;
    margin-left: 4px;
    left: 51%;
}

.day17 .box17{
    margin-top: -256px;
    margin-left: -90px;
    left: 51%;
}

.day17 .header17{
    margin-top: -235px;
    margin-left: -70px;
    left: 51%;
}

.day17 .body17{
    margin-top: -200px;
    margin-left: -55px;
    left: 51%;
}


.day18 .moon18{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -21px;
    left:54%;
    opacity:0.2;
}


.day18 .line18{
    height: 240px;
    margin-left: 4px;
    left: 54%;
}

.day18 .box18{
    margin-top: 240px;
    margin-left: -90px;
    left: 54%;
}

.day18 .header18{
    margin-top: 260px;
    margin-left: -70px;
    left: 54%;
}

.day18 .body18{
    margin-top: 295px;
    margin-left: -55px;
    left: 54%;
}


.day19 .moon19{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -20px;
    left:57%;
}


.day19 .line19{
   transform:rotate(180deg);
    transform-origin: top;
    height: 55px;
    margin-left: 4px;
    left: 57%;
}

.day19 .box19{
    margin-top: -156px;
    margin-left: -90px;
    left: 57%;
}

.day19 .header19{
    margin-top: -135px;
    margin-left: -70px;
    left: 57%;
}

.day19 .body19{
    margin-top: -100px;
    margin-left: -59px;
    left: 57%;
}


.day20 .moon20{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -20px;
    left:60%;
}


.day20 .line20{
    height: 150px;
    margin-left: 4px;
    left: 60%;
}

.day20 .box20{
  width:205px;
  height:65px;
    margin-top: 150px;
    margin-left: -90px;
    left: 60%;
}

.day20 .header20{
    margin-top: 170px;
    margin-left: -63px;
    left: 60%;
}

.day20 .body20{
    margin-top: 205px;
    margin-left: -70px;
    left: 60%;
}


.day21 .moon21{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -18px;
    left:63%;
}


.day21 .line21{
    height: 80px;
    margin-left: 4px;
    left: 63%;
}

.day21 .box21{
  width:195px;
    margin-top: 80px;
    margin-left: -90px;
    left: 63%;
}

.day21 .header21{
    margin-top: 100px;
    margin-left: -68px;
    left: 63%;
}

.day21 .body21{
    margin-top: 135px;
    margin-left: -70px;
    left: 63%;
}


.day22 .moon22{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -16px;
    left:66%;
}


.day22 .line22{
    transform:rotate(180deg);
    transform-origin: top;
    height: 140px;
    margin-left: 4px;
    left: 66%;
}

.day22 .box22{
    margin-top: -241px;
    margin-left: -90px;
    left: 66%;
}

.day22 .header22{
    margin-top: -220px;
    margin-left: -70px;
    left: 66%;
}

.day22 .body22{
    margin-top: -185px;
    margin-left: -48px;
    left: 66%;
}


.day23 .moon23{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -15px;
    left:69%;
}


.day23 .line23{
    height: 240px;
    margin-left: 4px;
    left: 69%;
}

.day23 .box23{
  width:225px;
    margin-top: 240px;
    margin-left: -90px;
    left: 69%;
}

.day23 .header23{
    margin-top: 260px;
    margin-left: -70px;
    left: 69%;
}

.day23 .body23{
    margin-top: 295px;
    margin-left: -55px;
    left: 69%;
}


.day24 .moon24{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -14px;
    left: 72%;
}


.day24 .line24{
    height: 140px;
    margin-left: 4px;
    left: 72%;
}

.day24 .box24{
  width:230px;
    margin-top: 140px;
    margin-left: -90px;
    left: 72%;
}

.day24 .header24{
    margin-top: 160px;
    margin-left: -70px;
    left: 72%;
}

.day24 .body24{
    margin-top: 195px;
    margin-left: -60px;
    left: 72%;
}


.day25 .moon25{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -8px;
    left: 75%;
}


.day25 .line25{
  transform:rotate(180deg);
    transform-origin: top;
    height: 65px;
    margin-left: 4px;
    left: 75%;
}

.day25 .box25{
  width:230px;
    margin-top: -166px;
    margin-left: -100px;
    left: 75%;
}

.day25 .header25{
    margin-top: -145px;
    margin-left: -80px;
    left: 75%;
}

.day25 .body25{
    margin-top: -110px;
    margin-left: -45px;
    left: 75%;
}


.day26 .moon26{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -9px;
    left: 78%;
}


.day26 .line26{
    height: 300px;
    margin-left: 4px;
    left: 78%;
}

.day26 .box26{
  width:235px;
  height:65px;
    margin-top: 300px;
    margin-left: -90px;
    left: 78%;
}

.day26 .header26{
    margin-top: 320px;
    margin-left: -65px;
    left: 78%;
}

.day26 .body26{
    margin-top: 355px;
    margin-left: -70px;
    left: 78%;
}


.day27 .moon27{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -10px;
    left: 81%;
}


.day27 .line27{
    height: 190px;
    margin-left: 4px;
    left: 81%;
}

.day27 .box27{
  width:225px;
    margin-top: 190px;
    margin-left: -90px;
    left: 81%;
}

.day27 .header27{
    margin-top: 210px;
    margin-left: -70px;
    left: 81%;
}

.day27 .body27{
    margin-top: 245px;
    margin-left: -45px;
    left: 81%;
}


.day28 .moon28{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -11px;
    left: 84%;
}


.day28 .line28{
    height: 80px;
    margin-left: 4px;
    left: 84%;
}

.day28 .box28{
  width:225px;
    margin-top: 80px;
    margin-left: -90px;
    left: 84%;
}

.day28 .header28{
    margin-top: 100px;
    margin-left: -70px;
    left: 84%;
}

.day28 .body28{
    margin-top: 135px;
    margin-left: -45px;
    left: 84%;
}


.day29 .moon29{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -11px;
    left: 87%;
}


.day29 .line29{
  transform:rotate(180deg);
    transform-origin: top;
    height: 215px;
    margin-left: 4px;
    left: 87%;
}

.day29 .box29{
  width:225px;
    margin-top: -316px;
    margin-left: -100px;
    left: 87%;
}

.day29 .header29{
    margin-top: -295px;
    margin-left: -80px;
    left: 87%;
}

.day29 .body29{
    margin-top: -260px;
    margin-left: -75px;
    left: 87%;
}


.day30 .moon30{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -10px;
    left: 90%;
}


.day30 .line30{
  transform:rotate(180deg);
    transform-origin: top;
    height: 155px;
    margin-left: 4px;
    left: 90%;
}

.day30 .box30{
  width:225px;
    margin-top: -256px;
    margin-left: -140px;
    left: 90%;
}

.day30 .header30{
    margin-top: -235px;
    margin-left: -120px;
    left: 90%;
}

.day30 .body30{
    margin-top: -200px;
    margin-left: -90px;
    left: 90%;
}


.day31 .moon31{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -9px;
    left: 93%;
}


.day31 .line31{
    height: 240px;
    margin-left: 4px;
    left: 93%;
}

.day31 .box31{
  width:225px;
    margin-top: 240px;
    margin-left: -170px;
    left: 93%;
}

.day31 .header31{
    margin-top: 260px;
    margin-left: -150px;
    left: 93%;
}

.day31 .body31{
    margin-top: 295px;
    margin-left: -135px;
    left: 93%;
}


.day32 .moon32{
    /*need to somehow set the transform-origin to the center*/
    margin-top: -20px;
    margin-left: -22px;
    left:96%;
    opacity:0.2;
}


.day32 .line32{
   transform:rotate(180deg);
    transform-origin: top;
    height: 75px;
    margin-left: 4px;
    left: 96%;
}

.day32 .box32{
  width:240px;
    margin-top: -176px;
    margin-left: -220px;
    left: 96%;
}

.day32 .header32{
    margin-top: -155px;
    margin-left: -200px;
    left: 96%;
}

.day32 .body32{
    margin-top: -120px;
    margin-left: -190px;
    left: 96%;
}