@media (orientation: landscape) and (max-height:460px){
.rotate{position:fixed; top:0; left:0; height:100%; width:100%; background-color:#333; display:block;}
.rotate img{width:100px; height:auto; top:50%; left:50%; position:absolute; transform:translate(-50%,-50%);}
}

@media (max-width:820px){
.desktop{display:none !important;}
.mobile{display:block !important;}
body{display:block;}
.container{width:100%; height:100%; border-radius:0; transform:translate(0,0);}
.logo{top:3%; right:20px; width:20%; }
.tagline{top:20%; width:50%;}
.logo-nasal{width:70%; top:40%;}
.logo-nasal.active{top:25%; width:60%;}
.tagline2{top:10%; width:30%;}
.introtext{top:55%; width:100%; padding:0;}
.video{width:auto; height:100%; left:50%; transform:translateX(-50%); }
.navbt{bottom:20px; left:20px;}
.otrivin-logo{position:absolute; bottom:20px; right:20px}
.zonetext, .dropdown{top:17%; left:65%; }
.zonebt{top:9.5%; left:50%; transform:translateX(-50%)  scale(0.8);}

.mapbg{background-image:url(../images/m-map.jpg); }
.map{background-size:cover;}
.india{background-image:url(../images/m-india.jpg);}
.east{background-image:url(../images/m-east.jpg);}
.west{background-image:url(../images/m-west.jpg);}
.north{background-image:url(../images/m-north.jpg);}
.south{background-image:url(../images/m-south.jpg);}
.popup.active{z-index:2;}
.details{width:100%; height:100%; border-radius:0; margin-top:0; background-size:auto 110%;}
.details.active{background-size:auto 100%;}
.head{margin-top:60px;}
.detailsclose{right:20px; top:70px; }
.details .tablediv{margin-top:30px;}
.table{width:90vw;}
.table .row{width:100%}
.table .row .col{width:30%;}
.table .row .col.chage{width:14%;}
.details .tablebg{background-color:#F00; border-radius:10px; position:absolute;  z-index:-1; top:0; left:30%; margin-left:5px; width:15%; height:100%;}
.nciscale{margin-left:5vw; width:25vw; margin-top:25px;}
.nciscale h1{color:#fff;}
.nciscale h1 span{font-size:50%;}
.tabletext{width:60vw; margin-top:10vh; transform:none; margin-left:5vw; font-size:300%;}
.lefttext, .righttext{width:100%; padding-right:0; padding-bottom:15px;}
.righttext{padding-left:0; border:none; border-top:1px solid #f9ae33; padding-top:15px;}

ul.metro{top:50%; margin-top:0; transform:translateY(-52%);}
ul.metro li{height:70vh;}
ul.metro li .metrodetails{height:63vh;}

.pack{width:100%;}


ul.congestion.mobile{margin:0; padding:0; top:50%; transform:translateY(-50%); list-style:none; width:94%; margin-left:3%;}
}

@media (max-width:600px){
body{font-size:8px; overflow-x:hidden;}
.logo{width:25%;}
.tagline{top:25%; width:70%;}
.logo-nasal{width:80%; top:40%;}
.logo-nasal.active{top:23%; width:70%;}
.tagline2{top:10%; width:38%; left:-15px;}

.introtext{top:46%;}
.introtext div{width:100%; margin-bottom:20px;}
.introtext div img{width:30%; float:left;}
.introtext div p{width:65%; float:left; text-align:left; padding:0; margin:0;}

.zonetext{top:18%; left:70%; font-size:180%; margin-right:5px;}
.zonebt{top:9.5%; left:50%; transform:translateX(-50%)  scale(0.8);}
.metrobt{position:absolute; bottom:80px; right:50%; transform:translateX(50%); margin:0; padding:10px 20px; font-size:240%}
.dropdown{top: 20%; left: 70%; width: 24%; padding:10px; border-radius:10px;}
.dropdown span{font-size:250%; text-align:left;}
.dropdown .citylist{max-height:50vh;}
.dropdown .citylist ul{padding:0;}


.head .date{padding-left:35px;}
.head .time{line-height:30px; padding-left:35px; margin-top:10px}
.detailsclose{right:inherit; left:5px; top:5px; }
.nciscale h1{color:#fff; font-size:400%;}
.nciscale h1 span{font-size:50%;}
.nciscale ul li{margin-bottom:5px; font-size:220%;}
.nciscale ul li div{width:35px; height:35px; line-height:35px; }
.nciscale ul li div.active{height:80px;  width:80px;  font-size:300%; position:relative;}
.tabletext{font-size:200%; font-weight:500;}
ul.metro {width:100%; margin-left:0;}
ul.metro li { width: 80vw; margin: 0 10vw; }
.metrodetails{transform:scale(0.9);}
.owl-item.active .metrodetails{transform:scale(1);}
.metrodetails table td{font-size:320%;}
ul.metro li .scale span.scale{font-size:1000%;}

.otrivin-logo{width:20%;}
.navbt a{height:40px; width:40px; line-height:40px; font-size:300%;}

.title-nasal{width:90%;}

ul.congestion.mobile{top:50%; transform:translateY(-35%); width:100%; margin-left:0%;}



}
@media (max-width:380px){	
.introtext{top:50%;}
	.introtext div{width:95%; margin-bottom:15px;}
	.introtext div img{width:25%;}
	.introtext div p{width:70%; line-height:1.3}
	.zonebt{top:9.5%; left:50%; transform:translateX(-50%)  scale(0.65);}
	.head{margin-top:40px;}
	.nciscale h1{font-size:300%; margin-bottom:15px;}
	.nciscale h1 span{font-size:50%;}
	.nciscale ul li div{width:30px; height:30px; line-height:30px; }
	.details .tablediv{margin-top:20px;}
	.detailsclose{right:0px; left:0; top:0px; border-radius:0;}
	.title-nasal{top:70px;}
}