@font-face {
    font-family: TradeGothic;
    src: url('../Font/Trade Gothic LT.ttf') format('truetype');
   /* src: url('../Font/Trade\ Gothic\ LT.eot?#iefix') format('embedded-opentype'), url('../Font/Trade\ Gothic\ LT.woff') format('woff'); */
} 

body, html {
    font-family: 'TradeGothic';
    height: 100%;
    margin: 0;
}
/* body.loading { 
    background: #fff url('../../images/loader.gif') no-repeat 50% 50%;
    -webkit-transition: background-color 0;
    transition: background-color 0;
    opacity: 0;
    -webkit-transition: opacity 0;
    transition: opacity 0;
    background-size: 5%;
} */
#load{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background:url("../../images/loader.gif") no-repeat center center rgba(255,255,255,1);
    background-size: 5%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.table-borderless tbody+tbody, .table-borderless td, .table-borderless th, .table-borderless thead th{
    border: 0;
}

a {
    color: #fe0000;
}
a:hover, a:focus {
    color: #fe0000;
    text-decoration: none;
    outline-color: transparent !important;
}
.btn-sm {
    line-height: 1;
}
.lineht {
    line-height: 1.2 !important;
}
.form-control:focus {
    background-color: none;
    border-color: none;
    box-shadow: none;
}
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
    box-shadow:none!important;
}
.btn-primary:focus {
    box-shadow: none;
}
.btn:focus {
    box-shadow: none;
}
.bb-0 {
    border-bottom: none !important;
}
/* Pecfy Color */
.pecfy {
    color: #fe0000;
}
.greencolor {
    color: #77d353;
}
.bg-greencolor {
    background-color: #77d353;
}
.bg-greycolor{
    background-color: #e6e6e6;
}
/* background Red shade */
.bg-pecfy{
    background-color:#fe0000;
}
/* Background gray color */
.bg-gray {
    background-color: #e6e6e6;
}
.bgraylight{
    background-color: #f0f0f0;
}
.bg-blue {
    background-color: #3360a0;
}
.bg-gold {
    background-color: #b17b0a;
}
.bg-yellow {
    background-color: #fdc400;
}
/* Background post color */
.bg-post{
    background-color: #f4f8fb;
}
.bg-postlight{
    background-color: #e7f2fb;
}
.bg-darkgray{
    background-color: #999;
}
.bg-grey{
    background-color: #ddd;
}
.smaller {
    font-size: 50%;
}
.font-40{
    font-size: 40%;
}
.font-55 {
    font-size: 55%;
}
.font-50 {
    font-size: 52%;
}
.font-65 {
    font-size: 65%;
}
.font-60 {
    font-size: 60%;
}
.font-70 {
    font-size: 70%;
}
.font-75 {
    font-size: 75%;
}
.font-80{
    font-size: 80%;
}
.font-90 {
    font-size: 90%;
}
.font-100 {
    font-size: 100%;
}
.margin-r5 {
    margin-right: 5rem;
}
.margin-t6 {
    margin-top: 6rem;
}
.margin-l7 {
    margin-left: 7rem;
}
.margin-l5 {
    margin-left: 5%;
}
.margin-t5 {
    margin-top: 5.5%;
}
.padding-8 {
    padding: 8rem;
}
.padding-1{
    padding: 1%;
}
.w-90{
    width: 90%!important;
}
.w-70{
    width: 70%!important;
}
.w-60{
    width: 60%!important;
}
.w-35{
    width: 35%!important;
}
.dots {
    line-height: 0.4;
    margin: 0.1rem;
}
.btn-rounded {
    border-radius: 1.5rem!important;
}
.btn-accept {
    border-top-left-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
}
.btn-reject {
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
}
sup {
    margin-left: -1.8rem;
}
.border-pecfy{
    border: #D93135 1px solid;
}
.select-sm{
    height: calc(1.5em + 1px)!important;
}
.hide {
    display: none;
}
 .wordwrap{
    word-wrap: break-word;
}
.bottom-0{
    bottom: 0;
}
/* #signupform :required {
    background: url("../images/asterik.png") no-repeat;
    background-position:left top;
} */
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: pink;
  }
.signin ::-webkit-input-placeholder {
    font-size: 0.8rem;
   }
.signin :-moz-placeholder { /* older Firefox*/
    font-size: 0.8rem;
   }
.signin ::-moz-placeholder { /* Firefox 19+ */ 
    font-size: 0.8rem;
   } 
.signin :-ms-input-placeholder { 
    font-size: 0.8rem;
   }
   @supports (-moz-appearance:none) {  
}
  
@-moz-document url-prefix() {
    select.form-control {
      padding-right: 25px;
      background-image: url("data:image/svg+xml,\
        <svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='10px'\
             height='10px' viewBox='0 0 1200 1000' fill='rgb(73,80,87)'>\
          <path d='M1100 411l-198 -199l-353 353l-353 -353l-197 199l551 551z'/>\
        </svg>");
      background-repeat: no-repeat;
      background-position: calc(100% - 7px) 50%;
      -moz-appearance: none;
      appearance: none;
    }
    .selecton, .selecton:focus, .selecton:active   {
        background-image: url("data:image/svg+xml,\
        <svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='10px'\
             height='10px' viewBox='0 0 1200 1000' fill='rgb(255,255,255)'>\
          <path d='M1100 411l-198 -199l-353 353l-353 -353l-197 199l551 551z'/>\
        </svg>");
        background-color:#fe0000;
    }
    select:hover {
        background-image: url("data:image/svg+xml,\
        <svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='10px'\
             height='10px' viewBox='0 0 1200 1000' fill='rgb(255,255,255)'>\
          <path d='M1100 411l-198 -199l-353 353l-353 -353l-197 199l551 551z'/>\
        </svg>");
        background-color:#fe0000;
    }
    .signdiv{
        width:35%;
    }
    .form-inline .form-control {
        width:95%;
    }
    .form-control {
        padding: .375rem .5rem;
    }
    sup {
        top: -1.2em;
        margin-left: -1.8rem;
    }
    /* .rightbox{
        width: 52%;
    } */
}
/* Changes as per woocommerece */
.logo_img {
    padding-left: 0.8rem;
    width: 100%;
}
.woo-lh{
line-height: 1 !important;
}
/* Changes as per woocommerece */

/* select:hover {
    color: #fff;
    background-color:#fe0000;
}
option:hover {
    color: #fff !important;
    background-color:#fe0000 !important;
} */
select.selecton, select.selecton:focus   {
    color: #fff;
    background-color:#fe0000;
}

select.selecton option{
    color: #333;
    background-color:#fff;
}
.option:focus{
    color: #fff;
    background-color:#fe0000;
}
.selectoptn { }

.forgotpass {
    right: 0;
    bottom: 90%;
}
/*Sign up form */
.w-join{
    width:60%;
}
.joinform input, .joinform select, .joinform label {
    border-bottom: 1px dotted #999!important;
    font-size: 80%;
    background: transparent;
}
.error{
    color:red;
}
label.error{
    border: none !important;
    margin-bottom: -15px;
    font-size: 80%;
    justify-content: left;
    /* padding-top: 5px; */
}
.select2-container--default .select2-selection--single {
    border: none;
    font-size:80%;
}
.select2-search__field {
    Display:none;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 15px!important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 16px!important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    left: 85%!important;
}
.select2-selection--single:focus {
    outline-color: transparent;
}
.bg-index{
    background: url("../images/banner.jpg");
    /* height: 90%;  */
    min-height: 500px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position:relative;
}
.bg-joinform{
    background: url("../images/banner.jpg");
    min-height: 500px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position:relative;
}
.bg-joinform:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: -0.1%;
    background: rgba(0,0,0,0.7);
}
.bg-forgot {
    background: url("../images/banner.jpg");
    min-height: 500px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position:relative;
}
.bg-forgot:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: -0.1%;
    background: rgba(0,0,0,0.7);
}
.field-icon {
    right: 6%;
    top: 10%;
  }
