/*
Theme Name: Montreal Underground Origins
Theme URI: https://www.montrealundergroundorigins.ca
Description: Theme created for Montreal Underground Origins
Author: Example7
Author URI: https://www.example7.com
Version: 1.0

  Colors
  ------
  black   3b3b3b
  gray    717171    a3a1a1
  blue    3465a5
  brown   57473b
  brick   c04d35
  tan     a39982
  orange  fb843f
  cream   fff6cf

  Webfonts
  --------
  logo/headers     Jubilat Black  font-family: "jubilat", sans-serif;         600/700
  body             PT Sans        font-family: "pt-sans", sans-serif;         400/700

*/





/* ====================================================================
   Global
   ==================================================================== */

/* -------------------[ Layout ]------------------- */

body { 
  background: url(images/background.jpg) repeat center top #FFF; 
}

#container { 
  position: relative; 
  width: 990px; min-height: 100%; margin: 30px auto 0 auto; padding: 0;
  background: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.3); 
}

#content { 
  clear: both; overflow: auto; 
  width: 940px; min-height: 200px; margin: 0; padding: 25px 25px 120px 25px; 
}

#footer { 
  clear: both; position: absolute; bottom: 0; left: 0; 
  width: 92%; max-width: 940px; min-height: 60px; margin: 0; padding: 15px 4%; 
  background-color: #a39982;
}

/* -------------------[ Type ]------------------- */

body, html { 
  color: #3b3b3b; font-family: "pt-sans", sans-serif; font-size: 15px; line-height: 20px; 
}

/* -------------------[ Links ]------------------- */

a { 
  transition: .5s; -o-transition: .5s; -ms-transition: .5s; -moz-transition: .5s; -webkit-transition: .5s;
}

a:link, a:visited, a:active { 
  color: #3465a5; text-decoration: none; 
}

a:hover { 
  color: #3b3b3b; text-decoration: none; 
}

/* -------------------[ Headers ]------------------- */

h1,
h2 { 
  margin: 0 0 15px 0; 
  font-family: "jubilat"; font-weight: 600; 
}

h1 { 
  font-size: 20px; line-height: 26px; 
}

h2 { 
  font-size: 17px; line-height: 22px; 
}

h3 { 
  font-size: 15px; line-height: 20px; 
}

/* -------------------[ Header Full Width and Double Lines ]------------------- */

h6 { 
  display: inline-block;
  width: 100%; margin-bottom: 20px; padding: 0 10px;
  font-family: "jubilat"; font-weight: 600; font-size: 25px; line-height: 25px; text-align: center; text-transform: uppercase; 
}

h6:before,
h6:after {
  position: relative; display: inline-block;
  width: 50%; height: .1em; margin-bottom: .25em;
  border-top: 1px solid #3465a5; border-bottom: 1px solid #3465a5;
  content: "";
}

h6:before {
  right: .5em;
  margin-left: -50%;
}

h6:after {
  left: .5em;
  margin-right: -50%;
}

/* -------------------[ Lists ]------------------- */

#content ul,
#content ol { 
  margin: 0 0 10px 30px; padding: 0;
}

#content ul li,
#content ol li { 
  margin: 0; padding: 0 0 3px 0;
  list-style-position: outside; 
}

#content ul li {
  list-style: disc; 
}

#content ol li { 
  list-style-type: decimal; 
}

/* -------------------[ Search ]------------------- */

.search-header { 
  clear: both; position: relative; left: -25px; 
  width: 100%; margin: 0 0 50px 0; padding: 7px 5px 10px 25px; 
  background-color: #e6d89d;
  font-family: "jubilat"; font-size: 24px; line-height: 30px; font-weight: 600; 
}

/* -------------------[ Pagination by Number ]------------------- */

.pagination { 
  clear: both; 
  margin: 10px 0; 
  font-size: 18px; line-height: 26px; 
}

.pagination .page-numbers {
  float: left; 
  width: 18px; margin: 0 10px 30px 0; padding: 2px 3px; 
  border: 1px solid #3465a5; 
  background-color: #3465a5;
  color: #FFF; text-align: center; 
}

.pagination a.page-numbers:hover,
.pagination .current { 
  background: none;
  color: #3b3b3b;
}

.pagination .prev, 
.pagination .next {
  display: none;
}











/* ====================================================================
   Header
   ==================================================================== */

/* -------------------[ Header Bar ]------------------- */

#header-bar-wrap { 
  clear: both; position: fixed; top: 0; z-index: 100; 
  width: 100%; height: 30px; margin: 0 0 30px 0; padding: 0; 
  background-color: #a39982;
  font-family: "pt-sans"; font-size: 11px; line-height: 11px; font-weight: 400; letter-spacing: 0.03em; text-transform: uppercase; 
}

