/*
Copyright 2020 Homerus Tekst Service. All rights reserved.

These first set of 5 definitions cascade down, following the "mobile phones first" directive.
The media styles assigned to the first directive are assumed for all the others unless updated by that directive.

Rick's iPhone:   375 portrait / 990 landscape
Rick's iPad:     990 portrait / 1112 landscape

Ineke's iPad:     770 portrait / 1024 landscape


https://getbootstrap.com/docs/4.5/layout/overview/
https://www.w3schools.com/css/css_rwd_mediaqueries.asp 
*/
/* BOOTSTRAP MEDIA QUERIES

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

The style "margin-right" for the element "div.directMedia" is used to inform the HTML of the media category.
The style "margin-left" for the element "div.directMedia" is used to inform the HTML of hover capability.
*/

	                                                                               /* USED TO SPACE COMMENTS */
/*==========================================================================
	1. Extra small devices (phones, 600px and down)																   iPhone Portrait
==========================================================================*/
@media only screen and (max-width: 575px) {
	div.detectMedia {	border-color: red; margin-right: 1px; }                       /* For troubleshooting */
		
	/* QUOTATION REVOLVER */
	.quotes {
		visibility: hidden;
	}

}

	                                                                               /* USED TO SPACE COMMENTS */
/*==========================================================================
	2. Small devices (portrait tablets and large phones, 576px and up)               iPhone Landscape
==========================================================================*/
@media only screen and (min-width: 576px) {
	div.detectMedia {	border-color: orange; margin-right: 2px; }                    /* For troubleshooting */
	
	/* DOCUMENT */
	.pageWrap {
	}
	
	/* HEADER */
	.biz {
		font-size: 100%;
	}
	.biz1, .biz2 {
		padding: 0;	
		white-space: nowrap;
	}	
	
	/* CONTENT */
	.content {
		width: 94%;
	}

	/* SLIDE CAROUSEL */
	a.portfolio-menu:any-link {
		margin: 0 5px;
	}
	.ug-gallery-wrapper .ug-textpanel-title{
		font-weight: 400;
	}
	.ug-tile .ug-textpanel-title{
		font-size: 9px;		
	}

	/* QUOTATION REVOLVER */
	.quotes {
		visibility: visible;
	}
	.quotes blockquote {
		padding: 0 20px;
	}
	.quotes p {
		line-height: 1.05;
		font-size: 0.79em;
		padding-top: 5px;
	}

}

	                                                                               /* USED TO SPACE COMMENTS */
/*==========================================================================
	3. Medium devices (landscape tablets, 768px and up)                            iPad Portrait
==========================================================================*/
@media only screen and (min-width: 768px) {
	div.detectMedia {	border-color: blue; margin-right: 3px; }                     /* For troubleshooting */
	
	/* DOCUMENT */
	.pageWrap {
	}
	
	/* CONTENT */
	.content {
	}

	.line span {
		top: -22px;
	}

	/* SLIDE CAROUSEL */
	a.portfolio-menu:any-link {
		margin: 0 20px;
	}
	.ug-gallery-wrapper .ug-textpanel-title{
		font-weight: 600;
	}
	.ug-tile .ug-textpanel-title{
		font-size: 10px;		
	}

	/* QUOTATION REVOLVER */
	.quotes blockquote {
		padding: 0 25px;
		padding-left: 27px;
	}
	.quotes p {
		line-height: 1.25;
		font-size: .85em;
		padding-top: 8px;
	}
	.quote-long {
	font-size: 100%;
}
	.quote-giver {
	font-size: 92%;
	}
}

	                                                                               /* USED TO SPACE COMMENTS */

