/* general */
/* ------------------------------------------------- */
.nowrap{
  white-space: nowrap;
}

/* header */
/* ------------------------------------------------- */
#logo {
  max-height: 70px;
  max-width: 100%;
}

#header{
  display: inline-block;
}
#header{
  top: 0;
  height: auto;
  min-height: 70px;
  transition: top .5s;
  text-align: center;
}
#header .wrap{
  width: 98%;
}
#header .header-lang-switch{
  display: none;
}
.header-title {
  width: 100%;
  font-size: 26px;
  display: inline-block;
  vertical-align: middle;
}
.header-text,
.header-logo {
  display: table-cell;
  vertical-align: middle;
  height: 100%;
}
.header-logo {
  text-align: left;
}
.header-text {
  text-align: right;
}
/*#header*/.noLogo .header-text{
  width: 100%;
}
body.lang-switch-position-page-header /*#header*/.noLogo .header-lang-switch{
  width: 9%;
}

.header-text.textLeft {
  text-align: left;
}
.header-text .subtitle {
  font-size: 20px;
}
.header-text .title {
  font-size: 26px;
  font-weight: bold;
}

/* footer */
/* ------------------------------------------------- */
#footer {
  text-align: center;
}
#header .wrap,
#container .wrap {
  margin: auto;
}
#footer .wrap{
  margin: 0 2%;
  display: inline-block;
  text-align: center;
  padding-top: 5px;
  padding-right: 9px;
}

/* header,content,footer - max-width */
/* ------------------------------------------------- */
#footer .wrap,
#header .wrap,
#container .wrap {
  max-width: 1024px;/* change here to change - single player content width */
}
body.signin_token #footer .wrap,
body.signin_token #header .wrap,
body.ee-ltl #footer .wrap,
body.ee-ltl #header .wrap,
body.ee-ltl #container .wrap
body.ee-tabs #footer .wrap,
body.ee-tabs #header .wrap,
body.ee-tabs #container .wrap,
body.synchroslide #footer .wrap,
body.synchroslide #header .wrap,
body.synchroslide #container .wrap {
  /*max-width: none;*/
  max-width: 1580px;/* change here to change - multi-content content width */
}

#cookies_banner .banner_cgv_rgdp {
    max-width: 940px;
}

#container,
body.signin_token #container{
  min-height: auto;
}


#description,
#elementsBottomPlayer {
  text-align: left;
}


/* body: noElementDescription noElementsBottomPlayer widgets */
#content{
  position: relative;
}
.wrap #block1.left,
.wrap #block2.left{
  padding: 0;
}
.wrap #tabsWidgetsWrapper.right{
  padding: 0;
}
.wrap #block2.center,
.wrap #block1.center{
  width: 100%;
}
#block2 {
  background-color: transparent;
}
#block1{
  display: inline-block;
  margin:20px 1% 0 0;
  width:50%;
}
.wrap #description.center{
  width: 98%;
  margin: 10px 1% 0;
}
#descriptionScroll{
  margin: 4px 1%;
}

#playerWrap{
  width:100% !important;
}

/********************************************/
/** player height - contrainte sur la hauteur par la largeur **/
#container #player {
  /*width: calc((100vh - 130px) * 16/9 );*/
  /*max-width: 1280px;*/
  /*max-width: 1024px;*/
  max-width: none;
  margin: auto;
}
/* si le player n'est pas seul en page, pas de contrainte sur la hauteur par la largeur */
body:not(.synchroslide) #container #player ,
body:not(.ee-ltl) #container #player ,
body:not(.widgets) #container #player ,
body:not(.ee-tabs) #container #player {
  /*max-width: none;*/
  /*width: auto;*/
}

.tabContent {
  overflow: auto;
  height: 100% !important;
}
/* form focus */
/* ------------------------------------------------- */
input:focus, input, textarea, select, button {
    outline: none
}

/* tabs */
/*--------------------------------------------------*/
#container #widgets ul#tabs li {
  border: none;
}
/* chat tab title */
/* ------------------------------------------------- */

#chat .tabTitle{
  width: 100%;
  height: 40px;
  position: relative;
  display: table;
  box-shadow: none;
  vertical-align: middle;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12px;
}

#chat .tabTitle .title{
  vertical-align: middle;
  display: table-cell;
  width: 100%;
}

#container #widgets ul#contents{
  height: calc( 100% - 39px);/* 100% - <header height> -1px */
}
#container #widgets{
  height: 100%;
}

.tabContent iframe {
    width: 100% !important;
    height: calc(100% - 3px) !important; /* 100% - 3px */
}
.tabContent#tabChatContent {
    overflow: hidden;
}
.tabContent iframe,
.tabContent#tabChatContent iframe {
    height: 100% !important;
}


