/*

Theme Name: Child of Twenty Twelve
Description: Child theme based Twenty Twelve Theme
Author: David Robbins
Version: 0.0.2
Template: twentytwelve

/********************************
UPDATED DEC 2017 by Suny Gao suny.gao@gmail.com

IMPORTANT!
Don't edit .css file directly
Source file is located at themes/Childof2012Theme/src/scss/style.scss
https://bitbucket.org/sunygao/titussite
/********************************


*/
/********************************
*
* Fonts
*
********************************/
@import url("https://fonts.googleapis.com/css?family=EB+Garamond:400,600|Quantico");
/********************************
*
* Colors
*
********************************/
/********************************
*
* Mixins
*
********************************/
html,
body,
body .site,
body.custom-background {
  background: #333 !important; }

body .site {
  font-family: 'EB Garamond', serif;
  box-shadow: none;
  max-width: 1000px;
  color: #cccccc;
  margin: 0 auto;
  padding: 0;
  font-size: 16px; }

.tumblr_post a,
.width-area .widget a,
.comments-link a,
.entry-meta a,
.entry-content a,
a {
  color: #e6e6e6; }
  .tumblr_post a:hover,
  .width-area .widget a:hover,
  .comments-link a:hover,
  .entry-meta a:hover,
  .entry-content a:hover,
  a:hover {
    color: white; }

.tumblr_post a {
  color: #e6e6e6 !important; }
  .tumblr_post a:hover {
    color: white; }

.entry-content a {
  font-family: 'EB Garamond', serif;
  font-weight: 600;
  position: relative; }
  .entry-content a:hover {
    text-decoration: none; }

/********************************
*
* HEADER STYLING
*
********************************/
#masthead {
  width: 30%;
  min-width: 180px;
  float: left;
  position: relative; }

.header-image {
  display: block;
  margin: auto; }

#site-navigation {
  font-family: 'Quantico', sans-serif;
  text-transform: uppercase;
  margin: 25px 0 50px; }
  #site-navigation ul {
    border-top: none;
    border-bottom: none; }
  #site-navigation li {
    display: block;
    font-size: 18px;
    width: 100%; }
    #site-navigation li a {
      display: block;
      line-height: 1;
      color: #cccccc;
      font-size: inherit;
      padding: 10px 0 5px 20px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; }
    #site-navigation li a:hover {
      color: #26323d;
      background: #cccccc; }
  #site-navigation .current_page_item a,
  #site-navigation .current_page_parent a,
  #site-navigation .current_page_ancestor a {
    font-weight: normal;
    color: #26323d;
    background: #cccccc; }

.custom-twitter-div {
  width: 90%;
  margin: 0 auto 20px; }

.custom-social-icons {
  width: 240px;
  margin: 0px auto 50px;
  margin-left: 3px;
  overflow: hidden; }
  .custom-social-icons a {
    float: left;
    margin: 0 10px;
    width: 30px;
    display: block; }
    .custom-social-icons a img {
      display: block;
      width: 100%; }

.menu-toggle, .menu-toggle:hover {
  top: 10px;
  background: transparent;
  position: fixed;
  right: 10px;
  height: 26px;
  z-index: 100001;
  border: 0;
  padding: 0;
  box-shadow: 0px 0px 0px; }
  .menu-toggle span, .menu-toggle:hover span {
    display: block;
    width: 30px;
    height: 3px;
    margin-bottom: 5px;
    position: relative;
    background: white; }
    .menu-toggle span .transformer, .menu-toggle:hover span .transformer {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      transition: all 300ms ease-out; }
  .menu-toggle.toggled-on, .menu-toggle:hover.toggled-on {
    background: transparent;
    box-shadow: 0px 0px 0px; }
    .menu-toggle.toggled-on span, .menu-toggle:hover.toggled-on span {
      background: transparent; }
      .menu-toggle.toggled-on span .transformer, .menu-toggle:hover.toggled-on span .transformer {
        background: white; }
        .menu-toggle.toggled-on span .transformer:first-child, .menu-toggle:hover.toggled-on span .transformer:first-child {
          -webkit-transform: rotate(45deg);
                  transform: rotate(45deg); }
        .menu-toggle.toggled-on span .transformer:last-child, .menu-toggle:hover.toggled-on span .transformer:last-child {
          -webkit-transform: rotate(-45deg);
                  transform: rotate(-45deg); }

