/*
 * Version: 3.5
 *
 * Note: Ayakarin does not use this and but ayakarin.css instead.
 */

/*  Fonts  */

/* Japaese font(s) should be included only for JA pages.
@font-face {
	font-family: 'M PLUS Rounded 1c';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/MPLUSRounded1c-Regular-Subset.eot");
	src: url("fonts/MPLUSRounded1c-Regular-Subset.eot?#iefix") format("embedded-opentype"),url("fonts/MPLUSRounded1c-Regular-Subset.woff") format("woff"),url("fonts/MPLUSRounded1c-Regular-Subset.ttf") format("truetype");
	font-display: swap;
}
@font-face {
	font-family: 'Noto Serif JP';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/NotoSerifJP-Regular-Subset.woff") format("woff");
}
*/

* {
	font-family: 'Roboto', san-serif;
	font-size: var(--font-size-medium);
}

ruby > rt {
	font-size: 50%;
}

h1, h1 * {
	font-size: var(--font-size-xlarge);
}

h2, h2 * {
	font-size: var(--font-size-large);
	color: var(--brand-color-1-dark);
}

h1 span, h2 span, h3 span {
	display: inline-block;
}

p {
	font-family: 'Roboto', sans-serif;
	font-family: sans-serif;
	line-height: 150%;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	max-width: 35em;
	text-align: justify;
}

p:last-child {
	margin-bottom: 0;
}

/* Standard list */
ul {
	padding-top: var(--ul-padding-top);
	padding-bottom: var(--ul-padding-bottom);
	padding-left: var(--horizontal-margin-triple);
}

ul li {
	padding-top: var(--vertical-margin-quarter);
	padding-bottom: var(--vertical-margin-quarter);
}

input, textarea, select {
	border: 2px solid #ccc;
	border-radius: 4px;
	background-color: #f8f8f8;
}

input, select {
	box-sizing: border-box;
	padding: 3px 5px;
}

input[type="text"] {
	width: 100%;
	text-overflow: ellipsis;
}

input[type="email"], input[type="number"] {
	text-overflow: ellipsis;
}

input[type="submit"], input[type="button"] {
	cursor: pointer;
}

input[type="submit"] {
	color: white;
	background-color: var(--brand-color-1);
	padding-left: var(--horizontal-margin-triple);
	padding-right: var(--horizontal-margin-triple);
}

input[type="submit"]:focus {
	background-color: var(--brand-color-1-light);
}

input[type="submit"]:hover {
	background-color: var(--brand-color-1-light);
}

textarea {
	width: 100%;
	padding: 3px 5px;
	box-sizing: border-box;
	resize: none;
}

form {
	width: 100%;
}

@media (orientation: portrait) {
	h1 {
		text-align: center;
	}

	ul {
		padding-left: 30px;
		padding-right: 5%;
	}	
}

/* Make it sure using a local fonts when it comes to user input free text */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="datetime"],
input[type="month"],
textarea {
	font-family: sans-serif;
}

/* Some Common Style Class BEGIN */
.text-emphasis {
	font-weight: bold;
}

.anchor {
	display: block;
	padding-top: var(--header-height);
	margin-top: calc(-1 * var(--header-height));
}

.icon-medium {
	width: var(--icon-size-medium);
	position: relative;
	top: var(--vertical-margin-eighth);
}

.icon-large {
	width: var(--icon-size-large);
	position: relative;
	top: var(--vertical-margin-eighth);
}

.icon-xxlarge {
	width: var(--font-size-xxlarge);
	height: var(--font-size-xxlarge);
	position: relative;
	top: var(--vertical-margin-eighth);
}

/*
.annotes-col {
	flex-direction: column;
}

.annotes-left-aligned {
	align-items: flex-start;
}

.annotes-pane {
	width: 100%;
	background-color: white;
	border: 1px solid var(--brand-color-1-transparent);
	border-radius: var(--border-radius-tight);
}

.annotes-pane-title {
	align-items: flex-start;
	width: 100%;
	padding: var(--vertical-margin-half) var(--horizontal-margin-half);
}

.annotes-pane .annotes-box {
	width: 100%;
	padding: var(--vertical-margin-half) var(--horizontal-margin-half);
}

.annotes-pane ~ .annotes-pane {
	margin-top: var(--vertical-margin-single);
}

.annotes-btn {
	font-size: var(--font-size-medium);
	border-radius: 3px;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: 1px solid grey;
	cursor: pointer;
}

.annotes-btn:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.annotes-btn-lc-m {
	padding: var(--vertical-margin-half) var(--horizontal-margin-half);
}

.annotes-btn-lc-m:hover {
	background-color: lightgrey;
	border-color: #269abc;
}

.annotes-btn-ac-m {
	padding: var(--vertical-margin-half) var(--horizontal-margin-half);
	background-color: var(--cta-color-1);
	color: white;
}

.annotes-btn-ac-l {
	padding: var(--vertical-margin-single) var(--horizontal-margin-single);
	background-color: var(--cta-color-1);
	color: white;
	font-size: var(--font-size-large);
}

.annotes-btn-ac-m:hover, .annotes-btn-ac-l:hover {
	background-color: var(--cta-color-1-light);
}


.annotes-btn-bc1-m {
	padding: var(--vertical-margin-half) var(--horizontal-margin-half);
	background-color: var(--brand-color-1);
	color: var(--brand-color-1c);
}

.annotes-btn-bc1-l {
	padding: var(--vertical-margin-single) var(--horizontal-margin-single);
	background-color: var(--brand-color-1);
	color: var(--brand-color-1c);
	font-size: var(--font-size-large);
}

.annotes-btn-bc1-m:hover, .annotes-btn-bc1-l:hover {
	background-color: var(--brand-color-1-light);
}

.annotes-form-row {
	align-items: flex-start;
}

.annotes-form-col + .annotes-form-col {
	margin-left: var(--horizontal-margin-single);
}

.annotes-form-two-col {
	width: 50%;
	position: relative;
	min-height: 1px;
	float: left;
}

.annotes-form-two-col:nth-child(2) {
	padding-left: var(--horizontal-margin-single);
}

.annotes-form-group {
	flex-direction: column;
	margin-bottom: var(--vertical-margin-single);
	align-items: flex-start;
}

.annotes-form-group label {
	font-weight: bold;
	white-space: nowrap;
}

.annotes-form-group label span {
	font-weight: normal;
	font-style: italic;
}

.annotes-form-group div {
	width: 100%;
}

input[type="text"].annotes-form-text-5 {
	width: calc(var(--font-size-medium) * 5);
}

input[type="text"].annotes-form-fullname-en {
	width: calc(var(--font-size-medium) * 20);
}

input[type="text"].annotes-form-phone {
	width: calc(var(--font-size-medium) * 9);
}

input[type="email"].annotes-form-email,
input[type="text"].annotes-form-email {
	width: calc(var(--font-size-medium) * 15);
}

div.annotes-form-radio-item {
	width: 20vw;
	height: var(--vertical-margin-triple);
	border: 1px solid grey;
	border-radius: var(--border-radius-tight);
}

.annotes-form-radio-item input {
	margin: 0;
	margin-left: var(--horizontal-margin-half);
}

.annotes-form-radio-item label {
	margin-left: var(--horizontal-margin-half);
}

.annotes-form-action-box {
	justify-content: space-between;
	width: 100%;
	padding: var(--vertical-margin-single) var(--horizontal-margin-single);
}

.annotes-form-padding-mark,
.annotes-form-validated-mark,
.annotes-form-error-mark {
	display: none;
	margin-left: var(--vertical-margin-half);
	font-size: var(--font-size-xlarge);
	font-weight: bold;
}

.annotes-form-padding-mark {
	color: white;
	display: block;
}

.annotes-form-validated-mark {
	color: forestgreen;
}
	
.annotes-form-group.has-error label,
.annotes-form-error-text,
.annotes-form-error-mark {
	color: #dd4b39;
	border-color: #dd4b39;
	box-shadow: none;
}

.annotes-form-group.has-error .annotes-form-control {
	border-color: #dd4b39;
}

.annotes-form-group.has-error .annotes-form-error-mark {
	display: block;
}

.annotes-form-group.has-error .annotes-form-padding-mark {
	display: none;
}

.annotes-form-group [data-validated=true][data-changed=true],
.annotes-form-group select[data-changed=true],
.annotes-form-group fieldset[role=radiogroup][data-changed=true] {
	border-color: green;
}

.annotes-form-group [data-validated=true][data-changed=true] ~ .annotes-form-validated-mark,
.annotes-form-group select[data-changed=true] ~ .annotes-form-validated-mark,
.annotes-form-group fieldset[role=radiogroup][data-changed=true] ~ .annotes-form-validated-mark {
	display: block;
}

.annotes-form-group [data-validated=true][data-changed=true] ~ .annotes-form-padding-mark,
.annotes-form-group select[data-changed=true] ~ .annotes-form-padding-mark,
.annotes-form-group fieldset[role=radiogroup][data-changed=true] ~ .annotes-form-padding-mark {
	display: none;
}

.annotes-form-group [data-validated=true][data-changed=true]:focus,
.annotes-form-group select[data-changed=true]:focus,
.annotes-form-group fieldset[role=radiogroup][data-changed=true]:focus,
.annotes-form-group input:focus,
.annotes-form-group.has-error .annotes-form-control:focus,
.annotes-form-group select:focus {
	outline-style: none;
	border-color: var(--brand-color-1);
	box-shadow: 0 0 var(--horizontal-margin-quarter) var(--brand-color-1);
}


.annotes-filled-circle {
	box-sizing: border-box;
	cursor: auto;
	pointer-events: none;
	width: calc(var(--font-size-medium) * 1.5);
	height: calc(var(--font-size-medium) * 1.5);
	color: rgb(255, 255, 255);
	display: flex;
	flex-direction: row;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	font-size: var(--font-size-medium);
	font-weight: bold;
	position: relative;
	background: black;
	border-radius: 50%;
	border-width: 0px;
	border-style: initial;
	border-color: initial;
	border-image: initial;
	transition: background 0.5s ease-in-out 0s, border 0.5s ease-in-out 0s;
}
*/

