/* CSS Document */
html, body {margin:0;padding:0;height:100%}
body {font-family: Verdana, sans-serif}

/* general */
.wrap {max-width: 1180px;margin:0 auto;}
.space {padding-top:90px}

/* header and navigation */
.menu {position:fixed;width:100%;background:white;min-height:80px;box-shadow: 0 6px 6px -6px rgba(0, 0, 0, 0.3);z-index:10}
.menu .wrap {display:flex;flex-wrap: wrap;justify-content:space-between}
.brand {padding:12px 0px 0px 24px}
.brand a:link, .brand a:visited {color:black;text-decoration:none;font-size:1.5em;display:inline-block;padding:10px 10px 10px 70px;background: #ffffff url("img/logo.png") no-repeat left center}
.brand a:hover {color:rgba(0, 138, 0, 1)}
.nav {padding:0px 24px 0px 24px;text-align:right}

.nav ul, ul.breadcrumb {list-style:none;padding:0;margin:0}
ul.breadcrumb {margin:12px 0 24px 24px}
.nav ul {margin-bottom:12px}
.nav ul li, ul.breadcrumb li {display:inline-block}
.nav li {margin:24px 20px 0px 0px}
.nav li.last {margin-right:0}
.nav li a:link, .nav li a:visited {color:black;text-decoration:none;font-weight:bold;display:inline-block;padding-bottom:10px}
.nav li a:hover  {color:rgba(0, 138, 0, 1);border-bottom:3px solid rgba(0, 138, 0, 1)}
.nav li a.active {border-bottom:3px solid rgba(0, 138, 0, 1)}

/* search form */
.nav input {width:110px;height:30px;border:1px solid black;border-radius:16px;padding-left:30px;background:#ffffff url("img/search.svg") no-repeat 8px center;background-size:14px 14px}
.nav label, .container label {display:none}
.container form {max-width: 600px;width:100%;margin-bottom:24px}
.container input {box-sizing:border-box;margin:0;padding:16px 18px;border:1px solid #008a00;border-top-left-radius:4px;border-bottom-left-radius:4px;vertical-align:bottom;width:80%}
.container input:focus {outline:0;background:#E8F4E8}
.container button span {display:none}
.container button {background: #00549f url("img/search-white.svg") no-repeat center center;background-size: 16px 16px;display:inline-block;width:50px;height:50px;padding: 8px 15px;border:0 none;border-top-right-radius:4px;border-bottom-right-radius:4px;cursor:pointer}
.container button:hover {background: #008a00 url("img/search-white.svg") no-repeat center center;background-size: 16px 16px}

/* search results */
.results {list-style:none;padding:0;margin:0 24px 24px;max-width:600px;width:100%}
.results li {padding-bottom:24px}
.results a:link, .results a:visited {color:#015172;text-decoration:none} 
.results a:hover {text-decoration:underline}
.results h2 {font-weight:normal;font-size:1em;margin-bottom:0}
span.url {display:block;color: #767676;margin-bottom:0;font-size:80%;line-height:160%}
p.results {font-size:16px;line-height:25px}
.results p {margin-top:0}
.results strong {background-color:#f2f9f2}
.paging {list-style:none;padding:0;margin:0;margin-bottom:80px;width:100%;max-width:600px}
.paging li {display:inline-block}
.paging strong {display:inline-block;color:white;background: #008a00;padding:3px 9px}
.paging a:link, .paging a:visited {display:inline-block;color:black;background: #fff;padding:3px 9px;text-decoration:none;margin-right:3px}
.paging a:hover {background:#d5d2ca}

/* breadcrumb */
ul.breadcrumb li a:link, ul.breadcrumb li a:visited {color:black;text-decoration:underline}
ul.breadcrumb li a:hover {color:rgba(0, 138, 0, 1)}

h1 {padding:10px 0px 10px 24px;font-size:37px;font-weight:normal}

/* treaties and reports */
.container {margin:0 auto;display:flex;flex-wrap: wrap;justify-content:center}
.tile {background:white;box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);max-width:260px;margin:0 16px 30px}
.tile:hover {box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);}
.tile div {text-align:center}
.tile img {width:65%;margin:0 auto}
.tile a:link, .tile a:visited {text-decoration:none;}
.tile a:link span, .tile a:visited span {color:#000;display:block;padding:10px 20px;background: #ffffff url("img/arrow-black.svg") no-repeat 95% center;background-size: 8px 12px}
.tile a:hover span {color:rgba(0, 138, 0, 1);background: #f2f9f2 url("img/arrow-green.svg") no-repeat 95% center;background-size: 8px 12px}
.treaty {font-weight:bold}
.report {border-top:1px solid #ccc}

/* home, treaty, report */
.wrap.space.home {position:absolute;left:50%;top:20px;margin-left:-590px}
.container-grid {margin:0 auto;display:grid;grid-template-columns: 3fr 1fr;grid-gap:24px;background:white;z-index:5}
.main {padding:0px 24px 12px 24px}
.main h1 {margin:0px 0px 24px 0px;padding-left:0}
.main p, .side p, .side li, main li {font-size:16px;line-height:25px}
.main p {margin-top:0px}
.main h2 {font-size:20px;line-height:25px;font-weight:normal;margin:30px 0px 12px 0px}
.main h2.en {font-size:24px;line-height:25px;font-weight:normal;margin:0px 0px 32px 0px}
h1:has(~h2.en) {margin-bottom:0px!important}

p.intro {font-size:20px;line-height:30px}
.side, .main {padding-bottom:48px}
.side img {max-width:289px}
.side h2 {font-size:15px;margin:24px 0px 0px}
.side ul {list-style:none;padding:0;margin:0}
.side a:link, .side a:visited {color:#000;display:block;padding:5px 20px 5px 0;background: #ffffff url("img/arrow-black.svg") no-repeat 95% center;background-size: 8px 12px;text-decoration:none}
.side a:hover {color:rgba(0, 138, 0, 1);background: #f2f9f2 url("img/arrow-green.svg") no-repeat 95% center;background-size: 8px 12px}
.side a:link.external, .side a:visited.external {background: #ffffff url("img/external-black.svg") no-repeat 95% center;background-size: 9px 14px}
.side a:hover.external {background: #f2f9f2 url("img/external-green.svg") no-repeat 95% center;background-size: 9px 14px}
.side a:link.word, .side a:visited.word {color:#000;display:block;padding:5px 0px 5px 30px;background: #ffffff url("img/doc-word.svg") no-repeat left 8px;background-size: 21px 23px;text-decoration:none}
.side a:hover.word {background: #f2f9f2 url("img/doc-word.svg") no-repeat left 8px;background-size: 21px 23px}
.side a:link.pdf, .side a:visited.pdf {color:#000;display:block;padding:5px 0px 5px 30px;background: #ffffff url("img/doc-pdf.svg") no-repeat left 8px;background-size: 21px 23px;text-decoration:none}
.side a:hover.pdf {background: #f2f9f2 url("img/doc-pdf.svg") no-repeat left 8px;background-size: 21px 23px}
.side a:link.zip, .side a:visited.zip {color:#000;display:block;padding:5px 0px 5px 30px;background: #ffffff url("img/doc-zip.svg") no-repeat left 8px;background-size: 21px 23px;text-decoration:none}
.side a:hover.zip {background: #f2f9f2 url("img/doc-zip.svg") no-repeat left 8px;background-size: 21px 23px}
.side a:link.xls, .side a:visited.xls {color:#000;display:block;padding:5px 0px 5px 30px;background: #ffffff url("img/doc-xls.svg") no-repeat left 8px;background-size: 21px 23px;text-decoration:none}
.side a:hover.xls {background: #f2f9f2 url("img/doc-xls.svg") no-repeat left 8px;background-size: 21px 23px}
.side a:link.xml, .side a:visited.xml {color:#000;display:block;padding:5px 0px 5px 30px;background: #ffffff url("img/doc-xml.svg") no-repeat left 8px;background-size: 21px 23px;text-decoration:none}
.side a:hover.xml {background: #f2f9f2 url("img/doc-xml.svg") no-repeat left 8px;background-size: 21px 23px}

.side p {margin:0}

.main p a:link, .main p a:visited {color:rgb(0, 84, 159)}
/* footer */
.footer {box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.3);padding:8px 0}
.footer .wrap {text-align:right}
.footer img {margin-right:82px}
.footer.home { position: fixed;width:100%;z-index:10;height:80px;background:white}
.footer.home {bottom:0}

.sticky {background: #C92CA2;color: #fff;position: sticky;bottom: 0px;padding: 1em 0}


/* home */
.backgroundimg {background-size: cover;position: absolute;top: 0;left: 0;height: 100%;width: 100%;z-index:0;}

#back1 {background: url("img/bg-1.jpg") no-repeat;background-size: cover;z-index:0!important}
#back2 {background: url("img/bg-2.jpg") no-repeat;background-size: cover;z-index:0!important}
#back3 {background: url("img/bg-3.jpg") no-repeat;background-size: cover;z-index:0!important}
#back4 {background: url("img/bg-4.jpg") no-repeat;background-size: cover;z-index:0!important}
#back5 {background: url("img/bg-5.jpg") no-repeat;background-size: cover;z-index:0!important}

@keyframes backgroundchangeFadeInOut {
  0% {opacity:1}
  17% {opacity:1}
  25% {opacity:0}
  92% {opacity:0}
  100% {opacity:1}
}

@-webkit-keyframes backgroundchangeFadeInOut {
  0% {opacity:1}
  17% {opacity:1}
  25% {opacity:0}
  92% {opacity:0}
  100% {opacity:1}
}
#backgroundchange div:nth-of-type(1) {
  animation-delay: 24s;
  -webkit-animation-delay: 24s;
}
#backgroundchange div:nth-of-type(2) {
  animation-delay: 18s;
  -webkit-animation-delay: 18s;
}
#backgroundchange div:nth-of-type(3) {
  animation-delay: 12s;
  -webkit-animation-delay: 12s;
}
#backgroundchange div:nth-of-type(4) {
  animation-delay: 6s;
  -webkit-animation-delay: 6s;
}

#backgroundchange div:nth-of-type(5) {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}

#backgroundchange div {
animation-name: backgroundchangeFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 24s;

-webkit-animation-name: backgroundchangeFadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 24s;
}

@media (max-width: 1171px) {
.tile {max-width:330px}
}
@media (max-width: 1180px) {
.wrap.space.home {margin-left:calc(-50%);}
}
@media (max-width: 1168px) {
.space {padding-top:150px}
}
@media (max-width: 840px) {
.container-grid {display:block}
.side {padding-left:24px;margin-bottom:90px}
}
@media (max-width: 640px) {
.space {padding-top:200px}
}
@media (max-width: 538px) {
.space {padding-top:240px}
}