* {
  user-drag: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -moz-user-drag: none;
  margin: 0;
  padding: 0;
}

body {
  background-color: white;
  font-size:18px;
  
}
body, html {
    height: 100%;
}
.header {
	 margin-top: 100px;
	 
}


.center {
	 margin: auto;
  width: 50%;
}

.center-text {
    text-align: center;
}

.sitelogo img {
  height: inherit;
  width: inherit;
}

.navbar-brand {
	    display: inline-block;
    padding-top: 0rem;
    padding-bottom: 0rem;
    margin-right: 0rem;
    font-size: 1rem;
    line-height: inherit;
    white-space: nowrap;
	
}
.display_archive {font-family: arial,verdana; font-size: 12px;}
.campaign {line-height: 125%; margin: 5px;}
/*#header {
	height: 400px;
    background-color:white;
	background-image: url('../img/katstudio.png');
	background-position:left;
	background-repeat:no-repeat;
    color:white;
    text-align:center;
    padding:5px;
}*/
#navbarKHS{
	
	
}
#navigation{
		 width:75%;
	
}
.logo
{
  /* The image used */
  background-image: url("../img/logo_moss.jpg");

  /* Set a specific height */
  min-height: 500px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.wrapper {
    min-height: 100%;
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
    height: 100%;
	width: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
	position:fixed;

}
.wrapper:after {
  content: "";
  display: block;
}

.headertest {
  padding: 60px;
  text-align: center;
  background: Pink;
  color: white;
  font-size: 25px;
}
.bottom{
	background-color: black;
}
.end{
	padding-top:50px;
	text-align: right;
	font-size:10px;

}
 .wrapper:after  {
    height: 155px; 
}



div.header-a {
	font-family: "Times New Roman", Times, serif;
	text-align: center;
	font-size: 40px;
	padding-top: 100px;
	padding-bottom: 100px;
	font-weight: bold;
	
}
div.header-b {
	font-family: "Times New Roman", Times, serif;
	text-align: center;
	font-size: 35px;
	font-weight: bold;
	padding-top: 40px;
	padding-bottom: 40px;
	
}
div.header-c {
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	opacity: 0.75;
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 20px;
	

}
div.header-d {
	font-family: "Times New Roman", Times, serif;
	text-align: center;
	font-size: 25px;
	font-weight: bold;
	padding: 10px;
	
}
div.header-e {
	font-family: "Times New Roman", Times, serif;
	font-size: 20px;
	font-weight: bold;
	
}
div.hidden {
    display: none
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color:white;
}
html, body {
  height: 100%;
  width: 100%;
  font-size:18px;
}
html {
	overflow-y: scroll;
}
#img-banner{
	white-space: nowrap;
	width: 100%;
	text-align: center;
	margin: 0 auto;
	display:inline-block;
	text-overflow: elipsis;
	overflow:hidden;
	 padding-left: 0px;
	 
}
img {
	max-width:100%;
	max-height:100%;
}


#img-bar {
	display: visible;
	width: 100%;
	text-align: right;
	display:block;
	overflow:wrap;
}
#img-bar-mob {
	display: visible;
	width: 100%;
	text-align: right;
	display:block;
	overflow:wrap;
}
.image{
	 margin-left:auto;
	margin-right:auto;
	z-index: -1;
	padding-bottom:20px;

}
#img-banner > .image{
	 margin-left:auto;
	margin-right:auto;
	width: 25%;
	display:inline-block;
	z-index: -1;
	padding-bottom:20px;

}
.container-column {
  float: right;
  width: 10%;
  display: inline;
}
.table-b-column {
  width: 100%;
  line-height: 1.6;
  display:inline-grid;
  margin: 10px;
  grid-template-columns: auto auto;
  justify-content: space-evenly;
  text-align: center;
  padding-bottom: 20px;
}
.table-column {
	min-width: 100%;
}
.table-c-column {
	width:100%;
  text-align: left;
}
.table-d-column {
  text-align: right;
}
.table-d-column:after {
	content:"";
}

