/* === Add vertical spacing to Bootstrap containers === */
/* Desktops */
@media (min-width:768px) { 
    .container { padding-top: 2%; padding-bottom: 2% }
    .col-md-6  { padding: 2% 4%; flex: 0 0 47%; width: 47% }
    .col-md-6:nth-child(1) { margin-right: 3%; }
    .col-md-6:nth-child(2) { margin-left: 3% }        
    .col-md-4  { padding-top: 1%; padding-bottom:1%; flex: 0 0 30.5%; width: 30.5% }
    .col-md-4:nth-child(2) { margin-left: 4%; margin-right: 4% }
    .col-md-3  { padding-top: 1%; padding-bottom:1%; flex: 0 0 23.3%; width: 23.3% }
    .col-md-3:nth-child(2) { margin-left: 2.1%; margin-right: 1.1% }
    .col-md-3:nth-child(3) { margin-left: 1.1%; margin-right: 2.1%
    }    
}

/* Mobiles */
@media (max-width:767px) { 
    .container { padding-left: 7%; padding-right: 7%; padding-top: 8%; padding-bottom: 8% }
    .col-md-6, .col-md-3, .col-md-4 { padding-top: 5%; margin-bottom: 6% }
}

/* Some background-color styles */
.bg-gray-light { background-color: #f0f5f4 }
.bg-beige-light { background-color: #fde8cd }
.bg-green-light { background-color:#81ecec }
.bg-salmon-light { background-color: #F7CACA }
.bg-purple-dark { background-color:#6b5b95 }
.bg-crimson-dark { background-color:#af0069 }
.bg-blue-dark { background-color:#3c40c6 }
.bg-black-dark { background-color:#000 }

/* If background dark, set text color white */
.container .row [class*="-dark"] * { color: #fff } 

/* Images in Bootsrap columns - some space beneath */
.container img { margin-bottom: 18px }
.col-md-6 img, .col-md-4 img, .col-md-3 img { margin-bottom: 14px }

/* Some image effects*/
.drop-shadow {  box-shadow: 8px 10px 8px #888;  }
.soft-corner { border-radius: 15px }