.container {width: 1180px; margin: auto;}
.viewport-960 .container,
.viewport-720 .container,
.viewport-480 .container {width: 100%; padding: 0px 20px;}
.viewport-320 .container {width: 100%; padding: 0px 10px;}

/* Buttons */
.btn {-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn,
.btn.blue {display: inline-block; padding: 14px 18px; min-width: 140px; border: none; background: #8ea9cb; border-radius: 3px; -webkit-box-shadow: none; box-shadow: none; color:#FFF; font: 15px 'DINProMedium'; text-align: center; outline: none;}
.no-touch .btn:hover,
.no-touch .btn.blue:hover,
.btn:active,
.btn.blue:active {background: #778ca7; -webkit-box-shadow: inset 0px 3px 0px #485d7c; box-shadow: inset 0px 3px 0px #485d7c;}
.btn.green {background: #9cc848; -webkit-box-shadow: none; box-shadow: none; outline: none;}
.no-touch .btn.green:hover,
.btn.green:active {background: #8b9f64; -webkit-box-shadow: inset 0px 3px 0px #54694a; box-shadow: inset 0px 3px 0px #54694a;}
.btn.chart {padding: 13px 18px 11px;}
.btn-frame {display: inline-block; padding: 11px 18px; min-width: 140px; border: 3px solid #c6ccd4; background: none; border-radius: 3px; color:#c6ccd4; font: 14px 'DINProBold'; text-align: center; outline: none;}
.no-touch .btn-frame:hover,
.btn-frame:active {border-color: #8ea9cb; color: #8ea9cb;}
/* End Buttons */

/* Exchange Rate Table */
table.exchange-rate-table {width: 100%; font-family: 'DINProBold'; font-size: 16px; text-align: center;}
table.exchange-rate-table a {color: #959595;}
table.exchange-rate-table a:hover {text-decoration: underline;}
table.exchange-rate-table td,
table.exchange-rate-table tr th {padding: 14px 0px;}
table.exchange-rate-table td.buy,
table.exchange-rate-table td.sell {min-width: 109px;}
table.exchange-rate-table tr {background: #eaeaea;}
table.exchange-rate-table tr:nth-of-type(odd) {background: none;}
table.exchange-rate-table tr:nth-of-type(odd) td {padding: 19px 0px;}
table.exchange-rate-table th {color: #0b3567; font-weight: normal;}
table.exchange-rate-table img {border:1px solid #bebebe; vertical-align: middle;}
.viewport-480 table.exchange-rate-table .flag img,
.viewport-320 table.exchange-rate-table .flag img {display: none;}
.viewport-480 table.exchange-rate-table .flag,
.viewport-320 table.exchange-rate-table .flag {width: 10px;}
table.exchange-rate-table td.flag {width: 73px;}
table.exchange-rate-table td.currency {text-align: left;}
table.exchange-rate-table th {padding-bottom: 25px;}
table.exchange-rate-table th:first-child {text-align: left; padding-left: 15px;}
table.exchange-rate-table th.update-time {min-width: 160px; padding: 0px 0px 0px 10px; color: #8ea9cb; font: 13px 'DINProLight'; text-align: left;}
table.exchange-rate-table.small th.update-time {min-width: 0px;}
table.exchange-rate-table .rate {position: relative; padding: 0px 10px; white-space: nowrap;}
table.exchange-rate-table .rate:before {content:''; position: absolute; left: -14px; top: 5px; display: block; width: 21px; height: 12px;}
table.exchange-rate-table .rate.plus {color: #9cc848;}
table.exchange-rate-table .rate.plus:before {background: url('../images/rate_arrow_14x12.svg') no-repeat 0 0; -webkit-background-size: 14px 24px; background-size: 14px 24px;}
table.exchange-rate-table .rate.minus {color: #e93325;}
table.exchange-rate-table .rate.minus:before {background: url('../images/rate_arrow_14x12.svg') no-repeat 0 -12px; -webkit-background-size: 14px 24px; background-size: 14px 24px;}
/* End Exchange Rate Table */

/* Currency Slider */
.currency-pair-slider .slider-content {position: relative; overflow: hidden; height: 115px;}
.currency-pair-slider a.slider-navi {float: left; display: block; width: 36px; height: 36px; margin: 11px 18px 0 0; border: none; background: url('../images/slider_navi_36x36.svg') no-repeat 0 0; -webkit-background-size: 72px 36px; background-size: 72px 36px; text-indent: -99999px;}
.currency-pair-slider.big a.slider-navi {margin: 6px 10px 0 0;}
.currency-pair-slider.small a.slider-navi {display: none;}
.currency-pair-slider a.slider-navi:hover {border: none;}
.currency-pair-slider a.slider-navi.next {float: right; margin: 11px 0 0 20px; background-position: -36px 0px;}
.currency-pair-slider.big a.slider-navi.next {margin: 6px 0 0 10px;}
.currency-pair-slider {margin-top: 60px;}
.currency-pair-slider.big {margin-top: 35px;}
.currency-pair-slider.small {margin-top: 80px;}
.currency-pair-slider a {position: relative; width: 178px; display: inline-block; padding: 10px 0; color: #2c3847; font-size: 14px; font-family: 'DINProRegular'; text-align: center; outline: none;}
.currency-pair-slider.big li a {width: 146px;}
.currency-pair-slider.small li a {width: 100px;}
.currency-pair-slider li a:hover:after {content: ''; position: absolute; top: 0; left: -1px; display: block; width: 100%; height: 100%; border: 1px solid #c8c8ca; border-radius: 3px;}
.currency-pair-slider.small li a:hover:after {display: none;}
.currency-pair-slider li a:hover img {opacity: .51;}
.currency-pair-slider li a:hover .title {color: #b8b8b8;}
.currency-pair-slider img {display: inline-block; margin-right: 10px; border: 1px solid #bebebe;}
.currency-pair-slider.big img {width: 56px; margin-right: 6px;}
.currency-pair-slider.small img {display: block; width: 56px; margin: 0 auto;}
.currency-pair-slider ul {margin-left: 1px; font-family: 'Zerospace'; font-size: 0;}
.currency-pair-slider ul:after {content: ""; clear: both; display: block;}
.currency-pair-slider li {display: inline-block; vertical-align: top;}
.currency-pair-slider .title {display: inline-block; margin: 10px 0px 0px; vertical-align: top;}
.currency-pair-slider.big .title {margin: 6px 0 0;}
.currency-pair-slider .title:after {content: ''; position: absolute; top:10px; right: 0px; display: block; height: 38px; border-right: 1px solid #c8c8ca;}
.currency-pair-slider.big .title:after {height: 29px;}
.currency-pair-slider.small .title:after {height: 54px; right: -1px;}
.currency-pair-slider a:hover .title:after {display: none;}
.currency-pair-slider.small a:hover .title:after {display: block;}
.currency-pair-slider .description {visibility: hidden; display: block; margin-top: 5px; font-size: 15px;}
.currency-pair-slider a:hover .description {visibility: visible;}
.currency-pair-slider.small .description {display:none;}
.currency-pair-slider.small a:hover .description {display: none;}
/* End Currency Slider */

/* Banks Slider */
.banks {margin: 10px 0 0;}
.banks h3 {display: inline; margin-right: 30px; color: #2c3847; font: 30px 'DINProLight';}
.banks.small h3 {margin-right: 10px;}
.banks a {color: #8ea9cb; font-size: 14px; text-decoration: underline; vertical-align: text-top;}
.banks .banks-slider {position: relative; overflow: hidden; height: 85px; margin-top: 25px;}
.banks-slider li {display: table-cell; height: 85px; padding: 0 20px; vertical-align: middle;}
.banks-slider li img {max-width: none;}
/* End Banks Slider */

/* News */
.news {margin-top: 55px; margin-bottom: -45px;}
.news h3 {margin-bottom: 25px; color: #2c3847; font: 30px 'DINProLight';}
.news.small article {margin-bottom: 40px;}
.news article .date {float: left; width: 18%; margin-top: 4px; padding: 10px; background: #CCC; color: #FFF; font: 16px 'DINProBold'; text-align: center;}
.news.big article .date,
.news.small article .date {float: none; width: 100%; text-align: left;}
.news article .date:before {content: ''; display: block; width: 23px; height: 21px; margin: 0 auto 10px auto; background: url('../images/icon_calendar.svg') no-repeat 0 0; -webkit-background-size: 23px 21px; background-size: 23px 21px;}
.news.big article .date:before,
.news.small article .date:before {float: left; margin: 0px 10px 0 0;}
.news article .date .year {display: block; font-family: 'DINProRegular';}
.news.big article .date .year,
.news.small article .date .year {display: inline;}
.news article .content {float: right; width: 82%; padding-left: 10px;}
.news.big article .content,
.news.small article .content {float: none; width: 100%; padding-left: 0px;}
.news article .content h4 a {display: block; margin-bottom: 15px; color: #2c3847; font: 18px 'DINProMedium';}
.news.big article .content h4 a,
.news.small article .content h4 a {margin-top: 15px;}
.news article .content h4 a:hover {color: #b5c3d4;}
.news article .content p {line-height: 24px;}
/* End News */

/* News List */
.news-list article {position: relative; margin-top: 40px; padding-right: 20px; background: #f2f1f1;}
.main-content.small .news-list article {margin-top: 30px; padding: 0 0 10px;}
.news-list article:nth-of-type(odd) {background: none;}
.main-content.small .news-list article:nth-of-type(odd) {padding-bottom: 0px;}
.news-list article .date {position: absolute; left: 0; top: 0; z-index: 2; width: 66px; padding: 10px; background: #CCC; color: #FFF; font: 16px 'DINProBold'; text-align: center;}
.main-content.small .news-list article .date {width: 100%; height: 42px; text-align: left;}
.news-list article .date:before {content: ''; display: block; width: 23px; height: 21px; margin: 0 auto 10px auto; background: url('../images/icon_calendar.svg') no-repeat 0 0; -webkit-background-size: 23px 21px; background-size: 23px 21px;}
.main-content.small .news-list article .date:before {float: left; margin-right: 10px;}
.news-list article .date .year {display: block; font-family: 'DINProRegular';}
.main-content.small .news-list article .date .year {display: inline;}
.news-list article .image {position: relative; overflow: hidden; float: left; width: 265px; height: 275px;}
.main-content.small .news-list article .image {display: none;}
.news-list article .image img {display: block; width: 100%;}
.news-list article:hover .image a:before {content: ''; position: absolute; z-index: 1; display: block; width: 100%; height: 100%; background-image: url('../images/offer_block_hover.svg'); -webkit-background-size: 68px 68px; background-size: 68px 68px; background-repeat: no-repeat; background-position: center; background-color: rgba(142, 179, 70, 0.63);}
.news-list article .content {padding-left: 325px;}
.main-content.small .news-list article .content {padding: 52px 10px 10px;}
.news-list article .content .dots {display: none;}
.news-list article.short .content .description {display: none;}
.news-list article .content .short-version {display: none;}
.news-list article.short .content .short-version {display: block;}
.news-list article h2 {padding: 15px 0 20px;}
.main-content.small .news-list article h2 {padding: 10px 0 15px;}
.news-list article h2 a {color: #2c3847; font: 18px 'DINProMedium';}
.news-list article:hover h2 a {color: #b5c3d4;}
.news-list article .content {line-height: 22px;}
.news-list article .content .btn {margin-top: 30px;}
.news-list article .content.content-blog .description {display: block;}
/* End News List */

/* News Item */
article.news-item {position: relative; margin-top: 35px;}
article.news-item .date {float: left; width: 66px; margin-right: 15px; margin-bottom: 20px; padding: 10px; background: #CCC; color: #FFF; font: 16px 'DINProBold'; text-align: center;}
article.news-item .date:before {content: ''; display: block; width: 23px; height: 21px; margin: 0 auto 10px auto; background: url('../images/icon_calendar.svg') no-repeat 0 0; -webkit-background-size: 23px 21px; background-size: 23px 21px;}
article.news-item .date .year {display: block; font-family: 'DINProRegular';}
article.news-item h2 {padding: 15px 0px 25px; color: #2c3847; font: 18px 'DINProMedium';}
article.news-item {padding-left: 440px;}
article.news-item .article-header .category {font-size:14px;}
article.news-item .article-header.blog-header h2 {padding: 15px 0px 16px;}
article.news-item .article-tags {margin: 30px 0;}
article.news-item .article-tags a {position: relative; overflow: hidden; display: inline-block; margin: 0 20px 10px 0; padding-bottom: 10px; font-size: 18px;}
article.news-item .article-tags a:after {content: ''; position: absolute; left: -100%; bottom: 0px; display: block; width: 100%; height: 1px; background: #8ea9cb; -webkit-transition: left .4s ease-in-out; transition: left .4s ease-in-out;}
article.news-item .article-tags a:hover:after {left: 0%;}
.main-content.big article.news-item,
.main-content.small article.news-item {padding-left: 0px;}
article.news-item .image {position: absolute; left: 0px; top: 0px; float: left; overflow: hidden; width: 377px; min-height: 394px;}
article.news-item .image-small img {min-width: 100%;}
article.news-item .image-small {display: none;}
article.news-item .wysiwyg {padding-bottom: 30px;}
article.news-item .buttons {margin-top: 40px;}
article.news-item .buttons a {margin-left: 10px;}
article.news-item .buttons a:nth-of-type(1) {margin-left: 0px;}
.main-content.big article.news-item .image {position: static; float: left; width: 281px; min-height: 291px; margin: 0px 45px 30px 0;}
.main-content.small article.news-item .image {display: none;}
.main-content.small article.news-item .image-small {display: block;}
.main-content.small article.news-item .image-small img {display: block; min-width: auto; max-width: 100%; width: auto; margin: 0 auto;}
.main-content.small article.news-item .date {float: none; width: 100%; height: 42px; text-align: left;}
.main-content.small article.news-item .date:before {float: left; margin-right: 10px;}
.main-content.small article.news-item .date .year {display: inline;}
.main-content.small article.news-item h2 {padding: 15px 0px 10px;}
.main-content.small article.news-item .article-header {margin-bottom: 15px;}
.main-content article.news-item .article-header .article-social > div {display: inline-block; float: left; margin-right: 20px; margin-bottom: 5px;}
/* End News Item */

/* Help Answer */
.help-answer h2 {font: 18px 'DINProMedium'; margin-top: 25px; margin-bottom: 20px;}
.help-answer .wysiwyg {padding-bottom: 0px; border: 1px solid #cbcccd;}
.help-answer .wysiwyg p {margin: 20px;}
.help-answer .wysiwyg table p {margin: 0px;}
.help-answer .buttons {margin-top: 70px;}
.help-answer .buttons a {margin-left: 10px;}
.help-answer .buttons a:nth-of-type(1) {margin-left: 0px;}
/* End Help Answer */

/* Sitemap */
.sitemap.grid.columns.padding {margin-top: 40px; padding-bottom: 70px;}
.big .sitemap.grid.columns.padding,
.small .sitemap.grid.columns.padding {margin-top: 20px;}
.sitemap li {margin-top: 5px;}
.sitemap li a {display: block; padding: 14px 20px; border: 1px solid #8a8f95; border-radius: 3px; background: #8a8f95; color: #FFF; font-size: 14px; text-transform: uppercase;}
.sitemap li li a {border-color: #c7c7c7; background: #ececec; color: #a0a0a0;}
.sitemap a:hover {background: #8a8f95; color: #FFF;}
/* End Sitemap */

/* Error 404 */
.error-404 {margin-top: 35px;}
.small .error-404 {margin-top: 25px;}
.error-404 .info {color: #2c3847; font-size: 18px;}
.error-404 .image {float: right; position: relative; z-index: -1; margin: -160px 180px 0 0;}
.viewport-960 .error-404 .image {margin-right: 0px;}
.viewport-720 .error-404 .image {margin: -120px 0px 0 0; width: 50%;}
.small .error-404 .image {float: none; margin: 0px;}
.error-404 .btn-frame {margin-top: 30px; padding: 10px 50px; border-color: #8ea9cb; color: #8ea9cb;}
.error-404 .btn-frame:hover {border-color: #8a8f95; color: #8a8f95;}
/* End Error 404 */

/* Currency Rates Item */
.currency-item {margin-top: 15px;}
.main-column .currency-item .exchange-rate-table,
.main-column.small .currency-item .exchange-rate-table {margin-bottom: 25px;}
.currency-item .calculator-btn {text-align: right;}
.small .currency-item .calculator-btn {text-align: center;}
.currency-item .calculator-btn .btn {padding-left: 40px; padding-right: 40px;}
.currency-item form {margin: 85px 0 30px;}
.big .currency-item form {margin-top: 75px;}
.small .currency-item form {margin-top: 50px;}
.currency-item form label {color: #2c3847; font: 22px 'DINProLight';}
.currency-item form .selectbox {width: 125px;}
.currency-item form .selectbox .current,
.currency-item form .selectbox .options-list li {padding-left: 15px;}
.currency-item form .period label {float: left; margin-right: 10px; line-height: 44px;}
.currency-item form .rate-type label {margin-left: 40px; font: 18px 'DINProRegular';}
.currency-item form .rate-type label:nth-of-type(1) {margin-left: 0px;}
.currency-item form .period {float: left;}
.currency-item form .rate-type {float: left; margin: 10px 0 0 35px;}
.big .currency-item form .rate-type {margin-left: 25px;}
.big .currency-item form .rate-type label {margin-left: 20px;}
.viewport-960 .currency-item form .rate-type label {margin-left: 10px;}
.big .currency-item form .rate-type label:nth-of-type(1) {margin-left: 0px;}
.small .currency-item form .period {float: none; width: 300px; margin: 0 auto 30px;}
.small .currency-item form .period label {float: left;}
.small .currency-item form .period .selectbox {float: right; width: 220px;}
.small .currency-item form .period:after {content: ''; display: block; clear: both;}
.small .currency-item form .rate-type {display: block; float: none; width: 300px; margin: 0 auto 30px;}
.small .currency-item form .rate-type label {float: right; margin: 0px;}
.small .currency-item form .rate-type label:nth-of-type(1) {float: left;}
.currency-item form button {float: left; margin-left: 50px;}
.big .currency-item form button {margin: 0px; float: right;}
.small .currency-item form button {float: none; clear: both; display: block; width: 140px; margin: 0 auto;}
.currency-item .buttons a {margin-left: 10px;}
.currency-item .buttons a:nth-of-type(1) {margin-left: 0px;}
.currency-item .info {font-size: 13px; margin-bottom: 30px;}
#currency-chart {height: 450px; margin-top: 70px;}
.google-visualization-tooltip {position: absolute !important; width: 212px !important; margin-top: -50px !important; padding: 15px !important; border: none !important; border-radius: 10px !important; background-color: rgba(87, 88, 89, 0.9) !important; -webkit-box-shadow: none !important; box-shadow: none !important; color: #FFF; font: 15px 'DINProRegular' !important;}
/* End Currency Rates Item */

/* Pagination */
.pagination {width: 349px; margin: 125px auto 0; font-family: 'Zerospace'; font-size: 0; text-align: center;}
.main-content.small .pagination {width: 300px;}
.main-content.big .pagination {margin-top: 75px;}
.pagination .total {float: left; display: block; width: 23px; font-family: 'DINProRegular'; font-size: 16px; line-height: 45px; text-align: center;}
.pagination a:nth-of-type(1) {margin-left: 0px;}
.pagination a {position: relative; float: left; display: block; width: 45px; height: 45px; margin-left: 10px; border-radius: 3px; background: #ebebeb; text-indent: -99999px;}
.main-content.small .pagination a {width: 43px; height: 43px; margin-left: 5px;}
.pagination a:hover {background: #c0bfbf;}
.pagination .selectbox {float: left; width: 95px; margin-left: 10px; margin-right: 10px; text-align: right;}
.main-content.small .pagination .selectbox {width: 70px; margin-left: 5px; margin-right: 5px;}
.pagination .selectbox .current {padding: 12px 10px 11px 15px;}
.main-content.small .pagination .selectbox .current {padding: 11px 10px 10px 15px;}
.pagination .selectbox .current .text {float: right; padding-right: 10px;}
.main-content.small .pagination .selectbox .current .text {padding-right: 5px;}
.pagination .selectbox .options-list li {padding: 5px 40px 5px 15px; text-align: right;}
.main-content.small .pagination .selectbox .options-list li {padding: 5px 35px 5px 15px;}
.pagination .first:after {content: ''; position: absolute; top: 16px; left: 14px; display: block; width: 15px; height: 13px; background: url('../images/pagination_first_last_15x13.svg') no-repeat 0 0; -webkit-background-size: 30px 13px; background-size: 30px 13px;}
.pagination .last:after {content: ''; position: absolute; top: 16px; left: 15px; display: block; width: 15px; height: 13px; background: url('../images/pagination_first_last_15x13.svg') no-repeat -15px 0; -webkit-background-size: 30px 13px; background-size: 30px 13px;}
.pagination .prev:after {content: ''; position: absolute; top: 16px; left: 17px; display: block; width: 8px; height: 13px; background: url('../images/pagination_prev_next_8x13.svg') no-repeat 0 0; -webkit-background-size: 16px 13px; background-size: 16px 13px;}
.pagination .next:after {content: ''; position: absolute; top: 16px; left: 19px; display: block; width: 8px; height: 13px; background: url('../images/pagination_prev_next_8x13.svg') no-repeat -8px 0; -webkit-background-size: 16px 13px; background-size: 16px 13px;}
.main-content.small .pagination .first:after {top: 15px; left: 13px;}
.main-content.small .pagination .last:after {top: 15px; left: 14px;}
.main-content.small .pagination .prev:after {top: 15px; left: 16px;}
.main-content.small .pagination .next:after {top: 15px; left: 18px;}
.btn-left-pagination {float: left; margin-top: -43px;}
.main-content.big .btn-left-pagination {float: none; margin-top: 75px;}
.main-content.small .btn-left-pagination {float: none; margin-top: 35px;}
/* End Pagination */

/* Breadcrumbs */
.breadcrumbs.visible {display: block;}
.breadcrumbs {display: none; margin: 30px 0px;}
.breadcrumbs ul {margin-left: 10px;}
.breadcrumbs a {color: #8ea9cb; font: 14px 'DINProLight';}
.breadcrumbs li:first-child {padding-left: 0px; background: none;}
.breadcrumbs li {float: left; margin-right: 8px; padding-left: 16px; background: url('../images/breadcrumbs_separator.svg') no-repeat 0 5px; -webkit-background-size: 8px 11px; background-size: 8px 11px;}
.breadcrumbs li.current a,
.breadcrumbs li.current span {padding: 0px 10px; border-radius: 3px; background: #0068a7; color: #FFF;}
/* End Breadcrumbs */

/* Left Column */
.left-column {float: left; display: none; width: 220px; margin-right: 40px;}
.left-column.visible {display: block;}
/* End Left Column */

/* Left Menu */
.left-column .left-menu li {margin-bottom: 5px;}
.left-column .left-menu li li {margin-left: 24px;}
.left-column .left-menu li li li a {padding: 14px;}
.left-column .left-menu a {display: block; padding: 14px 20px; border-radius: 3px; background: #c6ccd4; color: #FFF; font-size: 14px;}
.left-column .left-menu a:hover,
.left-column .left-menu a.active {background: #8a8f95;}
/* End Left Menu */

/* Main Column */
.main-column {margin: 0 0 100px 260px;}
.main-column.big {margin-top: 40px; margin-left: 0px; margin-bottom: 80px;}
.main-column.small {margin-top: 30px; margin-left: 0px; margin-bottom: -35px;}
.main-column .exchange-rate-table {margin-bottom: 25px;}
.main-column.big .exchange-rate-table {margin-bottom: 45px;}
.main-column.small .exchange-rate-table {margin-bottom: 35px;}
.main-column.small table.exchange-rate-table .rate {font-size: 14px;}
.main-column.full {margin-left: 0px;}
/* End Main Column */

.table-legend {margin: 10px 0 25px}

.page-description p {
    margin-top: 8px;
    line-height: 20px;
}
