/*Bootstrap 4 CSS
------------------*/
@import url('main.css');


/* CUSTOM CSS 
------------------*/
.mg-img{
	max-width:512px;
	width:100%;
	margin-right: auto;
	margin-left: auto;
	display: block;
}

ul.bulletlist-color {
  list-style: none; /* Remove default bullets */
}
ul.bulletlist-color li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #f0b323; /* Change the color */
  font-weight: 600; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}


/* Modules */
#swap-wrapper {
	display: block;
}

#swapsection {
	display: block;
}
.module{
	padding:1.25rem 0.625rem;
	border-radius: 26px;
	border:4px solid #EEEBE7;
	background: #EEEBE7;
	height:100%;
	position: relative;
	display: block;
}
.module-content{
    margin-bottom:1.25rem;
}
.module-content .module-ball {
  	border-radius: 50%;
  	width: 5.5rem;
  	height: 5.5rem;
  	line-height: 5.5em;
  	float:left;
  	text-align: center;
}
.module-content .module-ball a .far {
	font-size: 2.25em;
	color:#fff;
	text-decoration: none;
}
.module-content .module-ball a img {
  	width: 5.5rem;
  	height: 5.5rem;
}
.module-text{
    margin-left: 108px;
    height:100%;
}
.module-footer{
	margin-left:1.25rem;
    position: absolute;
    bottom: 1.25rem;
}

a.arrow-link {
	font-size: 1em;
  	font-weight: 400;
	color:#54585a;
	text-decoration: none;
}
a.arrow-link:hover{
	color:#59cbe8; /*002F5F*/
}

/* Modules swap section */
.js-section-swap {
	/*overflow: auto;*/
	display: none;
}
.section-swap-container {
	margin-top: 2.5rem;
	margin-bottom: 3.75rem;
}
.section-swap-container .frame{
	padding:1.25rem;
	border-radius: 1.625rem;
	border:4px solid #EEEBE7;
	background: #EEEBE7;
	height:100%;
	position: relative;
}
.section-swap-container img.module-img {
	max-width:512px;
	width:100%;
}

.usecases-frame{
	padding:2rem;
	border-radius: 1.625rem;
}


/* RESPONSIVE CSS
=================================================== */

@media (min-width: 576px){ /* (xs - for phones - screens less than 768px wide) */
	.millnet-bg{
		margin-top:65px;
		background: url(../img/millnet/millnet_bg_kingfisher.jpg) no-repeat top right -250px;
	}
}
@media (min-width:768px) { /*(sm - for tablets - screens equal to or greater than 768px wide)*/
	.millnet-bg{
		margin-top:65px;
		background: url(../img/millnet/millnet_bg_kingfisher.jpg) no-repeat top left;
	}
}
@media (min-width:992px) { /*(md - small laptops - screens equal to or greater than 992px wide)*/
	.millnet-bg{
		margin-top:65px;
		background: url(../img/millnet/millnet_bg_kingfisher.jpg) no-repeat top right -200px;
	}
}
@media (min-width:1180px) { 
	.millnet-bg{
		margin-top:65px;
		background: url(../img/millnet/millnet_bg_kingfisher.jpg) no-repeat top right -210px;
	}
}
@media (min-width:1200px) { /*(lg - for laptops and desktops - screens equal to or greater than 1200px wide)*/
	.millnet-bg{
		margin-top:65px;
		background: url(../img/millnet/millnet_bg_kingfisher.jpg) no-repeat top right -100px;
	}
}
@media (min-width: 1260px){ /* lg */
	.millnet-bg{
		margin-top:65px;
		background: url(../img/millnet/millnet_bg_kingfisher.jpg) no-repeat top right -100px;
	}
}
@media (min-width: 1440px){ /* lg */
	.millnet-bg{
		margin-top:65px;
		background: url(../img/millnet/millnet_bg_kingfisher.jpg) no-repeat top right;
	}
}

/* For tablets */
@media screen and (max-width: 767px) {
	.div-col-reverse{
	  flex-direction: column-reverse !important;
	}
}
/* For mobiles (xs) */
@media screen and (max-width: 576px) {
	.millnet-bg{
		margin-top:65px;
		background: url(../img/millnet/millnet_bg_kingfisher.jpg) no-repeat top left;
	}
}
@media screen and (max-width: 375px) {
}
@media screen and (max-width: 320px) {
}