:root {
    --lightest_gray: #EAEAEA;
	--lighter_gray: #9F9F9F;
	--light_gray: #909090;
	--gray: #646464;
	--almost_black: #4A4A4A;
    --soft_green: #a9f383;
	--light_green: #67D400;
	--green: #2fa432;
	--dark_green: #1D3402;
    --soft_orange: #ffbd8a;
	--orange: #FF8F43;
	--dark_orange: #EE5000;
	--cream: #FFFFD6;

	--color_primary: var(--dark_green);
	--color_accent: var(--orange);
	--bg_color: white;
    --tag_one: var(--soft_green);
    --tag_two: var(--soft_orange);

}
footer {
	background-color: #236c76;
	color: white;
}
header {
    box-shadow: 0 5px 10px rgba(151, 164, 175, 0.1);
}
header .navbar-light .navbar-nav .nav-link {
	padding-right: 1rem;
    padding-left: 1rem;
    padding-top: 1.5rem;
    padding-bottom: calc(1.5rem - 3px);
    border-bottom: 3px solid white;
}
header .navbar-light .navbar-nav .nav-link:active,
header .navbar-light .navbar-nav .nav-link:hover,
header .navbar-light .navbar-nav .nav-link:focus{
    text-decoration-style: -moz-none;
    text-decoration: none;
    border-color:#116d7c;
    color: #2fa432;
    outline: none;
}
.text-link-green {
    display: inline-block;
}
.text-link-green:hover,
.text-link-green:active{
    text-align: left;
    text-decoration: none;
}
.text-link-green::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: var(--light_green);
    transition: width .3s;
    margin-bottom: -4px;
    margin-top: 4px;
}
.text-link-green:hover::after {
    width: 100%;
    /* transition: width .3s; */
}
.href-link {
    color: var(--orange);
}
.href-link:hover {
    color: var(--orange);
}
.header-brand {
	width: 150px;
	min-width: 130px;
	max-width: 200px;
}
/* white toggle */
.custom-toggler.navbar-toggler {
    border: none;
    padding: 0;
    margin-top: 1.3rem;
    margin-bottom: 1.4rem;
    outline: none;
}
.icon-bolt {
	color: var(--color_accent);
}

@media (max-width: 768px) {
    .navbar-collapse {
        border-top: 1px solid rgb(221, 221, 221);
        padding-bottom: .5rem;
    }
    .navbar-collapse .navbar-nav .nav-link {
        padding-left: 1rem !important;
        padding-bottom: 0!important;
        padding-top: .5rem!important;
        border: unset;
    }
    header .navbar-light .navbar-nav .nav-link:active, header .navbar-light .navbar-nav .nav-link:hover, header .navbar-light .navbar-nav .nav-link:focus {
        outline: none;
        border-color: unset;
        border-bottom: unset;
    }
    .dropdown:hover .dropdown-menu {
        border: none;
        border-left: 3px solid #116d7c;
        border-top: none !important;
        margin-left: 1.5rem;
        margin-right: 1.5rem;
        margin-top: .5rem;
        padding-top: 0;
        padding-bottom: 0;
    }
    .dropdown-item {
        padding-left: .8rem;   
    }
}
.form-control, .btn {
    outline: none !important;
    box-shadow: none !important;
}

/* dropdown */
.dropdown-menu {
    text-transform: capitalize;
}
.dropdown:hover .dropdown-menu {
	display: block;
	top: 4.2rem;
    border-top: 3px solid #116d7c;
    border-radius: 0;
}
.input-group{
	min-width: 20vw;
}

.footer-brand {
	width: 200px;
}
.fs-12 {
    font-size: 12px !important;
}
.fs-14 {
    font-size: 14px !important;
}
.font-weight-500 {
    font-weight: 500!important;
}
.border-radius-1rem {
    border-radius: 1rem;
}
.text-footer {
    color: #ccc;
    font-size: 14px;   
}
.footer-section {
	font-size: 85%;
	font-weight: bold;
	text-align: right;
	margin-top: 1vw;
	margin-right: 1vw;
}
.social-icons {
	display: flex;
}
.padding-small{
	margin-top: 23px;
}
.footer-left-btn{
	display: flex;
	justify-content: flex-start;
	margin-bottom: 5px;
}
.footer-btn{
	width: 10vw;
	min-width: 120px;
	margin-left: 1vw;
	color: var(--white);
	background-color: transparent;
	font-size: smaller;
	border-color: white;
}

