:root { --color1: #1a63a9; --color2: #e7ef7a; --color3: #763626; } * { box-sizing: border-box; } body,input,textarea,select{ font-family:'PT Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; color:#333; font-size:16px; font-weight:normal; text-align:left } a { font-family:'PT Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; color:#333; font-weight:normal; text-align:left } BODY { background-color: #fff; margin: 0; } h1 { font-family:'Noticia Text', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; font-size: 60px; display:inline; color:#D40404; } h2 { font-size: 22px; display:inline; color: #232323; } h2 a:link { text-decoration:none; color:#fff333;} h3 { font-size: 18px; display:inline; color: #323232; } h4 { font-size: 18px; display:inline; color: #333333; background-color: #ffffff; padding: 1px 10px 1px 15px; } .contenidor { width: 90%; max-width: 1000px; margin: 0 auto; background-color: #FFF; padding:15px 20px; margin:0px auto 20px; color: #636363; font-size: 16px; font-family: 'Ubuntu', 'Lato'; } .logo { width: 120px; border-radius: 10px; } .imatge100 { width: 100%; border-radius: 25px; -webkit-box-shadow: 2px 2px 4px 3px #cccccc; box-shadow: 2px 2px 4px 3px #cccccc; } .capcelera { width: 100%; border-bottom: 5px solid #333; background-color: var(--color1); } .capcelera_interior { width: 90%; max-width: 1000px; margin: 0 auto; } .titol_capcelera,.titol_capcelera a { margin-left: 20px; font-size: 50px; color: #FFFFFF; font-weight:bold; text-decoration:none; } .titol_subcapcelera,.titol_subcapcelera a { color: #250500; } .titol_pagina, .titol_pagina a { font-family: 'Droid Sans', 'PT Sans','Noticia Text', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; font-size: 50px; color: ; font-weight:bold; text-decoration:none; } .titol_pregunta, .titol_pregunta a { font-family: 'Droid Sans', 'PT Sans','Noticia Text', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; font-size: 30px; color: #4b92db; font-weight:bold; text-decoration:none; } .taula { background-color: #F4F4F4; width: 100%; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 2px 2px 10px 0px #cccccc; box-shadow: 2px 2px 10px 0px #cccccc; padding:15px 20px; margin:30px auto 20px; border-spacing: 20px; border-collapse: separate; } .taula TH { font-size: 26px; padding:15px; color: #fff; background-color: #bf1a00; border-bottom: 2px solid #400202; } .taula2 { background-color: #F4F4F4; width: 100%; padding:15px 20px; margin:30px auto 20px; color: #63636; } .uela { list-style: none; } .uela li { padding:6px; } .uela li::before { content: "•"; color: red; padding: 10px; } .info { border-left: 1px dashed #CCCCCC; } .bicolor tr:nth-child(odd) { background-color: #ddbfff; } .taula_info { width: 100%; padding:5px; } .taula_info TH { font-size: 20px; padding:15px; background-color: #CCCCC0; border-bottom: 2px solid #dddddd; } .taula_info caption { font-size: 13px; } .taula_info TD { padding:15px; border-top: 1px solid #ffffff; border-bottom: 1px solid #dddddd; } .taula_info td:hover { /*background-color:#FFF;*/ } .taula_info2 { padding:3px; background-color: #FFFFFF; } .taula_info2 TH { font-size: 16px; padding:12px; background-color: #CCCC00; border-bottom: 2px solid #dddddd; } .taula_info2 TD { padding:15px; border-top: 1px solid #ffffff; border-bottom: 1px solid #dddddd; } .taula_info2 td:hover { background-color:#FFF; } .foto_interior { max-width: 500px; } .foto_interior_100 { width: 100%; border: 1px solid #333; margin: 10px; } .foto_interior_petita { height: 150px; margin-left: 20px; margin-bottom: 20px; } .sense_estil { padding:1px 2px 1px 2px !important; border: 0px; } .treballant { border:2px solid #ef3823; -webkit-border-radius: 4px; border-radius: 4px; text-align: center; background-color:#f7b1a5; padding:15px 10px; } .alert { background-color:#FEB36A; border:2px solid #e87306; border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#636363; font-size:18px; padding:8px 35px 8px 14px; text-align:left; text-shadow:rgba(255, 255, 255, 0.498039) 0 1px 0; text-align: center; } .destacat { background-color: #b799d8; border:1px solid #f5f5f5; color:#333; font-size:18px; padding:4px; text-align:CENTER; text-shadow:rgba(255, 255, 255, 0.498039) 0 1px 0; line-height: 150%; } .destacat2 { background-color: #96fa79; border: 4px solid #31770a; color: #333; font-size: 21px; padding: 18px; text-shadow: rgba(255, 255, 255, 0.498039) 0 1px 0; line-height: 150%; margin-bottom: 30px; width: 90%; margin: auto; text-align: center; border-radius: 10px; } .destacat3 { background-color: #c0f98e !important; padding:5px 15px; line-height: 150%; } .destacat4 { color: #333; -webkit-text-stroke: 2px #fff; text-shadow: 6px 6px 8px #333333c2; padding:5px 15px; line-height: 150%; border: 3px solid #333; border-bottom-left-radius:6px; border-bottom-right-radius:6px; border-top-left-radius:6px; border-top-right-radius:6px; } .fs_destacat { background-color:#FFF; border:4px dashed #00FB00; border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#636363; font-size:18px; padding:18px 35px 18px 35px; text-align:left; } .total_testimonis { background-color:#00FF00; border:2px solid #087508; border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#333; font-size:18px; text-shadow:rgba(255, 255, 255, 0.498039) 0 1px 0; margin-bottom: 20px; padding:8px 10px 8px 10px; } .contenidor_peu { background-color: #b5b5b5; width: 100%; border-top: 5px solid #605246; text-align: center; } .peu { width: 90%; max-width: 1000px; margin:0px auto 0px; color:#353535; font-size:14px; } .peu a { font-size:14px; color:#353535; } .peu2 { width: 900px; margin:10px auto 10px; color:#454545; font-size:16px; border-top: 1px solid #605246; border-bottom: 1px solid #605246; } footer { color:#bb6413; font-size:14px; } .twitter_incrustat a { font-size:14px; } .compartir { border-top: 2px solid #A6A6A0; border-bottom: 2px solid #A6A6A0; background-color:#fffff0; } .compartir TD { padding:1px 10px; } /* Tooltip container */ .tooltip { position: relative; display: inline-block; } /* Tooltip text */ .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #4080ff; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; /* Position the tooltip text */ position: absolute; z-index: 1; bottom: 95%; left: 50%; margin-left: -60px; /* Fade in tooltip */ opacity: 0; transition: opacity 0.3s; } .div_fotos { margin:auto; background-color:#DDD; max-width: 1000px; } .bg_senyera { background-image: linear-gradient(90deg, #ffe262 11%, #da281c 11%, #da281c 22%, #ffe262 22%, #ffe262 33%, #da281c 33%, #da281c 44%, #ffe262 44%, #ffe262 55%, #da281c 55%, #da281c 66%, #ffe262 66%, #ffe262 77%, #da281c 77%, #da281c 88%, #ffe262 88%, #ffe262 100% ); } .bg_senyera_tr { background-image: linear-gradient(90deg, #ffe26266 11%, #da281c66 11%, #da281c66 22%, #ffe26266 22%, #ffe26266 33%, #da281c66 33%, #da281c66 44%, #ffe26266 44%, #ffe26266 55%, #da281c66 55%, #da281c66 66%, #ffe26266 66%, #ffe26266 77%, #da281c66 77%, #da281c66 88%, #ffe26266 88%, #ffe26266 100% ); } /* Tooltip arrow */ .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } /* Show the tooltip text when you mouse over the tooltip container */ .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } .cella_testimoni { vertical-align:text-top; background-color:#e6e6e6; border:1px solid #f5f5f5; border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#636363; font-size:18px; margin:-10px auto 20px; padding:18px 35px 18px 35px; text-align:left; text-shadow:rgba(255, 255, 255, 0.498039) 0 1px 0; } .cella_testimoni td:hover { background-color:#FFF; } .mesmostres a:link { background-color:#FF6600; color: #111111; padding: 14px 4px 4px 8px; text-decoration:none; } .remarkable { border-top: 2px solid #CCCCCC; border-bottom: 2px solid #CCCCCC; background-color:#91f329; margin-top: 40px; margin-bottom: 30px; padding: 10px; text-align: center; } /* --- menus ---- */ .menu { width:90%; } .menu td { padding: 3px 16px 3px 16px; } .menu a { text-decoration:none; font-weight:bold; } .menu td:hover { background-color:#ccc; } .menu_on { background-color:var(--color2);; } .menu_off { background-color:#fff; } .menu_destacat { background-color:#E87306; font-weight:bold; } .chart { width: 100%; height: 300px; } /* --- taules ---- */ .llista { } .llista TD { background-color:#e6e6e6; padding: 4px 4px 4px 8px; } .llista TH { background-color:#FFFFFF; padding: 14px 4px 4px 8px; } .llista tr:hover td{ background-color:#FFFFFF; color: #000000;} .llista_destacat { background-color:var(--color2); !important; font-weight:bold; font-size:20px; } .hastag { padding: 2px 14px; background-color:#258380; border-bottom-left-radius:2px; border-bottom-right-radius:2px; border-top-left-radius:2px; border-top-right-radius:2px; } a.hastag { text-decoration:none; color: #FFFFFF; } /* --------- formulari ----------- */ .formulari { width: 100%; font-size:16px; background-color:#FFFFFF; } .formulari TD { padding:8px; } .formulari_desc { font-size:12px; } .input1 { font-size:16px; background-color:#f4f4f4; border:1px solid #cccccc; border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#333; width: 400px; padding: 4px 10px; } .input1nw { font-size:16px; background-color:#f4f4f4; border:1px solid #cccccc; border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#333; padding: 4px 10px; } .input1error { font-size:16px; background-color:#ffc1c1; border:2px solid #c0000c; border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#c0000c; width: 400px; padding: 4px 10px; } /* --------- botons ----------- */ .boto1 { color: #363636; font-family:'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; font-size:20px; padding: 4px 60px; border: 1px solid #ff920d; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -webkit-box-shadow: rgba(0, 0, 0, .25) 0 1px 1px; -moz-box-shadow: rgba(0, 0, 0, .25) 0 1px 1px; -o-box-shadow: rgba(0, 0, 0, .25) 0 1px 1px; box-shadow: rgba(0, 0, 0, .25) 0 1px 1px; cursor: pointer; background: #ffa84c; /* Old browsers */ background: -moz-linear-gradient(top, #ffa84c 32%, #ff7b0d 82%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(32%,#ffa84c), color-stop(82%,#ff7b0d)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffa84c 32%,#ff7b0d 82%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffa84c 32%,#ff7b0d 82%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffa84c 32%,#ff7b0d 82%); /* IE10+ */ background: linear-gradient(top, #ffa84c 32%,#ff7b0d 82%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 ); /* IE6-9 */ background-color:#ff9430; /* per a IE */ } .boto1:link,.boto1:visited { color: #363636; text-decoration:none; } .boto1:active { position:relative; top:2px; -moz-box-shadow:0px 0px 0 #819F45; -webkit-box-shadow:0px 0px 0 #819F45; //background: -moz-linear-gradient(center top , #A5C956 0%, #CDEB8E 100%) repeat scroll 0 0 transparent; //background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5c956), color-stop(100%,#cdeb8e)); } .boto2 { color: #363636; font-family:'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; font-size:15px; padding: 4px 10px; border: 1px solid #ff920d; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -webkit-box-shadow: rgba(0, 0, 0, .25) 0 1px 1px; -moz-box-shadow: rgba(0, 0, 0, .25) 0 1px 1px; -o-box-shadow: rgba(0, 0, 0, .25) 0 1px 1px; box-shadow: rgba(0, 0, 0, .25) 0 1px 1px; cursor: pointer; background: #ffa84c; /* Old browsers */ background: -moz-linear-gradient(top, #ffa84c 32%, #ff7b0d 82%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(32%,#ffa84c), color-stop(82%,#ff7b0d)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffa84c 32%,#ff7b0d 82%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffa84c 32%,#ff7b0d 82%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffa84c 32%,#ff7b0d 82%); /* IE10+ */ background: linear-gradient(top, #ffa84c 32%,#ff7b0d 82%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 ); /* IE6-9 */ background-color:#ff9430; /* per a IE */ } .boto2:link,.boto2:visited { color: #363636; text-decoration:none; } .boto2:active { position:relative; top:2px; -moz-box-shadow:0px 0px 0 #819F45; -webkit-box-shadow:0px 0px 0 #819F45; //background: -moz-linear-gradient(center top , #A5C956 0%, #CDEB8E 100%) repeat scroll 0 0 transparent; //background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5c956), color-stop(100%,#cdeb8e)); } .boto3 { color: #363636; font-size:14px; padding: 1px 10px; border: 1px solid #ff920d; background: #ffa84c; /* Old browsers */ background-color:#ff9430; /* per a IE */ } .boto3:link,.boto3:visited { color: #363636; text-decoration:none; } .boto3:active { } .bt_whatsapp { text-transform: uppercase; font-size: 80%; font-weight: 700; padding: 3px 12px; color: #e2ffd9; background-color: #42aa42; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; } .bt_whatsapp:link,.bt_whatsapp:visited { color: #FFFFFF; text-decoration:none; } .bt_facebook, a.bt_facebook { font-family:'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; font-size: 14px; text-align: center; text-decoration: none; padding: 6px 12px; background-color: #3b5998; border: 2px solid transparent; color: white; } .petita { font-size:14px; } .barra { background-color:#FEB36A; border:0px solid #e87306; height: 25px; background: url('img/bg1.png') repeat-x scroll center bottom; } /* ------ errors --------*/ .error { width:50%; position:relative; left:25%; border: 3px solid #FC0000; font-size: 18px; font-weight:bold; color: #FF0000; text-decoration: none; padding: 0.2em 0.1em; margin-top : 2px; margin-bottom : 2px; background-color: #fecccc; text-align:center; } .noerror { width:50%; position:relative; left:25%; border: 2px solid #009966; font-size: 18px; font-weight:bold; color: #009966; text-decoration: none; padding: 0.2em 0.1em; margin-top : 2px; margin-bottom : 2px; background-color: #dff6c6; text-align:center; border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; } fieldset { border:1px dotted ; padding: 5px 10px 10px; background-color: #f4f4f4; margin: 5px 10px 20px 20px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } legend { background-color:; border:2px solid ; padding: 0.2em 1.2em; color:#FFFFFF; text-align:center; -moz-border-radius: 2px; -webkit-border-radius: 2px; text-transform: uppercase; } /* ============================================================================================================================ == BUBBLE WITH AN ISOCELES TRIANGLE ** ============================================================================================================================ */ /* THE SPEECH BUBBLE ------------------------------------------------------------------------------------------------------------------------------- */ .triangle-isosceles { position:relative; padding:15px; margin:1em 0 1.7em; color:#000; background:#f3961c; /* default background for browsers without gradient support */ /* css3 */ background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c)); background:-moz-linear-gradient(#f9d835, #f3961c); background:-o-linear-gradient(#f9d835, #f3961c); background:linear-gradient(#f9d835, #f3961c); -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } /* Variant : for top positioned triangle ------------------------------------------ */ .triangle-isosceles.top { background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3961c), to(#f9d835)); background:-moz-linear-gradient(#f3961c, #f9d835); background:-o-linear-gradient(#f3961c, #f9d835); background:linear-gradient(#f3961c, #f9d835); } /* Variant : for left/right positioned triangle ------------------------------------------ */ .triangle-isosceles.left { margin-left:50px; background:#f3961c; } /* Variant : for right positioned triangle ------------------------------------------ */ .triangle-isosceles.right { margin-right:50px; background:#f3961c; } /* THE TRIANGLE ------------------------------------------------------------------------------------------------------------------------------- */ /* creates triangle */ .triangle-isosceles:after { content:""; position:absolute; bottom:-15px; /* value = - border-top-width - border-bottom-width */ left:50px; /* controls horizontal position */ border-width:15px 15px 0; /* vary these values to change the angle of the vertex */ border-style:solid; border-color:#f3961c transparent; /* reduce the damage in FF3.0 */ display:block; width:0; } /* Variant : top ------------------------------------------ */ .triangle-isosceles.top:after { top:-15px; /* value = - border-top-width - border-bottom-width */ right:50px; /* controls horizontal position */ bottom:auto; left:auto; border-width:0 15px 15px; /* vary these values to change the angle of the vertex */ border-color:#f3961c transparent; } /* Variant : left ------------------------------------------ */ .triangle-isosceles.left:after { top:16px; /* controls vertical position */ left:-50px; /* value = - border-left-width - border-right-width */ bottom:auto; border-width:10px 50px 10px 0; border-color:transparent #f3961c; } /* Variant : right ------------------------------------------ */ .triangle-isosceles.right:after { top:16px; /* controls vertical position */ right:-50px; /* value = - border-left-width - border-right-width */ bottom:auto; left:auto; border-width:10px 0 10px 50px; border-color:transparent #f3961c; } /* variacio nomes el bubble */ .isosceles { padding:15px; margin:1em 0 1.7em; color:#000; background:#f3961c; /* default background for browsers without gradient support */ /* css3 */ background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c)); background:-moz-linear-gradient(#f9d835, #f3961c); background:-o-linear-gradient(#f9d835, #f3961c); background:linear-gradient(#f9d835, #f3961c); -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } .campanyes { font-size: 0.75em; } .campanyes TD { border-right: 1px solid #605246; padding:15px; } .campanyes TD:last-child { border-right: 0px ; } blockquote { background: #F9F6CA; border-left: 10px solid #ccc; margin: 1.5em 10px; padding: 0.5em 30px; quotes: "\201C""\201D""\2018""\2019"; font-size: 20px; } blockquote:before { color: #ccc; content: open-quote; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em; } blockquote p { display: inline; } .taula_login { font-family: 'PT Sans', sans-serif; width: 600px; margin-top: 0px; border: 1px solid #636363; border-bottom-left-radius:5px; border-bottom-right-radius:5px; border-top-left-radius:5px; border-top-right-radius:5px; background-color:#F4F4F4; color: #363636; box-shadow:#CCCCCC 2px 2px 10px 0; -webkit-box-shadow:#CCCCCC 2px 2px 10px 0; } .taula_login a { color:#5d3a1c; } .taula_login_cap { font-family: 'Doppio One', sans-serif; background-color: #E5E5E8; color: #363636; text-align: center; height: 100px; border-bottom: 1px solid #cccccc; border-top-left-radius:5px; border-top-right-radius:5px; } .taula_login_cos { background-color: #e9e5e5; color: #363636; border-top: 1px solid #FFFFFF; border-bottom-left-radius:5px; border-bottom-right-radius:5px; } .capcelera_admin { width: 100%; height: 100px; background-color:; border-bottom: 10px solid ; } @media screen and (max-width: 900px) { BODY { padding: 0px; } h2 { font-size: 18px; } .capcelera_interior { width: 100%; } .titol_capcelera,.titol_capcelera a { font-size: 40px; font-weight:bold; } .titol_pagina, .titol_pagina a { font-size: 25px; } .logo { width: 80px; } .menu td { padding: 4px 2px; } .menu a { font-size: 13px; } .contenidor { width: 100%; padding:5px; margin:0px; background-color: #F4F4F4; } .peu { width: 100%; font-size:12px; } #mapid { width: 100%; height: 220px; text-align: center; vertical-align: middle; } .campanyes TD { padding:5px; } .boto1 { padding: 4px 15px; } .taula { padding:3px 4px; margin:10px auto 10px; } .llista { width: 100%; } .llista TD { padding: 2px; } .llista TH { padding: 4px; } fieldset { margin: 5px auto 10px; } .input1 { width: 100%; padding: 4px; } .input1error { width: 100%; padding: 4px; } .remarkable { margin-top: 10px; margin-bottom: 10px; padding: 10px; } .bt_whatsapp { text-transform: capitalize; padding: 2px 8px; color: #e2ffd9; background-color: #42aa42; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; } }