html{
  margin:0;
}

body{
  font-family: 'GT-Cinetype-Regular', Arial, Helvetica, sans-serif;
  margin:0;
  padding:0; 
}
a{
  text-decoration:none;
  color:#396baa;
}
a:hover{
  text-decoration:underline;
}

.bg { 
  background-repeat:no-repeat; 
  background-size: 40em;
}
.bg-prevoyance { background-image: url('../img/caillou_prevoyance.svg'); background-position:right -10em bottom -30em;}
.bg-retraite { background-image: url('../img/caillou_retraite.svg');     background-position:right -10em bottom -28em;}
.bg-succession { background-image: url('../img/caillou_succession.svg'); background-position:right -10em bottom -20em;}
.bg-immobilier { background-image: url('../img/caillou_immobilier.svg'); background-position:right -10em bottom -32em;}
.bg-placements { background-image: url('../img/caillou_placements.svg'); background-position:right -10em bottom -25em;}
.bg-fiscalite { background-image: url('../img/caillou_fiscalite.svg');   background-position:right -10em bottom -18em;}

.prevoyance { color:#9f484d; }
.retraite   { color:#396baa; }
.succession { color:#ad7b6b; }
.immobilier { color:#694b99; }
.placements { color:#d47936;}
.fiscalite  { color:#52b2b1; }

.prevoyance-off { color:#9f484c50; }
.retraite-off   { color:#396baa50; }
.succession-off { color:#ad7b6b50; }
.immobilier-off { color:#694b9950; }
.placements-off { color:#d4793650;}
.fiscalite-off  { color:#52b2b150; }

p.prevoyance-off:hover { color:#9f484d; cursor: pointer;}
p.retraite-off:hover   { color:#396baa; cursor: pointer;}
p.succession-off:hover { color:#ad7b6b; cursor: pointer;}
p.immobilier-off:hover { color:#694b99; cursor: pointer;}
p.placements-off:hover { color:#d47936; cursor: pointer;}
p.fiscalite-off:hover  { color:#52b2b1; cursor: pointer;}

.prevoyance.title { border-color:#9f484d; }
.retraite.title   { border-color:#396baa; }
.succession.title { border-color:#ad7b6b; }
.immobilier.title { border-color:#694b99; }
.placements.title { border-color:#d47936;}
.fiscalite.title  { border-color:#52b2b1; }

#logo{
  width:10em;
  max-width: 10em;
}

#logo-domain{
  height:2.65em;
  
}

#logo-domain:hover{
  cursor: pointer;
}

.container{
  margin:0;
  padding:2em;
  margin-left: auto;
  margin-right: auto;
  max-width: 60em;

}
.header{
  margin-bottom:3em;
}

@media screen and (max-width: 600px) {
  .header .nav{
    display: none;
  }
}

.header .nav{
  margin-bottom:3em;
  width:20em;
  text-align: right;
  float:right;
  font-size: 0.9em;
}


.main{
  width:100%;
}

.menu{
  float:left; 
  width: 10em;
  max-width: 10em;
  margin-top: 4.8em;
}
.rocks-menu{
  float:left; 
  width: 10em;
  max-width: 10em;
  margin-top: 2em;
  font-size: 1.3em;
}
.rocks-menu a:hover {
  text-decoration:none;
}
.menu a:hover {
  text-decoration:none;
}
.menu .rocks-menu p{
  margin-top:0;
  
}

.rocks-menu p:hover{
  cursor: pointer;
  
}



@media screen and (max-width: 600px) {
  .menu{
    float:none;
    width: 100%;
    max-width: 100%;
    margin-bottom:2em;
  }

}
@media screen and (max-width: 750px) {
  .rocks-menu{
    float:left; 
    width: 10em;
    max-width: 10em;
    margin-top: 0em;
  }
}

.title{
  font-size: 1.5em;
  padding-bottom:0.5em;
  margin-bottom:1.5em;
  font-family: 'GT-Cinetype-Light', Arial, Helvetica, sans-serif;
  border-bottom: 2px solid black;

}

.content{
  text-align: justify;
  font-family: 'GT-Cinetype-Light', Arial, Helvetica, sans-serif;
  margin-left: 10em;
  min-height: 20em;
}
.rocks-content {
  margin-left: 10em;
  margin-top: 2em;
  min-height: 22em;
  text-align: center;
}
.rocks-content img {
  height:25em;
  display: inline-block;
  
}

.topics {
  text-align: center;
  font-size: 1.5em;
  
  margin-bottom:2em;
}
.highlight{  
  text-align:center;
  background:#f5f3f8;
  font-family: 'GT-Cinetype-Bold', Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  padding:1em;
  margin-bottom:2em;
  margin-top: 2em;
}

@media screen and (max-width: 600px) {
  .content{
    margin-left: 0em;
    min-width: 10em;
    min-height: 0em;
  }
  

}
@media screen and (max-width: 750px) {
  .rocks-content {
    margin-left: 0em;
    margin-top: 0em;
    min-width: 10em;
  }
  .rocks-content img {
    display: none;
  }

}




.highlight span {
  color:#694b99;
}

div.partenaires {
  text-align: left;
}

div.partenaire  {
  width:7em;
  height:7em;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-origin: content-box;

  border: 1px dotted lightgray;
  margin-top:2em;
  padding: 1.1em;
  display: inline-block;
}

.summary-ctn{
  display:block;
  max-width: 45em;
  margin-left: auto;
  margin-right: auto;
  
}
.summary-img{
  float:left;
  display:block;
}
.apropos-img{
  float:left;
  display:block;
  margin-right: 1.5em;

}
.mgb-pic  {
  border-radius: 5%;
  width: 7.5em;
  height: 10em;
}
.summary-txt{
  padding-left:8.5em;
  display:block;
  text-align: left;
}

.footer{
  text-align:center;
  padding-top:5em;
  padding-bottom:1em;
  word-break: keep-all;
  margin-top: 2em;

} 
.footer p{
  font-size: 0.9em;
  color:grey;
}
.footer a{
  font-size: 0.9em;
}

@media screen and (max-width: 600px) {
  .footer{
    padding-top:2em;
  }
}

.encryptaddr:after {
  content: attr(data-name) "@" attr(data-domain) "." attr(data-tld); 
}

.encryptnum:after {
  content: attr(data-num1) " " attr(data-num2) " " attr(data-num3) " " attr(data-num4); 
}