.fieldd-icon {
    right: 6%;
    top: 20%;
  }
  .popover {
    max-width: 225px;
  }
  .popover-header {
    padding: .25rem 0.75rem;
    background-color:#fe0000;
    color:#fff;
  }
  .popover-body {
    padding: .5rem .75rem;
    /* color: #000080; */
}
.redcircle{
    background: #fe0000;
    display: inline-block;
    margin: 0 1em 1em 0;
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
    height: 5rem;
    width: 2.5rem;
        right: -56px;
        top: 12%;
    /* right: -15%; */
}
.bluecircle{
    background: #0029CC;
    display: inline-block;
    margin: 0 1em 1em 0;
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
    height: 1.5rem;
    width: 0.75rem;
    right: -28px;
    bottom: 0%;
    /* right: -14.5%; */
}
.yellowcircle{
    background: #fdc400;
    display: inline-block;
    margin: 0 1em 1em 0;
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
    height: 3rem;
    width: 1.5rem;
    left: -24px;
        bottom: 25%;
    /* left: -11.5%; */
}
/*Sign up form */

/* Registration page */
.bg-registration {
    background: 
    url("../images/registration-bg.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 90%;
}
.cardd {
    position: relative;
    display: inline-block;
    background-color: #eee;
    color: #343a40;
}
.cardd .img-top {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 99;
}
.cardd:hover .img-top {
    display: inline;
    color: #fff;
    background-color:#fe0000;
}
.activesport .img-top {
    display: inline;
    color: #fff;
    background-color:#fe0000;
}
.comunity {
    color: #343a40;
    background-color: #eee;
}
.comunity:hover {
    color: #fff;
    background-color:#fe0000;
}
.activecomunity {
    color: #fff;
    background-color:#fe0000;
}
.reg-img {
    bottom: 13%;
}
.col-md-4-5 { width: 20%; }
.community-ht {
    min-height: 670px;
}
/* Registration page */

/*Select Community*/
.style3 {
    border-top: 1px dotted #999;
    margin-top: -1.5%;
    width: 72%;
    float: right;
    margin-right: 0rem;
}
/*Select Community*/

/* Registration Form Page */
.style {
    border-top: 1px dotted #999;
    margin:1.5rem 0;
}
  /* Hide all steps by default: */
  .tab {
    display: none;
    margin-bottom: 35px;
}
#prevBtn, #nextBtn {
    background-color: #bbbbbb;
}
.bg-pecfy {
    background-color: #fe0000 !important;
}
/* Make circles that indicate the steps of the form: */
.step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbbbbb;
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
}
.step.active {
    opacity: 1;
}
/* Mark the steps that are finished and valid: */
.step.finish {
    background-color: #4CAF50;
}
.btn-form, .btn-form-right{
    position: absolute;
    bottom: 2%;
    right: 6%;
}
.btn-form-right {
    left: 6%;
}
.cardd.disabled {
    pointer-events: none;
}
/* Registration Form Page */

/* Primary Menu */
#topheader .nav-link:hover  {
    border-bottom: #D93135 2px solid!important;
    color: #343a40!important;
    font-weight: 700!important;
}
.navactive {
    border-bottom: #fe0000 2px solid!important;
    color: #343a40!important;
    font-weight: 700!important;
}

.navbar-collapse {
    flex-grow: inherit!important;
}

/* .not-padding {
    padding: 0.3rem 0.45rem;
} */
/* .rightbox{
    width: 65%;
} */
.searchbox{
    width: 47%;
}

/* Primary Menu */

/* Stickynav */
.stickynav{
    padding-top: 4.2%;
    }
 /* Stickynav */  

/* Home Page */
.events p, .people p {
    line-height: 1.3 !important;
}

#home-tabs .col-sm-3{ margin-top:30px; }
#home-tabs .col-sm-3 img{ border-radius:5px; }
#home-tabs .col-sm-3 img:hover{ opacity:0.7; }

/* user image */
.user-img{
max-width: 65px;
max-height: 65px;
min-width: 65px;
min-height: 65px;
}
.z-index{
    z-index: 1000;
}
.user-ht{
    min-height: 68px;
}
/* user image */

/* user Profile */
.profile-img {
    max-width: 95px;
    max-height: 95px;
    min-width: 95px;
    min-height: 95px;
}
.profile-ring
{
    top:0%;
    left:26%;
}

.block_user {
    display: none;
    z-index: 1;
  }
.blockk:hover .block_user {display: block;}

.block_user a:hover {color: #fe0000;}

/* user Profile */

/* Add to cart */
.cart{
    top: 4%;
    right: 5%;
}
.gstin ::-webkit-input-placeholder {
    font-size: 0.8rem;
}
/* Add to cart */
/* people */
.user-center-x {
    padding-left: 0.65rem;
    padding-top: 0.65rem;
    padding-right: 0.25rem;
    padding-bottom: 0.25rem;
}
.conn-center-x {
    padding-left: 0.65rem;
    padding-top: 0.65rem;
    padding-right: 0.25rem;
    padding-bottom: 0.25rem;
}
.people-ht{
    min-height: 86px;
    max-height: 86px;
}
.leftside-shadow {
    box-shadow: 1px 1px 1px 2px #bbbbbb4a;
}
/* .event-ht{
    min-height: 150px;
    max-height: 150px;
} */
/*people*/

/*Requests*/
.nav-link.active {
    background: #e6e6e6!important;
    border-color:#e6e6e6!important;
}
.nav-linkk.active {
    background: #e7f2fb!important;
    border-color:#e7f2fb!important;
}
/* Connection page in tab panel for Carousal working below CSS */
.tab-content>.tab-pane{ display: block; height: 0px; overflow: hidden; }
.tab-content>.active{ height: auto;}
/*Requests*/

/*mycollections*/
.profile-dot{
    top:4%;
    right: 5%;
}
.pecfy-user-menu{
    top:15%;
    right: 5%;
    position: absolute;
}
.conn-ht{
    max-height: 200px;
    min-height: 200px;
 }
 .user-imgmoreleft{
    max-width: 40px;
    max-height: 40px;
    min-width: 40px;
    max-height: 40px;
    border-left: 1px solid #dee2e6!important;
    /* border-top: 1px solid #dee2e6!important; */
    /* border-bottom: 1px solid #dee2e6!important; */
 }
 .user-imgmoreright{
    max-width: 40px;
    max-height: 40px;
    min-width: 40px;
    max-height: 40px;
    left: 50%;
    border-right: 1px solid #dee2e6!important;
    /* border-top: 1px solid #dee2e6!important; */
    /* border-bottom: 1px solid #dee2e6!important; */
 }
.abs-center-x {
    top: 4%;
    left: 23%;
}
.favAddimg{
    z-index: 1;
}
/*mycollections*/

/* Carousal CSS*/
#mixedSlider {
    position: relative;
}
#mixedSlider .MS-content {
    white-space: nowrap;
    overflow: hidden;
    margin: 0 5%;
}
#mixedSlider .MS-content .item {
    display: inline-block;
    position: relative;
    vertical-align: top;
    overflow: hidden;
    height: 100%;
    white-space: normal;
}
.sliderr {
    padding: 0 2rem;
}