.core {

	background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
	width: 75%;
	height:100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.break
{
	width: 40%;
	height: 10px;
	 background: #f19eb6
	 
	
}

.base {
	display:block;
	padding: 16px;
	height: 600px;
}

.container-a {
	display: block;
text-align:center;
width: 100%;

}

.container-a > ul {
	margin: 20px;
	list-style-type: none;
	text-align: left;
}
.container-b {
	border-spacing: 15px;
	min-width: 50%;
	padding: 16px;
	display: inline-grid;
	grid-template-columns: auto auto;
}
.container-c { 
width: auto;
} 

.container-e {
	
}
.container-f {
		display: block;
text-align:center;
width: 100%;
}


.table-b-b:after {
	content: "";
  display: table;
  clear: both;
	
}

  .container-column {
	  display: inline-block;
  }



p.blurb {
	font-family: "Arial", Helvetica, sans-serif;
	font-size:18px;
	padding-top: 5em;
	padding-bottom: 5em;
	text-align:left;
}

.blurbleft {
	font-family: "Arial", Helvetica, sans-serif;
	font-size:18px;
	padding: 20px;
	text-align:left;
}

ul.cList {
	font-family: "Arial", Helvetica, sans-serif;
	font-size:20px;
	padding: 20px;
	margin: 20px;
}



/* Page content */
.content {
  padding: 16px;
  position:relative;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}
/* Hover Icon */

.icon {
  background-color: #EEf2F4;
  border: none;
  color: #202A44;
  padding:10px;
  font-size: 16px;
  margin: 4px 4px;
  transition: 0.3s;
  border-radius:50px;
}

.icon:hover {
	transition: background-color 0.5s;
  background-color: #f6f6f6;
  color: white;
  border-radius: 100%
}

.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}


/* The banner image */
.banner-image {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */

  background-position: center top;

}


/* Place text in the middle of the image */
.banner-text {  
position:relative;
text-align: center;
  text-transform: uppercase;
 
}
.banner-overlay{
	color:white;
	position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hrstyle1{
	color: pink;
	width: 50%;
background-color: pink;
height: 5px;
}

.banner-text button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 25px 40px;
  color: black;
  font-size: 20px;
  font-weight:bold;
  background-color: #ddd;
  text-align: center;
  cursor: pointer;
}

.banner-text button:hover {
	transition: background-color 0.5s;
   color: white;
}

.image-overlay{
	text-align: left;
  background:rgba(0,0,0,0.5);
  position:absolute;
  transition: .5s ease;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  color: white;
  opacity: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
	overflow: scroll;
	padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

img{
  display: block;  
}
.container-d {
	overflow:hidden;
  position: relative;
  display: inline-block;
}

.container-d:hover > .image-overlay {
  opacity: 1;
}

.hidden-scrollbar {
  background-color:black;
  border:2px solid #666;
  color:white;  
  overflow:hidden;
  text-align:justify;    
}

.hidden-scrollbar .inner {
  height:200px;
  overflow:auto;
  margin:15px -300px 15px 15px;
  padding-right:300px; /* Samakan dengan besar margin negatif */
}


/* Portfolio Gallery Styling */

.gallery {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 5vw);
    grid-gap: 15px;
}

.gallery__img {
    width: 100%;
    height: 100%;
	transition: transform .2s;
    object-fit: cover;
}
/*
.gallery__img:hover {
  -ms-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}*/

.gallery__item--1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 6;
}

.gallery__item--2 {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 6;
}

.gallery__item--3 {
    grid-column-start: 5;
    grid-column-end: 9;
    grid-row-start: 1;
    grid-row-end: 6;
}

.gallery__item--4 {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 6;
    grid-row-end: 40;
}

.gallery__item--5 {
    grid-column-start: 5;
    grid-column-end: 9;
    grid-row-start: 6;
    grid-row-end: 40;
}