/*==========================================================================
	4a. Large devices (laptops/desktops, 992px and up)                             laptops, desktops
==========================================================================*/
@media only screen and (min-width: 992px) {
	div.detectMedia {	border-color: orange;	margin-right: 4px; }                   /* For troubleshooting */

	/* DOCUMENT */
	.pageWrap {
		width: 980px;
		font-size: 0.9em;
	}

	/* HEADER */
	.headerContainer {
		padding-bottom: 10px;
		flex-direction: row;
		align-items: flex-end;
	}
	.mastheadContainer {
		margin-right: auto;                                                          /* Justify item left */
		padding-left: 20px;
		text-align: left;
	}
	.logo {
		font-size: 1.875em;
	}
	.biz {
		font-size: 1em;
	}
	.menuContainer {
		margin-left: auto;																										 	     /* Justify item right */ 
		padding: 0 20px 11px 0;
		text-align: right;
	}

	/* CONTENT */
	.content {
		width: 95%;
		width: 80%;
	}

	/* SLIDE CAROUSEL */
	.ug-tile .ug-textpanel-title{
		font-size: 11px;		
	}

	/* QUOTATION REVOLVER */
	.quotes {
		visibility: visible;
	}
	.quotes blockquote {
		padding: 0 30px;
	}
	.quotes p {
		line-height: 1.25;
		font-size: 1.04em;
		padding-top: 6px;
	}

}


/*==========================================================================
	4b. Large devices (laptops/desktops, 992px and up)                              iPad Landscape
==========================================================================*/
@media (min-width: 992px) and (hover: none) {
	div.detectMedia {	border-color: orange;	margin-right: 4px; }                   /* For troubleshooting */

	/* DOCUMENT */
	.pageWrap {
		font-size: 1.1em; 
		width: 95%;
	}
	
	/* CONTENT */
	.line span {
		top: -27px;
	}

	.quotes p {
		line-height: 1.25;
		font-size: .85em;
		padding-top: 8px;
	}
	.quote-long {
	font-size: 100%;
}
	.quote-giver {
	font-size: 92%;
	}
}



	                                                                               /* USED TO SPACE COMMENTS */
/*==========================================================================
	5. Extra large devices (large laptops and desktops, 1200px and up)
==========================================================================*/
@media only screen and (min-width: 1200px) {
	div.detectMedia {	border-color: pink;	margin-right: 5px; }                     /* For troubleshooting */

}

	                                                                               /* USED TO SPACE COMMENTS */

/* 
There is much yet to understand about how these queries work.
Devices with hover, such as desktop computer, will accept the following styles,
but are then overwritten by the next set;
Whereas those devices without hover, such as portable phones and pads,
will not be overwritten the next.
*/

/*----- DEVICES WITHOUT HOVER -----*/
@media (hover: none) {
	div.detectMedia {	margin-left: 0; }
		
	/* MENU */
	a:link, a:active, a:visited {
		color: var(--color-teal);
		border-bottom: 1px solid var(--color-orange);
	}
	a.menu:active, a.menu:visited {
		color: var(--color-teal);
		border-bottom: 1px solid var(--color-creme);
	}

	/* PORTFOLIO */
	a.portfolio-active {
		color: var(--color-orange);
		border-bottom: 1px solid var(--color-creme);
	}
	}
	.portfolio-arrow-container img {
		opacity: .4;																								/* Just make the same opacity for all functions */
	}
	
}


/*----- DEVICES WITH HOVER -----*/
@media not all and (hover: none) {																							
	div.detectMedia {	margin-left: 1px; }

	/* PORTFOLIO */
	.portfolio-arrow-container img {
		opacity: .2;																								/* Just make the same opacity for all functions */
	}
}

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




/*--
Re font-size: 1em = 16px

https://haizdesign.com/css/fading-link-colour-with-css3/
https://www.geeksforgeeks.org/how-to-define-colors-as-variables-in-css/
https://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
https://webdesignerwall.com/tutorials/css3-media-queries
https://medium.com/@mezoistvan/finally-a-css-only-solution-to-hover-on-touchscreens-c498af39c31c
https://websiteedu.com/media-queries-for-mobile-and-tablets/

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

https://www.w3schools.com/html/html_responsive.asp


https://websiteedu.com/media-queries-for-mobile-and-tablets/				- SEEMS GOOD


	xborder-color-image: url('../graphics/Greek wall - fade.png');
	xborder-color-repeat: repeat-x;
	xheight: 66px;

--*/