/**
* miscellaneous adjustments to add to bootstrap and perma themes for the panels pages used on this site
*/

.front .panel-pane {
  display: block;
}

/* added this because using semantic panels to strip out the panel-pane class so that I can get the views
full-width caused the separate views to run into each other.
*/
.panel-divider {
    display:block;
    clear: both;
    min-height: 1em;
}

img {
    width: 100%;
}

/**
* Note bootstrap sets font to 14px but that doesn't work well with PT Sans
*/
body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
}

h1, h2, h3, h4 {
font-family: "Raleway";
  font-weight: 700;
  color: #656565;
}

h5 {
  font-family: "Raleway";
  font-weight: 200;
  color: #656565;
}
.extended-article {
    text-align: center;
}


.views-field-field-article-summary {
  text-align: left;
  padding: 1em 1em 0 1em;
}

@media only screen and (max-width:760px) {
    .views-field-field-article-summary {
      width: 60%;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 4em;
    }
}


.extended-article-title{
  max-width: 70%;
  margin: 0 auto;
  margin-bottom: 1em;
}

.extended-article-body {
  max-width: 70%;
  margin: 0 auto;
  line-height: 1.5em;
  font-size: 1.2em;
  color: #494a4a;
}

.extended-article-body p {
  color: #505050;
}

.extended-article-body img {
  text-align: center;
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.extended-article-body .lead {
  line-height: 3.5rem;
  font-size: 1.5em;
  font-weight: 400;
  color: #707070;
  font-style: oblique;
}


/**
* homepage stuff
*/
.home-find-more-image img{
  max-width: 120px;
  margin: 0 auto;
}
.home-joinlearn-image img {
  max-width: 180px;
  margin: 0 auto;
}
.home-howitworks-image img {
  max-width: 180px;
  margin: 0 auto;
}
/*
Banner position on homepage
*/
/* class added in panel using semantic panel system */
.homepage-banner-node{
  margin-bottom: 5em;
}

.how-it-works-title {
  min-height: 4em;
  padding: 0 30px;
}

h2.join-learn-connect-title {
  margin-bottom: 0;
}

/* class added by DS for custom view mode for displaying node in a panel on homepage */
.banner-link-text {
 position: absolute;
 bottom: 0;
 /*left: 0;*/
 border-radius: 6px;
 font-size: 2.5em;
 padding: 20px;
 background: rgba(34, 91, 44, .5);
}




/* class needed for the banner absolute setting to work */
div.view-mode-banner_homepage {
  position: relative;
}

.perma-homepage-message-title {
    color: #262626;
    font-size: 2.5em;
}

/* Tablet (portrait and landscape) ----------- */
@media only screen and (max-width:720px) {
    .banner-link-text {
        padding-right: 20%;
        font-size: 2em;
    }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width:500px) {
  .banner-link-text {
    padding-right: 10%;
    font-size: 1.5em;
  }
  .col-xs-12.col-sm-4.extended-article {
    margin-bottom: 2em;
  }
  .perma-homepage-message-title {
    font-size: 2em;
  }

}

/* Homepage message pane. This is the text area, custom pane with styles injected using semantic panels */
.perma-homepage-message {
  background-color: #97BF45;
  border-color: #fff;
  border-radius: 10px;
  text-align: center;
  color: #262626;
  padding: 2em 15%;
  margin: 2em 0;
}

/* Smartphones (portrait and landscape) */
@media only screen and (max-width:560px) {
    .perma-homepage-message {
        padding: 2em;
        margin: 1em 0;
    }
}


.perma-homepage-message-text {
  text-align: left;
}


/* Homepage how it works pane */
.homepage-how h2, .homepage-findmore h2 {
    text-align: center;
}

.homepage-findmore-content {
  background-color: #86a600;
}

.homepage-findmore-link {
    min-height: 4em;
}

/* styles to create a five column grid for the findmore pane
See http://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap/22799354#22799354
*/
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }

}

@media (max-width: 560px) {
    .logo > img { min-width: 100%; max-height:auto;}
}



@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

.col-md-5ths {
  padding-top: 3em;
  padding-bottom: 3em;
}

/* style for homepage announcement boxes*/
.homepage-announce {
    background-color: #f7f1ea;
    border-color: #FFF;
    border-width: 1em;
    border-radius: 30px;
    border-style: solid;
    padding: 1em;
}
.lead {
    width: 100%;
    text-align: center;
}

.lead >a {
    margin:10px;
    display:flex;
}
.homepage-announce ul {
  list-style: none;
  margin-left: -40px;
}
.homepage-announce ul li {
  color: #225b2c;
  padding-bottom: .5em;
}
.homepage-announce p {
    color: #225b2c;
}

/* Override standard banner size set in style.css as now using a wider logo. Note this also required changed from 3/9 to 4/8 classes in page.tpl */
.navbar .logo {max-width:100%;}



/* Rectify problem that #site-banner > img set to 15% by default */
#site-banner > a > img.site-banner-linkimages, img.site-banner-linkimages {
    width: 10%;
    height:10%;
    float: right;
}

/* styles for landing pages */
#section-landing {
  padding-left: 2em;
  padding-right: 2em;
}
/* Needed because on these pages there are rows with bootstrap sm classes that add this amount of padding */
#landing-page-intro {
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 5em;
}
.landing-page-item {
  min-height: 240px;
  margin-bottom: 5em;
}
.landing-page-image > a > img{
  max-width: 180px;
  height: auto;
}
/* Ensure panel pane uses full width rather than needing text to force it to do so */
.landing-page-listing {
  min-width: 100%;
}

/* custom typography styles */
.blockquote {
  margin: 2em 0;
  padding: 2em;
  background-color: rgba(128, 152, 3,.3);
}

.pullquote {
  float:right;
  font-style : italic;
  margin: 1em 0em 1em 3em;
  display: inline-block;
  padding: 2em;
  color: #999;
}

div.centre-block {
  text-align: center;
  border-style: solid;
  border-width: thin;
  border-color: #d3d3d3;
  padding: 2em;
  margin: 2em 0;
}

/* New CSS for rebrand 2018 */

#block-block-51 {
    display: flow-root;
    position: absolute;
    right: 20px;
    top: 20px;
}

div.newTopNav {
        margin: 20px;
        margin-bottom: 5px;
}

.newTopNav a {
    padding: 5px;
}

ul.navbar-nav {
    max-width: 100%;
    
    z-index: 500;
}

.newTopSiteLinks a {
    max-width: 195px;
    float: right;
    position: relative;
    
}
div.newTopSiteLinks {
   max-width:400px;
}

.btn-learn {
    background: #C0A88C;
    border-color: #C0A88C;
}

.btn-join {
    background: #46818F;
    border-color: #46818F;
}

.btn-donate {
    background: #AA4E66;
    border-color: #AA4E66;
}

.btn-login {
    background: #99BC44;
    border-color: #99BC44;
}

.btn-learn:hover {
    background: #a4825b;
    border-color: #a4825b;
}

.btn-join:hover {
    background: #325c67;
    border-color: #325c67;
}

.btn-donate:hover {
    background: #7a384a;
    border-color: #7a384a;
}

.btn-login:hover {
    background: #6a832f;
    border-color: #6a832f;
}