@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&family=Grey+Qo&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&family=Grey+Qo&family=Matemasie&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');


@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');




@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Passion+One:wght@400;700;900&display=swap');





:root {
    --primary: #5B8C51;
    --secondary: #EDDD5E;
    --light: #F7F7F7;
    --dark: #404A3D;	
	--darkBlue: #00008b;
	--black: #000000;
	--red: #ff0000;
	--lightBlue: #ADD8E6;
	--slider: #40C6CC;
    --parallax: #828282;
}



:root {
  --bs-custom-font-family: "Caveat", cursive;
  --bs-custom1-font-family: "IBM Plex Sans", sans-serif;
  --bs-custom2-font-family: "Open Sans", sans-serif;
  --bs-custom3-font-family: "Dancing Script", cursive;
  --bs-custom4-font-family: "Matemasie", sans-serif;
  --bs-custom5-font-family: "Passion One", sans-serif;
}



	
	

html, body {
	margin-left: 0; 
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
	min-height: 100vh;
	overflow-x: clip;
}

#page-content {
  flex: 100 0 auto;
}


#sticky-footer {
  flex-grow: 100;
  flex-shrink: 0;
  flex-basis: auto;
}



.observeAnimation {
  animation-name: bounceIn; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */}

.observeWrapper {
  font-size: 1.5rem;
  font-family: var(--bs-custom-font-family);
  font-weight: 300;
  line-height: 1.45rem;
}
.observe {
  font-size: 1.5rem;
  font-family: var(--bs-custom-font-family);
  font-weight: 300;
  line-height: 1.45rem;
  color: var(--light);
}



.mickyBoy  {
  font-size: 18px;
	display: inline-block;

  animation: fadeInDown; /*<!--' referring directly to the animation's @keyframe declaration -->*/
  animation-duration: 3s;  /*don't forget to set a duration! */
}


.overlayContent {
  margin-top: 5vh;
  width: 100%;
  height: 5vh;
  z-index: 2;
  text-align: left;
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  position: relative;
}
.jarallaxTexty {
  color: var(--light);
  font-size: 1.5rem;
  font-family: var(--bs-custom-font-family);
  font-weight: 300;
  line-height: 1.45rem;
	width: 100%;
}

.jarallaxSection {
  height: 35vh;
  margin-left: 0;
  margin-right: 0;
  display: flex;
}

.jarallax {
  height: 30vh;
  margin-left: 0;
  margin-right: 0;
}

.jarallaxUndertaken {
  margin-left: 0;
  margin-right: 0;
	 font-size: 2.0rem;
	font-family: var(--bs-custom5-font-family);
	font-weight: 300;
    line-height: 1.45rem;
	color: var(--light);
}

#navbar {
/*  position: sticky-top;
*/	margin-top: 5px;
  z-index: 2000;
}
.navbar {
	position: sticky-top;
	height: 120px;
}
.navbar a {
	height: 60px;
	color: green;
}
.navbar a {
	height: 60px;
	color: white;
}
.nav-link:hover{
    color: darkred;
}


.quickLinks:hover  {
  font-size: 18px;
}
.tnBackColour {
	background-color: var(--parallax);
}


.tnComp {
    font-size: 1.0rem;
	font-family: var(--bs-custom2-font-family);
	font-weight: 500;
    line-height: 1.45rem;
	background-color: var(--lightBlue);
}



.quickLinks {
    font-size: .7rem;
	font-family: var(--bs-custom1-font-family);
	font-weight: 300;
    line-height: 1.45rem;
	color: var(--light);
	background-color: none;
	text-decoration: none;
}



.tnColour {
	background-color: var(--lightBlue);
}

.tnColour1 {
	background-color: var(--parallax);
}

.tnColour2 {
	background-color: var(--parallax);
}



.tnColourSlide {
	font-size: .7rem;
	font-family: var(--bs-custom1-font-family);
	font-weight: 300;
    line-height: .45rem;
	background-color: var(--slider);
}
.split {
	opacity: 1;
    font-size: 2.6rem;
	font-family: var(--bs-custom2-font-family);
	font-weight: 500;
    line-height: 2.2rem;
	color: white;
}

.activate {
	opacity: 1;
    font-size: 2.6rem;
	font-family: var(--bs-custom3-font-family);
	font-weight: 500;
    line-height: 1.2rem;
	color: red;
}


