/* Fonts */
@font-face {
  font-family: RobotoLight;
  src: url(../fonts/Roboto-Light.ttf);
  font-weight: 300;
}
	
@font-face {
  font-family: RobotoRegular;
  src: url(../fonts/Roboto-Regular.ttf);
  font-weight: 400;
}
  
@font-face {
  font-family: RobotoBold;
  src: url(../fonts/Roboto-Bold.ttf);
  font-weight: 700;
}

/* General */
html, body {
  outline: none;
  overflow-x: hidden;
  height: 100%;
}


body {
  min-height: 100%;
  margin: 0;
  padding-bottom: 0;
  bottom: 0;
  top: 0;
  background-color: #accffe;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

header {
    /* Status bar height on iOS 10 */
    padding-top: 20px;
    /* Status bar height on iOS 11.0 */
    padding-top: constant(safe-area-inset-top);
    /* Status bar height on iOS 11+ */
    padding-top: env(safe-area-inset-top);
  
}


/* Main Content */
main {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: center;
align-items: center;
min-width: 100%;
min-height: 100%;
	
}

  main:after {
    content: "";
    display: block;
    height: 45px;
	}
  main .login-form-wrapper {
		/*padding-top: 150px;*/
		width: 100%;
	}
	main .login-form {
		margin: 0 auto;
		position: relative;
		max-width: 400px;
		border-radius: 10px;
		background-color: rgba(244, 244, 244, 0.9);
		-webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.5);
		-moz-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.5);
		box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.5);
	}
		main .login-form:before {
			content: none;
			position: absolute;
			border-radius: 10px;
			width: 100%;
			height: 100%;
			background: inherit;
			z-index: -1;
			filter: blur(15px);
			-moz-filter: blur(15px);
			-webkit-filter: blur(15px);
			-o-filter: blur(15px);
			transition: all 2s linear;
			-moz-transition: all 2s linear;
			-webkit-transition: all 2s linear;
			-o-transition: all 2s linear;
		}
		
		main .login-form .warning-block {
			background-color: white;
			border: solid 1px #2C3E50;
			padding: 10px 12px;
		}
		
		main .login-form .warning-block.error {
			color: #721c24;
			background-color: #f8d7da;
			border: solid 1px #f5c6cb;
			padding: 10px 12px;
		}
		
		main .login-form .warning-block.success {
			color: #155724;
			background-color: #d4edda;
			border: solid 1px #c3e6cb;
			padding: 10px 12px;
		}
		
			main .login-form .warning-block span {
				display: block;
			}
				main .login-form .warning-block span.heading {
					font-family: RobotoBold;
					font-size: 18px;
					text-align: left;
					color: #353535;
				}
				main .login-form .warning-block span.warn-message {
					font-family: RobotoLight;
					font-size: 14px;
					text-align: left;
					color: #000000;
				}
				
		main .login-form .loader,
		main .login-form .loader:before,
		main .login-form .loader:after {
			border-radius: 50%;
			width: 1.5em;
			height: 1.5em;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
			-webkit-animation: loading 1.8s infinite ease-in-out;
			animation: loading 1.8s infinite ease-in-out;
		}
		main .login-form .loader {
			color: #c8c8c8;
			font-size: 10px;
			margin: 80px auto;
			position: relative;
			text-indent: -9999em;
			-webkit-transform: translateZ(0);
			-ms-transform: translateZ(0);
			transform: translateZ(0);
			transform: translate(0, -400%);
			-webkit-animation-delay: -0.16s;
			animation-delay: -0.16s;
		}
		main .login-form .loader:before,
		main .login-form .loader:after {
			content: '';
			position: absolute;
			top: 0;
		}
		main .login-form .loader:before {
			color: #aeaeae;
			left: -3.5em;
			-webkit-animation-delay: -0.32s;
			animation-delay: -0.32s;
		}
		main .login-form .loader:after {
			color: #c8c8c8;
			left: 3.5em;
		}
		
		main .login-form .logo {
			display: block;
			margin: auto;
			padding: 30px 0 20px;
		}
		
		main .login-form .form-group {
			margin: 10px 52px;
			position: relative;
		}
			main .login-form .form-group:last-child {
				padding-bottom: 1px;
			}
			main .login-form .form-group.name-input-wrapper {
				background: #fff url(../images/login-icon.svg) no-repeat 12px center;
				border-radius: 5px;
				background-size: 25px;
			}
			main .login-form .form-group.password-input-wrapper {
				background: #fff url(../images/password-icon.svg) no-repeat 12px center;
				border-radius: 5px;
				background-size: 22px;
			}
			
			main .login-form .form-group img.profile-icon,
			main .login-form .form-group img.password-icon {
				position: absolute;
				top: 15px;
				left: 15px;
				width: 19px;
				height: 19px;
				z-index: 10;
			}
			
			main .login-form .form-group .name-input,
			main .login-form .form-group .password-input {
				position: relative;
				height: 50px;
				padding-left: 47px;
				border-radius: 5px;
				background-color: transparent;
				border: solid 1px #c4c4c4;
				font-family: RobotoLight;
				font-size: 18px;
				-webkit-box-shadow: none;
				-moz-box-shadow: none;
				box-shadow: none;
				text-align: left;
				outline: none;
				color: #000000;
			}
				main .login-form .form-group .name-input:focus,
				main .login-form .form-group .password-input:focus {
					border: solid 1px #a01f63;
				}
				main .login-form .form-group .name-input:-webkit-autofill,
				main .login-form .form-group .password-input:-webkit-autofill {
					transition: background-color 5000s ease-in-out 0s;
					-moz-transition: background-color 5000s ease-in-out 0s;
					-webkit-transition: background-color 5000s ease-in-out 0s;
					-o-transition: background-color 5000s ease-in-out 0s;
				}
			main .login-form .form-group .name-input::-webkit-input-placeholder,
			main .login-form .form-group .password-input::-webkit-input-placeholder {
				color: #aeaeae;
			}
			main .login-form .form-group .name-input:-moz-input-placeholder,
			main .login-form .form-group .password-input:-moz-input-placeholder {
				color: #aeaeae;
			}
			main .login-form .form-group .name-input::-moz-input-placeholder,
			main .login-form .form-group .password-input::-moz-input-placeholder {
				color: #aeaeae;
			}
			main .login-form .form-group .name-input:-ms-input-placeholder,
			main .login-form .form-group .password-input:-ms-input-placeholder {
				color: #aeaeae;
			}
			
			main .login-form .form-group .btn {
				border: none;
				border-radius: 5px;
				background-color: #2C3E50;
				color: #fff;
				font-family: RobotoRegular;
				font-size: 20px;
				margin-top: 30px;
				height: 50px;
				line-height: 35px;
				outline: none;
				text-align: center;
				transition: all 0.2s;
				-moz-transition: all 0.2s;
				-webkit-transition: all 0.2s;
				-o-transition: all 0.2s;
				width: 100%;
			}
				main .login-form .form-group .btn:hover {
					background-color: #BA6692;
				}
				main .login-form .form-group .btn:active {
					color: #fff;
					background-color: #751648;
				}
				
			main .login-form .form-group .btn.sm {
				font-size: 16px;
			}
				
			main .login-form .form-group a {
				margin-top: 25px;
				margin-bottom: 30px;
				display: block;
				font-family: RobotoRegular;
				text-align: center;
				color: #003aff;
				transition: all 0.2s;
				-moz-transition: all 0.2s;
				-webkit-transition: all 0.2s;
				-o-transition: all 0.2s;
				font-size: 16px;
			}
			
		main .login-form h3 {
			text-align: center;
		}
		
  main .social-icons {
    margin-top: 70px;
	}
    main .social-icons .link-wrapper {
      display: block;
      text-align: center;
		}
      main .social-icons .link-wrapper a {
        display: inline-block;
				font-family: RobotoBold;
        font-size: 30px;
        width: 50px;
				height: 50px;
				line-height: 50px;
        margin: 5px;
        color: white;
        text-decoration: none;
        border-radius: 5px;
        transition: all 0.3s;
				-moz-transition: all 0.3s;
				-webkit-transition: all 0.3s;
				-o-transition: all 0.3s;
			}
        main .social-icons .link-wrapper a:hover {
          
					-webkit-box-shadow: 0px 1px 5px 0px #000;
					-moz-box-shadow: 0px 1px 5px 0px #000;
					box-shadow: 0px 1px 5px 0px #000;
				}
        main .social-icons .link-wrapper a.fb {
          background-color: #3B5998;
				}
        main .social-icons .link-wrapper a.linkedin {
          background-color: #0084bf;
				}

