/* Created for Urban Village CHurch (UVC) website
- 2024/08/18 - recreate everything again from scratch to organize the codes mainly @media queries for portrait and landscape
- @media added to control mobile or desktop view using screen orientation "landscape" and "portrait"


*/

/* Overall Settings */

/* Orientation controller */ @media only screen and (orientation: portrait) { #landscape,.landscape,landscape {display: none;} }
/* Orientation controller */ @media only screen and (orientation: landscape) { #portrait,.portrait,portrait {display: none;} }

html	{	scroll-behavior: smooth;
		/*	TO STOP SELECTING FONTS	*/ 	-webkit-user-select: none; /* Safari */
										-ms-user-select: none; /* IE 10 and IE 11 */
										user-select: none; /* Standard syntax */	}

@font-face{font-family: Futura_LT; src: url(Futura_LT_Book.ttf);}
@font-face{font-family: Futura_Bold; src: url(Futura_LT_Bold.ttf);}
*	{	font-family: Futura_LT;}

	@media only screen and (orientation: portrait) {
		h1	{font-size: 8vw;}
		body 	{background: linear-gradient(to right, #fff, #fff8ea); background-size: contain; background-position: center; background-repeat: no-repeat;}
		/* OR bg
		body 	{background: linear-gradient(to right, #F9ECD7, #fff8ea); background-size: contain; background-position: center; background-repeat: no-repeat;}	*/
		.this-Sunday img	{width: 90vw;}
													}
	@media only screen and (orientation: landscape) {
		h1	{font-size: 3rem;}
		
		body 	{	background: url(UVC-bg.png),linear-gradient(to right, #fff, #fff8ea); background-size: contain; background-position: center; background-repeat: no-repeat; background-attachment: fixed;}	
		/* OR bg
		body 	{	background: url(UVC-bg.png),linear-gradient(to right, #F9ECD7, #ddd8ea); background-size: contain; background-position: center; background-repeat: no-repeat; background-attachment: fixed;} */
		.this-Sunday img	{height: 80vh;}											} 
a	{text-decoration: none;}

																																	
																														
/*	my basic controllers using CLASSES	*/
.vh100 {height: 100vh;}
.vh85	{height: 85vh;}
.vh75 {height: 75vh;}
.vh50 {height: 50vh;}
.vh35 {height: 35vh;}
.vh15 {height: 15vh;}
.vh50px	{height: 50px;}
.vw100 {width: 100%;}
.margin-2vw	{margin: 2vw;}
.pad-2vw	{padding: 2vw;}
.corner {border-radius: 5vw;}
.box-outline	{outline: white 2px solid;}
.box-outline9	{outline: #999999 2px solid;}
.boxshadow	{box-shadow: .5vw .5vw 1vw rgba(0, 0, 0, 0.5);}
.center {align-content: center;}
.imgfixed	{width: 100vw; top: 20vh;} /* BG-img that floats */
.font-white	{color: white;}
.font-0		{color: transparent;}


.check	{ outline: dotted red 2px;} /* use only to test certain elements */
.check2	{ outline: dashed blue 2px;} /* use only to test certain elements */
.check3	{ outline: dashed #DDDD00 2px;} /* use only to test certain elements */

.fixed		{position: fixed; position: -webkit-fixed;}
.sticky 	{position: sticky; position: -webkit-sticky;}
.relative	{position: relative; position: -webkit-relative;}
.absolute	{position: absolute; position: -webkit-absolute;}
.op-05	{opacity: 0.05;}
.op-50	{opacity: 0.5;}
.op-75	{opacity: 0.75;}
.zf		{z-index: 1;}
.zf2	{z-index: 2;}
.zb		{z-index: -1;}
.loc-tp	{top: 0; left:0;}
.loc-l	{left: 0;}

.bgfb	{background-image: url(UVCimg/img-fbss.jpg);}
.bgfb02	{background-image: url(UVCimg/img-fbss02.jpg);}
.bgfb03	{background-image: url(UVCimg/img-fbss03.jpg);}
	.boxhover:hover {outline: white 4px solid;}
.bg01 	{	background-image: url(UVCimg/bg-about.jpg);	}
.bg02 	{	background-image: url(UVCimg/bg02.jpg);	}
.bg03	{	background-image: url(UVCimg/bg-vision-01.png);}
.bg04	{background: url(UVCimg/landscape3crosses.jpg);}
.bg05	{background: url(UVCimg/bgani-04.jpg);}
.bg06	{background-image: url(UVCimg/bg03.PNG);}
.bgtop	{background-position: top;}
.bgbottom	{background-position: bottom;}
.bgcenter	{background-position: center;}
.bgleft		{background-position: left;}
.bgright	{background-position: right;}
.bgtopleft	{background-position: top left;}
.bgtopright	{background-position: top right;}
.bgbottomleft	{background-position: bottom left;}
.bgbottomright	{background-position: bottom right;}
.bgfixed	{background-attachment: fixed;}
.bgabsolute	{position: absolute; left: 0vw; width: 100%; z-index: -1; background-size: cover;}
.bgcover	{background-size: cover;}
.bgwhite	{background-color: white;}
.bg999999	{background-color: #999999;}
.hoverbg:hover	{background-color: white;}


.backtop {	position: sticky; position: -webkit-sticky; top: 85%;left: 85vw; } /* BACK to TOP */
	.backtop img {	width: 15vmin;}
.glow	{box-shadow: 1px 1px 20px white, -1px -1px 20px white;}
.textglow {text-shadow: 2px 2px 2px white, -2px -2px 2px white;}
.textglow-b {text-shadow: 1px 1px 1px black;}
.textglowb {text-shadow: 1px 1px 1px black, -1px -1px 1px black, -1px 1px 1px black, 1px -1px 1px black;}
.textshadow0 {text-shadow: 1px 1px 1px transparent;}
.padding10	{padding: 10vmin;}

	.t:hover,t:hover {text-decoration: underline;}
	.t,t	{position: relative;}
	.ts,ts	{position: absolute; display: none; bottom: 100%;left: 25%; animation: aniopac 1s; padding: 1vw;
			 background-color: white; outline: #555555 solid 1px; text-decoration: none; font-style: italic;}
	.t:hover .ts,.t:hover ts,t:hover .ts, t:hover ts, a:hover ts	{display: block;}
t-b, .t-b	{text-shadow: 2px 2px 3px black, -2px -2px 3px black, 2px -2px 3px black, -2px 2px 3px black;}
t-g, .t-g	{text-shadow: 1px 1px 4px #777777, -1px -1px 4px #777777, 1px -1px 4px #777777, -1px 1px 4px #777777;}
t-w, .t-w	{text-shadow: 2px 2px 3px white, -2px -2px 3px white, 2px -2px 3px white, -2px 2px 3px white;}

.anibg	{animation: anibg 30s infinite;}
	@keyframes anibg	{	0%		{background-image: url(UVCimg/bgani-01b.jpg); background-position: bottom left;}
							20%		{background-image: url(UVCimg/bgani-01b.jpg); background-position: bottom left;}
							25%		{background-image: url(UVCimg/bgani-02.jpg); background-position: center;}
							45%		{background-image: url(UVCimg/bgani-02.jpg); background-position: center;}
							50%		{background-image: url(UVCimg/bgani-04.jpg); background-position: bottom right;}
							70%		{background-image: url(UVCimg/bgani-04.jpg); background-position: bottom right;}
							75%		{background-image: url(UVCimg/bgani-03.jpg); background-position: bottom right;}
							95%		{background-image: url(UVCimg/bgani-03.jpg); background-position: bottom right;}
							100%	{background-image: url(UVCimg/bgani-01b.jpg); background-position: bottom left;}
							}

/*	Hover Menu controls	*/
summary {list-style: none;}
summary::marker, summary::-webkit-details-marker {display: none;}
.menu a {padding-top: .25rem; padding-bottom: .25rem; display: inline-block;}
.menu[open] .menu-open			{filter:invert(100%); outline: #999999 solid 1px;}
.menu[open] .menu-open::after	{content: "x"; color: black; position: absolute; right: 2%; top: 2%;}
.mapmenu[open] summary {outline: grey 1px dashed;}
#contact details[open] summary {outline: blue 1px dashed;}
.mapmenu[open] summary {text-decoration: underline;}
#contact details[open] summary::after, .mapmenu[open] summary::after, statementoffaith details[open] summary::after {content: "x"; color: blue; position: absolute; right: .3rem; top: -.3rem;}
.phover-menu		{position: relative; display: inline-block; width: 40vw;}
.phover-sub-list	{display: none; position: absolute; right: 40vw; font-size: 5vw; top: 0vh; width: 35vw;}
	.phover-menu:hover .phover-sub-list	{display: block;}
.phover-menu-L		{position: relative; display: inline-block;}
.phover-sub-list-L	{display: none; position: absolute; font-size: 1.3rem; width: 35vw; right: -11vw;}
	.phover-menu-L:hover .phover-sub-list-L	{display: block;}
nav a,td a {text-decoration: none; color: black;}
	/* new version of hover menu */
header {color: white; padding: 1px; text-align: center;}
header nav ul {list-style: none; margin: 0;padding: 0;display: flex;justify-content: space-between; font-size: 1.2rem;}
header nav ul li {margin-right: 20px; position: relative; font-weight: bolder;
					padding-left: 10px; padding-right: 10px; ;align-content: center; color: white;}
header nav ul li a {color: white;}
	sub-li	{display: none; position: absolute; top: 98%; right: -50%; font-weight:lighter; padding: .5rem;}
	header nav ul li:hover, header nav ul li a:hover {text-decoration: underline;}
	li:hover sub-li {display: block; width: 200%;}


/*	---	KEWYFRAMES animations	---	*/

.aniopac1	{animation: aniopac 1s;}
.aniopac2	{animation: aniopac 2s;}
.aniopac5	{animation: aniopac 5s;}
.ani3opac1, ani3opac1	{animation: ani3opac 1s;}
.ani3opac3	{animation: ani3opac 3s;}
.anifont1 {animation: ani-font 1s;}
.anidelay	{animation: ani-delay 5s;}
.anisize, anisize	{animation: ani-size 0.5s; }
.anisize0, anisize0	{animation: ani-size-0 0.5s; }
		@keyframes aniopac-85	{from{opacity: 0.0;}to{opacity: 0.85;}}
		@keyframes aniopac		{from{opacity: 0.0;} to{opacity: 1.0;}}
		@keyframes ani3opac		{0%{opacity: 0.0;} 50%{opacity: 0.0;} 100%{opacity: 1.0;}}
		@keyframes underl-ani	{from{text-decoration: none;} to{text-decoration: underline;}}
		@keyframes ani-font { 	0%{opacity: 0.0; font-size: 0; color: transparent;} 75%{color: transparent;} 100% {opacity: 1.0;} }
		@keyframes ani-size-0 { from{font-size: 0; color: transparent;} to{color: transparent;} }
		@keyframes ani-size { 	0%{font-size: 0; color: transparent;} 50%{color: transparent;} 100% {opacity: 1.0;} }
		@keyframes ani-delay {	0%{opacity: 0.0;} 90%{opacity: 0.0;} 100%{opacity: 1.0;}}


/*	ABOUT section	*/
.bgmission	{background-image: url(UVCimg/bg-Mission-03.jpg);}
.bgvision	{background-image: url(UVCimg/bg-vision-01.png);}
.bgvalues	{background-image: url(UVCimg/bg-Values-01.png);}

/*	Statement of Faith	*/
#statementoffaith-p details	{position: relative;}
#statementoffaith-p details p	{	position: relative; left: 3vw; top: -2vw; width: 75vw; font-size: 3.5vw;
									background-color: white; padding: 2vw; border: black solid 1px; animation: ani-font 0.5s;}
#statementoffaith-p details summary {color: #555555; font-size: 5vw; padding: 1vw; outline: #ddd solid 1px;}
#statementoffaith-p details[open] summary	{text-decoration: underline; outline: blue dotted 2px;}

#statementoffaith-l details	{position: relative; outline: #999999 solid 1px;}
#statementoffaith-l details p	{	position: relative; width:inherit; font-size: 1.25rem; animation: ani-font 0.5s;
									background-color: white; padding: 2vw; border: white solid 1px;}
#statementoffaith-l details summary {font-size: 2rem; color: #555555; padding: 1vw;}
#statementoffaith-l details summary:hover	{text-decoration: underline; background-color: rgb(256,256,256,0.5); border-radius: 10px;}
#statementoffaith-l details summary img {height: 2rem;}

/*	For announcement table	*/
.this-Sunday	{color: #333;}