:root { --color1 : #e6a726; --color2 : #224ea1; --color3 : cornflowerblue; } @font-face { font-family: 'NeoSansPro'; src: url('fonts/NeoSansPro.ttf') format('truetype'); } @font-face { font-family: 'NeoSansProBold'; src: url('fonts/NeoSansProBold.ttf') format('truetype'); } * { box-sizing: border-box; } body,input,textarea,select{ font-family: 'NeoSansPro', '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 } b { font-family: 'NeoSansProBold', 'Arial', sans-serif; } 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: 1200px; margin: 0 auto; background-color: #FFF; padding:15px 20px; margin:0px auto 20px; color: #636363; font-size: 16px; } .logo { width: 120px; } .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: var(--color2); } .titol_pagina, .titol_pagina a { font-family: 'Droid Sans', 'PT Sans','Noticia Text', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; font-size: 50px; color: var(--color1); 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: 30px; padding:15px; color: var(--color1); background-color: var(--color2); border-bottom: 2px solid #dddddd; line-height: 150%; } } .taula2 { background-color: #F4F4F4; width: 100%; padding:15px 20px; margin:30px auto 20px; color: #63636; } .taula_interior { line-height: 140%; } .info { border-left: 1px dashed #CCCCCC; } .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; } .sense_estil { padding:1px 2px 1px 2px !important; border: 0px; } .destacat { background-color: #f9ee9a; border:1px solid #f5f5f5; color:#333; font-size:30px; padding:4px; text-align:CENTER; text-shadow:rgba(255, 255, 255, 0.498039) 0 1px 0; line-height: 150%; } .destacat2 { background-color: #cbdeff; 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%; } .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:var(--color2); 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; color: var(--color3); } .peu a { font-size:14px; color: var(--color3); } .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 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; } /* --- 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;} /* --------- 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:22px; 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 var(--color2); padding: 5px 10px 10px; background-color: #f4f4f4; margin: 5px 10px 20px 20px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } legend { background-color:var(--color1); border:2px solid var(--color2); padding: 0.2em 1.2em; color:#FFFFFF; text-align:center; -moz-border-radius: 2px; -webkit-border-radius: 2px; text-transform: uppercase; } .uela { } .uela li { padding: 5px 10px; border: 1px solid #DDDDDD; margin-bottom:15px; } @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; } .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; } .foto_interior { width: 100%; } }