@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/* #Reset and fallbacks
================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, li, fieldset, form, label, legend, table:not(.jd-description table), caption, tbody:not(.jd-description tbody), tfoot:not(.jd-description tfoot), thead:not(.jd-description thead), tr:not(.jd-description tr), th:not(.jd-description th), td:not(.jd-description td), article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	border: 0;
}

	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		font-size: 100%;
		font: inherit;
	}

* {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

/* #Font Awesome 5
================================================== */
	.svg-inline--fa {
	    margin-right: 0.5em;
	  }

	#file_upload .svg-inline--fa,
	.social-media-apply .svg-inline--fa,
	.back-to-top .svg-inline--fa,
	.addthis_toolbox .svg-inline--fa {
	    margin-right: 0;
	  }

	#file_upload .svg-inline--fa,
	.addthis_toolbox .svg-inline--fa {
	    color: #0974b3;
			vertical-align: middle;
	  }

/* #Basic styles
================================================== */
	body {
		font-family: "Open Sans", Arial, Helvetica, sans-serif;
		font-size: 15px;
		line-height: 1.4em;
		font-weight: normal;
		color: #444;
		text-rendering: optimizeLegibility;
		display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
		height: 100%;
    width: 100%;
		min-height: 100vh;
	}

	body#application, body#vacancy, body#joblist {
		background: #f5f5f5;
	}

	@media only screen and (max-width: 959px) {
	body#application, body#vacancy, body#joblist {
		background: #fff;
	}
	}

	body#index {
		background-color: transparent;
	}

	#header {
	  padding: 0.5em 0;
		position: relative;
		z-index: 5;
		background: #fff;
		box-shadow: rgba(50,50,50,.4) 3px 3px 3px;
		width: 100%;
		margin: 0;
	  flex-shrink: 0;
	}

	#footer {
	  padding: 2em 0;
	  background: #4c4c4c;
	  color: #fff;
		width: 100%;
	  overflow: hidden;
	  flex-shrink: 0;
		margin-top: auto;
	}

	#footer .container {
	  padding: 0 1em;
	}

	#footer h2 {
		background: transparent;
	  color: #fff;
		padding: 0;
	  margin-bottom: .5em;
	  flex-shrink: 0;
	}

	#footer a {
		background: transparent;
	  color: #fff !important;
		text-decoration: underline !important;
	}

	.about-department {
		background: transparent;
	}

	#container {
		background: #fff;
	}

	.hidden {
		display: none;
	}

/* #Typography
================================================== */
	h1, h2, h3, h4, h5, h6 { color: #000; font-weight: bold; line-height: normal; }
	h1 { font-size: 44px; }
	h2 { font-size: 22px; }
	h3 { font-size: 20px; }
	h4 { font-size: 18px; }
	h5 { font-size: 16px; }
	h6 { font-size: 15px; }

	@media only screen and (max-width: 479px) {
	h1 { font-size: 30px; margin-bottom: 5px; }
	h2 { font-size: 20px; }
	h3 { font-size: 18px; }
	h4 { font-size: 16px; }
	h5 { font-size: 15px; }
	h5 { font-size: 15px; }
	}

	p { margin: 0 0 15px 0; }
	p img { margin: 0; }

	em, i { font-style: italic; }
	strong, b { font-weight: bold; }
	small { font-size: 80%; }

	hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0; height: 0; }

