@font-face {
    font-family: "Sarabun-Regular";
    src:url("../fonts/Sarabun-Regular.ttf");
}
@font-face {
    font-family: "Sarabun-SemiBold";
    src:url("../fonts/Sarabun-SemiBold.ttf");
}
@font-face {
    font-family: "Sarabun-ExtraBold";
    src:url("../fonts/Sarabun-ExtraBold.ttf");
}



*{
  margin: 0;
  padding: 0;
}
html, body, main{
  width: 100%;
  height: 100%;
}
body{
  font-family: 'Sarabun-Regular', sans-serif;
  font-size: 130%;
  font-weight: 400;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: "liga" on;
  background-color:#ffffff;
  color:#360C0C;
}

/*
 *
 *                            HEADER STYLING
 *******************************************************************************
 *
 */

header{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: #ffffff;
  z-index: 100;
}
#logo,
nav{ display: inline-block; }

#logo{
  text-transform: uppercase;
  font-family: 'Sarabun-ExtraBold', sans-serif;
  font-weight: 800;
  line-height: 1em;
  margin: 13px 15px;
}
nav{
  text-align: right;
  margin: 4px 10px 10px 15px;
}
nav a{
  font-size: 0.8em;
  margin: auto 5px;
}
#logo a,
nav a{
   color: inherit;
   text-decoration: none;
   border: none;
}



 /*
  *
  *                            BODY STYLING
  *******************************************************************************
  *
  */

a{
  text-decoration: none;
  color: #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
}
a:hover{
  transition: 0.3s ease-in-out;
  opacity: 0.7;
}
img{
  display: block;
  max-width: 100%;
}
.text {
  max-width: 700px;
  margin: auto;
  padding: 2em 15px;
  font-size: 1.8em;
  line-height: 1.25em;
  font-family: 'Sarabun-SemiBold', sans-serif;
  font-weight: 600;
  color: #6b6b6b;
}
.text span{ color: #360C0C; }

.button{
  background-color: #fff;
  padding: 0.3em 0.7em 0.45em 0.7em;
  border-radius: 3px;
  line-height: 1.9em;
  border: none !important;
  color: #360C0C !important;
}
.button:hover{
  opacity: 1 !important;
  transition: 0.3s ease-in-out;
  background-color: #ccc;
}



/*
 *
 *                     FULLSCREEN HEADER WITH IMG BACKGROUND
 *******************************************************************************
 *
 */

.fullscreen_image_header{
  position: relative;

  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  flex-direction: column;

  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;

  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;

  height: 105%;
  height: 105vh;

  background-size: cover;
  background-position: center;
}
.fullscreen_image_header img{
  height: 105%;
  height: 105vh;
  min-width: 100%;
}
.fullscreen_image_header div{
  position: absolute;
  width: 100%;
  text-align: center;
}
.fullscreen_image_header div p{
  font-family: 'Sarabun-ExtraBold', sans-serif;
  font-weight: 800;
  font-size: 7vw;
  line-height: 1em;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.8em;
}
.fullscreen_image_header div a{
  font-family: 'Sarabun-Regular', sans-serif;
  font-weight: 400;
  font-size: 0.9em;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #fff;
}



/*
 *
 *                             HEAD SECTION
 *******************************************************************************
 *
 */

#head{
  background-color: #2e2e35;
  background-image: url('../img/1920c/header.jpg');
}
#head.bubble_wrap{ background-image: url('../img/1920c/bubble_wrap.jpg'); }

#head img{
  /* -webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
                                       from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); */
}



/*
 *
 *                             PROBLEMS SECTION
 *******************************************************************************
 *
 */

#problem{ background-color: #2e2e35; }

#problem_headline{
  color: #f5f5f5;
  font-size: 11vw;
  font-family: 'Sarabun-ExtraBold', sans-serif;
  font-weight: 800;
  line-height: 0.9em;
  text-transform: uppercase;
  text-align: center;
}
#problem_subline{
  color: #ababab;
  font-size: 1.8em;
  line-height: 1.3em;
  font-family: 'Sarabun-SemiBold', sans-serif;
  font-weight: 600;
  margin-bottom: 0.5em;
}
#problem .text{ color: #ababab; }
#problem .text span{ color: #f5f5f5; }
#problem_summary{ background-color: #2e2e35; }



