/*!
 * Start Bootstrap - Landing Page Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body,
html {
    width: 100%;
    height: 100%;
    background-color: black;    
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
}

.topnav {
    font-size: 14px;
}

.lead {
    font-size: 18px;
    font-weight: 400;
}



.container /* added feb 2025 */
{
	background: url(../img/mountain.jpg) no-repeat center center;
    background-size: cover;
    width: 85%;
/*     height: 100%; */
    
	
	
}





.intro-header {
    width: 100%;
    height: 100%;
    text-align: center;
    color: #f8f8f8;
    
/*
     background: url(../img/mountain.jpg) no-repeat center center;
    background-size: cover;
*/
/*     background-size: 100% 100%; */
/*     object-fit:cover; */
/*
-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
*/   
}

.intro-message {
    position: relative;
    padding-top: 5%; /* 10%; */ /*  20%; */
    padding-bottom: 10%; /* 20%; */
}

.intro-message > h1 {
    margin: 0;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    font-size: 5em;
}

.intro-divider {
    width: 80%;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

.intro-message > h3 {
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}

@media(max-width:767px) {
    .intro-message {
        padding-bottom: 15%;
    }

    .intro-message > h1 {
        font-size: 3em;
    }

    ul.intro-social-buttons > li {
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }

    ul.intro-social-buttons > li:last-child {
        margin-bottom: 0;
    }

    .intro-divider {
        width: 100%;
    }
}

.network-name {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 2px;
}

.content-section-a {
    padding: 50px 0;
    background-color: #f8f8f8;
}

.content-section-b {
    padding: 50px 0;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
}

.section-heading {
    margin-bottom: 30px;
}

.section-heading-spacer {
    float: left;
    width: 200px;
    border-top: 3px solid #e7e7e7;
}

.banner {
    padding: 100px 0;
    color: #f8f8f8;
    background: url(../img/banner-bg.jpg) no-repeat center center;
    background-size: cover;
}

.banner h2 {
    margin: 0;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    font-size: 3em;
}

.banner ul {
    margin-bottom: 0;
}

.banner-social-buttons {
    float: right;
    margin-top: 0;
}

@media(max-width:1199px) {
    ul.banner-social-buttons {
        float: left;
        margin-top: 15px;
    }
}

@media(max-width:767px) {
    .banner h2 {
        margin: 0;
        text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
        font-size: 3em;
    }

    ul.banner-social-buttons > li {
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }

    ul.banner-social-buttons > li:last-child {
        margin-bottom: 0;
    }
}

footer {
    padding: 50px 0;
    background-color: #f8f8f8;
}

p.copyright {
    margin: 15px 0 0;
}

a.email-address {
    color: #FFFFFF;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}

a.email-address:hover {
    color: #FFFFFF;
}


/* available at */

.availableat
{
	text-align:  right;
	
	
}


/* Bootstrap Equal Height Columns incl Bootstrap 3
	see https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27
	and https://www.codeply.com/go/EskIjvun4B
	and bootstrap 3 css docs at https://getbootstrap.com/docs/3.3/css/
*/

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  flex-grow: 1;
}


/*
	
Note breakpoints for bootstrap grid cols are:

.col-xs- Extra small devices Phones (<768px)	
.col-sm- Small devices Tablets (≥768px)	
.col-md- Medium devices Desktops (≥992px)	
.col-lg- Large devices Desktops (≥1200px)
	
*/

#lnkEmailAddress
{
	line-height: 2em;
}

/*

.availableat
{
	font-size: 18px;
}
*/




/*  changed index page to .php from previous html so copyright date year calculated auto */

.copyrightdate
{
	position: absolute;
	right: 0px;
	bottom: 10px;
	color: #777882;
	
	-webkit-transition: all 0.25s linear;
    -moz-transition: all 0.25s linear;
    -o-transition: all 0.25s linear;
    transition: all 0.25s linear;
}

.copyrightdate:hover
{
	cursor: pointer;
	color: #bbacac;
}

.intro-divider
{
	border-top: 1px solid #e0c5c5;
}



/*   
	
Marketplace logo links:

Note: Apple Safari on Mac interferes with images containing text and upon their hover suggests url links (sometimes inaccuate) to sites
(they call it 'live text' and it opens a quick look preview window that can also override the intended coded link)
There are lots of 'solutions on the web but 99% of them do not work: e.g. https://stackoverflow.com/questions/75653885/how-to-disable-safaris-live-text-in-my-website#77997028
The only solution that works is to add a position: relative container, and put two absolutely positioned images in it, one the real logo image with text
and an overlaying blank 'transparent' image of same size (no text) that has opacity 0.01 (0 will not work) and the same intended target link. This stops Safari from recognising the underlying image 'quick link'
see https://forum.freecodecamp.org/t/how-to-put-one-picture-on-the-other/493645/4
Apple Mac System settings can turn off 'Live Text' quick links in General->Language and region, but many users will have the setting on by default and hence have the proper link confused. 

see https://forums.developer.apple.com/forums/thread/709384

If you also want to hover effect the original 'image with text' when hovering the overlaying transparent image I needed to use clever css sibling effect upon hover.

see below

*/


.transparent
{
	position:absolute;
	top:0;
	left:0;
	width: 125px !important;
	background-color: #ffffff;
	opacity: 0.01;
}

.imgcontain
{
	position: relative;
	width: 125px !important;
}

.imgcontain .mainimg
{
	opacity: 0.7;
	-webkit-transition: all 0.25s linear;
    -moz-transition: all 0.25s linear;
    -o-transition: all 0.25s linear;
    transition: all 0.25s linear;
}

.ghn:hover > .imgcontain > .mainimg
{
	opacity: 1.0;
	cursor: pointer;	
}


/* for longer domain names that cant word wrap on narrow screens */

@media(max-width:410px) {
    
    .intro-message > h1,
    .intro-message > h2,
    .intro-message > h3
     {
        font-size: 1.5em !important;
    }
 
}