@charset "utf-8";
/****************************************/
/*	CSS Document 						*/
/*	CMS Agilis 3.2						*/
/*										*/
/*	Abrupta Servis s.r.o.				*/
/*	stylesheet.global.css				*/
/*	version 1.0.0.0	           			*/
/*										*/
/*	created:  2025-03-31      			*/
/*	edit:     2025-07-08				*/
/****************************************/

/* ! + RESET */
:root {
	--beat-color-01: 				#0D0F63;
	--beat-color-02: 				#FF0001;
	--beat-color-03: 				#EBF1F5;
	--beat-color-04: 				#f9f9f9;
	--beat-color-05: 				#F3F3F3;
	--beat-color-06:				#f5fefe;
	--beat-color-07: 				transparent;
	--beat-color-08:				#1317c5;
	--beat-color-09:				#767676;
	--beat-color-10:				#d0d0d0;
	
	--beat-color-99:				#ffffff;
	--beat-color-00:				#000000;
	
	--beat-font-family1-light: 		'noirpro_light', sans-serif;
	--beat-font-family1-regular: 	'noirpro_regular', sans-serif;
	--beat-font-family1-italic: 	'noirpro_regularitalic', sans-serif;
	--beat-font-family1-semibold:	'noirpro_medium', sans-serif;
	--beat-font-family1-bold: 		'noirpro_bold', sans-serif;
	
	--beat-font-family2-light: 		'qanelas_light', sans-serif;
	--beat-font-family2-regular: 	'qanelas_regular', sans-serif;
	--beat-font-family2-italic: 	'qanelas_regularitalic', sans-serif;
	--beat-font-family2-semibold: 	'qanelas_medium', sans-serif;
	--beat-font-family2-bold: 		'qanelas_bold', sans-serif;
	
	--beat-link-color: 				#A92174;
	--beat-link-hover-color: 		#A92174;
	
	--beat-font-base-color: 		#767676;
	--beat-font-base-size: 			18px;
	--beat-font-base-line: 			28px;
	
	--beat-transition-base: 		all .3s ease 0s;
	
}

