/*** General Styles  ***/

/* basic styles */
*{
    margin: 0;
    padding: 0;
}
::selection{background-color:#000; color:#fff !important;}
::-moz-selection{background-color:#000; color:#fff !important;}
header, section, footer, aside, nav, main, article, figure{
    display: block; 
}
body,
input,
select{
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
}
.hidden{
    position: absolute !important;
    clip: rect(1px,1px,1px,1px);
    overflow: hidden;
    height: 1px;
    width: 1px;
    word-wrap: normal;
}
main p{
    margin-bottom: 10px;
}
main p:last-of-type{
    margin-bottom: 0;
}
img{
    max-width: 100%;
    display: inline-block;
}
header::after,
.select-search-form::after,
.search-bottom::after{
    content: " ";
    display: block;
    clear: both;
}
.container{
    background-color: #eef5fa;
    overflow: hidden;
}
.flex-wrap{
    display: flex;
}
main,
footer .flex-wrap{
    max-width: 1000px;
    margin-right: 40px;
    margin-left: 295px;
}
main{
    margin-top: 195px;
    margin-bottom: 50px;
}
.sh-one main{
    margin-top: 0;
}
.tobkg > img{
    width: 100%;
    display: block;
}
.tobkg{
    background-position: center;
    background-size: cover;
    position: relative;
}
.white-box{
    background-color: #fff;
    padding: 25px;
    position: relative;
}
.white-box + .white-box{
    margin-top: 30px;
}
.y-center{
    align-items: center;
}
.right-align{
    text-align: right;
}
.blue{
  color:#006ca4;
}
.grey-bkg{
    /* background: #ccc;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(204,204,204,1) 100%); */
    background-image: url(ma_grey-bkg.png);
    background-size: contain;
    padding: 10px 25px 10px 0;
    background-repeat: no-repeat;
   /* width: 180px !important;*/
}
.display-block{
    display: block;
}
.always-flex{
    display: flex !important;
    flex-wrap: nowrap !important;
}

/* links */
a{
    transition: all 300ms ease-out;
    text-decoration: none;
}
main a,
.infomap a:hover{
    color: #0072b7;
}
aside .home-menu ul a{
    font-size: 17px;
}
.readmore{
    font-weight: 500;
    font-style: italic;
    font-size: 14px;
}
main a:hover,
.infomap a{
    color: #00507f;
}
main a:hover{
    text-decoration: underline;
}
#breadcrubm a:hover, .bottomlinks a:hover{
    text-decoration: none;
}
/* end links */

/* page titles */
h1, h2, h3, h4{
    font-size: 18px;
    line-height: 1.2;
}
h3, h4{
    font-size: 17px;
}
h2, h3, h4{
    color:#646566;
}
article h1, article h2, article h3, article h4,
.white-box h1, .white-box h2, .white-box h3, .white-box h4{
    margin-bottom: 10px;
}
.container .page-title,
.container .feat-projects > h2{
    font-size: 24px;
    font-weight: 400;
    color: #0072b7;
    border-bottom: 1px solid #0072b7;
    line-height: 1;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.container .page-title-small{
    font-size: 19px;
    font-weight: 600;
}
/* end page titles */

/* iframes */
iframe{
    max-width: 100%;
    display: block;
}

/* list */
main ul,
main ol{
    margin: 10px 0 20px 20px;
}
main ul{
    list-style: none;
}
main ol{
    list-style-type: decimal;
}
main ul li,
main ol li{
    margin-bottom: 5px;
}
main ul li{
    position: relative;
}
main ul > li::before{
    content: " ";
    display: block;
    width: 5px;
    height: 5px;
    background-color: #0072b7;
    position: absolute;
    left: -15px;
    top: 9px;
}
.accordion > ul, 
.boxes > ul,
.flex-wrap,
#breadcrubm ul,
#breadcrubm li,
.tabs > ul > li,
.tabs > ul,
.accordion > ul, 
.boxes > ul,
.logo-text-wrap > ul,
.logo-text-wrap > ul > li,
.two-cols,
.two-cols > li,
.three-cols,
.three-cols > li,
.four-cols,
.four-cols > li,
.key-events .white-box > ul,
.key-events .white-box > ul > li,
.search-results > ul,
.search-results > ul > li,
.program-list,
.preview-thumbs-top,
.preview-thumbs,
.preview-thumbs-top > li,
.preview-thumbs > li{
    margin: 0;
}
#breadcrubm li::before,
.accordion > ul > li::before, 
.boxes > ul > li::before,
.flex-wrap > li::before,
.tabs > ul > li::before,
.logo-text-wrap > ul > li::before,
.two-cols > li::before,
.three-cols > li::before,
.four-cols > li::before,
.key-events .white-box > ul > li::before,
.search-results > ul > li::before,
.program-list > li::before,
.preview-thumbs-top > li::before,
.preview-thumbs > li::before{
    content: none;
}
nav li,
.special-banner li{
    list-style: none;
}
/* end list */

/* style for small italic fonts */
.small-em{
    font-size: 11px;
    font-style: italic;
}
/* end style for small italic fonts */

/* table */
table{
    border-spacing: 0;
    margin-bottom: 25px;
}
table th,
table td{
    padding: 10px 25px 10px 0;
    text-align: left;
    transition: all 500ms ease-out;
    font-size: 15px;
}
table th:first-of-type,
table td:first-of-type{
    text-align: left;
}
.v-align-bottom td{
    vertical-align: bottom;
}
table th{
    font-weight: 700;
    color: #00609e;
    white-space: nowrap;
    line-height: 1.2;
}
table th{
    border-bottom: 1px solid #00609e;
}
table td{
    border-top: 1px solid #d8d9da;
    margin: 0 !important;
}
table tr:first-of-type td{
    border-top: none;
}
table td td{
    padding: 0;
    padding-left: 10px;
}
table td td:first-of-type{
    padding-left: 0;
}
table table{
    margin-bottom: 0;
}
.container td h1, .container th h1, 
.container td h2, .container th h2, 
.container td h3, .container th h3,
.container td h4, .container th h4, 
.container td h5, .container th h5{
    margin-bottom: 0;
    font-size: 16px;
}
.container td p,
.container th p{
    margin-bottom: 0;
}
.tablefirstnowrap td:first-of-type,
.nowrap{
    white-space: nowrap;
}

/* responive tables, under 700px x-scrollable wrapper */
table{
    min-width: 680px;
}
.table-wrap {
    overflow-x: scroll;
}
table table{
    min-width: unset;
}
.two-cols table{
    min-width: 400px;
}

/* end table */

/* form items */
main select,
main .form-item input,
main .form-item textarea{
    padding: 5px;
    border: none;
    display: block;
    font-size: 14px;
    background-color: #f6f5f4;
}
main select{
    height: 35px;
    padding: 0 5px;
    border-radius: 0% !important;
}

/* style select list input from w3schools https://www.w3schools.com/howto/howto_custom_select.asp */
/* The container must be positioned relative: */
.form-type-select{
    position: relative;
}
.form-type-select select {
  display: none; /*hide original SELECT element: */
}
.select-selected {
  background-color: #f6f5f4;
}
/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #00609e transparent transparent transparent;
  transition: all 300ms ease-out;
}
/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #00609e transparent;
  top: 7px;
}
/* style the items (options), including the selected item: */
.select-items div,
.select-selected{
  color: #000;
  line-height: 1;
  font-size: 12px;
  padding: 11px 35px 11px 10px;
  cursor: pointer;
  position: relative;
  transition: all 300ms ease-out;
}
.select-selected{
    font-size: 13px;
}
/* Style items (options): */
.select-items{
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  background-color: #f6f5f4;
  outline: 1px solid #fff;
}
.select-items > div{
  box-sizing: border-box;
  outline: 1px solid #fff;
  background-color: #f6f5f4;
  width: 100%;
  padding-right: 10px;
}
.form-type-select-year .select-selected{
    width: 60px;
}
.container .form-item.form-type-select-year{
    width: 105px;
}
.form-type-select-year .select-items > div{
    width: 25%;
}
.form-type-select-country .select-selected{
    width: 90px;
}
.container .form-item.form-type-select-country{
    width: 135px;
}
.form-type-select-year .select-items,
.form-type-select-country .select-items{
    width: 200%;
}
.form-type-select-country .select-items > div,
.form-type-select-product .select-items > div,
.form-type-select-sector .select-items > div,
.form-type-select-division .select-items > div{
    width: 50%;
}
.form-type-select-product .select-selected,
.form-type-select-sector .select-selected{
    width: 250px;
}
.container .form-item.form-type-select-product,
.container .form-item.form-type-select-sector{
    width: 295px;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}
.select-items div:hover, .same-as-selected {
  background-color: #00609e;
  color: #fff;
}
/* end style select list input from w3schools https://www.w3schools.com/howto/howto_custom_select.asp */

main .form-items-row.two-cols,
main .form-items-row.three-cols,
main .form-items-row.four-cols{
    margin-top: 0;
}
main .form-item{
    margin-right: 10px;
    margin-bottom: 20px;
}
main .form-item label{
    color: #00609e;
    font-size: 14px;
    margin-bottom: 7px;
    line-height: 1.2;
    display: block;
}
main .form-item input{
    border: none;
    transition: all 300ms ease-out;
    height: 35px;
    box-sizing: border-box;
}
main .form-item.form-actions{
    margin-top: 25px;
}

