/* style.css */
body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f4f4f4; min-height: 100%; }
header { display: none; background: #333; color: #fff; padding:0.3rem; text-align: center; }
footer { clear: both; position:relative;bottom:0;width: 100%; display: block;overflow: auto; background: #333; color: #fff; text-align: center; padding:0;}
footer div {clear: both; margin:0;}
footer  p {width:50%;text-align: center;float: left; margin:0;padding:8px 0px;font-size:90%;}
nav {clear: both; background-color:transparent;color:#fff;padding: 1rem 0 1.5rem;z-index: 99; font-size: 132%;}
nav a, nav a:link, nav a:visited {color: #fff;cursor: pointer;text-decoration: none;}
nav>ul {list-style: none;text-align: center; margin: 0 auto; padding: 0;}
nav>ul>li {display: inline-block;padding: 0 1em;font-weight:bold;}

aside {z-index:95; position: fixed;top:0;right: 0; width: 100%;height: 100%;background-color: rgba(11, 11, 11,0.9);display: none;}
aside article {overflow: hidden;}
aside>section{position:absolute; top:7%;left:10%; width: 80%; height:85%;}

#imgView {width: 1000px;  height: 800px;  border: 1px solid #000;}
#imgView>img {object-fit: cover;width: 90%; height: 90%;;}
#galeriaImg {height: 100%;width: 100%;}
#galeriaImg div,#galeriaImg div>img {height: 100%;margin:0 auto; height:720px;display: block;} 
#imgNext, #imgPlay, #imgPrev {position:absolute;z-index:75;top:0px;width:35%;background-color:transparent;}
#imgPrev {left:0;margin-left:-2em ;}
#imgPlay {left: 33%; z-index:74;}
#imgNext {right: 0em;margin-right:-2em ;}
.prev {cursor: url("include/prev.png"), all-scroll;}
.next {cursor: url("include/next.png"), all-scroll;}
.pause {cursor: url("include/pause.png"), cell;}
.play {cursor: url("include/play.png"), move;}


main {padding:0;margin:0;}

.none {display: none;}

section#main {padding: 1% 5% 0; display: flex;justify-content: center;align-items: center;height: 90vh;}
section#main figure.entrada img { width:auto; height:750px; }


section#elements {display: flex;  align-items: center; height: 90vh;}
section.options>article.imgList {margin:0 auto; width: 1175px;z-index:999;}
section.player>article.imgList {width: 300px;margin:0 auto;overflow: hidden;z-index:999;}
section.player>article.imgList>div {height:120px; font-size:80%}

section#elements div.mainList {float:left;overflow: hidden;background-position: center;background-size: 120%;cursor: pointer;}
section.options div.mainList {width:350px;height:350px;margin:15px;position: relative;}
section.player div.mainList {width: 200px;height:130px;margin:8px;position: relative;}

section#elements div.mainList h4 {position:absolute; bottom:0;;margin: 0;color:#444}

section.options div.player {background-image: url('imatges/entrada/bg-elements.jpg');}
section.player div.player {background-image: url('imatges/entrada/bg-elements.jpg');}
section#elements div.player h3 {text-align: center;color:#eee;display: block;}
section.options div.player h3 {margin-top:60%;font-size: 32px;padding:16px 0;}
section.options div.player>audio {display:none;}
section.options>article.imgView {display:none;} 
section.player {padding:16px 0;display: flex;padding:8px 0;}

section.options>article.imgList>div>h4 {font-size: 48px;padding:16px}
section.player>article.imgList>div>h4 {font-size: 32px;padding:8px}
section.player div.player h3 {display:none}


section.player>article.imgList>div.player>audio {margin: 8px; height:36px;width: 95%;display:block}
section.player>article.imgList>div.player>h3 {font-size: 24px;margin:0;padding-top:0; cursor: pointer;}
section.player>article.imgView {width: 100%;}
section.player>article.imgView>div { width: 700px;height: 700px; margin:0 auto; background-size: contain ; background-position: center center; background-repeat: no-repeat;}

section#expo {padding:2% 20% 0;}
section#expo>article {display: inline-block;}
section#expo>article>figure {float: left;margin:0;}
figure.doble{width: 50%;}
figure.simple{width: 25%;}
figure.doble>img, figure.simple>img {width:100%;}

section#raons {padding:2% 15% 0;display:flex; align-items: center;justify-content: center;}
section#raons>article.mencions {padding:0;display:flex;}
section#raons>article.mencions>figure {width:22%;padding: 12px 8px 0 0;height:100%;} 
section#raons>article.mencions>figure>img {height:auto;width:100%}
section#raons>article.mencions>div {width: 75%;} 

section#mes {padding:2% 15% 0;display:grid; }
section#mes>article2 {margin-top:32px;position:relative;}
section#mes>article {place-self: center;margin-top: 7%;}
section#mes div.entrada2 { display: inline-block; width: 300px; height:300px;background-repeat:no-repeat; background-size: 100% 100%;
    background-position: center center;}
section#mes div.entrada {display: inline-block; width: 350px; height:350px;background-repeat:no-repeat; background-size: 100% auto;
    background-position: center center; margin:12px;}
section#mes h4 {text-align: center; margin-top:300px;font-size:32px;color:#eee;display: none;}

section#musica {padding:2% 15% 0;}
#qrList>a {width: 20%;height:100%;}
#qrList>a>img {padding:0 24px;}

/* Estils específics per a iPad en orientació horitzontal */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    nav {padding: 0.3rem 0; }

    section#main figure.entrada img {height: 600px; width:auto;}
    section.options div.mainList {width: 300px;height:100px;margin: 5px;}
    section.options>article.imgList>div>h4 {font-size: 40px;}
    section.options>article.imgList {width: 950px;}
    section.options div.player h3 {margin-top:55%;}
    section.player>article.imgList>div { height: 96px;font-size: 70%; color:#fff; }
    section#expo {padding: 4% 10% 0;}
    section#raons {padding: 4% 4% 0;}
    section#mes>article {margin-top: 4%;}
    section#mes { padding: 2% 10% 0;}
    section#mes div.entrada {background-position: center top;width: 380px;height: 285px;}
    section#portofolio { padding: 4% 5% 0; }
    section#portofolio article>figure { padding: 20px 0px 0 0; margin: 8px 36px 0 0; }

}
/* Estils per a mòbils en orientació horitzontal */ 
@media only screen and (max-width: 767px) and (orientation: landscape) {
    nav {padding: 0.3rem 0; }
    section.options div.mainList {width: 300px;height:200px;margin: 5px;}

}
/* ======================================================================================================= */
/* Estils específics per a iPad en orientació vertical */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    nav {padding: 0.3rem 0; }
    section#main figure.entrada img {height: auto;width: 100%;}
    section.options div.mainList {width: 363px;height:270px;margin:10px;}
    section.options div.player h3 { margin-top: 30%; }
    section#expo {padding: 5% 8% 0;}
    figure.doble { width: 66.6%; }
    figure.simple {width: 33.3%;}
    section#mes div.entrada {width: 500px;height: 300px;background-position: center top;}
    section#mes div.qr {width: 500px;height: 140px;background-position: center bottom;}
    section#raons, section#portofolio { padding: 4% 5% 0; }
    section#raons article>figure, section#portofolio article>figure{ padding: 20px 0px 0 0;  margin: 8px 36px 0 0; }
}
/* Estils per a mòbils en orientació vertical */ 
@media only screen and (max-width: 767px){
    nav {padding: 0.3rem 0; font-size: 111%;}
    section#main figure.entrada {margin:0 8px;max-width: 90%;}
    section#main figure.entrada img {height: auto; width:100%;}

    section.options div.mainList {width: 363px;height:125px;margin:4px; }
    section.options>article.imgList>div>h4 { font-size: 36px; }
    section.options div.player { display:none; }
    section.player>article.imgList>div.mainList.opt {display: none;}
    section.player>article.imgView {position: absolute;}
    section.player>article.imgView>div {  width: 100%;height: 700px;}
    section.player div.mainList.player {display: block;position: absolute;bottom: 4.5em;left: 20%;background: none;height: 4em; }
    section#expo {padding: 5% 20% 0;}
    figure.doble { width: 100%; }
    figure.simple {width: 50%;}
    aside>section {left: 2%; width: 95%;}
    #imgView { width: 100%; height: 100%;}
    section#raons, section#portofolio { padding: 4% 2% 0; }
    section#raons article>figure, section#portofolio article>figure{ padding: 20px 0px 0 0;  margin: 8px 36px 0 0; }
    section#raons>article.mencions {display: block;}
    section#raons>article.mencions>figure, section#raons>article.mencions>div {width: 100%;}
    section#raons>article.mencions>figure>img {width:32%;display: inline; }
    section#mes>article { width: 100%;    }
    section#mes div.entrada {width: 100%;padding-top:75%;background-position: center top;height:auto;}
} 
/* Estils específics per a iPhone en orientació vertical */ 
@media only screen and (min-device-width: 320px) and (max-device-width: 428px) and (orientation: portrait) { 
} 
/* Estils específics per a iPhone en orientació horitzontal */ 
@media only screen and (min-device-width: 320px) and (max-device-width: 428px) and (orientation: landscape) {
}