/**************************************************/
/* tělo stránky */
/**************************************************/

body.stickHeaderPadding
{
	/* padding-top: 130px; */
}

.wrapHeaderAndContent
{
	position: relative;
	flex: 1 0 auto;
}

.containerFlex.wrapHeaderAndContent
{
	justify-content: center;
}



/************************************************/
/* header */
/************************************************/

header, .wrapHeader
{
	justify-content: center;
	height: 137px;
	background: var(--color-bg-header);
}

.wrapHeaderAndContent.stickHeaderHeaderAndContent
{
	/* margin-bottom: 130px; */
}

header.stickHeader
{
	/* position: fixed;
	top: 0;

	width: 100%;
	z-index: 1000; */
}

	.wrapHeaderLogo
	{
		width: 100px;
		height: 100px;
	}

	.wrapHeaderContent
	{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		flex-wrap: wrap;

		width: calc(100% - 100px);
		padding-left: 11%;
		padding-top: 40px;
	}

	.wrapHeaderRow
	{
		height: 107px;
	}

	.wrapHeaderRowSubmenu
	{
		height: 30px;
	}

		.subSw
		{
			padding-left: 26.5%;
		}

		.subServices
		{
			padding-left: 47.8%;
		}

	.wrapHeaderLeft, .wrapHeaderRight
	{
		float: left;
		margin: 0;
	}

	.wrapHeaderRight
	{
		flex-direction: row-reverse;
		align-items: center;
		height: 70px;
	}

	/* logo */
	.wrapHeaderLogo, .boxHeaderLogo
	{
		display: flex;
		align-items: center;
		float: left;
		min-height: 20px;
		font-size: 0;
	}
		.boxHeaderLogo
		{
			width: 80px;
			height: 80px;
			background: transparent url(../images/logo-di5tech.svg) no-repeat left center;
			background-size: 99%;
		}

	/* jazykové mutace */
	.wrapHeaderLanguages
	{
		float: left;
		justify-content: flex-end;

		font-size: 90%;
	}

		.wrapHeaderLanguages a
		{
			color: #fff;
			font-size: 75%;
			text-transform: uppercase;
			text-decoration: none;
		}

		.wrapHeaderLanguages a:hover
		{
			color: var(--color-bg-blue);
			text-decoration: none;
		}

		.wrapHeaderLanguages span
		{
			color: #fff;
			margin: 0 5px;
		}



	/* hlavní menu */
	.wrapMenuMain, .wrapMenuLogin
	{
		float: left;
		justify-content: space-between;
	}

	.wrapMenuMain
	{
		margin-top: 10px;
	}

		.wrapMenuMain div.level1
		{
			height: 40px;
		}

			.wrapMenuMain div.level1 a
			{
				position: relative;
				top: 7px;

				padding: 7px 0;
				margin: 0;
				border-bottom: 0;

				-webkit-border-top-left-radius:3px;
				-moz-border-radius-topleft:3px;
				border-top-left-radius:3px;
				-webkit-border-top-right-radius:3px;
				-moz-border-radius-topright:3px;
				border-top-right-radius:3px;
			}


			.wrapMenuMain a, .wrapMenuMain a:hover, .wrapMenuMain div.level1:hover a,
			.wrapMenuLogin a, .wrapMenuLogin a:hover, .wrapMenuLogin div.level1:hover a
			{
				color: #fff;
				text-decoration: none;
			}

			.wrapMenuMain a, .wrapMenuMain a:hover, .wrapMenuMain div.level1:hover a
			{
				font-size: 100%;
			}

			.wrapMenuMain div.level1 a:hover
			{
				color: var(--color-bg-blue);
			}

			.wrapMenuMain div.level1 a.dirDropdown:hover, .wrapMenuMain div.level1 a.this
			{
				/* background: var(--color-bg-blue);
				color: #fff; */
			}

			.wrapMenuMain div.level1 a.this
			{
				font-weight: 700;
			}

			.wrapMenuMain div.level1 a.dirDropdown
			{
				position: relative;
				padding-right: 20px;
			}

			.wrapMenuMain div.level1 a.dirDropdown:after
			{
				content: '';

				position: absolute;
				top: calc(50% - 5px);
				right: 5px;

				width: 10px;
				height: 10px;

				background: transparent url('../images/dropdown.svg') no-repeat center right;
				background-size: 10px;
			}


	/* podmenu */
	.wrapHeaderRowSubmenu
	{
		width: 100%;
		background: var(--color-bg-blue);
	}

		.wrapSubmenuDir
		{
			display: none;
		}

			.wrapSubmenuDir a
			{
				position: relative;
				top: 2px;

				color: #fff;
				text-decoration: none;
			}

			.wrapSubmenuDir a:hover
			{
				text-decoration: underline;
			}

			.wrapSubmenuDir a + a
			{
				margin-left: 20px;
			}



	/* login */
	.wrapMenuLogin
	{
		flex-direction: column;
	}

	.wrapMenuLogin div.level1
	{
/*        margin-top: 3px;*/
	}

		.wrapMenuLogin a, a.butOrange, a.butMoreSmall
		{
			display: block;
			min-width: 100px;

			padding: 2% 20px;
			margin: 0;
			background: #fff;

			color: var(--color-bg-blue-dark);
			font-size: 90%;
			font-weight: 700;
			text-align: center;
			text-transform: uppercase;
		}

		.wrapMenuLogin .level1
		{
			float: none;
		}

		.wrapMenuLogin .level1 + .level1
		{
			margin-top: 5px;
		}

		.wrapMenuLogin div.level1:hover a, a.butOrange:hover
		{
			background: var(--color-bg-blue);
		}

		.wrapMenuLogin a.butMenuOrange, a.butOrange
		{
			background: var(--color-button-1);
			color: #fff;
		}

		a.butOrange, a.butMoreSmall, button.butOrange
		{
			display: inline-block;
			padding: 5px 20px;
			text-transform: uppercase;
			text-decoration: none;
		}

		a.butMoreSmall
		{
			background: transparent;
			border: 1px solid var(--color-bg-blue-dark);

			color: var(--color-bg-blue-dark);
		}

		a.butOrange + .butOrange, .butMoreSmall + .butOrange, .butOrange + .butMoreSmall, .butMoreSmall + .butMoreSmall
		{
			margin-left: 20px;
		}

		a.butOrange:hover, a.butMoreSmall:hover, , button.butOrange:hover
		{
			background: var(--color-bg-blue-dark);
			color: #fff;
		}



