/*
Title:      	Ceramic Coating Solutions stylesheet for screen media
Author:     	Karl Ridley, falling@happyleaves.com
Updated:    	1st February 2025
*/


/* WRAPPERS */

html {
  	font-size: 100%;
	}

body {
	font-family: "Titillium Web", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1em;
	line-height: 1.6875;
	text-align: left;
	color: #686868;
	margin: 0 auto;
	-webkit-font-smoothing: antialiased;	
	height: 100%; 
    min-height: 100%;
	background: #f0f0f0; 	
	}


	
::-moz-selection { 
	background: #00b157; 
	color: #ffffff; 
	text-shadow: none; 
	}

::selection { 
	background: #00b157; 
	color: #ffffff; 
	text-shadow: none; 
	}

img::-moz-selection	{ 
	background: transparent; 
	}
	
img::selection { 
	background: transparent; 
	}
	
a:active {
	outline: none;
	}

a:focus	{
	-moz-outline-style: none;
	}	
	
a {
	text-decoration: none;
	-moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    transition: all .3s ease-in;
	}	

p {
	margin: 0 0 1.35em 0; 
	text-align: center;
	color: #686868;
	font-size: 1.0rem;
	line-height: 1.3rem;	
	font-family: "Titillium Web", serif;
	font-weight: 400;
	font-style: normal;
	}
	
em {
	font-family: "Titillium Web", serif;
	font-weight: 400;
	font-style: italic;
	}	

sub {
	font-size: 65%;
    vertical-align: -0.2rem;
	}	

sup {
	font-size: 65%;
    vertical-align: 0.2rem;
	}	
	
strong {
	font-family: "Titillium Web", serif;
	font-weight: 600;
	font-style: normal;
	}	


h1 {
 	text-align: center;
	font-size: 3.2rem;
	line-height: 3.4rem;
	color: #ffffff;
    font-family: "Titillium Web", serif;
	font-weight: 700;
	font-style: normal;
	margin: 0 0 1.4rem 0;
	padding: 0;
	}
@media (max-width: 960px) {
	h1 {	
	font-size: 2.9rem;
	line-height: 3.1rem;
	}
}


h2 {
 	text-align: left;
	font-size: 2.0rem;
	line-height: 2.2rem;
	color: #023844;
	font-family: "Titillium Web", serif;
	font-weight: 700;
	font-style: normal;
	margin: 0 0 1.6rem 0;
	padding: 0;
	}
@media (max-width: 960px) {
	h2 {	
	font-size: 1.8rem;
	line-height: 2.0rem;
	}
}	


.h2_promos {
 	text-align: left;
	font-size: 2.0rem;
	line-height: 2.2rem;
	color: #ffffff;
	font-family: "Titillium Web", serif;
	font-weight: 700;
	font-style: normal;
	margin: 0 0 1.6rem 0;
	padding: 0 8.333% 1.0rem 8.333%;
    float: left;
	}
.h2_promos i {
 	margin-top: 0;
    float: right;
    border: 3px solid #ffffff;
    -webkit-border-radius: 50px;
    border-radius: 50px;
	}
@media (max-width: 960px) {
    
	.h2_promos {	
	font-size: 1.8rem;
	line-height: 2.0rem;
	}
}	


h3 {
 	text-align: left;
	font-size: 1.75rem;
	line-height: 1.95rem;
	color: #023844;
	font-family: "Titillium Web", serif;
	font-weight: 600;
	font-style: normal;
	margin: 0 0 1.2rem 0;
	padding: 0;
	}
@media (max-width: 960px) {
	h3 {	
	font-size: 1.55rem;
	line-height: 1.75rem;
	}
}		


h4 {
 	text-align: left;
	font-size: 1.3rem;
	line-height: 1.5rem;
	color: #023844 !important;
	font-family: "Titillium Web", serif;
	font-weight: 600;
	font-style: normal;
	margin: 0 0 1.0rem 0;
	padding: 0;
    text-transform: uppercase;
	}
