html {

}
body {
	margin: 0;
	padding: 0;
	font-family: 'Open Sans';
	font-weight: 600;
	font-size: 14px;
	background-color: #fff;
	text-align: center;
}

.contenitore {
	max-width: 640px;
	margin: 0 auto;
}
.contenitore .contenuto {
	width: 100%;
	float: left;
	position: relative;
}
.warning {
	margin-top: 20px;
	display: none;
	color: #2670aa;
	font-size: 18px;
}
.warning .avviso {
	margin-top: 20px;
}

/* HOME */
/************************************************************************************/
.contenitore {

}
.contenitore .contenuto .header {
	width: 100%;
	float: left;
	z-index: 1;
}
.contenitore .contenuto .header img {
	max-width: 70%;
	position: absolute;
	left: 0;
	right: 0;
	top: -40px;
	bottom: 0;
	margin: auto;
}
body.opera .contenitore .contenuto .header img {
	top: -20px;
}

.contenitore .contenuto .header .menu {
	position: absolute;
	right: 10px;
	top: 10px;
}
.contenitore .contenuto .header .menu .riga {
    width: 30px;
    height: 3px;
    margin-bottom: 5px;
}

.contenitore .contenuto .menu-contenitore {
	display: none;
	max-width: 640px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	color: #2670aa;
	height: 50%;
	border-radius: 0 0 100px 0;
	box-shadow: 0px 0px 8px 0px #555;
	font-size: 25px;
	z-index: 120;
}
.contenitore .contenuto .menu-contenitore .chiudi {
	position: absolute;
	top: 0;
	right: 15px;
	font-size: 30px;
	cursor: pointer;
}
.contenitore .contenuto .menu-contenitore .menu-contenuto {
	display: table-cell;
    vertical-align: middle;
}
.contenitore .contenuto .menu-contenitore .menu-contenuto .menu-top {

}
.contenitore .contenuto .menu-contenitore .menu-contenuto .menu-bottom {

}
.contenitore .contenuto .menu-contenitore .menu-contenuto .separatore {
	width: 50%;
	height: 3px;
	margin: 50px auto;
	background-color: #cb1567;
}
.contenitore .contenuto .menu-contenitore .menu-contenuto a {
	color: #2670aa;
	text-decoration: none;
}

.contenitore .contenuto .footer {
	width: 100%;
	float: left;
}
.contenitore .contenuto .footer img.europa {
	width: 200px;
}
.contenitore .contenuto .footer img.eni {
	width: 50px;
	position: absolute;
	right: 30px;
	bottom: 25px;
}

/* LINGUE */
/************************************************************************************/
body.home {
	background-color: #fff;
	text-align: center;
}
body.home .contenitore.lingue {
	background-color: #fff;
}
body.home .contenitore.lingue .contenuto {
	position: relative;
}
body.home .contenitore .contenuto .header {
	position: absolute;
	top: 0;
}
body.home .contenitore .contenuto .header .header-top .menu .riga {
    background-color: #2670aa;
}
body.home .contenitore .contenuto .header .header-top {
	background: url('/css/images/bg-home-header.png') no-repeat top center transparent;
	background-size: 100%;
	padding: 10px 0 15px;
	min-height: 45px;
}
body.home .contenitore .contenuto .header .header-top img {

}
body.home .contenitore .contenuto .header .header-bottom {
	background: url('/css/images/bg-home-header.png') no-repeat bottom center transparent;
	background-size: 100%;
}
body.home .contenitore.lingue .contenuto .elenco-lingue-contenitore {
	width: 100%;
	overflow-y: auto;
}
body.home .contenitore.lingue .contenuto .elenco-lingue-contenitore .elenco-lingue {
	width: 320px;
	display: grid;
	grid-template-columns: 100%;
	margin: 0 auto;
}
body.home .contenitore.lingue .contenuto .elenco-lingue-contenitore .elenco-lingue .lingua {
	cursor: pointer;
	display: block;
	padding: 10px 0 50px;
}
body.home .contenitore.lingue .contenuto .elenco-lingue-contenitore .elenco-lingue .lingua:first-child {
	padding-top: 0;
}
body.home .contenitore.lingue .contenuto .elenco-lingue-contenitore .elenco-lingue .lingua img {
	width: 125px;
}
body.home .contenitore.lingue .contenuto .elenco-lingue-contenitore .elenco-lingue .lingua .codice {
	color: #fff;
	border-radius: 10px;
	box-shadow: 0px 0px 5px 0px #555;
	width: 125px;
	height: 75px;
	line-height: 75px;
	font-size: 50px;
	margin: 10px auto 0;
}
body.home .contenitore.lingue .contenuto .elenco-lingue-contenitore .elenco-lingue .lingua.l-IT .codice {
	background-color: #fdab30;
}
body.home .contenitore.lingue .contenuto .elenco-lingue-contenitore .elenco-lingue .lingua.l-EN .codice {
	background-color: #fe7352;
}
body.home .contenitore.lingue .contenuto .elenco-lingue-contenitore .elenco-lingue .lingua.l-FR .codice {
	background-color: #e8485b;
}
body.home .contenitore .contenuto .footer {
	position: absolute;
	bottom: 0;
}
body.home .contenitore .contenuto .footer .footer-top {
	background: url('/css/images/bg-home-footer.png') no-repeat top center transparent;
	background-size: 100%;
}
body.home .contenitore .contenuto .footer .footer-bottom {
	background: url('/css/images/bg-home-footer.png') no-repeat bottom center transparent;
	width: 100%;
	padding: 15px 0 15px;
	background-size: 100%;
}
body.home .contenitore .contenuto .footer .footer-bottom img {

}