.footer-btn:active,
.footer-btn:hover,
.footer-btn:focus{
    color: white;
    text-decoration-style: -moz-none;
    text-decoration: none;
    background-color: var(--light_green); /* For browsers that do not support gradients */
    background-image: linear-gradient(135deg, var(--color_primary), var(--light_green)); /* Standard syntax (must be last) */
}

.list-link {
	color: white;
	font-size: 70%;
	font-weight: lighter;
	margin-left: 1vw;
}
.list-link:hover, .list-link:active {
	color: white;
	text-decoration: underline;
	text-decoration-color: white;
}

/* Social Icons Button */
.btn-fa{
	width: 2.2rem;
	text-align: center;
	text-decoration: none;
	margin-right: .5rem;
	padding: 5px;
	border-radius: 10px;
}
.btn-fa:hover, btn-fa:active{
	text-decoration: none;
	color: white;
}
.social-icons .fa-line{
	color: white;
	background: #00c300;
}
.social-icons .fa-whatsapp {
	color: white;
	background: #25d366;
}
.social-icons .fa-envelope {
	color: white;
	background: #0099e5;
}
.social-icons .fa-facebook-f{
	color: white;
	background: #3b5998;
}
.social-icons .fa-twitter{
	color: white;
	background: #1da1f2;
}
.social-icons .fa-instagram{
	color: white;
	background: #e1306c;
}
.social-icons .fa-youtube {
	background: #bb0000;
	color: white;
	width: 2.3rem;
}
.social-icons .icon-phone {
    background-color: #aaa;
    color: white;
    width: unset;
    font-size: 12px;
    white-space: nowrap;
}
.fa-grayheart {
    color: var(--lighter_gray);
}
.fa-redheart{
    color: red;
}
.fa-coins{
    color: var(--orange);
}
.tab{
    margin-left: 1em;
}
.footer-visitor{
	color: white;
	font-size: 70%;
	text-align: right;
	margin-right: 1vw;
}
.footer-copyright{
	color: white;
	font-size: 70%;
	text-align: center;
	margin-top: 2vw;
	margin-bottom: 1vw;
}
.footer-copyright a{
    color: white;
    text-decoration: none;
}
.footer-copyright a:hover,
.footer-copyright a:active{
    color: var(--color_accent);
    text-decoration: none;
}

.main-content{
    position: relative;
    min-height: 500px;
}
.carousel-indicators li{
    background-color: var(--color_primary);
}
.carousel-indicators .active{
    background-color: var(--light_green);
}
#funfact .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%4A4A4A' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
#funfact .carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%4A4A4A' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
#funfact .carousel-control-prev-icon:active, #funfact .carousel-control-prev-icon:hover {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%4A4A4A' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
#funfact .carousel-control-next-icon:active, #funfact .carousel-control-next-icon:hover {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%4A4A4A' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
#funfact .carousel-inner {
    text-align: center;
    background-color: var(--lightest_gray);
    color: var(--almost_black);
}
#funfact .carousel-indicators {
    bottom: 0;
}
.add-padding-top{
    margin-top: 2%;
}
.title-gray{
    text-align: center;
    color: var(--gray);
    font-weight: bold;
    font-size: 140%;
    margin-top: 3%;
    margin-bottom: 3%;
}
.title-green{
    text-align: center;
    color: var(--light_green);
    font-weight: bold;
    font-size: 140%;
    margin-top: 3%;
    margin-bottom: 3%;
}
.title-black{
    text-align: center;
    color: var(--almost_black);
    font-weight: bold;
    font-size: 140%;
    margin-top: 3%;
    margin-bottom: 3%;
}
.benefit-home {
    color: var(--almost_black);
    text-align: center;
    font-size: 110%;
    margin-bottom: 6%;
}
.fa-plus-circle{
    color: var(--light_green);
}