/* style checkbox & radio input based on w3schools https://www.w3schools.com/howto/howto_css_custom_checkbox.asp */
/* Customize the label (the container) */
.form-type-checkbox,
.form-type-radio{
    position: relative;
}
.container .form-type-checkbox label,
.container .form-type-radio label{
    position: relative;
    z-index: 10;
    display: block;
    padding-left: 33px;
    margin-bottom: 0;
    cursor: pointer;
    font-size: 12px;
    line-height: 25px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* Hide the browser's default checkbox */
.container .form-type-checkbox input,
.container .form-type-radio input{
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  transition: all 300ms ease-out;
}
.form-type-radio .checkmark{
    border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.form-type-checkbox:hover input + .checkmark,
.form-type-radio:hover input + .checkmark {
  background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.form-type-checkbox input:checked + .checkmark,
.form-type-radio input:checked + .checkmark{
  background-color: #0072b7;
}
/* Create the checkmark/indicator (hidden when not checked) */
.form-type-checkbox .checkmark:after,
.form-type-radio .checkmark:after{
  content: "";
  position: absolute;
  display: none;
}
/* Show the checkmark when checked */
.form-type-checkbox input:checked + .checkmark:after,
.form-type-radio input:checked + .checkmark:after{
  display: block;
}
/* Style the checkmark/indicator */
.form-type-checkbox .checkmark:after{
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* Style the indicator (dot/circle) */
.form-type-radio .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
/* end style checkbox & radio input based on w3schools https://www.w3schools.com/howto/howto_css_custom_checkbox.asp */

/* form-type-checkbox-filter showed in transparency-Key Documents */
.container main .form-type-checkbox-filter{
    display: flex;
    flex-wrap: wrap;
}
.container main .form-type-checkbox-filter label{
    font-size: 14px;
    border: 1px solid #98a1aa;
    color: #98a1aa;
    padding: 10px;
    border-radius: 2px;
    cursor: pointer;
    transition: all 300ms ease-out;
    line-height: 1.2;
}
.container main .form-type-checkbox-filter .form-type-checkbox input{
    display: none;
}
.container main .form-type-checkbox-filter .form-type-checkbox input:checked + label,
.container main .form-type-checkbox-filter label:hover{
    border: 1px solid #00609e;
    color: #fff;
    background-color: #00609e
}
textarea{
    width: 100%;
    box-sizing: border-box;
}
.container main input[type="file"]{
    background-color: transparent;
}
.form-type-file{
    font-size: 14px;
    margin-bottom: 15px;
}
.form-type-file input{
    font-size: 14px;
    cursor: pointer;
}
.form-type-file label{
    margin-right: 10px;
}
main .form-item input,
main .form-item select,
main .form-item textarea{
    width: 100%;
    transition: all 300ms ease-out;
}
main .form-item.form-actions input{
    display: block;
    background-color: #00609e;
    height: auto;
    cursor: pointer;
    color: #fff;
    padding: 10px 30px;
    width: auto;
}
main .form-item input:focus,
main .form-item textarea:focus{
    background-color: rgba(0,114,183,0.1);
}
main .apply-finance .form-item input:focus,
main .apply-finance .form-item textarea:focus{
    background-color: rgba(255,255,255,0.8);
}
main .select-search-form .form-item.form-actions input{
    height: 35px;
}
.container main .form-item.form-type-checkbox input{
    width: auto;
}
.container main .form-actions input:hover,
.container main .form-actions input:focus{
    background-color: #000;
}
/* end form items */

hr{
    background-color: #ccc;
    border: none;
    margin: 30px 0;
    height: 1px;
}

/* related documents links */
.related-docs{
    display: flex;
    flex-wrap: wrap;
}
.related-docs a{
    background-color: #eaeaeb;
    display: flex;
    padding: 10px;
    margin-right: 1%;
    margin-bottom: 1%;
    color: #1f1e21;
    line-height: 1.4;
    width: 24%;
    box-sizing: border-box;
}
.container .related-docs a{
    padding-right: 10px;
    padding-left: 35px;
}
.related-docs a,
.related-docs-list a{
    font-size: 13px;
}
.related-docs-list a{
    font-weight: 600;
}
main a[href$=".pdf"],
main a[href$=".doc"],
main a[href$=".docx"],
main a[href$=".xls"],
main a[href$=".xlsx"],
main a[href$=".ppt"],
main a[href$=".pptx"]{
    position: relative;
    padding-right: 27px;
    display: inline-block;
}
main a[href$=".pdf"]::after,
main a[href$=".doc"]::after,
main a[href$=".docx"]::after,
main a[href$=".xls"]::after,
main a[href$=".xlsx"]::after,
main a[href$=".ppt"]::after,
main a[href$=".pptx"]::after{
    right: 3px;
}
.related-docs a::after{
    right: unset;
    left: 8px;
}
main a[href$=".pdf"]::after,
main a[href$=".doc"]::after,
main a[href$=".docx"]::after,
main a[href$=".xls"]::after,
main a[href$=".xlsx"]::after,
main a[href$=".ppt"]::after,
main a[href$=".pptx"]::after{
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    display: block;
    background-image: url(ma_pdf-icon.png);
    content: " ";
    background-position: center;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    min-width: 20px;
}
main a[href$=".doc"]::after,
main a[href$=".docx"]::after{
    background-image: url(ma_word-icon.png);
}
main a[href$=".xls"]::after,
main a[href$=".xlsx"]::after{
    background-image: url(ma_xls-icon.png);
}
main a[href$=".ppt"]::after,
main a[href$=".pptx"]::after{
    background-image: url(ma_ppt-icon.png);
}
.homebuttons a[href$=".pdf"]::after,
.homebuttons a[href$=".doc"]::after,
.homebuttons a[href$=".docx"]::after,
.homebuttons a[href$=".xls"]::after,
.homebuttons a[href$=".xlsx"]::after,
.homebuttons a[href$=".ppt"]::after,
.homebuttons a[href$=".pptx"]::after,
.bottomlinks a[href$=".pdf"]::after,
.bottomlinks a[href$=".doc"]::after,
.bottomlinks a[href$=".docx"]::after,
.bottomlinks a[href$=".xls"]::after,
.bottomlinks a[href$=".xlsx"]::after,
.bottomlinks a[href$=".ppt"]::after,
.bottomlinks a[href$=".pptx"]::after{
    content: none;
}

.textwrap a[href$=".pdf"],
.textwrap a[href$=".doc"],
.textwrap a[href$=".docx"],
.textwrap a[href$=".xls"],
.textwrap a[href$=".xlsx"],
.textwrap a[href$=".ppt"],
.textwrap a[href$=".pptx"]{
    display: contents;
}

.textwrap a[href$=".pdf"]::after,
.textwrap a[href$=".doc"]::after,
.textwrap a[href$=".docx"]::after,
.textwrap a[href$=".xls"]::after,
.textwrap a[href$=".xlsx"]::after,
.textwrap a[href$=".ppt"]::after,
.textwrap a[href$=".pptx"]::after{
	transform: translateY(3px);  
	padding-left: 4px;
    display: inline-block;
	position: unset;
}
/* end related documents links */
/*** end General Styles ***/

/*** Header ***/
header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
}
.nojs.home header{
    overflow: visible;
}
.tophead{
    position: absolute;
    right: 0;
    top: 0;
    z-index: 100;
    padding: 20px 35px;
}
aside nav ul a,
.tophead{
    font-size: 15px;
}
.tophead nav{
    text-align: right;
    float: right;
}
.tophead .search{
    float: right;
}
.tophead nav li{
    display: inline-block;
    margin-left: 15px;
}
.tophead nav a{
    opacity: 0.8;
    color: #fff;
    display: block;
    padding: 9px 5px;
    line-height: 12px;
}
.tophead nav a:hover,
.tophead nav a.active{
    opacity: 1;
}
.topbanner{
    height: 195px;
    margin-left: 195px;
    display: block;
    position: relative;
}
.topbanner::after,
.slider > div > a::after,
.container.sh-two::after{
    content: " ";
    display: block;
    top: 0;
    right: 0;
    width: 100%;
}
.topbanner::after,
.slider > div > a::after{
    position: absolute;
    height: 100%;
    background: -moz-linear-gradient(45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
    background: -webkit-linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%);
    background: linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#99000000',GradientType=1 );
}
.container.sh-two::after{
    position: absolute;
    height: 250px;
    background: -moz-linear-gradient(4deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%);
    background: -webkit-linear-gradient(4deg, rgba(0,0,0,0) 50%,rgba(0,0,0,0.3) 100%);
    background: linear-gradient(4deg, rgba(0,0,0,0) 50%,rgba(0,0,0,0.3) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#99000000',GradientType=1 );
}
.container.sh-two{
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100%;
    background-blend-mode: multiply;
    background-color: #eef5fa;
}
.container.sh-two main{
    z-index: 80;
}
.special-banner{
    margin-left: 195px;
    position: relative;
}

/* special top banners, Cumulative Portfolio & Member Countries */ 
.special-banner > img{
    display: block;
    width: 100%;
}
.infomap > ul > li{
    position: absolute;
}
.infomap .flex-wrap::after{
    content: " ";
    display: block;
    height: 20px;
    width: 1px;
    background-color: #00609e;
    position: absolute;
    left: -4px;
    bottom: -19px;
    transform: rotate(25deg);
}
.infomap .right-top-kodari .flex-wrap::after{
    left: unset;
    right: -4px;
    bottom: 28px;
}
.infomap .flex-wrap{
    background-color: #003d6c;
    color: #fff;
    height: 30px;
    display: flex;
    transition: all 300ms ease-out;
}
.infomap li:hover .flex-wrap,
.infomap > ul > li:hover .flex-wrap::after,
.infomap > ul > li:hover .flex-wrap span:last-of-type{
    background-color: #4f9bce;
}
.infomap .flex-wrap img{
    height: 30px;
    width: auto;
	max-width: none;
}
.infomap .flex-wrap span{
    position: relative;
    display: block;
    height: 30px;
    box-sizing: border-box;
    line-height: 1;
    white-space: nowrap;
}
.by-country.infomap .flex-wrap span,
.infomap .flex-wrap span:last-of-type{
    padding: 8px 12px;
}
.infomap .flex-wrap span:last-of-type{
    background-color: #003d6c;
    transition: all 300ms ease-out;
}
.infomap .flex-wrap span:first-of-type{
    background-color: #4f9bce;
    font-weight: 700;
}
.by-country.infomap .flex-wrap span:first-of-type{
    padding-right: 20px;
}
.infomap .flex-wrap span:last-of-type::after{
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-bottom: 30px solid #003d6c;
    border-left: 10px solid transparent;
    position: absolute;
    left: -10px;
    top: 0;
    transition: all 300ms ease-out;
}
.infomap  > ul > li:hover .flex-wrap span:last-of-type::after{
    border-bottom: 30px solid #4f9bce;
}
.infomap > ul > li:nth-of-type(1){ /* albania */
    top: 50%;
    left: 21%;
}
.infomap > ul > li:nth-of-type(2){ /* Armenia */
    top: 52%;
    left: 82%;
}
.infomap > ul > li:nth-of-type(3){ /* Azerbaijan */
    top: 58%;
    left: 91%;
}
.infomap > ul > li:nth-of-type(4){ /* Bulgaria */
    top: 40%;
    left: 34%;
}
.infomap > ul > li:nth-of-type(5){ /* Georgia */
    top: 38%;
    left: 78%;
}
.infomap > ul > li:nth-of-type(6){ /* Greece */
    top: 61%;
    left: 25%;
}
.infomap > ul > li:nth-of-type(7){ /* Moldova */
    top: 10%;
    left: 40%;
}
.infomap > ul > li:nth-of-type(8){ /* Romania */
    top: 22%;
    left: 30%;
}
.infomap > ul > li:nth-of-type(9){ /* Russia */
    top: 16%;
    left: 76%;
}
.infomap > ul > li:nth-of-type(10){ /* Turkey */
    top: 60%;
    left: 54%;
}
.infomap > ul > li:nth-of-type(11){ /* Ukraine */
    top: 7%;
    left: 54%;
}
.infomap-note-wrap{
    position: absolute;
    right: 50px;
    bottom: 65px;
    max-width: 490px;
    display: flex;
    flex-direction: row-reverse;
}
.infomap-note{
    font-size: 18px;
    color: #003d6c;
    font-weight: 500;
    margin-left: 30px;
    position: relative;
    line-height: 1.2;
}
.infomap-note:nth-of-type(2n+2){
    color: #4f9bce;
}
.infomap-note::after{
    content: " ";
    background-color: #003d6c;
    height: 1px;
    width: 100px;
    position: absolute;
    top: -10px;
    display: block;
}
.infomap-note:nth-of-type(2n+2)::after{
    background-color: #4f9bce;
}
.infomap-note strong{
    font-size: 34px;
    display: block;
}
.range{
    position: absolute;
    left: 100px;
    bottom: 0;
}
.years-list{
    position: relative;
}
.years-list li{
    opacity: 0;
    transition: all 300ms linear;
    position: absolute;
    left: 0;
    top: 0;
}
.years-list .show-year{
    opacity: 1;
}
#timeline-years > li::after{
    bottom: -53px;
}

/* The range slider itself */
#timeline{
    -webkit-appearance: none;  /* Override default CSS styles */
    -moz-appearance: none; /* FF */
    -ms-appearance: none; /* Edge */
    appearance: none;
    width: 300px; /* Full-width */
    height: 25px; /* Specified height */
    background: transparent; /* Grey background */
    border-bottom: 2px solid #ccc;
    outline: none; /* Remove outline */
    opacity: 0.8; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
    margin-bottom: 20px;
    background-image: url(ma_ranger-point.png);
    background-position: left bottom;
    background-repeat: repeat;
    display: block;
    box-sizing: border-box;
}
#timeline::-ms-track,
#timeline::-ms-fill-lower,
#timeline::-ms-fill-upper{
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    color: transparent;
}

/* range slider mouse-over effects */
#timeline:hover {
    opacity: 1; /* Fully shown on mouse-over */
}
.range{
    color: #0071ba;
    font-size: 14px;
    font-weight: 700;
}
.grey{
    color: #646566;
}

