@charset "utf-8";

html {
    scroll-behavior: smooth;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

h1 {
    font-size: 28px;
}

h2 {
    font-size: 25px;
}

h3 {
    font-size: 23px;
}

h4 {
    font-size: 21px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}

@media (max-width: 765px) {
    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 22px;
    }

    h3 {
        font-size: 20px;
    }

    h4 {
        font-size: 18px;
    }

    h5 {
        font-size: 17px;
    }

    h6 {
        font-size: 16px;
    }
}

.text-black-50 {
    color: rgba(0, 0, 0, 0.6) !important;
}

.serif {
    font-family: "Times New Roman", Times, serif;
}

img {
    max-width: 100%
}

@media (min-width: 1200px) {
    .container {
        max-width: 1000px;
    }
}

a {
    color: #d85439;
}

a:hover {
    color: #ca452a;
}

ins.adsbygoogle {
    background: url(../images/ads_loader.gif) no-repeat center;
    min-height: 70px;
}

button:focus,
button:active,
.btn:focus,
.btn:active,
a:focus,
a:active {
    outline: none !important;
    box-shadow: none;
}

.text-primary {
    color: #f05d40 !important;
}

.text-info {
    color: #2196f3 !important;
}

.bg-primary,
.btn-primary {
    background-color: #f05d40 !important;
}

.bg-blue {
    background-color: #2196f3 !important;
}

.bg-dark {
    background-color: #333 !important;
}

iframe {
    max-width: 100%;
}

.btn {
    font-size: 14px;
    font-weight: 600;
}

.btn-primary,
.btn-outline-primary {
    border-color: #f05d40;
}

.btn-outline-primary {
    color: #f05d40;
}

.btn-primary:hover,
.btn-outline-primary:hover {
    border-color: #d85439 !important;
    background-color: #d85439 !important;
}

.btn-secondary {
    background-color: #333;
    border-color: #333;
}

.btn-light {
    background-color: #fff;
    border-color: #ddd;
}

blockquote {
    padding: 12px;
    border-left: 3px solid #ffc107;
    background-color: #f1f1f1;
    margin: 8px 0;
}

blockquote p:last-child {
    margin-bottom: 0px;
}


/*Home Navigation*/

.navbar-brand {
    padding-top: 12px;
    padding-bottom: 12px;
}

header.sticky-top {
    z-index: 1021;
    transition: all 0.5s;
}

.navbar-toggler {
    border: 0;
}

.nav-link {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-weight: 600;
    font-size: 16px;
}

.nav-link.active {
    border-bottom: 2px solid #f05d40;
    box-shadow: 0px 15px 5px -15px rgb(240, 93, 64, 0.5);
}

.nav-pills .nav-link {
    color: #333;
    padding: 10px 12px !important;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #f05d40;
    background-color: transparent;
    border-radius: 0;
}

.dropdown-item.active,
.dropdown-item:active,
.dropdown-item:focus {
    background-color: #f05d40;
}


/*Account Sidebar*/

.account-sidebar {
    background: #fff;
    width: 280px;
    height: 100%;
    color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100000000;
    display: none;
    overflow: auto;
    font-size: 14px;
}

.account-sidebar ul,
.account-sidebar nav {
    padding: 0px;
}

.account-sidebar li,
.account-sidebar ul {
    width: 100%;
}

.account-sidebar .nav-link {
    font-size: 15px;
    color: #333;
    padding: 8px 18px;
    display: block;
    font-weight: 500;
}

.account-sidebar .nav-link:hover {
    color: #f4333d;
}

.account-sidebar .nav-link i {
    width: 26px;
    color: #666;
    font-size: 18px;
}

.divider {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    display: none;
    transition: 0.5s all;
    z-index: 9999;
}


/*Logo HighLight*/

.logo-hightlight {
    position: relative;
    overflow: hidden;
}

.logo-hightlight::after {
    content: '';
    height: 120px;
    width: 120px;
    background-image: url(../images/blog-highlight.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    bottom: -60px;
    right: -60px;
    opacity: 0.35;
}


/* for shadow */

header .dropdown-menu::before {
    border-bottom: 9px solid rgba(0, 0, 0, .4);
    border-left: 9px solid rgba(0, 0, 0, 0);
    border-right: 9px solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    left: 5%;
    /* position */
    position: absolute;
    top: -9px;
}

header .dropdown-menu::after {
    border-bottom: 8px solid #FFFFFF;
    border-left: 9px solid rgba(0, 0, 0, 0);
    border-right: 9px solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    left: 5%;
    /* position */
    position: absolute;
    top: -8px;
}

header .dropdown-menu.dropdown-menu-right::before,
.dropdown-menu.dropdown-menu-right::after {
    left: auto;
    right: 5%;
}

.dropdown-toggle::after {
    border: none !important;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    content: "\f078";
    vertical-align: 0;
    /* to center vertically */
}

.dropdown.show .dropdown-toggle::after {
    content: "\f077";
}


/*Hero Posts*/

.hero-list-container {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero-list-item {
    float: left;
    width: 40%;
    padding: 10px;
    display: block;
}

.hero-list-item:first-child {
    width: 60%;
}

.hero-list-item:first-child .hero-item {
    height: 420px;
}

.hero-item {
    position: relative;
    background: #f1f1f1;
    height: 200px;
    overflow: hidden;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, auto;
    background-position: center, center;
}

.hero-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
    z-index: 0;
}

.hero-item a:hover,
.no-decoration:hover {
    text-decoration: none;
}

.hero-item h3 {
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.8);
}

.hero-item p {
    color: #fff;
}

.hero-item .hero-item-image {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
}

.hero-item .hero-item-desc {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 100%;
    padding: 20px;
    overflow: auto;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8) 60%);
}

.hero-item-type {
    position: absolute;
    top: 10px;
    left: 20px;
    z-index: 2;
    font-size: 13px;
}

.hero-item p.text-ellipsis2 {
    display: none
}

@media (min-width: 768px) {
    .hero-list-item:first-child .hero-item p.text-ellipsis2 {
        display: block
    }
}

@media (max-width: 768px) {
    .hero-list-item:first-child {
        width: 100%;
    }

    .hero-list-item {
        width: 100%;
        float: none;
        padding: 4px;
    }

    .hero-item {
        height: 200px !important;
    }

    .hero-item .hero-item-desc {
        padding: 12px;
    }

    .hero-item-type {
        top: 10px;
        left: 10px;
    }

    .hero-item h3 {
        font-size: 18px;
    }

    .hero-item p {
        font-size: 12px;
    }
}


/*Follows List*/

.follow-user {
    position: relative;
    z-index: 1;
    display: block;
}

.follow-user h6 a {
    color: #333;
}

.follow-user-icon {
    position: absolute;
    width: 50px;
    left: 0;
}

.follow-user-icon img {
    border: 3px solid #ddd;
    position: relative;
    z-index: 1;
}


.follow-user .follow-user-desc {
    padding-left: 55px;
}


/*POST LIST*/

.post-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.post-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.post-list-item:last-child {
    border-bottom: none;
}

.lazy {
    background-image: url(../images/Double-Ring.gif);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
}

.post-item-image {
    width: 160px;
    height: 150px;
    flex: 0 0 160px;
    overflow: hidden;
    background-image: url(), url(../images/Double-Ring.gif);
    background-repeat: no-repeat, no-repeat;
    background-size: cover, auto;
    background-position: center, center;
    background-color: #f1f1f1;
}

.book-item-image {
    overflow: hidden;
    background-image: url(../images/Double-Ring.gif);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
    background-color: #f1f1f1;
    min-height: 90px;
    aspect-ratio: 3/4;
}

.post-item-desc {
    padding-left: 10px;
    padding-right: 10px;
}

