/*
Theme Name: Difference Diaries
Theme URI: http://www.differencediaries.org/
Author: KatArt Graphics
Author URI: http://katart.com/
Description: Custom Wordpress theme for Difference Diaries
Version: 1.0
*/

html,button,input,select,textarea {color: #222;}
html {font-size: 1em;line-height: 1.4;}
::-moz-selection {background: #b3d4fc;text-shadow: none;}
::selection {background: #b3d4fc;text-shadow: none;}
hr {display: block;height: 1px;border: 0;border-top: 1px solid #ccc;margin: 2em 0;padding: 0;}
audio,canvas,img,video {vertical-align: middle;}
fieldset,figure {border: 0;margin: 0;padding: 0;}
textarea {resize: vertical;}
.browsehappy {margin: 0.2em 0;background: #ccc;color: #000;padding: 0.2em 0;}

/*	==========================================================================
   	Common styles
   	========================================================================== */

	* {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		}

		p,
		address { margin: 0 0 1em; }

		h1,h2,h3 {
			font-weight: 300;
		}

		a,
		.su-lightbox {
			color: #eb6728;
			text-decoration: none;
			cursor: pointer;
			}
			a:hover,
			.su-lightbox:hover {
				color: #b9502a;
				text-decoration: underline;
				}

		.container {
			max-width: 980px;
			margin: auto;
			padding-left: 15px;
			padding-right: 15px;
			}

			.row {
				margin-left: -15px;
				margin-right: -15px;
				}

		.alignnone { margin: 0; }
		.alignright { margin: 0 0 20px 20px; }
		.alignleft { margin: 0 20px 20px 0; }
		.aligncenter {
			display: block;
			margin: 0 auto 20px;
		}

		.page-text img {
			max-width: 100%;
			height: auto !important;
		}

		blockquote {
			clear: both;
			padding: 10px 20px;
			margin: 0 0 20px;
			font-family: Georgia, 'Times New Roman', serif;
			font-style: italic;
			color: #7b7b7b;
			border-left: 5px solid #eee;
			}
			blockquote p:last-child { margin-bottom: 0; }


/*	==========================================================================
   	Button styles
   	========================================================================== */

	.btn,
	.button {
		display: inline-block;
		padding: 6px 24px;
		font-size: 14px;
		line-height: 1.4358123;
		color: #fff;
		text-decoration: none;
		background: none;
		background-color: #eb6728;
		border: 1px solid transparent;
		border-radius: 3px;
		vertical-align: middle;
		cursor: pointer;
		}
		.btn:hover,
		.button:hover {
			color: #fff;
			text-decoration: none;
			background-color: #df6230;
			border-color: #b9502a;
			-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25);
			-moz-box-shadow: 0 1px 3px rgba(0,0,0,.25);
			box-shadow: 0 1px 3px rgba(0,0,0,.25);
		}



/*	==========================================================================
   	Structure styles
   	========================================================================== */

	body {
		font: normal 300 1em/1.25em 'Helvetica Neue', 'Helvetica Neue Light', HelveticaNeue, Helvetica, Arial, sans-serif;
		color: #3a383a;
		background-color: #eef0f1;
		}

		.page-wrap { background-color: #fff; }

		/* Header */
		.site-header { position: relative; }

			.top { min-height: 152px; }

				.site-logo {
					display: block;
					height: 147px;
					background: url(images/logo-dd-top.png) center top no-repeat;
				}
				.site-tagline {
					display: block;
					padding-top: 15px;
					padding-bottom: 15px;
					text-align: center;
					font-size: 1.375em;
					line-height: 1.125em;
				}

		/* Main */
		.main {
			padding-top: 1em;
			padding-bottom: 2em;
			border-bottom: 1px solid #dfdfdf;
			}
			body.home .main {
				padding-bottom: 1em;
				border: none;
			}


		/* Footer */
		.site-footer {
			padding-top: 50px;
			padding-bottom: 50px;
			text-align: center;
			background: url(images/footer-border-top.gif) center top repeat-x;
			}

			.copyright {
				padding-left: 15px;
				padding-right: 15px;
				font-size: 12px;
				line-height: 1.25em;
				color: #898b90;
			}


/*	==========================================================================
   	Navigation styles
   	========================================================================== */

	.menu,.sub-menu { padding: 0; margin: 0; list-style: none; }

	.primary-menu,.sub-menu { display: none; }

	.toggle-nav,
	.primary-menu > li > a,
	.sub-menu a {
		display: block;
		margin-top: 1px;
		padding-top: 1em;
		padding-bottom: 1em;
		color: #fff;
		text-decoration: none;
		text-align: center;
		background-color: #eb6728;
		}

		.toggle-nav { text-transform: uppercase; }

			.primary-menu > li > a.active,
			.toggle-nav.active { background-color: #b9502a; }


		.sub-menu a {
			padding-top: .5em;
			padding-bottom: .5em;
			background-color: #fca924;
			}

			.sub-menu ul a {
				color: #898b90;
				background-color: #eef0f1;
				}
				.sub-menu ul a:hover { background-color: #ddd; }


/*	==========================================================================
   	Page styles
   	========================================================================== */

	.page-header {
		margin-bottom: 2em;
		padding-top: 1em;
		padding-bottom: 1em;
		border-bottom: 1px solid #dfdfdf;
		}
		.page-title {
			margin: 0;
			line-height: 1em;
			}

	.page-text h1 {
		margin: 1em 0;
		padding-bottom: .5em;
		border-bottom: 1px solid #dfdfdf;
		}

	.page-text h2, .page-text h3 {
		margin-top: 1.75em;
		margin-bottom: .75em;
		line-height: 1.125em;
		color: #eb6728;
		}

	.page-text h4,
	.page-text h5,
	.page-text h6 {
		margin-bottom: .5em;
		}
		.page-text h5,
		.page-text h6 { text-transform: uppercase; }

	.page-text h2 + h3 {
		margin-top: .5em;
		margin-bottom: 2em;
		color: #7f7f7f;
	}
	.page-text h3 + h4 { margin-top: .5em; }

	.page-text ul,
	.page-text ol { padding-left: 24px; }

		.page-text ul { list-style-type: square; }

		.page-text li { padding-bottom: 6px; }

		/* Differences List */
		ul.differences-list {
			padding-left: 0;
			list-style: none;
			}

			h3.difference-title {
				margin: 0 0 .75em;
				font-size: 1.25em;
				}
				h3.difference-title span {
					display: block;
					padding-top: 4px;
					font-size: .75em;
					color: #777;
					font-style: italic;
					}


/*	==========================================================================
   	Blog styles
   	========================================================================== */

	section.blog {
		margin-left: -15px;
		margin-right: -15px;
		}

		.blog-posts, .sidebar {
			padding-left: 15px;
			padding-right: 15px;
			}

			.blog-posts { margin-bottom: 2em; }

				figure.post-thumb {
					margin-bottom: 1em;
					padding-bottom: 1px;
					border-bottom: 2px solid #7b7b7b;
					}
					.post-thumb img {
						display: block;
						max-width: 100%;
						height: auto !important;
						}

				.post-title {
					margin: 0;
					font-size: 1.5em;
					line-height: 1em;
					}
					.post-title a:hover { text-decoration: none; }

				.post-meta-top {
					padding-top: 1em;
					padding-bottom: 1em;
					font-size: .75em;
					text-transform: uppercase;
					color: #8b8b8b;
					}


/*	==========================================================================
   	Gravity Form styles
   	========================================================================== */

	.gform_confirmation_wrapper {
		border: 1px solid #dfdfdf;
		border-radius: 2px;
		}
		.gform_confirmation_message {
			padding: 1em;
			color: ##3c763d;
			font-size: .913em;
			line-height: 1.375em;
			border: 1px solid #fff;
			border-radius: 2px;
			background-color: #dff0d8;
		}




/*	==========================================================================
   	Widget styles
   	========================================================================== */

	/* Sidebar Widgets */
	.sidebar-widgets .widget {
		margin-bottom: 2em;
		padding: 10px;
		padding-top: 0;
		font-size: .875em;
		}
		.sidebar-widgets .widget-title {
			padding: 10px;
			margin: 0 -10px;
			border-bottom: 1px solid #dfdfdf;
			background-color: #eef0f1;
			}

			.sidebar-widgets .widget ul { margin: 0; padding: 1em 0 0; list-style: none; }
			.sidebar-widgets .widget li { padding-top: 6px; }
				.sidebar-widgets .widget li:first-child { padding-top: 0; }

		/* Recent Posts */
		.widget_recent_entries a {
			display: block;
			font-weight: 600;
			}
			.widget_recent_entries .post-date {
				font-size: .75em;
				line-height: 1em;
				text-transform: uppercase;
				color: #8b8b8b;
			}

		/* Tag Cloud */
		.tagcloud { padding: 1em 0 0; }

	/* Top Bar Widgets */
	.top-bar-widgets {
		padding-top: 15px;
		padding-bottom: 15px;
		text-align: center;
		vertical-align: middle;
		}
		.top-widget {
			display: inline-block;
			font-size: .875em;
			vertical-align: middle;
			}
			.top-widget .widget-title {
				margin: 0;
				font-size: 1em;
				font-style: italic;
				font-weight: 600;
				background: none;
				border: none;
			}

	/* Footer Widgets */
	.footer-widgets {
		padding-left: 15px;
		padding-right: 15px;
		font-size: .875em;
		line-height: 1.25em;
		}

		.footer-widget {
			padding-left: 15px;
			padding-right: 15px;
			margin-bottom: 30px;
		}

	/* Custom Menu Widget */
	.widget_nav_menu li { padding-bottom: 6px; }
		.widget_nav_menu a {
			color: #eb6728;
			text-decoration: none;
		}

	/* Lightweight Social Icons */
	.widget_lsi_widget { text-align: center; }

		.widget_lsi_widget h3,
		.widget_lsi_widget .lsi-social-icons {
			display: inline-block;
			line-height: 1em;
			vertical-align: middle;
			}
			.widget_lsi_widget h3 { display: none; }

			.widget_lsi_widget .lsi-social-icons li { margin: 0 0 0 6px !important; }
				.widget_lsi_widget .lsi-social-icons li:first-child { margin-left: 0 !important; }

				.lsi-social-icons li a { padding: 4px !important; }

	/* Add2Any Widget */
	.widget_a2a_share_save_widget { margin-left: 6px; }
		.a2a_svg {
			height: 37px !important;
			line-height: 38px !important;
			width: 38px !important;
			text-align: center;
			background-position: center center;
			}


/*	==========================================================================
   	Gallery styles
   	========================================================================== */

	/* Grid Gallery */
	.gallery-item {
		position: relative;
		float: left;
		width: 50%;
		overflow: hidden;
		}
		.gallery-icon {
			margin: 1px 1px 0 0;
			overflow: hidden;
			}
			.gallery-icon img {
				max-width: 100%;
				height: auto !important;
			}

		.gallery-caption {
			position: absolute;
			right: 1px;
			bottom: 0;
			left: 0;
			padding-top: .5em;
			padding-bottom: .5em;
			color: #fff;
			text-align: center;
			font-size: .875em;
			line-height: 1em;
			background-color: #000;
			background-color: rgba(0,0,0,.72);
			}
			.no-touch .gallery-caption {
				top: 100%;
				padding-top: 36%;
				padding-bottom: 36%;
				font-size: 1em;
				visibility: hidden;
				filter: alpha(opacity=0);
				opacity: 0;
				transition: opacity 600ms, top 300ms ease-out;
				}
				.no-touch .gallery-caption span {
					display: block;
					width: 80%;
					margin: auto;
					padding: 1.5em;
					border: 1px solid #fff;
					border-radius: 3px;
					}

			.no-touch .gallery-icon a { display: block; }

			.no-touch .gallery-icon:hover .gallery-caption {
				top: 1px;
				visibility: visible;
				filter: alpha(opacity=100);
				opacity: 1;
			}


/*	==========================================================================
   	Caption styles
   	========================================================================== */

	.wp-caption { display: inline-block; }
		.wp-caption-text {
			margin-top: 1px;
			padding-top: 4px;
			font-size: .75em;
			color: #7b7b7b;
			font-style: italic;
			font-weight: 600;
			border-top: 2px solid #7b7b7b;
			}


/*	==========================================================================
   	Sponsor Logos Styles
   	========================================================================== */

	.sponsor-logos {
		padding-top: 2em;
		padding-bottom: 2em;
		}

		.bx-wrapper .bx-viewport { border: none !important; }

	.owl-carousel .item {
		margin: 8px;
		}
		.owl-carousel-item-imgoverlay { display: none !important; }


/*	==========================================================================
   	Our Team styles
   	========================================================================== */

	.team-member { margin-top: 2.5em; }
		.team-member:first-child { margin-top: 0; }

		.team-member figure { text-align: center; }
			.team-member img {
				max-width: 100%;
				height: auto !important;
				}

		h3.member {
			margin: 1em 0 .25em;
			font-size: 1.5em;
			color: #eb6728;
			}

		.role {
			color: #898b90;
			font-style: italic;
			}

			.team-member-text {
				padding-top: .5em;
				font-size: .913em;
				line-height: 1.5em;
				color: #4f4f4f;
				}


/*	==========================================================================
   	Teaching Guide section
   	========================================================================== */

	.section-guide {
		padding-top: 20px;
		}
		.section-guide h2 {
			padding-bottom: .75em;
			margin-top: .5em !important;
			text-transform: uppercase;
			text-align: center;
			font-size: 1.375em;
			line-height: 1em;
			border-bottom: 1px solid #dfdfdf;
		}

		.section-guide > .su-column:first-child { margin-bottom: 0 !important; }

		.section-guide-discuss h2 { color: #ea8c31; }
		.section-guide-who h2 { color: #c95c7d; }
		.section-guide-writing h2 { color: #b38f58; }
		.section-guide-think h2 { color: #fcaf17; }
		.section-guide-talk h2 { color: #84ae47; }
		.section-guide-group h2 { color: #a386be; }













/*	==========================================================================
   	Helper classes
   	========================================================================== */

	.ir {background-color: transparent;border: 0;overflow: hidden;*text-indent: -9999px;}
	.ir:before {content: "";display: block;width: 0;height: 150%;}
	.hidden {display: none !important;visibility: hidden;}
	.visuallyhidden {border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}
	.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus {clip: auto;height: auto;margin: 0;overflow: visible;position: static;width: auto;}
	.invisible {visibility: hidden;}
	.clearfix:before,.clearfix:after,.row:before,.row:after,.gallery:before,.gallery:after {content: " ";display: table;}
	.clearfix:after,.row:after,.gallery:after {clear: both;}
	.clearfix,.row,.gallery {*zoom: 1;}


	@media only screen and (min-width: 600px) {
		/* Header */
		.site-logo {
			position: absolute;
			top: 15px;
			width: 38%;
			height: 125px;
			background-position: 0 0;
			background-size: contain;
		}
		.site-tagline {
			float: right;
			width: 62%;
			padding-top: 36px;
			padding-bottom: 0;
			font-size: 1.25em;
			text-align: right;
		}

		/* Post Style */
		.blog-posts, .sidebar { float: left; }

			.blog-posts { width: 62%; }
			.sidebar { width: 38%; }

    		/* Gallery Styles (Grid) */
		.gallery-item { width: 25%; }

		/* Top Widgets */
		.top-bar-widgets { text-align: right; }

			/* Lightweight Social Icons */
			.widget_lsi_widget { text-align: right; }
				.widget_lsi_widget h3 { display: inline-block; }

				.widget_lsi_widget .lsi-social-icons {
					display: inline-block !important;
					margin-left: 8px !important;
				}


		/* Footer Styles */
		.site-footer { text-align: left; }
			.footer-widgets {
				float: right;
				width: 65%;
				}
				.footer-widget {
					float: left;
					width: 25%;
					}
					.footer-widget:last-child { width: 50%; }

			.copyright {
				float: left;
				width: 35%;
			}

		/* Our Team */
		.team-members:before,.team-members:after {content: " ";display: table;}
		.team-members:after {clear: both;}
		.team-members {*zoom: 1;}

		.team-members {
			margin-left: -15px;
			margin-right: -15px;
			}
			.columns-2 .team-member,
			.columns-3 .team-member,
			.columns-4 .team-member,
			.columns-5 .team-member {
				float: left;
				margin-top: 1.5em;
				padding-left: 15px;
				padding-right: 15px;
				}
				.columns-2 .team-member { width: 50%; }
				.columns-3 .team-member { width: 33.333334%; }
				.columns-4 .team-member { width: 25%; }
				.columns-5 .team-member { width: 20%; }
				.columns-6 .team-member { width: 16.666667%; }

				 .team-member:first-child { margin-top: 1.5em; }

	}

	@media only screen and (min-width: 786px) {
		/* Header */
		.top { min-height: 176px; }
		.site-logo {
			width: 286px;
			height: 147px;
			background-size: auto;
			}
		.site-tagline {
			padding-top: 48px;
			font-size: 1.625em;
		}

		/* Page Styles */
		.main { padding-top: 3em; }

		/* Post Styles */
		.blog-posts { width: 68%; }
			.post-title { font-size: 1.75em; }

		.sidebar { width: 32%; }

		/* Navigation */
		.toggle-nav { display: none !important; }

		.primary-menu { display: block !important; }
			.primary-menu > li {
				position: relative;
				float: left;
				width: 25%;
				}
				.primary-menu > li > a {
					margin-top: 0;
					border-right: 1px solid #fff;
					}
					.primary-menu > li > a:hover { background-color: #df6230; }

			.primary-menu > li > .sub-menu,
			.sub-menu ul {
				position: absolute;
				top: 100%;
				left: 0;
				right: 1px;
				z-index: 999;
				background-color: #fff;
				border-bottom: 1px solid #fff;
				}
				.sub-menu ul {
					top: 0;
					left: 100%;
					left: calc(100% + 1px);
					right: auto;
					width: 100%;
					width: calc(100% + 1px);
				}

				.sub-menu a {
					line-height: 1.125em;
					padding: .75em 1em;
				}

		/* Teaching Guide */
		.section-guide h2 {
			margin-top: 1.5em !important;
			text-align: left;
			font-size: 1.5em;
		}

	}

	@media
		(-o-min-device-pixel-ratio: 5/4),
		(-webkit-min-device-pixel-ratio: 1.25),
		(min-resolution: 120dpi) {
			.site-logo {
				background-image: url(images/logo-dd-top-2x.png);
				background-size: contain;
				}
	}

/*	==========================================================================
   	Print styles.
   	Inlined to avoid required HTTP connection: h5bp.com/r
   	========================================================================== */

@media print {
	* {background: transparent !important;color: #000 !important;box-shadow: none !important;text-shadow: none !important;}
	a,a:visited {text-decoration: underline;}
	a[href]:after {content: " (" attr(href) ")";}
	abbr[title]:after {content: " (" attr(title) ")";}
	.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after {content: "";}
	pre,blockquote {border: 1px solid #999;page-break-inside: avoid;}
	thead {display: table-header-group;}
    	tr,img {page-break-inside: avoid;}
    	img {max-width: 100% !important;}
    	@page {margin: 0.5cm;}
    	p,h2,h3 {orphans: 3;widows: 3;}
	h2,h3 {page-break-after: avoid;}
}