body {

    margin: 0;

    padding: 0;

    background-position: left top;

    background-image: url(../Images/alfombra.jpg);

    background-color: #d5d5d5;

    background-repeat: no-repeat;

    background-size: 100% 100%;

	

    color: black;

    font-family: 'Poppins', sans-serif;

    font-size: 14px;

    /*min-width: 360px;

	

	*/

	min-height:100%;

    height: 100%;

    box-sizing: border-box;

    /*display: flex;*/

    flex-direction: column;

}



.goku {

    width: 183px;

    position: absolute;

    top: 168px;

    z-index: 3;

    left: 77px;

    height: auto;

}

.bannerStar{

	width:70%;height:auto;float:right;border:2px solid white;border-radius:4px;

}



.Ads{

	width:64%;background-color:rgba(0,0,0,0);position:absolute;top:10px;left:18%;right:18%;height:120px;z-index:0;border:0px solid white;border-radius:4px;

}



.gifAd{

	

width:18%;height:115px;margin-left:6%;border:2px solid white;

}



.barraCN{



width:80%;margin:auto;height:87px;z-index:1;

}



.logoCN{

width:16%;height:auto;float:left;margin-left:10%;



}



.lineanegra{

	width:100%;background-color:black;position:absolute;bottom:50px;left:0px;height:33px;z-index:0;

}



.lineablanca{

	width:100%;background-color:#f7f7f7;position:absolute;bottom:0.5px;left:0px;height:50px;z-index:0;margin-bottom: 1px;

}

.facecomentarios {

    height: 200px;

    overflow-y: auto;

    width: 100%;

    background: red;

}



.poll {

    background: #1e4370;

}



.contenido {

    width: 100%;

    height: auto;

    background-color: whitesmoke;

	display:flex;

}







.posterprincipal {

    width: 100%;

    height:auto;

}





.submedia {

    width: 20%;

    height: auto;

    float: left;

    margin-left: 5%;

    margin-right: 2%;

    margin-bottom: 2%;

    background-color: #8e8e8e;

    border: 2px solid black;

}



    .submedia img {

        width: 100%;

        height: 90px;

        margin-top: 20px;

    }

    .submedia .banner img{

        height:auto;

    }

    .submedia h1 {

        text-align: center;

        font-size:12px;

        color: white;

    }







.media {

    width: 100%;

    height: 100%;

    float: left;

    background-position: left top;

    

    background-color: #b71513;

    background-repeat: no-repeat;

    background-size: 100% 100%;

}



.subcontenido {

    height: auto;

    width: 90%;

    

    margin-left: 5%;

    margin-bottom: 3%;

    background-color: #afafae;

    overflow-y: auto;

   max-height:30vw;

    border: 2px solid black;

}





    .subcontenido::-webkit-scrollbar {

        width: 0px; /* Tamaño del scroll en vertical */

        height: 10px; /* Tamaño del scroll en horizontal */

    }



    .subcontenido::-webkit-scrollbar-thumb {

        background: #afafae;

        border-radius: 4px;

    }



.contenidomodal::-webkit-scrollbar-thumb:hover {

    background: crimson;

    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);

}



.subcontenido::-webkit-scrollbar-track {

    background: #afafae;

    border-radius: 4px;

}



select {

    overflow: auto;

    text-decoration: none;

    padding: 1.5%;

   

    font-size: 12px;

    color: #445599;

    background-color: #97a3d3;

    border-radius: 3px;

    border: 2px solid #7888b9;

   

}



    select:hover {

        cursor: pointer;

    }







.ghost {

    position: absolute;

    width: 150px;

    height: 145px;

    z-index: 10001;

    display: block;

    opacity: 0.8;

    background: transparent url('../Images/fantasma.png') no-repeat;

}



    .ghost.moving-left {

        -moz-transform: scaleX(-1);

        -webkit-transform: scaleX(-1);

        -o-transform: scaleX(-1);

        transform: scaleX(-1);

        filter: fliph; /*IE*/

    }



.marquesina {

    float: left;

    position: relative;

    background: #97a3d3;

    width: 100%;

    height: 50px;

}



    .marquesina h1 {

        background: #97a3d3;

        color: #354381;

        font-size: 18px;

    }



p {

   

    font-size: 14px;

  

}





.posterprinc {

    width: 90%;

}



.listadesplegable {

    text-decoration: none;

    padding: 1%;

    font-weight: 600;

    font-size: 12px;

    color: white;

    background-color: black;

    border-radius: 6px;

    border: 2px solid black;

   

}





select:focus > option:checked {

    background: black !important;

}



.modal {

    width: 100%;

    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 40;

    display: flex;

    overflow: hidden;

    -webkit-overflow-scrolling: touch;

    outline: 0;

    background: rgba(0,0,0,0.8);

}



