/*!
 * CockyBoys Unified Stylesheet
 * Build version: PHASE-2 (footer responsive overrides included)
 *
 * Built by concatenating:
 *   1. styles_2603.css  — desktop base (the visual source of truth)
 *   2. darkmode_2601.css — dark mode rules (applies at any breakpoint)
 *   3. responsive overrides — tablet/mobile re-flow rules added on top
 *
 * Cascade strategy: desktop-first. The desktop CSS is preserved verbatim,
 * and overrides at the bottom adapt the layout for narrower viewports.
 *
 * Breakpoints used in overrides:
 *   Mobile : max-width 767px
 *   Tablet : 768px - 1023px
 *   Desktop: min-width 1024px (no overrides — uses base rules)
 *
 * Phase 1 of refactor: header responsive rules only.
 * Footer, index page, scene/model/category pages will be added in
 * subsequent passes by appending more @media blocks to the overrides
 * section at the bottom.
 */



/* ============================================================
   1. DESKTOP BASE — formerly styles_2603.css
   ============================================================ */


html {
	font-size: 100%;
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
.gothamy {
	/* font-family: 'Passion One', Gotham, Arial; */
}
body {
	background: #fff;
	color: #000;
	margin: 0;
	padding: 0;
	min-width: 980px;
	font-family: 'Abel', sans-serif;
	font-size: 0.95em;
    line-height: 1.55em;
	overflow-x: hidden;
	max-width: 100vw;
    padding-top: 90px;
    padding-left: 70px;
}
#wrapper {
	margin: 0 auto;
	min-width: 980px;
    padding-top: 100px;
    padding-bottom: 50px;
	max-width: 1920px;
}

.tour #wrapper {
	padding-top: 85px;	
}

ul {
	margin: 0;
	padding: 0;
}
li {
	list-style-type: none;
	float: left;
}
a, a:hover, a:visited {
	text-decoration: none;
	color: #262626;
}
#masthead {
	position: relative;
	overflow: hidden;
}

#masthead video, #masthead video img {
	width: 100%;
    max-height: 42.968vw;
}

/****************************/
/****** Navigation Menu *****/
/****************************/

body {
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    display: flex;
    flex-flow: column wrap;
    box-sizing: border-box;
    -o-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
    -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
    box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
    z-index: 9999;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    min-width: 980px;
}

header ul,
header li {
    margin: 0;
    padding: 0;
    list-style: none;
}

header ul {
    width: 100%;
}

header #logo {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    margin-left: 5px;
    width: 315px;
}

header #logo img {
    width: 100%;
}

ul li a,
ul li a:visited {
    text-decoration: none;
    color: #003761;
}

nav a:hover {

}

header section {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 10px 0;
    height: 45px;
}

.tour header section {
	height: 65px;
}

header section ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
}

#secondary-nav {
    background: #003761;
    display: flex;
    justify-content: flex-end;
    padding: 0;
    height: 35px;
    align-items: center;
}

.tour #secondary-nav {
	height: 0;	
}

#secondary-nav li {
    padding: 0;
    display: flex;
    align-items: center;
    margin: 0 15px 0 0;
}

#secondary-nav li a {
    display: flex;
    height: 100%;
    flex-flow: row nowrap;
    font-size: 1.1em;
    margin-right: 10px;
    align-items: center;
    padding-left: 28px;
    background-size: auto 23px;
    background-position: left center;
    background-repeat: no-repeat;
    color: #fff;
}

#secondary-nav li:first-child {
    position: relative;
    margin: 0 10px 0 0;
}

#secondary-nav li:last-child {
    margin: 0;
}

#secondary-nav li:last-child a {
    margin-right: 15px;
}

#secondary-nav #search {
    background-image: url('https://cdn.cockyboys.com/images_v4/2308/icon-search-w.png');
}

header #search {
	display: flex;
	height: 100%;
	flex-flow: row nowrap;
	align-items: center;
	padding-left: 22px;
	background-size: auto 19px;
	background-position: left 13px;
	background-repeat: no-repeat;
	margin-left: 10px;
	background-image: url('https://cdn.cockyboys.com/images/260226-search1.png');
}

.darkmode header #search {
	background-image: url('https://cdn.cockyboys.com/images_v4/2308/icon-search-w.png');
}

#secondary-nav li a#darkmode {
    background-image: url('https://cdn.cockyboys.com/images_v4/2308/icon-dark-w.png');
}

header a#login {
    background-image: url('https://cdn.cockyboys.com/images_v4/2308/icon-login-w.png');
    height: 100%;
    font-size: 1.1em;
    margin-right: 10px;
    align-items: center;
    padding-left: 28px;
    background-size: auto 23px;
    background-position: left center;
    background-repeat: no-repeat;
	padding-right: 0;
}

header section a#login {
    background-image: url('https://cdn.cockyboys.com/images/260226-login1.png');
}

.darkmode header section a#login {
	color: #fff;
}

#secondary-nav li a#favorites {
    background-image: url('https://cdn.cockyboys.com/images_v4/2308/icon-heart-w.png');
}

#secondary-nav li a#support {
    background-image: url('https://cdn.cockyboys.com/images_v4/2308/icon-support-w.png');
}

#secondary-nav li a#logout {
    background-image: url('https://cdn.cockyboys.com/images_v4/2308/icon-logout-w.png');
}

#secondary-nav li a:hover {
    color: #4fcaff;
}

.darkmode header section #login:hover {
	background-image: url('https://cdn.cockyboys.com/images_v4/2308/icon-login-lb.png');
}

#secondary-nav li a#darkmode:hover,
header a#hover {
    background-image: url('https://cdn.cockyboys.com/images_v4/2308/icon-dark-lb.png');
}

header a#login:hover {
    background-image: url('https://cdn.cockyboys.com/images_v4/2308/icon-login-lb.png');
}

header section a#login:hover {
	color: #d6352c;
	background-image: url('https://cdn.cockyboys.com/images/260226-login2.png');
}

.darkmode header section a#login:hover {
	background-image: url('https://cdn.cockyboys.com/images_v4/2308/icon-login-lb.png');
}

#secondary-nav #search:hover {
    background-image: url('https://cdn.cockyboys.com/images_v4/2308/icon-search-lb.png');
}

header #search:hover {
	background-image: url('https://cdn.cockyboys.com/images/260226-search2.png');
}

.darkmode header #search:hover {
	background-image: url('https://dev.cockyboys.com/images_v4/2308/icon-search-lb.png');
}

#secondary-nav li a#favorites:hover {
    background-image: url('https://cdn.cockyboys.com/images_v4/2308/icon-heart-lb.png');
}

#secondary-nav li a#support:hover {
    background-image: url('https://cdn.cockyboys.com/images_v4/2308/icon-support-lb.png');
}

#secondary-nav li a#logout:hover {
    background-image: url('https://cdn.cockyboys.com/images_v4/2308/icon-logout-lb.png');
}

#secondary-nav input[type="text"] {
    background: url(/images_v4/2308/icon-search-w.png) 163px center no-repeat;
    border: 1px solid #fff;
    border-radius: 3px;
    font-size: 0.8em;
    padding: 5px 30px 5px 8px;
    width: 150px;
    background-size: auto 60%;
    margin-right: 20px;
    color: #fff;
    margin: 0 20px 0 0;
    height: auto;
}

header section nav {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}

header section nav ul {
    width: auto;
    margin-left: 10px;
    position: relative;
    font-size: 1.2em;
    font-weight: 800;
}

header nav ul li {
    text-wrap: nowrap;
    text-transform: uppercase;
}

nav ul li a,
header #login {
    padding: 10px 15px;
    display: block;
    color: #003761;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	text-transform: none;
}

header #login {
	background-image: url('https://cdn.cockyboys.com/images/260226-login1.png');
}

.darkmode header #login {
	background-image: url('https://cockyboys.com/images_v4/2308/icon-login-w.png');
}

nav ul li a:hover {
    border-bottom: 3px solid #d6352c;
    padding-bottom: 7px;
    color: #d6352c;
}

nav ul li a#cams {
    color: #d6352c;
}

nav ul li a#cams.blinking {
    color: #4fcaff;
}

.minimized #secondary-nav li a {
    background-size: auto 19px;
}

.minimized #searchform input[type="text"] {
    background-size: auto 28px;
}

header .join {
    color: #fff;
    padding: 8px 30px 9px;
    text-wrap: nowrap;
    border: 0;
    -o-border-radius: 14px;
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
    border-radius: 14px;
    margin-right: 10px;
    text-decoration: none;
    right: 0;
    font-size: 1.3em;
	-o-box-shadow: 0px 3px 7px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 3px 7px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.4);
    -o-text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    -moz-text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    -webkit-text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
	font-weight: 600 !important;
	/*background: #21b449;
    background: linear-gradient(0deg, rgba(32, 168, 68, 1) 0%, rgba(33, 180, 73, 1) 50%, rgba(36, 189, 77, 1) 100%);*/
	background: #4da2cf;
	background: transparent linear-gradient(180deg, #4da2cf 0%, #0e86be 40%, #0e86be 100%) 0% 0% no-repeat padding-box;
	margin-left: 7px;
}

header .join:hover {
	transform: scale(1.06);
}



#searchform {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
	position: relative;
}

#searchform input[type="text"]::placeholder {
	font-size: 21px;
    font-family: fancyFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
} 

#searchform input[type="text"] {
    width: 0;
    margin-right: 0;
    border: 0;
    -o-border-radius: 1px;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    height: 32px;
    background: url(https://cdn.cockyboys.com/images_v4/bgSearchBarBlack.png) 8px center no-repeat #fff;
    background-size: 30px;
    color: #2d2d2d;
    padding: 0 40px 0 48px;
    font-size: 21px;
    font-family: fancyFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

header section #searchform input[type="text"]::placeholder {
	font-size: 25px;
	display: none;
}

header section #searchform input[type="text"] {
	margin: 0;
	margin-left: 30px;
    position: relative;
    top: 3px;
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
    border-radius: 5px;
    height: 40px;
    padding-left: 45px;
    font-size: 25px;
	border: 1px solid #000;
	letter-spacing: -1px;
}

header section #searchform em {
	top: 13px;
}

#searchform input[type="text"]:focus {
    outline: none;
}

#searchform em {
    color: #2d2d2d;
    font-style: normal;
    font-size: 40px;
    right: 5px;
    cursor: pointer;
    position: absolute;
}

#searchform em:hover {
    color: #d6352c;
}  

.viewmore {
    text-align: center;
}

.viewmore .watchButton {
    margin: 0;
    font-size: 23px;
    padding: 15px 30px;
	-o-text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
    -webkit-text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
    -moz-text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.moviesPage h2.joinText {
	font-size: 36px;
	line-height: 50px;
	text-transform: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    border: 0;
    text-align: center;
    margin: 20px 0 20px;
	/*color: #003761;*/
	color: #a92720;
}

.moviesPage.darkmode h2.joinText {
	background: linear-gradient(180deg, #a3dcfb, #0e86be);
	/* background: linear-gradient(180deg, #57bef4, #0e86be); */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
}

@media (max-width: 1350px) {

    header section nav ul {
        font-size: 1em;
    }
    
    header .join {
        font-size: 1.1em;
    }
	
	header #logo {
		width: 275px;
	}
	
	nav ul li a {
		padding: 10px 12px;
	}
	
	header a#login {
		font-size: 1em;
	}

}

@media (max-width: 1180px) {
    
    #secondary-nav li a {
        font-size: 1em;
    }
    
    nav ul li a {
        padding: 10px;
    }
	
	header #logo {
        width: 245px;
    }
	
	header .join {
		padding: 5px 20px 6px;
	}

}

@media (max-width: 1090px) {
	
	#darkmode img {
		height: 20px !important;
	}
	
	header #logo {
        width: 205px;
    }
	
	header .join {
		font-size: 1em;
		margin-left: 0;
	}
	
	header .join {
		padding: 5px 15px 6px;
	}
	
	header a#login {
		background-size: auto 20px;
		padding-left: 23px;
	}
	
	nav ul li a {
		padding: 10px 7px;
	}
	
}

@media (max-width: 980px) {



}


/* autocomplete dropdown */

header ul.ui-menu {
	width: 599px;
	border: 0;
	background: #fff;
	font-family: 'Abel', sans-serif;
	padding-top: 15px;
	padding-bottom: 10px;
	color: #2d2d2d;
    z-index: 99999;
    -o-box-shadow: 0 5px 5px rgb(0,0,0,0.2);
    -moz-box-shadow: 0 5px 5px rgb(0,0,0,0.2);
    -webkit-box-shadow: 0 5px 5px rgb(0,0,0,0.2);
    box-shadow: 0 5px 5px rgb(0,0,0,0.2);
}
header li.ui-menu-item {
	list-style-type: none;
	display: block;
	font-size: 20px;
	float: none;
	padding-left: 70px !important;
}
header li.ui-state-focus {
	border: 0 !important;
	background: none !important;
	color: #1389A7 !important;
}

.ui-widget-content {
    width: 536px !important;
    z-index: 99999;
}

.ui-menu .ui-menu-item {
    width: 536px;
}

/* end autocomplete dropdown */


/********************************/
/****** End Navigation Menu *****/
/********************************/

#BL, #BR, #TL, #TR, #B, #L, #R {
	position: absolute;
	z-index: 7;
	width: 150px;
	height: 150px;
}
#BL {
	bottom: 6px;
	left: 0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.7+0,0+52 */
	background: -moz-linear-gradient(45deg,  rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 52%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 52%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 52%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#BR {
	bottom: 6px;
	right: 0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+50,0.7+100 */
	background: -moz-linear-gradient(-45deg,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.7) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b3000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	}
#TR {
	top: 0;
	right: 0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+50,0.7+100 */
	background: -moz-linear-gradient(45deg,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.7) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b3000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#TL {
	top: 0;
	left: 0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.7+0,0+52 */
	background: -moz-linear-gradient(-45deg,  rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 52%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 52%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 52%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#B {
	background: url(https://cockyboys.com/a4a/images/B.png) center bottom repeat-x;
	width: 100%;
	height: 111px;
	bottom: 6px;
	left: 0;
}
#R {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.5+62,0.7+100 */
	background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 62%, rgba(0,0,0,0.7) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 62%,rgba(0,0,0,0.7) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 62%,rgba(0,0,0,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b3000000',GradientType=1 ); /* IE6-9 */
	height: 100%;
	width: 111px;
	right: 0;
	top: -6px;
}
#L {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.7+0,0.5+27,0+96 */
	background: -moz-linear-gradient(left,  rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 27%, rgba(0,0,0,0) 96%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.5) 27%,rgba(0,0,0,0) 96%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.5) 27%,rgba(0,0,0,0) 96%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
	height: 100%;
	width: 111px;
	left: 0;
	top: -6px;
}
#featured div {
	width: 100%;
	left: 0;
	top: 0;
}
#featured .playButton {
	position: absolute;
	z-index: 7;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url(https://cockyboys.com/images_v3/white/featurePlay.png) center center no-repeat;
	opacity: 0;
	text-indent: -9000em;
}
#featured .mastBanner {
	width: 100%;
}
.titleDesc {
	padding-top: 10px;/*border-top: 1px solid #8C8C8C;*/
}
#featured span .titleDesc2 {
	font-family: 'Abel', sans-serif;
	font-size: 20px;
	padding-bottom: 10px;
	/*border-bottom: 1px solid #8C8C8C;*/
	text-align: justify;
	line-height: 21px;
}
#featured span .titleDesc3 {
	border-bottom: 0;
}
.watchButton, #navBar span#icons a.join {
	display: inline-block;
	padding: 10px 19px 10px 16px;
	color: #fff !important;
	/*background: #d6352c;*/
	font-family: 'Passion One', Gotham, Arial;
	font-size: 20px;
	-o-border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	margin: 20px 5px 0;
	position: relative;
	z-index: 8;
    letter-spacing: 0.5px;
	background: #4da2cf;
	background: transparent linear-gradient(180deg, #4da2cf 0%, #0e86be 40%, #0e86be 100%) 0% 0% no-repeat padding-box;
}
#navBar span#icons a.join {
	padding: 6px 25px 6px 23px;
	margin: 0 20px 0 0;
}
#navBar span#icons a i {
	margin-right: 3px;
}
.watchButton i {
	font-size: 19px;
	margin-right: 3px;
}

#featured p {
	position: absolute;
	z-index: 10;
	bottom: 0;
	text-align: center;
	width: 100%;
	padding: 10px 0;
	margin: 0;
}
#featured p img {
	width: 12px;
	margin: 0 10px;
}
#featured .arrowLeft, #featured .arrowRight {
	text-indent: -9000em;
	position: absolute;
	top: 50%;
	margin-top: -61px;
	background: url(https://cockyboys.com/images_v4/masthead-arrows.png) left center no-repeat;
	-o-background-size: auto 100%;
	-moz-background-size: auto 100%;
	-webkit-background-size: auto 100%;
	background-size: auto 100%;
	width: 32px;
	height: 122px;
	left: 25px;
	opacity: 0.5;
	z-index: 9;
}
#featured .arrowRight {
	background: url(https://cockyboys.com/images_v4/masthead-arrows.png) right center no-repeat;
	-o-background-size: auto 100%;
	-moz-background-size: auto 100%;
	-webkit-background-size: auto 100%;
	background-size: auto 100%;
	left: auto;
	right: 25px;
}
#featured .arrowLeft:hover, #featured .arrowRight:hover {
	opacity: 1;
}

/*****************************/
/***** NEW RELEASES AREA *****/
/*****************************/

.sceneList {
    display: flex;
    justify-content: space-around;
    flex-flow: row wrap;
    align-items: flex-start;
    margin: 20px 0;
}

.previewThumb {
    background-color: #fff;
    margin-bottom: 15px;
    width: 32%;
    position: relative;
    box-shadow: 0px 3px 3px rgb(0 0 0 / 20%);
    border-radius: 0 0 3px 3px;
    overflow: hidden;
}

.previewThumb .abso {
    position: absolute;
    z-index: 5;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-indent: -9000em;
    display: block;
    background: url(/images_v3/white/featurePlay.png) center center no-repeat;
    background-size: 20%;
    background-position-y: 37%;
    opacity: 0;
}

.previewsOff .previewThumb .abso:hover {
    opacity: 1;
}

.previewThumb .turnOn,
.previewThumb .turnOff {
    z-index: 6;
    position: absolute;
    right: 10px;
    top: 6px;
    color: #fff;
    text-align: right;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: flex-end;
}

.previewThumb .turnOn i,
.previewThumb .turnOff i {
    font-size: 30px;
    display: block;
}

.previewThumb .turnOn span,
.previewThumb .turnOff span {
    background: rgba(255,255,255,0.9);
    padding: 1px 6px;
    color: #000;
    display: block;
    margin-top: 3px;
    -o-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.previewThumb > div {
    position: relative;
    overflow: hidden;
    -o-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
}


.previewThumb img {
    width: 100%;
    border-radius: 3px 3px 0 0;
}

.previewThumb p span span img {
    width: auto;
}

.previewThumb div div {
    background: #fff;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.previewThumb video {
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 3;
    -o-box-shadow: 0 0 5px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.8);
    -webkit-box-shadow: 0 0 5px rgb(0 0 0 / 80%);
    box-shadow: 0 0 5px rgb(0 0 0 / 80%);
    width: 100%;
    border-radius: 3px 3px 0 0;
}

.previewThumb video.oldClip {
    left: 50%;
    transform: translatex(-50%);
    width: auto;
    height: 100%;
}

.previewThumb p {
    margin: 10px;
    line-height: 18px;
    font-weight: 900;
}

.previewThumb p > span {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.previewThumb p > span span:nth-child(2) {
    padding: 3px 7px 2px 5px;
    -o-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-size: 13px;
    display: flex;
    flex-flow: row-reverse nowrap;
    justify-content: flex-end;
}

.previewThumb p > span span:nth-child(2) img {
    margin-left: 2px;
    height:      20px;
}

.previewThumb p > span span:nth-child(2) em {
    font-size: 12px;
    margin: 0;
}

.previewThumb p span span i {
    margin-left: 1px;
    position: relative;
    top: -1px;
}

.previewThumb p strong {
    font-family: 'Montserrat', Impact, Charcoal, sans-serif;
    line-height: 18px;
    font-weight: 600;
    display: block;
}

.previewThumb p em {
    font-style: normal;
    display: inline-block;
    font-size: 14px;
    font-weight: 100;
    margin: 3px 0 6px;
}

@media only screen and (max-width: 1100px) {

    .previewThumb {
        width: 48%;
    }

}


/*********************************/
/***** END NEW RELEASES AREA *****/
/*********************************/

.quote {
	width: 100%;
	display: block;
	margin: 40px auto;
	max-width: 2000px;
	position: relative;
	min-width: 980px;
	max-height: 158px;
	min-height: 78px;
}
.quote div {
	position: absolute;
	left: 0;
	top: 0;
	text-align: center;
	display: none;
	width: 100%;
}
.quote img {
	width: 96%;
}
.horizontal.eleven {
    background: #fff;
    padding: 20px 0;
}
.sceneList.newReleases a, .horizontal .item a {
	color: #fff;
}


.newReleases .sceneTitle, .horizontal .item .sceneTitle {
	text-align: center;
	left: 0;
	bottom: 6px;
	position: absolute;
	text-decoration: none;
	z-index: 4;
	font-size: 18px;
	line-height: 24px;
	background: url(https://cockyboys.com/images_v4/gradientSceneThumb.png) center top repeat-x;
	-o-background-size: auto 100%;
	-moz-background-size: auto 100%;
	-webkit-background-size: auto 100%;
	background-size: auto 100%;
	width: 100%;
	padding: 15px 0 5px;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-style: normal;
}
.newReleases .sceneTitle strong, .horizontal .item .sceneTitle strong {
	border-bottom: 1px solid #c3c3c3;
	padding-bottom: 4px;
	display: block;
	margin: 0 10px 2px;
	text-align: left;
	line-height: 23px;
}
.horizontal .item .sceneTitle {
	background: rgba(0,0,0,0.4);
	padding: 2px 0 0;
	bottom: 0;
}
.horizontal .item .sceneTitle strong {
	padding: 6px 0 6px;
    border-bottom: none;
    font-weight: normal;
    line-height: 17px;
    font-size: 16px;
    word-spacing: -1px;
}
.newReleases .sceneTitle span, .horizontal .item .sceneTitle span {
	display: block;
	color: #FF6060;
	font-size: 13px;
	margin-left: 10px;
	float: left;
	text-shadow: 0px 0px 4px rgba(0,0,0,0.8);
}
.newReleases .sceneTitle span.extra, .horizontal .item .sceneTitle span.extra {
	color: #69C4E8;
}
.newReleases .sceneTitle span em, .horizontal .item .sceneTitle span em {
	font-style: normal;
	color: #fff;
	text-shadow: none;
}
.newReleases .sceneTitle img, .horizontal .item .sceneTitle img {
	width: auto;
	float: right;
	margin-right: 5px;
}
/*.newReleases .playArrow, .horizontal .item .playArrow, #masthead .playArrow {*/
.playArrow {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 5;
	left: 0;
	top: 0;
	background: url(https://cockyboys.com/images_v3/white/featurePlay.png) center 40% no-repeat;
	background-size: 20%;
	display: none;
	text-indent: -9000em;
}
.horizontal span.item .playArrow {
	background: url(https://cockyboys.com/images_v3/white/featurePlay.png) center center no-repeat;
	background-size: 100px;
}
#masthead .playArrow, .callBanner .playArrow {
	background-size: 140px;
    background-position: center center;
}
.horizontal {
	background: #ededed;
	padding: 20px 0 5px;
	position: relative;
	margin-top: 15px;
	text-align: center;
}

.darkmode .horizontal {
	margin-top: 0;
}

.horizontal .sceneTitle {
	bottom: 0;
	padding-top: 25px;
}
.horizontal .sceneTitle strong {
	border-bottom: 0;
}
.sectionTitle {
	font-size: 36px;
	line-height: 45px;
	margin: 25px 0 -5px 0;
	padding-left: 15px;
	border-left: 20px solid #d6352c;
	color: #003761;
}

.categoryPage .sectionTitle,
.modelPage.custom .sectionTitle,
.modelPage .sectionTitle {
	margin: 0;
}

h2.sectionTitle span, h1.sectionTitle span {
	display: block;
    font-weight: normal;
    font-family: 'Abel', sans-serif;
    font-size: 20px;
    line-height: 18px;
    color: #545454;
    text-indent: 2px;
}
.thumbHovered {
	width: 33%;
/*	border: 2px solid #fff;*/
/*	margin: 0px 0px -5px !important;*/
	z-index: 101;
	background-color: #000;
	box-shadow: 0 0 10px #000;
}
.oldie .thumbHovered {
	border: 15px solid #000;
	border-bottom: 10px solid #000;
}
.thumbHovered .sceneTitle {
	background: url(https://cockyboys.com/images_v4/gradientSceneThumbFull.png) center top repeat-x;
	padding-top: 40px;
	z-index: 10;
}
.thumbHovered a.thumb img {
	display: none;
}
.clearfix {
	clear: both;
}
.subHeader {
	text-align: right;
	border-left: 0;
	border-right: 20px solid #d6352c;
	padding-right: 10px;
	font-size: 28px;
	padding: 0 10px 0 0;
	margin: -20px 0;
	line-height: 30px;
}
#pagination {
	text-align: center;
	margin: 50px 0;
	font-family: fancyFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#pagination a {
	display: inline-block;
	padding: 15px 25px;
	/*background-color: #1389A7;*/
	background: #5AABD5;
	margin: 0 -2px;
	font-size: 36px;
	color: #fff;
}
#pagination .prevArrow, #pagination .nextArrow {
	border-radius: 10px 0 0 10px;
}
#pagination .nextArrow {
	border-radius: 0;
	border-radius: 0 10px 10px 0;
}
#pagination .active {
	background: #f00;
	cursor: default;
}
#pagination .active.two {
	-o-border-radius: 10px 0 0 10px;
	-moz-border-radius: 10px 0 0 10px;
	-webkit-border-radius: 10px 0 0 10px;
	border-radius: 10px 0 0 10px;
}

/* First and last pagination elements always get rounded corners,
   regardless of which page is active */
