/******************************************************************************\

  Standard Web Page Stylesheet

  Version:   20200507 
  Author:    Ante Sesardić
  Email:     ante@sesardic.net
  Website:   https://www.sesardic.net/

  Before using the HTML content and this CSS stylesheet in live production:
  - Validate HTML and CSS compliance.
  - Optimise the CSS, Javascript and HTMLcode.
  - Compress and obfuscate the file.

  Acknowledgements:
  - CSS optimisation: https://www.cssoptimiser.com/
  - HTML optimisation:
  - Javascript optimisation:
  - Background patterns: https://leaverou.github.io/css3patterns/#argyle
  - Larsseit fonts made by Online Web Fonts and licensed by CC-BY-3.0

\******************************************************************************/

/******************************************************************************\
  Google Open Sans font family
\******************************************************************************/
/*
@font-face { font-family:"Open Sans"; format("truetype");
  url("~/fonts/OpenSans-Light.ttf"), font-style:normal; font-weight:300; }
@font-face { font-family:"Open Sans"; format("truetype");
  url("~/fonts/OpenSans-LightItalic.ttf"), font-style:italic;
  font-weight:300; }
*/
@font-face { font-family:"Open Sans"; format("truetype"); // Normal
  url("~/fonts/OpenSans-Regular.ttf"), font-style:normal; font-weight:400; }
@font-face { font-family:"Open Sans"; format("truetype"); // Normal
  url("~/fonts/OpenSans-Italic.ttf"), font-style:italic;
  font-weight:normal;400; }
/*
@font-face { font-family:"Open Sans"; format("truetype");
  url("~/fonts/OpenSans-SemiBold.ttf"), font-style:normal; font-weight:600; }
@font-face { font-family:"Open Sans"; format("truetype");
  url("~/fonts/OpenSans-SemiBolditalic.ttf"), font-style:italic;
  font-weight:600; }
*/
@font-face { font-family:"Open Sans"; format("truetype"); // Bold
  url("../fonts/OpenSans-Bold.ttf"), font-style:normal; font-weight:700; }
@font-face { font-family:"Open Sans"; format("truetype"); // Bold
  url("../fonts/OpenSans-BoldItalic.ttf"), font-style:italic;
  font-weight:700; }
/*
@font-face { font-family:"Open Sans"; format("truetype");
  url("../fonts/OpenSans-ExtraBold.ttf"), font-style:normal; font-weight:800; }
@font-face { font-family:"Open Sans"; format("truetype");
  url("../fonts/OpenSans-ExtraBoldItalictalic.ttf"), font-style:italic;
  font-weight:800; }
*/
/******************************************************************************\
  Standard and general settings (multiple browsers conformance)
\******************************************************************************/
*, *:before, *:after { box-sizing: border-box; border:0; margin:0; padding:0;
  font:normal 1rem "Open Sans",sans-serif; color:hsl(30,30%,30%); }
abbr,article,aside,audio,canvas,datalist,details,eventsource, figcaption,
  figure, footer, header, hgroup, main, mark, menu, meter, nav, output,
  progress, section,time,video { display:block; }
a, a:link, a:visited { text-decoration:underline; text-align:center;
  color:navy; }
a:hover, a:active { color:darkred; }
body { background:white; }
box-sizing:border-box;
figcaption { display:block; }
h1, h2, h3, h4, h5, h6 { font-weight:bold; orphans:3; widows:3;
  break-inside:avoid; break-after:avoid;
  page-break-inside:avoid; page-break-after:avoid; }
h1 { font-size:2rem; margin:1rem 0 0.5rem 0; text-align:center; }
h1:first-child { margin-top:0; }
h2 { font-size:1.2rem; margin:1rem 0 0.5em 0; }
h3 { font-size:1.0rem; margin:1rem 0 0.5em 0; }
h4 { font-size:0.8rem; margin:1rem 0 0.5em 0; font-style:italic; }
h5 { font-size:0.6rem; margin:1rem 0 0.5em 0; font-weight:normal; }
h6 { font-size:1rem; margin:1em 2em 0.5em 0; font-weight:bold;
  display:inline-block; }
