@charset "UTF-8";

/**
 * @package 	  mySimplePlxDefault
 * @version 	  14.09
 * @site 		  https://github.com/cpalo/simpleplucss
 *
 * @author 		  Patrice Cahue aka cpalo
 * @site 		  https://simplecss.fr
 * @license 	  Coding under GNU GPL v3.0 or later
 * @license 	  Content & others under CC-BY-NC-SA
 * 
 * @file		  css/simpleplucss-14.09.css
 * @lastmodified  2024-09-25
 *
 *
 * ------------------------------------------------------------
 * ---                     SIMPLE-PLUCSS                    ---   
 * ---               v14.09 for PLUXML v5.8.16              ---   
 * ------------------------------------------------------------
 *
 *
	Table of Content :
	------------------
	
	0 - Features and main changes
    1 - Custom Properties (Variables Css)
		1.1 - Fonts - Appareance
		1.2 - Fonts - Sizes
		1.3 - Helpers for spacing
        1.4 - Line-Height & Vertical Rythm
		1.5 - Responsive Typography
		1.6 - Colors Pallet
		1.7 - Functionnal assignations : Elements	
		1.8 - Functionnal assignations : Layouts
    2 - Simple Normalize
		2.1 - Changing Box Model
		2.2 - Set core root defaults
		2.3 - Set core body defaults
		2.4 - Embedded content
		2.5 - Other default settings	
	3 - Typographical basics
		3.1 - Fonts - Appareance
		3.2 - Fonts - Sizes 
		3.3 - Vertical Rythm, Spacing & Line-height 
		3.4 - Typographical enhancements
	4 - Typography : Miscellaneous
		4.1 - Horizontal rule
		4.2 - Blockquotes
		4.3 - Preformat & Code
		4.4 - Lists
		4.5 - Links
		4.6 - Tables
		4.7 - Images & medias
		4.8 - Accessibility
	5 - Forms 
		5.1 Reset 
		5.2 Forms 
		5.3 Forms Colors
		5.4 Helpers : Buttons & inputs colors
	6 - Navigation
		6.1 - Styles de base
		6.2 - Main Navigation
		6.3 - Burger Button
        6.4 - Pagination
	7 - Others Components
		7.1 - modal-xxxx
		7.2 - Gallery & Images 
		7.3 - Alert
		7.4 - Button
		7.5 - Progress Bars 
		7.6 - Elements Badge & Label 
		7.7 - Frame
		7.8 - Tooltip
	8 - Positionning Helpers & Utilities	
		8.1 - Plx-Grid-Float 12 columns (extracts
		8.2 - Helpers for positioning
	9 - Styles for printing
 */ 
 
/**
 * Credits and thanks :
 * --------------------
 * Ce travail est une adaptation du framework Css de PluXml : PluCss
 * 		plucss v1.3.1 | 2020-01-05 | GPL License | https://github.com/pluxml/PluCSS 
 * 		Authors	Jos, Stephane F., sudwebdesign, Pedro "P3ter" Cadete 
 */
 
 
/* ------------------------------------------------------------
 * --- 00 - FEATURES : MAIN CHANGES COMPARED TO PLUCSS
 * ------------------------------------------------------------ */
 
 
 
/* ------------------------------------------------------------
 * --- 01 - CUSTOM PROPERTIES 
 * ------------------------------------------------------------ */
 
@import url("simpleplucss-custom-14.09.css");


/* ------------------------------------------------------------
 * --- 02 - SIMPLE NORMALIZE 
 * ------------------------------------------------------------ */
 
*,
*:after,
*:before {
	box-sizing: border-box;
}

/* 1rem = 16px <--> PluCss 1rem = 10px */
html {
	font-size: 100%;
}

body {
	margin: 0;
}

details,
main,
summary {
	display: block;
}

svg:not(:root) {
	overflow: hidden;
}


/* ------------------------------------------------------------
 * --- 03 - TYPOGRAPHICAL BASICS 
 * ------------------------------------------------------------ */ 
 
/* - 3.1 - Fonts - Appareance 
   ------------------------------------------------- */

body {
	background-color: var(--body-background-color);
	color: var(--text-color);
	font-family: var(--text-font);	
}

