/* ======================= Column System ======================= */
/* ----------------- Portrait (default layout setting)----------------- */
.column-1,
.column-2,
.column-3,
.column-4,
.column-5,
.column-6,
.column-7,
.column-8,
.column-9,
.column-10,
.column-11,
.column-12 {
  width: 100%;
}

/* ----------------- all the wide size screen (Landscape)----------------- */
@media (min-width: 1024px) {
  .column-1 {
    width: 8.33333333333%;
  }

  .column-2 {
    width: 16.6666666667%;
  }

  .column-3 {
    width: 25%;
  }

  .column-4 {
    width: 33.3333333333%;
  }

  .column-5 {
    width: 41.6666666667%;
  }

  .column-6 {
    width: 50%;
  }

  .column-7 {
    width: 58.3333333333%;
  }

  .column-8 {
    width: 66.6666666666%;
  }

  .column-9 {
    width: 75%;
  }

  .column-10 {
    width: 83.3333333333%;
  }

  .column-11 {
    width: 91.6666666666%;
  }

  .column-12 {
    width: 100%;
  }
}

/* ======================= Column System END======================= */
header {
  height: 60px;
  /*     background-color: #ed2690; */
}
body .click-arrow {
  border: 2px solid #fff;
  width: 50px;
  height: 50px;
  -webkit-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
  float: right;
  margin: 20px 0 0 0;
  left: auto;
  right: auto;
  bottom: 20px;
  top: auto;
  position: absolute;
}
body .click-arrow:hover {
  -webkit-box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
}

body .click-arrow i {
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

header .menu-trigger {
  margin: 10px 0 0 3vw;
}

header .back-arrow {
  bottom: 5px;
  width: 20px;
}

header .page-title {
  top: 25px;
}

.services-blocks {
  -ms-grid-columns: 100% !important;
  grid-template-columns: 100% !important;
}

.menu-main .menu-content {
  margin-top: 40px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.menu-main .menu-content .menu-list {
  width: 100%;
  top: 100px;
}

.menu-main .menu-content .menu-right {
  display: none;
}
.scrolldown-btn {
  display: none;
}

.side-navigator {
  position: relative;
  width: 100%;
  padding: 100px 0 50px;
}
.content-padding {
  padding: 30px;
}
.side-image {
  width: 90vw;
  margin: 20px 0;
}

.side-content-top {
  width: 90vw;
}

.side-content-bottom {
  margin-top: 0px;
}

.part-setting {
  padding: 50px 0;
  width: 90vw;
  margin: auto;
}

.inner-content {
  padding-left: 0px;
}

.text-area {
  width: 100%;
  padding: 20px 0;
}

.image-area {
  padding: 20px 0;
  width: 100%;
}

.column-reverse {
  flex-direction: column-reverse;
}
.bop-office {
  display: none;
}

.hide-contact {
  display: none;
}

.desktop-overseas {
  display: none;
}

.mobile-overseas {
  display: revert;
}
#blogs .post:first-child{
    height: auto;
}
#blogs .post .post-image,
#blogs .post:first-child .post-image {
  width: 100%;
  max-width: 100%;
  padding: 0;
}
#blogs .post .post-meta-wrap,
#blogs .post:first-child .post-meta-wrap {
  width: 100%;
  padding: 20px !important;
}
#blogs .post {
  flex-wrap: wrap;
  width: 100%;
  height: auto;
}
#blogs .post .post-article {
  display: none;
}
.px-xs-20 {
  padding-left: 20px;
  padding-right: 20px;
}
.py-xs-20{
	padding-top: 20px;
  padding-bottom: 20px;
}
#blogs {
  padding: 10px 0;
}
#blogs .post .post-image a{
	display: block;
	width: 100%;
}
#blogs .post .post-image a img {
  box-shadow: 0px 5px 20px rgb(29 41 41 / 25%);
	width: 100%;
}
.twclogo-menubar-desktop {
  margin: 10px 0 0 calc(100vw - 4vw - 50px - 150px - 4vw);
}
.contact-section {
  flex-direction: column;
}
.portfolio-case {
  flex-direction: column;
  width: 100vw;
  padding: 20px 0;
}

