@-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: sg_main;
  margin: 0; }

.grid-wrapper {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr;
	position: absolute;
	inset: 0;
}

.grid-wrapper.abri {
	grid-template-columns: 1fr 1fr;
}

@media only screen and (max-width: 950px) {
	.grid-wrapper.abri {
		position: static;
		display: block;
		overflow: auto;
		height: 100vh;
	}
}

.abri-banner {
	display: none;
}

.grid-wrapper.abri > .abri-banner {
	display: block;
	position: relative;
}

.grid-wrapper.abri > .abri-banner #abri_background {
	width: 100%;
	height: 100vh;
	object-fit: cover;
	position: absolute;
}

.grid-wrapper.abri > .abri-banner #abri_container {
	position: absolute;
	width: 60%;
	padding-top: 40px;
	padding-right: 50px;
}

.grid-wrapper.abri > .abri-banner #abri_sg_logo {
	padding-bottom: 30px;
}

.grid-wrapper.abri > .abri-banner #abri_button {
	padding-top: 20px;
}

.grid-wrapper.abri main {
	flex-direction: column;
}

.grid-wrapper.abri #separator {
	display: none;
}

.grid-wrapper.abri #form .form-inputs {
	padding-left: 0;
}

.grid-wrapper.abri #form .form-inputs #submit {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
}

form {
	position: relative;
}

@media only screen and (max-width: 950px) {
	.grid-wrapper.abri form {
		height: 100vh;
	}
}


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: 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 #main_logo {
    display: none; }
  #container.branded #bg-anim {
    opacity: 0.8; }

#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; }

#omumi_background {
  display: none;
  visibility: hidden;
  opacity: 0;
  z-index: -1; }

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

#container.cloudBg #bg-anim {
  -webkit-animation: none;
          animation: none; }

#container.omumi main {
  background-color: #4d433c; }

#container.omumi #omumi_background {
  display: block;
  opacity: 1;
  visibility: visible; }
  #container.omumi #omumi_background svg {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100vh;
    opacity: 0;
    -webkit-animation: filled-anim 1s forwards;
            animation: filled-anim 1s forwards;
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s; }
    #container.omumi #omumi_background svg .st0 {
      fill: #F06122; }
    #container.omumi #omumi_background svg .st1 {
      -webkit-transform: translateY(-34px);
              transform: translateY(-34px); }
    #container.omumi #omumi_background svg .st2 {
      opacity: 0.35;
      fill: #FFFFFF;
      fill-opacity: 0.47; }
    #container.omumi #omumi_background svg .st3 {
      opacity: 0.65;
      fill: #FFFFFF;
      fill-opacity: 0.47; }
    #container.omumi #omumi_background svg .st4 {
      opacity: 0.55;
      fill: #FFFFFF;
      fill-opacity: 0.47; }
    #container.omumi #omumi_background svg .st5 {
      opacity: 0.75;
      fill: #FFFFFF;
      fill-opacity: 0.47; }
    #container.omumi #omumi_background svg .st6 {
      opacity: 0.65;
      fill: #FFFFFF;
      fill-opacity: 0.47; }
    #container.omumi #omumi_background svg .st7 {
      opacity: 0.2;
      fill: #FFFFFF;
      fill-opacity: 0.47; }
    #container.omumi #omumi_background svg .st8 {
      opacity: 0.9;
      fill: #FFFFFF;
      fill-opacity: 0.47; }

#container.omumi #separator {
  width: 0; }
  #container.omumi #separator:after, #container.omumi #separator:before {
    content: none; }

#container.omumi #bg-anim {
  -webkit-animation: none;
          animation: none;
  display: none; }

#container.omumi #submit a::before {
  background: -webkit-gradient(linear, left top, right bottom, from(rgba(239, 97, 34, .5)), to(rgba(249, 186, 21, .7)));
  background: linear-gradient(to right bottom, rgba(239, 97, 34, .5), rgba(249, 186, 21, .7)); }

