/*
 * 	Theme Name: My theme
 * 	Author: PYV
 * 	Author URI: http://www.reliance-centre.ch
 * 	Description: Responsive theme
 * 	Version: 1.0
 * 	License: no license
*/


/* NOTES
 * 	-------------------------------------------------------------
 * 	- This stylesheet uses rem values
*/

/* LIST OF CLASSES
 * --------------------------------------------------------------
 * .clear		to assign "clear:both" to an element
 * .
*/

/* RESET
 * reset from https://meyerweb.com/eric/tools/css/reset
 * + from GetSimple-Wordpress 2012 theme
 * + from https://www.joshwcomeau.com/css/custom-css-reset/
 * --------------------------------------------------------------
*/

:root {
	--main_bg_color: #fff;
	--main_text_color: #444;
	--header_height: calc(40rem/16);
	--anchor_margin_jump: calc(80rem/16);	/* need this so anchor not hidden behind menu */
	--header_bg_color: #fafaf0;
	--header_bg_color_hover: #ededd0;
	--header_menu_color: var(--main_text_color);
	--header_shadow: 1px 1px 3px rgba(64, 64, 64, 0.5);
	--footer_bg_color: var(--header_bg_color);
	--footer_text_color: #555;
	--table_text_color: var(--main_text_color);
	--table_price_bg_color_hover: #f3f3dc;
	--color_act1: #e6d7b8;
	--color_act2: #9cc0d2;
	--color_act3: #8868a0;
	--color_member1b: #a1ffff;
	--color_member1: #00E1E1;
	--color_member2: #82F961;
	--color_member3: #FFA000;
	--presentation_text_color: #333;
	--box_bg_color: var(--header_bg_color);
	--box_border_color: #ccc;
	--box_border: 1px solid #ccc;
	--box_text_color: #222;
	--img_border_radius: 3px;
	--button_bg_color: var(--box_bg_color);
	--button_border: var(--box_border);
	--button_border_color: var(--box_border_color);
	--button_height: calc(40rem/16);
	--icon_shadow: 0 1px 2px #888;
	--padding_small_screen: 6%;
	--neg_margin: -7%; /* +7% , to compensate 6% padding of site-content */
	--neg_margin_width: 114%;
	--cal_header_color: #A95D14;
}