#pagination a:first-child {
	border-radius: 10px 0 0 10px;
}
#pagination a:last-child {
	border-radius: 0 10px 10px 0;
}
#pagination a:hover {
	background-color: #f00;
}
.bottomSection {
	border-top: 1px solid #f00;
	text-align: center;
	margin: 100px auto 50px;
	padding-bottom: 10px;
	width: 95%;
}
h4 {
	color: #003761;
	text-transform: uppercase;
	display: inline-block;
	margin: 0;
	text-align: center;
	padding: 0 15px;
	top: -10px;
	background: #ededed;
	position: relative;
}
.owl-carousel, .owl-carousel img {
	width: 100%;
}
.owlLeft, .owlRight {
	height: 90%;
    display: flex;
	align-items: center;
	justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 70px;
    text-align: center;
    font-size: 140px;
	line-height: 140px;
    background: none;
	margin-top: 0;
	opacity: 0.8;
	color: #fff;
}
.owlRight {
	left: auto;
	right: 0;
}
.owlLeft:hover, .owlRight:hover {
	opacity: 1;
	color: #fff;
}

.owlLeft:visited,
.owlRight:visited {
	color: #fff;
}

.owl-theme .owl-controls .owl-buttons div {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 80px;
	margin: 0;
	padding: 0;
	-o-border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	background: #fff;
}
.owl-theme .owl-controls .owl-buttons div.owl-next {
	left: auto;
	right: 0;
}
.owl-theme .owl-controls .owl-buttons div {
	filter: Alpha(Opacity=40);
	opacity: 0.4;
}
.horizontal.newReleases div {
	width: auto;
	display: block;
	margin: 5px;
}
/* ********** MOVIE PAGE ********** */
.moviesPage {
	background: #e4eaec;
}
.moviesPage h1, .moviesPage h2 {
	color: #003761;
}

.moviesPage .horizontal.alsolike {
    background: none;
}

.moviesPage #wrapper {
    padding-bottom: 0;
}

#movieHeader {
	margin: 40px 0 10px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding-right: 10px;
    background: #e4eaec;
}

.darkmode #movieHeader {
    background: #1a1a2e;
}

/* Gallery/scene page only: header floats left beside the signup iframe */
.moviesPage #movieHeader {
    float:     left;
    max-width: 65%;
}

.darkmode .moviesPage #movieHeader {
	background: #000;
}

@media (max-width: 767px) {
	.moviesPage #movieHeader {
		float: none;
		margin-top: 0;
		width: 100%;
		max-width: none;
	}
}

/*#movieHeader h1 {
	margin: 10px 0 10px;
	font-size: 50px;
	border-left: 70px solid #d6352c;
	line-height: 40px;
}*/
#movieHeader h2 {
	margin: -15px 0 0;
    border-left: 70px solid #d6352c;
    padding-left: 15px;
    font-size: 22px;
    line-height: 21px;
}

#movieHeader #downloadBox {
	position: fixed;
	width: 400px;
	height: 200px;
	bottom: 20px;
	right: 20px;
	background: #fff;
	display: block;
	z-index: 1000;
	padding: 40px;
	font-family: 'Abel', sans-serif;
	text-align: left;
	-o-box-shadow: 0 0 6px rgba(0,0,0,0.6);
	-moz-box-shadow: 0 0 6px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 0 6px rgba(0,0,0,0.6);
	box-shadow: 0 0 6px rgba(0,0,0,0.6);
}
#movieHeader #downloadBox span {
	position: absolute;
	right: 10px;
	top: 10px;
	cursor: pointer;
	font-size: 40px;
}
#movieHeader #downloadBox em {
	font-style: normal;
}
#movieHeader #downloadBox a {
	display: block;
	text-align: center;
	background: #003765;
	color: #fff;
	padding: 10px 0;
	margin-top: 10px;
}
#movieHeader #downloadBox em.gothamy {
	display: block;
	font-size: 40px;
	text-transform: uppercase;
	margin-bottom: 10px;
	color: #003761;
	border-bottom: 1px solid #a9a9a9;
	padding-bottom: 15px;
}
#movieHeader .right p.two {
	font-size: 45px;
	margin: 15px 5px -10px 0;
	line-height: 48px;
}
#movieHeader .right p.two a:hover {
	color: #f00;
}
#movieHeader select {
	border: 0;
	width: 250px;
	height: 40px;
	font-size: 13px;
	margin-left: 10px;
	position: relative;
	top: -2px;
	margin-top: 5px;
}
.moviesPage p a, .dvdPage p a {
	color: #003765;
}
.moviesPage p a:visited, .dvdPage p a:visited {
	color: #003765;
}
.moviesPage p a:hover {
	color: #003765;
}
.movieLeft, .movieRight {
	width: 47%;
}
.movieLeft {
	float: left;
}
.movieLeft p {
	margin: 10px 25px;
}
.movieRight {
	float: right;
	margin-right: 40px;
	padding-top: 25px;
}
.movieModels { text-align: left; }

@media (max-width: 767px) {
	.movieModels {
		width: 100%;
		margin: 40px 0 0 0 !important;
	}
}

/* Models flex grid — 2 per row on all viewports */
.movieModels__grid {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
}
.movieModels__grid span {
    flex:       0 0 calc(50% - 4px);
    box-sizing: border-box;
    min-width:  0;
}
.movieModels__grid img { width: 100%; display: block; }
.movieModels img {
	width: 100%;
}
.moviesPage h2 {
	padding-left: 10px;
    text-transform: uppercase;
    padding: 5px 0 0 10px;
    margin: 0 0 10px;
    font-size: 34px;
    line-height: 35px;
    border-left: 10px solid #f00;
    font-family: 'Abel', sans-serif;
}

/* ── Unified section title scale — sitewide ──────────────────────────────
 * Single rule covers h1 and h2 wherever .sectionTitle is used.
 * Derived from index page reference: 37.7px at 1217px viewport.
 * ─────────────────────────────────────────────────────────────────────── */
h1.sectionTitle,
h2.sectionTitle {
    font-size:   clamp(1.3rem, 3.1vw, 2.5rem);
    /* 20.8px @ 390px  →  37.7px @ 1217px  →  40px @ 1290px+ */
    font-family: 'Abel', sans-serif;
    font-weight: 400;
    line-height: 1.15;
}
.movieLeft div, p#comments {
	margin: 20px 25px;
    padding-bottom: 15px;
    font-size: 22px;
    color: #5A5A5A;
    line-height: 27px;
}

@media (max-width: 767px) {
	.movieLeft div {
		margin: 20px 10px 0;
		padding-bottom: 0
	}
}

p#comments {
	margin: 30px 0 0;
	text-align: justify;
}
.moreComments:hover {
	text-decoration: underline;
}
.movieDesc {
	border-bottom: 1px solid #a9a9a9;
	overflow: hidden;
}

.movieLeft .pho {
	padding-top: 26px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
	margin: 0;
	margin-left: 10px;
	padding-bottom: 0;
}

.sampleimage {
	width: 45%;
	height: auto;
	margin-bottom: 8px;
    
}
.sampleimage img {
	width: 100%;
	border: 1px solid lightgrey!important;
}

.movieDVDs {
	overflow: hidden;
	width: 100%;
	margin: 70px auto;
	padding: 20px 0;
	background: #fff;
}
.moviesPage .movieDVDs {
	margin-top: 10px;
}
.movieDVDs img {
	float: left;
	padding-left: 20px;
}
.movieDVDs div {
	margin: 5px 0 0 375px;
	padding-right: 20px;
}
.movieDVDs p.gothamy, .movieDVDs h1.gothamy {
	font-size: clamp(1.3rem, 3.1vw, 2.5rem);
	line-height: 1.15;
	text-transform: uppercase;
	margin: 20px 0;
	color: #003761;
}
.movieDVDs .buyLink {
	display: inline-block;
	padding: 0 20px;
	margin: 30px 10px 0 0;
	border-right: 1px solid #a9a9a9;
	border-left: 1px solid #a9a9a9;
	text-transform: uppercase;
	font-size: 20px;
	position: relative;
	top: -12px;
}
.movieDVDs .buyLink:hover {
	color: #f00;
}
.movieDVDs em {
	text-transform: uppercase;
	font-style: normal;
	border-left: 20px solid #f00;
	padding-left: 7px;
	color: #404040;
	margin-top: 10px;
	display: block;
	font-size: 19px;
}
.ratings img {
	margin-right: 6px;
	position: relative;
	top: 3px;
}
.movie_wrapper {
	background: #000;
	margin: 0;
	padding: 20px 0;
}
.underPlayer {
	height: 100px;
	width: 100%;
	text-align: center;
	border-top: 1px solid #a9a9a9;
	border-bottom: 1px solid #a9a9a9;
	margin-bottom: 20px;
	white-space: nowrap;
}
.underPlayer a.container, .underPlayer div {
	display: inline-block;
	border-left: 1px solid #a9a9a9;
	width: 100px;
	height: 100px;
	position: relative;
	margin-right: -9px;
	white-space: normal;
}
.underPlayer span.gothamy {
	font-size: 12px;
	position: absolute;
	bottom: 8px;
	width: 100px;
	left: -3px;
	color: #262626;
	text-transform: uppercase;
	line-height: 12px;
}
.underPlayer img {
	position: absolute;
	left: 50%;
	top: 18px;
	width: 60px;
	margin-left: -30px;
}
.underPlayer p.gothamy {
	position: absolute;
	left: -2px;
	top: 32px;
	width: 100px;
	font-size: 60px;
	margin: 0;
}
.underPlayer #info {
	text-align: left;
	padding-left: 20px;
	width: 440px;
	font-family: fancyFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.underPlayer #info p {
	margin: 0 10px 0 0;
	position: absolute;
	bottom: 17px;
	line-height: 17px;
	font-size: 18px;
}
.tour .underPlayer #info p {
	bottom: auto;
	top: 6px;
}
.underPlayer #info span {
	display: block;
	margin-top: 2px;
}
.underPlayer .fa { 
	font-size: 59px;
    position: absolute;
    top: 14px;
    left: 21px;
    color: #262626;
}
.underPlayer .favorite i, .underPlayer .favorited i {
	left: 20px;
    font-size: 55px;
    top: 15px;
}
.underPlayer .iconImages i, .underPlayer .iconScreen i {
	font-size: 51px;
    left: 19px;
    top: 19px;
}
.underPlayer .iconMore i {
	font-size: 52px;
    left: 20px;
    top: 16px;
}
.underPlayer .favorited i {
	color: #f00;
}
.underPlayer .fa:hover {
	color: #f00;
}
#comments span {
	display: block;
	margin: 0 0 20px;
	border-bottom: 1px dashed #a9a9a9;
	padding-bottom: 30px;
	text-align: justify;
}
#comments span strong {
	display: block;
	margin: 0 0 10px;
	text-transform: uppercase;
	color: #003761;
}
#comments span em {
	font-style: normal;
	margin: 0 0 0 15px;
}
.leaveComment {
	border-bottom: 1px solid #a9a9a9;
	margin-bottom: 25px;
	padding-bottom: 10px;
}

@media (max-width: 767px) {
	.leaveComment {
		margin-top: 40px;
	}
}

input[type="text"], textarea, .leaveComment #displayName, select, input[type="password"] {
	border: 0;
	height: 30px;
	width: 96%;
	margin: 20px 0 0;
	padding: 5px 15px;
	font-size: 15px;
	color: #484848;
	background: #fff;
}
.leaveComment #displayName {
	padding-top: 10px;
	cursor: default;
	font-size: 20px;
}
.leaveComment textarea {
	height: auto;
	padding-top: 10px;
}
input[type="submit"], .leaveComment a.gothamy {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;  
	background: #003761;
	color: #fff;
	height: 50px;
	font-size: 35px;
	padding: 5px 0;
	margin: 10px auto 20px;
	display: block;
	cursor: pointer;
	width: 100%;
	border: 0;
}
.leaveComment input[type="submit"]:hover, .leaveComment a.gothamy:hover {
	-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
	-o-box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
	box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}
.leaveComment a.gothamy {
	text-align: center;
	padding: 20px 0;
	height: auto;
}
#commentGuide, #javascript, #preventDownloads {
	background: rgba(0,0,0,0.6);
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
}
#commentGuide div, #javascript div, #preventDownloads div {
	position: fixed;
	top: 10px;
	left: 50%;
	background: #fff;
	width: 740px;
	height: 90%;
	margin-left: -400px;
	padding: 10px 30px;
	color: #000;
	overflow-y: scroll; 
	-o-box-shadow: 0 0 4px rgba(0,0,0,0.4);
	-moz-box-shadow: 0 0 4px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4);
	box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
#javascript div {
	height: 530px;
	top: 50%;
	margin-top: -300px;
}
#commentGuide h3, #javascript h3,#preventDownloads h3 {
	text-transform: uppercase;
    font-size: 55px;
    line-height: 46px;
    color: #003761;
    margin-top: 10px;
    border-bottom: 2px solid #e3e3e3;
    padding-bottom: 15px;
    margin-bottom: -5px;
}
#commentGuide .fa-comments-o, #javascript .fa-exclamation-triangle, #preventDownloads .fa-cloud-download {
	float: left;
    font-size: 130px;
    position: relative;
    margin: -27px 15px 0 -5px;
}
#preventDownloads .fa-cloud-download {
	top: 10px;
}
#commentGuide strong, #javascript strong, #preventDownloads strong {
	display: block;
	color: #FF2828;
}
#commentGuide p i, #javascript p i, #preventDownloads p i {
	color: #003761;
    font-size: 26px;
    margin-right: 3px;
    position: relative;
    top: 4px;
	cursor: pointer;
}
#commentGuide p, #javascript p, #preventDownloads p {
	font-size: 17px;
    clear: both;
    line-height: 24px;
    margin: 15px 0;
}
#javascript p {
	margin: 25px 0;
}
#commentGuide span.clicked {
	background: #f00;
	border: 2px solid #003761;
}
#commentGuide a, #javascript a {
	display: block;
	background: #FF2828;
	text-align: center;
	padding: 10px 0;
	color: #fff;
	text-transform: uppercase;
	font-size: 30px;
}
#commentGuide .close, #preventDownloads .close {
	position: absolute;
    top: 0;
    right: 7px;
    font-size: 50px;
    background: transparent;
    color: #000;
    margin: 0;
    padding: 0;
}
#javascript a {
	margin-bottom: 20px;
}
#commentGuide p a:hover, #javascript a:hover {
	-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
	-o-box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
	box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}
#commentGuide p.gothamy em, #javascript p.gothamy em {
	color: #003761;
	text-transform: uppercase;
	font-style: normal;
	font-size: 21px;
}
#javascript .fa-exclamation-triangle {
	font-size: 110px;
	margin-top: -7px;
}
.photo_gallery_block {
	text-align: center;
	margin: 30px auto;
	width: 80%;
	clear: both;
	padding-top: 20px;
}
.photo_gallery_block img {
	width: 19%;
	height: auto;
}

@media (max-width: 767px) {
	.photo_gallery_block img {
		width: 100%;
	}
}

.cell {
	width: 24%;
	display: inline-block;
}
/* Rating Stars and Text CSS */
.rating_box {
	display: inline-block !important;
}
.rating_box span {
	margin-right: 2px;
	display: inline-block !important;
}
.rating_voteable {
	vertical-align: top;
	display: inline-block;
	width: 16px;
	height: 16px;
	padding: 0px;
	background-size: 100%;
	cursor: pointer;
}
.rating_nonvoteable {
	display: inline-block;
	width: 30px;
	height: 30px;
	padding: 0px;
	background-size: 100%;
}
.rating_empty {
	background-image: url("/images_v4/iconRatingEmpty.png");
	display: inline-block;
}
.rating_voted {
	background-image: url("/images_v4/iconRating.png");
	display: inline-block;
}
.rating_half {
	background-image: url("/images_v4/iconRatingHalf.png");
	display: inline-block;
}
.rating_unrated {
	background-image: url("/images_v4/iconRating.png");
	display: inline-block;
}
#preLoad {
	display: none;
}

@media screen and (max-width: 600px) {
	/* Font sizes handled by fluid clamp() scale — no overrides needed here */
	.underPlayer #info p {
		font-size: 0.9rem;
		line-height: 1.4;
	}
}
/*iframe signup styles*/

.movieRight {
	margin-right: 0px;
}
.movieRight iframe {
	width: 100%;
	min-height: 1400px;
	overflow: hidden;
	border: none;
}

@media only screen and (max-width: 980px) {
	.movieLeft {
		width: 100vw;
		float: none;
	}
	.movieRight {
		width: 100vw;
		float: none;
	}
	.movieRight iframe {
		width: 100%;
		min-height: 1000px;
	}
}
@media only screen and (max-width: 400px) {
	.movieLeft {
		width: 100%;
	}
	.movieRight {
		width: 100%;
	}
}

/****** SINGLE DVD PAGE *******/
/* Peter's Styles */
.featuresNavContainer {
	position: relative;
	display: block;
	text-align: center;
	padding: 5px 0;
	background: #121212;
	margin: -6px 0 0;
}
.dvdPage .featuresNavContainer a {
	position: relative;
	display: inline-block;
	border-right: 1px solid #313131;
	text-transform: uppercase;
	padding: 20px 0;
    width: 19%;
	font-size: 25px;
	color: #0077a1;
}
.featuresNavContainer a:hover {
	color: #00AAE6;
}
#featuresNavLinkLast {
	border-right: none;
}
h2.featureFilm {
	display: inline;
	font-weight: normal;
	margin-top: 5px;
	margin-bottom: 10px;
	font-size: 2.5em;
	color: #003761;
	text-transform: uppercase;
	line-height: auto;
}
.infoContent p {
	padding-top: 2.5%;
	padding-bottom: 2.5%;
}
h3.infoContentTitle {
	color: #9e9e9e;
	font-weight: normal;
}
.infoDVD {
	position: relative;
	display: block;
	width: 375px;
	float: left;
	padding-right: 2.5%;
}
.castPhotosContainer {
	margin-top: 2%;
	display: block;
	position: relative;
	text-align: center;
}
.castPhotos {
	width: 175px;
	margin-right: 0;
}
.episodesDiv {
	padding: 1% 2.5% 2.5% 2.5%;
	display: block;
	position: relative;
	height: auto;
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
img.episodeContainer {
	display: block;
	position: relative;
	float: left;
	margin: 0 15px 15px 0;
}
.featuresComments {
	display: block;
	position: relative;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	margin: 0;
	width: 100%;
	background-color: #FFF;
	height: auto;
}
h1.commentsHeader {
	font-weight: normal;
	padding-top: 2.5%;
	padding-left: 2.5%;
	letter-spacing: -0.025em;
	padding-bottom: 0.5em;
}
body.dvdPage .commentImg {
	display: block;
	position: relative;
	float: left;
	margin: 5px 10px 0 5px;
	padding: 0 2px 10px 0;
	width: 95px;
}
body.dvdPage .commentContainer {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	margin-top: -0.5em;
	background-color: #FFF;
}
body.dvdPage .commentContainer > .commentDiv {
	position: relative;
	display: block;
	padding-right: 2.5%;
	padding-left: 2.5%;
	margin: 0;
	width: 78%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 3em;
}
body.dvdPage .commentContainer .commentDiv > p {
	padding-bottom: 0;
	margin-bottom: 0;
}
body.dvdPage p.commentUser {
	width: 100%;
	display: block;
	position: relative;
	font-weight: 200;
	color: #0077a1;
	font-weight: medium;
	text-transform: uppercase;
	font-size: 1.35em;
	padding-top: 5px;
}
/* End Peter's Styles */
/* My Styles */
.dvdPage #masthead img {
	width: 100%;
}
.dvdPage .movieDVDs {
	margin: 20px 0;
	position: relative;
}
.dvdPage .movieDVDs p {
	margin: 10px 0;
	color: #5a5a5a;
}
.movieDVDs p {
	font-size: 19px;
    line-height: 30px;
	color: #5a5a5a;
	margin-top: -7px;
}
.dvdPage .ratingDisplay {
	margin: 5px;
}
.dvdPage .ratingDisplay img, .modelPage .ratingDisplay img {
	margin: 0 3px 0 0;
}
.featuresNavContainer.two {
	border-bottom: 1px solid #313131;
    position: relative;
    z-index: 5;
    padding-bottom: 0;
	border-top: 1px solid #313131;
}
.featuresNavContainer.two span, .featuresNavContainer.two a {
	color: #808080;
	font-size: 18px;
	border: 0;
	text-transform: uppercase;
	padding: 10px 40px;
	display: inline-block;
}
.featuresNavContainer.two a:hover {
	color: #f00;
}
.featuresNavContainer.two a:visited {
	color: #808080;
}
.dvdPage .rating_box {
	padding: 0 !important;
	position: relative;
    top: 3px;
}
.dvdPage .rating_box span {
	padding: 0;
}
.dvdPage .featuresNavContainer .favorite, .dvdPage .featuresNavContainer .favorited {
	background: url(http://bigdickboys.com/images_v4/iconFavoriteGrey.png) left 12px no-repeat transparent;
    background-size: 24px;
	padding-left: 30px !important;
	width: auto;
	margin-left: 20px;
}
.dvdPage .featuresNavContainer .favorited, .dvdPage .featuresNavContainer .favorite:hover {
	background: url(http://bigdickboys.com/images_v4/iconFavoriteRed.png) left 12px no-repeat transparent;
    background-size: 24px;
}
.dvdPage .movieDVDs .buyLink {
	margin: 0;
}
.dvdPage .movieDVDs .episodes {
	margin-left: 20px;
}
.dvdPage .awards {
	text-align: center;
	display: block;
	margin: 20px 0 10px;
}
.dvdPage .awards i {
	display: inline-block;
	margin: 0 20px 20px;
	width: 150px;
	background: url(https://cockyboys.com/images_v4/awardLaurels.gif) center center no-repeat;
	background-size: 100% 100%;
	padding: 10px 0;
	text-align: center;
	color: #717171;
	font-style: normal;
}
.dvdPage .awards strong {
	display: block;
    font-size: 17px;
    text-transform: uppercase;
	line-height: 14px;
}
.dvdPage .awards i i {
	display: block;
    font-size: 19px;
	line-height: 16px;
	margin: 0;
	padding: 0;
	width: auto;
	height: auto;
	background: none;
	font-family: fancyFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.dvdPage a.watchButton, .dvdPage a.watchButton.two, .modelPage a.watchButton, .modelPage a.watchButton.two {
    margin: 20px 20px 0 0;
}
.dvdPage .scene a.watchButton, .modelPage .scene a.watchButton {
	margin: 20px 20px 20px 0;
}
.movieDVDs p.blurb {
	font-size: 30px;
	color: #404040;
	margin: 0 0 10px;
	font-family: 'Abel', sans-serif;
}

#tabCast {
	text-align: center;
	margin: 40px 0;
}
#tabCast img {
	width: 100%;
}
#tabCast div {
	position: relative;
	display: inline-block;
	width: 24%;
}
a.name {
	position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    width: 90%;
	margin: 0 5%;
    color: #fff;
    text-transform: uppercase;
    font-size: 50px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding: 20px 0;
	display: none;
	z-index: 5;
	-o-text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	-moz-text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	-webkit-text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	line-height: 40px;
}
.categories a.name {
	display: block;
}
.categories a.fade {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

/* Hover: image brightens from 0.6 → 1.0 on desktop pointer devices */
@media (hover: hover) {
    .categories#tabCast div:hover a.fade {
        opacity: 1;
    }
}
#quotes {
    margin: 20px auto;
    text-align: justify;
    clear: left;
}
h2.subHeadline {
	font-size: 50px;
    border-left: 10px solid #f00;
    line-height: 50px;
    padding-left: 10px;
	margin: 20px 0 0 0;
	color: #003761;
}
#quotes p {
    font-size: 22px;
    line-height: 32px;
    width: 75%;
    margin: 20px auto 40px;
    border-bottom: 1px dashed #cecece;
    border: 3px solid #75A9D2;
	-o-border-radius: 30px;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
    border-radius: 30px;
    padding: 40px 30px;
	position: relative;
	color: #585858;
}
#quotes span {
    display: block;
    text-align: right;
    margin: 60px 170px 60px 0;
    color: #003761;
    font-size: 40px;
}
#quotes p strong {
	text-transform: uppercase;
	color: #585858;
}
#quotes .fa-quote-left, #quotes .fa-quote-right {
	font-size: 20px;
    margin: 0px 10px 0 0;
    position: relative;
    top: -5px;
}
#quotes p img {
	height: 36px;
    position: absolute;
    right: 150px;
    bottom: -34px;
}
.ratingDisplay {
	width: 165px;
    overflow: hidden;
    display: block;
    text-align: left;
	margin: 0 0 20px;
}
.dvdPage #tabOverview .ratingDisplay img {
	width: auto;
	float: right;
	padding-left: 0;
	height: 25px;
	margin-right: 5px;
}
.listing {
	width: 100%;
	margin: 0 0 50px;
}
.newReleases.listing div {
	margin: 0 0 20px;
	padding: 0;
}
.newReleases.listing .playArrow {
	background-size: 150px;
    background-position: 50% 50%;
}
.listing img {
	width: 100%;
}
.listing p.featuresNavContainer .watchButton {
	margin: 10px 30px;
    color: #fff;
    padding: 10px 30px 10px 50px;
    width: auto;
    background-position: 17px;
    font-size: 21px;
}
.listing p.featuresNavContainer span {
	font-size: 25px;
    position: relative;
    top: 5px;
}
#dvdComments {
	width: 100%;
    background: #e4eaec;
    padding: 10px 0 50px;
	margin: 20px auto -100px;
}
#dvdComments .leaveComment {
	width: 65%;
	margin: 0 auto;
}

@media (max-width: 1023px) {
    #dvdComments .leaveComment {
        width: 95%;
    }
}
#dvdComments .leaveComment input[type=submit] {
	width: 80%;
}
#dvdComments h3, #dvdComments p {
	width: 65%;
	margin: 20px auto 40px;
}

#dvdComments h3 {
	width: 60%;
}

@media (max-width: 767px) {
    #dvdComments h3, #dvdComments p {
        width: 95%;
    }
}
#dvdComments h3, #dvdComments h2 {
	font-size: 30px;
    border-left: 10px solid #f00;
    line-height: 30px;
    padding-left: 10px;
    color: #003761;
    text-transform: uppercase;
}

