﻿.color-db2e54{
	color:#db2e54;
}
.color-f6921e{
	color:#f6921e;
}
.color-2582e8{
	color:#2582e8;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family:'Roboto', sans-serif;
    font-weight:100;
    line-height:1.1;
    color:#fff;
}

h2 {
	text-transform:uppercase;
}

body{
	font-family:'Roboto', sans-serif;
}

.divider {
    border-bottom:1px solid #333;
    color:#fff;
    font-size:30px;
    line-height:1em;
    margin-bottom:1.5em;
}

a:focus, button:focus{
	outline:none;
}

/* HEADER */
.navbar-nav a{
	text-transform:uppercase;
}
.navbar-nav a:focus{
	color:#fff;
}
.navbar-nav a:hover,
.navbar-nav .active a {
    color:#7b7b7b;
}

@media (min-width:10px){
	.navbar-nav a{
		font-size:12px;
	}
}
@media (min-width:768px){
	.navbar-nav a{
		font-size:9px;
	}
}
@media (min-width:992px){
	.navbar-nav a{
		font-size:12px;
	}
}

/* SLIDE */
.slide-link {
	
}
.slide-caption {
	position:absolute;
	color:#fff;
	font-weight:100;
}

.tint {
	background:url(../../imgs/texture.png);
}
#banner{
	opacity:0;
	-webkit-transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
	transition:all 0.5s ease;
}
#banner.active{
	opacity:1;
}

#banner .logo {
	z-index:100;
	position:absolute;
	top:2vh;
	left:2vw;
	width:50vw;
	max-width:220px;
}
#banner .down{
	z-index:100;
	position:absolute;
	-webkit-transform: translate3d(-50%, 0, 0);
	-ms-transform: translate3d(-50%, 0, 0);
	transform: translate3d(-50%, 0, 0);
	font-weight:100;
	line-height:1;
	color:#fff;
}
#banner #button{
	z-index:1000;
	position:absolute;
	top:10px;
	right:10px;
	background-color:transparent;
	border:none;
	color:#fff;
	font-size:20px;
}

#highlights{	
	color:#fff;
}
#highlights .highlight{
	z-index:-1;
	position:absolute;
	opacity:0;
	-webkit-transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
	transition:all 0.5s ease;
}
#highlights .highlight.active{
	z-index:110;
	opacity:1;
}

#highlights .highlight .bg{
	z-index:1;
	position:absolute;
	top:0;
	right:0;
	height:100%;
	width:100%;
	opacity:0.5;
}
#highlights .highlight .bg-magenta{
	background-color:#db2e54;
}
#highlights .highlight .bg-arancione{
	background-color:#f6921e;
}
#highlights .highlight .bg-ciano{
	background-color:#2582e8;
}
#highlights .highlight .bg-trasparente{
	background-color:transparent;
}

#highlights .highlight .content{
	z-index:2;
	position:absolute;
	display:block;
	width:100%;
	top:0;
	left:0;
}
#highlights .highlight .content .col{
	vertical-align:top;
}
#highlights .highlight .content h2{

}
#highlights .highlight .content p{
	margin:0;
	font-weight:300;
	line-height:1.1;
}
#highlights .highlight .content:hover{
	color:#fff;
	text-decoration:none;
}

@media (min-width:10px){
	.slide-caption {
		bottom:140px;
		left:30px;
		font-size:6vw;
	}

	#banner .down{
		left:95%;
		bottom:120px;
		font-size:5vw;
	}
	#banner #button{
		display:none;
	}

	#highlights .highlight{
		top:unset;
		right:unset;
		bottom:0;
		left:0;
		height:120px;
		width:100%;
	}
	#highlights .highlight .content .col{
		display:inline-block;
		float:left;
		width:50%;
		padding:5px;
	}
	#highlights .highlight .content img{
		width:auto;
		max-height:100px;
		margin:0 auto;
	}
	#highlights .highlight .content h2{
		margin:0 0 3px 0;
		font-size:12px;
	}
	#highlights .highlight .content p{
		font-size:10px;
	}
}
@media (min-width:768px){

	#highlights .highlight .content h2{
		margin:10px	  0 3px 0;
		font-size:18px;
	}
	#highlights .highlight .content p{
		font-size:12px;
	}
}
@media (min-width:992px){
	
	#banner #button{
		display:block;
	}
	.slide-caption {
		bottom:40px;
		left:30px;
		font-size:4vw;
	}

	#banner .down{
		left:50%;
		bottom:0px;
		font-size:3vw;
	}

	#highlights .highlight{
		top:0;
		right:0;
		bottom:unset;
		left:unset;
		height:100%;
		width:25%;
	}
	#highlights .highlight .content .col{
		display:block;
		width:100%;
		padding:40px 40px 0 40px;
	}
	#highlights .highlight .content img{
		width:auto;
		max-height:250px;
		margin:0 auto;
	}
	#highlights .highlight .content h2{
		margin:0 0 10px 0;
		font-size:20px;
	}
	#highlights .highlight .content p{
		font-size:16px;
	}
}
@media (min-width:1200px){
	
	#highlights .highlight .content .col{
		display:block;
		width:100%;
		padding:60px 60px 0 60px;
	}
}

/* ARTISTS */
#artists .artist {
	background-color:#2582e8;
}
#others .artist {
	background-color:#db2e54;
}

.artist {
	position:relative;
	padding:0;
}
.artist a{
	cursor:url(../../imgs/cursor.gif), pointer;
}
.artist img{
	position:relative;
	z-index:1;
	-webkit-transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
	transition:all 0.5s ease;
}
.artist:hover img{
	opacity:0.5;
}
.artist .bg{
	z-index:2;
	position:absolute;
	display:block;
	bottom:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#000;
	opacity:0.4;

}
.artist .label{
	z-index:3;
	position:absolute;
	display:block;
	bottom:0;
	left:0;
	width:100%;
	padding:5px;
	text-align:center;
	font-weight:300;
	color:#fff;
}

@media (min-width:10px){
	.artist .label{
		font-size:10px;
	}

}
@media (min-width:768px){
	.artist .label{
		font-size:12px;
	}
}
@media (min-width:992px){
	.artist .label{
		font-size:15px;
	}
}


.carousel-inner {
	margin:40px auto 0 auto;
}
@media (min-width:10px){
	.carousel-inner {
		width:100%;
	}

}
@media (min-width:768px){
	.carousel-inner {
		width:600px;
	}

}

/* CONTACT */

#contact a {
    display:block;
	clear:both;
    font-size:15px;
    width:100%;
	height:36px;
    padding:10px 0;
    line-height:1.1;
    margin:0;
	text-align:center;
	background-color:transparent;
    border-radius:0%;
}
#contact a:hover {
	background-color:#db2e54;
	color:#fff;
}
.contact {
	text-align:center;
}
.contact span {
    display:block;
	clear:both;
    font-size:14px;
    width:100%;
    height:30px;
}

@media (min-width:10px){
	.contact {
		padding:20px 10px;
	}
}
@media (min-width:992px){
	.contact {
		padding:40px 20px;
	}
}

/* FOOTER */
footer i {
    color:#fff;
}
footer a:focus{
	color:#fff;
}
footer a:hover {
	color:#7b7b7b;
}
