@font-face {
	font-family: BlenderPro;
	src: url(fonts/BlenderPro-ThinItalic.otf); /* Safari, Android, iOS */
}
@font-face {
	font-family: HeadingPro;
	/*src: url(fonts/Heading-Pro-UltraCompressed-Thin-Italic-trial.ttf);*/
	src: url(fonts/Heading-Pro-UltraCompressed-Thin-Italic-trial.woff);
}
body {
	font-family: BlenderPro, 'Roboto', 'sans-serif';
	margin: 0px;
	background-color: #EFEFEF;
}
#init {
	position: fixed;
	left: 0;
	top: 0;
	background-image: linear-gradient(45deg, #BF3038, #DB4D3B);
	height: 100%;
	width: 100%;
	z-index: 1000;
	
	color: white;
}
#hello {
	position: absolute;
	width: 50%;
	vertical-align: middle;
	top: 10%;
	left: 10%;
}
#hello h1 {
	font-family: HeadingPro;
	font-size: 40pt;
	font-weight: 2;
	margin-bottom: 2px;
}
#hello p {
	font-size: 16pt;
	font-family: BlenderPro;
	margin-top: 0;
	color: #DDD;
}
#side-image {
	position: absolute;
	right: 10%;
	padding-right: 5px;
	height: 80%;
	width: 150px;
	vertical-align: middle;
	margin: auto;
	background-image: url(img/olivia-full.png);
	background-size: 130px;
	background-repeat: no-repeat;
	background-position: right center;
}
#action {
	position: absolute;
	top: 80%;
	width: 100%;
	left: 0;
	height: 20%;
}
#action button {
	border-radius: 0.4em;
	background-color: white;
	font-family: BlenderPro;
	font-weight: bold;
	font-size: 18pt;
	margin: auto;
	display: block;
	color: #BF3038;
	min-width: 200px;
	min-height: 50px;
}
#header {
	width: 100%;
	height: 70px; 
	background-color: white;
	padding: 10px;
	font-weight: 700;
	position: fixed;
	top:0;
	z-index: 100;
	-moz-box-shadow:    2px 2px 4px 2px #ccc;
	-webkit-box-shadow: 2px 2px 4px 2px #ccc;
	box-shadow:         2px 2px 4px 2px #ccc;
	display: flex;
}
#header img.avatar {
	border-radius: 50%;
	width: 70px;
	height: 70px;
	display: block;
	float: left;
	margin-right: 10px;
	margin-top: auto;
	margin-bottom: auto;
}
#header .nickname {
	margin-top: auto;
	margin-bottom: auto;
}
#header button {
	background-color: white;
	border: none;
	position: absolute;
	right: 30;
	height: 80%; 
	text-align: center;
}
#header button .icon {
	fill: #FF665A;
	width: 40px;
}
#messages {
	/*width: 100%;*/
	position: absolute;
	top: 15%;
	width: 90%;
	height: 70%;
	background-color: #EFEFEF;
	padding: 20px;
	overflow: scroll;
	z-index: 80;
	background: url('img/background.jpg') repeat;
	background-size: contain;
}
#messages .message {
	display: flex;
	flex-flow: row;
	position: relative;
	width: 60%;
	padding: 1%;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 5%;
	border-radius: 0.2em;
	font-size: 14pt;
}
#messages .message .date {
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 8pt;
	color: #7D6B7D;
	font-style: italic;
	padding-right: 5px;
	padding-bottom: 2px;
}
#messages .bot .date {
	color: black;
}
#messages .bot {
	float: left;
	background-color: #FF825C;
	text-align: left;
	color: black;
	box-shadow: 2px 2px 10px 0px #ccc;
}
#messages .bot:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-right-color: #FF825C;
	border-left: 0;
	margin-top: -20px;
	margin-left: -10px;
}
#messages .user {
	float: right;
	background-color: white;
	text-align: righ;
	color: #434343;
	box-shadow: 2px 2px 10px 0px #ccc;
}
#messages .user:after {
	/* Thanks to https://leaverou.github.io/bubbly/ */
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-left-color: white;
	border-right: 0;
	margin-top: -20px;
	margin-right: -10px;
}
#messages .optiongroup {
	display: flex;
	flex-direction: row;
	text-align: center;
	width: 90%;
	margin: auto;
}
#messages .row {
	display: flex;
	flex-wrap: wrap;
	padding: 0 4px 4px 0;
	height: 90px;
}
#messages .column {
	flex: 0 0 40%;
	padding: 0 4px;
	display: table-cell;
    font-size: 1.2em;
    height: 70%;
}
#messages .column p {
	/*display: table-cell; */
	vertical-align: middle; 
	text-align: center;
}
#messages button.column {
    flex: 0 0 45%;
    height: 95%
}
#messages .optiongroup .option {
	border-radius: .4em;
	padding: 10px;
	border: solid 2px white;
	min-height: 60px;
	min-width: 60px;
	text-align: center;
	color: gray;
	background-color: white;
	margin: auto;
}
#messages .optiongroup .selected {
	/*background-color: #FF665A;*/
	border: solid 2px #EA6044;
	color: #EA6044;
	-moz-box-shadow:    2px 2px 4px 2px #ccc;
	-webkit-box-shadow: 2px 2px 4px 2px #ccc;
	box-shadow:         2px 2px 4px 2px #ccc;
	font-weight: bolder;
}
#messages button.send_attribute, #messages button.finish {
	border-radius: .6em;
	background-color: #7BE19A;
	color: #060;
	display: block;
	margin: auto;
	margin-bottom: 10px;
	width: 90%;
	height: 40px;
	font-size: 1.2em;
	clear: both;
}
#loading {
	width: 100%;
	height: 100%;
}
#loading img {
	position: absolute;
	top: 50%;
 	left: 50%;
  
 	transform: translate(-50%, -50%);
 	width: 100px;
}
.msg-loading {
	height: 50px;
	width: 50px;
}
.msg-loading img {
	position: absolute;
	top: 50%;
 	left: 50%;
  
 	transform: translate(-50%, -50%);
 	width: 100px;
 	height: 100px;
}
#form {
	position: absolute;
	bottom: 0%;
	width: 100%;
	height: 10%;
	display: flex;
	z-index: 99;
	margin: 0;
	background-color: white;
}
#form input[type='text'] {
	height: 100%;
	width: 80%;
	border: none;
	font-size: 12pt;
}
#form button {
	width: 14%;
	height: 90%;
	background-color: white;
	font-size: 16pt;
	border: none;
}
#form button .icon {
	fill: #FF665A;
}
.recipe {
	width: 112%;
	max-width: 112%;
	flex: 0 0 75%;
	background-color: white;
	margin-left: -6%;
	padding-top: 2px;
	padding-bottom: 2px;
	display: flex;
	/*flex-flow: row;*/
	flex-wrap: nowrap;
	overflow-x: auto;
	position: relative;
	box-shadow: 1px 0px 10px 0px #ccc;
	box-shadow: inset -7px 0 13px -7px rgba(0,0,0,0.8);
	margin-bottom: 20px
}
.recipe div {
	margin-right: 10px;
	/*border-right: dashed thin silver;*/
}
.recipe img {
	width: 100px;
	object-fit: cover;
	position: absolute;
	top:0;
	left: 0;
	height: 100%;
}
.recipe .about {
	padding-left: 120px;
}
.recipe h1 {
	font-family: Roboto;
	margin: 2px;
}
.recipe h2 {
	font-style: italic;
	margin: 1px;
}
.recipe ul {
	width: 150px;
	flex: 0 0 auto;
	padding-left: 25px;
	margin: 1px;
}
.recipe ol {
	width: 300px;
	flex: 0 0 auto;
	padding-left: 25px;
	margin: 1px;
}
.recipe li {

}
@media only screen and (orientation:portrait) and (max-device-height: 600px){
    button .icon {
    	height: 70%;
    }
    #header img.avatar {
    	height: 40px;
    	width: 40px;
    }
}