/*fonts */
@font-face {
    font-family:'Source Sans Pro';
    src: url('/templates/jana-premier/Source-Sans-Pro-Regular/Source-Sans-Pro-Regular.eot');
    src: url('/templates/jana-premier/Source-Sans-Pro-Regular/Source-Sans-Pro-Regular.eot?#iefix') format('embedded-opentype'),
        url('/templates/jana-premier/Source-Sans-Pro-Regular/Source-Sans-Pro-Regular.woff2') format('woff2'),
        url('/templates/jana-premier/Source-Sans-Pro-Regular/Source-Sans-Pro-Regular.woff') format('woff'),
        url('/templates/jana-premier/Source-Sans-Pro-Regular/Source-Sans-Pro-Regular.svg#Source-Sans-Pro-Regular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-2212;
}

@font-face {
    font-family:'Museo 500';
    src: url('/templates/jana-premier/Museo500-Regular/Museo500-Regular.eot');
    src: url('/templates/jana-premier/Museo500-Regular/Museo500-Regular.eot?#iefix') format('embedded-opentype'),
        url('/templates/jana-premier/Museo500-Regular/Museo500-Regular.woff2') format('woff2'),
        url('/templates/jana-premier/Museo500-Regular/Museo500-Regular.woff') format('woff'),
        url('/templates/jana-premier/Museo500-Regular/Museo500-Regular.svg#Museo500-Regular') format('svg');
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}
@font-face {
    font-family:'elaina';
    src: url('/templates/jana-premier/elaina/elaina.eot');
    src: url('/templates/jana-premier/elaina/elaina.eot?#iefix') format('embedded-opentype'),
        url('/templates/jana-premier/elaina/elaina.woff2') format('woff2'),
        url('/templates/jana-premier/elaina/elaina.woff') format('woff'),
        url('/templates/jana-premier/elaina/elaina.svg#elaina') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FE;
}
@font-face {
    font-family:'edwardian';
    src: url('/templates/jana-premier/edwardian/edwardian.eot');
    src: url('/templates/jana-premier/edwardian/edwardian.eot?#iefix') format('embedded-opentype'),
        url('/templates/jana-premier/edwardian/edwardian.woff2') format('woff2'),
        url('/templates/jana-premier/edwardian/edwardian.woff') format('woff'),
        url('/templates/jana-premier/edwardian/edwardian.svg#edwardian') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: semi-expanded;
    unicode-range: U+0020-02DC;
}
/*fonts ends*/
body {
    padding: 0;
    margin: 0;
    background-color: #fff;
    font-family: 'Source Sans Pro';
    font-weight: 500;
}

h3 {
    font-weight: 700;
    margin-bottom: 25px;
}
.subHeading{
    font-family: 'elaina';
    font-size: 32px;
}

.headingTxt {
    font-family: 'Museo 500';
    font-weight: 700;
    text-align: center;
    margin: 70px auto;
}

#privileges .headingTxt {
    background-image: url(/templates/jana-premier/img/underline.svg);
    background-repeat: no-repeat;
    background-size: 24%;
    background-position: center bottom;
    padding: 20px;
    margin-top: 0;
}

header * {
    font-family: 'Museo 500';
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

header {
    position: absolute;
    height: 120px;
    width: 96%;
    z-index: 1;
}

.mobile-break {
    display: none;
}

.destop-break {
    display: block;
}

#sliderHead {
    width: 100%;
    position: relative;
    background-color: #f8fcf6;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, .4);
    background-image: url(/templates/jana-premier/img/headerbg.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}

#sliderTxt {
    width: 100%;
    height: 100vh;
}

#sliderTxt h1 {
    color: #000;
    font-weight: 700;
    font-size: 5.2em;
    margin-bottom: 0px;
    font-family: 'edwardian';
}

#sliderTxt p {
    color: #000;
}

p.exploreTxt img {
    width: 10%;
}

#interNavBar {
    height: 70px;
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 99;
}

#interNavBar li {
    color: #dbb538;
}

#interNavBar a {
    background: #e2dbd2a8;
    padding: 5px 45px;
    margin: auto 10px;
    border-radius: 25px;
    color: #000;
    font-size: 14px;
}

