@charset "utf-8";
/* CSS Document */
@media only screen and (max-width:520px){
    .round-total-case, .round-total-death, .round-total-recovery {
        width: 10px !important;
        height: 10px !important;
        left: 0;
        top: 6.5px !important;

    }
    .close{background-color: #FF0000 !important; color:  #fff !important}
    .case{padding-left: 17px !important}
    .round{font-size: 20px;}
    .covid-19 h1{font-size: 75px !important;}
    .desk{display: none !important}
    .mob{display: block !important}
    .descriptions{
        position: absolute;
        left: 0;
        right: 0;
        text-align: center;
        bottom: -36px !important;
        z-index: 10000
    }
    .descriptions p{
        font-size: 20px !important 
    }
}
@media only screen and (max-width:768px){
    .corona-container-small, .corona-container-extra-large, .corona-container-large, .corona-container-medium{
        padding: 0 20px !important
    }
    .show-more-top{margin: 0 !important; width: 100% !important;;}
    .show-more{margin: 10px 0 !important; width: 100% !important;;}
    #info-box{
        bottom:0 !important;
        top: inherit!important;
        left: 0!important;
        right: 0 !important;
        width: 100% !important; 
        position: fixed !important;
        font-size: 18px !important ;
        border-radius: 0 !important;

    }

    .close-btn{display: block !important}
    .storyDispn{color: #333 !important}
    .logo-manorama{max-width: 230px !important}
    .title-group{padding-top: 20px !important}
    #rotate {
        background-color: rgba(0,0,0);
        height: 100%;
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;	
        width: 100%;
        z-index: 100000;
        color: #fff;
        font-family: 'Roboto', sans-serif;
        font-size: 15px
    }
    .mob {
        display: block !important;
    }
    .each-section{
        margin:15px 0 !important
    }

    .world-map-outer, .china-map-outer, india-map-outer{
        overflow: auto
    }
    .world-map-width{
        width: 1500px !important
    }
    .china-map-width{
        width: 1200px;
    }
    .india-map-width{
        width: 1200px;
    }
    .title{
        padding-top: 0 !important
    }
    .virus-6{left: 43% !important}
    .cases-list{margin: 0 !important }
    .virus-4{
        left: 14% !important;
        bottom: 21% !important;
        max-width: 90px !important;
        max-width: 90px !important
    }
    .virus-3{
        max-width: 50px !important;
        height: 50px !important;
        position: absolute;
        right: 18% !important;;
        top: 25% !important;
    }
    .virus-2{
        left:28% !important;
        top: 27% !important;
        margin-left: -90px;
    }
    .virus-5{
        right: 7% !important;
        top: 41% !important;
    }
    .virus-6 {

        left: 40%!important;
        top: 41% !important;    
    }
    .virus-1{
        right: 19% !important;
        max-width: 90px !important;
        max-width: 90px !important;
        bottom: 13% !important;
    }
    .total-case{width: 50% !important; margin: 0 !important}
    .total-case .counter, .total-death .counter{
        font-size: 32px !important;
    }
    .total-case, .total-death{
        text-align: center !important
    }
    .cases-list{
        width: 100% !important
    }
    .world-list ul li{
        width: 100% !important;
        margin: 0 !important
    }
    .hint{margin-left: 0!important; margin-right: 0!important}
}
@media only screen and (max-width:768px){
    .mainfooter{padding-bottom: 0 !important}
    .storylist-li {
        width: 100% !important;
        margin-bottom: 5px;
        padding: 10px 0;
    }
    .storyIn {
        background-color: #fff;
        width: 100%;
        border: 1px solid #ddd;
        display: -webkit-box ;
        display: -ms-flexbox;
        display: flex ;
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
    }
    .storyIn:after {
        content: "";
        display: table;
        clear: both;
    }
    .social-media-main{ z-index: 10}
    .storyImg {
        float: left;
        width: 100px;
        display: -webkit-box ;
        display: -ms-flexbox;
        display: flex ;
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
    }
    .storyDispn {
        overflow: hidden;
        text-align: left;
        padding-left: 10px;
        padding-right: 10px;
        max-height: 36px;
    }
    .cmlogo{
        float: left;
    }
}
/* only when orientation is in portrait mode */
@media all and (orientation:landscape) {
    #rotate{
        display: block !important;
    }
}
@media screen and (max-width: 1300px) , screen and (max-height: 680px) {
    .bottom-image{max-width: 750px !important; }
}
@media only screen and (max-width:1020px){
    .date-block{
        left: 23px !important;
        text-align: left !important
    }
    .time-line-inner{
        margin-top: 35px;
    }
			.time-line-block{padding-left: 20px !important;}
}
@media only screen and (max-width:500px){
/*
	.bg {
    background-image: url("../images/bg-mobile.jpg") !important;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #02233f;
    display: -webkit-box ;
    display: -ms-flexbox;
    display: flex ;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}
*/
	.title, .title-block{
    max-width: 350px;
	width: 100%;
    position: relative;
	display: block;
	
}
	.time-line-title h1{
		font-size: 35px !important
	}
	.title-block{
	padding: 20px;
}
}