/*Project Name: Project 4 Paris Map
Description: Map of Paris with iconic moniments and places
Author: Claire Monnier
Version: 1.0
License: 

Tags: (optional)

General comments (optional)

Table of Contents in CSS
1. Global
2. Links
3. Headings
4. Header
5. Navigation
6. Middle
7. Forms
8. Extras
9. Footer
*/

/* 1. Global */

html, body  { 
  margin: 0;
  padding: 0;
  font: 300 1em 'Ubuntu', sans-serif;
 }

 ul {
  margin: 0;
  list-style: none;
  padding: 0;
}

a {
	text-decoration: none;
	text-transform: uppercase;
	color: #fff;
	font: 1.2em 'Ubuntu Condensed', sans-serif;
	transition: 0.3s all ease-in-out;
}

a:hover {
  color: #dc8a8c;
}

h1 {
	color: #fff;
	text-transform: uppercase;
	font: 3em 'Arapey', serif;
	margin: 0;
	padding: 0.27em;
	background-color: #dc8a8c;
	display: inline-block;
}

h2 {
	font: 1.4em 'Arapey', serif;
	text-transform: uppercase;
	color: #fff;
}

p {
	color: #fff;
	margin: 0;
	padding: 0;
	line-height: 1.5;
}

/* 2. Links */

/* 3. Headings */

/* 4. Header */

/* 5. Navigation */

.menu {
  -webkit-transition: 0.1s -webkit-transform linear;
  transition: 0.1s -webkit-transform linear;
  transition: 0.1s transform linear;
  transition: 0.1s transform linear, 0.1s -webkit-transform linear;
  position: relative;
  background: 0;
/*  background: #6e4151; */
  float: left;
  margin: 2rem;
  height: 3.5em;
  width: 3.5rem;
  z-index: 2;
  outline: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
}

.bar, .bar::before, .bar::after {
  -webkit-transition: 0.2s background linear 0.1s, 0.2s top linear 0.2s, 0.2s -webkit-transform linear;
  transition: 0.2s background linear 0.1s, 0.2s top linear 0.2s, 0.2s -webkit-transform linear;
  transition: 0.2s background linear 0.1s, 0.2s top linear 0.2s, 0.2s transform linear;
  transition: 0.2s background linear 0.1s, 0.2s top linear 0.2s, 0.2s transform linear, 0.2s -webkit-transform linear;
  position: absolute;
  background: #dc8a8c;
  margin: auto;
  width: 100%;
  height: 0.3rem;
  content: '';
  top: 50%;
  left: 0;
}

.bar {
  margin-top: -0.2rem;
}

.bar::before {
  top: -1.2rem;
}

.bar::after {
  top: 1.2rem;
}

.bar::before, .bar::after {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.active .bar {
  background: 0;
}

.active .bar::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.active .bar::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.active .bar::before, .active .bar::after {
  top: 0;
}

.active .bar, .active .bar::before, .active .bar::after {
  -webkit-transition: 0.2s background linear 0.1s, 0.2s top linear, 0.2s -webkit-transform linear 0.2s;
  transition: 0.2s background linear 0.1s, 0.2s top linear, 0.2s -webkit-transform linear 0.2s;
  transition: 0.2s background linear 0.1s, 0.2s top linear, 0.2s transform linear 0.2s;
  transition: 0.2s background linear 0.1s, 0.2s top linear, 0.2s transform linear 0.2s, 0.2s -webkit-transform linear 0.2s;
}

nav {
	height: 415px;
	max-width: 285px;
	width: 100%;
  	background: #6e4151;
  	position: fixed;
  -webkit-transform: translateX(-365px);
          transform: translateX(-365px);
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
  transition: -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
  transition: transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
  transition: transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91), -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
  padding-top: 6.2rem;
  z-index: 1;
}

.menu-open nav {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

nav ul {
	margin:  1em 2em;
}

nav ul li {
	margin-bottom: 1em;
}

nav ul li a {
	color: #fff;
}

.active-link {
	color: #dc8a8c;
}

/* 6. Middle */

.close {
	position: absolute;
	top: 0;
	right: 0;
	color: #dc8a8c;
	cursor: pointer;
	font-size: 2em;
}

.wrap {
	position: relative;
}

#mapHolder {
	height: 100%;
	width: 100%;
	position:fixed;
}

#theMap {
	position: absolute;
}

.highlight {
	top: 0;
	left: 0;
	position: absolute;
	cursor: pointer;
	z-index: 1000;
	padding: 1em;
	background-color: #6e4151;
	border-radius: 5px;
}

