/** Header styling [START]*/

.lang_flag{
	margin-top: 2px;
	margin-right: 3px;
}

.lang_flag:hover{
	opacity: 0.7;
	max-height: 17px !important;
	margin-top: 0px;
	margin-right: 0px;
}

.lang_flag:active{
	opacity: 0.5;
	margin-top: 0px;
}

.menu_button {
	width: 16vw;
    height: 16vw;
    border-radius: 50%;
    background-color: #F19CAD;
    position: absolute;
    top: -6vw;
	right: -3vw;
	min-width: 65px;
    min-height: 65px;
}

.menu_button p{
	cursor: default;
    color: #FFFFFF;
    position: relative;
    height: fit-content;
    top: 5vw;
    right: -2vw;
	font-size: 3vw;
	/* unselectable */
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-o-user-select:none;
	user-select:none;
}

#displayname{
	position: absolute;
    top: 1vw;
	left: 1vw;
	font-size: calc(.4em + .5vw );
}

#logout{
	position: absolute;
    top: 1vw;
    right: 1em;
}

.header{
	padding: 1vw 0vw;
    position: fixed;
    top: 0;
	width: 100%;
	z-index: 10;
    min-height: 30px;
    background-color: #FFFFFF;
}

/*Strip the ul of padding and list styling*/
.header ul {
    list-style-type:none;
    margin:0;
    padding:0;
	position: static;
	display: none;
}
/*Create vertical spacing*/
.header li {
    display:inline-block;
}
/*Make all menu links full width*/
.header ul li, li a {
	width: 100%;
}
.header #menu {
	z-index: 100;
	width: 200px;
	margin-right: 0;
    margin-left: auto;
	margin-top: 20px;
	right: 0;
	position: fixed;
	background-color: #FF7699;
	padding-top: 0px;
	transition-property: all;
	transition-duration: 1.2s;
	/* transition-timing-function: cubic-bezier(0, 1, 0.5, 1); */
	max-height: 0px;
	height: fit-content;
	overflow-y: hidden;
	display: inline-block;
}

/*Style for menu links*/
.header li a {
    display:block;
	height: 50px;
    text-align: center;
	line-height: 50px;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    color: #ffffff;
    background: #F19CAD;
	text-decoration: none;
}


/*Hover state for top level links*/
.header li:hover a {
	/* background: #ef6e88; */
	/* -webkit-box-shadow:  inset 0 0 50px #ef6e88;
	-moz-box-shadow: inset 0 0 50px #ef6e88;
    box-shadow: inset 0 0 50px #ef6e88;
    text-shadow: 2px 2px 8px #000000; */
    border: 2px solid #FF7699;
    color: #FF7699;
    background-color: #FFFFFF;
	-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
	width: -webkit-fill-available;
}

.header li:active a {
	/* -webkit-box-shadow:  inset 0 0 30px #ad5d6d;
	-moz-box-shadow: inset 0 0 30px #ad5d6d;
	box-shadow: inset 0 0 30px #ad5d6d;
	background-color: #ef6e88; */
	-webkit-box-shadow: inset 0 1px 31px rgba(255, 153, 204, 0.2), 0px 2px rgba(255, 255, 255, 0.4);
	-moz-box-shadow: inset 0 1px 31px rgba(255, 153, 204, 0.2), 0px 2px rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 1px 31px rgba(255, 153, 204, 0.2), 0px 2px rgba(255, 255, 255, 0.4);
}

/*Style for dropdown links*/
.header li:hover ul a {
    background: #FFDBE2;
    color: #000000;
	height: 50px;
	line-height: 50px;
}
/*Hover state for dropdown links*/
.header li:hover ul a:hover {
    background: #ef6e88;
    color: #fff;
}
/*Hide dropdown links until they are needed*/
.header li ul {
    display: none;
}
/*Make dropdown links vertical*/
.header li ul li {
    display: block;
    float: none;
}
/*Prevent text wrapping*/
.header li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
    white-space: nowrap;
}
/*Display the dropdown on hover*/
.header ul li a:hover + .hidden, .hidden:hover {
	z-index: 100;
	display: block;
}
/*Hide checkbox*/
.header input[type=checkbox]{
    display: none;
}
/*Show menu when invisible checkbox is checked*/
.header input[type=checkbox]:checked ~ #menu{
	max-height: 800px;
}

.sp_menu_anchor {
	display: none;
}

.sp_menu {
	display: none;
}

