:root{
  --font-family: "poppins", sans-serif;
  --font-weight: 400;
  --font-style: normal;
}

*{
   font-family: var(--font-family);
   font-weight: var(--font-weight);
}


html{
  scroll-behavior: smooth;
}

body{
  margin:0px ! important;
}

main{
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right); 
  margin-bottom:100px !important;
}

section{
  margin-top:0px ! important; 
}



.d-block, .card-body, video, #dImg, #cutImg, #politicoImg, #mImg{
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
	border-radius: 12px;
}

.container-fluid h1{
	padding-top: 0px;
}


a{
	color:black !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	
}

#lN{
  font-weight:500 ! important;
}

#hedin{font-size:2vw !important; margin-top:0px;
    font-weight:bold;
}

#introI{font-size:2vw !important; margin-top:5px; font-weight:normal;}

em{
    color:green;
    font-style:normal;
}

.row h1{
	font-size: 2vw;	
}

.col-sm-7{
    background:whitesmoke ! important;
    border-radius:12px ! important;
   
}
	
#hTd{width: 300px;}


#detailImg{
    width:100% ! important;
    height: auto ! important;
    aspect-ratio: 16/9 ! important;
    margin-top:10px ! important;
}

img{width: 100%;}
	
#dImg{width: 100%; height:420px;}

	
#cutImg{width: 100%;}
	
#mTd{width: 200px;}
	
#mImg{width: 100%;}

video{width: 100%;}

	
#dRow{

	 width: 100%;
	 margin: auto;
	 margin-top:20px; 
	 align-content: center; 
	 align-items: center;	
		
  }
	
.vFluid{
    margin-top:-20px ! important;
}
	

.prodDiv{
	margin-top:0px;
	align-content: center; 
	align-items: center;
	}
	
.card-deck{
  margin-top:0px; 
  border-width:0px;
  border:none ! important;
}
	
.card-body{
  border:none ! important;

}

#pimg{
  width:100%;
  object-fit: scale-down;
  border-radius: 5px;
  margin-bottom: 10px;
}
	
#pimg:hover{
	transition: all 0.3s ease;
	transform: scale(1.4); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
	border-radius: 5px;	
}


#h1{padding-left:25px;}

#latest{
   padding-left:0px; 
}

#hE{padding-left:25px; padding-top:50px;}


	

marquee{
    padding-top:40px;
}

.carousel-control-prev, .carousel-control-next{
    margin-top:80px ! important;
}
	
.firstSection{
    
   padding-top:20px ! important;
   padding-bottom:0px;
   
}


.secondSection{
   padding-top:0px ! important;
   padding-bottom: 10px;
   
}


.thirdSection{
    
   padding-top:10px ! important;
   padding-bottom: 10px;
   
}


.fourthSection{
   padding-top:10px ! important;
   padding-bottom: 100px;
   
}

.vidDiv{
 	padding-top:20px ! important;
	background: aliceblue ! important;;
    border-radius:12px ! important;;
}

.metroDiv{
   padding-top:100px ! important;
   padding-bottom: 0px;	
}
	
.latestDiv{
	padding-top:20px ! important;
	background: aliceblue ! important;;
    border-radius:12px ! important;;
}


 .content{
	display: none !important;
 }

 #ch{
	display: none !important;
 }

  #ch:checked ~ .content{
	display: block !important;
 }

#ch:checked ~ label{
	display: none !important;
 }


 label{
	display: inline-block !important;
	color: white !important;
	cursor: pointer !important;
	background: red !important;
	padding: 3px 13px !important;
	border-radius: 12px !important;
	margin-top: 12px !important;
	width: 40% !important;

 }	


#body::first-letter{
  font-size: 1.5rem;
  font-weight: bold;
  color: brown;
}


	
 /*For Desktop View*/

@media screen and (min-device-width: 1025px){
    
main{
margin-bottom:100px !important;
}

marquee{
  	font-size: 1vw !important;
}
	
#mobile, .mobile {display: none;}

a{
	font-size: 1vw !important;
}

em{
	font-size: 0.8vw !important;
}

.secondSection{
    
   padding-left:100px ! important;
   
}

.row{
  
  
}

.row h1{
	font-size: 1vw ! important;	
}

.myRow{
 
}

.col-sm-7{
    background:whitesmoke ! important;
    margin-left:-48px ! important;
}

	
.polDiv{
    width:92% ! important;
}

.col-sm-5 h1, .col-sm-3  h1{
	padding: 0px;
	font-size: 1vw ! important;	
}

.carousel-item h3{
  font-size:1.3vw ! important;
}

#date{
    font-size: 0.2vw !important;
}


 label{
  width: 20% !important;

 }	


.d-block, video{
  width:100% !important;
  max-height:460px !important;
  margin-top:0px;
}	

#hTd{
 margin-top:0px;
 width: 240px !important;
   
}

#mTd{
    margin-top:0px;
   
}

