/* CSS 2 PORTAL -------------------------------------------------------------------------------- */

  @font-face { font-family: "CrystalRadioKit-Regular";
    src: url("./fonts/crystal-radio-kitregular.eot"); 
    src: url("./fonts/crystal-radio-kitregular.eot?#iefix") format("embedded-opentype"), 
      url("./fonts/crystal-radio-kitregular.otf") format("opentype"), 
      url("./fonts/crystal-radio-kitregular.svg") format("svg"), 
      url("./fonts/crystal-radio-kitregular.ttf") format("truetype"), 
      url("./fonts/crystal-radio-kitregular.woff") format("woff"), 
      url("./fonts/crystal-radio-kitregular.woff2") format("woff2"); 
    font-weight: normal;
    font-style: normal;
    }

  @font-face {
    font-family: 'Bahnschrift Regular';
    src: url('./fonts/Bahnschrift Regular.eot');
    src: url('./fonts/Bahnschrift Regular.eot?#iefix') format('embedded-opentype'),
         url('./fonts/Bahnschrift Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    }

  @font-face {
    font-family: 'Bahnschrift';
    src: url('./fonts/Bahnschrift.svg#Bahnschrift') format('svg'),
         url('./fonts/Bahnschrift.ttf') format('truetype'),
         url('./fonts/Bahnschrift.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    }


html, body { 
  font-size:1em;
  font-family: Verdana, Arial, Helvetica;
  width:100%;
  height:100%;
  margin:0; 
  padding:0;
  border:none;
  background-image:url("./_resources/"); 
  background-attachment:fixed; 
  background-position:center;
  background-repeat:no-repeat; 
  background-size:cover;
  }

#container {
  float:left;
  width:98%;
  height:100%;
  padding:0.4em;
  margin:1em;
  border-radius:0.8em;
  color:black;
  background-image:url("./_resources/rect-white-semi10.png");
  background-repeat:repeat; 
  text-align:left;
  }

#container20 {
  float:left;
  width:98%;
  height:100%;
  padding:0.4em;
  margin:1em;
  border-radius:0.8em;
  color:black;
  background-image:url("./_resources/rect-white-semi20.png");
  background-repeat:repeat; 
  text-align:left;
  }

#container50 {
  float:left;
  width:98%;
  height:100%;
  padding:0.4em;
  margin:1em;
  border-radius:0.8em;
  color:black;
  background-image:url("./_resources/rect-white-semi50.png");
  background-repeat:repeat; 
  text-align:left;
  }
 
.canvas {
  text-align:left;
  padding:1em;
  margin:0.5em;
  background-image:url("./_resources/rect-white-semi60.png");
  background-repeat:repeat; 
  }

#PortalSpace        { position: absolute; top: 0; left: 0; width: 100%; height: 100px; right: 0; }

#PortalStatus       { opacity:0.85; background-color:black; position: absolute; bottom: 0px; left: 0; 
                      width: 100%; height:70px; overflow:hidden; color:#528b8b; position: fixed; }

h4.container        { font-size:1em; font-variant:small-caps; color:lightgrey; letter-spacing:3px; margin:0.2em 0.2em 0.3em 0.5em; }

.SvgContainer       { display: inline-block; position: relative;
                      width: 100%; padding-bottom: 100%; vertical-align: middle; overflow: hidden; }

/* icons --------------------------------------------------------------------------------------- */

.icon {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
     
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .5em;
  text-align: center;
  /* opacity: .8; */
     
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
     
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
     
  /* You can be more comfortable with increased icons size */
  font-size: 1em; 
     
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
     
  /* Uncomment for 3D effect */
  text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); 
  }

.stats              { width:100%;height:480px; border:none; }

  .message {
    display:inline-block;
    width: 98%; 
    box-shadow: 0 0 10px darkgray; 
    padding: 0.3em; 
    margin:1em;
    border-bottom:1px solid black;
    opacity:0.7;
    }

  .message_text {
    font-size: 0.9rem; 
    font-weight: normal; 
    text-align:center;
    opacity: 0.8; 
    letter-spacing: 2px; 
    }

/* provoqio ------------------------------------------------------------------------------------ */

