body { 
    margin: 0px;
    /*background-color: #1D0D50; el original */
    background-color: #1e1d21;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: aliceblue;
}

.c-body {
    background-color: #060215;
}
.game-body {
    background-color: #060215;
}

h1 {
    font-size: 24px;
}

h3 {
    margin-left: 30px;
    margin-bottom: 0px;
}

a {
    text-align: center;
    text-decoration: none;
    color: rgb(221, 218, 218);
}

/*Style header*/
header {
    position: fixed;
    z-index: 98;
    top: 0;
    display: flex; 
    flex-direction: row; 
    align-items: center;
    height: 70px;
    width: 100%;
    background-color: #301f68ed;
}
.header-2 {
    background-color: #301f68ed;
    height: 70px;
}

/*Style Logo header*/
.container-logo {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-left: 20px;
}

.img-logo {
    width: 40px;
    height: 40px;
    transition: all 0.5s;
}

.container-title-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
}

.container-title-logo h1 {
    font-size: 22px;
    transition: all 0.5s;
}
.container-title-logo h1::first-letter {
    color: #a56bc7;
}

.container-logo:hover .img-logo{
    width: 50px;
    height: 50px;
}
.container-logo:hover .container-title-logo h1{
    font-size: 24px;
}


/*Style social networks header*/
.container-social-networks {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    position: absolute;
    top: 23%;
    left: 82%;
    cursor: pointer;
    width: 6.3%;
    height: 50%;
    padding-right: 0.8%;
    border-right: solid rgba(240, 248, 255, 0.194) 0.4px;
}

.container-social-networks a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-social-networks {
    width: 100%;
}

/*settings*/
.ajustes {
    position: absolute;
    top: 32.5%;
    left: 90.5%;
    width: 2%;
    height: 33%;
    cursor: pointer;
}
.ajustes div img:hover {
    width: 80%;
    height: 80%;
}
.ajustes div img {
    width: 70%;
    height: 70%;
}

/*carrito*/
.carrito {
    position: absolute;
    top: 32%;
    left: 93.5%;
    width: 2%;
    height: 33%;
    cursor: pointer;
}
.carrito div img:hover {
    width: 80%;
    height: 80%;
}
.carrito div img {
    width: 70%;
    height: 70%;
}

/*profile*/
.profile {
    cursor: pointer;
    width: 2%;
    height: 37%;
    position: absolute;
    top: 33%;
    left: 96.5%;
}
.profile div img:hover {
    width: 80%;
    height: 80%;
}

.profile div img {
    width: 70%;
    height: 70%;
}

.ajustesNav {
    position: absolute;
    left: 23%;
    top: 42%;
    width: 2%;
    height: 33%;
    cursor: pointer;
}
.ajustesNav img {
    width: 60%;
    height: 70%;
}