/* The slider handle (use webkit (Chrome, Opera, Safari, Edge) and moz (Firefox) to override default look) */ 
#timeline::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 15px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    cursor: pointer; /* Cursor on hover */
    background-image: url(ma_ranger.png);
    background-position: center;
    background-repeat: no-repeat
}
#timeline::-moz-range-thumb{
    width: 15px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    cursor: pointer; /* Cursor on hover */
    background-image: url(ma_ranger.png);
    background-position: center;
    background-repeat: no-repeat
}
#timeline::-ms-thumb {
    border: none;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background: #2a8dc7;
}
.range-minmax{
    position: absolute;
    top: 50px;
}
.range-min{
    left: -10px;
}
.range-max{
    right: -10px;
}
.percent-banner img{
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0.6;
}
.percent-banner ul{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.by-products.percent-banner ul{
    text-align: right;
    font-size: 40px;
    padding-right: 40px;
    right: 0;
}
.by-sector.percent-banner ul{
    width: 700px;
    height: 700px;
    right: 50%;
    margin-right: -350px;
}
.by-sector.percent-banner ul::after{
    content: " ";
    background-image: url(ma_by-sector-logo.png);
    display: block;
    width: 80px;
    height: 80px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-position: center;
    background-repeat: no-repeat;
}
@media only screen and (max-width: 2000px) {
    .by-sector.percent-banner ul{
        transform: translateY(-50%) scale(0.9);
    }
}
.by-sector.percent-banner li{
    text-align: center;
    color: #fff;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    font-size: 12px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: absolute;
    box-sizing: border-box;
    padding: 10px;
    transform: translate(-50%, -50%);
    z-index: 10;
}
.by-products.percent-banner li{
    margin-bottom: 5px;
    line-height: 1;
}
.percent-banner li span{
    font-weight: 700;
}
.by-sector.percent-banner li span,
.by-sector.percent-banner li div{
    display: block;
    width: 100%;
}
.percent::after{
    content: "%";
}
.by-products.percent-banner li:nth-of-type(7n+1){
    color: #0072b7;
}
.by-products.percent-banner li:nth-of-type(7n+2){
    color: #4f9bce;
}
.by-products.percent-banner li:nth-of-type(7n+3){
    color: #87888a;
}
.by-products.percent-banner li:nth-of-type(7n+4){
    color: #4f9bce;
}
.by-products.percent-banner li:nth-of-type(7n+5){
    color: #b1b3b4;
}
.by-products.percent-banner li:nth-of-type(7n+6){
    color: #00315d;
}
.by-products.percent-banner li:nth-of-type(7n+7){
    color: #87888a;
}
.by-sector.percent-banner li:nth-of-type(11n+1){
    left: 80%;
    top: 83%;
    background-color: #4f9bce;
}
.by-sector.percent-banner li:nth-of-type(11n+2){
    left: 49%;
    top: 80%;
    background-color: #00315d;
}
.by-sector.percent-banner li:nth-of-type(11n+3){
    left: 20%;
    top: 82%;
    background-color: #4f9bce;
}
.by-sector.percent-banner li:nth-of-type(11n+4){
    left: 20%;
    top: 55%;
    background-color: #0072b7;
}
.by-sector.percent-banner li:nth-of-type(11n+5){
    left: 12%;
    top: 30%;
    background-color: #00315d;
}
.by-sector.percent-banner li:nth-of-type(11n+6){
    left: 35%;
    top: 23%;
    background-color: #4284b0;
}
.by-sector.percent-banner li:nth-of-type(11n+7){
    left: 53%;
    top: 8%;
    background-color: #b1b3b4;
}
.by-sector.percent-banner li:nth-of-type(11n+8){
    left: 66%;
    top: 25%;
    background-color: #4f9bce;
}
.by-sector.percent-banner li:nth-of-type(11n+9){
    left: 88%;
    top: 27%;
    background-color: #87888a;
}
.by-sector.percent-banner li:nth-of-type(11n+10){
    left: 80%;
    top: 46%;
    background-color: #00609e;
}
.by-sector.percent-banner li:nth-of-type(11n+11){
    left: 96%;
    top: 61%;
    background-color: #87888a;
}
.by-sector.percent-banner .sector-line{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 1px;
    background-color: #ccc;
    transform-origin: left center;
}
.by-sector.percent-banner .sector-line:nth-of-type(2n+2){
    width: 200px;
}
/* special top banners, Cumulative Portfolio & Member Countries */ 

/* search block */
.search{
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  height: 30px;
  overflow: hidden;
}
.search input,
.search-close{
  color: #fff;
  border: none;
  display: block;
  position: relative;
  transition: all 300ms ease-out;
  opacity: 0.6;
}
.search input{
  transition: width 300ms ease-out;
}
.search .form-actions{
  position: relative;
  display: block;
  opacity: 0.7;
}
.search-close,
.search .form-actions input{
  width: 30px;
  height: 30px;
  overflow: hidden;
  cursor: pointer;
}
.search .form-actions input{
  display: none;
  background-color: transparent;
  color: transparent;
}
.search .form-type-search{
  display: flex;
}
.form-type-search input{
  font-size: 16px;
  width: 0;
  height: 100%;
  background-color: transparent
}
.select-search-form .form-items-row{
    display: flex;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.select-search-form .form-actions input,
.search .form-actions input{
    background-image: url(ma_search.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: transparent !important;
}
.container .select-search-form .form-actions input{
    width: 35px;
    padding: 0;
}
.container .select-search-form .form-actions{
    align-self: flex-end;
    margin-top: 0;
}
.search-close::after,
.search-close::before{
  content: " ";
  position: absolute;
  display: block;
  transition: all 400ms ease-out;
  z-index: 10;
}
.search-close::after{
  width: 40%;
  height: 40%;
  left: 30%;
  top: 30%;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 50%;
}
.search-close::before{
  top: 65%;
  left: 60%;
  background-color: #fff;
  width: 6%;
  height: 22%;
  transform: rotate(-45deg);
  transform-origin: left top;
  border-radius: 3px;
}
.sopen.search .form-type-search input{
  padding: 0 5px;
  margin: 0;
  width: 150px;
  background-color: transparent;
  border-bottom: 1px solid #fff;
  box-sizing: border-box;
}
.sopen.search .form-actions input{
  display: block;
}
.sopen .search-close::after,
.sopen .search-close::before{
  top: 25%;
  left: 47%;
  background-color: #fff;
  width: 6%;
  height: 50%;
  transform: rotate(45deg);
  border: none;
  border-radius: 0;
  transform-origin: center center;
}
.sopen .search-close::after{
  transform: rotate(-45deg);
  border: 1px solid #fff;
}
.sopen .search-close::before{
  transform: rotate(45deg);
}
.search-close:hover,
.search .form-actions input:hover,
.search .form-actions:hover,
.search .form-type-search input:focus{
  opacity: 1;
}
/* end search block */
/*** end Header ***/


/*** Aside ***/
aside{
    position: fixed;
    top: 0;
    left: 0;
    width: 195px;
    z-index: 100;
}
.logos{
    position: relative;
}
.logos,
.logos img{
    display: block;
}
.logo{
    background-color: #1f1e21;
    transition: all 500ms ease-out;
    width: 100%;
}
.logos:hover .logo{
    background-color: #000;
}
.logo2{
    position: absolute;
    left: 195px;
    bottom: 0;
    height: auto;
    width: 195px;
    transition: width 300ms ease-out;
}
.under.scrolled-header .logo2{
    width: 85px;
}
aside nav{
    text-align: right;
    position: relative;
}
aside nav ul{
    overflow: hidden;
}
aside nav ul a{
    display: block;
    color: #fff;
    padding: 10px 15px 10px 10px;
    line-height: 1.3;
    background-color: #2a8dc7;
    position: relative;
}
aside .menu > li > a::after{
    content: " ";
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 1px;
    background-color: #0080c1;
    position: absolute;
    bottom: 0;
    right: 15px;
}
aside nav ul li:last-of-type a::after,
aside .home-menu .menu > li > a::after{
    content: none;
}
aside nav ul a:hover,
aside nav ul li:hover > a,
aside nav ul a.active{
    background-color: #006ca4;
    color: rgba(255,255,255,1);
}
aside nav ul{
    margin-bottom: 4px;
}
aside nav ul:last-child{
    margin-bottom: 0;
}
aside .menu li ul{
    position: absolute;
    left: -450px;
    top: 0;
    transition: all ease-out 500ms;
    z-index: -1;
    background-color: #222;
    padding: 11px 0;
    display: flex;
    flex-wrap: wrap;
    width: 420px;
}
aside .menu li ul li{
    width: 50%;
}
aside .menu li ul li:nth-of-type(2n+1){
    width: 35%;
}
aside .menu li ul li:nth-of-type(2n){
    width: 65%;
}
aside .menu li.openul ul{
    left: 100%;
}
aside .menu li ul a{
    white-space: nowrap;
    text-align: left;
    color: #fff;
    padding: 11px 25px; 
    font-weight: 500;
    line-height: 1;
    font-size: 15px;
}
aside .menu li ul a span{
    opacity: 0.7;
    transition: all 300ms ease-out;
}
aside .menu li ul a img{
    height: 17px;
    display: inline-block;
    padding-right: 10px;
    line-height: 1;
    position: relative;
    top: 3px;
}
aside .menu li ul a:hover span,
aside .menu li ul a.active span{
    opacity: 1;
}
aside .menu li li a,
aside nav li li:hover > a{
    background-color: transparent;
    border: none;
}
aside nav h2{
    color: #fff;
    background-color: #0071ba;
    position: relative;
    padding: 15px 15px 15px 30px;
}
aside nav h2 a{
    color: #fff;
    font-weight: 500;
    font-size: 16px;
}
.goback{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 25px;
    height: 25px;
    left: 5px;
    background-image: url('ma_goback.png');
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
    transition: all 300ms ease-out;
    z-index: 100;
}
.goback:hover{
    opacity: 1;
}
.asideimglinks a{
    display: block;
    overflow: hidden;
    margin-bottom: 4px;
}
.asideimglinks img{
    display: block;
    width: 100%;
    transition: all 300ms ease-out; 
}
.asideimglinks a:hover img{
    transform: scale(1.04);
}
.asidelinks{
    margin-top: 4px;
}
.asidelinks a{
    display: block;
    color: #fff;
    background-color: #0071ba;
    padding: 15px;
    text-align: right;
    line-height: 1;
}
.asidelinks a:hover{
    background-color: #00609e;
}
/*** end Aside ***/


/*** main ***/
main{
    position: relative;
    box-sizing: border-box;
    padding-top: 25px;
}
main article{
    margin-bottom: 30px;
}

/* #breadcrubm */
#breadcrubm{
    margin-bottom: 50px;
}
#breadcrubm li{
    list-style: none;
    display: inline-block;
    font-size: 13px;
    color: #0072b7;
}
#breadcrubm a{
    color: #9b9c9e;
    position: relative;
}
#breadcrubm a::after{
    content: "/";
    color: #9b9c9e;
    padding-left: 3px;
}
.sh-two #breadcrubm a,
.sh-two #breadcrubm li,
.sh-two #breadcrubm a::after{
    color: #fff;
}
#breadcrubm a:hover{
    color: #0072b7;
}
.sh-two #breadcrubm a:hover{
    color: #1f1e21;
}
.sh-two #breadcrubm li{
    font-weight: 600;
}
.sh-two #breadcrubm a{
    font-weight: 400;
}
/* end #breadcrubm */