*, *::before, *::after {
	box-sizing: border-box;	/* Use a more intuitive box-sizing */
}
* {
	line-height: calc(1em + 0.5rem);	/* have a nice line-height for big fonts too */
	margin: 0;		/* Remove all margins */
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;				/* to remove all default font styles like strong,... */
	vertical-align: baseline;
}
html {
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
html, body {
	height: 100%;		/* Allow percentage-based heights in the application */
}
body {
	-webkit-font-smoothing: antialiased;	/* Improve text rendering on Mac */
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
img, picture, video, canvas, svg, audio {
	display: block;			/* change default settings of img to avoid some issues */
	margin: auto;
	max-width: 100%;
}
audio:not([controls]) {
	display: none;
}
h1, h2, h3, h4, h5, h6 {
	line-height: calc(1em + 0.5rem);	/* have a nice line-height for big fonts too */
	clear: both;
	overflow-wrap: break-word;	/* avoid text overflows */
}
p {
	overflow-wrap: break-word;
}
input, button, textarea, select {
	font: inherit;			/* keep the same font everywhere */
}

/* Style for repeatable patterns */
/* -------------------------------------------------------------- */
ol, ul {
	list-style: none;
}
blockquote,
q {
	quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
del {
	color: #333;
}
ins {
	background: #fff9c0;
	text-decoration: none;
}
mark {
	background: #fff9c0;
	color:#000;
	font-style:italic;
	font-weight:bold;
}
hr {
	display: block;
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin: calc(24rem/16);
}
sup,
sub {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}
small {
	font-size: smaller;
}
caption,
th,
td {
	font-weight: normal;
	text-align: left;
}

/* Form fields/buttons , general styles first */
/* -------------------------------------------------------------- */
button,
input,
textarea {
	border: 1px solid #ccc;
	border-radius: 3px;
	font-family: inherit;
	padding: 6px calc(20rem/16);
}
button,
input {
	line-height: normal;
}
textarea {
	font-size: 100%;
	overflow: auto;
	vertical-align: top;
}

/* Reset non-text input types */
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="hidden"],
input[type="image"],
input[type="color"] {
	border: 0;
	border-radius: 0;
	padding: 0;
}

/* STYLING CLASSES
-------------------------------------------------------------- */

.clear:after,
.wrapper:after,
.format-status .entry-header:after {
	clear: both;
}
.clear:before,
.clear:after,
.wrapper:before,
.wrapper:after,
.format-status .entry-header:before,
.format-status .entry-header:after {
	display: table;
	content: "";
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Body, links, basics */
html {
	font-size: 100%;
}
body {
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.5;
	font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

	text-rendering: optimizeLegibility;
	color: var(--main_text_color);
}

/* main style for text links */
a {
	outline: none;
	text-decoration: none;
	color: #1852b1;
	/* avoid anchors being hidden behind sticky menu */
	scroll-margin-top: var(--anchor_margin_jump);
}
a:visited {
	color: #652899;
	border-bottom-color: #9f78b6;
}
a:hover {
	color: #44f;
	border-bottom-color: #44f;
}
a:active {
	color: #ee2d23;
}
a:focus {
	outline: thin solid;
}
/* Page structure */
.site {
	background-color: var(--main_bg_color);
}
.site-content {
	margin: auto;
	margin-top: var(--header_height); /* let space for menu bar */
	padding: calc(20rem/16) var(--padding_small_screen);
}

/* display on two columns when large, one when small */
address.two-columns,
ul.two-columns,
div.two-columns {
	column-count: 1;
}
.two-columns li {
	display: inline-block;
}
/* Header  GRID */
.site-header {
	display: grid;
	/* 130px for logo, 2x45px for lang  min 150px for menu */
	grid-template-columns: calc(130rem/16) auto calc(90rem/16) calc(150rem/16);
	height: var(--header_height);
	max-height: var(--header_height);
	background-color: var(--header_bg_color);
	box-shadow: var(--header_shadow);
	clear: both;
	width: 100%;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 100;
	font-size: calc(13rem/16);
}
.site-header a {
	border: none;
}
/* hgroup : logo + small description sentence */
.site-header hgroup {
	display: block;
}
.site-header hgroup h1 img {
	display: inline-block;
	height: calc(32rem/16);		/* image size: 120x34px */
	width: auto;
	aspect-ratio: 120/34;
	vertical-align: top;
	margin-top: 4px;			/* to align Reliance with menu text */
	margin-left: 15px;
}
.site-header hgroup h2 {		/* site description */
	display: none;
}
.header-empty {
	max-height: var(--header_height);	/* to avoid "bug" when expanding menu */
}
/* language selection */
.lang-select {
	max-height: var(--header_height);
	text-align: right;
	margin-right: 10px;
	line-height: var(--header_height);	/* to have text centered */
}
.lang-select a {
	display: inline-block;	/* to make the whole area clickable */
	padding: 0 5px;
	font-size: calc(12rem/16);
	color: var(--main_text_color);
}
.lang-select a:visited {
	color: var(--main_text_color);
}
.lang-select a:hover {
	font-weight: bold;
}
	
/* Navigation Menu */
.main-navigation {
	display: block;
	text-align: right;
	text-transform: uppercase;
}

/* Menu toggle button trick with checkbox */
.menu-toggle {
	display: block;
	margin-right: calc(20rem/16);
	margin-left: 20%;		/* make most of the bar clickable */
	line-height: var(--header_height);	/* to have text centered */
	color: var(--header_menu_color);
	background-image: url('https://www.reliance-centre.ch/cms/data/uploads/images/illustrations/icons/menu.svg');
	background-size: auto 18px;
	background-repeat: no-repeat;
	background-position: top 11px right 10px;
}
.menu-toggle span {
	visibility: hidden; /* hide text */
}
.menu-toggle:hover {
	cursor: pointer;
}
#menu-checkbox {
	display: none;		/* hide little square */
}
#menu-checkbox:checked + ul {
	display: inline-block;
}

/* navigation on small display */
.main-navigation ul {
	display: none;
	background-color: var(--header_bg_color);
	box-shadow: var(--header_shadow);
	border-radius: 0 0 0 3px;
	padding-right: calc(20rem/16);
}
.main-navigation li {
	text-align: left;
}
.main-navigation li a {
	display: block;
	line-height: var(--header_height);	/* to have text centered */
	padding: 0 calc(8rem/16) 0 calc(8rem/16);
	color: var(--header_menu_color);
}
.main-navigation a:hover {
	background-color: var(--header_bg_color_hover);
	color: #000;
}

/* images */
.entry-content img {
	width: 100%;
	height: auto;
	border-radius: var(--img_border_radius);
}
img.alignleft,
img.alignright {
	float: none;
	display: block;
	margin-top: calc(12rem/16);
	margin-bottom: calc(12rem/16);
	margin-left: auto;
	margin-right: auto;
}
img.aligncenter {
	clear: both;
	margin-top: calc(12rem/16);
	margin-bottom: calc(12rem/16);
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.fullwidth {		/* on small screens, take full space */
	margin: 0 var(--neg_margin);
	width: var(--neg_margin_width);
	max-width: var(--neg_margin_width);
	border-radius: 0px;
}


/* Footer */
footer {
	background-color: var(--footer_bg_color);
	border-top: 1px solid #ccc;
	clear: both;
	width: 100%;
	margin-top: calc(48rem/16);
	padding: calc(12rem/16);
	font-size: calc(14rem/16);
	text-align: center;
}
footer p {
	margin-top:	calc(12rem/16);
	margin-bottom:	calc(12rem/16);
}
footer a {
	font-weight: bold;
	color: var(--footer_text_color);
	border: none;
}
footer a:visited {
	color: var(--footer_text_color);
}
footer a:hover {
	color: #21759b;
}
.footer-icons img {
	display: inline-block;
	width: calc(32rem/16);
	height: calc(32rem/16);
	border-radius: 50%;
	box-shadow: var(--icon_shadow);
	margin-right: 8px;
	margin-left: 8px;
	vertical-align: middle;
}
.footer-thumbnails {
    white-space: nowrap; /* Empêche le retour à la ligne */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    overflow: hidden; /* Au cas où l'écran serait vraiment trop petit */
}
.footer-thumbnails a {
    flex-shrink: 1; /* Permet aux liens de se réduire */
    min-width: 0;
}
.footer-thumbnails img {
    display: block;
    height: calc(100rem/16);
    width: calc(100rem/16);
    min-height: calc(60rem/16);
    min-width: calc(60rem/16);
    border-radius: 3%;
    margin: 0;
    object-fit: contain; /* garde le format carré des photos */
}
.footer-icons a {
	border: none;	/* need this for icons on main page */
}
.site-info {
	font-size: calc(12rem/16);
	margin-top: calc(12rem/16);
	padding: 0 10px;
}

/* =Main content
-------------------------------------------------------------- */

/* --- .entry-meta --- */
.entry-meta {
	clear: both;
}

/* --- .entry-header --- */
.entry-header {
	margin-bottom: calc(24rem/16);
}
.entry-header .entry-title {
	font-size: calc(20rem/16);
	font-weight: bold;
	text-align: center;
}

/* --- .site-content --- */
.site-content article {
	word-wrap: break-word;
	hyphens: auto;
	-ms-hyphens: auto;
	-webkit-hyphens: auto;
}

/* --- .entry-content --- */
.entry-content {
/*	line-height: 1.714285714; */
}
.entry-content h1 {
	margin: calc(36rem/16) 0 calc(24rem/16);
	font-size: calc(20rem/16);
	font-weight: bold;
}
.entry-content h2 {
	margin: calc(36rem/16) 0 calc(24rem/16);
	font-size: calc(17rem/16);
	font-weight: bold;
}
.entry-content h3 {
	margin: calc(36rem/16) 0 calc(24rem/16);
	font-size: calc(16rem/16);
	font-weight: bold;
}
.entry-content h4 {
	margin: calc(12rem/16) 0 calc(18rem/16);
	font-size: calc(15rem/16);
	font-weight: bold;
}
.entry-content h5 {
	margin: calc(12rem/16) 0 calc(18rem/16);
	font-size: calc(14rem/16);
	font-weight: bold;
}
.entry-content h6 {
	margin: calc(12rem/16) 0 calc(18rem/16);
	font-size: calc(13rem/16);
	font-weight: bold;
}
.entry-content p {
	margin: 0 0 calc(24rem/16);
	text-align: justify;
}
.entry-content a {
	font-weight: bold;
	border-bottom: none;
}
.entry-content strong {
	font-weight: bold;
}
.entry-content em {
	font-style: italic;
}
.entry-content cite {
	font-style: italic;
}
.entry-content ol,
.entry-content ul {
	margin: 0 0 calc(24rem/16);
	text-align: justify;
}
.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul {
	margin-bottom: 0;
}
.entry-content ul {
	list-style: disc outside;
}
.entry-content ol {
	list-style: decimal outside;
}
.entry-content li {
	margin: 0 0 calc(8rem/16) calc(24rem/16);
}
.entry-content code {
	font-family: Consolas, Monaco, "Lucida Console", monospace;
	font-size: calc(12rem/16);
}
.entry-content pre {
	border: 1px solid #ededed;
	color: #666;
	font-family: Consolas, Monaco, "Lucida Console", monospace;
	font-size: calc(12rem/16);
	margin: calc(24rem/16) 0;
	overflow: auto;
	padding: calc(24rem/16);
}
.entry-content pre code {
	display: block;
}
.entry-content abbr,
.entry-content dfn,
.entry-content acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}
.entry-content address {
	display: block;
	margin: 0 0 calc(24rem/16);
}
.entry-content embed,
.entry-content iframe,
.entry-content object,
.entry-content video {
	margin-bottom: calc(24rem/16);
}
.entry-content dl {
	margin: 0 calc(24rem/16);
}
.entry-content dt {
	font-weight: bold;
}
.entry-content dd {
	margin-bottom: calc(24rem/16);
}
.entry-content table {
	border-bottom: 1px solid #ededed;
	margin: 0 0 calc(24rem/16) 0;
	width: 100%;
	font-size: calc(15rem/16);
	color: var(--table_text_color);
	line-height: 2;
}
.entry-content table caption {
	font-size: calc(16rem/16);
	margin: calc(24rem/16) 0;
}
.entry-content td {
	border-top: 1px solid #ddd;
	vertical-align: middle;
	padding: 6px 10px 6px 6px;
}
.entry-content th {
	vertical-align: middle;
	padding: 0 10px 6px 6px;
	font-size: calc(14rem/16);
	font-weight: bold;
	text-transform: uppercase;
}
/* --- nice block */
address.box-style,
div.box-style,
p.box-style {
	background-color: var(--box_bg_color);
	color: var(--box_text_color);
	border: var(--box_border);
	border-radius: 10px;
	padding: calc(24rem/16) calc(30rem/16);
}
/* --- Buttons (used directly with <a> and others) --- */
button.button-base,
a.button-base {
	display: inline-block;
	background-color: var(--button_bg_color);
	color: var(--main_text_color);
	box-shadow: 0 1px 2px rgba(64, 64, 64, 0.2);
	height: var(--button_height);
	line-height: var(--button_height); /* center text */
	border: var(--button_border);
	border-radius: 3px;
	padding: 2px;
	font-size: calc(12rem/16);
	text-align: center;
	text-transform: uppercase;
}
a.button-base {
	text-decoration: none;
}
button.button-base {
	cursor: pointer;
	font-family: inherit;
}
button.button-base:hover,
a.button-base:hover {
	box-shadow: 2px 2px 5px;
	color: #222;
}
button.button-base:active,
a.button-base:active {
	box-shadow: 0 0 5px 2px #999 inset;
	color: #777;
}
a.button-base:visited {
	color: var(--main_text_color);
	border-bottom-color: var(--button_border_color);	/* need this */
}
button.button-base:focus {
	outline: thin solid;
}
button.large-button,
a.large-button {
	width: 90%;
	margin-left: 5%;	/* 5% on each side, then */
}
button.big-button,
a.big-button {
	width: 45%;
	height: calc(60rem/16);
	line-height: calc(60rem/16);
}

/* --- figure with image + caption --- */
figure.alignright,
figure.alignleft {
	float: none;
	display: block;
	margin-top: calc(12rem/16);
	margin-bottom: calc(12rem/16);
	margin-left: auto;
	margin-right: auto;
}
figure.aligncenter {
	clear: both;
	margin-top: calc(12rem/16);
	margin-bottom: calc(12rem/16);
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.fig-img-cap img {
	display: block;
}
.fig-img-cap figcaption {
	margin: 8px;
	font-weight: bold;
	font-size: smaller;
	text-align: center;
}
.fig-img-cap figcaption span {
	font-weight: normal;
	font-size: smaller;
}
.fig-img-cap figcaption span a {
	text-decoration: underline;
	border-bottom: none;
}

/* --- iframe for youtube vids and maps --- */
embed,
iframe,
object,
video {
	max-width: 100%;
}
.iframe-container,		            /* this is a div class */
.video-container {
    position: relative;
	text-align: center;
    overflow: hidden;

	/* on small screens, take full space */
	margin: 0 var(--neg_margin);
	margin-bottom: calc(24rem/16);
	width: var(--neg_margin_width);
	max-width: var(--neg_margin_width);
    padding-top: 64.125%;		/* 16/9 aspect ratio */
	border-radius: var(--img_border_radius);
	background-color: #000;
}
.video-container video,
.iframe-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: var(--img_border_radius);
	object-fit: contain;
}
iframe.iframe-map {
	margin: 0;
	width: 100%;
	height: 400px;
}
iframe.fullwidth {		/* on small screens, take full space */
	margin: 0 var(--neg_margin);
	width: var(--neg_margin_width);
	max-width: var(--neg_margin_width);
}
.video-container video[poster] {
	background-size: cover;
	background-position: center;
}
.video-fallback {
	background: #f8f8f8;
	border: 1px solid #ddd;
	border-radius: var(--img_border_radius);
	padding: 20px;
	text-align: center;
	margin: 20px 0;
}
.video-fallback a {
	color: #1852b1;
	text-decoration: none;
	font-weight: bold;
}
.video-fallback a:hover {
	color: #44f;
}
#presentation_video_container {
	//padding-top: 177.8%;        /* 768/432, aspect ratio 432x768px */ 
	padding-top: 100%;        /* keep square ratio */ 
}


