/* ==========================================================================
   Section comment block
   ========================================================================== */

/* Sub-section comment block
   ========================================================================== */

/*
 * Group comment block.
 * Ideal for multi-line explanations and documentation.
 */

/* Basic comment */

@font-face {
	font-family: Delicious;
	src: url('/fonts/Delicious-Roman.otf');
}
@font-face {
	font-family: DeliciousBold;
	src: url('/fonts/Delicious-Bold.otf');
}
@font-face {
	font-family: DeliciousSmallCaps;
	src: url('/fonts/Delicious-SmallCaps.otf');
}
@font-face {
	font-family: DeliciousItalic;
	src: url('/fonts/Delicious-Italic.otf');
}
@font-face {
	font-family: Josefin;
	src: url('/fonts/JosefinSansStd-Light.otf');
}
@font-face {
	font-family: FontinCaps;
	src: url('/fonts/Fontin_Sans_SC_45b.otf');
}
@font-face {
	font-family: LeagueGothic;
	src: url('/fonts/League-Gothic.otf');
}
@font-face {
	font-family: Dekar;
	src: url('/fonts/Dekar.otf');
}
@font-face {
  font-family: 'social';
  src: url("/fonts/social.eot");
  src: url("/fonts/social.eot#iefix") format('embedded-opentype'), url("/fonts/social.woff") format('woff'), url("/fonts/social.ttf") format('truetype'), url("/fonts/social.svg#social") format('svg');
  font-weight: normal;
  font-style: normal;
}
/*
palette:
#9C7D30 
*/
html {

}
body {
	height: 100%;
	margin: 0;
	padding: 0;
	text-align: left;
	background-color: #fff;
	opacity: 1;
	font-family: 'Open Sans',Roboto,'Merriweather Sans',Delicious,courier, univers, arial, helvetica, sans-serif;
	font-size: 9px;
	voice-family: "\"}\""; 
	voice-family:inherit;
	font-size: 9px;
	font-weight: 300;
	line-height: 12px;
	color: #000;	
}
.row {
	background-color: none;
	overflow: hidden;
}
.row.header {
	width: 100%;
	overflow: visible;
	margin: 0 0 20px;
}
p {
	text-align: left;
	padding: 2px 2px 2px 0;
	margin: 10px 0 0;
	line-height: 2em;
	color: #000;
}
video {
	width: 100%;
}
.video {
	margin-top: -60px;
	padding-top: -10px;
}
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.post-list  {
	margin-bottom: 20px;
}
/*
.post-list p:not(.plain):first-letter {
	font-size: 85px; 
	font-family: Dekar;
	text-transform: uppercase;
	float: left; 
	margin: 10px 5px 15px 0;
	padding: 0;
	line-height: 0.8;
}
.post-list p.plain:first-letter {
	text-transform: uppercase;
}
*/

.droppy {
	animation: color_change 15s ease 2s alternate infinite;
}
b {
	font-weight: 700;
}
h1, h2, h3 {
	margin: 0;
	padding: 0;
	color: #000;
	text-align: left;
	font-family: Delicious,Dekar,helvetica,sans-serif;
	font-weight: 300;
}
h1 {
	font-size: 24px;
}
h2 {
	font-size: 22px;
	font-weight: 400;
}
.panel h2 {
  clear: both;
  text-transform: capitalize;
}
h3 {
  font-size: 11px;
}
a, a:link, a:visited {
  text-decoration: none;
  color: #404040;
}

