/*
Site: 2boys.tv,
Author: Christopher Willes
Date: July 2025,
Version: 1.0
*/


/* GENERAL */

html, header, body {
	font-family: "courier new", sans-serif!important;
	font-size: 15px;
	line-height: 1.2;
	font-weight: 590;
	scroll-behavior: smooth;
}

#splash {
   position:fixed;
    top: 0;
    width: 100vw;
	height: 100vh;
    left: 0;
	z-index:999999;
	background: black;
	color: white;
	
}
#loading {
	position:absolute;
	top: calc(50% - 50px);
	Left: calc(50% - 250px);
	text-align: center;
    animation: fade 2s infinite ease;
	padding: 50px;
	width: 400px;
}

#enter {
    position:absolute;
	top: calc(50% - 50px);
	Left: calc(50% - 250px);
	text-align: center;
    animation: fade 2s infinite ease;
	padding: 50px;
	width: 400px;
	display:none;
	
}
#enter:hover {
	cursor:pointer;
}
@keyframes fade {
	0% {
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}


.content_inner {
	padding: 0px 50px 250px 50px;
}
.q_logo {
	display:none;
}
.pulse {
	display:none;
}
.ajax_loader_1 {
	text-align:center;
	animation: fade 2s infinite ease;
}
#boys-title {
	position: fixed;
    left:50px;
    top:50px;
    transition: all .8s ease;
	background:black;
	a {
		color: white
	}
}

#boys-title:hover {
		cursor:pointer;
	}
#boys-subtitle{
    position: fixed;
    right:50px;
    top:50px;
    color:black;
    background:white;
    cursor:default!important;
    transition: all .8s ease;

}

#boys-title, #boys-subtitle {
	font-weight: 590;
	font-size: 15px;
	z-index: 9999!important;
}

p {
	margin: 0 0 15px;
	line-height: 1.4;
	font-weight: 590;
	font-size: 15px!important;
}
p.p2 {
    margin: 0 0 15px;
	line-height: 1.4;
}
.upcoming p, .upcoming p a {
	color:#ff0000;
}
.subtitle{
	color:black;
	background-color:white;
	padding:5px;
	font-weight:800;

}
.subtitle3{
	color: white;
    font-family: 'courier new', serif;
    background-color: none;
    font-weight: 800;
    font-size: 25px;
}
p a, a.venobox p{
	font-style: italic;
	color: #000000;
	animation: blink 0.5s infinite linear;
	
}

#enter:hover {
	cursor:pointer;
}
@keyframes  blink{
	0% {
		opacity: 0.7;
		color:#000000;
	}
	50% {
		opacity: 1;
		color:#818181;
	}
	100% {
		opacity:0.7;
		color:#000000;
	}
}



.sort p a, .sort p span{
	/* background: black; */
	/* color: white; */
}
p a:hover{
	color: grey;
}
a {
	text-decoration: none;
	transition: all .2s ease;
	border-bottom: none;
	color: black;
}
h2, .h2, h2 a {
    color: #000;
   font-family: 'courier new', serif;
    font-size: 15px;
    font-weight: 590;
    letter-spacing: 0;
	text-transform:none;
}

h6,
.h6,
h6 a {
	color: #0a0a0a;   			
	text-transform: none; 
    margin-top: .2em;
    font-size: .8em;
	font-weight: 590;
}

a:hover {
	text-decoration: none;
	cursor: pointer;
}
#enter a{
	color: white!important;
}

svg {
	display:none;
}

/* header */
header {
	background: white;
	z-index: 8888;
	opacity: 1;
}

nav.main_menu > ul > li > a  {
	font-size: 15px!important;
	font-family:'courier new';
	color:black;
	font-weight: 590!important;
	}

nav.main_menu>ul>li>a {
    position: relative;
    margin: 0 0 0 15px;
    text-transform: capitalize;
}

.q_logo a span {
display:none;
}
.about-menu {
	position: relative;
	float: left;
	padding-top: 25px;
	padding-bottom: 25px;
}
.about-menu span {
	position:relative;
	/* padding: 5px; */
	font-size: 12px;
	font-weight: 590;
}
.about-menu span:hover {
	cursor:pointer;
}
.about-text {
    padding-top: 20px;
    transition: all .5s ease;
	
}

.about-text p {
    color: black;
    font-size: 12px !important;
	line-height:1.4;
	padding: 0;
}
/**** VIDEO BG ***/

#secret-video {
	position: fixed;
	width:110vw;
	top:0;
	left:0px;
	z-index:99999!important;
	opacity:0;
	pointer-events:none;
}
#white-video {
    position:relative; 
	z-index:0!important;
	opacity: 0;
	height: 105%!important;
	object-fit: fill;
	
}

.content, #secret-video, #white-video, #boys-title, #boys-subtitle {
	transition: all 5s ease-in-out;
}

header {
transition: opacity 5s ease-in-out;
	
}



/* CONTENT */