/* ---------------------------------- */
/* HOME-PAGE */
/* ---------------------------------- */
#index .entry-header {		/* hide title for home page */
	display: none;
}
div.home-start {
	position: relative;		/* need it for absolute pos of image on large screen */
}
.home-start img {
	display: block;
	min-width: 250px;
	max-width: 370px;
	width: 70%;
	margin: 0 auto;
	margin-bottom: calc(24rem/16);
	aspect-ratio: 370 / 137.317;
}
.home-start p {
	font-size: calc(18rem/16);
	font-weight: bold;
	text-align: center;
}
p.home-image {
	margin: 0;
}
div.home-citation, 
div.home-next-sessions {
	background-color: var(--main_bg_color);
	color: var(--box_text_color);
	border: none;
	border-radius: 0px;
	padding: calc(36rem/16) calc(36rem/16);
	margin: 0 var(--neg_margin);
	width: var(--neg_margin_width);
	max-width: var(--neg_margin_width);
}
div.home-citation {
	border-bottom: var(--box_border);
}
.home-citation q::before,
.home-citation q::after {
	content: '"';
}
.home-citation p {
	margin: 0;
	margin-top: 10px;
	text-align: right;
}
.home-citation a {
	padding: 8px 0;
	font-size: smaller;
	text-transform: uppercase;
}
ul.home-list {
	list-style: none;
	margin: 0 var(--neg_margin);
	width: var(--neg_margin_width);
	max-width: var(--neg_margin_width);
}
.home-list li {
	display: inline-block;
	width: 50%;
	margin: 0;
	background-color: var(--main_bg_color);
	box-shadow: none;
	border: var(--button_border);
	border-top: none;
	border-left: none;
	border-radius: 0;
}
.home-list li:hover {
	background-color: var(--button_bg_color);
	box-shadow: none;
}
.home-list li:active {
	box-shadow: none;
}
.home-list figure {
	padding: 8%;
}
.home-list figcaption {
	margin: calc(12rem/16) 0;
	margin-top: calc(24rem/16);
	color: var(--main_text_color);
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	font-size: calc(14rem/16);
	letter-spacing: 2px;
} 