.tnUndertaken {
    font-size: 1.2rem;
	font-family: var(--bs-custom2-font-family);
	font-weight: 500;
    line-height: 1.2rem;
	color: var(--light);
	display: inline-block;

  animation: bounceInLeft; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}

.tnInsured {
    font-size: 1.8rem;
	font-family: var(--bs-custom2-font-family);
	font-weight: 500;
    line-height: 2rem;
	color: var(--light);
}


.tnServingFully {
    font-size: 1.3rem;
	font-family: var(--bs-custom2-font-family);
	font-weight: 500;
    line-height: 2rem;
	color: var(--light);
}




.tnFacebook {
    font-size: .8rem;
	font-family: var(--bs-custom2-font-family);
	font-weight: 500;
    line-height: 1.85rem;
	color: var(--light);
}
.tnPhone {
    font-size: 1.0rem;
	font-family: var(--bs-custom2-font-family);
	font-weight: 500;
    line-height: 1.65rem;
	color: var(--dark);
}
.tnAbout {
    font-size: 1.9rem;
	font-family: var(--bs-custom2-font-family);
	font-weight: 500;
    line-height: 1.85rem;
	color: var(--dark);
}
.tnTurnkey {
    font-size: 1.0rem;
	font-family: var(--bs-custom2-font-family);
	font-weight: 500;
    line-height: 1.85rem;
	color: var(--dark);
}



.tnDesigns {
    font-size: 1.5rem;
	font-family: var(--bs-custom2-font-family);
	font-weight: 500;
    line-height: 1.85rem;
	color: var(--primary);
}


.tnArc {
    font-size: .92rem;
	font-family: var(--bs-custom2-font-family);
	font-weight: 500;
    line-height: 1.2rem;
	color: var(--dark);
}

.tnDrill {
    font-size: 2.3rem;
	font-family: var(--bs-custom3-font-family);
	font-weight: 500;
    line-height: 1.45rem;
	color: var(--darkBlue);
}


.tnBuilders {
    font-size: 3.0rem;
	font-family: var(--bs-custom5-font-family);
    line-height: 0.85rem;
	color: var(--light);
}
.tnAddress {
    font-size: 1.0rem;
	font-family: var(--bs-custom2-font-family);
    line-height: 1.85rem;
	color: var(--light);
}

.ml12 {
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.ml12 .letter {
  display: inline-block;
  line-height: 1em;
}


.tnHomes {
    font-size: 1.2rem;
	font-family: var(--bs-custom2-font-family);
	font-weight: 500;
    line-height: 1.85rem;
	color: var(--parallax);
}

@media screen and (max-width: 575px) {
 .tnHomes {
    font-size: .82rem;
	font-family: var(--bs-custom2-font-family);
	font-weight: 500;
    line-height: 1.85rem;
	color: var(--parallax);
}
}








.tnHeadingBig {
    font-size: 2.2rem;
	font-family: var(--bs-custom3-font-family);
	font-weight: 500;
    line-height: 1.85rem;
	color: var(--darkBlue);
}
.tnHeading {
    font-size: 1.4rem;
	font-family: var(--bs-custom2-font-family);
	font-weight: 500;
    line-height: .5rem;
	color: var(--dark);
}
.tnHeadingData {
    font-size: 1.4rem;
	font-family: var(--bs-custom2-font-family);
	font-weight: 500;
    line-height: 1.7rem;
	color: var(--dark);
}
.tnText {
    font-size: 1rem;
	font-family: var(--bs-custom2-font-family);
	font-weight: 300;
    line-height: 1.4rem;
	color: var(--dark);
}
.tnTextSmall {
    font-size: .75rem;
	font-family: var(--bs-custom2-font-family);
	font-weight: 300;
    line-height: 1.4rem;
	color: var(--dark);
}




ul.logo {
	    padding-top: 2%;
        padding-bottom: 0%;
        list-style-image: url("../images/trowel.png")    	
}
ul.logo1 {
	    padding-top: 2%;
        padding-bottom: 0%;
        list-style-image: url("../images/trowel1.png")    	
}

ul.a {
	list-style-type: disc;
}
ul.b {
	list-style-type: square;
}