img { image-orientation:from-image; } /* Use EXIF data from the image */
ol { list-style:decimal inside; padding-left:2rem; }
ol li { list-style:decimal outside; }
ol li li { list-style:roman inside; font-size:0.85rem; }
ul { list-style:square outside none; padding-left:1rem; }
ul li { list-style:square; }
ul li li { list-style:disc; font-size:0.85rem; }
li, p { font-size:1.0rem; margin:1rem 0 0.5em 0; margin:0.3rem 0; }
#print-msg { border:2px solid #999; margin-top:3rem; padding:0.5rem;
  display:none; }

/******************************************************************************\
  CSS clip path shapes
\******************************************************************************/
.clip-circle { clip-path:circle(50% at 50% 50%); }
.clip-elipse { clip-path:ellipse (50% 30% at center); }
.clip-triangle { clip-path:polygon(50% 0%, 0% 100%, 100% 100%); }
.clip-square { clip-path:polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%); }
.clip-rectangle { clip-path:polygon(0% 0%, 0% 50%, 100% 50%, 100% 0%); }
.clip-pentagon { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
.clip-hexagon { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%,
  0% 50%); }
.clip-heptagon { clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%,
  0% 60%, 10% 20%); }
.clip-octogon { clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%,
  30% 100%, 0% 70%, 0% 30%); }
.clip-nonagon { clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%,
  32% 100%, 6% 78%, 0% 43%, 17% 12%); }
.clip-decagon { clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%,
  50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%); }
.clip-trapezoid { clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); }
.clip-rombus { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.clip-romboid {clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); }
.clip-star { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%,
  21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.clip-square-inset-rounded { height:100% width:100% clip-path:inset
  (0% 0% 0% 0% border-radius 5%); }
.clip-rectangle-inset-rounded { height:50% width:100% clip-path:inset
  (0% 0% 0% 0% border-radius 5%); }
.clip-frame { clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%,
  25% 75%, 25% 100%, 100% 100%, 100% 0%); }
.clip-right-chevron { clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%,
  25% 50%, 0% 0%); }
.clip-left-chevron { clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%,
  0% 50%, 25% 0%); }
.clip-right-arrow { clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%,
  60% 80%, 0% 80%); }
.clip-left-arrow { clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%,
  40% 100%, 0% 50%);}

/******************************************************************************\
  Generic classes
\******************************************************************************/
.bold { font-weight:bold; }
.center { margin:auto; text-align:center; }
.hidden { display:none; }
.info { background-color:blur; }
.italic { font-style:italic; }
.left { float:left; text-align:left; }
.middle { position:absolute; left:50%; top:50%; transform:translateX(-50%); }
.print-msg { border:2px solid gray; padding:0.5em; display:none; }
.right { float:right; text-align:right; }
.sup { vertical-align:super; font-size:0.5em; line-height:normal; }
.strong { font-weight:bold; font-style:italic; }
.success { background-color:green; }
.warning { background-color:gold; color:black; }
.error { background-color:red; color:white; }
.note { background-color:lightgray; color:black; font-weight:bold; }

/******************************************************************************\
  Web page flexible grids
\******************************************************************************/
/* Grid areas */
header { grid-area:header; }
nav { grid-area:nav; }
aside { grid-area:aside; }
main { grid-area:main; }
notes { grid-area:notes; }
footer { grid-area:footer; }

/* Simple grid with 1 column and 4 rows (all devices) */
.simple-grid-1 { display:grid; grid-gap:3px; height:100vh; width:100vw;
  grid-template-columns:1fr;
  grid-template-rows:40px 30px 1fr 30px;
  grid-template-areas:"header" "nav" "main" "footer"; }

