﻿@media only screen and (min-width:920px){
body.category .header{background-color:var(--color)}
body.category.dark-mode .header{background-color:#052a51}
body.category .header .bold-btn{color:var(--color);background-color:#fff}
body.category .header .logo{filter:grayscale(1) brightness(10)}
body.category .header .rt-menu>li.link-learning>.link,body.category .header .rt-menu>li:hover>.link,body.category .header .rt-menu>li>.link:hover,body.category .header .rt-menu>li>.link.active{color:#fff !important}
body.category .header .rt-menu>li.link-learning>.link::after{opacity:1;visibility:visible;content:"";position:absolute;bottom:-13px;height:5px;right:15px;width:calc(100% - 30px);background-color:#fff;border-radius:8px 8px 0 0}
body.category .header .rt-menu>li>.link,body.category .header .btn,body.category .header .search .icon{color:rgba(255, 255, 255, 0.7)}
body.category .header .titr{color:rgba(255, 255, 255, 0.95)}
body.category .header .btn .icon{filter: brightness(1000);opacity:.8}
body.category .header .search .text,body.category .header .btn:hover,body.category .header .btn.dropdown-toggle.active{color:#fff;border-color:rgba(255, 255, 255, 0.1);background-color:rgba(255, 255, 255, 0.2)}
body.category .header .search .text:focus{border-color:rgba(255, 255, 255, 0.1);background-color:rgba(255, 255, 255, 0.3)}
body.category .header .bold-btn:hover{opacity:.95}
body.tag .header{background-color:var(--color)}
body.tag.dark-mode .header{background-color:#052a51}
body.tag .header .bold-btn{color:var(--color);background-color:#fff}
body.tag .header .logo{filter:grayscale(1) brightness(10)}
body.tag .header .rt-menu>li.link-learning>.link,body.tag .header .rt-menu>li:hover>.link,body.tag .header .rt-menu>li>.link:hover,body.tag .header .rt-menu>li>.link.active{color:#fff !important}
body.tag .header .rt-menu>li.link-learning>.link::after{opacity:1;visibility:visible;content:"";position:absolute;bottom:-13px;height:5px;right:15px;width:calc(100% - 30px);background-color:#fff;border-radius:8px 8px 0 0}
body.tag .header .rt-menu>li>.link,body.tag .header .btn,body.tag .header .search .icon{color:rgba(255, 255, 255, 0.7)}
body.tag .header .titr{color:rgba(255, 255, 255, 0.95)}
body.tag .header .btn .icon{filter: brightness(1000);opacity:.8}
body.tag .header .search .text,body.tag .header .btn:hover,body.tag .header .btn.dropdown-toggle.active{color:#fff;border-color:rgba(255, 255, 255, 0.1);background-color:rgba(255, 255, 255, 0.2)}
body.tag .header .search .text:focus{border-color:rgba(255, 255, 255, 0.1);background-color:rgba(255, 255, 255, 0.3)}
body.tag .header .bold-btn:hover{opacity:.95}
}





.top-boxs{width:calc(100% - 20px);margin:0 10px 40px;padding:20px}
.top-boxs .big{width:20%;border-left:1px #eff0f1 solid;padding:0 20px}
.top-boxs .big:last-child{border-left:0}
.top-boxs .big .icon{width:38px;height:38px;margin-top:2px}
.top-boxs .big .inside{width:calc(100% - 50px);padding:8px 0}
.top-boxs .big.active{filter:grayscale(0) !important;opacity:1 !important}
.top-boxs ul{display:none;border-top:1px #eff0f1 solid;margin-top:20px;padding-top:15px}
.top-boxs ul li{width:25%}
.top-boxs ul li>a{padding:10px 15px;margin:3px 0}
.top-boxs ul li>a:before{content:"";width:7px;height:7px;background-color:var(--color);border-radius:50%;margin-left:9px;display:inline-block;opacity:.4}
.top-boxs ul li.active>a{color:var(--color);font-weight:bold}
.top-boxs.active-plugins ul.its-plugins,.top-boxs.active-themes ul.its-themes,.top-boxs.active-scripts ul.its-scripts,.top-boxs.active-others ul.its-others,.top-boxs.active-blog ul.its-blog{display:block}
.top-boxs.active-plugins .big,.top-boxs.active-themes .big,.top-boxs.active-scripts .big,.top-boxs.active-others .big,.top-boxs.active-blog .big{filter:grayscale(1);opacity:.5}
.top-boxs.active-plugins .big.link-plugins,.top-boxs.active-themes .big.link-themes,.top-boxs.active-scripts .big.link-scripts,.top-boxs.active-others .big.link-others,.top-boxs.active-blog .big.link-blog{filter:grayscale(0);opacity:1}


.pagination{width:calc(100% - 20px);float:right;padding:10px;border-radius:10px;font-size:16px;margin:20px 10px 0}
.pagination a,.pagination span{margin:1px 5px;background-color:#fff;padding:6px 15px;display:inline-block;border-radius:5px;color:#444}
.pagination span.current{color:#fff;background-color:var(--color)}
.pagination .pages{float:left;background:none;opacity:.7;font-size:14px;margin-top:2px;color:#fff}



.rightheme{padding:45px 0}
.rightheme .titr{padding:0 10px 12px}
.rightheme .mini-p{width:calc(25% - 20px);margin:10px}
.rightheme .mini-post{width:calc(33.33% - 20px);margin:10px}
.rightheme .mini-post .pic{height:200px}


.bottom-side{padding:50px 0;background-color:rgba(0, 0, 0, 0.03)}
.bottom-side .main{padding:0 10px}


.faqs{width:calc(40% - 30px)}
.faqs ul.accordion>li{margin-bottom:20px}
.faqs ul.accordion>li:last-child{margin-bottom:0}
.faqs ul.accordion>li>.submenu{display:none;padding:10px 25px;border-top:1px #ddd solid;line-height:2.5;text-align:justify}
.faqs ul.accordion>li>.submenu ol,.faqs ul.accordion>li>.submenu ul{display:block;padding:15px 0}
.faqs ul.accordion>li>.submenu li{padding:5px 0;list-style:disc;list-style-position:inside !important}
.faqs ul.accordion>li>.link{box-shadow: 0 5px 30px rgba(70,72,77,.05);padding:15px 25px}
.faqs ul.accordion>li>.link>span{width:calc(100% - 20px);line-height:1.8}
.faqs ul.accordion>li>.link i{font-size:24px;opacity:0.5}
.faqs ul.accordion>li.open>.link i{transform:rotate(180deg)}
.faqs ul.accordion>li.open>.link,.faqs ul.accordion>li>.link:hover{color:var(--color)}



.text-box{padding:20px 40px;width:60%}
.text-box .rt-matn{height:402px}
.text-box.active .rt-matn{height:auto !important}
.text-box #extend-btn{bottom:19px;right:0;padding:70px 10px 10px;background:linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(255, 255, 255, 0.7),#fff);border:0;z-index:100}
.text-box.active #extend-btn i{transform:rotate(180deg)}
.text-box.active #extend-btn{padding:30px 10px 10px;bottom:0}


.top-boxs ul li>a:hover,.pagination a:hover{color:var(--color)}
.top-boxs .big:hover{opacity:.8}



body.search .rightheme .mini-post,body.search .rightheme .mini-p{width:calc(25% - 20px);height:370px}
body.search .mini-post .inside .desc{display:none}

body.search .rightheme button:hover{opacity:.7}

body.dark-mode .top-boxs ul,body.dark-mode .top-boxs .big,body.dark-mode .faqs ul.accordion>li>.submenu{border-color:rgba(255, 255, 255, 0.03)}
body.dark-mode .text-box #extend-btn{background:linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(29, 31, 35, 0.7),#1d1f23)}



@media only screen and (max-width:920px){
.rightheme{padding:30px 0}
.rightheme .titr{font-size:16px}
.top-boxs{width:calc(100% + 24px);margin:-30px -12px 30px 0;border-radius:0;box-shadow:none}
.rightheme .mini-p, .rightheme .mini-post{width:calc(25% - 12px);margin:6px}
.pagination{width:calc(100% - 12px);margin:15px 6px 0;font-size:14px}
.top-boxs{padding:15px}
.top-boxs ul li{width:33.33%;font-size:13px}
.top-boxs .inter{-ms-overflow-style:none;scrollbar-width:none;display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;width:calc(100% + 30px);margin-right:-15px}
.top-boxs .big{margin:5px 12px 0 0 !important;width:170px !important;flex:0 0 auto}
.bottom-side,.top-boxs .inter::-webkit-scrollbar{display:none}
.top-boxs .big .rt-15{font-size:14px}
.rightheme .mini-post .pic{height:100px}
body.search .rightheme .mini-post,body.search .rightheme .mini-p{height:177px}
.rightheme .mini-post .pic{height:70px}
}
@media only screen and (max-width:700px){
.rightheme .mini-p, .rightheme .mini-post,body.search .rightheme .mini-post,body.search .rightheme .mini-p{width:calc(33.33% - 12px)}
}
@media only screen and (max-width:570px){
.top-boxs ul li{width:50%}
.top-boxs ul li > a{font-size:12px;padding:6px 12px}
}
@media only screen and (max-width:490px){
.rightheme .mini-p, .rightheme .mini-post,body.search .rightheme .mini-post,body.search .rightheme .mini-p{width:calc(50% - 12px)}
}