/*
Theme Name:   RetroTube Child.
Theme URI:    https://www.wp-script.com/adult-wordpress-themes/retrotube/
Description:  This is Child theme of RetroTube
Author:       WP-Script
Author URI:   https://www.wp-script.com
Template:     retrotube
Version: 1.7.2
Text Domain:  retrotubechild
Tags:         
*/

/* master class & style*/
:root {
    --yt-bg: #0F0F0F;
    --yt-border: #3F3F3F;
    --yt-color: #AAAAAA;
    --yt-heading: #F1F1F1;
    --yt-hover: #fff;
    --grey-bg: #222;
}
#masthead, .left, .single_menu {background-color: var(--yt-bg)}

.trans-btn {
    background-color: rgba(0, 0, 0, 0) !important;
    border: 0 !important;
    font-size: 25px !important;
    color: var(--yt-color);
    padding: 0em 1em !important; 
    /*cursor: pointer;*/
}


/* change class .row with .myCommentFields in comments.php*/
.myCommentFields {}

/* remove main css */
.row {max-width: none;}
#content {margin-top: 0em;}
.site-content {padding: 0;overflow: unset;}
.site-main.with-sidebar-right {margin:0}
.happy-sidebar {margin-top: 0;}
.desc p:last-child {margin-bottom: 0}
#comments {margin-top: 0px}
.comment-reply-title {
    box-shadow: none;
    background: transparent;
    border-left-width: 0;
    border-left-style: none;
    text-align: center;
    margin: 0;
    padding: 0;
}

/* modify main css */
.page .entry-content {margin: 0 3%}
#filters {top:1.25em}
#sidebar {margin-top:15px;}
.site-footer {
    background: none;
    margin-top: 0;
    box-shadow: none;
    padding: 1em 0;
}
.footer-menu-container, .footer-menu-container ul {margin: 0;}
#video-about {text-align: left;}

/* temp css */
#site-navigation, .site-branding {display: none}

/* header css */
.hidden {display: none;}
.unhide {display: block;}
#masthead::after, #masthead::before { content: none }
#masthead {display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
	padding:0;
	position: sticky;
    top: 0;
    z-index: 9999;
    border-bottom: 1px solid #000;
    line-height: 0;
}
#masthead > div {align-self: center} 
.logo img {width: 250px;height: 50px;}
.profile-btn {color: #3ea6ff;
    display:block;
    padding: 5px 15px !important;
    font-size: 15px !important;
    border-radius: 50px;
    border: 1px solid var(--yt-border) !important;
    margin: 5px 12px;}
.profile-btn i {font-size: 22px !important}
.profile-btn:hover {background: #263850 !important;}
.searchbar {flex-basis: 60%;}
	.searchback {margin-right:20px;font-size: 25px;}
	.sb-search {margin-top: 0px}
	.profile {font-size: 25px;margin-left: 30px;}
	.profileMobile {display: none;}
	.searchbox{
		position:relative;
		min-width:50px;
		width:0%;
		height:50px;
		float:right;
		overflow:hidden;
		-webkit-transition: width 0.3s;
		-moz-transition: width 0.3s;
		-ms-transition: width 0.3s;
		-o-transition: width 0.3s;
		transition: width 0.3s;
	}
	input[type="search"].searchbox-input  {
		top:0;
		right:0;
		border:0;
		outline:0;
		background:#212121;
		width:100%;
		height:50px;
		margin:0;
		padding:0px 55px 0px 20px;
		font-size:20px;
		color:#ff4e4e;
	}
	input[type="search"].searchbox-input::-webkit-input-placeholder {
		color: #d74b4b;
	}
	input[type="search"].searchbox-input:-moz-placeholder {
		color: #d74b4b;
	}
	input[type="search"].searchbox-input::-moz-placeholder {
		color: #d74b4b;
	}
	input[type="search"].searchbox-input:-ms-input-placeholder {
		color: #d74b4b;
	}
	.searchbox-icon,
	input[type="submit"].searchbox-submit {
		width:50px;
		height:50px;
		display:block;
		position:absolute;
		top:0;
		font-family:verdana;
		font-size:22px;
		right:0;
		padding:0;
		margin:0;
		border:0;
		outline:0;
		line-height:50px;
		text-align:center;
		cursor:pointer;
		color: var(--yt-color);
		background:#212121;
		border-left: 2px solid #000;
	}
	.searchbox-open{
		width:100%;
	}
	
	.searchinput {position:relative}
	button.searchinput-reset {display:none;position: absolute;
    z-index: 1;
    color: #fff;
    top: 5px;
    right: 60px;
	border-color: transparent !important;
	background-color: transparent !important;
	background: transparent !important;
	border: none;
	padding: 10px;
	line-height: 0;
	font-size: 20px;
	}

	/* Create a column layout with Flexbox */
.row {display: flex;flex-direction: row;margin-right: 1%;margin-top:0}

.my-heading h1 {font-size: 20px;margin:0;font-weight: normal;}
.my-heading h2 {font-size: 16px;margin:0;font-weight: normal;}
.single-row {display: flex; flex-direction: row;margin: 1%;}
.single_menu {display:none;
position: absolute;
z-index: 9999;
max-width: 15%;
width:200px;
right: auto;
left: 0;
top: 0;
bottom: 0;
margin: 0;
overflow-x: hidden;
overflow-y: scroll;
}

/* Left column (menu) */
.left {
    display:block;
    /*flex-basis: 15%;*/
    margin-right: 1%;
    position: fixed;
    top: 0;
    width: 200px;
    height: 100%;
    padding-bottom: 50px;
}

.left h2 {
  padding-left: 8px;
}

.navbar-content {height: 100%;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    margin-top: 50px;}

/*.single_left {flex-basis: 77%;margin-right: 1%;}*/
.single_left {width: 100%;margin-right: 1%;}
/*.singleFullWidth {flex-basis: 100%;margin-right: 0;}*/
.singleFullWidth {width: 100%;margin-right: 0;}

/*.center {flex-basis: 63%;padding: 15px;}*/

/* Right column (page content) */
/*.right {flex-basis: 100%;margin: 1% 0;margin-left:210px;width: 360px}*/
.right {width: 100%;margin-left:215px;margin-top: 1%;}


/* Style the search box */
#mySearch {
  width: 100%;
  font-size: 18px;
  padding: 11px;
  /*border: 1px solid #ddd;*/
}

