.page-wrapper h1,
.page-wrapper h2,
.page-wrapper h3,
.page-wrapper h4,
.page-wrapperh5,
.page-wrapper h6 
{

    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

.page-wrapper p,
.page-wrapper div,
.page-wrapper ul,
.page-wrapper li,
.page-wrapper a 
{
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    color: #222538;
    font-size: 18px;
}

.page-wrapper p {
    line-height: 1.25;
    margin-bottom: 1rem;
}

.page-wrapper a {
    color: #007FCC;
    text-decoration: none;
}

.page-wrapper a:hover,
.page-wrapper a:focus
{
    color: #0061ab;
}

.page-wrapper .button,
.page-wrapper button,
.page-wrapper .primary-button
{
    color: #38bfae; 
    border-color: #38bfae;
    border-radius: 0;
    height: auto;
    padding: 14px 22px;
    border-width: 2px;
    line-height: 1.5;
}

.page-wrapper .button:hover,
.page-wrapper button:hover,
.page-wrapper .button:focus,
.page-wrapper button:focus
{
    color: #fff;
    background:  #38bfae;
    border-color: #38bfae;
}
.main-header.sticky + .page-wrap {
  margin-top: 65px!important;
}
/* why accordian */
.why .accordian-container {
    text-align: center;
    padding: 35px;	
    margin-top: -180px;
	z-index: 999;
}

.why .accordian-container h2 {
    color: #2c0a49;
    font-size: 1.8em;
    line-height: 1.2em;
    margin-bottom: 30px;
    font-weight: 500;
}

.why .accordian-container input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
    
.why .accordian-container .tabs {
    overflow: hidden;
}
    
.why .accordian-container .tab {
    width: 100%;
    overflow: hidden;
    margin-bottom: 15px;
}

.why .accordian-container .tab-label {
    display: flex;
    justify-content: space-around;
    padding: 1em;
    color: #2c0a49;
    background: none;
    padding: 0 0 10px 0;
    font-size: 1.2rem;
    font-weight: 400;
    cursor: pointer;
    text-align: center;
}

@media screen and (max-width: 992px) {
    .why .accordian-container .tab-label {
        justify-content: center;
    }
}

.why .accordian-container .tab-label:hover {
    background: none;
    color: #fff;
}

.why .accordian-container .tab-label::before {
    content: "+";
    width: 1em;
    height: 1em;
    text-align: center;
    transition: all 0.35s;
    color: #2c0a49;
}

.why .accordian-container .tab-label::after {
    content: none;
}

.why .accordian-container .tab-label:hover:before {
    color: #fff;
}

.why .accordian-container .tab-content {
    max-height: 0;
    padding: 0 1em;
    background-color: #efefef;
    color: #2c0a49;
    transition: all 0.35s;
}

.why .accordian-container .tab-close {
    display: flex;
    justify-content: flex-end;
    padding: 1em;
    font-size: 0.75em;
    background: none;
    cursor: pointer;
}

.why .accordian-container .tab-close:hover {
    background: none;
}
    
.why .accordian-container input:checked + .tab-label {
    background: none;
    color: #fff;
    transition: all 0.35s;
}

.why .accordian-container input:checked + .tab-label:before {
    color: #fff;
    transition: all 0.35s;
}

.why .accordian-container input:checked + .tab-label::before {
    content: "-";
    width: 1em;
    height: 1em;
    text-align: center;
    transition: all 0.35s;
    color: #fff;
}

.accordian-container input:checked ~ .tab-content {
    max-height: 100vh;
    padding: 1em;
}

.padding-container {
    padding: 60px 0;
}

section {
    display: block;
}

.alternate-heading {
    color: #2c0a49;
    text-align:center;
}

.white-bg {
    background-color: #fff;
    margin-bottom: 2rem;
    padding: 25px;
	height: 100%;
}

.grey-bg {
    background-color: #e5e2df;
}
    
a.button {
    text-align:center;
}

.purple-bg {
    background-color: #2c0a49;
}

.green-bg {
    background-color: #38bfae;
}
.frame-green {
  border: none;
  background: #d8f2f0;
  border-radius: 8px;
  padding: 15px;
}
.smes-picture-bg.smes-teams.new-bgs {
    margin-top: 0;
    text-align: center;
    margin-bottom: 35px;
}

.smes-picture-bg .green-bg 
{
    padding: 20px;
    width: 100%;
}

.smes-picture-bg .green-bg h2,
.smes-picture-bg .green-bg p
{
    color: #fff;
}

.smes-arrow {
    position: absolute;
    bottom: -60px;
    left: 0;
    right: 0;
}

.green-bg a.button
{
    color: #fff;
    border-color: #fff;
}

h2 {
    color: #38bfae;
    font-size: 1.87em;
    line-height: 1.2em;
    margin-bottom: 20px;
    font-weight: 500;
}
h3
{
    color: #38bfae;
    font-size: 1.5em;
    line-height: 1.2em;
    margin-bottom: 20px;
    font-weight: 500;
}

h4 {
    color: rgb(77,77,79);
    font-size: 1.1em;
    margin-bottom: 8px;
}

.why-container .why {
    background:  #38bfae;
    text-align: center;
    padding: 35px;
    margin-top: -185px;
    position: absolute;
}

.corona .why {
    position: relative;
    margin-top: 0;
}

.why img {
    margin-bottom: 10px;
    width: 120px;
}

.why-container .columns,
.triangle
{
    position: relative;
}

.triangle:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 45px 50px 0 50px; 
    border-color:  #521780 transparent transparent transparent;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -45px;
    margin: auto;
}

