/*   
Theme Name: View2Fill
Author: Cskills
Version: 1
*/

:root {
   --lightblue: #71BEFF;
   --cream: #FFF8EF;
   --footerborder: #262626;
   --darkgrey: #535252;
   --lightgrey: #cccccc;
   --grey: #808080;
   --white: #ffffff;
   --black: #000000;
   --textblockgrey: #0e1319;


}

.gform-theme {
   --gform-theme-icon-control-number: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14' fill='none'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z' fill='rgba(113, 190, 255, 0.65)'/%3e%3c/svg%3e") !important;
}

.blackBG {
   background-color: var(--black);
   color: var(--cream);
}

.creamBG {
   background-color: var(--cream);
   color: var(--black);
}

.creamBG blockquote,
.defaultPage blockquote {
   color: var(--black) !important;
}

.creamBG .Quote svg path {
   fill: var(--black);
}


/* GLOBAL MIXIN CSS  */
.sectionTitle {
   position: relative;
   margin-bottom: 65px;
}

.sectionTitle::after {
   content: '';
   display: block;
   position: absolute;
   top: auto;
   left: 0;
   right: 0;
   bottom: 0;
   width: 205px;
   height: 3px;
   background-color: var(--lightblue);
}

.Link {
   font-size: 17px;
   line-height: normal;
   font-weight: bold;
   display: inline-block;
   width: auto !important;
   min-width: 180px;
   text-align: center;
   padding: 13px 38px 10px 38px !important;
   border-radius: 40px;
   border: 3px solid var(--lightblue);
   color: var(--lightblue) !important;
   background-image: none !important;
   font-family: 'Poppins', sans-serif;
   -webkit-transition: all 0.3s ease-in-out !important;
   -o-transition: all 0.3s ease-in-out !important;
   transition: all 0.3s ease-in-out !important;
   background-color: transparent;
}

.MenuLink {
   font-size: 22px;
   line-height: normal;
   font-weight: bold;
   display: inline-block;
   width: auto !important;
   min-width: 180px;
   text-align: center;
   padding: 13px 38px 10px 38px !important;
   border-radius: 40px;
   border: 3px solid var(--lightblue);
   color: var(--lightblue) !important;
   background-image: none !important;
   font-family: 'Poppins',
      sans-serif;
   -webkit-transition: all 0.3s ease-in-out !important;
   -o-transition: all 0.3s ease-in-out !important;
   transition: all 0.3s ease-in-out !important;
   background-color: transparent;
}

.Link:hover,
.MenuLink:hover,
.ur-frontend-form button:hover,
.ur-frontend-form input[type="submit"]:hover,
.ur-frontend-form button[type="submit"]:hover {
   border: 3px solid var(--lightblue);
   color: var(--black) !important;
   background-image: none !important;
   background-color: var(--lightblue) !important;
}


.MenuLink:hover a {
   color: var(--black) !important;
}

.formLink {
   font-size: 25px !important;
   line-height: 38px !important;
   font-weight: 400 !important;
   background-color: transparent !important;
}

button.gform_button {
   background-color: transparent !important;
   padding-left: 0px !important;
}

button.gform_button:focus {
   box-shadow: none !important;
   outline: none !important;
   border: none !important;
}

.formLink {
   position: relative;
   display: flex !important;
   align-items: center !important;
   cursor: pointer;
}

.formLink::after {
   content: url(images/buttonarrow.svg);
   position: relative;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   display: block !important;
   width: 34px;
   height: 32px;
   margin-left: 15px;
}


/* HOME HEROBLOCK CSS */
.HeroBlock .ImageHolder,
.textImageBlock .ImageHolder,
.smallHeader .ImageHolder {
   position: relative;
}

.HeroBlock {
   width: 100%;
   min-height: 100%;
}

.HeroBlock .col_60_40 {
   align-items: stretch;
   position: relative;
   /* border-top: 3px solid var(--lightblue); */
   border-left: 3px solid var(--lightblue);
}

/* .HeroBlock .col_60_40 .col_60,
.HeroBlock .col_60_40 .col_40 {
   padding: 50px 0px !important
} */

.HeroBlock .col_60_40 .col_40 {
   position: static;
   display: flex;
   align-items: center;
}

.HeroBlock .col_60_40::before

/* ,.HeroBlock .col_60_40::after  */
   {
   content: '';
   display: block;
   position: absolute;
   background: var(--lightblue);
}

.HeroBlock .col_60_40::before {
   left: 0%;
   right: auto;
   height: 3px;
   width: calc(100% - 40% + 20px);
   top: auto;
   bottom: 0;
}

/* 
.HeroBlock .col_60_40::after {
   right: 0px;
   left: auto;
   height: 40%;
   width: 3px;
   top: 0;
   bottom: auto;
} */

.Herocaption {
   display: flex;
   justify-content: flex-end;
   z-index: 2;
}

.Herocaption h1 {
   padding: 0px 20px;
}

.heroCaptionWithLink .Link {
   position: absolute;
   bottom: -25px;
}

.home .HeroBlock .textImageVideoRow {
   margin-left: -120px;
}

.homeimageslider {
   margin-left: -110px;
   /* z-index: -1; */
   margin-right: 41px;
}