/* Holy grail grid with 1 column and 6 rows (small screen devices) */
@media {
.holy-grail { display:grid; grid-gap:3px; height:100vh; width:100vw;
  grid-template-areas:"header" "nav" "main" "aside" "notes" "footer"; }

/* Holy grail grid with 2 columns and 5 rows) (medium screen devices) */
@media (min-width:600px) {
.holy-grail { 
  grid-template-columns:1fr 200px;
  grid-template-rows:40px 30px 1fr 1fr 30px;
  grid-template-areas:
    "header header" "nav nav" "main aside" "main notes" "footer footer"; }
  footer, header, nav { grid-column:1 / 3; } }

/* Holy Grail grid with 3 columns and 4 rows (large screen devices) */
@media (min-width:1000px) {
.holy-grail { 
  grid-template-columns:200px 1fr 200px;
  grid-template-rows:40px 30px 1fr 30px;
  grid-template-areas: "header header header" "nav nav nav"
    "aside main notes" "footer footer footer"; }
    footer, header, nav { grid-column:1 / 4; } }

/******************************************************************************\
  Generic web site page
\******************************************************************************/
aside, notes { display:flex; flex-flow:column nowrap; align-items:center;
  justify-content:flex-start; align-content:flex-start; overflow-y:scroll;
  padding:10px; background-color:hsl(30,30%,80%); }
footer, header { display:flex; flex-direction:row; flex-wrap:wrap;
  justify-content:space-between; align-items:center; align-content:center;
  background-color:hsl(30,30%,80%); }
footer a { font-size:10px; text-decoration:none; }
footer img { height:20px; margin:2px; }
Footer span { font-size:14px; line-height:20px; margin:0; padding:0; }
footer p { font-size:10px; text-align:center; }
header h1 { font-weight:bold; font-size:12px; line-height:20px;
  text-transform:none; margin:2px 0 0 0; }
header img { height:40px; float:left; margin-left:5px; }
header .flags img { height:20px; margin:10px 5px; }
header .flags img:last-child { height:36px; margin:2px 10px; cursor:pointer; }
header p { font-weight:bold; font-size:12px; text-align:center; margin:0; }
main { margin:0; padding:15px; background-color:hsl(30,30%,90%);
  overflow-y:scroll; }
nav { display:flex; flex-flow:row nowrap; justify-content:space-around;
  align-items:center; align-content:center;
  background-color:hsl(30,30%,30%); color:hsl(30,30%,90%); overflow:hidden; }
nav a, nav a:link, nav a:visited { flex:0 1 auto; text-decoration:none;
  background-color:hsl(30,30%,30%); color:hsl(30,30%,90%); padding:0 10px; }
nav a:hover { background-color:hsl(30,30%,70%); color:white; }

/******************************************************************************\
  Generic flexbox 
\******************************************************************************/
.flex-container { display:flex; flex-flow:row wrap;
  justify-content:center; align-content:center; align-items:center; }
.flex-item { display:inline-block; order:0; flex:0 1 auto; }

/******************************************************************************\
  Shadow box
\******************************************************************************/
.shadowbox { border:1px solid hsl(30,30%,40%); margin:10px; padding:10px;
  background-color:hsl(30,30%,90%); border-radius:10px;
  box-shadow:0px 0px 3px 3px hsla(30,30%,40%,0.5); }
.shadowbox img { border:1px solid hsl(30,30%,30%); margin:10px; }

/******************************************************************************\
  Hyperlinks with adjacent associated images
\******************************************************************************/
a.file[href$=".doc"] { padding-left:19px;
  background:url(../img/word_file_16x16.gif); }
a.file[href$=".gif"] { padding-left:19px;
  background:url(../img/gif_file_16x16.gif); }

/******************************************************************************\
  Hovering tooltips
  (Applies to elements of class "tooltip" with embedded <span> tags)
\******************************************************************************/
.tooltip { position:relative; }
.tooltip span { display:none; }
.tooltip:hover span { display:block; position:absolute; top:1rem; left:1rem;
  padding:0.1em 0.5rem; border:1px solid;
  color:hsl(30,30%,30%); background-color:hsl(30,30%,90%) }

/******************************************************************************\
  User messages
\******************************************************************************/
.info-msg, .success-msg, .warning-msg, .error-msg, .validation-msg {
  font:normal 13pt "Open Sans",sans-serif; 
  border: 1px solid; margin:10px 0px; padding:15px 10px 15px 50px;
  background-position:10px center; background-repeat:no-repeat; }
.info-msg {
  color:#00529B; background-color:#BDE5F8;
  background-image:url("../img/msg-information.png"); }
.success-msg {
  color:#4F8A10; background-color:#DFF2BF;
  background-image:url("../img/msg-success.png"); }
.warning-msg {
  color:#9F6000; background-color:#FEEFB3;
  background-image:url("../img/msg-warning.png"); }
.error-msg {
  color:#D8000C; background-color:#FFBABA;
  background-image:url("../img/msg-fail.png"); }
.validation-msg {
  color:#D63301; background-color:#FFCCBA;
  background-image:url("../img/validation.png"); }

/******************************************************************************\
  Button (the best CSS buttons design: https://simurai.com/archive/buttons/)
\******************************************************************************/
.button { position:relative; display:inline-block;
  margin:10px; padding:5px 10px; font:bold 0.8rem "Open Sans",sans-serif;
  text-align:center; color:hsl(30,30%,30%); background-color:hsl(30,30%,70%);
  border-top:1px solid hsla(30,30%,100%,.8);
  border-bottom:1px solid hsla(30,30%,0%,.1);
  text-shadow:1px 1px 0 hsla(30,30%,100%,0.7);
  transition:background .2s ease-in-out; user-select:none;
  border-radius:10px;cursor:pointer;
  background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0,
    from(hsla(0,0%,100%,0)), to(hsla(30,30%,100%,0.7)));
  background-image: -moz-radial-gradient(top, ellipse cover,
    hsla(30,30%,100%,0.7) 0%, hsla(30,30%,00%,0) 100%);
  background-image: gradient(radial, 50% 0, 100, 50% 0, 0,
    from(hsla(30,30%,100%,0)), to(hsla(30,30%,100%,0.7))); }
