/*
	@TEMPLATE:	RECRUITABLE 8
	@COMPANY:	OTYS RECRUITING TECHNOLOGY
	@AUTHOR:	MAIKEL DOEZE
	@WEB:		WWW.OTYS.NL
	@VERSION:	v1.0
	@UPDATE:	14-08-2015
*/

/*	=== COLOR MAPPING ===
	@COLOR1: #xxxxxx; 
*/

/*********************************************************************************************/
/* HOTFIX */
/*********************************************************************************************/
@import url('hotfix.css');

/*********************************************************************************************/
/* FONTS */
/*********************************************************************************************/
@import url('//fonts.googleapis.com/css?family=PT+Sans:400,700');

/*********************************************************************************************/
/* GLOBALS */
/*********************************************************************************************/

/* DOCUMENT */
html{
overflow-x:hidden; /* MAKE MAIN ANIMATION WITHOUT SCROLLBAR */
}
body{
font-family:'PT Sans',sans-serif;
font-size:1.6rem;
color:#8c8c8c;
line-height:2.8rem;
}

/* SITEWIDTH */
.sw{
max-width:1230px; /* +30px padding */
}

/* HEADINGS */
h1,.h1{
border-bottom:1px solid;
display:inline-block;
font-size:2.6rem;
margin-bottom:25px;
padding-bottom:5px;
text-transform:uppercase;
}
h2,.h2{
margin-bottom:10px;
font-size:2.0rem;
text-transform:uppercase;
}
.outer h2,.outer .h2{
color:#0093ba;
}
h3,.h3{}
h4,.h4{}
h5,.h5{}
h6,.h6{}

/* INPUT */
input[type=text],
input[type=password],
input[type=file],
textarea,
select,
.formInputTaC,
.chosen-container{
color:inherit;
font-size:1.6rem;
background:#ffffff;
border:1px solid #dedede;
outline:none;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=file]:focus,
textarea:focus,
select:focus,
.chosen-container-active{}

/* BUTTON */
button,
.button,
section#tsr3 .col .inner ul li a,
div#tsr5 .text ul li a{
display:inline-block;
background-color:transparent;
border:1px solid;
text-align:center;
color:#0093ba;
transition:all 0.3s ease-in-out;
text-decoration:none;
font-weight:bold;
padding:15px 30px;
text-transform:uppercase;
}

button:hover,
button:focus,
.button:hover,
.button:focus,
section#tsr3 .col .inner ul li a:hover,
section#tsr3 .col .inner ul li a:focus,
div#tsr5 .text ul li a:hover,
div#tsr5 .text ul li a:focus{
text-decoration:none;
background-color:#0093ba;
border-color:#0093ba;
color:#ffffff;
}

.outer button,
.outer .button,
.ajaxWindow button,
.ajaxWindow .button{}

.outer button:hover,
.outer button:focus,
.outer .button:hover,
.outer .button:focus,
.ajaxWindow button:hover,
.ajaxWindow button:focus,
.ajaxWindow .button:hover,
.ajaxWindow .button:focus{}

/* ANCHOR */
a{
text-decoration:none;
color:#0093ba;
transition:all 0.2s ease-in-out;
}
a:hover,
a:focus{}
a:visited{
text-decoration:underline;
}

/**************************************************/
/* MOBILE MENU */
/**************************************************/
.toggleMenu{
float:right;
position:relative;
z-index:999;
display:block;
margin-right:-15px;
}
.menuButton{
background-color:#0093ba;
text-shadow:0 -1px 0 #0e0e0e;
cursor:pointer;
display:inline-block;
margin:0;
padding:17.5px;
text-align:center;
text-transform:uppercase;
vertical-align:middle;
}
.menu-bars{
display:block;
float:left;
margin-top:3px;
width:24px;
}
.menu-bars span{
display:block;
margin-top:3px;
margin-bottom:4px;
margin-left:-3px;
background-color:#f5f5f5;
display:block;
height:3px;
width:100%;
border-radius:5px;
}

