﻿@media (max-width:480px) {body {padding-top:55px !important;}}
@media (min-width: 540px) { body {padding-top:82px !important;} }
@media (min-width: 768px) { body {padding-top:82px !important;} }
@media (min-width: 992px) { body {padding-top:75px !important;} }
@media (min-width: 1200px) {body {padding-top:75px !important;}}
.bg-visual-container{background-color:#EEF5FD;}
.page-head{background-color:#281870;}
@media (max-width: 767px) {
.h1, h1 {font-size: 1.75rem !important;}
}
@media (min-width:1280px) {
.h1, h1{font-size: 2.75rem !important;}
}

/*Accordion*/
h3.acc_trigger{overflow:hidden;text-transform:none;display:block;margin-bottom:0;border-bottom:1px solid #e9e9e9; margin-top:10px; border-left-width:0px}
h3.acc_trigger a{font-size:1.1rem!important;font-weight:400;color:inherit;text-decoration:none;display:block;position:relative;line-height:16pt;outline:none;padding:10px 30px 10px 12px;transition:all .2s ease-in-out; background:#fff;}
h3.acc_trigger > a span{background:transparent url(icon-plus-sm-bl.png) no-repeat right top;text-indent:-9000px;width:16px;height:16px;position:absolute;top:45%;right:0;margin-top:-7px;opacity:1;transition:all .2s ease-in-out;margin-right:12px; opacity:0.70}
h3.acc_trigger > a:hover{color:#fff}
h3.acc_trigger > a:hover span{opacity:1}
h3.acc_trigger:hover > a{color:#005585;}
h3.acc_trigger.active > a{color:#005585; background:#f5f5f5;}
h3.acc_trigger:hover > a span{background:transparent url(icon-minus-sm-bl.png) no-repeat right top; margin-right:12px;}
h3.acc_trigger.active > a span{background:transparent url(icon-minus-sm-bl.png) no-repeat right top; margin-right:12px;}

/*fliper*/
.flip-container{-webkit-perspective:1000;-moz-perspective:1000;-ms-perspective:1000;perspective:1000;-ms-transform:perspective(1000px);-moz-transform:perspective(1000px);-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;}
.flip-container:hover .back, .flip-container.hover .back{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-o-transform:rotateY(0deg);-ms-transform:rotateY(0deg);transform:rotateY(0deg);}
.flip-container:hover .front, .flip-container.hover .front{-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-o-transform:rotateY(-180deg);transform:rotateY(-180deg);}
.flip-container{display:inline-block;position:relative;}
.front, .back{width:100%;height:100%; position:absolute!important; display:flex; align-items:center; justify-content:center;}
.flipper{-webkit-transition:0.6s;-webkit-transform-style:preserve-3d;-ms-transition:0.6s;-moz-transition:0.6s;-moz-transform:perspective(1000px);-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transition:0.6s;transform-style:preserve-3d;position:relative;display:table;height:100%;width:100%;}
.flipper .fnt-dtl .hdr { opacity:1; left:0; right:0; bottom:0;margin:0px!important; -webkit-transition:all .3s ease 0s;-o-transition:all .3s ease 0s;transition:all .3s ease 0s;}
.flipper .bg-blue-100 {background:rgba(215,222,233,1) !important}
.front {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateY(0deg);
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    -moz-transform: rotateY(0deg);
    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;
    -o-transform: rotateY(0deg);
    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;
    -ms-transform: rotateY(0deg);
    transition: 0.6s;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    position: relative;
    top: 0;
    left: 0;
}
.back{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:0.6s;-webkit-transform-style:preserve-3d;-webkit-transform:rotateY(0deg);-moz-transition:0.6s;-moz-transform-style:preserve-3d;-moz-transform:rotateY(0deg);-o-transition:0.6s;-o-transform-style:preserve-3d;-o-transform:rotateY(0deg);-ms-transition:0.6s;-ms-transform-style:preserve-3d;-ms-transform:rotateY(0deg);transition:0.6s;transform-style:preserve-3d;transform:rotateY(0deg);position:absolute;top:0;left:0;}
.front{-webkit-transform:rotateY(0deg);-ms-transform:rotateY(0deg);z-index:2;}
.back{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);-ms-transform:rotateY(180deg);transform:rotateY(180deg);color:#fff;padding:0px;}
.dtl{margin-top:10px;}
.fnt-dtl, .bck-dtl{left:0;right:0;text-align:center;}
.bck-dtl{height:100%;}
.fnt-dtl p{text-align:center}
.fnt-dtl .hdr,
.bck-dtl .hdr{color:#fff;line-height:normal;}
.fnt-dtl img,
.bck-dtl img{margin:0 auto;}

.bg-brighter-blue{background-color:#127BC2 !important;}
.bg-demo {background-color: #127BC2 !important;}
.bg-lightblue{background-color: #dde5f1 !important;}

.leftround{border-top-left-radius:10px; border-bottom-left-radius:10px;}
.rightround{border-top-right-radius:10px; border-bottom-right-radius:10px;}      
@media (max-width:767px) {
.leftround{border-top-left-radius:10px; border-top-right-radius:10px; border-bottom-left-radius:0px; border-bottom-right-radius:0px;}
.rightround{border-bottom-left-radius:10px; border-bottom-right-radius:10px; border-top-right-radius:0px; border-top-left-radius:0px;}
}

/*icon*/
.icon-circle {width: 100px; height: 100px;border-radius: 50%; background: #008BD2;  display: flex;  align-items: center;    justify-content: center;    flex-shrink: 0;}
.icon-circle img {transition: all ease 0.6s;  filter: brightness(0) saturate(100%) invert(100%);}

/*Background*/
.bg-why-choose {background: rgba(221, 229, 241, 1);}
.bg-why-choose-exm {background: rgba(221, 229, 241, 1);}
.bg-cta{background: rgba(0, 139, 210, 1);}
.bg-cta-ems{background: rgba(0, 139, 210, 1);}
.bg-label-printing-solution-overview{background: rgba(0, 139, 210, 1);}
.bg-end-to-end{background: rgba(221, 229, 241, 1);}
.bg-what-is-copilot{background: rgba(40, 24, 112, 1);}
.bg-what-copilot{background: rgba(221, 229, 241, 1);}
.bg-why-leaping-frog{background: rgba(221, 229, 241, 1);}
.bg-cta-want-to-contro{background: rgba(0, 139, 210, 1);}
.bg-why-choose-label{background: rgba(221, 229, 241, 1);}
@media (min-width:768px) {
.bg-why-choose {background: rgba(221, 229, 241, 1) url(../images/bg-why-choose.jpg) no-repeat;background-size: cover;background-attachment: fixed;background-position: center;}
.bg-why-choose-exm {background: rgba(221, 229, 241, 1) url(../images/bg-why-choose-exm.png) no-repeat;background-size: cover;background-attachment: fixed;background-position: center;}
.bg-cta{background:url(../images/bg-cta.jpg) no-repeat;background-size:cover;background-attachment: fixed; background-position: center;}
.bg-cta-ems{background:url(../images/bg-cta-ems.jpg) no-repeat;background-size:cover;background-attachment: fixed; background-position: center;}
.bg-cta-want-to-contro{background:url(../images/bg-cta-want-to-contro.png) no-repeat;background-size:cover;background-attachment: fixed; background-position: center;}
.bg-label-printing-solution-overview{background:url(../images/bg-label-printing-solution-overview.jpg) no-repeat;background-size:cover;background-attachment: fixed; background-position: center;}
.bg-why-choose-label{background:url(../images/bg-why-choose-label.png) no-repeat;background-size:cover;background-attachment: fixed; background-position: center;}
.bg-end-to-end{background:url(../images/bg-end-to-end.jpg) no-repeat;background-size:cover;background-attachment: fixed; background-position: center;}
.bg-what-is-copilot{background:/*rgba(22,65,148,1)*/ url(../images/bg-what-is-copilot.png) no-repeat; /*background-blend-mode: multiply;*/ background-size:cover;background-attachment: fixed; background-position: center;}
.bg-what-copilot{background:url(../images/bg-what-copilot.png) no-repeat;background-size:cover;background-attachment: fixed; background-position: center;}
.bg-why-leaping-frog{background:url(../images/bg-why-leaping-frog.png) no-repeat;background-size:cover;background-attachment: fixed; background-position: center;}
}

.image-overlay-left::before{background: rgba(233,233,233,1);}
.image-overlay-right::before{background: rgba(233,233,233,1);}
.image-overlay-right{position: relative; overflow: hidden;}
.image-overlay-right::before { content: "";  position: absolute;  inset: 0; 
 background: linear-gradient(
        90deg,
        rgba(233,233,233,0.95) 0%,
        rgba(233,233,233,0.88) 35%,
        rgba(233,233,233,0.55) 60%,
        rgba(233,233,233,0.10) 100%
    );
    z-index: 1;
}
.image-overlay-right .content { position: relative; z-index: 2;}

/*gap css*/
.gap-1 {gap: 0.25rem;}
.gap-2 {gap: 0.5rem;}
.gap-3 {gap: 1rem;}
.gap-4 {gap: 1.5rem;}
.gap-5 {gap: 3rem;}

.mt-n1 { margin-top: -0.25rem !important; }
.mt-n2 { margin-top: -0.5rem !important; }
.mt-n3 { margin-top: -1rem !important; }
.mt-n4 { margin-top: -1.5rem !important; }
.mt-n5 { margin-top: -3rem !important; }

.mb-n1 { margin-bottom: -0.25rem !important; }
.mb-n2 { margin-bottom: -0.5rem !important; }
.mb-n3 { margin-bottom: -1rem !important; }

.ml-n1 { margin-left: -0.25rem !important; }
.ml-n2 { margin-left: -0.5rem !important; }
.ml-n3 { margin-left: -1rem !important; }

.mr-n1 { margin-right: -0.25rem !important; }
.mr-n2 { margin-right: -0.5rem !important; }
.mr-n3 { margin-right: -1rem !important; }

/*stats*/
ul.stats{width:100%;text-align:left;margin:0;padding:0;}
ul.stats li{list-style:none;width:auto;color:#fff;padding:0px 20px 25px;vertical-align:top;line-height:normal;text-align:left; width:47%; position:relative; display:inline-block; justify-content:center}
ul.stats li:after {content:''; width:0px; background:#ADADAD; height:0px; position:absolute; display:block; left:0px; vertical-align:center}
ul.stats li:first-child:after {content:''; width:0px;}
ul.stats li:first-child{padding-left:0px;}
ul.stats li:last-child{padding-right:0px;}
ul.stats li span{font-size:2rem;text-align:left; font-weight:800}
ul.stats li p{font-size:.95rem; font-weight:500}

@media (min-width:768px) {
ul.stats{width:100%;text-align:center;margin:0;padding:0;}
ul.stats li{list-style:none;width:auto;color:#fff;padding:0px 2%;vertical-align:top;line-height:normal;text-align:left; width:auto; position:relative; display:inline-flex; align-items:center}
ul.stats li:after {content:''; width:1px; background:#ADADAD; height:50px; position:absolute; display:block; margin: 0 auto; vertical-align:center;} 
ul.stats li:first-child:after {content:''; width:0px;}
/*ul.stats li:first-child{padding-left:25px;}
ul.stats li:last-child{padding-right:0px;}*/
ul.stats li span{font-size:2rem;text-align:left; font-weight:900}
ul.stats li p{font-size:1rem; font-weight:500; color: #fff;}       
}
@media (min-width:992px) {
ul.stats li{list-style:none;width:auto;color:#fff;padding:0px 3%;vertical-align:top;line-height:normal;text-align:left; width:auto; position:relative; display:inline-flex; align-items:center}      
}
@media (min-width: 1280px) {
ul.stats{width:100%;text-align:left !important;margin:0;padding:0;}
ul.stats li{list-style:none;color:#fff;padding:0px 6%;vertical-align:top;line-height:normal;text-align:left; width:auto; position:relative; display:inline-flex; align-items:center}
ul.stats li:after {content:''; width:1px; background:#ADADAD; height:100px; position:absolute; display:block; margin: 0 auto; vertical-align:center;}
ul.stats li:first-child:after {content:''; width:0px;}
ul.stats li:first-child{padding-left:0px;}
ul.stats li:last-child{padding-right:0px;}
ul.stats li span{font-size:2rem;text-align:left; font-weight:900}
ul.stats li p{font-size:1rem; font-weight:500; color: #fff; line-height:1.5}
ul.stats li span {font-size: 2.5rem; text-align: center; font-weight: 600} 
}
@media (min-width: 1500px) {
ul.stats li {list-style: none;color: #fff;padding: 0px 7%;vertical-align: top;line-height: normal;text-align: left;width: auto;position: relative;display: inline-flex;align-items: center}
ul.stats li span {font-size: 3.5rem; text-align: center; font-weight: 700}
}
@media (max-width:768px) { 
ul.stats li span {font-size: 2rem; color:#fff; text-align: left !important; font-weight: 600}
ul.stats li p{font-size:1rem; font-weight:500; color: #fff; line-height:1.5}
ul.stats li{list-style:none;padding:0px 0px 20px 0px;vertical-align:top;line-height:normal;text-align:left;  position:relative; width:48%; align-items:center}
}

.bg-light-blue{ background-color:#EBF2FD;}
.devid{margin: 0; padding: 0;  list-style: none;}
.devid li { display: inline-block;padding: 0 20px;  position: relative;}
.devid li:not(:last-child)::after {  content: "|";  position: absolute;  right: -2px;  color: #999;}

/*hm-4-steps*/
.hm-4-steps .step-bx{position:relative;}
.hm-4-steps { counter-reset: item }
.hm-4-steps .step-bx {display: block;}
.hm-4-steps .step-bx:after{z-index: 1;content: counter(item); font-size:3rem;    display: block;    color: #164194;     line-height: normal;    font-weight: bold;    counter-increment: item;    position: absolute;   left:-2px;   top:50px;}
.hm-4-steps .step-bx:first-child:after{color:#281870!important;}
.hm-4-steps .step-bx:first-child > div{border-color:#281870!important;}
.hm-4-steps .step-bx:nth-child(2) > div{border-color:#127BC2!important;}
.hm-4-steps .step-bx:nth-child(3) > div{border-color:#8BBADD!important;}
.hm-4-steps .step-bx:nth-child(4) > div{border-color:#7ac143!important;}

.hm-4-steps .step-bx:first-child .icon-circle{background:#281870!important;}
.hm-4-steps .step-bx:nth-child(2) .icon-circle{background:#127BC2!important;}
.hm-4-steps .step-bx:nth-child(3) .icon-circle{background:#8BBADD!important;}
.hm-4-steps .step-bx:nth-child(4) .icon-circle{background:#7ac143!important;}

.hm-4-steps .step-bx:nth-child(2):after{color:#127BC2!important;}
.hm-4-steps .step-bx:nth-child(3):after{color:#8BBADD!important;}
.hm-4-steps .step-bx:nth-child(4):after{color:#7ac143!important;}
.hm-4-steps .step-bx:before{content: "\F138";  font-family: "bootstrap-icons";  position: absolute;   right: -5px;    top: 50%;    transform: translateY(-50%);    font-size: 2rem;    color: #164194;    z-index: 2;}
.hm-4-steps .step-bx:last-child:before{display: none !important;}
@media (max-width:768px) {
.hm-4-steps .step-bx{z-index:22 !important;}
.hm-4-steps .step-bx:after{z-index: 1;content: counter(item); font-size: 2rem;    display: block;    color: #164194;      line-height: normal;    font-weight: bold;    counter-increment: item;    position: absolute;    left:-1px;    top: 15px;}
.hm-4-steps .step-bx:before{content: "\F124";  font-family: "bootstrap-icons";  position: absolute;   right: 50%;    top:103%;  transform: translateY(-50%);    font-size: 1.5rem;    color: #164194;    z-index:1;}

.btn h5{font-size:100%!important;}
}
@media (max-width:480px) {
.hm-4-steps .step-bx{z-index:22 !important;}
.hm-4-steps .step-bx:after{z-index: 1;content: counter(item); font-size: 2rem;    display: block;    color: #164194;     line-height: normal;    font-weight: bold;    counter-increment: item;    position: absolute;    left:-1px;    top: 15px;}
.hm-4-steps .step-bx:before{content: "\F124";  font-family: "bootstrap-icons";  position: absolute;   right: 50%;    top:103%;  transform: translateY(-50%);    font-size: 1.5rem;    color: #164194;    z-index:1;}
}