h4 a:link, h4 a:visited {
	color:#023844;
	text-decoration:none;
	font-family: "Titillium Web", serif;
	font-weight: 600;
	font-style: normal;
	}	
h4 a:active, h4 a:hover {
	color:#023844;
	text-decoration:none;
	border-bottom: 1px solid #00b156;
	font-family: "Titillium Web", serif;
	font-weight: 600;
	font-style: normal;
	}
@media (max-width: 960px) {
	h4 {	
	font-size: 1.1rem;
	line-height: 1.3rem;
	}
}		


h5 {
 	text-align: left;
	font-size: 1.1rem;
	line-height: 1.3rem;
	color: #00b156;
	font-family: "Titillium Web", serif;
	font-weight: 600;
	font-style: normal;
	margin: 2.0rem 0 0 0;
	padding: 0 0 0.75rem 0;
	}
@media (max-width: 960px) {
	h5 {	
	font-size: 1.0rem;
	line-height: 1.2rem;
	}
}


	

.divlinesolid {
	height: 1px;
	margin: 2.4rem 0;
	width: 100%;
	padding: 0;
	border-bottom: #f0f0f0 solid 1px;
	}	
	
.divlinesolid2 {
	height: 1px;
	margin: 3.4rem 0;
	width: 100%;
	padding: 0;
	border-bottom: #f0f0f0 solid 3px;
	}	

.divlinesolid3 {
	height: 1px;
	margin: 1.4rem 0;
	width: 100%;
	padding: 0;
	border-bottom: #f0f0f0 solid 1px;
	}	
	
.clear {
 	clear: both;
	height: 0;
 	}		




	
	
		
/* BODY COMPONENTS */

#wrapper {
	width: 100%;
	margin: 0 auto;
	padding: 0;	
	}

#wrapperinnerhome {
	margin: 0;
	padding: 3%;
	background: #f0f0f0; 	
	}	
@media (max-width: 960px) {
	#wrapperinnerhome {	
	padding: 2.083%;   
	}
}	
		
#wrapperinner {
	margin: 0;
	padding: 0 3% 3% 3%;
	background: #f0f0f0; 	
	}	
@media (max-width: 960px) {
	#wrapperinner {	
	padding: 2.083%;   
	}
}	




				
	

/* TEXT COMPONENTS */	
	
.normaltxt {
	text-align: left;
	color: #686868;
	font-size: 1.0rem;
	line-height: 1.3rem;	
	font-family: "Titillium Web", serif;
	font-weight: 400;
	font-style: normal;
	}
.normaltxt a:link, .normaltxt a:visited {
	color:#00b156;
	text-decoration:none;
	font-family: "Titillium Web", serif;
	font-weight: 600;
	font-style: normal;
	}	
.normaltxt a:active, .normaltxt a:hover {
	color:#00b156;
	text-decoration:none;
	border-bottom: 1px solid #00b156;
	font-family: "Titillium Web", serif;
	font-weight: 600;
	font-style: normal;
	}


.smallertxt {
	text-align: left;
	color: #686868;
	font-size: 0.8rem;
	line-height: 1.1rem;	
	font-family: "Titillium Web", serif;
	font-weight: 400;
	font-style: normal;
	}
.smallertxt a:link, .smallertxt a:visited {
	color:#00b156;
	text-decoration:none;
	font-family: "Titillium Web", serif;
	font-weight: 600;
	font-style: normal;
	}	
.smallertxt a:active, .smallertxt a:hover {
	color:#00b156;
	text-decoration:none;
	border-bottom: 1px solid #00b156;
	font-family: "Titillium Web", serif;
	font-weight: 600;
	font-style: normal;
	}


.largertxt {
	text-align: left;
	color: #686868;
	font-size: 1.3rem;
	line-height: 1.6rem;	
	font-family: "Titillium Web", serif;
	font-weight: 400;
	font-style: normal;
	}		
.largertxt a:link, .largertxt a:visited {
	color:#00b156;
	text-decoration:none;
	font-family: "Titillium Web", serif;
	font-weight: 600;
	font-style: normal;
	}	
