@font-face {
	font-family: 'trebuc';
	src: url('font/trebuc.ttf');
}
html {
	--scrollbarBG: white;
	--thumbBG: #004a5a;
}
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 {
	background: #f1f1f1;
	font-family: 'trebuc';
}
.nav-bar {
	padding-top: 10px;
	border-top: 5px solid #004a5a;
	margin-bottom: 10px;
	background: #f1f1f1;
}
.nav-bar ul {
	text-align: right;
}
.nav-bar ul li {
	display: inline-block;
	margin-right: 5px;
}
.nav-bar ul li a {
	font-size: 20px;
	font-weight: bold;
	color: #545454;
	padding-bottom: 5px;
	border-bottom: 3px solid #004a5a;;
	padding-right: 10px;
}
.nav-bar ul li a:hover {
	text-decoration: none;
	color: silver;	
	padding-bottom: 5px;
}
.sohbetbar {
	background: #007993;
	padding: 40px;
}
.medya {
	border-radius: 5px;
	background: #004a5a;
	text-align: center;
	color: #004a5a;
	padding: 20px;
	border: 3px solid #004a5a;
	box-shadow: 0px 0px 5px 1px white;
}
.medya h2 {
	font-size: 22px;
}
.medya h3 {
	font-size: 20px;
	padding: 8px;
	border-radius: 5px;
	color: white;
}
.medya i {
	font-size: 50px;
}
.medya .sosyal a {
	color: white;
	text-decoration: none;
}
.medya .sosyal a:hover {
	color: white;
	text-decoration: none;
}
.medya i:hover {
	animation:botton linear 3s infinite;
}
.medya .sosyal {
	color: white;
	padding: 10px;
	border-radius: 5px;
	border: 3px solid #004a5a;
	margin: 0px auto;
	margin-top: 10px;
}
.medya .sosyal:hover {
	transition: all 1s;
	border: 3px solid white;
	cursor: pointer;
}
.medya .sosyal h3 {
	font-size: 20px;
	font-weight: bold;
}
.kisim h3 {
	font-size: 15px;
}
.sohbet {
	background: #ffffff;
	color: #004a5a;
	padding: 10px;
	text-align: center;
	border-radius: 10px;
	border: 3px solid #004a5a;
	box-shadow: 0px 0px 5px 1px white;
}
.sohbet h2 {
	border-bottom: 1px solid white;
	font-weight: bold;
}
.sohbet h2 i {
	animation:botton linear 3s infinite;
}
.sohbet h3 {
}
.sohbet span {
	background: #004a5a;
	color: white;
	padding: 10px;
	font-size: 20px;
	border-radius: 10px;
}
.sohbet input {
	outline: none;
	padding: 10px;
	margin-left: 10px;
	width: 80%;
	border: none;
	margin-top: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #004a5a;
	border-radius: 5px;
}
.sohbet input:hover {
	outline: none;
	box-shadow: 0px 0px 2px 2px #004a5a;;
	border: none;
	border-radius: 5px;
}

.sohbet button {
	width: 100%;
	padding: 10px;
	font-size: 25px;
	font-weight: bold;
	letter-spacing: 2px;
	border: none;
	border-radius: 10px;
	background: #004a5a;
	color: white;
	margin-top: 10px;
	border: 3px solid #ffffff;
	box-shadow: 0px 0px 2px 1px #004a5a;
	cursor: pointer;
}
.sohbet button:hover {
	background: white;
	color: #004a5a;;
}
.sohbetimg {
	animation:botton linear 3s infinite;
}
.altreklam {
	background: white;
	color: blue;
	padding: 10px;
	margin-top: 10px;
	border-radius: 10px;
	margin-bottom: 15px;
}
.bilgi {
	padding: 10px;
	background: white;
	color: #004a5a;
	text-align: center;
	border-radius: 10px;
}
.bilgi h2 {
	font-size: 25px;
	border-bottom: 1px solid #004a5a;
}
.bilgi h3 {

}
.bilgi p {
	text-align: left;
}
.altbar {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 20px;
}
.altbar h2 {
	font-size: 35px;
	font-weight: bold;
	letter-spacing: 2px;
	color: #004a5a;;
}
.altbar h3 {
	font-size: 25px;
	font-weight: 400;
	color: #2e2e2e;
}
.altbar2 {
	background: #004a5a;
	color: white;
	text-align: center;
	border-radius: 10px;
}
.altbar2 h2 {
	font-size: 30px;
	border-bottom: 1px solid;
	padding-bottom: 5px;
	font-weight: bold;
}
.altbar2 h3 {
	font-size: 25px;
}
.altbar2 img {
	width: 70px;
	padding: 3px;
}
.metin {
	margin-top: 20px;
	margin-bottom: 20px;
	color: black;
	background: white;
	border-radius: 5px;
	padding-top: 10px;
	padding-bottom: 10px;
	box-shadow: 0px 0px 1px 1px #004a5a;
}
.metin h1 {
	font-size: 30px;
	text-align: center;
	font-weight: bold;
	color: #004a5a;
}
.metin h2 {
	font-size: 25px;
	text-align: center;
	font-weight: bold;
	color: #004a5a;;
}
.metin h3 {
	font-size: 20px;
	color: #666666;
}