/* tabs */
.tabs{
    margin-top: 25px;
}
.tab-links{
    display: flex;
    position: relative;
    line-height: 1.3;
}
.tab-links::after{
    content: " ";
    height: 1px;
    width: 4000px;
    display: block;
    position: absolute;
    bottom: 0;
    left: -1500px;
    background-color: #0072b7;
}
.tab-links > *{
    margin-right: 5px;
    box-sizing: border-box;
    background-color: #b1b3b4;
}
.tabs > ul{
    background-color: #f6f5f4;
    padding: 25px 0;
    position: relative;
}
.tabs > ul > li{
    display: none;
}
.tabs > ul > li:first-of-type{
    display: block;
}
.multirows > ul,
.forum-page .tabs > ul{
    background-color: transparent;
}
.multirows > ul{
    padding-bottom: 0;
}
.multirows > ul > li > h2,
.multirows > ul > li > .tab-content > h2,
.multirows > ul > li > h3,
.multirows > ul > li > .tab-content > h3{
    color: #0072b7;
    border-bottom: 1px solid #0072b7;
    line-height: 1.2;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-weight: 500;
}
.tabs.multirows > ul::after,
.tabs.multirows > ul::before,
.tabs.multirows .tab-links::after,
.forum-page .tabs > ul::after,
.forum-page .tabs > ul::before,
.forum-page .tabs .tab-links::after{
    content: none;
}
.tabs.multirows .tab-links > *{
    color: #b0b1b3;
    border: 1px solid #b0b1b3;
    background-color: transparent;
    font-size: 15px;
    border-radius: 19px;
    font-weight: 500;
}
.tabs.multirows .tab-links.boxes > *{
    color: #0072b7;
    border: 1px solid #0072b7;
    background-color: transparent;
    border-radius: 0;
    font-weight: 500;
    text-align: center;
}
.tabs.multirows .tab-links.boxes > *:hover,
.tabs.multirows .tab-links.boxes > .active-tab{
    background-color: #0072b7;
    color: #fff;
}
.tab-links > *:hover,
.tab-links > .active-tab{
    background-color: #00609e;
}
.tabs.multirows .tab-links *:hover,
.tabs.multirows .tab-links .active-tab{
    color: #000;
}

/* end tabs */

/* boxes */
.boxes{
    margin-top: 50px;
}
.boxes > ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.boxes > ul > li{
    width: 49%;
    background-color: #fff;
    padding: 15px 15px 50px;
    box-sizing: border-box;
}
.boxes > ul > li:nth-child(-n+2){
    margin-top: 0;
}
.boxes > ul > li > :first-child{
    font-weight: 500;
    position: relative;
    margin-bottom: 10px;
    padding-bottom: 10px;
    font-size: 20px;
}
.boxes > ul > li > :first-child::after{
    content: " ";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100px;
    background-color: #4f9bce;
}
.boxes .readmore{
    position: absolute;
    left: 15px;
    bottom: 15px;
}
/* end boxes */

/* accordion */
.accordion > ul > li > :first-child{
    margin: 0;
}
.accordion > ul > li > :first-child:hover,
.accordion > ul > li.active-thumb > :first-child{
    background-color: #0072b7;
}
.accordion .white-box{
    display: none;
}
.accordion > ul > li > :first-child::after{
    content: " ";
    display: block;
    width: 16px;
    height: 22px;
    overflow: hidden;
    position: absolute;
    right: 15px;
    top: 10px;
    background-image: url(ma_linkarrow.png);
    transition: all 300ms ease-out;
}
.accordion > ul > li > :first-child::after{
    transform: rotate(90deg);
}
.accordion > ul > li.active-thumb > :first-child::after{
    transform: rotate(270deg);
}
.accordion table{
    width: 100%;
}
/* end accordion */

/* common styles accordion & tabs & boxes & key-events */
.accordion > ul > li,
.boxes > ul > li,
.key-events{
    margin: 30px 0 0;
    position: relative;
}
.accordion > ul > li > :first-child,
.key-events > h2,
.tab-links > *{
    color: #fff;
    font-weight: 400;
    padding: 10px 25px;
    transition: all 300ms ease-out;
    position: relative;
    font-size: 17px;
    cursor: pointer;
}
.accordion > ul > li > :first-child{
    padding-right: 35px;
}
.tabs.multirows .tab-links > *{
    margin-bottom: 10px;
}
.key-events > h2{
    cursor: auto;
}
.tabs.multirows .tab-links > *{
    padding: 7px 10px;
}
.accordion > ul > li > :first-child, 
.key-events > h2{
    background-color: #4f9bce;
}
/* end common styles accordion & tabs & boxes & key-events */

/* bottomlinks */
.bottomlinks{
    margin-top: 50px;
    display: flex;
}
.bottomlinks a{
    display: inline-block;
    border: 1px solid #0072b7;
    line-height: 1;
    font-weight: 500;
    color: #fff;
    padding: 20px 30px;
    margin-right: 20px;
    background-color: #0072b7;
}
.bottomlinks a:hover{
    background-color: #fff;
    color: #0072b7;
}
.print{
    cursor: pointer;
    color: #0072b7;
    transition: all 300ms ease-out;
    display: inline-block;
    font-size: 12px;
    padding-left: 35px;
    position: relative;
}
.print::before{
    content: " ";
    width: 25px;
    height: 25px;
    display: block;
    background-image: url(ma_print.png);
    background-position: center top;
    position: absolute;
    left: 0;
    top: -5px;
}
.print:hover{
    color: #000;
}
.print:hover::before{
    background-position: center bottom;
}
/* end bottomlinks */
/*** end Main ***/

/* Home extra styles */
.home main{
    overflow: hidden;
    height: 100vh;
    height: 100%;
    padding: 0;
    margin: 0;
    max-width: none;
}
aside .home-menu ul a{
    padding: 15px 20px;
    background-color: #0071ba;
}
aside .home-menu a:hover,
aside .home-menu a.active{
    background-color: #00609e;
}
aside .home-menu li:nth-of-type(4n+2) a{
    background-color: #0080c1;
}
aside .home-menu li:nth-of-type(4n+2) a:hover,
aside .home-menu li:nth-of-type(4n+2) a.active{
    background-color: #006ca4;
}
aside .home-menu li:nth-of-type(4n+3) a{
    background-color: #2a8dc7;
}
aside .home-menu li:nth-of-type(4n+3) a:hover,
aside .home-menu li:nth-of-type(4n+3) a.active{
    background-color: #2279aa;
}
aside .home-menu li:nth-of-type(4n+4) a{
    background-color: #4f9bce;
}
aside .home-menu li:nth-of-type(4n+4) a:hover,
aside .home-menu li:nth-of-type(4n+4) a.active{
    background-color: #4284b0;
}
.home h1{
    top: 50%;
    transform: translateY(-50%);
    font-weight: 400;
}
.home h1,
.home .slider h2{
    position: absolute;
    z-index: 99;
    left: 55%;
    font-size: 26px;
    padding-right: 30px;
    color: #fff;
    text-shadow: 0 0 2px rgba(0,0,0,0.8);
    line-height: 1.3;
}
.home .slider > div > a{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
.home .slider h2{
    font-weight: 500;
    margin-top: 15px;
}
.home .slider{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
}
.home .slider > div{
    background-size: cover;
    width: 100%;
}
.home.nojs .slider > div{
    background-image: url(ma_slide1.jpg);
}
.homebuttons{
    position: absolute;
    right: 0;
    bottom: 50px;
    width: 45%;
    display: flex;
    justify-content: stretch;
    z-index: 130;
}
.homebuttons img{
    width: 100%;
    display: block;
}
.container .homebuttons a{
    opacity: 0.85;
    transition: all 300ms ease-out;
    display: block;
    padding: 0;
}
.container .homebuttons a:hover{
    color: #fff;
    text-decoration: none;
    opacity: 1;
}
/* end home extra styles */


/* Specials banners (sh-one) & Background image (sh-two) extra styles */
.scrolled-header{
    background-color: #fff;
}
.scrolled-header header{
    position: relative;
    box-shadow: none;
}
.sh-one .tophead nav a{
    color: #00609e;
    font-weight: 500;
}
.sh-one .search-close::after,
.sh-one  .search .form-actions::after{
    border: 2px solid #00609e;
}
.sh-one .search-close::before, 
.sh-one .search .form-actions::before{
    background-color: #00609e;
}
.sh-one .sopen .search-close::after, 
.sh-one .sopen .search-close::before{
    background-color: #00609e;
}
.sh-one .sopen .search-close::after{
    border: 1px solid #00609e;
}
.sh-one .sopen.search .form-type-search input{
    border-bottom: 1px solid #00609e;
}
.sh-one .search input, 
.sh-one .search-close{
    color: #005587;
}
.sh-one .search .form-actions input{
    color: transparent;
    background-image: url(ma_search-blue.png);
}
/* end Specials banners (sh-one) & Background image (sh-two) extra styles */

/* projects-intro-menu */
.projects-intro-menu{
    text-align: right;
    position: absolute;
    right: 0;
    bottom: 0;
}
.projects-intro-menu li{
    display: inline-block;
}
.projects-intro-menu a{
    display: block;
    color: #fff;
    background-color: #4f9bce;
    padding: 20px 30px;
    margin-left: 5px;
    line-height: 1;
}
.projects-intro-menu a:hover,
.projects-intro-menu a.active{
    background-color: #003d6c;
}
/* end projects-intro-menu */


/* Featured Projects slider */
.feat-projects{
    background-color: #f6f5f4;
    padding: 50px 0;
    margin-top: 50px;
    position: relative;
}
.feat-projects::before,
.feat-projects::after,
.tabs > ul::before,
.tabs > ul::after{
    content: " ";
    display: block;
    height: 100%;
    width: 3000px;
    position: absolute;
    top: 0;
    background-color: #f6f5f4;
}
.feat-projects::before,
.tabs > ul::before{
    left: -3000px;
}
.feat-projects::after,
.tabs > ul::after{
    right: -3000px;
}
.feat-projects > h2{
    margin-top: 0;
    font-size: 20px;
    font-weight: 500;
}
.feat-proj-slider{
    display: flex;
    align-items: stretch;
}
.feat-projects article{
    background-color: #fff;
    padding-bottom: 35px;
}
.feat-projects article > a{
    display: block;
    overflow: hidden;
}
.feat-projects article > a img{
    transition: all 500ms ease-out;
}
.feat-projects article:hover > a img{
    transform: scale(1.02);
}
.feat-projects-text{
    color: #646566;
    padding: 10px;
}
.feat-projects-text h3{
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
}
.feat-projects-text a{
    display: block;
    position: absolute;
    left: 10px;
    bottom: 10px;
}
.feat-proj-slider article img{
    display: block;
    width: 100%;
}
/* end Featured Projects slider */

/* colorbox & bx-slider */
.bx-wrapper .bx-controls-direction a,
#cboxPrevious,
#cboxNext{
    width: 30px;
    height: 50px;
    background-image: url(ma_slide-arrows.png);
    background-repeat: no-repeat;
    opacity: 0.6;
}
#cboxPrevious,
#cboxNext{
    background-color: #000;
    transition: opacity 300ms ease-out;
    background-image: url(ma_colorbox-arrows.png);
}
#cboxPrevious:hover,
#cboxNext:hover{
    opacity: 1;
}
.bx-wrapper .bx-prev{
    left: -50px;
    background-position: left center;
}
#cboxPrevious{
    background-position: left center;
}
.bx-wrapper .bx-next{
    right: -50px;
    background-position: right center;
}
#cboxNext{
    background-position: right center;
}
.bx-wrapper .bx-controls-direction a:hover{
    opacity: 1;
}
#cboxTitle,
#cboxCurrent{
    font-size: 12px;
}
/* end colorbox & bx-slider */