.triangle-green:after {
    border-color: #38bfae transparent transparent transparent;
}

.triangle-grey:after {
    border-color:  #e5e2df transparent transparent transparent;
}

.triangle-white:after {
    border-color:  #fff transparent transparent transparent;
}

.triangle-purple:after {
    border-color:  #2c0a49 transparent transparent transparent;
}

.service-results-container .service-results .result h2 {
    font-family: 'Londrina Outline', cursive;
    font-size: 2.8em;
    margin-bottom: 10px;
    font-weight: 600;
}

.service-results-container .service-results .columns.first {
    border: none;
}
@media only screen and (max-width: 600px) {
  .bannerContainerInnerPages .bannerCustomField {
     margin-top: -150px!important;
  }
}
.bannerContainerInnerPages .bannerCustomField {
    background: url("/cds/image$it-support-durham$20230323111856") no-repeat;
    background-size: cover;
}

.pb-billboardTemplate .subTitle {
    font-size: 1.3vw;
}

.pb-billboardTemplate .subTitle {
    color: #fff;
}

.bannerContainerInnerPages .bannerCustomField .innerContent {
    padding:160px 10px;
    text-align: left;
    
}

.bannerContainerInnerPages .bannerCustomField .innerContent h1 {
    color: #fff;
    font-size: 2.5em;
    font-weight: 400;
    line-height: 1.03;
}

p.subTitle {
    color: #fff;
}
.footer-bg {
  background-image:url("/cds/image$itsupport-footer-bg-2$20230718085805");
  background-position: 0 0;
  margin-top: -320px;
  background-size: cover;
  padding-bottom: 50px;
}

.smes-picture-bg.smes-teams .white-bg img {
    position: relative;
    bottom: auto;
    right: auto;
}
.smes-picture-bg.smes-teams.new-bgs img {
    margin: 20px auto;
    display: block;
}

.footer-inline-links a {
    color: #fff;
}

.footer-inline-links .footer-line {
    height: 20px;
    width: 1px;
    background: #fff;
    display: inline-block;
    margin: 10px 10px 0 10px;
}

@media screen and (min-width: 993px) {
    .intro .border-left {
        padding-left: 40px;
    }
}

@media screen and (max-width: 992px) {
    .border-left {
        border-left: none;
    }
}

