/*
Theme Name: Couples Counselling
Theme URI: http://www.infinitywebdesign.com
Author: Kevin Walsh
Author URI: http://www.infinitywebdesign.com
Description: Custom-designed theme for Couples Counselling
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: couples-counselling
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
*/
.basecolour {
  background-color: #2a6577;
}

.visible {
  display: block !important;
}

.nodisplay {
  display: none !important;
}

*,
*::after,
*::before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

a, a:active, a:link, a:visited {
  cursor: pointer;
  text-decoration: none;
  color: white;
}

body {
  position: relative;
  font-family: "Noto Sans SC", sans-serif;
  box-sizing: content-box;
  color: #555;
}
@media screen and (min-width: 992px) {
  body {
    min-height: calc(100vh - 129px);
    padding-bottom: 129px;
  }
}

img {
  max-width: 100% !important;
}

.content ul {
  margin-left: 1.25rem;
  margin-top: 1rem;
}
.content ul li {
  margin-bottom: 1rem;
}

.container, .container--noshadow {
  max-width: 1200px;
  margin: 0 auto;
  box-shadow: 0.5rem 0 1.5rem rgba(0, 0, 0, 0.2), -0.5rem 0 1.5rem rgba(0, 0, 0, 0.2);
}
.container--noshadow {
  box-shadow: none;
}