/* video & synchroslide en grid 2 col 50% */
#content{
  width:100%;
}
#container .wrap .left,/*.left override*//*#block1*/
#container .wrap .left#center, /*.left override*/
.left {
  width: 48%;/*2*/
  padding: 0 0 0 0;/*0*/
  margin: 20px 0 0 1%;
  min-height: 30px;/* force right to float right*/
  float: left;
}

/* description en pleine largeur % */
#container .wrap .left div#description,/*#description overrride*/
#description{
  width: 100%;
}
#container .wrap .left div#description{
  height: auto;
}
#container .wrap .left div#description.show {
    display: block !important;/*evite l'espace sous le block (du au inline-block)*/
}
#container .wrap .left div#description #descriptionScroll{
  min-height: 100px;
  height: auto;
}

#container .wrap .right#center,
#container .wrap .right,/*.left override *//*#tabsWidgetsWrapper*/
.right {
  width: 48%;/*2*/
  padding: 0;
  margin: 20px 1% 0 1%;
  height: auto;
  float: right;
}
#container .wrap .right#center{ /*.left override*/
  margin: 20px 1% 20px 1%;
}
/*
#container .wrap #block1 {
  width:65%;
}
#container .wrap #tabsWidgetsWrapper {
  width:32%;
}
*/
/*
body:not(.description) #container .wrap #block1{
  width:98%;
}
body:not(.description) #container .wrap #tabsWidgetsWrapper{
  width:48%;
}
*/
#container .wrap #block1{
  width:59%;
  text-align: center;
}
#container .wrap #tabsWidgetsWrapper{
  width:38%;
}

body.synchroslide #container .wrap #block1{
  width:98%;
}
body.synchroslide #container .wrap #tabsWidgetsWrapper {
  width:48%;
}
body.block1-full-width #container .wrap #block1{
  width:98%;
}

#chat{
  height: 100%;
}

#description,
#elementsBottomPlayer{
  background-color: rgba(255,255,255,1);
}
#container #playerWrap{
  width: 100%;/*2*/
  display: inline-block;
  vertical-align: middle;
  padding: 0;
  margin: auto;
  max-width: none;
}
#container #playerWrap,
#container #player {
  background-color: transparent;
  position: relative;
}


/* hauteur des tabs (du chat) */
#container .hasOnlyOneTab #widgets ul#contents,
#container .hasOnlyOneTab #widgets ul#contents iframe,
.noElementDescription #container .hasOnlyOneTab #widgets ul#contents,
.noElementDescription #container .hasOnlyOneTab #widgets ul#contents iframe{
  height: 100%;
}



body.ee-ltl.ee-tabs .ltl-container{
  width: 100%;
  margin: 20px auto;
  float: left;
}
body.ee-ltl.ee-tabs #container #widgets{
  width: 100%;
  margin: 0 auto;
  float: right;
}

body.footer-sticky #footer {
    bottom: 0;
}
/*check signin.css too (maxwidth:920px à adapter) */


#cookies_banner .banner_cgv_rgdp {
    max-width: 940px;
}


/* mobile layout */
/* ------------------------------------------------- */
/* video & synchroslide l'un en dessous de l'autre en 100% */
@media only screen and (max-width: 799px){

  #container .wrap #tabsWidgetsWrapper,
  #container .wrap #block1,
  #container .wrap .right,
  #container .wrap .left,
  #container .wrap .left#center, /*.left override*/
  .left {
    width: 98%;
  }

  #container .wrap .left,
  #container .wrap .left#center,
  .left {
    padding: 0 0 0 0;
    margin: 20px 0 0 1%;
  }

  #container .wrap .right,/*.left override*/
  #container .wrap .right#center, /*.left override*/
  .right {
    width: 98%;
  }

  #container .wrap .left div#description,
  #description{
    margin-bottom: 0;
  }
  #tabsWidgetsWrapper{
    position: relative;
    margin-top: 0;
  }

  #container #widgets{
    width: 100%;
  }
  #widgets{
    margin-top: 20px;
  }
  #footer .wrap{
    padding: 0;
  }

  #container.signin .signin-content .left{
    width: 100%;
  }
  .header-text .subtitle,
  .header-text .title {
    font-size: medium;
  }


  body.layout-header-center-text .header-logo,
  body.layout-header-center-text .header-text {
    display: inline-block;
    width: 100%;
    height: auto;
    text-align: center;
  }

  #container .wrap .right {
      margin-bottom: 5px;
  }
}



