@include susy-media($desktop) {

	.site-branding {

		@include span(4 of 12);

		.custom-logo {
			max-width: 100%;
			height: auto;
			display: inline;
			vertical-align: top;
		}
		
	}

	.main-navigation {
		@include span(last 8 of 12);
		margin-top: 30px;
		margin-bottom: 30px;

		.main-navigation-menu {

			margin: 0;
			padding: 0;
			float: right;
		}
	}
	
	.right-sidebar {

		.content-area {

		@include span(8 of 12);

		}
		.sidebar {

			@include span(last 4 of 12);

		}

	}
	
	.left-sidebar {
		.content-area {

		@include span( last 8 of 12);

		}
		.sidebar {

			@include span( 4 of 12);

		}
	}

	.none-sidebar {

		.content-area {

			@include span(12);

		}
	}

	.basepress-full-width-content {
		.content-area {
			@include span(full);
		}
	}

	/**
	 * Fullwidth template
	 */
	.page-template-template-fullwidth-php {

		.content-area {

			@include span(full);

		}
	}

	/**
	 * Homepage template
	 */
	.page-template-template-homepage-php {

		.content-area {

			@include span(full);

		}
	}
	/**
	 * Footer Widgets
	 */
	.footer-widgets {
		@include clearfix;
		padding-top: ms(5);
		border-bottom: 1px solid #f5f5f5;
		

		&.col-2 {
			.block {
				@include span(6 of 12);

				&.footer-widget-2 {
					@include last;
				}
			}
		}

		&.col-3 {
			.block {
				@include span(4 of 12);

				&.footer-widget-3 {
					@include last;
				}
			}
		}

		&.col-4 {
			.block {
				@include span(3 of 12);

				&.footer-widget-4 {
					@include last;
				}
			}
		}
	}
	

}

@include susy-media (max-width $container-width) {

	.footer-widgets {
		padding-top: ms(5);
	}
}

@include susy-media (max-width $max-width) {
	* {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	.container {
		width: 100%;
		padding: 0 3%;
	}
}

@include susy-media (max-width $min-width) {
	.container {
		padding: 0 5%;
	}
	.post-navigation {

		.nav-links {

			.nav-next {

				a {
					padding-left: 15px;
					padding-right: 0;
				}

				a::before {
					content: '';
				}
			}

			.nav-previous {

				a {
					padding-right: 15px;
					padding-left: 0;
				}

				a::before {
					content: '';
				}
			}

			a {
				font-size: 14px;
			}

		}  

	}

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

	#comments {

		.comment-content {
			overflow: visible;
			display: inline-block;
		}

		.comment-list {

				.reply {
					padding-left: 0;
				}
		}


	}

	
	
}

@include susy-media (max-width $responsive-width) {
	#page {
		-webkit-transition: -webkit-transform 500ms ease;
		transition: transform 500ms ease;
		position: relative;
		top: 0;
	}

	/* Header */

	.site-branding {
		float: none;
		text-align: center;
		width: 100%;
	}
	.custom-logo-link {
		
		.custom-logo {
			vertical-align: top;
		}
	}

	.main-navigation {
		display: none;
	}

	/* Menu */

	.mobile-only, .arrow-menu {
    	display: block;
	}

	span.menu-toggle {
		position: relative;
		padding: 14px 0;
		line-height: 24px;
		font-size: 14px;
		display: block;
		cursor: pointer;
	}
	span.menu-toggle::before {
		position: absolute;
		content: "\f0c9";
		font-family: FontAwesome;
		display: inline-block;
		right: 0;
	}	

	.mobile-menu-wrapper {
		position: fixed;
		top: 0;
		right: 0;
		width: 90%;
		height: 100%;
		min-height: 100%;
		max-height: 100%;
		overflow: scroll;
		background: #fff;
		-ms-transform: translate(100%,0);
		-webkit-transform: translate(100%,0);
		transform: translate(100%,0);
		-webkit-transition: -webkit-transform 500ms ease;
		transition: transform 500ms ease;
		overflow-x: hidden;
		z-index: 9;
	}
	.wpadminbar-active {
		 top: 32px;
	}
	.mobile-menu-wrapper ul {
		margin: 0;
		padding: 0;
	}
	.mobile-menu-wrapper ul li {
		width: 100%;
		display: block;
		position: relative;
		border-bottom: 1px solid #f0f0f0;
	}
	.mobile-menu-wrapper ul li li:last-child {
		border-bottom: 0;
	}
	.mobile-menu-wrapper ul li a {
		width: 100%;
		padding: 12px 20px;
		display: inline-block;
	}
	.mobile-menu-wrapper ul ul {
		border-top: 1px solid #f0f0f0;
	}
	.mobile-menu-wrapper ul ul li a {
		padding-left: 25px;
	}
	.mobile-menu-wrapper ul ul ul li a {
		padding-left: 30px;
	}

	.mobile-menu-active .mobile-menu-wrapper {
		-ms-transform: translate(0,0);
		-webkit-transform: translate(0,0);
		transform: translate(0,0);
	}
	.mobile-menu-active #page {
		-ms-transform: translate(-90%,0);
		-webkit-transform: translate(-90%,0);
		transform: translate(-90%,0);
		position: fixed;
		top: 0;
		width: 100%;
	}

	.main-navigation > ul li.menu-item-has-children > a:after {
		content: '';
	}

	#mobile-menu-wrapper .arrow-menu {
		position: absolute;
		right: 0;
		top: 0;
		color: #000;
		line-height: 44px;
		border-left: 1px solid #f0f0f0;
		width: 44px;
		font-size: 14px;
		text-align: center;
	}

}

