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


	html, body{ 
    background-color:#FFFFFF;
	padding: 0; 
	margin: 0;
	font-family: "Sarabun", serif;
  	font-weight: 100;
  	font-style: normal;
	font-size: 14px;
	color: #000; 
	text-decoration: none;
	height: 100%;
    overflow-x: hidden;

	}


a.title:link, a.title:visited { color:#000000; text-decoration: none;  }
a.title:hover, a.title:active { color:#000000;text-decoration:underline;}

a.header:link, a.header:visited { color:#000000; text-decoration: none;  }
a.header:hover, a.header:active { color:#000000;text-decoration:none;}

.my-custom-pagination {
    background-color: white !important;
    color: black !important;
}

.my-custom-pagination.active {
    background-color: black !important;
    color: white !important;
	border:1px solid #000;
}

.my-custom-pagination:hover {
    background-color: darkgray !important;
    color: white !important;
	border:1px solid #000;
}

.img-fix{ width:100%; height:auto; filter: grayscale(100%)}
.img-fix:hover{ filter: grayscale(0%)}


.input-genel{width:100%; border:1px solid #e5e5e5; padding:10px}
.form-row{margin-bottom:5px}

.peripatos-btn{
	margin:20px 0px; border:1px solid #000; background-color:#000; padding:12px 25px; display: inline-block; text-decoration:none; cursor:pointer; color:white;
}

.peripatos-btn:hover{
	text-decoration:none;
	background-color:#fff;
	color:black;
	border:1px solid #000;
}

.link-clean {
  color: inherit;         
  text-decoration: none;   
  cursor: pointer;         
}

.link-clean:hover {
  text-decoration: none;
	color: inherit;
}

.lisans-link {
  color: #fff; 
  text-decoration: none; 
  cursor: pointer;
}

/* Linke fare gelince altı çizilsin */
.lisans-link:hover {
  text-decoration: underline;
  color: #fff; 
}

.lisans-2-link {
  color: #fff; 
  text-decoration: none; 
  cursor: pointer;
	font-size:12px;
}

/* Linke fare gelince altı çizilsin */
.lisans-2-link:hover {
  text-decoration: underline;
  color: #fff; 
}

.lisans-txt{
	font-size:12px;
	color:#ccc;
}

.pagination {
    display: flex;
    list-style: none; 
    padding: 10px;
    justify-content: left;
}

.pagination li {
    margin: 0 5px;
	list-style: none; 
}

.pagination li a, .pagination li span {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    border: 0px solid #e5e5e5; 
    color: #000;
    background-color: #e5e5e5; 
    border-radius: 0px;
    transition: 0.3s;
	list-style: none; 
}

.pagination li a:hover {
    background-color: #000; 
    color: #fff; 
}

.pagination li.active span {
    background-color: #000; 
    color: #fff; 
    font-weight: bold;
}

.pagination li.disabled span {
    color: #666; 
    border: 0px solid #e5e5e5;
}



@media only screen and (min-width:769px) {
	
	#header{ width:70%; border-top:0px solid #000; border-bottom:1px dashed #000; padding:20px 0px}
	/*.header-left{ float:left; width:50%; font-family:Roboto Condensed; font-size:40px; text-align:left;}
	.header-right{ float:left; width:50%; font-family:Roboto Condensed; font-size:16px; text-align:right}*/
	.article-list-pc{width:70%;}
	.article-list-mobil{ display:none}
	.article-detail{width:70%;}
	.article-detail-pc{margin-bottom:40px}
	.article-detail-mobil{display:none}
	.article-comment{width:calc(70% - 0px); border-bottom:1px solid #ccc; padding-bottom:30px; margin-bottom:30px}
	.article-comment-write{width:calc(70% - 30px)}
	
	.peripatos-container{
		display: flex; gap:30px; text-align: right; border-bottom:1px solid #e5e5e5; margin-bottom:10px; padding:30px 0px
	}

	.peripatos-left{
		width:calc(34% - 0px); font-family:Sarabun; font-size:24px; font-weight:500; line-height:0.7cm
	}

	.peripatos-right{
		width:calc(64% - 0px); text-align: left; font-family:Sarabun; font-size:15px; font-weight:300; line-height:0.7cm
	}
	
	.peripatos-center-left{
		width:calc(1% - 0px); border-right:1px dashed #ccc;
	}

	.peripatos-center-right{
		width:calc(1% - 0px); border-right:1px dashed #ccc;
	}
	
	.article-title{
		font-family:Sarabun; font-size:28px; font-weight:500; margin-bottom:30px; color:#000; text-decoration:none;
	}
	
	.article-title:hover{
		background-color:#000;
		color:white;
		text-decoration:none;
	}

	
	.article-date{
		font-family:Sarabun; font-size:12px; font-weight:300;
	}
	
}


@media screen and (max-width: 768px) {
	
	#header{ width:80%; border-top:5px solid #000; border-bottom:1px dashed #000; padding:20px 0px}
	.article-list-pc{display:none}
	.article-list-mobil{width:80%}
	.article-detail{width:80%;}
	.article-detail-pc{display:none}
	.article-detail-mobil{margin-bottom:40px}
	.article-comment{width:calc(80% - 0px); border-bottom:1px solid #ccc; padding-bottom:30px; margin-bottom:30px}
	.article-comment-write{width:calc(80% - 0px)}
	
	
	.peripatos-container{
		display: flex; border-bottom:1px solid #e5e5e5; margin-bottom:10px; padding:10px 0px;
		flex-direction: column;
		text-align: left;
		gap: 10px;
	}

	.peripatos-left{
		width:calc(100% - 0px); font-family:Sarabun; font-size:24px; font-weight:500
	}

	.peripatos-right{
		width:calc(100% - 0px); text-align: left; font-family:Sarabun; font-size:15px; font-weight:300; line-height:0.7cm
	}
	
	.peripatos-center-left{
		display:none;
	}

	.peripatos-center-right{
		display:none;
	}
	
	
	
	.article-title{
		font-family:Sarabun; font-size:28px; font-weight:500; margin-bottom:10px; color:#000; text-decoration:none;
	}
	
	.article-title:hover{
		background-color:#000;
		color:white;
		text-decoration:none;
	}
	
	
	.article-date{
		font-family:Sarabun; font-size:12px; font-weight:300;
	}

}