body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    justify-content: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    -ms-justify-content: center;
    -ms-align-items: center;
}
h2 {
    margin:10px;
    margin-bottom:0px;
    padding-top:20px;
    padding-bottom:0px;
}
div {
    margin:0px;
    padding:0px;
}
form {
    margin: 2px;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}
tbody {
    border-collapse:collapse;
    border-spacing:0;
}
tr {
    border-collapse:collapse;
    border-spacing:0;
}
td {
    border-collapse:collapse;
    border-spacing:0;
    padding:0;
}

/* inizio stili usati nella parte amministrazione */
#divprincipale {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    border: 1px solid black;
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
}
.albumdasceglere {
    width: 90%;
    margin-left: 5%;
    margin-bottom: 2px;
    display: block;
    border: 1px solid Aqua;
}
.videodasceglere {
    width: 90%;
    margin-left: 5%;
    margin-bottom: 2px;
    display: block;
    border: 1px solid Aqua;
}

#testaalbum {
    width: 100%;
}
#fotopresenti {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
}
#piedeindietro {
    border: 1px solid black;
    width: 100%;
}
.minifoto {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	height: 260px;
	width: 200px;
	background-color: #DDEEFF;
    border: 1px solid blue;
}
.miniusato {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	height: 320px;
	width: 320px;
	background-color: #DDEEFF;
    border: 1px solid blue;
}

.full-height {
    height: 100%;
}

#tuttalapagina {
    width: 100%;
    height: 100%;
    display: flex;
    display: -webkit-flex;
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    justify-content: stretch;
    align-items: stretch;
    -webkit-justify-content: stretch;
    -webkit-align-items: stretch;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    background-color: #DDEEFF;
}

#testapagina {
    width: 100%;
    height: 270px;
    display: flex;
    display: -webkit-flex;
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;
    background-color: #FFCCCC;
}
#corpopagina {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    flex: 2 1 auto;
    -webkit-flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    background-color: #CCFFCC;
}
#piedepagina {
    width: 100%;
    height: 100px;
    display: flex;
    display: -webkit-flex;
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    justify-content: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    background-color: #CCCCFF;
    height: 40px;
}
#banner1, #banner2 {
    width: 20%;
    height: 100%;
    display: flex;
    display: -webkit-flex;
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    background-color: #FFCC00;
}
#banner1 {
    order: 1;
    -webkit-order: 1;
}
#banner2 {
    order: 3;
    -webkit-order: 3;
}
#logolupi {
    width: 50%;
    height: 100%;
    display: flex;
    display: -webkit-flex;
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    background-color: #FFCCFF;
    order: 2;
    -webkit-order: 2;
}
/*  fine stili usati nella parte amministrazione  */

/* inizio stili usati nella parte home nuova 2020 */
:root {
    --modolayout: landscapegrande;
    }
#contenitorelivello1 {
    display: flex;
    display: -webkit-flex;
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    justify-content: stretch;
    align-items: stretch;
    -webkit-justify-content: stretch;
    -webkit-align-items: stretch;
    flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;
}
#contenitorelivello2 {
    display: flex;
    display: -webkit-flex;
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    justify-content: stretch;
    align-items: stretch;
    -webkit-justify-content: stretch;
    -webkit-align-items: stretch;
    flex-flow: column nowrap;
    -webkit-flex-flow: column nowrap;
}
#contenitorelivello3 {
    display: flex;
    display: -webkit-flex;
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    flex-flow: column nowrap;
    -webkit-flex-flow: column nowrap;
}
#contenitorelivello4 {
    display: none;
}
#div1 {
    display: none;
}
#div2_1_1 {
    order: 1;
    -webkit-order: 1;
}
#div2_1_2 {
    order: 2;
    -webkit-order: 2;
}
#div2_1_3 {
    order: 3;
    -webkit-order: 3;
}
#div2_3 {
    height:20px;
    max-height:20px;
    background-color: #000080;
    color: #FFFFFF;
}
#div2_2
{
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
    overflow-x:hidden;
    overflow-y:auto;
    flex-flow:column nowrap;
    -webkit-flex-flow:column nowrap;
    display:block;
    height:100%;
    border:0;
    padding:0;
}
#iltitolodellalbumscelto {
    height:60px;
    min-height:40px;
    max-height:120px;
    background-color: #000040;
    color: #FFFFFF;
    text-align: center;
    padding: 5px;
}
#contenitorediminiature {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-direction: normal;
	-moz-box-direction: normal;
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	-webkit-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-box-pack: start;
	-moz-box-pack: start;
	-webkit-justify-content: space-around;
	-ms-flex-pack: start;
	justify-content: space-around;
	-webkit-align-content: stretch;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
}
.flex {max-width: 100%;}
.divminiaturafoto {
    background-color: #EEEEEE;
    border: 2px solid #DDDDFF;
    text-align:center;
    width: 180;
    height: 200;
    max-height: 240;
    overflow:hidden;
    padding: 4;
}
.mostra {
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:Gray;
    text-align:center;
    vertical-align:middle;
    z-index:1;
    }
