/*
Theme Name: SBC Peru
Author: Armadillo Creative + Dan Beland
Author URI: http://armadillocreative.ca/
Description: Custom Worpress theme for Spectacled Bear Conservation Society
Version: 1.0
Text Domain: sbc
*/


/********************************************************/
/* Misc *************************************************/

img {max-width: 100%; height: auto;}
[data-responsive-background-image] img { display: none;}
.background-grey {background: #eaeaea}
.bold {font-weight: 800;}

/*video wrapper for vimeo utube*/
	
	.video-wrapper {
		position: relative;
		padding-bottom: 56.25%;
		padding-top:25px;
		height: 0;
	}
	
	.video-wrapper iframe {
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height: 95%;
	}

/*not sure why not loading from editor style -- repeated here*/

@media (max-width: 575px) {
  .container { padding-left: 30px; padding-right: 30px; }
}


/********************************************************/
/* Header / Main Menu ***********************************/
.padder {width: 100%; height: 115px; }
.panel { position: fixed; right: -15.625em; width: 15.625em; }
.push { position: relative; }

#menu-main { background: #750945; padding: 40px 0px 30px 0px; }
#menu-main ul {list-style: none; margin: 0; padding: 0; }
#menu-main ul li {border-bottom: 1px solid white;}
#menu-main a { display: block; color: #EDECE8; font-weight: 600; text-align: center; font-size: 18px; padding: 9px 0; text-transform: uppercase; }
#menu-main a:hover { text-decoration: none; color: #fff; }
#menu-main .button { display: block; padding: 0;  }
#menu-main .button a { border-bottom: 0; }


#menu-main ul.sub-menu li {border-bottom: 1px solid #750945;}
#menu-main ul.sub-menu li a {font-size: 13px;}

body > .push > header {position: fixed; width: 100%; padding: 20px 0; border-bottom: 1px solid #707070; background: white; z-index: 11;}
body > .push > header .container {display: flex; justify-content: space-between; align-items: center; }
body > .push > header .logo {display: inline-block; width: 80px; height: 48px; transition: all linear 100ms; background: url('images/logo.png') no-repeat; background-size: contain; }
body > .push > header .logo-spanish {display: inline-block; width: 80px; height: 48px; transition: all linear 100ms; background: url('images/sbc-spanish.png') no-repeat; background-size: contain; }
body > .push > header a.button {font-size: 11px; margin: 0px; width: 85px;}
body > .push > header .menu-link {display: flex; align-items: center; font-size: 30px; color: #332C2A; }
body > .push > header .menu-link:hover {text-decoration: none; }
body > .push > header .menu-link:focus {outline: none; }
body > .push > header .hamburger { padding-right: 0; }
body > .push > header .hamburger-inner, 
body > .push > header .hamburger-inner:after, 
body > .push > header .hamburger-inner:before {width: 35px; }

header #desktop-nav {width: 70%;}
header #desktop-nav ul {display: flex; list-style: none; margin: 0;}
header #desktop-nav ul li {padding: 0px 25px;}

header #desktop-nav ul li.dropdown-what, header #desktop-nav ul li.dropdown-about  {cursor: pointer;}
header #desktop-nav ul li.dropdown-what .sub-menu {position: absolute; display: none; width: 100%; top: 120px; left: 0px; background: #F8F8F8; padding: 25px 0% 25px 23vw;}
 header #desktop-nav ul li.dropdown-about .sub-menu {position: absolute; display: none; width: 100%; top: 120px; left: 0px; background: #F8F8F8; padding: 25px 0% 25px 23vw;}
header #desktop-nav ul li.dropdown-what a, header #desktop-nav ul li.dropdown-about a {color: #707070}

.social a.button {display: block;}
.social a.button:first-of-type {margin-bottom: 7px;}

ul#menu-language-switcher {display: block; list-style: none; padding-top: 16px; padding-left: 0px;
    padding-right: 20px;}
ul#menu-language-switcher li {padding: 0px 5px;}
ul#menu-language-switcher li.current-lang a {color: black;}

@media (min-width: 575px) {
  body > .push > header .logo {display: inline-block; width: 100px; height: 60px; transition: all linear 100ms; background: url('images/logo.png') no-repeat; background-size: contain;}
  body > .push > header .logo-spanish {display: inline-block; width: 100px; height: 60px; transition: all linear 100ms; background: url('images/sbc-spanish.png') no-repeat; background-size: contain;}
  body > .push > header a.button {font-size: 14px; margin: 0px 5px; width: 120px;}
  ul#menu-language-switcher {display: flex;}
}
  
@media (min-width: 768px) {
  .padder { height: 131px; }
  body > .push > header .logo {width: 150px; height: 90px; }
  body > .push > header .logo-spanish {width: 150px; height: 90px; }
  
}

@media (min-width: 768px) {
  /*added for desktop menu*/
  .social a.button {display: block;}
  .social a.button:first-of-type {margin-bottom: 7px;}
}


/********************************************************/
/* Page Templates ***************************************/
.padding-top {padding-top: 60px;}
.padding-bottom {padding-bottom: 60px;}
.template-contact { padding-top: 30px; padding-bottom: 30px; }
.template-contact hr { margin: 2rem 0; border-top: 1px solid #707070; }
.template-contact .details { display: flex; flex-direction: column; font-size: 14px; }
.template-contact .details > div { position: relative; padding-left: 60px; padding-top: 10px; margin-bottom: 10px; }
.template-contact .details > div::before { display: block; position: absolute; top: 5px; left: 0; content: ' '; opacity: 0.5; }
.template-contact .details .email { min-height: 45px; }
.template-contact .details .email::before { background: url('images/icons/email.png') no-repeat; background-size: 40px; width: 40px; height: 40px; }
.template-contact .details .address { min-height: 45px; }
/*.template-contact .details .address::before { background: url('images/icons/mail.png') no-repeat; background-size: 40px; width: 40px; height: 40px; }*/
@media (min-width: 992px) { 
  .template-contact .details { flex-direction: row; font-size: 16px; }
}


/********************************************************/
/* Sections *********************************************/
section.hero {position: relative; width: 100%; height: 300px; background: center center no-repeat; background-size: cover; overflow: hidden; color: white;}
section.hero .content {position: absolute; width: 100%; top: 0%; text-align: center; padding: 5%;}
section.hero .content h1 {color: white; text-align: center; font-size: 6vw;}
section.hero img {max-width: 100%; height: auto; }

section.columns { padding-top: 60px; padding-bottom: 60px; }
.post-single section.columns {padding-top: 45px; padding-bottom: 45px; }
section.columns.topo-light { background: url('images/topo-light-grey.jpg') center center no-repeat; background-size: cover; }
section.columns ul {padding-left: 20px;}
section.columns h1 { font-size: 42px; margin-bottom: 40px; color: #750945; font-weight: 600; text-transform: none;}
section.columns h2 { font-size: 30px; text-transform: uppercase; margin-bottom: 40px; }
section.columns h3 { font-size: 24px; margin-bottom: 20px; }
section.columns .row > div img { width: 100%; height: auto; }
section.columns .row > div:last-of-type { margin-bottom: 0 !important; }
section.columns img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
section.columns.none + section.columns.none { padding-top: 0; }
section.columns.none + section.columns.none .container { padding-top: 60px; border-top: 1px solid #707070; }
section.columns.background-grey {background: #eaeaea}

  @media (min-width: 768px) {
  section.hero {height: 525px;}
  section.hero .content h1 {font-size: 4vw;}
  section.columns h2 { font-size: 40px; }
  section.columns h2 { font-size: 30px; }
}


section.donate { padding: 60px 0; background: url('images/topo-light.jpg') center center no-repeat; background-size: cover; }
section.donate .container { display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
section.donate .text { display: flex; flex-direction: column; text-align: center; margin-bottom: 20px; }
section.donate .buttons { display: flex; align-items: center; }
section.donate .buttons .button { margin: 0px 5px; }
section.donate .buttons .button:last-of-type { margin-right: 0; }
section.donate .buttons .button:first-of-type { margin-left: 0; }
section.donate h2 { font-size: 30px; text-transform: uppercase; color: #707070; margin: 0; font-weight: 500; }
section.donate p { display: flex; align-items: center; margin: 0; justify-content: center; }
@media (min-width: 768px) {
  section.donate .container { flex-direction: row; }
  section.donate .text { width: 70%; flex-direction: row; text-align: left; margin-bottom: 0; }
  section.donate p { margin-left: 20px; }
}
@media (min-width: 992px) {
  section.donate .text { width: 55%; }
}

section.newsletter { padding: 40px 0; background: #EDECE8; color: #707070; }
section.newsletter h2 { font-size: 30px; text-transform: uppercase; margin-bottom: 20px; color: #707070; font-weight: 500;}
section.newsletter p { margin: 0; line-height: 12px; font-size: 12px; margin-top: 15px; }

@media (max-width: 767px) {
  section.newsletter p br { display: none; }
}
@media (min-width: 768px) {
  section.newsletter form { width: 70%; }
}
@media (min-width: 992px) {
  section.newsletter form { width: 90%; }
  section.newsletter .wpcf7-form-control-wrap { margin-bottom: 0px; }
}

section.get-involved {padding: 0px; padding-bottom: 60px;}
section.get-involved h1 {padding-top: 60px;} /*solves for spacing issue on homepage*/
section.get-involved h2 {font-size: 24px; text-transform: none; font-weight:600;}
section.get-involved h3 {margin-top: 17px; font-size: 22px; text-transform: uppercase; color: black; font-weight: 600;}
section.get-involved p {height: 145px;}
section.get-involved .column {text-align: center; border: 1px solid black; padding: 25px; margin: 15px 0px;} 
section.get-involved .social { display: flex; align-items: center; justify-content: center; height: 40px; }
section.get-involved .social a {display: inline-block; width: 32px; height: 32px; background-size: cover; margin: 0px 5px; }
section.get-involved .social a.facebook  { background-image: url('images/icons/facebook.png'); }
section.get-involved .social a.instagram { background-image: url('images/icons/instagram.png'); }
section.get-involved .social a.youtube {background-image: url('images/images/youtube.png'); }
section.get-involved .social a.facebook:hover, section.get-involved .social a.instagram:hover {opacity: 0.5;}
section.three-up-slider {background:#D6D3D3; padding: 25px 15px;}
section.three-up-slider h2 {display: flex; align-items: center; font-size: 16px; margin-left: 15px; color: black; margin-bottom: 10px; }
section.three-up-slider h2::before {content:""; background: url('images/icons/camera.png'); width: 17px; height: 17px; display: inline-block; margin-right: 15px;}
section.three-up-slider .slider-image {padding: 0px 12px;}
section.three-up-slider .slider-image img {max-width: 100%; height: auto;}
.slick-dots li button::before {font-size: 12px;}
.next-arrow {position: absolute; right: -5px; top: 50%; z-index: 1001;}
.prev-arrow {position: absolute; left: -5px; top: 50%; z-index: 1001}

@media (min-width: 992px) {
  section.get-involved p {height: 175px;}
  }

/********************************************************/
/* Forms ************************************************/
.wpcf7 .wpcf7-form-control-wrap { display: block; margin-bottom: 20px; }
.wpcf7 h2, .wpcf7 h4 {margin-bottom: 30px;}
.wpcf7 .column {margin-bottom: 45px;}
.wpcf7 label { color: #707070; }
.wpcf7 input[type=text],
.wpcf7 input[type=email] { width: 100%; color: #707070; padding-bottom: 10px; background: transparent; border: 0; border-bottom: 1px solid #707070; border-radius: 0;}
.wpcf7 input[type=text]:focus,
.wpcf7 input[type=email]:focus { outline: none; }
.wpcf7 textarea { width: 100%; height: 200px; border: 1px solid #707070; }
.wpcf7 input[type=submit] { -webkit-appearance: none; border: 0; padding: 7px 15px; width: 160px; text-align: center; font-weight: 600; text-transform: uppercase; background: linear-gradient(0deg, rgba(120,102,100,1) 0%,  rgba(120,102,100,1) 50%,  rgba(154,139,136,1) 50%, rgba(154,139,136,1) 100%); color: white; font-size: 14px; border-radius: 0;}
.wpcf7 .screen-reader-response { display: none; }
.wpcf7 .wpcf7-not-valid-tip { font-size: 12px; color: #ff0000; }
.wpcf7 .wpcf7-response-output {padding: 10px; font-size: 14px; margin-top: 30px; }
.wpcf7 .wpcf7-response-output.wpcf7-validation-errors { display: inline-block; border-color: #FFC937; background: #FFF9F0; }
.wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ok { display: inline-block; border-color: #7CBC77; background: #F0F9EF; }

/*-----*/
section.newsletter .wpcf7-spinner {display: inherit; margin: 15px auto;}

/********************************************************/
/* Footer ***********************************************/
body > .push > footer { position: relative; background: #3D3B3C; padding: 60px 0; color: #EDECE8; font-size: 14px; }
body > .push > footer .container { display: flex; flex-direction: column; justify-content: space-between;  text-align: center; }
body > .push > footer a { color: #EDECE8; text-transform: uppercase; margin: 0 5px; }
body > .push > footer a:hover { color: #FFF; }
body > .push > footer nav { margin-bottom: 20px; }
body > .push > footer nav a { white-space: nowrap; }
body > .push > footer nav a:first-of-type { margin-left: 0; }
body > .push > footer .social { display: flex; align-items: center; justify-content: center; }
body > .push > footer .social a:first-of-type { margin-left: 0; }
body > .push > footer .social a { display: inline-block; width: 32px; height: 32px; background-size: cover; }
body > .push > footer .social a.facebook  { background-image: url('images/icons/facebook.png'); }
body > .push > footer .social a.instagram { background-image: url('images/icons/instagram.png'); }
body > .push > footer .social a.youtube { background-image: url('images/youtube-1.png'); width: 44px; height: 30px; margin-top: 4px;}
body > .push > footer .bear { display: none; }
body > .push > .peru-strip {position: relative; width: 100%; height: 17px; background: url("images/peruvian-strip.jpg") no-repeat; background-size: cover;}
@media (min-width: 768px) {
  body > .push > footer .container { flex-direction: row; text-align: left; }
  body > .push > footer nav { margin: 0; }
  body > .push > footer nav a { display: block; margin: 0; }
  body > .push > footer .social { margin-right: 300px; }
	body > .push > footer .bear { position: absolute; display: block; right: 0; bottom: 0; width: 260px; height: 334px; background: url('images/footer-bear.png') no-repeat; background-size: contain; z-index: 1001; }
}

section.donate .text p img {width: 150px;}

/*ecosystem page*/
section.ecosystems .eco-card {position: relative; z-index: 10; width: 100%; height: auto; background: #524A45; padding: 30px; }
section.ecosystems .eco-card h2 {font-size: 20px; margin-bottom: 20px; color: #F5D963;}
section.ecosystems .eco-card p {color: white;}
section.ecosystems .eco-image {position: relative; z-index: 1; margin-top: -60px;}
section.ecosystems .eco-intro {position: relative; z-index: 10;}
  
  @media (min-width: 768px) {
    section.ecosystems .eco-image {margin-top: -130px;}
  }

/*about bear page*/
.our-bears-nav {background: #eaeaea;}
.bear-nav img {margin-bottom: 15px;}
.bear-nav {text-align: center;}
.bear-nav h2 {text-transform: uppercase; margin-bottom: 24px;}

/*where we work page*/
section.where {background: #F5F5F5}
section.where .image {position: relative; z-index: 1; margin-top: -100px;}
section.where .intro {position: relative; z-index: 10;}
  
  @media (min-width: 768px) {
    section.where .image {margin-top: -205px;}
  }

/*our team page*/
div.team-profile {padding-top: 45px; padding-bottom: 45px; border-bottom: 1px solid black;}
div.team-profile img {margin-bottom: 30px;}
div.team-profile h2 {font-size: 24px; text-transform: uppercase;}
div.team-profile h3 {font-size: 22px; margin-bottom: 24px;}
div.team-profile:last-of-type {border:none; }

/*FAQ Repeater */
.faq-repeater {position: relative; width :100%; height: auto; padding-bottom: 90px; padding-top: 45px;}
.faq-repeater h2 {margin-bottom: 45px;}
.faq-repeater .accordion-row .accordion {position: relative; display: flex; padding: 40px 40px; align-items: center; cursor: pointer; height: auto; border-top: 1px solid black;}
.faq-repeater .accordion-row:last-of-type { border-bottom: 1px solid black;}
.faq-repeater .accordion-row h4 {font-weight: 500; font-size: 20px; width: 90%; margin: 0; padding-left: 60px; color: black;}
.faq-repeater .accordion-row .accordion:before {font-family: dashicons; display: inline-block; content: "\f543"; position: absolute; left: 30px; font-size: 20px; top: 28px;  color: black; font-style: normal;}
.faq-repeater .accordion-row .active:before {font-family: dashicons; display: inline-block; content: "\f460"; position: absolute; left: 30px; font-size: 20px; top: 28px;  color: black; font-style: normal;}
.faq-repeater .accordion-row .active {position: relative;}
.faq-repeater .accordion-row .sub-panel {padding: 30px 30px 40px 30px;}
.faq-repeater .accordion-row p:last-of-type {margin-bottom: 0px;}

.columns p:last-child {margin-bottom: 0px;}

 section.three-up-slider {background:#D6D3D3; padding: 25px 15px;}
  section.three-up-slider h2 {display: flex; align-items: center; font-size: 16px; margin-left: 15px; color: black; margin-bottom: 10px; }
  section.three-up-slider h2::before {content:""; background: url("<?php echo get_template_directory_uri(); ?>/images/icons/camera.png"); width: 17px; height: 17px; display: inline-block; margin-right: 15px;}
  section.three-up-slider .slider-image {padding: 0px 12px;}
  section.three-up-slider .slider-image img {max-width: 100%; height: auto;}
  .slick-dots li button::before {font-size: 12px;}
  .next-arrow {position: absolute; right: 0; top: 50%;}
  .prev-arrow {position: absolute; left:0; top: 50%; z-index: 1001}

.boxzilla-close-icon {font-size: 55px !important; padding: 10px !important;}
.boxzilla-content h2 {font-size: 36px !important;}
.boxzilla-content img {max-width: 60%; margin-bottom: 20px;}