a:hover,a:active {
	color:#808000;
	transition: color .65s ease-out;
}
.post-list p a, .post-list p a:active,.post-list p a:visited {
	color:#404040;
	transition: color .65s ease-out;
	border-bottom: 1px dashed #404040;
}
.post-list p a:hover,.post-list p a:active {
	color:#860000;
	transition: color .65s ease-out;
	border-bottom: 1px dashed #000;
}
blockquote {
	filter: alpha(opacity=80);
	-moz-opacity: 0.80;
	opacity: 0.65;
	display: block;
	color: #000;
	font-family: Dekar,helvetica,sans-serif;
	font-size: 22px;
	margin: 0 auto;
	padding-left: 43px;
	width: 75%;
	border: none;
	background: #ccc;
}
blockquote:before {
    content: open-quote;
    font-size: 54pt;
    text-align: center;
    line-height: 42px;
    color: #000;
    float: left;
    position: relative;
    top: 40px;
    /** define it as a block element **/
    display: block;
	margin-right: 10px;
}
blockquote:after {
    content: close-quote;
    font-size: 54pt;
    text-align: center;
    line-height: 42px;
    color: #000;
    float: right;
    position: relative;
    bottom: 40px;
    /** define it as a block element **/
    display: block;
	padding-left: 10px;
}
blockquote:hover, blockquote:hover {
    background-color: #b5b5b5;
	transition: all 350ms;
	-o-transition: all 350ms;
	-moz-transition: all 350ms;
	-webkit-transition: all 350ms;
}
blockquote p {
	margin: 0;
	color: #000;
	font-size: 22px;
	text-align: left;
	padding: 0px 40px;
}
code,pre {
    font-weight: normal;
    background: none repeat scroll 0% 0% #5f5f5f;
	color: #fff;
	padding: 5px;
	margin: 0 auto;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
ul, ol, dl {
    font-size: 14px;
    line-height: 1.1;
    margin-bottom: 14px;
	padding-left: 20px;
    list-style-position: outside;
}
.columns.header {
	padding: 125px 15px;
	margin: 0 auto;
	background-image: url('/images/backgrounds/smokies.jpg'); 
	background-repeat:  no-repeat;
	background-position: 50% 40%;
	background-size: cover;
	border-bottom: 3px solid #000;
}
.overlay {
    display: block;
	position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
    background: url("/images/utilities/bg-overlay-pattern.png") left top repeat;
}
.columns.header .header-nav {
	background: #000;
	opacity: .75;
}
.columns.header a {
  color: #fff;
  opacity: 1;
}
.columns.header .logo-arrow a {
  color: #fff;
}
.columns.header a:hover,.columns.header a:active {
	text-decoration: none;
	color: #82FFFF;
	transition: color .65s ease-out;
}
.header h2 {
	float: left;
	margin: 10px 5px;
	padding: 10px;
	font-size: 12px;
}
.header h1.hermet {
	color: #fff;
	font-size: 25px;
	font-family: 'Lato', sans-serif;
	position: absolute;
	top: 18px;
	right: 17px;
	padding: 10px 10px;
	opacity: .8;
	text-align: right;
	background-color: #c9c9c9;
}
.header h1.hermet:hover {
	color: #c9c9c9;
	opacity: .9;
	background-color: #ebebeb;
}
.header h1.hermet .sealed {
	font-weight: 300;
	color: #d2e9ff;
	opacity: .9;
}
.slogan {
	display: block;
	font-size: .65em;
	font-weight: 300;
	font-style: italic;
	font-family: Lato;
}
.header h2 a:after {
  content: ' / ';
}
.header h2 a:last-child:after {
  content: '';
}
#logo, #logotop {
	display: block;
	margin: 0 10px 10px 0;
	padding: 0 0 2px 0;

	width: 100%;
	max-width: 85px;
	opacity: 1;
	font-family: FontinCaps,Dekar;
	font-size: 40px;
	text-align: right;
}
#logo {
	margin-left: -14px;
	margin-bottom: 15px;
}
.date-o {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	right: 15px;
	font-family: 'Open Sans',Roboto,LeagueGothic,FontinCaps,Dekar;
	font-size: 18px;
	text-transform: lowercase;
	line-height: 1.1em;
	text-align: right;
}
.date-time {
	margin: 0;
	padding: 0;
	opacity: .35;
	font-family: FontinCaps,Dekar;
	font-size: 7px;
}
.datey {
	font-size: .45em;
	font-weight: 300;
	font-family: Roboto,LeagueGothic,FontinCaps,Dekar;
}
.arrow {
	text-align: right;
	position: relative;
	display: block;
	font-size: 1.5em;
	line-height: 1em;
	text-transform: uppercase;
	font-family: FontinCaps;
	animation: point-right 0.5s alternate 3;
}
.logo-arrow {
	text-align: right;
	position: relative;
	display: block;
	animation: point-right 0.5s alternate 3;
}

