/* 
 * 1. Tools
 *
 * 2.Basics
 *
 * 3. Modules
 *   3.1 Header
 *   3.2 Footer
 *   3.3 Homepage
 *   3.4 Single Page
 *
 * 4. Responsive
 */

/* 1. Tools */

@import "reset";
@import "colors";
@import "mixins";

/* 2. Basics */

body {
    background-color: $white;
    color: $silver;
    font-size: 15px;
    line-height: 1.6;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

.wrapper {
    margin: 0 auto;
    max-width: 1110px;
}

img {
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	color: $black;

	a {
		color: $black;
	}
}

.cf:before,
.cf:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.cf:after {
  clear: both;
}

.cf {
  *zoom: 1;
}

a {
	color: $silver;
	text-decoration: none;
	outline: 0;
	@extend .transition;


	&:hover,
	&:focus {
		color: $pink;
	}
}

.markup-format {
	word-break: break-all;

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 30px 0;
	}

	h1 {
		line-height: 92px;
		font-size: 35px;
	}

	h2 {
		font-size: 32px;
		line-height: 32px;
	}

	h3 {
		line-height: 30px;
		font-size: 28px;
		font-weight: 500;
	}

	h4 {
		font-size: 24px;
		line-height: 18px;
	}

	h5 {
		font-size: 20px;
		line-height: 16px;
	}

	h6 {
		font-size: 18px;
		line-height: 14px;
	}

	p {
		line-height: 24px;
		margin: 20px 0;
	}

	a {
		text-decoration: underline;

		&:hover {
			text-decoration: none;
		}
	}

	img.alignright {
		float: right; margin: 0 0 1em 1em;
	}

	img.alignleft {
		float: left;
		margin: 0 1em 1em 0;
	}

	img.aligncenter {display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.alignright {
		float: right;
	}

	.alignleft {
		float: left;
	}

	.aligncenter {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.wp-caption {
		max-width: 100%;
		height: auto;
	}

	.post-password-form {
		width: 100%;

		label {
			float: left;

			input[type="password"] {
				height: 40px;
				margin: 0 10px 0 5px;
				padding: 0 20px;
				border: 1px solid #e6e6e6;
				border-radius: 0;
				outline: 0;
				-webkit-appearance: none;
			    -moz-appearance: none;
			    appearance: none;
			}
		}

		input[type="submit"] {
			height: 40px;
			margin: 0;
		}
	}

	.gallery-item {
		width: 25%;
		padding: 10px;
		float: left;
		@extend .borderbox;
	}

	.gallery {
		width: 100%;
		overflow: hidden;
	}

	.link-pages {
		width: 100%;
		float: left;
	}

	iframe {
		max-width: 100%;
	}

	address {
		font-style: italic;
	}

	strong {
		font-weight: 700;
	}

	abbr,
	acronym {
		border-bottom: 1px dotted $silver;
	}

	big {
		font-size: 24px;
	}

	cite {
		font-style: italic;
	}

	code,
	kbd {
		background: rgba($silver, 0.1);
		padding: 5px;
	}

	blockquote,
	q,
	pre {
		margin: 0;
		padding: 20px 0 20px 25px;
		line-height: 24px;
		font-size: 24px;
		font-weight: 100;
		font-style: italic;
		border-left: 3px  solid $pink;
		margin-bottom: 30px;
		word-break: break-all;

		p {
			display: inline;
		}
	}

	sup {
		top: -0.5em;
	}

	sub {
		bottom: -0.25em;
	}

	blockquote {
		&:before,
		&:after {
			content: "\"";
			display: inline-block;
		}
	}

	cite {
		font-style: normal;
		font-size: 14px;
	}

	blockquote {
		p {
			margin: 0;
		}
	}

	ul {
		list-style-position: inside;
		list-style-type: disc;

		li {
			list-style-position: inside;
			list-style-type: disc;

			ul {
				padding-left: 20px;
			}
		}
	}

	ol {
		list-style-position: inside;
		list-style-type: decimal;

		li {
			list-style-position: inside;
			list-style-type: decimal;

			ol {
				padding-left: 20px;
			}
		}
	}

	table {
			width: 100%;
			margin-bottom: 30px;

			caption {
				margin-bottom: 10px;
				font-weight: 700;
			}

			thead {

				th {
					font-weight: 700;
					padding-bottom: 5px;
					border-right: 1px solid $silver;
					border-bottom: 1px solid $silver;

					&:last-child {
						border-right: none;
					}
				}
			}

			tbody {
				text-align: center;
				font-size: 14px;
				font-weight: 300;

				a {
					font-weight: 700;
				}

				tr {
					border-bottom: 1px solid $silver;

					&:last-child {
						border-bottom: none;
					}

					td {
						border-right: 1px solid $silver;
						padding: 7px;

						&:last-child {
							border-right: none;
						}
					}
				}
			}

			tfoot {
				font-size: 14px;

				#next {
					text-align: right;
				}
			}

			a {
				text-decoration: underline;

				&:hover {
					text-decoration: none;
				}
			}

			td#prev {
				padding-top: 10px;
			}

			td#next {
				padding-top: 10px;
			}
		}

		dl {
			dd {
				margin-left: 20px;
			}
		}
}

