@charset "utf-8";
/* CSS Document for neighbourhood page only */

/* section neighbourhood begins */
.neighbourhood-bg {
	height:100vh;
	width:100%;
	background-image:url(../../img/neighbourhood/02_bg_full.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	position:absolute;
}

.neighbourhood-bg-mobile {
	background-image:url(../../img/neighbourhood/02_bg_web.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	position:relative;
	margin-top:9px;
	width:100%;
	height:calc(100vw - 50px);
}

.neighbourhood-wrap {
	position:relative;
	margin:0 auto;
	top:0;
/*	top:50%;
	transform:translateY(-50%);*/
	width:calc(100% - 50px);
	max-width:1100px;
	padding:0;
}

.neighbourhood-txt-wrap {
	position:relative;
	width:70%;
	text-align:left;
	padding:0;
	top:50vh;
	transform:translateY(-50%);
}



.neighbourhood-txt-wrap p.margin-no-top {
	margin-top:0;
}

.neighbourhood-table {
	position:absolute;
	width:25%;
	right:0;
	top:50vh;
	transform:translateY(-50%);
	padding:0;
}

.neighbourhood-table .div-table-row {
  position: absolute;
  transform: translateY(-50%);
}

.neighbourhood-btn {
	background-image:url(../../img/header_footer/arrow_right.svg);
	background-repeat:no-repeat;
	background-position:right top;
	padding-right:40px;
	height:40px;
	position:absolute;
}

.neighbourhood-btn .txt {
	position:relative;
	top:50%;
	transform:translateY(-50%);
	font-weight:bold;
}

.neighbourhood-img-group-1, .neighbourhood-img-group-2, .neighbourhood-img-group-3 {
	width:100%;
	padding:0;
	display:block;
}

.neighbourhood-img-group-2, .neighbourhood-img-group-3 {
	padding-top:15px;
}
/* section neighbourhood ends */

/* section map begins */
.map-wrap {
	position:relative;
	margin:0 auto;
	top:0;
	width:calc(100% - 50px);
	max-width:1100px;
	padding:0;
}

.map-table {
	position:relative;
	width:75vw;
	max-width:1100px;
	margin-top:15vh;
	padding:0;
}

.map-div-cell1 {
	width:75vh;
	vertical-align: top;
}

.map-div-cell2 {
	width:calc(100% - 75vh);
	vertical-align: top;
	padding:0;
}

#map-box {
	position:relative;
	height:75vh;
	width:100%;
	border:solid 5px #F4D270;
	background-color:black;
	top:0;
	color:#000;
}

#map-legends-wrap {
	position:relative;
	width:100%;
	margin:auto;
	margin-right:0;
}

ul.numbered-list {
  counter-reset: li;
  list-style-type: none;
/*  font-size: 14px;*/
  line-height: 18px;
  padding-left: 10px;
  margin-top:0;
}
ul.numbered-list li {
    position: relative;   
    padding: 5px 0 5px 30px;
}
ul.numbered-list li:before {
      content: counter(li);
      counter-increment: li;
      height: 20px;
      width: 20px;
      border-radius: 50%;
      color: white;
      text-align: center;
      position: absolute;      
      left: 0;
      top: 4px;
}

ul#shopping-list.numbered-list li:before {
	background-color:#D45850;
}

ul#recreation-list.numbered-list li:before {
	background-color:#EC9B35;
}

ul#school-list.numbered-list li:before {
	background-color:#57A450;
}

ul#dining-list.numbered-list li:before {
	background-color:#4D89A7;
}

.clickable {
    cursor: pointer;
}

.collapsible {
/*  background-color: #777;*/
  color: white;
  cursor: pointer;
  padding: 0;
  padding-bottom:20px;
  padding-left:30px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
/*  font-size: 0.9em;*/
  text-transform:uppercase;
  font-weight:bold;
}

.active, .collapsible:hover {
/*  background-color: #555;*/
}

.collapsible:before {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: left;
  margin-right: 10px;
  height:20px;
}

.collapsible.active:before {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
/*  background-color: #f1f1f1;*/
}

div.panel {
    padding: 0 18px;
/*    background-color: white;*/
    max-height: 0;
    overflow: hidden;
    transition: 0.4s ease-in-out;
    opacity: 0;
    margin-bottom:10px;
}

div.panel.show {
    opacity: 1;
    max-height: 1000px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
}

/* section map_section ends */

@media only screen and (max-width: 768px) {
	
/* section neighbourhood begins */
	
	.neighbourhood-wrap {
		width:100%;
	}

	.neighbourhood-txt-wrap {
		width:100%;
		top:0;
		padding:25px;
		padding-top:50px;
		transform:none;
	}
	
	.neighbourhood-table {
		position: relative;
		width: 100%;
		top: 0;
		transform: none;
	}
	
	.neighbourhood-img-group-1, .neighbourhood-img-group-2 {
		width:calc(100% / 2);
		padding:0;
		padding-top:50px;
		display:table-cell;
	}
	
	.neighbourhood-img-group-1 {
		padding-right:5px;
	}
	
	.neighbourhood-img-group-2 {
		padding-left:5px;
	}
	
	.neighbourhood-img-group-3 {
		display:none;
	}
/* section neighbourhood ends */

/* section map begins */
	.map-wrap {
		width:100%;
	}
	
	.map-table {
		width:100%;
		margin-top:0;
		padding-top:50px;
	}
	
	.map-div-cell1 {
		width:100%;
		display:block;
	}
	
	.map-div-cell2 {
		width:100%;
		display:block;
		padding-top:50px;
	}
	
	#map-box {
		height:100vw;
		width:100%;
	}
	
	#map-legends-wrap {
		position:relative;
		width:100%;
		margin:auto;
		margin-right:0;
	}

/* section map_section ends */
}

@media only screen and (max-width: 414px) {	
}

@media only screen and (max-width: 320px) {
	.neighbourhood-btn .txt {
		line-height: 1.5em;
	}
}

/* animation begins */
#neighbourhood-anim-01, #neighbourhood-anim-05 {
	transform:translateY(-50px);
	opacity:0;
	transition: all 1.5s ease;
}

#neighbourhood-anim-01.loaded, #neighbourhood-anim-05.loaded {
	transform:translateY(0);
	opacity:1;
}

#neighbourhood-anim-02, #neighbourhood-anim-03, #neighbourhood-anim-04 {
	transform:translateX(50px);
	opacity:0;
	transition: all 1.5s ease;
}

#neighbourhood-anim-02.loaded, #neighbourhood-anim-03.loaded, #neighbourhood-anim-04.loaded {
	transform:translateX(0);
	opacity:1;
}

@media only screen and (max-width: 768px) {
	#neighbourhood-anim-02, #neighbourhood-anim-03 {
		transform:translateY(-50px);
		opacity:0;
		transition: all 1.5s ease;
	}
	
	#neighbourhood-anim-02.loaded, #neighbourhood-anim-03.loaded {
		transform:translateY(0);
		opacity:1;
	}
	
	  .neighbourhood-table .div-table-row {
    position: inherit;
    transform: translateY(0);
  }
}
/* animation ends */