/**
 * EDS - Fichier CSS dédié à la page d'accueil.
 * Chargé dans le template.tpl.php
 *
 * @file
 */

body.accueil #container { background-color: #f2f1f0; }
body.accueil #main { position: relative; padding-top: 110px; }

/*** FLEXSLIDER ***/

.flexslider-container, .flexslider .slides { height: 720px; }
.flexslider .slides li { position: relative; }
.flexslider .slides li .shadow {
  background-image: url('../../images/accueil/bandeau-gris.png');
  background-image: url('../../images/accueil/bandeau-gris.svg');
}
.flexslider .slides .group-text {
  padding: 8% 23% 30% 23%;
  color: #fff;
}
.flexslider .slides .titre-banniere {
  margin-bottom: 20px;
  line-height: 1;
  font-family: 'Trebuchet bold', Helvetica, Arial, sans-serif;
  font-size: 4em;
  letter-spacing: normal;
}
.flexslider .slides .sous-titre-banniere {
  text-transform: uppercase;
  font-family: 'Helvetica Neue light', Helvetica, Arial, sans-serif;
  font-size: 1.4em;
}
.flexslider .slides .lien-banniere {
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 100;
}
.flexslider .flex-direction-nav a { top: 40%; }
.flex-control-nav { bottom: 220px; }

/*** OUVERTURE & COORDONNEES ***/