.hover-state {
	color: $pink;
}

.overflow-h {
	overflow: hidden;
}

h1.page-title {
	font-size: 35px;
    line-height: 40px;
    margin-bottom: 35px;
    word-break: break-all;
}

/* 3. Modules */

/* 3.1 Header */

.top-header {
	background-color: $black;
	padding: 13px 0;

	.top-links {
		float: left;

		li {
			display: inline-block;
			margin-right: 30px;
			font-weight: 100;
			line-height: 22px;
		}
	}

	.social {
		float: right;

		li {
			display: inline-block;
			margin-left: 35px;
			font-size: 20px;
			line-height: 19px;
		}
	}
}

.center-header {
	padding: 42px 0;
	
	.site-logo-link {
		float: left;

		img {
			display: block;
		}
	}

	.ads-panel {
		float: right;

		a {
			width: 728px;
			height: 90px;
			display: inline-block;
		}
	}
}

.bottom-header {
	background-color: $pink;
	color: $white;
	position: relative;

	.menunav {
		display: block;
		width: 98%;
		z-index: 99;
		float: left;
		@extend .transition;
		height: 88px;

		.menu {
			display: inline-block;
			height: 88px;

			> li {
				min-height: 88px;
				line-height: 88px;

				a {
					padding-right: 45px;
				}
			}
		}

		ul li {
			float: left;

			a {
			    font-size: 18px;
    			font-weight: 500;
			}

			ul {
				display: none;
				position: absolute;
				top: 88px;
				background-color: rgba($pink, 0.7);
				z-index: 99999;
				margin: auto;
				width: 160px;

				li {
					width: 100%;
					@extend .borderbox;
					position: relative;
					height: auto;
					min-height: 20px;
					line-height: 20px;
					
					a {
						display: block;
						padding: 15px 20px;
						padding-right: 20px !important;
						font-size: 14px;
						text-align: center;
					}
				}

	    		ul {
					left: 100%;
					top: 0;
				}
			}

			&:hover > ul {
				display: block;
			}
		}
		
	}

	.open-menu {
		float: left;
		padding: 31px 0;

		.open {
			font-size: 22px;
			line-height: 26px;
			cursor: pointer;
			display: none;
		}

		.close {
			font-size: 22px;
			line-height: 22px;
			cursor: pointer;
			display: none;
		}
	}

	.search {
		float: right;
		margin: 32px 0;
		position: relative;

		.open-search,
		.close-search {
			font-size: 18px;
			cursor: pointer;
			@extend .transition;

			&:hover {
				color: $black;
			} 
		}

		.close-search {
			display: none;
		}

		.search-input {
			position: absolute;
			top: 0;
			bottom: -150px;
			right: -10px;
			margin: auto;
			width: 220px;
			height: 70px;
			padding: 20px 25px;
			background-color: $pink;
			opacity: 0;
			z-index: -1;
			@extend .transition;

			input[type="search"] {
				width: 100%;
				height: 30px;
				padding: 0 30px 0 10px;
				margin-top: 20px;
				font-family: 'Roboto', sans-serif;
				font-size: 15px;
				color: $black;
				border: none;
				border-radius: 0;
				-webkit-appearance: none;
			    -moz-appearance: none;
		        appearance: none;
			}

			input[type="submit"] {
				background: transparent;
				width: 20px;
				height: 20px;
				border: none;
				border-radius: 0;
				-webkit-appearance: none;
			    -moz-appearance: none;
		        appearance: none;
				cursor: pointer;
				z-index: 2;
				position: absolute;
				right: 30px;
				top: 45px;
			}

			.search-btn {
				position: absolute;
				right: 30px;
				top: 45px;
				width: 20px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				color: $pink;
				@extend .transition;

				&.hover-state {
					color: $black;
				}
			}

			&.show {
				opacity: 1;
				z-index: 101;
				bottom: -198px;
			}
		}
	}
}