.content .container .container_inner.page_container_inner, .full_page_container_inner {
    padding: 75px 0 0;
}

.vc_column_container {
   padding-left: 2vw;
   padding-right: 2vw; 
}
.vc_col-sm-12 {
	 padding-left: 0vw;
   padding-right: 0vw; 
}

.vc_row {
    /* margin-top: 10px; */
}

/* Welcome Page */

.welcome-content {
	position: relative;
	width: 25%;
	float: left;
	padding: 0px;
	margin: 30px;
	display:none;
	padding: 15px;
	p   {
		font-size: 12px!important;
    }
}
.flexslider, .portfolio_slider {
    margin: 0 0 0px!important; }

.welcome-content.audio{
	width: 270px;
	height: 25px;
	padding: 5px;
}
.image-wrapper img{
	width:100%;
	padding: 0px;
	transition: all .8s ease;
	
}
.welcome-content * .wpb_video_wrapper {
padding-top: 0px!important;
	
}
.welcome-content.video {
	position: relative!important;
	width: 400px;
	padding: 5px;
	height: 228px;
}


.welcome-content * iframe {
    transition: filter 0.5s ease;
    width: 400px;
    height: 228px!important;
    position: relative!important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
.welcome-content.audio * iframe {
    transition: filter 0.5s ease;
    width: 100%;
    height: 20px!important;
    position: relative!important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.welcome-content.portrait * iframe {
height: 328px!important;
}


.welcome-content.video.portrait {
	width: 190px;
	height: 328px;
}

.portrait-2 iframe, .portrait-2 {
	height: 600px!important;
}

.welcome-content * iframe:hover, .tv * iframe:hover {
    -webkit-filter: blur(0px);
    /* filter:blur(0px); */
}

.tv * iframe {

}

/* Curio */
.curio-video-box {
	position: relative;
	height: 300px;
	width: 100%!important;
	overflow: hidden;
	 display: block;
}
.curio-video {
	position: absolute!important;
	left: 50%;
  transform: translateX(-50%);
	height: 100%;
	
}

/* radio & archive page */ 
.radio-content, .archive-content {
	padding: 50px 0px 150px 0px;
	display: none;
}
.archive-header, .radio-header {
	padding: 10px 0px 5px 0px;
}
.archive-header {
	
}
.archive-header:hover {
	cursor: pointer;
	background: black;
}
.archive-header:hover p {
	color: white!important;
}
.radio-header:hover {
	cursor: pointer;
}

/*** NEWER AUDIO ****/ 

#audio-player-radio, #audio-player-archive {
    z-index: 999!important;
    width: calc(100% - 20px);
	height: 50px;
	margin: 25px 0px 25px 0px;
    text-align: center;
    transition: all 2s ease;
}
.welcome-content #audio-player-radio, #audio-player-archive {
	height: 20px;
	margin: 0px;
}

#audio-player-radio audio, #audio-player-archive audio {
	display:block;
	z-index: 999!important;
}


  .radio-content #audio-player-radio .plyr { 
   --plyr-color-main:none; 
   --plyr-audio-control-color: #fff;
   --plyr-audio-controls-background: black;
   --plyr-control-radius:0px;
   --plyr-range-track-height:1px;
   --plyr-control-icon-size: 25px;
   --plyr-progress-loading-background:#fff;
   --progress-loading-size: 500px;
   --plyr-range-thumb-shadow: none!important;
   --plyr-range-thumb-background: white;
   --plyr-range-thumb-height: 13px;  
  }
 
.archive-content #audio-player-archive .plyr, #audio-player-archive .plyr { 
   --plyr-color-main:none; 
   --plyr-audio-control-color: black;
   --plyr-audio-controls-background: white;
   --plyr-audio-control-background-hover: black;
   --plyr-control-radius:0px;
   --plyr-range-track-height:1px;
   --plyr-control-icon-size:25px;
   --plyr-progress-loading-background:black;
   --progress-loading-size: 500px;
   --plyr-range-thumb-shadow: none!important;
   --plyr-range-thumb-background: black;
   --plyr-range-thumb-height: 13px;  
	
  }
 .audio #audio-player-radio .plyr .plyr__time {
	font-weight: 590;
	font-size: 10px;
	font-family: 'courier new', serif;
	
	}
  .plyr--audio .plyr__controls {font-weight: 700;padding: 5px;}
  .plyr__time {
    padding-left: 10px!important;
    position: relative;
    font-weight: 590;
	font-size: 10px;
}
  .plyr__tooltip {display:none;}



/**** INSTRUCTIONS ***/
.instruction, div.section.instruction {
    position: fixed;
    z-index: 999999!important;
    max-width: 200px;
    min-width: 100px;
    background:black;
    padding: 10px;
    opacity: 0;
    transition: opacity 0.1s ease;
    p {
		color:white;
    font-size: 11px!important;
	}
}

/* ROUGH ANNOTATIONS*/
.rough-annotation {
    z-index:9999;
	display:block;
    } 

