/* --------- */
:root {
  --color_main_text: white;
  --color_main_bg: #00BCD4;
  --color_link: white;
  --color_link_shadow: #00253e;
  --color_link_focus: white;
  --color_link_shadow_hover: rgba(55, 71, 79, 0.54);
  --color_footer: var(--color_link_shadow);
  --color_footer_text: white;
  --color_footer_shadow: #9E9E9E;
  --color_figure_border: var(--color_link_shadow);
	
	/* PRINT */
  --print_color_main_text: black;
  --print_color_main_bg: white;
  --print_color_link: royalblue;	
}

.figure {
    --avatar_margin: 25vw;
}

/* latin-ext */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster Regular'), local('Lobster-Regular'),
   url(https://fonts.gstatic.com/s/lobster/v20/MCZn_h27nLxWmTqnbmnb3lKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster Regular'), local('Lobster-Regular'), url(https://fonts.gstatic.com/s/lobster/v20/G6-OYdAAwU5fSlE7MlBvhQLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}
/* --------- */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

/* --------- */

*,
*:before,
*:after,
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: var(--color_footer);
  color: var(--color_main_text);
  font-size: 14px;
  font-size: 4em;
  line-height: 1.25em;
  font-family: 'Open Sans', Arial, sans-serif;
}

a{
    color: var(--color_link);
    text-decoration: none;
}

/* a FOCUS*/

a:focus{
  color: var(--color_link_focus);
}

a:focus .figure{
  border-color: var(--color_link_focus);
}


a:focus figure .figure{
  position:relative;
  top:-.3em;
  box-shadow: 6px .3em 20px 0px var(--color_link_shadow_hover);
}

a:focus figcaption{
  position:relative;
  top:-.3em;
  text-shadow: 6px 6px 3px var(--color_link_shadow),  6px .3em 20px var(--color_link_shadow_hover);
}




/* a HOVER */
a:hover{
  color: var(--color_link_focus);
}

a:hover .figure{
  border-color: var(--color_link_focus);
}


a:hover figure .figure{
  position:relative;
  top:-.3em;
  box-shadow: 6px .3em 20px 0px var(--color_link_shadow_hover);
}

a:hover figcaption{
  position:relative;
  top:-.3em;
  text-shadow: 6px 6px 3px var(--color_link_shadow),  6px .3em 20px var(--color_link_shadow_hover);

}


/* FLEX*/
.container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  /* or inline-flex */
  flex-direction: column;
  flex-wrap: wrap;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-content:space-around;
  background: var(--color_main_bg);
  min-height: 100vh;
}
.item {
  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}
article {
 
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;

  margin: auto;

}
section {
  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
  flex-grow: 1;
  /* default 0 */
  flex-basis: auto;
  /* default auto */
  /*align-self: stretch;*/
  min-height: 100px;
  flex-shrink: 1;
  margin: auto auto 1em auto;
  text-align: center;
}


footer{
  color: var(--color_footer_text);
  background: var(--color_footer);
  width: 100%;
  padding: .5em 1em;
  text-align: center;
  font-size:.85em;
  box-shadow: 0 0 20px 3px var(--color_footer_shadow);
}

footer p:first-of-type{
  font-family: 'Lobster', Arial, cursive;
  font-size: 1.5em;
  padding-bottom: .2em;
}


header.item{
  margin:auto;
  margin-top:1em;
}

h1 {
  font-family: 'Lobster', Arial, cursive;
  text-shadow: 5px 5px 5px var(--color_link_shadow);
}

figure img {
  display:none;
}


.figure {
   border-radius: 100%;
   -moz-border-radius: 100%;
   -webkit-border-radius: 100%;
   border: .3rem solid var(--color_figure_border);
   box-shadow: inset 0 0 20px 0px #dedede;
   min-height: calc(100vw - var(--avatar_margin));
   max-width: 100%;
   min-width: calc(100vw - var(--avatar_margin));
}

figcaption{
  font-size: 1.3em;
  line-height: 1.5em;
  text-shadow: 6px 6px 3px var(--color_link_shadow);
  font-weight:bold;
}

section .figure{
  background: white no-repeat;

}


section#Elena .figure{
    background-image: url('Elena_Lerici.jpg');
    background-position: 14% 9%;
    background-size: 110%;
 }

section#Barbara .figure{
  background-image: url('BarbaraLerici.jpg');
  background-size: 118%;
  background-position: 50% 20%;
}


