/* blueprint color: #325991 */


#modules {
   background: url(../images/bg/modules03.jpg) no-repeat center center;
   background-size: cover;
}

#modules .icon-info2 {
   float: none;
   margin: 0 10px 0 10px
}

/* responsive scrollable centred grid */ 
#modules .grid .iap {
   position: relative;
   max-height: 70vh;
   aspect-ratio: 65/100;
   box-shadow: 0 0 2px #355, 0 0 5px #6aa, 0 0 10px #8bb, 0 0 15px #cff;
   border-radius: 35px;
   text-align: center;
}

h3.modulePrice {
   font-size: 0.8em;
   margin: 0;
   padding: 0px;
   text-align: center;
   color: rgba(0,0,0,0.6)
}

.iapModule::after {
   background-image: url(../images/iaps/bg-iap2.png);
}

.purchaseModule {
   position: absolute;
   bottom: -33px;
   left: 20%;
   width: 60%;
   z-index: 3
}

.btnModulePrice {
   position: absolute;
   left: 20%;
   width: 60%;
   bottom: -5%;
   margin: 0;
   padding: 3px;

   background: #2D990C;
   border: 2px #153D05 solid;
   outline: 2px solid #2D990C;
   color: rgba(0,0,0,0.6);
   z-index: 3
}

.boxBlueprints {
   position: absolute;
   top: -10px;
   left: 30%;
   width: 40%;

   color: white;
   font-size: 0.9em;
   line-height: 1em;
   margin: 0;
   text-align: center;
   
   background: black;
   padding: 4px;
   border: 1.5px solid rgba(100, 200, 255, 0.8);
   outline: 1.5px solid black;
   
   background: none;
   background-image: url(../images/icons/bp.png);
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 0px;
   
   z-index: 3;
   
}

.iap .level {
   position: absolute;
   left: 12%;
   width: 76%;
   bottom: 15%;
   margin: 0;
   padding: 2px;
   background: rgba(100, 200, 255, 0.15);
  
   font-size: 0.6em;
   text-transform: uppercase;
   z-index: 1;
}


.level div {
   display: inline-block;
   height: 22px;
   margin-right: 12px;
   line-height: 22px;
}

.level div.levelModule {
   font-weight: bold;
   width: 22px;
   margin-right: 2px;
   text-align: center;
   background: rgba(0,0,0,.5)
}

.borderRed {
   border: 1px solid crimson;
   color: crimson!important;
}


.level div.levelAvail {
   background: lime;
   color: rgba(0,0,0,.6);
   box-shadow: 0 0 3px lime
}

.moduleDesc b {
   color: #fff;
}


.moduleDetails.iap {
   margin: 0 auto;
    max-height: 62vh;
 }
