/*** Lilybud style by Kevin. Built on Bootstrap 5. 

** Colours **
Pink - #ff3399 

** Breakpoints **
@media (min-width: 576px) - sm
@media (min-width: 768px) - md
@media (min-width: 992px) - lg
@media (min-width: 1200px) - xl
@media (min-width: 1400px) - xxl

***/

/************ General default settings first ************/
html { scroll-behavior: smooth; }

body {
background-color: #fafafa;
font-family: "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

h1 { color: #555555; }
h2, h3, h4, h5 { color: #ff3399; }


a:link, a:visited { color: #000066; text-decoration: none; }
a:hover, a:focus, a:active { color: #ff0000; text-decoration: underline; }

a.nav-link:link { color: #666666; }

h2 a:link, h2 a:visited, h3 a:link, h3 a:visited { color: #ff3399; font-weight: 400; }
h2 a:hover, h2 a:focus, h2 a:active, h3 a:hover, h3 a:focus, h3 a:active { color: #ff0000; font-weight: 400; }


/************ layout stuff ****************/
.header-image { width: 100%; }

.navbar {
width: 100%; 
align-items: flex-start; 
padding: 0 1rem;  
}

.navbar-light .navbar-collapse { flex-grow: initial; }

@media (min-width: 992px) {
.navbar-nav { font-size: 1.125rem;}
}

@media (max-width: 991px) {
.navbar-nav {
font-size: 1.5rem;
text-align: center;
}
}

.navbar-toggler { font-size: 1.5rem; }

.footer { border-top: 1px solid #ff3399; }


/************* Portfolio pages *****************/
.portfolio-main h3 { font-size: 1.25rem; margin-top: .5rem; } /* Main portfolio page */


/************* Bits and bobs *****************/
.text-white { color: #fafafa !important; }

p .pink, ul .pink { font-weight: 700; }

.vid-icon { max-width: 340px; }
.vid-icon img { margin-right: 1em; margin-top: 4px; }

.quote { /* for testimonials */
background:   url("images/bits/quote-l-b.gif") no-repeat top left; 
padding: 5px 0 0 40px;
color: #999999;
margin-bottom: 2rem
}
.quote span { /* for testimonials */
background:   url("images/bits/quote-r-b.gif") no-repeat bottom right;
padding: 0 40px 5px 0;
min-height: 25px; /* to see full pic with one line of text */
text-align: justify;
color: #333333;
display: block;
margin-bottom: .375rem; /* new */
overflow: hidden; /* new */
}

.figure-caption { font-size: 1rem; }


/*********** Masonry style **********/
.grid-sizer, .grid-item, .grid-item--width2 { width: 100%; }

.grid-item { border-radius: 6px; margin-bottom: 1rem; }

@media (min-width: 768px) {
.grid-sizer, .grid-item, .grid-item--width2 { width: 48.5%; }
.gutter-sizer { width: 3%; }
}

@media (min-width: 992px) {
.grid-sizer, .grid-item { width: 32%; }
.gutter-sizer { width: 2%; }
.grid-item--width2 { width: 66%; }
}

@media (min-width: 1200px) {
.grid-sizer, .grid-item { width: 24%; }
.gutter-sizer { width: 1.33%; }
.grid-item--width2 { width: 49.33%; }
}


/*------------------------------------
- COLOR lilybud-pink
------------------------------------*/
.alert-lilybud-pink {
    color: #b7005b;
    background-color: #ffffff;
    border-color: #ffeaf4;
}

.alert-lilybud-pink hr {
    border-top-color: #ffd1e8;
}

.alert-lilybud-pink .alert-link {
    color: #840042;
}

.badge-lilybud-pink {
    color: #fff;
    background-color: #ff3399;
}

.badge-lilybud-pink[href]:hover, .badge-lilybud-pink[href]:focus {
    color: #fff;
    background-color: #ff007f;
}

.bg-lilybud-pink {
    background-color: #ff3399 !important;
}

a.bg-lilybud-pink:hover, a.bg-lilybud-pink:focus,
button.bg-lilybud-pink:hover,
button.bg-lilybud-pink:focus {
    background-color: #ff007f !important;
}

.border-lilybud-pink {
    border-color: #ff3399 !important;
}

.btn-lilybud-pink {
    color: #fff;
    background-color: #ff3399;
    border-color: #ff3399;
}

.btn-lilybud-pink:hover {
    color: #fff;
    background-color: #ff0f87;
    border-color: #ff007f;
}

.btn-lilybud-pink:focus, .btn-lilybud-pink.focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 51, 153, 0.5);
}

.btn-lilybud-pink.disabled, .btn-lilybud-pink:disabled {
    color: #fff;
    background-color: #ff3399;
    border-color: #ff3399;
}

.btn-lilybud-pink:not(:disabled):not(.disabled):active, .btn-lilybud-pink:not(:disabled):not(.disabled).active, .show > .btn-lilybud-pink.dropdown-toggle {
    color: #fff;
    background-color: #ff007f;
    border-color: #ef0077;
}

.btn-lilybud-pink:not(:disabled):not(.disabled):active:focus, .btn-lilybud-pink:not(:disabled):not(.disabled).active:focus, .show > .btn-lilybud-pink.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 51, 153, 0.5);
}

.btn-outline-lilybud-pink {
    color: #ff3399;
    background-color: transparent;
    border-color: #ff3399;
}

.btn-outline-lilybud-pink:hover {
    color: #fff;
    background-color: #ff3399;
    border-color: #ff3399;
}

.btn-outline-lilybud-pink:focus, .btn-outline-lilybud-pink.focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 51, 153, 0.5);
}

.btn-outline-lilybud-pink.disabled, .btn-outline-lilybud-pink:disabled {
    color: #ff3399;
    background-color: transparent;
}

.btn-outline-lilybud-pink:not(:disabled):not(.disabled):active, .btn-outline-lilybud-pink:not(:disabled):not(.disabled).active, .show > .btn-outline-lilybud-pink.dropdown-toggle {
    color: #fff;
    background-color: #ff3399;
    border-color: #ff3399;
}

.btn-outline-lilybud-pink:not(:disabled):not(.disabled):active:focus, .btn-outline-lilybud-pink:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-lilybud-pink.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 51, 153, 0.5);
}

.list-group-item-lilybud-pink {
    color: #b7005b;
    background-color: #ffeaf4;
}

.list-group-item-lilybud-pink.list-group-item-action:hover, .list-group-item-lilybud-pink.list-group-item-action:focus {
    color: #b7005b;
    background-color: #ffd1e8;
}

.list-group-item-lilybud-pink.list-group-item-action.active {
    color: #fff;
    background-color: #b7005b;
    border-color: #b7005b;
}

.table-lilybud-pink,
.table-lilybud-pink > th,
.table-lilybud-pink > td {
    background-color: #ffeaf4;
}

.table-hover .table-lilybud-pink:hover {
    background-color: #ffd1e8;
}

.table-hover .table-lilybud-pink:hover > td,
.table-hover .table-lilybud-pink:hover > th {
    background-color: #ffd1e8;
}

.text-lilybud-pink, .pink {
    color: #ff3399 !important;
}

a.text-lilybud-pink:hover, a.text-lilybud-pink:focus {
    color: #ff007f !important;
}