/*
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
Template: twentyfourteen
*/

@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;}

#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;}

.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;}

.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;}

@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%;}

}

@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;}

    .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%;}
}