/* CSS by MVDE8-2020 */

/* body, links e font */
body {background-color: #06a751; color: #FFF; font-family: "Roboto", Verdana, Tahoma; font-size:10pt; line-height:20px;}
a, a:hover, a:visited {color: #FFF; text-decoration: none; font-weight: bold;}
@font-face {font-family: 'Roboto'; font-style: normal; font-weight: 100; src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v14/vzIUHo9z-oJ4WgkpPOtg1_esZW2xOQ-xsNqO47m55DA.woff) format('woff')} @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 300; src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v14/Hgo13k-tfSpn0qi1SFdUfT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff')} @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto Regular'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v14/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff')} @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 500; src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v14/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff')} @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 700; src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v14/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff')} @font-face {font-family: 'Roboto'; font-style: normal; font-weight: 900; src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v14/mnpfi9pxYH-Go5UiibESIj8E0i7KZn-EPnyo3HZu7kw.woff) format('woff')} @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 100; src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'), url(https://fonts.gstatic.com/s/roboto/v14/12mE4jfMSBTmg-81EiS-YRsxEYwM7FgeyaSgU71cLG0.woff) format('woff')} @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 300; src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v14/7m8l7TlFO-S3VkhHuR0at4bN6UDyHWBl620a-IRfuBk.woff) format('woff')} @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 400; src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v14/1pO9eUAp8pSF8VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff) format('woff')} @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 500; src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(https://fonts.gstatic.com/s/roboto/v14/OLffGBTaF0XFOW1gnuHF0YbN6UDyHWBl620a-IRfuBk.woff) format('woff')} @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 700; src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v14/t6Nd4cfPRhZP44Q5QAjcC4bN6UDyHWBl620a-IRfuBk.woff) format('woff')} @font-face {font-family: 'Roboto'; font-style: italic; font-weight: 900; src: local('Roboto Black Italic'), local('Roboto-BlackItalic'), url(https://fonts.gstatic.com/s/roboto/v14/bmC0pGMXrhphrZJmniIZpYbN6UDyHWBl620a-IRfuBk.woff) format('woff')}

/* container per credits */
#page-container {position: relative; min-height: 102vh;}
#content-wrap {padding-bottom: 2.5rem;}

/* larghezza pagina */
#header, #title, .subtitle, #content, #artista, #artisti, #links, #contacts {width: 800px;}

/* header - logo Illustra */
#header {height: 230px; margin: -50px auto 30px auto; text-align: center;}
#header .logo {vertical-align: middle; fill: #FFF; color: #FFF; text-align: center; background-repeat: no-repeat; font-size: 25em;}

/* title - titolo della pagina */
#title, .subtitle {font-size: 2em; margin: 0 auto 0 auto; color: #FFF; font-weight: bold; height: 60px; display:table-cell; vertical-align: middle; padding-bottom: 20px;}
#title .titleicon:before, .subtitle .titleicon:before {font-size: 2.5em; margin-left: -10px !important;}
#title .titletext, .subtitle .titletext {display: inline-block; vertical-align: super;}
.subtitle {padding-top: 5px;}

/* content - corpo della pagina */
#content {margin: 0 auto 0 auto; text-align:center; padding: 20px 0 20px 0;}
#content p {text-align: justify; font-size: 1.1em; line-height: 1.5em;}
#content p:nth-child(n+2) {margin-top: -8px}

/* artista - corpo della pagina */
#artista {margin: 0 auto 0 auto; padding: 50px 0 20px 0;}
#artista .avatar, #artista .name {display: table-cell; vertical-align: top; color: #FFF; font-weight: bold; font-size: 1.8em;}
#artista .bio {vertical-align: top; color: #FFF; font-style: italic; font-size: 1.1em; margin-top: 8px !important;}
#artista .avatar img {width:120px; height:120px; border-radius: 50%; border: 2px solid #FFF; margin-right: 15px; margin-top: -2px;}
#artista .desc {display: table-cell;}
#artista p {text-align: justify; font-size: 1.1em; line-height: 1.5em;}

/* elenco artisti */
#artisti {margin: 0 auto 0 auto; padding: 0 0 20px 0; list-style-type: none; display: table;}
#artisti ul {display: inline-block; padding: 0;}
#artisti li {display: block; float:left; margin-bottom: 20px; }
#artisti li:nth-child(odd) {margin-right: 20px;}
#artisti li:nth-child(even) {margin-right: 0;}
#artisti a {display: block; border-radius: 15px; border: 2px solid #FFF; width: 376px; height: 80px; padding: 5px; background-color: #FFF;}
#artisti .artista p {font-size: 1.1em; font-weight: normal !important; letter-spacing: 0.05em;}
#artisti .artista h2 {font-size: 1.5em;; letter-spacing: 0.05em;}
#artisti .artista img {width:80px; height:80px; border-radius: 50%; border: 2px solid #FFF; margin-right: 15px; margin-top: -2px;}
#artisti .avatar, #artisti .name {display: inline-block; vertical-align: top; color: #000;}
#artisti a:hover {border-color: #000; background-color: #000; color: #FFF !important;}
#artisti a:hover p, #artisti a:hover h2 {color: #FFF !important;}

/* canali */
#canali {margin: 0 auto 0 auto; padding: 0 0 20px 0; list-style-type: none; display: table;}
#canali ul {display: inline-block; padding: 0;}
#canali li {display: block; float:left; margin-bottom: 20px;}
#canali li:nth-child(3) {margin-right: 0;}
#canali li:nth-child(2) {margin-right: 20px;}
#canali a {display: block; border-radius: 15px; border: 2px solid #FFF; width: 376px; height: 80px; padding: 5px; background-color: #FFF;}
#canali li:first-child a, #canali li:nth-child(4) a {width: 786px;}
#canali .canale p {font-size: 1.1em; font-weight: normal !important; letter-spacing: 0.05em;}
#canali .canale h2 {font-size: 1.5em;; letter-spacing: 0.05em;}
#canali .canale img {width:80px; height:80px; border-radius: 50%; border: 2px solid #FFF; margin-right: 15px; margin-top: -2px;}
#canali .avatar, #canali .name {display: inline-block; vertical-align: top; color: #000;}
#canali a:hover {border-color: #000; background-color: #000; color: #FFF !important;}
#canali a:hover p, #canali a:hover h2 {color: #FFF !important;}
#canali p {text-align: center;}

/* gallery */
.riga::after {content: ""; clear: both; display: table;}
.colonna {float: left; width: 48%; padding: 2px;}

/* links - link navigazione */
#links {margin: 10px auto 0 auto; text-align: center;}
#links ul, #links ul li {list-style-type: none; display: inline-block; margin: 8px; padding: 0; text-align: center;}
#links ul li {background-color: #FFF; color: #000; text-align: center; font-size: 1.5em !important; border-radius: 15px;}
#links ul li a {color: #000; height: 60px; display:table-cell; vertical-align: middle; width: 150px;}
#links ul li:hover,  #links ul li a:hover {background-color: #000; color: #FFF; border-radius: 15px;}
#links ul li a .pageicon:before {font-size: 2.5em; margin-left: -10px !important;}
#links ul li a .pagetext {display: inline-block; vertical-align: super;}

/* contacts - icone contatti */
#contacts {margin: 10px auto 0 auto; text-align: center;}
#contacts ul, #contacts ul li {list-style-type: none; display:inline-block; margin: 8px; padding: 0; text-align: center}
#contacts .icon {display:table-cell !important; vertical-align: middle; background-color: #FFF; fill: #000; color: #000; text-align: center; border-radius: 50%; width: 60px; height: 60px; background-repeat: no-repeat; font-size: 4em !important;}
#contacts .icon:hover {background-color: #000; fill: #FFF; color: #FFF}

/* footer */
#footer {min-width: 100%; margin: 5px auto 5px auto; text-align:center; position: absolute; bottom: 0;}

/* CSS responsive schermi piccoli*/
@media screen and (max-width: 980px) {
#header, #title, .subtitle, #content, #artista, #artisti, #links, #contacts {width: 600px;}
#header .logo {font-size: 20em;}
#title, .subtitle {font-size: 1.8em !important;}
#content {margin: -20px auto 0 auto; padding: 0 0 0 0;}
#artista {margin: 10px auto 0 auto; padding: 0 0 0 0;}
#content p, #artista p {font-size: 1em;}
#artisti a {width: 276px; height: 60px;}
#canali a {width: 276px; height: 70px;}
#canali li:first-child a, #canali li:nth-child(4) a {width: 586px;}
#artisti .artista p {font-size: 0.81em;}
#canali .canale p {font-size: 0.81em;}
#artisti .artista h2 {font-size: 1.09em;}
#artisti .artista img {width:60px; height:60px;}
#artisti .name {margin-top: -7px}
#contacts {margin: 5px auto 0 auto;}
#links ul li a {height: 50px; width: 125px; font-size: 0.85em !important;}
#contacts .icon {height: 45px; width: 45px; font-size: 3.2em !important;}
}

/* CSS responsive mobile */
@media screen and (max-width: 655px) {
#header, #title, .subtitle, #content, #artista, #artisti, #links, #contacts {width: 300px;}
#header .logo {font-size: 18em;}
#title, .subtitle {font-size: 1.6em !important;}
#content, #artista {margin: -40px auto 0 auto; padding: 0 0 0 0;}
#artista {margin: -20px auto 0 auto; padding: 0 0 0 0; text-align:center;}
#artista .avatar, #artista .name, #artista .desc {display: inline-block}
#artista .avatar img {margin-right: 0;}
#artista .name {margin: 20px 0 20px auto;}
#artista .bio {margin-top: 0px !important; margin-bottom: 5px;}
#artisti a {width: 300px;}
#artisti li:nth-child(odd) {margin-right: 0;}
#artisti li:nth-child(even) {margin-right: 0;}
#artisti .artista img {margin-left: 8px;}
#canali a {width: 300px;}
#canali li:first-child a, #canali li:nth-child(4) a {width: 300px;}
#canali li:nth-child(odd) {margin-right: 0;}
#canali li:nth-child(even) {margin-right: 0;}
#links ul, #links ul li, #contacts ul, #contacts ul li {margin: 3px;}
#links ul li a {height: 40px; width: 100px; font-size: 0.68em !important;}
#contacts {margin: 0 auto 0 auto;}
#contacts .icon {height: 30px; width: 30px; font-size: 2.8em !important;}
#footer {position: relative; min-width: auto; width: 300px !important; margin: 5px auto 10px auto;}

}