.post-item-desc h3 {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.post-item-desc a:visited h3 {
    color: #777;
}

.post-item-desc a:hover {
    text-decoration: none;
}

.post-item-desc a:hover h3 {
    color: #f05d40;
}

.post-item-desc p {
    color: rgba(0, 0, 0, 0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (max-width: 768px) {
    .post-item-image {
        width: 110px;
        height: 110px;
        flex: 0 0 110px;
    }

    .post-item-desc h3 {
        font-size: 17px;
    }

    .post-item-desc p {
        font-size: 14px;
        display: none;
    }
}


/*Post types*/

.dark-overlay {
    position: relative;
}

.dark-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.dark-overlay .playBtn {
    position: relative;
    z-index: 2;
}

.post-list-item.udex-media .post-item-desc p {
    display: none;
}

.post-list-item.udex-post .post-item-image {
    padding: 10px;
}

.post-list-item.udex-media a.post-item-image {
    display: none !important;
}


/*End of Post types*/

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.text-ellipsis2 {
    overflow: hidden;
    max-height: 36px;
    line-height: 18px;
    font-size: 15px;
    margin: 5px 0;
    position: relative;
    word-break: break-all;
}

@media (min-width: 768px) {
    .text-ellipsis2 {
        max-height: 40px;
    }
}

.text-ellipsis2::after {
    content: "\02026";
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    position: absolute;
    top: 20px;
    right: 0;
    width: 3em;
    text-align: right;
    background-size: 100% 100%;
    /* 512x1 image,gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

.hero-item .text-ellipsis2::after {
    background: -moz-linear-gradient(to right, rgb(43, 43, 43, 0), rgba(43, 43, 43, 0.8) 50%, rgba(43, 43, 43, 1));
    background: -o-linear-gradient(to right, rgba(43, 43, 43, 0), rgba(43, 43, 43, 0.8) 50%, rgba(43, 43, 43, 1));
    background: -ms-linear-gradient(to right, rgba(43, 43, 43, 0), rgba(43, 43, 43, 0.8) 50%, rgba(43, 43, 43, 1));
    background: linear-gradient(to right, rgba(43, 43, 43, 0), rgba(43, 43, 43, 0.8) 50%, rgba(43, 43, 43, 1));
}


/*Full Posts*/

.post_title,
.page_title {
    line-height: 1.0;
    font-weight: 600;
    margin: auto 0;
    text-transform: capitalize;
    font-size: 34px;
}

.full_featured_image,
.sm_featured_image {
    height: 350px;
    background-image: url(), url(../images/Double-Ring.gif);
    background-repeat: no-repeat, no-repeat;
    background-size: cover, auto;
    background-position: center, center;
    cursor: -moz-zoom-in;
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
}

.sm_featured_image {
    height: 120px;
}

@media (max-width: 768px) {
    .full_featured_image {
        height: 240px;
    }

    .sm_featured_image {
        height: 100px;
    }

    .post_title {
        font-size: 28px;
        font-weight: 500;
    }

    .page_title {
        font-size: 24px;
    }
}


/*Share POST*/

.share_list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.share_list li {
    display: inline-block;
    padding-top: 2px;
    padding-bottom: 2px;
}

.text-facebook {
    color: #3b5998;
}

.text-twitter {
    color: #00acee;
}

.text-telegram {
    color: #1a8bc2;
}

.text-linkedin {
    color: #0e76a8;
}

.text-whatsapp {
    color: #67c15e;
}

.text-sitename {
    color: #000;
}

.btn-twitter {
    background: #00acee;
    color: #fff
}

.btn-twitter:link,
.btn-twitter:visited {
    color: #fff
}

.btn-twitter:active,
.btn-twitter:hover {
    background: #0087bd;
    color: #fff
}

.btn-facebook {
    background: #3b5998;
    color: #fff
}

.btn-facebook:link,
.btn-facebook:visited {
    color: #fff
}

.btn-facebook:active,
.btn-facebook:hover {
    background: #30477a;
    color: #fff
}

.btn-googleplus {
    background: #e93f2e;
    color: #fff
}

.btn-googleplus:link,
.btn-googleplus:visited {
    color: #fff
}

.btn-googleplus:active,
.btn-googleplus:hover {
    background: #ba3225;
    color: #fff
}

.btn-stumbleupon {
    background: #f74425;
    color: #fff
}

.btn-stumbleupon:link,
.btn-stumbleupon:visited {
    color: #fff
}

.btn-stumbleupon:active,
.btn-stumbleupon:hover {
    background: #c7371e;
    color: #fff
}

.btn-linkedin {
    background: #0e76a8;
    color: #fff
}

.btn-linkedin:link,
.btn-linkedin:visited {
    color: #fff
}

.btn-linkedin:active,
.btn-linkedin:hover {
    background: #0b6087;
    color: #fff
}

.btn-telegram:active,
.btn-telegram:hover {
    background: #2ca5e0;
    color: #fff
}

.btn-telegram {
    background: #1a8bc2;
    color: #fff
}

.btn-telegram:link,
.btn-telegram:visited {
    color: #fff
}

.btn-telegram:active,
.btn-telegram:hover {
    background: #2ca5e0;
    color: #fff
}

.btn-whatsapp {
    background: #67c15e;
    color: #fff
}

.btn-whatsapp:link,
.btn-whatsapp:visited {
    color: #fff
}

.btn-whatsapp:active,
.btn-whatsapp:hover {
    background: #61a65a;
    color: #fff
}

.btn-sitename {
    background-color: #000;
    color: #fff
}

.btn-sitename:link,
.btn-sitename:visited {
    color: #fff
}

.btn-sitename:active,
.btn-sitename:hover {
    background-color: #000;
    color: #fff
}


/*Music Player*/

ul.player li {
    position: relative;
    padding-left: 40px;
}

li.playing:before {
    content: '♬';
    width: 14px;
    height: 14px;
    padding: 3px;
    margin: 0px;
    position: absolute;
    left: 12px;
    top: 8px;
    color: #339AF0;
    font-size: 18px;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
}


/*Add Comment*/

.comment-holder {
    position: relative;
    width: 100%;
}

.comment-holder .comment-image {
    width: 60px;
    position: absolute;
    left: 0;
}

.comment-holder .comment-image img {
    border: 4px solid #ddd;
    z-index: 1;
    position: relative;
    width: 45px;
    height: 45px;
}

.comment-holder .comment-textarea {
    padding-left: 60px;
    position: relative;
}

.comment-replyer {
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    display: none;
}

.comment-holder .comment-textarea .inputLayout {
    padding: 6px 12px;
    border-width: 2px;
    height: 45px;
    position: relative;
    font-size: 13px;
    padding-right: 70px;
}

.comment-holder .comment-textarea .input-emoji-icon {
    right: 50px;
    top: calc(50% - 10px);
}

.emoji-menu {
    top: -230px;
}

.comment-textarea button {
    position: absolute;
    right: 5px;
    top: 5px;
    height: 35px;
}

@media (max-width: 768px) {
    .comment-holder .comment-textarea {
        padding-left: 40px;
        margin: 0px;
    }

    .comment-holder .comment-image {
        width: 50px;
    }

    .comment-holder .comment-image img {
        width: 35px;
        height: 35px;
    }
}

.comment-holder .comment-image::before {
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: #ddd;
    z-index: 0;
}


/* The snackbar - position it at the bottom and in the middle of the screen */

#snackbar {
    visibility: hidden;
    /* Hidden by default. Visible on click */
    min-width: 450px;
    /* Set a default minimum width */
    margin-left: -225px;
    /* Divide value of min-width by 2 */
    background-color: #222;
    /* Black background color */
    color: #fff;
    /* White text color */
    text-align: center;
    /* Centered text */
    padding: 8px;
    /* Padding */
    position: fixed;
    /* Sit on top of the screen */
    z-index: 1;
    /* Add a z-index if needed */
    left: 50%;
    /* Center the snackbar */
    bottom: -30px;
    /* 30px from the bottom */
    transition: all 0.5s;
    z-index: 9999999;
}

#snackbar.show_snackbar {
    visibility: visible;
    bottom: 0;
}

@media (min-width: 600px) {
    #snackbar {
        bottom: 26px;
        border-radius: 4px;
    }

    #snackbar.show_snackbar {
        bottom: 8px;
    }
}


/*breadcrumb*/

.breadcrumb {
    padding: 0;
    margin: 0;
    background-color: transparent;
    font-size: 14px;
    font-style: italic;
}