/********************************
*
* HOMEPAGE HEADER STYLING
*
********************************/
/*#homepage-masthead{
	width:100%;
	padding:5px 0 0;
}

.header-image {
	display:block;
	margin:auto;
}

#homepage-site-navigation{
	font-family: 'Josefin Sans', sans-serif;
	margin:0;
}
	
#homepage-site-navigation ul{
	border-top:none;
	border-bottom:none;
	text-align:center;
	}

#homepage-site-navigation li a, #homepage-site-navigation li{
	display:inline-block;
	line-height:2rem;
	color:#ffffff;
	padding:0 5px;
	font-size:18px;
	font-size:1.285em;
	text-align:center;
}

#homepage-site-navigation li a:hover, #homepage-site-navigation li:hover{
	background:#ffffff;
	color:#000000;
}

#homepage-site-navigation .current_page_item a, #homepage-site-navigation .current_page_parent a, #homepage-site-navigation .current-page-ancestor a{
	background:#ffffff;
	color:#000000;
}*/
/********************************
*
* MAIN AREA STYLING
*
********************************/
#main {
  width: 67%;
  margin-top: 28px;
  float: right; }

.site-content {
  width: 100%;
  margin: 0; }
  .site-content article {
    border-bottom: none; }
  .site-content h1 {
    -webkit-hyphens: none;
        -ms-hyphens: none;
            hyphens: none; }

.entry-header {
  margin-bottom: 10px; }
  .entry-header .entry-title {
    font-size: 40px;
    line-height: 1; }

.entry-title {
  font-family: 'Quantico', sans-serif;
  text-transform: uppercase;
  border-bottom: 2px solid #cccccc;
  color: #cccccc; }
  .entry-title,
  .entry-title a {
    color: inherit;
    display: block;
    width: 100%;
    padding: 10px 0 5px; }
  .entry-title a:hover {
    color: #26323d;
    background: #cccccc; }
  .entry-title a:active {
    color: #ffffff; }

.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6,
.comment-content h1,
.comment-content h2,
.comment-content h3,
.comment-content h4,
.comment-content h5,
.comment-content h6 {
  font-family: 'Quantico', sans-serif;
  text-transform: uppercase;
  font-size: 28px;
  font-size: 2rem;
  font-weight: normal;
  margin: 0px 0px 1rem 0px;
  line-height: 1; }

.tumblr_post p,
.entry-content p,
.entry-summary p,
.comment-content p,
.mu_register p,
.widget-area .widget p {
  margin: 0px 0px 15px;
  line-height: 1.71429;
  font-size: 18px; }

.tumblr_post img {
  width: 100%;
  display: block; }

.entry-content img, .tumblr_post img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image {
  border-radius: 3px;
  box-shadow: none; }

#music li a {
  display: block;
  width: 100%;
  padding: 5px 0 5px 2px; }
  #music li a:hover {
    text-decoration: none; }

#music h2 {
  font-size: 18px; }
  #music h2 a {
    display: block;
    width: 100%; }
    #music h2 a:hover {
      text-decoration: none; }

.entry-content table, .comment-content table {
  border-bottom: none; }

.entry-content td, .comment-content td {
  border-top: none;
  padding: 6px 5px; }

#tourTable {
  width: 100%;
  color: #cccccc;
  font-size: 1rem;
  border-bottom: 1px solid #cccccc; }
  #tourTable tr {
    border-top: 1px solid #cccccc; }

#tourTable td {
  text-align: left; }

/********************************
*
* HOMEPAGE MAIN AREA STYLING
*
********************************/
#homepage-main {
  width: 100%;
  margin-top: 28px; }

.site-content {
  width: 100%;
  margin: 0; }

.site-content article {
  border-bottom: none; }

/*
.entry-title a{
	color:#ffffff;
	display:block;
	margin-bottom:2px;
	width:100%;
	}

.entry-title a:hover{
	color:#000000;
	background:#ffffff;
}

.entry-title a:active{
	color:#ffffff;
	}

.entry-content h1, .comment-content h1, .entry-content h2, .comment-content h2, .entry-content h3, .comment-content h3, .entry-content h4, .comment-content h4, .entry-content h5, .comment-content h5, .entry-content h6, .comment-content h6 {
	font-family:ImpactLabelReversed, Impact, sans-serif;
	font-size: 28px;	
	font-size: 2rem;
	font-weight:normal;
    margin: 0px 0px 1rem 0px;
    line-height: 1;
}

.entry-content p, .entry-summary p, .comment-content p, .mu_register p {
    margin: 0px 0px 15px;
    line-height: 1.71429;
}

.entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image {
    border-radius: 3px;
    box-shadow: none;
}*/
/********************************
*
* SIDEBAR STYLING
*
********************************/
#secondary {
  width: 90%;
  margin: auto;
  float: none; }

