* {margin: 0px;padding: 0px;box-sizing: border-box;}
body, html {height: 100%; font-family: Arial, Helvetica, sans-serif;}

/*---------------------------------------------*/
a {
	font-size: 14px;
	line-height: 1.7;
	color: #666666;
	margin: 0px;
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
}

a:focus {outline: none !important;}
a:hover {text-decoration: none;}

/*---------------------------------------------*/
h1,h2,h3,h4,h5,h6 {margin: 0px;}


/*//////////////////////////////////////////////////////////////////
[ login ]*/
.limiter {width: 100%;margin: 0 auto;}
.container-login100 {
  width: 100%;  
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  flex-wrap: wrap;
}


/*------------------------------------------------------------------
[ Login100 more ]*/
.login100-more {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: calc(100% - 520px);
  position: relative;
  z-index: 1;
}
/*
.login100-more::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #e8519e;
  background: -webkit-linear-gradient(bottom, #e8519e, #c77ff2);
  background: -o-linear-gradient(bottom, #e8519e, #c77ff2);
  background: -moz-linear-gradient(bottom, #e8519e, #c77ff2);
  background: linear-gradient(bottom, #e8519e, #c77ff2);
  opacity: 0.8;
}*/
.logo{padding: 20px;}
.text{position: absolute; 
  bottom: 10%; left: 10px; text-align: center;}

.text h1{
  padding: 20px 40px; 
  font-size: 2.6em; 
  font-weight: 600; color: #000; 
  text-shadow: 1px 0px 2px rgb(247, 247, 247); 
  line-height: 50px;
}
.text h3{font-size: 1.5em; color: #0a3e75;background:rgba(255,255,255,0.6); padding: 5px 10px; }
.textbox {
  width: 520px;
  min-height: 100vh; 
  border-radius: 0px;
  position: relative;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c43131+50,1e1e1e+50 */
background: #c43131; /* Old browsers */
background: -moz-linear-gradient(top,  #c43131 50%, #1e1e1e 50%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #c43131 50%,#1e1e1e 50%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #c43131 50%,#1e1e1e 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c43131', endColorstr='#1e1e1e',GradientType=0 ); /* IE6-9 */

}
.mobile{padding: 20px; text-align: right; font-size:1.3em; font-weight: 800; color: #ffdb1a;}
.textbox ul{margin: 0px; padding:0;}
.textbox ul li{
  padding-left:0px;
  font-size:2.5em; 
  color: #fdf7d3; 
  text-align: center; 
  font-weight: 700; 
  list-style: none;
  /*border-bottom: 1px solid #db4b4b;*/
}

.textbox ul li a{
  line-height: 18px;
  padding: 8px 15px;
  color: #c43131; 
  font-weight: 400; 
  display: inline-block; 
  font-size: 0.4em;
  text-decoration: none;
  border: 1px solid #c43131; 
  border-radius: 10px;
  margin-top: 15px;

    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, #fff 50%, #f3db1a 50%);
    transition: background-position 1s;    
}
.textbox ul li a:hover{color: #000;border: 1px solid #c43131; background-position: 0 -100%; }



ul.retail{position: absolute; top: 19%; left: 23%;}
ul.infra{position: absolute; bottom: 10%; left:3%;}
ul.infra li{color: #fff;}

ul.infra li a{
  color: #c43131;
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, #fff 50%, #c43131 50%);
    transition: background-position 1s;
}
ul.infra li a:hover{color: #fff; }