html, body {
	overflow-x: hidden;
}

body {
	background-color: #cc2027;
	margin: 0;
	
	font-family: source-sans-pro,sans-serif;
	font-weight: 900;
	font-style: normal;
	
	color: #ede3d9;
	letter-spacing: 2px;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
}

section {
	padding: 0 2vw 0 2vw;
}

h2 {
	font-size: 30px;
	margin: 3vh 0 9vh 0;
}

strong {
	color: #fcb515;
}

a {
	color: #ede3d9;
	text-decoration: none;
}

a:hover {
	color: #fcb515;
}

p {
	margin: 5vh 0 5vh 0;
}

i {
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}

/* Language Button */
.language_wrapper {
	position: fixed;
	top: 6%;
	right: 5%;
	transition: transform .6s;
	z-index: 1;
	background-color: #CC2027;
	padding: 5px 10px;
}
.language_wrapper:hover {
	transform: scale(1.1);
}


/* Shop */ 
.shop_wrapper {
	position: fixed;
	top: 6%;
	left: 5%;
	border: 2px solid #F2E9E1;
	padding: 5px 10px;
	background-color: #CC2027;
	transition: transform .6s;
	z-index: 1;
}
.shop_wrapper:hover {
	transform: scale(1.2);
}


/* Socials */
.socials_wrapper {
	margin-bottom: 5vh;
}
.social-icon {
	font-size: 22px;
	padding: 5vh 5vw 5vh 5vw;
	transition: transform .6s;
}
.social-icon:hover {
	transform: scale(1.2);
}

/* MiZ Logo */
.madeinzurich_wrapper {
	position: fixed;
	padding: 5px 10px;
	background-color: #CC2027;
	bottom: 6%;
	right: 5%;
	z-index: 1;
}

.madeinzurich_logo {
	height: 100px;
	transition: transform .6s;
}

.madeinzurich_logo:hover {
	transform: scale(1.1);
}

@media screen and (max-width: 700px) {
  .madeinzurich_wrapper {
    visibility: hidden;
  }
}


/* Image */
.page_wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
}

#logo {
    width: 80vh;
	margin-top: 7vh;
}
@media screen and (max-width: 600px) {
  #logo {
    width: 75vw;
  }
}

#bottle {
	width: 40vw;
}


/* Arrow */
#titleArrowDown {
	font-size: 40px;
	transition: transform .4s;
}

#titleArrowDown:hover {
	transform: scale(1.2);
}


/* Text */
#info {
	padding-top: 15vh;
	margin: 10vh 0 4vh 0;
}



/* Map */
.map-wrapper {
	margin-bottom: 10vh;
}

#map {
	height: 80vh;
	min-width: 70vw;
}

#map-title {
	margin-bottom: 0;
}

.map-border {
	height: 97.4%;
	border: 8px solid #EDE3D9;
}

.map-border-black-out {
	border: 4px solid #262626;
}

.map-border-black-in {
	height: 93.8%;
	border: 4px solid #262626;
	display: flex;
    flex-direction: column;
    flex-wrap: wrap;
	padding: 15px;
}

#legend {
	font-family: source-sans-pro,sans-serif;
  	background: #CC2027;
 	color: #F2E9E1;
  	margin: 10px;
	padding: 10px;
  	border: 4px solid #262626;
  	text-align: left;
}

#legend img {
  	vertical-align: middle;
	width: 30px;
	padding: 3px;
}

.popup-wrapper {
	font-family: source-sans-pro,sans-serif;
	color: #262626;
	height: auto;
	overflow: hidden;
}

.popup-content {
	color: #9A9A9A;
}

.popup-link {
	color: #fcb515;
	padding: 10px 38px;
	transition: color 0.3s;
	font-size: 14px;
}

.popup-link:hover {
	color: #CC2027;
}





/* The Modal (background) */
h5 {
	font-size: 5vw;
}

@media only screen and (max-width: 800px) {
	h5 {
	font-size: 10vw;
}
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  background-color: #CC2027;
  margin: 5% auto; /* 15% from the top and centered */
  padding: 20px;
  width: 80%; /* Could be more or less, depending on screen size */
}

.modal-border {
	height: 97.4%;
	border: 8px solid #EDE3D9;
}

.modal-border-black-out {
	border: 4px solid #262626;
}

.modal-border-black-in {
	height: 93.8%;
	border: 4px solid #262626;
	display: flex;
    flex-direction: column;
    flex-wrap: wrap;
	padding: 15px;
}

.modal-title {
	padding: 4vh;
	margin: 1vh 0;
}

.modal-text {
	height: 15vh;
}

.modal-buttons {
	margin-top: auto;
	line-height: 55px;
	padding-bottom: 2vh;
}

.openButton {
	border: 2px solid #EDE3D9;
	padding: 10px 38px;
	transition: color 0.3s;
	font-size: 22px;
}

.openButton:hover {
	border: 2px solid #fcb515;
	color: #fcb515;
}



.closeButton {
	color: #CC2027;
	background-color: #EDE3D9;
	border: 2px solid #EDE3D9;
	padding: 10px 20px;
	-webkit-transition: background-color 0.6s;
    -moz-transition:    background-color 0.6s;
    -ms-transition:     background-color 0.6s;
    -o-transition:      background-color 0.6s;
    transition:         background-color 0.6s;
}

.closeButton:hover {
	background-color: #CC2027;
	color: #EDE3D9;
}