/********************************
*
* COMMENTS STYLING
*
********************************/
.comments-link {
  display: none; }

/********************************
*
* FOOTER STYLING
*
********************************/
#colophon {
  max-width: 100% !important;
  text-align: center;
  line-height: normal;
  border-top-color: #cccccc;
  color: #cccccc; }

footer.entry-meta {
  margin-top: 0;
  margin-bottom: 1rem;
  font-family: 'Quantico', sans-serif;
  text-transform: uppercase;
  color: rgba(204, 204, 204, 0.5);
  font-size: 15px; }

/********************************
*
* NAV-BELOW STYLING
*
********************************/
#nav-below {
  margin-bottom: 25px; }

#nav-below a, a.more-link {
  font-family: 'Quantico', sans-serif;
  text-transform: uppercase;
  color: #cccccc;
  text-decoration: none;
  padding: 10px 5px 5px; }

#nav-below a:hover, a.more-link:hover {
  color: #26323d;
  background: #cccccc; }

/********************************
*
* INSTAPRESS STYLING 
* 12/2017 UPDATED TO INSTAGRAM FEED PLUGIN https://wordpress.org/plugins/instagram-feed/
*
********************************/
.sbi_header_text {
  color: #cccccc; }

#sb_instagram #sbi_load a {
  font-family: 'Quantico', sans-serif;
  text-transform: uppercase; }

#sb_instagram #sbi_load .sbi_load_btn {
  background: transparent;
  color: #cccccc;
  font-size: 17px;
  border-radius: 0px; }
  #sb_instagram #sbi_load .sbi_load_btn:hover {
    color: #26323d;
    background: #cccccc; }

#sb_instagram #sbi_load .sbi_follow_btn {
  display: none; }
  #sb_instagram #sbi_load .sbi_follow_btn a {
    background: #cccccc; }

/********************************
*
* YOUTUBE GALLERY STYLING
*
********************************/
ul.ytchagallery li {
  width: 100%;
  float: none; }

.ytcshort a {
  line-height: 1rem;
  display: block;
  padding: 3px;
  font-size: 17px;
  font-size: 1.2rem;
  color: #ffffff;
  text-decoration: none; }

.ytcshort a:hover {
  background: #ffffff;
  color: #000000; }

#youtubeSmall {
  display: none; }

/********************************
*
* ASSETS PAGE
*
********************************/
.assets-grid {
  margin: 50px 0 0; }
  .assets-grid.inactive-assets {
    justify-content: flex-start;
    padding-top: 10px;
    width: calc(100% + 20px);
    margin-left: -10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 90px; }
    .assets-grid.inactive-assets header {
      height: 1px;
      background: #404040;
      width: 100%;
      margin-bottom: 70px;
      position: relative; }
      .assets-grid.inactive-assets header p {
        font-family: 'Quantico', sans-serif;
        text-transform: uppercase;
        position: absolute;
        left: 50%;
        top: 50%;
        color: #26323d;
        background: #cccccc;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        padding: 8px 10px 5px 10px; }

.asset-post {
  margin-bottom: 50px; }
  .asset-post h2 {
    font-family: 'Quantico', sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 15px; }
  .asset-post img,
  .asset-post iframe {
    display: block;
    width: 100%; }
  .asset-post.inactive {
    width: 33.3%;
    padding: 0 10px 0;
    box-sizing: border-box; }
    .asset-post.inactive h2 {
      font-size: 14px;
      margin-top: 10px; }
    .asset-post.inactive .entry-content {
      width: 100%;
      padding: 0 10px 100%;
      height: 0;
      position: relative;
      background: #404040;
      box-sizing: border-box; }
      .asset-post.inactive .entry-content p {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        width: 100%;
        text-align: center; }

/********************************
*
* CUSTOM STYLING FOR SMALL SCREENS/MOBILE DEVICES
*
********************************/
@media screen and (max-width: 600px) {
  .custom-twitter-div {
    display: none; }
  .custom-social-icons {
    margin-left: auto; }
    .custom-social-icons a {
      width: 40px; }
  #masthead {
    width: 100%;
    float: none; }
  #main {
    width: 95%;
    margin: auto;
    float: none; }
  .custom-twitter-div {
    width: 50%;
    margin: 0 auto 20px; }
  #youtubeSmall {
    display: visible; }
  #youtubeLarge {
    display: none; }
  /********************************
	*
	* MOBILE NAV
	*
	********************************/
  .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    background: #333;
    z-index: 100000;
    overflow: scroll;
    overflow-x: hidden; }
    .main-navigation ul.nav-menu a, .main-navigation div.nav-menu > ul a {
      text-decoration: none; } }