@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);




* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
  }
  
  body{
    background-color:#2b2e36;
    position: relative;
    display: flex;
    flex-wrap: wrap;
  }
  
  @keyframes gridMove {
  0% {
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
  }
  100% {
    background-position: 98px 98px, 98px 98px, 19px 19px, 19px 19px;
  }
}

        
body {
  background-color: #2b2e36;
  background-image: 
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
  animation: gridMove 20s linear infinite;
  position: relative;
  overflow: auto; 
  min-height: 100vh; 

  @media (max-width: 768px) {  
    -ms-overflow-style: none;

  }
}



}

.retro-line {
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #ff00ff, #00ffff, #ff00ff);
  margin: 20px 0;
  position: relative;
  overflow: hidden;
}

.retro-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  animation: retroLineScan 2s linear infinite;
}

@keyframes retroLineScan {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
  ::-webkit-scrollbar{
    width: 2px;
    height: 2px;
  }
  ::-webkit-scrollbar-thumb {
    background: #33a0e8; 
    border-radius: 0px; 
  
  }
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@keyframes neonGlow {
  0% {
      text-shadow: 0 0 5px #00f, 0 0 10px #00f, 0 0 15px #0ff, 0 0 20px #0ff;
  }
  50% {
      text-shadow: 0 0 10px #00f, 0 0 20px #00f, 0 0 25px #0ff, 0 0 30px #0ff;
  }
  100% {
      text-shadow: 0 0 5px #00f, 0 0 10px #00f, 0 0 15px #0ff, 0 0 20px #0ff;
  }
}
::-webkit-scrollbar{
    width: 2px;
    height: 2px;
  }
::-webkit-scrollbar-thumb {
    background: #33a0e8;
    border-radius: 0px; 

}

::-webkit-scrollbar-thumb:hover {
  background: #0cebff; 
}

 .copyright {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: #888;
    font-family: 'Open Sans', sans-serif;
}

.ad-container {
  position: fixed;
  top: 70px;
  width: 160px; 
  height: calc(100vh - 70px);
  z-index: 5;
  display: flex;
  justify-content: center;
}

.ad-left {
  left: 0;
}

.ad-right {
  right: 0;
}

.ad-sticky {
  position: sticky;
  top: 80px;
  width: 100%;
  max-height: 600px;
}

@media (max-width: 1400px) {
  .ad-container {
    display: none;
  }
}

main {
  flex: 1;
  width: calc(100% - 320px); 
  margin: 0 auto;
  
  @media (max-width: 1400px) {
    width: 100%;
  }
}

header{
  color: #FFF;
  background-color: #17181b;
  align-content: center;
  width: 100%;
  height: 70px;
  border-bottom: 1px solid #fff;
  box-shadow: 0PX 0px 10px #e1e1e1;
  position: sticky;
  top: 0;
  z-index: 10;
}

.Main-Header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 35px;

}

.FZ-Logo img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 10px;
  max-width: 200px;
}

.FZ-Logo a {
  color: #ffffff; 
  text-decoration: none; 
}

.Header-Icons {
  position: absolute;
  right: 50px;
  font-size: 25px;
  display: flex;
  margin-left: auto;
  gap: 20px;
  
}

.Magnify-Icon{
  font-size: 24px;
  color: #fff;
  transition: color 0.2s;
}


.Magnify-Icon:hover {
  cursor: pointer;
  color: #1571f4;
}

/* ---------------------------LAST-NEWS -----------------------------*/


/**----------------------------TOP-NEWS-MOBILE---------------------------------*/
.fliper-content {

}

.fliper-games{
  display: flex;
  justify-content: center;
  width: auto;
  height: auto;

}

.Fliper-Game{
  position: relative;
  background-color: #141f75;
  max-width: 275px;
  width: 30%;
  margin: 25px 10px;
  border-radius: 12px;
  border: 1px solid #fff;
  box-shadow: 0px 0px 5px #0b0b0d;
  
}
.Fliper-Game img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to top, transparent 8%, black 40%);

}
.Play-Original {
  white-space: nowrap;
  background-color: #FFF;
  font-size: 18px;
  font-family: Nunito;
  font-weight: bold;
  position: absolute;
  left: 15px;
  bottom: 15px;
  border: none;
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
  padding: 0.9% 4%;
  width: 40%;
  max-width: 150px;
}
.Favorito-Original{
  text-align: center;
  height: 30px;
  white-space: nowrap;
  background-color: rgba(0, 0, 0, 0.5);
  color: #FFF;
  font-size: 18px;
  font-family: Nunito;
  font-weight: bold;
  position: absolute;
  padding: 0.9% 4%;
  right: 15px;
  bottom: 15px;
  border: none;
  border-radius: 3px;
    width: 45%;
  max-width: 175px;
}



/* ---------------------------COLUM-NEWS -----------------------------*/
.news-link {
  text-decoration: none; 
  color: white;          
  display: contents;

}

.news-link:hover {
  color: #ccc; 
}


