/*   https://codepen.io/Shven/pen/JjJMwo  
/fotografia/personale/gatta-Cairina_2009/image/_PD14336.JPG
* /


/* reset */
* {   margin: 0;  padding: 0   ;  }

#wrapper  {
  position: absolute ;
  width: 100% ;
  height: 100% ;
  overflow: auto;  }  /*  hidden; */

label {
  cursor: pointer; }
    &:focus {
    outline: none;   }
    
.menu {  
  font: 14px 'Comic Sans MS', sans-serif;
	font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  /*  background: #fff;  */
  background: linear-gradient(rgba(0,0,104,0.8),rgba(0,100,0, 0.8)); 
  width: 200px;
  height:  100%; /* auto;  */
  transform: translate3d(-200px, 0, 0);
  transition: transform 0.5s  ; }
      
  label.menu-toggle  {  
    position: absolute ;   
    right: -100px;   /*  posizione dello hamburgher  */
    width: 60px;
    height: 60px;
    line-height: 0px;    
    display: block;
    padding: 0;
    text-indent: -9999px ;
    background: #fff url(/image/292272.png) 50% 50% / 25px 25px no-repeat ;  /*  hamburgher  */
  }
  ul
    li
      > label { 
	    position: right ; 
        background:  url(/image/568108.png) 95% 50% / 16px 16px no-repeat ;  /*  freccia  */  }  
		 
      a, label {
        display: block; 
        text-align: left;  /*  menu laterale  */
        padding: 0 20px;
        line-height: 40px;
        text-decoration: none;
        color: #ffffff;}   /*  colore carattere del menu laterale  */ 
		
        label:hover { color: red; font-size: 18px;  }

/* hide inputs */          
.menu-checkbox {  display: none;  }

/* hide navigation icon for sublabels */    
.menu .menu label.menu-toggle {
   background: none; /* */ }
    
/* fade in checked menu */    
.menu-checkbox:checked + .menu {
  transform: translate3d(0, 0, 0); }

.giallo:hover {
color: yellow; font-size: 18px;
}    
    
/* for show */
html, body {
  height: 100%; 
  font: 14px 'Comic Sans MS', sans-serif;
  }

body {
  background: url(/fotografia/personale/gatta-Cairina_2009/image/_PD14336.JPG) 50% 50% / cover; }

p {  margin-bottom: 15px; }
  
pdata { /* margin-bottom: 15px;  */
       text-align: left;  /*  data laterale  */ 
      font-size: 14px;
      font-weight: normal;
      padding: 10px;
      margin: 10px;
      display: inline-block;
		 }

#info {
  display: table;
  background: rgba(50,50,50,0.4);
  height: 50%;
  width: 50% ; 
  
  margin: 0 auto;
 /* margin-left: auto; 
  margin-right: auto; */
  }
  
  #info-content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;  /*  center;   */
    /*  text-transform: uppercase; */
    color: #fff;
    font-size: 12px; }
	
	
    h1  {    
      color: #fff;
      border: 3px solid #fff;
      text-align: left;
      background: rgba(0,0,0,0.1);
      font-size: 16px;
      font-weight: normal;
      padding: 10px;
      margin: 10px;
      display: inline-block; }      
	  
 h1data  {    
      color: #fff;
      border: 3px solid #fff;
      text-align: left;
      background: rgba(0,0,0,0.1);
      font-size: 12px;
      font-weight: normal;
	  /*  white-space: nowrap;  */
      padding: 5%;
      margin: 10%;
      display: block; }   
	  
      strong {
        display: block;
        font-size: 26px ;
    }
	  strongdata {
        display: block;
        font-size: 18px ;
    }