/* #Links
================================================== */
	a, a:visited { color: #0974b3; text-decoration: none; }
	a:hover, a:focus { color:#0974b3; text-decoration:underline; }

/* #Lists
================================================== */
	ul, ol { }

/* #Buttons
================================================== */
  .navbutton,
	.navbutton a,
	.button,
	.button a,
	button,
	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	.navbutton:visited,
	.navbutton a:visited,
	.button:visited,
	.button a:visited,
	button:visited,
	input[type="submit"]:visited,
	input[type="reset"]:visited,
	input[type="button"]:visited {
		font-family: "Open Sans", Arial, Helvetica, sans-serif;
		font-size: 15px;
		font-weight: normal;
		color: #282828;
		background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #fff 10%, #f0f0f0 75%) repeat scroll 0 0;
		border-color: #e0e0e0 #d2d2d2 #b6b6b6;
		border-style: solid;
		border-width: 1px;
		margin-bottom: 10px;
		padding: 10px 20px;
		cursor: pointer;
		text-decoration: none !important;
		-webkit-appearance: none;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		-ms-border-radius: 4px;
		border-radius: 4px;
}
  .navbutton:hover,
	.navbutton a:hover,
	.button:hover,
	.button a:hover,
	button:hover,
	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover,
	.navbutton:active,
	.navbutton a:active,
	.button:active,
	button:active,
	input[type="submit"]:active,
	input[type="reset"]:active,
	input[type="button"]:active,
  .navbutton:focus,
	.button:focus,
	button:focus,
	input[type="submit"]:focus,
	input[type="reset"]:focus,
	input[type="button"]:focus {
		background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #e8f6ff 10%, #dae7ef 75%) repeat scroll 0 0;
		text-decoration: none !important;
		color: #282828;
		outline: 0;
	}

/* Fix for odd Mozilla border & padding issues */
	button::-moz-focus-inner,
	input::-moz-focus-inner {
    padding: 0;
	}

.green,
.green:visited,
.nav_application .green,
.nav_application .green:visited,
#pp_login_box input[name="login_btn"],
#pp_login_box input[name="login_btn"]:visited,
.button.atbs-register-submit-form,
.button.atbs-register-submit-form:visited,
.button.atbs-recover-user-button,
.button.atbs-recover-user-button:visited {
	border-width: 1px;
	border-style: solid;
	border-color: #4f8800 #437400 #2d5e00;
	color: #fff;
	background: #4d8500;
	background: -webkit-linear-gradient(top, #569400 0, #487c00 40%, #477a00 100%);
	background: linear-gradient(to bottom, #569400 0, #487c00 40%, #477a00 100%);
	-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
	-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
	box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: subpixel-antialiased;
}

.green:hover,
.green:active,
.green:focus,
.nav_application .green:hover,
.nav_application .green:active,
.nav_application .green:focus,
#pp_login_box input[name="login_btn"]:hover,
#pp_login_box input[name="login_btn"]:active,
#pp_login_box input[name="login_btn"]:focus,
.button.atbs-register-submit-form:hover,
.button.atbs-register-submit-form:active,
.button.atbs-register-submit-form:focus,
.button.atbs-recover-user-button:hover,
.button.atbs-recover-user-button:active,
.button.atbs-recover-user-button:focus {
	border-width: 1px;
	border-color: #579400 #497c00 #316400;
	color: #fff;
	background: #5da000;
	background: -webkit-linear-gradient(top, #5da000 0, #508a00 45%, #4f8700 100%);
	background: linear-gradient(to bottom, #5da000 0, #508a00 45%, #4f8700 100%);
	-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .15), inset 0 1px 0 #5da000, inset 1px 0 0 #548f00, inset -1px 0 0 #548f00;
	-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .15), inset 0 1px 0 #5da000, inset 1px 0 0 #548f00, inset -1px 0 0 #548f00;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .15), inset 0 1px 0 #5da000, inset 1px 0 0 #548f00, inset -1px 0 0 #548f00;
}

input[type="submit"]:disabled,
input[type="reset"]:disabled,
input[type="button"]:disabled,
button[type="submit"]:disabled,
button[type="reset"]:disabled,
button[type="button"]:disabled {
	color: #d2d2d2 !important;
	background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #fff 10%, #f0f0f0 75%) repeat scroll 0 0 !important;
	border-color: #e0e0e0 #d2d2d2 #b6b6b6 !important;
	border-style: solid !important;
	border-width: 1px !important;
	cursor: not-allowed !important;
}

/* #Forms
================================================== */
	form { margin-bottom: 0; }
	fieldset {	margin-bottom: 0; }
	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="file"],
	textarea,
	select {
		font-family: "Open Sans", Arial, Helvetica, sans-serif;
		font-size: 15px;
		color: #000;
		border: 1px solid #ccc;
		padding: .7em;
		outline: none;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		margin: 0;
		min-width: 200px;
		max-width: 100%;
		width: 32%;
		display: block;
		margin-bottom: 10px;
		background: #fff;
	}

	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus,
	input[type="file"]:focus,
	textarea:focus {
		border: 1px solid #0974b3;
		-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,.1),-1px -1px 3px rgba(0,0,0,.1),1px 1px 0 #0974b3 inset,-1px -1px 0 #0974b3 inset;
		-moz-box-shadow: 1px 1px 3px rgba(0,0,0,.1),-1px -1px 3px rgba(0,0,0,.1),1px 1px 0 #0974b3 inset,-1px -1px 0 #0974b3 inset;
		box-shadow: 1px 1px 3px rgba(0,0,0,.1),-1px -1px 3px rgba(0,0,0,.1),1px 1px 0 #0974b3 inset,-1px -1px 0 #0974b3 inset;
	}
	textarea {
		min-height: 60px;
		width: 100%!important;
		}

	label, legend {
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 4px;
	 }

	label span, legend span {
		font-weight: normal;
		font-size: 13px;
		color: #333; }

	input[type="radio"] {
		-moz-appearance: radio;
		border-radius: 100% !important;
		margin-bottom: 10px;
	}

	/* #Back to top
	================================================== */
	a.back-to-top, a.back-to-top:visited {
		display: none;
		position: fixed;
		bottom: 0;
		right: 10px;
		z-index: 999;
		margin: 0;
		padding: 5px 10px;
		border: none;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		text-decoration: none;
		text-align: center;
		color: #282828;
		background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #fff 10%, #f0f0f0 75%) repeat scroll 0 0;
		border-color: #e0e0e0 #d2d2d2 #b6b6b6;
		border-style: solid;
		border-width: 1px;
	}

	a.back-to-top:hover {
		background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #e8f6ff 10%, #dae7ef 75%) repeat scroll 0 0;
	}

/* #Cookie Policy
	================================================== */

#cookie-policy {
	width: 100%;
	z-index: 1000;
	position: fixed;
	top: 0;
	left: 0;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	margin: 0 auto;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	padding: 1em;
	background: #0974b3;
	box-shadow: rgba(50,50,50,.4) 0 0 3px 3px;
	font-size: 14px;
	color: #fff;
}

#cookie-policy-content {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
	max-width: 1050px;
}

#cookie-policy-content a, #cookie-policy-content a:hover {
	color: #fff;
	text-decoration: none;
}

