@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
	src: local('Poppins-Thin'), local('Poppins-Thin'),
       url('../fonts/Poppins-Light.ttf') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
	src: local('Poppins-Regular'), local('Poppins-Regular'),
       url('../fonts/Poppins-Regular.ttf') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
	src: local('Poppins-SemiBold'), local('Poppins-SemiBold'),
       url('../fonts/Poppins-SemiBold.ttf') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
	src: local('Poppins-Bold'), local('Poppins-Bold'),
       url('../fonts/Poppins-Bold.ttf') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
}


*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

::selection {
    background: black;
}
a:hover {text-decoration: none; }
body {
  font-family: 'Poppins', sans-serif;
  color: #fff;
  background-color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
   overflow: hidden;height: 100%;
}

.date{ font-weight:700; padding:.3rem; background-color:#900; font-size:.7rem;}
.subTitle {font-weight:400; padding:.1rem;font-size:1.2rem; }
.Title {font-weight:500; padding:.1rem;font-size:3rem; text-align:center; margin: 0 1rem 0 1rem; }
.goTo {padding:.6rem; letter-spacing:4px; font-size:.8rem; color:#fff; border:1px solid #fff;}
.goTo:hover {color:#fff; text-decoration:none;}
.seeMore {position: absolute; z-index:9; font-size:.7rem; font-weight:600; margin-left: auto; margin-right: auto; left: 0; right: 0; bottom:10%; text-align: center;}

.vs-slider {
  position: relative;
  height: 100vh;
}
.vs-section {
  position: absolute;
  top: 0;
  left: 0;
  visibility: visible;
  overflow: hidden;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hover-overlay {
  position: relative;
  width: 100%;
  float:left;
  margin-right:10px;
	
}

.hover-image {
  display: block;
  width: 100%;
  height: auto;
	
}

.b-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background: rgba(0,0 ,0 , 0.7);
	opacity: 1;
}

.hover-overlay:hover  .b-overlay {
  opacity: 0;
}



.vs-section:nth-of-type(1) { background-image: url(../img/home.jpg); }
.vs-section:nth-of-type(2) { background-image: url(../img/about-me.jpg); }
.vs-section:nth-of-type(3) { background-image: url(../img/web-bg.jpg); }
.vs-section:nth-of-type(4) { background-image: url(../img/book-bg.jpg); }



.vs-section:nth-of-type(5) { background-image: url(../img/ifp.jpg); }
.vs-section:nth-of-type(6) { background-image: url(../img/houseb.jpg); }
.vs-section:nth-of-type(7) { background-image: url(../img/ormanada.jpg); }
.vs-section:nth-of-type(8) { background-image: url(../img/pararpar.jpg); }
.vs-section:nth-of-type(9) { background-image: url(../img/nurteks.jpg); }
.vs-section:nth-of-type(10) { background-image: url(../img/barut.jpg); }
.vs-section:nth-of-type(11) { background-image: url(../img/cz.jpg); }
.vs-section:nth-of-type(12) { background-image: url(../img/hakikat-s.jpg); }
.vs-section:nth-of-type(13) { background-image: url(../img/tyson.jpg); }
.vs-section:nth-of-type(14) { background-image: url(../img/smit.jpg); }
.vs-section:nth-of-type(15) { background-image: url(../img/smit-13.jpg); }
.vs-section:nth-of-type(16) { background-image: url(../img/about-me.jpg); }



.direction-u-d {
 
  list-style:none;
  z-index: 999;
 /* top: 50%;
  right: 3%;*/
}

.direction-u-d a {
  display: block;
  font-size:2rem;
  white-space: nowrap;
 left:48%;  
 position: fixed; 
 color:white;
}

a.vs-prev {top:5%;   }
a.vs-next {bottom:5%;   }
.blackColor {color:black !important;}
.blackColor a{color:black !important;}

.mImg {
	position:absolute; 
	z-index:1; 
	left:0; 
	top:0;  
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-image:url(../img/murat.png);
	width:100%; 
	height:100%;	

}
.welcome {width:50%; z-index:2; color:#fff;   pointer-events: none; margin-top:-4rem; }
.welcome h1 a { color:#fff !important;   pointer-events: auto; }
.welcome h1 {font-size:4rem; text-align:right; margin-right:6rem; line-height:6rem;}


	
.bg-text { font-size:3rem; position:absolute;  color: rgba(255, 255, 255, 0.02); text-align:center; width:100%;  }



.underlined {
  flex: 1;
  text-decoration: none;
  background-image: linear-gradient(to right, darkred 0, darkred 100%);
  background-position: 0 1.2em;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: background 0.5s; z-index:1;
}

.underlined:hover {
  background-size: 0% 100%;
  
}.underlined--first {
  background-position: 0 0.2em;
  box-shadow: inset 0 -0.5em 0 0 black;
}
.underlined--second {
  background-position: 0 1.3em;
  box-shadow: inset 0 0.8em 0 0 black;
}

.about-me {margin:0 10rem 0 10rem; text-align:center;}

.about-me .devinim { 
	font-weight:800; 
	background-image: linear-gradient(45deg, #8b3064, #f95de1); 
	background-size: 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}
.about-button {text-align:center;}
.about-me h2, h3, h4 {margin-bottom:2rem;}
.about-me h2 {font-size:1.6rem;}
.about-me h3 {font-size:1.4rem; font-weight:300;}
.about-me h4 {font-size:1.2rem;font-weight:400}

@media all and (max-width: 1280px) {
.welcome h1 {font-size:3.2rem; text-align:right; margin:2rem; line-height:3.5rem;}

 }

@media all and (max-width: 1024px) {
.welcome {width:80%;  pointer-events: none; margin-top:0;  }
.welcome h1 {font-size:2.7rem; text-align:right; margin:1.8rem; line-height:3rem;}
.mImg {background-position: -150px 10px; }
.vs-section:nth-of-type(1) { background-position: -125px 10px; }
.about-me {margin:0 1rem 0 1rem; text-align:center;}
.about-me h2 {font-size:.9rem;}
.about-me h3 {font-size:.8rem; }
.about-me h4 {font-size:.7rem;}
.seeMore{display:none;}


}

@media all and (max-width: 720px) {
.welcome {width:100%;  pointer-events: none; margin-top:5rem;  }
.underlined--first {
  background-position: 0 0.2em;
  box-shadow: inset 0 -0.8em 0 0 black;
}
.welcome h1 {font-size:1.7rem; text-align:center; margin:2rem; line-height:3rem;}
.mImg {background-position: -200px -60px; }
.vs-section:nth-of-type(1) { background-position: -175px -60px; } 
.about-button a { display:inline-block; width:50px; margin-bottom:.3rem;}
.m-but {padding:.2rem; letter-spacing:1px;   font-size:.9rem; color:#fff; border:1px solid #fff;}
.m-but span{ display:none;}
	.subTitle {font-size:.9rem;}	
}