/* 3.2 Footer */

footer {

	.top-footer {
		border-top: 1px solid $light;
		padding: 55px 0;

		.widget {
			width: 24.32%;
			float: left;
			padding: 0 40px;
			margin-top: 20px;
			@extend .borderbox;
			text-align: center;

			iframe,
			embed,
			img {
				max-width: 100%;
			}

			&:nth-child(2) {
				float: right;
			}

			.title {
				font-size: 18px;
				line-height: 37px;
				text-transform: uppercase;
			}

			li {
				padding: 6px 0;
			}
		}

		.center {
			width: 51.36%;
			float: left;
			border-left: 1px solid $light;
			border-right: 1px solid $light;
			padding: 0 80px;
			@extend .borderbox;
			text-align: center;

			.logo {
				margin-bottom: 30px;
				display: inline-block;

				img {
					display: block;
				}
			}

			.social {
				margin-top: 20px;

				li {
					display: inline-block;
					margin: 10px 17px;
					font-size: 20px;
					line-height: 19px;
				}
			}
		}
	}

	.bottom-footer {
		border-top: 1px solid $light;
		padding: 37px 0;
		text-align: center;
	}
}

/* 3.3 Homepage */

.featured-articles .post {
	width: 100%;
	height: 534px;
	float: left;
	position: relative;
	overflow: hidden;

	&:hover {
		color: $pink;

		.entry-content:after {
			background: rgba(0,0,0,0.2);
		}
	}

	.entry-content {
		width: 100%;
		height: 100%;
		display: block;
		@extend .bgcover;
		background-position: center;
		box-shadow: inset 0px -220px 150px -100px rgba(0, 0, 0, 0.75);
		position: relative;
		word-break: break-all;

		&:after {
			content: '';
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: rgba(0,0,0,0.0);
			@extend .transition;
		}
	}

	.entry-title {
		position: absolute;
		bottom: 65px;
		left: 0;
		padding: 0 25px;
		@extend .borderbox;
		font-weight: 500;
		font-size: 23px;
		line-height: 28px;
		color: $white;
		text-align: center;
		@extend .transition;
		z-index: 2;
		word-break: break-all;
	}

	.entry-meta {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20px;
		@extend .borderbox;
		text-align: center;
		color: $white;
		@extend .transition;
		z-index: 2;

		i {
			color: $pink;
		}
	}
}

.central-ad {
	padding: 45px 0;

	.ads-panel {
		text-align: center;

		a {
			width: 728px;
		    height: 90px;
		    display: inline-block;
		}
	}
}

.main-content {
	padding: 86px 0 67px 0;
	border-top: 1px solid $light;

	.posts {
		width: 68.46%;
		float: left;
		margin-bottom: 26px;
	}

	.post {
		width: 100%;
		float: left;
		padding: 68px 0 30px 0;
		border-bottom: 1px solid $light;

		&:last-child {
			border-bottom: none;
		}

		&:first-child {
			padding-top: 0;
		}

		.entry-image {
			width: 42.23%;
			height: 205px;
			float: left;
			@extend .bgcover;
			background-position: center;
		}

		.entry-content {
			width: 57.77%;
			padding-left: 30px;
			@extend .borderbox;
			float: right;
			word-break: break-all;

			.entry-title {
				font-size: 25px;
				line-height: 30px;
				font-weight: 700;
				margin-bottom: 25px;
				word-break: break-all;
			}

			.entry-meta {
				margin-top: 35px;

				li {
					display: inline-block;
					margin-right: 15px;

					&:after {
						content: '|';
						display: inline-block;
						margin-left: 15px;
					}

					&:last-child {
						margin-right: 0;

						&:after {
							content: none;
						}
					}

					i {
						color: $pink;
						margin-right: 3px;
					}
				}
			}
		}
	}
}

