::before, ::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
	--padding: 16px;
	--burgTop1: 1px;
	--burgTop2: 9px;
	--burgTop3: 17px;
	--radius: 6px;

	--color: #000;
	--brandprimary: #007DC3;
	--brandprimarydark: #7f90c4;
	--brandprimarycolor: #fff;
	--brandsecondary: #0077be;
	--brandprimarybg: linear-gradient(-90deg, #5266a3, #425282);
  
  
	--brandcolor1: #0077be;
	--brandcolor2: #ffd105;
	--brandcolor3: #3aba4b;
	--brandcolor4: #ef4638;
  
	--sectionshadow:  0 0 24px rgba(0,0,0,0.075);

	--btndefault: #eee;
	--red: #bd4141;
	--error: #edbbbb;
	--danger: #d92f2f;
	--color: #000;
	--lightcolor: #666;
	--lightbg: #fff;
	--lightbg2: #f6f6f6;

	--border: 1px solid #ddd;
	--borderdarker: 1px solid #ddd;
	--formborder: 1px solid #fff;


	--btn-primary: #5266a3;
	--btn-primary-hover: #8694bf;
	--link-hover: #425282;
	--done: #a5c63b;
	--donedark: #849e2f;
	--donecolor: #fff;
	--nosign: #e19992;
	--nosigndark: #849e2f;
	--nosigncolor: #fff;
	--inprogress: #ccc;
	--blockitemhover: #eee;
	--today: rgba(192, 201, 227, 0.3);

	--dcsgradient: var(--brandprimary);

	--boxtransition: 0.15s;

}

body {
	font-size: 16px;
	
	@media (max-width: 768px) {
		font-size: 14px;
	}
}