/* An element with annotes-tooltip-activator must be just before an element with annotes-tooltip as a sibling. */
/* Sizes like padding, border-radius, width are just default value. They are normally overwritten by application level CSS */
/* This is to place the tooltip window at the bottom of the activator element. */
/*
.annotes-tooltip {
	display: none;
	position: absolute;
	padding: 10px;
	border-radius: 5px;
	width: 200px;
	background-color: lightgray;
	cursor: default;
	/* display: inline-block; */
	/* top: 30px; */
	/* left: -145px; */
/* } */

/* This is to add a small triangle arrow above tooltip window. */
/*
.annotes-tooltip:before {
	content: "";
	position: absolute;
	top: calc(var(--font-size-small) * -2);
	right: 10%;
	border: var(--font-size-small) solid transparent;
	border-top: var(--font-size-small) solid lightgray;
	margin-left: calc(var(--font-size-small) * -1);
	transform: rotateZ(180deg);
}

.annotes-tooltip-activator {
	position: relative;
	cursor: pointer;
	display: inline-block;
}
*/

/* The "top" should have a positive amount of the height of the activator element. */
/*
.annotes-tooltip-activator:hover .annotes-tooltip {
	display: inline-block;
	top: 30px;
	left: -145px;
}

@media (orientation: portrait), (max-width: 960px) {
	.annotes-form-row {
		flex-direction: column;
	}

	.annotes-form-col + .annotes-form-col {
		margin-left: 0;
	}

	div.annotes-form-radio-item {
		width: 60vw;
	}
}
*/
/* Some Universal Style Class END */

/* JQuery UI */
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
	font-family: inherit!important;
}
/* END JQuery UI */