.button { box-shadow:
    inset hsla(30,30%,100%,0.6) 0 0.3rem .3rem,
    inset hsla(30,30%,0%,0.15) 0 -0.1rem .3rem,
    hsl(30,30%,60%) 0 .1rem 3px,
    hsl(30,30%,45%) 0 .3rem 1px,
    hsla(30,30%,0%,0.2) 0 .5rem 5px; }
.button:hover { background-color:hsl(30,30%,85%); }
.button:active { background-color:hsl(30,30%,90%);
  box-shadow:
    inset hsla(30,30%,100%,0.6) 0 0.3rem .3rem,
    inset hsla(30,30%,0%,0.2) 0 -0.1rem .3rem, /* inner shadow */
    hsla(30,30%,0%,0.4) 0 .1rem 1px, /* border */
    hsla(30,30%,0%,0.2) 0 .2rem 6px; /* drop shadow */
  transform:translateY(.2rem); }
.button:focus { outline:none; color:hsla(30,30%,100%,0.9)
  text-shadow:0 1px 2px hsla(30,30%,0,0.2); }
.button:before { font-size:1rem; margin-right:0.5rem; content:attr(data-icon); }
.button a, a:link, a:visited { text-decoration:none; }

/******************************************************************************\
  Pushbuttons
  Based on BonBon Buttons by @simurai (simurai.com/archive/buttons/#material)

  Three-dimensional look is achieved using the button border with multiple
  brighter and darker box-shadows and gradient background. The bottom drop
  shadow is used to produce the actual shadow effect.
  
  For active state, the text moves and the drop shadow changes to simulate
  the depth change when button is pressed.

  HTML code: <a class=“button brackets” symbol=“✈”>Button Label</a>
\******************************************************************************/
/*--- Default text, layout, shape, state transitions etc. --------------------*/
.button-b {
  font:bold 0.8rem "Open Sans",sans-serif; margin:.5px; padding:.25rem 1rem;
  text-decoration:none; text-align:center; cursor:pointer; position:relative;
  display:inline-block; text-shadow:rgba(255,255,255,.5) 0 1px 0;
  transition: background .2s ease-in-out;
/*--- Borders ----------------------------------------------------------------*/
  border-left, border-right:none;
  border-top:1px solid rgba(255,255,255,0.8);
  border-bottom:1px solid rgba(0,0,0,0.1);
  -webkit-border-radius:1rem; -moz-border-radius:1rem; border-radius:1rem;
/*--- Background color, image/gradient and transitions -----------------------*/
  color:hsl(0,0%,40%); background-color: hsl(0,0%,80%);
  background-image: gradient(radial, 50% 0, 100, 50% 0, 0,
    from(rgba(255,255,255,0)), to(rgba(255,255,255,0.7)));
  box-shadow:
    inset rgba(255,254,255,0.6) 0 0.3rem .3rem,
    inset rgba(0,0,0,0.15) 0 -0.1rem .3rem,                   /* inner shadow */
    hsl(0, 0%, 60%) 0 .1rem 3px, hsl(0, 0%, 45%) 0 .3rem 1px, /* color border */
    rgba(0,0,0,0.2) 0 .5rem 5px;                               /* drop shadow */
  }
