body, html {
   margin: 0;
   overflow: hidden;
   height: 100%;
}

.logo {
   margin: 10px;
   height: 40px;
   float: right;
}

#burger-container {
   position: relative;
   cursor:pointer;
   height: 60px;
   width: 100px;
   float:left;
}

#burger-container p {
   position: relative;
   left: 60px;
   font-family: Arial;
   font-weight: bold;
   color: #607D8B;
   line-height: 30px;
}

.svg-container {
   position: absolute;
   margin: 15px;
   height: 30px;
   width: 30px;
}

#old-menu-container {
   width:100%;
   height: 200px;
   display: none;
   background-color: white;
   text-align: left;
}

.menu-container {
   width:100%;
   height: 60px;
   background-color: white;
}

.menu {
   width: 100%;   
   height: auto;
   text-align: left;
}

.menu-h {
   text-align: left;
}

.menu-h a {
   font-family: Arial;
   font-weight: bold;
   font-size: 16px;
   text-decoration: none;
   color: #090F33;
   cursor: pointer;
   padding-left: 10px;
   padding-right: 20px;
   padding-bottom: 10px;
}

.menu-h a:hover {
   color: #797FA3;
}   

.menu-item {
   font-family: Arial;
   font-weight: bold;
   font-size: 17px;
   color: #090F33;
   cursor:pointer;
   margin: 0px;
   margin-left: 5px;
   padding-top: 5px;
}

.menu-item:hover {
   color: #797FA3;
}   

.add {
   width: 16px;
   height: 16px;
   padding-left: 5px;
   margin-top: 5px;
}

.content-container {
   position: relative;
   width: 100%;   
   min-height: 100%;
   background-size: cover;
   background-position: 50% 50%;
   background-color: #090F33;
   background-repeat: no-repeat;
}

.content-img {
   width: 140px;
   height: auto;
   float:left;
   margin: 25px;
}

.par-container {
   background-color: #090F33;
   padding: 5%;
}

.par {
   width: 100%; 
   text-align: justify;
   background-color: #FFFFFF;
   padding-bottom: 25px;
   overflow:auto;
}

.par h1 {
   padding: 25px;
   font-family: Arial;
}

.par p {
   padding: 0px 25px 0px 25px;
   font-family: Arial;
}

.par span {
   padding: 0px 25px 0px 25px;
   font-family: Arial;
}

.edit {
   padding: 0px 25px 0px 25px;
   font-family: Arial;
   font-size: 14px;
   color: #090F33;
   text-decoration: underline;
   cursor: pointer;
   background: none;
   border: none;
}

.edit-h1 {
   width:90%;
   height: 50px;
   font-size: 30px;
   margin: 25px;
}

.edit-year {
   margin: 25px;
}

.edit-text {
   margin: 25px;
   width:90%;   
   height: 500px;
}

.edit-img {
   width:90%;
   height: 50px;
   margin: 25px;
}

.id {
   display:none;
}

.add {
   height: 100px;
   width: 100%;
   font-size:100px; 
   font-weight:900;
   text-align:center;
   cursor:pointer;
}

.delete {
   padding: 0px 25px 0px 25px;
   font-family: Arial;
   color: #090F33;
}

.delete-container {
   padding: 25px;
   color: #090F33;
}

.Login {
   font-family: Arial;
   color: #090F33;
   text-decoration: underline;
   cursor: pointer;
   background: none;
   border: none;
   position: absolute;
   bottom: 10px;
   font-size:20px;
   padding-left: 10px;
}

.timeline {
   border-collapse: separate;
   border-spacing: 0 30px;
   padding: 20px;
   z-index: 2;
}

#timeline-container {
   position: absolute;
   width: 100%;
   min-width: 1200px;
   transition: all .3s ease-in-out;
   margin-top: 100px;
   transform-origin: top left;
   transform: scale(1.0);
   margin-left: auto;
   margin-right: auto;
}

.timeline-line {
   position:absolute;
   background-color: white;
}

.timeline-year {
   color: #797FA3;
}