#h1{
  margin-left:-50px ! important;
}


#vh1{
  margin-left:50px ! important;
  margin-top:20px ! important;
  margin-bottom:-50px ! important;
}

#hedin{
   font-size: 0.5vw !important;
   margin-top:0px;
}

#introI{
    font-size:0.2vw !important;
     margin-top:5px;
    
}

	
#introP{
	 margin-top:0px;
}


#latest{
    font-size: 0.6vw !important; 
    margin-top:0px;
    
}



#lN{
    font-size:5vw !important;
    margin-top:0px;
   
}

	
#dRow{
    margin-top:42px;
    width:92% ! important;
}
	
	
.prodDiv{
	margin-top:0px;
	align-content: center; 
	align-items: center;
	}



#mImg{
   
}


#dImg{
    height:500px !important;
    
}

#pimg{
  width:100% !important;
  height: auto !important;
  max-height:220px !important;
  margin-top:0px;
  object-fit: scale-down;
  border-radius: 5px;
  margin-bottom: 0px;
}	


#politicoImg{
    
  width:150px;
  max-height:220px !important;
  margin-top:0px;
  object-fit: scale-down;
  border-radius: 5px;
  margin-bottom: 0px; 
}

.card-body{
  width:100%;
  max-height: 320px;
}

	
.card-body h1{
  font-size:1vw ! important;

}

.card-title{
  margin-top:0px;
  
}

.card-footer{
	margin-top:60px;
}	



    
}
	

	
/* For Tablet Landscape View */
@media only screen and (min-device-width: 641px)
and (max-device-width: 1024px) {
    
 	
.card-body h1{
  font-size:1vw ! important;

}

}
	
	

/* For Tablet Portrait View */
@media only screen and (min-device-width: 421px)
and (max-device-width: 640px) {
	
	
.card-body h1{
  font-size:2vw ! important;

}


}
		

@media screen and (max-width:420px){
	
#desk, .col-sm-3{display: none;}

main{
   padding-left:5px ! important;
   padding-right:5px ! important;
}


marquee{
  margin-top:0px ! important;
  font-size: 3vw ! important;
}


.carousel{
  margin-top:-18px ! important;
}

.carousel-item h3{
    font-size:4vw ! important;
}

h1{
 font-size:3.2vw ! important;
}

h3{
  font-size:4.5vw ! important;
}

.col-sm-7{
  margin-bottom:20px ! important;
   
}

 #vidVid, #dImg, #cutImg, #politicoImg, #mImg{
	width: 100%;
	height: auto;
	aspect-ratio: 10/8;
	border-radius: 12px;
}

.d-block, video{
  	width: 100%;
	height: auto;
	aspect-ratio: 10/7;
	border-radius: 12px;  
}


#topVid{
    margin-top:-10px ! important;
}

.autor{
    font-size:3vw ! important;
}

#hTd{
    width: 200px; 
   font-size:4.5vw !important;
    
}

#cutImg{width: 100%;}


#mTd{
    width: 200px;
    font-size:2.6vw !important;
}

#mImg{width: 100%;}


a {color:black !important;}


em{
   font-size:2.4vw ! important;
}
	

#lN{
    font-size:3vw !important;
    margin-top:0px;
   
}



#pimg{
  width:100%;
  max-height:350px;
  margin-top:0px;
  margin-bottom: 10px;
  object-fit:contain;
  border-radius: 5px;
  
}

#politicoImg{
  width:100%;
  max-height:320px;
  margin-top:0px;
  margin-bottom: 10px;
  object-fit:contain;
  border-radius: 5px;
   
}


#hedin{font-size:4vw !important; margin-top:0px;}

#introI{font-size:4vw !important; margin-top:5px;}

#h1{
    font-size:6vw !important; 
    margin-top:-10px ! important; 
    padding-left:0px ! important;
}

#vh1{
    font-size:6vw !important; 
    margin-top:0px; 
    padding-left:14px ! important;
}


#latest{font-size:6vw !important; margin-top:0px;}

#hE{padding-left:0px; font-size:6vw !important; margin-top:0px; }

#dRow{
  margin-top:0px ! important;
}

#body{
  font-size:3vw ! important;
}

.vFluid{
    margin-top:-50px ! important;
}

.prodDiv{
	margin-top:0px;
	align-content: center; 
	align-items: center;
	}
	
.card{
    height:auto ! important;
    margin-top:-10px ! important;
}

.card p{
   
}
	
.card-deck{
  margin-top:10px; 
  border-width:0px;
}
	
.card-body{
  max-height:450px;

}

.card-body h1{
  font-size:3.2vw ! important;

}

#vidVid{
    max-height:150px ! important;
}


#introP{
	font-size:3.2vw; margin-top:0px;
}


#date{
    font-size: 1.1vw !important;
}


.desK{
    display:none ! important;
}

.metroDiv{
  margin-top:-70px ! important;
}

label{
 
}

}