@-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 {
  width: 400px;
  width: 25rem; }

#main_logo svg#shadowFilter {
  width: 0;
  height: 0; }

#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_stroked.cloud #type_bottom path {
    stroke-dasharray: 430;
    stroke-dashoffset: 430; }
  #main_logo svg:not(#shadowFilter) #logo_stroked.cloud #main_bottom, #main_logo svg:not(#shadowFilter) #logo_stroked.cloud #main_top {
    stroke-dasharray: 350;
    stroke-dashoffset: 350; }
  #main_logo svg:not(#shadowFilter) #logo_stroked.cloud #middle {
    stroke-dasharray: 174;
    stroke-dashoffset: 174; }
  #main_logo svg:not(#shadowFilter) #logo_stroked.cloud #left_small_v, #main_logo svg:not(#shadowFilter) #logo_stroked.cloud #right_small_v {
    stroke-dasharray: 100;
    stroke-dashoffset: 100; }
  #main_logo svg:not(#shadowFilter) #logo_stroked.omumi #main_bottom {
    stroke-dasharray: 360;
    stroke-dashoffset: 360; }
  #main_logo svg:not(#shadowFilter) #logo_stroked.omumi #main_top {
    stroke-dasharray: 360;
    stroke-dashoffset: 360; }
  #main_logo svg:not(#shadowFilter) #logo_stroked.omumi #middle {
    stroke-dasharray: 200;
    stroke-dashoffset: 200; }
  #main_logo svg:not(#shadowFilter) #logo_stroked.omumi #left_small_v {
    stroke-dasharray: 70;
    stroke-dashoffset: 70;
    stroke-width: 2px; }
  #main_logo svg:not(#shadowFilter) #logo_stroked.omumi #right_small_v {
    stroke-dasharray: 70;
    stroke-dashoffset: 70; }
  #main_logo svg:not(#shadowFilter) #logo_stroked.omumi #type_top path {
    stroke-dasharray: 610;
    stroke-dashoffset: 610; }
  #main_logo svg:not(#shadowFilter) #logo_stroked.omumi #type_bottom path {
    stroke-dasharray: 430;
    stroke-dashoffset: 430; }
  #main_logo svg:not(#shadowFilter) #logo_stroked.omumi #type_middle path {
    stroke-dasharray: 430;
    stroke-dashoffset: 430;
    -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) #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 polyline.om1, #main_logo svg:not(#shadowFilter) #logo_filled polygon.om1 {
  fill: #dcddde;
  -webkit-animation-delay: 0;
          animation-delay: 0; }

#main_logo svg:not(#shadowFilter) #logo_filled polyline.om2, #main_logo svg:not(#shadowFilter) #logo_filled polygon.om2 {
  fill: #bdbec0;
  -webkit-animation-delay: 0;
          animation-delay: 0; }

#main_logo svg:not(#shadowFilter) #logo_filled polyline.om3, #main_logo svg:not(#shadowFilter) #logo_filled polygon.om3 {
  fill: #939598;
  -webkit-animation-delay: 0;
          animation-delay: 0; }

#main_logo svg:not(#shadowFilter) #logo_filled polyline.om4, #main_logo svg:not(#shadowFilter) #logo_filled polygon.om4 {
  fill: #d33827;
  -webkit-animation-delay: 0;
          animation-delay: 0; }

#main_logo svg:not(#shadowFilter) #logo_filled polyline.om5, #main_logo svg:not(#shadowFilter) #logo_filled polygon.om5 {
  fill: #f06122;
  -webkit-animation-delay: 0;
          animation-delay: 0; }

#main_logo svg:not(#shadowFilter) #logo_filled polyline.om6, #main_logo svg:not(#shadowFilter) #logo_filled polygon.om6 {
  fill: #f38820;
  -webkit-animation-delay: 0;
          animation-delay: 0; }

