@charset "UTF-8";
/************************************************

Stylesheet: Main Stylesheet

*************************************************/
/*********************
GENERAL STYLES
*********************/

.valign-center {
    position: relative;
    top: 50%;
  }

.valign-center>.columns {
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -o-transform:translateY(-50%);
      -ms-transform:translateY(-50%);
  }

/*********************
LINK STYLES
*********************/
a:link, a:visited:link {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3); }

/*********************
H1, H2, H3, H4, H5 P STYLES
*********************/
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a {
  text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
}

.title-border {
    border-bottom: 1px solid #e2e2e2;
    margin-bottom: 1.5rem;
}

h3 {
  padding-top: 1.5rem;  
}

body {
    font-family: 'Rubik', sans-serif;
    color: #212121;

}

.frontblock h4 {
  color: white;
}

.frontblock h4 small {
  color: rgba(255, 255, 255, 0.7);
}

.frontblock-text {
  position: absolute;
  padding-left: 25px; 
  margin-top: -120px;
  pointer-events: none;
}

/**********************
TOOLBAR STYLES
**********************/
#wpadminbar {
    background: #DC241F;
    position: absolute;
}

/*********************
HEADER STYLES
*********************/
.header ul.off-canvas-list li {
  list-style: none; }

/*********************
NAVIGATION STYLES
*********************/

.top-bar .title-area {
  z-index: 1; }

.top-bar, .top-bar ul {
  background-color: #DC241F;
}

.top-bar {
  position: relative;
  z-index: 999;
  box-shadow: 0px 1px 11px 0px rgba(0,0,0,0.62);
}

.top-bar p {
  color: white;
  margin-bottom: 0px;
  padding-top: 10px;
}

.top-bar a {
  color: white;
  margin-bottom: 0px;
  padding-top: 10px;  
}

.top-bar a:hover {
  color: white;
  margin-bottom: 0px;
  padding-top: 10px;  
}

.top-bar a:visited {
  color: white;
  margin-bottom: 0px;
  padding-top: 10px;  
}

.top-bar .menu-icon{
   margin-top: 10px;
}

.article-header>.breadcrumbs a {
    color: #8d959a;
}

.crumbcontainer {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
    height: 33px;
    overflow: hidden;
}

a.flatbutton {
    padding: 8px;
}

#topnav-menu {
    padding-top: 20px;
    padding-bottom: 20px;
}

.title-bar-title {
    color: white;
    margin-top: 10px;
    margin-left: 10px;
    cursor: pointer;
}

/* Prevent Nav FOUC */
.no-js .top-bar>.top-bar-left{
  display: none;
}

.no-js ul{
  display: none;
}

.off-canvas-list ul {
  margin-left: 0; }
  .off-canvas-list ul li a {
    border-bottom: 0px; }
  .off-canvas-list ul .dropdown {
    margin-left: 20px; }

/*********************
POSTS & CONTENT STYLES
*********************/

/*A banner*/

.banner-image {
/*   background-image: url(http://sociolearner.com/dev.sociolearner.com/wp-content/uploads/images/module-1-banner-page.jpg); */
  background-color: #5a8cb7;
  position: relative;
  width: 100%;
  height: 0px;
  padding-bottom: 30%;
  overflow: hidden;
  background-size: 100%;
  background-position: 50% 50%;
  opacity: 0.9;
  z-index: -1;
}

#content #inner-content {
  padding: 1rem 0rem 5rem;
  min-height: 100vh }

.page-title .vcard {
  border: 0px;
  padding: 0px; }