.velocidad {

    width: 100%;

   

    color: white;

}



.vel01 {

    width: 40%;

    margin-left: 10%;

    float: left;

    background-color: purple;

}



.contenidomodal {

    margin: auto;

    width: 40%;

    height: 30%;

    background-color: whitesmoke;

    color: black;

    border-radius: 10px;

    padding: 2%;

    overflow-y: scroll;

}



    .contenidomodal::-webkit-scrollbar {

        width: 10px; /* Tamaño del scroll en vertical */

        height: 10px; /* Tamaño del scroll en horizontal */

    }



    .contenidomodal::-webkit-scrollbar-thumb {

        background: #193075;

        border-radius: 4px;

    }



     

    .contenidomodal::-webkit-scrollbar-track {

        background: #686868;

        border-radius: 4px;

    }







    .contenidomodal h2 {

        float: left;

    }



    .contenidomodal p {

        float: left;

        text-align: justify;

    }



    .contenidomodal .boton_personalizado3 {

        color: white;

        padding: 5px;

        background-color: #193075;

        border-radius: 6px;

        border: 2px solid #818ddf;

        cursor: pointer;

    }



.barrarepro {

    margin-right: 5%;

    margin-left: 0%;

    margin-bottom: 3%;

    width: 100%;

    height: auto;

    border: 0px solid black;



    background-image: url(../Images/golden.jpg);

    

    background-repeat: no-repeat;

    background-size: 100% 100%;

}



.suscripcion {

    padding: 5%;

}



    .suscripcion table {

        width: 100%;

        

    }



        .suscripcion table tr td {

            width: 30%;

            padding: 3%;

        }



            .suscripcion table tr td a {

                color: white;

                font-size: 20px;

                text-align: center;

                border: solid;

                border-color: white;

                background-color: crimson;

                padding: 4px;

                margin: 20%;

                width: auto;

                border-radius: 15px;

                text-decoration: none;

            }



            .suscripcion table tr td ul li {

                color: white;

                font-size: 14px;

                margin-left: 7%;

            }





    .suscripcion h3 {

        color: yellow;

        font-size: 18px;

        text-align: center;

    }



    .suscripcion p {

        color: white;

        font-size: 16px;

        text-align: justify;

    }



    .suscripcion h4 {

        color: #FF6187;

        font-size: 16px;

        text-align: center;

    }



    .suscripcion p {

        font-size: 20px;

    }



    .suscripcion img {

        width: 100%;

        height: 200px;

    }



.tabla_comentario {

    width: 100%;

    background-color: #8233c5;

}





.series {

    padding: 3%;

    overflow-y: scroll;

    height: 1100px;

}



    .series::-webkit-scrollbar {

        width: 10px; /* Tamaño del scroll en vertical */

        height: 10px; /* Tamaño del scroll en horizontal */

    }



    .series::-webkit-scrollbar-thumb {

        background: #193075;

        border-radius: 4px;

    }



      



    .series::-webkit-scrollbar-track {

        background: #686868;

        border-radius: 4px;

    }



    .series table {

        width: 100%;

    }



        .series table tr td {

            width: 30%;

            text-align: center;

            vertical-align: central;

        }



.serieimagen {

    width: 70%;

    padding: 5%;

    -webkit-transition: all 0.6s ease;

    -moz-transition: all 0.6s ease;

    -o-transition: all 0.6s ease;

}



    



    .serieimagen:hover {

        transform: scale(1.1);

        -moz-transform: scale(1.1); /* Firefox */

        -webkit-transform: scale(1.1);

        cursor: pointer;

    }



.titulo {

    background: #ffcc00;

    color: black;

    height: 100px;

    padding: 10px;

}

    .titulo h1 {

        padding-left :5%;

        padding-top:2%;

        font-size:20px;

       

        word-spacing: 1em;

        letter-spacing: 0.2em;

    }





.logoPrincipal {

    width: 70%;

    height:auto;

   

}



.logoHalloween {

    width: 352px;

    margin-left: 34%;

    margin-right: 34%;

}



ul, ol, dl { /* Debido a las diferencias existentes entre los navegadores, es recomendable no añadir relleno ni márgenes en las listas. Para lograr coherencia, puede especificar las cantidades deseadas aquí o en los elementos de lista (LI, DT, DD) que contienen. Recuerde que lo que haga aquí se aplicará en cascada en la lista .nav, a no ser que escriba un selector más específico. */

    padding: 0;

    margin: 0;

}



f2 {

    text-align: right;

    padding: 0;

   

    right: 0px;

}



h1 {

    

    font-size: 24px;

}



h2 {

    float: right;

    

}



header {

    background-position: left top;

    width: 100%;

    height: 100%;

    padding-top: 11vw;

    background-size: contain;

    background-image: url(../Images/starwars.jpg);

    background-color: brown;

    background-repeat:no-repeat;

    display:flex;

    position:relative;

}