/* Footer */
footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  height: 45px;
  color: white;
  width: 100%;
  background-color: #2C3E50;
  z-index: 90000;
  
}
  footer .copyright {
    padding-top: 10px;
	}
    footer .copyright p {
      margin-top: 3px;
      font-size: 16px;
      font-family: RobotoLight;
      text-align: center;
		}

/* Loading Animation */
@-webkit-keyframes loading {
  0%,
  80%,
  100% {
		-webkit-box-shadow: 0 2.5em 0 -1.3em;
		-moz-box-shadow: 0 2.5em 0 -1.3em;
    box-shadow: 0 2.5em 0 -1.3em;
	}
  40% {
		-webkit-box-shadow: 0 2.5em 0 0;
		-moz-box-shadow: 0 2.5em 0 0;
    box-shadow: 0 2.5em 0 0;
	}
}

@keyframes loading {
  0%,
  80%,
  100% {
		-webkit-box-shadow: 0 2.5em 0 -1.3em;
		-moz-box-shadow: 0 2.5em 0 -1.3em;
    box-shadow: 0 2.5em 0 -1.3em;
	}
  40% {
		-webkit-box-shadow: 0 2.5em 0 0;
		-moz-box-shadow: 0 2.5em 0 0;
    box-shadow: 0 2.5em 0 0;
	}
}
			
/* Media Queries */
@media screen and (max-width: 768px) {
/*  main .login-form-wrapper {
    margin: 10px 15px;
		margin-top: 30px;
		padding: 0;
	}*/

	main .login-form {
		max-width: 300px;
	}
	
	main .login-form .form-group {
		margin: 10px 10%;
	}
	main .social-icons {
		margin: 0;
	}
}

/*@media screen and (min-width: 768px) and (max-height: 830px) and (orientation: landscape) {
  main .login-form-wrapper {
    margin-top: 70px;
		padding: 0;
	}
	main .social-icons {
		margin: 0;
	}
}
@media screen and (min-width: 768px) and (max-height: 680px) and (orientation: landscape) {
  main .login-form-wrapper {
    margin-top: 10px;
		padding: 0;
	}
}*/
/*@media screen and (max-width: 768px) and (max-height: 600px) and (orientation: landscape) {
  footer {
    margin-top: 20px;
    position: relative;
  }
}*/