header.header {
	nav {
		display: block;
		float: left;
		margin-top: 26px;

		@media screen and (max-width: 1199px) {
			display: none;
		}
		
		ul {
			display: block;
			float: left;
			margin: 0;
			
			li {
				display: block;
				float: left;
				margin-right: calc(var(--padding) * 1.5);
				position: relative;

				a, .nav-header {
					color: var(--color);
					display: block;
					float: left;
					padding: 6px;
					text-decoration: none;
					transition: 0.2s;
					

					
					&:before {
						content: " ";
						position: absolute;
						bottom: 0;
						height: 2px;
						left: 50%;
						right: 50%;
						transition: 0.2s;
						background: var(--brandprimary);
					}
				}
				

				a:hover, .nav-header:hover {
					color: #444;
					
					&:before {
						right: 0;
						left: 0;
					}

				}
				
				&.active {
					> a, > .nav-header {
						color: var(--brandprimary);
						font-weight: 600;
					}
				}
				
				ul {
					position: absolute;
					flex-direction: row;
					flex-wrap: wrap;
					top: 100%;
					display: none;
					background: var(--lightbg);
					box-shadow: 0 0 12px rgba(0,0,0,0.2);
					z-index: 2;
					padding: 6px;
					border-radius: 3px;
					
					li {
						margin: 0;
						width: 100%;
						white-space: nowrap;
						
						a, .nav-header {
							width: 100%;
							padding: 12px;
						
							&:before {
								display: none;
							}
							
							&:hover {
								color: var(--brandprimary);
							}
						
						}
					}
				}
				
				&:hover > ul {
					display: flex;
				}
				
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
}



.navigation-mobile-overlay {
	display: block;
	opacity: 0;
	position: fixed;
	left: 0;
	right: 0;
	top: -100px;
	bottom: -100px;
	background: rgba(255,255,255,0.75);
		
	z-index: 10;
	pointer-events: none;
	transition: 0.3s;
	z-index: 23;

}

.mobile-menu-visible .navigation-mobile-overlay {
	opacity: 1;
}

.navigation-mobile {
	display: none;	
	
	&.visible {
		.navigation-mobile-overlay {
			opacity: 1;
		}
	}		
	.menu-wrapper {
		position: relative;
		z-index: 11;
	}

    

    * {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .dropdown-menu {
        position: static;
    }

    h3 {
        color: var(--brandprimary);
        font-size: 18px;
        font-weight: 600;
        margin: 16px 0 0;
        float: left;
        width: 100%;
    }
  
  
    @media screen and (max-width: 1199px) {
		background: var(--lightbg);
		display: block;
		position: fixed;
		z-index: 24;
		width: 300px;
		top: 0;
		bottom: -100px;
		right: -300px;
		margin: 0;

		-moz-transition: 0.3s;
		-webkit-transition: 0.3s;
		transition: 0.3s;

		padding: 70px 0 100px;
		overflow-y: auto;
		overflow-x: hidden;
		display: block; 
  
      
		&.visible {
			right: 0;
		}
    
		nav.navigation {
			float: left;
			display: block;
			width: 100%;
			margin-top: 0;
          
			ul {
				display: block;
				list-style: none;
				margin: 0;
				padding: 0;
				width: 100%;
				float: left;
				padding: var(--padding);
			
				ul {
					position: static;
					display: none;
				}
           
				li {
					display: block;
					width: 100%;

					&.current, &.active {
						> a, > .nav-header {
							color: var(--brandprimary);
							font-weight: 600;
							background: transparent;
						}
					}
				  
					&:hover {
						> ul {
							display: none;
						}
					}
				  
				  

					a, .nav-header {
						display: block;
						float: left;
						width: 100%;
						border-radius: 0;
						padding: calc(var(--padding) / 1.5) 0;
						line-height: 1.3;
						text-decoration: none;
						color:  var(--color);
						
						&:before {
							display: none;
						}

						.fa, .fas, .far {
							transform: rotate(-90deg);
							-moz-transition: 0.3s;
							-webkit-transition: 0.3s;
							transition: 0.3s;
						}

					}
				 
				 


					&.expanded {              
						> a {
							.fa, .fas, .far {
								transform: rotate(0deg);
							}
						}
					}
				}
            
            
				.nav-child {
					display: block;
					float: left;
					width: 100%;
					list-style: none;
					padding: 0;
					border: 1px solid var(--brandprimary);
					box-shadow: none;
					display:none;
					position: relative;
					padding: 5px 0;
					margin: 10px 0;
					border-radius: 2px;

					li {
						margin: 0;
						padding: 0;
						clear: both;
						width: 100%;
					  
					  
						&.current, &.active {    
							a {
								font-weight: bold;
							}
						}
						
						a {
							width: 100%;
							font-size: 14px;
							line-height: 32px;
							font-weight: normal;
							color: #888;
							padding: 5px 15px;
							text-decoration: none;
							white-space: nowrap;
							width: 100%;
							border-radius: 0;

							&:hover {
								background: #eee;
								color: var(--color);
								text-shadow: 1px 1px 1px rgba(255,255,255,0.4);
							}
						}
					}
					
				}
          
			}
		}
	}
}





html {
	width: 100%;
	overflow-x: hidden;
	scroll-behavior: smooth;
	background: var(--lightbg);
	
	&::-webkit-scrollbar {
		width: 6px;
		background: rgba(0,0,0,0.2);
	}
	
	&::-webkit-scrollbar-track {
		border-radius: 10px;
	}
	 
	&::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background: #aaa;
	}
	
	scrollbar-width: thin;
}

body, body * {
	 font-family: "Montserrat", sans-serif;
}

body {
	margin: 0;
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	line-height: 1.55;
	color: var(--color);
	overflow-x: hidden;
	width: 100%;
	background: #F0F1F5;
	padding: 0 !important;
	
}

@media screen and (max-width: 767px) {
	html {
		display: block;
		float: left;
		width: 100%;
		height: 100vh;
	}
}


.container {
    width: 1388px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 var(--padding);
}

article {
    width: 1024px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 var(--padding);
}

svg {
	max-width: 100%;
}

.row {
	margin: 0 calc(0px - var(--padding));
	
	&:before {
		content: " ";
		width: 100%;
	}
}

* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

a,
a:visited,
a:focus {
	color: var(--brandprimary);
	transition: 0.3s;
}

a:hover {
	color: var(--link-hover);
}

.right {
	float: right;
}


.btn,
.btn:visited {
	display: inline-block;
	padding: 4px 20px;
	font-size: 16px;
	font-weight: bold;
	color: #000;
	background-color: #333; /* Kolor tła przycisku */
	border: none;
	border-radius: 8px; /* Zaokrąglenie */
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	z-index: 1;
	overflow: hidden;
	border-radius: 50px;
	transition: var(--boxtransition);
	background: var(--brandprimary);
	color: #fff;
	white-space: initial;
	
	border: 2px solid var(--brandprimary);

	&:hover {
	  color: #fff;

	}

	&:active {

	}
	
	&.outline {
		background: transparent;
		color: var(--color);
		border-color: var(--brandprimary);
	}

}




@media screen and (max-width: 768px) {
	.mobile-btn-split {
		.btn {
			width: calc(50% - (var(--padding) / 2));
			
			&:first-child{
				margin-right: calc(var(--padding) / 2);
			}
			&:last-child {
				margin-left: calc(var(--padding) / 2);
			}
			float: left;
		}
	}
}

h1, h2, h3, h4 {
	margin: 0 0 12px;
	line-height: 1.45;
}

h1 {

	
	/* font-size: 38px; 
	margin: 0;
	font-weight: 600; */
	margin-bottom: var(--padding);

	.btn {
		margin-top: 7px;
	}
	
	@media screen and (max-width: 1200px) {
		font-size: 34px;

		.btn {
			margin-top: 5px;
		}
	}
	
	@media screen and (min-width: 1024px) {
		line-height: 1.35;
	}

	@media screen and (max-width: 1024px) {
		font-size: 28px;		
		
		.btn {
			margin-top: 2px;
		}
	}

	@media screen and (max-width: 768px) {
		font-size: 24px;
		
		.btn {
			margin-top: 0;
		}
	}
	
	small {
		float: left;
		width: 100%;
	}
}

h2 {
    font-size: 32px;
	font-weight: 700;
	font-style: normal;
  
	margin: var(--padding) 0 calc(var(--padding) / 2);
	
	@media screen and (max-width: 1024px) {
		font-size: 20px;
	}
	
	@media screen and (max-width: 767px) {
		font-size: 18px;
	}
}

h3 {
    font-size: 24px;
	font-weight: bold;

	@media screen and (max-width: 1024px) {
		font-size: 26px;
	}

	@media screen and (max-width: 767px) {
		font-size: 22px;
	}
}

p {
	margin-top: 0;
	margin-bottom: var(--padding);
	
	&:last-child {
		margin-bottom: 0; 
	}
}

small {
	font-weight: 500;
}



img {
	max-width: 100%;
}

a img {
	border-width: 0;
}



#page-wrapper {
	float: left;
	width: 100%;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: transparent;
	
	@media (max-width: 1200px) {
		> .container {
			padding: 0;
		}
	}
	
	@media (max-width: 1024px) {
		padding-top: 88px;
	}
	
	@media (max-width: 991px) {
		padding-top: 68px;
	}
}

main, section {
	display: block;
	float: left;
	width: 100%;
}

.page-shadow {
	float: left;
	width: 100%;
	background: #fff;
	margin: 16px 0;	
	/* box-shadow: 0 0 24px rgba(0,0,0,0.075); */
	
	@media (max-width: 1200px) {
		margin: 0;
		box-shadow: none;
	}
}

main {
	flex-grow: 1;
	margin: 0;
	
	@media (max-width: 480px) {
		margin-top: var(--padding);
	}
}

header.header {
	display: block;
	float: left;
	width: 100%;
	padding: var(--padding) 0;
	background: #FBFBFB;
	box-shadow: 0 0 12px rgba(0,0,0,0.2);
	border-bottom: var(--borderdarker);
	
	.container {
		position: relative;
	}
	
	.logo {
		float: left;
		position: relative;
		
		img {
			float: left;
		}
		
		@media screen and (max-width: 1024px) {
			img {
				height: 50px;
			}
		}
		
		@media screen and (max-width: 480px) {
			img {
				height: 40px;
			}
		}
	}
	
	@media screen and (max-width: 1200px) {			
		position:fixed;
		left: 0;
		top: 0;
		right: 0;
		z-index: 22;
	}
	


}


section {
	padding: calc(var(--padding) * 4) 0;
	
	@media screen and (max-width: 1024px) {
		padding: calc(var(--padding) * 3) 0;
	}
	
	@media screen and (max-width: 768px) {
		padding: calc(var(--padding) * 3) 0;
	}
	
	@media screen and (max-width: 414px) {
		padding: calc(var(--padding) * 3) 0;
	}
}

.no-margin {
	margin-top: 0;
	margin-bottom: 0;
}


.table {
	width: 100%;
	float: left;
	border-collapse: collapse;
	border-width: 0;
	margin-bottom: var(--padding);

	td, th {
		
	}
	
	&.condensed {
		td, th {
			font-size: 14px;
		}
	}

	thead, tbody {
		td, th {
			font-size: 18px;
			padding: calc(var(--padding) / 2);
			
			@media screen and (max-width: 767px) {
				font-size: 16px;
			}
		}
	}

	thead {
		tr {
			background: var(--btn-primary);
			th {
				
				color: var(--brandprimarycolor);
				text-align: left;
				
			}
		}
	}
	
	tbody {
		tr {
			td {

			}
							
			&:nth-child(2n) {
				background: var(--lightbg2);
			}
		}
	}
}



nav {
	.btn-align {
		float: right;
		
		.btn {
			float: left;
			margin-right: calc(var(--padding) / 2);
			text-align: center;
			
			&:last-child {
				margin-right: 0;
			}
		}
		
		@media screen and (max-width: 767px) {
			float: left;
			width: 100%;
		}
	}
}

		
.mobile-btn,
a.mobile-btn,
button.mobile-btn {
	cursor: pointer;
	background: var(--btn-primary);
	border-width: 0;
	color: var(--brandprimarycolor);
	padding: calc(var(--padding) / 2) var(--padding);
	border-radius: var(--radius);
	position: relative;
	width: auto;
	text-decoration: none;
	display: inline-block;
	font-size: 14px;
	color: var(--brandprimarycolor);
	font-weight: normal;
	line-height: 1.4;
	display: inline-block;
	white-space: nowrap !important;
	vertical-align: top;
	
	@media screen and (max-width: 767px) {
		width: 40px;
		height: 40px;
		
		overflow: hidden;
		text-indent: -999px;
		border-radius: 50%;
		
		i {
			text-indent: 0;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}
}


hr {
	float: left;
	width: 100%;
	border-width: 0;

	box-shadow: 0 0 12px rgba(0,0,0,0.2);
	background: linear-gradient(90deg, var(--lightbg), #ccc, var(--lightbg));
	height: 2px;
	margin: var(--padding) 0;
}


footer {
	display: block;
	float: left;
	width: 100%;
	padding: calc(var(--padding) * 2) 0;
	background: url(https://dcs.pl/media/filer_public/c4/10/c4107f67-4865-42aa-8a50-93de902032a0/background_pattern.svg) no-repeat center center;
	background-size: 100% auto;
	color: var(--color);
	text-align: center;
	
	h3 {
		font-weight: 600;
		color: var(--brandprimary);
		font-size: 17px;
		
		.fa {
			font-size: 12px;
			color: #ccc;
		}
		
		@media (max-width: 768px) {
			margin-bottom: 0;
			padding: 8px 0;
		}
	}
		@media (max-width: 768px) {
			background-image: none;
		}
	
	.linkedin-split {
		display: table;
		width: auto;
		float: right;
		
		@media (max-width: 600px) {
			float: none;
			margin: 0 auto;
			
			font-size: 14px;
		}
		
		* {
			display: table-cell;
			vertical-align: middle;
			text-align: left;
		}
		
		.left-side {
			width: 70px;
		}
		
		.big {
			float: left;
			clear: both;
			font-weight: bold;
			font-size: 22px;
			line-height: 1.3;
		}
		
		.text {
			float: left;
			clear: both;			
		}
	}
	
	.wrapper {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		
		> * {
			width: 50%;
			font-size: 18px;
			color: var(--brandprimarycolor);
			
			@media screen and (max-width: 767px ) {
				width: 100%;
				
				&:not(:last-child) {
					margin-bottom: var(--padding);
				}
			}
		}

		a,
		a:link,
		a:visited,
		a:hover,
		a:active {
			color: var(--brandprimary);
			display: inline;
			width: auto;
			font-size: inherit;
		}
	}
	
	.copy {
		float: left;
		width: 100%;
		margin-top: 16px;
	}
	
	.footer-frame {
		border: 2px solid var(--brandprimary);
		background: #FBFBFB;
		float: left;
		width: 100%;
		padding: 60px;
		border-radius: 30px;
		
		@media (max-width: 768px) {
			border-radius: none;
			padding: 16px 0;
			border-left-width: 0;
			border-right-width: 0;
			border-radius: 0;
			background-color: transparent;
		}
	}
	
	.footer-margin {
		margin: 0 auto;
		width: 80%;
		
		@media (max-width: 1024px) {
			width: 100%;
		}
	}
	
	.stay-connected-split {
		width: 100%;
		display: table;
		
		.left-side {
			@media (max-width: 768px) {
				svg {
					width: 180px;
				}
			}
		}
		
		> * {
			display: table-cell;
			vertical-align: middle;
			padding: 40px 20px;
			text-align: left;
		}
		
		@media (max-width: 600px) {
			float: left;
			display: block;
			width: 100%;
			
			> * {
				float: left;
				display: block;
				width: 100%;
				padding: 16px 0;
				
			}
		}
	}
	
	.footer-column {
		float: left;
		width: 20%;
		text-align: left;
		padding: 0 16px;
		
		
		
		@media (max-width: 1200px) {
			width: 50%;
			margin-bottom: 16px;
				
			&:nth-child(2n + 1) {
				clear: both;
			}
		}
		
		@media (max-width: 768px) {
			width: 100%;
		}
		
		ul {
			margin: 0;
			padding: 0;
			list-style: none;
			
			li {
				padding: 1px 0;
				
				a {
					text-decoration: none;
				}
			}
		}
		
		
		a {
			color: var(--color);
		}
	}
	
	p, ul li a {
		font-size: 13px;
		font-weight: 400;
	}
	

	.row {
		margin: 0 -16px;
	}
	@media (min-width: 601px) {
		h3 .fa {
			display: none;
		}
	}
	
	@media (max-width: 600px) {
		h3 .fa {
				
		}
		
		.mobile-exp {
			overflow: hidden;
			max-height: 0;
			opacity: 0;
			transition: 0.3s;
			
			&.active {
				max-height: 500px;
				opacity: 1;
			}
		}
	}
	
	@media (min-width: 769px) {		
		.footer-frame + .linkedin-split {
			display: none;
		}
	}	
	@media (max-width: 768px) {		
		.stay-connected-split .linkedin-split {
			display: none;
		}
		
		.stay-connected-split > .right-side {
			display: none;
		}
	}
	
	.footer-frame + .linkedin-split {
		margin-top: 32px;
		float: left;
		width: 100%;
	}
}

.main-header {
	position: relative;
	background: #FBFBFB;
	/* background-image: url(https://dcs.pl/media/filer_public/b8/d1/b8d1f65f-bc09-4ee5-8ce1-9d5764e256ec/bottom_shadow_bg.png); */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
	@media (max-width: 1024px) {
		padding-top: 0;
	}

	@media screen and (max-width: 480px) {

	}
	
	.btn.outline-shadow-btn {
		background: var(--lightbg);
	}
	
	.desc-wrapper {
		width: 60%;
		float: left;
		position: relative;
		padding: 0 0 0 10%;
		
		top: 50%;
		transform: translateY(-50%);
		
		
		
		@media screen and (max-width: 1023px) {
			background-image: none;
		}
		h1 {
			font-size: 34px;
			
			font-weight: 700;
			font-style: normal;
		}
		
		.desc {
			width: 70%;
			

		}
		
		
		@media screen and (max-width: 1024px) {
			 h1 {
				font-size: 34px;
			}
			width: 100%;
			margin-bottom: 40px;
			text-align: center;
			padding: 0;
			
			top: 0;
			transform: translateY(0);
			
			.desc {
				position: static;
				width: 100%;
				padding: var(--padding);
				max-width: 100%;
				
			}
		}
		
		@media screen and (max-width: 768px) {
			position: static;
			left: 0;
			margin-bottom: 0;
		
			h1 {
				font-size: 22px;
			}
		}
		
		@media screen and (max-width: 768px) {
			.main-desc-btn {
				float: left;
				width: 100%;
				padding-bottom: calc(var(--padding) * 3);
				text-align: center;
			}
		}
	}
	
	.image {
		float: right;
		width: 40%;	
		text-align: center;
		
		@media screen and (max-width: 1024px) {
			width: 100%;
			
			img {
				max-width: 240px;
			}
		}
	}
}







article {

	
	ul {
		margin: 0 0 var(--padding);
		padding: 0;
		float: left;
		width: 100%;
		
		li {
			position: relative;
			padding-left: 30px;
			list-style: none;
			float: left;
			width: 100%;
			
			&:after {
				
				display: block;
				width: 8px;
				height: 8px;
				
				position: absolute;
				
				
				
				left: 0;
				top: 7px;
				background:  var(--brandsecondary);
			}
			
			
			&:before {
				content: " ";
				display: block;
				width: 9px;
				height: 9px;
				position: absolute;
				left: 3px;
				top: 7px;
				border: 1px solid var(--brandsecondary);
				border-radius: 3px;
				background: var(--brandsecondary);
			}
		}
	}
}

.what-we-can-do-section {
	text-align: center;
	padding: 78px 58px 108px;
	
	@media (max-width: 768px) {
		padding: 32px 8px;
	}
	
	
	.text-middle {
		width: 880px;
		
		&.en {
			width: 650px;
		}
		
		max-width: 100%;
		margin: 0 auto;
	}
	
	small {
		text-transform: uppercase;
		line-height: 22px;
		font-size: 16px;
		
		@media (max-width: 768px) {
			font-size: 16px;
			font-weight: bold;
			text-transform: none;
		}
	}
	
	h2 {
		margin-top: 25px;
		font-weight: 700;
		
		@media (max-width: 768px) {
			font-weight: 400;
			margin-top: 8px;
		}
	}
	
	.what-we-can-do {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		float: left;
		flex-grow: 1;
		flex-shrink: 0;
		margin-top: 20px;
		
		.box-content {
			text-align: center !important;
		}
		

	}
}

.box-margin {
	width: 20%;
	padding: 30px 13px;
	float: left;
	display: flex;
	
	@media (max-width: 1340px) {
		width: 33%;
	}
	
	@media (max-width: 1024px) {
		width: 50%;
	}
	
	@media (max-width: 768px) {
		width: 100%;
		max-width: 320px;
		float: none;
		margin: 0 auto;
	}
	
	
	transition: var(--boxtransition);
	
	.box, .box:after {
		border-radius: 32px;
	}
	.box:after {
		border-radius: 30px;
	}
	
	.box {
		width: 100%;
		float: left;
		position: relative;
		padding: 32px 12px 22px;
		text-align: center;
		
		box-shadow: -3px 6px 0 rgba(213,230,243, 1);
		transition: var(--boxtransition);
		border: 2px solid var(--brandprimary);
		overflow: hidden;
		
		
		h3:before {
			display: none !important;
		}

		
		.btn {
			opacity: 0;
			transition: var(--boxtransition);
			border-color: #fff;
			color: #fff;
			background: var(--brandprimary) !important;
			
			&:before {
				content: " ";
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				display: block;
				z-index: 3;
			}
			
		}
		

		
		.icon {
			margin: 0 0 20px 0;
		}
		
		h3 {
			z-index: 2;
			font-size: 17.33px;
			line-height: 24px;
			text-transform: uppercase;
			font-weight: bold;
			padding-bottom: 22px;
			position: static;
			
			a {
				text-decoration: none !important;
			}
			
			a:before {
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				content: " ";
				display: block;
				position: absolute;
				z-index: 2;
			}
		}
		
		.box-content {
			text-align: left;
			font-size: 14.66px;
			font-weight: 400;
			font-style: normal;
			font-kerning: none;
			text-decoration: none;
			font-feature-settings: "calt" 0, "clig" 0, "liga" 0;
			line-height: 20px;
			font-weight: 500;
			text-align: left;
			
			font-size: 15px;
			* {
				font-size: 15px;
			}
			
			&:after {
				content: " ";
				width: 300px;
				height: 300px;
				display: block;
				position: absolute;
				bottom: -235px;
				
				border: 50px solid #fff;
				border-radius: 50%;
				transition: var(--boxtransition);
				opacity: 0;
			}
		}
	}
	path {
		transition: var(--boxtransition);
	}
	
	&:hover {
		padding-top: 0;
		padding-bottom: 0;
		
		padding-left: 7px;
		padding-right: 7px;
		
		
		.box {
			padding-top: 52px;
			padding-bottom: 62px;
			
			padding-left: 18px;
			padding-right: 18px;
			color: #fff;
			background: var(--brandprimary);

			box-shadow: none;
			
			* {
				color: #fff;
			}
				
			.box-content {
				&:after {
					opacity: 1;
				}
			}
			
			.btn {
				opacity: 1;
			}
			
			path {
				fill: #fff !important;
			}

		}
	}
}

.we-excel-section {
	padding-left: 64px;
	padding-right: 64px;	
	padding-bottom: 48px;
	
	background: var(--brandprimary);
	color: #fff;
	background-size: auto 467px;
	width: 100%;
	
	@media (max-width: 768px) {
		padding-left: var(--padding);
		padding-right: var(--padding);
		
		
		text-align: center;
	}
	
	* {
		color: #fff;
	}
	
	small {
		margin-top: 100px;
		float: left;
		width: 100%;
		
		font-size: 16px;
		line-height: 22px;
		text-transform: uppercase;
		
		@media (max-width: 1024px) {
			margin-top: 16px;
		}
		
		@media (max-width: 768px) {
			font-size: 16px;
			font-weight: bold;
			text-transform: none;
		}
	}
	
	h2 {
		display: inline-block;
		width: 75%;
		margin-top: 0;
		
		@media (max-width: 1024px) {
			width: 100%;
		}
			
		@media (max-width: 768px) {
			font-weight: 400;
			margin-top: 8px;
		}
	}
	
	.links {
		margin-top: 40px;
		width: 80%;
		float: left;
		clear: both;
		margin-bottom: 80px;
		text-align: left;
		
		@media (max-width: 1024px) {
			width: 100%;
			margin-top: 48px;
			margin-bottom: -6px;
			
		}
		
		.btn {
			padding-left: 32px;
			padding-right: 32px;
			min-width: 200px;
			text-align: center;
			margin: 0 10px 18px 0;
			
			background: var(--brandprimary);
			border-color: #fff;
			color: #fff;
			
			&:hover {
				background: #fff;
				color: var(--brandprimary);
			}
			
			@media (max-width: 768px) {
				font-size: 14px;
				padding-left: 12px;
				padding-right: 12px;
				min-width: 32px;
			}
		}
	}
}

.timeline-section {
	text-align: center;
	padding-top: 32px;
	background: #FBFBFB;
	
	.timeline-desc {
		max-width: 100%;
		width: 936px;
		margin: 0 auto;
		padding: 0 16px;
		
		h2 {
			text-transform: uppercase;
			margin-bottom: 20px;		
			font-weight: 700;
			
			@media (max-width: 768px) {
				font-weight: 400;
				margin-top: 8px;
				text-transform: none;
			}
		}
	}
	


	.timeline {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 40px;
		
		float: left;
		width: 560px;

		
		&:before {
			content: " ";
			display: block;
			position: absolute;
			left: 50%;
			top: 0;
			bottom: 50px;
			transform: translateX(-50%);
			width: 5px;
			background: var(--brandprimary);
			
			
			@media (max-width: 768px) {
				left: 50px;
			}			
		}
				
		@media (max-width: 600px) {
			width: 100%;
		}
		
		@media (max-width: 768px) {
			padding-left: 50px;
			max-width: 360px;
		}

		.item {
			padding-left: 0;
			padding-right: 60px;
			width: 280px;
			position: relative;
			padding-bottom: 60px;
			
			&:before {
				content: " ";
				width: 30px;
				height: 30px;
				display: block;
				position: absolute;
				top: 0;
				left: 100%;
				transform: translateX(-50%);
				border-radius: 100px;
				background: var(--brandprimary);
			}
			
			&:nth-child(1):before {
				top: 0;
			}
			
			&:nth-child(2):before {
				width: 40px;
				height: 40px;
			}
			
			&:nth-child(3):before {
				width: 50px;
				height: 50px;
			}
			
			&:nth-child(4):before {
				width: 60px;
				height: 60px;
			}
			
			&:nth-child(5):before {
				width: 70px;
				height: 70px;
				
				top: 0;
				bottom: auto;
				
				z-index: 2;
			}
			
			&:nth-child(5):after {
				width: 10px;
				background: #FBFBFB;
				content: " ";
				position: absolute;
				top: 3px;
				bottom: 0;
				right: -5px;
				z-index: 1;
				
				@media (max-width: 768px) {
					left: -5px;
					right: auto;
				}
			}
			
			&:nth-child(5) {
				padding-bottom: 0;
			}
			
			
			
			&:nth-child(2n):before {
				left: 0;
				right: 100%;
			}
			

			
			display: block;
			float: left;
			clear: both;
			
			text-align: right;
			
			&:nth-child(2n) {
				float: right;
				padding-right: 0;
				padding-left: 60px;
					text-align: left;
			}
			
			
			@media (max-width: 768px) {

				float: left !important;
				padding-right: 0 !important;
				padding-left: 60px !important;
				text-align: left !important;

				

									
				&:before {
					left: 0 !important;
					right: 100% !important;
				}
			}
			
			
			.number {
				font-size: 24px;
				font-weight: 700;
				float: left;
				width: 100%;
				margin-bottom: 4px;
				
			}
			
			> strong {
				float: left;
				width: 100%;
				margin-bottom: 10px;				
			}
			
			.desc {
				font-size: 16px;
				line-height; 22px;
			}
		}
	}
	
	.discover {
		margin-top: 60px;
		margin-bottom: 20px;
		width: 100%;
		float: left;
		text-align: center;
	}
}

.count-box {
	text-align: center;
	background: url(https://dcs.pl/media/filer_public/c4/10/c4107f67-4865-42aa-8a50-93de902032a0/background_pattern.svg) no-repeat center center;
	background-size: 100% auto;
	padding-bottom: 0;
	
	@media (max-width: 768px) {
		background-image: none;
	}

	
	.shadow-bottom, .shadow-top {
		float: left;
		width: 100%;
		padding: 130px 0;
		
		@media (max-width: 768px) {
			padding: 32px 0 64px;
		}
	}
	
	h2 {
		font-weight: 700;
		
		@media (max-width: 768px) {
			font-weight: 400;
			margin-top: 0;
		}
	}
	
	.stat-box {
		width: 33.333%;
		float: left;
		
		.number {
			font-weight: bold;
			font-size: 90px;
			line-height: 1.4;
		}
		
		p {
			font-size: 20px;
		}
		
		
		@media (max-width: 768px) {
			width: 100%;
			margin-bottom: 32px;
			
			&:first-child {
				margin-top: 16px;
			}			
			&:last-child {
				margin-bottom: 16px;
			}
			
			.number {
				font-size: 60px;
				line-height: 1.2
			}
		}
	}
}

#partners {
	padding: 116px 0 100px;
	
	@media (max-width: 768px) {
		padding: 32px 16px 0;
		
	}
	
	#partners-slider {
		margin: 0;
	}
	
	h2 {
		font-weight: 700;
		color: var(--color);
		margin-top: 0;
		
		@media (max-width: 768px) {
			font-weight: 400;
			margin-top: 8px;
			text-transform: none;
		}
	}
	
	#partners-slider {
		margin: 32px 0;
	}
}

.swiper-wrapper {
	display: flex;
	flex-direction: row;
	float: left;
	flex-grow: 1;
	flex-shrink: 0;
	margin-top: 20px;
	
	.box-margin {
		width: 100%;
	}
}

.products-section {
	.products-desc {
		display: table;
		width: 1080px;
		margin: 0 auto;
		max-width: 100%;
		margin-top: 100px;
		
		> * {
			vertical-align: middle;
			display: table-cell;
		}
		
		@media (max-width: 768px) {
			display: block;
			margin-top: 16px;
			
			.left-side, .right-side {
				float: left;
				width: 100%;
				padding-left: 0;
				padding-right: 0;
			}
		}
		
		.left-side {
			font-size: 34px;
			font-weight: bold;
			white-space: nowrap;
			padding: 0 80px 0 0;
		}
		
		.right-side {
			
		}
	}
	
	.browse-all {
		text-align: center;
		margin-bottom: 80px;
		
		.btn {
			font-weight: bold;
		}
		
		@media (max-width: 768px) {
			margin-bottom: 16px;
		}
	}
	
	.box {
		text-align: left;
	}
}


@media (max-width: 768px) {
	.swiper-button-prev,
	.swiper-button-next {
		display: none !important;
	}
}


.blog-section {
	background: var(--brandprimary);
	color: #fff;
	
	* {
		color: #fff;
	}
	
	.swiper-button-next,
	.swiper-button-prev {
		color: #fff;
	}
	
	.blog-desc {
		display: table;
		width: 1080px;
		margin: 0 auto;
		max-width: 100%;
		margin-top: 64px;
		
		@media (max-width: 768px) {
			margin-top: 32px;
			display: block;
			
			.left-side, .right-side {
				width: 100%;
				padding: 0;
				display: bock;
				float: left;
			}
		}
		
		> * {
			vertical-align: middle;
			display: table-cell;
		}
		
		.left-side {
			font-size: 34px;
			font-weight: bold;
			white-space: nowrap;
			padding: 0 80px 0 0;
		}
		
		.right-side {
			
		}
	}
	
	.box-margin {
		.box {
			border-color: #fff;		
			box-shadow: none;
			text-align: left;
			
			.btn {
				opacity: 1;
				margin-top: 20px;
				float: left;
			}

			
			.box-content {
				&:after {
					border-color: var(--brandprimary);
					right: -20%;
				}
			}
			
			&:hover {
				color: var(--brandprimary);
				background: #fff;
				box-shadow: none;
				
				* {
					color: var(--brandprimary);
				}
				
				.btn {
					color: #fff;
					border-color: #fff;
				}
			}
		}
		
	}
	
	.browse-all {
		text-align: center;
		margin-bottom: 80px;
		
		@media (max-width: 768px) {
			margin-bottom: 16px;
		}
		
		.btn {
			color: var(--brandprimary);
			border-color: #fff;
			background: #fff;
			
			&:hover {
				color: var(--brandprimary);
				background: #fff;
			}
		}
	}
}

.browse-all,
.discover {
	.btn {
		padding-left: 40px;
		padding-right: 40px;
		font-weight: 500;
		
		@media (max-width: 768px) {
			padding-left: 32px;
			padding-right: 32px;
		}
	}
}

.container .container {
	max-width: 100%;
}

.jumbotron,
.jumbotron2 {
  background: var(--brandprimary);
}

header {
	position: sticky;
	top: 0;
	
	@media (max-width: 1024px) {
		position: fixed;
	}
}

.table {
	thead {
		tr {
			background: var(--brandprimary);
			
			* {
				color: #fff;
			}
		}
	}

}

#section-blog-posts {
	.fa {
		display: none;
	}
	
	.btn:hover {
		color: var(--brandprimary);
	}
	
	h2 {
		color: var(--color);
		text-shadow: none;
	}
	
	.recent-blog-post {
		.post-date {
			display: none;
		}
	}
}

#contact {
	fieldset {
		float: left;
		width: 100%;
	}
	
	.fa {
		display: none;
	}
}

#about-content {
	padding: var(--padding);
}

