body{ font-family: 'Roboto Condensed', sans-serif !important;}
.solar-3{ width: 100%; display: inline-block; margin: 5rem 0;}
.solar-3 .network-main{ width: 100%; display: inline-block; margin: 0px; position: relative;}
.solar-3 .network-img{ width: 100%; height: 750px; object-fit: cover; margin: 0px; padding: 0px;}
.solar-3 .network-content{ width: 100%; display: inline-block; margin: 7.7rem 0 0; text-align: center; position: absolute; top: 0px; left: 0px; z-index: 9;}
.solar-3 .network-title{ width: 100%; display: inline-block; margin: 0rem 0 0rem; color: #ffffff; font-size: 3rem; font-weight: 500; line-height: 4.5rem; letter-spacing: 1px;}
.solar-3 .border-main{ width: 80px; height: 3px; background: #ffffff; margin: 3rem 0 6rem; padding: 0px; display: inline-block; border: none;}
.solar-3 .overlay{ width: 100%; background: rgba(37, 98, 126, 0.5); height: 100%; position: absolute; top: 0px; left: 0px;}
.solar-3 .dollar-main{ width: 100%; display: inline-block; margin: 0px; text-align: center;}
.solar-3 .dollar-icon{ width: 110px; height: 110px; background: #ffffff; border-radius: 50%; display: inline-flex; text-align: center; justify-content: center; align-items: center;}
.solar-3 .dollar-icon img{ height: 65px;}
.solar-3 .dollar-title{ width: 100%; display: inline-block; margin: 4rem 0 1rem 0; color: #ffffff; font-size: 25px; font-weight: 500; letter-spacing: 1px; line-height: 3.5rem;}
.solar-3 .dollar-description{ width: 100%; display: inline-block; margin: 0px; color: #ffffff; font-size: 17px;}
.solar-3 .join-btn-main{ width: 100%; display: inline-block; margin: 6rem 0 0 0; text-align: center;}
.solar-3 .join-network-btn{ border: none; padding: 1.3rem 4rem; color: #ffffff; letter-spacing: 1px; border-radius: 3px; font-size: 17px; background: #86B857; outline: none;}



@media screen and (min-width:901px) and (max-width:1024px){


}

@media screen and (min-width:768px) and (max-width:900px){
    .solar-3 .network-content{ background: rgba(37, 98, 126, 1); padding: 7rem 0; margin: 0px; position: relative;}
    .solar-3 .network-img{ display: none;}
    .solar-3 .dollar-main{ margin-bottom: 3rem; padding: 0 0rem}

}

@media screen and (min-width:601px) and (max-width:767px){
    .solar-3 .network-content{ background: rgba(37, 98, 126, 1); padding: 7rem 0; margin: 0px; position: relative;}
    .solar-3 .network-img{ display: none;}
    .solar-3 .dollar-main{ margin-bottom: 4rem; padding: 0 12rem}

}

@media screen and (min-width:481px) and (max-width:600px){
    .solar-3 .network-content{ background: rgba(37, 98, 126, 1); padding: 7rem 0; margin: 0px; position: relative;}
    .solar-3 .network-img{ display: none;}
    .solar-3 .dollar-main{ margin-bottom: 4rem; padding: 0 7rem}

}

@media screen and (max-width:480px){
    .solar-3 .network-content{ background: rgba(37, 98, 126, 1); padding: 7rem 0; margin: 0px; position: relative;}
    .solar-3 .network-img{ display: none;}
    .solar-3 .dollar-main{ margin-bottom: 4rem; padding: 0 0rem}

}

/*  Turn on custom 8px wide scrollbar */
::-webkit-scrollbar{
    width: 6px; /* 1px wider than Lion. */
    /* This is more usable for users trying to click it. */
    background-color: rgba(0,0,0,0);
    -webkit-border-radius: 100px;
}

/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
::-webkit-scrollbar-thumb:vertical{
    background: rgba(0,0,0,0.5);
    -webkit-border-radius: 100px;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0);
    min-height: 10px; /*Prevent it from getting too small */
}
::-webkit-scrollbar-thumb:vertical:active{
    background: rgba(0,0,0,0.61); /* Some darker color when you click it */
    -webkit-border-radius: 100px;
}