/* menu pro mobily */
.wrapHeaderRowMobile
{
	display: none;
}

	.wrapMenuMobile
	{
		justify-content: center;
		flex-wrap: wrap;
		margin: 0 auto;
	}

		/* ico menu */
		.wrapButMobileMenu svg rect
		{
			fill: #fff;
		}

		/* logo */
		.wrapHeaderRowMobile .wrapHeaderLogo
		{
			margin-top: 15px;
		}

		.wrapMenuMobile .hidden
		{
			display: none;
		}

		/* položky mobilního menu */
		.wrapMenuMobile .level1, .wrapMenuMobile .level2
		{
			width: 100%;
			float: none;

			text-align: left;
		}

		.wrapMenuMobile .level1 + .level1
		{
			margin-top: 8px;
		}

		.wrapMenuMobile .level2
		{
			margin-top: 8px;
			padding-left: 25px;
		}

			.wrapMenuMobile .level1 a, .wrapMenuMobile .level2 a
			{
				color: #fff;
				text-decoration: none;
			}

			.wrapMenuMobile div a:hover
			{
				color: var(--color-button-1);
				text-decoraion: underline;
			}

		.wrapMenuLoginMobile
		{
			justify-content: center;
			margin-top: 30px;
		}



/************************************************/
/* footer */
/************************************************/