code,
kbd,
samp {
	font-family: var(--code-font); 
}

pre {
	font-family: var(--pre-font); 
}

/* Helpers : Text-Colors  */
.text-blue  { --text-color: var(--plx-color-blue); }
.text-green { --text-color: var(--plx-color-green);}
.text-orange{ --text-color: var(--plx-color-orange);}
.text-red   { --text-color: var(--plx-color-red);}

/* - 3.2 - Font Sizes 
   ------------------------------------------------- */
   
body {
	font-size: var(--text-size);	
}

pre {
	font-size: var(--text-size);
}  
  
code,
kbd,
samp {
	font-size: var(--text-size-sm);
}  
   
/** 
 * h1 is never visible (i.e. hidden header of the document) 
 * --> real hierarchy from h2 
 * In fact h2 is practically never visible because it is mainly used
 * to respect the html5 outline with a title under each sectioning element.
 * In practice, only h4, h5 and h6 will be used to enter text
 * since the h1, h2 and h3 will have been "automatically" used in the construction of the theme.
 */
   
h1 { font-size: var(--h1-size); } 
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }
h5 { font-size: var(--h5-size); }
h6 { font-size: var(--h6-size); }  

/* Each sectioning element has a title, but not necessarily visible  */
 h1.no-visible-avoid-untitled,
 h2.no-visible-avoid-untitled,
 h3.no-visible-avoid-untitled,
 h4.no-visible-avoid-untitled{
	display: none; 
} 


/* - 3.3 - Vertical Rythm, Spacing & Line-height 
   ------------------------------------------------- */
   
body {
	line-height: var(--text-line-height);	
}      
   
h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: var(--margin-2);
	margin-bottom: var(--margin-1);
	margin-inline: 0;
	line-height: var(--title-line-height);
	font-weight: 500;
}


/* - 3.4 - Typographical enhancements
   ------------------------------------------------- */
   
abbr {
	border-bottom: none;
	cursor: help;
	text-decoration: underline dotted;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}  
   
small {
	font-size: var(--text-size-xxs);	
}

