/* 
Theme Name: Legible
*/
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul, dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span, strong, sub, sup, tt, var, legend, fieldset { margin: 0; padding: 0; } 

:focus::-webkit-input-placeholder { opacity:0; } 
:focus::-moz-placeholder { opacity:0; } 
:focus:-moz-placeholder { opacity:0; } 
:focus:-ms-input-placeholder { opacity:0; } 
::-webkit-input-placeholder { color:#A4A2A0; opacity:1; } 
::-moz-placeholder { color:#A4A2A0; opacity:1; } 
:-moz-placeholder { color:#A4A2A0; opacity:1; } 
:-ms-input-placeholder { color:#A4A2A0; opacity:1; } 

body { background: #F7F7F7; color: #1D2746; font-family: Roboto, Open-Sans, Tahoma, Arial, Verdana; font-size: 100%; }  
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }  
main { width: 100%; margin: 0 auto; overflow: hidden;}  
nav { background: #fafafa; box-shadow: 0px 5px 50px 0 rgba(0,0,0,.15); width: 100%; position: sticky; top: 0; z-index: 100; }  

a { transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; } 
a:hover { transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; } 
b,strong { font-weight: bold;} 

/* disclaimer start */
.award { width: 96%; font-size: 65%; cursor: pointer; background: #ECECEC; color: #1D2939; position: relative; padding: 10px 2%; margin: 0 auto; text-align: center; display: block; overflow: hidden; } 
.award p { display: inline; font-size: 14px; line-height: 1.5; } 
.award img { display: inline; margin: 0 5px; } 
/* disclaimer end */

.nav { max-width: 1000px; margin: 0 auto; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; position: relative;  }  
.nav .nav-logo { background: url(images/nav-logo.png) no-repeat; width: 200px; height: 32px; transition: 0.25s ease-in-out; }  
.menu { display: flex; list-style: none; }  
.menu li a { color: #0F2742; text-decoration: none; padding: 10px; display: block; transition: color .25s ease-in-out; }  
.menu li a:hover { color: #2764A7; box-shadow: inset 0px -2px 0px 0px rgba(39,100,167,.50); transition: 0.25s ease-in-out;}  
.menu li a.search { opacity: 1; box-shadow: none; background: url(images/search.png) center center no-repeat; filter: grayscale(100%); height: 24px; width: 24px; padding: 8px; display: block; transition: 0.3s; border-radius: 21px; }
.menu li a.search:hover { opacity: 1; -webkit-box-shadow: 0; filter: grayscale(0); transition: 0.3s; }
.menu-toggle { display: none; cursor: pointer; margin: 9px 0; width: 32px; height: 22px; position: relative; z-index: 101; }  
.menu-toggle span { display: block; position: absolute; height: 4px; width: 100%; background: #555555; border-radius: 3px; opacity: 1; left: 0; transform: rotate(0deg); transition: all .25s ease-in-out; }  
.menu-toggle span:nth-child(1) { top: 0; }  
.menu-toggle span:nth-child(2), .menu-toggle span:nth-child(3) { top: 10px; }  
.menu-toggle span:nth-child(4) { top: 20px; }  
.menu-toggle.active span:nth-child(1), .menu-toggle.active span:nth-child(4) { top: 10px; width: 0%; left: 50%; }  
.menu-toggle.active span:nth-child(2) { transform: rotate(45deg); }  
.menu-toggle.active span:nth-child(3) { transform: rotate(-45deg); }  

.breadcrumb { font-size: 90%; color: #555; margin: 2%; padding: 0; line-height: 1.5;}
.breadcrumb a {text-decoration: none; background: none; padding: 5px 0; -webkit-box-shadow: none;}
.breadcrumb a span {-webkit-box-shadow: 0px -2px 0px 0px rgba(39,100,167,.25) inset; text-decoration: none; padding: 0 0 2px 0;}
.breadcrumb a span:hover {-webkit-box-shadow: 0px -2px 0px 0px rgba(39,100,167,.50) inset;}
.breadcrumb a:hover { -webkit-box-shadow: none; color: #669EDB;}
.breadcrumb span:last-child { color: #555; }
.breadcrumb .separator { margin: 0 5px; color: #555;}

.toc-toggle { font-weight: normal; font-size: 110%; display: flex; align-items: center; justify-content: space-between; color: #444; background-color: #f9f9f9; border-bottom: 1px solid #ddd; cursor: pointer; transition: all 0.3s ease; margin: 2%; padding: 10px 2%; width: 92%; }
.toc-toggle:hover { background-color: #f1f1f1; border-color: #ccc; }
.toc-toggle .icon {font-size: 110%; color: #333; transition: transform 0.3s ease;}
.toc-toggle.active .icon {transform: rotate(45deg); }
.toc-list { display: none; list-style-type: none; font-size: 95%; margin: 0 4% 1% 4%; padding: 0;}
ul.toc-list {background: none; margin: 0; padding: 0 4% 1% 4%; display: block;}
.toc-list li {margin: 0 0 5px 0; background: none; }
.toc-list li a { text-decoration: none; background: none; padding: 0;}
.toc-list li a:hover {}
.toc-list li.toc-level-2 { }
.toc-list li.toc-level-3 { padding-left: 20px; }
.toc-list li.toc-level-4 {padding-left: 40px;}

.sort { width: 23%; height: 220px; display: block; margin: 2% 0 0 2%; float: left; overflow: hidden; padding: 0;} 
.post-item { height: 220px; position: relative; background: url(images/img.png); } 
.post-item img { position: absolute; object-fit: cover; width: 100%; height: 220px; border: none !important; box-shadow: none !important; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } 
.post-text { background: no-repeat 50% 50% url(images/play.png); width: 100%; color: #fff; left: 0; bottom: 0; box-shadow: inset 0 -250px 150px -150px rgba(0,0,0,0.8); -webkit-box-shadow: inset 0 -250px 150px -150px rgba(0,0,0,0.8); -moz-box-shadow: inset 0 -250px 150px -150px rgba(0,0,0,0.8); text-shadow: 1px 1px 15px rgba(0,0,0,0.5); height: 250px; position: absolute; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; } 
.post-text:hover { background: no-repeat 50% 50% url(images/play-hover.png) rgba(0,0,0,.25); box-shadow: 0; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; } 
.post-text-bottom { position: absolute; left: 0; bottom: 0; padding: 5%; } 
.post-title { font-size: 110%; font-weight: bold; display: block; margin: 0 0 5px 0; line-height: 1.33; } 
.post-cat { opacity: 0.8; font-size: 80%; display: block; text-shadow: none; margin: 0; float: left;} 
.post-date { opacity: 0.8; font-size: 80%; display: block; text-shadow: none; margin: 0; float: right;} 

.post-item .post-tags { position: absolute; right: 5px; top: 5px; } 
.post-item .post-tags a {font-weight: bold; font-size: 80%; text-transform: uppercase; float: left; text-decoration: none;  color: rgba(0,0,0,0.75); margin: 2px; display: block; padding: 2px 5px; background: rgba(255,255,255,.75); -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.post-item .post-tags a:hover {color: rgba(0,0,0,1); background: rgba(255,255,255,.99); -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; }

p .logo-totalbolshe {margin: 0 2% 2% 0; width: 10%; height: 10%; float: left; border-radius: 50%; shape-outside: circle(50%);}

table { width: 96%; font-size: 90%; border-collapse: collapse; color: #333; background: #f9f9f9; overflow: hidden; margin: 2%; }
th, td { padding: 12px 15px; text-align: left; transition: all 0.3s ease; }
th { background-color: #e0e0e0; font-weight: bold; color: #555; }
table tr:nth-child(even) { background-color: #f0f0f0; }
table td { border-bottom: 1px solid #ddd;  -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; }
table tr:hover { background-color: #fafafa; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; }

main { width: 1000px; margin: 0 auto; padding: 0 0 1% 0; background: #fff; display: block; overflow: hidden; }
article h1, article h2, article h3 { margin: 2%; display: block; overflow: hidden; }
article h1 { font-size: 200%; }
article h2 { font-size: 180%; }
article h3 { font-size: 160%; }
article { width: 100%; margin: 0 auto; display: block; overflow: hidden; }
article p { font-size: 100%; line-height: 1.5; margin: 1% 2%; }
article ol, article ul { font-size: 100%; padding: 10px 20px; margin: 2%; background: #f9f9f9; }
article li { margin: 5px 0 0 15px; line-height: 1.5; }
img { margin: 0 auto 4% auto; overflow: hidden; display: block; width: auto; height: auto; }

section { display: block; overflow: hidden; padding: 0 2% 0 0; width: 98%;}
section h3 { font-size: 130%; margin: 0 2% 0 2%; color: #000; line-height: 1.5; display: block; width:96%;}
article a { color: #279D2F; -webkit-box-shadow: 0px -2px 0px 0px rgba(39,100,167,.25) inset; text-decoration: none; padding: 0 4px 2px 4px; background: #fafafa; }
article a:hover { color: #669EDB; -webkit-box-shadow: 0px -2px 0px 0px rgba(39,100,167,.50) inset; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s;}
article img {width: 100%; display: block; padding: 0; margin: 0 auto; }

.link { color: rgba(0,90,180); -webkit-box-shadow: 0px -2px 0px 0px rgba(0,90,180,.50) inset; text-decoration: none; padding: 0 4px 2px 4px; background: #fafafa; }
.link:hover { color: #279D2F; cursor: pointer; -webkit-box-shadow: 0px -2px 0px 0px rgba(39,157,47,.50) inset; inset; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s;}

.column { font-size: 21px; line-height: 1.5; padding: 0; display: block; color: #bbb; margin: 0 2%; overflow: hidden; text-align:center; } 
.tag-title { color: #777; font-weight: bold; width: 100%; background: #ECECEC; display: block; padding: 5px 15px; text-align: center; text-transform: uppercase; margin: 2% 0 0 0; overflow: hidden; } 
.column span { margin: 2% 1% 1% 1%; display: inline-block; } 
.column span a { color: rgba(0,90,180); -webkit-box-shadow: 0px -2px 0px 0px rgba(0,90,180,.50) inset; text-decoration: none; padding: 0 2px 2px 2px; background: #fafafa; } 
.column span a:hover { color: #279D2F; -webkit-box-shadow: 0px -2px 0px 0px rgba(39,157,47,.50) inset; inset; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s;} 

.pagination { width: 96%; cursor: default; display: block; overflow: hidden; margin: 2% 0 0 0; padding: 2% 2% 0 2%; border-top: 1px solid #F3F1ED; } 
.pagination .current { padding: 5px 10px; margin: 0 1% 1% 0; display: inline-table; float: left; color: #04173E; background: #ECECEC; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } 
.pagination .pages { float: right; padding: 5px 10px; display: inline-block; background: rgba(255, 255, 255, .75); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } 
.pagination a.page-numbers { background: rgba(24,29,85,.80); margin: 0 1% 1% 0; float: left; display: inline-block; padding: 5px 10px; overflow: hidden; color: #fafafa; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; transition: all 0.1s; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; } 
.pagination a.page-numbers:hover { background: rgba(24,29,85,.90); transition: all 0.1s; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; } 
.pagination .dots { display: none; } 

.faq-item {margin-bottom: 10px;}
.faq-question { font-weight: normal; font-size: 110%; display: flex; align-items: center; justify-content: space-between; color: #444; background-color: #f9f9f9; border-bottom: 1px solid #ddd; cursor: pointer; transition: all 0.3s ease; margin: 0 2% 1px 2%; padding: 9px 2%; width: 92%; }
.faq-question:hover { background-color: #f1f1f1; border-color: #ccc; }
.faq-question.active {background-color: #f1f1f1; color: #111;}
.faq-question .icon { 	font-size: 110%; color: #333; transition: transform 0.3s ease;}
.faq-question.active .icon { transform: rotate(45deg); color: #111; }
.faq-answer { display: none; padding: 0 2%; color: #555; line-height: 1.5; }
.faq-answer.open { display: block; animation: fadeIn 0.5s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); }}

footer { width: 1000px; margin: 0 auto; padding: 10px 0 10px 0; background: #ECECEC; display: block; overflow:hidden; }
footer p { font-size: 85%; color: #555; margin: 1% 0; line-height: 1.5; padding: 0 2%; display: inline-block;}
footer ul { font-size: 85%; color: #555; margin: 1% 0; line-height: 1.5; padding: 0 2%; list-style: none; display: inline-block; float: right;}
footer ul li {float: left; display: inline-block; margin: 0 5px 0 0;}
footer p.dis {font-size: 75%; color: #777;}

footer a { color: rgba(24,29,85,.90); -webkit-box-shadow: 0px -2px 0px 0px rgba(24,29,85,.50) inset; text-decoration: none; padding: 0 4px 2px 4px; background: #fafafa; }
footer a:hover { color: #279D2F; -webkit-box-shadow: 0px -2px 0px 0px rgba(39,157,47,.50) inset; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s;}


#scrollToTop { display: none; position: fixed; bottom: 10px; right: 10px; background: rgba(39,100,167,.50); color: #fff; border: none; border-radius: 3px; padding: 10px 20px; font-size: 90%; font-weight: bold; text-transform: uppercase; cursor: pointer; opacity: 0; transition: opacity 0.5s ease; }
#scrollToTop:hover {background: rgba(39,100,167,.75); transition: opacity 0.5s ease; }
#scrollToTop.show { display: block; opacity: 1; }

img.minilogo {height: 16px; width: 16px; display: block; float: left; margin: 2px 10px 0 0; padding: 0; }

@media only screen and (max-width: 1000px) { 
main, footer { max-width: 100%; }
.nav { max-width: 100%; }
.header-info { max-width: 100%;}
}
 
 @media only screen and (max-width: 768px) { 
 .nav { padding: 15px 20px;}  
.menu { position: absolute; top: 100%; left: 0; width: 100%; background: #f8f8f8; flex-direction: column; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.menu.active { max-height: 500px; }
.menu li { text-align: center; border-top: 1px solid #eee; background: #fff; }
.menu li a { color: #301B25; text-decoration: none; padding: 15px; display: block; transition: color 0.3s; }
.menu li a:hover { box-shadow: none; }
.menu li a.search { border-radius: 0; width: 100%; padding: 13px 0; border-bottom: 1px solid #eee; background: url(images/search.png) center center no-repeat;}
.menu-toggle { display: block; }
.sort { width: 48%; height: 220px;}
 } 
 
  @media only screen and (max-width: 520px) { 
  
  .sort { width: 98%; height: 220px;}
  
   }