/****** END SINGLE DVD PAGE *******/
.topModels span.item {
	width: 95%;
}
.horizontal .item {
	margin: 0 5px;
	position: relative;
	display: inline-block;
}
/* PETER'S FOOTER STYLES */
div#footerFoot {
    width: 100%;
    /*background-color:#222;*/
    text-align: left;
	position: relative;
	z-index: 1000;
	background: #0e86be;
	background: transparent linear-gradient(180deg, #4da2cf 0%, #0e86be 40%, #0e86be 100%) 0% 0% no-repeat padding-box;
	-o-text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
	-moz-text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
	-webkit-text-shadow: 1px 1px 1px rgba(0,0,0,0.4);;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
	display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
	padding: 10px 0;
}
.footerLogo {
    width: 105px;
    display: block;
    position: relative;
    vertical-align: middle;
    margin-left: 10px;
}
#footerFoot span {
    display: block;
    color: #faf7f7;
    text-align: right;
    line-height: 1.4em;
    position: relative;
    font-weight:400;
    font-family:'Montserrat', 'Gotham', 'Arial', sans-serif;
    text-transform:uppercase;
    font-size:0.50em;
	margin-right: 20px;
	white-space: nowrap;
}

#footerFoot span a {
    color:#faf7f7;
    text-decoration:none;
}
#footerFoot p 
{   color: #faf7f7;
    font-family:'Montserrat', 'Gotham Bold', 'Arial', sans-serif;
    text-transform:uppercase;
    font-weight:400;
    font-size:0.55em;
    display: inline-block;
    margin-left: 15px;
}
#footerFoot ul {
	display: inline-block;
	width: 100%;
}

#footerFoot ul li, #footerFoot ul li a {
    font-family:'Montserrat', 'Gotham Bold', 'Arial', sans-serif;
    font-weight:400;
    float:none;
    text-decoration: none;
    display: inline-block;
    padding: 0 0 0 12px;;
    color: #fff;
    text-transform:uppercase;
    background-color: transparent;
    text-align: center;
    vertical-align:middle;
	font-size: 11px;
}

#footerFoot ul li a:hover {
	/*color: #1389A7;*/
    text-decoration: underline;
}
/* END PETER'S FOOTER STYLES */
#footerContainer {
	background: #fff;
}
a.watchButton:visited, span.watchButton:visited {
	background-color: #d6352c;
	color: #fff !important;
}
a.watchButton:hover, span.watchButton:hover, .newReleases .watchButton:hover, #navBar span#icons a.join:hover {
	background-color: #1389A7;
	color: #fff !important;
}
/* START MODELS PAGES */
/* Models listing page #movieHeader — same layout as category page */
.modelPage #movieHeader {
    display:         flex;
    flex-flow:       row nowrap;
    align-items:     center;
    justify-content: space-between;
    float:           none;
    max-width:       100%;
    width:           100%;
    margin:          0;
    padding:         40px 0;
    box-sizing:      border-box;
}
/* .modelPage #movieHeader h1 {
	font-size: 90px;
    line-height: 75px;
} */
.modelPage #movieHeader .right {
	margin-right: 20px;
}
.modelPage #movieHeader .right {
	
}
.modelPage #movieHeader em {
	border-left: 70px solid #f00;
    padding-left: 20px;
    padding-top: 7px;
    margin-top: -10px;
    display: block;
    font-size: 27px;
}
.modelPage #movieHeader em a {
	margin-right: 10px;
}
.modelPage #movieHeader em a:hover {
	color: #f00;
}
.modelPage #tabCast {
	margin-top: 10px;
}

.modelPage #tabCast .c2a-mobile-banner {
	margin-bottom: 10px;
}

.modelAZ {
    margin-bottom: 10px;
}

.modelAZ strong, .sortBy strong {
	display: block;
}

.modelAZ a {
	display: inline-block;
	margin: 0 3px;
}

.sortBy a {
	display: inline-block;
	margin-right: 20px;
}

.modelAZ a:hover, .sortBy a:hover {
	color: #f00;
}

.modelAZ .letter_current, .sortBy .sort_link_current a {
	color: #f00;
}

/* =============================================================
   Category page — .category body class
   ============================================================= */

/* Header row: title left, Sort By right.
   Overrides gallery-page #movieHeader which has max-width:65% and float:left. */
.categoryPage #movieHeader,
.modelPage.custom #movieHeader {
    display:        flex;
    flex-flow:      row nowrap;
    align-items:    center;
    justify-content: space-between;
    float:          none;
    max-width:      100%;
    width:          100%;
    margin:         0;
    padding:        40px 0;
    box-sizing:     border-box;
}

@media (max-width: 767px) {
    .custom #movieHeader {
        padding-bottom: 25px !important;
    }
}

/* Scene list: remove the negative margin used on members gallery page */
.categoryPage .sceneList.newReleases {
    margin-bottom: 0;
}

.modelPage .fa-quote-right, .modelPage .fa-quote-left {
	font-size: 11px;
    position: relative;
    top: -6px;
    margin: 0 -3px;
}

#modelInfo {
	width: 35%;
	display: inline-block;
	margin-bottom: 40px;
	float: left;
}
#modelStuff h2, #modelStuff h3, .custom h3 {
    margin: 10px 0 5px 10px;
    font-size: 34px;
    line-height: 35px;
    color: #003761;
    border-left: 5px solid #f00;
    padding-left: 7px;
}
#modelStuff h3 {
	margin: 25px 0 -10px 10px;
}
#modelStuff p img {
	margin-right: 2px;
}
#modelStuff p {
	margin: 0 10px;
    color: #5a5a5a;
    text-align: justify;
    font-size: 18px;
    line-height: 28px;
}
#modelInfo .thumb {
	width: 100%;
}
#modelStuff {
	width: 63%;
	display: inline-block;
	margin-left: 10px;
	padding-top: 10px;
}
.modelPage #dvdComments {
	clear: left;
	margin-bottom: -100px;
}
.owl-theme .owl-controls .owl-buttons div {
	overflow: hidden;
}
.modelPage #movieHeader .icons a {
	display: inline-block;
    position: relative;
    width: 100px;
    height: 70px;
    text-align: center;
	font-size: 14px;
	color: #003761;
	line-height: 14px;
	border-right: 1px solid #d0d0d0;
}
.modelPage #movieHeader .icons a:hover {
	color: #f00;
}
.modelPage #movieHeader .icons a svg {
	position: absolute;
    width: 36px;
    height: 36px;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
}
.modelPage #movieHeader .icons span {
	position: absolute;
    bottom: 10px;
    display: block;
    width: 100%;
    left: 0;
    text-align: center;
}
.modelPage .newReleases div.scene,
.dvdPage .newReleases div.scene {
	margin-top: 5px;
	padding: 50px 0 30px;
}

.dvdPage .newReleases div.scene:nth-child(odd) {
    background-color: #e4eaec;
}

.modelPage .newReleases div.scene:first-child {
    padding-top: 20px;
}

.dvdPage .newReleases div.scene:first-child {
    padding-top: 50px;
}

.modelPage .newReleases div.scene .previewThumb,
.dvdPage .newReleases div.scene .previewThumb {
    float: left;
    margin: 0 20px 20px 10px;
}

.modelPage .newReleases div.scene .gothamy,
.dvdPage .newReleases div.scene .gothamy {
    margin: 10px 0 0;
}

.modelPage .newReleases div.scene .gothamy a,
.dvdPage .newReleases div.scene .gothamy a {
    color: #003761;
    font-size: 35px;
}

.modelPage .newReleases div.scene p.info,
.dvdPage .newReleases div.scene p.info {
    font-size: 18px;
    line-height: 28px;
    margin: 10px;
}

.modelPage .newReleases div.scene p.info a,
.dvdPage .newReleases div.scene p.info a {
    color: #003761;
}

.owl-carousel.model .owl-wrapper-outer {
	height: 600px;
}
.modelPage .ratingDisplay {
	margin: 5px 0 0;
}
#offers {
	margin-top: 40px;
}
#offers a {
	display: block;
    width: 80%;
    margin: 20px auto;	
}
#offers a img {
	width: 100%;
}
.previewThumb .fav, .thumbHovered .fav {
	position: absolute;
    top: 0;
    left: 0;
	padding: 10px;
    font-size: 25px;
	color: #fff;
	-o-text-shadow: 0 0 2px rgba(0,0,0,0.8);
	-moz-text-shadow: 0 0 2px rgba(0,0,0,0.8);
	-webkit-text-shadow: 0 0 2px rgba(0,0,0,0.8);
	text-shadow: 0 0 2px rgba(0,0,0,0.8);
	z-index: 100;
}
.previewThumb .fav:hover, .thumbHovered .fav {
	color: #f00;
}
.previewThumb .fav span, .thumbHovered .fav span {
	display: inline-block;
    margin-left: 10px;
    font-size: 15px;
    position: relative;
    top: -4px;
	color: #fff !important;
}
.categories#tabCast {
	text-align: center;
}
.categories#tabCast div {
	width: 49%;
}

/* Mobile: 1/row — must come after the base 49% rule to win the cascade */
@media (max-width: 767px) {
    .categories#tabCast div {
        width: 96%;
    }
}
/* who we are page */
.custom #masthead img {
	width: 100%;
}
#support h1 {
	font-weight: normal;
    text-align: center;
    font-size: 30px;
    color: #003761;
    margin: 0;
    border-bottom: 1px solid #e3e3e3;
    padding: 10px 0;
}


#footerContainer {
	background: #fff;
}
a.watchButton:visited, span.watchButton:visited {
	background-color: #d6352c;
	color: #fff !important;
}
a.watchButton:hover, span.watchButton:hover, .newReleases .watchButton:hover, #navBar span#icons a.join:hover {
	background-color: #1389A7;
	color: #fff !important;
}
/* START MODELS PAGES */
/* Models listing page #movieHeader — same layout as category page */
.modelPage #movieHeader {
    display:         flex;
    flex-flow:       row nowrap;
    align-items:     center;
    justify-content: space-between;
    float:           none;
    max-width:       100%;
    width:           100%;
    margin:          0;
    padding:         40px 0;
    box-sizing:      border-box;
}
/* .modelPage #movieHeader h1 {
	font-size: 90px;
    line-height: 75px;
} */
.modelPage #movieHeader .right {
	margin-right: 20px;
}
.modelPage #movieHeader .right {
	
}
.modelPage #movieHeader em {
	border-left: 70px solid #f00;
    padding-left: 20px;
    padding-top: 7px;
    margin-top: -10px;
    display: block;
    font-size: 27px;
}
.modelPage #movieHeader em a {
	margin-right: 10px;
}
.modelPage #movieHeader em a:hover {
	color: #f00;
}
.modelPage #tabCast {
	margin-top: 10px;
}

.modelPage #tabCast .c2a-mobile-banner {
	margin-bottom: 10px;
}

.modelAZ {
    margin-bottom: 10px;
}

.modelAZ strong, .sortBy strong {
	display: block;
}

.modelAZ a {
	display: inline-block;
	margin: 0 3px;
}

.sortBy a {
	display: inline-block;
	margin-right: 20px;
}

.modelAZ a:hover, .sortBy a:hover {
	color: #f00;
}

.modelAZ .letter_current, .sortBy .sort_link_current a {
	color: #f00;
}

/* =============================================================
   Category page — .category body class
   ============================================================= */

/* Header row: title left, Sort By right.
   Overrides gallery-page #movieHeader which has max-width:65% and float:left. */
.categoryPage #movieHeader,
.modelPage.custom #movieHeader {
    display:        flex;
    flex-flow:      row nowrap;
    align-items:    center;
    justify-content: space-between;
    float:          none;
    max-width:      100%;
    width:          100%;
    margin:         0;
    padding:        40px 0;
    box-sizing:     border-box;
}

@media (max-width: 767px) {
    .custom #movieHeader {
        padding-bottom: 25px !important;
    }
}

/* Scene list: remove the negative margin used on members gallery page */
.categoryPage .sceneList.newReleases {
    margin-bottom: 0;
}

.modelPage .fa-quote-right, .modelPage .fa-quote-left {
	font-size: 11px;
    position: relative;
    top: -6px;
    margin: 0 -3px;
}

#modelInfo {
	width: 35%;
	display: inline-block;
	margin-bottom: 40px;
	float: left;
}
#modelStuff h2, #modelStuff h3, .custom h3 {
    margin: 10px 0 5px 10px;
    font-size: 34px;
    line-height: 35px;
    color: #003761;
    border-left: 5px solid #f00;
    padding-left: 7px;
}
#modelStuff h3 {
	margin: 25px 0 -10px 10px;
}
#modelStuff p img {
	margin-right: 2px;
}
#modelStuff p {
	margin: 0 10px;
    color: #5a5a5a;
    text-align: justify;
    font-size: 18px;
    line-height: 28px;
}
#modelInfo .thumb {
	width: 100%;
}
#modelStuff {
	width: 63%;
	display: inline-block;
	margin-left: 10px;
	padding-top: 10px;
}
.modelPage #dvdComments {
	clear: left;
	margin-bottom: -100px;
}
.owl-theme .owl-controls .owl-buttons div {
	overflow: hidden;
}
.modelPage #movieHeader .icons a {
	display: inline-block;
    position: relative;
    width: 100px;
    height: 70px;
    text-align: center;
	font-size: 14px;
	color: #003761;
	line-height: 14px;
	border-right: 1px solid #d0d0d0;
}
.modelPage #movieHeader .icons a:hover {
	color: #f00;
}

.darkmode .modelPage #movieHeader .icons a {
    color: #fff;
    border-color: #444;
}
.modelPage #movieHeader .icons a svg {
	position: absolute;
    width: 36px;
    height: 36px;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
}
.modelPage #movieHeader .icons span {
	position: absolute;
    bottom: 10px;
    display: block;
    width: 100%;
    left: 0;
    text-align: center;
}
.modelPage .newReleases div.scene,
.dvdPage .newReleases div.scene {
	margin-top: 5px;
	padding: 50px 0 30px;
}

.dvdPage .newReleases div.scene:nth-child(odd) {
    background-color: #e4eaec;
}

.modelPage .newReleases div.scene:first-child {
    padding-top: 20px;
}

.dvdPage .newReleases div.scene:first-child {
    padding-top: 50px;
}

.modelPage .newReleases div.scene .previewThumb,
.dvdPage .newReleases div.scene .previewThumb {
    float: left;
    margin: 0 20px 20px 10px;
}

.modelPage .newReleases div.scene .gothamy,
.dvdPage .newReleases div.scene .gothamy {
    margin: 10px 0 0;
}

.modelPage .newReleases div.scene .gothamy a,
.dvdPage .newReleases div.scene .gothamy a {
    color: #003761;
    font-size: 35px;
}

.modelPage .newReleases div.scene p.info,
.dvdPage .newReleases div.scene p.info {
    font-size: 18px;
    line-height: 28px;
    margin: 10px;
}

.modelPage .newReleases div.scene p.info a,
.dvdPage .newReleases div.scene p.info a {
    color: #003761;
}

.owl-carousel.model .owl-wrapper-outer {
	height: 600px;
}
.modelPage .ratingDisplay {
	margin: 5px 0 0;
}
#offers {
	margin-top: 40px;
}
#offers a {
	display: block;
    width: 80%;
    margin: 20px auto;	
}
#offers a img {
	width: 100%;
}
.previewThumb .fav, .thumbHovered .fav {
	position: absolute;
    top: 0;
    left: 0;
	padding: 10px;
    font-size: 25px;
	color: #fff;
	-o-text-shadow: 0 0 2px rgba(0,0,0,0.8);
	-moz-text-shadow: 0 0 2px rgba(0,0,0,0.8);
	-webkit-text-shadow: 0 0 2px rgba(0,0,0,0.8);
	text-shadow: 0 0 2px rgba(0,0,0,0.8);
	z-index: 100;
}
.previewThumb .fav:hover, .thumbHovered .fav {
	color: #f00;
}
.previewThumb .fav span, .thumbHovered .fav span {
	display: inline-block;
    margin-left: 10px;
    font-size: 15px;
    position: relative;
    top: -4px;
	color: #fff !important;
}
.categories#tabCast {
	text-align: center;
}
.categories#tabCast div {
	width: 49%;
}

/* Mobile: 1/row — must come after the base 49% rule to win the cascade */
@media (max-width: 767px) {
    .categories#tabCast div {
        width: 96%;
    }
}
/* who we are page */
.custom #masthead img {
	width: 100%;
}

#support h1 {
	font-weight: normal;
    text-align: center;
    font-size: 30px;
    color: #003761;
    margin: 0;
    border-bottom: 1px solid #e3e3e3;
    padding: 10px 0;
}

#support {
	margin-top: -60px;
}

#support div {
	width: 80%;
	padding: 20px 10% 80px;
	margin: 0;
}
#support div.blue {
	background: #e4eaec;
}
#support div h2 {
	font-size: 45px;
	line-height: 70px;
    color: #003761;
    margin: 10px 0;
}
#support div h2 a {
	font-family: 'Abel', sans-serif;
    font-size: 19px;
    text-transform: none;
    display: block;
    font-weight: normal;
    font-style: italic;
    margin: 10px 0 0 80px;
    position: relative;
    top: -10px;
}
#support div#password h2 a {
	margin-left: 65px;
}
#detail p {
	font-size: 20px;
    background: #e4eaec;
    margin: 20px 0px 0 auto;
    padding: 20px 20px;
    color: #5d5d5d;
    width: 95%;
}
#detail .fa-heart {
	color: #f00;
    display: inline-block;
    margin-left: 20px;
}
#detail p em {
	text-transform: uppercase;
    font-style: normal;
	font-size: 24px;
}
#detail strong {
	text-transform: uppercase;
    display: inline-block;
    margin-right: 20px;
}
#detail p span {
	font-style: italic;
	font-size: 16px;
	text-transform: none;
}
#support .contact {
	border: 1px solid #cecece;
    padding: 0px 20px;
	-o-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
    border-radius: 10px;
}
#support .contact:hover {
	border: 1px solid #f00;
}
#support label {
	height: 30px;
    display: inline-block;
    width: 16%;
    font-size: 22px;
    text-align: right;
    margin-right: 2%;
}
#support input, #support textarea, #support select {
	width: 70%;
}
#support p {
	position: relative;
}
#support em {
	color: #f00;
}
#support select {
	height: 45px;
    width: 73%;
}
#support textarea {
	height: 200px;
}
#support input[type="submit"] {
	width: 85%;
    height: 70px;
    text-transform: uppercase;
}
#support label.error {
    color: #f00;
    font-style: italic;
    font-size: 15px;
    position: absolute;
    bottom: -20px;
    left: 0;
}
#support #iconSupport {
	width: 100%;
    text-align: center;
    margin: 0;
    padding: 20px 0;
}
#iconSupport div, #iconSupport a {
	width: 20%;
    display: inline-block;
    padding: 0;
    margin: 20px 1%;
	position: relative;
	height: 240px;
}
#iconSupport i {
	font-size: 90px;
    top: 0;
    display: block;
    text-align: center;
    width: 100%;
    color: #003761;
}
#support p {
	position: relative;
}
#iconSupport p {
	position: absolute;
    top: 110px;
	color: #717171;
	text-align: center;
	width: 100%;
}
#iconSupport strong {
	color: #003761;
	display: block;
	font-size: 20px;
}
#support h3 {
	color: #098ad6;
    font-size: 30px;
    margin: 30px 0 10px 0;
}
#help p {
    font-size: 17px;
    text-align: justify;
    line-height: 25px;
}
#help strong {
	color: #098ad6;
}
#help a {
	text-decoration: underline;
}
#help a:hover, #detail a:hover {
	color: #f00;
	text-decoration: none;
}
#support .fa-external-link {
    font-size: 10px;
    display: inline-block;
    position: relative;
    bottom: 3px;
    margin: 0 7px;
	text-align: center;
}
#support #join {
	background: #1da1f2;
	color: #fff;
	text-align: center;
}
#support #join h2 {
	color: #fff;
}
#support #join h3 {
	color: #fff;
}
#support #join a {
	display: inline-block;
    color: #fff;
    border: 2px solid #fff;
    padding: 20px 30px;
    margin: 15px;
    font-size: 20px;
    text-transform: uppercase;
	-o-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
    border-radius: 3px;
}
.grow {
	-o-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.grow:hover {
	transform: scale(1.1);
}
#lotsOfCopy p {
	margin: 50px;
    font-size: 21px;
    line-height: 30px;
}
/************ START FOOTER ***********/
#footer {
	background-color: white; 
	position: relative;
	-o-box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
    box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
	max-width: 1920px;
	margin: 0 auto;
	padding: 70px 0 0;
}

.darkmode #footer {

}

#footer #footerContainer {
    display: flex;
    flex-flow: row nowrap;
}

#footer #socialShare {
    padding: 15px 0 0;
    text-align: center;
}

#footer h4 {
    text-transform: none;
    /*font-size: 29px;*/
    margin: 20px 0 0;
    display: block;
    background: transparent;
    /*line-height: 38px;*/
    padding-left: 10px;
	text-align: center;
	/*color: #003761;*/
	color: #a92720;
	font-family: 'Open Sans',sans-serif;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -1px;
	font-weight: 400;
}

#footer #sendy h4 {
	font-weight: 600;
}

#footer #sendy h4 i {
	font-style: normal;
	font-weight: 400;
	font-size: 23px;
	color: #000;
	display: block;
	margin-top: 10px;
}

.darkmode #footer #sendy h4 i {
	color: #fff;
}

#footer h4 span {
	font-size: 18px;
    display: block;
    line-height: 20px;
    text-transform: none;
    font-weight: normal;
    color: #262626;
	width: 50%;
    margin: 0 auto 25px;
}
/*#footer #iconSupport {
	padding: 40px 0 20px;
	background: #e4eaec;
	margin-top: -10px;
}
#footer #iconSupport p {
	color: #000;
	font-size: 17px;
	position: static;
}
#footer #iconSupport a {
	margin: 10px 1%;
	vertical-align: top;
	height: auto;
}
$footer #iconSupport i {
	position: static;
	font-size: 70px;
}*/
#footer #press {
	background: #fff;
	padding: 0;
	display: inline-block;
	width: 33%;
	margin: 0px 2% 10px;
}
#footer #press div {
	width: 95%;
	margin-top: 35px;
}

#sendy {
	width: 33%;
	margin: 30px;
}

#sendy form {
	margin-top: 10px;
	text-align: center;
}

#sendy label[for="email"] {
	font-size: 20px;	
}

#sendy #email {
    border-radius: 4px;
    font-size: 18px;
    margin-left: 10px;
    padding: 5px 8px;
    width: 180px;
	border: 1px solid #000;
}

#sendy #email:focus {
	outline: none;
}

#sendy #submit {
	background: #4da2cf;
    background: transparent linear-gradient(180deg, #004a81 0%, #004a81 40%, #0b2940 100%) 0% 0% no-repeat padding-box;
	/*background: #feeeb8;
    background: transparent linear-gradient(180deg, #feeeb8 0%, #b5884f 40%, #b5884f 100%) 0% 0% no-repeat padding-box;*/
	-o-border-radius: 14px;
	-moz-border-radius: 14px;
	-webkit-border-radius: 14px;
	border-radius: 14px;
	padding: 10px 30px;
	font-size: 1.3em;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
	font-weight: 600;
	margin-top: 25px;
	width: 280px;
	height: auto;
}

.newsTicker {
    overflow: hidden;
    width: 100%;
    text-align: center;
}

.darkmode .newsTicker {
	background: transparent linear-gradient(180deg, #4da2cf 0%, #0e86be 40%, #0e86be 100%) 0% 0% no-repeat padding-box;
}

.newsTicker p {
	font: normal normal 300 16px/16px Oswald;
	text-transform: none;
	white-space: nowrap;
	margin: 5px 15px 35px 0;
	font-weight: 400;
}

.darkmode .newsTicker p {
	color: #fff;
	-o-text-shadow: 2px 1px 4px rgba(0,0,0,0.6);
	-moz-text-shadow: 2px 1px 4px rgba(0,0,0,0.6);
	-webkit-text-shadow: 2px 1px 4px rgba(0,0,0,0.6);
	text-shadow: 2px 1px 4px rgba(0,0,0,0.6);
	margin: 25px 15px 25px 0;
}

.newsTicker p span {
	/*color: #D6352A;*/
	color: #a92720;
	padding: 0 5px;
}

#siteblurb {
	font-size: 16px;
    text-align: center;
    width: 90%;
    margin: 20px auto;
    line-height: 23px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}

#siteblurb a {
	color: #003761;
	text-decoration: underline;
}

#footerSupport {
	background: white;
	padding-top: 0px;
	text-align: center;
	padding-bottom: 0px;
	display: inline-block;
	width: 33%;
	margin: 30px 2% 0;
}
#footerSupport div {
	display: block;
	width: 100%;
	text-align: center;
}
#footerSupport div div {
	width: auto;
	margin: 16px 0;
	vertical-align: top;
	text-align: center;
}
#footerSupport div div a {
	color: #404040;
}
#footerSupport div div i {
	font-size: 25px;
	display: inline-block;
	margin-right: 5px;
	width: 40px;
	height:25px;
	text-align: center;
}
#footerSupport div div strong {
	display: inline-block;
	text-align: left;
	font-size: 20px;
	margin-bottom: 5px;
	font-weight: normal;
}
#footerSupport div div a:hover {
	color: #f00;
}
#footerSupport div div em {
	text-align: left;
    display: block;
    font-size: 16px;
    line-height: 20px;
	color: #262626;
}
#footerSupport #footerNewsletter {
	width: 40%;
}
.scrollTop {
	position: absolute;
    top: -52px;
    left: 50%;
    display: block;
    font-size: 65px;
    color: #003761;
    width: 120px;
    text-align: center;
	margin-left: -60px;
}
.scrollTop:visited {
	color: #003761;
}
.scrollTop:hover {
	color: #f00;
}
.scrollTop i {
    display: block;
    font-size: 40px;
    position: relative;
    margin-top: -54px;
    top: 36px;
}
.scrollTop span {
	position: absolute;
    right: 0;
    font-size: 16px;
    top: 13px;
    display: block;
    width: 100%;
}
#scrollToMe {
	display: block;
}
#social {
	text-align: center;
    font-size: 30px;
    padding: 0 0 10px;
}
#social a:hover {
	color: #f00;
}