/* select search block */
.select-search-form .form-item{
    margin-bottom: 0;
}
.select-search-form .form-item label{
    font-size: 19px;
}
.blue-table{
    margin-top: 20px;
}
.blue-table > table{
    padding-bottom: 5px;
    width: 100%;
    margin-bottom: 0;
}
.blue-table > table th{
    background-color: #00609e;
    color: #fff;
    border: none;
    font-weight: 400;
}
.container .blue-table > table td:first-of-type{
    color: #000;
    font-weight: 400;
}
.blue-table > table th:first-of-type{
    padding-left: 10px;
}
.search-bottom{
    border-top: 1px solid #00609e;
}
.search-found,
.pager-page{
    color: #00609e;
    font-weight: 700;
    margin: 10px 0;
}
.pager-page{
    float: left;
}
.pager-nav{
    text-align: right;
    float: right;
    margin-top: 10px;
}
.pager-nav-left{
    text-align: left;
    float: left;
}
.pager-nav a{
    display: inline-block;
    width: 28px;
    height: 28px;
    background-color: #00609e;
    background-image: url(ma_pager-arrows.png);
    background-position: left center;
}
.pager-nav a:nth-of-type(2){
    background-position: -28px center;
}
.pager-nav a:nth-of-type(3),
.pager-nav-right a:nth-of-type(1){
    background-position: -56px center;
}
.pager-nav a:nth-of-type(4),
.pager-nav-right a:nth-of-type(2){
    background-position: -84px center;
}
.pager-nav a:hover{
    background-color: #1f1e21;
}
.pager-nav .inactive,
.pager-nav .inactive:hover{
    background-color:#d8d9da;
    cursor: default;
}
/* end projects search block */

/* search-results */
.search-results > ul > li{
    padding: 15px 0;
    border-top: 1px solid #d8d9da;
}
.search-results{
    margin-bottom: 25px;
}
/* end search-results */

/* project page */
.project.gallery main{
    margin-right: 0;
    max-width: 1600px;
}
.project-page{
    background-color: #fff;
}
.project-title{
    font-weight: 400;
    font-size: 18px;
    color: #fff;
}
.gallery .project-title,
.gallery .project-content-wrap{
    display: flex;
    flex-wrap: nowrap;
}
.project-title h1,
.project-title .gallery-title,
.country-page .page-title span{
    padding: 10px 20px 10px;
}
.container .project-title h1{
    margin: 0;
    background-color: #00609e;
    font-weight: 500;
    border: none;
    color: #fff;
}
.project-title .gallery-title{
    background-color: #0072b7; 
    display: flex;
    align-items: flex-end;
}
.project-page .page-title span{
    display: block;
    margin-bottom: 10px;
    font-weight: 400;
    font-size: 18px;
}
.project-page .project-title{
    margin-top: 50px;
}
.project-page .two-cols > div,
.project-title h1,
.project-title .gallery-title{
    box-sizing: border-box;
}
.gallery .project-page .white-box,
.gallery .project-title h1{
    width: 70%;
}
.project-page .photo-gallery,
.project-title .gallery-title{
    width: 30%;
}
.photo-gallery{
    padding-top: 20px;
    padding-bottom: 15px;
}
.photo-gallery img{
    display: block;
    margin-bottom: 15px;
    width: 100%;
}
.project-page .white-box{
    box-sizing: border-box;
}
.project-page .white-box > .two-cols{
    padding: 7px 0;
    border-bottom: 1px solid #b0b1b3;
}
.project-page .white-box > .two-cols:last-of-type{
    border-bottom: none;
}
.project-page .white-box > .two-cols > div:first-of-type{
    color: #00609e;
    font-weight: 700;
    width: 35%;
    padding-right: 25px;
}
.project-page .white-box > .two-cols > div:last-of-type{
    width: 65%;
}
.project-page .white-box > .two-cols .two-cols{
    border-bottom: 1px solid #b0b1b3;
    padding-top: 5px;
    padding-bottom: 5px;
}
.project-page .white-box > .two-cols .two-cols > div{
    padding-right: 15px; 
}
.project-page .white-box > .two-cols .two-cols > div:first-of-type{
    width: 60%;
}
.project-page .white-box > .two-cols .two-cols:first-of-type > div{
    margin-top: 0;
}
.project-page .white-box > .two-cols .two-cols > div:last-of-type{
    width: 40%;
    padding-right: 0;
}
.project-page .white-box > .two-cols .two-cols:last-of-type{
    border-bottom: none;
    padding-bottom: 0;
    padding-right: 0;
}
.project-page .white-box > .two-cols .two-cols:first-of-type{
    padding-top: 0;
}
.container .project-page .white-box .two-cols > div{
    margin: 0;
}
.container .project-page .two-cols{
    margin: 0;
}
/* end project page */

/* key events */
.key-events ul,
.key-events li{
    list-style: none;
    margin: 0;
}
.key-events .white-box > ul > li,
.key-events .white-box > ul > li > ul{
    display: flex;
    position: relative;
}
.key-events .white-box > ul > li > h3 span{
    color: #fff;
    font-size: 23px;
    font-weight: 500;
    background-color: #0072b7;
    width: 75px;
    height: 49px;
    border-radius: 50%;
    text-align: center;
    line-height: 1;
    padding-top: 26px;
    border: 2px solid #fff;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    display: block;
    z-index: 10;
    position: relative;
}
.key-events .white-box > ul > li > h3{
    width: 8%;
    position: relative;
}
.key-events .white-box > ul > li > h3::before,
.key-events .white-box > ul > li > ul > li::before{
    content: " ";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #646566;
    position: absolute;
    left: 20px;
}
.key-events .white-box > ul > li > h3::before{
    top: 40px;
}
.key-events .white-box > ul > li > h3::after{
    content: " ";
    display: block;
    width: 1px;
    height: 100%;
    background-color: #646566;
    position: absolute;
    top: 20px;
    left: 40px;
}
.key-events .white-box > ul > li > ul{
    margin-top: 50px;
    width: 92%;
}
.key-events .white-box > ul > li > ul > li{
    width: 25%;
    box-sizing: border-box;
    padding-left: 20px;
    position: relative;
    margin-bottom: 20px;
}
.key-events .white-box > ul > li > ul > li::before{
    top: -10px;
}
.key-events .white-box > ul > li > ul > li:last-of-type::before,
.key-events .white-box > ul > li:last-of-type > h3::after{
    content: none;
}
.key-events .white-box > ul > li > ul > li::after{
    content: " ";
    display: block;
    width: 20px;
    height: 20px;
    background-color: #0072b7;
    border-radius: 50%;
    position: absolute;
    left: 20px;
    top: -20px;
}
.key-events .white-box > ul > li > ul > li > h4{
    color: #000;
    margin-top: 5px;
    margin-bottom: 0;
}
.key-events .white-box > ul > li:nth-of-type(7n+2) > ul > li::after,
.key-events .white-box > ul > li:nth-of-type(7n+2) > h3 span{
    background-color: #4f9bce;
}
.key-events .white-box > ul > li:nth-of-type(7n+3) > ul > li::after,
.key-events .white-box > ul > li:nth-of-type(7n+3) > h3 span{
    background-color: #87888a;
}
.key-events .white-box > ul > li:nth-of-type(7n+4) > ul > li::after,
.key-events .white-box > ul > li:nth-of-type(7n+4) > h3 span{
    background-color: #4f9bce;
}
.key-events .white-box > ul > li:nth-of-type(7n+5) > ul > li::after,
.key-events .white-box > ul > li:nth-of-type(7n+5) > h3 span{
    background-color: #b1b3b4;
}
.key-events .white-box > ul > li:nth-of-type(7n+6) > ul > li::after,
.key-events .white-box > ul > li:nth-of-type(7n+6) > h3 span{
    background-color: #00315d;
}
.key-events .white-box > ul > li:nth-of-type(7n+7) > ul > li::after,
.key-events .white-box > ul > li:nth-of-type(7n+7) > h3 span{
    background-color: #87888a;
}
/* end key events */