.homeimageslider .slick-slide {
   margin-right: 0px !important;
}

/* HOME HEROBLOCK CSS */



/* FLEXIBLE HEROBLOCK CSS */

.smallHeader .contentBlock,
.smallHeader .col_1_1 .col:nth-child(even) {
   padding-right: 0px !important;
}

.smallHeader .col_1_1 {
   align-items: flex-end;
}

.smallHeader .col_1_1 .col:nth-child(odd) {
   width: 35%;
}

.smallHeader .col_1_1 .col:nth-child(even) {
   width: 65%;
}

.smallHeader .TextContent {
   padding: 70px;
   max-width: 760px;
   position: relative;
}

.smallHeader .TextContent p {
   padding-bottom: 0px;
}

.smallHeader .TextContent::before,
.smallHeader .TextContent::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   background-color: var(--lightblue);
}

.smallHeader .TextContent::before {
   width: 373px;
   height: 3px;
}

.smallHeader .TextContent::after {
   height: 100%;
   width: 3px;
}

/* FLEXIBLE HEROBLOCK CSS */


/* QUOTE ROW CSS  */

.quotePanel .Quote {
   padding-bottom: 20px;
   text-align: center;
}

.quotePanel blockquote {
   max-width: 1740px;
   padding: 0px 90px;
   text-align: center;
}

.quotePanel h4 {
   text-align: center;
   margin-top: 30px;
   padding-bottom: 0px;
   position: relative;
}

.quotePanel h4::before,
.quotePanel h4::after {
   content: '';
   position: absolute;
   display: block;
   top: 50%;
   bottom: auto;
   background-color: var(--lightblue);
   width: 50%;
   height: 3px;
   z-index: 0;
}

.quotePanel h4::before {
   left: 0;
}

.quotePanel h4::after {
   right: 0;
}

.quotePanel.blackBG h4 span {
   background-color: var(--black);
}

.quotePanel.creamBG h4 span {
   background-color: var(--cream);
}

.quotePanel h4 span {
   z-index: 1;
   display: inline-block;
   position: relative;
   padding: 0px 45px;
   font-weight: 600;
   max-width: 690px;
   margin: 0 auto;
   width: auto;
   font-size: 17px !important;
}

/* QUICK LINKS CSS */
.quickLinkPanel.TBspace {
   padding-bottom: 60px;
}

.quickLinkPanel h2 {
   font-weight: 400 !important;
}

.quickLinkPanel .columnBlock {
   padding: 0px 33px;
}

.quickLinkPanel .col_1_1_1 .col {
   padding: 0px 57px 40px 57px
}

.quickLinkPanel .box:before {
   padding-top: 100%;
}

.QuickLink {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-top: 45px;
   color: var(--cream);
   position: relative;
   padding-right: 40px;
}

.QuickLink svg {
   position: absolute;
   right: 0;
}

.quickLinkPanel .col>a .box img {
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -webkit-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
}

.quickLinkPanel .col>a:hover .box img {
   -webkit-transform: scale(1.05);
   -ms-transform: scale(1.05);
   transform: scale(1.05);
}

/* QUICK LINKS CSS */

/* TEXT ONLY */

.introTextPanel .basicContent {
   text-align: center;
}

.basicContent>*:last-child {
   padding: 0;
   margin: 0;
}

/* TEXT ONLY */


/* TEXT + CTA CSS */

.Textcta {
   text-align: center;
   max-width: 935px;
   margin: 0 auto;
}

.Textcta h2 {
   padding-bottom: 20px;
}

.Textcta p {
   padding-bottom: 0;
}

.Textcta p+.Link {
   margin-top: 40px;
}

/* TEXT + CTA CSS */

/* TEXT ON IMAGE BLOCK  */
.textImageBlock {
   background-color: var(--textblockgrey);
}

.textImageBlock+.textImageBlock {
   margin-top: 50px;
}

/* 
.textImageBlock .box {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

.textImageBlock .box::after {
   content: '';
   display: block;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: url(images/overlaygradient.svg);
   background-position: right;
}

.textImageBlock .contentBlock {
   padding-top: 100px;
   padding-bottom: 100px;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   min-height: 600px;
} */

.textImageBlock .col_1_1 {
   display: flex;
   align-items: center;
}

.textImageBlock .col_1_1 .col {
   padding-bottom: 0px !important;
}

.textImageBlock .col_1_1 .col:nth-child(odd) {
   padding: 0px !important;
}

.textImageBlock .col_1_1 .col:nth-child(even) {
   background-color: var(--textblockgrey);
}

.textImageBlock .TextContent {
   max-width: 680px;
   width: 100%;
   padding: 80px 80px;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
}

.textImageBlock .TextContent p {
   padding-bottom: 0;
}

.textImageBlock .TextContent p+.Link {
   margin-top: 30px;
}

/* TEXT ON IMAGE BLOCK  */


/* ACCORDION  */


.accordion .sectionTitle {
   margin-bottom: 0px;
}

.at-item {
   border-bottom: 3px solid var(--lightblue);
   padding: 25px 0px;
}

.at-item:first-child {
   border-top: 3px solid var(--lightblue);
}

.at-title {
   cursor: pointer;
   font-size: 24px;
   transition: background-color 0.3s ease-in-out;
   padding: 0;
   display: flex;
   align-items: center;
   position: relative;
   flex-wrap: nowrap;
}