.icons-section .grey-background,
.icons-section .grey-bg
{
    padding: 30px;
    background: #f7f6f4;
}

.grey-cog-bg {
    background-image: url('/cds/image$resultsw-bg$20250711110444');
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center right;
}

.grey-cog-bg.grey-cog-bottom {
    background-position: 105% 105%;
    padding-bottom: 65px;
}

/* accordian FAQs */
.accordian-container h2 {
    color: #12ccb5;
    margin-bottom: 30px;
}

.accordian-container input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
    
.accordian-container .tabs {
    overflow: hidden;
}
    
.accordian-container .tab {
    width: 100%;
    overflow: hidden;
    margin-bottom: 15px;
}

.accordian-container .tab-label {
    display: flex;
    justify-content: space-between;
    padding: 1em;
    background: #fff;
    color: #0771c1;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
}

.accordian-container .tab-label:hover {
    background: #2C0A47;
    color: #12ccb5;
}

.accordian-container .tab-label::after {
    content: ">";
    width: 1em;
    height: 1em;
    text-align: center;
    transition: all 0.35s;
    color: #0771c1;
}
.accordian-container .tab-label::before {
    content: none;

}
.accordian-container .tab-label:hover:after {
    color: #12ccb5;
}

.accordian-container .tab-content {
    max-height: 0;
    padding: 0 1em;
    color: #2c3e50;
    background: #efefef;
    transition: all 0.35s;
}

.accordian-container .tab-close {
    display: flex;
    justify-content: flex-end;
    padding: 1em;
    font-size: 0.75em;
    background: #2C0A47;
    cursor: pointer;
}

.accordian-container .tab-close:hover {
    background: #2C0A47;
}
    
.accordian-container input:checked + .tab-label {
    background: #2C0A47;
    color: #12ccb5;
}

.accordian-container input:checked + .tab-label:after {
    color: #12ccb5;
}

.accordian-container input:checked + .tab-label::after {
    transform: rotate(90deg);
}
.accordian-container input:checked + .tab-label::before {
    content:none;
}
.accordian-container input:checked ~ .tab-content {
    max-height: 100vh;
    padding: 1em;
}
.intro-it::before {
  content: url(/cds/image$it-support-intro$20230531105518);
  position: absolute;
  top: -60px;
  left: -75px;
  z-index: 9;
}
/* carousel */

.helped-slider-wrapper {
    background-color: #2c0a49; 
    padding: 60px 0 190px;
}

.helped-slider-wrapper h2 {
    margin-bottom: 30px;
}

.helped-slider-wrapper h3 {
    font-size: 1.3em;
}

.carousel {
    display: block;
    position: relative;
}