/*--- Button hover state -----------------------------------------------------*/
.button-b:hover { background-color:hsl(0,0%,90%); }
/*--- Button active state ----------------------------------------------------*/
.button-b:active { background-color:hsl(0,0%,80%);
  transform: translateY(.2rem);
  background-image: gradient(radial, 50% 0, 100, 50% 0, 0,
    from(rgba(255,255,255,0)), to(rgba(255,255,255,0)));
  box-shadow:
    inset rgba(255,255,255,0.6) 0 0.3rem .3rem,
    inset rgba(0,0,0,0.2) 0 -0.1rem .3rem,
    rgba(0,0,0,0.4) 0 .1rem 1px,
    rgba(0,0,0,0.2) 0 .2rem 6px; }
/*--- Button shapes ----------------------------------------------------------*/
.round { border-top: none;
  border-radius:1rem; }
.oval { border-top:none; padding-left:.8rem; padding-right:.8rem;
   border-radius:5rem/2rem; }
.brackets { border-top:none;
  border-radius:.5rem/1rem; }
.skew { border-top:none; padding-right:1.2rem; padding-left:0.8rem;
  border-radius:5rem 1rem/5rem 1rem; }
.back { border-top-color:rgba(255,255,255,0.5);
  border-radius:1.6rem 1.6rem 1rem 1rem/4rem 4rem 1rem 1rem; }
.knife { padding-left:1.5rem;
  border-radius:.2rem .5rem .5rem 8rem/.2rem .5rem .5rem 5rem; }
.shield {
  border-radius:.4rem .4rem 2rem 2rem/.4rem .4rem 3rem 3rem; }
.drop { border-top:none;
  border-radius:2rem 5rem 2rem .6rem/2rem 4rem 2rem .6rem; }
.morph { border-top: none;
  border-radius:5rem/2rem; transition:border-radius .3s ease-in-out; }
.morph:hover { border-radius:.4rem .4rem 2rem 2rem/.4rem .4rem 3rem 3rem; }
.morph:active { border-radius:.3rem; }
.morph:after { display:none; }
.transparent { color:rgba(0,0,0,0.5) }
.transparent, .button.transparent:hover, .button.transparent:active
  { background-color:transparent; background-image:none; }
.transparent:hover { opacity:0.9; }
/*--- Set button icon using HTML data attribute ------------------------------*/
.button-b:before { font:normal 1.25rem IcoMoon,sans-serif; margin:0;
  content:attr(data-icon); margin-right:6px; }

/******************************************************************************\
  Horizontal Dropdown Menu (causes CSS problems !!!)
********************************************************************************
.menu, .menu ul { border:0; margin:0; padding:0; list-style:none;
  text-decoration:none; }
.menu { width:960px; margin:60px auto; border:1px solid #222;
  background-color:#111; background-image:linear-gradient(#444, #111);
  border-radius:6px; box-shadow:0 1px 1px #777; }
.menu li { float:left; border-right:1px solid #222; box-shadow:1px 0 0 #444;
  position: relative;
.menu a { float:left; padding:12px 30px; color:#999;
  text-decoration:none; text-transform:uppercase; text-shadow:0 1px 0 #000;
  font:bold 12px "Open Sans",sans-serif; }
.menu li:hover > a { color:#fafafa; }
.menu:after { clear:both; }
.menu ul { margin:20px 0 0 0; opacity:0; visibility:hidden; position:absolute;
  top:38px; left:0; z-index:1; border-radius:3px;
  background:#444; background:linear-gradient(#444,#111);
  box-shadow:0 -1px 0 rgba(255,255,255,.3); transition:all .2s ease-in-out; }
.menu li:hover > ul { opacity:1; visibility:visible; margin: 0; }
.menu ul ul { top:0; left:150px; margin:0 0 0 20px;
  box-shadow:-1px 0 0 rgba(255,255,255,.3); }
.menu ul li { float:none; display:block; border:0;
  box-shadow:0 1px 0 #111, 0 2px 0 #666; }
.menu ul li:last-child { box-shadow: none; }
.menu ul a { padding:10px; width:130px; display:block; white-space:nowrap;
  float:none; text-transform:none; }
.menu ul a:hover { background-color:#0186ba;
  background-image:linear-gradient(#04acec,#0186ba); }
\******************************************************************************/

