h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px
}

* {
  scroll-behavior: smooth;
}

html {
  overflow: scroll;
}

.container-fluid {
	padding: 0px;
}

a {
    color: #fdb602;
}

a:hover {
    color: black;
}

.animate__backInUp {
    animation-duration: 4s;
}

.animate__shakeY {
    animation-duration: 2s;
    animation-iteration-count: infinite
}

.animate__pulse {
    animation-duration: 2s;
    animation-iteration-count: infinite
}

.topbar a:hover {
    background-color: #fdb602;
}

.mainbox {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px
}

a,
a:hover i,
i {
    text-decoration: none !important
}

.fullbox,
.icon,
.mainbox:hover a,
.textbox,
.topbar a {
    text-decoration: none;
    font-family: 'Orbitron', sans-serif
}

.topbar {
    margin: auto
}

.topbar li {
    display: inline-block
}

.topbar i {
    color: #999999
}

.topbar i:hover {
    color: #fff;
    cursor: pointer
}

.topbar a {
    color: #fdb602
}

.topbar a:hover {
    border-radius: 5px;
    color: #fff;
    padding: 3px 5px;
    cursor: pointer
}

.mainbox {
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: black;
    font-weight: 400
}

.mainbox:hover {
    background-color: #fdb602;
    cursor: pointer
}

.mainbox a {
    color: #fdb602
}

.mainbox:hover a {
    color: #fff;
    cursor: pointer
}

.mainbox h2 {
    font-size: 18px
}

@media screen and (max-width:1200px) {
    .mainbox h2 {
        font-size: 13px
    }
}

@media screen and (max-width:992px) {
    .mainbox h2 {
        font-size: 9px;
    }
}

@media screen and (max-width:768px) {
    .mainbox h2 {
        display: none;
    }
}

.fullbox {
    background: url(../images/emergencyplumberbristol-2.jpg) center center/cover no-repeat;
    border-radius: 10px;
    height: 350px;
    padding: 10px;
    margin: 10px
}

.fullbox a {
    color: black;
}

.textbox h2,
.textbox h3 {
    margin: 0 auto;
    padding-left: 6px;
    text-transform: uppercase
}

.textbox {
    border: 2px solid #fdb602;
    border-radius: 5px;
    width: 33%;
    float: right;
    background: #fff;
    text-align: center;
    color: black
}

.textbox h2 {
    color: black;
    font-weight: 700;
    font-size: 18px;
    padding-top: 10px
}

@media screen and (max-width:1200px) {
    .textbox {
        width: 40%
    }
    .textbox h2 {
        font-weight: 700;
        font-size: 18px
    }
}

@media screen and (max-width:992px) {
    .textbox {
        width: 50%
    }
    .textbox h2 {
        font-weight: 700;
        font-size: 16px
    }
}

@media screen and (max-width:768px) {
    .textbox {
        width: 66%
    }
    .textbox h2 {
        font-weight: 700;
        font-size: 16px
    }
}

.textbox h3 {
    color: #fdb602;
    font-weight: 700;
    font-size: 10px
}

.fullboxbottom p a {
    color: #fdb602;
}

.fullboxbottom p a:hover {
    color: black;
}

.fullboxbottom,
.fullboxmiddle {
    height: 350px;
    padding: 10px;
    margin: 10px;
    text-decoration: none
}

@media screen and (max-width:1200px) {
    .textbox h3 {
        font-weight: 700;
        font-size: 14px
    }
}

@media screen and (max-width:992px) {
    .textbox h3 {
        font-weight: 700;
        font-size: 12px
    }
}

@media screen and (max-width:768px) {
    .textbox h3 {
        font-weight: 700;
        font-size: 10px
    }
}

.textbox p {
    padding: 8px;
    font-weight: 400;
    font-size: 10px;
    color: black
}

.fullboxmiddle {
    background: url(../images/heatingengineerbristol.jpg) center center/cover no-repeat;
    border-radius: 10px
}

.textboxleft {
    border: 2px solid black;
    border-radius: 5px;
    width: 33%;
    float: left;
    text-decoration: none;
    background: #fff;
    text-align: center;
    color: black
}

.fullboxbottom,
.warning h1,
.warning p {
    border-radius: 10px
}

.card-block p,
.card-inner {
    text-align: left;
    font-family: 'Orbitron', sans-serif;
}

@media screen and (max-width:1200px) {
    .textbox p {
        font-weight: 600;
        font-size: 14px
    }
    .textboxleft {
        width: 40%
    }
}

@media screen and (max-width:992px) {
    .textbox p {
        font-weight: 600;
        font-size: 12px
    }
    .textboxleft {
        width: 50%
    }
}

@media screen and (max-width:768px) {
    .textbox p {
        font-weight: 400;
        font-size: 10px
    }
    .textboxleft {
        width: 66%
    }
}

