/*
	Developer: Muhsin Aslan
	Twitter: @aktimur_

	Doctype: HTML5
	IDE: Sublime Text3, Photoshop, Google Fonts
*/

*,
*:before,
*:after {box-sizing: border-box;}
body {font-family: 'Raleway', sans-serif; background: #f2f2f2; height: 100%;}

.center { max-width: 1120px; height: 100%; width: 100%; margin:0 auto;}

#header {width: 100%;height: 250px;float: left;background: url('../img/header-bg.jpg') repeat;position: relative;z-index: 999;}
#header .center {position: relative;}

#header .logo { width: 148px; height: 274px; float: left; background: url('../img/logo.png') no-repeat}
#header .logo a { width: 148px; height: 274px; float: left; display: block;}

#header .links {float: left;margin: 50px 0 0 0;}
#header .links ul { float: left; margin: 0; padding: 0; list-style: none;}
#header .links ul li {float: left; margin:0 10px 0 0;}
#header .links ul li a {display: block; color: #4b3e1e; text-decoration: none; font-size: 12px; font-weight: 700; height: 20px; line-height: 20px;}
#header .links ul li a i {margin:0 10px 0 0; font-size: 16px;}

#header .menu {height: 75px;position: absolute;left: 0;bottom: 0;}
#header .menu ul {float: left;margin: 0;padding: 0;list-style: none;float: left;}
#header .menu ul li {float: left;}
#header .menu ul li a {display: block; line-height: 73px; padding: 0 15px; text-decoration: none; font-size: 14px; font-weight: 700; color: #383838; margin-top: 2px;}
#header .menu ul li a:hover {background: rgb(58, 88, 155);color: #fafafa;}
#header .menu:before {content: ''; width: 100%; height: 2px; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.1)}
#header .menu:after {content: ''; width: 8px; height: 8px; background: rgba(0,0,0,0.1); position: absolute; right: -8px; top: -3px; border-radius: 50%;}

#header .omerUnalName {position: absolute; right: 0; bottom: 65px; text-align: right;}
#header .omerUnalName span {width: 100%; display: block; font-size: 30px; font-weight: 900;}
#header .omerUnalName strong {width: 100%; display: block; font-size: 25px; font-weight: 400;}

#header .omerUnalImage {width: 196px; height: 234px; position: absolute; right: 0; bottom: 0; background: url('../img/omerUnal.png') no-repeat}

#slider { width: 100%; height: 400px; float: left; background: #fff;}
#slider .carousel { width: 100%; height: 400px; float: left;}
#slider .carousel .carousel-cell {width: 50%; height: 400px; position: relative;}
#slider .carousel .carousel-cell.is-selected {width: 50%;}
#slider .carousel .carousel-cell .slide {width: 100%; height: 100%; float: left;overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center center;}

#slider .carousel .carousel-cell.is-selected .caption {display: block;}
#slider .carousel .carousel-cell.is-selected .slide:after {display: none;}

#slider .carousel .carousel-cell .caption {display: none;}
#slider .carousel .carousel-cell .slide:after {content:'';width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,0.7);}

#slider .carousel .flickity-page-dots {display: none;}


#slider.pattern {height: 250px;background: #00529a url('../img/pattern.png') repeat;}
#slider.pattern .omerUnalName {float: left;height: 100%;display: table;}
#slider.pattern .omerUnalName h1 {width: 100%;margin: 0 0 0 0;display: block;padding: 0;color: #fff;text-shadow: 1px 1px 0 rgba(0,0,0,0.5);font-weight: 400;max-width: 998px;height: 100%;display: table-cell;vertical-align: middle;text-transform: uppercase;}
#slider.pattern .omerUnalName h1 strong {font-size: 30px;}

#slider.pattern .akpLogo {width: 100px;height: 120px;float: right;margin-top: 60px;}


#slider .caption { width: 100%; position: absolute; left: 0; bottom: 0; right: 0; padding: 50px 50px 50px 50px; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );}
#slider .caption h1 { font-size: 22px; margin: 0; padding: 0;}
#slider .caption h1 a {color: #fafafa; text-decoration: none;}

#slider .swiper-slide-shadow-left { background-image: none !important; background: rgba(0,0,0,0.6)}
#slider .swiper-slide-shadow-right { background-image: none !important; background: rgba(0,0,0,0.6)}

#content { width: 100%; float: left; background: #f2f2f2;padding: 30px 0;}
#content .center {height: 100%;}

#content .leftSide {max-width: 710px; width:100%; float: left;border:1px solid #d9d9d9;background: #fff;padding-top: 20px;box-shadow: 0 5px 0 0 rgba(0,0,0,.05);}
#content .leftSide .post {width: 100%;float: left;padding: 0 30px 0 30px;margin-bottom: 20px;}
#content .leftSide .post .title {width: 100%;height: 40px;float: left;position: relative;}
#content .leftSide .post .title a {color: #3b3b3b; text-decoration: none;}
#content .leftSide .post .title:after {content: ''; width: 100%; height: 1px; background: #cccccc; position: absolute; left: 0; bottom: 12px;}
#content .leftSide .post .title h1 {margin: 0;padding: 0;float: left;max-width: 100%;padding-right: 30px;font-size: 22px;line-height: 40px;background: #fff;position: relative;z-index: 1;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
#content .leftSide .post .image {width: 100%;max-height: 325px;height:auto;float: left;overflow: hidden;margin-top: 17px;}
#content .leftSide .post .image img {width: 100%; display: block;}
#content .leftSide .allPosts {width: 100%; float: left; text-align: center; padding: 0 30px 30px 30px;}
#content .leftSide .allPosts .title {width: 100%; display: block; position: relative;margin-bottom: 10px;}
#content .leftSide .allPosts .title:after {content: '';width: 100%; height: 1px; background: #cccccc; position: absolute; left: 0; bottom: 4px;}
#content .leftSide .allPosts .title h1 {font-size: 16px; display: inline-block; padding: 0; padding:0 10px; color: #737373; margin: 0; background: #fff; position: relative; z-index: 1}
#content .leftSide .allPosts .icon {width: 40px; height: 40px; background: #d9d9d9; display: inline-block; border-radius: 50%;}
#content .leftSide .allPosts .icon a {width: 40px; height: 40px; display: block;}
#content .leftSide .allPosts .icon i {line-height: 45px; color: #ffffff; text-align: center; font-size: 20px;}

#content .rightSide {max-width: 350px; width:100%;float: right; position: relative;}
#content .rightSide.sticky { float: none; position: fixed; top: 20px; z-index: 6; right: auto; }
#content .rightSide:before {content:'';width: 1px;height: 100%;position: absolute;left: -30px;top: 0;background: #d9d9d9;}
#content .rightSide .box {width: 100%;margin-bottom: 15px;float: left;border:1px solid #d9d9d9;background: #fff;padding: 19px;box-shadow: 0 5px 0 0 rgba(0,0,0,.05);position: relative;}
#content .rightSide .box:last-child {margin: 0;}
#content .rightSide .box.facebook {padding: 15px;}
#content .rightSide .box.aboutMe {text-align: center;}

#content .rightSide .box .title {width: 100%; height: 30px; float: left; text-align: center; position: relative;}
#content .rightSide .box .title:after {content: ''; width: 100%; height: 1px; position: absolute; left: 0; bottom: 10px; background: #d9d9d9}
#content .rightSide .box .title h2 {margin: 0; padding: 0; font-size: 16px; display: inline-block; line-height: 30px; background: #fff; color: #000; padding: 0 10px; position: relative; z-index: 1;}

#content .rightSide .box.aboutMe:before {content: '';width: 290px;height: 1px;position: absolute;left: 30px;top: 135px;background: #d9d9d9;}
#content .rightSide .box.aboutMe .image {width:100%; height:100%; max-width: 215px;max-height: 215px;border:7px solid #d9d9d9;display: inline-block;overflow: hidden;border-radius: 50%;position: relative;}
#content .rightSide .box.aboutMe .name {width: 100%;height: 40px;margin: 15px 0;}
#content .rightSide .box.aboutMe .name h1 {margin: 0; padding: 0; line-height: 40px; font-size: 22px; font-weight: 400;}
#content .rightSide .box.aboutMe .name h1 strong { margin-right: 6px;}
#content .rightSide .box.aboutMe .desc {width: 100%;margin-bottom: 15px;padding: 0 20px;}
#content .rightSide .box.aboutMe .desc span {color: #8d8d8d; font-size: 14px; font-weight: 600;}
#content .rightSide .box.aboutMe .icon {width: 40px; height: 40px; background: #d9d9d9; display: inline-block; border-radius: 50%;text-align: center;}
#content .rightSide .box.aboutMe .icon a {width: 40px; height: 40px; display: block;}
#content .rightSide .box.aboutMe .icon i {line-height: 40px; color: #ffffff; display: inline-block; font-size: 20px;}


#content .rightSide .box.sendMessage .desc {width: 100%;display: inline-block;text-align: center;margin: 15px 0;}
#content .rightSide .box.sendMessage .desc span {color: #8d8d8d; font-size: 14px; font-weight: 600;}
#content .rightSide .box.sendMessage .send {width: 100%;height: 108px;float: left;text-align: center;}
#content .rightSide .box.sendMessage .send a {width: 108px;height: 108px;display: inline-block;background: url('../img/icon/sendMessage.png') no-repeat;}

#content .rightSide .box .phohoList {width: 100%; float: left; margin: 0; padding: 0; list-style: none; margin-top: 20px;}
#content .rightSide .box .phohoList li {width: 139px; height: 140px; float: left; margin-right: 10px; margin-bottom: 10px; position: relative; overflow: hidden;}
#content .rightSide .box .phohoList li img {height: 100%;}
#content .rightSide .box .phohoList li:hover {opacity: .9}
#content .rightSide .box .phohoList li a {width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
#content .rightSide .box .phohoList li:nth-child(2n) {margin-right: 0;}

#footer { width: 100%; height: 80px; float: left; background: #fff; border:1px solid #d9d9d9; margin-bottom: 40px; border-right: 0; border-left: 0}
#footer .center {position: relative;}
#footer .copyright { float: left;}
#footer .copyright p { line-height: 80px; margin: 0; padding: 0; font-size: 14px; color: #a0a0a0;}

#footer .footerMenu { float: right; margin-right: -15px;}
#footer .footerMenu ul {float: left; margin: 0; padding: 0; list-style: none; margin-top: 33px;}
#footer .footerMenu ul li {float: left; height: 15px; border-right: 1px solid #d9d9d9;}
#footer .footerMenu ul li:last-child {border:none;}
#footer .footerMenu ul li a {display: block; line-height: 15px; padding: 0 15px; color: #a0a0a0; text-decoration: none; font-size: 12px; font-weight: 600;}
#footer .footerMenu ul li a:hover {color: #3b3b3b}

#footer .inviva { width: 210px;height: 16px; position: absolute; right: 15px; bottom: -30px; }
#footer .inviva a {color: #000;font-size: 14px;font-weight: 500;text-decoration: none;}
#footer .inviva a:hover {text-decoration:underline;}

#content.full .content { max-width: 100%;}
#content .content { max-width: 710px; width:100%; float: left;border:1px solid #d9d9d9;background: #fff;padding: 20px;box-shadow: 0 5px 0 0 rgba(0,0,0,.05);}
#content .content .featuredImage {width: 100%; height: 300px; float: left; overflow: hidden; margin:15px 0}
#content .content .featuredImage img {width: 100%; display: block;}
#content .content .info {width: 100%; height: 40px; float: left; border:1px solid #ddd; border-left: 0; border-right: 0; margin-bottom: 15px; position: relative;}
#content .content .info ul {float: right; margin: 0; padding: 0; list-style: none;}
#content .content .info ul li {height: 40px; float: left; margin-right: 1px;}
#content .content .info ul li a {width: 40px;height: 38px;line-height: 40px;float: left;background: #e4e4e4;text-align: center;}
#content .content .info ul li a:hover {background: #fad165;}
#content .content .info:before {content:'';width: 50px;height: 2px;position: absolute;left: 0;top: -2px;background: #fad165;}
#content .content .info span {color: #8e8e8e;line-height: 40px;font-weight: 400;font-size: 14px;}
#content .content .info span.date {float: left;}
#content .content .info span.views {float: right;}
#content .content .title {width: 100%;height: 40px;float: left;position: relative;}
#content .content .title a {color: #3b3b3b; text-decoration: none;}
#content .content .title:after {content: ''; width: 100%; height: 1px; background: #cccccc; position: absolute; left: 0; bottom: 12px;}
#content .content .title h1 {margin: 0; padding: 0; display: inline-block; padding-right: 20px; font-size: 22px; line-height: 40px; background: #fff; position: relative; z-index: 1;}
#content .content .text {width: 100%;float: left;text-align: justify;margin-top: 10px;}
#content .content .text p {margin: 0 0 10px 0;padding: 0;line-height: 1.7;font-size: 15px;}

.catList {margin: 0; padding: 0; list-style: none; width: 100%; float: left; margin-top: 15px;}
.catList li {width: 50%;height: 260px;float: left;margin-bottom: 10px;padding-right: 15px;}
.catList li .fImage {width: 100%;height: 200px;float: left;overflow: hidden;text-align: center;}
.catList li .fImage span {line-height: 200px;text-align: center;font-size: 17px;color: #000;font-weight: 600;display: block;background: #f9f9f9;}
.catList li .fImage img {min-width: 100%;max-height: 100%;}
.catList li .CTitle {width: 100%; float: left; padding: 10px 0}
.catList li a {text-decoration: none; color: #3b3b3b;}
.catList li .CTitle h2 {margin: 0;padding: 0; font-weight: 600; font-size: 16px;}
.catList li:nth-child(2n) { padding: 0;}

.flickity-prev-next-button { background: none !important;}
.flickity-prev-next-button .arrow { fill: #fff !important}