/* Font customization */

@font-face {
	font-family: "Corbel";
	src: url("/fonts/corbel.ttf");
	font-weight: normal;
	font-style: normal; 
}
@font-face {
    font-family: "Corbel";
    src: url("/fonts/corbelb.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "Corbel";
    src: url("/fonts/corbeli.ttf");
    font-style: italic;
}
@font-face {
    font-family: "Corbel";
    src: url("/fonts/corbelz.ttf");
    font-weight: bold;
    font-style: italic;
}


/* Tag customization */

html, body { /* for lens demo */
	width:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
	font-family: Corbel,sans-serif;
}
body { font-size: 125%; }
h2 { margin-bottom: 1em; }
h5 { text-transform: none; text-align: left; padding-top: 0 }
p, li { line-height: 1.25 }
p { margin-bottom: 1em }
pre { 
	padding: .5em; 
	font-size: 65%; 
	color: #333; 
	word-break: break-all; 
	word-wrap: break-word;
	background-color: #f5f5f5;
	border: 1px solid #ccc;
	border-radius: 4px;
}
header { border-bottom:1px solid #e0e0e0 }
header .logo {
	background: url("/img/logo_big.png") 0 50% no-repeat;
	background-size: cover;
}
input[type=email], input[type=text], input[type=url], select, textarea { font-family: inherit }
hr { height: 1px }
header .right .menu li { font-size: 12pt }
main { overflow: hidden }


/* Main menu */
header .right .menu li a, header .right .menu li:hover a, header .right .menu li:last-child, header .right .menu li:last-child:hover, header .right .menu li:last-child a:hover { 
	text-transform: none;
}


/* Header shrink on scrolling */

header, header .logo {
	-webkit-transition: all 0.4s linear;
	transition: all 0.4s linear;	
}
header.glide {
	min-height: 40px; 
	height: 40px;
	background-color: #d0d4d8
}
header.glide .logo { 
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
	transform-origin: left;
	background: url("/img/logo.png") 0 50% no-repeat;
	background-size: cover;
}
@media screen and (min-width: 1024px) {
	header.glide .right .menu li:last-child {  
		height: 30px;
		min-height: 30px;
		margin-top: -2px;
		padding: 4px 8px 0;
	}
}


/* Buttons */

input, button { 
	white-space: normal;
	font-family: Corbel,sans-serif;
}
input[type="button"], input[type="submit"], button, header .right .menu li:last-child { 
	-webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.5);
	-moz-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.5);
	box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.5);
}
input[type="button"]:active, input[type="submit"]:active, button:active, header .right .menu li:last-child:active { 
	-webkit-box-shadow: inset 2px 2px 2px 0 rgba(0,0,0,0.5);
	-moz-box-shadow: inset 2px 2px 2px 0 rgba(0,0,0,0.5);
	box-shadow: inset 2px 2px 2px 0 rgba(0,0,0,0.5);
	background-color: #204080;
}


/* Main and footer padding correction */

footer>.container>div.column { padding:0; width: 33% }
footer>.container>div.column:first-child { padding-right: .5em }
footer>.container>div.column:last-child  { padding-left: .5em }
@media screen and (max-width: 590px) { 
	footer .container { padding-left: 8px; padding-right: 8px } 
}


/* About and form pages class customization */

.abouticon { margin: 0 }
.aboutblock tr td { padding-left: 0; padding-right: 0 }
.aboutblock tr td:first-child { padding-top: 1px; padding-right: 1em }
.formblock tr td:first-child { padding-top: 10px; }
.formblock tr td { padding-bottom: 1em }
.fieldtitle { white-space: nowrap; }
.fieldradio { width: 50% }
.form-control { padding: 8px }


/* Scanner customization */