/* logo-text-wrap */
.logo-text-wrap{
    margin-top: 30px;
    line-height: 1.4;
}
.logo-text-wrap > ul > li{
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-top: 1px solid #ccc;
}
.logo-text-wrap-nolist{
    display: flex;
    align-items: center;
}
.logo-text-wrap > ul > li > div:first-of-type,
.logo-text-wrap-nolist > div:first-of-type{
    min-width: 120px;
    margin-right: 15px;
}
.logo-text-wrap > ul.two-cols > li > div:first-of-type{
    text-align: center;
}
.logo-text-wrap ul.two-cols > li{
    border-top: none;
}
.logo-text-wrap ul.two-cols > li > div:first-of-type{
    min-width: 100px;
}
.logo-text-wrap > ul ul{
    margin-bottom: 0;
}
/* end logo-text-wrap */

/* two-cols, two columns per row & three-cols, three columns per row */ 
.container .two-cols,
.container .three-cols,
.container .four-cols{
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
}
.white-box .two-cols:first-child,
.white-box .three-cols:first-child{
    margin-top: 0;
}
.container .two-cols > li,
.container .three-cols > li{
    list-style: none;
    box-sizing: border-box;
    padding: 15px 0;
    border-top: 1px solid #ccc;
    margin-bottom: 0;
}
.page-title + .two-cols > li:nth-child(-n+2),
.page-title + .three-cols > li:nth-child(-n+3){
    border: none;
    padding-top: 0;
}
.container .two-cols > *{
    width: 48.5%;
    box-sizing: border-box;
    margin-right: 3%;
}
.container .three-cols > *{
    width: 32%;
    margin-right: 2%;
    box-sizing: border-box;
}
.container .colorbox .three-cols{
    margin: 0;
}
.colorbox a img{
    width: 100%;
}
.colorbox div[class$=cols] a img{
    object-fit: cover;
    height: 200px;
}
.container .four-cols > *{
    width: 24%;
    width: 24.25%;
    margin-right: 1%;
    box-sizing: border-box;
}
.container .colorbox .four-cols{
    margin: 0;
}
.container .two-cols > *:nth-of-type(2n),
.container .three-cols > *:nth-of-type(3n),
.container .four-cols > *:nth-of-type(4n){
    margin-right: 0;
}
.container .two-cols table{
    width: 100%;
}
.container .two-cols th{
    font-size: 14px;
    padding-right: 10px;
}
.container .two-cols td{
    font-size: 13px;
    padding: 8px 10px 8px 0;
}
/* end two-cols, two columns per row & three-cols, three columns per row */

/* content-menu */
.content-menu{
    margin-bottom: 20px;
}
.content-menu > li{
    display: flex;
    align-items: stretch;
    margin-bottom: 10px;
}
.content-menu > li > a{
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px;
    background-color: #eee;
    box-sizing: border-box;
    position: relative;
}
.content-menu > li > a > span{
    display: block;
    line-height: 1.2;
    font-size: 14px;
    font-weight: 600;
    position: relative;
    z-index: 10;
}
.content-menu > li > a::before{
    content: " ";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #0072b7;
    transition: all 200ms ease-out;
}
.content-menu > li > a:hover,
.content-menu > li > a.active{
    text-decoration: none;
    color: #fff;
}
.content-menu > li > a:hover::before,
.content-menu > li > a.active::before{
    height: 100%;
}

 
/* end content-menu */


/* preview-thumbs & preview-thumbs-top */
.preview-thumbs-top > li{
    padding: 25px 0;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #ccc;
}
.preview-thumbs-top > li:first-of-type{
    padding-top: 0;
    border-top: none;
}
.preview-thumbs-top > li:last-of-type{
    padding-bottom: 0;
}
.preview-thumbs-top .preview-thumb-image,
.preview-thumbs-top .preview-thumb-image + .preview-thumb-content{
    width: 48%;
    width: 48.5%;
    box-sizing: border-box;
}
.preview-thumb-image{
    overflow: hidden;
}
.preview-thumb-image img,
.preview-thumb-image a{
    display: block;
    width: 100%;
}
.preview-thumb-image img{
    transition: all 1s ease-out;
}
.preview-thumb-image:hover img{
    transform: scale(1.02);
}
.container .preview-thumb-title{
    font-weight: 400;
    margin: 5px 0 15px;
}
.preview-thumb-date{
    font-weight: 600;
    font-size: 14px;
}
.preview-thumb-text{
    font-size: 14px;
}
.preview-thumbs .preview-thumb-title{
    font-size: 14px;
    line-height: 1.3;
}
.preview-thumbs .preview-thumb-date{
    margin-top: 10px;
}
.container .preview-thumbs > li{
    border: none;
    padding: 0;
    margin-bottom: 25px;
    background-color: #f1f1f1;
}
.preview-thumbs .preview-thumb-content{
    padding: 0 15px 20px;
}
.preview-thumbs .preview-thumb-content h2{
    margin-bottom: 0;
}

/* end preview-thumbs */

/* annual report-thumb */
.cover-thumbs > li{
    box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.2);
    margin-bottom: 40px;
    overflow: hidden;
    width: 22%;
    margin-right: 4%;
}
.container .cover-thumbs a{
    display: block;
    position: relative;
    padding: 0;
}
.cover-thumbs a::after{
    content: none !important;
}
.cover-thumbs img{
    display: block;
    width: 100%;
    transition: all 400ms ease-out;
}
.cover-thumbs a:hover img{
    transform: scale(1.01);
}
.cover-thumbs .thump-overlay{
    background-color: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 500ms ease-out;
}
.cover-thumbs a:hover .thump-overlay{
    opacity: 1;
}
.cover-thumbs .thump-overlay span{
    color: #fff;
    padding: 10px;
    display: block;
    font-size: 18px;
    font-weight: 600;
}

/* end annual report-thumb */

/* two columns, where th table (1col) interacts to multicharts (2col) at Cumulative Portfolio & Country page */
th[class^="chart-"]{
    cursor: pointer;
}
th[class^="chart-"],
.total td{
    color: rgba(79,155,206,0.6);
}
.total td{
    font-weight: 700;
    border-top: 1px solid #00609e;
}
.total td:first-of-type{
    color: #00609e;
}
.container table .active,
.container th[class^="chart-"]:hover{
    color: rgba(79,155,206,1);
}
.note{
    margin-top: 15px;
    font-style: italic;
    font-size: 15px;
}
.charts-switcher{
    color: #646566;
    text-align: center;
    font-weight: 700;
}
.charts-switcher span{
    opacity: 0.4;
    cursor: pointer;
    transition: all 300ms ease-out;
}
.charts-switcher span.active,
.charts-switcher span:hover{
    opacity: 1;
}
.two-cols > div:nth-of-type(2) .note{
    text-align: center;
}
.multi-chart > div{
    display: none;
}
.multi-chart > div:first-of-type{
    display: block;
}
.charts-wrap > div{
    height: 480px;
}
.charts-wrap-2 > div{
    height: 290px;
}

/* end two columns, where th table (1col) interacts to multicharts (2col) */

/* country page extra styles */
.country{
    background-color: #f6f5f4;
    background-image: url(ma_countries-bkg.png);
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
}
.country-page .page-title{
    padding: 0;
    display: flex;
    margin-bottom: 0;
    background-color: #87888a;
    font-size: 24px;
    font-weight: 500;
    border: none;
    color: #fff;
}
.country-page .page-title span,
.country-page .page-title img{
    display: inline-block;
    line-height: 1;
}
.country-page .page-title img{
    height: 45px;
}
.country-page td:first-of-type{
    color: #00609e;
    font-weight: 700;
}
.country-page .white-box{
    margin-top: 0;
}
/* end country page */

/* project cyrcle, how we operate page */
.project-cyrcle{
    display: flex;
    justify-content: space-between;
    padding: 10px 50px 20px 0;
}
.project-cyrcle > div{
    padding-right: 20px;
    position: relative;
    cursor: pointer;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    opacity: 0.6;
    transition: all 300ms ease-out;
}
.project-cyrcle > div:hover,
.project-cyrcle > div.active-cyrcle{
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
    opacity: 1;
}
.project-cyrcle > div > span{
    position: absolute;
    top: 90px;
    right: 0;
    font-size: 14px;
    text-align: left;
    width: 130px;
    opacity: 0;
    color: #00609e;
    transition: all 300ms ease-out;
    display: block;
    line-height: 1.3;
    background-color: #eef5fa;
    padding: 10px;
    box-shadow: 0 0 2px rgba(0,0,0,0.1);
    font-weight: 600;
}
.project-cyrcle > div:hover > span,
.project-cyrcle > div.active-cyrcle > span{
    opacity: 1;
}
.project-cyrcle-content{
    margin-top: 25px;
}
.project-cyrcle-content > div{
    display: none;
}
.project-cyrcle-content > div > .page-title{
    font-size: 16px;
    font-weight: 500;
}
/* end project cyrcle, how we operate page */

/* apply for financing page */
.apply-finance{
    background-color: #2a8dc7;
    background-color: rgba(42, 141,199,0.9);
    color: #fff;
}
.apply-finance .page-title{
    border-bottom: 1px solid #fff;
}
.apply-finance .form-item label,
.apply-finance .page-title{
    color: #fff;
}
.apply-finance .form-item input,
.apply-finance .form-item select,
.apply-finance .form-item textarea{
    background-color: #fff;
}
.apply-finance .form-item.form-actions{
    width: auto;
}
.apply-finance hr{
    background-color: #fff;
}
/* end apply for financing page */

