/*
Theme Name: Video 02
Author: Carlos Nicow
Description: <u>Tema Personalizado<u> customizado por Gauss Marketing</a> para WordPress
Version: 3.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* 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 { min-height: 34px; line-height: 20px; padding: 6px 8px;  -webkit-appearance: none!important; -webkit-box-sizing: border-box!important; box-sizing: border-box!important; }
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: #0054a6; }

/* BODY */
body { 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-size: 13px; font-weight: normal; }

/* CONTAINER */
.cn-container { width: 100%; max-width: 1280px; position: relative; margin: 0 auto; padding:0 5px; }

/* HEADER */
#cn-header { margin:0 0 10px; }
#cn-header > .cn-container { display:flex; align-items: center; height:80px; margin-bottom:10px; }
#cn-header .icon { display:none; width:25px; }
#cn-header .logo { width:350px; }
#cn-header form { height: 35px; margin-left:auto; width: 100%; max-width:550px; position: relative; }
#cn-header form input { width: 100%; border: 1px solid #ccc; padding: 5px 45px 5px 5px; font-size: 13px; height: 35px; }
#cn-header form:hover input { border-color:#0054a6; }
#cn-header form input:hover,
#cn-header form input:active,
#cn-header form input:focus { border-color:#0054a6; }
#cn-header form button { background: #0054a6; color: #d8d8d8; width: 35px; height: 35px; border: 0; border-radius: 0 3px 3px 0; position: absolute; top:0; right: 0; cursor: pointer; padding: 10px; }
#cn-header form button:hover { background: #004180; color:#fff; }
#cn-header .navigation { background:#e6e6e6; }
#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 li {list-style: none; float: left; margin:0; display: inline-block; float: left; }
#cn-header .navigation nav li:first-child a { padding: 9px 5px 0; }
#cn-header .navigation nav svg { height: 20px; }
#cn-header .navigation nav a { display: block; padding:10px; }
#cn-header .navigation nav a:hover { text-decoration: underline; }
#cn-header .navigation .close { display:none; position: absolute; top: 0; right: 0; width: calc(100% - 250px); height: 100%; }

