:root {
  --header-height: 65px;
  --yellow: #FFF000;
}

* {
	font-family: "ApfelGrotezk";
}

body {
	padding-top: var(--header-height);
}

p {
	font-size: 24px;
	line-height: 30px;
}

h1 {
	font-size: 40px;
	line-height: 45px;
}

@media (max-width: 768px) {

	body {
		padding-top: var(--header-height);
	}

	h1 {
		font-size: 20px;
		line-height: 25px;
	}

	p {
		font-size: 20px;
		line-height: 25px;
	}

}

* {
	cursor: url(../img/icons/ico-puntatore-default.png), auto !important;
}

a {
	cursor: url(../img/icons/ico-puntatore-over.png), pointer !important;
}

/****** NAVBAR ******/

.navbar {
	font-family: "ApfelGrotezk";
	border-bottom: 2px solid black;
	padding: 0 0.5rem;
}

.navbar-toggler {
	border: none;
	outline: 0 !important;
	color: #000;
}

.navbar-brand {
	height: var(--header-height);
	font-size: 24px;
}

.navbar-light {
	background-color: #fff;
}

.navbar-nav .nav-link {
	color: var(--black) !important;
	font-size: 24px;
}

.navbar-nav .nav-link:hover {
	color: var(--yellow) !important;
}

.nav-link.active {
	text-decoration: underline;
}

.play-icon-container {
	padding-bottom: 5px;
	margin-top: 3px;
}

.play-icon, .pause-icon {
	width: 34px;
	height: 34px;
}

.soundcloud {
	display: none;
}

@media (max-width: 992px) {

	.navbar {
		background-color: #000;
	}

	.navbar .container::before {
		content: "";
    position: absolute;
    background-color: #fff;
    top: 0;
    left: 0;
    height: var(--header-height);
    width: 100%;
    z-index: -1;
	}
	
	.navbar-collapse .nav-link {
		color: #fff !important;
	}
}

@media (max-width: 780px) {

	.navbar-brand,
	.navbar-light .navbar-nav .nav-link {
		font-size: 25px;
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}

	.navbar-light .navbar-nav .nav-item:first-child .nav-link {
		padding-top: 1.5rem;
	}

	.navbar-light .navbar-nav .nav-item:last-child .nav-link {
		padding-bottom: 1.5rem;
	}
}


/****** BUTTONS ******/

.btn3d, .btn3d-secondary, .img3d {
	cursor: url(../img/icons/ico-puntatore-over.png), pointer !important;
}

.btn3d, .btn3d-secondary {
	font-size: 20px;
	border: 2px solid #000;
	-webkit-box-shadow: 0px 5px 5px rgba(0,0,0, 0.35); 
	box-shadow: 0px 5px 5px rgba(0,0,0, 0.35);
	padding: 0.5rem 1rem;
	position: relative;

	background-color: var(--primary);
	color: #000 !important;
}

.btn3d-secondary {
	background-color: #000;
	color: #fff !important;
}

.btn3d:hover, .btn3d-secondary:hover {
	top: 2px;
	-webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.35);
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.35);
	text-decoration: none;
}

.btn3d:active, .btn3d-secondary:active {
	top: 4px;
	-webkit-box-shadow: 0px 3px 5px rgba(0,0,0, 0.15); 
	box-shadow: 0px 3px 5px rgba(0,0,0, 0.15);
}

.btn3d-secondary--reverse {
	background-color: #fff !important;
	color: #000 !important;
}

.img3d {
	position: relative;
	-webkit-box-shadow: 0px 5px 5px rgba(0,0,0, 0.35); 
	box-shadow: 0px 5px 5px rgba(0,0,0, 0.35);
}

.img3d:hover {
	margin-top: 2px;
	-webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.35);
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.35);
}

.img3d:active {
	margin-top: 4px;
	-webkit-box-shadow: 0px 3px 5px rgba(0,0,0, 0.15); 
	box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
}

@media (max-width: 780px) {

	.btn3d, .btn3d-secondary {
		font-size: 18px;
		padding: 0.75rem 1rem;
	}
}


/****** FOOTER ******/