/*
  Theme Name: The Travel Blog
  Theme URI:
  Author: Jeremy Dorlon
  Description: Wordpress theme for travel blogs
  Version: 1.0
  Licence: GNU General Public Licence or Later
  Tags: HTML5, CSS3, Sidebar, Travel, Blog
*/

/* CSS Document */
/********************************************
  General Sytle Globals
/*******************************************/
body {
  background-color: #f6f6f6
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  margin-bottom: .25rem;
}

a {
  color: #0070a3;
}

a:active, a:focus, a:hover {
  color: #004d70;
  text-decoration: underline;
}

.alignleft {
  float:left;
  margin-right: .3rem;
}

.alignright {
  float:right;
  margin-left: .3rem;
}

section.container {
  padding: 3rem .5rem;
}

/********************************************
  Header - Site Navigation
/*******************************************/
nav#main-navigation {
  background-color: #008fd1;

}

nav#main-navigation button.navbar-toggler {
  border: 1px solid #fff;
  border: 1px solid rgba(255,255,255,.5);
}

nav#main-navigation ul {
  margin-top: .25rem;

}

nav#main-navigation > ul > li {
  margin-bottom: .1rem;

}
nav#main-navigation div#ttb-mainNav > ul > li > a {
  padding: .75rem;
  color:#fff;
}

nav#main-navigation div#ttb-mainNav > ul > li > a {
  display: block;
  font-size: 1.25rem;
  text-decoration: none;
  text-transform: uppercase;
}

nav#main-navigation div#ttb-mainNav ul li a:hover, 
nav#main-navigation div#ttb-mainNav ul li a:active {
  color: #eca300;

}

nav#main-navigation div#ttb-mainNav ul li.active {
  border-bottom: 3px solid #fff;

}


@media (min-width: 992px) and (max-width: 1199.98px) {
  nav#main-navigation #ttb-mainNav {
    display: block;

  }
}

@media (max-width: 992px) {
  nav#main-navigation ul li,
  nav#main-navigation ul li a {
    width: 100%;

  }
}

@media (min-width: 992px) {
  nav#main-navigation div#ttb-mainNav ul li {
    margin: .25rem inherit;

  }
  nav#main-navigation div#ttb-mainNav > ul > li > a {
    font-size: 1rem;
    padding: 1.5rem .5rem;

  }
}

@media (max-width: 575.98px) { 
  /* Small Mobile Devices Break Point */
  nav#main-navigation button.navbar-toggler {
    width: 100%;
  }
}

/********************************************
  Header - Site / Feature Image
/*******************************************/
.site-header {
  background-repeat: no-repeat;
  background-position: center center;
  height: 500px;
  padding-top: 1rem;

}

.site-header-rand {
  background-repeat: no-repeat;
  background-position: center center;
  height: 300px;
  padding-top: 1rem;
}

@media (min-width: 992px) {
  .site-header {
    background-size: cover;
    background-attachment: fixed;

  }

  .home .site-header {
    height: 800px;

  }

  .home .site-header-rand {
    height: 350px;
  }
}

div.page-title {
  line-height: 1.3;
  padding: .1rem 0;
  border-left: 1rem solid #008fd1;
  margin: 2rem auto;

}

div.page-title h1, div.page-title p.h1 {
  background-color: #008fd1;
  padding: .1rem 0 .15rem;
  color: #fff;
  display: inline;
  margin: 0;
  font-size: 3rem;

}

div.page-title h1 span, div.page-title p.h1 span {
  /*Browser work around - Rendering Issue on some mobile devieces */
  background-color: #008fd1;
  /*End of Browser work around*/
  left: -.5rem;
  position: relative;
  
}

@media (min-width: 992px) {
  .home div.page-title {
    margin-top: 35%;
  }

  .home .site-header-rand div.page-title {
    margin-top: 15%;
  }
}

/********************************************
  front-page.php - Latest News / Posts Grid
/*******************************************/
section.content .news-grid {
  margin-bottom: 1rem;

}

div.news-grid-content h3, div.news-grid-content h3 a {
  color: #000;
  font-family: 'Libre Baskersville', serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5rem;
  margin: 0;
  margin-bottom: .3rem;
  text-align: center;
}

div.news-grid-content p {
  text-transform: uppercase;
  font-weight: bold;
}

div.news-grid-content .btn.btn-success {
  background-color: #008fd1;
  color: #fff;
  border: 2px solid #008fd1;
  text-transform: uppercase;
  font-weight: bold;
  padding: .3rem 1.5rem;
  margin-top: .8rem;
  transition: all .3s ease;
}

div.news-grid-content .btn.btn-success:hover {
  background-color: #0070a3;
  border-color: #008fd1;
}


div.news-grid-content .btn.btn-success:active,
div.news-grid-content .btn.btn-success.active,
div.news-grid-content .btn.btn-success:focus,
div.news-grid-content .btn.btn-success.focus {
  background-color: #004d70;
  border-color: #008fd1;
  -moz-box-shadow: 0 0 .75rem #008fd1 !important;
  -webkit-box-shadow: 0 0 .75rem #008fd1 !important;
  box-shadow: 0 0 .75rem #008fd1 !important;
}

