html {
	--scrollbarBG: white;
	--thumbBG: #004d60;
}
body::-webkit-scrollbar {
	width: 25px;
}
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: Lexend Deca,sans-serif;
	background-image: url('img/arka2.jpeg');
}
.nav-bar {
	background: #004d60;
	border-top: 2px solid #004d60;
	border-bottom: 2px solid #004d60;
}
.nav-li {
}
.nav-li ul {
	float: right;
	display: block;
	height: 45px;
}
.nav-li ul li {
	display: inline-block;
	border-right: 2px solid #777777;
	padding: 20px;
	font-weight: bold;
	list-style-type: none;
}
.nav-li ul li a {
	color: #f1f1f1;
	padding: 20px;
}
.nav-li ul li a:hover {
	background: #004d60
	color: white;
	text-decoration: none;
}
.nav-li ul li:hover {
	background: #004d60;
	color: white;
	padding: 20px;
	transition: all 0.5;
}
.bars {
	background: #004d60;
	border-radius: 5px;
	padding: 10px;
}
.headbar {
	margin-top: 20px;
	background: #004d60;
	color: white;
	border-radius: 5px;
	padding:  5px;
	padding-left: 10px;
}
.headbar2 {
	margin-top: 20px;
	background: #004d60;
	color: white;
	border-radius: 5px;
	padding:  20px;
	padding-left: 40px;
	padding-right: 40px;
	text-align: center;
}
.sohbetbar2 {
	background: white;
	margin-left: 60px;
	animation:right linear 3s infinite;
}
.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 #004d60;
	padding-bottom: 10px;
}
.sohbetbar input {
	margin: 5px;
	border: none;
	border-bottom: 1px solid #777777;
	padding: 10px;
	color: black;
	outline: 0;
	width: 65%;
}
.sohbetbar i {
	color: #004d60;
	font-size: 20px;
}
.sohbetbar button {
	border: none;
	padding: 11px;
	width: 70%;
	font-weight: bold;
	border-radius: 5px;
	margin-top: 10px;
	background: #004d60;
	color: white;
}
.w-100 {
	width: 100%!important;
	margin-top: 10px;
}
.menubar {
	margin-top: 40px;
	padding: 10px;
}
.menubar2 {
	margin-top: 20px;
	color: white;
	padding: 10px;
	padding-left: 25px;
	font-family: 'arial';
	border-radius: 20px;
	border: 1px solid black;
	box-shadow: 0px 0px 5px 1px black;
	background: white;
}
.menubar2:hover {
	animation:botton linear 2s infinite;
}
.menubar2 a:hover {
	text-decoration: none;
}
.menubar2 h2 {
	font-size: 25px;
	color: #004d60;
	font-weight: bold;
}
.menubar2 h3 {
	font-size: 15px;
	color: #6d6d6d;
	font-weight: bold;
}
.mesaj {
	text-align: center;
	padding-top: 20px;
}
.mesaj h2 {
	font-size:  35px;
	padding-top: 10px;
	color: #004d60;
	padding-bottom: 5px;
	font-weight: bold;
}
.mesaj h2 span {
	color:  black;
}
.mesaj h3 {
	font-size:  25px;
	color: black;
	font-weight: bold;
}
.mesaj h3 span {
	color:  #004d60;
}
.altbar {
	background: #004d60;
	text-align: center;
	color: white;
	padding: 10px;
	border: none;
	border-radius: 10px;
	margin-top: 20px;
}
.altbar h2 {
	text-align: left;
	margin-left: 15px;
	border-bottom: 1px solid silver;
	padding-bottom: 10px;
}
.altbar2 {
	border-top: 1px solid silver;
	padding-top: 10px;
}
.altbar2 h2 {
	font-size: 30px;
}
.altmenubar {
	margin-top: 40px;
}
.altmenubar>div {
	margin-top: 30px;
}
.altmenubar h2 {
	font-size: 20px;
	text-align: center;
	font-weight: bold;
	padding-bottom: 20px;
	border-bottom: 1px solid silver;
}
.altmenubar li {
	list-style-type: none;
}
.altmenubar li a {
	color: #777777;
	margin-left: 90px;
}
.altmenubar li a:hover {
	color: black;
	text-decoration: none;
}
.w-90 {
	width: 90%;
}
.w-70 {
	width: 60%;
}
.anime:hover {
	animation:botton linear 2s infinite;
}
.bilgi {
	margin-top: 60px;
	margin-bottom: 50px;
}
.bilgi h2 {
	color: #777777;
	font-size:  17px;
}
.bilgi h3 {
	color: #777777;
	font-size:  15px;
}
.yukari {
	display: none;
	position: fixed;
	bottom: 0;
	right: 0;
	border: none;
	padding: 10px;
	margin-bottom: 10px;
	margin-right: 10px;
	background: #004d60;
	border-radius: 5px;
	color: white;
	font-size: 20px;
}
.sosyalmedya {
	background: white;
	padding: 10px;
	border-radius: 5px;
}
.sosyalmedya a {
	text-decoration: none;
}
.sinst {
	color: #ef5800;
}
.syou {
	color: red;
}
.footer {
	background: white;
	padding-bottom: 50px;
}

@media screen and (max-width:1044px){ 
	.altbar h2 {
		font-size: 30px;
	}
	.row {
		margin-right: -10px;
	}
	.sohbetbar input {
		width: 85%;
	}
	.sohbetbar button {
		width: 90%;
	}
	.mesaj h2 {
		font-size: 25px;
	}
	.mesaj h3 {
		font-size: 20px;
	}
	.nav-li {
		margin-top: 15px;
		padding-left: 0;
	}
	.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;
	}
	.menubar2 h2 {
		font-size: 20px;
	}
}
@-webkit-keyframes botton{
	0%{
		top:0rem
	}
	50%{
		top:-1rem
	}
	10%{
		top:0rem
	}
}
@-moz-keyframes botton{
	0%{
		top:0rem
	}
	50%{
		top:-1rem
	}
	10%{
		top:0rem
	}
}
@-o-keyframes botton{
	0%{
		top:0rem
	}
	50%{
		top:-1rem
	}
	10%{
		top:0rem
	}
}
@keyframes botton{
	0%{
		transform:translateY(0)
	}
	50%{
		transform:translateY(-5px)
	}
	100%{
		transform:translateY(0)
	}
}

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