.carousel > input {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

.carousel > input:nth-of-type(3):checked ~ .carousel__slides .carousel__slide:first-of-type {
    margin-left: -200%;
}

.carousel > input:nth-of-type(2):checked ~ .carousel__slides .carousel__slide:first-of-type {
    margin-left: -100%;
}

.carousel > input:nth-of-type(1):checked ~ .carousel__slides .carousel__slide:first-of-type {
    margin-left: 0%;
}

.carousel__slides {
    position: relative;
    z-index: 1;
    padding: 0;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    display: flex;
}

.carousel__slide {
    position: relative;
    display: block;
    flex: 1 0 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: all 300ms ease-out;
    box-sizing: border-box;
    white-space: normal;
    margin: 0;
}


@keyframes autoplay {
    0% {
        margin-left: -0%;
    }

    25% {
        margin-left: -0%;
    }

    30% {
        margin-left: -100%;
    }

    55% {
        margin-left: -100%;
    }

    60% {
        margin-left: -200%;
    }

    85% {
        margin-left: -200%;
    }

    100% {
        margin-left: -0%;
    }
}

.carousel > input:nth-of-type(1):checked ~ .carousel__slides .carousel__slide:first-of-type {
    animation-name: autoplay;
    animation-timing-function: ease;
    animation-duration: 15s;
    animation-iteration-count: infinite;
}

@keyframes autoplay-label-1 {
    0% {
        background: #008F7C;
    }

    25% {
        background: #008F7C;
    }

    30% {
        background: #000;
    }

    55% {
        background: #000;
    }

    60% {
        background: #000;
    }

    85% {
        background: #000;
    }

    100% {
        background: #008F7C;
    }
}

.carousel > input:nth-of-type(1):checked ~ .carousel__buttons li:nth-of-type(1) label {
    animation-name: autoplay-label-1;
    animation-timing-function: ease;
    animation-duration: 15s;
    animation-iteration-count: infinite;
}

@keyframes autoplay-label-2 {
    0% {
        background: #000;
    }

    25% {
        background: #000;
    }

    30% {
        background: #008F7C;
    }

    55% {
        background: #008F7C;
    }

    60% {
        background: #000;
    }

    85% {
        background: #000;
    }

    100% {
        background: #000;
    }
}

.carousel > input:nth-of-type(1):checked ~ .carousel__buttons li:nth-of-type(2) label {
    animation-name: autoplay-label-2;
    animation-timing-function: ease;
    animation-duration: 15s;
    animation-iteration-count: infinite;
}

@keyframes autoplay-label-3 {
    0% {
        background: #000;
    }

    25% {
        background: #000;
    }

    30% {
        background: #000;
    }

    55% {
        background: #000;
    }

    60% {
        background: #008F7C;
    }

    85% {
        background: #008F7C;
    }

    100% {
        background: #000;
    }
}

.carousel > input:nth-of-type(1):checked ~ .carousel__buttons li:nth-of-type(3) label {
    animation-name: autoplay-label-3;
    animation-timing-function: ease;
    animation-duration: 15s;
    animation-iteration-count: infinite;
}

.carousel__slide.scrollable {
    overflow-y: scroll;
}

.carousel__buttons {
    list-style: none;
    padding: 0;
    margin: auto;
    display: block;
    text-align: center;
}

.carousel__slides + .carousel__buttons {
    margin-top: 10px;
}

.carousel__buttons li {
    display: inline-block;
    margin: 0 10px;
    transition: all 300ms ease-in-out;
}

.carousel__buttons label {
    display: block;
    position: relative;
    background: #000;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    cursor: pointer;
}

.carousel > input:nth-of-type(1):checked ~ .carousel__buttons li:nth-of-type(1) label, 
.carousel > input:nth-of-type(2):checked ~ .carousel__buttons li:nth-of-type(2) label,
.carousel > input:nth-of-type(3):checked ~ .carousel__buttons li:nth-of-type(3) label,
.carousel__buttons label:hover,
.carousel__buttons label:focus 
{
    background: #008F7C;
}

.carousel .button-prev label:before,
.carousel .button-next label:before
{ 
    content: "\f060";
    display: block;
    color: #12ccb5;
    font-family: 'Font Awesome 5 Pro';
    font-size: 35px;
    position: absolute;
    left: -70px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.carousel .button-next label:before {
    content: "\f061";
    left: auto;
    right: -70px;
}

.carousel .button-prev:hover label:before,
.carousel .button-next:hover label:before
{
    color: #fff;
}

@media screen and (max-width: 576px) {
    .carousel .button-prev,
    .carousel .button-next
    {
        display: none;
    }
}

.carousel .button-prev,
.carousel .button-next 
{
    display: none;
}

/*
.carousel > input:nth-of-type(1):checked ~ .button-prev.slide-3-label,
.carousel > input:nth-of-type(1):checked ~ .button-next.slide-2-label
{
    display: block;
}

.carousel > input:nth-of-type(2):checked ~ .button-prev.slide-1-label,
.carousel > input:nth-of-type(2):checked ~ .button-next.slide-3-label
{
    display: block;
}

.carousel > input:nth-of-type(3):checked ~ .button-prev.slide-2-label,
.carousel > input:nth-of-type(3):checked ~ .button-next.slide-1-label
{
    display: block;
}
*/

img{
	aspect-ratio: attr(width) / attr(height);
	max-width: 100%;
	height: auto;
}
/* Site Form Styles */
.standardSiteForm {
    background-color: rgb(44, 10, 73);
    padding: 30px 35px;
}
.standardSiteForm label {
    color: rgb(255, 255, 255);
    font-size: inherit;
    font-weight: 400;
	display: block;
	margin-bottom: .5rem;
}
.gf__recaptcha-badge-alt {
	color:#fff!important;
	padding:20px 0;
}

/* Footer - Location - Style */

.footer-bg .purple-bg h6 {
    color: #12ccb5;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
}

.footer-bg .purple-bg .green-line {
    display: inline-block;
    width: 69%;
    vertical-align: middle;
}

.footer-bg  .purple-bg hr {
    border-color: #12ccb5;
    display: inline-block;
    margin: 1em 0;
    height: 2px;
    width: 100%;
}
.footer-bg .purple-bg {
    padding: 20px;
    color: #fff;
    width: 54%;
}
.footer-bg .purple-bg ul {
    padding: 0;
    margin: 0 0 10px 0;
    list-style-type: none;
}
/*.page-wrapper ul {
color:#fff;
list-style:none;
}
.page-wrapper li {
color:#fff;
}*/
.page-wrapper .tabs-overlap .tabs-content .text-left ul li {
  position: relative;
  margin-bottom: 20px;
  font-size: 0.9em;
  padding-left: 30px;
color:#2c0a49;
}
.tabs-overlap .tabs-content .text-left ul li::before {
  content: "";
  background: url(//marketplace.probrand.co.uk/cds/image$tabs-ticked-purple$20230515131124);
  height: 23px;
  width: 23px;
  display: block;
  position: absolute;
  left: -5px;
  top: 0;
}
.tabs-ticked ul li::before {
  content: "";
  background: url(//marketplace.probrand.co.uk/cds/image$tabs-ticked-purple$20230515131124);
  height: 23px;
  width: 23px;
  display: block;
  position: absolute;
  left: -5px;
  top: 0;
}
.footer-bg .purple-bg li {
    margin: 5px 0;
    padding: 0;
    color: #fff;
}
.footer-bg .purple-bg {
  padding: 20px;
  color: #fff;
  width: 54%;
}
.p-light {
    color: #ab9db6 !important;
}

 .media-object.white-bg {
     overflow: hidden;
 }
.smes-footer {
  background-image: url(/cds/image$it-support-durham-footer$20230324225123);
background-size: cover;
margin-top: -40px;
padding-top: 20px;
}
.cyber-block-link {
margin:30px 0; 
background: #3d0c98; 
padding: 30px; 
border-radius: 15px;
}
.budget-block-link {
margin:30px 0; 
background: #178b7e; 
padding: 30px; 
border-radius: 15px;
}
.cloud-block-link {
margin:30px 0; 
background: #195ba6; 
padding: 30px; 
border-radius: 15px;
}
.cloud-block-link  h3,
.budget-block-link  h3,
.cyber-block-link h3 {
color:#fff!important;
font-size:1.5rem;
}
.cloud-block-link  p,
.budget-block-link p,
.cyber-block-link p {
color:#fff!important;
}
.budget-block-link a.button.new {
color:#00AC95!important;
background:#fff;
border:#00AC95;
padding: 15px; 
margin-top:20px;
border-radius: 5px;
}

.cloud-block-link a.button.new,
.cyber-block-link a.button.new {
color:#fff;
background:#00AC95!important;
border:#00AC95;
padding: 15px; 
margin-top:20px;
border-radius: 5px;
}
.green-arrow-button {
background: #00ac96;
  border-radius: 5px;
  color: #fff!important;
  padding: 20px;
}
.green-arrow-button img {
max-width:20px;
margin-left:20px;
}