/************************************************
1. FONT IMPORTER
2. GENERAL
3. SCREENS
4. LOADER
5. MODAL
6. BEFORE AFTER
7. SIDEBAR MENU
*************************************************/


/** 1. FONT IMPORTER *************************
**********************************************/


/** 2. GENERAL **********************************
*************************************************/

*, :before, :after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

input, select, button, textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  font: inherit;
  color: inherit;
}

body {
  background: #151515;
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
}

.flex-content {
  justify-content: inherit !important;
  padding: 0 !important;
}

h1, h2, h3 {
  font-family: 'Source Sans Pro', serif;
  font-weight: bold;
  color: #fff;
  text-align: left;
}

h1 {
  font-size: 2vw; 
  line-height: 2.8vw;
  padding: 70px 4vw 2vw 4vw;
  margin-bottom: 4vw;
  position: relative;
}

h2 {
  font-size: 1.6vw; 
  margin-bottom: 1.6vw;
  line-height: 2.2px;
  font-weight: bold;
  margin: ;
}

p, li, ul {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1vw;
  line-height: 1.6vw;
  font-weight: normal;
  font-style: normal;
  color: #fff;
  margin-bottom: 1vw;
  text-align: left;
}

strong {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: bold;
  font-style: normal;

}

.em {
  font-style: italic;
}

img.click {width: 5vw !important;}

a.btn {
  background-color: #666;
  border-bottom: 2px solid rgba(0,0,0,0.1);
  color: #fff; 
  text-decoration: none;
  font-size: 1.2vw;
  padding: 0.5vw 2.5vw;
  display: inline-block;
  margin-bottom: 2vw;
}

a.btn:hover {
  color: #fff; 
  text-decoration: none;
  background-color: #999;
}

a.btn img {
  width: 1.2vw;
  height: 1.2vw;
  margin-right: 0.5vw;
  vertical-align: middle;
}

#navigation {
  display: none;
}

.ribbon {
  position: absolute;
  left: 3vw;
  top: 10vw;
  z-index: 9;
  width: 33vw;
}


h1 img {
  position: absolute;
  bottom: -10px;
  width: 30px;
  left: 47%;
}

section a {
  color: #fff;
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
}

section a:hover {
  color: #fff;
  font-weight: bold;
  text-decoration: underline;
}

header {
  opacity: 1 !important;
  background: #212121 !important;
  height: 52px;
  z-index: 999;
  padding: 0 20px;
}

header .pixeltie {
  height: 32px !important;
  margin-right: 20px;
  margin-top: -2px;
}

header .title-story {
  height: 18px !important;
  opacity: .9;
}

header .logo {
  text-transform: uppercase;
  font-size: 18px;
  opacity: .9;
  margin-top: 2px;
  color: #fff;
}

header .logo span {
  opacity: .7;
  padding-left: 5px;
  color: #fff;
}
header .logo a {
  color: #fff;
}
footer {
  position: fixed; 
  bottom: 0px; 
  height: 25px; 
  width: 100%; 
  background: #161616;
  z-index: 999;
  padding: inherit;
}

