<style>
/* For mobile phones: */
  .clearfix::after {
     content: "";
     clear: both;
     display: table;k
  }

[class*="logo"], [class*="subtitle"], [class*="event"], [class*="eImage"] {
 width: 100%;
}


body {
  margin-top: 0px;
  margin-left: 0px;
}

#topnavfixed {
  position: fixed;
  top: 0px;
  margin-top: 0px;
  width: 100%;
  z-index: 1000;
}

#findme {
	text-align: center;
  margin-bottom: 40px;
}

.findme.Mobile {
	display: initial;
	width: 90%;
	max-width: 300px;
	/*margin-top: 30px;*/
}

.findme.Desktop {
	display: none;
}

#fadeout-bottom {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 50px;
  /*background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);*/
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,0) 100%);
  z-index: 600;
}

#logosub {
  position: fixed;
  top: 0px;
  width: 98%;
}

.logo {
    margin-top: 100px;
    color: #fff;
    background: linear-gradient(-45deg, grey, black, #EE7752, #E73C7E, #23A6D5, #23D5AB, green);
    background-size: 500% 500%;
    -webkit-animation: Gradient 18s ease 5;
    -moz-animation: Gradient 18s ease 5;
    animation: Gradient 18s ease 5;
  }

.top-spacer {
  /*top space to separate content from menu*/
  margin-top: 60px;
}
  
  @-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
  }
  @-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
  }
  @keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
  }

.subtitle{
  text-align: center;
  font-size: 10px;
  font-size: 3vw;
  font-weight: bold;
  margin-bottom: 100px;
}

.subtitle.Detail {
  display: none;
}

.event {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  }
  
.events {
  text-align: center;
  /*margin-top: 20px; normal margin, when position not staic (not relative)*/
  margin-top: 320px;
  position: relative;
  z-index: 500;
  -webkit-animation: events 800ms cubic-bezier(0.8, 0, 0.2, 1);
  animation: events 800ms cubic-bezier(0.8, 0, 0.2, 1);
  background-color: #ffffff9c;
 }

#fadeout-events-top {
  width: 100%;
  height: 50px;
  /*background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);*/
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,0) 100%);
}

#events-background {
  /*background-color: white;*/
}

@-webkit-keyframes events {
 0% {
  -webkit-transform:scaleY(0);
  transform:scaleY(0);
  opacity:0
 }
 15% {
  -webkit-transform:scaleY(0);
  transform:scaleY(0);
  opacity:0
 }
 100% {
  -webkit-transform:scaleY(1);
  transform:scaleY(1);
  opacity:1
 }
}
@keyframes events {
 0% {
  -webkit-transform:scaleY(0);
  transform:scaleY(0);
  opacity:0
 }
 15% {
  -webkit-transform:scaleY(0);
  transform:scaleY(0);
  opacity:0
 }
 100% {
  -webkit-transform:scaleY(1);
  transform:scaleY(1);
  opacity:1
 }
}


.eImage {
	width: 89%;
	max-width: 480px;
  box-shadow: 10px 10px 5px grey;
  margin-left: 20px;
  margin-right: 20px;
	margin-bottom: 30px;
  transition: transform .3s; /* Animation */
  transition: opacity .2s
  /*transform-style: preserve-3d;*/
}

.eImage:hover {
    /*transform: scale(1.02);*/
    /**opacity: 0.2;**/
    /*transform: rotateY(180deg);*/
  }

.eImage.Overview {
    border-color: black;
    border-style: outset;
}

.eImage.Mobile {
    box-shadow: none;
}

.eImage.Detail {
    display: none;
}

.eDescription {
    /*text-align: left;*/
    padding-left: 20px;
    padding-right: 20px;
  }
  
.eDates {
padding-left: 10px;
}


/********** MENU *************/
#site-navigation {
  /*display: block;*/
  background: #000000bf;
  height: 40px;
  /*top: 0px;
  margin-top: 0px;
  margin-bottom: 30px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;*/
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 0px 10px 10px #b2b2b291;
}

