@import url("https://use.typekit.net/pkc8tlc.css");

.theme {}
  .theme body {}
  .theme a { font-family: "acumin-pro-wide", sans-serif; color: #000; text-decoration: none; }
	.theme a:hover { text-decoration: underline; }
  .theme h1 { font-family: "acumin-pro-wide", sans-serif; font-size: 3.5rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 0.5em; }
  .theme h2 { font-family: "acumin-pro-wide", sans-serif; font-size: 2.5rem; font-weight: 500; line-height: 2.5em; }
  .theme h3 { font-family: "acumin-pro-wide", sans-serif; font-weight: 400; }
  .theme h4 { font-family: "acumin-pro-wide", sans-serif; font-weight: 400; font-size: 1.2em; line-height: 1.5em; }
  .theme h5 { font-family: "acumin-pro-wide", sans-serif; font-weight: 400; }
  .theme input { border: solid 2px #000; }
  .theme nav {}
  .theme p { font-family: "acumin-pro-wide", sans-serif; font-weight: 400; }
  .theme span { font-family: "acumin-pro-wide", sans-serif; font-weight: 400; }
  .theme section { background: #fff; }
  .theme select { border: solid 2px #000; }
  .theme table { border-bottom: solid 2px #000; border-top: solid 2px #000; }
  .theme table tr { border-bottom: solid 2px #000; padding: 1em 0 1em 0; }

/*
—————————————————————————
Animations
————————————————————————— */

.slide-left { -webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }
@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
}



.slide-top { animation: slide-top 1.5s cubic-bezier(0.645, 0.045, 0.355, 1.000) both; -webkit-animation: slide-top 1.5s cubic-bezier(0.645, 0.045, 0.355, 1.000) both; } 
  @-webkit-keyframes slide-top {
	0% {
	  -webkit-transform: translateY(0);
			  transform: translateY(0);
	}
	100% {
	  -webkit-transform: translateY(-100px);
			  transform: translateY(-100px);
	}
  }
  @keyframes slide-top {
	0% {
	  -webkit-transform: translateY(0);
			  transform: translateY(0);
	}
	100% {
	  -webkit-transform: translateY(-100px);
			  transform: translateY(-100px);
	}
  }

.kenburns-top { -webkit-animation: kenburns-top 25s ease-out 3s both; animation: kenburns-top 25s ease-out 3s both; }
  @-webkit-keyframes kenburns-top {
	0% {
	  -webkit-transform: scale(1.2) translateY(0);
			  transform: scale(1.2) translateY(0);
	  -webkit-transform-origin: 50% 16%;
			  transform-origin: 50% 16%;
	}
	100% {
	  -webkit-transform: scale(1.1) translateY(-15px);
			  transform: scale(1.1) translateY(-15px);
	  -webkit-transform-origin: top;
			  transform-origin: top;
	}
  }
  @keyframes kenburns-top {
	0% {
	  -webkit-transform: scale(1.2) translateY(0);
			  transform: scale(1.2) translateY(0);
	  -webkit-transform-origin: 50% 16%;
			  transform-origin: 50% 16%;
	}
	100% {
	  -webkit-transform: scale(1.1) translateY(-15px);
			  transform: scale(1.1) translateY(-15px);
	  -webkit-transform-origin: top;
			  transform-origin: top;
	}
  }


/*
—————————————————————————
Navigation
————————————————————————— */

  .theme .nav_admin { background: #000; color: #fff; font-size: 0.8em; margin: 0; }
  .theme .nav_admin a { color: #fff; }

  .theme #common_footer { padding: 0; }
	.theme #common_footer #footer_contact { background: #F9FFF4; padding: 5em 0 5em 0; }
	.theme #common_footer #footer_legal { background: #000; color: #fff; font-size: 0.90em; letter-spacing: 0.08em; padding: 1em 0 1em 0; }
	.theme #common_footer #footer_legal a { color: #fff; }

  .theme #common_nav { padding: 0; position: sticky; }

	.theme #common_nav .ui_icon_menu { background: none; height: 50px; margin: 1em; }
	.theme #common_nav .ui_icon_close { margin: 1em; left: auto; right: 0; width: 50px; }
	.theme #common_nav .ui_icon_logo { height: auto; margin: 1em; width: 80px; }

	  .theme #common_nav #nav_bar { background: #fff; border-bottom: solid 2px #000; border-top: solid 2px #000; font-size: 1.3em; padding: 1em 0 1em 0; position: fixed; text-align: center; top: 0; width: 100%; z-index: 999; }
	  .theme #common_nav #nav_bar .nav_link { font-size: 0.9em; font-weight: 600; letter-spacing: 0.06em; margin-right: 2em; text-transform: uppercase; }

	  .theme #common_nav #nav_menu { background: #FCEFEF; color: #000; height: 100vh; overflow: hidden; position: fixed; right: 0; top: 0; width: 0; z-index: 9999; }
		.theme #common_nav #nav_menu h4 { font-weight: 600; }
		.theme #common_nav #nav_menu h5 { font-weight: 600; text-transform: lowercase; }
		.theme #common_nav #nav_menu.open-nav-menu { width: 100%; transition: width 0.3s }
		.theme #common_nav #nav_menu.close-nav-menu { width: 0; transition: width 0.3s }

		  .theme #common_nav #nav_menu #nav_menu_content { text-align: center; }
			.theme #common_nav #nav_menu #nav_menu_content .nav_info { margin-top: 2em; }
			.theme #common_nav #nav_menu #nav_menu_content .nav_link { display: block; font-size: 3.5rem; font-weight: 600; line-height: 1.3em; text-transform: capitalize; }

			.theme #common_nav #nav_menu #nav_menu_content .logo { margin: 2em; }
			  .theme #common_nav #nav_menu #nav_menu_content .logo img { width: 200px; }


/*
—————————————————————————
UI Elements
————————————————————————— */

  .theme .border_bottom { border-bottom: solid 2px #000; }
  .theme .border_top { border-top: solid 2px #000; }
  .theme [class*='block_'] { margin: 0; padding: 0; }

  .theme .block_button { font-family: "acumin-pro-wide", sans-serif; font-size: 1em; font-weight: 600; text-decoration: none; text-transform: capitalize; z-index: 99; }
	.theme .block_button .button_primary { background: #ED1D7D; border: solid 2px #000; color: #000; padding: 1em 2.5em 1em 2.5em; } 

  .theme .carousel { height: 520px; }
	  .theme .carousel button { background: #fff; background-size: 90% 90%; background-position: center center; border: solid 2px #000; border-radius: 0; bottom: 0; color: rgba(255,255,255,0) /* purpose of color attr is to hide the text label */; height: 40px; margin: auto; opacity: 1.0; padding: 0.3em; position: absolute; top: 0; width: 45px; z-index: 999; }
		.theme .carousel button.slick-disabled { opacity: 0.35; }
		.theme .carousel button.slick-next { background-image: url('/img/icon_arrow-right.svg'); background-repeat: no-repeat; display: block; right: 20px; }
		.theme .carousel button.slick-prev { background-image: url('/img/icon_arrow-left.svg'); background-repeat: no-repeat; display: block; left: 20px; }

	  .theme .carousel figure { height: 500px; margin: 0.5em; }
		.theme .carousel figure figcaption { color: #000; font-size: 0.97em; font-weight: 600; letter-spacing: 0.1em; opacity: 1.0; padding: 1em 1em 1em 0; text-transform: uppercase; }
		.theme .carousel figure img { height: 500px /* same as figure height */; object-fit: cover; object-position: 50% 50%; width: auto; }  

  .theme .layout_spread { height: 550px; overflow: hidden; position: relative; } 
	.theme .layout_spread .copy { margin: auto; overflow: hidden; padding: 5%; position: relative; }
	.theme .layout_spread .image .block_image { border-left: solid 2px #000; border-right: solid 2px #000; height: 100%; min-height: 100%; overflow: hidden; }
		.theme .layout_spread .block_image figure img { height: 100%; object-fit: cover; object-position: 50% 50%; position: absolute; width: 100%; }

/*
—————————————————————————
Sections
————————————————————————— */

  .theme #section_hero { border-bottom: solid 2px #000; padding: 3em 0 3em 0; }

  /* About */

  .theme #section_about_jaechoi { } 
	.theme #section_about_jaechoi.layout_spread { min-height: auto; height: 1400px; }
	  .theme #section_about_jaechoi.layout_spread .copy {}
	  .theme #section_about_jaechoi.layout_spread .image img {}

  .theme #section_about_news { background: #FCEFEF; padding: 5em 0 8em 0; }

  .theme #section_about_restaurant { background: #FFD9DA; padding: 0; }
	.theme #section_about_restaurant.layout_spread { height: 800px; }


  /* Contact */
  .theme #section_contact_info { background: #F9FFF4; }
  .theme #section_contact_jobs{}
	.theme #section_contact_jobs.layout_spread .image img { object-position: 0% 50%; }

  /* Home */

  .theme #section_homepage_about { background: #FCEFEF; }

  .theme #section_homepage_hero { height: 90vh; padding: 0; }
	.theme #section_homepage_hero .block_image { height: 90vh; }
	  .theme #section_homepage_hero .block_image figure { height: 90vh; object-fit: cover; }
		.theme #section_homepage_hero .block_image figure img { height: 100vh; filter: brightness(90%); left: 0; object-fit: cover; position: absolute; width: 100%; }	
	.theme #section_homepage_hero .block_code { bottom: 0; height: 50vh; left: 0; margin: auto; position: absolute; right: 0; top: 0;  }
	  .theme #section_homepage_hero .block_code .logo { margin: auto; max-width: 350px; }

  .theme #section_homepage_gallery { background: #FCEFEF; padding: 10em 0 10em 0; }
	.theme #section_homepage_gallery .block_image img { border: solid 2px #000; }

  .theme #section_homepage_intro { border-bottom: solid 2px #000; border-top: solid 2px #000; padding: 10em 0 10em 0; }	

  .theme #section_homepage_menu { padding: 0; position: relative; }
	.theme #section_homepage_menu .block_text {}
	.theme #section_homepage_menu .block_code { display: none; margin: auto; position: absolute; right: 30%; top: 5%; width: 500px; }  
	  .theme #section_homepage_menu .block_code .pattern { opacity: 0.08; }

  .theme #section_homepage_news { background: #ED1D7D; border-bottom: solid 2px #000; padding: 5em 0 5em 0; text-align: center; }
	.theme #section_homepage_news .block_image { margin: auto; padding: 2em; }
	.theme #section_homepage_news .logo_press img { margin-top: 1em; max-height: auto; max-width: 200px; }
	.theme #section_homepage_news .logo_press_wna img { max-height: 175px; width: auto; }


  /* Menu */

  .theme #section_menu_download { background: #FFD9DA; }
	.theme #section_menu_download .copy {}


  /* Order */

  .theme #section_order_info { background: #FCEFEF; }
	.theme #section_order_info .copy {}
																




/*
———————————————————————————————————————————————————————————————————————————

MEDIA QUERIES

*
* Conditions modify existing classes & selectors to change the appearance of elements based on screen width
* 
* 1. The default 3 conditions typically cover majority of screen sizes, though additional conditions can be included.
* 2. Use sparingly (complex modifications typically indicate an element should be simplified)
*
*

——————————————————————————————————————————————————————————————————————————— */


@media screen and (min-width: 18.750em) and (max-width: 64.000em) {

	/*
	——————————————————————————————————————————————————
	
	BREAKPOINT DETAILS
	
	Min-Width: 300px
	Max-Width: 1024px
	Target Device: Smartphone
	Orientation: Portait & Landscape
	
	—————————————————————————————————————————————————— */
	.theme article { padding: 2em; }
	.theme h1 { font-size: 10vw; }
	.theme h2 { font-size: 8vw; }
	.theme h3 { font-size: 6vw; line-height: 1.3em; }


	/*
	——————————————————————————————————————————————————
	
	CLASSES 300px-1024px
	
	—————————————————————————————————————————————————— */   

 

  .theme .carousel { height: 400px; }
	  .theme .carousel button { display: none; /* background-size: 60% 60%; border-radius: 0.2em; height: 35px; width: 20px; z-index: 99; */ }
	  .theme .carousel figure { height: 410px; }
		.theme .carousel figure figcaption { color: #000; font-size: 0.97em; font-weight: 600; letter-spacing: 0.1em; opacity: 1.0; padding: 1em 1em 1em 0; text-transform: uppercase; }
	  .theme .carousel img { height: 410px /* same as carousel height */; object-fit: cover; object-position: 99% 50%; width: auto; }  
	  .theme .carousel .slick-next { background-image: url('/img/icon_chevron-right_white.svg'); display: none; right: 20px; }
	  .theme .carousel .slick-prev { background-image: url('/img/icon_chevron-left_white.svg'); display: none; left: 20px; }
  
	.theme .layout_spread { height: 900px; overflow: visible; padding: 0 0 2em 0; position: relative; }
	  .theme .layout_spread [id*='column_'] { display: block; width: 100%; }
	  .theme .layout_spread .copy { font-size: 0.95em; height: auto; padding: 2em; position: absolute; top: 500px; }
	  .theme .layout_spread .copy p { margin: auto; }	
		  .theme .layout_spread .copy .logo { margin-bottom: 0; margin-top: 2em; max-width: 75%; }
	  .theme .layout_spread .image { border: none; border-bottom: solid 2px #000; min-height: auto; height: 499px; overflow: hidden; position: absolute; top: 0; }
		  .theme .layout_spread .image img { height: 500px; left: 0; object-fit: cover; object-position: 50% 50%; width: 100%; }
  
	.theme .wrap { padding: 0 1em 0 1em; }
  
    .theme #common_nav #nav_bar { height: 60px; position: sticky; }
  .theme #common_nav #nav_bar .nav_bar_content { display: none; }
  .theme #common_nav #nav_bar .ui_icon_logo { height: 40px; margin: 0.5em; width: 80px; }
  .theme #common_nav #nav_bar .ui_icon_menu { margin: 0.5em; }
	.theme #common_nav #nav_bar .ui_icon_menu img { height: 40px; }
  
  .theme #common_nav #nav_menu #nav_menu_content { padding: 2em 0 0.5em 0; min-width: 300px; }
	.theme #common_nav #nav_menu .ui_icon_close { width: 30px; }
	  .theme #common_nav #nav_menu #nav_menu_content .logo img { width: 150px; }
	  .theme #common_nav #nav_menu #nav_menu_content .nav_link { display: block; font-size: 2.3rem; }
	  .theme #common_nav #nav_menu #nav_menu_content .nav_info h4 { display: block; font-size: 1rem; }
  
  .theme #common_footer {}
	.theme #common_footer #footer_contact {}
	  .theme #common_footer #footer_contact h2 { text-align: center; }
	  .theme #common_footer #footer_contact h4 { text-align: center; }

  .theme #section_about_jaechoi { } 
	.theme #section_about_jaechoi.layout_spread { height: 2600px; }
	  .theme #section_about_jaechoi.layout_spread .copy { height: auto; top: 600px; }
	  .theme #section_about_jaechoi.layout_spread .image { height: 600px; }
		.theme #section_about_jaechoi.layout_spread .image img { height: 100%; }
		
  .theme #section_about_news { background: #FCEFEF; }

  .theme #section_about_restaurant {}
	.theme #section_about_restaurant.layout_spread { height: 1400px; }
	  .theme #section_about_restaurant.layout_spread .copy { height: 800px; top: 550px; }
	  .theme #section_about_restaurant.layout_spread .image { height: 550px; }
		.theme #section_about_restaurant.layout_spread .image img { height: 100%; }

	
}