.sidebar_widget_style {
	a {
		color: $pink;
	}

	ul {
		position: relative;
		z-index: 99;
	}

	> ul > li:first-child {
		border-top: none;
	}


	li {
		border-top: 1px solid rgba($light, 0.2);

		&:hover {
			border-color: rgba($light, 0.5);
		}

		a {
			font-size: 18px;
			color: $pink;
			padding: 20px 0 20px 13px;
			display: block;

			&:hover {
				color: black;
			}
		}
	}

	#wp-calendar {
		width: 100%;
		margin-top: 20px;
	}
	#wp-calendar caption {
		margin-bottom: 10px;
	}
	#wp-calendar thead {
	}
	#wp-calendar thead th {
		border-right: 1px solid rgba($light, 0.2);
		border-bottom: 1px solid rgba($light, 0.2);
	}
	#wp-calendar thead th:last-child {
		border-right: none;
	}
	#wp-calendar tbody {
		text-align: center;
		font-size: 12px;
		font-weight: 300;
	}
	#wp-calendar tbody a {
		font-weight: 700;
	}
	#wp-calendar tbody tr {
		border-bottom: 1px solid rgba($light, 0.2);
	}
	#wp-calendar tbody tr:last-child {
		border-bottom: none;
	}
	#wp-calendar tbody tr td {
		border-right: 1px solid rgba($light, 0.2);
		padding: 7px;
	}
	#wp-calendar tbody tr td:last-child {
		border-right: none;
	}
	#wp-calendar tfoot {
		font-size: 14px;
	}
	#wp-calendar tfoot #next {
		text-align: right;
	}

	&.widget_search {
		input[type=search] {
			width: 60%;
			height: 40px;
			float: left;
			display: block;
			@extend .borderbox;
			padding: 0 15px;
			border-top-left-radius: 5px;
  			border-bottom-left-radius: 5px;
			border: 1px solid #e4e4e4;
		}

		input[type=submit] {
			width: 35%;
			height: 40px;
			display: block;
			background: $pink;
			color: #fff;
			text-transform: uppercase;
			border: 1px solid $pink;
			float: left;
			border: none;
			border-top-right-radius: 5px;
  			border-bottom-right-radius: 5px;

  			&:hover {
  				cursor: pointer;
				border-color: black;
  				background: black;
  			}
		}

		span {
			display: none;
		}

		form {
			display: block;
			margin-top: 20px;
			overflow: hidden;
		}
	}

	img {
		max-width: 100%;
		height: auto;
	}

	select {
		max-width: 100%;
	}

	strong {
		font-weight: 700;
	}

	.wp-caption-text {
		padding: 3px;
		font-style: italic;
		font-weight: 300;
	}

	.tagcloud a {
		display: inline-block;
		padding: 4px 8px;
		border-radius: 5px;
		border: 1px solid $pink;
		margin: 3px;
	}

	&.widget_categories,
	&.widget_archive,
	&.widget_recent_comments {
		li {
			padding: 20px 0 20px 13px;

			a {
				width: auto;
				display: inline;
				padding: 0;
				margin-right: 10px;
			}
		}
	}

	select {  
		margin-top: 20px;
	}

	&.widget_recent_comments {
		span {
			width: 100%;
			font-style: italic;
			display: block;
			font-size: 14px;

			a {
				font-size: 14px;
			}
		}
	}

	&.widget_rss {
		a {
			padding: 0;
		}

		.rss-date {
			padding-bottom: 10px;
			font-style: italic;
		}

		cite {
			font-size: 12px;
			padding-top: 10px;
			font-style: italic;
		}

		li {
			padding: 20px 0;
		}
	}	
}