div#navbarNav p {
    font-size: 1.3em;
    font-weight: bold;
    color: #0a3563;
}

#navbarNav ul {
    width: 100%;
}

.timlogo {
    width: 70px;
    display: block;
    padding-top: 15px;
}
.clickhere {
    position: absolute;
    bottom: 0px;
    left: 8%;
    text-align: left;
    width: 342px;
}
.exciting{
    position: relative;
}
a {
    color: #0a3563;
}
.head {
    position: absolute;
    top: 35px;
    right: 0px;
}

/*sticky bar*/
#interNavBar {
    overflow: hidden;
}

#interNavBar.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    background: #fff;
}

.sticky+#privileges {
    padding-top: 60px;
}

#interNavBarMob {
    display: none;
}

/* end sticky bar*/

/*premiere privilage*/
.mobslider {
    display: none;
}

.box:hover .imgbox img {
    opacity: 0.5;
}

.box {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: 10px;
    background: #000;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    transition: .5s;
    margin-bottom: 35px;
}

.box:hover {
    /*transform: translateY(-30px);
    box-shadow: 0 50px 50x rgba(0,0,0,.5);*/
}

.box .imgbox {
    position: relative;
}

.box .imgbox img {
    /*    transition: .5s;*/
}

.box:hover .imgbox img {
    /* opacity: .5;
    transform: translateY(-40px);*/
}

.imgbox h3 {
    position: absolute;
    left: 20px;
    top: 65%;
    color: #fff;
    font-weight: 100;
    font-size: 24px;
}

.box:hover .imgbox h3 {
    opacity: 0;
}

.box .content {
    position: absolute;
    bottom: -40px;
    left: 0;
    padding: 20px;
    box-sizing: border-box;
    transition: .5s;
    opacity: 0;
    /*    background: linear-gradient(#000, #161010d1);*/
    width: 100%;

}

.imgbox:hover {
    background: linear-gradient(#000, #161010d1);
}

.box:hover .content {
    opacity: 1;
    bottom: 0;
}

.box .content h3 {
    font-size: 20px;
    color: #fff;
    font-weight: 100;
}

.box .content p {
    font-size: 0.8em;
    color: #fff;
    font-weight: 400;
}

.box .content .btnD {
    border: none;
    background: #ff0000;
    color: #fff;
    font-size: 18px;
    padding: 10px 20px;
    font-weight: 700;
    transition: .5s;
}

.box .content .btnD:hover {
    background: #ff3232;

}

#more1,
#more2,
#more3,
#more4, #deskmore1, #deskmore2, #deskmore3, #deskmore4 {
    display: none;
}

#privileges {
    padding-bottom: 70px;
    padding-top: 70px;
}

#myBtn1,
#myBtn2,
#myBtn3,
#myBtn4, #deskmyBtn1, #deskmyBtn2, #deskmyBtn3, #deskmyBtn4 {
    background: none;
    border: 0;
    color: #D6A400;
    text-decoration: underline;
}

.wrapper {
    width: 100%;
    padding-top: 20px;
    text-align: center;
}

.carousel {
    width: 90%;
    margin: 0px auto;
}

.slick-slide {
    margin: 10px;
}

.slick-slide img {
    width: 100%;
    border: 2px solid #fff;
}

.wrapper .slick-dots li button:before {
    font-size: 20px;
    color: white;
}



/*End premiere privilage*/

/*premiere benefites*/
.benefitsbox {
    margin: 20px;
}

#PreBenefits {
    width: 100%;
    position: relative;
    background-color: white;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, .4);
    background-image: url('/templates/jana-premier/img/benefitsbg.png');
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}

/*end premiere benefites*/

#PreBenefits p,
#PreBenefits h1 {
    color: #fff;
}

#PreBenefits .headingTxt {
    text-align: left;
    background-image: url(/templates/jana-premier/img/underline.svg);
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: 3% 100%;
    padding: 20px;
}

.PreBenefitsGroup {
    border: 1px solid #D6A400;
    border-radius: 25px;
    padding: 70px;
    background: #00000078;
}

/*exciting rewards*/
#RewardsSec {
    width: 100%;
    position: relative;
    background-color: white;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, .4);
    background-image: url('/templates/jana-premier/img/rewardbg.png');
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}

