/**** COLOURS ****/
/* 

*/

/* RESETS */
html {font-size: 62.5%;}
body {background-color: #1C1D38; color: #1B1D3A; font-family: museo-sans, sans-serif; font-size: 1.5rem; line-height: 1.5em; font-weight: 300; overflow-x: hidden;}
body.home { padding-top: 120px;}
* {margin: 0px; padding: 0px;}
a {text-decoration: none; color: #1B1D3A;}
a:hover {text-decoration: none; cursor: pointer!important; color: #000;}
ul, ol {margin: 0; list-style-type: none; padding-left: 0;}
li {list-style-type: none; }
.skip-link {display: none;}
.menu-scroll-down {display: none;}
img {border: none;}
p {margin-bottom: 2rem;}
.btn {border-radius: 0; font-family: museo-sans-rounded;}
h1 {font-family: museo-sans-rounded; font-weight: bold;}
h2 {font-size: 3rem; line-height: 3.6rem; font-weight: bold; font-family: museo-sans-rounded;}
/* RESETS */

.yellow {color: #F2E500;}

header {padding: 0 0 0 0; margin: 0 0 -96px 0; position: fixed; z-index: 100; width: 100%; background-color: rgba(27,29,58,1.00);}
.home header {padding: 0 0 15px 0; margin: 0 0 -96px 0; position: fixed; z-index: 100; width: 100%; background-color: rgba(27,29,58,0); transition: padding 0.2s ease; transition: background-color 0.2s ease; top: 0; left: 0; width: 100%;}
.home.header-not-at-top  header {padding: 0 0 0 0; background-color: rgba(27,29,58,1.00);  transition: padding 0.2s ease; transition: background-color 0.2s ease;}
.logo img {width: auto; height: 30px ; transition: width 0.2s ease;}
/*.home .logo img {width: 320px; height: auto; transition: width 0.2s ease;}
.home.header-not-at-top  header .logo img {width: 210px; height: auto; transition: width 0.2s ease;}*/
a.telephone, a.menu-telephone {color: #F2E500; font-weight: 500; font-size: 2rem;}
a.telephone:hover, a.menu-telephone:hover {color: #fff;}
.main-menu .phone-link {margin-top: 30px;}
.menu-open { background-image: url("/wp-content/themes/bit-solutions/images/menu.svg"); background-repeat: no-repeat; width: 27px; height: 20px; background-size: 100% 100%; background-color: transparent; border: none; position: relative; top: 5px; margin: 0 0 0 20px; display: none;}
.menu-open .menu-text {position: absolute; top: -999em;}
.menu-open:hover {background-image: url("/wp-content/themes/bit-solutions/images/menu-white.svg");}



    

.solutions-menu {background-color: /*#F2E500*/rgba(27,29,58,1.00); padding: 1.4rem 0; /*margin: 15px 0 0 0;*/}
.home .solutions-menu {background-color: /*#F2E500*/rgba(27,29,58,1.00); padding: 1.4rem 0; margin: 0 0 0 0; transition: margin 0.2s ease;}
.home.header-not-at-top .solutions-menu {margin: 0 0 0 0; transition: margin 0.2s ease;}
.solutions-menu #menu-solutions-menu {text-align: right; padding-top: 7px;}
.solutions-menu #menu-solutions-menu li {display: inline-block; margin-left: 20px;}
.solutions-menu #menu-solutions-menu li a {display: block; padding-bottom: 3px; position: relative; color:#fff;}

.solutions-menu #menu-solutions-menu li a:after {content: ""; display: block; width: 100%; height: 1px; background-color: rgba(27,29,58,1.00);  -webkit-transform: scaleX(0); transform: scaleX(0);  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;}
.solutions-menu #menu-solutions-menu li a:hover:after {width: 100%;  -webkit-transform: scaleX(1); transform: scaleX(1);  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;}

.solutions-menu #menu-solutions-menu li.active a:after {width: 100%;  -webkit-transform: scaleX(1); transform: scaleX(1);  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;}

.main-menu {width: 100%; height: 100%; position: fixed; top: 10px; left: 101%; z-index: 500; background-color: rgba(27,29,58,1.00); transition: left 0.2s ease; overflow-y: scroll; padding: 15px 0 0 0;}


/*.home .main-menu {padding: 50px 0 15px 0;}*/
.home.header-not-at-top .main-menu {padding: 15px 0 15px 0;}
.menu-close {font-size: 3rem; line-height: 3rem; background-color: transparent; border: none; position: relative; top: 3px; margin: 0 0 0 20px; color: #F2E500; }
.menu-close:hover {color: #fff;}
.menu-close .menu-text {position: absolute; top: -999em;}

.main-mobile-navigation #menu-main-menu {padding-top: 50px;}
.main-mobile-navigation #menu-main-menu li { display: block;}
.main-mobile-navigation #menu-main-menu li a {color: #fff; font-size: 2rem; line-height: 2.6rem; padding: 10px; border-top: solid 1px rgba(255,255,255,0.05); display: block;}
.main-mobile-navigation #menu-main-menu li a:hover {color: #F2E500;}
.main-mobile-navigation #menu-main-menu li:nth-of-type(1) a {border-top: solid 1px rgba(255,255,255,0.05);}

.main-mobile-navigation {display: none;}

#page-header .top-menu-holder {background-color: #F2E500; padding: 1.4rem 0;}

#page-header .top-menu-holder .menu-item-96 a {color: #fff; background-color: rgba(27,29,58,1.00); padding: 5px;}
#page-header .top-menu-holder .menu-item-96 a:hover {background-color: rgba(27,29,58,0.6);}

#page-header #menu-main-menu li {display: inline-block; margin-left: 20px;}
#page-header #menu-main-menu li a {display: inline-block; padding-bottom: 3px; position: relative;}


#page-footer {color: #fff; padding: 0;}
#page-footer a {color: #fff;}
#page-footer a:hover {color: #F2E500;}

#page-footer .social-media {font-size: 3rem; line-height: 3.6rem;}
#page-footer .social-media h2 {font-size: 3rem; line-height: 3.6rem; font-weight: 700; margin: 0 0 1rem 0;}

#page-footer .social-media a[href="https://www.youtube.com/channel/UCgZF502tQC14vHIDjlKNKIg"] {display: none;}

#page-footer .contact p:nth-of-type(1) {font-size: 2rem; line-height: 2.4rem;}
#page-footer .contact p:nth-of-type(1) a {font-weight: 700; display: inline-block; margin: 0 5px;}

#page-footer #menu-footer-navigation {margin: 0 0 2rem 0;}
#page-footer #menu-footer-navigation li {display: inline-block;}
#page-footer #menu-footer-navigation li a {font-size: 2rem; line-height: 2.4rem;}

#page-footer #menu-legal-menu {margin: 0 0 0 0;}
#page-footer #menu-legal-menu li {display: inline-block;}
#page-footer #menu-legal-menu li a {}

#page-footer .upper-footer {padding: 20px 0;}
#page-footer .lower-footer {padding: 20px 0; background-color: #fff; color: #1C1D38; font-size: 1.2rem; line-height: 1.5rem;}
#page-footer .lower-footer p {margin: 0 0 10px 0;}
#page-footer .lower-footer p span {display: block;}

#page-footer .lower-footer a {color: #1C1D38;}
#page-footer .lower-footer .menu a {font-weight: bold; text-decoration: underline;}
#page-footer .lower-footer .menu li {display: inline-block; margin: 0 0 0 10px;}
#page-footer .lower-footer .menu li:nth-of-type(1) {margin: 0;}

#page-footer .accreditations img {display: inline-block; width: 45%; height: auto; margin-left: 5%;}


.mobile-menu {display: none;}
.img-fluid {width: 100%;}
.page-start {background-color: #fff;}
.page-start section {padding: 50px 0; }





.hero-panel img.curve {position: absolute; bottom: 0; left: 0; width: 100%; height: auto;/* filter: invert(83%) sepia(90%) saturate(1816%) hue-rotate(350deg) brightness(92%) contrast(106%);*/}
.hero-panel .overlay {position: absolute; top: 50%; left: 0; width: 100%; text-align: center;  transform:translateY(-50%); }
.hero-panel .overlay h1 {font-size: 5.5rem; line-height: 6.5rem; font-weight: 700; color: #fff; font-family: museo-sans-rounded;}
.hero-panel .overlay h1 strong {color: #F2E500; display: block;}
.hero-panel .hero-cta {position: absolute; left: 0; bottom: 50px; width: 100%; color: #fff; width: 100%; text-align: center;}
.hero-panel .hero-cta i {font-size: 3rem; color: #1B1D3A; position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); }
.hero-panel .hero-cta span {padding: 6px; border-radius: 50%; width: 50px; height: 50px; box-sizing: border-box; background-color: rgba(255,255,255,1); display: inline-block; transition: background-color 0.5s ease;  position: relative; transition: transform .5s; transform: translateY(0px) scale(1); margin-top: 20px;}
.hero-panel:hover .hero-cta span { position: relative; top: 10px; left: 0; background-color: rgba(255,255,255,0.5);transition: background-color 0.5s ease; transform: translateY(0px) scale(2); transition: transform .5s;}

     .hero-panel .video-tint {content: ""; display: block; width: 100%; height: 100%; background-color: rgba(27,29,58,0.5); position: absolute; top: 0; left: 0;}

.hero-panel .hero-cta .launch-video {font-size: 2rem; color: #fff; text-align: center; display: inline-block; border: solid 2px #fff; padding: 6px 15px; border-radius: 19px; background-color: rgba(240,228,0,0); transition: background-color 0.2s ease; transition: color 0.2s ease;}
.hero-panel .hero-cta .launch-video:hover {background-color: rgba(240,228,0,1.00); color: #1B1D3A; transition: background-color 0.2s ease; transition: color 0.2s ease;}
.hero-panel .hero-cta .launch-video:after {display: none!important;}

.page-start section.introduction {padding: 50px 0 100px 0; background-color: #F2E500; margin-bottom: -50px; color: #1B1D3A; font-size: 2rem; line-height: 2.5rem; text-align: center;}
.introduction h1 {font-size: 3rem; line-height: 3.6rem; font-weight: 700; margin: 0 0 2rem 0;}

.page-start section.solutions {padding: 0;}
.solutions .solutions-heading {padding: 45px 0 45px 7.3%;}
.solutions-content {background-color: #1B1D3A; padding: 50px 0; background-image: /*url("/wp-content/themes/bit-solutions/images/Ipad-man.png")*/none,  url("/wp-content/themes/bit-solutions/images/bs-yellow.svg"); background-repeat: no-repeat; background-size: 45%, 45%; background-position: left bottom, left -70% bottom 10%;}
.solutions-content h2 {font-size: 4rem; line-height: 4.8rem; color: #fff; font-weight: 700; margin: 0 0 0.5rem 0;}
.solutions-content h3 {font-size: 3rem; line-height: 3.6rem; color: #F2E500; font-weight: 700;font-family: museo-sans-rounded;}

.solution  {text-align: center; margin-bottom: 50px;}

.solution .icon-holder {width: 40%; margin: 0 auto; /*max-width: 150px;*/}
.solution .icon-holder img {width: 100%; height: auto;}
.solution h3 {font-size: 2.6rem; color: #fff; text-align: center; margin: 15px 0 30px 0;font-family: museo-sans-rounded;}
.solution a {font-size: 2rem; color: #fff; text-align: center; display: inline-block; border: solid 2px #fff; padding: 6px 15px; border-radius: 19px; background-color: rgba(240,228,0,0); transition: background-color 0.2s ease; transition: color 0.2s ease;}
.solution a:hover {background-color: rgba(240,228,0,1.00); color: #1B1D3A; transition: background-color 0.2s ease; transition: color 0.2s ease;}

.who-we-help h2 {font-size: 3rem; line-height: 3.6rem; color: #1B1D3A; font-weight: 700; margin: 0 0 2rem 0;}

.page-start section.testimonials {background-color: #F2E500; padding: 100px 0 50px 0; background-image: url("/wp-content/themes/bit-solutions/images/right-flick.svg"), url("/wp-content/themes/bit-solutions/images/left-flick.svg"), url("/wp-content/themes/bit-solutions/images/left-flick-2.svg");  background-position:  top -150px right -200px, /* this positions the first image */ top -40px left, bottom -40px left -70px;
  background-repeat: no-repeat; /* this applies to both images */}
.testimonial-header {position: relative; top: -125px; margin-bottom: -75px;}
.testimonial-header h2 {font-size: 3rem; line-height: 3.6rem; color: #fff; font-weight: 700; background-color: #1B1D3A; padding: 10px; width: auto; display: inline-block;}

.testimonials .slider ul li {display: block; float: left; background-color: #F2E500;}
.slider-tools {text-align: center; margin: 20px 0 0 0;}
.testimonials .slider ul li img {width: 100%; height: auto;}
.slider-tools .prev, .slider-tools .next {display: none;}
#testimonialsPagination {display: block; text-align: center}
#testimonialsPagination a {display: inline-block; width: 18px; height: 18px; border: solid 1px #1B1D3A; background-color: #1B1D3A; overflow: hidden; margin: 0 2px; border-radius: 50%;}
#testimonialsPagination a span {display: block; position: absolute; top: -999em;}
#testimonialsPagination a.selected {background-color: transparent; }

.testimonials .slider ul li p.quote {padding-top: 70px; font-size: 2rem; line-height: 2.6rem; background-image: url("/wp-content/themes/bit-solutions/images/quotes.svg"); background-repeat: no-repeat; background-size: 50px;}
.testimonials .slider ul li p.quote:after {content:""; display: block; background-image: url("/wp-content/themes/bit-solutions/images/quotes.svg"); background-repeat: no-repeat; background-size: 50px; height: 70px; width: 100%;   transform: rotate(180deg);}
.testimonials .slider ul li p.name strong {display: block;}






.gradient {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#67687a+40,67687a+40,67687a+100&0.2+0,0+100 */
background: -moz-linear-gradient(top,  rgba(103,104,122,0.2) 0%, rgba(103,104,122,0.2) 55%, rgba(103,104,122,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(103,104,122,0.2) 0%,rgba(103,104,122,0.2) 55%,rgba(103,104,122,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(103,104,122,0.2) 0%,rgba(103,104,122,0.2) 55%,rgba(103,104,122,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3367687a', endColorstr='#0067687a',GradientType=0 ); /* IE6-9 */}
.insights {color: #fff; position: relative; }
.insights:before {content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 55%; background-color: #1B1D3A;}

.insights .container {position: relative; z-index: 2;}
.insights h2 {font-size: 3rem; line-height: 3.6rem; color: #fff; font-weight: 700; margin: 0 0 2rem 0;}
.insights .post-thumbnail {margin: 0 0 1rem 0; background-color: rgba(27,29,58,1.00);}
.insights .post-thumbnail img {width: 100%; height: auto; opacity: 1;  transition: opacity 0.2s ease;}
.insights a:hover .post-thumbnail img {opacity: 0.7;  transition: opacity 0.2s ease;}
.insights .blog-heading {font-size: 2rem; line-height: 2.4rem; color: rgba(27,29,58,1.00); margin:0 0 2rem 0; text-transform: uppercase; font-weight: 700; font-family: museo-sans-rounded; transition: color 0.2s ease;}
.insights a:hover .blog-heading {color: rgba(27,29,58,0.7);transition: color 0.2s ease;}

.page-start section.talk-to-us {font-size: 2rem; line-height: 2.4rem; /*background-image: url("/wp-content/themes/bit-solutions/images/team.png"); background-repeat: no-repeat; background-size: 56%; background-position: bottom right -1%; padding: 200px 0 50px 0;*/}



.talk-to-us h2 {font-size: 3rem; line-height: 3.6rem; color: #1B1D3A; font-weight: 700; margin: 0 0 2rem 0;}

.talk-to-us a {font-size: 2rem; color: #1B1D3A; text-align: center; display: inline-block; border: solid 2px #1B1D3A; padding: 6px 15px; border-radius: 19px; transition: background-color 0.2s ease; transition: color 0.2s ease;}
.talk-to-us a:hover {cursor: pointer; background-color: rgba(27,29,58,1.00); color:#fff ; transition: background-color 0.2s ease; transition: color 0.2s ease;}

.page-start section.talk-to-us .ttu-content-holder {position: relative;}
.page-start section.talk-to-us .ttu-content-holder  .image-box {width: 75%; margin-left: 25%;}
.page-start section.talk-to-us .ttu-content-holder  .image-box img {display: block; width: 100%; height: auto;}
.page-start section.talk-to-us .ttu-content-holder  .yellow-box {width: 50%; height: auto; color: #1B1D3A; background-color: #F2E500; position: absolute; left: 0; top: 50%; transform: translateY(-50%); padding: 30px 90px 50px 90px;}


/* SOLUTION TEMPLATE */

.page-start {padding-top: 110px;}
.home .page-start {padding-top: 0;}
.page-template-page-template-solution .intro {background-color: #F2E500; position: relative; padding: 0;}
.page-template-page-template-solution .intro h1 {font-size: 3rem; line-height: 3.4rem; margin: 0 0 20px 0;}
.page-template-page-template-solution .intro .underlay {position: relative; z-index: 1;}
.page-template-page-template-solution .intro .underlay img {width: 100%; height: auto; display: block;}
.page-template-page-template-solution .intro .overlay {position: absolute; top: 0; left: 0; width: 100%; z-index: 2; height: 100%;}

.page-template-page-template-solution .intro .overlay .g-5 {--bs-gutter-y: 0;}

.page-template-page-template-solution .intro .container {position: relative; height: 100%;}
.page-template-page-template-solution .intro .container .row, .page-template-page-template-solution .intro .container .col-12 {height: 100%;}

.page-template-page-template-solution .intro .overlay .text-holder-outer {position: relative; width: 100%; height: 100%; top: 0; left: 0; }
.page-template-page-template-solution .intro .overlay .text-holder-inner {position: absolute; top: 50%; left: 0; width: 100%; transform:translateY(-50%); padding-right: 3rem; box-sizing: border-box; padding-right: 25%;}

.page-template-page-template-solution .intro .overlay img {display: none;}

.page-template-page-template-solution .highlight {background-color: #fff; padding: 0 0 50px 0; text-align: center;}
/*.page-template-page-template-solution .highlight:nth-of-type(odd) {background-color: #E8E8EB;}*/
.page-template-page-template-solution .highlight h2 {font-size: 2.5rem; line-height: 3rem; margin-bottom: 2rem;}
.page-template-page-template-solution .highlight .image-holder {width: 156px; height: 156px; border-radius: 50%; background-color: #1B1D3A; margin: 0 auto 20px auto; overflow: hidden; position: relative;}
.page-template-page-template-solution .highlight img {display: block; width: 140%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

.white-back {background-color: #fff;}

.page-template-page-template-whoweare {}
.page-template-page-template-whoweare .intro {text-align: center; padding: 90px 0 60px 0;  font-size: 3rem; line-height: 3.6rem; text-align: center; font-weight: bold;font-family: museo-sans-rounded;}
.page-template-page-template-whoweare .intro h1 {font-size: 1.5rem; text-transform: uppercase; text-align: center; margin: 0 0 2rem 0;}
.page-template-page-template-whoweare .intro p {margin-bottom: 60px;}



.page-template-page-template-whoweare .intro img {width: 100%; height: auto;}

.page-template-page-template-whoweare .key-person {margin: 0 0 20px 0; position: relative; overflow: hidden;}
.page-template-page-template-whoweare .key-person img {display: block; width: 100%; height: auto; /*margin: 0 0 10px 0;*/}





.callout {font-size: 2rem; line-heoght: 2.4rem; margin-bottom: 2.4rem;}

.btn {font-size: 1.75rem; padding: 5px 10px; border: solid 2px #000; border-radius: 20px; transition: background-color 0.2s ease; transition: color 0.2s ease;}
.btn:hover {cursor: pointer; background-color: rgba(27,29,58,1.00); color:#fff ; transition: background-color 0.2s ease; transition: color 0.2s ease;}

.page-template-page-template-whoweare .section-2 {background-color: #F2E500; padding: 0;}
.page-template-page-template-whoweare .section-2 img {width: 100%; height: auto;}

.page-template-page-template-whoweare .section-2 .copy-holder-outer {position: relative; height: 100%;}

.page-template-page-template-whoweare .section-2 {position: relative; padding: 0; margin: 50px 0 100px 0; background-color: #F2E500;}
.page-template-page-template-whoweare .section-2 .lower-content {}
.page-template-page-template-whoweare .section-2 .lower-content img {display: block; width: 100%; height: auto;}
.page-template-page-template-whoweare .section-2 .upper-content {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2;}
.page-template-page-template-whoweare .section-2 .upper-content img {display: none;}
.page-template-page-template-whoweare .section-2 .upper-content .container {position: relative; height: 100%;}
.page-template-page-template-whoweare .section-2 .upper-content .copy-holder-outer {position: absolute; width: 50%; height: 100%; top: 0; left: 50%;}
.page-template-page-template-whoweare .section-2 .upper-content .copy-holder-inner {position: absolute; top: 50%; left: 0;  transform:translateY(-50%); width: 100%; padding-left: 50px; box-sizing: border-box; }

.page-template-page-template-whoweare .section-2 .upper-content .copy-holder-inner h2 {font-size: 3rem; line-height: 3.6rem; font-weight: bold;}

.page-template-page-template-whoweare .partners {background-color: #E8E9ED;}
.page-template-page-template-whoweare .partners h2 {margin: 0 0 20px 0;}
.page-template-page-template-whoweare .partners-list {}
.page-template-page-template-whoweare .partners-list ul:after {content: ""; display: table; clear: both;}
.page-template-page-template-whoweare .partners-list ul li {display: block; width: 33%; float: left; padding-right: 30px;}
.page-template-page-template-whoweare .partners-list ul li img {display: block; width: 100%; height: auto;}
.page-template-page-template-whoweare .partners-list ul li img:nth-of-type(1) {margin: 0 0 20px 0;}

#partnersPagination {display: block; text-align: center; margin: 20px 0 0 0;}
#partnersPagination a {display: inline-block; width: 18px; height: 18px; border: solid 1px #1B1D3A; background-color: #1B1D3A; overflow: hidden; margin: 0 2px; border-radius: 50%;}
#partnersPagination a span {display: block; position: absolute; top: -999em;}
#partnersPagination a.selected {background-color: transparent; }



.page-template-page-template-values .item img {width: 100%; height: auto;}
.page-template-page-template-values .blue-panel-content {background-color: rgba(27,29,58,1.00); padding: 60px 100px; color: #fff;}

.page-template-page-template-values .intro {padding: 90px 0 30px 0; font-size: 3rem; line-height: 3.6rem; text-align: center; font-weight: bold;font-family: museo-sans-rounded;}
.page-template-page-template-values .intro h1  {font-size: 1.5rem; text-align: center; text-transform: uppercase;}
.page-template-page-template-values .gradient {/*padding-top: 100px;*/}

.page-template-page-template-values .split-section {position: relative; padding: 0; margin: 50px 0 100px 0; background-color: #F2E500;}
.page-template-page-template-values .split-section .lower-content {}
.page-template-page-template-values .split-section .lower-content img {display: block; width: 100%; height: auto;}
.page-template-page-template-values .split-section .upper-content {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2;}
.page-template-page-template-values .split-section .upper-content img {display: none;}
.page-template-page-template-values .split-section .upper-content .container {position: relative; height: 100%;}
.page-template-page-template-values .split-section .upper-content .content-holder {position: absolute; width: 50%; height: 100%; top: 0; left: 50%;}
.page-template-page-template-values .split-section .upper-content .content-position {position: absolute; top: 50%; left: 0;  transform:translateY(-50%); width: 100%; padding-left: 50px; box-sizing: border-box; }

.page-template-page-template-values .split-section .upper-content .content-position h2 {font-size: 3rem; line-height: 3.6rem; font-weight: bold;}



.page-template-page-template-team {}
.page-template-page-template-team .team-member {margin: 0 0 20px 0; position: relative; overflow: hidden;}
.page-template-page-template-team .team-member img {width: 100%; height: auto; /*margin: 0 0 10px 0;*/}

.page-template-page-template-team .team-member-holder .col-12 {display: none;}


.page-template-page-template-team .intro {padding: 90px 0 30px 0; font-size: 3rem; line-height: 3.6rem; text-align: center; font-weight: bold;font-family: museo-sans-rounded;}
.page-template-page-template-team .intro h1  {font-size: 1.5rem; text-align: center; text-transform: uppercase;}
.page-template-page-template-team .join h2  {font-size: 2rem; margin: 0 0 2rem 0;}

.page-template-page-template-team .job-vacancies {}
.page-template-page-template-team .job-vacancies a {font-weight: bold; display: block; position: relative; padding: 10px 0 10px 42px;}
.page-template-page-template-team .job-vacancies a:before {content: ""; background-image:url("/wp-content/themes/bit-solutions/images/pdf-icon.svg"); background-repeat: no-repeat; width: 36px; height: 46px; display: inline-block; position: absolute; top: 0; left: 0;}


/*
.page-template-page-template-team .page-start {
    background-image: url("/wp-content/themes/bit-solutions/images/right-flick.svg"), url("/wp-content/themes/bit-solutions/images/left-flick.svg"), url("/wp-content/themes/bit-solutions/images/left-flick-2.svg");
    background-position: top -150px right -200px, /* this positions the first image */ /*top -40px left, bottom -40px left -70px;
    background-repeat: no-repeat;
}
*/

.blog {}
.archive {}

.blog .intro, .archive .intro {padding-bottom: 0;}
.blog .articles, .archive .articles {padding-top: 0;}

.post-link, .project-link {margin: 0 0 50px 0; display: block;}
.thumbnail-holder {margin: 0 0 20px 0;}
.thumbnail-holder img {width: 100%; height: auto;}
.excerpt p {margin-bottom: 1rem;}

.blog .paginantion {}
.blog .pagination a {display: block; overflow: hidden; font-size: 3rem;}
.blog .pagination span {width: 0; height: 0; color: transparent; position: absolute; top: -999em;}

.blog .thumbnail-holder {margin: 0 0 1rem 0; background-color: rgba(27,29,58,1.00);}
.blog .thumbnail-holder img {width: 100%; height: auto; opacity: 1;  transition: opacity 0.2s ease;}
.blog a:hover .thumbnail-holder img {opacity: 0.7;  transition: opacity 0.2s ease;}
.blog h2 {color: rgba(27,29,58,1.00); transition: color 0.2s ease;}
.blog a:hover h2 {color: rgba(27,29,58,0.7);transition: color 0.2s ease;}

.filter {font-size: 2rem; font-weight: bold; text-align: center; padding-bottom: 30px;}
#categories-2 { display: inline-block;}
#categories-2 h2 {display: none;}
.filter ul {display: inline-block;}
.filter ul li {display: inline-block; padding: 0 5px;}


#text-4 {padding: 90px 0 30px 0; font-size: 3rem; line-height: 3.6rem; text-align: center; font-weight: bold;}
#text-4 h2  {font-size: 1.5rem; text-align: center; text-transform: uppercase;}

.single .article-categories {font-size: 2rem; font-weight: bold; text-align: center; margin-top: 8rem;}
.single .article-categories ul {display: inline-block;}
.single .article-categories ul li {display: inline-block;}



.single h1 {text-align: center; font-size: 5.5rem; font-weight: bold; margin: 7rem 0 6.5rem 0;}

.single .article-content {padding: 50px 50px 100px 50px; background-color: #fff; min-height: 300px;}
.single .article-content p:nth-of-type(1) em {font-size: 2rem; line-height: 2.5rem; font-style:normal; font-weight: bold;}
.single .article-content img {max-width: 100%; height: auto;}
.single .article-content ul {margin: 0 0 20px 20px; list-style-type:disc;}
.single .article-content ul li {list-style-type:disc;  margin: 0 0 10px 0;}
.single .article-content ol {margin: 0 0 20px 24px; list-style-type:decimal;}
.single .article-content ol li {list-style-type:decimal; margin: 0 0 10px 0;}
.single .article-content ol li ol {list-style-type:lower-alpha;}
.single .article-content ol li ol li {list-style-type:lower-alpha; margin: 0 0 10px 0;}

.single .article-content img {width: 75%; height: auto;}

.single .article-content blockquote {font-style: italic; font-size: 1.8rem; line-height: 2.4rem; max-width: 75%; padding: 10px 25px 30px 25px; position: relative;}
.single .article-content blockquote:before {content: "\f10d"; display: block; position: absolute; left: 0; top: 15px; font-size: 1.5rem; line-height: 1.5rem;    font-family: "Font Awesome 5 Free"; font-weight: 900;}
.single .article-content blockquote:after {content: "\f10e"; font-size: 1.5rem; line-height: 1.5rem; font-family: "Font Awesome 5 Free"; font-weight: 900; margin: 0 0 0 5px;}
.single .article-content blockquote p {display: inline;}


.single .related-posts { border-top: solid 1px rgba(27,29,58,1.00);}
.single .related-posts h2 {padding: 4rem 0 3rem 0;font-size: 3rem; font-weight: bold; text-align: center;}
.single .related-posts .thumbnail-holder {margin: 0 0 1rem 0; background-color: rgba(27,29,58,1.00);}
.single .related-posts .thumbnail-holder img {width: 100%; height: auto; opacity: 1;  transition: opacity 0.2s ease;}
.single .related-posts a:hover .thumbnail-holder img {opacity: 0.7;  transition: opacity 0.2s ease;}
.single .related-posts h3 {color: rgba(27,29,58,1.00); transition: color 0.2s ease;     font-size: 3rem;
    line-height: 3.6rem;}
.single .related-posts a:hover h3 {color: rgba(27,29,58,0.7);transition: color 0.2s ease;}


.page-template-page-template-project .intro {padding: 90px 0 30px 0; font-size: 3rem; line-height: 3.6rem; text-align: center; font-weight: bold;}
.page-template-page-template-project .intro h1  {font-size: 1.5rem; text-align: center; text-transform: uppercase;}

.single-project .article-content ul {margin: 0 0 20px 20px; list-style-type:disc;}
.single-project .article-content ul li {list-style-type:disc;}
.single-project .article-content ol {margin: 0 0 20px 24px; list-style-type:decimal;}
.single-project .article-content ol {list-style-type:decimal;}
.single-project .article-content img {width: 75%; height: auto;}
.single-project .article-content a.launch-video {width: 75%;}
.single-project .article-content a.launch-video img {width: 100%; height: auto;}

.page-template-page-template-project .pagination {font-size: 3rem;}
.page-template-page-template-project .pagination .page-numbers {display: none;}
.page-template-page-template-project .pagination .page-numbers.next, .page-template-page-template-project .pagination .page-numbers.prev {display: block; overflow: hidden;}

.page-template-page-template-project .thumbnail-holder {margin: 0 0 1rem 0; background-color: rgba(27,29,58,1.00);}
.page-template-page-template-project .thumbnail-holder img {width: 100%; height: auto; opacity: 1;  transition: opacity 0.2s ease;}
.page-template-page-template-project a:hover .thumbnail-holder img {opacity: 0.7;  transition: opacity 0.2s ease;}
.page-template-page-template-project h2 {color: rgba(27,29,58,1.00); transition: color 0.2s ease;}
.page-template-page-template-project a:hover h2 {color: rgba(27,29,58,0.7);transition: color 0.2s ease;}



.page-template-page-template-project .pagination .page-numbers.next span, .page-template-page-template-project .pagination .page-numbers.prev span {width: 0; height: 0; color: transparent; position: absolute; top: -999em;}


.page-template-page-template-contact {}

.page-template-page-template-contact .page-start section.intro {padding: 90px 0 50px 0; font-size: 3rem; line-height: 3.6rem; text-align: center; font-weight: bold; font-family: museo-sans-rounded;}
.page-template-page-template-contact .intro h1 {font-size: 1.5rem; text-align: center; text-transform: uppercase;}

.contact-details {font-size: 3rem; line-height: 3.6rem; font-weight: bold; }


.contact-details .white-panel {padding: 50px; background-color: #fff;}
.contact-details .white-panel a {font-family: museo-sans-rounded;}
.contact-details .white-panel h2 {font-size: 1.5rem; text-transform: uppercase; margin: 0 0 15px 0;}
.contact-details .white-panel p {margin: 0 0 25px 0;}
.contact-details .white-panel p.business-address {line-height: 3.8rem; font-family: museo-sans-rounded;}

.contact-form {background-color: rgba(27,29,58,1.00); color: #fff; border-bottom: solid 9px #F2E500;}

.company-registration { font-size: 1.5rem; font-weight: normal; line-height: 2rem; padding-top: 30px;}
.company-registration p span {display: block;}



.contact-form .form-panel {padding: 50px;}
.contact-form h2 {font-size: 3rem; line-height: 3.6rem; margin:  0 0 3rem 0;}
.contact-form label {display: block; margin: 0 0 10px 0;}
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"] {width: 100%; padding: 8px; box-sizing: border-box; margin: 0 0 20px 0; border: none;}
.contact-form textarea {width: 100%; padding: 8px; box-sizing: border-box; margin: 0 0 20px 0; border: none;}
.contact-form p.checkbox {line-height: 3rem;}
.contact-form p.checkbox .first {margin: 0;}
.contact-form a {color: #fff; font-weight: bold;}
.contact-form a:hover {color: #F2E500;}

/* class applies to select element itself, not a wrapper element */
.contact-form select  {
  display: block;

  color: #000;
  line-height: 2.9rem;
  padding: 5px;
  width: 100%;
  max-width: 100%; /* useful when width is set to anything other than 100% */
  box-sizing: border-box;
  margin: 0 0 20px 0;
  border: 1px solid #fff;
  box-shadow: /*0 1px 0 1px rgba(0,0,0,.04);*/none;
  border-radius: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
    for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
    
  */
 background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%230000002%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E')/*,
    linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%)*/;
  background-repeat: no-repeat/*, repeat*/;
  /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
  background-position: 98% 1.1em /*top 50%, 0 0*/;
  /* icon size, then gradient */
  background-size: .65em auto, 100%;
}
/* Hide arrow icon in IE browsers */
.contact-form select::-ms-expand {
  display: none;
}
/* Hover style */
.contact-form select:hover {
  border-color: #888;
}
/* Focus style */
.contact-form select:focus {
  border-color: #aaa;
  /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
  box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
  box-shadow: 0 0 0 3px -moz-mac-focusring;
  color: #222; 
  outline: none;
}

/* Set options to normal weight */
.contact-form select option {
  font-weight:normal;
}


 .contact-form input[type="submit"] {font-size: 2rem; color: #fff; text-align: center; display: inline-block; border: solid 2px #fff; padding: 6px 15px; border-radius: 19px; background-color: transparent; transition: background-color 0.2s ease; transition: color 0.2s ease;}
 .contact-form input[type="submit"]:hover {cursor: pointer; background-color: #fff; color: rgba(27,29,58,1.00); transition: background-color 0.2s ease; transition: color 0.2s ease;}

.wpcf7-not-valid {background-color: #F2E500;}
.checkbox .wpcf7-not-valid {background-color: transparent;}
.page-template-page-template-contact .wpcf7-not-valid-tip {color: #F2E500; position: relative; top: -15px;}


.page-template-page-template-contact  .wpcf7 form .wpcf7-response-output {
    margin: 20px 0;
    padding: 20px;
    border: 2px solid #00a0d2; font-weight: bold;
}

.page-template-page-template-contact  .wpcf7 form.invalid .wpcf7-response-output, .page-template-page-template-contact  .wpcf7 form.unaccepted .wpcf7-response-output, .page-template-page-template-contact  .wpcf7 form.payment-required .wpcf7-response-output {
    border-color:  #990000; background-color:  #cc0000; color: #990000; color: #fff;
}
.wpcf7 form.sent .wpcf7-response-output {
    border-color: #46b450; background-color: #46b450; color: #fff;
}



.page-template-page-template-contact .page-start, .single .page-start, .blog .page-start, .archive .page-start, .page-template-page-template-team .page-start, .page-template-page-template-values .page-start, .page-template-page-template-whoweare .page-start, .page-template-page-template-project .page-start {position: relative;}
.page-template-page-template-contact .page-start:after, .single .page-start:after, .blog .page-start:after, .archive .page-start:after, .page-template-page-template-team .page-start:after, .page-template-page-template-values .page-start:after, .page-template-page-template-whoweare .page-start:after, .page-template-page-template-project .page-start:after {content:""; display: block; width: 50%; height: 660px; position: absolute; top: 0; left: 0; z-index: 1; background-color: #F2E500;}

.page-id-82 .page-start:after {height: 575px;}


.page-template-page-template-contact .page-start section, .single .page-start article, .blog .page-start section, .archive .page-start section, .page-template-page-template-team .page-start section, .page-template-page-template-values .page-start section, .page-template-page-template-whoweare .page-start section, .page-template-page-template-project .page-start section {position: relative; z-index: 2;}

#text-6 {padding-bottom: 100px;}
#text-6 h2 {display: none;}
#text-6 ul:after {content: ""; display: table; clear: both;}
#text-6 ul li {display: block; float: left; padding: 0 10px; width: 25%; box-sizing: border-box;}
#text-6 ul li img {width: 100%; height: auto;}
.who-we-help h2, .who-we-help p {padding-left: 10px; padding-right: 10px;}

#helpPagination {display: block; text-align: center}
#helpPagination a {display: inline-block; width: 18px; height: 18px; border: solid 1px #1B1D3A; background-color: #1B1D3A; overflow: hidden; margin: 0 2px; border-radius: 50%;}
#helpPagination a span {display: block; position: absolute; top: -999em;}
#helpPagination a.selected {background-color: transparent; }

a.launch-video {position: relative; display: block;}


a.launch-video:after {
    content:"";
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    background-image: url(/wp-content/themes/bit-solutions/images/play-btn.png);
    background-size: 100px 200px;
    background-position: bottom left;
    margin-top: -50px;
}

a.launch-video:hover:after {
    background-position: top left;
}

.intro #text-5{font-family: museo-sans-rounded;}
.intro #text-4{font-family: museo-sans-rounded;}
.intro #text-5 h2 {
    font-size: 1.5rem;
    text-align: center;
    text-transform: uppercase;
}

.page-template-default .page-start, .page-template-page-template-form-submit .page-start {padding-bottom: 150px;}
.page-template-default .hero-panel, .page-template-page-template-form-submit .hero-panel {padding-top: 135px; padding-bottom: 30px; color: #fff; }
.page-template-default .hero-panel h1, .page-template-page-template-form-submit .hero-panel h1 {font-size: 5.5rem; line-height: 6.5rem; font-weight: 700; color: #fff; font-family: museo-sans-rounded;}
.page-template-page-template-form-submit .page-start {font-size: 2rem; line-height: 2.5rem;}
.page-template-page-template-form-submit.page-id-1251 .page-start a {display: none;}

.login h1 a  {
    background-image: url(/wp-content/themes/bit-solutions/images/bit-solutions.svg);
    background-size: 320px;
  
    height: 46px;
    
}

.page-id-3 .page-start .col-12.col-lg-8.offset-lg-2 ul {margin: 0 0 10px 20px;}
.page-id-3 .page-start .col-12.col-lg-8.offset-lg-2 ul li {margin: 0 0 10px 0; list-style-type: disc;}


.page-template-page-template-consultation {}

.page-template-page-template-consultation .intro {position: relative; overflow: hidden; 
   background-image:  url("/wp-content/themes/bit-solutions/images/line.svg");
    background-position: top 50px right -30px;
    background-repeat: no-repeat;
  /*  background-size: 150%;*/

}
.page-template-page-template-consultation .intro h1 {font-size: 8rem; line-height: 8.5rem; margin: 0 0 10rem 0;}
.page-template-page-template-consultation .intro:after {content:""; display: block; width: 50%; height: 660px; position: absolute; top: 0; left: 0; background-color: #F2E500;}
.page-template-page-template-consultation .intro .container {position: relative; z-index: 2;}

.page-template-page-template-consultation .page-start section.intro {padding: 90px 0 100px 0; font-size: 1.5rem; line-height: 1.5em; }

.page-template-page-template-consultation .contact-form .form-panel {padding: 50px 0;}

.page-template-page-template-consultation .contact-form {border-bottom: none;}
.preferemail a {text-decoration: underline; font-weight: 700;}


.page-template-page-template-consultation .wpcf7-not-valid-tip {color: #F2E500; position: relative; top: -15px;}


.page-template-page-template-consultation  .wpcf7 form .wpcf7-response-output {
    margin: 20px 0;
    padding: 20px;
    border: 2px solid #00a0d2; font-weight: bold;
}

.page-template-page-template-consultation  .wpcf7 form.invalid .wpcf7-response-output, .page-template-page-template-consultation  .wpcf7 form.unaccepted .wpcf7-response-output, .page-template-page-template-consultation  .wpcf7 form.payment-required .wpcf7-response-output {
    border-color:  #990000; background-color:  #cc0000; color: #990000; color: #fff;
}

.page-template-page-template-solution-level-2 .intro {background-color: #F2E500; position: relative; padding: 0;}
.page-template-page-template-solution-level-2 .intro h1 {font-size: 3rem; line-height: 3.4rem; margin: 0 0 20px 0;}
.page-template-page-template-solution-level-2 .intro .underlay {position: relative; z-index: 1;}
.page-template-page-template-solution-level-2 .intro .underlay img {width: 100%; height: auto; display: block;}
.page-template-page-template-solution-level-2 .intro .overlay {position: absolute; top: 0; left: 0; width: 100%; z-index: 2; height: 100%;}

.page-template-page-template-solution-level-2 .intro .overlay .g-5 {--bs-gutter-y: 0;}

.page-template-page-template-solution-level-2 .intro .container {position: relative; height: 100%;}
.page-template-page-template-solution-level-2 .intro .container .row, .page-template-page-template-solution .intro .container .col-12 {height: 100%;}

.page-template-page-template-solution-level-2 .intro .overlay .text-holder-outer {position: relative; width: 100%; height: 100%; top: 0; left: 0; }
.page-template-page-template-solution-level-2 .intro .overlay .text-holder-inner {position: absolute; top: 50%; left: 0; width: 100%; transform:translateY(-50%); padding-right: 3rem; box-sizing: border-box; padding-right: 25%;}

.page-template-page-template-solution-level-2 .intro .overlay img {display: none;}

.page-template-page-template-solution-level-2 .section-2 { padding: 50px 0 0 0;}
.page-template-page-template-solution-level-2 .section-2 h2 {margin: 0 0 20px 0;}
.page-template-page-template-solution-level-2 .section-2 img {display: block; width: 100%; height: auto;}
.page-template-page-template-solution-level-2 .section-2 em {font-size: 2rem; line-height: 2.4rem; font-style: normal;}

.page-template-page-template-solution-level-2 .section-3 {background-color: #F2E500; padding: 50px 0; position: relative; margin: 100px 0;}
.page-template-page-template-solution-level-2 .section-3 .container {position: relative; z-index: 2;}

.page-template-page-template-solution-level-2 .section-3 h2 {font-size: 4.5rem; line-height: 5rem; margin: 0 0 3.5rem 0;}
.page-template-page-template-solution-level-2 .section-3 h3 {font-size: 3rem; line-height: 3.5rem; margin: 0 0 2rem 0;}

/* where the magic happens */
.page-template-page-template-solution-level-2 .section-3:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  /*z-index: -1;*/
  top: 0;
  transform-origin: left top;
  transform: skewY(-2deg); background-color: #F2E500;
}

.page-template-page-template-solution-level-2 .section-3:after {
      content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  /*z-index: -1;*/


  transform: skewY(-2deg); background-color: #F2E500;
  bottom: 0;
   transform-origin: right bottom;
 /* transform: skewY(3deg); */
}

#menu-site-map {border-top: solid 1px rgba(27, 29, 58, 0.2);}
#menu-site-map li {display: block;}
#menu-site-map li a {display: block; font-size: 1.8rem; padding: 10px 0; border-bottom: solid 1px rgba(27, 29, 58, 0.2);}


.lets-talk {display: none;}
.home .lets-talk {display: block; width: 100px; height: 100px; position: fixed; bottom: 20px; right: 20px; border-radius: 50%; -webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.75); -moz-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.75); box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.75); z-index: 1000;}
.home .lets-talk img {display: block; width: 100%; height: auto;}
.home .lets-talk img.default-image {display: block;}
.home .lets-talk img.hover-image {display: none;}
.home .lets-talk a:hover img.default-image {display: none;}
.home .lets-talk a:hover img.hover-image {display: block;}

@media only screen and (max-width:768px){
  .home .lets-talk {width: 60px; height: 60px;}  
}

.page-template-page-template-values .page-start section.who-we-help {
padding: 50px 0 0 0;
}
.single h3 {font-weight: 700;}