/*Search Bar*/

.search_input:focus {
    -moz-animation: glow 800ms ease-out infinite alternate;
    -o-animation: glow 800ms ease-out infinite alternate;
    -webkit-animation: glow 800ms ease-out infinite alternate;
    animation: glow 800ms ease-out infinite alternate;
    outline: none;
}

@-moz-keyframes glow {
    0% {
        border-color: #f05d40;
        -moz-box-shadow: 0 0 5px rgba(240, 93, 64, .2), inset 0 0 5px rgba(240, 93, 64, .1);
        -webkit-box-shadow: 0 0 5px rgba(240, 93, 64, .2), inset 0 0 5px rgba(240, 93, 64, .1);
        box-shadow: 0 0 5px rgba(240, 93, 64, .2), inset 0 0 5px rgba(240, 93, 64, .1);
    }

    100% {
        border-color: #f05d40;
        -moz-box-shadow: 0 0 20px rgba(240, 93, 64, .6), inset 0 0 10px rgba(240, 93, 64, .4);
        -webkit-box-shadow: 0 0 20px rgba(240, 93, 64, .6), inset 0 0 10px rgba(240, 93, 64, .4);
        box-shadow: 0 0 20px rgba(240, 93, 64, .6), inset 0 0 10px rgba(240, 93, 64, .4);
    }
}

@-o-keyframes glow {
    0% {
        border-color: #f05d40;
        -moz-box-shadow: 0 0 5px rgba(240, 93, 64, .2), inset 0 0 5px rgba(240, 93, 64, .1);
        -webkit-box-shadow: 0 0 5px rgba(240, 93, 64, .2), inset 0 0 5px rgba(240, 93, 64, .1);
        box-shadow: 0 0 5px rgba(240, 93, 64, .2), inset 0 0 5px rgba(240, 93, 64, .1);
    }

    100% {
        border-color: #f05d40;
        -moz-box-shadow: 0 0 20px rgba(240, 93, 64, .6), inset 0 0 10px rgba(240, 93, 64, .4);
        -webkit-box-shadow: 0 0 20px rgba(240, 93, 64, .6), inset 0 0 10px rgba(240, 93, 64, .4);
        box-shadow: 0 0 20px rgba(240, 93, 64, .6), inset 0 0 10px rgba(240, 93, 64, .4);
    }
}

@-webkit-keyframes glow {
    0% {
        border-color: #f05d40;
        -moz-box-shadow: 0 0 5px rgba(240, 93, 64, .2), inset 0 0 5px rgba(240, 93, 64, .1);
        -webkit-box-shadow: 0 0 5px rgba(240, 93, 64, .2), inset 0 0 5px rgba(240, 93, 64, .1);
        box-shadow: 0 0 5px rgba(240, 93, 64, .2), inset 0 0 5px rgba(240, 93, 64, .1);
    }

    100% {
        border-color: #f05d40;
        -moz-box-shadow: 0 0 20px rgba(240, 93, 64, .6), inset 0 0 10px rgba(240, 93, 64, .4);
        -webkit-box-shadow: 0 0 20px rgba(240, 93, 64, .6), inset 0 0 10px rgba(240, 93, 64, .4);
        box-shadow: 0 0 20px rgba(240, 93, 64, .6), inset 0 0 10px rgba(240, 93, 64, .4);
    }
}

@keyframes glow {
    0% {
        border-color: #f05d40;
        -moz-box-shadow: 0 0 5px rgba(240, 93, 64, .2), inset 0 0 5px rgba(240, 93, 64, .1);
        -webkit-box-shadow: 0 0 5px rgba(240, 93, 64, .2), inset 0 0 5px rgba(240, 93, 64, .1);
        box-shadow: 0 0 5px rgba(240, 93, 64, .2), inset 0 0 5px rgba(240, 93, 64, .1);
    }

    100% {
        border-color: #f05d40;
        -moz-box-shadow: 0 0 20px rgba(240, 93, 64, .6), inset 0 0 10px rgba(240, 93, 64, .4);
        -webkit-box-shadow: 0 0 20px rgba(240, 93, 64, .6), inset 0 0 10px rgba(240, 93, 64, .4);
        box-shadow: 0 0 20px rgba(240, 93, 64, .6), inset 0 0 10px rgba(240, 93, 64, .4);
    }
}


/*Validate Form*/

.validate input:focus:invalid,
.validate textarea:focus:invalid,
.invalid {
    /* when a field is considered invalid by the browser */
    background-color: #fff;
    border-color: #b03535
}

.form_hint {
    background: #333;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
    color: white;
    margin-left: 8px;
    padding: 1px 6px;
    z-index: 999;
    /* hints stay above all other elements */
    position: absolute;
    /* allows proper formatting if hint is two lines */
    display: none;
}

.form_hint::before {
    content: "\25B2";
    /* left point triangle in escaped unicode */
    color: #333;
    position: absolute;
    bottom: 73%;
    left: 5%;
}

.validate input:focus+.form_hint {
    display: block;
}


/*.validate input:required:valid + .form_hint {background: #333;} */


/* change form hint color when valid */


/*.validate input:required:valid + .form_hint::before {color:#333;} */


/* change form hint arrow color when valid */

.logo-wrapper {
    position: relative;
}

.logo-wrapper .logo-brand {
    padding-left: 36px
}

.logo-wrapper .logo-dp {
    position: absolute;
    left: 0;
    top: -2.5px;
    width: 40px
}

.logo-wrapper .logo-dp img {
    border: 3px solid #fff
}

.profile-card {
    position: relative;
    margin-top: 40px;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

.profile-status {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    background-color: #ddd;
    border-radius: 50px;
    border: 6px solid #EEF4F7;
}

.profile-card-image {
    position: absolute;
    top: -40px;
    text-align: center;
    width: 100px;
    margin-left: calc(50% - 50px);
}

.profile-card-image img {
    border: 2px solid #D1E3F2;
    padding: 6px;
    background-color: #EEF4F7;
}

.profile-action-buttons {
    position: absolute;
    top: -30px;
    right: 0;
}

.profile-card-body {
    padding: 80px 20px 20px 20px;
    border: 2px solid #D1E3F2;
    border-radius: 12px;
    background-color: #EEF4F7;
}

.profile-body-holder {
    position: absolute;
    top: 10px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
    text-align: center;
}

.profile-body-holder div {
    color: #f05d40;
    font-size: 20px;
    font-weight: 600;
}

.hold-left {
    left: 20px;
}

.hold-right {
    right: 20px;
}

.profile-card-body h2 {
    font-size: 20px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .sidebar.hide-sm {
        opacity: 0;
        display: none;
        transition: all 1s;
    }

    .fixed-cover {
        position: fixed;
        top: 0 !important;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 1022;
        padding: 20px;
        transition: all 0.5s;
        display: block !important;
        overflow: auto;
        opacity: 1 !important;
    }

    .profile-card-body {
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
    }
}


/*Upload DP*/

#imgArea {
    display: block;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

#imgArea img {
    outline: medium none;
    vertical-align: middle;
    width: 100%;
}

#imgContainer {
    width: 100%;
    text-align: center;
    position: relative;
}

#imgChange input[type="file"] {
    bottom: 0;
    cursor: pointer;
    height: 100%;
    left: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    width: 100%;
}


/* Progressbar */

.progressBar {
    background: none repeat scroll 0 0 #fff;
    left: 0;
    padding: 5px 0;
    position: absolute;
    top: 50%;
    width: 100%;
    display: none;
    font-size: 13px;
}

.progressBar .bar {
    background-color: #2196f3;
    width: 0%;
    height: 18px;
}

.progressBar .percent {
    display: inline-block;
    left: 0;
    position: absolute;
    text-align: center;
    top: 5px;
    color: #FFF;
    width: 100%;
}

#imgChange {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #dee2e6;
    color: #333;
}

#imgChange input[type="file"],
.upload-image-holder input[type="file"] {
    bottom: 0;
    cursor: pointer;
    height: 100%;
    left: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    z-index: 2;
}