sub,
sup,
.sup {
	font-size: var(--text-size-xxs);	
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup,
.sup {
	top: -0.5rem;		
}
sub {
	bottom: -0.5rem;	
}     


/* ------------------------------------------------------------
 * --- 03 - TYPOGRAPHY : MISCELLANEOUS 
 * ------------------------------------------------------------ */ 

/* - 4.1 - Horizontal rule 
    ------------------------------------------------- */ 
	
hr {
	height: 0;
}
	

/* - 4.2 - Blockquotes
   ------------------------------------------------- */   
   
 blockquote {
	font-style: italic;
}

cite:before {
	content: "— ";
}

  
/* - 4.3 - Preformat & Code
   -------------------------------------------------- */

pre {
	overflow: auto;
}
	
 
/* - 4.4 - Lists
   ------------------------------------------------- */
 
ul.inline-list {
	font-size: 0;
	margin-block: var(--margin-1);
	margin-inline: 0;
	padding-left: 0;
}

	ul.inline-list li {
		display: inline-block;
		list-style-type: none;
		margin-left: var(--unit-15);
		font-size: var(--text-size);
	}
	ul.inline-list li:first-child {
		margin-left: 0;
	}
	
ul.unstyled-list {
	padding-left: 0;
}

	ul.unstyled-list li {
		list-style-type: none;
	}


/* - 4.5 - Links & Hyperlinks
   ------------------------------------------------- */  

a {
	background: transparent;
}
a:active,
a:hover {
	outline: 0;
}

a {
	color: var(--link-color);	/* --color-primary-light/--plx-color-blue */	
	text-decoration: none;
}
a:active,
a:hover {
	color: var(--link-hover-color); /* --text-color) */
	text-decoration: underline;
}


/* - 4.6 - Tables
   ------------------------------------------------- */ 
   
table {
	border-collapse: collapse;
	border-spacing: 0;
}

	tr {
		border-bottom: 1px solid;
	}
	tr {
		border-color: var(--table-border-color);  /* --light-border-color */
		transition-duration: .2s;
	}
	tr:hover {
		background-color: var(--table-tr-hover-background-color); /* --color-primary-light/--plx-color-blue-light */	
		transition-duration: .2s;
	}	

		caption,
		th {
			text-align: left;
		}

		td,
		th {
			height: var(--spacing-25);			
			padding-inline: var(--unit-2);				
		}

.scrollable-table {
	overflow: auto;
}


/* - 4.7 - Images & medias
   ------------------------------------------------- */ 
   
  figure {
	margin: 0;
}

img {
	border: 0;
	height: auto;
	max-width: 100%;
}

svg:not(:root) {
	overflow: hidden;
}
   

/* - 4.8 - Accessibility
   ------------------------------------------------- */
 
.screen-reader-text {
	position: absolute !important;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
}
   
   
/* ------------------------------------------------------------
 * --- 05 - FORMS
 * ------------------------------------------------------------ */
 
/* - 5.1 - Forms reset
   ------------------------------------------------- */ 
 
 fieldset {
	border: none;
	padding: 0;
}

legend {
	margin-bottom: var(--margin-1);
	padding: 0;
}

label {
	display: block;
	padding-bottom: var(--unit-1);	
}

button,
input,
select,
textarea {
	font: inherit;
	height: var(--spacing-2);	
	margin: 0;
	outline: none;
	padding-inline: var(--unit-1);
	width: 100%;
}

button,
input {
	overflow: visible;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	border-color: transparent;
	cursor: pointer;
	padding-inline: var(--unit-2);			
	width: auto;
}

textarea {
	height: auto;
	overflow: auto;
}

select {
	padding-left: var(--unit-05);		
	padding-right: 0;
}

optgroup {
	font-weight: bold;
	font-style: normal;
}
[type="checkbox"],
[type="radio"] {
	height: auto;
	padding: 0;
	width: auto;
}

[type="file"] {
	height: auto;
	padding: 0;
}

[disabled]:hover {
	cursor: not-allowed;
}


/* - 5.2 - Default settings by PluCss
   ------------------------------------------------- */
 
form .col {
	margin-bottom: var(--margin-1);
}

form.inline-form button,
form.inline-form input,
form.inline-form label,
form.inline-form select,
form.inline-form textarea {
	display: inline-block;
	width: auto;
}

form .col.label-centered {
	margin-bottom: 0;
}
form .label-centered label {
	padding-top: var(--unit-1);		
}

button,
input,
select,
textarea {
	border: 1px solid var(--input-border-color);  /* --light-border-color */
	border-radius: var(--radius);
	transition-duration: .2s;
}

input:focus,
select:focus,
textarea:focus {
	border: 1px solid var(--input-focus-border--color);  /* --plx-color-blue */
	transition-duration: .2s;
}

[type="file"] {
	border: none;
}


/* - 5.3 - Forms Colors 
   ------------------------------------------------- */

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid var(--input-border-color);  		/* --light-border-color */
	background-color: var(--input-background-color); 	/* --plx-color-gray */
	color: var(--input-text-color);						/* --color-white */
	transition-duration: .2s;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background-color: var(--input-hover-background-color); /* --plx-color-darkgray-light */
	transition-duration: .2s;
}

button[disabled],
input[disabled],
select[disabled],
textarea[disabled],
button[disabled]:hover,
input[disabled]:hover,
select[disabled]:hover,
textarea[disabled]:hover {
	background-color: var(--elts-form-disabled-background-color); /* --plx-color-lightgray */
	color: var(--elts-form-disabled-color); 					  /* --plx-color-gray-lighter */
}

/* - 5.4 - Helpers : Buttons & inputs colors
 * ------------------------------------------------- */
 
.input-blue {
	--input-text-color: var(--plx-color-whitegray);			
	--input-background-color: var(--plx-color-blue); 			 
	--input-background-color-hover:var(--plx-color-blue-dark);   	
} 

.input-red {
	--input-text-color: var(--plx-color-whitegray);				 
	--input-background-color: var(--plx-color-red);				 
	--input-background-color: var(--plx-color-red-dark); 		
}