/* OPERE */
/************************************************************************************/
body.opere .contenitore {
	background: linear-gradient(90deg, #fd9d38, #fe7352);
}
body.opere.th-aida .contenitore {
    background: #ecc67e;/*linear-gradient(90deg, #d41c40, #450814);*/
}
body.opere.th-il-barbiere-di-siviglia .contenitore {
	background: linear-gradient(90deg, #d41c40, #450814);
}
body.opere.th-turandot .contenitore {
	background: linear-gradient(90deg, #fd9d38, #fe7352);
}
body.opere.th-l-elisir-d-amore .contenitore {
	background: linear-gradient(90deg, #ed0027, #7f0055);
}
body.opere.th-la-cenerentola .contenitore {
	background: linear-gradient(90deg, #083548, #1381a9);
}
body.opere.th-il-flauto-magico .contenitore {
	background: linear-gradient(90deg, #096733, #042e16);
}
body.opere.th-la-traviata .contenitore {
	background: #fff;/*linear-gradient(90deg, #ebe6de, #f0d5a9);*/
}
body.opere .contenitore .contenuto {
	position: relative;
}
body.opere .contenitore .contenuto .header {
	position: absolute;
	top: 0;
}
body.opere .contenitore .contenuto .header .header-top {
	background-color: #fff;
	padding: 10px 0 15px;
	min-height: 45px;
}
body.opere .contenitore .contenuto .header .header-top .menu .riga {
    background-color: #2670aa;
}
body.opere .contenitore .contenuto .header .header-top img {

}
body.opere .contenitore .contenuto .header .header-bottom {
	background: url('/css/images/bg-opera-header.png?v=1') no-repeat bottom center transparent;
	background-size: 100%;
}
body.opere .contenitore .contenuto .elenco-opere {
	float: left;
	width: 100%;
	overflow-y: auto;
}
body.opere .contenitore .contenuto .elenco-opere .opera {

}
body.opere .contenitore .contenuto .elenco-opere .opera img {
	max-width: 320px;
}
body.opere .contenitore .contenuto .footer {
	position: absolute;
	bottom: 0;
}
body.opere .contenitore .contenuto .footer .footer-top {
	background: url('/css/images/bg-opera-footer.png?v=1') no-repeat top center transparent;
	background-size: 100%;
}
body.opere .contenitore .contenuto .footer .footer-bottom {
	background-color: #fff;
	width: 100%;
	padding: 15px 0 15px;
}
body.opere .contenitore .contenuto .footer .footer-bottom img {

}

/* LOGIN */
/************************************************************************************/
body.opere.form-login .contenitore .contenuto .elenco-opere .opera {
	padding-top: 250px !important;
}
body.opere.form-login .contenitore .contenuto .elenco-opere .opera .errore {
	font-size: 20px;
	font-weight: 400;
	margin-bottom: 20px;
}
body.opere.form-login .contenitore .contenuto .elenco-opere .opera .label,
body.opere.form-login .contenitore .contenuto .elenco-opere .opera .label a {
	font-size: 20px;
	font-weight: 400;
	color: #fff;
}
body.opere.form-login.th-la-traviata .contenitore .contenuto .elenco-opere .opera .label,
body.opere.form-login.th-la-traviata .contenitore .contenuto .elenco-opere .opera .label a{
	color: #14385a;
}
body.opere.form-login .contenitore .contenuto .elenco-opere .opera form {
	display: grid;
	align-content: center;
	justify-content: center;
	width: 100%;
	margin-bottom: 100px;
}
body.opere.form-login .contenitore .contenuto .elenco-opere .opera input.password {
	font-size: 16px;
	padding: 5px 10px;
	margin: 20px 0;
}
body.opere.form-login .contenitore .contenuto .elenco-opere .opera input.submit {
	width: 100px;
	margin: 0 auto;
	padding: 10px 0;
}
/************************************************************************************/

/* OPERA - BRANI */
/************************************************************************************/
body.opere.opera.th-turandot .contenitore {
	background: linear-gradient(90deg, #fe7352, #fd9d38);
}
body.opere .elenco-brani-contenitore {
	width: 100%;
	overflow-y: auto;
}
body.opere .elenco-brani-contenuto {
	width: 320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 50% 50%;
}
body.opere .elenco-brani-contenitore .elenco-brani-contenuto .brano {
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0px 0px 5px 0px #555;
	width: 125px;
	height: 125px;
	margin: 15px auto 0;
	display: table;
	position: relative;
	cursor: pointer;
}
body.opere .elenco-brani-contenitore .elenco-brani-contenuto .brano form {
	display: table-cell;
	vertical-align: middle;
}
body.opere .elenco-brani-contenitore .elenco-brani-contenuto .brano span {
	display: none;
}
body.opere .elenco-brani-contenitore .elenco-brani-contenuto .brano .titolo {
	text-transform: uppercase;
	text-align: center;
	padding: 0 5px;
}
body.opere.th-turandot .elenco-brani-contenitore .elenco-brani-contenuto .brano .titolo {
	color: #fe7352;
}
body.opere.th-l-elisir-d-amore .elenco-brani-contenitore .elenco-brani-contenuto .brano .titolo {
	color: #ed0027;
}
body.opere.th-la-cenerentola .elenco-brani-contenitore .elenco-brani-contenuto .brano .titolo {
	color: #083548;
}
body.opere.th-il-flauto-magico .elenco-brani-contenitore .elenco-brani-contenuto .brano .titolo {
	color: #096733;
}
body.opere.th-la-traviata .elenco-brani-contenitore .elenco-brani-contenuto .brano {
	background-color: #14385a;
}
body.opere.th-la-traviata .elenco-brani-contenitore .elenco-brani-contenuto .brano .titolo {
	color: #fff;
}
body.opere.th-aida .elenco-brani-contenitore .elenco-brani-contenuto .brano .titolo {
    color: #d15233;
}
body.opere .elenco-brani-contenitore .elenco-brani-contenuto .brano .lis {
	position: absolute;
	right: 0;
	top: 0;
	border-radius: 0 10px 0 40px;
	width: 35px;
	text-align: right;
	padding: 5px 5px 5px 0;
}
body.opere .elenco-brani-contenitore .elenco-brani-contenuto .brano .lis img {
	width: 20px;
}
body.opere.th-turandot .elenco-brani-contenitore .elenco-brani-contenuto .brano .lis {
	background-color: #fe7352;
}
body.opere.th-l-elisir-d-amore .elenco-brani-contenitore .elenco-brani-contenuto .brano .lis {
	background-color: #ed0027;
}
body.opere.th-la-cenerentola .elenco-brani-contenitore .elenco-brani-contenuto .brano .lis {
	background-color: #1381a9;
}
body.opere.th-il-flauto-magico .elenco-brani-contenitore .elenco-brani-contenuto .brano .lis {
	background-color: #096733;
}
body.opere.th-la-traviata .elenco-brani-contenitore .elenco-brani-contenuto .brano .lis {
	background-color: #ebe6de;
}
body.opere.th-il-barbiere-di-siviglia .elenco-brani-contenitore .elenco-brani-contenuto .brano .lis {
	background-color: #d41c40;
}
body.opere.th-aida .elenco-brani-contenitore .elenco-brani-contenuto .brano .lis {
    background-color: #ecc67e;
}

/* BRANO SINGOLO */
/************************************************************************************/
body.app .contenitore .contenuto .header {
	z-index: 100;
	float: none;
	width: auto;
	padding: 10px 0 90px;
}
body.app .contenitore .contenuto .header .back {
	position: absolute;
	top: 30px;
	left: 10px;
}
body.app .contenitore .contenuto .header .menu .riga {
    background-color: #fff;
}
body.app.th-turandot .contenitore .contenuto .header {
	background: url('/css/images/opere/bg-brano-header-turandot.png') no-repeat bottom center transparent;
}
body.app.th-l-elisir-d-amore .contenitore .contenuto .header {
	background: url('/css/images/opere/bg-brano-header-l-elisir-d-amore.png') no-repeat bottom center transparent;
}
body.app.th-la-cenerentola .contenitore .contenuto .header {
	background: url('/css/images/opere/bg-brano-header-la-cenerentola.png') no-repeat bottom center transparent;
}
body.app.th-il-flauto-magico .contenitore .contenuto .header {
	background: url('/css/images/opere/bg-brano-header-il-flauto-magico.png') no-repeat bottom center transparent;
}
body.app.th-la-traviata .contenitore .contenuto .header {
	background: url('/css/images/opere/bg-brano-header-la-traviata.png?v=1') no-repeat bottom center transparent;
}
body.app.th-il-barbiere-di-siviglia .contenitore .contenuto .header {
	background: url('/css/images/opere/bg-brano-header-il-barbiere-di-siviglia.png?v=1') no-repeat bottom center transparent;
}
body.app.th-aida .contenitore .contenuto .header {
    background: url('/css/images/opere/bg-brano-header-aida.png?v=1') no-repeat bottom center transparent;
}
body.app .contenitore .contenuto .header img {

}
body.app .contenitore .contenuto .header #vimeo-embed {
	background-size: 95% !important;
	margin: 0 auto;
	background-position: center !important;
}
body.app .contenitore .contenuto .header #vimeo-embed iframe {
	width: 100%;
}
body.app .contenitore .contenuto .corpo-contenitore {
	width: 100%;
	float: left;
}
body.app .contenitore .contenuto .corpo-contenitore .corpo {
	max-width: 640px;
	margin: 0 auto;
}
body.app .contenitore .contenuto .corpo-contenitore .corpo .apri {
	width: 100%;
	float: left;
	cursor: pointer;
    display: table;
}
body.app .contenitore .contenuto .corpo-contenitore .corpo .apri > div {
    display: table-cell;
}
body.app .contenitore .contenuto .corpo-contenitore .corpo .titolo {
    white-space: nowrap;
	text-transform: uppercase;
	font-size: 22px;
	margin-bottom: 40px;
}
body.app.th-turandot .contenitore .contenuto .corpo-contenitore .corpo .titolo {
	color: #fe7352;
}
body.app.th-l-elisir-d-amore .contenitore .contenuto .corpo-contenitore .corpo .titolo {
	color: #ed0027;
}
body.app.th-la-cenerentola .contenitore .contenuto .corpo-contenitore .corpo .titolo {
	color: #1381a9;
}
body.app .contenitore .contenuto .corpo-contenitore .corpo .link {
	margin: 0 auto 20px;
	width: 300px;
}
body.app .contenitore .contenuto .corpo-contenitore .corpo .link a {
	display: grid;
	grid-template-columns: 75px calc(100% - 95px);
	color: #fff;
	text-decoration: none;
	grid-gap: 20px;
	position: relative;
}
body.app .contenitore .contenuto .corpo-contenitore .corpo .link a .type {
	border-radius: 10px;
	box-shadow: 0 0 5px 0 #555;
	width: 75px;
	height: 75px;
	display: table;
}
body.app .contenitore .contenuto .corpo-contenitore .corpo .link a .type span {
	display: table-cell;
	vertical-align: middle;
}
body.app.th-il-barbiere-di-siviglia .contenitore .contenuto .corpo-contenitore .corpo .link a .type {
	background-color: #450814;
}
body.app.th-turandot .contenitore .contenuto .corpo-contenitore .corpo .link a .type {
	background-color: #fe7352;
}
body.app.th-turandot .contenitore .contenuto .corpo-contenitore .corpo .link a .type img {
	width: 30px;
}
body.app.th-l-elisir-d-amore .contenitore .contenuto .corpo-contenitore .corpo .link a .type {
	background-color: #ed0027;
}
body.app.th-la-cenerentola .contenitore .contenuto .corpo-contenitore .corpo .link a .type {
	background-color: #1381a9;
}
body.app.th-il-flauto-magico .contenitore .contenuto .corpo-contenitore .corpo .link a .type {
	background-color: #096733;
}
body.app.th-la-traviata .contenitore .contenuto .corpo-contenitore .corpo .link a .type {
	background-color: #14385a;
}
body.app.th-l-elisir-d-amore .contenitore .contenuto .corpo-contenitore .corpo .link a.video-sp-piedi .type,
body.app.th-l-elisir-d-amore .contenitore .contenuto .corpo-contenitore .corpo .link a.video-sp-gambe-matite .type,
body.app.th-l-elisir-d-amore .contenitore .contenuto .corpo-contenitore .corpo .link a.video-sp-mani .type,
body.app.th-l-elisir-d-amore .contenitore .contenuto .corpo-contenitore .corpo .link a.video-sp-completo .type {
	background-color: #faaf4d;
}
body.app.th-la-cenerentola .contenitore .contenuto .corpo-contenitore .corpo .link a.video-sp-piedi .type,
body.app.th-la-cenerentola .contenitore .contenuto .corpo-contenitore .corpo .link a.video-sp-gambe-matite .type,
body.app.th-la-cenerentola .contenitore .contenuto .corpo-contenitore .corpo .link a.video-sp-mani .type,
body.app.th-la-cenerentola .contenitore .contenuto .corpo-contenitore .corpo .link a.video-sp-completo .type {
	background-color: #faaf4d;
}
body.app.th-aida .contenitore .contenuto .corpo-contenitore .corpo .link a .type {
    background-color: #d15233;
}
body.app .contenitore .contenuto .corpo-contenitore .corpo .link a .label {
	border-radius: 10px;
	box-shadow: 0 0 5px 0 #555;
	text-align: left;
	display: table;
	height: 75px;
}
body.app .contenitore .contenuto .corpo-contenitore .corpo .link a .label span {
	display: table-cell;
	vertical-align: middle;
	padding: 0 15px;
}
body.app.th-aida .contenitore .contenuto .corpo-contenitore .corpo .link a .label {
    background-color: #ecc67e;
	color: #d15233;
}
body.app.th-il-barbiere-di-siviglia .contenitore .contenuto .corpo-contenitore .corpo .link a .label {
	background-color: #d41c40;
}
body.app.th-turandot .contenitore .contenuto .corpo-contenitore .corpo .link a .label {
	background-color: #fdab30;
}
body.app.th-l-elisir-d-amore .contenitore .contenuto .corpo-contenitore .corpo .link a .label {
	background-color: #7f0055;
}
body.app.th-la-cenerentola .contenitore .contenuto .corpo-contenitore .corpo .link a .label {
	background-color: #083548;
}
body.app.th-il-flauto-magico .contenitore .contenuto .corpo-contenitore .corpo .link a .label {
	background-color: #042e16;
}
body.app.th-la-traviata .contenitore .contenuto .corpo-contenitore .corpo .link a .label {
	background-color: #14385a;
	color: #fff;
}
body.app.th-l-elisir-d-amore .contenitore .contenuto .corpo-contenitore .corpo .link a.video-sp-piedi .label,
body.app.th-l-elisir-d-amore .contenitore .contenuto .corpo-contenitore .corpo .link a.video-sp-gambe-matite .label,
body.app.th-l-elisir-d-amore .contenitore .contenuto .corpo-contenitore .corpo .link a.video-sp-mani .label,
body.app.th-l-elisir-d-amore .contenitore .contenuto .corpo-contenitore .corpo .link a.video-sp-completo .label {
	background-color: #eb4657;
}
body.app.th-la-cenerentola .contenitore .contenuto .corpo-contenitore .corpo .link a.video-sp-piedi .label,
body.app.th-la-cenerentola .contenitore .contenuto .corpo-contenitore .corpo .link a.video-sp-gambe-matite .label,
body.app.th-la-cenerentola .contenitore .contenuto .corpo-contenitore .corpo .link a.video-sp-mani .label,
body.app.th-la-cenerentola .contenitore .contenuto .corpo-contenitore .corpo .link a.video-sp-completo .label {
	background-color: #1381a9;
}
body.app .contenitore .contenuto .corpo-contenitore .corpo .link a .lis {
    position: absolute;
	right: 3px;
	top: 3px;
}
body.app .contenitore .contenuto .corpo-contenitore .corpo .link a .lis img {
	width: 18px;
}

/* FOOTER */
body.app .contenitore .contenuto .footer {
	width: 100%;
	float: left;
	text-align: center;
}

/* OPERE */
/************************************************************************************/

/* TURANDOT */
body.app .contenitore .contenuto .footer img.eni {
	display: none;
}