.header-bar { 
  width: 940px; margin: 0 auto; padding: 9px 25px 0 25px;   
}

.header-bar a { 
  color: #FFF;
}

.header-bar a:hover { 
  color: #3b3b3b;
}

.header-lang {
  float: left; 
  text-decoration: none; 
}

.header-search { 
  float: left; 
  margin: -3px 0 0 15px; 
}

.header-search input {
  outline: none;
}

.header-search input[type=search] {
  width: 50px; height: 12px; padding: 4px 4px 2px 28px;
  border: none; 
  background: url(images/search-icon.png) no-repeat 6px center #FFF;
  -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s;
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  color: #717171; font-family: "pt-sans"; font-size: 11px; line-height: 11px; font-weight: 400; text-transform: lowercase !important; letter-spacing: 0.1em; text-decoration: none; 
}

.header-search input::-webkit-search-decoration,
.header-search input::-webkit-search-cancel-button {
  display: none; 
}

.header-search input[type=search]:focus {
  width: 150px;
  background-color: #fff;
}

.header-links { 
  float: right; 
  text-align: right; 
}

.header-links a { 
  margin: 0 0 0 20px;
}

.header-social { 
  float: right; 
  height: 18px; margin-left: 15px; 
  text-align: right; 
}

.socicon {
  display: inline-block; 
  width: 18px; height: 18px; margin: -4px 0 0 5px; 
  background-size: 100%;
}

.socicon:hover {
  opacity: 0.5; 
}

.social-facebook { background: url(images/social_facebook.svg); }
.social-twitter { background: url(images/social_twitter.svg); }

/* -------------------[ Header ]------------------- */

#header-pages-home,
#header-blog-home { 
  width: 100%; height: 60px; margin: 0; padding: 240px 0 0 0; 
  font-family: "jubilat"; font-size: 40px; line-height: 50px; font-weight: 700; text-indent: 25px; 
}

#header-pages,
#header-blog { 
  width: 100%; height: 50px; margin: 0; padding: 5px 0 0 0; 
  font-family: "jubilat"; font-size: 30px; line-height: 40px; font-weight: 900; text-indent: 25px; 
}

#header-pages-home { 	background: url(images/background_header.jpg) no-repeat 0 0; } 
#header-pages { 	background: url(images/background_header.jpg) no-repeat 0 -240px; }

#header-blog-home { 	background: url(images/background_header_blog.jpg) no-repeat 0 0; } 
#header-blog { 		background: url(images/background_header_blog.jpg) no-repeat 0 -240px; }

#header-pages-home, #header-pages a { 	color: #fff6cf; }
#header-pages a:hover { 		color: #a39982; }

#header-blog-home, #header-blog a { 	color: #FFF; }
#header-blog a:hover { 			color: #3465a5; }

/* -------------------[ Nav ]------------------- */

#header-nav {
  clear: both; 
  width: 100%; height: 15px; margin: 0; padding: 7px 0;
  background: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.5); 
}

.nav-main {
  margin: 0 0 0 25px; 
}

.nav-main ul, 
.nav-main li { 
  margin: 0; padding: 0; 
}

.nav-main a {
  float: right; 
  height: 15px; margin: 0 30px 0 0; padding: 0; 
  color: #3b3b3b; font-family: "pt-sans"; font-size: 15px; line-height: 15px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none; 
}

.nav-main a:hover, 
.nav-main li.current_page_item a,
.nav-main li.current-menu-item a,
.nav-main li.current-menu-parent a, 
.nav-main li.current-menu-ancestor a,
.nav-main li.current-category-ancestor a, 
.nav-main li.current-page-ancestor a { 
  color: #3465a5;
}

.menu ul { 
  list-style: none; 
}

.menu li { 
  float: left; position: relative; 
  margin: 0; padding: 0; 
}










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

/* -------------------[ Layout ]------------------- */

.post { 
  float: left;
  width: 750px; 
}

#side { 
  float: right;
  width: 130px; padding: 0 10px; 
  background: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.3); 
  color: #3b3b3b; font-family: "pt-sans", sans-serif; font-size: 13px; line-height: 18px; text-align: center; 
}

/* -------------------[ Top ]------------------- */

.posttop { 
  clear: both; position: relative; left: -25px; 
  width: 100%; margin: 0 0 20px 0; padding: 7px 5px 10px 25px; 
  background-color: #3465a5; 
}

.posttop h1 { 
  margin: 0; 
}

.posttop h1, 
.posttop h1 a { 
  color: #FFF; 
}