#footerManifesto {
	display: inline-block;
	width: 33%;
	font-size: 12px;
	margin: 30px 2% 10px;
	line-height: 1em;
}
.manifestoItem {
	width: 100%;
	height: auto;
	text-align: center;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 2em !important;
	line-height: 1.4em !important;
	font-family: cursive;
	margin: 0;
}
.slideBox {
	text-align: center;
	width: 100%;
}

divta.cycle-next:hover {
	filter: saturate(200%)
}

.animated  {
  animation-duration : 2000 ms  ;
}
/************ END FOOTER ***********/

/********** Feature Films Page **********/

div.featureFilms {
    gap: 0px 10px;
    display: flex;
    flex-flow: row wrap;
}

div.featureFilms div {
    width: 20vw;
    margin: 0;
    flex-grow: 1;
}

div.featureFilms div img {
    max-height: 100%;
    min-width: 100%;
    object-fit: contain;
    vertical-align: bottom;
}

div.featureFilms div.banner {
    width: 100vw;
}

div.featureFilms div.box {
    max-width: 50vw;
}

.global_pagination ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: stretch;
}

.global_pagination li {
    font-size: 36px;
    background: #5AABD5;
    font-family: fancyFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.global_pagination li:hover,
.global_pagination li.active {
    background: #f00;
}

.global_pagination li a {
    color: white !important;
    padding: 15px 25px;
}

/********** End Feature Films Page *******/

.bottom {
	background: #fff;
	padding-top: 1px;
    margin-top: 50px;
    padding-bottom: 90px;
	margin-bottom: -100px;
}

@media (max-width: 767px) {
	.bottom {
		margin-top: 30px;	
	}
}

.empty {
	color: #003761;
	width: 33%;
	margin: 60px auto 230px;
	text-align: center;
}
.empty i {
	font-size: 170px;
}
.empty p {
	font-size: 28px;
    line-height: 34px;
	margin-top: 0;
}
#advancedSearch {
	width: 100%;
    margin: -10px auto;
    background: #e4eaec;
    padding: 40px 0 200px;
}
#advancedSearch form {
	width: 85%;
	margin: 0 auto;
}
#advancedSearch p {
	display: inline-block;
    width: 25%;
    text-align: right;
    margin: 0 1% 0 0;
    font-size: 21px;
	position: relative;
}
#advancedSearch em {
	display: block;
    margin: 40px auto 20px;
    text-align: center;
    font-size: 16px;
}
#advancedSearch em span {
	display: inline-block;
    width: 80px;
    border-bottom: 1px solid #B5B4B4;
    margin: 0 10px;
    position: relative;
    top: -4px;
}
#advancedSearch p span {
	font-size: 14px;
    position: absolute;
    display: block;
    right: 0;
    top: 18px;
    font-style: italic;
    color: #565656;
}
#advancedSearch .hasSpan {
	top: -7px;
}
#advancedSearch .center {
	width: 100%;
	text-align: left;
}
#advancedSearch .center select {
	margin-left: 10px;
}
#advancedSearch input[type="text"] {
	width: 68%;
}
#advancedSearch input[type="submit"] {
	width: 60%;
    height: 65px;
}
#checkboxes p {
    width: 30%;
    text-align: left;
    margin: 10px 0;
	cursor: pointer;
}
#checkboxes p i {
	margin: 0 10px 0;
}
#checkboxes p .fa-square {
	color: #fff;
}
#checkboxes p .fa-check-square-o {
	color: #f00;
}
#checkboxes input[type="checkbox"] {
	display: none;
}
/********** PRESS PAGE **********/
#press {
	text-align: center;
    margin-top: 30px;
}
#press div {
	width: 28%;
	display: inline-block;
	margin: 10px 2% 60px;
	vertical-align: top;
}
#press div .logo {
    margin-bottom: 10px;
	height: 56px;
	width: auto;
}
#press div .screenshot {
	border: 2px solid #cecece;
    width: 93%;
    padding: 10px;
}
#press p {
	font-size: 20px;
    line-height: 32px;
    color: #4E4E4E;
	margin: 20px 0;
	min-height: auto;
}
#press p i {
	font-size: 20px;
	color: #cecece;
	margin: 1px;
}
#press strong {
	display: block;
}

/* Tablet: 2/row */
@media (min-width: 768px) and (max-width: 1023px) {
    #press div {
        width: 44%;
    }
}

/* Mobile: 1/row */
@media (max-width: 767px) {
    #press div {
        width: 94%;
        margin-left: auto;
        margin-right: auto;
    }
}
.download{
	width: 250px;
    height: 40px;
    display: inline-block;
	font-family: 'Abel', sans-serif;
	font-weight: normal;
	position: relative;
	margin-left: 10px;
	margin-top: 5px;
}
.download span {
	width: 250px;
    height: 40px;
    text-align: left;
    background: #fff;
    line-height: 40px;
    text-indent: 10px;
	cursor: default;
}
.download span.first {
	display: inline-block;
    background: url(https://cockyboys.com/images_v4/bgSelect.gif) 235px center no-repeat #fff;
    background-size: auto 106%;
	-o-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
.download span.more {
	display: none;
    position: absolute;
    bottom: -37px;
    left: 0;
}
.download a {
	display: block;
    background: #fff;
    position: relative;
    z-index: 1001;
    color: #000 !important;
    padding: 5px 0;
    height: auto;
    line-height: 24px;
	cursor: pointer;
}
.download a:hover {
	background: #1389a7;
	color: #fff;
}
#modelForm {
	background: #e4eaec;
    margin: -15px 0 -190px;
    padding: 40px 0;
}
#modelForm form {
	width: 80%;
    margin: 0 auto;
	padding-bottom: 150px;
}
#modelForm label {
	font-size: 22px;
}
#modelForm input[type="text"] {
	margin: 10px 0 15px;
}
#modelForm label em {
	font-style: normal;
	color: #f00;
}
#modelForm label.ui-button {
	background: #fff;
    color: #262626;
    font-size: 15px;
    margin: 10px -5px 0 0;
    font-style: normal;
}
#modelForm label.ui-button span {
	font-style: normal;
}
#modelForm label.ui-state-active {
	background: #003761;
    color: #fff;
}
#modelForm input[type="file"] {
	margin: 20px 0 0;
}
#modelForm label span {
	font-size: 15px;
    font-style: italic;
}
#modelForm .error {
	color: #f00;
    font-style: italic;
    font-size: 18px;
}
#modelForm input[type="submit"] {
	margin: 50px auto;
    width: 80%;
    display: block;
    text-align: center;
}

.fa-caret-down {
	font-size: 13px;
	margin-left: -2px;
}
.mobile .playArrow, .mobile .loadingGif {
	display: none !important;
}
body #fancybox-thumbs ul li {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	opacity: 0.5;
}
body #fancybox-thumbs ul li.active {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	opacity: 1;
}

.movieDesc a {
	color: #003761;
}
.movieDesc a:visited {
	color: #003761;
}
.movieDesc a:hover {
	text-decoration: underline;
}
/********** TOUR STYLE OVERRIDES **********/
.tour .underPlayer {
	border-top: 0;
}
.underPlayer.join {
	margin-bottom: 0;
    border: 0;
    font-size: 20px;
    height: auto;
    padding: 10px 0;
    background: #1389A7;
    color: #fff;
	white-space: normal;
	width: 100%;
}
.underPlayer.join p {
	margin: 0;
	-o-text-shadow: 0px 2px 4px rgba(0,0,0,0.2);
    -moz-text-shadow: 0px 2px 4px rgba(0,0,0,0.2);
    -webkit-text-shadow: 0px 2px 4px rgba(0,0,0,0.2);
    text-shadow: 0px 2px 4px rgba(0,0,0,0.2);
	line-height: 28px;
}
.underPlayer.join .watchButton {
	margin: 0 0 0 30px;
}
.underPlayer.join .watchButton:hover {
	-o-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	background: #d6352c;
}
.underPlayer.join .watchButton .fa {
	font-size: inherit;
	position: static;
	color: #fff;
}
#password, .iframe {
	background: #f1f1f1;
}
.iframe {
	min-width: inherit;
}
#password iframe {
	width: 100%;
	height: 275px;
}
#support.iframe .error {
	color: #f00;
    font-style: italic;
    text-align: center;
    font-size: 20px;
    margin: 0;
}
#support.iframe form {
	width: 700px;
	margin: 0 auto;
}
#support.iframe.success p {
	font-size: 24px;
	line-height: 28px;
}
.iframe input[type="submit"] {
	margin-top: 40px;
}
div.call2action {
	width: 99%;
	margin: -10px auto 20px;
	position: relative;
}
#featured.call2action span {
	top: 0;
	height: 99%;
	width: 34%;
	position: absolute;
	padding-left: 40px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.74+49,0.4+77,0+100 */

background: -moz-linear-gradient(left,  rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.74) 49%, rgba(0,0,0,0.4) 77%, rgba(0,0,0,0) 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(left,  rgba(0,0,0,0.74) 0%,rgba(0,0,0,0.74) 49%,rgba(0,0,0,0.4) 77%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to right,  rgba(0,0,0,0.74) 0%,rgba(0,0,0,0.74) 49%,rgba(0,0,0,0.4) 77%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bd000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
display: block;
text-align: center;

}

#featured.call2action span a {
	display: block;
}
.moviesPage div.call2action {
	margin: 0;
	height: 100%;
	width: 100%;
}

.moviesPage div.call2action video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.moviesPage #featured.call2action span {
	position: absolute; 
	right: 0;
	display: flex;
    flex-flow: column nowrap;
    padding: 0;
    height: 100%;
    width: 50%;
	align-items: flex-start;
    justify-content: center;
    text-align: left;
	background: linear-gradient(to left,  rgba(0,0,0,0.74) 0%,rgba(0,0,0,0.74) 74%,rgba(0,0,0,0.4) 89%,rgba(0,0,0,0) 100%);
}

.moviesPage #featured.two span .title {
	margin-top: 0;
}

.moviesPage #featured.two span .title img:first-child {
	width: 90%;
	display: block;
	margin-bottom: 40px;
}

.moviesPage #featured.two span .title img:last-child {
	width: 95%;
}







.call2action video {
	width: 100%;
}
.call2action video img {
	width: 100%;
}

/* Mobile CTA banner — shown on mobile only */
.c2a-mobile-banner               { display: none; }
.c2a-mobile-banner > a > img     { width: 100%; display: block; }

.c2a-mobile-banner__body {
    display:          none; /* shown only in mobile breakpoint */
    background:       #003761;
    padding:          20px;
    text-align:       center;
}

.c2a-mobile-banner__logo {
    display:          block;
    margin:           0 auto 12px;
    max-width:        240px;
}

.c2a-mobile-banner__logo img {
    width:   100%;
    display: block;
    margin:  0 auto 8px;
}

.c2a-mobile-banner__headline {
    font-family: 'Abel', sans-serif;
    font-size:   1.3rem;
    color:       #fff;
    margin:      0 0 14px;
}

.c2a-mobile-banner__bullets {
    list-style:  none;
    padding:     0;
    margin:      0 0 18px;
    text-align:  left;
    display:     inline-block;
}

.c2a-mobile-banner__bullets li {
    color:       #e0e0e0;
    font-size:   0.95rem;
    padding:     3px 0 3px 18px;
    position:    relative;
}

.c2a-mobile-banner__bullets li::before {
    content:     '✓';
    position:    absolute;
    left:        0;
    color:       #5aadd6;
}

.c2a-mobile-banner .watchButton {
    display:     inline-block;
    margin-top:  4px;
}

@media (max-width: 767px) {
    #featured.call2action.one,
    #featured.call2action.two   { display: none !important; }
    .c2a-mobile-banner          { display: block; }
    .c2a-mobile-banner__body    { display: block; }
}
#featured.two span .title {
	margin-top: 7%;
}
#featured.two span {
	padding-left: 60px;
}
#featured.three span a {
	position: relative;
	right: -70px;
}
.call2action .playArrow {
	background-size: 10%;
}
#featured.three span.left a {
	right: auto;
	left: -60px;
}
.trailerMessage {
	position: absolute;
    left: 20px;
    top: 40px;
    font-size: 50px;
    display: block;
    line-height: 43px;
    text-transform: uppercase;
    text-align: center;
	color: #fff !important;
}
.trailerMessage i {
	display: block;
    font-size: 140px;
    margin-bottom: 20px;
	/*color: #5AABD5;*/
}
#featured .watchButton {
	background: #1389A7;
	margin: 60px auto 10px;
	font-size: 22px;
    padding: 10px 35px;
}

@media (hover: hover) {
	#featured .watchButton:hover {
		background: #d6352c;
	}
}
#featured.two .watchButton {
	margin-top: 30px;
}
/* CTA banner button — matches header "Become a Member" style, no vendor prefixes */
#featured.call2action a.watchButton {
    display:       inline-block;
    background:    linear-gradient(180deg, #4da2cf 0%, #0e86be 40%, #0e86be 100%);
    color:         #fff;
    font-family:   'Abel', sans-serif;
    font-size:     1.3em;
    font-weight:   600;
    border-radius: 14px;
    padding:       8px 30px 9px;
    letter-spacing: 0.5px;
    box-shadow:    0px 3px 7px rgba(0,0,0,0.4);
    text-shadow:   1px 1px 3px rgba(0,0,0,0.3);
    white-space:   nowrap;
    margin-top:    8%;
}

@media (hover: hover) {
    #featured.call2action a.watchButton:hover {
        background: linear-gradient(180deg, #4da2cf 0%, #0e86be 40%, #0e86be 100%);
        transform: scale(1.04);
    }
}

@media (max-width: 767px) {
    #featured.call2action a.watchButton {
        font-size:  1rem;
        margin-top: 5px;
        padding:    8px 24px;
    }
}
#featured .login {
	color: #fff;
	display: block;
}
#featured .login:hover {
	text-decoration: underline;
}
#tabCast div.call2action {
	width: 97%;
	margin: 0 auto -20px;
}
.callBanner {
	margin: -10px auto 20px;
	position: relative;
	width: 99%;
}
.callBanner.two {
	margin: 15px auto -40px;
}
.moviesPage .callBanner.two {
	margin: -15px auto -20px;
}
.callBanner img {
	width: 100%;	
}
.callBanner a.one {
	position: absolute;
	left: 0;
	top: 3%;
	width: 43%;
	text-align: center;
}
.callBanner a.one img {
	width: 90%;
}
.callBanner a.one img.two {
	margin: 5% 0 0 12%;
}
.callBanner img.three {
	position: absolute;
    right: 10px;
    bottom: 12px;
	width: 16%;
}
img.c2a { 
	width: 100%;
}
.callBanner .watchButton {
	font-style: normal;
	font-size: 35px;
    padding: 15px 26px;
	margin-left: 9%;
    margin-top: 5%;
}
.callBanner .watchButton:hover {
	background: #1389A7;
}
.callBanner .watchButton i {
	font-size: 34px;
}
#cookies {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #fff;
	text-align: center;
    font-size: 20px;
    line-height: 20px;
	-o-box-shadow: 0 -2px 8px rgba(0,0,0,0.4);
	-moz-box-shadow: 0 -2px 8px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0 -2px 8px rgba(0,0,0,0.4);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.4);
	padding-bottom: 20px;
	z-index: 9999;
}
#cookies i {
	color: #f00;
}
#cookies a {
	color: #003761;
}
#cookies a:hover {
	text-decoration: underline;
}
#hpromo {
	padding-top: 1px;
	padding-bottom: 10px;
	aspect-ratio: 960 / 540;
	position: relative;
	overflow: hidden;
}

#manifesto {
	text-align: center;
}
#manifesto img {
	width: 92%;
}
#logIn {
	margin: 90px auto;
}
#logIn #logo {
	display: block;
	width: 60%;
	margin: 30px auto 20px;
}
#logIn h3 {
	color: #4e4e4e;
	font-size: 20px;
	text-align: center;
}
#logIn p {
	font-size: 18px;
	text-align: center;
}
#logIn div.call2action {
	margin-top: 60px;
	margin-bottom: 20px;
}
#logIn form {
	width: 60%;
	margin: 20px auto;
}
#logIn form a:hover {
	text-decoration: underline;
}
#logIn form input[type="text"], #logIn form input[type="password"] {
	border: 1px solid #cecece;
	-o-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
    border-radius: 3px;
    width: 500px;
    margin-left: 20px;
}
#logIn form input[type="submit"] {
	text-transform: uppercase;
	-o-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
    border-radius: 3px;
	width: 680px;
	margin: 20px auto;
}
div.isVideo:hover > a.playArrow {
	display: block!important;
}

.isVideo h1 {
	position: absolute;
    left: 0;
    bottom: 10%;
    padding: 5px 20px 10px 5%;
    color: #fff;
    z-index: 6;
    font-size: 30px;
    line-height: 30px;
    margin: 0;
	background: rgba(255,0,0,0.3);
	-o-border-radius: 0 5px 5px 0;
	-moz-border-radius: 0 5px 5px 0;
	-webkit-border-radius: 0 5px 5px 0;
	border-radius: 0 2px 2px 0;
	box-shadow: 0 0 8px 8px rgba(255,0,0,0.3) inset;
}
.isVideo h1 em {
	font-size: 24px;
}
.isVideo h1 span {
	position: relative;
    top: 3px;
    color: rgba(111,206,255,0.8);
    font-size: 38px;
    font-family: sans-serif;
}
.isVideo h1.topLeft {
	bottom: auto;
	top: 18%;
}
.isVideo h1.topRight {
	right: 0;
	left: auto;
	top: 15%;
	bottom: auto;
	padding: 10px 5% 15px 25px;
	-o-border-radius: 5px 0 0 5px;
	-webkit-border-radius: 5px 0 0 5px;
	-moz-border-radius: 5px 0 0 5px;
	border-radius: 5px 0 0 5px;
}
.isVideo h1.bottomRight {
	padding: 15px 5% 15px 25px;
	left: auto;
	right: 0;
	-o-border-radius: 5px 0 0 5px;
	-webkit-border-radius: 5px 0 0 5px;
	-moz-border-radius: 5px 0 0 5px;
	border-radius: 5px 0 0 5px;
}
.isVideo h1.blue {
	background: rgba(111,206,255,0.6);
	-o-text-shadow: 0 0 5px rgba(0,0,0,0.8);
	-webkit-text-shadow: 0 0 5px rgba(0,0,0,0.8);
	-moz-text-shadow: 0 0 5px rgba(0,0,0,0.8);
	text-shadow: 0 0 5px rgba(0,0,0,0.8);
}
.isVideo h1.blue span {
	color: rgba(255,0,0,0.8);
}

#emailCapture {
		position: fixed;
		z-index: 9999;
		left: 0;
		bottom: -200px;
		width: 100%;
		height: 60px;
		padding-bottom: 15px;
		background: #fff;
		color: #373737;
		-o-box-shadow: 0px -3px 3px rgba(0,0,0,0.2);
		-moz-box-shadow: 0px -3px 3px rgba(0,0,0,0.2);
		-webkit-box-shadow: 0px -3px 3px rgba(0,0,0,0.2);
		box-shadow: 0px -3px 3px rgba(0,0,0,0.2);
		min-width: 980px;
	}
	#emailCapture p {
		float: left;
		color: #003761;
		font-size: 25px;
		line-height: 28px;
		margin-left: 20px;
	}
	#emailCapture span {
		float: right;
	}
    
	#emailCapture input[type="text"], #emailCapture input[type="submit"] {
		-o-border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
		height: 25px;
		width: 130px;
		padding-left: 10px;
		border: 1px solid #e3e3e3;
		margin-left: 5px;
		position: relative;
		top: -3px;
	}
	#emailCapture input[type="submit"] {
		display: inline-block;
		margin: 0;
		padding: 0;
		border: 0;
		margin-right: 20px;
        -o-border-radius: 15px;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        border-radius: 15px;
        margin-left: 20px;
        height: 36px;
        font-size: 1.6em;
        top: -1px;
	}

	#emailCapture i {
		position: absolute;
		background: #fff;
		font-size: 50px;
		text-align: center;
		top: -50px;
		padding: 0 10px 0;
		right: 20px;
		border-top-right-radius: 5px;
		border-top-left-radius: 5px;
		cursor: pointer;
		-o-box-shadow: 0px -3px 3px rgba(0,0,0,0.2);
		-moz-box-shadow: 0px -3px 3px rgba(0,0,0,0.2);
		-webkit-box-shadow: 0px -3px 3px rgba(0,0,0,0.2);
		box-shadow: 0px -3px 3px rgba(0,0,0,0.2);
	}
    
.alert h2 {
    color: #d6352c !important;
}

.alert p {
    color: #0f0f0f;
}

.previewThumb svg {
    width: 30px;
    HEIGHT: 30px;
    background: #fff;
    color: #000;
    border-radius: 25px;
    padding: 5px;
    cursor: pointer;
}


/*************** RESPONSIVE LAYOUT  **********/

@media(max-width:1280px) {
	body #navBar ul li#logo a {
	/* regular logo 
    background-image: url(https://cockyboys.com/images_v4/logo-block.png);*/
    /* pride logo */
    background-image: url(https://cockyboys.com/images_v4/logo-blockPride.png);
	width: 95px;
	height: 45px;
	margin-right: 10px;
	top: 0;
	}
}

@media(max-width: 1040px) {
	body #navBar ul li a {
	font-size: 17px;
	}	
	body #navBar ul li span a {
	margin: 5px 10px;
	}
	body #pagination a {
	padding: 10px 20px;
	font-size: 25px;
	}

	body #masthead .watchButton {
	margin-top: 20px;
	}
	body .callBanner .watchButton {
    font-size: 28px;
    margin-top: 3%;
	}
	body .callBanner .watchButton i {
	font-size: 28px;
	}
	body .watchButton {
	font-size: 15px;
	margin: 0 15px 0 0;
	}
	body #navBar span#icons a {
	font-size: 15px;
	}
	body #navBar span#icons a.join {
	font-size: 15px;
	margin: 0 15px 0 0;
	padding: 6px 20px 6px 18px;
	}
	body #movieHeader .right p {
	text-align: left;
	}
	body .modelPage #movieHeader .left {
	width: 50%;
	}
	#emailCapture p {
		font-size: 20px !important;
	}
}

@media screen and (min-width: 768px) {
	
	.newsTicker p {
		/*font: normal normal 300 26px/29px Oswald;*/
		font-size: 16px;
	}
}

@media screen and (min-width: 1024px) {
	
	.newsTicker p {
		font-size: 19px;
	}
	
}

@media (min-width: 1040px) and (max-width: 1100px) {
	body #navBar ul li a {
	font-size: 21px;
	}
	body #navBar ul li span a {
	font-size: 18px;
	margin: 5px 10px;
	}
	body #navBar span#icons a.join {
	font-size: 15px;
	margin: 0 15px 0 0;
	padding: 6px 20px 6px 18px;
	}
	body #pagination a {
	padding: 10px 20px;
	font-size: 25px;
	}
	body #masthead .watchButton {
	margin-top: 40px;
	}
	body .modelPage #movieHeader .left {
	width: 50%;
	}
	body #movieHeader .right p.gothamy {
	text-align: left;
	}
	#emailCapture p {
		font-size: 20px !important;
	}
}




/* medium window size --- greater than 1100 */
@media(min-width: 1100) {
	body #navBar ul li a {
	font-size: 21px;
}
	body #navBar ul li span a {
	font-size: 19px;
	margin: 5px 20px;
	}
	body #pagination a {
	padding: 10px 20px;
	font-size: 25px;
	}
	body #masthead .watchButton {
	margin-top: 40px;
	}
}



/*medium/large window size --- greater than 1280 */
@media(min-width:1280px) {
	body #pagination a {
	padding: 15px 25px;
	font-size: 36px;
	}
}

@media screen and (min-width: 1200px) {
	
	.newsTicker p {
		font-size: 22px;
	}

}

@media screen and (min-width: 1450px) {

	.newsTicker p {
		font-size: 25px;
	}
	
}



/* largest window size --- */
/*
@media(min-width: 1530px) {
	#navBar ul li a {
	font-size: 21px;
	}
	#navBar ul li span a {
	font-size: 19px;
	margin: 5px 20px;
	}
	.responsive.newReleases div {
	width: 33%;
	}
	#pagination a {
	padding: 15px 25px;
	font-size: 36px;
	}
	
*/

/********** END RESPONSIVE LAYOUT **********/
.camCarousel.owl-carousel.horizontal .item {
	min-width: 99%;
}

.camVidBanner {
	margin: -20px auto;
	text-align: center;
	width: 99%;
	position: relative;
}
.camVidBanner video {
	width: 100%;
}
.camVidBanner .playArrow {
	background-size: 10%;
}
.bannerAd img {
	width: 100%;
    margin: -20px auto;
}
.offers {
	text-align: center;
}
.camCarousel span {
	position: absolute;
    left: 5px;
    color: #fff;
    bottom: 0;
    text-transform: uppercase;	
}
.camCarousel span img {
	width: 12px !important;
    display: inline !important;
    margin-right: 5px !important;
}

#f4fNav {
	overflow-x: scroll;	
	padding-bottom: 0px!important;
	text-align: left!important;
}
#f4fNav a {
	margin-right: 0px!important;
}

#f4fNav img {
	height: 120px;
	width: inherit!important;
}
#f4fNav a {
	position: relative;
}
#f4fNav em {
	position: absolute;
	left: 5px;
	bottom: 5px;
	font-style: normal;
}
#f4fNav em img {
	width: 12px;
	height: 12px;
	margin-right: 5px;
}

/*STYLES BY ANDREW*/

.navboys {
	display: block;
	width: 100%;
}
#seriesitem {
 	width: 13.5%;
	margin: 0 auto;
	margin-bottom: -6px;
	position: relative;
	display: inline-block;
}

#seriesitem a img.seriesImg {
	width: 100%;
}
#seriesitem .playArrow {
	background-size: 33%;
	background-position: center center;
	display: none;
	margin: 0!important;
}
#seriesitem:hover .playArrow {
	display: inline;
}

.seriesImgLink {
	margin: 0!important;
}


#navBar ul li span #seriesitem a:hover {
	border-bottom: none;
	padding-bottom: 0px;
    margin-bottom: 0px !important;
}