.input-orange {
	--input-text-color: var(--plx-color-whitegray);				  
	--input-background-color: var(--plx-color-orange); 			  
	--input-background-color-hover: var(--plx-color-orange-dark);
}

.input-yellow {
	--input-text-color: var(--plx-color-whitegray);				   
	--input-background-color: var(--plx-color-yellow);			   
	--input-background-color-hover: var(--plx-color-yellow-dark); 
}

.input-green {
	--input-text-color: var(--plx-color-whitegray);				  
	--input-background-color: var(--plx-color-green);			  
	--input-background-color-hover: var(--plx-color-green-dark);	
}


/* ------------------------------------------------------------
 * --- 06 - NAVIGATION
 * ------------------------------------------------------------ */
 
/* - 6.1 - Styles de base
   ------------------------------------------------- */

.menu {
	font-size: 0rem;
	margin: 0;
	padding-left: 0;
}
	.menu li {
		display: inline-block;
		font-size: var(--text-size-sm);
		list-style-type: none;
		margin-left: var(--spacing-1);
	}
	.menu li:first-child {
		margin-left: 0;
	}
		.menu li.active a {
			color: var(--text-color);
		}
		
	.menu.vertical li {
		display: block;
		margin-left: 0;
	}

	.menu.expanded li {
		margin-left: 0;
		transition-duration: .2s;
	}
	.menu.expanded li:hover {
		border-radius: var(--radius);
		background-color: var(--plx-color-lightgray);
		transition-duration: .2s;
	}
		.menu.expanded li a {
			border-radius: var(--radius);
			display: block;
			height: var(--plx-spacing-25);	    
			line-height: var(--plx-spacing-25);	
			padding-left: var(--unit-2);	
			padding-right: var(--unit-2);	
		}
		.menu.expanded li a:hover {
			text-decoration: none;
		}
	
.menu.breadcrumb li + li:before,
.menu.expanded.breadcrumb > li + li a:before {
	content: "/";
}
.menu.breadcrumb li + li:before,
.menu.expanded.breadcrumb > li + li:before,
.menu.expanded.breadcrumb > li + li a:before {
	margin-right: var(--unit-2);	/*  7px; */
}
.menu.expanded.breadcrumb > li + li:before {
	content: none;
}

.menu.expanded li.active a,
.menu.expanded li.active:hover {
	background-color: var(--color-primary);	/* plx-color-blue */
	color: var(--color-white);
}


/* - 6.2 - Main Navigation 
   ------------------------------------------------- */
   
.responsive-menu label {
	background-color: var(--plx-color-darkgray);
	color: var(--color-white);
	cursor: pointer;
	text-align: center;
}

#nav,/* fix old android browser (always open) */
.responsive-menu label,
.responsive-menu input[type=checkbox] { 
	display: none;
}
.responsive-menu label {
	height: var(--plx-spacing-25);	    
	line-height: var(--plx-spacing-25);	
	padding-left: var(--unit-2);		
	padding-right: var(--unit-2);	
}

#nav:checked+ul#responsive-menu,/* fix old android browser */
.responsive-menu input[type=checkbox]:checked+ul { 
	display: block;
}

@media (max-width: 767px) {
	.responsive-menu { /* fix old android browser : good position*/
		left: 0;
		right: 0;
		z-index:1;
	}
	/* Modif de gcyrillus-nomade du 23/10/2021 */
	/*.responsive-menu ul {
		display: none;
	}*/
	.responsive-menu > ul {
		display: none;
	}
	.responsive-menu label,
	.responsive-menu ul li {
		display: block;
		margin-left: 0;
	}
	.responsive-menu ul li:hover {
		background-color: var(--plx-color-lightgray);
	}
	.responsive-menu ul li a {
		display: block;
		height: var(--plx-spacing-25);	    
		line-height: var(--plx-spacing-25);	
		padding-left: var(--unit-2);		
		padding-right: var(--unit-2);	
	}
	.responsive-menu ul li a:hover {
		text-decoration: none;
	}
	.responsive-menu .menu.breadcrumb li + li:before,
	.responsive-menu .menu.expanded.breadcrumb > li + li a:before {
		content: none;
	}
	.responsive-menu ul li.active a,
	.responsive-menu ul li.active:hover {
		background-color: var(--color-primary);	/* plx-color-blue */
		color: var(--color-white);
	}
}

