html, body{
font-family: arial, sans-serif;
margin: 0;
padding: 0;
}
body{
overflow-y:scroll;
}


a{
  color: blue;
}

img{ display: block; width: 100%; }

/* --- HEADER --- */

#header{
  background: #f6f3f1;
  top: 0;
  width: 100%;
  margin: 0;
  height: 200px;
}

#header .fluid{
  padding-top: 15px;
  padding-bottom: 20px;
}

#header hr{
  height: 1px;
  margin: 0;
  padding: 0;
}

#nav-right{
  float: right;
  height: 170px;
  padding-top: 15px;

}

.btn-new-research,
.btn-download,
.btn-message{
background-position: 5px center;
background-repeat:no-repeat;
background-size: auto 90% ;
margin-bottom: 10px;
padding: 12px 12px 12px 48px;
background-color: rgba(255,255,255,0);
}

.btn-new-research{
background-image: url(../img/refresh-red.png) ;
}
.btn-message{
background-image: url(../img/message-red.png);
}
.btn-download{
background-image: url(../img/download-red.png);
}

.btn-new-research:hover,
.btn-message:hover,
.btn-download:hover{
background-color: rgba(255,255,255,1);
}


.fluid{
  margin: 0 auto;
  max-width: 1480px;
  min-width: 900px;
  padding: 0px 5%;
}
.box{
  /*min-width: 680px;*/
}

#ie{
background: #fc0d1a;
color: #fff;
padding: 16px;
text-align: center;
line-height: 150%;
}


ul#menu{
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}

ul#menu > li{
float: left;
width: 170px;
border-radius: 10px 10px 0px 0px;
}

ul#menu > li > a{
font-size: 20px;
padding: 15px 30px 20px 30px;
text-align: center;
color: #444;
display: block;
position: relative;
}

ul#menu > li > a span{
position: absolute;
display: block;
background: #fc0d1a;
font-weight: bold;
color: #fff;
padding: 3px 10px;
border-radius: 6px;
right: 26px;
bottom: 52px;
font-size: 24px;
}

ul#menu > li:hover{
background: #fff;
}

ul#menu > li > a img{
display: block;
border-radius: 50%;
margin-bottom: 8px;
}

ul#menu li#logo{
width: 160px;
padding: 20px 0px 0px 0px;
margin-right: 40px;
}
ul#menu li#logo a{
  padding: 0
}
ul#menu li#logo img{
border-radius:inherit;
}
ul#menu li#logo:hover{
background: none;
}

ul#menu li{
cursor: pointer;
}

ul#menu li.active{
color: #fc0d1a;
}
ul#menu li.active:hover{
color: #fc0d1a;
}

/* --- sous menu --- */

#app ul#menu ul li.close{
display: none;
}
#app.modePad ul#menu ul li.close{
display: block;
}

ul#menu ul li.close{
  float:none;
  width: auto;
  height: 20px;
  width: 20px;
  position: absolute;
  right: 5px;
  top:5px;
  min-height: auto;
  background: none;
  text-align: right;
  border-radius: none;

}
ul#menu ul li.close img{
  display: block;
  height: 20px;
  width: 20px;
  border-radius: none;
  border:none;
}



ul#menu ul{
position: absolute;
display: none;
background: #fff;
top: 170px;
left: 0px;
width: 100%;
margin: 0;
padding: 10px 0px;
list-style-type: none;
z-index: 5000;
border-radius: 10px;
box-shadow: 0px 10px 10px rgba(0,0,0,0.2);
}
#app.modeMouse ul#menu li:hover ul{
display: block;
animation:0.1s ease-in-out AppearMenu 0s 1;
}

@keyframes AppearMenu {
  from { transform: translateY(-10px); }
  to { transform: translateY(0px); }
}


ul#menu ul li{
  float: left;
  width: 120px;
  font-size: 16px;
  padding: 10px 19px;
  text-align: center;
  color: #444;
  display: block;
  min-height: 170px;

}
ul#menu li:hover ul li{

}