/*  General CSS*/
@media (min-width: 0px) {
	
	.alert-text {
		color: red;
	}

	.annotation, .annotation * {
		font-size: var(--font-size-small);
	}
	
	p.annotation:before {
		content: "※ ";
	}
	
	.wrapper {
		display: flex;
		align-items: center;		
		width: var(--wrapper-width);
		height: auto;
	}
	
	.lo-block {
		display: block;
	}

	/* Centering, wrapping */
	.lo-flex-box-rcw {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
		align-content: stretch;
	}

	/* Centering, wrapping */
	.lo-flex-box-rlw {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: stretch;
		align-content: stretch;
	}

	/* Centering, 1 column */
	.lo-flex-box-1cc {
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	
	/* Space between and strech vertically with wrapping */
	.lo-flex-box-2 {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: stretch;
		align-content: space-around;
		margin: auto;
	}

	/* Centering, no wrapping */
	.lo-flex-box-3 {
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: stretch;
		align-content: stretch;
	}
	
	/* Space between and strech vertically with wrapping */
	/* | MM  MM  MM  MM |                                */
	/* |   MM  MM  MM   |                                */
	.lo-flex-box-4 {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: stretch;
		align-content: space-around;
		margin: auto;
	}
	
	.lo-flex-box-4 > a {
		display: block;
	}
}

/*
@media (orientation: landscape) and (min-width: 961px) {
	.annotes-flex-only-for-desktop {
		display: flex;
	}
	.annotes-flex-only-for-mobile {
		display: none;
	}
}
@media (orientation: portrait), (max-width: 960px) {
	.annotes-flex-only-for-desktop {
		display: none;
	}
	.annotes-flex-only-for-mobile {
		display: flex;
	}
}
*/
@media (orientation: landscape) {
	.only-for-landscape {
		display: initial;
	}
	.only-for-portrait {
		display: none;
	}
	/* "display: initial" means "display: inline", so the above method does not work for block, inlie-block, flex etc.
	/* https://stackoverflow.com/questions/17630945/is-there-an-opposite-to-displaynone */
	.block-for-landscape {
		display: block;
	}
	.block-for-portrait {
		display: none;
	}

	.flex-for-landscape {
		display: flex;
	}
	.flex-for-portrait {
		display: none;
	}
}

@media (orientation: portrait) {
	.only-for-landscape {
		display: none;
	}
	.only-for-portrait {
		display: initial;
	}

	.block-for-landscape {
		display: none;
	}
	.block-for-portrait {
		display: block;
	}

	.flex-for-landscape {
		display: none;
	}
	.flex-for-portrait {
		display: flex;
	}

	.wrapper {
		width: 94%;
		/* justify-content: space-between; */
		/* align-items: center; */
	}
}

::selection {color:#ffffff;background:#353434;}
::-moz-selection {color:#ffffff;background:#353434;}

.testimonials #t_navigation a,
header ul.social li a,
header nav ul li a {
	transition:all .2s linear;
	-webkit-transition:all .2s linear;
	/* -moz-transition:all .2s linear; */
	/* -o-transition:all .2s linear; */
}

ul.social {
	display: none;
}

/* Logo */
/* @media (min-width: 0px) { */

	.logo-with-name-box {
		color: lightskyblue;
		display: flex;
		align-items: flex-end;
	}
	
	.logo-with-name-box a {
		text-decoration: none;
	}

	.logo-with-name-box span {
		display: block;
		line-height: 100%;
		font-weight: bold;
		color: var(--brand-color-blue-light);
	}
	
	img.logo-with-name {
		vertical-align: middle;
		max-height: calc(var(--header-height) * 0.8);
	}

	header .logo-with-name-box img {
		width: var(--header-logo-width);
		max-width: var(--header-logo-max-width);
	}

	header .logo-with-name-box span {
		font-size: var(--font-size-xlarge);
		padding-left: var(--horizontal-margin-quarter);
	}
/* } */
@media (orientation: portrait), (max-width: 960px) {
	.logo-with-name-box {
		height: calc(var(--header-height) * 0.5);
		align-items: center;
		text-align: center;
	}
	header .logo-with-name-box img {
		/* width: 90%; */
		width: 40vw; /* CLS fix */
		height: calc(var(--header-height) * 0.4); /* CLS fix */
	}
}

/* END Logo */

/* Header BEGIN */
/* @media (min-width: 0px) { */

	.header-shrunken {
		display: none;
	}

	.header-main {
		width: 98%;
		display: flex;
		height: var(--header-height);
		justify-content: space-between;
		align-items: center;
		transition: .3s;
		margin: 0 auto;
		color: var(--brand-color-1);
	}

	header a {
		color: var(--brand-color-1);
		font-family: Roboto, sans-serif;
		font-family: sans-serif;
		font-weight: bold;
	}

	header a.ofo {
		color: var(--brand-color-2);
	}

	header.shrunken-header {
		height: var(--header-height-shrunken);
		transition: .3s;
	}
		
	.header-fix {
		width: 100%;
		height: var(--header-height);
		background-color: white;
		position: fixed;
		z-index: 10000;
		box-shadow: var(--horizontal-margin-eighth) var(--vertical-margin-eighth) 3px rgba(0,0,0,0.4);
		transition: .3s;
	}

	header.shrunken-header .header-fix {
		height: var(--header-height-shrunken);
		transition: .3s;
	}

	header.with-breadcrumb, header.with-breadcrumb .header-fix {
		height: var(--header-with-breadcrumb-height);
		transition: .3s;
	}

	header.with-breadcrumb.shrunken-header, header.with-breadcrumb.shrunken-header .header-fix {
		height: var(--header-with-breadcrumb-height-shrunken);
		transition: .3s;
	}
	

	.wrapper.header-main {
		height: var(--header-height);
		justify-content: space-between;
		margin: 0 auto;
		transition: .3s;
	}

	header.shrunken-header .wrapper.header-main {
		height: var(--header-height-shrunken);
		transition: .3s;
	}

	header .menu-icon {
		display: block;
		width: 35px;
		height: 35px;
		float: right;
		margin-top: 23px;
		display: none;
	}

	header .breadcrumb {
		display: none;
	}

	header.with-breadcrumb .breadcrumb {
		display: flex;
		align-items: center;
		height: var(--header-breadcrumb-height);
		background-color: #dadada;
		border-top-style: solid;
		border-top-width: 1px;
		border-top-color: grey;
	}
	
	header.with-breadcrumb .breadcrumb .wrapper {
		padding-left: var(--horizontal-margin-quarter);
		margin: 0 auto;
	}
	
	header.with-breadcrumb .breadcrumb .wrapper, header.with-breadcrumb .breadcrumb .wrapper a {
		font-size: var(--font-size-small);
		color: #2c2c2c;
	}

	header ul.social{
		float: right;
		list-style: none;
		margin-top: 23px;
	}

	header ul.social li{
		float: left;
		margin-left: 10px;
	}

	header ul.social li a{
		display: block;
		width: 35px;
		height: 35px;
		background: url('img/sm.png') no-repeat;
	}

	header ul.social li a:hover{
		background: url('img/sm_hover.png') no-repeat;
	}

	header ul.social li a{
		display: block;
		width: 35px;
		height: 35px;
	}

	header ul.social li a.fb{
		background-position: 0 0;
	}

	header ul.social li a.twitter{
		background-position: -36px 0;
	}

	header ul.social li a.gplus{
		background-position: -72px 0;
	}

	.header-padding {
		padding-top: var(--header-height);
	}
/* } */

@media (orientation: landscape) {
	.menu-in-header.at-the-right ul {
		justify-content: flex-end;
	}

	.menu-in-header.at-the-left ul {
		justify-content: flex-start;
	}

	.at-the-right .menu-item-in-header {
		margin-left: var(--horizontal-margin-double);
	}
}

@media (orientation: portrait), (max-width: 960px) {

	/* header, .header-fix { */
		/* height: var(--header-height); */
	/* } */

	header .wrapper {
		height: 100%;
	}

	header .logo {
		float: none;
		margin-top: 0;
	}

	header .menu-icon {
		display: block;
		margin-top: 0;
		margin-right: var(--horizontal-margin-single);
		float: none;
		width: var(--header-icon-height);
		height: var(--header-icon-height);
	}

	header .menu-icon img {
		width: var(--header-icon-height); /* CLS fix */
		height: var(--header-icon-height); /* CLS fix */
	}

	header nav {
		display: block;
		background: var(--brand-color-1);
		margin: 0;
		padding: 0;
		border-left: 0;
		border-top: 1px #2c2c2c solid;
		overflow: hidden;
		text-align: center;
		z-index: 9999;
		height: auto;
		width: 98%;
		transition: .3s;
		border-bottom-left-radius: 2px; 
		border-bottom-right-radius: 2px; 
	}

	header nav.show_menu {
		display: block;
	}

	header nav ul {
		display: block;
		height: auto;
		list-style: none;
		padding: 0 0;
	}

	header nav ul li {
		float: left;
		margin: 0;
		padding: 0 0;
		width: 100%;
		line-height: 120%;
		letter-spacing: 1px;
		text-align: center;
		border-bottom: 1px #2c2c2c solid;
	}

	header nav ul li:first-child {
		margin-left: 0;
	}

	header nav ul li:last-child{
		border-bottom: 0;
	}

	header nav ul li a {
		display: block;
		width: 100%;
		padding: 1.2em 0;
		color: white;
		text-decoration: none;
	}

	header nav ul li a:active {
		display: block;
		width: 100%;
		padding: 20px 0;
		background: #2c2c2c;
	}
	
}
/* END header  */

/*  Billboard  */
/* @media (min-width: 0px) { */
	.billboard {
		width: 100%;
		height: calc(100vh * 0.8);
		overflow: hidden;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		position: relative;
	}
	
	.billboard.short {
		height: calc(100vh * 0.3);
	}

	section.billboard .wrapper {
		margin: 0 auto;
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.no-webp .billboard.home {
		background-image: url("../img/billboard-home-landscape_L-min.jpg");
	}

	.webp .billboard.home {
		background-image: url("../img/billboard-home-landscape_L-min.webp");
	}
	
	.no-webp .billboard.reservation-flow {
		background-image: url("img/billboard-reservation-flow_L-min.jpg");
	}

	.webp .billboard.reservation-flow {
		background-image: url("img/billboard-reservation-flow_L-min.webp");
	}

	.billboard.bridal-option {
		background-position-y: top;
	}

	.no-webp .billboard.bridal-option {
		background-image: url("img/billboard-bridal-option_L-min.jpg");
	}

	.webp .billboard.bridal-option {
		background-image: url("img/billboard-bridal-option_L-min.webp");
	}

	.no-webp .billboard.venues-all {
		background-image: url("img/billboard-venues-all_L-min.jpg");
	}

	.webp .billboard.venues-all {
		background-image: url("img/billboard-venues-all_L-min.webp");
	}

	.billboard .caption {
		margin-bottom: var(--vertical-margin-single);
		margin-right: auto;
		margin-left: auto;
	}

	.billboard .caption p, .billboard--caption--line1, .billboard--caption--line2 {
		display: table;
		margin-left: auto;
		margin-right: auto;
		color: white;
		font-weight: lighter;
		padding: var(--horizontal-margin-half);
		margin-bottom: 2px;
		text-transform: uppercase;
		z-index: 8888;
	}

	.billboard--caption--line1 {
		font-size: var(--font-size-double-xlarge);
		/* For IE11 only, becuase the var() cssvars ponyfil does not work with text-shadow. */
		text-shadow: 1px 1px 1px black;
		/* The code below does not work with IE11 and is ignored with IE11. I gave up finding the reason and a solution. */
		text-shadow:
			var(--text-shadow-size-double-xlarge) var(--text-shadow-size-double-xlarge) var(--text-shadow-size-double-xlarge) black,
			calc(-1 * var(--text-shadow-size-double-xlarge)) var(--text-shadow-size-double-xlarge) var(--text-shadow-size-double-xlarge) black,
			var(--text-shadow-size-double-xlarge) calc(-1 * var(--text-shadow-size-double-xlarge)) var(--text-shadow-size-double-xlarge) black,
			calc(-1 * var(--text-shadow-size-double-xlarge)) calc(-1 * var(--text-shadow-size-double-xlarge)) var(--text-shadow-size-double-xlarge) black,
			var(--text-shadow-size-double-xlarge) 0px var(--text-shadow-size-double-xlarge) black,
			0px var(--text-shadow-size-double-xlarge) var(--text-shadow-size-double-xlarge) black,
			calc(-1 * var(--text-shadow-size-double-xlarge)) 0px var(--text-shadow-size-double-xlarge) black,
			0px calc(-1 * var(--text-shadow-size-double-xlarge)) var(--text-shadow-size-double-xlarge) black;
		font-weight: bold;
		text-align: center;
	}


	.billboard--caption--line2 {
		font-size: var(--font-size-xxlarge);
		text-shadow: var(--text-shadow-size-xxlarge) var(--text-shadow-size-xxlarge) var(--text-shadow-size-xxlarge) black;
	} 
/* } */

@media (orientation: portrait) {
	.billboard {
		height: calc(100vh * 0.8);
	}

	.no-webp section.billboard.home {
		background-image: url("../img/billboard-home-portrait_L-min.jpg");
	}

	.webp section.billboard.home {
		background-image: url("../img/billboard-home-portrait_L-min.webp");
	}
	
	.no-webp .billboard.reservation-flow {
		background-image: url("img/billboard-reservation-flow_P-min.jpg");
	}

	.webp .billboard.reservation-flow {
		background-image: url("img/billboard-reservation-flow_P-min.webp");
	}

	.no-webp .billboard.bridal-option {
		background-image: url("img/billboard-bridal-option_P-min.jpg");
	}

	.webp .billboard.bridal-option {
		background-image: url("img/billboard-bridal-option_P-min.webp");
	}

	.no-webp .billboard.venues-all {
		background-image: url("img/billboard-venues-all_P-min.jpg");
	}

	.webp .billboard.bridal-option {
		background-image: url("img/billboard-venues-all_P-min.webp");
	}

	.billboard .caption {
		text-align: center;
		margin-right: auto;
	}

	.billboard--caption--line1, .billboard--caption--line2 {
		padding-left: 0;
		padding-right: 0;
		width: 100%;
	}
	
	.billboard--caption--line1 {
		font-size: var(--font-size-xxlarge);
	}

	.billboard--caption--line2 {
		font-size: var(--font-size-medium);
	}
}
/* END Billboard */

/* Image Grid */
@media (min-width: 0px) {
	
	.image-gird--item {
		width: var(--image-grid-width);
		margin-bottom: var(--vertical-margin-single);
		margin-top: var(--vertical-margin-single);
	}
	
	.image-gird--item img {
		box-shadow: var(--horizontal-margin-eighth) var(--vertical-margin-eighth) 3px rgba(0,0,0,0.4);
		border-radius: var(--horizontal-margin-double);
	}

	.image-grid--item-image-with-overlay {
		position: relative;
	}
	
	.image-grid--item-image-overlay-text {
		/* color: #9EBFF8; */
		/* color: lemonchiffon; */
		color: #ffff99;
		font-weight: bold;
		text-shadow:
			var(--text-shadow-size-medium) var(--text-shadow-size-medium) var(--text-shadow-size-medium) black,
			calc(-1 * var(--text-shadow-size-medium)) var(--text-shadow-size-medium) var(--text-shadow-size-medium) black,
			var(--text-shadow-size-medium) calc(-1 * var(--text-shadow-size-medium)) var(--text-shadow-size-medium) black,
			calc(-1 * var(--text-shadow-size-medium)) calc(-1 * var(--text-shadow-size-medium)) var(--text-shadow-size-medium) black,
			var(--text-shadow-size-medium) 0px var(--text-shadow-size-medium) black,
			0px var(--text-shadow-size-medium) var(--text-shadow-size-medium) black,
			calc(-1 * var(--text-shadow-size-medium)) 0px var(--text-shadow-size-medium) black,
			0px calc(-1 * var(--text-shadow-size-medium)) var(--text-shadow-size-medium) black;
		position: absolute;
		top: var(--vertical-margin-quarter);
		left: var(--horizontal-margin-half);
	}
	
	.image-grid--item-caption {
		text-align: center;
	}

	.image-grid--item-caption.double-line {
		height: var(--vertical-margin-quadruple);
	}
	
	.image-grid--item-caption-longtext {
		font-size: var(--font-size-small);
	}
	
}

/* FB Slider */
@media (min-width: 0px) {
	
	.fbslider {
		display: flex;
	}
	
	.fbslider--prev-block, .fbslider--next-block {
		width: var(--horizontal-margin-double);
		display: inline-flex;
		justify-content: space-around;
		align-items: center;
	}

	.fbslider--prev-button, .fbslider--next-button {
		cursor: pointer;
	}
	
	.fbslider--prev-button {
		display: none;
	}
	
	.fbslider--prev-button-image, .fbslider--next-button-image {
		width: var(--font-size-xxlarge);
	}
	
	.fbslider--container {
		display: flex;
		width: var(--fbslider-width);
		height: var(--fbslider-height);  
		overflow: hidden;
	}

	.fbslider--content {
		min-width: 100%;
		min-height: 100%;
		box-sizing: border-box;
		
	}

	.fbslider--image {
		width: var(--fbslider-width);
		height: var(--fbslider-height);  
		object-fit: contain;
	}
	
}

@media (orientation: portrait) {
	.fbslider--prev-block, .fbslider--next-block {
		display: none;
	}
} /* End FB Slider */

/*  Testimonials  */
@media (min-width: 0px) {
	section.testimonials {
		text-align: center;
	}
	
	section.testimonials.wrapper {
		flex-direction: column;
		margin: 0 auto;
	}

	.testimonials h2 {
		color: #4e4e4e;
		font-size: var(--font-size-large);
		text-transform: uppercase;
		/* margin-bottom: var(--vertical-margin-quadruple); */
		letter-spacing: 1px;
	}

	.caroufredsel_wrapper {
		max-width: 1040px!important;
		margin: 0 auto!important;
	}

	.testimonials .testi-slider {
		max-width: 1040px!important;
		height: auto;
		overflow: hidden;
	}

	.testimonials .testi-slider .t {
		max-width: 1040px!important;
		text-align: center;
		float: left;
		height: auto;
	}

	.testimonials p {
		color: #8e8d8d;
		margin-top: var(--vertical-margin-single);
	}

	.testimonials h3.author {
		color: #686767;
		font-size: var(--font-size-small);
		font-weight: bold;
		margin-top: var(--vertical-margin-double);
	}

	.testimonials #t_navigation a{
		display: inline-block;
		width: 13px;
		height: 13px;
		background: #dadada;
		text-decoration: none;
		margin-right: 10px;
		margin-top: 40px;

		/* -webkit-border-radius: 100px; */
		/* -moz-border-radius: 100px; */
		/* -o-border-radius: 100px; */
		border-radius: 100px;
	}

	.testimonials #t_navigation a.selected {
		background: #bebebe;
	}
}
@media (orientation: portrait) {
	.testimonials p {
		text-align: left;
		padding-left: var(--horizontal-margin-single);
		padding-right: var(--horizontal-margin-single);
	}
}
/* END Testimonials */

/*  Sep Line */
@media (min-width: 0px) {
	.sep-line {
		display: block;
		width: var(--horizontal-margin-half);
		height: var(--vertical-margin-quintuple);
	}

	.sep-line:after {
		content: "";
		display: block;
		width: 1px;
		height: 100%;
		background: #dedede;
		margin: 0 auto;
	}

	.sep-top {
		border-bottom: 1px #dedede solid;
		margin: 0 auto var(--vertical-margin-double) auto;
	}

	.sep-bottom {
		border-top: 1px #dedede solid;
		margin: var(--vertical-margin-double) auto 0 auto;
	}
}

/*  Info Section  */
@media (min-width: 0px) {
	section.info {
		display: flex;
		width: 100%;
		overflow: hidden;
		background: #3b3b3b;
		margin-bottom: var(--vertical-margin-quarter);
	}

	.info-last {
		margin-bottom: 0;
	}

	.info-pic {
		display: block;
		width: 50%;
		height: calc(100vh * 0.4);
		/* float: left; */
		/* -webkit-background-size: cover; */
		/* -moz-background-size: cover; */
		/* -o-background-size: cover; */
		background-size: cover;
	}

	.info-pic.travel-agent {
		background-image: url("img/info_travel_agent-min.jpg");
		background-repeat: no-repeat;
	}

	.info-pic.hotel-intern {
		background-image: url("img/info_hotel_internship-min.jpg");
		background-repeat: no-repeat;
	}

	.info-details {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		width: 50%;
	}
	
	section.info .info-details > * {
		width: 80%;
	}

	section.info .info-details h3 {
		color: #fff;
		font-size: var(--font-size-large);
		font-weight: bold;
	}

	.info-details h3 a {
		font-size: var(--font-size-large);
		font-weight: bold;
		margin: 0;
	}

	section.info .info-details p {
		color: #ededed;
	}

	section.info .info-details > div {
		text-align: right;
	}

	.info-details a {
		color: #fff;
		text-decoration: none;
	}

	.info-details a span {
		margin-left: 10px;
	}
}

@media (orientation: portrait) {
	
	section.info {
		flex-direction: column;
	}
	
	.info-pic {
		width: 100%;
	}

	.info-details {
		width: 100%;
		padding: var(--vertical-margin-double) 0;
	}

	.info-pic.travel-agent {
		background-image: url("img/info_travel_agent-portrait-min.jpg");
		background-repeat: no-repeat;
	}

	.info-pic.hotel-intern {
		background-image: url("img/info_hotel_internship-portrait-min.jpg");
		background-repeat: no-repeat;
	}
	
	section.info .info-details h3 {
		text-align: center;
	}

	section.info .info-details p {
		margin-top: var(--vertical-margin-single);
	}
}	
/* END Info */


/*  CTA (Call To Action) Section  */
@media (min-width: 0px) {
	.cta {
		display: block;
		text-align: center;
		padding-top: var(--vertical-margin-quadruple);
	}

	.cta--line-1 {
		color: #6b6b6b;
		font-size: var(--font-size-xlarge);
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 1px;
		width: 90%;
		margin: auto;
	}

	.cta--line-2 {
		color: #7f7c7c;
		font-size: var(--font-size-large);
		margin-top: var(--vertical-margin-single);
		letter-spacing: .5px;
	}

	.cta--btn {
		display: inline-block;
		padding: 20px 60px;
		background-color: #65bf95;
		color: #fff;
		font-size: var(--font-size-large);
		text-decoration: none;
		margin-top: var(--vertical-margin-double);
		text-transform: uppercase;
		letter-spacing: 1px;
		/* -moz-border-radius: 1px; */
		/* -webkit-border-radius: 1px; */
		border-radius: 1px;
		transition:all .2s linear;
	}

	.cta--btn:hover {
		background: #56b086;
	}

	.cta--sep {
		display: block;
		width: 1px;
		height: var(--vertical-margin-quadruple);
		background: #dedede;
		margin: 0 auto;
	}
}
@media (orientation: portrait) {
	.cta--btn {
		padding-left: var(--horizontal-margin-double);
		padding-right: var(--horizontal-margin-double);
	}
}
/* END CTA */

/*  Standard Section  */
@media (min-width: 0px) {
	.section {
		width: 100%;
		overflow: hidden;
		margin-top: var(--vertical-margin-double);
		padding-top: var(--vertical-margin-double);
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.section.continued-from-above {
		margin-top: 0;
	}

	.section.section-listing {
		margin-left: 2%;
		width: 90%;
	}
	
	section.section a {
		color: black;
	}

	
	section h2 {
		padding-bottom: var(--vertical-margin-half);
	}
	
	.section-subsection {
		width: var(--wrapper-width);
	}

	.section-subsection.flexbox {
		display: flex;
		flex-wrap: wrap;
	}

	.section-subsection.multi-column {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
	}

	.section-subsection.title {
		margin-bottom: var(--vertical-margin-single);
		flex-wrap: wrap;
	}

	.section-subsection.title > .annotation {
		padding-left: var(--horizontal-margin-quadruple);
	}

	.section-subsection.annotation {
		margin-top: var(--vertical-margin-single);
	}

	.section-subsection.annotation * {
		font-size: var(--font-size-small);
	}

	.section-last {
		margin-bottom: 0;
	}

	.section-caption {
		display: block;
		width: 40%;
		/* -webkit-background-size: cover; */
		/* -moz-background-size: cover; */
		/* -o-background-size: cover; */
		background-size: cover;
	}

	.section-title {
		position: relative;
		display: block;
		font-weight: 600;
		color: #999999;
		margin-bottom: var(--vertical-margin-half);
		padding-left: var(--horizontal-margin-quadruple);
		letter-spacing: .5px;
		text-shadow: 1px 1px 2px var(--brand-color-1-light);
	}
	
	.section-title span {
		font-weight: 600;
		color: #999999;
		text-shadow: 2px 2px 3px var(--brand-color-1-light);
	}

	.section-title:before {
		position: absolute;
		left: 0;
		top: 0.425em;
		width: var(--horizontal-margin-triple);
		height: var(--vertical-margin-single);
		background-color: var(--brand-color-1);
		border-radius: 2px 2px 2px 2px;
		content: "";
	}

	.section-tagline {
		position: relative;
		color: #3c4858;
		font-size: var(--font-size-xlarge);
		font-weight: 500;
		margin-bottom: 2%;
	}

	.section-details {
		display: block;
		width: 60%;
		margin-left: 3%;
		/* float: left; */
		/* padding: 80px 0; */
	}

	.section.caption-right .section-details {
		margin-left: 0;
		margin-right: 3%;
	}

	.section.description-right .section-details {
		margin-left: 0;
		margin-right: 3%;
	}

	.section-details h3 {
		color: #fff;
		font-size: 30px;
		font-weight: bold;
		text-transform: uppercase;
		max-width: 560px;
		margin: 0 0 3.333333333333333% 40px;
		letter-spacing: 1px;
		line-height: 40px;
	}

	.section-details p {
		/* max-width: 560px; */
		/* margin: 0 0 3.333333333333333% 0; */
		letter-spacing: 1px;
	}

	.section-details a {
		color: #fff;
		font-size: 16px;
		margin: 0 0 0 40px;
		text-decoration: none;
	}

	.section-details a span {
		margin-left: 10px;
	}

	.section-flexbox {
		width: 68%;
		display: flex;
		justify-content: space-between;
	}

	/* Number of column is just determined by flex box based on the width of each item. */
	.section-flexbox-item.two-column {
		width: 46%;
	}

	.section-subsection.three-column .section-flexbox-item {
		width: 33%;
	}

	.section-flexbox-item.four-column {
		width: calc(100vw * 0.15);
		height: calc(100vw * 0.15);
	}

	.section-flexbox-item.five-column {
		width: calc(100vw * 0.12);
		height: calc(100vw * 0.12);
	}

	.section-subsection .table-row {
		display: flex;
		width: 100%;
		margin-bottom: 15px;
	}

	.section-subsection .table-head, .section-subsection .table-body {
		border-bottom-style: dashed;
		border-bottom-width: 2px;
		border-bottom-color: #679aef;
	}
		
	.section-subsection .table-head {
		display: inline-flex;
		align-items: center;
		padding-left: var(--horizontal-margin-half);
		width: 10%;
		background-color: var(--brand-color-1-transparent);
	}

	.section-subsection .table-body {
		padding-left: var(--horizontal-margin-single);
	}

	.section-subsection .table-body span {
		display: block;
	}

	.section-subsection .table-body span p:first-child {
		margin-top: 0;
	}
} /* END @Media All */

@media (orientation: landscape) and (min-width: 961px) {
	.section-subsection .table-head {
		width: 30%;
	}
	.section-subsection .table-body {
		width: 90%; /* Header:Body width ration is set to 10:90 as default for landscape screen. */
	}
} /* @media landscape */

@media (orientation: portrait) {
	
	.section {
		padding-top: var(--vertical-margin-double);
	}

	section.section .wrapper {
		flex-direction: column;
		align-items: center;
	}

	.section.section-listing {
		margin-left: auto;
		margin-right: auto;
	}
	
	.section-title {
		padding-left: 0px;
		margin-left: 3%;
		margin-right: 3%;
	}

	.section-title:before {
		top: calc(-1 * var(--vertical-margin-single));
		left: -3%;
	}
	
	.section-subsection {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.section-subsection.title {
		justify-content: start;
	}

	.section-subsection.title > .annotation {
		padding-left: 3%;
	}

	.section-subsection > div, .section-subsection > form {
		/* width: 90%!important; */
		width: 90%;
	}

	.section-subsection.one-column-for-portrait {
		flex-direction: column;
	}	

	.section-subsection.one-column-for-portrait .section-flexbox-item {
		width: 90%;
	}	

	.section-flexbox-item.four-column { /* four becomes two on portrait screen */
		width: calc(100vw * 0.45);
		height: calc(100vw * 0.45);
	}
	
	.section-flexbox-item.one-column-for-portrait {
		width: calc(100vw * 0.9);
	}

	.section-caption {
		width: 100%;
		height: auto;
		order: 1;
	}

	.section-tagline {
		margin: 0 0;
	}

	.section-details {
		width: 100%;
		height: auto;
		padding: 20px 0;
		margin-left: 0;
		order: 2;
	}

	.section.caption-right .section-details {
		margin-right: 0;
	}

	.section.description-right .section-details {
		margin-right: 0;
	}
	
	.section-details h3,
	.section-details p,
	.section-details a {
		font-size: 16px;
		display: block;
		text-align: left;
	}

	.section-details h3,
	.section-details a {
		margin: 0 auto;
	}

	.section-details p,
	
	.section-subsection.annotation {
		/* width: 90%; */
	}
	
	.section-subsection.tabular {
		flex-direction: column;
		align-items: center;
	}

	.section-subsection .table-row {
		margin-left: 0;
		flex-direction: column;
	}
	
	.section-subsection .table-head {
		width: 60%;
		border-bottom-style: none;
		background-color: inherit;
		font-weight: bold;
	}

	.section-subsection .table-body span {
		margin-bottom: 15px;
	}


} /* END @Media Portrait */

/* Image Slider */
@media (min-width: 0px) {
	.slider {
		width: 100%;
		overflow: hidden;
		padding-top: var(--vertical-margin-quadruple);
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
	}

	.slider-inner {
		display: flex;
		justify-content: center;
		padding-top: 20px;
	}

	.flex-caption {
		width: 98%;
		padding: 2%;
		left: 0;
		bottom: 0;
		background: var(--brand-color-1);
		color: #fff;
		text-shadow: 0 -1px 0 rgba(0,0,0,.3);
		font-size: var(--font-size-small);
		font-family: 'M PLUS Rounded 1c', san-serif;
	}
}

@media (orientation: landscape) {
	.slider-caption, .slider-inner {
		width: var(--wrapper-width);
	}

	.flexslider {
		width: 80%;
	}
}

@media (orientation: portrait) {
	.slider-caption {
		width: 100%;
	}
	
	.slider-inner {
		width: 80%;
	}

	.flexslider {
		width: 100%;
	}

	.flex-caption {
		font-size: 12px;
	}
}	

/* END Image Slider */

/* Enrollment Conditions */
@media (min-width: 0px) {
	.enrollment-conditions div:nth-child(1) {
		background: url("img/circle-light-green-fading.svg") no-repeat center center;
	}

	.enrollment-conditions div:nth-child(2) {
		background: url("img/circle-light-yellow-fading.svg") no-repeat center center;
	}

	.enrollment-conditions div:nth-child(3) {
		background: url("img/circle-light-blue-fading.svg") no-repeat center center;
	}

	.enrollment-conditions div:nth-child(4) {
		background: url("img/circle-light-red-fading.svg") no-repeat center center;
	}

	.enrollment-cond {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		font-size: var(--font-size-large);
		text-align: center
	}
}
/* END Enrollment Conditions */

/* Feature */
@media (min-width: 0px) {
	.section.feature {
		background: #f7f7f7;
		padding-bottom: var(--vertical-margin-double);
	}
	
	.section.feature .section-flexbox-item {
		display: flex;
	}

	.section.feature .section-subsection {
		margin-top: var(--vertical-margin-single);
	}

	.feature .ficon {
		display: block;
		/* width: 18.78612716763006%; */
		float: left;
		margin-right: var(--horizontal-margin-single);
	}

	.feature .ficon img {
		width: var(--icon-size-large);
		height: var(--icon-size-large);
	}

	.feature .details-exp .more-details {
		display: none;
	}

	.feature .details-exp {
		display: block;
		width: 76%;
		float: left;
	}

	.feature h3 {
		margin-bottom: var(--vertical-margin-single);
		color: #767575;
		font-size: var(--font-size-medium);
		font-weight: bold;
		letter-spacing: 1px;
	}

	.feature p {
		margin-bottom: var(--vertical-margin-single);
		color: #767575;
	}

}

@media (orientation: landscape) {
	.section.feature .section-subsection {
		align-items: stretch;
	}

	.section.feature .section-subsection div.section-flexbox-item:nth-child(2) {
		justify-content: center;
	}

	.section.feature .section-subsection div.section-flexbox-item:nth-child(3) {
		justify-content: flex-end;
	}
}

@media (orientation: portrait) {
	.section.feature .section-subsection {
		align-items: center;
	}
	
	.section.feature .section-flexbox-item {
		justify-content: flex-start;
		margin-top: var(--vertical-margin-double);
	}

	.section.feature .section-subsection > div {
		margin-top: var(--vertical-margin-double);
	}
	.section.feature .section-subsection > div:first-child {
		margin-top: 0;
	}

	.feature .details-exp {
		width: 82%;
	}
}
/* END Feature */

/* Flow Diagram */

/* @media (min-width: 0px) { Comment for enabling css-vars-ponyfill */
	
	body {
		counter-reset: icon;
	}

	.section-subsection.flow-diagram {
		/* flex-wrap: nowrap; */
	}

	/* This technic did not work for IE11. Place div tag directly in HTML code */
	/*
	.section-subsection.flow-diagram:after {
		content: '';
		width: 100%;
	}
	.section-subsection.flow-diagram > *:nth-child(n + 11) {
		order: 1;
	}
	*/
	
	/* This works like insrting padding. */
	.flow-diagram--wrap-here {
		width: 100%;
	}

	.flow-diagram--step {
		width: var(--flow-diagram-step-width)!important;
		height: var(--flow-diagram-step-height)!important;
		border: 2px solid var(--brand-color-1);
		border-radius: var(--font-size-large);
		font-size: var(--font-size-for-diagram);
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		position: relative;
	}
	
	.flow-diagram--step:after {
		counter-increment: icon;
		content: counter(icon);
		position: absolute;
		display: block;
		width: var(--horizontal-margin-double);
		height: calc(var(--horizontal-margin-double) - 1px);
		padding: 1px 0 0;
		text-align: center;
		font-size: var(--font-size-large);
		line-height: calc(var(--horizontal-margin-double) - 1px);
		color: #fff;
		background: #4d4d4d;
		border-radius: 51%;
		top: calc(-1 * var(--horizontal-margin-single));
		left: calc(-1 * var(--horizontal-margin-single));
	}

	
	.flow-diagram--step-div-upper, .flow-diagram--step-div-lower {
		width: 100%;
		height: 50%;
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
  
  .flow-diagram--step-div-lower {
		background-color: var(--brand-color-1);
		border: 2px solid var(--brand-color-1);
		border-radius: 0 0 var(--font-size-large) var(--font-size-large);
		margin-left: -2px;
		margin-top: -2px;
		color: white;
	}
		
	.flow-diagram--step-icon {
		width: calc(var(--flow-diagram-step-width) / 3.3);
		height: calc(var(--flow-diagram-step-width) / 3.3);
	}
	
	.flow-diagram--step:hover .flow-diagram--step-div-lower {
		background-color: var(--brand-color-1-light);
		border-top-color: var(--brand-color-1-light);
	}

	.flow-diagram--step:hover .flow-diagram--step-icon {
		transform: scale(1.4);
		opacity: 0.6;
		transition: all .2s linear;
	}

	.flow-diagram--forward-sign.only-for-landscape {
		width: var(--vertical-margin-double);
	}

	.flow-diagram--forward-sign.only-for-portrait {
		width: var(--vertical-margin-double);
	}

	.flow-diagram--forward-sign.only-for-mobile {
		/* display: none; */
	}
/* } */


@media (orientation: portrait) {
	.flow-diagram--step-icon {
		width: calc(var(--flow-diagram-step-height) / 2.5);
		height: calc(var(--flow-diagram-step-height) / 2.5);
	}
}



@media (orientation: landscape) {
	/* .flow-diagram--step:nth-child(8) { */
	.flow-diagram--step {
		margin-top: var(--vertical-margin-single);
		margin-bottom: var(--vertical-margin-single);
	}
}
/**** END Flow Diagram ****/

/**** BGN Flow Step    ****/

/* @media (min-width: 0px) { Comment for enabling css-vars-ponyfill */
	.wrapper.flow-step {
		align-items: flex-start;
	}
	.section-details.flow-step {
		width: 40%;
	}
/* } */
@media (orientation: portrait) {
	.section-details.flow-step {
		width: 100%;
	}
}
/**** END Flow Step    ****/

/**** BGN Bisec or Sie-by-side Section ****/
/* @media (min-width: 0px) { Comment for enabling css-vars-ponyfill */
	.bisec .wrapper {
		align-items: flex-start;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.bisec--title {
		width: 100%;
	}
	
	.bisec--caption-right-bottom .section-details {
		order: 3;
	}

	.bisec--caption-right-bottom .section-caption {
		order: 4;
	}
	
	.bisec--caption-left-bottom .section-details, .bisec--caption-left-bottom .bisec--title-padding {
		order: 4;
	}

	.bisec--caption-left-bottom .section-caption, .bisec--caption-left-bottom .bisec--title {
		order: 3;
	}
/* } */
	
@media (orientation: landscape) {

	.bisec--caption-left-bottom .bisec--title, .bisec--caption-right-bottom .bisec--title-padding {
		order: 1;
	}
	
	.bisec--caption-right-bottom .bisec--title, .bisec--caption-left-bottom .bisec--title-padding {
		order: 2;
	}

	.bisec .section-details, .bisec--title-padding {
		width: 46%;
		margin-left: 1%;
		margin-right: 1%;
	}

	.bisec .section-caption, .bisec--title {
		width: 46%;
		margin-left: 1%;
		margin-right: 1%;
	}
}

@media (orientation: portrait) {
	
	.bisec .section-details {
		padding: 0;
	}

	.bisec--title {
		width: 100%;
	}

	.bisec--title-padding {
		width: 0%;
		height: 0px;
	}
	
	.bisec--title .section-title {
		margin: 0;
	}
	
	.bisec--title .section-title:before {
		left: 0;
	}
	
	.bisec--caption-left-bottom .section-details {
		order: 1;
	}

	.bisec--caption-left-bottom .section-caption {
		order: 2;
	}
}
/**** END DI Section ****/


/* Package Details */
@media (min-width: 0px) {

	.section-subsection.package-details--main {
		align-items: flex-start;
	}

	.package-details--item {
		display: flex;
		margin-bottom: var(--vertical-margin-single);
	}
	
	.package-details--item-icon-block {
		width: 10%;
		margin-right: 2%;
	}
	
	.package-details--item-icon {
		width: 80%;
	}
	
	.package-details--item-content-block {
		width: 88%;
	}
	
	.package-details--price {
		color: var(--brand-color-1-dark);
		font-size: var(--font-size-large);
		font-weight: bold;
	}
	
	.package-details--included {
		display: flex;
		flex-wrap: wrap;
	}
	
	.package-details--included-item-true {
		border: 2px solid var(--brand-color-blue-light);
		border-radius: 4px;
		padding-right: var(--horizontal-margin-quarter);
		padding-left: var(--horizontal-margin-quarter);
		margin: var(--horizontal-margin-quarter);
	}
	
	.package-details--included-remarks {
		margin-top: var(--vertical-margin-half);
	}
	
}

@media (orientation: portrait) {
	.section-subsection.package-details--main {
		align-items: center;
	}
}
/* END Package Details */

/* Schedule */
@media (min-width: 0px) {
	.package-schedule--table {
		width: 90%;
		background: url(img/schedule-background_L-min.jpg) no-repeat center center;
		background-size: cover;
		border-collapse: separate;
		padding-left: var(--horizontal-margin-double);
		padding-right: var(--horizontal-margin-single);
		padding-top: var(--vertical-margin-double);
		padding-bottom: var(--vertical-margin-double);
	}

	.package-schedule--table td {
		padding-top: var(--vertical-margin-half);
	}

	.package-schedule--time {
		padding-right: 1em;
	}
}
@media (orientation: portrait) {
	.section-subsection.package-details--main {
		align-items: center;
	}
	
	.package-schedule--table {
		width: 100%;
	}
	
	.package-schedule--annotations {
		margin-top: var(--vertical-margin-double);
	}
}
/* For mobile (portrait and landscape) */
@media (orientation: portrait), (max-width: 960px) and (min-aspect-ratio: 16/11) {
	.package-schedule--table {
		background: url(img/schedule-background_S-min.jpg) no-repeat center center;
	}
}

/* END Schedule */

/* Certificate */

.certificate img {
	width: 45%;
}

.hotel-internship .certificate img {
	width: 100%;
}

.certificate-image {
	background: url(img/certificate-border-min.png) no-repeat center center;
	background-size: cover;
}
/* END Certificate */
	

/* Listing */
@media (min-width: 0px) {
	
	.price-list--caption {
		margin-bottom: var(--vertical-margin-single);
	}

	.price-list-item {
		display: flex;
		width: 100%;
		padding-left: var(--horizontal-margin-single);
		margin-bottom: var(--vertical-margin-double);
	}

	.product-name, .product-price {
		border-bottom-style: solid;
		border-bottom-width: 2px;
		border-bottom-color: var(--brand-color-1);
		padding-left: var(--horizontal-margin-single);
	}

	.product-name {
		width: 70%;
	}

	.product-price {
		width: 22%;
	}
}

@media (orientation: landscape) {
	.section-subsection.price-list {
		width: 60%
	}	
	
	.product-price {
		text-align: right;
		padding-right: var(--horizontal-margin-single);
	}
}

@media (orientation: portrait) {
	.section-subsection.price-list {
		justify-content: center;	
	}
	
	.price-list-item {
		width: 90%;
		padding-left: 0;
	}
	
	.product-name {
		width: 62%;
		padding-left: 0;
	}

	.product-price {
		display: flex;
		align-items: center;
		width: 38%;
		padding-left: 0;
	}
}	
/* END Price List */

/* Company Info */
/* END Company Info */

/* Greetings from CEO */
@media (min-width: 0px) {
	.ceo-name {
		text-align: right;
	}
}
/* END Greetings from CEO */

/* Form General */

@media (min-width: 0px) {

	input[type="text"].date-ja-yyyymd {
		width: 9em;
	}

	.section.form {
		padding-top: var(--vertical-margin-single);
	}

	.section.form form {
		margin-top: var(--vertical-margin-single);
	}

	.section.form span.radio-button {
		display: inline;
		border: 2px none #ccc;
		border-radius: 4px;
		background-color: #f8f8f8;
		padding-right: var(--horizontal-margin-half);
	}

	.section.form .mandatory {
		color: red;
		vertical-align: super;	
	}

	.section.form .missed-mandatory {
		border-color: red;
	}
	
	.section.form span.radio-button.missed-mandatory {
		border-color: red;
		border-style: solid;
	}

	.section.form .section-subsection .table-head, .section.form .section-subsection .table-body {
		border-bottom-style: none;
	}

	.section.form .table-head {
		font-weight: bold;
	}
	
	.section.form .submit-button {
		width: 100%;
		text-align: center;
	}
	
} /* @media all */

@media (orientation: portrait) {
	.section.form .table-body {
		padding-left: 0;
	}
} /* @media portrait */

/* END Form General */

/* Contact Form */
@media (orientation: landscape) {
	.section.form.contact .section-subsection .table-head {
		width: 18%;
	}
	.section.form.application .section-subsection .table-head {
		width: 24%;
	}
}

@media (orientation: portrait) {
	.section.form.contact {
		padding-top: 0;
		margin-top: 0;
	}
	.section.form.contact .section-subsection .table-head {
		width: 100%;
	}
	.section.form.application .section-subsection .table-head {
		width: 55%;
	}
}
/* END Contact Form */

/*  Footer  */
@media (min-width: 0px) {
	footer {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: var(--vertical-margin-quintuple) 0;
		border-top: 1px #dedede solid;
		background: grey;
		text-align: center;
		margin-top: var(--vertical-margin-double);
	}
	
	footer .logo {
		width: var(--header-logo-width);
		height: calc(var(--header-logo-width) * 86 / 98);
		filter: var(--filter-to-brand-color-1);
	}
	
	footer div, footer a {
		font-size: var(--font-size-small);
	}
	
	footer .sitemap {
		margin-top: var(--vertical-margin-double);
	}
	
	footer .sitemap a {
		margin-right: var(--horizontal-margin-half);
		margin-left: var(--horizontal-margin-half);
		margin-top: var(--vertical-margin-half);
		margin-bottom: var(--vertical-margin-half);
	}

	footer .rights {
		color: #EBEBEB;
		/* font-size: var(--font-size-small); */
		margin-top: 30px;
	}

	footer .rights a {
		text-decoration: none;
		font-weight: bold;
		color: #3b3b3b;
	}
}


/*  Responsive code  */

@media (max-width:800px){

	ul.social{
		display: none;
	}

}

@media (orientation: portrait) {
	.enrollment-cond {
		font-size: 20px;
	}	
}