/* Theme Name: Epiadinhas 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.23 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */ /* IMPORT */ @import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Montserrat:wght@400;600;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Anton&display=swap'); /* NORMALIZE */ *, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { scroll-behavior: smooth; } 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; } a { text-decoration: none; color: #640090; } /* BODY */ body { background:#000; color:#fff; position: relative; padding: 0; margin: 0; font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif; font-weight: normal; } /* CONTAINER */ .container { max-width:1150px; width: 98vw; position: relative; margin: 0 auto; } /* HEADER */ #cn-header { background: rgba(0 0 0 / .5); border-bottom:1px solid #640090; position: fixed; width: 100%; top: 0; left: 0; z-index: 999; } #cn-header > .container { position: relative; margin: 0 auto; box-shadow: 0 10px 30px rgb(0 0 0 / 30%); overflow: hidden; display: flex; align-items: center; align-content: center; } #cn-header .icon { display:block; width:50px; cursor: pointer; } #cn-header .icon svg { width: 100%; height: 100%; display: block; } #cn-header .icon:hover { background: #640090; border-radius: 5px; } #cn-header .logo { position: relative; padding: 15px 20px; } #cn-header .navigation { display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); transform: translateX(-100%); transition: transform .2s; } #cn-header .navigation nav { background:#2d2d2d; width:300px; height:100%; } #cn-header .navigation nav ul { list-style: none; margin: 0; padding:0; } #cn-header .navigation nav ul:after { content:''; display:block; clear:both; } #cn-header .navigation nav ul li { position: relative; list-style: none; width: 100%; text-align: center; border-bottom:1px solid rgba(255,255,255,0.1); } #cn-header .navigation nav ul li:last-child { border-bottom:1px solid rgba(255,255,255,0); } #cn-header .navigation nav ul li.current-menu-item a { color:rgba(255 255 255 / .1); } #cn-header .navigation nav ul a { color: #fff; display: block; padding: 20px 0; font-size: 22px; position: relative; } #cn-header .navigation nav ul a:hover { text-decoration: underline; text-decoration-color:#640090; } #cn-header .navigation nav ul a.join { font-family: fantasy; 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%); display: flex; justify-content: center; align-items: center; align-content: center; font-size: 24px; text-transform: uppercase; padding: 20px 20px 25px; margin: 10px; border-radius: 10px; transition: transform .5s; } #cn-header .navigation span { display: block; width: calc(100% - 300px); height: 100%; cursor: pointer; } #cn-header .navigation span svg { display: block; width: 50px; height: 50px; margin: 20px; } /* JOIN */ #cn-join { } #cn-join .container { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; z-index:2} #cn-join .links { width:100%; position: relative; z-index: 2; } #cn-join .links a { font-family: 'Anton', sans-serif; text-align: center; background: linear-gradient(to bottom, rgb(145 0 207),rgb(100 0 143)); color: #fff; border: 2px solid #4F0072; border-bottom: 0; box-shadow: 0 10px 25px 0 rgb(0 0 0 / 35%), inset 0 -6px 1px 0 rgb(0 0 0 / 32%); 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-join .links a:hover { transform: scale(1.04); background: linear-gradient(to bottom, #640090, #640090); } #cn-join.s1 { position: relative; height:100vh; background-image: url(../images/Banner-01-min-scaled.jpg); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } #cn-join.s1:after { content:''; position: absolute; width: 100%; height:100%; bottom: 0; left: 0; z-index:1; background:linear-gradient(to bottom, rgba(0 0 0 / .5), #000); } #cn-join.s1 .text { width:100%; text-align:center; } #cn-join.s1 .text span, #cn-join.s1 .text small, #cn-join.s1 .text big { display:block; } #cn-join.s1 .text span { font-size: 3.8rem; color: #f5f5f5; text-shadow: 2px 2px #000; } #cn-join.s1 .text 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.s1 .icons { display: flex; flex-wrap: wrap; justify-content: center; margin: 60px 0; } #cn-join.s1 .icons a { width: 16.6666667%; padding:10px; } #cn-join.s1 .icons a img { border-radius: 10px; transition: transform .5s; } #cn-join.s1 .icons a img:hover { transform: scale(1.2); } #cn-join.s2 { position: relative; background-image: url(../images/demo.png); background-repeat: no-repeat; background-position: center top; display: flex; align-items: flex-end; } #cn-join.s2 .container { margin: 0 auto; z-index: 2; } #cn-join.s2 .itens { position: relative; margin: 450px auto 50px; border-radius:15px; padding: 20px 0; border: 2px solid #4F0072; background: linear-gradient(to bottom, #9400D3, #640090); } #cn-join.s2 .itens ul { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; padding: 0; margin: 0; } #cn-join.s2 .itens ul li { width: 200px; position: relative; display: flex; font-size: 1.2rem; line-height: 1.2rem; font-weight: 700; letter-spacing: -.05em; text-transform: uppercase; color: #b2b2b2; align-items: center; } #cn-join.s2 .itens ul li b { display: inline-block; color: #fff; margin: 0 10px 0 0; font-size: 3rem; line-height: 2.8rem; font-weight: 700; letter-spacing: -.06em; text-shadow: 0 0 15px rgb(0 0 0 / 1); float: left; } #cn-join.s2 .itens ul li svg { position: absolute; z-index: -1; top: -2px; display: inline-block; color: #4F0072; width: 50px; height: 50px; } #cn-join.s2 .itens ul li:nth-child(1) svg { left: -35px; } #cn-join.s2 .itens ul li:nth-child(2) svg { left: -30px; } #cn-join.s2 .itens ul li:nth-child(3) svg { left: -30px; } #cn-join.s3 { position: relative; height: 90vh; margin:50px 0; background-image: url(../images/BGFullHD_A-min.jpg); background-size: cover; background-position: center center; } #cn-join.s3 ul { width:100%; display: flex; justify-content: center; padding: 0; margin:0 0 20px; } #cn-join.s3 ul li { max-width:250px; margin: 0px 15px; text-align: center; position: relative; display:flex; align-content: center; justify-content: center; align-items: center; flex-direction: column; } #cn-join.s3 ul li img { margin: 0 0 25px; width:80px; } #cn-join.s3 ul li .title { font-size: 26px; line-height: 30px; font-weight: 700; letter-spacing: -.05em; } #cn-join.s3 ul li p { color: #b2b2b2; } /* MAIN */ #cn-main { } /* SEARCH */ #cn-main .search { margin: 0 0 30px; } #cn-main .search form { background: rgba(255 255 255/ 0.1); border-radius: 8px; padding: 10px; display: flex; align-items: center; } #cn-main .search form input { background: transparent; color: #fff; border: 0; width: 100%; padding: 0 0 0 10px; font-size: 25px; line-height: 200%; font-weight: 700; } #cn-main .search form a, #cn-main .search form button { cursor: pointer; background: linear-gradient(to bottom, #9400D3, #640090); color: #fff; padding: 10px; border: 0; border-radius: 10px; height: 51px; } #cn-main .search form a:hover, #cn-main .search form button:hover { background:rgba(0 0 0 / .5); } #cn-main .search form button svg, #cn-main .search form a svg{ height: 80%; display: block; margin: 3px; } /* TRENDS */ #cn-main .trends { margin:0 0 5px; } #cn-main .trends h3 { font-size: 24px; line-height: 30px; text-transform: uppercase; color: #fff; display: inline-block; margin: 0 0 15px; font-weight: bold; } #cn-main .trends h3 svg { color:#640090; } #cn-main .trends small { margin: 0 0 10px; display: none; align-items: center; justify-content: center; } #cn-main .trends .btns { display: flex; justify-content: space-evenly; } #cn-main .trends .btns a, #cn-main .trends .btns button { width: 100%; font-size: 14px; line-height: 100%; background: linear-gradient(to bottom, #9400D3, #640090); color: #fff; display: flex; justify-content: center; align-items: center; align-content: center; text-transform: uppercase; padding: 10px 15px; margin: 0 5px 10px; border-radius: 10px; transition: transform .5s; border: 0; } #cn-main .trends .btns button { cursor: pointer; background: #dc8700; } #cn-main .trends ul { display: flex; flex-wrap: wrap; margin: 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:14px; line-height:100%; background: linear-gradient(to bottom, #9400D3, #640090); color: #fff; display: flex; justify-content: center; align-items: center; align-content: center; text-transform: uppercase; padding: 10px 15px; margin:0 5px 10px; border-radius: 10px; transition: transform .5s; border: 0; } #cn-main .trends ul a:hover { background: linear-gradient(to bottom, #640090, #640090) } #cn-main .trends ul button { cursor: pointer; background: #dc8700; } #cn-main .trends ul button:hover { background: #422800; } #cn-main .trends ul a svg { margin:0 5px 0 0; } /* HEADING */ #cn-main .heading { margin: 0 0 15px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } #cn-main .heading .title { } #cn-main .heading .title h1, #cn-main .heading .title h2, #cn-main .heading .title h4 { text-transform: uppercase; color: #fff; display: inline-block; line-height: 110%; margin: 0; font-weight: bold; } #cn-main .heading .title h1 { font-size: 24px; line-height: 100%; } #cn-main .heading .title h1 img { width: 220px; height: 330px; object-fit: cover; } #cn-main .heading .title h2 { font-size: 20px; line-height: 100%; } #cn-main .heading .title svg { width: 20px; height: 20px; color: #640090; display: inline-block; } #cn-main .heading .title p { margin: 10px 0 0 } #cn-main .heading .model { display: flex; width:100%; } #cn-main .heading .model a { display: flex; align-items: center; color: #fff; text-transform: uppercase; font-weight: 700; margin:0 10px 5px 0; } #cn-main .heading .model a:hover { text-decoration: underline; } #cn-main .heading .model img { width: 30px; height: 30px; border-radius: 5px; margin-right: 5px; object-fit: cover; } #cn-main .heading#model { justify-content: flex-start; align-items: stretch; } #cn-main .heading#model .bg { width: 150px; height: 220px; display: inherit; } #cn-main .heading#model .bg img { border-radius: 8px 0 0 8px; width: 100%; height: 100%; object-fit: cover; } #cn-main .heading#model .title { background: rgba(255 255 255 / 0.1); display: flex; align-items: flex-start; padding: 0 20px; width: calc(100% - 150px); border-radius: 0 8px 8px 0; flex-direction: column; justify-content: center; } /* LIST */ #cn-main .list { width: 100%; overflow: hidden; } #cn-main .list h3 { font-size: 24px; line-height: 30px; text-transform: uppercase; color: #adadadb3; display: inline-block; margin: 0 0 15px; font-weight: bold; } #cn-main .list h3 a { color:#fff; } #cn-main .list h3 a:hover { color:#640090 } #cn-main .list h3 svg { color:#640090 } #cn-main .list ul { display: flex; flex-wrap: wrap; padding:0; margin:0 -3px; list-style-type: none; } #cn-main .list ul .pages { width:100%; display: flex; flex-wrap: wrap; padding:0; margin:0 -3px; list-style-type: none; } #cn-main .list li a:hover { text-decoration: underline; } #cn-main .list li { width: 33.333%; position: relative; display: inline-block; padding: 0 5px; margin-bottom: 10px; } #cn-main .list li .thumbnail { display: block; width: 100%; position: relative; height: 0; padding: 0 0 80%; overflow: hidden; border-radius:5px; } #cn-main .list li .thumbnail:after { 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-main .list li .thumbnail .img { background-position: center center; background-repeat: no-repeat; background-size: cover; border-radius: 5px; 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-main .list li .thumbnail:hover .img { transform: rotate(-2deg) scale(1.13);} #cn-main .list li .thumbnail:hover .img:before { content: '▶'; background: rgba( 0 0 0 / 60%); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: rgba(255 255 255 / 70%); } #cn-main .list li .thumbnail .badge { color: #fff; border-radius: 3px; font-size: 12px; padding: 2px 4px; position: absolute; text-transform: uppercase; z-index: 3; } #cn-main .list li .thumbnail .badge#new { left: 5px; top: 5px; background: #b32618; background: linear-gradient(to bottom, #b32618 0%,#81120b 100%); } #cn-main .list li .thumbnail .badge#count { bottom:5px; right:5px; background:rgba( 0 0 0 / .5)} #cn-main .list li .thumbnail .badge#model { bottom: 0; right: 0; padding: 0; width: 100%; height: 25px; text-overflow: ellipsis; white-space: pre-line; } #cn-main .list li .thumbnail .badge#model b { background: rgba( 0 0 0 / .5); margin: 0 2.5px 5px; padding: 2px 5px; border-radius: 5px; display: inline-flex; font-size: 11px; font-weight: 500; } #cn-main .list li .thumbnail .msg { display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background: rgba(0,0,0,0.5); color: #fff; cursor: default; flex-direction: column; align-items: center; justify-content: center; -webkit-filter: opacity(0%); -moz-filter: opacity(0%); -ms-filter: opacity(0%); -o-filter: opacity(0%); filter: opacity(0%); } #cn-main .list li:hover .thumbnail .msg { -webkit-filter: opacity(100%); -moz-filter: opacity(100%); -ms-filter: opacity(100%); -o-filter: opacity(100%); filter: opacity(100%); } #cn-main .list li .thumbnail .msg a { color: #fff; text-decoration: none; position: absolute; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } #cn-main .list li .thumbnail .msg small { font-size: 15px; font-weight: 500; } #cn-main .list li .thumbnail .msg big { font-size: 26px; font-weight: 800; } #cn-main .list li .thumbnail .msg span { font-family: fantasy; 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%); display: flex; justify-content: center; align-items: center; align-content: center; font-size: 22px; text-transform: uppercase; padding: 5px 10px 7px; border-radius: 10px; text-decoration: none; } #cn-main .list li .thumbnail .msg span:hover { transform: scale(1.04); background: linear-gradient(to bottom, #640090, #640090) } #cn-main .list li .thumbnail .model { display: block; position: absolute; left: 0; bottom: 0; width: 100%; z-index: 3; padding: 0 5px; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); } #cn-main .list li .thumbnail .model a { display:none; align-items: center; color: #fff; font-weight: 700; margin:0 0 5px; } #cn-main .list li .thumbnail .model a:nth-child(1) { display:flex; } #cn-main .list li .thumbnail .model a:nth-child(2) { display:flex; } #cn-main .list li .thumbnail .model img { width: 40px; height: 50px; border-radius: 5px; margin-right: 5px; object-fit: cover; } #cn-main .list li .infor { font-size: 12px; font-weight: 500; text-transform: uppercase; display: flex; justify-content: space-between; margin: 5px 0 0; color: #adadadb3; display:none; } #cn-main .list li .infor svg { width: 10px; height: 10px; color: #fff; display: inline-block; } #cn-main .list li .infor .model { width: calc(100% - 50px); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #cn-main .list li .infor .model b:before { content:', '; } #cn-main .list li .infor .model b:nth-last-child(1):before { content:' e '; } #cn-main .list li .infor .model b:nth-child(2):before { content:none; } #cn-main .list li .infor .model a { color: #adadadb3; } #cn-main .list li .infor .model a:hover { text-decoration: underline; text-decoration-color:#640090; } #cn-main .list li .title { display: -webkit-box; padding: 0; margin:3px 0 15px; font-size: 14px; font-weight: 500; text-transform: uppercase; width: 100%; letter-spacing: -1px; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } #cn-main .list li .title a { color:#fff; } #cn-main .list li .title:hover a { text-decoration: underline; text-decoration-color:#640090; } #cn-main .list li .row { display:flex; } #cn-main .list li .row span { display: flex; align-items: center; align-content: center; background:#f4f4f4; color:#6c757d; font-size:12px; border-radius:3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding:2px 4px; margin:0 5px 0 0; } #cn-main .list li .row span svg { color: #b32618; margin-right:3px; max-height:12px; } #cn-main .list#model li { width: 20%; } #cn-main .list#model li .thumbnail { padding: 0 0 155%; } #cn-main .list .more { background: #0054a6; color: #fff; padding: 10px 15px; border-radius: 3px; display: block; font-size: 13px; margin: 20px auto; width: 100%; max-width: 350px; text-align: center; } #cn-main .list .more a { color:#fff; } #cn-main .list .more:hover { background: #d8d8d8; color: #0054a6; } #cn-main .list .more:hover a { color:#0054a6; } #cn-main .navigation { margin: 20px 0 0; border-radius:3px; display: inline-block; width: 100%; } #cn-main .navigation .links a { font-family: 'Anton', sans-serif; text-align: center; background: linear-gradient(to bottom, rgb(145 0 207),rgb(100 0 143)); color: #fff; border: 2px solid #4F0072; border-bottom: 0; box-shadow: 0 10px 25px 0 rgb(0 0 0 / 35%), inset 0 -6px 1px 0 rgb(0 0 0 / 32%); 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-main .navigation .links a:hover { transform: scale(1.04); background: linear-gradient(to bottom, #640090, #640090); } #cn-main .list .nav-links { display: flex; justify-content: center; line-height: 110%; margin: 10px 0;} #cn-main .list .nav-links:after {content: ""; display: block; clear: both; } #cn-main .list .nav-links .page-numbers { display: block; background:#fff; color:#000; font-size: 16px; height: 50px; line-height: 50px; font-weight: 500; min-width: 40px; text-align: center; margin: 0 2px; padding:0 10px; border-radius:3px } #cn-main .list .nav-links .page-numbers:hover, #cn-main .list .nav-links .current { background: #640090; 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-main .list .nav-links .current svg { margin: 0 5px 0 0; height: 14px; width: 14px; display: inline-block; } #cn-main .list .nav-links .current:hover { background: #9a1c12; background: linear-gradient(to bottom, #640090, #640090); } #cn-main .list .nav-links select { background:rgba(255 255 255 / .1); color:#fff; position:relative; text-align:center; width: 100%; padding: 20px; font-size: 20px; border: 0; border-radius:5px; } #cn-main .list .nav-links option { color:#000; } #cn-main .list .simplefavorites-clear { font-size: 12px; line-height: 100%; box-shadow: 0 10px 25px 0 rgb(0 0 0 / 35%), inset 0 -6px 1px 0 rgb(0 0 0 / 32%); background: linear-gradient(to bottom, #9400D3, #640090); color: #fff; display: flex; justify-content: center; align-items: center; align-content: center; text-transform: uppercase; padding: 15px 15px 20px 15px; margin: 0; border-radius: 10px; border: 0; transition: transform .5s; } /* FILTER LIST TAG */ #cn-main .list #FilterInput { margin: 15px 0 25px; width: 100%; padding: 0 10px; height: 45px; font-size: 14px; box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%); border: 1px #d6d6d6 solid; } #cn-main .list ul#FilterList { margin:0 0 30px; } #cn-main .list ul#FilterList li.title { width: 100%; margin: 5px 0 10px ; padding-bottom: 10px ; border-bottom: 1px solid rgba(255 255 255 / .1); } #cn-main .list ul#FilterList li.title span { color: #fff; float: left; margin: 0; padding: 0 5px 0 0; font-size: 20px; font-weight: 500; text-transform: uppercase; } #cn-main .list ul#FilterList li.title span b { color:#f90; } #cn-main .list ul#FilterList li strong { color: #640090; font-size: 11px; } #cn-main .list ul#FilterList li a { text-align: center; color: #fff; font-size: 15px; line-height: 100%; text-transform: uppercase; } #cn-main .list ul#FilterList li a:hover { text-decoration: underline; text-decoration-color: #640090; } /* FOOTER */ #cn-footer { border-top: 3px solid #640090; text-align:center; } #cn-footer .logo { margin: 50px 0; } #cn-footer .logo img { margin:0 auto; } #cn-footer .descrition { color:#adadadb3; margin: 0 0 25px; } #cn-footer .navigation { margin: 0 0 10px; border-radius: 4px; } #cn-footer .navigation nav ul { list-style: none; margin: 0; padding:0; } #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 { color:#fff; display: block; padding:10px; font-weight: 700; } #cn-footer .navigation nav a:hover { text-decoration: underline; text-decoration-color:#640090; } #cn-footer .copyright { padding: 20px 0 0; font-size:12px; margin:0 0 20px; } /* ARTICLE */ #cn-article:after { content: ""; display: block; clear: both; } #cn-article .video { overflow: hidden; margin-bottom:15px; } #cn-article .video .player { height: calc(0.5625 * (100vw - 12px)); max-height: calc(100vh - 220px); overflow: hidden; position: relative; } #cn-article .video .player iframe, #cn-article .video .player video, #cn-article .video .player embed { height: 100%; left: 0; position: absolute; top: 0; width: 100%; background: #000; } #cn-article .control { overflow: hidden; text-align: right; width: 270px; display: inline-flex; justify-content: flex-end;display: inline-flex; justify-content: flex-end; } #cn-article .control > span { display: inline-block; padding: 10px; font-size: 16px; font-weight: 500; line-height: 35px; position: relative; } #cn-article .control > span:last-child { display: flex; align-items: center; background: #E7E9EB; color: #616d75; border-radius: 5px; cursor: pointer; } #cn-article .control > span.active { border-radius:5px 5px 0 0; } #cn-article .control svg { height: 15px; color: #b32618; margin-right:3px; } #cn-article .description { background: #E7E9EB; color: #616d75; padding:20px; border-radius:5px; } #cn-article .description.active { border-radius:5px 0 5px 5px; } #cn-article .description h2 { color:#000; } #cn-article .description img { margin:0 auto } #cn-article .comments {} #cn-article .comments .status { } #cn-article .comments .status ul { padding: 0; margin: 0 -10px 15px; list-style: none; display: flex; justify-content: space-between; } #cn-article .comments .status ul li { width: 100%; margin:10px; padding: 15px; border-radius: 10px; border: 1px solid transparent; } #cn-article .comments .status ul li:nth-child(1) { color: #155724; background-color: #d4edda; border-color: #c3e6cb; } #cn-article .comments .status ul li:nth-child(2) { color: #856404; background-color: #fff3cd; border-color: #ffeeba; } #cn-article .comments .status ul li:nth-child(3) { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; } #cn-article .comments .status ul b { } #cn-article .comments > h3 { font-family: 'Anton', sans-serif; font-size: 3.5rem; text-transform: uppercase; line-height: 90%; margin:0 0 25px; 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-article .comments .navigation { display:none; } #cn-article .comments .commentlist { padding: 0; list-style: none; margin: 0 0 20px; height: 85vh; overflow: auto; border: 2px solid #4F0072; } #cn-article .comments .commentlist .children{ } #cn-article .comments .commentlist .children .comment { background: #E7E9EB; margin: 10px 0; } #cn-article .comments .commentlist .children li .children .comment { background: #fff; } #cn-article .comments .commentlist .comment { list-style: none; background: #fff; color:#000; padding: 15px; margin:0 0 10px; } #cn-article .comments .commentlist .comment .comment-body { position: relative; overflow: auto; } #cn-article .comments .commentlist .comment-author { line-height: 25px; font-size: 16px; } #cn-article .comments .commentlist .comment .comment-body .comment-author img { width: 45px; float: left; margin-right: 10px; margin-bottom: 15px; } #cn-article .comments .commentlist .comment-author .fn { font-weight: 700; font-style: normal; } #cn-article .comments .commentlist .comment-author { line-height: 25px; font-size: 16px; } #cn-article .comments .commentlist .commentmetadata { font-size: 12px; } #cn-article .comments .commentlist .comment .comment-body p { clear: both; } #cn-article .comments .comment #commentform { background: #E7E9EB; margin: 10px 0; padding: 5px 20px; } #cn-article .comments .comment-respond {} #cn-article .comments .comment-respond input[type="text"], #cn-article .comments .comment-respond input[type="email"], #cn-article .comments .comment-respond textarea {display: block; max-width: 100%; width:100%; padding: 20px; color:#000; background:#fff; border: 0;} #cn-article .comments .comment-respond input[type="submit"] { cursor: pointer; font-family: 'Anton', sans-serif; text-align: center; width: 100%; background: linear-gradient(to bottom, rgb(145 0 207),rgb(100 0 143)); color: #fff; border: 1px solid #4F0072; border-bottom: 0; box-shadow: 0 10px 25px 0 rgb(0 0 0 / 35%), inset 0 -6px 1px 0 rgb(0 0 0 / 32%); display: flex; justify-content: center; align-items: center; align-content: center; font-size: 1.5rem; text-transform: uppercase; padding: 15px 30px 20px; margin: 0 0 50px; border-radius: 5px; transition: transform .5s; } #cn-article .comments .comment-respond input[type="submit"]:hover { transform: scale(1.04); background: linear-gradient(to bottom, #640090, #640090); } #cn-article .requests { background: #E7E9EB; padding: 20px; margin:0 0 20px; border-radius:0 0 5px 5px } #cn-article .requests input[type=email], #cn-article .requests input[type=text], #cn-article .requests input[type=url], #cn-article .requests textarea { width: 100%; padding: 15px 10px; font-size: 12px; border-radius: 5px; margin: 0 0 10px; } /*DASHBOARD */ #cn-dashboard { } #cn-dashboard .login { } #cn-dashboard .login .row { max-width: 800px; width: 100%; min-height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; align-content: center; align-items: center; flex-wrap: wrap; margin: 0 auto; } #cn-dashboard .login .logo { width:100%; margin:25px 0; } #cn-dashboard .login .logo img { margin:0 auto; } #cn-dashboard .login .loading { position: fixed; 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: #ff; 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 #fff; 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: 34px; text-align: center; font-weight: 700; line-height: 100%; color: #fff; margin: 0 0 30px; } #cn-dashboard .login .title svg { color: #640090; width: 30px; height: 30px; margin: 5px 5px 0 0; } #cn-dashboard .login .left, #cn-dashboard .login .right { width: calc(50% - 10px); background:rgba(0 0 0 / .9); border-radius:5px; padding:25px 15px; } #cn-dashboard .login .left form svg { position: absolute; top: 15px; left: 15px; } #cn-dashboard .login .left form ::placeholder { color: #444; } #cn-dashboard .login .left form input[type="email"], #cn-dashboard .login .left form input[type="password"] { border: 0; width: 100%; height: 55px; padding: 0 0 0 50px; background: rgba(255 255 255 / .6); font-size: 16px; color: #000; outline: none; border-radius: 5px; } #cn-dashboard .login .left form button { font-family: fantasy; text-align: center; 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%); display: flex; justify-content: center; align-items: center; align-content: center; font-size: 24px; text-transform: uppercase; padding: 20px 20px 25px; border-radius: 10px; transition: transform .5s; width: 100%; margin: 0 0 15px; cursor: pointer; border:0; } #cn-dashboard .login .left form button:hover { transform: scale(1.04); background: linear-gradient(to bottom, #640090, #640090); } #cn-dashboard .login .left .email, #cn-dashboard .login .left .pass { max-width: 100%; position: relative; margin: 0 0 25px; } #cn-dashboard .login .left .legend { background: #640090; color: #fff; font-size: 13px; padding: 4px 14px; display: flex; justify-content: flex-start; align-items: center; align-content: center; margin: 0 20px; border-radius:0 0 5px 5px} #cn-dashboard .login .left .remember { text-transform: uppercase; font-weight: 500; margin: 0 0 15px; } #cn-dashboard .login .left .reset { display: flex; justify-content: center; align-items: center; align-content: center; color: #fff; margin: 20px auto; font-size: 16px; } #cn-dashboard .login .left .reset a { color: #fff; } #cn-dashboard .login .left .reset a:hover { text-decoration: underline; } #cn-dashboard .login .left .reset svg { color:#640090; 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; 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 .img img { width:100%; border-radius:7px; } #cn-dashboard .login .right ul { display: flex; list-style: none; margin: 10px 0; padding: 0; flex-wrap: wrap; justify-content: space-between; } #cn-dashboard .login .right ul li { background: #640090; color: #fff; width: calc(50% - 5px); font-size: 16px; padding: 10px; display: flex; justify-content: center; align-items: center; align-content: center; border-radius: 6px; text-align: center; } #cn-dashboard .login .right ul li b { font-weight: 600; margin:0 5px; } #cn-dashboard .login .right .btn a { font-family: fantasy; text-align: center; background: rgb(67,205,1); background: linear-gradient(to bottom, rgba(67,205,1,1) 0%,rgba(47,153,4,1) 100%); color: #fff; box-shadow: 0 10px 25px 0 rgb(0 0 0 / 35%), inset 0 -6px 1px 0 rgb(0 0 0 / 32%); display: flex; justify-content: center; align-items: center; align-content: center; font-size: 24px; text-transform: uppercase; padding: 20px 20px 25px; border-radius: 10px; transition: transform .5s; width: 100%; margin: 0 0 15px; cursor: pointer; } #cn-dashboard .login .right .btn a:hover { transform: scale(1.04); 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%); } #cn-dashboard .account { display: flex; align-content: center; align-items: stretch; flex-wrap: wrap; flex-direction: row; justify-content: space-between; } #cn-dashboard .account .plans { width: 100%; margin:0 0 20px; } #cn-dashboard .account .plans ul { display: flex; justify-content: space-between; margin: 0 -10px; padding: 0; list-style: none; } #cn-dashboard .account .plans ul li { width:100%; font-size: 14px; line-height: 100%; background: linear-gradient(to bottom, #9400D3, #640090); color: #fff; display: flex; justify-content: center; align-items: center; align-content: center; text-transform: uppercase; padding: 15px; margin: 0 10px; border-radius: 10px; transition: transform .5s; } #cn-dashboard .account .plans ul li b { margin:0 0 0 5px; } #cn-dashboard .account .infor { width: 100%; } #cn-dashboard .account .infor table { width: 100%; } #cn-dashboard .account .infor table tr { display:flex; justify-content: flex-start; align-items: center; background:#111; border-radius: 12px; margin: 8px 0; } #cn-dashboard .account .infor table tr:nth-child(odd) { background: #191919; } #cn-dashboard .account .infor table tr td { padding: 15px 0 15px 15px; } #cn-dashboard .account .infor table tr td:first-child { width: 180px; } #cn-dashboard .account .infor table tr td label { font-size: 16px; font-weight: 700; padding: 2px 6px; position: relative; display: inline-block; width: 100%; } #cn-dashboard .account .infor table tr td input { width: 100%; border:0; height: 44px; background: #2d2d2d; color: #adadad; font-size: 15px; padding: 0 15px; outline: 0; border-radius: 10px; } #cn-dashboard .account .infor input[type="submit"] { width: 100%; font-size: 20px; line-height: 100%; box-shadow: 0 10px 25px 0 rgb(0 0 0 / 35%), inset 0 -6px 1px 0 rgb(0 0 0 / 32%); background: linear-gradient(to bottom, #9400D3, #640090); color: #fff; display: flex; justify-content: center; align-items: center; align-content: center; text-transform: uppercase; padding: 15px 15px 20px 15px; margin: 0; border-radius: 10px; border:0; transition: transform .5s; } #cn-dashboard .thanks { position: relative; min-height:100vh; padding:15vh 0; background-image: url(../images/Banner-01-min-scaled.jpg); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } #cn-dashboard .thanks:after { content:''; position: absolute; width: 100%; height:100%; bottom: 0; left: 0; z-index:1; background:linear-gradient(to bottom, rgba(0 0 0 / .5), #000); } #cn-dashboard .thanks .content { position: relative; z-index: 2; } #cn-dashboard .thanks .content h1 { font-family: 'Anton', sans-serif; font-size: 5.5rem; line-height: 150%; text-align: center; margin:0 0 15px; 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-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 { font-family: 'Anton', sans-serif; text-align: center; background: linear-gradient(to bottom, rgb(145 0 207),rgb(100 0 143)); color: #fff; border: 2px solid #4F0072; border-bottom: 0; box-shadow: 0 10px 25px 0 rgb(0 0 0 / 35%), inset 0 -6px 1px 0 rgb(0 0 0 / 32%); 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); background: linear-gradient(to bottom, #640090, #640090); } /* 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);} } /* 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;} @media (max-width: 1440px){ } @media (max-width: 1024px){ } @media (max-width: 768px){ #cn-header .navigation nav { width:calc(100% - 90px); overflow: auto; } #cn-join .links { width: 100%; } #cn-join.s1 { height:140vh; } #cn-join.s1 .icons { margin: 40px 0; } #cn-join.s1 .icons a { width: 33.333%; } #cn-join.s2 { background-size: 90%; } #cn-join.s2 .itens { margin: 250px auto 40px; } #cn-join.s3 { height: inherit; margin:50px 0; } #cn-join.s3 ul { flex-wrap: wrap; } #cn-main .list li { width: 33.333%; } #cn-main .list#model li { width: 25%; } #cn-main .list li .thumbnail .model { display: flex; align-items: center; justify-content: space-between; } #cn-main .list li .thumbnail .model a:nth-child(2) { display:none; } } @media (max-width: 479px){ #cn-main .heading .title h1 { font-size: 2vh; line-height: 100%; } #cn-main .heading .title svg { height: 15px; } #cn-main .search form input { font-size: 100%; } #cn-join .links { width: 94%; } #cn-join .links a { font-size: 1.5rem; } #cn-join.s1 { background-size:150%; background-repeat: repeat-y; } #cn-join.s1 .text span { font-size: 2.5rem; } #cn-join.s1 .text big { font-size: 5rem; line-height: 100%; } #cn-join.s1 .icons a { width: 47%; padding: 4px; } #cn-join.s2 { background-size: 95%; padding:5px 0; } #cn-join.s2 .container { width: 100%; } #cn-join.s2 .itens { width:94%; margin: 47% auto 40px; border-radius:10px; } #cn-join.s2 .itens ul { justify-content: flex-end; } #cn-join.s2 .itens ul li { width: 160px; font-size: 1rem; line-height: 1rem; } #cn-join.s2 .itens ul li svg { width: 35px; height: 35px; top: 5px; } #cn-join.s2 .itens ul li b { font-size: 2.3rem; line-height: 3rem; margin: 0 3px 0 0; } #cn-join.s2 .itens ul li:nth-child(1) svg { left: -20px; } #cn-join.s2 .itens ul li:nth-child(2) svg { left: -20px; } #cn-join.s2 .itens ul li:nth-child(3) svg { left: -25px; top: 10px; } #cn-main .trends small { display: flex; } #cn-main .trends .overflow { display: block; position: relative; overflow: auto; } #cn-main .trends .overflow ul { width:1300px; } #cn-main .list li .thumbnail { padding: 0 0 110%; } #cn-main .list li, #cn-main .list#model li { width: 50%; } #cn-article .video .player { height: calc(0.5625 * (180vw - 12px)); } #cn-dashboard .login .row { flex-wrap: nowrap; flex-direction: column; } #cn-dashboard .login .left, #cn-dashboard .login .right { width:auto; margin:10px; } #cn-dashboard .account .plans ul { flex-direction: column; margin:0; } #cn-dashboard .account .plans ul li { margin: 0 0 10px; width: auto; } #cn-dashboard .thanks .content h1 { font-size: 4rem; line-height: 100%; } #cn-dashboard .thanks .content h2 { font-size: 2rem; } #cn-dashboard .thanks .content h3 { } #cn-article .comments .status ul { margin: 0 0 10px; flex-direction: column; } #cn-article .comments .status ul li { margin: 0 0 10px; } } @media (max-width: 320px){ #cn-main .list li, #cn-main .list#model li { width: 100%; } }