*{
	margin:0px;
	padding:0px;
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
#k{}
body{
	font-family: "Roboto", sans-serif;
}
.favriCon{
	width:18px;
	height:18px;
 margin-left: auto;
 cursor:pointer;
}

.comment-section.skel {
    display: flex;
    width: 100%;
    margin-bottom: 8px;
    align-items: flex-start;
    opacity: 0.7; 
    animation: pulse 1.5s ease-in-out infinite;
}

.skeleton-avatar {
    width: 32px; 
    height: 32px;
    border-radius: 50%; 
    background: #141414;
    margin-right: 10px; 
    flex-shrink: 0;
}

.skeleton-text {
    
    height: 10px; 
    border-radius: 4px; 
    margin-bottom: 8px;
}

.skeleton-username {
    width: 120px; 
}

.skeleton-date {
    width: 60px; 
    margin-left: 10px; 
}

.skeleton-menu { 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 40px;
    margin-left: 10px;
}


.skeleton-text, .skeleton-avatar {
background: linear-gradient(
    90deg,
    #1e1e1e 25%,
    #2a2a2a 37%,
    #1e1e1e 63%
  );    background-size: 200% 100%;
    animation: shimmer 2s infinite linear;
}

@keyframes shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}
#video::-webkit-media-controls,
    #video::-webkit-media-controls-panel,
   #video::-webkit-media-controls-play-button,
    #video::-webkit-media-controls-volume-slider,
    #video::-webkit-media-controls-timeline,
    #video::-webkit-media-controls-current-time-display,
    #video::-webkit-media-controls-mute-button,
    #video::-webkit-media-controls-fullscreen-button,
    #video::-webkit-media-controls-enclosure {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
    }

    #video::-moz-media-controls {
      display: none !important;
    }

    #video::--webkit-media-controls-start-playback-button {
      display: none !important;
    }


.container-video{
	display:inline-block;
	width:65%;
}
#container-video-list{
	width:34%;
	float:right;
	overflow:hidden;
}
.Satoru {
  animation: itadori 0.3s;
}

@keyframes itadori {
  60% {
    opacity: 0;
  }
}

.bg-content{
	background:#FAFAFA;
    font-family: 'Roboto', sans-serif !important;
}

.subscribe-badge {
  display: flex;
  align-items: center;
  color: #fff;
  border-radius: 500px;
  padding: 10px 1px 1px 2px;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.channel-info {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.row-1 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.channel-name {
  font-weight: 600;
}

.verified {
  background: #0088B3; 
  color: #fff;
  font-size: 9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.subscribers {
  color: #aaa;
  font-size: 12px;
  margin-top: 2px;
}



#capa{
	position: absolute;
	top:0;left: 0;width: 100%;
	height: 100%;background:none;
	z-index:9999;
}
#relVie{width:90%;margin:0%;}
#relVie a{color:#000;}
.titNom {
	font-size:14px;
	z-index:3;
	-ms-text-overflow:ellipsis;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
	color:#fff;
	font-weight: 500;
} 

#relVid{
	overflow: hidden;width:100%;
	display: flex;justify-content: left;
	margin:0 auto;
}
#maireal{
	overflow:hidden;width:40%;
}
#recomm{width:100%;}

#lke{cursor:pointer;}
#comandreply{
	color:#333;font-size:14px;line-height:20px;
}
#cntnig {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center; 
  margin-top: 12px;
  margin-bottom: 0px;
  box-sizing: border-box;
}
#sidclose{
	cursor:pointer;font-family: 'Roboto', sans-serif;font-weight: 700;color:#EBEBEB;
}
#ullocre li a:hover{
	color:#42c0fb;
}

#comminicre li a{
	color:#000;
	text-decoration:none;
	display:block;
	font-family: 'Roboto', sans-serif !important;
	text-align:center;
	font-size:13px!important;
	padding:0px;margin:0px;
}
#comminicre li a:hover{
	color:#42c0fb;
}
#comminicre li{
	padding:4px;margin:0px;
	list-style:none;
}
#comminicre.activo{
	z-index:1;padding:8px;height:auto;
	width:125px;box-shadow: 0px 0px 1px rgba(0, 0, 0, .5);
	border:1px solid rgb(210, 207, 207,0.5);
}
.iniregiscont {
  flex: 1; 
  padding: 0px;
}

#totcomm {
  text-align: left;font-family: 'Roboto', sans-serif;font-weight: 700;color:#EBEBEB;
}

#iniregis {
  text-align: right;
  z-index:0;
}

#titani {
  position: relative;
  display: inline-block;
}

#comminicre {
  display: none;width:125px;
  position: absolute;
  right: 0;border:1px solid rgb(210, 207, 207,0.5);
  background: white;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px;
}

#titani:hover #comminicre {
  display: block;
}
	
.bon{display:none;}

#nav-red{
    transition: all 0.2s ease;
	width:15.6%;
	z-index:99;
}

#camen{
	position:fixed;
	width:0%;height:100%;
	background: none;
	z-index:300;
}
#camen.activo {
	width:100%;
} 

.opci{
	background-color: #fff;
	border:solid 1px rgb(161,214,255,1);
	padding: 3px 12px;text-decoration: none;
	border-radius:6px;font-size: 13px;
	cursor: pointer;margin:3px;
}
#opcCont{
	padding-left:0px;margin-top:8px;
}

#viicovi{
	width:17px;height:17px;
	margin-left:1px;
	margin-right:5px;
	margin-top:-1px;
	filter: brightness(0) invert(1);
}
#dropdow{
	width:15px;
	height:15px;
	float:right;
	margin-right:-4px;
	display:none;
}
#dropdow:hover{cursor:pointer;}

