@font-face {
    font-family: "ykannumber";
    src: url(/Content/font/YekanNumbers.eot);
    src: url(/Content/font/YekanNumbers.eot?#iefix) format("embedded-opentype"), url(/Content/font/YekanNumbers.woff) format("woff"), url(/Content/font/YekanNumbers.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: sns;
    font-style: normal;
    font-weight: 700;
    src: url(/Content/font/Bold.eot);
    src: url(/Content/font/Bold.eot?#iefix) format("embedded-opentype"), url(/Content/font/Bold.woff) format("woff"), url(/Content/font/Bold.ttf) format("truetype");
}

@font-face {
    font-family: sns;
    font-style: normal;
    font-weight: 500;
    src: url(/Content/font/Medium.eot);
    src: url(/Content/font/Medium.eot?#iefix) format("embedded-opentype"), url(/Content/font/Medium.woff) format("woff"), url(/Content/font/Medium.ttf) format("truetype");
}

@font-face {
    font-family: sns;
    font-style: normal;
    font-weight: 300;
    src: url(/Content/font/Light.eot);
    src: url(/Content/font/Light.eot?#iefix) format("embedded-opentype"), url(/Content/font/Light.woff) format("woff"), url(/Content/font/Light.ttf) format("truetype");
}

@font-face {
    font-family: sns;
    font-style: normal;
    font-weight: 200;
    src: url(/Content/font/UltraLight.eot);
    src: url(/Content/font/UltraLight.eot?#iefix) format("embedded-opentype"), url(/Content/font/UltraLight.woff) format("woff"), url(/Content/font/UltraLight.ttf) format("truetype");
}

@font-face {
    font-family: sns;
    font-style: normal;
    font-weight: 400;
    src: url(/Content/font/sns.eot);
    src: url(/Content/font/sns.eot?#iefix) format("embedded-opentype"), url(/Content/font/sns.woff) format("woff"), url(/Content/font/sns.ttf) format("truetype");
}

@-webkit-keyframes fade-in {
    from {
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
}

main,
#bg-anim,
aside,
#submit a::before,
#submit a::after,
footer,
footer::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

html {
    background: #fff;
}

@media only screen and (max-width: 1400px) {
    html {
        font-size: 90%;
    }
}

@media only screen and (max-width: 1250px) {
    html {
        font-size: 80%;
    }
}

@media only screen and (max-width: 950px) {
    html {
        font-size: 100%;
    }
}

@media only screen and (max-width: 750px) {
    html {
        font-size: 70%;
    }
}

body {
    overflow: hidden;
    direction: rtl;
    font-family: ykannumber,sns;
    margin: 0;
}

main {
    -webkit-box-shadow: 0 -5rem 10rem inset rgba(0, 35, 115, .3);
    box-shadow: 0 -5rem 10rem inset rgba(0, 35, 115, .3);
    -webkit-perspective: 800px;
    perspective: 800px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 5;
    padding-bottom: 80px;
    padding-bottom: 5rem;
    overflow: auto;
}

@media only screen and (max-width: 950px) {
    main {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

@-webkit-keyframes bg-anim {
    from {
        -webkit-transform: scaleX(1.2);
        transform: scaleX(1.2);
        opacity: 0;
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}

@keyframes bg-anim {
    from {
        -webkit-transform: scaleX(1.2);
        transform: scaleX(1.2);
        opacity: 0;
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}

#bg-anim {
    z-index: 0;
    -webkit-animation: bg-anim .7s forwards;
    animation: bg-anim .7s forwards;
    background: -webkit-gradient(linear, left top, left bottom, from(#b0e5ff), color-stop(#77c6ff), color-stop(#46a1ff), color-stop(#3765e6), to(#243fa2));
    background: linear-gradient(#b0e5ff, #77c6ff, #46a1ff, #3765e6, #243fa2);
    background: linear-gradient(340deg, #b0e5ff, #77c6ff, #46a1ff, #3765e6, #243fa2);
}

@-webkit-keyframes separator {
    from {
        -webkit-transform: scaleY(0.3);
        transform: scaleY(0.3);
        opacity: 0;
    }
    to {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

@keyframes separator {
    from {
        -webkit-transform: scaleY(0.3);
        transform: scaleY(0.3);
        opacity: 0;
    }
    to {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

#separator {
    height: 480px;
    height: 30rem;
    width: 1px;
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(20%, #fff), color-stop(80%, #fff), to(transparent));
    background: linear-gradient(transparent, #fff 20%, #fff 80%, transparent);
    opacity: 0.3;
    margin: 0 160px;
    margin: 0 10rem;
    position: relative;
    -webkit-animation: separator 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    animation: separator 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

@media only screen and (max-width: 950px) {
    #separator {
        display: none;
    }
}

#separator::before,
#separator::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 128px;
    width: 8rem;
    background: radial-gradient(#fff, transparent 3rem) no-repeat;
    opacity: 0.2;
}

#separator::before {
    background-position: -64px 50%;
    background-position: -4rem 50%;
    left: 0;
}

#separator::after {
    width: 96px;
    width: 6rem;
    background-image: radial-gradient(#000, transparent 2.5rem);
    background-position: 48px 50%;
    background-position: 3rem 50%;
    right: 1px;
    opacity: 0.15;
}

/*rtl:raw:
#separator::before {
  background-position: 4rem 50%;
}

#separator::after {
  background-position: -3rem 50%;
}
*/

@-webkit-keyframes aside {
    from {
        opacity: 0;
    }
}

@keyframes aside {
    from {
        opacity: 0;
    }
}

aside {
    top: auto;
    bottom: 96px;
    bottom: 6rem;
    padding: 24px 48px;
    padding: 1.5rem 3rem;
    text-align: center;
    background: rgba(0, 0, 0, .5);
    color: rgba(255, 255, 255, .7);
    z-index: 5;
    -webkit-animation: aside 1s both;
    animation: aside 1s both;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

#btnSubmit {
    position: absolute;
    top: -200px;
    visibility: hidden;
}

#container.branded {
    height: 100vh;
}

#container.branded #brandingLogoBar {
    width: 368px;
    width: 23rem;
    height: 160px;
    background: none !important;
}

#container.branded #brandingLogo {
    height: 100%;
    width: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#container.branded #bg-anim {
    display: none;
}

#cloudBG {
    display: none;
    opacity: .15;
}

#cloudBG .path-1,
#cloudBG .path-2 {
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 5px;
}

#cloudBG .path-2 {
    opacity: 0.58;
}

#cloudBG .path-4 {
    fill: #fff;
}

#container.cloudBg #cloudBG {
    display: block;
    position: absolute;
    bottom: 0;
    -webkit-animation: bg-anim .7s forwards;
    animation: bg-anim .7s forwards;
}

@-webkit-keyframes logo-anim {
    from {
        -webkit-transform: translateX(-2rem);
        transform: translateX(-2rem);
        opacity: 0;
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes logo-anim {
    from {
        -webkit-transform: translateX(-2rem);
        transform: translateX(-2rem);
        opacity: 0;
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

#main_logo {
    -webkit-animation: logo-anim 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    animation: logo-anim 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

@-webkit-keyframes filled-anim {
    to {
        opacity: 1;
    }
}

@keyframes filled-anim {
    to {
        opacity: 1;
    }
}

@-webkit-keyframes stroked-anim {
    to {
        opacity: 0;
    }
}

@keyframes stroked-anim {
    to {
        opacity: 0;
    }
}

#main_logo svg#shadowFilter {
    width: 0;
}

#main_logo svg:not(#shadowFilter) {
    width: 400px;
    width: 25rem;
}

#main_logo svg:not(#shadowFilter) #logo_stroked {
    opacity: 1;
    -webkit-animation: stroked-anim .5s forwards;
    animation: stroked-anim .5s forwards;
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
}

#main_logo svg:not(#shadowFilter) #logo_stroked g {
    fill: none;
    stroke: rgba(255, 255, 255, .6);
    stroke-width: 1px;
}

#main_logo svg:not(#shadowFilter) #logo_filled polygon:not(.st-type) {
    opacity: 0;
    -webkit-animation: filled-anim 1s forwards;
    animation: filled-anim 1s forwards;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

#main_logo svg:not(#shadowFilter) #logo_filled polygon.st1 {
    fill: #D9DADA;
    -webkit-animation-delay: 0;
    animation-delay: 0;
}

#main_logo svg:not(#shadowFilter) #logo_filled polygon.st2 {
    fill: #BABCBE;
    -webkit-animation-delay: 0;
    animation-delay: 0;
}

#main_logo svg:not(#shadowFilter) #logo_filled polygon.st3 {
    fill: #919495;
    -webkit-animation-delay: 0;
    animation-delay: 0;
}

#main_logo svg:not(#shadowFilter) #logo_filled polygon.st4 {
    fill: #781217;
    -webkit-animation-delay: 0;
    animation-delay: 0;
}

#main_logo svg:not(#shadowFilter) #logo_filled polygon.st5 {
    fill: #9C2122;
    -webkit-animation-delay: 0;
    animation-delay: 0;
}

#main_logo svg:not(#shadowFilter) #logo_filled polygon.st6 {
    fill: #E8282B;
    -webkit-animation-delay: 0;
    animation-delay: 0;
}

#main_logo svg:not(#shadowFilter) #logo_filled polygon.st7 {
    fill: #781217;
    -webkit-animation-delay: 0;
    animation-delay: 0;
}

#main_logo svg:not(#shadowFilter) #logo_filled polygon.st8 {
    fill: #919495;
    -webkit-animation-delay: 0;
    animation-delay: 0;
}

#main_logo svg:not(#shadowFilter) #logo_filled .st-type {
    fill: #fff;
    opacity: 0;
    -webkit-animation: filled-anim 1s forwards;
    animation: filled-anim 1s forwards;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
    -webkit-filter: url(#logo_drop_shadow);
    filter: url(#logo_drop_shadow);
}

#main_logo svg:not(#shadowFilter) #logo_filled .st-type.cloud {
    fill: #b6ecff;
}

#main_logo svg:not(#shadowFilter) #type_top path {
    stroke-dasharray: 180;
    stroke-dashoffset: 180;
    -webkit-animation: logo-strokes-top_normal 1.5s;
    animation: logo-strokes-top_normal 1.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes logo-strokes-top_normal {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes logo-strokes-top_normal {
    to {
        stroke-dashoffset: 0;
    }
}

#main_logo svg:not(#shadowFilter) #type_top path.long-path {
    stroke-dasharray: 450;
    stroke-dashoffset: 450;
    -webkit-animation: logo-strokes-top_long 1.5s;
    animation: logo-strokes-top_long 1.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes logo-strokes-top_long {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes logo-strokes-top_long {
    to {
        stroke-dashoffset: 0;
    }
}

#main_logo svg:not(#shadowFilter) #type_top path.small-path {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    -webkit-animation: logo-strokes-top_small 1.5s;
    animation: logo-strokes-top_small 1.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes logo-strokes-top_small {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes logo-strokes-top_small {
    to {
        stroke-dashoffset: 0;
    }
}

#main_logo svg:not(#shadowFilter) #type_bottom path {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    -webkit-animation: logo-strokes-bottom_normal 1.5s;
    animation: logo-strokes-bottom_normal 1.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes logo-strokes-bottom_normal {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes logo-strokes-bottom_normal {
    to {
        stroke-dashoffset: 0;
    }
}

#main_logo svg:not(#shadowFilter) #type_bottom path.long-path {
    stroke-dasharray: 370;
    stroke-dashoffset: 370;
    -webkit-animation: logo-strokes-bottom_long 1.5s;
    animation: logo-strokes-bottom_long 1.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes logo-strokes-bottom_long {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes logo-strokes-bottom_long {
    to {
        stroke-dashoffset: 0;
    }
}

#main_logo svg:not(#shadowFilter) #type_bottom path.small-path {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    -webkit-animation: logo-strokes-bottom_small 1.5s;
    animation: logo-strokes-bottom_small 1.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes logo-strokes-bottom_small {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes logo-strokes-bottom_small {
    to {
        stroke-dashoffset: 0;
    }
}

#main_logo svg:not(#shadowFilter) #logo_shape #main_bottom {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    -webkit-animation: logo-strokes-main_bottom 1.5s;
    animation: logo-strokes-main_bottom 1.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 0.075s;
    animation-delay: 0.075s;
}

@-webkit-keyframes logo-strokes-main_bottom {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes logo-strokes-main_bottom {
    to {
        stroke-dashoffset: 0;
    }
}

#main_logo svg:not(#shadowFilter) #logo_shape #main_top {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    -webkit-animation: logo-strokes-main_top 1.5s;
    animation: logo-strokes-main_top 1.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes logo-strokes-main_top {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes logo-strokes-main_top {
    to {
        stroke-dashoffset: 0;
    }
}

#main_logo svg:not(#shadowFilter) #logo_shape #middle {
    stroke-dasharray: 150;
    stroke-dashoffset: 150;
    -webkit-animation: logo-strokes-middle 0.5s;
    animation: logo-strokes-middle 0.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 0.75s;
    animation-delay: 0.75s;
}

@-webkit-keyframes logo-strokes-middle {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes logo-strokes-middle {
    to {
        stroke-dashoffset: 0;
    }
}

#main_logo svg:not(#shadowFilter) #logo_shape #left_small_v {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    -webkit-animation: logo-strokes-left_small_v 0.5s;
    animation: logo-strokes-left_small_v 0.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 0.75s;
    animation-delay: 0.75s;
}

@-webkit-keyframes logo-strokes-left_small_v {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes logo-strokes-left_small_v {
    to {
        stroke-dashoffset: 0;
    }
}

#main_logo svg:not(#shadowFilter) #logo_shape #right_small_v {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    -webkit-animation: logo-strokes-right_small_v 0.5s;
    animation: logo-strokes-right_small_v 0.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 0.75s;
    animation-delay: 0.75s;
}

@-webkit-keyframes logo-strokes-right_small_v {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes logo-strokes-right_small_v {
    to {
        stroke-dashoffset: 0;
    }
}

/*rtl:raw:
#main_logo svg {
  display: none;
}
#main_logo {
  background: no-repeat 50% 50%;
  background-image: svg-load('rahkaran-logo-en.svg');
  background-size: contain;
  width: 25rem;
  height: 10rem;
}
*/

@-webkit-keyframes submit-button {
    from {
        -webkit-transform: translateX(1rem);
        transform: translateX(1rem);
        opacity: 0;
    }
}

@keyframes submit-button {
    from {
        -webkit-transform: translateX(1rem);
        transform: translateX(1rem);
        opacity: 0;
    }
}

#submit a {
    display: block;
    cursor: pointer;
    width: 64px;
    width: 4rem;
    height: 64px;
    height: 4rem;
    text-align: center;
    position: relative;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
    transition: opacity 0.2s, -webkit-transform 0.2s;
    transition: opacity 0.2s, transform 0.2s;
    transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s;
    opacity: 0.7;
}

#submit a::before,
#submit a::after {
    content: '';
    border-radius: 100%;
    border: 1px solid rgba(255, 255, 255, .3);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0;
    -webkit-transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    z-index: -1;
}

#submit a::before {
    background: -webkit-gradient(linear, left top, right bottom, from(rgba(15, 200, 255, .5)), to(rgba(0, 250, 20, .5)));
    background: linear-gradient(to right bottom, rgba(15, 200, 255, .5), rgba(0, 250, 20, .5));
    -webkit-box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, .1);
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, .1);
}

#submit a::after {
    border: 1px solid rgba(255, 255, 255, .1);
    -webkit-transform: scale(1.7);
    transform: scale(1.7);
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

#submit a svg {
    margin: 8px;
    margin: .5rem;
    width: 48px;
    width: 3rem;
    height: 48px;
    height: 3rem;
    -webkit-animation: submit-button 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    animation: submit-button 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    -webkit-animation-delay: .55s;
    animation-delay: .55s;
}

#submit a svg path {
    fill: #fff;
    -webkit-filter: url(#submit_drop_shadow);
    filter: url(#submit_drop_shadow);
}

#submit a:hover {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 1;
}

#submit a:hover::before {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

#submit a:hover::after {
    opacity: 1;
    -webkit-transform: scale(1.35);
    transform: scale(1.35);
}

.loading #submit a {
    background: url("data:image/svg+xml;charset=utf-8,%3C!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL --%3E %3Csvg width='120' height='30' viewBox='0 0 120 30' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Ccircle cx='105' cy='15' r='10'%3E %3Canimate attributeName='r' from='15' to='15' begin='0s' dur='1.5s' values='10;12;10;10;10' calcMode='linear' repeatCount='indefinite'/%3E %3Canimate attributeName='fill-opacity' from='1' to='1' begin='0s' dur='1.5s' values='.1;1;.1;.1;.1' calcMode='linear' repeatCount='indefinite'/%3E %3C/circle%3E %3Ccircle cx='60' cy='15' r='10' fill-opacity='0.1'%3E %3Canimate attributeName='r' from='15' to='15' begin='0.3s' dur='1.5s' values='10;12;10;10;10' calcMode='linear' repeatCount='indefinite'/%3E %3Canimate attributeName='fill-opacity' from='1' to='1' begin='0.3s' dur='1.5s' values='.1;1;.1;.1;.1' calcMode='linear' repeatCount='indefinite'/%3E %3C/circle%3E %3Ccircle cx='15' cy='15' r='12' fill-opacity='0.1'%3E %3Canimate attributeName='r' from='15' to='15' begin='0.6s' dur='1.5s' values='10;12;10;10;10' calcMode='linear' repeatCount='indefinite'/%3E %3Canimate attributeName='fill-opacity' from='1' to='1' begin='0.6s' dur='1.5s' values='.1;1;.1;.1;.1' calcMode='linear' repeatCount='indefinite'/%3E %3C/circle%3E %3C/svg%3E") no-repeat 50% 50%;
    background-size: 3rem;
    pointer-events: none;
}

.loading #submit a svg {
    opacity: 0;
}