.upload-image-holder {
    position: relative;
    overflow: hidden;
    height: 50px
}

.upload-image-holder img {
    position: absolute;
    left: 10;
}

.upload-image-holder .percent {
    position: absolute;
    right: 10px;
    top: 0;
    font-weight: 600;
}

.upload-image-desc {
    padding-left: 40px;
    padding-right: 34px;
    position: relative;
}

#myBar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #f1f1f1;
}

.uploaded-file-holder {
    position: relative;
    height: 50px
}

.uploaded-file-desc {
    padding: 0px 40px 0 40px;
}

.uploaded-file-holder .uploaded-file-icon {
    position: absolute;
    left: 10px;
    font-size: 18px;
    color: #007bff;
    ;
    width: 20px
}

.uploaded-file-holder .action {
    position: absolute;
    right: 10px;
}


/*Confirm CSS*/

.confirm {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 100%;
    z-index: 10000000;
    background: rgba(0, 0, 0, .5);
    transition: all 0.5s ease;
    text-align: center;
    padding: 20px;
}

.confirm .container {
    background-color: #fff;
    width: 350px;
    top: 20%;
    padding: 0px;
    max-height: 95%;
    overflow: auto;
}

.confirm button {
    cursor: pointer;
}

.confirm .message {
    max-height: 50%;
    font-size: 16px;
}

