@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700,700i'); 

/* sticky header background, in case option is checked */
.sticky-top > #hero-plus-header {
  background-color: white;
}
/*Header Box*/
#hero-plus-header {  
}
/*Hero Box*/
#hero-plus-hero {align-items:start;
}
/*Body Box*/
#hero-plus-body { font-size: 18px;
}
/*Footer Box*/
#hero-plus-footer{ background: #28417C;  padding: 20px; text-align:center;
}

.col-md-6 {float: left;}
.cl-left {text-align: right; color: #fff;}
.cl-right {text-align: left; color: #fff;}
h3 {
    font-family: "Roboto", Arial, sans-serif;
    color: #fff;
    font-size: 164%;
    font-weight: bold;
    letter-spacing: -1px;
    min-height: 35px;
    margin: auto;
    padding: 10px;
    margin-bottom: 20px;
    margin-top: 10px;
    border-bottom: #A3C9D9 solid 2px;
    display: inline-block;
}

/* Control carousel arrow*/
.carousel-gallery-arrow {
}
.tq {
    font-weight: bold;
    text-align: center;
    padding: 15px;
    background: #fff;
    font-size: 110%;
    color: #28417c;
    margin: -5% 0px 2%;
}
.logo {margin: 20px;}
.hero {max-width: 100%;}
#txt {padding: 2% 10%;}
#gallery {padding: 2% 5%; background: #28417C;}
#gallery h2 {display:none;}
#gallery .col-lg-3 {
    -ms-flex: 0 0 33.33%;
    flex: 0 0 33.33%;
    max-width: 33.33%;
}
#gallery {
    padding: 2% 5%;
    background: #28417C;
    max-width: 100%;
    flex-basis: 100%;
}
.card-body {display:none;}
.ctab, .ctab:visited, .ctab:hover {    background-color: #28417C; padding: 20px; color: #fff!important; margin: 20px; text-align:Center; text-decoration:none !important; font-family: "Roboto", Arial, sans-serif;}

.h1, h1 {
    color: #28417C;
    font-size: 32px!important;
    font-weight: 300;
    text-align: center;
    margin: 30px auto 28px;
}

.h2, h2 {
    text-align: center;
    font-weight: normal;
    margin: 30px 0px 40px;
}
.card-columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
}
.link, .link:visited, .link:hover {
    display: block;
    color: #fff;
    text-decoration: none !Important;
    margin: 10px auto;
    padding: 10px;
    font-weight: bold;
    font-family: "Roboto", Arial, sans-serif;
}
.soc, .soc:visited, .soc:hover {color: #fff; display: inline-block; padding: 10px; margin: 10px;}

@media only screen and (max-width: 980px) {
#hero-plus-footer {
    display: block;
}
.socbar {
    display: block;
    text-align: center;
    margin: 10px auto;
}
}
@media only screen and (max-width: 768px) {

#gallery .col-lg-3 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

#hero-plus-header {
    display: block;
}

.logo {
    display: block;
    margin: 10px auto;
}
.ctab {
    display: block;
}
.card-columns {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
}
.cl-left {
    text-align: left;
    color: #fff;
}
}