/* bussiness forum page */
.container.forum{
    background-color: #000;
    background-blend-mode: normal;
}
.forum-page{
    color: #fff;
    margin-top: 245px; 
}
.forum-page .white-box h2{
    color: #0071b4;
}
.forum-page .white-box{
    color: #1f1e21
}
.forum-page .page-title{
    color: #fff;
    border-bottom: none;
    line-height: 1.3;
    position: relative;
    overflow: hidden;
}
.forum-page .page-title div{
    display: inline-block;
    position: relative;
}
.forum-page .page-title div::after{
    content: " ";
    display: block;
    position: absolute;
    left: 105%;
    bottom: 6px;
    height: 1px;
    width: 2000px;
    background-color: #fff;
    background-color: rgba(255,255,255,0.5);
}
.forum-page .bottomlinks a{
    border: 1px solid #fff;
    background-color: transparent;
}
.forum-page .bottomlinks a:hover{
    background-color: #0071b4;
    color: #fff;
}
.forum-page .tab-links > *{
    background-color: #000;
}
.forum-page .tab-links > *:hover, 
.forum-page .tab-links > .active-tab {
    background-color: #00609e;
}
.program-list > li{
    display: flex;
}
.program-list > li > div{
    box-sizing: border-box;
}
.time-info{
    color: #000;
    width: 100%;
    position: relative;
    padding: 20px;
    background-color: #fff;
}
.time-info::before{
    content: " ";
    width: 1px;
    height: 100%;
    display: block;
    border-left: 1px dashed #fff;
    position: absolute;
    left: -21px;
    top: 33px;
}
.program-list > li:last-of-type .time-info::before{
    content: none;
}
.time-showed-info{
    display: flex;
    align-items: center;
    position: relative;
}
.time-showed-info > div{
    box-sizing: border-box;
    text-align: center;
    font-size: 13px;
    line-height: 1.2;
}
.time{
    min-width: 70px;
    padding-top: 16px;
    position: relative;
    z-index: 10;
}
.program-title{
    padding-left: 70px;
}
.time::after{
    content: " ";
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 22px;
    right: 15px;
    border: 1px solid #fff;
    border-radius: 50%;
    background-color: #000; 
}
.time-more-info{
    padding-top: 25px;
    display: none;
}
.time-title{
    font-weight: 500;
}
.time-showed-info .time-title{
    width: 45%;
    text-align: left;
    font-size: 16px;
    padding-right: 20px;
}
.time-duration{
    width: 15%;
}
.time-place{
    width: 40%;
    padding: 0 25px;
}
.time-duration{
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
.time-place a{
    position: relative;
}
.time-place a::before{
    content: " ";
    display: block;
    background-image: url(ma_map-icon.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 14px;
    height: 18px;
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
}
.time-open{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    width: 30px;
    height: 30px;
    overflow: hidden;
    color: transparent !important;
    background-image: url(ma_linkarrow3.png);
    transition: all 300ms ease-out;
    opacity: 0.5;
}
.time-open:hover{
    opacity: 1;
}
.active-thumb .time-open{
    transform: rotate(180deg) translateY(50%);
}
.forum-page .two-cols .col-img{
    width: 30%;
}
.forum-page .two-cols .col-img img{
    display: block;
    width: 100%;
}
.forum-page .two-cols .white-box{
    width: 67%;
    font-size: 14px;
}
.forum-page .forum-map{
    margin-top: 30px;
}
.forum-page .program-date,
.forum-page .program-note{
    margin-left: 70px;
}
.forum-page .program-date{
    color: #fff;
    text-align: center;
    background-color: #0071b4;
    padding: 10px 20px;
    font-weight: 400;
}
.forum-page .program-note{
    margin-top: 20px;
}
/* end bussiness forum page */

/* form validator */
.form-item .error{
    border: 1px solid #990000;
}
.has-error.form-item label{
    color: #990000;
}
.help-block{
    position: relative;
    top: 1px;
    font-size: 10px;
    font-style: italic;
    color: #990000;
    height: 0px;
    overflow: visible;
    display: block;
    white-space: nowrap;
    margin-bottom: 20px;
}
#error-group-place .help-block{
    position: relative;
    top: -20px;
}
/* end form validator */

/*** Footer ***/
/* .banner-bar */
.banner-bar{
    padding-top: 100px;
    padding-bottom: 130px;
    color: #fff;
}
.banner-bar .banner-img{
    width: 30%;
}
.banner-bar .banner-text{
    width: 50%;
    margin-left: 25px;
    box-sizing: border-box;
    font-size: 14px;
}
.link-button{
    display: block;
    width: 200px;
    border: 1px solid #fff;
    margin-top: 25px;
    padding: 20px 5px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 1;
}
.link-button:hover{
    background-color: rgba(0,113,180,0.4);
}
/* end .banner-bar */

/* footer-bottom */
.footer-bottom{
    padding-top: 35px;
    padding-bottom: 65px;
    background-color: #1f1e21;
    color: #fff;
    font-size: 12px;
}
.footer-bottom .social{
    margin-top: 10px;
}
.footer-bottom .footer-col{
    width: 24%;
    margin-right: 1%;
    line-height: 1.8;
}
.footer-bottom li{
    list-style: none;
}
.footer-bottom .footer-col a{
    opacity: 0.8;
    color: #fff;
}
.footer-bottom .footer-col a:hover,
.footer-bottom .footer-col a.active{
    opacity: 1;
}
.footer-bottom .footer-col a:hover{
    text-decoration: underline;
}
.footer-logo{
    padding-left: 55px;
    background-image: url(ma_footer-logo.png);
    background-position: left top;
    background-repeat: no-repeat;
}
.social li{
    list-style: none;
    display: inline-block;
    margin-right: 10px;
}
.social a{
    display: block;
    width: 25px;
    height: 25px;
    overflow: hidden;
    background-image: url(ma_socials.png);
    border: 1px solid #fff;
    opacity: 0.6;
}
.social a:hover{
    opacity: 1;
}
.facebook a{
    background-position: left center;
}
.twitter a{
    background-position: -25px center;
}
.linkedin a{
    background-position: -50px center;
}

.youtube a{
    background-position: -75px center;
}
/* end footer-bottom */
/*** end Footer ***/


@media only screen and (min-width: 1700px) {
    .container main,
    footer .flex-wrap{
        margin-left: auto;
        margin-right: auto;
    }
    .range{
        left: 50%;
        transform: translateX(-50%);
    }
}
@media only screen and (max-width: 1500px) {
    .by-sector.percent-banner ul{
        width: 600px;
        height: 600px;
        transform: translateY(-50%) scale(0.6);
    }
}


@media only screen and (max-width: 2200px) {
    .infomap > ul > li{
        transform: scale(0.9);
		transform-origin: -20% 0%;
    
    }
	
	.infomap > ul > li:nth-of-type(3){
        transform: scale(0.9);
		transform-origin: -120% 0%;    
    }
}

@media only screen and (max-width: 1900px) {
    .infomap > ul > li{
        transform: scale(0.8);
		transform-origin: -20% 0%;    
    }
	
	.infomap > ul > li:nth-of-type(3){
        transform: scale(0.8);
		transform-origin: -120% 0%;    
    }
}

@media only screen and (max-width: 1700px) {
    .infomap > ul > li{
        transform: scale(0.7);
		transform-origin: -20% 0%;    
    }
	.infomap > ul > li:nth-of-type(3){
        transform: scale(0.7);
		transform-origin: -120% 0%;    
    }
}
	


@media only screen and (max-width: 1400px) {
    .home h1,
    .home .slider h2{
        font-size: 22px;
        padding-right: 20px;
    }
    .infomap > ul > li{
        transform: scale(0.7);
		transform-origin: -20% 0%;
    /*    transform-origin: left center; */
    }
	.infomap > ul > li:nth-of-type(3){
        transform: scale(0.7);
		transform-origin: -100% 0%;    
    }
	
    .infomap-note{
        font-size: 13px;
    }
    .infomap-note strong {
        font-size: 22px;
        display: block;
    }
}

@media only screen and (max-width: 1200px) {
    body, input, select{
        font-size: 15px;
    }
    .container .page-title, 
    .container .feat-projects > h2{
        font-size: 20px;
    }
    table th, table td{
        font-size: 12px;
        padding-right: 10px;
    }
    .home-menu a,
    .container .tophead nav h2 a{
        text-transform: uppercase;
    }
    main,
    footer .flex-wrap{
        margin-left: auto;
        margin-right: auto;
        padding-left: 20px;
        padding-right: 20px;
    }
    main{
        margin-top: 0;
    }
    .container.sh-two main{
        margin-top: 120px;
    }
    #breadcrubm{
        margin-bottom: 25px;
    }
    header{
        position: relative;
    }
    aside{
        width: 120px;
        position: absolute;
    }
    .logo2{
        left: 120px;
        width: 120px !important;
    }
    .special-banner,
    .topbanner{
        margin-left: 0;
    }
    .topbanner{
        height: 120px;
    }
    .tophead{
        background-color: rgba(0,0,0,0.9);
        padding: 55px 20px 10px;
        right: -600px;
        transition: all 300ms ease-out;
        box-sizing: border-box;
        position: fixed;
        width: 450px;
        z-index: 150;
        overflow-y: scroll;
    }
    .open .tophead{
        right: 0;
    }
    aside nav,
    aside .asidelinks{
        display: none;
    }
    .tophead nav{
        text-align: center;
        float: none;
    }
    .tophead nav li{
        margin: 0;
        display: block;
    }
    .tophead nav li ul{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 5px;
    }
    .container .tophead .search .form-actions input{
        background-image: url(ma_search.png);
    }
    .tophead a img{
        display: none;
    }
    .container .tophead nav a{
        color: #fff;
        border-top: 1px solid #ccc;
        border-top: 1px solid rgba(255,255,255,0.5);
        padding: 10px;
        font-size: 14px;
    }
    .container .tophead nav li ul li a{
        font-size: 13px;
        border: none;
    }
    .container .tophead nav h2 a{
        padding: 15px 35px;
        font-size: 15px;
    }
    .container .tophead nav a.goback{
        padding: 0;
        border: none;
    }
    .container .tophead nav h2{
        position: relative;
    }
    .asidelinks a{
        text-align: center;
        font-size: 14px;
        padding: 10px;
    }
    .tophead .search{
        float: none;
        margin: 15px 0;
    }
    .tophead .search .form-type-search{
        width: 100%;
    }
    .search-close{
        display: none;
    }
    .tophead .search .form-actions input{
        display: block;
    }
    .tophead .form-type-search input{
        width: 100%;
        background-color: rgba(255,255,255,0.4);
        transition: all 300ms ease-out;
    }
    .tophead .form-type-search input:focus{
        background-color: rgba(255,255,255,0.8);
    }
    .home h1, .home .slider h2{
        left: 120px;
        padding-right: 0;
    }
    .homebuttons{
        left: 120px;
        bottom: 25px;
        width: 60%;
    }
    .navicon{
        position: fixed;
        top: 10px;
        right: 20px;
        width: 50px;
        height: 40px;
        background-image: url(ma_navicon.png);
        background-repeat: no-repeat;
        background-position: top center;
        display: block;
        cursor: pointer;
        z-index: 200;
        background-color: rgba(0,0,0,0.2);
        transition: background-color 300ms ease-out;
    }
    .navicon:hover{
        background-color: rgba(0,0,0,0.4);
    }
    .open .navicon{
        background-position: bottom center;
    }
    .projects-intro-menu a{
        padding: 15px 10px;
        font-size: 14px;
    }
    .infomap-note-wrap{
        right: 25px;
        bottom: 50px;
        max-width: 340px;
    }
    .infomap-note::after{
        top: -5px;
    }
    .infomap-note{
        margin-left: 15px;
    }
    .select-search-form .form-item label{
        font-size: 16px;
    }
    .by-products.percent-banner ul{
        padding-right: 20px;
    }
    .bx-wrapper .bx-controls-direction a{
        margin-top: -50px;
        background-color: #f6f5f4;
    }
    .bx-wrapper .bx-prev{
        left: 0;
    }
    .bx-wrapper .bx-next{
        right: 0;
    }
}