h3.provoqio         { color:red; font-size:1.7em; margin:0em 1em 0.2em 0.4em; font-variant:small-caps; }
h4.provoqio         { color:red; font-size:1.3em; margin:0em 1em 0.2em 0.6em; font-variant:small-caps; }
h5.provoqio         { color:red; font-size:1.0em; margin:0em 1em 0.2em 0.5em; font-variant:small-caps; }
.SvgProvoqio        { opacity:0.95; margin:0.4em; display: inline-block; }
.SvgProvoqio:hover  { opacity:1;   box-shadow:0px 0px 15px rgba(210,210,210,0.8); background-color: rgba(210,210,210,0.7) }
.RectProvoqio       { stroke:black; fill:black; opacity:0.6; }
.PvqText            { font-size:0.80em; fill:peru; stroke:none; opacity:1; }
.PvqTextXS          { font-size:0.70em; fill:peru; stroke:none; opacity:1; }
.PvqArtistL         { fill:white; stroke:none; font-size:1.0em; }
.PvqArtistM         { fill:white; stroke:none; font-size:0.95em; }
.PvqArtistS         { fill:white; stroke:none; font-size:0.90em; }
.PvqArtistXS        { fill:white; stroke:none; font-size:0.80em; }
.PvqSubtitles       { fill:black; stroke:dimgray; font-variant:small-caps; opacity:1.8;}
.PvqFlag            { outline:1px solid lightgrey; opacity:1; }
.PvqThumb           { opacity:1; }

/* collections SVG ----------------------------------------------------------------------------- */

