#headline h1 { text-align:center; }
#headline:before { display:none; }

#headline { padding-left:0px; }
@media(max-width: 768px) {
    #headline { padding-left:0px; }
}


.topImage { padding:0px; height:80vh; }
@media(max-width: 991px) {
    .topImage { padding:0px; height:50vh; }
}

.topImage:after { content: "";background-image: url(../../../000Frames/site/images/header/bannerMaskNew.png);background-size: cover;position: absolute;top: 0;left: 0;right: 0;bottom: 0;pointer-events:none; }

#projects-filter    { text-align:center; margin-bottom:70px; margin-top:50px; }
#projects-filter .projects-filter-buttons       { list-style:none; margin:0px; padding:0px; overflow:visible; display:inline-block; }
#projects-filter .projects-filter-buttons > li  { float:left; position:relative; }

#projects-filter .projects-filter-buttons > li span.arrow       {position:absolute;right: 35px;width: 17px;height: 16px;top: 3px;z-index:20;transition: all 500ms ease-in-out;z-index: 11;cursor:pointer;}
#projects-filter .projects-filter-buttons > li span.arrow svg   { fill: #012D5C;} 
#projects-filter .projects-filter-buttons > li:nth-last-child(1) span.arrow{right: 2px;}
#projects-filter .projects-filter-buttons > li.open span.arrow { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);z-index:11;}
                                                                                                                                                                               
#projects-filter .projects-filter-buttons > li.border-after             { padding-right:34px; margin-right:30px; }
#projects-filter .projects-filter-buttons > li.border-after:before      { right:37px;}
#projects-filter .projects-filter-buttons > li.border-after:after       { content:""; position:absolute; width:3px; right:0px; top:25%; bottom:25%; background-color:#2DCCD2; }
#projects-filter .projects-filter-buttons > li a.projects-filter-button     {font-family:Inter-Medium;text-align:left;font-size: 115%;color:#012D5C;display:inline-block;padding-right:60px;text-decoration:none;border-bottom:3px solid #012D5C;visibility:visible;min-width: 225px;}
#projects-filter .projects-filter-buttons > li span.clear-fillter       {color: #d22730;position: absolute;right: 58px;top: 2px;cursor:pointer;width: 11px;}
#projects-filter .projects-filter-buttons > li:nth-last-child(1) span.clear-fillter{right: 26px;}

#projects-filter .projects-filter-buttons > li .filter-box      { visibility:hidden; max-height:0px; overflow:hidden; transition: max-height 450ms ease-in-out ; -webkit-transition: max-height 450ms ease-in-out ;background-color :#F5F5F5;  display:block; margin:-15px; margin-right:-45px; position:absolute; top:0px; left:0px; right:30px; z-index:2; }
#projects-filter .projects-filter-buttons > li.open .filter-box {max-height:300px;padding:15px;visibility:visible;max-width: 260px;}

#projects-filter .projects-filter-buttons > li[data-button="country"].open .filter-box{/* overflow-y: auto; */}
#projects-filter .projects-filter-buttons > li[data-button="country"].open .filter-attributes::-webkit-scrollbar               { width: 3px; cursor:pointer; position:absolute; right:50px;}  
#projects-filter .projects-filter-buttons > li[data-button="country"].open .filter-attributes::-ms-scrollbar                   { width: 3px; cursor:pointer; position:absolute; right:50px;}  
#projects-filter .projects-filter-buttons > li[data-button="country"].open .filter-attributes::-webkit-scrollbar-track         { background-color: #fff; cursor:pointer;}  
#projects-filter .projects-filter-buttons > li[data-button="country"].open .filter-attributes::-webkit-scrollbar-track-piece   { cursor:pointer; }
#projects-filter .projects-filter-buttons > li[data-button="country"].open .filter-attributes::-webkit-scrollbar-thumb         { background-color: #2DCCD3; cursor:pointer;}
#projects-filter .projects-filter-buttons > li[data-button="country"].open .filter-attributes::-webkit-scrollbar-thumb:hover   { background-color: #2DCCD3; cursor:pointer;}


#projects-filter .projects-filter-buttons > li.open.border-after .filter-box {margin-left:-19px;margin-right:-15px;}
#projects-filter .projects-filter-buttons > li:nth-child(1).open.border-after .filter-box    {/* margin-left: -18px; */}
#projects-filter .projects-filter-buttons > li .filter-box a.projects-filter-button { display:none; }
#projects-filter .projects-filter-buttons > li.open .filter-box a.projects-filter-button { display:inline-block; }

#projects-filter input.searchCountry                 {border: 1px solid #e1e1e1;font-size: 75%;color: #a5a5a5;padding: 5px;display:block;margin: 10px 0;max-width:100%;}
#projects-filter input.searchCountry::placeholder    { color:#a5a5a5; }

#projects-filter .filter-attributes     {text-align:left;margin-top:10px;margin-left:3px;overflow: hidden;overflow-y: auto;max-height: 188px;}
#projects-filter .filter-attributes a   { display:block; margin-bottom:10px; font-size:90%; color:#012D5C; margin-bottom:8px; margin-left:5px; }
#projects-filter .filter-attributes a:nth-last-child(1) {margin-bottom:0px;}