@media only screen and (max-width: 1000px) {
    .container .two-cols, .container .three-cols, .container .four-cols,
    .preview-thumbs-top > li,
    .container .project-page .white-box > .two-cols .two-cols{
        display: block;
    }
    .container .two-cols > *, 
    .container .three-cols > *, 
    .container .four-cols > *,
    .preview-thumbs-top .preview-thumb-image, 
    .preview-thumbs-top .preview-thumb-image + .preview-thumb-content,
    .container .project-page .white-box .two-cols > div,
    .container .forum-page .two-cols > div{
        width: auto;
        margin: 0 0 30px 0;
    }
    .container .project-page .white-box .two-cols > div,
    .container .forum-page .two-cols > div{
        margin-bottom: 0;
    }
    .container .content-menu,
    .container .tab-links,
    .container .homebuttons{
        display: flex;
        justify-content: space-between;
    }
    .container .content-menu > *,
    .container .tab-links > *,
    .container .homebuttons > a{
        width: 49%;
        margin-bottom: 15px;
    }
    .container .tab-links > *{
        margin-bottom: 0;
        padding: 10px 5px;
        font-size: 14px;
    }
    .container .tabs.multirows .tab-links > * {
        padding: 7px 10px;
        margin-bottom: 15px;
    }
    .accordion > ul > li > :first-child{
        padding-left: 10px;
    }
    .container main .form-type-checkbox-filter .form-item,
    .select-search-form .form-item{
        margin-bottom: 5px;
    }
    .range{
        left: 20px;
    }
    .by-products.percent-banner ul{
        transform: translateY(-50%) scale(0.7);
        transform-origin: right center;
    }
    .infomap > ul > li{
        transform: scale(0.5);
    }
	
	.infomap > ul > li:nth-of-type(3){
        transform: scale(0.5);
		transform-origin: -20% 0%;
  
    }
    .banner-bar{
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .banner-bar .banner-text{
        width: 68%;
        margin-left: 2%;
    }
    .key-events .white-box > ul > li > h3{
        width: 80px;
    }
    .key-events .white-box > ul > li > ul{
        width: auto;
        display: block;
    }
    .key-events .white-box > ul > li > ul > li{
        width: auto;
        margin-bottom: 40px;
    }
    .key-events .white-box > ul > li > ul > li::after{
        top: -25px;
    }
    .key-events .white-box > ul > li > ul > li::before{
        content: none;
    }
    .project-cyrcle,
    .project-cyrcle > div:last-of-type{
        padding-right: 0;
    }
    .project-cyrcle > div.active-cyrcle > span{
        display: none;
    }
    .footer-bottom{
        padding-bottom: 0;
    }
    .footer-bottom .flex-wrap{
        flex-wrap: wrap;
    }
    .footer-bottom .footer-col{
        width: 49%;
        padding-bottom: 40px;
    }
}
@media only screen and (max-width: 800px) {
    .infomap > ul,
    .range,
    .by-sector.percent-banner ul,
    .by-products.percent-banner ul{
        display: none;
    }
    .percent-banner img{
        -webkit-filter: blur(4px);
        filter: blur(4px);
    }
    .home h1, .home .slider h2,
    .container .homebuttons{
        left: 20px;
    }
    .container .homebuttons{
        width: 90%;
    }
    .home h1, .home .slider h2{
        font-size: 20px;
    }
    .boxes > ul{
        display: block;
    }
    .container .boxes > ul > li{
        width: auto;
        margin: 30px 0 0;
    }
    .container .project-page .project-content-wrap,
    .gallery .project-title,
    .time-showed-info{
        display: block;
    }
    .container .project-page .project-content-wrap > div,
    .gallery .project-title h1,
    .container .time-showed-info > div{
        width: auto;
    } 
    .container .time-showed-info > div{
        margin-bottom: 10px;
        text-align: left;
        border: none;
        padding-right: 50px;
    }
    .project-title .gallery-title{
        display: none;
    }
    .project-page .photo-gallery{
        padding-left: 20px;
        padding-right: 20px;
    }
    .bottomlinks{
        flex-wrap: wrap;
    }
    .bottomlinks a{
        padding: 15px 10px;
        margin-right: 10px;
        font-size: 14px;
        margin-bottom: 10px;
    }
    .related-docs a{
        width: 49%;
    }
}
@media only screen and (max-width: 600px) {
    .home h1, .home .slider h2,
    .container .page-title, 
    .container .feat-projects > h2{
        font-size: 18px;
    }
    .white-box{
        padding-right: 15px;
        padding-left: 15px;
    }
}
@media only screen and (max-width: 500px) {
    .banner-bar{
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .banner-bar .flex-wrap,
    .container .homebuttons{
        display: block;
    }
    .banner-bar .flex-wrap > *{
        width: auto;
        margin: 0;
    }
    .banner-bar .flex-wrap .banner-img{
        margin-bottom: 30px;
    }
    .homebuttons{
        bottom: 0;
    }
    .container .homebuttons a{
        width: auto;
        margin-bottom: 10px;
        max-width: 250px;
    }
    .infomap-note-wrap{
        display: none;
    }
    .content-menu > li{
        height: auto !important;
    }
}
@media only screen and (max-width: 450px) {
    .tophead{
        max-width: 100%;
    }
    .footer-bottom .flex-wrap{
        display: block;
    }
    .footer-bottom .footer-col{
        width: auto;
        margin-right: 0;
    }
    .logo-text-wrap > ul > li{
        display: block;
    }
    .logo-text-wrap ul.two-cols > li > div:first-of-type{
        margin: 0 0 5px;
        text-align: left;
    }
    .container .tab-links > *{
        font-size: 12px;
    }
    .related-docs a{
        width: 100%;
        margin-right: 0;
    }
    .key-events .white-box > ul > li > h3 span{
        width: 60px;
        height: 38px;
        padding-top: 22px;
        font-size: 17px;
    }
    .key-events .white-box > ul > li > h3::before {
        top: 32px;
    }
    .key-events .white-box > ul > li > ul{
        margin-top: 42px;
    }
}
@media only screen and (max-width: 400px) {
    .projects-intro-menu a{
        font-size: 12px;
        padding: 10px;
    }
    .grey-bkg{
        font-size: 14px;
    }
    aside{
        width: 100px;
        position: absolute;
    }
    .logo2{
        left: 100px;
        width: 100px !important;
    }
    .home h1,
    .home .slider h2{
        font-size: 17px;
    }
    .home .slider h2{
        margin-top: 10px;
    }
}

/*** PRINT STYLES ***/
@media print{
    main{
        width: 100%; 
        margin: 0;
        color: #000;
        background: transparent !important;
    }

    a,
    a:visited { text-decoration: underline; }

    /* a[href]:after { content: " (" attr(href) ")"; } */

    abbr[title]:after { content: " (" attr(title) ")"; }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    /* a[href^="#"]:after{ content: ""; } */

    pre { white-space: pre-wrap !important; }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead { display: table-header-group; }
    tr,
    img { page-break-inside: avoid; }
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }
    h2,
    h3 { page-break-after: avoid; }

    /**
     * HIDE certain elements completely
     */
     header, aside, footer, #breadcrubm, .bottomlinks, .search-bottom, .tab-links,
     .gallery-title, .project-page .photo-gallery, .feat-projects, .content-menu, .form-actions{
        display: none !important;
    }
    .accordion > ul > li > :first-child, 
    .key-events > h2, 
    .tab-links > *,
    .blue-table > table th{
        color: #333;
    }
    .gallery .project-page .white-box, 
    .gallery .project-title h1{
        width: auto;
    }
    .container{
        background-image: none !important;
    }
    .white-box,
    .project-title h1, 
    .project-title .gallery-title, 
    .country-page .page-title span,
    .accordion > ul > li > :first-child, 
    .key-events > h2, .tab-links > *{
        padding-left: 0;
        padding-right: 0;
    }
    .accordion .white-box,
    .tabs > ul > li,
    .tabs > ul > li > :first-child{
        display: block !important;
    }
    .tabs > ul > li > :first-child{
        margin-bottom: 20px;
    }
    main select, main input, main textarea, .checkmark{
        border: 1px solid #ccc !important;
    }
    .key-events .white-box > ul > li, .key-events .white-box > ul > li > ul{
        display: block;
    }
    .key-events .white-box > ul > li,
    .tabs > ul > li{
        margin-top: 30px;
    }
    .key-events .white-box > ul > li > ul{
        margin-top: 20px;
    }
    .key-events .white-box > ul > li > ul > li{
        padding-left: 0;
    }
    .key-events .white-box > ul > li > h3 span{
        width: auto;
        height: auto;
        padding: 0;
        text-align: left;
        box-shadow: none;
    }
    .key-events .white-box > ul > li > ul > li,
    .key-events .white-box > ul > li > h3,
    .key-events .white-box > ul > li > ul{
        width: auto;
    }
    .fusioncharts-container{
        transform: scale(0.7);
		transform-origin: left top;
	
    }
    .two-cols > div:last-of-type .fusioncharts-container{
        transform-origin: center top;
    }
    li{
        list-style-type: disc;
    }
    main ul > li::before{
        content: none;
    }
    .accordion > ul > li, 
    .boxes > ul > li,
    .flex-wrap > li,
    .tabs > ul > li,
    .logo-text-wrap > ul > li,
    .two-cols > li,
    .three-cols > li,
    .four-cols > li,
    .key-events .white-box > ul > li,
    .search-results > ul > li,
    .program-list > li,
    .preview-thumbs-top > li,
    .preview-thumbs > li{
        list-style: none;
    }
    .grey-bkg{
        background: none;
        padding: 0;
    }
}

/*** END PRINT STYLES ***/

/* START home notifications slider */

.home-notes{
    box-sizing: border-box;
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 50px 20px 50px 200px;
    z-index: 10;
}
.hn-txt ul,
.hn-txt ol{
    list-style-position: inside;
}
.hn-wrap > li{
    list-style: none;
}
.hnote{
    display: flex;
    color: #fff;
    text-decoration: none;
}
.hn-img{
    padding-right: 50px;
    width: 150px;
}
.hn-img img{
    display: block;
    max-width: 100%;
    height: auto;
}
.hn-txt{
    padding-bottom: 35px;
    width: calc(100% - 200px);
}
.hn-title,
.hn-body{
    max-width: 750px;
}
.hn-title{
    font-size: 17px;
}
.hn-body{
    font-size: 15px;
}
.home-notes .bx-wrapper .bx-pager{
    width: 100px;
    padding: 0;
    margin: 0;
    left: 200px;
    bottom: 0;
    text-align: left;
}
.bx-wrapper .bx-pager.bx-default-pager a{
    margin: 0 7px 0 0;
    border: 5px solid #fff;
    border-radius: 50%;
    background: #fff;
    transition: all 300ms ease-out;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, 
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus{
    background: #000;
}

/* search form 
.search .form-type-search{
    align-items: center;
}
#searchForm label{
    text-transform: uppercase;
    color: #fff;
    margin-right: 5px;
}*/

@media only screen and (max-width: 1200px){
    .home-notes{
        padding-left: 20px;
    }
    .hn-img{
        padding-right: 20px;
    }
    .home-notes .bx-wrapper .bx-pager{
        left: 170px;
    }
}
@media only screen and (max-height: 800px) {
    .home-notes{
        padding-top: 20px;
        padding-bottom: 20px;
        bottom: 20px;
    }
}
@media only screen and (max-width: 600px) {
    .hnote{
        display: block;
    }
    .hn-img{
        display: none;
    }
    .hn-txt{
        width: auto;
    }
    .home-notes .bx-wrapper .bx-pager{
        left: 0;
    }
    /* #searchForm label{
        display: none;
    }*/
}
/* end home notifications slider */