ol.tou li {margin-top:1em}
.alert-danger { background-image: url(/img/icon-stop.png); background-color:#fcc } 
.alert-warning { background-image: url(/img/icon-warning.png); background-color:#ffc } 
.alert-success { background-image: url(/img/icon-ok.png); background-color:#cfc } 
.alert-danger, .alert-warning, .alert-success { 
	padding:.5em;
	min-height: 4em;
	font-weight: bold; 
	padding-left: 5em; 
	background-repeat: no-repeat;
	background-position: 1em .5em;
	background-size: 3em;
	display:table;
	width:100%
} 
.alert-danger div , .alert-warning div , .alert-success div { display:table-cell; vertical-align: middle }
.mon-dash { font-weight: normal }
#quickscanoutput { font-family: 'Lucida Console', monospace; font-weight: normal }
#radar img { width:89px; height:87px; margin-top: 2em }


/* Service and assessment pages class customization */

.wellgreen, .wellred, .wellyellow, .welllightgrey, .welllightyellow, .welllightblue { 
	padding: .5em;
	margin: 0;
	padding-bottom: 3.5em;
	border: 1px solid #f2f2f2;
	border-radius: 4px;
	box-shadow: 2px 2px 2px #f2f2f2;
	float: left;
	margin-right: 1%;
	display: block;
	position: relative;
	font-family: Corbel,sans-serif 
}
.bordertable { width: 99% }
.bordertable tr.gray td button { margin: .25em }
.bordertable th, .bordertable td { 
	vertical-align:top;
	line-height: 1.25em;
	padding-left:.25em; 
	padding-right:.25em; 
	padding-top:.1em; 
	padding-bottom:.1em 
}
.bordertable tr.gray td button { 
	height: 3.5em; 
	padding-left:.5em; 
	padding-right:.5em; 
	padding-top:.1em; 
	padding-bottom:.1em 
}
@media screen and (min-width: 1024px) {
	.wellred-en { width: 21% }
	.wellyellow-en { width: 37% }
	.wellgreen-en { width: 39% }
	.wellred-ru { width: 24% }
	.wellyellow-ru { width: 35% }
	.wellgreen-ru { width: 38% }
	.wellred-ua { width: 24% }
	.wellyellow-ua { width: 34% }
	.wellgreen-ua { width: 39% }
	.wellred-de { width: 25% }
	.wellyellow-de { width: 34% }
	.wellgreen-de { width: 38% }
	
	.welllightgrey-en { width: 32% }
	.welllightblue-en { width: 32% }
	.welllightyellow-en { width: 33% }	
	.welllightgrey-ru { width: 32% }
	.welllightblue-ru { width: 32% }
	.welllightyellow-ru { width: 33% }	
	.welllightgrey-ua { width: 32% }
	.welllightblue-ua { width: 32% }
	.welllightyellow-ua { width: 33% }
	.welllightgrey-de { width: 32% }
	.welllightblue-de { width: 32% }
	.welllightyellow-de { width: 33% }
	
	.bordertable * { hyphens:auto } 
}
.serviceicon { width: 3em; height: 3em }

.welllightgrey { background-color: #fcfcfc }
.welllightyellow { background-color: #fffff8 }
.welllightblue { background-color: #fafaff }
main.container .welllightgrey ul, main.container .welllightyellow ul, main.container .welllightblue ul { padding-left: .5em } 
main.container .welllightgrey ul li, main.container .welllightyellow ul li, main.container .welllightblue ul li { 
	margin-bottom: .5em;
	line-height: 1em;
	list-style-type: none;
}
.welllightgrey li:before, .welllightyellow li:before, .welllightblue li:before { content: "-"; padding-right:.5em }
.welllightgrey h3, .welllightyellow h3, .welllightblue h3 {
	margin-top: 0;
	padding-top: 0;
	text-align: left;
	min-height: 2.5em;
}
@media screen and (max-width: 1024px) {
.welllightgrey, .welllightyellow, .welllightblue {
	width: 100%;
	margin-bottom: 16px;
} }
.workflowbox { width: 99% }

.wellgreen h3, .wellred h3, .wellyellow h3 {
	min-height: 2.5em;
    overflow: auto
}


/* Website map classes */

.websitemap td { vertical-align:top; padding: .25em; 
	background: -webkit-linear-gradient(top, #f8f8f8, #FFFFFF);
	background: -moz-linear-gradient(top, #f8f8f8, #FFFFFF);
	background: linear-gradient(to bottom, #f8f8f8, #FFFFFF);

}
.popup:after {
	display: block;
	overflow: hidden;
	margin: 0;
	content: attr(data-popuptext);
	transition: 500ms ease;
	height: 0;
	max-height: 0;
	line-height: 0;
}
.popup:hover:after {
	height: auto;
	max-height: 500px;
	line-height: 1.5;
	margin-top: .5em;
	margin-bottom: 1em;
}
.popup:after:hover {
	height: auto;
	max-height: 500px;
	line-height: 1.5;
	margin-top: .5em;
	margin-bottom: 1em;
}
.map_all td, .map_all td * { color:#888; }


/* Other class and item customization */

.logo { position:relative; top:-1px }
.vkladka { width:30%; float:right; margin: .5em .5em 2em 3em; border:0px }
.vkladka-half { width:15%; float:right; margin: .5em .5em 2em 3em; border:0px }
.vkladka-left { width:30%; float:left; margin: .5em 2em 1em .5em; border:0px }
.full-width { width: 100% }
.max-width100 { max-width: 100% }
.red { color:#f00 }
.textright { text-align:right }
.italics { font-style: italic }
main .textsubmit {
	margin:0; padding:0; display: inline; border: 0; background: rgba(255,255,255,0); box-shadow: none; font-weight:inherit; color: #2f5597; font-family: inherit }
.textsubmit:hover { text-decoration: underline; }
.globegif { width:1.5em; height:1.5em; position: relative; top: -0.1em; }
img.socialicon { width: 38px; height: 38px; }
img.socialicon-menu { width: 19px; height: 19px; position: relative; top: -0.1em; }
main.container ol li, main.container ul li { 
	margin-bottom: 1em;
}
main.container ul.interval2 li { margin-bottom: 2em }
.well h6 { margin-top: 0; margin-bottom: 1em; font-weight: normal; font-size: 75%; color: #808080 }
#our_features, #case_studies {
	position: absolute;
	top: -80px;
}
#debug { position:absolute; left:0px; top:0px; background-color: rgba(255,255,255,0.5); z-index: 100 }
.inline-form { display: inline }
.inline-form input { text-align: left }
div.well h5 { margin-top: 0; margin-bottom: 1em }
.well, footer .container p, footer .container p a { font-family: Corbel,sans-serif }
@media screen and (max-width: 1024px) { 
	header .right .menu li .vmenu { margin-top: .25em } 
}
.clutch-frame { 
	text-align:center; 
	margin-left: auto;
	margin-right: auto;
	max-width:1000px; 
}
h6.lite { text-align: left; font-size: .9em; color: #000949; margin: 1em 0; padding: 0 }
.tiny { font-size: 75%; color: #aaa }

/* General customization for different screen widths */

@media screen and (max-width: 1024px) {
	.container { max-width: 100%; }
	/* #delittlebutton2 span, #delittlebutton25 span { display: none; } */
}

@media screen and (max-width: 768px) {
	body { font-size: 100%; }
	.vkladka { width:100%; float:none; margin: 0; margin-bottom: 1em }
	.vkladka-left { width:100%; float:none; margin: 0; margin-bottom: 1em }
	#gameover {
		display: none !important /*keep it to prevent JS*/
	}
}

@media screen and (max-width: 590px) {
	body { font-size: 95%; }
    h2 { margin-bottom: 1em; font-size: 1em; }
	h3, h4, h5, h6 { font-size: 1em; }
	#logo_big {width: 100%; height: 100% }
	.formblock, .well75, .scanform { width: 100% }
	.customerlogo { height:3em; width: auto; }
}


/* VB landing general styles */

#vblanding2-main {
	margin-left: 0;
	margin-right: 0;
	width: 100vw;
	max-width: 100%;
	padding: 0;
	position: relative;
	overflow-x: hidden; /* for lens demo */
}

.vblanding2-dark { background-color: #1b1d1b; }
.vblanding2-dark, .vblanding2-dark * { color: #eee }
.vblanding2-dark a { color: #b0b8f0 }
.vblanding2-dark h1, .vblanding2-dark h2 { color: #c0c8f8 }
.vblanding2-dark .well {
	background-color:rgba(15, 15, 15, 0.2);
	border: 1px solid #424242;
	-webkit-box-shadow: 2px 2px 2px #424242;
	box-shadow: 2px 2px 2px #424242;
}

.vblanding2-inner {
	width: 100%;
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
	padding: 16px;
}
@media screen and (max-width: 590px) {
	.vblanding2-inner { padding-left: 8px; padding-right: 8px }
}
.wow { visibility: hidden; }


/* VB landing. Blue section styles */

.wellblue1, .wellblue2, .wellblue3, .training-wellblue1, .training-wellblue2, .training-wellblue3 {
	padding: .5em;
	margin: 0;
	padding-bottom: 3.5em;
	border: 1px solid #f2f2f2;
	border-radius: 4px;
	-webkit-box-shadow: 2px 2px 2px #f2f2f2;
	box-shadow: 2px 2px 2px #f2f2f2;
	font-family: Corbel,sans-serif;
	float: left;
	margin-right: 1%;
	position: relative;
}
.wellblue1 h3, .wellblue2 h3, .wellblue3 h3, .training-wellblue1 h3, .training-wellblue2 h3, .training-wellblue3 h3 {
	margin-top: 0;
	padding-top: 0;
	text-align: left;
	overflow: hidden;
}

.wellblue1, .backblue1 { background-color: rgba(240, 248, 255, 0.6) }
.wellblue2, .backblue2 { background-color: rgba(244, 244, 255, 0.6) }
.wellblue3, .backblue3 { background-color: rgba(248, 240, 255, 0.6) }

.mainabout1, .mainabout2 { float: left; position: relative; width: 47%; margin-bottom: 2em }	
.mainabout1 { margin-right: 5% }

@media screen and (max-width: 1024px) {
	.sdlc-wellblue1-en, .sdlc-wellblue2-en, .sdlc-wellblue3-en, .sdlc-wellblue1-ru, .sdlc-wellblue2-ru, .sdlc-wellblue3-ru, .training-wellblue1, .training-wellblue2, .training-wellblue3, .mainabout1, .mainabout2, .codereview1, .codereview2 {
		width: 100%;
		margin-bottom: 16px;
	}
}
.sdlc-stage { display:inline; font-weight:bold; }


/* VB landing. Black Navigator */

.vmenu1 {
	background: rgba(0,0,0,0.3);
	width:20%;
	min-width: 10em;
	float:right;
	margin: 0px .5em 3em 3em;
	border:0;
	font-size: 75%;
	padding: 1em;
	border-radius: 0.5em;
}
.vmenu1 h5 { margin: 0px; color: #999; }
main.container .vmenu1 ul { padding-left: 20px; }
main.container .vmenu1 ul li { color: #999; margin-bottom: .5em; line-height: 1; }

@media screen and (max-width: 450px) {
	.vmenu1 { display: none }
}


/* Styles for vertical menus */

header .right .menu li:after,
header .right .menu li:before { /* disable upper and lower lines */
	display: none;
}
header .right .menu li.active a {
	pointer-events: auto;
}
header .right .menu li.active>a {
	pointer-events: none;
}
.vmenu {
	visibility: hidden;
	position: absolute;
	overflow: visible;
	background: rgba(248, 248, 255, .93);
	border: solid 1px rgb(220, 224, 228);
	-webkit-box-shadow: 6px 6px 7px 0 rgba(0,0,0,0.05);
	-moz-box-shadow: 6px 6px 7px 0 rgba(0,0,0,0.05);
	box-shadow: 6px 6px 7px 0 rgba(0,0,0,0.05);
	z-index: 30;
	opacity:0;
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
	top: 100%;
	left: 0;
}
.menu li:hover .vmenu {
	visibility: visible;
	opacity: 1;
}
.vmenuitem {
	padding: 6px 6px;
}
.vmenuitem:hover { background: rgba(200, 200, 200, .7); } 
header .right .menu .vmenuitem a { font-size: 12pt; font-weight: normal; color: #303030; text-transform: none; }
.vmenuitem:hover a { color: #eff; }

@media screen and (max-width: 1024px){
	header .right .menu li>a {
		padding-left: .5em;
		padding-right: .5em;		
	}	
	header .right .menu li.active a, header .right .menu li:hover a {
		color: #fff;
	}	
	header .right .menu li a:hover {
		background: #eee;
		color: #000;
	}
	.vmenu {
		visibility: visible;
		opacity: 1;
		position: relative;
		top: 0;
		left: auto;
		right: 0;
		background: transparent;
		border: 0;
	}
	.vmenu .vmenuitem {
		padding: 0;
		padding-left: 1em;
		padding-right: .5em;
		height: 24px;
		line-height: 1;
	}
	.vmenuitem:hover { background: none; } 
	header .right .menu .vmenuitem a {
		padding: 0;
		color: #fff;
		font-size: 14px;
	}
	header .right .menu .vmenuitem:hover a { color: #000; }	
}

.inputcenter { text-align:center }
header .logo { width: 146px; min-width: 146px }
@media screen and (max-width: 1024px) {
	header .right .menu li, header .right .menu li:last-child { margin-top: 2em }
}

/* h-x.biz customization */ 

#scanner_page { 
	max-width: 100%; 
	background-color: #fff; 
	background-image: url(/img/h-x-biz-cover2.webp); 
	background-size: cover; 
	background-position: 50% 50%; 
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center; 
	height: 100vh;
	min-height:677px;
}
#scanner_page>div.row { max-width: 1200px; margin: auto }

.hero {
		background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, 
		rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0) 100%); }
.hero a { color: #000; font-size: 150% }
.hero a:hover { color: #008 }
.hero li { margin-bottom: 2em }

.icon { float:left; margin-right: 1em; width: 32px; height: 32px }

.target-list {
	list-style-type: none; 
	padding: 0;
	margin: 0;
  }
  
.target-list li {
    list-style-type: none;
	background-image: url('/img/icon-target.png');
	background-repeat: no-repeat;
    background-position: left top;
    background-size: 32px 32px;
    margin: 0;
    padding: 0 0 0 48px;
  }

.chart-list {
	list-style-type: none; 
	padding: 0;
	margin: 0;
  }
  
.chart-list li {
    list-style-type: none;
	background-image: url('/img/icon-chart.png');
	background-repeat: no-repeat;
    background-position: left top;
    background-size: 32px 32px;
    margin: 0;
    padding: 0 0 0 48px;
}	

.heroh { font-size: 200%; }