.at-title .icon {
   max-width: 55px;
   width: 100%;
   margin-right: 55px;
}

.at-title h3 {
   padding-bottom: 0px;
   padding-right: 55px;
}

.at-title::after {
   content: '';
   width: 32px;
   height: 34px;
   background-image: url(images/arrow.svg);
   background-size: content;
   background-repeat: no-repeat;
   position: absolute;
   right: 0px;
   transition: all 0.3s ease;
   display: inline-block;
   transform: rotate(0deg);
   -webkit-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}

.at-title.active::after {
   transform: rotate(-180deg);
}

.at-title+.at-tab {
   padding-top: 40px;
}

.at-tab {
   display: none;
   padding: 0px 20px;
   border-top: none;
   margin-left: 90px;
   max-width: 85%;
}

.at-item:first-child+.at-tab {
   display: block;
}

.at-tab p {
   padding-bottom: 0px;
}

/* ACCORDION */

/* 5 CASE STUDY SCROLL  */

.campaignScroll {
   position: relative;
}

.campaignWrapper {
   display: flex;
   width: 100%;
   min-height: 750px;
   max-height: 750px;
}

.campaignitem {
   width: 12.5%;
   float: left;
   min-height: 750px;
   position: relative;
   cursor: pointer;
}

.campaignitem h2 {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   opacity: 0;
   visibility: hidden;
   transition-property: opacity, visibility;
   -webkit-transition-property: opacity, visibility;
   transition-duration: 300ms;
   -webkit-transition-duration: 300ms;
   transition-delay: 300ms;
   -webkit-transition-delay: 300ms;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: default;
}

.campaignitem h2 a {
   position: absolute;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 99;
   color: var(--cream);
}

.campaignitem h2 a:hover {
   background: transparent !important;
}

.campaignitem .respButton {
   position: absolute !important;
   top: 0;
   right: 0;
   max-width: 75px;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 10px;
   background: none !important;
}

.campaignactive {
   background-color: #2c3e50;
   color: var(--cream);
   width: 50%;
   position: relative;
   cursor: default;
}

.campaignitem .respButton img {
   -webkit-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
}

.campaignactive .respButton img {
   -webkit-transform: rotate(-180deg);
   -ms-transform: rotate(-180deg);
   transform: rotate(-180deg);
}

.campaignactive .box::after {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: rgba(0, 0, 0, 0.49);
}

.campaignactive h2 {
   opacity: 1;
   visibility: visible;
}

.prevButton,
.nextButton {
   position: absolute !important;
   top: 0%;
   bottom: 0%;
   height: 100%;
   z-index: 0;
   padding: 0px 90px;
   display: flex;
   align-items: center;
   border: none !important;
   outline: none !important;
   cursor: pointer;
   background: none !important;
}

.prevButton {
   left: 0;
   right: auto;
}

.nextButton {
   left: auto;
   right: 0;
}

.hideButton {
   display: none;
}

/* 5 CASE STUDY SCROLL  */


/* CARDS GRID + SCROLLER  */

.cardsScrollerGrid .cardscroller {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
}

.cardsScrollerGrid .card {
   display: flex;
   flex-direction: column;
   padding: 0;
}

/* .cardscroller .slick-list {
   margin-left: -16px;
} */

.cardsScrollerGrid.scrolll .card {
   margin-right: 0px !important;
}

.cardsScrollerGrid.grid .card {
   margin-right: 0px !important;
   width: 50% !important;
}

.cardsScrollerGrid .card:nth-child(even) {
   flex-direction: column-reverse;
}

.cardsScrollerGrid .card .box {
   overflow: unset;
}

.cardsScrollerGrid .card .box::before {
   padding-top: 56.25% !important;
}

.cardsScrollerGrid .card .textImageVideoRow {
   width: 100%;
   overflow: unset;
   /* height: 100%; */
}

.cardsScrollerGrid .TextContent {
   padding: 70px 87px;
   position: relative;
   width: 100%;
   height: 100%;
   min-height: 440px;
   font-size: 16px;
   line-height: 22px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
}

.cardsScrollerGrid .TextContent p {
   padding-bottom: 15px;

}

.cardsScrollerGrid .TextContent *:last-child {
   padding-bottom: 0px;
}

.cardsScrollerGrid .TextContent .Link {
   margin-top: 30px;
}


.cardsScrollerGrid .TextContent::before {
   content: '';
   position: absolute;
}

.cardsScrollerGrid .card .TextContent::before {
   height: 373px;
   width: 373px;
   background-repeat: no-repeat;
   background-size: contain;
}

.cardsScrollerGrid .card:nth-child(odd) .TextContent::before {
   background-image: url(images/griddown.svg);
   top: 0;
   right: auto;
   bottom: auto;
   left: 0;
}

.cardsScrollerGrid .card:nth-child(even) .TextContent::before {
   background-image: url(images/gridup.svg);
   top: auto;
   right: 0;
   bottom: 0;
   left: auto;
}





.ImageHolder {
   position: relative;
   overflow: hidden;
   /* height: 100%; */
}

.ImageHolder::before {
   content: '';
   display: block;
   padding-top: 56.25%;
}

