@charset "UTF-8";
/* Scss variable  Created By Bikash on 21-Jan-2019 */
/* Scss variable  Created By Bikash on 13-dec-2108 */


body {
  font-size: 1rem;
  margin: 0em;
  font-family: Lato-Regular;
  padding: 0em;
  background: #EFF6EA;
  color: #3a3a3a;
}
body.on {
  overflow: hidden;
  height: 100vh;
} 

a,
a:focus {
  transition: all 0.25s ease-in-out;
  color: #4c7d49;
  text-decoration: none;
  cursor: pointer;
}
a:hover,
a:focus:hover {
  color: #70A548;
  text-decoration: none;
}

ul,
ol {
  list-style-type: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0em;
  padding: 0em;
  text-transform: uppercase;
}

h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
  font-family: Loto-bold;
  font-weight: 600;
}

h1 {
  font-size: 2.6em;
}

h2 {
  font-size: 2.3em;
}

h3 {
  font-size: 2em;
}

h4 {
  font-size: 1.7em;
}

h5 {
  font-size: 1.4em;
}

h6 {
  font-size: 1.2em;
}

p {
  line-height: 1.8em;
  font-weight: 200;
}

.m1 {
  margin: 0.5em;
}

.m2 {
  margin: 1em;
}

.m3 {
  margin: 1.5em;
}

.m4 {
  margin: 2em;
}

.m5 {
  margin: 2.5em;
}

.ml-1 {
  margin-left: 0.5em;
}

.ml-2 {
  margin-left: 1em;
}

.ml-3 {
  margin-left: 1.5em;
}

.ml-4 {
  margin-left: 2em;
}

.ml-5 {
  margin-left: 2.5em;
}

.mt-1 {
  margin-top: 0.5em;
}

.mt-2 {
  margin-top: 1em;
}

.mt-3 {
  margin-top: 1.5em;
}

.mt-4 {
  margin-top: 2em !important;
}

.mt-5 {
  margin-top: 2.5em;
}

.mb-1 {
  margin-bottom: 0.5em;
}

.mb-2 {
  margin-bottom: 1em;
}

.mb-3 {
  margin-bottom: 1.5em !important;
}

.mb-4 {
  margin-bottom: 2em !important;
}

.mb-5 {
  margin-bottom: 2.5em;
}

.mr-1 {
  margin-right: 0.5em;
}

.mr-2 {
  margin-right: 1em;
}

.mr-3 {
  margin-right: 1.5em;
}

.mr-4 {
  margin-right: 2em;
}

.mr-5 {
  margin-right: 2.5em;
}

.mb-0 {
  margin-bottom: 0em !important;
}

.p1 {
  padding: 0.5em;
}

.p2 {
  padding: 1em;
}

.p3 {
  padding: 1.5em;
}

.p4 {
  padding: 2em;
}

.p5 {
  padding: 2.5em;
}

.pl-1 {
  padding-left: 0.5em;
}

.pl-2 {
  padding-left: 1em;
}

.pl-3 {
  padding-left: 1.5em;
}

.pl-4 {
  padding-left: 2em;
}

.pl-5 {
  padding-left: 2.5em;
}

.pt-1 {
  padding-top: 0.5em;
}

.pt-2 {
  padding-top: 1em;
}

.pt-3 {
  padding-top: 1.5em;
}

.pt-4 {
  padding-top: 2em;
}

.pt-5 {
  padding-top: 2.5em;
}

.pb-1 {
  padding-bottop: 0.5em;
}

.pb-2 {
  padding-bottop: 1em;
}

.pb-3 {
  padding-bottop: 1.5em;
}

.pb-4 {
  padding-bottop: 2em;
}

.pb-5 {
  padding-bottop: 2.5em;
}

.pr-1 {
  padding-right: 0.5em;
}

.pr-2 {
  padding-right: 1em;
}

.pr-3 {
  padding-right: 1.5em;
}

.pr-4 {
  padding-right: 2em;
}

.pr-5 {
  padding-right: 2.5em;
}

.bg-dark-gray {
  background: #1b1b1b !important;
}

.bg-web-primary {
  background: #70A548 !important;
}

.text-gray {
  color: #8e8a7e;
}

.text-red {
  color: #f00;
}
.banner-sec{position: relative;height: 100vh;width: 100%; overflow: hidden;}
.banner-sec:before{position: absolute;content: '';left: 0px;right: 0px; height: 160px;z-index: 2;}
/*.banner-sec:after{position: absolute;content: '';left: 0px;right: 0px; height: 175px;z-index: 2;}*/
.banner-sec:after{/*background:url(../images/toppaper.png) no-repeat*/;top: 0px;-webkit-transition: all 0.4s ease-in-out;
                            -moz-transition: all 0.4s ease-in-out;
                            -o-transition: all 0.4s ease-in-out;
                            -ms-transition: all 0.4s ease-in-out;
                            transition: all 0.4s ease-in-out;}
