:root { 
	--category-one: #FFB2FF;
	--category-two: #00C271;
	--category-three: #FFD000;
	--category-four: #FF0000;
	--category-five: #9053FF;
	--category-six: #3FA9F5;
	--category-seven: #FF7600;
}


@font-face {
	font-family: 'StudioFeixenSansMedium';
	src: url('fonts/StudioFeixenSans-Medium.eot'); 
	src: url('fonts/StudioFeixenSans-Medium.eot') format('embedded-opentype'), 
         url('fonts/StudioFeixenSans-Medium.woff2') format('woff2'), 
         url('fonts/StudioFeixenSans-Medium.woff') format('woff'), 
         url('fonts/StudioFeixenSans-Medium.ttf') format('truetype'); 
}



*{
   margin: 0;
   padding: 0;
   font-family:  'StudioFeixenSansMedium';
   font-feature-settings: "ss01","ss02","ss03","ss06","ss07";
   font-size: 5vw;
}

.nav-2 a {
	text-decoration: none;
	color: black !important;
}


body {
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: hidden; /* Hide horizontal scrollbar */
}



.image-category {
	width: 10vw;
	height: 10vw;
}

.image-place {
	width: 6vw;
    display: block;
    float: right;
    transform: rotate(45deg);
	transition: all 0.2s ease;
}

.openn img {
    transform: rotate(90deg);
}

.nav {
    width: 90vw;
    padding: 3vw;
    margin-bottom: 6vw;
}

.nav-1 {
	width:50%;
	float: left;
}

.nav-2 {
	width:50%;
	float: left;
	text-align: right;
}

.category-wrap {
	overflow-x: hidden;
	overflow-y: hidden;
	margin-left: -2vw;
	padding-left: 2vw;
	height: 100vh;
	transition: all 0.5s ease;
}

.category-wrap-start {
	overflow-x: scroll;
	height: 30vw;
}

.category-slider {
width: 180vw;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}


.button-reload {
	font-size: 10vw;
	line-height: 53vw;
	height: 50vw;
	width: 50vw;
	padding: 2vw;
	margin: 2vw;
	margin-bottom: 9vw;
	background: #eee;
	border: none;
	border-radius: 50vw;
	text-align: center;
	display: inline-block;
	float: left;
	background: black;
	color: #ddd;
	margin-top: calc(50dvh - 25dvw - 15dvw);
	margin-left: 20vw;
	transition: all 0.5s ease, opacity 0s ease;
	z-index: 2;
	
	animation: example2 2s ease;
	background-position: center;
	animation-fill-mode: forwards;
}



@keyframes example2 {
  0% {opacity: 0;}
  50% {opacity: 0; transform: scale(0,0);}
  70% {opacity: 1; transform: scale(1.2,1.2);}
  80% {opacity: 1; transform: scale(0.9,0.9);}
  90% {opacity: 1; transform: scale(1.05,1.05);}
  100% {opacity: 1; transform: scale(1,1);}
}

.button-reload-small {
	line-height: 10vw !important;
	height: 10vw !important;
	width: 10vw !important;
	font-size: 8vw !important;
}

.button-reload-small:after {
	opacity: 0 !important;
}

.button-start {
	margin-top: 0vh;
	margin-left: 2vw;
	line-height: 17vw;
	height: 14vw;
	width: 14vw;
}

.button-reload:after {
	content: "start";
    font-size: 4vw;
    text-align: center;
	margin-left: 12.5vw;
    margin-top: -22vw;
    display: block;
    width: 25vw;
	color: black;
	animation: example3 3s ease;
	background-position: center;
	animation-fill-mode: forwards;
}

@keyframes example3 {
  0% {opacity: 0;}
  66% {opacity: 0; padding-top: 2vw;}
  100% {opacity: 1; padding-top: 0vw;}
}

.button-reload.button-start:after {
	content: "update" !important;
    margin-left: -5.5vw;
    margin-top: -5.8vw;

}

.category {
	font-size: 10vw;
	line-height: 17.5vw;
	height: 14vw;
	width: 14vw;
	padding: 2vw;
	margin: 2vw;
	background: #eee;
	border: none;
	border-radius: 20vw;
	text-align: center;
	display: inline-block;
	float: left;
	opacity: 0;
	margin-left: 100vw;
	margin-right: -100vw;
	margin-top: 0vh;
	transition: width 0.5s ease, height 0.5s ease, line-height 0.5s ease, font-size 0.5s ease, opacity 0s ease;
}

.category-small {
	line-height: 10vw !important;
	height: 10vw !important;
	width: 10vw !important;
	font-size: 8vw !important;
}

.category-small:after {
	opacity: 0 !important;
	margin-top: 5vw !important;
}


.category-start {
	opacity: 1;
	margin-left: 2vw;
	margin-right: 2vw;
	margin-top: 0vh;
}

