/* -----------------------------------------------------------
Custom Style Sheet For Kalpana 

Version: 1.0
Last Modified: 29-08-2019 by Envizon Studio
Author: Envizon Studio
------------------------------------------------------------*/
/* -----------------------------------------------------------
------------------------------------------------------------*/

/* Default Styles for Kalpana Started Here */

@font-face {
    font-family: 'opensans-regular';
    src: url('https://kalpananaturals.com/fonts/OpenSans-Regular-webfont.eot');
    src: url('https://kalpananaturals.com/fonts/OpenSans-Regular-webfont.eot#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('https://kalpananaturals.com/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('https://kalpananaturals.com/fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'opensans-bold';
    src: url('https://kalpananaturals.com/fonts/OpenSans-Bold-webfont.eot');
    src: url('https://kalpananaturals.com/fonts/OpenSans-Bold-webfont.eot#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('https://kalpananaturals.com/fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('https://kalpananaturals.com/fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'opensans-bold';
    src: url('https://kalpananaturals.com/fonts/OpenSans-Bold-webfont.eot');
    src: url('https://kalpananaturals.com/fonts/OpenSans-Bold-webfont.eot#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('https://kalpananaturals.com/fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('https://kalpananaturals.com/fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'HelveticaCE-Regular';
    src: url('../fonts/Helvetica-CE-Regular.eot') format('eot'),
        url('../fonts/Helvetica-CE-Regular.woff') format('woff'),
        url('../fonts/Helvetica-CE-Regular.ttf') format('truetype'),
        url('../fonts/Helvetica-CE-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* 
@font-face {
    font-family: 'HelveticaCE-Bold';
    src: url('../fonts/Helvetica-CE-Bold.eot') format('eot'),
        url('../fonts/Helvetica-CE-Bold.woff') format('woff'),
        url('../fonts/Helvetica-CE-Bold.ttf') format('truetype'),
        url('../fonts/Helvetica-CE-Bold.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
} */

@font-face {
    font-family: 'HelveticaCE-Bold';
    src: url('../fonts/Helvetica-LT-45-Light.eot') format('eot'),
        url('../fonts/Helvetica-LT-45-Light.woff') format('woff'),
        url('../fonts/Helvetica-LT-45-Light.ttf') format('truetype'),
        url('https://kalpananaturals.com/fontsHelvetica-LT-45-Light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'product-sans';
    src: url('../fonts/ProductSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'product-sans-bold';
    src: url('../fonts/ProductSans-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    --white: #ffffff;
    --black: #000000;
    --black-alt: #1d1d1d;
    --theme-yellow: #ffe433;
    --theme-blue-1: #1b4792;
    --theme-green-1: #00a651;
    --theme-green-2: #0a2a01;
    --theme-green-3: #075e4b;
    --theme-lightGreen-1: #71bc45;
    --theme-background-1: #f3f6f9;
    --font-color-1: #4f4f4f;
    --font-color-2: #525252;
    --font-color-3: #505050;
    --font-color-4: #636363;
    --font-color-5: #878787;
    --color-1: #f2f2f2;
    --footer-bg: #707070;
    --theme-space-1: 120px;
    --theme-space-2: 50px;
    --theme-space-3: 180px;
    --font-size-default: 14px;
    --font-size-large: 18px;
    --font-size-medium: 15px;
    --font-size-small: 12px;
    --font-size-nsmall: 11px;
    --font-size-vsmall: 10px;
}

* {
    list-style: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
    outline: none;
    text-shadow: none;
}

html,
body {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}

body {
    font-family: 'product-sans';
    font-size: var(--font-size-default);
    line-height: 20px;
    color: var(--font-color-4);
    background: var(--white);
    /* display: flex; */
}

a {
    color: #0d0d0d;
    display: inline-block;
}

a:hover,
a.active {
    color: var(--theme-blue-1);
    text-decoration: none;
}

img {
    max-width: 100%;
}

.pr {
    position: relative;
}

.containerFluid {
    width: 100%;
    float: left;
}
.halfWidth {
    width: 50%;
    float: left;
}
.w40 {
    width: 40%;
}
.w60 {
    width: 60%;
}
.headerContainer {
    width: 100%;
    max-width: 1080px;
    margin-right: auto;
    margin-left: auto;
}
.container {
    width: 100%;
    max-width: 1080px;
    margin-right: auto;
    margin-left: auto;
}

.halfContainer {
    width: 50%;
    float: left;
}

.fw {
    width: 100%;
}

.fh {
    height: 100%;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.fn {
    float: none;
}

.tal {
    text-align:left;
}

.tar {
    text-align: right;
}

.tac {
    text-align: center;
}

.ttu {
    text-transform: uppercase;
}

.db {
    display: block !important;
    font-weight: normal;
}

.dn {
    display: none !important;
}

.dib {
    display: inline-block;
}

.clear {
    clear: both;
}

.fwb {
    font-weight: bold;
}

.fwn {
    font-weight: normal;
}

.fsi {
    font-style: italic;
}

.noBorder {
    border: 0px !important;
}

.noMargin {
    margin: 0px !important;
}

.mbNo {
    margin-bottom: 0px !important;
}
.mt10 {
    margin-top: 10px;
}
.mb25 {
    margin-bottom: 25px;
}
.mtNo {
    margin-top: 0px !important;
}

.noPadding {
    padding: 0px !important;
}

.ffb {
    font-family: 'product-sans';
    font-weight:normal;
}

.ffr {
    font-family: 'HelveticaCE-Regular';
}

.cblack {
    color: var(--black) !important;
}

.cwhite {
    color: var(--white) !important;
}

.themeBlue {
    color: var(--theme-blue-1);
}

.themeBlack {
    font-size: 28px;
    color: var(--black-alt);
}

.themeLightGreen {
    color: var(--theme-lightGreen-1);
}

.oh {
    overflow: hidden;
}
.dfjcc  {
    display: flex;
    justify-content: center;
}


.hr {
    width: 100%;
    height: 1px;
    background: #e2e0e0;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 0px;
    float: left;
}

.defaultBtn {
    padding: 10px 30px;
    display: inline-block;
    background: #cacaca;
    font-size: var(--font-size-small);
    margin-top: 20px;
    text-align: center;
    text-transform: uppercase;
    color: var(--white);
    position: relative;
    cursor: pointer;
    transition: ease-in all 0.2s;
    letter-spacing: 1px;
}

.defaultBtn:hover {
    color: var(--white);
    background: var(--theme-green-1);
}

.routingBtn {
    font-size: var(--font-size-small);
    border: 1px solid var(--theme-green-1);
    margin-top: 30px;
    text-align: center;
    text-transform: uppercase;
    color: var(--white);
    background: var(--theme-green-1);
    height: 40px;
    line-height: 36px;
    position: relative;
    cursor: pointer;
    transition: ease-in all 0.2s;
    letter-spacing: 0px;
    border-radius: 50px;
    min-width: 135px;
}
.routingBtn:hover {
    background: var(--theme-green-1);
    color: var(--white);
}

.routingBtnAlt {
    background: var(--white);
    font-size: var(--font-size-small);
    border: 1px solid var(--theme-blue-1);
    margin-top: 10px;
    text-align: center;
    text-transform: uppercase;
    color: var(--theme-green-1);;
    height: 40px;
    line-height: 36px;
    position: relative;
    cursor: pointer;
    transition: ease-in all 0.2s;
    letter-spacing: 0px;
    border-radius: 50px;
    min-width: 135px;
}
.routingBtnAlt:hover {
    background: var(--theme-green-1);
    color: var(--white);
}

/* .routingBtn a::before,
.defaultBtn a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.12);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-transform: scale(0.5, 1);
    transform: scale(0.5, 1);
    font-family: 'HelveticaCE-Bold';
}

.routingBtn:hover a::before,
.defaultBtn:hover a::before {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
} */

.routingBtn a {
    color: var(--white);
    transition: ease-in all 0.2s;
    text-transform: lowercase;
}
.routingBtn:hover  a,
.routingBtnAlt:hover  a {
    color: var(--white);
}
.routingBtn a span {
    width: 40px;
    margin-left: 20px;
    background: url(https://kalpananaturals.com/images/button_arrow.png) no-repeat center center #adadad;
    height: 40px;
    transition: ease-in all 0.2s;
}
.routingBtn:hover a span {
  background: url(https://kalpananaturals.com/images/button_arrow.png) no-repeat center center var(--theme-green-2);
}

.blockTitle {
    font-family: 'opensans-bold';
    font-size: 20px;
    text-transform: uppercase;
    margin-bottom: 21px;
    padding-left: 54px;
    color: var(--font-color-3);
    position: relative;
}

.blockTitle::before {
    content: "";
    width: 35px;
    height: 1px;
    background-color: var(--theme-lightGreen-1);
    position: absolute;
    top: 9px;
    left: 10px;    
}

.blockSubTitle {
    font-size: 22px;
    font-family: 'product-sans-bold';
    margin-bottom: 15px;
    color: var(--black-alt);
    font-weight: bold;
    text-transform: uppercase;
}

.blockQuoteTitle {
    font-size: 18px;
    font-family: 'product-sans';
    margin-bottom: 15px;
    color: var(--black);
    line-height: 1.5;
}

.blackTitleHeader {
    font-size: 28px;
    text-transform: uppercase;
    line-height: 36px;
    margin-bottom: 16px;    
    font-family: 'product-sans-bold';
    color: var(--black-alt);
}

.siteContent {
    font-size: var(--font-size-default);
    margin-bottom: 25px;
}

.siteContent.small {
    font-size: var(--font-size-small);
    margin-bottom: 10px;
    line-height: 18px;
}

.siteContent .dots {
    padding-left: 15px;
}

.siteContent .dots > li {
    margin-top: 12px;
    position: relative;
    list-style-type: none;
}

.siteContent ul.dots > li::before {
    content: "\2022";
    color: #fed325;;
    font-weight: bold;
    display: inline-block; 
    width: 1em;
    margin-left: -1em;
    font-size: 25px;
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
}

.siteContent ul > li > ol {
    padding: 15px 0 15px 15px;
}

.siteContent ul > li > ol > li {
    list-style-type: lower-alpha;
    font-weight: bold;
    padding-left: 18px;
    font-style: italic;    
}

/* Table */
table,
th,
td {
    border: 1px solid #acacac;
    border-collapse: collapse;
}

th,
td {
    padding: 5px;
}

th {
    text-align: left;
}


/* Rslides */
.rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
}

.rslides li {
    -webkit-backface-visibility: hidden;
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    top: 0;
}

.rslides li:first-child {
    position: relative;
    display: block;
    float: left;
}

.rslides img {
    display: block;
    height: auto;
    float: left;
    width: 100%;
    border: 0;
}


/* Default Radio Buttons */
/* The container */
.radioLabel {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.radioLabel input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.radioLabel .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: var(--white);
    border-radius: 50%;
    border: 1px solid #ddd;
}

/* On mouse-over, add a grey background color */
.radioLabel:hover input~.checkmark {
    background-color: var(--theme-green-1);
}

/* When the radio button is checked, add a blue background */
.radioLabel input:checked~.checkmark {
    background-color: var(--white);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radioLabel .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radioLabel input:checked~.checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radioLabel .checkmark:after {
    top: 5px;
    left: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--theme-green-1);
}


/* Custom Checkbox */
.chekboxContainer {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    line-height: 26px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Hide the browser's default checkbox */
  .chekboxContainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  /* Create a custom checkbox */
  .chekboxContainer .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    border: 1px solid #eee
  }
  
  /* On mouse-over, add a grey background color */
  .chekboxContainer:hover input ~ .checkmark {
    background-color: #ccc;
  }
  
  /* When the checkbox is checked, add a blue background */
  .chekboxContainer input:checked ~ .checkmark {
    background-color: transparent;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .chekboxContainer .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .chekboxContainer input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .chekboxContainer .checkmark:after {
    left: 8px;
    top: 4px;
    width: 5px;
    height: 10px;
    border: solid #038a2c;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

/* Default Select Styles */
.select-wrapper {
    display: inline-block;
    border: 1px solid #d8d8d8;
    background: url("https://kalpananaturals.com/images/down_arrow.png") no-repeat calc(100% - 15px) center;
    cursor: pointer;
    position: relative;
}

.select-wrapper,
.select-wrapper select {
    height: 35px;
    line-height: 35px;
    text-align: left;
    padding-left: 15px;
    margin-right: 20px;
    min-width: 180px;
    max-width: 180px;
    float: right;
}

.select-wrapper:hover {
    background: url("https://kalpananaturals.com/images/down_arrow.png") no-repeat calc(100% - 15px) center;
    border-color: var(--theme-green-1);
}

.select-wrapper .holder {
    display: block;
    margin: 0 35px 0 5px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    z-index: -1;
}

.select-wrapper select {
    margin: 0;
    position: absolute;
    z-index: 2;
    cursor: pointer;
    outline: none;
    opacity: 0;
    /* CSS hacks for older browsers */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -khtml-opacity: 0;
    -moz-opacity: 0;
    left: 0;
}

/* Animations */
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

  @-webkit-keyframes slideInLeft {
    from {
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
      visibility: visible;
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  @keyframes slideInLeft {
    from {
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
      visibility: visible;
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  .slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
  }
  
  @-webkit-keyframes slideInRight {
    from {
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
      visibility: visible;
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  @keyframes slideInRight {
    from {
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
      visibility: visible;
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  .slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
  }
  @-webkit-keyframes zoomIn {
    from {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }
  
    50% {
      opacity: 1;
    }
  }
  
  @keyframes zoomIn {
    from {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }
  
    50% {
      opacity: 1;
    }
  }
  
  .zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
  }
  @-webkit-keyframes slideOutLeft {
    from {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  
    to {
      visibility: hidden;
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
    }
  }
  
  @keyframes slideOutLeft {
    from {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  
    to {
      visibility: hidden;
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
    }
  }
  
  .slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft;
  }

  @keyframes rotateIcon {
    from {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  
    to {
        -webkit-transform: rotate(3600deg);
        -moz-transform: rotate(3600deg);
        transform: rotate(3600deg);
    }
  }

  .rotateIcon {
    -webkit-animation-name: rotateIcon;
    -moz-animation-name: rotateIcon;
    animation-name: rotateIcon;      
  }
/* Default Styles for Kalpana Green Ends Here */

/*Preloader styles*/

#preloader{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:10000;
    background-color: #ffffff;
  }
  
  #preloaderIcon{
    display: block;
    position: relative;
    left:0;
    right: 0;
    top:50%;
    width:100px;
    height:100px;
    margin:0 auto;
    border-top:3px solid var(--theme-green-3);
    border-radius:50%;
    
    -webkit-animation: spin 3.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
            animation: spin 3.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
  }
  
  #preloaderIcon:before{
    content:"";
    position:absolute;
    top:5px;
    left:5px;
    bottom:5px;
    right:5px;
    border-top: 3px solid var(--theme-green-3);
    border-radius:50%;
    
    -webkit-animation: spin 2.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
            animation: spin 2.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
  }
  
  #preloaderIcon:after{
    content:"";
    position:absolute;
    top:15px;
    left:15px;
    bottom:15px;
    right:15px;
    border-top: 3px solid var(--theme-green-3);
    border-radius:50%;
    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
            animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
  }
  
  @-webkit-keyframes spin {
    0%   {
      -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
      }
    100% {
      -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
  }
  @keyframes spin {
    0%   {
      -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
      }
    100% {
      -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
  }