.banner-sec:before{background:url(../images/bottompaper.png) no-repeat;bottom: 0px;background-size: cover;}
.banner-sec video{transform: translate3d(-50%,-50%,0);min-width: 100%;  min-height: 100%;position: absolute;left: 50%;top: 50%;}

.banner-sec .banner-caption{position: absolute;left: 25%;right: 25%;top: 25%;text-align: center;z-index: 1;overflow: hidden;}
.banner-sec .banner-caption h1{color: #fff;font-size: 15em;}
.banner-sec .banner-caption .brush1{
    position: absolute;
    width: 100%;
    top: 0%;
    left: 0;
    z-index: -1;
   transform: translate(0%, -2.5%) matrix(1, 0, 0, 1, 0, 0);
   -webkit-transition: all 0.4s ease-in-out;
                            -moz-transition: all 0.4s ease-in-out;
                            -o-transition: all 0.4s ease-in-out;
                            -ms-transition: all 0.4s ease-in-out;
                            transition: all 0.4s ease-in-out;
    }
.banner-sec .banner-caption .brush1 img{width: 100%;transform: translate(0%, -90.5%) matrix(1, 0, 0, 1, 0, 0);
   -webkit-animation: mymove 5s; /* Safari 4.0 - 8.0 */
  animation: mymove 5s;
    position: relative;
    
    right: 100%;
  }


@-webkit-keyframes mymove {
  0%   {left:0px;}
 
  100% { right:0px;}
}

/* Standard syntax */
@keyframes mymove {
   0%   {left:0px;}
 
  100% { right:0px;}
}



.banner-sec .banner-caption .brush2{
   position: absolute;
   width: 100%;
   bottom: 20%;
   left: 0;
   z-index: 1;
   height: 70px;
   overflow: hidden;
}
.banner-sec .banner-caption .brush2 img{transform: translate(0%, -87.5%) matrix(1, 0, 0, 1, 0, 0);}
.logosec{
        position: absolute;
        top: 10px;
        left: 70px;
        z-index: 999;
        /*background: #00000057;*/
        padding: 5px 14px;
        margin-top: -5px;
      }

  
/* Arrow animation :: New css added by yasmin on 27th june*/

.explore-map{
  /* position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  font-size: 2rem; */
  /* background: rgb(63,94,251);
background: radial-gradient(circle, rgba(63,94,251,0.4150035014005602) 0%, rgba(0,0,0,0.3561799719887955) 66%, rgba(0,0,0,0) 85%); */
}

.arrowbox{position: absolute;width: 200px;
height: 200px;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;}

.top-arrow{position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: auto;
  width: 25px;
  height: 25px;
  color: #fff;
  animation: toparrow 2s linear 2s infinite alternate;
  transform: rotate(-90deg);}

.right-arrow{position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 25px;
  height: 25px;
  color: #fff;
  animation: rightarrow 2s linear 2s infinite alternate;}

.bottom-arrow{position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  margin: auto;
  width: 25px;
  height: 25px;
  color: #fff;
  animation: bottomarrow 2s linear 2s infinite alternate;
  transform: rotate(90deg);} 
          
.left-arrow{position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 25px;
  height: 25px;
  color: #fff;
  transform: rotate(-180deg);
  animation: leftarrow 2s linear 2s infinite alternate;}                   

.hand-cursor{position: absolute;
left: 0px;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background: url("../images/cursor.png") no-repeat center center;}

.map-wrapper.zoomin{transform: scale(1);transition: all 2s ease-in-out;}

@keyframes toparrow {
from {top: 30px;}
to   {top: 10px;}
}

@keyframes rightarrow {
from {right: 30px;}
to   {right: 10px;}
}

@keyframes bottomarrow {
from {bottom: 30px;}
to   {bottom: 10px;}
}

@keyframes leftarrow {
from {left: 30px;}
to   {left: 10px;}
}
.logosec img{cursor: pointer;}

@media (max-width :576px){
  .logosec{left: 0;}
  .topbutton{
             right: 0 !important;
            text-align: center;}
   .topbutton a span{display: none;}
            .mapbg .maximize{position: absolute;
              right: 0;
              background: rgb(246, 70, 29);
              padding: 5px 10px;
              color: #fff;
               font-weight: 600;
              z-index: 8;
              font-size: 25px;
              height: 40px;}   
            
            .mapbg .close{position: absolute;
                right: 0;
                background: rgb(246, 70, 29);
                padding: 5px 10px;
                color: #fff;
                 font-weight: 600;
                display: none;
                z-index: 8;
                font-size: 25px;
                height: 40px;
              } 
              .mapbg{transition: .4s;}
              .mapbg.open{height: 200px !important;transition: .4s;}

}

.location--khandadhar__media,.location--badaghagra__media img{height: 80px;}
.location--satkosia__media img{width: 160px;}
.location--bhitarkanika__media, .location--malkangiri__media img{width: 85px;}
.location--daringbadi__media img{width: 90px;}
.location--khandagiri__media img{height: 65px;}
.location--chilika__media img {width: 100px;}