.mainBanner { background-color:#000; margin: 0 0 10px 0; }
section#keypoints {  
    color:#fff;
    text-align:left;
    margin: 15px 0px 15px 0px;
    
}

section#keypoints h2 {  
	color: #ff9c00;
	font-size: 1.2em;
    line-height:1em;
    font-weight:normal;
    margin-top:0px;
}

section#keypoints ul {  
    list-style-type:none;
    margin: 20px 0px 20px 0px;
    padding:0;
}


.banner { background-color:#000; padding: 10px 0;margin: 0 0 10px 0; }

.banner h3 {
	color: #ff9c00;
	font-size: 15px;
    font-weight:normal;
    line-height:22px;
    text-align:left;
    padding-left:12px;
}

.banner a {
    display:block;
    text-align:left;
    text-decoration:none;
    color: #ff9c00;
    padding:0 0 12px 12px;
    font-size: 15px;
    font-weight:normal;
    line-height:22px;
}

.infoBoxes h4 {
	color: #606060;
	font-size: 18px;
    font-weight:normal;
    line-height:26px;
    text-align:center;
    margin:20px 0;
}

.infoBoxes section h5 {  
    text-transform:uppercase;
    font-size: 14px;
    font-weight:600;
    color: #ff9c00;
} 

.infoBoxes section p {  
    font-size: 14px;
} 




/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */

@media (max-width: 575px) {

    /* Let's have one anyway, just in case! */
    
}




/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    

}



/* below 768 invokes mob menu */
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

    .banner a { text-align:right; padding:0 12px 0 0; }
    .mainBanner { margin: 0 5px 10px 5px; }
    .banner { margin: 0 5px 10px 5px; }
    
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {


    
}