*{
	margin:0;
	padding: 0;
	overflow: hidden;
}

#genel{
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height: 100%;
	overflow-y :auto;
}

#banner{
	height: 4rem;
	width: 100%;
	background-color: rgba(0,0,0,.5);
	position: fixed;
	top: 0;
	left: 0;
	box-shadow: .1rem .1rem .1rem rgba(0,0,0,0.2);
}

#logo{
	width: 3rem;
	height: 3rem;
	position: absolute;
	left: 1rem;
	top: 0.5rem;
}

#menu{
	position: absolute;
	right: 1rem;
	top: 0.5rem;
	height: 3rem;
	display: block;
}
#hmenu{
	display: none;
}

#menuliste{
	position: relative;
	top: 1rem;

}

.menuicerik{
	margin-left: 2rem;
	text-decoration: none;
	color: rgba(225,225,225,.9);
	position: relative;
	padding-bottom: 2rem;
	display: inline-block;
	transition: all .5s ease;
}

.menuicerik::before{
	content: '';
	position: absolute;
	width: 0rem;
	height: 0.2rem;
	border-radius: 1rem;
	background-color: rgb(81,1,1,0.8);
	left: 50%;
	top: 1.7rem;
	transition: all .5s ease;
}

.menuicerik::after{
	content: '';
	position: absolute;
	width: 0rem;
	height: 0.2rem;
	border-radius: 1rem;
	background-color: rgb(81,1,1,0.8);
	left: calc(50%);
	top: 1.7rem;
	transition: all .5s ease;
}

.menuicerik:hover::before{
	content: '';
	position: absolute;
	width: 1rem;
	height: 0.2rem;
	border-radius: 1rem;
	background-color: rgb(81,1,1,0.8);
	left: 50%;
	top: 1.7rem;
}

.menuicerik:hover::after{
	content: '';
	position: absolute;
	width: 1rem;
	height: 0.2rem;
	border-radius: 1rem;
	background-color: rgb(81,1,1,0.8);
	left: calc(50% - 1rem);
	top: 1.7rem;
}

.menuicerik:hover{
	color: rgba(222,22,22,.9);
}

#home{
	height: 100%;
    position: relative;
}

.bg-res{
	position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}


.bg-res::after{
	position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #000;
    opacity: .6;	
}	





/* ---- particles.js container ---- */

#particles-js{
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
canvas{
  display:block;
  vertical-align:bottom;
}

#homeicerik{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#isim{
	font-size:6rem;
	position: absolute;
	left: 0;
	width: 100%;
	top: calc(50% - 10rem);
	color: white;
	display: inline-block;
	text-align: center;
}

#brans{
	font-size:2rem;
	position: absolute;
	left: 0;
	width: 100%;
	top: calc(50% - 3rem);
	color: white;
	display: inline-block;
	text-align: center;
}

#sosyal{
	position: absolute;
	left: calc(50% - 8rem);
	top: calc(50% + 6rem);
	display: block;
}

#sosyal img{
	width: 2rem;
	height: 2rem;
	opacity: .8;
	transform: scale(.9);
	transition: all .4s ease;
}

#sosyal img:hover{
	opacity: 1;
	transform: scale(1);
}

#sosyal a{
	margin: 1rem;
}

.row{
	width: 73rem;
	position: relative;
	left: calc(50% - 36.5rem);
}

.baslik{
	font-weight: bolder;
	font-size: 2rem;
	display: inline-block;
	text-align: center;
	margin-top: 3rem;
	width: 100%;
	position: relative;
	padding-bottom: 2rem;
	margin-bottom: 2rem;
}

.baslik::after{
	content: '';
	position: absolute;
	width: 2rem;
	height: .3rem;
	background-color: rgba(81,1,1,1);
	top: 2.9rem;
	left: calc(50% - 1rem);
}

.baslik::before{
	content: '';
	position: absolute;
	width: 5rem;
	height: .1rem;
	background-color: rgba(50,50,50,.6);
	top: 3rem;
	left: calc(50% - 2.5rem);

}

#hakkimdaicerik{
	padding-bottom: 4rem;
}

#hakkimdaicerik img{
	width: 20rem;
	height: 20rem;
	border-radius: 1rem;
	float: left;
}

#hakkimdaicerikyazi{
	float: right;
	width: calc(100% - 22rem);
	padding:2rem 0;
	font-size: 1.2rem;
}

a#cv{
	display: inline-block;
	padding: 1rem;
	border-radius: .5rem;
	border:.1rem solid rgba(81,1,1,.8);
	margin-top: 3rem;
	left: 0;
	text-decoration: none;
	color: rgba(50,50,50,.8);
	width: 20rem;
	text-align: center;
	position: relative;
}

.color2{
	background-color: rgba(50,50,50,.1);
}

.yetkinlik{
	float: left;
	margin:2rem;
	width: 20rem;
	position: relative;
}
.yetkinlikbar{
	height: .3rem;
	border-radius: .1rem;
	background-color: rgba(81,1,1,.8);
}
.yetkinlikyazi span{
	font-size: .9rem;
}

.yetkinlikyazi{
	position: relative;
	font-family: arial;
}

.yetkinlikyaziyuzde{
	position: absolute;
}

#deneyimicerik{
	padding-bottom: 4rem;
	position: relative;
}



.deneyim{
	position: relative;
	width: 100%;
	height: 5rem;
}

.deneyim1{
	position: absolute;
	top: 0;
	right: calc(50% + 2rem);
	font-weight: bolder;
	font-size: 1.2rem;
}

.deneyim2{
	position: absolute;
	top: 0;
	left: calc(50% - 1rem);
	width: 2rem;
	height: 100%;
}