.posttop h1 a:hover,
.posttop-meta a:hover { 
  color: #3b3b3b; 
}

.posttop-meta,
.posttop-meta a { 
  color: #FFF; font-size: 14px; line-height: 14px; text-transform: uppercase; 
}

/* -------------------[ Post ]------------------- */

.post-read-more-link { 
  clear: both; float: right; 
  margin: 0 0 20px 0;  
  text-align: right; 
}

/* -------------------[ Pagination on Post (nextpage) ]------------------- */

#nextpage-page-links {
  clear: both; 
  margin: 10px 0; 
  font-size: 18px; line-height: 26px;
}

#nextpage-page-links .nextpage-page-links-number {
  float: left; 
  width: 18px; margin: 0 10px 30px 0; padding: 2px 3px; 
  border: 1px solid #3465a5; 
  color: #3b3b3b; text-align: center; 
}

#nextpage-page-links a .nextpage-page-links-number { 
  width: 18px; 
  background-color: #3465a5;
  color: #FFF;
  transition: .5s; -o-transition: .5s; -ms-transition: .5s; -moz-transition: .5s; -webkit-transition: .5s;
}

#nextpage-page-links a .nextpage-page-links-number:hover { 
  background: none;
  color: #3b3b3b;
}

#nextpage-page-complete { 
  padding: 8px 0 0 5px;
  font-size: 15px; line-height: 15px;
} 

/* -------------------[ Bottom ]------------------- */

.postbottom {
  clear: both; display: block;
  width: 100%; margin: 25px 0; padding: 7px 0; 
  border-top: 1px dashed #717171; 
  font-size: 12px; line-height: 15px; text-transform: uppercase; text-align: left; 
}

.social-sharing {
  float: right; 
  margin: 0 0 0 10px;
}

/* -------------------[ Pagination for Prev Next Posts ]------------------- */

.post-prev-next-links {
  clear: both; display: block; overflow: auto; 
  width: 100%; margin: 0 0 50px 0; padding: 10px 0; 
  border-top: 1px solid #717171; border-bottom: 1px solid #717171; 
}

.post-prev-next-links-back { 
  float: left; 
  width: 48%; 
}

.post-prev-next-links-next { 
  float: right; 
  width: 48%; 
  text-align: right; 
}

.post-prev-next-links-arrow {
  color: #3465a5;
}

/* -------------------[ Comment Form ]------------------- */

#respond { 
  width: 100%; 
}

#respond h3 { 
  margin: 0 0 20px 0; padding: 0; 
  font-family: "jubilat"; font-size: 18px; line-height: 25px; font-weight: 600; 
}

#respond input[type=text], 
#respond textarea {
  margin: 0 0 15px 0; padding: 3px;
  border: 1px solid #717171;
  -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none;
}

#respond input[type=text]:focus, 
#respond textarea:focus {
  border: 1px solid #717171;
  box-shadow: 0 0 5px #717171;
}

.comment-form-author label, 
.comment-form-email label, 
.comment-form-url label { 
  display: block; clear: both; float: left; 
  width: 80px; 
  color: #3b3b3b; font-size: 13px; line-height: 20px; 
}

.comment-form-author input, 
.comment-form-email input, 
.comment-form-url input { 
  display: block; float: left; 
  width: 60%;
}

.required { 
  color: #3d3131;
}

#respond textarea { 
  display: block; clear: both;
  width: 70%; margin: 0 0 0 80px; 
} 

#submit {
  clear: both; display: inline-block; 
  width: 80px !important; margin: 15px 0 0 80px; padding: 5px 10px !important; 
  border: 1px solid #FFF; 
  background-color: #717171 !important; 
  color: #fff6cf; font-size: 13px; line-height: 20px; text-decoration: none; text-align: center; 
} 

#submit:hover {
  border: 1px solid #fff6cf; 
  background-color: #FFF !important; 
  color: #3b3b3b;
}

#cancel-comment-reply-link { 
  display: block; float: right; position: relative; top: -15px; 
  width: 150px; height: 15px; 
  font-size: 13px; line-height: 20px; text-align: right; 
}

/* -------------------[ Comments ]------------------- */

#the-comment-area { 
  clear: both;  
  margin: 60px 0 0 0; 
}

#the-comment-area h2 { 
  margin: 0 0 20px 0; padding: 0; 
  font-family: "jubilat"; font-size: 18px; line-height: 25px; font-weight: 600; 
}

.the-comment { 
  min-height: 110px; margin: 0; padding: 0; 
  margin: 0 0 20px 0; padding: 0 0 5px 0; 
  border-bottom: 1px dashed #717171;  
}

