/* CSS Document */

#togCalc {
	background: #0A933B url('../images/calcul.jpg') no-repeat center;
	-webkit-background-size:100%;
	background-size:100%;
	color:white;
	text-transform:uppercase;
	font-weight:400;
	cursor:pointer;
	position:fixed;
	right:10px;
	top:74px;
	height:65px;
	width:64px;
	border-left:4px solid #0A933B;
	border-right:4px solid #0A933B;
	z-index:1;
	transition:aal 0.3s;
}  
body.calcopened {
	padding:0;
}
body.calcopened #togCalc {
	z-index:7;
	border:none;
}
body.calcopened .calcHide {
	display:none;
}
body.calcopened  #top {
	padding:0;
}
#calculette p.h1 img {
	display:inline-block;
	border-radius:50%;
	width:50px;
	background:white;
	margin:8px 20px 20px 0;
}


/*Menu principal*/
#togCalc.open {
	background:white;
	color:#003f8e;
	top:0px;
	right:20px;	
	height: 88px;
	width: 88px;
	padding: 20px 15px;
	z-index:2;
	margin-top:0;
}
@media(min-width:640px) {
	#togCalc {
		height:97px;
		width:88px; 
		border-left:2px solid #0A933B;
		border-right:2px solid #0A933B;
		top:98px;
	}
		

	
}




#togCalc #open,
#togCalc.open #close{
	display:block;
}
#togCalc #close,
#togCalc.open #open{
	display:none;
}
#togCalc #close,
#togCalc #open {
	line-height:100%;
	text-align:center;
	width:100%;
	height:100%;
} 
/*
#calculette{
	-webkit-transform:translateY(-100%);
	transform:translateY(-100%);
	position:fixed;
	top:0;
	left:0;
	background: #044390 url('../images/menu.jpg') no-repeat 130% -500px;
	color:white;
	width:100%;
	z-index:6;
	height:100%;
	height:100vh;
	overflow:auto;
	opacity:0;
	-webkit-transition:transform 0s,opacity 0.4s , background 1.9s;
	transition:transform 0s,opacity 0.4s , background 1.9s;
	padding:20px 95px 20px 20px;
} */

#calculette{
	-webkit-transform:translateY(-100%);
	transform:translateY(-100%);
	position:absolute;
	top:0;
	left:0;
	background: #044390 url('../images/menu.jpg') no-repeat 130% -500px;
	color:white;
	width:100%;
	z-index:6;
	min-height:100%;
	min-height:100vh;
	height:auto;
	opacity:0;
	-webkit-transition:transform 0s,opacity 0.4s , background 1.9s;
	transition:transform 0s,opacity 0.4s , background 1.9s;
	padding:20px 95px 20px 20px;
}

#calculette.open{
	position:relative;
	-webkit-transform:translateY(0%);
	transform:translateY(0%);
	background: #044390 url('../images/menu.jpg') no-repeat right top;
	opacity:1;
}
#menuCalculs li {
	list-style-type:none;
	display:inline-block;
	margin-right:20px;
}
button.bouton,
#calculette .calc button{
	display: inline-block;
	color: #152351;
	text-decoration: none;
	padding: 13px;
	border: 2px solid #152351;
	background: #F2F4F8 ;
	font-family: inherit;
	text-transform: uppercase;
	font-weight: 700;
	-webkit-transition: 0.3s;
	transition: 0.3s;
	border-radius: 0;
	text-align: left;
	margin-top: 5px;
}
#calculette .calc button {
	margin-top:20px;
	padding: 13px 40px 13px 13px;
	background: #F2F4F8 url('../images/droite.png') no-repeat 95% center;
}

button.bouton:hover,
button.bouton.actif {
	background:#152351; 
	color:white;
}
#calculette .calc button:hover {
	background:#152351 url('../images/next.png') no-repeat 95% center;
	color:white;
}

.calc{
	display:none;
	padding-bottom:40px;
}
.calc.actif {
	display:block;
}
.illusCalc {
	display:none;
}


#calculette legend {
	color:white;
	border:none;
	margin:40px 0 10px 0;
	line-height:1em;
	font-size:1.3em;

}
#calculette label,
#calculette input {
	vertical-align:top;
}
#calculette label{
	display:inline-block;
	padding-right:10px;
	padding-top:6px;
	width:200px;
}
#calculette input{
	width:104px!important;
	border-radius:0;
	border:2px solid #2e415e;
	padding:7px;
	margin-bottom:0;
	-moz-box-sizing:border-box;     
	box-sizing:border-box;
	height:auto;
	background:white;
	display:inline-block;
	height:auto;
	padding:5px;
}
#calculette input.red{
	border:2px solid red;
}
#calculette .petitChamp {
	display:inline-block;
	padding-right:10px;
	margin-bottom:20px;
}
#calculette .petitChamp input,
#calculette .petitChamp label {
	display:inline-block;
	width:60px!important;
}
.resultCalc {
	
	opacity:0;
}
.resultCalc.rempli{
	transition:all 0.4s;
	opacity:1;
	background:#152351; 
	color:white;	
	-webkit-box-shadow:0 0 9px rgba(0,0,0,0.3);
	box-shadow:0 0 9px rgba(0,0,52,0.3);
	padding:20px;
	margin-top:20px;
}
.resultCalc.changing {
	background:white;
	color:#152351; 
}

.resultCalc p span {
  font-weight:700;
  font-size:1.4em;
}

#calculette h2 {
	font-size:2em;
}
#calculette h2 + h3{
	margin-top:0.4em;
	font-size:1em;
	font-weight:400;
}

.partieDeCalc + .partieDeCalc {
    margin-top: 40px;
    border-top: 1px solid white;
}


@media(min-width:800px) {
	#togCalc {
		right:0;
		top:88px;
	}
	
} 

@media(min-width:1200px) {
	#togCalc {
		margin-top:30vh;
	} 
	#calculette{
		padding:20px;
	}
	.calc.actif {
		display:flex;
		align-items:start;
	}
	.formCalc {
		width:50%;
		padding-right:20px;
	}
	.illusCalc {
		display:block;
		margin-top:30px;
		padding:7px;
		border:2px solid #0E4D9A;
	}
	.illusCalc:before {
		top:7px;
		left:7px;
	}
	
}
@media(min-width:1600px) {
	#togCalc{
		height:130px;
		width:118px;
		border-left:3px solid #0A933B;
		border-right:3px solid #0A933B;
		top:118px;
		right:50%;
		margin-right:-800px;		
	}
	#togCalc.open {
		right:50%;
				height: 118px;
		width: 118px;
		padding: 40px 30px;
		margin-top:0px;
	}
}