/*rtl:raw:
body #submit a svg {
  transform: rotate(180deg);
  animation: none;
}
*/

@-webkit-keyframes footer {
    from {
        -webkit-transform: translateY(1rem);
        transform: translateY(1rem);
        opacity: 0;
    }
}

@keyframes footer {
    from {
        -webkit-transform: translateY(1rem);
        transform: translateY(1rem);
        opacity: 0;
    }
}

@-webkit-keyframes footer-bg {
    from {
        -webkit-transform: translateY(3rem);
        transform: translateY(3rem);
        opacity: 0;
    }
}

@keyframes footer-bg {
    from {
        -webkit-transform: translateY(3rem);
        transform: translateY(3rem);
        opacity: 0;
    }
}

footer {
    height: 96px;
    height: 6rem;
    top: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    z-index: 5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 16px 32px;
    padding: 1rem 2rem;
    color: #fff;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-animation: footer 1s;
    animation: footer 1s;
}

footer::before {
    content: '';
    z-index: -1;
    background: rgba(0, 0, 0, .3) -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .1)), color-stop(0.4rem, transparent));
    background: rgba(0, 0, 0, .3) linear-gradient(rgba(0, 0, 0, .1), transparent 0.4rem);
    -webkit-animation: footer-bg .5s;
    animation: footer-bg .5s;
}

