.loader {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 1);
    position: fixed;
    overflow: auto;
    top: 0;
    left: 0;
    z-index: 999;
    display: block;
}
@keyframes ldio-v6g4je6oqv {
  0% {
    top: 70.5px;
    left: 70.5px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 17.25px;
    left: 17.25px;
    width: 106.5px;
    height: 106.5px;
    opacity: 0;
  }
}

.ldio-v6g4je6oqv div {
  position: absolute;
  border-width: 4.5px;
  border-style: solid;
  opacity: 1;
  border-radius: 50%;
  animation: ldio-v6g4je6oqv 1s cubic-bezier(0,0.2,0.8,1) infinite;
}

.ldio-v6g4je6oqv div:nth-child(1) {
  border-color: #faa734
}

.ldio-v6g4je6oqv div:nth-child(2) {
  border-color: #332a86;
  animation-delay: -0.5s;
}

.loadingio-spinner-ripple-rf50obiksdm {
  width: 150px;
  height: 150px;
  display: inline-block;
  overflow: hidden;
  background: none;
  position:absolute;
  top:50%; left:50%; z-index:99; position:fixed; transform: translate(-50%, -50%);
}
.ldio-v6g4je6oqv {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-v6g4je6oqv div { box-sizing: content-box; }
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



html{height:100%; width:100%; -webkit-appearance: none; -moz-appearance:none; appearance:none; }
body{margin:0; padding:0; height:100%; width:100%; font-family: "Poppins", sans-serif; font-size:10px; line-height:1; color:#606060; display:flex; justify-content:center;  align-items: center; }
*, input, a{-webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}
a, a:hover, input, .template img{text-decoration:none;}
.animate{}

h1, h2{margin:0; padding:0; line-height:normal; font-weight:normal; }
.hide{display:none;}
::placeholder {
  color: #0033a1;
  opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12 -18 */
  color: #0033a1;
}

.mobile{display:none !important;}
.rotate{display:none;}
a.textlink{color:#2e3192; font-size:1rem; text-decoration:underline;}
a.textlink:hover{color:#f7941d; text-decoration:underline;}
.combt{display:inline-block; color:#fff; background-color:#fcbe58; border:none; border-radius:50px; font-size:250%; font-weight:700;  padding:5px 20px;
box-shadow:inset 0 0 15px #e89d22; cursor:pointer; margin-right:15px; text-transform:uppercase;}
.combt:hover{background-color:#0033a1; box-shadow:inset 0 0 15px #02246e;}
.container{width:1024px; height:768px; position:relative; background-color:#fff; border-radius:8px; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; overflow:hidden;}
.logo{position:absolute; top:33px; right:38px; z-index:2;}

.fotter{position:absolute; bottom:20px; left:58px}
.otrivin-logo{position:absolute; bottom:20px; right:66px}

/* screen 1 */
.tagline{position:absolute; top:167px; left:0;}
.logo-nasal{position:absolute; top:288px; left:50%; transform:translate(-50%,0);}
.logo-nasal.active{top:115px; width:410px}


.tagline2{position:absolute; top:50px; left:0; opacity:0;}
.introtext{position:absolute; top:377px; left:0; width:90%; padding:0 5%;}
.introtext div{width:30%; float:left; padding:0 1.5%; text-align:center; font-size:200%; }
.introtext div p{line-height:1.5; padding:0 15px; font-weight:600}

.video{width:100%; height:100%; position:absolute; top:0; left:0;}

.title-nasal{position:absolute; top:94px; left:50%;  transform:translateX(-50%)}
.pack{position:absolute; top:246px; left:0; }
/*Zone Start*/
.map{background-repeat:no-repeat; background-position:center; height:100%; width:100%;}
.india{background-image:url(../images/india.png);}
.east{background-image:url(../images/east.png);}
.west{background-image:url(../images/west.png);}
.north{background-image:url(../images/north.png);}
.south{background-image:url(../images/south.png);}

.zonebt{width:190px; height:190px; position:absolute; top:90px; left:570px; background:url(../images/zonebt-bg.png) no-repeat center;}
.zonebt a{height:55px; width:55px; background-color:#e1ecfa; border:1px solid #fff; border-radius:50%; color:#0033a1; font-size:280%; font-weight:600; line-height:55px; text-align:center; cursor:pointer; box-shadow: rgba(100, 100, 111, 0.5) 0px 7px 29px 0px; position:absolute;}
.zonebt a:hover{background-color:#fcbe58; color:#fff;}
.zonebt a.n-bt{top:0px; left:66.5px;}
.zonebt a.s-bt{bottom:0px; left:66.5px;}
.zonebt a.e-bt{top:66.5px; right:0;}
.zonebt a.w-bt{top:66.5px; left:0;}
.zonetext{position:absolute; top:160px; left:780px; color:#0033a1; font-size:210%; font-weight:600; line-height:1.2;}
.zonebt a.active{background-color:#0033a1; color:#fff;}

.dropdown{position:absolute; top:160px; left:780px; background-color:rgba(255,255,255,0.95);  padding:10px 25px; border-radius:20px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; width:150px; cursor:pointer; display:none;}
.dropdown span{font-weight:700; font-size:300%; color:#0033a1; display:block;  text-transform:uppercase; text-align:center;}
.dropdown .citylist{width:100%; max-height:400px; height:0; font-size:200%; font-weight:300; color:#0033a1; overflow:auto; overflow-x:hidden; }
.dropdown .citylist ul{list-style:none; padding:20px 0; margin:0;}
.dropdown .citylist li{line-height:1.7; cursor:pointer; text-transform:capitalize;}
.dropdown .citylist li:hover{color:#fcbe58;}



.metrobt{position:absolute; bottom:80px; right:40px; padding:10px 20px; font-size:270%}


.popup{width:100%; height:100%; position:absolute; top:0; left:0; background-color:#FFF; opacity:0; visibility:hidden; transform:scale(0.8);}
.popup.active{visibility:visible; transform:scale(1); opacity:1;}
.nciscale{width:266px; text-align:center; margin-top:70px; float:left;}
.nciscale h1{font-size:510%; font-weight:700; color:#0033a1;line-height:0.6; margin-bottom:25px;}
.nciscale h1 span{font-size:60%; }
.nciscale ul, .nciscale ul li{padding:0; margin:0; text-align:center; overflow:hidden;}
.nciscale ul{background:url(../images/line.png) repeat-y center;}
.nciscale ul li{margin-bottom:15px; color:#fff; font-weight:700; font-size:350%;}
.nciscale ul li div{display:inline-block;  border-radius:50%; height:50px; line-height:50px; width:50px; transform-origin: center; transition:all .1s ease-in-out;}
.nciscale ul li div small{display:none; transition:none;}
.nciscale ul li div.active{height:150px;  width:150px;  font-size:300%; position:relative;}
.nciscale ul li div.active span{position:absolute; top:50%; left:50%; transform:translate(-50%,-35%); transition:none;}
.nciscale ul li div.active small{font-size:25%;  display:block; line-height:2.5;}
.nciscale ul li:last-child {
  margin-bottom:0px;
}
.warning{background-color:#f9ae33;}
.danger{background-color:#e4252a;}

.details{width:695px; height:623px; background-color:#0033a0; float:left; margin-top:70px; border-radius:15px; overflow:hidden; background-position:center; background-size:105%; position:relative;}
.details.active{background-size:100%;}
.delhi{background-image:url(../images/city/delhi.jpg);}
.head{width:100%; margin-top:25px; float:left;}
.head h1{background-color:#e2211c; float:left; padding:10px 20px; margin-right:15px; color:#fff; font-size:300%; line-height:1; font-weight:300; text-transform:capitalize;
-webkit-border-top-right-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-topright: 50px;
-moz-border-radius-bottomright: 50px;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;}
.head .date{color:#FFF; font-size:200%; font-weight:700; float:left; background:url(../images/city/icon-cal.png) no-repeat left center; padding-left:50px; margin-top:5px; margin-right:15px; background-size:contain;}
.head .time{color:#FFF; font-size:300%; font-weight:700; float:left; background:url(../images/city/icon-time.png) no-repeat left center; padding-left:50px; margin-top:5px; line-height:39px; background-size:contain;}

.details .tablediv{margin-left:50%; transform:translateX(-50%); margin-top:100px;  float:left; position:relative; }
.details table{ padding:0; margin:0; border-collapse:collapse;  }
.details table:before{}
.details table tr{border-bottom:1px solid #f9ae33;}
.details table td{color:#fff; font-size:220%; font-weight:600; padding:10px 12px; text-align:center; cursor:pointer;}
.details table tr.fontnornmal td{font-size:220%; font-weight:300;}
.details table td:first-child{text-align:left;}
.details table tr:last-child{border:none;}

.table{float: left; width:535px;}
.table .row{border-bottom:1px solid #f9ae33; float: left; padding:10px 5px;}
.table .row .col{color:#fff; font-size:220%; font-weight:600;  text-align:center; cursor:pointer; width:100px; float:left; width:140px; text-align:left;}
.table .row.fontnornmal .col{font-size:220%; font-weight:300; }
.table .row .col.chage{text-align:center; width:75px;}
.table .row:last-child{border:none;}



.details .tablebg{background-color:#F00; border-radius:10px; position:absolute;  z-index:-1; top:0; left:145px; width:75px; height:100%;}

.tabletext{margin-left:50%; transform:translateX(-50%); margin-top:50px; float:left; width:476px; color:#FFF; font-size:160%; line-height:1.3; font-weight:600;}
.lefttext{padding-right:25px; float:left; width:200px;}
.righttext{padding-left:25px; border-left:1px solid #f9ae33; float:left; width:224px;}
.righttext strong{color:#f9ae33; font-weight:800}
.detailsclose{position:absolute; right:10px; top:10px; width:40px; height:40px; text-align:center; line-height:40px; font-size:200%; font-weight:700; color:#fff; border-radius:50%; background-color:#f9ae33; cursor:pointer;}
/*Zone eof*/

/*metro Start*/
.owl-carousel{z-index:0;}
ul.metro{margin:0; padding:0; margin-top:65px; list-style:none; width:94%; margin-left:3%;}
ul.metro li{width:228px; height:615px; position:relative; cursor:pointer; }
ul.metro li .scale{border-radius:50%; height:120px;  width:120px; position:relative; color:#fff; text-align:center; margin:0 auto;}
ul.metro li .scale span{display:block; text-transform:uppercase; font-weight:700; line-height:1;}
ul.metro li .scale span.title{font-size:300%; padding-top:10px;}
ul.metro li .scale span.score{font-size:140%;}
ul.metro li .scale span.scale{font-size:670%; line-height:0.8; font-weight:900;}
ul.metro li .metrodetails{width:100%; height:554px; position:absolute; bottom:0; left:0; border-radius:15px; background-color:#4883f7; background-position:center; background-size:auto 100%}
ul.metro li .metrodetails.active{background-size:auto 110%;}
.owl-carousel .owl-dots{text-align:center;}
.owl-carousel button.owl-dot{width:15px; height:15px; background-color:#adadad; margin:0 5px; border-radius:50%;}
.owl-carousel button.owl-dot.active{background-color:#0033a1;}
.owl-carousel.metro .owl-dots{text-align:center; margin-top:5px;}


.metrodetails table{ padding:0; margin:0; border-collapse:collapse; margin-left:50%; transform:translateX(-50%); margin-top:100px; float:left; position:relative; }
.metrodetails table:before{}
.metrodetails table tr{border-bottom:1px solid #f9ae33;}
.metrodetails table td{color:#fff; font-size:200%; font-weight:700; padding:10px 12px; text-align:center;}
.metrodetails table tr.fontnornmal td{font-weight:300;}
.metrodetails table td:first-child{text-align:left;}
.metrodetails table tr:last-child{border:none;}

.metrodetails table td:nth-child(2) {
  background-color:#e2211c;
}
.metrodetails table tr:first-child td:nth-child(2){-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;}
.metrodetails table tr:last-child td:nth-child(2){-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;}




.metrodetails h1{background-color:#e2211c; float:left; padding:10px 20px; color:#fff; font-size:250%; line-height:1; font-weight:300; position:absolute; bottom:20px; left:0;
-webkit-border-top-right-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-topright: 50px;
-moz-border-radius-bottomright: 50px;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;}


.navbt{position:absolute; bottom:20px; left:60px;}
.navbt .bt{display:inline-block; color:#fff; background-color:#fcbe58; border:none; border-radius:50px; font-size:250%; font-weight:700;  padding:5px 20px;
box-shadow:inset 0 0 15px #e89d22; cursor:pointer; margin-right:15px; text-transform:uppercase;}
.navbt .bt:hover{background-color:#0033a1; box-shadow:inset 0 0 15px #02246e;}
.navbt a{height:50px; width:50px; display:inline-block; margin-right:10px; background-color:#0033a0; border:1px solid #fff; border-radius:50%; color:#fff; font-size:320%; font-weight:600; line-height:50px; text-align:center; }
.navbt a:hover{background-color:#fcbe58; }


/* intro page */

.mapbg{background:url(../images/map.jpg) no-repeat;}