#site-navigation #main-menu,
#site-navigation > input {
  display: none;
}

#site-navigation #main-menu-logo {
  position: fixed;
  margin-top: 5px;
  margin-left: 20px
}

#site-navigation #main-menu-logo > img {
  height: 25px;
  filter: invert(100%);
  opacity: 0.8;
}

#site-navigation > label {
  display: block;
  font-size: 26px;
  color: #fff;
  position: relative;
  text-align: right;
  right: 20px;
  /*width: 100px;*/
  padding: 0;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#site-navigation > label > menutitle {
  font-size: 18px;
}


#site-navigation > input:checked + #main-menu {
  display: block;
  clear: both;
  margin-top: 3px;
  margin-left: 7px;
  margin-right: 7px;
  position: relative;
  /*background: #000000ed;*/
  background: #000000de;
  color: #fff;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  box-shadow: 0px 10px 10px #b2b2b291;
  text-align: right;
  padding-right: 30px;
}

#site-navigation ul li {
  display: block;
  padding: 12px 10px;
}

#site-navigation ul li:hover{
  /*background: #e0e0e0;*/
  background: #3c3c3ced;
  color: black;
}

#site-navigation a {
  text-decoration: none;
  color: white;
}

/********** MENU END ********/

@media only screen and (min-width: 800px) {
/* For desktop: */
  
  #logosub {
  position: unset;
  top: unset;
  width: unset;
  }
  
  .logo {
    width: 60%;
    min-width: 450px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    -webkit-animation: Gradient 18s ease infinite;
    -moz-animation: Gradient 18s ease infinite;
    animation: Gradient 18s ease infinite;
  }
  
  .subtitle {
    text-align: center;
    font-size: 1.1vw;
    font-weight: bold;
    margin-bottom: 100px;
  }
  
  .subtitle.Detail {
    display: block;
  }
	
  .findme.Mobile {
	  display: none;
  }

  .findme.Desktop {
    display: initial;
    width: 90%;
    max-width: 600px;
    margin-top: 30px;
  }
  
  #fadeout-bottom {
    display: none;
  }
  
  #site-navigation {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
  }
  
  #site-navigation > label {
    /*right: 20%;*/
  }
  
  .events{
    position: unset;
    margin-top: 20px;
    background-color: unset;
  }
  
  #fadeout-events-top {
    display: none;
  }
  
  .event {
    min-width: 450px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
  }
  
  .event.Overview {
    width: 80%;
  }
  
  .event.Detail {
    width: 60%;
    overflow: hidden;
  }
  
  .eDivImage {
    box-sizing: border-box;
    float: left;

    
    padding-left: 20px;
    padding-top: 15px;
  }
  
  .eDivImage.Overview {
    width: 500px;
  }
  
  .eDivImage.Detail {
    width: 50%;
  }
  
  .eImage {
    width: 90%;
  	max-width: 480px;
    box-shadow: 10px 10px 5px grey;
    margin-left: 10px;
    margin-right: 10px;
  	margin-bottom: 30px;
  }
  
  .eImage.Overview:hover {
    transform: scale(1.02);
    /*opacity: 0.8;*/
    filter: saturate(1.5);
  }
 .eImage.Detail:hover {
   /* don't do hover effects in detail view, cause the image won't have a link*/
  }

  
  .eImage:active {
  }
  
  .eImage.Overview {
    border-color: black;
    border-style: outset;
  }
  
  .eImage.Detail {
    display: block;
  }
  
  .eImage.Mobile {
    display: none;
  }

  
  .eDescription {
    box-sizing: border-box;
    float: right;
    width: 50%;
    padding-left: 20px;
    padding-right: 20px;
    /*text-align: left;*/
  }
  
  .eDates {
    padding-left: 10px;
  }
}
</style>