@keyframes point-right {
	from {
		left: 10px;
	}
	to {
		left: 0;
	}
}
		@-webkit-keyframes color_change {
		  from { color: white; }
		  to { color: red; }
		}
		@-moz-keyframes color_change {
		  from { color: white; }
		  to { color: red; }
		}
		@-ms-keyframes color_change {
		  from { color: white; }
		  to { color: red; }
		}
		@-o-keyframes color_change {
		  from { color: white; }
		  to { color: red; }
		}
		@keyframes color_change {
		  from { color: white; }
		  to { color: red; }
		}

.columns.post-body {
	padding: 0;
}
div.post {
	border-left: 1px solid #696969;
	padding-bottom: 0;
	margin-bottom: 20px;

}
.three.post {
	position:relative;
	border-left: 1px solid #696969;
	padding-bottom: 0;
	margin: 0 auto;
}

div.post img {
	padding: 10px;
	border: 1px solid #696969;

}
div.post address, div.post blockquote, div.post dd, div.post dir, div.post dl, div.post dt, div.post fieldset, div.post form, div.post h1, div.post h2, div.post h3, div.post h4, div.post h5, div.post h6, div.post hr, div.post li, div.post menu, div.post ol, div.post p, div.post pre, div.post table, div.postdetail ul {
	margin-left: 20px;
	margin-right: 20px;
}

.prev-next h6 {
	font-size: 10px;
}
h6.prev-post {
	float: left;
	/*text-transform: capitalize;*/
}
h6.next-post {
	float: right;
	text-align:right;
}




nav  {
	border: 1px solid #696969;
	background-color: #000;
	color:#fff;
	filter: alpha(opacity=80);
	-moz-opacity: 0.80;
	opacity: 0.8;
	text-align:left;
	font-size: xx-small;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: x-small;
	float: left;
	margin: 345px 0 1em 20px;
	position: absolute;
	top: -1px;
	left: -1px;
	padding: 5px;
	width: 170px;
	height: 25px;
}
nav ul {
    list-style:none;
	text-align: center;
	padding: 4px 0 0 0;
	margin: 0;
}
nav ul li {
	display: block;
	float: left;
	padding: 0 0 0 7px;
	margin: 0;
	font-family: DeliciousSmallCaps,arial,sans-serif;
	font-family: FontinCaps,arial,sans-serif;
}
nav ul li a:hover, nav ul li#on a, a#on {
	color: #82FFFF;
}
.nav-prev, .nav-next {
	display: block;
	float: left;
	width: 50%;
	padding: 5px 0;
}
.nav-next {
	text-align: right;
}
.nav-prev .arrow {
	text-align: left;
}
.credit {
	text-align:right;
	line-height:1.2em;
}
.credit a {
	margin-bottom: 60px;
	text-decoration: none;
	text-transform: capitalize;
	font-size: 9px;
	font-family: DejaVu,Dekar,Quicksand,Raleway,arial,sans-serif;
}
.accent {
	text-transform: lowercase;
}
footer {
	clear:both;
	margin: 50px auto 20px;
	padding-top: 10px;
	text-transform: lowercase;
	text-align: center;
	font: 2em 'Roboto',verdana,arial,sans-serif;
	font-weight: 300;	
	color: #868686;
	letter-spacing: .13em;
}
footer .address {
	margin-top:0;
	padding-top:0;
}
footer #smlogo {
	margin-top: 0;
	margin-bottom: 20px;
}
footer #sitecredit {
	margin-top: 20px;
	font-weight: 300;	
	color: #c40000;
}
footer a, footer a:link, footer a:visited {
	opacity: .7;
	color: #666633;
}
footer #sitecredit a {
	font-weight: 300;	
}
footer a:hover {
	opacity:1;
	transition: opacity .65s ease-out;
}
.footad {
	width: 100%;
	max-width: 100%;
	clear: both;
	float: none;
	margin: 0 auto;
	text-align: center;
}
.footad iframe {
	width: 100%;
	max-width: 100%;
}
.credits {
	clear: both;
	width: 100%;
	text-transform: lowercase;
}
.tight {
	color: #fff;
	opacity: 0.4;
}
.main .panel,.ctrl-main .panel {
	border-left: 3px solid #000;
	padding: 10px 25px 30px 25px;
	margin-bottom: 10px;
	opacity: 1;
}

