/* 
=========================================================
Index page
============================================================ 
*/

.article_wrapper{
	width: 95%;
	height: 200px;
	border: 1px solid black;
	background-color: #6495ED;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 10px;
}

.article_wrapper_left{
	max-width: 60%;
	height: 60%;
	border: 0px solid black;
	padding: 5%;
	float: left;
}

.article_wrapper_img{
	min-width: 25%;
	height: 85%;
	border: 1px solid black;
	margin: 2%;
	float: right;
}

@media (max-width: 900px) {
	.article_wrapper_left{
		width: 50%;
		padding: 5%;
	}

	.article_wrapper_img{
		width: 35%;
		margin: 2%;
	}
}

.article_wrapper_img img{
	height: 100%;
	width: 100%;
}








/* 
=========================================================
All pages
============================================================ 
*/

html,body{
	background-color: #e5e5e5;
	margin: 0;
	padding: 0;
}

.content_wrapper{
	width: 70%;
	border-left: 1px solid black;
	border-right: 1px solid black;
	background-color: #808080;
	margin-top: 0;
	margin-bottom: 0px;
	margin-left: 15%;
	margin-right: 15%;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 900px) {
	.content_wrapper{
		width: 100%;
		border-left: 1px solid black;
		border-right: 1px solid black;
		background-color: #808080;
		margin-top: 0px;
		margin-bottom: 0px;
		margin-left: 0;
		margin-right: 0;
		padding-top: 20px;
		padding-bottom: 20px;
		padding-left: 0;
		padding-right: 0;
	}
}

.title{
	width: 87%;
	min-height: 100px;
	border: 1px solid black;
	background-color: #09828c;
	margin: auto;
	margin-top: 0;
	margin-bottom: 20px;
	padding-top: 10px;
	padding-left: 4%;
	padding-right: 4%;
}

@media (max-width: 900px) {
	.title{
		width: 82%;
		min-height: 100px;
		border: 1px solid black;
		background-color: #09828c;
		margin: auto;
		margin-top: 0;
		margin-bottom: 20px;
	}	
}

.row{
	/* border: 2px solid yellow; */
	width: 100%;
	margin: 0;
	display: flex;
	flex-direction: row;
}

@media (max-width: 900px) {
	.row{
		flex-direction: column;
	}
}

.col_left{
	background-color: #6495ED;
	border: 1px solid black;
	width: 70%;
	margin-top: 20px;
	margin-left: 2.5%;
	margin-right: 0;
	margin-bottom: 0;
	padding: 0;
	/* float: left; */
}

@media (max-width: 900px) {
	.col_left{
		width: 90%;
		margin: auto;
		margin-top: 10px;
		/* float: none; */
	}
}

.col_right{
	width: 22%;
	border: 1px solid black;
	margin-top: 20px;
	margin-left: 2.5%;
	margin-right: 2.5%;
	/* float: left; */
}

@media (max-width: 900px) {
	.col_right{
		width: 90%;
		margin: auto;
		margin-top: 10px;
		/* float: none; */
	}
}

.tool_wrapper{
	width: 90%;
	border: 1px solid black;
	min-height: 50px;
	margin: auto;
	margin-top: 2%;
	margin-bottom: 2%;
	text-align: center;
	/* padding-top: 10%; */
	line-height: 50px;
}






/* 
=========================================================
Apt page
============================================================ 
*/


.main_text{
	/* border: 2px solid yellow; */
	/* min-height: 100%; */
	margin: 5%;
	padding: 0;
	background-color: #6495ED;
}

.photogrid_row{
	width: 100%;
	/* height: 220px; */
	display: flex;
	flex-direction: row;
}

.photo_2col{
	width: 48%;
	margin: 1%;
	/* border: 1px solid blue; */
	/* float: left; */
}

.photo_2col img{
	max-height: 100%;
	max-width: 100%;
}

@media (max-width: 900px) {
	.photogrid_row{
		flex-direction: column;
	}
	.photo_2col{
		width: 100%;
	}	
}



/* 
=========================================================
Modal
============================================================ 
*/

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

/* Modal Content (Image) */
.modal-content{
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption{
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption{
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom{
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close{
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus{
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}