.barra {

    background-color: black;

    background-position: left top;

    width: 100%;

    height: auto;

    float:right;

 padding-left: 19vw;

}



.menubarra{

    height:auto;

	width:100%;

	background:black;

	display:flex;

}



.shows{

    height:50px;

    background-color:#f7f7f7;

    width:auto;

}



.one-slide {

    border-radius: 3px;

    margin-left: 1rem;

    margin-right: 1rem;

    font-size: 1.1rem;

    height: 300px;

}



#sliderabajo {

    background-color: white;

    width:80%;

    height:50px;

}



.slider {

    display: flex;

    width: 656px;

}



.slider__img{

    height:100%;

}



.contenedor-slider {

    max-width: 100%;

    max-height: 38px;

    padding-bottom: 10px;

    overflow: hidden;

}



.btn-next {

    width: 50px;

    height: 45px;

    position: absolute;

    bottom:-20px;

    right:19%;

    transform: translateY(-50%);

    font-family: monospace;

    cursor: pointer;

}

  



.btn-next {

    background-image: url(https://4.bp.blogspot.com/-8ExDVmfCgiI/WanNKVubw7I/AAAAAAAACiQ/lSZZnrWq7i4i9KhJ3Egxz_jv0QQm74NpQCLcBGAs/s1600/next.png);

}







#imghorario {

    display: block;

    margin: auto;

    width: 100%;

}



.horario {

    color: #fff;

    position: absolute;

    top: 10%;

    left: 0;

    margin-left: 10%;

    margin-right: 10%;

    width: 80%;

    height: 600px;

    overflow-y: scroll;

    display: none;

    transition: all .5s;

    transition-duration: 0.4s;

}



    .horario::-webkit-scrollbar {

        width: 10px; /* Tamaño del scroll en vertical */

        height: 10px; /* Tamaño del scroll en horizontal */

    }



    .horario::-webkit-scrollbar-thumb {

        background: #193075;

        border-radius: 4px;

    }



        



    .horario::-webkit-scrollbar-track {

        background: #686868;

        border-radius: 4px;

    }







.horario1 {

    top: 30%;

    width: 80%;

    left: 10%;

    right: 10%;

    position: fixed;

    background-color: black;

    display: none;

    transition: all .5s;

}



a.class_a_href {

    pointer-events: none;

    cursor: default;

}



#botoncerrar {

    width: 4%;

    border-radius: 5px;

    height: 4%;

    margin-right: 0;

    font-size: 12px;

}



.botoncerrar {

    top: 1%;

    right: 0%;

    position: absolute;

    text-decoration: none;

    color: white;

    background-color: #193075;

    border-radius: 2%;

    border: 2px solid #c0c6f8;

}



    .botoncerrar:hover {

        background-color: #304db1;

        color: white;

    }







@-webkit-keyframes opaco {

    from {

        opacity: 0;

    }



    to {

        opacity: 1;

    }

}





f1 {

    font-size: 20px;

    color: white;

    

}



.contenidos {

    display:block;

    

    background-color: black;

    position: relative;

}



.centrarimagen {

    display: block;

    margin-left: auto;

    margin-right: auto;

    width: 60%;

}



.derechaimagen {

    display: block;

    margin-left: 20%;

    width:60%;

}



.flotante {

    width: 20%;

    position: fixed;

    bottom: 10%;

    right: 20%;

}



.facebook {

    width: 20%;

    position: fixed;

    bottom: 4%;

    right: 1%;

}



    .facebook img {

        width: 100%;

    }



.flotante2 {

    width: 17%;

    position: fixed;

    bottom: 0%;

    right: 2px;

}



.botonform {

    background-color: black;

    border: double;

    color: white;

    width: 150px;

    height: 30px;

    font-size: 18px;

}





.golden-btn + .golden-btn { margin-top: 1em; }



.golden-btn {

  display: inline-block;

  outline: none;

  font-family: inherit;

  font-size: 1em;

  box-sizing: border-box;

  border: none;

  border-radius: .3em;

  height: 2.75em;

  line-height: 2.5em;

  text-transform: uppercase;

  padding: 0 1em;

  box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),

              inset 0 -2px 5px 1px rgba(139,66,8,1),

              inset 0 -1px 1px 3px rgba(250,227,133,1);

  background-image: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);

  border: 1px solid #a55d07;

  color: rgb(120,50,5);

  text-shadow: 0 2px 2px rgba(250, 227, 133, 1);

  cursor: pointer;

  transition: all .2s ease-in-out;

  background-size: 100% 100%;

  background-position:center;

}

.golden-btn:focus,