/*
 *
 *                               PARALLAX EFFECT
 *******************************************************************************
 *
 */

.parallax{
  position: relative;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  height: 70%;
  height: 70vh;
}
#parallax_1{ background-image: url('../img/1920c/on_demand.jpg'); }
#parallax_2{ background-image: url('../img/1920c/social_media.jpg'); }
#parallax_3{ background-image: url('../img/1920c/working_hours.jpg'); }
#parallax_4{ background-image: url('../img/1920c/get_ready.jpg'); }
#parallax_5{ background-image: url('../img/1920c/create_magical_things.jpg'); }
#parallax_6{ background-image: url('../img/1920c/interact.jpg'); }
#parallax_7{ background-image: url('../img/1920c/color_of_love.jpg'); }
#parallax_hugy_hugy{
  background-image: url('../img/1920c/hugy_hugy.jpg');
  background-color: #000;
}
#parallax_prototype{ background-image: url('../img/1920c/prototype.jpg'); }
#prototype_cold{ background-image: url('../img/1920c/prototype_cold.png'); }
#prototype_neutral{ background-image: url('../img/1920c/prototype_neutral.png'); }
#prototype_warm{ background-image: url('../img/1920c/prototype_warm.png'); }



 /*
  *
  *                               THE SOLTUION
  *******************************************************************************
  *
  */

#solution_headline{
  text-align: center;
  color: #6f6767;
  font-size: 20vw;
  font-family: 'Sarabun-ExtraBold', sans-serif;
  font-weight: 800;
  line-height: 1.2em;
  text-transform: uppercase;
  padding: 0.8em 0 0 0;
}
#solution_subline{
  text-align: center;
  color: #360C0C;
  font-size: 1.8em;
  line-height: 1.3em;
  font-weight: 600;
  padding: 0.5em 0;
}
#solution_intro{ background-image: url('../img/1920c/our_solution.jpg'); }
#solution_intro div{ color: #360C0C; }



 /*
  *
  *                             THE PROCESS WEBSITE
  *******************************************************************************
  *
  */

#hugy_hugy{ margin: 0 15px; }

h1, h2{
  max-width: 700px;
  margin: auto;
  padding: 3em 15px 0 15px;
  font-size: 2.5em;
  line-height: 1.3em;
  font-family: 'Sarabun-SemiBold', sans-serif;
  font-weight: 600;
}
h1{
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
}
h2{ padding-top: 1.2em; }

#process{
  background-color: #000;
  min-height: 100%;
  min-height: 100vh;
  height: auto;
}

#process h2{
  margin: 0 auto;
  padding-top: 0;
  color: #f5f5f5;
}
.no-padding{
  margin-top:  0 !important;
  padding-top: 0;
}

#process h3{
  color: #f5f5f5;
  padding: 0.5em 15px 0 15px;
  margin: 0 auto !important;
}
#process p{
  max-width: 700px;
  margin: 0 auto !important;
  padding: 0 15px 0.5em 15px;
  font-size: 1em;
  line-height: 1.3em;
  font-family: 'Sarabun-SemiBold', sans-serif;
  font-weight: 600;
  color: #ababab;
}
#process p span{ color: #f5f5f5; }

#body.process p{
  max-width: 700px;
  margin: 0 auto 3em auto;
  padding: 0 15px 0.5em 15px;
  font-size: 1em;
  line-height: 1.3em;
  font-family: 'Sarabun-SemiBold', sans-serif;
  font-weight: 600;
}
#body.process h3{
  padding: 0.5em 15px 0 15px;
  max-width: 700px;
  margin: 3em auto 0 auto;
}

#hugy_hugy h1{
  padding-top: 0.2em;
  padding-bottom: 2.5em;
}

#hugy_hugy_logo{
  width: 100%;
  max-width: 300px;
  margin: 7em auto 2em auto;
  height: auto;
  min-width: unset;
}
#parts,
#circuits{
  width: 100%;
  background-color: #000;
}
#parts div,
#circuits div{
  margin: auto;
  padding: 5em;
}

