@charset "utf-8";


body
{
	/* overflow: hidden; */
}


/* I want the add to pop up over existing content using javascript and a timer, and then take full control of the inner section which ovelays existing until a close button is clicked */
/* I only wan tthe inner text/images while keeping a close button fixed at the top on #adv-sec? At the memoment, I notice that lower levels are still scrolling if I am not directly over a div or picture etc.  */


#page #adv-sec /* All */
{
	background: rgba(0,0,0,1);
	/* optional background */
	color: white;
	/* use flex to center content if needed */
	display: none;
	flex-direction: column;        /* stack content vertically */
	/* full viewport height */
	min-height: 100vh;
	padding-bottom:3em;
	position: absolute;
	top: 0;
	left: 0;
	right:0;
	margin:0 auto;
	/* transform: translateX(-50%); */
	/* center horizontally */
	width: 100%;                    /* or max-width: 1280px */
	max-width: 100%;
	text-align: center;
	z-index: 1000;
}


#adv-cap-jpg img:not(.nav-but) /* All */
{
	background:black;
	border: 3px solid white;
	box-shadow:3px 3px 3px black;
}

#adv-cap-jpg img:not(.nav-but), /* All */
#adv-cap-png img:not(.nav-but)
{
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0; 
	max-width:calc(100% - 6px);
}

#adv-cap-jpg div, /* all */
#adv-cap-png div
{
	margin:0.5em auto; 
}

.adv-cap /* all */
{
	background:black;
	border-radius:20px;
	box-sizing: border-box;
	box-shadow:3px 3px 3px black;
	/* border: 3px solid white; */
	display:inline-block;
	margin:1em auto!important;
	/* margin:0 auto; */
	padding:0.5em 2em;
	width:100%;
}

#adv-sec .adv-cap-title /* all */
{
	/* border-bottom: none; */
	/* border-top: none; */
	/* border-top-left-radius: 20px; /* Rounds the top-left corner */ */
	/* border-top-right-radius: 20px; /* Rounds the top-right corner */ */
}

#adv-sec .adv-cap-desc /* all */
{
	border-bottom: none;
	/* border-top: none; */
	padding:1em;
}

#adv-sec .adv-cap-buttons /* all */
{
	/* border-bottom: none; */
	border-bottom-left-radius: 20px; /* Rounds the top-left corner */
	border-bottom-right-radius: 20px; /* Rounds the top-right corner */
	border-top: none;
}

#adv-sec > div
{
	/* overflow-y:auto; */
}

#page > *:not(#adv-sec)
{
	/* display: hidden; */
	/* overflow-y:auto; */
}


#adv-sec.show
{
	/* opacity: 1; */
	/* visibility: visible; */
	/* transform: translateX(-50%) translateY(0); */
	/* slide down to center */
}

#adv-close
{
	background: red;
	border: solid yellow;
	border-radius:15px;
	box-shadow: -3px -3px 10px black, 3px -3px 10px black, -3px 3px 10px black, 3px 3px 10px black, -3px 0px 10px black, 3px 0px 10px black;
	color: white;
	cursor: pointer;
	display:inline-block;
	font-size: 1rem;
	font-weight:700;
	/* left: 50%; */
	margin:1.5rem auto 0;
	padding: 0.5em 1em;
	position: relative;
	/* position: relative; */
	/* text-align:center; */
	/* transform: translateX(-50%);  */
	/* top: 0; */
	/* bottom:0; */
	/* center horizontally */
	/* z-index: 1100; */
}

#adv-sec.show
{
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0); /* slide down to center */
}


#adv-cap-jpg,
#adv-cap-png
{
	flex: 1;                       /* take remaining height */
	max-height:100%;
	/* overflow-y: auto; */
	/* scrollable if taller than viewport */
	padding: 1em;                  /* optional spacing */
	text-align:center;
	vertical-align:middle;
}

/* =============== */

#adv-sec .adv-cap .adv-cat:first-of-type
{
	/* display:none; */
}


#adv-sec a
{
	test-decoration:none;
}


#adv-cap-jpg div img:not(.nav-but), /* All */
#adv-cap-png div img:not(.nav-but)
{
	max-height: calc( 100vh - 160px );
	object-fit:cover;
	vertical-align: middle;
}

#adv-cap-jpg .nav-but img, /* All */
#adv-cap-png .nav-but img
{
	display:inline-block;
	height:64px;
	max-width:64px;
	min-width:64px;
	width:64px;
}


.adv-desc
{
	font-size:100%;
	font-weight:400;
	margin:1em auto;
}

.adv-desc:nth-of-type(2n+1)
{
	color:lime;

}
.adv-desc:nth-of-type(2n+2)
{
	color:cyan;
}


.ad-but
{
	/* background:cyan; */
	font-family:roboto;
	font-size:80%;
}