/*
 Theme Name:     Livecast Child Theme
 Theme URI:      https://www.codeless.co/livecast
 Description:    Livecast Child Theme
 Author:         Codeless Themes
 Author URI:     https://www.codeless.co
 Template:       livecast
 Version:        1.0.0
*/

/* =Theme customization starts here
------------------------------------------------------- */

@font-face {
    font-family: 'Classic Comic';
    src: url('../woff2/classiccomic-bold.woff2') format('woff2'),
        url('../woff/classiccomic-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Classic Comic';
    src: url('../woff2/classiccomic.woff2') format('woff2'),
        url('../woff/classiccomic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../woff2/lato-black.woff2') format('woff2'),
        url('../woff/lato-black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cabin';
    src: url('../woff2/cabin-regular.woff2') format('woff2'),
        url('../woff/cabin-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gloock';
    src: url('../woff2/gloock-regular.woff2') format('woff2'),
        url('../woff/gloock-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Didact Gothic';
    src: url('../woff2/didactgothic-regular.woff2') format('woff2'),
        url('../woff/didactgothic-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cabin';
    src: url('../woff2/cabin-bold.woff2') format('woff2'),
        url('../woff/cabin-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}





body.home {
    /*background: url(./images/home-bg.png) no-repeat left center / cover;*/
	background: url(../webp/home-bg.webp) no-repeat left center / cover;
	
}

body.single-post {
    background: url(../png/blog-bg.png) no-repeat top center / cover;
}
.error404 .logo-wrapper	 img {
    max-height: 100%;
    width: auto;
}

.dflex {
	display: flex;
    flex-direction: column;
    align-items: center;
}
.sa-404  {
    display: flex;
    align-items: flex-end;
	 margin: 0 !important;
    padding: 0 !important;
}

.sa-404 img {
    max-height: 450px;
}
.error404 .cl-header-default .logo-wrapper {
    height: auto !important;
    width: 100%;
    margin-top: 12px;
}
.error404 h2 {
    color: #E20491 !important;
    font-size: 80px !important;
    font-weight: 500 !important;
    font-style: normal;
	line-height:80px !important;
	font-family: 'Classic Comic';
}
.error404 h1.page-title {
    color: #E20491;
    font-family: 'Classic Comic';
    font-size: 40px;
    text-transform: uppercase;
    font-weight: 700;
    margin: 8px 0;
}
.sa-404 a {
    background-color: #ff007c;
    color: #fff;
    display: inline-flex;
    padding: 24px 17px;
    font-family: 'Classic Comic';
    font-size: 25px;
    border-radius: 5px;
    margin: 40px 0 0 0px;
}
.sa-404 p {
   font-family: 'Classic Comic';
    font-size: 40px;
    font-weight: 500;
    line-height: 42px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #061020;
    margin: 12px 0;
}
.sa-404 span {
    line-height: 42px;
    text-transform: none;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #061020;
    display: block;
}

.sa-contact-form p label {
	font-family: "Mulish", Sans-serif;
    font-size: 20px;
    font-weight: 500;
	color:#000;
}
.sa-contact-form p input:not([type="submit"]), .sa-contact-form p textarea{
    font-size: 18px;
    min-height: 59px;
    padding: 7px 20px;
    border-radius: 5px;
    border: 1px solid #D2C8C8;
    box-shadow: none;
	margin-top: 5px;
	font-family: 'Didact Gothic';
}
.sa-contact-form p input::placeholder {
    color: #6b6b6b;
}
.sa-contact-form p textarea::placeholder {
    color: #bdbcbc;
}

.sa-contact-form p input[type="submit"] {
    font-size: 23px !important;
    font-weight: 700;
    background-color: #E20491;
    color: #ffffff;
    min-height: 59px;
    padding: 15px 110px;
    border-radius: 5px;
    text-transform: capitalize;
    display: block;
    line-height: 23px !important;
}
.sa-contact-form p input[type="submit"]:hover {
    background-color: #f2171c;
}





.spotifyplayer iframe{ height: 260px; }
.post-template span {
    color: #cc0066;
    text-decoration: none !important;
}
.post-template h3 p {
    font-size: 15px;
    font-family: "Didact Gothic", sans-serif;
    margin: 0;
}
.post-template p {
    font-size: 18px;
	line-height: 32px;
}
.bg-border::before {
    top: 30px;
}
#menu-social-links {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 16px;
    border-top: 1px solid #fc61ad;
    padding-top: 16px;
}
#menu-social-links a img {
    width: 40px;
}
#menu-item-7475 .ce-menu-item {
    display: none;
}
.main-head .elementor-heading-title {
    font-family: 'Gloock';
}
.ce-nav-menu a.ce-menu-item,
.ce-nav-menu a.ce-sub-menu-item {
    font-family: 'Classic Comic';
}
.banner-main {
    position: relative;
}
.highlight-text p strong {
    color: #000000;
}

/*
.banner-main::after {
    content: "";
    position: absolute;
    top: 212px;
    right: 0;
    background: url(./images/vanilla-swingers-kat-leo-hero-podcast.png) no-repeat center center / contain;
    bottom: 0;
    width: 61%;
}*/
.banner-main::after {
    content: "";
    position: absolute;
    top: 85px;
	 background: url(../webp/vanilla-swingers-kat-leo-hero-podcast_large.webp) no-repeat center center / contain;
   /* background: url(./images/vanilla-swingers-kat-leo-hero-podcast_large.png) no-repeat center center / contain;*/

    bottom: 0;
    width: 54%;
    right: 10px;
}

.banner-main .elementor-heading-title {
    font-family: 'Lato';
}
.alphabets li {
    border-right: 1px solid #ccc;
}
.alphabets ul {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.alphabets li span {
    font-size: 23px;
    color: #2f2f2f;
    padding-right: 8px;
    text-decoration: underline !important;
}
#alphabet-container .elementor-drop-cap-letter {
    color: #ff71bb;
    font-weight: bold;
    text-decoration: underline !important;
}
#alphabet-container strong {
    color: #cc0066;
    margin-bottom: 15px !important;
}

#alphabet-container .elementor-drop-cap {
    margin-top: -55px;
}
#alphabet-container .elementor-drop-cap-yes {
    margin-top: 50px;
}
.banner-main .rotate-title .elementor-heading-title {
    transform: rotate(-3deg);
    position: relative;
    transform-origin: 0;
}

.banner-main .rotate-title .elementor-heading-title::before {
    content: "";
    background-color: #fdc8ce;
    position: absolute;
    bottom: 14px;
    left: -28px;
    right: -20px;
    height: 30px;
    z-index: -1;
}

.banner-btn a {
    background-color: #ff007c;
    color: #fff;
    display: inline-flex;
    padding: 24px 17px;
    font-family: 'Classic Comic';
    font-size: 25px;
    border-radius: 5px;
    margin: 40px 0 0 150px;
}

.title-content .elementor-widget-container {
    background-size: 100% 100% !important;
}

.title-content .elementor-icon-box-title {
    font-family: 'Classic Comic';
    font-weight: normal;
    letter-spacing: 0.1px;
}

.title-content .elementor-icon-box-title b {
    color: #bd0819;
}

.title-content .elementor-icon-box-description {
    font-family: 'Classic Comic';
    line-height: 22px;
}

.bottom-box-main .elementor-container {
    justify-content: space-between;
}

.bottom-box-main .elementor-container .elementor-col-50 {
    width: calc(50% - 78px);
}

.ce-nav-menu-icon {
    padding: 0;
}

.header-link ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
}