#parts img,
#circuits img{
  width: 100%;
  max-width: 900px;
  margin: auto;
}
#electronics{ background-color: #fff; }

.video-container-wrapper {
  max-width: 700px;
  width: 100%;
  left: 0;
  right: 0;
  margin: auto;
}
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/*
 *
 *                             PROTOTYPE SHOW OFF
 *******************************************************************************
 *
 */

#prototype_show_off{
  z-index: -1;
  background-color: #000;
  position: relative;
  height: 200%;
  height: 200vh;
  margin-top: -5em;
  padding-bottom: 5em;
  overflow: hidden;
}
.show_off{
  position: absolute;
  left: 25%;
  right: 25%;
  top: 0;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 50% auto;
  background-position: center;

  height: 200%;
  height: 200vh;
}



/*
 *
 *                             FOOTER SECTION
 *******************************************************************************
 *
 */

footer{ background-image: url('../img/1920c/exhibition_ads.jpg'); }

footer .left,
footer .right{
  position: absolute;
  bottom: 0;
  width: auto;
  font-family: 'Sarabun-Regular', sans-serif;
  font-weight: 400;
  font-size: 0.7em;
  margin: 0.5em 0.7em;
}
footer .left{
  text-align: left;
  left: 0;
}
footer .right{
  text-align: right;
  right: 0;
}
footer .left,
footer .right,
footer .left a,
footer .right a{ color: #999; }

footer .left a,
footer .right a{ border-bottom: 1px solid #999; }

footer .left a:hover,
footer .right a:hover{
  color: #ddd;
  border-bottom: 1px solid #ddd;
  opacity: 1;
}

 /*
  *
  *                               MEDIA QUERIES
  *******************************************************************************
  *
  */

@media only screen and (min-width: 1900px){
  h1,
  h2{
    font-size: 3em;
    max-width: 900px;
  }
  h2{ padding-top: 1em; }
  #body.process h3,
  #process h3{
    font-size: 1.5em;
    max-width: 900px;
  }
  #body.process p,
  #process p{
    font-size: 1.3em;
    max-width: 900px;
  }
  #process p{ max-width: 1000px; }
  .text{
    max-width: 1000px;
    font-size: 2.6em;
  }
  #parts div,
  #circuits div{
    max-width: 1500px;
  }
  .video-container-wrapper{
    max-width: 1000px;
  }
}

/* Turn off parallax scrolling for tablets and phones */
/* not working because of jQuery implementation is still running */
@media only screen and (max-width: 899px) {
  h2{
    padding-top: 1.2em;
    line-height: 1em;
    padding-bottom: 0.2em;
  }
  .parallax,
  .show_off{ background-attachment: scroll; }

  .fullscreen_image_header div p{ font-size: 1.8em; }
  .text{
    font-family: 'Sarabun-Regular', sans-serif;
    font-weight: 400;
    font-size: 1.2em;
    line-height: 1.45em;
  }
  footer{ background-position: left center !important; }

  /* HOME PAGE specific styling */
  #problem_summary{
    height: 50%;
    height: 50vh;
  }

  /* PROCESS PAGE specific styling */
  #process{ padding: 3em 0; }
  #process p{
    font-family: 'Sarabun-Regular', sans-serif;
    font-weight: 400;
    font-size: 1em;
    line-height: 1.45em;
  }
  #parts div,
  #circuits div{ padding: 15px; }
  #prototype_show_off{
    height: 70%;
    height: 70vh;
    margin-top: 0;
  }
  .show_off{
    height: 100%;
    background-size: 100%;
    left: 0;
    right: 0;
  }
  #prototype_cold{
    left:  -30%;
    right:  30%;
  }
  #prototype_warm{
    left:   30%;
    right: -30%;
  }
}

@media (max-width: 500px){
  nav a{
    display: block;
    line-height: 2.3em;
  }
}

@media (min-width: 900px){
  #electronics .text{ padding-bottom: 3em !important; }
}