.medya2 {
	background: #004a5a;
	padding: 40px;
}
.medya2 .sosyalmedya {
	padding: 10px;
	color: black;
	background: white;
	border: 3px solid #0048a9;
	box-shadow: 0px 0px 5px 1px silver;
}
.medya2 .sosyalmedya:hover {
	background: silver;
}
.sosyalmedya i {
	font-size: 50px;
	font-weight: 400;
}
.sosyalmedya a {
	color: black;
	text-decoration: none;
}
.sosyalmedya h2 {
	font-size: 25px;
	font-weight: bold;
}
.sosyalmedya h3 {
	font-size: 12px;
}
.instagram {
	border-radius: 10px;
	color: #590eab;
	border: 1px solid black;
	border-right: 6px solid #590eab;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.instagram i {
	font-size: 50px;
	background: #590eab;
	padding: 5px;
	color: white;
	border-radius: 20px;
}
.twitter {
	border-radius: 10px;
	color: #0053bb;
	border: 1px solid black;
	border-right: 6px solid #0053bb;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.twitter i {
	font-size: 50px;
	background: #0053bb;
	padding: 5px;
	color: white;
	border-radius: 20px;
}
.facebook {
	border-radius: 10px;
	color: blue;
	border: 1px solid black;
	border-right: 6px solid blue;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.facebook i {
	font-size: 50px;
	background: blue;
	padding: 5px;
	color: white;
	border-radius: 20px;
}
.youtube {
	border-radius: 10px;
	color: red;
	border: 1px solid black;
	border-right: 6px solid red;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.youtube i {
	font-size: 50px;
	background: red;
	padding: 5px;
	color: white;
	border-radius: 20px;
}
.bars {
	background: #004a5a;;
	color: white;
	padding: 10px;
	border-radius: 5px;
}
.sohbetbar .container {
	padding-left: 0;
	padding-right: 0;
}
.col-medya {
	-ms-flex: 0 0 24%;
	flex: 0 0 24%;
	max-width: 25%;
}
.medya2 .row {
	margin-left: 0;
	margin-right: 0;
}
.nav-alt {

}
.nav-alt a {
	font-size: 20px;
	margin-top: 5px;
	color: black;
	text-decoration: none;
}
.nav-alt a:hover {
	color: silver;
}
.nav-alt .ilk {
	background: white;
	padding: 5px;
	text-align: center;
	border-radius: 10px;
	border: 3px solid #0048a9;
	box-shadow: 0px 0px 5px 1px white;
}
.nav-alt .iki {
	background: #e1dfdf;
	color: #0149ab;
	padding: 5px;
	border-radius: 10px;
	text-align: center;
}
.nav-col {
	-ms-flex: 0 0 16.666667%;
	flex: 0 0 14.666667%;
	max-width: 16.666667%;
}
.sunucu {
	margin-top: 10px;
	margin-bottom: 10px;
}
.sunucu img {
	margin-bottom: -40px;
	margin-top: -40px;
}
.sunucu h2{
	color:#777777;
	font-size:17px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.sunucu 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: #004a5a;;
	border-radius: 5px;
	color: white;
	font-size: 20px;
}
.medya-col {
	-ms-flex: 0 0 50%;
	flex: 0 0 48%;
	max-width: 50%;
}
@media screen and (max-width:1044px){ 
	.medya-col {
		-ms-flex: 0 0 50%;
		flex: 0 0 98%;
		max-width: 100%;
	}
	.nav-col {
		-ms-flex: 0 0 16.666667%;
		flex: 0 0 99%;
		max-width: 100%;
		margin-top: 10px;
	}
	.col-medya {
		-ms-flex: 0 0 24%;
		flex: 0 0 99%;
		max-width: 99%;
	}
	.sohbet {
		margin-bottom: 10px;
	}
	.medya {
		margin-bottom: 10px;
	}

	.nav-bar ul {
		margin-top: 10px;
		display: none;
		background: #004a5a;;
		border-radius: 10px;
	}
	.nav-bar ul li {
		display: inherit;
		text-align: center;
		margin-right: 15px;
	}
	.nav-bar ul li a {
		border: none;
		color: white;
	}
	.sohbet input {
		width: 75%;
	}
	.sohbet h2 {
		font-size: 25px;
	}
	.sohbet button {
		font-size: 20px;
	}
	.medya .sosyal h3 {
		font-size: 15px;
	}
	.altbar h2 {
		font-size: 25px;
	}
	.altbar h3 {
		font-size: 20px;
	}
	.altbar2 h2 {
		font-size: 25px;
	}
	.altbar2 h3 {
		font-size: 20px;
	}
	.metin h1 {
		font-size: 20px;
	}
	.metin h2 {
		font-size: 20px;
	}
	.metin h3 {
		font-size: 15px;
	}
}
@keyframes botton{
	0%{
		transform:translateY(0)
	}
	50%{
		transform:translateY(10px)
	}
	100%{
		transform:translateY(0)
	}
}
@keyframes oynat{
	0%{
		transform:translateX(0)
	}
	40%{
		transform:translateX(10px)
	}
	60%{
		transform:translateX(5px)
	}
	100%{
		transform:translateX(0)
	}
}