@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;700;900&display=swap');



	* {
		font-family: 'Roboto Slab', sans-serif;
		box-sizing: border-box;
	}
	
	body {
		margin:0;
		padding:0;
		background-color:#000;
		color:#fff;
		font-weight: 400;

	}

a{
	color:#fff;
	
}

.bg {
  position: fixed;
  display:none;
  height: 100%;
  overflow: auto;
  z-index: 6;
  left:0;
width:15%;
background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(255,105,0,1) 0%, rgba(0,0,0,0) 100% );
}

.logo {
	width:100%;
	max-width:250px;
	margin: 20px;
}

.header {
	background-image:linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0.75)), url("main-1.webp");
	width:100%;
	height: 100vh;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: center center;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
	z-index: 2;
	position: relative;
	
}


.ust-kisim {
	width:90%;
	margin:0 auto;
	text-align: center;
}

.bolum-genis {
	width:100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:cover;
	padding: 30px 30px;
}

.banner {
	background-image:linear-gradient(to top, rgba(255,255,255,0.75), rgba(255,255,255,0.90)), url("main-1.webp");
	background-position: center center;
}


.banner-icerik {
	text-align: left;
	width:60%;
	font-size:16px;
	font-weight: 400;
}
.banner-icerik p {
	font-weight: 400;
}
.banner-icerik .sm-t {font-size:.8rem;}
.banner-icerik small { border:1px solid white; padding: 10px; display: inline-block; margin-bottom:10px;}

.flex-orta {
	display:flex !important;
	justify-content: center;
	align-items: center;
}

.banner-icerik h1 {
font-weight: 900;
font-size:2.5rem;

	
}
.p-20 {padding:10px;}
.t-b { font-weight: 700;}
.mt-1 {margin-top:.5rem;}
.mb-2 {margin-bottom:1rem;}
.text-right {text-align:right;}
.text-center {text-align:center;}


.header i {color:#fff; font-size:3rem;}
hr { border-top: 1px solid #222;}
#button { background-color:#000;border-radius: 0; border:1px solid white; width:150px; height: 40px; padding: 10px; display: inline-flex; justify-content: center; align-items: center;text-decoration: none; font-weight: 700; font-size:.8rem; transition: .5s ease; float:right;}
#button:hover {background-color:#ff6900;}
.icerik {
		 width:100%;
		padding: 15px;
		text-align: left;
	}
.icerik p {font-weight:300; font-size:.9rem;}
.icerik h3 {font-weight:700; font-size:1.3rem;}
.icerik a{text-decoration: none; text-align: center;font-size:1rem; margin-right:10px; border-radius: 50%; width:40px; height:40px;display: inline-flex; justify-content: center; align-items: center; border:1px solid white;}
.foto img {width:100%;}
/*.foto span {font-style: italic; font-size:13px;}*/
.bolum-flex {
	width:70%;
	margin: 50px auto;
	display: flex;
	flex-wrap:wrap;
	align-items: center;

}
.justify-content {justify-content: space-between;
    display: flex;
    flex-direction: column;}
.mb-0 {margin-bottom:0 !important;}
.pb-0 {padding-bottom:0 !important; }
.normal {align-items: normal;}
.satin-al {position: absolute; bottom:40px; right:20px;}	
.kolon {
		max-width:50%;
		flex-basis:50%;
		padding:10px;
	margin-bottom:1rem;
	}
	
.w75 {max-width:75%; flex-basis:75%;}	
.w25 {max-width:25%; flex-basis:25%;}
.w33 {max-width:33.3%; flex-basis:33.3%;}
.w20 {max-width:20%; flex-basis:20%;}	
.w40 {max-width:40%; flex-basis:40%;}
.w45 {max-width:45%; flex-basis:45%;}
.w55 {max-width:55%; flex-basis:55%;}
.w60 {max-width:60%; flex-basis:60%;}
.w30 {max-width:30%; flex-basis:30%;}	

.w100 {max-width:100%; flex-basis:100%;}	
.d-block {display:block; border-top:1 solid grey; font-size:.8rem; margin:5px 0; color:#fff;}


.bolum {
		width:70%;
		margin:0 auto;;
	}

.p-0 {
	padding:0;
}
footer {text-align:left; margin:1rem 1rem; align-items: baseline !important;}
footer h4 {font-size:.9rem; margin:5px 0;}
footer p {font-size:.7rem;}
footer .social {font-size:1.5rem; margin:30px 0;}
footer .social a{text-decoration: none; text-align: center;font-size:1.1rem; margin-right:10px; border-radius: 50%; width:44px; height:44px;padding:10px; display: inline-block;  border:1px solid white;}
footer .social i {}


.popup {
    display: none;
 	 position: fixed;
        width: 600px;      
        padding: 10px;
        background:rgba(0,0,0,.85);
		border:1px solid white;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
		z-index: 1;
		transition: opacity 0.5s ease;
}


.popupContent {
    color: #ffffff;
    padding: 20px;
    border: none;
    width: 100%;
}

.popupContent h3 {
    font-weight: bold;
	margin: 5px 0;
}
.popupContent h5 {
    margin-bottom: 0;
}
.popupContent h5 a {
	border:1px solid white; padding: 10px; display: inline-block;  text-decoration: none; transform: translateY(-10px); margin-top: 20px;
}

.popupContent h5 span, .banner-icerik h1 span, .icerik h3 span {
    color:#ff6900;
}



.close {
  float: right;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 1px 0 #fff;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

.d-d-none {display:none;}
	
	
	@media screen and (max-width:1060px) {
		.bolum-flex {width:90%;}
		.banner-icerik {width:90%;}

		.kolon {
			max-width:50%;
			flex-basis:50%;
		}
		.order-1 {order:1;}
		.order-2 {order:2;}
		.order-3 {order:3;}
		.order-4 {order:4;}
		.order-5 {order:5;}
		.order-5 {order:6;}
		#button {
			width:60%;
			float:inherit;
			margin-top:2rem;
		}
		
	}
	
	
	@media screen and (max-width:760px) {
		.header {

			background-attachment:scroll;

		}
		.bolum-genis {
		background-attachment: scroll;
		}
		
		.popup {width:100%; max-width:350px;}
		.kolon {
			max-width:100%;
			flex-basis:100%;
			padding:0;
			
		}
		.icerik {
		padding: 15px;
		}
		.logo {
			
			max-width:170px;
		}

		.icerik .buttons {
			text-align:center;
		}
		.bg {
		width:30px;
		}
		.m-d-none {display:none;}
		.d-d-none {display:block;}
	}