.largertxt a:active, .largertxt a:hover {
	color:#00b156;
	text-decoration:none;
	border-bottom: 1px solid #00b156;
	font-family: "Titillium Web", serif;
	font-weight: 600;
	font-style: normal;
	}



.addresstxt {
	text-align: left;
	color: #ffffff;
	font-size: 1.25rem;
	line-height: 1.65rem;	
	font-family: "Titillium Web", serif;
	font-weight: 400;
	font-style: normal;
	}	

.thankyoutxt {
	text-align: left;
	color: #00b156;
	font-size: 1.25rem;
	line-height: 1.65rem;	
	font-family: "Titillium Web", serif;
	font-weight: 400;
	font-style: normal;
	}	

	








.sidebulletholder {
    background: #ededed;
    padding: 1.0rem 8.333% 0.5rem 8.333%;
    margin: 0 0 0.1rem 0;
    }

.sideinfoholder {
    background: #ededed;
    padding: 3.0rem 8.333%;
    margin: 0;
    }


.bulletlist {
	margin: 0 auto;
	padding: 0;
	color: #686868;
	}	
.bulletlist ul {	
	margin: 0;
	border: 0;
	padding: 0;
	}
.bulletlist li {
	margin: 0 0 0.4rem 1.0rem;
	text-align: left;
	color: #686868;
	font-size: 1.0rem;
	line-height: 1.3rem;	
	font-family: "Titillium Web", serif;
	font-weight: 400;
	font-style: normal;
	padding-left: 1.6rem; 
    text-indent: -1.0em;
	}
.bulletlist span {
	font-family: "Titillium Web", serif;
	font-weight: 600;
	font-style: normal;
	text-transform: uppercase;
	}
.bulletlist li:before {
    background-color: #adadad;
    content: "";
    display: inline-block;
    height: 2px;
    position: relative;
    vertical-align: middle;
    width: 1.0rem;
	right: 0.6rem;
    margin-left: 0;
}
@media screen and (max-width: 960px) {
  .bulletlist li {
	margin: 0 0 0.6rem 0;
    }
	.bulletlist li:before {
    background-color: #adadad;
    content: "";
    display: inline-block;
    height: 2px;
    position: relative;
    vertical-align: middle;
    width: 1.4rem;
	}
	.bulletlist li:before {
    right: 0.5em;
    margin-left: 0;
	}
}



.bulletlistfooter {
	margin: 0;
	padding: 0;
	}	
.bulletlistfooter ul {	
	margin: 0;
	border: 0;
	padding: 0;
	}
.bulletlistfooter li {
	margin: 0 0 0.5rem 0;
	text-align: left;
	color: #686868;
	font-size: 1.0rem;
	line-height: 1.3rem;			
	font-family: "Titillium Web", serif;
	font-weight: 400;
	font-style: normal;
	}	
.bulletlistfooter a:link, .bulletlistfooter a:visited {
	color:#686868;
	text-decoration: none;    
	font-family: "Titillium Web", serif;
	font-weight: 600;
	font-style: normal;
	}
.bulletlistfooter a:active, .bulletlistfooter a:hover  {
	color:#00b156;
	text-decoration: none;
    border-bottom: 1px solid #00b156;
	font-family: "Titillium Web", serif;
	font-weight: 600;
	font-style: normal;
	}




.bulletlistcontact {
	margin: 0;
	padding: 0;
	}	
.bulletlistcontact ul {	
	margin: 0;
	border: 0;
	padding: 0;
	}
.bulletlistcontact li {
	margin: 0 0 0.75rem 0;
	text-align: left;
	color: #686868;
	font-size: 1.0rem;
	line-height: 1.3rem;		
	font-family: "Titillium Web", serif;
	font-weight: 400;
	font-style: normal;
	}	
.bulletlistcontact li i {
	padding: 0;
  	margin: 0 1.0rem 0 0;
    font-size: 1.2rem !important;			
	font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: normal;
	}
