/*
 * Protected(C1) 2016, irmlab.com


 [161227] test05.css -- Resizing the body column float (by rounding).
            The unslider nav- comes after the Horizontal slider
            But we cannot compute the scrollable directly.
 [161227] test04.css -- fixed the nav to footer
 */

/*h2*/
/*{ font : large "Arial Black"; text-align : right; padding: 0 1rem; }*/

/*h3*/
/*{ font-style : italic; font-family : Arial; color : teal; }*/

/*h4*/
/*{ font : italic small Arial; color : navy; }*/

/*h5*/
/*{ font : bold smaller Arial; color : navy; }*/

address
{ font : italic xx-small Arial; }

small
{ font-style : italic; font-family : Arial; }

body
{
  font-family    : "Calibri", serif;
  font-size      : 100%;
  margin         : 0;
  padding        : 0;
  color          : black;
  /*-------------*/
  display        : flex;
  flex-direction : column;
  height         : 100vh;
  overflow       : hidden;
}

div.scrollable {
	flex: 1 88vh;             /* jusqu'au footer */
	overflow: hidden;
}

.i3VSlider
{
}
.i3HSlider
{
}

/*========================
*/
/* USE THE FLEX LAYOUT!
http://the-echoplex.net/flexyboxes/
http://stackoverflow.com/questions/8555820/set-div-to-remaining-height-using-css-with-unknown-height-divs-above-and-below/12242226#12242226*/
.i3item {
	margin: 0.5rem 0 1rem 0.5rem;
	display: flex;
	flex-direction: row;
	min-height: calc( 88vh - 3rem);
}

.i3item > .i3ExpoLt {
	flex: 0 1 20%;
	max-width: 20vh;
	/* Contener for img+iframe: */
	display: inline-flex;
	flex-direction: column;
}

.i3ExpoLt > img
{
  flex: 0 1 auto; /* firefox issue : fills 4x , and img x1  */
  align-self: flex-start;
  width    : 100%; /* relative a flex-row flow */
  /*height   : 100%; !* relative a flex-row flow *!*/
  border   : thin solid gray;
}

/* Utiliser des icones */
.i3ExpoLt > .i3downloads
{
  flex: 1 1 auto;
  align-self: stretch;
  padding : 1rem 0;
  text-align : center;
}

.i3ExpoLt > .i3downloads img
{ width : 40%; }


/** https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/
/*  For videos: padding-bottom: 75% = 4:3 -- 56.25%; = 16:9
/*  IRMNOTE: For flex, simply keep [container-relative]+[iframe-absolute]
        However, heigh is independent (auto) and for strechting, ignore the padding-bottom
 */
.i3item > .i3ExpoRt
{
  flex           : 1;   /* firefox issue : fills RightSide 5x  and LeftSide x1 (20%) */
  position       : relative;  /* Making iframe responsive */
  overflow       : auto;

  /*padding-bottom : calc(86vh - 4rem); !*vh de Scroller + unsliderNav, 4rem from i3item*!*/
  /*height         : 0;*/
}

.i3item > .i3ExpoRt > iframe
{
  position : absolute;
  top      : 0;
  left     : 0;
  width    : 100%;
  height   : 100%;
  border   : none;
}

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


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

/*=== HEADING */
div.i3head {
	flex: 1 9vh;
	max-height: 9vh;
	text-align: center;
	background-color: dimgrey;
	color: white;
	font-family: "Calibri", serif;
/*---*/
 	display: flex;
	flex-flow: row nowrap;
}
.i3head > div { flex: 0 1; padding: 0.5rem; min-height:0;min-width:0; }
.i3head > div > img { height:100%; width:auto;}

.i3head > h1 {
	flex: 2;
	display: block;

	font : italic 2vh "Arial Black";
	text-align : right; padding-right : 1rem;
}
.i3head > .i3nav {
	flex: 2;
	align-self: flex-end;
}
/*=== FOOTER */
div.i3footer {
	flex: 1 3vh;
	min-height: 1rem;
	max-height: 3vh;
	font-family: "Calibri", serif;
	text-align: center;
	background-color: dimgrey;
	color: white;
}

div.i3footer > div
{
  width  : 100%;
  height : 100%;
}

.i3head a, .in3footer a
{ color : white; }

a:hover
{ font-style : italic;  }

a:link
{ color : white }

a:active
{ color : papayawhip }

a:visited
{ color : white }


/* AFTER THE LI*/
.unslider-nav > ol {
	background-color: #C1C1C1;
}
/* From the css unslider */

.unslider-arrow {
    width: 1.5em;
    height: 3em;
    margin-top: -4em;
	overflow: hidden;
	background: rgba(0, 0, 0, .2) no-repeat 50% 50%;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAQAAABuQZ3IAAAAi0lEQVR4AU3OISBEQQBAwS0AACS9NxqQgCZpkiYBVddFvWhAAUABAPQCAGC4g/0vTnrBqCfDIZl70J+kMUBPpEwT4FNXxBxz4F1HxHyr4EVTxBLb4EFNxEon4CJSlVNw9AcV9sC16h8osgke1P1ArgXwouVvdQq86ww/GQefusNf7kBviBlxpT8k+gL/Wox4r1d4MwAAAABJRU5ErkJggg==');
	background-size: 7px 11px;
	border-radius: 32px;
	text-indent: -999rem;
}
.unslider-arrow.prev
{
  -ms-transform : rotate(180deg);
  transform     : rotate(180deg);
}