#boyitem {
	width: 13.5%;
	margin: 0 auto;
	margin-bottom: -6px;
	position: relative;
	display: inline-block;
}

#boyitem > a {
	margin-bottom: -7px;
	margin: 0;
}

#boyitem > a.fade {
	margin: 0!important;
	width: 100%;
}
#boyitem > .nameAppear {
	display: none;
	top: 30%;
	padding: 14px 0;
	margin: 0 5%!important;
	font-family: 'Passion One', Gotham, Arial;
	font-size: 2vw!important;
	font-style: normal;
}
#navBar ul li span #boyitem a:hover {
	border-bottom: 1px solid white;
	padding-bottom: 14px;
    margin-bottom: 0px !important;
}

#navBar ul li span #boyitem a.fade:hover {
	border-bottom: none;
	padding-bottom: 0px;
    margin-bottom: 0px !important;
}
#boyitem:hover > .nameAppear {
	display: block;
}


.cockyboysdropdown > grow {
	margin: 0 auto;
}

.foob {
		display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.allCB {
	margin: 0 auto !important;
	line-height: 21px!important;
    margin: 0 auto !important;
    font-size: 20px!important;
    font-weight: 600!important;
    padding-right: 10px;
	transition: 0.5s all;
}

.allMS {
	margin: 0 auto !important;
	line-height: 21px!important;
    margin: 0 auto !important;
    font-size: 20px!important;
    font-weight: 600!important;
    padding-right: 10px;
	transition: 0.5s all;	
}

#navBar ul li span .allMS:hover {
	border-bottom: none!important;
/*	text-shadow: 0px 2px 4px rgba(0,0,0,1)!important;*/
	margin-bottom: 0px!important;
}

#navBar ul li span .allCB:hover {
	border-bottom: none!important;
/*	text-shadow: 0px 2px 4px rgba(0,0,0,1)!important;*/
	margin-bottom: 0px!important;
}

.carouselrow1 {
	margin-bottom: 15px;
}

.extraBottomPad {
	padding-bottom: 12px;
}

.modelContainer {
	position: relative;
}

.modelContainer:hover .name {
	display: block;
	top: 33%;
}


#nonwebkit {
	display: block!important;
}

.camContainer {
    background: #e6e6e6; 
    padding: 1px 0 0 0; 
    margin: -20px 0 -5px;
}

.watchButton, 
#navBar span#icons a.join,
header .join,
#masthead #slideshow .cta span {
    font-family: 'Open sans', sans-serif;
    font-weight: 500;
    letter-spacing: 0;
}

@media only screen and (-webkit-video-playable-inline) {
	#webkit {
		display: block!important;
	}
	#nonwebkit {
		display: none!important;
	}
}

#dvdBanner {
    width: 100%;
}

.dvdwrap {
	background: #ededed;
	padding: 20px 0;
	margin-top: 20px;
}

.toywrap {
	display: inline-flex;
	margin: 20px 10px;
}

.dvdwrap > a {
	margin: 0 10px;
}
.dvdwrap > a > img {
}

.toyItem {
	width: 48%;
	margin: 0 1%;
	position: relative;
	display: inline-block;
}
.toyItem a {
	width: 100%;
	display: block;
}

.toyItem img {
	width: 100%;
}

.toyItem a.button {
	opacity: 0;
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    white-space: nowrap;
    display: inline-block;
	text-align: center;
    background: linear-gradient(180deg, #4da2cf 0%, #0e86be 40%, #0e86be 100%);
    padding: 8px 20px 9px;
    font-family: 'Abel', sans-serif;
    font-size: 1.1em;
    font-weight: 600;
    color: #fff;
    border-radius: 14px;
    border: none;
    z-index: 1;
    cursor: pointer;
	pointer-events: none;
}


.toyItem:hover a.button {
	opacity: 1;
}
.toyItem:hover .fleshimg {
	opacity: 0.5;
}

.dvdItem {
	margin: 0 1%;
	position: relative;
	display: inline-block;
}
.dvdItem a {

}

.dvdItem img {
	width: 100%;
}

.dvdItem .buttonBox {
	opacity: 0;
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
	bottom: 0;
    margin: auto;
    text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	
}

/*
.dvdItem span.button {
	   
    background-color: white;
    padding: 5px;
    font-family: 'Abel', sans-serif;
    font-size: 20px;
    color: red;
    border-radius: 5px;
    border-color: #efefef;
    z-index: 1;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
    cursor: pointer;
    width: 90px;
}
*/

.dvdItem a.watchButton {
	margin: 5px auto;
}

.dvdItem span.button a{
	color: red;
}

.dvdItem:hover .buttonBox {
	opacity: 1;
}
.dvdItem:hover img {
	opacity: 0.5;
}

.dvdwrap .owl-carousel {
	display: block;
}

.dvdwrap .horizontal {
	margin-top: 0;
	padding-top: 10px;
}

.noCarousel {
	display: flex;
    justify-content: flex-start;
}

.noCarousel .dvdItem {
	max-width: 244px;
}

#toyHeader {
	margin-top: -15px!important;
}


.awards {
	color: gray;
	text-align: center;
	font-size: xx-large;
	display: inline-block;
}

/* Tooltip container */
.tooltip {
    position: relative;
	margin-left: 22px;
	display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
	text-transform: uppercase;
    visibility: hidden;
    width: 140px;
    background-color: white;
    color: red;
	font-size: x-large;
    text-align: center;
    padding: 10px;
    border: 1px solid #F0F0F0;
    border-radius: 6px;
    position: absolute;
    z-index: 1000;
    top: 115%;
	line-height: 16px;
    left: -20%;
    margin-left: -60px;
    box-shadow: 0px 5px 10px lightgrey;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #F0F0F0 transparent;
}

.institution {
	font-style: normal;
	color: grey;
	font-size: 12px;
    font-style: italic;
}

.awardyear {
	display: inline-block;
	font-style: normal;
	color: #003761;
	font-size: medium;
}

#meetHeader {
	display: inline-block;
	pointer-events: none;
	cursor: auto;
}

/*navbar browse dropdowns*/
.navThumb {
	width: 16%;
    margin: 0 auto;
    margin-bottom: -6px;
    position: relative;
    display: inline-block;
}

#masthead .navThumb .playArrow {
	background-size: 33%;
    background-position: center center;
    display: none;
    margin: 0!important;
}

#navBar .navThumb a {
	margin: 0;
}
#navBar .navThumb a img {
	width: 100%!important;
	height: auto;
}

#navBar .navThumb a:hover {
	border-bottom: none;
    padding-bottom: 0px;
    margin-bottom: 0px !important;
}

.genresDropDown a.name{
	border-top: none;
    border-bottom: none;
    padding: 0;
	left: 0;
    top: 0%;
	display: flex!important;
	justify-content: center;
	align-items: center;
	white-space: pre-wrap;
    text-align: center;
    width: 100%;
    height: 100%;
	pointer-events: none;
}
.genreImg {
	transition: 0.5s;
}
.genreImg:hover {
	opacity: 0.6;
}

#upArrow {
	box-sizing: border-box;
	display: inline-block;
    height: 40px;
    width: 40px;
    position: fixed;
    bottom: 29px;
    right: 29px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    white-space: nowrap;
    background: rgba(25,25,25,0.5);
	border-radius: 2px;
    opacity: 0;
    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
    -moz-transition: opacity .3s 0s, visibility 0s .3s;
    transition: opacity .3s 0s, visibility 0s .3s;
    text-align: center;
    color: white;
    font-size: 24px;
    line-height: 34px;
    z-index: 999;
	top: auto;
     left: auto; 
	margin-left: 0;
}
#upArrow .fa {
	margin-bottom: -35px;
	font-size: 44px;
	display: block;
	position: relative;
	top: -14px;
	margin-top: 0;
}
#upArrow:hover {
	color: red;
}

.fancybox-overlay {
    z-index: 8000 !important;
}

@media only screen and (max-width: 767px) {
	#upArrow {
		height: 80px;
		width: 80px;
	}
	#upArrow .fa {
    margin-bottom: -45px;
    font-size: 60px;
	top: -9px;
	}
}
@media (max-width: 450px) {
	.horizontal.alsolike div.item {
		width: 100% !important;
	}
}

@media (max-width: 767px) {
	.movieDVDs img {
		float:   none;
		display: block;
		width:   90%;
		margin:  0 auto;
		padding-left: 0;
	}
	.movieDVDs div {
		margin:  0;
		padding: 0 20px;
	}
}

.title_bar {
	text-align: center;
}
.title_bar h2.gothamy {
	font-size: 60px;
    text-transform: uppercase;
    color: #003761;
}
#countdown {
	
}
#countdown h3 {
	margin-left: 10px;
	transition: all 0.2s;
	color: white;
	text-transform: uppercase; 
	font-size: 30px;
	line-height: 35px;
	margin: 12px 50px;
}
#countdown h3:hover {
	transform: scale(1.05);
}

#mailbox {
	background-color: #e4eaec; 
	margin-top: -35px; 
	padding: 25px 75px 100px;
	min-height: calc(100vh - 175px);
}

.msgNotification {
	position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-block;
    width: 10px;
    height: 15px;
    border-radius: 5px;
    background-color: red;
    color: white;
    padding: 0;
    line-height: 16px;
    font-size: 12px;
    padding: 0px 0 0 5px;
    font-weight: bold;
    font-family: sans-serif;
}

/*JOIN FLASH BUTTON ROGER*/   
/*.join.flashsale{
	
	animation: joincolor 2s;
	animation-iteration-count: infinite;
	display: block;
	width: 140px;
}
.join.flashsale:after {
	content: "Join Now";
	animation: joinflash 2s;
	animation-iteration-count: infinite;
}

@keyframes joinflash {
	0% {
		content: "Join Now";
	}
	25% {
		content: "Flash Sale";
	}
	75% {
		content: "Join Now";
	}       
}

@keyframes joincolor {
	0% {
		box-shadow: none;
	}
	25% {
		box-shadow: 0px 0px 9px #ff000061;
	}
	75% {
		box-shadow: none;
	}       
}*/

/*JJBS afegeixo id*/
#joinlink.join{
	
	/*animation: joincolor 3s;
	animation-iteration-count: infinite;*/
	display: block;
	width: 140px;
}
#joinlink.join:after {
	content: "Join Now"; 
	/*content: "1 Month Free"; */
	/* content: "Summer Sale!"; */
	/*animation: joinflash 3s;
	animation-iteration-count: infinite;*/
}

@keyframes joinflash {
	0% {
		/* content: "1 Month Free";  */
		content: "Summer Sale!"; 
	}
	5% {
		content: "Join Now";
	}
	50% {
		content: "Join Now";
	}
	55% {
		content: "1 Month Free"; 
		/* content: "Summer Sale!";  */
	}       
}

@keyframes joincolor {
	0% {
		box-shadow: none;
	}
	5% {
		background-color: #2c90c4;
		box-shadow: 0px 0px 9px #ff000061;
	}
	50% {
		background-color: #2c90c4;
		box-shadow: 0px 0px 9px #ff000061;
	}           
	55% {
		box-shadow: none;
		background-color: #d6352c;

	}
}

.cycle-next1,
.cycle-prev1 {
	z-index: 200;
    font-size: 100px;
    color: #fff;
    position: absolute;
    right: 0;
    height: 95%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    top: 0;
	opacity: 0.7;
}

.cycle-prev1 {
	left: 0;
	right: auto;
}

.cycle-next1:hover,
.cycle-prev1:hover {
	opacity: 1;
	color: #fff;
}

.cycle-next1:visited,
.cycle-prev1:visited {
	color: #fff;
}

.index .watchButton {
	width: 460px;
	box-sizing: border-box;
}


/* ============================================================
   2. DARK MODE — formerly darkmode_2601.css
   Applies whenever body.darkmode is set, regardless of viewport.
   ============================================================ */

/* dark background #222 */
body.darkmode,
html.darkmode body,
.darkmode .horizontal,
.darkmode .moviesPage,
.darkmode.modelPage #movieHeader,
.darkmode #emailCapture i,
.darkmode #emailCapture input[type="text"],
.darkmode .movieDVDs,
.darkmode #modelStuff p,
.darkmode .dvdwrap,
.darkmode #dvdComments,
.darkmode #password,
.darkmode #mailbox,
.darkmode .bottom,
.darkmode #secondary-nav {
    color: #fff;
    background: #000;
}

/* lighter background #333 */
.darkmode .previewThumb div div,
.darkmode .download span,
.darkmode .download span.first,
.darkmode .download a,
.darkmode input[type="text"],
.darkmode textarea, 
.darkmode select, 
.darkmode input[type="password"],
.darkmode #support div.blue,
.darkmode #detail p,
.darkmode .dvdPage .newReleases div.scene:nth-child(odd),
.darkmode header,
.darkmode #secondary-nav {
    background-color: #1b1b1b;
    color: #bbb;
}

/* light gray text color #bbb */
.darkmode a, .darkmode a:hover, .darkmode a:visited,
.darkmode h2.sectionTitle span,
.darkmode h1.sectionTitle span,
.darkmode #press p,
.darkmode #footerSupport div div a,
.darkmode .scrollTop,
.darkmode .underPlayer span.gothamy,
.darkmode .underPlayer .fa,
.darkmode.dvdPage p a,
.darkmode.dvdPage p a:visited,
.darkmode .movieLeft div,
.darkmode p#comments,
.darkmode nav.expanded div:first-child a,
.darkmode .movieDVDs em,
.darkmode.dvdPage .movieDVDs p,
.darkmode .movieDVDs p,
.darkmode.modelPage #movieHeader .icons a,
.darkmode #iconSupport p,
.darkmode #quotes p,
.darkmode #quotes p strong {
    color: #fff;
}

/* lighter text color #e7e7e7 */
.darkmode .previewThumb p strong,
.darkmode .download a:hover,
.darkmode #support h1 a {
    color: #e7e7e7;
}

/* light blue text #5aadd6 */
.darkmode h1, .darkmode h2, .darkmode h3, .darkmode h4, .darkmode h5,
.darkmode .sectionTitle,
.darkmode #footerSupport div div a:hover,
.darkmode #footer h4,
.darkmode .moviesPage h1,
.darkmode .moviesPage h2,
.darkmode .moviesPage #movieHeader h1,
.darkmode .moviesPage p a:hover,
.darkmode.dvdPage p a:hover,
.darkmode .movieDesc a, 
.darkmode .movieDesc a:visited,
.darkmode .underPlayer .fa:hover,
.darkmode header .iconSearch:hover,
.darkmode header div a.login:hover,
.darkmode #emailCapture p,
.darkmode .movieDVDs p.gothamy,
.darkmode .movieDVDs h1.gothamy,
.darkmode.modelPage .newReleases div.scene .gothamy a,
.darkmode.dvdPage .newReleases div.scene .gothamy a,
.darkmode.modelPage .newReleases div.scene p.info a,
.darkmode.dvdPage .newReleases div.scene p.info a,
.darkmode #dvdComments h3,
.darkmode #dvdComments h2,
.darkmode #comments span strong,
.darkmode .moviesPage p a,
.darkmode.modelPage #movieHeader .icons a:hover,
.darkmode #modelStuff h2, 
.darkmode #modelStuff h3, 
.darkmode .custom h3,
.darkmode #support .contact,
.darkmode #iconSupport i,
.darkmode #iconSupport strong,
.darkmode #support div h2,
.darkmode #support h3,
.darkmode #help strong,
.darkmode #support em,
.darkmode #detail .fa-heart,
.darkmode .title_bar h2.gothamy,
.darkmode.moviesPage p a,
.darkmode.dvdPage p a,
.darkmode #quotes span,
.darkmode nav ul li a:hover,
.darkmode header #login:hover,
.darkmode .underPlayer div:first-child p:first-child.gothamy,
.darkmode #siteblurb a,
.darkmode .sort_link_current a,
.darkmode .modelAZ .letter_current,
.darkmode .sortBy .sort_link_current a {
    color: #5aadd6;
}

.darkmode.moviesPage p a:hover,
.darkmode.dvdPage p a:hover {
    color: #f00;
}

.darkmode header {
	color: #fff;
}

.darkmode header .join,
.darkmode .sectionTitle,
.darkmode #emailCapture p {
    color: #fff;
}

.darkmode .cell_content.mailbox_headings {
    background-color: #333 !important;
    color: #bbb !important;
}

.darkmode #movieHeader h2 {
    color: #bbb;
}

.darkmode .previewThumb {
	background-color: #000;
}

.darkmode .compose_button {
    background: #5aadd6 !important;
}

.darkmode.dvdPage .newReleases > div.scene:nth-child(odd) {
    background-color: #333 !important;
}

.darkmode #tabScenes .sceneList div:nth-child(even) {
    background-color: #333 !important;
}

/* light blue background #5aadd6 */
.darkmode .featuresNavContainer {
    background-color: #5aadd6;
}

.darkmode .previewThumb p em {
    color: #bbb !important;
}

.darkmode nav div:first-child {
    background: #333;
}

.darkmode #footer,
.darkmode #footer #footerContainer,
.darkmode #footer #press,
.darkmode #footerSupport,
.darkmode div#footerFoot {
    background: #000;
    color: #fff;
}

.darkmode nav a.gray {
    background: #2c2c2c;
    color: #bbb;
}

.darkmode .underPlayer.join {
    background: #5aadd6;
    color: #fff !important;
}

.darkmode nav a .fas,
.darkmode nav a span {
    color: inherit;
}

.darkmode .underPlayer {
    border-bottom: 1px solid #333;
    border-top: 1px solid #333;
}

.darkmode .underPlayer a.container, .underPlayer div {
    border-left: 1px solid #333;
}

.darkmode .underPlayer a:last-child {
    border-right: 1px solid #333 !important;
}

.darkmode .grow:hover {
    color: #fff;
}



.darkmode .download span.first {
    background: url(https://cdn.cockyboys.com/images_v4/bgSelectw.jpg) 235px center no-repeat #333;
    background-size: auto 106%;
}

.darkmode .download a {
    color: #bbb !important;
}

.darkmode .download a:hover {
    color: #fff !important;
}

.darkmode .underPlayer.join {
    background: #d6352c;
}

.darkmode .underPlayer.join .watchButton,
.darkmode .underPlayer.join .watchButton:hover {
    background: #5aadd6;
}

.darkmode #pagination a {
    color: #fff;
}

.darkmode input[type="submit"],
.darkmode .leaveComment a.gothamy {
    background-color: #5aadd6;
}

.darkmode #emailCapture input[type="text"] {
    border: 1px solid #bbb;
}    

.darkmode.modelPage #movieHeader .icons > a:nth-child(1) {
    border-left: 1px solid #bbb !important;
}

.darkmode.modelPage #movieHeader .icons a {
    border-right: 1px solid #bbb;
}

.darkmode a.name {
    color: #fff;
}

.darkmode #support .contact {
    border: 1px solid #5aadd6;
}

.darkmode #support h1 {
    border-bottom: 1px solid #bbb;
}

.darkmode #press div .logo,
.darkmode #press div .screenshot {
    border: 10px solid #fff;
    -o-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 0 !important;
}

.darkmode #footer #press div .logo {
    border: none;
    border-radius: 0;
}

.darkmode th:not(:nth-of-type(n+3)) {
    border-right: none !important;
}

.darkmode #iconSupport strong {
    letter-spacing: 1px;
}

.darkmode #quotes p img {
    display: none;
}

.darkmode.dvdPage .awards i {
    background: url(https://cockyboys.com/images_v4/awardLaurels-darkmode.png) center center no-repeat;
    background-size: 100% 100%;
}

.darkmode.dvdPage .awards i i {
    background: none;
}

.darkmode .camContainer {
    background: #434343; 
}

.darkmode nav ul li a:hover {
    border-bottom: 3px solid #5aadd6;
}

.darkmode #emailCapture,
.darkmode #emailCapture svg {
	color: #fff !important;
	background: #1b1b1b !important;
}

.darkmode .sfw {
	background: #343434;
	color: #5aadd6;
}

.darkmode .sfw .join {
	color: #fff;
}

.darkmode .sfw svg {
	color: #f2f2f2;
	background: #525252;
}

/* ============================================================
   3. RESPONSIVE OVERRIDES — tablet (max-width: 1023px) and
      mobile (max-width: 767px) re-flow rules added by phase-1+
   ============================================================ */

/* ============================================================
   PHASE 1 — HEADER RESPONSIVE OVERRIDES
   ============================================================
   At <1024px:
     - Hide the entire desktop header (it's not designed to flex
       to narrow widths and it's anchored at min-width 980px in base CSS).
     - Show a minimal mobile-stub header with just the centered logo.
     - Compensate body / #wrapper for the new (smaller) header height,
       and lift the desktop's body min-width / padding-left constraints
       so the page can actually fit on a narrow viewport.
   ============================================================ */

@media (max-width: 1023px) {

    /* Lift desktop's hard min-width and side paddings */
    html,
    body,
    #wrapper {
        min-width: 0;
    }

    body {
        padding-left: 0;
        /* Header height on tablet/mobile = 60px (logo h:40 + 10px top/btm) */
        padding-top: 60px;
    }

    #wrapper {
        padding-top: 0;
    }

    /* Hide the desktop <header id="navBar"> at tablet/mobile widths.
       The mobile nav (#mobileTopBar) is a <div> so is unaffected. */
    header {
        display: none;
    }

    /* (Phase 1 #mobileHeader stub is replaced by #mobileTopBar in Phase 5.0.
       The #mobileHeader rules are removed; #mobileTopBar is styled in the
       Phase 5.0 section below.) */
}


/* ============================================================
   PHASE 2 — FOOTER RESPONSIVE OVERRIDES
   ============================================================
   At <1024px:
     - #footerContainer stacks vertically in the order:
         1) sendy (subscribe)
         2) footerSupport (need help)
         3) footerManifesto
       (achieved with flex-direction: column + flex order property —
        markup order is preserved for SEO/screen-readers)
     - Each section spans full width instead of 33%
     - #footerFoot stacks its <ul> above its <span>, both center-aligned
     - <ul> items wrap to multiple lines, centered
   ============================================================ */

@media (max-width: 1023px) {

    /* Stack the three footer sections vertically */
    #footer #footerContainer {
        flex-flow: column nowrap;
    }

    /* Reorder: sendy → footerSupport → footerManifesto */
    #sendy {
        order: 1;
    }
	
	#footer {
		padding-top: 20px;
		margin-top: 50px;
	}
	
    #footerSupport {
        order: 2;
    }
    #footerManifesto {
        order: 3;
    }

    /* Each section spans full width with consistent vertical spacing */
    #footer #sendy,
    #footer #footerSupport,
    #footer #footerManifesto {
        width: 100%;
        margin: 20px 0;
        box-sizing: border-box;
        padding: 0 15px;
    }

    /* Manifesto cycle slideshow uses the in-flow height so the
       absolutely-positioned cycle-next angel below it has space.
       Add a bit of bottom padding so the angel doesn't overlap the
       next-stacked section. */
    #footer #footerManifesto {
        padding-bottom: 70px;
    }

    /* Footer-foot strip: stack vertically, center everything */
    div#footerFoot {
        flex-flow: column nowrap;
        align-items: center;
        text-align: center;
        padding: 20px 15px;
		box-sizing: border-box;
    }
	
	.viewmore .watchButton {
		font-size: 19px;
		width: auto;
	}
	
	h1.sectionTitle,
	h2.sectionTitle,
	#trailerJoin .sectionTitle,
	.moviesPage h2,
	.dvdPage .newReleases div.scene .gothamy a,
	.sectionTitle,
	#modelStuff h2, #modelStuff h3, .custom h3,
	#movieHeader .sectionTitle, .moviesPage #movieHeader h1,
	.categoryPage .sectionTitle, .modelPage.custom .sectionTitle, .modelPage .sectionTitle {
		font-size:   clamp(1.3rem, 5vw, 2rem);
		line-height: 5vw;
		font-family: 'Abel', sans-serif;
		font-weight: 400;
	}

    /* Links list: allow multi-line, centered */
    #footerFoot ul {
        text-align: center;
        margin-bottom: 12px;
        line-height: 1.8em;
    }

    /* Compliance / copyright text: centered, no right-margin */
    #footerFoot span {
        text-align: center;
        margin-right: 0;
        white-space: normal;        /* allow line wrapping at narrow widths */
    }

    #footerFoot p {
        margin-left: 0;
    }

    /* Hide the desktop-only news ticker on tablet/mobile */
    .newsTicker.desktop {
        display: none;
    }
}


/* ============================================================
   PHASE 3 — INDEX PAGE BODY RESPONSIVE OVERRIDES
   ============================================================ */


/* ============================================================
   3.1  Model list grid (was inline <style> in modelList.tpl)
        Base rules apply at all viewports. Responsive overrides follow.
   ============================================================ */

.topModels {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

.topModels span.item {
    width: 19%;     /* 5 across (default desktop) */
    margin: 0;
}

.topModels span.item img {
    width: 100%;
}


/* ============================================================
   3.2  CTA banner visibility — desktop landscape vs mobile portrait
        Slots 1, 2, 4 emit BOTH versions; CSS picks one based on viewport.
        (Slot 3 is text-only and shows on all viewports.)
   ============================================================ */

/* Default: show desktop, hide mobile */
.cta-desktop { display: block; }
.cta-mobile  { display: none;  }

/* Mobile portrait <img> styling: full-width, no padding */
.cta-mobile {
    width: 100%;
    margin: 45px 0;
}
.cta-mobile img {
    width: 100%;
    display: block;
    height: auto;
}



/* ============================================================
   3.3  TABLET breakpoint — 768px to 1023px
        - sceneList: 2 across
        - topModels: 3 across
   ============================================================ */

@media (min-width: 768px) and (max-width: 1023px) {

    .sceneList .previewThumb {
        width: 48%;
    }

    /* Category page: Sort By wraps below title on tablet */
    .categoryPage #movieHeader,
    .modelPage.custom #movieHeader,
    .modelPage #movieHeader {
        flex-flow:   column nowrap;
        align-items: flex-start;
    }

    .topModels span.item {
        width: 32%;
        margin-bottom: 10px;
    }
}


/* ============================================================
   3.4  MOBILE breakpoint — max-width 767px
        - sceneList: 1 across
        - topModels: 2 across, hide 15th model
        - Swap CTA: hide desktop landscape, show mobile portrait
        - Text-only blurb (#siteblurb) stays visible but smaller
   ============================================================ */

