:root {
  --info: #556b2f;
}

body {
	max-width: 1600px;
	margin: auto;
}

h1, h2, h3, h4, h5, h6, li a, h2 a, h3 a {
  color: var(--info);
}

p.caption {
  text-align: center;
  font-style: italic;
  margin-bottom: 8px;
}

.bg-info {
  background-color: var(--info);
}

.container-header {
  background-image: url("../../../../../images/headers/raindrops.jpg");
  background-repeat: repeat no-repeat;
  background-color: var(--info); # dark olive!
}

.container-header .container-nav {
  background-color: rgba(0,0,0,0.25);
  font-size: 1.2em;
}

.custom_journey_tiles ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.com-content-article__body img {
	max-width: 700px;
}

/* image grid */

.img_grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 5px;
  margin-bottom: 5px;

}

.img_grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
  margin-bottom: 5px;

}

.map-and-text img {
	max-width: 400px;
	width: 30%;
	float: left;
	margin: 10px;	
}

.map-and-text p {
	display: inline-block;
	width: 60%;
	margin: 10px;	
}

.map-and-text:after {
	content: '';
  display: block;
	clear: both;
}

.img_grid > * {
	align-self: center;
}

.img_grid> :first-child, .img_grid2> :first-child{
	justify-self: right;
}

.img_grid> :last-child, .img_grid2> :last-child{
	justify-self: left;
}

.img_grid> :nth-child(2){
	justify-self: center;
}


.img_grid img, .img_grid2 img {
  max-height: 500px;
	overflow: clip;
	max-width: 100% !important;
}

.com-content-article__body .panorama {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 5px auto;
} 

.custom_journey_tiles li {
  padding: 8px 12px;
  margin: 1%;
  border: 1px solid #888;
  border-radius: 5px;
  box-shadow: 5px 2px 2px #888;
}

.custom_journey_tiles li #system-readmore + p {
  display: none;
}

.custom_journey_tiles li a {
  font-size: 1.2em;
}

.custom_journey_tiles img {
}


.category-desc img {
  max-width: 500px;
}

.youtube_video {
  width: 700px;
  height: 450px;
}

/* try to look like journey card layout */
.layout-blog main, .view-article main{
  border: 1px solid #DDD;
  border-radius: 5px;
  padding: 0 10px;	
}

.layout-blog main h1, .view-article main h1 {
  background-color: rgb(247, 247, 247);
  border-bottom: 1px solid #DDD;
  color: black;
  margin-bottom: 0;
  padding: 8px 16px;
  font-size: 1.75rem;
}

/* handle overlay */
#sv-overlay {
  position: fixed;
  left: 0;
  top: 0;
  display: none;  
  width: 100%;
  height: 100vh;
  z-index: 100;
  background-color: rgba(0,0,0,0.9);
}

#sv-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* make sure its all in single column */
}

#sv-caption {
	color:#DDD;
	font-size: 1.3em;
	margin-top: 1.3em;
}

#img-overlay {
  display: block;
  max-width: 80%;
  max-height: 80%;
}


@media screen and (max-width:1400px) {

  .custom_journey_tiles ul {
    grid-template-columns: 1fr 1fr 1fr; 
  }
  
  .img_grid {
  	display: grid;
  	grid-template-columns: 1fr 1fr;
  }

}


@media screen and (max-width:960px) {

  .custom_journey_tiles ul {
    grid-template-columns: 1fr 1fr; 
  }
  
  .com-content-article__body img {
		max-width: 100%;
	}
  
}


@media screen and (max-width:600px) {

  .youtube_video {
    width: 400px;
    max-width: 100%;
    height: 300px;
  }


  .category-desc img {
    max-width: 100%;
  }

  .item-content img{
    display: block;
    margin-bottom: 5px;
  }

  .com-content-article__body img {
    display: block;
  }

  .custom_journey_tiles ul {
    grid-template-columns: 1fr;

  }

  .custom_journey_tiles li {

    padding: 5px 0;
    margin: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
    border-bottom: 2px solid #888;
  }

  .img_grid, img_grid2 {
  	display: grid;
  	grid-template-columns: 1fr;
  }
  
  .img_grid> :first-child, .img_grid2> :first-child{
		justify-self: center;
	}

	.img_grid> :last-child, .img_grid2> :last-child{
		justify-self: center;
	}
	
	.img_grid img, .img_grid2 img {
		max-height: 100%;	
	}
  
  .map-and-text img {
		max-width: 90%;
		width: 90%;
		display: block;
		margin: 10px auto;	
		float: none;
	}

	.map-and-text img:after {
		content: '';
		display: block;
		clear: both;
	}

	.map-and-text p {
		margin: 10px auto;	
		width: 100%;
		display: block;
	}

}