.options-site {
    position: absolute;
    left: 0%;
    top: 100%;
    width: 26.5%;
    height: 0%;
    background-color: #301f68ed;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    overflow: hidden;
    transition: all 1s;
}
.hiddenOptionSite {
    height: 50%;
    overflow: none;
}
.options-site ul {
    display: flex;
    padding: 0%;
    margin: 0%;
    list-style-type: none;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.options-site ul a {
    width: 33.33%;
    height: 100%;
    text-align: center;
    border-left: solid rgba(240, 248, 255, 0.194) 0.2px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.options-site ul a:hover {
    background-color: #45347d;
}
.options-site ul li {
    text-align: center;
    font-size: 13px;
}


/*Style Nav*/
nav {
    display: flex;
    justify-content: end;
    align-items: center;
    height: 35px;
    width: 100%;
    border-bottom: solid 1px rgb(74, 73, 73);
    background-color: #713a91;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

nav ul {
    height: 35px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    margin: 0px;
}

nav ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 165px;
    height: 50px;
    text-align: center;
    list-style: none;
    transition: all .5s;
}
nav ul li:hover {
    font-size: large;
    background-color: rgba(240, 248, 255, 0.264);
}

nav ul li a {
    font-size: small;
    display: flex;
    justify-content: center;
    height: 80%;
    width: 100%;
    align-items: center;
    border-left: solid rgba(240, 248, 255, 0.194) 0.2px;
}

.category-premium {
    color: #EDC710;
}

.menu-categorias{
    display: flex;
    justify-content: center;
  }
  .menu-categorias a {
    position: relative;
    display: block;
    overflow: hidden;
  }
  
  .menu-categorias a span {
    transition: transform 0.2s ease-out;
  }
  
  .menu-categorias a span:first-child {
    display: inline-block;
    text-align: center;
    padding: 8px;
  }
  
  .menu-categorias a span:last-child {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-100%);
  }
  
  .menu-categorias i {
    font-size: 30px;
  }
  
  .menu-categorias a:hover span:first-child {
    transform: translateY(100%);
  }
  
  .menu-categorias a:hover span:last-child,
  .menu[data-animation] a:hover span:last-child {
    transform: none;
  }
  .img-nav{
    width: 35px;
    height: 25px;
  }

  /*ANIMATIONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.menu[data-animation="to-top"] a span:last-child {
    transform: translateY(100%);
  }
  
  .menu[data-animation="to-top"] a:hover span:first-child {
    transform: translateY(-100%);
  }

/*Style Banner Home*/
.container-banner-home {
    z-index: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    margin-left: auto;
    margin-bottom: -2%;
    height: 550px;
}

.container-banner-home div {
    position: absolute;
    top: 0%;
    height: 550px;
}

.container-banner-home .btn-banner {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 65%;
    left: 90px;
    width: 170px;
    height: 50px;
    border: none;
    border-radius: 50px;
    color: wheat;
    letter-spacing: 4px;
    background-color: #aa6acf;
    font-size: large;
    transition: all 500ms ease;
}
.btn-banner:hover {
    box-shadow: 0 0 10px #aa6acf, 0 0 20px #aa6acf, 0 0 20px #aa6acf;
}
.btn-banner::after {
    box-sizing: border-box;
  }

.img-banner-home {
    max-width: 100%;
    max-height: 100%;
}


/*Style Carrusels*/
.img-cat{
    max-width: 100%;
    max-height: 720px;
    filter:opacity(45%);
}
.background-cat{
    width: 100%;
    max-height: 720px;
}

.category-title{
    position: absolute;
    font-size: 50px;
    text-rendering:optimizeLegibility;
    top: 6%;
}
.carousel-container{
    text-rendering:optimizeLegibility;
    position: relative;
    width: 100%;
    height:720px;
    margin-top: 0.2%;
    font-size:xx-large;
}

.inner-carousel {
    position: absolute;
    top: 20%;
    width: 100%;
    height: 600px;
    overflow: hidden;
}

.track {
    display: inline-flex;
    height: 100%;
    transition: transform 0.2s ease-in-out;
}

.card-container {
    margin-top:3%;
    width: 190px;
    height: 280px;
    flex-shrink: 0;
    margin-right: 25px;
    list-style-type: none;
    transition: all 0.5s;
}

.play-game {
    position: absolute;
    opacity: 0;
    top: 30%;
    left: 27%;
    z-index: 12;
}

.play-game h4 {
    margin: 0%;
}

.card:hover {transform:scale(1); transition: 0.5s; cursor:pointer; z-index: 11;}
.card-container:hover {transform:scale(1.1); transition: 0.5s; cursor:pointer;z-index: 11;}
.card img:hover {filter:brightness(20%);}

.card-container:hover .play-game {
    z-index: 1112;
    opacity: 1;
}

.card {
    position: relative;
    width: 100%;
    height: 100%;
    background-position: center bottom;
    background-size: center;
    background-repeat: no-repeat;
    transition: all 0.5s;
}

.card img {
    width: 100%;
    height: 100%;
    filter: brightness(100%);
    transition: all 0.5s;
}

.nav-carrusel button {
    position: absolute;
    top: 42%;
    transform: translatey(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    outline: none;
    border: 1px solid rgb(41, 28, 89, 0.9);
    cursor: pointer;
    background-color: rgb(41, 28, 89, 0.9);
}
.nav-carrusel .prev {
    left: 2%;
    display: none;
}
.nav-carrusel .prev.show {
    display: block;
}
.nav-carrusel .prev.show:hover {
    background-color: #4a3986;
}
.nav-carrusel .next {
    right: 1%;
}
.nav-carrusel .next:hover {
background-color: #4a3986;
}
.nav-carrusel .next.hide {
display: none;
}

.nav-carrusel button p {
font-size: 50px;
color: beige;
text-align: center;
margin: 0px;
}

.card-premium {
    border: solid 2px goldenrod;
}

.title-premium {
    color: #d6a700;
}

.hide-casilla {
    display: none;
}
.hide-sombra-casilla {
    display: none;
}

.show-casilla {
    display: flex;
    position: fixed;
    z-index: 100;
    top: 5%;
    left: 17%;
    width: 922px;
    height: 600px;
}

.show-sombra-casilla {
    display: flex;
    position: fixed;
    z-index: 99;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #000000d4;
}

.card .img-daimon {
    position: absolute;
    top: 3%;
    left: 3.5%;
    z-index: 2;
    height: 23px;
    width: 23px;
}



/*Style new release*/
.new-release {
    display: flex;
    width: 100%;
    position: relative;
}

.new-release div img {
    max-width: 100%;
}

.new-release a {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 41%;
    left: 44%;
    height: 40px;
    width: 150px;
    background-color: #9d1803ed;
    vertical-align: bottom;
    color: #ffffff;
    font-size: large;
    border-radius: 10%;
    border: solid 1px #9d1803ed;
    transition: all 500ms ease;
}
.new-release a:hover {
    background-color: #ac3c2aed;
    border: solid 1px #ac3c2aed;
    box-shadow: 0 0 10px #ac3c2aed, 0 0 20px #ac3c2aed, 0 0 20px #ac3c2aed;
}





/*Style footer*/
footer {
    position: relative;
    display: flex;
    flex-direction: row;
    height: 320px;
    background-color: #4a3887ed;
    border: solid 15px #301f68ed;
}

footer div {
    display: flex;
    flex-direction: row;
    margin-left: 100px;
}

footer section {
    margin-left: 50px;
    margin-top: 50px;
}

footer section h4 {
    margin: 0px;
    font-weight: bold;
}

footer section ul {
    margin-right: 60px;
    padding: 0px;
}

footer section ul li {
    font-size: small;
    margin: 10px 10px 10px 0px;
    list-style-type: none;
}

footer .img-logo {
    position: absolute;
    bottom: 5%;
    left: 85%;
}

/*Style social networks footer*/
.container-social-networks-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    position: absolute;
    top: 84%;
    left: 87%;
    cursor: pointer;
    width: 6.3%;
    height: 10%;
    padding-right: 0.8%;
}

.container-social-networks-footer a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-social-networks-footer {
    width: 100%;
}
/*-------------loading--------------------------------*/

#loading-content{
    background-color: rgb(0, 0, 0, 0.7);
    height: 100%;
    width: 100%;
    position: fixed;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    z-index: 10000;
  }
  
   #loading{
    border: 15px solid #ccc;
    border-top-color: yellow;
    border-top-style: groove;
    height: 100px;
    width: 100px;
    border-radius: 100%;
  
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    -webkit-animation:  efecto-load 1.5s linear infinite;
    -o-animation:  efecto-load 1.5s linear infinite;
    animation:  efecto-load 1.5s linear infinite;
   }
  
   #Progress_Status {
    width: 20%;
    background-color: rgb(255, 244, 244);
    position: absolute; left: 530px; bottom:220px;
  }
  
  :root{
    --fill-size:0%;
  }
    
  #barra-progreso{
    position: relative;
    width: 300px;
    height: 20px;
    background-color: #ddd;
    overflow: hidden;
  }
  
  #barra-progreso::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: yellow;
    transform: translate(-100%);
    animation: llenar-barra 4.8s ease forwards;
  }
  
  @keyframes llenar-barra {
      to{
          transform: translateX(var(--fill-size));
      }
  }
  
  
   @keyframes efecto-load{
      from{ transform: rotate(0deg);}
      to { transform: rotate(360deg) ;}
   }