/* - 6.3 - Burger Button 
   ------------------------------------------------- */  
   
   
   
/* - 6.4 - Pagination 
   ------------------------------------------------- */  

.pagination {
	margin: 0;
	padding: 0;
	width: 100%;
}
.pagination ul,
.pagination ul ul {
	display: inline-block;
	margin: 0;
	padding: 0;
}
.pagination li,
.pagination li li {
	display: inline-block;
	font-size: var(--text-size);
	list-style-type: none;
	margin-block: var(--unit-25);	
	margin-inline: var(--unit-25);	 
	cursor: pointer;
}
.pagination li.active a {
	color: var(--plx-color-red-0);
}
.pagination li.disabled a {
	color: var(--plx-color-gray-light);
}
.pagination li.disabled a:hover {
	text-decoration: none;
}


/* ------------------------------------------------------------
 * --- 07 - OTHER COMPONENTS 
 * ------------------------------------------------------------ */
 
/* - 7.1 - modal-xxxx 
   ------------------------------------------------- */

.modal-mask {
	position: fixed;
	z-index: 9998;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: hsla(0, 0%, 0%, .5));
	transition: opacity .3s ease;
}

.modal-container {
	width: 450px;
	margin: var(--spacing-3) auto 0;	
	padding: var(--spacing-125) var(--spacing-25);	
	background-color: var(--color-white);
	border-radius: 2px;
	box-shadow: 0 2px 8px hsla(0, 0%, 0%, .33));
	transition: all .3s ease;
	font-family: var(--text-font);
}

.modal-header {
	margin-top: 0;
}

.modal-body {
	margin: var(--spacing-125) 0; 
}

.modal-footer {
	margin: var(--spacing-125) 0; 
	text-align: right;
}

.modal-container button:hover {
	color: var(--plx-color-darkgray-dark); /* #333 */
	background-color: transparent;
}

.modal-btn-close {
	background: transparent;
	border: 0;
	height: var(--unit-25); 	 			
	line-height: var(--unit-25); 		
	margin-left: var(--unit-05); 			 
	margin-right: calc(var(--unit-05) * -1); 
	padding: var(--unit-05); 
	text-decoration: none;
	width:var(--unit-25);				
	color: var(--plx-color-gray-light);		/* hsl(0, 0%, 60%) i.e #999; */
}
.modal-btn-close:after {
	display: inline-block;
	content: "\00d7"; /* This will render the 'X' */
}


/* - 7.2 - Gallery & Images
   ------------------------------------------------- */

.gallery {
	list-style: none;
	margin-block: calc(var(--spacing-1) * -1);
	overflow: hidden;
	padding-left: 0;
}

	.gallery li {
		float: left;
		padding-top: var(--margin-0);
		padding-bottom: var(--margin-1);
		padding-inline: var(--spacing-1);	
	}

.img-circle {
	border-radius: 50%;
}
.img-rounded {
	border-radius: var(--radius);
}


/* - 7.3 - Alert 
   ------------------------------------------------- */ 

.alert {
	border-radius: var(--radius);
	margin-bottom: var(--margin-1);
	padding: var(--spacing-1);
	background-color: var(--alert-background-color);
	color: var(--alert-text-color);
}

	.alert a,
	.alert a:hover {
		color: inherit;
	}
	
.alert-blue {
	--alert-background-color: var(--plx-color-blue-light, hsl(204, 71%, 92%));    /* #dbedf9) */
	--alert-text-color: var(--plx-color-blue, hsl(204, 71%, 49%)); 			      /* #258fd6 */
}
.alert-green {
	--alert-background-color: var(--plx-color-green-light, hsl(146, 63%, 89%));   /* #d3f5e2 */
	--alert-text-color: var(--plx-color-green, hsl(145, 63%, 37%));			      /* #239c56 */
}
.alert-orange {
	--alert-background-color: var(--plx-color-orange-light, hsl(26, 81%, 92%));   /* #fbe8d9; */
	--alert-text-color: var(--plx-color-orange, hsl(28, 80%, 47%)); 		      /* #da7418 */
}
.alert-red {
	--alert-background-color: var(--plx-color-red-light, hsl(5, 81%, 94%)); 	 /* #fce4e2; */  
	--alert-text-color: var(--plx-color-red, hsl(6, 78%, 53%));				     /* #e43d29 */
}