#site_1 {
	top: 1056px;
	left: 900px;
}

#site_2 {
	top: 688px;
	left: 876px;
}

#site_3 {
	top: 1250px;
	left: 1900px;
}

#site_4 {
	top: 1465px;
	left: 1172px;
}

#site_5 {
	top: 392px;
	left: 1682px;
}

#site_6 {
	top: 752px;
	left: 1386px;
}

#site_7 {
	top: 1036px;
	left: 1584px;
}

#site_8 {
	top: 1420px;
	left: 1662px;
}

#site_9 {
	top: 1910px;
	left: 2060px;
}

#site_10 {
	top: 661px;
	left: 2272px;
}

#mapGroup {
	height: 2420px;
	width: 2000px;
}

#minMap {
	position: fixed;
	bottom: 0px;
	overflow: hidden;
}

#minMap img{
	height: 180px;
	width: 260px;
}

#mmSite {
	top: 0;
	left: 0;
	position: absolute;
	cursor: pointer;
	z-index: 1000;
    border: 2px solid #dc8a8c;
}

.bgactive {
	background-color: #dc8a8c;
}

/* 7. Forms */

/* 8. Extras */

/* POPUP CONTENT */

.popup {
	top: 0;
	width: 350px;
	height: 100%;
	position: fixed;
	background-color: #6e4151;
	padding: 2em;
	right: -790px
}

img.picture {
	width: 90%;
}

.popup ul {
	margin-top: 1em;
}

.popup ul li img {
	display: inline-block;
	float: left;
	margin-right: 1em;
}

.popup ul li {
	margin-bottom: 1em;
}

.popup ul li a {
	text-transform: initial;
}

p.brief {
	margin-top: 2em;
}

#pop1 h1 {
	font-size: 2.8em;
}

#pop2 h1 {
	font-size: 2.28em;
}

#pop3 h1 {
	font-size: 1.98em;
}

#pop4 h1 {
	font-size: 1.78em;
}

#pop5 h1 {
	font-size: 2.64em;
}

#pop6 h1 {
	font-size: 2.74em;
}

#pop7 h1 {
	font-size: 2.04em;
}

#pop8 h1 {
	font-size: 3.12em;
}

#pop9 h1 {
	font-size: 2.54em;
}

#pop10 h1 {
	font-size: 1.51em;
}

/* HOVER EFFECT ICON */

.mask {
  width: 109px;
  height: 162px;
  border-radius: 5px;
  position: absolute;
  overflow: hidden;
  text-align: center;
  top: 0;
  left: 0;
   background-color: rgba(220, 138, 140, 0.9);
  transition: all 0.5s linear;
  opacity: 0;
}

#site_2 .mask {
	width: 150px;
	height: 132px;
}

#site_3 .mask {
	width: 127px;
	height: 130px;
}

#site_4 .mask {
	width: 97px;
	height: 167px;
}

#site_5 .mask {
	width: 141px;
	height: 144px;
}

#site_6 .mask {
	width: 183px;
	height: 132px;
}

#site_7 .mask {
	width: 170px;
	height: 98px;
}

#site_8 .mask {
	width: 148px;
	height: 150px;
}

#site_9 .mask {
	width: 151px;
	height: 140px;
}

#site_10 .mask {
	width: 139px;
	height: 126px;
}

.highlight img {
  transform: scaleY(1);
  transition: all .7s ease-in-out;
}


.highlight h2 {
	letter-spacing: 1px;
  background: transparent;
  transform: scale(0);
  transition: all 0.5s linear;
  opacity: 0;
  padding: 0.9em 0 0.3em 0;
  margin-bottom: 0;
}

#site_2 h2 {
	padding-top: 0.5em;
}

#site_3 h2 {
	padding: 0 0 0.3em 0;
}

#site_4 h2 {
	padding: 0.3em 0;
}

#site_5 h2 {
	padding: 1em 1em 0.3em 1em;
}

#site_7 h2 {
	padding: 0 0 0.3em 0;
}

#site_8 h2 {
	padding: 1.5em 0 0.3em 0;
}

 #site_10 h2 {
 	padding-top: 0.4em;
 }

.highlight a.info {
  opacity: 0;
  transform: scale(0);
  transition: all 0.5s linear;
  font-size: 1.1em;
}

.highlight a.info:hover {
	color: #fff;
}


.highlight:hover .mask {
  opacity: 1;
}

.highlight:hover h2,
.highlight:hover a.info {
  transform: scale(1);
  opacity: 1;
}