* {margin: 0; padding: 0; box-sizing: border-box;}
html {font: 16px 'Open Sans', Arial, Helvetica, sans-serif !important;  } 
body { background-repeat: no-repeat; background-position: center center;background-size: cover; background-color: #ddd; 
    color:#111;width:100%; height: 100%;min-width: 100%;max-width: 100%;min-height: 100vh;}
a {cursor: pointer;text-decoration: none;}
/* Header amb logos i nav i singularitats de pàgina index i de quan s'activa el menu lateral*/
header {margin:0;padding: 0; width: 100%;display: block; max-width: 100%;background: transparent;z-index:99}
section#header {background: #039; width: 100%;height:36px;position:absolute;display:block;z-index: 995}
#logo {background: url("/include/logo/EM-flag-White.png");background-position: 1.5em 4px;padding: 8px 2em 0 4em;width:128px;color: #fff;
    cursor:pointer;background-size: auto 100%;background-repeat: no-repeat;}
#mainLogo {padding:0 16px 0 32px;display:none;}
#social {position:absolute; top:0; right: 3em; padding-top:8px;}
img.social {border-style: none;height: 0.9em;padding: 0px 2px;filter: invert(99%) sepia(49%) saturate(67%) hue-rotate(298deg) brightness(116%) contrast(87%);}
#memberLink {display:none;padding-top:8px}
#menuDiv { position:absolute; right:16px;top:2px;z-index: 99;display:none;}
nav {position:absolute;top:0px;left:128px;background-color:transparent;color:#fff;padding: 8px 16px 16px;z-index: 99;}
nav a, nav a:link, nav a:visited {color: #fff;cursor: pointer;text-decoration: none;}
nav>ul { margin: 0 auto; padding: 0;}
nav>ul>li {list-style: none;float: left;padding-left: 2em;font-weight:bold;}
nav>ul>li>ul {position: absolute;margin-top: 0px;display:none;min-width: 12em;padding: 12px ;list-style: none;
        text-align: left;font-weight: normal; font-size:90%;
        background-color: #003399;color: #fff;border-radius: 0px 0px 15px 0px;border: #000 solid 1px; }
nav>ul>li:hover ul {display:block;}
nav>ul>li>ul>li {padding: 2px 8px;}
nav hr {margin:8px 0;}
#indexPage section#header {background:transparent; }
#indexPage nav {top:80px;font-size: larger;line-height: 1;}
#indexPage #logo {display:none;}
#indexPage #mainLogo {display:block;}
#indexPage #social {padding-top:24px; text-align: center;z-index: 99;}
#indexPage #memberLink {display:block;}
#indexPage #menu {top:32px;}
#indexPage section#header.menu, section#header.menu {position:fixed;background: #039;width: 288px;height:100%;}
section.menu #social { display:none;}
section.menu #menu { display:block; position:fixed;}
#indexPage section.menu nav, section.menu nav {display:block;padding-top:128px;position:absolute; top:0px; left: 0px;font-size:125%;padding-left: 0;}
#indexPage section.menu #logo, section.menu #logo {display:block;width:256px;height:64px;font-size: 200%;
    background-position: 1em 4px;padding-top:32px;margin-top:16px;margin-top:16px;}
#indexPage section.menu #mainLogo {display:none;}  
section.menu nav>ul>li {float:none;}
section.menu nav>ul>li>ul {position: relative;border:none;width: 90%;}
section.menu nav>ul>li>ul>li {padding-right:0;}

@media (orientation : portrait) {
#social {display:none;}
#menuDiv { display:block;position:fixed;}
}
@media (orientation : portrait) and (max-width: 700px) {
nav { display:none;}
}
/* footer peu de pàgina*/
footer{width: 100%; padding-top:8px;background:#BFA5A3; font-size: 90%;}
footer a, footer a:link, footer a:visited { color:rgb(24, 22, 22); font-weight: bold;}
footer > article {padding: 16px 8px;background: #BFA5A3;clear: both;font-size: 90%;height: fit-content;min-height: 32px;
    position: relative;width: 960px;margin: 0 auto;}
footer> article  div {width: 49.6%;display: inline-block;vertical-align: top;}
footer > article p, footer > article h3 {margin: 0;padding: 0 8px;line-height: 1em;overflow-wrap: break-word;}
footer hr {margin: 12px 0;clear: both;box-sizing: content-box;height: 0;overflow: visible;}
/* Fons de pàgina del body i del main en funció de la classe de la pàgina*/
body.mainAbout {background: rgb(8,4,83);
    background: linear-gradient(146deg, rgba(8,4,83,0.6778361002604167) 0%, rgba(43,88,118,1) 35%, rgba(110,110,110,1) 100%);   }
main.mainAbout {background-color:#f0f0f0ee;}
body.mainAvis  {background-image: linear-gradient(to right bottom, #051937, #003c60, #006487, #008ea9, #01bac2);}
main.mainAvis  {background-color:#ffffffff;}
body.euroMov   {background: #022160c3;}
main.euroMov   {background-color:#e8d5b5ff;}
body.mainAgenda {background-image: linear-gradient(to top, #feada6 0%, #BFA5A3 100%);}
main.mainAgenda {background-color:#eeeeeedd;}
body.mainPublica {background: #ffddbb linear-gradient(125deg, #ffddbb 0%, #ffaa66 50%, #8a8 100%);}
main.mainPublica {background-color:#efefefef;}
body.mainArxiu {background: #ffddbb linear-gradient(125deg, #ffddbb 0%, #ffaa66 50%, #8a8 100%);}
main.mainArxiu {background-color:#efefefef;}
body.mainParti {background: #ffddbb linear-gradient(125deg, #ffddbb 0%, #ffaa66 50%, #8a8 100%);}
main.mainParti {background-color:#efefefef;}
body.portafoli {background-color: #ffddbb;
    background-image: linear-gradient(125deg, #ffddbb 0%, #ffaa66 50%, #8a8 100%);margin:0;padding:0;;}
main.portafoli {background-color:#ecb194;}

/* main */
main {width: 65%;min-height: 30em;z-index:70; margin: 0px auto 2em auto; padding-bottom: 1em;}
main.transparent {background-color: transparent;display: block;margin:0px 15%;width:70%;}
main.formulari {display: block;margin:0px 15%;width:70%;}

main>h1 {font-size: 200%;font-weight: bold;padding:1em 0 0.5em;text-align:center;}
main > section {display: block;padding: 0 3em 0.5em 3em}
main p {padding:8px 0;}
main a, main a:link, main a:visited {color: #003399;}

section#mainTitle {padding-top:33px;width:100%;color:#039;display: table;}
section#mainTitle h1 {padding:32px 96px 0 0;text-align:center;font-size:225%;}
section#mainTitle>div.mainLogo { width:333px;height:96px;margin:0;padding:0;float:left; font-size: 16px; display: block;}
section#mainTitle>div.mainLogo img {height: 96px;width: auto;padding-right:16px;float: left;}
section#mainTitle>div.mainLogo p {margin: 0;padding:28px 0 0;font-size:21px;}



main.mainParti>section>h1  {font-size:200%;text-align:center; color:#039; padding:16px 0 32px}



div.title {width:100%;margin: 32px auto 16px auto;padding-left:32px;border-bottom:1px solid #000;}
div.title {height: 96px; position:relative;
    }
div.title img {height: 96px;width:auto;float: left;}
div.title p {color: #003399;margin: 0;padding: 0 0 0 110px;position:absolute;bottom:16px;font-size: 16px;display:block;width:500px;}
div.title>p>b {font-size: 20px;position:absolute;bottom:18px;}
/* aside amb els frameCopy */

aside {display:none; position: fixed;top:0;left:0;width: 100%;height: 100%;color:whitesmoke; background:transparent;z-index: 9000;}
aside>section#frameCopy {background-color:#990;width: 50%;margin: 128px auto 0;height: auto;display: block;}
aside>section#frameCopy {margin:96px auto; padding: 2em;position:relative;}
aside>section#frameCopy>div {width:auto;height:auto;font-family: Arial, Helvetica, sans-serif !important; font-size:16px;}
aside>section#frameCopy h1, aside>section#frameCopy h3 {text-align: center;}
aside>section#frameCopy h1 {font-size: 150%;padding-bottom: 1em;color:#fff;}
aside>section#frameCopy fieldset {display:block; margin:0 auto;width:24em;}
aside>section#frameCopy fieldset>div {float:left;margin:0 1em;}
#frameResposta {display: none}
aside>section button.closeButton { position:absolute;top:8px;right:8px;display: block;background-color: #ddd;border:none;padding:0;width: 30px;height: 30px;border-radius: 16px;cursor: pointer;}
aside>section button.finalButton { display: block;background-color: #ddd;border:none;padding:3px 12px;font-size: 16px;margin-left:50%;border-radius: 4px;cursor: pointer;}

.clr {clear: both;}
.none {display: none;}
/* --------------- */
.box {float: left;}
.q100 {width: 100%;}
.q50 {width: 50%;}
.q40 {width: 40%;}
.q60 {width: 60%;}
.q30 {width: 30%;}
.q70 {width: 69%;}
.q20 {width: 20%;}
.q15 {width: 15%;}
.q10 {width: 10%;}
.q7 {width: 7%;}
.q5 {width: 5%;}
/* --------------- */
a.icon, a.icon:hover, a.icon:focus {color: #003399;padding: 2px 2em 4px 2px;font-weight: bold;
    background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpolygon%20fill%3D%22blue%22%20points%3D%222%2C5%203%2C5%203%2C3%209%2C3%209%2C9%207%2C9%207%2C10%2010%2C10%2010%2C2%202%2C2%22/%3E%3Cpolygon%20points%3D%220.5%2C10.5%203.5%2C7.5%202%2C6%205.5%2C6%205.5%2C10%204.5%2C8.5%201.5%2C11.5%22/%3E%3C/svg%3E") no-repeat right;
} 
a.icon[href^="http"], 
a.icon[href^="http"]:hover,
a.icon[href^="http"]:focus {color: #003399;padding: 2px 2em 4px 2px; font-weight: bold;
    background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpolygon%20fill%3D%22blue%22%20points%3D%222%2C2%205%2C2%205%2C3%203%2C3%203%2C9%209%2C9%209%2C7%2010%2C7%2010%2C10%202%2C10%22/%3E%3Cpolygon%20points%3D%226.2%2C2%2010%2C2%2010%2C5.8%208.6%2C4.4%206.5%2C6.5%205.5%2C5.5%207.6%2C3.4%22/%3E%3C/svg%3E") no-repeat right;
}
a.icon[href^="mailto"], 
a.icon[href^="mailto"]:hover,
a.icon[href^="mailto"]:focus {color: #003399;padding: 2px 2em 4px 2px;font-weight: bold;
    background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2012%2012%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22blue%22%20d%3D%22M1%2C4%20h10%20v6%20h-10z%20l10%2C6m0%2C-6%20l-10%2C6%22/%3E%3C/svg%3E") no-repeat right;
}
a.icon:hover,a.icon:focus,
a.icon[href^="http"]:hover, a.icon[href^="http"]:focus,
a.icon[href^="mailto"]:hover,a.icon[href^="mailto"]:focus {background-color: #ecce7a;}

/* =========================================================== */
@media (orientation : landscape) and (max-width:1025px) {
    header>nav>div#social {display: none;}
    main, main.transparent {width:90%;margin-left: 5%;}

}
@media (orientation : landscape) and (max-width:1499px) {
    section#contentLeft {display:none;}
    main, main.transparent, main.formulari {width:90%;margin-left: 5%;}
    section#contentRight {float:none;width:90%;margin-left: 5%;}
    section#contentRight>table,section#contentRight>div  {float:left; margin:1em;padding: 0;}
    main>section {padding: 0 1.5em 0.5em;}
    main>section>article {margin:0 1em;}
    #indexPage main{margin-left:5%;}

}


@media (orientation : portrait) and (max-width:1025px) {
    header>nav>div#social {display: none;}
}
@media (orientation : portrait) {
    section#contentLeft {display: none;}
    main {width:90%;margin-left: 5%;}
    main.transparent {width:100%;margin: 0;}
    section#contentRight {float:none;width:90%;margin-left: 5%;}
    section#contentRight>table,section#contentRight>div  {float:right; margin:1em;padding: 0;}

}

@media print {
header, footer, section#contentLeft, section#contentRight {display:none;}
main {display:block; width:100% !important;margin:0 !important;padding:0;font-size:80%; }
main>div {margin:0;padding:0;}
main img {width:50%;}
main>h1 {font-size:150%;}
main button {display: none;}
main>section {margin:0;padding:0;}
main.formulari {margin:0;padding:0;}
.notPrint {display: none;}
}