.bulletlistcontact a:link, .bulletlistcontact a:visited {
	color:#00b156;
	text-decoration: none;
	font-family: "Titillium Web", serif;
	font-weight: 600;
	font-style: normal;
	}
.bulletlistcontact a:active, .bulletlistcontact a:hover  {
	color:#00b156;
	text-decoration: none;
    border-bottom: 1px solid #00b156;
	font-family: "Titillium Web", serif;
	font-weight: 600;
	font-style: normal;
	}





	
	
	
	
/* MAINNAV COMPONENTS */

#mainnavholder {
	margin: 0 auto;
	padding: 0;
	text-align: center !important;
	border-top: 6px solid #333e47;
	border-bottom: 2px solid #333e47;
	background: #033846;
    text-align: center !important;
	}	







/* LOGO COMPONENTS */

#fadeholder {
	margin: 0;
	padding: 0;
	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
	}	

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


#logoholderhome {	
	margin: 0 auto;
	padding: 2.0rem 0 0 0;
	}	
#logoholderhome img {	
	margin: 0 auto;
	max-width: 225px;
	}
@media screen and (max-width: 1060px) {
  #logoholderhome img {
	margin: 0 auto; 
	max-width: 70%;
  }
}
@media screen and (max-width: 960px) {
  #logoholderhome img {
	max-width: 80%;
  }
}
@media screen and (max-width: 640px) {
  #logoholderhome img {
	max-width: 100%;
  }
}



#logoholder {	
	margin: 0 auto;
	padding: 0 0 2.0rem 0;
	}	
#logoholder img {	
	margin: 0 auto;
	max-width: 250px;
	}
@media screen and (max-width: 1060px) {
  #logoholder img {
	margin: 0 auto; 
	max-width: 70%;
  }
}
@media screen and (max-width: 960px) {
  #logoholder img {
	max-width: 80%;
  }
}
@media screen and (max-width: 640px) {
  #logoholder img {
	max-width: 100%;
  }
}






#navbuttonholderhome {	
	margin: 0 auto;
	padding: 0;
    position: fixed;
    z-index: 1000;
    right: 4.166%;
    top: 4.0rem;
	}	
@media screen and (max-width: 960px) {
  #navbuttonholderhome {
	top: 3.0rem;
  }
}
@media screen and (max-width: 640px) {
  #navbuttonholderhome {
	top: 2.0rem;
  }
}


#navbuttonholder {	
	margin: 0 auto;
	padding: 0;
    position: fixed;
    z-index: 1000;
    right: 4.166%;
    top: 2.0rem;
	}	
@media screen and (max-width: 960px) {
  #navbuttonholder {
	top: 3.0rem;
  }
}
@media screen and (max-width: 640px) {
  #navbuttonholder {
	top: 2.0rem;
  }
}



#homestraplinehome {	
	margin: 0 auto;
	padding: 0 8.333% 0.25rem 8.333%;
	width: 100%;
	position: relative;
	z-index: 1000;
	}	









/* BUTTONS COMPONENTS */

.buttonholdercenter {
	padding: 0 0 6.0em 0;
	margin: 0;
	text-align: center;
	}

.buttonholderleft {
	padding: 0;
	margin: 0;
	text-align: left;
	}
.buttonholderright {
	padding: 0;
	margin: 0;
	text-align: right;
	}	
@media all and (max-width: 960px) {
   .buttonholderright  {
 	text-align: left;
  }
}

.buttonholderleftbot {
	padding: 0;
	margin: 0;
	text-align: left;
	position: absolute;
	bottom: 10%;
	left: 10%;
	}
@media all and (max-width: 960px) {
   .buttonholderleftbot  {
 	bottom: 10%;
	left: 5%;
  }
}
			

.buttonnormalholdercenter {
	padding: 0;
	margin: 0;
	text-align: center;
	}
@media all and (max-width: 960px) {
   .buttonnormalholdercenter  {
 	text-align: left;
  }
}

