/*

Stylesheet for slidorion

 */
#slidorion {
	width: 100%;			/* Set to slidorion width. Is equal to #slider + #accordion width */
/* 	height: 400px;			/* Set to slidorion height. Is equal to #slider and #accordion height */ */
	position: relative;
/* 	left: 50%; */
/* 	margin-left: -384px; */
	padding: 0;
/* 	background: #cbcbcb;
	border: 1px solid #bbb;
	-webkit-box-shadow: 0 0 34px #bbb;
	-moz-box-shadow: 0 0 34px #bbb;
	box-shadow: 0 0 34px #bbb; */
}

#slider {
	/* width: 488px; */
	height: 595px;
	width: 67%;
	position: relative;
	float: right;
	overflow: hidden;
	margin-top: -130px;
}

.slider-image {
	position: relative;
}

#accordion {
	width: 30%;			/* Set to accordion width */
	height: 400px;			/* Set to image height */
/* 	font-family: Verdana; */
/* 	background: #eee; */
/* 	-webkit-box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3); */
/* 	-moz-box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3); */
/* 	box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3); */
	position: relative;
	z-index:8;
	float: left;
}

#accordion .header {
/* 	height: 36px; */
	color: #333;
/* 	background: #ededed;
	background: -moz-linear-gradient(top, #ededed 59%, #dcdcdc 100%);
	background: -webkit-linear-gradient(top, #ededed 59%,#dcdcdc 100%);
	background: -o-linear-gradient(top, #ededed 59%,#dcdcdc 100%);
	background: -ms-linear-gradient(top, #ededed 59%,#dcdcdc 100%);
	background: linear-gradient(top, #ededed 59%,#dcdcdc 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dcdcdc',GradientType=0 );
	border: none;
	border-top: 1px solid #ccc; */
}

#accordion .header a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    padding: 20px 0px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-family: 'Graphik-SemiBold';
    font-weight: normal;
    font-size: 20px;
    line-height: normal;
}
#accordion .header a .fa-angle-up{
	font-size:20px;
}
#accordion .header a:not(.active) .fa-angle-up:before{
	    content: "\f107";
}
#accordion .header a:hover {
/* 	background: #ededed; */
	cursor: pointer;
}

#accordion .header a.active {
	position:relative;
	border-bottom: none;
/* 	background-color: #676767 !important; */
	color: #fff;
}

#accordion .content {
/* 	height: 257px;		 */
	/* This height needs to be changed as it depends on the accordion height and number of tabs */
	font-weight: bold;
	font-size: 12px;
	margin: 0;
	padding: 15px 0;
	padding-top:0px;
	border: none;
	color: #fff;
    line-height: 24px;
    font-size: 20px;
    margin: auto;
    font-family: 'Calibre-Light';
/* 	background: #d6d6d6;
	background: -moz-linear-gradient(top, #d6d6d6 0%, #ffffff 10%);
	background: -webkit-linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
	background: -o-linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
	background: -ms-linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
	background: linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#ffffff',GradientType=0 ); */
	overflow:auto;
}
 
#accordion .content p {
    color: #fff;
    margin: auto;
    margin: 0px;
    font-weight: normal;
    line-height: 27px;
    font-size: 18px;
    font-family: 'Graphik-Regular';
}

/* by sehjad for accordion	  */
	 
	 .header .slider-link.active:before{
			content: "";
			width: 0px;
			height: 3px;
			background-color: #3fafe0;
			animation: mymove;
			display: block;
			animation-play-state: running;
			animation-timing-function: linear;
			animation-duration: 7000ms;
		 	position:absolute;
		 	top:-1px;
		}
		@keyframes mymove {
			from {width: 0px;}
			to {width: 100%;}
		}
		#slidorion:hover .header .slider-link.active:before{
			animation:0;
			width: 100%;
		}