.modal {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.modal.modal-visible {
  visibility: visible;
}


.modal-overlay {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: #fff;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s height 0.5s;
  box-sizing: border-box;
}

.modal.modal-visible .modal-overlay {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.modal-wrapper {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-left: 0;
  background-color: #fff;
  box-sizing: border-box;
  overflow-y:scroll;
}

.modal-transition {
  transition: all 0.5s;
  transform: translateY(-100%);
  opacity: 1;
}

.modal.modal-visible .modal-transition {
  transform: translateY(0);
  opacity: 1;
}

.modal-header,
.modal-content {
  padding: 1em;
}

.modal-header {
  position: relative;
  top: 10%;
  background-color: #fff;
}

.modal-close {
  position: fixed;
  top: 0;
  right: 0;
  padding: 1em;
  color: #aaa;
  background: none;
  border: 0;
  font-size: 18px;
}

.modal-close:hover {
  color: #777;
}

.modal-heading {
  font-size: 1.125em;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.modal-content>*:first-child {
  margin-top: 0;
}

.modal-content>*:last-child {
  margin-bottom: 0;
}

.modal.modal-scroll .modal-content {
  max-height: 100%;
  overflow-y: scroll;
}

.modal.modal-scroll .modal-wrapper {
  position: absolute;
  z-index: 9999;
  top: 2em;
  left: 50%;
  width: 32em;
  margin-left: -16em;
  background-color: #CDf;
  box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
  box-sizing: border-box;
}

button {
  background: transparent;
  font-family: 'Republique', sans-serif;
    font-variant: normal; font-weight: 400; 
font-size: 1.25rem;
  line-height: 0.5;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  letter-spacing: .4px;
  color: #000;
  cursor: pointer;
  outline: 0;
  border: 0;
  padding: 4px;
}

#righty {
  position: fixed;
  right: .5em;
  top: 12px;
  z-index: 100000;
}

#lefty {
  position: fixed;
  left: .5em;
  top: 12px;
  z-index: 100000;
}



button {
  color: white;
}

button:hover {
  color: #ccc;
}

[data-modal-id="lefty"].modal-visible ~ #lefty {
  color: black;
}

[data-modal-id="lefty"].modal-visible ~ #lefty:hover {
  color: #aaa;
}

[data-modal-id="lefty"].modal-visible ~ #righty {
  display: none;
}
 
[data-modal-id="righty"].modal-visible ~ #righty {
  color: black;
}

[data-modal-id="righty"].modal-visible ~ #righty:hover {
  color: #aaa;
}

[data-modal-id="righty"].modal-visible ~ #lefty {
  display: none;
}

.modal-wrapper button.toggle {
   color: blue;
}

button.toggle{

}

.toggle{

}

#content {
   position: absolute;
   top: 100px;
   left: 100px;
   text-align: left;
}



p {
  padding: 0;
  margin: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  border: 0;
      line-height: 25px;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}


.info {
   position: absolute;
   top: 100px;
   left: 50px;
   font-family: 'Republique', sans-serif;
    font-variant: normal; font-weight: 500; 
font-size: 1.25rem;
    line-height: 0.5;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    letter-spacing: .4px;
      color: #000;
}


a {
   text-decoration-line: none;
   color: #fff;
}

a:hover {
   color: #ddd;
   transition: 250ms;
   cursor: pointer;
}

label:active a {
   text-decoration-line: none;
   color: #000;
}


div.building {
  display: none;
}
  
span:hover + div.building {
  display: block;
}

.image{
  position: relative;
}

.image a{
   display: block;      
   position: absolute;
   border: 1px;
   border-color: aliceblue;
   font-family: 'diatypepre', sans-serif;
   font-size: 15px; line-height: 18px; font-weight: 100;
   text-rendering: optimizeLegibility;	
   color: #6c6d68; 
}

.image:hover .building {
  display: block;    
}

.building  {
    position: absolute;
    left: 50px;
    top: 100px;
    padding: 20px;
    font-family: 'diatypepre', sans-serif;
font-size: 1.25rem; line-height: 18px; font-weight: 100;
	text-rendering: optimizeLegibility;	
	color: #fff; 
    background-color: transparent;   
}