footer div+div {
    margin-right: 32px;
    margin-right: 2rem;
}

footer div:last-of-type {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

@media only screen and (max-width: 950px) {
    footer {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        height: auto;
        display: none;
    }
    footer div {
        margin: 0 !important;
    }
}

footer>div {
    opacity: 0.9;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

footer:hover>div {
    opacity: 1;
}

footer div.company a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 8px 16px;
    padding: .5rem 1rem;
    border-radius: .4rem;
    border: 1px solid transparent;
    color: #fff;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    cursor: pointer;
}

footer div.company:not(.site) a::after {
    content: '';
    width: 14.4px;
    width: .9rem;
    height: 14.4px;
    height: .9rem;
    background: no-repeat 50% 50%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3C!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E %3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38.4 23.1' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .st0{fill:%23FFFFFF;} %3C/style%3E %3Cpath class='st0' d='M38.4,3.9L34.5,0L19.2,15.3L3.9,0L0,3.9l19.2,19.2L38.4,3.9z'/%3E %3C/svg%3E");
    background-size: contain;
    margin-right: 8px;
    margin-right: .5rem;
    opacity: 0.8;
}

footer div.company.site a {
    text-decoration: none;
}

footer div.company a:hover {
    border-color: rgba(255, 255, 255, .3);
}

footer div.company a:active {
    background-color: rgba(255, 255, 255, .1);
}

footer div.company select {
    font-size: 16px;
    font-size: 1rem;
    font-family: ykannumber,sns;
    padding: 8px 16px;
    padding: .5rem 1rem;
    display: none;
    border-radius: .3rem;
    outline: none;
    border: none;
}

footer div.company.select a {
    display: none;
}

footer div.company.select select {
    display: block;
}

footer div.language {
    font-size: 12.8px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, .8);
    margin-right: 64px;
    margin-right: 4rem;
    padding-right: 32px;
    padding-right: 2rem;
    background: no-repeat 100% 50%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3C!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E %3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .st0{opacity:0.7;fill:%23FFFFFF;} %3C/style%3E %3Cpath class='st0' d='M12.5,0c-0.2,0-0.3,0-0.5,0s-0.3,0-0.5,0C5.1,0.3,0,5.5,0,12s5.1,11.7,11.5,12c0.2,0,0.3,0,0.5,0s0.3,0,0.5,0 C18.9,23.7,24,18.5,24,12S18.9,0.3,12.5,0z M21.8,10.9h-4.3c-0.2-3.7-1.7-6.6-2.9-8.4C18.4,3.5,21.3,6.8,21.8,10.9z M12,2.8 c1.1,1.4,2.9,4.3,3.2,8.1H8.8C9.1,7.1,10.9,4.2,12,2.8z M15.2,13.1c-0.3,3.8-2.2,6.7-3.2,8.1c-1.1-1.4-2.9-4.3-3.2-8.1H15.2z M9.5,2.5c-1.2,1.8-2.7,4.8-2.9,8.4H2.2C2.7,6.8,5.6,3.5,9.5,2.5z M2.2,13.1h4.3c0.2,3.7,1.7,6.6,2.9,8.4 C5.6,20.5,2.7,17.2,2.2,13.1z M14.5,21.5c1.2-1.8,2.7-4.8,2.9-8.4h4.3C21.3,17.2,18.4,20.5,14.5,21.5z'/%3E %3C/svg%3E");
    background-size: 1.3rem;
}