#RewardsSec .headingTxt {
    color: #000;
    text-align: left;
    background-image: url(/templates/jana-premier/img/underline.svg);
    background-repeat: no-repeat;
    background-size: 24% 7%;
    background-position: 2% 100%;
    padding: 20px;
}

.knowMoreLink {
    color: #000;
    display: block;
    text-align: right;
    margin-right: 40px;
    margin-top: 20%;
    font-size: 20px;
}

.rewardImg {
    width: 100%;
}
.clickhearlogin{
text-align: right;
    margin-right: 0px;    
}
/*end exciting rewards*/
/*Pre card Benefits*/
#premierBenefits {
    width: 100%;
    position: relative;
    background-color: white;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, .4);
    background-image: #fff;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
    padding-top: 70px;
    padding-bottom: 70px;
}
.cardimg1 {
    width: 280px;
}
#premierBenefits .headingTxt {
    background-image: url(/templates/jana-premier/img/underline.svg);
    background-repeat: no-repeat;
    background-size: 24%;
    background-position: 46% 100%;
    padding-bottom: 20px;
    margin-top: 0;
}

.digitalImg {
    width: 90%;
    margin-bottom: 30px;
}

.premiurLiContent {
    height: calc(100% - 228px) !important;
}

/*card view more*/
.content_wrapper_text {
    position: relative;
}

.cardBox p {
    margin-bottom: 0;
}

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

.content_b {
    display: none;
    position: relative;
    top: 0px;
    left: 0px;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    z-index: 9;
}

.content_b_content {
    position: relative;
    margin: 100px auto 0 auto;
    height: 65px;
}

.cardBox {
    background: #f2f2f2;
    margin: 10px auto;
    padding: 10px;
    width: 100%;
    font-size: 14px;
    border-radius: 10px;
}

.cardBox img {
    width: 50px;
}

.hello {
    text-align: right;
    display: block;
    position: relative;
    right: 0%;
    color: #000;
    z-index: 9;
}

.goodbye {
    text-align: right;
    display: block;
    position: relative;
    right: 15%;
    color: #000;
    z-index: 999;
}

/*end Pre card Benefits*/
/*state of art*/
#stateArt {
    width: 100%;
    position: relative;
    background-color: white;
    height: 100vh;
    margin-bottom: 70px;
}

#stateArt .headingTxt {
    text-align: left;
    background-image: url(/templates/jana-premier/img/underline.svg);
    background-repeat: no-repeat;
    background-size: 52% 7%;
    background-position: 1% 100%;
    padding: 0 0 37px 0;
}

.mobileTxt {
    display: none;
}

.desktopTxt {
    display: block;
}

/*end state of art*/
/*specialist team*/
.sepcTeamrow {
    height: 90vh;
}

#specTeam .headingTxt {
    text-align: left;
    background-image: url(/templates/jana-premier/img/underline.svg);
    background-repeat: no-repeat;
    background-size: 24% 7%;
    background-position: 2% 100%;
    padding: 20px;
}

#specTeam {
    width: 100%;
    position: relative;
    background-color: white;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, .4);
    background-image: url('/templates/jana-premier/img/specteambg.png');
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}

.teamText p {
    padding: 20px;
    font-size: 22px;
}

.teamText {
    background-image: linear-gradient(to right, #f9e8b8, #fffdf9);
    border-radius: 20px;
    width: 88%;
}

/*end specialist team*/
/*footer*/
footer {
    background: black;
    padding: 30px;
}
.footermenu{
    float: right;
}
.footermenu .fotmenu{
    width: auto;
}
.bg-circle-outline {
    background-color: #ffffff;
    border-radius: 50px;
    padding: 2px 10px;
    margin: 8px;
}

.bg-circle-outline i {
    color: #000;
}

footer img {
    width: 50%;
}

footer p a {
    color: #fff;
    text-decoration: none;
}

footer p {
    color: #fff;
}

.twitterIcon,
.linkedinIcon,
.youtubeIcon {
    padding: 2px 7px;
}

.copyright {
    font-size: 9px;
    padding-top: 20px;
}

/*end footer*/
/*popup form*/
div#myForm {

    border: 1px solid #FFC300;
}

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
    background: #0a3563;
    padding: 5px 45px;
    margin: auto 10px;
    border-radius: 25px;
    color: #fff;
    border: 0px;
}