.SvgResponsive      { margin:0.5em; display: inline-block; }
.SvgResponsiveSmall { margin:0.5em; display: inline-block; }
.SvgResponsiveXS    { margin:0.5em; display: inline-block; }
.SvgApp             { margin:0.5em; }
.SvgButton          { margin:0.5em; }
.Gtext              { fill:yellow; stroke:white; stroke-width:0.5; font-size:110%; letter-spacing:0.5px; font-variant:small-caps;  }
.Glink              { fill:orange; stroke:none; cursor:inherit;}
.Glink:hover        { fill:peru; stroke:none; opacity:1; cursor:pointer; }
.GlinkSelect        { fill:orangered; stroke:none; cursor:inherit;}
.GlinkSelect:hover  { fill:orangered; stroke:none; opacity:1; cursor:pointer; }
.Gbutton            { fill:orange; cursor:inherit; opacity:0.9;  }
.Gbutton:hover      { fill:orangered; opacity:1; cursor:pointer; }
.RectExt            { stroke:green; fill:green; opacity:0.6; }
.RectApp            { stroke:seagreen; fill:seagreen; }
.RectMore2          { stroke:orange; fill:orange; }
.SvgForeign         { stroke:lightgrey; fill:lightgrey; } 
.SvgTitle           { fill:yellow; stroke:white; stroke-width:0.5; font-size:1em; font-stretch: expanded; }
.SvgText            { height: 100%; font-size:0.85em; fill:black; stroke:black; color:black; opacity:1; }
.SvgTextMore        { font-size:0.9em; fill:darkslategrey; stroke:none; color:darkslategrey; font-weight:bold; text-anchor:middle; }
.SvgTextMore:hover  { fill:white; stroke:none; color:white; }
.RectColl           { stroke:purple; fill:purple; opacity:0.7; }
.RectPvq            { stroke:black; fill:black; opacity:0.7; }
.RectItem           { stroke:black; fill:black; opacity:0.7; }
.RectPlay           { stroke:firebrick; fill:firebrick; opacity:0.5; }
.RectExternal       { stroke:#8b5f65; fill:#8b5f65; opacity:0.7; }
.TextExternal       { font-size:0.80em; fill:#eeee00; stroke:none; opacity:1; }
.Link6Coll          { opacity:0.9; }
.Link6Coll:hover    { opacity:1; }
.TextColl           { font-size:0.85em; fill:yellow; stroke:none; opacity:1; }
.TitleColl          { fill:yellow; stroke:white; stroke-width:0.5; font-size:1em; font-stretch: ultra-expanded; }
.TextItem           { font-size:0.85em; fill:orange; stroke:none; opacity:1; }
.TextItemXS         { font-size:0.75em; fill:orange; stroke:none; opacity:1; }
.TitleItem          { fill:white; stroke:none; font-size:1.0em; }
.TitleItemS         { fill:white; stroke:none; font-size:0.8em; }
.TitleItemXXS       { fill:white; stroke:none; font-size:0.7em; }
.TitleItemXS        { fill:white; stroke:none; font-size:0.8em; }
.ImageColl          { width:260px; height:180px; background-color:slategray; background-attachment:fixed; 
                      background-position:center; background-repeat:no-repeat; background-size:cover; }
.daily              { margin:0.6em; opacity:0.9; }
.daily:hover        { opacity:1; box-shadow:0px 0px 15px rgba(210,210,210,0.8); background-color: rgba(210,210,210,0.7); }

/* links, a hrefs ------------------------------------------------------------------------------ */

.crumb              { float:left; background-color:grey; color:white; 
                      margin:0.5em 0.5em 0.5em 0.5em; padding:0.5em; font-size:110%;
                      text-decoration:none; border-radius:4px; }
.crumb:hover        { background-color:lightgrey; color:black; }
#crumb-text         { display:inline; }
.info               { font-size:1em; color:firebrick; font-weight:normal; text-decoration:none; }
.info:hover         { color:red; text-decoration:underline; }
a.top-of-page       { float:right; font-size:1em; color:firebrick; font-weight:normal; text-decoration:none; }
a.top-of-page:hover { color:red; text-decoration:underline; }
h3.coll             { font-variant:small-caps; color:firebrick; font-size:1.5em; margin:0em 0em 0.2em 0.5em; float:left; }
.sorting,.sortingL  { float:right; background-color:darkslategrey; color:white; 
                      margin:0.4em 0.5em 0.4em 0.5em; padding:0.4em; font-size:110%;
                      text-decoration:none; border-radius:4px; }
.sorting:hover,.sortingL:hover     { background-color:black; color:white; }
#sorting-text       { display:inline; }
.sortingL           { float:left; }
.achor,.anchorL     { font-size:0.9em; float:right; background-color:darkslategrey; color:white; 
                      margin:0.2em 0.3em 0.2em 0.3em; padding:0.5em; font-size:110%;
                      text-decoration:none; border-radius:0.8em; }
.anchor:hover,
.anchorL:hover      { background-color:black; color:white; }
#anchor-text        { display:inline; }
.anchorL            { float:left; }

/* lists --------------------------------------------------------------------------------------- */

ul.album, ul.index  { background-image:url("../_resources/rect-white-semi20.png"); background-repeat:repeat; }
.L1                 { font-size:110%; color:firebrick; font-weight:bold; text-decoration:none; }
.L1:hover           { color:red; text-decoration:underline; }
.L2                 { font-size:100%; color:firebrick; font-weight:bold; text-decoration:none; }
.L2:hover           { color:red; text-decoration:underline; }
.L3                 { font-size:95%; color:firebrick; font-weight:normal; text-decoration:none; }
.L3:hover           { color:red; text-decoration:underline; }
.L4                 { font-size:90%; color:firebrick; font-weight:normal; text-decoration:none; }
.L4:hover           { color:red; text-decoration:underline; }
.L5                 { font-size:85%; color:firebrick; font-weight:normal; text-decoration:none; }
.L5:hover           { color:red; text-decoration:underline; }
.List1              { font-size:110%; font-weight:bold;   margin:0.5em 0 0.5em 0em; } 
.List2              { font-size:100%; font-weight:normal; margin:0.3em 0 0.3em 0em; } 
.List3              { font-size:95%; font-weight:normal; } 
.List4              { font-size:90%; font-weight:normal; } 
.List5              { font-size:85%; font-weight:normal; } 
h3                  { color:firebrick; font-size:1.5em; margin:0em 1em 0.2em 0em; }
h4                  { color:firebrick; font-size:1.2em; margin:0em 1em 0.2em 0em; }
h5                  { color:firebrick; font-size:1.0em; margin:0em 1em 0.2em 0em; }
quote               { font-weight:bold; font-style:italic; color:red; font-size:110%; }

/* status -------------------------------------------------------------------------------------- */

.footer3            { width:100%; height:70px; border:0; margin:0; text-align:center; }
.div_left           { width:220px;float:left; margin:1em; overflow:hidden;}
.div_center         { width:80%; text-align:center;overflow:hidden; }
.div_right          { width:160px;float:right;overflow:hidden; }
#socialisti         { position:absolute; left:0.5em; bottom:0.8em; display:block; }
img.social          { margin:0.3em; opacity:0.8; height:32px;width:32px; float:top; }
img.social:hover    { opacity:0.95; box-shadow:0px 0px 15px rgba(210,210,210,0.8); background-color: rgba(210,210,210,0.7); }
img.arnaud          { width:132px;margin-right:0.1em; border:0; }
#version            { display:inline; font-size:0.8em; }
*                   { box-sizing: border-box; }
.column             { float: left; vertical-align:middle; padding: 10px; height: 300px; }
.left               { vertical-align:top; width: 25%; }
.center             { text-align:center; width: 50%; }
.right              { float: right; width: 25%; }
.row:after          { content: ""; display: table; clear: both; background:none; }

/* overall ------------------------------------------------------------------------------------- */

nav                 { margin:0.1em 0.3em 0.3em 0.2em; clear:both; }
header              { margin:0 0 -2em 0; padding:0; clear:both; }
article             { margin:1em 1em 1em .5em; text-align:center; }
section             { margin:1em 1em 1em .5em; }
fieldset            { border-color:#f0f0f0; }
legend              { color:black; font-variant:small-caps; padding:0 0.2em 0 0.2em; }
.foto               { display:inline-block; width:512px; float:right; text-align:left;
                      background-image:url("./_resources/rect-white-semi40.png"); background-repeat:repeat; }
.fieldset-foto      { max-height:360px; width:480px; float:right; margin:1px; overflow:hidden; }
.video1gen          { width:640px; height:480px; }
   
/* responsive  riesponsoef ! ------------------------------------------------------------------- */

@media screen and (max-width: 360px) {
	body 	{
		padding: 0 !important;
		min-width: 200px !important;
		max-width: 480px;
    font-size:0.9em;
	}

  .sorting { float:left; }
  .video1gen { width:280px; height:210px; }
  .SvgButton   { margin:0.2em; }
  .daily { width:80%;}
  ul, li { font-size:90%; } 
  #container { float:left; width:94%; padding:0.1em; margin:0.1em; border-radius:0.3em; } 
  section { margin:0.1em; }
  article { margin:0.1em; }
  #crumb-text,#sorting-text { display:none; }
  #arnaud { display:none; }
  #version { display:none; }
  .left   { vertical-align:top; width: 50%; }
  .center { display:none; }
  .right  { float: right; width: 50%; }
  .foto { width:200px; float:left; }
  .fieldset-foto { width:190px !important; }

  }

@media screen and (min-width: 361px) and (max-width: 480px) {
	body 	{
		padding: 0 !important;
		min-width: 360px !important;
		max-width: 480px;
    font-size:0.9em;
	}

  .sorting { float:left; }
  .video1gen { width:320px; height:240px; }
  .SvgButton   { margin:0.2em; }
  .daily { width:80%;}
  #container { float:left; width:94%; padding:0.1em; margin:0.1em; border-radius:0.3em; } 
  section { margin:0.1em; }
  article { margin:0.1em;  }
  ul, li { font-size:90%; } 
  #crumb-text,#sorting-text { display:none; }
  #arnaud { display:none; }
  #version { display:none; }
  .left   { vertical-align:top; width: 50%; }
  .center { display:none; }
  .right  { float: right; width: 50%; }
  .foto { width:280px; float:left;   }
  .fieldset-foto { width:270px !important; }

  }

@media screen and (min-width: 481px) and (max-width: 640px) {
	body {
		padding: 0 !important;
		min-width: 480px !important;
		max-width: 640px;
    font-size:1.0em;
    }

  .sorting { float:left; }
  .video1gen { width:480px; height:360px; }
  .SvgButton   { margin:0.2em; }
  .daily { width:90%;}
  #container { float:left; width:94%; padding:0.1em; margin:0.1em; border-radius:0.3em; } 
  section { margin:0.2em; }
  article { margin:0.2em; }
  ul, li { font-size:90%; } 
  #crumb-text,#sorting-text { display:none; }
  #arnaud { display:none; }
  #version { display:none; }
  .left   { vertical-align:top; width: 50%; }
  .center { display:none; }
  .right  { float: right; width: 50%; }
  .foto { width:400px; float:left;  }
  .fieldset-foto { width:390px !important; }

  }

@media screen and (min-width: 741px) and (max-width: 767px) {
	body {
		padding: 0 !important;
		min-width: 740px !important;
		max-width: 767px;
    font-size:1.0em;
    }

  .sorting { float:left; }
  .video1gen { width:640px; height:480px; }
  .daily { width:90%;height:90%;}
  #container { float:left; width:95%; padding:0.1em; margin:0.2em; border-radius:0.3em; } 
  ul, li { font-size:90%; } 
  section { margin:0.2em; }

  }

@media screen and (min-width: 767px) and (max-width: 1024px) {
	body	{
		padding: 0 !important;
		min-width: 768px !important;
		max-width: 1024px;
    font-size:1.1em;
	  }

  .sorting { float:left; }
  .video1gen { width:640px; height:480px; }
  #container { float:left; width:97%; padding:0.1em; margin:0.2em; border-radius:0.3em; } 

  } 

@media screen and (min-width: 1024px) and (max-width: 1280px) {
	body {
		padding: 0 !important;
		min-width: 1024px !important;
		max-width: 1920px;
    font-size:1.1em;
	  }

  #container { float:left; width:97%; padding:0.1em; margin:0.2em; border-radius:0.3em; } 
  .sorting { float:left; }
  .video1gen { width:640px; height:480px; }

}