span:hover {
    fill: #ec008c;
    opacity: 1;
}

.highlight:hover {
  fill: #ec008c !important;}
.highlight-lamp:hover {
   fill:#f50f0f; mix-blend-mode: screen;}
.highlight-plant:hover {
   fill:#0b9c0d; mix-blend-mode: screen;}
.highlight-water:hover {
   fill:#05b3e3; mix-blend-mode: screen;}
.highlight-wglass:hover {
   fill:#a704c4; mix-blend-mode: screen;}
.highlight-wine:hover {
   fill:#5432a8; mix-blend-mode: screen;}
.highlight-specs:hover {
   fill:#fc7d05; mix-blend-mode: screen;}
.highlight-tape:hover {
   fill:#45b319; mix-blend-mode: screen;}
.highlight-glass:hover {
   fill:#0e60b3; mix-blend-mode: screen;}
.highlight-pencil:hover {
   fill:#d4bc06; mix-blend-mode: screen;}
.highlight-mug:hover {
   fill:#d40606; mix-blend-mode: screen;}
.highlight-sharpener:hover {
   fill:#02a1f9; mix-blend-mode: screen;}
.highlight-bowl:hover {
   fill:#02b8a8; mix-blend-mode: screen;}
.highlight-stapler:hover {
   fill:#474ce6; mix-blend-mode: screen;}
.highlight-scissor:hover {
   fill:#cfcf40; mix-blend-mode: screen;}
.highlight-fork:hover {
   fill:#82807a; mix-blend-mode: screen;}
.highlight-phone:hover {
   fill:#53CE20; mix-blend-mode: screen;}
.highlight-sharpie:hover {
   fill:orange; mix-blend-mode: screen;}
.highlight-aaa:hover {
   fill:black; mix-blend-mode: screen;}



.map-highlight:hover {
  fill: #D01A20 !important;
}

text{
   display: none;
    font-family: 'diatypepre', sans-serif;
    font-variant: normal; font-weight: 500; 
    font-size: 4.8rem;
    line-height: 0.5;
	text-rendering: optimizeLegibility;	
	fill: #fff; 
    background-color: transparent;
}

text.sub-text{
    display:none;
    font-family: 'diatypepre', sans-serif;
	font-size: 1.8em; line-height: 5.8em; font-weight: 100;
	text-rendering: optimizeLegibility;	
    fill: #fff;
    background-color: transparent;
}

g:hover > text{
  display:block;
}


h5 {
   position:absolute;
   left: 20px;
   top: 25px;
    font-family: 'Republique', sans-serif;
    font-style: normal; font-weight: 500; 
    font-size: 35px;
    line-height: 0.5;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    letter-spacing: .4px;
   z-index: 100;
   margin: auto;
	color: #fff; 
}

h2:hover {
    -webkit-text-fill-color: #000;
}

h2 {
font-family: 'diatypepre', sans-serif;
font-size: 1.25rem;
       font-style: normal;
   font-weight: 500;
line-height: 23px;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    letter-spacing: .4px;
   z-index: 100;
   margin: auto;
              background-color: transparent;
}


h3 {
   position:relative;
font-family: 'diatypepre', sans-serif;
font-size: 1.25rem;
       font-style: normal;
   font-weight: 500;
line-height: 23px;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    letter-spacing: .4px;
   z-index: 100;
   margin: auto;
              background-color: transparent;
  left: 40px;
  display: inline-block;
}

h4 {
   position: absolute;
      left: 50%;
   top: 25px;
    font-family: 'diatypepre', sans-serif;
    font-variant: normal; font-weight: 500; 
  font-size: 36px;
    line-height: 0.5;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    letter-spacing: .4px;
   z-index: 100;
   margin: auto;
   color: #fff;
}

detail {
   position: absolute;
   top: 10px;
   right: 10px;
}

body {
  background: transparent;
  background-size: 100% 100%;
  margin: 0;
  font-family: 'Republique';
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 23px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
 margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: transparent;
}

.map-tooltip {
  position: fixed;
   width: auto;
  transform: translate(-50%, 0);
  top: 12px;
  left: 50%;
      font-family: 'diatypepre', sans-serif;
    font-variant: normal; font-weight: 500; 
font-size: 1.25rem;
      letter-spacing: .4px;
	text-rendering: optimizeLegibility;	
	color: #fff; 
    background-color: transparent;   
  pointer-events:none;
     display: block;
   z-index: 100000000;
      line-height: 0.5;
   padding: 3px;
}


::-moz-selection {
    color: #fff;
    text-shadow: none;
    background:#000
}

::selection {
    color: #fff;
    text-shadow: none;
    background: #000
}



.sub {
  display: inline-block;
  position: fixed;
  left: 35%;
  text-align: left;
}





.teel-content p{
   margin: 0;
   padding: 10px;
}

.teel-content img {
   padding: 10px;
   width: 96%;
}

.teel-content a {
   color: #000;
}

.teel-content a:hover {
   color: #888;
}






.teel-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 10px;
}

.teel-column {
  display: inline-block;
width: calc( (100% - 2.5em*3) / 4);
  margin-left: 0px;
}

.teel-column img {
   display: inline-block;
width: 100%;
}

.teel-column p {
  margin-left: 0px;
  padding: 0;
  margin-bottom: 10px;
}

.teel-column a {
color: #000;
}

.teel-column a:hover {
color: blue;
}



h1 {
font-family: 'diatypepre', sans-serif;
font-size: 1.25rem;
       font-style: normal;
   font-weight: 500;
line-height: 23px;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    letter-spacing: .4px;
   z-index: 100;
   margin: auto;
   background-color: transparent;
}


.expand {
       background-color: transparent;
    max-width: 100%;
    margin: 0 auto;
   color: #aaa;
   margin-top: 100px;
      margin-bottom: 100px;
}
.expand p {
    background-color: transparent;
    padding: 0;
    width: 100%;
    margin: 0;
}
.expand div {
    padding: 0;
    margin: 0;
}
 h1 {
    background-color: transparent;
    padding: 5px 0px 5px 0px;
    margin: 0 0 100px 0px;
      color: #000;
   border-bottom: 1px solid #888;
}
.expand h2 {
    background-color: transparent;
    cursor: pointer;
    padding: 5px 0 5px 0;
    margin: 0 0 0px;
}
.expand h3 {
    background-color: #d1d3d4;
    cursor: pointer;
    padding: 7px 30px 7px;
    margin: 0 0 2px;
}

.expand .active:before {

}

.expand .active {
          border-bottom: 0px;
       background-color: transparent;
}


.outline {
  -webkit-text-stroke-width: 0;
  -webkit-text-stroke-color: #fff;
  -webkit-text-fill-color: #888;
  background-color: transparent;
  border-top: 1px solid #888;
}
    .active {
    -webkit-text-fill-color: #000;
}
    .hollow {
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    font-variant: normal; font-weight: 400; 
    -webkit-text-stroke: 0 #fff;
    -webkit-text-fill-color: transparent;
}

#wrap {
    width: 100%;
    display: inline-block;
}


#left_col {
   float:right;
   display: inline-block;
   position: relative;
   right: 0px;
    width: 480px;
    border-right: 0px solid #000;
    padding-bottom: 10px;
   
     animation: fadeIn ease 2s;
  -webkit-animation: fadeIn ease 2s;
  -moz-animation: fadeIn ease 2s;
  -o-animation: fadeIn ease 2s;
  -ms-animation: fadeIn ease 2s;
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

#right_col {
    float:left;
    display: inline-block;
    width: 400px;
    position: relative;
    left: 35%;
top: 10px;
      color: #666;
  margin: 0;
  padding: 0;
   
        animation: fadeIn ease 2s;
  -webkit-animation: fadeIn ease 2s;
  -moz-animation: fadeIn ease 2s;
  -o-animation: fadeIn ease 2s;
  -ms-animation: fadeIn ease 2s;
}

#right_col p {
  margin-left: -5px;
  padding: 0;
  margin-bottom: 10px;
}


#left_col img { 
    display: block;
    width: 100%;
    height: auto;
    }



#left_teel_col {
   float:left;
   display: inline-block;
   position: relative;
   left: 0px;
    width: 480px;
    border-right: 0px solid #000;
    padding-bottom: 10px;
   
     animation: fadeIn ease 2s;
  -webkit-animation: fadeIn ease 2s;
  -moz-animation: fadeIn ease 2s;
  -o-animation: fadeIn ease 2s;
  -ms-animation: fadeIn ease 2s;
}


#center_teel_col {
    float:center;
    display: inline-block;
    width: 400px;
    position: relative;
    left: 20px;
   top: 0px;
      color: #666;
  margin-left: 0px;
   
        animation: fadeIn ease 2s;
  -webkit-animation: fadeIn ease 2s;
  -moz-animation: fadeIn ease 2s;
  -o-animation: fadeIn ease 2s;
  -ms-animation: fadeIn ease 2s;
}

#right_teel_col {
    float:right;
    display: inline-block;
    width: 400px;
    position: relative;
    right: 0px;
   top: 0px;
      color: #666;
  margin-left: 0px;
   
        animation: fadeIn ease 2s;
  -webkit-animation: fadeIn ease 2s;
  -moz-animation: fadeIn ease 2s;
  -o-animation: fadeIn ease 2s;
  -ms-animation: fadeIn ease 2s;
}




#left_teel_col img { 
    display: block;
    width: 100%;
    height: auto;
    }




.linebox-content {
  margin-left: .5em;
  margin-right: .5em;
  padding-top: 19px;
  padding-bottom: 10px;
  padding-left: 4px;
  padding-right: 4px;
}

.linebox-header {
  position: relative;
   top: 0;
}

.line {
  border-top: 1px solid white;
  width: 100%;
  position: absolute;
  top: 19px;
   left: 0;
   z-index: 1;
}

.linebox-footer,
.linebox-footer-content {
   padding-left: .5em;
    padding-right: .5em;
}
.linebox-footer {
   bottom: 10px;
}

.line-footer {
  border-top: 1px solid white;
   z-index: 1000000;
   margin-left: .7em;
   margin-right: .7em;
}


.hidelefty {
   position: fixed;
   display: inline-block;
   left: 5px;
   top: 5px;
   max-height: 32px;
   width: 100px;
   background: blue;
   z-index: 100001;
}


header {
   position: absolute;
   width: 100%;
   top: 0;
height: 38px;
   z-index: 1000001;
  mix-blend-mode: difference;
}

footer {
   position: absolute;
   width: 100%;
   bottom: 0;
height: 40px;
  text-align: center;
  color: white;
}

.location {
  position: fixed;
   width: auto;
  transform: translate(-50%, 0);
  bottom: 9px;
  left: 50%;
      font-family: 'diatypepre', sans-serif;
    font-variant: normal; font-weight: 400; 
font-size: 1.25rem;
	color: #fff; 
    background-color: transparent;   
  pointer-events:none;
     display: inline-block;
    text-transform:uppercase;
     letter-spacing: .4px;
        z-index: 100;
}

.leftb {
   display: inline-block;
position: fixed;
left: .5em;
bottom: 7px;
      z-index: 100;
padding-left: 4px;
   font-family: 'Republique', sans-serif;
   font-variant: normal; font-weight: 400; 
font-size: 1.25rem;
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
   letter-spacing: .4px;
}

.rightb {
   display: inline-block;
position: fixed;
right: .5em;
bottom: 7px;
      z-index: 100;
padding-right: 4px;
   font-family: 'Republique', sans-serif;
   font-variant: normal; font-weight: 400; 
font-size: 1.25rem;
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
   letter-spacing: .4px;
}

.PST {
   display: inline-block;
   position: fixed;
left: 4.9em;
bottom: 7px;

   font-family: 'Republique', sans-serif;
   font-variant: normal; font-weight: 400; 
font-size: 1.25rem;
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
   letter-spacing: .4px;
         z-index: 100;
}

#sunrise, #sunset, #dt, #desc {
  display: none;
}

#box {
   display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
   -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: -10;
}

#gradient {
   display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
   -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: -10;
}



#gradient.daylight4 {  
  background: linear-gradient(+10deg, #0D356F -25%, #041937 80%);
}

#box.daylight4 {
  background: linear-gradient(-10deg, #383960 -10%, #000000 50%);
animation-name: daylight4;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

@keyframes daylight4 {
	0% {
  opacity: 0;
	}
	100% {
  opacity: 1;
	}
}


/* SUNRISE */

#gradient.sunrise1 {
background: linear-gradient(-10deg, #383960 -10%, #000000 50%);
}

#box.sunrise1 {
background: linear-gradient(-40deg, #905993 -25%, #06244F 50%);
animation-name: sunrise1;
	animation-duration: 45s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

@keyframes sunrise1 {
	0% {
  opacity: 0;
	}
	100% {
  opacity: 1;
	}
}


#gradient.sunrise2 {
background: linear-gradient(-45deg, #664C78 -30%, #0D356F 50%);
}

#box.sunrise2 {
background: linear-gradient(-70deg, #DF7660 -35%, #905993 60%);
animation-name: sunrise2;
	animation-duration: 45s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

@keyframes sunrise2 {
	0% {
  opacity: 0;
	}
	100% {
  opacity: 1;
	}
}


#gradient.sunrise3 {
background: linear-gradient(-75deg, #DF7660 -35%, #905993 60%);
}

#box.sunrise3 {
background: linear-gradient(-100deg, #F3EA75 -15%, #D36270 70%);
animation-name: sunrise3;
	animation-duration: 45s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

@keyframes sunrise3 {
	0% {
  opacity: 0;
	}
	100% {
  opacity: 1;
	}
}


#gradient.sunrise4 {
background: linear-gradient(-100deg, #F3EA75 -5%, #D36270 60%);
}

#box.sunrise4 {
background: linear-gradient(-120deg, #51A4EE 5%, #ECC258 100%);
animation-name: sunrise4;
	animation-duration: 45s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

@keyframes sunrise4 {
	0% {
  opacity: 0;
	}
	100% {
  opacity: 1;
	}
}


#gradient.sunrise5 {
background: linear-gradient(-120deg, #51A4EE 0%, #ECC258 100%);
}

#box.sunrise5 {
background: linear-gradient(-140deg, #3E9AEC 5%, #B5DEF0 100%); 
animation-name: sunrise5;
	animation-duration: 45s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

@keyframes sunrise5 {
	0% {
  opacity: 0;
	}
	100% {
  opacity: 1;
	}
}


#gradient.sunrise6 {
background: linear-gradient(-140deg, #3E9AEC 25%, #B5DEF0 100%);  
}

#box.sunrise6 {
background: linear-gradient(-160deg, #398AD9 45%, #86C8F0 100%); 
animation-name: sunrise6;
	animation-duration: 45s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

@keyframes sunrise6 {
	0% {
  opacity: 0;
	}
	100% {
  opacity: 1;
	}
}




/* X DAYLIGHT X */

#gradient.daylightx {
  background: linear-gradient(-170deg, #2764B5 0%, #6FB5EC 100%); 
}

#box.daylightx {
  background: linear-gradient(-190deg, #1A53A4 40%, #86C8F0 100%);  
  animation-name: daylight;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes daylightx {
	0% {
  opacity: 0;
	}
	100% {
  opacity: 1;
	}
}

/* DAYLIGHT */

#gradient.daylight {
  background: #2764B5; 
}

#box.daylight {
  background: #6FB5EC;
  animation-name: daylight;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes daylight {
	0% {
  opacity: 0;
	}
	100% {
  opacity: 1;
	}
}

/* SUNSET */

#gradient.sunset6 {
  background: linear-gradient(-160deg, #398AD9 45%, #86C8F0 100%);  
}

#box.sunset6 {
  background: linear-gradient(-140deg, #3E9AEC 25%, #B5DEF0 100%); 
  animation-name: sunset6;
  animation-duration: 45s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes sunset6 {
	0% {
  opacity: 0;
	}
	100% {
  opacity: 1;
	}
}


#gradient.sunset5 {
background: linear-gradient(-140deg, #3E9AEC 5%, #B5DEF0 100%); 
}

#box.sunset5 {
background: linear-gradient(-120deg, #51A4EE 0%, #ECC258 100%);
animation-name: sunset5;
	animation-duration: 45s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

@keyframes sunset5 {
	0% {
  opacity: 0;
	}
	100% {
  opacity: 1;
	}
}


#gradient.sunset4 {
background: linear-gradient(-120deg, #51A4EE 5%, #ECC258 100%);
}

#box.sunset4 {
  background: linear-gradient(-100deg, #F3EA75 -5%, #D36270 60%);
  animation-name: sunset4;
  animation-duration: 45s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes sunset4 {
	0% {
  opacity: 0;
	}
	100% {
  opacity: 1;
	}
}


#gradient.sunset3 {
  background: linear-gradient(-100deg, #F3EA75 -15%, #D36270 70%);
}

#box.sunset3 {
  background: linear-gradient(-75deg, #DF7660 -35%, #905993 60%);
  animation-name: sunset3;
  animation-duration: 45s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes sunset3 {
	0% {
  opacity: 0;
	}
	100% {
  opacity: 1;
	}
}


#gradient.sunset2 {
  background: linear-gradient(-70deg, #DF7660 -35%, #905993 60%);
}

#box.sunset2 {
  background: linear-gradient(-45deg, #664C78 -30%, #0D356F 50%);
  animation-name: sunset2;
  animation-duration: 45s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes sunset2 {
	0% {
  opacity: 0;
	}
	100% {
  opacity: 1;
	}
}


#gradient.sunset1 {
  background: linear-gradient(40deg, #905993 -25%, #06244F 50%);
}

#box.sunset1 {
  background: linear-gradient(-10deg, #383960 -10%, #000000 50%);
  animation-name: sunset1;
  animation-duration: 45s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes sunset1 {
	0% {
  opacity: 0;
	}
	100% {
  opacity: 1;
	}
}


/* MOONLIGHT */

#gradient.moonlight {
  background: linear-gradient(10deg, #0D356F -25%, #041937 80%);
}

#box.moonlight {
  background: linear-gradient(-10deg, #383960 -10%, #000000 50%);
  animation-name: moonlight;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes moonlight {
	0% {
  opacity: 0;
	}
	100% {
  opacity: 1;
	}
}


.button-78 {
  align-items: center;
  appearance: none;
  background-clip: padding-box;
  background-color: initial;
  background-image: none;
  border-style: none;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  flex-direction: row;
  flex-shrink: 0;
  font-family: Eina01,sans-serif;
  font-size: 14px;
  font-weight: 800;
  justify-content: center;
  line-height: 24px;
  margin: 0;
  min-height: 34px;
  outline: none;
  overflow: visible;
  padding: 19px 26px;
  pointer-events: auto;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  width: auto;
  word-break: keep-all;
  z-index: 0;
}

@media (min-width: 168px) {
  .button-78 {
    padding: 2px 30px;
  }
}

.button-78:before,
.button-78:after {
  border-radius: 80px;
}

.button-78:before {
  background: black;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -2;
}

.button-78:after {
  background-color: initial;
  background: black;
  bottom: 1px;
  content: "";
  display: block;
  left: 4px;
  overflow: hidden;
  position: absolute;
  right: 4px;
  top: 1px;
  transition: all 100ms ease-out;
  z-index: -1;
}

.button-78:hover:not(:disabled):before {
  background: blue;
}

.button-78:hover:not(:disabled):after {
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  transition-timing-function: ease-in;
  opacity: 0;
}

.button-78:active:not(:disabled) {
  color: #fff;
}

.button-78:active:not(:disabled):before {
  background-image: black;
}

.button-78:active:not(:disabled):after {
  background-image: black;
  bottom: 1px;
  left: 1px;
  right: 1px;
  top: 1px;
}

.button-78:disabled {
  cursor: default;
  opacity: .24;
}

a .button-78{
    color: #fff;
}