.gallery__item--6 {
    grid-column-start: 5;
    grid-column-end: 9;
    grid-row-start: 6;
    grid-row-end: 9;
}



/* BOOTSTRAP NAVBAR STYLING */
/* navbar */
.navbar {
  background-color: #000000;
}
.navbar .navbar-brand {
  color: #ffffff;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color: #ffffff;
}
.navbar .navbar-text {
  color: #ffffff;
}
.navbar .navbar-text a {
  color: #ffffff;
}
.navbar .navbar-text a:hover,
.navbar .navbar-text a:focus {
  color: #ffffff; 
}
.navbar .navbar-nav .nav-link {
  color: #ffffff;
  border-radius: .25rem;
  margin: 0 0.25em;
}
.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
  color: #ffffff;
}
.navbar .navbar-nav .dropdown-menu {
  background-color: #008080;
  border-color: #f47983;
}
.navbar .navbar-nav .dropdown-menu .dropdown-item {
  color: #ffffff;
}
.navbar .navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar .navbar-nav .dropdown-menu .dropdown-item:focus,
.navbar .navbar-nav .dropdown-menu .dropdown-item.active {
  color: #ffffff;
  background-color: #f47983;
}
.navbar .navbar-nav .dropdown-menu .dropdown-divider {
  border-top-color: #f47983;
}
.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
  color: #ffffff;
  background-color: #f47983;
}
.navbar .navbar-toggle {
  border-color: #f47983;
}
.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
  background-color: #f47983;
}
.navbar .navbar-toggle .navbar-toggler-icon {
  color: #ffffff;
}
.navbar .navbar-collapse,
.navbar .navbar-form {
  border-color: #ffffff;
}
.navbar .navbar-link {
  color: #ffffff;
}
.navbar .navbar-link:hover {
  color: #ffffff;
}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
    background-color: #f47983;
    border-color: #f47983;
}

@media (max-width: 575px) {
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ffffff;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ffffff;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ffffff;
    background-color: #f47983;
  }
}

@media (max-width: 767px) {
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ffffff;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ffffff;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ffffff;
    background-color: #f47983;
  }
}

@media (max-width: 991px) {
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ffffff;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ffffff;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ffffff;
    background-color: #f47983;
  }
}

@media (max-width: 1199px) {
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ffffff;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ffffff;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ffffff;
    background-color: #f47983;
  }
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
  color: #ffffff;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
  color: #ffffff;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
  color: #ffffff;
  background-color: #f47983;
}
.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
	width:100%;
}
.map-responsive iframe{
    left:0;

    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
@media only screen and (max-width: 550px) {
	.center{
		width:80%;
	}
	.core {

	background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
	width: 100%;
	height:100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
    aside, article {
        width: 95%;
        float: none;
    }
 
    article {
        margin-right: 0;
        margin-bottom: 1em;
    }
	.table-b {
	width: 100%;
	height:100%;
	grid-gap: 50px;
	margin:-10px;
	display: grid;
	text-align:center;
	grid-template-columns: auto;

}
.banner-text button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 15px 20px;
  color: black;
  font-size: 20px;
  font-weight:bold;
  background-color: #ddd;
  text-align: center;
  cursor: pointer;
}

div.header-a {
	font-family: "Times New Roman", Times, serif;
	text-align: center;
	font-size: 8vw;
	padding-top: 20px;
	padding-bottom: 20px;
	font-weight: bold;
	
}
div.header-b {
	font-family: "Times New Roman", Times, serif;
	text-align: center;
	font-size: 5vw;
	font-weight: bold;
	padding-top: 20px;
	padding-bottom: 40px;
	
}
div.header-c {
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	opacity: 0.75;
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 4vw;
	

}
div.header-d {
	font-family: "Times New Roman", Times, serif;
	text-align: center;
	font-size: 4vw;
	font-weight: bold;
	padding: 10px;
	
}
div.header-e {
	font-family: "Times New Roman", Times, serif;
	font-size: 4vw;
	font-weight: bold;
	
}
div #img-bar {
	display: none !important;
}
#horizontalHair{
	display: none !important;
}

