section h1 {
	margin-top: 40px;
	margin-bottom: 25px;
	color: #bb6738;
	text-align: center;
	line-height: 40px;
	font-family: 'Baskerville Old Face';
	font-size: 24px;
}

@media screen and (max-width: 991px) {
	section h1 {
		line-height: 38px;
	}
	.right-block--content h3 {
		font-size: 1.3em;
	}
}

@media screen and (min-width: 869px) and (max-width: 991px) {
	.grid--main-block .overlay {
		width: 94% !important;
	}
	.grid--main-block:hover .overlay {
		height: 27%;
	  	width: 94% !important;
	}
	.grid--right-block .left-block--inner .overlay,
	.left-block--inner .overlay {
		width: 87.8% !important;
	}
	.grid--right-block .left-block--inner:hover .overlay,
	.left-block--inner:hover .overlay {
	  	height: 27%;
	  	width: 87.8% !important;
	}
	.grid--left-block-2:hover .overlay {
		width: 93.8% !important;
	}
}

@media screen and (max-width: 868px) {
	.grid--main-block .overlay {
		width: 93% !important;
	}
	.grid--main-block:hover .overlay {
		height: 27%;
	  	width: 93% !important;
	}
	.grid--right-block .left-block--inner .overlay,
	.left-block--inner .overlay {
		width: 86% !important;
	}
	.grid--right-block .left-block--inner:hover .overlay,
	.left-block--inner:hover .overlay {
	  	height: 27%;
	  	width: 86% !important;
	}
	.grid--left-block-2:hover .overlay {
		width: 93% !important;
	}
}

@media screen and (max-width: 768px) {
	.grid--main-block .overlay {
		width: 92% !important;
	}
	.grid--main-block:hover .overlay {
		height: 28%;
	  	width: 92% !important;
	}
	.grid--right-block .left-block--inner .overlay,
	.left-block--inner .overlay {
		width: 84% !important;
	}
	.grid--right-block .left-block--inner:hover .overlay,
	.left-block--inner:hover .overlay {
	  	height: 28%;
	  	width: 84% !important;
	}
	.grid--left-block-2:hover .overlay {
		width: 92% !important;
	}
}

.section--intro {
	text-align: center;
	color: #535353;
}

.grid {
	margin-top: 40px;
}

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


.grid--left-block {
	/*display: flex;
    justify-content: space-between;
    flex-direction: column;*/
    float: left;
	width: 25%;
}

.grid--main-block {
	width: 50%;
	float: left;
}

.grid--right-block {
	float: right;
	width: 25%;
	/* position: relative;
	overflow: hidden; */

}

.grid--left-block-2 {
	float: left;
}

@media only screen and (max-width: 675px) {
    .grid--left-block,
    .grid--main-block,
    .grid--right-block {
    	float: none;
    	width: 100%;
    }
    .grid {
		text-align: center;
	}
	.grid--right-block,
	.grid--main-block {
		margin-top: 30px;
		margin-bottom: 30px;
	}
	.left-block--inner:last-child {
		margin-top: 30px;
	}
	.grid--left-block-2 {
		margin-top: 30px;
	}
	.nav-bar--inner {
		padding-left: 15px;
	}
	.grid .col-sm-3, .grid .col-sm-6 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	.right-block--content h3 {
		font-size: 2em;
	}
	.grid--main-block .overlay {
		width: 95.5% !important;
	}
	.grid--main-block:hover .overlay {
		width: 95.5% !important;
	}
	/* .grid--left-block .overlay,
    .grid--right-block .overlay {
		left: 59px;
	} */
	.grid--left-block #over,
    .grid--right-block #over {
		bottom: 51.5% !important;
	}
	.grid--left-block .overlay,
    .grid--right-block .overlay {
		bottom: 0% !important;
	}
	.grid--right-block .left-block--inner .overlay,
    .left-block--inner .overlay {
		width: 95.5% !important;
	}
	.grid--right-block .left-block--inner:hover .overlay,
    .left-block--inner:hover .overlay {
		width: 95.5% !important;
		height: 10% !important;
	}
	.grid--left-block-2 #over,
    .grid--left-block-2:hover #over {
		bottom: 53.3% !important;
		width: 95.5% !important;
	}
	.grid--left-block-2 .overlay,
    .grid--left-block-2:hover .overlay {
		bottom: 0% !important;
		width: 95.5% !important;
	}
	.grid--left-block-2 .left-block--inner:hover .overlay {
		height: 15% !important;
	}
	.grid--left-block-2 .left-block--inner:last-child {
		margin-top: 30px !important;
	}
}

@media only screen and (max-width: 450px) {
	.right-block--content h3 {
		font-size: 1.5em;
	}
}

@media screen and (min-width: 576px) {
	.left-block--inner:last-child {
		margin-top: 30px;
	}
	.grid--left-block-2 .left-block--inner:last-child {
		margin-top: 3px;
	}
	/*.grid--right-block .overlay, .left-block--inner .overlay {
		width: 95% !important;
	}
	.grid--left-block-2:hover .overlay {
		width: 95% !important;
	}
	.grid--left-block-2 .left-block--inner:hover .overlay {
		height: 18% !important;
	}*/
}