#section-testimonials {
	background: #f6f6f6;
	color: var(--color);
	
	h3, h3 * {
		color: var(--color);
	}
	margin-bottom: 32px;
}

body {
	#services.services2,
	#services.services3  {
		.service {
			i {
				border-color: var(--brandprimary);
			}
			
			&:hover i {
				color: var(--brandprimary);
			}
		}
	}
}

.jumbotron.jumbotron2 {
	border-radius: 0;
	* {
		color: #fff;
	}
}

.blog-post {
	.fa {
		display: none;
	}
}

.content-wrapper {
	padding-top: 0;
	
	h2 {
		margin-bottom: 0;
	}
	
	.content-wrapper {
		padding-top: 32px;
	}
}

.features-content {
	padding-top: 32px;
}

.search-wrapper {
	display: none !important;
}



.category-title {
	.category-img {
		svg {
			max-width: unset;
		}
	}
}

section#features.content {
	padding-top: 0;
}


#services.services2,
#services.services3 {
	.service {
		  text-align: center;
		  padding: 20px;
		  background-color: #F9F9F9;
		  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
		  margin: 15px 0;
		
		i {
			font-size: 40px;
			border: 2px solid #16A085;
			border-radius: 50%;
			width: 90px;
			height: 90px;
			padding-top: 25px;
			transition: 0.3s ease-in-out 0s;
			color: var(--brandprimary);
		}
	}
	  
	h3 {
		margin: var(--padding) 0;
		font-weight: 600;
		
		&:before {
			display: none;
		}
	}
}

