@import url('wayfinding.css');

:root
{
	--orange:#f47932;
	--green:#3d8c73;
	--light:#dadada;
	--dark:black;
	--white:white;
	
}

html
{
}
body
{
	margin:0;
	padding:0;
	
	background:#fefefe url(../media/noise.png) repeat 0 0;
	
	font-family:WayfindingSansPro, sans-serif;
	font-size:18px;
	line-height:26px;
	color:black;
}
body *
{
	box-sizing: border-box;
  -moz-box-sizing: border-box;
}

#modal
{
	display:none;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:rgba(30,30,30,.8);
	
	font-size:22px;
	line-height:26px;
	color:white;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
	z-index:1000;
}
#modal.active
{
	display:block;
}
#modal > .dialogue
{
	position:absolute;
	left:50%;
	top:50%;
	margin:auto;

	width:600px;
	max-width:90%;
	
	text-align:center;
	
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
}
#modal a
{
	color:white;
	text-decoration:none;
	border-bottom:1px solid white;
}

#page-header
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:420px;

	transition:background-color .4s linear 0s;
	-webkit-transition:background-color .4s linear 0s;
	
	background:#d9d9d9 url(../media/noise.png) repeat 0 0;
	
	z-index:1000;
}
#page-header.fixed
{
	position:fixed;
	height:45px;
}
#page-header.fixed #slides
{
	display:none;
}


#page-header.orange,
.label.orange
{
	background-color:#f47932;
}
#page-header.fixed.orange,
.label.fixed.orange
{
	background-color:rgba(244,121,50,.9);
}
#page-header.green,
.label.green
{
	background-color:#3d8c73;
}
#page-header.fixed.green,
.label.fixed.green
{
	background-color:rgba(61,140,115,.9);
}

#logo
{
	position:fixed;
	width:40px;
	height:35px;
	margin:5px 10px;
	background:transparent url(../media/lexilogia-logo-small.svg) no-repeat 0 0;
	z-index:1001;
}
#logo:hover
{
	background-position:0 100%;
}
#world
{
	position:absolute;
	left:0;
	width:100%;
	bottom:0;
	overflow:hidden;
}
#language
{
	position:absolute;
	right:15px;
	bottom:4px;
	font-size:14px;
	text-decoration:none;
	color:#666666;
	z-index:1001;
}
#language:hover
{
	color:black;
}
#course-login
{
	position:absolute;
	right:15px;
	top:10px;
	font-weight:bold;
	z-index:1001;
	text-decoration:none;
}

#page-menu
{
	position:absolute;
	margin:0;
	padding:0;
	list-style:none;
	/* left:50%; */
	width:100%;
	left:0;
	bottom:0;

/* 
	transform:translateX(-50%);
	-webkit-transform:translateX(-50%);
 */
 
 	text-align:center;
	
	font-weight:bold;
	font-size:20px;
	line-height:35px;
	
	z-index:1000;
}
#page-menu li
{
	display:inline-block;
	margin:0 15px;
}
#page-menu li:first-child
{
	margin-left:80px;
	padding-left:40px;
}
#page-menu li svg
{
	float:left;
	margin:-2px 5px 0 0;
}
#page-menu li svg rect
{
	fill:white;
}
#page-menu li.login
{
	margin-right:80px;
}
#page-menu li.expand
{
	display:none;
}
#page-menu li a,
#page-menu li.login a:hover
{
	outline:none;
	text-decoration:none;
	text-shadow:none;
	color:black;
}
#page-menu li a:hover,
#page-menu li.selected a,
#page-menu li.login a,
#page-header #language:not(:hover),
#course-login
{
	color:white;
	text-shadow:1px 1px 1px rgba(0,0,0,.4);
}

#page-body
{
	position:relative;
	margin:420px auto 0 auto;
	/* padding-top:20px; */
	width:90%;
	max-width:900px;
}
#page-body a:not(.button),
#page-footer a:not(.facebook)
{
	color:black;
	text-decoration:none;
	border-bottom:1px solid black;
}

#page-footer
{
	position:relative;
	clear:both;
	font-size:14px;
	text-align:center;
	padding:20px 0;
}
#page-footer a.facebook
{
	display:inline-block;
	vertical-align:middle;
	width:22px;
	height:22px;
	background:#d9d9d9 url(../media/facebook.svg) no-repeat 50% 50%;
}
#page-footer a.facebook:hover
{
	background-color:#000;
}
#page-footer a:not(.facebook)
{
	color:#666666;
	border-color:#666666;
}
#page-footer a:not(.facebook):hover
{
	color:black;
	border-color:black;
}
#page-body .logo
{
	padding-top:40px;
	text-align:center;
}
#page-body .logo > img
{
	display:block;
	margin:0 auto;
	width:219px;
	height:118px;
	
	width:248px;
	height:131px;
}