.fullboxbottom {
    background: url(../images/boilerbreakdown.jpg) center center/cover no-repeat
}

.logo {
    text-transform: uppercase;
}

.logo h3 {
    margin: 5px;
    font-size: 20px;
    font-weight: 700
}

@media screen and (max-width:1200px) {
    .logo h3 {
        font-size: 18px
    }
}

@media screen and (max-width:992px) {
    .logo {
      display: none;
    }
}

.warning h1,
.warning p {
    margin: 0 auto;
    color: #fff
}

@media screen and (max-width:1200px) {
    .logo p {
        font-size: 12px
    }
}

@media screen and (max-width:992px) {
    .logo p {
        font-size: 10px
    }
}

@media screen and (max-width:768px) {
    .logo p {
        font-size: 10px
    }
}

.warning {
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Orbitron', sans-serif;
    color: black;
    width: 98%
}

.warning h1 {
    font-size: 30px;
    font-weight: 900;
    background-color: #fdb602;
    width: 98%;
    padding: 15px
}

.warning h2,
.warning p {
    font-weight: 400;
    width: 98%
}

@media screen and (max-width:1200px) {
    .warning h1 {
        font-size: 24px
    }
}

@media screen and (max-width:992px) {
    .warning h1 {
        font-size: 20px
    }
}

@media screen and (max-width:768px) {
    .warning h1 {
        font-size: 18px
    }
}

.warning h2 {
    padding: 20px;
    font-size: 20px
}

@media screen and (max-width:1200px) {
    .warning h2 {
        font-size: 18px
    }
}

@media screen and (max-width:992px) {
    .warning h2 {
        font-size: 16px
    }
}

@media screen and (max-width:768px) {
    .warning h2 {
        font-size: 12px;
        padding-bottom: 8px
    }
}

.warning p {
    font-size: 16px;
    background-color: black
}

#callbtn,
#small {
    background-color: #fff;
    color: #fdb602;
    font-weight: bold
}

@media screen and (max-width:1200px) {
    .warning p {
        font-size: 15px;
        padding: 25px 90px
    }
}

@media screen and (max-width:992px) {
    .warning p {
        font-size: 13px;
        padding: 20px 75px
    }
}

@media screen and (max-width:768px) {
    .warning p {
        font-size: 10px;
        padding: 5px 20px;
        font-weight: 100
    }
}

#small {
    margin: 0 auto;
    font-size: 10px;
    font-weight: 400;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Orbitron', sans-serif;
    width: 98%;
    padding: 5px
}

@media screen and (max-width:768px) {
    #small {
        font-size: 6px
    }
}

#callbtn {
    border: 1px solid #fdb602;
    background-color: black;
    padding: 10px;
    font-size: 20px;
    border-radius: 10px;
    font-weight: 700
}

#callbtn:hover,
.icons {
    background-color: #fdb602;
}

#callbtn:hover {
    color: #fff;
    border: 1px solid #fff;
    cursor: pointer
}

.card,
.card-title,
.icons,
.top,
.topimg img {
    border-radius: 2px;
}

#callbtn a {
    color: #fdb602
}

#callbtn:hover a {
    color: #fff
}

.icons a {
  color: #fff;
}

#callbtn i {
    padding-right: 10px;
    position: relative;
    animation-name: phone;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes phone {
    0% {
        transform: rotate(5deg);
        color: black;
    }
    5% {
        transform: rotate(10deg);
        color: #fdb602;
    }
    10% {
        transform: rotate(5deg);
        color: black;
    }
    15% {
        transform: rotate(0deg);
        color: #fdb602;
    }
    20% {
        transform: rotate(-5deg);
        color: black;
    }
    25% {
        transform: rotate(-10deg);
        color: #fdb602;
    }
    30% {
        transform: rotate(-5deg);
        color: black;
    }
    35% {
        transform: rotate(0deg);
        color: #fdb602;
    }
    40% {
        transform: rotate(5deg);
        color: black;
    }
    45% {
        transform: rotate(10deg);
        color: #fdb602;
    }
    50% {
        transform: rotate(5deg);
        color: black;
    }
    55% {
        transform: rotate(0deg);
        color: #fdb602;
    }
    60% {
        transform: rotate(-5deg);
        color: black;
    }
    65% {
        transform: rotate(-10deg);
        color: #fdb602;
    }
    70% {
        transform: rotate(-5deg);
        color: black;
    }
    75% {
        transform: rotate(0deg);
        color: #fdb602;
    }
    80% {
        transform: rotate(5deg);
        color: black;
    }
    85% {
        transform: rotate(10deg);
        color: #fdb602;
    }
    90% {
        transform: rotate(5deg);
        color: black;
    }
    95% {
        transform: rotate(0deg);
        color: #fdb602;
    }
    100% {
        transform: rotate(5deg);
        color: black;
    }
}