/* The popup form - hidden by default */
.form-popup {
    border: 3px solid #f1f1f1;
    z-index: 9;
}

/* Add styles to the form container */
.form-container {
    padding: 10px;
    background-color: white;
}

/* Full-width input fields */
.form-container input[type=text],
.form-container input[type=password] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus,
.form-container input[type=password]:focus {
    background-color: #ddd;
    outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
    background-color: #04AA6D;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-bottom: 10px;
    opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
    background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover,
.open-button:hover {
    opacity: 1;
}

/*new popup*/
/* form starting stylings ------------------------------- */
.group {
    position: relative;
    margin-bottom: 20px;
}

#myForm input {
    font-size: 18px;
    padding: 10px 10px 0px 5px;
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #000;
    background: transparent;
}

#myForm input:focus {
    outline: none;
}

span.thank-massage {
    text-align: center;
    color: #58c642;
}

/* LABEL ======================================= */
label {
    color: #3C3C3B;
    font-size: 18px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 10px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}
input:-internal-autofill-selected {
    appearance: menulist-button;
    background-image: none !important;
    background-color: -internal-light-dark(rgba(232, 240, 254, 0), rgba(70, 90, 126, 0)) !important;
    color: fieldtext !important;
}
.mainLabel {
    position: relative;
}

.mainLabelcol {
    position: relative;
}

.pincode {
    position: absolute;
    left: 5px;
    top: 40px;
}

.city {
    position: absolute;
    top: 40px;
    left: 5px;
}

.nameLabel {
    font-size: 12px;
}

/* active state */
#myForm input:focus~label,
#myForm input:valid~label {
    top: -40px;
    font-size: 14px;
    color: #ffffff00;
}

button#refresh-captcha {
    background: #fff;
    border: 0;
    color: #d8a306;
}

canvas#captcha {
    border: 2px solid grey;
}

button.btn {
    width: 100%;
    border-radius: 0;
    color: #fff;
}

.modal-body {
    padding-top: 0px;
}

.modal-content {
    border: 2px solid #f0b607;
}

.modal-header {
    border-bottom: 0;
    padding-bottom: 0;
}

.modal-header h3 {
    font-family: 'Museo 500';
    font-weight: 100;
}

.form-check-label {
    color: #000 !important;
    position: relative;
    top: 3px !important;
    font-size: 12px !important;
    margin-bottom: 10px;
}

/* BOTTOM BARS ================================= */
.bar {
    position: relative;
    display: block;
    width: 100%;
}

.bar:before,
.bar:after {
    content: '';
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #fff;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}

.bar:before {
    left: 50%;
}

.bar:after {
    right: 50%;
}



/* active state */
#myForm input:focus~.bar:before,
#myForm input:focus~.bar:after {
    width: 50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
    position: absolute;
    height: 60%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
}

/* active state */
#myForm input:focus~.highlight {
    -webkit-animation: inputHighlighter 0.3s ease;
    -moz-animation: inputHighlighter 0.3s ease;
    animation: inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
    from {
        background: #fff;
    }

    to {
        width: 0;
        background: transparent;
    }
}

@-moz-keyframes inputHighlighter {
    from {
        background: #fff;
    }

    to {
        width: 0;
        background: transparent;
    }
}

@keyframes inputHighlighter {
    from {
        background: #fff;
    }

    to {
        width: 0;
        background: transparent;
    }
}


#panel {
    border: 1px solid rgb(200, 200, 200);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
    background: -webkit-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
    background: red;
    /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
    /* Standard syntax (must be last) */


    border-radius: 4px;
    top: 50px;
}

/*end popup form*/
.nav-modal {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 80vh;
    visibility: hidden;
    opacity: 0;
    transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    pointer-events: none;
}

/* header.clicked .nav-modal {
    visibility: visible;
    opacity: 1;
    pointer-events: initial;
} */

.nav-modal .blob {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    margin: 0 auto;
    background-color: #0b253e;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transition: all .3s ease-in;
}

.nav-modal header.clicked .nav-modal .blob {
    width: 100vw;
    height: 80vh;
    border-radius: 0px;
}

