:root {
  --tccolumn-gap:1em;
  }
   


  a.custom-logo-link {
    max-width: 200px;
}

  /* styles.css */
  .visible {
    opacity: 1 !important;
    transform: translateX(0px) translateY(0px) !important;
    transition: all 0.3s ease;
    /* Add more styles as needed for different animations */
  }
  
  div#page {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

#content
 {
    flex: 1;
}

  .inactive {
    display: none !important;
}


  .active {
    display:initial;
  }
  
  
  body {
    background: #fafafa;
  }
  
  p {
    font-family: var(--font-two);
  }
  .corp-container {
    margin: 0 auto !important;
    max-width: 100% !important;
    padding: 0 15px !important;
    position: relative !important;
    width: 100% !important;
    padding: 0px !important;
    margin: 0px !important;
  }
  
  
  .masthead-sentinel, .site-header {
    margin-bottom: 0px !important;
  }
  
  
  .page-template-default.page.sidebar .site-main,  .single:not(.post) .site-main, .archive:not(.post) .site-main {
    margin: 0 0 0 0 !important;
  }
  
 


  
  .panel-grid {
    flex-direction: column !important;
  }
  
  /*..ul*/
  #content ol, #content ul {
    margin: 0 0 1em 1em;
    padding: 0;
}
  
  
  /*..h1,h2*/
  h1 {
    font-size: 1.8em !important;
    font-family:var(--font-one) !important;
    font-weight:800 !important;
  }
  
  h2 {
    font-size: 1.7em !important;
    font-family:var(--font-two) !important;
    font-weight:700 !important;
  }
  
  h3 {
    font-size: 1.6em !important;
    font-family:var(--font-three) !important;
    font-weight:700 !important;
  }
  
  h4 {
    font-size: 1.5em !important;
    font-family:var(--font-two) !important;
  }
  
  h1, h2, h3, h4, h5, h6 {
  
    margin: .5em 0 !important;
  }
  
  
  
  /*..fixed-height*/
  
  .fh-one {
    height:var(--fixheight-one);
    }
    
    .fh-two {
      height:var(--fixheight-two);
      }
    
      .fh-auto {
        height:auto;
        }
     
        .fh-content {
          height:fit-content;
          }
  
  /*..overlay*/
  .coverlayinner {
    height: auto;
    background: white;
    min-height: fit-content;
    min-width: 400px;
    box-shadow: 3px 3px 3px;
    position: relative;
    left: -1300px; /* Initial left position */
  opacity:0;
  }
  
  .coverlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    display: none;
    opacity: 0;
    z-index: 9999999;
    background-image: url(/wp-content/uploads/2024/03/logo-background.png);
    background-position: center center;
    background-size: cover;
  }
  
  
  .coverlaycover {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.94);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .coverlay.open .coverlayinner {
    transition: left 0.5s ease;
    left: 0; /* Slide in from the left */
    opacity:1;
  }
  
  
  .overlay,.overlay.hidden {
    display:none;
    position:relative;
  }
  .overlay.active {
    display: flex;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: white;
    height: 100%;
    width: 100%;
    z-index: 999;
    justify-content: center;
    align-items: center;
    z-index: 99999999999;
    overflow:auto;
  }
  
  .overlayinner {
    position: relative;
    padding: 20px;
    border: solid 1px #efefef;
    border-radius: 10px;
    overflow-y: scroll;
    max-height: 90%;
    /* box-shadow: 1px 1px 5px inset #333333 !important; */
    height: fit-content;
    height: 100%;
    width: 90%;
  }
  
  .addblock {
    display: flex;
    flex-direction: column;
    gap: .5em;
    margin-bottom: 20px;
  }
  
  .overlayinner .addnew {
      border: solid 1px #efefef;
      padding: 30px;
  }
  
  
  .overlay .close-window {
    background: #333333;
    color: white;
    display: flex
  ;
    height: 40px;
    width: 40px;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 10px;
    right: 10px;
    position: fixed;
    cursor:pointer;
  }
  
  .overlay-inner {
    position: relative;
  }
  
  .overlay-inner {
    position: relative;
    padding: 20px;
    border: solid 1px #efefef;
    border-radius: 10px;
  }
  
  .errmessage.active {
    color: red;
  }
  

  .tcloading {
    opacity:0;
    
    }
    
    .loadingstyle * {
      opacity:0 !important;
    }
    
    .loadingstyle {
    position:absolute;
    background-color:white;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-image:var(--overlay-logo);
    background-size: 20%;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    min-height:200px;
    
    
    }

    .tcloading.coverlay {
      display: flex;
      opacity: 1;
      transition: opacity 0.3s ease;
      background-image: var(--overlay-logo);
      background-size: 20%;
      background-repeat: no-repeat;
      background-position: center center;
      position: fixed;
      top: 0px;
      bottom: 0px;
      right: 0px;
      left: 0px;
    }

    #page.tcloading {

      opacity:0;
      transition: opacity 0.3s ease;
    }
    
    section {
      overflow-y: visible;
  }

    #page.tcloaded {
    
      opacity:1;
      transition: opacity 0.5s ease;
      position: absolute;
      left: 0px;
      right: 0px;
    }
    
    .tcloading.coverlay {
      display: flex;
      opacity: 1;
      transition: opacity 0.3s ease;
      background-image: var(--overlay-logo);
      background-size: 20%;
      background-repeat: no-repeat;
      background-position: center center;
      position: fixed;
      top: 0px;
      bottom: 0px;
      right: 0px;
      left: 0px;
    }
    .tcloading .coverlaycover {
      background-color: transparent;
    }
          
  /*..section*/
  
  section {
    position:relative;
  }
  
  section.full {
    max-width: 100% !important;
    margin: 0px !important;
    padding: 0px !important;
  }
  
  section.full .flex-container {
    max-width: 100% !important;
  }
  
  section.full .left-box-inner {
    max-width:600px !important;
  }
  
  section.full .right-box-inner {
    max-width:600px !important;
  }
  
  section.full .left-box {
    justify-content:flex-end;
  }
  
  section.full .right-box {
  justify-content:flex-start;
  }
  
  /*..flex-container*/
  
  /* Base styling for all flex containers */
  .flex-container {
    display: flex
    ;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        height: auto;
        position: relative;
        align-items: center;
        flex-direction: row;
        min-height: 500px;
  }
  
  /* Modifications for centered flex containers */
  .flex-container.center {
    flex-direction: column;
    justify-content: center; /* Common setting moved to here */
    min-height:unset;
  }
  
  /* Targets all children of a centered flex container */
  .flex-container.center * {
    text-align: center;
    justify-content: center;
    min-height:unset;
  }
  
  /* Full-width flex containers */
  .flex-container.full {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center;
    flex-direction:column;
  }
  
  .flex-container.full .hlcontainer,
  .flex-container.center .hlcontainer {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 4em;
    padding-bottom: 0em;
  }
  
  .flex-container.center .hlcontainer p {
    padding-left: 5%;
    padding-right: 5%;
  }
  
  /*..reverse*/
  
  .flex-container.reverse {
    flex-direction:row-reverse;
  }
  
  /* Styling for elements in reverse-oriented containers */
  .flex-container.reverse .left-box  {
    text-align: left;
    justify-content: left;
    align-items: flex-start;
  }
    
  .flex-container.reverse .right-box .hlcontainer div, .flex-container.reverse .right-box .hlcontainer p {
    text-align: right;
  }
  
  .flex-container.reverse .left-box .hlcontainer div, .flex-container.reverse .left-box .hlcontainer p {
    text-align: left;
  }
  
  .reverse .left-box .hlcontainer {
    text-align: left;
  }
  
  .reverse .right-box .hlcontainer {
    text-align: right;
  }
  
  
  .flex-container.reverse .right-box {
    justify-content: right;
    text-align:right;
  }
  
  
  .flex-container.full.boxed {
    flex-direction: row;
}


  
  /*..hlcontainer*/
  
  
  
    
  .hlcontainer.center * {
    text-align: center;
    justify-content: center;
  }
  
  
  .hlcontainer.center .hlone, .hlcontainer.center .hltwo, .hlcontainer.center p {
    text-align: center;
    justify-content: center;
    max-width: 900px;
    width: 900px;
    flex-direction: column;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  
  .hlcontainer.left .hlone,.hlcontainer.left .hltwo,.hlcontainer.left p {
  
    text-align:left;
    justify-content:left;
    max-width:600px;
  
    }
  
    .hlcontainer.right .hlone,.hlcontainer.right .hltwo,.hlcontainer.right p {
  
      text-align:right;
      justify-content:right;
      max-width:600px;
  
      }
  
  
      .hlcontainer div:nth-of-type(1),.hlcontainer div:nth-of-type(3) {
  
        font-family: var(--font-two);
        font-size:2.1em;
        font-weight: 700;
        line-height: 1.2;
    
        }
  
        .hlcontainer div:nth-of-type(2) {
  
        font-family: var(--font-one);
        font-size:2.5em;
        font-weight: 700;
        line-height: 1.2;
      
          }
   
          .hlcontainer p {
  
            font-family: var(--font-two);
            font-size: 1em;
        
            }
  
  
            .hlcontainer.styletwo div:nth-of-type(1), .hlcontainer.styletwo div:nth-of-type(3) {
  
              font-family: var(--font-one);
              font-size:2.2em;
              font-weight: 700;
              line-height: 1.2;
          
              }
        
              .hlcontainer.styletwo div:nth-of-type(2) {
                font-family: var(--font-one);
                font-size:2.5em;
                font-weight: 300;
                line-height: 1.2;
            }
  
  
            .hlcontainer.stylefive div:nth-of-type(1),.hlcontainer.stylefive div:nth-of-type(3) {
              font-family: var(--font-one);
              font-size:2.4em;
              font-weight: 300;
              line-height: 1.2;
          }
  
          .hlcontainer.stylefive p {
            font-size: 1em;
            font-family: var(--font-three);
        }
        
        .tccolumns.stylethree p {
          font-family: var(--font-three);
          font-size: 1em;

      }
  
                  .hlcontainer.stylethree div:nth-of-type(1),.hlcontainer.stylethree div:nth-of-type(3) {
  
                    font-family: var(--font-one);
                    font-size:2.6em;
                    font-weight: 700;
                    line-height: 1.2;
                
                    }
              
                    .hlcontainer.stylethree div:nth-of-type(2) {
              
                    font-family: var(--font-two);
                    font-size: 3.1em;
                    font-weight: 500;
                    line-height: 1.2;
                  
                      }
              
                  
  
                        .hlcontainer.stylefour div:nth-of-type(1),.hlcontainer.stylefour div:nth-of-type(3) {
  
                          font-family: var(--font-two);
                          font-size:2.9em;
                          font-weight: 700;
                          line-height: 1.2;
                      
                          }
                    
                          .hlcontainer.stylefour div:nth-of-type(2) {
                    
                          font-family: var(--font-two);
                          font-size:3.4em;
                          font-weight: 700;
                          line-height: 1.2;
                        
                            }
                    
                            .hlcontainer.stylefour p {
                    
                              font-family: var(--font-three);
                          
                              }
                              
  
  
                              .hlcontainer p {
                                margin-top: 1em;
                                line-height: 2;
                                font-size: 1.05em;
                            }


  
  /* Base styles for .hlcontainer */
  .hlcontainer {
    opacity: 0;
  }
  
  /* Alignment for child elements within .hlcontainer, excluding .tcbutton */
  .hlcontainer.right *:not(.tcbutton),
  .hlcontainer.left *:not(.tcbutton) {
    text-align-last: left; /* Set initially to left for consistency */
  }
  
  .hlcontainer.right *:not(.tcbutton) {
    text-align: right;
    justify-content: flex-end;
  }
  
  .hlcontainer.left *:not(.tcbutton) {
    text-align: left;
    justify-content: flex-start;
  }
  
  
  .light-one .hlcontainer div:nth-of-type(1), .light-one .hlcontainer div:nth-of-type(3),.light-one .tccolumn h2 {
  color:var(--color-light-one);
  
    }
  
    .light-one .hlcontainer div:nth-of-type(2) {
      color:var(--color-light-two);
      
          }
  
          .light-two .hlcontainer div:nth-of-type(1), .light-two .hlcontainer div:nth-of-type(3),.light-two .tccolumn h2 {
            color:var(--color-light-two);
            
                }
            
                .light-two .hlcontainer div:nth-of-type(2) {
                  color:var(--color-light-one);
                  
                      }

                      .light-one p,.light-two p {
                        color:white;
                      }

                      .light-one .tcbutton {
                        background-image: var(--gradient-five);

                    }
  
  
                      .dark-one .hlcontainer div:nth-of-type(1), .dark-one .hlcontainer div:nth-of-type(3),.dark-one .tccolumn h2 {
                        color:var(--color-dark-one);
                        
                            }
                        
                            .dark-one .hlcontainer div:nth-of-type(2) {
                              color:var(--color-dark-two);
                              
                                  }
                        
                                  .dark-two .hlcontainer div:nth-of-type(1), .dark-two .hlcontainer div:nth-of-type(3),.dark-two .tccolumn h2 {
                                    color:var(--color-dark-two);
                                    
                                        }
                                    
                                        .dark-two .hlcontainer div:nth-of-type(2) {
                                          color:var(--color-dark-one);
                                          
                                              }
  
  .tcboxinner .hlcontainer {
    padding: 0px !important;
}
  
    

.underline {
  position:relative;
}

.underline:after {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-image: url(/wp-content/themes/boardroom-child/images/marker-mark-through.png);
  background-color: unset !important;
  display: flex
;
  justify-content: center;
  align-items: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
  
  /* Base styles for .hlcontainer */
  .hlcontainer {
    opacity: 0;
  }
  
  /* Alignment for child elements within .hlcontainer, excluding .tcbutton */
  .hlcontainer.right *:not(.tcbutton),
  .hlcontainer.left *:not(.tcbutton) {
    text-align-last: left; /* Set initially to left for consistency */
  }
  
  .hlcontainer.right *:not(.tcbutton) {
    text-align: right;
    justify-content: flex-end;
  }
  
  .hlcontainer.left *:not(.tcbutton) {
    text-align: left;
    justify-content: flex-start;
  }
  
  .hlcontainer.lrl div:nth-of-type(1) {
    justify-self: start;
}

.hlcontainer.lrl div:nth-of-type(2) {
  justify-self: center;
}

  .hlcontainer.lrl div:nth-of-type(3) {
    justify-self: end;
}
  
  
  /*..left-box right-box*/
  
  .left-box {
    transform: translateX(-20px);
  }
  
  .right-box {
    transform: translateX(20px);
  }
  
  .left-box.imagebox {
    min-height:500px;
  }
  
  .right-box.imagebox {
  min-height:500px;
  }
  
  .left-box, .right-box {
    align-content: center; /* Align content to stretch in cross-axis */
    width: 50%; /* You can keep the width to split equally */
    flex: 1; /* Flex shorthand for flex-grow, flex-shrink and flex-basis */
    display: flex;
    padding: 10px;
    transition: opacity 0.3s ease;
    flex-direction: column;
    position: relative;
  }
  
  .left-box.bottom,.right-box.bottom {
    align-content: flex-end; 
  }
  
  .left-box.top,.right-box.top{
    align-content: flex-start; 
  }

  .full .left-box {
    width: fit-content;
    align-items: end;
}

.full .right-box {
  width: fit-content;
  align-items: start;
}
  
  /*3D*/

  .threed.visible {
    perspective: 100px;
    transform: translateX(0%) !important;
}


.threed {
    perspective: 20px;
    transition: all 0.3s ease;
    transform: translateX(100%);
    opacity: 1;
}

  .threed .tccolumns {
    transform: rotateY(-.93deg);
}
  
  
  /*..skew*/
  .skew {
    transform: skew(5deg, 0deg) !important;
  }
  
  .skew * {
    transform: skew(-5deg, 0deg);
  }

  
  
  /*..tccolumns*/
  .tccolumns.skew.inline {
    width: 100%;
    flex-wrap: nowrap;
    overflow: auto;
    padding: 0px;
    gap: 0px;
    background: transparent;
    max-width: 100%;
  }
  
  .tccolumns.skew.inline .tccolumn {
    min-width: 30em;
  }
  
  
  
  .tccolumns {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 50px auto 0;
    max-width: 1200px;
    height: fit-content;
    padding: 20px;
    gap: var(--tccolumn-gap);
  }
  
  /* Column sizing for different layouts */
  .tccolumns.two .tccolumn,
  .tccolumns.three .tccolumn,
  .tccolumns.four .tccolumn {
    flex: 1;
  }
  
  .tccolumns.two .tccolumn {
    width: calc(50% - var(--tccolumn-gap) / 2);
    flex: 1 1 calc(50% - var(--tccolumn-gap) / 2);
  }
  
  .tccolumns.three .tccolumn {
    width: calc(33.3% - var(--tccolumn-gap) * 2 / 3);
    flex:1 1 calc(33.3% - var(--tccolumn-gap) * 2 / 3);
  }
  
  .tccolumns.four .tccolumn {
    width: calc(25% - var(--tccolumn-gap) * 3 / 4);
    flex: 1 1 calc(25% - var(--tccolumn-gap) * 3 / 4);
  }
  
  /* Paragraphs inside .tccolumns */
  .tccolumns p {
    color: var(--color-dark);
    font-family: var(--font-three);
    font-size: .95em;
    text-align: justify;
    text-align-last: center;
  }
  
  /* Base styles for all icons inside .tccolumns */
  .tccolumns > i {
    display: flex
;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: fit-content;
}
  
  /* Style variations for .tccolumns */
  .tccolumns .tccolumn {
    background: var(--gradient-two);
    color: var(--color-light);
    border-radius: 10px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  }
  
  .tccolumns.stylefour > i {
    padding: 1.5em;
    border-radius: 50%;
    margin: -5em auto 15px;
    background-color: var(--color-one);
    border: solid 10px black;
  }
  
  /* Style Two: Icon Left with Headline */
  .tccolumns.styletwo .tccolumn {
    background: var(--gradient-three);
    color: var(--color-light);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
  }
  
  .tccolumns.styletwo .hicon {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-start;
    width: 100%;
    margin: -3em 0 1em;
  }
  
   /* Style Four: Square Icon Box */
   .tccolumns.stylethree .tccolumn {
    background: var(--gradient-light);
    color: var(--color-light);
    border-radius: 5px;
    padding: 20px;
    text-align: center;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}

  .styletwo .tccolumn p {
    background: white;
    border-radius: .5em;
}
  
.tccolumns.stylethree > i {
  padding: 10px;
  background-color: var(--color-five);
  border-radius: 0%;
  margin-bottom: -10px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -4em;
}
  
  .tccolumns.stylethree > i img {
    width: 50px;
    height: 50px;
  }
  
  .tccolumns.stylethree h2 {
    font-family: var(--font-three) !important;
    font-size: 1.5em;
    font-weight: 700 !important;
    margin-bottom: 5px;
}
  
.tccolumns.stylethree p {
  font-family: var(--font-three);
  font-size: 1em;
  line-height: 1.6;
  padding: 0em 1em;
}

  .tccolumns.stylethree .icon {
    display: flex;
    justify-content: center;
    margin-top: -3em;
}
  
  /* Style Five: Icon on Top with Large Padding */
  .tccolumns.stylefour .tccolumn {
    background: var(--gradient-five);
    color: var(--color-light);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.2);
  }
  
  .tccolumns.stylefive > i {
    background-color: var(--color-light);
    border-radius: 50%;
    padding: 25px;
    margin-bottom: 20px;
  }
  
  .tccolumns.stylefive > i img {
    width: 70px;
    height: 70px;
  }
  
  .tccolumns.stylefive h2 {
    font-family: var(--font-two);
    font-size: 1.8em;
    font-weight: 800;
    margin-bottom: 20px;
  }
  
  .tccolumns.stylefive p {
    font-family: var(--font-three);
    font-size: 1.1em;
    line-height: 1.8;
  }
  
  /* Style Six: Icon Aligned Right with Headline and Text */
  .tccolumns.stylefive .tccolumn {
    background: var(--gradient-six);
    color: var(--color-light);
    border-radius: 10px;
    padding: 25px;
    text-align: left;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  
  .tccolumns.stylefive > i {
    margin-left: 20px;
    padding: 10px;
    background-color: var(--color-light);
    border-radius: 50%;
  }
  
  .tccolumns.stylefive i img {
    width: 60px;
    height: 60px;
  }
  
  .tccolumns.stylefive h2 {
    font-family: var(--font-one);
    font-size: 1.6em;
    font-weight: 700;
    margin-bottom: 15px;
  }
  
  .tccolumns.stylefive p {
    font-family: var(--font-two);
    font-size: 1.1em;
    line-height: 1.6;
  }
  

  /* Text and heading adjustments across styles */
  .tccolumns h2 {
    margin: 0;
    padding: 0;
    line-height: 1.3;
  }
  
  .tccolumns h2,
  .tccolumns.stylefive h2,
  .tccolumns.styletwo h2 {
    font-family: var(--font-one); /* Adjust based on actual usage */
    color: var(--color-light);
    font-weight: 800;
    font-size: 2em;
    margin-bottom: 10px;
  }
  
  /* P specific to styleone */
  .tccolumns p {
    font-size: 1em;
    line-height: 1.6;
  }
  
  /* Style-specific i adjustments */
  .tccolumns i img, .tccolumns.styletwo i img, .tccolumns.stylethree i img, .tccolumns.stylefive i img {
    width: 100px;
    height: 100px;
    filter: drop-shadow(2px 4px 3px #999999);
}
  

  .tccolumns.full .tccolumn {
    min-width: 400px;
    max-height: 230px;
    }

.tccolumns.full {
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    flex-wrap: nowrap;
    overflow: auto;
    max-width: 100%;
    min-width: 100%;
    justify-content: flex-start;

}
  




  /*..tccolumn*/
  
  /* Base styles for all .tccolumn containers */
  .tccolumn {
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(-20px);
    justify-content:flex-start;
  }
  
  /* Text and padding alignment for .left and .right oriented columns */
  .tccolumn.left, 
  .tccolumn.right {
    padding: 3em;
  }
  
  .tccolumn.left *,
  .tccolumn.right * {
    text-align-last: left; /* Set initially to left */
  }
  
  .tccolumn.left * {
    text-align: left !important;
    justify-content: flex-start;
  }
  
  .tccolumn.right * {
    text-align: right !important;
    justify-content: flex-end;
    text-align-last: right; /* Overrides previous setting for .right */
  }
  
  /* Padding reset for paragraphs in both .left and .right */
  .tccolumn.left p,
  .tccolumn.right p {
    padding: 0px;
  }
  
  /* Styling for paragraphs in any .tccolumn */
  .tccolumn p {
    padding: 30px;
    justify-content: center;
    text-align: center;
    height: -webkit-fill-available;
    display: flex;
    align-items: center;
    flex: 1;
}
  
  /* Specific rounded style for .tccolumn */
  .tccolumn.rounded {
    background: #efefef;
    border-radius: 20px;
    padding: 20px;
    position: relative;
    top: 20px;
    filter: drop-shadow(0.1px 0.1px 1px #666666);
    -webkit-filter: drop-shadow(0.1px 0.1px 1px #666666);
  }
  
  /* Rounded style for paragraphs within .tccolumn.rounded */
  .tccolumn p.rounded {
    border-radius: 3px;
  }
  
  /*..tcboxinner*/
  
  
  .tcboxinner.full {
    min-width: 1200px;
    height: min-content;
  }
   
  
  .tcboxinner.full {
    min-width: 1200px;
    height: min-content;
  
  }

  .tcboxinner {
    max-width: 600px;
}
  
  
  /*..lfbackimg*/
  
  .backimg {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  
  .backimg img {
    opacity: 0;
    display: none;
  }
  
  
  
  /*..slideblocks*/
  
  
  
  .slideblocks:after {
    content: '';
    background-image: url(/wp-content/themes/traffic-child/images/blurred-edge.png);
    width: 30px;
    position: absolute;
    background-repeat: no-repeat repeat;
    z-index: 999999;
    height: auto;
    right: 0px;
    height: 100%;
    opacity: .2;
  }
  
  
  .slideblocks:before {
    content: '';
    background-image: url(/wp-content/themes/traffic-child/images/blurred-edge.png);
    width: 30px;
    position: absolute;
    background-repeat: no-repeat repeat;
    z-index: 999999;
    height: auto;
    left: 0px;
    height: 100%;
    opacity: .2;
    transform:scaleX(-1);
  }
  
  
  .slideblocks {
    width: 100%;
    position: relative;
    width: 100%;
    position: relative;
    overflow: hidden;
    
  }
  
  .slideblocks .tcbutton {
  justify-content:center;
    align-items: flex-end;
  }
  
  .slideblocks button.prev {
    left: 0;
  }
  
  .slideblocks button.next {
      right: 0;
  }
  
  .slideblocksinner .tccolumn {
    flex: 1;
    justify-content: center;
    align-items: center;
    border:solid 1px #efefef;
  }
  
  
  
  .slideblocks button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--color-accent);
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 9999999;
    font-size: 30px;
    filter: drop-shadow(2px 2px 2px #333333);
  }
  
  .slideblocksinner {
    width: fit-content;
    display: inline-flex;
    transition: transform .5s ease;
  }
  
  .slideblocksinner .tccolumn {
    flex:1;
  }
  
  .sbtext {
      width: 100%;
      height:100%;
  }
  
  .sbtextinner {
    width: 100%;
    display: flex
  ;
    flex-direction: column;
    align-items: center;
    padding: 1em;
    height: 100%;
    justify-content: space-between !important;
  }
  
  .slideblocks {
    display: flex
    ;
        overflow: hidden;
        position: relative;
        width: 100vw;
        margin-top: 5em;
        font-size: .8em;
        max-width: 100vw;
  }
  
  .slideblocks .tccolumn {
    width: 26em;
    transition: transform 0.5s ease, opacity 0.5s ease;
    position: relative;
    flex-shrink: 0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: 26em;
    width: 26em;
  }


  .slideblocks .tccolumn {
    position: relative;
}

.slideblocks .tccolumn .slideinner {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  align-items: center;
  justify-content: center;
  display: flex
;
  flex-direction: column;
  align-items: stretch;
}



  .slideblocks .buttonleft {
    left: 10px;
  }
  
  .slideblocks .buttonright {
    right: 10px;
  }
  
  
  
  .slideblocks .tfimagebox .imgblock {
    width: 100%;
    height: fit-content;
    position: relative;
  }
  
  .slideblocks .tfimagebox {
    max-height: 300px !important;
  }
  
  .slideblocks .tccolumn p {
    padding: .6em 1em;
    margin-bottom: 0px;
  }
  
  .slideblocks .tccolumn h3 {
    margin: 0px;
    font-family: var(--font-two);
    font-weight: 800;
    font-size: 1.5em;
    margin-bottom: 1em;
  }
  
  .slideblocks .tccolumn p.mini-scroll {
    font-size: .8em !important;
  
  }
  
  
  
  /*..mini-scroll*/
  
  .mini-scroll {
    padding: 10px !important;
    text-align: left !important;
    padding-top: 0px;
    border: solid 1px #efefef;
    border-width: 0px 0px 1px 0px;
    font-size: 14px !important;
    color: #333333;
    overflow: auto;
    max-height: 80px;
    height: 80px !important;
    display: block !important;
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
   
    background-position-y: bottom !important;
    background-repeat: repeat no-repeat !important;
  }
  .mini-scroll::-webkit-scrollbar-track
  {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    opacity:.3;
  
  }
  
  .mini-scroll::-webkit-scrollbar
  {
    width: 3px;
    background-color: #F5F5F5;
    opacity:.3;
  }
  
  .mini-scroll::-webkit-scrollbar-thumb
  {
    background-color: var(--color-accent);
    opacity:.3;
  }
  
  .mini-scroll:hover::-webkit-scrollbar-thumb {
    opacity:1;
  }
  
  
  /*..video*/
  
  .video-container {
    padding:80px;
  }
  
  .video-container {
    max-width: 80% !important;
  }
  
  .wp-video {
  border-radius: 20px;
  overflow: clip;
  filter: drop-shadow(2px 4px 16px black);
  -webkit-filter:drop-shadow(2px 4px 16px black);
  
  
  }
  
  .wp-video {
  border-radius: 30px !important;
  overflow: clip;
  filter: drop-shadow(2px 4px 6px black);
  -webkit-filter:drop-shadow(2px 4px 6px black);
  max-width: 700px !important;
  height: auto !important;
  margin-left: auto;
  margin-right: auto;
  }
  
  /*..tcbutton*/
  
  
  
  .tcbutton .btext:not(.noicon,.icononly,.faicon) i {
    background-image: var(--site-icon);
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    width: var(--icon-width);
    height: var(--icon-height);
    position: absolute;
    left: 0px;
    scale: var(--icon-scale);
    background-position: center;
  }
  
  /* Hover state */
  .tcbutton .btext:hover {
    background-color: var(--color-dark);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    color: white !important;
    text-shadow: 1px 1px 3px black;
  }
  
  /* Active state */
  .tcbutton .btext:active {
    box-shadow: inset 0 2px 4px rgba(0, 0, 1, 1) !important;
    background-color: #555555;
  }
  .tcbutton .btext:visited {
    color: white !important;
  }
  

  .tcbutton {
    position: relative;
    height: 2.7em;
    width: fit-content;
    display: flex
;
    align-items: center;
    cursor:pointer;
}

  
  
  .tcbutton .btext {
    background-image: var(--button-background);
    display: inline-flex
;
    text-align: center;
    text-decoration: none;
    font-size: 1em;
    border: none;
    color: white;
    font-family: var(--font-three);
    cursor: pointer;
    text-transform: capitalize;
    align-items: center;
    transition: all 0.3s;
    position: relative;
    font-weight: initial;
    width: fit-content;
    padding: .5em .7em;
    clip-path: polygon(0% 5%, 0% 0%, 97% 0%, 100% 10%, 100% 90%, 97% 100%, 0% 100%, 0% 95%, 10% 78%, 10% 21%);
    padding-left: 1.5em;
    margin-left: -.5em;
  
              }
  

              .tcbutton.one span {
                background-image: var(--gradient-two);
            }

              .tcbutton.compact .btext {
                font-size: 14px;
                padding: 5px 20px;
              }
              
              .tcbutton.simple .btext {
                font-family: var(--font-two);
                font-weight: bold;
              }
              
              .buttonbox {
                display: inline-flex;
                gap: 0.4em;
                margin-top: 20px;
              }
              
              .tcbutton.micro .btext {
                font-size: 12px;
                padding: 2px 8px !important;
              }
  
              .tcbutton i {
                position: relative;
                top: .35em;
                right: -.2em;
            }
              
              .noslider .tcbutton .btext {
                display: inline-flex
              ;
                justify-content: flex-start;
                flex-wrap: nowrap;
                margin-left: 0px !important;
                margin-right: auto;
                margin-top: 2em;
              }
              
              .tcbutton.noicon i {
                  display: none !important;
              }
  
              .tcbutton i svg {
                height: 3.5em;
                position: relative;
                top: .05em;
            }
  
  img.custom-logo {
    width: 170px;
  }
  
  
  #products a.tcbutton.visible {
    margin-bottom: 5em;
    margin-top: -1em;
}
  
  body.ismobile {
    font-size:.8em;
  }
  
  

  .tcboxinner a.tcbutton {
    margin-top: 1em;
}
  
  

  
  .tc-two-column .flex-container {
    display:flex;
    flex-wrap:nowrap;
  }
  
  
  
  .left-box-inner,.right-box-inner {
    flex:1;
    flex-direction:column;
    max-height:fit-content;
    display:flex;
    max-width: 600px;
  }
  
  
  
  
  
  .site-footer {
    background: #363a43;
    margin-top: 80px;
    width: 100%;
  }
  
  
  
  
  
  
  .buttonunder {
    margin-top: 1.5em;
  }
  
  .padone {
    padding:1em;
  }
  
  .padtwo {
    padding:2em;
  }
  
  .padthree {
    padding:3em;
  }
  
  .padfour {
    padding:3em;
  }
  
  .back.white {
    background-color:white;
  }
  
  .back.dark {
  background-color:#333333;
  }
  
  .rounded {
    border-radius:1em;
  }
  
  
   
  .scrollblock {
    max-height: 280px;
    overflow-y: auto;
    position: relative;
    border: solid 1px rgba(240, 240, 240, .4);
    border-width: 1px 1px 6px 1px;
    border-radius: 3px;
  }
  
  .stack.scrollblock {
    flex-direction: column;
    display: flex;
    gap: .3em;
  }
  
  
  .tfimagebox {
    position: relative;
    width: 100%;
    display: flex
  ;
    top: 0px;
    height: 373px;
    align-items: flex-start;
    flex: 1;
  }
   
  .noslider .tfimagebox {
    max-width: 290px;
  }
  
  .noslider .tccolumn {
    flex-wrap: wrap !important;
    border: solid 1px #efefef;
    padding: 1em;
    margin: 1em;
    background: white;
    display: inline-flex
  ;
    height: fit-content;
    max-width: 1200px;
    flex-direction: row;
    gap: 2em;
    align-items: end;
  }
  
  .noslider .sbtext {
    text-align: left;
    flex: 1 !important;
    max-width: 60%;
    justify-content: flex-start;
    text-align: left;
  }
  
  span.portcats {
    background-image: var(--gradient-one);
    color: white;
    border-radius: 1em;
    padding: .2em .78em;
  }
  
  
  
  .noslider .lfbackimg {
    clip-path: none;
  }
  
  .noslider .imgblock {
    width: 100%;
    background-image: var(--gradient-four);
    padding: 1em;
    border-radius: .3em;
  }
  
  p.mainportcats { 
    display: flex
  ;
    flex-wrap: wrap;
    gap: .4em .4em;
    padding: 0px;
    padding-bottom: 2em;
  }
  
  
  .noslider .imgblock {
    width: 100%;
  }
  
  .noslider .sbtextinner *:not(.tcbutton) {
    text-align: left !important;
    justify-content: flex-start !important;
    width: 100%;
    padding: 0px !important;
    overflow: visible;
    border: none !important;
  }
  
  .noslider h3 {
    margin-top: 0px !important;
  }
  
  .noslider .sbtextinner {
    padding: 0em 1em 1em 1em;
    margin-top: 0em;
  }
  
  
  
  
  
  .right-box {
    opacity:0;
  }
  
  .left-box {
    opacity:0;
  }
  
  
  
  
  .cf-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  
  .cf-col {
    flex: 1;
    min-width: 45%;
    box-sizing: border-box;
  }
  
  .cf-col label {
    display: block;
    margin-bottom: 5px;
  }
  
  .cf-row label {
    width: 100%;
  }
   
  
  
  .cf-row select,
  .cf-row input[type="text"],
  .cf-row input[type="email"],
  .cf-row textarea {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
  }
  
  .cf-row textarea {
    height: 100px;
  }
  
  
  .cf-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 0.7em;
  }
  .cf-row span {
    width: 100%;
  }
  
  
  header.entry-header {
    background-image: var(--gradient-four);
    color: white;
    text-align: right;
  
  }
  
  header.entry-header h1 {
    color: white;
    padding: .1em .3em;
    margin-top: 0px !important;
  }
  
  .cf-row label {
    width: 100%;
    text-align: left !important;
    font-family: var(--font-two);
    font-weight: 500;
  }
  
  .wpcf7 {
    background: #fafafa;
    padding: 3em;
    border-radius: 1em;
    border: solid 4px var(--color-two);
  }
  
  span.wpcf7-spinner {
    width: fit-content;
  }
  
  .cf-col input,.cf-col textarea {
    text-align: left !important;
  }
  .center.button-box {
    width: 100%;
    display: flex
  ;
    margin-bottom: 5em;
    justify-content: center;
  }
  
  .noslider .tccolumn {
    border: solid 1px #efefef;
    padding: 1em;
    margin: 1em;
    background: white;
    align-items:normal;
  }
  
  body:not(.is-home-page) section:first-of-type .flex-container {
    padding-top: 0px;
  }
  
  .menu-item a {
    font-family: var(--font-two);
    font-size: .8rem;
    font-weight: 600;
  }
  
  /*----Custom Post Type*/
  
  .works #main {
    display: flex
  ;
    flex-wrap: wrap;
  }
  
  #primary.works {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    width: 100%;
    background: white;
    padding: 1em 4em;
    font-size: .9em;
    margin-left: 1em;
    margin-right: 1em;
  }
  
  .works article {
    flex: 1 1 60%;
    width: 60%;
    padding: 0em 2em;
    border: solid 1px var(--color-one);
    border-width: 0px 0px 0px 1px;
    margin-left: 3em;
  }
  
  .works .portfolio-image {
    flex: 1 1 30%;
  }
  
  .portfolio-image {
    background-image: var(--gradient-three);
    padding: 1em;
  }
  
  /*..shapes*/

  .dshape_chevron {
    padding-top: 3em;
    padding-bottom: 5em;
}
  


  /*++PRIMARY MEDIUM CSS*/
 
  .ismedium  .tccolumns.two .tccolumn {
  width: calc(50% - var(--tccolumn-gap) / 2);
  flex: 1 1 calc(50% - var(--tccolumn-gap) / 2);
}

.ismedium  .tccolumns.three .tccolumn {
  width: calc(100% - var(--tccolumn-gap) / 1);
  flex: 1 1 calc(100% - var(--tccolumn-gap) / 1);
}

.ismedium  .tccolumns.four .tccolumn {
  width: calc(50% - var(--tccolumn-gap) / 2);
  flex: 1 1 calc(50% - var(--tccolumn-gap) / 2);
}


.tcboxinner {
  position:relative;
}
  /*+CAROUSEL CSS*/
  .tcboxinner.slides {
    align-items: center;
    justify-content: center;
    align-content: center;
    background: var(--color-one) !important;
    font-size: .9em !important;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%, 50% 0%);
    width: 36em;
    height: 40em;
    padding: 5em;
    opacity: 0;
    position: absolute;
    top: 0px;
    transform: translate(-250%, 0) scale(1) !important;
    transition: all 1s ease !important;
}

  /*+CAROUSEL CSS*/
  .tcboxinner.slides:after {
    content:'';
    position:absolute;
    top:0px; 
    right:0px;
    left:0px;
    bottom:0px;
    clip-path: polygon(50% 5%, 95% 27%, 95% 73%, 50% 95%, 5% 73%, 5% 27%, 0% 25%, 0% 76%, 50% 100%, 100% 75%, 100% 25%, 50% 0%, 0% 25%, 0% 30%);
    background-color:var(--color-one);
    width: 36em;
    height: 40em;
    padding: 5em;
    opacity: 0;
    position: absolute;
    top: 0px;
    z-index:1;
}

  .flex-container.carousel .left-box, .flex-container.carousel .right-box {
    width: 50%;
    min-height: 600px;
    align-items: center;
    justify-content: center;
    flex: 1 1 50%;
}