.golden-btn:hover {

  background-size: 150% 150%;

  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23),

                inset 0 -2px 5px 1px #b17d10,

                inset 0 -1px 1px 3px rgba(250,227,133,1);

  border: 1px solid rgba(165,93,7,.6);

  color: rgba(120,50,5,.8);

}

.golden-btn:active {

  box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),

              inset 0 -2px 5px 1px #b17d10,

                inset 0 -1px 1px 3px rgba(250,227,133,1);

}



.reloj {



    text-align: right;

    background-color: black;

    color: #ffcc00;

    height: 2%;

    font-weight: bold;

}



.relojdis {

    color: #ffcc00;

    background-color: black;

    text-align: center;

}



footer {

    background: black;

    color: #ffcc00;

    padding-left: 3%;

    width: 97%;

    height: auto;

    font-size: 14px;

   

	

    float: left;

    word-spacing: 0.2em;

    letter-spacing: 0.2em;

   

}



.video-muestra {

    width: 90%;

    height: auto;

    margin: 5%;

    margin-top: 3%;

    border: 2px solid black;

    background-color: black;

    background-image: url(../Images/cine.jpg);

	background-position:bottom left;

    background-repeat: no-repeat;

    background-size: 100% 25vw;

}



.video-container {

    position: relative;

     margin-bottom:0;

   

    width: 100%;

    height: 28vw;

    text-align: center;

    background-color: black;

    background-size: cover;

    overflow: hidden;

   

}



#container {

    width: 30vw;

    height: auto;

	

    background-color: black;

	color:white;

    bottom: 0;

    margin: auto; /* el valor automático de los lados, unido a la anchura, centra el diseño */

    margin-top: 2%;

    margin-bottom: 2%;

    border: 2px solid black;

}





#container2 {

    width: 60vw;

    height: auto;

	

    background-color: black;

	color:white;

    bottom: 0;

    margin: auto; /* el valor automático de los lados, unido a la anchura, centra el diseño */

    margin-top: 2%;

    margin-bottom: 2%;

    border: 2px solid black;

}



.userVideo {

    position: relative;

    width: 100%;

    height: 100%;

    object-fit:fill;

}



.medio {

    margin-left: 12.5%;

    margin-right: 12.5%;

    width: 75%;

    height: auto;

    background-color: rebeccapurple;

}





.peerVideo {

    position: relative;

    width: 100%;

    height: 100%;

    display: none;

    object-fit: fill;

}







.logo {

    position: absolute;

    bottom: 12%;

    right: 19%;

    width: 12%;

    opacity:0.6;

}



.logomov {

    position: absolute;

    bottom: 3%;

    right: 10%;

    width: 12%;

    opacity: 0.6;

}



label {

    display: inline-block;

    width: auto;

    padding: 2%;

    text-align: left;

   

}







.button {

    margin: 20px;

    font-size: 14px;

    float: right;

}



.boton_personalizado {

    text-decoration: none;

    padding: 1%;

   

    font-size: 14px;

    color: white;

    background-color: black;

    

    border:0 ;

	min-width:100px;

	

}



    .boton_personalizado:hover {

        color: white;

        background-color: #a3a2a4;

        cursor: pointer;

    }



.boton_personalizado2 {

    text-decoration: none;

    padding: 1.5%;

    background:transparent;

    font-size: 15px;

    font-weight: 400;

    color: black;

   border:0;

   

    

}


    .boton_personalizado2:hover {

        color: white;

        background-color: #a3a2a4;

        cursor: pointer;

    }



.power_ranger {

    margin-left: 10px;

    width: 10%;

}



.histats {

    width: 40vw;

}



.anuncio {

    width: 80%;

}











/*//////////////////estilo dispositivos moviles////////////*/



@media (max-width:900px) and (min-width:401px) {

.contenidos p{
font-size:18px !important;
}
	
#container{
	   width:50vw;
   }
   #container2{
	   width:100%;
   }
   
    .video-container{
	       height: 50vw;
   }
   
   .barra{
		padding-left:10vw;
		
	}
	
.subcontenido{
	 max-height: 100vw;
 	height:100vw;
}
}


/*vista vertical*/

@media (max-width:400px) and (min-width:1px) {

.contenidos p{
font-size:18px !important;
}

	header{
		height: 56px;
	}
	h1 {
    font-size: 20px;
}
	.barra{
		padding-left:1vw;
		
	}
	.boton_personalizado{
		width:auto;
		min-width: 40px;
	}
	
     #container2{
	   width:100%;
   }
   
    #container{
	   width:68vw;
   }
   
   .contenidos img{
	   width: 19vw !important;
   }
   
   .video-container{
	       height: 50vw;
   }
   
   .golden-btn {
	   font-size: 0.9em;
   }
   
   
   body{
	    width: 100%;
        height: 100vh;
        background-color: black;
   }

.subcontenido{
	 max-height: 100vw;
 	height:100vw;
}

   
  
}