.nav-modal nav {
    position: fixed;
    left: 20%;
    top: 30%;
    color: white;
}

.nav-modal nav a {
    color: white;
    text-decoration: none;
    font-family: sans-serif;
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
}

.nav-modal nav ul li {
    list-style: none;
    text-align: right;
    border-right: 6px solid white;
    padding-bottom: 10px;
    padding-right: 10px;
    position: relative;
}

.nav-modal nav {
    opacity: 0;
    transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -webkit-transition-delay: .3s;
    -moz-transition-delay: .3s;
    -o-transition-delay: .3s;
    transition-delay: .3s;
}

.nav-modal header.clicked nav {
    opacity: 1;
}

.nav-modal nav ul li ul {
    position: absolute;
    right: -300px;
    top: -4px;
    display: none;
}

.nav-modal nav ul li ul li {
    border: none;
    padding-bottom: 10;
    padding-left: 10px;
    height: 50px;
    width: 300px;
}

.nav-modal nav ul li ul li a {
    display: block;
    height: 50px;
    font-size: 20px;
    text-align: left;
    padding: 10px;
}

.nav-modal nav ul li.selected ul {
    display: block;
}

.nav-modal nav ul li.notselected a {
    opacity: .5;
}

.nav-modal nav ul li.selected ul li a {
    opacity: 1;
}

.header_text h1,
.header_text p {
    color: #fff;
    text-align: center;
}
.footertext {
    background: #000;
    color: #fff;
    padding: 20px 0;
}
.footertext p{
    margin: 0;
}
.cardBox p b {
    font-weight: bolder;
    font-size: 14px;
    color: #000;
}
img.pagelogo{
    width: 36%;
}
.header_text {}


#myForm input#exampleCheck1 {
    width: 22px;
    height: 22px;
    border: 1px solid #000;
    margin-right: 10px;
    margin-top: 8px;
    float: left;
}
.form-check.checkboxsec label.form-check-label{
    width: 85%;
    float: left;
}
.form-check.checkboxsec {
    padding: 0;
}
img.homeicon {
    position: absolute;
    top: 0;
    z-index: 99;
    right: 10vh;
    width: 40px;
    border: 1px solid #000000;
    padding: 6px;
    border-radius: 2px;
}

@media (min-width: 1800px){
.container{
    max-width: 1700px;
}
.box .imgbox img {
    width: 100%;
}
}

@media (min-width: 1700){
.container{
    max-width: 1540px !important;
}
.box .imgbox img {
    width: auto;
}
}
@media (min-width: 1540){
.container{
    max-width: 1440px !important;
}
.knowMoreLink {
    margin-top: 7%;
}
.clickhere {
    bottom: 6px;
}
.knowMoreLink {
    margin-top: -2%;
}
}
@media (min-width: 1300){
.knowMoreLink {

    margin-top: 0%;
}
.clickhere {
    position: absolute;
    bottom: 0px;
}
.teamText {
    width: 94%;
}

}
@media screen and (max-width:1300px) {
    .teamText p {
        padding: 20px;
        font-size: 18px;
    }
    .content_b {
        height: 140vh;
        z-index: 9;
    }
}
@media screen and (max-width:1200px) {
    .box .imgbox img {
        width: 100%;
        height: 100%;
    }
    .box {
        position: relative;
        width: 100%;
        height: auto;
    }
    #interNavBar a {
        background: #e2dbd2a8;
        padding: 5px 33px;
    }
    .PreBenefitsGroup {
        padding: 30px;
        background: #00000078;
    }
    img.benefitsImg {
        width: 50px;
    }
    .cardBox img {
        width: 50px;
    }
    .content_b {
        height: 150vh;
        z-index: 9;
    }
    div#navbarNav p {
        font-size: 1em;
    }
    .teamText {
        width: 94%;
    }
    
}
@media screen and (max-width:990px) {
.loginsec {
    margin-left: 2% !important;
    margin-right: 3% !important;
    height: auto;
}
.resmenu label.button {
    top: 0.5vh;
    right: 0vw;
}
#interNavBar a {
    background: #e2dbd2a8;
    padding: 5px 35px;
}
.benefitsbox {
    margin: 20px 0;
}
.content_b {
    height: 156vh;
    z-index: 9;
}
}
@media screen and (max-width:820px) {

}