@media (max-width: 767px) {

    /* sceneList: 1 across, full width */
    .sceneList .previewThumb {
        width: 96%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Models grid: 2 across on mobile */
    #tabCast div {
        width: 49%;
    }

    /* Category page: Sort By below title, left-aligned */
    .categoryPage #movieHeader,
    .modelPage.custom #movieHeader,
    .modelPage #movieHeader {
        flex-flow:   column nowrap;
        align-items: flex-start;
    }

    /* topModels: 2 across, hide the 15th (orphan) model */
    .topModels span.item {
        width: 48%;
        margin-bottom: 10px;
    }

    .topModels span.item:nth-child(15) {
        display: none;
    }

    /* SEO blurb: smaller, less prominent on mobile */
    #siteblurb {
        font-size: 13px;
        line-height: 1.5em;
        padding: 0 15px;
        margin: 15px auto -50px;
    }
	
	#footerFoot ul {
		display: flex;
		flex-flow: column nowrap;
	}
	
	#footerFoot ul li,
	#footerFoot ul li a {
		padding: 0;
	}
	
}


/* ============================================================
   3.5  CTA portrait/landscape swap — MOBILE ONLY
        Tablet (768–1023) keeps the desktop landscape CTA.
        Mobile (<=767) swaps to the portrait <img>.
   ============================================================ */

@media (max-width: 767px) {

    .cta-desktop { display: none;  }
    .cta-mobile  { display: block; }
}


/* ============================================================
   3.6  CTA banner section styles (formerly in banners.tpl <style>)
        These define .cta1, .cta2, .cta3 and .cta1.wreaths layouts.
        Applies at all breakpoints; the .cta-desktop wrapper above
        controls visibility.
   ============================================================ */

.cta1 {
    color: #003761;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 1400px;
    padding: 20px 0 40px;
    height: 240px;
}

.darkmode .cta1,
.darkmode .cta1 h1,
.darkmode .cta1 h2 {
    color: #fff;
}

.cta1 h1 {
    font-size: 3em;
    line-height: 1em;
    font-weight: 400;
    margin-top: 0;
    color: #a92720;
}

.cta1 h2 {
    font-size: 1.9em;
    line-height: 1.1em;
    margin: 0 0 25px;
    font-weight: 300;
}

.cta1 > div {
    width: 45%;
    height: 100%;
}

.cta1 .watchButton {
    margin-top: 10px;
    font-weight: 600;
    font-size: 1.6em;
    padding: 14px 50px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    width: auto !important;
}

.cta1 > div:last-child {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.cta1 div div {
    display: flex !important;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    line-height: 1.3em;
    font-weight: 100;
    text-align: center;
    width: 100%;
    top: 50% !important;
    transform: translateY(-50%);
    padding: 40px 20px;
}

.darkmode .cta1 div div {
    border: 0;
    padding: 0;
}

.cta1 div div img {
    height: 60px;
}

.cta1 div div p {
    margin: 20px 20px 0;
}

.cta1 div div em {
    display: inline-block;
    margin: 0 5px;
}

.cb-press-quotes {
	border: 5px solid #4da2cf;
}

.cta1 .cb-press-quotes div {
	padding: 0;
}

/* .cta1.wreaths variant (slot 2 desktop layout) */

.cta1.wreaths {
    justify-content: center;
    align-items: center;
    height: auto;
}

.cta1.wreaths div div {
    flex-flow: row wrap;
    justify-content: space-evenly;
    width: 75%;
    margin-bottom: 0;
    transform: none;
    border: 0;
    padding: 0;
}

.cta1.wreaths .awards {
    text-align: center;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    width: 50%;
}

.cta1.wreaths .awards div img {
    width: 42%;
    height: auto;
    margin-bottom: 0;
    margin-top: 23px;
}

.cta1.wreaths .awards div img:nth-child(2),
.cta1.wreaths .awards div img:first-child {
    margin-top: 0;
}

.cta1.wreaths .video {
    margin-top: 0;
    aspect-ratio: 13 / 9;
    overflow: hidden;
    border-radius: 30px;
    margin-right: 110px;
    width: 45%;
    display: block;
}

.cta1.wreaths .video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta1.wreaths .watchButton {
    font-size: 20px;
}

/* .cta2 / .cta3 — bottom CTA buttons */

.cta2.watchButton {
    font-size: 23px;
    margin: 0 auto 40px;
    display: block;
    width: 460px;
    text-align: center;
    padding: 17px 0 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

@media (max-width: 767px) {
	.cta2.watchButton {
		display: inline-block !important;
		padding: 10px 30px !important;
		font-size: 19px !important;
		width: auto;
	}
}

.cta3 {
    font-size: 23px !important;
    margin: 0 auto 40px;
    display: block !important;
    width: 460px;
    text-align: center;
    padding: 17px 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    margin: 50px auto 5px !important;
}

.darkmode .cta3 {
    background: transparent linear-gradient(180deg, #feeeb8 0%, #b5884f 40%, #b5884f 100%) 0% 0% no-repeat padding-box;
}

@media only screen and (min-width: 1960px) {
    .cta1 { max-width: 2000px; }
    .cta1 h1 { font-size: 3.6em; }
    .cta1 h2 { font-size: 2.4em; }
    .cta1 div div { font-size: 1.9em; }
    .cta1 div div img { height: 80px; }
}

/* Tablet: shrink the .cta1 layout so the 240px height fits narrower content */
@media (min-width: 768px) and (max-width: 1023px) {

    .cta1 {
        height: auto;
        padding: 20px 15px 30px;
    }

    .cta1 > div {
        width: 48%;
    }

    .cta1 h1 { font-size: 2.2em; }
    .cta1 h2 { font-size: 1.4em; }

    .cta1 div div {
        font-size: 1.1em;
        padding: 25px 15px;
    }

    .cta1.wreaths .video {
        margin-right: 0;
    }

    .cta2.watchButton,
    .cta3 {
        width: 460px;
        max-width: 90%;
        font-size: 18px;
    }
}


/* ============================================================
   PHASE 3 — HERO SLIDESHOW + HOVER-DISABLE OVERRIDES
   ============================================================ */


/* ============================================================
   3.7  HOVER STATES — touch-device safety
        Disable :hover behaviors on devices without a real pointer.
        Using @media (hover: none) instead of a width breakpoint so
        an iPad with a Bluetooth mouse still gets hover, while an
        iPhone correctly skips it.

        Most :hover rules in the base CSS are decorative and don't
        cause the double-tap problem. The ones below are common
        offenders that switch element states (background changes,
        transforms, etc.) — disabling these prevents the
        "first tap = hover, second tap = click" UX issue.
   ============================================================ */

@media (hover: none) {

    /* Generic anchor hover effects — keep underlines but skip transforms */
    a:hover,
    .grow:hover,
    .watchButton:hover {
        transform: none;
        opacity: 1;
    }

    /* Scene preview thumbnails: don't show the hover-state video preview
       on touch (the viewport-centered autoplay handles this on mobile) */
    .previewThumb:hover .vid {
        display: none;
    }

    /* No hover available: categories images should be full opacity at rest */
    .categories a.fade {
        opacity: 1;
    }

    /* Model card fade-in name overlay was tied to mouseenter */
    #tabCast div:hover a.fade,
    .movieModels span:hover a.fade,
    .topModels .item:hover a.fade {
        opacity: 1 !important;
    }

    .topModels .item:hover a.name,
    #tabCast div:hover a.name,
    .movieModels span:hover a.name {
        display: none !important;
    }
}


/* ============================================================
   3.8  HERO SLIDESHOW — shared
   ============================================================ */

.hero {
    width: 100%;
    overflow: hidden;
    background: #000;
}

.cb-slide {
    /* Plugin sets position/opacity inline; we just provide a baseline */
    box-sizing: border-box;
}

/* Prev/next buttons (desktop hero) */
.hero .cb-prev,
.hero .cb-next {
    position: absolute;
    top: 46%;
    transform: translateY(-50%);
    z-index: 200;
    background: transparent;
    color: #fff;
    border: 0;
    width: auto;
    height: 110px;
    font-size: 170px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
	opacity: 0.8;
}

.hero .cb-prev { left: 5px; }
.hero .cb-next { right: 5px; }

@media (max-width: 1023px) {

	.hero .cb-prev,
	.hero .cb-next {
		font-size: 110px;
	}
	
}


/* ============================================================
   3.9  HERO — DESKTOP (>= 1024px)
        Aspect ratio: 1920:600 for tour banners, 1280:550 for members
   ============================================================ */

.hero-desktop {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 600;
    min-height: 240px; /* Fallback for browsers without aspect-ratio support */
    background: #000;
}

.hero-desktop--members {
    aspect-ratio: 1280 / 550;
    min-height: 220px;
}

.hero-desktop .hero-slide {
    width: 100%;
    height: 100%;
}

.hero-desktop .hero-slide img,
.hero-desktop .hero-slide video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-desktop .hero-slide a {
    display: flex;
    width: 100%;
    height: 100%;
	box-sizing: border-box;
	
}

.hero-desktop--members .hero-slide a {
	padding-left: 110px;
}

/* Members hero — text overlay on left half */
.hero-desktop .hero-slide__overlay {
    position: absolute;
    inset: 0;
    z-index: 90;
    display: block;
    text-indent: -9000em;
    overflow: hidden;
}

.hero-desktop .hero-slide__cta {
    position: absolute;
    z-index: 100;
    left: 0;
    top: 0;
    width: 50% !important;
    height: 100%;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: flex-start;
    padding: 0 30px 0 20px;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.28) 70%,
        rgba(0, 0, 0, 0)   100%);
    color: #fff;
    text-decoration: none;
}

.hero-desktop .hero-slide__cta h1 {
    font-family: 'Anton', sans-serif;
    color: #fff;
    font-size: 3.5em;
    line-height: 1.1em;
    margin: 0;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
}

.hero-desktop .hero-pill {
    display: inline-block;
    background: #d6352c;
    color: #fff;
    font-size: 0.4em;
    border-radius: 3px;
    padding: 5px 10px;
    margin-bottom: 12px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0;
	line-height: 1.3em;
}

.hero-desktop .hero-watchbutton {
    display: inline-block;
    background: linear-gradient(to top, rgba(46, 143, 195, 1) 0%, rgba(105, 185, 220, 1) 100%);
    color: #fff;
    border-radius: 14px;
    padding: 12px 45px 10px;
    font-size: 1.7em;
    font-family: sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    margin-top: 13px;
    line-height: 1em;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

@media (hover: hover) {
    .hero-desktop .hero-watchbutton:hover {
        transform: scale(1.05);
    }
}

@media (hover: hover) {
    .hero .cb-prev:hover,
    .hero .cb-next:hover {
        opacity: 1;
    }
}

@media (max-width: 1140px) and (min-width: 1024px) {
    .hero-desktop .hero-slide__cta h1 { font-size: 3em; }
}


/* ============================================================
   3.10  HERO — MOBILE (< 1024px)
         Aspect ratio: 640:665
         Layout: video fills ~60% top, blue panel fills ~40% bottom,
         transition image bridges them.
   ============================================================ */

.hero-mobile {
    position: relative;
    width: 100%;
    aspect-ratio: 640 / 665;
    min-height: 380px; /* Fallback for browsers without aspect-ratio support */
    background: #003761;
}

.hero-mobile__slide {
    width: 100%;
    height: 100%;
    background: #000;
    display: block;
    color: #fff;
    text-decoration: none;
}

a.hero-mobile__slide:hover,
a.hero-mobile__slide:focus {
    text-decoration: none;
    color: #fff;
}

.hero-mobile__slide--banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video slide — video fills top portion */
.hero-mobile__slide--video video,
.hero-mobile__slide--video .hero-mobile__poster {
    display: block;
    width: auto;
    height: 72%;
    object-fit: cover;
    background: #000;
	overflow: hidden;
}

/* Transition image straddling video and panel */
.hero-mobile__divider {
    position: absolute;
    bottom: 28%;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 2;
    pointer-events: none;
}

/* Blue text panel below the video */
.hero-mobile__panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 28%;
    background: #003761;
    color: #fff;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 3;
    padding: 0 15px 25px;
    box-sizing: border-box;
}

.hero-mobile__panel .hero-pill {
    background: #d6352c;
    color: #fff;
    border-radius: 4px;
    padding: 0 6px;
    font-family: sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.8em;
    margin-bottom: 6px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.hero-mobile__panel h1 {
    font-family: 'Abel', sans-serif;
    font-size: 1.7em;
    margin: 0 0 7px;
    padding: 0 10px;
    line-height: 1em;
    font-weight: 800;
    color: #fff;
    white-space: wrap;
    text-overflow: ellipsis;
    max-width: 95%;
}

.hero-mobile__watchbutton {
    display: inline-block;
    background: linear-gradient(to top, rgba(46, 143, 195, 1) 0%, rgba(105, 185, 220, 1) 100%);
    color: #fff;
    border-radius: 14px;
    padding: 7px 40px;
    font-family: sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1em;
    line-height: 1.4em;
    text-decoration: none;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.6);
}

@media (min-width: 650px) and (max-width: 767px) {
	
	.hero-mobile__panel h1 {
		font-size: 2.5em;
		line-height: 1.1em;
	}
	
	.hero-mobile__watchbutton {
		font-size: 1.4em;
	}
	
}


/* ============================================================
   3.11  HERO — VISIBILITY SWAP
         Desktop hero shows at >= 768px (desktop AND tablet).
         Mobile hero shows at < 768px (mobile only).
   ============================================================ */

@media (max-width: 767px) {
    .hero-desktop { display: none; }
    .hero-mobile  { display: block; }
}

@media (min-width: 768px) {
    .hero-desktop { display: block; }
    .hero-mobile  { display: none; }
}


/* ============================================================
   3.12  Screen-reader-only utility (used by hero overlay link)
   ============================================================ */

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ============================================================
   PHASE 3.5 — HERO PROGRESS BAR + TABLET HERO + ZOOM FIX +
                NEWSTICKER VERTICAL STACK
   ============================================================ */


/* ============================================================
   3.13  iPhone "shrink-to-fit" fix
         iOS Safari scales the whole page down when it detects
         horizontal overflow (e.g. a fixed-width child wider than
         the viewport). Force horizontal clipping so the viewport
         meta tag's width=device-width is respected literally.
   ============================================================ */

html,
body {
    overflow-x: hidden;
}


/* ============================================================
   3.14  Hero progress bar
         5px CockyBoys-red bar directly below the hero, fills
         left → right over the slideshow's autoplay interval.
         Hidden when count <= 1.
   ============================================================ */

.hero-progress {
    width: 100%;
    height: 5px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
    line-height: 0;
}

.hero-progress__bar {
    display: block;
    height: 100%;
    width: 0;
    background: #d6352c;          /* CockyBoys red */
    transform-origin: left center;
    /* Plugin sets transition + width via inline style based on the
       slideshow's interval, then triggers transition by setting
       width: 100%. */
}

.darkmode .hero-progress {
    background: rgba(255, 255, 255, 0.08);
}

/* Show only the matching progress bar at each breakpoint */
@media (max-width: 767px) {
    .hero-progress--desktop { display: none; }
    .hero-progress--mobile  { display: block; }
}

@media (min-width: 768px) {
    .hero-progress--desktop { display: block; }
    .hero-progress--mobile  { display: none; }
}


/* ============================================================
   3.15  Tablet hero refinements (768px-1023px)
         - Smaller h1 + watch button; pill stays the same
         - Swipe is enabled via JS (no CSS needed)
   ============================================================ */

@media (min-width: 768px) and (max-width: 1023px) {

    .hero-desktop .hero-slide__cta h1 {
        font-size: 2em;
    }

    .hero-desktop--members .hero-slide a {
        padding-left: 60px;     /* tighter padding on tablet */
    }

    .hero-desktop .hero-watchbutton {
        font-size: 1.1em;
        padding: 8px 28px 6px;
    }
}


/* ============================================================
   3.16  Newsticker vertical stack on tablet/mobile
         Old markup was one <p> with inline <span> bullets.
         New markup uses <ul><li><span>●</span> text</li></ul>:
           - Desktop: items inline (matches original look)
           - Tablet/mobile: items stacked vertically, centered

         The old .newsTicker.desktop class was hidden on <1024px;
         we keep that behavior — but the new markup is rendered
         in addition to the old, gated by class.
   ============================================================ */

/* New vertical-capable list */
.newsTicker ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.newsTicker ul li {
    font: normal normal 400 16px/1.4 Oswald, sans-serif;
    text-transform: none;
    color: #4a4a4a;
}

.newsTicker ul li span {
    color: #a92720;
    padding: 0 5px;
}

.darkmode .newsTicker ul li {
    color: #fff;
    text-shadow: 2px 1px 4px rgba(0, 0, 0, 0.6);
}

@media (max-width: 767px) {

	font-size: 23px;
	
}

/* Desktop: inline row layout (only relevant if the new markup is
   rendered on desktop too — currently it isn't, but kept for safety) */
@media (min-width: 1024px) {

    /* Hide all mobile nav elements at desktop widths */
    #mobileTopBar,
    #mobileBottomBar,
    #mobileNavDrawer,
    #mobileSearchOverlay,
    #mobilePageOverlay {
        display: none !important;
    }

    .newsTicker ul li {
        display: inline-block;
        margin: 0 8px;
        white-space: nowrap;
    }

    /* Hide the mobile/tablet variant on desktop */
    .newsTicker.mobile-tablet {
        display: none;
    }
}

/* Tablet and mobile: vertical stack, line per item */
@media (max-width: 1023px) {
    .newsTicker ul li {
        display: inline-block;
        padding: 4px 0;
        line-height: 1.5;
		float: none;
    }
    /* Wrapper styling for the mobile-tablet variant */
    .newsTicker.mobile-tablet {
        margin-top: 30px;
        padding: 15px 0;
    }
}


/* ============================================================
   PHASE 5.0 — MOBILE NAV
   All rules scoped to < 1024px so desktop is completely unaffected.
   ============================================================ */


/* ============================================================
   5.1  Body padding adjustment
        Top bar is 60px tall.
        Bottom bar (tour only) adds ~42px more.
        CSS uses the existing body.tour / body.members classes
        set by header.tpl.
   ============================================================ */

@media (max-width: 1023px) {

    body.tour    { padding-top: 102px; }
    body.members { padding-top: 60px;  }

    /* Desktop navbar is hidden at this width from Phase 1 overrides.
       Remove the desktop-oriented padding-left that Phase 1 cleared,
       to make sure nothing interferes. */
    body { padding-left: 0 !important; }

    /* The desktop nav injects padding-top on #wrapper — not needed on mobile */
    .tour #wrapper,
    .members #wrapper {
        padding-top: 0 !important;
    }
}


/* ============================================================
   5.2  TOP BAR
   ============================================================ */

#mobileTopBar {
    display: none;            /* hidden on desktop — shown below */
}

@media (max-width: 1023px) {

    #mobileTopBar {
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        position:        fixed;
        top:             0;
        left:            0;
        width:           100%;
        height:          60px;
        z-index:         1002;
        padding:         0 10px;
        box-sizing:      border-box;
        background:      #fff;
        box-shadow:      0 1px 4px rgba(0, 0, 0, 0.12);
        transition:      transform 0.3s ease;
    }

    .darkmode #mobileTopBar {
        background: #111;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    }

    #mobileTopBar.nav--hidden {
        transform: translateY(-100%);  /* slides up: -60px */
    }

    /* Hamburger / search buttons */
    .mobileTopBar__btn {
        display:         flex;
        align-items:     center;
        justify-content: center;
        width:           44px;
        height:          44px;
        flex-shrink:     0;
        background:      transparent;
        border:          0;
        padding:         0;
        cursor:          pointer;
        color:           #003761;
    }

    .darkmode .mobileTopBar__btn { color: #fff; }

    .mobileTopBar__btn svg {
        width:  26px;
        height: 26px;
    }

    /* Search button uses an <img>, not SVG — size accordingly */
    .mobileTopBar__btn img {
        width:  26px;
        height: 26px;
        object-fit: contain;
    }

    /* Hamburger: swap between hamburger and X icons */
    #mobileHamburger .icon-close  { display: none; }
    #mobileHamburger .icon-hamburger { display: block; }
    #mobileHamburger.is-open .icon-hamburger { display: none; }
    #mobileHamburger.is-open .icon-close     { display: block; }

    /* Centered logo */
    /* Centered logo — flex child instead of absolute+translate.
       Absolute positioning recalculates on any parent reflow, causing
       the logo to shift on tap. Flex centering is reflow-immune. */
    .mobileTopBar__logo {
        flex:            1;
        display:         flex;
        justify-content: center;
        align-items:     center;
    }

    .mobileTopBar__logo img {
        height:    36px;
        width:     auto;
        display:   block;
        max-width: none;
    }
}


/* ============================================================
   5.3  BOTTOM BAR  (tour only — Login | Join Now)
   ============================================================ */

#mobileBottomBar {
    display: none;
}

@media (max-width: 1023px) {

    #mobileBottomBar {
        display:    flex;
        position:   fixed;
        top:        60px;
        left:       0;
        width:      100%;
        height:     42px;
        z-index:    99;
        transition: transform 0.3s ease;
    }

    /* When nav hides: move up by top-bar height + own height */
    #mobileBottomBar.nav--hidden {
        transform: translateY(-102px);
    }

    .mobileBottomBar__login,
    .mobileBottomBar__join {
        display:         flex;
        align-items:     center;
        justify-content: center;
        width:           50%;
        height:          100%;
        font-size:       21px;
        font-weight:     400;
        font-family:     sans-serif;
        color:           #fff !important;
        text-decoration: none;
        text-shadow:     1px 1px 2px rgba(0, 0, 0, 0.3);
    }

    .mobileBottomBar__login {
        background: #d6352c;
    }

    .mobileBottomBar__join {
        background: linear-gradient(to top, rgba(46, 143, 195, 1) 0%, rgba(105, 185, 220, 1) 100%);
        font-weight: 600;
        overflow:   visible;        /* don't clip scale-up animation */
        /* Use column flex so the animated span sits naturally centered */
        flex-direction: column;
        align-items:    center;
        justify-content: center;
    }

    /* Span inside Join Now bottom bar — the animation target.
       Must be inline-block (or block) for CSS transforms to apply.
       The parent <a> has overflow:visible so the scale-up isn't clipped. */
    .mobileBottomBar__join .element-animation {
        display:          inline-block;
        width:            auto;               /* fit-content so scale is visible */
        transform-origin: 50% 50%;
        animation:        animationFrames linear 5s infinite;
        /* 5s total = 1s of shake + 4s of pause.
           The keyframes are rescaled so the shake occupies 0-20%
           and 20-100% holds the resting state. */
        will-change:      transform;
    }
}

/* animationFrames keyframes (from legacy mobile CSS) */
@keyframes animationFrames {
    /* Shake occupies 0-20% (= 1s of the 5s cycle).
       20%-100% (= 4s) holds resting state for the pause between repeats. */
    0%   { transform: rotate(0deg)  scaleX(1.00) scaleY(1.00); }
    2%   { transform: rotate(-3deg) scaleX(0.80) scaleY(0.80); }
    4%   { transform: rotate(-3deg) scaleX(0.80) scaleY(0.80); }
    6%   { transform: rotate(3deg)  scaleX(1.20) scaleY(1.20); }
    8%   { transform: rotate(-3deg) scaleX(1.20) scaleY(1.20); }
    10%  { transform: rotate(3deg)  scaleX(1.20) scaleY(1.20); }
    12%  { transform: rotate(-3deg) scaleX(1.20) scaleY(1.20); }
    14%  { transform: rotate(3deg)  scaleX(1.20) scaleY(1.20); }
    16%  { transform: rotate(-3deg) scaleX(1.20) scaleY(1.20); }
    18%  { transform: rotate(3deg)  scaleX(1.20) scaleY(1.20); }
    20%  { transform: rotate(0deg)  scaleX(1.00) scaleY(1.00); }
    100% { transform: rotate(0deg)  scaleX(1.00) scaleY(1.00); }
}


/* ============================================================
   5.4  NAV DRAWER
   ============================================================ */

#mobileNavDrawer {
    display: none;
}

@media (max-width: 1023px) {

    #mobileNavDrawer {
        display:    flex;
        flex-flow:  column nowrap;
        position:   fixed;
        top:        60px;           /* flush with bottom of top bar */
        left:       0;
        width:      80%;
        height:     calc(100vh - 60px);
        z-index:    1000;
        background: #fff;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.18);
        transform:  translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .darkmode #mobileNavDrawer {
        background: #111;
    }

    #mobileNavDrawer.is-open {
        transform: translateX(0);
    }

    /* Nav list */
    .mobileNav__list {
        list-style: none;
        margin:     0;
        padding:    0;
        flex:       1;
		display: flex;
		flex-flow: column nowrap;
    }

    .mobileNav__list li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .darkmode .mobileNav__list li {
        border-bottom-color: rgba(255, 255, 255, 0.07);
    }

    .mobileNav__list li a,
    .mobileNav__list li button {
        display:     flex;
        align-items: center;
        gap:         10px;
        width:       100%;
        padding:     10px 20px;
        font-size:   17px;
        font-family: 'Open Sans', sans-serif;
        font-weight: 400;
        color:       #003761;
        text-decoration: none;
        background:  transparent;
        border:      0;
        text-align:  left;
        cursor:      pointer;
        box-sizing:  border-box;
    }

    .darkmode .mobileNav__list li a,
    .darkmode .mobileNav__list li button {
        color: #fff;
    }

    /* Inline SVG icons inside nav links */
    .mobileNav__icon {
        width:      20px;
        height:     20px;
        flex-shrink: 0;
        opacity:    0.75;
    }

    /* Dark mode toggle button */
    .mobileNav__toggleBtn {
        width: 100%;
    }

    .mobileNav__toggleIcon {
        width:      auto;
        height:     20px;
        flex-shrink: 0;
    }

    /* Join Now — last nav item inside <ul>.
       Uses higher-specificity selector to beat .mobileNav__list li a
       (which otherwise overrides background, display, color etc.) */
    .mobileNav__joinItem {
        border-bottom: 0 !important;
        padding: 0;
    }

    .mobileNav__joinItem a.mobileNav__joinBtn {
        display:         block !important;
        width:           100%;
        padding:         15px 20px;
        text-align:      center !important;
        font-size:       18px;
        font-family:     sans-serif !important;
        font-weight:     700 !important;
        color:           #fff !important;
        text-decoration: none;
        text-shadow:     1px 1px 2px rgba(0, 0, 0, 0.35);
        background:      linear-gradient(to top, rgba(46, 143, 195, 1) 0%, rgba(105, 185, 220, 1) 100%) !important;
        flex-shrink:     0;
        letter-spacing:  0.03em;
        box-sizing:      border-box;
    }
}