.carousel.left-box,.carousel .left-box {
min-height:500px;
}

.carousel.right-box,.carousel .right-box {
  min-height:500px;
}






  /*++PRIMARY MOBILE CSS*/
  
  /*++body*/
  .ismobile header#masthead {
    margin-bottom: 0px;
  }
  
  /*++section*/
  .ismobile section { 
    padding: 0px;
  }
  
  /*++flex-container*/
  
  .ismobile .flex-container {
    flex-direction: column;
    height: fit-content;
    min-height: fit-content;
    max-height: fit-content;
  }
  
  .ismobile .moreverse.flex-container {
    flex-direction: column-reverse;
  }
  
  .ismobile .left-box, .ismobile .right-box {
    width: 100%;
}
  
  .ismobile .tccolumn {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  
  
  .ismobile .left-box *:not(.tcbutton), .ismobile .right-box *:not(.tcbutton) {
    text-align: center;
  }
  
  .ismobile .flex-container.full.boxed {
    flex-direction: column;
}
  
  
  .ismobile .tccolumns {
    flex-direction: column;
  }
  
  p.mini-scroll {
    background: white;
    margin-bottom: 1em !important;
    border-radius: 2px;
  }
  
  .ismobile .hlcontainer *:not(.bounceword) {
    text-align: center !important;
    justify-content: center !important;
  }
  
  .ismobile .hlcontainer {
    padding-right: 2em;
    padding-left: 2em;
  
  }
  

  .ismobile .tccolumns.full {
    flex-direction: row;
    scale: 1.1;
}

.ismobile .hlcontainer p {
  font-size: 1.1em;
}
  
  .ismobile .slideblocks .tccolumn {
    width: 26em !important;
  }
  
  .ismobile .flex-container.center .hlcontainer *:not(.bounceword) {
    width: 100%;
}
  
  .ismobile .tccolumns .tccolumn {
    margin-bottom: 4em !important;
  }
  
  .ismobile .styletwo.tccolumns .tccolumn {
    margin-bottom: 4em !important;
  }
  
  .ismobile .stylethree.tccolumns .tccolumn {
    margin-bottom: 4em !important;
  }
  
  .ismobile .stylefour.tccolumns .tccolumn {
    margin-bottom: 4em !important;
  }
  
  .ismobile .stylefive.tccolumns .tccolumn {
    margin-bottom: 4em !important;
  }


  
  .ismobile .wpcf7 {
    max-width: 90%;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 50% !important;
  }
  
  .ismobile .wpcf7-submit {
    max-width: 200px;
  }
  
  .ismobile .noslider .tccolumn {
    width: 100% !important;
    flex: 1 1 100% !important;
    height: fit-content;
  }
  
  .ismobile .noslider .tccolumn {
    height: auto !important;
  }
  
  .ismobile .noslider .tccolumn .tcbutton {
    width: fit-content !important;
  }
  
  
  .ismobile .noslider .tccolumn * {
    width: 100% !important;
    max-width: 100% ! IMPORTANT;
  }
  
  
  
  .ismobile .noslider .tccolumn {
    height: auto !important;
    flex-direction: column;
    padding: 2em;
  }
  




  .ismobile  .tccolumns.two .tccolumn {
    width: calc(100% - var(--tccolumn-gap) / 1);
    flex: 1 1 calc(100% - var(--tccolumn-gap) / 1);
  }
  
  .ismobile  .tccolumns.three .tccolumn {
    width: calc(100% - var(--tccolumn-gap) / 1);
    flex: 1 1 calc(100% - var(--tccolumn-gap) / 1);
  }
  
  .ismobile  .tccolumns.four .tccolumn {
    width: calc(100% - var(--tccolumn-gap) / 1);
    flex: 1 1 calc(100% - var(--tccolumn-gap) / 1);
  }
  
  .ismobile .moshape_chevron {
    margin-top: -9em;
    }
  
.ismobile .shaped {
  padding-top: 3em;
  padding-bottom: 3em;
}


.hlcontainer.lrl div:nth-of-type(1) {
  justify-self: center;
}

.hlcontainer.lrl div:nth-of-type(2) {
justify-self: center;
}

.hlcontainer.lrl div:nth-of-type(3) {
  justify-self: center;
}



  /*----EXTRA CSS*/
  
  
  body:not(.ismobile) .hero .tcboxinner {
    background: transparent;
  }
  
  .ismobile .right-box.image-box {
    position: relative;
    top: -11em;
  }
  
  
  ul.arrows {
    margin: 0px;
    display: flex;
    flex-direction: row;
    position: relative;
    top: -4em;
    left: 0px;
    max-width: 400px;
    align-items: flex-end;
    width: 600px;
    padding-top: 14%;
    overflow: hidden;
    padding-left: 2%;
    padding-right: 2%;
    left: 10%;
    z-index: -1;
    overflow:visible;
  }
  
  .arrows li {
    height: 100%;
    list-style-type: none;
    border: solid;
    width: 20%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(0% 10%, 50% 0%, 100% 10%, 97.7% 10.5%, 90% 10.5%, 90% 100%, 10% 100%, 10% 10.5%, 3.3% 10.5%);
    border: transparent;
    scale: 1.3;
    z-index: 0;
    transition: all 0.3s ease;
    transform: translate(0px, 100%); 
  
  }
  
  
  ul.arrows.right {
  
  }
   
  
  .arrows li span {
    transform: rotate(-90deg);
    transform-origin: center center;
    white-space: nowrap;
    font-size: 35px;
    position: absolute;
    font-family: var(--font-two);
    font-weight: 800;
    opacity: .4;
  }
  
   
  
  .arrows li:nth-of-type(1) {
    height: 49%;
    background-color: var(--color-one);
    z-index: -1;
    color: var(--color-two);
  
  
  }
  
  .arrows li.active:nth-of-type(1) {
    transform: translateY(7.5%);
  }
  
  .arrows li:nth-of-type(2) {
    height: 55%;
    background-color: var(--color-two);
    color: var(--color-three);
   
  
  }
  
  .arrows li.active:nth-of-type(2) {
   
    transform: translateY(6%);
  
  }
  
  .arrows li:nth-of-type(3) {
    height: 50%;
    background-color: var(--color-three);
    z-index: -1;
    color: var(--color-two);
  
  }
  
  .arrows li.active:nth-of-type(3) {
  
    transform: translateY(7.7%);
  }
  
  .arrows li:nth-of-type(4) {
    height: 62%;
    background-color: var(--color-four);
    color: var(--color-one);
  }
  
  .arrows li.active:nth-of-type(4) {
  
    transform: translateY(4.1%);
  }
  
  .arrows li:nth-of-type(5) {
    height: 72%;
  background-color:var(--color-five);
  color:var(--color-two);
  
  
  }
  
  .arrows li.active:nth-of-type(5) {
  
  transform: translateY(2.1%);
  
  }
  
  .ismobile .arrows {
    left: unset;
    scale: .55;
    overflow: visible;
    padding: 0px !important;
    margin: 0px !important;
    align-items: self-end;
    margin-bottom: 0px !important;
    top: -1em;
  }
  
  .ismobile .left-box.text-box {
      margin-top: -22em;
      z-index: 99999999;
  }
  
  .ismobile .hero .tcboxinner {
    padding: 1em;
    padding-top: 2em;
    padding-bottom: 2em;
  }
  
  .ismobile .works article {
    padding: 0px;
    border: none;
    width: 100%;
    flex-basis: 100%;
    margin-left: unset;
  }
  
  .inner-pimage {
    margin-bottom: 1em;
  }
  
  .inner-pimage img {
    border-radius: .5em;
    overflow: hidden;
    height: fit-content;
    position: relative;
    margin-bottom: 1em;
  }
  
  ul.portfolio-categories {
    margin: 0px !important;
    padding: 0px;
  }
  
  .portfolio-categories li {
    list-style-type: none;
    background: white;
    height: 3em;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 1em;
    border: solid 1px #efefef;
    margin-bottom: .5em;
    border-radius: .3em;
    font-family: var(--font-two);
    font-weight: 300;
    background-image: var(--gradient-seve);
    border: solid 1px var(--color-two);
    border-width: 0px 0px 0px 10px;
  }
  
  .ismobile ul.portfolio-categories {
    margin: 0px !important;
    padding: 0px;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
  }
  
  .ismobile .portfolio-categories li {
    height: 2em;
    flex: 1;
  }
  
  .worktitle {
    flex-basis: 100%;
    border: solid 1px #efefef;
    border-width: 0px 0px 1px 0px;
    margin-bottom: 2em;
  }
  
  .tccolumn.serv * {
    text-align: left;
    padding: 0px;
    text-align-last: left;
  }
  
  .full.services.flex-container {
    flex-direction: column;
  }
  
  .arrow-right {
  
    clip-path: polygon(90% 0%, 100% 50%, 90% 100%, 89.5% 97.7%, 89.5% 90%, 0% 90%, 0% 10%, 89.5% 10%, 89.5% 3.3%);
    background-image: var(--gradient-one);
    padding-right: 6em !important;
    padding-top: 4em !important;
    padding-bottom: 4em !important;
  }
  
  .arrow-left {
   
    clip-path: polygon(10% 0%, 0% 50%, 10% 100%, 10.5% 97.7%, 10.5% 90%, 100% 90%, 100% 10%, 10.5% 10%, 10.5% 3.3%);
    background-image: var(--gradient-four);
    padding-left: 6em !important;
    padding-top: 4em !important;
    padding-bottom: 4em !important;
    
  } 
   
  .ismobile .sidearrows.arrow-left {
    padding-left: 14% !important;
    padding-right: 0px !important;
    background-color: var(--color-one);
  }
  
  .ismobile .sidearrows.arrow-right {
    padding-right: 14% !important;
    padding-left: 0px !important;
    background-color: var(--color-four);
  }
  
  .sidearrows .tccolumn {
      flex: 1 1 30.3%;
      width: 30.3%;
  }
  
  
  
  .sidearrows {
    gap: 1em;
    flex-wrap: nowrap;
  }
  
  .tccolumn.serv {
      padding: 1em;
      background: white;
      border-radius: 1em;
  }
  
  
  
  .arrow-left {
    transform: translateX(100%);
    transition: transform .3s ease;
  }
  
  p.contactp {
    margin-bottom: 2em !important;
  }
  
  .arrow-right {
    transform: translateX(-100%);
    transition: transform .3s ease;
  }
  
  .tccolumn.serv p {
    padding-bottom: 1em;
  }
  
  .tccolumn.serv h3 {
    margin: 0px !important;
    margin-top: 0px !important;
    margin-right: 0px !important;
    margin-bottom: 0px !important;
    margin-left: 0px !important;
  }
  
    .ismobile .arrow-left h3,.ismobile .arrow-right h3 { 
      margin: 0px !important;
      padding: 0px !important;
      height:fit-content !important;
    }
  
  .ismobile .services .tccolumns.three {
      padding: 20px;
      margin-bottom: -22.2%;
      min-height: 18em;
  }
  
  .ismobile .sidearrows {
    gap: .6em;
    height: fit-content;
    padding-top: 4em !important;
    padding-bottom: 4em !important;
    padding-left: 4% !important;
    padding-right: 4% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    flex-direction: unset !important;
    flex-wrap: wrap;
      
  }
  
  .ismobile .tccolumn.serv {
      padding: 0em !important;
      height: 0px !important;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0px !important;
       height: fit-content;
      min-height: fit-content;
      max-height: fit-content;
      background: none;
  }
  
  .ismobile .arrow-right .serv h3 {
      width: 100%;
      justify-content: flex-end;
      display: inline-flex;
  }
  
  .ismobile .arrow-left .serv h3 {
      width: 100%;
      justify-content: flex-start;
      display: inline-flex;
  }
  
  
  
  .ismobile .arrow-left .tccolumn.serv p {
      width: 100% !important;
      padding-right: 2em;
  }
  
  .ismobile .tccolumn.serv * {
      text-align: left !important;
      justify-content: flex-start !important;
  }
  .full.services.flex-container {
    flex-direction: column;
    height: fit-content !important;
    max-height: fit-content !important;
    height: fit-content !important;
    min-height: fit-content !important;
    display: block !important;
  }
  
  .sidearrows {
    margin: 0px !important;
    margin-bottom: -3.7em !important;
    padding-left: 10% !important;
    padding-right: 10% !important;
    width: 100%;
    min-width: 100%; 
  }
  
  section.hero.fixheight {
    margin-bottom: -4em;
    position: relative;
  }
  
  .ismobile .tccolumns.four .tccolumn.serv {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  
  .ismobile .tccolumn.serv h3 {
      font-size: 1.3em !important;
  }
  
  .arrow-right .tccolumn.serv {
    border-radius: .5em;
    padding-left: 1em !important;
    padding-top: .1em !important;
    padding-bottom: .1em !important;
  }
  
  .arrow-left .tccolumn.serv {
    border-radius: .5em;
    padding-left: 1em !important;
    padding-top: .1em !important;
    padding-bottom: .1em !important;
  }
  
  .ismobile .tccolumn.serv h3 {
    font-size: 1.3em !important;
    color: white;
    text-shadow: 1px 1px 1px #000000;
  }
  
  .ismobile .serv p {
    color: black;
  }
  
  
  
  
  div#lane-section {
    z-index: 2;
    position: relative;
  }
  
  
  @media (min-width: 1328px) {
  
  .sidearrows {
    padding-left: 20% !important;
    padding-right: 20% !important;
  }
  
  }
  
  
  
  .bounceword {
    display: inline-block;
    margin-right: 5px;
    transition: all 0.3s;
    scale:1;
  }
  
  @keyframes bounce {
    0%, 100% {
      transform: translateY(0);
      scale:1;
    }
    50% {
      scale:1.3;
      transform: translateY(0px);
    }
  }
  
  .ismobile #contact .wpcf7 {
    margin: 0px;
    width: 100%;
    flex: 1 1 100%;
    min-width: 100%;
}