#main_logo svg:not(#shadowFilter) #logo_filled polyline.om7, #main_logo svg:not(#shadowFilter) #logo_filled polygon.om7 {
  fill: #fabb15;
  -webkit-animation-delay: 0;
          animation-delay: 0; }

#main_logo svg:not(#shadowFilter) #logo_filled polyline.om8, #main_logo svg:not(#shadowFilter) #logo_filled polygon.om8 {
  fill: #939598;
  -webkit-animation-delay: 0;
          animation-delay: 0; }

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

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

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

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

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

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

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

#main_logo svg:not(#shadowFilter) #logo_filled polygon.cl8 {
  fill: #bcbec0;
  -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; }

@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) #type_middle 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; }

@keyframes logo-strokes-bottom_normal {
  to {
    stroke-dashoffset: 0; } }
  #main_logo svg:not(#shadowFilter) #type_middle 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; }

@keyframes logo-strokes-bottom_long {
  to {
    stroke-dashoffset: 0; } }
  #main_logo svg:not(#shadowFilter) #type_middle 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; }

@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;
}
		.cloudBg #main_logo {
		background-image: svg-load('rahkaran-cloud-en.svg');
		}
	.omumi #main_logo {
		background-image: svg-load('rahkaran-govermental-en.svg');
		}
