* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased; }

a {
  color: inherit;
  text-decoration: none; }

::-webkit-scrollbar {
  display: none; }

::-moz-selection {
  background: #FFF;
  color: #000; }

::selection {
  background: #FFF;
  color: #000; }

:focus {
  outline: none; }

@font-face {
  font-family: 'Nevis';
  src: url("//energi9perkasa.com/font/nevis_bold.woff") format("woff"), url("//energi9perkasa.com/font/nevis_bold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: 'Vaud';
  src: url("//energi9perkasa.com/font/vaud_regular.woff") format("woff"), url("//energi9perkasa.com/font/vaud_regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal; }

html {
  background: #121825; }

body {
  font-family: 'Vaud', sans-serif;
  font-size: 16px;
  letter-spacing: 0.025em;
  color: #121825; }

.container {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px; }

.row {
  margin: -40px -40px 0 -40px; }
  .row .col-20p {
    width: 20%;
    padding: 40px;
    float: left; }
  .row .col-33p {
    width: 33.33333%;
    padding: 40px;
    float: left; }
  .row .col-50p {
    width: 50%;
    padding: 40px;
    float: left; }
  .row .col-66p {
    width: 66.66667%;
    padding: 40px;
    float: left; }
  .row .col-70p {
    width: 70%;
    padding: 40px;
    float: left; }
  .row .col-80p {
    width: 80%;
    padding: 20px 0;
    margin: 0 auto; }
    .row .col-80p:after {
      content: "";
      display: block;
      clear: both; }
  .row.works {
    padding: 20px; }
  .row:after {
    content: "";
    display: block;
    clear: both; }

.hidetxt {
  display: none; }

.red {
  background: #B62031;
  color: #FFFFFF; }

ul.menu, ul.socmed, .copyright {
  position: absolute;
  top: 40px;
  font-family: 'Nevis', sans-serif;
  font-weight: 600;
  font-size: 0.75em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  list-style: none; }
  ul.menu li, ul.socmed li, .copyright li {
    float: left;
    margin: 0 28px 0 0; }
  ul.menu a:hover, ul.menu .active, ul.socmed a:hover, ul.socmed .active, .copyright a:hover, .copyright .active {
    color: #B62031; }

ul.menu {
  right: 12px; }

.copyright {
  top: unset;
  right: 40px;
  bottom: 40px; }

img.full-cover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  -o-object-fit: cover;
  object-fit: cover; }

header {
  color: #FFFFFF; }
  header h1.mainlogo {
    position: relative;
    width: 56px;
    height: 45px;
    background: url(//energi9perkasa.com/img/energysembilanperkasa_logogram.svg); }
    header h1.mainlogo.withtext {
      width: 385px;
      background: url(//energi9perkasa.com/img/energysembilanperkasa_full-logo.svg); }
    header h1.mainlogo a {
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0; }
  header ul.menu {
    top: 58px; }
  header ul.burger {
    display: none; }
  header.subpage {
    border-bottom: 1px solid #B62031; }

nav.overlaymenu {
  display: none; }

.bigheadertext {
  font-family: 'Nevis', sans-serif;
  color: #FFFFFF;
  text-transform: uppercase; }
  .bigheadertext .container {
    padding: 110px 0 200px; }
  .bigheadertext h1 {
    font-weight: 600;
    font-size: 1.3125em;
    letter-spacing: 0.2em;
    text-align: center; }

.belowheader {
  font-family: 'Nevis', sans-serif;
  font-weight: 600;
  font-size: 1em;
  letter-spacing: 0.2em;
  text-transform: uppercase; }
  .belowheader .container {
    padding: 27px 40px; }
  .belowheader h3 {
    font-size: 1em; }
    .belowheader h3.mobile {
      display: none; }
  .belowheader.activepagecat {
    color: #B62031; }
  .belowheader.pagesubmenu {
    background-color: #B62031;
    font-size: 0.75em;
    letter-spacing: 0.175em; }
    .belowheader.pagesubmenu .container {
      padding: 30px 40px 28px; }
  .belowheader ul.submenu {
    position: relative;
    list-style: none;
    white-space: nowrap;
    overflow: scroll;
    cursor: -webkit-grab;
    cursor: grab; }
    .belowheader ul.submenu li {
      display: inline-block;
      margin: 0 34px 0 0; }
    .belowheader ul.submenu a:hover {
      color: #FFFFFF; }
    .belowheader ul.submenu:after {
      position: absolute;
      content: "";
      display: block;
      width: 100px;
      height: 100%;
      top: 0;
      right: 0;
      background: #b62031;
      background: -webkit-gradient(linear, left top, right top, from(rgba(182, 32, 49, 0)), to(#b62031));
      background: -webkit-linear-gradient(left, rgba(182, 32, 49, 0) 0%, #b62031 100%);
      background: -o-linear-gradient(left, rgba(182, 32, 49, 0) 0%, #b62031 100%);
      background: linear-gradient(90deg, rgba(182, 32, 49, 0) 0%, #b62031 100%); }
  .belowheader .active {
    color: #FFFFFF; }

.homeexplore {
  text-align: center; }
  .homeexplore .container {
    padding: 150px 0; }
  .homeexplore q {
    display: block;
    max-width: 700px;
    margin: 0 auto 48px;
    font-size: 1.4375em;
    line-height: 1.3913em; }
    .homeexplore q:before, .homeexplore q:after {
      content: ""; }
  .homeexplore a.cta {
    font-family: 'Nevis', sans-serif;
    font-weight: 600;
    font-size: 0.75em;
    letter-spacing: 0.2em;
    text-transform: uppercase; }
    .homeexplore a.cta:after {
      content: "";
      display: inline-block;
      width: 15px;
      height: 10px;
      margin: 0 0 0 20px;
      background-image: url(//energi9perkasa.com/img/button-arrow.svg); }

main {
  background: #FFFFFF;
  /*.thumbnail {
		float: left;
		width: 33.33333%;
		padding: 20px;

		.imgwrapper {
			background: $navy;

			&:before {
				padding-top: 66.66667%;
			}
		}
		.caption {
			padding: 19px;
			background: $red;
			font-family: 'Nevis', sans-serif;
			font-size: 0.75em;//0.66667em;
			font-weight: 600;
			letter-spacing: 0.2em;
			text-transform: uppercase;
			text-align: center;
			color: $white;
		}
	}*/ }
  main .col-50p.left0 {
    padding-left: 0; }
  main .imgwrapper {
    position: relative; }
    main .imgwrapper:before {
      content: "";
      display: block; }
    main .imgwrapper.mainimg {
      width: 90%; }
      main .imgwrapper.mainimg:before {
        padding-top: 66.66667%; }
  main .getslider {
    width: 90%; }
  main .slick-slider .slick-arrow {
    left: 20px;
    z-index: 2; }
  main .slick-slider .slick-next {
    right: 20px;
    left: unset; }
  main ul.slick-dots {
    margin: 8px 0 0;
    text-align: center;
    list-style: none; }
    main ul.slick-dots li {
      width: auto;
      padding: 0;
      margin: 0; }
      main ul.slick-dots li button {
        display: inline-block;
        width: 5px;
        height: 5px;
        padding: 0;
        margin: 0 3px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%; }
        main ul.slick-dots li button:before {
          display: none; }
      main ul.slick-dots li.slick-active button {
        background: #121825; }
  main h1 {
    margin: 0 0 30px 0;
    font-family: 'Nevis', sans-serif;
    font-size: 1.125em;
    font-weight: 600;
    letter-spacing: 0.2em;
    line-height: 2.0625em;
    text-transform: uppercase;
    color: #B62031; }
  main p {
    margin: 0 0 24px 0;
    line-height: 1.55556em; }
    main p a:hover {
      text-decoration: underline; }
  main .tile3x3 .imgwrapper:before {
    content: "";
    display: block;
    padding-top: 66.66667%; }
  main .tile {
    width: 33.33333%;
    float: left; }
    main .tile .imgwrapper:before {
      content: "";
      display: block;
      padding-top: 66.66667%; }
  main ul.contentlist {
    background: url(//energi9perkasa.com/img/pattern-line.svg);
    background-position: 0 -14px;
    list-style: none; }
    main ul.contentlist li {
      width: 40%;
      padding: 2px 0 18px 0;
      float: left;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap; }
    main ul.contentlist:after {
      content: "";
      display: block;
      clear: both; }
    main ul.contentlist.single {
      width: 80%; }
      main ul.contentlist.single li {
        width: 100%;
        padding: 2px 0 18px 0; }
  main ul.squarebullet {
    width: 80%;
    margin: 24px 0;
    list-style: square; }
    main ul.squarebullet li {
      margin: 0 0 12px; }
  main .worksthumb {
    position: relative;
    margin: -20px; }
    main .worksthumb a.caption {
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      top: 0;
      font-family: 'Nevis', sans-serif;
      font-weight: 600;
      letter-spacing: 0.2em;
      line-height: 1.72222em;
      text-transform: uppercase;
      color: #FFFFFF;
      -webkit-transition: 0.1s;
      -o-transition: 0.1s;
      transition: 0.1s; }
      main .worksthumb a.caption:hover {
        background: rgba(0, 0, 0, 0.75); }
    main .worksthumb span {
      position: absolute;
      width: 100%;
      top: 50%;
      text-align: center;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); }
    main .worksthumb:before {
      content: "";
      display: block;
      padding-top: 100%; }
  main .workdetail, main .newsdetail {
    margin: 72px 0 0;
    line-height: 1.55556em; }
    main .workdetail .col-year, main .newsdetail .col-year {
      width: 20%;
      float: left; }
    main .workdetail .col-venue, main .newsdetail .col-venue {
      width: 80%;
      float: left; }
    main .workdetail .slot, main .newsdetail .slot {
      margin: 0 0 16px; }
    main .workdetail b, main .newsdetail b {
      display: block;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5); }
    main .workdetail:after, main .newsdetail:after {
      content: "";
      display: block;
      clear: both; }
  main .newsthumb {
    border-bottom: 1px solid #B62031; }
    main .newsthumb .imgwrapper {
      width: 100%; }
      main .newsthumb .imgwrapper:before {
        content: "";
        display: block;
        padding-top: 66.66667%; }
    main .newsthumb .date {
      display: block;
      margin: -30px 0 80px;
      color: rgba(0, 0, 0, 0.5); }
    main .newsthumb a.readmore {
      display: block;
      margin: -4px 0 0;
      font-family: 'Nevis', sans-serif;
      font-weight: 600;
      font-size: 0.75em;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #B62031; }
      main .newsthumb a.readmore:after {
        content: "";
        display: inline-block;
        width: 15px;
        height: 10px;
        margin: 0 0 0 20px;
        background-image: url(//energi9perkasa.com/img/button-arrowred.svg); }
    main .newsthumb:after {
      content: "";
      display: block;
      clear: both; }
  main .newsdetail {
    margin: 30px 0; }
  main .pagination {
    margin: 0 0 -40px; }
    main .pagination ul.pgnumber {
      width: 15%;
      padding: 20px 40px;
      float: left;
      list-style: none; }
      main .pagination ul.pgnumber li {
        display: inline-block;
        color: rgba(0, 0, 0, 0.5); }
      main .pagination ul.pgnumber .active {
        color: #121825; }
    main .pagination .btn {
      padding: 20px 0; }
    main .pagination:after {
      content: "";
      display: block;
      clear: both; }
  main .map > .col-50p {
    padding-bottom: 0; }
  main .map:after {
    content: "";
    display: block;
    clear: both; }
  main form input[type="text"], main form input[type="email"], main form input[type="submit"], main form textarea {
    padding: 8px 12px;
    background: #FFFFFF;
    border: 1px solid #121825;
    font-family: inherit;
    font-size: inherit; }
  main form input[type="text"] {
    width: 44.5%;
    margin: 0 1% 1% 0;
    float: left; }
  main form input[type="email"] {
    width: 90%; }
  main form textarea {
    width: 100%;
    height: 400px;
    margin-top: 60px; }

.slideshow-wrapper {
  position: relative;
  max-width: 870px;
  margin: 0 auto;
  background: #121825;
  font-family: 'Nevis', sans-serif;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FFFFFF; }
  .slideshow-wrapper .slideshow-slide {
    position: relative; }

.homesl:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border: 86px solid #B62031;
  border-right: 86px solid transparent;
  border-bottom: 86px solid transparent;
  z-index: 3; }

.homesl .slideshow-slide:before {
  content: "";
  display: block;
  padding-top: 64.58797%; }

.homesl .description {
  position: absolute;
  bottom: 32px;
  left: 40px;
  z-index: 2; }

.homesl h1.eventtitle, .homesl h2.eventdate {
  margin: 0;
  font-size: 1.3125em;
  line-height: 1.57em;
  color: #FFFFFF; }

footer {
  color: #FFFFFF; }
  footer .container {
    height: 310px; }
  footer address {
    position: absolute;
    bottom: 40px;
    left: 40px;
    font-style: normal; }
  footer h2.logogram {
    position: absolute;
    width: 56px;
    height: 45px;
    bottom: 40px;
    left: 50%;
    background: url(//energi9perkasa.com/img/energysembilanperkasa_logogram.svg); }

@media (max-width: 414px) {
  body {
    font-size: 12px; }
  .container {
    padding: 24px; }
  .row {
    margin: 0; }
    .row .col-20p {
      width: 100%;
      padding: 0; }
    .row .col-33p {
      width: 100%;
      padding: 0; }
    .row .col-50p {
      width: 100%;
      padding: 0 0 20px; }
    .row .col-66p {
      width: 100%;
      padding: 0; }
    .row .col-70p {
      width: 100%;
      padding: 0; }
    .row .col-80p {
      width: 100%;
      padding: 0; }
    .row.works {
      padding: 0; }
  header {
    border-bottom: 1px solid #B62031; }
    header .container {
      padding: 22px 24px; }
    header h1.mainlogo {
      width: 30px;
      height: 24px;
      background-size: contain; }
      header h1.mainlogo.withtext {
        width: 30px;
        height: 24px;
        background: url(//energi9perkasa.com/img/energysembilanperkasa_logogram.svg);
        background-size: contain; }
    header ul.menu {
      display: none; }
    header ul.burger {
      position: absolute;
      display: block;
      width: 36px;
      height: 36px;
      top: 16px;
      right: 16px;
      list-style: none; }
      header ul.burger li {
        /*width: 100%;
			height: 2px;
			margin: 6px 0;
			background: $white;*/
        width: 18px;
        height: 12px;
        margin: 12px 9px;
        background-image: url(//energi9perkasa.com/img/button-arrowred.svg);
        background-size: contain;
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg); }
  nav.overlaymenu {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background: #B62031;
    overflow-y: scroll;
    z-index: 9; }
    nav.overlaymenu h2.logogram {
      position: absolute;
      width: 30px;
      height: 24px;
      top: 22px;
      left: 24px;
      background: url(//energi9perkasa.com/img/energysembilanperkasa_logogram-white.svg);
      background-size: contain; }
    nav.overlaymenu .closebtn {
      position: absolute;
      display: block;
      width: 24px;
      height: 24px;
      top: 22px;
      right: 24px;
      list-style: none; }
      nav.overlaymenu .closebtn li {
        position: absolute;
        width: 12px;
        height: 2px;
        top: 11px;
        left: 6px;
        background: #FFFFFF;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg); }
        nav.overlaymenu .closebtn li:nth-child(2) {
          -webkit-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          transform: rotate(-45deg); }
    nav.overlaymenu ul.menu {
      top: 70px;
      right: 24px;
      left: 24px;
      font-size: 1.33333em; }
      nav.overlaymenu ul.menu ul.submenu {
        display: none;
        margin: 14px 0 0;
        font-size: 0.625em;
        list-style: none; }
        nav.overlaymenu ul.menu ul.submenu li {
          width: 100%;
          margin: 0;
          float: left; }
        nav.overlaymenu ul.menu ul.submenu a {
          display: block;
          padding: 7px 0;
          line-height: 1.5em; }
        nav.overlaymenu ul.menu ul.submenu:after {
          content: "";
          display: block;
          clear: both; }
      nav.overlaymenu ul.menu li {
        float: none; }
      nav.overlaymenu ul.menu > li {
        margin: 20px 0; }
        nav.overlaymenu ul.menu > li.active ul.submenu {
          display: block; }
      nav.overlaymenu ul.menu a:hover {
        color: inherit; }
    nav.overlaymenu input[type="checkbox"] {
      display: none; }
      nav.overlaymenu input[type="checkbox"]:checked ~ ul.submenu {
        display: block; }
    nav.overlaymenu ul.socmed {
      position: static;
      margin: 32px 0 48px; }
      nav.overlaymenu ul.socmed li {
        display: inline-block;
        margin: 0 20px 0 0; }
    nav.overlaymenu .active {
      color: #FFFFFF; }
  .bigheadertext .container {
    padding: 120px 0; }
  .bigheadertext h1 {
    width: 66.66667%;
    margin: 0 auto;
    font-size: 1em;
    line-height: 1.5em;
    text-align: center; }
  .belowheader {
    font-size: 1em; }
    .belowheader.pagesubmenu {
      display: none; }
    .belowheader .container {
      padding: 16px 24px; }
    .belowheader h3 {
      font-size: 1em; }
      .belowheader h3.desktop {
        display: none; }
      .belowheader h3.mobile {
        display: block; }
  .homeexplore .container {
    width: 75%;
    padding: 90px 0; }
  .homeexplore q {
    margin: 0 0 24px 0;
    font-size: 1em;
    line-height: 1.5em; }
  main .imgwrapper.mainimg {
    width: 100%; }
  main .getslider {
    width: 100%; }
  main ul.control {
    width: 100%; }
  main h1 {
    margin: 0 0 16px;
    line-height: 1.66667em; }
  main p {
    margin: 0 0 16px; }
  main .thumbnail {
    width: 100%;
    padding: 0; }
  main ul.contentlist {
    background-image: none; }
    main ul.contentlist li {
      width: 100%;
      padding: 7px 0;
      border-bottom: 1px solid #B62031; }
    main ul.contentlist.single {
      width: 100%; }
      main ul.contentlist.single li {
        width: 100%;
        padding: 7px 0; }
  main ul.squarebullet {
    width: 100%;
    padding-left: 1.25em; }
    main ul.squarebullet li {
      margin: 0 0 8px; }
  main .worksthumb {
    margin: 0 0 20px; }
    main .worksthumb:before {
      padding-top: 56.25%; }
  main .workdetail {
    margin: 24px 0 0; }
  main .newsthumb {
    padding: 24px;
    margin: -24px -24px 24px; }
    main .newsthumb .col-33p {
      width: 84px;
      margin: 0 24px 0 0; }
    main .newsthumb .imgwrapper:before {
      padding-top: 100%; }
    main .newsthumb .col-66p {
      width: calc(100% - 108px); }
    main .newsthumb h1 {
      height: 4.5em;
      margin: 0;
      line-height: 1.5em; }
    main .newsthumb .date {
      margin: 0; }
    main .newsthumb p {
      display: none; }
    main .newsthumb a.readmore {
      margin: 4px 0 0; }
      main .newsthumb a.readmore:after {
        width: 12px;
        height: 8px;
        margin: 0 0 0 4px;
        background-size: contain; }
  main .newsdetail {
    margin: 20px 0; }
  main .pagination {
    margin: 0; }
    main .pagination ul.pgnumber {
      width: 108px;
      padding: 0; }
      main .pagination ul.pgnumber li {
        padding: 0 4px 0 0; }
    main .pagination .btn {
      padding: 0; }
  main .map .col-50p {
    margin: 0 0 20px; }
  main form .col-50p {
    padding: 0; }
  main form input[type="text"], main form input[type="email"] {
    width: 100%;
    margin: 0 0 8px; }
  main form textarea {
    margin: -16px 0 8px; }
  .homesl:before {
    border-width: 32px; }
  .homesl .description {
    bottom: 16px;
    left: 16px; }
  .homesl h1.eventtitle, .homesl h2.eventdate {
    font-size: 0.83333em;
    line-height: 1.66667em; }
  footer .container {
    height: 100px; }
  footer ul.socmed {
    top: 24px; }
    footer ul.socmed li {
      margin: 0 16px 0 0; }
  footer ul.menu {
    display: none; }
  footer address {
    display: none; }
  footer h2.logogram {
    width: 31px;
    height: 25px;
    bottom: 24px;
    left: 24px;
    background-size: contain; }
  footer .copyright {
    bottom: 24px;
    left: 24px; } }