.buttonsnormal {
	font-size: 0.7rem;
	line-height: 0.7rem;
	font-family: "Titillium Web", serif;
	font-weight: 700;
	font-style: normal;
	padding: 1.0rem;
	width: 100%;
	text-decoration:none;
	color: #686868 !important;
	display: inline-block;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.25rem;
	margin:0;	
	border: 2px solid #ffffff;
	background: #ffffff;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	}	
.buttonsnormal:hover {
	background: none;
	color: #ffffff !important;
	border: 2px solid #00b156;
	}
@media screen and (max-width: 960px) {
  .buttonsnormal {
	 width: auto;
  }
}



.buttonsreversed {
	font-size: 0.7rem;
	line-height: 0.7rem;
	font-family: "Titillium Web", serif;
	font-weight: 700;
	font-style: normal;
	padding: 1.0rem 3.0rem;
	width: auto;
	text-decoration:none;
	color: #ffffff !important;
	display: inline-block;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.25rem;
	margin: 0;	
	border: 2px solid #686868;
	background: #686868;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	}	
.buttonsreversed:hover {
	background: none;
	color: #686868 !important;
	border: 2px solid #00b156;
	}
@media screen and (max-width: 960px) {
  .buttonsreversed {
	 width: auto;
  }
}


.buttonssmall {
	font-size: 0.6rem;
	line-height: 0.6rem;
	font-family: "Titillium Web", serif;
	font-weight: 700;
	font-style: normal;
	padding: 0.6rem 1.0rem;
	text-decoration:none;
	color: #686868 !important;
	display: inline-block;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.25rem;
	margin:0;	
	border: 2px solid #ffffff;
	background: #ffffff;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	}	
.buttonssmall:hover {
	background: none;
	color: #ffffff !important;
	border: 2px solid #00b156;
	}
@media screen and (max-width: 960px) {
  .buttonssmall {
	 width: auto;
  }
}



.buttonssmallreversed {
	font-size: 0.6rem;
	line-height: 0.6rem;
	font-family: "Titillium Web", serif;
	font-weight: 700;
	font-style: normal;
	padding: 0.6rem 1.0rem;
	width: auto;
	text-decoration:none;
	color: #ffffff !important;
	display: inline-block;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.25rem;
	margin: 0;	
	border: 2px solid #686868;
	background: #686868;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	}	
.buttonssmallreversed:hover {
	background: none;
	color: #686868 !important;
	border: 2px solid #00b156;
	}
@media screen and (max-width: 960px) {
  .buttonssmallreversed {
	 width: auto;
  }
}






/* SCROLL DOWN COMPONENTS */

#scrolldownarrowrev {
	text-align: center;
	color: #ffffff;
    padding: 0 0 1.0rem 0;
	}
#scrolldownarrowrev a:link, #scrolldownarrowrev a:visited {
	color:#ffffff;
    text-decoration: none !important;
	}	
#scrolldownarrowrev a:active, #scrolldownarrowrev a:hover {
	color:#00b156;
	text-decoration: none !important;
	}






/* HOME INTRO PANELS COMPONENTS */

#homeheaderimage {
	margin: 0;
	padding: 0 0 1.0rem 0;
	}	

#otherheaderimage {
	margin: 0;
	padding: 0;
	}	


	
#homeintropanel {
	margin: 0;
	padding: 6.0rem 12.5%;
	background: #ffffff;	
	}	
@media (max-width: 960px) {
	#homeintropanel {
	margin: 0;
	padding: 4.0rem 4.166% 2.0rem 4.166%;
	}	
}	

#homepromopanel {
	margin: 2.0rem 0 3.0rem 0;
	padding: 0;
	}	

#otherpromopanel {
	margin: 0 0 3.0rem 0;
	padding: 2.0rem 2.0%;
    background: #ffffff;
	}
@media (max-width: 960px) {
	#otherpromopanel {
	margin: 1.0rem 0 0 0;
	padding: 0;
    background: transparent;
	}	
}	


