/* CSS customizations for NW 
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */



/* Screen Size 320px
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 320px) {
	
	.chasm-320 {display:block;}
	.chasm-880 {display:none;}
	
	/*  Chasm Moon Blog Styles - 320px
	–––––––––––––––––––––––––––––––––––––––––––––––– */
	.chasm-nav-container {
		width: 100%;
		height: 125px;
		background: url('../images/img-chasm-blog/chasm-nav-bg-mobile.jpg') no-repeat center center;
		background-size: 1000px 125px;
		background-color: #000000;
	
	}
		
		.chasm-nav-logo-area {
			width: 320px;
			height: 125px;
			vertical-align: top;
			padding: 20px 0px 0px 0px;
			margin: auto;
		}
		
		img.chasm-nav-logo {
			width: 320px;
			height: 85px;
		}
		
		.chasm-nav-items {
			display: none;
		}

	
	.subnav {
		width: 100%;
		border-top: 1px solid #ffffff;
		display: block;
		z-index: 50;
	}

		.subnav .collapsible {
			background-color: #000000;
			color: #ffffff;
			cursor: pointer;
			padding: 14px 20px 12px 20px;
			width: 100%;
			border: none;;
			text-align: left;
			outline: none;
			font-size: 16px;
			font-weight: 600;
			margin: 0px;
		}

		.subnav .active {
			color: #ffffff;	  
			background-color: #000000;
		}

		.subnav .collapsible:hover {
			color: #ffffff;
			background-color: #000000;
		}
	
		.subnav .collapsible:active {
			color: #ffffff;
		}
	
		.subnav .collapsible:after {
			content: '\002B';
			color: #ffffff;
			font-weight: bold;
			float: right;
			margin-left: 5px;
		}

		.subnav .active:after {
			content: "\2212";
		}
	
		.subnav .text {
			padding: 0px 20px 0px 20px;
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.2s ease-out;
			background-color: #000000;
		}
		
		a.chasm-subnav-item:link, a.chasm-subnav-item:visited {
			width: 100%;
			padding: 10px 0px 10px 0px;
			font-size: 14px;
			font-weight: 400;
			color: #ffffff;
			border-top: 1px solid #777777;
			display: block;	
		}
		
			a.chasm-subnav-item:hover {color: #ffccff;}
			
		a.chasm-subnav-item-last:link, a.chasm-subnav-item-last:visited {
			width: 100%;
			padding: 10px 0px 16px 0px;
			font-size: 14px;
			font-weight: 400;
			color: #ffffff;
			border-top: 1px solid #777777;
			display: block;	
		}
		
			a.chasm-subnav-item-last:hover {color: #ffccff;}	
	
	.chasm-blog-text-area {
		width: 100%;
		margin: auto;
		padding: 30px 20px 60px 20px;
	}
	
	.chasm-blog-title-area {
		width: 100%;
		text-align: center;
		padding: 0px 0px 8px 0px;
		border-bottom: 1px solid #dddddd;
	}
	
		a.chasm-blog-title:link, a.chasm-blog-title:visited {
			font-size: 26px;
			font-weight: 600;
			line-height: 30px;
			color: #5a35a2;
			text-decoration: none;
		}
		
		a.chasm-blog-title:hover {
			color: #6633ff;
			text-decoration: none;
		}
		
	.chasm-blog-date {
		width: 100%;
		font-size: 12px;
		font-weight: 400;
		text-align: center;
		color: #777777;
		padding: 4px 0px 20px 0px;
	}
	
	.chasm-blog-pull-quote-box {
		width: 90%;
		margin: 30px auto 30px auto;
		padding: 10px 20px 10px 20px;
		border: 1px solid #dddddd;
		border-radius: 10px;
	}
	
	.chasm-blog-pull-quote {
		width: 90%;
		margin: auto;
	}	
	
	.chasm-blog-icon {
		width: 100px;
		height: 100px;
		margin: 30px auto 0px auto;
	}
	
	
	
	/* -- Chasm Columns Styles -- */
	.chasm-blog-col-560 {
		width: 100%;
		max-width: 560px;
		margin: auto;
	}
	
	.chasm-blog-col-half {
		width: 100%;
		padding: 0px 10px 0px 10px;
		display: inline-block;
		vertical-align: top;
	}
	
		.chasm-blog-col-half-center {
			width: 100%;
			padding: 0px 10px 0px 10px;
			display: block;
			vertical-align: top;
			margin: auto;
		}
	
	.chasm-blog-col-third {
		width: 100%;
		padding: 0px 10px 0px 10px;
		display: inline-block;
		vertical-align: top;
	}
	
	.chasm-blog-col-fourth {
		width: 100%;
		padding: 0px 10px 0px 10px;
		display: inline-block;
		vertical-align: top;
	}
	
	.chasm-blog-col-twothird {
		width: 100%;
		padding: 0px 10px 0px 10px;
		display: inline-block;
		vertical-align: top;
	}
	
	.chasm-blog-image {
		border: 1px solid #dddddd;
	}
	
	.chasm-blog-caption {
		padding: 6px 6px 6px 6px;
	}	
		

}




/* Screen Size 768px and Larger
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 768px) {
	
	/* -- Chasm Columns Styles -- */
	.chasm-blog-col-560 {
		width: 560px;
		margin: auto;
	}
	
	.chasm-blog-col-half {
		width: 50%;
		padding: 0px 10px 0px 10px;
		display: inline-block;
		vertical-align: top;
	}
	
		.chasm-blog-col-half-center {
			width: 50%;
			padding: 0px 10px 0px 10px;
			display: block;
			vertical-align: top;
			margin: auto;
		}
	
	.chasm-blog-col-third {
		width: 33%;
		padding: 0px 10px 0px 10px;
		display: inline-block;
		vertical-align: top;
	}
	
	.chasm-blog-col-fourth {
		width: 25%;
		padding: 0px 10px 0px 10px;
		display: inline-block;
		vertical-align: top;
	}
	
	.chasm-blog-col-twothird {
		width: 66%;
		padding: 0px 10px 0px 10px;
		display: inline-block;
		vertical-align: top;
	}

}