footer div.language ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    list-style: none;
    margin: 0;
    padding: 0;
}

footer div.language ul a {
    display: block;
    text-decoration: none;
    padding: 8px 4.8px;
    padding: .5rem .3rem;
    margin: 0 4.8px;
    margin: 0 .3rem;
    color: rgba(255, 255, 255, .9);
    cursor: pointer;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, .4);
}

footer div.language ul a.login-other-language {
    color: rgba(255, 255, 255, .5);
    border-bottom: none;
}

footer div.language ul a:hover {
    color: #fff;
}

footer .sg-logo {
    display: block;
    width: 112px;
    width: 7rem;
    height: 64px;
    height: 4rem;
    background: url(/Content/login2/rahneshan.svg) 50% 50% no-repeat;
    background-size: contain;
    opacity: 0.8;
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

/*rtl:raw:
footer .sg-logo {
  background-image: svg-load('sg-logo-en.svg');
}
*/

@-webkit-keyframes form {
    0% {
        -webkit-transform: translateX(4rem);
        transform: translateX(4rem);
        opacity: 0;
    }
    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes form {
    0% {
        -webkit-transform: translateX(4rem);
        transform: translateX(4rem);
        opacity: 0;
    }
    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes form-field {
    0% {
        -webkit-transform: translateX(1rem);
        transform: translateX(1rem);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes form-field {
    0% {
        -webkit-transform: translateX(1rem);
        transform: translateX(1rem);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes warning {
    from {
        opacity: 0;
        background-color: transparent;
    }
}

@keyframes warning {
    from {
        opacity: 0;
        background-color: transparent;
    }
}

#form {
    /*&::before, &::after {
    @extend %fill-parent;
    content: '';
  }

  &::before {
  }

  &::after {
    background: url(assets/loading.svg) no-repeat 60% 50%;
    background-size: 7rem;
  }*/
}

#form>div {
    -webkit-animation: form 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    animation: form 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

#form>div h1,
#form>div h2 {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 20.8px;
    font-size: 1.3rem;
}

@media only screen and (max-width: 950px) {
    #form>div h1,
    #form>div h2 {
        text-align: center;
    }
}

#form>div h1 {
    text-shadow: 0 3px 5px rgba(0, 0, 0, .1);
    -webkit-animation: fade-in 1s;
    animation: fade-in 1s;
}

@media only screen and (max-width: 950px) {
    #form>div h1 {
        margin-top: 2rem;
        padding: .5rem;
    }
}

#form>div h2 {
    font-size: 16px;
    font-size: 1rem;
    font-weight: normal;
    margin: 11.2px 0 48px;
    margin: .7rem 0 3rem;
    color: #fff;
    opacity: 0.8;
    -webkit-animation: fade-in 2s;
    animation: fade-in 2s;
}

#form>div .form-fields>div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 60.8px;
    padding-right: 3.8rem;
    border-radius: .3rem;
    margin: 24px 0;
    margin: 1.5rem 0;
    position: relative;
    overflow: hidden;
    -webkit-box-shadow: 0 0 0.2rem rgba(255, 255, 255, 0), 0 0.7rem 1rem rgba(0, 0, 0, .05);
    box-shadow: 0 0 0.2rem rgba(255, 255, 255, 0), 0 0.7rem 1rem rgba(0, 0, 0, .05);
    -webkit-transition: -webkit-box-shadow .5s;
    transition: -webkit-box-shadow .5s;
    transition: box-shadow .5s;
    transition: box-shadow .5s, -webkit-box-shadow .5s;
    -webkit-animation: form-field .7s both;
    animation: form-field .7s both;
    -webkit-animation-delay: .15s;
    animation-delay: .15s;
}

