.cc {
  position: relative;
  width: 105%;
}

.image {
	border-radius: 1px;
	display: block;
}
.image2 {
	border-radius: 1px;
	display: block;
	max-width: 100%;
	max-height: 300px;
}



.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #ccc;
}

.cc:hover .overlay {
  opacity: 0.65;
}

.text {
  color: #000;
  font-size: 20px;
  position: absolute;
  top: 35%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;


}

@media screen and (min-width: 1025px) and (max-width: 3596px) {
.image {
 text-align:center;
	border-radius: 5px;
	display: block;
	max-height: 470px;
}
.image2 {
	border-radius: 1px;
	display: block;
		max-width: 100%;
	max-height: 400px;

}


@media screen and (min-width: 721px) and (max-width: 1024px) {

.image {
	width: 100%;
}

.image2 {
	max-width: 100%;
	max-height: 520px;

}

@media screen and (min-width: 360px) and (max-width: 719px) {

.image {
	width: 100%;
}

.image2 {
	width: 100%;

}
}