@media screen and (max-width:767px) {
    body{
        overflow-x:hidden
    }
    .head {
    right: 25px;
}
    section#interNavBar {
        position: fixed;
        background: #fff;
        bottom: 0;
        width: 100%;
        z-index: 999;
        display: none;
    }

    #interNavBarMob {
        display: block;
        position: fixed;
        z-index: 99;
        background: #fff;
        width: 100%;
        bottom: 0;
        padding: 10px;
        box-shadow: 5px 5px 6px 10px #000;
        transition: all 0.3s ease-in;
    }

.wrapper-navbar {
    display: none;
}
ul.navbarMob {
    display: flex;
    padding: 0;
    list-style: none;
    margin: 0;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
ul.navbarMob li {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 0px;
    margin: 4px 10px;
    border-radius: 25px;
    color: #000;
    border: 0px;
    width: 130px;
    background: #cecece;
    font-size: 12px;
}
ul.navbarMob li:focus{
background:#fff;
border-color: 1px solid #f2b900;
}

    .InterNavButtons {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .InterNavButtons button {
    font-size:10px;
    width: 150px;
}
.explore-button {
    background: #cecece;
    padding: 10px 0px;
    margin: auto 0px;
    border-radius: 25px;
    color: #000;
    border: 0px;
}
.open-button {
    padding: 10px 30px;
    margin: auto 10px;
}
img.pagelogo{
    width: 280px;
}
.premiurLiContent {
    height: auto !important;
}
#premierBenefits {
    height: auto;
}
.content_wrapper_text {
    position: relative;
    float: left;
    width: 100%;
    height: 100% !important;
}
.content_a {
    position: relative;
    height: auto;
}
.content_b {
    height: 100vh;
    z-index: 9;
}

#specTeam .headingTxt{
    margin: 22px auto;
}
}

