@font-face {
	font-family: 'SSSCWorkforce';
	src:url('/public/20210312190338oe_/https://data.sssc.uk.com/templates/sssc/fonts/SSSCWorkforce.eot');
	src:url('/public/20210312190338oe_/https://data.sssc.uk.com/templates/sssc/fonts/SSSCWorkforce.eot#iefix') format('embedded-opentype'),
		url('/public/20210312190338oe_/https://data.sssc.uk.com/templates/sssc/fonts/SSSCWorkforce.woff') format('woff'),
		url('/public/20210312190338oe_/https://data.sssc.uk.com/templates/sssc/fonts/SSSCWorkforce.ttf') format('truetype'),
		url('/public/20210312190338oe_/https://data.sssc.uk.com/templates/sssc/fonts/SSSCWorkforce.svg#SSSCWorkforce') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
	font-family: 'SSSCWorkforce';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-moon-"]:before {
*/
.icon-moon-woman:before, .icon-moon-dots:before, .icon-moon-coins-and-notes:before, .icon-moon-pound-sign:before, .icon-moon-briefcase:before, .icon-moon-telephone:before, .icon-moon-handshake:before, .icon-moon-paperclip:before, .icon-moon-computer:before, .icon-moon-laptop:before, .icon-moon-mobile-phone:before, .icon-moon-house:before, .icon-moon-cross-medikit:before, .icon-moon-trophy:before, .icon-moon-thumbs-up:before, .icon-moon-book:before, .icon-moon-chart:before, .icon-moon-key:before, .icon-moon-calendar:before, .icon-moon-lightbulb:before, .icon-moon-star:before, .icon-moon-padlock:before, .icon-moon-tick:before, .icon-moon-ticks:before, .icon-moon-cross:before, .icon-moon-crosses:before, .icon-moon-globe:before, .icon-moon-plane:before, .icon-moon-megaphone:before, .icon-moon-vader:before, .icon-moon-male:before, .icon-moon-female:before, .icon-moon-children:before, .icon-moon-old-person:before, .icon-moon-disability:before, .icon-moon-school:before, .icon-moon-saltire:before, .icon-moon-scotland:before, .icon-moon-clock:before, .icon-moon-calculator:before, .icon-moon-bed:before, .icon-moon-rosette:before, .icon-moon-scroll:before, .icon-moon-tie:before {
	font-family: 'SSSCWorkforce';
	speak: none;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.icon-moon-woman:before {
	content: "\e000";
}
.icon-moon-dots:before {
	content: "\e001";
}
.icon-moon-coins-and-notes:before {
	content: "\e002";
}
.icon-moon-pound-sign:before {
	content: "\e003";
}
.icon-moon-briefcase:before {
	content: "\e004";
}
.icon-moon-telephone:before {
	content: "\e005";
}
.icon-moon-handshake:before {
	content: "\e006";
}
.icon-moon-paperclip:before {
	content: "\e007";
}
.icon-moon-computer:before {
	content: "\e008";
}
.icon-moon-laptop:before {
	content: "\e009";
}
.icon-moon-mobile-phone:before {
	content: "\e00a";
}
.icon-moon-house:before {
	content: "\e00b";
}
.icon-moon-cross-medikit:before {
	content: "\e00c";
}
.icon-moon-trophy:before {
	content: "\e00d";
}
.icon-moon-thumbs-up:before {
	content: "\e00e";
}
.icon-moon-book:before {
	content: "\e00f";
}
.icon-moon-chart:before {
	content: "\e010";
}
.icon-moon-key:before {
	content: "\e011";
}
.icon-moon-calendar:before {
	content: "\e012";
}
.icon-moon-lightbulb:before {
	content: "\e013";
}
.icon-moon-star:before {
	content: "\e014";
}
.icon-moon-padlock:before {
	content: "\e015";
}
.icon-moon-tick:before {
	content: "\e016";
}
.icon-moon-ticks:before {
	content: "\e017";
}
.icon-moon-cross:before {
	content: "\e018";
}
.icon-moon-crosses:before {
	content: "\e019";
}
.icon-moon-globe:before {
	content: "\e01a";
}
.icon-moon-plane:before {
	content: "\e01b";
}
.icon-moon-megaphone:before {
	content: "\e01c";
}
.icon-moon-vader:before {
	content: "\e01d";
}
.icon-moon-male:before {
	content: "\e01e";
}
.icon-moon-female:before {
	content: "\e01f";
}
.icon-moon-children:before {
	content: "\e020";
}
.icon-moon-old-person:before {
	content: "\e021";
}
.icon-moon-disability:before {
	content: "\e022";
}
.icon-moon-school:before {
	content: "\e023";
}
.icon-moon-saltire:before {
	content: "\e024";
}
.icon-moon-scotland:before {
	content: "\e025";
}
.icon-moon-clock:before {
	content: "\e026";
}
.icon-moon-calculator:before {
	content: "\e027";
}
.icon-moon-bed:before {
	content: "\e028";
}
.icon-moon-rosette:before {
	content: "\e029";
}
.icon-moon-scroll:before {
	content: "\e02a";
}
.icon-moon-tie:before {
	content: "\e02b";
}

.surveyModal {
	position: fixed;
	z-index: 1000;
	top: 50%;
	transform: translateY(-50%) scale(0);
	background: #fff;
	border-radius: 2px;
	box-shadow: 0 2px 15px 0 rgba(0,0,0,0.2);
	left: 25%;
	right: 25%;
	transition: transform 0.5s ease, visibility 0.5s ease;
	visibility: hidden;
}

.surveyModal.open {
	transform: translateY(-50%) scale(1);
	visibility: visible;
}

#modal_open {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(0,0,0,0.7);
	display: block;
	z-index: 1000;
	transition: all 0.5s ease, visibility 0.3s ease;
	opacity: 0;
	visibility: hidden;
}

#modal_open.open {
	opacity: 1;
	visibility: visible;
}

.surveyModal .header {
	position: relative;
	padding: 10px 20px;
	background: #2192a4;
}

.surveyModal .header h4 {
	font-size: 22px;
	margin: 0;
	color: #fff;
}

.surveyModal .header .close {
	position: absolute;
	font-size: 35px;
	color: rgba(255,255,255,0.9);
	background: #cc256c;
	height: 50px;
	width: 50px;
	text-align: center;
	border-radius: 25px;
	line-height: 50px;
	top: -25px;
	right: -25px;
	box-shadow: 0 2px 15px 0 rgba(0,0,0,0.2);
	transition: all 0.3s ease;
}

.surveyModal .header .close:hover {
	color: #fff;
	background: #972153;
}

.surveyModal .content {
	padding: 20px;
}