#topProduct,
.catalog{
    margin-bottom: 2%;
}
#topProduct a.hover-card,
.catalog a.hover-card,
.product-type a.hover-card,
.item-redeem a.hover-card{
    color: var(--gray);
}
#topProduct a.hover-card:hover,
#topProduct a.hover-card:active{
    color: white;
    text-decoration-style: -moz-none;
    text-decoration: none;
    background-color: var(--light_green); /* For browsers that do not support gradients */
    background-image: linear-gradient(135deg, var(--light_green), white); /* Standard syntax (must be last) */
}
#topProduct .carousel-control-prev-icon,
#review .carousel-control-prev-icon,
#article .carousel-control-prev-icon,
.catalog .carousel-control-prev-icon{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%67D400' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

#topProduct .carousel-control-next-icon,
#review .carousel-control-next-icon,
#article .carousel-control-next-icon,
.catalog .carousel-control-next-icon{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%67D400' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
.text-link-orange {
    color: var(--orange);
    font-size: small;
    font-weight: bold;
    display: inline-block;
}
.text-link-orange:hover,
.text-link-orange:active{
    color: var(--orange);
    text-align: right;
    text-decoration: none;
}
.text-link-orange::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: var(--orange);
    transition: width .3s;
}
.text-link-orange:hover::after {
    width: 100%;
    /* transition: width .3s; */
}
.fa-angle-double-right{
    color: var(--orange);
}
.review-box{
    background-color: var(--lightest_gray);
    color: var(--almost_black);
}
#review .carousel-item + .active,
.clear-float-right{
    clear: right;
}
.circle {
    width: 100%;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
    border: 2px solid var(--light_green);
    background-color: white;
}
.circle:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 100%;
}
.circle>img {
    position: absolute;
    height: 100%;
    left: 50%;
    transform: translateX( -50%);
    top: 0;
    right: 0;
    margin: 0 auto;
    bottom: 0;
    opacity: 0;
    transition: opacity .4s;
}
.circle>img.tallAndNarrow {
    width: 100%;
    top: 50%;
    transform: translateX(0) translateY( -50%);
    left: 0;
    height: auto;
}
.circle>img.loaded {
    opacity: 1;
}
#article{
    margin-bottom: 5%;
}
#article .wrapper{
    margin-bottom: 7%;
}
#article .carousel-indicators{
    bottom: -3%;
}
#article .img-thumbnail,
#article-citizen .img-thumbnail{
    width: 100%;
    height: auto;
}
#article .content{
    padding-top: 1%;
    padding-right: 1%;
}
#article .content .title a{
    font-weight: bold;
    font-size: 100%;
    color: var(--almost_black);
}
#article .content .title a:hover,
#article .content .title a:active{
    color: var(--orange);
    text-decoration: none;
}
#article .content .date{
    font-weight: normal;
    font-size: smaller;
    color: var(--lighter_gray);
}
.content-page {
    font-size: 100%;
    padding: 2%;
    color: var(--almost_black);
}
.storylink{
    color: #212529;
    font-size: 12px;
    margin-top: 1.5rem;
}
.storylink a {
    color: var(--lighter_gray);
}
.storylink a:hover,
.storylink a:active{
    text-decoration: none;
    color: var(--orange);
}
.suggestion .form-group,
.submit-challenge-form .form-group{
    margin-top: 2%;
}
.suggestion .required,
.submit-challenge-form .required{
    color: red;
}
.catalog a.hover-card:hover,
.catalog a.hover-card:active,
.product-type a.hover-card:hover,
.product-type a.hover-card:active,
.item-redeem a.hover-card:hover,
.item-redeem a.hover-card:active{
    color: white;
    text-decoration-style: -moz-none;
    text-decoration: none;
    background-color: var(--green); /* For browsers that do not support gradients */
    background-image: linear-gradient(180deg, var(--green), var(--white)); /* Standard syntax (must be last) */
}
.catalog .text-muted,
.product-type .text-muted{
    color: var(--orange) !important;
    font-size: medium;
}
.item-redeem .text-muted{
    color: var(--light_gray) !important;
}
.product-type .card,
.event-list .preview,
.item-redeem .card{
    margin-bottom: 7%;
}
.pagination{
    justify-content: center;
}
.page-link {
    border-radius: 2rem;
    padding-left: .8rem;
    padding-right: .8rem;
    margin-left: .2rem;
    margin-right: .2rem;
    outline: none!important;
    box-shadow: none!important;
    color: #212529;
    border: none;
}
.page-item.active .page-link {
    background-color: var(--orange);
}
.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem;
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
}
.page-link:hover {
    color: var(--orange);
}
.img-border{
    border: 1px solid var(--lightest_gray);
}
.list-article-img {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 240px;
}
.preview-title a{
    color: var(--almost_black);
    font-weight: bold;
    font-size: 100%;
}
.preview-subtitle{
    color: var(--lighter_gray);
    font-weight: normal;
    font-size: 60%;
}
.article-tag-notfound{
    font-size: 100%;
}
.tag-notfound{
    font-size: 80%;
    padding-left: 2%;
}
.article-tag-title {
    font-size: 80%;
    color: var(--light_gray);
    font-weight: bold;
    margin-bottom: 2%;
    padding-left: 2%;
}
.article-tag a{
    font-weight: normal;
    font-size: 75%;
    color: var(--almost_black);
    border-radius: 12px;
    border: 1px solid var(--light_gray);
    padding: 7px;
    margin: 4px;
    text-align: center;
}
.article-tag a.green{
    background-color: var(--tag_one);
}
.article-tag a.orange{
    background-color: var(--tag_two);
}
.article-tag a:hover,
.article-tag a:active{
    color: var(--white);
    text-decoration: none;
}
.article-tag a.green:hover,
.article-tag a.green:active{
    background-color: var(--green);
}
.article-tag a.orange:hover,
.article-tag a.orange:active{
    background-color: var(--dark_orange);
}
.article-citizen{
    margin-top: 50%;
    text-align: left;
}
hr.top{
    border: 1px solid var(--lightest_gray);
    margin-top: -1%;
}
hr.bottom{
    border: 1px solid var(--lightest_gray);
    margin-top: -5%;
}
#article-citizen{
    margin-bottom: 5%;
}
#article-citizen .content {
    padding-right: 1%;
    margin-left: -5%;
}
#article-citizen .content .title a{
    font-weight: bold;
    font-size: 80%;
    color: var(--almost_black);
}
#article-citizen .content .title a:hover,
#article-citizen .content .title a:active{
    color: var(--orange);
    text-decoration: none;
}
#article-citizen .content .date {
    font-weight: normal;
    font-size: 70%;
    color: var(--lighter_gray);
}
.article-title-black{
    text-align: left;
    color: var(--almost_black);
    font-weight: bold;
    font-size: 140%;
    margin-top: 3%;
    padding-left: 4%;
}
.article-subtitle{
    margin-bottom: 1%;
    font-size: 80%;
    font-weight: lighter;
    color: var(--light_gray);
    text-align: left;
    padding-left: 4%;
}
.embed-container,
.embed-container-img{
    width: 80%;
    margin: 0 auto;
}
.embed-container-img{
    display: block;
}
.article-caption{
    font-size: 70%;
    font-style: italic;
    color: var(--lighter_gray);
    text-align: center;
    margin-top: 2px;
}
.article-body{
    padding-left: 2%;
    margin-top: 2%;
    font-size: 100%;
    color: var(--almost_black);
}
.article-body img{
    width: 80%;
    margin: 2% auto;
    display: block;
}
.article-body iframe{
    margin: 2% auto;
    display: block;
}
.article-body a{
    color: var(--orange);
}
.article-body a:hover,
.article-body a:active{
    color: var(--light_green);
    text-decoration: none;
}
.article-notes{
    color: var(--lighter_gray);
    font-size: 85%;
    padding-left: 2%;
    margin-top: 1%;
}
.add-padding-left-tag{
    margin-top: 5px;
    padding-left: 2%;
}
.product-title-black {
    margin-top: 3%;
    font-weight: bold;
    font-size: 140%;
    color: var(--almost_black);
    text-align: left;
    padding-left: 1%;
}
.product-title-gray {
    margin-bottom: 3px;
    font-size: 80%;
    font-weight: lighter;
    color: var(--light_gray);
    text-align: left;
    padding-left: 1%;
}
.row.product-details{
    padding-left: 1%;
}
.price-title{
    font-size: 120%;
    color: var(--lighter_gray);
}
.price-label{
    font-size: 150%;
    color: var(--light_green);
}
.order-title{
    margin-top: 2%;
    color: var(--gray);
    font-size: 130%;
}
.btn-fa-product{
    font-size: 2.5rem;
    width: 3.2rem;
    text-align: center;
    text-decoration: none;
    margin: 5px;
    padding: 5px;
    border-radius: 10px;
}
.btn-fa-product:hover,
.btn-fa-product:active{
    color: white;
    text-decoration: none;
}
.comp-title{
    margin-top: 5%;
    font-size: 85%;
    color: var(--gray);
    font-weight: bold;
}
.comp-content{
    font-size: 85%;
    color: var(--gray);
    font-weight: lighter;
}
.add-padding-left{
    padding-left: 1%;
}
.benefit-title{
    margin-top: 3%;
    margin-bottom: 1%;
    font-size: 100%;
    font-weight: bold;
    color: var(--gray);
}
.benefit-content{
    font-weight: lighter;
    color: var(--gray);
}
.benefit-content .row{
    margin-bottom: 1%;
}
.benefit-content .fa-plus-circle{
    font-size: 1.7rem;
}
.howto-title{
    margin-top: 3%;
    font-size: 100%;
    font-weight: bold;
    color: var(--gray);
}
.howto-title .fa-info-circle{
    color: var(--light_green);
    font-size: 1.4rem;
    margin-right: 2%;
}
.howto-content{
    font-weight: lighter;
    color: var(--gray);
    margin-top: 1%;
}
.share-title{
    margin-top: 3%;
    font-size: 100%;
    font-weight: bold;
    color: var(--gray);
}
.share-title .fa-share{
    color: var(--light_green);
    font-size: 1.4rem;
    margin-right: 2%;
}
.share-icons{
    margin-bottom: 5%;
    margin-top: 1%;
}
.add-padding-left-share{
    padding-left: 2%;
}
.article-vote{
    margin-top: 1%;
    padding-left: 2%;
}
.point-title{
    margin-top: 2%;
    padding-left: 1%;
    font-size: 85%;
    color: var(--light_gray);
}
.point-num{
    color: var(--orange);
    font-weight: bold;
}
.item-redeem{
    margin-bottom: 2%;
}
.item-redeem .card-title{
    color: var(--almost_black);
}
.choose-item{
    display: block;
    text-align: center;
    border: 1px solid var(--light_green);
    border-radius: 25px;
}
a:hover.choose-item,
a:active.choose-item{
    text-decoration: none;
    border: 1px solid var(--orange);
    background-color: var(--cream);
}
.redeem-notes{
    color: var(--light_gray);
    font-size: small;
}
.challenge-banner{
    background-color: #2fa432;
    color: var(--white);
    text-align: center;
    padding: 2rem 1rem;
}
.challenge-button{
    margin-top: 1%;
    background-color: var(--orange);
    border: 1px solid;
}
.challenge-grid .card-header{
    background-color: var(--dark_orange);
    color: white;
    font-size: 100%;
    float: left;
}
.challenge-grid .circle{
    border: 2px solid var(--white);
    width: 20%;
    float: left;
}
.challenger-name{
    text-align: right;
    padding-left: 20%;
    padding-top: 4%;
}
.new-challenger{
    color: var(--light_green);
    font-size: 60%;
    font-weight: lighter;
    font-style: italic;
}
.row-padding-small{
    padding-top: 2%;
}
.challenge-grid .card-title{
    color: var(--almost_black);
    font-size: 80%;
}
.card-vote{
    text-align: center;
    margin-top: 3%;
}
a.vote-link{
  color: var(--orange);
}
a.vote-link:hover,
a.vote-link:active{
    color: var(--light_green);
    text-decoration: none;
}
.vote-count{
    color: var(--lighter_gray);
}
.no-challenge{
    background-color: var(--white);
}
.choose-challenge{
    margin: 3% auto;
}
/* dropdown submit challenge*/
.submit-challenge .dropdown-menu {
    text-align: left;
    border: 1px solid rgb(192,192,192);
    background-color: var(--white);
}
.submit-challenge .dropdown:hover .dropdown-menu {
    display: block;
    color: var(--almost_black);
    background-color: var(--white);
}
.submit-challenge .dropdown-item,
.submit-challenge .dropdown-item:focus{
    color: var(--almost_black);
    background-color: var(--white);
}
.submit-challenge .dropdown-item:hover,
.submit-challenge .dropdown-item:active{
    color: var(--light_green);
}
.title-submit-notes{
    background-color: var(--green);
    padding: .3rem .5rem;
    color: white;
    font-weight: normal;
    margin-top: 1rem;
    margin-bottom: .3rem;
    display: inline-block;
}
.content-submit-notes {
    font-size: 100%;
    color: var(--almost_black);
    text-align: left;
    font-weight: lighter;
    z-index: -1;
}
.submit-challenge-form{
    margin: 3% auto;
    display: block;
}
.small-note{
    color: var(--lighter_gray);
    font-size: 60%;
    text-align: left;
}
.padding-small-footer{
    margin-top: 40px;
}
.err-img{
    padding: 3%;
    max-width: 35%;
}
.err-text{
    color: var(--green);
    margin-bottom: 2%;
}
.err-text .title{
    font-size: 1.2em;
}
.err-text .subtitle{
    font-size: 0.75em;
}
.err-text .orange{
    color: var(--orange);
}
.err-btn{
    margin-bottom: 3%;
    background-color: var(--green);
    color: white;
}
a.err-btn:hover,
a.err-btn:active{
    background-color: var(--light_green);
    color: white;
}
body#redeemForm.modal-open div#redeemForm.modal-backdrop,
body#voteForm.modal-open div#voteForm.modal-backdrop{
    z-index: 0;
}
/* Disable Image Upload Summernote */
.note-group-select-from-files {
    display: none;
}
@media (min-width: 1326px) {
    .dec-left {
        margin-left: -21%;
    }
}
@media (min-width: 768px) {
    /* show 4 items */
    #topProduct .carousel-inner .active,
    #topProduct .carousel-inner .active + .carousel-item,
    #topProduct .carousel-inner .active + .carousel-item + .carousel-item,
    #topProduct .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item,
    .catalog .carousel-inner .active,
    .catalog .carousel-inner .active + .carousel-item,
    .catalog .carousel-inner .active + .carousel-item + .carousel-item,
    .catalog .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item{
        display: block;
    }

    #topProduct .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    #topProduct .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    #topProduct .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
    #topProduct .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item,
    .catalog .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .catalog .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .catalog .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
    .catalog .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item{
        transition: none;
    }

    #topProduct .carousel-inner .carousel-item-next,
    #topProduct .carousel-inner .carousel-item-prev,
    .catalog .carousel-inner .carousel-item-next,
    .catalog .carousel-inner .carousel-item-prev{
        position: relative;
        transform: translate3d(0, 0, 0);
    }

    #topProduct .carousel-inner .active .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
    .catalog .carousel-inner .active .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item{
        position: absolute;
        top: 0;
        right: -33.3333%;
        z-index: -1;
        display: block;
        visibility: visible;
    }

    /* left or forward direction */
    #topProduct .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    #topProduct .carousel-item-next.carousel-item-left + .carousel-item,
    #topProduct .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    #topProduct .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
    #topProduct .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
    .catalog .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .catalog .carousel-item-next.carousel-item-left + .carousel-item,
    .catalog .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .catalog .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
    .catalog .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item{
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    /* farthest right hidden item must be abso position for animations */
    #topProduct .carousel-inner .carousel-item-prev.carousel-item-right,
    .catalog .carousel-inner .carousel-item-prev.carousel-item-right{
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }

    /* right or prev direction */
    #topProduct .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    #topProduct .carousel-item-prev.carousel-item-right + .carousel-item,
    #topProduct .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    #topProduct .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
    #topProduct .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
    .catalog .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .catalog .carousel-item-prev.carousel-item-right + .carousel-item,
    .catalog .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .catalog .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
    .catalog .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item{
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

    .review-profile .pic{
        width: 30%;
        min-width: 74px;
        float: right;
    }

    #article .carousel-control-prev,
    #article .carousel-control-next{
        padding-top: 14%;
    }
    #article .carousel-indicators{
        bottom: -30%;
    }

}
@media(max-width: 768px) {
    #review .carousel-control-next,
    #review .carousel-control-prev {
        bottom: 25%;
    }
    .btn-general{
        border-radius: 10px;
    }
    .article-tag-title{
        margin-top: 5%;
    }
    .article-citizen{
        margin-top: 15%;
    }
    #article-citizen .content{
        margin-left: 0;
    }
    .price-title,
    .benefit-title,
    .howto-title,
    .share-title{
        margin-top: 10%;
    }
    .preview-subtitle{
        font-size: 70%;
    }
    #article-citizen .content .title a{
        font-size: 100%;
    }
    .share-icons{
        margin-top: 2%;
        margin-bottom: 10%;
    }
    .article-title-black,
    .article-subtitle,
    .point-title{
        padding-left: 1%;
    }
    .embed-container,
    .article-body iframe,
    .article-body img{
        width: 100%;
    }
    .article-body{
        padding-left: 0;
        margin-top: 3%;
    }
    .add-padding-left-tag,
    .article-notes{
        padding-left: 0;
    }
    .article-notes{
        margin-top: 2%;
    }
    .article-vote{
        padding-left: 0;
        margin-top: 2%;
    }
    .add-padding-left-share{
        padding-left: 0;
        margin-top: 1%;
    }
    .challenger-name{
        padding-top: 6%;
    }
    .row-padding-small{
        padding-top: 0;
    }
    .col-padding-small{
        padding-top: 10%;
    }
    .choose-challenge{
        margin: 7% auto;
        display: flex;
        justify-content: center;
    }
}