ul#menu ul li:hover{
background: #fff;
color: #222;
}
ul#menu ul li:hover img{
border-color: #eee;
}

ul#menu ul li img{
display: block;
border-radius: 50%;
border:8px solid #fff;
box-sizing: border-box;
margin-bottom: 5px;
}
ul#menu ul li.active img{
border-color: #fc0d1a;
}

ul#menu ul li em{
display: block;
line-height: 18px;
font-size: 10px;
color:#fc0d1a;
font-style: normal;
}





/* --- CONTENT --- */


#content{
  clear: both;
}
#content h1{
  font-weight: 100;
  font-size: 26px;
}




/* --- CONTENT / INTRO --- */

.kidmessage {
margin: 0 auto;
width: 800px;
}

.kidmessage  .kid{
  position: relative;
}

.kidmessage .kid #newResearchBtnKid{
  position: absolute;
  right: 165px;
  top: 180px;
}

/* --- CONTENT / CARDS --- */

ul#cards{
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100%;
/*display: flex;
flex-wrap: wrap;

justify-content: space-between;*/
}
ul#cards li div.info{
display: none;
}

ul#cards li div.check{
width: 24px;
height: 24px;
left: 36px;
bottom: 36px;

background: #fff;
position: absolute;

background-color: rgba(255,255,255,0.7);
border-radius: 2px;
color: #fff;
}
ul#cards li.selected div.check{
background: #fc0d1a url('./../img/check-white.png') center center no-repeat;
background-size: 80% auto;
}

ul#cards.x8 li div.check{
  width: 16px;
  height: 16px;
  left: 24px;
  bottom: 24px;
}

ul#cards.x2 li div.check{
  width: 36px;
  height: 36px;
  left: 48px;
  bottom: 48px;
}






ul#cards li{
float: left;
padding: 1%;
opacity: 0.5;
transition: ease-in-out 0.1s all;
position: relative;
cursor: pointer;
}

ul#cards.txt li:nth-child(2n){
/*clear:right;*/
}


ul#cards li.selected{
opacity: 1;
}

ul#cards.x8 li{
width: 10.5%;
}
ul#cards.x4 li{
width: 23%;
}
ul#cards.x2 li{
width: 48%;
}
ul#cards.txt li{
width: 48%;
}
ul#cards.txt li img{
width: 40%;
float: left;

}
ul#cards.txt li .info{
width: 56%;
padding-left: 4%;
float: left;
display: block;
}

.info h6{
font-size: 17px;
font-weight: 100;
margin-bottom: 5px;
margin-top: 20px;
}
.info p{
font-size: 14px;
}
.info p b{
display: block;
margin: 5px 0px;
color:#fc0d1a;
}


ul#cards .info ol{
padding-left: 26px;
}
ul#cards .info ol li{
width: 100%;
float: none;
opacity: 1;
}
.info p hr{
display: block;
margin: 5px 0px;
height:1px;
border:none;
}

.info span{
font-size: 12px;
color: #999;
display: none;
margin-bottom: 5px;
}


ul#cards li img{
width: 100%;
background: #f6f3f1 url('./../img/loader.svg') center center no-repeat;
min-height: 120px;
display: block;
border: none;
}
ul#cards.x4 li img{
min-height: 200px;
}

ul#cardsSelection{
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100%;
  display: none;
}
ul#cardsSelection li{
  visibility: hidden;
  display: none;
  float: left;
  width: 0;
}
ul#cardsSelection li.selected{
  visibility: visible;
  width: 12%;
}


#display-mode{
  display: flex;
  align-items: center;
}
#display-mode a{
padding: 3px 6px;
margin-left: 6px;
}
#display-mode a.active{
background-color: #fc0d1a;
color: #fff;
}
#display-mode a img{
height: 26px;
width: 39px;
display: block;
}

#display-mode a#btn-slide img,
#display-mode a#btn-print img{
height: 26px;
width: 26px;
}

#display-mode a img.white{
display: none;
}
#display-mode a.active img{
display: none;
}
#display-mode a.active img.white{
display: block;
}