.imagePlace,
.VideoplaceHolder {
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   position: absolute;
}

.posterimage {
   position: relative;
   z-index: 2;
   height: 100%;
}

.posterimage::before {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1;
   background-color: rgba(0, 0, 0, 0.6);
   mix-blend-mode: multiply;
}

.playVideo {
   background: url('images/playicon.svg');
   background-size: 100px 100px;
   background-repeat: no-repeat;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
   /* cursor: pointer; */
   pointer-events: none;
   position: absolute;
   z-index: 2;
   width: 100px;
   height: 100px;
   font-size: 0;
   border-radius: 100%;
}

.contentLoaded .playVideo {
   pointer-events: all;
   cursor: pointer;
}

.vrLoader {
   background: #000;
   position: absolute;
   z-index: 1;
   background-color: #000;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
}

.fluidVideo {
   position: absolute;
   top: 0;
}




/* CARDS GRID + SCROLLER  */




/* STATS */


.statsPanel .TextContent h2 {
   padding-bottom: 5px;
}

.statsPanel .TextContent p {
   padding-bottom: 0px;
   max-width: 230px;
}

.statsPanel .iconholder {
   max-width: 55px;
   margin-bottom: 10px;
   position: relative;
}

/* STATS */

/* CLIENT LOGO ROW */

.clientsPanel h2 {
   text-align: center;
   padding-bottom: 45px;
}

.slidelogo {
   width: 100%;
   margin: 0px 20px !important;
   display: flex !important;
   justify-content: center;
   align-items: center;
}

.slidelogo a {
   background: transparent;
}

.slidelogo img {
   max-width: 130px;
   max-height: 130px;
   object-fit: contain;
   object-position: center;
}

/* CLIENT LOGO ROW */


/* LANDSCAPE IMAGE SLIDER  */
.quotePanel h4 .imageslider .slick-slide {
   margin: 0 !important;
   padding: 0px 20px;
}

.imageslider .slick-disabled {
   visibility: hidden;
}

.imageslider .slick-slide {
   margin-right: 0px;
}

/* LANDSCAPE IMAGE SLIDER  */



/* CASE STUDY LISTING */

.casestudyGrid {
   position: relative !important;
   display: block;
}

.casestudyGrid h2 {
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   z-index: 2;
   color: var(--cream);
   transition: all 0.3s ease !important;
   padding: 50px;
   text-align: center;
}

.casestudyGrid::before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.6);
   opacity: 0;
   z-index: 1;
   transition: all 0.3s ease !important;
}

.casestudyGrid:hover::before,
.casestudyGrid:hover h2 {
   opacity: 1;
}

/* CASE STUDY LISTING */

/* CASE STUDY DETAIL */
.casestudydetail+.Gallery {
   position: relative;
}

.casestudydetail+.Gallery::before {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 180px;
   background-color: var(--cream);
}

.casestudydetail .sectionTitle {
   font-weight: 500;
}



.casestudyeditor p {
   padding-bottom: 0px !important;
}

.camwrapper {
   font-size: 25px;
   line-height: 38px;
   font-weight: 400;
}

.casestudyeditor {
   font-size: 30px;
   line-height: 46px;
   font-weight: 500;
}




/* ERROR PAGE ANIMATION */

.errorBlock {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   text-align: center;
}

.errorBlock a {
   color: var(--lightblue);
}

.animatee {
   width: 300px;
   height: 300px;
   border-radius: 100%;
   background-color: var(--lightblue);
   color: var(--black);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 130px;
   margin-bottom: 50px;
   font-weight: 700;
}

.up-down {
   animation: up-down linear 4s;
   animation-iteration-count: infinite;
   transform-origin: 50% 50%;
   -webkit-animation: up-down linear 4s;
   -webkit-animation-iteration-count: infinite;
   -webkit-transform-origin: 50% 50%;
   -moz-animation: up-down linear 4s;
   -moz-animation-iteration-count: infinite;
   -moz-transform-origin: 50% 50%;
   -o-animation: up-down linear 4s;
   -o-animation-iteration-count: infinite;
   -o-transform-origin: 50% 50%;
   -ms-animation: up-down linear 4s;
   -ms-animation-iteration-count: infinite;
   -ms-transform-origin: 50% 50%;
}

@keyframes up-down {
   0% {
      transform: translate(1px, 20px);
   }

   24% {
      transform: translate(1px, 30px);
   }

   50% {
      transform: translate(1px, 12px);
   }

   74% {
      transform: translate(1px, 22px);
   }

   100% {
      transform: translate(1px, 22px);
   }
}

@-moz-keyframes up-down {
   0% {
      -moz-transform: translate(1px, 20px);
   }

   24% {
      -moz-transform: translate(1px, 30px);
   }

   50% {
      -moz-transform: translate(1px, 12px);
   }

   74% {
      -moz-transform: translate(1px, 22px);
   }

   100% {
      -moz-transform: translate(1px, 22px);
   }
}

@-webkit-keyframes up-down {
   0% {
      -webkit-transform: translate(1px, 20px);
   }

   24% {
      -webkit-transform: translate(1px, 30px);
   }

   50% {
      -webkit-transform: translate(1px, 12px);
   }

   74% {
      -webkit-transform: translate(1px, 22px);
   }

   100% {
      -webkit-transform: translate(1px, 22px);
   }
}