@media(max-width: 1440px)  {
    .sliderr {
        padding: 0 0.5rem;
    }    
}
@media(max-width: 1024px)  {
    .sliderr {
        padding: 0 0.25rem;
    }    
}
@media (max-width: 991px) {
    #mixedSlider .MS-content .item {
        width: 50%;
   }
   #mixedSlider .MS-controls button {
    font-size: 30px;
}
}
@media(max-width: 800px)  {
    .slider {
        padding: 0 1rem;
    } 
    #mixedSlider .MS-controls button {
        top: 50%!important;
    }   
}
@media (max-width: 767px) {
    #mixedSlider .MS-content .item {
        width: 100%;
   }
   #mixedSlider .MS-controls .MS-right {
    right: -10px;
    }
    #mixedSlider .MS-controls .MS-left {
    left: -10px;
    }
    #mixedSlider .MS-controls button {
        font-size: 20px;
   }
}
@media(max-width: 540px)  {
    .sliderr {
        padding: 0 7rem;
    }    
}
@media(max-width: 533px)  {
    .sliderr {
        padding: 0 5rem;
    }    
}
@media(max-width: 320px)  {
    .slider {
        padding: 0 2rem;
    }    
}

#mixedSlider .MS-content .item .imgTitle {
    position: relative;
}
#mixedSlider .MS-content .item .imgTitle .blogTitle {
    margin: 0;
    text-align: left;
    letter-spacing: 2px;
    color: #252525;
    font-style: italic;
    position: absolute;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.5);
    width: 100%;
    bottom: 0;
    font-weight: bold;
    padding: 0 0 2px 10px;
}
#mixedSlider .MS-content .item .imgTitle img {
    height: auto;
    width: 100%;
}
/* #mixedSlider .MS-content .item a {
    float: right;
    margin: 0 20px 0 0;
    font-size: 16px;
    font-style: italic;
    color: #ad0000;
    color: rgba(173, 0, 0, 0.82);
    font-weight: bold;
    letter-spacing: 1px;
    transition: linear 0.1s;
} */
#mixedSlider .MS-content .item a:hover {
    text-shadow: 0 0 1px grey;
}
#mixedSlider .MS-controls button {
    position: absolute;
    border: none;
    background-color: transparent;
    outline: 0;
    font-size: 60px;
    top: 33%;
    color: #D93135;
    transition: 0.15s linear;
}
#mixedSlider .MS-controls button:hover {
    color: #000;
    color: rgba(0, 0, 0, 0.8);
}
#mixedSlider .MS-controls .MS-left {
    left: 0;
}
#mixedSlider .MS-controls .MS-right {
    right: 0;
}
/* //carousal CSS*/

/* Discussion CSS */
.avatarr{
max-width: 50px;
    min-width: 50px;
    max-height: 50px;
    min-height: 50px;
}
.discussion-height {
    max-height: 272px;
    overflow-y: scroll;
    overflow: auto;
}
.scroller {
    width: 300px;
    height: 100px;
    overflow-y: scroll;
    scrollbar-color: #fdc400 #fdc400;
  }
.scrollbar-dusty-grass::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}
.scrollbar-dusty-grass::-webkit-scrollbar {
    width: 4px;
	background-color: #F5F5F5;
}
.scrollbar-dusty-grass::-webkit-scrollbar-thumb {
    background-color: #fdc400;
}
.thin::-webkit-scrollbar {
    width: 4px;
}

.st-btn[data-network='sharethis'] svg ,  #st-3 .st-btn[data-network='sharethis'] svg{
    fill: #bbbbbb!important;
}
.st-btn ,.st-btn[data-network='sharethis'] {
    border: none!important;
    background-color: transparent!important;
}
.st-btn, .st-btn{
padding: 0!important;
}
/* //Discussion CSS */

/* Create Post */
.user-post {
    top: 0.3rem;
    left: 0.3rem;
}
/* Create Post */
/* community Introduction */
.community-shadow {
    box-shadow: 1px 1px 3px 4px #bbb;
}
#introduction {
    display: none;
    }