@media (max-width: 500px){
  #head{ background-image: url('../img/500c/header.jpg'); }
  #head.bubble_wrap{ background-image: url('../img/500c/bubble_wrap.jpg'); }
  #parallax_1{ background-image: url('../img/500c/on_demand.jpg'); }
  #parallax_2{ background-image: url('../img/500c/social_media.jpg'); }
  #parallax_3{ background-image: url('../img/500c/working_hours.jpg'); }
  #parallax_4{ background-image: url('../img/500c/get_ready.jpg'); }
  #parallax_5{ background-image: url('../img/500c/create_magical_things.jpg'); }
  #parallax_6{ background-image: url('../img/500c/interact.jpg'); }
  #parallax_7{ background-image: url('../img/500c/color_of_love.jpg'); }
  #solution_intro{ background-image: url('../img/500c/our_solution.jpg'); }
  #parallax_hugy_hugy{ background-image: url('../img/500c/hugy_hugy.jpg'); }
  #parallax_prototype{ background-image: url('../img/500c/prototype.jpg'); }
  #prototype_cold{ background-image: url('../img/1200c/prototype_cold.png'); }
  #prototype_neutral{ background-image: url('../img/1200c/prototype_neutral.png'); }
  #prototype_warm{ background-image: url('../img/1200c/prototype_warm.png'); }
  footer{ background-image: url('../img/500c/exhibition_ads.jpg'); }
}

@media (min-width: 501px) and (max-width: 1200px){
  #head{ background-image: url('../img/1200c/header.jpg'); }
  #head.bubble_wrap{ background-image: url('../img/1200c/bubble_wrap.jpg'); }
  #parallax_1{ background-image: url('../img/1200c/on_demand.jpg'); }
  #parallax_2{ background-image: url('../img/1200c/social_media.jpg'); }
  #parallax_3{ background-image: url('../img/1200c/working_hours.jpg'); }
  #parallax_4{ background-image: url('../img/1200c/get_ready.jpg'); }
  #parallax_5{ background-image: url('../img/1200c/create_magical_things.jpg'); }
  #parallax_6{ background-image: url('../img/1200c/interact.jpg'); }
  #parallax_7{ background-image: url('../img/1200c/color_of_love.jpg'); }
  #solution_intro{ background-image: url('../img/1200c/our_solution.jpg'); }
  #parallax_hugy_hugy{ background-image: url('../img/1200c/hugy_hugy.jpg'); }
  #parallax_prototype{ background-image: url('../img/1200c/prototype.jpg'); }
  #prototype_cold{ background-image: url('../img/1200c/prototype_cold.png'); }
  #prototype_neutral{ background-image: url('../img/1200c/prototype_neutral.png'); }
  #prototype_warm{ background-image: url('../img/1200c/prototype_warm.png'); }
  footer{ background-image: url('../img/1200c/exhibition_ads.jpg'); }
}

@media (min-width: 1920px){
  #head{ background-image: url('../img/1920/header.jpg'); }
  #head.bubble_wrap{ background-image: url('../img/1200c/bubble_wrap.jpg'); }
  #parallax_1{ background-image: url('../img/1920/on_demand.jpg'); }
  #parallax_2{ background-image: url('../img/1920/social_media.jpg'); }
  #parallax_3{ background-image: url('../img/1920/working_hours.jpg'); }
  #parallax_4{ background-image: url('../img/1920/get_ready.jpg'); }
  #parallax_5{ background-image: url('../img/1920/create_magical_things.jpg'); }
  #parallax_6{ background-image: url('../img/1920/interact.jpg'); }
  #parallax_7{ background-image: url('../img/1920/color_of_love.jpg'); }
  #solution_intro{ background-image: url('../img/1920/our_solution.jpg'); }
  #parallax_hugy_hugy{ background-image: url('../img/1920/hugy_hugy.jpg'); }
  #parallax_prototype{ background-image: url('../img/1920/prototype.jpg'); }
  #prototype_cold{ background-image: url('../img/1920/prototype_cold.png'); }
  #prototype_neutral{ background-image: url('../img/1920/prototype_neutral.png'); }
  #prototype_warm{ background-image: url('../img/1920/prototype_warm.png'); }
  footer{ background-image: url('../img/1920/exhibition_ads.jpg'); }
}