body, .callout.primary
{
  background-color: #77b885;
margin: 0}

body
{
font-family: 'Montserrat', sans-serif}

h1, h2, h3, h4, h5, h6
{
  font-family: "Playball", cursive;
  font-weight: 400;
  font-style: normal;
margin-bottom: 2rem}

.detailTarifs h2{margin-bottom: 0}

sup{font-size: 50%}

p
{
  text-align: left;
text-align-last: left;
/*text-justify: inter-character*/}

p.lead, .message p
{
text-align: center}

.message p
{
line-height: 1.3}

.sep
{
background: no-repeat center url("../img/SEP.png") transparent}

hr
{
  border-bottom: none;
margin: 0}

/* HEADER */
.callout.large
{
  padding: 0;
margin: 0}

.callout
{
  border: none;
padding: 0}

.header
{
  background-color:#77b885;
  color: #FFFFFF;
padding: 3rem 3rem 1rem 3rem}

.off-canvas-content
{
box-shadow: none}

/* MENU */
.menuLine
{
background-color: #FFFFFF}

.sticky
{
  position: fixed;
  top: 0;
z-index: 2000}

/**/
.rubric
{
padding: 3rem}

.rubric.pkoi
{
padding-bottom: 0}

.kisuije, .keske, .tarifs, .citationNorman, .contact, .seance
{
background-color: #caecd1}

.seance ul, .seance ul + p
{
margin: 0 1rem}

.seance img
{
width: 70%}

.citation, .pkoi
{
  background-color: #77b885;
color: #FFFFFF}

.button.terracota
{
  border-radius: 10px;
  background-color: #caecd1;
  color: #000000;
text-transform: uppercase}

.button.terracota:hover, .button.terracota.active
{
  background-color: #77b885;
color: #FFFFFF}

.button.terracota.last
{
margin-right: 0}

.menu .active
{
  color: #000;
  text-decoration: underline;
font-weight: 600}

.email .button.terracota
{
  background-color: #77b885;
color: #FFFFFF}

.email .button.terracota:hover
{
background-color: #000000}

.contactForm .capsule .button.terracota
{
  background-color: #caecd1;
color: #000000}

.contactForm .capsule .button.terracota:hover
{
background-color: #FFFFFF}

.tarifs .capsule
{
  background-color: #77b885;
  color: #FFFFFF;
  padding: 1rem;
margin-bottom: 2rem}

.tarifs .capsule .price
{
  font-size: 300%;
font-weight: 600}

.capsule.conditions
{
color: #FFF}

.capsule.conditions strong
{
  color: #000;
  font-weight: 600;
}

.capsule.header
{
  background-color: #77b885;
padding: 0}

.capsule.kisuije, .capsule.keske, .capsule.tarifs, .capsule.contact
{
background-color: #caecd1}

.capsule.citation, .capsule.pkoi
{
background-color: #77b885}

.keske img
{
max-width: 60%}

nav, .title-bar, .off-canvas
{
  background-color: #caecd1;
color: #000000}

.title-bar-title
{
  font-weight: 800;
margin-left: 2rem}

.menu-icon::after
{
  box-shadow: 0 7px 0 #000,0 14px 0 #000;
background: #000}

.menu-icon:hover::after
{
  box-shadow: 0 7px 0 #77b885,0 14px 0 #77b885;
  background: #77b885;
}

.title-bar
{
padding: 0}

nav
{
  width: 102%;
  padding: 1rem;
  left: -8px;
  top: -8px !important;
border-bottom: 1px solid #77b885}

.js-off-canvas-exit
{
background: rgba(0,0,0,.7)}

.off-canvas
{
  background: no-repeat url("../img/IMG-KISUISJE.png") #caecd1;
  background-position: center 22rem;
  -webkit-background-size: 100%;
background-size: 100%}

.off-canvas.position-left
{
padding: 1rem}

.menu ul li
{
  text-transform: uppercase;
  list-style: none;
margin-bottom: 1rem}

.menu ul li a
{
  color: #568b62;
transition: color 1s ease}

.menu ul li a:hover
{
  color: #000;
transition: color 1s ease}

.text-small
{
  font-size: 80%;
  display: block;
line-height: auto}

.message .text-small
{
font-size: 60%}

/* BACK TO TOP BUTTON */
#button
{
  display: inline-block;
  background-color: #77b7b6;
  border: 1px solid #000000;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  margin: 30px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: 1s ease;
  z-index: 950;
  opacity: 0;
visibility: hidden}

#button.show
{
  opacity: 1;
  visibility: visible;
  transition: 1s ease;
}

#button:hover
{
  cursor: pointer;
background-color: #77b7b6}

/*#button:active
{
background-color: #af8579}

*/
#button::after
{
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
  line-height: 50px;
color: #fff}

/**/
/*.kisuije img.CC
{
max-width: 28%}

*/
.mb20
{
margin-bottom: 20px}

.p20
{
padding: 20px}

.pt50
{
padding-top: 50px}

.pt8
{
padding-top: 8%}

.pt20
{
padding-top: 20px}

.pb10
{
padding-bottom: 10px}

.pl15
{
padding-left: 15px}

.pr15{padding-right: 15px}

.tl{text-align: left}

.illus .columns
{
padding: 0 2rem}

.illus .columns span
{
  text-transform: uppercase;
  font-size: 1rem;
  margin: 1.5rem 0 .5rem 0;
  position: relative;
display: block  }

p.cit
{
  font-size: 3rem;
  font-weight: 800;
  line-height: normal;
  position: relative;
  display: block;
margin-left: 15%}

p.citNorm
{
  font-size: 3rem;
  font-weight: 800;
  color: #af8579;
  line-height: normal;
  position: relative;
display: block}

.cit span
{
font-size: 50%}

.cit span.guillemets
{
  font-size: 250%;
position: absolute}

.cit span.guillemets.open
{
  left: -6rem;
top: 1.5rem}

.cit span.guillemets.close
{
padding-left: 2rem}

.citNorm span
{
font-size: 50%}

.citNorm span.guillemets
{
  font-size: 250%;
position: absolute}

.citNorm span.guillemets.open
{
  left: 1rem;
top: 1.5rem}

.citNorm span.guillemets.close
{
padding-left: 2rem}

.citationNorman .rubric
{
padding: 1rem}

.illus
{
padding: 1rem}

.thumbnail:focus, .thumbnail:hover
{
  -webkit-box-shadow: none;
box-shadow: none}

.email .ico
{
margin-right: .5rem}

.phone a
{
  color: #000000;
text-decoration: underline}

.phone a:hover, .phone a:focus
{
color: #77b885}

.googleMap
{
margin: .5rem 0 2rem 0}

.photos
{
margin-bottom: 2rem}

/* SOCIAL MEDIAS */
.FB
{
  background: no-repeat center url("../img/FB.png") transparent;
  padding: 21px 29px 10px 10px;
  transition: background-image .3s ease;
-webkit-transition: background-image 1s ease}

.FB:hover
{
  background: no-repeat center url("../img/FB_hover.png") transparent;
  transition: background .3s ease-out;
-webkit-transition: background .3s ease-out  }

.INSTA
{
  background: no-repeat center url("../img/INSTA.png") transparent;
  padding: 21px 29px 10px 10px;
  margin-left: 10px;
  transition: background .3s ease-out;
-webkit-transition: background .3s ease-out}

.INSTA:hover
{
  background: no-repeat center url("../img/INSTA_hover.png") transparent;
  transition: background .3s ease-out;
-webkit-transition: background .3s ease-out  }

.inline-list > li
{
  display: block;
  float: left;
  list-style: none;
margin-left: 0}

.inline-list > li + li
{
margin-left: 1rem}

/* ADRESSE */
/*.adress .column
{
min-height: 70px}*/

/* ARRETS DE BUS */
.capsule.bus
{
  background-color: #af8579;
  color: #FFFFFF;
  padding: 1rem 1rem 0 1rem;
margin: 2rem 0}

.rubric.bus
{
padding: 0}

.bus ul
{
list-style: none}

.bus ul li
{
margin-bottom: 10px}

.bus .arret
{
  padding: 10px;
  color: #000;
  background-color: #bc783c;
  border-radius: 5px;
  margin-left: 10px;
border: 1px solid #FFF}

.bus .arret.blue
{
  background-color: #009cd7;
color: #FFF}

/* FORMULAIRE DE CONTACT */
.contactForm .capsule
{
  background-color: #77b885;
padding: .5rem 1rem 1rem 1rem  }

.contactForm label
{
  display: block;
  font-size: 100%;
  line-height: 1;
  color: #FFFFFF;
margin: 1rem 0 .5rem 0}

.zoneText textarea
{
min-height: 50px}

[type="text"], [type="password"], [type="date"], [type="datetime"], [type="datetime-local"],  [type="month"], [type="week"], [type="email"], [type="tel"], [type="time"], [type="url"],  [type="color"], [type="number"], [type="search"], [type="name"], textarea
{
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 2.4375rem;
  padding: .5rem;
  border: 0 transparent;
  border-radius: 10px;
  margin: 0 0 1rem;
  color: #5a5d49;
background-color: #fefefe}

input.button
{
margin-top: 1rem}

/* FOOTER */
footer
{
  padding: 1rem;
  text-align: center;
  color: #FFFFFF;
  background-color: #77b885;
  font-size: .7rem;
border-top: 1px solid #caecd1}

footer a
{
  color: #000000;
text-decoration: underline}

footer a:hover, footer a:focus
{
color: #FFFFFF}

/* CONFIRMATION FORMULAIRE */
.message
{
  color: #FFF;
  font-size: 200%;
  font-family: "Playball", cursive;
  font-weight: 400;
  font-style: normal;
  padding-top: 15%;
  position: relative;
display: block}

/* RESPONSIVE DESIGN BREAKPOINTS */
/* SMALL */
@media screen and (max-width: 480px)
{
  #button
  {
  display: none}

  .rubric, .header
  {
  padding: 1rem}

  .rubric.citation
  {
  padding: 0 0 2rem 0}

  h1
  {
  font-size: 2rem !important}

  .lead
  {
  font-size: 110%}

  h2
  {
  font-size: 2.1rem}

  .illus .columns
  {
  padding: 0 .1rem}

  .illus .columns span
  {
  font-size: .7rem}

  p.cit, p.citNorm
  {
    font-size: 2rem;
    text-align: center;
  margin: 0 1rem}

  .cit span.guillemets.open
  {
    left: 0;
  top: 1rem}

  .cit span.guillemets.close
  {
  padding-left: .5rem}

  .citNorm span.guillemets.open
  {
    left: 0;
  top: 1rem}

  .citNorm span.guillemets.close
  {
  padding-left: .5rem}

  .citationNorman .rubric
  {
  padding-top: 0}

  p.cit, p.citNorm
  {
    font-size: 2rem;
    text-align: center;
  margin: 0 1rem}

  .capsule.header
  {
  margin-top: 3rem}
}

}

/* MEDIUM */
@media screen and (min-width: 481px) and (max-width: 768px)
{
  .rubric, .header
  {
  padding: 1rem}

  .rubric.citation
  {
  padding: 0 0 2rem 0}

  p.cit, p.citNorm
  {
    font-size: 2rem;
    text-align: center;
  margin: 0 1rem}

  .imgContainer
  {
    width: 75%;
    display: block;
    position: relative;
    margin: auto;
    float: none !important;
  }

   h1
  {
  font-size: 2rem !important}
}