
/*** cascading style sheet for the image gallery ***/

.gallery{
	position: absolute;
  	padding: 15px 20px;
 	-ms-flexbox-wrap: wrap;
 	-ms-flexbox-direction: column;
 	-webkit-flext-flow: row wrap;
 	flex-flow: row wrap;
 	display: -webkit-box;
	display: flex;

	/** https://www.youtube.com/watch?v=IKu0zh2yrBI
			showed how to make the images responsive to websize,
			using only html and css, display: flex, wrap, column and row-wrap makes
			it possible for the images to be contained within the specified parameters **/

}


.sorry{
	display: none;
}

@media screen and (max-width: 2560px){
	.gallery{
		margin-top: 6%;
		margin-left: 5%;
		width: 85%;

	}

	.gallery img{
		padding: 2px 2px;
		transition: 0.8s;
		width: 190px;
	  height: 190px;

	}
}


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

  .gallery{
		margin-top: 7%;
		width: 80%;
	}
	.gallery img{
		width: 180px;
		height: 180px;
	}
}


@media screen and (max-width: 1200px){
	.gallery{
		margin-left: 7%;

	}

	.gallery img{
		width: 170px;
		height: 170px;
	}

}

@media screen and (max-width: 1000px){
	 .gallery{
		 margin-left: 5%;
	 }

	 .gallery img{
		 transition: 0.5s;
		 width: 140px;
		 height: 140px;
	 }

}


@media screen and (max-width: 880px){
	.gallery{
		margin-top: 6%;
	}
	.gallery img{
		width: 120px;
		height: 120px;
	}
}

/** this is when the navigation items collapse into hamburger **/
@media screen and (max-width: 750px){
	.gallery{
		 transition: 0.5s;
		 margin-top: 2%;
     margin-left: 0%;
		 width: 70%;

		overflow: hidden;
	 }

	 .gallery img{
		  padding: 2px 5px;
		 	width: 80px;
			height: 80px;
	 }

}


@media screen and (max-width: 520px){
	.gallery{
		width: 60%;
		overflow: hidden;
	}


	.gallery img{
		padding: 1px 1px;
	  width: 65px;
		height: 65px;
	}

}

@media only screen and (max-width: 320px){
	.gallery img{
		display: none;
	}
}

@media only screen and (min-width: 320px){
	.gallery{
		display: block;
	}
}

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

	.sorry{
			font-family: BebasNeue;
			font-size: 25px;
			text-align: center;
			margin-top: 30%;
	}


	.sorry{
		display: block;
	}


}