header {
  background-color: #2a6577;
  border-bottom: 1px solid #6eb6cc;
  z-index: 999;
  min-height: 3rem;
  padding: 1rem;
  transition: all 0.5s;
}
@media screen and (min-width: 992px) {
  header {
    height: 72px;
  }
}
@media screen and (max-width: 991px) {
  header {
    padding: 2rem;
  }
}
header.fixed {
  position: fixed;
  top: 0;
  height: auto;
  background-color: rgba(41, 40, 40, 0.5);
}
header nav {
  position: relative;
}
header nav .hamburger {
  position: absolute;
  color: #a9a7a7;
  right: -1rem;
  top: -2rem;
  display: none;
  cursor: pointer;
  font-size: 1.5rem;
}
@media screen and (max-width: 991px) {
  header nav .hamburger {
    display: block;
  }
}
header ul {
  list-style-type: none;
  margin-left: auto;
  display: none;
}
@media screen and (min-width: 992px) {
  header ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
header ul li {
  display: inline-block;
}
header ul li:not(:last-of-type) {
  margin-right: 0.5rem;
}
@media screen and (max-width: 991px) {
  header ul li {
    display: block;
    text-align: center;
    margin-bottom: 0.1rem;
    margin-right: 0 !important;
  }
}
@media screen and (min-width: 992px) {
  header ul li:hover ul {
    display: block;
  }
}
header ul li ul {
  top: 100%;
  border-top: 1px solid #292828;
  position: absolute;
  display: block;
  display: none;
  background-color: black;
  font-style: italic;
}
@media screen and (max-width: 991px) {
  header ul li ul {
    position: relative;
  }
}
header ul li ul li {
  display: block;
  width: 100%;
}
header ul li ul li a {
  width: 100%;
}
header a, header a:active, header a:link, header a:visited {
  display: block;
  padding: 0.5rem;
  background-color: rgba(0, 0, 0, 0.5);
  background-color: #2a6577;
  transition: all 0.5s;
  width: 100%;
}
header a:hover, header a:active:hover, header a:link:hover, header a:visited:hover {
  background-color: #6eb6cc;
}

.grid {
  display: grid;
}
@media screen and (min-width: 992px) {
  .grid-two-one {
    grid-template-columns: 2fr 1fr;
  }
  .grid-two {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-three {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-four {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid-four-one {
    grid-template-columns: 4fr 1fr;
  }
}

.jumbotron {
  min-height: 80vh;
  background-image: url(img/couples-counselling-cambridge.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.jumbo1 {
  color: white;
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.jumbo1 h2 {
  text-transform: uppercase;
  letter-spacing: 0.3rem;
  color: #2a6577;
  font-size: 1.75rem;
}
@media screen and (max-width: 991px) {
  .jumbo1 h2 {
    line-height: 1.1;
    margin-bottom: 0.5rem;
  }
}
@media screen and (max-width: 400px) {
  .jumbo1 h2 {
    font-size: 1.5rem;
  }
}
.jumbo1 p.jumbotext {
  padding: 0 0.25rem;
  color: #2a6577;
}
.jumbo1 .jumbotext {
  display: block;
}

.jumbo2 {
  text-shadow: 0.03rem 0.03rem 0.03rem rgba(42, 101, 119, 0.6), -0.03rem -0.03rem 0.03rem rgba(42, 101, 119, 0.6) !important;
  padding-bottom: 1rem;
  background-color: rgba(0, 0, 0, 0.15);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.jumbo2 .francesca {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: auto;
  margin-top: 3rem;
}
.jumbo2 .francesca h2 {
  line-height: 1;
  margin-top: 1rem;
}
.jumbo2 .francesca img.franpic {
  width: 100px;
  border-radius: 50%;
}
.jumbo2 .francesca .sidecontact {
  font-size: 0.9rem;
  margin-top: 2rem;
  text-align: center;
  padding: 0.5rem;
  border-radius: 15px;
}
.jumbo2 .francesca .sidecontact i {
  margin-top: 0.5rem;
  font-size: 1.5em;
}
.jumbo2 .francesca .sidecontact a {
  display: block;
  transition: all 0.5s;
  padding: 0.25rem;
  border-radius: 10px;
}
.jumbo2 .francesca .sidecontact a:hover {
  background-color: #6eb6cc;
}
.jumbo2 .accreditation {
  display: grid;
  gap: 0.75rem;
  place-items: center;
  margin-top: 1rem;
}
.jumbo2 .accreditation img {
  max-height: 75px;
  width: auto;
  border-radius: 5px;
  display: block;
  border: gray 1px solid;
}
.jumbo2 .accreditation img:first-of-type {
  border-radius: 40px;
}

.maincontent, .maincontent__bullets, .pagecontent {
  position: relative;
  padding-bottom: 0;
  padding-bottom: 2rem;
}
@media screen and (min-width: 577px) {
  .maincontent, .maincontent__bullets, .pagecontent {
    padding: 2rem;
  }
}
.maincontent p, .maincontent__bullets p, .maincontent li, .maincontent__bullets li, .pagecontent p, .pagecontent li {
  margin-bottom: 1rem;
}
.maincontent p, .maincontent__bullets p, .maincontent ul, .maincontent__bullets ul, .pagecontent p, .pagecontent ul {
  font-size: 1.2rem;
  font-weight: 100;
}
@media screen and (max-width: 992px) {
  .maincontent p, .maincontent__bullets p, .maincontent ul, .maincontent__bullets ul, .pagecontent p, .pagecontent ul {
    font-weight: 300;
  }
}
.maincontent__text, .pagecontent__text {
  padding: 1rem;
  padding-bottom: 0;
}
.maincontent__photo, .pagecontent__photo {
  padding: 3rem;
}
.maincontent__photo img, .pagecontent__photo img {
  display: block;
  border-radius: 15px;
}
@media screen and (max-width: 991px) {
  .maincontent__photo, .pagecontent__photo {
    display: none;
  }
}
.maincontent ul, .maincontent__bullets ul, .pagecontent ul {
  margin: 1rem 0;
  margin-left: 2rem;
}

.maincontent__bullets {
  border-top: 1px solid white;
  background-image: linear-gradient(rgba(42, 101, 119, 0.7), rgba(42, 101, 119, 0.7)), url(img/newpics/couples2.jpg);
  background-position: center;
  background-size: cover;
  color: white;
  padding-top: 2.5rem;
}
.maincontent__bullets::before {
  content: "Counselling in action";
  position: absolute;
  padding: 0.5rem 1rem;
  padding-right: 3rem;
  background-color: #fa7b4d;
  color: white;
  border-bottom-right-radius: 50px;
  font-size: 1.25rem;
  box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

.maincontent.covid, .covid.maincontent__bullets {
  background-color: #f2f8fa;
  border-bottom: 1px dotted #6eb6cc;
}
.maincontent.covid p, .covid.maincontent__bullets p {
  font-size: 1rem;
}
.maincontent.covid figure, .covid.maincontent__bullets figure {
  margin-top: 2rem;
}
.maincontent.covid img, .covid.maincontent__bullets img {
  margin: 1rem;
  max-height: 150px;
  display: block;
  margin: 0 auto;
}
.maincontent.covid figcaption, .covid.maincontent__bullets figcaption {
  text-align: center;
  font-size: 0.9rem;
  line-height: 1;
  color: #a09e9e;
}

.threesteps {
  position: relative;
  grid-gap: 2rem;
  padding: 4rem 3rem;
  background-color: #dfeff4;
  min-height: 400px;
}
.threesteps::before {
  content: "The process";
  position: absolute;
  padding: 0.5rem 1rem;
  padding-right: 3rem;
  background-color: #fa7b4d;
  color: white;
  border-bottom-right-radius: 50px;
  font-size: 1.25rem;
  box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 991px) {
  .threesteps {
    padding: 4rem 10vw;
  }
}
.threesteps h2, .threesteps i {
  color: #2a6577;
}
.threesteps .step {
  border-bottom-right-radius: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  text-align: center;
  background-color: white;
  padding: 2rem;
}
.threesteps .step p:not(:last-of-type) {
  margin-bottom: 1rem;
}
.threesteps i {
  font-size: 3rem;
}
.threesteps h2, .threesteps p {
  font-style: italic;
}

@media screen and (min-width: 577px) {
  .threesteps p, .testimonial p {
    font-weight: 100;
  }
}
.testimonial {
  background-color: unset;
  position: relative;
  padding: 4rem 3rem;
  grid-gap: 2rem;
}
.testimonial::before {
  content: "Testimonials";
  position: absolute;
  padding: 0.5rem 1rem;
  padding-right: 3rem;
  background-color: #fa7b4d;
  color: white;
  border-bottom-right-radius: 50px;
  font-size: 1.25rem;
  box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 991px) {
  .testimonial {
    padding: 4rem 15vw;
  }
}
@media screen and (max-width: 400px) {
  .testimonial {
    padding: 4rem 1rem;
  }
}

.testimonialbox,
.transtest {
  background-color: white;
  color: #555;
  border: 1px solid #6eb6cc;
  padding: 1rem;
  border-radius: 15px;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  height: 100%;
}
.testimonialbox .testname,
.transtest .testname {
  font-style: italic;
  margin: 0.5rem 0;
}
.testimonialbox h3,
.transtest h3 {
  line-height: 1;
  margin-bottom: 1rem;
  color: #6eb6cc;
}
.testimonialbox .transbutton,
.testimonialbox .originalbutton,
.transtest .transbutton,
.transtest .originalbutton {
  padding: 0.5rem;
  background-color: #6eb6cc;
  border: 1px solid #6eb6cc;
  color: white;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.5s;
}
.testimonialbox .transbutton:hover,
.testimonialbox .originalbutton:hover,
.transtest .transbutton:hover,
.transtest .originalbutton:hover {
  background-color: #2a6577;
  box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

/* Animation setup */
@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-in {
  -webkit-animation: fade-in 0.5s ease-in-out both;
          animation: fade-in 0.5s ease-in-out both;
}
@media screen and (max-width: 991px) {
  .fade-in {
    -webkit-animation: fade-in 1s ease-in-out both;
            animation: fade-in 1s ease-in-out both;
  }
}

.testwrapper {
  opacity: 0;
}

@media screen and (min-width: 992px) {
  .testwrapper:nth-of-type(1) {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
  }

  .testwrapper:nth-of-type(2) {
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
  }

  .testwrapper:nth-of-type(3) {
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
  }

  .step:nth-of-type(1) {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
  }

  .step:nth-of-type(2) {
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
  }

  .step:nth-of-type(3) {
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
  }
}
/* Formatting for page.php  */
.pagecontent {
  padding: 2rem;
  min-height: calc(100vh - 72px - 129px);
}
.pagecontent > * {
  padding: 1rem;
}
.pagecontent .sidetest {
  margin-top: 2rem;
}
.pagecontent .sidetest .testimonialbox, .pagecontent .sidetest .transtest {
  background-color: white;
}
.pagecontent .sidetest .testimonialbox p, .pagecontent .sidetest .transtest p {
  font-size: 1rem;
}
.pagecontent img {
  display: block;
  border-radius: 15px;
  max-width: 100%;
  /*
  Tweaking max-height so that width will adjust accordingly for portrait photos in mobile view. 
  Had to do this when Francesca uploaded a portrait pic that filled the *entire* screen on a tablet/phone. 
  The 18rem is to ensure that it doesn't get *too* small on a phone. 
  */
  max-height: max(50vw, 18rem);
}
@media screen and (min-width: 992px) {
  .pagecontent img {
    margin-top: 2rem;
  }
}
@media screen and (max-width: 991px) {
  .pagecontent img {
    margin: 0 auto;
  }
}
@media screen and (max-width: 400px) {
  .pagecontent {
    padding: 0;
  }
}
.pagecontent .content h2:not(.page-title) {
  font-size: 1.2rem;
}
.pagecontent h2.page-title {
  margin-bottom: 0.5rem;
}

footer {
  font-size: 80%;
  color: white;
  grid-gap: 1rem;
  padding: 1rem;
  background-color: #292828;
  position: relative;
}
@media screen and (min-width: 992px) {
  footer {
    height: 129px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
footer .contactpanel {
  display: flex;
  align-items: center;
  flex-direction: column;
}
@media screen and (max-width: 991px) {
  footer .contactpanel {
    margin-bottom: 1rem;
  }
}
footer a:link, footer a:visited {
  color: currentColor;
  padding: 0.25rem;
  transition: all 0.5s;
}
footer a:link:hover, footer a:visited:hover {
  background-color: #2a6577;
  color: white;
}
footer p.privacy {
  text-align: center;
}

/* Infnity Web Design credit  */
.infcredit {
  text-align: center;
  font-size: 0.7rem;
  color: #e0dcdc;
  color: gray;
  margin-top: 0.5rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.infcredit a {
  text-decoration: none;
  background: rgba(0, 0, 0, 0.1);
  color: inherit;
  padding: 0.2rem;
  border-radius: 3px;
  transition: all 0.5s;
}
.infcredit a:hover {
  color: white;
  background-color: #403f7a;
  background-color: #6eb6cc;
}

/* ANIMISTA ANIMATIONS */
/* ----------------------------------------------
 * Generated by Animista on 2020-1-6 14:41:15
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation swing-in-top-fwd
 * ----------------------------------------
 */
@-webkit-keyframes swing-in-top-fwd {
  0% {
    transform: rotateX(-100deg);
    transform-origin: top;
    opacity: 0;
  }
  100% {
    transform: rotateX(0deg);
    transform-origin: top;
    opacity: 1;
  }
}
@keyframes swing-in-top-fwd {
  0% {
    transform: rotateX(-100deg);
    transform-origin: top;
    opacity: 0;
  }
  100% {
    transform: rotateX(0deg);
    transform-origin: top;
    opacity: 1;
  }
}
.swing-in-top-fwd {
  -webkit-animation: swing-in-top-fwd 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  animation: swing-in-top-fwd 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-1-6 16:48:25
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
@-webkit-keyframes rotate-center {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
    opacity: 1;
  }
}
@keyframes rotate-center {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
    opacity: 1;
  }
}
.rotate-center {
  -webkit-animation: rotate-center 0.6s ease-in-out both;
  animation: rotate-center 0.6s ease-in-out both;
}

/*  WINDOW MESSAGE*/
/*
For displaying Window size message. displaySize() in utilities.js looks for #windowMessage and if it exists,
displays the message.
*/
#windowMessage {
  background-color: #8d8c8c;
  color: white;
  display: inline-block;
  padding: 0.3rem;
  border-radius: 5px;
  margin: 0;
  position: fixed;
  top: 5rem;
  left: 10%;
  z-index: 100;
  display: none;
  /* If we don't specify display:none, then it appears briefly as a dot (because of the padding), then either
  expands to fit the content, or disappears if it's hidden. So it's best to start hidden
  then make it visible if and only if necessary. That way, we get no brief appearance. */
}
#windowMessage.show {
  display: block;
  /* We need the ID here. Otherwise, the class is outranked by #windowMessage above. */
}

#windowSize {
  font-weight: bold;
}

.maincontent.duplicate img, .duplicate.maincontent__bullets img {
  max-width: 300px !important;
  float: right;
  border-radius: 15px;
  margin-left: 1rem;
}

/* Scroll to top button */
#scrollbutton {
  display: inline-block;
  background-color: rgba(110, 182, 204, 0.4);
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 50vh;
  right: 0.5rem;
  transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#scrollbutton::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}
#scrollbutton.show {
  opacity: 1;
  visibility: visible;
}

.kevtest {
  text-shadow: 0.03rem 0.03rem 0.03rem rgba(42, 101, 119, 0.6), -0.03rem -0.03rem 0.03rem rgba(42, 101, 119, 0.6);
}