html {height:100%; overflow:hidden;}
body {height:100%; margin:0px; overflow:hidden; background:#ffffff;}

.loginMain{position: relative; z-index:2; width: 90%; height:400px; -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.3);  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.3); margin:7.5% auto; border-radius:3px; overflow: hidden; display: flex; justify-content: center; align-items: center;}
.loginBox{width:400px; height:400px; position:absolute; right:0px; top:0px; z-index:9; border-radius:0px 3px 3px 0px;  background:#ffffff}


.btn-primary{
	background:#DC1431 !important;
	border:1px solid #C41230 !important;
}

.btn-primary:hover{
	background:#C41230 !important;
	border:1px solid DC1431 !important;
}

.loginIcon{background:#ffffff !important; color:#DC1431; border:1px solid #ced4da !important}

.hex {
    float: left;
    margin-left: 3px;
    margin-bottom: -16px;
	opacity:0;
}
.hex .top {
    width: 0;
    border-bottom: 20px solid #f2f2f2;
    border-left: 42px solid transparent;
    border-right: 42px solid transparent;
}
.hex .middle {
    width: 84px;
    height: 50px;
    background: #f2f2f2;
}
.hex .bottom {
    width: 0;
    border-top: 20px solid #f2f2f2;
    border-left: 42px solid transparent;
    border-right: 42px solid transparent;
}
.hex-row {
    clear: left;

}
.hex-row.even {
    margin-left: 43px;
}



#particles-js{
  	width: 100%;
  	height: 100%;
  	background-size: cover;
  	background-position: 50% 50%;
  	position: fixed;
  	top: 0px;
  	z-index:1;
}

#outer {
    width: 100%;
    height: 100%;
}

#leftColor {
    width: 70%;
    height: 100%;
    background-color: #C41230;
}

#rightColor {
    width: 30%;
    background-color: #0073CF;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

#rightColor:after {
  content: "";
  display: block;
  width: 50%;
  transform: rotation(50deg);
  background-color: #0073CF;
  position: absolute;
  left: -27%;
  top: -10%;
  height: 120%;
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg);
}