.ismobile #contact .wpcf7 {
  margin: 0px;
  width: 100%;
  flex: 1 1 100%;
  min-width: 100%;
  margin-bottom: 30px !important;
}
.cf-row > p
 {
    width: 100%;
    text-align: left;
    justify-content: flex-start;
    display: flex
;
    flex-direction: column;
}


.ismobile #contact .flex-container
 {
    padding: 2em;
}

.ismobile #contact .contact-info *
 {
    text-align: left;
    justify-content: flex-start;
}

button#search-button {
  background-image: none !important;
}

#fullscreen-search {
  background: white;
  display: none;
  left: 0;
  position: fixed;
  top: 0;
  z-index: 10000;
}

#fullscreen-search-form button
 {
    width: fit-content;
    max-width: fit-content;
    padding: .4em;
    color: white !important;
    fill: white;
    border-radius: 1px;
}

button#search-close-button {
  max-width: 25px;
  max-height: 25px;
}

input[type="search"] {
  color: var(--color-one) !important;
  font-family: var(--color-two) !important;
}

.search-results .page-title span {
  color: var(--color-one);
}

.search article *
 {
    text-align: left;
    justify-content: flex-start;
}

.search article {
    width: 100%;
}

.search h2
 {
    font-family: var(--font-one) !important;
}

ul.sub-menu a {
  white-space: normal !important;
  min-width: 250px !important;
  max-width: 300px !important;
  width: fit-content !important;
  line-height: 1.3;
}