#form>div .form-fields>div:last-of-type {
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
    margin-bottom: 0;
}

#form>div .form-fields>div::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    width: 60.8px;
    width: 3.8rem;
    background: rgba(0, 0, 0, .3) 50% 50% no-repeat;
    background-size: 1.6rem;
    opacity: 0.7;
    border-radius: 0 .3rem .3rem 0;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

#form>div .form-fields>div:focus-within {
    -webkit-box-shadow: 0 0 0.5rem rgba(255, 255, 255, .7), 0 0.8rem 1.3rem rgba(0, 0, 0, .1);
    box-shadow: 0 0 0.5rem rgba(255, 255, 255, .7), 0 0.8rem 1.3rem rgba(0, 0, 0, .1);
}

#form>div .form-fields>div:focus-within::before {
    opacity: 0.8;
    background-color: rgba(0, 0, 0, .4);
}

#form>div .form-fields>div:hover::before {
    background-color: rgba(0, 0, 0, .4);
}

#form>div .form-fields>div.UserName::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.85' height='27.85' viewBox='0 0 27.85 27.85'%3E %3Cg id='person'%3E %3Cg id='Group_22' data-name='Group 22'%3E %3Cpath id='Path_886' data-name='Path 886' d='M18.8,17.174a9.161,9.161,0,0,0,4.41-7.891,9.283,9.283,0,1,0-18.567,0,9.161,9.161,0,0,0,4.41,7.891A14.351,14.351,0,0,0,0,27.85H2.321a11.894,11.894,0,0,1,23.208,0H27.85A13.976,13.976,0,0,0,18.8,17.174ZM6.962,9.283a6.962,6.962,0,1,1,6.962,6.962A6.983,6.983,0,0,1,6.962,9.283Z' fill='%23fff'/%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
}

