/* CSS reset */

html,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,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,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}

body{line-height:1;}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}

nav ul{list-style:none;}

blockquote,q{quotes:none;}

blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}

a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}

ins{background-color:#ff9;color:#000;text-decoration:none;}

mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}

del{text-decoration:line-through;}

abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}

table{border-collapse:collapse;border-spacing:0;}

input,select,textarea{vertical-align:middle; outline: none; box-sizing: border-box;}



.clearfix:after {content: ""; display: block; clear: both;}



/* Defoult */

body {font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.5; color: #222222; background-color: #f9f9f9; min-width: 320px;}

img{max-width: 100%; height: auto;}

a {text-decoration: none; color: #000000; transition: background-color 0.1s ease-in-out;}

a:hover {color: #222222;}



.cookie_agree {background-color: #222222; color: #eeeeee; padding: 15px 0; position: relative; z-index: 999; font-size: 13px;}

.cookie_agree div{display: block; margin: 0 auto; width: 1314px; position: relative;}

.cookie_agree div p{display: block; text-align: left; margin: 0 35px 0 0; line-height: 1.5;}

.cookie_agree div a{color: #eeeeee; text-decoration: underline;}

.cookie_agree div a:hover{color: #ffffff;}

.cookie_agree div a.close{line-height: 1; text-align: center; font-size: 20px; opacity: 0.85; display: block; text-decoration: none; width: 20px; height: 20px; position: absolute; top: 0; right: 5px;}

.cookie_agree div a.close:hover{opacity: 1;}



.page {background-color: #ffffff; max-width: 1500px; margin: 0 auto; box-shadow: 0 0 10px 0 #dddddd;}



.header {background-color: #ffffff;}

.header_in {margin: 0 auto; width: 1314px; padding: 10px 0;}

.header .main{padding: 0 0 27px 0; position: relative;}

.header .logo {display: block; float: left; padding: 19px 0 0 0;}

.header .add {display: block; float: right; padding: 25px 0 0 0;}

.header .add a{text-decoration: none; display: block; background-color: #cb2930; color: #ffffff; font-weight: bold; padding: 0 0 0 30px; line-height: 42px; height: 42px; border-radius: 21px; position: relative; box-shadow: inset 0 -15px 15px 0 rgba(0,0,0,0.2);}

.header .add a i{position: absolute; top: 6px; left: 6px; font-style: normal; display: inline-block; color: #cb2930; width: 30px; padding: 5px 0; background: #ffffff; box-shadow:inset 0 0 15px 0 #eeeeee; border-radius: 50%; text-align: center; font-size: 20px; line-height: 20px;}

.header .add a span{display: inline-block; padding: 0 20px 0 15px; text-transform: uppercase; font-size: 14px;}

.header .add a:hover{background-color: #bb232a;}



.search {display: block; position: absolute; top: 25px; left: 290px; right: 240px;}

.search form{position: relative;}

.search .box{display: block; border: 1px solid #cbcbcb; border-radius: 21px; overflow: hidden; position: relative; height: 40px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);}

.search p.query {display: block; position: absolute; right: 172px; top: 0; left: 0; padding: 0 5px 0 15px;}

.search p.query input {width: 100%; border: 0; height: 40px; background: none;}

.search p.category select {position: absolute; right: 52px; top: 0; width: 120px; height: 40px; border: 0; border-left: 1px solid #eeeeee; padding: 0 0 0 15px; background: none;}

.search p.category option {padding: 15px}

.search p.submit input {position: absolute; right: 0; top: 0; width: 52px; height: 42px; border-radius: 0 20px 20px 0; border: 0; text-indent: -999px; white-space: nowrap; overflow:hidden; cursor: pointer; background: url('../images/search.svg') 16px center no-repeat #cb2930;  box-shadow: inset 0 -15px 15px 0 rgba(0,0,0,0.2);}

.search p.submit input:active {background-color: #bb232a;}



.alphabet ul{list-style: none; display: block; padding: 2px 25px; border-radius: 5px; background-color: #3878bb; box-shadow: inset 0 -15px 15px 0 rgba(0,0,0,0.2);}

.alphabet ul li{list-style: none; display: block; width: 2.57%; margin: 0.5%; float: left;}

.alphabet ul li a{display: block; padding: 5px 0; text-align: center; font-weight: bold; color: #ffffff; border-radius: 5px;}

.alphabet ul li a:hover{background-color: rgba(0,0,0,0.1);}



.content {background-color: #ffffff; padding: 25px 0;}

.content_in {margin: 0 auto; width: 1314px;}



.nav a.this {font-weight: bold;}

.nav i {font-style: normal; margin: 0 5px; font-weight: bold; color: #b6cee8;}



.footer {background-color: #ffffff; padding: 25px 0;}

.footer_in {margin: 0 auto; width: 1314px; padding: 10px 0; border-top: 2px solid #eeeeee;}

.footer_in p{padding: 10px 0; line-height: 18px;}

.footer_in p.links {line-height: 22px;}

.footer_in p.links a{text-decoration: none; color: #3878bb; text-decoration: underline;}

.footer_in p.links a.fb{padding: 0 0 0 24px; background: url('../images/fb_ico.svg') 3px center no-repeat;}

.footer_in p.links a:hover{color: #cb2930;}

.footer_in p img{vertical-align: -20%; margin: 0 2px;}





/* responsive */

@media screen and (max-width: 1680px) {

    .page{margin: 0 20px; padding: 0 20px;}

    .cookie_agree {margin: 0 -20px;}

    .cookie_agree div p{padding: 0 0 0 25px;}

}

@media screen and (max-width: 1400px) {

    .cookie_agree div, .header_in, .content_in, .footer_in{width: auto; margin: 0 10px;}

}

@media screen and (max-width: 1000px) {

    .page{margin: 0; padding: 0;}

    .cookie_agree {margin: 0;}

    .cookie_agree div p{padding: 0;}

    .cookie_agree p span{display: none;}

    .search {left: 240px; right: 180px;}

    .header .main{padding: 0 0 15px 0;}

    .content {padding: 25px 0 0 0;}

    .alphabet ul li{width: 6.14%;}

}

@media screen and (max-width: 790px) {

    .search {position: static; clear: both; padding: 15px 0 0 0;}

}

@media screen and (max-width: 580px) {

    .alphabet ul{ddisplay: none; overflow: hidden; position: relative; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; -ms-overflow-style: none;}

    .alphabet ul li{width: 30px; display:inline-block; float: none;}

}

@media screen and (max-width: 480px) {

    .header .logo {float: none; text-align: center;}

    .header .add {display: none;}

    .search p.query {right: 52px;}

}



@media print {

    .cookie_agree, .header, .footer, .scrollarea, .ad, .nav, .author, .rating {display: none !important;}

    .content_in {width: auto;}

    .contentarea > div {margin: 0 !important;}

}