/* MAIN */
#cn-main { }
#cn-main.video { max-width: 1227px; margin:0 auto; }
#cn-main .heading { padding: 0; margin: 0 0 10px; }
#cn-main .heading .open { color: #0054a6; width: 18px; height:18px; display: inline-block; position: relative; cursor: pointer; margin: 0; float: right; padding:2px;}
#cn-main .heading .open:hover { color: #d8d8d8; }
#cn-main .heading .title { display: inline-block; }
#cn-main .heading .title h1,
#cn-main .heading .title h2,
#cn-main .heading .title h4 { color: #0a284b; display: inline-block; line-height: 110%; margin: 0; font-weight: 700; font-size: 1.2rem; }
#cn-main .heading .title svg { height: 15px; color: #0054a6; margin-right: 5px; }
#cn-main .heading .descrition { overflow: hidden; display:none; margin: 10px 0 0; background: #f2f2f2; padding: 10px; border-radius: 4px; }
#cn-main .advertising { display: block; text-align: center; padding: 0 10px; }
#cn-main .advertising img,
#cn-main .advertising iframe,
#cn-main .advertising embed { max-width:100%; margin: 0 auto 5px; }
#cn-main .advertising#header { margin-top: 10px; }
#cn-main .advertising#single { float:right; padding:0; }
#cn-main .advertising#footer { margin-bottom: 10px; }
#cn-main .filter { margin:0 0 10px; display: flex; align-items: center; }
#cn-main .filter .title { display: block; margin-right: 5px; }
#cn-main .filter .title svg { color:#0054a6; height: 12px; margin-right: 3px; vertical-align: unset; }
#cn-main .filter ul { list-style: none; margin: 0; padding:0; }
#cn-main .filter ul:after { content:''; display:block; clear:both; }
#cn-main .filter ul li { float: left; list-style: none; display: inline-block; border-top:1px solid #0054a6; border-bottom:1px solid #0054a6; }
#cn-main .filter ul li:first-child { border-radius:4px 0 0 4px; border-left:1px solid #0054a6; }
#cn-main .filter ul li:last-child { border-radius:0 4px 4px 0; border-right:1px solid #0054a6 }
#cn-main .filter ul a { display: block; padding:4px 8px; font-weight: 400; border-left:1px solid #0054a6; }
#cn-main .filter ul li:first-child a { border-left:0; }
#cn-main .filter ul a:hover { background:#0054a6; color:#fff; }
#cn-main .list { width: 100%; overflow: hidden; padding: 0; margin: 0; font-size: 0; }
#cn-main .list ul { padding:0; margin:0 -5px; list-style-type: none; }
#cn-main .list li a:hover {text-decoration: underline;}
#cn-main .list li { width: 20%; 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: 56.75% 0 0; overflow: hidden; border-radius:4px; }
#cn-main .list li .thumbnail .img { background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; top: 0; left: 0; position: absolute; z-index: 2; }
#cn-main .list li .thumbnail .loading { font-size: 15px; font-weight: 500; color: #0054a6; width: 90px; height: 20px; display: block; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%,-50%); }
#cn-main .list li .thumbnail .overlay { 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; }
#cn-main .list li .thumbnail:hover .overlay { cursor: pointer; opacity: 1; z-index: 2; }
#cn-main .list li .thumbnail .badge { color:#fff; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; font-size: 9px; padding: 3px 4px; position: absolute; text-transform: uppercase; text-shadow: 1px 1px rgba(0, 0, 0, 0.1);  z-index: 3; }
#cn-main .list li .thumbnail .badge#new { left: 5px; top: 5px; background:#0054a6;  }
#cn-main .list li .thumbnail .badge#duration { left:5px; bottom:5px; font-size: 8px; background:rgba(0, 0, 0, .8); }
#cn-main .list li .thumbnail .badge#hd { top:5px; right:5px; background:#de2600; font-style: italic; font-weight: 700; }
#cn-main .list li .thumbnail .badge#rating { bottom:5px; right:5px; background:rgba(0, 0, 0, .8); color: #71f262; font-weight: 700; }
#cn-main .list li .thumbnail .badge#rating svg { margin-right:3px; }
#cn-main .list li .thumbnail .badge svg { height: 8px; }
#cn-main .list li .title { overflow: hidden; padding: 5px 0 0; display: block; font-size: 14px; font-weight: 700; line-height: 19px; text-overflow: ellipsis; text-transform: none; white-space: nowrap; width: 100%; }
#cn-main .list li .row { display:flex; justify-content: space-between; }
#cn-main .list li .row span { display:block; color:#6c757d; font-size:10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#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 .list .nav-links { display: flex; justify-content: center; line-height: 110%; margin: 10px;}
#cn-main .list .nav-links:after {content: ""; display: block; clear: both; }
#cn-main .list .nav-links .page-numbers { background: #d8d8d8; color: #0054a6; display: inline; font-size: 12px; line-height: 10px; padding: 10px 15px; text-align: center; text-decoration: none; margin-left: 1px;}
#cn-main .list .nav-links .page-numbers:hover,
#cn-main .list .nav-links .current { background: #0054a6; color: #fff; }
#cn-main .list .nav-links .prev {border-radius: 3px 0 0 3px;}
#cn-main .list .nav-links .next {border-radius: 0 3px 3px 0;}

/* FOOTER */
#cn-footer { }
#cn-footer .cats { margin: 0 0 10px; }
#cn-footer .cats ul { list-style: none; margin: 0; padding:0; }
#cn-footer .cats ul:after { content:''; display:block; clear:both; }
#cn-footer .cats ul li { list-style: none; float: left; margin: 0; padding: 0 0 5px; display: block; width: 20%; color: #6c757d; font-weight: 700; font-size: 9px; }
#cn-footer .cats ul a { font-size: 13px; font-weight: normal; }
#cn-footer .cats ul a:hover { text-decoration: underline; }
#cn-footer .logo { background: #f2f2f2; padding:10px; margin: 0 0 10px; border-radius: 4px; }
#cn-footer .logo img { width:350px; }
#cn-footer .descrition { background: #f2f2f2; padding:10px; margin: 0 0 10px; border-radius: 4px; }
#cn-footer .navigation { background:#f2f2f2; 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; float: left; margin:0; display: inline-block; float: left; }
#cn-footer .navigation nav a { display: block; padding:10px; }
#cn-footer .navigation nav a:hover { text-decoration: underline; }
#cn-footer .copyright { background:#f2f2f2; margin: 0 0 10px; 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; }