/********************************************
  front-page.php - Categories
/*******************************************/
section.container.categories {
  padding-top: 0;
  padding-bottom: 2rem;
}

section.categories div.category {
  background-color: #fff;
  margin-bottom: 1rem;
  text-align: center;
}

section.categories a {
  color: #000;
  font-family: 'Libre Baskersville', serif;
  font-weight: 700;
  margin-bottom: 1rem;
  text-decoration: none;
  text-transform: uppercase;

}

section.categories a:active,
section.categories a:focus,
section.categories a:hover {
  color: #343a40;
}

section.categories div.category i, 
section.categories div.category span {
  display: block;
  margin-top: 1.2rem;
  margin-bottom: .75rem;
  
}

section.categories .card {
  padding: 1px;
  
}

section.categories .card:hover {
  border: 2px solid #343a40;
  border: 2px solid rgba(0,0,0,.125);
  padding: 0;

}

/********************************************
  Page.php & Page-sidebar.php - Site Content
/*******************************************/
.page-template-default .content,
.page-template-page-sidebar .content-page {
  text-align: justify;

}

/********************************************
  Page with Sidebar - Site Content
/*******************************************/
.page-template-page-sidebar section.container {
  padding-top: 0;
  padding-bottom: 0;

}

.page-template-page-sidebar section.content div.content-page,
.page-template-page-sidebar section.content div.side-bar {
  padding: 3rem 2.5rem;

}

.page-template-page-sidebar section.content div.side-bar {
  background-color: #e6e6e6;
  box-shadow: 300px 0 0 0 #e6e6e6;
  background-color: rgba(200,200,200,.5);
  box-shadow: 300px 0 0 0 rgba(200,200,200,.5);
  
}

@media (min-width: 992px) {
  .page-template-page-sidebar section.content div.content-page {
    padding-left: 1rem;

  }
}

/********************************************
  Page with Sidebar - Sidebar Content
/*******************************************/
aside.sidebar-widget div.widget {
  margin-bottom: 1.5rem;
}
aside.sidebar-widget li {
  margin-bottom: .5rem;
}

/********************************************
  Footer - Footer Content 
/*******************************************/
footer {
  background-color: #008fd1;
  bottom: 0;
  color: #fff;
  padding: 1rem 0 0;
  /*position: relative;
  text-align: justify;*/

}

footer a, footer a:hover {
  color:#fff;

}

footer a:active,
footer a:focus,
footer a:hover {
  text-decoration: underline;

}

footer .widget_recent_entries li {
  margin-bottom: .5rem;

}

footer .site-info {
  background-color: #004d70;
  font-family: 'Raleway', sans-serif;
  margin: 1rem 0 0;
  padding: .5rem 0 1rem;
  text-transform: uppercase;

}

/********************************************
  Social Menu (Used in footer.php)
/*******************************************/
#menu_social li {
  position: relative;

}

#menu_social li a.nav-link {
  padding: 0 .25rem 0 0;
  transition: all .2s ease;
}

/* Default Menu with Outbound Icon*/
#menu_social li a:before {
  content: '\f08e';
  display: inline-block;
  font-family: 'fontAwesome';
  font-size: 2rem;
  padding: 0 .8rem 0 0;
  vertical-align: top;
  -webkit-font-smoothing: antialiased;
  
}

#menu_social li a:active,
#menu_social li a:focus,
#menu_social li a:hover {
  color: #6c757d;
  color: rgba(45, 45, 45, .5);
}

/* Facebook Icon */
#menu_social li a[href*='facebook.com']::before {
  content: '\f082';

}

/* Google Plus Icon */
#menu_social li a[href*='plus.google.com']::before {
  content: '\f0d4';

}

/* Linked In Icon */
#menu_social li a[href*='linkedin.com']::before {
  content: '\f08c';

}

/* Instagram Icon */
#menu_social li a[href*='instagram.com']::before {
  content: '\f16d';

}

/* Snapchat Icon */
#menu_social li a[href*='snapchat.com']::before {
  content: '\f2ad';

}

/* Twitch Icon */
#menu_social li a[href*='twitch.com']::before {
  content: '\f1e8';

}

/* Twitter Icon */
#menu_social li a[href*='twitter.com']::before {
  content: '\f081';

}

/* Vimeo Icon */
#menu_social li a[href*='vimeo.com']::before {
  content: '\f194';

}

/* Yelp Icon */
#menu_social li a[href*='yelp.com']::before {
  content: '\f1e9';

}

/* YouTube Icon */
#menu_social li a[href*='youtube.com']::before {
  content: '\f167';

}


/********************************************
  Globals - Colors
/*******************************************/
.ttb_text-blue { color:#0070a3 }
.ttb_text-magenta { color:#db008d }
.ttb_text-purple { color:#9800d1 }
.ttb_text-orange { color:#eca300 }
.ttb_text-drk_orange { color:#a57204 }
.ttb_text-drk_purple { color:#610283 }
.ttb_text-drk_magenta { color:#860459 }
.ttb_text-drk_blue { color:#024f72 }