.active {background-color: #DB011A;}

/* Style the navigation menu inside the left column */
#myMenu {color:#fff;
  list-style-type: none;
  padding: 0;
  margin: 0;
  /*overflow-x: hidden;*/
  /*overflow-y: scroll;*/
  font-size: 16px;
  padding-bottom: 1em;
  border-bottom: 1px solid var(--yt-border);
}

#myMenu::-webkit-scrollbar {
  /*width: 5px;*/
}

#myMenu::-webkit-scrollbar-track {
  /*background-color: #0F0F0F;*/
  /*border-radius: 5px;*/
}

#myMenu::-webkit-scrollbar-thumb {
  /*background-color: #717171;*/
  /*border-radius: 5px;*/
}

/*#myMenu::-webkit-scrollbar-thumb:hover {*/
/*  background: #555; */
/*}*/

#myMenu li a {
    color:#ccc;
  padding: 5px 12px;
  text-decoration: none;
  display: block
}

#myMenu li a:hover {
  background-color: #DB011A;
}

.footer-menu-container ul li {display:block}

/* header css end*/

#more {display: none;}

.player_top {margin:10px 0;text-align:center}

.my-post-title {
    margin: 10px 0;
    display: flex;
    text-align: left;
}
.entry-title {
    font-size: 20px;
    font-weight: normal;
    display: inline;}
.my-like-ratio {margin: auto 0;margin-left: 1%;}
.title_icon {margin-left: 15px;}

.tag-style {border: 1px solid;
    border-radius: 5px;
    color: #ddd;
    padding: 4px 8px;
    display: inline-block;
    margin: 5px 5px 5px 0;
    border-color: #db011a;
}


