/*
Theme Name: VillageReach
Theme URI: http://www.drivendevelopment.com/
Description: Custom WordPress theme for VillageReach.
Author: <a href="http://www.drivendevelopment.com/" target="_blank">Driven Development</a> on behalf of <a href="http://www.the-medium.net/" target="_blank">The Medium</a>
Version: 1.0
*/

@import url(default.css);
@import url(css/style.css);
/*@import url(less/style.less);*/

#header .links {top: 68px; right: 200px;}
#header .upper {position: absolute; top: 10px; right: 20px; z-index: 10000;}
#header .upper .donate {display: inline-block; background: #a35228; padding: 7px 20px; font-size: 13px; line-height: 17px; text-transform: uppercase; color: #f6ebd4; font-weight: bold; vertical-align: middle;}
#header .upper .donate:hover {background: #824225;}
#header .upper .lang {display: inline-block; margin: 0 5px; position: relative; vertical-align: middle; transition: background-color 0.5s ease;}
#header .upper .lang .toggle {display: inline-block; padding: 7px 20px; width: 130px; background: #a49482; color: #f6ebd4; text-transform: uppercase; font-size: 13px; line-height: 17px; position: relative; font-weight: bold; transition: 0.5s ease;}
#header .upper .lang .toggle:after {position: absolute; font-family: 'FontAwesome'; content: "\f107"; top: 8px; right: 10px; font-weight: normal; font-size: 18px;}
#header .upper .lang ul {position: absolute; left: 0; width: 130px; background: #726b3d; margin: 0; padding: 7px 0; list-style-type: none; font-weight: 300; font-size: 15px; line-height: 17px; visibility: hidden; opacity: 0; transition: opacity 0.5s ease;}
#header .upper .lang ul a {display: block; padding: 7px 20px; color: #dcc7b3;}
#header .upper .lang ul a:hover {color: #fff;}
#header .upper .lang.active {background: #726b3d;}
#header .upper .lang.active ul {visibility: visible; opacity: 1;}
#header .upper .lang.active .toggle {background: #726b3d;}
#header .upper .search {display: inline-block; width: 195px; position: relative; top: auto; right: auto; vertical-align: middle;}
#header .links li {margin: 0 0 0 25px;}

#menu .menu li.heading {border-bottom: solid 1px #8c845d; font-weight: 600; padding-left: 0; margin-bottom: 10px;}
#menu .menu li.heading:before {display: none;}

#atstbx a svg {display: none;}
#atstbx .at_flat_counter {display: none;}

#google_translate_element img {display: inline;}
#google_translate_element > div > div {display: inline-block;}
#google_translate_element select {margin: 0 10px 0 0;}

#global-banner form label {display: block; margin: 0 0 5px 0;}

.emily_video {
  float: right;
  padding-left: 15px;
  padding-bottom: 20px;
  width: 40%;
}