#quotes
{
	position:relative;
}
#quotes blockquote:not(.active)
{
	display:none;
	opacity:.2;
}
blockquote,
#page-body section > ul
{
	color:#3d8c73;
	font-size:22px;
	line-height:30px;
	font-weight:bold;
	text-align:center;
	padding:0 14%;
	margin:40px 0;
}
#page-body blockquote a
{
	color:#3d8c73 !important;
	border-bottom:1px solid #3d8c73 !important;
}


#page-body section > ul
{
	text-align:left;
	list-style:none;
}
#page-body section > ul li
{
	position:relative;
	margin:15px 0;
}
#page-body section > ul li:before
{
	content:'>';
	position:absolute;
	left:-15px;
	top:0;
}

#page-body > section:first-child
{
	padding-top:10px;
}
#page-body h1
{
	text-align:center;
	/* padding:40px 0 20px 0; */
	margin:4rem 0 2rem 0;
	min-height:45px;
	
	position:sticky;
	top:45px;
	z-index:900;
}
#page-body .subtitle
{
	text-align:center;
	font-size:16px;
	font-style:italic;
	color:#666666;
}
.label
{
	display:inline-block;
	margin:auto;
	padding:0 15px;
	
	font-size:18px;
	line-height:45px;
	font-weight:bold;
	color:white;
	text-shadow:1px 1px 1px rgba(0,0,0,.4);
}
.label.fixed
{
	position:fixed;
	left:50%;
	top:45px;
	
	transform:translateX(-50%);
	-webkit-transform:translateX(-50%);
	
	z-index:900;
	white-space:nowrap;
}

#page-body .header
{
	display:inline-block;
	position:relative;
	left:50%;
	transform:translateX(-50%);
	-webkit-transform:translateX(-50%);

	border-bottom:1px solid #f47932;
	color:#f47932;
	font-weight:bold;
}

.cms-inline-media
{
	position:relative;
	transition:opacity .6s ease 0s;
}
.cms-inline-media:not(.in-view)
{
	opacity:0;
}
.cms-inline-media-thumb
{
	display:none;
}
.embed-wrapper iframe
{
	width:100%;
	height:100%;
  object-fit: cover;
}
.cms-inline-media[data-kind="player"]
{
	aspect-ratio:16/9;
}



/* language tiles */

.languages
{
	text-align:center;
}
.tile
{
	box-sizing: border-box;
    -moz-box-sizing: border-box;

	display:inline-block;
	position:relative;
	vertical-align:top;
	
	width:165px;
	height:165px;
	margin:8px;
	
	padding:10px 10px 10px 57px;
	
	border:1px solid #dadada;
	background-color:white;
	
	text-align:left;
	text-decoration:none;
	color:black;
}
.tile:hover,
.tile.active
{
	background-color:#f47932;
	background-position:0 100%, 50% 100%, 100% 100%;
	color:white;
}
.tile > strong
{
	position:absolute;
	left:0;
	top:0;
	width:45px;
	height:45px;

	background-color:#f47932;
	
	font-size:20px;
	font-weight:bold;
	line-height:45px;
	text-align:center;
	color:white;
	
	text-shadow: 1px 1px 1px rgba(0,0,0,.4);
}
.tile:hover > strong,
.tile.active > strong
{
	border:1px solid #dadada;
	border-left:none;
	border-top:none;
}


/* box2D elements */

.box
{
	display:none;
	
	position:absolute;
	left:-100px;
	width:50px;
	height:50px;

	background-color:#DADADA;

	text-align:center;
	font-size:28px;
	line-height:52px;
	
	cursor:pointer;

	z-index:100;
	
	outline:1px solid transparent; /* FF jagged edges fix */
}

.box.morpheme, #morphemeboard .key
{
	width:66px;
	height:26px;
	
	font-size:20px;
	line-height:26px;
}
.box.morpheme.blank
{
	width:94px;
	height:40px;
	
}
.box.morpheme.blank > div
{
	width:90px;
	height:36px;
 	border:2px solid transparent;
	font-size:28px;
	line-height:36px;
	color:transparent;
}
.box.morpheme.blank.fixed > div
{
	border-color:rgba(0,0,0,.25);
	color:black;
}
.box.morpheme.blank.fixed.incorrect > div
{
	border-color:#e4002d;
	background-color:rgba(228,0,45,.2);
	background-color:rgba(255,255,255,.6);
}

#morphemes.build .box.morpheme
{
	color:transparent;
}
.box.morpheme.suf.isverb
{
	font-size:17px;
}
#morphemeboard .key .small
{
	font-size:16px;
	line-height:6px;
}
.root
{
	background-color:#00a2ff;
	border-color:#00a2ff;
}
.verb
{
	background-color:#12b360;
	border-color:#12b360;
}
.suf
{
	background-color:#ffa81a;
	border-color:#ffa81a;
}
.pre
{
	background-color:#d55ef2;
	border-color:#d55ef2;
}
.neg
{
	background-color:#b3b3b3;
	border-color:#b3b3b3;
}
.fix
{
	background-color:#b56b00;
	border-color:#b56b00;
}

