/*
 * main.css
 * Author: Carlos Alvarez
 * URL: http://alvarez.is
 *
 * Project Name: FLATTY - Free Bootstrap 3 Theme
 * Version: 1.0
 * URL: http://blacktie.co
 */

/*
select {
    background: yellow !important;
    color:#000;
    text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
}
option:not(:checked) {
    background-color: #FFF;
}
*/

body {
  background-color: #fff;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #555;

    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
}

/* Titles */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    color: #333 ;
}

h1 {
	font-size: 40px;
}

h3 {
	color: #95a5a6;
	font-weight: 400;
}

h4 {
	color: #95a5a6;
	font-weight: 400;
	font-size: 20px;
}

/* Paragraph & Typographic */
p {
    line-height: auto; 
    margin-bottom: 25px;
    font-size: 16px;
}

/* Links */
a {
    color: #3498db;
    word-wrap: break-word;
    cursor: pointer;
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

a:hover,
a:focus {
    color: #7b7b7b;
    text-decoration: none;
    outline: 0;
}

a:before,
a:after {
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

.a-gray {
    color: #989898;
    word-wrap: break-word;
    font-weight: 600;
    cursor: pointer;
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

.a-gray:hover,
.a-gray:focus {
    color: #3a94c1; /* #41a5d7 #31ae9c #47cbb8 #3498db */
    text-decoration: none;
    outline: 0;
}

.a-gray:before,
.a-gray:after {
    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
    transition: color 0.1s ease-in, background 0.1s ease-in;
}

.alert-btn-height { /* adjusts the display of Bootstrap "alert" elements */
    padding: .5em 1em !important; /* top-and-bottom, left-and-right */
    margin-bottom: 5px !important;
}


/* ANIMATION TESTS -- START */

/****************1st example */

/*
.animate360 {
    -webkit-animation:spin .75s linear ;
    -moz-animation:spin .75s linear ;
    animation:spin .75s linear ;
}
@-moz-keyframes spin { 100% { -moz-transform: scale(1.5) rotate(720deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: scale(1.5) rotate(720deg); } }
@keyframes spin { 100% { -webkit-transform: scale(1.5) rotate(720deg); transform: scale(1.5) rotate(720deg); } }
*/

/****************2nd example */

/*
.bounce-element { 
	-webkit-animation-name: bounce; 
   animation-name: bounce; 
   -webkit-animation-duration: .75s;
   animation-duration: .75s; 
   -webkit-animation-fill-mode: both; 
   animation-fill-mode: both; 
}

@keyframes bounce { 
  0% { transform: translateY(0); }
  100% { transform: translateY(-50px); }
}

.ball {
  animation: bounce 1s;
  animation-direction: alternate;
  animation-iteration-count: 1; 
}
*/

/****************3rd example */

/*
.fa {
 width: 60px;
 display: block;
 text-align: center;
 color:#990000;
 font:normal 45px 'FontAwesome';
 line-height:60px;
 text-rendering: auto;
 -webkit-font-smoothing: antialiased;
}
.fa-angle-double-down:before {content: "\f103";}
 
.bounce {
 -webkit-animation: bounce 1s 1;
 -moz-animation: bounce 1s 1;
 -o-animation: bounce 1s 1;
}
 
@-webkit-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
 40% {-webkit-transform: translateY(-30px);}
 60% {-webkit-transform: translateY(-15px);}
}
 
@-moz-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
 40% {-moz-transform: translateY(-30px);}
 60% {-moz-transform: translateY(-15px);}
}
 
@-o-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
 40% {-o-transform: translateY(-30px);}
 60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
 40% {transform: translateY(-30px);}
 60% {transform: translateY(-15px);}
}

@-webkit-keyframes bounce { 
   0%, 20%, 55%, 75%, 100% {-webkit-transform: translateY(0);} 
   40% {-webkit-transform: translateY(-45px);} 
   60% {-webkit-transform: translateY(-35px);} 
} 

@keyframes bounce { 
   0%, 20%, 55%, 75%, 100% {-webkit-transform: translateY(0);} 
   40% {-webkit-transform: translateY(-45px);} 
   60% {-webkit-transform: translateY(-35px);} 
}
*/
/* ANIMATION TESTS -- END */

.btn_font_PlaypenSans {  /* This is a playful, cartoon style lettering */
    font-size: 1.1em;
    font-weight: bold !important;  /* important is needed to override Bootstrap style */
    line-height: 1.5;
    color: #ffffff;
    font-family: 'Playpen Sans';
}

.btn_font_Bold {  /* Just bolds the button font */
    font-weight: bold !important;  /* important is needed to override Bootstrap style */
}

.btn_icon {
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1;
  color: #000000;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.btn_icon:hover,
.btn_icon:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.tool {
  /* float: right; */
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: #000000;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.2;
  filter: alpha(opacity=20);
}

.tool:hover,
.tool:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

ul.a {
    list-style-type: circle;
}

ul.b {
    list-style-type: square;
}

ol.c {
    list-style-type: upper-roman;
}

ol.d {
    list-style-type: lower-alpha;
}

 hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 4px 0; /* [Top and Bottom] [Left and Right] */
    padding: 0;
}

 hr.pillRule {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px dotted #0099CC; /* dotted dashed  #0099CC; 676767; see https://www.w3schools.com/cssref/pr_border-style.asp */  
    margin: 4px 0; /* [Top and Bottom] [Left and Right] */
    padding: 0;
    width: 85%
}

 hr.memberListRule {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px dotted #0099CC; /* dotted dashed  #0099CC; 676767; see https://www.w3schools.com/cssref/pr_border-style.asp */  
    margin: 4px 0; /* [Top and Bottom] [Left and Right] */
    padding: 0;
    width: 75%
}


 hr.cardRule {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px dotted #0099CC; /* dotted dashed  #0099CC; 676767; see https://www.w3schools.com/cssref/pr_border-style.asp */  
    margin: 4px 0; /* [Top and Bottom] [Left and Right] */
    padding: 0;
}

/* List Items */
.li-pillRule {
    color: #525252; /* #676767; */
    text-align: left;
}

.li-pillRuleSSS {
    color: #525252; /* #676767; */
    text-align: left;
    font-size: .75em;
}

.li-smallRedNote {
    color: #DC3545; /* Danger red */
    text-align: left;
    font-size: .90em; /* was .75 */
    font-weight: 550;
}

.card-img-left {
  border-bottom-left-radius: calc(.25rem - 1px); 
  border-top-left-radius: calc(.25rem - 1px); 
  float: left;
  margin-right: 1em;
  margin-top: 1.5em;
  margin-bottom: 1em;
  border-radius: .5em .5em .5em .5em;  /* top-left corner, top-right corner, bottom-right corner, bottom-left corner */
}

.card-img-right {
  border-bottom-left-radius: calc(.25rem - 1px); 
  border-top-left-radius: calc(.25rem - 1px); 
  float: right;
  padding-left: 1em;
  margin-top: 1.5em;
  margin-bottom: .5em;
  border-radius: 0 1em 1em 0;
}

.customClassForDropDown  /* TESTING Scrolling of pill list */
    {
       max-height: 300px;
       overflow-y: auto;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }

.table-wrapper-2 { /* TESTING Scrolling of table list */ 
    display: block;
    max-height: 300px;
    overflow-y: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;  /* some browsers can auto hide scroll bar for a cleaner look */
}

.fa-spin {  /*speeds up Font Awesome icon spinner from default of 2s */
 -webkit-animation: fa-spin 1.35s infinite linear !important;
 animation: fa-spin 1.35s infinite linear !important;
}

.navbar-default {
	/*background-color: #F3F3F3;*/
	border-color: transparent;
}

.navbar-default .navbar-brand {
	color: white;
}

.navbar-default .navbar-nav > li > a {
	color: white;
}


.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
 border-top: none;
 border-left: none;
 border-right: none;
 border-bottom: 2px solid #33b5e5; /* #0099CC; /*#00C851;*/
 font-weight: bold;
 background-color: #d4d4d4;
 color: #ffffff; /*#3c5a78;*/
 font-family: 'Lato', sans-serif;
}

.nav-tabs>li>a {
 color: #575757;
 font-family: 'Lato', sans-serif;
}

.nav-tabDrawerClosed {
    text-align: center;
    margin: 0 auto;
    width: 100%;
}

.nav-tabDrawerOpened {
    border-top: double #999;
    /*border-bottom: double #999;*/
    text-align: center;
    margin: 0 auto;
    width: 100%;
}

.nav-pills > li > a {
    color: #575757;
    margin-top:3px;
}

.nav > li > a:hover{
    color: #575757;
    background-color: #d4d4d4;
}

.nav > li > a:hover, .nav > li > a:focus {
    background-color: transparent;
}

.borderless tr td {
    border: none !important;
    padding: 0px !important;
}

.btn-spacerLeft {
    margin-left:5px;
}

.btn-info:focus{
    color: #575757;
}

.btn-hideFocus { /* Surpresses blue outline after button is pushed on desktop */
   outline: none !important;
   box-shadow:none
   color: white !important;
}

.btn-hideFocus:focus {  /* Surpresses black text after button is pushed */
   color: white !important;
}

.btn-pillStyle {
    background-color: #f2f2f2;
    color: #949494;
}

.label-seatPeopleStyle {
    background-color: #f2f2f2;
    color: #949494;
}

.label-BrandPrimaryBlue {  /* slightly darker than bootstrap primary #428BCA; */
    background-color: #2F7AB7;
}

/*.panel-borderless {
  border: 0;
  box-shadow: none;
}

.panel-resultsStyle {
  border-color: #d6e9c6;
}
.panel-resultsStyle > .panel-heading {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.panel-resultsStyle > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #d6e9c6;
}

.panel-resultsStyle > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #d6e9c6;
}

.panel-seatStyle > .panel-heading {
    color: #0099CC;
    background-color: #bfede6;
    border-color: #7fcce5;
}
*/
.modal-Nofooter{
    display: none;
}
.modal-Noheader{
    display: none;
}

/* .modal-footer {  /* makes bottom of modal window have square corners rather than rounded 
    background-color: #d4d4d4 !important;
} */

.btn-infoGrayStyle {
    color: #949494 !important;  /* #949494 */  /* #17a2b8 */
    background-color: #fdfdfd; /* #f4f4f4; */
    border: 1px solid #7fcce5; /* #0099CC; /* #d4d4d4;*/
}

.btn-infoGrayStyle:hover {
  color: #949494;  /* #17a2b8 */
  background-color: #e6f9fc; /* #f6f6f6; light gray */
  border-color: #7fcce5; 
}

.btn-infoGrayStyle:focus,
.btn-infoGrayStyle:active,
.btn-infoGrayStyle.active {
  color: #949494;  /* #17a2b8 */
  background-color: #fdfdfd;
  border-color: #7fcce5;
}

.btn-GrayhideFocus { /* Surpresses blue outline after button is pushed on desktop. See similar .btn-hideFocus */
   outline: none !important;
   box-shadow:none
   color: #949494 !important;
}

.btn-GrayhideFocus:focus {  /* Surpresses black text after button is pushed.  See similar .btn-hideFocus */
   color: #949494 !important;
}

.btn-surveyStyle {
    color: #595959 !important;
    background-color: #dbf0e0; /* #d6eedb; /* #d6eedb; /* #d1ecd7; /* #ccead3; /* #C0E5C8; /* #5bc3ea; /* #85b4dc; /* #C0E5C8; /* #8AE9C1 #86CD82 #DDD8B8 #7dd5e0; /* #92DCE5; /* #70c8e2;  /* #5bdebb; /* #f4f4f4; */
    border: 1px solid #7fcce5; /* #0099CC; /* #d4d4d4;*/
}

.btn-seatStyle {
    color: #595959 !important;
    background-color: #bfede6; /* #C9EAE7; /* {#bfede6;} /* #b0e9e0; /* #9de4d9; /*#93E2D5; /* #d9efde; /* #99daf2; /* #b5d2ea; /*#91bbdf; /* #70c8e2 #A9DDD6 #89D2DC; /* #86BBD8; /* #63B995; /* #8CDFD6; /* #8dccaf; /* #70c8e2;  /* #5bdebb; /* #f4f4f4; */
    border: 1px solid #7fcce5; /* #0099CC; /* #d4d4d4;*/
}

.btn-inviteStyle {
    color: #595959 !important;  
    background-color: #d9f1fa; /* #C1E8F7; /* #d6f0f9; /* #dae8f4; /* #9ad8ea #D5F9DE; /* #96cac8; #CFEBDF; #C0E5C8; #CEE0DC; #9bd8eb; #c0de5b; */
    border: 1px solid #7fcce5; /* #0099CC; /* #d4d4d4;*/
}

.tips-mediumFont {
    font-weight: 600; 
    color: darkgray !important;
}

.tips-curlyQuotes {
    color: #7fcce5;
}

.tips-quoteText {
    line-height: 26px; 
    font-weight: 500;
    color: #0099CC;
    font-style: italic;
}

.tips-tickler {
    font-weight: 400;
    color: darkgray;
    /* color: #0099CC; green */ 
    /* color: #5cb85c; blue */
}

.tips-headline {
    color: #6e6e6e; /* #5c5c5c; /* #4a4a4a */
    font-style: italic;
    text-decoration: underline;
    font-weight: 400;
}
.tips-headlineColon {
    color: #4a4a4a;
    font-style: italic;
}

.messageText {
    color: #676767 !important;
    text-decoration: underline !important;
}

.messageText:hover {
    color: #428BCA !important;
    text-decoration: underline !important;
}
/* Helpers */

.mt {
	margin-top: 40px;
	margin-bottom: 40px;
}

.form-control {
	height: 42px;
	font-size: 18px;
	width: 97%; /*was 90% */
}

.button-control {
    width: 95%;
}

.button-pillContent {
    border-radius: 10px;
}

i {
	margin: 8px;
	color: #3498db; 
}


/* HeaderWrap */
#headerwrap {
	/* background: url(../img/bg01.jpg) no-repeat center top; */
	background-color: #3498db;
	margin-top: -20px;
	padding-top:200px;
	background-attachment: relative;
	background-position: center center;
	min-height: 650px;
	width: 100%;
	
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#headerwrap h1 {
	margin-top: 60px;
	margin-bottom: 15px;
	color: white;
	font-size: 45px;
	font-weight: 300;
	letter-spacing: 1px;
}

    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }


