* {
  box-sizing: border-box;
}
html,body,h1,h2,h3,h4,h5,h6,p,text {font-family: "Roboto", sans-serif}
strong {font-weight:bold;}

body {
	font-family: "Roboto",sans-serif ;
	background-color: #f5f5f5;
}
.forms {
	padding: 12px;
	border-radius: 6px;
	border: 1px #6b7280 solid;
}
.labels {
	padding: 0;
	font-size: 16px;
	color: #4b5563;
	margin: 5px 0;
}
.titulo2 {
	font-family: "Roboto",sans-serif ;
	font-weight:bold;
	font-size: 18px;
	color: #3f4048;
	margin: 0;
}
.blueld {
	padding-top: 0;
	margin-top: 3px;
	font-weight: bold; 
	color:#ca2d1e;
	margin-bottom: 15px
}
#salaireAnim , #bonusAnim {
  stroke-dasharray: 315;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s;
}
#salaireLine, #bonusLine{
	stroke-dasharray: 200; 
	stroke-dashoffset: 130;
	transform-origin: right bottom;
	transform-box: fill-box;
  transition: transform 1s;
}
#plafonneAnim , #versement12Anim , #versement6Anim , #versement4Anim , #versement3Anim , #versement1Anim , #fraisForfaitAnim , #fraisReelAnim , #fraisCarteAnim {
  stroke-dasharray: 251.2;
  stroke-dashoffset: 251.2;
  transition: stroke-dashoffset 1s;
}
.text-white {
  color: #ffffff !important;
}
.col3 {
	width: 29%;
	text-align: center; 
	align-content: center;
	padding: 0 10px; 
	display: table-cell;
}
.template-col {
	padding: 10px;
	background-color: #ffffff;
	width: 900px;
	height: 240px;
	margin-bottom: 20px;
	display: table-row;
	}
.menu {
  float: left;
  width: 25%;
  text-align: left;
	margin:20px 0 20px 20px ;
	background-color: #ffffff;
	padding: 20px;
}
.main {
  float: left;
  width: 70%;
  text-align: left;
}
.main2 {
  float: left;
  width: 100%;
  text-align: left;
  margin:20px 0 0 20px ;
  background-color: #ffffff;
}
.col2 {
  float: left;
  width: 46%;
  text-align: center;
	margin:0;
	background-color: #ffffff;
	padding: 10px;
}
.col3 {
  float: left;
  width: 33%;
  text-align: center;
	margin:0;
	background-color: #ffffff;
	padding: 10px;
}
.col5 {
  float: left;
  width: 20%;
  text-align: center;
	margin:0;
	background-color: #ffffff;
	padding: 10px;
}
.buttons{
	float:left;
	border: 2px #ca2d1e solid; 
	cursor: pointer; 
	padding: 15px; 
	width: 46%;
	text-align: center
}
svg {
max-height: 80%;
	display: block;
	margin: auto;
}
@media only screen and (max-width: 620px) {
  /* For mobile phones: */
  .menu, .main, .main2, .col3, .col2 {
    width: 100%;
	  margin: 0;
  }
  body {
	  margin: 0;
  }
  .col5 {
    width: 33%;
	  margin-top: 10px
  }
  .row1 {
		max-width: 90%
  }
  .row2 {
		max-width: 95%
  }
  .row3 {
		max-width: 70%
  }
	}
@media only screen and (max-width: 1005px) {
  /* For mobile phones: */
  .buttons {
    width: 100%;
	  margin-top:10px;
  }
	}