.caseImage-full {
  height: 60vh;
}

.caseImage-side {
  display: none;
}

.logo-ontop {
  left: 50%;
  top: 25%;
  transform: translate(-50%, -25%);
}

.case-logo-intro {
  padding: 10% 5%;
}
.section-content {
  display: none !important;
}

.side-content-list li {
  padding: 0.3rem 0;
}

.side-content-list li:hover {
  transform: none;
}

.side-content-list li a {
  color: #fff;
  letter-spacing: 1;
  font-weight: 300;
  font-size: 0.8rem;
  border-bottom: 2px solid transparent;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.side-content-list li a:hover {
  border-bottom: 2px solid #fff;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.slide-image-container {
  height: 50vh;
}

.service-intro {
  height: 50vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: flex-end;
}

.home-bottom-text p {
  font-size: 16px;
}

.home-bottom-text a h1 {
  font-size: 22px;
}

.footer-nav {
  display: none;
}

.akl-office,
.bop-office {
  width: 100%;
  padding-left: 0;
}

.contact-form {
  margin: 0;
}

/* 	post styling */
#single-post {
  padding: 10px 0;
}
#single-post .button{
  padding: 10px;
  background-color: #ed1a90;
  color: white!important;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 0px!important;
}
/* team page styling */
#teams{
	padding: 0 0;
}
#teams .member{
  width: 50%;
  padding: 20px;
}
#teams .member .avatar .avatar-img{
  border-radius: 50%;
	margin: auto;
	display: block;
}
#teams .member .name{
  margin-top: 15px;
}
#teams .member .name h4{
  text-align: center;
}
#teams .member .job-title span{
  display: block;
  text-align: center;;
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .bop-office{
        display: block;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    body .click-arrow{
        position: relative;
    }
    .service-intro {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
      }
  .content-padding {
    padding: 60px;
  }
  .twclogo-menubar-desktop {
    margin: 15px 0 0 30px;
  }

  .case-logo-intro .case-text h2 {
    font-size: 20px;
  }

  .case-logo-intro .case-text p {
    font-size: 14px;
  }
  #blogs .post{
      height: 140px;
  }
  #blogs .post .post-meta-wrap {
    width: 70%;
  }
  #blogs .post .post-image {
    width: 30%;
  }
}

