/*notes */
    
    
    
    * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

img { max-width: 100%; } 

/* utility classes */
.tall-10 { min-height: 10vh; }
.tall-15 { min-height: 15vh; }
.tall-20 { min-height: 20vh; }
.tall-30 { min-height: 30vh; }
.tall-40 { min-height: 40vh; }
.tall-50 { min-height: 50vh; }
.tall-60 { min-height: 60vh; }
.tall-70 { min-height: 70vh; }
.tall-80 { min-height: 80vh; }
.tall-90 { min-height: 90vh; }

.padded         { padding: 5%;   }
.padded-1g      { padding: 10%;   }
.padded-1       { padding: 1rem; }
.padded-2       { padding: 2rem; }
.padded-side { 
  padding-left:15%;
  padding-right:15%;
}

/* .container {
  margin-left:5%;
  margin-right:5%;
} */

.bg-light  {background-color:#F7F6F4;}
.bg-shell {background-color:#F9F9F3;}
.bg-featured {background-color:#1A2D53;}
.bg-dark {background-color:#0B384E;}
.bg-yellow {background-color:#FED500;}


.light-text { color: #f8f6f4; }
.text-featured { color: #FBC000; }
.text-blue { color: #1D2758; }


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

.text-bottom { vertical-align: text-bottom; }
.text-middle { vertical-align: text-middle; }

body, html {
  scroll-behavior: smooth;
}

html, body {
  overflow-x: hidden;
}

body {
  position: relative
}

/* Typography */
@font-face { 	
  font-family: 'Krinkes-Decor';	
  src: url('/Assets/KrinkesDecorPERSONAL.ttf'); 	
  src: url('/Assets/KrinkesDecorPERSONAL.ttf') format('truetype'); 
}

@font-face { 	
  font-family: 'Kawai-Craft';		
  src: url('/Assets/Kawai Craft.ttf'); 	
  src: url('/Assets/Kawai Craft.ttf') format('truetype'); 
}

@font-face { 	
  font-family: 'Futura';	
  src: url('/Assets/futur.ttf'); 	
  src: url('/Assets/futur.ttf') format('truetype'); 
}

body {
    font-family: 'Roboto', sans-serif;	
    color: #454E5C;
}


h1,h2,h3,h4,h5,h6 {
    font-family: 'Kawai-Craft';	
    line-height: 1;
    margin-bottom: 1rem;
    font-weight: normal;
}

h1 { font-size: 6rem;}
h2 { font-size: 4rem;}
h3 { font-size: 2rem;}
h4 { font-size: 1.5rem;}
h5 { font-size: 2rem; }
h6 { 
    font-size: 5rem;
    font-weight: 900;
}

p {
    line-height: 1.5;
    font-size: 0.8rem;
    margin-bottom: 0.8rem;
}

ul { margin-left: 1rem; }
li { 
    padding-left: 0.5rem;
    line-height: 2;
    font-size: 1rem;
    list-style:none;
}



.lao-font {
  font-family: 'Noto Serif Lao', serif;
}


.lang {
  font-size:0.8rem;
  font-family: 'Kawai-Craft';	
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child {
    margin-bottom: 0;
}

/* links */
a {
    color: inherit;
    font-family: 'Kawai-Craft';	
    text-decoration: none;
    font-size: 1.2rem;
}
a:hover { 
    color: #FBC000;
    border-color:#FBC000; }

.button {
    color: white;
    background-color:#FBC000;
    text-decoration: none;
    padding: 1rem 1.5rem ;
    display: inline-block;
    text-transform:uppercase;
    font-size:1.2rem;
}

.button:hover {
    color: white;
    cursor: pointer;
    transform: scale(1.05);
}

/*Animations */
/* on scroll */
.reveal {
  position: relative;
  opacity: 0;
  transition: 3s all ease;
}

.reveal.active {
  opacity: 1;
}

.fade-up.active {
  animation: fade-up 1s ease-in;
}

@keyframes fade-up {
  0% {
    transform: translateY(100px);

  }
  100% {
    transform: translateY(0);
  }
}

.fade-left.active {
  animation: fade-left 1s ease-in;
}

@keyframes fade-left {
  0% {
    transform: translateX(-100px);
  }
  100% {
    transform: translateX(0);
  }
}

.fade-right.active {
  animation: fade-right 1s ease-in;
}

@keyframes fade-right {
  0% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

/* icons */
.fa-solid {
font-size: 2rem; 
padding-left: 2%;
padding-right: 2%;
}

.fa-brands {
font-size: 2rem; 
padding-left: 2%;
padding-right: 2%;
}


.fas {
font-size: 2rem; 
padding-left: 2%;
padding-right: 2%;
}

.icon-sm {
  font-size:1.2rem;
}

/* header & menu */
header {
        
    padding: 1% 2%;
    background-color: #1D2758;
}

header a {
    font-family: 'Kawai-Craft';	
    text-decoration: none;
    color: white;
    padding-left: 3%;
    padding-right:3%;
    display: inline-block;
    font-weight: 200;
    font-size: 1.2rem;
}

.logo {
    max-width: 150px;
}

.logo-2 {
    max-width: 75px;
}

.hamburger-button {
    color: white;
    cursor: pointer;
    padding: 0 0.5rem;
    display: inline-block;
    font-size: 5rem;
    position: fixed;
    right: 1.5rem;
    top: -2rem;
    z-index: 2;
}

.show-sm { display: none; }

/* styles when the hamburger button is active */
.hamburger-button.active {
    color: white;
}

.mobile-menu {
    display: none;
    background-color:#14274F;
    padding: 3%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 1;
    opacity: 85%;
  
}

.mobile-menu a {
    text-decoration: none;
    color: inherit;

    padding: 3vh 6%;
    display: block;
    font-weight: normal;
    font-size: 1.5rem;
}

  /* contact form */
form {
  font-family: 'Roboto Condensed', sans-serif;
  padding: 5%;
  width: 90%;
  border-radius: 20px;
  margin: 0 auto;
  margin-bottom: 20px;
  border: 4px solid #1D2758;
  background-color: white;
}


input[type=text], input[type=submit] {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.message {
   width: 100%;
  padding: 12px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box; 
}

input[type=submit] {
  background-color: #1D2758;
  color: white;
  border: none;
}

input[type=submit]:hover {
  opacity: 0.8;
}

  /* footer */
.subtle {
    opacity: 0.8;
    font-size: 1rem;
    font-style: italic;
}

/* images */
.bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('/images/codeh-image-2.jpg');
}
.shrink {
  max-width:450px;
}

.shrink-2 {
  max-width:250px;
}

.shrink-3 {
  max-width:400px;
}


.shape-teardrop {
    border-radius: 20rem;
    border-bottom-right-radius: 0;
}

.shape-window {
    border-top-left-radius: 20rem;
    border-top-right-radius: 20rem;
    max-width:400px;
}

.shape-circle {
  border-radius: 50%;
}

.bg-header {
    background-image: url('/kaogee-images/kaogee-banner-2.jpg');
    background-position:50% 50%;
}

.bg-banner {
    background-image: url('/kaogee-images/kaogee-banner-9.png');
    background-position:50% 100%;
}

.bg-banner-1 {
    background-image: url('/kaogee-images/kaogee-img-12.JPG');
}

.bg-banner-2 {
    background-image: url('/kaogee-images/kaogee-banner-8.jpg');
    background-position:50% 70%;
}

.bg-banner-3 {
    background-image: url('/kaogee-images/kaogee-banner-5.jpg');
    opacity:80%;
}

.bg-banner-4 {
    background-image: url('/kaogee-images/kaogee-banner-6.jpg');
    background-position:50% 90%;
}

.bg-banner-5 {
    background-image: url('/kaogee-images/kaogee-banner-7.jpg');
    background-position:50% 10%;
}

.bg-banner-7 {
    background-image: url('/kaogee-images/kaogee-banner-3.jpg');
}

.bg-banner-8 {
    background-image: url('/kaogee-images/kaogee-banner-3.jpg');
}

.bg-banner-9 {
    background-image: url('/kaogee-images/kaogee-banner-3.jpg');
}

.bg-banner-10 {
    background-image: url('/kaogee-images/kaogee-banner-1.JPG');
}

.bg-banner-11 {
    background-image: url('/kaogee-images/kaogee-banner-4.jpg');
}

.bg-banner-12 {
    background-image: url('/kaogee-images/kaogee-img-2.jpg');
    background-position:50% 100%;
}

.bg-banner-13 {
    background-image: url('/kaogee-images/kaogee-img-7.jpg');
    background-position:50% 70%;
}

.bg-branch {
     background-image: url('/kaogee-images/kaogee-img-3.jpg'); 
}

.bg-triomphe {
      background-image: url('/kaogee-images/kaogee-img-4.jpg');
}

.bg-map {
    background-image: url('/kaogee-images/kaogee-map.jpg');
}

/* sm media query */
@media (max-width: 48em) {
html {
   scroll-behavior: auto;
}
  
.hide-sm { display: none;  }
.show-sm { display: block; }

.flex-flip-sm { flex-direction: column-reverse;}

.text-center-sm { text-align: center; }
.text-bottom { vertical-align: text-bottom; }
.text-middle { vertical-align: text-middle; }

h1 { font-size: 3.5rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1rem; }
h6 { font-size: 2.5rem; }

p { 
font-size: 0.7rem;
}

a { font-size: 0.9rem; }

.subtle {
  font-size:0.7rem;
}

.logo {
  max-width:150px;
}

.logo-2 {
  max-width:80px;
}


.fa-solid {
font-size: 1.5rem; 
padding-left: 1rem;
padding-right: 1rem;
}

.fa-brands {
font-size: 1.5rem; 
padding-left: 1rem;
padding-right: 1rem;
}


.fas {
font-size: 1.5rem; 
padding-left: 1rem;
padding-right: 1rem;
}

.shrink {
  max-width:350px;
}

.shrink-2 {
  max-width:300px;
}

.shrink-3 {
  max-width:350px;
}
.padded-side { 
  padding-left:5%;
  padding-right:5%;
}


.bg-banner {
    background-position:85% 50%;
}

.bg-banner-3 {
    opacity:80%;
    background-attachment: scroll;
}

.bg-banner-1 {
    background-attachment: scroll;
    background-position:45% 50%;
}

}