body {
  font-family: Aclonica, sans-serif;
  background-color: rgb(5,5,5);
}

@media (min-width: 360px) {
  #headingMain {
    font-size: 60px;
    filter: invert(10%);
    animation: fadeIn;
    animation-duration: 7s;
    font-family: Buda, cursive;
  }
}

@media (max-width: 414px) {
  #headingMain {
    font-size: 35px;
    filter: invert(10%);
    animation: fadeIn;
    animation-duration: 7s;
    font-family: Buda, cursive;
  }
}

#paragraphMain {
  font-size: 30px;
  color: rgb(255,255,255);
  animation: fadeIn;
  animation-duration: 7s;
  filter: invert(7%);
  font-family: 'Architects Daughter', cursive;
}

#header {
  background-image: url(../../assets/img/bg3.jpg);
  animation: fadeIn;
  animation-duration: 7s;
}

#headerContainer {
  background-color: rgba(11,11,11,0.6);
  padding-top: 20px;
}

#findOutMoreButton {
  padding-bottom: 16px;
  background-color: rgb(80,117,132);
  animation: fadeIn;
  animation-duration: 7s;
  color: rgb(33,37,41);
  font-size: 14px;
  font-weight: bold;
  visibility: hidden;
}

.bg-primary {
  background-color: rgb(20,20,21)!important;
}

#aboutParagraph {
  font-size: 19px;
  font-family: Buda, cursive;
  color: rgb(248,249,250);
}

hr {
  border-width: 3px;
  border-color: #39a0c6;
}

#aboutHeading {
  font-family: Buda, cursive;
  font-size: 25px;
}

.text-primary {
  color: rgb(103,112,115)!important;
}

#services {
  background-color: rgba(255,255,255,0.95);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Abhaya Libre', serif;
  font-size: 22px;
}

.text-muted.mb-0 {
  font-family: 'Abhaya Libre', serif;
  font-size: 18px;
}

hr.light {
  border-color: #39a0c6;
}

#servicesHeading {
  font-size: 26px;
  font-family: Buda, cursive;
}

.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
  background-color: #31373a!important;
  border-color: white;
}

#portfolioBox {
  background-color: rgba(33,37,41,0.75);
}

#portfolioSpan {
  font-family: Buda, cursive;
}

#contact {
  background-size: cover;
  background-image: url(../../assets/img/contact.jpeg);
}

#contactParagraph {
  font-family: Buda, cursive;
  font-size: 20px;
  color: #a7acae;
}

#contactHeading {
  font-family: Buda, cursive;
  font-size: 28px;
  color: #a7acae;
}

#telephoneIcon {
  color: rgb(80,117,132);
}

#emailIcon {
  color: rgb(80,117,132);
  margin-top: 20px;
}

#emailLink {
  color: #a7acae;
  font-size: 20px;
  font-family: Buda, cursive;
}

#telephoneNumber {
  font-family: Buda, cursive;
  font-size: 20px;
  color: #a7acae;
}

#seeUsOnSiteSection {
  padding: 50px;
}

#map {
  box-shadow: 2px 2px 2px 2px rgba(167,172,174,0.4);
  opacity: 0.85;
}

#bottomColumn {
}

#inSane {
  font-family: 'Amatic SC', cursive;
  font-size: 18px;
  color: rgba(240,249,255,0.7);
  margin-top: 16px;
}

#getInTouchButton {
  font-size: 14px;
  background-color: #507584;
}

#footer {
  padding-top: 20px;
  padding-bottom: 20px;
}

.bg-dark {
  background-color: #050505!important;
}

#videoFromDataBase {
  text-align: center;
}

#portfolio {
  text-align: center;
  margin-top: 7px;
}

a, a:hover {
  color: #507584;
}

#mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover, #mainNav .navbar-nav > li.nav-item > a.nav-link:hover {
  color: #507584;
}

@media (min-width: 992px) {
  img {
    width: 260px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

@media (min-width:1200px) {
  header.masthead h1 {
    margin-top: 50px;
  }
}

.ml-auto, .mx-auto {
  padding-top: 20px;
}