.quote-block {
	h3:before {
		display: none;
	}

	i {
		
	}
}

.jumbotron.jumbotron2 {
	h1 {
		small, small * {
			font-weight: 500;
		}
	}
	
	h2 {
		margin: 8px 0;

	}
}

.bg-color-2 {
  background-color: #F0F0F0;
  padding: 32px 0;
  margin: 16px 0;
  
  h2, h3 {
	  margin: 0 0 32px;
  }
}

#contact.content {
	text-align: center;
	
	h2 {
		margin: 0;
	}
}

#about-content {
	h3:before {
		display: none;
	}
}

.content-wrapper h1 {
	font-weight: bold;
}

.nav.vertical-nav li {
	a {
	  color: #555555;
	  font-weight: 400;
	  padding: 6px 0;
	  transition-duration: 0.4s;
	  font-weight: 500;
	}
	
	&.active {
		a {
			color: var(--brandprimary);
		}
	}
}

.text-10 {font-size:10px;}
.text-12 {font-size:12px;}
.text-14 {font-size:14px;}
.text-16 {font-size:16px;}
.text-18 {font-size:18px;}
.text-20 {font-size:20px;}

.blog-post {
	float: left;
	width: 100%;
	background: #FBFBFB;
	margin-bottom: calc(var(--padding) * 2);
	box-shadow: 0 0 2px rgba(0,0,0,0.2);
	
	.blog-post-body {
		h2 {
			margin-top: 0;
			font-weight: bold;
		}
		
		padding: calc(var(--padding)* 2);
		
		@media (max-width: 768px) {
			padding: var(--padding);
		}
	}
}