/* --- background design - nearly same as buttons --- */
.bg-act1,
.bg-act2,
.bg-act3,
.bg-member1b,
.bg-member1,
.bg-member2,
.bg-member3 {
	border: 1px solid #fff;
	color: var(--table_text_color);
	border-top-width: 0px;
	border-right-width: 0px;
	border-left-width: 7px;
}
.bg-plan-act1,
.bg-plan-act2,
.bg-plan-act3 {
	border: 1px solid #fff;
	color: var(--table_text_color);
	border-top-width: 7px;
}
div.bg-act1:hover,
div.bg-act2:hover,
div.bg-act3:hover,
div.bg-plan-act1:hover,
div.bg-plan-act2:hover,
div.bg-plan-act3:hover{
	color: #222;
	box-shadow: 2px 2px 5px;
}
tr.bg-act1:hover,
tr.bg-act2:hover,
tr.bg-act3:hover,
tr.bg-member1b:hover,
tr.bg-member1:hover,
tr.bg-member2:hover,
tr.bg-member3:hover {
	background-color: var(--table_price_bg_color_hover);
}
.bg-act1:active,
.bg-act2:active,
.bg-act3:active,
.bg-plan-act1:active,
.bg-plan-act2:active,
.bg-plan-act3:active,
.bg-member1b:active,
.bg-member1:active,
.bg-member2:active,
.bg-member3:active {
	color: #777;
	box-shadow: 0 0 5px 2px #999 inset;
}
.bg-act1,
.bg-plan-act1 {
	border-color: var(--color_act1);
}
.bg-act2,
.bg-plan-act2 {
	border-color: var(--color_act2);
}
.bg-act3,
.bg-plan-act3 {
	border-color: var(--color_act3);
}
.bg-member1b {
	border-color: var(--color_member1b);
}
.bg-member1 {
	border-color: var(--color_member1);
}
.bg-member2 {
	border-color: var(--color_member2);
}
.bg-member3 {
	border-color: var(--color_member3);
}