/* ============================================================
   5.5  PAGE DIMMER OVERLAY
   ============================================================ */

#mobilePageOverlay {
    display: none;
}

@media (max-width: 1023px) {

    #mobilePageOverlay {
        display:         block;
        position:        fixed;
        top:             60px;
        left:            0;
        width:           100%;
        height:          calc(100vh - 60px);
        z-index:         998;
        background:      rgba(0, 0, 0, 0.5);
        opacity:         0;
        pointer-events:  none;
        transition:      opacity 0.3s ease;
    }

    .darkmode #mobilePageOverlay {
        background: rgba(0, 0, 0, 0.7);
    }

    #mobilePageOverlay.is-visible {
        opacity:        1;
        pointer-events: all;
    }
}


/* ============================================================
   5.6  SEARCH OVERLAY
   ============================================================ */

#mobileSearchOverlay {
    display: none;
}

@media (max-width: 1023px) {

    #mobileSearchOverlay {
        display:         flex;
        align-items:     center;
        justify-content: center;
        position:        fixed;
        inset:           0;
        z-index:         2000;
        background:      rgba(0, 0, 0, 0.6);
        opacity:         0;
        pointer-events:  none;
        transition:      opacity 0.25s ease;
    }

    .darkmode #mobileSearchOverlay {
        background: rgba(0, 0, 0, 0.8);
    }

    #mobileSearchOverlay.is-visible {
        opacity:        1;
        pointer-events: all;
    }

    /* Modal card */
    .mobileSearch__modal {
        position:      relative;
        width:         90%;
        max-width:     480px;
        background:    #fff;
        border-radius: 16px;
        padding:       30px 24px 24px;
        box-shadow:    0 8px 40px rgba(0, 0, 0, 0.3);
        box-sizing:    border-box;
    }

    .darkmode .mobileSearch__modal {
        background: #1c1c1c;
        color:      #fff;
    }

    /* X close button */
    .mobileSearch__close {
        position:   absolute;
        top:        14px;
        right:      14px;
        width:      36px;
        height:     36px;
        display:    flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border:     0;
        cursor:     pointer;
        color:      #555;
        padding:    0;
		z-index: 1;
    }

    .darkmode .mobileSearch__close { color: #bbb; }

    .mobileSearch__close svg {
        width:          20px;
        height:         20px;
        pointer-events: none;  /* let clicks pass through to the <button> */
    }

    /* The searchbar.tpl renders #searchform with display:none.
       Inside our overlay we always show it. */
    #mobileSearchOverlay #searchform {
        display:   block !important;
        margin:    0 0 16px;
    }

    #mobileSearchOverlay #autosuggest {
        width:         100% !important;
        font-size:     18px;
        padding:       12px 15px;
        border:        2px solid #ddd;
        border-radius: 10px;
        box-sizing:    border-box;
        outline:       none;
        font-family:   'Open Sans', sans-serif;
        color:         #222;
    }

    .darkmode #mobileSearchOverlay #autosuggest {
        background:   #2a2a2a;
        border-color: #444;
        color:        #fff;
    }

    #mobileSearchOverlay #autosuggest:focus {
        border-color: #5aadd6;
    }

    /* Hide the × inside the form (legacy) */
    #mobileSearchOverlay #searchform em {
        display: none;
    }

    /* Blue gradient submit button */
    .mobileSearch__submit {
        display:         flex;
        align-items:     center;
        justify-content: center;
        gap:             8px;
        width:           100%;
        padding:         13px;
        border:          0;
        border-radius:   10px;
        background:      linear-gradient(to top, rgba(46, 143, 195, 1) 0%, rgba(105, 185, 220, 1) 100%);
        color:           #fff;
        font-size:       17px;
        font-weight:     600;
        font-family:     sans-serif;
        cursor:          pointer;
        text-shadow:     1px 1px 2px rgba(0, 0, 0, 0.25);
    }

    .mobileSearch__submit svg {
        width:  20px;
        height: 20px;
    }
}


/* ============================================================
   5.7  Footer social icon sizing (now inline SVG)
   ============================================================ */

#social a svg {
    width:  28px;
    height: 28px;
    display: inline-block;
    vertical-align: middle;
}


/* ============================================================
   5.8  Search input — remove background image on mobile/tablet
   ============================================================ */

@media (max-width: 1023px) {

    #searchform input[type="text"],
    #searchform input[type="search"],
    #searchform .input,
    #mobileSearchOverlay #autosuggest {
        background-image: none !important;
        background-color: #fff !important;
        padding-left:     15px !important;
    }
	
	.tour #wrapper {
		padding-top: 0;
	}

    .darkmode #searchform input[type="text"],
    .darkmode #searchform input[type="search"],
    .darkmode #searchform .input,
    .darkmode #mobileSearchOverlay #autosuggest {
        background-color: #2a2a2a !important;
    }
}


/* ============================================================
   Phase 6.0 — animate.css removal
   The external animate.css library has been removed. This rule
   previously overrode animate.css's default animation-duration.
   Preserved here so any elements using .animated still render.
   ============================================================ */

.animated {
    animation-duration: 2000ms;
}


/* ============================================================
   PHASE 6.1 — CB.carousel (replaces Owl Carousel)
   ============================================================ */

/* Wrapper injected by JS — positions the prev/next buttons */
.cb-carousel-wrap {
    position: relative;
    width:    100%;
}

/* The carousel track itself — horizontal scroll container */
.cb-carousel {
    display:               flex;
    flex-flow:             row nowrap;
    overflow-x:            auto;
    scroll-snap-type:      x mandatory;
    -webkit-overflow-scrolling: touch;
    gap:                   12px;
    padding:               10px 0 16px;
    /* Hide scrollbar visually but keep scrollable */
    scrollbar-width:       none;      /* Firefox */
    -ms-overflow-style:    none;      /* IE/Edge */
}

.cb-carousel::-webkit-scrollbar {
    display: none;
}

/* Each item snaps to the left edge */
.cb-carousel .item,
.cb-carousel .previewThumb,
.cb-carousel section.previewThumb {
    scroll-snap-align: start;
    flex-shrink:       0;
}

/* Items-per-view via flex-basis
   Desktop (>=1024px): 5 visible  → 20% minus gap
   Tablet  (768-1023): 3 visible  → 33% minus gap
   Mobile  (<768px):   2 visible  → 50% minus gap */

@media (min-width: 1024px) {
    .cb-carousel .item,
    .cb-carousel .previewThumb,
    .cb-carousel section.previewThumb {
        flex-basis: calc(20% - 10px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .cb-carousel .item,
    .cb-carousel .previewThumb,
    .cb-carousel section.previewThumb {
        flex-basis: calc(33.333% - 8px);
    }
}

@media (max-width: 767px) {
    .cb-carousel .item,
    .cb-carousel .previewThumb,
    .cb-carousel section.previewThumb {
        flex-basis: calc(50% - 6px);
    }
}

/* Images inside carousel items fill their container */
.cb-carousel .item img,
.cb-carousel .previewThumb img {
    width:   100%;
    height:  auto;
    display: block;
}

/* Prev/next buttons */
.cb-carousel-prev,
.cb-carousel-next {
    position:        absolute;
    top:             44%;
    transform:       translateY(-50%);
    z-index:         10;
    background:      rgba(0, 0, 0, 0.45);
    color:           #fff;
    border:          0;
    border-radius:   50%;
    width:           50px;
    height:          50px;
    font-size:       42px;
    line-height:     1;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background 0.2s ease, opacity 0.2s ease;
    padding:         0 0 5px;;
}

.dvds .cb-carousel-prev,
.dvds .cb-carousel-next,
.cats .cb-carousel-prev,
.cats .cb-carousel-next {
	top: 50%;
}

.cb-carousel-prev { left:  4px; }
.cb-carousel-next { right: 4px; }

.cb-carousel-prev.is-hidden,
.cb-carousel-next.is-hidden {
    opacity:        0;
    pointer-events: none;
}

@media (hover: hover) {
    .cb-carousel-prev:hover,
    .cb-carousel-next:hover {
        background: rgba(0, 0, 0, 0.7);
    }
}


/* ============================================================
   PHASE 6.1 — cb-manifesto (replaces Owl Carousel manifesto)
   ============================================================ */

/* The manifesto is a single-item fade slideshow — CB.slideshow
   handles the positioning/opacity transitions.
   We just need to ensure .slideBox items are positioned correctly
   so the container height stays stable (CB.slideshow uses
   position:absolute for non-active slides). */

.cb-manifesto {
    position: relative;
    min-height: 120px;  /* prevent collapse while first slide initializes */
}

.cb-manifesto .slideBox {
    width: 100%;
    box-sizing: border-box;
}


/* ============================================================
   PHASE 6.2 — CB.preview hover states (desktop)
   Only active when the device supports real hover.
   ============================================================ */

/* Show the preview video area on hover (desktop-only via JS trigger) */
@media (hover: hover) {

    .previewThumb.hasClip .thumbCover {
        transition: opacity 0.2s ease;
    }

    .previewThumb.hasClip video.vid {
        position: absolute;
        top:      0;
        left:     0;
        width:    100%;
        height:   100%;
        object-fit: cover;
    }
}


/* ============================================================
   Phase 6.1.1 — Press-quotes slideshow vertical centering fix
   ============================================================
   CB.slideshow positions slides absolutely within the container.
   For the press-quotes CTA, we need:
   1. The .cb-press-quotes container to have an explicit height so
      the absolute-positioned stage has something to fill.
   2. The slide content to be vertically centered within that height.
   ============================================================ */

/* Give the container an explicit height matching the .cta1 height */
.cb-press-quotes {
    position: relative;
    height:   100%;           /* fills the cta1 flex child */
    overflow: hidden;
}

/* Center slide content vertically within the stage */
.cb-press-quotes .cb-slide {
    display:         flex;
    flex-flow:       column nowrap;
    justify-content: center;
    align-items:     center;
    padding:         20px;
    text-align:      center;
    box-sizing:      border-box;
    height:          100%;
}

/* The stage itself should fill the container */
.cb-press-quotes .cb-stage {
    height: 100%;
}


/* ============================================================
   Phase 6.1.1 — Manifesto slideshow height fix
   ============================================================
   Same fix for the manifesto — give it a stable minimum height
   so content doesn't jump as slides change.
   ============================================================ */

.cb-manifesto {
    position:   relative;
    min-height: 140px;
    /* CB.slideshow._init() sets overflow:hidden inline, but fade-mode slides
       don't need clipping. Override so tall manifesto items aren't cut off. */
    overflow:   visible !important;
}

.cb-manifesto .cb-stage {
    min-height: 140px;
    /* Stage is absolute-positioned — let height be determined by tallest slide */
    height:     auto !important;
}

/* Each .slideBox is an absolute-positioned slide — flex column so .manifesto-logo
   sits directly below the text, with no gap, regardless of text length. */
.cb-manifesto .slideBox {
    display:         flex;
    flex-flow:       column nowrap;
    justify-content: flex-start;
    align-items:     center;
    padding:         20px 15px 0;
    box-sizing:      border-box;
    width:           100%;
    text-align:      center;
}

/* Logo inside each slide — always immediately below the last line of text */
.cb-manifesto .manifesto-logo {
    margin-top:  15px;
    margin-bottom: 20px;
    line-height: 1;
    text-align:  center;
    flex-shrink: 0;
}
   ============================================================
   body.previewsOn  = previews enabled (default)
   body.previewsOff = user has disabled previews
   .is-previewing   = class on the thumb card that's currently playing
   ============================================================ */

/* .abso — kept as an invisible click target at all times so the card
   is always clickable through to the scene. We clear the background
   image so no play graphic shows (that's handled by the legacy CSS).
   On mobile it always shows normally. */
/* On TOUCH devices, suppress the .abso play-icon background entirely.
   On DESKTOP, the legacy rule .previewsOff .previewThumb .abso:hover { opacity:1 }
   should reveal the play icon when previews are off — that's intended behavior. */
@media (hover: none) {
    .previewThumb .abso {
        background-image: none !important;
    }
}

/* Video inside thumb — sits ABOVE the cover in z-index.
   Default state: display:none (not buffering). When preloadVideo() fires,
   JS switches to display:block + visibility:hidden + opacity:0 so the
   browser actually buffers the media without showing it.
   When playing: visibility:visible + opacity:1.
   Cover (z-index 3) stays at opacity:1 always — never manipulated. */
.previewThumb video.vid {
    position:       absolute;
    top:            0;
    left:           0;
    width:          100%;
    height:         100%;
    object-fit:     cover;
    transform:      none;   /* override .oldClip translateX(-50%) when both classes present */
    display:        none;
    visibility:     hidden;
    z-index:        4;   /* above .thumbCover (z-index 3) */
    pointer-events: none;
}

/* thumbCover always stays at opacity:1 — never manipulated by JS. */
.previewThumb .thumbCover {
    position: relative;
    z-index:  3;
}

/* ---- turnOff (X) and turnOn (play) icons ----
   Both are direct children of section.previewThumb (NOT inside the
   clipping div), so overflow:hidden on the inner div doesn't affect them.
   Desktop-only via @media (hover: hover).
   The SVGs had inline style="display:none" in the original template;
   those were removed in Phase 6.1.3 so CSS can control visibility. */

.previewThumb .turnOff,
.previewThumb .turnOn {
    position:        absolute;
    top:             6px;
    right:           6px;
    z-index:         25;
    color:           #fff;
    cursor:          pointer;
    text-decoration: none;
    display:         flex;
    flex-flow:       column nowrap;
    align-items:     flex-end;
    padding:         4px;  /* larger hit area beyond the 22×22 SVG */
}

/* Touch devices: hide both icons entirely */
@media (hover: none) {
    .previewThumb .turnOff,
    .previewThumb .turnOn {
        display: none !important;
    }
}

/* SVGs: hidden by default */
.previewThumb .turnOff svg,
.previewThumb .turnOn  svg {
    display:     none;
    width:       22px;
    height:      22px;
    flex-shrink: 0;
    filter:      drop-shadow(1px 1px 2px rgba(0,0,0,0.8));
}

/* Tooltip text: hidden by default, shown via jQuery fadeIn().
   The selector below MUST match or beat .previewThumb .turnOn span
   in styles_2603.css (specificity 0,2,1) which sets display:block.
   Using span.class adds an element selector → 0,2,1 — same specificity,
   and we appear later in the cascade so we win. */
.previewThumb .turnOff span.turnOff__label,
.previewThumb .turnOn  span.turnOn__label {
    display:       none;
    font-size:     14px;
    color:         #000;
    white-space:   nowrap;
    margin-top:    4px;
    background:    rgba(255,255,255,0.92);
    padding:       2px 7px;
    border-radius: 4px;
    box-shadow:    0 1px 3px rgba(0,0,0,0.3);
}

/* Show X icon on the actively playing card (desktop) */
@media (hover: hover) {

    body.previewsOn .previewThumb.is-previewing .turnOff svg {
        display: block;
    }

    /* Show play icon on card hover when previews are off (desktop) */
    body.previewsOff .previewThumb:hover .turnOn svg {
        display: block;
    }
}


/* ============================================================
   Phase 6.1.3 — topModels hover states (ported from scripts_2603.js)
   Originally: .topModels .item hover → JS fadeTo / fadeIn
   Now: pure CSS transitions. a.name is display:none in base CSS;
   we override on hover. a.fade dims on hover.
   ============================================================ */

@media (hover: hover) {

    .topModels .item,
    .movieModels__grid span,
    #tabCast div {
        position: relative;
    }

    .topModels .item:hover a.fade,
    .movieModels__grid span:hover a.fade,
    #tabCast div:hover a.fade {
        opacity: 0.6;
        transition: opacity 0.15s ease;
    }

    .topModels .item a.fade,
    .movieModels__grid span a.fade,
    #tabCast div a.fade {
        transition: opacity 0.15s ease;
    }

    .topModels .item:hover a.name,
    .movieModels__grid span:hover a.name,
    #tabCast div:hover a.name {
        display:    block !important;
        animation:  none;
        opacity:    1;
        transition: opacity 0.15s ease;
    }
}


/* ============================================================
   Phase 6.1.6 — Fix iOS double-tap on scene cards
   ============================================================
   On iOS Safari, any element with a CSS :hover rule that changes
   a visual property requires two taps: first tap activates the
   hover state, second tap fires the click.

   The base CSS has:
     .previewsOff .previewThumb .abso:hover { opacity: 1 }

   On touch devices this causes the double-tap. Fixes:
   1. touch-action: manipulation — removes 300ms tap delay and
      disables double-tap-to-zoom, allowing single-tap click.
   2. Suppress the :hover state on touch devices so first tap
      navigates immediately instead of triggering the hover.
   3. pointer-events: none on video.vid — the video element should
      never intercept taps; the .abso link above it handles clicks.
   ============================================================ */

@media (hover: none) {

    /* Single-tap navigation — no hover intermediary */
    .previewThumb {
        touch-action:             manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* Suppress the :hover opacity change that causes two-tap on iOS */
    .previewsOff .previewThumb .abso:hover,
    .previewThumb .abso:hover {
        opacity: 0;
    }

    /* Video should never capture taps — .abso above it handles navigation */
    .previewThumb video.vid {
        pointer-events: none;
    }
}


/* ============================================================
   CB COUNTDOWN BANNER — Phase 6.3
   #cbCountdownBanner + .cbCountdown overlay
   ============================================================ */

#cbCountdownBanner {
    position: relative;   /* anchor for the absolute countdown overlay */
    margin:   0 0 20px;
    padding:  0;
    line-height: 1;
}

#cbCountdownBanner picture,
#cbCountdownBanner img {
    display: block;
    width:   100%;
    margin:  0;
    padding: 0;
}

/* Countdown overlay — sits over the banner image.
   Top / left / right / bottom are % of the container, so the
   position stays proportional as the banner scales with viewport.
   The user will fine-tune these values after reviewing the draft. */
.cbCountdown {
    position:        absolute;
    bottom:          11%;        /* adjust to align with the image's number area */
    left:            68.5%;
    transform:       translateX(-50%);

    display:         flex;
    flex-flow:       row nowrap;
    align-items:     center;
    justify-content: center;
    gap:             0;       /* scales with viewport like the image */

    color:           var(--cbcd-color, #000);
    font-family:     sans-serif;
    text-align:      center;
    pointer-events:  none;      /* don't intercept clicks — the <a> beneath handles them */
}

.cbCountdown__unit {
    display:         flex;
    flex-flow:       column nowrap;
    align-items:     center;
    justify-content: center;
    min-width:       5.5vw;       /* keeps units evenly spaced as viewport shrinks */
}

.cbCountdown__num {
    display:     block;
    font-size:   2.5vw;
    font-weight: 300;
    line-height: 1;
	background: #fff;
	border-radius: 7px;
	padding: 5px 10px;
}

.cbCountdown__label {
    display:     block;
    font-size:   0.7vw;
    font-weight: 400;
    margin-top:  0.8em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
	color: #fff;
}

/* Mobile: units and font sizes adjust for narrower viewports */
@media (max-width: 767px) {
    .cbCountdown {
        gap:    1vw;
        bottom: 32%;
		left: 50%;
    }
    .cbCountdown__unit {
        min-width: 14vw;
    }
    .cbCountdown__num {
        font-size: 7vw;
    }
    .cbCountdown__label {
        font-size: 2.2vw;
    }
}


/* ============================================================
   #saleBubble — Mobile/tablet sale bar, fixed to bottom center.
   Rendered inline in index.tpl when a sale is active (tour only,
   no loggedIn2 cookie). Independent of hideonindex flag.
   Text animation reuses animationFrames keyframes (defined with
   .mobileBottomBar__join .element-animation above).
   ============================================================ */

/* ============================================================
   #saleBubble — Mobile/tablet sale bar, fixed to bottom center.
   Rendered in index.tpl when a sale is active (tour only, no
   loggedIn2 cookie). Independent of hideonindex flag.

   URL BAR POSITIONING APPROACH:
   Rather than computing lvh - dvh (which includes Chrome iOS's
   persistent ~50px bottom toolbar as a constant offset), we use
   a position:fixed wrapper sized to 100dvh. The bubble is
   absolutely positioned 5px from the wrapper's bottom, meaning
   it's always 5px from the actual visible viewport bottom —
   automatically correct as the URL bar shows/hides on all
   iOS browsers. Falls back to 100vh (layout viewport) on older
   browsers.

   JS adds .is-visible when countdown banner scrolls out of view.
   ============================================================ */

/* Hidden on desktop — wrapper and bubble both suppressed */
#saleBubbleWrapper,
#saleBubble {
    display: none;
}

@media (max-width: 1023px) {

    /* Wrapper: invisible fixed overlay sized to the dynamic viewport.
       Completely inert (pointer-events:none) so page content is unaffected. */
    #saleBubbleWrapper {
        display:         block;
        position:        fixed;
        top:             0;
        left:            0;
        right:           0;
        height:          100vh;   /* fallback for browsers without dvh */
        height:          100dvh;  /* dynamic viewport: updates as URL bar shows/hides */
        z-index:         998;
        pointer-events:  none;
    }

    /* Bubble: absolutely positioned within wrapper = 5px from dynamic viewport bottom */
    #saleBubble {
        position:       absolute;
        bottom:         5px;
        left:           50%;
        display:        block;
        transform:      translateX(-50%) translateY(calc(100% + 10px)); /* hidden: off-screen */
        transition:     transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        pointer-events: none;

        background:    -webkit-linear-gradient(bottom, rgba(46,143,195,1) 0%, rgba(105,185,220,1) 100%);
        background:    linear-gradient(to top,        rgba(46,143,195,1) 0%, rgba(105,185,220,1) 100%);
        color:         #fff;
        border-radius: 20px;
        font-size:     28px;
        box-sizing:    border-box;
        padding:       5px 20px;
        text-align:    center;
        width:         220px;
        text-shadow:   1px 1px 2px rgba(0,0,0,0.5);
        box-shadow:    2px 2px 5px rgba(0,0,0,0.5);
        font-family:   sans-serif;
        font-weight:   600;
    }

    /* Visible state: JS adds .is-visible when countdown banner scrolls out */
    #saleBubble.is-visible {
        transform:      translateX(-50%) translateY(0);
        pointer-events: auto;
    }

    #saleBubble a {
        color:   #fff;
        display: block;
    }

    #saleBubble .element-animation {
        display:          inline-block;
        transform-origin: 50% 50%;
        animation:        animationFrames linear 5s infinite;
        will-change:      transform;
    }
}

/* Manifesto logo — flows in normal document order directly below slide text */
.manifesto-logo {
    text-align:  center;
    margin-top:  15px;
    line-height: 1;
}


/* =============================================================
 * Phase 6.5.1 — Gallery Page, MOBILE ONLY (≤767px)
 * Desktop styles are completely unchanged.
 * All rules scoped inside the media query.
 * ============================================================= */

/* ---- You Might Also Like: scene card grid ----
 * Desktop: uses existing .alsolike horizontal float layout
 * Mobile: full-width grid matching index page
 * ---------------------------------------------------------------- */
.sceneList.alsolike {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 0 10px;
}

/* Each card fills its grid cell */
.sceneList.alsolike .previewThumb {
    width: 100%;
}

@media (max-width: 767px) {

    /* ── Tour page mobile layout ──────────────────────────────────
     *
     * The existing movie_player-trial.tpl handles its own layout:
     *   #trailerJoin { flex-flow: row nowrap } = player left, iframe right
     *
     * On mobile, stack them: player on top, iframe below.
     * ------------------------------------------------------------ */

    /* Make #trailerJoin stack vertically */
    #trailerJoin {
        flex-flow: column nowrap !important;
        margin-left: 0 !important;
        width: 100%;
    }

    /* Player takes full width */
    #trailerJoin .movie_wrapper {
        width:       100% !important;
        padding-top: 0    !important;
    }

    /* iFrame: full width, natural height */
    #signupframe {
        width: 100% !important;
        min-height: 680px;
        max-width: none !important;
        aspect-ratio: auto !important;
        margin-top: 0 !important;
        display: block;
    }

    /* Title + desc + tags inside #trailerJoin: already stacked since column */
    #trailerJoin .sectionTitle {
        margin: 16px 14px 6px;
    }

    #trailerJoin .movieDesc {
        margin: 0 14px 12px !important;
        font-size: 1.3rem !important;
        line-height: 1.55 !important;
    }

    #trailerJoin #tags {
        margin: 0 14px 16px !important;
    }

    /* ── Members page mobile layout ───────────────────────────────
     * #movieHeader: flex row title+dropdowns → stack vertically
     * .movieStage: full width
     * .movieLeft + .movieRight: no float, full width, stacked
     * ------------------------------------------------------------ */

    #movieHeader .left,
    #movieHeader .right {
        width: 100% !important;
    }

    /* Move player (.movieStage) to be full width */
    .movieStage {
        width: 100% !important;
        clear: both;
    }

    /* Members video player: full width */
    #mediabox_parent,
    #mediabox {
        width: 100% !important;
    }
    /* Poster: use native <video poster> with object-fit:cover.
       Hide mejs own poster layer to prevent double-poster on load. */
    #mediabox { object-fit: cover; }
    .mejs-poster { display: none !important; }

    /* .underPlayer: hide on tour (trial), keep for members */
    .tour .underPlayer:not(.join) {
        display: none !important;
    }



    /* Description + models: full width, no float */
    .movieLeft,
    .movieRight {
        float: none !important;
        width: 100% !important;
        margin-right: 0 !important;
    }

    /* ── You Might Also Like: 1 column on mobile ───────────────── */
    .sceneList.alsolike {
        grid-template-columns: 1fr !important;
        padding: 0;
    }

    /* Scene info / underPlayer on desktop tour is hidden by
     * movie_player-trial.tpl inline CSS — no need to re-hide here */

    /* ── Photo gallery mobile ──────────────────────────────────── */
    .photo_gallery_block {
        columns: 2 !important;
        column-gap: 8px !important;
        padding: 0 8px;
    }

}


