@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 900;
    src: url('fonts/eot/IRANSansWeb(FaNum)_Black.eot');
    src: url('fonts/eot/IRANSansWeb(FaNum)_Black.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('fonts/woff2/IRANSansWeb(FaNum)_Black.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('fonts/woff/IRANSansWeb(FaNum)_Black.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/ttf/IRANSansWeb(FaNum)_Black.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: bold;
    src: url('fonts/eot/IRANSansWeb(FaNum)_Bold.eot');
    src: url('fonts/eot/IRANSansWeb(FaNum)_Bold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('fonts/woff2/IRANSansWeb(FaNum)_Bold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('fonts/woff/IRANSansWeb(FaNum)_Bold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/ttf/IRANSansWeb(FaNum)_Bold.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 500;
    src: url('fonts/eot/IRANSansWeb(FaNum)_Medium.eot');
    src: url('fonts/eot/IRANSansWeb(FaNum)_Medium.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('fonts/woff2/IRANSansWeb(FaNum)_Medium.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('fonts/woff/IRANSansWeb(FaNum)_Medium.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/ttf/IRANSansWeb(FaNum)_Medium.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 300;
    src: url('fonts/eot/IRANSansWeb(FaNum)_Light.eot');
    src: url('fonts/eot/IRANSansWeb(FaNum)_Light.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('fonts/woff2/IRANSansWeb(FaNum)_Light.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('fonts/woff/IRANSansWeb(FaNum)_Light.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/ttf/IRANSansWeb(FaNum)_Light.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 200;
    src: url('fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot');
    src: url('fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('fonts/woff2/IRANSansWeb(FaNum)_UltraLight.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('fonts/woff/IRANSansWeb(FaNum)_UltraLight.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/ttf/IRANSansWeb(FaNum)_UltraLight.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: normal;
    src: url('fonts/eot/IRANSansWeb(FaNum).eot');
    src: url('fonts/eot/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('fonts/woff2/IRANSansWeb(FaNum).woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('fonts/woff/IRANSansWeb(FaNum).woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/ttf/IRANSansWeb(FaNum).ttf') format('truetype');
}
body{
    direction: rtl;
    text-align: right;
    font-family: IRANSans;
}
header {
    background-image: url(images/job-opportunity-page-header.png);
    aspect-ratio: 4;
    background-size: cover;
}

header div {
    position: relative;
    top: 35%;
    right: 6%;
}
@media only screen and (max-width: 600px) {
    header div p {
        font-size: 0.6rem;
    }
}
.container{
    max-width: 900px;
}
.question {
    max-width: 800px;
    position: relative;
    border: 2px solid black;
    padding: 5px;
    margin: 20px auto 0;
    font-size: 15px;
}
.radiobtn {
    position: relative;
    display: block;
}
.radiobtn label {
    display: block;
    background: #e0e2e1;
    color: #444;
    border-radius: 5px;
    padding: 10px;
    padding-right: 35px;
    border: 2px solid #318403;
    margin-bottom: 5px;
    cursor: pointer;
}
.item-price{
    background: gray;
    color: white;
    padding: 3px;
    border-radius: 5px;
}
.radiobtn label:after, .radiobtn label:before {
    content: "";
    position: absolute;
    right: 11px;
    top: 11px;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background: #318403;
}
.radiobtn label:before {
    background: transparent;
    transition: 0.1s width cubic-bezier(0.075, 0.82, 0.165, 1) 0s, 0.3s, height cubic-bezier(0.075, 0.82, 0.165, 2) 0.1s;
    z-index: 2;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: 13px;
    background-position: center;
    width: 0;
    height: 0;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNS4zIDEzLjIiPiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE0LjcuOGwtLjQtLjRhMS43IDEuNyAwIDAgMC0yLjMuMUw1LjIgOC4yIDMgNi40YTEuNyAxLjcgMCAwIDAtMi4zLjFMLjQgN2ExLjcgMS43IDAgMCAwIC4xIDIuM2wzLjggMy41YTEuNyAxLjcgMCAwIDAgMi40LS4xTDE1IDMuMWExLjcgMS43IDAgMCAwLS4yLTIuM3oiIGRhdGEtbmFtZT0iUGZhZCA0Ii8+PC9zdmc+);
}
.radiobtn input[type="radio"] {
    display: none;
    position: absolute;
    width: 100%;
    appearance: none;
}
.radiobtn input[type="radio"]:checked + label {
    background: #b1f595;
    animation-name: blink;
    animation-duration: 1s;
}
.radiobtn input[type="radio"]:checked + label .item-price {
    background: green;
}
.radiobtn input[type="radio"]:checked + label:after {
    background: #318403;
}
.radiobtn input[type="radio"]:checked + label:before {
    width: 20px;
    height: 20px;
}
@keyframes blink {
    0% {
        background-color: #b1f595;
    }
    10% {
        background-color: #deffd0;
    }
    11% {
        background-color: #b1f595;
    }
    29% {
        background-color: #deffd0;
    }
    30% {
        background-color: #b1f595;
    }
    50% {
        background-color: #b1f595;
    }
    45% {
        background-color: #b1f595;
    }
    50% {
        background-color: #b1f595;
    }
    100% {
        background-color: #b1f595;
    }
}
.accumulated-price{
    display: block;
    background: #ffc107;
    color: #444;
    border-radius: 5px;
    padding: 10px;
    padding-right: 35px;
    border: 2px solid #ffc107;
    margin-bottom: 5px;
}
.accumulated-value{
    font-weight: 700;
}
.description{
    text-align: justify;
}
.text-justify{
    text-align: justify;
}