/*********************************************************************************************/
/* GLOBAL HOOKS */
/*********************************************************************************************/
.hookOuter{}
.hookOuter .hookHeader{
font-size:2.6rem;
border-bottom:1px solid;
padding-bottom:5px;
margin-bottom:15px;
display:inline-block;
text-transform:uppercase;
}
.hookOuter .hookHeader h2{}
.hookOuter .hookSubHeader{}
.hookOuter .hookText{}
.hookOuter .hookText a{}
.hookOuter .hookText a:hover{}
.hookOuter .hookWord{}
.hookOuter .hookWord label{}
.hookOuter .hookInput{}
.hookOuter .hookInput input{}
.hookOuter .hookButton{
margin-top:15px;
}
.hookOuter .hookButton input{}
.hookOuter .hookItemContainer{
margin-bottom:25px;
}

/*********************************************************************************************/
/* SITE */
/*********************************************************************************************/
header{}
header div.top{
min-height:60px;
position:fixed;
top:0;
left:0;
right:0;
z-index:1000;
background-color:#fff;
}
header div.push{
height:60px;
}
header div.top .logo{
float:left;
margin-top:15px;
max-width:70%;
}
header div.top .logo img{
width:100%;
}
header div.bottom{
position:relative;
z-index:-1;
}

main{
margin-top:-720px;
z-index:100;
position:relative;
}
main .outer .intro img,
main .outer .text img{
max-width:100%;
height:auto;
}
section#section2{}
section#section2 .inner{
background-color:#fff;
padding:40px 50px;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
min-height:545px;
}
section#section2 .center{}
section#section2 .center .inner{
height:100%;
width:100%;
}
section#section2 .center .item{
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
}
section#section2 .center  .front{}
section#section2 .center  .front::before{
content:"";
background-image:url('../../../../_images_global/templates/recruitable/8/plus.png');
background-repeat:no-repeat;
background-position:50% 50%;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
transition:all 0.2s ease-in-out;
z-index:1;
}
section#section2 .center .flipper:hover  .front::before,  
section#section2 .center .flipper.hover  .front::before{
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
}
section#section2 .center .flipper{
transition:all 0.6s ease 0.2s;
}
section#section2 .center  .front .inner{
background-size:cover;
background-repeat:no-repeat;
background-position:50% 50%;
}
section#section2 .right{}

section#section2 .center .inner .item{}
section#section2 .center .inner .item .overlay{}
section#section2 .center .inner .item:hover{

}
section#section2 .center .inner .item .text{}

section#section2 img{
max-width:100%;
height:auto;
}

footer{
margin-top:-50px;
}
footer div.top{
color:#ffffff;
background-color:#3a494d;
padding-top:150px;
padding-bottom:100px;
}
footer div.bottom{
color:#6c7f84;
background-color:#313e41;
padding-top:50px;
padding-bottom:50px;
}
.buttonContainer{
margin-bottom:0;
}

/*********************************************************************************************/
/* TEMPLATES */
/*********************************************************************************************/
body.home{
min-height:770px;
}
body.content main{
margin-top:-310px;
min-height:490px;
}
body.content main > .inner,
body.content main > .row > .col > .inner{
padding:40px 50px;
background-color:#fff;
}
body.content div#tsr1 .item .inner{
min-height:410px;
}

/*********************************************************************************************/
/* BUSJABS */
/*********************************************************************************************/

/*********************************************************************************************/
/* HOOKS */
/*********************************************************************************************/

/*********************************************************************************************/
/* TEASERS */
/*********************************************************************************************/

/* TEASER 1 */
div#tsr1{}
div#tsr1 .item{
width:100%;
}
div#tsr1 .item .inner{
min-height:820px;
background-attachment:fixed;
background-repeat:no-repeat;
background-position:50% 0;
background-color:#e7e1e1;
}