section#Claudio .figure{

  background: #b3b79e;
  background: -moz-linear-gradient(90deg, #b3b79e 0%, #adae94 100%);
  background: -webkit-linear-gradient(90deg, #b3b79e 0%, #adae94 100%);
  background: linear-gradient(90deg, #b3b79e 0%, #adae94 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b3b79e",endColorstr="#afb49f",GradientType=1);
}

section#Claudio .figure_bg{
   height: calc(100vw - var(--avatar_margin) - .2em);
       
  box-shadow: inset 0 0 20px 0px #dedede;
   border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;

  background-image: url('ClaudioLerici_v2.jpg');
  background-repeat: no-repeat;
  background-size: contain;  
  background-position: 49% 40%;

}

nav {
  display: none;
}
nav ul {
  list-style: none;
}
aside {
  margin: 1em auto;
  text-align: center;
}

/* --- MEDIA --- */

@media only screen and (min-device-width: 768px){
   body {  font-size: 14px;  font-size: 2em;  }
    aside {  width: 100%; }
    .container { flex-direction:column; }
    article.item{ flex-grow: 2; }
    article{
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -moz-flex;
        display: -webkit-flex;
        display: flex;
        flex-wrap:wrap;
        flex-direction:row;
        align-items: stretch;
        justify-content: flex-start;
    }
    footer{ align-self: flex-end; }
    section{  margin: 0 auto; }
    section .figure{
        min-width: calc(100vw / 3 * 1.5 - var(--avatar_margin));
        max-width: calc(100vw / 3 * 1.5 - var(--avatar_margin));
        min-height: calc(100vw / 3  * 1.5 - var(--avatar_margin));
        margin: 0 auto;
    }
    section#Claudio .figure_bg {
        height:  calc(100vw / 3 * 1.5 - var(--avatar_margin) - .3em);
    }
   
}


/* MEDIA PRINT */

@media print {

body {
  background-color: var(--print_color_main_bg);
  color: var(--print_color_main_text);
  font-size: 14px;
  font-size: 1em;
  line-height: 1.25em;
  font-family: 'Open Sans', Arial, sans-serif;
}


a{
    color: var(--print_color_link);
}

/* a FOCUS*/

a:focus{
  color: var(--print_color_link);
}

a:focus .figure{
  border-color: var(--print_color_link);
}


a:focus figure .figure{
  position:relative;
  top:0;
  box-shadow:none;
}

a:focus figcaption{
  position:relative;
  top:0;
  text-shadow: none;
}

/* a HOVER */
a:hover{
  color: var(--print_color_link);
}

a:hover .figure{
  border-color: var(--print_color_link);
}


a:hover figure .figure{
  position:relative;
  top:0;
  box-shadow: none;
  }

a:hover figcaption{
  position:relative;
  top:0;
  text-shadow:none;

}


/* FLEX*/
.container {
  display: block;
  background: var(--print_color_main_bg);
  height: initial;
  text-align:left;
  min-height:fit-content;

}
.item {}
article {
  display: block;
 
}
section {
    display:block;
  margin: auto auto 1em auto;
  text-align: left;
}


footer{
  color: inherit;
  background: var(--print_color_main_bg);
  box-shadow: none;
  text-align:left;
}

footer p{
  display:inline-block;
  margin-right: 1em;
}
	
	footer p:last-child::after{
		content: attr(title);
		margin-left: 1em;
	}	


header.item{}

h1 {
  font-family: 'Lobster', Arial, cursive;
  text-shadow: none;
}

figure img {
  display:inline-block;
  max-width: 100px; 
  width:100px;
  border:1px solid var(--print_color_main_text);
  border-radius: none;
   -moz-border-radius: none;
   -webkit-border-radius: none;
}


.figure {
   border-radius: 100%;
   -moz-border-radius: 100%;
   -webkit-border-radius: 100%;
   border:none;
   box-shadow: none;
   min-height: auto;
   max-width: 100px;
   min-width: 100px;
   width:100px;
   margin: 1em;
}

figcaption{
  text-shadow: none;
  display:  inline-block;
  vertical-align: top;
  transform: translateY(50%);
}
figcaption::after{
 content:attr(data-url);
  font-weight:normal;
  color: var(--print_color_main_text);
  font-size: .85em;
  display:  block;
}

section .figure{
  background: white no-repeat;
  margin: 1em;
  display:inline-block;

}

	section#Claudio .figure_bg{
	   height: 100px;
	   background: none;
	   text-align:  center;
	}

	section#Claudio .figure {
    	background: none;
	}

	section#Claudio img {
			height: 100px;
			width: auto;
	}


aside {
  margin: 2em auto;
  text-align: inherit;
}
}

@media only screen and
(orientation : landscape)
{
     body {  font-size: 14px;  font-size: 2em;  }
    aside {  width: 100%; }
    .container { flex-direction:column; }
    article.item{ flex-grow: 2; }
    article{
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -moz-flex;
        display: -webkit-flex;
        display: flex;
        flex-wrap:wrap;
        flex-direction:row;
        align-items: stretch;
        justify-content: flex-start;
    }
    footer{ align-self: flex-end; }
    section{  margin: 0 auto; }
    section .figure{
        min-width: calc(100vw / 3 * 1.5 - var(--avatar_margin));
        max-width: calc(100vw / 3 * 1.5 - var(--avatar_margin));
        min-height: calc(100vw / 3  * 1.5 - var(--avatar_margin));
        margin: 0 auto;
    }
    section#Claudio .figure_bg {
        height:  calc(100vw / 3 * 1.5 - var(--avatar_margin) - .3em);
    }
}