.article_top {
	height: 40vh;
	width: 100%;
	background: #333;
}
.article_thumb {
	height: 10vh;
	width: 100%;
	background: #333;
}
.article_img { 
		background:#333; 
	}
.text_top {
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.4);
	color: white;
	position: absolute;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 100%;
}
@media screen and (max-width: 2400px) {
/* start of desktop styles */
	.article_top {
		height: 40vh;
	}
	.article_thumb {
		height: 14vh;
	}
	.article_img {
		height:20vh; 
	}	
	.tt_h5 {
		display: block;
		font-size: 1.55em; 
		margin-left: 0;
		margin-right: 0;
		font-weight: bold;
	}
	.tt_h6 {
		display: block;
		font-size: 1.45em; 
		margin-left: 0;
		margin-right: 0;
		font-weight: bold;
	}
	.tt_h7 {
		display: block;
		font-size: .90em; 
		margin-left: 0;
		margin-right: 0;
		padding-top : 10px;
		font-weight: bold;
	}	
	.text_top {
		top: 50%;
		left: 50%;
		height: 100%;
	}
	.main_weather h1{
		font-size : 4.5rem ;
	}
	.main_weather h5{
		font-size : 1.2rem ;
	}
	.main_weather p{
		font-size : 1rem ;
	}
}
@media screen and (max-width: 1400px) {
/* start of desktop styles */
	.article_top {
		height: 40vh;
	}
	.article_thumb {
		height: 14vh;
	}
	.article_img {
		height:20vh; 
	}	
	.tt_h5 {
		display: block;
		font-size: 1.45em; 
		margin-left: 0;
		margin-right: 0;
		font-weight: bold;
	}
	.tt_h6 {
		display: block;
		font-size: 1.45em; 
		margin-left: 0;
		margin-right: 0;
		font-weight: bold;
	}
	.tt_h7 {
		display: block;
		font-size: .90em; 
		margin-left: 0;
		margin-right: 0;
		padding-top : 10px;
		font-weight: bold;
	}
	
	.text_top {
		top: 50%;
		left: 50%;
		height: 100%;
	}
	.main_weather h1{
		font-size : 4.5rem ;
	}
	.main_weather h1 span{
		font-size : 2.5rem ;
		margin-top:5px;
		padding-top:5px;
	}
	.main_weather h5{
		font-size : 1.2rem ;
	}
	.main_weather p{
		font-size : 1rem ;
	}
}
@media screen and (max-width: 1400px) and (max-height:700px){
/* start of large tablet styles */
	.article_top {
		height: 50vh;
	}
	.article_thumb {
		height: 14vh;
	}
	.article_img {
		height:30vh; 
	}	
	.tt_h5 {
		display: block;
		font-size: 1.55em; 
		margin-left: 0;
		margin-right: 0;
		font-weight: bold;
	}
	.tt_h6 {
		display: block;
		font-size: 1.45em; 
		margin-left: 0;
		margin-right: 0;
		font-weight: bold;
	}
	.tt_h7 {
		display: block;
		font-size: .90em; 
		margin-left: 0;
		margin-right: 0;
		padding-top : 10px;
		font-weight: bold;
	}
	.text_top {
		top: 50%;
		left: 50%;
		height: 100%;
	}
	.main_weather h1{
		font-size : 4.5rem ;
	}
	.main_weather h1 span{
		font-size : 2.5rem ;
		margin-top:5px;
		padding-top:5px;
	}
	.main_weather h5{
		font-size : 1.4rem ;
	}
	.main_weather p{
		font-size : 1.1rem ;
	}
}
@media screen and (max-width: 991px) {
/* start of large tablet styles */
	.article_top {
		height: 70vh;
	}
	.article_thumb {
		height: 14vh;
	}
	.article_img {
		height:30vh; 
	}	
	.tt_h5 {
		display: block;
		font-size: 1.55em; 
		margin-left: 0;
		margin-right: 0;
		font-weight: bold;
	}
	.tt_h6 {
		display: block;
		font-size: 1.45em; 
		margin-left: 0;
		margin-right: 0;
		font-weight: bold;
	}
	.tt_h7 {
		display: block;
		font-size: .90em; 
		margin-left: 0;
		margin-right: 0;
		padding-top : 10px;
		font-weight: bold;
	}
	.text_top {
		top: 50%;
		left: 50%;
		height: 100%;
	}
		.main_weather h1{
		font-size : 4.5rem ;
	}
	.main_weather h1 span{
		font-size : 2.5rem ;
		margin-top:5px;
		padding-top:5px;
	}
	.main_weather h5{
		font-size : 1.9rem ;
	}
	.main_weather p{
		font-size : 1.8rem ;
	}
}
@media screen and (max-width: 770px) and (max-height: 950px) {
/* start of medium tablet styles */
	.article_top {
		height: 35vh;
	}
	.article_thumb {
		height: 15vh;
	}
	.article_img {
		height:20vh; 
	}	
	.tt_h5 {
		display: block;
		font-size: 1.25em;
		margin-left: 0;
		margin-right: 0;
		font-weight: bold;
	}
	.tt_h6 {
		display: block;
		font-size: 1.3em;
		margin-left: 0;
		margin-right: 0;
		font-weight: bold;
	}
	.tt_h7 {
		display: block;
		font-size: .90em;
		margin-left: 0;
		margin-right: 0;
		font-weight: bold;
	}
	.tt_body {
		display : none ;	
	}
	.text_top {
		top: 50%;
		left: 50%;
		height: 100%;
	}
	.main_weather h1{
		font-size : 2.5rem ;
	}
	.main_weather h1 span{
		font-size : 0.9rem ;
		margin-top:5px;
		padding-top:5px;
	}
	.main_weather h5{
		font-size : 0.9rem ;
	}
	.main_weather p{
		font-size : 0.8rem ;
	}
}
@media screen and (max-width: 767px) {
/* start of medium tablet styles */
	.article_top {
		height: 45vh;
	}
	.article_thumb {
		height: 15vh;
	}
	.article_img {
		height:20vh; 
	}	
	.tt_h5 {
		display: block;
		font-size: 1.25em;
		margin-left: 0;
		margin-right: 0;
		font-weight: bold;
	}
	.tt_h6 {
		display: block;
		font-size: 1.3em;
		margin-left: 0;
		margin-right: 0;
		font-weight: bold;
	}
	.tt_h7 {
		display: block;
		font-size: .90em;
		margin-left: 0;
		margin-right: 0;
		font-weight: bold;
	}
	.tt_body {
		display : none ;	
	}
	.text_top {
		top: -75px;
		left: 50%;
		height: 20vh;
	}
	.main_weather h1{
		font-size : 2.5rem ;
	}
	.main_weather h1 span{
		font-size : 0.9rem ;
		margin-top:5px;
		padding-top:5px;
	}
	.main_weather h5{
		font-size : 0.9rem ;
	}
	.main_weather p{
		font-size : 0.8rem ;
	}
}
@media screen and (max-width: 767px) and (max-height: 400px) {
/* start of medium tablet styles */
	.article_top {
		height: 75vh;
	}
	.article_thumb {
		height: 25vh;
	}
	.article_img {
		height:30vh; 
	}	
	.tt_h5 {
		display: block;
		font-size: 1.25em;
		margin-left: 0;
		margin-right: 0;
		font-weight: bold;
	}
	.tt_h6 {
		display: block;
		font-size: 1.3em;
		margin-left: 0;
		margin-right: 0;
		font-weight: bold;
	}
	.tt_h7 {
		display: block;
		font-size: .90em;
		margin-left: 0;
		margin-right: 0;
		font-weight: bold;
	}
	.tt_body {
		display : none ;	
	}
	.text_top {
		top: -70px;
		left: 50%;
		height: 40vh;
	}
	.main_weather h1{
		font-size : 2.5rem ;
	} 
	.main_weather h1 span{
		font-size : 0.9rem ;
		margin-top:5px;
		padding-top:5px;
	}
	.main_weather h5{
		font-size : 0.9rem ;
	}
	.main_weather p{
		font-size : 0.8rem ;
	}
}

@media screen and (max-width: 479px){
/* start of phone styles */
	.article_top {
		height: 50vh;
	}
	.article_thumb {
		height: 20vh;
	}
	.article_img {
		height:20vh; 
	}	
	.tt_h5 {
		display: block;
		font-size: 1.1em; 
		margin-left: 0;
		margin-right: 0;
		font-weight: bold;
	}
	.tt_h6 {
		display: block;
		font-size: 0.95em; 
		margin-left: 0;
		margin-right: 0;
		font-weight: bold;
	}
	.tt_h7 {
		display: block;
		font-size: .90em; 
		margin-left: 0;
		margin-right: 0;
		padding-top : 10px;
		font-weight: bold;
	}
	.tt_body {
		display : none ;	
	}
	.text_top {
		top: -100px;
		left: 50%;
		height: 100%;
	}
	.main_weather h1{
		font-size : 2.5rem ;
	} 
	.main_weather h1 span{
		font-size : 0.9rem ;
		margin-top:5px;
		padding-top:5px;
	}
	.main_weather h5{
		font-size : 0.9rem ;
	}
	.main_weather p{
		font-size : 0.8rem ;
	}
}