.col1{width:8.33333%}
.col2{width:16.66667%}
.col3{width:25%}
.col4{width:33.33333%}
.col5{width:41.66667%}
.col6{width:50%}
.col7{width:58.33333%}
.col8{width:66.66667%}
.col9{width:75%}
.col10{width:83.33333%}
.col11{width:91.66667%}
.col12{width:100%}

.container-simu{
	width:100%;
	max-width:1000px;
	clear:both;
	margin:50px auto;
	display: flex;
	flex-direction:column;
}

.container-simu .col{
	max-width:100%;
	width:100%
}

.container-simu .row-cssFrame{
	width:100%;
	display:flex
}

h5 {
  text-transform: uppercase; }

#simulation {
  /*width: 90%;*/
  margin: 10px 0; }
 @media screen and (max-width: 600px){
     #simulation{
         border-bottom: 1px solid #D4D4D4;
     }
 }
  #simulation:nth-child(5) {
    border-color: transparent; }

#c-deces,
#maj-acc,
#capital-de,
#deces-conjoint,
#deces-enfant,
#rente,
#none {
    position: relative;
  border-left: 15px solid;
  width: 90%;
  margin: 10px;
  max-width: 100%; }
  #c-deces *,
  #maj-acc *,
  #capital-de *,
  #deces-conjoint *,
  #deces-enfant *,
  #rente *,
  #none * {
    margin: 10px; }

#none {
  opacity: 0; }
  @media screen and (max-width: 600px) {
    #none {
      display: none; } }

#rente {
  background-color: #D4D4D4;
  border-color: #2980B9; }
  #rente h6, #rente span {
    color: #2980B9; }
#rente p span{
    color: black;
}
#maj-acc,
#capital-de {
  background-color: #D4D4D4;
  border-color: #977BAB; }
  #maj-acc h6, #maj-acc span,
  #capital-de h6,  #capital-de span {
    color: #977BAB; }

#deces-enfant {
  background-color: #D4D4D4;
  border-color: #E67E22; }
  #deces-enfant h6,#deces-enfant span {
    color: #E67E22; }

#c-deces,
#deces-conjoint {
  background-color: #D4D4D4;
  border-color: #27AE60; }
  #c-deces h6, #c-deces span,
  #deces-conjoint h6, #deces-conjoint span {
    color: #27AE60; }


    #c-deces > span,
    #maj-acc > span,
    #capital-de > span,
    #deces-conjoint > span,
    #deces-enfant > span,
    #rente > span {
        position: absolute;
        top: 5px;
        right: 0;
        font-size: 30px;
    }

h6 i span{
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 999;
    background-color: white;
    border: 1px solid #D4D4D4;
    padding: 10px;
    opacity: 0;
    border-radius: 3px;
}

h6{
    position: relative;
}



h6 i:hover span{
    opacity: 1;
    box-shadow: 0px 0px 15px grey;
    transition: 200ms ease;
}

h6 i:hover span:hover{
    opacity: 0;
}

.val{
    color: black;
    font-size: 22px;
    font-weight: 500;
}

@media screen and (max-width: 800px){
    .row-simu{
        flex-direction: row;
    }
}
