/* Stili predefiniti */

*
{
 margin: 0;
 padding: 0;
 font-family: "Arial", "Helvetica", sans-serif;
 box-sizing: border-box; 
}

html, body
{
 width: 100%;
 height: 100%;
}

/* Tag */

abbr[title]
{
cursor: help;
text-decoration:dotted;
text-decoration-color: blue;
text-decoration-line: underline;
}

hr
{
  width: 100%;
  margin-top: -20px;
}

pre,code
{
 margin: 0 auto; 
 background-color: #000;
 color: #fff;
 font-size: 20px;
 white-space: pre-wrap;
 word-wrap: break-word;
}

blockquote
{
 font-size: 20px; 
}

/* Fonts */

h1,h2,h3{margin-bottom: 20px;}
h4,h5,h6,span, p{margin-bottom: 10px;}

h1
{
 font-size: 40px;
}

h2
{
font-weight: 200;
}

p
{ 
 font-size: 20px;  
}

a
{
 font-size: 20px;  
}

li
{
 font-size: 18px;  
}


/* Header */

.header
{
 background-color: #000;
 height: 50px;
}

/* Top Navigation */

.header__nav a
{
text-align: center;
padding: 12px 18px;
text-decoration: none;
color: #fff;
border: 1px solid #ddd;
}

.header__nav a:hover 
{
background-color: gainsboro;
color: #000;
}

.header__nav--active
{
background-color: cadetblue;
color: #fff;
}


/* Main */

/* Impostando il main in posizione relative e l'altezza minima al 100%, body e main hanno la stessa altezza */

main
{
  background-color: #fff;
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  }


/* Cover Pagina Home */
.cover
{
position: relative;
}

.cover__header
{        
background-image: url("../img/occhiali.jpeg");
background-position: center center;
background-size: cover; 
display: flex;
flex-direction: column;
min-height: 400px;
} 

.cover__header input{   
 width: 150px;
 height: 50px;  
 }

.cover__filter
{
 position: absolute;   
 background-color: #000;
 width: 100%;
 height: 400px;
 z-index: 0;
 opacity: 0.5;   
}

.cover__text-overlay
{  
margin: auto;
text-align: center;
position: relative;
z-index: 1;
}

/*Text Overlay Cover Fonts */
.cover__text-overlay > h1, .cover__text-overlay > h2, .cover__text-overlay > p 
{
color: #fff;
font-weight: bold;   
}

.cover__text-overlay > h2 
{
margin-top: 20px;
width: 100%;
}

.cover__btn
{
 width: 100px;
 height: 30px;
}


/*Cards Pagina Home */

.card__header h1
{
 text-align: center;  
}

.card__header > h1, .card__header > p
{
color: #000;
}


.flexcard
{
 width: 100%;
 height: auto;
 display: flex;
}

.flexcard__card
{
  padding: 14px 16px; 
  flex: 1;  
}

.flexcard__card img
{
width: 100%;
height: auto;
}

  /* Main Content */

.main__content
{
background-color: #ddd;
flex: 1; 
padding: 1em 1em 10em;
}

.main__content > ul
{
margin-top: 10px;   
list-style-position: inside;
list-style-type: none;   
}

.main__content > ul > li
{
padding: 5px 5px;   
}


/*Title*/

.main__header h1
{
 text-align: center;
 padding: 25px;  
}

/* Link Tutorial */
.tutorial__nav h2
{
margin-top: 10px;  
text-align: center; 
}

.tutorial__nav a
{ 
display: block;
text-align: center;
padding: 10x 10px;
color: #000;
} 

/* Tutorial Content*/

.tutorial__content
{
 display: flex; 
 width: 100%;
 height: 100%;
}

.tutorial__img
{
 margin: 10px;
 width: 200px;
 height: 200px;
}

.tutorial__img > a > img
{
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-size: cover;
}

.tutorial__description
{
 flex: 1; 
}

.tutorial__img--responsive
{
 width: 100%;
 height: auto;
}


.tutorial__description > ol
{
margin-top: 10px;   
list-style-position: inside;   
}

.tutorial__description > ol > li
{
padding: 5px 5px;   
}

.tutorial__description > ul
{
  list-style-type: none;
}

.tutorial__description > ul > li
{
 padding: 5px; 
}

.tutorial__description h2
{
margin-top: 10px;  
text-align: center; 
}


/* Change Page */

.changePage
{
position: absolute;  
bottom: 50px;
text-align: center;
display: flex;
align-items: center;
padding: 14px 16px; 
width: 100%; 
height: 100px;
}

.changePage__link, .changePage__link--hidden, .changePage_span
{
text-decoration: none;
color : #000;
padding: 14px 16px;
margin-bottom: 10px;
}

.changePage__link
{
flex: 1;
}

.changePage_span
{
flex: 1;   
font-size: 20px;
}

.changePage__link--hidden
{
flex: 1;
color: #ddd;
}

/* Portfolio */
.portfolio > ul
{
  list-style-type: none;
}  

.portfolio > ul > li
{
padding: 1em 1em 2.5em;
}

/* Footer */

footer
{   
position:absolute;
bottom: 0;
clear: both;
width: 100%;
height: 50px;
background-color: #000;
}

footer > h2
{
color: #fff;
text-align: center;
} 

/* Banner Cookie */
.banner__cookie
{
 position: fixed;
 bottom: 0; 
 display: flex; 
 flex-direction: column;
 z-index: 999;
 color: #fff;
 background-color: #000; 
}

.banner__cookie > .button__cookie
{
 flex: 1;
 text-align: center; 
}

.button__cookie > button
{
 margin: 20px; 
 width: 100px;
 height: 30px;
}

.button__cookie > a
{
 color: #fff;  
}

/* Visualizzazione per Smartphone */
@media screen and (max-width: 767px)
{

/* Rendere Abbr visibile sul mobile */

abbr[title]:focus:after, abbr[title]:active:after
{
content: " ("attr(title) ")";
}

pre,code
{ 
 font-size: 14px; 
}

/* Top Navigation */  

.header
{
 height: 50px;  
}

.header__nav a
{
display: none;
} 

/* Top Navigation Responsive */  

.header__nav--responsive a
{
display: block;
float: none;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: #fff;
border: 1px solid #ddd;
}

/* Bottone Responsive */

.header__responsive
{
float: right;
position: absolute;
right: 0;
display: block;
width: 10%;
color: #fff;
font-size: 30px;
} 


/*Cards Pagina Home */

.flexcard
{
flex-wrap: wrap;
flex-direction: column;
} 




/* Tutorial Content */

.tutorial__content
{
display: flex; 
flex-direction: column;
width: 100%;
height: 100%;
}

.tutorial__img
{
width: 100%;
height: auto;
}

}

/*Visualizzazione per Tablet, Notebook e PC Fisso */
@media screen and (min-width: 768px) 
{
 
/* Header */
.header
{
 padding: 14px 0;
 height: 50px;
}

/* Bottone Responsive */  

.header__responsive
{
display: none; 
}


}