footer, .wrapFooter
{
	flex-shrink: 0;
	background: var(--color-bg-grey);
}

	footer a
	{
		text-decoration: none;
	}

	.labelFooterSection
	{
		margin: 0 auto;
		color: #fff;
		text-align: center;
		font-weight: 400;
	}

	/* sociální sítě */
	.wrapFooterSocial, .wrapFooterDi5Group
	{
		flex-direction: column;
		justify-content: center;
		padding: 30px 0;
	}

		.boxFooterSocial
		{
			margin: 0 auto;
		}

			.menuFooterSocial
			{
				margin-top: 15px;
				justify-content: center;
			}

				.menuFooterSocial div.level1, .menuFooterSocial div.level1 a,
				.menuFooterSocial div.level1:hover a, .menuFooterSocial div.level1 a:hover
				{
					background: var(--color-bg-grey);
					display: block;
					overflow: hidden;
					margin: 0;
					padding: 0;
					border: 0;

					width: 60px;
					height: 60px;

					font-size: 0;
					text-decoration: none;
				}

				.menuFooterSocial div.level1 + .level1
				{
					margin-left: 30px;
				}

					.menuFooterSocial div.level1 a.icoFacebook
					{
						background: transparent url('../images/social/xFB.svg') no-repeat center center;
						background-size: 90%;
/*                        filter: grayscale(100%);*/
					}

					.menuFooterSocial div.level1:hover a.icoFacebook
					{
						background: transparent url('../images/social/xFB.svg') no-repeat center center;
						background-size: 100%;
/*                        filter: grayscale(0%);*/
					}

					.menuFooterSocial div.level1 a.icoLinkedIn
					{
						background: transparent url('../images/social/xLinkedIn.svg') no-repeat center center;
						background-size: 90%;
/*                        filter: grayscale(100%);*/
					}

					.menuFooterSocial div.level1:hover a.icoLinkedIn
					{
						background: transparent url('../images/social/xLinkedIn.svg') no-repeat center center;
						background-size: 100%;
/*                        filter: grayscale(0%);*/
					}

					.menuFooterSocial div.level1 a.icoYouTube
					{
						background: transparent url('../images/social/xYouTube.svg') no-repeat center center;
						background-size: 90%;
/*                        filter: grayscale(100%);*/
					}

					.menuFooterSocial div.level1:hover a.icoYouTube
					{
						background: transparent url('../images/social/xYouTube.svg') no-repeat center center;
						background-size: 100%;
/*                        filter: grayscale(0%);*/
					}

					.menuFooterSocial div.level1 a.icoNewsLetter
					{
						background: transparent url('../images/social/xNewsLetter.svg') no-repeat center center;
						background-size: 90%;
/*                        filter: grayscale(100%);*/
					}

					.menuFooterSocial div.level1:hover a.icoNewsLetter
					{
						background: transparent url('../images/social/xNewsLetter.svg') no-repeat center center;
						background-size: 100%;
/*                        filter: grayscale(0%);*/
					}



	/* copyright */
	.wrapFooterCopyright
	{
		justify-content: center;
		padding: 15px 0;
		background: var(--color-bg-grey-dark);
	}

		.boxFooterCopyright
		{
			color: #fff;
			font-size: 75%;
		}

			.boxFooterCopyright div
			{
				color: #fff;
				float: left;
			}

			.boxWebDeveloper
			{
				text-align: right;
			}




/**************************************************/
/* widget pro galerie a soubory ke stažení */
/**************************************************/

.wrapWidget
{
	margin: 0;
}

	.boxWidget
	{
		margin: var(--size-50) auto;
	}

.boxWidgetContent
{
	width: 100%;
	display: block;
	padding: 0 ;
	overflow: hidden;
	float: none;
}

.boxWidgetContent
{
}

.wrapWidget .label
{
	width: 100%;
	display: block;
	margin-bottom: var(--size-25);

	color: var(--color-text-headline);
	font-size: 100%;
	font-weight: 400;
	text-align: center;
	text-transform: uppercase;
}


/**************************************************/
/* image gallery */
/**************************************************/

ul.imageGallery, ul.files, ul.links
{
	list-style: none outside;
	margin: 0;
	line-height: 1em;
	float: left;
	display: block;
	width: 100%;
}

.wrapWidgetGallery
{
	background: var(--color-ico);
}