@media (max-width: 768px) {
    .confirm .container {
        width: 90%;
        margin-top: 0;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

.notify-menu,
.notify-menu2 {
    position: relative;
}

.noti-point {
    width: 14px;
    height: 14px;
    position: absolute;
    border: 3px solid #fff;
    top: 5px;
    right: 8px
}

.unRead {
    background: rgba(255, 0, 0, 0.01);
    translate: all 0.5;
}

.readThis {
    text-decoration: none;
    color: #333
}

.readThis:hover {
    text-decoration: none;
    color: #f05d40;
}

.list-group-item.notif_item {
    transition: all 0.5s;
}

.list-group-item.notif_item:hover {
    background-color: rgba(255, 0, 0, 0.02);
}

.icon-circle {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 10px;
    color: #fff;
    background-color: #333;
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    border-radius: 50%;
}

.list-group-item {
    color: #333
}

.list-group-item .small {
    color: rgba(0, 0, 0, 0.5);
}

.podcasts-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.podcasts-list li {
    margin: 10px 0px;
}

.podcast-item-desc h3 {
    font-size: 20px;
    color: #fff;
}

.podcast-item-desc p {
    color: rgba(255, 255, 255, 0.8);
}

@media (min-width: 768px) {
    .podcast-list-item {
        position: relative;
    }

    .podcast-item-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 180px;
        height: 180px;
        padding: 12px;
        display: block;
    }

    .podcast-item-desc {
        padding: 10px 10px 10px 190px;
        min-height: 180px;
    }

    .podcast-item-desc a:hover {
        text-decoration: none;
    }
}

@media (max-width: 768px) {
    .podcast-item-desc {
        padding: 10px 14px;
    }

    .podcast-item-desc p,
    .podcast-item-desc .d-flex {
        display: none !important;
    }

    .podcasts-list li {
        padding: 4px
    }

    .podcast-item-desc h3 {
        font-size: 15px;
        margin: 0 !important;
    }

    .podcasts-list li {
        margin: 0px;
    }

    .podcasts-list img {
        border-radius: 4px 4px 0px 0px;
    }

    .podcasts-list {
        margin-left: -4px;
        margin-right: -4px;
    }
}

.auto-holder {
    position: relative;
    /*z-index: 2;*/
}

.auto_bg {
    background: linear-gradient(160deg, #56B9F7 40%, #25A6F7 50%);
    color: #fff;
    padding: 40px 40px 120px 40px;
}

.auto-info {
    position: absolute;
    bottom: 40px;
    right: 40px;
    left: 40px
}

.auth-sites {
    list-style: none;
    margin: 0;
    padding: 0;
}

.auth-sites li {
    display: inline-block;
    padding: 0 4px 4px 0;
}

.auth-sites li a {
    background-color: #fff;
    width: 30px;
    height: 30px;
    display: block;
    border-radius: 50%;
    text-align: center;
    padding-top: 3px;
}

.auth-sites li a img {
    width: 20px;
}

@media (min-width: 768px) {
    .auth-content {
        max-height: 450px;
        overflow: auto;
    }

    .auto-holder {
        position: relative;
        z-index: 2;
        box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
    }

}

@media (max-width: 768px) {
    .auto_bg {
        display: none;
    }

    .auth-content {
        border-bottom: 20px solid #88CDF7;
        position: relative;
    }

    .auth-content::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -20px;
        height: 20px;
        width: 50%;
        background-color: #B9DFF7;
    }
}

@-webkit-keyframes wiggle {
    0% {
        -webkit-transform: rotateZ(2deg);
        transform: rotateZ(2deg);
    }

    50% {
        -webkit-transform: rotateZ(-2deg);
        transform: rotateZ(-2deg);
    }

    100% {
        -webkit-transform: rotateZ(2deg);
        transform: rotateZ(2deg);
    }
}

@keyframes wiggle {
    0% {
        -webkit-transform: rotateZ(2deg);
        transform: rotateZ(2deg);
    }

    50% {
        -webkit-transform: rotateZ(-2deg);
        transform: rotateZ(-2deg);
    }

    100% {
        -webkit-transform: rotateZ(2deg);
        transform: rotateZ(2deg);
    }
}

footer {
    background-image: url(../images/background-footer.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}

footer a {
    color: #333
}

.footer-social-wrap {
    width: 200px;
    margin: 0px auto 0 auto;
    text-align: center;
}

.footer-social {
    font-size: 0.8em;
    height: 42px;
    overflow: hidden;
    border-bottom: 1px solid #ddd;
    -webkit-box-shadow: 0px 5px 3px -5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 5px 3px -5px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 5px 3px -5px rgba(0, 0, 0, 0.2);
}

.footer-social i {
    position: relative;
    top: 14px;
    margin: 0 4px;
    /*border: 1px solid #ddd;*/
    height: 34px;
    width: 34px;
    border-radius: 50%;
    text-align: center;
    line-height: 34px;
    background-color: #fff;
    display: inline-block;
    -moz-box-shadow: 0 0 3px #ccc;
    -webkit-box-shadow: 0 0 3px #ccc;
    box-shadow: 0 0 3px #ccc;
    -webkit-transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
    transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1);
}

@media (min-width: 768px) {
    .footer-social i {
        top: 10px;
        margin: 0 6px;
        height: 36px;
        width: 36px;
        line-height: 36px;
    }

    .footer-social-wrap {
        width: 280px;
    }
}

.footer-social a:hover {
    text-decoration: none;
}

.footer-social i:hover {
    top: 2px;
}

footer ul,
.border-middle {
    margin: 0;
    padding: 0;
    list-style: none;
}

.border-middle li:first-child {
    padding-left: 0;
}

footer .border-middle li {
    font-size: 12px;
}

.border-middle li {
    border-right: 1px solid #f16969;
}

.border-middle li a {
    color: #808080;
}

.border-middle li,
footer ul li {
    display: inline-block;
    padding: 0px 12px;
    padding-left: 12px;
}

.border-middle li:last-child {
    padding-right: 0;
    border-right: 0;
}

footer .border-middle li {
    font-size: 12px;
}


/*Horizontal Scroll menu*/

div.horizon-scrollmenu {
    overflow: auto;
    white-space: nowrap;
}

div.horizon-scrollmenu>div {
    display: inline-block;
    white-space: normal;
    vertical-align: top;
}

div.horizon-scrollmenu>a {
    display: inline-block;
    color: #333;
    margin: 0 4px;
    padding: 6px 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
}

div.horizon-scrollmenu>a.active {
    background-color: #f1f1f1 !important;
}

div.horizon-scrollmenu>a.active .text-ellipsis2::after {
    background: -moz-linear-gradient(to right, rgba(241, 241, 241, 0), #f1f1f1 50%, #f1f1f1) !important;
    background: -o-linear-gradient(to right, rgba(241, 241, 241, 0), #f1f1f1 50%, #f1f1f1) !important;
    background: -ms-linear-gradient(to right, rgba(241, 241, 241, 0) #f1f1f1 50%, #f1f1f1) !important;
    background: linear-gradient(to right, rgba(241, 241, 241, 0) #f1f1f1 50%, #f1f1f1) !important;
}

.horizon-scrollmenu>a:first-child {
    margin-left: 1rem !important;
}

.horizon-scrollmenu>a:last-child {
    margin-right: 1rem !important;
}

.horizon-scrollmenu-container {
    position: relative;
}

.horizon-scrollmenu-container::after,
.horizon-scrollmenu-container::before {
    content: '';
    position: absolute;
    bottom: 0;
    top: 0;
    right: 0;
    width: 20px;
    z-index: 1;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff);
}

.horizon-scrollmenu-container::before {
    right: auto;
    left: 0;
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #ffffff);
}

.podcast-detail {
    position: relative;
}

.podcast-desc {
    min-height: 120px;
}

.podcast-detail .podcast-img {
    position: absolute;
    left: 0;
    width: 200px;
}

.podcast-detail .podcast-img img {
    width: 100%;
}

.podcast-desc,
.podcast-title {
    padding-left: 240px;
}

@media (max-width: 768px) {
    .podcast-detail .podcast-img {
        width: 90px;
    }

    .podcast-title {
        padding-left: 110px;
        min-height: 110px;
    }

    .podcast-desc {
        padding-left: 0;
    }

    .podcast-desc {
        min-height: auto;
    }
}

.playBtn {
    display: inline-block;
    width: 35px;
    height: 35px;
    background: transparent url(../images/play-button.png) 0px 0px no-repeat;
    border: 0;
    border-radius: 50%;
}

.playing .playBtn {
    background: transparent url(../images/play-button.png) 0px -39px no-repeat;
}

.playing .playBtn,
.glow {
    -moz-animation: glow 800ms ease-out infinite alternate;
    -o-animation: glow 800ms ease-out infinite alternate;
    -webkit-animation: glow 800ms ease-out infinite alternate;
    animation: glow 800ms ease-out infinite alternate;
}

.player-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.player-list li {
    display: inline;
    padding: 0px;
    line-height: 30px;
    margin: 0;
}

.player-list li::after {
    content: '\00B7';
    font-size: 20px;
    display: inline-block;
    font-weight: 800;
    margin: 0 8px;
}

@media (max-width: 768px) {
    .player-list {
        font-size: 13px;
    }

    .player-list li::after {
        font-size: 18px;
    }
}

.player-list li:last-child::after {
    content: '';
    margin: 0;
}

.book-grid {
    text-align: center;
}

.book-grid>div {
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding-top: 20px;
    padding-bottom: 20px;
}

.book-grid>div h4 {
    font-size: 18px;
    font-weight: 600;
}

.book-grid>div a {
    color: #333;
}


/* Fallback styles */

.book-cover-layout {
    display: inline-block;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
    margin: 10px;
    max-width: 150px;
}

@media (min-width: 768px) {
    .book-grid>div.ebook:nth-child(4n) {
        border-right: 0px;
    }
}

@media (max-width: 768px) {
    .book-grid>div.ebook:nth-child(2n) {
        border-right: 0px;
    }

    .book-grid>div.ebook h4 {
        font-size: 14px;
    }

    .book-cover-layout {
        max-width: 100px;
    }

    .podcast-detail .book-cover-layout {
        max-width: 80px;
    }

    .book-grid .podcast-detail .podcast-title {
        padding-left: 110px;
        min-height: 140px;
    }
}

.list-group-item.active {
    background-color: #333;
    border-color: #333;
    color: #fff;
}

.cookiePopup {
    position: fixed;
    top: 75px;
    right: 15px;
    width: 300px;
    padding: 20px;
    border-radius: 4px;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
    z-index: 99999;
    display: none;
}

.cookiePopup p {
    margin-bottom: 8px;
    line-height: 1.33;
    text-align: left;
    color: rgba(0, 0, 0, 0.9);
    font-size: 14px;
}

.cookiePopup button {
    margin-top: 5px;
    margin-bottom: 0;
    border: 1px solid rgba(233, 95, 50, .1);
    border-radius: 2px;
    color: #e95f32;
    background-color: #fff;
    line-height: 30px;
}

.tab-content h2,
.tab-content h5 {
    font-weight: 600;
    color: #f05d40;
}

.tab-content h5 {
    font-size: 18px;
    margin-top: 32px;
}

.cookie h2 {
    font-weight: 600;
    font-size: 28px;
}

.cookie p {
    color: rgba(0, 0, 0, 0.8);
}

.cookie p:last-child {
    margin-bottom: 0 !important;
}

.cookie img {
    height: auto;
}

.cookie .nav-link {
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    border-left: 1px solid #dee2e6;
    margin-top: 4px;
    margin-bottom: 4px;
    box-shadow: none;
    border-radius: 4px 0px 0px 4px !important;
}

.cookie .nav-link.active {
    background: #eee;
}

.cookie h4,
.cookie h3 {
    font-weight: 600;
    font-size: 18px;
    color: #f05d40;
}

.cookie h3 {
    font-size: 22px;
}

.cookie.articleBody {
    font-size: 18px;
}

@media (max-width: 768px) {
    .cookie .nav-link {
        border-radius: 4px !important;
        border-right: 1px solid #dee2e6;
    }

    .cookie.articleBody {
        font-size: 16px;
    }
}

.cookie ul {
    margin-left: 0px;
    padding-left: 18px !important;
}

.nav-pills.flex-column .nav-link.active,
.nav-pills .show>.nav-link {
    border: 0 !important;
}

ul.floatingActionBar {
    position: fixed;
    bottom: 20px;
    right: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 1111;
}

ul.floatingActionBar li {
    padding: 20px;
    text-align: center;
}

.show-back-to-top {
    display: block;
    visibility: visible;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.back-to-top {
    height: 45px;
    width: 45px;
    line-height: 45px;
    font-size: 18px;
    opacity: 1;
    display: none;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    background: #fff;
    color: #f05d40;
    margin: 0 auto;
    -webkit-animation: at-ripple 0.6s linear infinite;
    animation: at-ripple 0.6s linear infinite;
}

.back-to-top:hover {
    color: #f05d40;
}

@-webkit-keyframes at-ripple {
    0% {
        -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(0, 0, 0, 0.1);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(0, 0, 0, 0.1);
    }

    100% {
        -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(0, 0, 0, 0.1), 0 0 0 20px rgba(0, 0, 0, 0);
        -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(0, 0, 0, 0.1), 0 0 0 20px rgba(0, 0, 0, 0);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(0, 0, 0, 0.1), 0 0 0 20px rgba(0, 0, 0, 0);
    }
}

@-moz-keyframes at-ripple {
    0% {
        -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(0, 0, 0, 0.1);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(0, 0, 0, 0.1);
    }

    100% {
        -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(0, 0, 0, 0.1), 0 0 0 20px rgba(0, 0, 0, 0);
        -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(0, 0, 0, 0.1), 0 0 0 20px rgba(0, 0, 0, 0);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(0, 0, 0, 0.1), 0 0 0 20px rgba(0, 0, 0, 0);
    }
}

@-o-keyframes at-ripple {
    0% {
        -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(0, 0, 0, 0.1);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(0, 0, 0, 0.1);
    }

    100% {
        -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(0, 0, 0, 0.1), 0 0 0 20px rgba(0, 0, 0, 0);
        -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(0, 0, 0, 0.1), 0 0 0 20px rgba(0, 0, 0, 0);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(0, 0, 0, 0.1), 0 0 0 20px rgba(0, 0, 0, 0);
    }
}

@keyframes at-ripple {
    0% {
        -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(0, 0, 0, 0.1);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(0, 0, 0, 0.1);
    }

    100% {
        -moz-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(0, 0, 0, 0.1), 0 0 0 20px rgba(0, 0, 0, 0);
        -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(0, 0, 0, 0.1), 0 0 0 20px rgba(0, 0, 0, 0);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(0, 0, 0, 0.1), 0 0 0 20px rgba(0, 0, 0, 0);
    }
}

.contact_list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact_list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact_list li {
    position: relative;
    padding: 18px 0px;
    border-bottom: 1px solid #ddd;
}

.contact_list li:last-child {
    border-bottom: 0;
}

.contact_list .contact_list_icon {
    width: 40px;
    position: absolute;
    left: 0;
}

.contact_list .contact_list_icon img {
    max-width: 100%;
}

.contact_list .contact_list_desc {
    padding-left: 60px;
}

.contact_list h3 {
    font-weight: 600;
    font-size: 18px;
    margin: 0;
}

.title_bullet {
    width: 8px;
    height: 8px;
    top: -4px;
    position: relative;
    border-radius: 4px;
    background-color: #333;
    margin-right: 8px;
    display: inline-block;
}

.verified_user {
    position: relative;
    padding-right: 24px;
    display: inline-block;
    max-width: 100%;
}

.verified_user~div {
    position: relative;
    top: -6px;
    width: 100%;
}

.verified_user::after {
    content: '';
    background: url('../images/badge.png') no-repeat right top;
    background-size: contain;
    position: absolute;
    top: 3px;
    bottom: 3px;
    right: 0;
    width: 14px;
    display: block;
}

.followBtn {
    font-weight: 600 !important;
}

.articleBody .video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background-color: black;
    background-size: 100% 134%;
}

.articleBody .video img.button {
    position: absolute;
    top: 50%;
    left: 50%;
    cursor: pointer;
    opacity: .92;
    -webkit-transition: opacity 600ms ease;
    -moz-transition: opacity 400ms ease;
    -ms-transition: opacity 400ms ease;
    transition: opacity 400ms ease;
}

.articleBody .video:hover img.button {
    opacity: .99;
}

.articleBody .video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('<?php echo $siteurl;?>images/Double-Ring.gif') no-repeat center;
}

.articleBody iframe {
    width: 100%;
}

.twitter-tweet,
.articleBody iframe {
    margin-left: auto !important;
    margin-right: auto !important;
}

.udex-share_button_counter {
    position: relative;
}

.udex-share_button_counter::before {
    content: '';
    position: absolute;
    left: -18px;
    top: 4px;
    border-top: 9px solid transparent;
    border-right: 9px solid #ddd;
    border-bottom: 9px solid transparent;
    border-left: 9px solid transparent;
    z-index: 1;
}

.udex-share_button_counter::after {
    content: '';
    position: absolute;
    left: -16px;
    top: 5px;
    border-top: 8px solid transparent;
    border-right: 8px solid #fff;
    border-bottom: 8px solid transparent;
    border-left: 8px solid transparent;
    z-index: 1;
    transition: all .15s ease;
}

.udex-share_button_counter:hover::after {
    border-right-color: #dae0e5;
}

.bulletList {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bulletList li {
    display: inline-block;
}

.bulletList li::after {
    content: '•';
    display: inline-block;
    padding-right: 6px;
    padding-left: 6px;
}

.bulletList li:last-child::after {
    content: '';
    padding-right: 0px;
    padding-left: 0px;
}

.modalNotification {
    position: fixed;
    bottom: 10px;
    left: 10px;
    background: #4A90E2;
    color: #fff;
    border-radius: 5px;
    width: 350px;
    max-width: 80%;
    overflow: hidden;
    line-height: 1.3;
    font-size: 15px;
    display: none;
    z-index: 1200;
}

.modalNotificationAction {
    display: flex;
    grid-gap: 2px;
}

.modalNotificationAction button {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    border: 0;
    padding: 12px;
    background-color: #3076C8;
    color: #fff;
}

.storiesWrapper {
    margin: 0px auto;
    position: relative;
    text-align: center;
}

.stories.snapgram .story>.item-link>.item-preview {
    border-radius: 50%;
    padding: 2px;
    background: radial-gradient(ellipse at 70% 70%, #F05D40 8%, #f0593b 42%, #DA543A 58%);
}

.stories.carousel .story>.item-link>.info .name {
    font-weight: 600;
    font-size: 14px;
}

.stories.carousel {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

@media (max-width: 768px) {
    .stories.carousel .story>.item-link>.info .name {
        font-weight: 500;
        font-size: 12px;
    }

    .storiesContainer {
        border-bottom: 1px solid #eee;
        top: 0;
        z-index: 1023;
        position: -webkit-sticky;
        position: sticky;
        background-color: #fff;
    }
}

#storiesContainer {
    border-bottom: 1px solid #eee;
    transition: all 0.5s;
}

#zuck-modal-content .story-viewer .slides .item>.media {
    height: auto;
    top: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    max-height: 100%;
    max-width: 100%;
}

#storiesContainer .storytitle {
    display: none;
}

.storiesContainer .storytitle {
    display: block !important;
}

.storiesContainer .stories.carousel .story>.item-link>.item-preview {
    max-height: 60px;
}

.storiesContainer .stories.carousel .story {
    max-width: 60px;
}

.storiesContainer .stories.carousel .story>.item-link>.info {
    margin-top: 0px;
}

.sidebar_container {
    width: 250px;
    background-color: #fff;
    float: left;
}

@media (max-width: 768px) {
    .sidebar_container {
        display: none;
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background: white;
        z-index: 1000000;
        overflow: auto;
        width: auto;
        float: none;
        padding: 60px 0;
        overflow: auto;
    }
}

.sidebar_container {
    font-size: 13px !important;
}

.sidebar_container .list-group-item {
    font-size: 16px;
    color: #aaa;
    font-weight: 600;
}

.sidebar_container .list-group-item.active,
.sidebar_container .list-group-item:hover {
    font-size: 16px;
    color: #333;
    background: #fff;
    border-color: #333;
    text-decoration: none;
}

.sidebar_container .list-group-item:before {
    margin-right: 5px;
    font-size: 1.25em;
    font-weight: 900;
    font-family: 'Font Awesome 5 Free';
    display: inline-block;
    content: "\f054";
    font-size: 14px;
}

.m-store-icon {
    position: relative;
    overflow: hidden;
    transition: all 0.5s;
}

.m-store-icon::after {
    content: '';
    position: absolute;
    background: url(../images/path856.png) no-repeat;
    background-size: contain;
    right: -20px;
    bottom: -20px;
    width: 80px;
    height: 80px;
    opacity: 0.5;
}

.m-store-icon p {
    font-size: 12px;
    color: #808080;
}

.m-store-icon h2 {
    font-size: 24px;
    font-weight: 700;
    color: #333;
}

.m-store-icon.hover,
.m-store-icon:hover {
    background: #f05d40 linear-gradient(-200deg, #f05d40, #d85439);
    border: 1px solid #f05d40;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    text-decoration: none;
}

.m-store-icon.hover::after,
.m-store-icon:hover::after {
    opacity: 0.1;
}

.m-store-icon.hover h2,
.m-store-icon:hover h2 {
    color: #fff;
}

.m-store-icon.hover p,
.m-store-icon:hover p {
    color: rgba(255, 255, 255, 0.6);
}

.chart-container {
    position: relative;
    margin: auto;
    height: 500px;
    width: 100%;
    background: url(../images/path856.png) no-repeat center;
}

@media (min-width: 768px) {
    .sticky-md-top {
        position: -webkit-sticky;
        position: sticky;
        top: 70px;
    }

    .sticky-md-bottom {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0px;
    }
}

.selector_style input {
    display: none;
}

.selector_style label {
    border: 1px solid #ddd;
    padding: 6px 12px;
    border-radius: 4px;
    display: inline-block;
    margin: 0 2px 1px 0;
    font-size: 12px;
    color: #333;
}

.selector_style label:hover {
    border: 1px solid #ffc7c7;
}

.selector_style input:checked+label {
    border: 1px solid #e95f32;
    color: #c7371e;
}

.tagButton {
    background-color: #fff2f2;
    color: #c7371e;
    text-shadow: 1px 1px #ffffff;
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 15px;
    transition: all 0.5s;
    margin-bottom: 4px;
}

.tagButton.bg-blue {
    background-color: #cee9ff !important;
    color: #2196f3;
    text-shadow: 1px 1px #ffffff;
}

a.tagButton:hover {
    background-color: #ffc7c7;
    color: #c7371e;
    text-decoration: none;
}

#listen_position {
    position: fixed;
    right: -1px;
    top: 80px;
    bottom: 80px;
    width: 66px;
    z-index: 1040;
    touch-action: none;
    pointer-events: none;
}

.listen_container {
    border-radius: 12px 0 0 12px;
    touch-action: none;
    user-select: none;
    transform: translateY(190px);
    pointer-events: auto;
}

@media (min-width: 765px) {
    #listen_position {
        left: -1px;
        right: auto;
    }

    .listen_container {
        border-radius: 0 12px 12px 0;
    }
}

header .google-auto-placed,
footer .google-auto-placed,
.fixed-bottom .google-auto-placed,
.header-content .google-auto-placed {
    display: none !important;
    height: 0 !important;
}


/* change form hint arrow color when valid */

.celeb-firework {
    position: absolute;
    top: 60px;
    right: 0;
    left: 0;
    z-index: 2000;
}

.celeb-firework>.before,
.celeb-firework>.after {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
    -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}

.celeb-firework>.after {
    -moz-animation-delay: 1.25s, 1.25s, 1.25s;
    -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
    -o-animation-delay: 1.25s, 1.25s, 1.25s;
    -ms-animation-delay: 1.25s, 1.25s, 1.25s;
    animation-delay: 1.25s, 1.25s, 1.25s;
    -moz-animation-duration: 1.25s, 1.25s, 6.25s;
    -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
    -o-animation-duration: 1.25s, 1.25s, 6.25s;
    -ms-animation-duration: 1.25s, 1.25s, 6.25s;
    animation-duration: 1.25s, 1.25s, 6.25s;
}

@-webkit-keyframes bang {
    to {
        box-shadow: -25px -40.6666666667px #ff6600, 248px 1.3333333333px #007bff, -115px -407.6666666667px #ff1e00, -186px -335.6666666667px #a2ff00, 224px -201.6666666667px #00ffc8, -181px -361.6666666667px #00ffaa, 211px 45.3333333333px #003cff, -152px -330.6666666667px #0055ff, -240px -190.6666666667px #ff5e00, -184px -231.6666666667px #1eff00, 31px -31.6666666667px #ff0040, -121px -103.6666666667px #ff9100, 118px -187.6666666667px #ff3300, -40px 14.3333333333px #26ff00, -14px -162.6666666667px #0400ff, -24px -192.6666666667px #0040ff, -231px 4.3333333333px #6a00ff, 24px -384.6666666667px #00ff88, 77px -326.6666666667px #0051ff, -125px -243.6666666667px #8c00ff, 189px -144.6666666667px #2200ff, 159px -180.6666666667px #aeff00, -195px -47.6666666667px #00ff4d, 43px -252.6666666667px #ff00ae, -184px -336.6666666667px #5100ff, -147px -173.6666666667px #00ffb7, 156px -4.6666666667px #00c4ff, 242px -63.6666666667px cyan, -14px -347.6666666667px #9dff00, -82px -89.6666666667px #8400ff, -47px -379.6666666667px #00ffee, 250px -139.6666666667px #ff6200, 129px -93.6666666667px deepskyblue, 95px -273.6666666667px #ff0900, 47px -275.6666666667px #ae00ff, -90px -131.6666666667px lime, 193px -383.6666666667px #d900ff, -13px -386.6666666667px #ff004d, 22px -234.6666666667px #00e1ff, 144px -22.6666666667px #b300ff, -215px -9.6666666667px #00ff48, 151px -336.6666666667px #48ff00, 185px -18.6666666667px #0088ff, -12px -362.6666666667px #9100ff, 94px -3.6666666667px #8800ff, -110px 64.3333333333px #80ff00, 96px -316.6666666667px #0088ff, -208px 49.3333333333px #ff0022, 230px -177.6666666667px #ff00a6, 164px -191.6666666667px #ff00bf, 145px -313.6666666667px #00ff84;
    }
}

@-moz-keyframes bang {
    to {
        box-shadow: -25px -40.6666666667px #ff6600, 248px 1.3333333333px #007bff, -115px -407.6666666667px #ff1e00, -186px -335.6666666667px #a2ff00, 224px -201.6666666667px #00ffc8, -181px -361.6666666667px #00ffaa, 211px 45.3333333333px #003cff, -152px -330.6666666667px #0055ff, -240px -190.6666666667px #ff5e00, -184px -231.6666666667px #1eff00, 31px -31.6666666667px #ff0040, -121px -103.6666666667px #ff9100, 118px -187.6666666667px #ff3300, -40px 14.3333333333px #26ff00, -14px -162.6666666667px #0400ff, -24px -192.6666666667px #0040ff, -231px 4.3333333333px #6a00ff, 24px -384.6666666667px #00ff88, 77px -326.6666666667px #0051ff, -125px -243.6666666667px #8c00ff, 189px -144.6666666667px #2200ff, 159px -180.6666666667px #aeff00, -195px -47.6666666667px #00ff4d, 43px -252.6666666667px #ff00ae, -184px -336.6666666667px #5100ff, -147px -173.6666666667px #00ffb7, 156px -4.6666666667px #00c4ff, 242px -63.6666666667px cyan, -14px -347.6666666667px #9dff00, -82px -89.6666666667px #8400ff, -47px -379.6666666667px #00ffee, 250px -139.6666666667px #ff6200, 129px -93.6666666667px deepskyblue, 95px -273.6666666667px #ff0900, 47px -275.6666666667px #ae00ff, -90px -131.6666666667px lime, 193px -383.6666666667px #d900ff, -13px -386.6666666667px #ff004d, 22px -234.6666666667px #00e1ff, 144px -22.6666666667px #b300ff, -215px -9.6666666667px #00ff48, 151px -336.6666666667px #48ff00, 185px -18.6666666667px #0088ff, -12px -362.6666666667px #9100ff, 94px -3.6666666667px #8800ff, -110px 64.3333333333px #80ff00, 96px -316.6666666667px #0088ff, -208px 49.3333333333px #ff0022, 230px -177.6666666667px #ff00a6, 164px -191.6666666667px #ff00bf, 145px -313.6666666667px #00ff84;
    }
}

@-o-keyframes bang {
    to {
        box-shadow: -25px -40.6666666667px #ff6600, 248px 1.3333333333px #007bff, -115px -407.6666666667px #ff1e00, -186px -335.6666666667px #a2ff00, 224px -201.6666666667px #00ffc8, -181px -361.6666666667px #00ffaa, 211px 45.3333333333px #003cff, -152px -330.6666666667px #0055ff, -240px -190.6666666667px #ff5e00, -184px -231.6666666667px #1eff00, 31px -31.6666666667px #ff0040, -121px -103.6666666667px #ff9100, 118px -187.6666666667px #ff3300, -40px 14.3333333333px #26ff00, -14px -162.6666666667px #0400ff, -24px -192.6666666667px #0040ff, -231px 4.3333333333px #6a00ff, 24px -384.6666666667px #00ff88, 77px -326.6666666667px #0051ff, -125px -243.6666666667px #8c00ff, 189px -144.6666666667px #2200ff, 159px -180.6666666667px #aeff00, -195px -47.6666666667px #00ff4d, 43px -252.6666666667px #ff00ae, -184px -336.6666666667px #5100ff, -147px -173.6666666667px #00ffb7, 156px -4.6666666667px #00c4ff, 242px -63.6666666667px cyan, -14px -347.6666666667px #9dff00, -82px -89.6666666667px #8400ff, -47px -379.6666666667px #00ffee, 250px -139.6666666667px #ff6200, 129px -93.6666666667px deepskyblue, 95px -273.6666666667px #ff0900, 47px -275.6666666667px #ae00ff, -90px -131.6666666667px lime, 193px -383.6666666667px #d900ff, -13px -386.6666666667px #ff004d, 22px -234.6666666667px #00e1ff, 144px -22.6666666667px #b300ff, -215px -9.6666666667px #00ff48, 151px -336.6666666667px #48ff00, 185px -18.6666666667px #0088ff, -12px -362.6666666667px #9100ff, 94px -3.6666666667px #8800ff, -110px 64.3333333333px #80ff00, 96px -316.6666666667px #0088ff, -208px 49.3333333333px #ff0022, 230px -177.6666666667px #ff00a6, 164px -191.6666666667px #ff00bf, 145px -313.6666666667px #00ff84;
    }
}

@-ms-keyframes bang {
    to {
        box-shadow: -25px -40.6666666667px #ff6600, 248px 1.3333333333px #007bff, -115px -407.6666666667px #ff1e00, -186px -335.6666666667px #a2ff00, 224px -201.6666666667px #00ffc8, -181px -361.6666666667px #00ffaa, 211px 45.3333333333px #003cff, -152px -330.6666666667px #0055ff, -240px -190.6666666667px #ff5e00, -184px -231.6666666667px #1eff00, 31px -31.6666666667px #ff0040, -121px -103.6666666667px #ff9100, 118px -187.6666666667px #ff3300, -40px 14.3333333333px #26ff00, -14px -162.6666666667px #0400ff, -24px -192.6666666667px #0040ff, -231px 4.3333333333px #6a00ff, 24px -384.6666666667px #00ff88, 77px -326.6666666667px #0051ff, -125px -243.6666666667px #8c00ff, 189px -144.6666666667px #2200ff, 159px -180.6666666667px #aeff00, -195px -47.6666666667px #00ff4d, 43px -252.6666666667px #ff00ae, -184px -336.6666666667px #5100ff, -147px -173.6666666667px #00ffb7, 156px -4.6666666667px #00c4ff, 242px -63.6666666667px cyan, -14px -347.6666666667px #9dff00, -82px -89.6666666667px #8400ff, -47px -379.6666666667px #00ffee, 250px -139.6666666667px #ff6200, 129px -93.6666666667px deepskyblue, 95px -273.6666666667px #ff0900, 47px -275.6666666667px #ae00ff, -90px -131.6666666667px lime, 193px -383.6666666667px #d900ff, -13px -386.6666666667px #ff004d, 22px -234.6666666667px #00e1ff, 144px -22.6666666667px #b300ff, -215px -9.6666666667px #00ff48, 151px -336.6666666667px #48ff00, 185px -18.6666666667px #0088ff, -12px -362.6666666667px #9100ff, 94px -3.6666666667px #8800ff, -110px 64.3333333333px #80ff00, 96px -316.6666666667px #0088ff, -208px 49.3333333333px #ff0022, 230px -177.6666666667px #ff00a6, 164px -191.6666666667px #ff00bf, 145px -313.6666666667px #00ff84;
    }
}

@keyframes bang {
    to {
        box-shadow: -25px -40.6666666667px #ff6600, 248px 1.3333333333px #007bff, -115px -407.6666666667px #ff1e00, -186px -335.6666666667px #a2ff00, 224px -201.6666666667px #00ffc8, -181px -361.6666666667px #00ffaa, 211px 45.3333333333px #003cff, -152px -330.6666666667px #0055ff, -240px -190.6666666667px #ff5e00, -184px -231.6666666667px #1eff00, 31px -31.6666666667px #ff0040, -121px -103.6666666667px #ff9100, 118px -187.6666666667px #ff3300, -40px 14.3333333333px #26ff00, -14px -162.6666666667px #0400ff, -24px -192.6666666667px #0040ff, -231px 4.3333333333px #6a00ff, 24px -384.6666666667px #00ff88, 77px -326.6666666667px #0051ff, -125px -243.6666666667px #8c00ff, 189px -144.6666666667px #2200ff, 159px -180.6666666667px #aeff00, -195px -47.6666666667px #00ff4d, 43px -252.6666666667px #ff00ae, -184px -336.6666666667px #5100ff, -147px -173.6666666667px #00ffb7, 156px -4.6666666667px #00c4ff, 242px -63.6666666667px cyan, -14px -347.6666666667px #9dff00, -82px -89.6666666667px #8400ff, -47px -379.6666666667px #00ffee, 250px -139.6666666667px #ff6200, 129px -93.6666666667px deepskyblue, 95px -273.6666666667px #ff0900, 47px -275.6666666667px #ae00ff, -90px -131.6666666667px lime, 193px -383.6666666667px #d900ff, -13px -386.6666666667px #ff004d, 22px -234.6666666667px #00e1ff, 144px -22.6666666667px #b300ff, -215px -9.6666666667px #00ff48, 151px -336.6666666667px #48ff00, 185px -18.6666666667px #0088ff, -12px -362.6666666667px #9100ff, 94px -3.6666666667px #8800ff, -110px 64.3333333333px #80ff00, 96px -316.6666666667px #0088ff, -208px 49.3333333333px #ff0022, 230px -177.6666666667px #ff00a6, 164px -191.6666666667px #ff00bf, 145px -313.6666666667px #00ff84;
    }
}

@-webkit-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-moz-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-o-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-ms-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0;
    }
}