/* ARTICLE */
#cn-article:after { content: ""; display: block; clear: both; }
#cn-article .video { width: calc(100% - 310px); float: left; overflow: hidden; margin-bottom:10px; }
#cn-article .video .player { height: auto; overflow: hidden; padding-top: 56.25%; 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; margin-top: 10px; clear:both; }
#cn-article .control .ratings { display: inline-block; margin-right:20px; position: relative; }
#cn-article .control .ratings .percentage { color:#606060; font-weight: 700; font-size: 18px; display: inline-block; }
#cn-article .control .ratings .percentage svg { height: 18px; color: #71f262; }
#cn-article .control .ratings .post-ratings { display: inline-flex; font-size: 0; width: 35px; }
#cn-article .control .ratings .post-ratings-loading { position: absolute; top: 45%; right: -17px; transform: translateY(-45%); font-size: 0; }
#cn-article .control .ratings .bar { background:#cf0000; display: block; height: 5px; position: relative; width: 100%; margin-top:1px; }
#cn-article .control .ratings .bar.no { background: rgba(0, 0, 0, 0.2); }
#cn-article .control .ratings .bar .bg { background: #7ec600; max-width: 100%; display: block; height: 5px; position: relative; }
#cn-article .control .views { color:#606060; font-size: 15px; display: inline-block; margin-right:5px; }
#cn-article .control .views svg { height: 15px; color: #0054a6; margin-right:3px; }
#cn-article .control .btn { background: #d8d8d8; color: #0054a6; border: none; outline: none; cursor: pointer; padding: 10px 15px; border-radius: 3px; }
#cn-article .control .btn > span { display: block; width: 15px; height: 15px; margin: 0 5px 0 0; float: left; }
#cn-article .control .btn:hover,
#cn-article .control .btn.active { background: #0054a6; color: #fff; }
#cn-article .content { display: none; border-top: none; }
#cn-article .links { display: inline-block; margin: 0 0 10px; }
#cn-article .links:after { content:''; display:block; clear:both; }
#cn-article .links > span,
#cn-article .links a { display: inline-block; float:left; border-radius: 3px; margin-right:3px; }
#cn-article .links > span { width: 33px; height: 33px; background: #0054a6; color: #fff; padding: 6px;  }
#cn-article .links a { background: #d8d8d8; color: #0054a6;  padding: 8px 10px; }
#cn-article .links a:hover { background: #0054a6; color: #fff; }
#cn-article .comments { margin:20px 0; }
#cn-article .comments ol,
#cn-article .comments ul,
#cn-article .comments li { list-style: none; }
#cn-article .comments li { width:100%; }
#cn-article .comments .list { margin: 0; padding: 0; font-size: inherit; }
#cn-article .comments .list .comment .comment-body { position: relative; border-bottom: 1px solid #dadada; padding-top:8px; }
#cn-article .comments .list .comment:last-child .comment-body { border:0; }
#cn-article .comments .list .comment .comment-body p { margin: 14px 0; padding: 5px 15px; font-size: 13px; color: #000; line-height: 150%; position: relative; background: #d8d8d8; border-radius: 3px; }
#cn-article .comments .list .comment .comment-body p:before { content: ''; width: 18px; height: 18px; background: #dadada; position: absolute; top: -6px; left: 3px; transform: rotate(45deg); z-index: -1; border-radius: 3px; }
#cn-article .comments .list .comment .comment-body .avatar { position: absolute; top: 8px; left: 0; width: 32px; border-radius: 3px; }
#cn-article .comments .list .comment .comment-body .fn,
#cn-article .comments .list .comment .comment-body .comment-meta,
#cn-article .comments .list .comment .comment-body .comment-awaiting-moderation { margin: 0 0 0 40px; }
#cn-article .comments .list .comment .comment-body .comment-meta { margin-bottom:10px; font-size: 80%; }
#cn-article .comments .list .comment .comment-body .fn { color: #0054a6; font-weight: 700; font-style: normal; text-transform: uppercase; }
#cn-article .comments .list .comment .comment-body .reply { display:none; }
#cn-article .comments .respond input[type=email],
#cn-article .comments .respond input[type=text],
#cn-article .comments .respond textarea { margin: 0 0 10px; max-width: 100%; border-radius: 3px; padding: 5px; width: 100%; }
#cn-article .comments .respond input[type=email] { float:left; width: 50%; }
#cn-article .comments .respond input[type=text] { float:left; width: calc(50% - 10px); margin-right:10px; }
#cn-article .comments .respond textarea { clear:both; min-height: 65px; }
#cn-article .comments .respond input[type=submit] { background: #0054a6; color: #fff; border: none; outline: none; cursor: pointer; padding: 10px 15px; border-radius: 3px; }
#cn-article .comments .respond input[type=submit]:hover { background: #d8d8d8; color: #0054a6; }