.logo img {
    width: 100%
}

@media screen and (max-width:768px) {
    #callbtn {
        font-size: 14px;
    }
    .logo img {
        width: 70%;
    }
    .icons {
        padding: 10px;
    }
}

.icons ul {
    padding: 0
}

.icons li {
    display: inline-block
}

.icons a {
    font-size: 30px;
    padding: 4px 9px;
}

@media screen and (max-width:768px) {
    .icons a {
        font-size: 24px;
        color: #fff
    }
}

.icons>ul>li>a:hover,
.icons>ul>li>a>i:hover {
    background: #fff;
    color: #fdb602;
    border-radius: 50%;
    cursor: pointer
}

.card-title,
.icons h2,
.icons p {
    color: #fff;
    text-transform: uppercase
}

.icons h2,
.icons p {
    background: #fdb602;
    font-size: 18px;
    font-weight: 400;
    padding-top: 40px;
    margin: 0 auto;
    padding-top: 10px
}

@media screen and (max-width:768px) {
    .icons p {
        font-size: 12px;
    }
}

.card {
    margin: 1px;
    padding: 5px
}

.card-title {
    background-color: #fdb602;
    font-family: 'Orbitron', sans-serif;
    font-size: 16px
}

.card-block {
    font-family: 'Orbitron', sans-serif;
    font-weight: 400;
    color: black
}

.card-block a,
.top {
    color: #fff
}

.card-block a:hover {
    text-shadow: 1px 0 black;
    cursor: pointer
}

.card-img-top {
    margin: 0 auto;
    padding: 10px;
    width: 70%;
    height: 70%
}

.img-fluid {
    padding: 10px 5px
}

@media screen and (max-width:768px) {
    .img-fluid {
        width: 50%;
        margin: 0 auto
    }
}

.top {
    background-color: black;
    font-family: 'Orbitron', sans-serif;
}

.top h2 {
    text-transform: uppercase;
    font-size: 22px
}

.topimg {
    width: 100%;
}

.topimg img {
    width: 100%
}

.card-inner {
    color: black
}

.card-inner li {
    list-style-type: none
}

.card-inner a {
    color: #fdb602
}

.card-inner a:hover {
    color: black;
    text-shadow: none;
    cursor: pointer
}

.card-h3,
.card-inner h1,
.card-inner h2,
.card-inner h5 {
    border-radius: 10px;
    color: #fff;
    text-transform: uppercase
}

@media screen and (max-width:992px) {
    .card-inner li {
        font-size: 13px
    }
}

@media screen and (max-width:768px) {
    .card-inner li {
        font-size: 11px
    }
    .card-block p {
        text-align: center
    }
}

.card-inner h1 {
    font-size: 18px;
    background-color: #fdb602;
    font-weight: 700
}

.card-inner h2,
.card-inner h5 {
    font-size: 16px;
    background-color: #fdb602
}

.card-h3 {
    background-color: black;
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    font-weight: 400
}

.card-inner h4 {
    font-size: 18px;
    font-weight: 700
}

.card-block p {
    font-weight: 400
}

.btnsm {
    border: 1px solid black;
    font-size: 10px;
    border-radius: 10px;
    font-weight: 400;
    text-transform: uppercase
}

.btnsm:hover {
    border: 1px solid #fdb602;
    cursor: pointer
}

.btnsm a {
    color: black
}

.btnsm a:hover {
    color: #fdb602;
    text-shadow: 1px 0 #fdb602;
    cursor: pointer
}

.nearme {
    font-family: 'Orbitron', sans-serif
}

@media screen and (max-width:768px) {
    .card-inner,
    .nearme {
        text-align: center
    }
}

.nearme h2 {
    background-color: #fdb602;
    color: #fff;
    border-radius: 10px;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 700
}

.nearme h4,
.nearme p {
    font-size: 14px;
    color: black;
    font-weight: 700
}

.nearme h5,
.nearme h6 {
    color: #fdb602;
    font-weight: 700
}

.nearme h5 {
    font-size: 20px
}

.nearme a,
.nearme h3,
.nearme li {
    color: #fdb602
}

.nearme li {
    padding: 3px;
    font-size: 14px
}

.nearme h3 {
    font-size: 12px
}

.nearme a:hover {
    font-weight: 700;
    color: black
}

.newsletter {
    background-color: black;
    font-family: 'Orbitron', sans-serif;
    font-weight: 400;
    border-radius: 10px
}

#contact-form input:active {
    color: #fdb602
}

.newsletter h5,
.newsletter p {
    color: #fff
}

.form-group {
    width: 50%;
    padding: 10px;
    margin: 0 auto
}

#modalTitle,
.modal-title {
    color: #fdb602
}

.modal-body p {
    text-align: left;
    color: black
}