@media screen and (min-width: 480px) and (max-width: 550px) {
	.grid--right-block .left-block--inner .overlay,
    .left-block--inner .overlay {
		width: 94.5% !important;
	}
	.grid--right-block .left-block--inner:hover .overlay,
    .left-block--inner:hover .overlay {
		width: 94.5% !important;
	}
	.grid--left-block #over,
    .grid--right-block #over {
		bottom: 51.5% !important;
	}
	.grid--left-block-2 #over,
    .grid--left-block-2:hover #over {
		width: 94.3% !important;
		bottom: 53.7% !important;
	}
	.grid--left-block-2 .overlay,
    .grid--left-block-2:hover .overlay {
		width: 94.3% !important;
		bottom: 0% !important;
	}
	.grid--left-block-2 .left-block--inner:hover .overlay {
		height: 18% !important;
	}
}

@media screen and (min-width: 391px) and (max-width: 479px) {
	.grid--right-block .overlay,
	.grid--left-block .overlay,
	.grid--left-block-2 #over,
	.grid--left-block-2 .overlay,
	.grid--right-block:hover .overlay,
	.grid--left-block:hover .overlay,
	.grid--left-block-2:hover #over,
	.grid--left-block-2:hover .overlay {
		width: 93.5% !important;
	}
	.grid--left-block-2 .left-block--inner:hover .overlay {
		height: 20% !important;
	}
	.grid--left-block-2 #over, .grid--left-block-2:hover #over {
		bottom: 54% !important;
	}
}

@media screen and (min-width: 341px) and (max-width: 390px) {
	.grid--left-block .left-block--inner:hover .overlay,
	.grid--right-block .left-block--inner:hover .overlay {
		height: 12% !important;
	}
	.grid--left-block .left-block--inner .overlay,
	.grid--left-block .left-block--inner:hover .overlay,
    .grid--right-block .left-block--inner .overlay,
	.grid--right-block .left-block--inner:hover .overlay {
		width: 92.3% !important;
	}
	.grid--left-block-2 .left-block--inner:hover .overlay {
		height: 22% !important;
	}
	.grid--left-block-2 .left-block--inner .overlay,
	.grid--left-block-2 .left-block--inner:hover .overlay,
	.grid--left-block-2 #over,
	.grid--left-block-2:hover #over {
		width: 92.4% !important;
	}
}

@media screen and (min-width: 301px) and (max-width: 340px) {
	.grid--left-block .left-block--inner:hover .overlay,
	.grid--right-block .left-block--inner:hover .overlay {
		height: 13% !important;
	}
	.grid--left-block .left-block--inner .overlay,
	.grid--left-block .left-block--inner:hover .overlay,
    .grid--right-block .left-block--inner .overlay,
	.grid--right-block .left-block--inner:hover .overlay {
		width: 91.2% !important;
	}
	.grid--left-block-2 .left-block--inner:hover .overlay {
		height: 24% !important;
	}
	.grid--left-block-2 .left-block--inner .overlay,
	.grid--left-block-2 .left-block--inner:hover .overlay,
	.grid--left-block-2 #over,
	.grid--left-block-2:hover #over {
		width: 91.3% !important;
	}
}

@media screen and (max-width: 300px) {
	.grid--left-block .left-block--inner:hover .overlay,
	.grid--right-block .left-block--inner:hover .overlay {
		height: 14% !important;
	}
	.grid--left-block .left-block--inner .overlay,
	.grid--left-block .left-block--inner:hover .overlay,
    .grid--right-block .left-block--inner .overlay,
	.grid--right-block .left-block--inner:hover .overlay {
		width: 90% !important;
	}
	.grid--left-block-2 .left-block--inner:hover .overlay {
		height: 26% !important;
	}
	.grid--left-block-2 .left-block--inner .overlay,
	.grid--left-block-2 .left-block--inner:hover .overlay,
	.grid--left-block-2 #over,
	.grid--left-block-2:hover #over {
		width: 90.1% !important;
	}
}

#giraffe img {
	display: block;
	position: absolute;
	max-width: 100%;
	height: auto;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}


.overlay {
 	position: absolute;
  	bottom: 0;
  	background-color: #778664;
  	color: #FFF;
  	overflow: hidden;
  	width: 90%;
  	height: 0;
  	opacity: .9;
  	transition: 0.5s ease;
  	-webkit-transition: 0.5s ease;
  	-moz-transition: 0.5s ease;
  	-o-transition: 0.5s ease;
}

#over{
	bottom: 53%;
}

.grid--left-block-2 #over {
	bottom: 51.2%;
}

@media screen and (min-width: 992px) {
	.grid--right-block .left-block--inner:hover img,
	.left-block--inner:hover img,
	.grid--main-block:hover img {
		-webkit-transform: scale(1.2);
		transform: scale(1.2);
		position:relative;
		z-index: 0;
		width: 100%;
		-webkit-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
		-moz-transition: all 0.5s ease-in-out;
		-o-transition: all 0.5s ease-in-out;
    }
}


.grid--main-block:hover .overlay{
		height: 23%;
  		width: 95%;
}

@media screen and (min-width: 992px) and (max-width: 1130px) {
	.overlay {
		width: 88%;
	}
	.right-block--content {
		top: 60% !important;
	}

	.right-block--content h3 {
		font-size: 18px !important;
	}
}

.grid--right-block .left-block--inner:hover .overlay,
.left-block--inner:hover .overlay {
  	height: 23%;
  	width: 90%;
}

.grid--left-block-2:hover .overlay {
	width: 95%;
}

.top-block {
	margin-bottom: 30px;
}

.right-block--content {
	width: 100%;
	background-color: #778664;
	position: absolute;
	padding: 0 15px;
    color: #fff;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
	overflow: hidden;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
}

.right-block--content h3 {
	font-size: 24px;
}
.right-block--content p{
	font-size: 12px;
	line-height: 18px;
}


.wrap-image {
	overflow: hidden;
}