@-o-keyframes up-down {
   0% {
      -o-transform: translate(1px, 20px);
   }

   24% {
      -o-transform: translate(1px, 30px);
   }

   50% {
      -o-transform: translate(1px, 12px);
   }

   74% {
      -o-transform: translate(1px, 22px);
   }

   100% {
      -o-transform: translate(1px, 22px);
   }
}

@-ms-keyframes up-down {
   0% {
      -ms-transform: translate(1px, 20px);
   }

   24% {
      -ms-transform: translate(1px, 30px);
   }

   50% {
      -ms-transform: translate(1px, 12px);
   }

   74% {
      -ms-transform: translate(1px, 22px);
   }

   100% {
      -ms-transform: translate(1px, 22px);
   }
}

/* ERROR PAGE ANIMATION */


/* DEFAULT PAGE CSS */
.defaultPage {
   background-color: var(--cream);
   color: var(--black);
}

.defaultPage h3,
.defaultPage h4,
.defaultPage strong {
   font-weight: 500 !important;
}

.defaultPage .sectionTitle {
   margin-bottom: 75px;
}

.defaultPage .contentBlock>h3:not(.sectionTitle) {
   padding: 0px;
   margin: 0px;
}

.defaultPage .contentBlock>h3:not(.sectionTitle)+.defaultContent {
   padding-top: 75px;
}

/* .double .defaultContent {
   display: block;
   column-count: 2;
   gap: 30px;
} */

/* DEFAULT PAGE CSS */


/* MIXIN SPACE CSS */

section:not(.blackBG, .creamBG).TBspace+section:not(.blackBG, .creamBG).TBspace,
.blackBG.TBspace+section:not(.blackBG, .creamBG).TBspace,
.creamBG.TBspace+.creamBG.TBspace,
.blackBG.TBspace+.blackBG.TBspace,
.creamBG.TBspace+.textImageBlock.TBspace {
   padding-top: 0px !important;
}

.smallHeader+.blackBG.TBspace,
.smallHeader+section:not(.blackBG, .creamBG).TBspace {
   padding-top: 50px;
}

.casestudydetail+.Gallery {
   padding-top: 0px !important;
}

section.accordion.blackBG.TBspace {
   padding-top: 150px;
   padding-bottom: 150px;
}

.formatPage.Bspace+.blackBG.TBspace,
.formatPage.Bspace+section:not(.blackBG, .creamBG).TBspace {
   padding-top: 0px !important;
}

/* MIXIN SPACE CSS */


/* LOGIN CSS  */
.portalContent {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   width: 100%;
   height: 100%;
   position: relative;
   min-height: 50vh;
   max-width: 1100px;
   margin: 0 auto;
   padding: 100px 50px;
}

.portalContent::before,
.portalContent::after {
   content: '';
   position: absolute;
   display: block;
   width: 373px;
   height: 373px;
}

.portalContent::before {
   left: 0;
   bottom: 0;
   background-image: url(images/leftborder.svg);
}

.portalContent::after {
   right: 0;
   top: 0;
   background-image: url(images/rightborder.svg);
}

.user-registration {
   background-color: transparent !important;
   box-shadow: none !important;
   max-width: 1100px;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   margin-bottom: 20px !important;
   z-index: 9999;
}

.user-registration+p {
   z-index: 9999;
}

.user-registration+p a {
   color: var(--lightblue);
}

.user-registration-error {
   background: var(--cream) !important;
   width: 96% !important;
   padding-bottom: 10px !important;
}

.ur-frontend-form {
   border: none !important;
   width: 100% !important;
}

.ur-frontend-form .ur-form-row .ur-form-grid legend,
.ur-frontend-form .ur-form-row .ur-form-grid label {
   font-size: 20px !important;
   line-height: 30px !important;
   font-weight: 400 !important;
}

.ur-frontend-form button,
.ur-frontend-form input[type="submit"],
.ur-frontend-form button[type="submit"] {
   border-radius: 35px !important;
   width: auto !important;
   min-width: 215px !important;
   margin: 0px !important;
   color: var(--lightblue) !important;
   font-size: 22px !important;
   font-weight: 700 !important;
   line-height: normal !important;
   padding: 10px 20px 9px 20px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
}

.user-registration-form__label {
   display: flex !important;
   align-items: center !important;
}

.user-registration-form__label-for-checkbox,
.user-registration-LostPassword {
   font-size: 16px !important;
   line-height: 25px !important;
   font-weight: 300 !important;
}

.user-registration-form__label input[type="checkbox"] {
   width: 30px !important;
   height: 30px !important;
   border: 2px solid var(--lightblue) !important;
   min-height: 30px !important;
   margin-right: 10px !important;
   background-color: transparent !important;
}

.user-registration-LostPassword {
   position: relative;
   bottom: 115px;
   display: block;
}

.user-registration-LostPassword a {
   color: var(--lightblue);
   text-decoration: underline;
}

.user-registration-LostPassword a:hover {
   background-size: 0 !important;
}

.Access {
   display: flex;
   width: 100%;
   height: 100%;
   align-items: center;
   justify-content: center;
   z-index: 9999;
}