/* =============================================================
 * Phase 6.5.1 — Gallery page
 * =============================================================
 *
 * DESKTOP: No layout rules here — the original CSS is untouched.
 *          #cbGalleryPage is a transparent wrapper (display:block,
 *          no max-width), inheriting the full width of #wrapper.
 *
 * YOU MIGHT ALSO LIKE: scene card grid (all viewports).
 *   Replaces the old .horizontal.alsolike float layout.
 *   On desktop → auto-fill ~4 cards per row.
 *   On mobile  → 1 per row (overridden in the media query below).
 * ============================================================= */

/* Scene card grid — matches index page .sceneList layout */
.sceneList.alsolike {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   20px;
    padding:               0 10px 20px;
    background:            none;
}
.sceneList.alsolike .previewThumb { width: 100%; }

@media (max-width: 1023px) {
    #movieHeader .left,
    #movieHeader .right { width: 100% !important; }
}

/* =============================================================
 * MOBILE ONLY  ≤767px
 * All rules below are scoped inside this media query.
 * Nothing here touches desktop styles.
 * ============================================================= */
@media (max-width: 767px) {

    /* ── TOUR: stack #trailerJoin vertically ────────────────────
     * Desktop: flex row (player left, iFrame right)
     * Mobile:  flex column (player top, iFrame below)
     * ---------------------------------------------------------- */

    #trailerJoin {
        flex-flow:   column nowrap !important;
        margin-left: 0             !important;
    }

    /* Give the player wrapper full width */
    #trailerJoin .movie_wrapper {
        width:          100%   !important;
        display:        flex   !important;
        flex-direction: column !important;
    }

    /* .movie_wrapper children visual order on mobile:
       player(0,DOM) → iframe(order:3) → title(order:4) → desc(order:5) → tags(order:6) */
    #trailerJoin #cbMobileIframe                 { order: 3 !important; margin-top: 10px;}
    #trailerJoin .movie_wrapper h1.sectionTitle  { 
		order: 4 !important; 
		margin-left: 0;
		line-height: 8vw;
		margin-bottom: 30px;
	}
    #trailerJoin .movie_wrapper > .movieDesc     { order: 5 !important; display: block !important; }
    #trailerJoin .movie_wrapper > #tags          { order: 6 !important; }
    #trailerJoin .movie_wrapper > #nomansland    { display: none  !important; }

    /* iFrame: full-width below the player */
    #signupframe {
        width:        100%   !important;
        max-width:    none   !important;
        aspect-ratio: auto   !important;
        min-height:   680px;
        margin-top:   0      !important;
        display:      block;
        border:       0;
    }

    /* ── TOUR: show models below iFrame ─────────────────────────
     * .movieLeft is hidden by movie_player-trial.tpl inline CSS.
     * Override for mobile so models (rows of 2) appear.
     * Hide the duplicate description (.movieDesc already shown above).
     * ---------------------------------------------------------- */
    .tour .movieLeft .movieDesc { display: none   !important; }
    .tour .movieLeft h2         { display: block  !important; }
    .tour .movieRight           { display: none   !important; }

    /* Hide the icon bar on tour (rating/playlist/watch/etc) */
    .tour .underPlayer:not(.join) { display: none !important; }

    /* ── MEMBERS: stack #movieHeader vertically ─────────────────
     * Desktop: flex row (title left, dropdowns right)
     * Mobile:  flex column
     * ---------------------------------------------------------- */
    #movieHeader {
        flex-flow:   column nowrap  !important;
        align-items: flex-start     !important;
        padding:     0 !important;
		max-width: none;
    }
	
	.categoryPage #movieHeader,
	.modelPage.custom #movieHeader,
	.modelPage #movieHeader {
		padding-top: 30px !important;
	}

    /* Player: full width */
    .movieStage          { width: 100% !important; clear: both; }
    #mediabox_parent,
    #mediabox            { width: 100% !important; }

    /* Members: stack desc and comments */
    .members .movieLeft,
    .members .movieRight {
        float:        none !important;
        width:        100% !important;
        margin-right: 0    !important;
    }



    /* You Might Also Like: 1 per row */
    .sceneList.alsolike {
        grid-template-columns: 1fr !important;
        padding:               0;
    }

    /* Photo gallery: 2 columns */
    .photo_gallery_block {
        columns:    2;
        column-gap: 8px;
        padding:    0 8px;
    }

}


/* =============================================================
 * Phase 6.5.1 — Gallery Page CSS
 * =============================================================
 * Desktop: zero layout changes.
 * All layout CSS is scoped inside media queries.
 * ============================================================= */

/* ── You Might Also Like grid (all viewports) ─────────────────
 * Replaces old float-based .horizontal.alsolike.
 * 3 columns desktop, 2 tablet, 1 mobile.
 * ------------------------------------------------------------- */
.sceneList.alsolike {
    display:    grid;
    gap:        20px;
    padding:    0 0 20px;
    background: none;
    /* Desktop default: 3 per row */
    grid-template-columns: repeat(3, 1fr);
}
.sceneList.alsolike .previewThumb {
    width: 100%;
}

/* ── Mobile iFrame copy — hidden on desktop ───────────────────
 * Added inside .movie_wrapper in movie_player-trial.tpl.
 * Controls: hidden ≥1024px, shown ≤1023px (replaces #signupframe).
 * ------------------------------------------------------------- */
#cbMobileIframe {
    display: none;
}


/* =============================================================
 * TABLET  768px – 1023px
 * Push iFrame below video; 2-col scene cards.
 * =============================================================  */
@media (min-width: 768px) and (max-width: 1023px) {

    /* Show mobile iFrame copy, hide desktop signupframe */
    #cbMobileIframe   { display: block; }
    #trailerJoin > #signupframe { display: none !important; }

    /* Stack trailerJoin vertically */
    #trailerJoin {
        flex-flow:   column nowrap !important;
        margin-left: 0             !important;
    }
    #trailerJoin .movie_wrapper {
        width:       100% !important;
        padding-top: 0    !important;
    }

    /* 2 scene cards per row on tablet */
    .sceneList.alsolike {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =============================================================
 * MOBILE  ≤767px
 * Single-column layout matching the requested order.
 * =============================================================  */
@media (max-width: 767px) {

    /* ── Tour: stack trailerJoin vertically ──────────────────── */
    #trailerJoin {
        flex-flow:   column nowrap !important;
        margin-left: 0             !important;
    }
    #trailerJoin .movie_wrapper {
        width:          100% !important;
        display:        flex !important;
        flex-direction: column !important;
    }

    /* Show mobile iFrame copy inside .movie_wrapper, hide desktop one */
    #cbMobileIframe                 { display: block; }
    #trailerJoin > #signupframe     { display: none !important; }
	
    /* Hide the empty .movieRight that trial template outputs for mobile */
    .tour .movieRight { display: none !important; }

    /* Members: stack movieLeft / movieRight */
    .members .movieLeft,
    .members .movieRight {
        float:        none !important;
        width:        100% !important;
        margin-right: 0    !important;
    }



    /* 1 scene card per row on mobile */
    .sceneList.alsolike {
        grid-template-columns: 1fr;
        padding: 0 14px;
    }

    /* Photo gallery: 2 columns */
    .photo_gallery_block {
        columns:    2;
        column-gap: 8px;
        padding:    0 8px;
    }
}


/* =============================================================
 * Phase 6.5.1 — Gallery Page CSS
 * ============================================================= */

/* iconPlayer width (moved from inline <style> in gallery.tpl) */
img.iconPlayer { width: 55px; }

/* You Might Also Like: 3 col desktop, side padding */
.sceneList.alsolike {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   20px;
    padding:               0 20px 20px;
    background:            none;
}
.sceneList.alsolike .previewThumb { width: 100%; }

/* Mobile iFrame copy (tour only) */
#cbMobileIframe    { display: none; }
#signupframeMobile { width: 100%; border: 0; display: block; min-height: 680px; aspect-ractio: auto;}

/* Streaming / Download dropdowns — shared style */
/* #cbDropdowns — streaming + download selects */
#cbDropdowns {
    display:       flex;
    flex-flow:     column nowrap;
    gap:           16px;
    padding:       12px 0 16px;
    margin-bottom: 10px;
	float: right;
	margin-right: 20px;
}

@media (max-width: 767px) {
	#cbDropdowns {
		float: none;
		margin-left: 20px;
		margin-right: 0;
	}
}

.movieStage {
	clear: both;
}

.darkmode .cb-dropdown-wrap { border-color: #333; }

.cb-dropdown-wrap { min-width: 180px; }

.cb-dropdown-label {
    display:        block;
    font-size:      0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          #033761;
    margin-bottom:  4px;
}

.darkmode .cb-dropdown-label {
	color: #fff;
}

.cb-dropdown-select,
.cb-dropdown-wrap select {
    width:            100%;
    font-size:        0.95rem;
    padding:          10px 36px 10px 12px;
    border:           none;
    border-radius:    8px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23003761' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 12px center;
    background-size:     12px;
    appearance:          none;
    -webkit-appearance:  none;
    cursor:              pointer;
    box-shadow:          0 1px 4px rgba(0,0,0,.12);
	height: auto;
	margin-top: 0;
	width: 300px;
}

@media (max-width: 1023px) {
	.cb-dropdown-select,
	.cb-dropdown-wrap select {
		width: 210px;
	}
}

.cb-dropdown-select:focus,
.cb-dropdown-wrap select:focus { outline: none; }
.cb-dropdown-locked { font-size: 0.85rem; color: #888; padding: 10px 0; }
.darkmode .cb-dropdown-select,
.darkmode .cb-dropdown-wrap select {
    background-color: #39394d;
    color:            #e0e0e0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235aadd6' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}



/* =============================================================
   TABLET  768–1023px
   ============================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
	
	#signupframeMobile {
		height: 830px;
		overflow:hidden;
		max-width: 590px;
		margin: 0 auto;
	}

    .sceneList.alsolike { grid-template-columns: repeat(2, 1fr); }

    /* Tour: iFrame below player */
    #cbMobileIframe {
		display: block !important; 
	}
	
    #trailerJoin > #signupframe { display: none  !important; }
    #trailerJoin {
        flex-flow:   column nowrap !important;
        margin-left: 0             !important;
    }
    #trailerJoin .movie_wrapper { width: 100% !important; }

    /* Tour: underPlayer hidden on tablet */
    .tour .underPlayer { display: none !important; }
    /* Members: show desktop flat underPlayer bar on tablet (unchanged from desktop) */
}

@media (max-width: 1023px) {
	
	.underPlayer a.container,
	.underPlayer div,
	.up-grid .up-rating {
		width: auto;
		height: auto;
		margin-right: 0;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
	}
	
	.underPlayer span.gothamy,
	.underPlayer p.gothamy,
	.underPlayer #info p {
		position: static;
	}

	.up-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		border-top: 1px solid #033864;
		padding: 10px 0 0;
		height: auto;
		place-items: center;
		border-bottom: 0;
	}
	
	.darkmode .up-grid { border: none; }
	.up-grid .container, .up-grid .up-rating {
		display: flex; flex-direction: column; align-items: center;
		justify-content: center; text-align: center; padding: 12px 4px;
		border: none !important;
	}
	
	.darkmode .underPlayer a:last-child {
		border: none !important;
	}
	
	.up-grid .container {
		display: flex;
		flex-flow: column nowrap;
	}
	
	.up-grid .container span.gothamy,
	.up-grid .up-rating span.gothamy {
		font-size: 0.9rem; margin-top: 4px; line-height: 1.2; white-space: normal;
		margin-top: 10px;
		color: #033864;
	}
	
	.darkmode .up-grid .container span.gothamy,
	.darkmode .up-grid .up-rating span.gothamy {
		color: #fff;
	}
	
	.up-grid .up-rating p.gothamy { 
		font-size: 3rem;
		margin: 0; 
		color: #033761;
		height: 42px;
		line-height: 42px;
	}
	
	.darkmode .up-grid .up-rating p.gothamy {
		color: #fff;
	}
	
	.up-grid img.iconPlayer { 
		position: static;
		margin-left: 0;
		width: 50px;
	}
	
	.up-grid #info {
		grid-column: 1 / -1; padding: 10px 14px;
		border: none;
		width: 100%;
		align-items: flex-start;
		border-top: 1px solid #033761;
		margin-top: 10px;
		padding-top: 20px;
	}
	
	.underPlayer #info p {
		margin: 0 0 0 25px;
		font-size: 23px;
		line-height: 24px;
	}
	
	.darkmode .up-grid #info { border: none; }
	.up-grid .up-watch  { order: 1; } .up-grid .up-images { order: 2; }
	.up-grid .up-screen { order: 3; } .up-grid .up-rating { order: 4; }
	.up-grid .up-fav    { order: 5; } .up-grid .up-more   { order: 6; }
	.up-grid #info      { order: 7; }
	
	.photo_gallery_block {
		width: 95%;
	}
	
	.rating_box span {
		width: 26px;
		height: 26px;
		margin-right: 5px;
		margin-top: 3px;
	}

}

/* Video controls: hidden on small phones only — tablet retains controls */
@media (max-width: 480px) {
    .mejs-controls { display: none !important; }
}

/* =============================================================
   MOBILE  ≤767px
   ============================================================= */
@media (max-width: 767px) {
	
	#signupframeMobile {
		height: 970px;
		overflow: hidden;
		max-width: 590px;
		margin: 0 auto;
	}

    /* ── TOUR: stack trailerJoin ─────────────────────────────── */
    #trailerJoin {
        flex-flow:   column nowrap !important;
        margin-left: 0             !important;
    }
    /* Reserve 16:9 space before player JS loads */
    #trailerJoin .movie_wrapper > div:first-child {
        min-height: 56vw;
    }
    #trailerJoin .movie_wrapper {
        width:       100% !important;
        padding-top: 0    !important;
    }
    #cbMobileIframe             { display: block !important; }
    #trailerJoin > #signupframe { display: none  !important; }

    /* Body text: 1rem minimum on mobile (up from 0.95em=15.2px desktop) */
    body { font-size: 1rem; line-height: 1.6; }


    /* Members: remove padding that creates black bars above/below video */
    .members .movie_wrapper { padding: 0 !important; }

    /* Sign Up heading */
    .moviesPage h2.joinText {
        font-size:    1.6rem;
		line-height: 1.9rem;
        margin: 20px 0;
        padding-left: 12px;
		font-weight: 600;
    }

    /* trailerViews: match bottom to left (5px) */
    #trailerViews { bottom: 15px !important; }

    /* ── MEMBERS: constrain player to viewport ───────────────── */
    /* movie_wrapper in members player has no #trailerJoin parent */
    .members .movie_wrapper,
    .members #mediabox_parent,
    .members #mediabox {
        width:     100% !important;
        max-width: 100vw !important;
    }
    .members #mediabox video {
        width:  100% !important;
        height: auto !important;
    }

    /* ── underPlayer: hide flat bar, show grid (members only) ── */
    .tour .underPlayer    { display: none !important; }
    .members .underPlayer { display: none !important; }
    .members .underPlayer.up-grid {
        display:               grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        height:                auto !important;
        border-bottom: none;
        padding:       25px 0 0;
    }
    .darkmode .members .underPlayer.up-grid { border-color: #333; }
    /* Remove fixed 100px height from original desktop rule */
    .members .underPlayer.up-grid .container,
    .members .underPlayer.up-grid .up-rating,
    .members .underPlayer.up-grid > div,
    .members .underPlayer.up-grid > a { height: auto !important; }
    /* Restore grid item ordering in mobile */
    .members .underPlayer.up-grid .up-watch  { order: 1; }
    .members .underPlayer.up-grid .up-images { order: 2; }
    .members .underPlayer.up-grid .up-screen { order: 3; }
    .members .underPlayer.up-grid .up-rating { order: 4; }
    .members .underPlayer.up-grid .up-fav    { order: 5; }
    .members .underPlayer.up-grid .up-more   { order: 6; }
    .members .underPlayer.up-grid #info      { order: 7; grid-column: 1 / -1; }

    

    /* ── Description font size (inline 22px override) ─────────── */
    .movieDesc {
        font-size:   1.3rem        !important;
        line-height: 1.4        !important;
        margin:      30px 14px 16px !important;
        padding:     0           !important;
        border:      none        !important;
    }

    /* ── Tour: show .movieLeft for models ────────────────────── */
    .tour .movieLeft {
        display:    block;
        margin:     0;
        padding:    0;
        box-sizing: border-box;
    }
    .tour .movieLeft .movieDesc { display: none !important; }
    .tour .movieRight           { display: none !important; }

    /* ── Members: stack left/right ──────────────────────────── */
    .members .movieLeft,
    .members .movieRight {
        float:      none !important;
        width:      100% !important;
        margin:     0    !important;
    }
    .members .movieRight { padding: 0 14px !important; }

    /* ── Models: 2 per row ───────────────────────────────────── */


    /* ── Streaming/download (moved by JS to below up-grid) ───── */
    .cb-members-dropdowns-mobile {
        padding:    12px 14px;
        box-sizing: border-box;
        width:      100%;
    }
    .cb-members-dropdowns-mobile .cb-dropdown-wrap select { font-size: 0.95rem; }
    /* Expand legacy .more span into list */
    .cb-members-dropdowns-mobile .download span.more {
        display:    block !important;
    }
    .cb-members-dropdowns-mobile .download span.more a {
        display:     block;
        padding:     9px 12px;
        font-size:   0.9rem;
        border-bottom: 1px solid #eee;
        color:       #003761;
        text-decoration: none;
    }
    .darkmode .cb-members-dropdowns-mobile .download span.more a {
        color:        #5aadd6;
        border-color: #333;
    }
    .cb-members-dropdowns-mobile .download span.first { display: none !important; }

    /* previewThumb is already position:relative in base CSS — no override needed */
    .previewThumb { overflow: hidden !important; }

    /* 1 per row */
    .sceneList.alsolike {
        grid-template-columns: 1fr;
        padding: 0 14px;
    }

    /* Photo gallery */
    .photo_gallery_block { columns: 2; column-gap: 8px; padding: 0 8px; }
}

@media (max-width: 480px) {
	#signupframeMobile {
		height: 900px;
	}
}

.mejs-poster {
	background-size: cover !important;
}

.right {
	float: right;
}

@media (max-width: 1023px) {

	.right {
		margin: 20px auto -20px;
    	text-align: center;
	}
	
}

@media (max-width: 767px) {
	
	.right {
		margin: 20px auto 20px;
	}
	
}

#fancybox-thumbs {
	display: none !important;
}

.moviesPage #featured.call2action a.watchButton {
	background: transparent linear-gradient(180deg, #4da2cf 0%, #0e86be 40%, #0e86be 100%) 0% 0% no-repeat padding-box;
	font-weight: 600;
	-o-box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.4);
	box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.4);
	-o-text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
	-webkit-text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
	-moz-text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
	white-space: nowrap;
}

@media (max-width: 767px) {
	.moviesPage #featured.call2action a.watchButton {
		font-size: 18px;
    	padding: 8px 30px;	
	}
}

@media (max-width: 767px) {
	.moviesPage #featured.call2action a.watchButton {
		font-size: 16px;
		margin-top: 5px;
	}
	.moviesPage #featured.call2action span {
		width: 100%;
		background: rgba(0,0,0,0.6);
		padding: 0 10px;
		box-sizing: border-box;
	}
	.moviesPage #featured.two span .title {
		display: none;
	}
	p#nomoretrailer {
		display: block;
		position: static;
		color: #fff;
		font-size: 19px;
		line-height: 25px;
		text-shadow: 2px 2px 2px rgba(0,0,0,0.6);
	}
}

@media (hover: hover) {
	.moviesPage #featured.call2action a.watchButton:hover {
		background: transparent linear-gradient(180deg, #4da2cf 0%, #0e86be 40%, #0e86be 100%) 0% 0% no-repeat padding-box !important;
	}
}


/* =============================================================
   Feature Films page (.modelPage.custom)
   ============================================================= */

#cbFeatureFilmsPage {
    padding-bottom: 40px;
}

/* Box grid: 4/row desktop */
.featureFilms section.banner {
    margin: 5px 0;
}

.featureFilms section.banner a {
    display: block;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.featureFilms section.banner a:hover { opacity: 1; }

.featureFilms section.banner img,
.featureFilms section.banner picture {
    width: 100%;
    display: block;
}

.featureFilms section.box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin: 5px 0;
}

.featureFilms section.box a {
    display: block;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.featureFilms section.box a:hover { opacity: 1; }

.featureFilms section.box img { width: 100%; display: block; }



/* Tablet: 2/row (matches mobile — avoids widow on 4-item rows) */
@media (min-width: 768px) and (max-width: 1023px) {
    .featureFilms section.box {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: 2/row */
@media (max-width: 767px) {
    .featureFilms section.box {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =============================================================
   About / Meet the Morecocks page (.modelPage.custom)
   ============================================================= */

.morecocksBios {
    max-width: 960px;
    margin: 20px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.morecocksBios .bioPerson {
    margin-bottom: 50px;
}

.bioCard {
    display:     flex;
    flex-flow:   row nowrap;
    gap:         30px;
    align-items: flex-start;
    background:  #e4eaec;
    padding:     20px;
    box-sizing:  border-box;
}

.darkmode .bioCard {
    background: #1a1a2e;
}

.bioCard__image {
    flex-shrink: 0;
    width:       360px;
}

.bioCard__image img {
    width:   100%;
    display: block;
}

.bioCard__info h3.gothamy {
    font-size:   clamp(1.3rem, 3.1vw, 2.5rem);
    font-family: 'Abel', sans-serif;
    font-weight: 400;
    line-height: 1.15;
    margin:      0 0 8px;
    text-transform: uppercase;
    color:       #003761;
}

.darkmode .bioCard__info h3.gothamy { color: #5aadd6; }

.bioCard__info .bioInfo em {
    font-size:  1.1rem;
    font-style: normal;
    color:      #404040;
    display:    block;
    margin-bottom: 8px;
}

.darkmode .bioCard__info .bioInfo em { color: #bbb; }

.bioCard__info .bioInfo a {
    display:     inline-block;
    margin-right: 10px;
    font-size:   1rem;
    color:       #404040;
}

.bioCard__info .bioInfo a:hover { color: #d6352c; }

.bioCard__info blockquote {
    font-size:   1.25rem;
    line-height: 1.5;
    color:       #1A618A;
    margin:      15px 10px 0;
    font-style:  italic;
}

.darkmode .bioCard__info blockquote { color: #5aadd6; }

.bioPerson > p {
    font-size:   1.1rem;
    line-height: 1.7;
    text-align:  justify;
    margin:      15px 0;
}

/* Mobile: stack image above text */
@media (max-width: 767px) {
    .bioCard {
        flex-flow: column nowrap;
    }
    .bioCard__image {
        width: 95%;
        margin: 0 auto;
    }
    .bioPerson > p {
        font-size: 1rem;
        text-align: left;
    }
}

/* ============================================================
   Model Bio page — carousel modifiers and mobile layout
   ============================================================ */

/* Scenes: 4 / 3 / 2 per view */
.cb-carousel.modelScenes .item {
    flex-basis: calc(25% - 9px);
}

@media (min-width: 768px) and (max-width: 1023px) {
    .cb-carousel.modelScenes .item {
        flex-basis: calc(33.333% - 8px);
    }
}

@media (max-width: 767px) {
    .cb-carousel.modelScenes .item {
        flex-basis: calc(50% - 6px);
    }
}

/* DVDs: 3 / 2 / 2 per view */
.cb-carousel.modelDVDs .item {
    flex-basis: calc(33.333% - 8px);
}

@media (min-width: 768px) and (max-width: 1023px) {
    .cb-carousel.modelDVDs .item {
        flex-basis: calc(50% - 6px);
    }
}

@media (max-width: 767px) {
    .cb-carousel.modelDVDs .item {
        flex-basis: calc(50% - 6px);
    }
}

/* Mobile: #modelInfo full-width block above bio text */
@media (max-width: 767px) {
    #modelInfo {
        width:   90%;
        margin:  0 auto 20px;
        float:   none;
        display: block;
    }
    #modelStuff {
        width:      95%;
        display:    block;
        margin:     0 auto;
        padding:    0;
    }
    #modelStuff h2,
    #modelStuff h3 {
        margin: 15px 0 5px 0;
    }
    #modelStuff p {
        font-size: 1rem;
        text-align: left;
        margin: 0 0 10px;
    }
}

@media (max-width: 767px) {
    /* Unified mobile heading scale — all major section titles */
    h1.sectionTitle,
    h2.sectionTitle,
    #trailerJoin .sectionTitle,
    .moviesPage h2,
    .dvdPage .newReleases div.scene .gothamy a,
    .sectionTitle,
    #modelStuff h2, #modelStuff h3, .custom h3,
    #movieHeader .sectionTitle, .moviesPage #movieHeader h1,
    .categoryPage .sectionTitle, .modelPage.custom .sectionTitle, .modelPage .sectionTitle {
        font-size:   clamp(1.3rem, 8vw, 2rem);
        line-height: 7vw;
        font-family: 'Abel', sans-serif;
        font-weight: 400;
    }
}


/* ============================================================
   Slot 4 CTA — unified structure
   ============================================================ */

.cta4 {
    text-align: center;
}

/* Mobile portrait banner — hidden on desktop (cta-desktop handles the hide/show) */
.cta4__banner--mobile {
    display: none;
	margin-top: 40px;
}

.cta4__banner--mobile img {
    width:   100%;
    display: block;
}

/* Shared logo + button — centred below banner on all breakpoints */
.cta4 .cta-bottom-logo {
    display:    block;
    margin:     30px auto -10px;
    height:     50px;
}

.cta4 .watchButton {
    display:       inline-block;
    margin-bottom: 20px;
}

@media (max-width: 767px) {
    /* On mobile: hide desktop banner, show portrait banner */
    .cta4 .cta-desktop { display: none; }
    .cta4__banner--mobile { display: block; }
}

.fancybox-lock .fancybox-overlay {
	z-index: 9999 !important;
}