:root {
     --vermelho: #E50914;
     --preto: #141414;
 }

 * {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
 }

 body {
     background-color: var(--preto);
     font-family: 'Times New Roman', Times, serif;
     color: white;
 }

 header {
     position: fixed;
     width: 100%;
     background-color: rgba(0, 0, 0, .10);
     z-index: 9999;
 }

 header .container {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
 }

 header .container-right {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
 }

 header .container-left {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-end;
     margin-right: 20px;
 }

 header .icon-header {
     font-size: 20px;
     margin-right: 20px;
 }

 header .profile {
     display: flex;
     flex-direction: row;
     align-items: center;
 }

 header .profile img {
     margin-right: 10px;
     border-radius: 5px;
 }

 header .active {
     background-color: var(--preto);
 }

 header .titulo-secundario {
     color: var(--vermelho);
     font-family: 'Arial Black', Times;
     font-size: 40px;
     margin-left: 35px;
 }

 header nav a {
     text-decoration: none;
     color: #AAA;
     font-size: 16px;
     margin-left: 30px;
 }

 header nav a:hover {
     color: #fff;
 }

 /* Filme principal */

 main {
     background-image: linear-gradient(rgba(0, 0, 0, .50), rgba(0, 0, 0, .50) 100%), url(../img/onePiec.gif);
     height: 100%;
     width: 100%;
     position: absolute;
     background-size: cover;
     top: 0;
 }

 .filme-principal {
     font-size: 16px;
     height: 550px;
     background-size: cover;
     background-repeat: no-repeat;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
 }

 .filme-principal .titulo-filme-principal {
     margin-top: 15%;
     font-size: 40px;
     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 }

 .filme-principal .sinopse {
     margin-top: 15px;
     margin-bottom: 30px;
     font-size: 16px;
     font-family: sans-serif;
 }

 .buttons {
     margin-bottom: 15px;
     display: flex;
     align-items: center;
 }

 .button {
     background-color: rgba(0, 0, 0, .50);
     border: none;
     color: white;
     padding: 15px 30px;
     margin-right: 10px;
     font-size: 12px;
     cursor: pointer;
     transition: 0.5s;
     border-radius: 5px;
 }

 .button:hover {
     background-color: white;
     color: black;
 }

 .button-circle {
     border: 1px grey solid;
     border-radius: 50%;
     width: 2rem;
     height: 2rem;
     background-color: rgba(42, 42, 42, .6);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .buttons .button-circle {
     margin-right: 0.7rem;
     width: 2.5rem;
     height: 2.5rem;
 }

 .buttons .button-circle i {
     font-size: 20px;
 }

 .button-circle:hover {
     cursor: pointer;
     border: 1px white solid;
 }

 .button i {
     margin-right: 5px;
 }

 .filme-principal .container {
     margin-left: 35px;
     width: 60%;
 }

 .carrossel-filmes {
     margin-top: 40%;
     margin-right: 15px;
     margin-left: 15px;
 }

 .item div:hover {
     cursor: pointer;
 }

 .icon-header i:hover {
     cursor: pointer;
 }

 .profile i:hover {
     cursor: pointer;
 }

 .fa-sort-down:hover {
     transform-origin: 0% 50%;
     animation: slide4 0.5s linear infinite;
 }

 .profile .arrow:hover {
     cursor: pointer;
 }

 .arrow {
     width: 1.25rem;
     height: 1.25rem;
     display: inline-block;
     position: relative;
 }

 .arrow span {
     top: 0.5rem;
     position: absolute;
     width: 0.75rem;
     height: 0.1rem;
     background-color: #efefef;
     display: inline-block;
     transition: all 0.2s ease;
 }

 .arrow span:first-of-type {
     left: 0;
     transform: rotate(45deg);
 }

 .arrow span:last-of-type {
     right: 0;
     transform: rotate(-45deg);
 }

 .arrow.active-teste span:first-of-type {
     transform: rotate(-45deg);
 }

 .bloco-subtitulo {
     position: relative;
     margin: 5px 0;
     display: flex;
     align-items: center;
     justify-content: flex-start;
 }

 .subtitulo {
     font-family: cursive;
     font-weight: 700;
     font-size: 26px;
     display: inline-block;
 }

 .subtitulo:hover {
     cursor: pointer;
 }

 .arrow.active-teste span:last-of-type {
     transform: rotate(45deg);
 }

 header .profile img:hover {
     cursor: pointer;
 }

 .item div {
     height: 300px;
     width: 100%;
     background-size: cover;
     background-repeat: no-repeat;
     transition: 0.5s;
     border-radius: 5px;
 }

 .bloco-loading {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 43%;
     margin-bottom: 20px;
 }

 .loader {
     border: 4px solid #f3f3f3;
     /* Light grey */
     border-top: 4px solid #6d899b;
     /* Blue */
     border-radius: 50%;
     width: 80px;
     height: 80px;
     animation: spin 2s linear infinite;
 }

 .texto-loader {
     position: relative;
     display: block;
     font-size: 40px;
     color: #fff700;
     left: -49px;
 }

 .text {
     display: none;
     margin-left: 5px;
     height: 18px !important;
     margin-top: 12px;
 }

 .text i {
     font-size: 10px;
 }


 .nav-toggle {
     display: none;
     position: absolute;
     top: 1.25rem;
     right: 1.25rem;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 /* reponsivo */

 @media screen and (max-width: 720px) {
     .button {
         margin-top: 10px;
     }

     header .container {
         background-color: #000 !important;
     }

     header .container-right {
         width: 100%;
         flex-direction: column;
         align-items: flex-start;
     }

     nav {
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         width: 100%;
     }

     nav a {
         padding: 1.25rem 0;
         font-size: 26px !important;
         margin: 0 !important;
     }

     .nav-toggle {
         display: block;
     }

     .carrossel-filmes {
         margin-top: 80% !important;
     }

     .bloco-loading {
         margin-top: 85% !important;
     }
 }

 @media screen and (max-width: 900px) {
     header .container-left {
         display: none !important;
     }
 }


 @media screen and (max-width: 1000px) {
     .sinopse {
         width: 50%;
     }

     .carrossel-filmes {
         margin-top: 60%;
     }

     .bloco-loading {
         margin-top: 65%;
     }
 }


 @media screen and (max-width: 650px) {

     main .filme-principal {
         display: none !important;
     }

     main {
         background-image: none;
     }

     .modal{
         display: none !important;
     }

     .carrossel-filmes {
         margin-top: 20% !important;
     }

     .bloco-loading {
         margin-top: 60% !important;
     }
 }


 /*modal teste*/


 .modal {
     position: fixed;
     z-index: 9999;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgb(0, 0, 0);
     background-color: rgba(0, 0, 0, 0.4);
     display: flex;
     justify-content: center;
 }

 .modal-content {
     border-radius: 10px;
     background-color: var(--preto);
     width: 55%;
     margin-top: 20px;
 }

 .modal-content .container {
     display: flex;
     flex-direction: column;
     height: 100%;
 }

 .modal-top {
     background-image: url(../img/onePiec.gif);
     height: 70%;
     display: flex;
     flex-direction: column;
     background-repeat: no-repeat;
     justify-content: flex-end;
     background-size: cover;
     border-top-right-radius: 10px;
     border-top-left-radius: 10px;
 }

 .anime-title {
     font-size: 46px;
     color: var(--preto);
     font-family: fantasy;
 }

 .title-block {
     width: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 15px;
     margin-left: 15px;
 }

 .modal-top .buttons {
     width: 40%;
     justify-content: center;
 }

 .leave-block {
     display: flex;
     height: 100%;
     justify-content: flex-end;
 }

 .modal-down {
     margin-top: 20px;
     height: 30%;
     display: flex;
     flex-direction: row;
 }

 .date {
     font-size: 20px;
     font-family: sans-serif;
     color: seashell;
 }

 .sinopse-modal {
     overflow: hidden;
     font-family: monospace;
     color: #9f9f9f;
     margin-bottom: 15px;
     margin-top: 15px;
     height: 62%;
 }

 .modal-down .container-right {
     width: 60%;
     margin-left: 15px;
 }

 .modal-down .container-left {
     width: 40%;
     margin-left: 15px;
 }

 .close-modal{
     margin-right: 5px;
     margin-top: 5px;
 }