#cookie-policy-content .svg-inline--fa {
    margin-right: 0.5em;
}

a.button#accept-cpc {
	margin-bottom: 0;
	margin-left: 1em;
}

#cpc {
	margin: 4em 2em;
	max-width: 1050px;
}

/* #Responsive layout
================================================== */
/* basic 960 grid */
  .container                          						{ position: relative; width: 960px; margin: 0 auto; padding: 0; clear: both; }
  .container .column, .container .columns     		{ float: left; display: inline; }
  .row                                        		{ margin-bottom: 20px; }
	.row:before, .row:after 												{ content: "."; display: block; height: 0; overflow: hidden; clear: both;}
	.row																						{zoom: 1;} /* IE < 8 */
	.container .one.column, .container .one.columns { width: 5%; }
	.container .two.columns                     		{ width: 10%; }
	.container .three.columns                   		{ width: 20%; }
	.container .four.columns                    		{ width: 25%; }
	.container .five.columns                    		{ width: 30%; }
	.container .six.columns                     		{ width: 35%; }
	.container .seven.columns                   		{ width: 40%; }
	.container .eight.columns                   		{ width: 45%; }
	.container .nine.columns                    		{ width: 55%; }
	.container .ten.columns                   		  { width: 60%; }
	.container .eleven.columns                 		 	{ width: 70%; }
	.container .twelve.columns                  		{ width: 75%; }
	.container .thirteen.columns                		{ width: 80%; }
	.container .fourteen.columns                		{ width: 85%; }
	.container .fifteen.columns                 		{ width: 90%; }
	.container .sixteen.columns                 		{ width: 100%; }
	.container .one-third.column                		{ width: 33%; }
	.container .two-thirds.column               		{ width: 66%; }