.blog-post-detail {
	background-color: #F5F5F5;
	padding: 10px 0;
	border-bottom: 1px solid #E5E5E5;
  
	span:first-child {
		padding-left: calc(var(--padding) * 2);
	}
	
	span {
		padding: 10px 18px;
		padding-left: 18px;
		border-right: 1px solid #E5E5E5;
		color: #777;
		font-weight: bold;
	}
	
	.fa {
		display: initial;
		margin-right: 12px;
	}
}




.pagination > li:before {
	display: none !important;
}

#related-articles {
	padding-top: 0;
	
	.related-items {
		margin: 0 calc(0px - var(--padding) / 2);
		
		.related-item {
			width: 25%;
			float: left;
			padding: 8px;
			
			&:nth-child(4n + 1) {
				clear: both;
			}
			
			@media (max-width: 1200px) {
				width: 33%;				
				
				&:nth-child(4n + 1) {
					clear: none;
				}
				
				&:nth-child(3n + 1) {
					clear: both;
				}
			}
			
			
			@media (max-width: 768px) {
				width: 50%;
				
				&:nth-child(3n + 1) {
					clear: none;
				}
				
				&:nth-child(2n + 1) {
					clear: both;
				}
			}
			
			@media (max-width: 480px) {
				width: 100%;
			}
			
			img {
				width: 100%;
			}
			
			a {
				text-decoration: none;
			}
			
			article {		
				background: #fff;
				box-shadow: 0 0 2px rgba(0,0,0,0.2);
				margin: 0;
				padding: 0;
				text-align: center;
			
				.desc {
					padding: var(--padding);
				}
			}
		}
	}
}