footer p {
  font-family: arial, sans-serif;
  font-size: 11px;
  line-height: 11px;
  color: #999;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

footer .right {
  position: absolute;  
  right: 20px; 
  top:8px;
}

footer .left {
  position: absolute; 
  top: 8px; 
  left: 20px; 
}

footer a {
  color: #999;
  text-decoration: none;
}
footer a:hover {
  text-decoration: none;
  color: #ED1C24;
}

nav[role='navigation'] li a {
  justify-content: left;
}


.preload { opacity: 0; position: absolute; top: -9999px; left: -9999px; }

.cat1, .cat2, .cat3, .cat4, .cat5, .cat6, .cat7, .cat8 {
  height: 100vh;
  min-height: 100vh;
}

.bkg_cn {position: absolute; top: 20%; right: 30%; width: 50%; z-index: -1;}
.bkg_hk {position: absolute; top: 20%; right: 30%; width: 50%; z-index: -1;}
.bkg_my {position: absolute; top: 20%; right: 30%; width: 50%; z-index: -1;}
.bkg_sg {position: absolute; top: 20%; right: 30%; width: 50%; z-index: -1;}


.card-50 .flex-content:last-child {
  background-color:initial;
  margin: 5vw 3vw 5vw 0vw;
}

/*
#china, #china2, #china3, #china4 {background:url('../img/bkg_cn.svg') no-repeat center center / 50%;}
#hongkong, #hongkong2, #hongkong3, #hongkong4 {background:url('../img/bkg_hk.svg') no-repeat center center / 50%;}
#malaysia, #malaysia2, #malaysia3, #malaysia4 {background:url('../img/bkg_my.svg') no-repeat center center / 50%;}
#singapore, #singapore2, #singapore3, #singapore4 {background:url('../img/bkg_sg.svg') no-repeat center center / 50%;}
*/

#china, #china2, #china3, #china4, #hongkong, #hongkong2, #hongkong3, #hongkong4, #malaysia, #malaysia2, #malaysia3, #malaysia4, #singapore, #singapore2, #singapore3, #singapore4 {padding: 4vw 2vw; margin: 0 -3vw;}
}

.embed {margin-bottom: 2vw;}

/* INTRO *********************************/
#section-1 .title {
width: 50vw;
}
#section-1 .keyboard {
  position: absolute; 
  bottom: 50px; 
  left: 48%; 
  z-index: 999; 
  height: 50px !important;
  -webkit-animation: bounceInUp 2s, keyboard 1s infinite ease-in-out;
  animation: bounceInUp 2s, keyboard 1s infinite ease-in-out;

}
@-webkit-keyframes keyboard
{
    0%   {bottom: 60px;}
    50%  {bottom: 40px;}
    100%  {bottom: 60px;}
}
@keyframes keyboard
{
    0%   {bottom: 60px;}
    50%  {bottom: 40px;}
    100%  {bottom: 60px;}
}

.intro {margin-bottom: 3vw;}




