:root { --bg1: #061026; --bg2: rgb(21 39 80); --bg3: #0b1b27; --color1: #0077c2; --color2: #0c86ff; --color3: #081672; --color4: #394c74; } *, *:after, *:before{ margin: 0; padding: 0; border: 0; font: inherit; outline: none; text-decoration: none; font-family: "Montserrat", sans-serif; text-rendering: optimizeLegibility; font-size: auto; font-weight: 400; outline: none; list-style: none; outline: none; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } body { overflow-x: hidden !important; background: var(--bg1); -webkit-touch-callout: none ; -webkit-text-size-adjust: none ; -ms-text-size-adjust: none ; -webkit-user-select: none ; -moz-user-select: none ; -ms-user-select: none ; user-select: none ; -webkit-highlight: none ; -webkit-tap-highlight-color: rgba(0,0,0,0) ; -webkit-tap-highlight-color: transparent ; /* For some Androids */ color:#fff; } img[src=""], img:not([src]) { display: none !important; visibility: hidden !important; } .clear {clear: both; } .aNoner {display: none; } .sMiddle {transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%);} .flex--blur {filter: blur(0); } .flex--blur.blur {filter: blur(6px); } .flex--jw { display: none; position: fixed; z-index: 1000; width: 100%; height: 100%; background: #000; opacity: 1; transition: 0.5s; transform: scale(1);} #now__playing__player {width: auto !important; height: 100% !important; } .description {position: fixed;top: 0;left: 0;text-align: left;width: 100%;padding: 60px 40px;background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%);padding-bottom: 200px;} .description h1 {display: block;color: #fff;font-size: 24px;font-weight: 900;text-transform: uppercase;width: calc(100% - 60px);float: left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} .description p {position: relative;display: block;font-size: 18px;color: #ccc;padding-top: 13px;padding-bottom: 14px;width: calc(100% - 60px);float: left;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-weight: 900;} .description p em{ position: absolute; bottom: 0; left: 0%; height: 5px; width: 40px; background: var(--color2); } .description a {display: block;float: right;width: 40px;height: 40px; float: right; width: 40px; margin-top: -15px; height: 40px;} .description svg {display: block;float: right;width: 40px;height: 40px;} .description svg * { fill: #fff; } .sHider {transform: scale(1.2); opacity: 0; transition: 0.7s;} #outPlayer {top: 50px;right: 29px;width: 60px;height: 60px;position: fixed;z-index: 10000;} @media only screen and (max-width : 780px) { .description { padding: 30px; padding-bottom: 100px;} .description h1 { font-size: 20px;} .description p { font-size: 15px; padding-bottom: 10px;} .description {} #outPlayer {display: none; top: 20px; right: 20px; } } .modal--error {z-index: 100010; background: rgba(0,0,0,0.5); width: 100%; height: 100%; display: none; position: fixed; } .modal--box{ z-index: 1; background: #1c1c1c; border-top: 4px solid var(--color2); display: block; position: absolute; top: 50%; left: 50%; width: 780px; height: auto; transform: translateY(-50%) translateX(-50%) scale(1.2); padding: 60px 80px; transition: 0.3s; opacity: 0; } .modal--box.scale {transform: translateY(-50%) translateX(-50%) scale(1); opacity: 1; transition: 0.5s;} .modal--box .modal--h1 { text-align: center; color: #fff; margin-bottom: 20px; font-size: 30px; font-weight: 900; } .modal--box .modal--h2 { text-align: center; color: #fff; margin-bottom: 0px; font-size: 20px; } .modal--box .modal-close { position: absolute; height: 40px; width: 40px; top: 13px; right: 20px; padding: 6px;} .modal--box .modal-close svg { width: 100%; display: block; } .modal--box .modal-close svg path { fill: #fff; } .terms { padding-top: 120px;} .terms .mterms { width: 100%; padding: 20px; max-width: 1248px; margin: 0 auto;}.terms .mterms .title {} .terms .mterms .title {font-size: 35px; font-weight: 600; margin-bottom: 35px; text-decoration: underline; } .terms .mterms h2 {position: relative;font-size: 22px;font-weight: 600;padding-bottom: 10px;margin-bottom: 10px;margin-top: 40px;text-transform: uppercase;} .terms .mterms h2 span {position: absolute;width: 30px;height: 5px;left: 0;bottom: 0;background: var(--color1);} .terms .mterms p {font-size: 17px;margin-bottom: 20px;padding-left: 35px;position: relative;} .terms .mterms p em {position: absolute;left: 5px;top: 3px;font-weight: 600;font-size: 15px;color: #435172;} .terms .date { margin-bottom: 70px; margin-top: 60px;} .terms .date b { font-weight: 600; text-decoration: underline;} @media only screen and (max-width : 860px) { .terms .mterms .title { font-size: 25px; font-weight: 600; margin-bottom: 35px; text-decoration: underline;} .terms .mterms h2 { position: relative; font-size: 16px; font-weight: 600; padding-bottom: 10px; margin-bottom: 10px; margin-top: 40px; text-transform: uppercase;} .terms .mterms p { font-size: 15px; margin-bottom: 15px; padding-left: 27px; position: relative;} .terms .mterms p em { position: absolute; left: 5px; top: 1px; font-weight: 600; font-size: 13px;} .modal--box { width: 580px; } .modal--box .modal--h1 {font-size: 25px;} .modal--box .modal--h2 {font-size: 16px;} } @media only screen and (max-width : 685px) { .modal--box { width: 90%; padding: 60px 40px; } .modal--box .modal-close { top: 10px; right: 14px; padding: 7px; } .modal--box .modal--h1 {font-size: 23px;} .modal--box .modal--h2 {font-size: 15px;} } .flex--confirm {width: 100%; height: 100%; position: fixed; display: none; z-index: 100000; background: rgba(0,0,0,0.5); display: none; } .flex--cls {width: 100%; height: 100%; position: fixed; z-index: 100001; display: block; } .box--confirm { transform: translateX(-50%) translateY(-50%); width: 50%; max-width: 560px; min-width: 310px; height: auto; padding: 4em; transition: 0.2s; z-index: 100002; background: #fff; text-align: center; position: relative;position: fixed; top: 50%; left: 50%; overflow: hidden; opacity: 1; transform: translate3d(-400px, -125px, 0) scale3d(1.4, 0, 1) translateX(-50%) translateY(-50%); } .flex--top {color: #c94e50; font-weight: bold; font-size: 1.4em; } .flex--desc { padding-top: 0.1em; font-weight: 400; font-size: 1.3em; margin: 0; color: #c94e50; } .flex--buttons { padding-top: 0.8em; } .flex--ok { display: inline-block; margin-right: 5px; font-size: 15px; padding: 1em 2em; outline: none; font-weight: 600; border: none; color: #fff; background: #c94e50; display: inline-block; border: 1px solid #c94e50; } .flex--fechar {font-size: 15px; margin-right: 5px; padding: 1em 2em; outline: none; font-weight: 600; border: none; color: #c94e50; background: #fff; display: inline-block; border: 1px solid #c94e50; } .box--confirm.anim { transition: 0.2s; transform: translate3d(0, 0, 0) scale3d(1, 1, 1) translateX(-50%) translateY(-50%); opacity: 1; } @media only screen and (max-width : 770px) { .box--confirm {padding: 3em 2.5em;} .flex--top {font-size: 1em;} .flex--desc {font-size: 0.9em;} .flex--ok, .flex--fechar { font-size: 12px; padding: 0.7em 1.5em;} } .m-introo {position: relative;z-index: 2;background-image: url("../img/bgg.png");background-size: cover;background-position: center;padding-bottom: 60px;} .m-introo .nRel { margin: 0 auto; padding: 0 20px; padding-top: 120px; width: 100%; max-width: 980px; } .m-introo .nRel h1 {font-size: 40px;font-weight: 600; text-align: center; } .m-introo .nRel .counts {margin-top: 30px;margin-left: -15px;margin-right: -15px;} .m-introo .nRel .counts .one{float: left;width: 25%;margin: 0;} .m-introo .nRel .counts .one div {padding: 20px 25px;display: block;background: var(--bg2);margin: 0 15px;border-radius: 0;} .m-introo .nRel .counts .one p {font-weight: 600;} .m-introo .nRel .counts .one em {font-weight: 600;font-size: 41px;} .m-introo .nRel img {display: block;margin: 0 auto;margin-top: 30px; width: calc(100% - 20px); max-width: 420px;} @media only screen and (max-width : 820px) { .m-introo .nRel .counts .one{width: 50%; margin-bottom: 30px;} .m-introo .nRel .counts {max-width: 600px; width: 100%; margin-left: auto; margin-right: auto; } } @media only screen and (max-width : 600px) { .m-introo .nRel h1 {font-size: 26px; } .m-introo .nRel .counts .one em {font-size: 34px; } .m-introo .nRel {padding-top: 60px; } } .DIVlogin {position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background-size: cover;background-position: top center;background: rgba(0,0,0,0.8);z-index: 1000;} .DIVlogin .FORMlogin {position: absolute;top: 50%;left: 50%;width: calc(100% - 40px); max-width: 400px; height: auto;background: #191919;padding: 20px;border-top: var(--color1) 3px solid;} .DIVlogin .FORMlogin .close {position: absolute;width: 50px;top: -25px;height: 50px;right: -15px;background: #191919;border-radius: 50%;} .DIVlogin .FORMlogin .close svg {display: block; width: 100%; height: auto;} .DIVlogin .FORMlogin .close svg path {fill: var(--color1);} .DIVlogin .FORMlogin .topLo { display: block;width: 100%;padding: 15px 0; } .DIVlogin .FORMlogin .topLo img{display: block;width: 200px;margin: 0 auto;} .DIVlogin .FORMlogin .meiLo {padding: 20px 10px;padding-bottom: 0;padding-top: 10px;} .DIVlogin .FORMlogin .meiLo p {padding-bottom: 30px;text-align: center;color: #807f7f} .DIVlogin .FORMlogin .meiLo .filed {margin-bottom: 15px;} .DIVlogin .FORMlogin .meiLo .filed input {display: block;width: 100%;background: #fff;border: rgba(0,0,0,0.2) 2px solid;padding: 15px 20px;color: #fff;} .DIVlogin .FORMlogin .meiLo .filed input:focus { background: #000; border: var(--color1) 2px solid;} .DIVlogin .FORMlogin .botLo {padding: 10px;padding-top: 0;padding-bottom: 20px;} .DIVlogin .FORMlogin .botLo button {text-transform: uppercase;display: block;width: 100%;background: var(--color1);padding: 15px 20px;color: #fff;border-radius: 35px; font-weight: 600;} .DIVlogin .FORMlogin .botLo button:focus { background: var(--bg2); } .DIVlogin .FORMlogin .botLo button:disabled { background: #464646 !important; color: #505050 !important;} .DIVlogin .FORMlogin .pssb {color: #fff;text-align: center;margin-bottom: 10px;} .DIVlogin .FORMlogin .pssb b {color: #fff;letter-spacing: 2px;font-weight: 600;text-decoration: underline;} .DIVProdile {position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background-size: cover;background-position: top center;background: rgba(21, 39, 80, .8);z-index: 2100; display: none;} .DIVProdile .FORMlogin {position: absolute;top: 50%;left: 50%;width: calc(100% - 40px);max-width: 400px;height: auto;background: #191919;padding: 20px;border-top: var(--color1) 3px solid;} .DIVProdile .FORMlogin .close {position: absolute;width: 50px;top: -25px; z-index: 3; height: 50px;right: -15px;background: #191919;border-radius: 50%;} .DIVProdile .FORMlogin .close svg {display: block; width: 100%; height: auto;} .DIVProdile .FORMlogin .close svg path {fill: var(--color1);} .DIVProdile .FORMlogin .topLo {display: block;width: 110px;padding: 0;height: 110px;margin: 15px auto;position: relative;} .DIVProdile .FORMlogin .topLo a {position: absolute;background: #4d4d4d;bottom: -4px;right: -10px;border: 4px solid #1a1a1a;border-radius: 50%;width: 42px;height: 42px;padding: 8px;} .DIVProdile .FORMlogin .topLo a svg { width: 100%; display: block; height: auto; } .DIVProdile .FORMlogin .topLo a svg path { fill: #1a1a1a; } .DIVProdile .FORMlogin .topLo a:hover {background: #fff;} .DIVProdile .FORMlogin .topLo a:hover svg path { fill: var(--color1); } .DIVProdile .FORMlogin .topLo img{ display: block;width: 110px; height: 110px; margin: 0 auto;border-radius: 50%;} .DIVProdile .FORMlogin .meiLo { padding: 20px 10px;padding-bottom: 0;padding-top: 10px; } .DIVProdile .FORMlogin .meiLo p {padding-bottom: 30px;text-align: center;color: #807f7f} .DIVProdile .FORMlogin .meiLo .filed {margin-bottom: 15px;} .DIVProdile .FORMlogin .meiLo .filed input {display: block;width: 100%;background: #fff;border: rgba(0,0,0,0.2) 2px solid;padding: 15px 20px;color: #fff;} .DIVProdile .FORMlogin .meiLo .filed input:focus { background: #000; border: var(--color1) 2px solid;} .DIVProdile .FORMlogin .botLo {padding: 10px;padding-top: 0;padding-bottom: 20px;} .DIVProdile .FORMlogin .botLo button {text-transform: uppercase;display: block;width: 100%;background: var(--color1);padding: 10px 20px;color: #fff;border-radius: 35px;font-weight: 600;font-size: 13px;height: 42px;} .DIVProdile .FORMlogin .botLo button:focus { background: var(--bg2); } .DIVProdile .FORMlogin .botLo button:disabled { background: #464646 !important; color: #6b6868 !important;} .DIVProdile .FORMlogin .pssb {color: #fff;text-align: center;margin-bottom: 10px;} .DIVProdile .FORMlogin .pssb b {color: #fff;letter-spacing: 2px;font-weight: 600;text-decoration: underline;} .DIVProdile .FORMlogin option {background:#191919; color: #a9a9a9; } .DIVProdile .FORMlogin .excll { text-align: center; } .DIVProdile .FORMlogin .excll a { color: #a9a9a9;display: block;width: 175px;padding: 9px 17px;margin: 0 auto;border-radius: 22px;font-weight: 600;} .DIVProdile .FORMlogin .excll a svg { float: left; width: 18px; height: 18px; } .DIVProdile .FORMlogin .excll a svg * { fill: #a9a9a9; } .DIVProdile .FORMlogin .excll a:hover { text-decoration: underline; color: #fff; } .DIVProdile .FORMlogin .excll a:hover svg * { fill: #fff; } .DIVProdile .editter {display: block;} .DIVProdile .m-avatars {display: none;position: relative;overflow-y: auto;height: 73vh;overflow-x: hidden;} .DIVProdile.avts .FORMlogin {height: 80vh;width: calc(100% - 40px);max-width: 660px;} .DIVProdile.avts .FORMlogin .editter {display: none; } .DIVProdile.avts .FORMlogin .m-avatars {display: block;margin: 0 -20px;padding: 0 20px;} .lister-avs {background: #262626;padding: 20px; border-bottom: 3px #0b0b0b solid;} .lister-avs h1{font-size: 25px;cursor: pointer; } .lister-avs h1 svg { float: left; width: 30px; transform: rotate(180deg);} .lister-avs h1 svg path {fill: #fff; } .lister-avs .lister-avatars {margin: 0 -5px;padding: 10px;display: none;} .lister-avs .lister-avatars a{float: left;padding: 2px;border: solid transparent 5px;border-radius: 50%;margin: 0 5px;margin-top: 10px;width: calc(20% - 10px);} .lister-avs .lister-avatars a:hover{border: solid #fff 5px;} .lister-avs .lister-avatars a img {display: block; width: 100%; border-radius: 50%; } .lister-avs.active {background: #0b0b0b;} .lister-avs.active .lister-avatars {display: block;} .lister-avs.active h1 svg {display: block; transform: rotate(270deg);} @media only screen and (max-width : 650px) { .lister-avs .lister-avatars a {width: calc(25% - 10px); } } @media only screen and (max-width : 500px) { .lister-avs .lister-avatars a {width: calc(33% - 10px); } .lister-avs h1 {font-size: 20px; } } .n-field {position: relative;display: block;width: 100%;max-width: 500px;margin-bottom: 20px;} .n-field i {font-size: 15px;left: 35px;color: #a9a9a9;position: absolute;top: 50%;height: auto;-ms-transform: translateY(-50%);background: none;padding: 0;transform: translateY(-50%);transition: 0.3s;-webkit-transition: 0.3s;-moz-transition: 0.3s;z-index: 2;} .n-field i.active {font-size: 15px;left: 35px;color: #fff;position: absolute;top: -7px;background: #191919;padding: 0 15px;height: auto;-ms-transform: translateY(0);transform: translateY(0);z-index: 4;} .n-field .inpt {height: 50px;color: #a9a9a9;display: block;width: 100%;padding: 15px 30px;font-size: 15px;border-radius:30px;background: none;border: 3px solid #4d4d4d;transition: 0.3s;-webkit-transition: 0.3s;-moz-transition: 0.3s;position: relative;z-index: 3;appearance: none;} .n-field .inpt:focus { border-color: #fff; color: #fff; } .n-field .inpt.focus { border-color: #fff; } .n-field .inptt { border: 3px solid transparent; font-size: 20px; text-transform: uppercase; display: inline-block; padding: 11px 40px; padding-bottom: 15px; height: 55px; border-radius: 30px; color: #191919; background: rgba(255,255,255,0.7); font-weight: 700; transition: 0.7s; -webkit-transition: 0.7s; -moz-transition: 0.7s; } .n-field .inptt:hover, .n-field .inptt:focus { background: #f6223d; color: #fff; } .n-field .inptt:disabled { background: rgb(58, 58, 58) !important; color: #191919; } .n-field.tada .inpt {border-color: #ff0000 !important;} .custom-loader {width: 60px; height: 60px; border-radius: 50%; border: 8px solid; border-color: #717171; border-right-color: var(--color1); animation: s2 1s infinite linear; margin: 30px auto; margin-bottom: 50px; } @keyframes s2 {to{transform: rotate(1turn)}} .ferror {position: fixed; bottom: 30px; left: 50%; color: #fff; background: #630909; z-index: 2000; transform: translateX(-50%); padding: 8px 30px; border-radius: 20px; text-align: center; width: auto; max-width: 300px; display: none; } @media only screen and (max-width : 600px) { .ferror {width: 100%; max-width: 100%; border-radius: 20px 20px 0 0; bottom: 0;} } .app-navigation {min-height: 90vh !important; margin-top: -90vh; z-index: 1; position: relative; } .app-clean {background: #f3f3f3; position: relative; width: 100%; min-height: calc(90vh); margin-top: 71px; padding-bottom: 60px;} .flex--nodesk { display: none; } .flex--upper { text-transform: uppercase; } .flex--disable {display: none;} .clear {clear: both; } .flex--container {width: 100%; display: block; } .flex--content {width: 100%; max-width: 1140px; margin: 0 auto; } .flex--content2 {width: 100%; max-width: 1440px; padding-left: 20px; padding-right: 20px; margin: 0 auto; } .flex--app--page {width: 80%; margin: 0 auto; position: relative; } .flex--app--page.flex--mar { margin-top: -120px; } .flex--app--page.carregando {position: absolute; width: 100%; left: 0; top: 50%; margin-top: 150px;} .flex--pad {padding-top: 60px; } .flex--app--pagee {width: 100%; padding: 0 10%; margin: 0 auto; position: relative; } .flex--app--page-top { padding: 0 40px; } .flex--containerr { z-index: 2; position: relative; padding-top: 90vh; transition: 0.3s; } .flex--containerr .shadds { z-index: 150; position: absolute; display: none; width: 100%; height: 100%;} .flex--containerr.bac { transform: perspective(0px) translate3d(0,0vh,0) rotate3d(1,0,0,0deg); } .flex--containerr.bac .shadds { display: block; background: rgba(0,0,0,.3);} @media only screen and (max-width : 1410px) { .flex--app--page {width: 90%; } .flex--app--pagee {padding: 0 5%;} } @media only screen and (max-width : 850px) { .flex--app--page-top { padding: 0 25px; } .close-field {position: absolute; top: 20px; right: 20px; width: 35px; height: 35px; padding: 5px; } .close-field svg { width: 25px; height: 25px; } .flex--top--busca svg { width: 30px; height: 30px; margin-top: 21px; } .flex--top--busca input[type="text"] { font-size: 24px;padding-right: 55px; } } @media only screen and (max-width : 540px) { .flex--app--page-top { padding: 0 20px; } .flex--topo .flex--logo { width: 110px; height: 31px; margin-left: -55px; } } .flex--backhome { box-shadow: 2px 5px 15px 1px rgba(0,0,0,0.5); z-index: 500; position: fixed; border: 4px solid var(--color2); background: #000; border-radius: 50%; bottom: 70px; right: -80px; opacity: 0; width: 60px; height: 60px; padding: 3px; transition: 0.4s; -webkit-transition: 0.4s; -moz-transition: 0.4s; } .flex--backhome:hover { background: #111111; } .flex--backhome svg { width: 46px; height: 46px; } .flex--backhome svg path {fill: #fff; } /*MENU*/ .flex--topo { position: absolute; z-index: 100; width: 100%; top: 0; left: 0; padding: 15px 0; padding-bottom: 20px; background-image: linear-gradient(-180deg,rgba(0,0,0,.64),transparent); } .flex--topo.flex--menu--fixed { background-image: none; background: rgba(0,0,0,0.95); position: fixed; } .flex--topo .flex--logo { display: block; float: left; background-image: url("../img/logo-min.png"); width: 154px; height: 36px; background-size: 100% auto; background-position: bottom center;background-repeat: no-repeat; margin-top: 0; } .flex--topo .flex--menu { float: left; } .flex--topo .flex--menu a { float: left; font-size: 16px; line-height: 18px; padding: 10px 15px; margin: 0 5px; text-transform: uppercase; color: #fff; font-weight: 700; } .flex--topo .flex--menu a:hover { background: var(--color2); } .flex--topo.flex--menu--black { background-image: none; background: rgba(0,0,0,0.95); } .flex--topo.flex--menu--home { background-image: none !important; background: rgba(0,0,0,0.95) !important; position: fixed !important; } .flex--menu--header { float: left; padding-top: 6px; } .flex--menu--header a { font-size: 18px; font-weight: 600; margin-left: 25px; color: #b3b3b3; position: relative; transition: 0.5s; } .flex--menu--header a:hover, .flex--menu--header a.active { color: #fff; transition: 0.3s; } .flex--menu--header a i {position: absolute; bottom:-6px; left: 50%; margin-left: 0; transition: 0.5s; height: 3px; width: 0px; background: var(--color2); } .flex--menu--header a:hover i, .flex--menu--header a.active i { margin-left: -15px; width: 30px; transition: 0.3s; } .flex--menu--iccon { cursor: pointer; display: none; width: 25px; height: 20px; position: relative; float: left; margin-top: 9px; margin-left: 0px; margin-right: 15px; } .flex--menu--iccon .item { position: absolute; right: 0; left: 0; height: 4px; background: #fff; border-radius: 2px; -webkit-transition: -webkit-transform .25s cubic-bezier(.86, 0, .07, 1); transition: transform .25s cubic-bezier(.86, 0, .07, 1); } .flex--menu--iccon .item-1 { top: 0; } .flex--menu--iccon .item-2 { opacity: 1;top: 50%; margin-top: -2px;transition: opacity .25s cubic-bezier(.86, 0, .07, 1); } .flex--menu--iccon .item-3 { bottom: 0; } .flex--menu--iccon.active{position: fixed; z-index: 5; right: 5px; transform: scale(1.4);} .flex--menu--iccon.active>.item-1 {-webkit-transform: translate3d(0, 8px, 0) rotate3d(0, 0, 1, 45deg); -ms-transform: translate(0, 8px) rotate(45deg); transform: translate3d(0, 8px, 0) rotate3d(0, 0, 1, 45deg);} .flex--menu--iccon.active>.item-2 { opacity: 0; } .flex--menu--iccon.active>.item-3 {-webkit-transform: translate3d(0, -8px, 0) rotate3d(0, 0, 1, -45deg); -ms-transform: translate(0, -8px) rotate(-45deg);transform: translate3d(0, -8px, 0) rotate3d(0, 0, 1, -45deg);} .flex--categorys--bg {position: fixed; width: 100%; height: 100%; background-image: url(../img/bg-pager.png); background-size: auto 100%; background-position: top right; background-attachment: fixed; background-repeat: no-repeat; } .flex--menu--right { float: right; margin-right: -10px; } .flex--menu--right a { float: left; padding-top: 6px; width: 29px; height: 36px; } .flex--menu--right a svg {width: 24px; height: 24px;} .flex--menu--right a svg path { fill: #b3b3b3; } .flex--menu--right a.active svg path { fill: var(--color2); } .flex--menu--right a:hover svg path {fill: #fff;} .flex--menu--right a.sconta {margin-left: 15px;padding-top: 2px;width: 37px;height: 37px;margin-top: -2px;} .flex--menu--right a.sconta img { display: block; width: 100%; border-radius: 5px; border: 2px solid transparent; } .flex--menu--right a.sconta:hover img {border-color: #fff; } .flex--menu--right .enter {background: var(--color1); color: #fff; display: block; padding: 10px 20px; border-radius: 21px; font-weight: 600; } .flex--menu--right .enter:hover {background: #2f607f; cursor: pointer; } .flex--menu--right .enter svg { float: left; width: 17px; height: auto; margin-right: 5px; } .flex--menu--right .enter svg * { fill: #fff;} .flex--menu--right .edit {display: block; cursor: pointer; padding: 0; background: none; } .flex--menu--right .edit svg { float: left; width: 27px; height: auto; margin-right: 0px; margin-top: 5px; } .flex--menu--right .edit svg * { fill: #8e96ab;} .flex--menu--right .edit:hover svg * { fill: #fff;} .flex--menu--right .edit.eddit svg * { fill: #fff;} .intro-web {position: relative;z-index: 3;width: 100%;height: 95vh;background: url(../img/nnew.png);background-size: cover;background-position: center center;} .intro-web .bss { position: absolute; height: auto; width: 100%; max-width: 1040px; margin: 0 auto; bottom: 290px; left: 50%; transform: translateX(-50%); } .intro-web .bss p { display: block; margin-top: 23px; } .intro-web .bss p button { display: inline-block; background: var(--color1); color: #fff; font-size: 18px; padding: 14px 30px; font-weight: 600; border-radius: 50px; } .intro-web h1 { font-size: 40px; font-weight: 600; text-align: center; } .intro-web h2 { font-size: 25px; padding-top: 15px; text-align: center; } .nIntro {position: absolute;width: auto;bottom: 0;left: 50%;transform: translateX(-50%);width: 100%;max-width: 750px;border: 5px solid var(--bg2);border-bottom: none;background: var(--bg1);padding-top: 30px;padding-bottom: 0;} .nIntro .imdgs {display: block;margin: 0 auto;overflow: hidden;height: 200px;width: 100%;position: relative;z-index: 1;} .nIntro .top {position: absolute;top: -25px;transform: translateX(-50%);left: 50%;z-index: 8;font-size: 22px;font-weight: 600;background: var(--bg1);padding: 8px 20px;border-left: 5px solid var(--bg2);border-right: 5px solid var(--bg2);} .nIntro .bot {position: absolute;z-index: 26;left: 50%;color: #fff;bottom: -8px;transform: translateX(-50%);background: var(--bg2);font-size: 32px;color: var(--color1);font-weight: 600;padding: 5px 20px;} .nIntro .imdgs img {height: 230px; background-size: 100% 100%;background-color: var(--bg2);} .nIntro .imdgs img.img1 { position: absolute; left: 50px; z-index: 1; top: 100px; height: 200px; transform: rotate(-25deg);} .nIntro .imdgs img.img2 {position: absolute;top: 40px;left: 50%;transform: translateX(calc(-100% - 60px)) rotate(-15deg);z-index: 2;height: 220px;box-shadow: 0 0 10px 3px rgba(0,0,0,0.8);} .nIntro .imdgs img.img3 {position: absolute;z-index: 10;left: 50%;top: 0;transform: translateX(-50%);height: 250px;box-shadow: 0 0 10px 3px rgba(0,0,0,0.8);} .nIntro .imdgs img.img4 {position: absolute;top: 40px;right: 50%;transform: translateX(calc(100% + 60px)) rotate(15deg);z-index: 2;height: 220px;box-shadow: 0 0 10px 3px rgba(0,0,0,0.8);} .nIntro .imdgs img.img5 {position: absolute;z-index: 1;right: 50px;top: 100px;transform: rotate(25deg);height: 200px;} @media only screen and (max-width : 810px) { } .perguntas {display: block;position: relative;padding: 80px 0;background: #0e0e0e;border-top: 5px solid var(--bg2);} .perguntas .resls { width: 100%; max-width: 1200px; margin: 0 auto; } .perguntas .resls h1 {text-align: center;font-size: 35px;font-weight: 600;margin-bottom: 35px;} .perguntas .resls .list-pergs { } .perguntas .resls .list-pergs li {display: block;padding: 0;} .perguntas .resls .list-pergs li .t {cursor: pointer;position: relative;display: block;width: 100%;padding: 20px;font-size: 24px;background: #141d2f;padding-right: 60px;border-bottom: 5px solid #0e0e0e;} .perguntas .resls .list-pergs li .t svg {position: absolute;width: 35px;height: 35px;right: 15px;top: 50%;transform: translateY(-50%) rotate(180deg);} .perguntas .resls .list-pergs li .t svg path { fill: #fff;} .perguntas .resls .list-pergs li .d {display: none;padding: 20px;padding-top: 0;background: #141d2f;border-bottom: 5px solid #0e0e0e;} .perguntas .resls .list-pergs li .d p {margin-bottom: 10px;} .perguntas .resls .list-pergs li .d p:last-child {margin-bottom: 0px;} .perguntas .resls .list-pergs li.view .t { border-color: #283859; background-color: #283859;} .perguntas .resls .list-pergs li.view .t svg {transform: translateY(-50%) rotate(0deg); } .perguntas .resls .list-pergs li.view .d { display: block; background-color: #283859; } @media only screen and (max-width : 810px) { .intro-web .bss {bottom: 240px;} .intro-web h1 {font-size: 35px; width: 100%; padding: 0 20px; } .intro-web h2 { padding-left: 20px; padding-right: 20px; width: 100%; font-size: 22px;} .perguntas {padding: 50px 0;} .perguntas .resls {padding: 0 20px;} .perguntas .resls .list-pergs li .t {font-size: 18px;} .perguntas .resls .list-pergs li .d {font-size: 14px;} .perguntas .resls h1 {font-size: 26px; } .nIntro {max-width: 560px;} .nIntro .imdgs {height: 160px;} .nIntro .top {font-size: 17px;} .nIntro .bot {font-size: 22px;} .nIntro .imdgs img.img3 {height: 200px; } .nIntro .imdgs img.img2 {height: 160px; top: 30px; transform: translateX(calc(-100% - 50px)) rotate(-15deg);} .nIntro .imdgs img.img4 {height: 160px; top: 30px; transform: translateX(calc(100% + 50px)) rotate(15deg)} .nIntro .imdgs img.img5 {height: 130px; top: 70px;} .nIntro .imdgs img.img1 {height: 130px; top: 80px;} .intro-web .bss {bottom: 240px;} } @media only screen and (max-width : 600px) { .intro-web .bss {bottom: 180px;} .intro-web h1 {font-size: 26px; } .intro-web h2 {font-size: 17px; } .nIntro {max-width: 370px; padding-top: 20px} .nIntro .imdgs {height: 120px;} .nIntro .top {font-size: 16px; white-space: nowrap;} .nIntro .bot {font-size: 20px;} .nIntro .imdgs img.img3 {height: 140px; } .nIntro .imdgs img.img2 {height: 120px; top: 20px; transform: translateX(calc(-100% - 30px)) rotate(-15deg);} .nIntro .imdgs img.img4 {height: 120px; top: 20px; transform:translateX(calc(100% + 30px)) rotate(15deg)} .nIntro .imdgs img.img5 {height: 100px; top: 50px; right: 30px;} .nIntro .imdgs img.img1 {height: 100px; top: 50px; left: 30px;} } .usLoged { display: none; float: left; height: 30px; position: relative; margin-left: 10px; width: 44px; margin-top: 1px; } .usLoged .a {display: block; float: none; width: 60px; } .usLoged .a .img{ display: block; width: 30px; height: 30px; float: left; border-radius: 50%; box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.3); } .usLoged .a i{ float: left; width: 25px; margin-left: -2px; margin-top: 3px; } .usLoged .a i svg{ width: 25px; transform: rotate(-90deg); } @media only screen and (max-width : 1020px) { .flex--ntitler {font-size: 18px !important; } .mDiv { position: absolute; top: 50%; width: 100%; left: 0; padding: 0 30px; -ms-transform: translateY(-50%); transform: translateY(-50%);} .flex--nodesk { display: block; } .flex--menu--iccon {display: block; } .flex--menu--header.active {left: -0%; height: 100vh;} .flex--topo .flex--logo { float: left; margin-left: 0px; } .flex--menu--header {position: fixed;top: 0;left: -100%;transition: 0.3s;-webkit-transition: 0.3s;-moz-transition: 0.3s;z-index: 2;width: 100%;height: 100%;background: linear-gradient(45deg, rgba(0, 0, 0, 0.95) -0%,rgb(7 8 50 / 95%) 100%);} .flex--menu--header a { display: block; margin-left: 0; color: #fff; font-size: 20px; float: none; width: 100%; text-transform: uppercase; text-align: center; border: none !important; padding: 14px 10px !important; } .flex--menu--header a i { bottom: 5px; } } /*NOT FOUND*/ .flex--notfound {position: relative; height: calc(100vh - 100px);} .notfound { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%); } .notfound{max-width:520px;width:100%;line-height:1.4;text-align:center; margin-top: 50px;} .notfound .notfound-404{position:relative;height:240px; margin-top: -12px;} .notfound .notfound-404 h1{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-size:252px;font-weight:900;margin:0;color:#262626;text-transform:uppercase;letter-spacing:-40px;margin-left:-20px} .notfound .notfound-404 h1>span{text-shadow: -12px 0 0 var(--bg1); color: var(--bg2); font-weight: 900;} .notfound h3{position:relative;font-size:16px;font-weight:900;text-transform:uppercase;color:#a7a7a7;margin:0;letter-spacing:2px;padding-left:6px} .notfound h2{font-size:20px;font-weight:900;text-transform:uppercase;color:#a7a7a7;margin-top:0;margin-top:10px} @media only screen and (max-width:767px){ .flex--notfound {position: relative; height: calc(100vh - 130px);} .notfound .notfound-404{height:200px} .notfound .notfound-404 h1{font-size:200px} } @media only screen and (max-width:480px){ .notfound .notfound-404{height:162px} .notfound .notfound-404 h1{font-size:162px;height:150px;line-height:162px} .notfound h2{font-size:16px; width: 89%; margin-left: auto; margin-right: auto;} .notfound .notfound-404 h1>span{text-shadow: -10px 0 0 var(--bg1);} .notfound h3 { font-size: 13px; } } /*HOME*/ .flex--relative { position: relative; width: 100%; height: 900px; background-position: top center; background-repeat: no-repeat; background-image: url(../img/nnew.png); background-attachment: fixed; background-size: auto 115%;;z-index: 0; } .i-bg {position: absolute; z-index: 1; width: 100%;height: 100%; background-position: top center; background-repeat: no-repeat; background-attachment: fixed; background-size: auto 115%;} @media only screen and (max-width : 1098px) { .flex--relative { background-position: center top; } .i-bg {background-position: center top;} } .flex--apress {position: relative; max-width: 740px; width: 100%; padding-left: 20px; padding-right: 20px; margin: 0 auto; top: 50%; transform: translateY(-65%); z-index: 3; } .flex--apress h1 {text-shadow: 2px 2px 2px #000000; max-width: 600px; margin: 0 auto; font-weight: 700; text-align: center; font-size: 52px; padding-top: 0; color: #fff; margin-bottom: 20px; } .flex--apress h2 {text-shadow: 2px 2px 2px #000000; max-width: 640px; margin: 0 auto; text-align: center; font-size: 24px; padding-top: 0; color: #fff; margin-bottom: 40px; } .flex--form--apress {width: 100%; position: relative; padding-right: 15px; margin-left: -10px; z-index: 3;} .flex--form--apress input[type="text"] { color: #fff; width: 100%; padding: 5px; background: none; font-size: 22px; font-weight: 400; background: rgb(8 21 41 / 80%); padding: 14px 28px; padding-bottom: 16px; border-radius: 30px 10px 0 30px; border: transparent 3px solid; transition: 0.7s; -moz-transition: 0.7s; -webkit-transition: 0.7s; } .flex--form--apress input[type="text"]::placeholder { color:#bbb; } .flex--form--apress input[type="text"]:focus {border-color: var(--color2) !important; background: rgba(0,0,0,1); transition: 0.2s; -moz-transition: 0.2s; -webkit-transition: 0.2s; } .flex--form--apress input[type="text"]:focus::placeholder {color: #6b6b6b; } .flex--form--apress button[type="submit"] { background: none; background-color: var(--color2); border-radius: 50%; cursor: pointer; width: 94px; height: 94px; position: absolute; right: 0px; top: 50%; margin-top: -47px;font-size: 0em; text-align: center; } .flex--form--apress button[type="submit"] svg {width:38px; height:38px; } .flex--form--apress button[type="submit"] path {fill: #fff; } .flex--relative .flex--shad { position: absolute; bottom: 0; z-index: 2; left: 0; width: 100%; background: linear-gradient(to bottom, rgba(6,16,38,0) 0%,rgb(6 16 38) 100%); height: 70%; } @keyframes scrollDownAnim{0%{bottom:200px}50%{bottom:240px}100%{bottom:200px}} .scrolldown {background-image: url(../img/scrolldown.png);width: 15px; height: 42px; bottom: 200px; left: 50%; margin-left: -7.5px; position: absolute; animation-name: scrollDownAnim; animation-duration: 2s; animation-iteration-count: infinite; z-index: 20;} .flex--relative.sBuscar {height: 700px;} .flex--relative.sBuscar .flex--apress h1 { font-size: 48px; margin-bottom: 30px; } .flex--relative.sBuscar .flex--apress h2 { display: none; } .flex--relative.sBuscar .scrolldown { display: none; } .sResults {position: absolute; top: -30px; text-align: center; width: 100%; font-size: 22px; color: #bfbfbf; font-weight: 700; text-transform: uppercase;} .sugestion { padding-top: 0; margin-top: -100px;} .sugestion p { font-size: 22px; color: #fff; margin-bottom: 7px;} .sugestion h1 { font-size: 24px;color: #d7b19d; margin-bottom: 12px;font-style: oblique; font-weight: 600;} .sugestion .qIn { font-size: 22px; color: #fff; margin-bottom: 25px;} @media only screen and (max-width : 920px) { .sugestion p { font-size: 18px;} .sugestion h1 { font-size: 20px;} .sugestion .qIn { font-size: 18px; } } @media only screen and (max-width : 650px) { .sResults { top: -20px; font-size: 19px; } .flex--relative { height: 730px } .flex--apress { max-width: 540px; width: 95%; transform: translateY(-75%); } .flex--apress .flex--i {width: 80px; height: 80px; } .flex--apress h1 { font-size: 32px; margin-left: -10px; margin-right: -10px; } .flex--apress h2 { font-size: 18px; } .flex--form--apress button[type="submit"] { width: 68px;height: 68px; right: -17px;margin-top: -34px; } .flex--form--apress input[type="text"] { padding: 10px 20px; padding-bottom: 12px; font-size: 18px; } .flex--form--apress button[type="submit"] svg {width: 30px; height: 30px; } .flex--relative.sBuscar .flex--apress h1 { font-size: 30px; margin-bottom: 30px; padding-top: 120px; } .flex--relative.sBuscar { height: 570px; } } @media only screen and (max-width : 400px) { .flex--apress h1 { font-size: 28px; } } .flex--pagenned { position: relative; margin-top: -140px; padding-bottom: 100px;} .container-load{opacity: 1;position: relative;top: 30px;left: 50%;width: 50%;} .container-load .wrapper{position: absolute;top: -35px;transform: scale(1.2);} .container-load .loader{height: 25px;width: 1px;position: absolute;animation: rotate 3.5s linear infinite;} .container-load .loader .dot{ top: 30px;height: 7px;width: 7px;background: #fff;border-radius: 50%;position: relative;} @keyframes rotate{30%{transform:rotate(220deg)}40%{transform:rotate(450deg);opacity:1}75%{transform:rotate(720deg);opacity:1}76%{opacity:0}100%{opacity:0;transform:rotate(0deg)}}.loader:nth-child(1){animation-delay:.15s}.loader:nth-child(2){animation-delay:.3s}.loader:nth-child(3){animation-delay:.45s}.loader:nth-child(4){animation-delay:.6s}.loader:nth-child(5){animation-delay:.75s}.loader:nth-child(6){animation-delay:.9s} .flex--min--page { width: 100%; padding-top: 180px; background: #1f0000; padding-bottom: 100px; border-bottom: 5px solid #c1171b; } .flex--min--title { font-weight: 700; color: #fff; font-size: 27px; margin-bottom: 20px; text-transform: uppercase; } .flex--min--title2 { font-weight: 700; color: #fff; font-size: 50px; text-align: center; margin-bottom: 10px; text-transform: uppercase; } @media only screen and (max-width : 650px) { .flex--min--page { padding-bottom: 60px; padding-top: 140px;} .flex--min--title2 { font-size: 35px; } .flex--min--desc2 { font-size: 16px !important; } } .flex--min--desc2 { color: #fff; font-size: 22px; text-align: center; margin-bottom: 20px; text-transform: uppercase; width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto; } .flex--ntitler { position: relative; padding-bottom: 10px; font-weight: 700; color: #fff; font-size: 27px; margin-bottom: 20px; } .flex--ntitler span { position: absolute; bottom:0; left: 0%; height: 5px; width: 40px; background: var(--color2); } .flex--boxed {margin-bottom: 60px;} .flex--boxed.nomargin {margin-bottom: 0px;} .flex--padrao {position: relative; padding-top: 70px; padding-bottom: 40px;} .flex--padrao.noPad {padding-top: 0px; padding-bottom: 40px;} .flex--padrao h1{ color: #fff; font-size: 50px; font-weight: 900;} .flex--padrao h2{ color: #fff; font-size: 30px; font-weight: 900;} .flex--padrao h1.left{ float: left; } .flex--padrao select.h1{ color: #fff; font-size: 50px; font-weight: 600; padding: 0; margin:0; background: #1a1a1a; } .flex--padrao p{ color: #dadada; font-size: 17px; width: 100%; max-width: 800px; padding-top: 20px; } .padrao-loader .preload { display: block; } .notsd {font-size: 20px; color: #ccc;} .pageMenu2 { float: none; margin-top: 10px; border-radius: 22px; max-width: 350px; width: 100%; } .pageMenu { float: right; margin-top: 14px; box-shadow: 0 0 15px 0 rgb(0 0 0 / 70%); border-radius: 22px; max-width: 400px; width: 100%; } .pageMenu a {transition: 0.7s;float: left;width: 33.33%;padding: 13px 10px;padding-bottom: 11px;font-weight: 900;text-transform: uppercase;font-size: 15px;background: #1d263b;color: #fff;text-align: center;} .pageMenu a.active {transition: 0.2s;background: var(--color2);} .pageMenu a.onn { border-radius: 22px 0 0 22px ; border-right: #1a1a1a 1px solid; } .pageMenu a.onn0 { border-radius: 0; border-right: #1a1a1a 1px solid; border-left: #1a1a1a 1px solid;} .pageMenu a.onn2 { border-radius: 0 22px 22px 0; border-right: #1a1a1a 1px solid; border-left: #1a1a1a 1px solid;} @media only screen and (max-width : 930px) { .flex--padrao h1 {font-size: 30px;} .flex--padrao h1.left { float: none;} .flex--padrao p {font-size: 15px;} .pageMenu2 { float: none; margin-top: 15px; } .pageMenu { float: none; margin-top: 20px; } .pageMenu a { font-size: 13px; } } .selecter { float: left; width: 25%; padding: 0 15px; margin-bottom: 15px; } .selecter .iaa {font-size: 14px; font-weight: 600; font-style: oblique; color: #fff; padding-left: 13px; padding-bottom: 8px; height: 26px;} .selecter .sFils { width: 100%; display: block; position: relative; margin-top: 0; z-index: 2; } .selecter .sFils .nRells {height: 42px;width: 100%;display: block;font-size: 13px;text-transform: uppercase;padding: 12px 22px;padding-top: 11px;border: rgba(255,255,255,0.2) solid 2px;border-radius: 27px;position: relative;z-index: 2;background: #202e54;} .selecter .sFils .sfilss-p {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 12px;font-weight: 600;font-style: oblique;text-transform: uppercase;padding-right: 20px;position: relative;} .selecter .sFils .sfilss-p i {width: 10px;height: 10px;position: absolute;right: 4px;top: 2px;} .selecter .sFils .sfilss-p i span { float: right; width: 10px; height: 10px; margin-top: -2px; border-bottom: 2px solid rgba(255,255,255,0.3); border-left: 2px solid rgba(255,255,255,0.3); transform: rotate(315deg); } .selecter .sFils .subs { transition: 0.3s; overflow-y: auto; position: absolute; top: 0; z-index: 1; width: 100%; height: 0px; max-height: 590px; padding-top: 0; min-height: 0px; } .selecter .sFils .subs::-webkit-scrollbar { background-color:none !important; width:10px } .selecter .sFils .subs::-webkit-scrollbar-track { background-color:#0d1925; } .selecter .sFils .subs::-webkit-scrollbar-thumb { background-color:var(--color2); border-radius:10px;} .selecter .sFils .subs a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; width: 100%; color: #bdbdbd; font-size: 12px;font-weight: 600; font-style: oblique; text-transform: uppercase; padding: 10px 22px; height: 34px; } .selecter .sFils .subs a.active { text-shadow: 0 0 9px #FFF; color: #fff; } .selecter .sFils.clicked { z-index: 4; } .selecter .sFils.clicked .nRells {border-color: #9c6432; background: var(--color2); } .selecter .sFils.clicked .sfilss-p i span {transform: rotate(135deg); border-color: rgba(255,255,255,1); margin-top: 2px; } .selecter .sFils.clicked .subs {background: #202e54;border-radius: 20px 20px 0 20px;height: auto;padding-top: 29px;min-height: 90px;margin-top: 18px;} @media only screen and (max-width : 1030px) { .selecter { width: 50%; } } /*CATALOGO*/ .flex--catalogo {position: relative; height: 95vh;background-size: cover; background-position: center top; } .flex--catalogo .flex--ovverlai {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg,rgb(6 16 38) 0,rgb(6 16 38 / 80%) 22%,rgb(6 16 38 / 69%) 38%,rgb(6 16 38 / 61%) 58%,rgb(6 16 38 / 73%) 100%); z-index: 1; } .flex--catalogo .flex--capption {z-index: 2;position: absolute;bottom: 0;padding-bottom: 230px;left: 0;transform: translateY(-5%);width: 100%;} .flex--catalogo .flex--capption h1 {font-size: 45px;text-transform: uppercase;font-weight: 800;text-shadow: 4px 4px 4px #000000;padding-left: 20px;padding-right: 20px;text-align: center;width: 100%;max-width: 850px;margin: 0 auto;} .flex--catalogo .flex--capption .flex--center { text-align: center; display: inline-block; } .flex--catalogo .flex--capption .one { display: block; text-align: center; } .flex--catalogo .flex--capption .two {text-align: center; font-size: 16px; padding-bottom: 10px; padding-top: 10px; font-style: oblique; font-weight: 600; } .flex--catalogo .flex--capption .two i {display: inline-block;margin-right: 8px;margin-left: 8px;background: var(--color1);width: 7px;height: 7px;border-radius: 50%;} .flex--catalogo .flex--capption .tre { text-align: center; padding-top: 20px; } .flex--catalogo .flex--capption .one span { margin-left: 20px; float: left; color: #fff; font-size: 16px; font-weight: 600; padding-top: 2px; } .flex--catalogo .flex--capption .one span svg { width: 19px; height: 19px; margin-top: -0px; float: left; margin-right: 10px; } .flex--catalogo .flex--capption .one span svg * { fill: #b5b5b5; } .flex--catalogo .flex--filterss { display: block; position: absolute; left: 0; width: 100%; bottom: 80px; } .dRel { margin-left: -10px; margin-right: -10px; margin-bottom: 15px; } a.assist { margin-right: 10px;box-shadow: 4px 4px 10px 0 rgba(0,0,0,0.8); display: inline-block; width: auto; background:rgba(255,255,255,0.25); padding: 16px 25px; padding-top: 14px; height: 47px; color: #fff; border-radius: 26px; font-weight: 600; transition: 0.3s;} a.assist:hover { background: var(--color1);} a.assist i { float: left; background: rgba(255,255,255,0.3); width: 39px; height: 39px; margin: -9px; margin-top: -10px; margin-right: 14px; margin-left: -20px; padding: 9px; border-radius: 50%; padding-left: 11px; } a.assist i svg { float: left; } a.assist path { fill: #fff; } a.assist span { font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; } .stars { float: left; width: 160px; margin-right: 0px; } .stars .div { float: left; width: 100px; height: 19px; background-image: url(../img/stars.webp); position: relative; background-position: left bottom; background-size: 100% auto; margin: 0 auto; transform: scale(0.9); margin-top: 1px; } .stars .div i {width: 70%; height: 19px; background-image: url(../img/stars.webp); position: absolute; top: 0; left: 0; background-position: left top; } .stars em {float: left; color: #fff; font-weight: 600; font-size: 16px; padding-top: 4px; } .stars em i {float: right;font-size: 12px; letter-spacing: 2px; font-weight: 600; padding-left: 3px; margin-top: 2px; color: #fff; opacity: 0.7; } @media only screen and (max-width : 550px) { .flex--catalogo .flex--capption .one { transform: scale(0.9); } .stars {margin-right: 0; } .flex--catalogo .flex--capption .one span { margin-right: 0; margin-left: 10px; overflow: hidden; max-width: 105px; white-space: nowrap; text-overflow: ellipsis; } a.assist {margin-right: 0; } .flex--catalogo .flex--capption h1 {font-size: 28px; } .flex--catalogo .flex--capption .two {font-size: 14px;} .flex--catalogo .flex--capption .two i { font-size: 13px; } .flex--catalogo .flex--capption {margin-top: -15px; } } @media only screen and (max-width : 530px) { .flex--catalogo .flex--capption { padding-bottom: 180px; } } .nMr {margin-top: -135px; position: relative; z-index: 3; margin-right: -10px; margin-left: -10px; min-height: 180px;} .nMr .flex--lists { padding-top: 0 !important; min-height: 400px; padding-bottom: 90px; } .nMr.not { margin-top: 10px; } /*DONWLOAD*/ .flex--download--info { border-top:5px solid var(--bg2); background-size: 100% auto; position: relative; overflow: hidden; min-height: 780px; background-position: top center; background-repeat: no-repeat; background-image: url(../img/app-background.webp);} .flex--download--info .app-container { padding-top: 100px; } .flex--download--info .app-container .app { position: relative; padding-right: 450px; } .flex--download--info .app-container .app .img { width: 350px; position: absolute; top:-30px; right:0; } .flex--download--info .app-container .app .img img { width: 150%; margin-left: -100px; display: block; } .flex--download--info .app-container .app h1 { font-weight: 700; color: #fff; font-size: 45px; text-align: center; padding-top: 20px; position: relative; padding-bottom: 15px; } .flex--download--info .app-container .app h1 span { position: absolute; bottom:0; left: 50%; margin-left: -20px; height: 5px; width: 40px; background: var(--color2); } .flex--download--info .app-container .app h2 { color: #fff; font-size: 22px; width: 100%; max-width: 550px; margin: 0 auto; text-align: center; padding-top: 30px; } .flex--download--info .app-container .app ul { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; padding-top: 30px; padding-bottom: 40px; } .flex--download--info .app-container .app ul li { float: left; width: 25%; } .flex--download--info .app-container .app ul li { border-left: 2px solid #939394; padding: 15px 0; } .flex--download--info .app-container .app ul li.one { border-left: none; } .flex--download--info .app-container .app ul li i { display: block; margin: 0 auto; background-image: url(../img/app_icon.webp); width: 100px; height: 70px; margin-bottom: 0px; } .flex--download--info .app-container .app ul li.one i { background-position: left; } .flex--download--info .app-container .app ul li.two i { background-position: -100px; } .flex--download--info .app-container .app ul li.tre i { background-position: -200px; } .flex--download--info .app-container .app ul li.for i { background-position: -300px; } .flex--download--info .app-container .app ul li.fiv i { background-position: -400px; } .flex--download--info .app-container .app ul li div { font-size: 15px; text-align: center; color: #c1c1c1; } .flex--download--info .app-container .app .downlaod { display: block; background-image: url(../img/app-store.webp); width: 183px; height: 52px; margin: 0 auto;} @media only screen and (max-width : 1540px) { .flex--download--info { background-size: auto 100%; } .flex--download--info .app-container .app .img img { width: 170%; } } @media only screen and (max-width : 1120px) { .flex--download--info .app-container .app .img img { width: 150%; } } @media only screen and (max-width : 1050px) { .flex--download--info {min-height: 710px; } } @media only screen and (max-width : 990px) { .flex--download--info .app-container .app { position: relative; padding-right: 300px; } .flex--download--info .app-container .app .img { width: 250px; top:-10px; } .flex--download--info .app-container .app .img img { width: 170%; } } @media only screen and (max-width : 880px) { .flex--download--info {min-height: 710px; } .flex--download--info .app-container .app { position: relative; padding-right: 0px; } .flex--download--info .app-container .app .img { width: 250px; top:0px; position: relative; margin-top: 35px; margin-left: auto; margin-right: auto; } .flex--download--info .app-container .app .img img { width: 180%; } } @media only screen and (max-width : 700px) { .flex--download--info { background-size: auto 80%; } } @media only screen and (max-width : 550px) { .flex--download--info { min-height: 680px; } .flex--download--info .app-container .app .img img { width: 160%; margin-left: -50px; } .flex--download--info .app-container { padding-top: 30px; } .flex--download--info .app-container .app h1 { font-size: 28px; } .flex--download--info .app-container .app h2 { font-size: 18px; } .flex--download--info .app-container .app ul { display: none; } .flex--download--info .app-container .app .downlaod { margin-top: 30px; transform: scale(0.9); } .flex--download--info .app-container .app .img { width: 195px; } } .fot {padding-top: 0;padding-bottom: 20px;margin-top: -30px;} .fot .fp {overflow: hidden; max-width: 480px; width:92%; min-height: 215px; margin: 0px auto; margin-top: 80px;} .fot .links {text-align:center; font-size: 15px; width: 95%; max-width: 1000px; margin: 0px auto; padding-top: 50px;} .fot .links a { font-size: 15px; color: #fff; display: inline-block; } .fot .links a.clicked { font-weight: 900; } .fot .copy {font-size: 15px; color: #fff; line-height: 21px; } .fot .links .bold, .copy a { font-size: 15px; font-weight: 700; color: #fff; display: inline-block; } .fot .links span {font-size: 16px;font-weight: 800;color: var(--bg3);padding: 0 15px;display: inline-block;} .fot .links span.hr {background: var(--bg3);height: 2px;margin: 20px 0;display: block;width: 100%;} .fot .links a:hover {text-decoration: underline; } @media only screen and (max-width : 550px) { .fot .links a { margin-bottom: 10px; } .fot .links span.hr { margin-top: 10px; } .fot .links span {padding: 0 10px;} .fot .links a { font-size: 13px; } .fot .copy {font-size: 12px; } } .sCont {font-size: 13px;font-weight: 400;opacity: .6;color: #fff;display: block;padding-top: 3px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; margin-bottom: 6px;} .sCont .bar {position: relative;margin-top: 4px;height: 3px;background: #b1b1b1;} .sCont .bar span { position: absolute; top: 0; left: 0; height: 100%; background:var(--color1); width: 0; } .flex--boxed .owl-stage-outer{ overflow: inherit !important; } .flex--boxed .itemm { transition: 0s; display: block;overflow: hidden !important; position: relative; z-index: 1; } .flex--boxed.nBluered .itemm {opacity: 0.6; filter: blur(0.2px) grayscale(0.35); } .flex--boxed .itemm::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; z-index: 8; border: 2px solid transparent; } .flex--boxed .itemm .img { position: relative; width: 100%; overflow: hidden !important; background: #0e0e0e;} .flex--boxed .itemm .img img{ display:block; width:100%; } .flex--boxed .itemm .caption { z-index:5; position: absolute; bottom:-2%; left:-2%; width: 104%; transition: 0.2s; -moz-transition: 0.2s; -webkit-transition: 0.2s; opacity: 1; padding: 20px; padding-bottom: 12px; } .flex--boxed .itemm .caption .h2 { color: #fff; font-size: 17px; } .flex--boxed .itemm .caption .h3 { color: #fff; font-size: 13px; text-transform: uppercase; padding-top:3px; padding-bottom: 3px; font-weight:700; text-shadow: 1px 1px 2px #000; } .flex--boxed .itemm .caption .h4 {font-size: 10px; font-weight: 400; opacity: .6; color: #fff; display: block; padding-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flex--boxed .itemm .caption2 { z-index:5; position: absolute; padding: 15px; bottom:-70px; left:0; width: 100%; transition: 0.2s; -moz-transition: 0.2s; -webkit-transition: 0.2s; opacity: 1; } .flex--boxed .itemm .caption2 .span1 { float: left; color: #fff; font-size: 13px; } .flex--boxed .itemm .caption2 .span2 { float: right; color: #fff; font-size: 13px; } .flex--boxed .itemm .caption2 .span2::before { content: "";width: 12px; height: 12px; background: url(../img/timePoster.png); background-size: cover; position: relative;top: 2px; margin-right: 3px; display: inline-block; } .flex--boxed .itemm .caption2 .span3 { float: right; color: #fff; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 75px;} .flex--boxed .itemm .caption2 .span3::before { content: "";width: 12px; height: 12px; background: url(../img/timeList.png); background-size: cover; position: relative;top: 2px; margin-right: 3px; display: inline-block; } .flex--boxed .itemm svg { transition: 0.3s; -moz-transition: 0.3s; -webkit-transition: 0.3s; position: absolute; z-index: 5; width: 0px; height:0px; top: 50%; margin-top: 0px; margin-left: 0px; left: 50%; opacity: 0; } .flex--boxed .itemm svg path {fill: #fff; } .flex--boxed .itemm .outline { transition: 0.8s; opacity: 0; border-radius:50%; background: rgba(255,255,255,0.04); position: absolute; top: 50%; left: 10%; z-index: 3; height: 0px; width: 80%; } .flex--boxed .itemm:hover .shad, .lister-continue .itemm:hover .shad { transform: scale(1.2); } .flex--boxed .itemm:hover, .flex--boxed.nBluered .itemm:hover { transition: 0.15s;transform: scale(1.25); z-index: 2; box-shadow: 0 0 15px 15px rgba(6,16,38,1); opacity: 1 !important; filter: blur(0) grayscale(0) !important; } .flex--boxed .itemm:hover::before { border-color: var(--bg1); } .flex--boxed .itemm:hover .caption { opacity: 0; transition: 0.2s; -moz-transition: 0.2s; -webkit-transition: 0.2s; } .flex--boxed .itemm:hover .caption2 { opacity: 1; bottom: -3px; transition: 0.2s; -moz-transition: 0.2s; -webkit-transition: 0.2s; } .flex--boxed .itemm:hover svg { width: 60px; height:60px; margin-top: -30px; margin-left: -30px; opacity: 1; transition: 0.3s; -moz-transition: 0.3s; -webkit-transition: 0.3s; } .flex--boxed .itemm:hover .outline {width: 200%; transition: 0.4s; height: 200%; top: -50%; left: -50%; opacity: 1;} .flex--boxed .itemm:hover .shad { display: none;} @media only screen and (max-width : 900px) { .flex--boxed .itemm .caption { padding: 15px; } } @media only screen and (max-width : 620px) { .flex--boxed .itemm .caption2 .span3 { width: 70px; margin-right: -3px;} .flex--boxed .itemm .caption .h2 { font-size: 15px; } .flex--boxed .itemm .caption .h3 { font-size: 12px; } .flex--boxed .itemm .caption { padding-bottom: 12px; } .flex--boxed .itemm .caption2 { padding-bottom: 12px; } } .flex--boxed.nBluered .itemm2 {opacity: 0.6; filter: blur(0.2px) grayscale(0.35); } .flex--boxed .itemm2 { transition: 0s; display: block; position: relative; z-index: 1; padding: 0 10px; } .flex--boxed .itemm2 img { position: relative; width: 100%; overflow: hidden !important;} .flex--boxed .itemm2:hover { transition: 0.15s; transform: scale(1.25); z-index: 2; opacity: 1 !important; filter: blur(0) grayscale(0) !important; } .flex--boxed .itemm2:hover img { box-shadow: 0 0 15px 15px rgba(6,16,38,1); } .flex--boxed .shad, .lister-continue .shad { z-index:1; position: absolute; top:-5%; left: -5%; width: 110%; height: 110%; background: linear-gradient(to bottom,rgba(26,26,26,0) 0%,rgba(0,0,0,0.85) 90%,rgba(0,0,0,.95) 100%); } .slick-slider { position: static !important; } .slick-list { overflow: inherit !important; z-index: 2; } .slick-arrow { cursor: pointer; position: absolute; z-index: 4; height: 130%; top: -15%; width: 84px; font-size: 0em !important; background: none; } .slick-arrow::before {position: absolute; content:""; width: 100%; height: 100%; left: 0; top: 0; background-repeat: no-repeat; background-position: center center; background-size: 55px auto; } .slick-arrow.slick-prev { left: 0; background: linear-gradient(90deg,var(--bg1) 0,rgba(6,16,38,0) 100%); } .slick-arrow.slick-prev::before {background-image: url(../img/stick-esq.png);} .slick-arrow.slick-next { right: 0; background: linear-gradient(270deg,var(--bg1) 0,rgba(6,16,38,0) 100%);} .slick-arrow.slick-next::before { background-image: url(../img/stick-dir.png);} .slick-arrow.slick-disabled {display: none !important;} @media only screen and (max-width : 1280px) { .slick-arrow { width: 47px; } .slick-arrow::before { background-size: 27px auto; width: 47px; } } .flex--carr {margin-left: -10px; margin-right: -10px;} .flex--carr .stick {padding: 0 10px;} @media only screen and (max-width : 920px) { .flex--carr {margin-left: -5px; margin-right: -5px;} .flex--carr .stick {padding: 0 5px;} .shad-esq, .shad-dir { display: none; } .sugestion p { font-size: 18px;} .sugestion h1 { font-size: 20px;} .sugestion .qIn { font-size: 18px; } } @media only screen and (max-width : 480px) { .flex--car .flex--app--pagee {padding-right: 70px;} } .flex--lists {padding-top: 40px;} .flex--griid {padding: 10px; float: left; width: 14.28%; } .flex--griid2 {padding: 10px; float: left; width: 25%; } @media only screen and (max-width : 930px) { .actor--left {width: 100%;} .actor--right {width: 100%; padding-left: 0; } .actor--right .flex--griid {width: 25%;} .m6 {white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 20px; font-size: 20px; margin-bottom: -44px; text-align: center;} } .actor--right .flex--griid {width: 20%;} @media only screen and (max-width : 650px) { .actor--left {margin-top: 0; } } @media only screen and (max-width : 1610px) { .actor--right .flex--griid {width: 25%;} } @media only screen and (max-width : 1230px) { .actor--right .flex--griid {width: 33.33%;} } @media only screen and (max-width : 730px) { .actor--right .flex--griid {width: 33.33%;} } @media only screen and (max-width : 500px) { .actor--right .flex--griid {width: 50%;} .m6 {white-space: normal; overflow: inherit;} } @media only screen and (max-width : 1250px) { .flex--griid { width: 16.66%; } } @media only screen and (max-width : 1100px) { .flex--griid { width: 25%; } } @media only screen and (max-width : 1070px) { .flex--griid2{ width: 33.33%; } } @media only screen and (max-width : 690px) { .flex--griid { width: 33.33%; } .flex--griid2 { width: 50%; } } @media only screen and (max-width : 500px) { .flex--griid { width: 50%; } .flex--load--more button {width: 100%; } .flex--griid2 { width: 100%; } } .flex--body { position: relative; height: auto; } .flex--body.noOver { height: 100vh !important; overflow: hidden !important; } /*PEDIDOS*/ .list-ped { padding-top: 10px; padding-bottom: 0;} .list-ped li {display: block;position: relative;margin-bottom: 10px;padding: 20px;background: #1f283c;border-radius: 4px;} .list-ped li .img {width: 140px;height: 210px;overflow: hidden;border-radius: 5px;position: relative;top: 0;left: 0;float: left;} .list-ped li .img img {width: 100%; display: block; border-radius: 5px; } .list-ped li .caption {position: relative;padding-left: 20px;width: calc(100% - 140px);display: block;float: left;} .list-ped li .caption h1 {white-space: nowrap;overflow: hidden;color: #fff;font-size: 31px;padding-bottom: 8px;text-overflow: ellipsis;} .list-ped li .caption .tt {font-style: oblique;padding-bottom: 8px;font-weight: 600;color: #ccc;font-size: 18px;} .list-ped li .caption .ttt {font-style: oblique;color: #fff;font-weight: 600;padding-bottom: 10px;font-size: 16px;} .list-ped li .caption .ttt b { font-style: oblique; color: #fff; font-weight: 600; font-size: 12px; } .list-ped li .caption .tttt {color: #c94e50;padding-bottom: 8px;font-size: 19.5px;} .list-ped li .caption .b {position: relative;width: 100%;left: 0;padding-top: 10px;} .list-ped li .caption .b a {display: inline-block; background: var(--bg2);font-weight: 600; color: #a0a0a0;padding: 8px 15px; padding-top: 10px; font-size: 16px; text-transform: uppercase;border: 2px solid #a0a0a0;border-radius: 4px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis; } .list-ped li .caption .b a.pedDisbabled { cursor: pointer; background: rgba(255,255,255,.1);color: #707070;border-color: #151f3a;} .list-ped li .caption .b a.ee {color: #fff;background: var(--color1);font-size: 16px;border-color: var(--color1);display: inline-block;width: auto;} @media only screen and (max-width : 950px) { .list-ped li .img { width: 120px; height: 180px; } .list-ped li .caption { width: calc(100% - 120px); } .list-ped li .caption h1 {font-size: 25px; } .list-ped li .caption .tt {font-size: 16px; } .list-ped li .caption .tttt {font-size: 14px;} .list-ped li .caption .ttt {font-size: 15px; padding-bottom: 5px;} } @media only screen and (max-width : 550px) { .list-ped li .img { width: 110px; height: 165px; } .list-ped li .caption { width: calc(100% - 110px); } .list-ped li .caption h1 {font-size: 23px; } .list-ped li .caption .tt {font-size: 14px; } .list-ped li .caption .ttt {font-size: 14px; padding-bottom: 4px;} .list-ped li .caption .b a {font-size: 13px;} } .serachPED { margin: 0 5px; position: relative;} .serachPED input[type="text"] {display: block; width: 100%; background: #1f283c; font-size: 21px; padding: 15px 20px; border-radius: 4px; text-align: left; color: #fff; padding-right: 60px;} .serachPED input[type="text"]::placeholder { color: #5a6376; } .serachPED button {position: absolute; right: 0; height: 100%; top: 0; background: none; padding: 11px; } .serachPED button svg {display: block; width: auto; height: 100%; } .serachPED button svg * { fill: #fff; } .not-found {position: relative;width: 100%;height: auto;display: block;padding: 60px 0;} .not-found .svg {display: block;margin: 0 auto;position: relative;max-width: 380px; width: 100%;} .not-found .svg svg {display: block;width: 110px;height: auto;margin: 0 auto;} .not-found .svg svg * {fill: #1f283c;} .not-found .svg p {display: block;text-align: center;margin-top: 13px;font-size: 25px; color: #fff; } .not-found .svg p b {display: block;text-align: center;font-size: 18px;padding-top: 9px;font-weight: 600;text-transform: uppercase;color: #a0a0a0;} @media only screen and (max-width : 700px) { .not-found .svg p {font-size: 20px;} .not-found .svg p b {font-size: 14px;} .not-found { padding: 40px 0;} } /*ENGRENA*/ .gears_b {position: relative; height: 280px; margin-top: -12px; } .pads-gear { padding-top: 45px; transform: scale(1.2); } .gears {position: relative;margin: 0 auto;width: auto; height: 0;} .gear {position: relative;z-index: 0;width: 120px; height: 120px;margin: 0 auto;border-radius: 50%;background: var(--bg3);transform: scale(1.2);} .gear:before{position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px;z-index: 2;content: "";border-radius: 50%;background: var(--bg1);} .gear:after {position: absolute; left: 25px; top: 25px;z-index: 3;content: "";width: 70px; height: 70px;border-radius: 50%;border: 5px solid var(--bg3); box-sizing: border-box; background: var(--bg1);} .gear.one {left: -130px; } .gear.two {top: -75px; } .gear.three {top: -235px; left: 130px;} .gear .bar {position: absolute; left: -15px; top: 50%;z-index: 0; width: 150px; height: 30px; margin-top: -15px; border-radius: 5px; background: var(--bg3);} .gear .bar:before {position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px; z-index: 1; content: ""; border-radius: 2px;background: var(--bg1); } .gear .bar:nth-child(2) {transform: rotate(60deg);-webkit-transform: rotate(60deg); } .gear .bar:nth-child(3) {transform: rotate(120deg); -webkit-transform: rotate(120deg);} @-webkit-keyframes clockwise { 0% { -webkit-transform: rotate(0deg);}100% { -webkit-transform: rotate(360deg);}} @-webkit-keyframes anticlockwise { 0% { -webkit-transform: rotate(360deg);} 100% { -webkit-transform: rotate(0deg);}} @-webkit-keyframes clockwiseError {0% { -webkit-transform: rotate(0deg);} 20% { -webkit-transform: rotate(30deg);} 40% { -webkit-transform: rotate(25deg);} 60% { -webkit-transform: rotate(30deg);} 100% { -webkit-transform: rotate(0deg);}} @-webkit-keyframes anticlockwiseErrorStop {0% { -webkit-transform: rotate(0deg);}20% { -webkit-transform: rotate(-30deg);}60% { -webkit-transform: rotate(-30deg);}100% { -webkit-transform: rotate(0deg);}} @-webkit-keyframes anticlockwiseError {0% { -webkit-transform: rotate(0deg);}20% { -webkit-transform: rotate(-30deg);} 40% { -webkit-transform: rotate(-25deg);}60% { -webkit-transform: rotate(-30deg);} 100% { -webkit-transform: rotate(0deg);}} .gear.one { -webkit-animation: anticlockwiseErrorStop 2s linear infinite; } .gear.two { -webkit-animation: anticlockwiseError 2s linear infinite;} .gear.three { -webkit-animation: clockwiseError 2s linear infinite;} .engrena .gear.one, .engrena .gear.three { -webkit-animation: clockwise 3s linear infinite;} .engrena .gear.two { -webkit-animation: anticlockwise 3s linear infinite;} @media only screen and (max-width:570px){ .gears_b { height: 240px; } .pads-gear { padding-top: 45px; transform: scale(1); } } @media only screen and (max-width:570px){ .gears_b { height: 170px; } .pads-gear { padding-top: 45px; transform: scale(0.7); } } .list-cnn {} .list-cnn .icc {display: block;width: 100%;position: relative;background: var(--bg1);border-bottom: 5px solid var(--bg2);height: 105px;} .list-cnn .icc .cn-left { float: left; width: 100px; height: 100px; overflow: hidden; padding: 10px; } .list-cnn .icc .cn-left img { display: block; width: 100%; } .list-cnn .icc .cn-left2 {float: left;width: calc(100% - 100px);height: 93px;position: relative;padding-right: 20px;padding-top: 20px;} .list-cnn .icc .cn-left2 .horario {color: #939393;font-size: 13px;margin-bottom: 2px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;} .list-cnn .icc .cn-left2 .horario em {display: inline-block;border-radius: 3px;color: #fff;background: var(--color2);margin-left: 8px;font-weight: 900;font-size: 11px;padding: 1px 5px;} .list-cnn .icc .cn-left2 .prgr {color: #fff;font-size: 15px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;} .list-cnn .icc .cn-left2 .bar {position: absolute;bottom: 0;width: calc(100% - 20px);left: 0;height: 4px;background: var(--bg2);} .list-cnn .icc .cn-left2 .bar span {position: absolute;height: 100%;background: var(--color2);transition: 0.3s;} .list-cnn .icc .cn-left2 .name { color: #fff; text-transform: uppercase; font-weight: 900; margin-bottom: 6px; text-overflow: ellipsis;overflow: hidden;white-space: nowrap;} .list-cnn .icc .cn-left2 .none { font-size: 14px; padding-top: 1px; color: #565656; font-style: oblique; text-overflow: ellipsis;overflow: hidden;white-space: nowrap; } .cnn-lister {position: relative;width: 100%;background: #091837;height: 100px;margin-bottom: 15px;box-shadow: 0 5px 15px 0 rgb(0 0 0 / 30%);} .cnn-lister .playCannal {position: absolute;top: 0;left: 0;width: 100px;height: 100px;z-index: 2;} .cnn-lister .playCannal a { display: block; width: 100%; background: #202e54; } .cnn-lister .playCannal a img {display: block;width: 100%;background-size: 80% auto;background-position: center center;background-repeat: no-repeat;} .cnn-lister .captionCnn {position: relative;padding-left: 115px;padding-top: 0;height: 100px;} .cnn-lister .captionCnn .name {position: relative;color: #fff;font-size: 18px;text-transform: uppercase;font-weight: 900;margin-bottom: 0;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;padding-right: 40px;height: 40px;padding-top: 12px;} .cnn-lister .captionCnn .epgFav {position: absolute;top: 7px;right: 10px;width: 25px;height: 25px;z-index: 1;} .cnn-lister .captionCnn .epgFav svg { width: auto; height: 100%; display: block;} .cnn-lister .captionCnn .epgFav svg * { fill: #fff; } .cnn-lister .captionCnn .epgFav:hover svg * { fill: var(--color2); } .cnn-lister .captionCnn .cn-left2 {display: block;height: 60px;position: relative;/* padding-right: 20px; *//* padding-top: 20px; */} .cnn-lister .captionCnn .cn-left2 .horario {color: #939393;font-size: 11px;margin-bottom: 2px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;} .cnn-lister .captionCnn .cn-left2 .horario em {display: inline-block;border-radius: 3px;color: #fff;background: var(--color2);margin-left: 8px;font-weight: 900;font-size: 9px;padding: 1px 5px;text-transform: uppercase;padding-top: 3px;} .cnn-lister .captionCnn .cn-left2 .prgr {color: #fff;font-size: 15px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;} .cnn-lister .captionCnn .cn-left2 .bar {position: absolute;bottom: 0;width: calc(100% + 15px);left: 0;height: 4px;margin-left: -15px;overflow: hidden;background: #1c2e3a; } .cnn-lister .captionCnn .cn-left2 .bar span {position: absolute;height: 2px;background: var(--color2);transition: 0.3s;top: 1px;} .cnn-lister .captionCnn .cn-left2 .name2 {color: #d3d3d3;text-transform: uppercase;font-weight: 900;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;padding-right: 10px;font-size: 12px;padding-top: 7px;} .cnn-lister .captionCnn .cn-left2 .none {font-size: 13px;padding-top: 5px;color: #565656;font-style: oblique;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;} .cnn-lister .captionCnn .cn-left2 .none2 { margin-left: -7px; padding-bottom: 5px; } .cnn-lister .captionCnn .rrs {display: inline-block;border-radius: 3px;color: #fff;background: #22415f;margin-left: 8px;font-weight: 900;font-size: 10px;padding: 1px 5px;text-transform: uppercase;padding-top: 3px;} .cnn-lister .captionCnn .rrs svg {float: left;width: 10px;height: 10px;margin-top: 0;margin-right: 2px;} .cnn-lister .captionCnn .rrs svg * { fill:#fff;} .cnn-lister .captionCnn .rrs:hover { background: var(--color2); transform: scale(1.1); } .cnn-lister:hover .playCannal a {background: #171b27;} .cnn-lister:hover {background: #142445;} @media only screen and (min-width : 780px) { .list-cnn { margin-left: -10px; margin-right: -10px;} .cnn-lister {float: left;width: calc(50% - 20px);margin-left: 10px;margin-right: 10px;margin-bottom: 20px;} } @media only screen and (min-width : 1080px) { .list-cnn { margin-left: -10px; margin-right: -10px;} .cnn-lister {float: left;width: calc(33.33% - 20px);margin-left: 10px;margin-right: 10px;margin-bottom: 20px;} } .flex--tempers { display: none; width: 100%; max-width: 1000px; } .flex--tempers .sinopse { display: none; } .flex--tempers .iteem{ position: relative; margin-bottom: 40px; } .flex--tempers .iteem .img{ overflow: hidden; position: absolute; top: 0; left: 0; width: 364px; } .flex--tempers .iteem .img img{ display: block; width: 100%; } .flex--tempers .iteem .img .cap-caption { position: absolute; bottom: 0; left: 0; width: 100%; transition: 0.3s; padding: 15px; z-index: 2; color: #fff; } .flex--tempers .iteem .img .cap-caption .nBar { display: block; height: 8px; padding-top: 5px; } .flex--tempers .iteem .img .cap-caption .nBar .bar { position: relative; height: 3px; background: #292929; width: 100%; } .flex--tempers .iteem .img .cap-caption .nBar .bar span { height: 100%; background: #c1171b; position: absolute; top: 0; left: 0; } .flex--tempers .iteem .img i { display: block; font-weight: 700; color: #fff; font-size: 21px; } .flex--tempers .iteem .img .outline { transition: 0.8s; opacity: 0; border-radius:50%; background: rgba(255,255,255,0.12); position: absolute; top: 50%; left: 10%; z-index: 3; height: 0px; width: 80%; } .flex--tempers .iteem .img:focus .outline, .flex--tempers .iteem .img:hover .outline { width: 200%; transition: 0.4s; height: 200%; top: -50%; left: -50%; opacity: 1;} .flex--tempers .iteem .img:focus .cap-caption, .flex--tempers .iteem .img:hover .cap-caption { bottom: -60px;} .flex--tempers .iteem .tcaption{ position: relative; padding-left: 394px; } .flex--tempers .iteem .tcaption .h1 { font-size: 21px; color: #fff; font-weight: 700; padding-top: 35px; margin-bottom: 20px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .flex--tempers .iteem .tcaption .h2 { color: #888; font-size: 19px; height: 69px; overflow: hidden; margin-bottom: 33px; } .flex--tempers .iteem .tcaption .h3 { } .flex--tempers .iteem .tcaption .h3 .bla { float: left; margin-right: 20px; color: #ccc; font-size: 16px; font-weight: 700; } .flex--tempers .iteem .tcaption .h3 .bla svg { float: left;width: 21px;height: 21px;margin-top: -2px !important;margin-right: 10px; } .flex--tempers .iteem .tcaption .h3 .bla svg path { fill: #b5b5b5; } .flex--tempers .iteem .tcaption .h3 .red { float: left; margin-right: 10px; color: #fff; background: #c1171b; padding: 3px 7px; font-weight: 700; font-size: 16px; margin-top: -3px; } .flex--tempers .iteem .img svg { transition: 0.3s; -moz-transition: 0.3s; -webkit-transition: 0.3s; position: absolute; z-index: 5; width: 0px; height:0px; top: 50%; margin-top: 0px; margin-left: 0px; left: 50%; opacity: 0; } .flex--tempers .iteem .img svg path {fill: #fff; } .flex--tempers .iteem .img:hover svg, .flex--tempers .iteem .img:focus svg { width: 60px; height:60px; margin-top: -30px; margin-left: -30px; opacity: 1; transition: 0.3s; -moz-transition: 0.3s; -webkit-transition: 0.3s; } .flex--nTemsp { float: left; margin-bottom: 55px; position: relative; z-index: 10;} .flex--selecter {float: left; position: relative; height: auto; background: #1f1f1f; box-shadow: 4px 4px 10px 0 rgba(0,0,0,0.3); } .flex--selecter .mTop { float: left; font-weight: 700; color: #fff; padding: 18px 30px; } .flex--selecter .mTop span { min-width: 130px; display: inline-block; font-size: 20px; font-weight: 700; color: #fff; } .flex--selecter .mTop i { position: relative; float: right; border: 2px solid #555; border-radius: 50%; width: 30px; height: 30px;margin-left: 15px; margin-top: -3px; } .flex--selecter .mTop i svg{ transform: 0.3s; transform: rotate(-90deg); width: 26px; height: 26px; } .flex--selecter .nTop { display: none; position: absolute; top: 63px; width: 100%; background: #333; box-shadow: 0 8px 10px 1px rgba(0,0,0,0.8); } .flex--selecter .nTop .hr { background: #2d2d2d; display: block;height: 3px; margin-left: 30px; margin-right: 30px;} .flex--selecter .nTop a { padding: 18px 30px; font-size: 20px; font-weight: 700; color: #797c80; display: block;} .flex--selecter .nTop a:hover { color: #fff; background: rgba(0,0,0,0.25); } .flex--eps { float: left;color: #888;font-size: 16px; padding-top: 20px; padding-left: 21px; } .flex--nTemsp.clicked .mTop, .flex--nTemsp .mTop:hover{ } .flex--nTemsp.clicked .mTop i svg{ transform: rotate(90deg); width: 26px; height: 26px; } .flex--filterers { position: relative; z-index: 10; width: 100%; height: 100%; z-index: 190; padding-top: 30px; } .flex--filterers .flex--desk { overflow: hidden; min-height: calc(100vh - 30px); -webkit-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; -webkit-box-shadow: 0 15px 15px 8px rgba(0,0,0,0.8); box-shadow: 0 15px 15px 8px rgba(0,0,0,0.8);position: relative; z-index: 1; width: 96%; max-width: 900px; margin-left: auto; margin-right: auto; background: var(--bg1);padding-bottom: 30px; } .flex--filterers .flex--desk .flex--ratior { position: relative; background: var(--bg1); padding-bottom: 52%; height: 0; background-position: top center; background-size: 100% auto; background-repeat: no-repeat;} .flex--filterers.loggeds { display: none; position: fixed; overflow: auto; background: rgba(0,0,0,0.5);} .flex--filterers.loggeds .ip { position: fixed;top: 50%; left: 50%;} .flex--filterers.loggeds .flex--desk {display: none; } .flex--filterers .flex--desk .flex--ratior .flex--ishad { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; background: linear-gradient(to bottom,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 41%,rgb(6 16 38) 100%); } .flex--filterers .flex--desk .flex--ratior .flex--vls { z-index: 6; position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; background: #1a1a1a; border-radius: 50%; padding: 12px; } .flex--filterers .flex--desk .flex--ratior .flex--vls:hover {background: var(--color2); } .flex--filterers .flex--desk .flex--ratior .flex--vls svg { display: block; width: 100%;} .flex--filterers .flex--desk .flex--ratior .flex--vls svg * { fill: #fff;} .flex--filterers .flex--desk .flex--ratior .flex--homeplay { position: absolute; top: 50%; margin-top: -20px; left: 50%; transform: translateY(-50%) translateX(-50%); width: 90px; height: 90px; z-index: 5; border: 3px solid #fff; background: rgba(0,0,0,0.5); padding: 20px; border-radius: 50%; } .flex--filterers .flex--desk .flex--ratior .flex--homeplay:hover { background: var(--bg1); } .flex--filterers .flex--desk .flex--ratior .flex--homeplay svg {display: block; width: 100%; float: left; margin-left: 2px;} .flex--filterers .flex--desk .flex--ratior .flex--homeplay svg * { fill: #fff;;} .flex--filterers .flex--filters--caption {transform: translateY(0) translateX(0) !important;} .flex--filterers .flex--desk .flex--ratior .flex--ititle { position: absolute; position: absolute; bottom: 100px; left: 0; padding: 0 50px; width: 100%; z-index: 5; } .flex--filterers .flex--desk .flex--ratior .flex--ititle .p { font-weight: 900; color: #dadada; text-shadow: 2px 2px 2px #000; font-size: 18px; font-style: oblique; } .flex--filterers .flex--desk .flex--ratior .flex--ititle .p b { color: #d7b19d; font-weight: 900; padding-left: 5px; } /*.flex--filterers .flex--desk .flex--ratior .flex--ititle .h1 { font-size: 40px; font-weight: 900; text-shadow: 5px 2px 2px rgba(0,0,0,0.5); padding-right: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }*/ .flex--filterers .flex--desk .flex--ratior .flex--ititle .h1 { font-size: 40px; font-weight: 900; text-shadow: 5px 2px 2px rgba(0,0,0,0.5); padding-right: 60px;} .flex--filterers .flex--desk .flex--infoor {position: relative; z-index: 2; margin-top: -85px; padding-left: 50px; padding-right: 50px;} .flex--filterers .flex--desk .flex--sinp {float: left; width: calc(100% - 240px); padding-right: 20px; } .flex--filterers .flex--desk .flex--minn { margin-top: 10px; width: calc(100% - 265px); } .flex--filterers .flex--desk .flex--minn .ctg{ margin-right: 10px; float: left; } .flex--filterers .flex--desk .flex--minn .ctg img{ display: block; height: 28px; float: left; margin-top: -4px;} .flex--filterers .flex--desk .flex--minn .gen{margin-right: 10px; float: left; text-transform: uppercase; font-weight: 900; font-style: oblique; color: #dadada; text-shadow: 2px 2px 2px #000; font-size: 15px; } .flex--filterers .flex--desk .flex--minn .stars{ width: auto; margin-right: 10px; float: left; margin-top: -2px; } .flex--filterers .flex--desk .flex--minn .stars em{ font-style: oblique;text-shadow: 2px 2px 2px #000; } .flex--filterers .flex--desk .flex--minn .stars i{ font-style: oblique;text-shadow: 2px 2px 2px #000; } .flex--filterers .flex--desk .flex--minn .temps{ margin-right: 10px; float: left; text-transform: uppercase; font-weight: 900; font-style: oblique; color: #dadada; text-shadow: 2px 2px 2px #000; font-size: 15px; } .flex--filterers .flex--desk .ind {float: left; width: 20px; margin-right: 14px;} .flex--filterers .flex--desk .flex--minn .temps span {margin-right: 15px;float: left;font-weight: 900;} .flex--filterers .flex--desk .flex--minn .temps span svg {width: 22px;height: 22px;float: left;margin-right: 10px;margin-top: -2px;} .flex--filterers .flex--desk .flex--minn .temps span svg * { fill:#fff;} .flex--filterers .flex--desk .flex--infoor .flex--sinp .flex--tcx { margin-top: 10px; font-size: 17px; } .flex--filterers .flex--desk .flex--infoor .flex--auth { float: left; width: 240px; } .flex--filterers .flex--desk .flex--infoor .flex--elenc { color: #fff; font-size: 14px; margin-top: 10px; } .flex--filterers .flex--desk .flex--infoor .flex--elenc b { font-weight: 900; color: #777; font-size: 14px; padding-right: 5px; } .flex--filterers .flex--desk .flex--infoor .flex--tcx .flex--elenc {font-size: 17px; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flex--filterers .flex--desk .flex--infoor .flex--tcx .flex--elenc b {font-size: 17px; } .flex--filterers .flex--desk .flex--infoor .flex--bottomm {font-size: 17px; margin-top: 30px; } .flex--filterers .flex--tempers .iteem .img { width: 260px; } .flex--filterers .flex--tempers .iteem .img i {font-size: 15px; } .flex--filterers .flex--tempers .iteem .tcaption {padding-left: 292px; } .flex--filterers .flex--tempers .iteem .tcaption .h1 { padding-top: 12px; font-size: 16px; margin-bottom: 12px; } .flex--filterers .flex--tempers .iteem .tcaption .h2 {font-size: 15px; height: 58px; margin-bottom: 19px; } .flex--filterers .flex--tempers .iteem .tcaption .h3 .bla {font-size: 13px; } .flex--filterers .flex--tempers .iteem .tcaption .h3 .bla svg { width: 19px; height: 19px; margin-right: 7px; } .flex--filterers .flex--tempers .iteem .tcaption .h3 .red {font-size: 13px; } .flex--filterers .flex--tempers .iteem{ margin-bottom: 30px; } .flex--filterers .flex--tempers .shad { z-index: 1; position: absolute; top: -5%; left: -5%; width: 110%; height: 110%; background: linear-gradient(to bottom, rgba(26,26,26,0) 0%,rgba(0,0,0,0.85) 90%,rgba(0,0,0,.95) 100%); } .flex--filterers .itemm { position: relative; display: block; overflow: hidden; } .flex--filterers .itemm .img img { display: block; width: 100%; } .flex--filterers .itemm .caption { z-index:5; position: absolute; bottom:0; left:0; width: 100%; transition: 0.2s; -moz-transition: 0.2s; -webkit-transition: 0.2s; opacity: 1; padding: 20px; padding-bottom: 12px; } .flex--filterers .itemm .caption .h2 { color: #fff; font-size: 17px; } .flex--filterers .itemm .caption .h3 { color: #fff; font-size: 13px; text-transform: uppercase; padding-top:3px; padding-bottom: 3px; font-weight:700; text-shadow: 1px 1px 2px #000; } .flex--filterers .itemm .caption .h4 {font-size: 10px; font-weight: 400; opacity: .6; color: #fff; display: block; padding-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flex--filterers .itemm .shad { z-index:1; position: absolute; top:-5%; left: -5%; width: 110%; height: 110%; background: linear-gradient(to bottom, rgba(26,26,26,0) 0%,rgba(0,0,0,0.85) 90%,rgba(0,0,0,.95) 100%); } .flex--filterers .flex--griid {width: 25%;} .flex--filterers .flex--films { margin-left: -10px; margin-right: -10px;} .flex--filterers .flex--films .h7 {font-size: 20px; padding-left: 10px; text-transform: uppercase; font-weight: 700; color: #fff; margin-bottom: 20px; } .flex--filterers .enterr { cursor: pointer; background-color: #c1171b; top: 30px; right: 30px; position: absolute; z-index: 10; line-height: normal; padding: 7px 30px; font-size: 16px; font-weight: 900; border-radius: 40px;-webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,0.9);box-shadow: 0 0 20px 0 rgba(0,0,0,0.9); } .flex--filterers .seeking-display {display: none;} .flex--prell {display: block;} .flex--overall {display: block;} @media only screen and (max-width : 810px) { .flex--filterers .flex--desk .flex--ratior {padding-bottom: 56%; } .flex--filterers .flex--desk .flex--ratior .flex--homeplay {margin-top: -40px;} .flex--filterers .flex--desk .flex--ratior .flex--ititle .h1 {font-size: 35px; } .flex--filterers .flex--desk .flex--ratior .flex--ititle .p {font-size: 15px; } .flex--filterers .flex--desk .flex--infoor .flex--sinp .flex--tcx {font-size: 14px; } } @media only screen and (max-width : 770px) { .flex--filterers .flex--desk .flex--minn { margin-top: 10px; width: 100%; } .flex--filterers .flex--desk .flex--infoor .flex--sinp {width: 100%; padding-right: 0;} .flex--filterers .flex--desk .flex--infoor .flex--auth {width: 100%; } .flex--filterers .flex--desk .flex--infoor .flex--tcx .flex--elenc {font-size: 14px;} .flex--filterers .flex--desk .flex--infoor .flex--tcx .flex--elenc b {font-size: 14px;} } @media only screen and (max-width : 660px) { .flex--filterers .flex--desk .flex--ratior {padding-bottom: 62%; background-size: auto 100%; } .flex--filterers .flex--desk .flex--ratior .flex--homeplay {width: 80px; height: 80px;} .flex--filterers .flex--desk .flex--ratior .flex--ititle .h1 { font-size: 30px; } .flex--filterers .flex--desk .flex--ratior .flex--ititle {padding: 0 20px; } .flex--filterers .flex--desk .flex--infoor { padding-left: 20px; padding-right: 20px; } } @media only screen and (max-width : 580px) { .flex--filterers .flex--griid {width: 33.33%;} .flex--filterers .flex--tempers .iteem .img { float: left; width: 40%;} .flex--filterers .flex--tempers .iteem .tcaption { padding-left: 20px; float: right; width: 60%; } .flex--filterers .flex--tempers .iteem .tcaption .h3 .red {font-size: 10px; } .flex--filterers .flex--tempers .iteem .tcaption .h2 {display: none; } .flex--tempers .sinopse {display: block; } .flex--tempers .nTT {display: none; } .flex--filterers .flex--desk .flex--minn .stars {margin-right: -20px; margin-top: -4px; transform: scale(0.9);} .flex--filterers .flex--desk .flex--minn .temps {font-size: 13px; } .flex--filterers .flex--desk .flex--minn .ctg img {margin-top: -3px; height: 23px; } } @media only screen and (max-width : 500px) { .flex--filterers .flex--desk .flex--ratior .flex--homeplay { width: 60px; height: 60px; padding: 14px;} .flex--filterers .flex--desk .flex--ratior {padding-bottom: 65%; } .flex--filterers .flex--desk .flex--ratior .flex--ititle .p { font-size: 13px; } .flex--filterers .flex--desk .flex--infoor .flex--elenc {font-size: 13px; margin-top: 5px;} .flex--filterers .flex--desk .flex--infoor .flex--elenc b {font-size: 13px; } .flex--filterers .flex--desk .flex--infoor .flex--sinp .flex--tcx {font-size: 13px;} .flex--filterers .flex--desk .flex--infoor .flex--tcx .flex--elenc {font-size: 13px;} .flex--filterers .flex--desk .flex--infoor .flex--tcx .flex--elenc b {font-size: 13px;} .flex--filterers .flex--films .h7 {font-size: 20px;} .flex--filterers .flex--griid {width: 50%;} .flex--filterers .flex--desk .flex--ratior .flex--vls {top: 10px; right: 10px;} .flex--filterers .flex--desk .flex--ratior .flex--ititle .h1 {padding-right: 0; font-size: 27px;} } @media only screen and (max-width : 480px) { .flex--filterers .flex--desk .flex--ratior .flex--ititle .h1 { font-size: 22px; } .flex--filterers .flex--desk .flex--ratior .flex--ititle .p {font-size: 11px; } .flex--filterers .flex--desk .flex--minn .temps {margin-right: 0;} .flex--filterers .flex--desk .flex--minn .temps span svg {width: 20px; height: 20px;} .flex--filterers .flex--desk .flex--minn .stars {float: right; margin-left: 0;} .flex--filterers .flex--desk .flex--ratior {padding-bottom: 83%; } } @media only screen and (max-width : 400px) { .flex--filterers {padding-top: 10px;} .flex--filterers .flex--desk {width: calc(100% - 20px);} .flex--filterers .flex--desk .flex--ratior .flex--homeplay {width: 50px; height: 50px; padding: 9px; margin-top: -50px; } .flex--filterers .itemm .caption .h2 {font-size: 14px; } .flex--filterers .flex--films .h7 {font-size: 17px; margin-bottom: 10px; } .flex--filterers .flex--desk .flex--minn .temps span {margin-right: 8px;} .flex--filterers .flex--desk .ind {margin-right: 10px;} .stars .div { width: 21px; height: 24px; margin-right: 3px; background-image: none; background-repeat: no-repeat;} .flex--desk .flex--filters--caption a.play span {font-size: 16px !important; } } .flex--filterers.loggeds .flex--desk .flex--infoor {margin-top: 0;} .flex--filterers.loggeds .flex--desk .flex--ratior .flex--ititle {bottom: 10px;} @media only screen and (max-width : 550px) { .flex--filterers.loggeds .flex--desk .flex--infoor {margin-top: 55px;} .flex--filterers.loggeds .flex--desk .flex--ratior .flex--ititle {bottom: -55px;} } /*FILTERS*/ .flex--filters { position: relative; height: 830px; background: #000000; z-index: 1;} .flex--filters .flex--ratior { position: relative; z-index: 1; height: 100%; background-size: auto 100%; background-color: #000; background-repeat: no-repeat; background-position: center center;} .flex--playr { transition: .2s; position: absolute; top: 0; right: 0; width: 65%; height: 100%; z-index: 1; } .flex--playr .l { z-index: 3;background: linear-gradient(to right,rgb(0 0 0) 0%,rgba(26,26,26,0) 50%,rgba(26,26,26,0) 100%); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .flex--playr .b { z-index: 3;background: linear-gradient(to bottom,rgba(26,26,26,0) 0%,rgba(26,26,26,0) 40%,rgb(0 0 0) 100%); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .playb {position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; z-index: 2; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(26,26,26,1) 100%); } .flex--playl { position: absolute; z-index: 3; padding-top: 110px; padding-bottom: 150px; width: 100%; height: 100%; } .flex--filters--caption { max-width: 720px; width: 100%; position: relative; top: 50%; transform: translateY(-50%); display: block;} .flex--filters--caption .title-play { color: #fff; font-size: 42px; font-weight: 700; margin-bottom: 5px; } .flex--players { margin-top: 15px; margin-left: -5px; margin-right: -5px; } .flex--filters--caption .category { width: 100%;float: left; margin-bottom: 15px;} .flex--filters--caption .sinopse { color: #fff; padding-top: 15px; font-size: 15px; } .flex--filters--caption .sinopse b { display: block; margin-bottom: 3px;font-style: oblique; font-size: 14px; font-weight: 700; text-transform: uppercase; color: #fff; padding-right: 5px;} .flex--filters--caption .sinopse i { display: block; margin-bottom: 3px; font-size: 22px; font-weight: 700; text-transform: uppercase; color: #fff; padding-right: 5px;} .flex--filters--caption .others { padding-top: 12px; font-size: 15px; } .flex--filters--caption .others h3, .play-l .original h3 { font-size: 15px; color: #fff; padding-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .flex--filters--caption .others h3 b, .play-l .original h3 b { font-style: oblique; font-size: 14px; font-weight: 700; text-transform: uppercase; color: #fff; padding-right: 5px;} .flex--filters--caption .info1 .votos { color: #50cd74; font-size: 15px; display: inline-block; margin-right: 10px; font-size: 16px; font-weight: 700;} .flex--filters--caption .info1 .ano { color: #fff; font-size: 13px; display: inline-block; margin-right: 10px; font-size: 16px; font-weight: 700; float: left; } .flex--filters--caption .info1 .duracao { color: #fff; font-size: 13px; display: inline-block; font-size: 16px; font-weight: 700; margin-left: 10px; margin-right: 10px; float: left;} .flex--filters--caption .info1 .stars { margin-top: -4px; } .flex--filters--caption .info1 .idiomas { padding-right: 20px; padding-top: 3px; float: right; } .flex--filters--caption .info1 .idiomas span { bdisplay: inline-block; background: #c54f4f; color: var(--bg1); margin-left: 5px; padding: 3px 5px; padding-bottom: 0px; font-size: 11px; text-transform: uppercase; float: left;} .flex--filters--caption .info1 .svg {float: left; width: 22px; height: 22px; margin-right: 10px; margin-top: -3px; } .flex--filters--caption .info1 .svg svg { display: block; width: 100%;} .flex--filters--caption .info1 .svg path { fill: #b5b5b5;} .flex--filters--caption .social { margin-top: 20px; } .flex--filters--caption a.play { float: left; margin-left: 5px; margin-right: 5px;box-shadow: 4px 4px 10px 0 rgba(0,0,0,0.3); display: inline-block; width: auto; background: rgba(255,255,255,0.15); padding: 16px 25px; padding-top: 14px; height: 47px; color: #fff; border-radius: 26px; font-weight: 600; transition: 0.3s;} .flex--filters--caption a.play:hover { background: var(--color2);} .flex--filters--caption a.play i { float: left; background:rgba(255,255,255,0.15); width: 39px; height: 39px; margin: -9px; margin-top: -10px; margin-right: 10px; margin-left: -20px; padding: 9px; border-radius: 50%; padding-left: 11px; } .flex--filters--caption a.play i svg { float: left; width: 19px; height: 19px; display: block; margin-left: -1px; } .flex--filters--caption a.play path { fill: #fff; } .flex--filters--caption a.play span { font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; } .flex--filters--caption a.play.active { background: var(--color1); } .flex--filters--caption a.play.active:hover {background: var(--color2); } .flex--filters--caption a.play:hover i { background:rgba(255,255,255,0.25); } .flex--filters--caption a.play.active i { background:rgba(255,255,255,0.25); } .flex--filters--caption .flex--itnn { float: left; padding-right: 10px; height: 47px; } .flex--filters--caption .flex--itn { float: left; width: auto; height: 47px; } .flex--filters--caption .flex--itnn2 { float: left; max-width: 400px; height: 47px; } .flex--filters--caption .flex--itn2 { float: left; width: auto; height: 47px; margin-right: -100px;} .flex--filters--caption .ranking { float: left; width: 28px; height: 30px; margin-right: 9px; margin-top: 6px; } .flex--filters--caption .ranking svg { display: block; width: 100%; } .flex--filters--caption .ranking svg path, .flex--filters--caption .ranking svg polygon { fill: #fff; } .flex--filters--caption .category .catego { float: left; width: calc(100% - 40px); text-shadow: 2px 2px 2px #000000; text-transform: uppercase; padding-top: 10px; padding-bottom: 13px; font-size: 12px; color: #dadada; font-weight: 700; display: block; position: relative; font-style: oblique; } .flex--filters--caption .category .catego i {width: 35px; height: 4px; background: #c1171b; position: absolute; left: 0; bottom: 3px; border-radius: 5px;} @media only screen and (max-width : 700px) { .flex--playl.serie {padding-bottom: 0; } .flex--filters--caption .flex--itn2 { float: none; width: 240px; height: 47px; margin: 0 auto; margin-top: 15px; } .flex--filters--caption .flex--itnn2 { float: none; margin: 0 auto; min-height: 47px; height: auto; text-align: center; margin-top: -15px; } .flex--filters--caption .flex--itnn2 a.btn-play { float: none !important; margin-top: 15px; } } @media only screen and (max-width : 560px) { .flex--desk .flex--filters--caption .flex--itnn { float: left !important; width: auto !important;} .flex--desk .flex--filters--caption .flex--itn { float: left !important; margin-top: 2px !important; width: auto !important; margin-right: -40px !important;} .flex--desk .flex--filters--caption a.play {height: 35px !important;padding-top: 6px !important;padding-right: 10px !important;margin-right: 0 !important;} .flex--desk .flex--filters--caption a.play i {height: 27px !important;width: 27px !important;margin-right: 5px !important;margin-top: -2px !important;padding: 0 !important;position: relative;} .flex--desk .flex--filters--caption a.play span { font-size: 12px !important; } .flex--desk .flex--filters--caption a.play span { font-size: 12px !important; } .flex--desk .flex--filters--caption a.play.svg {width: 35px !important;height: 35px !important;padding-left: 24px !important;padding-top: 6px !important;} .flex--desk .flex--filters--caption a.play.svg.linkShared { display: none !important; } .flex--desk .flex--filters--caption a.play i svg{width: auto !important;height: 14px !important;display: block;position: absolute;top: 50%;left: 50%;margin-left: -6px;margin-top: -8px;} .flex--desk .seeking-display {padding-right: 114px !important;} .flex--desk .seeking-display .time {margin-top: -10px !important; font-size: 13px !important; width: 100px !important; } } @media only screen and (max-width : 500px) { .flex--filters--caption .flex--itnn { float: none; margin: 0 auto; } .flex--filters--caption .flex--itn { float: none; width: 180px; height: 47px; margin: 0 auto; margin-top: 15px; } } @media only screen and (max-width : 460px) { .flex--filters--caption .info1 .stars {display: none; } } .seeking-display { margin-top: 20px; height: 10px; width: 100%; position: relative; padding-right: 130px; } .seeking-display .bar {box-shadow: 3px 3px 10px 0 rgba(0,0,0,0.8); height: 3px; width: 100%; position: relative; background: #b4baba; margin-top: 15px; } .seeking-display .bar span { transition: 0.3s; -webkit-transition: 0.3s; position: absolute; top: 0; left: 0; height: 100%; background: var(--color1); } .seeking-display .time {position: absolute; right: 0; color: #ffffff; font-size: 15px; font-weight: 700; white-space: nowrap; text-align: left; width: 120px; text-shadow: 2px 2px 3px #2b2b2b;; margin-top: -12px; white-space: nowrap; } .flex--filters--caption a.play.svg { position: relative; padding-right: 0px; width: 49px; padding-top: 15px;height: 49px; margin-top: -2px; } .flex--filters--caption a.play.svg i { margin-right: 0; } .flex--filters--caption a.play.svg em { width: auto; position: absolute; background: rgba(0,0,0,0.8); color: #fff; font-size: 13px; white-space: nowrap; padding: 7px 13px; top: -10px; left: 50%; transform: translateX(-50%); transition: 0.4s; opacity: 0; } .flex--filters--caption a.play.svg em div {width: auto; position: absolute; border-top: 10px solid rgba(0,0,0,0.8); border-left: 10px solid transparent; border-right: 10px solid transparent; bottom: -10px; left: 50%; margin-left: -10px; } .flex--filters--caption a.play.svg:hover { background: rgba(255,255,255,0.2); } .flex--filters--caption a.play.svg:hover em { transition: 0.1s; opacity: 1; top: -32px; } @media only screen and (max-width : 990px) { .flex--filters { height: 700px; } .flex--filters--caption {max-width: 580px; top: 100%; transform: translateY(-100%);} .flex--filters--caption .others {display: none;} .flex--filters--caption .title-play {font-size: 30px; } .flex--filters--caption .category {font-size: 13px; } .btn-like {display: none !important;} .btn-unlike {display: none !important; } .flex--filters--caption .sinopse {font-size: 13px;} .flex--recoom {margin-top: 0 !important; padding-top: 40px; } .flex--recoom2 {margin-top: 0 !important; padding-top: 40px; } .flex--recoom3 { margin-top: 0 !important; padding-top: 0; } .flex--recomended { font-size: 22px !important; } .flex--nTemsp {margin-bottom: 50px !important; } .flex--playr {width: 100%;} .flex--playr .l {background: linear-gradient(to right,rgb(26 26 26 / 0.8) 0%,rgba(26,26,26,0) 80%,rgba(26,26,26,0) 100%)} .flex--playr .b { background: linear-gradient(to bottom,rgba(26,26,26,0) 0%,rgba(26,26,26,0) 20%,rgba(26,26,26,1) 100%); } .flex--playl { padding-bottom: 80px; } .flex--plyers { padding-top: 15px; } .flex--filters--caption .info1 .votos {font-size: 14px;} .flex--filters--caption .info1 .ano {font-size: 14px; color: #ffffff;} .flex--filters--caption .info1 .duracao {font-size: 14px; color: #ffffff;} } @media only screen and (max-width : 700px) { .flex--app--page { width: 88%; } .flex--filters {height: 600px; } .flex--filters--caption .title-play { font-size: 25px; } .flex--playl{ padding-bottom: 40px;} .flex--playr .l { background: linear-gradient(to right,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%); } .flex--playl { padding-bottom: 30px; } .flex--playl.serie {bottom: -40px;} .flex--recoom3 { padding-top: 90px; } .flex--filters--caption .sinopse i { font-size: 18px; } } .flex--plyers { padding-top: 30px; padding-bottom: 10px; } .flex--plyers .btn-like { display: none; padding: 9px; float: left; width: 43px; height: 43px; border: #848484 2px solid; background: #000; border-radius: 50%; margin-right: 10px; } .flex--plyers .btn-like svg, .flex--plyers .btn-unlike svg {width: 21px; height: 21px; } .flex--plyers .btn-like svg path, .flex--plyers .btn-unlike svg path { fill: #fff; } .flex--plyers .btn-unlike{display: none; padding: 9px; float: left; width: 43px; height: 43px; border: #848484 2px solid; background: #000; border-radius: 50%;} .flex--plyers .btn-unlike svg {transform: rotate(180deg);} .flex--plyers .btn-like:hover, .flex--plyers .btn-unlike:hover { border-color: #fff; cursor: pointer; } .flex--plyers .btn-like:hover svg path, .flex--plyers .btn-unlike:hover svg path{ fill: #fff; } .flex--relative3 {position: relative; z-index: 3; } .flex--recoom { margin-top: -150px; padding-bottom: 80px; } .flex--recoom2 { margin-top: -150px; position: relative; z-index: 5; } .flex--recoom3 { margin-top: -150px; position: relative; z-index: 5; } .flex--recoom2 .slick-track{ margin-left: auto !important; margin-right: auto !important; } .flex--recoom2 .slick-dots{ display: none !important; } .flex--recomended { color: #fff; font-size: 28px; text-align: center; font-weight: 700; margin-bottom: 40px; position: relative; z-index: 3; } .flex--recomended i { width: 35px; height: 4px; background: #c1171b; position: absolute;left: 50%; margin-left: -17.5px; bottom: -10px; border-radius: 5px; } .flex--nTemsp { float: left; margin-bottom: 55px; position: relative; z-index: 10;} .flex--selecter {float: left;position: relative;height: auto;background: #202e54;box-shadow: 4px 4px 10px 0 rgba(0,0,0,0.3);} .flex--selecter .mTop { float: left; font-weight: 700; color: #fff; padding: 18px 30px; } .flex--selecter .mTop span { min-width: 130px; display: inline-block; font-size: 20px; font-weight: 700; color: #fff; } .flex--selecter .mTop i { position: relative; float: right; border: 2px solid #555; border-radius: 50%; width: 30px; height: 30px;margin-left: 15px; margin-top: -3px; } .flex--selecter .mTop i svg{ transform: 0.3s; transform: rotate(-90deg); width: 26px; height: 26px; } .flex--selecter .nTop {display: none;position: absolute;top: 63px;width: 100%;background: #0f182e;box-shadow: 0 8px 10px 1px rgba(0,0,0,0.8);} .flex--selecter .nTop .hr {background: #334d8e;display: block;height: 3px;margin-left: 30px;margin-right: 30px;} .flex--selecter .nTop a { padding: 18px 30px; font-size: 20px; font-weight: 700; color: #797c80; display: block;} .flex--selecter .nTop a:hover { color: #fff; background: rgba(0,0,0,0.25); } .flex--eps { float: left;color: #888;font-size: 16px; padding-top: 20px; padding-left: 21px; } .flex--nTemsp.clicked .mTop, .flex--nTemsp .mTop:hover{background: #0b256f;} .flex--nTemsp.clicked .mTop i svg{ transform: rotate(90deg); width: 26px; height: 26px; } @media only screen and (max-width : 630px) { .flex--selecter .mTop span { font-size: 16px; padding-top: 3px; padding-left: 5px; } .flex--selecter .mTop { padding: 12px 13px; } .flex--selecter .mTop i {width: 28px; height: 28px; } .flex--eps {padding-top: 13px;} .flex--selecter .mTop i {margin-left: 8px; } .flex--selecter .nTop {top: 49px; } .flex--selecter .nTop a {font-size: 16px; } } .top-1 {background-image: url("../img/top1.png");width: 80px;height: 56px;position: absolute;z-index: 2;bottom: 20px;left: 20px;} .top-2 {background-image: url("../img/top2.png");width: 80px;height: 56px;position: absolute;z-index: 2;bottom: 20px;left: 20px;} .top-3 {background-image: url("../img/top3.png");width: 80px;height: 56px;position: absolute;z-index: 2;bottom: 20px;left: 20px;} .top-4 {background-image: url("../img/top4.png");width: 80px;height: 56px;position: absolute;z-index: 2;bottom: 20px;left: 20px;} .top-5 {background-image: url("../img/top5.png");width: 80px;height: 56px;position: absolute;z-index: 2;bottom: 20px;left: 20px;} .top-6 {background-image: url("../img/top6.png");width: 80px;height: 56px;position: absolute;z-index: 2;bottom: 20px;left: 20px;} .top-7 {background-image: url("../img/top7.png");width: 80px;height: 56px;position: absolute;z-index: 2;bottom: 20px;left: 20px;} .top-8 {background-image: url("../img/top8.png");width: 80px;height: 56px;position: absolute;z-index: 2;bottom: 20px;left: 20px;} .top-9 {background-image: url("../img/top9.png");width: 80px;height: 56px;position: absolute;z-index: 2;bottom: 20px;left: 20px;} .top-10 {background-image: url("../img/top10.png");width: 80px;height: 56px;position: absolute;z-index: 2;bottom: 20px;left: 20px;} /* .epg-days {height: 40px;position: relative;display: none;margin-top: -20px;margin-bottom: 20px;} .epg-days a {padding: 0px 0px;float: left;margin-top: 0;} .epg-days a em {padding: 5px 16px;display: block;font-size: 17px;white-space: nowrap;font-weight: 900;color: #6b6b6b;border-radius: 20px;border: 2px solid transparent;} .epg-days a.ovactive em { color: #fff; } .epg-days a:hover em {color: #bdbdbd;border-color: #bdbdbd;} .epg-days a.ovactive:hover em {color: #fff;text-shadow: none;background: #000;border-color: #fff;} .epg-days .anim {margin-left: 0;margin-right: 18px;background: #302135;width: 138px;height: 26px;margin-top: 6px;float: left;border-radius: 5px;animation: fadeLoad 2.5s infinite alternate;} .tvRight {color: #fff;width: 100%; transition: 0.2s; position: relative; left: 0; } .epg-programa .epg-hover .epg-caption .epg-time { font-size: 11.5px; padding-top: 3px; white-space: nowrap; overflow: hidden; width: 100%; text-overflow: ellipsis; color: #888; } .epg-programa .epg-hover .epg-caption .epg-name { padding-top: 3px; font-size: 14px; white-space: nowrap; overflow: hidden; width: 100%; text-overflow: ellipsis; color: #888; } .epg-programa.epg-active .epg-hover .epg-caption .epg-time {color: #fff; } .epg-programa.epg-active .epg-hover .epg-caption .epg-name {color: #fff; } .epg-programa.epg-active .epg-hover .epg-caption .epg-bar { display: block; } .epg-programa.epg-auto:hover {width: auto !important; z-index: 3;} .epg-programa.epg-auto:hover .epg-hover { padding-right: 30px;} .epg-programa:hover .epg-hover {background: #5d5d5d;} .epg-programa:hover .epg-hover .epg-caption .epg-time {color: #fff;} .epg-programa:hover .epg-hover .epg-caption .epg-name {color: #fff;} .epg-progress {position: absolute; background: rgba(0,0,0,0.33); z-index: 1; top: 0; left: 0; height: 100%; border-right: 1px solid #000;} .epg-progress .epg-arrow {position: absolute; top: -6px; right: -10px; opacity: 1; display: block; width: 18px; height: 8px; } .epg-progress span {position: absolute; right: -18px; background: #e21015; font-size: 10px; padding: 2px 5px; padding-top: 3px; top: -22px; width: 35px; height: 17px; overflow: hidden; text-align: center; } .epg-relative { position: relative; z-index: 2; } .epg-notinfo { font-size: 14px; color: #8a8a8a; position: absolute; top: 50%; height: 18px; margin-top: -9px; left: 20px; transition: 0.2s; } .epg-grid { width: 100%; overflow: hidden; margin: 0 auto; } .epg-grid .epg-body { position: relative; } /*.epg-date { height: 44px; padding: 10px 5px; text-align: center; color: #fff; border-bottom: 4px solid #000; background: #4c4c4c; box-shadow: 10px 0 15px 0 rgba(0,0,0,0.4); font-size: 16px; } .epg-date {height: 44px;padding: 10px 5px;text-align: center;color: var(--bg1);border-bottom: 4px solid #000;background: var(--bg1);font-size: 16px;} .epg-grid .epg-top { width: 7920px; height: 44px; position: absolute; top: 0; left: 270px; border-bottom: 4px solid #000; } .epg-grid .epg-top li { width: 165px; font-size: 16px; float: left; padding: 10px 10px; text-align: left; color: #fff; } .epg-left { z-index: 3; background: #261b2d; position: absolute; top: 0; left: 0; width: 270px; } .epg-scroller { z-index: 1; position: relative; width: 100%; overflow: auto; padding-top: 44px; } .epg-gridd { width: 8070px; padding-left: 270px; } .epg-padds {width: 8100px; padding-right: 30px; } .epg-displays {position: relative; width: 100%;overflow-y: auto;padding-bottom: 0;} .epg-loopimages {position: relative; width: calc(100% + 25px); overflow:hidden;padding-bottom: 0;} .epg-img{overflow: hidden;display: block;width: 270px;height: 74px;background: #2e1d38;position: relative;border-bottom: 4px solid #000;box-shadow: 10px 0 15px 0 rgba(0,0,0,0.4);} .epg-img span { display: none; } .epg-img:hover{ background: #000; } .epg-img img { display: block; width: 70%; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: 1; } .epg-line{overflow: hidden;position: relative;height: 74px;background: #2e1d38;border-bottom: 4px solid #000;} .epg-programa { color: #888; float: left; width: auto; border-right: 4px solid #000; height: 74px; overflow: hidden; position: absolute; } .epg-programa .epg-hover { position: relative; padding: 5px 10px; padding-bottom: 9px; height: 70px; } .epg-programa .epg-hover .epg-caption {position: relative; height: 100%; width: 100%; z-index: 2;} .epg-programa .epg-hover .epg-caption .epg-bar { display: none; position: absolute; bottom: 0px; left: 0; height: 3px; border-radius: 3px; width: 100%; max-width: 210px; background: #565656; } .epg-programa .epg-hover .epg-caption .epg-bar span {position: absolute;bottom: 0;height: 100%;width: 45%;background: var(--color2);left: 0;height: 3px;border-radius: 3px;} .animaterr { float: left; width: 100%; } .animaterr .epg-img {background: #1d1322;} .animaterr .epg-img img { width: 60px; } .smm .epg-line {background: #2e1d38;} .animaterr .epg-programa {width: calc(100% / 25);position: relative;height: 74px;float: left;border-color: transparent;background: #1d1322;} .animaterr .epg-programa img { height: 50px; display: block; margin: 9px auto; animation: fadeLoad 2.5s infinite alternate; } .epg-programa .epg-hover .epg-caption .epg-time { font-size: 11.5px; padding-top: 3px; white-space: nowrap; overflow: hidden; width: 100%; text-overflow: ellipsis; color: #888; } .epg-programa .epg-hover .epg-caption .epg-name { padding-top: 3px; font-size: 14px; white-space: nowrap; overflow: hidden; width: 100%; text-overflow: ellipsis; color: #888; } .epg-programa .epg-hover .epg-caption .epg-time span {} .epg-programa .epg-hover .epg-caption .epg-time i {margin-left: 8px;border-radius: 2px;color: #333;text-transform: uppercase;background: #888;padding: 2px 5px;font-size: 8px;font-weight: 900;white-space: nowrap;text-overflow: inherit;} .epg-programa.epg-active .epg-hover .epg-caption .epg-time {color: #fff; } .epg-programa.epg-active .epg-hover .epg-caption .epg-name {color: #fff; } .epg-programa.epg-active .epg-hover .epg-caption .epg-bar { display: block; } .epg-programa.epg-auto:hover {width: auto !important; z-index: 3;} .epg-programa.epg-auto:hover .epg-hover { padding-right: 30px;} .epg-programa:hover .epg-hover {background: #4d2c60;} .epg-programa:hover .epg-hover .epg-caption .epg-time {color: #fff;} .epg-programa:hover .epg-hover .epg-caption .epg-name {color: #fff;} .epg-programa:hover .epg-hover .epg-caption .epg-time i { color: #5d5d5d; background: #fff; } .epg-programa.epg-active .epg-hover .epg-caption .epg-time i {color: #fff !important;background: var(--color2) !important;} .epg-progress {position: absolute;background: rgba(0,0,0,0.33);z-index: 1;top: 0;left: 0;height: 100%;border-right: 1px solid #ca630a;} .epg-progress .epg-arrow {position: absolute; top: -6px; right: -10px; opacity: 1; display: block; width: 18px; height: 8px; } .epg-progress span {position: absolute; right: -18px; background: var(--color2); font-size: 10px; padding: 2px 5px; padding-top: 3px; top: -22px; width: 35px; height: 17px; overflow: hidden; text-align: center; } .epg-relative { position: relative; z-index: 2; } .epg-img.autoFocus {background: #60506a;} .epg-img.autoFocus:hover { background: #170d1c;} */ #PsConta {max-width: 1600px !important; margin-left: auto; margin-right: auto; } .msg-expired { display: block; margin-top: 20px; padding: 20px; background: #c94e50; color: #fff; font-size: 18px; font-weight: 600; text-align: center; border-radius: 5px;} .sm-box { margin-left: -10px; margin-right: -10px; margin-top: 20px;} .sm-box a {float: left; width: calc(25% - 20px); padding: 15px 25px; background: var(--bg2); margin: 0 10px; border-radius: 5px; } .sm-box a .t {color: #fff; font-size: 20px; } .sm-box a p {padding-top: 0px; font-size: 50px; font-weight: 600; } .renovaaa { display: block; width: 100%; text-align: center; background: var(--color1); padding: 5px 10px; cursor: pointer; margin-top: 23px; margin-bottom: -30px; border-radius: 0 0 4px 4px; } .renovaaa p {display: inline-block; color: #fff; font-weight: 600; font-size: 21px; padding-top: 8px; } .renovaaa p svg {height: 40px; display: block; float: left; width: auto; margin-top: -8px; margin-right: 9px; } .renovaaa p svg * { fill: #fff; } .tituloss .linkss { padding: 0 15px;} .tituloss .linkss .field { display: block; width: 100%; margin-top: 45px; position: relative;} .tituloss .linkss .field p { z-index: 3; color: #777; display: block; font-weight: 900; font-size: 16px; text-transform: uppercase; position: absolute; top: -13px; left: 37px; background: rgb(31 40 60); padding: 5px 15px; border-left: var(--bg2) 5px solid; border-right: var(--bg2) 5px solid;} .tituloss .linkss .field input { display: block; padding: 18px 34px; padding-right: 60px; color: #fff; background: #1f283c; width: 100%; border-radius: 56px; border: var(--bg2) 5px solid;} .tituloss .linkss .field .spCopy { position: absolute; height: 100%; width: auto; right: 6px; top: 0; padding: 19px;} .tituloss .linkss .field .spCopy svg { display: block; width: auto; height: 100%; } .tituloss .linkss .field .spCopy svg * { fill:#fff;} .tituloss .linkss .field .spCopy:hover svg * { fill:var(--color1);} .listerDevices {} .listerDevices .imt {padding: 20px 30px; margin-bottom: 20px; background: #1f283c; border-radius: 4px; padding-right: 10px;} .listerDevices .imt i {width: 50px; height: 50px; float: left; } .listerDevices .imt svg {display: block; width: 100%; height: auto; } .listerDevices .imt svg * {fill:#fff; } .listerDevices .cpas {float: left;width: calc(100% - 105px);padding-left: 10px;} .listerDevices .cpas b {color: #fff;font-weight: 600;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 24px;} .listerDevices .cpas p {color: #fff;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 17px;padding-top: 2px;} .listerDevices .cpas p em {font-style: oblique;} .listerDevices .disconect { float: right; width: 55px; height: 55px; padding: 11px; } .listerDevices .disconect svg {display: block; width: 100%; height: auto; } .listerDevices .noEst .cpas b {color: #80899d; } .listerDevices .noEst .cpas p {color: #80899d; } .listerDevices .imt.noEst svg * {fill:#80899d; } .listerDevices .disconect:hover svg * {fill:#fff !important; } .top-contaa a:hover {background: #c94e50;} .nFORMS .field { display: block; width: 100%; margin-top: 45px; position: relative;} .nFORMS .field p { z-index: 3; color: #777; display: block; font-weight: 900; font-size: 16px; text-transform: uppercase; position: absolute; top: -13px; left: 37px; background: rgb(31 40 60); padding: 5px 15px; border-left: var(--bg2) 5px solid; border-right: var(--bg2) 5px solid;} .nFORMS .field input { display: block; padding: 18px 34px; color: #fff; background: #1f283c; width: 100%; border-radius: 56px; border: var(--bg2) 5px solid;} .nFORMS .field input::-webkit-outer-spin-button, .nFORMS .field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .nFORMS .field input[type=number] { -moz-appearance: textfield; } .nFORMS .field select { appearance: none;display: block; padding: 18px 20px; color: #fff; background: #1f283c; width: 100%; border-radius: 56px; border: var(--bg2) 5px solid;} .dess-disp {color: #80899d; text-align: center;font-size: 14px; } .ss-devs { display: block; background: #20273a; text-align: center; padding: 15px 34px; font-size: 17px; color: #80899d; margin: 0 auto; border-radius: 4px;} .ss-devs.nope {background: #c94e50; color: #fff; } #smmDevs { margin: 0 auto; display: block; max-width: 500px; margin-top: 30px; width: 100%; padding: 18px 34px; color: #fff; border-radius: 56px; background: var(--bg2);} #smmDevs:disabled{background: #1f283c; color: #777; } @media only screen and (max-width : 890px) { .sm-box a p {font-size: 45px; } } @media only screen and (max-width : 750px) { .sm-box {margin-top: 0;} .sm-box a { width: calc(50% - 20px); margin-top: 20px; } .msg-expired {font-size: 14px;} .tituloss .linkss {padding: 0; } .tituloss .top11 {padding: 0;} .listerDevices .imt {margin-bottom: 15px; padding: 15px 20px; } .listerDevices .cpas b {font-size: 17px;} .listerDevices .cpas p {font-size: 15px;} .listerDevices .imt i { width: 40px; height: 40px; } .listerDevices .disconect { float: right; width: 45px; height: 45px; padding: 10px; } } @media only screen and (max-width : 650px) { .msg-expired {font-size: 14px;} .sm-box a {padding: 12px 20px; } .sm-box a .t { font-size: 16px; } .sm-box a p {font-size: 35px; } .content-account { margin-top: -10px; } .tituloss .top11 .bxx span {font-size: 23px; } .tituloss .top11 .bxx {font-size: 13px; } } .data-profiles {position: fixed; top: 0;left: 0; width: 100%; height: 100%; z-index: 1010; background: var(--bg2); display: none; } .middle-perfils {width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%) scale(1.2); opacity: 0; transition: 0.5s; } .middle-perfils.scla { transform: translateY(-50%) scale(1); opacity: 1; } .middle-perfils .toTitle {width: 100%;text-align: center;color: #fff;font-size: 32px;margin-bottom: 30px;} .middle-perfils .toTitle2 { display: none; width: 100%; text-align: center; color: #ccc; font-size: 32px; margin-bottom: 20px; } .middle-perfils .profle {display: block; text-align: center; } .middle-perfils .profle .sair {display: none; width: 520px; margin: 0 auto;} .middle-perfils .profle .sair p {padding-top: 10px;padding-bottom: 20px;color: #ccc;font-size: 15px;} .middle-perfils .profle .lsd { display: inline-block; padding-bottom: 30px; height: auto; } .middle-perfils .profle .lsd a {float: left;margin: 0 15px;width: 130px;position: relative;} .middle-perfils .profle .lsd a .img {overflow: hidden;height: 130px;position: relative;width: 130px;border-radius: 50%; background-color: var(--bg1);} .middle-perfils .profle .lsd a .img img { display: block; width: 100%; } .middle-perfils .profle .lsd a .img .border {transition: 0.2s;position: absolute;z-index: 2;height: 100%;width: 100%;border: 5px solid transparent;border-radius: 50%;overflow: hidden;} .middle-perfils .profle .lsd a .name {color: #8e96ab;text-align: center;width: 100%;font-size: 18px;padding-top: 15px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;} .middle-perfils .profle .lsd a:hover .img .border { border-color:#fff; box-shadow: inset 0 0 25px 0 rgb(0 0 0 / 50%);} .middle-perfils .profle .lsd a:hover .name{ color:#fff; } .middle-perfils .profle .lsd a .Edt {display: none; } .middle-perfils .profle .lsd a.eddit .Edt {display: block;padding: 30px;position: absolute;top: 0;left: 0;z-index: 1;width: 100%;height: 100%;background: #152750ad;} .middle-perfils .profle .lsd a.eddit .Edt i {display: block; width: 100%; height: 100%; padding: 15px;} .middle-perfils .profle .lsd a.eddit .Edt svg {display: block; height: auto; } .middle-perfils .profle .lsd a.eddit .Edt svg * {fill: #fff; } .middle-perfils .lA { width: 130px; margin: 15px; float: left; display: block; } .middle-perfils .lA .img2 {background: #101932;padding: 35px;width: 130px;height: 130px;display: block;overflow: hidden;position: relative;border-radius: 50%;} .middle-perfils .lA .img2 svg {width: 100%;height: auto;display: block;} .middle-perfils .lA .img2 svg * { fill: #fff; } .middle-perfils .lA em {color: #8e96ab; text-align: center; width: 100%; font-size: 18px; padding-top: 15px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block;} .middle-perfils .lA:hover .img2 { background: #000; } .middle-perfils .lA:hover em { color: #fff; } .butLogout { position: absolute; left: 0; width: 100%; text-align: center; bottom: 20px; } .butLogout a { color: #8e96ab;display: block;width: 155px;padding: 9px 17px;margin: 0 auto;border-radius: 22px;font-weight: 600;} .butLogout a svg { float: left; width: 18px; height: 18px; } .butLogout a svg path {fill: #8e96ab;} .butLogout a:hover { color: #fff; border-color: #fff; text-decoration: underline; } .butLogout a:hover svg path { fill: #fff; } @media only screen and (max-width : 780px) { .middle-perfils .profle .lsd a {width: 100px;} .middle-perfils .profle .lsd a .img {width: 100px; height: 100px;} .middle-perfils .profle .lsd a .name {font-size: 15px;} .middle-perfils .lA { width: 100px; } .middle-perfils .lA .img2 {padding: 29px;width: 100px;height: 100px; } .middle-perfils .lA em {font-size: 15px;} .middle-perfils .profle .lsd a.eddit .Edt i {padding: 5px;} } @media only screen and (max-width : 540px) { .middle-perfils .toTitle {font-size: 25px;} .middle-perfils .profle .lsd a {width: 90px; margin-bottom: 18px;} .middle-perfils .profle .lsd a .img {width: 90px; height: 90px;} .middle-perfils .profle .lsd a .name {font-size: 15px;} .middle-perfils .profle .lsd {display: block; padding-bottom: 0px; height: auto; margin: 0 auto; width: 240px; } .middle-perfils .lA { width: 90px; } .middle-perfils .lA .img2 {padding: 25px;width: 90px;height: 90px; } .middle-perfils .lA em {font-size: 15px;} .middle-perfils .profle .lsd a.eddit .Edt i { padding: 2px;} } .top-conta { border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; width: 130px; height: 130px; margin: 0 auto; margin-top: 20px; background-image: url( "../img/bh-in.png"); background-size: 100% 100%; padding: 15px; padding-left: 12px; position: relative } .top-conta.trial { background-image: url( "../img/bh-in2.png"); } .top-conta i { background-image: url("../img/avatar.webp"); background-size: 100% 100%; position: absolute; height: 60px; width: 60px; z-index: 10; left: -17px; bottom: -7px; display: none } .top-conta img { border: 4px solid #1a1a1a; display: block; width: 100px; height: 100px; margin: 0 auto; border-radius: 50% } .top-contaa { display: block; text-align: center } .top-contaa .nname { display: block; font-size: 28px; text-align: center; padding-top: 15px; color: #fff; padding-bottom: 0 } .top-contaa .nemail22 { display: block; margin-top: 7px; color: #a0a0a0; font-size: 12px; font-weight: 900; }.top-contaa .nemail { display: block; padding-bottom: 10px; color: #a0a0a0; font-size: 14px; padding-top: 4px; } .top-contaa .nedit { text-align: center; display: block; font-size: 12px; padding-bottom: 20px; color: #fff; text-transform: uppercase; cursor: pointer; } .top-contaa .nedit span { display: inline-block; text-decoration: underline } .top-contaa .nedit span svg { float: left; width: 14px; height: 14px; margin-right: 5px } .top-contaa .nedit span svg path { fill: #fff } .top-contaa a { display: inline-block; font-size: 12px; font-weight: 900; background: rgba(255,255,255,.1); text-transform: uppercase; border-radius: 5px; color: #fff; font-style: oblique; padding: 12px 20px; padding-top: 13px } .llet { text-align: center; font-size: 22px; text-transform: uppercase; letter-spacing: 3px; padding: 20px 0; color: #fff; padding-top: 40px; } .tituloss { color: #fff; padding-top: 0; } .tituloss .top11 { margin-bottom: 0; margin-left: -5px; margin-right: -5px; } .tituloss .top11 .divv { margin-bottom: 10px; padding: 0 5px; float: left; width: 33.33% } .tituloss .top11 .sbxx.ativo {} .tituloss .top11 .sbxx.expired { background: #c1171b;} .tituloss .top11 .bxx { background: rgba(255,255,255,.1); text-align: center; color: #fff; font-weight: 900; font-size: 16px; text-transform: uppercase; padding: 20px 0; border-radius: 4px; display: block } .tituloss .top11 .bxx.active,.titulos .top1 .bx.active { background: #c1171b } .tituloss .top11 .bxx span { display: block; width: 100%; font-size: 29px; font-weight: 900; padding-bottom: 7px } .content-account {padding-top: 0; padding-bottom: 60px; margin: 0 auto;} .content-account .leftConta {float: left; width: 300px; background: #1f283c; border-radius: 4px; padding-bottom: 30px; } .content-account .rigtConta {float: left; width: calc(100% - 300px); padding-left: 40px; } @media only screen and (max-width : 750px) { .content-account { margin: 0 auto;} .content-account .leftConta {float: none; width: 100%; padding-top: 10px; } .content-account .rigtConta {float: none; width: 100%; padding-left: 0px; } .llet {font-size: 13px; padding: 20px 0;} } .slick-dots { position: absolute; top: -40px; right: 10%; opacity: 0; transition: 0.4s; z-index: 1; } .flex--boxed:hover .slick-dots { opacity: 1; } .slick-dots li { float: left; width: 38px; height: 24px;padding-left: 4px; padding-right: 4px;} .slick-dots li button { cursor: pointer; display: block; height: 4px; width: 100%; font-size: 0em; background: #333333; } .slick-dots li.slick-active button { background: #6b6b6b; } .overmen { overflow: hidden; } .slick-slider{position:relative;display:block;box-sizing:border-box; -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:none}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block;}.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir='rtl'] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none} .animated{animation-duration:1s;animation-fill-mode:both}.animated.infinite{animation-iteration-count:infinite}.animated.hinge{animation-duration:2s}.animated.flipOutX,.animated.flipOutY,.animated.bounceIn,.animated.bounceOut{animation-duration:.75s}@keyframes bounce{from,20%,53%,80%,to{animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);transform:translate3d(0,0,0)}40%,43%{animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);transform:translate3d(0,-30px,0)}70%{animation-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);transform:translate3d(0,-15px,0)}90%{transform:translate3d(0,-4px,0)}}.bounce{animation-name:bounce;transform-origin:center bottom}@keyframes flash{from,50%,to{opacity:1}25%,75%{opacity:0}}.flash{animation-name:flash}@keyframes pulse{from{transform:scale3d(1,1,1)}50%{transform:scale3d(1.05,1.05,1.05)}to{transform:scale3d(1,1,1)}}.pulse{animation-name:pulse}@keyframes rubberBand{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,0.75,1)}40%{transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,0.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scale3d(1,1,1)}}.rubberBand{animation-name:rubberBand}@keyframes shake{from,to{transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}20%,40%,60%,80%{transform:translate3d(10px,0,0)}}.shake{animation-name:shake}@keyframes headShake{0%{transform:translateX(0)}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:translateX(0)}}.headShake{animation-timing-function:ease-in-out;animation-name:headShake}@keyframes swing{20%{transform:rotate3d(0,0,1,15deg)}40%{transform:rotate3d(0,0,1,-10deg)}60%{transform:rotate3d(0,0,1,5deg)}80%{transform:rotate3d(0,0,1,-5deg)}to{transform:rotate3d(0,0,1,0deg)}}.swing{transform-origin:top center;animation-name:swing}@keyframes tada{from{transform:scale3d(1,1,1)}10%,20%{transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}to{transform:scale3d(1,1,1)}}.tada{animation-name:tada}@keyframes wobble{from{transform:none}15%{transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}to{transform:none}}.wobble{animation-name:wobble}@keyframes jello{from,11.1%,to{transform:none}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-0.78125deg) skewY(-0.78125deg)}77.7%{transform:skewX(0.390625deg) skewY(0.390625deg)}88.8%{transform:skewX(-0.1953125deg) skewY(-0.1953125deg)}}.jello{animation-name:jello;transform-origin:center}@keyframes bounceIn{from,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}to{opacity:1;transform:scale3d(1,1,1)}}.bounceIn{animation-name:bounceIn}@keyframes bounceInDown{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:none}}.bounceInDown{animation-name:bounceInDown}@keyframes bounceInLeft{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:none}}.bounceInLeft{animation-name:bounceInLeft}@keyframes bounceInRight{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}from{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:none}}.bounceInRight{animation-name:bounceInRight}@keyframes bounceInUp{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}from{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translate3d(0,0,0)}}.bounceInUp{animation-name:bounceInUp}@keyframes bounceOut{20%{transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(.3,.3,.3)}}.bounceOut{animation-name:bounceOut}@keyframes bounceOutDown{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}to{opacity:0;transform:translate3d(0,2000px,0)}}.bounceOutDown{animation-name:bounceOutDown}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}.bounceOutLeft{animation-name:bounceOutLeft}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}.bounceOutRight{animation-name:bounceOutRight}@keyframes bounceOutUp{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}.bounceOutUp{animation-name:bounceOutUp}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.fadeIn{animation-name:fadeIn}@keyframes fadeInDown{from{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}.fadeInDown{animation-name:fadeInDown}@keyframes fadeInDownBig{from{opacity:0;transform:translate3d(0,-2000px,0)}to{opacity:1;transform:none}}.fadeInDownBig{animation-name:fadeInDownBig}@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}.fadeInLeft{animation-name:fadeInLeft}@keyframes fadeInLeftBig{from{opacity:0;transform:translate3d(-2000px,0,0)}to{opacity:1;transform:none}}.fadeInLeftBig{animation-name:fadeInLeftBig}@keyframes fadeInRight{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}.fadeInRight{animation-name:fadeInRight}@keyframes fadeInRightBig{from{opacity:0;transform:translate3d(2000px,0,0)}to{opacity:1;transform:none}}.fadeInRightBig{animation-name:fadeInRightBig}@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}.fadeInUp{animation-name:fadeInUp}@keyframes fadeInUpBig{from{opacity:0;transform:translate3d(0,2000px,0)}to{opacity:1;transform:none}}.fadeInUpBig{animation-name:fadeInUpBig}@keyframes fadeOut{from{opacity:1}to{opacity:0}}.fadeOut{animation-name:fadeOut}@keyframes fadeOutDown{from{opacity:1}to{opacity:0;transform:translate3d(0,100%,0)}}.fadeOutDown{animation-name:fadeOutDown}@keyframes fadeOutDownBig{from{opacity:1}to{opacity:0;transform:translate3d(0,2000px,0)}}.fadeOutDownBig{animation-name:fadeOutDownBig}@keyframes fadeOutLeft{from{opacity:1}to{opacity:0;transform:translate3d(-100%,0,0)}}.fadeOutLeft{animation-name:fadeOutLeft}@keyframes fadeOutLeftBig{from{opacity:1}to{opacity:0;transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{animation-name:fadeOutLeftBig}@keyframes fadeOutRight{from{opacity:1}to{opacity:0;transform:translate3d(100%,0,0)}}.fadeOutRight{animation-name:fadeOutRight}@keyframes fadeOutRightBig{from{opacity:1}to{opacity:0;transform:translate3d(2000px,0,0)}}.fadeOutRightBig{animation-name:fadeOutRightBig}@keyframes fadeOutUp{from{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}.fadeOutUp{animation-name:fadeOutUp}@keyframes fadeOutUpBig{from{opacity:1}to{opacity:0;transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{animation-name:fadeOutUpBig}@keyframes flip{from{transform:perspective(400px) rotate3d(0,1,0,-360deg);animation-timing-function:ease-out}40%{transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);animation-timing-function:ease-out}50%{transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);animation-timing-function:ease-in}80%{transform:perspective(400px) scale3d(.95,.95,.95);animation-timing-function:ease-in}to{transform:perspective(400px);animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;animation-name:flip}@keyframes flipInX{from{transform:perspective(400px) rotate3d(1,0,0,90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotate3d(1,0,0,-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{transform:perspective(400px) rotate3d(1,0,0,-5deg)}to{transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;animation-name:flipInX}@keyframes flipInY{from{transform:perspective(400px) rotate3d(0,1,0,90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotate3d(0,1,0,-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{transform:perspective(400px) rotate3d(0,1,0,-5deg)}to{transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;animation-name:flipInY}@keyframes flipOutX{from{transform:perspective(400px)}30%{transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}to{transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}.flipOutX{animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@keyframes flipOutY{from{transform:perspective(400px)}30%{transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}to{transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;animation-name:flipOutY}@keyframes lightSpeedIn{from{transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{transform:skewX(20deg);opacity:1}80%{transform:skewX(-5deg);opacity:1}to{transform:none;opacity:1}}.lightSpeedIn{animation-name:lightSpeedIn;animation-timing-function:ease-out}@keyframes lightSpeedOut{from{opacity:1}to{transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{animation-name:lightSpeedOut;animation-timing-function:ease-in}@keyframes rotateIn{from{transform-origin:center;transform:rotate3d(0,0,1,-200deg);opacity:0}to{transform-origin:center;transform:none;opacity:1}}.rotateIn{animation-name:rotateIn}@keyframes rotateInDownLeft{from{transform-origin:left bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}.rotateInDownLeft{animation-name:rotateInDownLeft}@keyframes rotateInDownRight{from{transform-origin:right bottom;transform:rotate3d(0,0,1,45deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}.rotateInDownRight{animation-name:rotateInDownRight}@keyframes rotateInUpLeft{from{transform-origin:left bottom;transform:rotate3d(0,0,1,45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}.rotateInUpLeft{animation-name:rotateInUpLeft}@keyframes rotateInUpRight{from{transform-origin:right bottom;transform:rotate3d(0,0,1,-90deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}.rotateInUpRight{animation-name:rotateInUpRight}@keyframes rotateOut{from{transform-origin:center;opacity:1}to{transform-origin:center;transform:rotate3d(0,0,1,200deg);opacity:0}}.rotateOut{animation-name:rotateOut}@keyframes rotateOutDownLeft{from{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate3d(0,0,1,45deg);opacity:0}}.rotateOutDownLeft{animation-name:rotateOutDownLeft}@keyframes rotateOutDownRight{from{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutDownRight{animation-name:rotateOutDownRight}@keyframes rotateOutUpLeft{from{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutUpLeft{animation-name:rotateOutUpLeft}@keyframes rotateOutUpRight{from{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate3d(0,0,1,90deg);opacity:0}}.rotateOutUpRight{animation-name:rotateOutUpRight}@keyframes hinge{0%{transform-origin:top left;animation-timing-function:ease-in-out}20%,60%{transform:rotate3d(0,0,1,80deg);transform-origin:top left;animation-timing-function:ease-in-out}40%,80%{transform:rotate3d(0,0,1,60deg);transform-origin:top left;animation-timing-function:ease-in-out;opacity:1}to{transform:translate3d(0,700px,0);opacity:0}}.hinge{animation-name:hinge}@keyframes jackInTheBox{from{opacity:0;transform:scale(0.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}.jackInTheBox{animation-name:jackInTheBox}@keyframes rollIn{from{opacity:0;transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}to{opacity:1;transform:none}}.rollIn{animation-name:rollIn}@keyframes rollOut{from{opacity:1}to{opacity:0;transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}.rollOut{animation-name:rollOut}@keyframes zoomIn{from{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{animation-name:zoomIn}@keyframes zoomInDown{from{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}.zoomInDown{animation-name:zoomInDown}@keyframes zoomInLeft{from{opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}.zoomInLeft{animation-name:zoomInLeft}@keyframes zoomInRight{from{opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}.zoomInRight{animation-name:zoomInRight}@keyframes zoomInUp{from{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}.zoomInUp{animation-name:zoomInUp}@keyframes zoomOut{from{opacity:1}50%{opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}.zoomOut{animation-name:zoomOut}@keyframes zoomOutDown{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}.zoomOutDown{animation-name:zoomOutDown}@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(-2000px,0,0);transform-origin:left center}}.zoomOutLeft{animation-name:zoomOutLeft}@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(2000px,0,0);transform-origin:right center}}.zoomOutRight{animation-name:zoomOutRight}@keyframes zoomOutUp{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)}}.zoomOutUp{animation-name:zoomOutUp}@keyframes slideInDown{from{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translate3d(0,0,0)}}.slideInDown{animation-name:slideInDown}@keyframes slideInLeft{from{transform:translate3d(-100%,0,0);visibility:visible}to{transform:translate3d(0,0,0)}}.slideInLeft{animation-name:slideInLeft}@keyframes slideInRight{from{transform:translate3d(100%,0,0);visibility:visible}to{transform:translate3d(0,0,0)}}.slideInRight{animation-name:slideInRight}@keyframes slideInUp{from{transform:translate3d(0,100%,0);visibility:visible}to{transform:translate3d(0,0,0)}}.slideInUp{animation-name:slideInUp}@keyframes slideOutDown{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(0,100%,0)}}.slideOutDown{animation-name:slideOutDown}@keyframes slideOutLeft{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(-100%,0,0)}}.slideOutLeft{animation-name:slideOutLeft}@keyframes slideOutRight{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(100%,0,0)}}.slideOutRight{animation-name:slideOutRight}@keyframes slideOutUp{from{transform:translate3d(0,0,0)}to{visibility:hidden;transform:translate3d(0,-100%,0)}}.slideOutUp{animation-name:slideOutUp}