#calculate {padding: 40px 7vw}  #calculate .left .card-calculate {border-radius: 4px;box-shadow: 10px 10px 23px 0 rgba(0, 0, 0, .2);background-color: white;padding: 30px;position: relative;background-repeat: no-repeat;background-size: cover;background-position: center;}  #calculate .card-calculate .form-group label {font-size: 18px;color: white;font-weight: 700;}  #calculate .card-calculate label.custom-control-label::after {cursor: pointer;}  #calculate .card-calculate form {padding: 30px;padding-bottom: 0;}  #calculate .card-calculate form:not(:nth-of-type(2)) {display: none;}  #calculate .card-calculate .form-group {margin-bottom: 25px;}  #calculate .card-calculate .head {height: 155px;padding: 41px 0;font-size: 23px;font-weight: 600;text-align: center;text-shadow: 3px 2px #000;color: white;}  #calculate .card-calculate .head:after {content: "محاسبگر درصد چربی";}  #calculate .jensiat {padding-top: 10px;}  #calculate .jensiat:before {content: "جنسیت :";margin-left: 10px;font-size: 18px;color: #fff;font-weight: 700;}  #calculate .jensiat .custom-radio {line-height: 21px;}  #calculate .btn-me {padding: 7px 20px;border-radius: 4px;background-color: transparent;position: relative;display: inline-block;color: white;font-size: 18px;font-weight: 600;transition: all .5s ease-in-out;outline: none;border: 1px solid #ccc;}  #calculate .btn-me:hover {background-color: black;}  #calculate .right h1 {color: #973f05;font-size: 28px;font-weight: 600;display: inline-block;}  #calculate .right h1:after {content: "";display: block;position: relative;top: 20px;width: 100%;height: 4px;background-color: #973f05;}  #calculate .right h2 {color: #973f05;font-size: 25px;font-weight: 600;display: inline-block;}  #calculate .right h2{margin-top: 20px;}  #calculate .right h2:after {content: "";display: block;position: relative;top: 20px;width: 100%;height: 4px;background-color: #973f05;}  #calculate .right p {text-align: justify;padding-top: 30px;}  @media (min-width: 768px) {  #calculate .card-calculate .head:after {content: "محاسبگر درصد چربی بدن با روش آنتروپومتری";}  #calculate .left {position: sticky;top: 110px;}  }  @media (min-width: 992px) {  #calculate .right {padding-left: 50px;}  #calculate .right h1 {font-size: 2vw;}  #calculate .right h2 {font-size: 1.8vw;}  #calculate .left .card-calculate:before {content: "";display: block;width: 100%;height: 98%;background-image: url(public/images/noBrown.png);position: absolute;top: 60px;left: 5.9%;z-index: -1;}  }  /*card-link*/  #links {padding: 40px 7vw;}  #links .card-link {max-width: 190px;transition: all 0.2s;position: relative;margin: 0 auto;border-radius: 8px;font-family:dana;}  #links .card-inner {width: inherit;height: inherit;background: rgba(210, 0, 0, .05);box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);backdrop-filter: blur(10px);padding: 15px;position: relative;}  #links .card-inner .link-title {text-align: center;padding-bottom: 5px;color: #000;font-size: 14px;margin: 0;}  #links .card-inner .link-text {text-align: center;padding: 15px 0;color: #000;font-size: 12px;margin: 0;}  #links .card-link:hover {transform: scale(1.04) rotate(1deg);}  #links .circle {width: 100px;height: 100px;background: radial-gradient(#973f05, #bd5714);border-radius: 50%;position: absolute;animation: move-up6 2s ease-in infinite alternate-reverse;}  #links .circle:nth-child(1) {top: -25px;left: -25px;}  #links .circle:nth-child(2) {bottom: -25px;right: -25px;animation-name: move-down1;}  @keyframes move-up6 { to {transform: translateY(-10px);} }  @keyframes move-down1 { to {transform: translateY(10px);} }#fat {font-family:dana;position: fixed;width: 100%;padding: 35px;border-radius: 4px;top: 11%;right: 0;left: 0;margin: 0 auto;z-index: 10000000;display: none;opacity: 0;transition-duration: .5s;background-color: #000000;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='365' height='365' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23780000' stroke-width='12.2'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23780000'%3E%3Ccircle cx='769' cy='229' r='9'/%3E%3Ccircle cx='539' cy='269' r='9'/%3E%3Ccircle cx='603' cy='493' r='9'/%3E%3Ccircle cx='731' cy='737' r='9'/%3E%3Ccircle cx='520' cy='660' r='9'/%3E%3Ccircle cx='309' cy='538' r='9'/%3E%3Ccircle cx='295' cy='764' r='9'/%3E%3Ccircle cx='40' cy='599' r='9'/%3E%3Ccircle cx='102' cy='382' r='9'/%3E%3Ccircle cx='127' cy='80' r='9'/%3E%3Ccircle cx='370' cy='105' r='9'/%3E%3Ccircle cx='578' cy='42' r='9'/%3E%3Ccircle cx='237' cy='261' r='9'/%3E%3Ccircle cx='390' cy='382' r='9'/%3E%3C/g%3E%3C/svg%3E");border: 10px solid #780000;animation-name: show;animation-duration: 1s;}  #fat.active {display: block;}  #fat.fade {opacity: 1;}  #fat .save {font-size: 60px;color: #fff;position: absolute;top: -2px;left: 15px;cursor: pointer;transition-duration: 400ms;}  #fat .header span {font-size: 30px;font-weight: bold;color: white;padding: 15px 0;display: block;text-align: center;}  #fat .body {padding-top: 15px;}  #fat .body .btn-me {border-radius: 100%;background-color: #b1211f;display: block;color: white;transition: all .5s ease-in-out;outline: none;border: 2px solid #fff5f5;margin: 0 auto;width: 85px;height: 85px;line-height: 72px;}  #fat .body .btn-me .int {display: block;font-weight: 700;font-size: 30px;direction: ltr;}  #fat .body .content {margin-top: 15px;padding: 15px 0;color: white;}  #fat .body .content h2 {margin-bottom: 50px;font-size: 25px;line-height: 40px;}  #fat .body .content .title {font-size: 25px;}  #fat .body .content .text {font-size: 20px;font-weight: bold;}  #fat .body .content .val {color: #2cbebe;font-size: 18px;display: block;}  @media (min-width: 576px ) {  #fat {width: 400px;}  #fat .header span {font-size: 35px;}  }  @media (min-width: 768px ) {  #fat {width: 500px;}  #fat .header span {font-size: 40px;}  }  @media (min-width: 992px ) {  #fat {width: 600px;}  #fat .header span {font-size: 40px;}  }  @keyframes show { 0% {opacity: 0;transform: translateY(-300%);} 100% {transform: translateY(0%);opacity: 1;} }