html,body,div,span,applet,object,iframe,input,h1,h2,h3,h4,h5,h6,hr,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,select,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,tmenu,tr,th,td{ margin:0; padding:0; border:0; outline:0; font-weight:100; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
* { -webkit-text-size-adjust:none; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
img { display:block; }
/*   - RESET */

/* ! + PAGE DESIGN */
.underlie { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: var(--beat-color-00); overflow: hidden; z-index: 0; background-size:cover; background-clip:border-box; background-position: center center; background-repeat: no-repeat; transition: .3s; }
.underlie > img { position: relative; top:50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: auto; min-width: 100%; height: auto; min-height: 100%; opacity: 1.0; }
.underlie.imageFill > img { width: 100%; }
.underlie.backFill { opacity: .4; }

.backFill { position: absolute; top:0; right: 0; bottom: 0; left: 0; z-index: 0; }
.backFill:hover { }

.borderBs { border-bottom: solid 1px var(--beat-color-05); }
.borderTs { border-top: solid 1px var(--beat-color-05); }
.borderBd { background-image: linear-gradient(to right, #d1d1d1 40%, transparent 0%); background-position: bottom; background-size: 12px 1px; background-repeat: repeat-x; }

.itemBoxShadow { box-shadow: rgba(50, 50, 93, 0.1) 0px 10px 18px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; }

.backSoftBlue { background-color: #f7ffff !important; }
.backLightBlue { background-color: #f9faff !important; }
.backLightAzure { background-color: #e7f9ff !important; }
.backLightGrey { background-color: #f3f3f3 !important; }
 
#Services { background-color: var(--beat-color-03); }

#Products { background-color: var(--beat-color-03); }

#ProductsByService { background-color: #e7f9ff; }

#ServicesByProduct { background-color: #e7f3fa; }

.advCategory .advCategoryIcon img { height: 120px; width: auto; margin: 0 auto; }

@media only screen and (min-width: 720px) and (max-width: 959px) {
	.responsive .beatFeatures-01 .featureIcon img { height: 80px; }
}
/** 6 / Mobile Landscape Size to Tablet Portrait (devices and browsers) **/
@media only screen and (min-width: 480px) and (max-width: 719px) {
	.responsive .beatFeatures-01 .featureIcon img { height: 80px; }
}
/** 4 / Mobile Portrait Size to Mobile Landscape Size (devices and browsers) **/
@media only screen and (max-width: 479px) {
	.responsive .beatFeatures-01 .featureIcon img { height: 80px; }
}

.perexXL p > strong { color: #1E1E1E; }

.general .directorsCorner .perexL > p { color: #222222; font-size: 1.2em; }
.general .directorsCorner .floatingImg { width: 20.0em; bottom: -20%; right: -4%; opacity: .4; }
.general .directorWords { border-radius: .8em; }
.general .directorPerson p { margin-bottom: .1em; font-size: .9em; line-height: 1.0em; }
.general .directorPerson p:first-child { color: var(--beat-color-01); font-size: 1.4em; font-family: var(--beat-font-family1-bold); }

.general .testimonialWrap:after { content: ""; position:absolute; bottom: .6rem; left: 2.4rem; display:block; height: 2.0rem; width:2.0rem; background-color:var(--beat-color-01); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.general .testimonialWords { background-color: var(--beat-color-01); border: solid 1px #ededed; border-radius: .4em; -webkit-border-radius: $border-radius; -webkit-mask-image: -webkit-radial-gradient(circle, white, white); }
.general .testimonialWords .perexL > p { color: var(--beat-color-99); }
.general .testimonialPerson p { margin-bottom: .1em; font-size: .9em; line-height: 1.0em; }
.general .testimonialPerson p:first-child { font-size: 1.4em; font-family: var(--beat-font-family1-bold); }

.general .bigContact p { color: var(--beat-color-01); line-height: 1.0em; }
.general .bigContact p:first-child { margin-bottom: .4em; text-transform: uppercase; color: var(--beat-color02); }
.general .bigContact p.bigger { color: var(--beat-color-01); font-family: var(--beat-font-family1-bold); font-size: 2.0em; line-height: 1.0em; }
.general iframe {}
.general iframe.gMap { width: 100%; height: 600px; border: none; }

.general .contFeatures .featureCap { font-family: var(--beat-font-family1-semibold); }
.general .contFeatures .featurePerex { font-size: .9em; line-height: 1.2em; color: var(--beat-color-03); }
.general .contFeatures .icoWrap { width: 50px; height: 50px; background-color: var(--beat-color-01); border-radius: 50%; padding: 15px 15px; }
.general .contFeatures .icoWrap img { width: 100%; margin: 0 auto; transition: var(--beat-transition-base); }
.general .contFeatures .icoWrap:hover img { transform: rotate(180deg) scale(-1); }

.general h2 { font-size: 2.3em; margin-bottom: .3em; }
.general h3 { font-size: 1.3em; margin-bottom: .3em; }

.general .genContactFlex-01 h2 { color: var(--beat-color-02); }
.general .genContactFlex-01 h3 { color: var(--beat-color-01); }

.general .genContFlex-10 .flexItemImg img { width: 100%; }

.general .genContFlex-11 .itemWrap { background-color: var(--beat-color-04); }
.general .genContFlex-11 .itemWrap .itemCaption { font-size: 34px; line-height: 38px; font-family: var(--beat-font-family1-bold); color: var(--beat-color-01); }

@media only screen and (min-width: 1281px) {
	.responsive .general .genContFlex-10 .flexWrap:nth-child(even) .flexItemImg { order: 2; }
}
/** XD 12 - Smaller than standard 960 (devices and browsers) **/
@media only screen and (min-width: 960px) and (max-width: 1280px) {
	.responsive .general .genContFlex-10 .flexWrap:nth-child(even) .flexItemImg { order: 2; }
}
/** LD 9 - Tablet Landscape size to standard 960 (devices and browsers) **/
@media only screen and (min-width: 720px) and (max-width: 959px) {
}
/** MD 6 - Mobile Landscape Size to Tablet Portrait (devices and browsers) **/
@media only screen and (min-width: 480px) and (max-width: 719px) {
	.responsive .general h2 { font-size: 1.8em; margin-bottom: .3em; }
}
/** SD 4 / Mobile Portrait Size to Mobile Landscape Size (devices and browsers) **/
@media only screen and (min-width: 320px) and (max-width: 479px) {
	.responsive .general h2 { font-size: 1.8em; margin-bottom: .3em; }
}


/* ! + BUTTONs */
.btn { font-size: 1.0em; line-height: 1.4em; border-style: solid; border-width: 2px; border-color: transparent; z-index: 1; }
.btn:hover { background-color: transparent; }
.btn > a { font-family: var(--beat-font-family1-regular); color: #000; text-transform: lowercase; letter-spacing: 1.2px; }
.btn > a:hover { color: #DD1528; }
.btn i:before { margin-left: .4em; }
.btn.icoLeft i:before { margin-right: .4em; }
.btn.sxxl > a { padding: 20px 60px; font-size: 14px; line-height: 30px; min-width: 230px; text-transform: uppercase; }
.btn.sxl > a { padding: 15px 40px; font-size: 14px; line-height: 20px; min-width: 180px; }
.btn.sl > a { padding: 8px 22px; font-size: 14px; line-height: 18px; min-width: 140px; }
.btn.sm > a { padding: .4rem .9rem; font-size: 1.0rem; line-height: 1.2rem; }
.btn.ss > a { padding: .3rem .6rem; font-size: .9rem; line-height: 1.2rem; }
.btn.st > a { padding: 0 0; font-size: .9rem; line-height: 1.2rem; }
.btn.primary { background-color: var(--beat-color-01); border: none; overflow: visible; vertical-align: top; }
.btn.primary:hover { background-color: var(--beat-color-02); }
.btn.primary > a { color: var(--beat-color-99); }
.btn.primary > a:hover { color: var(--beat-color-99); }
.btn.primout { background-color: transparent; border-color: var(--beat-color-01); }
.btn.primout:hover { background-color: var(--beat-color-01); }
.btn.primout > a { color: var(--beat-color-01); }
.btn.primout > a:hover { color: var(--beat-color-99); }
.btn.secondary { background-color: var(--beat-color-02); border: none; overflow: hidden; vertical-align: top; }
.btn.secondary:hover { background-color: var(--beat-color-01); }
.btn.secondary > a { color: var(--beat-color-99); }
.btn.secondary > a:hover { color: var(--beat-color-99); }
.btn.secout { background-color: transparent; border-color: var(--beat-color-99); }
.btn.secout:hover { background-color: var(--beat-color-99); }
.btn.secout > a { color: var(--beat-color-99); }
.btn.secout > a:hover { color: var(--beat-color-01); }
.btn.terciary { background-color: var(--beat-color-99); border: none; overflow: hidden; vertical-align: top; }
.btn.terciary:hover { background-color: var(--beat-color-02); }
.btn.terciary > a { color: var(--beat-color-02); }
.btn.terciary > a:hover { color: var(--beat-color-99); }
.btn.terout { background-color: var(--beat-color-07); border-color: var(--beat-color-99); }
.btn.terout:hover { background-color: var(--beat-color-99); }
.btn.terout > a { color: var(--beat-color-99); }
.btn.terout > a:hover { color: var(--beat-color-01); }
.btn.rounded { border-radius: 8px; }
.btn.anime:hover { animation: animePulseSmall 1s cubic-bezier(.62,.16,.13,1.01) infinite; }

.btn.moreCont > a { color: #e0e0e0; }
.btn.moreCont > a:hover { color: #fed34a; }

.btn.animeBtn a:hover:before { opacity: 1; transform: translate(0,0); }
.btn.animeBtn a:before { content: attr(data-hover); position: absolute; left: 0; width: 100%; opacity: 0; transform: translate(-100%,0); transition: all .3s ease-in-out; }
.btn.animeBtn a:hover span { opacity: 0; transform: translate(100%,0); }
.btn.animeBtn a span { transition: all .3s ease-in-out; }
/* ! - BUTTONs */

/* ! + ANIMATION */
.bounce-y { -webkit-animation: bounce-y 10s infinite linear; animation:bounce-y 10s infinite linear }
.bounce-x { -webkit-animation: bounce-x 10s infinite linear; animation:bounce-x 10s infinite linear }
.spin { -webkit-animation: spin 10s infinite linear; animation: spin 10s infinite linear }

@-webkit-keyframes bounce-y {
	0% { -webkit-transform: translateY(0); transform:translateY(0) }
	50% { -webkit-transform: translateY(-30px); transform:translateY(-30px) }
	100% { -webkit-transform: translateY(0); transform:translateY(0) }
}

@keyframes bounce-y {
	0% { -webkit-transform: translateY(0); transform:translateY(0) }
	50% { -webkit-transform: translateY(-30px); transform:translateY(-30px) }
	100% { -webkit-transform: translateY(0); transform:translateY(0) }
}

@-webkit-keyframes bounce-x {
	0% { -webkit-transform: translateX(0); transform:translateX(0) }
	50% { -webkit-transform: translateX(30px); transform:translateX(30px) }
	100% { -webkit-transform: translateX(0); transform:translateX(0) }
}

@keyframes bounce-x {
	0% { -webkit-transform: translateX(0); transform:translateX(0) }
	50% { -webkit-transform: translateX(30px); transform:translateX(30px) }
	100% { -webkit-transform: translateX(0); transform:translateX(0) }
}

@keyframes gradientBG {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@-moz-keyframes spin { 
	100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
	100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
	100% { 
		-webkit-transform: rotate(360deg); 
		transform:rotate(360deg); 
	}
}

@keyframes flash {
	0%{
		opacity: 1;
		transform: translate(45px);
	}
	100%{
		opacity: 0;
		transform: translate(0);
	}
}

@keyframes zoom-in-zoom-out {
	0% {
		scale: 100%;
		opacity: 1;
	}
	50% {
		scale: 110%;
		opacity: .7;
	}
	100% {
		scale: 100%;
		opacity: 1;
	}
}

@keyframes ping {
	0% {
		opacity: 0;
	}
	50% {
		opacity: .8;
	}
	100% {
		transform: scale(5,5);
		opacity: 0;
	}
}

@keyframes animePulse {
	0% {
		box-shadow: 0 0 0 0px rgba(200, 200, 200, 0.3);
	}
	100% {
		box-shadow: 0 0 0 30px rgba(200, 200, 200, 0);
	}
}

@keyframes animePulseSmall {
	0% {
		box-shadow: 0 0 0 0px rgba(200, 200, 200, 0.4);
	}
	100% {
		box-shadow: 0 0 0 16px rgba(200, 200, 200, 0);
	}
}

@keyframes animeZoomShake {
	0% {
		transform: rotate(0deg);
		scale: 100%;
	}
	25% {
		transform: rotate(5deg);
	}
	50% {
		transform: rotate(0eg);
		scale: 110%;
		opacity: .7
	}
	75% {
		transform: rotate(-5deg);
	}
	100% {
		transform: rotate(0deg);
		scale: 100%;
	}
}

@keyframes animeGelatine {
	from, to {
		transform: scale(1, 1);
	}
	25% {
		transform: scale(0.9, 1.1);
	}
	50% {
		transform: scale(1.1, 0.9);
	}
	75% {
		transform: scale(0.95, 1.05);
	}
}
/*   - ANIMATION */

/* + MEDIA QUERIES */

@media only screen and (min-width: 1281px) and (max-width: 1600px) {
}
/** XD 12 - Smaller than standard 960 (devices and browsers) **/
@media only screen and (min-width: 960px) and (max-width: 1280px) {
}
/** LD 9 - Tablet Landscape size to standard 960 (devices and browsers) **/
@media only screen and (min-width: 720px) and (max-width: 959px) {
    .responsive body { cursor: pointer; }
}
/** MD 6 - Mobile Landscape Size to Tablet Portrait (devices and browsers) **/
@media only screen and (min-width: 480px) and (max-width: 719px) {
    .responsive body { cursor: pointer; }
	.responsive .btn.primary a { white-space: normal; }
}
/** SD 4 / Mobile Portrait Size to Mobile Landscape Size (devices and browsers) **/
@media only screen and (min-width: 320px) and (max-width: 479px) {
    .responsive body { cursor: pointer; }
	.responsive .btn.primary a { white-space: normal; }
}
/* - MEDIA QUERIES */