@import “colors”;

.center {

text-align: center;

}

.bordered-box {

padding: 10px;
margin-top: 20px;
margin-bottom: 20px;

border-style: solid;
border-width: 2px;
border-color: $border-box;
border-radius: 5px;

}

@media only screen and (max-width: 992px) {

.card-columns.index-cards {
    column-count: 1;
}

}

@media only screen and (min-width: 992px) {

.card-columns.index-cards {
    column-count: 2;
}

}

@media only screen and (min-width: 1200px) {

.card-columns.index-cards {
    column-count: 3;
}

}

.btn {

background-color: $button;

}

.btn-xl {

padding: 15px 30px;
font-size: 36px;
border-radius: 15px;

}

.showcase-title h1 {

font-size: 72px;

}

.iframe-container {

position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;

}

.iframe-container iframe {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

}

.contact-badge {

text-align: center;
margin-bottom: 20px;

border: 2px solid $border-box;
border-radius: 5px;

padding-top: 10px;
padding-bottom: 5px;

}

.contact-badge h1 {

font-size: 48px;

}

.contact-badge h2 {

font-size: 24px;

}

.card {

margin-bottom: 20px;

}