.Access a {
   color: var(--lightblue) !important;
}

#user-registration.vertical .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link.is-active a {
   background-color: var(--lightgrey) !important;
   border-color: var(--lightblue) !important;
}

#user-registration.vertical .user-registration-MyAccount-navigation {
   background-color: var(--cream) !important;
}

.user-registration ul li::before {
   display: none !important;
}

#user-registration .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link a,
#user-registration.horizontal .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link a {
   color: var(--black) !important;
}

.user-registration-EditAccountForm fieldset {
   border: none !important;
}

.user-registration-message {
   border: 3px solid var(--lightblue) !important;
   border-color: var(--lightblue) !important;
   background-color: transparent;
   color: var(--cream) !important;
   margin-bottom: 30px !important;
}

.user-registration-MyAccount-navigation li a {
   background-size: 0 !important;
}

#user-registration p {
   color: var(--cream);
}

#user-registration .user-registration-MyAccount-content .user-registration-profile-header .user-registration-nick-name {
   color: var(--lightblue) !important;
}

.ur-front-spinner,
.gform-loader {
   background: url(images/loader.svg) no-repeat !important;
   background-size: 30px 30px !important;
   display: block !important;
   opacity: 1 !important;
   width: 30px !important;
   height: 30px !important;
   margin-left: -40px !important;
}

span.gform-loader {
   margin-left: 0px !important;
   border: none !important;
}

.user-registration-form__label-for-checkbox input {
   opacity: 0;
   visibility: hidden;
   position: absolute;
   width: 0;
   height: 0;
}

.user-registration-form__label-for-checkbox {
   position: relative;
}

.user-registration-form__label-for-checkbox span {
   position: relative;
   padding-left: 40px;
}

.user-registration-form__label-for-checkbox span::before {
   content: "";
   display: inline-block;
   width: 24px;
   height: 24px;
   position: absolute;
   left: 0;
   top: 0;
   border: 2px solid var(--lightblue);
}

.user-registration-form__label-for-checkbox input:checked+span::before {
   background: url(images/checkmark.svg);
}

/* LOGIN CSS  */






/* FORMAT ROW */
.formatPage {
   position: relative;
}

.formatPage::before {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: var(--cream);
   width: 100%;
   height: 45%;
}

.formatslider .col_1_1 {
   align-items: stretch !important;
}

.formatslider .slick-slide span {
   position: relative;
   padding-top: 10px;
   display: block;
}



.formatPage .col_33::before {
   content: "";
   display: block;
   width: 100%;
   padding-top: 150%;
}

.formatPage .sectionTitle {
   color: var(--black);
}

.formatslider .sectionTitle {
   margin-bottom: 0px !important;
}

.sliderFirst {
   padding-top: 50px;
}

.sliderFirst .slick-list {
   width: 105%;
   max-height: 740px;
}


.col_66 .sliderFirst .slick-slide,
.innerslider,
.innerslider .slick-slide {
   margin-right: 0px !important;
}

.sliderSecond {
   background-image: url(images/mobile-revised.svg);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   width: 100%;
   height: 100%;
   padding: 0 18%;
   position: absolute;
   top: 0;
   display: flex;
   align-items: center;
}

.sliderSecond .box:before {
   padding-top: 100%;
}

.sliderSecond .slick-dots {
   padding: 0px 50px !important;
   width: auto !important;
}

.sliderSecond .slick-list {
   max-height: 600px;
}

.formatPage .innerslider .slick-slide img {
   object-fit: contain;
}

.formatPage .col_33 {
   position: relative;
   top: -40px;
}

.formatPage .btn-wrap {
   position: absolute;
   top: 0;
   left: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   height: 100%;
}

.formatPage .btn-wrap button {
   z-index: 1;
   width: 57px;
   height: 57px;
   outline: none;
   border: 0;
   background-color: transparent;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 28px;
   text-indent: -9999px;
   padding: 0;
   cursor: pointer;
   background-size: contain;
}

.prev-btn {
   position: relative;
   left: 5px;
   background-image: url(images/leftarrow.svg);
}

.next-btn {
   position: relative;
   right: 5px;
   background-image: url(images/rightarrow.svg);
}

.ginput_container input::placeholder {
   /* color: red !important; */
   opacity: 0.7 !important;
   /* Firefox */
}

.ginput_container input::-ms-input-placeholder {
   /* Edge 12 -18 */
   /* color: red !important; */
   opacity: 0.7 !important;
}

/* FORMAT ROW */




/* FORM ROW */
fieldset {
   padding-bottom: 40px !important;
}

fieldset legend {
   float: left !important;
   width: 25vw !important;
}

fieldset .ginput_container {
   float: right !important;
   display: flex !important;
   width: calc(100% - 25vw) !important;
}

fieldset .ginput_container_checkbox {
   padding-bottom: 0px !important;
}

.gfield {
   display: flex;
   position: relative !important;
   padding-bottom: 1.25em !important;
   align-items: flex-start !important;
}

.gfield--has-description.gfield {
   padding-bottom: 1.25rem !important;
}

div:not(.getaQuoteForm, .quoteRow, .calculationBox, .gfield--type-html).gfield {
   display: flex;
}

div:not(.getaQuoteForm, .quoteRow, .calculationBox) fieldset .ginput_container {
   float: none !important;
}

