html, body{
  font-family: "Courier New", Courier, monospace;
  /*font-size:15px;*/
  -webkit-font-smoothing: subpixel-antialiased!important;
  color: #000000;
  height:100%;
  font-weight: normal;
}

html {
  font-size: 15px; }
  @media screen and (max-width: 1000px) {
    html {
      font-size: 13px; } }
  @media screen and (max-width: 600px) {
    html {
      font-size: 12px; } }
  @media screen and (max-width: 300px) {
    html {
      font-size: 10px; } }
	  
::selection {
  background: #ffbf00;
  color:white;
}

::-moz-selection {
  background: #ffbf00;
  color:white;
}

.container{
  width: 100%;
  height:100%;
  margin-left: 0px ;
  margin-right: 0px ;
  margin-top: 0px;
  background: white; /*white; or image*/
}

.container h1{
  color: #222222;
  text-align: left;
  margin-left: 4%;
  margin-bottom: 2%;
  font-size: 3em;
  display: block;
}

.container ht{
  color: #222222;
  text-align: left;
  font-size: 3em;
  display: block;
}

	  
 /*EVIDENZIA SIDEBAR*/
.home a.home,
.id1 a.id1,
.id2 a.id2,
.grafica a.grafica,
.video a.video,
.partners a.partners,
.bio a.bio,
.contatti a.contatti 
{
  background:#ffbf00;
  color: #333;
}

/*TOPBAR, appare sotto i 500px*/

@media (min-width: 500px) {
.topbar {
    display: none;
  }
}

.topbar{
  position:fixed;
  float: left;
  width:100%;
  height:auto;
  background: #666666;
  z-index: 100; 
}

.topbar ul {
    list-style-type: none;
	float: right;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: none;
}

.topbar li {
    float: left;
	height: 100%;
}

.topbar li a {
    display: block;
    color: #a0a0a0;
    text-align: center;
    padding: 3px;
    text-decoration: none;
}

.topbar li a:hover {
    /*background-color: #111111;*/
	color: #ffbf00;
}

/*SIDEBAR, sparisce sotto i 500px*/

@media (max-width: 500px) {
  .sidebar {
    display: none;
  }
}

.sidebar{
  position:fixed;
  float: left;
  width:15%;
  height:100%;
  margin-top: 0px ;
  background: #666666;
  z-index: 1001;
}

.sidebar ul{
  width: 100%;
  height: 80%;
  float: center;
  background: none;
  list-style: none;
}

.sidebar li a {
  color: #a0a0a0;
  text-align: center;
  margin-left: 0px;
  font-size: 1.2em;
  height: 1.5em;
  display: block;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.sidebar li a.active{
  color: red; /*#333;*/
}

.sidebar li a:hover{
  color: #ffbf00;
}

.sidebar footer {
  float:center;
  background-color: none;
  width: 100%;
  height:auto;
  position: absolute;
  bottom: 0;
}
.sidebar a {
  color: #a0a0a0;
  text-align: center;
  margin-left: 0px;
  font-size: 0.8em;
  height: 1.5em;
  display: block;
  text-decoration: none;
}


/*.puls-back{
  position: relative;
  top: 0px;
  left: 0px;
  width:144px;
  height:40px;
  line-height:40px;
  border:1px solid black;
  color:black;
  display:block;
  cursor:pointer;
  font-size:14px;
  text-align: center;
  letter-spacing:1px;
  background:none;
  text-decoration:none;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -ms-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

.puls-back:hover{
  color:black;
  background: #ffbf00;
  border:1px solid #ffbf00;
}*/

/*-----------------------------CONTENT---------------------------*/

@media (max-width: 500px) {
  .content {
	margin-left:0px;
	padding-top:20% !important;
  }
}

@media (min-width: 500px) {
  .content {
	margin-left:15%;
  }
}

.content{ 
  position: relative;
  margin-right:0px;
  margin-bottom: 40px;
  background: white;
}

.content i{
  font-style:italic;
}

.content b{
  font-weight:700;
}
/*----------------------------HOME IMG------------------------------*/

.home-img {
  position: relative;
  width: 100%;
  height: auto;
  background: none;
  float: left;
}

.img2{
  opacity: 0.5;
}

.title{
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translate(0%, -50%);
  /*background-color: black;
  color: white;*/
}

.title ht{
  text-align: center;
  font-size: 4em;
  color: #000000;
}

.title p-title{
  text-align: center;
  font-size: 1em;
}

/*----------------------------SEPARATORE------------------------*/

.separatore{
  width:96%;
  height:0.2em;
  float: left;
  padding-left:4%;
  padding-top: 4%;
  background: none;
  margin: auto !important;    
}

.separatore barra{
  display: block;  
  width:95%;
  height: 0.2em;
  background: #ffbf00;
}   

/*----------------------------MUSIC------------------------------*/

.box-music {
  width: 100%;
  background: none;
  float: left;
  margin-left: 0%;
  margin-top: 0%;
  margin-bottom: 4%;
}

.box-video {
  width:90%;
  height: auto;
  float: left;
  padding-left: 4%;
  padding-top: 1%;
  background: none;
  margin: auto !important;
  margin-bottom: 1%;
  margin-left: 4%;
  margin-top: 20%;
}

.box-video t {
  font-size: 1.5em;
  text-align: left;
  color: #000000;
  margin-bottom: 0.5em;
}

.box-video p {
  font-size: 1em;
  text-align: left;
  color: #000000;
  margin-bottom: 0.5em;
}

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   height: 80%;
   left: 0%;
   position: absolute;
   top: 0;
   width: 80%;
}