.news-colum{
  display: flex;
  flex-direction: column; 
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 30px 30px  30px;
  flex-wrap: wrap;

  
  @media (max-width: 768px) { 
  align-content: center;
  flex-direction: column;
  background-image: linear-gradient(to top, rgb(54, 58, 68), rgb(63, 68, 82));
  padding: 0px;
    
    
  }

}

.colum-cover-mobile{
    display: none;
  
    @media (max-width: 768px) { 
    background-color: rgb(63, 68, 82);
    display: block;
    width: 100%;
    height: 180px;
    object-fit: fill;
    margin-bottom: 10px;
  }
}

.colum-cover-mobile img {
  @media (max-width: 768px) {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.colum{
  display: flex;
  flex-grow: 1;
  max-width: 1050px;
  min-height: 200px;
  width: 100%;
  background-color: rgb(54, 58, 68);
  position: relative;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.5s;


  @media (max-width: 768px) { 
    flex-direction: column;
    background-color: none;
    background-image: linear-gradient(to top, rgb(30, 32, 39), rgb(63, 68, 82));
    border-radius: 0px 0px 4px 4px;
    border-bottom: #1571f4 2px solid ;
    width: 100%;
    padding: 10px;
    margin-bottom: 0;
    
  }
}
.colum:hover{
  background-image: linear-gradient(to left, rgb(91, 97, 113), rgb(91, 97, 113));
  box-shadow: 0px 0px 15px #111727;

  @media (max-width: 768px) { 
    background-image: linear-gradient(to top, rgb(30, 32, 39), rgb(63, 68, 82));
    box-shadow: none;
  }

}












.colum-cover{ 
  max-width: 350px;
  width: 100%;
  height: 200px;
  padding-left: 10px;
  margin-left: auto;
  
    @media (max-width: 768px) { 
    display: none;
    
  }
}
.colum-cover img{ 
  max-width: 350px;
  width: 100%;
  height: 200px;
  padding-left: 10px;
  margin-left: auto;
  
    @media (max-width: 768px) { 
    display: none;
    
  }
}

.colum-txt{
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
 
  padding-top: 10px;
  padding-left: 10px;

    @media (max-width: 768px) { 
    
    height: 175px;
    padding-left: 10px;
    padding-top: 0;
    
  }
}

.colum-title{
  color: #FFF;
  font-weight: bold;
  font-size: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 2;  
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-top: 5px;
  @media (max-width: 768px) { 
  font-size: 20px;
}
}

.colum-des{
  padding-top: 5px;
  color: rgb(177, 190, 200);
  font-size: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 4.5em;
  line-height: 1.5;

  @media (max-width: 768px) { 
    padding-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; 
    max-height: 4.5em;
    line-height: 1.5;
    
  }
}
.colum-footer{
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0px;
  color: #ffffff94;
  gap: 5px;
  @media (max-width: 768px) { 
  bottom: 0px;
  left: 10px;
      
      
  }

}

.colum-icons  {
  display: flex;
  flex-direction: column;
  color: #ffffff94;
  font-size: 18px;
  padding-left: 20px;
  gap: 15px;

  @media (max-width: 768px) { 
  padding-top: 10px;
    
    
  }
  
}

.colum-icon:hover{
  color: #FFF;
}

/*------------------------------------LAST-NEWS---------------------------------*/
.last-news{
  display: flex;
  justify-content: center;
  padding: 30px 30px 0 30px;
  
  @media (max-width: 768px) { 
    padding: 20px 15px 30px 15px;
  }
}

.last-news-container{
  max-height: 500px;
  max-width: 1050px;
  width: 100%;
  min-width: 769px;

  @media (max-width: 768px) {
    min-width: auto;
    max-height: none;
  }
}

.last-txt{
  color: #ffffff94;
  font-size: 18px;
  font-weight: bold;
  
  @media (max-width: 768px) {
    margin-bottom: 10px;
    text-align: center;
  }
}

.last-news-content{
  padding-top: 10px;
  display: flex;
  position: relative;
  align-items: center;
  
  @media (max-width: 768px) {
    padding-top: 5px;
  }
}

.last-news-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  
  @media (max-width: 768px) {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
}

.last-news-list{
  display: flex;
  list-style: none;
  gap: 20px;
  transition: transform 0.3s ease-out;
  
  @media (max-width: 768px) {
    width: 100%;
    flex-wrap: nowrap;
    gap: 0;
    touch-action: pan-y; 
    will-change: 
  }
}

.last-news-item{
  height: 100vh;
  max-height: 450px;
  width: 33%;
  position: relative;
  cursor: pointer;
  transition: 0.2s;
  overflow: hidden;

  @media (max-width: 768px) {
    flex: 0 0 100%;
    height: 400px;
    border-radius: 8px;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none; 
  }
}

.last-news-item::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
  pointer-events: none;
  z-index: 1;
  
  @media (max-width: 768px) {
    background: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.75) 70%, rgba(0, 0, 0, 0.9) 100%);
    border-radius: 8px;
  }
}

.last-news-item:hover{
    box-shadow: 0px 0px 10px #0b0b0d;
     filter: brightness(1.2);

}

