@font-face {
  font-family: 'FontAwesome';
  src: url('../webfonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../webfonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../webfonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../webfonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../webfonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../webfonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

* { margin: 0; padding: 0; }
html, body { height: 100%; }
body { background-color: #ededee; }
.clear { clear: both; }

#container { max-width: 1500px; margin: 0 auto; }

/* HOME PAGE */
#home-container { height: 100%; width: 90%; display: table; background-color: #ededee; padding: 0 5%; }
#home-content { display: table-cell; vertical-align: middle; width: 640px; text-align: center; margin: 0 auto; padding-top: 10px; }
#home-title { max-width: 640px; margin: 0 auto; }
#home-title img { width: 100%; height: auto; }
#home-nav { max-width: 640px; margin: 20px auto 0 auto; background-color: #444752; text-align: center; font-family: Lato, sans-serif; font-weight: 300; font-size: 45px; color: #ededee; line-height: 65px; padding: 35px 0; }
#home-nav a { color: #ededee; text-decoration: none; transition: color .3s ease-in-out!important; -moz-transition: color .3s ease-in-out!important; transition: color .3s ease-in-out!important; }
#home-nav a:hover { color: #ccc; }
/* END HOME PAGE */

/* INNER PAGES */
#inner-header { padding: 15px; }
#inner-title { width: 350px; height: 26px; margin-bottom: 15px; float: left; }
#inner-title img { width: 100%; height: auto; }
#inner-tag { width: 350px; height: 26px; margin-bottom: 15px; float: right; }
#inner-tag img { width: 100%; height: auto; }
#inner-nav-bar { background-color: #444752; padding: 10px 15px; position: relative; color: #9bd402; /*color: #7592fd;*/ }
#inner-nav-bar a { color: #ededee; text-decoration: none; display: inline-block; margin-right: 15px; }
#inner-nav-bar a.last { margin-right: 0; }
#inner-nav-bar a:hover { color: #ccc; }
#inner-nav-bar span.active { margin-right: 15px; }
#inner-nav, #mobile-nav { font-family: Lato, Helvetica, sans-serif; font-weight: 300; font-size: 20px; text-align: right; }
#mobile-nav { text-align: left; }
#inner-nav a { color: #ededee; text-decoration: none; transition: color .3s ease-in-out!important; -moz-transition: color .3s ease-in-out!important; transition: color .3s ease-in-out!important; }
#inner-nav a:hover { color: #ccc; }

#mobile-menu-button { display: none; width: 25px; height: 25px; float: right; font-family: FontAwesome; font-size: 25px; }
#mobile-menu-button a { color: #ededee; text-decoration: none; }
#mobile-nav { display: none; background-color: #444752; position: absolute; z-index: 25; left: 0; right: 0; top: 45px; -webkit-box-shadow: -1px 13px 5px -3px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 13px 5px -3px rgba(0,0,0,0.75);
box-shadow: -1px 13px 5px -3px rgba(0,0,0,0.75); }
#mobile-nav-links { list-style-type: none; }
#mobile-nav-links li { border-bottom: 1px solid #7592fd; padding: 10px 0 10px 15px; font-size: 25px; }
#mobile-nav-links li a { color: #ededee; text-decoration: none; }

#inner-footer { background-color: #444752; font-size: 12px; color: #bbb; padding: 10px 15px; margin-bottom: 25px; font-family: Lato, Helvetica, sans-serif; text-align: left; }


#inner-content { position: relative; margin: 0 15px; }
#inner-content .left { width: 350px; float: left; }
#list #inner-content .right { width: 100%; position: absolute; top: 0;  padding-top: 10px; text-align: center; }
.centered { width: 500px; text-align: left; display: inline-block; /*left: 50%; transform: translateX(-50%);*/ }

#inner-content .right { font-family: Lato, Helvetica, sans-serif; font-size: 16px; color: #444752; /* border: 1px red solid; */ }
#music #inner-content .right h3 { font-size: 26px; font-weight: 400; }
#inner-content .right h3.subhead { padding: 5px 0 5px 15px; color: #fff; background-color: #999; font-size: 20px; }
#music #inner-content .right { width: 640px; float: left; margin-top: 11px; font-size: 18px; }
#music #inner-content .right img { width: 100%; height: auto; }
.article { line-height: 25px; }
.article .copyright { font-size: 14px; line-height: normal; }
.article p { margin-bottom: 20px; }
.article ul { margin-left: 20px; }

.social { font-family: FontAwesome; font-size: 40px; margin-top: 10px; }

#inner-page-title { color: #78a304; font-family: Lato, Helvetica, sans-serif; font-weight: 400; font-size: 40px;}

#inner-content .right a, .social a { color: #6179d0; text-decoration: none; transition: color .3s ease-in-out!important; -moz-transition: color .3s ease-in-out!important; transition: color .3s ease-in-out!important; }
#inner-content .right a:hover, .social a:hover { color: #aaa; }

table.article-list td { padding-bottom: 10px; }
table.article-list td.date { width: 65px; }
table.article-list td.list-title { width: 400px; padding-right: 10px; }

.book-cover { width: 50%; max-width: 400px; height: auto; }

hr { height: 5px; background-color: #999; }

ul.indented-list li { margin-left: 25px; }

/* -- contact form -- */
.form-label { font-family: 'Lato', sans-serif; font-size: 18px; color: #444752; margin: 10px 0 5px 0; }

input[type=text] { width: 95%; max-width: 300px; height: 30px; background-color: #ddd; border: none; border-radius: 5px; padding: 10px; font-family: 'Lato', sans-serif; font-size: 16px; background-color: #ddd; }

textarea { width: 100%; /*width: 95%; max-width: 480px;*/ height: 150px; border: none; border-radius: 5px; background-color: #ddd; vertical-align: top; font-family: 'Lato', sans-serif; font-size: 16px; padding: 10px; }

.anti-spam-area { background-color: #bbb; padding: 20px; color: #666; font-size: 18px; }

.styled select { background: transparent; width: 120px; font-size: 16px; height: 40px; border: none;
padding-left: 10px; } 

select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; }

.styled { width: 80px; height: 40px; overflow: hidden; background: url(../images/select-arrows.jpg) 90% / 40% no-repeat #ddd; border-radius: 5px; margin-top: 10px; }

input:focus, textarea:focus { background-color: #f4f4f4; }

button#submit, button#signup { background-color: #ff2d00; border: none; border-radius: 5px; color: #fff; font-size: 20px; padding: 10px 20px; margin-bottom: 50px; font-family: 'Lato', sans-serif; }

input#check2:focus { background-color: #f4f4f4; }

input[type="submit"] {
  box-sizing: border-box;
	font-size: 16px;
	text-align: center;
	color: #fff;
	padding: 10px 15px;
    border-radius: 5px;
    border: none;
    box-shadow: none;
    font-family: inherit;
    background-color: /*#ff7000*/#5e688f;
    transition: background-color .25s ease-in-out; -moz-transition: background-color .25s ease-in-out; -webkit-transition: background-color .25s ease-in-out; border-radius: 5px; margin-top: 15px; cursor: pointer; }
    
input[type="submit"]:hover { background-color: #444752; /*#d75f01; #e06301;*/ }
/* end contact form */

#list.connect #inner-content .right .signup-box h3 { font-size: 26px; font-weight: 400; }

#home-button { width: 25px; height: 25px; float: left; font-family: FontAwesome; font-size: 25px; }
#home-button a { color: #888; text-decoration: none; -webkit-text-stroke: 1px #444752; transition: color .3s ease-in-out!important; -moz-transition: color .3s ease-in-out!important; transition: color .3s ease-in-out!important; }


/* END INNER PAGES */

@media screen and (max-width: 1234px) {
#list #inner-content .right { /*position: relative; float: left; transform: translateX(0%); left: 0;*/ text-align: left; }
.centered { margin-left: 351px; }

}
/*@media screen and (max-width: 1040px) {
#music #inner-content .right, #music #container { width: 500px; }
}*/
@media screen and (max-width: 984px) {
#list #inner-content .right { /*width: 75%; margin-top: 10px;*/ }
}
@media screen and (max-width: 840px) {
#music #inner-content .left { float: none; width: auto; }
#music #inner-content .right, #music #container { width: auto; max-width: 640px; }
#music #inner-content .right { float: none; clear: both; margin-top: 20px; }
#list #inner-content .left { float: none; clear: both; width: auto; }
#list #inner-content .right { position: relative; width: auto; padding-left: 0; padding-top: 30px; }
#list.connect #inner-content .right { padding-top: 15px; }
.centered { width: 75%; margin-left: 0; }

#inner-nav { display: none; }
#mobile-menu-button { display: block; }
#home-button { float: left; }
/*#inner-nav { float: left; }
#home-button { float: right; }*/

#inner-content .left, #inner-content .right { width: auto; }
#inner-title, #inner-tag { width: 275px; }
}
@media screen and (max-width: 700px) {
#list.connect #inner-content .right { width: 100%; }
/*#inner-nav { display: none; }
#mobile-menu-button { display: block; }
#home-button { float: left; }*/
.centered { display: block; width: auto; }
}
@media screen and (max-width: 610px) {
#inner-title, #inner-tag { float: none; width: 350px; }
}
@media screen and (max-width: 600px) {
#home-nav { font-size: 35px; line-height: 50px; padding: 25px 0; }
}
@media screen and (max-width: 479px) {
#home-nav { font-size: 30px; }
}
@media screen and (max-width: 400px) {
#home-nav { font-size: 25px; }
}
@media screen and (max-width: 380px) {
#inner-title, #inner-tag { width: auto; float: none; }
}