@charset "UTF-8";
/* Cavespider StyleSheet */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');
body {
  font-family: 'Open Sans', sans-serif !important;
  padding: 0px;
}
/****************************************************LAYOUT*******************************************************************/
#outerwrapper {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  position: relative;
}
.top, #wrapper {
  display: block;
  width: 100%;
  padding: 40px 10%;
}
.bottom .moduletable, .contact .moduletable {
  /*width: 100%;*/
  height: auto;
  margin-bottom: 80px;
}
.articlewrapper {
  margin: 40px 0px;
  border-bottom: 1px solid #eee;
}
#maincontent, .component {
  display: block;
  width: 100%;
  height: auto;
}
#content-wrapper {
  position: relative;
  background-color: #fff;
  -webkit-box-shadow: 0 -15px 15px 1px rgba(0, 0, 0, .3);
  box-shadow: 0 -15px 15px 1px rgba(0, 0, 0, .3);
  margin-top: 30vh;
}
@media (max-height:1500px) {
  #content-wrapper {
    margin-top: 450px;
  }
}
body.home #content-wrapper, body.privacy-policy #content-wrapper  {
  margin-top: 100vh;
}
.column.com-content-article__body {
  display: table-cell;
  width: 60%;
  padding: 40px 40px;
}
.item-image.column {
  display: table-cell;
  width: 40%;
}
.com-content-article .item-image {
    background-size: cover;
    background-position: center;
}
body.current-website-projects .articleimage.column, body.news-updates-blog .articleimage.column {
  display: none;
  width: 40%;
}
#maincontent .below {
  width: 100%;
  height: auto;
  position: relative;
  float: left;
}
.itemListView, #news-itemList-331 {
  width: 100%;
}
.infoBox {
  padding: 15px 30px;
  border: 2px rgb(194, 181, 35) solid;
}
.infoBox .introP {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  line-height: 150%;
  height: fit-content;
  margin-bottom: 30px;
}
#footer-wrapper {
  display: block;
  width: 100%;
  background-color: #c1b322;
  float: left;
  position: relative;
  -webkit-box-shadow: inset 0 5px 10px 1px rgba(0, 0, 0, .2);
  box-shadow: inset 0 5px 10px 1px rgba(0, 0, 0, .2);
}
#footer {
  padding: 40px 10% 80px 10%;
  color: #fff;
  margin-bottom: 100px;
}
#footer .fSocial img {
  width: 48px;
  height: 48px;
  margin: 20px 20px 0px 0px;
  opacity: 1;
  -webkit-transition: all 800ms ease-in-out;
  -moz-transition: all 800ms ease-in-out;
  -ms-transition: all 800ms ease-in-out;
  -o-transition: all 800ms ease-in-out;
  transition: all 800ms ease-in-out;
}
#footer .fSocial img:hover {
  opacity: .6;
  -webkit-transition: all 800ms ease-in-out;
  -moz-transition: all 800ms ease-in-out;
  -ms-transition: all 800ms ease-in-out;
  -o-transition: all 800ms ease-in-out;
  transition: all 800ms ease-in-out;
}
.fRight {
  text-align: right;
}
.com-content-article__body ul {
  list-style: none;
  margin-top: 20px;
}
.com-content-article__body ul li {
  position: relative;
  padding-left: 30px;
  padding-bottom: 15px;
  font-weight: 600;
}
.com-content-article__body ul li:before {
  content: "\2713";
  color: #c1b322;
  position: absolute;
  left: 0px;
  bottom: 1px;
  font-size: 200%;
}
.item-page .fields-container {
  display: none;
}
@media(max-width:767px) {
  .top, #wrapper {
    display: block;
    width: 100%;
    padding: 10px 3%;
    text-align: center;
  }
  .com-content-article__body.column {
    display: block;
    width: 100%;
    padding: 0px 0px;
  }
  .articleimage.column {
    display: none;
    width: 100%;
  }
  #footer-wrapper {
    float: none;
    position: relative;
    -webkit-box-shadow: inset 0 5px 10px 1px rgba(0, 0, 0, .2);
    box-shadow: inset 0 5px 10px 1px rgba(0, 0, 0, .2);
    text-align: center;
  }
  .fRight {
    text-align: center;
  }
  #footer .fSocial img {
    margin: 20px 10px 0px 10px;
    opacity: 1;
    -webkit-transition: all 800ms ease-in-out;
    -moz-transition: all 800ms ease-in-out;
    -ms-transition: all 800ms ease-in-out;
    -o-transition: all 800ms ease-in-out;
    transition: all 800ms ease-in-out;
  }
}
.csbrand {
  max-width: 300px;
  margin-left: -15px;
  min-width: 172px;
}
@media (max-width:992px) {
  .bPanel {
    margin-bottom: 30px;
  }
  .top, #wrapper {
    display: block;
    width: 100%;
    padding: 40px 3%;
  }
}
@media(max-width:450px) {
  .column.com-content-article__body {
    display: table-cell;
    width: 100%;
    padding: 20px 10px;
  }
}
/**************************Panels***********************************/
.panels {
  min-height: 250px;
  padding: 10px 15px;
}
.inFoP {
  background-position: bottom left;
  background-size: 70%;
  background-repeat: no-repeat;
  /* float: left; */
  height: 100%;
  text-align: center;
  background-color: #eee;
  padding: 5px 10px;
  margin: auto;
  min-height: 250px;
  color: #000;
  text-decoration: none;
  -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .2);
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .2);
  -webkit-transition: all 800ms ease-in-out;
  -moz-transition: all 800ms ease-in-out;
  -ms-transition: all 800ms ease-in-out;
  -o-transition: all 800ms ease-in-out;
  transition: all 800ms ease-in-out;
}
.inFoP:hover, .inFoP:focus {
  color: #000;
  text-decoration: none !important;
  -webkit-box-shadow: 10px 10px 10px 1px rgba(0, 0, 0, .2);
  box-shadow: 10px 10px 10px 1px rgba(0, 0, 0, .2);
  -webkit-transition: all 800ms ease-in-out;
  -moz-transition: all 800ms ease-in-out;
  -ms-transition: all 800ms ease-in-out;
  -o-transition: all 800ms ease-in-out;
  transition: all 800ms ease-in-out;
}
a .inFoP {
  color: #000 !important;
  text-decoration: none !important;
}
a .inFoP:hover, a .inFoP:focus {
  color: rgba(88, 88, 88, 1.00) !important;
  text-decoration: none !important;
}
.panels .WSproduction {
  background-image: url(../../../images/WSproduction-BG.png);
}
.panels .Support {
  background-image: url("../../../images/support-BG.png");
}
.panels .OurWork {
  background-image: url("../../../images/Folio-BG.png");
}
.panels .OurSay {
  background-image: url("../../../images/OurSay-BG.png");
}
@media(max-width:767px) {
  .panels .Support, .panels .OurWork, .panels .OurSay {
    background-position: -20px 30px;
  }
}
/***************************************************PROGRESS CHART*****************************************************************/
.custom.production {
  display: flex;
  justify-content: space-between;
  padding: 40px 0px;
  border-bottom: 1px solid #eee;
}
.service h3 {
  font-size: 1.2vw;
  text-transform: uppercase;
  color: #849069;
  text-decoration: none;
  margin-top: 0px;
  margin-bottom: 15px;
  padding: 0px;
  text-align: right;
  vertical-align: middle;
  padding-top: 39px;
  padding-bottom: 20px;
  padding-right: 16px;
}
.service {
  max-width: 191px;
  height: auto;
  width: 18%;
  float: left;
  padding: 15px;
  margin: 10px 0 10px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  background-size: 95%;
  background-repeat: no-repeat;
  background-position: center center;
}
.plan {
  background-image: url(../../../images/plan-yellow-arrow.png);
}
.design {
  background-image: url(../../../images/design-yellow-arrow.png);
}
.build {
  background-image: url(../../../images/build-yellow-arrow.png);
}
.host {
  background-image: url(../../../images/host-yellow-arrow.png);
}
.manage {
  background-image: url(../../../images/manage-yellow-arrow.png);
}
body.planning-your-website .plan {
  background-image: url(../../../images/plan-yellow-arrow-H.png);
}
body.designing-your-website .design {
  background-image: url(../../../images/design-yellow-arrow-H.png);
}
body.building-your-website .build {
  background-image: url(../../../images/build-yellow-arrow-H.png);
}
body.hosting-your-website .host {
  background-image: url(../../../images/host-yellow-arrow-H.png);
}
body.managing-your-website .manage {
  background-image: url(../../../images/manage-yellow-arrow-H.png);
}
/***************************************************TYPOGRAPHY*****************************************************************/
.bannerCopy h2 {
  font-size: 50px;
  font-weight: 300;
  margin-bottom: 40px;
}
.bannerCopy p {
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 40px;
  line-height: 160%;
}
@media(max-width:767px) {
  .inFoP h2 {
    font-size: 22px;
    line-height: 150%;
  }
  h1, .h1 {
    font-size: 44px;
    font-weight: 300;
  }
  .bannerCopy h2 {
    font-size: 9vw;
    font-weight: 300;
    margin-bottom: 10px;
  }
}
/****************************************************NEWS WALL*******************************************************************/
.wall-item .wall-top .wall-image {
  max-width: 100%;
  position: relative;
  height: 200px;
}
.wall-image a {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-size: cover;
  background-position: center center;
}
.catItemIntroText {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 150%;
  height: 60px;
  padding: 10px 0px;
}
.wall-item .wall-bottom .item-content .catItemLinks {
  border-top: 1px none #7c7c7c !important;
  margin: 0;
}
.news-wall-loadmore .btn-loadmore {
  border: none;
  margin-top: 10px;
  padding: 10px 40px;
}
.news-wall-loadmore .btn-loadmore:hover {}
.wall-item .wall-bottom .item-content .jux-readmore {
  padding-bottom: 2px;
  padding-top: 15px;
}
/***************************************************BANNER*********************************************************************/
header {
  width: 100%;
  display: flex;
  position: fixed;
  z-index: 0;
}
/************************************homepage*******************************/
header {
  height: 30vh;
  background-image: url("../../../images/bannerBG-hp.jpg");
  background-size: cover;
  z-index: 0;
  position: fixed;
  min-height: 450px;
}
body.home header, body.privacy-policy header {
  height: 100vh;
  background-image: url("../../../images/bannerBG-hp.jpg");
  background-size: cover;
  z-index: 0;
  position: fixed;
}
.bannerCopy {
  position: absolute;
  top: 33%;
  left: -100%;
  width: 80%;
  padding-left: 0px;
  -webkit-transition: all 2000ms ease-out;
  -moz-transition: all 2000ms ease-out;
  -ms-transition: all 2000ms ease-out;
  -o-transition: all 2000ms ease-out;
  transition: all 2000ms ease-out;
}
body.loaded .bannerCopy {
  left: 10%;
  -webkit-transition: all 2000ms ease-out;
  -moz-transition: all 2000ms ease-out;
  -ms-transition: all 2000ms ease-out;
  -o-transition: all 2000ms ease-out;
  transition: all 2000ms ease-out;
}
body.home .bannerCopy {
  position: absolute;
  top: 30%;
  left: 0%;
  width: 40%;
  padding-left: 0px !important;
  transform: translate(-100%, 0);
  -webkit-transition: all 1200ms ease-out;
  -moz-transition: all 1200ms ease-out;
  -ms-transition: all 1200ms ease-out;
  -o-transition: all 1200ms ease-out;
  transition: all 1200ms ease-out;
}
body.home.loaded .bannerCopy {
  left: 50%;
  -webkit-transition: all 1200ms ease-out;
  -moz-transition: all 1200ms ease-out;
  -ms-transition: all 1200ms ease-out;
  -o-transition: all 1200ms ease-out;
  transition: all 1200ms ease-out;
}
body.home .bannerLogo, body.privacy-policy .bannerLogo {
  position: absolute;
  right: 0%;
  bottom: 20%;
  top: 0px;
  width: 80%;
  z-index: 300;
  -webkit-transition: all 1000ms ease-out;
  -moz-transition: all 1000ms ease-out;
  -ms-transition: all 1000ms ease-out;
  -o-transition: all 1000ms ease-out;
  transform: translate(100%, 0%);
}
body.home.loaded .bannerLogo, body.privacy-policy.loaded .bannerLogo  {
  right: 50%;
  -webkit-transition: all 1000ms ease-out;
  -moz-transition: all 1000ms ease-out;
  -ms-transition: all 1000ms ease-out;
  -o-transition: all 1000ms ease-out;
  transition: all 1000ms ease-out;
}
.bReadmore {
  position: relative;
}
@media(min-width:993px) {
  #dj-megamenu333mobile {
    display: none;
  }
}
@media (max-width:992px) {
  body.home .bannerLogo {
    top: 50px;
  }
}
@media(max-width:767px) {
  .com-content-article .item-image {
    display: none;
  }
  body.home header {
    height: 50vh;
    overflow: hidden;
  }
  body.home #content-wrapper {
    margin-top: 50vh;
  }
}
@media(max-width:450px) {
  body.home header {
    height: 100vh;
    overflow: hidden;
  }
  body.home #content-wrapper {
    margin-top: 100vh;
  }
}
/***************************************************FORMS*********************************************************************/
#rsform_3_page_0 label {
  display: none;
}
#rsform_3_page_0 .form-group {
  margin-bottom: 0px;
}
.rsform-block-consent .checkbox-inline, .rsform-block-consent .checkbox {
  display: block !important;
}
/***************************************************NAVIGATION*********************************************************************/
#navigation {
  width: 100%;
}
#nav-wrapper {
  margin: 0px;
  padding: 10px 0px;
  position: absolute;
  z-index: 1000;
  top: 0px;
  left: 10%;
  right: 10%;
}
.mMenu .moduletable {
  margin-right: -15px;
  margin-bottom: 20px;
}
@media(min-width:768px) {
  .mainMenu ul {
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    float: right;
    list-style: none;
  }
  .mainMenu li a {
    font-weight: 300 !important;
    position: relative;
    height: 30px !important;
    padding: 4px 17px !important;
    margin: 0px 2px;
    color: #444444;
  }
  .mainMenu ul li.item-206 a {
    margin-right: -18px !important;
  }
}
.mainMenu li a:focus, .mainMenu li a:hover {
  text-decoration: none;
  background-color: transparent !important;
}
.mainMenu li a:hover::before, .mainMenu li.active a::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  border: #000 solid 2px;
  border-right: none;
  left: 0px;
  width: 10px;
}
.mainMenu li a:hover::after, .mainMenu li.active a::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  border: #000 solid 2px;
  border-left: none;
  right: 0px;
  width: 10px;
}
#navigation .tnumber {
  text-align: right;
  font-size: 20px;
  padding: 10px 0px 0px 0px;
  color: #000;
  text-decoration: none;
}
#navigation .tnumber a {
  color: #000;
}
#navigation .tnumber a:hover, #navigation .tnumber a:focus {
  color: #bbb;
  text-decoration: none;
}
#footer .nav li a {
  color: #fff;
  text-decoration: none;
}
#footer .nav li a:hover, #footer .nav li a:focus {
  color: #5e5100;
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0);
  padding: 5px 15px;
}
.mainMenu li.active a {
  background-color: #f4f4f48c !important;
}
.navbar-expand-md .menu-button {
  display: none;
  flex-direction: column;
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 3px;
  border: #000000 none 2px;
}
.bar {
  width: 30px;
  height: 3px;
  background-color: #3a360b;
  margin: 3px 0;
}
@media(max-width:991px) {
  .csbrand {
    width: 100%;
  }
  #nav-wrapper {
    left: 10px;
    right: 10px;
  }
}
@media(max-width:767px) {
  #nav-wrapper {
    margin: 0px;
    padding: 10px 0px;
    position: absolute;
    z-index: 1000;
    top: 0px;
    left: 3%;
    right: 3%;
  }
  #nav-wrapper #navigation {
    width: 100%;
    margin-left: 0px;
  }
	#navigation .tnumber {
    padding: 38px 10px 0px 10px;
}
	
  .navbar-collapse {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    background-color: #d5d5d5;
    position: absolute;
    padding: 0px 10px 20px 10px;
    width: 40vw;
    max-width: 90vw;
    align-items: center;
  }
  .collapse.show, .collapsing.show {
    display: flex !important;
  }
  .collapse, .collapsing {
    right: -100vw;
    top: 40px;
    display: flex !important;
    position: absolute;
    visibility: visible;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
  }
  .collapse.show, collapsing.show {
    right: 3vw;
    -webkit-box-shadow: 10px 10px 20px 1px rgba(0, 0, 0, .2);
    box-shadow: 10px 10px 20px 1px rgba(0, 0, 0, .2);
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
  }
  .show {
    display: block !important;
    position: absolute !important;
    z-index: 1200;
    visibility: visible;
  }
  .collapse li a, .collapsing li a {
    margin: 20px 0px;
    font-size: 18px;
    font-weight: 300 !important;
    position: relative;
    height: inherit !important;
    padding: 0 19px !important;
    color: #444444;
  }
  #navigation .tnumber {
    float: left;
  }
  .navbar-expand-md .menu-button {
    display: flex;
    border: #000000 solid 2px;
  }
  .navbar-expand-md .menu-button:hover {
    background-color: #c1b322;
  }
  .dj-accordion-in {
    width: 200px;
  }
  .bannerCopy {
    position: absolute;
    top: 180px;
    left: -100%;
    width: 80%;
    padding-left: 0px !important;
    -webkit-transition: all 2000ms ease-out;
    -moz-transition: all 2000ms ease-out;
    -ms-transition: all 2000ms ease-out;
    -o-transition: all 2000ms ease-out;
    transition: all 2000ms ease-out;
  }
  body.loaded .bannerCopy {
    left: 10%;
    -webkit-transition: all 2000ms ease-out;
    -moz-transition: all 2000ms ease-out;
    -ms-transition: all 2000ms ease-out;
    -o-transition: all 2000ms ease-out;
    transition: all 2000ms ease-out;
  }
  body.home .bannerLogo {
    position: absolute;
    right: 0%;
    bottom: 20%;
    top: 120px;
    width: 140%;
    z-index: 300;
    opacity: .6;
    -webkit-transition: all 1800ms ease-out;
    -moz-transition: all 1800ms ease-out;
    -ms-transition: all 1800ms ease-out;
    -o-transition: all 1800ms ease-out;
    transition: all 1800ms ease-out;
  }
  body.home.loaded .bannerLogo {
    right: 70%;
    -webkit-transition: all 1800ms ease-out;
    -moz-transition: all 1800ms ease-out;
    -ms-transition: all 1800ms ease-out;
    -o-transition: all 1800ms ease-out;
    transition: all 1800ms ease-out;
  }
  body.home .bannerCopy {
    position: absolute;
    top: 200px;
    left: 0%;
    width: 90%;
    z-index: 500;
    padding-left: 0px !important;
    -webkit-transition: all 2000ms ease-out;
    -moz-transition: all 2000ms ease-out;
    -ms-transition: all 2000ms ease-out;
    -o-transition: all 2000ms ease-out;
    transition: all 2000ms ease-out;
  }
  body.home.loaded .bannerCopy {
    left: 100%;
    -webkit-transition: all 1200ms ease-out;
    -moz-transition: all 1200ms ease-out;
    -ms-transition: all 1200ms ease-out;
    -o-transition: all 1200ms ease-out;
    transition: all 1200ms ease-out;
  }
}
@media(max-width:450px) {
	.navbar-collapse {
    width: 70vw;
  }
}
/*********************************Brand************************************/
.cswords {
  margin: 0px;
  float: left;
  width: 50%;
}
.cslogo {
  margin: 0px;
  float: left;
  width: 30%;
}
/**********************************************************************************************TESTBED******************************************************************************************************/
@keyframes reveal {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}
#subject {
  animation: reveal linear both;
  animation-timeline: scroll(root block);
  animation-range: cover 0% cover 20%;
}
.cogwheel-container {
   width: 225px;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
}
body.test-page #wrapper {
	background-image: url(/images/cogstrip.png);
    background-position: left 28px;
    background-attachment: fixed;
    background-repeat-x: no-repeat;
    background-size: inherit;
}


.cogwheel {
    width: 200px;
    height: 200px;
    transform-origin: center center;
    transform: rotate(0deg); /* Initial rotation angle */
}