.webp .mh {background-image: linear-gradient(to bottom right,#000532ab,#1a0c00cc), url("/uploaded/Image/mastheads/sm/manufacturing.webp");}
.no-webp .mh {background-image:linear-gradient(to bottom right,#000532ab,#1a0c00cc), url("/uploaded/Image/mastheads/sm/manufacturing.jpg");}
@media (max-width: 450px) {
.webp .mh {background-image: linear-gradient(to bottom right,#000532ab,#1a0c00cc), url("/uploaded/Image/mastheads/mobile/450_manufacturing.webp");}
.no-webp .mh {background-image: linear-gradient(to bottom right,#000532ab,#1a0c00cc), url("/uploaded/Image/mastheads/mobile/450_manufacturing.jpg");}
}

html {scroll-behavior: smooth;}

/*============ regWhite CSS Start ============*/

.hex-icon {
margin: 20px 0 10px;
filter: brightness(0) saturate(100%) invert(23%) sepia(43%) saturate(2234%) hue-rotate(193deg) brightness(94.4%) contrast(90%);
}

/*============ regWhite 1 CSS End ============*/


/*============ Full Width 1 CSS Start ============*/
.dark-grey-background {background: #222;}
.full-width-one .Inner {padding: 40px 2% 0;}
.full-video-container {Overflow: hidden; width: 100%;display: flex; justify-content: center; position: relative; box-shadow: 0 34px 14px -22px #1f1f1f; height: 450px; background: #232323;}
.full-video-container video {position: absolute;}
.vid-title {margin: auto; font-size: clamp(3.2rem, 2.669rem + 2.358vw, 5.5rem); line-height: clamp(3.2rem, 2.669rem + 2.358vw, 5.5rem); color: white; text-align: center;  z-index: 200; text-shadow: 0 3px 8px #333;}
.vid-overlay{position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(45deg, #001b2e5e, #30303040);}

.background-transition {height: calc(8vw + 50px); max-height: 250px}
#transition-one {background: linear-gradient(182deg, #222 0%, #222 40%, #333333aa 40.3%, #333333aa 45.1%, #333333aa 45.4%, #333333aa), linear-gradient(183.7deg, #222 0%, #222 39.8%, #222222aa 40.2%, #222222aa 50.8%, #333333 51.2%, #333333);}


#ProductOverview {grid-template-columns: repeat(15,1fr); grid-gap: 15px;}
.agenda {display: flex; flex-direction: column; background: #fff; border-radius: 5px; background: transparent; grid-row: 1/5; position: relative;}
.agenda-list {transition: opacity 0.5s;}
.agenda .accordion-body {background: transparent;}
.agenda .accordion-header {border-bottom: 1px solid red; background: transparent;}
.agenda .card-subtitle {color: #FFF; font-size: 1.3em; Font-weight: 500; text-align: center; margin: 20px 30px; transition: 1s all; padding: 5px; border-radius: 4px 4px 0 0;}


#AgendaOne #PRODUCT {
    font-weight: bold;
    color: #fff;
    transition: 0.5s ease;
text-decoration: none;
}
#AgendaOne #PRODUCT:hover {
    color: #1d4f91;
    cursor: pointer;
    text-decoration: underline;
}

#PRODUCT:before {
font-family: "Font Awesome 5 Pro"; 
font-weight: 400; 
content: "\f312";
display: none;
}

#PRODUCT svg {padding-right: 8px;}

.image-panel {position: relative; background: #444; box-shadow: 0 5px 14px -10px #1f1f1f; border: none; color: white !important; height: 300px; overflow: hidden; justify-content: end; transition: filter 0.5s; text-decoration: none;}
.image-panel:hover {filter: brightness(1.3) saturate(1.5);}
.image-panel .card-subtitle {color: #FFF; padding-bottom: 2px; margin-bottom: 3px;}
.image-panel a {font-weight: bold; color: #1155cc;}
.image-panel .card-body {flex-grow: unset; z-index: 100;}
.image-panel img {position: absolute; top: 0; left: calc(50% - 350px); height: 100%; max-width: unset;}

.img-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, #000000dd, #000000aa 25%, #ad8c8c1a);
    z-index: 50;
}

.agenda-item {
    color: #bbb;
    font-size: 1.1em;
    padding: 10px 0px 3px 20px;
    margin-bottom: 7px;
    transition: box-shadow 1s;
}

#METAL {grid-row: 2;}
#WOOD {grid-row: 2;}
#SHEET {grid-row: 3;}
#PLASTICS {grid-row: 3;}
#PRINTSCAN {grid-row: 3;}

.slides { align-items: center; color:#f9f9f9; background:#232323; padding: 10px 50px; height: 100%; }

.slide-container {
    transition: 1.5s all ease;
    opacity: 0;
    transform: translate(0, 50px);
    width: 100%; 
}

.active .slide-container {
    opacity: 1;
    transform: translate(0,0);
}

.prevgal, .nextgal {top: 50%;}

.quote {font-style: italic; font-size: 1.2em;}
.quotee {display: flex; margin-top: 30px;}
.quotee img {width: 100px;}
.quotee-name-title {display: flex; flex-direction: column; justify-content: center; margin-left: 20px;}
.quotee-name {font-size: 1.4em; font-weight: bold; margin: 0;}
.quotee-title {margin: 0;}
.quotee-title a {color:#00aad6 !important; text-decoration: none !important;}


@media (max-width: 910px) {
.full-video-container {display:none;}
}

@media (max-width: 450px) {
.quotee {flex-direction: column;}
.quotee img {align-self: center;}
.quotee-name-title {text-align: center;}
}

/*============ Full Width 1 CSS End ============*/

/*============ regGrey CSS Start ============*/

#regGrey {background: #333;}
.Feefo-title {font-size: 3.8em; text-transform: uppercase; font-weight: 700; color: white; line-height: 1em; margin: 20px 0 0;}
#regGrey .card-col-container {column-gap: 40px;}
.dark-grey-background .section-title, #regGrey .section-title {background-color: #ffffff09; box-shadow: 0 5px 14px -5px #000000; height: unset; padding: 10px;}

.team-member img { border: 2px solid white; border-radius: 8px; width: calc(100% - 4px); max-width: 300px; margin: 0 auto 10px; display: flex;}
.team-member-name{ font-size: 1.2em; font-weight: bold; color: #f9f9f9; margin: 0; text-align: center;}
.team-member-title{text-transform: uppercase; color: #f56a2a; font-weight: bold; margin: 0; text-align: center;}
.team-member-description{color: #f9f9f9; text-align: center;}

/*---------------------- Locked Video Start (these are used for the case study videos to work as hyperlinks rather than embeds) --------------------------------------*/

.locked-video-container {
  position: relative;
  background: #333;
  padding-top: 56.25%;
}

.locked-video-container img { 
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%
}

.locked-video-containerOverlay {
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.5));
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}

.playSSM {
    position: absolute;
    top: 47.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    filter: opacity(0.7);
    background: url(/uploaded/image/MYSSM_Play.svg);
    background-size: cover;
}

.hexSSM:hover {
    filter: opacity(1);
}

.playSSM:hover {
    filter: opacity(1);
}

/*---------------------- Locked Video END --------------------------------------*/

#transition-two {background: linear-gradient(177.3deg, #333 0%, #333 40%, #333333aa 40.3%, #333333aa 49.1%, #eee 49.4%, #eee), linear-gradient(179deg, #333 0%, #333 39.8%, #333333aa 40.2%, #333333aa 50.8%, #eee 51.2%, #eee);}



/*============ regGrey CSS End ============*/





/*============== regPurple CSS Start ===============*/

#regPurple {background: #eee;}
#regPurple a { color: #2a24ff; text-decoration: none;}
#regPurple .card-button a {color: #565656;}
#regPurple .card-button a:hover {color: #fff;}
#regPurple .Inner {padding: 0% 2% 0% 2%}

.lightbox-image {
    transition: 0.3s;
    cursor:pointer ;
}

.lightbox-image:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


.modal {
  display: none;
  position: fixed;
  z-index: 10;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0,0.85);
  z-index: 4000;
}

/* Modal Content */
.modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

.mySlides {
display:block;
}

.close {
  color: white;
  position: absolute;
  top: 5%;
    right: 3%;
    font-size: 70px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.fullImg { width: 100%; padding-bottom: 56.25%; background-size: contain;}

/*----------------- Adding Setion Title CSS for other sections start (that are only for white, grey, blue by default) -----------------*/

.section-title {
    color: #fff;
    justify-content: center;
    margin: 10px 0 10px 0;
    padding: 0 10px;
    font-size: 1.5em;
    background-color: #565656;
    background-image: url(/uploaded/image/Cards/CardTitleBlank.png);
    border: 2px solid #fff;
    border-radius: 4px;
    box-shadow: 0 5px 14px -5px #909090;
    height: 70px;
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    display: flex;
    align-items: center;
    grid-column: -1/1;
    height: unset;
    font-weight: normal;
    padding: 10px; 
}

/*----------------- Adding Section Title CSS to Green and Purple End -----------------*/

/*============== regPurple CSS End ===============*/




/*============== regBlue CSS Start ===============*/

#regBlue {padding-top: 0px;}

/*---------------------- FORM START  ------------------------------- */

.FormR {width: 95%; float:right; background-color: transparent; padding: 2%;padding-top:0px;}

#ssform {padding: 14px;}

input[type=button], input[type=text], input[type=password], input[type=email], select {

    -webkit-appearance: none;
    box-shadow: 0 0 3px #5cd053;
    border: 1px solid #28921f!important;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    font-size: 1.1em!important;
    margin-bottom: 1%!important;
    margin-right: 1%;
    width: 98%!important;
    float: left;
    padding: 5px;
    border-radius: 3px 3px 3px 3px;
	}

select { width: 100% !important; }

input[type=submit] {
    cursor: pointer;
    -webkit-appearance: none;
    background-color: #85b358;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    width: 100%;
    border: 0;
    text-align: center;
    font-family: 'Ubuntu';
    font-weight: lighter;
    color: #fff;
       text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 5px 5px 5px 5px;
}

.regSubscribe {background-color: transparent!important;}


/*---------------------- FORM END  ------------------------------- */

#regBlue .card-span {border: 2px solid #eee;}

/*============== regBlue CSS End ===============*/



/*============== Media Queries Start ===============*/

@media (max-width: 1200px) {
#ProductOverview {grid-template-columns: repeat(12,1fr); column-gap: 10px;}
#METAL {grid-row: 1;}
#WOOD  {grid-row: 2;}
#SHEET  {grid-row: 2;}
#PLASTICS {grid-row: 3;}
#PRINTSCAN  {grid-row: 3;}
}

@media (max-width: 910px) {
.image-panel {display: none;}
}

@media (max-width: 700px) {
#regGrey .card-col-container {column-gap: 10px;}
#Testimonials {order: 2;}
.Feefo-title {font-size: 2.8em;}
.agenda-item { padding: 10px;}
}

/*============== Media Queries End ===============*/