/**** FONT ****/
@font-face {
	font-family: "MJ Titr";
	src: url("font/ir.ttf");
}

@font-face {
	font-family: "IR Lotus";
	src: url("font/ir.ttf");
}

@font-face {
	font-family: "Locida";
	src: url("font/LBRITE.ttf");
}

/**** MASSAGE ****/
#massage {
	display: none;
	font-family: "MJ Titr";
	color:#FFF;
	padding: 17px 0;
	margin:0;
	z-index: 50;
	position: absolute;
	top: 0;
	width: 100%;
	background-color: unset;
	text-align: center;
	box-shadow: 0 3px 10px #777;
	border-bottom-right-radius: 500px;
	border-bottom-left-radius: 500px;
}
/**** HEADER ****/
header {
	background-color: #E1A837;
	text-align: center;
	box-shadow: 0 3px 10px #777;
	border-bottom-right-radius: 500px;
	border-bottom-left-radius: 500px;
}

header h1, header img {
	display: inline-block;
}

header h1 {
	margin:0;
	font-size: 20px;
	line-height:1.2;
}

header span {
	font-size:10px;
	text-shadow: 2px 2px 5px #FFF;
}

header img {
	width:50px;
	margin: 0 27% 0 25%;
}

nav ul li {
	display: inline-block;
	background-color: #E1A837;
	opacity:.9;
	padding: 6px 7px 8px 7px;
	box-shadow:inset 0 1px 5px #777, 0 3px 10px #777;
	font-size:16px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
	width: 92px;
	height:20px;
	text-align:center;
	transition-duration: .2s;
}

nav ul li:nth-child(7)  {
	background:#011348;
	width:54px;
}
nav ul li:nth-child(7) a {
	color:#FFF;

    text-shadow:none;
}

nav ul {
	margin:0 70px;
}

nav select:focus {
    border:none;
}

nav select {
	box-shadow:inset 0 1px 5px #777, 0 3px 10px #777;
	font-size:16px;
	display:none;
	color:#011348;
	text-shadow: 2px 2px 10px #FFF;
	width:calc(100% - 100px);
	background-image:none;
	background-color:#E1A837;
	border:none;
	margin-top:1px;
	padding-right:10px;
	border-bottom-left-radius:25px;
	border-bottom-right-radius:25px;
	margin: 0px 50px;
}

nav select option:checked {
	background-image:none;
    background-color:#777;
    color:#FFF;
    border:none;
}

nav li:hover, nav li.active {
	height:30px;
	font-size:16px;
	opacity:1;
}

nav ul li a {
	text-decoration:none;
	color: #011348;
}

/**** LOGIN ****/
#log_in {
	display: none;
	font-family: "IR Lotus";
	position: absolute;
	width: 60%;
    background:#E1A837;
    opacity:.98;
    border:2px solid #000;
	left: 20%;
	margin: 0;
	top: 100px;
	z-index: 20;
}

#log_in form {
	padding:50px;
}

#log_in input {
	font-size:20px;
	width: 51%;
	border:none;
	background: transparent;
	margin: 5px 0;
	padding: 5px;
	border-bottom: 1px solid;
	color: #000;
}
input[type="submit"] {
	cursor:pointer;
}
#log_in input[type="submit"] {
	background: green;
	border:none;
	border-radius:15px;
	padding:15px;
	font-family: "MJ Titr";
}

#log_in input[type="submit"]:hover {
	background: darkgreen;
}

#log_in a {
    color:#000;
    box-shadow:none;
    background:#DDD;
    cursor:pointer;
    padding:10px;
    font-size:18px;
    border-radius:15px;
}
#log_in a:hover {
	background:#FFF;
}
.close {
    width:30px;
    margin: 0px 5px 0px 0px;
    cursor: pointer;
    position:absolute;
    right:2px;
    top:6px;
    opacity:.7;
}
.close:hover {
    opacity:1;
}
/**** MAIN ****/

input, textarea, select{
    outline:none;
}

main {
	flex: 1 0 auto;
}
html {
	height:100%;
}
body {
	display:flex;
	height:100%;
	width:100%;
	flex-direction: column;
	margin: 0;
	background-image: url("../img/Background.jpg");
	  background-attachment: fixed;
	background-size: cover;
}

main {
    text-align:center;
}

h1, div a, nav, footer, #profile p{
	font-family: "MJ Titr";
	text-shadow: 1px 2px 3px #D4F9F8;
	text-decoration:none;
	color:#011348;
}

main div {
	display: inline-block;
	vertical-align: top;
	text-align:center;
	width: 200px;
	background-image: linear-gradient(rgba(225,168,55,0.8), rgba(86,110,110,.5) 70px);
	border-radius: 20px;
	border:1px solid;
	padding-top:6px;
	margin: 20px 50px;
}

main div a {
    font-size: 20px;
}

/**** FOOTER ****/

footer {
	text-align:center;
    background-color:#E1A837;
    padding:5px;
    flex-shrink: 0;
	margin-top: 50px;
}
/**** Profile ****/
#profile p {
	color:#FFF;
	text-shadow:1px 1px 1px #000;
	float:right;
	margin-right:40%;
    display:inline-block;
    display:none;
}

#profile {
	cursor:pointer;
	width:70px;
	border-bottom-left-radius:30px;
	border-top-left-radius:30px;
direction:ltr;
	z-index:100;
	background-image:linear-gradient(to right, #011348 70px,#444);
	position:absolute;
	box-shadow:1px 0px 5px #FFF;
}

#profile img {
	width:27px;
	padding:5px;
	margin:7px 5px 5px 5px;
	background-color:#FFF;
	border-radius:100%;
}

/**** Dashboard ****/
#dashboard {
	cursor:pointer;
	width:70px;
	border-bottom-right-radius: 30px;
	border-top-right-radius: 30px;
	direction:rtl;
	z-index:100;
	background-image:linear-gradient(to left, #011348 70px,#444);
	position:absolute;
	left:0;
	box-shadow:1px 0px 5px #FFF;
}

#dashboard img {
	width:27px;
	padding:5px;
	margin:7px 5px 5px 5px;
	background-color:#FFF;
	border-radius:100%;
}
#dashboard ul {
	padding:0;
	text-align:center;
	display:inline-block;
	list-style:none;
width:calc(100% - 54px);
/* width:50%; */
margin:0;
vertical-align:top;
margin-top:15px;
display:none;
}
#dashboard li {
	border-top-left-radius:15px;
	border-bottom-right-radius:15px;
	box-shadow:1px 1px 1px #FFF;
background-color:#E1A837;
padding:2px 20px;
    display:inline-block;
margin:0 5px;
}

#dashboard li:hover {
	box-shadow:inset 1px 1px 7px #FFF;

}
#dashboard li a{	color:#FFF;
	text-shadow:1px 1px 1px #000;
}

/**** FORM ****/
.empty {
	box-shadow: 0px 0px 5px red;
}