/* Theme Name: Porno Legendado Theme URI: http://www.carlosnicow.com Author: Carlos Nicow Author URI: http://www.carlosnicow.com Description: Tema Personalizado desenvolvido por Carlos Nicow para WordPress Version: 3.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */ /* CORE */ @import "assets/css/core/root.css"; @import "assets/css/core/reset.css"; @import "assets/css/core/base.css"; /* LAYOUT */ @import "assets/css/layout/container.css"; @import "assets/css/layout/header.css?a=10"; @import "assets/css/layout/main.css"; /* COMPONENTS */ @import "assets/css/components/heading.css"; @import "assets/css/components/button.css?a=15"; @import "assets/css/components/drawer.css?a=15"; @import "assets/css/components/navigation.css?a=10"; @import "assets/css/components/benefits.css?a=10"; @import "assets/css/components/grid.css?a=10"; /* @import "assets/css/components/card.css"; */ /* @import "assets/css/components/infor.css"; */ /* @import "assets/css/components/search.css"; */ /* @import "assets/css/components/list.css"; */ /* @import "assets/css/components/trends.css"; */ /* @import "assets/css/components/letter.css"; */ /* NORMALIZE */ *, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } img { max-width: 100%; height: auto; display: block;} input, select, textarea { background: #fff; color: #444;border: 1px solid #e1e1e1; } iframe, embed, video { max-width: 100%; margin: 0 auto; display: block; } button, a, input, label, select, textarea { outline:none; } svg { fill: currentcolor; } /* CONTAINER */ /* HEADER */ /* MOBILE */ #cn-mobile { display: none; position: sticky; z-index: 5; bottom: 0; left: 0; right: 0; } #cn-mobile ul { background:#fff; border-top: 1px solid #e1e3e9; display: flex ; justify-content: space-evenly; margin:0; padding:0; list-style:none; } #cn-mobile ul li { } #cn-mobile ul li .a { display: flex ; flex-direction: column; align-items: center; padding:8px 0; } #cn-mobile ul li svg { height: 25px; color: #b32618; } #cn-mobile ul li .a b { color: #000; font-weight: 400; } #cn-mobile .search { display:none; padding: 15px 10px; background:rgb(248 248 250 / .9); } #cn-mobile .search form { display: flex; border-radius: 5px; background: #fff; border: 1px solid #e1e3e9; } #cn-mobile .search form button { color: #fff; background: #b32618; background: linear-gradient(180deg, rgba(179, 38, 24, 1) 0%, rgba(129, 18, 11, 1) 100%); display: flex; align-items: center; justify-content: center; border-radius: 5px 0 0 5px; padding: 13px; border: 0; cursor: pointer; } #cn-mobile .search form button svg { height:15px; } #cn-mobile .search form button:hover { background:#262626; } #cn-mobile .search form input { width: 100%; padding: 15px 10px; font-size: 12px; text-transform: uppercase; border: 0; border-radius: 5px; } /* MAIN */ /* MAIN */ #cn-main .infor { position: relative; padding: 15px 20px; border: 1px solid transparent; border-radius: 10px; margin: 0 0 10px; } #cn-main .infor a { text-decoration: underline; font-weight: 700; } #cn-main .infor#danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; } #cn-main .infor#danger a{ color: #491217 } #cn-main .infor#warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba; } #cn-main .infor#warning a { color: #533f03; } /* SEARCH */ #cn-main .search { } #cn-main .search form { display: flex; border-radius: 5px; margin: 15px 0; background: #fff; border: 1px solid #e1e3e9; } #cn-main .search form button { color: #fff; background: #b32618; background: linear-gradient(180deg, rgba(179, 38, 24, 1) 0%, rgba(129, 18, 11, 1) 100%); display: flex; align-items: center; justify-content: center; margin: 0; width: 51px; border-radius: 7px 0 0 7px; padding: 17px; border: 0; cursor: pointer; } #cn-main .search form button:hover { background:#262626; } #cn-main .search form input { width: 100%; padding: 15px 10px; font-size: 12px; text-transform: uppercase; border: 0; border-radius: 5px; } /* HEADING */ #cn-main .heading { padding: 0; margin: 0 0 10px; position: relative; display: flex; justify-content: space-between; align-items: center; align-content: center; flex-wrap: wrap; } #cn-main .heading .open { background: #b32618; color: #fff; width: 25px; display: flex; position: relative; cursor: pointer; padding: 5px; margin-top: 5px; align-items: center; justify-content: center; border-radius: 5px; } #cn-main .heading .open:hover { background: #262626; } #cn-main .heading .title { display: inline-block; } #cn-main .heading .title h1, #cn-main .heading .title h2, #cn-main .heading .title h4 { color: #303030; display: inline-block; margin: 0; font-weight: 700; text-transform: uppercase; } #cn-main .heading .title p { font-size: 20px; font-weight: 400; text-transform: uppercase; margin: 0; } #cn-main .heading .title svg { height: 15px; color: #0054a6; margin-right: 5px; } #cn-main .heading .descrition { } #cn-main .heading .descrition p { margin:0; } #cn-main .heading .descrition a { color:#b32618; font-weight: 500; } #cn-main .heading .descrition a:hover { text-decoration: underline; } #cn-main .heading .more { display: block; width: 100%; text-align: center; position: relative; } #cn-main .heading .more:before { content: ''; width: 100%; height: 1px; background: #e1e3e9; display: block; position: absolute; top: 50%; z-index: 1; } #cn-main .heading .more b { font-weight: lighter; font-size: 90%; display: inline; background: #f8f8fa; padding: 0 10px; position: relative; z-index: 1; cursor: pointer; } #cn-main .heading#open { } #cn-main .heading#open .descrition { margin:0 0 10px; position: relative; } #cn-main .heading#open .descrition p { display:none; margin: 8px 0 0 0; } #cn-main .heading#open .descrition p:nth-child(1) { display:block; } #cn-main .heading#open .active p { display:block; } #cn-main .heading#related { } #cn-main .heading#related h3 { font-size:180%; margin:0; } #cn-main .heading#related ul { display: flex ; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } #cn-main .heading#related ul li { background: #fff; border: 1px solid #e1e3e9; text-transform: capitalize; font-size: 14px; line-height: 100%; color: #000; display: flex ; justify-content: center; align-items: center; margin: 0 5px 0 0; border-radius: 5px; } #cn-main .heading#related ul li span { padding: 10px; } #cn-main .heading#related ul li span:hover { text-decoration: underline; text-decoration-color: #b32618; } #cn-main .heading#related ul li.active { background: #b32618; background: linear-gradient(180deg, rgba(179, 38, 24, 1) 0%, rgba(129, 18, 11, 1) 100%); color: #fff; } /* LIST:THUMB */ #cn-main .list { width: 100%; overflow: hidden; padding: 0; margin: 0; } #cn-main .list h2, #cn-main .list h3 { margin: 0 0 10px; text-transform: uppercase; } #cn-main .list h3 { display: flex ; align-items: center; justify-content: space-between; } #cn-main .list h3 a { font-size: 12px; line-height: 100%; background: #b32618; color: #fff; text-transform: uppercase; padding: 10px; margin: 0 5px 5px 0; border-radius: 5px; } #cn-main .list h3 a:hover { background: #262626; } #cn-main .list ul { padding:0; margin:0 -5px; list-style-type: none; font-size: 0; } #cn-main .list li { width: 25%; position: relative; display: inline-block; vertical-align: top; padding: 0 5px; margin-bottom: 16px; font-size: 14px; } #cn-main .list li .thumbnail { display: block; width: 100%; position: relative; height: 0; padding: 56.75% 0 0; overflow: hidden; border-radius:4px 4px 0 0; } #cn-main .list li .thumbnail:after { content: 'Carregando...'; color: #d4d4d4; font-size: 15px; font-weight: 500; width: 90px; height: 20px; display: block; position: absolute; z-index: 0; top: 50%; left: 50%; transform: translate(-50%,-50%); } #cn-main .list li .thumbnail a:before { content: "▷"; opacity: .5; font-size: 40px; padding: 0 0 0px 7px; position: absolute; top: 50%; left: 50%; width: 63px; height: 63px; border: 3px solid #fff; color: #fff; text-shadow: 0 0 10px rgb(0 0 0 / 30%); text-align: center; border-radius: 100px; z-index: 5; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; -webkit-transform: translate(-50%, -50%) scale(0); -moz-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); -o-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); -webkit-transition: all 100ms linear; -moz-transition: all 100ms linear; -ms-transition: all 100ms linear; transition: all 100ms linear; } #cn-main .list li .thumbnail a:after { content: ""; background-color: rgba(0,0,0,.5); border: 0 none; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; -webkit-transition: all .4s; -moz-transition: all .4s; -ms-transition: all .4s; -o-transition: all .4s; transition: all .4s; z-index: 3; } #cn-main .list li .thumbnail a .img { background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; top: 0; left: 0; position: absolute; z-index: 1; border-radius: 5px 5px 0 0; border:1px solid #e1e3e9; border-bottom:0; } #cn-main .list li .thumbnail a .logo { background-position: center center; background-repeat: no-repeat; background-size: 70%; width: 100%; height: 100%; top: 0; left: 0; position: absolute; z-index: 1; } #cn-main .list li .thumbnail a .badge { display: grid ; justify-items: start; grid-gap: 5px; position: absolute; left: 5px; top: 5px; z-index: 4; } #cn-main .list li .thumbnail a .badge b { color:#fff; font-size: 12px; text-shadow: 1px 1px rgba(0, 0, 0, 0.1); border-radius: 4px; padding: 3px 4px; } #cn-main .list li .thumbnail a .badge .warning { background: rgba(251,202,39); } #cn-main .list li .thumbnail a .badge .new { background: #b32618; background: linear-gradient(180deg,rgba(179,38,24,1) 0%,rgba(129,18,11,1) 100%); } #cn-main .list li .content { background: #fff; border:1px solid #e1e3e9; border-top:0; border-radius:0 0 4px 4px; padding: 5px 10px; } #cn-main .list li .content .title { overflow: hidden; margin:0 0 5px; display: block; font-size: 15px; font-weight: 500; height: 40px; width: 100%; } #cn-main .list li .content .title a { color:#000; } #cn-main .list li .content .model { display: -webkit-box; overflow: hidden; white-space: normal; -webkit-line-clamp: 1; -webkit-box-orient: vertical; -o-text-overflow: ellipsis; text-overflow: ellipsis; } #cn-main .list li .content .model a { display:none; color:#252525; } #cn-main .list li .content .model a:nth-child(1), #cn-main .list li .content .model a:nth-child(2) { display:inline-block; } #cn-main .list li .content .model a:nth-child(2) { } #cn-main .list li .content .model a:nth-child(2):before { content:', '; } #cn-main .list li .content .model a:hover { text-decoration: underline; } #cn-main .list li .content .row { margin: 0 0 5px; display:flex; justify-content: space-between; align-items: center; } #cn-main .list li .content .row span { display: flex ; width:100%; color: #303030; font-size: 12px; align-content: center; align-items: center; } #cn-main .list li .content .row span b { display: flex ; align-content: center; align-items: center; margin: 0 10px 0 0; font-weight: normal; } #cn-main .list li .content .row span b svg { width: 15px; height: 15px; margin: 0 0 0 3px; } #cn-main .list li .content .channel { margin:0 0 5px; } #cn-main .list li .content .channel a { display:none; color: #000; background: #e1e3e9; padding: 3px 6px; border-radius: 4px; } #cn-main .list li .content .channel a:nth-child(1) { display:inline-block; } #cn-main .list li .content .channel a:hover { text-decoration: underline; } #cn-main .list li .thumbnail:hover a:before { -webkit-transform: translate(-50%, -50%) scale(1); -moz-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); -o-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } #cn-main .list li .thumbnail:hover a:after { opacity: .5; } #cn-main .list li .thumbnail:hover a .preview { display:block; } #cn-main .list li .content .title:hover a, #cn-main .list li .content .row .channel a:hover { text-decoration: underline; text-decoration-color: #b32618; } #cn-main .list .tags input { width:100%; background: #fff; border: 1px solid #e1e3e9; color: #000; padding:15px 10px; font-size: 12px; margin-bottom:10px; text-transform: uppercase; } #cn-main .list .tags ul .clear { width: 100%; font-size: 15px; line-height: 29px; font-weight: 700; margin: 5px 0 10px; text-transform: uppercase; border-bottom:1px solid #e1e3e9; } #cn-main .list .tags ul .title { height: auto; border-radius: 4px; } #cn-main .list .tags ul .title a { color:#000; display: flex;justify-content: center;align-items: center; font-size: 13px; line-height: 26px; text-transform: uppercase; } #cn-main .list .tags ul .title a strong { margin-left:3px; color: #b32618; font-size: 11px; } #cn-main .list .tags ul .title a:hover { text-decoration: underline; text-decoration-color: #b32618; } #cn-main .related { } /* LIST:NAVIGATION */ #cn-main .navigation { margin-bottom: 10px; text-align: center; } #cn-main .navigation .page-numbers { background: #b32618; background: linear-gradient(180deg, rgba(179, 38, 24, 1) 0%, rgba(129, 18, 11, 1) 100%); align-content: center; justify-content: center; align-items: center; color: #fff; height: 40px; font-weight: 600; position: relative; border-radius: 5px; text-transform: uppercase; margin: 0 3px 3px 0; font-size: 14px; display: inline-block; padding: 0 10px; } #cn-main .navigation .page-numbers:hover { background:#000; } #cn-main .navigation .current, #cn-main .navigation .next, #cn-main .navigation .prev { background:#262626; } /* LIST:LETTER */ #cn-main .letter { display: flex; margin: 0 0 10px; } #cn-main .letter .page-numbers { background: #262626; color: #fff; display: block; position: relative; padding: 0 10px; margin-right: 8px; font-size: 15px; line-height: 29px; font-weight: 700; border-radius: 4px; text-decoration: none; text-transform: uppercase; transition: background-color .15s ease; } #cn-main .letter .page-numbers:hover, #cn-main .letter .current { background: #b32618; background: linear-gradient(180deg,rgba(179,38,24,1) 0%,rgba(129,18,11,1) 100%); } #cn-main .letter select { background: #fff; border: 1px solid #e1e3e9; color: #000; cursor: pointer; position: relative; text-align: center; width: 100%; padding: 15px 10px; font-size: 12px; line-height: 100%; display: flex; justify-content: center; align-items: center; align-content: center; text-transform: uppercase; margin: 0 5px 10px 0; border-radius: 3px; } #cn-main .trends { width: 100%; overflow: hidden; padding:0; margin:0; } #cn-main .trends h3 { display: flex; text-transform: uppercase; align-content: center; align-items: center; margin:0 0 10px; } #cn-main .trends h3 svg { color:#b32618; } #cn-main .trends small { margin: 0 0 10px; display: none; align-items: center; justify-content: center; } #cn-main .trends ul { display: flex; flex-wrap: wrap; margin: 0 0 10px 0; padding: 0; list-style: none; } #cn-main .trends ul:after { content:''; display:block; clear:both; } #cn-main .trends ul a, #cn-main .trends ul button { font-size:12px; line-height:100%; background: #fff; border: 1px solid #e1e3e9; color:#000; display: flex; justify-content: center; align-items: center; align-content: center; text-transform: capitalize; padding: 10px; margin:0 5px 5px 0; border-radius: 5px; transition: transform .5s; } #cn-main .trends ul a:hover { text-decoration: underline; text-decoration-color: #b32618; } #cn-main .trends ul button { cursor: pointer; } #cn-main .trends ul button:hover { text-decoration: underline; text-decoration-color: #b32618; } #cn-main .trends ul button svg { color: #b32618; margin: 0 5px 0 0; } #cn-main .trends ul a svg { color: #b32618; margin:0 5px 0 0; } #cn-main .trends ul button.active { background: #b32618; border-color: #b32618; color: #fff; } #cn-main .trends ul button.active svg { color: #fff; } #cn-main .trends ul a.red { background: #b32618; background: linear-gradient(180deg, rgba(179, 38, 24, 1) 0%, rgba(129, 18, 11, 1) 100%); color: #fff; } #cn-main .trends ul a.red svg { color: #fff } /* FOOTER */ #cn-footer { } #cn-footer .logo { margin: 0 0 15px;} #cn-footer .logo img { margin:0 auto; } #cn-footer .social { margin: 0 0 15px; text-align: center;} #cn-footer .descrition { padding:10px; margin: 0 0 10px; } #cn-footer .navigation { margin: 0 0 10px; } #cn-footer .navigation nav ul { list-style: none; margin: 0; padding:0; text-align:center; } #cn-footer .navigation nav ul:after { content:''; display:block; clear:both; } #cn-footer .navigation nav li { list-style: none; margin:0; display: inline-block; } #cn-footer .navigation nav a {display: block; position: relative; padding: 0 15px; font-size: 15px; line-height: 53px; font-weight: 700; color: #000; text-decoration: none; text-transform: uppercase; transition: background-color .15s ease; } #cn-footer .navigation nav a:hover { text-decoration: underline; text-decoration-color: #b32618; } #cn-footer .copyright { padding:0 10px; display:flex; align-items: center; font-weight: 600; border-radius: 4px; } #cn-footer .cn { margin-left:auto; font-size:12px; opacity:0.8; font-weight: normal; } #cn-footer .cn a { text-decoration: underline; color:#e1e3e9; } /* VIDEO */ #cn-video .row { background: 0 0; display: flex ; position: relative; width: 100%; } #cn-video .row:after { content:''; display:block; clear:both; } /* VIDEO: LEFT */ #cn-video .row .left { width: 100%; } /* VIDEO: LEFT : VIDEO */ #cn-video .row .left .video { width: 100%; overflow: hidden; margin: 0 0 10px; position:relative; height: inherit; max-height: inherit; } #cn-video .row .left .video .player { overflow: hidden; position: relative; height: 0; padding-bottom: 56.737588652482%; } #cn-video .row .left .video .player iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100%; background: #000; border: 0; } #cn-video .row .left .video .poster { height: 100%; left: 0; position: absolute; top: 0; width: 100%; border: 0; vertical-align: middle; background-size: contain; background-position: center center; background-repeat: no-repeat; cursor: pointer; } #cn-video .row .left .video .poster .btn { background-color: rgba(0,0,0,.5); border-radius: 20%; font-size: 2.5em; height: 1.4em; display: block; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 2em; position: absolute; z-index: 1; } #cn-video .row .left .video .poster .btn:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 15px; border-color: transparent transparent transparent #ffffff; } #cn-video .row .left .video .poster .btn:hover { background: rgb(179,38,24); background: linear-gradient(to bottom, rgba(179,38,24,1) 0%,rgba(129,18,11,1) 100%); } /* VIDEO: LEFT : ALERT */ #cn-video .row .left .alert { display: none; position: fixed; z-index: 10003; inset: 0px; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } #cn-video .row .left .alert .close { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,.5); z-index: 1; } #cn-video .row .left .alert .text { background:rgb(38 38 38 / .9); max-width:400px; width: 100%; position: relative; padding: 0.75rem 1.25rem; border: 1px solid transparent; border-radius: 0.25rem; margin: 0 10px; text-align:center; z-index: 2; } #cn-video .row .left .alert .text img { margin: 0 auto 5px auto; width:250px; } #cn-video .row .left .alert .text a { color: #fff; text-decoration: none; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } #cn-video .row .left .alert .text a small { font-size: 18px; font-weight: 500; line-height:18px; } #cn-video .row .left .alert .text a big { font-size: 29px; font-weight: 800; margin:0 0 5px; } #cn-video .row .left .alert .text a span { display: flex; align-content: center; justify-content: center; align-items: center; background: #b32618; background: linear-gradient(180deg,rgba(179,38,24,1) 0%,rgba(129,18,11,1) 100%); color: #fff; font-size: 24px; font-weight: 600; line-height: 49px; position: relative; border-radius: 5px; margin: 0 3px; padding: 0 10px; text-shadow: 1px 1px 2px rgb(0 0 0/40%); } /* VIDEO: LEFT : LINK */ #cn-video .row .left .link input#downloadvids { width: 100%; background: #b32618; background: linear-gradient(180deg, rgba(179, 38, 24, 1) 0%, rgba(129, 18, 11, 1) 100%); color: #fff; cursor: pointer; font-size: 18px; font-weight: 500; line-height: 100%; display: flex ; justify-content: center; align-items: center; align-content: center; text-transform: uppercase; padding: 15px 0; margin: 0 0 15px; border-radius: 5px; } #cn-video .row .left .link input#downloadvids:hover { background: #262626; } #cn-video .row .left .link a { color: #fff; cursor: pointer; font-size: 16px; font-weight: 500; line-height: 100%; display: flex ; justify-content: center; align-items: center; align-content: center; text-transform: uppercase; padding: 10px 0; margin: 0 0 15px; border-radius: 5px; } #cn-video .row .left .link a.telegram { background: #1c92d2; background: linear-gradient( to right, #1c92d2,#2c3e50 ); } #cn-video .row .left .link a.telegram:hover { background: #262626; } #cn-video .row .left .link a.requested { background: #b32618; background: linear-gradient(180deg, rgba(179, 38, 24, 1) 0%, rgba(129, 18, 11, 1) 100%) } #cn-video .row .left .link a.requested:hover { background: #262626; } /* VIDEO: LEFT : CONTENT */ #cn-video .row .left .content { background: 0 0; border: 0; padding: 0; margin: 0; border-radius: 0; } #cn-video .row .left .content .control { display: flex ; align-items: center; margin: 0 0 10px; } #cn-video .row .left .content .control .overflow { width: 100%; display: block; position: relative; overflow: auto; } #cn-video .row .left .content .control ul { display: flex ; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } #cn-video .row .left .content .control ul svg { height: 12px; margin-right: 3px; color: #b32618; } #cn-video .row .left .content .control ul li { background: #fff; border: 1px solid #e1e3e9; text-transform: capitalize; font-size: 14px; line-height: 100%; color: #000; display: flex ; justify-content: center; align-items: center; align-content: center; margin: 0 5px 0 0; border-radius: 5px; transition: transform .5s; } #cn-video .row .left .content .control ul li.active { background: #b32618; background: linear-gradient(180deg, rgba(179, 38, 24, 1) 0%, rgba(129, 18, 11, 1) 100%); color: #fff; } #cn-video .row .left .content .control ul li.active svg { color: #fff; } #cn-video .row .left .content .control ul li span, #cn-video .row .left .content .control ul li a { display: flex ; align-items: center; padding: 10px; } #cn-video .row .left .content .control ul li .post-ratings { margin: 0 5px; display: flex ; align-items: center; } #cn-video .row .left .content .control ul li .post-ratings img { margin: 0 5px; } #cn-video .row .left .content .control ul li span:hover, #cn-video .row .left .content .control ul li a:hover{ text-decoration: underline; text-decoration-color: #b32618; } /* VIDEO: LEFT : DESCRIPTION */ #cn-video .row .left .download { display:none; font-size: 16px; border-top: 1px solid #e1e3e9; border-bottom: 1px solid #e1e3e9; margin: 15px 0; padding: 5px 0 0; } #cn-video .row .left .download h4 { margin: 0 0 5px; font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0.5px; } #cn-video .row .left .download p { margin: 0 0 10px; } #cn-video .row .left .download input#downloadvids, #cn-video .row .left .download input[type=submit] { width: 100%; background: #b32618; background: linear-gradient(180deg, rgba(179, 38, 24, 1) 0%, rgba(129, 18, 11, 1) 100%); color: #fff; cursor: pointer; padding: 10px 0; margin: 0 0 15px; border-radius: 5px; cursor: pointer; } #cn-video .row .left .download .flex { display: flex ; } #cn-video .row .left .download .flex form { flex: auto; } /* VIDEO: LEFT : DESCRIPTION */ #cn-video .row .left .description { display:none; font-size: 16px; border-top: 1px solid #e1e3e9; margin: 20px 0 0; padding: 15px 0 0; } #cn-video .row .left .description h2 { margin: 0 0 10px; } #cn-video .row .left .description p { margin: 0 0 10px; } #cn-video .row .left .description a { color:#b32618; font-weight: bold; } #cn-video .row .left .description a:hover { text-decoration: underline; text-decoration-color: #fff; } #cn-video .row .left .description img { margin:0; width:auto; max-height: 230px; } /* VIDEO: LEFT : SHARED */ #cn-video .row .left .shared { display:none; } /* VIDEO: LEFT : BREADCRUMBS */ #cn-video .row .left .breadcrumbs { margin:0 0 15px; } #cn-video .row .left .breadcrumbs a { color:#b32618; } #cn-video .row .left .breadcrumbs a:hover { text-decoration: underline; text-decoration-color: #fff; } #cn-video .row .left .breadcrumbs strong { font-weight: lighter;t } /* REQUESTS */ #cn-requests .content { background: #fff; border:1px solid #e1e3e9; border-top:0; padding: 10px; margin: 0 0 15px; border-radius:0 0 5px 5px; } #cn-requests .dados { display: flex ; justify-content: space-between; flex-wrap: wrap; } #cn-requests .dados span { width: 33%; display: block; cursor: pointer; font-size: 16px; font-weight: 500; line-height: 100%; text-transform: uppercase; padding: 10px 0; margin: 0 0 15px; border-radius: 5px; border: 1px solid; text-align: center; } #cn-requests .dados span:nth-child(1) { color: #155724; background-color: #d4edda; border-color: #c3e6cb; } #cn-requests .dados span:nth-child(2) { color: #842029; background-color: #f8d7da; border-color: #f5c2c7; } #cn-requests .dados span:nth-child(3) { color: #856404; background-color: #fff3cd; border-color: #ffeeba; } #cn-requests .content input[type=email], #cn-requests .content input[type=text], #cn-requests .content input[type=url], #cn-requests .content textarea { width: 100%; padding: 15px 10px; font-size: 12px; border-radius: 5px; margin: 0 0 10px; } #cn-requests .content input[type=submit] { display: flex ; align-content: center; justify-content: center; align-items: center; background: #b32618; background: linear-gradient(180deg, rgba(179, 38, 24, 1) 0%, rgba(129, 18, 11, 1) 100%); color: #fff; font-size: 12px; font-weight: 600; line-height: 35px; position: relative; border-radius: 5px; margin: 0 3px; padding: 0 8px; text-shadow: 1px 1px 2px rgb(0 0 0 / 40%); border: 0; cursor: pointer; } #cn-requests .content input[type=submit]::houver { background: #262626; } /* PAGE */ #cn-page .content { width: 100%; background: #fff; border: 1px solid #e1e3e9; padding: 25px; margin: 0 auto 30px; border-radius: 5px; } #cn-page .content a { color: #b32618; text-decoration: underline; } #cn-pagetemplate { } #cn-pagetemplate .content { width: 100%; } #cn-pagetemplate .content img { height: 250px; width: 100%; object-fit: cover; object-position: 0 -70px; } /*DASHBOARD */ #cn-dashboard .join { position: relative; margin: 0 auto; color:#fff; padding: 0 0 50px; } #cn-dashboard .join h1 { font-size: 62px; line-height: 1.5; margin:0; padding: 25px 0 90px; white-space: pre-wrap; text-transform: uppercase; text-align: center; } #cn-dashboard .join .plans { display: flex; justify-content: space-evenly;} #cn-dashboard .join .plans .plan { width: 25%; padding: 0 20px; border-radius: 15px; background-color: rgba(0, 0, 0, 0.40); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } #cn-dashboard .join .plans .plan:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; padding: 2px; border-radius: 15px; background: linear-gradient(360deg, #b32618, #f2298200); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } #cn-dashboard .join .plans .plan#transform{ transform:scale(1.2) } #cn-dashboard .join .plans .plan h3 { text-transform: uppercase; text-align: center; font-size: 37px; line-height: 90%; font-weight: 800; width: 200px; margin: 30px auto; } #cn-dashboard .join .plans .plan ul { list-style: none; margin: 0 0 20px; padding:0; } #cn-dashboard .join .plans .plan ul ul:after { content:''; display:block; clear:both; } #cn-dashboard .join .plans .plan ul li { list-style: none; font-size: 15px; font-weight: 400; margin: 0; padding: 15px 0; border-bottom: 1px solid; border-image:linear-gradient(90deg, #656565 0%, #ffffff00) 1; } #cn-dashboard .join .plans .plan ul li svg { animation: spin 2s infinite; color:#b32618; margin-right:3px; vertical-align: top; } #cn-dashboard .join .plans .plan .item { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 0 20px; } #cn-dashboard .join .plans .plan .item input { display: none; } #cn-dashboard .join .plans .plan .item .price { font-size: 38px; font-weight: 800; line-height: 100%; } #cn-dashboard .join .plans .plan .item .badge { font-size: 12px; line-height: 100%; background: #ebebeb; color: #000; display: flex; justify-content: center; align-items: center; align-content: center; padding: 3px 10px; margin: 10px; border-radius: 5px; } #cn-dashboard .join .plans .plan .item .btn { cursor: pointer; width: 100%; font-size: 14px; line-height: 100%; font-weight: 700; background: #b32618; color: #fff; display: flex; justify-content: center; align-items: center; align-content: center; text-transform: uppercase; padding: 20px; margin: 10px 0; border-radius: 5px; } #cn-dashboard .join .plans .plan .item .btn#effects{ animation: pisca 2s infinite; box-shadow: 0px 0px 21px -6px #b32618; border-radius: 4px; } #cn-dashboard .join .plans .plan .item .btn:hover { transform: scale(1.1); } #cn-dashboard .login { padding: 50px 0; } #cn-dashboard .login .row { display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; align-content: center; align-items: flex-start; margin: 0 auto; } #cn-dashboard .login .loading { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 90; background: rgba(0, 0, 0, .5); display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 10px; color: #000; font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif; font-size: 13px; font-weight: normal; -webkit-filter: opacity(90%); -moz-filter: opacity(90%); -ms-filter: opacity(90%); -o-filter: opacity(90%); filter: opacity(90%); display: none; } #cn-dashboard .login .loading h3 { margin: 0; } #cn-dashboard .login .loading div { width: 48px; height: 48px; border: 5px solid #000; border-bottom-color: transparent; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 800ms linear infinite; } #cn-dashboard .login .loading.show { display: flex; } #cn-dashboard .login .alert { background: #ffc600; box-shadow: 1px 4px 8px rgb(0 0 0 / 20%); line-height: 140%; text-align: center; padding: 0; color: #000; font-size: 16px; margin: 0 0 10px; display: block; } #cn-dashboard .login .alert.show { padding: 8px 22px; } #cn-dashboard .login .alert.show#success { background: #43cd01; } #cn-dashboard .login .title { display: flex; align-items: center; justify-content: center; font-size: 32px; text-align: center; font-weight: 700; line-height: 100%; margin: 0 0 30px; } #cn-dashboard .login .title svg { color:#b32618; width:24px; height:24px; margin-right:5px; } #cn-dashboard .login .left { width: 50%; padding:0 40px } #cn-dashboard .login .left form svg { position: absolute; top: 20px; left: 20px; } #cn-dashboard .login .left form input[type=email], #cn-dashboard .login .left form input[type=password] { border-radius:5px; width: 100%; height: 70px; padding: 0 45px 0 60px; background: #fff; border: 1px solid #e1e3e9; font-size: 16px; outline: none; } #cn-dashboard .login .left form button { cursor: pointer; border:0; border-radius:5px; display: inline-block; width: 100%; padding: 0 20px; height: 60px; text-align: center; font-size: 26px; font-weight: 700; color: #fff; line-height: 59px; text-transform: uppercase; position: relative; vertical-align: top; text-shadow: 1px 1px 2px rgb(0 0 0 / 40%); margin: 6px 3px; background: rgb(179,38,24); background: linear-gradient(to bottom, rgba(179,38,24,1) 0%,rgba(129,18,11,1) 100%); -moz-box-shadow: inset 0px -2px 2px 0px rgba(0,0,0,0.3), inset 0px 0px 10px 1px rgba(0,0,0,0.1), inset 0px 2px 2px 0px rgba(255,62,39,0.9); box-shadow: inset 0px -2px 2px 0px rgb(0 0 0 / 30%), inset 0px 0px 10px 1px rgb(0 0 0 / 10%), inset 0px 2px 2px 0px rgb(255 62 39 / 90%); } #cn-dashboard .login .left form button:hover { background: rgb(179,38,24); background: linear-gradient(to bottom, rgba(129,18,11,1) 100%,rgba(129,18,11,1) 100%); box-shadow: inset 0px -2px 2px 0px rgb(0 0 0 / 30%), inset 0px 0px 10px 1px rgb(0 0 0 / 10%), inset 0px 2px 2px 0px rgb(255 62 39 / 90%); } #cn-dashboard .login .left .email, #cn-dashboard .login .left .pass { max-width: 100%; position: relative; margin: 0 0 15px; } #cn-dashboard .login .left .legend { position: relative; background: #b32618; background: linear-gradient(180deg,rgba(179,38,24,1) 0%,rgba(129,18,11,1) 100%); color: #fff; border-radius:0 0 5px 5px; font-size: 13px; padding: 4px 14px; display: flex; justify-content: flex-start; align-items: center; align-content: center; margin: -1px 20px 0;} #cn-dashboard .login .left .reset { font-size: 14px; text-align: right; display: block; margin: 12px 0; } #cn-dashboard .login .left .reset a { color: #000; } #cn-dashboard .login .left .reset a:hover { text-decoration: underline; } #cn-dashboard .login .left .home { display: flex; justify-content: center; align-items: center; align-content: center; color: #fff; margin: 20px auto; font-size: 13px; } #cn-dashboard .login .left .home a { color: #000; } #cn-dashboard .login .left .home a:hover { text-decoration: underline; } #cn-dashboard .login .left .home svg { color:#b32618; margin-right:5px; width:15px; height:15px; } #cn-dashboard .login .left .resetpass #skmb_message { background: #ffc600; box-shadow: 1px 4px 8px rgb(0 0 0 / 20%); line-height: 140%; text-align: center; padding: 8px 22px; color: #000; font-size: 16px; margin: 0 0 10px; display: block; } #cn-dashboard .login .left .resetpass label { display:none; } #cn-dashboard .login .left .resetpass input[type="text"] { margin:0 0 15px; } #cn-dashboard .login .left .resetpass input[type="submit"] { cursor: pointer; border: 0; border-radius:5px; display: inline-block; width: 100%; padding: 0 20px; height: 60px; text-align: center; font-size: 26px; font-weight: 700; color: #fff; line-height: 59px; text-transform: uppercase; position: relative; vertical-align: top; text-shadow: 1px 1px 2px rgb(0 0 0 / 40%); margin: 6px 3px; background: #b32618; background: linear-gradient(to bottom,rgba(179,38,24,1) 0%,rgba(129,18,11,1) 100%); -moz-box-shadow: inset 0px -2px 2px 0px rgba(0,0,0,.3),inset 0px 0px 10px 1px rgba(0,0,0,.1),inset 0px 2px 2px 0px rgba(255,62,39,.9); box-shadow: inset 0px -2px 2px 0px rgb(0 0 0 / 30%), inset 0px 0px 10px 1px rgb(0 0 0 / 10%), inset 0px 2px 2px 0px rgb(255 62 39 / 90%); } #cn-dashboard .login .left .resetpass input[type="submit"]:hover { background: rgb(179,38,24); background: linear-gradient(to bottom, rgba(129,18,11,1) 100%,rgba(129,18,11,1) 100%); box-shadow: inset 0px -2px 2px 0px rgb(0 0 0 / 30%), inset 0px 0px 10px 1px rgb(0 0 0 / 10%), inset 0px 2px 2px 0px rgb(255 62 39 / 90%); } #cn-dashboard .login .right { width: 50%; padding:0 40px } #cn-dashboard .login .right ul { list-style: none; margin: 55px 0; padding: 0; } #cn-dashboard .login .right ul li { font-size: 14px; margin-bottom: 5px; } #cn-dashboard .login .right ul li:before { content: ""; width: 5px; height: 5px; display: inline-block; background: #de2600; vertical-align: middle; margin-right: 10px; } #cn-dashboard .login .right a { border-radius:5px; display: inline-block; width: 100%; padding: 0 20px; height: 60px; text-align: center; font-size: 26px; font-weight: 700; color: #fff; line-height: 59px; text-transform: uppercase; position: relative; vertical-align: top; text-shadow: 1px 1px 2px rgb(0 0 0 / 40%); margin: 6px 3px; background: rgb(67,205,1); background: linear-gradient(to bottom, rgba(67,205,1,1) 0%,rgba(47,153,4,1) 100%); box-shadow: inset 0px -2px 2px 0px rgb(0 0 0 / 30%), inset 0px 0px 10px 1px rgb(0 0 0 / 10%), inset 0px 2px 2px 0px rgb(110 255 2 / 85%); } #cn-dashboard .login .right a:hover { background: rgb(47,153,4); background: -moz-linear-gradient(top, rgba(47,153,4,1) 100%, rgba(47,153,4,1) 100%); background: linear-gradient(to bottom, rgba(47,153,4,1) 100%,rgba(47,153,4,1) 100%); -moz-box-shadow: inset 0px -2px 2px 0px rgba(0,0,0,0.3), inset 0px 0px 10px 1px rgba(0,0,0,0.1), inset 0px 2px 2px 0px rgba(110,255,2,0.85); box-shadow: inset 0px -2px 2px 0px rgb(0 0 0 / 30%), inset 0px 0px 10px 1px rgb(0 0 0 / 10%), inset 0px 2px 2px 0px rgb(110 255 2 / 85%); } #cn-dashboard .account { display: flex; align-content: center; align-items: stretch; flex-wrap: wrap; flex-direction: row; justify-content: space-between; } #cn-dashboard .account .box { position: relative; background: #fff; border: 1px solid #e1e3e9; padding: 10px; width:49%; text-align: left; } #cn-dashboard .account .box input[type="text"], #cn-dashboard .account .box input[type="password"] { width: 100%; margin: 0 0 15px; border-color: #c3c4c7; min-height: 34px; line-height: 20px; padding: 6px 8px; -webkit-appearance: none; -webkit-box-sizing: border-box; box-sizing: border-box; } #cn-dashboard .account .box table { position: relative; width: 100%; } #cn-dashboard .account .box table tr { display: flex; flex-wrap: wrap; padding: 4px 0; line-height: 32px; justify-content: flex-end; } #cn-dashboard .account .box table td:nth-child(1) { position: relative; width: 100%; flex: 0 0 33.333333%; max-width: 33.333333%; } #cn-dashboard .account .box table td:nth-child(2) { position: relative; width: 100%; flex: 0 0 66.666667%; max-width: 66.666667%; } #cn-dashboard .account .box table label { font-weight: bold; color: #000; } #cn-dashboard .account .box table input:disabled { cursor: no-drop; background: rgba(195, 196, 199, .5); border-color: rgba(220,220,222,.75); box-shadow: inset 0 1px 2px rgb(0 0 0 / 4%); color: rgba(44,51,56,.8); } #cn-dashboard .account .box table input.Expirado { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; } #cn-dashboard .account .box table input.Ativo { color: #155724; background-color: #d4edda; border-color: #c3e6cb; } #cn-dashboard .account .box input[type=submit] { color: #155724; background-color: #d4edda; border: 1px solid #c3e6cb; padding: 0.5rem 0.5rem; font-size: .8rem; line-height: 1.4; display: inline-block; font-weight: 400; text-align: center; text-transform: uppercase; margin: -5px 0 10px; position: relative; width: 100%; flex: 0 0 66.666667%; max-width: 66.666667%; float: right; } #cn-dashboard .account .box input[type=submit]:hover { color: #fff; background-color: #218838; border-color: #1e7e34;} #cn-dashboard .account .favorites { position: relative; width:100%; } #cn-dashboard .account .favorites ul { padding:0 0 5px; margin: 0 -5px; list-style-type: none; } #cn-dashboard .account .favorites ul:after { content:''; display:block; clear:both; } #cn-dashboard .account .favorites li { width: 20%; float: left; margin:0 0 10px; padding: 0 5px; position: relative; list-style-type: none; } #cn-dashboard .account .favorites li .thumbnail { border-bottom:2px solid #f90; background:#fff; display: block; width: 100%; position: relative; height: 0; padding: 0 0 82.67%; overflow: hidden; } #cn-dashboard .account .favorites li .thumbnail:before { content:'Carregando...'; font-size: 15px; font-weight: 500; width: 90px; height: 20px; display: block; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%,-50%); } #cn-dashboard .account .favorites li .thumbnail .image { background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; top: 0; left: 0; position: absolute; z-index: 2; -webkit-transition: all .25s linear; -moz-transition: all .25s linear; -ms-transition: all .25s linear; transition: all .25s linear; } #cn-dashboard .account .favorites li .thumbnail .image:after { content: ''; width: 100%; height: 30%; position: absolute; bottom: 0; left: 0; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b3000000',GradientType=0 ); } #cn-dashboard .account .favorites li .thumbnail .badge { color: #fff; position: absolute; text-transform: uppercase; text-shadow: 1px 1px rgb(0 0 0 / 10%); z-index: 3; } #cn-dashboard .account .favorites li .thumbnail .badge#down { display:flex; align-items: center; bottom:0; left:0; padding: 0 4px 6px 0; font-size: 12px;} #cn-dashboard .account .favorites li .thumbnail .badge#down .duration { font-size:90%; margin-left:5px; } #cn-dashboard .account .favorites li .row { display: block; background: #fff; padding: 0 5px 5px; border:1px solid #c3c4c7; border-top:0; } #cn-dashboard .account .favorites li .row > span { margin-right: 10px; font-size: 13px; line-height: 20px; color: #606060; } #cn-dashboard .account .favorites li .row .title { margin-bottom:5px; color:#030303; font-weight: 500; font-size: 14px; line-height: 20px; height: 40px; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; } #cn-dashboard .account .favorites li:hover .thumbnail .image { transform: rotate( -2deg) scale(1.13); } #cn-dashboard .account .favorites li:hover .row .title { text-decoration: underline; text-decoration-color:#f90; } #cn-dashboard .account .favorites li:hover .thumbnail, #cn-dashboard .account .favorites li:hover .row { box-shadow: 0 0 15px rgb(0 0 0 / 30%); } #cn-dashboard .account .favorites .clear-favorite { padding: 0.15rem 0.4rem; font-size: .8rem; line-height: 1.4; background: red; color: #fff; display: inline-block; font-weight: 400; text-align: center; z-index: 2; position: relative; } #cn-dashboard .thanks { position: relative; } #cn-dashboard .thanks .content { position: relative; z-index: 2; } #cn-dashboard .thanks .content h1 { font-size: 5.5rem; line-height: 150%; text-align: center; margin:0 0 15px; } #cn-dashboard .thanks .content h2 { text-align: center; font-size: 3rem; margin:0 0 15px; } #cn-dashboard .thanks .content h3 { } #cn-dashboard .thanks .content .tip { display: block; width: 100%; line-height: 140%; font-size: 1.5rem; font-weight: 700; text-align: center; padding: 15px; background: #f3cc30; color: #000; margin: 0 0 15px; border-radius: 10px; } #cn-dashboard .thanks .content .tip .loader { outline: 1px solid transparent; font-size:0px; padding:0px; display:inline-block; } #cn-dashboard .thanks .content .tip .loader span { background:#000; border-radius:100%; vertical-align:middle; display:inline-block; width:10px; height:10px; margin:2px 2px; -webkit-animation:loader-dots 0.8s linear infinite alternate; animation:loader-dots 0.8s linear infinite alternate; } #cn-dashboard .thanks .content .tip .loader span:nth-child(1){ -webkit-animation-delay:-0.8; animation-delay:-0.8s; } #cn-dashboard .thanks .content .tip .loader span:nth-child(2) { -webkit-animation-delay:-0.53333s; animation-delay:-0.53333s; } #cn-dashboard .thanks .content .tip .loader span:nth-child(3) { -webkit-animation-delay:-0.26666s; animation-delay:-0.26666s; } #cn-dashboard .thanks .content .tex { font-size: 1.2rem; margin: 0 0 15px; } #cn-dashboard .thanks .content .links { width: 100%; position: relative; margin:0 0 15px; } #cn-dashboard .thanks .content .links a { background: #b32618; background: linear-gradient(180deg, rgba(179, 38, 24, 1) 0%, rgba(129, 18, 11, 1) 100%); color: #fff; border-bottom: 0; display: flex; justify-content: center; align-items: center; align-content: center; font-size: 1.8rem; text-transform: uppercase; padding: 20px 30px 25px; border-radius: 10px; transition: transform .5s; } #cn-dashboard .thanks .content .links a:hover { transform: scale(1.04); } #cn-join.s4 { position: relative; height: 100vh; background-image: url(https://espiadinhas.com/wp-content/uploads/2023/04/BG4K_B-min-scaled.jpg); background-size: cover; background-position: center -20vh; background-repeat: no-repeat; padding-top: 20vh; margin-top: 10vh; } #cn-join.s4:before, #cn-join.s4:after { content:''; position: absolute; width: 100%; height:30%; left: 0; z-index:1; } #cn-join.s4:before { top: -2px; background:linear-gradient(to bottom, rgba(255, 255, 255, 0), #000); transform: rotate(180deg) } #cn-join.s4:after { bottom: 0; background:linear-gradient(to bottom, rgba(255, 255, 255, 0), #000); } #cn-join.s4 .title { width: 100%; text-align: center; margin: 0 0 50px; } #cn-join.s4 .title big { font-family: 'Anton', sans-serif; font-size: 5.5rem; line-height: 90%; background: -webkit-linear-gradient(top,rgb(145 0 207),rgb(100 0 143)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(-1px 0px 0 #f5f5f5) drop-shadow(1px 0px 0 #f5f5f5) drop-shadow(0px 2px 0 #f5f5f5) drop-shadow(-1px 1px 0 #f5f5f5) drop-shadow(0px 0px 0 #f5f5f5) drop-shadow(0px -1px #f5f5f5) drop-shadow(0px 4px 3px rgb(0 0 0 / .9)); } #cn-join.s4 .plans { max-width: 940px; width: 100%; position: relative; display: flex; flex-direction: column; } #cn-join.s4 .plans .plan { position: relative; margin:0 0 20px; display: flex; align-items: center; width: 100%; background: #2d2d2d; border: 1px solid rgba(255,255,255,0.2); border-radius: 1.25rem; cursor: pointer; overflow: hidden; transition: transform .5s; } #cn-join.s4 .plans .plan:before { content: ""; width: 55%; height: 100%; position: absolute; top: 0; left: -50px; z-index: 0; background: rgba(0,0,0,0.18); -webkit-transform: skew(-20deg); transform: skew(-20deg); } #cn-join.s4 .plans .plan:hover { transform: scale(1.04); } #cn-join.s4 .plans .plan .check { position: relative; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.3); margin: 25px; z-index: 5; } #cn-join.s4 .plans .plan .check:before { content: ""; width: 18px; height: 8px; border-left: 4px solid green; border-bottom: 4px solid green; position: absolute; top: 11px; left: 10px; -webkit-transform: rotate(-50deg); transform: rotate(-50deg); -webkit-filter: opacity(0%); -moz-filter: opacity(0%); -ms-filter: opacity(0%); -o-filter: opacity(0%); filter: opacity(0%); -webkit-transition: all 200ms linear; transition: all 200ms linear; } #cn-join.s4 .plans .plan:hover .check:before { -webkit-filter: opacity(100%); -moz-filter: opacity(100%); -ms-filter: opacity(100%); -o-filter: opacity(100%); filter: opacity(100%); } #cn-join.s4 .plans .plan .txts { z-index: 2; } #cn-join.s4 .plans .plan .txts big { font-size: 25px; line-height: 95%; font-weight: 800; color: #fff; text-transform: uppercase; display: block; } #cn-join.s4 .plans .plan .txts small { font-size: 15px; color: #9400D3; } #cn-join.s4 .plans .plan .price { margin-left:auto; display: flex; align-items: center; font-weight: 800; z-index: 2; } #cn-join.s4 .plans .plan .price span { font-size: 15px; } #cn-join.s4 .plans .plan .price big { font-size: 60px; } #cn-join.s4 .plans .plan .price small { font-size: 25px; } #cn-join.s4 .plans .plan .btn { margin:0 20px; display: flex; justify-content: center; align-items: center; align-content: center; font-size: 15px; font-weight: 700; text-transform: uppercase; padding:15px 26px 17px 26px; border-radius: 10px; background: linear-gradient(to bottom, #9400D3, #640090); color: #fff; box-shadow: 0 10px 25px 0 rgb(0 0 0 / 35%), inset 0 -6px 1px 0 rgb(0 0 0 / 32%); } #cn-join.s4 .plans .plan .btn:hover { background: linear-gradient(to bottom, #640090, #640090) } #cn-loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 100; display: flex; justify-content: center; align-items: center; display: none; } #cn-loading.show { display: flex; } #cn-loading .spinner { width: 40px; height: 40px; background-image: none; border-top-color: rgba(255,255,255,.6); border-right-color: rgba(255,255,255,.55); border-bottom-color: rgba(255,255,255,.5); border-left-color: transparent; animation: spinner 400ms linear infinite; border-style: solid; border-width: 4px; border-radius: 50%; } @keyframes spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* WORDPRESS CORE */ .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; } .alignright { float:right; margin: 5px 0 20px 20px; } .alignleft { float: left; margin: 5px 20px 20px 0; } a img.alignright { float: right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; padding: 5px 3px 10px; text-align: center; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;} .screen-reader-text:focus { background-color: #eee; clip: auto !important; clip-path: none; color: #444; display: block; font-size: 1em; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000;} /* KEY FRAMES */ @keyframes fill-bar { from {width: 0%;} to {width: 100%;} } @media (max-width: 1440px){ .container { padding: 0 20px; } } /* ANIMATION */ @keyframes loader-dots { from {transform: scale(0, 0);} to {transform: scale(1, 1);} } @-webkit-keyframes loader-dots { from {-webkit-transform: scale(0, 0);} to {-webkit-transform: scale(1, 1);} } @media (max-width: 1024px){ .container { padding: 0 10px; } #cn-header .logo { width: 230px; } #cn-header .navigation { margin-left:5px; } #cn-header .navigation nav a { padding: 0 5px; font-size: 14px; line-height: 37px; } #cn-main .heading .title h1 { font-size:22px; } #cn-main .list ul { margin: 0 -3px; } #cn-main .list li { width: 25%; padding: 0 3px; margin-bottom: 6px; } #cn-main .list li .title { display: -webkit-box; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; height: 60px; line-height: 22px; } #cn-main .list .model li { width: 25%; } #cn-video .row { flex-wrap: wrap; flex-direction: column; } #cn-video .row .button { max-width:100%; background: 0 0; } #cn-video .row .button ul { flex-direction: row; } #cn-video .row .button ul li { padding-left:0; text-align: center; } #cn-video .row .button ul li:nth-last-child(4) { display:none; } #cn-video .row .button ul:before, #cn-video .row .button ul:after, #cn-video .row .button ul li:after { content: none; } #cn-video .row .button ul li strong { font-size: 17px; } #cn-video .row .button ul li small { display:none; } #cn-video .content .description { font-size: 16px; } } @media (max-width: 768px){ #cn-header > .container { height: 55px; padding:10px; } #cn-header .bar { display: block; } #cn-header .navigation { display: none; position: fixed; flex-direction: row; top: 55px; left: 0; width: 100%; height: 100%; margin: 0; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } #cn-header .navigation .close { display:block; } #cn-header .navigation nav { order: 1; width: 85%; padding: 5px; background: rgba(0 0 0 / .9); overflow: auto; } #cn-header .navigation nav span { display:block; } #cn-header .navigation nav li { float: none; text-align: center; } #cn-header .navigation nav a { background: #fff; margin: 0 0 10px; padding: 5px; border-radius:5px; } #cn-header .navigation nav .links { display: flex; } #cn-header .navigation .social { display: block; } #cn-header .buttons span { display:flex; } #cn-header .buttons span, #cn-header .buttons a { line-height: 29px; } #cn-header .buttons span svg, #cn-header .buttons a svg { height: 10px; margin-right: 5px; } #cn-mobile { display: block; } #cn-main .heading .title h1 { font-size: 20px; } #cn-main .list li, #cn-main .list .model li { width: 50%; } #cn-main .trends small { display: flex; } #cn-main .trends .overflow { display: block; position: relative; overflow: auto; } #cn-main .trends .overflow ul { width: max-content; margin: 0; justify-content: space-between; } #cn-main .related .links { justify-content: space-around; } #cn-main .related .links button { width: 49.5%; margin: 0 0 5px; } #cn-video .row { margin: 10px 0; } #cn-video .row .button a { margin:6px 0; } #cn-video .row .button ul li { width:110px; } #cn-video .row .button ul li:last-child { width:auto; } #cn-video .row .button a { font-size:18px; } #cn-video .row .join { margin: 0; width: 100%; background: #fff; padding: 0; } #cn-video .row .join .plans .plan { flex-direction: row; flex-wrap: wrap; } #cn-video .row .join .plans .plan:nth-child(2), #cn-video .row .join .plans .plan:nth-child(3) { display:none;} #cn-video .row .join .plans .plan:before { width: 100%; height: 60px; left: 0; -webkit-transform: skew(0deg); transform: skew(0deg); } #cn-video .row .join .plans .plan .check { width: 30px; height: 30px; border-radius: 10px; margin: 15px; } #cn-video .row .join .plans .plan .check:before { width: 25px; height: 10px; top: 4px; left: 5px; } #cn-video .row .join .plans .plan .txts big { font-size: 18px; color: #000;} #cn-video .row .join .plans .plan .txts small { display:block; font-size: 12px; color: #000;} #cn-video .row .join .plans .plan .price { margin: 0 auto; justify-content: center; } #cn-video .content { padding: 5px; } #cn-video .content .control ul { width:max-content; } #cn-video .content .breadcrumbs { margin:9px 0 8px; } #cn-dashboard .join h1 { font-size: 300%; } #cn-dashboard .join .plans { display: flex; justify-content: space-between; } #cn-dashboard .join .plans .plan { width: 30%; } #cn-dashboard .join .plans .plan h3 { font-size: 200%; } #cn-dashboard .join .plans .plan .item .price { font-size: 170%; line-height: normal; } #cn-dashboard .join .plans .plan .item .btn { padding: 20px 10px; } #cn-dashboard .login { padding: 50px 10px; background-image:none; } #cn-dashboard .login .row { flex-direction: column; align-items: center; } #cn-dashboard .login .left, #cn-dashboard .login .right { width:100%; padding:0; } #cn-dashboard .account { flex-direction: column; } #cn-dashboard .account .box { width:100%; margin: 0 0 15px; } } @media (max-width: 479px){ .container { padding: 0 10px; } #cn-header { position: relative; } #cn-header>.container { flex-wrap: wrap; justify-content: space-between; } #cn-header .logo { flex:1; } #cn-header .buttons { margin-left:0; } #cn-header .buttons a { padding: 0 10px; font-size: 12px; } #cn-header .buttons a svg { display:none; } #cn-header .buttons .acc, #cn-header .buttons .logout{ display:none; } #cn-main .heading .title h1 { font-size: 17px; } #cn-main .heading .title p { font-size: 14px; } #cn-main .heading#related .overflow { width: 100%; display: block; position: relative; overflow: auto; } #cn-main .heading#related .overflow ul { width: max-content; } #cn-main .list h2 { font-size: 18px; } #cn-main .list h3 { margin: 10px 0; } #cn-main .list li { width: 100%; } #cn-main .trends ul a, #cn-main .trends ul button { font-size: 10px; padding: 7px; } #cn-video .row .left .link { flex-direction: column; } #cn-video .row .left .content .control ul li span, #cn-video .row .left .content .control ul li a { font-size: 0; } #cn-video .row .left .content .control ul svg { margin: 0; width: 16px; height: auto; } #cn-dashboard .join h1 { padding: 0 0 25px; } #cn-dashboard .join .plans { display: flex; flex-direction: column; align-content: center; align-items: center; } #cn-dashboard .join .plans .plan#transform { transform: none; } #cn-dashboard .join .plans .plan { width: 90%; margin: 0 0 25px; } #cn-dashboard .join .plans .plan h3 { width: 100%; margin: 30px 0 20px; } #cn-dashboard .join .plans .plan:nth-child(1) { order:3; } #cn-dashboard .join .plans .plan:nth-child(2) { order:1; } #cn-dashboard .join .plans .plan:nth-child(3) { order:2; } } @media (max-width: 320px){ } /* Branding do domínio no logo (pornocomlegenda.tv) — rodapé/páginas de assinatura. */ #cn-footer .logo a::after, footer .logo a::after { content: "pornocomlegenda.tv"; display: block; text-align: center; font-weight: 700; font-size: 15px; color: #666; letter-spacing: .5px; margin-top: 6px; }