/* put files in a folder "fonts" in the CSS folder */
/* please do update the path for images */
@font-face {
    /*font-family: 'open_sansregular';*/
    font-family: 'open_sans';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff2') format('woff2'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    /*font-family: 'open_sansbold';*/
    font-family: 'open_sans';
    src: url('fonts/OpenSans-Bold-webfont.eot');
    src: url('fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Bold-webfont.woff2') format('woff2'),
         url('fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: bold;
    font-style: normal;
}

/* ------------ volet ---------- */
.volet { box-sizing: border-box; }
.volet *, .volet *:before, .volet *:after {
  box-sizing: inherit;
}
.fs3r { font-size: 3em; }
.fs1-4e{ font-size: 1.4em; }
.lh110 { line-height: 1.1 ;}

.volet {
  font-size: 10px; /* for sharepoint templates without font reset */
  width: 250px;
  /*height: 250px;*/
  padding: 10px;
  background: #0d70b5 url(/SiteCollectionImages/Survey/surveybox-bg.svg) 100% 0 no-repeat;
  border: 1px solid #FFF;
  color: #fff;	
  font-family: 'open_sans', Arial;
}
	
.volet .ouvrir,
.volet .fermer {
  padding: 15px 5px 10px 13px;
  width: 130px;
  background: #0d70b5;
  border-top: 1px solid #fff;
  /*background: -webkit-linear-gradient( right, #fff 1px, #0d70b5 1px, #0d70b5 calc(100% - 1px), #fff calc(100% - 1px) );
  background: linear-gradient( to left, #fff 1px, #0d70b5 1px, #0d70b5 calc(100% - 1px), #fff calc(100% - 1px) ); */
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  color: #fff;
  text-decoration: none;
  text-align: left;
  font-size: 1.7em;
}
[dir="rtl"] .volet .ouvrir,
[dir="rtl"] .volet .fermer {
  text-align: right;
  padding: 15px 13px 10px 5px;
  border-top: 0;
  border-bottom: 1px solid #fff;
}
.volet .ouvrir:after,
.volet .fermer:after {
  content: '';
  float: right;
  width: 30px;
  height: 30px;
  background-image: url(/SiteCollectionImages/Survey/surveybox-icon.svg);
  background-position: 0 0;
  background-repeat: no-repeat;
}
.volet .fermer:after {
  width: 30px;
  height: 30px;
  background-position: calc(100% - 5px) 40%;
  background-image: url(/SiteCollectionImages/Survey/surveybox-close.svg);
}
[dir="rtl"] .volet .ouvrir:after,
[dir="rtl"] .volet .fermer:after {
  float: left;
  background-position: 0 50%;
}


.volet {
  position: absolute;
  z-index: 666666;
  right: -270px;  /* test fixed + scroll, on retire la position top */
  -webkit-transition: all .5s ease-in;
  -moz-transition: all .5s ease-in;
  transition: all .5s ease-in;
}
[dir="rtl"] .volet {
  right: auto;
  left: -270px;  /* test fixed + scroll, on retire la position top */
}

.volet a.ouvrir,
.volet a.fermer {
  position: absolute;
  z-index: 666666;
  left: 0;
  top: 0;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  transform-origin: 0 0 0;
  margin-top: 129px;
  margin-left: -56px;
}
[dir="rtl"] .volet a.ouvrir,
[dir="rtl"] .volet a.fermer {
  left: auto;
  right: 0;
  margin-left: 0;
  margin-right: -130px;
} 
.volet p, .volet label{
  font-size: 1em;
}

/*.volet a.fermer {
  display: none;
}
/*.volet:target {
  right: -20px;
}
[dir="rtl"] .volet:target {
  right: auto;
  left: -20px;
} */
/* code for closing */
/*.volet:target a.fermer {
  display: block;
}
.volet:target a.ouvrir {
  display: none;
}*/
#volet[data-opened="false"] {
  right: -270px;
}
#volet[data-opened="true"] {
  right: -20px;
}
[dir="rtl"] #volet[data-opened="true"] {
  right: auto;
  left: -20px;
}
[dir="rtl"] #volet[data-opened="false"] {
  right: auto;
  left: -270px;
}
		
/* test fixed + scroll */
#volet_clos {
  position: fixed; 
  z-index: 666666;
  top: 180px; 
  right: 20px;
}
[dir="rtl"] #volet_clos {
  right: auto;
  left: 20px;
}

.volet__orangebutton {
  width: 6em;
  background: #e88f3d;
  font-size: 2.4em;
  border-radius: 3px;
  font-weight: bold;
  line-height: 1.5 !important; /* fix inherit  */
}

.volet__bluebutton {
  background: #0d70b5;
  border: 1px solid #95b5d1;
  font-size: 1.8em;
  border-radius: 3px;
  width: 3.8em;
}
/* fr */
[lang="fr"] .volet__bluebutton {
  font-size: 1.6em;
  width: 3.5em;
}
[lang="fr"] .volet__bluebutton--later {
  width: 5em;
}
/* es */
[lang="es"] .volet__bluebutton {
  font-size: 1.6em;
  width: 3.2em;
}
[lang="es"] .volet__bluebutton--later {
  width: 5.5em;
}
/* ar */
[lang="ar"] .volet__orangebutton {
  width: 7em;
}
[lang="ar"] .volet__bluebutton {
  font-size: 1.6em;
  width: 2.5em;
}
[lang="ar"] .volet__bluebutton--later {
  width: 7.5em;
}


/* ------------ end volet ---------- */