.mostravid {
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:Gray;
    text-align:center;
    vertical-align:middle;
    z-index:0;
    }
.nascondi {
    display:none;
}
#mostralafotocontainer {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	height: 100%;
}
#mostralafototitolo {
    position:absolute;
    width:100%;
    height:40px;
    max-height:100px;
    overflow:hidden;
    top:0;
    background-color:Gray;
    opacity:0.3;
    font-size:large;
    font-weight:bold;
    color:yellow;
    text-align: center;
}
#fototitolo {
    font-size:large;
    font-weight:bold;
    color:yellow;
    text-align: center;
}
#mostralafototitolo:hover {
    opacity:1;
}
#mostralafotodescrizione {
    position:absolute;
    width:100%;
    height:60px;
    max-height:100px;
    overflow:hidden;
    bottom:0;
    background-color:Gray;
    opacity:0.2;
    font-size:medium;
    color:White;
    text-align: center;
}
#fotodescrizione {
    font-size:medium;
    color:White;
    text-align: center;
}
#mostralafotodescrizione:hover {
    opacity:1;
}
#elencopionieri, #elencolink, #elencosponsor {
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    align-items: center;
    -webkit-align-items: center;
    justify-content: space-around;
    -webkit-justify-content: space-around;
}
.divsponsor {
    font-weight:bold;
    display:block;
    background-color:#F8F8F8;
    border: 1px solid #F4F4F4;
    padding: 3px;
}
.pioniere {
    font-weight:bold;
    display:block;
    background-color:#F8F8F8;
    border: 1px solid #F4F4F4;
    padding: 3px;
    width:250px;
    height:25px;
    text-align:center;
}
.pioniere:hover {
    font-size:large;
    background-color:#FFFFDD;
}
/* inizio variazioni modolayout */
@media screen and (orientation:portrait) and (max-height:639px) {
    :root {
        --modolayout: portraitpiccolo;
    }
    #modolayout:after {
        content: 'portraitpiccolo';
    }
    #div2_1 {
        height:320px;
    }
    #contenitorelivello3 {
        height: 320px;
        max-height: 320px;
    }
    #div2_1_1 {
        order: 2;
        -webkit-order: 2;
        height: 100px;
        max-height: 100px;
    }
    #div2_1_2 {
        order: 1;
        -webkit-order: 1;
        height: 120px;
        max-height: 120px;
    }
    #div2_1_3 {
        order: 3;
        -webkit-order: 3;
        height: 100px;
        max-height: 100px;
    }
    #div2_2 {
        height:calc(100% - 320px);
    }
    #div2_3 {
        display:none;
    }
    #logogrande {
        display:none;
    }
}

@media screen and (orientation:portrait) and (min-height:640px) {
    :root {
        --modolayout: portraitgrande;
    }
    #modolayout:after {
        content: 'portraitgrande';
    }
    #div2_1 {
        height:320px;
    }
    #contenitorelivello3 {
        height: 320px;
        max-height: 320px;
    }
    #div2_1_1 {
        order: 2;
        -webkit-order: 2;
        height: 100px;
        max-height: 100px;
    }
    #div2_1_2 {
        order: 1;
        -webkit-order: 1;
        height: 120px;
        max-height: 120px;
    }
    #div2_1_3 {
        order: 3;
        -webkit-order: 3;
        height: 100px;
        max-height: 100px;
    }
    #div2_2 {
        height:calc(100% - 340px);
    }
    #logogrande {
        display:none;
    }
}

@media screen and (max-height:330px) {
    :root {
        --modolayout: landscapepiccoloschiacciato;
    }
    #modolayout:after {
        content: 'landscapepiccoloschiacciato';
    }
    #div1 {
        width: 80px;
        max-width: 80px;
        min-width: 80px;
        height: 100%;
        display: block;
    }
    #contenitorelivello3 {
        flex-flow: row nowrap;
        -webkit-flex-flow: row nowrap;
        height: 50px;
        max-height: 50px;
    }
    #div2_1 {
        width: calc((100%-80px))
    }
    #div2_1_1 {
        height: 50px;
        max-height: 50px;
    }
    #div2_1_2 {
        display: none;
    }
    #div2_1_3 {
        height: 50px;
        max-height: 50px;
    }
    #div2_1_3_0 {
        height: 50px;
        max-height: 50px;
    }
    #div2_2 {
        width: calc(100%-80px);
        max-width: calc(100%-80px);
    }
    #corpo {
        width: calc(100%-80px);
        max-width: calc(100%-80px);
    }
    #div2_3 {
        display: none;
    }
    #imgbanner1 {
        max-width: calc((100% - 80)/2);
        max-height: 50px;
    }
    #imgbanner2 {
        max-width: calc((100% - 80)/2);
        max-height: 50px;
    }
    #logo3 {
        display: none;
    }
}

