/*
Theme Name: Flexxx
Theme URI: https://holyflexxx.com
Author: Bay Mills Studios
Author URI: https://baymillsstudios.com
Description: Flexxx Website
Version: 2025

Holy Flexxx WordPress Theme 2025 Bay Mills Studios
*/

@charset "utf-8";

/* Reset Styles **********************************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, location, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer.site, header.site, hgroup, menu, nav, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer.site, header.site, hgroup, menu, nav, section {display: block;}

* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} 

:focus {
  outline: none;
  /*box-shadow: 0 0 0 3px hsla(220, 100%, 50%, 80%);*/
}


/* Color Styles *****************************************/
.gold{color: #f0bb69;}
.lt_gold{color: #fff5e6;}
.dk_purple{color: #32292d;}
.md_purple{color: #5a454d;}
.lt_purple{color: #f2ecef;}
.purple{color: #7f636e;}
.dk_green{color: #21534c;}
.lt_green{color: #ebfbf9;}
.green{color: #419488;}
.white{color: #fff;}

.gold_bkg{background-color: #f0bb69;}
.lt_gold_bkg{background-color: #fff5e6;}
.dk_purple_bkg{background-color: #32292d;}
.md_purple_bkg{background-color: #5a454d;}
.lt_purple_bkg{background-color: #f2ecef;}
.purple_bkg{background-color: #7f636e;}
.dk_green_bkg{background-color: #21534c;}
.lt_green_bkg{background-color: #ebfbf9;}
.green_bkg{background-color: #419488;}
.white_bkg{background-color: #fff;}


/* Font Styles reg 400 semi 600 bold 700 *****************************************/
html {
    font-size: 16px;
    font-family: "Jost", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-optical-sizing: auto;
}

h1, h2, h3, h4, h5, h6{
    font-weight: 700;
}

h1{font-size: 2.188rem; line-height: 120%;} 
h2{font-size: 1.5rem; line-height: 120%; margin-bottom: 20px;}
h3{font-size: 1.5rem; line-height: 120%; margin-bottom: 20px;}
h4{font-size: 1.125rem; line-height: 120%;}
h5{font-size: 1rem; line-height: 120%;}

body.intro{overflow-x: hidden; background: #000;}
body.story{overflow-x: hidden; background: #0b0b0b url(images/main-bkg.png) no-repeat top center; background-size: cover;}
.df_txt, p, body{font-size: 1.125rem; font-weight: 400; line-height: 140%; color: #ffffff;}
.lg_txt{font-size: 1.188rem; font-weight: 400; line-height: 155%;}
.sm_txt{font-size: 0.875rem; font-weight: 400; line-height: 130%}
.long{overflow-wrap: break-word; hyphens: auto;}
caption{font-size: 0.875rem; font-weight: 400; text-transform: uppercase; line-height: 120%;}
.df_txt, p, .lg_txt, .sm_txt{margin-bottom: 20px;}
.df_txt:last-child, p:last-child, .lg_txt:last-child, .sm_txt:last-child{margin-bottom: 0px;}
.highlight{color: #e692f4;}
.glowing{text-shadow: rgba(183,0,255,1) 0px 0px 35px; color: #e692f4;}

location, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}         
sup {top: -0.5rem;}
location {bottom: -0.25rem;}


/* Link + Button Styles *****************************************/
a{color: #419488; text-decoration: none; border-bottom: 1px solid;}
a:hover{color: #21534c;}
.btn.purple {
    background:linear-gradient(to bottom, #bf5be9 5%, #b61cdd 100%)!important;
    background-color:#bf5be9!important;
    border-radius:15px!important;
    display:inline-block!important;
    cursor:pointer!important;
    color:#ffffff!important;
    font-size:20px!important;
    font-weight: 600!important;
    text-decoration:none!important;
	margin: 5px;
}
.btn.purple:hover {
    background:linear-gradient(to bottom, #b61cdd 5%, #bf5be9 100%)!important;
    background-color:#b61cdd!important;
}

.btn{display: inline-block; font-size: 1.125rem; font-weight: 700; padding: 16px 25px 19px; text-decoration: none; border: none;}
.btn:hover{cursor: pointer;}
.has_icon img{width: 20px; vertical-align: middle; margin-right: 5px;}
a:hover img{opacity: 0.8;}
.btn.sm{padding: 4px 9px 5px;}
a:hover img{-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}


/* Layout Styles *****************************************/
.clear {clear:both;}
.invisible{position : absolute; top : -1000px; width:1px; height:1px; overflow:hidden;}
.hide-text {text-indent: 100%; white-space: nowrap; overflow: hidden;}
.temp-hide{display:none!important;}

.cushion{padding: 60px 0px;}
.cushion-lg{padding: 100px 0px;}
.cushion-sm{padding: 20px 0px;}
.cushion-top{padding-top: 60px;}
.cushion-lg-top{padding-top: 100px;}
.cushion-sm-top{padding-top: 20px;}
.cushion-btm{padding-bottom: 60px;}
.cushion-lg-btm{padding-bottom: 100px;}
.cushion-sm-btm{padding-bottom: 20px;}

.alignleft {float:left; margin-right:15px; margin-bottom:5px;}
.alignright {float:right; margin-left:15px; margin-bottom:5px;}
.aligncenter {display: inline-block; margin: auto; padding: 10px;}

.img img, .img-fluid{max-width: 100%; height: auto;}
img.alignleft{float: left; max-width: 100%; margin: 0px 20px 20px 0px; height: auto;}
img.alignright{float: right; max-width: 100%; margin: 0px 0px 20px 20px; height: auto;}
img.aligncenter{display: block; margin: 20px auto; max-width: 100%; height: auto;}
 
section.full{position: relative; float: left; width: 100%; clear: both;}
.container-lg{margin: auto; display: block; position: relative; zoom: 1; width: 1634px;}
.container{margin: auto; display: block; position: relative; zoom: 1; width: 1436px;}
.container-sm{margin: auto; display: block; position: relative; zoom: 1; width: 1200px;}
.container-fluid{margin: auto; display: block; position: relative; zoom: 1; width: 96%;}
.container-full{margin: auto; display: block; position: relative; zoom: 1; width: 100%;}

.flex{display: table-cell; display: flex; display: -ms-flexbox;}
.full-center{align-items: center; justify-content: center;}

.text-left{text-align: left;}
.text-right{text-align: right;}
.text-center{text-align: center;}

.embed-container{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; margin: 5px 0px;} 
.embed-container iframe, .embed-container object, .embed-container embed{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.clearfix::after{
  content: "";
  clear: both;
  display: table;
}

video {
  width: 100%;
  height: auto;
}

.wide{padding-left: 0px!important; padding-right: 0px!important;}

strong, .bold{font-weight:700;}
em, .italic{font-style: italic;}

ol, ul{margin: 20px 20px 20px 40px;}


/* General Page Styles *****************************************/
.flexbox .container{align-items: center; justify-content: space-between; flex-wrap: wrap;}
.flexbox.half .leftside, .flexbox.half .rightside{width: 48%;}
.flexbox.lrg_left .leftside{width: 63%;}
.flexbox.lrg_left .rightside{width: 33%;}
.flexbox.lrg_right .rightside{width: 63%;}
.flexbox.lrg_right .leftside{width: 33%;}

#main{display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 60px 0px;}
#main .container{
    background: rgba(11, 11, 11, 0.1);
    border-radius: 10px;
    border: 1px solid #b26db2;
    padding: 60px 150px;
    width: 900px;
    box-shadow: 0px 0px 20px 5px rgba(223,129,223,0.75);
    -webkit-box-shadow: 0px 0px 20px 5px rgba(223,129,223,0.75);
    -moz-box-shadow: 0px 0px 20px 5px rgba(223,129,223,0.75);
    text-align: center;
}

#main .logo{max-width: 100%; width: 700px; margin-bottom: 0px; margin-top: -40px;}
#main .btn{margin-top: 30px; display: block;}

#video{display: none; width: calc(100% + 150px); margin-left: -75px;}

.content.first{padding: 100px 0px; background: url(images/top-pole.png) no-repeat center bottom; background-size: cover;}
.content.second{padding: 0px 0px 100px;}
.content .container-sm{border: 0px solid #fff;}
.content h1{font-size: 45px; font-weight: 500;}
.content p{font-size: 20px;}
.content h2{font-size: 40px; font-weight: 500;}
.content .glowing{text-transform: uppercase;}

.content .header h1{text-align: center;}
.content .header img{display: block; margin: auto;}
.content .header p{text-align: center;}

.content .logline, .blank{background: rgba(11, 11, 11, 0.5); padding: 60px; border: 1px solid #402445; text-align: center;}

.content .hookworld{display: flex; justify-content: space-between; margin: 40px 0px; flex-wrap: wrap;}
.content .hookworld .hook{width: 100%; margin-bottom: 40px;}
.content .hookworld .world{width: 35%; padding: 60px; background: #81338c;}

.content .hookworld .acts{width: 100%; margin: 40px 0px;}
.engine, .seasontwo {
    width: 49%;
    background: #411747;
    padding: 40px;
}
.undercurrent, .seasonone {
    width: 49%;
    background: #12161c;
    padding: 40px;
}
.summary {
    width: 100%;
    text-align: center;
    margin-top: 40px;
}

.content .performers{background: rgba(11, 11, 11, 0.5); padding: 60px; border: 1px solid #402445; text-align: center;}

.content .vader, .content .angel{width: 48%; margin: 40px 0px;}
.content .vader .img, .content .angel .img{width: 100%;}
.content .vader .img img, .content .angel .img img{max-width: 100%; width: 100%;}
.content .vader .text, .content .angel .text{width: 100%;}
.content .vader .text img, .content .angel .text img{width: 350px; margin-left: -15px;}

.content .list{display: flex; justify-content: space-around; flex-wrap: wrap;}
.content .list .performer{width: 24%; margin-bottom: 20px;}
.content .list .performer .img img{max-width: 100%;}

.content .list .performer img.stagename{width: 90%; margin-left: -10px;}
.content .list .performer p{font-size: 16px;}

.content .more{background: url(images/main-outline.jpeg) no-repeat center; background-size: cover; padding: 100px 40px; margin: 80px 0px; text-align: center;}

.content .vip{text-align: center; background: url(images/main-outline-faded.jpg) no-repeat center; background-size: contain; margin-top: 80px;}
.content .vip .text{padding: 60px 200px; margin-top: 40px;}
.content .vip img{margin-top: 30px;}

.form{margin-top: 60px;}
.form form{display: flex; justify-content: space-between; margin-top: 10px;}
.form form input[type=text], .form form input[type=email]{width: 100%!important; padding: 15px!important; border-radius: 15px!important; font-size: 16px!important; color: #212121!important; border: none!important; font-family: inherit!important; height: auto!important;}

#wpforms-14{margin: 0px!important;}
.wpforms-field-container, .wpforms-submit-container{width: 48%!important;}
.wpforms-submit-container button{width: 100%!important; height: auto!important; text-transform: uppercase!important; padding: 18px!important;}

.wpforms-container .wpforms-field{padding: 0px!important;}
div.wpforms-container-full .wpforms-form .wpforms-submit-container{margin-top: 0px!important;}

.story .copyright{text-align: center; margin-top: 40px;}
.intro .copyright{text-align: center; margin-top: 40px;}
.copyright p{font-size: 14px!important;}

/* Search Form Styles *****************************************/



/* Blog Page Styles *****************************************/


/*single post*/


/*list*/


/* Pagination Styles *****************************************/





/* Responsive Styles *****************************************/
@media only screen and (max-width:1650px) {
    .container-lg{width: 96%;}
}

@media only screen and (max-width:1470px) {
    .container{width: 96%;}
    
}


@media only screen and (max-width:1365px) {
    .container-sm{width: 96%;}
}


@media only screen and (max-width:1199px) {
    .content .header{text-align: center;}
    .content .header h1{margin-left: 0px;}
    .content .header img{max-width: 100%;}
    .content .header p{text-align: center; margin-right: 0px;}

    .content .hookworld .world{width: 45%;}

    .content .vip img{max-width: 100%;}

    .content .vip .text{padding: 100px;}
}


@media only screen and (max-width:989px) {
    #warning .container, #video .container{width: 85%;}
    .content .list .performer{width: 48%;}
    .content .list .performer img.stagename{width: 75%;}

    .form{margin-top: 40px;}
    .form form{display: block;}
    .form form input[type=text]{width: 100%; margin-bottom: 10px;}
    .form form button{width: 100%;}
	
	.wpforms-field-container, .wpforms-submit-container{width: 100%!important;}
	div.wpforms-container-full .wpforms-form .wpforms-submit-container{margin-top: 10px!important;}

    #main .container{width: 85%;}
	
	div.wpforms-container .wpforms-form .wpforms-field:not(.wpforms-field-phone):not(.wpforms-field-select-style-modern):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-layout):not(.wpforms-field-repeater){overflow-x: visible!important;}
}


@media only screen and (max-width:767px) {
    h1{font-size: 1.875rem;} 
    h2{font-size: 1.25rem;}
    h3{font-size: 1.25rem;}
    h4{font-size: 1.125rem;}

    .cushion{padding: 20px 0px;}
    .cushion-lg{padding: 40px 0px;}
    .cushion-sm{padding: 10px 0px;}
    .cushion-top{padding-top: 20px;}
    .cushion-lg-top{padding-top: 40px;}
    .cushion-sm-top{padding-top: 10px;}
    .cushion-btm{padding-bottom: 20px;}
    .cushion-lg-btm{padding-bottom: 40px;}
    .cushion-sm-btm{padding-bottom: 10px;}

    .lg_txt{font-size: 1rem;}

    #warning .container, #video .container{
        padding: 40px;
    }

    #warning .logo{margin-bottom: 30px;}
    #warning .btn, #video .btn{margin-top: 30px; font-size: 1rem;}

    .content{padding: 100px 0px 50px;}
    .content.second{padding: 0px 0px 50px;}
    .content h1{font-size: 35px;}
    .content p{font-size: 16px;}
    .content h2{font-size: 35px;}

    .content .logline{padding: 60px;}

    .content .hookworld{display: block; margin: 40px 0px;}
    .content .hookworld .hook{width: 100%;}
    .content .hookworld .world{margin-top: 40px; width: 100%;}
	.engine{width: 100%;}
	.undercurrent, .seasonone, .seasontwo{width: 100%!important; margin-top: 20px;}

    .content .performers{padding: 60px;}

    .content .vader{display: block; margin: 40px 0px;}
    .content .vader .img{width: 100%;}
    .content .vader .text{margin-top: 40px; width: 100%;}
    .content .vader .text img{max-width: 95%;}

    .content .more{padding: 60px 40px; margin: 40px 0px;}

    .content .vip .text{padding: 60px;}

	#main .logo{margin-top: 0px!important;}
    #main .container{padding: 20px;}
	
	#video{width: 100%!important; margin-left: 0px!important;}
	
		div.wpforms-container .wpforms-form .wpforms-field:not(.wpforms-field-phone):not(.wpforms-field-select-style-modern):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-layout):not(.wpforms-field-repeater){overflow-x: visible!important;}
    
}

@media only screen and (max-width:575px) {
    .content .list{display: block;}
    .content .list .performer{width: 100%; margin-bottom: 40px;}
	
.content .vader, .content .angel{width: 100%; margin: 40px 0px;}

    body.story{}
	
		div.wpforms-container .wpforms-form .wpforms-field:not(.wpforms-field-phone):not(.wpforms-field-select-style-modern):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-layout):not(.wpforms-field-repeater){overflow-x: visible!important;}
}


@media only screen and (max-width:479px) {
	div.wpforms-container .wpforms-form .wpforms-field:not(.wpforms-field-phone):not(.wpforms-field-select-style-modern):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-layout):not(.wpforms-field-repeater){overflow-x: visible!important;}
}