.ctrl-main .panel {
	padding: 10px 15px;
	min-height: 40px;
}
footer .panel {
	border: none;
}
/*============================================================
 =pages
============================================================*/
.panel.pittures {
	border: 3px solid #fff;
}
.post-cat {
	font-size: .75em;
	font-family: Delicious,arial,sans-serif;
	color: #666;
	text-align: right;
}
/*============================================================
 =about box
============================================================*/
.about {
	float: left;
}
.about .panel {
	border-left: 3px solid #860000;
}
.about .panel h1 {
	font-family:Roboto,LeagueGothic,FontinCaps,Dekar;
	font-weight: 500;
}
.about .panel a {
	border-bottom: 1px dashed #860000;
}
.about-hide .panel {
	display: none;
}
/*============================================================
 =Contact Us
============================================================*/

/*============================================================
 =social
============================================================*/
ul.social {
    list-style: none outside none;
	margin-left: 10px;
	margin-top: 20px;
}
ul.social li {
	float: left;
}
a.share:link, a.share:visited {
	text-decoration: none;
	padding: 0 0.5em 0 0;
	color: #808080;
	border-bottom: none;
}

a.share:before {
	font-family: social;
	content: "T";
	margin-right: 6px;
}
a.facebook:before { content: "F";}
a.google:before { content: "G"; }

a.facebook:hover {
	color:  #3c599f;
}
a.google:hover {
	color:  #da2713;
}
a.twitter:hover {
	color:  #00abf0;
}

/*============================================================
 =Utilities
============================================================*/

.tap-to-close { display: block; font-size: 10px; font-size: 1rem; color: #888888; font-weight: normal; }


.nudge {
	padding-top: 5px;
}
.quote {
	font-size: 1.45em;
	line-height: 1.75em;
	margin-bottom: 12px;
	color: #5e6567;
}
.quote-credit, .caption {
	font-size: .65em;
	font-style: italic;
	color: #5e6567;
}
p.caption {
	margin-top: 0;
}
.title-credit {
	font-size: .45em;
}

.clearfix:after{
	content:" ";
	display:block;
	clear:both;	
}
.center-it {
	text-align: center;
}

#backtotop {
	height: auto;
	position: fixed;
	right: 30px;
	bottom: 30px;
	display: none;
	z-index: 30;
}
#backtotop ul {
	list-style-type: none;
	padding: 15px 0px;
}
#backtotop ul li a {
	background: url("/images/utilities/arrow.jpg") no-repeat #000;
	display: block;
	opacity: .6;
	width: 50px;
	height: 50px;
	float: right;
	right: 10px;
	text-indent: -9000px;
	box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
}
#backtotop ul li a:hover {
	opacity:1;
	transition: opacity 0.8s;
}
/* ctrl */
.data-display:hover {
	background: #E5E5DD;
}
input.readonly {
	background-color: #eee;
	color: #ADADAD;
}
.table-header h2 {
	float: left;
}
.table-header h2.add-post {
	float: right;
	font-size: 2em;
}
/* Boxes ---------------------- */
#message {
    background: url("/images/utilities/box_info.png") no-repeat scroll 0px 0px rgb(235, 245, 250);
    border-color: rgb(161, 192, 208);
    color: rgb(29, 94, 128);
}
.box-warning {
    background: url("/images/utilities/box_warning.png") no-repeat scroll 0px 0px rgb(255, 240, 235);
    border-color: rgb(237, 177, 162);
    color: rgb(150, 62, 39);
}
.box-hint {
    background: url("/images/utilities/box_hint.png") no-repeat scroll 0px 0px rgb(255, 250, 230);
    border-color: rgb(226, 196, 135);
    color: rgb(106, 79, 22);
}