@media screen and (min-height:331px) and (max-height:480px), screen and (orientation:landscape) and (max-width:640px) {
    :root {
        --modolayout: landscapepiccolo;
    }
    #modolayout:after {
        content: 'landscapepiccolo';
    }
    #div1 {
        width: 80px;
        max-width: 80px;
        height: 100%;
        display: block;
        background-color: #FFFFFF;
    }
    #div2_1 {
        height: 200px;
    }
    #contenitorelivello3 {
        height: 200px;
        max-height: 200px;
        }
    #div2_1_1 {
        height: 100px;
        max-height: 100px;
    }
    #div2_1_2 {
        display: none;
    }
    #div2_1_3 {
        height: 100px;
        max-height: 100px;
    }
    #div2_2 {
        height: calc(100% - 200px);
    }
    #div2_3 {
        display: none;
    }
    #logo4 {
        display: none;
    }
}

@media screen and (orientation:landscape) and (min-height:481px) and (min-width:641px) and (max-width:999px) {
    :root {
        --modolayout: landscapemediopiccolo;
    }
    #modolayout:after {
        content: 'landscapemediopiccolo';
    }
    #contenitorelivello3 {
        height:330px;
        max-height:330px;
        }
    #contenitorelivello4 {
    display: flex;
    display: -webkit-flex;
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    justify-content: stretch;
    align-items: stretch;
    -webkit-justify-content: stretch;
    -webkit-align-items: stretch;
    flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;  
    height:100px;
    background-color: #EEFFDD;     
    }
    #div1 {
        display: none;
    }
    #div2_1 {
        height:330px;
        max-height:330px;
        min-height:330px;
    }
    #logogrande {
        height:230px;
        min-height:230px;
        max-height:230px;
    }
    #div2_1_1 {
        display:none;
    }
    #div2_1_3_0 {
        display:none;
    }
    #logomedio {
        display:none;
    }
    #div2_2 {
        height:calc(100% - 330px);
    }
}

@media screen and (orientation:landscape) and (min-height:481px) and (min-width:1000px) and (max-width:1399px) {
    :root {
        --modolayout: landscapenormale;
    }
    #modolayout:after {
        content: 'landscapenormale';
    }
    #contenitorelivello3 {
    flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;       
    }
    #contenitorelivello4 {
        display:none;
    }
    #div2_1 {
        height:230px;
        min-height:230px;
    }
    #div2_1_1 {
        display:none;
    }
    #div2_1_3_0 
    {
        display:none;
    }
    #contenitorelivello4 {
    display: flex;
    display: -webkit-flex;
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    justify-content: stretch;
    align-items: stretch;
    -webkit-justify-content: stretch;
    -webkit-align-items: stretch;
    flex-flow: column nowrap;
    -webkit-flex-flow: column nowrap;   
    background-color: #EEFFDD;
    height: 200px;
    }
    #div2_1_3_1, #div2_1_3_2
    {
        height:100px;
    }
    #div2_2 {
        height:calc(100% - 230px);
    }
    #logomedio {
        display:none;
    }
}

@media screen and (orientation:landscape) and (min-height:481px) and (min-width:1400px) {
    :root {
        --modolayout: landscapegrande;
    }
    #modolayout:after {
        content: 'landscapegrande';
    }
    #contenitorelivello3 {
    flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;       
    }
    #contenitorelivello4 {
        display:none;
    }
    #div2_1 {
        height:230px;
        min-height:230px;
    }
    #div2_2 {
        height:calc(100% - 230px);
    }
    #logomedio {
        display:none;
    }
}
/*  fine variazioni modolayout  */

/* inizio variazioni testo piede */
@media screen and (max-width:1024px) {
    #div2_3_sede {
        display:none;
    }
}
@media screen and (max-width:800px) {
    #div2_3_piva {
        display:none;
    }
}
@media screen and (max-width:640px) {
    #div2_3_tel {
        display:none;
    }
}
@media screen and (max-width:500px) {
    #div2_3_mail {
        display:none;
    }
}
/*  fine variazioni testo piede  */

/*  fine stili usati nella parte home nuova 2020  */