/**========================================================================
* ?                                ABOUT
* @author         :  Elsha3r Shreif Shama
* @email          :  shreifshama@gmail.com
* @url            :  https://www.facebook.com/mr.shreif.shama/
* @product        :  shreif (Login Page)
* @version        :  4.4
*=======================================================================**/




html {
    scrollbarBG: white;
    thumbBG: #393975;
}
body::-webkit-scrollbar {
	width: 15px;
}
body {
	scrollbar-width: thin;
	scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
body::-webkit-scrollbar-track {
	background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb {
	background-color: var(--thumbBG) ;
	border-radius: 6px;
	border: 3px solid var(--scrollbarBG);
}
body {
    font-family: 'Cairo', sans-serif;
    direction: rtl;
}
.nav-bar {
	background: #313131!important;
	border-top: 4px solid #393975;
}
.nav-li {
}
.nav-li ul {
	float: right;
	display: block;
	height: 45px;
}
.nav-li ul li {
	display: inline-block;
	padding: 20px;
	font-weight: bold;
	list-style-type: none;
}
.nav-li ul li a {
	color: #ffff!important;
	padding: 10px;
}
.nav-li ul li a:hover {
	background: #393975;
	color: white;
	border-radius: 5px;
	padding: 10px;
	text-decoration: none;
}

.bars {
	background: #393975;
	color: white;
	border-radius: 5px;
	padding: 10px;
}
.giris {
	background: url('./img/back2.png')!important;
}
.giris .container {
	padding: 20px;
}
.sohbetbar {
	margin-top: 20px!important;
	text-align: center!important;
	background: #494949 !important;
	padding: 10px !important;
	border-radius: 8px !important;
	box-shadow: 0px 1px 5px 4px #f8cb00 !important;
}
.sohbetbar h2 {
	font-size: 25px;
	font-weight: bold;
	border-bottom: 2px solid #393975;
	padding-bottom: 10px;
	color: #393975;
}
.sohbetbar input {
	margin: 5px;
	border: none;
	border-bottom: 1px solid #777777;
	padding: 10px;
	color: black;
	outline: 0;
	width: 65%;
}
.sohbetbar i {
	color: #f1d900!important;
	font-size: 20px;
}
.sohbetbar button {
	border: none!important;
	padding: 11px!important;
	width: 70% !important;
	font-weight: bold!important;
	border-radius: 15px!important;
	margin-top: 10px!important;
	background: #342400!important;
	border: 2px solid #ffbb00!important;
	color: white!important;
}
.sohbetbar button:hover {
	background: #fff!important;
	color: #000!important;
}
.sohbetbar .farkli {
	background: #ff9b50;
	color: black;
}
.headerbar {
	margin: 0px auto;
}
.headerbar .item {
	padding: 10px;
	background: #414141!important;
	color: white;
	text-align: center;
	border-radius: 5px;
	margin-top: 10px;
}
.headerbar .item i {
	font-size: 60px;
}
.headerbar .item a {
	color: #ffd600!important;
}
.headerbar .ust {
	font-size: 20px;
}
.headerbar .alt {
	font-size: 13px;
}
.headerbar .item:hover {
	background: #939393!important;
	cursor: pointer;
}
.headerbar .item:hover a {
	text-decoration: none;
	color: #fff!important;
	cursor: pointer;
}
.headerbar label:hover {
	cursor: pointer;
}
.hizlibaglan {
	margin: 0px auto;
	background: white;
	margin-top: 40px;
	margin-bottom: -100px;
	padding: 20px;
	border-radius: 10px;
	text-align: center;
}
.hizlibaglan h2 {
	font-size: 30px;
	color: #393975;
	font-weight: bold;
	padding: 5px;
}
.hizlibaglan input {
	width: 80%;
	padding: 5px;
	border-radius: 5px;
	margin: 10px;
	font-size: 20px;
	text-align: left;
	border: 1px solid #e5e5fa;
	background: #e5e5fa;
}
.hizlibaglan button {
	width: 80%;
	padding: 10px;
	border: none;
	background: #393975;
	color: white;
	border-radius: 5px;
	font-size: 20px;
}
.hizlibaglan h3 {
	font-size: 15px;
	padding: 5px;
	margin-top: 10px;
	color: #9292a2;
}
.altbar {
	padding: 10px;
	background: #000!important;
}
.altbar>h2 {
	text-align: center;
	padding: 5px;
	font-weight: bold;
	font-size: 25px;
	background: url('./img/back3.png')!important;
	border-radius: 5px;
	color: #fbff00!important;
	box-shadow: 0px 0px 5px 1px #ffee00!important;
}
.altbar .container-fluet {
	margin: 20px 70px 20px;
}

.altbar .col-alt i {
	font-size: 40px;
	padding: 10px;
	color: #ff9b50;
}
.altbar .col-alt h2 {
	font-size: 20px;
	color: #ffffff;
	font-weight: bold;
}
.altbar .col-alt h3 {
	font-size: 15px;
	color: #e7e7e7;
}
.col-alt {
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 31.333333%;
	max-width: 33.333333%;
	padding: 10px;
	background: #313131!important;
	margin: 0px auto;
	margin-top: 10px;
	border-radius: 10px;
	text-align: center;
}
.bilgi {
	padding: 10px;
	background: white;
	margin-top: 20px;
	border-radius: 10px!important;
	background: #272727!important;
	color: #fff!important;
	box-shadow:0px 0px 5px 3px #ffd900!important;
}
.bilgi h1 {
	color: #edd200!important;
	font-size: 20px;
	border: none;
	text-align: center;
	font-weight: bold;
}

.h1 , h1 {
    color :#ffc400;
    font-size : 2.5rem;
}

.bilgi p {
	color: #e3e3e3!important;
	font-size:20px!important;
}
.devam {
	display: none;
}
.devambtn {
	border: none;
	padding: 5px;
	font-weight: bold;
	border-radius: 5px;
	background: #aaad00;
	color: white;
	font-size: 15px;
	margin-bottom: 10px;
}
.yukari {
	display: none;
	position: fixed;
	bottom: 0;
	right: 0;
	border: none;
	padding: 10px;
	margin-bottom: 10px;
	margin-right: 10px;
	background: #393975;
	border-radius: 5px;
	color: white;
	font-size: 20px;
}
.sosyalmedya {
	background: white;
	padding: 10px;
	border-radius: 5px;
	scrollbarBG: white;
	thumbBG: #393975;
}
body::-webkit-scrollbar {
	width: 15px;
}
body {
	scrollbar-width: thin;
	scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
body::-webkit-scrollbar-track {
	background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb {
	background-color: var(--thumbBG) ;
	border-radius: 6px;
	border: 3px solid var(--scrollbarBG);
}
body {
	font-family: 'Cairo', sans-serif;
}
.nav-bar {
	background: #2d2d2d;
	border-top: 4px solid #393975;
}
.nav-li {
}
.nav-li ul {
	float: right;
	display: block;
	height: 45px;
}
.nav-li ul li {
	display: inline-block;
	padding: 20px;
	font-weight: bold;
	list-style-type: none;
}
.nav-li ul li a {
	color: #737373;
	padding: 10px;
}
.nav-li ul li a:hover {
	background: #393975;
	color: white;
	border-radius: 5px;
	padding: 10px;
	text-decoration: none;
}

.bars {
	background: #393975;
	color: white;
	border-radius: 5px;
	padding: 10px;
}
.giris {
	background: url('./img/back2.png')!important;
}
.giris .container {
	padding: 20px;
}
.sohbetbar {
	margin-top: 20px;
	text-align: center;
	background: white;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0px 0px 5px 1px black;
}
.sohbetbar h2 {
	font-size: 25px;
	font-weight: bold;
	border-bottom: 2px solid #393975;
	padding-bottom: 10px;
	color: #393975;
}
.sohbetbar input {
	margin: 5px;
	border: none;
	border-bottom: 1px solid #777777;
	padding: 10px;
	color: black;
	outline: 0;
	width: 65%;
}
.sohbetbar i {
	color: #ffffff;
	font-size: 20px;
}
.sohbetbar button {
	border: none;
	padding: 11px;
	width: 70%;
	font-weight: bold;
	border-radius: 5px;
	margin-top: 10px;
	background: #181600;
	border: 2px solid #393975;
	color: white;
}
.sohbetbar button:hover {
	background: white;
	color: #393975;
}
.sohbetbar .farkli {
	background: #ff9b50;
	color: black;
}
.headerbar {
	margin: 0px auto;
}
.headerbar .item {
	padding: 10px;
	background: #2d2d2d;
	color: white;
	text-align: center;
	border-radius: 5px;
	margin-top: 10px;
}
.headerbar .item i {
	font-size: 60px;
}
.headerbar .item a {
	color: #d4bf00, 23, 23;
}
.headerbar .ust {
	font-size: 20px;
}
.headerbar .alt {
	font-size: 13px;
}
.headerbar .item:hover {
	background: white;
	cursor: pointer;
}
.headerbar .item:hover a {
	text-decoration: none;
	color: #393975;
	cursor: pointer;
}
.headerbar label:hover {
	cursor: pointer;
}
.hizlibaglan {
	margin: 0px auto;
	background: white;
	margin-top: 40px;
	margin-bottom: -100px;
	padding: 20px;
	border-radius: 10px;
	text-align: center;
}
.hizlibaglan h2 {
	font-size: 30px;
	color: #393975;
	font-weight: bold;
	padding: 5px;
}
.hizlibaglan input {
	width: 80%;
	padding: 5px;
	border-radius: 5px;
	margin: 10px;
	font-size: 20px;
	text-align: left;
	border: 1px solid #e5e5fa;
	background: #e5e5fa;
}
.hizlibaglan button {
	width: 80%;
	padding: 10px;
	border: none;
	background: #393975;
	color: white;
	border-radius: 5px;
	font-size: 20px;
}
.hizlibaglan h3 {
	font-size: 15px;
	padding: 5px;
	margin-top: 10px;
	color: #9292a2;
}
.altbar {
	padding: 7px;
	background: #000000;
}
.altbar>h2 {
	text-align: center;
	padding: 5px;
	font-weight: bold;
	font-size: 25px;
	background: url('./img/back3.png')!important;
	border-radius: 5px;
	color: #000000;
	box-shadow: 0px 0px 5px 1px #72706f;
}
.altbar .container-fluet {
	margin: 20px 70px 20px;
}

.altbar .col-alt i {
	font-size: 40px;
	padding: 10px;
	color: #ffd900!important;
}
.altbar .col-alt h2 {
	font-size: 20px;
	color: #ffffff;
	font-weight: bold;
}
.altbar .col-alt h3 {
	font-size: 15px;
	color: #e7e7e7;
}
.col-alt {
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 31.333333%;
	max-width: 33.333333%;
	padding: 10px;
	background: #414141;
	margin: 0px auto;
	margin-top: 10px;
	border-radius: 10px;
	text-align: center;
}
.bilgi {
	padding: 10px;
	background: white;
	margin-top: 20px;
	border-radius: 5px;
	background: white;
	color: #a59826;
}
.bilgi h1 {
	color: #393975;
	font-size: 20px;
	border: none;
	text-align: center;
	font-weight: bold;
}
.bilgi p {
	font-size: 25px;
}
.devam {
	display: none;
}
.devambtn {
	border: none;
	padding: 5px;
	font-weight: bold;
	border-radius: 5px;
	background: #c3b000!important;
	color: white;
	font-size: 15px;
	margin-bottom: 10px;
}
.yukari {
	display: none;
	position: fixed;
	bottom: 0;
	right: 0;
	border: none;
	padding: 10px;
	margin-bottom: 10px;
	margin-right: 10px;
	background: #393975;
	border-radius: 5px;
	color: white;
	font-size: 20px;
}
.sosyalmedya {
	background: white;
	padding: 10px;
	border-radius: 5px;
}
.sosyalmedya a {
	text-decoration: none;
}

.soz {
	font-size: 15px;
	text-align: center;
	padding: 16px;
	background: #181818!important;
	color: #ffe600!important
}

body {
    background: url('./img/back4.png')!important;
    margin:0;
}

.footer {
	padding: 50px;
	margin: 0px 10px 0px;
	margin-top: 0px;
}
.footer img {
	background: transparent!important;
	padding: 10px;
	border-radius: 10px;
	width: 100%;
}
.footer label {
	font-size: 13px;
	color: #393975;
	font-weight: bold;
}
.footer h2 {
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #dab900!important;
}
.footer ul li {
	list-style-type: none;
	text-align: center;
	margin-left: 0px!important;
}
.footer ul li a {
	color: #8c8c8c;
}
.footer ul li a:hover {
	text-decoration: none;
	background: #393975;
	padding: 2px;
	color: white;
	border-radius: 5px;
}


a {
    color:#ffea2a!important;
    text-decoration:none!important;
    background-color:transparent!important;
    
}

.medya {
	background: #121212!important;
	border-radius: 5px;
	padding: 10px;
}
.medya h2 {
	color: #ffef13!important;
}
.medya ul li a {
	color: #ffee00!important;
}
.medya  ul li a:hover {
	background: #fff350;
	color: #754f39;
}
.medya i {
	color: #e1b800!important;
	font-size: 16px;
}
.bilgi {
	margin-top: 10px;
	margin-bottom: 20px;
	box-shadow: 0px 0px 5px 3px #72706f;
}
.hakkimizda h2 {
	color: #fff!important;
	font-size:  17px;
	border: none;
}
.hakkimizda h3 {
	color: #777777;
	font-size:  15px;
}
@media screen and (max-width:1044px){ 
	.nav-li ul {
		display: none;
		float: none;
		height: 100%;
	}
	.nav-li ul li {
		display: block;
		margin-right: 10px;
		border: none;
		padding-top: 10px;
		padding-bottom: 10px;
		font-weight: bold;
		color: #777777;
		list-style-type: none;
		text-align: center;
		width: 100%;
		margin-left: -20px;
	}
	.col-alt {
		-ms-flex: 0 0 99%;
		flex: 0 0 99%;
		max-width: 100%;
	}
	.altbar .container-fluet {
		margin: 20px 10px 20px;
	}
}


@keyframes right{
	0%{
		transform:translateX(0)
	}
	40%{
		transform:translateX(10px)
	}
	60%{
		transform:translateX(5px)
	}
	100%{
		transform:translateX(0)
	}
}


/* default login css */

/*intro css */
#intro_top { width:100%; z-index:1; position:relative; height:auto; padding:80px 0; background:linear-gradient(7deg,rgb(48 48 48),rgb(38 38 38) 40%,rgb(82 82 82)); background-repeat:no-repeat; background-size:auto auto; background-position:center 50px; background-attachment:fixed; }
#login_wrap { width:100%; height:100%; }
#login_all { width:800px; max-width:94%; border-radius:20px; display:block; margin:0 auto; color:#fff; }
.intro_social_container { width:100%; height:auto; text-align:center; padding-top:20px; }
.intro_social_btn { display:inline-block; width:40px; height:40px; margin:0 3px; border-radius:50%; }
.login_not_member { text-align:center; padding-top:5px; }

/* active_user intro  */
#intro_section_user { padding:72px 0; }
.active_user { height:110px; text-align:center; float:left; overflow:hidden; }
#last_active { width: 100%; height:110px; margin:0 auto; }
.active_avatar { width:110px; height:110px; border-radius:50%; }
#last_active .left-arrow,
#last_active .right-arrow { width: 0; height: 0; border-top: 10px solid transparent;  border-bottom: 10px solid transparent;  margin-top: 5px; cursor: pointer; margin-top:40px; }
#last_active .left-arrow {  float: left; border-right: 10px solid #ccc; display:none;}
#last_active .left-arrow:hover { border-right: 10px solid #000; }
#last_active .right-arrow { float: right;  border-left: 10px solid #ccc; display:none; }
#last_active .right-arrow:hover { border-left: 10px solid #000; }
#last_active .last-clip {  margin: 0 20px; overflow: hidden; position: relative; }
#last_active .last_10 { height: 110px; width: 10000%;  overflow: hidden;  position: relative; }

/* section css */
.section { width:100%; height:auto; margin:0 auto; }
.section_content { width:100%; max-width:1100px; margin:0 auto; }
.section_inside { margin:0 auto; }

@media screen and (max-width:1120px){
	.section_inside { width:96%; }
}
@media screen and (min-width:1121px){
	#intro_top { background-attachment: fixed; }
}
@media screen and (max-width:1100px){
	#intro_top { background-size:auto 100%; background-position:center 0px; padding:80px 0; }
}
@media screen and (max-width:768px){
	#intro_top { background-size:auto 100%; background-position:center 0px;  }
}


.sosyalmedya a {
	text-decoration: none;
}

.soz {
	font-size: 15px;
	text-align: center;
	padding: 16px;
	background: #393975;
	color: white;
}
.footer {
	padding: 50px;
	margin: 0px 10px 0px;
	margin-top: 0px;
}
.footer img {
	background: #e5e5fa;
	padding: 10px;
	border-radius: 10px;
	width: 100%;
}
.footer label {
	font-size: 13px;
	color: #fff!important;
	font-weight: bold;
}
.footer h2 {
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #393975;
}
.footer ul li {
	list-style-type: none;
	text-align: center;
	margin-left: -40px;
}
.footer ul li a {
	color: #8c8c8c;
}
.footer ul li a:hover {
	text-decoration: none;
	background: #393975;
	padding: 2px;
	color: white;
	border-radius: 5px;
}
.medya {
	background: #393975;
	border-radius: 5px;
	padding: 10px;
}
.medya h2 {
	color: #ff9b50;
}
.medya ul li a {
	color: #e5e5fa;
}
.medya  ul li a:hover {
	background: #ff9b50;
	color: #393975;
}
.medya i {
	color: #ff9b50;
	font-size: 16px;
}
.bilgi {
	margin-top: 10px;
	margin-bottom: 20px;
	box-shadow: 0px 0px 5px 3px #72706f;
}
.hakkimizda h2 {
	color: #777777;
	font-size:  17px;
	border: none;
}
.hakkimizda h3 {
	color: #777777;
	font-size:  15px;
}

.modal_in {
    border:1px solid #fbff00!important;
}

.back_modal{
    background :#181818!important;
}

input {
    background:#fff!important ;
    border:1px solid #ffc400!important;
    color:#181818!important;
}

.theme_btn {
    background:linear-gradient(#e5e900,#c99300)!important;
}

.modal_title {
    color:#ffee00!important;
    padding-bottom:15px!important;
    font-size:19px!important;
    font-weight:700!important;
}

.bcell_mid {
    color:azure!important;
    display:table-cell!important;
    vertical-align:middle!important;
    
}

@media screen and (max-width:1044px){ 
	.nav-li ul {
		display: none;
		float: none;
		height: 100%;
	}
	.nav-li ul li {
		display: block;
		margin-right: 10px;
		border: none;
		padding-top: 10px;
		padding-bottom: 10px;
		font-weight: bold;
		color: #777777;
		list-style-type: none;
		text-align: center;
		width: 100%;
		margin-left: -20px;
	}
	.col-alt {
		-ms-flex: 0 0 99%;
		flex: 0 0 99%;
		max-width: 100%;
	}
	.altbar .container-fluet {
		margin: 20px 10px 20px;
	}
}


@keyframes right{
	0%{
		transform:translateX(0)
	}
	40%{
		transform:translateX(10px)
	}
	60%{
		transform:translateX(5px)
	}
	100%{
		transform:translateX(0)
	}
}



/* default login css */

/*intro css */
#intro_top { width:100%; z-index:1; position:relative; height:auto; padding:80px 0; background:linear-gradient(7deg,rgb(48 48 48),rgb(38 38 38) 40%,rgb(82 82 82)); background-repeat:no-repeat; background-size:auto auto; background-position:center 50px; background-attachment:fixed; }
#login_wrap { width:100%; height:100%; }
#login_all { width:800px; max-width:94%; border-radius:20px; display:block; margin:0 auto; color:#fff; }
.intro_social_container { width:100%; height:auto; text-align:center; padding-top:20px; }
.intro_social_btn { display:inline-block; width:40px; height:40px; margin:0 3px; border-radius:50%; }
.login_not_member { text-align:center; padding-top:5px; }

/* active_user intro  */
#intro_section_user { padding:72px 0; }
.active_user { height:110px; text-align:center; float:left; overflow:hidden; }
#last_active { width: 100%; height:110px; margin:0 auto; }
.active_avatar { width:110px; height:110px; border-radius:50%; }
#last_active .left-arrow,
#last_active .right-arrow { width: 0; height: 0; border-top: 10px solid transparent;  border-bottom: 10px solid transparent;  margin-top: 5px; cursor: pointer; margin-top:40px; }
#last_active .left-arrow {  float: left; border-right: 10px solid #ccc; display:none;}
#last_active .left-arrow:hover { border-right: 10px solid #000; }
#last_active .right-arrow { float: right;  border-left: 10px solid #ccc; display:none; }
#last_active .right-arrow:hover { border-left: 10px solid #000; }
#last_active .last-clip {  margin: 0 20px; overflow: hidden; position: relative; }
#last_active .last_10 { height: 110px; width: 10000%;  overflow: hidden;  position: relative; }

/* section css */
.section { width:100%; height:auto; margin:0 auto; }
.section_content { width:100%; max-width:1100px; margin:0 auto; }
.section_inside { margin:0 auto; }

@media screen and (max-width:1120px){
	.section_inside { width:96%; }
}
@media screen and (min-width:1121px){
	#intro_top { background-attachment: fixed; }
}
@media screen and (max-width:1100px){
	#intro_top { background-size:auto 100%; background-position:center 0px; padding:80px 0; }
}
@media screen and (max-width:768px){
	#intro_top { background-size:auto 100%; background-position:center 0px;  }
}