/* i font ovvero caratteri del sito da caricar */
@font-face {
    font-family: 'OpenSansCondBold';
    src: url('OpenSansCondBold.eot');
    src: local('OpenSansCondBold'), url('OpenSansCondBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;

}    
@font-face {
    font-family: 'OpenSans-CondLight';
    src: url('OpenSans-CondLight.eot');
    src: local('OpenSans-CondLight'), url('OpenSans-CondLight.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}    
@font-face {
    font-family: 'TrajanProBold';
    src: url('TrajanProBold.eot');
    src: local('TrajanProBold'), url('TrajanProBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
/* i vari stili di testo */
body{  
  padding: 0px;
  cursor: default;
  font-family:'OpenSans-CondLight', sans-serif;
  color: #333;
}
p{
  font-family:'OpenSans-CondLight', sans-serif;
    font-weight: normal;
  font-size:14px;

}
h1{
  font-family: "TrajanProBold", sans-serif;
  /*text-transform: uppercase;*/
  font-size: 16px;
  color: #000;
  line-height: 90%;
}
h2{
  font-family: "TrajanProBold", sans-serif;
  /*text-transform: uppercase;*/
  font-size: 9px;
  color: #000;
  line-height: 90%;
}
h3{
  font-family: "TrajanProBold", sans-serif;
  /*text-transform: uppercase;*/
  font-size: 8px;
  color: #000;
}
h4{
  font-family: "TrajanProBold", sans-serif;
  /*text-transform: uppercase;*/
  font-size: 16px;
  color: #000;
  line-height: 90%;
}
h5{
  font-family:'OpenSans-CondLight', sans-serif;
  font-size:14px;
    font-weight: normal;
}
h6{
  font-family: "TrajanProBold", sans-serif;
  /*text-transform: uppercase;*/
  font-size: 16px;
  color: #000;
  line-height: 5%;
}
b{
  color: #555;
}
a{
  text-decoration: none;
  color: #242424;
  font-weight: bold;
}
a:hover{text-decoration: underline;
  color: #000000; }

/* icone laterali alte per lingua e carrello con Tooltip o popup, trasparenza on hover */

.bottoni-laterali {
	width:48px;}
.bottoni-laterali:hover {
    filter: brightness(50%); /* For IE8 and earlier */
}
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 0px;
}
/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #bdcbaa;
    color: #000000;
    padding: 5px 2px;
    border-radius: 6px;
    font-family: 'OpenSans-CondLight', sans-serif;
    /* Position the tooltip text */
    position: absolute;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}
.tooltip-left {
  top: -5px;
  bottom:auto;
  right: 128%;  
}
.tooltip-left::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #bdcbaa;
}
.cart-bottone-laterale {
                    width: 48px;
                    height: 48px;
    background: none !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;
    padding: 0 0 0 0 !important;
    border: none !important;
    text-decoration: none;
    color:  none !important;
    cursor: pointer;
    background-image: url(elementi-grafici-template/green-cart.png) !important;
	background-repeat: no-repeat;
	background-position: left;
	padding-left: 0px;
}
.cart-bottone-laterale:hover {
    filter: brightness(50%); /* For IE8 and earlier */
	}

/*simple max-width query, per schermi di casa piccoli per non far si che la div della descrizione del CD sia troppo grande di altezza e quindi nasconda le cose (div non scrollable!) */
@media screen and ( max-height: 800px ){
.nasconditi-se-schermo-piccolo {display:none;}
 h1{font-size:14px;}
}

 /* Regole per display ad alta densità (smartphone o retina), che aumentano il font */
@media 
 only screen and (min--moz-device-pixel-ratio: 1.3),
 only screen and (-o-min-device-pixel-ratio: 2.6/2),
 only screen and (-webkit-min-device-pixel-ratio: 1.3),
 only screen and (min-device-pixel-ratio: 1.3),
 only screen and (min-resolution: 1.3dppx),
 only screen and (min-resolution: 192dpi) { 
 @media only screen and (max-width: 1200px) {
 h4, h6{font-size: 140%;}
 h1{font-size: 180%;}
 p, h3, input, .close{font-size: 180%;}
 h2, h5{font-size: 150%;}
 img.closer-x {width: 32px; margin: 16px 0px 0px 0px;}
.nasconditi-se-schermo-piccolo {display:none;}
}}

/* barra superiore fissa */
#barra_superiore_fissa {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 12%;
    min-height: 70px;
    max-height: 70px;
    z-index: 1;
}

#barra_superiore_fissa a {
  color: white;  
}

#barra_superiore_fissa a[href="#content_container"]:focus {
  display: block;
  width: 100%;
  background-color: #000;
  text-align: center;
}