.sidebar {
	width: 31.54%;
	float: right;
	padding-left: 50px;
	@extend .borderbox;

	.widget {
		width: 100%;
		float: left;
		padding: 10px 15px;
		margin-bottom: 55px;
		@extend .borderbox;
		border: 1px solid $light;
		word-break: break-all;

		iframe,
		embed,
		img {
			max-width: 100%;
		}

		.entry-title {
			margin-bottom: 0;
		}

		&.widget_categoryposts {
			a {
				display: inline;
				font-size: 11px;
				padding: 0;
			}

			li {
				font-size: 11px;
				border-top: none;
			}

			.post.fixclass {
				padding-left: 0 !important;
				padding-right: 0 !important;
			}
		}

		

		@extend .sidebar_widget_style;

		.widget-title {
			font-size: 24px;
			line-height: 28px;
			font-weight: 300;
			text-align: center;
			padding: 8px 0 24px 0;
			margin-bottom: 15px;
			border-bottom: 1px solid $light;
			position: relative;

			i.fa {
				padding-right: 15px;
			}

			&:after {
				content: '';
				width: 77px;
				height: 3px;
				background-color: $pink;
				position: absolute;
				left: 0;
				right: 0;
				bottom: -3px;
				margin-left: auto;
				margin-right: auto;
			}
		}

		.post {
			width: 100%;
			float: left;
			padding: 28px 0 24px 109px;
			@extend .borderbox;
			border-bottom: 1px solid $light;

			&:last-of-type {
				border-bottom: none;
			}

			.entry-image {
				width: 87px;
				height: 77px;
				margin-left: -109px;
				float: left;
				border: 1px solid $light;
				@extend .bgcover;
				background-position: center;
				@extend .borderbox;
			}

			.entry {
				float: left;
			}

			.entry-title {
				font-size: 14px;
				font-weight: 400;
				line-height: 18px;
				word-break: break-all;
			}

			.read-more {
				font-size: 14px;
				font-weight: 400;
				line-height: 18px;
				color: $pink;
				text-decoration: underline;
				display: inline-block;
				margin-top: 5px;

				&.hover-state,
				&:hover {
					text-shadow: 1px 0px 0px #dc0844;
				}
			}
		}
	}

	.ads-panel a {
		width: 300px;
		height: 600px;
		display: inline-block;
	}
}

.other-articles {
	padding: 40px 0;
	background-color: #f9f9f9;
	border-top: 1px solid $light;

	.col {
		width: 32.33%;
		float: left;
		margin-right: 1.5%;
		word-break: break-all;
		margin-top: 20px;

		@extend .sidebar_widget_style;

		&:nth-child(3n) {
			margin-right: 0;
		}

		.title {
			font-family: 'Raleway', sans-serif;
			font-size: 25px;
			line-height: 25px;
			padding-bottom: 20px;
			margin-bottom: 45px;
			border-bottom: 1px solid #d7d7d7;
			position: relative;

			&:after {
				content: '';
				width: 29px;
				height: 14px;
				background: url('../img/arrow-down.png');
				position: absolute;
				left: 41px;
				bottom: -14px;
			}

			i {
				color: $pink;
				margin-right: 9px;
				font-size: 16px;
				vertical-align: top;
				margin-top: 4px;
			}
		}

		&.widget_customrecentposts {
			.entry-title {
				margin-top: 0;
				word-break: break-all;
			}

			.entry {
				@extend .borderbox;
				padding-left: 15px;
			}
		}
	}

	.post {
		width: 100%;
		float: left;
		padding: 15px 15px 15px 160px;
		margin-bottom: 37px;
		@extend .borderbox;
		background-color: $white;
		-webkit-box-shadow: -3px 5px 30px 5px rgba(210, 210, 210, 0.28);
		-moz-box-shadow: -3px 5px 30px 5px rgba(210, 210, 210, 0.28);
		box-shadow: -3px 5px 30px 5px rgba(210, 210, 210, 0.28);

		.entry-image {
			width: 134px;
			height: 117px;
			margin-left: -145px;
			@extend .bgcover;
			background-position: center;
			float: left;
		}

		.entry-title {
			font-size: 14px;
			line-height: 19px;
			font-weight: 400;
			margin-top: 20px;
			word-break: break-all;
		}

		.entry-meta {
			margin-top: 15px;

			a {
				display: inline;
				font-size: 11px;
				padding: 0;
			}

			li {
				font-size: 11px;
				display: inline-block;
				border-top: none;
				margin-right: 4px;

				&:after {
					content: '|';
					display: inline-block;
					margin-left: 4px;
				}

				&:last-child {
					margin-right: 0;

					&:after {
						content: none;
					}
				}

				i {
					color: $pink;
				}
			}
		}
	}

	.pagination {
		text-align: center;
		margin-top: 6px;

		a,
		span {
			background-color: #f2f2f2;
			border: 1px solid #f2f2f2;
			color: $silver;
			margin: 0 8px;
			font-size: 18px;
			line-height: 18px;
			padding: 10px 19px;
			display: inline-block;
			@extend .transition;

			&.current,
			&:hover {
				background-color: $pink;
				color: #f1cfd4;
			}
		}

		span.dots {
			background: transparent !important;
			padding: 0;
			border: none;
		}
	}
}

