/*
Theme Name: 4Site Custom Theme
Description: Custom theme for the 2020 wordpress site
Version: 1.0
*/

.branding {
  height: 75px;
  width: 75px;
}

.scrolling-case-laptop img {
  background-image: url("/wp-content/uploads/2020/02/caseScrolling.jpg");
}

#block-newsletterblock {
  position: relative;
  background: #ff9d0a;
  padding: 7rem 5rem;
}
@media (min-width: 1400px) {
  #block-newsletterblock {
    padding: 5rem;
  }
}

.section-newsletter {
  background-image: url("images/newsletter/newslettermobile.png");
  background-size: cover;
  background-repeat: no-repeat;
  height: 35rem;
  width: 80%;
  /*
  position: absolute;
  left: 0;
  bottom: 0;
  */
}
@media (min-width: 700px) {
  .section-newsletter {
    background-image: url("images/newsletter/newslettertablet.png");
  }
}
@media (min-width: 900px) {
  .section-newsletter {
    height: 40rem;
  }
}
@media (min-width: 1024px) {
  .section-newsletter {
    background: transparent;
  }
}
.section-newsletter img {
  display: none;
}
@media (min-width: 1024px) {
  .section-newsletter img {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: 140%;
  }
}

.services--wheel {
  width: 100%;
  max-width: 100%;
  margin: 5rem auto 0;
  box-sizing: border-box;
  position: relative;
}
@media (min-width: 900px) {
  .services--wheel {
    /*width: 30%;*/
    float: left;
    margin-top: 10rem;
    margin-left: 10%;
    margin-right: 0;
  }
}
.services--wheel .pivot-inner span {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-indent: -9999px;
}
.services--wheel .pivot-inner:nth-of-type(1) span {
  background-image: url("images/services/icon_hosting.svg");
}
.services--wheel .pivot-inner:nth-of-type(2) span {
  background-image: url("images/services/icon_content.svg");
}
.services--wheel .pivot-inner:nth-of-type(3) span {
  background-image: url("images/services/icon_gear.png");
}
.services--wheel .pivot-inner:nth-of-type(4) span {
  background-image: url("images/services/icon_training.svg");
}
.services--wheel .pivot-inner:nth-of-type(5) span {
  background-image: url("images/services/icon_dude.jpg");
}
.services--wheel .pivot-inner:nth-of-type(6) span {
  background-image: url("images/services/icon_clock.svg");
}
.services--wheel .pivot-inner:nth-of-type(7) span {
  background-image: url("images/services/icon_mail.svg");
}
.services--wheel .pivot-inner:nth-of-type(8) span {
  background-image: url("images/services/icon_animation.svg");
}

.services--copy {
  line-height: 1.5;
  height: 30rem;
  margin-top: 10rem;
  text-align: center;
  position: relative;
}
@media (min-width: 900px) {
  .services--copy {
    width: 58%;
    margin-left: 2%;
    float: left;
    text-align: left;
    margin-top: 2rem;
  }
}
@media (min-width: 1024px) {
  .services--copy {
    width: 60%;
    margin-left: 0;
  }
}
.services--copy p {
  font-size: 2.25rem;
}
@media (min-width: 900px) {
  .services--copy p {
    font-size: 3rem;
    margin-top: 0;
  }
}
@media (min-width: 1024px) {
  .services--copy p {
    font-size: 3.25rem;
  }
}