/* - 7.4 - Button 
   ------------------------------------------------- */ 
   
.button {
	border-radius: var(--radius);
	background-color: var(--button-background-color);
	color: var(--button-text-color);
	padding-block: var(--unit-25);	
	padding-inline: var(--unit-2);	
	transition-duration: .2s;
}
.button:hover {
	background-color: var(--button-hover-background-color);
	color: var(--button-hover-text-color);
	text-decoration: none;
	transition-duration: .2s;
}

.button-blue {
	--button-background-color: var(--plx-color-blue, hsl(204, 71%, 49%)); 			  /* #258fd6 */
	--button-text-color: var(--plx-color-whitegray, hsl(0, 0%, 93%));				  /* #eee */
	--button-hover-background-color: var(--plx-color-blue-dark, hsl(204, 70%, 41%));  /* #1f77b1 */
}
.button-red {
	--button-background-color: var(--plx-color-red, hsl(6, 78%, 53%));				 /* #e43d29 */
	--button-text-color: var(--plx-color-whitegray, hsl(0, 0%, 93%));				 /* #eee */
	--button-hover-background-color: var(--plx-color-red-dark, hsl(6, 77%, 42%));    /* #bc2818 */
}
.button-orange {
	--button-background-color: var(--plx-color-orange, hsl(28, 80%, 47%)); 			   /* #da7418 */
	--button-text-color: var(--plx-color-whitegray, hsl(0, 0%, 93%));				   /* #eee */
	--button-hover-background-color: var(--plx-color-orange-dark, hsl(29, 80%, 99%));  /* #b46014 */
}
.button-yellow {
	--button-background-color: var(--plx-color-yellow, hsl(44,100%, 44%));			    /* #e0a800 */
	--button-text-color: var(--plx-color-whitegray, hsl(0, 0%, 93%));				    /* #eee */
	--button-hover-background-color: var(--plx-color-yellow-dark, hsl(45, 77%, 41%));   /* #d39e00 */
}
.button-green {
	--button-background-color: var(--plx-color-green, hsl(145, 63%, 37%));			   /* #239c56 */
	--button-text-color: var(--plx-color-whitegray, hsl(0, 0%, 93%));				   /* #eee */
	--button-hover-background-color: var(--plx-color-green-dark, hsl(145, 62%, 29%));  /* #1c7943 */	
}

/* - 7.5 - Progress Bars 
   ------------------------------------------------- */
   
progress {
    vertical-align: baseline;
}
   
.progress {
		background-color: var(--color-white);
	border-radius: var(--radius);
	border: 1px solid var(--light-border-color);
	position: relative;
	width: 100%;
}

	.progress span {
		background-color: var(--plx-color-blue);
		border-radius: var(--radius);
		color: var(--color-white);
		display: block;
		height: var(--plx-spacing-25);	    
		line-height: var(--plx-spacing-25);	
		min-width: 22px;
		overflow: hidden;
		position: relative;
		text-align: center;
	}
	.progress span[style="width: 0%;"] {
		background: none;
		color:var(--plx-color-darkgray);
}


/* - 7.6 - Elements Badge & Label 
   ------------------------------------------------- */
   
.badge,
.label {
	background-color: var(--plx-color-blue); 
	border-radius: var(--radius);
	color: var(--color-white);
	display: inline-block;
	margin-left: var(--unit-1);	
}
.badge {
	line-height: 1;
	padding: var(--unit-05);	
}

.menu.expanded .active a .badge {
	background-color: var(--color-white);
	color: var(--plx-color-blue); 
}

.menu.vertical .badge {
	float: right;
}

.menu.vertical.expanded .badge {
	margin-top: var(--margin-05);	
}

.label {
	padding-block:  2.5px;
	padding-inline: var(--unit-1);	
}


/* - 7.7 - Frame 
   ------------------------------------------------- */
   