.box-note, #message, .box-warning, .box-hint, .box-download {
    background: none repeat scroll 0% 0% rgb(250, 250, 250);
    border: 1px solid rgb(204, 204, 204);
}
.box-content, .box-note, #message, .box-warning, .box-hint, .box-download {
    border: 1px solid rgb(204, 204, 204);
    border-radius: 3px 3px 3px 3px;
    background: none repeat scroll 0% 0% rgb(250, 250, 250);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
}
#message, .box-warning, .box-hint, .box-download {
    padding-left: 40px;
}
.box-content, .box-note, #message, .box-warning, .box-hint, .box-download {
    margin: 15px 0px;
    padding: 10px;
    text-align: justify;
}
/* Lettering ---------------------- */
.os-phrases h2 {
    font-family: 'Dosis', 'Lato', sans-serif;
    font-size: 20px;
    font-weight: 200;
    height: 100%;
    width: 100%;
    overflow: hidden;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    letter-spacing: 14px;
    text-align: center;
}
.os-phrases h2,
.os-phrases h2 > span {
    height: 100%;
    /* Centering with flexbox */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.os-phrases h2 > span {
    margin: 0 15px;
}
.os-phrases h2 > span > span {
    display: inline-block;
    perspective: 1000px;
    transform-origin: 50% 50%;
}
.os-phrases h2 > span > span > span {
    display: inline-block;
    color: hsla(0,0%,0%,0);
    transform-style: preserve-3d;
    transform: translate3d(0,0,0);
    animation: OpeningSequence 5.2s linear forwards;
}
.os-phrases h2:nth-child(2) > span > span > span {
    animation-delay: 5s;
}
 
.os-phrases h2:nth-child(3) > span > span > span {
    animation-delay: 10s;
}
 
.os-phrases h2:nth-child(4) > span > span > span {
    animation-delay: 15s;
}
 
.os-phrases h2:nth-child(5) > span > span > span {
    font-size: 150px;
    animation-delay: 21s;
    animation-duration: 8s;
}
 
.os-phrases h2:nth-child(6) > span > span > span {
    animation-delay: 30s;
}
 
.os-phrases h2:nth-child(7) > span > span > span {
    animation-delay: 34s;
}
@keyframes OpeningSequence {
    0% {
        text-shadow: 0 0 50px #fff;
        letter-spacing: 80px;
        opacity: 0.2;
        transform: rotateY(-90deg);
    }
    50% {
        text-shadow: 0 0 1px #fff;
        letter-spacing: 14px;
        opacity: 0.8;
        transform: rotateY(0deg);
    }
    85% {
        text-shadow: 0 0 1px #fff;
        opacity: 0.8;
        transform: rotateY(0deg) translateZ(100px);
    }
    100% {
        text-shadow: 0 0 10px #fff;
        opacity: 0;
        transform: translateZ(130px);
        pointer-events: none;
    }
}
.os-phrases h2:nth-child(8) > span > span > span {
    font-size: 30px;
    animation: FadeIn 4s linear 40s forwards;
}
 
@keyframes FadeIn {
    0% {
        opacity: 0;
        text-shadow: 0 0 50px #fff;
    }
    100% {
        opacity: 0.8;
        text-shadow: 0 0 1px #fff;
    }
}
/* Bold words */
.os-phrases h2:first-child .word3,
.os-phrases h2:nth-child(2) .word2,
.os-phrases h2:nth-child(4) .word2 {
    font-weight: 600;
}

/* Modal ---------------------- */
.reveal-modal-bg {
position: fixed;
}
    .reveal-modal {
        top: 20% !important;
    }
    .reveal-modal p {
        margin: 0 auto;
		padding: 0;
		text-align: center;
    }
.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto;
    z-index: 2000;
    visibility: hidden;
    backface-visibility: hidden;
    transform: translateX(-50%) translateY(-50%);
}
 