/* 3.4 Single Page */

.single-content {
	width: 68.46%;
	float: left;

	.single-tags {
		border-top: 1px solid $light;
		padding: 30px 0;
	}

	.sharedaddy {
		border-top: 1px solid $light;
		margin-top: 30px;
		
		.sd-content {
			display: inline-block;

			li {
				display: inline-block;
				margin-right: 35px;
				font-size: 20px;
				line-height: 19px;
				color: $silver !important;
				
				&[class*='share-'].share-twitter a.sd-button,
				&[class*='share-'].share-facebook a.sd-button,
				&[class*='share-'].share-google-plus-1 a.sd-button,
				&[class*='share-'].share-tumblr a.sd-button,
				&[class*='share-'].share-pinterest a.sd-button,
				&[class*='share-'].share-linkedin a.sd-button,
				&[class*='share-'].share-pocket a.sd-button,
				&[class*='share-'].share-skype a.sd-button,
				&[class*='share-'] a.sd-button,
				&[class*='share-'].share-reddit a.sd-button {
					color: $silver !important;
				}

				a {
					color: $silver !important;
					background: transparent !important;
				}

				&:last-child {
					margin-right: 0;
				}
			}
		}

		.sd-title {
			font-size: 17px;
			font-weight: 400;
			color: $pink;
			text-transform: uppercase;
			margin-right: 30px;

			&:before {
				display: none !important
			}
		}

		.sd-content,
		.sd-title {
			height: 130px;
			line-height: 130px;
			margin-bottom: 0;
			margin-top: 0;
		}
	}

	.author-area {
		width: 100%;
		float: left;
		border: 1px solid $light;
		padding: 35px 33px 35px 190px;
		@extend .borderbox;

		.author-img {
			width: 122px;
			height: 122px;
			margin-left: -155px;
			margin-top: 8px;
			float: left;

			img {
				width: 100%;
				height: 100%;
				display: block;
				border-radius: 50%;
			}
		}

		.author-info {
			float: left;

			.name {
				font-size: 18px;
				line-height: 24px;
			}

			.title {
				width: 100%;
				display: block;
				font-size: 14px;
				line-height: 24px;
				color: $pink;
				margin-bottom: 15px;
			}
		}
	}
}

.single-post {

	.entry-featured-image {
		margin-bottom: 60px;
		text-align: center;
	}

	.entry-title {
		font-size: 35px;
		line-height: 40px;
		word-break: break-all;
		margin-bottom: 35px;
	}

	.entry-meta {
		margin-bottom: 30px;

		li {
			display: inline-block;
			margin-right: 15px;

			&:after {
				content: '|';
				display: inline-block;
				margin-left: 15px;
			}

			&:last-child {
				margin-right: 0;

				&:after {
					content: none;
				}
			}

			i {
				color: $pink;
				margin-right: 3px;
			}
		}
	}

	.entry-content {
		width: 100% !important;
		padding-left: 0 !important;
	}
}

