@charset "utf-8";
/* CSS Document */

body {
color: #000000 !important;
min-height: 100%;
}
#top {
height: 30px !important;
}
.custom-border-black {
border-top: solid;
border-top-color: black;
border-top-width: 10px;
}
.custom-border-black2 {
border-bottom: solid;
border-bottom-color: black;
border-bottom-width: 10px;
}
.navbar-collapse {
align-items: end !important;
}
.navbar-nav {
font-size: 1.25rem !important;
font-weight: 600 !important;
vertical-align: middle !important;
}
.custom-nav-text {
font-size: 1.25rem !important;
font-weight: 600 !important;
}
/* Extra small devices (360px and down) */
@media only screen and (max-width: 360px)
{.custom-nav-text {
font-size: 1rem !important;
}} 

.navbar-expand-lg .navbar-nav .custom-nav-item-last {
padding-right: 0 !important;
margin-right: 0 !important;
}
.navbar-expand-lg .navbar-nav .nav-link .custom-nav-item-last {
padding-right: 0 !important;
margin-right: 0 !important;
}
.dropdown-item {
font-size: 1.25rem !important;
font-weight: 600 !important;
color: #000000 !important;
}
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item:active {
background-color: #ffffff !important;
}
.nav-link {
color: #000000 !important;
margin-right: 1rem !important;
}
.nav-link:hover, .nav-link:focus, .nav-link:active {
color: #f02825 !important;
}
.nav-item {
margin-right: 1rem !important;
}
.custom-nav-icon-item {
margin-right: 2.5rem !important;
padding-bottom: 1rem !important;
}
.custom-nav-item-last {
margin-right: 0 !important;
padding-right: 0 !important;
}





.custom-svg {
margin-right: 6px !important;
vertical-align: text-bottom !important;
width: 1.25rem !important;
height: 1.25rem !important;
}


.jumbotron-top {
/*background-image: url("../images/cover2.jpg");*/
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
background-position: center;
background-repeat: repeat-x;
height: 6px;
}

.jumbotron {
/*background-image: url("../images/cover2.jpg");*/
background-image: linear-gradient(to right, violet,indigo,blue,green,yellow,orange,red);
background-position: center;
background-repeat: repeat-x;
height: 11px;
}

.custom-h1-page-title {
font-size: 1.5rem !important;
font-weight: 700 !important;
line-height: 1.5 !important;
}
.custom-page-subtitle {
font-size: 1.15rem !important;
font-weight: 600 !important;
line-height: 1.5 !important;
}
.custom-gallery-subtitle {
font-size: 1.15rem !important;
font-weight: 600 !important;
line-height: 1.5 !important;
color: #ffffff !important;
background-color: #181818 !important;
text-align: center !important;
vertical-align: middle !important;
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
}


p {
font-size: 1.15rem !important;
color: #000000 !important;
}


/*on service pages*/
.feature-lists {
font-size: 1.15rem !important;
font-weight: 600 !important;
color: #000000 !important;
vertical-align: middle !important;
}

/*on portfolio page*/
.feature-lists2 {
font-size: 1.15rem !important;
color: #000000 !important;
vertical-align: middle !important;
list-style: none !important;
}



/* Extra small devices (370px and down) */
@media only screen and (max-width: 370px)
{.custom-footer-text {
font-size: 0.95rem !important;
color: #ffffff !important;
}}

.custom-footer-text {
color: #ffffff !important;
}

.copyright {
font-weight: 600 !important;
}

.custom-a {
text-decoration: none !important;
color: black !important;
outline: none;
border: none;
}
.custom-a:hover, .custom-a:focus, .custom-a:active, .custom-a2:hover, .custom-a2:focus, .custom-a2:active {
text-decoration: none !important;
color: #f02825 !important;
outline: none;
border: none;
}
.custom-a2 {
text-decoration: none !important;
color: #ffffff !important;
outline: none;
border: none;
}
.custom-pc-icon {
margin-right: 0.85rem !important;
vertical-align: middle !important;
}
.custom-pc-icon-cards {
margin: 0 !important;
vertical-align: text-bottom !important;
}

.custom-box-border {
border: solid 3px #181818;
}

.custom-card-colours {
background-color: #000000 !important;
color: #ffffff !important;
}

.custom-card:hover {
animation: shake 0.5s;
box-shadow: 5px 10px 18px #888888;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
}
.custom-card-a {
text-decoration: none;
color: black;
}
.custom-card-a:hover {
text-decoration: none;
color: black;
}
.custom-card-title {
color: #ffffff !important;
font-size: 1.25rem !important;
font-weight: 600 !important;
line-height: 1.25rem !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.custom-card-p-portfolio-text {
padding: 0rem !important;
margin-bottom: 0rem !important;
margin-top: 0.5rem !important;
margin-left: 0.25rem !important;
margin-right: 0rem !important;
}
.custom-card-p-portfolio-text-no-list {
padding: 0rem !important;
margin-bottom: 1rem !important;
margin-top: 0.5rem !important;
margin-left: 0.25rem !important;
margin-right: 0rem !important;
}
.custom-card-rainbow-border-top {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
background-position: center;
background-repeat: repeat-x;
height: 5px;
}
.custom-card-rainbow-border-bot {
background-image: linear-gradient(to left, red,orange,yellow,green,blue,indigo,violet);
background-position: center;
background-repeat: repeat-x;
height: 5px;
}

.custom-hidden {
display: none !important;
}
.custom-service-page-images {
width: 100% !important;
}


/*gallery*/
.my-gallery {
width: 100%;
margin-top: 1.5rem;
margin-bottom: 5rem;
}
#my-gallery a {
text-decoration-line: none !important;
}
/*using the object fit cover here, and the data crop value on anchor, means the thumbs are generated auto and animate to full, but it centres the crop, if youuse object position to put at top it ruins the animation. for full control over crop need to make the thumbs separately myself and set size below as needed, but this looks nice. also using the dynamic caption plugin*/
#my-gallery a img {
margin: 3px 1px;
padding: 0px;
width: 150px;
height: 100px;
object-fit: cover;
}
#my-gallery a.portfolio img {
margin: 3px 1px;
padding: 0px;
width: 100%;
height: 100%;
object-fit: cover;
}
.custom-caption-bold {
font-size: 1rem !important;
font-weight: 600 !important;
color: #ffffff !important;
margin: 0;
padding-top: 0;
padding-left: 0;
padding-right: 0;
padding-bottom: 4px !important;
}
.custom-caption {
font-size: 1rem !important;
color: #ffffff !important;
margin: 0;
padding-top: 0;
padding-left: 0;
padding-right: 0;
padding-bottom: 4px !important;
}