/*---MENU CARDS---*/
 .max-trio {
     position: relative;
     height: 350px;
     width: 350px;
     margin: 15px auto;
     display: flex;
     justify-content: center;
     cursor: pointer;
     align-items: center;
}
 .max-trio.max-blog {
     position: relative;
     height: 250px;
     width: 250px;
     margin: 15px auto;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer 
}
 .max-trio .max-trio-image-wrapper::after {
     content: '';
     position: absolute;
     height: 100%;
     width: 100%;
     background-color: #000;
     opacity: 0.2;
     top: 0;
     left: 0;
     transition: 0.3s ease !important;
     pointer-events: none;
     background-blend-mode: overlay;
}
 .max-trio:hover .max-trio-image-wrapper::after {
     opacity: 0.15;
     background-color: var(--linkcolor);
     background-blend-mode: overlay;
}
 .max-trio.max-blog .max-trio-image-wrapper::after {
     opacity: 0.15 !important 
}
 img.max-trio-img {
     width: 100% !important;
     height: 100% !important;
     position: absolute;
     top: 0;
     left: 0;
     object-fit: cover;
     transition: 0.3s ease;
     padding: 0 0;
     margin: auto auto !important 
}
 .max-trio-text {
     position: relative;
     height: auto;
     width: 96%;
     margin: auto;
     padding: 20% 10px 20% 10px;
     text-align: center;
    /* border: 1.5px solid #fff;
     */
     color: #fff;
     transition: 0.3s ease;
     overflow: hidden;
     pointer-events: none;
     display: flex;
     flex-direction: column;
}
 .max-trio ::selection {
     background-color: transparent;
}
 .max-trio .trioEmblem {
     display: block;
     margin: 0px auto 15px auto;
     height: 50px;
     width: 50px;
     background-image: url('https://3stepsolutions.s3-accelerate.amazonaws.com/assets/custom/010350/css/svg/person.svg');
     background-size: cover;
     pointer-events: none;
}
 #trioMerch .trioEmblem {
     background-image: url('https://3stepsolutions.s3-accelerate.amazonaws.com/assets/custom/010350/css/svg/shirt.svg');
     height: 50px;
     width: 62.5px;
}
 #trioPro .trioEmblem {
     background-image: url('https://3stepsolutions.s3-accelerate.amazonaws.com/assets/custom/010350/css/svg/user.svg');
     height: 50px;
     width: 43.75px;
}
 .max-trio-text p {
     color: #fff;
     transition: 0.3s ease !important;
     line-height: 1.5 
}
 .max-trio-text p,.max-trio-text h1,.max-trio-text h2,.max-trio-text h3,.max-trio-text h4,.max-trio-text h5,.max-trio-text h6,.max-trio-text .btn {
     pointer-events: all !important 
}
 body.tssViewMode:not(.tssEditMode) .max-trio-text p,body.tssViewMode:not(.tssEditMode) .max-trio-text h1,body.tssViewMode:not(.tssEditMode) .max-trio-text h2,body.tssViewMode:not(.tssEditMode) .max-trio-text h3,body.tssViewMode:not(.tssEditMode) .max-trio-text h4,body.tssViewMode:not(.tssEditMode) .max-trio-text h5,body.tssViewMode:not(.tssEditMode) .max-trio-text h6 {
     pointer-events: none !important 
}
 .max-trio .max-trio-text h1,.max-trio .max-trio-text h2,.max-trio .max-trio-text h3,.max-trio .max-trio-text h4,.max-trio .max-trio-text h5,.max-trio .max-trio-text h6 {
     color: #fff;
     font-size: 30px;
     line-height: 1;
     max-width: 100%;
     margin: 0 auto 0px auto;
     border-bottom: 2px solid transparent !important;
     letter-spacing: 0.1em;
     padding-bottom: 10px;
     text-align: center;
     transition: 0.3s ease;
     letter-spacing: 0px;
     text-shadow: var(--uxtextshadow);
}
/* .max-trio:hover .max-trio-text h1, .max-trio:hover .max-trio-text h2, .max-trio:hover .max-trio-text h3, .max-trio:hover .max-trio-text h4, .max-trio:hover .max-trio-text h5, .max-trio:hover .max-trio-text h6 {
     color: var(--linkcolor);
     border-bottom: 2px solid var(--linkcolor) !important;
     text-shadow: 0px 1px 4px rgba(0,0,0,0.35) 
}
*/
 .max-trio {
     border-left: 5px solid var(--brandcolor1);
}
 .max-trio.max-blog .max-trio-text h1,.max-trio.max-blog .max-trio-text h2,.max-trio.max-blog .max-trio-text h3,.max-trio.max-blog .max-trio-text h4,.max-trio.max-blog .max-trio-text h5,.max-trio.max-blog .max-trio-text h6 {
     color: #fff !important;
     font-size: 48px;
     line-height: 1;
     border-bottom: 1px solid #fff !important;
     max-width: 30%;
     margin: 0 auto 15px auto;
     letter-spacing: 0.1em;
     padding-bottom: 15px;
     text-align: center 
}
 .max-trio:hover .max-trio-text {
     transition: 0.3s ease 
}
 .max-sidebar {
     width: 100%;
     max-width: 250px;
     margin: auto 0 auto auto 
}
 @media (max-width: 1199px) and (min-width: 1024px) {
     .max-trio {
         width: 280px;
         height: 280px;
    }
}
 @media (max-width: 1024px) and (min-width: 768px) {
     .max-sidebar {
         margin:auto auto auto auto 
    }
     .max-trio {
         width: 210px;
         height: 210px;
    }
     .max-trio .max-trio-text h1,.max-trio .max-trio-text h2,.max-trio .max-trio-text h3,.max-trio .max-trio-text h4,.max-trio .max-trio-text h5,.max-trio .max-trio-text h6 {
         font-size: 20px !important;
    }
}
 @media (max-width: 480px) {
     .max-trio {
         width: 240px;
         height: 240px;
    }
     .max-trio .max-trio-text h1,.max-trio .max-trio-text h2,.max-trio .max-trio-text h3,.max-trio .max-trio-text h4,.max-trio .max-trio-text h5,.max-trio .max-trio-text h6 {
         font-size: 20px !important;
    }
}