@font-face {
font-family: "GothamProRegular";
src: url("../fonts/GothamProRegular/GothamProRegular.eot");
src: url("../fonts/GothamProRegular/GothamProRegular.eot?#iefix")format("embedded-opentype"),
url("../fonts/GothamProRegular/GothamProRegular.woff") format("woff"),
url("../fonts/GothamProRegular/GothamProRegular.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}

@font-face {
font-family: "GothamProBold";
src: url("../fonts/GothamProBold/GothamProBold.eot");
src: url("../fonts/GothamProBold/GothamProBold.eot?#iefix")format("embedded-opentype"),
url("../fonts/GothamProBold/GothamProBold.woff") format("woff"),
url("../fonts/GothamProBold/GothamProBold.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
/*
@font-face {
font-family: "GothamProBlack";
src: url("../fonts/GothamProBlack/GothamProBlack.eot");
src: url("../fonts/GothamProBlack/GothamProBlack.eot?#iefix")format("embedded-opentype"),
url("../fonts/GothamProBlack/GothamProBlack.woff") format("woff"),
url("../fonts/GothamProBlack/GothamProBlack.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
*/

@font-face {
font-family: "GothamProMedium";
src: url("../fonts/GothamProMedium/GothamProMedium.eot");
src: url("../fonts/GothamProMedium/GothamProMedium.eot?#iefix")format("embedded-opentype"),
url("../fonts/GothamProMedium/GothamProMedium.woff") format("woff"),
url("../fonts/GothamProMedium/GothamProMedium.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}

@font-face {
font-family: "GothamProLight";
src: url("../fonts/GothamProLight/GothamProLight.eot");
src: url("../fonts/GothamProLight/GothamProLight.eot?#iefix")format("embedded-opentype"),
url("../fonts/GothamProLight/GothamProLight.woff") format("woff"),
url("../fonts/GothamProLight/GothamProLight.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}


/* NEW CSS */
body { font-family: "GothamProRegular"; color: #000000; font-size: 16px; background-position: 0 0; background-repeat: repeat-x }
td, th { font-family: "GothamProRegular"; color: #000000; font-size: 16px; }

a { font-family: "GothamProRegular"; color: #61617d; font-size: 16px; text-decoration:none; }
a:hover { font-family: "GothamProRegular"; color: #61617d; font-size: 16px; text-decoration:none;}

#wrapper { overflow:hidden}
.wrapper { width: 1200px; margin: auto; position: relative}

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}

a, img, input, button, textarea, select { outline: none; resize:none; }
strong, b { font-weight:700; }
em { font-style:italic}

.fl { float:left}
.fr { float:right}

button, a, .trans {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.noscroll { overflow:hidden}

strong { font-family: "GothamProBold"; }

/* HEADER */
#header { height: 367px; box-sizing: border-box; padding-top: 100px; position: relative; z-index: 10; }
#header .logo { text-align:center; padding-bottom: 20px;}
#header .name { font-family: "GothamProBold"; font-size: 60px; text-align: center}
#header .sub-name { font-family: "GothamProLight"; font-size: 36px; text-align: center}


#header .pdf-line { display: none; height:50px; background: #e42127; text-align: center; color: #fff; position: absolute; left: 0; right: 0; top: 0; font-size: 12px; font-family:"GothamProBold";}
#header .pdf-line a { font-family:"GothamProBold"; padding:0 10px 0 30px; background:url(../images/icon-pdf.png) no-repeat 0 50%; font-size:12px; display:inline-block; line-height:50px; color: #fff; }
#header .pdf-line a.close { background:url(../images/icon-close-white.png) no-repeat 50% 50%; display:inline-block; width: 17px; padding: 0; line-height:50px;}


.alphabet { text-align:center; }
.alphabet li { display:inline-block; position: relative; width:30px; height:70px; padding: 0 3px; ; padding-bottom:40px}
.alphabet li:after { content: ''; position:absolute; bottom: 0; height: 25px; width: 100%; left: 0; background: url(../images/scroll-drop.png) repeat-x 50% 50%; display: none;}
.alphabet li a { width:30px; height:60px; background:#fff; padding-top:5px; text-align:center; color:#000; text-transform:uppercase; display:block; box-sizing:border-box; border-radius:5px 5px 0 0; font-family:"GothamProBold"; font-size:16px; position: absolute; top: 10px}
.alphabet li a:hover, .alphabet li a.active { height:70px; background:#000; color:#fff; font-size:16px; top:0px}


.alphabet-list { max-width: 1044px;}
.alphabet-list .left-grad {
position: absolute; left: 0; width: 50%; height: 25px; bottom: 0; display: none;
background: #bab7ba; /* Old browsers */
background: -moz-linear-gradient(left, #bab7ba 0%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #bab7ba 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #bab7ba 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bab7ba', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}
.alphabet-list .right-grad {
position: absolute; right: 0; width: 50%; height: 25px; bottom: 0; display: none;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(left, #ffffff 0%, #bab7ba 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ffffff 0%,#bab7ba 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #ffffff 0%,#bab7ba 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bab7ba',GradientType=1 ); /* IE6-9 */
}



/* CENTER */
#center { }

.search-list { padding: 60px 0 40px 0}
.search-list .search-item { width:18%; margin:0 1% 40px 1%; background:#fefefe; position:relative; border-radius:2px; float:left; box-sizing:border-box; padding:30px 25px; height:280px}
.search-list .search-item:after { content: ''; position:absolute; left:2px; right:2px; height:8px; background:rgba(254,254,254,0.5); top:-8px; ; border-radius:2px 2px 0 0}
.search-list .search-item:before { content: ''; position:absolute; left:8px; right:8px; height:14px; background:rgba(254,254,254,0.3); top:-14px; ; border-radius:2px 2px 0 0}
.search-list .search-item .category { padding-bottom:25px; font-size: 18px; color: #000; font-family: "GothamProMedium";}

.search-list .search-item .name { font-size:20px; height:80px; overflow: hidden; position: relative}
.search-list .search-item .name a { font-size:20px; display: block; height:80px; font-family: "GothamProBold"; color: #000; overflow: hidden; }
.search-list .search-item .meta { padding-top:30px; font-family:"GothamProBold"; font-size:12px;}
.search-list .search-item .meta a {font-family:"GothamProBold"; font-size:12px; color: #000}



.not-found { font-size: 20px; display: block; height: 80px; font-family: "GothamProBold"; color: #fff;text-align: center; width: 100%;}


.search-wrapper { max-width:880px; margin:auto;}
.search-form { background: #fff; height: 58px; position: relative; margin:0 1%; margin-top: 90px}

.search-form label {  font-family:"GothamProBold";  padding:10px 15px 10px 30px; float:left; line-height: 40px; text-align: center; text-transform: uppercase}

.search-form .field { padding:10px 0; float:left;}
.search-form .field input { width:675px; height:38px; margin:0; padding:0; display:block; border:none; font-family:"GothamProRegular"; color:#000000; font-size:16px;}

.search-form .button { width:134px; padding:10px; position:absolute; right:0; top:0}
.search-form .button button { width:100%; height:38px; border-radius:5px; font-family:"GothamProBold"; font-size:16px; color:#fff; text-transform:uppercase; display:block; border:none; background:#000; margin:0; padding:0; cursor:pointer}

.search-control { padding: 20px 0;}
.search-control li { float: left; width: 23%; margin: 0 1%}
.search-control li a { height:40px; background:none; text-align:center; display:block; line-height: 40px; border-radius:5px;}

.search-control .trigger { display:none}

/* FOOTER */
footer { padding-bottom: 70px; } 
footer .text { font-size:10px;  text-align: center} 
footer .text strong { font-size:12px;  } 



.custom-scroll {
	overflow: auto;
	position: relative;
	margin: 0 0;
	width: 100%;
	height: 100%;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, 
.mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{
	right: -40px !important; 
	margin: 0 !important;;
}

.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	background-color: #53539b !important;
}

.mCSB_scrollTools { width:10px; background:none}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width:10px}

/* LETTER RESULT */
.blur { filter: blur(3px);-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease; }

#letter-result { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 100; display: none}
#letter-result .overlay { background: rgba(0,0,0,0.7); position: absolute; left: 0; top: 0; right: 0; bottom:0; z-index: 10; display: block; opacity: 0; -webkit-transition: all 0.5s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease; }
#letter-result.active .overlay { opacity: 1}

#letter-result .column-wrapper { width: 0; height: 100%; overflow: hidden; float: right; box-shadow: -15px 0 80px rgba(0,0,0,0.5);}
#letter-result .column-list { width:1280px; height: 100%; }
#letter-result .column { background:#1a1a57; width: 320px; box-sizing: border-box; padding: 30px; height: 100%; z-index: 20; position: relative; float: left; border-right: 10px solid #0e0e42; display: none;
-webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
	
}

#letter-result .column:nth-child(2),#letter-result .column:nth-child(3),#letter-result .column:nth-child(4) { background:#fff;}

#letter-result .column .close { display:none; width:27px; height:27px; background: url(../images/icon-close.png); float: right; cursor: pointer; right: 0; position: absolute;}
#letter-result .column.active .close { display:block;}

#letter-result .column .letter { display:block; width: 36px; height: 36px; border-radius: 50%; color: #000; background: #fff; font-size: 19px; font-family: "GothamProBold"; text-align: center; line-height: 36px; text-transform: uppercase}

.accordion { padding-top: 80px}
.accordion .acc-header { font-size:22px; font-family:"GothamProBold"; color:#fff; background:url(../images/arrow-up.png) no-repeat 100% 50%; cursor:pointer; padding:5px 20px 5px 0;}
.accordion .acc-header.active { background: url(../images/arrow-down.png) no-repeat 100% 50%;}
/*
.accordion .acc-content {  overflow: hidden; transition: max-height .7s; max-height: 0; }
.accordion .acc-header.active + .acc-content { max-height:80em; padding:10px 0;}
*/
.accordion .acc-content { display: none}
.accordion .acc-header.active + .acc-content { display: block}

.accordion .acc-content ul { padding-left:18px;}
.accordion .acc-content li { list-style-type:disc; color: #fff; padding: 2px 0}
.accordion .acc-content li a { color:#fff;}
.accordion .acc-content li a:hover { color:#83bcf9}
.accordion .acc-content li a.active { color:#83bcf9;  font-family:"GothamProBold"; }

.accordion .acc-content .photo { float: left; display: block; margin-bottom: 10px; position: relative; background: #000;}
.accordion .acc-content .photo.hide { display: none}
.accordion .acc-content .photo.last img { opacity: 0.5}
.accordion .acc-content .photo img { display:block}
.accordion .acc-content .photo:nth-child(even) { float: right;}
.accordion .acc-content .photo .count { position:absolute; right: 0; left: 0; top: 38px; text-align: center; color: #fff; font-size: 18px;}

.acc-content h3 { padding-bottom:5px; font-family: "GothamProBold";}
.acc-content h3.current { color:#83bcf9} 

.accordion.black { padding-top:0}
.accordion.black .acc-header { background: url(../images/arrow-up-black.png) no-repeat 100% 8px; color: #000; font-size: 14px}
.accordion.black .acc-header.active { background: url(../images/arrow-down.png) no-repeat 100% 8px;}
.accordion.black .acc-content li { color: #000; line-height: 1.1;  font-size: 11px;}
.accordion.black .acc-content li a { color:#000; font-size: 11px; line-height: 1.1}
.accordion.black .acc-content li a:hover { color:#83bcf9; font-size: 11px;}
.accordion.black .acc-content li a strong { font-weight:700; font-size: 14px;}

/* WRITER */
.autor-detail {}
.autor-detail .thumb { width:150px; height: 150px; overflow: hidden; margin: auto; border-radius: 50%; margin-bottom: 33px}
.autor-detail .name { text-align:center; font-size: 20px; font-family: "GothamProBold"; padding: 30px 0 15px 0;}
.autor-detail .year-life { text-align:center; font-size: 16px; padding-top: 17px}

.autor-detail .desc { font-size:12px; line-height: 1.5}
.autor-detail .desc .small2 { font-family: "GothamProBold"; color: #707070}
.autor-detail .desc p { padding-bottom:16px;}

.autor-detail .source { font-size:12px; padding-top:10px; border-top:1px solid #707070}

.autor-detail .name { font-size: 22px; font-family: "GothamProBold"; padding: 0; text-align: left}
.autor-detail .sub-name { font-size: 16px; font-family: "GothamProBold"; padding:20px 0 0 0; color: #83bcf9 }

.autor-detail .list-name { padding:0 30px 20px 0; color:#e2574c; font-size: 16px; font-family: "GothamProBold";}


#letter-result .column .button { padding:20px 0}
#letter-result .column .button a { display: block; height: 40px; line-height: 40px; margin: 10px 0; color: #fff; background: #3d3d86; border-radius: 5px; font-size: 14px; text-align: center; font-family: "GothamProBold"; text-transform: uppercase}
#letter-result .column .button a:hover, #letter-result .column .button a.active { background: #de0303; color: #fff;}


ul.list-item  { padding-left:18px;}
.list-item li { list-style-type:disc; padding: 2px 0; line-height: 1.1;}
.list-item li a { font-size: 11px; line-height: 1.1; color:#000;}
.list-item li a:hover { color:#83bcf9; color:#000; font-size: 11px;}
.list-item li a.active { color:#83bcf9;  font-family:"GothamProBold"; }
.list-item li a strong { font-weight:700; font-size: 14px;}

.list-item.dictionary { padding-top:10px; border-top:1px solid #707070}
.list-item.dictionary li a { font-size: 12px; line-height: 1.1; color:#000;}
.list-item.dictionary li a:hover { color:#83bcf9; color:#000; font-size: 12px;}
.list-item.dictionary li a strong { font-weight:700; font-size: 12px;}

/* COLOR STYLE */
body.blue { background-image:url(../images/header-bg-blue.png); background-color:#1a1a57; }
body.white { background-image:url(../images/header-bg-white.png); background-color:#f5f5f7; }

body.focus { background-position:0 -500px}
body.focus.blue header .name, body.focus.blue header .sub-name { color: #fff;}
body.focus.blue #header { height: auto}

body .close-focus { display:block; opacity: 0; width:27px; height:27px; background: url(../images/icon-close.png); position: absolute; right: 0; top: 60px; cursor: pointer}
body.focus .close-focus { opacity: 1}

body.blue footer { color: #fff;}
body.white footer { color: #000;}


body.blue .search-control li a { border: 1px solid #3d3d86; color:#3d3d86; }
body.blue .search-control li a:hover, body.blue .search-control li a.active { border: 1px solid #3d3d86; color: #fff; background:#3d3d86;  }


body.white .search-control li a { border: 1px solid #000; color:#000; }
body.white .search-control li a:hover { border: 1px solid #000; color: #fff; background:#000;  }


.placeholder-anim::-webkit-input-placeholder       {opacity:1; transition: all 0.5s ease;}
.placeholder-anim::-moz-placeholder               {opacity:1; transition: all 0.5s ease;}
.placeholder-anim:-moz-placeholder                 {opacity:1; transition: all 0.5s ease;}
.placeholder-anim:-ms-input-placeholder           {opacity:1; transition: all 0.5s ease;}
.placeholder-anim:focus::-webkit-input-placeholder {opacity:0}
.placeholder-anim:focus::-moz-placeholder          {opacity:0}
.placeholder-anim:focus:-moz-placeholder          {opacity:0}
.placeholder-anim:focus:-ms-input-placeholder     {opacity:0}


.page404 { text-align:center; padding-bottom: 40px}
.page404 .num { font-size:270px; color:#fff; font-family:"GothamProBold"; line-height: 1; height: 190px; overflow:hidden; margin-top: -121px;}

.page404 .text { color:#fff; padding-top: 40px;}
.page404 .text span { font-size:30px; color:#fff; font-family:"GothamProBold"; display:block;}
.page404 .text a { font-size:18px; color:#fff; font-family:"GothamProBold"; display:block;}
/* RESPONSIVE */
@media (max-width: 1200px) {
	.wrapper { width: 960px; }
	
	.alphabet .wrapper { width: auto}
	.alphabet li:after { display:block;}
	.alphabet-list .left-grad, .alphabet-list .right-grad { display:block;}
	
	.search-form .field input { width:690px; }

	.search-list .search-item { width:23%; margin:0 1% 40px 1%; background:#fefefe; position:relative; border-radius:2px; float:left; box-sizing:border-box; padding:30px 20px}
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 
	.wrapper { width: 760px; }
	
	.search-form .field input { width:480px; }

	.search-list .search-item { width:31.33%; margin:0 1% 40px 1%; background:#fefefe; position:relative; border-radius:2px; float:left; box-sizing:border-box; padding:30px 20px}

}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
	.wrapper { width: 480px; }
	
	#header .name { font-size:36px}
	#header .sub-name { font-size:22px}
	
	.search-form .field input { width:450px; }

	.search-control li { float: left; width: 48%; margin: 0 1% 13px 1%; }
	.search-form label { display:none}
	.search-form .field { padding:10px; float:none}
	.search-list .search-item { width:48%; margin:0 1% 40px 1%; background:#fefefe; position:relative; border-radius:2px; float:left; box-sizing:border-box; padding:30px 25px}
	
	.page404 .num { font-size:230px; height:164px; margin-top:-94px;}
}
 
/* Landscape phones and down */
@media (max-width: 480px) { 
	.wrapper { width: 300px; }
	
	#header .name { font-size:36px}
	#header .sub-name { font-size:22px}
	
	.search-control li { float: none; width: 100%; margin: 0 1% 13px 1%; }
	.search-control .trigger { padding-top:20px; display: block}
	.search-control .trigger a { height:40px; text-align:center; display:block; line-height:40px; border-radius:5px; border:1px solid #3d3d86; color:#fff; background:#3d3d86;}
	
	.search-list { width:480px}
	.search-list .search-item { width:170px; margin:0 4% 40px 1%; background:#fefefe; position:relative; border-radius:2px; float:left; box-sizing:border-box; padding:30px 20px}
	.search-list .search-item .category { font-size:16px}
	.search-list .search-item .name { font-size:16px; height:60px}
	.search-list .search-item .name a { font-size:16px}
	
	.search-form .field { padding:10px; float:none}
	.search-form .field input { width:100%}
	.search-form .button, .search-form label { display:none}
	
	.page404 .num { font-size: 145px; height: 103px; margin-top: -33px;}
}