@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);

body{
	background-color: #fff;
  margin:30px 0 0 0;
  text-align: justify;
  font:400 15px 'Open Sans',Arial,sans-serif;
  height: 100%;
}

html {
  height:100%;
}


:focus, :active {
    outline: 0;
}

*, *:after, *:before, .box-sizing {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Helpers Class */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.clear { clear:both; }
.texte-blanc { color:#fff; }
.margin-vertical-25px { margin:25px 0; }
.overflow-hidden { overflow:hidden; }
.overflow-visible { overflow:visible; }

.exposant {
  position: relative;
  bottom: 1px;
  font-size: 12px;
  line-height: 12px;
  vertical-align:super;
  text-decoration:none;
}

.transform-y {
   /* ---- point d'ancrage au milieu Y --- */ 
  -webkit-transform: translateX(0%) translateY(-50%) ;
  -moz-transform: translateX(0%) translateY(-50%) ;
  -ms-transform: translateX(0%) translateY(-50%) ;
  -o-transform: translateX(0%) translateY(-50%) ;
  transform: translateX(0%) translateY(-50%) ;
}

.transform-middle {
   /* ---- point d'ancrage au milieu X et Y -- */ 
  -webkit-transform: translateX(-50%) translateY(-50%) ;
  -moz-transform: translateX(-50%) translateY(-50%) ;
  -ms-transform: translateX(-50%) translateY(-50%) ;
  -o-transform: translateX(-50%) translateY(-50%) ;
  transform: translateX(-50%) translateY(-50%) ;
}

a { color:#000; font:600 14px 'Open Sans',Arial; text-decoration: none; padding:3px 5px;}
a:hover { color:#000; text-decoration: none; font:700 14px 'Open Sans',Arial; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Accueil */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.container {
	background-color: #fff;
  width:100%; max-width:1170px;
  margin:auto; padding: 0;
}

.logo-responsive {
	padding:15px 0;
	display:none;
}

ul.menu {
  border: none;
  list-style: none; 
  text-align:left;
  margin:0; padding:0;
}

ul.menu li {
  border-right: solid 2px #000;
  display:inline-block;
  margin:0 25px 0 0; padding:0 25px 0 0;
  overflow: hidden;
  width:auto;
}

ul.menu li a{
  color:#000;
  font:600 14px 'Open Sans',Arial;
}

ul.menu li a:hover {
  font:700 14px 'Open Sans',Arial;
}

ul.menu li:last-child{
  border:none;
}


ul.menu li.lien-actif a {
  font:700 14px 'Open Sans',Arial;
}

.btn, .btn-default {
  border: none;
/*  border-right: solid 2px #000;*/
  display:inline-block;
  font:400 14px 'Open Sans',Arial;
  background-color: transparent;
  
  /*padding:0; margin:0px;*/

  padding-left: 10px;
  padding-right: 10px;
  text-align: center; /* optional, smoother */
}

.btn-actif {
  font:700 14px 'Open Sans',Arial;
}


.btn:hover, .btn:focus,
.btn-default:hover, .btn-default:focus,
.btn-actif:hover, .btn-actif:focus {
  	font:700 14px 'Open Sans',Arial;
 	background-color: transparent;
	box-shadow: 0px 0px 0px #fff;
	border:none;
	outline: 0;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Flip Card */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.card-container {
  width:100%; 
  height:auto;
  position: relative;
  margin: 0 auto 40px;
  -webkit-perspective: 800px;
     -moz-perspective: 800px;
       -o-perspective: 800px;
          perspective: 800px;
}

#card {
  width: 100%;
  height:550px; 
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
     -moz-transition: -moz-transform 1s;
       -o-transition: -o-transform 1s;
          transition: transform 1s;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: right center;
     -moz-transform-origin: right center;
       -o-transform-origin: right center;
          transform-origin: right center;

 
  /*overflow: hidden;*/

}

#card.flipped {
  -webkit-transform: translateX( -100% ) rotateY( -180deg );
     -moz-transform: translateX( -100% ) rotateY( -180deg );
       -o-transform: translateX( -100% ) rotateY( -180deg );
          transform: translateX( -100% ) rotateY( -180deg );
}

#card div.front,
#card div.back {
  display: block;
  height: auto;
  width: 100%; max-width:100%; 
  color:#000;
  font:400 14px 'Open Sans',Arial;
  position: absolute;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;

   padding:25px;
}

#card .front {
  background: #fff;
}

#card .back {
  background: #fff;
  -webkit-transform: rotateY( 180deg );
     -moz-transform: rotateY( 180deg );
       -o-transform: rotateY( 180deg );
          transform: rotateY( 180deg );
}


.competences-wrapper {
  font-style: italic; height:100%; padding:170px 20px 20px 20px;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  Media Queries */
@media only screen and (max-width: 400px) { 


}

@media only screen and (max-width: 768px) { 

}

@media only screen and (max-width: 991px) { 
	.logo-responsive { display:block; }
	.logo-liste { display:none; }

  ul.menu {  text-align: center; }
  ul.menu li { border-right: solid 2px #fff; }

  .competences-wrapper { padding:20px; }
}


@media only screen and (max-width: 1024px) { 
  
}