#otherintropanel {
	margin: 3.0rem 0 0 0;
	padding: 4.0rem 12.5% 1.0rem 12.5%;
	background: #ffffff;	
	}	
@media (max-width: 960px) {
	#otherintropanel {
	padding: 4.0rem 4.166%;
	}	
}	


#otherintropanel2 {
	margin: 3.0rem 0 0 0;
	padding: 4.0rem 12.5% ;
	background: #ffffff;	
	}	
@media (max-width: 960px) {
	#otherintropanel2 {
	padding: 4.0rem 4.166%;
	}	
}	


#otherintropanel3 {
	margin: 3.0rem 0 0 0;
	padding: 4.0rem 4.166% ;
	background: #ffffff;	
	}	
@media (max-width: 960px) {
	#otherintropanel3 {
	padding: 4.0rem 4.166%;
	}	
}	




#contactpanel {
	margin: 0;
	padding: 4.0rem 12.5%;
	background: #f5f5f5;	
	}	
@media (max-width: 960px) {
	#contactpanel {
	margin: 0;
	padding: 4.0rem 4.166%;
	}	
}


#contactformbuttonpanel {
	margin: 0;
	padding: 4.0rem 12.5%;
	background: #efefef;	
	}	
@media (max-width: 960px) {
	#contactformbuttonpanel {
	margin: 0;
	padding: 4.0rem 4.166%;
	}	
}
#contactformbuttonpanelinner {
	margin: 0;
	padding: 2.0rem 8.333%;
	background: #ffffff;
    text-align: center;
	}



.buttonscontactform {
	display: block;
  	padding: 0.35rem 0.75rem;
  	background-color: #00b156;
	border: 2px solid #00b156;
  	font-size: 1.175rem;
  	color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    font-family: "Titillium Web", serif;
	font-weight: 700;
	font-style: normal;
	margin: 0;
  	-webkit-transition: background-color 0.3s;
  	-moz-transition: background-color 0.3s;
  	transition: background-color 0.3s;	
	}	
.buttonscontactform:hover {
	background-color: #ffffff;
	text-decoration: none;
	color: #00b156;
	border: 2px solid #00b156;
	}	


.buttonsnormal {
  	padding: 0.85rem 1.5rem;
  	background-color: #00b156;
	border: 2px solid #00b156;
  	font-size: 1.175rem;
  	color: #ffffff !important;
    text-align: center;
    text-transform: uppercase;
    font-family: "Titillium Web", serif;
	font-weight: 700;
	font-style: normal;
	margin: 0 0 1.0rem 0;
    width: auto;
  	-webkit-transition: background-color 0.3s;
  	-moz-transition: background-color 0.3s;
  	transition: background-color 0.3s;	
	}	
.buttonsnormal:hover {
	background-color: #ffffff;
	text-decoration: none;
	color: #00b156 !important;
	border: 2px solid #00b156;
	}	




#othercontentpanel {
	margin: 0;
	padding: 7.5% 4.166%;
	background: #efefef;	
	}	
@media (max-width: 9608px) {
	#othercontentpanel {
	margin: 0;
	padding: 10% 4.166%;
	}	
}	




#homeintrotxt {
	margin: 0 auto;
	padding: 0 8.333%;
	width: 100%;
	}
@media (max-width: 960px) {	
	#homeintrotxt {	
	padding: 0;	
	}	
}


#servicestxt {
	margin: 0 auto;
	padding: 0 4.166%;
	width: 100%;
	}
@media (max-width: 960px) {	
	#servicestxt {	
	padding: 0;	
	}	
}




#herosequencetxtholder img {
	margin: 0 auto;
	padding: 0 0 3.0rem 0;
	max-width: 400px;
	}
@media (max-width: 960px) {	
	#herosequencetxtholder img {	
	max-width: 250px;	
	}	
}


#herosequencetxtholder ul {
    margin: 0 auto; /* Centers the ul */
    border: 0;
    padding: 0;
    list-style: none; /* Removes default bullet points */
    display: flex;
    justify-content: center; /* Centers the list items horizontally */
    align-items: center; /* Aligns items in case they have different heights */
    width: 100%; /* Ensures it takes the full width */
    }
