* {
	margin:0;
	padding:0;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}


html, body{
	/*height: 100%;*/
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}

body{
    direction:rtl;
	text-align:center;
    font:18px 'IranSANS';
    background: #fff;
    background: #06c7e6 url("/content/images/login_bg.jpg") no-repeat fixed center center / cover;   
}


.login_wrapper {		
    margin: 0 auto;
	margin-top: calc((100vh - 524px) / 2);	/* 470 is the height of login + 32px footer height */
	width:100%;
    padding: 20px;
	max-width:500px;
    height: 492px;
    background:rgba(255, 255, 255, 0.125) ;
    border-radius:5px;
	border-top: 5px solid #295a97;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-shadow:0 0 4px rgba(0,0,0,.15);
	color:#fff
}



svg {
  display: inline-block;
  width: 21px;
  height: 21px;
  overflow: visible;
}


.svg-icon path {
  stroke: #fff;
  fill: none;
  stroke-width: 1;
}


.logo{width:100%;display:inline-block;text-align:center;margin:4px auto 1px auto}
.slogan{display:inline-block;text-align:center;font-size:14px;padding:0 10px 3px 10px;margin:6px auto 15px auto;color:#fff;border-radius:5px}
.slogan span{display:inline-block;margin:6px auto 11px auto;padding:0 10px 3px 10px; line-height:22px; vertical-align:baseline;  background:rgba(255, 255, 255, 0.15) ;border-radius:5px}

.slogan_big{color:#fff;position:absolute;top:10px;right:0}



.login_form {
	padding:3px 15px 1px 15px;	
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}



.login_form input[type="text"],
.login_form input[type="password"] {
    display: inline-block;
	border:none;
	background:transparent;
    font:15px 'IranSANS';
	margin:0 0 5px;
	padding:2px 10px;
    max-width: 364px;
	width:100%;
    height: 34px; 
	color:#fff
}


.login_form button{
  width: 100%;
  margin: 5px 0;
  padding:0 5px 3px 5px;
  color: rgba(255, 255, 255, 0.95);
  border-radius: 5px;
  font:17px 'IranSANS';height:auto;
  border:1px solid rgba(255,255,255,.3);
  cursor:pointer
}

.login_form button:hover{
background:#056caf
}

.login_form input:focus {
	outline:0;
}

.login_row {
  height: 39px;
  margin-bottom:5px;
  border-bottom:2px solid rgba(255,255,255,.5);
}
.login_icon {
  margin-bottom: -0.4rem;
  margin-right: 0.5rem;
}
.login_icon.name path {
  stroke-dasharray: 73.50196075439453;
  stroke-dashoffset: 73.50196075439453;
  -webkit-animation: animatePath 2s 0.5s forwards;
          animation: animatePath 2s 0.5s forwards;
}
.login_icon.pass path {
  stroke-dasharray: 92.10662841796875;
  stroke-dashoffset: 92.10662841796875;
  -webkit-animation: animatePath 2s 0.5s forwards;
          animation: animatePath 2s 0.5s forwards;
}

.login_icon {
  margin-bottom: -0.4rem;
  margin-left: 0.5rem;
}
.login_icon.name path {
  stroke-dasharray: 73.50196075439453;
  stroke-dashoffset: 73.50196075439453;
  -webkit-animation: animatePath 2s 0.5s forwards;
          animation: animatePath 2s 0.5s forwards;
}
.login_icon.pass path {
  stroke-dasharray: 92.10662841796875;
  stroke-dashoffset: 92.10662841796875;
  -webkit-animation: animatePath 2s 0.5s forwards;
          animation: animatePath 2s 0.5s forwards;
}

@-webkit-keyframes animRipple {
  to {
    -webkit-transform: scale(3.5);
            transform: scale(3.5);
    opacity: 0;
  }
}

@keyframes animRipple {
  to {
    -webkit-transform: scale(3.5);
            transform: scale(3.5);
    opacity: 0;
  }
}
@-webkit-keyframes rotate {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes animatePath {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes animatePath {
  to {
    stroke-dashoffset: 0;
  }
}




/* BOTTOM BARS  */
.bar 	{ position:relative; display:block; width:100% }
.bar:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  top:-4px; 
  position:absolute;
  background:#3c62a7; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}



::-webkit-input-placeholder {color: #fff;opacity: 1 !important;}
:-moz-placeholder {color: #fff;opacity: 1 !important;}
::-moz-placeholder {color: #fff;opacity: 1 !important;}
:-ms-input-placeholder {color: #fff;opacity: 1 !important;}



/* -------------------------------------------------------------------------------------------------
    FOOTER
------------------------------------------------------------------------------------------------- */

footer{display:inline-block;width:100%;height:auto;padding:4px 30px;color:#fff;background:rgba(255,255,255,.075);position:fixed;bottom:0;left:0;z-index:2000;text-align:left;font-size:13px;
box-shadow: -1px -1px 3px 0 rgba( 80, 80, 80, .2);
box-sizing:border-box;	-webkit-box-sizing:border-box;	-moz-box-sizing:border-box;}
footer p{display:inline-block;width:100%;float:left;}
footer a{color:#fff}
footer i{color:#fff;font-size:14px}

/* -------------------------------------------------------------------------------------------------
    CHECKBOX
------------------------------------------------------------------------------------------------- */


input[type=checkbox]   { display:none }
#check-wrap         { position:relative;float:right ;right:10px;margin:35px 0 0 0}

label           { padding-right:33px;cursor:pointer;color:#fff}
label span   { display:block; position:absolute; right:0; top:0;  -webkit-transition-duration:0.3s; -moz-transition-duration:0.3s; transition-duration:0.3s;}
label span.title{font-size:15px;display:inline-block;position:relative;top:-8px}

label .circle {
  right:-22px;
  top:-22px;
  height:65px;
  width:65px;
  z-index:0;
  border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;
}
label .box     {
  border:2px solid #f5f5f5;
  height:17px; 
  width:17px;
  z-index:888;border-radius:3px
}
label .check         {
  top: 2px;
  right: 7px;
  width: 5px;
  height: 11px;
  border:2px solid #fff;  
  border-top: none;
  border-left: none;
  opacity:0; 
  z-index:888;
  -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); transform:rotate(180deg);
  -webkit-transition-delay:0.3s; -moz-transition-delay:0.3s; transition-delay:0.3s;
}

/* handling click events 
   when checkbox is checked */
label .circle {
  animation           :growCircle 0.3s ease;
}

input[type=checkbox]:checked ~ label .check {
  opacity:1; 
  transform           :scale(1) rotate(45deg);
}

/* bubble animation */

@keyframes growCircle {
  0%, 100%   { transform:scale(0); }
  70%        { background:rgba(255,255,255,.06); transform:scale(1.05); }
}


/* -------------------------------------------------------------------------------------------------
    BUTTON
------------------------------------------------------------------------------------------------- */

[material] { 	 
    position: relative;overflow:hidden; text-align: center; border: none; background: none; }

[material][raised] { border-radius: 5px; }
[material][raised][colored] { color: #fff; background:  #1c467a}

[material]:focus { outline: none; }

.ripple { display: block; position: absolute;background: rgba(0,0,0,.1); border-radius: 100%; -webkit-transform: scale(0); transform: scale(0); }
.ripple.animate { -webkit-animation: ripple 0.65s linear; animation: ripple 0.65s linear; }

@-webkit-keyframes ripple {	100% {opacity: 0; -webkit-transform: scale(2.5); transform: scale(2.5);}
}

@keyframes ripple { 100% {opacity: 0; -webkit-transform: scale(2.5); transform: scale(2.5);}
}


@media screen and (max-width: 1200px) {
.slogan_big{position:absolute;top:10px;right:0}
.slogan_big img{width:260px}
}

@media screen and (max-width: 1050px) {
.slogan_big{display:none}
}


@media screen and (max-width: 800px) {
.login_wrapper {	max-width:400px}
.login_form input[type="text"],.login_form input[type="password"] {max-width: 264px}
footer{display:inline-block;height:auto;margin-top:50px}
footer p{float:none;margin:0 auto;text-align:center}
.login_form button{ font:16px 'IranSANS'}
}

@media screen and (max-width: 700px) {
.slogan_big{display:none}
}

@media screen and (max-width: 500px) {
.login_wrapper {top: 45%;max-width:300px}  
.login_form input[type="text"],.login_form input[type="password"] {max-width: 164px}
}



input:focus {
    direction: ltr;
    text-align: left;
}



@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: bold;
	src: url('../fonts/eot/IRANSansWeb_Bold.eot');
	src: url('../fonts/eot/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
		 url('../fonts/woff2/IRANSansWeb_Bold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('../fonts/woff/IRANSansWeb_Bold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
		 url('../fonts/ttf/IRANSansWeb_Bold.ttf') format('truetype');
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: 500;
	src: url('../fonts/eot/IRANSansWeb_Medium.eot');
	src: url('../fonts/eot/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
		 url('../fonts/woff2/IRANSansWeb_Medium.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('../fonts/woff/IRANSansWeb_Medium.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
		 url('../fonts/ttf/IRANSansWeb_Medium.ttf') format('truetype');
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: 300;
	src: url('../fonts/eot/IRANSansWeb_Light.eot');
	src: url('../fonts/eot/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
		 url('../fonts/woff2/IRANSansWeb_Light.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('../fonts/woff/IRANSansWeb_Light.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
		 url('../fonts/ttf/IRANSansWeb_Light.ttf') format('truetype');
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: 200;
	src: url('../fonts/eot/IRANSansWeb_UltraLight.eot');
	src: url('../fonts/eot/IRANSansWeb_UltraLight.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
		 url('../fonts/woff2/IRANSansWeb_UltraLight.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('../fonts/woff/IRANSansWeb_UltraLight.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
		 url('../fonts/ttf/IRANSansWeb_UltraLight.ttf') format('truetype');
}
@font-face {
	font-family: IRANSans;
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/eot/IRANSansWeb.eot');
	src: url('../fonts/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
		 url('../fonts/woff2/IRANSansWeb.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
		 url('../fonts/woff/IRANSansWeb.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
		 url('../fonts/ttf/IRANSansWeb.ttf') format('truetype');
}