@-webkit-keyframes position {

    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@-moz-keyframes position {

    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@-o-keyframes position {

    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@-ms-keyframes position {

    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

@keyframes position {

    0%,
    19.9% {
        margin-top: 10%;
        margin-left: 40%;
    }

    20%,
    39.9% {
        margin-top: 40%;
        margin-left: 30%;
    }

    40%,
    59.9% {
        margin-top: 20%;
        margin-left: 70%;
    }

    60%,
    79.9% {
        margin-top: 30%;
        margin-left: 20%;
    }

    80%,
    99.9% {
        margin-top: 30%;
        margin-left: 80%;
    }
}

.color_option {
    width: 40px;
    height: 40px;
}

.color_option.active {
    outline-width: 5px;
    outline-style: solid;
    outline-style: ridge;
}

.top_action_style {
    background-color: rgba(0, 0, 0, 0.4);
    color: rgba(254, 254, 254, 0.6);
    border-radius: 20px 0 20px 20px;
    font-size: 30px;
    line-height: 1;
    padding: 0 5px 5px 5px
}

.top_action_style:hover {
    background-color: rgba(0, 0, 0, 0.9);
    color: rgba(254, 254, 254, 0.9);
}

.d-topright {
    position: absolute;
    right: 0;
    top: 0;
}

.d-top {
    position: absolute;
    top: 0;
}

.d-bottomright {
    position: absolute;
    right: 0;
    bottom: 0;
}


/* rate result */

.star-contain {
    display: inline-block;
    width: 114px;
    height: 22px;
    background: url(../images/rate-stars.png) no-repeat;
}

.rate-degree {
    height: 22px;
    background: url(../images/rate-star.png) no-repeat;
}

.star-contain2 {
    display: inline-block;
    width: 73px;
    height: 15px;
    background: url(../images/rate-stars2.svg) no-repeat;
}

.rate-degree2 {
    height: 15px;
    background: url(../images/rate-star2.svg) no-repeat;
}

.rating {
    border: none;
    float: left;
}

.rating input {
    display: none;
}

.rating label:before {
    margin: 5px;
    font-size: 1.25em;
    font-weight: 900;
    font-family: 'Font Awesome 5 Free';
    display: inline-block;
    content: "\f005";
}

.rating .half:before {
    content: "\f089";
    position: absolute;
}

.rating label {
    color: #ddd;
    float: right;
}

.rating input:checked~label,
.rating:not(:checked) label:hover,
.rating:not(:checked) label:hover~label {
    color: #FFD700;
}

.rating input:checked+label:hover,
.rating input:checked~label:hover,
.rating label:hover~input:checked~label,
.rating input:checked~label:hover~label {
    color: #FFED85;
}

.morecontent span {
    display: none;
}

.morelink {
    display: inline-block;
}

.book-scroll {
    width: 100px;
}

@media (min-width: 768px) {
    .book-scroll {
        width: 150px;
    }
}