#form>div .form-fields>div.password::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28.322' height='29.593' viewBox='0 0 28.322 29.593'%3E %3Cg id='Group_58' data-name='Group 58' transform='translate(-11 0)' fill='%23fff'%3E %3Cpath id='Path_939' data-name='Path 939' d='M25.369,194.947H13.358v-8.2H25.369ZM15.225,184.393a4.146,4.146,0,0,1,8.288,0Zm-2.364,0c0,.1-1.7-.433-1.861,1.179v10.554a1.177,1.177,0,0,0,1.179,1.179H26.548a1.177,1.177,0,0,0,1.179-1.179V185.572c-.15-1.584-1.861-1.1-1.861-1.179,0,0-.5-6.393-6.5-6.393S12.861,184.393,12.861,184.393Z' transform='translate(0 -167.712)'/%3E %3Cg id='Group_57' data-name='Group 57' transform='translate(11)'%3E %3Cpath id='Path_940' data-name='Path 940' d='M34.767,14.415a4.563,4.563,0,0,0,4.555-4.555V4.555A4.563,4.563,0,0,0,34.767,0H15.555A4.563,4.563,0,0,0,11,4.555V9.861a4.219,4.219,0,0,0,1.929,3.72l.117.06a5.532,5.532,0,0,1,1.287-1.946l-.148-.118a2.217,2.217,0,0,1-.827-1.717V4.555a2.2,2.2,0,0,1,2.2-2.2H34.767a2.2,2.2,0,0,1,2.2,2.2V9.861a2.2,2.2,0,0,1-2.2,2.2h-9.9l-.1,0a7.488,7.488,0,0,1,1.149,2.357Z' transform='translate(-11)'/%3E %3Ccircle id='Ellipse_83' data-name='Ellipse 83' cx='1.635' cy='1.635' r='1.635' transform='translate(5.359 5.573)'/%3E %3Ccircle id='Ellipse_84' data-name='Ellipse 84' cx='1.635' cy='1.635' r='1.635' transform='translate(19.231 5.573)'/%3E %3Ccircle id='Ellipse_85' data-name='Ellipse 85' cx='1.635' cy='1.635' r='1.635' transform='translate(12.295 5.573)'/%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
}