@include susy-media (max-width $handheld) {
	
	/* General */

	article {
		
		ul,
		ol {
			margin-left: 1.25em;
		}
	}
	blockquote {
		margin: 8px;
	}
	table {
		overflow: auto;
		display: inline-block;
	}

	/* Post, Page */
	.post-item {
			padding: 30px;
	}
	.page-header .archive-title,
	.page-header .page-title {
		padding: 22px 30px;
	}
	.taxonomy-description {
		padding: 0 30px;
	}

	.single-title,
	.entry-title {
		font-size: 32px;
	}

	/* Comment */

	#comments {

		.comments-title {
			font-size: 22px;
		}

		.comment-list {

			.children {
				padding: 0 0 0 32px;
			}
		}
		.avatar {
			max-width: 22%;
		}
	}

	/* Sidebar */

	.sidebar .widget,
	.page-content,
	.single_post {
		padding: 30px;

	}

	.widget {
		ul {
			li:last-child {
				margin-bottom: 0;
				padding-bottom: 0;
			}
		}
	}
}
/*--------------------------------------------------------------
20.0 Print
--------------------------------------------------------------*/

@media print {

	/* Hide elements */

	form,
	button,
	input,
	select,
	textarea,
	.navigation-top,
	.social-navigation,
	#secondary,
	.category-menu,
	.content-bottom-widgets,
	.header-image,
	.panel-image-prop,
	.icon-thumb-tack,
	.page-links,
	.edit-link,
	.post-navigation,
	.pagination.navigation,
	.comments-pagination,
	.comment-respond,
	.comment-edit-link,
	.comment-reply-link,
	.comment-metadata .edit-link,
	.pingback .edit-link,
	.site-footer aside.widget-area,
	.site-info,
	.site-footer,
	.main-navigation,
	.entry-footer {
		display: none !important;
	}

	.entry-footer,
	#comments,
	.site-footer,
	.single-featured-image-header,
	.post-item,
	.single_post {
		border: 0;
	}

	/* Font sizes */

	body {
		font-size: 12pt;
	}

	h1 {
		font-size: 24pt;
	}

	h2 {
		font-size: 22pt;
	}

	h3 {
		font-size: 17pt;
	}

	h4 {
		font-size: 12pt;
	}

	h5 {
		font-size: 11pt;
	}

	h6 {
		font-size: 12pt;
	}

	.page .panel-content .entry-title,
	.page-title,
	body.page:not(.twentyseventeen-front-page) .entry-title {
		font-size: 10pt;
	}

	/* Layout */

	.site-content .container {
		padding-left: 5% !important;
		padding-right: 5% !important;
		max-width: none;
	}

	/* Site Branding */

	.site-header {
		background: transparent;
		padding: 0;
	}

	.custom-header-media {
		padding: 0;
	}

	.home.blog.has-header-image .site-branding,
	.home.blog.has-header-video .site-branding {
		position: relative;
	}

	.site-branding {
		margin-top: 0;
		margin-bottom: 1.75em !important; /* override styles added by JavaScript */
	}

	.site-title {
		font-size: 25pt;
	}

	.site-description {
		font-size: 12pt;
		opacity: 1;
	}

	/* Posts */

	.single-featured-image-header {
		background: transparent;
	}

	.entry-meta {
		font-size: 9pt;
	}

	/* Colors */

	body,
	.site {
		background: none !important; /* Brute force since user agents all print differently. */
	}

	body,
	a,
	.site-title a {
		color: #222 !important; /* Make sure color schemes don't affect to print */
	}

	h2,
	h5,
	blockquote,
	.site-description,
	.entry-meta,
	.entry-meta a {
		color: #777 !important; /* Make sure color schemes don't affect to print */
	}

	.entry-content blockquote.alignleft,
	.entry-content blockquote.alignright {
		font-size: 11pt;
		width: 34%;
	}

	.site-footer {
		padding: 0;
	}
}