.gform-grid-col--size-auto:nth-child(odd) {
   padding-left: 0 !important;
}

.gform-grid-col--size-auto:nth-child(even) {
   padding-right: 0 !important;
}

.gfield label {
   width: 25vw;
   display: flex !important;
   flex-wrap: nowrap !important;
}

.gfield .ginput_container {
   width: calc(100% - 25vw);
}

.gfield_checkbox {
   padding-bottom: 0px !important;
}

.gfield_checkbox label {
   width: 100% !important;
}

.gfield_checkbox.disabled .gfield-choice-input {
   opacity: 0.5 !important;
}



input[type=file] {
   background-color: transparent !important;
}

.description_above .gfield {
   padding-bottom: 1.50em !important;
}

.gform_heading {
   display: none !important;
}

.gform_confirmation_message {
   text-align: center !important;
   padding: 32px 30px 28px 30px !important;
   font-size: 30px !important;
   margin-top: 55px !important;
   display: block !important;
   position: relative !important;
   border: 3px solid var(--lightblue) !important;
}

.gsection_title {
   font-size: 28px;
   line-height: 30px;
   padding-bottom: 10px !important;
}

.gform_submission_error.hide_summary {
   font-size: 18px !important;
}

.gfield_required {
   font-size: 20px !important;
   line-height: normal !important;
   /* position: absolute !important; */
}

.gchoice {
   display: flex;
   align-items: center;
   width: 100% !important;
   cursor: pointer !important;
   width: auto !important;
   padding-right: 40px !important;
   display: inline-flex !important;
   align-items: flex-start !important;
}

.gchoice label {
   padding-right: 0px !important;
   width: 80% !important;
}

.gfield ul {
   width: 100% !important;
   padding-top: 0px;
   padding-bottom: 0px;

}

.gfield ul li:last-child {
   padding-bottom: 0px !important;
}

.gform_fields {
   display: block !important;
}

.gfield--type-captcha {
   display: none !important;
}

.gform_validation_errors {
   background-color: var(--cream) !important;
}

.gform-theme--framework .gfield:where(:not(.gfield--type-html):not(.gfield--type-section)) {
   line-height: inherit !important;
}



/* .getaQuoteForm .gfmc-container:not(.cityWrapper) {
   display: flex !important;
   align-items: flex-start !important;
} */

.getaQuoteForm .calculationBox .gfield--type-html {
   margin-top: 30px !important;
   flex-direction: column !important;
   width: 100% !important;
   padding: 20px !important;
   border: 1px dashed var(--lightblue) !important;
   font-size: 16px !important;
   line-height: 22px !important;

}

.gfield--type-html {
   text-align: left !important;
   font-size: 20px !important;
   line-height: 26px !important;
}

.getaQuote .contentBlock .flexWrap h2 {
   padding-bottom: 0;
}

.getaQuote .contentBlock .flexWrap {
   padding-bottom: 55px;
}

.getaQuote .contentBlock .flexWrap {
   align-items: center;
   justify-content: space-between;
}


.getaQuote .contentBlock .flexWrap a {
   background-size: 0 !important;
}

.getaQuote .contentBlock .flexWrap a:hover {
   color: var(--lightblue) !important;
}

.getaQuote .contentBlock .flexWrap a::after {
   content: '';
   position: relative;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   display: block !important;
   width: 30px;
   height: 28px;
   margin-left: 15px;
   background-image: url(images/buttonarrow.svg);
   background-size: contain;
   background-repeat: no-repeat;
}

.getaQuote .contentBlock .flexWrap a {
   display: flex;
   align-items: center;
}


/* QUOTEROW */
.quoteRow {
   width: calc(100% - 400px) !important;
   padding-right: 72px !important;
}

.quoteRow .gfield:not(.gfield--type-html) {
   display: flex;
   align-items: flex-start;
   flex-wrap: wrap;
}

.quoteRow .gfield_radio {
   flex-direction: row !important;
}

.quoteRow fieldset.gfield.gfield--type-checkbox .gfield_description {
   top: 0px !important;
   left: 25vw;
   position: relative;
   margin: 0;
}

.gfield_description {
   color: var(--lightblue) !important;
}

/* .ginput_container_select+.gfield_description {
   display: none !important;
} */

/* QUOTEROW */


/* CALCULATION BOX */
.newBox {
   min-width: 400px !important;
   max-width: 400px !important;
   position: sticky !important;
}

.calculationBox {
   align-self: auto !important;
   top: 10px !important;
   background-color: #342929 !important;
   /* padding-bottom: 0px !important; */
   padding: 25px !important;
   border: 3px solid var(--lightblue) !important;
   transition: all 0.35s ease-in-out;
   -moz-transtion: all 0.35s ease-in-out;
   -webkit-transition: all 0.35s ease-in-out;
   -ms-transition: all 0.35s ease-in-out;
   position: relative !important;
}

/* .borderBox {
   padding: 25px !important;
   border: 3px solid var(--lightblue) !important;
   transition: all 0.35s ease-in-out;
   -moz-transtion: all 0.35s ease-in-out;
   -webkit-transition: all 0.35s ease-in-out;
   -ms-transition: all 0.35s ease-in-out;
} */