@media screen and (max-width:640px) {
    .timlogo {
        width: 55px;
        padding-top: 30px;
    }

    .nav-modal nav ul li a {
        font-size: 16px;
    }

    .nav-modal nav ul li ul {
        top: -9px;
    }

    .nav-modal nav ul li ul li {
        height: 40px;
    }

    .nav-modal nav ul li ul li a {
        font-size: 16px;
        height: 40px;
    }

    #sliderTxt h1 {
        font-size: 2.2em;
    }

    .mobile-break {
        display: block;
    }

    #sliderTxt p {
        font-size: 12px;
    }

    #sliderHead {
        width: 100%;
        position: relative;
        background-color: #f8fcf6;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, .4);
        background-image: url(/templates/jana-premier/img/headermobbg.png);
        background-position: top;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100vh;
    }

    #sliderTxt .col {
        margin-bottom: -30%;
    }

    #privileges .headingTxt {
        padding: 20px 20px 12px;
        background-size: 87%;
    }

    .headingTxt {
        margin: 44px auto 20px;
        text-align: left;
        font-size: 20px;
        width: 92%;
    }

    #RewardsSec {
        background-image: url(/templates/jana-premier/img/rewardbgmob.png);
    }

    #PreBenefits {
        background-image: url(/templates/jana-premier/img/benefitsmobbg.png);
    }

    .rewardImg {
        display: none;
    }

    .knowMoreLink {
        text-align: center;
        margin-right: 0;
        position: absolute;
        bottom: 20%;
        right: inherit;
        width: 90%;
    }
    .clickhere {
        position: absolute;
        bottom: 34%;
        right: inherit;
        width: 90%;
        text-align: center;
    }
    .exciting {
        position: inherit;
    }

    .PreBenefitsGroup {
        padding: 0;
    }

    .content_a {
        position: relative;
        top: 0;
    }

    .cardBox {
        width: 100%;
    }

    #PreBenefits .headingTxt,
    #RewardsSec .headingTxt {
        background-size: 44%;
        background-position: 7% 100%;
        padding: 14px;
    }

    #premierBenefits .headingTxt {
        background-size: 44%;
        background-position: 0% 100%;
        padding-bottom: 14px;
    }

    #stateArt .headingTxt {
        padding: 0 0 16px 0;
        margin-left: 16px;
    }

    #premierBenefits {
        /* background-image: url(/templates/jana-premier/img/cardmobbg.png); */
        background-size: 100% 37%;
        padding-top: 25px;
    }

    .cardBox img {
        width: 40px;
        text-align: center;
    }

    .mobileTxt {
        display: block;
    }

    .desktopTxt {
        display: none;
    }

    #specTeam {
        background-image: url(/templates/jana-premier/img/Assist-mob.png);
        background-size: 60% 60%;
        background-position: right bottom;
    }

    #specTeam .align-items-end {
        align-items: self-start !important;
    }

    .teamText p {
        padding: 16px;
        font-size: 16px;
    }

    footer img {
        width: 100%;
    }

    footer p {
        text-align: center;
    }

    footer .col-md-5 {
        margin-top: 10px;
    }

    .slick-list {
        /*    width: 130%;*/
    }

    .slick-slide {
        position: relative;
        left: -50px;
    }

    .mobslider .box {
        height: auto;
    }

    .desktop-slider {
        display: none;
    }

    .mobslider {
        display: block;
    }

    .box .content h3 {
        font-size: 16px;
    }

    .imgbox h3,
    .imgbox .box .content p,
    .imgbox #myBtn1,
    .imgbox #myBtn2,
    .imgbox #myBtn3,
    .imgbox #myBtn4 {
        position: absolute;
        left: 15px;
        top: 85%;
        font-weight: 600;
        font-size: 16px;
    }

    .mobslider .box {
        margin-bottom: 0px;
    }

    .slick-dots li.slick-active button:before {
        opacity: 1;
        color: #000;
        background:#0a3563 !important;
        width: 20px !important;
        height: 10px;
    }

    .wrapper .slick-dots li button:before {
        font-size: 10px;
        color: red;
        content: "";
        background: #3C3C3B;
        width: 10px;
        height: 10px;
    }

    .slick-dots {
        text-align: left !important;
    }

    #PreBenefits p {
        font-size: 16px;
    }

    #stateArt h3 {
        font-size: 15px;
    }

    .benefitsImg {
        width: 100%;
    }

    .PreBenefitsGroup {
        border-radius: 10px;
    }

    #stateArt {
        height: auto;
    }

    /* #specTeam {
        height: 60vh;
    } */

    .specTeamrow {
        height: 40vh;
    }


    canvas#captcha {
        width: 100px;
    }
    #specTeam .headingTxt {
    background-position: 8% 100%;
}
.cardimg1 {
    width: 200px;
}
#specTeam .headingTxt {
    background-size: 52% 7%;
}
#myForm.modal{
    padding-bottom: 50px;
}
.headingTxt {
    padding: 20px 3px 12px !important;
    background-size: 90% !important;
    font-size: 26px;
}

.clickheretext{
    position: absolute !important;
    bottom: 40px;
}

}

@media screen and (max-width:500px) {
    .nav-modal .timlogo {
        display: none;
    }
    .benefitsbox img.benefitsImg {
        width: 50px;
    }
    .content_b {
        height: 90vh;
        z-index: 9;
    }
}

@media screen and (max-width:420px) {
    header .head .tile.socialmedia {
        display: none;
    }
    #specTeam {
        background-image: url(/templates/jana-premier/img/Assist-mob.png);
        background-size: 90%;
        background-position: right bottom;
    }
    .specTeamrow {
        height: 60vh;
    }
    .teamText p {
        padding: 16px;
        font-size: 14px;
    }
}
@media screen and (max-width:400px) {
.content_b {
    height: 130vh;
    z-index: 9;
}
}
span.error-massage {
    font-size: 12px;
    color: #fa4141;
    width: 100%;
    clear: both;
    float: left;
}
#myForm  input#exampleCheck1 {
    width: 18px;
    height: 18px;
    border: 1px solid #000;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
span.thank-massage{
    width: 90%;
    margin: 0 auto;
}
span.thank-massage  h3{
    text-align: left;
    color: #0a3563;
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 24px;
}
span.thank-massage  p{
    text-align: left;
    color: #313131;
    font-weight: 400;
    margin-bottom: 10px;
    font-size: 16px;
}