.newsletters-post-div {
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.newsletters-image-div{
	flex: 0 0 50%;
	max-width: 40%;
	overflow: hidden;
	display: block;
	height: 400px;
}

.pdf-preview {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.newsletters-content-div {
	flex: 0 0 50%;
	max-width: 60%;
	margin: 1%;
	margin-left: 4%;
	display: flex;
	flex-direction: column;
}

.newsletters-text-div {
	flex: 0 0 80%;
	max-height: 80%;
}

.newsletters-button-div {
	flex: 0 0 20%;
	max-height: 20%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.newsletters-button-form {
	width: 75%;
	height: 70%;
}

.newsletters-button {
	width: 100%;
	height: 100%;
	background-color: #6EB8CA;
}

.newsletters-button:hover {
	background-color: white;
	color: #6EB8CA;
}

/* for listing out the posts in a uniform way */
ul.no-bullets li{
  margin: 40px 0px;
  padding: 0;
}

div.shadow {
  box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}

/* first change in content width in desktop version */
@media (min-width: 992px) and (max-width: 1200px) {
	.newsletters-image-div{
		height: 375px;
	}
}

/* second change in content width in desktop version */
@media (min-width: 768px) and (max-width: 992px) {
	.newsletters-image-div{
		height: 400px;
	}
}

/* mobile version width */
@media (max-width: 768px) {
	.newsletters-post-div {
		flex-direction: column;
	}

  	.newsletters-image-div{
		flex: 0 0 100%;
		max-width: none;
		overflow: hidden;
		display: block;
		max-height: 350px;
	}

	.newsletters-content-div {
		flex: 0 0 100%;
		max-width: none;
		margin: 2% 5%;
		margin-bottom: 5%;
		display: flex;
		flex-direction: column;
	}

	.pdf-preview {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-left-radius: 0px;
	}
}