/* TEASER 2 */
section#tsr2{}
section#tsr2 div.inner{
position:relative;
color:#fff;
padding:40px 50px;
min-height:380px;
}
section#tsr2 div .inner .button,
section#tsr2 div .inner button,
section#tsr2 div .inner a{
color:#fff;
}
section#tsr2 .item{
width:100%;
}
section#tsr2 div .front,
section#tsr2 div .back{
overflow-x:hidden;	
}
section#tsr2 div.orange .front .inner,
section#tsr2 div.orange .back .inner{
background-color:#f5963e;
}
section#tsr2 div.blue .front .inner,
section#tsr2 div.blue .back .inner{
background-color:#0093ba;
}
section#tsr2 div.green .front .inner,
section#tsr2 div.green .back .inner{
background-color:#00ba8c;
}
section#tsr2 .front div.inner{
font-size:3.2rem;
font-weight:bold;
line-height:4.8rem;
text-transform:uppercase;
background-size:cover;
background-position:50% 50%;
background-repeat:no-repeat;
}
section#tsr2  .hookOuter .hookHeader{
border-color:#fff;
}
section#tsr2 input[type="text"],
section#tsr2 input[type="password"],
section#tsr2 input[type="file"],
section#tsr2 textarea,
section#tsr2 select,
section#tsr2 .formInputTaC,
section#tsr2 .chosen-container{
background-color:transparent;
border:0;
border-bottom:1px solid #fff;
}


/* TEASER 3 */
section#tsr3{}
section#tsr3 .col{}
section#tsr3 .col .inner{
background-size:cover;
background-repeat:no-repeat;
background-position:50% 50%;
padding:50px;
background-color:#fff;
}
section#tsr3 .col .inner .h2{
border-bottom:1px solid;
display:inline-block;
font-size:2.6rem;
margin-bottom:20px;
padding-bottom:5px;
text-transform:uppercase;
}
section#tsr3 .col .inner .photo{}
section#tsr3 .col .inner .text{}
section#tsr3 .col .inner .text ul{
list-style:none;
}
section#tsr3 .col.left .inner{
color:#fff;
}
section#tsr3 .col.center{}
section#tsr3 .col.left .inner ul li a{
color:#fff;
}
section#tsr3 .col.right .inner{
background-color:#55acee;
color:#fff;
}

/* TEASER 4 */
li#tsr4{}
li#tsr4 .inner{}
li#tsr4 .inner a{
color:inherit;
text-decoration:underline;
}
li#tsr4 .inner .intro{}
li#tsr4 .inner .item{}
li#tsr4 .inner .item .title{
display:inline-block;
min-width:70px;
}

/* TEASER 5 */
div#tsr5{
background-color:#0093ba;
color:#fff;
padding:40px 50px;
margin-left:-50px;
margin-right:-50px;
margin-bottom:-40px;
}
div#tsr5 .h2{
border-bottom:1px solid;
display:inline-block;
font-size:2.6rem;
margin-bottom:20px;
padding-bottom:5px;
text-transform:uppercase;
}
div#tsr5 .text{}
div#tsr5 .text a{
color:#fff;
}
div#tsr5 .text ul{
list-style:none;
}
div#tsr5 .text ul li a{
color:inherit;
}

/* TEASER 6 */
/* TEASER 7 */
/* TEASER 8 */
/* TEASER 9 */

/*********************************************************************************************/
/* HLBS */
/*********************************************************************************************/

/* HLB1 */
nav#hlb1{
clear:both;
transition:all 0.4s ease-in-out;
}
nav#hlb1.active{}
nav#hlb1 ul{
list-style:none;
margin:0;
}
nav#hlb1 ul li{
position:relative;
}
nav#hlb1 ul li a{
color:#9b9b9b;
font-size:1.8rem;
text-transform:uppercase;
padding:10px 20px;
border:2px solid transparent;
display:block;
font-weight:bold;
}
nav#hlb1 ul li ul li a{
font-weight:normal;
padding-top:5px;
padding-bottom:5px;
}
nav#hlb1 ul li:hover > a{
color:#0093ba;
}
nav#hlb1 ul ul{
transition:all 0.5s ease-in-out;
}