#herosequencetxtholder li {
    margin: 0;
    padding: 0;
    text-align: center !important;
	color: #ffffff;
	font-size: 1.7rem;
	line-height: 1.7rem;		
	font-family: "Titillium Web", serif;
    font-weight: 600;
    font-style: normal; 
    display: list-item; /* Ensure bullets are shown */
	}
#herosequencetxtholder li:not(:last-child)::after {
    content: '/';
    padding: 0 0.5rem;
    margin: 0;
    color: #00b156;
    }

@media (max-width: 768px) {
    #herosequencetxtholder ul {
        flex-direction: column; /* Stack items vertically */
        gap: 5px; /* Adjust spacing for mobile */
    }
    #herosequencetxtholder li {
        padding: 0 0 0.25rem 0;
	    font-size: 1.4rem;
	    line-height: 1.4rem;
        color: #00b156;
	}
    #herosequencetxtholder li:not(:last-child)::after {
        content: '';
        padding: 0 0 0.5rem 0;
        margin: 0;
        color: #00b156;
    }
}


#headercontainerother {
  	padding: 2.0rem 0 0 0;
  	margin: 0;
	width: auto;
  	text-align: left !important;
	}



.accreditationsholder {
	margin: 0;
	padding: 0;
	min-height: 17.5em;
	}
@media screen and (max-width: 960px) {
  .accreditationsholder {
	margin: 0 0 1.5rem 0;
	min-height: 10em;
  }
}


a .accreditationscontainer {
	-moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    transition: all .3s ease-in;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: rgba(16, 31, 45, 0.25);
	min-height: 17.5em;
	color: #ffffff;
	}	
a .accreditationscontainer:hover  {
	background-color: rgba(16, 31, 45, 0.75);
	}
@media screen and (max-width: 960px) {
  a .accreditationscontainer {
	min-height: 10em;
  }
}


a .accreditationscontainer > img {
	-moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    transition: all .3s ease-in;
	text-align: center;
	opacity: 0.75;
    max-height: 100%;
	}	
a:active .accreditationscontainer > img, a:hover .accreditationscontainer > img {
	opacity: 1.0;
	}





/* SOCIAL COMPONENTS */

#sociallinksholderheader {
  	padding: 2.0rem 0 0 0;
  	margin: 0;
	width: auto;
  	text-align: left !important;
	}
.sociallinksheader {
  	padding: 0 0 0 2.0rem;
  	margin: 0;
    width: 100%;
  	position: relative;
  	font-size: 1.4rem;
  	font-family: "Titillium Web", serif;
    font-weight: 600;
    font-style: normal;
  	text-align: left !important;
	color: #ffffff;
	text-transform: none;
    cursor: pointer;
	}
.sociallinksheader i {
  	padding: 0;
  	margin: 0 0.8rem 0 0;
    font-size: 1.2rem !important;
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: normal;
	}
.sociallinksheader a:link, .sociallinksheader a:visited {
	color:#ffffff;
	text-decoration:none;
    cursor: pointer;
	}	
.sociallinksheader a:active, .sociallinksheader a:hover {
	color:#023845;
	text-decoration:none !important;
    border-bottom: none !important;
    cursor: pointer;
	}	
@media all and (max-width: 960px) {
   .sociallinksheader  {
      font-size: 1.2rem;
  }
}


@media all and (max-width: 960px) {
   .hidesocial  {
      display: none;
       visibility: hidden;
  }
}
.visiblesocial {
    display: none;
    visibility: hidden;
  }
@media all and (max-width: 960px) {
   .visiblesocial  {
      display: block;
       visibility: inherit;
       padding: 0 0 0 0.5rem;
  }
}

.visiblesocialhome {
    display: none;
    visibility: hidden;
  }
@media all and (max-width: 960px) {
   .visiblesocialhome  {
      display: block;
       visibility: inherit;
  }
}