.wrapImgGallery
{
	float: left;
	margin: 0;


}

	.boxImgGallery
	{
		width: 100%;
		padding-top: 75%; /* 1:1 Aspect Ratio */
		position: relative; /* If you want text inside of it */

		font-size: 0;
		background: rgba(0,0,0,.1);
	}

	.wrapImgGallery:hover .boxImgGallery
	{
		background: rgba(0,0,0,0);
	}

	.imageGallery a
	{
		width: 100%;
		float:left;
/*        margin: 2%;*/

		text-decoration: none;
		text-align: center;
	}

		.imageGallery img
		{
/*            height: 150px;*/
		}

		.imageGallery img:hover
		{
		}


/**************************************************/
/* seznam souborů ke stažení */
/**************************************************/

.wrapWidgetFiles
{
	background: var(--color-bg-grey-darker);
}

ul.files li
{
	list-style-type: none;
	margin: 0;
	background: none !important;
	padding: 0;
}

ul.files a
{
	display: inline-block;
	height: 30px;
	margin: 0 0 5px 0;
	padding: 0px 0 5px 30px;
	background-position: left top;
	font-weight: 300;
	color: #555;
}

ul.files a:hover
{
	color: var(--color-text-anchor);
}

ul.imageGallery, ul.files, .links
{
	padding: 0;
	display: block;
	float: none;
	overflow: hidden;
}



/**************************************************/
/* související odkazy */
/**************************************************/

ul.links
{
	margin: 0 0 20px 0 ;
}

	ul.links li
	{
		margin: 0;
		line-height: 1.7em;
	}

	ul.links li a, ul.files a
	{
		text-decoration: none;
	}

	ul.links li a:hover, ul.files a:hover
	{
		text-decoration: underline;
	}



/**************************************************/
/* video galerie */
/**************************************************/

.videoTitleWidget, a.videoTitleWidget
{
	margin: 10px 0 0 0;
	text-decoration: none;
}

.vimeo, .youtube
{
	display: block;
	overflow: hidden;
}

	.vimeo img, .youtube img
	{
		width: 100%;
		max-width: 100%;
	}

.contentVideoWidget
{
	overflow: hidden;
	display: block;
}

	.contentVideoWidget p
	{
		margin: 0;
	}