@media screen and (max-width: 400px) {
  .box-album {
    width: 90%;
	margin-left: 4%;
	margin-top: 10%;
	margin-bottom: 2%;
  }
}
@media screen and (min-width: 400px) and (max-width: 800px) {
  .box-album {
    width: 42.5%;
	margin-left: 4%;
	margin-top: 2%;
	margin-bottom: 2%;
	min-height: 270px;
  }
}
@media screen and (min-width: 800px) and (max-width: 1000px) {
  .box-album {
    width: 26.6%;
	margin-left: 4%;
	margin-top: 2%;
	margin-bottom: 2%;
	min-height: 270px;
  }
}
@media screen and (min-width: 1000px) {
  .box-album {
    width: 19.7%;
	margin-left: 4%;
	margin-top: 2%;
	margin-bottom: 2%;
	min-height: 270px;
  }
}

.box-album {
  float: left;
}

.box-album h1 {
  font-size: 1.1em;
  text-align: center;
  color: #000000;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}

.box-album p {
  font-size: 0.9em;
  text-align: center;
  color: #555555;
}

.box-album:hover .cover {
  filter: alpha(opacity=50);
  opacity: 0.8;
  -webkit-transition: opacity 0.1s ease-in-out;
  -moz-transition: opacity 0.1s ease-in-out;
  -ms-transition: opacity 0.1s ease-in-out;
  -o-transition: opacity 0.1s ease-in-out;
  transition: opacity 0.1s ease-in-out;
}

.cover {
  border-radius: 3%;
  margin-bottom: 0.7em;
}


/*----------------------------------------SERVICES------------------------------*/

.box-services {
  width:96%;
  height: auto;
  float: left;
  padding-left: 4%;
  background: green;
  margin: auto !important;
  margin-bottom: 40px;
}

/*----------------------------------------BIO------------------------------*/

.box-bio {
  width:100%;
  height: auto;
  float: left;
  background: blue;
  margin: auto !important;
  margin-bottom: 40px;
}

.box-bio .bio-pic{
  position: relative;
  width:130px;
  height:236px;
  background: white;
  float:left;
}

.box-bio .bio-text {
  position: relative;
  margin-bottom: 40px;
  width:550px;
  height:auto;
  background: white;
  margin-right: 0px;
  font-weight:200;
  font-size:14px;
  text-align: left;
  float:right;
}

.v-descrizione .p-descrizione .s-descrizione .bio-descrizione b{
  font-weight:700;
}

/*----------------------------------------CONTACTS------------------------------*/

.box-contacts {
  width:100%;
  height: auto;
  float: left;
  background: red;
  margin: auto !important;
  margin-bottom: 40px;
}
/*
.puls{
  position: absolute;
  bottom: 0px;
  right: 0px;
  width:128px;
  height:30px;
  line-height:30px;
  border:1px solid black;
  color:black;
  display:block;
  cursor:pointer;
  font-size:14px;
  text-align: center;
  letter-spacing:1px;
  background:none;
  text-decoration:none;
  -webkit-transition: all 0.6s ease-in;
  -moz-transition: all 0.6s ease-in;
  -ms-transition: all 0.6s ease-in;
  -o-transition: all 0.6s ease-in;
  transition: all 0.6s ease-in;
}

.puls:hover{
  color:black;
  background: #ffbf00;
  border:1px solid #ffbf00;
}*/