/* DEFINITION OF PEP ********************/
.cat1 {background: url('../img/bkg_def.jpg') no-repeat center center / cover;}
.cat1 a.btn {background-color: #204564; border-radius: 5px;}
.cat1 a.btn:hover {background: #009DDB;}

.cat1 .nav-tabs-countries li.active {background-color: rgba(0, 157, 219, 1);}
.cat1 .nav-tabs-countries {background-color: rgba(0, 157, 219, 0.5); box-shadow:inset 0 0 0 99999px rgba(0,0,0,0.5);}
.cat1 .nav-tabs-countries li {background-color: initial;}
.cat1 .nav-tabs-countries li:hover {background-color: rgba(0, 157, 219, 0.5);}
.cat1 .nav-tabs-countries li.active:hover {background-color: rgba(0, 157, 219, 1);}

.cat1 #china, .cat1 #hongkong, .cat1 #malaysia, .cat1 #singapore {background-color:rgba(0, 157, 219, 1);}
.cat1 .nav-tabs li a {background-color: #009DDB; box-shadow:inset 0 0 0 99999px rgba(0,0,0,0.5);}
.cat1 .nav-tabs li a:hover, .cat1 .nav-tabs li.active a {background-color: #009DDB; box-shadow: none;}
.cat1 .em { font-size: 1.2vw; line-height: 1.8vw;}

.cat1 .part111 {background-color:rgba(0, 0, 0, 0.8); padding: 2vw !important; margin-bottom: 1vw;}
.cat1 .part112 {background-color:rgba(0, 0, 0, 0.8); padding: 2vw !important;}
.cat1 #part12 {padding: 0 2vw !important;}
.cat1 .part121 {background-color:rgba(0, 0, 0, 0.8); padding: 2vw !important; width: calc(100% + 6vw); margin: 0 -3vw 2vw -3vw; }

/* PEP DUE DILIGENCE ********************/
.cat2 {background: url('../img/bkg_pep.jpg') no-repeat center center / cover;}

.cat2 .nav-tabs-countries li.active {background-color: rgba(236, 76, 30, 1);}
.cat2 .nav-tabs-countries {background-color: rgba(236, 76, 30, 0.5); box-shadow:inset 0 0 0 99999px rgba(0,0,0,0.5);}
.cat2 .nav-tabs-countries li {background-color: initial;}
.cat2 .nav-tabs-countries li:hover {background-color: rgba(236, 76, 30, 0.5);}
.cat2 .nav-tabs-countries li.active:hover {background-color: rgba(236, 76, 30, 1);}

.cat2 #china2, .cat2 #hongkong2, .cat2 #malaysia2, .cat2 #singapore2 {background-color:rgba(236, 76, 30, 1);}
.cat2 .nav-tabs li a {background-color: #ec4c1e; box-shadow:inset 0 0 0 99999px rgba(0,0,0,0.5);}
.cat2 .nav-tabs li a:hover, .cat2 .nav-tabs li.active a {background-color: #ec4c1e; box-shadow: none;}

.cat2 .part211 {background-color:rgba(0, 0, 0, 0.8); padding: 2vw !important; margin-bottom: 1vw;}
.cat2 .part212 {background-color:rgba(0, 0, 0, 0.8); padding: 2vw !important;}
.cat2 #part22 {padding: 0 2vw !important;}
.cat2 .part221 {background-color:rgba(0, 0, 0, 0.8); padding: 2vw !important; width: calc(100% + 6vw); margin: 0 -3vw 2vw -3vw; }
.cat2 #part23 {background-color:rgba(0, 0, 0, 0.8); padding: 2vw !important;}

/* ENFORCEMENT AND INVESTIGATION ********/
.cat3 {background: url('../img/bkg_enf.jpg') no-repeat center center / cover;}

.cat3 .nav-tabs-countries li.active {background-color: rgba(29, 159, 178, 1);}
.cat3 .nav-tabs-countries {background-color: rgba(29, 159, 178, 0.5); box-shadow:inset 0 0 0 99999px rgba(0,0,0,0.5);}
.cat3 .nav-tabs-countries li {background-color: initial;}
.cat3 .nav-tabs-countries li:hover {background-color: rgba(29, 159, 178, 0.5);}
.cat3 .nav-tabs-countries li.active:hover {background-color: rgba(29, 159, 178, 1);}

.cat3 #china3, .cat3 #hongkong3, .cat3 #malaysia3, .cat3 #singapore3 {background-color:rgba(29, 159, 178, 1); padding: 2vw;}
.cat3 .nav-tabs li a {background-color: #1D9FB2; box-shadow:inset 0 0 0 99999px rgba(0,0,0,0.5);}
.cat3 .nav-tabs li a:hover, .cat3 .nav-tabs li.active a {background-color: #1D9FB2; box-shadow: none;}

.cat3 .part311 {background-color:rgba(0, 0, 0, 0.8); padding: 2vw !important; margin-bottom: 1vw;}
.cat3 .part312 {background-color:rgba(0, 0, 0, 0.8); padding: 2vw !important;}
.cat3 #part32 {padding: 0 2vw !important;}


/* STATE-OWNED ENTERPRISES **************/
.cat4 {background: url('../img/bkg_sta.jpg') no-repeat center center / cover;}

.cat4 .nav-tabs-countries li.active {background-color: rgba(103, 30, 117, 1);}
.cat4 .nav-tabs-countries {background-color: rgba(103, 30, 117, 0.5); box-shadow:inset 0 0 0 99999px rgba(0,0,0,0.5);}
.cat2 .nav-tabs-countries li {background-color: initial;}
.cat4 .nav-tabs-countries li:hover {background-color: rgba(103, 30, 117, 0.5);}
.cat4 .nav-tabs-countries li.active:hover {background-color: rgba(103, 30, 117, 1);}

.cat4 #china4, .cat4 #hongkong4, .cat4 #malaysia4, .cat4 #singapore4 {background-color:rgba(103, 30, 117, 1); padding: 2vw;}
.cat4 .nav-tabs li a {background-color: #671E75; box-shadow:inset 0 0 0 99999px rgba(0,0,0,0.5);}
.cat4 .nav-tabs li a:hover, .cat4 .nav-tabs li.active a {background-color: #671E75; box-shadow: none;}

.cat4 .source {font-size: 0.8vw; color: #9334A5; margin-top: 0; text-align: center;}
.cat4 .source a {color: #9334A5;}
.cat4 .source a:hover {color: #D075E2;}

.cat4 .part411 {background-color:rgba(0, 0, 0, 0.8); padding: 2vw !important; margin-bottom: 1vw;}
.cat4 .part412 {background-color:rgba(0, 0, 0, 0.8); padding: 2vw !important;}
.cat4 .part421 {background-color:rgba(0, 0, 0, 0.8); padding: 2vw !important; width: calc(100% + 6vw); margin: 1vw -3vw 0vw -3vw; }
.cat4 #part42 {padding: 0 2vw !important;}

/* APPROPRIATE DATA-DRIVEN **************/
.cat5 {background: url('../img/bkg_app.jpg') no-repeat center center / cover;}
.cat5 .nav-tabs li a {background-color: #00AF66; box-shadow:inset 0 0 0 99999px rgba(0,0,0,0.5);}
.cat5 .nav-tabs li a:hover, .cat5 .nav-tabs li.active a {background-color: #00AF66; box-shadow: none;}

.cat5 a.link {color: #00AF66}
.cat5 a.btn {background-color:#065f3a; border-radius: 5px; }
.cat5 a.btn:hover {background: #00AF66;}

.cat5 #part51 {background-color:rgba(0, 0, 0, 0.8); padding: 2vw !important;}
.cat5 #part52 {background-color:rgba(0, 0, 0, 0.8); padding: 2vw !important;}

/* SUMMARY ******************************/
.cat6 {background: url('../img/bkg_sum.jpg') no-repeat center center / cover;}

.cat6 a.link {color: #ED1C24}
.cat6 .nav-tabs li a {background-color: #ED1C24; box-shadow:inset 0 0 0 99999px rgba(0,0,0,0.5);}
.cat6 .nav-tabs li a:hover, .cat6 .nav-tabs li.active a {background-color: #ED1C24; box-shadow: none;}

.cat6 .card-50 .flex-content:last-child p, .cat6 .card-50 .flex-content:last-child li {
  font-size: 1.2vw;
  line-height: 1.8vw;
}

.cat6 #part61, .cat6 #part62, .cat6 #part63, .cat6 #part64 {background-color:rgba(0, 0, 0, 0.8); padding: 2vw !important;}

/* LNRS ********************************/

.cat7 {background-color:#EFEFEF;}
.cat7 img {width: 40vw; margin-bottom: 5vw;}
.cat7 p {font-size: 1.2vw; line-height: 1.8vw; color: #212121;}
.cat7 a {color: #ED1C24; font-weight: bold;}
.cat7 a:hover {color: #ED1C24; text-decoration: underline;}
.cat7 .text {width: 80vw;}


/* CREDITS *****************************/

.cat8-1 {
  background-color: #000;
}

.cat8-1 p {
  margin-bottom: 10px;
}

.cat8-1 li {
  font-size: 14px;
  line-height: 22px;
  color: #fff;
  margin-left: 0;
  padding-left: 0;
}

.cat8-1 ul {
  margin-bottom: 30px;
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

.cat8-1 li a {
  color: #fff;
}
.cat8-1 li a:hover {
  color: #f5c410;
  text-decoration: underline;
}