@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');

* {
	image-rendering: -webkit-optimize-contrast;
	shape-rendering: geometricPrecision;
	outline: none;
	outline-color: transparent;
	outline-offset: 0;
	outline-style: hidden;
	outline-width: 0;
	
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
	text-rendering: optimizeLegibility !important;
	-webkit-text-rendering: optimizeLegibility !important
}

html {
	font-size: 14px
}

body {
	font-family: 'Roboto', sans-serif;
	font-size: 1em;
	font-weight: normal;
	line-height: 1.75em;
	background-color: #fff;
	color: #777
}

html,
body,
#main {
	height: 100%
}

#preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 1000
}

#preloader #status {
	position: absolute;
	width: 60px;
	height: 60px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

.cube {
	position: absolute;
  	height: 100%;
	width: 100%;
	transform-style: preserve-3d;
	transform: rotateX(-20deg) rotateY(28deg);
	backface-visibility: visible;
	animation: spin 2s infinite linear
}

.cube figure {
	position: absolute;
	height: 60px;
	width: 60px
}

.cube .c_front {
	transform: translateZ(30px);
	border: 4px solid #ff0357;
    *background: rgba(249, 175, 0, 1)
}
.cube .c_back {
    transform: rotateY(180deg) rotateX(0deg) translateZ(30px);
	border: 4px solid #0092ff;
    *background: rgba(228, 0, 107, 1)
}
.cube .c_left {
    transform: rotateY(-90deg) translateZ(30px);
	border: 4px solid #ffb000;
    *background: rgba(19, 166, 245, .1)
}
.cube .c_right {
  	transform: rotateY(90deg) translateZ(30px);
	border: 4px solid #0092ff;
  	*background: rgba(0, 209, 0, 1)
}
.cube .c_top {
    transform: rotateX(90deg) translateZ(30px);
	border: 4px solid #ff0357;
    *background: rgba(228, 0, 107, .75)
}
.cube .c_bottom {
    transform: rotateX(-90deg) rotateZ(-180deg) translateZ(30px);
	border: 4px solid #00CD8A;
    *background: rgba(228, 0, 107, .25)
}

@keyframes spin {
  from {
    -webkit-transform: rotateX(0) rotateY(0);
            transform: rotateX(0) rotateY(0);
  }
  to {
    -webkit-transform: rotateX(360deg) rotateY(360deg);
            transform: rotateX(360deg) rotateY(360deg);
  }
}

.container {
	padding: 0 1em
}

.container-fluid {
	padding: 0 4em
}

.content-wrap {
	padding: 6em 0
}

a {
	color: inherit;
	text-decoration: none;
	transition: color .3s ease
}

a:hover,
a:focus {
	color: #000;
	text-decoration: none
}

.link {
	display: inline;
	position: relative
}

.link:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #ff0357;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .6s cubic-bezier(.19, 1, .22, 1)
}

.link:hover::after {
	transform: scaleX(1);
	transform-origin: left
}

.main-title {
	margin-bottom: 3em
}

.main-title .subtitle {
	font-weight: 500;
	letter-spacing: .045em
}

.main-title .title,
.main-title .subtitle {
	margin: 0;
	text-transform: uppercase
}

.main-title .title strong {
	color: #ff0357
}

h1, h2, h3, h4, h5 {
	color: #000;
	font-weight: 500;
	line-height: 1.25em;
	margin: 12px 0 10px
}

h5 {font-size: 1.25em}
h4 {font-size: 1.5em}
h3 {font-size: 1.86em}
h2 {font-size: 2.25em}
h1 {font-size: 2.5em}

.row {
	margin: 0 -1em
}

[class^="col-"] {
	padding: 0 1em
}

/*button*/
.btn {
	position: relative;
	transform: translateZ(0);
	overflow: hidden;
	height: auto;
	line-height: 2.714em;
	padding: 0 2em;
	border: 2px solid transparent;
	text-transform: uppercase;
	letter-spacing: .045em;
	border-radius: 3px;
	box-shadow: none;
	/*font-size: inherit;*/
	color: inherit;
	font-weight: 500;
	transition: border .3s ease,
				background-color .3s ease,
				color .3s ease
}

.btn:focus,
.btn:focus:active {
	box-shadow: none
}

.btn-custom {
	background-color: #ff0357;
	color: #fff
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:focus:active {
	background-color: #fff;
	border-color: #ff0357;
	color: #ff0357
}

.btn-rounded {
	border-radius: 3em
}

/*form*/
.form-group {
	position: relative;
	margin: 0 0 1em
}

input {
	height: 3em;
	border: 2px solid #eee;
	border-radius: 3px;
	padding: 0 1.25em;
	box-shadow: none;
	color: #000;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit
}

input:focus {
	border-color: #ff0357;
	box-shadow: 0 0 20px -7px rgba(255, 3, 87, .5)
}

textarea.form-control {
	padding: 1em 1.25em
}

/*login*/
.form-signin {
  	max-width: 330px;
  	padding: 15px;
  	margin: 0 auto;
}
.login-logo {
	margin: 30px 0;
}
.login-logo img {
  	margin: 0 auto;
}
.login-logo-text {
	margin-left: 39%;
	font-size: 18px;
	color: #ff0357;
	font-weight: 600;
}
.form-signin .card {
	margin-bottom: 15px;
	background-color: #f6f6f6;
}
.form-signin .form-signin-heading {
	text-align: center;
	font-weight: 300;
	margin-top: 0;
	margin-bottom: 15px;
}
.form-signin .checkbox {
 	font-weight: normal;
}
.form-signin input {
	position: relative;
	height: auto;
	-webkit-box-sizing: border-box;
	 	-moz-box-sizing: border-box;
	      	box-sizing: border-box;
	padding: 10px;
	font-size: 16px;
	width: 100%;
}
.form-signin input:focus {
  	z-index: 2;
}
.form-signin .form-group {
	margin-bottom: 10px;
}
.form-signin .btn {
	margin: 20px auto 5px;
}