/*============================  slides.css  ================================
 * Brigitte Bigi                                                           
 * Style to be used with dzslides option              
 *==========================================================================*/



/* ===========================  DEFINITIONS  ===============================*/

@font-face {
    font-family: SansFont;
    src: url('../fonts/Commissioner.ttf');
}

@font-face {
    font-family: SerifFont;
  src: url('../fonts/SourceSerifPro.ttf');
}

@font-face {
  font-family: MonoFont;
  src: url('../fonts/FiraCode.ttf');
}

@font-face {
  font-family: PreFont;
  src: url('../fonts/ScienceGothic.ttf');
}

/* =======================================================================
                            VARIABLE DEFINITIONS
  ======================================================================== */

:root{
    --spacing: 28px;
    --font-size: 32px;
    --width: 1280px;
    --height: 720px;
}

.sp-contrast {
    --spacing: 32px;
    --font-size: 36px;
}

/*===========================  MAIN PAGE  =================================*/

body {
    width: var(--width);
	height: var(--height);
    margin-left: calc(var(--width)/-2);
	margin-top: calc(var(--height)/-2);
    position: absolute; 
	top: 50%;
	left: 50%;
    overflow: hidden;
    display: none;
    cursor: default;
    /* To look like a "screen" and clearly see the un-used part
    when the ratio is not 16:9 */
    border-radius: 0.8rem;
    background-color: var(--main-color2);
    counter-reset: slides;
}

/* ============= DZ Slides ======================= */

[role="note"] { display: none; }

.view body {
	position: static;
	width: 100%; 
	height: 100%;
	display: inline-block;
	overflow: visible; 
	overflow-x: hidden;
	/* undo Dz.onresize */
	transform: none !important;
	-ms-transform: none !important;
}

section.slide {
	position: absolute;
	pointer-events: none;
	width: 100%;
	height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
}

.view section.slide {
	pointer-events: auto;
	position: static;
	width: var(--width);
	height: var(--height);
	float: left;
	transform: scale(.4);
	-ms-transform: scale(.4);
}

.view section.slide > * {
	pointer-events: none;
}

section.slide[aria-selected] {
	pointer-events: auto;
}
  
html.view { 
	overflow: visible; 
}

body.loaded { 
	display: block; 
}

.incremental {
	visibility: hidden;
}

.incremental[active] {
	visibility: visible;
}

#progress-bar{
    height: 0.5rem;
    background: var(--fg-color2);
    color: var(--bg-color2);
    border-radius: 0;
    bottom: 0;
    position: absolute;
    -moz-transition: width 400ms linear 0s;
    -webkit-transition: width 400ms linear 0s;
    -ms-transition: width 400ms linear 0s;
    transition: width 400ms linear 0s;
}

.view #progress-bar {
    display: none;
}


/* =======================================================================
                       HTML ELEMENTS STYLING
  ======================================================================== */

/*=============================  SLIDE  ==================================*/

/* A section is a slide. */
/* Add page number at footer */
.slide:before {
    counter-increment: slides;
    font-family: PreFont, cursive;
    font-size: 50%;
    position: fixed;
    color: var(--main-color2);
    content: "Brigitte Bigi - page " counter(slides);
    margin-top: calc((var(--height)) - var(--font-size));
    margin-left: 85%;
}

.slide:first-child:before {
    content: "";
}


/*=============================  TITLES  ==================================*/

/* Main title of a section: only the title at the center of the slide */

section.slide h1,
section.slide > h2,
section.slide > h3,
section.slide > h4,
section.slide > h5,
section.slide > h6 {
    font-family:    SansFont, sans-serif;
    margin-top:    1rem;
    margin-bottom: 1.5rem;
    margin-right:  0.5rem;
    margin-left:   1.5rem;
    padding-top:    1rem;
    padding-bottom: 1.5rem;
    padding-right:  0;
    padding-left:   0;
}

section.slide h1 {
    line-height:    4rem;
    font-weight:    bold;
    font-style:     normal;
    font-variant:   normal;
    font-size:      125%;
    text-align:     left;
    letter-spacing: 2px;
    margin-top:     calc((var(--height) / 2) - (2 * var(--font-size)));
    border-bottom:  2px solid var(--h1-color);
    /*box-shadow:     0 0 12px rgba(205,38,38,0.8), inset 0 0 12px rgba(205,38,38,0.8); /* red */
}

section.slide h1.title {
    margin: auto;
    text-align: center;
    border-bottom: none;
}

/* Title at the top of each slide */
section.slide > h2 {
    font-weight:    bold;
    font-style:     normal;
    font-variant:   normal;
    font-size:      120%;
    text-align:     left;
    letter-spacing: 1px;
    border-bottom:  var(--border-width) solid var(--h2-color);
}

/* Sub-Title at the top of the slide */
section.slide > h3 {
    font-weight:    bold;
    font-style:     normal;
    font-variant:   normal;
    font-size:      120%;
    text-align:     left;
    letter-spacing: 1px;
    border-bottom:  2px solid var(--h3-color);
}


/*=============================  OTHERS  ==================================*/

table {
    margin: auto;
}

ul, ol, p, .cards-panel, article {
    margin-top:    0.5rem;
    margin-bottom: 0.5rem;
    margin-right:  0.5rem;
    margin-left:   3rem;
}

li, li p { font-size: 100%; }

li li, li li p { font-size: 90%; }

li li li, li li li p { font-size: 85%; }

q { quotes: "“" "”" "‘" "’"; }


/*=============================  MEDIA  ==================================*/

/* Figures are displayed full-page, with the caption on bottom of the image. */
figure {
    display: block;
    text-align: center;
    max-width: 90%;
    max-height: 90%;
}

/* remove center align (from <figure>) inside <li> */
figure li, figure p { text-align: left; }
li figure { text-align: left; }

/* class right-image for floating image at right side */
.right-image img { float: right; margin: 0 10px 0 5px;}
.left-image img { float: left; margin: 0 10px 0 5px;}

/* class text-top for image aligned with text top */
.text-top img { vertical-align:text-top;}

audio, video {
    background-color: transparent;
    border-width:     0; 
    border-style:     none;
    margin:           0 auto;
    max-width:        90%; 
    max-height:       60%;
    position:         relative;
}

img {
    background-color: transparent;
    border-width:     0; 
    border-style:     none;
    margin:           0 auto;
    max-width:        100%; 
    max-height:       90%;
    position:         relative;
}

figcaption {
    position:       relative;
    font-size:      60%;
	padding-bottom: 10px;
}
 

/*=============================  EFFECTS  ==================================*/

/* Transition effect
 * See here:
 https://developer.mozilla.org/en/CSS/CSS_transitions
 How to use CSS3 Transitions: */
section.slide {
  -moz-transition:    left 250ms linear 0s;
  -webkit-transition: left 250ms linear 0s;
  -ms-transition:     left 250ms linear 0s;
  transition:         left 250ms linear 0s;
}

/* Before */
section.slide {
    left: -150%;
}

/* Now */
section.slide[aria-selected] { left: 0; }

/* After */
section.slide[aria-selected] ~ section.slide { left: +150%; }

/* Incremental elements */

/* By default, visible */
.incremental > * {
    opacity: 1;
}

/* The current item */
.incremental > *[aria-selected] {
    color: var(--main-color2);
    opacity: 1;
}

/* The items to-be-selected */
.incremental > *[aria-selected] ~ * {
    opacity: 0.2;
}