/*** General purpose element styling ***/

html, body {
	font-size:18px;
	padding:0;
	margin:0;
	min-width:320px;
}

body {
	font-family: "Source Serif 4", serif;
    margin-bottom: 0px;
	line-height:1.8rem;
	font-size:1.0rem;
	text-align: left;
	margin-top:0px;
	color:#444;
	background-color: white;
	font-weight:400;
}

/*** consistent responsive behavior throughout ***/
@media (max-width: 512px) {
	.container {
		padding-left:2em;
		padding-right:2em;
	}
}

@media (max-width: 992px) {
	header, .get-in-touch {
		font-size:0.80em;
	}
}
@media (max-width: 568px) {
	header, .get-in-touch {
		font-size:0.60em;
	}
}

p {
	font-weight: 400;
	font-style: normal;
	font-size:1.0em;
	text-align: left;
}

.p1 {
	font-size:1.3em;
	line-height:1.5em;
}

.p2 {
	font-size:1.7em;
	line-height: 1.5em;
}

@media (max-width: 1200px) { /* Adjust based on your breakpoint */
	.p1 {
		font-size:1.0em;
	}
	.p2 {
		font-size:1.3em;
	}
}

.hyphen {
	hyphens: auto;
	-webkit-hyphens: auto; /* Safari and Chrome on Android/macOS */
	-ms-hyphens: auto;     /* Internet Explorer/Edge */
}

::-moz-selection { /* Code for Firefox */
    color: #333; 
    background: #DFFF00
}

::selection {
    color: #333; 
    background: #DFFF00
}

a { 
	color:rgb(42, 80, 190); 
	text-decoration: underline;
}

a:hover { 
	color: rgb(92, 130, 240);
}

p a {
	font-weight:600; 
}

.text-nowrap {
	white-space: nowrap;
}



/*** Header and font styling ***/
h1, h2, h3, h4, h5, h6 { font-family: "Source Sans 3", sans-serif; font-weight:400; color:#333; }

h1 { font-size:5.2em; line-height:0.9em; }
h2 { font-size:4.0em; line-height:1.0em; }
h3 { font-size:3.0em; line-height:1.1em; }
h4 { font-size:2.0em; line-height:1.1em; }
h5 { font-size:1.2em; line-height:1.1em; }
h6 { font-size:0.9em; line-height:1.1em; }

.sp01 { letter-spacing: 0.10em; }
.sp015 { letter-spacing: 0.15em; }
.sp02 { letter-spacing: 0.20em; }
.sp03 { letter-spacing: 0.30em; }
.sp04 { letter-spacing: 0.40em; }
.sp05 { letter-spacing: 0.50em; }
.sp06 { letter-spacing: 0.60em; }

.fw1 { font-weight:100; }
.fw2 { font-weight:200; }
.fw3 { font-weight:300; }
.fw4 { font-weight:400; }
.fw5 { font-weight:500; }
.fw6 { font-weight:600; }
.fw7 { font-weight:700; }
.fw8 { font-weight:900; }
strong { font-weight:800; }

.ro0 { border-radius: 0.0em; }
.ro1 { border-radius: 0.5em; }
.ro2 { border-radius: 1.0em; }
.ro3 { border-radius: 1.5em; }
.ro4 { border-radius: 2.0em; }
.ro5 { border-radius: 2.5em; }

/** More text styling **/
.dark-text { color:#333; }
.white-text { color:#FFF; }
.grey-text { color:#666; }
.lt-grey-text { color:#DDD; }

.upper { text-transform: uppercase; }
.underline { text-decoration: underline; }

/** Backgrounds **/
.muted-bg {	background:#f8f9fa !important; color:#666; }
.bg-dark { background-color: #0f1d21!important; }
.light-color-bg { background-color: #D6ECFF; }


/*** Shadow styling ***/
.shadow { box-shadow: 0 0.375rem 1.5rem 0 rgba(140,152,164,0.225) !important; }
.shadow-heavy { box-shadow: 0 0.375rem 1.5rem 0 rgba(140,152,164,0.625) !important; }

.text-shadow { text-shadow: 2px 1px 1px #000000 }
.text-shadow-extreme { text-shadow: 3px 3px 1px #000000 }

/*** Positioning and layout ***/
.left { text-align:left; }
.right { text-align:right; }
.center { text-align: center; }
.justify { text-align: justify; }

.center-div { 
	margin-left:auto; 
	margin-right:auto; 
}
.no-padding { 
	padding:0 !important;
}


/*** Image Containers ***/
.image-container {
	overflow: hidden;
	border-radius: 3%;
	position: relative;
}
.image-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/*** Forms styling ***/
.form-control label, label {
	font-size:0.8rem;
	text-transform:uppercase;
	letter-spacing:0.25rem;
	font-weight:700;
	margin-bottom:0;
	color:#555;
}
.form-group { margin-bottom:0.6rem; } 


/*** Button styling ***/
.btn {
	padding-left: 1em;
	padding-right: 1em;
}
.btn-light {
	border-color: rgb(190, 190, 190);
}
.btn-standard {
	background-color:  rgb(42, 80, 190);
	border-color:   rgb(42, 80, 190);
	color:#FFF;
}
.btn-standard:hover, .btn-standard:focus {
	background-color: #000;
	border-color:  #000;
	color:#CCCCCC;
}

@media (max-width: 768px) { 
	.btn btn-standard {
		font-size: 1.5rem;
	}
}


ul.default {
    display: block;
    list-style-type: none;
    margin-block-start: 1rem;
    margin-block-end: 1rem;
    margin-inline-start: 0px;
    margin-inline-end: 24px;
    padding-inline-start: 24px;
}

ul li  {
	color:#333;
	margin-bottom:0.5em;
	margin-top:0.5em;
}

ul.default li div.btn-icon, div.btn-icon {
	padding: 8px; 
	width:36px;
	height:36px;
}