@charset "utf-8";
html {scroll-behavior: smooth;}
body{ padding-top:0; line-height:1.6;}
:lang(en) body{font-family: 'Arial', sans-serif;}
.sticky-header{ height:auto; border-bottom:1px solid #ddd;}
.fixed-top{position: fixed;top: 0;right: 0;left: 0;z-index: 1030;}


.swiper-button-prev,
.swiper-button-next{ background-color:#fff;}
.title-project{ padding:15px; border-bottom:1px solid #ddd}
.title-project h1{ font-size:41px; font-weight:700; font-family:'Times New Roman','CAMBRIA',serif}
.title-project h1 span{ color:#9f9f9f;}
.project{ border:0 solid #ddd; border-width:0 1px;display:flex; flex-direction:row-reverse;justify-content: space-between;}
.project.scorlled{flex-direction:row;}
.fixed-wrapper {flex-basis:240px;}
.project-selector{display: flex;flex-direction: column; background:hsl(0, 0%, 95%);}
.fixed-top .project-selector{
display: block;
position: absolute;
left: 50%;
top: 0;
transform: translateX(310px);
width: 240px;
}
.project-desc{ padding:25px; -ms-flex:1; width:840px;flex-basis: calc(100% - 240px);}


.scroll .project-desc-item{ margin-top:96px;}
.scroll .project-desc-item:first-of-type{ margin-top:0;}
_:-ms-fullscreen, :root .scroll .project-desc-item {width:810px;} 
.tabs .project-desc{min-height:1200px;}
.tabs .project-desc-item{ display:none; opacity:0; }
.tabs .project-desc-item.active{ display:block; opacity:1;animation: fade-in .25s;animation-fill-mode: forwards;}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.project-item{ padding:20px; padding-left:30px; color:rgba(255,255,255,.4); cursor:pointer; position:relative;transition: all .25s;  min-height:180px;}
.tabs .project-item{flex:1 0;}
.project-item.active{ color:rgba(255,255,255,1);}

.project-item h2{font-size:21px; font-weight:700; line-height:1;}
.project-item small{ display:block; font-size:.7em; font-weight:400;}
.project-item:nth-child(1){ background:#fe7a6e;}
.project-item:nth-child(2){ background:#72cca7;}
.project-item:nth-child(3){ background:#4cc1ec;}
.project-item:nth-child(4){ background:#10a296;}
.project-item:nth-child(5){ background:#fa987d;}

.tabs .project-item:after{ content:''; position:absolute; top:0; bottom:0; left:0; width:10px; height:100%; background:#fff;transition: all .2s;}
.tabs .project-item.active:after{ width:0;}

.project-desc h3{ font-size:20px; font-weight:700; color:#4a5d6a; margin-bottom:.5em; margin-top:2em; padding-left:12px; position:relative;}
.project-desc h3:before{ position:absolute; left:0; top:50%;transform: translate(0,-50%); content:''; display:block; width:4px; height:16px; background:#999;}

.project-desc #project1 h3:before{ background:#fe7a6e;}
.project-desc #project2 h3:before{ background:#72cca7;}
.project-desc #project3 h3:before{ background:#4cc1ec;}
.project-desc #project4 h3:before{ background:#10a296;}
.project-desc #project5 h3:before{ background:#fa987d;}


.project-desc h3:nth-of-type(1){ margin-top:0;}
.table-responsive{ border:1px solid #bdbdbd; border-radius:8px; margin-top:.5em}
.table-responsive table{ border-collapse:collapse; width:100%; border-style: hidden;}
.table-responsive th{ width:30%; background:hsl(0, 0%, 95%);}
.table-responsive th,
.table-responsive td{padding:.5rem; border:1px solid #bdbdbd}

.project-desc img{ max-width:100%; display:block;}

.project-desc ul li{ position:relative; padding-left:12px; margin-top:10px;}
.project-desc ul li:first-child{ margin-top:0;}
.project-desc ul li:before { position:absolute; left:0; top:-1px;content: "\2022"; color:#777; }


.splash{ position:relative; margin-bottom:1.25rem; /*margin-top:-25px;margin-left: -25px;*/}
.splash:after{content: '';position: absolute;top: 0;right: 0;bottom: 0;left: 0;background-image: linear-gradient(rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.6) 100%);z-index:3;pointer-events:none;}
.splash .slogan{ position:absolute; z-index:4; left:0; bottom:0; padding:0 20px 20px;text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.68); color:#fff; font-size:2.1vw; font-weight:900; line-height:1;}
.splash .slogan small{ font-size:.6em; display:block;}


.myfp{ font-size:1.5rem;}
.myfp .title-project{ position:fixed; width:100%; border-bottom:0 none; z-index:1000; background:rgba(0,0,0,.2); color:#fff;transition: all .3s;}
.myfp .title-project h1{ white-space: nowrap}
.myfp .title-project a,
.myfp .title-project a:hover{ color:#fff; text-decoration:none;}
.myfp .title-project.hide,
.myfp .title-project.nav-up{transform: translateY(-100%);}
.myfp .title-project.nav-down{ background:rgba(0,0,0,.6);}

.myfp .title-project .navbar{display:flex;justify-content:space-between;align-items:center;}
.myfp .title-project .navbar-nav{ margin-left:auto;font-size:.708em;}
.myfp .title-project .nav-item{ margin-left:20px;}
.myfp .title-project .dropdown-menu{ padding:0;}
.myfp .title-project .nav-item:last-child a{ color:#bbb; font-size:.85em;}
.myfp h2{font-size:3.4vw; font-weight:700; letter-spacing:-1px; text-align:center; margin-bottom:1.5em; line-height:1;}
.myfp h2 small{ font-size:.4em; display:block; margin-top:.5em}
.myfp .section{ padding:4rem 0 6rem;box-shadow: inset 0 14px 20px -20px rgba(0,0,0,0.6);}
.myfp table{font-size:.8125em;}
.myfp input[type="text"],
.myfp input[type="email"]{ border-radius:.25rem;}

.myfp ul.list{ padding-left:0;}
.myfp ul.list li{ position:relative; padding-left:.7em; margin-top:10px; }
.myfp ul.list li:before { position:absolute; left:0;content: "\2022"; color:#777; }


.myfp #sect_home{ color:#fff; height:100vh; display:flex;justify-content: center;align-items: center;  position:relative; background:linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)),url(/images_en/bg-sect.jpg) 50% 50% no-repeat fixed; background-size:cover;}
.myfp #sect_aboutus{ background:#2d5373; color:#fff; padding:8em 0 9em; /*height:100vh*/}
.myfp #sect_contactus{ background:#12222f; color:#fff; padding:2em 0 3em;}

.myfp .sect-program:nth-of-type(odd){ background:hsl(0, 0%, 95%);}

.myfp .sect-program .container{font-size:.937em;}
.myfp .sect-program h3{ font-size:1.6em; font-weight:700; color:hsl(0, 0%, 40%);}
.myfp .sect-program h3:not(:first-child){ margin-top:1.1em;}

.myfp #sect_contactus{ font-size:.7em;}
.myfp #sect_contactus h2 small{ display:block;}
.myfp #sect_contactus p,
.myfp #sect_contactus address{ margin-bottom:0;}
.myfp #sect_contactus .form-label{ margin-bottom:0;}

.myfp #supporter { background:hsl(0, 0%, 15%); padding:2em 0;}
.myfp #supporter .col{ text-align:center; line-height:1;align-self:center }
.myfp #supporter a{ color:hsl(0, 0%, 70%);  text-decoration:none; font-size:.64em;}
.myfp #supporter img{-webkit-filter: grayscale(1) invert(1);filter: grayscale(1) invert(1); max-width:76%; display:block; margin:0 auto;}
.myfp #supporter span{ display:none;}

.form-check-input{ width:1em!important;margin: .25em .5em 0 0!important } 

.myfp .iso-certification{display:flex;justify-content:flex-end; gap:15px;align-items:center;flex-wrap:wrap;}
.myfp .iso-certification figcaption{ font-size:.7em; text-align:center; padding-top:5px;color:rgba(255,255,255,.3);}


.floating-scrollspy {
  display: block;
  position: fixed;
  top: 45%;
  right: 20px;
}
.floating-scrollspy .nav {
  display: block;
}

.floating-scrollspy .nav-link {
  display: block;
  padding: 5px;
  line-height: 0;
  font-size: 0;
}

.floating-scrollspy .nav-link span {display: none;}
.floating-scrollspy .nav-link i {
  width: 8px;
  height: 8px;
  margin: 1em auto;
  display: inline-block;
  background-color: #555;
  border:1px solid #fff;
  border-radius: 50%;
  opacity: 0.3;
  transition: 0.1s all ease-in-out;
}

.floating-scrollspy .nav-link.active i,
.floating-scrollspy .nav-link:hover i{
  opacity: 1;
} 


.scroll-to-top{ display:none; width:120px; position:fixed; right:10px; bottom:50px; border-radius:2em; color:#fff; text-decoration:none; background:hsl(0, 0%, 25%);padding:.5em 1.4em;}
.scroll-to-top:hover{ color:gold;}

@media all and (min-width: 992px) {
#nav-top .dropdown-menu{  display:block; right:0; opacity: 0;  visibility: hidden; transition:.3s; margin-top:0;border-top: 0 none;box-shadow: 0 7px 8px rgba(0, 0, 0, .175);border-radius:0 0 .25rem .25rem; transform: rotateX(-75deg);transform-origin: 0% 0%; }
#nav-top .nav-item:hover .dropdown-menu{ transition: .3s; opacity:1; visibility:visible; transform: rotateX(0deg); }
#nav-top .dropdown-item{padding:10px 8px; font-size:.9em}
#nav-top .dropdown-menu li:first-child .dropdown-item{ border-top:0 none;}
}

@media (max-width: 991.98px) {
body{ padding-bottom:200px;}
.splash .slogan{ font-size:4vw}
.title-project{ padding:15px 0;}
.title-project h1{ font-size:6.25vw;}
.project{ display:block;}
.project-selector {flex-wrap: wrap;}
.project-item{min-height:inherit; padding:10px}
.project-item::after { display:none;}
.project-item h2{ font-size:14px;}
.project-desc-item{ min-height:inherit;}
.project-desc{ padding:15px;}
.fixed-top{ bottom:0; top:auto;}
.fixed-top .project-selector{ left:0; top:100%;transform: translateY(-100%); width:100%}

.myfp{ font-size:1rem;}
.myfp h2{ font-size:2em;}
.myfp .title-project .navbar-nav{ font-size:1em;}

}