/* ---------------------------------- */
/* PRESENTATION PAGE */
/* ---------------------------------- */

/* presentation header
-------------------------------------------------------------- */
table.pyv-sub-menu-table {
	width: 100%;
}
.pyv-sub-menu-table td {
	padding: 1px 10px 1px 6px;
	line-height: 1.2;
	text-align: center;
	vertical-align: middle;
	hyphens: none;
	-ms-hyphens: none;
	-webkit-hyphens: none;
}
.pyv-sub-menu-table td a {
	display: block;
	padding: 6px;
	color: var(--main_text_color);
	font-weight: normal;
	font-size: calc(13rem/16);
	text-transform: uppercase;
	border: none;
}
.pyv-sub-menu-table td a:visited {
	color: var(--main_text_color);
}
.pyv-sub-menu-table td a:hover {	/* Change aspect of text color */
	color: #000;
}

/* ---------------------------------- */
/* ACTIVITIES PAGE */
/* ---------------------------------- */

.back-activities-link {
    display: none;
}

/*  --- list of activities
-------------------------------------------------------------- */
ul.list-activities {
	display: block;
	list-style: none;
	text-align: center;
	border-bottom: 1px solid #ccc;
}
.list-activities li {
	display: block;
	max-width: var(--neg_margin_width);
	margin: 0 var(--neg_margin);
	text-align: center;
	vertical-align: top;
}
.list-act1,
.list-act2,
.list-act3,
.list-act4 {
	position: relative;		/* need this for child absolute position */
	width: 100%;
	height: calc(240rem/16);
	background-color: var(--main_bg_color);
	box-shadow: none;
	border: 1px solid #ccc;
	border-top-width: 10px;
	border-bottom-width: 0px;
	border-radius: 0px;
	color: var(--main_text_color);
	/* arrow */
	background-image: url('https://www.reliance-centre.ch/cms/data/uploads/images/illustrations/icons/arrow.svg');
	background-size: auto 30px;
	background-repeat: no-repeat;
	background-position: bottom 45px right 20px;
}

.list-act1:hover,
.list-act2:hover,
.list-act3:hover,
.list-act4:hover {
	box-shadow: 5px 0px 5px;
	color: #222;
}
.list-act1:active,
.list-act2:active,
.list-act3:active,
.list-act4:active {
	box-shadow: 0 0 5px 2px #999 inset;
	color: #777;
}
.list-act1 {
	border-color: var(--color_act1);
}
.list-act2 {
	border-color: var(--color_act2);
}
.list-act3 {
	border-color: var(--color_act3);
}
.list-act4 {
	border-color: var(--color_act4);
}
.list-act1 a,		/* activity title */
.list-act2 a,
.list-act3 a,
.list-act4 a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	padding-top: 10px;
	font-weight: normal;
	font-size: calc(17rem/16);
	color: var(--main_text_color);
	text-transform: uppercase;
	text-align: center;
	border: none;
}
.list-act1 a:visited,
.list-act2 a:visited,
.list-act3 a:visited,
.list-act4 a:visited {
	color: var(--main_text_color);
}
.list-act-text {
	position: absolute;
	top: calc(70rem/16);
	left: 0;
	padding-left: 15%;
	padding-right: 15%;
}
.list-act-text p {
	text-align: center;
	hyphens: none;
	-ms-hyphens: none;
	-webkit-hyphens: none;
}
.list-act-text ul {
	text-align: center;
	list-style: none;
}
.list-act-text ul li {
	display: inline-block;
	padding: 3px 15px 3px 16px;
	margin: 0;
	font-size: small;
	font-weight: bold;
	text-align: left;
	line-height: normal;
	/* could not make work list-style differently */
	background-image: url('https://www.reliance-centre.ch/cms/data/uploads/images/illustrations/icons/square-checked.svg');
	background-size: auto 16px;
	background-repeat: no-repeat;
	background-position: top 0 left 0;
}
.price-tag { 
	position: absolute;
	top: 0;
	right: 0;
	width: calc(80rem/16);
	height: calc(80rem/16);
	border-radius: 50%;
	border: 2px solid #555;
	background-color: #fff;		/* it overlaps */
	padding: calc(18rem/16) 0; 
	font-size: calc(14rem/16);
	font-weight: bold;
	text-align: center;
	margin: calc(-15rem/16) 2% 0 0;
}