#form>div .form-fields>div input {
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 320px;
    width: 20rem;
    background: rgba(255, 255, 255, .8);
    border: none;
    padding: 27.2px 16px 11.2px 16px;
    padding: 1.7rem 1rem .7rem 1rem;
    outline: none;
    font-size: 20.8px;
    font-size: 1.3rem;
    -webkit-transition: background-color 0.5s;
    transition: background-color 0.5s;
}

#form>div .form-fields>div input:focus {
    background-color: #fff;
}

#form>div .form-fields>div input:-webkit-autofill {
    content: "\feff";
    -webkit-transition: background-color 3s;
    transition: background-color 3s;
}

#form>div .form-fields>div label {
    position: absolute;
    top: 20.8px;
    top: 1.3rem;
    right: 76.8px;
    right: 4.8rem;
    font-size: 16px;
    font-size: 1rem;
    opacity: 0.4;
    pointer-events: none;
    -webkit-transition: all .2s;
    transition: all .2s;
}

#form>div .form-fields>div:focus-within label,
#form>div .form-fields>div.filled label {
    top: 12.8px;
    top: .8rem;
    font-size: 11.2px;
    font-size: .7rem;
    opacity: 0.5;
}

#form>div .form-fields>div.password:not(.filled):not(:focus-within) input {
    -webkit-text-fill-color: transparent;
}

#form>div .form-fields>div:hover label {
    opacity: 0.5;
}

#form .form-inputs {
    position: relative;
    padding-left: 88px;
    padding-left: 5.5rem;
}

@media only screen and (max-width: 950px) {
    #form .form-inputs {
        padding: 0;
    }
}

#form .form-inputs #submit {
    position: absolute;
    left: 0;
    bottom: -1.6px;
    bottom: -0.1rem;
}