.mht{
    max-height: 145px;
    overflow: hidden;
}
/* .communityinfo-ht{
    max-height: 324px;
    min-height: 324px;
    overflow: hidden;
} */
.comunityy{
margin: 0.5rem 0;
}
.comm-ht{
    max-height: 355px;
    min-height: 355px;
    overflow-y: scroll;
    overflow: auto;
}
.post-grad {
    background-color: #e7f2fb; /* For browsers that do not support gradients */
    background-image: linear-gradient(to right, #e7f2fb , #cfe7f1);
}
.post-gradrev {
    background-color: #e7f2fb; /* For browsers that do not support gradients */
    background-image: linear-gradient(to right, #cfe7f1 , #e7f2fb);
}
.quote {
    right: 25%;
    left: 10%;
    padding:0;
    top:25%;
}

.quoteR{
    /* background: url("../images/quotes_r.png");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    padding: 0 3.5rem; */
}
.quoteL p, .quoteR p {
    /* padding: 2.2rem 1.5rem; */
}
.triviaL {
    right: 25%;
    left: 0%;
    bottom: unset;
    top: 25%;
    padding: 0px;
}
.triviaR {
    right: 20%;
    bottom: unset;
    top: 25%;
    padding: 0px;
}
/* community Introduction */

/* community post Discussion */
.nav-link {
    color: #6c757d!important;
} 
.nav-link.hover {
    color: #333!important;
} 
.nav-link.active {
    color: #333!important;
}

.nav-linkk {
    color: #6c757d!important;
} 
.nav-linkk.hover {
    color: #333!important;
} 
.nav-linkk.active {
    color: #333!important;
}
.nav-linkk {
    display: block;
    padding: .5rem 1rem;
}

/* .community-post-ht {
    max-height: 480px;
    min-height: 480px;
    overflow-y: scroll;
    overflow:auto;
    scrollbar-color: #fdc400 #fdc400;
    scrollbar-width: thin;
} */

/* .community-photo-ht {
    max-height: 400px;
    min-height: 400px;
} */
.textarea-text {
    right: 8%;
    top: 4%;
    opacity: 0.7;
}
.upload-ht{
 height: 250px;
}
.sup-padding{
    padding: 0.6rem 0.3rem!important;
    text-align: center;
    position: absolute;
    width: 17px;
    height: 17px;
}
/* community post Discussion */

/* community mypicture */
.div-ht {
    min-height: 100px;
    max-height: 100px;
}
.thumb{
    margin-bottom: 30px;
}

.page-top{
    margin-top:85px;
}
img.zoom {
width: 100%;
height: 200px;
border-radius:0px;
object-fit:cover;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
}
.transition {
-webkit-transform: scale(1.2); 
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.modal-header {

border-bottom: none;
}
.modal-title {
color:#000;
}
.modal-footer{
display:none;  
}
/* .img-ht {
    max-height: 8.3rem;
} */
/* community mypicture */

/* all sports */
/* .gray-scle{
    -webkit-filter: grayscale(100%);
   Safari 6.0 - 9.0
    filter: grayscale(100%);
} */
/* all sports */

/* Package */
/* .p-icon {
    color: #fe0000;
    ;
} */

/* package Select Radio button */
.package input {
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.radiochk{
    position: absolute;
    top: 25%;
    left: 4%;
    height: 18px;
    width: 18px;
    border: 1px solid;
    border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.package:hover input ~ .radiochk {
    background-color: #77d353;
  }
  
  /* When the checkbox is checked, add a blue background */
  .package input:checked ~ .radiochk {
    background-color: #77d353;
    border: 1px solid;
    border-radius: 50%;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .radiochk:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .package input:checked ~ .radiochk:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .package .radiochk:after {
    left: 6px;
    top: 3px;
    width: 4px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(40deg);
  }

/* plan Select Radio button */
.package_duration {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Hide the browser's default checkbox */
  .package_duration input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  .select_plan {
    position: absolute;
    top: 0%;
    height: 10px;
    width: 10px;
    background-color: #77d353;
    border: 1px solid;
    border-radius: 50%;
    right: -10%;
  }
  
  /* On mouse-over, add a grey background color */
  .package_duration:hover input ~ .select_plan {
    background-color: #77d353;
  }
  
  /* When the checkbox is checked, add a blue background */
  .package_duration input:checked ~ .select_plan {
    background-color: green;
    border: 1px solid;
    border-radius: 50%;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .select_plan:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .package_duration input:checked ~ .select_plan:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .package_duration .select_plan:after {
    left: 2px;
    top: 0px;
    width: 4px;
    height: 7px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(40deg);
  }
/* package Select Radio button */
/* Package */
.style2 {
    border: 1px solid #bbb !important;
    margin: -0.1rem 0 0.2rem 2.5rem;
    width: 90%;
    text-align: center;
}
.style4 {
    border: 1px solid #bbb !important;
    margin: -0.2rem 0 0.2rem 1.5rem;
    width: 100%;
    text-align: center;
}

/* Event package Info */
.package-ht{
    max-height: 400px;
    min-height: 400px;
    overflow-y: scroll;
    overflow: auto;
}
.viewmore{
    right:6%;
    font-size: 80%;
}
.infobox {
    /* border:1px solid #000; */
    /* margin-top: 4rem; */
    border-radius: 0.5rem;
    border: 3px solid #0029cc; 
}
.info_img{
    bottom: 95%;
    left: 45%;
}
.infoclose{
    bottom: 97%;
    right: -3%;
    border: 1px solid #ddd;
    padding: 0px 7px !important;
    position: absolute;
    border-radius: 50%!important;
    background-color: #fff!important;
}
.inforow{
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.innericon {
    float: left;
}
.innerbox {
   float: left;
    font-size: 12px;
    width: 70%;
}
.style1 {
    border: 1px solid #ff0000 !important;
    margin: 0.2rem 0 0.2rem;
}
/* Event package Info */

/* Top ups */
/* .addbtn {
    top: 90%;
    font-size: 70%;
} */
/* Top ups */

/* proceed */
/* .proceed {
    font-size: 1.3rem;
} */
/* proceed */

/*topup details*/
/* .topup-btn{
    right: 0;
    top: 42%;
}
.addedbtn{
    background-color: #999;
}
.packagehr{
    height: 10px;
    box-shadow: 0 10px 10px -10px #8c8b8b inset;
} */
/*topup details*/

/* Merchandise Products */
/* .buybtn {
    padding: 0.5rem 2.1rem;
} */
.product-shadow{
    box-shadow: 0px 1px 1px 2px #bbbbbb4a;
}
#myCarousel .list-inline {
    white-space:nowrap;
}

#myCarousel .carousel-indicators {
    position: static;
    left: initial;
    width: initial;
    margin-left: initial;
}

#myCarousel .carousel-indicators > li {
    width: initial;
    height: initial;
    text-indent: initial;
}
#myCarousel .carousel-indicators > li.active img {
    opacity: 0.7;
}
.pagination {
    justify-content: flex-end;
    margin: 0.5rem 0;
    font-size: 80%;
}
/* Merchandise Products */

/* Memorabilia Products */
.memorabilia-hr{
    border-top: 1px dotted #999;
    margin-top: -6.6%;
    width: 80%;
}
/* Memorabilia Products */

/* Product details */
    .rchecked {
        color: orange;
    }

  /* carousel Css */
  .carousel-control-next-icon, .carousel-control-prev-icon {
    width: 15px;
    height: 15px;
    background: none;
    }
    .carousel-control-next, .carousel-control-prev {
        width: 3%;
    }
    .carousel-control-prev {
        left: -1.5%;
    }
    .carousel-control-next {
        right: -1.5%;
    }
    /* carousel Css */

  /* Product details */

/* my Info */
.userprofile{
    max-width: 400px;
    min-width: 400px;
    max-height: 400px;
    min-height: 400px;
}
.userprofile-img{
    max-width: 400px;
    max-height: 400px;
    min-width: 400px;
    min-height: 400px;
}
.user-edit{
    right: 16%;
    bottom: 5%;
}
.prewardsdate{
    right:6%;
}
.prewards{
    color: #ffc42c;
    background-color: #71452c;
    top: 43.7%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.4rem;
}

/* my Info */

/* My Account */
.user-acnt {
    color: #D93135;
    border-width:3px !important;
    padding: 1rem 0.5rem 1rem 1rem;
}
.pading{
    padding-bottom: 0.1rem;
}
/* //my Account */

/* User Account */
.user-add-connection {
    bottom: 0;
    left: 32%;
}
.user-icon {
    padding: 0.1rem 0.2rem;
}
/* User Account */

/* User Edit */
.upload-img {
    opacity: 0;
    padding: 4.5rem 1.5rem;
    top: 0;
    left: 0;
}
.bordr-red{
    border: 1px solid #fe0000;
}
.j {
    border-bottom: 1px dotted #999!important;
}
/* User Edit */

/* User upgrade */
.user-bg{
    background: url("../images/upgrade-grey bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.circle-white {
    top: 10%;
    left: 6%;
}
.cost{
    top: 15%;
    right: 8%;
}
.lineht {
    line-height: 0.5rem;
}
.shadow {
    box-shadow: 0px 20px 15px -15px #999;
}
.shadow1 {
    box-shadow: 0px 17px 16px -10px #999;
}
.shadow3 {
    box-shadow: 0px 10px 16px -4px #999;
}
.shadow2{
    box-shadow: 0px 0px 0px 1px #bbbbbb4a;
}
.bg-upgrade{
    background: url(../images/upgrade-bottom.png);
    background-repeat: no-repeat;
    background-position: bottom;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}
.bg-upgradefree{
    background: url(../images/upgrade-bottom.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.plans {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Hide the browser's default checkbox */
  .plans input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    top: 10%;
    left: 8%;
    height: 18px;
    width: 18px;
    background-color: transparent;
    border: 1px solid;
    border-radius: 50%;
  }
  
  /* On mouse-over, add a grey background color */
  .plans:hover input ~ .checkmark {
    background-color: transparent;
  }
  
  /* When the checkbox is checked, add a blue background */
  .plans input:checked ~ .checkmark {
    background-color: transparent;
    border: 1px solid;
    border-radius: 50%;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .plans input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .plans .checkmark:after {
    left: 8px;
    top: -5px;
    width: 7px;
    height: 18px;
    border: solid white;
    border-width: 0 2px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(40deg);
  }

/* plan Select Radio button */
.plans_duration {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Hide the browser's default checkbox */
  .plans_duration input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  .select_plan {
    position: absolute;
    top: 0%;
    height: 10px;
    width: 10px;
    background-color: transparent;
    border: 1px solid;
    border-radius: 50%;
    right: -10%;
  }
  
  /* On mouse-over, add a grey background color */
  .plans_duration:hover input ~ .select_plan {
    background-color: transparent;
  }
  
  /* When the checkbox is checked, add a blue background */
  .plans_duration input:checked ~ .select_plan {
    background-color: green;
    border: 1px solid;
    border-radius: 50%;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .select_plan:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .plans_duration input:checked ~ .select_plan:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .plans_duration .select_plan:after {
    left: 2px;
    top: 0px;
    width: 4px;
    height: 7px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(40deg);
  }
/* plan Select Radio button */

  .ribbon-wrapper-red {
    width: 45px;
    height: 45px;
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 4px;
}
.ribbon-red {
    font: bold 9px Sans-Serif;
    color: #fff;
    text-align: center;
    /* text-shadow: rgba(255,255,255,0.5) 0px 1px 0px; */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    position: relative;
    padding: 1px 0;
    left: -56px;
    top: 9px;
    width: 145px;
    /* background-color: #fe0000; */
    color: #fff;
    /* -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.3); */
}
  
  .ribbon-red:after,
  .ribbon-red:after{
    content: "";
    /* border-top: 3px solid #fe0000;   
    border-left: 3px solid transparent;
    border-right: 3px solid transparent; */
    position:absolute;
    bottom: -3px;
  }
  .ribbon-red:before{
    right: 0;
  }
  .ribbon-red:after{
    left: 0;
  }
  .subscription-plan:hover {
      border: 2px solid #77d353;
    box-shadow: 0px 0px 0px 2px #77d353;
  }
  .subscription-plan:active {
    border: 2px solid #77d353;
  box-shadow: 0px 0px 0px 2px #77d353;
}
/* User upgrade */

/* User contact */
.contact img{
    left:0;
}
.text-box {
    margin-left: -3rem;
    background: transparent;
    border: none;
    margin-top: 6rem;
    -ms-transform: rotate(-7.5deg);
    -webkit-transform: rotate(-7.5deg);
    transform: rotate(-7.5deg);
    width: 75%;
    height: 480px;
}
.text-box:focus {
    outline-color: transparent;
}
.contact-scroller::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

.contact-scroller::-webkit-scrollbar
{
	width: 4px;
	background-color: #F5F5F5;
}

.contact-scroller::-webkit-scrollbar-thumb
{
	background-color: #fdc400;
}
/* User contact */

/* upload image */
.dm-uploader .btn input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}
/* upload image */
/* User Profile */
.connection-ring{
    top: 0%;
    left: 0%;
}

/* User Profile */
/* Footer */
.foter{
    background: url("../images/footer.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
/* Footer */
/* Other */
/* .slick-list{
    padding:1rem 0;
}
.slick-list
{
    margin: 0.5rem 1rem;
}
.slick-slide {
    margin: 0px .5;
} */
/* Responsive CSS */
@media (max-width: 1680px) {
    /* .redcircle{
        right: -17%;
    }
    .bluecircle{
        right: -17%;
    }
    .yellowcircle{
        left: -13.5%;
    } */
    .stickynav{
        padding-top: 4.8%;
        }
    .col-md-4-5 { width: 20%; }
    .community-ht {
        min-height: 600px;
    }
    .style3 {
        margin-top: -2%;
        width: 68%;
    }
    .package-ht {
        max-height: 330px;
        min-height: 330px;
    }
    
    .style {
        margin:1rem 0;
    }
    .comm-ht {
        max-height: 320px;
        min-height: 320px;
    }

   .abs-center-x {
    top: 4%;
    left: 18%;
    } 
     /* my Info */
    .userprofile{
        max-width: 350px;
        min-width: 350px;
        max-height: 350px;
        min-height: 350px;
    }
    .userprofile-img{
        max-width: 350px;
        max-height: 350px;
        min-width: 350px;
        min-height: 350px;
    }
    .text-box {
        height: 395px;
    }
    .quote {
        right: 10%;
        left: 10%;
        padding: 0;
        top: 30%;
    }
    .triviaL {
        right: 15%;
    }
    .triviaR {
        right: 5%;
    }
}

@media (max-width: 1600px) {
    /* .redcircle{
        right: -18%;
    }
    .bluecircle{
        right: -18%;
    }
    .yellowcircle{
        left: -14.5%;
    } */
    .stickynav{
        padding-top: 5%;
        }
    .text-box {
        height: 375px;
    }
    .package-ht {
        max-height: 310px;
        min-height: 310px;
    }
}
@media(max-width: 1473px) {
    /* .redcircle{
        right: -19.5%;
    }
    .bluecircle{
        right: -20.5%;
    }
    .yellowcircle{
        left: -16%;
    } */
    .text-box {
        height: 325px;
    }
}
@media only screen and (max-width: 1440px) {
    /* .redcircle{
        right: -20%;
    }
    .bluecircle{
        right: -20.5%;
    }
    .yellowcircle{
        left: -16%;
    } */
    .stickynav{
        padding-top: 5.6%;
        }
    .col-md-4-5 { width: 20%; }
    .community-ht {
        min-height: 536px;
    }
    .style3 {
        margin-top: -2%;
        width: 63%;
    }
    .style {
        margin:0.75rem 0;
    }
    
    .package-ht{
        max-height: 260px;
        min-height: 260px;
    }
   .profile-ring {
    /* top: 0%;
    left: 28%; */
    }
     /* my Info */
     .userprofile{
        max-width: 280px;
        min-width: 280px;
        max-height: 250px;
        min-height: 250px;
    }
    .userprofile-img{
        max-width: 250px;
        max-height: 250px;
        min-width: 250px;
        min-height: 250px;
    }
    .text-box {
        height: 315px;
    }
    
}
@media(max-width: 1366px) {
    .bg-index{
        background: url("../images/banner-md.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    .bg-joinform{
        background: url("../images/banner-md.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    .bg-forgot {
        background: url("../images/banner-md.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    /* .redcircle {
        right: 7%;
        top: 12%;
    }
    .bluecircle {
        right: 13%;
        bottom: 0%;
    }
    .yellowcircle {
        left: 14%;
        bottom: 25%;
    } */
    .stickynav{
        padding-top: 6.2%;
        }
    .col-md-4-5 { width: 20%; }
    
   
   .abs-center-x {
    top: 4%;
    left: 13%;
    }   
    .comm-ht{
        max-height: 295px;
        min-height: 295px;
    }
    .package-ht{
        max-height: 240px;
        min-height: 240px;
    }
    .style3 {
        margin-top: -2.5%;
        width: 58%;
    }
    .community-ht {
        min-height: 520px;
    }
    .quote{
        right: 10%;
        left: 10%;
        top:20%;
    }
    .triviaL {
        right: 15%;
        top: 15%;
    }
    .triviaR {
        right: 0%;
        left: 15%;
        top: 15%;
    }
    .text-box {
        height: 300px;
    }
}

@media(max-width: 1280px) {
    /* .redcircle{
        right: -23%;
    }
    .bluecircle{
        right: -24.5%;
    }
    .yellowcircle{
        left: -19%;
    } */
    .col-md-4-5 { width: 20%; }
    .style {
        margin:0.5rem 0;
    }
    .stickynav{
        padding-top: 7%;
        }
    .col-md-4-5 { width: 20%; }
    .community-ht {
        min-height: 490px;
    }
    .conn-center-x {
        padding-right: 0.5rem;
        padding-bottom: 0.5rem;
    }
   .abs-center-x {
    top: 4%;
    left: 11%;
    }
    .fav{
        font-size:70%;
    }
       /* my Info */
    .userprofile{
        max-width: 250px;
        min-width: 250px;
        max-height: 250px;
        min-height: 250px;
    }
    .userprofile-img{
        max-width: 250px;
        min-width: 250px;
        max-height: 250px;
        min-height: 250px;
    }
    .text-box {
        height: 285px;
    }
    .package-ht{
        max-height: 215px;
        min-height: 215px;
    }
}

@media(max-width: 1200px) {
    /* .rightbox {
        width: 53%;
        } */
}

@media(max-width: 1136px) {
    /* .redcircle{
        right: -25%;
    }
    .bluecircle{
        right: -27.5%;
    }
    .yellowcircle{
        left: -22%;
    } */
    .navbar-light .navbar-nav .nav-link {
        font-size: 0.75rem;
    }
    .text-box {
        height: 240px;
    }
}
@media(max-width: 1080px) {
    .foter{
        font-size: 80%;
    }
}
@media(max-width: 1024px) {

    @-moz-document url-prefix() {
        /* .rightbox{
            width: 48%!important;
        } */
    }
    .w-join {
        width: 70%;
    }
    .btn-form-right {
        left: 8%;
        right: unset;
    }
    /* .redcircle {
        right: -24%;
    }
    .bluecircle {
        right: -25.5%;
    }
    .yellowcircle {
        left: -20%;
    } */
    .stickynav{
        padding-top: 7.8%;
        }
    .col-md-4-5 { width: 20%; }
    .community-ht {
        min-height: 450px;
    }
    .style3 {
        margin-top: -3%;
        width: 45%;
    }
    .recommended p{
        font-size:80%;
    }
    .recommended label{
        font-size:65%;
    }
    .select-sm {
        height: calc(1.2em + 0.5px)!important;
    }
    .reg-img {
        bottom: 12%;
        width: 70%;
   }
   .logo img {
    margin-left: 0rem!important;
    }
    .circle-white {
        top: 1%;
        left: 4%;
    }
   /*User*/
    .user-center-x {
        padding-right: 0.65rem;
        padding-bottom: 0.5rem;
   }
   /*mycollections*/
   .conn-center-x {
    padding-left: 0.65rem;
    padding-top: 0.75rem;
    padding-right: 0.35rem;
    padding-bottom: 0.25rem;
    }
   .abs-center-x {
    top: 0%;
    left: 10%;
    }
    .font-50 {
        font-size: 45%;
    }
    .foter{
        font-size: 80%;
    }
    .userprofile {
        max-width: 185px;
        min-width: 185px;
        max-height: 185px;
        min-height: 185px;
    }
    .userprofile-img {
        max-width: 185px;
        min-width: 185px;
        max-height: 185px;
        min-height: 185px;
    }
    .text-box {
        height: 200px;
    }
    .quote p{
    font-size: 45%;
    }
    .triviaL p, .triviaR p{
        font-size: 45%;
        }
    .package-ht{
        max-height: 140px;
        min-height: 140px;
    }
}
@media(max-width: 991px) {
    .bg-joinform {
        background: #F5F5F5;
    }
    .bg-index{
        background: #F5F5F5;
        /* height: 80%; */
    }
    .bg-forgot{
        background: #F5F5F5;
        /* height: 80%; */
    }
    .bg-forgot:before{
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: -0.1%;
        background:none;
    }
    /* .redcircle{
        right: -12%;
    }
    .bluecircle{
        right: -11.5%;
    }
    .yellowcircle{
        left: -9%;
    } */
    .col-md-4-5 { width: 20%; }
    .signin{
        border-top: 1px solid #343a40;
        padding-top: 1.3em;
        padding-bottom: 0.5rem;
   }
   .style {
    margin: 0.6rem 0;
    }
    .recommended label {
        font-size: 80%;
    }
    .user-center-x{
    padding-left: 0.65rem;
    padding-top: 0.65rem;
    padding-right: 0.25rem;
    padding-bottom: 0.25rem;
    }
   .userprofile {
    max-width: 130px;
    min-width: 130px;
    max-height: 130px;
    min-height: 130px;
    }
    .userprofile-img {
        max-width: 130px;
        min-width: 130px;
        max-height: 130px;
        min-height: 130px;
    }
    .conn-center-x {
        padding-left: 0.65rem;
        padding-top: 0.65rem;
        padding-right: 0.25rem;
        padding-bottom: 0.25rem;
    }
    .text-box {
        margin-left: -1rem;
        margin-top: 3rem;
        width: 85%;
        height: 130px;
    }
    .circle-white {
        top: 3%;
        left: 2%;
    }
}
@media(max-width: 800px) {
    .navbar-light .navbar-nav .nav-link {
        font-size: 0.6rem;
    }
    .bg-joinform {
        height: 82%;
    }
    /* .redcircle {
        right: -10.5%;
    }
    .bluecircle {
        right: -10%;
    }
    .yellowcircle {
        left: -7.5%;
    } */
    .stickynav{
        padding-top: 8%;
        }
       
    .abs-center-x {
        /* top: 0%;
        left: 18%; */
       }
    .col-md-4-5 { 
        width: 20%;
     }
     .community-ht {
        min-height: 620px;
    }
    .textarea-text {
        right: 15%;
    }
    .navbar-nav .nav-link{
        font-size: 60%;
   }
    /* .navbar img{
        max-width: 75%;
   } */
   .text-box {
    margin-left: -1rem;
    margin-top: 3rem;
    width: 85%;
    height: 130px;
    }
    .playstore{
        text-align:center!important;
        margin-top: 0.5rem!important;
    }
}
@media screen and (max-width: 800px) and (min-width: 736px) {
    .col-md-4-5 { width: 20%; }
    .community-ht {
        min-height: 465px;
    }
    .user-img{
       width:70%
   }
  }
@media(max-width: 768px) {
    .bg-index {
        /* height: 75% */
    }
    .bg-joinform {
        height: 78%;
    }
    .bg-forgot{
        height: 86%;
    }
    /* .redcircle {
        right: -11%;
    }
    .bluecircle {
        right: -10.2%;
    }
    .yellowcircle {
        left: -8.2%;
    } */
    .stickynav{
        padding-top: 8.1%;
        }
    .col-md-4-5 { width: 20%; }
    .reg-img {
        bottom: 26%;
        width: 80%;
   }
   /*mycollections*/
    .abs-center-x {
        top: 0%;
        left: 18%;
   }
}

@media(max-width: 736px) {   
    /* .collapse{
        padding:1rem 2rem;
    } */
    .bg-index {
        /* height: 80% */
    }
    /* .redcircle {
        right: -11.6%;
    }
    .bluecircle {
        right: -11.2%;
    }
    .yellowcircle {
        left: -8.8%;
    } */
    .navbar-nav{
        text-align: center;
        padding: 1.2rem;
    }
    .nav-link {
        padding-bottom: 0.25rem!important;
        font-size: 100%!important;
    }
    #topheader .nav-link:hover  {
        border-bottom: none!important;
        background-color: #ff0000;
        color: #fff!important;
        padding-bottom: 0.25rem!important;
        font-size: 100%!important;
    }
    .navactive {
        border-bottom: none!important;
        color: #fff!important;
        font-weight: 700!important;
        background-color: #fe0000;
        padding-bottom: 0.25rem!important;
        font-size: 100%!important;
        }
    .stickynav{
        padding-top: 14%;
        }
    .abs-center-x {
        top: 2%;
        left: 24%;
    }
    .user-edit {
        right: unset;
        bottom: 5%;
        left: 2%;
    }
    .text-box {
        margin-left: -1rem;
        margin-top: 3rem;
        width: 80%;
        height: 280px;
    }
    .quote p{
        font-size: 65%;
    }
    .triviaL p, .triviaR p{
        font-size: 65%;
    }
}

@media(max-width: 720px) {
    .community-ht {
        min-height: 540px;
    }
}

@media(max-width: 640px) {
    /* .redcircle {
        right: -14%;
    }
    .bluecircle {
        right: -13.5%;
    }
    .yellowcircle {
        left: -10.5%;
    } */
    .bg-index {
        /* height: 69%; */
    }
    .bg-joinform {
        height: 59%;
    }
    .bg-joinform{
        margin:1rem 0;
   }
    .bg-joinform:before {
        bottom: -4%;
    }
   .bg-forgot{
    height: 80%;
    }
    .stickynav {
        padding-top: 17%;
    }
    .col-md-4-5 { 
        width: 20%; 
    }
    .community-ht {
        min-height: 480px;
    }
    .style3 {
        margin-top: -3%;
        width: 52%;
    }
    .bg-registration {
        height: 100%;
    }
    /* .signin input {
        margin-bottom: 0.5rem;
   } */
   .signdiv {
    width: 30%;
    }
    .form-inline .form-control {
        width:95%;
    }
    /* .orsignin{
        margin-left:3rem!important;
   } */
    .logo{
        margin:auto;
   }
    .abs-center-x {
        top: 0%;
        left: 24%;
    } 
    .text-box {
        height: 225px;
    }
    .circle-white {
        top: 15%;
        left: 5%;
    }
    .package-ht {
        max-height: fit-content;
        min-height: fit-content;
        overflow-y: unset;
        overflow: unset;
    }
}
@media(max-width: 600px) {
    .bg-index {
        /* height: 70%; */
    }
    /* .redcircle {
        right: -14.2%;
    }
    .bluecircle {
        right: -14%;
    }
    .yellowcircle {
        left: -10.9%;
    } */
    .text-box {
        height: 215px;
    }
}
@media(max-width: 540px) { 
    /* .redcircle {
        right: -16%;
    }
    .bluecircle {
        right: -15.7%;
    }
    .yellowcircle {
        left: -12.5%;
    } */
    .stickynav {
        padding-top: 20%;
    }
    .col-md-4-5 { width: 20%; }
    .community-ht {
        min-height: 475px;
    }
    .recommended label {
        margin-bottom: 0rem;
    }
    /* .btn-form, .btn-form-right{
        bottom: 5%;
    }
    .btn-form-right {
        right: 50%;
    } */
    /* .detials{
        text-align: center
    } */
    /* .smaller {
        font-size: 80%;
   } */
   .abs-center-x {
    top: 0%;
    left: 35%;
    }
    .pull-left {
        text-align:left !important;
    }
    .text-box {
        height: 165px;
    }
    .signdiv {
        width: 28%;
    }
    /* .orsignin {
    margin-left: auto !important;
    } */
    /* .orsignin a{
        margin-top: 0.5rem!important;
    } */
    label.error{
       float:left;
    }
    .signinerror{
        bottom: 21%;
    }
     /* .searchbox {
        float: left!important;
    } */
    .quote {
        right: 25%;
        left: 10%;
        top: 25%;
    }
    .triviaL {
        right: 27%;
        top: 15%;
    }
    .triviaR {
        right: 20%;
        left: 15%;
        top: 15%;
    }
    @-moz-document url-prefix() {
    label.error {
        position: relative;
    }
    }
}
@media all and (min--moz-device-pixel-ratio:0) and (max-width: 540px){
    /* .signin form {
        width: 55%;
        margin: auto;
        } */
}
@media(max-width: 480px) {
    /* .signin form {
    width: 55%;
    margin: auto;
    } */
    /* .signin button {
        margin-top: 1.5rem;
        margin: 1.5rem auto 0;
    } */
    /* .orsignin {
        margin: 0 auto!important;
        padding-top: 1em;
    } */
    .signin form {
        width: 100%;
        margin: auto;
        }
        .signdiv {
            width: 100%;
            margin-bottom: 1rem;
        }
        .signinerror {
            bottom: 24%;
        }
        .forgotpass {
            right: 3%;
            bottom: -170%;
        }
    
    /* .redcircle {
        right: -18.5%;
    }
    .bluecircle {
        right: -18.5%;
    }
    .yellowcircle {
        left: -14.5%;
    } */
    .stickynav{
        padding-top: 23%;
        }
    .col-md-4-5 { 
        width: 20%; 
    }
    .col-md-4-5 p{ 
        font-size: 58%;
      }
    .community-ht {
        min-height: 440px;
    }
    /* .smaller {
        font-size: 80%;
   } */
    .abs-center-x {
        top: 0%;
        left: 36%;
    }
    .text-box {
        height: 180px;
    }
    .circle-white {
        top: 6%;
        left: 5%;
    }
    .quote {
        right: 15%;
        left: 10%;
        top: 30%;
    }
    .triviaL {
        right: 20%;
        top: 20%;
    }
    .triviaR {
        right: 10%;
        left: 15%;
        top: 20%;
    }
}

@media(max-width: 440px) {
    
    .bg-index {
        /* height: 75%; */
    }
    .bg-joinform {
        height: 75%;
    }
    .bg-forgot{
        height: 100%;
        }
    /* .redcircle {
        right: -20%;
    }
    .bluecircle {
        right: -20.6%;
    }
    .yellowcircle {
        left: -16.5%;
    } */
    .stickynav{
        padding-top: 28%;
        }
        .btn-form, .btn-form-right {
            bottom: 3%;
        }
        .btn-form {
            right: 2%;
        }
        .btn-form-right {
            left: 2%;
        right: unset;
        }
    .col-md-4-5 { width: 20%; }
    .community-ht {
        min-height: 450px;
    }
    .bg-registration {
        height: auto;
   }
    .abs-center-x {
        top: 0%;
        left: 29%;
    }
    .text-box {
        height: 130px;
    }
}

/* @media(max-width: 440px) {
     .redcircle {
        right: -22.4%;
    }
    .bluecircle {
        right: -23.2%;
    }
    .yellowcircle {
        left: -18.5%;
    }    
} */

@media(max-width: 424px) {
    /* .redcircle {
        right: -20.7%;
    }
    .bluecircle {
        right: -21.7%;
    }
    .yellowcircle {
        left: -16.9%;
    } */
    .text-box {
        height: 85px;
    }
}

@media(max-width: 375px) {
    .abs-center-x {
     top: 0%;
     left: 20%;
     }
     .text-box {
        height: 65px;
    }
    .quote {
        right: 10%;
        left: 10%;
        top: 20%;
    }
    .quote p {
        font-size: 60%;
    }
    .triviaL {
        right: 15%;
        top: 20%;
    }
    .triviaR {
        right: 5%;
        left: 15%;
        top: 20%;
    }
    .triviaL p, .triviaR p {
        font-size: 60%;
    }
 }

 @media(max-width: 384px) {
    /* .redcircle {
        right: -23.3%;
    }
    .bluecircle {
        right: -24%;
    }
    .yellowcircle {
        left: -18.9%;
        } */
        .signin button{
            padding-left: 0.5rem!important;
            padding-right: 0.5rem !important;
         }
         .community-ht {
            min-height: 420px;
        }
 }

@media(max-width: 360px) {
    /* .redcircle {
        right: -24.9%;
    }
    .bluecircle {
        right: -27.6%;
    }
    .yellowcircle {
        left: -20.9%;
    } */
    .forgotpass {
        right: 1%;
        bottom: -170%;
    }
    .stickynav {
        padding-top: 32%;
    }
    .col-md-4-5 { width: 20%; }
    .sliderr {
    padding: 0 3rem;
    }
    .abs-center-x {
    top: 0%;
    left: 31%;
    }
    @-moz-document url-prefix() {
        .form-check-input {
            margin-right: 0!important;
        }
    }
}

@media(max-width: 320px) {
    .w-join {
        width: 82%;
    }
    /* .redcircle {
        right: -24.7%;
    }
    .bluecircle {
        right: -25.7%;
    }
    .yellowcircle {
        left: -19.9%;
    } */
    .bg-index{
        /* height: 100%; */
    }
    .bg-joinform {
        height: 100%;
    }
    .joinform{
        margin-top: 0.5rem;
    }
    /* .signin form {
        width: 100%;
        margin: auto;
    } */
    
    .col-md-4-5 { 
        width: 20%;
     }
     .col-md-4-5 p{ 
       font-size: 58%;
     }
     .community-ht {
        min-height: 380px;
    }
     .recommendedbtn {
        padding-left: 1rem!important;
        padding-right: 1rem !important;
    }
     
     .forgotpass {
        right: -16%;
        bottom: -175%;
    }
     .signinerror {
        bottom: 24%;
    }
     .orsignin {
        margin-left: 0rem!important;
    }
    .abs-center-x {
        top: 0%;
        left: 26%;
    }
    .text-box {
        margin-top: 1rem;
        width: 100%;
        height: 75px;
    }  
    .nav-linkk {
        padding: .25rem 0.9rem;
    }
    .quote p {
        font-size: 50%;
    }
    .triviaL {
        right: 10%;
        top: 20%;
    }
    .triviaR {
        right: 0%;
        left: 13%;
        top: 20%;
    }
    .triviaL p, .triviaR p {
        font-size: 50%;
    }
}
/* //////////////////////////////////////////////////////// */
/* Subscription Popup */

.poopup {
    border: 4px solid white;
    border-radius: 5%;
    background: url("../images/subscription_bg.png");
    /* height: 90%;  */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.modal-backdrop {
    z-index: 0 !important;
}

.modal {
    z-index: 1100 !important;
}

.upgrade-img {
    bottom: 89%;
    left: 30%;
}

.subclose {
    bottom: 97%;
    right: -3%;
    border: none !important;
    padding: 0px 7px !important;
}

/* .jcarousel-pagination a {
    background: transparent;
    border: 1px solid #fff;
} 

.jcarousel-pagination a.active {
    background: #fdcf00;
}*/

/* .wrapper{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 10vh auto 0;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
-webkit-transform: translateY(-50%);
        transform: translateY(-50%);
} */
.sub-package {
    bottom: 0%;
}

.switch_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.box_1 {}

input[type="checkbox"].switch_1 {
    font-size: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 3.3em;
    height: 1.3em;
    background: #fdcf00;
    background: url("../images/bg-switch.png");
    background-size: cover;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    border-radius: 3em;
    position: relative;
    cursor: pointer;
    outline: none;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

input[type="checkbox"].switch_1:checked {
    background: #fdcf00;
    background: url("../images/bg-switchchecked.png");
    background-size: cover;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

input[type="checkbox"].switch_1:after {
    position: absolute;
    content: "";
    width: 1.3em;
    height: 1.3em;
    border-radius: 50%;
    background: #fff;
    -webkit-box-shadow: 0 0 .25em rgba(0, 0, 0, .3);
    box-shadow: 0 0 .25em rgba(0, 0, 0, .3);
    -webkit-transform: scale(.7);
    transform: scale(.7);
    left: 0;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

input[type="checkbox"].switch_1:checked:after {
    left: calc(100% - 1.5em);
}

/* The ribbons */
.corner-ribbon {
    /*  width: 200px;
background: #e43; */
    position: absolute;
    top: 25px;
    left: -50px;
    text-align: center;
    line-height: 20px;
    letter-spacing: 0px;
    color: #fff;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

/* .corner-ribbon.sticky{
position: fixed;
} */
.top-left {
    width: 45px;
    height: 45px;
    overflow: hidden;
    position: absolute;
    top: -17px;
    left: 3px;
    /* top: -53%;
    left: 0%;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); */
}
.top-center {
    width: 45px;
    height: 45px;
    overflow: hidden;
    position: absolute;
    top: -31px;
    left: -7px;
    /* top: -101%;
    left: -11%;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); */
}
.top-right {
    /* top: -25%;
    left: -2%;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); */
    width: 30px;
    height: 30px;
    overflow: hidden;
    position: absolute;
    top: -10px;
    left: 0px;
}
.top-right .ribbon-red {
    font-size: 7px !important;
}

.swal2-show{
    background-color: #fff;
    border: 0 solid #fff;
    color: #333;
    border-bottom: 10px solid #fe0000;
    /* background: linear-gradient( to left, red 0, red 33.3%, orange 33.3%, orange 66.6%, blue 66.6%, blue )no-repeat;
    background-size: 100% 3px;
    padding-top: 3px; */
}
@media(max-width: 1024px) {
    .corner-ribbon.top-left {
        top: -97%;
        left: 0%;
    }
    .corner-ribbon.top-center {
        top: -150%;
        left: -11%;
    }
    .corner-ribbon.top-right {
        top: -52%;
        left: -2%;
    }
}
@media (max-width: 1024px){
    .corner-ribbon.top-center {
        top: -118%;
        left: -13%;
    }
    .subclose {
        padding: 2px 7px !important;
    }
}
@media (max-width: 540px){
    .sub-popup {
      padding-top: 5rem !important;
    }
    .corner-ribbon.top-center {
        top: -155%;
        left: -9%;
    }        
}
@media (max-width: 480px){
    .poopup {
    width: 75%!important;
    }
    .corner-ribbon.top-left {
    top: -120%;
    left: 4%;
    }
    .corner-ribbon.top-center {
    top: -179%;
    left: -9%;
    }
    .corner-ribbon.top-right {
    top: -75%;
    left: 1%;
    }
}
@media (max-width: 424px){
    .corner-ribbon.top-left {
    top: -90%;
    left: 2%;
    }
    .corner-ribbon.top-center {
    top: -150%;
    left: -12%;
    }
    .corner-ribbon.top-right {
    top: -49%;
    left: -1%;
    }
}
@media (max-width: 400px){
    .corner-ribbon.top-left {
    top: -73%;
    left: -2%;
    }
    .corner-ribbon.top-center {
        top: -122%;
        left: -12%;
    }
}
@media (max-width: 360px){
    .poopup {
    width: 85%!important;
    }
}
@media (max-width: 320px){
    .stickynav {
        padding-top: 38%;
    }
    .upgrade-img {
        bottom: 89%;
        left: 24%;
    }
    .sub-popup {
    padding-top: 4rem !important;
    }
    .sub-slider{
        margin-top: 0.5rem!important;
    }
    .sub-plan{
        margin-top: 1.5rem!important;
    }
} 
/*// Subscription Popup */