@import url(http://weloveiconfonts.com/api/?family=fontawesome);

[class*="fontawesome-"]:before {font-family: 'FontAwesome', sans-serif;}

.atme {width:100px; height:400px; background-color:#e4e4e4; position: relative; transform:translate3d(0,0,0); overflow:hidden; border-radius: 10px;}

.topa {width:100px; height:291px; overflow: hidden; background-color:#e4e4e4; z-index:2; position: absolute; top:0;}

.tar, .goog {width:100px; height:260px; margin:20px; background-color:#B5DECC;  color:#333; text-align:justify; position: relative; font-family: Arial; font-size:11px; letter-spacing:1px; }

.tar:before, .goog:before {border:1px solid #B5DECC; height:260px; width:100px; display:block; content:''; position:absolute; top:-11px; left:-11px; padding:10px; pointer-events:none;}

.tar span {display:table-cell; vertical-align:middle; height:255px; width:100px; font-family: Arial, sans-serif; 
 letter-spacing:3px; 
 text-align:center; 
 font-size:16px; 
 opacity:0.9; 
 line-height: 20px; 
 color: #000;
text-transform: uppercase;}

.bota {height:100px; width:100px; background-color: #B5DECC; position: absolute; bottom:0;}

.smg {background-image:url('http://img15.hostingpics.net/pics/154970tddKUDI.png'); width:100px; height:100px; background-size:100%; z-index:4; transition: 0.4s ease-in; border-left:70px solid #B5DECC; left:-70px; bottom:0; position: absolute;}
.ssf {width:250px; height:100px; padding: 5px; position:absolute; right:-160; background-color: #B5DECC; font-family: Arial, sans-serif; color:white; font-size:8px;text-transform:uppercase; text-align:justify; line-height:10px;}

.ssf span {display:table-cell; text-align:middle; width: 90px; height:90px; padding: 0px 0px 15px;}

.btss {width:200px; height:100px; position:absolute; top:0; left:0; background-color:#B5DECC; z-index:7; line-height:100px; text-align:center; color:white; font-size:16px; letter-spacing:2px; opacity:0; transition:0.4s ease-in-out -0.2s;}

.btss label {padding:5px; opacity:1; transition: 0.2s ease-in-out;}
.tlsn {opacity:0; position:absolute; top:-200px; width:100px; height:100px; background-color:red;}
.tpr {display:inline;}

.goog {position:absolute; top:-300px; opacity:0; line-height:10px; z-index:-55; display:block; box-sizing:border-box; transform-style: preserve3d; transform:rotateY(180deg); transition: 0.7s ease-in;}
.errt {display:block; height:260px; overflow-y: auto; overflow-x: hidden; }
.errt::-webkit-scrollbar {width:6px; background-color:#fff;}
.errt::-webkit-scrollbar-thumb {background-color:#B5DECC;}

.goog div {display:inline-block; margin:10px; padding:3px; width:131px; text-align:center; font-family: Arial; font-size:11px; text-align:justify; line-height:10px; vertical-align:top; color: #333; text-transform: lowercase;}
.goog a {background-color:#e4e4e4; color:white; display:block; text-align:center; line-height:9px; text-transform:uppercase; font-size:10px; text-decoration:none;  margin-bottom:5px;}

.atme:hover .smg {transform:translateX(200px);}
.atme:hover .btss {opacity:1; transition:0.4s ease-in-out 0.4s;}

#tilscn {transition: 0.8s ease-in;}
.atme:hover > .topa > .tar {opacity:0; display:none;}

.btss [type=radio] {display:none;}
[type=radio]:checked ~ label {opacity:0.6;}
.btss [type=radio]:checked ~ label ~ .goog {opacity:1; z-index:600; display:block; transform:rotateY(0deg);}

.quote {font-family: Arial, sans-serif; font-size: 11px!important; color: #333!important; line-height: 10px; text-transform: lowercase; margin-top: 5px; max-height: 200px; overflow: auto; text-align: justify; padding: 5px; margin: 5px; letter-spacing: 0px;}

/* css pour les onglets */
.onglet-content > div {
         display : none ;
         height: 130px;
  width:200px;
overflow: auto;
border-radius: 0px 0px 10px 10px;
    font-family: tahoma; 
    font-style:normal;
  font-size: 11px; 
  text-align: justify; 
  color: #000; 
  padding: 2px;
  opacity: 1.0; 
  line-height:11px;
background: #e4e4e4;
opacity: 0.8}

        .onglet-content > div.active{ display : block ; }
.onglet-table { border-spacing : 0px ; }
  
      .onglet-table td { 
display: inline-block;
cursor: pointer;
border-radius: 10px 10px 0px 0px;
  background-color:#e4e4e4;
  width: 100px;
  height: 24px;
text-align: center;
color: #E9586D;
font-size: 20px;
line-height: 10px;
color: #B5DECC;
font-size: 16px;
text-transform: lowercase;
text-shadow:-1px 1px 0 #B5DECC, -1px 1px 1px #a8cdd9,0px 0px 1px #1d8bb1;
font-family: 'Pacifico', cursive;}
  
.onglet-table td.active, .onglet-table td:hover {opacity : 1 ;}