@media only screen and (max-width: 950px) {
    #form .form-inputs #submit {
        position: static;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

#form .warning {
    margin-top: 64px;
    margin-top: 4rem;
    padding: 16px;
    padding: 1rem;
    padding-right: 48px;
    padding-right: 3rem;
    font-size: 14.4px;
    font-size: 0.9rem;
    line-height: 24px;
    line-height: 1.5rem;
    background: #ffee76 url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' ?%3E%3Csvg baseProfile='tiny' height='24px' id='Layer_1' version='1.2' viewBox='0 0 24 24' width='24px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M21.171,15.398l-5.912-9.854C14.483,4.251,13.296,3.511,12,3.511s-2.483,0.74-3.259,2.031l-5.912,9.856 c-0.786,1.309-0.872,2.705-0.235,3.83C3.23,20.354,4.472,21,6,21h12c1.528,0,2.77-0.646,3.406-1.771 C22.043,18.104,21.957,16.708,21.171,15.398z M12,17.549c-0.854,0-1.55-0.695-1.55-1.549c0-0.855,0.695-1.551,1.55-1.551 s1.55,0.696,1.55,1.551C13.55,16.854,12.854,17.549,12,17.549z M13.633,10.125c-0.011,0.031-1.401,3.468-1.401,3.468 c-0.038,0.094-0.13,0.156-0.231,0.156s-0.193-0.062-0.231-0.156l-1.391-3.438C10.289,9.922,10.25,9.712,10.25,9.5 c0-0.965,0.785-1.75,1.75-1.75s1.75,0.785,1.75,1.75C13.75,9.712,13.711,9.922,13.633,10.125z' fill='%23f60'/%3E%3C/svg%3E") no-repeat calc(100% - 1rem) 1rem;
    background-size: 1.4rem;
    color: #000;
    max-width: 400px;
    max-width: 25rem;
    -webkit-animation: warning 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    animation: warning 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    border-radius: .4rem;
    border: 1px solid #ffec07;
    border-top-color: #fff;
    border-left-color: #fff;
    -webkit-box-shadow: 0 0 1rem #f0ff07;
    box-shadow: 0 0 1rem #f0ff07;
}

.loading #form {
    pointer-events: none;
}

.loading #form .form-fields {
    opacity: 0.5;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}

.captcha {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.captcha>div {
    margin-top: 48px;
    margin-top: 3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.captcha__image {
    margin-right: 16px;
    margin-right: 1rem;
    background: #fff;
    padding: 3.2px;
    padding: .2rem;
    border-radius: .3rem;
    position: relative;
    -webkit-box-shadow: 0 0.7rem 1.3rem rgba(0, 0, 0, .1);
    box-shadow: 0 0.7rem 1.3rem rgba(0, 0, 0, .1);
}

.captcha__image::before {
    content: '';
    position: absolute;
    border: 9.6px solid transparent;
    border: 0.6rem solid transparent;
    border-left-color: #fff;
    left: 100%;
    top: calc(50% - 0.6rem);
}

.captcha__image img {
    display: block;
}

.captcha__image a {
    display: block;
    width: 27.2px;
    width: 1.7rem;
    height: 27.2px;
    height: 1.7rem;
    background: #fff no-repeat 50% 50%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' ?%3E%3Csvg height='22px' version='1.1' viewBox='0 0 16 22' width='16px' xmlns='http://www.w3.org/2000/svg' xmlns:sketch='http://www.bohemiancoding.com/sketch/ns' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23000'%3E%3Cg%3E%3Cg id='Icons-AV' transform='translate(-212.000000, 0.000000)'%3E%3Cg id='loop' transform='translate(212.000000, 0.000000)'%3E%3Cpath d='M8,3 L8,0 L4,4 L8,8 L8,5 C11.3,5 14,7.7 14,11 C14,12 13.7,13 13.3,13.8 L14.8,15.3 C15.5,14 16,12.6 16,11 C16,6.6 12.4,3 8,3 L8,3 Z M8,17 C4.7,17 2,14.3 2,11 C2,10 2.3,9 2.7,8.2 L1.2,6.7 C0.5,8 0,9.4 0,11 C0,15.4 3.6,19 8,19 L8,22 L12,18 L8,14 L8,17 L8,17 Z' id='Shape'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: 0.9rem;
    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: .3rem;
    opacity: 0.7;
    cursor: pointer;
}

.captcha__image a:hover {
    opacity: 1;
}

.captcha__input {
    border-radius: .3rem;
    padding: 12.8px 16px;
    padding: .8rem 1rem;
    background: rgba(0, 0, 0, .1);
}

.captcha__input label {
    display: block;
    color: #fff;
}

.captcha__input input {
    padding: 11.2px;
    padding: .7rem;
    margin-top: 16px;
    margin-top: 1rem;
    font-size: 16px;
    font-size: 1rem;
    border: none;
    border-radius: .2rem;
    -webkit-box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, .1);
    box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, .1);
}


#CaptchaImage {
    position: absolute;
    top: 0px;
    height: calc(100% - 4px);
    left: 1px;
    border-radius: 7px;
    width: 120px;
    padding: 2px;
}

.CaptchaText {
    direction: ltr !important;
    text-align: left !important;
    padding-left: 125px !important;
    padding-right: 10px !important;
    font-family: Arial !important;
    font-weight: 400 !important;
    letter-spacing: 10px !important;
    font-size: 25px !important;
    text-transform: uppercase !important;
}