.sube{
	width:90%;
	height:300px;
	float:left;
	position:relative;
	border-radius:150px;
	overflow:hidden;
	margin:2% 5%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.sube:nth-child(odd){
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
	-webkit-animation-duration: 0.8s;
	animation-duration: 0.8s;
	animation-delay: 0.2s;
	-webkit-animation-delay: 0.2s;
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

.sube:nth-child(even){
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
	-webkit-animation-duration: 0.8s;
	animation-duration: 0.8s;
	animation-delay: 0.2s;
	-webkit-animation-delay: 0.2s;
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

.sube img{
	width:100%;
	float:left;
	position:relative;
	top:50%;
	transform:translateY(-50%);
	z-index:700;
}

.sube .kapak{
	width:100%;
	height:100%;
	float:left;
	position:absolute;
	background-color:rgba(0,147,221,0.5);
	z-index:750;
	top:0;
	left:0;
}
.sube .bilgiler{
	width:100%;
	float:left;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	margin-top:25px;
	z-index:800;
}

.sube .bilgiler h2{
	width:100%;
	height:90px;
	line-height:90px;
	float:left;
	position:relative;
	font-size:60px;
	text-align:center;
	font-family:alegreya_sansextrabold;
	color:#fff;
    text-shadow: 2px 2px 4px #000000;
	text-transform:uppercase;
}

.sube .bilgiler span{
	width:0px;
	height:3px;
	float:left;
	position:relative; 
	background-color:#fff;
	left:50%;
	transform:translateX(-50%);
	  -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition:         all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.sube .bilgiler p{
	width:100%;
	line-height:40px;
	float:left;
	position:relative;  
	text-align:center;
	font-family:alegreya_sansextrabold;
    text-shadow: 2px 2px 4px #000000;
	color:#fff;
	bottom:-500px;
	  -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition:         all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.sube:hover span{
	width:500px;
	  -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition:         all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.sube:hover p{
	  -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition:         all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  bottom:0px;
}



























@media screen and (max-width: 2560px), screen and (max-device-width: 2560px) {



}


@media screen and (max-width: 1920px), screen and (max-device-width: 1920px) {

.sube{
	width:90%;
	height:270px;
	float:left;
	position:relative;
	border-radius:150px;
	overflow:hidden;
	margin:2% 5%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


}


@media screen and (max-width: 1440px), screen and (max-device-width: 1440px) {

.sube{
	width:90%;
	height:250px;
	float:left;
	position:relative;
	border-radius:150px;
	overflow:hidden;
	margin:2% 5%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}



}


@media screen and (max-width: 1280px), screen and (max-device-width: 1280px) {


.sube{
	width:90%;
	height:200px;
	float:left;
	position:relative;
	border-radius:150px;
	overflow:hidden;
	margin:2% 5%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

}


@media screen and (max-width: 1024px), screen and (max-device-width: 1024px) {

.sube{
	width:90%;
	height:170px;
	float:left;
	position:relative;
	border-radius:150px;
	overflow:hidden;
	margin:2% 5%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.sube .bilgiler h2{
	width:100%;
	height:70px;
	line-height:70px;
	float:left;
	position:relative;
	font-size:50px;
	text-align:center;
	font-family:alegreya_sansextrabold;
	color:#fff;
    text-shadow: 2px 2px 4px #000000;
	text-transform:uppercase;
}

.sube:hover span{
	width:400px;
}

}


@media screen and (max-width: 736px), screen and (max-device-width: 736px) {

.sube{
	width:90%;
	height:120px;
	float:left;
	position:relative;
	border-radius:150px;
	overflow:hidden;
	margin:2% 5%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.sube .bilgiler{
	width:100%;
	float:left;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	margin-top:10px;
	z-index:800;
}

.sube .bilgiler h2{
	width:100%;
	height:40px;
	line-height:40px;
	float:left;
	position:relative;
	font-size:30px;
	text-align:center;
	font-family:alegreya_sansextrabold;
	color:#fff;
    text-shadow: 2px 2px 4px #000000;
	text-transform:uppercase;
}
.sube .bilgiler p{font-size:13px; line-height:20px;}

.sube:hover span{
	width:300px;
}

}


@media screen and (max-width: 640px), screen and (max-device-width: 640px) {



}


@media screen and (max-width: 533px), screen and (max-device-width: 533px) {

.sube{
	width:90%;
	height:90px;
	float:left;
	position:relative;
	border-radius:150px;
	overflow:hidden;
	margin:2% 5%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.sube .bilgiler{
	width:100%;
	float:left;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	margin-top:10px;
	z-index:800;
}

.sube .bilgiler h2{
	width:100%;
	height:35px;
	line-height:35px;
	float:left;
	position:relative;
	font-size:20px;
	text-align:center;
	font-family:alegreya_sansextrabold;
	color:#fff;
    text-shadow: 2px 2px 4px #000000;
	text-transform:uppercase;
}
.sube .bilgiler p{font-size:11px; line-height:20px;}


.sube:hover span{
	width:200px;
}



}


@media screen and (max-width: 460px), screen and (max-device-width: 460px) {



}






@media screen and (max-width: 380px), screen and (max-device-width: 380px) {



}