.group-header {
  position: absolute;
  top: -200px; left: 0; right: 0;
  padding: 30px;
  background-color: #fff;
  z-index: 100;
}
.ouverture { float: left; width: 33%; }
.ouverture .view-header p { margin-bottom: .2em; }
.ouverture .horaire .views-label {
  font-family: 'Helvetica Neue bold', Helvetica, Arial, sans-serif;
}
.ouverture .lien { margin-top: 15px; }
.ouverture .lien a {
  display: block;
  width: 67px; height: 42px;
  background: url('../../images/accueil/agenda.png') no-repeat;
  background: url('../../images/accueil/agenda.svg') no-repeat;
}
.block-coordonnees { float: left; padding-left: 30px; width: 67%; border-left: 1px solid #e5e4e2; }
.block-coordonnees .group-left { float: left; width: 48%; }
.block-coordonnees .group-right { float: left; width: 52%; }
.block-coordonnees .nom {
  margin-bottom: 10px;
  text-transform: uppercase;
  font-family: 'Helvetica Neue bold', Helvetica, Arial, sans-serif;
}
.block-coordonnees .adresse { margin-bottom: 5px; }
.block-coordonnees .lien a {
  display: block;
  padding: .8em 0;
  width: 49%;
  background-color: #e6e4e2;
  text-align: center;
  font-family: 'Trebuchet bold', Helvetica, Arial, sans-serif;
  font-size: 1.4em;
}
.block-coordonnees .lien a:hover { background-color: #3d404a; color: #fff; }
.block-coordonnees .lien .acces { float: left; }
.block-coordonnees .lien .tarifs { float: right; }
.block-coordonnees .telephone { margin-top: 20px; line-height: 1; text-align: center; }
.block-coordonnees .telephone .field-content {
  margin-left: 10px;
  font-family: 'Helvetica Neue bold', Helvetica, Arial, sans-serif;
}

/*** NOS ACTUALITES ***/

.block-actualites { margin-bottom: 20px; }
.block-actualites .views-row {
  float: left;
  width: 49.5%;
  margin: .25%;
  background-color: #fff;
}
.block-actualites .media { float: left; width: 50%; }
.block-actualites .group-text {
  position: relative;
  float: left;
  padding: 15px 15px 15px 20px;
  width: 50%;
  height: 184px;
}
.block-actualites .titre {
  line-height: 1.1;
  font-family: 'Trebuchet bold', Helvetica, Arial, sans-serif;
  font-size: 1.5em;
}
.block-actualites .periode,
.block-actualites .lieu { text-transform: uppercase; }
.block-actualites .group-tag, .block-morlaix .group-tag {
  position: absolute;
  bottom: 15px;
  padding-top: 10px;
  background: url('../../images/accueil/tiret.png') left top no-repeat;
  background: url('../../images/accueil/tiret.svg') left top no-repeat;
  font-size: .9em;
  color: #ababab;
}
.block-morlaix { margin-bottom: 110px; }
.block-morlaix .group-morlaix { float: left; width: 465px; margin: 2px; background-color: #3d404a; }
.block-morlaix .media { float: left; width: 233px; }
.block-morlaix .texte {
  position: relative;
  float: left;
  padding: 15px 15px 15px 20px;
  width: 232px;
  height: 184px;
}
.block-morlaix .texte .titre {
  line-height: 1.1;
  font-family: 'Trebuchet bold', Helvetica, Arial, sans-serif;
  font-size: 1.5em;
  color: #fff;
}
.block-morlaix .eds { float: left; padding: 45px 15px 15px 25px; width: auto; }
.block-morlaix .eds .titre { margin-bottom: 15px; font-size: .9em; color: #ababab; }
.block-morlaix .eds a {
  display: block;
  padding-left: 25px;
  background: url('../../images/accueil/fleche-puce.png') left .3em no-repeat;
  background: url('../../images/accueil/fleche-puce.svg') left .3em no-repeat;
  line-height: 1.1;
  font-family: 'Trebuchet bold', Helvetica, Arial, sans-serif;
  font-size: 1.5em;
}
.block-morlaix .eds .rejoindre { margin-bottom: 5px; }

/*** CURIEUX DE SCIENCES ***/

.block-curieux h2 { margin: 0 auto; width: 940px; }
.block-curieux .sous-titre { font-size: .9em; }
.block-curieux .slick-prev {
  background-image: url('../../images/accueil/fleche-gauche-fond.png');
  background-image: url('../../images/accueil/fleche-gauche-fond.svg');
}
.block-curieux .slick-next {
  background-image: url('../../images/accueil/fleche-droite-fond.png');
  background-image: url('../../images/accueil/fleche-droite-fond.svg');
}

/**
 * RESPONSIVE
 */

/*--------- <= 980px ---------*/

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

  .block-actualites, .block-morlaix,
  .block-curieux h2 { width: 100%; padding-left: 3%; padding-right: 3%; }
  .block-actualites .views-row { float: none; margin: 0 0 2px 0; width: 100%; }
  .block-actualites .media { width: 234px; }
  .block-actualites .group-text { float: left; width: auto; }
  .block-morlaix .group-morlaix { margin: 0; }

}

/*--------- <= 860px ---------*/

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

  .block-morlaix .group-morlaix,
  .block-morlaix .eds { float: none; width: 100%; }

}

/*--------- <= 740px ---------*/

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

  .ouverture, .block-coordonnees { width: 50%; }
  .block-coordonnees { float: right; border-left: none; }
  .block-coordonnees .group-left { display: none; }
  .block-coordonnees .group-right { width: 100%; }

}

/*--------- <= 580px ---------*/

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

  .flexslider .slides .titre-banniere { font-size: 3em; }
  .ouverture { width: 40%; }
  .block-coordonnees { width: 60%; }
  .block-actualites .views-row { float: left; margin: .25%; width: 49.5%; }
  .block-actualites .media,
  .block-actualites .group-text { width: 100%; }
  .block-actualites .media img,
  .block-morlaix .group-morlaix .media img { width: 100%; height: auto; }
  .block-morlaix .group-morlaix .media,
  .block-morlaix .group-morlaix .texte { width: 50%; }


}

/*--------- <= 520px ---------*/

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

  .flexslider .flex-direction-nav .flex-next { right: 20px; }
  .flexslider .flex-direction-nav .flex-prev { left: 20px; }
  .ouverture, .block-coordonnees { float: none; width: 100%; }
  .ouverture { margin-bottom: 30px; }
  .ouverture .horaire { float: left; width: 80%; }
  .ouverture .lien { float: right; margin-top: -20px; width: 20%; }
  .block-coordonnees { padding-left: 0; }
  .block-coordonnees .telephone { margin-top: 30px; }

}

/*--------- <= 480px ---------*/

@media only screen and (max-width: 480px) {  /* eq. 384px */

  .flexslider .slides .group-text { padding: 20% 15% 15% 15%; }
  .flexslider .flex-direction-nav { display: none; }
  .block-actualites .views-row { float: none; margin: 0; width: 100%; }
  .block-actualites .group-text,
  .block-morlaix .group-morlaix .texte { height: auto; padding-bottom: 60px; }
  .block-morlaix .group-morlaix .media,
  .block-morlaix .group-morlaix .texte { float: none; width: 100%; }

}