.infocalldesktop{
    margin-top: 20px !important;
    text-align: center !important;
}


.listcalcu {
    padding: 0;
    list-style: none;
    margin: 0;
    position: relative;
}
.listcalcu li {
    color: #3e3940;
    font-family: 'ralewaysemibold';
    font-size: 0;
    position: relative;
    margin-bottom: 56px;
    padding: 0px 79px 0 21px;
    line-height: 15px;
}
.listcalcu li:before {
    content: '';
    display: block;
    width: 11px;
    height: 11px;
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -10px;
    background-color: #525153;
}
.listcalcu li label {
    font-size: 18px;
}
.listcalcu li input {
    font-size: 19px;
    border: 0;
    border-bottom: 2px solid #3e3940;
    width: 50px;
    position: absolute;
    right: 0;
    bottom: 5px;
    background-color: transparent;
    outline: none;
    text-align: center;
    font-family: 'Open Sans Extra Bold';
}
/**/
/**/
.listcalcu li input::-webkit-input-placeholder {
   text-align: center;
}

.listcalcu li input:-moz-placeholder { /* Firefox 18- */
   text-align: center;  
}

.listcalcu li input::-moz-placeholder {  /* Firefox 19+ */
   text-align: center;  
}

.listcalcu li input:-ms-input-placeholder {  
   text-align: center; 
}
.wrapper-list {
    margin-top: 60px;
}
.wrapper {
    position: relative;
    margin-top: 20px;
}
.wrapper input[type="checkbox"], 
.wrapper input[type="radio"] {
    visibility: hidden;
    height: 0;
    padding: 2px;
    background-color: black;
    position: absolute;
}
.wrapper input[type='radio']+label, .wrapper input[type='checkbox']+label {
    width: 60px;
    height: 60px;
    color: #fff;
    background-color: #58585a;
    /* border: 6.5px solid #ecedef; */
    display: inline-block;
    vertical-align: middle;
    border-radius: 100%;
    cursor: pointer;
    font-size: 35px;
    font-family: 'Open Sans Bold';
    text-align: center;
    line-height: 57px;
    /*transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;*/
}
label.error {
    font-size: 11px !important;
    font-family: 'Open Sans';
    display: block;
    color: red;
    position: absolute;
    bottom: -11px;
    left: 30px;
}
.wrapper input[type='radio']:checked+label, .wrapper input[type='checkbox']:checked+label {
    background-color: #cfde5d;
}
.list-radd {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 0;
}
.list-radd li {
    display: inline-block;
    vertical-align: top;
    margin:0 25px;
}
.list-radd li span {
    color: #525153;
    font-size: 18px;
    margin: 10px 0 0 0;
    display: block;
    font-family: 'Raleway Black';
}
.wrapperRad {
    margin-top: -22px;
    text-align: center;
}
.wrapperRad h4 {
    /*font-family: 'Raleway Black';*/
    color: #525153;
    font-size: 20px;
    margin: 0 0 0px 0;
    font-family: 'Open Sans Bold';
    position: relative;
    z-index: 999;
    line-height: 23px;
}
.inner-calc img {
    max-width: 100%;
    display: block;
    position: relative;
    margin: 0 auto;
}
.theList {
    margin-top: 30px;
}
.thesubmit button {
    width: auto;
    padding: 8px 20px;
    border: 0;
    font-family: 'ralewaysemibold';
    font-size: 20px;
    outline: none;
}

.theCalcu {
    position: relative;
    margin-top: -10px;
}
.theNumber {
    position: absolute;
    left: 13%;
    right: 0;
    bottom: 6%;
    font-size: 22px;
    font-family: 'Open Sans Bold';
}
.theNumber2{
    position: absolute;
    right: 20%;
    /* right: 0; */
    left: 0;
    bottom: 12%;
    font-size: 22px;
    font-family: 'Open Sans Bold';
    transform: rotatey(180deg);
}
.containerPig {
    position: relative;
    text-align: center;
    padding: 0;
}

.secondpig{
    position: absolute;
    top: 0;
    width: 100%;
}


/**
 * FLIP
 */

.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
}

.flip-container .flipper {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.flip-container.hover .flipper {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;

    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;

    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;
  
    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;

    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}
.front{
    z-index:2;
}

.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;

    /*position: absolute;*/
}
.front .face{
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.back .face{
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.girar{
    position: absolute;
    width: 20px;
    height: 20px;
    left: 26%;
    bottom: 23%;
    cursor:pointer;
    z-index:2;
}
.textspend{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 13%;
    margin: auto;
    font-size: 21px;
    font-family: 'Open Sans';
    color: #525153;
    display: none;
    text-align: center;
}
.girar img{
    width:100%;
}
.sizecal svg{
    width:40%;
    margin-top: -40px;
    padding-bottom: 80px;
}
@media (max-width: 1025px){
    .listcalcu li{
        margin-bottom: 34px;
    }
    .sizecal svg{
        margin-top:-48px;
    }
    .theCalcu{
        margin-top:25px;
    }
    .girar{
        left: 24%;
        bottom: 30%;
    }
}
@media (max-width: 991px) {
    .sizecal svg {
        width: 66%;
        margin-top: -24px;
    }
    .girar {
        left: 7%;
        bottom: 37%;
    }
    .front .face{
        padding-bottom:36px;
    }
    .textspend{
        bottom: 21%;
    }
    .theNumber{
        bottom: 10%;
    }
    .theNumber2{
        right:4%;
        bottom:4%;
    }
}
/**/

@media (max-width: 991px) {
    .wrapperRad h4 {
        font-size: 18px;
        margin: 0 0 10px 0;
    }
    .list-radd li {
        margin: 0 5px;
    }
    .wrapper {
        margin-top: 5px;
    }
    .wrapper input[type='radio']+label, .wrapper input[type='checkbox']+label {
        width: 50px;
        height: 50px;
        font-size: 27px;
        line-height: 49px;
    }
    .list-radd li span {
        font-size: 12px;
    }
}

@media (max-width: 960px){
    .thesubmit button{
        width: 153px;
        line-height: 19px;
    }
}
@media (max-width: 767px) {
    .wrapperRad {
        margin-top: 20px;
    }
    .list-radd li {
        margin: 0 5px;
    }
}
@media (max-width: 480px){
    .theNumber,.textspend{
        font-size:19px;
    }
    .theNumber2 {
        left: -33% !important;
        bottom: 14% !important;
    }
    .theNumber{
        bottom:10%;
        font-size:18px;
        left: 24%;
    }
    .girar {
        left: 9%;
        bottom: 35%;
    }
    .containerPig svg{
        width: 65% !important;
    }
    .front .face{
        padding-bottom:0px;
    }
    .wrapperRad{
        margin-top:-26px;
    }

}
@media (max-width: 380px){
    .theNumber{
        left: 32%;
    }
    .girar {
        left: 8%;
        bottom: 41%;
    }
    .theNumber2 {
        left: -19% !important;
        bottom: 15% !important;
    }
}
@media (max-width: 322px){
    
}