.last-news-item img{
  object-fit: cover;
  width: 100%;
  height: 100%;
  
  @media (max-width: 768px) {
    border-radius: 8px;
  }
}

.last-news-icons{
  color: #ccc;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10%;
  font-size: clamp(0.5rem, 2vw, 1.125rem);
}

.last-icon{
  padding-bottom: 7px;
}

.last-icon:hover{
  color: #FFF;
}

.last-date{
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: clamp(0.5rem, 1.5vw, 1.125rem);
  color: #fff;
  
  @media (max-width: 768px) {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 3px 8px;
    border-radius: 4px;
    display: flex;
    gap: 5px;
  }
}


.news-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: clamp(0.5rem, 1.5vw, 1.125rem);
  color: #fff;
  padding-right: 10px;
  
  @media (max-width: 768px) {
    z-index: 5;
  }
}

.tag {
  color: #000;
  font-weight: bold;
  border-radius: 3px;
  background-color: #1571f4;
  padding: 0px 4px;
  text-decoration: none;
}
.colum-tag {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: clamp(0.5rem, 1.5vw, 1.125rem);
  color: #fff;
  @media (max-width: 768px) { 
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    bottom: 0px;
    right: 10px;
    }



}


.last-data{
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  transform: translateY(0); 
  transition: transform 0.2s ease;
  width: calc(100% - 20px); 
  
  @media (max-width: 768px) {
    transform: translateY(0);
    bottom: 15px;
    padding: 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    border-radius: 0 0 8px 8px;
    left: 0;
    width: 100%;
  }
}
.last-news-item:hover .last-data {
  transform: translateY(-20px); 
  transition: transform 0.2s ease;
  
  @media (max-width: 768px) {
    transform: translateY(0);
  }
}

.last-author{
  color: #fff;
  font-size: 12px;
  margin-bottom: 4px;
  
  @media (max-width: 768px) {
    font-weight: 600;
    color: #1571f4;
    font-size: 13px;
  }
}

.last-title{
  color: #fff;
  font-size: clamp(0.5rem, 2vw, 1.5rem);
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
  line-height: 1.3;
  font-weight: 700;
  
  @media (max-width: 768px) { 
    font-size: 18px;
    margin-bottom: 6px;
    -webkit-line-clamp: 2;
  }
}

.last-text{
  display: none;
  opacity: 0;
  color: #ffffff94;
  transition: transform 1s ease;
  
  @media (max-width: 768px) {
    display: block;
    opacity: 1;
    max-height: 4.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    font-size: 13px;
    margin-top: 5px;
    line-height: 1.4;
    color: #ffffffd9;
  }
}

.last-news-item:hover .last-text{
  display: block;
  opacity: 1;
  transition: transform 0.3s ease;
  max-height: 4.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}

.control{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 20px;
  z-index: 10;
  transition: 0.3s;
  display: none;
  
  @media (max-width: 768px) {
    display: block;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.control:hover {
  background: rgba(21, 113, 244, 0.8);
}

.arrow-left {
  left: 10px;
  padding: 10px 15px;
  border-radius: 50%;
  
  @media (max-width: 768px) {
    left: 5px;
    padding: 0;
  }
}

.arrow-right {
  right: 10px;
  padding: 10px 15px;
  border-radius: 50%;
  
  @media (max-width: 768px) {
    right: 5px;
    padding: 0;
  }
}

.slider-pagination {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 15px;
  
  @media (max-width: 768px) {
    display: flex;
  }
}

.pagination-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  transition: 0.3s;
}

.pagination-dot.active {
  background-color: #1571f4;
  transform: scale(1.2);
}

.pagination {
  text-align: center;
  margin: 30px 0;
}

.pagination ul {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0;
}

.pagination ul li {
  display: inline-block;
}

.pagination ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 15px;
  border-radius: 6px;
  color: #fff;
  background: rgb(54, 58, 68);
  transition: 0.3s ease;
}

.pagination ul li a:hover {
  background: #292a30;
}

.pagination ul li a.active {
  background: #17181b;
  pointer-events: none;
}

.pagination ul li a.prev, .pagination ul li a.next {
  background: #292a30;
  font-weight: bold;
}

.pagination ul li a.prev:hover,
.pagination ul li a.next:hover {
  background: #292a30;
}

/* Responsividade */
@media (max-width: 600px) {
  .pagination ul {
      gap: 4px;
  }

  .pagination ul li a {
      font-size: 14px;
      padding: 8px 12px;
  }
}

/* ----------------------HEADER------------------------ */


  .ad-container {
            position: fixed;
            top: 120px;
            width: 160px;
            height: calc(100vh - 180px);
            z-index: 100;
            display: none;
        }
        .ad-left {
            left: 10px;
        }
        .ad-right {
            right: 10px;
        }
        @media (min-width: 1366px) {
            .ad-container {
                display: block;
            }
            main {
                margin: 0 180px;
            }
        }
        .center-ad {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px 0;
            width: 100%;
            overflow: hidden;
        }
        @media (max-width: 768px) {
            .center-ad ins {
                width: 100%;
                height: auto;
            }
        }