<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container" id="loading">
<div class="row">
<div class="animationload">
<div class="osahanloading"></div>
</div>
</div>
</div>
<section>
<div class="col-centered col-lg-12">
<div class="pricing-tables attached ">
<div class="row ">
<div class="col-sm-3 col-md-2 col-lg-2">
<div id="div1" class="plan first">
<div class="head">
<h2 style="font-size:18px">Actualmente en tu empresa</h2>
</div>
<div class="price mediafix">
<h3><span class="symbol">$</span>126,127,164</h3>
<h4>Valor de nómina actual</h4>
</div>
<hr>
<ul class="item-list">
<li><b>$29,372,164</b><br><desc>Carga prestacional</desc></li>
<li><b>$96,755,000</b><br><desc>Carga salarial</desc></li>
</ul>
</div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div id="div2" class="plan first recommended">
<div class="head">
<h2><span style="font-size:12px">con</span><img src="http://www.sodexobeneficios.co/hs-fs/hubfs/images/sodexo-white-right.png" width="200"/></h2>
</div>
<div class="price mediafix">
<h3><span class="symbol">$</span>116,899,916</h3>
<h4>Valor de nómina con SODEXO</h4>
</div>
<hr>
<ul class="item-list">
<li><b>$109,982,829</b><br><desc>Carga prestacional</desc></li>
<li><b>$83,860,000</b><br><desc>Carga salarial</desc></li>
<li><b>$6,201,219</b><br><desc>Sodexo alimentación</desc></li>
<hidden id="sodexo-alimentacion" value="6201219"></hidden>
</ul>
<hr>
<br>
<div class="section-bottom">La prestación del servicio Sodexo será del
<input class="input-sodexo" type = "text" maxlength="2" style="width:19px" value="10"/>%, equivalente a <span id="numprestacion">$60,212</span>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3">
<div id="div3" class="plan last">
<div class="head value">
<h2>Tu ahorro sería de</h2>
</div>
<div class="price mediafix">
<h3><span class="symbol">$</span>9,165,236</h3>
<h4>Mensuales</h4>
</div>
<div class="price mediafix">
<h3><span class="symbol">$</span>109,982,829</h3>
<h4>Anualmente</h4>
</div>
</div>
</div>
</div>
<!-- row-->
</div>
<!-- pricing-tables -->
</div>
<br>
</section>
/* pricing table */
.pricing-tables {
padding: 20px;
}
.pricing-tables h1 {
font-size: 48px;
}
.pricing-tables .plan.first {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px !important;
}
.pricing-tables .plan.last {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
.pricing-tables .plan.recommended {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.pricing-tables .plan.recommended .head {
/*margin-bottom: 20px;*/
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.pricing-tables.attached .col-sm-4, .pricing-tables.attached .col-md-4, .pricing-tables.attached .col-sm-3, .pricing-tables.attached .col-md-3 {
padding-left: 0;
padding-right: 0;
}
.pricing-tables.attached .plan {
border-radius: 0;
}
.pricing-tables.attached .plan .head {
border-radius: 0;
}
/*.pricing-tables.attached .plan.recommended {
border-radius: 4px;
}*/
/*.pricing-tables.attached .plan.recommended .head {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}*/
.pricing-tables.attached .plan.last {
border-bottom-right-radius: 4px;
}
.pricing-tables.attached .plan.last .head {
border-top-right-radius: 4px;
}
.pricing-tables.attached .plan.first {
border-bottom-left-radius: 4px;
}
.pricing-tables.attached .plan.first .head {
border-top-left-radius: 4px;
}
.plan {
box-shadow: 0 2px 2px rgba(10, 10, 10, 0.30) !important;
min-height: 100px;
background: #fff;
border-radius: 4px;
margin: 20px 0;
padding-bottom: 25px;
text-align: center;
}
.plan .head {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
padding: 12px 16px;
background: #595959;
color: #fff;
}
.plan .head h1, .plan .head h2, .plan .head h3 {
padding: 0;
margin: 0;
font-weight: 100;
}
.plan .price {
border-top: 1px solid #eee;
margin: 0 auto 30px auto;
width: 80%;
}
.plan .price h3 {
font-size: 29px;
vertical-align: top;
line-height: 1;
}
.plan .price h3 span {
font-size: 38px;
vertical-align: top;
position: relative;
margin: 6px 0 0 -7px;
display: inline-block;
}
.plan .price h4 {
color: #aaa;
font-size: 14px;
}
desc{
color: #aaa;
font-size: 12px;
}
.plan .btn {
padding: 10px 30px;
text-transform: uppercase;
font-weight: 500;
}
.plan ul {
list-style-type: none;
padding: 20px;
margin-top: 2px;
}
.plan ul li {
line-height: 14px;
margin-bottom: 15px;
font-size: 14px;
font-weight: 400;
}
.plan ul li a {
text-decoration: underline;
color: #e6e9ed;
}
.plan ul li:last-child {
border-bottom: none;
}
.plan ul strong {
font-weight: 700;
}
.plan.recommended {
margin-top: 6px;
box-shadow: 0 0 22px rgba(10, 10, 10, 0.42);
position: relative;
z-index: 99;
border-radius: 4px;
}
.plan.recommended .head {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background: #283897;
}
.head.value{
background-color: #fdaf17;
/*margin-bottom: 48px;*/
}
.plan.recommended .btn {
margin-bottom: 10px;
}
@media screen and (min-width:770px) and (max-width:990px){
.plan .mediafix h3 {
font-size: 55px !important;
vertical-align: top;
line-height: 1;
}
}
.symbol{
color:gray;
font-size: 25px !important;
}
hr {
margin-top: 0px;
margin-bottom: 0px;
}
ul{
margin-top: 0;
margin-bottom: -20px;
}
#div1, #div2, #div3 {
display:none;
}
/*loading*/
.animationload {
/*background-color: #fff;*/
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}
.osahanloading {
animation: 1.5s linear 0s normal none infinite running osahanloading;
background: #283897 none repeat scroll 0 0;
border-radius: 50px;
height: 50px;
left: 50%;
margin-left: -25px;
margin-top: -25px;
position: absolute;
top: 50%;
width: 50px;
}
.osahanloading::after {
animation: 1.5s linear 0s normal none infinite running osahanloading_after;
border-color: #65676A transparent;
border-radius: 80px;
border-style: solid;
border-width: 10px;
content: "";
height: 80px;
left: -15px;
position: absolute;
top: -15px;
width: 80px;
}
@keyframes osahanloading {
0% {
transform: rotate(0deg);
}
50% {
/*background: #85d6de none repeat scroll 0 0;*/
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
#loading{
position:absolute;
}
/*fin loading*/
.input-sodexo{
border-style: none;
border-bottom: 1px dotted gray;
}
#numprestacion{
font-weight: bolder;
color: #283897;
font-size:15px;
}
.section-bottom{
font-size: 12px;
padding: 10px;
}
$(function () {
function anim0(){
//alert("Boom!");
$('#loading').fadeOut();
$('#div1').fadeIn();
}
function anim1(){
//alert("Boom!");
$('#div2').fadeIn();
}
function anim2(){
//alert("Boom!");
$('#div3').fadeIn();
}
setTimeout(anim0, 2000);
setTimeout(anim1, 4000);
setTimeout(anim2, 6000);
/*change value*/
$('.section-bottom').keypress(function() {
var total= 0;
total= calcprestsodexo();
console.log('INFO: ' + total);
$('th:nth-child(2)').fadeOut();
$('#numprestacion').empty();
$('#numprestacion').append('$' + total) ;
});
function calcprestsodexo() {
var numPrest = 0, numAlimentacion = 0, total= 0;
numPrest = $('.input-sodexo').val();
numAlimentacion = $('#sodexo-alimentacion').attr("value");
total= numAlimentacion * (numPrest/100);
return total;
}
calcprestsodexo();
});
