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

body {
  font-family: 'Open Sans', sans-serif;
  font-size:100%;
  background-color: #DEE7EB;
}

body * {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}

.cb{
  clear: both;
}

.colorCu{
  background-color: #a7c053;
}

.colorSq{
  background-color: #5593EE;
}

.colorPp{
  background-color: #FF921E;
}

.colorPro{
  background-color: #71BCC2;
}

.container{
  background-color: #fff;
  max-width: 100%;
  margin: 0 auto;
  height: 100%;
}

.headerCU{
  width: 100%;
  height: 221px;
  background: #ffffff url("../img/bkgCU.jpg") no-repeat;
  background-size: 100% auto;
}

.titleHeader{
  font-size: 3em;
  color: #ffffff;
  display: inline-block;
  font-weight: 100;
  margin-top: 11vw;
  margin-left: 31px;
}

.descHeader{
  width: 63%;
  font-size: 1.2em;
  color: #ffffff;
  margin-top: -2vw;
  margin-left: 31px;
}

.videoCU{
  position: relative;
  padding: 23px 32px 0 32px;
  box-sizing: border-box;
}

.videoCU iframe{
  width: 60%;
}


.btnVideo{
    position: absolute;
    text-align: center;
    background-color: #c3cdd1;
    padding: 10px 0 10px 0;
    width: 263px;
    /* height: 50px; */
    box-sizing: border-box;
    font-size: 14px;
    color: #000;
    cursor: pointer;
    font-weight: 700;
    background: #c3cdd1 url("../img/btnPdf.png") no-repeat;
    background-position: 87% 47%;
    text-decoration: none;
}

.btnAtelier {
    top: 31px;
    right: 33px;
    position: absolute;
    background-color: #c3cdd1;
    padding: 13px 51px 13px 26px;
    box-sizing: border-box;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    background: #228d1b url("../img/btnOutils.png") no-repeat;
    background-size: 11%;
    background-position: 87% 47%;
    text-decoration: none;
    width: 263px;
    text-align: center;
}

/*.PP .btnAtelier {
    display: none;
}*/

.descVideo {
    text-align: left;
    width: 285px;
    position: absolute;
    top: 68px;
    right: 16px;
}

.titleDescVideo{
  color: #15467A;
  font-size: 17px;
  font-weight: bold;
}

.descVideo ul{
  padding-left: 18px;
}

.descVideo li{
  font-size: 14px;
}

.btnProf {
    top: 244px;
    right: 33px;
}

.PP .btnProf {
    top: 278px;
}

.btnSt {
    top: 307px;
    right: 33px;
}

.PP .btnSt {
    display: none;
}

.tutorielLink{
  position: relative;
  padding: 0px 32px 23px 32px;
  box-sizing: border-box;
}

.headerTuto{
  width: 100%;
  height: 47px;
  margin-top: 23px;
}

.tagNouveau{
    display: inline-block;
    position: absolute;
    background: url("../img/nouveau.png") no-repeat;
    width: 79px;
    height: 32px;
    top: 5px;
}

.oneLibelTutoLibel{
  display: inline-block;
  margin-right: 15px;
  float: left;
}

.imgTitleTuto{
  display: inline-block;
  width: 4%;
  height: auto;
  margin-left: 1%;
  margin-right: 1%;
  margin-top: 6px;
  float: left;
}

.titleTuto{
    color: #ffffff;
    font-size: 20px;
    line-height: 13px;
    width: 64%;
    float: left;
}

.tutorielLinkProf{
  color: #ffffff;
  line-height: 47px;
  text-align: center;
  width: 15%;
  height: 47px;
  background-color: #7d939c;
  float: left;
  border-left: 4px solid #ffffff;
}

.tutorielLinkSt{
  color: #ffffff;
  line-height: 47px;
  text-align: center;
  width: 15%;
  height: 47px;
  background-color: #7d939c;
  float: left;
  border-left: 4px solid #ffffff;
}

.BlocLibelTuto{
  width: 100%;
  border: 2px solid #c6d2dc;
}

.oneLibelTuto{
  height: 46px;
  border-bottom: 1px solid #c6d2dc;
}

.titleOneLibelTuto{
  position: relative;
  width: 70%;
  padding-left: 1%;
  color: #000;
  font-size: 17px;
  line-height: 45px;
  float: left;
}

.titleOneLibelTutoSco{
  width: 85%;
  padding-left: 1%;
  color: #000;
  font-size: 17px;
  line-height: 45px;
  float: left;
}

.icoProf{
  position: relative;
  height: 45px;
  float: left;
  width: 15%;
  background-color: #f5f2eb;
  border-left: 4px solid #ffffff;
}

.icoSt{
  position: relative;
  height: 45px;
  float: left;
  width: 15%;
  background-color: #f5f2eb;
  border-left: 4px solid #ffffff;
}

.btnPlay{
  cursor: pointer;
  position: absolute;
  top: 10px;
  left: 26%;
  background: url("../img/btnPlay.png");
  width: 20px;
  height: 20px;
}

.OneBtnPlay{
  cursor: pointer;
  position: absolute;
  top: 10px;
  left: 41%;
  background: url("../img/btnPlay.png");
  width: 20px;
  height: 20px;
}

.btnPdf{
  cursor: pointer;
  position: absolute;
  top: 10px;
  left: 51%;
  background: url("../img/btnPdf.png");
  width: 17px;
  height: 19px;
}