/* Screen Size 880px and Larger
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 1200px) {
	
	.chasm-320 {display:none;}
	.chasm-880 {display:block;}
	
	/*  Chasm Moon Blog Styles - 880px
	–––––––––––––––––––––––––––––––––––––––––––––––– */
	.chasm-nav-container {
		width: 100%;
		height: 125px;
		background: url('../images/img-chasm-blog/chasm-nav-bg.jpg') no-repeat center center;
		background-size: 2000px 125px;
		background-color: #000000;
	
	}
	
		.chasm-nav-area {
			max-width: 1200px;
			padding: 0px 20px 0px 20px;
			margin: auto;
		}
	
		.chasm-nav-logo-area {
			width: 30%;
			height: 125px;
			vertical-align: top;
			display: inline-block;
			padding: 20px 0px 0px 0px;
		}
		
		img.chasm-nav-logo {
			width: 320px;
			height: 85px;
		}
		
		.chasm-nav-items {
			width: 70%;
			height: 125px;
			text-align: right;
			padding: 44px 0px 0px 0px;
			vertical-align: top;
			display: inline-block;
		}
		
		a.chasm-nav-left:link, a.chasm-nav-left:visited  {
			width: 200px;
			height: 40px;
			color: #ffffff;
			font-size: 16px
			font-weight: 400;
			text-align: center;
			border: solid 1px #888888;
			border-radius: 10px 0px 0px 10px;
			padding: 6px 10px 0px 10px;
			vertical-align: top;
			display: inline-block;
		}
		
			a.chasm-nav-left:hover  {
				background-color: #5a35a2;
			}
			
		a.chasm-nav-center:link, a.chasm-nav-center:visited  {
			width: 160px;
			height: 40px;
			color: #ffffff;
			font-size: 16px
			font-weight: 400;
			text-align: center;
			border-top: solid 1px #888888;
			border-bottom: solid 1px #888888;
			padding: 6px 10px 0px 10px;
			vertical-align: top;
			display: inline-block;
		}
		
			a.chasm-nav-center:hover  {
				background-color: #5a35a2;
			}	
	
		a.chasm-nav-right:link, a.chasm-nav-right:visited  {
			width: 200px;
			height: 40px;
			color: #ffffff;
			font-size: 16px
			font-weight: 400;
			text-align: center;
			border: solid 1px #888888;
			border-radius: 0px 10px 10px 0px;
			padding: 6px 10px 0px 10px;
			vertical-align: top;
			display: inline-block;
		}
		
			a.chasm-nav-right:hover  {
				background-color: #5a35a2;
			}
	
	.chasm-blog-text-area {
		width: 820px;
		margin: auto;
		padding: 30px 0px 60px 0px;
	}
	
	.chasm-blog-title-area {
		width: 100%;
		text-align: center;
		padding: 0px 0px 12px 0px;
		border-bottom: 1px solid #dddddd;
	}
	
		a.chasm-blog-title:link, a.chasm-blog-title:visited {
			font-size: 28px;
			font-weight: 600;
			color: #5a35a2;
			text-decoration: none;
		}
		
		a.chasm-blog-title:hover {
			color: #6633ff;
			text-decoration: none;
		}
		
	.chasm-blog-date {
		width: 100%;
		font-size: 12px;
		font-weight: 400;
		text-align: center;
		color: #777777;
		padding: 4px 0px 20px 0px;
	}
	
	.chasm-blog-pull-quote-box {
		width: 80%;
		margin: 30px auto 30px auto;
		padding: 20px 40px 20px 40px;
		border: 1px solid #dddddd;
		border-radius: 10px;
	}
	
	.chasm-blog-pull-quote {
		width: 80%;
		margin: auto;
	}	
	
	.chasm-blog-icon {
		width: 150px;
		height: 150px;
		margin: 30px auto 0px auto;
	}
	
	
	
	/* -- Chasm Columns Styles -- */
	.chasm-blog-col-560 {
		width: 560px;
		margin: auto;
	}
	
	.chasm-blog-col-half {
		width: 50%;
		padding: 0px 10px 0px 10px;
		display: inline-block;
		vertical-align: top;
	}
	
		.chasm-blog-col-half-center {
			width: 50%;
			padding: 0px 10px 0px 10px;
			display: block;
			vertical-align: top;
			margin: auto;
		}
	
	.chasm-blog-col-third {
		width: 33%;
		padding: 0px 10px 0px 10px;
		display: inline-block;
		vertical-align: top;
	}
	
	.chasm-blog-col-fourth {
		width: 25%;
		padding: 0px 10px 0px 10px;
		display: inline-block;
		vertical-align: top;
	}
	
	.chasm-blog-col-twothird {
		width: 66%;
		padding: 0px 10px 0px 10px;
		display: inline-block;
		vertical-align: top;
	}
	
	.chasm-blog-image {
		border: 1px solid #dddddd;
	}
	
	.chasm-blog-caption {
		padding: 6px 6px 6px 6px;
	}
		
  
}