.ctct-embed-signup button {font-family: 'Source Sans Pro', Arial, Verdana, Sans-serif; display: inline-block; font-size: 18px; line-height: 18px; padding: 8px 40px 8px 20px; font-weight: 300; background: none; text-transform: uppercase; color: #f7f0e2; border: solid 1px #f7f0e2; border-radius: 0; cursor: pointer; letter-spacing: 1px; position: relative;}
.ctct-embed-signup button:after {content: "\203A"; right: 16px; color: #f7f0e2; font-size: 30px; transition: 0.25s ease; position: absolute; top: 7px; line-height: 18px;}
.ctct-embed-signup button:hover:after {right: 11px;}
.ctct-embed-signup [data-id="Email Address:label"] {display: block; margin: 0 0 5px 0;}
.ctct-embed-signup #success_message p {display: block !important;}

.ctct-form label {display: block; margin: 0 0 5px 0;}
.ctct-form label abbr {color: #fff;}
.ctct-form input[type="submit"] {font-family: 'Source Sans Pro', Arial, Verdana, Sans-serif; display: inline-block; font-size: 18px; line-height: 18px; padding: 8px 20px; font-weight: 300; background: none; text-transform: uppercase; color: #f7f0e2; border: solid 1px #f7f0e2; border-radius: 0; cursor: pointer; letter-spacing: 1px; position: relative;}
.ctct-form input[type="email"]:required:valid {background-position: calc(100% - 8px) 50%;}
.ctct-form [data-id="Email Address:label"] {display: block; margin: 0 0 5px 0;}
.ctct-form .ctct-disclosure {display: none;}
.ctct-form .g-recaptcha {margin: 0 0 10px 0;}
.ctct-form-wrapper .success {background: #725d49; color: #fff; border: none;}

.profiles h1 {margin: 0 0 30px 0; color: #958d55; font-size: 40px; line-height: 44px; font-weight: 300;}

.featured-profiles h1 {margin: 0 0 30px 0; font-size: 40px; line-height: 44px; color: #958d55;}
.featured-profiles .items {margin: 0 -25px;}
.featured-profiles .items > div {float: left; width: 25%; padding: 0 25px 40px 25px;}
.featured-profiles .thumb img {display: block; margin: 0 0 30px 0;}
.featured-profiles .name {font-size: 21px; line-height: 21px; text-transform: uppercase; color: #a2522e; font-weight: bold;}
.featured-profiles .title {font-size: 16px; line-height: 21px; text-transform: uppercase; color: #a2522e; font-weight: 500;}
.featured-profiles .summary {margin: 20px 0;}

.profiles.profiles-grid {margin: 0 -25px;}
.profiles.profiles-grid h1 {margin-left: 25px;}
.profiles.profiles-grid h2 {font-size: 21px; line-height: 25px;}
.profiles.profiles-grid .title {font-size: 16px; line-height: 21px; text-transform: uppercase; color: #a2522e; font-weight: 500;}
.profiles.profiles-grid .thumb {margin: 0 0 20px 0;}
.profiles.profiles-grid .profile {display: inline-block; vertical-align: top; width: 25%; padding: 0 25px 30px 25px; border-bottom: none;}
.profiles.profiles-grid .bio {margin-top: 20px;}

.callout {margin: 0 0 20px 0; background: #a25231; padding: 20px; color: #fef6e6; font-weight: 300;}
.callout .icon img {display: block; margin: 0 auto 20px auto; max-width: 300px;}
.callout .photo img {display: block; margin: 0 auto 10px auto; width: 100%; height: auto;}
.callout h3 {color: #fef6e6; font-size: 28px; line-height: 30px; text-align: center;}

#profile .title {font-size: 16px; line-height: 21px; text-transform: uppercase; color: #a2522e; font-weight: 500; margin: 0 0 20px 0;}
#profile .thumb {float: left; margin: 5px 20px 20px 0;}

#mobile-menu .lang {margin: 20px 0;}
#mobile-menu .lang p {margin: 0 0 5px 0; font-weight: bold;}

#global-footer .translate {margin: 20px 0 0 0; text-align: center;}

body.page-template-profiles .section-nav {display: none;}

#front-columns > div {padding-top: 40px; padding-bottom: 40px;}
#front-columns > div > div {display: flex; flex-wrap: wrap; margin: 0 -20px -40px -20px;}
#front-columns > div > div > div {width: 33.3333%; padding: 0 20px 40px 20px;}

/**
 * Countdown
 */
#countdown > div {padding-top: 40px; padding-bottom: 0;}

.countdown-callout {display: flex; flex-wrap: wrap; align-items: center; font-size: 20px; line-height: 24px;}
.countdown-callout .countdown-widget {width: 280px;}
.countdown-callout .content {width: calc(100% - 280px);}

.countdown-widget {display: flex; flex-wrap: wrap; font-size: 40px; line-height: 40px; color: #a2522d; text-transform: uppercase; align-items: center;}
.countdown-widget .days {font-size: 64px; line-height: 118px; font-weight: bold; text-align: center; margin-right: 20px; width: 124px; height: 124px; background: url(images/countdown-circle.svg) no-repeat center center; background-size: contain;}

@media only screen and (max-width: 950px) {

    #header .upper {display: none;}

}

@media only screen and (max-width: 850px) {

    .featured-profiles .items > div {width: 50%;}

    .profiles.profiles-grid .profile {width: 50%;}

    #front-columns > div > div > div {width: 100%;}

}

@media only screen and (max-width: 600px) {

    .countdown-callout {display: block; text-align: center;}
    .countdown-callout > .countdown-widget {width: 100%; margin-bottom: 20px;}
    .countdown-callout > .content {width: 100%;}

    .countdown-widget {justify-content: center;}

}

@media only screen and (max-width: 500px) {

    .featured-profiles .items {margin: 0;}
    .featured-profiles .items > div {float: none; width: 100%; padding: 0 0 40px 0;}
    .emily_video{float: none; padding-left: 0; padding-bottom: 20px; width: 100%;}
    .profiles.profiles-grid {margin: 0;}
    .profiles.profiles-grid h1 {margin-left: 0;}
    .profiles.profiles-grid .profile {padding: 0 0 30px 0; display: block; width: 100%;}
}