.sectionboxes {
    position: relative;
    margin-top: 20px;
    padding-bottom: 60px;
}
.sectionboxes.secondboxes {
    margin-top: 60px;
}
.sectionboxes .boxcontainer {
    position: relative;
    
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;

    
    align-items: flex-start;
    justify-content: center;
}
.sectionboxes .boxcontainer.static440 {
    height: 440px;
}
.sectionboxes .boxcontainer.colx3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sectionboxes .boxcontainer.colx1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.sectionboxes .boxcontainer.single {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.sectionboxes .boxcontainer .boxcolumn {
    position: relative;
    display: flex;
    width:100%;
    height: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center; 
}
.sectionboxes .boxcontainer .boxcolumn .boxitem {
    position: relative;
    flex: 1;
    width: 100%;
    background-color: #F6F6F6;
    margin-bottom: 20px;
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    cursor: default !important;
    /*there's a problem that is causing me to place important on the base boxitem class*/
}
.sectionboxes .boxcontainer .boxcolumn .boxitem[data-href] {
    cursor: pointer !important; 
    /*there's a problem that is causing me to place important on the base boxitem class, so it must
    be overriden here*/
}
.sectionboxes .boxcontainer .boxcolumn .boxitem:before {
    content: '';
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    
    z-index: 1;
  
    background-color: rgba(0, 0, 0, 0);
    
    
    pointer-events:none;
    transition: background-color 150ms ease;
}
/*.sectionboxes .boxcontainer .boxcolumn .boxitem:after {
    content: 'see more ' attr(data-title) ' work';
    position: absolute;
    left: 0;
    top:0;
    padding-left: 10%;
    padding-top: 6%;
    width: 265px;
    height: auto;
    
    font-family: brother-1816, sans-serif;
    font-weight: 800;
    font-size: 48px;
    line-height: 63px;
    color: rgba(255,255,255,1);
    letter-spacing: 0;
    text-align: left;
    
    text-transform: lowercase;
    
    z-index: 2;
    
    opacity: 0;
    
    background-color: rgba(0, 0, 0, 0);
    pointer-events:none;
    transition: opacity 150ms ease;
}*/
.sectionboxes .boxcontainer .boxcolumn .boxitem:hover {
    cursor: pointer;
}
.sectionboxes .boxcontainer .boxcolumn .boxitem:hover .action,
.sectionboxes .boxcontainer .boxcolumn .boxitem.enabled .action {
    opacity:1;
}
/*box bg colors*/
.sectionboxes .boxcontainer .boxcolumn .boxitem.lime:hover:before,
.sectionboxes .boxcontainer .boxcolumn .boxitem.lime.enabled:before {
    background-color: rgba(159,197,77,0.95);
}
.sectionboxes .boxcontainer .boxcolumn .boxitem.lime.enabled:hover:before {
    background-color: rgba(137,171,65,0.95);
}
.sectionboxes .boxcontainer .boxcolumn .boxitem.red:hover:before,
.sectionboxes .boxcontainer .boxcolumn .boxitem.red.enabled:before {
    background: rgba(183,32,46,0.95);
}
.sectionboxes .boxcontainer .boxcolumn .boxitem.navy:hover:before,
.sectionboxes .boxcontainer .boxcolumn .boxitem.navy.enabled:before {
    background: rgba(4,45,75,0.95);
}
.sectionboxes .boxcontainer .boxcolumn .boxitem.olive:hover:before,
.sectionboxes .boxcontainer .boxcolumn .boxitem.olive.enabled:before {
    background: rgba(114,142,58,0.95);
}
.sectionboxes .boxcontainer .boxcolumn .boxitem.olive.enabled:hover:before {
    background: rgba(95,118,48,0.95);
}
.sectionboxes .boxcontainer .boxcolumn .boxitem.jungle:hover:before,
.sectionboxes .boxcontainer .boxcolumn .boxitem.jungle.enabled:before {
    background: rgba(36,155,149,0.95);
}
.sectionboxes .boxcontainer .boxcolumn .boxitem.celadonblue:hover:before,
.sectionboxes .boxcontainer .boxcolumn .boxitem.celadonblue.enabled:before {
    background: rgba(0,130,167,0.94);
}
.sectionboxes .boxcontainer .boxcolumn .boxitem.pine:hover:before,
.sectionboxes .boxcontainer .boxcolumn .boxitem.pine.enabled:before {
    background: rgba(75,161,156,0.95);
}
.sectionboxes .boxcontainer .boxcolumn .boxitem.pine.enabled:hover:before {
    background: rgba(29,127,122,0.95);
}
/*end box bg colors*/


.sectionboxes .boxcontainer .boxcolumn .boxitem:not(.fill) .imgbox {
    padding: 30px;
}
.sectionboxes .boxcontainer .boxcolumn .boxitem:not(.fill) .imgbox.HPadOnly {
    padding: 0 20px;
}
.sectionboxes .boxcontainer .boxcolumn .boxitem:not(.fill) .imgbox.nopad {
    padding: 0;
}

.sectionboxes .boxcontainer .boxcolumn .boxitem .action {
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height:100%;
   
   z-index: 2;
   
   background-color: rgba(0, 0, 0, 0);
   pointer-events:none;
    
   opacity: 0;
   transition: opacity 150ms ease;;
    
   display: flex;
   justify-content:flex-start;
   align-items: flex-start; 
}
.sectionboxes .boxcontainer .boxcolumn .boxitem .action .label {
    position: relative;
    padding-left: 10%;
    padding-top: 6%;
    line-height: 0;
}
.sectionboxes .boxcontainer .boxcolumn .boxitem .action .label.sticky {
    position: sticky;
    bottom: 30%;
    align-self: flex-end;
}
.sectionboxes .boxcontainer .boxcolumn .boxitem .action .label:after {
    content: 'see more ' attr(data-title) ' work';
    position: relative;
    display: block;
     
    width: 265px;
    height: auto;
    
    font-family: brother-1816, sans-serif;
    font-weight: 800;
    font-size: 48px;
    line-height: 63px;
    color: rgba(255,255,255,1); /*,0.85*/
    letter-spacing: 0;
    text-align: left;
    
    text-transform: lowercase;
    
    padding-bottom: 30px;
}


/*control boxes grow twice the size of the standard box*/
.sectionboxes .boxcontainer .boxcolumn .boxitem.controlbox {
    flex-grow:2;
}
.sectionboxes .boxcontainer .boxcolumn .boxitem.minbox485 {
    padding: 18% 0;
}
.sectionboxes .boxcontainer .boxcolumn .boxitem.maxbox485 {
    max-height: 485px;
}
.sectionboxes .boxcontainer .boxcolumn .boxitem.boxband320 {
    max-width: 462px;
    max-height: 320px;
    padding-top: 18% !important;
    padding-bottom: 18% !important;
}
.sectionboxes .boxcontainer .boxcolumn .boxitem.boxbandFull {
    max-width: 462px;
    height: 100%;
    padding-top: 18% !important;
    padding-bottom: 18% !important;
}

.sectionboxes .boxcontainer .boxcolumn .boxitem img {
    max-width: 100%;
    height:auto;
}
.sectionboxes .boxcontainer .boxcolumn .boxitem img.maximg900 {
    max-height: 900px;
}
.sectionboxes .boxcontainer .boxcolumn .boxitem img.fixedimg485 {
    width: 700px;
    height: 485px;
}
.sectionboxes .boxcontainer .boxcolumn .boxitem img.cover {
    object-fit: cover;
}
/*.sectionboxes .boxcontainer .boxcolumn .boxitem:not(.fill) {
    padding: 40px;
}*/


.sectionboxes .boxcontainer .boxcolumn .boxitem.fill img {
    width:100%;
}

@media screen and (max-width: 1200px) {
    /*.sectionboxes .boxcontainer .boxcolumn .boxitem:not(.fill) {
        min-height: 400px;
    }*/
}

@media screen and (min-height: 1600px) {
    .sectionboxes.secondboxes {
        margin-top: 249px;
    }
}

@media screen and (max-width: 991px) {
    .sectionboxes .boxcontainer {
        gap:10px;
    } 
    .sectionboxes .boxcontainer.static440 {
        height:auto;
    }
   .sectionboxes {
      margin-top: 10px;
      padding-bottom: 40px;
    }
    .sectionboxes .boxcontainer .boxcolumn .boxitem {
        margin-bottom: 10px;
        
    }   
}
@media screen and (max-width: 930px) {
    .sectionboxes .boxcontainer .boxcolumn .boxitem .action .label.sticky {
        position: relative;
        align-self: unset;
        bottom:unset;
    }
}

@media screen and (max-width: 868px) {
    .sectionboxes .boxcontainer .boxcolumn .boxitem:after,
    .sectionboxes .boxcontainer .boxcolumn .boxitem .action .label:after {
        font-size: 40px;
        line-height: 55px;
        width: 235px;
    }
}

@media screen and (max-width: 680px) {
    .sectionboxes .boxcontainer .boxcolumn .boxitem:after,
    .sectionboxes .boxcontainer .boxcolumn .boxitem .action .label:after {
        font-size: 32px;
        line-height: 47px;
        width: 185px;
    }
}

@media screen and (max-width: 640px) {
    .sectionboxes {
        width:100%;
        padding-bottom:35px;
    }
    .sectionboxes .boxcontainer {
        display: flex;
        flex-direction: column;
        gap: unset;
    }
    .sectionboxes .boxcontainer .boxcolumn {
        align-items: center;
    }
    .sectionboxes .boxcontainer .boxcolumn .boxitem.minbox485 {
        padding: 0 20px;
    }
    .sectionboxes .boxcontainer .boxcolumn .boxitem:not(.fill) .imgbox:not(.HPadOnly):not(.nopad) {
        /*padding: 30px;*/
        padding: 0 20px;
    }
    
    .sectionboxes .boxcontainer .boxcolumn .boxitem:not(.fill) .imgbox:not(.HPadOnly) img {
        padding: 20px;
    }
}