ul#cardsSelection{
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100%;
}
ul#cardsSelection li{
  visibility: hidden;
  display: none;
  float: left;
  width: 0;
}
ul#cardsSelection li.selected{
  visibility: visible;
  width: 12%;
}
ul#cardsSelection li div{
  display: none;
}

.box{
background: rgba(0,0,0,0.9);
position: fixed;
left: 0;
top: 0;
width: 94%;
height: 100%;
min-height:100%;
z-index: 5000;
padding: 30px 3%;
}

.box .close{
position: absolute;
top: 0px;
right: 20px;
width: 36px;
}

.boxHeader{
  position: relative;

}

.box h1,.box h2,.box p{
color: #fff;
display: block;
}

.box h1{
font-size: 30px;
color: #fff;

}

.box h2{
font-size: 20px;
color: #fff;
}

.box .close{
cursor: pointer;
  }

.col3{
  width: 30%;
  float: left;
  margin-right: 3%;
}
.col3.last{
  margin-right: 0%;
}

#boxSlide{
  padding: 0;
  width: 100%;
}

#boxSlide a img {
    height: 26px;
    width: auto;
    display: block;
}

#boxSlide .nav, #boxSlide .close{
  cursor: pointer;
}

#boxSlide .nav{
  width: 40px;
  position: absolute;
  top: 46%;
  z-index: 2000;
}
#boxSlide #boxSlideLeft{
 left: 40px;
}
#boxSlide #boxSlideRight{
 right: 40px;
}/*
#boxSlide .close{
 right: 40px;
 top: 40px;
}*/

#boxSlide ul#slides{
  margin: 0;
  padding: 80px 0px 0px 0px;
  position: absolute;
  width: 40%;
  left: 30%;
}

.monitoring{

}




#boxSlide #slides li{

  position: absolute;
  width: 100%;
  /*transform: scaleY(+10px);*/
}
#boxSlide #slides li.slideMove{
  /*transform: scaleY(0px);
  transition: ease 1s all;*/

}


#boxSlide #slides li img{
width: 100%;
background: #f6f3f1 url('./../img/loader.svg') center center no-repeat;
min-width: 200px;
min-height: 200px;
display: block;
}
#boxSlide #slides li div{
display: none;
}


.slideMove{
animation:0.1s ease-in-out slideMove 0s 1;
}

@keyframes slideMove {
  from { opacity:1; transform: translateY(-20px); }
  to { opacity:1; transform: translateX(0px); }
}



.topbar{
   position: absolute;
   left: 0;
   top: 0;
   height: 50px;
   background: #000;
   width: 100%;
}


#boxSlideBar{

}
#boxSlideBarInt{
  position: absolute;
  left: 0;
  top: 0;
  height: 5px;
  background: rgba(255,255,255,1);
  width: 0;
}

#boxSlideBarInt.go{
animation:10s ease-in-out SlideInProgress 0s infinite;
}

@keyframes SlideInProgress {
  from { width:0% }
  to { width:100% }
}


#boxSlideMode{
  position: absolute;
  left: 10px;
  top: 10px;
  color: #FFF;

}

#boxSlideMode select{
     padding: 4px 8px;
}

#boxSlideMode a{
     background-image: url('./../img/play.png');
     background-position: 4px center;
     background-repeat: no-repeat;
     background-size: auto 20px;
     padding-left: 30px;
}
#boxSlideMode a.play{
    background-image: url('./../img/pause.png');
}


#boxSlideCount{
  width: 80px;
  width: 20%;
  text-align: center;
  margin: 5px auto;
  line-height: 40px;
  color: #FFF;
}



.boxClose{
  position: absolute;
  right: 10px;
  top: 10px;
}
.boxClose a{
    background-image: url('./../img/close.png');
    background-position: 4px center;
    background-repeat: no-repeat;
    background-size: auto 20px;
    padding-left: 30px;
}


#app.modePad ul#cards.txt li {

        width: 100%;

}


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

    ul#cards.txt li {

        width: 100%;

    }
    ul#cards.txt .info h6 {

         margin-top: 0px;

    }

}