*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{font-family: NunitoSansLight,"Nunito Sans Light";}
p{ font:20px NunitoSansLight,"Nunito Sans Light"; padding:16px 0;line-height:1.6;}
p a:link, a:visited{color:#0000FF;text-decoration: none;box-shadow: inset 0 -2px 0 white, inset 0 -3px 0 #0000FF}
p a:hover, a:active{color:#FF0000;text-decoration: none;box-shadow: inset 0 -2px 0 white, inset 0 -3px 0 #FF0000}
h1{ font:24px NunitoSansSemibold,"Nunito Sans Semibold"; text-transform:uppercase; letter-spacing:3px;}
h2{ font:24px NunitoSansExtrabold,"Nunito Sans Extrabold"; text-transform:uppercase; letter-spacing:2px;}


/* Header */
.logo{display: flex;align-items: center;justify-content: center; }
.logo img{margin: 0}
.titolo{
    width: 100%;
	text-align:center;
	background-color:#3fabf4;
	color:#FFF;
	padding:34px 30px 30px 30px;	
}


/* Calculator */
.calculator{
  background-image: url("immagini/calcolo-interesse-composto.jpg");
  background-size:cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-repeat:no-repeat;
  height:610px;
  position: relative;
  background-position: center center;
}
.layer {
    background-color: rgba(248, 247, 216, 0.8);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Arrow 1 */
.outercase { 
  position  : absolute; 
  width     : 100%;  
  height    : auto; 
  text-align: center;
  
}
.down-arrow-hr-inverso {
  border-left: 100vh solid #3fabf4;
  border-right: 100vh solid #3fabf4;
  border-top: 40px solid transparent;
  position:relative;
  top:-40px;
  margin-bottom:-40px;
  left: 50%;
  transform: translateX(-50%);
}
div.down-arrow-hr-inverso { border-bottom:0px solid #3fabf4;margin-left:-1px;}

.down-arrow-hr-inverso2 {
  border-left: 100vh solid transparent;
  border-right: 100vh solid transparent;
  border-top: 40px solid #3fabf4;
  position:relative;
  top:0px;
  left: 50%;
  transform: translateX(-50%);
}
div.down-arrow-hr-inverso2 { border-bottom:40px solid transparent;margin-left:-1px;}



/* Prima Parte */
.prima-parte{
    width:100%;
	color:#001621;
	background-color:#f2f4fa;
	padding:50px 0 0 0;
	border-top: 60px solid transparent;
}
.primo-contenuto{
    width: 90%;
	padding:3% 5%;
	max-width:1400px;
	margin: auto;
	overflow:hidden;
	text-align:left;
	padding-bottom:70px;
	background-color:#FFF;
	border: 1px solid #eaeaea;
	border-radius: 30px;
}
.icona-compound{ font:40px NunitoSansExtrabold,"Nunito Sans Extrabold";margin:30px 0 50px 0;text-align:center;}
.fa-calculator{ margin-bottom:20px}
.icone-marg{ margin-bottom:20px}


blockquote {
font:20px NunitoSansLight,"Nunito Sans Light";
font-style: italic;
margin: 0.25em 0;
padding: 1.80em 40px;
line-height: 1.45;
position: relative;
color: #383838;
background: #f9f9f9;
border-left: 10px solid #afdaf7;
}
blockquote cite {
color: #999999;
font-size: 16px;
display: block;
margin-top: 14px;
text-align:left;
}
blockquote cite:before {
content: "\2014 \2009";
}
.info-amazon{ font-size:11px; line-height: 19px;  vertical-align: top; margin-right:3px; margin-left:5px;color:#7676fe}
.fa-external-link-alt{ font-size:10px; line-height: 18px;  vertical-align: top; margin-right:3px; margin-left:5px; color:#aaaafc}

.caption-sx{width:380px;float:left; margin:24px 46px 30px 0px;border:0px solid #666666;}
.caption-sx img{ display:block;border-radius: 10px;}
.caption-dx{width:380px;float:right; margin:24px 0px 30px 46px;border:0px solid #666666;}
.caption-dx img{ display:block;border-radius: 10px;}
.flex{width:100%;height:auto;}

.legenda{ margin-left:30px; padding-left:20px; border-left:2px solid #001621; font:20px NunitoSansLight,"Nunito Sans Light"; margin-top:16px; margin-bottom:24px;line-height:1.6;}

.corsi{ margin-left:30px; margin-top:0px; margin-bottom:10px; padding-top:0px}


.txt-tabella{line-height:1.8;margin: 36px 0 34px 0;}
table#tabella-prodotti{width:100%;border-collapse:collapse;}
table#tabella-prodotti tr:nth-of-type(odd){background:#f2f4fa;}

table#tabella-prodotti td, th{padding:14px 26px;border:0px solid #ccc;text-align:left;font:19px NunitoSansLight,"Nunito Sans Light";}
.Stile4{background-color:#3fabf4;color:#FFF}

.grafico-sp500{width: 100%;margin: 44px 0 50px 0;}


.chart {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 300px;
  margin: 44px 0 50px 0;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1) 2%, rgba(0, 0, 0, 0) 2%);
  background-size: 100% 50px;
  background-position: left top;
  border-top: 1px solid #e5e5e5;
}
.chart li {
  position: relative;
  display: table-cell;
  vertical-align: bottom;
  height: 300px;
}
.chart li:hover {
  opacity:0.7;
}

.cifracapitale{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  -webkit-box-align:center;
  -webkit-box-pack:center;
  display:-webkit-box;
  color:#8297a7;
		}

.cifracapitale:after {
			content:"";
		}
		
		
.chart span {
  margin: 0 1em;
  display: block;
  background-color:#7cc3f3;
  animation: draw 1s ease-in-out;
}
.chart span:before {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: 5px 1em 0;
  display: block;
  text-align: center;
  content: attr(data-title);
  word-wrap: break-word;
}

@keyframes draw {
  0% {
    height: 0;
  }
}





/* Arrow 2 */

.down-arrow-hr-lopez {  
  border-left: 100vh solid transparent;
  border-right: 100vh solid transparent;
  border-top: 40px solid #f2f4fa;;
  position:relative;
  top:0px;
  left: 50%;
  transform: translateX(-50%);
  
}
div.down-arrow-hr-lopez { border-bottom:40px solid transparent; margin-left:-1px;}



/* Piramide della Ricchezza */

.seconda-parte{
    width:100%;
	background:#083a75;
	padding-bottom:100px;
	padding-top:40px;
	border-top: 40px solid transparent;
}
.secondo-contenuto{
    width: 80%;
	max-width:1400px;
	margin: auto;
	overflow:hidden;
	text-align:center;	
}

.secondo-contenuto h2{color:#c6ced4;}
.secondo-contenuto p{color:#e6ecff;}

.spazio-finale{
    width:100%;
	color:#001621;
	background-color:#f2f4fa;
	padding:50px 0 0 0;
	border-bottom: 20px solid transparent;
}




/* Footer */
footer{width: 100%; text-align:center; padding:50px 20px; color:#386176; background-color:#00070b;font:16px NunitoSansLight,"Nunito Sans Light"; border-top: 1px solid #000000;}
footer a:link, a:visited {color:#386176; text-decoration:underline}
footer a:hover, a:active {color:#ffffff; text-decoration:underline}
.tutti-link-footer{ display: block; font:14px NunitoSansLight,"Nunito Sans Light"; margin-top:14px}





/* Nunito Sans Font */
@font-face {
    font-family: 'NunitoSansLight';
    src: url('https://www.monpiler.com/fonts/nunito/nunitosans-light-webfont.eot');
    src: url('https://www.monpiler.com/fonts/nunito/nunitosans-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.monpiler.com/fonts/nunito/nunitosans-light-webfont.woff2') format('woff2'),
         url('https://www.monpiler.com/fonts/nunito/nunitosans-light-webfont.woff') format('woff'),
         url('https://www.monpiler.com/fonts/nunito/nunitosans-light-webfont.ttf') format('truetype'),
         url('https://www.monpiler.com/fonts/nunito/nunitosans-light-webfont.svg#nunito_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NunitoSansRegular';
    src: url('https://www.monpiler.com/fonts/nunito/nunitosans-regular-webfont.eot');
    src: url('https://www.monpiler.com/fonts/nunito/nunitosans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.monpiler.com/fonts/nunito/nunitosans-regular-webfont.woff2') format('woff2'),
         url('https://www.monpiler.com/fonts/nunito/nunitosans-regular-webfont.woff') format('woff'),
         url('https://www.monpiler.com/fonts/nunito/nunitosans-regular-webfont.ttf') format('truetype'),
         url('https://www.monpiler.com/fonts/nunito/nunitosans-regular-webfont.svg#nunito_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NunitoSansSemibold';
    src: url('https://www.monpiler.com/fonts/nunito/nunitosans-semibold-webfont.eot');
    src: url('https://www.monpiler.com/fonts/nunito/nunitosans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.monpiler.com/fonts/nunito/nunitosans-semibold-webfont.woff2') format('woff2'),
         url('https://www.monpiler.com/fonts/nunito/nunitosans-semibold-webfont.woff') format('woff'),
         url('https://www.monpiler.com/fonts/nunito/nunitosans-semibold-webfont.ttf') format('truetype'),
         url('https://www.monpiler.com/fonts/nunito/nunitosans-semibold-webfont.svg#nunito_sanssemibold') format('svg');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'NunitoSansExtrabold';
    src: url('https://www.monpiler.com/fonts/nunito/nunitosans-extrabold-webfont.eot');
    src: url('https://www.monpiler.com/fonts/nunito/nunitosans-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.monpiler.com/fonts/nunito/nunitosans-extrabold-webfont.woff2') format('woff2'),
         url('https://www.monpiler.com/fonts/nunito/nunitosans-extrabold-webfont.woff') format('woff'),
         url('https://www.monpiler.com/fonts/nunito/nunitosans-extrabold-webfont.ttf') format('truetype'),
         url('https://www.monpiler.com/fonts/nunito/nunitosans-extrabold-webfont.svg#nunito_sansextrabold') format('svg');
    font-weight: bold;
    font-style: normal;
}





/* Stile Calcolatore */
.simulatore{width:100%;padding:0;border-top: 60px solid transparent;}
#content{width: 90%; padding:0;margin: auto;overflow:hidden;max-width:1400px;}
.input-box-totale{float: left; padding:0px}
.result-box{border:0px solid #e1e1e1;background-color:#FFF; width: calc(100% - 558px); height:454px;float: right;padding:0px; border-radius: 30px;} /* width:700px; */

.ms-calc #chart{width:100%; height:410px;padding: 30px;} /* width:700px; */


.input-box{flex-wrap:wrap;display:flex;max-width:494px;background-color: rgba(173, 216, 246, 0.6); border-radius: 30px; padding:20px 10px} /* background: #add8f6;  */
.input-box2{flex-wrap:wrap;display:flex;max-width:494px;background-color: rgba(173, 216, 246, 0.6); border-radius: 30px; padding:20px 10px; margin-top:26px} /* background: #add8f6;  */

/* Convertire da HEX a RGBA: http://hex2rgba.devoth.com/  */


#content select::-ms-expand,#calculator-container select::-ms-expand{display:none}
.ms-calc input:focus,#content select:focus{outline:2px solid #3fabf4;}

.ms-calc input.empty{background-image:radial-gradient(circle at center,#d84847 3px,transparent 4px);background-repeat:no-repeat;background-position-x:right;background-size:16px 100%}
.ms-calc input,.ms-calc select{margin:0 16px 19px 0}
.ms-calc select {padding:16px 32px 16px 16px;font:18px NunitoSansLight,"Nunito Sans Light";border:0;border-radius:4px;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:#ffffff url('https://www.monpiler.com/it/immagini/freccia-bassa.gif')no-repeat 95% 50%}
.ms-calc select{width:100%;border:.05rem solid #d0d0d0!important}

.ms-calc{background-color:transparent;padding:0;margin:0;}


.ms-calc p{flex:0 auto; padding:0 0 0 1.5rem;}

.ms-calc input,.ms-calc select{width:192px;text-align:left; height:58px}
.ms-calc input[type=number],.ms-calc input[type=text]{border-color:#d0d0d0}.ms-calc input[type=checkbox],.ms-calc input[type=radio]{width:auto}

label{display:block;font-size:.90rem;margin:.5rem 0;color:#666}
input[type=text],input[type=number]{padding:1rem;font: 18px NunitoSansLight,"Nunito Sans Light";border-radius:4px;box-sizing:border-box;border:solid .05rem #f3f3f3}
input:focus{border:solid .05rem #ccc}
input:disabled{background-color:#f7f7f7;cursor:not-allowed}
input.invalid{border:solid .05rem #d84847}
input.required{padding:1rem 2rem 1rem 1rem}

.teachingResult .years{background-color:#f3f3f3;border-radius:1rem;padding:.2rem .75rem;margin:0 .5rem .5rem 1rem;white-space:nowrap;display:inline-block;font-size:.8rem}
.total{font-family:NunitoSansSemibold,"Nunito Sans Semibold";font-size:18px;margin:0;}
.legend {padding:0px 10px 30px 10px; }

.explore>div{display:none} 


.ms-calc .key{display:inline-block;width:15px;height:12px;margin-right:5px}
.ms-calc .key.bar1{background-color:#0047f5}
.ms-calc .key.bar2{background-color:#42bfc7}
.ms-calc table.chart-tooltip{font-size:.85rem!important;margin-bottom:0!important;}
.ms-calc table.chart-tooltip td,.ms-calc table.chart-tooltip th{padding:.55rem!important;background-color:#fff!important;border:0!important;font-weight:400}
.ms-calc .tooltip:not(.glossButton){position:relative;display:inline-block;text-decoration:none;overflow:visible;font-size:.75rem!important;padding:.1rem .35rem!important;margin:0 .25rem!important;background-color:#0047f5!important;color:#fff!important;border-radius:1rem!important;border:none!important;min-width:auto!important;line-height:.9rem}
.ms-calc .tooltip:not(.glossButton):before{content:"?"}
.ms-calc .tooltip:not(.glossButton):focus{outline:none;background-color:#42bfc7!important}
.ms-calc .tooltip:not(.glossButton).dotted{border-bottom:1px dashed #222!important;background-image:none;background-color:transparent!important;color:#222!important;font-size:unset!important;cursor:help!important;padding:0!important;margin:0!important;border-radius:0!important}
.ms-calc .tooltip:not(.glossButton).dotted:before{content:""}
.ms-calc .tooltip:not(.glossButton).light{color:#fff!important;border-bottom:1px dashed #fff!important}
.ms-calc .tooltip .tooltiptext:not(.glossButton){visibility:hidden;width:240px;bottom:100%;left:50%;margin-left:-120px;margin-bottom:.4rem;font-style:normal;font-size:.8rem;color:#333;background-color:#ace8fa;text-align:center;padding:.5rem;border-radius:4px;box-sizing:border-box;white-space:normal;position:absolute;z-index:1}
.ms-calc .tooltip .tooltiptext:not(.glossButton).align-left{text-align:left}

.ms-calc .tooltip:hover .tooltiptext{visibility:visible}

.ms-calc .tooltip .tooltiptext:after{content:" ";position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:#ace8fa}
.ms-calc .explore{display:none}
.amt{float:right;margin-right:1.5rem}


.ms-calc .flex{position:relative}
.ms-calc hr{margin:1rem 0!important;background-color:transparent;color:transparent;border-bottom:2px dotted #ccc;border-top:none!important;max-width:none!important}
.ms-calc hr.hr-break{border:none;margin:0!important}

.explore2{display:none}

@media (min-width: 1151px) and (max-width: 1570px) {
	.calculator{height:576px;}
	}

@media (min-width: 1151px) and (max-width: 1400px) {
	
	.ms-calc #chart{width:100%; height:404px;padding: 30px 30px 0px 30px;}
	.calculator{height:576px;}
	}
	
@media (min-width: 970px) and (max-width: 1150px) {
	.calculator{height:1014px;}
	 label{font-size:.90rem;padding:0;color:#666; float:left; width:180px;border:solid .05rem #f3f3f3; margin-top:1px; height:56px;  text-align:center;display: flex;justify-content: center;align-items: center;background-color:#f2f4fa;}
	 label span{ margin-left:4px;}
	 input[type=text],input[type=number]{padding:1rem;font: 18px NunitoSansLight,"Nunito Sans Light";border-radius:0px;box-sizing:border-box;border:solid .05rem #f3f3f3}
	.input-box{flex-wrap:wrap;display:flex;max-width:100%;background-color: rgba(173, 216, 246, 0.6); border-radius: 30px; padding: 40px 16px 20px 10px; text-align:center;justify-content: center;align-items: center;} /* background: #add8f6;  */
    .input-box2{flex-wrap:wrap;display:flex;max-width:100%;background-color: rgba(173, 216, 246, 0.6); border-radius: 30px; padding:40px 16px 20px 10px; margin-top:26px; text-align:center;justify-content: center;align-items: center;} /* background: #add8f6;  */
     .result-box{background-color:#FFF; width:100%;height:454px;padding:0px; border-radius: 30px;margin-top:60px}
	 .ms-calc #chart{width:100%; height:404px;padding: 30px 30px 0px 30px;}
	}
	
@media (min-width: 688px) and (max-width: 969px) {
	.calculator{height:1090px;}
	 label{text-align:left; margin-left:1.1rem}
	.input-box{flex-wrap:wrap;display:flex;max-width:100%;background-color: rgba(173, 216, 246, 0.6); border-radius: 30px; padding:20px 36px 20px 30px; text-align:center;justify-content: center;align-items: center;} /* background: #add8f6;  */
    .input-box2{flex-wrap:wrap;display:flex;max-width:100%;background-color: rgba(173, 216, 246, 0.6); border-radius: 30px; padding:20px 36px 20px 30px; margin-top:26px; text-align:center;justify-content: center;align-items: center;} /* background: #add8f6;  */
     .result-box{background-color:#FFF; width:100%;height:454px;padding:0px; border-radius: 30px;margin-top:60px}
	 .ms-calc #chart{width:100%; height:404px;padding: 30px 30px 0px 30px;}
	.ms-calc input,.ms-calc select{margin:0 2.2rem 1.2rem 1.1rem}
	
	}
	
@media (min-width: 520px) and (max-width: 687px) {
	.calculator{height:1244px;}
     label{font-size:.90rem;padding:0;color:#666; float:left; width:180px;border:solid .05rem #f3f3f3; margin-top:1px; height:56px;  text-align:center;display: flex;justify-content: center;align-items: center;background-color:#f2f4fa;}
	 label span{ margin-left:4px;}
	 input[type=text],input[type=number]{padding:1rem;font: 18px NunitoSansLight,"Nunito Sans Light";border-radius:0px;box-sizing:border-box;border:solid .05rem #f3f3f3}
	.input-box{flex-wrap:wrap;display:flex;max-width:100%;background-color: rgba(173, 216, 246, 0.6); border-radius: 30px; padding: 40px 16px 20px 10px; text-align:center;justify-content: center;align-items: center;} /* background: #add8f6;  */
    .input-box2{flex-wrap:wrap;display:flex;max-width:100%;background-color: rgba(173, 216, 246, 0.6); border-radius: 30px; padding:40px 16px 20px 10px; margin-top:26px; text-align:center;justify-content: center;align-items: center;} /* background: #add8f6;  */
     .result-box{background-color:#FFF; width:100%;height:454px;padding:0px; border-radius: 30px;margin-top:60px}
	 .ms-calc #chart{width:100%; height:404px;padding: 30px 30px 0px 30px;}
	}

@media screen and (max-width: 519px) {
	.calculator{height:1370px;}
	.ms-calc{float:left; width:100%}
	.ms-calc p{padding:0 1rem;flex:0 100%;}
	.ms-calc input{width:100%;text-align:left;}
    .ms-calc select{width:100%;border:.05rem solid #d0d0d0!important}
    .ms-calc input,.ms-calc select{margin:0 1rem .5rem 0}

    .result-box{background-color:#FFF; width:100%;height:454px;padding:0px; border-radius: 30px;margin-top:60px}
	.ms-calc #chart{width:100%; height:404px;padding: 30px 30px 0px 30px;}
	.amt{float:right;margin-right:0.5rem}
	}










/* Media Queries */


@media screen and (max-width: 640px) {
	h1{ font:18px NunitoSansSemibold,"Nunito Sans Semibold"; text-transform:uppercase; letter-spacing: 2px; line-height:30px}
	h2{ font:20px NunitoSansExtrabold,"Nunito Sans Extrabold";line-height:26px }
	p{ font:18px NunitoSansLight,"Nunito Sans Light"; padding:16px 0;line-height:1.6;}
	.outercase {overflow:hidden}
	.caption-sx, .caption-dx{width:100%;float:left; margin:24px 0px 38px 0px;border:0px solid #666666;}
	.prima-parte{width:100%;padding:50px 0 0 0;border-top: 30px solid transparent;}
	.spazio-finale{width:100%;padding:0 0 0 0;border-bottom: 16px solid transparent;}
	.primo-contenuto{width: 96%;padding:20px 28px 40px 28px}
	table#tabella-prodotti td, th{padding:12px 20px;font:17px NunitoSansLight,"Nunito Sans Light";}
	.logo img{ width:140px; height:auto;margin: 10px 0}
	.icona-compound{ font:40px NunitoSansExtrabold,"Nunito Sans Extrabold";margin:30px 0 20px 0;text-align:center;}
    blockquote {
font:18px NunitoSansLight,"Nunito Sans Light";
font-style: italic;
margin: 0.25em 0;
padding: 1.80em 30px;
line-height: 1.45;
position: relative;
color: #383838;
background: #f9f9f9;
border-left: 10px solid #afdaf7;
}
	}
	

	
@media (min-width: 641px) and (max-width: 1570px) {
	.outercase {overflow:hidden}
	}


@media (min-width: 641px) and (max-width: 900px) {
	.caption-sx, .caption-dx{width:100%;float:left; margin:24px 0px 38px 0px;border:0px solid #666666;}	
	}
@media (min-width: 901px) and (max-width: 1570px) {
	.caption-sx{max-width:400px;float:left; margin:24px 46px 30px 0px;border:0px solid #666666;}
	.caption-dx{max-width:400px;float:right; margin:24px 0px 30px 46px;border:0px solid #666666;}
	}