/* BOOTSTRAP 4 Patch to get card formating features 
.card {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
}

.card-block {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
}

.card-title {
    margin-bottom: 0.75rem;
}

.card-subtitle {
    margin-top: -0.375rem;
    margin-bottom: 0;
}

.card-text:last-child {
    margin-bottom: 0;
}

.card-link:hover {
    text-decoration: none;
}

.card-link + .card-link {
    margin-left: 1.25rem;
}

.card > .list-group:first-child .list-group-item:first-child {
    border-top-right-radius: 0.25rem;
    border-top-left-radius: 0.25rem;
}

.card > .list-group:last-child .list-group-item:last-child {
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: #f7f7f9;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.card-header:first-child {
    border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}

.card-footer {
    padding: 0.75rem 1.25rem;
    background-color: #f7f7f9;
    border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.card-footer:last-child {
    border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
}

.card-header-tabs {
    margin-right: -0.625rem;
    margin-bottom: -0.75rem;
    margin-left: -0.625rem;
    border-bottom: 0;
}

.card-header-pills {
    margin-right: -0.625rem;
    margin-left: -0.625rem;
}

.card-pill-tabs {
    margin-right: -0.625rem;
    margin-bottom: -0.75rem;
    margin-left: -0.625rem;
    border-bottom: 0;
}

.card-primary {
    background-color: #0275d8;
    border-color: #0275d8;
}

.card-primary .card-header,
.card-primary .card-footer {
    background-color: transparent;
}

.card-success {
    background-color: #5cb85c;
    border-color: #5cb85c;
}

.card-success .card-header,
.card-success .card-footer {
    background-color: transparent;
}

.card-info {
    background-color: #5bc0de;
    border-color: #5bc0de;
}

.card-info .card-header,
.card-info .card-footer {
    background-color: transparent;
}

.card-warning {
    background-color: #f0ad4e;
    border-color: #f0ad4e;
}

.card-warning .card-header,
.card-warning .card-footer {
    background-color: transparent;
}

.card-danger {
    background-color: #d9534f;
    border-color: #d9534f;
}

.card-danger .card-header,
.card-danger .card-footer {
    background-color: transparent;
}

.card-outline-primary {
    background-color: transparent;
    border-color: #0275d8;
}

.card-outline-secondary {
    background-color: transparent;
    border-color: #ccc;
}

.card-outline-info {
    background-color: transparent;
    border-color: #5bc0de;
}

.card-outline-success {
    background-color: transparent;
    border-color: #5cb85c;
}

.card-outline-warning {
    background-color: transparent;
    border-color: #f0ad4e;
}

.card-outline-danger {
    background-color: transparent;
    border-color: #d9534f;
}

.card-inverse {
    color: rgba(255, 255, 255, 0.65);
}

.card-inverse .card-header,
.card-inverse .card-footer {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.2);
}

.card-inverse .card-header,
.card-inverse .card-footer,
.card-inverse .card-title,
.card-inverse .card-blockquote {
    color: #fff;
}

.card-inverse .card-link,
.card-inverse .card-text,
.card-inverse .card-subtitle,
.card-inverse .card-blockquote .blockquote-footer {
    color: rgba(255, 255, 255, 0.65);
}

.card-inverse .card-link:focus, .card-inverse .card-link:hover {
    color: #fff;
}

.card-blockquote {
    padding: 0;
    margin-bottom: 0;
    border-left: 0;
}

.card-img {
    border-radius: calc(0.25rem - 1px);
}

.card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.25rem;
}

.card-img-top {
    border-top-right-radius: calc(0.25rem - 1px);
    border-top-left-radius: calc(0.25rem - 1px);
}

.card-img-bottom {
    border-bottom-right-radius: calc(0.25rem - 1px);
    border-bottom-left-radius: calc(0.25rem - 1px);
}

@media (min-width: 576px) {
    .card-deck {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    }
    .card-deck .card {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
        -webkit-flex: 1 0 0%;
        -ms-flex: 1 0 0%;
        flex: 1 0 0%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .card-deck .card:not(:first-child) {
        margin-left: 15px;
    }
    .card-deck .card:not(:last-child) {
        margin-right: 15px;
    }
}

@media (min-width: 576px) {
    .card-group {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    }
    .card-group .card {
        -webkit-box-flex: 1;
        -webkit-flex: 1 0 0%;
        -ms-flex: 1 0 0%;
        flex: 1 0 0%;
    }
    .card-group .card + .card {
        margin-left: 0;
        border-left: 0;
    }
    .card-group .card:first-child {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }
    .card-group .card:first-child .card-img-top {
        border-top-right-radius: 0;
    }
    .card-group .card:first-child .card-img-bottom {
        border-bottom-right-radius: 0;
    }
    .card-group .card:last-child {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }
    .card-group .card:last-child .card-img-top {
        border-top-left-radius: 0;
    }
    .card-group .card:last-child .card-img-bottom {
        border-bottom-left-radius: 0;
    }
    .card-group .card:not(:first-child):not(:last-child) {
        border-radius: 0;
    }
    .card-group .card:not(:first-child):not(:last-child) .card-img-top,
    .card-group .card:not(:first-child):not(:last-child) .card-img-bottom {
        border-radius: 0;
    }
}

@media (min-width: 576px) {
    .card-columns {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
        -webkit-column-gap: 1.25rem;
        -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
    }
    .card-columns .card {
        display: inline-block;
        width: 100%;
        margin-bottom: 0.75rem;
    }
}