html{
    overflow-x: hidden !important;
}
body {
    font-family: 'Roboto';
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

.msit-logo {
    background-image: url('../img/favicon-96x96.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 48px;
    height: 48px;
    margin-right: -8px;
}

.navbar {
    box-shadow: 0px 0px 4px #212121;
}

.with-left-border {
    border-left: 1px solid #8a8a8a;
}

.grey-mosaic-bg{
    background-image: url('../img/grey-mosaic-bg.png') !important;
    background-repeat: repeat;
}

.white-mosaic-bg{
    background-image: url('../img/white-mosaic-bg.png') !important;
    background-repeat: repeat;
}

.buttons-cta{
    width: 100%;
    margin-top: 16px;
}
.buttons-cta > a{
    width: 330px;
    font-size: 20px;
    margin: 4px;
    padding-top: 18px;
    padding-bottom: 18px;
}

.buttons-cta > .request-cot{
    background-color: #ed1c24; 
    color: #FFFFFF;
    transition: 0.3s;
}

.buttons-cta > .view-services{
    background-color: #FFF; 
    color: #ed1c24;
    outline: 1px solid #ed1c24;
    transition: 0.3s;
}
.request-cot:hover{
    background-image: linear-gradient(to right, #ed1c24,#e86165,#ed1c24);
  animation:slidebg 2s linear infinite;
  color:#FCFCFC;
  box-shadow: 0 0 2px #ed1c24;
}
.view-services:hover{
    background-image: linear-gradient(to right, #ffffff,#c8c8c8,#ffffff);
  animation:slidebg 2s linear infinite;
  box-shadow: 0 0 2px #ed1c24;
}

/* Client Logos */
.client-logo{
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-color: transparent;
    width: 96px;
    height: 96px;
}
.client-logo.cab{
    background-image: url('../img/client-logo/cab.svg');
    background-size: 60%;
}
.client-logo.maretich{
    background-image: url('../img/client-logo/maretich.jpg');
}
.client-logo.tomaselli{
    background-image: url('../img/client-logo/tomaselli.jpg');
}
.client-logo.ric{
    background-image: url('../img/client-logo/ric.png');
}
.client-logo.atacc{
    background-image: url('../img/client-logo/atacc.png');
}
.client-logo.autocity{
    background-image: url('../img/client-logo/autocity.png');
    background-size: 130%;
}
.client-logo.estin{
    background-image: url('../img/client-logo/estin.jpg');
    background-size: 80%;
}

.icon{
    background-repeat: no-repeat;
    background-size: contain;
}
.icon.traceability{
    background-image: url('../img/traceability.svg');
}
.icon.order{
    background-image: url('../img/order.svg');
}
.icon.previsibility{
    background-image: url('../img/previsibility.svg');
}
.section3-icon{
    width: 64px;
    height: 64px;
}

.tab-box{
    width: 100%;
    border-left: 1px solid #D6D9E0;
    border-right: 1px solid #D6D9E0;
    border-bottom: 1px solid #D6D9E0;
    margin: 0;
    background-color: #FFF;
    padding: 8px;
    display: none !important;
}
.tab-box.is-active{
    display: block !important;
}

.tabs{
    margin-bottom: 0 !important;
}

.tabs > ul > li > a {
    color: #212121 !important;
}
.tabs > ul > li.is-active {
    font-weight: 500;
}

.check-circle{
    background-image: url('../img/check-circle.svg');
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 4px;
}

.client-satisfaction{
    width: 90%;
    height: 90%;
    background-image: url('../img/client-satisfaction.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 2% 0 0 0;
}

.infrastructure{
    width: 90%;
    height: 90%;
    background-image: url('../img/infrastructure.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 2% 0 0 0;
}

.microit{
    width: 85%;
    height: 85%;
    background-image: url('../img/microit.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 4% 0 0 0;
}

.continuous-improvement{
    width: 80%;
    height: 80%;
    background-image: url('../img/continous-improvement.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(20px);
    margin: 2% 0 0 0;
}

.foot-extreme{
    background-color: #262626 !important;
    width: 100%;
    color: #919191;
    font-size: 14px;
}
footer{
    background-color: #212020;
    padding: 16px;
}
footer > .container > .columns > .column{
    font-size: 12px;
}

.btn-cta-common{
    background-color: #ed1c24 !important; 
    color: #FFFFFF;
    transition: 0.3s;
    margin-top: 4px;
    font-size: 20px;
}
.btn-cta-common:hover{
    /* background-color: #b8161b !important;  */
    /* background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet, red); */
    background-image: linear-gradient(to right, #ed1c24,#e86165,#ed1c24);
  animation:slidebg 2s linear infinite;
  color:#FCFCFC;
  box-shadow: 0 0 2px #ed1c24;
}
@keyframes slidebg {
  to {
    background-position:20vw;
  }
}
/* button{
    width: 330px;
    font-size: 20px;
    margin: 4px;
    padding-top: 18px;
    padding-bottom: 18px;
} */

.service-icon{
    width: 100%;
    height: 128px;
    /* background-color: #ed1c24; */
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.service-icon.support{
    background-image: url('../img/services-page/support.png');
    background-size: 50%;
}
.service-icon.infrastructure{
    background-image: url('../img/services-page/infraestructure.png');
    background-size: 36%;
}
.service-icon.backup{
    background-image: url('../img/services-page/backup.png');
    background-size: 51%;
}
.service-icon.network{
    background-image: url('../img/services-page/network.png');
    background-size: 46%;
}
.service-icon.equipment{
    background-image: url('../img/services-page/equipment.png');
    background-size: 51%;
}
.service-icon.monitoring{
    background-image: url('../img/services-page/monitoring.png');
    background-size: 45%;
}
.service-icon.handshake{
    background-image: url('../img/services-page/handshake.png');
    background-size: 51%;
}
.service-icon.cctv{
    background-image: url('../img/services-page/cctv.png');
    background-size: 48%;
}
section.with-border-bottom{
    border-bottom: 1px solid #f2f2f4;
}
/* support */

.our-services-img{
    background-image: url('../img/services-page/our-services.png');
    width: 320px;
    height: 320px;
    background-size: contain;
    margin-left: 50%;
    transform: translateX(-50%);
}

.our-services-benefits{
    background-image: url('../img/services-page/benefits.png');
    width: 310px;
    height: 310px;
    background-size: contain;
    margin-left: 50%;
    transform: translateX(-50%);
}

.logo-img{
    background-image: url('../img/msit.png');
    width: 320px;
    height: 320px;
    background-size: contain;
    margin-left: 50%;
    transform: translateX(-50%);
    animation: logo-bouncing 3s ease-in-out infinite;
}

@keyframes logo-bouncing {
	0% {
		/* box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); */
		transform: translatey(0px) translateX(-70%);
	}
	50% {
		/* box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2); */
		transform: translatey(-20px) translateX(-70%);
	}
	100% {
		/* box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); */
		transform: translatey(0px) translateX(-70%);
	}
}

.white-nomosaic-bg{
    background-color: #fefdfe;
}

/* CHECK MOBILE ACTIONS */
@media only screen and (max-width: 768px) {
    .our-services-benefits.check-mobile{
        width: 128px !important;
        height: 128px !important;
    }

    .service-icon.check-mobile{
        width: 96px;
        height: 96px;
        background-size: contain;
        margin: -32px 0 -16px 0;
    }

    .btn-cta-common.check-mobile{
        margin-left: 50%;
        transform: translateX(-50%) scale(90%);
    }
}

/* CHECK TABLET ACTIONS */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .our-services-benefits.check-tablet{
        width: 210px !important;
        height: 210px !important;
    }
}

/* ANIMATIONS */
.bounce {
  animation: bounce 2s ease infinite;
}
@keyframes bounce {
    70% { transform:translateY(0%); }
    80% { transform:translateY(-15%); }
    90% { transform:translateY(0%); }
    95% { transform:translateY(-7%); }
    97% { transform:translateY(0%); }
    99% { transform:translateY(-3%); }
    100% { transform:translateY(0); }
}

.bounce2 {
  animation: bounce2 2s ease infinite;
}
@keyframes bounce2 {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

.wrapper{display:flex;justify-content:center;align-items:center;}.checkmark__circle{stroke-dasharray: 166;stroke-dashoffset: 166;stroke-width: 2;stroke-miterlimit: 10;stroke: #7ac142;fill: none;animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards}.checkmark{width: 56px;height: 56px;border-radius: 50%;display: block;stroke-width: 4;stroke: #fff;stroke-miterlimit: 10;margin: 10% auto;box-shadow: inset 0px 0px 0px #7ac142;animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both}.checkmark__check{transform-origin: 50% 50%;stroke-dasharray: 48;stroke-dashoffset: 48;animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards}@keyframes stroke{100%{stroke-dashoffset: 0}}@keyframes scale{0%, 100%{transform: none}50%{transform: scale3d(1.1, 1.1, 1)}}@keyframes fill{100%{box-shadow: inset 0px 0px 0px 30px #7ac142}}