body .blurbleft {
	text-align:center;
}
.blurbleft > ul{
	text-align:left;
}
.signup__thumbnail {
  position: relative;
  padding: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
    background: url("../img/port1.png");
  background-repeat: no-repeat;
  height:auto;
  background-size:100% 100%;
  background-position: top center;
  background-size: cover;
  display: none !important;
}
.form-text {
  background-color: transparent;
  border-top: 0
  border-right: 0;
  border-left: 0;
  padding-right:0.8em;
  width:100%;'
  box-sizing: border-box;
  float:left;
  border-radius: 0;	
  &:focus {border-color: #111;}
  .container__child {
  width: 100%;
  height: 100%;
  color: #fff;
}
  .signup__form {
  background: #fafafa;
}
.form-text {
  background-color: transparent;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  padding-right:0.8em;
  width:100%;'
  box-sizing: border-box;
  float:left;
  border-radius: 0;
  &:focus {border-color: #111;}
}
}

}

@media only screen and (min-width: 1000px){

.table-b {
	width: 100%;
	height:100%;
	margin:-10px;
	display: grid;
	text-align:center;
	padding: 20px;
	grid-template-columns: 600px auto;

}

#verticalHair{
	display: none !important;
}
.container__child {
  width: 50%;
  height: 100%;
  color: #fff;
}
.form-text {
  background-color: transparent;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  padding-right:0.8em;
  width:50%;'
  box-sizing: border-box;
  float:left;
  border-radius: 0;
  &:focus {border-color: #111;}
}

}
/* Registration form */



a,
[type="submit"] {transition: all .25s ease-in;}
.signup__container {
  top: 50%;
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.signup__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
}

.signup__thumbnail {
  position: relative;
  padding: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
    background: url("../img/port1.png");
  background-repeat: no-repeat;
  height:auto;
  background-size:100% 100%;
  background-position: top center;
  background-size: cover;
}
.thumbnail__logo,
.thumbnail__content,
.thumbnail__links {
  position: relative;
  z-index: 2;  
}
.thumbnail__logo {align-self: flex-start;}
.logo__shape {fill: #fff;}
.logo__text {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  vertical-align: bottom;
}
.thumbnail__content {align-self: center;}
h1,
h2 {
  font-weight: 300;
  color: rgba(255,255,255,1);
}
.heading--primary {font-size: 1.999rem;}
.heading--secondary {font-size: 1.414rem;}
.thumbnail__links {
  align-self: flex-end;
  width: 100%;
}
.thumbnail__links a {
  font-size: 1rem;
  color: #fff;
  &:focus,
  &:hover {color: rgba(255,255,255,.5);}
}
.signup__form {
  padding: 2.5rem;
  background: #fafafa;
}
label {
  font-size: .85rem;
  text-transform: uppercase;
  color: #ccc;
}
.checkbox {
  font-size: .85rem;
  text-transform: uppercase;
  color: #000;
    display: inline-block;
  padding-right: 1em;
}
.form-control {
  background-color: transparent;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  &:focus {border-color: #111;}
}
.form-text:after{
	clear:both;
}
[type="text"] {color: #111;}
[type="password"] {color: #111;}
[type="date"] {color: #111;}
[type="password"] {color: #111;}
.btn--form {
  padding: .5rem 2.5rem;
  font-size: .95rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
  background: #111;
  border-radius: remy(35px);
  &:focus,
  &:hover {background: lighten(#111, 13%);}
}
.signup__link {
  font-size: .8rem;
  font-weight: 600;
  text-decoration: underline;
  color: #999;
  &:focus,
  &:hover {color: darken(#999, 13%);}
}

a.phone:hover {
  color: pink;
}

a.phone:visited, span.visited {
   color: purple;
}

a.phone:active, span.active {
   color: red;
}