/* HLB2 */
nav#hlb2{}
nav#hlb2 ul{
margin-top:0;
margin-bottom:0;
padding:0;
list-style:none;
}
nav#hlb2 ul li{}
nav#hlb2 ul li div.h2{
margin-bottom:30px;
}
nav#hlb2 ul li ul{}
nav#hlb2 ul li ul li{}
nav#hlb2 ul li ul li a{
color:inherit;
transition:opacity 0.2s ease-in-out;
}
nav#hlb2 ul li ul li a:hover{
opacity:0.5;
}

/* HLB3 */
nav#hlb3{
text-align:center;
}
nav#hlb3 ul{
margin-top:0;
margin-bottom:0;
padding:0;
list-style:none;
}
nav#hlb3 ul li{
display:inline-block;
}
nav#hlb3 ul li a{
color:inherit;
transition:color 0.2s ease-in-out;
}
nav#hlb3 ul li a:hover{
color:#fff;
}
nav#hlb3 ul li span{
padding:0 5px;
}
nav#hlb3 ul li:last-child span{
display:none;
}

/* HLB4 */
nav#hlb4{
margin-bottom:40px;
}
nav#hlb4 ul{
list-style:none;
}
nav#hlb4 ul li{}
/*  MD: I don't like just a link here, keep the button
nav#hlb4 ul li a{
border:0;
padding:0;
}
nav#hlb4 ul li a:hover{
background-color:transparent;
color:inherit;
}
*/

/* HLB5 */

/*********************************************************************************************/
/* MODULES */
/*********************************************************************************************/

/*********************************************************************************************/
/* NAMESPACE:  */
/*********************************************************************************************/

/* TPL: fotemplatesdiv/JobsShortList.html */
.jslOuter{}
.jslOuter .jslItemContainer{
padding-top:15px;
padding-bottom:15px;
transition:all 0.4s ease-in-out;
margin-bottom:0;
}
.jslOuter .jslItemContainer:hover,
.jslOuter .jslItemContainer:focus{
background-color:#F2F2F2;
padding-left:50px;
padding-right:50px;
margin-left:-50px;
margin-right:-50px;
cursor:pointer;
}
.jslOuter .jslItemContainer .jslFunctionName{
font-weight:bold;
}
.jslOuter .jslItemContainer .jslFunctionName a{
color:inherit;
display:block;
}

/* TPL: UTS/advsearch/vacancyResults1.html */
.actSRFacetContJobs,
.actSResultsCont{
width:100%;
}
.actItemTitle{
margin-bottom:0;
}
.actItemTitle a{
color:#8c8c8c;
font-size:1.6rem;
}
.actIc{
border-bottom:1px solid #dfdfdf;
transition:all 0.4s ease-in-out;
padding-top:15px;
padding-bottom:15px;
}
.actIc:hover{
background-color:#F2F2F2;
padding-left:15px;
padding-right:15px;
margin-left:-15px;
margin-right:-15px;
cursor:pointer;
}
.actIf{
font-size:90%;
}
.actTopMenu{
background-color:#0093ba;
color:#fff;
padding:20px 50px;
}
.actTopMenu .left{}
.actTopMenu .left .nummer{
font-size:6.0rem;
font-weight:bold;
line-height:normal;
}
.actTopMenu .left .text{
font-weight:bold;
}
.actTopMenu .right{
margin-bottom:0;
}
.actTopMenu .right a{
color:#fff;
background-repeat:no-repeat;
background-position:0 50%;
padding-left:35px;
padding-right:0;
margin-bottom:25px;
}
.actTopMenu .right a.link_0{
background-image:url('../../../../_images_global/templates/recruitable/8/image_2.png');
}
.actTopMenu .right a.link_1{
display:none;
}
.actTopMenu .right a.link_2{
background-image:url('../../../../_images_global/templates/recruitable/8/image_0.png');
}
.actTopMenu .right a.link_3{
display:none;
}
.actTopMenu .right a.link_4{
background-image:url('../../../../_images_global/templates/recruitable/8/image_3.png');
}
.actTopMenu .right a.link_5{
display:none;
}
.actTopMenu .right a.link_6{
background-image:url('../../../../_images_global/templates/recruitable/8/image_1.png');
}
.actMlSb{
display:none;
}
.actOuter .actEquery{
display:none;
}
.actOuter .actMl{
display:none;
}
#actGoogleMaps{
margin-bottom:0;
}