.byline {
  color: #999; }

.entry-content {
    padding-bottom: 30px; }

.entry-content img {
  max-width: 100%;
  height: auto; }

.entry-content .alignleft, .entry-content img.alignleft {
  margin-right: 1.5em;
  display: inline;
  float: left; }

.entry-content .alignright, .entry-content img.alignright {
  margin-left: 1.5em;
  display: inline;
  float: right; }

.entry-content .aligncenter, .entry-content img.aligncenter {
  margin-right: auto;
  margin-left: auto;
  display: block;
  clear: both; }

.entry-content video, .entry-content object {
  max-width: 100%;
  height: auto; }

.wp-video {
    padding-bottom: 30px;
}

.entry-content pre {
  background: #eee;
  border: 1px solid #cecece;
  padding: 10px; }

.wp-caption {
  max-width: 100%;
  background: #eee;
  padding: 5px; }
  .wp-caption img {
    max-width: 100%;
    margin-bottom: 0;
    width: 100%; }
  .wp-caption p.wp-caption-text {
    font-size: 0.85em;
    margin: 4px 0 7px;
    text-align: center; }

.post-password-form input[type="submit"] {
  display: inline-block;
  text-align: center;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  transition: all 0.25s ease-out;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 0.85em 1em;
  margin: 0 1rem 1rem 0;
  font-size: 0.9rem;
  background: #2199e8;
  color: #fff; }
  [data-whatinput='mouse'] .post-password-form input[type="submit"] {
    outline: 0; }
  .post-password-form input[type="submit"]:hover, .post-password-form input[type="submit"]:focus {
    background: #1583cc;
    color: #fff; }

/*For wide divs:*/

.wide-div {
    width: 90vw;
    margin-left: calc(-45vw + 50%);
}

/*********************
IMAGE GALLERY STYLES
*********************/

.lift10 {
  transition: box-shadow 200ms ease-in-out;
}

.lift10:hover {
  box-shadow: 0px 4px 30px 0px rgba(128,128,128,1);
}

/*********************
PAGE NAVI STYLES
*********************/
.page-navigation {
  margin-top: 1rem; }

/* Highlight current page in the nav. Only children, not descendants */
.current_page_item>a{
  font-weight: 700;
}

.current_page_parent>a{
  font-weight: 700;
}

.current_page_ancestor>a{
  font-weight: 700;
}

/* Left-align top-level menu items */
.menu>li>a{
  padding-left: 0px;
  padding-right: 0px;
}

/* Indent submenu items */
.is-accordion-submenu-item {
  padding-left: 1rem;
}

/* Remove the dropdown arrow */
.is-accordion-submenu-parent>a:after {
  display: none;
}

/*Style the accordions a bit*/
.accordion {
  padding-bottom: 30px;
  margin: 0rem -0.9375rem;
}

.accordion-title {
  font-size: inherit;
}

/*********************
COMMENT STYLES
*********************/
#comments .commentlist {
  margin-left: 0px; }

#respond ul {
  margin-left: 0px; }

.commentlist li {
  position: relative;
  clear: both;
  overflow: hidden;
  list-style-type: none;
  margin-bottom: 1.5em;
  padding: 0.7335em 10px; }
  .commentlist li:last-child {
    margin-bottom: 0; }
  .commentlist li ul.children {
    margin: 0; }

.commentlist li[class*=depth-] {
  margin-top: 1.1em; }

.commentlist li.depth-1 {
  margin-left: 0;
  margin-top: 0; }

.commentlist li:not(.depth-1) {
  margin-left: 10px;
  margin-top: 0;
  padding-bottom: 0; }

.commentlist .vcard {
  margin-left: 50px; }
  .commentlist .vcard cite.fn {
    font-weight: 700;
    font-style: normal; }
  .commentlist .vcard time {
    float: right; }
    .commentlist .vcard time a {
      color: #999;
      text-decoration: none; }
      .commentlist .vcard time a:hover {
        text-decoration: underline; }
  .commentlist .vcard img.avatar {
    position: absolute;
    left: 10px;
    padding: 2px;
    border: 1px solid #cecece;
    background: #fff; }

.commentlist .comment_content p {
  margin: 0.7335em 0 1.5em;
  font-size: 1em;
  line-height: 1.5em; }

.commentlist .comment-reply-link {
  float: right; }

/*********************
COMMENT FORM STYLES
*********************/
.respond-form {
  margin: 1.5em 10px;
  padding-bottom: 2.2em; }
  .respond-form form {
    margin: 0.75em 0; }
    .respond-form form li {
      list-style-type: none;
      clear: both;
      margin-bottom: 0.7335em; }
      .respond-form form li label,
      .respond-form form li small {
        display: none; }
    .respond-form form input[type=text],
    .respond-form form input[type=email],
    .respond-form form input[type=url],
    .respond-form form textarea {
      padding: 3px 6px;
      background: #efefef;
      border: 2px solid #cecece;
      line-height: 1.5em; }
      .respond-form form input[type=text]:focus,
      .respond-form form input[type=email]:focus,
      .respond-form form input[type=url]:focus,
      .respond-form form textarea:focus {
        background: #fff; }
      .respond-form form input[type=text]:invalid,
      .respond-form form input[type=email]:invalid,
      .respond-form form input[type=url]:invalid,
      .respond-form form textarea:invalid {
        outline: none;
        border-color: #fbc2c4;
        background-color: #f6e7eb;
        -ms-box-shadow: none;
        box-shadow: none; }
    .respond-form form input[type=text],
    .respond-form form input[type=email],
    .respond-form form input[type=url] {
      max-width: 400px;
      min-width: 250px; }
    .respond-form form textarea {
      resize: none;
      width: 97.3%;
      height: 150px; }

#comment-form-title {
  margin: 0 0 1.1em; }

#allowed_tags {
  margin: 1.5em 10px 0.7335em 0; }

.nocomments {
  margin: 0 20px 1.1em; }


/*********************
QUESTIONNAIRE STYLES
*********************/

label {
    font-size: inherit;
    padding-top: 1rem;
}

label label {
    padding-top: 0rem;
}

.wpcf7-number {
    width: 50px;
}

textarea[rows] {
    height: 150px;
}

span.wpcf7-list-item {
    margin-left: 2em;
}

/*********************
SIDEBARS & ASIDES
*********************/
.widget ul {
  margin: 0; }

.widget ul li {
    list-style: none; }

/* Slinky search bar */

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.search-form {
  /*position: absolute;*/
  right: 200px;
  top: 200px;
}

.search-field {
  background-color: transparent;
  background-image: url(http://www.dev.sociolearner.com/wp-content/themes/JointsWP-CSS-master/assets/images/search-icon.png);
  background-position: 5px center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  border: none;
  cursor: pointer;
  height: 37px;
  margin: 3px 0;
  padding: 0 0 0 34px;
  position: relative;
  -webkit-transition: width 400ms ease, background 400ms ease;
  transition:         width 400ms ease, background 400ms ease;
  width: 0;
  box-shadow: none;
}

.search-field:focus {
  background-color: #fff;
  /*border: 2px solid #c3c0ab;*/
  cursor: text;
  outline: 0;
  width: 230px;
}
.search-form
.search-submit { 
display:none;
}



/*********************
FOOTER STYLES
*********************/
.footer {
  clear: both;
  margin-top: 1em; 
}

.copyright {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

/*********************
FOUNDATION STYLES
*********************/

/*********************
PLUGIN STYLES
*********************/
.gform_body ul {
  list-style: none outside none;
  margin: 0; }

/******************************************************************

Stylesheet: Retina Screens & Devices Stylesheet

When handling retina screens you need to make adjustments, especially
if you're not using font icons. Here you can add them in one neat
place.

******************************************************************/
/******************************************************************

Stylesheet: Print Stylesheet

This is the print stylesheet. There's probably not a lot
of reasons to edit this stylesheet. 

Remember to add things that won't make sense to print at 
the bottom. Things like nav, ads, and forms shouldbe set 
to display none.
******************************************************************/
@media print {
  * {
    background: transparent !important;
    color: black !important;
    text-shadow: none !important;
    -webkit-filter: none !important;
    filter: none !important;
    -ms-filter: none !important; }
  a, a:visited {
    color: #444 !important;
    text-decoration: underline; }
    a:after, a:visited:after {
      content: " (" attr(href) ")"; }
    a abbr[title]:after, a:visited abbr[title]:after {
      content: " (" attr(title) ")"; }
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: ""; }
  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }
  thead {
    display: table-header-group; }
  tr, img {
    page-break-inside: avoid; }
  img {
    max-width: 100% !important; }
  @page {
    margin: 0.5cm; }
  p, h2, h3 {
    orphans: 3;
    widows: 3; }
  h2,
  h3 {
    page-break-after: avoid; }
  .sidebar,
  .page-navigation,
  .wp-prev-next,
  .respond-form,
  nav {
    display: none; } }