/* need to do those things better, bug a quick fix for activites-inner-tables */
table.table-auto-width {
	width: auto;
}

/* planning grid
-------------------------------------------------------------- */
.planning {
	--plan_day_width: 65px;
	display: grid;
	grid-template-columns: var(--plan_day_width) var(--plan_day_width) auto var(--plan_day_width) auto var(--plan_day_width);
	font-size: calc(10rem/16);
	font-weight: bold;
	vertical-align: middle;
	margin-bottom: calc(12rem/16);
	overflow-x: auto;
}
.plan-item {
	margin: 0;
	padding: 0;
	border: 1px solid #fff;
}
.plan-date {
	background-color: var(--header_bg_color);
	padding: 0 2px;
	border: 1px solid #ddd;
	color: var(--main_text_color);
	font-weight: normal;
	text-align: center;
}
.plan-event {
	position: relative;		/* need to position this element for child absolute position */
	padding: 5px 1px 15px 1px;
	margin: 5px 0;
	border-radius: 2px;
	text-align: center;
	/* arrow for calendar and buttons */
	background-image: url('https://www.reliance-centre.ch/cms/data/uploads/images/illustrations/icons/arrow.svg');
	background-size: auto 10px;
	background-repeat: no-repeat;
	background-position: bottom 5px right 5px;
}
.plan-event a {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	border: none;
	font-weight: normal;
}
.plan-event a span {
	visibility: hidden; /* trick to hide anchor text */
}
.plan-event-time,
.plan-event-name {
	vertical-align: middle;
	display: inline-block;
	height: 100%;
}
.plan-event-time {
	min-width: 30%;
}
.plan-event-name {
	letter-spacing: 0.3px;
	word-spacing: 2px;
	hyphens: none;
	-ms-hyphens: none;
	-webkit-hyphens: none;
}

/*  --- list of quotes from people
-------------------------------------------------------------- */
ul.quote-list {
	list-style: none;
}
.quote-list li {
	display: block;
	max-width: var(--neg_margin_width);
	margin: 0 var(--neg_margin);
	padding: calc(24rem/16) calc(36rem/16);
	background-color: var(--main_bg_color);
	border: none;
}
.quote-list li:after {
	content: "_______________";
	display: block;
	text-align: center;
}
.quote-list li:last-child:after {
	content: none;
}
.quote-list blockquote {
	font-style: normal;
	text-align: justify;
}
.quote-list blockquote::before,
.quote-list blockquote::after {
	content: '"';
}
.quote-list figcaption {
	margin: calc(12rem/16);
	font-style: italic;
	font-weight: bold;
	text-align: right;
} 
/*.quote-list figcaption::before {
	content: "\2014  ";
}*/

/* ---------------------------------- */
/* PRICES PAGE */
/* ---------------------------------- */

table.prices-table {
	margin-left: 5px;	/* to compensate wider border */
}
.prices-table th {
	white-space: nowrap;
}
.prices-table td {
	border: none;
	padding: 0;
}
.prices-table td a {
	display: block;
	color: var(--table_text_color);
	padding: 10px 6px;
	border: none;
	font-weight: normal;
}
.prices-table td a:hover {
	color: var(--table_text_color);
}
.prices-table td a:visited {
	color: var(--table_text_color);
}
td.prices-arrow {
	text-align: right;
	/* arrow at the end of lines */
	background-image: url('https://www.reliance-centre.ch/cms/data/uploads/images/illustrations/icons/arrow.svg');
	background-size: 10px 10px;
	background-repeat: no-repeat;
	background-position: bottom 5px right 3px;
}
td.prices-arrow a {
	padding-right: calc(30rem/16); /* space for arrow */
}
.prices-table-member td {
	padding: 6px;
}

/*  --- list of member types
-------------------------------------------------------------- */
ul.list-members {
	display: block;
	width: 100%;
	list-style: none;
	text-align: center;
	white-space: nowrap;
	overflow-x: auto;		/* put all on one row */
}
li.list-member { 
	display: inline-block;
	position: relative;		/* need this for child absolute position */
	height: calc(350rem/16);
	width: 30%;
	min-width: calc(180rem/16);
	margin: 2px;
	vertical-align: top;
	background-color: var(--box_bg_color);
	border: 1px solid #666;
	border-top-width: 5px;
	border-radius: 5px;
	text-align: center;
	white-space: normal;
}
.list-member img {
	display: block;
	position: absolute;
	top: 4%;
	left: 5%;
	width: 30%;
}
.list-member-text {
	margin-top: 7%;
	width: 100%;
	padding: 10px;
	font-size: calc(15rem/16);
}
.list-member-text p {	/* title */
	text-align: center;
	hyphens: none;
	-ms-hyphens: none;
	-webkit-hyphens: none;
	font-size: calc(20rem/16);
	font-weight: bold;
	text-transform: uppercase;
	margin-left: 25%;
	margin-bottom: 5%;
}
p.member-tag {
	font-weight: normal;
	font-size: calc(14rem/16);
}
.list-member-text ul {
	margin-top: calc(25rem/16);
	margin-left: 10%;
	text-align: left;
	vertical-align: bottom;
	list-style: none;
}
.list-member-text ul li {
	display: block;
	padding: 3px 10px 5px calc(25rem/16);
	margin: 0;
	text-align: left;
	line-height: normal;
	/* could not make work style differently */
	background-image: url('https://www.reliance-centre.ch/cms/data/uploads/images/illustrations/icons/square-checked.svg');
	background-size: auto 16px;
	background-repeat: no-repeat;
	background-position: top 0 left 0;
}
.price-tag-member {
	position: absolute;
	bottom: 5%;
	width: 100%;
	font-size: calc(18rem/16);
	font-weight: bold;
	text-align: center;
}
.price-tag-member span {
	font-size: calc(13rem/16);
}