.rough-spacer {
    height: 10px;
    margin: 5px 0px 15px -2.5%;
    width: 105%!important;
}
/* menu border */
.border {
	position: absolute;
	left:0px;
	height: 10px;
	width: 100%!important;
	top: -10px!important;
	z-index: 999;
}

/* TV page borders */
.tv-border2{
	position: fixed;
	top: -10px;
	left: 35%;
	height: 120%;
	width: 1px!important;
	z-index: 999;
}

.tv-border1{
	position: fixed;
	top: -10px;
	left: 65%;
	height: 120%;
	width: 1px!important;
	z-index: 999;
}



/**** GENERAL EFFECTS ***/
.blur {
	-webkit-filter: blur(5px);
    filter:blur(5px);
    z-index:1;
    }
.blur2 {
	-webkit-filter: blur(5px) saturation(0%) brightness(2);
    filter:blur(5px) saturate(0) brightness(1);
    z-index:1;
	opacity: 0.5;
	pointer-events:none;
    } 
 
.radio-header, .archive-header, .sort-block{
	transition: all .3s ease;
}  
.show {opacity:1!important; pointer-events:all;}
.hide {opacity:0!important; pointer-events: none;}
.dim {opacity:0.5;}
img {transition: all .5s ease;}
.live img {
	position: fixed;
	top: 40px;
	z-index: 999999!important;
	left: calc(50% - 150px);
	width: 300px;
	transition: all .2s ease;
}

.live img:hover {
	transform: scale(1.2); 
}
.live {
display:none;
}
.dark {
	color:white!important;
	background: black!important;
	.rough-annotation path {
		stroke: white;
	}
	a {
		background: none!important;
	}
	p {
		color: white;
	}
	
	.radio-header:hover p, .radio-header:hover a {
	color: red!important;
	}
	/**** INSTRUCTIONS ***/
	.instruction {
    color:black;
	background:white;
	}
	#boys-subtitle span, #boys-title span {
    color:black;
    background:white;

	}
	.sort a{
	/* background: white!important; */
	/* color: black!important; */
}

}

.gone {
	display:none!important;
}


/* VENO LIGHTBOX*/
.vbox-container img {
    max-width: 90vw;
    max-height: 80vh!important;
}
 .vbox-container {
     overflow-y: hidden;
}
 .wpb_wrapper a.venobox:first-child {
     /* padding-bottom: 25px; */
     font-weight: 400;
}
 .venobox {
     display: inline-block;
     /* margin-bottom: 50px!important; */
}
 .vbox-title {
     font-size: 12px!important;
     height: 80px!important;
     background: rgba(255, 255, 255, 0.0)!important;
     font-family: "Helvetica Neue", Arial, sans-serif!important;
}
 .vbox-close {
     font-size: 75px!important;
     right: 20px;
     top: 0px;
     padding: 0px;
     height: 90px!important;
     font-weight: 100!important;
     color: var(--wp--preset--color--white) !important;
     font-family: "Helvetica Neue", Arial, sans-serif!important;
}
 .vbox-next, .vbox-prev {
     height: 75px;
     width: 75px;
}
 .vbox-next {
     right: 7%;
}
 .vbox-prev {
     left: 7%;
}
 .vbox-next span {
     height: 60px!important;
     width: 60px!important;
     right: 20px;
     border: 2px solid transparent;
     border-top-color: var(--wp--preset--color--white) !important;
     border-right-color: var(--wp--preset--color--white) !important;
}
 .vbox-prev span {
     height: 60px!important;
     width: 60px!important;
     left: 20px;
     border: 2px solid transparent;
     border-top-color: var(--wp--preset--color--white) !important;
     border-right-color: var(--wp--preset--color--white) !important;
     z-index: 10000!important;
}
 .figlio {
     box-shadow: none;
     max-width: 65%!important;
}
/* MORE DOUCMENTATION LAYOUT ***INTENTIONAL COMMENT OUT***
.more_facts_button .more_facts_button_arrow {
     display: none;
}
 .more_facts_button {
    margin-top:20px;
}
 .more_facts_button .more_facts_button_text {
     display: block;
     font-size: 15px;
     font-weight: 400;
     text-transform: uppercase;
     padding: 10px;
     margin-left:15px;
     border: 1px solid black;
     max-width:200px;
     color: black;
}
 .more_facts_button_text:hover {
     text-decoration:underline;
}
 .more_facts_button:hover {
     color: black;
     cursor:pointer;
}
 .more_facts_inner .full_section_inner{
     display: grid;
     grid-template-columns: 0px 6fr 6fr 6fr;
     grid-gap: 0px;
     align-items:center;
}
 .more_facts_inner .wpb_video_widget, .more_facts_inner img {
     z-index:999;
     position:relative;
     padding:0px!important;
     float:left;
}
 .more_facts_inner .wpb_video_widget{
     max-width:100%;
}