html {height: 100%;width: 100%; font : 14px "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif;
  scroll-behavior: smooth;

}
body {  margin: 0;padding: 0;background-color:#eee; color:#000000;  }
/*  -------------------------------------------  */
header,nav,main,section,article,aside,footer,hgroup{display: block;}     
body, header, footer, nav, main, section, article, aside, div, figure,img, p, ul, ol, li, h1, h2, h3, h4, h5, h6, dl, dt, dd, 
form, fieldset, input, textarea, blockquote,details,abbr {margin: 0; padding: 0; border: 0; list-style:none }
a, abbr { text-decoration: none; }
.clr{clear: both;}
.none{display:none;}
/*  -------------------------------------------  */
footer {padding: 9px 0 16px 0; clear: both;font-size: 0.9rem;}
footer>section {width: 100%;margin:0 auto 36px; display: flex;justify-content: space-between; }
footer #idPeu {border-top: solid 2px #000;}
footer #idPeu article {width: 46%; clear: none; text-align: center;padding-top:12px;}
/* */
hr {clear: both;}
button {margin-top:8px;text-align: center;margin:8px 0 0 33%; text-decoration: none;border: none;
        color: #fff;
        background-color: #0073e6;
        padding: 8px 16px;
        transition: background-color 0.3s;}


footer a,footer a:visited {color:#039;cursor: pointer;}

/*  -------------------------------------------  */

main { z-index: 50;width:100%; height:auto; }
section {width: 100%; height: auto;clear: both;}
article {width: 100%;margin:0 auto;clear: both;}
/*  */
#idMain {padding:0;} 
#mainImg {height: 80%;width: 100%; padding: 32px 0 0 0}
#mainImg div {height: 100%;} 
/* Estils per a about */
.about {display: block;}
.about abbr { z-index:99 !important; max-height:3em; 
    line-height:3em; text-align: center;}      
.about h1 {font-size:3em; padding: 24px 0 8px;}
.about div {margin-left: auto; margin-right: auto;width: 21em;padding: 0.5em 0 0 7em;border-top: solid 2px #666}
.about a,  .about a:hover, .about a:visited {color: #333}
/*  */
.container {margin-bottom: 12px; }
.container h1 {text-align: center;font-size: 2.5rem;margin-bottom: 20px;padding: 69px 0 8px; border-bottom: solid #878282 3px; }
#idObra .container h5 {text-align: left;font-size: 1.5rem;margin-bottom: 20px;padding: 69px 0 8px; border-bottom: solid #878282 1px; }
.container p {font-size: 1.2rem; padding: 4px 0 ; }
.container img {max-width: 100%;height: auto;}
.marge {padding:0 32px;}
/*  */
div.bio>h1 {padding: 24px 0 8px;border-bottom:none;}
 .expos h2 {padding: 8px 0 8px}
 .expos p {font-size: 16px;padding:0 0 2px}
em {font-style: normal;}
/* Estils per a plans i projecte */
figure>img {width: 50%; float:left;}
figure>figcaption {width:50%; float:left;text-align:left;padding-left: 16px;}
#idObra {font-size:125%}
#idObra figure {width: 33%; float:left; display: flex; align-items:center; padding:8px 0; position: relative;z-index: 90;}
#idProjectesOld figure {width: 100%;display: flex; align-items:center; padding:8px 0;}
#idProjectes {font-size:120%; min-height: 100vh;}
#idProjectes figure {width: 50%; float:left; display: flex; align-items:center; padding:8px 0;}

#idProjectes .col3>figure {width: 33%;}



div.album>figure {cursor: pointer;}
/* Estils per a contact  */
#idContact {min-height: 90vh;}
#idContact figure {    display: flex; align-items: center;justify-content: center;}
#idContact figcaption { text-align: center;font-size: 136%; padding: 0 32px; width: auto;}
#idContact .contact figcaption { font-size: 175%;}
article.contact {display: flex;align-items: center;color:#575758}
article.contact>div {width:55%;padding:16px;}
article.contact>div:first-child {text-align:right;width:45%}


/* Estils per a addon  */
#idAddon {position:fixed;background-color: #0000ff63;top:0;left:0;width:100%;height:100%; z-index: 1001;}
#idAddon>article {display:flex;justify-content: center; align-items: center;margin-top: 10%;}
#idAddon p {padding:8px 0;}
#idAddon a,#idAddon a:visited {color:#039;cursor: pointer;}
#adNews form {background-color: azure;padding:16px 64px 64px;width:24rem;}
#adNews label {clear: both;}
#adNews input[type="text"],
#adNews input[type="email"],
#adNews input[type="password"] {border: #111 solid 1px;width: 80%;padding:1px 4px;margin-bottom: 8px;}
#adNews input[type="checkbox"] {width: 2em;}
#adNews button {margin-top:8px;text-align: center;margin:8px 0 0 33%;}
#adPrivat, #adMessage { background-color: #eee;width: 50%;padding:32px;}
#adPrivat p #adMessage p {padding:8px 0;}
#idAddon a,#idAddon a:visited {color:#039;cursor: pointer;}
/* Estils per aside */
aside {display:none;z-index:101;position:fixed;left:0px;bottom:0em;width:100%;height:100%;background-color:#ffffff;}
#galeriaAlbum { position: fixed;z-index: 50;top: 0;bottom: 0;left: 0;right: 0;width: auto;height: 80%;padding: 0em;margin: 4em 4em 0em 4em;}
#galeriaImg {height: 100%;width: 100%;}
#galeriaImg div {height: 100%;} 
#galeriaImg div#imgTitle {height: 2em; padding-top:8px;} 
#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("prev.png"), all-scroll;}
.next {cursor: url("next.png"), all-scroll;}
.pause {cursor: url("pause.png"), cell;}
.play {cursor: url("play.png"), move;}
/* */
#galeriaThumbs {z-index:98;position:fixed;left:0px;bottom:0em;width:94%;height:5em;min-height:5em;max-height:5em;border-top:#aaa solid 1px;padding: 0 3%;}
#thumbPrev, #thumbNext {position: fixed;bottom: 0px;width: 3%;height: 5em;}
#thumbPrev {left: 0px;background:transparent url('prev.png') center center no-repeat;}
#thumbNext {right: 0em;background:transparent url('next.png') center center no-repeat;}
#thumbsAlbum {margin: 0.5em 0 0 0;max-height: 4em;     overflow: hidden;}
#thumbsList { height: 4em; margin: 0 0px; display: inline-block;max-height: 4em;  }
#thumbsList img { width: auto; height: auto; max-height: 4em; max-width: 4em; margin-left: 7px; float: left; cursor: pointer; opacity:0.5 }


/* Estils per a pantalles grans (escriptoris) */
@media screen and (min-width: 1500px) {
    footer #idPeu {width: 60%;margin:0 auto 36px; display: flex;}
    footer #idPeu article {width: 48%;margin:0 1%;}
    
article {width: 60%;margin:0 auto;}
}
@media screen and (min-width: 9650px) {
}
@media screen and (orientation: portrait) {
}