/* Desktop Small */
  @media only screen and (min-width: 1200px) {
  .container { width: 1170px; }
  }

/* Tablet (Portrait) */
  @media only screen and (min-width: 768px) and (max-width: 959px) {
  .container { width: 768px; }
  }

/* Mobile (Portrait) */
  @media only screen and (max-width: 767px) {
  .container { width: 300px; }
  .container .columns,
  .container .column { margin: 0; }
  .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column  { width: 100%; }
	}

/* Mobile (Landscape) */
  @media only screen and (min-width: 480px) and (max-width: 767px) {
  .container { width: 420px; }
  .container .columns,
  .container .column { margin: 0; }
	.container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 100%; }
  }

/* Clearing */
  .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

  /* Use clearfix class on parent to clear nested columns,
  or wrap each row of columns in a <div class="row"> */
  .clearfix:before, .clearfix:after, .row:before, .row:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0; }
  .row:after, .clearfix:after {
    clear: both; }
  .row, .clearfix {
    zoom: 1; }

  /* You can also use a <br class="clear" /> to clear columns */
  .clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
  }

	/* #Misc shared elements
	================================================== */

.info-icon  {
  width: 50px;
  float: left;
}

.info p, .video-info p {
  margin-left: 50px;
}

.info {
  border: 1px #bce8f1 solid;
  border-radius: 3px;
  background-color: #d9edf7;
  padding: 1em 2em;
  margin: 1em 0;
  color: #150600;
  min-height: 80px;
}

.warning, .atbs-error-login-content {
  border: 1px #f5a583 solid;
  border-radius: 3px;
  background-color: #ffd0bc;
  padding: 1em 2em;
  margin: 1em 0;
  color: #150600;
  min-height: 80px;
}

.warning ul {
  margin: 0;
}

.warning li {
  margin-left: 40px;
}

.success {
  border: 1px #d6e9c6 solid;
  border-radius: 3px;
  background-color: #dff0d8;
  padding: 1em 2em;
  margin: 1em 0;
  color: #150600;
  min-height: 80px;
}

.TK-tools {
  border: 1px #dbdbdb solid;
  border-radius: 3px;
  background-color: #f1f1f1;
  padding: 1em 2em;
  margin: 1em 0;
  color: #150600;
  min-height: 80px;
}

.video-info {
  border: 1px #faebcc solid;
  border-radius: 3px;
  background-color: #fcf8e3;
  padding: 1em 2em;
  margin: 1em 0;
  color: #150600;
  min-height: 80px;
}

#show-video {
  font-weight: bold;
	text-decoration: underline;
	cursor: pointer;
}

#clone_tk_cv_parsing {
  cursor: pointer;
	display: block;
	margin-top: 10px;
}

.textkernel_apply_with {
  font-weight: bold;
	margin: 0;
	display: block;
}

.apply_with_linkedin, .apply_with_xing, .apply_with_facebook, .apply_with_viadeo, .apply_with_dropbox, .apply_with_google, .TK-tools a {
	display: inline-block;
	margin: 0 5px 0 0;
  cursor: pointer;
  color: #0974b3;
}

.apply_with_linkedin, .apply_with_dropbox {
}

.apply_with_dropbox, .apply_with_google {
  margin-top: 10px;
}

.apply_with_cv {
  width: initial !important;
	margin-bottom: 0 !important;
}

.department-logo {
	margin: 0;
	padding: 0;
	max-height: 100px;
}

.department-image {
	z-index: 5;
	width: 100.01%;
	display: block;
	max-width: 100%;
	height: auto;
}

#boom_tick_cv {
  display: none;
}

.embed-container {
  position: relative;
  margin-top: 1em;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container iframe, .embed-container object, .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.retention_choice_fieldset input[type="radio"] {
    display: block;
    float: left;
    clear: left;
}

.retention_choice_fieldset label {
    float: left;
    margin-left: 5px;
}

.retention_choice_fieldset legend {
    margin-bottom: 10px;
    font-weight: bold;
}