/* Under Player Button or ToobBox  */
        .video_toolbar {margin-top: -5px;margin-bottom: 20px;display: flex;justify-content: space-between;}
        section.video_toolbar button {
            padding: 10px;
            background-color: #282828 !important;
            color:var(--yt-color);
            border: 3px solid #333;
            margin-right: 5px;
            border: none;
            border-radius: 5px;
            font-size: 15px;
            /*flex-basis: fit-content;*/
            flex-grow: 1;
            
        }
        .video_toolbar button:last-child {margin-right: 0}
        .video_toolbar i {margin-right: 10px;font-size: 20px;}
        .video_toolbar .like_dislike {flex-grow: 2;}
        .toolbar_more {width: 5%;}
        /* tab content css */
        .video_toolbar button.active {background-color: #3A3A3A !important;}
        .tabcontent {display: none;}

.video_toolbar ul {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-content: stretch;
    -ms-align-content: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-align-items: stretch;
    align-items: stretch;
    height: 42px;
    line-height: 42px;
    position: relative;
    z-index: 20;
    padding: 0;
}
    
 .video_toolbar ul li {
    padding: 0 8px;
    margin: 1px;
    -webkit-flex-shrink: 0;
    -ms-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
    text-align: center;
    -webkit-text-shadow: 0 2px 2px #000;
    -moz-text-shadow: 0 2px 2px #000;
    text-shadow: 0 2px 2px #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #282828;
    height: 100%;
    font-size: 1.2em;
    position: relative;
    list-style: none;
 }
 .like_dislike {margin-right: 5px;text-align: center;background-color:#000;color:#fff;;border-radius: 5px;}
 .like_dislike i {font-size: 25px;}
 .like_a {float: left;
    padding: 10px 8%;
    background-color: #282828;
    color:var(--yt-color);
    border-radius: 5px 0 0 5px;}
 .like_a:hover {color:#00BD8F;}
 .liked {float: left;
    padding: 10px 8%;
    background-color: #282828;
    color:#777;
    border-radius: 5px 0 0 5px;
    cursor: not-allowed}
 .dislike_a {float: right;
    padding: 10px 8%;
    background-color: #282828;
    color:var(--yt-color);
    border-radius: 0 5px 5px 0}
 .dislike_a:hover {color:#E34449;}
 .disliked {float: right;
    padding: 10px 8%;
    background-color: #282828;
    color:#777;
    border-radius: 0 5px 5px 0;
    cursor: not-allowed}
 /*.dislike {font-size:25px}*/
 .like #more {margin-right: 0;}
 .grey-link {font-size: inherit}
 /*.grey-link,.likes_count,.rate_seprator,.dislikes_count,.dislike {font-size: 25px;}*/
 
/* popup */
.popup {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
}

.popup-content {
  background-color: #282828;
  color:#fff;
  margin: 10% auto;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  width: 80%;
  max-width: 800px;
  text-align: center;
  position: relative;
}

button#closeProfilePopup, button#closeCommentPopup, button#closeDownloadPopup, button#closeSharePopup {
  position: absolute;
  top: -30px;
  right: -30px;
  background-color: red;
  border: none;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  color: #fff;
  padding: 0;
  margin: 0;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

button#closeProfilePopup:hover, button#closeCommentPopup:hover, button#closeDownloadPopup:hover, button#closeSharePopup:hover {
    background-color: red !important;
  color: #282828 !important;
  box-shadow: none;
}

.popup img {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.popup:before {
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #fff transparent;
}
    
/* Skipto  */
    
.timeline {
    clear: both;
    margin-top: 5px;
    display: block;
    overflow: hidden;
    
}
    
.timeline div {
    width: 19%;
    margin: .5%;
    position: relative;
    display: block;
    float: left;
    vertical-align: top;
    zoom: 1;
    overflow: hidden;
    cursor: pointer;}

.timeline div span {
    display: block;
    width: 100%;
    position: relative;
    height: 0;
    padding: 56% 0 0;
    overflow: hidden;
    background-color: rgba(0,0,0,.1);
    border-bottom: 2px solid #080b0e;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;}
    
.timeline div span img {
    position: absolute;
    display: block;
    width: 100%;
    max-height: 200%;
    left: 0;
    top: 0;
    margin: auto;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    z-index: 1;}
    
.timeline div strong {
    display: inline-block;
    position: absolute;
    right: 2px;
    bottom: 5px;
    background-color: #080b0e;
    font-size: .8em;
    padding: 1px 4px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    z-index: 2;}
    
button.SkiptoButton {color: #ddd;
    color: #ddd;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    text-transform: capitalize;
    background-color: rgba(0,0,0,.2);
    display: inline-block;
    padding: 4px 8px;
    display: flex;
    margin: 0 auto 2px;}
    
/*toolbar model*/
.share_continer, .download_continer, .comments_continer {display:none}
/*toolbar model*/
.modal-continer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
    background-color: hsla(210,8%,5%,0.5);
    z-index: 9999;
}
.uModal {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 15px;
    background-color: #3A3A3A;
    /* color: #fff; */
    border: 1px solid #808080;
    border-radius: 10px;
    /* scroll bar*/
    /*height: 90%;*/
    /*overflow-y: scroll;*/
    /*border-radius: 10px 5px 5px 10px;*/
}
.uModal::-webkit-scrollbar {
  width: 5px;
}
.uModal::-webkit-scrollbar-track {
  background-color: #808080;
  border-radius: 5px;
}
.uModal::-webkit-scrollbar-thumb {
  background-color: #000;
  border-radius: 5px;
}
.modal-close {
    font-size: 18px;
    /* margin-top: -50px; */
    cursor: pointer;
	position: absolute;
    right: 3%;
    margin-top: 1px;
}
.continer-heading {
	/* display: inline-block; */
	/* width: 90% */
    font-size: 20px;
    letter-spacing: 1px;
	/* background-color: #282828; */
	/*background-image: linear-gradient(to right, #282828, transparent);*/
	background-image: linear-gradient(to right, #000, transparent);
    color: #fff;
    padding: 0.4em 0.8em;
    font-weight: normal;
    border-left-width: 6px;
    border-left-style: solid;
	border-color: #db011a;}
.continer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 15px 0;
    gap: 15px;
}
.download-link {
    border: 1px solid;
    border-radius: 5px;
    color: #fff;
    padding: 10px 20px;
    display: inline-block;
    /*margin: 5px 5px 5px 0;*/
    border-color: #db011a;
}
.-ms-continer-content button, .-o-continer-content button {margin: 15px}

/*shadow*/
.navShadow {position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
    background-color: hsla(210,8%,5%,0.5);
    z-index: 99999;}
    
#footer {
    border-top: 1px solid #000;
}
.uCopyright {text-align: center;}
    
/*@media screen and (min-width: 991.98px) {*/
/*    .right {}*/
/*}*/

@media (min-width: 767.98px) {
    .uModal {
        /*min-width: 60%;*/
        max-width: 40%;
        margin: auto;}
}
   
    
@media screen and (max-width: 1199.98px) {
 .left {flex-basis: 25%;}
 #main .thumb-block {width:33.33% !important;}

}
    
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 991.98px) {
    .menu-btn {order: 1;flex-shrink: 0;}
    .trans-btn {font-size: 35px !important;padding: 0em 0em !important;}
    /*#main .thumb-block {width:33.33% !important;*/
    .row {margin: 0 1.5%;}
    /*.single_menu {left: 0;max-width: 50%;}*/
    .profile-btn {display: none;}
	.profileMobile {position: sticky;
    	top: 0;
    	display: flex;
    	justify-content: space-around;
    	padding: 10px;
    	font-size: 30px;
    	color:#000;
    	background-color: #ddd;}
	.profileMobile span {border-right: 1px solid #ccc;padding-right: 20px;}
	.profileMobile span:last-child {border-right: none;padding-right: 0;}
    .navShadow-close {
        float: left;
        margin-top: 10px;
        cursor: pointer;
        font-size: 18px;
        }
    .left {padding-bottom: 0;
    /*width: 230px;*/
    }
    .navbar-content {margin-top: 0;}
    .single_menu, .left {display:none;
    position: absolute;
    z-index: 9999;
    right: 0;
    left:auto;
    max-width: 60%;
    width: 30%;
    top:0;
    bottom: 0;
    margin:0;
    overflow-x: hidden;
    overflow-y: scroll;}
    #myMenu {overflow-x: auto;overflow-y: auto;font-size:20px}
    #myMenu li a {padding: 6px 0 6px 20px;}
    .right {margin-left: 0;}
    .entry-title {display: block;margin: 0 1%;}
}

@media screen and (max-width: 767.98px) {
    #masthead {padding: 1%}
    .logo {flex-basis: 60%;}
	/*.logo img {width: 100%;}*/
	.searchbar {flex-basis: 15%;}
	.searchbox-icon {background-color: var(--yt-bg);
	font-size: 28px;
	border-left: none;
	/*line-height: 47px;*/
	padding-left: 5px;}
	input[type="submit"].searchbox-submit {border-color: #0F0F0F!important;background-color: #0F0F0F!important;}
	button.searchinput-reset {right: 50px}
	.row {flex-direction: column;margin: 0;}
    /*.single_menu {right: 0;left: auto;max-width: 50%;}*/
    .single-row {flex-direction: column;margin:3px 0 0}
	section.video_toolbar button {padding: 5px;}
	.video_toolbar {margin-bottom: 0;margin: 5px 1%;}
	.video_toolbar i {margin-right: 0;font-size: 25px;}
	.comments-txt, .shareButton span, .downloadButton span {display:none}
	.comments-number {margin-left: 5px;font-size: 20px;}
	.tablinks i {margin-right: 0}
	.tablinks span {display: none}
	.page-header {margin-bottom: 0;}
	.under-video-block h2 {margin-top:0}
	.widget-title {margin: 3%;}
	.desc {padding: 0 3%}
	#filters {
	    /*right: 5%;*/
	    top: 0.35em;
	}
	.more-videos {right: 20px;}
    #main .thumb-block {width:50% !important;}
    .timeline {
    display: flex;
    overflow-x: auto;
    padding-bottom: 6px;}
    .timeline .item {min-width: 38%;}
    .uModal {margin: 0 3%}
    
    /*share button: addtoany */
    .addtoany_list {
        display: flex;
        justify-content: center;
        flex-flow: wrap;}
    .addtoany_list a {padding:5px}

}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .left, .single_menu {max-width: 60%;width: 55%}
    .my-like-ratio {margin-left: 0;}
    .my-post-title {text-align: center}
}

@media (max-width: 420px) {
    
	}