.md-show {
    visibility: visible;
}
 
.md-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;
    background: rgba(143,27,15,0.8);
    transition: all 0.3s;
}
 
.md-show ~ .md-overlay {
    opacity: 1;
    visibility: visible;
}
.md-perspective,
.md-perspective body {
    height: 100%;
    overflow: hidden;
}
 
.md-perspective body  {
    background: #222;
    perspective: 600px;
}
 

/* Effect 5: newspaper */
.md-show.md-effect-5 ~ .md-overlay {
    background: rgba(0,127,108,0.8);
}
 
.md-effect-5 .md-content {
    transform: scale(0) rotate(720deg);
    opacity: 0;
    transition: all 0.5s;
}
 
.md-show.md-effect-5 .md-content {
    transform: scale(1) rotate(0deg);
    opacity: 1;
}


 
/*Media Queries*/
@media only screen and (max-width : 1199px),
only screen and (max-device-width : 1199px){
    #container {
        width: 90%;
    }
}
 
 
@media only screen and (max-width : 999px),
only screen and (max-device-width : 999px){
    #container {
        width: 90%;
    }
}
 
@media only screen and (max-width : 867px),
only screen and (max-device-width : 867px){
	.row .eight {
		width: 90%;
	}
	.date-o {
		padding: 0;
		left: 0;
		top: 15px;
		text-align: left;
	}
	.date-o a {
		text-overflow: ellipsis;
	}
	.main .panel {
		border: none;
		border-bottom: 1px solid #E6E6E6;
		background: none;
	}
	.columns.header {
		padding: 15px;
	}
	.columns.header .header-nav {
		opacity: .65;
	}
	.header h1.hermet, .about {
		display: none;
	}
	.header h2 a {
		display: block;
		padding: 10px;
		font-size: 16px;
	}

}
@media only screen and (max-width : 767px),
only screen and (max-device-width : 767px){

	.date-o {
		padding: 0 25px;
		left: 15px;
		top: 0;
		text-align: left;
	}
	.main .panel {
		border: none;
		border-bottom: 1px solid #E6E6E6;
		background: none;
	}
	.columns.header {
		padding: 15px;
	}
	.columns.header .header-nav {
		opacity: .65;
	}
	.header h1.hermet, .about {
		display: none;
	}
	.header h2 a {
		display: block;
		padding: 10px;
		font-size: 16px;
	}

	/* on mobile browsers, I set a width of 100% */
	table.mceLayout, textarea.tinyMCE {
		width: 100% !important;
	}
}
 
@media only screen and (max-width : 599px),
only screen and (max-device-width : 599px){
    #container {
        width: 100%;
    }
}
 
@media only screen and (max-width : 399px),
only screen and (max-device-width : 399px){
    #container {
        width: 100%;
    }
	.date-time {
		opacity: .75;
		font-size: .50em;
	}
	.column, .columns {

		width: 100% !important;
		float: none;

	}
}
/* these target pixel 4a */
@media only screen and (max-width : 393px),
only screen and (max-device-width : 393px){

}
@media only screen and (-webkit-min-device-pixel-ratio: 2.75) {

}