/*.project-box2-img:after { background: rgba(0, 0, 0, 0.2);content: "";z-index: 0;position: absolute;top: 0;right: 0;left: 0;bottom: 0; }*/
.project-box2-img:after { background-image: url('../../../000Frames/site/images/projects/gradient.png');content: "";z-index: 0;position: absolute;top: 0;right: 0;left: 0;bottom: 0;background-size: cover;background-position: top center;transition:all 350ms ease-in-out;-webkit-transition:all 350ms ease-in-out; }

@media (max-width:1440px) {
    #projects-filter input.searchCountry{width: 80%;height: 34px; font-size:90%;}
}

@media (max-width:1280px) and (min-width:991px){
    #projects-filter .projects-filter-buttons > li span.arrow{}
}
@media (max-width:991px) and (min-width: 768px){
   #projects-filter .projects-filter-buttons > li a.projects-filter-button  {min-width: 200px;padding-right: 24px;}
   #projects-filter .projects-filter-buttons > li.border-after{padding-right:0px;}
   #projects-filter .projects-filter-buttons > li span.arrow{right:3px;}
   #projects-filter .projects-filter-buttons > li.border-after:after{right:-15px;}
   #projects-filter .projects-filter-buttons > li.open.border-after .filter-box{margin-right: -38px;padding: 15px 10px;max-width: 260px;margin-left: -10px;}
   #projects-filter .filter-attributes a{font-size:100%}
   #projects-filter .projects-filter-buttons > li span.clear-fillter{
    right: 30px;
}
}
@media(max-width: 767px) {
    #projects-filter    {margin: 30px 9% 10px 9%;}
    #projects-filter .projects-filter-buttons > li  {width:100%;margin-bottom: 17px;}
    #projects-filter .projects-filter-buttons > li.border-after { padding-right:0px; margin-right:0px; }
    #projects-filter .projects-filter-buttons > li.border-after:after   { display:none; }
    #projects-filter .projects-filter-buttons > li.border-after:before       {right:2px;}
    #projects-filter a.projects-filter-button       { width:100%; padding-bottom:5px; }

    #projects-filter .projects-filter-buttons > li.open.border-after .filter-box {margin-left: -15px;margin-right:-45px;max-width: 420px;}
    #projects-filter .projects-filter-buttons > li.open input.searchCountry       {width:200px;}
    #projects-filter .projects-filter-buttons > li span.arrow{right: 2px;width: 13px;height: 18px;top: 3px;z-index: 0;}
    #projects-filter .projects-filter-buttons > li:nth-last-child(1) span.arrow{right: 2px;}
    #projects-filter .projects-filter-buttons > li span.clear-fillter  {right:9%;}
    #projects-filter .filter-attributes a{font-size:100%}
}



.projects-list > div     { margin-bottom:30px;  }

.project-box2 .project-box2-img         { padding-bottom: 60%; position:relative; background-size:cover; background-position:center center; }
.project-box2-img:hover:after           { background-color: rgba(0, 0, 0, 0.15); }
.project-box2 .project-box2-img:before  { content: ""; width: 20px;height: 100%;background: #2DCCD2;position: absolute;left: 0; }
.project-box2 .project-box2-content     { font-family:Inter-Medium; position:absolute; top:0px; bottom:0px; right:0px; left:0px; padding:35px 35px 35px 55px;z-index:1; }

.project-box2 .project-box2-label       { color:#ffffff; font-size:220%; }
.project-box2 .project-box2-country     { color:#ffffff; font-size:150%;margin-bottom:5px; }
.project-box2 .project-box2-arrow svg   { fill:#fff; width:10px;}
.project-box2.wide-mode .project-box2-img   { padding-bottom: 30%; }


@media(max-width: 991px) {
    .projects-list > div                        { margin-bottom:20px;  }
    .project-box2.wide-mode .project-box2-img   { padding-bottom: 33%; }
    .project-box2 .project-box2-img:before      { width:15px; }
    .project-box2 .project-box2-content         { padding:20px 25px 20px 40px; }
    .project-box2 .project-box2-label           { font-size:160%; }
    .project-box2 .project-box2-country         { font-size:120%; }

}

@media(max-width: 767px) {
    .project-box2.wide-mode .project-box2-img   { padding-bottom: 66%; }
    .project-box2 .project-box2-img:before      { width:20px; }
    .project-box2 .project-box2-content         { padding:20px 25px 20px 45px; }
    .projects-list > div                        { margin-bottom:30px;  }
}



/*Add To SiteTemplate*/

.pagination>li>a, .pagination>li>span   {background-color:#eee;color:#002D5B;width: 60px;height: 60px;font-size: 18px;display: table-cell;padding: 16px 12px;font-family:Inter-Medium;border: 0px;margin-left: 2px;}
.pagination>.active>a, .pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus          { background-color:#002D5B; pointer-events:none;}


@media (max-width:1024px) and (orientation:landscape){
    .pagination{margin-bottom:0px;}

}