.freeLabel {
   display: flex !important;
   justify-content: flex-end !important;
}

.calculationBox .gfield {
   display: flex;
   justify-content: space-between;
   border-bottom: 1px dashed var(--lightblue) !important;
   padding-top: 15px !important;
   padding-bottom: 15px !important;
   align-items: flex-start;
}

.calculationBox .gfield:first-child {
   padding-top: 0px !important;
}

.calculationBox .gfield .ginput_container {
   width: 45% !important;
   display: flex;
   align-items: center;
   justify-content: flex-end;
}

.calculationBox .gfield.totalAmount .ginput_container {
   width: 55% !important;
}

.calculationBox .ginput_container {
   padding-bottom: 0px !important;
}

.calculationBox .gfield input {
   border: none !important;
   margin: 0px;
   border: none !important;
   border-radius: 0px !important;
   outline: none !important;
   appearance: none !important;
   min-height: auto !important;
   pointer-events: none;
}

.calculationBox .gfield input:hover,
.calculationBox .gfield input:focus,
.calculationBox .gfield input:focus-visible,
.calculationBox .gfield input:focus-within {
   outline: none !important;
   border: none !important;
   box-shadow: none !important;
}

.calculationBox .gfield.gfield--type-total label,
.calculationBox .gfield.gfield--type-total input {
   font-weight: 600 !important;
   font-size: 20px !important;
}

.pageWrap form .calculationBox label,
.pageWrap .calculationBox .gfield_label,
.pageWrap form .calculationBox input {
   color: var(--cream) !important;
   font-size: 18px !important;
   line-height: 24px !important;
   font-weight: normal !important;
   position: relative !important;
   padding-right: 0px !important;
   margin-bottom: 0px !important;
   height: auto !important;
}

.pageWrap form .calculationBox label {
   width: 55% !important;
}

.pageWrap form .calculationBox input {
   text-align: right;
}

/* CALCULATION BOX */



/* FORM CSS */

.gform_validation_errors {
   text-align: left !important;
}

.gform_validation_errors ol,
.gform_validation_errors ul {
   padding-left: 0px !important;
}

.gform_validation_errors ol li,
.gform_validation_errors ul li {
   list-style: none;
}

.gform_validation_errors ol li a,
.gform_validation_errors ul li a {
   text-decoration: none;
}


.videoRowWrapper {
   padding-top: 40px;
}

.videoRowWrapper .col_1_1 {
   justify-content: center;
}

.quotePanel .slick-slide:not(:last-child) {
   margin-right: 0 !important;
}



.getaQuoteForm .gfmc-container {
   display: flex !important;
   align-items: flex-start !important;
}

.cityWrapper {
   flex-direction: column !important;
   width: 100% !important;
}

.cityWrapper .gfmc-container {
   width: 100% !important;
}

.cityWrapper .gfmc-column {
   padding-bottom: 0px !important;
   width: 100% !important;
}

.cityWrapper .gfmc-column .gfield:last-child {
   padding-left: 20px;
}

.cityWrapper .gfield.gfield--type-html {
   width: 25vw;
   text-align: left !important;
   font-size: 24px !important;
   line-height: 26px !important;
}


.cityWrapper .gfield:not(.gfield--type-html) {
   flex: 1;
   width: auto;
}

.cityWrapper .gfield:not(.gfield--type-html) .gfield_label {
   display: none !important;
}

.cityWrapper .gfield .ginput_container {
   width: 100% !important;
}

.cityWrapper .instruction {
   display: none !important;
}



.validation_message {
   position: absolute !important;
   bottom: 5px !important;
   left: 25vw !important;
   font-size: 12px !important;
   color: red !important;
}

.cityWrapper .validation_message {
   left: 0px !important;
   top: 45px;
}


table.entry-products td.textcenter,
table.entry-products th.textcenter {
   display: none !important;
}


.finalcommentWrap {
   position: relative !important;
   font-size: 18px !important;
   line-height: 24px !important;
   padding: 25px 0px !important;
   display: block !important;
}

.quoteRow .userFomSubmit,
.quoteRow .userNameFirstLast,
.quoteRow .assignedClientRates,
.prebudget .gchoice .gform-field-label,
.budgetneed .gchoice .gform-field-label {
   display: none !important;
}

.numberOfCityCoverage+div .gfmc-container,
.numberOfCityCoverage+div,
.numberOfCityCoverage+div .gfield {
   padding-bottom: 0 !important;
}

.numberOfCityCoverage+div .citiesWrap>div {
   padding-bottom: 1rem !important
}

.numberOfCityCoverage+div .citiesWrap:last-child>div {
   padding-bottom: 1.50rem !important;
}

.quoteRow .numberOfCityCoverage {
   padding-bottom: 1rem !important;
}

.imaginarywithin-24hours .gchoice label,
.inclusiveSocialAmplification .gchoice label,
.animatedSizzleReel .gchoice label {
   display: none !important;
}

.gform-theme--framework select:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):where(:not([multiple])) {
   background-image: url(images/droparrow.svg) !important;
   background-size: 17px !important;
}
.excelViewer iframe {
   width: 100% !important;
   height: 90vh !important;
}
#gform_wrapper_6 ~ .finalcomment {
   display: none;
 }