/* TPL: UTS/advsearch/jobDetailHook.html */
body.jobdetail .mDhOut{
background-color:#0093ba;
color:#fff;
padding:40px 50px;
margin-top:-40px;
margin-left:-50px;
margin-right:-50px;
margin-bottom:40px;
}
body.jobdetail .mDhOut a{
color:#fff;
}
.mDhSh{
display:none;
}
.mDhSh,
.mDhItT{
font-weight:bold;
}
.mDhOut ul{
list-style:none;
margin:0;
}

/* TPL: UTS/jobsremote/jrJobDetail.html */
.jbdButApl{
float:left;
font-size:2.6rem;
}
.jbdButPrint,
.jbdButMail{
display:none;
}
.jbdButBack{
border:0;
padding:22px;
}
.jbdButBack:hover{
background-color:transparent;
color:inherit;
}

/* TPL: UTS/advsearch/searchHookVacancies.html */
.actJshOuter .facetListTitle {
display:none;
}
.actJshOuter .actHButton{
float:left;
}
.actJshOuter .actFullSearch{
margin-top:15px;
padding:15px 0;
float:right;
}

/* TPL:  UTS/advsearch/sectionBVacancies.inc.html */
.optionListContainer{
border-bottom:0;
}
.optionList{}
.optionList  ul{
list-style:none;
margin:0;
}
.facetListTitle a{
font-size:2.0rem;
}
.optionList li a{
position:static;
color:#8c8c8c;
}
.optionListContainer{
margin-bottom:25px;
}
.actLcMcrit .optionListTitle{
border-bottom:1px solid;
display:inline-block;
font-size:2.6rem;
margin-bottom:25px;
padding-bottom:5px;
text-transform:uppercase;
font-weight: 600;
line-height: normal;
margin-top: 0;
}

.actLcMcrit  .optionList a{
padding-left:20px;
}
.optionList a:hover{
opacity:0.6;
}
.actLcMcrit .optionList a:hover{}
.actLcMcrit .optionList li a::before{
background-image:url('../../../../_images_global/templates/recruitable/8/cross.png');
background-repeat:no-repeat;
background-position:0 50%;
content:"";
width:12px;
height:12px;
position:absolute;
top:8px;
left:0;
transition:all 0.5s ease-in-out;
}
.actLcMcrit .optionList li:hover a::before{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}

/* TPL: UTS/advsearch/jobDetailRelatedJobsHook.html */
.rJhVOut .rJhVIt{
font-weight:bold;
}
.rJhVOut .rJhVIt a{
color:inherit;
display:block;
}
.rJhVOut .rJhVIc{
padding-top:15px;
padding-bottom:15px;
transition:all 0.4s ease-in-out;
margin-bottom:0;
}
.rJhVOut .rJhVIc:hover,
.rJhVOut .rJhVIc:focus{
background-color:#F2F2F2;
padding-left:50px;
padding-right:50px;
margin-left:-50px;
margin-right:-50px;
cursor:pointer;
}

