#calculate {padding: 0 7vw;padding-top: 40px;padding-bottom: 100px;}  #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 .head {height: 155px;padding: 41px 0;font-size: 28px;font-weight: 600;text-align: center;text-shadow: 3px 2px #000;color: white;}  #calculate .card-calculate .head:after {content: "تقسیم کالری روزانه";}  #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 h2 {color:#141614;font-size: 25px;font-weight: 600;display: inline-block;}  #calculate .right h2:first-of-type ~ h2 {margin-top: 20px;}  #calculate .right h2:after {content: "";display: block;position: relative;top: 20px;width: 100%;height: 4px;background-color: #141614;}  #calculate .right p {text-align: justify;padding-top: 30px;}  @media (min-width: 768px) {  #calculate .card-calculate .head:after {content: "تقسیم کالری روزانه بین درشت مغذی ها";}  }  @media (min-width: 992px) {  #calculate .left {position: sticky;top: 110px;}  #calculate .right {padding-left: 50px;}  #calculate .right h2 {font-size: 1.8vw;}  #calculate .left .card-calculate:before {content: "";display: block;width: 100%;height: 97%;background-image: url(public/images/noBlack.png);position: absolute;top: 63px;left: 5.3%;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(#e39e37, #f5bb65);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);} }#splitter {font-family:dana;position: fixed;width: 100%;padding: 20px;border-radius: 4px;top: 9%;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;}  #content * {direction: ltr !important;font-family: IranSans;}  #content {margin: 0 auto;height: 325px;}  #splitter.active {display: block;}  #splitter.fade {opacity: 1;}  #splitter .header {padding: 12px 0;}  #splitter .header span {font-size: 30px;font-weight: bold;color: white;padding: 15px 0;display: block;text-align: center;}  #splitter .body {padding-top: 15px;}  #splitter .body .col-12 {color: white;font-size: 20px;}  @media (min-width: 576px ) {  #content {height: 335px;}  #splitter {width: 400px;}  #splitter .header span {font-size: 35px;}  }  @media (min-width: 768px ) {  #content {height: 345px;}  #splitter {width: 500px;}  #splitter .header span {font-size: 40px;}  }  @media (min-width: 992px ) {  #content {height: 355px;}  #splitter {width: 600px;}  #splitter .header span {font-size: 40px;}  }  @media (min-width: 1200px ) {  #content {height: 365px;}  }