.header-link ul li {
    margin-left: 63px;
}

.header-link ul li:first-child {
    margin-left: 0;
}

.codeless-player .codeless-player-toggle {
    padding: 25px 15px;
    font-size: 63px;
    bottom: 0;
}

.header-link ul a {
    color: #000000;
    font-size: 25px;
    font-family: 'Classic Comic';
}

.episode-title .elementor-widget-container {
    background-size: 100% 100%;
}

.time-text .elementor-widget-container .elementor-heading-title,
.episode-title .elementor-widget-container .elementor-heading-title {
    font-family: 'Classic Comic';
    letter-spacing: 0.1px;
}

.time-text .elementor-widget-container .elementor-heading-title {
    line-height: 18px;
    letter-spacing: 0;
    padding: 0 5px;
}

.codeless-player-nav {
    opacity: 0;
}

body .codeless-player {}

body .codeless-player::before {
    content: "";
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 132px;
    height: 204px;
    background: url(../png/vanilla-swingers-cherry.png) no-repeat center center / contain;
}

.scrollToTop {
    display: none !important;
}

.ce-flyout-wrapper .ce-side {
    position: fixed !important;
}

.codeless-player-content .codeless-player-category {
    display: none !important;
}

.codeless-player .mejs-playpause-button button {
    background: #fff !important;
}

.codeless-player .mejs-playpause-button button::before {
    color: #000 !important;
}