.form-check-label {
    color: #fdb602;
    font-size: 10px;
    font-family: 'Orbitron', sans-serif
}

.form-text {
    color: #fff
}

.form-check a {
    outline: 0;
    color: #fdb602;
    font-weight: 700
}

.form-check a:hover {
    border-bottom: #fdb602 dotted 1px;
    cursor: pointer
}

.btn {
    background-color: #fff;
    color: #fdb602
}

.btn:hover {
    background-color: #fdb602;
    color: #fff;
    cursor: pointer
}

.copy p {
    font-family: 'Orbitron', sans-serif;
    font-weight: 400;
    color: black;
    font-size: 14px
}

.mainheader h1,
.mainheader h2 {
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
    border-radius: 10px
}

.terms {
    font-family: 'Orbitron', sans-serif;
}

.mainheader {
    font-family: 'Orbitron', sans-serif;
    text-align: left
}

.mainheader h1 {
    background-color: black
}

.mainheader h2 {
    background-color: #fdb602
}

.mainheader h3 {
    font-size: 17px;
    font-weight: 500;
    background-color: black;
    color: #fff;
    border-radius: 10px;
    text-transform: uppercase
}

.mainheader h4 {
    font-size: 16px;
    font-weight: 700;
    color: black
}

.mainheader h5 {
    font-size: 14px;
    font-weight: 400;
    color: #fdb602
}

.mainheader p {
    color: black;
    font-size: 16px
}

.contactinfo p {
    font-size: 14px;
    color: black
}

.socialbar {
    font-family: 'Orbitron', sans-serif;
}

.socialbar p {
    font-size: 16px;
    font-weight: 700;
    color: #fdb602
}

@media screen and (max-width:768px) {
    .mainheader {
        text-align: center
    }
    .socialbar p {
        font-size: 11px
    }
}

.socialbar i {
    font-size: 50px;
    color: black
}

.socialbar i:hover {
    color: #fdb602;
    cursor: pointer;
    outline: 0
}

.contact-page {
    width: 70%;
    font-family: 'Orbitron', sans-serif;
    margin: 10px;
    border-radius: 10px;
    color: black
}

.contact-page button,
.contact-page input,
.contact-page textarea {
    width: 100%;
    text-align: center;
    margin: 10px;
    padding: 10px;
    outline: 0
}

.contact-page input {
    border-radius: 10px;
    border: 1px solid black;
    border-bottom: 3px black solid
}

.contact-page input:active {
    color: #fdb602
}

.contact-page textarea {
    border-radius: 10px;
    border: 1px solid black;
    border-bottom: 3px black solid
}

.contact-page button {
    border-radius: 10px;
    color: #fff;
    background-color: black;
    border: none
}

.contact-page button:hover {
    cursor: pointer;
    background-color: #fdb602
}

.thx {
    font-size: 14px;
    color: black;
    font-family: 'Orbitron', sans-serif;
}

#hiddentext p {
    color: #fff;
    font-size: 1px
}

.socialbox {
    margin: auto;
    width: 50%;
    padding: 10px
}

@media screen and (max-width:587px) {
    .d-sm-block {
        display: block !important
    }
}

/* NAVBAR CSS */
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 10vh;
  background-color: black;
  font-family: 'Audiowide', cursive;
}

.logotop {
  color: white;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 20px;
}

.logotop p {
  font-family: 'Audiowide', cursive;
  font-size: 11px;
  width: 100%;
  letter-spacing: 1px;
  color: black;
  font-weight: 700;
}

.logotop img {
  width: 15vh;
  height: 8vh;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 40%;
}

.nav-links li {
  list-style: none;
  font-family: 'Orbitron', sans-serif;
}

.nav-links a {
  color: white;
  text-decoration: none;
  letter-spacing: 2px;
  font-size: 14px;
}

.burger {
  display: none;
  cursor: pointer;
}

.burger div {
  width: 23px;
  height: 2px;
  background-color: white;
  margin: 5px;
  transition: all 0.3s ease;
}

@media screen and (max-width:1200px) {
  .nav-links {
    width: 50%;
  }

  .logotop p {
    font-size: 9px;
  }
}

@media screen and (max-width:968px) {
  .nav-links {
    width: 60%;
  }

  .logotop p {
    display: none;
  }
}

@media screen and (max-width:768px) {
  body {
    overflow: hidden;
  }

  .nav-links {
    position: absolute;
    right: 0px;
    height: 30vh;
    top: 16vh;
    background-color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    transform: translateX(100%) scalex(0);
    transition: transform 0.5s ease-in;
  }

  .nav-links li {
    opacity: 0;
  }

  .burger {
    display: block;
  }

  .logotop p {
    display: none;
  }
}

.nav-active {
  transform: translateX(0%);
  z-index: +1;
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

.toggle .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
  opacity: 0;
}

.toggle .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}

/* NAVBAR CSS END */