@font-face{
	font-family: iranian-sans;
	src: url('../font/iranian-sans.woff');
}

body, html{
	margin: 0;
	direction: rtl;
	/*overflow-x: hidden;*/
}

body{
	background: linear-gradient(to bottom, #47452c, #47412c);
	font-family: iranian-sans;
}

.top-bar{
	background: linear-gradient(to bottom, #32301f, #403e27);
	color:white;
	position: sticky;
	top: 0;
	z-index: 2;
}

.top-bar a{
	color:white;
	text-decoration: none;
}

.top-bar img{
	height: 1.5em;
	width: 1.5em;
	object-fit: scale-down;
	filter: invert(1);
}

.top-bar .hamburger-menu{
	float: left;
}
.hamburger-menu{
	display: inline-block;
	vertical-align: middle;
	width: 1em;
	padding: 0.5em;
	margin: 0.5em;
	cursor: pointer;
}

.hamburger-menu>div{
	height: 0.15em;
    margin-top: 0.15em;
    margin-bottom: 0.15em;
    box-shadow: 0 0 2px;
    border-radius: 2px;
    background: white;
}

.top-bar ul{
	list-style: none;
	margin: 0;
	padding: 0;
	/*float: right;*/
	margin-right: 2em;
	padding-top: 0.5em;
}

.top-bar li{
	display: inline-block;
	vertical-align: middle;
	margin: 0.5em;
}

.top-slider-container{
	direction: ltr;
	text-align: center;
	position: relative;
	overflow-x: hidden;
	white-space: nowrap;
	width: calc(100% - 2em);
	margin: 0 1em;
}

.top-slider div{
	height: 30em;
	background-color: #1f2d1f6b;
	border-radius: 0.5em;
	/*margin: 1px;*/
	/*min-width: calc(70vw);*/
}

.top-slider-container div.tns-controls > button:nth-child(1){
	position: absolute;
	left: 0.5em;
	top: 50%;
	z-index: 2;
}

.top-slider-container div.tns-controls > button:nth-child(2){
	position: absolute;
	right: 0.5em;
	top: 50%;
	z-index: 2;
}

.top-slider-container div.tns-nav{
	position: absolute;
	bottom: 2em;
	right: 20%;
	left: 20%;
	text-align: center;
	z-index: 2;
}

.top-slider img{
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: top;
}

.tns-outer [aria-controls]{
	border-radius: 50%;
    width: 0.5em;
    height: 0.5em;
    margin: 0 0.5em;
    padding: 0;
    border: 1px solid silver;
}

.top-slider-container button[data-action="start"],
.top-slider-container button[data-action="stop"]{
	display: none;
}

.top-slider-container button[data-controls="prev"]{
	background-color: transparent;
    color: transparent;
    background-image: url(../svg/left-arrow.svg);
    background-size: contain;
    width: 2em;
    height: 2em;
    border: 0;
	filter: invert(0.9);    	
}
.top-slider-container button[data-controls="next"]{
	background-color: transparent;
    color: transparent;
    background-image: url(../svg/left-arrow.svg);
    transform: rotate(180deg);
    background-size: contain;
    width: 2em;
    height: 2em;
    border: 0;
	filter: invert(0.9);	
}
.top-slider-container .tns-nav-active{
	transform: scale(1.3);
}

.main-container{
	min-height: calc(100vh - 15em);
}

.l25{
	line-height: 2.5em;
}

.center{
	text-align: center;
}

.event{
	display: inline-block;
	width: 15em;
	margin: 1em;
	padding: 0.5em;
	/*background-color:gray;*/
	border-top: 1px solid olive;
	border-bottom: 1px solid olive;
}
.event img{
	float: left;
	width: 5em;
	height: 5em;
	margin: 10px;
	object-fit: cover;
	background: gray;
	border-radius: 0.5em 0 0.5em 0;
	transition: border-radius 0.3s;
}

.event:hover img{
	border-radius: 0 1em 0 1em;
}

.event p{
	text-align: justify;
}

.content{
	color:white;
	text-align: justify;
	margin:1em auto;
	padding:1em;
}
.content.form{
	max-width: 30em;
}
form{
	input[type="text"], input[type="number"]{
		padding: 0.5em;
		border:0;
		width: 15em;
		border-radius: 0.5em;
		box-sizing: border-box;
		font-family: iranian-sans;
	}
	
	select{
		padding: 0.5em;
		border:0;
		width: 15em;
		border-radius: 0.5em;
		box-sizing: border-box;
		font-family: iranian-sans;
	}
	textarea{
		padding: 0.5em;
		border:0;
		min-width: 15em;
		min-height: 5em;
		border-radius: 0.5em;
		box-sizing: border-box;
		font-family: iranian-sans;
	}
	input[type="submit"]{
		padding: 0.5em 1em;
		border:none;
		background: linear-gradient(orange, orangered);
		color:white;
		border-radius: 1em;
		font-size: 1em;
		font-family: iranian-sans;
	}
}

.footer{
	background: linear-gradient(to bottom, #1f2113, #33330b);
    min-height: 15em;
    border-radius: 1em 1em 0 0;
    color:white;
}

.footer a{
	color: white;
	text-decoration: none;
}
.footer a:hover{
	text-decoration: underline;
}

.footer ul{
	display: inline-block;
	vertical-align: top;
	list-style: none;
	color: white;
	min-width: 10em;
}

.footer li:first-child{
	font-weight: bold;
	font-size: 1.1em;
}

.footer li.separator{
	/*border-bottom: 1px solid white;*/
    line-height: 0.1em;
    margin-bottom: 1em;
}

.footer li{
	line-height: 1.5em;
}

body:not(.sidebar-open) .sidebar{
	transform: translateX(-70vw);
}

.sidebar{
	position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    background: #646d49;
    width: min(70vw, 20em);
    border-right: 2px solid orange;
    z-index: 2;
    color: white;
    transform: translateX(0);
    transition: transform 0.5s;
}

.sidebar a{
	color: white;
	text-decoration: none;
}
.sidebar ul{
	margin: 1em 0 0 0;
    list-style: none;
    background: #5d673f;
    padding: 1em 0;
}

.sidebar li{
	padding: 0.5em 2em;
	cursor: pointer;
}

.sidebar li img{
	height: 1.5em;
	width: 1.5em;
	margin: 0 1em;
	/*background: white;*/
	filter:invert(1);
	display: inline-block;
	vertical-align: middle;
}

.sidebar li label{
	display: inline-block;
	vertical-align: middle;
}

.sidebar .close-btn{
	text-align: right;
    margin-bottom: 1em;
    direction: rtl;
    padding: 0.5em;
    font-size: 2em;
}
.sidebar .close-btn label{
	display: inline-block;
	cursor: pointer;
}
/* Specifics */
.social-headline{
	font-size: 1.2em;
	font-weight: bold;
}

.social-icons{
	white-space: nowrap;
}
.social-icons a{
	display: inline-block;
	height: 2em;
	width: 2em;
	margin: 1em;
	vertical-align: middle;
	text-decoration: none;
}
.social-icons a>img{
	height: 2em;
	width: 2em;
	filter: invert(.9);
}

/* Orientations */

@media (orientation: landscape) {
	.footer>div{
		display: table;
		width: 100%;
		box-sizing: border-box;
	}
	.footer>div>div{
		display: table-row;
	}
	.footer>div>div>div{
		display: table-cell;
		padding: 1em;
		/*text-align: center;*/
		vertical-align: middle;
	}
}

@media (orientation: portrait) {
}

.p2{
	padding:2em;
}
.m2{
	margin: 2em;
}

.bio-image{
	text-align: center;
}

.bio-image img{
	width: min(20em, 50vw);
	border-radius: 2em;
	transform: rotate(5deg);
}