/* Included Flex CSS file */
@import url("flexcssable.css");
html{ height: 100%; width: 100%; }
body { font-family: 'Univers-Light'; position: relative; padding: 0px; margin: 0px; width: 100%; height: 100%; font-size: 1.0em; font-weight:400; text-align: center; letter-spacing: 0em; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }
p{ padding:0; margin: 0; }
a { text-decoration: none; outline: none; color: #fff; }
ul, li {list-style-type: disc; }
*:focus { outline: none; }
.skdslider ul.slide-navs li{ list-style-type: none; }
/*  ========================= GE !importantNERIC STYLE =============================  */

/* Custom Width */
.width10px{ width: 10%; }

/* Custom Heights */
.height75px{ height: 75px; }
.height380px{ height: 380px; }
.height400px{ height: 580px; }

/* Custom Minimum Height Styles */

.height100vh{ height: 100vh; }
.minHeight700px{ min-height: 700px; }
.minHeight775px{ min-height: 775px; }
.minHeight800px{ min-height: 800px; }
.minHeight850px{ min-height: 850px; }

/* Generic Font Color Styles */
.color-F69227{ color: #F69227; }
.color-404041{ color: #404041; }
.color-603813{ color: #603813; }
.color-A4EEFF{ color: #A4EEFF; }
.color-413F3D{ color: #413F3D; }
.color-8BC751{ color: #8BC751; }
.color-4A4A4A{ color: #4A4A4A; }
.color-000000{ color: #000000; }
.color-F79428{ color: #F79428; }
.color-404041{ color: #404041; }

/* Generic Background Color */
.bgcolor-2F2F30{ background-color: #2F2F30;}
.bgcolor-000000{ background-color: #000000;}
.bgcolor-f2f2f2{ background-color: #f2f2f2;}
.bgcolor-ffffff{ background-color: #ffffff; }

/* Generic Font Family Styles */
.fontfamilyUniverseBlack{ font-family: 'Univers-Black'; }
.fontfamilyUniverseBold{ font-family: 'Univers-Bold'; }
.fontfamilyUniverseLight{ font-family: 'Univers-Light'; }
.fontfamilyLucidaGrande{ font-family: 'LucidaGrande'; }

/* Generic Font Size Styles */
.fontsize56{ font-size: 3.500em; }
.fontsize36{ font-size: 2.250em; }
.fontsize30{ font-size: 1.875em; }
.fontsize18{ font-size: 1.125em; }
.fontsize16{ font-size: 1.000em; }
.fontsize22{ font-size: 1.375em; }
.fontsize14{ font-size: 0.875em; }
.fontsize13{ font-size: 0.813em; }
.fontsize12{ font-size: 0.750em; }
.fontsize10{ font-size: 0.625em; }

/* Generic line height Styles */
.lineheight43{ line-height: 43px; }
.lineheight38{ line-height: 38px; }
.lineheight22{ line-height: 22px; }
.lineheight20{ line-height: 20px; }
.lineheight18{ line-height: 18px; }
.lineheight16{ line-height: 16px; }
.lineheight17{ line-height: 17px; }
.line-height26{ line-height: 26px; }
.line-height12{ line-height: 12px; }
.line-height15{ line-height: 15px; }

/* Generic Margins & Padding Styles */
.mrgntop100{ margin-top: 100px; }
.mrgnright100{ margin-right: 100px; }
.mrgntopM25{ margin-top: -25px; }
.posTop13p{ top: 13%; }
.opacity{ opacity: 0.5; }
.posLeft40px{ left: 40px; }
.posRight40px{ right: 40px; }

/* Relative Position */
.relativeTop28{ right: 28%; }
.posBottom10p{ bottom: 10%; }
.border1px{ border: 1px solid #E7E7E7; }
.bottom0px{ bottom: 0px; }

/*  ============================= MAIN STYLE ===============================  */
.menuBar { padding-left: 50px; padding-right: 50px; top:0; }
.mainHeadings { display: none; }

/* Section Pattern */
.imageSectionRed{ background: url('../images/pattern-red.svg') right no-repeat #F69227; background-size: contain; min-height: 775px; }
.imageSectionGreen{ background: url('../images/pattern-green.svg') right no-repeat #8BC751; background-size: contain; min-height: 775px; }
.imageSectionBlue{ background: url('../images/pattern-blue.svg') right no-repeat #507281; background-size: contain; min-height: 850px; }

/* Background Image */
.mainBannerbackgroundImage{ background: url('../images/banner-image.png') no-repeat center center fixed; background-size: cover; position: relative; }
.backgroundImageSection1{ background: url('../images/dulari.jpg') no-repeat center center fixed; background-size: cover; }
.backgroundImageSection2{ background: url('../images/earthern_dam.jpg') no-repeat center center fixed; background-size: cover; }
/*.backgroundImageSection3{ background: url('../images/permaculture.jpg') no-repeat center center fixed; background-size: cover; }*/
.backgroundImageSection4{ background: url('../images/permaculture.jpg') no-repeat center center fixed; background-size: cover; }
.backgroundImageSection5{ background: url('../images/bio-diversity.jpg') no-repeat center center fixed; background-size: cover; }
.backgroundImageSection6{ background: url('../images/sparrow.jpg') no-repeat center center fixed; background-size: cover; }

/* =============================== FORM STYLE =============================== */
header{ height: 75px; }
.contentSection1{ position: absolute; top: 65%; left: 48%; }
form input[type=text],form input[type=email]{ height: 45px; width: 365px; border: 1px solid #979797; border-radius: 5px; color: #979797; background: none; padding: 10px;}
button.subscribe{ padding: 14px; background-color: #F69227; border-color: #F69227; border-width: thin; border-radius: 0 5px 5px 0;position: absolute;right: 0px;color: #FFFFFF;font-weight: bold;font-size: 13px; cursor: pointer;}
a.dreamers:hover{ opacity: 0.5; }
a.dreamers{ transition: opacity 0.5s; }
a.socialIcons:hover{ opacity: 0.5; }
a.socialIcons{ transition: opacity 0.5s; }
a.terms:hover{ opacity: 0.5; }
a.terms{ transition: opacity 0.5s; }
.modal { position: relative; width: 550px !important; max-height: 449px; background: #f2f2f2; display: none; /*overflow-y: scroll;*/ }
.close { display: none; position: absolute; top: -7px; right: -5px; padding: 15px; z-index: 1; }
.close img{ width: 12px; height: 12px; }
.close:hover { cursor: pointer; }
.js .overlay { display: none; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; background: rgba(0,0,0,0.5); }
.js .modal { padding: 35px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto !important; display: block; }
.js .close { display: block;}
.contentSectionSub1{ margin-top: 140px; }
.contentSectionSub2{ margin-top: 50px; }
.contentSectionSub3{ margin-top: 50px; }
.contentSectionSub4{ margin-top: 60px; }
.contentSectionSub4Content1{ padding-left: 15px; }
#myBtn { display: none;  position: fixed;  bottom: 40px;  right: 40px;  cursor: pointer;  width: 30px; height: 30px; }
.icon-arw-right.white { background: url(https://s3.ap-south-1.amazonaws.com/maiam-prod/assets/maiam/images/right_arrow.png) center center no-repeat; }
.widthResponsive{ width: 3%; }
.sectionPopupContent{ padding: 20px 0px 0px 0px; }
.dreamersHeadingSection{ padding: 40px 20px 0px 0px; }
.dreamersHeadingSection p:first-child{ padding: 0px 0px 20px 0px; }
.dreamersHeadingSection h5{ font-size: 2.250em; line-height: 38px; }
.dreamersContentSection{ padding: 15px 20px 0px 0px; }
.subscribeUpdateHeading{ margin-right: 175px; }
.socialIcons{ width: 15%; }
.storyheadingSection{ margin-top: 20px; }
.readMoreIconUnit img{ width: 80%; }
.alert{ margin-top: 10px; padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; }
.alert-success{ color: #ffffff; background-color: #28a745; }
.alert-danger{ color: #ffffff; background-color: #dc3545; }
.menuItems a { font-size: 14px; color: #4e4b4b; padding: 30px 12px 25px 12px; border-bottom: 5px solid transparent; transition: all 0.5s ease;}
.menuItems a:hover, .menuItems a.active{ border-bottom: 5px solid #F69227; color: #F69227;}
.menuItems a.activeGreen{ border-bottom: 5px solid #8BC751; color: #8BC751; }
.menuItems a.activeBlue{ border-bottom: 5px solid #507281; color: #507281;}
.menuItems img{ margin-left: 25px; cursor: pointer;}
.overlay-content a:hover, .overlay-content a.active{ color: #f1f1f1; /*background: url('../images/menu-arrow.svg') 45% no-repeat;*/ }
.menu-overlay img{ cursor: pointer; }
.modal-popup-image-section{ /*padding: 45px 20px 20px 35px;*/ }
.terms-and-condition-main-section{ margin-top: 60px; margin-bottom: 40px; }
.logo img{ width: 190px; }
.menuItems img{ width: 25px; }
.gallery a{ width: calc(100% / 4); }
.gallery a img{ max-width: 100%; margin-bottom: -3px; }
.viewMoreDiv{ margin-top: 40px; margin-bottom: 40px; }
#viewmore{ width: 200px; height: 44px; border: none; cursor: pointer; font-weight: bold; background-color: #F69227; color: #ffffff; }
/* --- FULL BACKGROUND OVERLAY MENU --- */

.menu-overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    height: 100%;
    width: 0%;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 50px; /* 30px top margin to avoid conflict with the close button on smaller screens */
    right: 35%;
}
.overlay-content div.items { display: block; padding:8px; }
/* The navigation links inside the overlay */
.menu-overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.menu-overlay a:hover, .menu-overlay a:focus {
    color: #f1f1f1;
}

/* Position the close button (top right corner) */
.menu-overlay .closebtn {
    position: absolute;
    top: 25px;
    right: 55px;
}
/* --- End --- */
a#popup-slider:hover{ color: #005999; text-decoration: underline !important; }
.slides-navigation img { height: 30px; }
.noMoreImagesDiv{ background-color: #dddddd; margin:40px;text-align: center; font-size: 20px; padding: 15px; }
#modal0, #modal4{ max-height: 424px; }
#modal1{ max-height: 404px; }
#modal2Close{ top: -7px; right: 5px; }
#modal2Close img{ position: fixed;}
#modal3{ max-height: 462px; }
#readMoreIconUnitModal3 img{ width: 55%; }
#modal5{ width: 65% !important; max-width: 1000px !important; height: 100% !important; max-height: 580px !important; }
#rMasterheadSlider{ height: 100%; }
/* ======== Media Queries ======== */
@media only screen and (max-width : 768px) {
  header{ height: 65px; }
  /* Section Pattern */
  .imageSectionRed{ background: url('../images/pattern-red.svg') center center no-repeat #F69227; background-size: cover; padding-bottom: 30px; min-height: 0px !important;}
  .imageSectionGreen{ background: url('../images/pattern-green.svg') center center no-repeat #8BC751; background-size: cover; padding-bottom: 30px; min-height: 0px !important;}
  .imageSectionBlue{ background: url('../images/pattern-blue.svg') center center no-repeat #507281; background-size: cover; padding-bottom: 30px; min-height: 0px !important;}

  /* Background Image */
  .mainBannerbackgroundImage{ background: url('../images/banner-image.png') no-repeat center center; background-size: cover; }

  /* === Form Responsive CSS === */
  form input[type=text],input[type=email] { height: 45px; width: 100%; border: 1px solid #979797; border-radius: 5px; color: #979797; background: none; padding: 8px; }
  button.subscribe {padding: 14px; background-color: #F69227; border-color: #F69227; border-width: thin; border-radius: 0 5px 5px 0; position: absolute; right: 0px; color: #FFFFFF; font-weight: bold; font-size: 13px; top: 0px; }

  /* === Madal Responsive CSS === */
  .modal { position: relative; width: 90% !important; height: 100%; background: #f2f2f2; display: none; }
  .js .modal { position: absolute; top: 0px; left: 0; right: 0; margin: auto !important; display: block; }
  .js .overlay { display: none; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; /*background: #ebebeb;*/ }
  /* === End === */

  .menuBar{ padding: 0px 10px 0px 10px; height: 65px; }
  .logo img{ width: 80%; }
  .contentSection1{ position: absolute; top: 60%; left: 30%; }
  .widthResponsive{ width: 8%; }
  .contentSectionSub1 h5{ font-size: 0.875em; }
  .contentSectionSub2 h2{ font-size: 1.375em; line-height: 28px; }
  .contentSectionSub3 h4{ font-size: 1.000em; line-height: 22px; }
  .contentSectionSub1, .contentSectionSub2, .contentSectionSub3, .contentSectionSub4, .contentSectionSub4Content2{ margin-top: 40px; }
  .contentSectionSub4Content1{ padding-left: 15px; }
  .contentSectionSub4Content2{ margin-bottom: 50px; margin-right: 200px; }
  .joinStoryHeading{ margin-bottom: 10px; }
  .contentSectionSub4Content2{ width: 100%; }
  .contentSectionSub4Content2 img{ margin: 0 auto; margin-top: 35px; }
  #myBtn{ right: 10px; }
  .mainHeadings{ font-size: 1.875em; }
  .sectionPopupContent{ padding: 10px 0px 0px 0px; }
  .dreamersHeadingSection{ padding: 0px 0px 0px 10px; margin-top: -20px; }
  .dreamersHeadingSection p:first-child{ padding: 30px 0px 40px 0px; }
  .dreamersHeadingSection h5{ font-size: 1.375em; line-height: 22px; margin-top: -25px; }
  .dreamersHeadingSection p:last-child{ margin-bottom: 10px; }
  .dreamersContentSection{ padding: 0px 0px 0px 10px; }
  .socialIcons{ width: 10%; }
  .storyheadingSection{ margin-top: 45px; }
  .menu-overlay .closebtn{ position: absolute; top: 20px; right: 15px; }
  .overlay-content{ position: relative; margin-top: 90px; top: 0%; right: 0%; }
  .menu-overlay a{ color: #f1f1f1; font-size: 42px; padding-right: 40px; }
  .overlay-content a:hover, .overlay-content a.active{ color: #f1f1f1; }
  .terms-and-condition-main-section{ margin-top: 20px; padding:10px; }
  .js .modal{ padding: 30px 10px 30px 10px; }
  [data-aos^=fade][data-aos^=fade].aos-animate, [data-aos=fade-down]{ transform:inherit; }
  .div-terms, .div-rights{ padding: 10px; }
  .openbtn{ width: 60%; }
  #modal5{ width: 90% !important;}
  .gallery img{ width: 100%; }
  .lb-data .lb-close{ right: 3% !important; }
  footer > div{ padding-top: 5px; }
  #modal5{ width: 90% !important; max-height: 400px !important; }
}
@media screen and (min-width: 1367px) and (max-width: 1480px){
  #modal5{ width: 58% !important; }
}
@media screen and (min-width: 1481px) and (max-width: 1600px){
  #modal5{ width: 53% !important; }
}
@media screen and (min-width: 1601px) and (max-width: 1800px){
  #modal5{ width: 50% !important; }
}
@media screen and (min-width: 1801px) and (max-width: 1920px){
  #modal5{ width: 45% !important; }
}