#barra_superiore_fissa h1 {
  height: 100%;
  margin: 0;
}
#barra_superiore_fissa h1 a {
  display: block;
  background-color: #bdcbaa;  
  height: 100%;
}

#barra_superiore_fissa h1 a:focus {
  background-color: #fff;
  outline: none;
}
#barra_superiore_fissa h1 a:focus #logo-sopra {
  background-image: url(elementi-grafici-template/logo-live.png);
}

#logo-sopra{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-position: center;
  background-image: url(elementi-grafici-template/logo-live.png);
  background-repeat: no-repeat;
}
/* fine barra superiore fissa */

/* bottoni dei carrelli */
input[type="submit"] {
  background: #cad9b6;
  background-image: -webkit-linear-gradient(top, #cad9b6, #d7e6c1);
  background-image: -moz-linear-gradient(top, #cad9b6, #d7e6c1);
  background-image: -ms-linear-gradient(top, #cad9b6, #d7e6c1);
  background-image: -o-linear-gradient(top, #cad9b6, #d7e6c1);
  background-image: linear-gradient(to bottom, #cad9b6, #d7e6c1);
  -webkit-border-radius: 10;
  -moz-border-radius: 10;
  border-radius: 10px;
  padding: 4px 4px 4px 4px;
  border: solid #77806b 2px;
  text-decoration: none;
    color: #242424;
    font-weight: bold;
    font-family: 'OpenSans-CondLight', sans-serif;
    cursor: pointer;
}
input[type="submit"]:hover {
  background: #bdcbaa;
  background-image: -webkit-linear-gradient(top, #bdcbaa, #cad9b6);
  background-image: -moz-linear-gradient(top, #bdcbaa, #cad9b6);
  background-image: -ms-linear-gradient(top, #bdcbaa, #cad9b6);
  background-image: -o-linear-gradient(top, #bdcbaa, #cad9b6);
  background-image: linear-gradient(to bottom, #bdcbaa, #cad9b6);
    color: #000000;
  text-decoration: none;
}
fieldset{
	padding-top: 5px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

/*nur für die einzelne CD*/

/* colonnine centrali con l'ombreggiatura */
#wrap-colonna-centrale {
	width: 600px; 
	margin: 20px auto; 
	padding: 20px; 
	background: #bdcbaa; 
	-moz-box-shadow: 0 0 20px black; 
	-webkit-box-shadow: 0 0 20px black; 
	box-shadow: 0 0 20px black; 
}
immagine-da-popolare-di-scritte {
  display: block;
  position: relative;
  float: left;
  overflow: hidden;
/*  margin: 10px 10px 10px 10px; */
}
scritte-che-popolano-immagini {
  position: absolute;
  background: black;
  background: rgba(189,203,170,0.75);
  color: #000;
  padding: 10px 20px;
  opacity: 0;
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
  -o-transition:      all 0.6s ease;
}
immagine-da-popolare-di-scritte:hover scritte-che-popolano-immagini {
  opacity: 1;
}
immagine-da-popolare-di-scritte:before {
  content: "?";
  position: absolute;
  font-weight: 800;
  background: black;
  background: rgba(189,203,170,0.75);
  text-shadow: 0 0 5px white;
  color: black;
  width: 24px;
  height: 24px;
  -webkit-border-radius: 12px;
  -moz-border-radius:    12px;
  border-radius:         12px;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  -moz-transition: all 0.6s ease;
  opacity: 0.75;
}
immagine-da-popolare-di-scritte:hover:before {
  opacity: 0;
}

.cap-bot:before { bottom: 20px; left: 15px; }
.cap-bot scritte-che-popolano-immagini { left: 0; bottom: -30%;}
.cap-bot:hover scritte-che-popolano-immagini { bottom: 0; }
.cap-bot:hover { font-weight:normal!important; }

/*nur für die Hauptseite Homepage*/

/* giochino di hover per le immagini delle copertine dei CD */
.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
   -webkit-box-shadow: 0 28px 16px -26px #888;
   -moz-box-shadow: 0 28px 16px -26px #888;
   box-shadow: 0 28px 16px -26px #888;
}
.middle {
  transition: .5s ease;
  opacity: 1;
  position: relative;
  top: 0%;
  left: 0%;
    -ms-transform: translate(0px, 0px); /* IE 9 */
    -webkit-transform: translate(0px, 0px); /* Safari */
    transform: translate(0px, 0px);
}
.col_big:hover .image,
.col_small:hover .image {
    filter: brightness(50%);
}
.col_big:hover .middle,
.col_small:hover .middle {
  opacity: 0.5;
}
.span_big_of_12:hover .image,
.span_small_of_12:hover .image {
    filter: brightness(50%);
}
.span_big_of_12:hover .middle,
.span_small_of_12:hover .middle {
  opacity: 0.5;
}
.vai-a-capo-senno-fai-casino {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

/* altezza fissa per la cornice del titolo e altre caratteristiche */

.titoli-sotto-immagine-cd {
  background-color: #bdcbaa;
  color: black;
  font-size: 16px;
  padding: 5px 10px;
}
.titoli-sotto-immagine-cd-tabella {
  display: table;
}
.titoli-sotto-immagine-cd-cella {
    display: table-cell;
    vertical-align: middle;
    height:75px;
}
.titoli-small-sotto-immagine-cd {
  background-color: #bdcbaa;
  color: black;
  font-size: 8px;
  padding: 3px 6px;
}
.titoli-small-sotto-immagine-cd-tabella {
  display: table;
}
.titoli-small-sotto-immagine-cd-cella {
    display: table-cell;
    vertical-align: middle;
    height:120px;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

/* preparazione per le 12 div responsive e fluid */

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

.col_small{
	display: block;
	float:left;
	margin: 2.70% 0% 2.70% 2.70%;
}
.col:first-child { margin-left: 0; }
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
.span_small_of_12 {
  	width: 2.70%;
}
.primo-margine-a-sinistra-small {
  	width: 2.70%;
}

/*  rimodella per star bene con la versione "big"  */
@media only screen and (max-width: 4621px) {
.col_small {
	margin: 2.70% 0% 2.70% 4%;
}
.span_small_of_12 {
  	width: 4%;
}
.primo-margine-a-sinistra-small {
  	width: 4%;
}
}

/*  passa da 12 a 9 colonne  */
@media only screen and (max-width: 3125px) {
.col_small{
	margin: 2.70% 0% 2.70% 5.26%;
}
.span_small_of_12 {
  	width: 5.26%;
}
.primo-margine-a-sinistra-small {
  	width: 5.26%;
}
}

/*  passa da 9 a 7 colonne  */
@media only screen and (max-width: 2307px) {
.col_small{
	margin: 2.70% 0% 2.70% 6.25%;
}
.span_small_of_12 {
  	width: 7.14%;
}
.primo-margine-a-sinistra-small {
  	width: 6.25%;
}
}

/*  passa da 7 a 6 colonne  */
@media only screen and (max-width: 2150px) {
.col_small{
	margin: 2.70% 0% 2.70% 6.25%;
}
.span_small_of_12 {
  	width: 9.37%;
}
.primo-margine-a-sinistra-small {
  	width: 6.25%;
}
}

/*  passa da 7 a 6 colonne  */
@media only screen and (max-width: 1950px) {
.col_small{
	margin: 2.70% 0% 2.70% 7.69%;
}
.span_small_of_12 {
  	width: 7.70%;
}
.primo-margine-a-sinistra-small {
  	width: 7.69%;
}
}

/*  passa da 6 a 4 colonne  */
@media only screen and (max-width: 1500px) {
.col_small{
	margin: 2.70% 0% 2.70% 10%;
}
.span_small_of_12 {
  	width: 12.5%;
}
.primo-margine-a-sinistra-small {
  	width: 10%;
}
}

/*  passa da 4 a 3 colonne  */
@media only screen and (max-width: 1050px) {
.col_small{
	margin: 2.70% 0% 2.70% 14.28%;
}
.span_small_of_12 {
  	width: 14.29%;
}
.primo-margine-a-sinistra-small {
  	width: 14,28%;
}
}

/*  passa da 3 a 2 colonne  */
@media only screen and (max-width: 875px) {
.col_small{
	margin: 2.70% 0% 2.70% 14.28%;
}
.span_small_of_12 {
  	width: 28.58%;
}
.primo-margine-a-sinistra-small {
  	width: 14,28%;
}
}

/*  rimani a 2 colonne  */
@media only screen and (max-width: 630px) {
.col_small{
	margin: 2.70% 0% 2.70% 8.33%;
}
.span_small_of_12 {
  	width: 37.5%;
}
.primo-margine-a-sinistra-small {
  	width: 8.33%;
}
}

 /* Regole per display ad alta densità (smartphone o retina) */
@media 
 only screen and (min--moz-device-pixel-ratio: 1.3),
 only screen and (-o-min-device-pixel-ratio: 2.6/2),
 only screen and (-webkit-min-device-pixel-ratio: 1.3),
 only screen and (min-device-pixel-ratio: 1.3),
 only screen and (min-resolution: 1.3dppx),
 only screen and (min-resolution: 192dpi) {
 @media only screen and (max-width: 1200px) {
.col_small{
	margin: 2.70% 0% 2.70% 15%;
}
.span_small_of_12 {
  	width: 27.5%;
}
.primo-margine-a-sinistra-small {
  	width: 15%;
}
.modalDialog > div {
    width: 550px!important;}
}}

.col_big {
	display: block;
	float:left;
	margin: 4% 0% 4% 2.70%;
}
.col_big:first-child { margin-left: 0; }
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
.span_big_of_12 {
  	width: 5.41%;
}
.primo-margine-a-sinistra-big {
  	width: 2.70%;
}

/*  passa da 12 a 9 col_colonne in modo che le img siano max 300px  */
@media only screen and (max-width: 4621px) {
.col_big {
	margin: 4% 0% 4% 4.18%;
}
.span_big_of_12 {
  	width: 6.5%;
}
.primo-margine-a-sinistra-big {
  	width: 4.18%;
}
}

/*  passa da 9 a 8 col_colonne  */
@media only screen and (max-width: 3750px) {
.col_big {
	margin: 4% 0% 4% 4%;
}
.span_big_of_12 {
  	width: 8%;
}
.primo-margine-a-sinistra-big {
  	width: 4%;
}
}

/*  passa da 8 a 7 col_colonne */
@media only screen and (max-width: 3125px) {
.col_big {
	margin: 4% 0% 4% 5.26%;
}
.span_big_of_12 {
  	width: 8.27%;
}
.primo-margine-a-sinistra-big {
  	width: 5.26%;
}
}

/*  passa da 7 a 6 col_colonne */
@media only screen and (max-width: 2849px) {
.col_big {
	margin: 4% 0% 4% 5.26%;
}
.span_big_of_12 {
  	width: 10.53%;
}
.primo-margine-a-sinistra-big {
  	width: 5.26%;
}
}

/*  passa da 6 a 5 col_colonne  */
@media only screen and (max-width: 2307px) {
.col_big {
	margin: 4% 0% 4% 6.25%;
}
.span_big_of_12 {
  	width: 13%;
}
.primo-margine-a-sinistra-big {
  	width: 6.25%;
}
}

/*  passa da 5 a 4 col_colonne  */
@media only screen and (max-width: 1950px) {
.col_big {
	margin: 5% 0% 5% 7.69%;
}
.span_big_of_12 {
  	width: 15.38%;
}
.primo-margine-a-sinistra-big {
  	width: 7.69%;
}
}

/*  passa da 4 a 3 col_colonne  */
@media only screen and (max-width: 1500px) {
.col_big {
	margin: 6% 0% 6% 10%;
}
.span_big_of_12 {
  	width: 20%;
}
.primo-margine-a-sinistra-big {
  	width: 10%;
}
}

/*  passa da 3 a 2 col_colonne  */
@media only screen and (max-width: 1050px) {
.col_big {
	margin: 7% 0% 7% 14.28%;
}
.span_big_of_12 {
  	width: 28.57%;
}
.primo-margine-a-sinistra-big {
  	width: 14.28%;
}
}

/*  passa da 2 a 1 col_colonne  */
@media only screen and (max-width: 630px) {
.col_big {
	margin: 8% 0% 8% 25%;
}
.span_big_of_12 {
  	width: 50%;
}
.primo-margine-a-sinistra-big {
  	width: 25%;
}
}

 /* Regole per display ad alta densità (smartphone o retina) */
@media 
 only screen and (min--moz-device-pixel-ratio: 1.3),
 only screen and (-o-min-device-pixel-ratio: 2.6/2),
 only screen and (-webkit-min-device-pixel-ratio: 1.3),
 only screen and (min-device-pixel-ratio: 1.3),
 only screen and (min-resolution: 1.3dppx),
 only screen and (min-resolution: 192dpi) {
 @media only screen and (max-width: 1200px) {
 
.col_big {
	margin: 8% 0% 8% 15%;
}
.span_big_of_12 {
  	width: 70%;
}
.primo-margine-a-sinistra-big {
  	width: 15%;
}
}}

/* box modal dialogo che si apre se si clicca sulle copertine dei CD */
.modalDialog {
    position: fixed;
    /*overflow-y: scroll; servirebbe per far scrollare se la div é troppo lunga ma mi crea una seconda cosetta*/
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.0);
    z-index: 2;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
    cursor: default;
}
.modalDialog > div {
    width: 460px;
    position: relative;
    margin: 10% auto;
    padding: 3px 18px 11px 18px;
    border-radius: 10px;
    background: #bdcbaa;
}
.close {
    float: right;
    margin: -12px -10px 0;
    padding: 10px;
    background: 0;
    border: 0;
    font-size: 18px;
    cursor: pointer;
    font-weight: bold;
}
.close:hover {
    text-decoration: none;
}
a.apri-box-modal:hover{text-decoration: none !important;}
img.closer-x {width: 16px; margin: 16px 0px 0px 0px;}
/* fine box modal dialogo */

/* immagini dei progetti delle schede artisti che sono di 450px width ma sono ridimensionate a 180 se con schermo normale, a 280 con schermo retina */
.progettiwidth {
margin: 10px 10px 10px 10px;
    max-width: 180px!important;
    width: 180px!important;}

/*per evitare che molto testo mi sballi il layout delle tabelline dei progetti */
.progettiheight {
overflow: hidden;
float:left;
height:266px;
min-height:266px;
max-height:266px;
}

/*preview in galleria da downloadare*/
.fotoheight {
overflow: hidden;
float:left;
height:180px;
min-height:180px;
max-height:180px;
}

 /* Regole per display ad alta densità (smartphone o retina) */
@media 
 only screen and (min--moz-device-pixel-ratio: 1.3),
 only screen and (-o-min-device-pixel-ratio: 2.6/2),
 only screen and (-webkit-min-device-pixel-ratio: 1.3),
 only screen and (min-device-pixel-ratio: 1.3),
 only screen and (min-resolution: 1.3dppx),
 only screen and (min-resolution: 192dpi) {
 @media only screen and (max-width: 1200px) {

.progettiwidth {
margin: 10px 10px 10px 10px;
    width: 280px!important;
    max-width: 280px!important;}
.progettiheight {
overflow: hidden;
float:left;
height:418px;
min-height:418px;
max-height:418px;
}
.fotoheight {
overflow: hidden;
float:left;
height:280px;
min-height:280px;
max-height:280px;
}
}}

/* altezza fissa per la cornice del titolo e altre caratteristiche */

.titoli-sotto-immagine-progetti {
/*  background-color: #bdcbaa; */
  color: black;
  font-size: 16px;
/*  padding: 0px 0px; */
}
.titoli-sotto-immagine-progetti-tabella {
  display: table; 
}
.titoli-sotto-immagine-progetti-cella {
    display: table-cell; 
    vertical-align: middle;
}

/* questo e' importantissimo, serve a far capire ad una cornice (div) dove dentro c'e' materiale flottante di calcolare l'altezza del materiale!!!*/
.clearfix:after{
	content: "";
	clear: both;
	display: block;
}

/* questo elemento mi riduce i margini superiori ed inferiori nelle tabelline dei progetti */
#abbassa-margine-misterioso {
  margin: 0px!important;
  line-height: 100%!important;
}

/*testo outlined per il testo sulle foto! */
.fotocontainer {
  position: relative;
  text-align: center;
  color: #bdcbaa;
}
.testo-in-foto {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.bordino-testo-inside-foto
{
    color: #bdcbaa;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
}