/*
| Template created by Kadir Hanoglu
| Author: Kadir Hanoglu
| URL: https://www.kadirhanoglu.com
| Create Date: 09.06.2017
| Last Update: 14.06.2017
*/

body > header {
	background-color: #fff;
	padding: 0;
	margin-bottom: 0;
}

nav.topmenu a {
    color: #222;
}

#blogPost {
	margin-top: 140px;
}

article {
	background-color: #fff;
	margin: 100px 0 100px 0;
	border: 1px solid #f1f1f1;
}

article:first-child {
	margin: 0 0 100px 0;
}

.full-post {
    position: relative;
    top: 50px;
}

.post-title {
	padding: 50px 80px 0 100px;
}

.post-title h1 {
	font-weight: 100;
	font-size: 2em;
}

.post-title h1 a {
	color: #000;
	word-wrap: break-word;
}

.post-title a:hover {
	color: #0e8edc;
}

.post-content {
	font-size: 1.15em;
	padding: 50px 80px;
	line-height: 2.2em;
	color: #555;
}

.post-share {
	position: absolute;
	margin-top: -100px;
	background-color: #fff;
	box-shadow: 0 1px 8px rgba(0,0,0,0.1);
	left: -60px;
	width: 50px;
	padding: 15px;
	text-align: center;
	font-size: 1em;
}

.post-share > i {
	color: #09f;
}

.post-share > a {
    color: #999;
}

.post-share > a:hover {
	color: #000;
}

.post-image {
	height: 200px;
	overflow: hidden;
	transition: .5s ease-in;
}

.post-image img {
	width: 100%;
	height: auto;
	position: relative;
	top: 0;
	transition: .5s ease-in;
}

.post-image img:hover {
	top: -100%;
	transition: .5s ease-in;
}

article p img {
	max-width: 100%;
}

article > footer {
	background-color: #000;
	padding: 32px 80px;
	color: #aaa;
	font-size: 1.1em;
}

article > footer a {
	color: #999;
}

article > footer a:hover {
	color: #fff;
}

article > footer > span {
	margin: 0 20px;
}

nav.post-links a {
	color: #777;
    display: block;
    padding: 30px;
    font-size: 1.2em;
}

nav.post-links a:hover {
	color: #000;
}

.link-previous {
	text-align: left;
}

.link-next {
	text-align: right;
}

.link-previous:before, .link-next:after {
	font-family: "icons";
}

.link-previous:before {
	margin-right: 15px;
	content: "\f155";
}

.link-next:after {
	margin-left: 15px;
	content: "\f156";
}

.logo { display: none }

iframe.video {
    width: 640px;
    height: 360px;
    display: block;
    margin: 10px auto;
}

span.post-info, span.post-warning {
    display: block;
    padding: 25px;
}

span.post-info {
    background-color: #daf1ff;
}

span.post-warning {
    background-color: #f7edbe;
}

/* Responsive */

@media screen and (max-width: 480px){
	
	body > section {
		margin: 50px 0 0 0;
	}

    .blog-post {
        width: 100%;
    }

	article {
		margin: 60px 0;
	}

	.post-title {
		padding: 10px 20px 0 20px;
	}

	.post-title h1 {
		font-size: 1.8em;
		line-height: 1.8em;
	}

	.post-content {
		padding: 20px 20px;
	}
	
	.post-share {
		position: fixed;
		background-color: #fff;
		box-shadow: 0 1px 8px rgba(0,0,0,0.2);
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		padding: 0;
		font-size: 1.2em;
		z-index: 1;
	}

	.post-share > i {
		background-color: #f5f5f5;
		padding: 10px;
		border-radius: 50px;
	}

	.post-share > a {
		display: inline-block;
		padding: 7px 14px;
	}

	.post-image {
		height: 100px;
	}
	
	iframe.video {
		width: 280px;
		height: 158px;
	}

	article > footer {
		padding: 25px 20px;
	}

	body > footer {
		margin-bottom: 50px;
	}
	
}

@media screen and (min-width: 481px) and (max-width: 768px){



}

@media screen and (min-width: 769px) and (max-width: 1024px){

	
}

@media screen and (min-width: 1025px) and (max-width: 1280px){



}

@media screen and (min-width: 1281px) and (max-width: 1366px){

	article {
		margin: 80px 0;
	}

	.post-title {
		padding: 30px 60px 0 80px;
	}

	.post-title h1 {
		font-size: 1.6em;
	}

	.post-content {
		font-size: 1em;
		padding: 40px 60px;
		line-height: 2em;
	}
	
	.post-share {
		left: auto;
		right: -60px;
	}

	article > footer {
		padding: 22px 50px;
		font-size: 1em;
	}

}

@media screen and (min-width: 1367px) and (max-width: 1440px){



}

@media screen and (min-width: 1441px) and (max-width: 1920px){



}