.sociallinksheaderother {
  	padding: 0;
  	margin: 0;
    width: 100%;
  	position: relative;
  	font-size: 1.4rem;
  	font-family: "Titillium Web", serif;
    font-weight: 600;
    font-style: normal;
  	text-align: left !important;
	color: #023745;
	text-transform: none;
    cursor: pointer;
	}
.sociallinksheaderother i {
  	padding: 0;
  	margin: 0 0.8rem 0 0;
    font-size: 1.2rem !important;
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: normal;
	}
.sociallinksheaderother a:link, .sociallinksheaderother a:visited {
	color:#023745;
	text-decoration:none;
    cursor: pointer;
	}	
.sociallinksheaderother a:active, .sociallinksheaderother a:hover {
	color:#00b156;
	text-decoration:none !important;
    border-bottom: none !important;
    cursor: pointer;
	}
@media all and (max-width: 960px) {
   .sociallinksheaderother  {
      font-size: 1.2rem;
  }
}




#sociallinksholderfooter {
  	padding: 0;
  	margin: 0;
	width: auto;
  	text-align: left !important;
	}	
@media all and (max-width: 960px) {
   #sociallinksholderfooter  {
      padding: 0 0 1.0rem 0;
       margin: 0 0 1.0rem 0;
       border-bottom: #ffffff solid 1px;
  }
}
.sociallinksfooter {
  	padding: 0;
  	margin: 0;
  	display: block;
  	position: relative;
  	font-size: 1.2rem;
  	font-family: "Titillium Web", serif;
    font-weight: 600;
    font-style: normal;
  	text-align: left !important;
	color: #686868;
	text-transform: none;
    cursor: pointer;
	}
.sociallinksfooter i {
  	padding: 0;
  	margin: 0 0.8rem 0 0;
    font-size: 1.2em !important;
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: normal;
	}
.sociallinksfooter a:link, .sociallinksfooter a:visited {
	color:#686868;
	text-decoration:none;
    cursor: pointer;
	}	
.sociallinksfooter a:active, .sociallinksfooter a:hover {
	color:#00b156;
	text-decoration:none;
    cursor: pointer;
	}	





/* FOOTER COMPONENTS */

#footerwhitecontainer {
	padding: 3.0rem 4.166%;
	width: 100%;
    margin: 0 auto;
	text-align: center;
	}
@media (max-width: 960px) {
	#footerwhitecontainer {
  	background-size: 160%;
	}
}
@media (max-width: 640px) {
	#footerwhitecontainer {
  	background-size: 225%;
	}
}



#footerlogoholder {
  	padding: 0;
  	margin: 0 0 2.0rem 0;
  	text-align: left !important;
	}
#footerlogoholder img {
  	padding: 0;
  	margin: 0;
  	max-width: 220px;
	}
#footertxtholder {
  	padding: 0;
  	margin: 0 0 1.0rem 0;
  	text-align: left !important;
	}
@media all and (max-width: 960px) {
   #footertxtholder  {
      padding: 0 0 1.0rem 0;
       margin: 0 0 1.0rem 0;
       border-bottom: #ffffff solid 1px;
  }
}

.footertxt {
	text-align: left;
	color: #686868;
	font-size: 0.9rem;
	line-height: 1.4rem;	
	font-family: "Titillium Web", serif;
    font-weight: 300;
    font-style: normal;
	padding: 0;
	margin: 0;
	}




/* OVER-RIDE COMPONENTS */

.left {
	text-align: left !important;
	}
.center {
	text-align: center !important;
	}	
.right {
	text-align: right !important;
	}
@media all and (max-width: 960px) {
   .right   {
  text-align: left !important;
  }
}




/* COLOR COMPONENTS */
	
.white {
	color: #ffffff;
	}	

.black {
	color: #686868;
	}

.ccsteal {
	color: #153744;
	}	

.ccsgreen {
	color: #00b156;
	}

.ccsgrey {
	color: #686868;
	}



/* HIDDEN COMPONENTS */


.hideme {
    opacity:0;
	}