/* Large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
    header{
        width: 280px;
    }
  body .click-arrow {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-decoration: none;
    overflow: hidden;
    border: 6px solid rgba(0, 0, 0, 0.1);
    /*   position: absolute;
          top: 0;
        right: 10%; */
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    -ms-flex-item-align: end;
    align-self: flex-end;
  }
  body .click-arrow i:before {
    font-size: 150px;
    color: white;
  }
  .menu-main .menu-content{
      flex-direction: row;
  }
  .menu-main .menu-content .menu-list {
    width: 50%;
  }
  
  .menu-main .menu-content .menu-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 50%;
  }
  .service-intro{
      height: 100%;
  }
  .slide-image-container {
    height: 100%;
  }
  .inner-content {
    padding-left: 280px;
  }
  .content-padding {
    padding: 80px;
  }
  .side-navigator {
    width: 280px;
  }
  .side-navigator{
      position: fixed;
  }
  .side-navigator-hide {
    width: 0;
    opacity: 0;
    visibility: hidden;
    transition: 0.7s;
  }
  .part-1{
    padding: 0 15%;
  }
  .part-2 {
    padding: 0 5%;
}
.part-3 {
    padding: 0 5%;
}
.part-4 {
    padding: 0 5%;
}
  .part-setting{
      width: 100%;
  }
  .side-content-top {
    width: 170px;
  }

  .side-image {
    width: 200px;
    height: 200px;
  }
  .section .column-reverse{
      flex-direction: row;
  }
  .category-part-setting {
    padding: 0 5%;
  }

  .text-area {
    padding: 1rem;
    width: 55%;
  }

  .text-area h2 {
    font-size: 20px;
  }

  .image-area {
    width: 45%;
  }

  .akl-office,
  .bop-office {
    width: 50%;
  }

  .footer-nav {
    display: none;
  }

  #single-post {
    padding: 60px;
  }
  .client-logos {
    display: block !important;
  }

  .footer-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .footer-title {
    padding: 10px 0;
    display: block;
  }

  .footer-partners {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .portfolio-case {
    flex-direction: row;
    width: 100%;
    padding: 0;
  }
  
  .caseImage-full {
    height: 100vh;
  }
  
  .caseImage-side {
    display: block;
  }
  
  .logo-ontop {
    top: 10%;
    left: 55%;
    transform: translate(-125% , 0%);
  }
  .contact-section{
      flex-direction: row;
      margin: 0 40px;
  }
  #blogs {
    padding: 60px;
  }
  #blogs .post:first-child{
      height: 250px;
  }
  #blogs .post:first-child .post-image{
      max-width: 300px;
      width: 30%;
      height: 100%;
  }
  #blogs .post .post-image {
    max-width: 150px;
    padding: 0 10px 0 0;
    height: 100%;
}
#blogs .post:first-child .post-meta-wrap {
    width: 70%;
    border-radius: 0 20px 20px 0;
}
#blogs .post .post-meta-wrap{
    align-content: center;
	width: calc(100% - 150px);
}
	.px-7-percent{
		padding-left: 7%;
		padding-right: 7%;
	}
	.py-40{
		padding-top: 40px;
		padding-bottom: 40px;
	}
  #teams{
    padding: 50px;
  }
  #teams .member{
    width: 25%;
    padding: 20px;
    max-width: 250px;
  }

}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.side-content-top{
		width: 250px
	}
    .side-navigator {
        width: 380px;
    }
    header{
        width: 380px;
    }
    .inner-content{
        padding-left: 380px;
    }
    .logo-ontop{
        transform: translate(-150% , 0%);
    }
	
  .social {
    display: none;
  }
  .content-padding {
    padding: 100px;
  }
  .akl-office, .bop-office, .footer-nav{
      width: 25%;
        padding: 20px;
    }
    .akl-office{
        padding-left: 0;
    }
  .footer-nav {
    display: block;
  }
	#blogs .post{
		height: 160px;
	}
  #blogs .post .post-image {
    max-width: 160px;
	  width: 20%;
}
	#blogs .post .post-article {
    display: block;
		width: 40%;
  }
	#blogs .post .post-meta-wrap {
    width: 40%;
  }
	#teams{
		max-width: 1030px;
  }

}

@media (max-height: 700px) and (orientation: landscape) {
  .side-image {
    display: none;
  }
}

/* mobile-size landscape*/
@media (max-width: 1023px) and (orientation: landscape) {
  .service-intro {
    width: 50vw;
    height: 100vh;
  }

  .slide-image-container {
    height: 100vh;
    width: 50vw;
  }
}

@media (max-width: 400px) and (max-height: 600px) {
  .twclogo-menubar-desktop {
    margin: 10px 0 0 calc(100vw - 4vw - 50px - 150px - 4vw);
  }

  .service-intro {
    height: 55vh;
  }

  .slide-image-container {
    height: 45vh;
  }

  .home-bottom-text {
    margin: 0;
  }

  .home-bottom-text p {
    font-size: 14px;
  }

  .home-bottom-text a h1 {
    font-size: 20px;
  }
}

/* mobile phone landscape mode setting */
@media (max-width: 900px) and (orientation: landscape) {
  #address div {
    width: 100%;
  }

  .hide-contact {
    display: none;
  }

  .akl-office {
    width: 100%;
  }

  .bop-office,
  .footer-nav {
    display: none;
  }
}