.comment-author { 
  font-size: 16px; line-height: 20px; 
}
 
.comment-date { 
  clear: left; 
  font-size: 13px; line-height: 20px; 
}

.comment-text { 
  clear: left; 
  padding-top: 10px; 
}

.commentlist li { 
  clear: both; 
  width: 100%; margin: 0 0 10px 0 !important; 
  list-style: none !important; 
}

/* -------------------[ Comments Child ]------------------- */

ol.commentlist li ul.children .the-comment { 
  margin: 20px 0 0 40px; 
  text-indent: 0; list-style: none; 
}

ol.commentlist li ul.children li.depth-2 { clear: both; float: right; width: 96%; }
ol.commentlist li ul.children li.depth-3 { clear: both; float: right; width: 92%; }
ol.commentlist li ul.children li.depth-4 { clear: both; float: right; width: 88%; }
ol.commentlist li ul.children li.depth-5 { clear: both; float: right; width: 82%; }

ol.commentlist li div.reply { 
  margin: 15px 0 0 0; padding: 0; 
  font-size: 12px; line-height: 20px; font-weight: normal; letter-spacing: 0.07em; text-transform: uppercase; text-align: right; 
}

/* -------------------[ Excerpt Views ]------------------- */

.tax-header { 
  clear: both; position: relative; left: -25px; 
  width: 750px; margin: 0 0 50px 0; padding: 7px 5px 10px 25px; 
  background-color: #e6d89d;
  font-family: "jubilat"; font-size: 24px; line-height: 30px; font-weight: 600; 
}

.post-excerpt {
  clear: both; 
  width: 100%; margin-bottom: 70px; 
}

.excerpt-thumb { 
  clear: both; float: left; 
  width: 230px; height: 340px; margin: 3px 25px 30px 0; padding: 0; 
}

.excerpt-thumb img,
.excerpt-thumb-home img { 
  width: 230px !important; height: 340px !important;
}

.excerpt-thumb img:hover,
.excerpt-thumb-home img:hover { 
  opacity: 0.9;
}

.excerpt-text { 
  float: left; 
  width: 60%; 
}

.post-excerpt-home { 
  float: left; 
  width: 29%; min-width: 230px; padding: 0 2%;
}

.excerpt-thumb-home { 
  clear: both; 
  margin: 15px 0; 
}

.post-title-home { 
  margin: 0 0 5px 0; 
  font-family: "jubilat"; font-weight: 600; font-size: 18px; line-height: 22px; 
}

.post-date-home {
  font-size: 12px; line-height: 12px; margin-bottom: 12px; 
}

/* -------------------[ Sidebar ]------------------- */

#side ul { 
  margin: 6px 0 25px 0; padding: 0; 
}

#side ul li { 
  list-style: none; 
  margin: 0 0 4px 0; padding: 0; 
}

h2.widgettitle { 
  margin: 0 0 3px 0; 
  font-size: 16px; line-height: 18px; 
}










/* ====================================================================
   Images
   ==================================================================== */

/* -------------------[ Main Page ]------------------- */

#content-images { 
  clear: both; overflow: hidden; 
  width: 940px; min-height: 800px; margin: 0; padding: 25px 25px 120px 25px; 
}

.muo-image { 
  float: left; 
  width: 230px; height: 340px; margin: 0 5px 10px 0; padding: 0
}

.muo-image img { 
  width: 230px; height: 340px; 
}

.muo-image:hover img { 
  opacity: 0.4; 
}

.muo-image div {
  display: none;
}

.muo-image:hover div {
  display: block; position: relative; top: -345px; z-index: 6; overflow: hidden; 
  width: 200px; height: 290px; padding: 50px 10px 0 20px; 
  background-color: #3465a5; opacity: 0.8; 
}

.muo-image:hover div, 
.muo-image a, 
.muo-image a:hover {
  color: #FFF; 
}

.muo-image:hover h1 { 
  margin: 0 0 20px 0; padding: 0; 
  color: #FFF; 
}

/* -------------------[ Single ]------------------- */

.post-images img { 
  max-width: 230px; width: 92%; margin-right: 8%; height: auto;
}

#gallery-1 img {
  border: none !important; 
}










/* ====================================================================
   Footer
   ==================================================================== */

/* -------------------[ Layout ]------------------- */

.footer-text { 
  float: left; 
  width: 590px; text-align: justify; 
  color: #FFF; font-family: "pt-sans"; font-size: 13px; line-height: 18px; font-weight: 400; 
}

.footer-logos { 
  float: right; 
  text-align: right; 
}

.footer-logos img { 
  margin: 15px 0 0 20px; 
}