.content-wrapper > .tab-content,
.content-wrapper > .cms-plugin >.tab-content {
	padding: 0;
	box-shadow; none;
	border-width: 0;
	background: transparent;
}

.swiper {
	width: 100%;
  
	.swiper-slide {
		text-align: center;
		border-radius: 5px;
		padding: 20px;
		
		height: initial !important;
		display: flex;
	}
	
}

.carousel-wrapper {
	padding-left: 50px;
	padding-right: 50px;
	position: relative;
	
	@media (max-width: 480px) {
		padding-left: 20px;
		padding-right: 20px;
	}
}

.features-item .panel .panel-heading a {
	width: 100%;
	display: block;
	color: #fff !important;
	text-decoration: none;
}

header {
	width: 100%;
	float: left;
	background: #FBFBFB;
	position: relative;
	z-index: 22;

	.lang-wrapper {
		display: block;
		position: absolute;
		left: 172px;
		top: 14px;

		a {
			display: block;
			float: left;
			color: var(--color) !important;


			&:hover {
				color: var(--color) !important;
				text-decoration: none;
			}

			&:last-child {
				border-right-width: 0;
			}
		}

		@media screen and (max-width: 991px) {
			right: 62px;
			top: 4px;
		}
	}

	@media screen and (max-width: 1024px) {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}

	> .container {
		position: relative;
	}
	
	.logo {
		float: left;
		margin: 10px 0;
		position: relative;
		
		.dcs-30-years {
			position: absolute;
			left: 0;
			bottom: 2px;
			text-transform: uppercase;
			font-size: 13px;
			font-weight: bold;
			color: #888;
			
		}

		@media screen and (max-width: 991px) {
			margin: 0;
		}
	}

	.navbar-nav {
		display: block;
		float: right;
		margin: 0;
		margin-top: var(--padding);
		position: absolute;
		right: 4px;
		bottom: 12px;
	
		@media screen and (max-width: 1024px) {
			display: none;
		}
	
		a {
			text-decoration: none;;
		}
	
		.dropdown-toggle {
			&:after {
				display: none;
			}
		}

		> li,
		> .cms-plugin > li {
			display: block;
			float: left;
			width: auto;
			margin-right: calc(var(--padding) * 1.5);

			.fa, .fas {
				margin-left: 6px;
				font-size: 10px;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				color: #aaa;

				&.fa-angle-double-right {
					display: none;
				}
			}

			> a {
				padding: var(--padding) 8px;
				color: var(--brandprimary);
				font-size: 16px;
				text-decoration: none;
				float: left;
				-moz-transition: 0.2s;
				-webkit-transition: 0.2s;
				transition: 0.2s;
				color: var(--color);
	
				&:hover {
					color: var(--brandsecondary);
				}
			}
		}

		.dropdown {
			position: relative;
			z-index: 1;
			li {
				width: 100%;
				float: left;
			}
			li {
				a {
					width: 100%;
					display: block;
					float: left;
					padding: calc(var(--padding) / 3) calc(var(--padding) / 2);
					color: var(--color);
				}
			}

			> .dropdown-menu {                    
				border-width: 0;
			}

			&.open,
			&:hover {
				z-index: 2;
				> a {
					background: #fff;
					color: var(--brandcolor1);
				}

				> .dropdown-menu {
					height: auto;
					max-height: 999px;
					width: auto;
					float: left;
					opacity: 1;
					overflow: visible;
				}
			}
		}
	
		.dropdown-menu {
			display: block;
			position: absolute;
			left: 0;
			top: 100%;
			margin: 0;
			overflow: hidden;
			max-height: 0px;
			opacity: 0;
			transition: 0.3s;
			padding: 4px 12px;
			border-radius: 4px;
	
			.dropdown-toggle {
				padding-right: 30px;
				position: relative;
				
				.fa, .fas, .far {
					position: absolute;
					right: 5px;
					top: 11px;
					transform: rotate(-90deg);
				}
			}
	
			> li {
				border-width: 0;
				float: left;
				width: 100%;

				a {                    
					border-bottom: 1px solid #eee;
					padding: 12px 0;
				}

				&.active {
					a {
						background: transparent;
						color: var(--brandprimary);
					}
				}
	
				&:last-child {
					a {
						border-bottom-width: 0;
					}
				}
	
				&:hover > a {
					color: var(--brandsecondary);
					background: transparent;
				}
			}
	
			.dropdown-menu {
				top: 0;
				left: calc(100% - 2px);
			}
		}
	}
}