/* 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;
}

.container{
    position: fixed;
    top:29%;
    width: 1300px;
    height:550px;
    left:50%;
    margin-left: -650px;
    /*outline:solid 5px yellow;*/
    z-index: 999;
}


.parabox {
height:300px;
 width:500px;
 background-color: none;
 position:absolute;
 top: 35%;
}

.parabox1{
left:5%;
}

.parabox2{
right: 5%;
}

#para1 {
    color: #0A1629;
    text-align: left;
    text-decoration: none;
    font-size: 15px;
    font-family: sans-serif;
    position: relative;
    line-height: 22px;

}

#comp1{
    /*blue;*/
    border-bottom:3px solid #6BDDD2; 
    text-decoration: none;
    font-style:normal;
}

#comp2{
    /*orange;*/
    border-bottom:3px solid #FFB031;
    text-decoration: none;
    font-style:normal;
}

#comp3{
    /*green*/
    border-bottom:3px solid #ADC474;
    text-decoration: none;
    font-style:normal;
}

.headingbox{
    width:550px;
    height:50px;
    position: absolute;
    margin: auto;
    top:10%;
    outline:black;
    background-color: none;
    opacity: 0.1;

}

.hbox1{
    left:5%;
}

.hbox2{
    right:2%;
}

.title{
    font-size: 55px;
    color:#0A1629;
    text-decoration: none;
    font-family: sans-serif;
}

.datehead{
   color: #ffffff;
    text-align: left;
    text-decoration: none;
    font-size: 30px;
    font-family: sans-serif;
    position: relative; 
    position: absolute;
top: 20%;
left: 72%;
margin-top: -90px;
margin-left: 60px;
}


.backgroundbox{
background-color:#ffffff;
height:72%;
width:100%;
position:fixed;
top:28%;
left:-1px;
}


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

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

.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;
}


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


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

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

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

.day2 .header2{
    left: 6%;
    margin-left:-30px;
}

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

.day3 .header3{
    left: 9%;
    margin-left:-30px;
}

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

.day4 .header4{
    left: 12%;
    margin-left:-30px;
}

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

.day5 .header5{
    left: 15%;
    margin-left:-30px;
}

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

.day6 .header6{
    left: 18%;
    margin-left:-30px;
}

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

.day7 .header7{
    left: 21%;
    margin-left:-30px;
}

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

.day8 .header8{
    left: 24%;
    margin-left:-30px;
}

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

.day9 .header9{
    left: 27%;
    margin-left:-30px;
}

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

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

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

.day11 .header11{
    left: 33%;
    margin-left:-30px;
}

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

.day12 .header12{
    left: 36%;
   margin-left:-30px;
}

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

.day13 .header13{
    left: 39%;
    margin-left:-30px;
}

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

.day14 .header14{
    left: 42%;
    margin-left:-30px;
}

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

.day15 .header15{
    left: 45%;
    margin-left:-30px;
}

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

.day16 .header16{
    left: 48%;
   margin-left:-30px;
}

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

.day17 .header17{
    left: 51%;
   margin-left:-30px;
}

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

.day18 .header18{
    left: 54%;
    margin-left:-30px;
}

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

.day19 .header19{
    left: 57%;
    margin-left:-30px;
}

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

.day20 .header20{
    left: 60%;
    margin-left:-30px;
}

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

.day21 .header21{
    left: 63%;
    margin-left:-30px;
}

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

.day22 .header22{
    left: 66%;
    margin-left:-30px;
}

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

.day23 .header23{
    left: 69%;
    margin-left:-40px;
}

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

.day24 .header24{
    left: 72%;
   margin-left:-40px;
}

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

.day25 .header25{
    left: 75%;
    margin-left:-40px;
}

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

.day26 .header26{
    left: 78%;
    margin-left:-40px;
}

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

.day27 .header27{
    left: 81%;
   margin-left:-40px;
}

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

.day28 .header28{
    left: 84%;
    margin-left:-40px;
}

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

.day29 .header29{
    left: 87%;
   margin-left:-40px;
}

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

.day30 .header30{
    left: 90%;
    margin-left:-40px;
}

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

.day31 .header31{
    left: 93%;
    margin-left:-40px;
}

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

.day32 .header32{
    left: 96%;
    margin-left:-40px;
}










/*vertical line*/
.line1{
transform:rotate(180deg);
transform-origin: top;
border-left: 1px solid white;
position: absolute;
top: 20%;
height: 80px;
margin-left: 4px;
left: 90%;
}

/*horizontal line*/
.line2{
transform:rotate(90deg);
transform-origin: top;
border-left: 1px solid white;
position: absolute;
top: 20%;
height: 40px;
margin-top: -80px;
margin-left: 4px;
left: 90%;

}


.arrowback {
    border: solid white;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 8px;
}


.navback {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    position: absolute;
    top: 20%;
    left: 90%;
    margin-top: -90px;
    margin-left: -38px;
}

.backarrow{
    display:none;
}





.diagonal{
transform-origin: top;
position: absolute; 
}

/*
orange: #FFB031
blue: #6BDDD2
green: #ADC474
navy #0A1629
*/


/*left orange line*/
.line3{
border-left: 3px solid #FFB031;
transform:rotate(105deg);
top: 81%;
height: 460px;
left: 46%;
}

/*top blue line*/
.line4{
border-left: 3px solid #6BDDD2;
transform:rotate(-60deg);
top: 23%;
height: 170px;
left: 54%;
}

/*right orange line*/
.line6{
border-left: 3px solid #FFB031;
transform:rotate(250deg);
top: 81%;
height: 470px;
left: 52%;
}

/*left blue line*/
.line5{
border-left: 3px solid #6BDDD2;
transform:rotate(40deg);
top: 23%;
height: 110px;
left: 45%;
}

/*right green line*/
.line7{
border-left: 3px solid #ADC474;
transform:rotate(200deg);
top: 81%;
height: 120px;
left: 77%;
}



.commentbox {
height:100px;
 width:200px;
 background-color: none;
 position:absolute;
}

.comment1{
top: 80%;
left:70%;
}

.comment2{
    width:250px;
top:10%;
left:40%;
}

.comment3{
top:80%;
left:15%;
}

.comment4{
top:79%;
left:42%;
}

#comm1 {
    /*need to add own font here*/
    color: #0A1629;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    position: relative;
    line-height: 22px;
   
    font-family: ff-providence-sans-web-pro, sans-serif;
    font-weight: 400;
    font-style: normal;

    /*font-family: marydale, sans-serif;
    font-weight: 400;
    font-style: normal;*/
}