#cn-article .share { margin: 0 0 20px; }
#cn-article .share a {  color: #fff; padding: 0 10px 0 0; display: inline-block; height: 32px; line-height: 32px; border-radius: 3px; }
#cn-article .share a > span { text-align: center; display: inline-block; width: 32px; height: 32px; background-color: rgba(0,0,0,0.1); margin: 0 5px 0 0; padding: 6px; vertical-align: bottom; } 
#cn-article .share a:nth-child(1) { background: #25D366; }
#cn-article .share a:nth-child(2) { background: #1da1f2; }
#cn-article .share a:nth-child(3) { background: #3b5998; }
#cn-article .share a:hover > span { background: 0 0; }

/* 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: 768px){
  #cn-header form { padding-left: 10%; }
  #cn-main .list li { width: 25%; }
  #cn-article .video { width: 100%; float: none; }
  #cn-main .advertising#single { float: none; }
  #cn-article .comments li { width: 100%; }
  #cn-article .comments .respond input[type=email],
  #cn-article .comments .respond input[type=text] { float:none; width: 100%; }
 
}

@media (max-width: 479px){
  #cn-header { margin: 10px 0; }
  #cn-header > .cn-container { flex-wrap: wrap; height: auto; }
  #cn-header .icon { display:block; }
  #cn-header .logo { width: 240px; margin-left: 10px; }
  #cn-header form { max-width: 100%; padding: 0; margin:10px 0 0; }
  #cn-header .navigation { display:none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, .5); z-index: 10; }
  #cn-header .navigation nav ul { width: 250px; background: #fff; height: 100vh; overflow: auto; }
  #cn-header .navigation nav li { float: none; display: block; }
  #cn-header .navigation nav a { font-size: 15px; }
  #cn-header .navigation .close { display:block; }
  #cn-main .filter { width: 100%; flex-direction: column; }
  #cn-main .filter .title { margin-bottom:5px; }
  #cn-main .list li { width: 50%; }
  #cn-article .control .ratings { width: 50%; margin: 0; }
  #cn-article .control .views { width: 45%; margin: 0; text-align: right; }
  #cn-article .control .btn { margin: 10px 0 0; }
  #cn-article .comments li { width: 100%; }
  #cn-footer .cats ul li { width:50%; text-align: center; }
}

@media (max-width: 320px){
  #cn-main .heading .open { display:none; }
  #cn-main .filter ul a { font-size: 10px; }
  #cn-main .list li { width: 100%; }
  #cn-footer .cats ul li { width: 100%; }
  #cn-footer .navigation nav li { float: none; display: block; text-align: center; }
  #cn-article .control .btn { font-size:0; }

}