#comments {
	@extend .borderbox;
	width: 100%;
	float: left;
	margin: 60px 0 40px 0;
	position: relative;

	.comment-metadata {
		font-size: 14px;
	}

	h3, h2 {
		font-size: 22px;
		margin-bottom: 20px;
		padding-bottom: 15px;
		border-bottom: 1px solid $light;
	}

	> ol {
		float: left;

		&:last-of-type {
			margin-bottom: 40px;
		}
	}

	ol ol {
		padding-left: 50px;
		margin-bottom: 10px;
		float: left;
		width: 100%;
		@extend .borderbox;
	}

	.comment-meta {
		margin-bottom: 10px;
		width: 100%;
		float: left;
	}

	.comment-author {

		img {
			width: 50px;
		    display: block;
		    float: left;
		    margin-right: 20px;
		}

		.fn {
			display: inline-block;
			font-weight: 500;
			font-size: 16px;
		}
	}

	li,
	article {
		margin-bottom: 20px;
		float: left;
		width: 100%;
	}

	.comment-content {
		padding-left: 70px;
		width: 100%;
		float: left;
		@extend .borderbox;
		@extend .markup-format;
	}

	.reply {
		font-weight: 400;
		font-size: 14px;
		float: left;
		width: 100%;
		text-align: right;
		padding-left: 70px;
		@extend .borderbox;

		.fa {
			margin-right: 5px;
		}
	}

	#respond {


		p {
			margin-bottom: 20px;

			&:last-of-type {
				margin-bottom: 0;
			}
		}

		label {
			display: block;
			margin-bottom: 5px;
			cursor: pointer;
		}

		input,
		textarea {
			width: 50%;
			@extend .borderbox;
			padding: 10px 20px;
			border: 1px solid $light;
			border-radius: 0;
			font-weight: 300;
			font-family: 'Roboto', sans-serif;
			font-size: 15px;
			-webkit-appearance: none;

			&:focus {
				outline: none;
				border-color: $pink;
			}
		}

		textarea {
			width: 100%;
			height: 200px;
			padding: 20px;
			resize: none;
		}
	}

	.required {
		color: tomato;
		font-weight: 700;
	}

	input[type=submit] {
		border: 1px solid $pink !important;
		background: $pink;
		text-transform: uppercase;
		font-weight: 700 !important;
		padding: 18px !important;
		color: #fff;
		width: 160px !important;
		@extend .transition;

		&:hover {
			opacity: 0.8;
			cursor: pointer;
		}
	}
}

/* 4. Responsive */

@media only screen and (max-width: 1180px) {

	.wrapper {
		width: 94%;
	}

	.center-header {
		text-align: center;

		.logo {
			display: inline-block;
			float: none;
		}

		.ads-panel {
			display: block;
			float: none;
			margin-top: 40px;
		}
	}
}

@media only screen and (max-width: 1180px) and (min-width: 1025px) {

	.main-content .posts,
	.single-content {
		width: 63%;
	}

	.sidebar {
		width: 37%;
	}

}