.timeline-heading {
   color: white;
   text-align:center;
   position: absolute;
   font-family: Arial;
   font-size: 17px;
   width: 100%;
}

.timeline-column {
   float: left;
   margin: 40px 30px;
   width: 150px;
   height: 10000px;
   position: relative;;
}

.timeline-entry {
   position: absolute;
   background-color: white;
   width: 130px;
   height: 160px;
   border-radius: 10px;
   font-family: Arial;
   font-size: 11px;
   font-weight: normal;
   text-align: left;
   padding: 10px;
   cursor:pointer;
   transition: transform .2s ease-in-out;
}

.timeline-entry:hover {
   transform: scale(1.05);
}

.timeline-img {
   width: auto;
   height: 90px;
   max-width: 90px;
   object-fit: cover;
}

.timeline-img-container {
   width: 90px;
   height: 90px;
   margin: 5px 2.5px 15px 2.5px;
}

.timeline-add {
   width: 200px;
   height: 250px;
   border-radius: 10px;
   font-family: Arial;
   text-align: left;
   padding: 10px;
   margin-left: 10px;
   cursor:pointer;
   transition: all .2s ease-in-out;
}

.timeline-add:hover {
   background-color: rgba(255,255,255, 0.5);
   transform: scale(1.05);
}

.time-context {
   position: absolute;
   height: 50px;
   width: 50px;
   border-radius: 2.5px;
/*
   background-color: #797FA3;
   color: rgba(255,255,255,0.7);
*/
   background-color: rgba(255,255,255,0.8);
   color: #090F33;

   z-index: 1;
   font-family: Arial;
   font-weight: bold;
   font-size: 20px;
   text-align: center;
   line-height: 100px;
   cursor: pointer;
   opacity: 0.9;
   right: 0;
   overflow:hidden;
}

.time-context-rot {
   position: absolute;
   transform: translate(-50%, 0) rotate(270deg); 
   white-space: nowrap;
   margin: 0px 25px;
}

.time-context:hover {
   opacity: 1.0;
}

.par .info-h {
   font-size: 18px;
   padding-bottom: 0px;
}

.wrapper1 {
   height: calc(100% - 60px);
   width: 100%;
   position: fixed;
   overflow: auto;
}

.tile-container {
   width: 100%;
   position: relative;
   padding-bottom: 50px;
}

.tile-heading {
   line-height: normal;
   background-color: rgba(255, 255, 255, 0.95);
   font-family: Arial;
   font-size: 35px;
}

.tile-heading h1 {
   padding: 20px 0px;
   font-size: 40px;
   margin: 0px;  
}

.tile-heading-h1 {
   padding: 20px 0px;
   font-size: 40px !important;
   text-align: center;
   margin: 0px;  
}

.expand {
   display:none;
   font-size: medium;
   line-height: normal;
   text-align: justify;
   margin: 0;
   font-weight: normal;
}

.tile-heading a {
   line-height: 15px;
   margin: 0;
   padding: 5px 0 10px 0;
   display: block;
}

.tile-float-container {
   table-layout: fixed;
   width: 90%;
   height: 90%;
}

.tile-float-container th {
   padding: 20px;
}

.tile-float {
   width: 100%;
   height: 100%; 
   background-color: rgba(255, 255, 255, 0.95);
   text-align: left;
   padding-top: 10px;
   padding-bottom: 10px;
   font-family:Arial;
   font-weight: normal;

   background-size: auto 100%;
   background-position: 50% 50%;
   background-repeat: no-repeat;
}

.tile-float p {
   margin: 0px 25px;
   text-align: justify;
}

.tile-float h1 {
   margin-left: 25px;
   margin-right: 25px;
   font-size: 20px;
}

.tile-img {
   margin: 10px;
   margin-left: 25px;
   float: left;
   max-width: 100px;
   max-height: 200px;
}


@media only screen and (max-width: 800px) {
   .tile-float p {
      font-size:1em; 
   }
   .tile-float h1 {
      font-size:1em; 
   }
   .tile-heading h1 {
      font-size:0.6em; 
   }
   
   .ref-container h1 {
      font-size:20px !important; 
   }
}

