/*
@font-face {
  font-family: 'Typola';
  src: url('fonts/typola.eot?#iefix') format('embedded-opentype'),  url('fonts/typola.woff') format('woff'), url('fonts/typola.ttf')  format('truetype'), url('fonts/typola.svg#Typola') format('svg');
  font-weight: normal;
  font-style: normal;
}
*/

body { background-color:#000; margin:0px; padding:0px; }
body, body * { font-family:Muli, Arial, Sans-Serif; }

a:hover { text-decoration:none; }

ul.inline { list-style:none; margin:0px; padding:0px; }
ul.inline li { display:inline-block; margin:0px; padding:0px; }

.header { background-color:#000; color:#fff; }
.body   { background-color:#111; color:#ccc; }
.body-w { background-color:#fff; color:#555; }
.footer { background-color:#000; color:#fff; }

form select, form input, form textarea, form button { color:#333; }

/*
//==============================================================================
// Header
//==============================================================================
*/

.header { height:250px; }

.header { position:relative; background-color:#000; background-image:url(photos/bg-home.jpg); background-position:center center; background-size:cover; }
body.candidat .header { background-image:url(photos/bg-candidat.jpg); }
body.recruteur .header { background-image:url(photos/bg-recruteur.jpg); }
body.recruteur.page-login .header { background-image:none; }
.header > .bg-filter { background-color:rgba(0,0,0,0.7); position:absolute; left:0px; right:0px; top:0px; bottom:0px; }
.header > .container-fluid { padding:0px; }
.header > .title { position:absolute; left:0px; right:0px; bottom:0px; padding:15px 0px; /*background-color:rgba(0,0,0,0.5); border-top:1px solid rgba(255,255,255,0.2);*/ }
.header > .title h1 { color:#fff; font-size:2em; letter-spacing:-0.05em; line-height:40px; margin:0px; text-transform:uppercase; }
.header .video { position:relative; background-color:#000; }
.header .video .wrapper { width:100%; height:100%; background:url(video.jpg) no-repeat; background-size:cover; opacity:0.3; }
.header .video .wrapper video { display:block; width:100%; }
.header .video .text { position:absolute; left:5%; right:5%; top:20%; bottom:0%; text-align:center; }
.header .video .text h1, .header .video .text h2 { display:block; line-height:30px; margin:50px 0px; text-align:center; text-transform:uppercase; text-shadow:0px 1px 3px #000; }
.header .video .text h1 { color:#ccc; font-size:25pt; font-size:200; letter-spacing:-1px; }
.header .video .text h1 b { font-size:400; }
.header .video .text h2 { color:#fff; font-size:30pt; font-size:200; letter-spacing:-1px; }
.header .video .text h2 b { font-size:400; }
.header .video .text a { display:inline-block; width:60px; height:60px; margin-top:8%; background-color:rgba(0,0,0,0.4); border:1px solid rgba(192,175,136,0.2); color:#fff; transition:all 0.3s ease-out; }
.header .video .text a:hover { background-color:rgba(192,175,136,0.2); border:1px solid rgba(192,175,136,0.3); }
.header .video .text a .fa { color:#fff; font-size:40px; line-height:60px; }

@media all and (max-width:768px)
{
  .header .video { margin-top:60px; }
  .header .video .wrapper video { width:100%; height:auto; }
  .header .video .text { left:3%; right:3%; top:10%; }
  .header .video .text h1, .header .video .text h2 { margin:20px 0px; }
  .header .video .text h1 { font-size:14pt; }
  .header .video .text h2 { font-size:18pt; }
  .header .video .text a { display:none; }
}

/*
//==============================================================================
// Go down
//==============================================================================
*/

.go-down { position:relative; overflow:hidden; }
.go-down .fa { line-height:60px; }

.go-down span
{
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 1.0;
  left: 0px;
  top: 0px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  text-align: center;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transition: all 0.6s cubic-bezier(0.05, 0.06, 0.05, 0.95);
  transition: all 0.6s cubic-bezier(0.05, 0.06, 0.05, 0.95);
}

.go-down span span:nth-of-type(1) { top:320px; }
.go-down span span:nth-of-type(2) { top:240px; }
.go-down span span:nth-of-type(3) { top:180px; }
.go-down span span:nth-of-type(4) { top:120px; }
.go-down span span:nth-of-type(5) { top:60px; }
.go-down span span:nth-of-type(6) { top:0px; }

.go-down > span { top:-320px; }
.go-down:hover > span { top:-60px; }

.go-down
{
  -moz-animation: bounce 3s infinite;
  -webkit-animation: bounce 3s infinite;
  animation: bounce 3s infinite;
}

.go-down:hover
{
  -moz-animation: none;
  -webkit-animation: none;
  animation: none;
}

@-moz-keyframes bounce
{
  0%, 20%, 50%, 80%, 100%
  {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40%
  {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60%
  {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@-webkit-keyframes bounce
{
  0%, 20%, 50%, 80%, 100%
  {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40%
  {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60%
  {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes bounce
{
  0%, 20%, 50%, 80%, 100%
  {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40%
  {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60%
  {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@media all and (max-width:768px)
{
  .go-down { display:none; }
}

/*
//==============================================================================
// Login
//==============================================================================
*/

.page-login .header { height:50px; background:none; }
.page-login .body { margin-top:-50px; }
.page-login.candidat .body { background:url(photos/bg-candidat.jpg); background-size:cover; }
.page-login.recruteur .body { background:url(photos/bg-recruteur.jpg); background-size:cover; }

.navigation { position:fixed; left:0px; top:0px; z-index:9999; width:100%; border-radius:0px; transition:top 0.5s ease-out; }
.navigation.show { background:rgba(0,0,0,0.95); }
.spinner-master { display:none; }
#spinner-form { display:none !important; opacity:0; }

/*
#logo { display:block; width:100%; position:absolute; top:90px; left:0px; text-align:center; }
#logo img { max-width:50%; }
.navigation.show #logo { top:5px; text-align:left; }
.navigation.show #logo img { max-height:60px; margin-left:20px; }
*/
#logo { display:block; width:600px; padding-left:50px; padding-top:20px; float:left; }
#logo img { max-width:100%; max-height:100px; }
.navigation.show #logo { width:420px; padding-left:50px; padding-top:5px; }
.navigation.show #logo img { max-width:100%; max-height:60px; }

@media all and (min-width:1200px) and (max-width:1299px)
{
  #logo { width:500px; padding-top:15px; }
}

@media all and (min-width:1100px) and (max-width:1199px)
{
  #logo { width:400px; padding-top:10px; }
}

@media all and (min-width:1000px) and (max-width:1099px)
{
  #logo, .navigation.show #logo { width:300px; padding-top:10px; }
  .navigation.show #logo { padding-top:15px; }
}

@media all and (min-width:769px) and (max-width:999px)
{
  #logo, .navigation.show #logo { width:200px; padding-top:20px; }
}

@media all and (min-width:500px) and (max-width:768px)
{
  #logo, .navigation.show #logo { width:400px; padding-left:15px; padding-top:5px; }
  #logo img, .navigation.show #logo img { max-width:100%; max-height:50px; }
}

@media all and (max-width:499px)
{
  #logo, .navigation.show #logo { width:300px; padding-left:15px; padding-top:8px; }
  #logo img, .navigation.show #logo img { max-width:100%; max-height:50px; }
}

/*
#logo { -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; }
*/
.navigation { -webkit-transition:all 1.0s ease-in-out; -moz-transition:all 1.0s ease-in-out; -o-transition:all 1.0s ease-in-out; transition:all 1.0s ease-in-out; }

.menu { width:100%; height:auto; transition:all 0.3s ease; }
.menu.active { background:rgba(0,0,0,0.95); }
.menu ul { padding:0px; margin:0px; list-style:none; position:relative; display:inline-block; margin-right:20px; }
.menu > li > ul.sub_menu { min-width:10em; padding:4px 0px; background-color:#f00; border:1px solid #fff; }
.menu ul li { padding:0px; }
.menu ul li.has-submenu { min-width:145px; }
.menu ul li.my-account-en { min-width:180px; }
.menu > ul > li { display:inline-block; }
.menu ul li a { display:block; width:100%; min-width:60px; color:#fff; font-size:16px; line-height:40px; text-align:center; text-decoration:none; text-transform:uppercase; }
.menu ul li > a { padding:15px; }
.menu ul ul { display:none; position:absolute; top:100%; width:100%; min-width:100px; margin-right:0px; background-color:#000; }
.menu ul li.has-submenu:hover { background-color:#000; }
.menu ul li:hover > ul { display:block; }
.menu ul ul > li { position:relative; }
.menu ul ul > li a { height:auto; padding:10px 15px; }
.menu ul ul ul { position:absolute; left:100%; top:0px; }
.menu ul li a:hover, .menu ul li a:focus { background-color:#bfaf88; color:#fff; }
.menu ul ul > li a:hover { background-color:#bfaf88; color:#fff; }
.menu ul li a.lang { min-width:60px; }
.menu ul li a.lang .flag { display:inline-block; width:30px; height:20px; vertical-align:middle; background-size:cover; }
.menu .avatar { width:40px; height:40px; border-radius:20px; box-shadow:0px 0px 4px rgba(255,255,255,0.5); }

.menu ul li a,
.menu ul ul > li a { transition:background 0.2s ease-in-out; }

@media all and (max-width:768px)
{
/*
  .navigation { background:rgba(0,0,0,0.95); }
*/
/*
  #logo, .navigation.show #logo { top:5px; left:0px; text-align:left; }
  #logo img, .navigation.show #logo img { max-width:80% !important; max-height:50px !important; margin-left:10px; }
*/
  .spinner-master { display:block; }
  .spinner-master * { transition:all 0.3s; box-sizing:border-box; }
  .spinner-master { position:relative; margin:15px; height:30px; width:30px; float:right; }
  .spinner-master label { cursor:pointer; position:absolute; z-index:99; height:100%; width:100%; top:5px; left:0px; }
  .spinner-master .spinner { position:absolute; height:4px; width:100%; padding:0px; background-color:#fff; }
  .spinner-master .diagonal.part-1 { position:relative; float:left; }
  .spinner-master .horizontal { position:relative; float:left; margin-top:4px; }
  .spinner-master .diagonal.part-2 { position:relative; float:left; margin-top:4px; }
  .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal { opacity:0; }
  .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 { transform:rotate(135deg); -webkit-transform:rotate(135deg); margin-top:10px; }
  .spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2 { transform:rotate(-135deg); -webkit-transform:rotate(-135deg); margin-top:-12px; }

  .menu { clear:both; min-width:inherit; float:none; }
  .menu, .menu > ul ul { overflow:hidden; max-height:0px; }
  .menu > li > ul.sub-menu { padding:0px; border:none; }
  .menu.active, .menu > ul ul.active { max-height:55em; }
  .menu ul { display:inline; }
  .menu li, .menu > ul > li { display:block; }
  .menu > ul > li:last-of-type a { border:none; }
  .menu li a { color:#fff; display:block; padding:0.8em; position:relative; }
  .menu li.has-submenu > a:after { content:'+'; position:absolute; top:0; right:0; display:block; font-size:1.5em; padding:0.55em 0.5em; }
  .menu li.has-submenu > a.active { background-color:#111; }
  .menu li.has-submenu > a.active:after { content:"-"; }
  .menu ul ul > li a { background-color:#111; padding:10px 18px 10px 30px; }
  .menu ul ul, .menu ul ul ul { display:inherit; width:100%; position:relative; left:auto; top:auto; border:none; }
}

body.home .header { height:auto; background-image:none; }

.slider { position:relative; }
.slider .slideme { width:100%; height:640px; }
.slider .slideme li { background-position:center; background-size:cover; }





.slide-content
{
/*
  position:absolute;
  top:320px;
  left:0px;
  z-index:99;
  width:100%;
  height:500px; 
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
*/
/*
  width:100%;
  height:640px;
  padding-top:70px;
*/
}

.slide-content .row { margin-left:0px; margin-right:0px; max-width:100%; }
.slide-content .logo a { display:block; margin:40px 0px; text-align:center; }
.slide-content .blocks { height:200px; margin-top:140px; }
.slide-content .block { display:block; }
.slide-content .block.hidden { display:none; }
.slide-content .blocks h1, .slide-content .blocks h2 { display:block; line-height:30px; margin:30px 0px; text-align:center; text-transform:uppercase; text-shadow:0px 1px 3px #000; }
.slide-content .blocks h1 { font-size:20pt; letter-spacing:-1px; }
.slide-content .blocks h2 { font-size:20pt; }
.slide-content .blocks h2.alone { margin-top:30px; }
.slide-content .buttons a { display:block; width:400px; margin:30px auto; padding:30px; text-align:center; }
.slide-content .buttons a { color:#fff; border:1px solid #fff; font-size:20pt; font-weight:bold; letter-spacing:2px; text-transform:uppercase; text-shadow:0px 1px 3px #000; }

.slide-content .buttons a
{
  background: rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.slide-content .buttons a:hover
{
  background: rgba(192, 175, 136, 0.5);
  color: #fff;
  -webkit-box-shadow: 0px 0px 5px 5px #888;
  -moz-box-shadow: 0px 0px 5px 5px #888;
  -o-box-shadow: 0px 0px 5px 5px #888;
  box-shadow: 0px 0px 5px 5px #888;
}

@-webkit-keyframes animOpacity0to1 { from { opacity:0.0; } to { opacity:1.0; } }
@-moz-keyframes animOpacity0to1    { from { opacity:0.0; } to { opacity:1.0; } }
@-o-keyframes animOpacity0to1      { from { opacity:0.0; } to { opacity:1.0; } }
@keyframes animOpacity0to1         { from { opacity:0.0; } to { opacity:1.0; } }
.slide-content .block
{
  -webkit-animation: animOpacity0to1 1s;
     -moz-animation: animOpacity0to1 1s;
       -o-animation: animOpacity0to1 1s;
          animation: animOpacity0to1 1s;
}


@-webkit-keyframes animOpacity0to05 { from { opacity:0.0; } to { opacity:0.5; } }
@-moz-keyframes animOpacity0to05    { from { opacity:0.0; } to { opacity:0.5; } }
@-o-keyframes animOpacity0to05      { from { opacity:0.0; } to { opacity:0.5; } }
@keyframes animOpacity0to05         { from { opacity:0.0; } to { opacity:0.5; } }
.parallax-header
{
  -webkit-animation: animOpacity0to05 0.5s;
     -moz-animation: animOpacity0to05 0.5s;
       -o-animation: animOpacity0to05 0.5s;
          animation: animOpacity0to05 0.5s;
}

@media all and (max-width:768px)
{
/*
  body.home .header, .slider .slideme, .slide-content { min-height:200px; }
*/
  .slide-content { /* top:260px; margin-top:50px !important; */ padding-top:0px; }
  .slide-content .logo a { margin:15px 0px; }
  .slide-content .logo a img { max-width:80%; }
  .slide-content .blocks { height:100px; margin-top:120px; }
  .slide-content .blocks h1, .slide-content .blocks h2 { line-height:20px; margin:10px 20px; }
  .slide-content .blocks h1 { font-size:12pt; }
  .slide-content .blocks h2 { font-size:12pt; }
  .slide-content .blocks h2.alone { margin-top:0px; }
  .slide-content .buttons a { width:280px; margin:10px auto; padding:20px; font-size:16pt; }
}

@media all and (max-width:1024px)
{
  .slide-content .buttons a { width:320px; margin:10px auto; padding:20px; font-size:18pt; }
}

.slideme2Theme .pagination { display:none; }