/******************************************************************************\
  Vertical slide-out Menu
\******************************************************************************/
.v-menu ul { list-style:square inside url("img/bullet1.jpg"); }
.v-menu ul li:first-child > a { border-radius: 3px 3px 0 0; }
.v-menu ul li:first-child > a:after {
  content:''; position:absolute; left:40px; top:-6px;
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-bottom:6px solid #444; }
.v-menu ul ul { list-style:disc inside url("img/bullet2.jpg"); }
.v-menu ul ul li:first-child a:after {
  left:-6px; top:50%; margin-top:-6px;
  border-left:0; border-bottom:6px solid transparent;
  border-top: 6px solid transparent; border-right: 6px solid #3b3b3b; }
.v-menu ul li:first-child a:hover:after { border-bottom-color: #04acec; }
.v-menu ul ul li:first-child a:hover:after {
  border-right-color:#0299d3; border-bottom-color:transparent; }
.v-menu ul li:last-child > a { border-radius:0 0 3px 3px; }
.v-menu ul ul ul { list-style:circle inside url("img/bullet3.jpg"); }

/******************************************************************************\
  Circles menu
\******************************************************************************/
.circles { list-style:none; width:100%; display:flex; flex-direction:row;
  flex-wrap:nowrap; align-items:center; justify-content:center;
  font:bold 10px "Open Sans"; color:hsl(30,30%,30%); margin-top:2rem; }
.circles li { margin-left:-20px; height:25vh; width:25vh; display:inline-block;
  border:5px solid hsl(30,30%,80%); border-radius:50%; overflow:hidden;
  background-size:cover; transition:all 0.4s linear; display:inline-block;
  background-color:hsl(30,30%,60%); }
.circles li:first-child { margin-left:0; } 
.circles a { font-size:0.9rem; text-align:center; text-decoration:none; }
.circles h1 { font-size:0.9rem; margin:0; background-color:hsl(30,30%,80%); }
.circles p { font-size:0.9rem; padding:20px; height:25vh; width:25vh;
  text-align:center; vertical-align:middle; display:none;
  background:hsla(30,30%,90%,0.8); }
.circles li:hover { border:5px solid hsl(30,30%,30%);
  transform:rotate(360deg); scale(1.1); z-index:999; }
.circles li:hover h1 { display:none; }
.circles li:hover p { display:table-cell; }

/******************************************************************************\
  Figure fade
\******************************************************************************/
.fade figure { position:relative; transition:opacity 1s ease-in-out; }
.fade img { position:absolute; top:0; left:0; opacity:1; }
.fade figcaption { position:absolute; top:0; left:0; opacity:0; }
.fade figure:hover img { opacity:0; }
.fade figure:hover figcaption { opacity:1; }

/******************************************************************************\
  Animation effects
\******************************************************************************/
.fade-in { animation:fadeIn ease 2s; }
@keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }
.fade-out { animation:fadeOut ease 2s; }
@keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } }

/******************************************************************************\
  Horizontal news ticker
********************************************************************************
◼︎ {ticker-wrapper overflow:hidden; padding-left:100%;} ensures correct initial
  ticker offset and hides the items that will appear from the right.
◼︎ {ticker-items display:inline-block; white-space:no-wrap;} ensures ticker is
  one line only. {ticker-wrapper box-sizing:content-box;} and {ticker-items
  padding-right:100%} ensure the full text travels off-screen without an early
  restart.
◼︎ The animation duration adjusts the moving text speed according to its length.
◼︎ @media command adjusts the ticker speed for different screen sizes.
\******************************************************************************/
.ticker-wrapper { width:100%; overflow:hidden; box-sizing:content-box;
  padding-left:100%; background-color:hsl(30,30%,30%); }
.ticker-items { display:inline-block; white-space:nowrap; padding-right:100%;
  animation-iteration-count:infinite; animation-timing-function:linear;
  animation-name:ticker; animation-duration:30s; }
.ticker-items:hover { animation-play-state:paused; cursor:pointer; }
.ticker-item { display:inline-block; padding:0 2rem; color:hsl(30,30%,90%);
  font:bold 1rem/2rem helvetica; }
@keyframes ticker {
  0% { transform:translate3d(0,0,0); }
  100% { transform:translate3d(-100%,0,0); } }
@media only screen and (max-width:1080px) { .hmove { animation-duration:10s; } }

<!--****************************************************************************
   Octogons
*****************************************************************************-->
.octogons { font:1rem normal helvetica; margin:0; padding:20px;
  background:hsl(30,30%,85%); }

/* Octogons configuration parameters */
.octogons figure { clip-path:polygon(
  30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  width:180px; height:180px; margin:3px; background-image:center/cover;
  display:inline-block; cursor:pointer; position:relative; }
.octogons figure:hover { filter:brightness(1.25) opacity(0.5); }

/* Octogons content styling */
.octogons figcaption { position:absolute; top:0; left:0; width:100%; }
.octogons h1 { font-weight:bold; text-align:center; margin:12px 0; }
.honeycomb p { font 0.9rem bold helvetica; margin-top:10px; text-align:center;
  background:hsla(30,30%,90%,0.75); }

/* Sequence numbering */
.octogons { counter-reset:octoSeq; }
.octogons figure { counter-increment:octoSeq 1; }
.octogons figcaption p::before { content:counter(octoSeq); }

/******************************************************************************\
  Photograph Slides
\******************************************************************************/
.slides { display:flex; flex-flow:row wrap; justify-content:center;
  align-content:center; align-items:center; padding:30px; }
.slides figure { flex:0 1 auto; order:0;
  background:white; color:hsl(30,30%,30%);
  text-align:center; text-decoration:none; transition:transform .3s linear;
  border:1px solid hsl(30,30%,30%); border-radius:15px; cursor:pointer;
  box-shadow:3px 5px 15px hsl(30,30%,30%); margin:10px; }
.slides figure img { display:block; height:200px; max-width:150px; 
  margin:10px; object-fit:cover; background:lightgray; }
.slides figcaption h1 { font-size:0.8rem; margin:0 0 5px 0; }
.slides figcaption p { display:none; }
.slides figure:hover { transform:scale(1.5); filter:brightness(125%); }
.slides figure:hover img { border-radius:50%; }

/******************************************************************************\
  3D card flip (HTML example below)
  <div class="card-outer"> (perspective needed for 3D display - can remove)
    <figure class="card-inner">
      <img class="card-front"></img>
      <figcaption class="card-back"></figcaption>
    </figure>
  </div>
\******************************************************************************/
.card-outer { display:inline-block; perspective:1000px; } /* card 3d scene */
.card-outer:hover .card-inner { transform:rotateY(180deg); }
.card-inner { position:relative;
  transition-duration:0.5s; transition-timing-function:ease-in-out;
  transform-style:preserve-3d; transform-origin:50% 50%; }
.card-front, .card-back { position:absolute; left:0; top:0;
  -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.card-back { transform:rotateY(180deg); }

/******************************************************************************\
  Vertical Cards
\******************************************************************************/
.v-cards * { font:normal .75rem "Open Sans", sans-serif; margin:0; padding:0; }
.v-cards { display:grid; grid-gap:2rem; 
  grid-template-columns:repeat(auto-fill,200px);
  grid-template-rows:max-content; padding:10px; } 
.v-cards article { display:flex; flex-flow:column nowrap;
  justify-content:space-between;
  color:hsl(30,30%,30%); background-color:hsl(30,30%,98%); 
  border:2px solid hsl(30,30%,30%); border-radius:1rem; padding:0.5rem;
  box-shadow:10px 10px 10px grey; transition:all 0.25s ease-in;
  position:relative; }
.v-cards article:hover { z-index:10; }
.v-cards header { position:absolute; top:-10px; left:-10px; z-index:10;
  color:black; background:white; border:1px solid grey; padding:5px;
  font-size:0.6rem; font-weight:600; text-transform:uppercase; }
.v-cards img { display:block; max-height:150px; max-width:200px;
  border-radius:1rem; }
.v-cards article:hover img { filter:brightness(125%); }
.v-cards h1 { font-weight:bold; text-align:center; margin:0.5rem 0;
   letter-spacing:0.15rem; text-transform:uppercase; }
.v-cards p { flex-grow:1; margin-bottom:0.5rem; }
.v-cards a { display:block; padding:0.25rem;
  border:1px solid hsl(30,30%,30%); border-radius:0.5rem;
  width:100%; text-decoration:none; background-color:hsl(30,30%,80%); }

/******************************************************************************\
  Horizontal Cards
\******************************************************************************/
.h-cards { display:flex; flex-flow:row wrap; justify-content:center;
  align-content:start; align-items:center; padding:30px; }
.h-cards * { font:normal .75rem "Open Sans", sans-serif; margin:0; padding:0; }
.h-cards article { display:inline-grid; grid-gap:5px; place-content:start;
  grid-template-columns:90px 220px; grid-template-rows:20px 120px 20px;
  grid-template-areas:
    "header header"
    "picture description"
    "footer footer";
  box-shadow:3px 5px 15px hsl(30,30%,30%); margin:0.5rem; padding:10px;
  color:hsl(30,30%,30%); position:relative; background:white;
  border:2px solid hsl(30,30%,30%); border-radius:1rem; }
.h-cards article:hover { z-index:10; }
/* .h-cards article:hover img { filter:brightness(120%); } */
.h-cards a, a:link, a:visited { margin:0 auto; }
.h-cards header { grid-area:header; background:hsl(30,30%,80%);
  text-align:right; padding:0 0.5rem; line-height:20px; }
.h-cards img { grid-area:picture; max-height:120px; max-width:90px;
  display:inline-block; margin:auto; }
.h-cards figcaption { grid-area:description; overflow:scroll; }
.h-cards h1 { font-weight:bold; text-align:center; letter-spacing:0.15rem;
  text-transform:uppercase; margin-bottom:5px; }
.h-cards h2 { font-weight:bold; }
.h-cards footer { grid-area:footer; background:hsl(30,30%,80%);
  border-radius:0.5rem; font-size:0.75rem; line-height:20px; text-align:center;
  width:80%; margin:0 auto; } 

/******************************************************************************\
  Randomise CSS cards using rotate, skew, scale and translate transformations
\******************************************************************************/
.h-cards article:nth-child(10n + 1)
  { transform:rotate(15deg) translate(5px,5px); }
.h-cards article:nth-child(10n + 2)
  { transform:rotate(-5deg) translate(-15px,-15px); }
.h-cards article:nth-child(10n + 3)
  { transform:rotate(-15deg) translate(10px,10px); }
.h-cards article:nth-child(10n + 4)
  { transform:rotate(5deg) translate(-5px,-5px); }
.h-cards article:nth-child(10n + 5)
  { transform:rotate(10deg) translate(15px,-15px); }
.h-cards article:nth-child(10n + 6)
  { transform:rotate(-10deg) translate(-10px,10px); }
.h-cards article:nth-child(10n + 7)
  { transform:rotate(10deg) translate(5px,-5px); }
.h-cards article:nth-child(10n + 8)
  { transform:rotate(-5deg) translate(-15px,5px); }
.h-cards article:nth-child(10n + 9)
  { transform:rotate(15deg) translate(10px,-5px); }
.h-cards article:nth-child(10n + 10)
  { transform:rotate(5deg) translate(5px,-15px); }
.h-cards article:hover { transform:rotate(0) translate(0,0) scale(1.2); }

/******************************************************************************\
  CSS cards sequence numbering
\******************************************************************************/
.h-cards, .v-cards { counter-reset:cardSeq; }
.h-cards article, .v-cards article { counter-increment:cardSeq 1; }
.h-cards header::after, .v-cards header::after
  { content: "("counter(cardSeq)")"; }

/******************************************************************************\
  Photos spotlight slider (source: Netflix browse page )

  1. The hovered photo expands keeping its aspect ratio.
  2. Other photos move outwards to avoid overlap keeping their size.
  3. All photos remain vertically centered.
\******************************************************************************/