/* ---------------------------------- */
/* CONTACT PAGE */
/* ---------------------------------- */

address.main-address {
	display: block;
	max-width: 650px;
	margin: calc(36rem/16) auto;
	padding: calc(20rem/16);
	font-size: calc(15rem/16);
	font-weight: bold;
}
.main-address p {
	margin-bottom: calc(12rem/16);
}

/*
****************************************************************
 =Media queries
-------------------------------------------------------------- */

/* for extra tiny screen (like mine!) */
@media screen and (max-width: 479px) {
}
/* Minimum width of 480 pixels. */
@media screen and (min-width: 480px) {
	button.button-base,
	a.button-base {
		padding: 0 calc(20rem/16);
		font-size: calc(14rem/16);
	}
	/* adapt planning column width (all the same) */
	.planning {
		grid-template-columns: calc(100%/6) calc(100%/6) calc(100%/6) calc(100%/6) calc(100%/6) calc(100%/6);
	}
}

/* Minimum width of 600 pixels */
@media screen and (min-width: 600px) { 
	/* figures can be left or right aligned */
	figure.alignleft,
	img.alignleft {
		float: left;
		margin: calc(12rem/16) calc(24rem/16) calc(12rem/16) 0;
	}
	figure.alignright,
	img.alignright {
		float: right;
		margin: calc(12rem/16) 0 calc(12rem/16) calc(24rem/16);
	}
	/* adapt planning font size */
	.planning {
		font-size: calc(12rem/16);
	}
	/* adapt activites list */
	ul.list-activities {
		border-bottom: none;
	}
	.list-activities li {
		display: inline-block;
		max-width: 100%;
		margin: calc(12rem/16);
	}
	.list-act1,
	.list-act2,
	.list-act3,
	.list-act4 {
		width: calc(280rem/16);
		height: calc(220rem/16);
		border-bottom-width: 1px;
		border-radius: 3px;
		box-shadow: 0 1px 2px rgba(64, 64, 64, 0.2);
		/* arrow */
		background-size: auto 20px;
		background-position: bottom 8px right 8px;
	}
	.list-act1:hover,
	.list-act2:hover,
	.list-act3:hover,
	.list-act4:hover {
		box-shadow: 2px 2px 5px;
	}
	.list-act-text {
		padding-left: calc(20rem/16);
		padding-right: calc(20rem/16);
	}
	.price-tag { 
		margin: calc(-20rem/16);
	}
	.home-list figcaption {
		margin-top : calc(36rem/16);
	}
}

/* Minimum width of 720 pixels calendar,... expand */
@media screen and (min-width: 720px) {
	.site {
		overflow: hidden;
	}
	.site-content {
		padding-left: calc(48rem/16);
		padding-right: calc(48rem/16);
		max-width: 900px;
	}
	/* add line under links */
	.entry-content a {
		font-weight: normal;
		padding-bottom: 2px;
		border-bottom: 1px solid #8c8fee;
	}
	/* to remove line under link in buttons */
	button.button-base,
	a.button-base {
		border: var(--button_border);
	}
	.plan-event a,
	.list-act1 a,
	.list-act2 a,
	.list-act3 a,
	.list-act4 a {
		border: none;
	}

	/* 2-columns */
	ul.two-columns,
	div.two-columns {
		column-gap: calc(20rem/16);
		column-count: 2;
	}
	address.two-columns {
		column-gap: 0;
		column-count: 2;
	}
	/* home-image */
	div.home-start {
		margin-bottom: calc(36rem/16);
	}
	.home-start img {
		width: 43%;		/* @43% img 345x128px */
		margin: 0;
		margin-left: 5%;
	}
	.home-start p {
		position: absolute;
		top: 0;
		left: 55%;
		padding-top: 2%;
		padding-right: 5%;
		text-align: left;
		font-size: calc(20rem/16);
	}
	div.home-citation,
	div.home-next-sessions {
		background-color: var(--box_bg_color);
		margin: 0;
		width: 100%;
		max-width: 100%;
		border: var(--box_border);
		border-radius: 10px;
	}
	p.home-image {
		margin: 0 0 calc(24rem/16);
	}
	ul.home-list {
		margin: calc(24rem/16) 0;
		width: 100%;
		max-width: 100%;
	}
	.home-list li {
		width: 30%;
		margin: 1.5%;
		background-color: var(--button_bg_color);
		box-shadow: 0 1px 2px rgba(64, 64, 64, 0.2);
		border: var(--button_border);
		border-radius: 3px;
		padding:  2.5%;
	}
	.home-list li:hover {
		box-shadow: 2px 2px 5px;
	}
	.home-list li:active {
		box-shadow: 0 0 5px 2px #999 inset;
	}

	/* quote list */
	.quote-list li {
		display: inline-block;
		width: 100%;
		max-width: 100%;
		margin: calc(12rem/16) 0;
		padding: calc(24rem/16);
		background-color: var(--box_bg_color);
		border: var(--box_border);
		border-radius: 10px;
	}
	.quote-list li:after {
		content: none;
	}

	/* price table */
	table.prices-table {
		width: 85%;
	}
	/* adapt planning font size */
	.planning {
		font-size: calc(14rem/16);
	}
	.plan-event {
		padding-left: 2px;
		padding-right: 2px;
		margin: 5px;
	}

	/* image, iframe,... normal size again */
	img.fullwidth {
		width: 100%;
		max-width: 100%;
		margin: 0;
		border-radius: var(--img_border_radius);
	}
	iframe.fullwidth {
		width: 100%;
		max-width: 100%;
		margin: 0;
	}
	.iframe-container,
	.video-container {
		width: 100%;
		max-width: 100%;
		margin-right: 0;
		margin-left: 0;
		padding-top: 56.25%;		/* 16/9 aspect ratio */
	}

	#presentation_video_container {
		padding-top: 56.25%;		/* 16/9 aspect ratio */
	}