iframe {
   width: 100%;
   height: 100%;
}

.frame {
   overflow: hidden;
}

.nolink {
   font-family: Arial;
   font-weight: bold;
   font-size: 20px;
   text-decoration: none;
   color: #090F33;
   cursor: pointer;
}

.nolink:link {
  text-decoration: none;
}

.nolink:visited {
  text-decoration: none;
}

.nolink:hover {
  text-decoration: none;
}

.nolink:active {
  text-decoration: none;
}

.control {
   position: fixed;
   background-color: white;
   width: 200px;
   height: 30px;
   border-radius: 10px;
   font-family: Arial;
   font-weight:bold;
   text-align: left;
   padding: 10px;
   margin: 10px;
   cursor:pointer;
   transition: all .2s ease-in-out;
   float:left;
   opacity: 0.5;
   cursor: pointer;
   color: #090F33;
   z-index: 2;
}

.nolink:link {
  text-decoration: none;
}

.nolink:visited {
  text-decoration: none;
}

.nolink:hover {
  text-decoration: none;
}

.nolink:active {
  text-decoration: none;
}

.control:hover {
   transform: scale(1.05);
   opacity: 1.0;
}

.control-zoom {
   position: fixed;
   background-color: white;
   width:  20px;
   height: 20px;
   border-radius: 10px;
   font-family: Arial;
   font-weight:bold;
   text-align: center;
   padding: 10px;
   margin: 30px;
   cursor:pointer;
   transition: all .2s ease-in-out;
   opacity: 0.5;
   bottom: 0;
   right: 0;
   z-index:2;
}

.control-zoom:hover {
   transform: scale(1.05);
   opacity: 1.0;
}

.marker {
   width: 100%;
   height: 25px;
   position: absolute
}

.marker-horizontal {
   height: 1px;
   width: 32px;
   background-color: white;   
}

.marker-vertical {
   height: 24px; 
   width:  1px; 
   left: 119px;
   background-color: white;   
}

.login-form{
   position: relative;
   padding: 100px 40px;
   height: 200px;
}

.login-img{   
   float:left;
}

.login-right{   
   float:left;
   width: 60%;
}

.login-container{   
   position: relative;
   width:fit-content;
   margin: 0px auto 50px auto;
}

.login-inp{   
   margin: 15px 0px 15px 15px;
   border: solid 1px #090F33;
   width: 200px;
   height: 40px;
   background-color: white;
   color: #090F33;
}

.login-inp:focus{   
   color: white;
   background-color: #090F33;
}

.login-lbl {
   display: block;
   padding: 25px 15px 15px 0px;
   float: left;
   margin: 0px;
   font-family: Arial;
   width: 100px;
}

.login-btn {
   position: relative;
   float: right;
   margin: 25px 0px 0px 0px;
   border: none;
   width: 100%;
   cursor: pointer;
   height: 40px;
   background-color: #090F33;
   color: white;
   font-weight: bold;
   transition: all .2s ease;
}

.login-btn:hover {
   transform: scale(1.1);
   background-color: #797FA3;
}   

.ref-container {
   margin: 5%;
   width: 90%;
   background-color: rgba(255, 255, 255, 0.95);
   text-align: left;
   padding-top: 10px;
   padding-bottom: 40px;
   font-family:Arial;
   font-weight: normal;
   word-break: break-word;

   background-size: auto 100%;
   background-position: 50% 50%;
   background-repeat: no-repeat;
}

.ref-container p {
   margin: 0px 25px;
   text-align: justify;
}

.ref-container h1 {
   margin-left: 25px;
   margin-right: 25px;
   font-size: 20px;
}


.top-context {
   position: absolute;
   padding: 10px;
   background-color: white;
   transition: all 0.2s ease;
   cursor: pointer;
   border-radius: 10px;
}

.top-context:hover {
   transform: scale(1.1);
}

.body-donation-h {
   font-size: medium;
   line-height: normal;
   text-align: justify;
   padding: 0px 25px 10px 25px;
   font-weight: normal;
}