/* style game */
.breadcrum ul {
    display: flex;
    padding: 0px;
    margin: 0px 0px 0px 30px;
}

.breadcrum ul li {
    list-style-type: none;
    margin-right: 5px;
    cursor: pointer;
}
.breadcrum ul li:hover {
    text-decoration: underline;
}

.breadcrum ul li a{
    font-size: small;
}

.container-game {
    display: flex;
    justify-content: space-between;
    margin: 30px 30px 0px 28px;
    height: 500px;
}


/*Style Game 4 en linea*/

.game {
    width: 900px;
    height: 500px;
    background-color: #000000;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

.hide-canvas {
    display: none;
}

.canvas {
    display: flex;
}

.cont-timer {
    position: absolute;
    top: 21%;
    left: 3%;
}

.turnoPlayer {
    width: 120px;
    position: absolute;
    top: 21%;
    left: 31%;
    margin: 0%;
    padding: 0px;
    background-color: rgb(19, 85, 131);
}

.turnoPlayer .turno-text {
    text-align: center;
    margin: 5px;
    padding: 0%;
}

.cont-menu-game {
    display: none;
}

.cont-menu-game-show {
    display: flex;
    position: absolute;
    top: 17.1%;
    width: 900px;
    height: 500px;
}

.menu-game {
    display: none;
}

.menu-game-show {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 44%;
    left: 16%;
    height: 200px;
    width: 600px;
    background-color: rgba(18, 85, 15);
    margin: 0px;
    padding: 0px;
    text-align: center;
    border-radius: 10px;
    border: solid 3px white;
}

.menu-game-show div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-game-show p {
    margin: 0%;
    font-size: 200%;
}

.img-menu-game {
    width: 100%;
    height: 100%;
}

.winner {
    display: none;
}

.winner-show {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 200px;
    width: 600px;
    background-color: rgba(33, 99, 164, 0.8);
    margin: 0px;
    padding: 0px;
    top: 38%;
    left: 13%;
    text-align: center;
    border-radius: 10px;
    border: solid 3px white;
}

.winner-show p {
    margin: 0%;
    font-size: 400%;
}

.btn-menu {
    width: 150px;
    height: 30px;
    background-color: rgb(5, 167, 5);
    color: aliceblue;
    border: solid 1px white;
    margin: 10px;
    cursor: pointer;
}

.btn-play-again {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 11%;
    left: 66%;
    margin-top: 5%;
    background-color: rgb(5, 167, 5);
    color: aliceblue;
    border-radius: 15px;
    cursor: pointer;

}

.img-btn-restart {
    width: 100%;
    height: 100%;
}

.btn-option-game {
    width: 150px;
    height: 30px;
    background-color: rgb(5, 167, 5);
    color: aliceblue;
    border: solid 1px white;
}

.btn-5-linea, .btn-6-linea {
    margin: 10px;
    cursor: pointer;

}

.classic {
    text-align: center;
    margin: 20px;
    cursor: pointer;

}

.pre-game {
    position: relative;
    width: 900px;
    height: 100%;
}

.hide-pre-game {
    display: none;
}

.pre-game img {
    width: 100%;
    height: 100%;
}

.pre-game button {
    position: absolute;
    top: 45%;
    left: 40%;
    width: 20%;
    height: 10%;
    font-size: larger;
    background-color: #000000;
    color: #d6a700;
    transition: all 500ms ease;
    cursor: pointer;
}
.pre-game button:hover {
    top: 43%;
    left: 38%;
    width: 23%;
    height: 13%;
    color: white;
    font-size:30px;
    background-color: #d6a700;
    border: solid 1px #d6a700;
    box-shadow: 0 0 10px #d6a700, 0 0 20px #d6a700, 0 0 20px #d6a700;
}

.help-game {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 360px;
    height: 100%;
    background-color: rgba(87, 72, 137, 0.5);
}

.help-game h4 {
    color: #B572DB;
}
.help-game p {
    font-size: small;
    color: rgb(182, 179, 179);
    margin: 0px 35px 50px 35px;
    text-align: center;
}

.cont-boxes {
    display: grid;
    grid-template-areas:
    "a a a e"
    "b b b e"
    "b b b f"
    "b b b g"
    "c c c c"
    "d d d d"
    ;
}
.box {
    margin-left: 30px;
    margin-top: 30px;
}

.box1{grid-area: a;}
.box2{grid-area: b;}
.box3{grid-area: c;}
.box4{
    grid-area: d;
    margin-bottom: 30px;
}
.box5{
    grid-area: e;
    width: 360px;
    margin-right: 28px;
}
.box5 img {
    width: 100%;
}

.box6{
    grid-area: f;
    margin-right: 28px;
    width: 360px;
}
.box6 img {
    width: 100%;
}
.box7{
    grid-area: g;
    width: 360px;
    margin-right: 28px;
}
.box7 img {
    width: 100%;
}

.carrGame {
    margin-left: 0px;
}


.share-game {
    position: relative;
    height: 70px;
    width: 900px;
    background-color: rgba(87, 72, 137, 0.5);;
}

.share-game .text-share {
    position: absolute;
    top: 20%;
    right: 3%;
    font-size: small;
}

.share-game .button-share {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 25%;
    left: 2%;
    display: flex;
    align-items: center;
    width: 100px;
    height: 35px;
    font-size: small;
    background-color: #9747FF;
}
.button-share:hover {
    background-color: #a86df6;
    cursor: pointer;
}

.share-game .button-share div{
    margin-left: 5px;
    width: 20px;
    height: 20px;
}

.share-game .button-share div img{
    width: 100%;
    height: 100%;
}

.share-options {
    display: none;
}

.share-game .share-options.show-share {
    display: flex;
    justify-content: space-around;
    position: absolute;
    top: 30%;
    left: 15%;
    width: 300px;
}

.share-options a div {
    width: 30px;
    height: 30px;
}

.share-options a div img{
    width: 100%;
    height: 100%;
}


.about-game{
    background-color: #574889;
    width: 900px;
}

.e1 h1,.e2 h1,.e3 h1,.e4 h1,.e5 h1,.e6 h1,.e7 h1 {
    color: #B572DB;
    font-size: medium;
}

.e3 a,.e4 a, .e5 a, .e6 a {
    color: #B572DB;
}

.e1,.e2,.e3,.e4,.e5,.e6,.e7 {
    margin: 60px 20px 20px;
    font-size: small;

}

.video{
    position: relative;
    text-align: center;
    bottom: 6%;
}

.cont-img-demonstrative {
    display: flex;
    flex-wrap: wrap;
}

.img-demonstrative {
    width: 120px;
    height: 70px;
    margin: 0px 165px 100px 0px;
    cursor: pointer;
}

.hide-img-big1,.hide-img-big2,.hide-img-big3,.hide-img-big4,.hide-img-big5,
.hide-img-big6,.hide-img-big7,.hide-img-big8,.hide-img-big9 {
    display: none;
}
.show-img-big1,.show-img-big2,.show-img-big3,.show-img-big4,.show-img-big5,
.show-img-big6,.show-img-big7,.show-img-big8,.show-img-big9 {
    display: flex;
    position: fixed;
    z-index: 100;
    top: 5%;
    left: 10%;
    cursor: pointer;
}

.hide-sombra-img-big {
    display: none;
}
.show-sombra-img-big {
    display: flex;
    position: fixed;
    z-index: 99;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #000000d4;
}

.carrGame {
    height: 400px;
}
.carrGame h3 {
    margin-left: 0%;
}
.trackGame {
    padding: 0%;
    margin: 0%;
    height: 400px;
}
.trackGame .card-container {
    margin-top: 0%;
}

.nav-carrusel .prevGame {
    top: 25%;
}
.nav-carrusel .nextGame {
    top: 25%;
}

/*----------------------------COMENTARIOS----------------------------------*/

.coments-container{
width: 64%;
padding: 20px;
}

.coment-content{
height: auto;
margin-bottom: 70px;
background-color: rgba(35, 30, 55, 0.6);
padding: 10px;
border: solid 1px rgba(255, 255, 255, 0.2);
}

.coment{
gap: 3px;
display: flex;
align-items: center;
flex-direction:row ;
color:white;
text-align: justify;
padding-bottom: 10px;
border-bottom: solid 1px rgba(255, 255, 255, 0.3);
}

.coment-you{
    color:white;
    height: auto;
    margin-bottom: 90px;
}
.img-user{
width: 40px;
height: 40px;
margin-right: 10px;
}

.coment h5 {
    margin: 0%;
}

.coment-content p{
font-size: small;
padding-left: 5px;
}

.coment-content a{
font-size: xx-small;
padding-left: 10px;
padding-right: 10px;
}
.coment-content a:hover{
    color: yellow;
}

.coment-content .send-comment {
    margin-left: 94%;
}

.coment-content input{
    margin: 10px 10px 10px 5px;
    background-color: rgba(35, 30, 55, 0.2);
    color: white;
    border: 0;
    outline: none;
    width: 80%;
    height: 30px;
}

.response-coment {
    display: flex;
    justify-content: space-between;
}

.last-comment {
    margin-bottom: 40px;
}

.more-comments {
    background-color: #874aaa;
    height: 40px;
    width: 30%;
    outline-style: none;
    border: #874aaa;
    color: white;
    margin-left: 30%;
}
.more-comments:hover {
    background-color: rgb(163, 107, 195);
    cursor: pointer;
}





/* pagina community*/

/*banner*/

.c-h2 {
    font-family: inherit;
    font-size: 2vw;
}

.c-banner-inicio {
    position: relative;
    margin-left: auto;
    height: 100%;
}

.c-img-banner {
    max-width: 100%;
}

.c-title-banner {
    position: absolute;
    z-index: 1;
    top: 55%;
    left: 31.7%;
    font-family: inherit;
    font-size: 3.7vw;
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 3px black, 0 0 1em black, 0 0 0.2em black;
}
.c-title-banner::first-letter {
    color: #4c3b82;
}

.c-subbtitle-banner {
    position: absolute;
    z-index: 1;
    top: 73%;
    left: 40%;
    font-family: inherit;
    font-size: 1vw;
    margin: 0%;
    color: #d29df0;
}
.sub2 {
    top: 77%;
    left: 44.3%;
    color: #d197f3;
}
.sub3 {
    top: 81%;
    left: 41%;
    color: #d197f3;
}

/* noticias cuadro */

.c-text-news-site {
    text-align: center;
    margin-top: 5%;
}
.c-text-news-site p {
    font-size: 1.2vw;
}
.c-text-news-site a:hover {
    text-decoration-line: underline;
}

.c-news-site {
    font-family: Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
    width: 84%;
    height: 580px;
    margin: 3% 8% 8% 8%;
    display: grid;
    grid-template-areas:
    "m m n o"
    "m m p p"
    ;
}
.c-box-comm p{
    font-size: 1.5vw;
    line-height: 24px;
    font-weight: normal;
    margin: 10px;
}


.c-box-comm .c-link-new {
    font-size: 1.4vw;
    line-height: 24px;
    font-weight: bold;
}
.c-box-comm .c-link-new:hover {
    text-decoration-line: underline;
}


.c-box1{
    grid-area: m;
    position: relative;
    background-image: url(/Interfaces.github.io/Entrega-Final/assets/img/community/new2.png);
    background-size: cover;
    opacity: 0;
}
.c-box1 div {
    position: absolute;
    top: 40%;
    left: 25%;
}

.c-newAnim1 {
    animation: animacionNew 2s;
    transition: all 1s;
}

@keyframes animacionNew {
    0% { 
        transform: translateX(-1000px);
       }
    100% {
        transform: translateX(0);
    }
}

.c-box2{
    grid-area: n;
    position: relative;
    background-image: url(/Interfaces.github.io/Entrega-Final/assets/img/community/new3.png);
    background-size: cover;
    opacity: 0;
}
.c-box2 div {
    position: absolute;
    top: 40%;
    left: 11.5%;
}
.c-box2 p {
    text-align: center;
}

.c-newAnim2 {
    animation: animacionNew2 2s;
    transition: all 1s;
}

@keyframes animacionNew2 {
    0% { 
        transform: translateX(1000px);
       }
    100% {
        transform: translateX(0);
    }
}

.c-box3{
    grid-area: o;
    position: relative;
    background-image: url(/Interfaces.github.io/Entrega-Final/assets/img/community/new4.png);
    background-size: cover;
    opacity: 0;
}
.c-box3 div {
    position: absolute;
    top: 40%;
    left: 11.6%;
}
.c-box3 p {
    text-align: center;
}

.c-newAnim3 {
    animation: animacionNew3 2s;
    transition: all 1s;
}

@keyframes animacionNew3 {
    0% { 
        transform: translateX(1300px);
       }
    100% {
        transform: translateX(0);
    }
}

.c-box4{
    position: relative;
    grid-area: p;
    background-image: url(/Interfaces.github.io/Entrega-Final/assets/img/community/new1.png);
    background-size: cover;
    opacity: 0;
}
.c-box4 div {
    position: absolute;
    top: 45%;
    left: 16%;
}

.c-newAnim4 {
    animation: animacionNew4 2s;
    transition: all 1s;
}

@keyframes animacionNew4 {
    0% { 
      transform: translateY(350px);
    }
    100% {
      transform: translateY(0);
    }
  }

/* juegos gratis*/

.c-cont-new-freeGames {
    font-size: 1.5vw;
    line-height: 24px;
    font-weight: normal;
    margin: 10px;
}
.c-cont-new-freeGames div a {
    font-size: 1.4vw;
    line-height: 24px;
    font-weight: bold;
    color: #a86df6;
}
.c-cont-new-freeGames div a:hover {
    text-decoration: underline;
}

.c-new-free-games {
    display: flex;
    justify-content: space-between;
    font-family: Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
    width: 84%;
    margin: 3% 8% 8% 8%;
}

.c-new-free-games div {
    width: 30%;
    height: 230px;
}

.c-freeGame {
    opacity: 0;
    transition: all 4s ease;
}

.c-freeGame1 {
    position: relative;
    background-image: url(/Interfaces.github.io/Entrega-Final/assets/img/community/imgFreeGame.png);
    background-size: cover;
}
.c-freeGame1 a {
    position: absolute;
    top: 95%;
    left:20%
}

.c-freeGame2 {
    position: relative;
    background-image: url(/Interfaces.github.io/Entrega-Final/assets/img/community/imgFreeGame2.jpg);
    background-size: cover;
}
.c-freeGame2 a {
    position: absolute;
    top: 95%;
    left:40%
}

.c-freeGame3 {
    position: relative;
    background-image: url(/Interfaces.github.io/Entrega-Final/assets/img/community/mmmm.png);
    background-size: cover;
}
.c-freeGame3 a {
    position: absolute;
    top: 95%;
    left:28%
}

/*articulos*/

.c-articles-entertainment {
    font-family: Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
    margin: 17% 0% 8% 0%;
}

.c-article {
    width: 100%;
    height: 330px;
    margin-bottom: 1%;
}

.c-artic-a {
    width: 35%;
    height: 250px;
}
.c-img-new {
    width: 100%;
    height: 250px;
    transition: all 1s;
}

.c-article .c-text-article {
    width: 50%;
}

.c-text-article h2 {
    margin: 0% 0% 2% 0%;
    font-size: 1.4vw;
    text-align: left;
}
.c-text-article h2:hover {
    text-decoration: underline;
}

.c-text-article p {
    font-size: 2.7vw;
    font-weight: lighter;
    text-align: left;
}
.c-text-article p:hover {
    text-decoration: underline;
}

.c-article {
    margin: 0%;
    display: flex;
    justify-content: space-around;
    align-items: center;
} 

/*articulo 1*/

.c-artc1 {
    background-image: url(/Interfaces.github.io/Entrega-Final/assets/img/community/backAt.png);
    background-size: cover;
}

.articAnim1 {
    animation: animacionArticulo1 5s;
}

.c-img-new1 {
    background-image: url(/Interfaces.github.io/Entrega-Final/assets/img/community/hallan-plagio-super-mario-bros.jpg);
    background-size: cover;
}

@keyframes animacionArticulo1 {
    0% { 
      transform: translateX(-1500px);
     }
    50% { 
    transform: translateX(20px);
    } 
    100% {
      transform: translateX(0);
    }
}

/*articulo 2*/

.c-artc2 {
    background-image: url(/Interfaces.github.io/Entrega-Final/assets/img/community/fondddd.png);
    background-size: cover;
}
.articAnim2 {
    animation: animacionArticulo2 5s;
}

.c-img-new2 {
    background-image: url(/Interfaces.github.io/Entrega-Final/assets/img/community/god.png);
    background-size: cover;
}

@keyframes animacionArticulo2 {
    0% { 
        transform: translateX(1500px);
       } 
      50% { 
      transform: translateX(-20px);
      } 
      100% {
        transform: translateX(0);
      }
}

.c-artic-a:hover .c-img-new{
    filter: brightness(150%);
}

/* articulos torneos*/

.c-cont-articles-tournament {
    font-family: Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
    width: 100%;
    margin: 15% 0% 8% 0%;
    background-image: url(/Interfaces.github.io/Entrega-Final/assets/img/community/fondoTorneos.png);
    background-size: cover;
}

.space {
    height: 50px;
}

.c-cont-articles-tournament .c-text-news-site p {
    font-size: 1.5vw;
}

.c-article-tournament {
    width: 84%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 5% 8% 0% 8%;
    background-color: #050210ca;
    height: 300px;
}

.c-text-tournament {
    width: 50%;
    align-items: center;
}

.c-text-tournament a h2 {
    text-align: left;
    color: #874aaa;
}
.c-text-tournament a h2:hover {
    text-decoration: underline;
}
.c-text-tournament a p {
    text-align: left;
    font-size: 1.3vw;
}
.c-text-tournament a p:hover {
    text-decoration: underline;
}

.textTournament2 a h2 {
    text-align: right;
}
.textTournament2 a p {
    text-align: right;
}

.c-cont-imgTournament {
    width: 42%;
    height: 250px;
}
.c-img-tournament{
    width: 100%;
    height: 100%;
}

.c-imgTour1 {
    background-image: url(/Interfaces.github.io/Entrega-Final/assets/img/community/retrostar.jpg);
    background-size: cover;
    filter: brightness(145%);
    border: solid 1px white;
}

.c-imgTour2 {
    background-image: url(/Interfaces.github.io/Entrega-Final/assets/img/community/torneoR.png);
    background-size: cover;
    /*filter: brightness(145%);*/
    border: solid 1px white;
}

.c-imgTour3 {
    background-image: url(/Interfaces.github.io/Entrega-Final/assets/img/community/torneo3.png);
    background-size: cover;
    /*filter: brightness(145%);*/
    border: solid 1px white;
}

.c-redesSociales {
    width: 84%;
    margin: 18% 6% 0% 6%;
    height: 400px;
}

.c-redesSociales div h2 {
    width: 100%;
    text-align: center;
}

.c-redesSociales .c-rds {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 150px;
}

.c-cont-rs {
    width: 6%;
    height: 45%;
    margin: 5% 2% 0% 8%;
}

.c-rs {
    width: 100%;
    height: 100%;
}

.c-rds .c-rs1 {
    background-image: url(/Interfaces.github.io/Entrega-Final/assets/img/community/twitterC\ 1.png);
    background-size: cover;
}

.c-rds .c-rs2 {
    background-image: url(/Interfaces.github.io/Entrega-Final/assets/img/community/facebookC\ 1.png);
    background-size: cover;
}

.c-rds .c-rs3 {
    background-image: url(/Interfaces.github.io/Entrega-Final/assets/img/community/instagramC\ 1.png);
    background-size: cover;
}

.c-rds .c-rs4 {
    background-image: url(/Interfaces.github.io/Entrega-Final/assets/img/community/youtubeC\ 1.png);
    background-size: cover;
}