/*Desktop Styles*/

@media(min-width: 1200px){
	.post-container{
	    width: 95%;
	    margin: auto;
	    border-radius: 15px;
	    height: 330px;
	    overflow: hidden;
	}

	.post-holder{
		position: relative;
		height: 100%;
	}

	.post-img-holder{
		width: 100%;
		transition: .4s;
	}

	.post-img{
			width: 100%;
			position: relative;
			overflow: hidden;
			background-size: cover;
			border-radius: 10px;
			height: 350px;
			transition: .3s;
	}

	.post-img img{
			min-width: 100%;
			height: 100%;
			background-size: cover;
			background-position: center;
			transform: scale(1.1);
			position:absolute;
	}

	.post-title-holder{
		padding: 5px 5px;
		position: absolute;
		top: 220px;
		font-size: 16px;
		text-align: center;
		color: white;
		transition: .4s;
		width: 97%;
	}

	.post-title-holder h1{
		font-weight: 500;
	}

	.post-description-holder{
		padding: 0 15px;
		position: absolute;
		top: 315px;
		color: white;
		text-align: center;
	}

	.post-overlay{
		top: 0;
		position: absolute;
		width: 100%;
		height: 100%;
		background: -webkit-linear-gradient(top, rgba(27,117,188,0), #1b75bc 350px);
		transition: .4s;
	}

	.post-holder:hover .post-title-holder,
	.post-holder:hover .post-overlay{
		transition: .4s;
		top: 0;
	}

	.post-holder:hover .post-title-holder{
		top: 50px;
	}

	.post-holder:hover .post-overlay{
		background: #1b75bc;
		transition: .3s;
		opacity: .8;
	}

	.post-holder:hover .post-description-holder{
		top: 150px;
		transition: .4s;
		text-align: center;
	}

	#blog-advice{
		white-space: nowrap;
		padding: 0;
    	padding-top: 35px;
	}

	.advices-container{
		padding-top: 20px;
	}

}


@media(min-width: 1024px) and (max-width: 1199px) {
	.post-container{
	    width: 95%;
	    margin: auto;
	    border-radius: 15px;
	    height: 330px;
	    overflow: hidden;
	}

	.post-holder{
		position: relative;
		height: 100%;
	}

	.post-img-holder{
		width: 100%;
		transition: .4s;
	}

	.post-img{
			width: 100%;
			position: relative;
			overflow: hidden;
			background-size: cover;
			border-radius: 10px;
			height: 350px;
			transition: .3s;
	}

	.post-img img{
			min-width: 100%;
			height: 100%;
			background-size: cover;
			background-position: center;
			transform: scale(1.1);
			position:absolute;
	}

	.post-title-holder{
		padding: 5px 5px;
		position: absolute;
		top: 220px;
		font-size: 16px;
		text-align: center;
		color: white;
		transition: .4s;
		width: 97%;
	}

	.post-title-holder h1{
		font-weight: 500;
	}

	.post-description-holder{
		padding: 0 15px;
		position: absolute;
		top: 315px;
		color: white;
		text-align: center;
	}

	.post-overlay{
		top: 0;
		position: absolute;
		width: 100%;
		height: 100%;
		background: -webkit-linear-gradient(top, rgba(27,117,188,0), #1b75bc 350px);
		transition: .4s;
	}

	.post-holder:hover .post-title-holder,
	.post-holder:hover .post-overlay{
		transition: .4s;
		top: 0;
	}

	.post-holder:hover .post-title-holder{
		top: 50px;
	}

	.post-holder:hover .post-overlay{
		background: #1b75bc;
		transition: .3s;
		opacity: .8;
	}

	.post-holder:hover .post-description-holder{
		top: 150px;
		transition: .4s;
		text-align: center;
	}

	#blog-advice{
		white-space: nowrap;
		padding: 0;
	}

	
}


@media(min-width: 651px) and (max-width: 1023px){
	.post-container{
    	width: 100%;
	    margin: auto;
	    border-radius: 15px;
	    height: 330px;
	    overflow: hidden;
	}

	.post-holder{
		position: relative;
		height: 100%;
	}

	.post-img-holder{
		width: 100%;
		transition: .4s;
	}

	.post-img{
			width: 100%;
			position: relative;
			overflow: hidden;
			background-size: cover;
			border-radius: 10px;
			height: 350px;
			transition: .3s;
	}

	.post-img img{
			min-width: 100%;
			height: 100%;
			background-size: cover;
			background-position: center;
			transform: scale(1.1);
			position:absolute;
	}

	.post-title-holder{
		padding: 5px 5px;
		position: absolute;
		top: 220px;
		font-size: 16px;
		text-align: center;
		color: white;
		transition: .4s;
		width: 97%;
	}

	.post-title-holder h1{
		font-weight: 500;
	}

	.post-description-holder{
		padding: 0 15px;
		position: absolute;
		top: 315px;
		color: white;
		text-align: center;
	}

	.post-overlay{
		top: 0;
		position: absolute;
		width: 100%;
		height: 100%;
		background: -webkit-linear-gradient(top, rgba(27,117,188,0), #1b75bc 350px);
		transition: .4s;
	}


	#blog-advice{
		white-space: nowrap;
		padding: 0;
	}

	.blog-page-post-container{
		margin-bottom: 4px;
	}
}


@media(max-width: 650px){
	.post-container{
	    width: 95%;
	    margin: auto;
	    border-radius: 15px;
	    height: 330px;
	    overflow: hidden;
	}

	.post-holder{
		position: relative;
		height: 100%;
	}

	.post-img-holder{
		width: 100%;
		transition: .4s;
	}

	.post-img{
			width: 100%;
			position: relative;
			overflow: hidden;
			background-size: cover;
			border-radius: 10px;
			height: 350px;
			transition: .3s;
	}

	.post-img img{
			min-width: 100%;
			height: 100%;
			background-size: cover;
			background-position: center;
			transform: scale(1.1);
			position:absolute;
	}

	.post-title-holder{
		padding: 5px 5px;
		position: absolute;
		top: 220px;
		font-size: 16px;
		text-align: center;
		color: white;
		transition: .4s;
		width: 97%;
	}

	.post-title-holder h1{
		font-weight: 500;
	}

	.post-description-holder{
		padding: 0 15px;
		position: absolute;
		top: 315px;
		color: white;
		text-align: center;
	}

	.post-overlay{
		top: 0;
		position: absolute;
		width: 100%;
		height: 100%;
		background: -webkit-linear-gradient(top, rgba(27,117,188,0), #1b75bc 350px);
		transition: .4s;
	}


	#blog-advice{
		white-space: nowrap;
		padding: 0;
	}


	
}