.OneBtnPdf{
  cursor: pointer;
  position: absolute;
  top: 10px;
  left: 54px;
  background: url("../img/btnPdf.png");
  width: 17px;
  height: 19px;
}

.videoPopup{
  display: none;
  z-index: 99;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.btnClosePopup{
  position: absolute;
  top: 27%;
  width: 41px;
  height: 41px;
  cursor: pointer;
  background: url("../img/closeBtn.png");
}

.bkgBlack{
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.7;
}

.videoPopup iframe {
    position: absolute;
    top: 30%;
    width: 600px;
    height: 338px;
}

footer{
  position: relative;
  height: 275px;
  margin: 0px 32px 23px 32px;
  box-sizing: border-box;
  border-top: 6px solid #73BD44;
  border-bottom: 6px solid #73BD44;
  background: url("../img/bkgFooterCu.jpg") no-repeat;
  background-position: 50% bottom;
}

.PP footer {
    background: url(../img/bkgFooterPP.jpg) no-repeat;
    background-position: 39% bottom;
    background-size: 44%;
}

footer h2{
  color: #15467A;
  font-size: 1.5em;
}

.PP footer h2.primaire{
  display: block;
}

footer h2.primaire{
  display: none;
}


footer h3{
  color: #404041;
  font-weight: 300;
}

.videoApp{
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 50px;
  width: 240px;
  height: 70px;
  background: #73BD44 url("../img/playBtnFooter.png") no-repeat;
  background-position: 158px 3px;
  /* background-size: 64px 64px; */
}

.videoApp.primaire{
  display: none;
}

.PP .videoApp.primaire{
  display: block;
}

.PP .videoApp {
  top: 94px;
}

.videoApp span{
  color: #fff;
  font-weight: bold;
  display: inline-block;
  margin: 11px 25px;
  font-size: 1.3em;
  width: 107px;
}

.btnFaq{
  cursor: pointer;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 240px;
  height: 70px;
  background: #c3cdd1 url("../img/faq.png") no-repeat;
  background-position: 167px 17px;
  /* background-size: 64px 64px; */
}

.PP .btnFaq, .PP footer h3, .PP footer img, .PP footer h2, .PP .videoApp{
  display: none;
}

.btnFaq span{
  color: #404041;
  display: inline-block;
  margin: 22px 25px;
  font-size: 0.8em;
  width: 125px;
}

@media (min-width: 960px) {

  .container{
    width: 960px;
  }

  .headerCU{
    height: 278px;
  }

  .titleHeader {
    font-size: 3.5em;
    margin-top: 105px;
  }

  .descHeader {
    font-size: 1.5em;
    margin-top: 0px;
  }

  .videoCU iframe{
    width: 600px;
    height: 338px;
  }

  .OneBtnPlay{
    left: 55px;
  }

  .btnPlay{
    left: 38px;
  }

  .btnPdf{
    left: 75px;
  }

  .OneBtnPdf{
    left: 55px;
  }

  .videoPopup iframe {
    position: absolute;
    top: 30%;
  }



}

@media (min-width: 768px) and (max-width: 959px) {
  
  .videoCU {
    padding: 23px 32px 185px 32px;
  }

}

@media (min-width: 320px) and (max-width: 767px) {


  .headerCU {
      width: 100%;
      /* height: 221px; */
      background: #ffffff url(../img/bkgCU.jpg) no-repeat;
      background-size: 200% auto;
      height: 208px;
  }

  .PP footer {
      height: 277px;
  }

  .titleHeader {

    font-size: 2em;
    margin-top: 24vw;
    margin-left: 16px;
  }

  .descHeader {
    width: 71%;
    font-size: 0.9em;
    margin-top: 1vw;
    margin-left: 31px;
  }

  .videoCU iframe {
    width: 100%;
  }

  .PP .btnProf {
    top: 0px;
  }

  .btnProf {
    top: 0px;
    right: 0px;
  }

  .videoCU iframe {
    width: 100%;
  }

  .btnAtelier {
    margin-top: 10px;
    top: 0px;
    right: 0px;
    position: relative;
    width: 100%;
    display: block;
  }

  .descVideo {
    width: 285px;
    position: relative;
    top: 0;
    right: 0;
  }

  .btnVideo {
    position: relative;
    display:block;
  }

 .btnSt {
    margin-top: 10px;
    top: 0;
    right: 0;
}

  .imgTitleTuto{
    display: none;
  }

  .titleTuto {
    font-size: 14px;
    line-height: 14px;
    padding-left: 5px;
    width: 54%;
}

.oneLibelTuto {
    height: auto;
}

.titleOneLibelTuto {
    line-height: 33px;
    width: 54%;
}

.icoProf {
    width: 24%;
}

.icoSt {
    width: 22%;
}

.btnPlay {
  left: 15%;
}

.btnPdf {
  left: 56%;
}

.tagNouveau{
  display: none;
}


footer {
  height: 466px;
}

.videoApp{
  top: 170px;
}
  footer h2 {
    font-size: 1.3em;
  }

  .videoPopup iframe {
      width: 100%;
  }

  .tutorielLinkProf {
    width: 24%;
    font-size: 12px;
}

  .tutorielLinkSt {
      width: 22%;
      font-size: 12px;
  }

}


input, label  {
	display: inline-block;
}

form {
width: 600px;
margin: 0 auto;
font-family: arial;

}