html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary*, *:before, *:after { box-sizing: border-box; } *:focus {outline: none}html,body,body div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,menu,nav,section,time,mark,audio,video,details,summary{margin:0;padding:0;border:0;font-size:100%;font-weight:400;vertical-align:baseline;background:transparent;} article,aside,figure,footer,header,nav,section,details,summary{display:block} html{box-sizing:border-box}*,:before,:after{box-sizing:inherit} img,object,embed{max-width:100%;height:auto;} html{overflow-y:scroll}ul{list-style:none} table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: left; vertical-align: top; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; }
body { background-color: #333; padding-top: 100px; }
body, select, textarea, input { color: #333; font-family: 'Fira Sans', Helvetica, Arial, sans-serif; font-size: 100%; line-height: normal; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 1.4em; font-family: 'Fira Sans', sans-serif; }
a {color: #111; text-decoration: none;} a:hover { color: #EB0254 }
.leaderboard { text-align: center; margin: 20px auto } .amazon-link { }
header { position: fixed; z-index: 100; top: 0; left: 0; right:0; height: 80px; background: #fff; padding-top: 18px; border-bottom: 1px solid #f6f6f6; box-shadow: 0px 0px 1px rgba(0,0,0,0.1); }
.admin-bar header { top: 32px; }
.headroom { transition: transform 200ms linear; } .headroom--pinned { transform: translateY(0%); box-shadow: 0px 0px 5px rgba(0,0,0,0.25); } .headroom--unpinned { transform: translateY(-100%); } .headroom--top { box-shadow: 0px 0px 1px rgba(0,0,0,0.1); }
.logo { float:left; margin: 0; padding: 0; }
.nav { float: right; margin-right: 54px; margin-top: 14px; list-style: none; font-size: 15px; }
.nav li { display: inline-block; margin-left: 27px; text-transform: uppercase; letter-spacing: 2px; font-weight: 500; }
.nav li a { color: #777; transition: color 0.2s ease-in-out; }
.nav li a:hover, .nav li a.active { color: #222222; border-bottom: 2px solid #222; padding-bottom: 5px; }
.toggle-search { background: url(http://cdn.wccftech.com/images/search.png) no-repeat center center; background-size: 16px 16px; width: 24px; height: 24px; cursor: pointer; z-index: 100; position: absolute; top: 10px; right: 0px }
.toggle-search.active { background: url(http://cdn.wccftech.com/images/search-close.png) no-repeat center center; background-size: 16px 16px; }
.search-form { position: absolute; top:0; left:0; width: 100%; height: 80px; background: #eee; display:none; }
.search-form form { padding-top: 20px; }
.search-form form input { border: none; width: 100%; line-height: normal; font-size: 18px; padding: 10px 0 10px 35px; background: #eee url(http://cdn.wccftech.com/images/search.png) no-repeat left center; background-size: 16px 16px; }
.search-form form input[type=submit] { visibility: hidden; background: url(http://cdn.wccftech.com/images/search-close.png) no-repeat -9999px -9999px }
.search-box { float: right; width: 250px; }
.search-box input { width: 100%; border: none; padding: 10px 10px 12px 45px; background: #f3f3f3 url(http://cdn.wccftech.com/images/search.png) no-repeat 15px center; font-size: 15px; }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.toggle-search, .search-form form input { background-image: url(http://cdn.wccftech.com/images/search@2x.png) } .toggle-search.active { background-image: url(http://cdn.wccftech.com/images/search-close@2x.png) }
.search-form form input[type=submit] { background: url(http://cdn.wccftech.com/images/search-close@2x.png) no-repeat -9999px -9999px }
}
main { background: #fff; padding: 50px; }
.full-width main { padding: 100px; }
h1 { margin-bottom: 12px; font-size: 30px; font-weight: 500; line-height: 1.3em; }
.featured-posts { position: relative; height: 595px; background-color: #fff; margin: -50px -50px 20px -50px }
.featured { color: #fff; position: absolute; }
.featured:hover { color: #fe6ea1; }
.featured .thumb { width: 100%; height: 172px; background-size: cover; background-position: center center; position: relative; }
.featured-1 .thumb, .featured-2 .thumb { height: 250px }
.featured .text { padding: 12px; background: #000; height: 90px; } .featured-1 .text, .featured-2 .text { height: 80px; }
.featured h2 { font-size: 16px; font-weight: 500; } .featured-1 h2, .featured-2 h2 { font-size: 20px; }
.featured-1 { width: 593px; top: 2px; left: 2px; }
.featured-2 { width: 592px; top: 2px; right: 2px; }
.featured-3 { width: 295px; top: 333px; left: 2px; }
.featured-4 { width: 297px; top: 333px; left: 298px; }
.featured-5 { width: 296px; top: 333px; right: 298px; }
.featured-6 { width: 295px; top: 333px; right: 2px; }
.sticky { margin-bottom: 50px; }
.sticky-wrap { padding-left: 40px; } .sticky section { width: 33.3%; float: left; margin-right: 20px; } .sticky section:first-child { margin-left: -40px; } .sticky section:last-child { margin-right: 0; width: 33.4%; }
.sticky h2 { border-bottom: 1px solid #ddd; padding-top: 10px; line-height: 0.1em; text-transform: uppercase; font-size: 16px; margin-bottom: 19px; letter-spacing: 1px; }
.sticky h2 span { font-weight: 500; background:#fff; padding:0 10px 0 0; }
.sticky h2 a:hover { color: #EB0254 }
.sticky li { margin-bottom: 20px } .sticky li a:hover { color: #fd2370; }
.sticky li:last-child { margin-bottom: 0; }
.sticky li h3 { font-size: 15px; margin-bottom: 5px; }
.sticky .meta { font-size: 13px; color: #ababad; }
.sticky .meta a { color: #EB0254; }
.sticky li.first { background: #000; padding: 10px; }
.sticky li.first a { color: #fff; } .sticky li.first a:hover { color: #fe6ea1 }
.sticky li.first .thumb { height: 200px; line-height: 200px; text-align:center; background-size: cover; background-position: center center; margin: -10px -10px 10px -10px }
.aside-event { background: #f2f2f2; padding: 20px 25px 25px 25px; margin-bottom: 25px; font-size: 90% }
.aside-event h2 { text-transform: uppercase; font-size: 125%; margin: -20px -25px 20px -25px; }
.aside-event h3 { font-weight: 500; }
.aside-event a:hover { color: #EB0254 }
.aside-event li { margin-bottom: 15px; }
.aside-event .meta {font-size: 13px; margin-top: 5px; color: #ababad; margin-bottom: 0; height: auto; } .aside li .meta a { color: #ababad; }
.aside-event .thumb { position: relative; width: 86px; height: 60px; line-height: 60px; cursor: pointer; float: right; margin-left: 10px; background-size: cover; background-position: center center; }
.aside-event .more { background-color: #5682a8; letter-spacing: 1px; text-transform: uppercase; font-size: 12px; color: #fff; width: 100%; display: block; text-align: center; padding: 8px; border: 2px solid #f2f2f2; -webkit-box-shadow: 0px 0px 0px 1px #5682a8; -moz-box-shadow: 0px 0px 0px 1px #5682a8; box-shadow: 0px 0px 0px 1px #5682a8; transition: all 0.25s ease; }
.aside-event .more:hover { color:#fff; background-color: #648fb3; }
.aside-single { border:1px solid #f6f6f6; position: relative; background-size: cover; background-position: center center; background-repeat: no-repeat; margin-bottom: 25px; }
.aside-single .text { position: absolute; top:0; left: 0; background: rgba(255,255,255,0.9); padding: 25px; width: 370px; }
.aside-single .topics { text-transform: uppercase; font-size: 12px; margin-bottom: 5px; } .aside-single .topics a { color: #EB0254 }
.aside-single h3 { font-weight: 500; font-size: 120%; margin-bottom: 7px; line-height: 1.5em; }
.aside-single h3 a { display: block }
.aside-single .meta { font-size: 13px; height: auto; margin-bottom: 0; color: #ababad; }
.aside-single .meta a { color: #848487; position: relative; z-index: 2; } .aside-single .meta a:hover { color: #EB0254 }
.aside-single .meta .shares { cursor: pointer; padding: 9px 10px 7px 10px; position: relative; z-index: 2; }
.aside-single .meta .shares:hover { background:#4A565F; }
.sub-head { border-bottom: 1px solid black; line-height: 1; text-transform: uppercase; font-size: 13px; letter-spacing: 1px; margin-bottom: 20px; }
.sub-head span { display: inline-block; background: black; padding: 17px 20px 15px 20px; margin-bottom: -1px; color: #fff; min-width: 130px; text-align: center; }
.sub-head span a { color: #fff } .sub-head span a:hover { color: #fe6ea1 }
.content { width: 740px; float: left; background: #fff; }
.full-width .content { padding: 80px; float: none; width: 100%; }
.post { border-top: 1px solid #eee; min-height: 135px; margin-bottom: 25px; position: relative; }
.post .overlay { position: absolute; width: 100%; height: 100%; z-index: 1; display: block }
.post:hover h3 a { color: #EB0254 }
.post .thumb { position: relative; width: 240px; height: 135px; line-height: 135px; cursor: pointer; float: left; background-size: cover; background-position: center center; }
.post .text { padding-left: 255px; padding-top: 11px; }
.post .topics { text-transform: uppercase; font-size: 12px; margin-bottom: 5px;}
.post h2, .post h3 { font-weight: 500; font-size: 110%; margin-bottom: 7px; line-height: 1.5em; }
.post .meta, .post .actions { font-size: 13px; height: auto; margin-bottom: 0; color: #ababad; }
.post .meta a { color: #848487; position: relative; z-index: 2; } .post .meta a:hover { color: #EB0254 }
.meta .shares { cursor: pointer; padding: 9px 10px 7px 10px; position: relative; z-index: 2; }
.meta .shares:hover { background:#4A565F; }
.subscribe { border-top: 1px solid #eee; min-height: 135px; margin-bottom: 25px; position: relative; padding: 30px 0 20px 0; text-align: center }
.subscribe h3 { font-weight: 500; font-size: 140%; margin-bottom: 15px; line-height: 1.5em; }
.subscribe p { font-size: 14px; margin-bottom: 10px; color: #ababad; }
.subscribe form input { font-size: 13px; border:none; padding: 10px; }
.subscribe form input[type=email], .subscribe form input[type=email]:invalid { width: 43%; border:1px solid #e6e6e6 }
.subscribe form input[type=email]:focus, .subscribe form input[type=email]:valid { border:1px solid #22a7f0; }
.subscribe form input[type=submit] { cursor: pointer; width: 20%; border:1px solid #22a7f0; background: #22a7f0; color: #fff; }
.subscribe form input[type=submit]:hover { background: #109ce9; border:1px solid #109ce9; }
.navigation { width: 100%; text-align: center; }
.navigation a { background: #EB0254; color: #FFF; padding: 0 20px; display: block; position: relative; cursor: pointer; text-transform: uppercase; font-size: 80%; line-height: 45px; letter-spacing: 1px; }
.navigation a:hover { background: #c40246 } .loadmore { width: 100%; } .nextpage { float: right } .prevpage { float: left }
.sidebar { width: 300px; float: right; }
.sidebar .sub-head { margin-bottom: 10px; }
.sidebar section { margin-bottom: 75px; }
.popular-posts { }
.popular-posts li { z-index: 0; margin-bottom: 10px; position: relative; padding: 12px 10px 8px 12px; }
.popular-posts li a { color: #000; font-size: 15px; line-height: 1.4; }
.popular-posts li span { z-index: -1; position: absolute; font-weight: 500; bottom:-5px; right:-1px; font-size: 32px; line-height: 1; color:#fff; opacity: 0.25; }
.popular-post-1 { background: linear-gradient(to right, rgba(223, 56, 46, 0.1) 0%, #DF382E 100%); } .popular-post-1:hover { background: linear-gradient(to right, rgba(223, 56, 46, 0.1) 0%, #DF382E 75%); }
.popular-post-2 { background: linear-gradient(to right, rgba(227, 77, 51, 0.1) 0%, #E34D33 100%); } .popular-post-2:hover { background: linear-gradient(to right, rgba(227, 77, 51, 0.1) 0%, #E34D33 75%); }
.popular-post-3 { background: linear-gradient(to right, rgba(231, 98, 56, 0.1) 0%, #E76238 100%); } .popular-post-3:hover { background: linear-gradient(to right, rgba(231, 98, 56, 0.1) 0%, #E76238 75%); }
.popular-post-4 { background: linear-gradient(to right, rgba(233, 109, 59, 0.1) 0%, #E96D3B 100%); } .popular-post-4:hover { background: linear-gradient(to right, rgba(233, 109, 59, 0.1) 0%, #E96D3B 75%); }
.popular-post-5 { background: linear-gradient(to right, rgba(237, 130, 64, 0.1) 0%, #ED8240 100%); } .popular-post-5:hover { background: linear-gradient(to right, rgba(237, 130, 64, 0.1) 0%, #ED8240 75%); }
.popular-post-6 { background: linear-gradient(to right, rgba(239, 141, 66, 0.1) 0%, #EF8D42 100%); } .popular-post-6:hover { background: linear-gradient(to right, rgba(239, 141, 66, 0.1) 0%, #EF8D42 75%); }
.popular-post-7 { background: linear-gradient(to right, rgba(243, 162, 72, 0.1) 0%, #F3A248 100%); } .popular-post-7:hover { background: linear-gradient(to right, rgba(243, 162, 72, 0.1) 0%, #F3A248 75%); }
.trending-posts { counter-reset: my-badass-counter; }
.trending-posts ul { padding-top: 10px; }
.trending-posts li { border-bottom: 1px solid #eee; padding-left: 50px; position: relative; margin-bottom: 10px; line-height: 1.4em; padding-bottom: 10px; min-height: 50px; }
.trending-posts li:before { content: counter(my-badass-counter) "."; counter-increment: my-badass-counter; position: absolute; left: 5px; top: 0; font-style: italic; font-size: 30px; line-height: 30px; }
.trending-posts li a { font-size: 14px; display: block; }
.trending-posts li a:hover { color: #c40246; }
.latest-posts { }
.latest-posts li { margin-bottom: 12px; border-top: 1px solid #eee; }
.latest-posts li .thumb { width: 100px; height: 75px; float: right; background-repeat: no-repeat; background-size: cover; margin-top: -1px; margin-left: 5px; }
.latest-posts li h4 { font-size: 14px; padding-top: 6px; }
.latest-posts li.first { background: #111; border-top: none; }
.latest-posts li.first h4 { padding: 10px 10px 10px 12px; }
.latest-posts li.first a { color: #fff; } .latest-posts li.first a:hover { color: #fe6ea1 }
.latest-posts li.first .thumb { float:none; width: 100%; height: 173px; background-size: cover; background-position: center center; margin-left: 0;}
.latest-posts li.first .text { background: #000; padding: 10px 10px 10px 12px; }
.youtube-channel { color: #eee; background: #222; padding: 50px; margin: 50px -50px -50px -50px; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFF), to(#000)); background-image: -webkit-linear-gradient(#FFF, #000); background-image: -moz-linear-gradient(#FFF, #000), -moz-linear-gradient(#FFF, #000) ; background-image: -o-linear-gradient(#FFF, #000), -o-linear-gradient(#FFF, #000); background-image: linear-gradient(#FFF, #000), linear-gradient(#FFF, #000); -moz-background-size:2px 100%; background-size:2px 100%; background-position:0 0, 100% 0;background-repeat:no-repeat; }
.youtube-content { width: 740px; height: 416px; float: left; }
.youtube-player-wrap{background-color:#000;margin-bottom:30px;position:relative;padding-top:56.25%;overflow:hidden;cursor:pointer;background-position:center center; background-size: cover}
.youtube-player-wrap .play-button{width:90px;height:60px;background-color:#333;box-shadow:0 0 30px rgba(0,0,0,0.6);z-index:1;opacity:.8;border-radius:6px;cursor:pointer}
.youtube-player-wrap:hover .play-button, .play-button:hover {background-color:#c40246}
.youtube-player-wrap .play-button:before{content:"";border-style:solid;border-width:15px 0 15px 26px;border-color:transparent transparent transparent #fff}
.youtube-player-wrap iframe,.youtube-player-wrap .play-button,.youtube-player-wrap .play-button:before{position:absolute}
.youtube-player-wrap .play-button,.youtube-player-wrap .play-button:before{top:50%;left:50%;transform:translate3d(-50%,-50%,0)}
.youtube-player-wrap iframe{height:100%;width:100%;top:0;left:0}
.youtube-sidebar { width: 300px; float: right; height: 416px; }
.youtube-sidebar .sub-head { margin-bottom: 10px; border-color: #555; }
.youtube-sidebar .sub-head span { background: #555; }
.youtube-button { float: right; color: white; background-color: #e62117; margin-top: 8px; padding: 4px 10px 5px 10px; font-size: 13px; line-height: 1; border-radius: 3px; cursor: pointer }
.youtube-button i { font-size: 14px; vertical-align: bottom; }
.youtube-button:hover { background-color: #cc181e }
.youtube-thumb { padding: 10px; cursor: pointer }
.youtube-thumb img { float: left; width: 86px; height: 60px; margin-right: 10px; }
.youtube-thumb h4 { font-size: 14px; }
.youtube-thumb span { font-size: 12px; color: #aaa; font-style: italic }
.youtube-thumb:active, .youtube-thumb.active, .youtube-thumb.active:hover { color:white; background-color: #666 }
.youtube-thumb:hover { color:white; background-color: #444 }
.youtube-sidebar-content { overflow-y: scroll; height: 361px; } .youtube-sidebar-content::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 6px; background-color: #444; } .youtube-sidebar-content::-webkit-scrollbar { width: 8px; background-color: #22262f; } .youtube-sidebar-content::-webkit-scrollbar-thumb { border-radius: 6px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #999; }
footer { font-size: 80%; }
footer section { padding: 50px 50px 40px 50px; background: #000; }
.footer-1, .footer-2, .footer-3, .footer-4 { width: 25%; float: left }
.footer-5 { float:left; clear: both; overflow: hidden; margin-top: 50px; margin-bottom: 50px; width: 100%; border-top:2px solid white; display: inline; padding-top: 50px; font-weight: 500; padding-left: 700px; margin-left: -700px;}
.footer-4 p { color: #a5adbe; margin: 0 0 20px 0; }
.footer-4 .twitter a { color:#1da1f2 } .footer-4 .facebook a { color:#4c70ba } .footer-4 .youtube a { color:#cd201f }
footer h3 { text-transform: uppercase; font-size: 14px; font-weight: normal; margin-bottom: 20px; color: #fff; }
footer li { margin-bottom: 10px; }
footer a { color:#fe6ea1; } footer a:hover { color:#EB0254; }
footer form { margin-bottom: 10px; text-align: center; }
footer form input { font-size: 13px; border:none; padding: 10px; }
footer form input[type=email] { width: 70%; }
footer form input[type=submit] { width: 30%; background: #22a7f0; color: #fff; }
.copyright { clear: both; padding-top: 20px; height: 65px; }
.copyright .text { margin-left: 20px; color: #fff; line-height: 54px; }
.wrap { width: 1190px; margin: 0 auto; position: relative; }
.banner-ad { width: 728px; height: 90px; margin: 0 auto 20px auto; }
.sidebar-ad { min-height: 250px; margin-bottom: 75px; }
.content-ad { text-align: center; margin-bottom: 15px; } .content-ad:before { color:#888; font-size:8px; text-align:center; content: 'ADVERTISEMENT'; } .content-ad div { width: 300px; height: 250px; margin: auto; }
.twitter-tweet { margin-left: auto; margin-right: auto; }
.clearfix:after{content:" ";display:block;clear:both}.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } /* start commented backslash hack \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */
.float-left { float: left } .float-right { float: right }
.clamp1 { display : block; display : -webkit-box; -webkit-box-orient : vertical; position : relative; -webkit-line-clamp : 1; line-height : 1.4em; height : calc(1em * 1.4 * 1); overflow : hidden; text-overflow : ellipsis; padding : 0 !important; }
.clamp2 { display : block; display : -webkit-box; -webkit-box-orient : vertical; position : relative; -webkit-line-clamp : 2; line-height : 1.4em; height : calc(1em * 1.4 * 2); overflow : hidden; text-overflow : ellipsis; padding : 0 !important; }
.clamp3 { display : block; display : -webkit-box; -webkit-box-orient : vertical; position : relative; -webkit-line-clamp : 3; line-height : 1.4em; height : calc(1em * 1.4 * 3); overflow : hidden; text-overflow : ellipsis; padding : 0 !important; }
/*.clamp1:after, .clamp2:after, .clamp3:after { content : '...'; text-align : right; bottom : 0; right : 0; width : 25%; display : block; position : absolute; height : calc(1em * 1.4); background : linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 75%); }*/
@supports (-webkit-line-clamp: 1) { .clamp1:after, .clamp2:after, .clamp3:after { display : none !important; } }
[class^="icon-"]:before, [class*=" icon-"]:before {font-family: "fontello";font-style: normal;font-weight: normal;speak: none;display: inline-block;text-decoration: inherit;width: 1em;text-align: center;font-variant: normal;text-transform: none;line-height: 1em;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} .icon-clock:before { content: '\e800'; } .icon-share:before { content: '\e801'; } .icon-comments:before { content: '\e802'; } .icon-chat:before { content: '\e803'; } .icon-arrow-up:before { content: '\e804'; } .icon-arrow-down:before { content: '\e805'; } .icon-link-ext:before { content: '\f08e'; } .icon-youtube:before { content: '\f16a'; } .icon-reddit:before { content: '\f281'; } .icon-twitter:before { content: '\f309'; } .icon-twitter-circled:before { content: '\f30a'; } .icon-facebook:before { content: '\f30c'; } .icon-facebook-circled:before { content: '\f30d'; }
.author-meta { margin-bottom: 25px; font-size: 14px; margin-top: -29px; }
.author-meta .avatar { float: left; width: 150px; margin-top: -40px; margin-right: 10px; }
.author-meta .avatar img { width: 150px; height: 150px; border-radius: 50%; border: 5px solid #fff; }
.author-meta h1 { margin-bottom: 12px; font-size: 28px; font-weight: 500 }
.author-meta .social { color: #999; margin-bottom: 20px; }
.author-meta .social a { color: #999 } .author-meta-social a.twitter { olor:#1da1f2} .author-meta-social a.facebook { olor:#4c70ba}
.author-bio { color:#555; }
.sohail-share { position: absolute; text-align: center; left:0; bottom: 28px; height: 84px; background: #4A565F; display: none; z-index: 2000; }
.sohail-share i { display: inline-block; text-align: center; padding: 9px 14px 7px 14px; width: 100%; height: 28px; background: #4A565F; }
.sohail-share i:hover { background: #323A40; }
.score { position: absolute; bottom: 12px; left:12px; box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.25); text-align: center; width: 50px; height: 50px; line-height: 50px; border-radius: 50%; display: inline-block }
.score span { width: 40px; height: 40px; font-size: 16px; line-height: 40px; text-align: center; background: rgba(0,0,0,0.85); border-radius: 50%; display: inline-block; color: #fff; }
.score-0 { background-image: linear-gradient(90deg, #555 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(90deg , #FFD600 50%, #FFF 50%, #555);}
.score-5 { background-image: linear-gradient(90deg, #555 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(108deg, #FFD600 50%, #555 50%, #555);}
.score-10 { background-image: linear-gradient(90deg, #555 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(126deg, #FFD600 50%, #555 50%, #555);}
.score-15 { background-image: linear-gradient(90deg, #555 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(144deg, #FFD600 50%, #555 50%, #555);}
.score-20 { background-image: linear-gradient(90deg, #555 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(162deg, #FFD600 50%, #555 50%, #555);}
.score-25 { background-image: linear-gradient(90deg, #555 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(180deg, #FFD600 50%, #555 50%, #555);}
.score-30 { background-image: linear-gradient(90deg, #555 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(198deg, #FFD600 50%, #555 50%, #555);}
.score-35 { background-image: linear-gradient(90deg, #555 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(216deg, #FFD600 50%, #555 50%, #555);}
.score-40 { background-image: linear-gradient(90deg, #555 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(234deg, #FFD600 50%, #555 50%, #555);}
.score-45 { background-image: linear-gradient(90deg, #555 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(252deg, #FFD600 50%, #555 50%, #555);}
.score-50 { background-image: linear-gradient(-90deg, #FFAB00 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #FFAB00 50%, #555 50%, #555);}
.score-55 { background-image: linear-gradient(-72deg, #FFAB00 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #FFAB00 50%, #555 50%, #555);}
.score-60 { background-image: linear-gradient(-54deg, #FFAB00 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #FFAB00 50%, #555 50%, #555);}
.score-65 { background-image: linear-gradient(-36deg, #FFAB00 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #FFAB00 50%, #555 50%, #555);}
.score-70 { background-image: linear-gradient(-18deg, #FF6D00 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #FF6D00 50%, #555 50%, #555);}
.score-75 { background-image: linear-gradient(0deg, #FF6D00 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #FF6D00 50%, #555 50%, #555);}
.score-80 { background-image: linear-gradient(18deg, #FF6D00 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #FF6D00 50%, #555 50%, #555);}
.score-85 { background-image: linear-gradient(36deg, #DD2C00 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #DD2C00 50%, #555 50%, #555);}
.score-90 { background-image: linear-gradient(54deg, #DD2C00 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #DD2C00 50%, #555 50%, #555);}
.score-95 { background-image: linear-gradient(72deg, #DD2C00 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #DD2C00 50%, #555 50%, #555);}
.score-100{ background-image: linear-gradient(90deg, #DD2C00 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #DD2C00 50%, #555 50%, #555);}
@media (max-width:1230px) {
body { background-color: #fff; }
.wrap { width: 100%; }
header { padding: 18px 20px 0 20px; }
.nav li:nth-child(n+6) { display: none}
main { padding: 0 20px; }
.content { width: calc(100% - 340px); }
.sidebar { width: 300px; }
.youtube-channel { padding: 20px 50px 20px 50px }
.youtube-content { width: calc(100% - 360px) }
.featured-posts { height: 525px; margin: 0; margin-bottom: 50px; }
.featured-1 .thumb, .featured-2 .thumb { height: 172px }
.featured-1 h2, .featured-2 h2 { font-size: 16px; }
.featured-1 .text, .featured-2 .text { height: 90px; }
.featured-1 { width: 33.33%; top:0; left:0; border-right: 1px solid #fff; }
.featured-2 { width: 33.33%; top:0; left:33.34%; right:auto; border-right: 1px solid #fff; }
.featured-3 { width: 33.34%; top:0; left:66.7%; right:auto; }
.featured-4 { width: 33.33%; top:263px; left:0; border-right: 1px solid #fff; }
.featured-5 { width: 33.33%; top:263px; left:33.34%; right: auto; border-right: 1px solid #fff; }
.featured-6 { width: 33.34%; top:263px; left:66.7%;right: auto; }
.post { min-height: 112px; margin-bottom: 15px; }
.post .thumb { width: 200px; height: 112px; }
.post .text { padding-left: 210px; padding-top: 11px;}
.post h2, .post h3 { font-size: 100% }
.post .thumb img { width: 200px; height: 112px; }
.latest-posts li .thumb { width: 86px; height: 60px; }
}
@media (max-width:1024px) {
.nav li:nth-child(n+4) { display: none }
.content { width: 100%}
.sidebar { display: none}
.youtube-channel { display: none }
}
@media (max-width:767px) {
.nav { display: none }
.featured-posts { display: none }
.sticky { display: none }
.content { width: 100%}
.sidebar { display: none}
.post { min-height: 100px; margin-bottom: 15px; }
.post .thumb { width: 100px; height: 56px; }
.post .text { padding-left: 110px; padding-top: 10px;}
.post .thumb img { width: 100px; height: 56px; }
}