.mejs-time-current,
.mejs-time-handle-content {
    background-color: #fff !important;
}

.completed .cl-preloader #viewport {
    overflow: hidden;
}

.codeless-player,
.mejs-volume-total,
.codeless-player-collapsed .codeless-player-toggle {
    background-color: #1e2225 !important;
}

.codeless-player-content .codeless-player-title {
    font-size: 16px;
}

.ce-copyright .elementor-widget-container {
    font-family: 'Classic Comic';
}

.ce-copyright .elementor-widget-container p a {
    text-decoration: underline;
}

.ce-copyright .elementor-widget-container p a:hover {
    color: #bd0819 !important;
}


.page-id-2498 footer {
    display: none !important;
}

.page-id-2498 .col-sm-12 {
    padding: 0;
}

.bg-size-full .elementor-widget-wrap {
    background-size: 100% 100% !important;
}

.bg-size-full .elementor-widget-wrap.elementor-element-populated {
    background-size: 100% 100% !important;
}

.red-title-content p strong {
    color: #cc0066;
    font-family: "Poppins", Sans-serif;
    font-weight: 700;
}

.red-title-content .elementor-heading-title,
.highlight-text .elementor-heading-title {
    font-family: 'Gloock';
}

.three-grid-box img {
    background: red;
    min-height: 195px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-height: 195px;
}

@media only screen and (max-width: 1366px) {
    .banner-btn a {
        font-size: 18px;
        padding: 12px 17px;
        margin: 40px 0 0 100px;
    }

    .banner-main .rotate-title .elementor-heading-title::before {
        left: -15px;
        right: -15px;
        height: 20px;
    }

    .banner-main::after {
        top: 0;
        width: 55%;
    }

    .header-link ul a {
        font-size: 18px;
    }

    .play-btn img {
        max-width: 190px;
    }
}

@media only screen and (max-width: 991px) {
    .bottom-box-main .elementor-container .elementor-col-50 {
        width: 50%;
    }



    .banner-btn a {
        padding: 11px 14px;
        margin: 20px auto 35px;
    }

    .banner-main .rotate-title .elementor-heading-title::before {
        left: -10px;
        right: -10px;
        height: 10px;
        bottom: 10px;
    }

    .banner-main::after {
        top: 65px;
        width: 68%;
    }

    .codeless-player-content .codeless-player-title {
        font-size: 14px;
        line-height: 18px;
    }

    body .codeless-player .mejs-button,
    body .codeless-player .mejs-button>.download-button,
    body .codeless-player .mejs-button>button {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
    }

    .codeless-player-info {
        padding-right: 15px !important;
        flex: 0 0 90% !important;
        max-width: 90% !important;
    }

    .codeless-player-mejs-container {
        flex: 0 0 10% !important;
    }

    .codeless-player-mejs,
    .codeless-player {
        height: 90px !important;
    }

    body .codeless-player::before {
        width: 32px;
        height: 104px;
    }

    .play-btn img {
        max-width: 130px;
    }
}

@media only screen and (max-width: 767px) {
	.sa-404 {
    	margin-top: 10% !important;
	}
	.error404 .logo-wrapper	 img {
    	width: 150px !important;
    	max-width: fit-content;
	}
	.error404 h2 {
		font-size: 56px !important;
		line-height: 56px !important;
	}
	.error404 h1.page-title {
    	font-size: 28px;
		line-height: 28px;
	}
	.sa-404 p {
 	   font-size: 25px;
	   line-height: 25px;
     margin: 0;
	}
    .bg-border::before {
        top: 7px;
    }
	.sa-404 a {
    	padding: 8px 8px;
    	font-size: 14px;
    	margin: 10px 0 0 0px;
	}
	.sa-404 span {
		line-height: 20px;
		font-size: 14px;
		margin-top: 12px;
		margin-bottom: 8px;
	}
	.spotifyplayer iframe{ 
		height: 170px; 
	}
	.alphabets ul li a span {
 	   font-size: 20px;
	}
    .cms-container {
        border: 1px solid #000;
        border-radius: 6px 6px 0 0;
        background: #fff;
        border-bottom: none;
    }

    .banner-btn .elementor-widget-container {
        display: flex;
        justify-content: center;
    }

    .bottom-box-main .elementor-container .elementor-col-50 {
        width: 100%;
    }

    .header-link ul li {
        margin-left: 20px;
    }

    .banner-main::after {
        display: none;
    }

    .header-link ul a {
        font-size: 16px;
    }

    .play-btn img {
        max-width: 130px;
    }
}