.boxVideoWidgetThumb
{
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

	.boxVideoWidgetThumb img
	{
		width: 100%;
		max-width: 100%;
	}

	.boxVideoOverlay
	{
		position: absolute;
		top: 0%;
		left: 0%;

		width: 100%;
		height: 100%;

		/*background: rgba(85,85,85,.75); */
	}

		.boxVideoButtonPlay
		{
			position: absolute;

			height: 0px;
			width: 0px;
		}

		.boxVideoOverlay:hover .boxVideoButtonPlay, .boxVideoButtonPlay:hover, .boxVideoButtonPlayHovered
		{
			background-color: #000;
		}







/**************************************************/
/* breadcrump */
/**************************************************/
.menuPath
{
	display: block;
	margin-bottom: 20px;
	padding: 0;
	overflow: hidden;
	float: none;
}

	.menuPath /*, .menuPath ul li a*/
	{
		font-size: 80%;
		margin-top: 24px;
	}

	.menuPath a
	{
		text-decoration: none;
	}

	.menuPath a:hover
	{
		text-decoration: underline;
	}

.menuPath ul
{
	list-style: none outside !important;
	display: inline;
	margin: 0;
	padding: 0;
}

	.menuPath ul li
	{
		padding: 0;
		margin: 0 4px 0 0;
		float: left;
		list-style-type: none !important;
		background: none !important;
	}

		.menuPath ul li /*, .menuPath ul li a */
		{
			font-size: 85%;
		}

			.menuPath ul li span
			{
				background: transparent url("../images/right-arrow-blue-8.svg") no-repeat scroll right center;
				color: #fff;
				display: inline-block;
				margin: 0 5px;
				width: 10px;
			}

		.menuPath ul li:last-child
		{
			font-weight: 400;
		}

		.menuPath ul li a
		{
			color: #555 !important;
			text-decoration: none;
		}

		.menuPath ul li a:hover
		{
			color: #000;
		}

	.pathFirst { padding-left: 0 !important;}
	.pathLast { padding-right: 0 !important; background: none !important;}

	.pathBack
	{
		/*float: right;*/
		display:none;
	}



/**************************************************/
/* button */
/**************************************************/

.but, button
{
	background: var(--color-button-1);
	text-indent:0;

	font-size: 100%;
	color: #fff;

	text-decoration: none;
	padding: 1.5% 2%;
	float: left;

	text-align: center;
	border: 0;
	cursor: pointer;
}

.but span, button span
{
	color: #fff;
}

.but:hover, button:hover, .butHovered
{
	background: var(--color-bg-blue-dark) ;
}

.but:active, button:active
{
	position:relative;
	/*top:1px; */
}

button { display: block !important;}




/************************************************/
/* menu main / ajax box */
/************************************************/

.wrapButMobileMenu
{
	position: absolute;
	top: 20px;
	right: 20px;
	display: none;

	width: var(--size-40);
	height: var(--size-40);

	cursor: pointer;
}

	.wrapButMobileMenu svg path
	{
		fill: #fff;
	}

.wrapAjax
{
	position: absolute;
	top: 0;
	left: 0;

	display: none;
	z-index: 9990;

	min-height: 100%;
	width: 100%;
	background: rgba(27, 34, 63, 0.93);
}



/************************************************/
/* menu číselníky - rozcestník  */
/************************************************/

.wrapMenu
{
	position: relative;
}

.wrapAjaxAdjustedContent .wrapMenu, .wrapAjaxAdjustedContent .wrapContactLanguages
{
	margin-top: var(--size-50);
	margin-bottom: 30px;
}

	.boxContactLanguages
	{
		margin: 0 auto;
	}

		.boxContactLanguages a
		{
			color: var(--color-bg-blue-light);
		}

		.boxContactLanguages a:hover
		{
			color: var(--color-bg-blue);
		}


.wrapIcoCloseMenu
{
	position: absolute;
	top: 25px;
	right: 25px;
	z-index: 9991;

	width: 30px;
	height: 30px;

	cursor: pointer;
}

	.wrapIcoCloseMenu svg.icoClose
	{
		width: 100%;
		height: 100%;
	}
		.wrapIcoCloseMenu svg.icoClose polygon
		{
			fill: #fff;
		}

		.wrapIcoCloseMenu:hover svg.icoClose polygon
		{
			fill: #fff;
		}



/************************************************/
/* dlaždice na střídačku - foto - text  */
/************************************************/

.wrapTileItem
{
	display: flex;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;

	padding: 30px 0;
}

	.boxCaptionsImage, .boxCaptionsContent
	{
		padding-right: 40%;
	}



/************************************************/
/* infoboxy - čísla  */
/************************************************/

.wrapInfoboxNumbers
{
	padding: 30px 0;
}

	.wrapInfoboxNumber
	{
		float: left;
		text-align: center;
	}

		.wrapInfoboxNumber > div
		{
			color: var(--color-bg-blue-light);
			font-size: 210%;
			font-weight: 600;
		}




/************************************************/
/* klienti / partneři  */
/************************************************/

.wrapClient
{
	overflow: hidden;

	height: 80px;
	background: none;
	padding: 20px;
}

	.wrapClient img
	{
/*
		height: 40px;
		max-height: 20px;
*/
	}



/************************************************/
/* média / napsali o nás  */
/************************************************/

.wrapTiles
{
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
}

	.wrapTileMedia
	{

	}

	.wrapTileMedia, .wrapTileMedia:hover, .boxTileMedia
	{
		justify-content: center;
		flex-wrap: wrap;
		padding: 10px;
		text-decoration: none;
	}

		.boxTileMedia
		{
			width: 100%;
			padding: 30px;
			background: #fff;
/*            border: 1px solid silver;*/

			-webkit-box-shadow: 0px 0px 5px 1px rgba(190,192,196,.20);
			-moz-box-shadow: 0px 0px 5px 1px rgba(190,192,196,.20);
			box-shadow: 0px 0px 5px 1px rgba(190,192,196,.20);
		}

		.wrapTileMedia:hover .boxTileMedia
		{
			-webkit-box-shadow: 0px 0px 8px 2px rgba(190,192,196,.60);
			-moz-box-shadow: 0px 0px 8px 2px rgba(190,192,196,.60);
			box-shadow: 0px 0px 8px 2px rgba(190,192,196,.60);
		}

			/* logo */
			.mediaTitleImg
			{
				height: 60px;
				margin-bottom: 20px;

/*                -webkit-filter: grayscale(100%);
				filter: grayscale(100%);
*/
			}

			.wrapTileMedia:hover .mediaTitleImg
			{
				-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
				filter: grayscale(0%);
			}

			/* nadpis */
			.mediaWrapContent
			{
				flex-direction: column;
				flex-wrap: wrap;
				justify-content: center;
			}

			.mediaTitle
			{
				min-height: 50px;
				margin-bottom: 15px;

				color: var(--color-text);
				font-size: 120%;
				font-weight: 600;
				line-height: 1.2;
				letter-spacing: 0;
			}

			.mediaButRead
			{
				color: var(--color-bg-blue);
			}
/*
			a.wrapTileMedia div, a.wrapTileMedia:hover div
			a.wrapTileMedia .mediaTitle, a.wrapTileMedia:hover .mediaTitle
			{
				text-decoration: none;
			}
*/


			/* vydáno */
			.mediaDate
			{
				margin-bottom: 5px;
			}

				.mediaDate span
				{
					font-size: 90%;
					letter-spacing: -1px;
				}

			/* odkaz na článek */
			.mediaButRead
			{
				margin-top: 10px;
				font-weight: 600;
				text-transform: uppercase;
			}

			.mediaButRead:hover
			{
				color: var(--color-button-1);
				letter-spacing: 1px;
			}



/************************************************/
/* novinky */
/************************************************/

.wrapNews, .wrapBlogPosts
{
	flex-direction: row;
	flex-wrap: wrap;
}

	.wrapNewsItem, .wrapBlogPost
	{
		padding: 10px;
	}

	.wrapNewsItemFullList, .wrapBlogPostFullList
	{
		margin-bottom: 20px;
	}
/*
	.wrapNewsItem + .wrapNewsItem
	{
		margin-top: var(--margin-section);
	}
*/

		.boxNewsItem, .boxBlogPost
		{
			position: relative;
			padding-left: 50px;
		}

			.newsDate
			{
				position: absolute;
				top: 0;
				left: 0;

				color: var(--color-bg-blue-dark);
				font-size: 75%;
				letter-spacing: 0px;
			}

			a.newsTitle, a.postTitle
			{
				min-height: auto;
				margin-bottom: 5px;

				text-align: left;
				text-decoration: none;
			}

			a.newsTitle:hover, a.postTitle:hover
			{
				color: var(--color-bg-blue);
			}

			.newsPerex, .postPerex
			{
				margin-bottom: 10px;
			}



/************************************************/
/* video - iframe z YouTube */
/************************************************/

.videoFullFrame
{
	width: 100%;
	height: 600px;
}



/************************************************/
/* odkaz na demo zdarma */
/************************************************/

.wrapFreeDemo
{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

	.wrapFreeDemo h2
	{
		width: 100%;
		margin-bottom: 40px;

		color: #fff;
		text-align: center;
	}

.butDemo, .butDemo:hover
{
	padding: 10px 20px;
	background: var(--color-button-1);

	color: #fff;
	/* font-size: 150%; */
	font-weight: 600;
	text-decoration: none;
	letter-spacing: 1px;
}

.butDemo:hover
{
	background: var(--color-bg-blue-dark);
	letter-spacing: 1px;
}

.butDemo.butDemoMid
{
	margin-top: 8px;
	font-size: 120%;
	padding: 10px 20px;
}


/************************************************/
/* návratová šipka nahoru */
/************************************************/

.aBackToTop
{
	position: fixed;
	right: 30px;
	bottom: 30px;

	width: 30px;
	height: 30px;
	background: rgba(0, 0, 0, .4) url('../../__shared__/images/up-white.svg') no-repeat center 7px;
	background-size: 15px;

	cursor: pointer;
}

.aBackToTop:hover
{
	right: 25px;
	bottom: 25px;

	width: 40px;
	height: 40px;

	background: rgba(0, 0, 0, .6) url('../../__shared__/images/up-white.svg') no-repeat center 11px;
	background-size: 15px;
}


/************************************************/
/* buttony */
/************************************************/

.butUnderText
{
	display: inline-block;
	margin-top: 20px;
}

.butConversion, .wrapSectionWhite .butConversion
{
	background: var(--color-button-1);
	border-color: var(--color-button-1);
	color: #fff;
	font-size: 120%;
}

.wrapSectionWhite .butConversion:hover
{
	border-color: var(--color-bg-blue-dark);
}



/************************************************/
/* faq  */
/************************************************/

p + .wrapFaq
{
	margin-top: 30px;
}

.wrapFaq
{
	padding: 30px;
	background: #fff;
	border: 1px solid #ddd;
}
	.boxFaqQuestion + .boxFaqQuestion
	{
		border-top: 1px solid #eee;
		margin-top: 30px;
		padding-top: 30px;
	}

		.boxFaqQuestion .faqTitle
		{
			float: left;
			width: calc(100% - 30px);
			padding-right: 20px;

			color: var(--color-bg-blue-dark);
			font-size: 120%;
			font-weight: 600;
		}

		.faqIcoArrow
		{
			float: left;
			width: 30px;
			height: 30px;
			cursor: pointer;
			font-size: 0;

			background: transparent url('../../__shared__/images/down-circle-azure.svg') no-repeat center center;
			background-size: cover;
		}

		.faqIcoCollapse
		{
			background: transparent url('../../__shared__/images/close-azure.svg') no-repeat center center;
			background-size: 60%;
		}

		.boxFaqAnswer
		{
			display: none;
			margin-top: 10px;
		}



/****************************************************************/
/* pager */
/****************************************************************/

.wrapPager
{
	display: block;
	width: 100%;
	float: none;
	overflow: hidden;
}

	.boxPager
	{
		overflow: hidden;
		margin: 20px 0;
	}

.wrapPager a
{
	display: inline-block;
	font-size:85%;
	padding: 3px 10px;
	text-decoration:none;
	cursor: pointer;
	float: left;
	display: inline-block;
	margin: 0 5px 0 0;
	color: var(--color-bg-blue);
}

	.wrapPager a span
	{
		color: var(--color-bg-blue);
	}

.wrapPager a:hover
{
	background: var(--color-bg-blue-dark);
}

	.wrapPager a:hover span
	{
		color: #fff;
	}

.wrapPager a.this
{
	background: var(--color-bg-blue);
}

	.wrapPager a.this , .wrapPager a.this span
	{
		color: #fff;
	}

.wrapPager a.this:hover
{
	background: var(--color-bg-blue-dark);
	color: #fff;
}

	.wrapPager a.this:hover, .wrapPager a.this:hover span
	{
		color: #fff;
	}


.wrapPager a.this:hover
{

}


.wrapPager a:active
{

}

.pagerDots
{
	display: block;
	margin: 0 5px;
}



/************************************************/
/* download - swiper  */
/************************************************/

#freeDownload h3, .h3Download
{
	display: block;
	overflow: hidden;
	margin-bottom: 20px;
	font-weight: 600;
}

.wrapSwiper + h3, .wrapDownloadSection + h3
{
	margin-top: 60px;
}

.wrapDownloadSection
{
	float: none;
}

	.wrapDownloadItem
	{
		float: left;
	}

		.boxDownloadItem
		{
			margin: 10px 0;
			padding: 70px 30px 30px;
			width: calc(100% - 60px);
			background: #fff;
			line-height: 1.15;
		/*    border: 1px solid var(--color-bg-blue);*/
		}

		.boxDownloadItem:hover
		{
			-webkit-box-shadow: 0px 0px 10px -1px rgba(57,184,235,0.45);
			box-shadow: 0px 0px 10px -1px rgba(57,184,235,0.45);

			color: var(--color-button-1);
			text-decoration: none;
		}

		.wrapDownloadItem .boxDownloadItem
		{
			background-color: var(--color-bg-blue-light);
			margin-bottom: 30px;
			font-weight: 600;
		}

			.boxDownloadItem span
			{
				font-size: 90%;
			}

.icoDownload
{
	background-position: center 20px;
	background-size: 35px;
	background-repeat: no-repeat;

	text-align: center;
	text-decoration: none;
}

.icoDownload-html { background-image: url('../images/download/htmla.svg'); }
.icoDownload-pdf { background-image: url('../images/download/pdfa.svg'); }
.icoDownload-jpg { background-image: url('../images/download/jpga.svg'); }
.icoDownload-xlsx, .icoDownload-xls { background-image: url('../images/download/xlsa.svg'); }
.icoDownload-docx, .icoDownload-docs { background-image: url('../images/download/doca.svg'); }
.icoDownload-pptx, .icoDownload-ppt { background-image: url('../images/download/ppta.svg'); }
.icoDownload-json { background-image: url('../images/download/jsona.svg'); }


/* download magnet */
.boxDownloadPerex
{
	margin-bottom: 30px;
	padding: 20px;

	font-size: 120%;
	text-align: center;
}

form.wrapFormDownload
{
	background: var(--color-bg-blue-light);
	padding: 30px;
	margin: 0 auto 30px;
}

	.textDownloadInstructions
	{
		text-align: left;
		font-weight: 600;
	}

	.wrapInput
	{
		container: flex;
		flex-direction: column;
		flex-wrap: wrap;
		float: none;
		margin-top: 30px;
	}

	.wrapInput.wrapInputFl
	{
		float: left;
	}

		.wrapInput label
		{
			display: block;
			float: none;

			color: var(--color-bg-blue-dark);
			font-size: 80%;
			font-weight: 700;
			text-transform: uppercase;
		}

			label.icoRequired::after
			{
				content: '';
				position: relative;
				top: -5px;
				display: inline-block;
				width: 7px;
				height: 7px;
				margin-left: 3px;
				background: transparent url('../images/ico-required.svg') no-repeat center center;
				background-size: cover;
			}

		.wrapInput input
		{
			float: none;
			padding: 5px 10px;
			border-bottom: 2px solid var(--color-bg-blue);
		}

/* baf okno */

.wrapMagnet
{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	padding-top: 40px;
	height: 100%;
}

.boxMagnetImage, .boxMagnetText
{
	float: left;
}

.boxMagnetImage
{
	display: flex;
	justify-content: center;
	align-items: center;
}

	.boxMagnetImage img
	{
		width: 80%;
		max-width: 80%;
	}

.boxMagnetText
{
	color: var(--color-bg-blue-dark);
	text-align: center;
	padding: 30px;
}

	.boxMagnetText h2
	{
		margin-top: 60px;
		margin-bottom: 30px;

		text-align: center;
		text-transform: uppercase;
	}

	.boxMagnetTitle
	{
		margin-bottom: 30px;

		color: var(--color-bg-blue-dark);
		font-size: 175%;
		font-weight: 600;
		text-align: center;
	}

#bafOkno
{
	display: none;
}


.wrapSideMagnetButton
{
	position: fixed;
	top: calc(50% - 40px);
	left: -140px;

	height: 80px;
	width: 200px;

	align-items: center;

	-webkit-border-top-right-radius:1000px;
	-moz-border-radius-topright:1000px;
	border-top-right-radius:1000px;
	-webkit-border-bottom-right-radius:1000px;
	-moz-border-radius-bottomright:1000px;
	border-bottom-right-radius:1000px;

	background: var(--color-bg-blue);
	cursor: pointer;
}

.wrapSideMagnetButton:hover
{
	left: 0px;
	background: var(--color-button-1);
}

	.boxSideMagnetButton
	{
		width: 100%;
		margin: 15px 20px 15px 15px;
		padding-right: 50px;

		background: transparent url('../images/download-white.svg') no-repeat right center;
		background-size: 30px;

		color: #fff;
		font-weight: 700;
		font-size: 120%;
		line-height: 1.1;
		text-transform: uppercase;
	}