.rel-vie {
  width: 100%;
  margin: 0px 0;
}

.rel-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.rel-card {
  display: flex;
 align-items: flex-start;
  gap: 9px;
  padding: 0px;
  margin:8px;
  border-radius: 10px;
  transition: transform 0.3s ease;
  background: transparent;
}

.rel-card img:hover {
  opacity:0.5;
}

.rel-img-wrapper {
  position: relative;
  width: 180px;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.cover-img {
  width: 100%;
   height: 100%;
     display: block;
  border-radius: 10px;
object-fit: contain; 
}

.con-timevi {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 0.8rem;
  padding: 2px 6px;
  border-radius: 4px;
}

.rel-info {
  flex: 1;
  overflow: hidden; 
}

.tit-nom {
	color:#EBEBEB;
  font-weight: 520;
  font-size: 0.90rem;
  margin: 0 0 6px;display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  max-height: calc(1.4em * 2); 
  word-break: break-word;
  
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; 

  white-space: normal;
}

.views {

  display: flex;
  align-items: center;
  gap: 3px;
  margin: 4px 0;
  font-size: 0.80rem;
  color: #aaa;
  white-space: nowrap;        
  text-overflow: ellipsis;    
}

.viicovi {
  width: 16px;
  height: 16px;filter: brightness(0) invert(1);
}

.fecha {
  font-size: 0.80rem;
  color: #A8A8A8;
}


@media all and (max-width: 1114px){
	.rel-img-wrapper {
   max-width: 130px;
	
}

@media all and (min-width: 769px) and (max-width: 1067px) {
    #conAnihom{
        padding:4px;
    }
    .search-wrapper {
  width: 100%;
  max-width: 340px;

}
   
  .sidebar {
    display: none !important;    
    width: 0 !important;
    overflow: hidden !important;
    transform: translateX(-100%);
  }

  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }

  #espFoo {
    padding: 60px 0px 20px 0px;   
  }

  .conTimevi {
    bottom: 30px;
    left: 25px;
  }

  #camen {position: fixed; width: 0%; height: 100%; background: none; z-index: 80;}
  #camen.activo {width: 100%;}

  .container-video {width: 100%; padding: 2px;}
  #container-video-list {display: none;}
  #rel-car {border-radius: 50%; width: 80px; height: 80px;}
  .cover-img {display: flex;}
  #relVie {padding: 0px; width: 100%; background: #fafafa; margin-bottom: 7px;}
  #cover-img {border-radius: 50%; width: 80px; height: 80px;}
  #titleRelani {padding: 3px; width: 80% !important;}
  .animat-rel {padding: 0% !important;}
  #txtdescr {display: none;}
  #conEntre {margin-top: 50px;}
  .embed-container {border-radius: 0px; width: 100%; height: 0;}
  #styfra {border-radius: 0px; width: 100%;}
  #contIfra {width: 100% !important;}
  #maireal {width: 98%;}
  #relVid {display: block; background: #fff; width: 100%; margin: 0;}
  #maeal {background: #fff;}
  #viNona {padding: 2px !important;}
  #vifec {padding: 8px !important; margin-top: -9px;}
  #mateo {width: 100% !important;}
  #recmmCon {margin-top: 1px;}
  #recomm {width: 98.5%;}
  #relVie {width: 96%;}
  .conTimevi {bottom: 20px;}
  .titNom {font-size: 14px;}
  .opci {padding: 4px 10px; font-size: 11px;}
  #opcCont {margin-top: 2px; padding-left: 9px;}
  #nav-red {width: 0%; margin-left: 0;}
  #nav-red.activo {width: 53%;}
  #after {display: none;}
  #ocult {display: none;}
  .bon {width: 90%; display: block; background-color: #42c0fb; padding: 10px 19px; text-decoration: none; border-radius: 6px; font-size: 13px; cursor: pointer; color: white; margin-top: 20px; border: none; margin-left: 4%;}
  #comminicre.activo {width: 125px;}
}
@media all and (max-width: 768px){
     #conAnihom{
        padding:4px;
    }
    .subscribe-badge {
  padding: 5px 10px 5px 4px;
}

	.scroll-top-btn {
  bottom: 110px!important;right: 20px!important;
	}
	footer p{
	padding-top:1px!important;
	font-size:0.78em!important; 
	font-weight: 700!important; 
	padding-bottom:5px!important;
}
	.rel-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .rel-img-wrapper {
    width: 100%;
  }

  .rel-info {
    width: 100%;
  }
	#espFoo {
    padding: 50px 0px 65px 0px;
  }
	#container-video-list{display:none;}
    	.embed-container {
	    margin-top:50px;
	}
	#nav-red{width:0%;margin-left:0;}
	#nav-red.activo {width:33%;}
	.container-video{
		margin-top:0px;
	}
}
@media all and (max-width: 450px){

#dropdow{display:block;margin-right:8px;}
#nav-red{width:0%;margin-left:0;}

	#nav-red.activo {width:60%;} 
	#forcom{width:80%;margin-left:5px;}
	
}
@media (max-width: 400px) {

      .avatar {
        width: 32px;
        height: 32px;
      }

      .subscribers {
        font-size: 13px;
      }
    }
@media all and (max-width: 380px){

#conResu {width:95%;border-radius:4px;margin-left:8px!important;}

	#recomm{width:98%;}
	.titNom{font-size:11px;}
#mosFec{margin-top:4px;font-size:9px;}
#kiri{margin-top:4px;font-size:9px;}
#viwsico{margin-top:2px;}
}