*/
@-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; }
      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 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 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: sg_main;
    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("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 410.07 129.9'%3E%3Ctitle%3EAsset 3%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Crect width='125.1' height='125.1' style='fill:%23e33126'/%3E%3Crect x='22.5' y='96.3' width='80.2' height='6.4' style='fill:%23fff'/%3E%3Cpolygon points='28.9 28.9 57.8 28.9 57.8 22.5 22.5 22.5 22.5 61 28.9 61 28.9 28.9' style='fill:%23fff'/%3E%3Cpolygon points='57.8 86.6 57.8 54.5 57.8 54.5 38.5 54.5 38.5 61 51.3 61 51.3 86.6 57.8 86.6' style='fill:%23fff'/%3E%3Cpolygon points='102.7 54.5 102.7 54.5 83.4 54.5 83.4 61 96.3 61 96.3 86.6 102.7 86.6 102.7 54.5' style='fill:%23fff'/%3E%3Cpolygon points='73.8 28.9 102.7 28.9 102.7 22.5 67.4 22.5 67.4 86.6 73.8 86.6 73.8 28.9' style='fill:%23fff'/%3E%3Cpolygon points='200.2 13.3 193.7 6.7 187.1 13.3 193.7 19.9 200.2 13.3' style='fill:%23fff'/%3E%3Cpath d='M192.4,53.1c12,0,24.7-4.5,24.7-14.3V10.4l-13,3.5,3.5,24.4a64.82,64.82,0,0,1-13.1,1.4c-5.3,0-7.5-1-7.5-5.1,0-1.7.1-3.5.7-11.3h-11c-.5,8.1-.7,10.8-.7,13,0,11.2,5.4,16.8,16.4,16.8' style='fill:%23fff'/%3E%3Cpolygon points='234.6 47.1 234.5 3.8 221.9 5.4 223.9 47.1 234.6 47.1' style='fill:%23fff'/%3E%3Cpath d='M229.2,51.5V63.8a20.92,20.92,0,0,0,4.9.5c11.7,0,20.5-9.6,20.5-22.6,0-7.1-.4-11.3-.7-19.9l-13,2.1,4.3,19.6c-3.2,6.6-7.6,7.9-16,8' style='fill:%23fff'/%3E%3Cpath d='M380.6,6.7l-.5,5.2a16.85,16.85,0,0,0-13.2,16.5,17.05,17.05,0,0,0,3,9.6h-8.2c-7,0-7,0-14.9-7.3l-10-9.2C323,38,323,38,316.3,38H305.8V30.8c0-9.8-.9-12.1-8.6-14.8l-5-1.8,14.5-1.5,1-12.7L283.5,4.9l-3.3,16.9,11.9,4.1c3.7,1.3,3.8,1.3,3.8,7v3.9A74.53,74.53,0,0,1,281.1,38H270.8V3.7L258.3,5.6l.7,29c.3,10.6,5.9,16,17,16h5c7.7,0,15.2-.6,19.9-3.9A15.45,15.45,0,0,0,312,50.6h4.6c2.5,0,5.3,0,8.2-2.8,1.8,9.3,7.2,12.9,13.1,12.9,6.3,0,11-5.7,13.2-12.8,4,2.7,6.8,2.7,11.4,2.7h4.1c8.5,0,12.5-1.2,17.3-5.4h25.2l.9-14.7c1-14.6-9.5-17.2-29.4-23.8m-42,40.7c-2.1,0-4-1-7.1-4.6l5.9-5.4,5.9,5.4c-1.1,3.1-2.9,4.6-4.7,4.6m44.8-13.1c-4.6,0-7.3-2.4-7.3-6.4,0-3.3,2.7-6,7.3-6ZM400.8,32l-.1,2.2h-8.5V23.3c8.8,2.9,8.8,2.9,8.6,8.7' style='fill:%23fff'/%3E%3Cpolygon points='238.6 78.2 233.4 73.4 227.4 78.9 233.4 84.4 238.6 79.7 243.7 84.4 249.7 78.9 243.7 73.4 238.6 78.2' style='fill:%23fff'/%3E%3Cpolygon points='332.3 123.6 327.2 118.9 321.2 124.4 327.2 129.8 332.3 125.1 337.5 129.9 343.5 124.4 337.5 118.9 332.3 123.6' style='fill:%23fff'/%3E%3Cpath d='M398.9,103h-8.4V88H378.9v15H368V88H356.4v15H338V87.2H326.8V103H313.2V86.3l-12.8,1.9,1.9,14.8h-8.4V88H282.3v15H271.5V88H259.9v15H243.8V87.2H232.6V103h-9.7c-4.3,0-4.4,0-5.8-8.1l-2-11-19.8,2.7C181.2,88.4,176,94.1,176,109v18.3l13-1.6-2.6-24.9,3.5-.6c1.2,18.4,7.4,21.6,12,21.6,4.4,0,8.9-2.1,13-8.7a9,9,0,0,0,7,2.6h2.9c5.9-.2,10.3-1.7,13.3-4.1a15.26,15.26,0,0,0,10.8,4.1h2.9a31.15,31.15,0,0,0,13.5-2.9c3.4,1.9,7.3,3.5,11.3,3.5a20.28,20.28,0,0,0,11.1-3.5,16.21,16.21,0,0,0,10.3,3.8,13.44,13.44,0,0,0,9.7-3.9,11.49,11.49,0,0,0,8.3,3.1h2.8c5.9-.2,10.3-1.7,13.3-4.1a15.26,15.26,0,0,0,10.8,4.1h5.4a31.15,31.15,0,0,0,13.5-2.9c3.4,1.9,7.3,3.5,11.3,3.5a20.28,20.28,0,0,0,11.1-3.5,26.88,26.88,0,0,0,12,3.5c7.1,0,12.8-4.7,12.8-13.2V83.5l-12.7,2ZM199.5,98.8l8-1.3,2.3,10.4c-8,1.7-9.8-1.6-10.3-9.1' style='fill:%23fff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 50% 50% no-repeat;
    background-size: contain;
    opacity: 0.8; }

/*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 .password-recovery {
    margin: 16px 0;
    margin: 1rem 0; }
    #form .password-recovery a {
      text-decoration: none;
      font-size: 14.4px;
      font-size: 0.9rem;
      color: rgba(255, 255, 255, .7);
      -webkit-animation: fade-in 3s;
              animation: fade-in 3s;
      -webkit-transition: all 0.2s;
      transition: all 0.2s; }
      #form .password-recovery a:hover {
        color: #fff; }
  #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); }