@import url("https://fonts.googleapis.com/css?family=Abril+Fatface|Domine|EB+Garamond|Odibee+Sans&display=swap");
body{
	margin:0;
	background: #fdf5e6;
}
/* Responsive placing of the boxes*/
.container {
		padding: 1% 1% 0% 1%;
		background: #fdf5e6;
}
.container:after {
		content: '';
		display: inline-block;
		width: 100%;
}




.box {
		width: 96%;
		margin:2%;
		padding-bottom: 96%;
		height: 0;
		position: relative;
		float: left;
		cursor: pointer;
		overflow: hidden;

		
}

.box:after {
		content: '';
		position: absolute;
		background-color: #000;
		opacity:0;
		z-index: 55;
		width: 100%;
		height: 100%;
		-webkit-transition: all .15s ease-out;
		-moz-transition: all .15s ease-out;
		-ms-transition: all .15s ease-out;
		-o-transition: all .15s ease-out;
		transition: all .15s ease-out;
}

.box:hover::after {
		background-color: #000;
		opacity:.7;
}

.container .box .caption {
		position: absolute;
		z-index: 60;
		width: 90%;
		margin-left: 5%;
		top: 50%;
		-webkit-transform: scale(3);
		-moz-transform: scale(3);
		-ms-transform: scale(3);
		-o-transform: scale(3);
		transform: scale(3);
		text-align: center;
		-webkit-transition: all .15s ease-out;
		-moz-transition: all .15s ease-out;
		-ms-transition: all .15s ease-out;
		-o-transition: all .15s ease-out;
		transition: all .15s ease-out;
		font: 1.4em normal Arial, sans-serif;
		color: #fff;
		opacity: 0;
		font-family: 'EB Garamond',serif;
		font-size: 50px;
}

.box:hover .caption {
		-webkit-transform: scale(1) translate(0%, -50%);
		-moz-transform: scale(1) translate(0%, -50%);
		-ms-transform: scale(1) translate(0%, -50%);
		-o-transform: scale(1) translate(0%, -50%);
		transform: scale(1) translate(0%, -50%);
		opacity: 1;
}

.box img {
		position: absolute;
		left: 50%;
		top: 50%;
		height: 100%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		z-index: 50;
		-webkit-transition: all .15s ease-out;
		-moz-transition: all .15s ease-out;
		-ms-transition: all .15s ease-out;
		-o-transition: all .15s ease-out;
		transition: all .15s ease-out;
}

.box:hover img {
	height: 150%;
}
/* media changes, changing number of columns */

@media all and (min-width: 350px){
  .container .box{
		width: 48%;
		margin:1%;
		padding-bottom:48%;
	}
}

@media all and (min-width: 1200px){
  .container .box{
		width: 31.3333%;
		padding-bottom:30%;
	}
}


h1{
	text-align: center;
	font-family: 'Abril Fatface', sans-serif;
	font-size:50px;
  }
  
  h1:hover {
	text-shadow: 2px 2px #73b504;
  }

form{
	margin-left:2em;
	font-family: 'EB Garamond',serif;
  }

input{
	margin:0px 0px 20px 20px;
	font-family: 'EB Garamond',serif;
	font-size:25px;
  }