.category:after {
	content: "category";
    font-size: 4vw;
    text-align: center;
    margin-left: -5.5vw;
    margin-top: -6.5vw;
    display: block;
    width: 25vw;
}

.inactive {
	background: #eee !important;
}

.category.active {
	color: rgba(0,0,0,0);
}

.category.active img {
	display: none;
}

.category.active:before {
	content: "";
    width: 10vw;
    height: 10vw;
    display: block;
    /* background: blue; */
    background-image: url(images/close.png);
    background-position: center;
    background-size: 10vw;
    margin: 2.1vw;
}

.category.active:after {
	color: black !important;
	margin-top: -3.1vw;
    margin-left: -5.5vw;
}


.notvisible {
	display: none;
}

.place {
	min-height: 6vw;
    padding: 5vw;
    margin: 3vw;
    background: #eee;
    border: none;
    border-radius: 3vw;
	opacity: 1;
	margin-left: 3vw;
	transition: margin-left 2s ease;
	transition-delay: 2s;
	pointer-events: all;
}

.place-start {
	opacity: 1;
	margin-left: 3vw;
}

#category_div {
	width: 98vw;
	padding: 2vw 0vw 0vw 2vw;
	position: fixed;
	background: rgba(255,255,255,0);
	/* background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 8%); */
}


#background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(255,255,255);
opacity: 0;
background-image:linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,100) 100%), url("images/map.png");
background-size: 75vh;
animation: example 2s ease;
background-position: center;
animation-fill-mode: forwards;
	transition: all 0.5s ease;
}

.background-wrap {
	opacity: 1;
	transition: all 0.5s ease;
	pointer-events: none;
}

@keyframes example {
  0% {background-size: 75vh; opacity: 0;}
  50% {background-size: 75vh; opacity: 0; }
  100% {background-size: 100vh; opacity: 0.5; }
}

.background-start {
	opacity: 0 !important;
}

#parent_div {
    position: fixed;
    top: 100vh;
	width: 100vw;
	opacity: 0;
	transition: all 0.5s ease;
	pointer-events: none;
}

.parent-div-small {
    top: 33vw !important;
    height: calc(100vh - 33vw) !important;
	background: white !important;
	overflow-y: scroll !important;
	opacity: 1 !important;
	pointer-events: initial !important;
	z-index: 49;
}

.parent-start {
	background: white !important;
    top: 41vw !important;
    height: calc(100vh - 41vw) !important;
	overflow-y: scroll !important;
	opacity: 1 !important;
	pointer-events: initial !important;
}



.column-1 {
	width: 50%;
	float: left;
}

.column-2 {
	width: 0%;
	float: left;
}

.column-3 {
	width: 40%;
	float: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.column-3:before {
 content: "📍 ";
}

.column-3:after {
 content: "km";
}

.column-4 {
	width: 10%;
	float: left;
	text-align: right;
}

.column-5 {
	width: 84vw;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.100, 1, 0.900, 1);
}

.column-5-inner {
 overflow: hidden;
}

.open {
  grid-template-rows: 1fr;
}

.website-link {
    background: rgba(0,0,0,0.2);
    border-radius: 2vw;
    padding: 3vw;
	display: block;
    margin-top: 2vw;
	text-align: center;
}

.fifty {
	width: 50%;
	float: left;
}

#one {
	transition-delay: 0.1s;
}

#two {
	transition-delay: 0.2s;
}

#three {
	transition-delay: 0.3s;
}

#four {
	transition-delay: 0.4s;
}

#five {
	transition-delay: 0.5s;
}

#six {
	transition-delay: 0.6s;
}

#seven {
	transition-delay: 0.7s;
}

.one {
	background: var(--category-one);
}

.category.one:after{
	content: "Art";
}

.two { 
	background: var(--category-two);
}

.category.two:after{
	content: "Coffee";
}

.three {
	background: var(--category-three);
}

.category.three:after{
	content: "Food";
}

.four {
	background: var(--category-four);
}

.category.four:after{
	content: "Art";
}

.five { 
	background: var(--category-five);
}

.category.five:after{
	content: "five";
}

.six { 
	background: var(--category-six);
}


.category.six:after{
	content: "six";
}

.seven {
	background: var(--category-seven);
}

.category.seven:after{
	content: "seven";
}

.eight {
	background: var(--category-eight);
}

.category.eight:after{
	content: "eight";
}

.footer {
	width: auto;
	padding-bottom: 15vh;
	background: white;
}

.overlay {
    background: black;
	color: white;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    z-index: 50;
    padding-top: 50vh;
    font-size: 22px;
    line-height: 0px;
    text-align: center;
}

@media screen and (orientation:landscape)
{
   .overlay
   {
      display: block;
   }
}