/*********************************************************************************************/
/* MEDIA QUERIES */
/*********************************************************************************************/
@media screen and (max-width: 767px)
{
	
}
@media screen and (min-width: 768px)
{
	.actTopMenu .right{
	margin-top:25px;
	}
}
@media screen and (max-width: 1023px)
{
	div#menu{
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
	}
	nav#hlb1{
	clear:both;
	max-height:0px;
	overflow:hidden;
	transition:all 0.5s ease-in-out;
	}
	nav#hlb1 ul li a{
	padding-left:0;
	padding-right:0;
	}
	nav#hlb1.active{
	max-height:360px;
	overflow-y:scroll;
	}
	main{
	margin-top:-760px;
	}
}
@media screen and (min-width: 1024px)
{
	.toggleMenu{
	display:none;
	}
	header div.push{
	height:130px;
	}
	header div.top .logo{
	margin-top:52px;
	transition:all 0.4s ease-in-out;
	}
	header div.top{
	min-height:130px;
	transition:all 0.4s ease-in-out;
	}
	
	/* STICKY HEADER */
	header.sticky div.top .logo{
	margin-top:25px;
	}
	header.sticky div.top{
	min-height:80px;
	}
	header.sticky nav#hlb1{
	margin-top:12px;
	}
	
	/* HLB 1 */
	nav#hlb1{
	float:right;
	margin-top:40px;
	clear:none;
	}
	nav#hlb1 ul ul{
	max-height:0;
	position:absolute;
	padding:0;
	background-color:#fff;
	overflow:hidden;
	}
	nav#hlb1 ul li:hover > ul{
	max-height:1000px;
	}
	nav#hlb1 > ul > li{
	display:inline-block;
	}
	nav#hlb1 > ul > li > a.sactive{
	display:inline-block;
	text-align:center;
	color:#fff;
	transition:all 0.3s ease-in-out;
	text-decoration:none;
	border-color:#0093ba;
	color:#0093ba;
	}
	nav#hlb1 > ul > li > a.sactive:hover{
	background-color:#0093ba;
	color:#fff;
	}
	
	/* TEASER 2 */
	section#tsr2{
	padding-bottom:170px; /* MARGIN CAUSES BUG */
	}
	section#section2 .left{
	margin-top:-70px;
	}
	section#section2 .left::after {
	background-color:#ffffff;
	content:" ";
	display:block;
	height:70px;
	width:100%;
	}
}

/*********************************************************************************************/
/* HELPERS */
/*********************************************************************************************/

/* FLIP EFFECT */
.flipper{
position:relative;
height:100%;
width:100%;

-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;

-ms-transform: perspective(1000px);
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d; 
-ms-transform-style: preserve-3d; 
}
.flipper > div{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 1s;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(0deg);
-moz-transition: 1s;
-moz-transform-style: preserve-3d;
-moz-transform: rotateY(0deg);
-o-transition: 1s;
-o-transform-style: preserve-3d;
-o-transform: rotateY(0deg);
-ms-transition: 1s;
-ms-transform-style: preserve-3d;
-ms-transform: rotateY(0deg);
transition: 1s;
transform-style: preserve-3d;
transform: rotateY(0deg);
}
.flipper div.front{
cursor:pointer;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
}
.flipper div.back{   
z-index:5;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
overflow-x:hidden;
}
.flipper:hover div.back,
.flipper.hover div.back{
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flipper:hover div.front,
.flipper.hover div.front{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}


/*FIX FLIP*/
.back .actJshOuter select,
.back .jshOuter select {
	-moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    color: #FFF;
}
.back .actJshOuter select::-ms-expand,
.back .jshOuter select::-ms-expand {
 {
    display: none;
}
.back .actJshOuter option,
.back .actJshOuter option  {
	background:#FFF;
	color:#333;
	cursor:pointer;
}
label[for=matchcriteria_bedrcategorie] {
	display: none;
}