.frame {
	height: 0;
	padding-top: 56.25%;
	position: relative;
}
.frame embed,
.frame iframe,
.frame object,
.frame video {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}


/* - 7.8 - Tooltips 
   ------------------------------------------------- */

a.tooltip {
	position: relative;
	display: inline;
}

	a.tooltip span {
		font-size: var(--text-size-xs);
		line-height: 17px;
		position: absolute;
		min-width:140px;
		min-width:140px;
		color: var(--color-white);
		background: var(--plx-color-darkgray-light);
		min-height: 30px;
		text-align: center;
		visibility: hidden;
		border-radius: var(--radius);
		opacity: 0;
		transition: opacity 0.3s ease-in-out;
	}
	a.tooltip span:after {
		content: '';
		position: absolute;
		width: 0; height: 0;
	}
	a:hover.tooltip span {
		visibility: visible;
		opacity:1;
		z-index: 999;
	}
	
a.tooltip.tooltip-top span:after {
	top: 100%;
	left: 50%;
	margin-left: -8px;
	border-top: 8px solid var(--dark-border-color);
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
}
a:hover.tooltip-top span {
	bottom: 30px;
	left: 50%;
	margin-left: -76px;
}
a.tooltip.tooltip-right span:after {
	top: 50%;
	right: 100%;
	margin-top: -8px;
	border-right: 8px solid var(--dark-border-color);
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
}
a:hover.tooltip-right span {
	left: 100%;
	top: 50%;
	margin-top: calc(var(--margin-1) * -1);
	margin-left: var(--spacing-1);
}
a.tooltip.tooltip-bottom span:after {
	bottom: 100%;
	left: 50%;
	margin-left: -8px;
	border-bottom: 8px solid var(--dark-border-color);
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;	
}
a:hover.tooltip-bottom span {
	top: 30px;
	left: 50%;
	margin-left: -76px;
}
a.tooltip.tooltip-left span:after {
	top: 50%;
	left: 100%;
	margin-top: -8px;
	border-left: 8px solid var(--dark-border-color);
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
}
a:hover.tooltip-left span {
	right: 100%;
	top: 50%;
	margin-top: calc(var(--margin-1) * -1);
	margin-right: var(--spacing-1);
}


/* ------------------------------------------------------------
 * --- 08 - GRID, GALLERY, AND HELPERS
 * ------------------------------------------------------------ */
 
.container {
	margin: 0 auto;
	max-width: 1280px;
	padding-left:  var(--spacing-1);
	padding-right: var(--spacing-1);
	width: 100%;
}
	.grid {
		overflow: hidden;
		margin-left: calc(var(--spacing-1) * -1);
		margin-right: calc(var(--spacing-1) * -1);
	}
		.col {
			float: left;
			position: relative;
			min-height: 1px;
			padding-left:  var(--spacing-1);
			padding-right: var(--spacing-1);
			width: 100%;
		}
		
@media (min-width: 768px) {
	.container {
		padding-left:  var(--spacing-125);		
		padding-right: var(--spacing-125);		
	}
}

@media (min-width: 1330px) {
	.container {
		padding-left:  var(--spacing-2);		
		padding-right: var(--spacing-2);			
	}
}


/* - 9.2 - Helpers for positioning 
   ------------------------------------------------- */ 

.text-left {
	text-align: left;
}
.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}
.text-justify {
	text-align: justify;
}
.float-left {
	float: left;
}
.float-center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.float-right {
	float: right;
}
.float-none {
	float: none;
}
.show {
	display: initial;
}
.hide {
	display: none;
}
.full-width {
	width: 100%;
}
.width-auto {
	width: auto;
}
.no-margin {
	margin: 0;
}
.no-padding {
	padding: 0;
}
.sticky {
	position: sticky;
	top: 0;
}


/* ------------------------------------------------------------
 * --- 09 - STYLES FOR PRINTING 
 * ------------------------------------------------------------ */  

@media print {
	body {
		padding: 0;
		margin: 0;
	}
	header .sticky,
	nav .nav,
	aside,
	#form {
		display:none;
	}
	main .content {
		width: 100% !important;
	}
	aside {
		display: none;
	}
	form {
		display: none;
	}
}