#world.active .box
{
	display:block;
}
#world.create .box
{
	display:block;
	visibility:hidden;
}

.box.disabled
{
	background-color:transparent;
}

.box:not(.disabled):hover
{
	color:white;
}
#world.intro .box.playing
{
	background-color:#f47932;
}

/* orders */

form#order
{
	--dark:var(--green);
}
form#order .header
{
	font-size:1.1em;
}
form#order input,
form#order select
{
	color:var(--green);
}
form#order svg.icon.expand
{
	top:41px;
	color:var(--green)
}
form#order select.is-placeholder:not(:focus)
{
	color: color-mix(in srgb, var(--green) 40%, transparent);
	border-color:var(--green);
}

form#order input[type="radio"] /* TODO make custom style for these radio buttons */
{
	-webkit-appearance: auto;
	-moz-appearance: auto;
	appearance: auto;
}
form .order-option-select
{
	display:flex;
	justify-content: space-between;
	margin-bottom:40px;
}
form .order-option
{
	border:1px solid var(--green);
	flex-basis:calc(50% - 8px);
	padding:15px 10px 20px 10px;
	/* aspect-ratio: 1; */
}
form .order-option.selected
{
	border-width:3px;
	box-shadow:0 10px 15px rgba(0,0,0,.2);
/* 
	color:var(--white);
	background-color:var(--green);
 */
}

form .products
{
	margin-top:4px;
}
form .products .order-option:not(:last-child)
{
	margin-right:16px;
	/* flex-basis:calc((100% / 3) - 8px); */
}

form .product .head
{
	position:relative;
	font-weight: bold;
	text-align: center;
}
form .product .head input
{
	position:absolute;
	left:0;
	top:0;
}
form .product .price
{
	color:var(--green);
	text-align: center;
}
form .product .price::before
{
	content:'€ ';
}
form .product .detail
{
	margin-top:1rem;
	font-size:14px;
}
form .product ul
{
	margin:0;
	padding-left:22px;
}

form div.submit
{
	text-align:center;
	width:100%;
	padding-bottom:20px;
}

.submit.button
{
	display:inline-block;
	
	background-color:var(--orange);
	padding:8px 16px;
	color:var(--white);
	text-decoration:none;
	text-align:center;
	border-radius:16px;
	min-width:100px;
	line-height:1.2;
	
}
form#order .submit.button
{
	background-color:var(--green);
}


@media (max-width:900px)
{
	#slides > a.nav.prev
	{
		margin-left:-49%;
	}
	#slides > a.nav.next
	{
		margin-right:-49%;
	}
	#page-menu .logo
	{
		position:absolute;
		left:50%;
		top:40px;
		margin:0 0 0 -110px;
	}
	#page-header.fixed #course-login
	{
		display:none;
	}
	
	form.jf
	{
		margin:2em .5em !important;
	}
	form.jf .products
	{
		width:100%;
		overflow-x:auto;
	}
	form.jf .products .order-option
	{
		flex-basis:75%;
		flex-shrink:0;
		margin-right:1em;
	}
}

@media (max-width:450px)
{
	#language
	{
		top:4px;
		bottom:auto;
	}
	#page-header #slides,
	#page-header.fixed #language
	{
		display:none;
	}
	#page-header.fixed.expanded
	{
		height:255px;
		transition:height .2s ease 0s;
		-webkit-transition:height .2s ease 0s;
	}
	#page-header.expanded #page-menu
	{
		background-color:rgba(0,0,0,.15);
	}
	
	#page-header #page-menu li.expand
	{
		position:absolute;
		right:0px;
		padding-right:15px;
		bottom:4px;
		display:block;
		
		font-size:16px;
		/* width:40px; */
		z-index:2000;
	}
	#page-header.expanded #page-menu li.expand
	{
		display:none;
	}
	#page-header.expanded #world
	{
		filter: blur(3px);
	}
	
	#page-header #page-menu li.expand a
	{
		color:white;
		text-shadow: 1px 1px 1px rgba(0,0,0,.4);
	}
	#page-menu
	{
		padding:5px 0;
	}
	#page-menu li,
	#page-menu li > a
	{
		overflow:hidden;
		display:block;
		margin:0 !important;
	}
	#page-menu li svg
	{
		float:none;
		vertical-align:middle;
		margin-top:-2px;
		margin-left:-6px;
/* 
		position:absolute;
		left:10px;
		top:5px;
 */
	}
	#page-menu li:first-child
	{
		padding:0;
	}
	#page-menu li.login
	{
		display:none;
	}
	#page-header:not(.expanded) #page-menu li:not(.selected):not(.expand)
	{
		display:none;
	}
	

	blockquote,
	#page-body ul
	{
		padding:0 5%;
	}
	

	.box
	{
		width:40px;
		height:40px;
		font-size:24px;
		line-height:42px;
	}
	

}