.projeler_alan{
	float:left;
	width:100%;
	
}	

/* Tıklanacak Kısım */
div.tab { 
	width:300px; 
	float:left;
	margin:0;
	position:relative;
}
div.tab div {
	width:100%;
	height:50px;
	margin:5px 0;
	float:left; 
	overflow:hidden;
	background-color:#ddd; 
	color:#3d3d3d;
}

div.tab div a {
	width:100%; 
	height:50px;
	background-color:#ddd;
	color:#3d3d3d;
}

div.tab div h3 { 
	text-align:center; 
	height:50px;
	line-height:50px;
	width:100%;
	position:relative;
}

div.tab div.aktif a{
	float:left; 
	overflow:hidden; 
	background-color:#fff11a;
	color:#3d3d3d;
}
	
/* İçerik Kısmı */
.projerler{
	width:calc(100% - 315px); 
	margin-left:10px;
	position:relative;
	float:left;  
	overflow:hidden; 
}

.projerler .resim{
	width:calc(20% - 24px); 
	margin:10px;
	position:relative;
	float:left;  
	overflow:hidden; 
}

	

	
	
	
	
	
	
	
	
	

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






}


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




}



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






}






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



.projerler .resim{
	width:calc(25% - 24px); 
}



}




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




}







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


.projerler .resim{
	width:calc(33.3% - 24px); 
}




}





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




}



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

/* Tıklanacak Kısım */
div.tab { 
	width:200px; 
	float:left;
	margin:0;
	position:relative;
}
div.tab div {
	width:100%;
	height:50px;
	margin:5px 0;
	float:left; 
	overflow:hidden;
	background-color:#ddd; 
	color:#3d3d3d;
}

div.tab div a {
	width:100%; 
	height:50px;
	background-color:#ddd;
	color:#3d3d3d;
}

div.tab div h3 { 
	text-align:center; 
	height:50px;
	line-height:50px;
	width:100%;
	position:relative;
}

div.tab div.aktif a{
	float:left; 
	overflow:hidden; 
	background-color:#fff11a;
	color:#3d3d3d;
}
	
/* İçerik Kısmı */
.projerler{
	width:calc(100% - 212px); 
	margin-left:10px;
	position:relative;
	float:left;  
	overflow:hidden; 
}


.projerler .resim{
	width:calc(50% - 24px); 
}


	

	
 

}







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



.projerler .resim{
	width:calc(100% - 24px); 
}





}


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




}











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

/* Tıklanacak Kısım */
div.tab { 
	width:100%; 
	float:left;
	margin:0;
	position:relative;
}
div.tab div {
	width:100%;
	height:50px;
	margin:5px 0;
	float:left; 
	overflow:hidden;
	background-color:#ddd; 
	color:#3d3d3d;
}

div.tab div a {
	width:100%; 
	height:50px;
	background-color:#ddd;
	color:#3d3d3d;
}

div.tab div h3 { 
	text-align:center; 
	height:50px;
	line-height:50px;
	width:100%;
	position:relative;
}

div.tab div.aktif a{
	float:left; 
	overflow:hidden; 
	background-color:#fff11a;
	color:#3d3d3d;
}
	
/* İçerik Kısmı */
.projerler{
	width:calc(100% - 0px); 
	margin-left:10px;
	position:relative;
	float:left;  
	overflow:hidden; 
}


.projerler .resim{
	width:calc(50% - 24px); 
}


	


}




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


 


}



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



.projerler .resim{
	width:calc(100% - 24px); 
}





}