.deneyim2::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0.3rem;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	border: .2rem solid rgba(81,1,1,0.8);
}

.deneyim2::after{
	content: '';
	position: absolute;
	top: 1.2rem;
	left: 0.9rem;
	width: 0.2rem;
	height: 3.8rem;
	background-color: rgba(81,1,1,0.8);
}

.deneyim3{
	position: absolute;
	top: 0;
	left: calc(50% + 2rem);
}

.egitim{
	position: relative;
	width: 100%;
	height: 5rem;
	padding: 0;
	margin-bottom: 1rem;
	box-shadow: 0 0 1rem 0 rgba(81,1,1,0.8);
}

.egitim1{
	position: absolute;
	top: 0;
	left: 0;
	width: 20rem;
	font-size: 1.2rem;
	font-weight: bolder;
	padding: 1.9rem 0;
	display: inline-block;
	text-align: center;
	background-color: rgba(81,1,1,.8);
	color: white;
}
.egitim2{
	position: absolute;
	top: 0;
	left: 20rem;
	width: calc(100% - 22rem);
	padding: 1rem;
}

#projeicerik{
	padding-bottom: 4rem;
	position: relative;
}

.proje{
	position: relative;
	width: 16rem;
	margin: 1.1rem;
	float: left;
	height: 30rem;
	border-radius: 3rem;
	box-shadow: 0 0 .5rem 0 rgba(0,0,0,.6);
	cursor: pointer;
	opacity: .7;
	transition: all .4s ease;
}

.proje:hover{
	opacity: 1;
}

.proje img{
	width: 100%;
	height: 100%;
	border-radius: 3rem;
}

.projeplatform{
	position: absolute;
	top: 1rem;
	right: -2rem;
	background-color: rgba(0,0,0,.8);
	height: 0.8rem;
	width: 7rem;
	border-radius: .3rem;
	padding: .4rem;
	font-size: .8rem;
	color: white;
	text-align: center;
	transform: rotate(40deg);
}

.yatay{
	width: 34.2rem !important;
	height: 16rem !important;
	padding: 7rem 0;
}

.yatay img{
	width: calc(100% - 1rem) !important;
	border-radius: .5rem !important;
	margin: .5rem;
}

.projeicerik{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 3rem;
	display: none;
}



.proje1{
	display: inline-block;
	width: 100%;
	text-align: center;
	margin: 2rem 0 2rem 0;
	font-weight: bolder;
	color: white;
	font-size:1.3rem;
}

.proje2{
	display: inline-block;
	width: 100%;
	text-align: center;
	color: white;
}


.proje3{
	display: inline-block;
	width: calc(100% - 1rem);
	color: white;
	margin: 2rem .5rem 1rem .5rem;
	text-align: justify-all;
	height: 14rem;
	overflow: hidden;

}

.proje4{
	display: inline-block;
	width: 100%;
	color: white;
	margin: 1rem 0 1rem 0;
	text-align: center;
	color: white;
	font-size: .9rem;

}


/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: none;
    scrollbar-color: #850000 #ffffff;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 2px;
  }

  *::-webkit-scrollbar-track {
    background: transparent;
    opacity: .5;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #850000;
    border-radius: 6px;
    border: 0;
  }


@media screen and (max-width:73rem) {



	.row{
		width: 100%;
		position: relative;
		left: 0;
	}



}


@media screen and (max-width:55rem) {



	#isim{
		font-size: 3rem;
	}

	#brans{
		font-size: 1.5rem;
	}

	#hakkimdaicerik img {
	    width: 20rem;
	    height: 20rem;
	    border-radius: 1rem;
	    position: relative;
	    left: 50%;
	    transform: translate(-50%,0);
	}

	#hakkimdaicerikyazi {
	    width: 100%!important;
	    font-size: 1.2rem;
	}
	#hakkimdaicerikyazi div{
		margin: 1rem;
	}
	#cv{
		margin: 1rem !important;
		width: calc(100% - 4rem) !important;
	}

	#menu {
	    position: fixed;
	    left: 0;
	    width: 100%;
	    background-color: rgba(0,0,0,.8);
	    top: 4rem;
	    height: calc(100% - 4rem);
	    display: none;
	}

	#hmenu{
		display: block;
		position: absolute;
		width: 2rem;
		height: 2rem;
		top: 1rem;
		right: 2rem;
	}

	.menuicerik {
	    margin-left: 0;
	    text-decoration: none;
	    color: rgba(225, 225, 225, 0.9);
	    position: relative;
	    padding-bottom: 2rem;
	    display: inline-block;
	    transition: all 0.5s ease 0s;
	    width: 100%;
	    text-align: center;
	}

}


@media screen and (max-width:36rem) {



	.egitim1 {
	    position: absolute;
	    top: 0px;
	    left: 0px;
	    width: 10rem !important;
	    font-size: 1.2rem;
	    font-weight: bolder;
	    padding: 1.9rem 0px;
	    display: inline-block;
	    text-align: center;
	    background-color: rgba(81, 1, 1, 0.8);
	    color: white;
	}

	.egitim2 {
	    position: absolute;
	    top: 0px;
	    left: 10rem !important;
	    width: calc(100% - 12rem) !important;
	    padding: 1rem;
	}


	.yatay{
		padding: 11.3rem 0px;
	    width: 16rem !important;
	    height: 7.4rem !important;
	}

	#projeicerik{
		width: 18.2rem;
		left: 50%;
		transform: translate(-50%,0);
	}


}


@media screen and (max-width:27rem) {



	#thwidth{
		width: 0 !important;
	}



}