@media only screen and (max-width: 1024px) {
	.bottom-header {
		.menunav {
			display: none;
			height: auto;

			.menu > li {
				min-height: 50px;
				line-height: 50px;
			}

			&.show-menu {
				display: block !important;
			}

			li {
				border-bottom: 1px solid rgba(white, 0.1);

				&:last-child {
					border-bottom: none;
				}
			}

			.sub-menu {
				border-top: 1px solid rgba(white, 0.2);
				overflow: hidden;
				margin-left: 3%;
				-webkit-box-sizing: border-box;
				-mox-box-sizing: border-box;
				box-sizing: border-box;
				width: 94% !important;
			}

			ul {
				position: relative !important;
				display: block !important;
				width: 100% !important;
				height: auto !important;
				left: 0 !important;
				top: 0 !important;

				li {
					width: 100%;
					left: 0;
				}
			}
		}

		.search {
			top: 0;
			position: absolute;
			right: 3%;
		}
	}

	.bottom-header .open-menu .open {
		display: block;
	}

	.main-content .posts,
	.single-content {
		width: 100%;
	}

	.sidebar {
		width: 100%;
		padding-left: 0;
		padding-right: 350px;
		margin-top: 50px;

		.ads-panel {
			margin-right: -350px;
			float: right;
		}
	}

	.other-articles .post {
		padding-left: 100px;
		margin-bottom: 25px;

		.entry-image {
			width: 70px;
			height: 75px;
			margin-left: -85px;
		}

		.entry-title {
			margin-top: 0;
		}

		.entry-meta {
			margin-top: 5px;
		}
	}

	footer .top-footer {
		
		.widget {
			padding: 0 20px;
		}

		.center {
			padding: 0 30px;
		}
	}
}

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

	.bottom-header {

		.open-menu {
			padding: 20px 0;
		}

		.search {
			margin: 21px 0;

			.search-input {
				bottom: 0;
				height: 30px;
				padding: 18px;
				right: 0;
				left: 100%;

				&.show {
					left: -274px;
					bottom: 0;
				}

				input[type="search"] {
					margin-top: 0;
				}

				input[type="submit"],
				.search-btn {
					top: 24px;
					right: 24px;
				}
			}
		}
	}

	.other-articles .col {
		width: 100%;
		margin-right: 0;
	}

	.other-articles .post .entry-title {
		margin-top: 7px;
	}

	#comments #respond input, 
	#comments #respond textarea {
		width: 100%;
	}
}

@media only screen and (max-width: 775px) {

	.center-header .ads-panel {
		display: none;
	}

	.gallery-item {
		width: 50%;
	}
}

@media only screen and (max-width: 730px) {

	.central-ad {
		display: none;
	}
}

@media only screen and (max-width: 700px) {

	.top-header {

		.top-links li {
			margin-right: 15px;
		}

		.social li {
			margin-left: 20px;
		}
	}

	.featured-articles .post {
		height: 400px;
	}

	.sidebar {
		padding-right: 0;

		.ads-panel {
			margin-right: 0;
			width: 100%;
			text-align: center;
		}
	}
}

@media only screen and (max-width: 560px) {

	.top-header {

		.top-links {
			width: 100%;
			text-align: center;

			li {
				margin: 0 15px;
			}
		}

		.social {
			width: 100%;
			text-align: center;
			margin-top: 10px;

			li {
				margin: 0 17px;
			}
		}
	}

	.main-content .post {
		
		.entry-image {
			width: 100%;
			margin-bottom: 30px;
		}

		.entry-content {
			width: 100%;
			padding-left: 0;

			.entry-title {
				text-align: center;
			}
		}
	} 

	footer .top-footer {

		.widget {
			width: 50%;
			float: left;
			margin-top: 0;
			margin-bottom: 40px;
		}

		.center {
			width: 100%;
			padding: 0 20px;
			border: none;
		}
	}

	.single-post .entry-title {
		text-align: center;
	}

	.single-content .author-area {
		padding: 20px 15px 20px 135px;

		.author-img {
			width: 100px;
			height: 100px;
			margin-left: -125px;
		}
	}
}

@media only screen and (max-width: 360px) {

	.top-header {

		.top-links li {
			margin: 0 10px;
		}

		.social li {
			margin: 0 12px;
		}
	}

	.bottom-header .search .search-input {
		padding: 18px 10px;

		&.show {
			left: -264px;
		}

		input[type="submit"],
		.search-btn {
			right: 15px;
		}
	}

	.single-content .share .social li {
		margin-right: 25px;
		margin-top: 15px;
	}

	.single-content .author-area {
		padding: 20px 15px;

		.author-img {
			margin: 0 auto 20px auto;
			float: none;
		}

		.author-info {
			text-align: center;
		}
	}

	.single-post .entry-meta li,
	.main-content .post .entry-content .entry-meta li {
		margin-right: 6px;
		font-size: 14px;

		&:after {
			margin-left: 6px;
		}
	}

	footer .top-footer {
		
		.widget {
			width: 100%;
		}

		.center .social li {
			margin: 10px 11px;
		}
	}
}