.cms-logos {
  display: none;
}
.cms-logos.clickd {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}
.cms-logos a {
  display: inline-block;
  height: 2.5rem;
  text-indent: -9999px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.cms-logos a.drupal {
  background-image: url("images/logos/drupallogo.png");
  width: 8rem;
}
.cms-logos a.wordpress {
  background-image: url("images/logos/wplogo.png");
  width: 12.5rem;
}

.orbit-heart {
  max-width: 100%;
  width: 200px;
  height: 200px;
  margin: 10rem 4rem;
  background-image: url("images/services/icon_client.png");
  background-repeat: no-repeat;
  background-position: 40% 28%;
  position: absolute;
  cursor: pointer;
}
@media all and (min-width: 365px) {
  .orbit-heart {
    margin: 10rem 5rem;
  }
}
.orbit-heart.carded {
  background-image: url("images/services/icon_client_hover.png");
  background-position: 26px 12px;
  z-index: 3;
  position: absolute;
  width: 250px;
}
@media (min-width: 900px) {
  .orbit-heart {
    margin: 0 auto;
  }
}

.orbit-inner {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  box-sizing: border-box;
}
.orbit-inner * {
  box-sizing: border-box;
}

.orbit-heart__initial {
  color: #fff;
  font-size: 25px;
  padding: 30px 20px;
  text-align: center;
  display: block;
}

.center {
  position: absolute;
}

.pivot {
  position: absolute;
  border: 1px solid #000;
  z-index: 1;
}

.pivot-inner {
  top: -150px;
  z-index: 1;
}

.circlenode {
  cursor: pointer;
  position: absolute;
  width: 70px;
  height: 70px;
  left: -35px;
  top: -35px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  text-align: center;
  text-decoration: none;
  color: red;
  line-height: 1;
  padding: 25px 0;
  z-index: 1;
}

.service-text {
  opacity: 0;
  height: 0;
  animation: serviceboogalooout 0.75s;
  animation-fill-mode: forwards;
  font-size: 1.75rem;
  padding-right: 5%;
  position: absolute;
}
@media (min-width: 900px) {
  .service-text {
    padding-top: 7rem;
    font-size: 2.5rem;
  }
}
.service-text.clickd {
  animation: serviceboogalooin 0.75s;
  animation-fill-mode: forwards;
  animation-delay: 1s;
  height: auto;
}
@keyframes serviceboogalooin {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes serviceboogalooout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
#services--copy {
  padding-top: 0;
}

.crm-logos {
  display: inline-block;
  vertical-align: middle;
}
.crm-logos a {
  display: inline-block;
  height: 2.5rem;
  text-indent: -9999px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 6rem;
  height: 3.5rem;
}
.crm-logos a.salesforce {
  background-image: url("images/logos/salesforcelogo.png");
}
.crm-logos a.salsa {
  background-image: url("images/logos/salsalogo.jpg");
}
.crm-logos a.blackbaud {
  background-image: url("images/logos/blackbaudlogo.png");
}
.crm-logos a.donorperfect {
  background-image: url("images/logos/donorperfectlogo.gif");
}
.crm-logos a.civicrm {
  background-image: url("images/logos/civicrmlogo.png");
}

.card-text {
  display: none;
}
.card-text.service {
  position: absolute;
  z-index: 3;
  font-family: "Noto Sans", sans-serif;
  font-size: 2rem;
  display: block;
  top: 205px;
}
@media (min-width: 900px) {
  .card-text.service {
    top: 106px;
  }
}
.card-text.hosting {
  left: 37%;
}
@media (min-width: 900px) {
  .card-text.hosting {
    left: 23%;
  }
}
.card-text.content {
  left: 37%;
}
@media (min-width: 900px) {
  .card-text.content {
    left: 23%;
  }
}
.card-text.CMSs {
  left: 43%;
}
@media (min-width: 900px) {
  .card-text.CMSs {
    left: 28%;
  }
}
.card-text.training {
  left: 37%;
}
@media (min-width: 900px) {
  .card-text.training {
    left: 23%;
  }
}
.card-text.CRMs {
  left: 43%;
}
@media (min-width: 900px) {
  .card-text.CRMs {
    left: 28%;
  }
}
.card-text.SLA {
  left: 43%;
}
@media (min-width: 900px) {
  .card-text.SLA {
    left: 28%;
  }
}

.engagement-4cast-hero {
  width: 100%;
  padding-bottom: 48%;
  position: relative;
  overflow: hidden;
}
.engagement-4cast-hero img {
  position: absolute;
  max-width: 100%;
}

.engagement-4cast-bg-top {
  width: 100%;
  left: 0;
  top: 0;
}
.engagement-4cast-bg-bottom {
  width: 100%;
  left: 0;
  bottom: -75px;
}
.engagement-4cast-bg-left-bush1 {
  left: 0px;
  bottom: 10%;
  max-width: 10% !important;
}
.engagement-4cast-bg-left-bush2 {
  left: 25px;
  bottom: 10%;
  max-width: 10% !important;
}
.engagement-4cast-bg-left-bush3 {
  left: 50px;
  bottom: 10%;
  max-width: 10% !important;
}
.engagement-4cast-bg-right {
  right: 50px;
  bottom: 15%;
  max-width: 15% !important;
}
.engagement-4cast-bg-cat-top {
  top: 13%;
  right: 27%;
  max-width: 10% !important;
}
.engagement-4cast-bg-title,
.engagement-4cast-bg-title-no-cat {
  left: 7vw;
  top: 10%;
  width: 86vw;
}
.engagement-4cast-bg-fire-breather {
  right: 20%;
  bottom: -20%;
  max-width: 25% !important;
}
.engagement-4cast-bg-unicycle-clown {
  left: 15px;
  bottom: 10%;
  max-width: 25% !important;
}
.engagement-4cast-separator {
  left: 0;
  bottom: -20px;
  width: 100%;
  height: 70px;
}
.engagement-4cast-bg-title-no-cat,
.engagement-4cast-bg-cat-top {
  display: none;
}

@media (max-width: 800px) {
  .engagement-4cast-bg-bottom {
    bottom: -12%;
  }
  .engagement-4cast-separator {
    display: none;
  }
}

.arrow-background {
  position: relative;
  background-image: url(/wp-content/themes/foursite/images/blog_landing_page/arrow-background.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 80px 10%;
}
.arrow-background:before {
  position: absolute;
  content: " ";
  background-image: url(/wp-content/themes/foursite/images/blog_landing_page/nose-and-mustache.svg);
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  width: 171px;
  height: 149px;
  top: -30px;
  left: 20px;
}
.arrow-background:after {
  position: absolute;
  content: " ";
  background-image: url(/wp-content/themes/foursite/images/blog_landing_page/bush.svg);
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  width: 105px;
  height: 73px;
  bottom: 35px;
  right: 50%;
}

.arrow-background
  .is-style-hubspot-form__foursite-blog-newsletter-sign-up
  form
  input[type="submit"] {
  background-color: #ff4049 !important;
}
.arrow-background
  .is-style-hubspot-form__foursite-blog-newsletter-sign-up
  form {
  gap: 4px;
}
.arrow-background
  .is-style-hubspot-form__foursite-blog-newsletter-sign-up
  form
  .hs-email
  input[type="email"] {
  background-color: white;
  border: none;
}
.arrow-background p {
  padding: 10px 0;
}
@media (max-width: 780px) {
  .arrow-background {
    background-image: unset;
    background-color: #ffeed2;
  }
  .arrow-background:before {
    top: -40px;
  }
  .arrow-background:after {
    bottom: -15px;
  }
}
@media (min-width: 781px) and (max-width: 950px) {
  .arrow-background:before {
    width: 125px;
    height: 112px;
    top: 0px;
  }
  .arrow-background:after {
    width: 76px;
    height: 55px;
    bottom: 45px;
  }
}
@media (min-width: 781px) and (max-width: 1200px) {
  .arrow-background p {
    font-size: 2.25vw;
  }
  .arrow-background
    .is-style-hubspot-form__foursite-blog-newsletter-sign-up
    form
    input[type="submit"] {
    font-size: 2vw;
  }
}
.featured-blog-post .wp-block-post {
  padding: 0 10px;
}




.foursite-enlp-block.aligncenter {
	margin: 0 auto;
}
.en-page-header-section-title {
	font-size: 66px;
  font-size: clamp(2rem, 1.2917rem + 3.5417vw, 4.125rem);
	font-style: normal;
	font-weight: 400;
	line-height: 92%;
	letter-spacing: -1.32px;
}
.en-page-header-section-title-has-accents {
	display: flex;
	justify-content: center;
	align-items: center;
}
.en-page-header-section-title-has-accents::before {
	background-image: url('/wp-content/themes/foursite/images/pages/engaging-networks/en-page-header-title-left-accent.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 68px;
	height: 12px;
	content: ' ';
	display: block;
}
.en-page-header-section-title-has-accents::after {
	background-image: url('/wp-content/themes/foursite/images/pages/engaging-networks/en-page-header-title-right-accent.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 68px;
	height: 12px;
	content: ' ';
	display: block;
}
body.page-template-page-blocks > p {
  max-width: 766px;
  margin: 0 auto;
}