body {
   font-family: 'Titillium Web', sans-serif;
}

html {
   box-sizing: border-box;
}

*, *:before, *:after {
   box-sizing: inherit;
}

header {
   display: flex;
   background: #01679f;
   justify-content: space-between;
   align-items: center;
}

header h1 {
   color: #fff;
}

.logo_ave {
   max-width: 200px;
   padding-left: 20px;
}

.fb-share-button {
   padding-right: 20px;
}

strong {
   font-weight: bold;
}

#map {
   position: relative;
   width: 100%;
   height: 100vh;
}

.cetera {
   display: none;
}

#mycontent #map-container {
   width: calc(100% - 350px);
   height: 100vh;
   position: relative;
	display: inline-block;
}

aside {
   width: 350px;
   box-sizing: border-box;
   padding: 20px;
   background: #fff;
   border: 5px solid #131313;
   border-top: 0;
   position: relative;
   height: auto;
   z-index: 1000;
   float:right;
}

#mycontent #map-container.stuck {
   position: fixed !important;
   top: 0;
}

.item {
   padding: 30px 0;
   opacity: 0.7;
	border-top: 1px solid rgba(17,7,255,.2);
}
.item:first-child {
	border:none;
}
.mapboxgl-popup {
	max-width: 450px;
}
.item.active {
   opacity: 1;
}

aside h2 {
   /*background: #0303b0;*/
   color: rgba(17,7,255,0.8);
   /*border: 2px solid #131313;*/
   padding: 5px 10px;
   margin-top: 0;
   cursor: pointer;
}

.hero {
   text-align: center;
   background: #000;
   position: relative;
}

.hero .fas {
   color: #FFF;
   font-size: 50px;
   text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
   cursor: pointer;
}

.pulse {
   display: block;
   width: 72px;
   height: 72px;
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.5);
   cursor: pointer;
   box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);
   animation: pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
   ;
   position: absolute;
   bottom: 20px;
   left: 50%;
   line-height: 97px;
   margin-left: -36px;
}

.pulse:hover {
   animation: none;
}

@-webkit-keyframes pulse {
   0% {
      -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
   }
   100% {
      -webkit-box-shadow: 0 0 0 50px rgba(0, 0, 0, 0);
   }
}

@keyframes pulse {
   0% {
      -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
   }
   100% {
      -moz-box-shadow: 0 0 0 50px rgba(0, 0, 0, 0);
      box-shadow: 0 0 0 50px rgba(0, 0, 0, 0);
   }
}

.hero img {
   max-width: 100%;
   max-height: 90vh;
}

.btn-container{
   display: flex;
   justify-content: space-between;
   margin-bottom: 10px;
	position: sticky;
	top: 0;
	background:#fff;
	padding: 20px 0;
	box-sizing: border-box;
	z-index:2000;
}


.fly, .flyPrev {
   display: block;
   margin: 0px auto;
   width: 135px;
   padding: 15px 20px;
   border: none;
   border-radius: 3px;
   font-size: 12px;
   text-align: center;
   color: #fff;
   background: #ee8a65;
   cursor: pointer;
	transition: 1s;
}

.fly:hover, .flyPrev:hover {
	transform: scale(1.1);
}

.disabled {
   cursor: auto !important;
   opacity: 0.5;
}
.disabled:hover {
   transform: none;
}

.img-container img {
   max-width: 100%;
}

@media screen and (max-width:1024px) {
   header {
      flex-wrap: wrap;
      padding: 10px 20px;
   }

   header a {
      display: block;
      margin: auto;
   }
   header img.logo_ave {
      padding: 0;
      max-width: 150px;
   }
   header h1 {
      font-size: 20px;
   }
   .hero .fas {
      font-size: 20px;
   }
   .pulse {
      width: 30px;
      height: 30px;
      animation: pulse 2s infinite;
      line-height: 39px;
      margin-left: -15px;
   }
	aside {
	   width: 100%;
	   height: 70vh;
		overflow:hidden;
		overflow-y:scroll;
      border-top: 5px solid #131313;
	}


	#detail .item {
		width:100%;
		display:flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap:wrap;
	}
	#detail .item h2 {
		width: 100%;
		height:55px;
		flex:0 0 auto;
	}


	#detail .item .img-container {
		width:45%;
	}

	#detail .item .content {
		width:calc(55% - 30px);
		text-align: left;
		margin-left:30px;
	}


	#mycontent #map-container {
	   width: 100%;
	   height: 30vh;
      display: block;
	}

   #map {
      height:100%;
   }

	 #map-container #legend {
		width:auto;
		height:auto;
	}

	.map-overlay h2 {
		font-size:1em;
		margin:0;
	}
}
@media screen and (max-width:650px) {

	aside {
	   border-right: none;
		border-left:none;
      padding-top:0;
	}
   #detail .item h2 {
      height:auto;
   }


	.btn-container {
      position:fixed;
		flex-wrap: wrap;
      top:auto;
      bottom:-10px;
      left:0;
      right:0;
      width:100%;
	}

	#detail .item .img-container {
		width:100%;
	}

	#detail .item .content {
		width:100%;
		margin-left:0;
	}

   #map-container #legend {
      margin:0;
      font-size: 0.7em;
       line-height: 1em;
       padding: 5px;

    }


}