/*Responsive Styles*/
@media screen and (max-width : 760px){
	.header{
		display: none !important;
	}
	.body{
		position: initial !important;
	}
	.sp_menu_anchor {
		height: 0px;
		margin: 0;
		padding: 0;
		display: block;
	}
	.sp_menu {
		background: #FF7699;
		margin: 0;
		z-index: 100;
		height: 55px;
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		width:100%;
		display: block;
		padding-top: 5px;
		display: inline-flex;
		/* delete for moving header  */
		position: fixed;
		bottom: 13px;
	}
	.sp_menu > a {
		color: #FFFFFF;
		text-decoration: none;
		/* line-height: 50px;
		width: 100%; */
	}

	.sp_menu_seperator{
		width: 10px;
		height: 10px;
		margin-top: auto;
		margin-bottom: auto;
	}

	.sp_menu #sp_submenu {
		z-index: 100;
		width: 100%;
		margin-top: 0;
		right: 0;
		background-color: #FF7699;
		padding-top: 0px;
		transition-property: all;
		transition-duration: 1.2s;
		max-height: 0px;
		overflow-y: hidden;
		display: flex;
		position: absolute;
		/* delete for moving header  */
		bottom: 55px;
		margin-bottom: 0;
	}
	/*Hide checkbox*/
	.sp_menu input[type=checkbox]{
		display: none;
	}

	/*Show menu when invisible checkbox is checked*/
	.sp_menu input[type=checkbox]:checked ~ #sp_submenu{
		max-height: 80px;
	}
	.sp_menu ul li {
		display:block;
		list-style-type:none;
		margin: auto;
		padding:0;
		position: static;
		margin-bottom: 10px;
	}
	/*Style for menu links*/
	.sp_menu li a {
		display:block;
		text-align: center;
		font-family: 'M PLUS Rounded 1c', sans-serif;
		color: #ffffff;
		background: #FF7699;
		text-decoration: none;
		font-size: 12px;
		border-bottom: .5px solid #FFFFFF;
	}
	/*Hover state for top level links*/
	.sp_menu li:hover a {
		/* background: #ef6e88; */
		text-shadow: 2px 2px 8px #000000;
	}

	.sp_menu li:active a {
		-webkit-box-shadow:  inset 0 0 30px #ad5d6d;
		-moz-box-shadow: inset 0 0 30px #ad5d6d;
		box-shadow: inset 0 0 30px #ad5d6d;
		background-color: #ef6e88;
	}

	.sp_menu a img {
		width : 10px;
		height : 10px;
		margin: -4px auto;
		-webkit-filter: drop-shadow(2px 3px 3px rgba(0,0,0,0.4));
		filter: drop-shadow(2px 3px 3px rgba(0,0,0,0.4));
	}
	.sp_menu a:hover img {
		-webkit-filter: drop-shadow(2px 3px 3px rgba(256,256,256,0.4));
		filter: drop-shadow(2px 3px 3px rgba(256,256,256,0.4));
	}
	.sp_menu a:active img {
		-webkit-filter: none;
		filter: none;
	}

	.sp_menu a img {
		width : 35px;
		height : 35px;
		/* margin: auto; */
		margin-top: auto;
	}
	.sp_menu a div{
		/* display: inline-grid; */
		display: inline-block;
		margin: auto 10px;
	}
	.sp_menu a span{
		/* line-height: 20px; */
		text-shadow: 2px 3px 3px rgba(0,0,0,0.4);
	}
	.sp_menu a:hover span{
		text-shadow: 2px 3px 3px rgba(256,256,256,0.4);
	}
	.sp_menu a:active span{
		text-shadow: none;
	}
}

@media (min-width: 1300px) {
	.menu_button {
		top: -70px;
		right: -30px;
		width: 200px;
		height: 200px;
	}
	.menu_button p{
		top: 55px;
		right: -30px;
		font-size: 38px;
	}
}

/** Header styling [END]*/

/** Body styling [START]*/

.body {
	position: fixed;
    width: 100%;
	bottom: 13px;
	top: 7vw;
	overflow-y: auto;
	/* padding: 6px; */
	overflow-y: scroll; /* has to be scroll, not auto */
	-webkit-overflow-scrolling: touch;
}

/** Body styling [END]*/


/** Footer_Menu styling [START]*/

.footer_menu_seperator{
    width: 1.5vw;
}

.footer_menu_container {
	background-color: #FF7699;
    width: 100%;
	position: relative;
    left: 0;
    right: 0;
    margin-right: auto;
	margin-left: auto;
}

/*Strip the ul of padding and list styling*/
.footer_menu_container ul {
    list-style-type:none;
    margin:0;
    padding:0;
	background-color: #FF7699;
}

.footer_menu_container #footer_menu{
    margin-left: auto;
    margin-right: auto;
	width: fit-content;
	left: 0;
	right: 0;
	/* margin-top: 3vw; */
	padding-top: 1vh;
	text-align: center;
	border-bottom: 1px solid #FFFFFF;
}

/*Create a horizontal list with spacing*/
.footer_menu_container li {
    display:inline-block;
	margin-right: 1px;
	padding: 0 12px;
}
/*Style for menu links*/
.footer_menu_container li a {
    display:block;
    /* min-width: 10vw; */
    height: 3vw;
    text-align: center;
    line-height: 3vw;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    color: #ffffff;
	text-decoration: none;
	font-weight: 900;
}

.footer_menu_container li:hover a {
	/* background: #ef6e88; */
	text-shadow: 2px 2px 8px #000000;
}

.SNS_Icons{
	/* width:32px;
    margin: 16px; */
    width: 26px;
    margin: 22px;
}

.SNS_Icons:hover{
	-webkit-filter: drop-shadow(4px 4px 4px #FAC8D0);
	filter: drop-shadow(4px 4px 4px #FAC8D0);
}

.flag_container{
	display:inline;
	position: absolute;
	bottom: 13px;
	right: 1em;
	cursor: default;
}

@media screen and (max-width : 760px){
	.footer_menu_container{
		padding-bottom: 40px;
		/* delete for moving header  */
		padding-bottom: 100px;
	}
	/* delete for moving header  */
	.flag_container{
		bottom: 78px;
	}
}
/** Footer_Menu styling [END]*/

/** Copyrigth_Footer styling [START]*/

.Copyright_footer{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
	bottom: 0;
	background-color: #FF7699;
	z-index: 100;
}

.Copyright{
	margin-right:auto;
	margin-left:auto;
	text-align:center;
	white-space: nowrap;
}

.Copyright p{
	margin: 0;
	font-size: 8px;
	color: #FFFFFF;
}

/** Copyright_Footer styling [END]*/