@media screen and (min-width: 820px) {
	.home-start p {
		padding-top: 4%;
	}
}
	
/* Minimum width of 1024 pixels. */
@media screen and (min-width: 1024px) { /* LARGE ONLY */
	footer {
		padding-left: calc(236rem/16);
	}
	/* display back link on activities */
	.back-activities-link {
		display: block;
		margin: 0 0 12px 0;
		text-align: right;
	}
	.back-activities-link a {
		font-size: calc(12rem/16);
	}

	/* header on the side */
	.site-header {
		grid-template-columns: auto;
		grid-template-rows: calc(130rem/16) 0 calc(40rem/16) auto;
		width: calc(200rem/16);
		height: 100%;
		max-height: none;
		top: 0;
		left: 0;
	}
	.site-header hgroup h1 img {
		display: block;
		width: calc(150rem/16);
		height: auto;
		margin: auto;
		padding-top: 10px;
	}
	.site-header hgroup h2 {		/* display description */
		display: block;
		margin-top: 10px;
		text-align: center;
		font-family: "Times New Roman", Georgia, Garamond, serif;
		font-size: calc(15rem/16);
		font-weight: normal;
		color: #666;
	}
	.site-content {
		margin-top: 0;
		margin-left: calc(236rem/16);	/* 200 (header) + 36 */
		margin-right: calc(36rem/16);
		padding: calc(36rem/16);
	}
	.lang-select {
		text-align: center;
		margin: auto;
		margin-bottom: 10px;
	}

	/* navigation list on large display */
    .main-navigation ul {
		display: block;
		box-shadow: none;
		text-align: left;
		vertical-align: top;
		width: 100%;
		padding-right: 0;
	}
    .main-navigation li a {
		padding-left: calc(36rem/16);
	}
	.main-navigation .current a{
		font-weight: bold;
	}
	.menu-toggle {
		display: none;		/* hide on big screen */
	}

}
/* Minimum width of 900+(236x2)= 1372 pixels. */
@media screen and (min-width: 1372px) { /* VERY LARGE ONLY */
	.site-content {
		margin-left: auto;
		margin-right: auto;
	}
}

/* =Print
----------------------------------------------- */

@media print {
	body {
		background: none !important;
		color: #000;
		font-size: 10pt;
	}
	footer a[rel=bookmark]:link:after,
	footer a[rel=bookmark]:visited:after {
		content: " [" attr(href) "] "; /* Show URLs */
	}
	a {
		text-decoration: none;
	}
	.entry-content img {
		border-radius: 0;
		box-shadow: none;
	}
	.site {
		clear: both !important;
		display: block !important;
		float: none !important;
		max-width: 100%;
		position: relative !important;
	}
	.site-header {
		display: none;
	}
	#respond,
	img.header-image,
	.iframe-container,
	.main-navigation {
		display: none;
	}
	.site-content {
		margin: 0;
		width: auto;
	}
	.entry-header .entry-title,
	.entry-title {
		font-size: 21pt;
	}

	/* price table */
	table.prices-table {
		width: 85%;
	}
}

/* ---------------------------------- */
/* images' aspect ratios
 (coded here because getstimple/ckeditor doesn't support it) */
/* ---------------------------------- */

img.ar_1x1 {
	aspect-ratio: 1/1;
}
img.ar_2x1 {
	aspect-ratio: 2/1;
}
img.ar_4x3 {
	aspect-ratio: 4/3;
}
img.ar_3x4 {
	aspect-ratio: 3/4;
}
img.ar_16x9 {
	aspect-ratio: 16/9;
}
img.ar_16x10 {
	aspect-ratio: 16/10;
}
img.ar_10x16 {
	aspect-ratio: 10/16;
}
img.ar_700x390 {
	aspect-ratio: 700/390;
}
img.ar_800x750 {
	aspect-ratio: 800/750;
}
img.ar_1000x400 {
	aspect-ratio: 1000/400;
}
img.ar_1000x425 {
	aspect-ratio: 1000/425;
}
img.ar_1000x640 {
	aspect-ratio: 1000/640;
}