/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /** * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } hr{ display: none;} /*===================================FINE CSS RESET==============================================*/ @font-face { font-family: 'roboto-light'; src: url('fonts/roboto-light.eot'); src: local('fonts/roboto-light.ttf'), url('fonts/roboto-light.ttf') format('truetype'); font-weight: normal; font-style: normal;} @font-face { font-family: 'roboto-medium'; src: url('fonts/roboto-medium.eot'); src: local('fonts/roboto-medium.ttf'), url('fonts/roboto-medium.ttf') format('truetype'); font-weight: normal; font-style: normal;} @font-face { font-family: 'roboto-bold'; src: url('fonts/roboto-bold.eot'); src: local('fonts/roboto-bold.ttf'), url('fonts/roboto-bold.ttf') format('truetype'); font-weight: normal; font-style: normal;} @font-face { font-family: 'montserrat-regular'; src: url('fonts/montserrat-regular.eot'); src: local('fonts/montserrat-regular.ttf'), url('fonts/montserrat-regular.ttf') format('truetype'); font-weight: normal; font-style: normal;} @font-face { font-family: 'myriadpro-regular'; src: url('fonts/myriadpro-regular.eot'); src: local('fonts/myriadpro-regular.ttf'), url('fonts/myriadpro-regular.ttf') format('truetype'); font-weight: normal; font-style: normal;} html,body { margin: 0; padding: 0; text-align: center; font-size: 75%; line-height: 1.5em; font-family: Arial, Verdana, sans-serif; color: #161616; background: #c2c6d1;} #container{ width: 100%; max-width: 1920px; margin: 0 auto; padding: 0; text-align: left; background: #dedee2;} img{ max-width: 100%;} video { width: 100%; max-width: 100%; height: auto;} /**********EFFETTI ANIMATE CSS***************/ .animated { animation-duration: 1s; animation-fill-mode: both;} .animated.infinite { animation-iteration-count: infinite;} .animated.hinge { animation-duration: 2s;} /*Fade In Left*/ @keyframes fadeInLeft { 0% { opacity: 0; transform: translate3d(-100%, 0, 0);} 100% { opacity: 1; transform: none; } } .fadeInLeft{ animation-name: fadeInLeft;} /*Fade In Right*/ @keyframes fadeInRight { 0% { opacity: 0; transform: translate3d(100%, 0, 0);} 100% { opacity: 1; transform: none; } } .fadeInRight{ animation-name: fadeInRight;} /*=======================================================================================================================================================*/ /*==================== RISOLUZIONE 320PX (MOBILE FIRST) =====================*/ /*=======================================================================================================================================================*/ h1,h2,h3{ margin: 0; padding: 0;} h1{ font-size: 2.4em; text-align: center; color: #3f60a0; letter-spacing: 0.06em; line-height: 1.2em; font-weight: bold;} h2{ font-size: 2em; font-family: 'lato-black', Arial, Verdana, sans-serif; line-height: 1.1em; letter-spacing: 0.04em; color: #3f6aa9;} h3{ font-size: 3em; font-family: 'lato-black', Arial, Verdana, sans-serif; color: #10153c; line-height: 1.3em; letter-spacing: 0.04em;} p{ font-size: 1.8em; margin: 0; padding: 0; letter-spacing: 0.04em; line-height: 1.26em; color: #646576;} a:link, a:visited, a:hover{ color: #000; transition: all 0.3s ease-in; text-decoration: underline;} a:hover{ color: #caf8b4; transition: all 0.3s ease-out;} .italico{ font-style: italic;} /*CONTENITORE GENERALE DA USARE DI FREQUENTE CON VALORI STANDARD*/ .boxgenerale{ width: 100%; margin: 0; padding: 0;} /********************************************************************* HEADER *********************************************************************************************/ header#avviso-emergenze-header{ float: left; width: 100%; margin: 0; padding: 0; background: #c1ccde;} /*Logo*/ #sidar-avviso-logocontgenerale{ float: left; width: 100%; margin: 0; padding: 0 0 90px 0; background: url(emergenze-intervento-img/img-template/320/emergenze-avviso-headerbg320.jpg) no-repeat; background-size: 100% auto;} #sidar-avviso-logocont{ width: 70%; max-width: 400px; height: 85px; margin: 40px 0 50px 18%; padding: 0;} #sidar-avviso-logocont img{ float: left; width: 100%; margin: 0; padding: 0;} /*Titolo*/ #sistemi-emergenza-titolo{ float: left; width: 70%; margin: 0; padding: 0 15% 22px 15%;} /*4 IMMAGINI CATASTROFI*/ figure.sidar-catastrofi-imgheader{ float: left; position: relative; width: 100%; margin: 0; padding: 0;} figure.sidar-catastrofi-imgheader img{ float: left; margin: 0 0 2px 0; padding: 0;} figure.sidar-catastrofi-imgheader figcaption{ float: left; position: absolute; width: 80%; margin: 0 10%; top: 48%; padding: 0; font-size: 2.2em; text-align: center; letter-spacing: 0.2em; font-weight: bold; color: #fdfeff;} /****************************************************************CONTENUTI*****************************************************************************************/ #sidar-sistema-content{ float: left; width: 100%; margin: 0; padding: 0; background: #dedee2;} /*********************************************************************************FOOTER*********************************************************************************************************/ footer#emergenze-allerta-footer{ float: left; width: 100%; padding: 0; background: #cfd4dc url(emergenze-intervento-img/img-template/320/sidar-footer-bg320.jpg) no-repeat;} /*TITOLO E TESTO INTRO*/ article#sidar-contatti-footer{ float: left; width: 90%; margin: 240px 5% 0 5%; padding: 0;} article#sidar-contatti-footer h2{ float: left; width: 100%; margin: 0; padding: 0; font-size: 6em; font-family: 'roboto-light', Arial, Verdana, sans-serif; text-align: center;} article#sidar-contatti-footer p{ float: left; width: 90%; margin: 0; padding: 0 5%; font-size: 1.5em; text-align: center; line-height: 1em; color: #344d8b;} /*TELEFONO*/ #sidar-telefono-footer{ float: left; width: 90%; margin: 60px 5% 0 5%; padding: 0;} #sidar-telefono-footer h3{ float: left; width: 46%; margin: 0 22%; padding: 12px 5% 0 5%; font-size: 1.9em; font-family: 'roboto-light', Arial, Verdana, sans-serif; text-align: center; letter-spacing: 0.08em; color: #3a518a; border-top: 1px solid #a8b4c6;} #sidar-telefono-footer a:link,#sidar-telefono-footer a:visited,#sidar-telefono-footer a:hover{ float: left; display: block; width: 80%; margin: 18px 10% 4px 10%; padding: 12px 0; font-size: 2.5em; letter-spacing: 0.08em; line-height: 1.3em; text-align: center; font-weight: bold; text-decoration: none; color: #5a71ab; border: 1px solid #9da8c4; background: #dbdfe5;} #sidar-telefono-footer a:hover{ color: #3d548f;} /*EMAIL*/ /*L'ALTEZZA ASSEGNATA REGOLA LA DISTANZA E QUINDI IL POSIZIONAMENTO IN FONDO DEL DIV SUCCESSIVO CHE CONTIENE LOGO E INDIRIZZO*/ #sidar-email-footer{ float: left; width: 90%; margin: 40px 5% 0 5%; padding: 0;} #sidar-email-footer h3{ float: left; width: 46%; margin: 0 22%; padding: 12px 5% 0 5%; font-size: 1.9em; font-family: 'roboto-light', Arial, Verdana, sans-serif; text-align: center; letter-spacing: 0.08em; color: #3a518a; border-top: 1px solid #a8b4c6;} #sidar-email-footer a:link,#sidar-email-footer a:visited,#sidar-email-footer a:hover{ float: left; display: block; width: 94%; margin: 18px 2% 4px 2%; padding: 12px 1%; font-size: 1.8em; letter-spacing: 0.08em; line-height: 1.3em; text-align: center; font-weight: bold; text-decoration: none; color: #5a71ab; border: 1px solid #9da8c4; background: #dbdfe5;} #sidar-email-footer a:hover{ color: #3d548f;} /*INDIRIZZO*/ #sidar-indirizzo-footer{ float: left; width: 90%; margin: 40px 0 0 0; padding: 20px 5% 30px 5%; background: #c2c8d0;} #sidar-indirizzo-footer a:link,#sidar-indirizzo-footer a:visited,#sidar-indirizzo-footer a:hover{ text-decoration: none; color: #43588e;} /*Logo SoundReflections*/ figure#soundreflections-logo{ float: left; width: 42%; margin: 20px 29% 0 29%; padding: 0;} figure#soundreflections-logo img{ float: left; width: 100%; margin: 0; padding: 0;} /*Indirizzo*/ #sidar-indirizzo-containerfooter{ float: left; width: 90%; margin: 16px 5% 0 5%; padding: 0;} #sidar-indirizzo-containerfooter p{ font-size: 1.7em; line-height: 1.4em; text-align: center; font-weight: bold; color: #43588e;} /*BARRA COOKIES E WEBDESIGNER*/ #sidar-credits-footer{ float: left; width: 100%; margin: 0; padding: 20px 0 40px 0; border-top: 3px solid #496297; background: #0d234d;} /*COOKIES E WEBMASTER*/ #cookies-footer,#webdesigner-footer{ float: left; width: 90%; margin: 15px 5%; padding: 0;} #cookies-footer a:link,#webdesigner-footer a:link,#cookies-footer a:visited,#webdesigner-footer a:visited,#cookies-footer a:hover,#webdesigner-footer a:hover{ float: left; display: block; width: 100%; margin: 0; padding: 16px 0; font-size: 1.4em; letter-spacing: 0.06em; text-align: center; text-decoration: none; color: #465f90; border: 1px solid #274071; background: #0d234d;} #cookies-footer a:hover,#webdesigner-footer a:hover{ color: #5f78a8;} /*PULSANTE TOP*/ #top{ position: fixed; display: none; width: 16%; right: 6%; bottom: 70px; padding: 0; cursor: pointer; z-index: 9000; text-align: center;} /********************************************************************************* COOKIES POLICY **************************************************************************************/ /*BARRA SFONDO BANNER*/ /*Imposto le dimensioni della barra, colore di sfondo, dimensione, colore ecc. del testo paragrafo ecc*/ section#cookie{ position: fixed; width: 80%; min-height: 0; bottom: 0; left: 0; margin: 0; padding: 10px 10% 20px 10%; z-index: 9999; text-align: center; font-size: 1.3em; line-height: 1.3em; color: #47494f; box-shadow: 0 .5em .5em rgba(0,0,0,.5); background: rgba(175,179,191,0.86);} /*PULSANTI "QUESTO LINK" E "CHIUDI" (impostazioni generali valide per entrambi) */ section#cookie>a{ display: inline-block; width: auto; margin: 2px 0.5%; padding: 4px 2%; font-size: 1em; text-align: center; text-decoration: none;} /*Pulsante "Questo link" (collegamento pagina con la normativa)*/ section#cookie>a:first-child{ color: #fff; background: #7b7e86;} /*Pulsante "Chiudi"*/ section#cookie>a:last-child{ color: #fff; background: #2b31a7;} /*********** PAGINA CON TESTO COOKIES POLICY **********************/ /*HEADER (alternativo a quello del sito)*/ header#cookies-policy-header{ float: left; width: 100%; margin: 0; padding: 24px 0;} /*Logo SoundReflections*/ #cookies-policy-logocontgenerale{ float: left; width: 100%; margin: 0; padding: 0;} figure#cookies-policy-headerlogo{ float: left; width: 80%; margin: 0 10%; padding: 0;} figure#cookies-policy-headerlogo img{ float: left; width: 100%; max-width: 420px; margin: 0; padding: 0;} /*********** Pulsante "Vai al Sito" **********************/ #cookies-policy-vaisito{ position: fixed; width: 40%; left: 30%; top: 50%; margin: 0; padding: 0; background: rgba(44,38,110,0.9); border-radius: 6px;} #cookies-policy-vaisito a:link,#cookies-policy-vaisito a:visited,#cookies-policy-vaisito a:hover{ float: left; display: block; width: 60%; margin: 0; padding: 20px 20%; font-family: 'lato-black', Arial, Verdana, sans-serif; font-size: 1.7em; line-height: 1.4em; text-align: center; letter-spacing: 0.06em; text-decoration: none; color: #cbcf84;} /*CONTENITORE TESTO POLICY*/ section#cookies-policy-paginatesto{ float: left; width: 86%; margin: 0; padding: 46px 7%;} header.cookies-policy-paginatestohead{ float: left; width: 100%; margin: 0 0 10px 0; padding: 0;} /*Specifiche paragrafi testo policy*/ article.cookies-policy-paragrafi{ float: left; width: 100%; margin: 20px 0; padding: 0;} article.cookies-policy-paragrafi a:link,article.cookies-policy-paragrafi a:visited,article.cookies-policy-paragrafi a:hover{ font-weight: bold; color: #5f698e;} article.cookies-policy-paragrafi a:hover{ color: #283669;} header.cookies-policy-paragrafihead{ float: left; width: 100%; margin: 0 0 4px 0; padding: 0;} header.cookies-policy-paragrafihead h3{ color: #5c678f;} /*Elenco di link*/ dl.cookies-policy-elenco{ float: left; width: 90%; margin: 20px 1%; padding: 9px 4%; border: 1px solid #c7c9ce; background: #ebecef;} dl.cookies-policy-elenco dt{ float: left; width: 100%; margin: 0; padding: 0; font-size: 1.4em; text-align: center; font-weight: bold; color: #757d92; word-wrap: break-word;} dl.cookies-policy-elenco dd{ float: left; display: block; width: 100%; margin: 6px 0 0 0; padding: 0; font-size: 1.4em; word-wrap: break-word; line-height: 1.3em; color: #5b647d;} dl.cookies-policy-elenco dd a:link,dl.cookies-policy-elenco dd a:visited,dl.cookies-policy-elenco dd a:hover{ float: left; display: block; width: 92%; margin: 6px 0 0 0; padding: 12px 4%; line-height: 1.3em; text-align: center; text-decoration: none; border: 1px solid #ced0d4; background: rgba(202,202,204,0.6);} /******************************************************************** HOMEPAGE *****************************************************************************************/ /*TESTO INTRO*/ #sistema-avviso-intro{ float: left; width: 100%; margin: 0; padding: 0; border-top: 3px solid #d0d3d8; background: #fff;} header#sistema-avviso-headintro{ float: left; width: 80%; margin: 0; padding: 40px 10% 20px 10%;} header#sistema-avviso-headintro h2{ font-size: 3em; font-family: 'myriadpro-regular', Arial, Verdana, sans-serif; text-align: center; line-height: 1.1em; color: #2c72a9;} /*INSERISCO VIDEO CHE RISIEDE DIRETTAMETE NELL'HOSTING*/ #sidar-video-contvideohome{ float: left; position: relative; width: 94%; margin: 0 3%; padding: 0; background: #ceced0;} #sidar-video-playervideohome{ float: left; width: 96%; margin: 2%; padding: 0;} /*Player Youtube*/ /************************************************************************************************ PER ORA DISATTIVATO ED USATO IL CODICE CHE INCORPORA IL VIDEO DIRETTAMENTE DALL'HOSTING (Codice che per adesso si trova solo a breakpoint di 1920px) #sidar-youtube-contvideohome{ float: left; position: relative; width: 90%; margin: 0 5%; height: auto; padding: 0; border: 1px solid #ceced0; background: #dedfe1;} #sidar-youtube-playervideohome{ position: relative; float: left; width: 96%; height: 200px; margin: 1%; padding-top: 30px; border: 2px solid #c0c1c2; overflow: hidden;} #sidar-youtube-playervideohome object{ position: absolute; width: 100%; height: 100%; top: 0; left: 0;} ************************************************************************************************/ #sistema-avviso-intro p{ float: left; width: 86%; margin: 0; padding: 30px 7%; line-height: 1.4em;} /*SICUREZZA OPERATIVA*/ article#sicurezza-operativa-home{ float: left; width: 100%; min-height: 958px; margin: 0; padding: 0 0 30px 0; background: #dbd8d1 url(emergenze-intervento-img/img-template/320/sicurezza-operativa-bghome320.jpg) no-repeat;} header#sicurezza-operativa-homehead{ float: left; width: 90%; margin: 60px 5% 0 5%; padding: 0;} header#sicurezza-operativa-homehead h2{ margin: 0; padding: 0; font-size: 5em; font-family: 'roboto-bold', Arial, Verdana, sans-serif; text-align: center; color: #65bb4e;} article#sicurezza-operativa-home p{ float: left; width: 76%; margin: 4% 12% 0 12%; padding: 0; font-size: 1.7em; line-height: 1.3em; font-weight: bold; color: #0d0a09;} /*MODULI AVVISO*/ section#moduli-avviso-home{ float: left; width: 100%; margin: 0; padding: 0; background: #dadee5 url(emergenze-intervento-img/img-template/320/moduli-avviso-homeheadbg320.jpg) no-repeat;} header#moduli-avviso-headhome{ float: left; width: 86%; margin: 50px 7% 0 7%; padding: 0;} header#moduli-avviso-headhome h2{ font-size: 5em; font-family: 'roboto-bold', Arial, Verdana, sans-serif; text-align: center; line-height: 1em; color: #8d92a1;} section#moduli-avviso-home p{ float: left; width: 86%; margin: 18px 7% 0 7%; font-size: 1.8em; line-height: 1.4em; color: #848997;} /*ELENCO INTRO*/ section#moduli-avviso-home ul{ float: left; width: 86%; margin: 4px 0 0 14%; padding: 0 0 30px 0; background: #dadee5; list-style-type: disc;} section#moduli-avviso-home ul li{ margin: 12px 0; padding: 0; font-size: 1.8em; font-family: 'roboto-bold', Arial, Verdana, sans-serif; line-height: 1.4em; letter-spacing: 0.04em; color: #7c7f87;} /*STRUTTURA OGNI BOX DI OGNI MODULO DI AVVISO - ALTERNA A DESTRA E SINISTRA IMMAGINE/TESTI E CAMBIA COLORE DI SFONDO*/ .moduli-avviso-hometesto{ float: left; width: 90%; height: auto; margin: 0 5% 60px 5%; padding: 0;} /*Immagine - 2 selettori diversi per posizionare alternando destra e sinistra*/ figure.moduli-avviso-imghome{ float: left; width: 100%; margin: 0; padding: 0;} /*Contenitore Titolo e testo (per posizionare meglio rispetto all'immagine) - Anche questi sono 2 per posizionare alternando destra e sinistra*/ article.moduli-avviso-homecontainertitolotesto{ float: left; width: 86%; padding: 0; margin: 4px 7% 0 7%;} .moduli-avviso-homecontainertitolotesto h3{ float: left; width: 100%; margin: 0; padding: 0; font-size: 2.6em; font-family: 'montserrat-regular', Arial, Verdana, sans-serif; text-align: center; line-height: 1.1em; color: #3563b8;} section#moduli-avviso-home article.moduli-avviso-homecontainertitolotesto p{ float: left; width: 100%; margin: 6px 0 0 0; padding: 0; font-family: 'montserrat-regular', Arial, Verdana, sans-serif; font-size: 1.8em; line-height: 1.3em; color: #8d92a1;} /*EMITTENTE RADIO-TV*/ div#emergenze-radiotv-home{ float: left; width: 100%; margin: 0; padding: 0; border-top: 4px solid #c60101; background: #696d78 url(emergenze-intervento-img/img-template/320/emergenze-radiotv-bghome320.jpg) no-repeat;} figure#emittente-titolografico-home{ float: left; width: 90%; height: 140px; margin: 50px 5% 0 5%; padding: 0; background: url(emergenze-intervento-img/img-template/320/emittente-titolografico-home320.png) no-repeat; background-size: contain;} /*Section (contiene titolo e testo e tutto il box con 3 loghi rossi e suo testo)*/ section#emergenze-radiotv-testohome{ float: left; width: 100%; margin: 100px 0 0 0; padding: 30px 0 0 0; background: #696d78 url(emergenze-intervento-img/img-template/320/emergenze-radiotv-ondetesto320.jpg) no-repeat center 12%; background-size: 100% auto;} header#emergenze-radiotv-homehead{ float: left; width: 76%; margin: -20px 12% 0 12%; padding: 0;} header#emergenze-radiotv-homehead h2{ float: left; width: 100%; margin: 0; padding: 0; font-size: 4.6em; font-family: 'roboto-light', Arial, Verdana, sans-serif; text-align: center; line-height: 1.1em; letter-spacing: 0.06em; color: #e5e8f1;} section#emergenze-radiotv-testohome p{ float: left; width: 76%; margin: 20px 12% 0 12%; padding: 0; line-height: 1.3em; color: #e5e8f1;} /*Sottotitolo Come Funziona*/ header#emittente-comefunziona-homehead{ float: left; width: 100%; margin: 30px 0 0 0; padding: 0;} header#emittente-comefunziona-homehead h3{ font-size: 2em; text-align: center; letter-spacing: 0.08em; font-weight: bold; color: #adb3c2;} /*CONTENITORE E 3 TONDI ROSSI IMMAGINI ICONE*/ #emittente-home-contenitoretondirossi{ float: left; width: 100%; margin: 60px 0 0 0; padding: 0 0 22px 0; border-top: 2px solid #b83333; background: #eaeaea;} figure.emittente-home-icone{ float: left; width: 34%; margin: -42px 33% 0 33%; padding: 0;} figure.emittente-home-icone img{ float: left; width: 100%; margin: 0 0 60px 0; padding: 0; border: 4px solid #eaeaea; border-radius: 50%;} /*Testo Come Funziona*/ article#emittente-comefunziona-home{ float: left; width: 100%; margin: 0; padding: 0;} article#emittente-comefunziona-home p{ float: left; width: 80%; margin: -64px 0 0 0; padding: 0 10% 30px 10%; font-size: 1.7em; color: #656771; background: #eaeaea;} /*Testo finale ed i 3 loghi*/ #emergenze-radiotv-homefoot{ float: left; width: 100%; margin: 0; padding: 34px 0 50px 0; border-top: 3px solid #8c2627; background: url(emergenze-intervento-img/img-template/mezzotondo-rosso.png) no-repeat 50% 0;} #emergenze-radiotv-homefoot p{ float: left; width: 72%; margin: 0; padding: 0 14%; color: #e5e8f1;} /*3 LOGHI (Contenitore e figure)*/ #emittente-home-loghifoot{ float: left; width: 60%; margin: 0 20%; padding: 0;} figure.emittente-home-imgloghifoot{ float: left; width: 100%; margin: 0; padding: 0;} figure.emittente-home-imgloghifoot img{ float: left; width: 100%; margin: 0; padding: 0;} /*RASSEGNA STAMPA*/ article#sidar-notizie-home{ float: left; width: 100%; margin: 0; padding: 0; background: #eff0f3 url(emergenze-intervento-img/img-template/320/sidar-notizie-bghome320.jpg) no-repeat;} header#sidar-notizie-homehead{ float: left; width: 90%; margin: 60px 0 0 0; padding: 36px 5%; box-shadow: 0 5px 16px #7a7f82; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} header#sidar-notizie-homehead h2{ font-size: 5em; font-family: 'roboto-bold', Arial, Verdana, sans-serif; text-align: center; line-height: 1em; color: #434548;} article#sidar-notizie-home p{ float: left; width: 80%; margin: 40px 10%; padding: 0; font-size: 1.7em; line-height: 1.4em; color: #323437;} /*BOX IMMAGINE ARTICOLO GIORNALE (2 figure diverse perchè a qualche risoluzioni cambiano leggermente dimensioni e posizionamenti)*/ figure.sidar-articolo-1home,figure.sidar-articolo-2home{ float: left; width: 90%; margin: 0 5% 50px 5%; padding: 0;} figure.sidar-articolo-1home figcaption,figure.sidar-articolo-2home figcaption{ float: left; width: 84%; margin: 10px 4% 0 4%; padding: 10px 3%; font-size: 1.7em; font-family: Verdana, Arial, sans-serif; text-align: center; line-height: 1.28em; letter-spacing: 0.06em; font-weight: bold; color: #434548; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} figure.sidar-articolo-1home img,figure.sidar-articolo-2home img{ float: left; width: 100%; margin: 10px 0 0 0; padding: 0; border: 1px solid #808188;} /*ASSISTENZA 24/7*/ /*Nelle risoluzioni più strette disposizione verticale l'immagine della persona viene assegnata all'header e la sfumatura sotto al p del testo, in quelle più larghe orizzontali c'è solo un'immagine di sfondo assegnata al div article*/ article#sidar-assistenza-home{ float: left; width: 100%; margin: 0; padding: 0 0 50px 0; background: #354151 url(emergenze-intervento-img/img-template/sfumgrigiavert.jpg) repeat-x;} header#sidar-assistenza-homehead{ float: left; width: 90%; margin: 0; padding: 196px 5% 0 5%; background: url(emergenze-intervento-img/img-template/320/sidar-assistenza-bghome320.png) no-repeat center top;} header#sidar-assistenza-homehead h2{ font-size: 4.5em; font-family: 'montserrat-regular', Arial, Verdana, sans-serif; text-align: center; color: #b8c0d0;} article#sidar-assistenza-home p{ float: left; width: 86%; margin: 18px 7% 0 7%; padding: 0; font-size: 1.8em; color: #d2d6e1;} /*=======================================================================================================================================================*/ /*==================== RISOLUZIONE 480PX =====================*/ /*=======================================================================================================================================================*/ @media screen and (min-width: 321px) and (max-width: 480px) { /********************************************************************* HEADER *********************************************************************************************/ header#avviso-emergenze-header{ background: url(emergenze-intervento-img/img-template/480/emergenze-avviso-headerbg480.jpg) no-repeat;} /*Logo*/ #sidar-avviso-logocontgenerale{ padding: 0; background: url(emergenze-intervento-img/img-template/480/triangolo-logoheader-480.png) no-repeat 50% 0; background-size: 60% 100%;} #sidar-avviso-logocont{ width: 46%; margin: 36px 0 30px 28.2%;} /*Titolo*/ #sistemi-emergenza-titolo{ width: 100%; padding: 24px 0; background: #c7cfdd;} /*4 IMMAGINI CATASTROFI*/ figure.sidar-catastrofi-imgheader figcaption{ font-size: 2.6em;} /*********************************************************************************FOOTER*********************************************************************************************************/ footer#emergenze-allerta-footer{ background: #cfd4dc url(emergenze-intervento-img/img-template/480/sidar-footer-bg480.jpg) no-repeat;} /*TITOLO E TESTO INTRO*/ article#sidar-contatti-footer{ margin: 220px 5% 0 5%;} /*TELEFONO*/ #sidar-telefono-footer{ margin: 40px 5% 0 5%;} #sidar-telefono-footer a:link,#sidar-telefono-footer a:visited,#sidar-telefono-footer a:hover{ margin: 14px 10% 4px 10%;} /*EMAIL*/ /*L'ALTEZZA ASSEGNATA REGOLA LA DISTANZA E QUINDI IL POSIZIONAMENTO IN FONDO DEL DIV SUCCESSIVO CHE CONTIENE LOGO E INDIRIZZO*/ #sidar-email-footer a:link,#sidar-email-footer a:visited,#sidar-email-footer a:hover{ margin: 14px 2% 4px 2%;} /*INDIRIZZO*/ /*Logo SoundReflections*/ figure#soundreflections-logo{ width: 26%; margin: 20px 37% 0 37%;} /*BARRA COOKIES E WEBDESIGNER*/ /*COOKIES E WEBMASTER*/ #cookies-footer,#webdesigner-footer{ width: 80%; margin: 15px 10%;} /*PULSANTE TOP*/ #top{ width: 11%; right: 6%; bottom: 30px;} /******************************************************************** HOMEPAGE *****************************************************************************************/ /*TESTO INTRO*/ header#sistema-avviso-headintro{ width: 90%; padding: 40px 5% 20px 5%;} /*SICUREZZA OPERATIVA*/ article#sicurezza-operativa-home{ min-height: 600px; padding: 0 0 50px 0; background: #dbd8d1 url(emergenze-intervento-img/img-template/480/sicurezza-operativa-bghome480.jpg) no-repeat; background-size: 100% 100%;} /*MODULI AVVISO*/ section#moduli-avviso-home{ background: #dadee5 url(emergenze-intervento-img/img-template/480/moduli-avviso-homeheadbg480.jpg) no-repeat;} /*ELENCO INTRO*/ section#moduli-avviso-home ul{ width: 74%; margin: 4px 0 0 26%;} /*EMITTENTE RADIO-TV*/ div#emergenze-radiotv-home{ background: #696d78 url(emergenze-intervento-img/img-template/480/emergenze-radiotv-bghome480.jpg) no-repeat;} figure#emittente-titolografico-home{ width: 80%; height: 105px; margin: 62px 10% 0 10%; background: url(emergenze-intervento-img/img-template/480/emittente-titolografico-home480.png) no-repeat; background-size: contain;} /*Section (contiene titolo e testo e tutto il box con 3 loghi rossi e suo testo)*/ section#emergenze-radiotv-testohome{ margin: 180px 0 0 0; background: #696d78 url(emergenze-intervento-img/img-template/480/emergenze-radiotv-ondetesto480.jpg) no-repeat center 12%; background-size: 100% auto;} /*CONTENITORE E 3 TONDI ROSSI IMMAGINI ICONE*/ #emittente-home-contenitoretondirossi{ width: 90%; padding: 0 0 22px 10%;} figure.emittente-home-icone{ width: 19%; margin: -38px 5% 0 5%;} /*Testo finale ed i 3 loghi*/ #emergenze-radiotv-homefoot p{ width: 76%; padding: 0 12%;} /*3 LOGHI (Contenitore e figure)*/ #emittente-home-loghifoot{ width: 40%; margin: 4px 30%;} /*RASSEGNA STAMPA*/ article#sidar-notizie-home{ padding: 0 0 20px 0; background: #eff0f3 url(emergenze-intervento-img/img-template/480/sidar-notizie-bghome480.jpg) no-repeat;} header#sidar-notizie-homehead{ width: auto; margin: 60px 0 0 0; padding: 30px 12%; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} header#sidar-notizie-homehead h2{ text-align: left;} article#sidar-notizie-home p{ margin: 40px 10% 20px 10%;} /*BOX IMMAGINE ARTICOLO GIORNALE (2 figure diverse perchè a qualche risoluzioni cambiano leggermente dimensioni e posizionamenti)*/ figure.sidar-articolo-1home,figure.sidar-articolo-2home{ width: 80%; margin: 0 10% 40px 10%;} figure.sidar-articolo-1home figcaption,figure.sidar-articolo-2home figcaption{ float: left; width: 84%; margin: 10px 4% 0 4%; padding: 10px 3%; font-size: 1.7em; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} figure.sidar-articolo-1home img,figure.sidar-articolo-2home img{ margin: 14px 0 0 0;} /*ASSISTENZA 24/7*/ /*Nelle risoluzioni più strette disposizione verticale l'immagine della persona viene assegnata all'header e la sfumatura sotto al p del testo, in quelle più larghe orizzontali c'è solo un'immagine di sfondo assegnata al div article*/ header#sidar-assistenza-homehead{ width: 96%; padding: 120px 2% 0 2%; background: url(emergenze-intervento-img/img-template/480/sidar-assistenza-bghome480.png) no-repeat center top; background-size: contain;} header#sidar-assistenza-homehead h2{ font-size: 4em;} article#sidar-assistenza-home p{ width: 82%; margin: 18px 9% 0 9%;} } /*=======================================================================================================================================================*/ /*==================== RISOLUZIONE 540PX =====================*/ /*=======================================================================================================================================================*/ @media screen and (min-width: 481px) and (max-width: 540px) { /********************************************************************* HEADER *********************************************************************************************/ header#avviso-emergenze-header{ background: url(emergenze-intervento-img/img-template/540/emergenze-avviso-headerbg540.jpg) no-repeat;} /*Logo*/ #sidar-avviso-logocontgenerale{ padding: 0; background: url(emergenze-intervento-img/img-template/540/triangolo-logoheader-540.png) no-repeat 50% 0; background-size: 64% 100%;} #sidar-avviso-logocont{ width: 50%; margin: 28px 0 60px 26%;} /*Titolo*/ #sistemi-emergenza-titolo{ width: 100%; padding: 24px 0; background: #c7cfdd;} /*4 IMMAGINI CATASTROFI*/ figure.sidar-catastrofi-imgheader{ width: 50%; height: 100%;} /*********************************************************************************FOOTER*********************************************************************************************************/ footer#emergenze-allerta-footer{ background: #cfd4dc url(emergenze-intervento-img/img-template/540/sidar-footer-bg540.jpg) no-repeat;} /*TITOLO E TESTO INTRO*/ article#sidar-contatti-footer{ margin: 220px 5% 0 5%;} article#sidar-contatti-footer h2{ font-size: 7em;} /*TELEFONO*/ #sidar-telefono-footer{ width: 60%; margin: 20px 20% 0 20%;} #sidar-telefono-footer h3{ padding: 8px 5% 0 5%; border-top: none;} #sidar-telefono-footer a:link,#sidar-telefono-footer a:visited,#sidar-telefono-footer a:hover{ margin: 6px 10% 4px 10%; padding: 10px 0; font-size: 2.2em; background: rgba(220,220,220,0.5);} /*EMAIL*/ /*L'ALTEZZA ASSEGNATA REGOLA LA DISTANZA E QUINDI IL POSIZIONAMENTO IN FONDO DEL DIV SUCCESSIVO CHE CONTIENE LOGO E INDIRIZZO*/ #sidar-email-footer{ width: 60%; margin: 20px 20% 0 20%;} #sidar-email-footer h3{ padding: 8px 5% 0 5%; border-top: none;} #sidar-email-footer a:link,#sidar-email-footer a:visited,#sidar-email-footer a:hover{ margin: 6px 2% 4px 2%; background: rgba(220,220,220,0.5);} /*INDIRIZZO*/ #sidar-indirizzo-footer{ margin: 40px 0 0 0; padding: 20px 5% 34px 5%; background: #caced4;} /*Logo SoundReflections*/ figure#soundreflections-logo{ width: 21.5%; margin: 30px 0 0 18.5%;} /*Indirizzo*/ #sidar-indirizzo-containerfooter{ width: 50%; margin: 16px 5% 0 5%;} #sidar-indirizzo-containerfooter p{ line-height: 1.3em; text-align: left;} /*BARRA COOKIES E WEBDESIGNER*/ /*COOKIES E WEBMASTER*/ #cookies-footer,#webdesigner-footer{ width: 60%; margin: 15px 20%;} /*PULSANTE TOP*/ #top{ width: 7%; right: 9%; bottom: 50px;} /******************************************************************** HOMEPAGE *****************************************************************************************/ /*TESTO INTRO*/ header#sistema-avviso-headintro{ width: 92%; padding: 40px 4% 20px 4%;} /*INSERISCO VIDEO CHE RISIEDE DIRETTAMETE NELL'HOSTING*/ #sidar-video-contvideohome{ width: 88%; margin: 0 6%;} #sistema-avviso-intro p{ width: 80%; padding: 30px 10% 40px 10%; line-height: 1.4em;} /*SICUREZZA OPERATIVA*/ article#sicurezza-operativa-home{ min-height: 600px; padding: 0 0 50px 0; background: #dbd8d1 url(emergenze-intervento-img/img-template/540/sicurezza-operativa-bghome540.jpg) no-repeat; background-size: 100% 100%;} header#sicurezza-operativa-homehead{ width: 60%; margin: 80px 20% 0 20%;} header#sicurezza-operativa-homehead h2{ font-size: 6em;} article#sicurezza-operativa-home p{ width: 64%; margin: 2% 18% 0 18%; line-height: 1.35em;} /*MODULI AVVISO*/ section#moduli-avviso-home{ background: #dadee5 url(emergenze-intervento-img/img-template/540/moduli-avviso-homeheadbg540.jpg) no-repeat;} header#moduli-avviso-headhome{ width: 80%; margin: 50px 10% 0 10%;} section#moduli-avviso-home p{ width: 76%; margin: 18px 12% 0 12%;} /*ELENCO INTRO*/ section#moduli-avviso-home ul{ width: 69%; margin: 4px 0 0 31%;} /*STRUTTURA OGNI BOX DI OGNI MODULO DI AVVISO - ALTERNA A DESTRA E SINISTRA IMMAGINE/TESTI E CAMBIA COLORE DI SFONDO*/ .moduli-avviso-hometesto{ width: 80%; margin: 0 10% 70px 10%;} /*Contenitore Titolo e testo (per posizionare meglio rispetto all'immagine) - Anche questi sono 2 per posizionare alternando destra e sinistra*/ article.moduli-avviso-homecontainertitolotesto{ width: 90%; margin: 4px 5% 0 5%;} .moduli-avviso-homecontainertitolotesto h3{ font-size: 3em;} /*EMITTENTE RADIO-TV*/ div#emergenze-radiotv-home{ background: #696d78 url(emergenze-intervento-img/img-template/540/emergenze-radiotv-bghome540.jpg) no-repeat;} figure#emittente-titolografico-home{ width: 72%; height: 99px; margin: 34px 14% 0 14%; background: url(emergenze-intervento-img/img-template/540/emittente-titolografico-home540.png) no-repeat; background-size: contain;} /*Section (contiene titolo testo e tutto il box con 3 loghi rossi e suo testo)*/ section#emergenze-radiotv-testohome{ margin: 160px 0 0 0; background: #696d78 url(emergenze-intervento-img/img-template/540/emergenze-radiotv-ondetesto540.jpg) no-repeat center 70px; background-size: 100% auto;} header#emergenze-radiotv-homehead{ width: 82%; margin: -20px 9% 0 9%;} header#emergenze-radiotv-homehead h2{ font-size: 5em;} section#emergenze-radiotv-testohome p{ width: 70%; margin: 20px 15% 0 15%;} /*Sottotitolo Come Funziona*/ header#emittente-comefunziona-homehead{ margin: 30px 0 0 0;} /*CONTENITORE E 3 TONDI ROSSI IMMAGINI ICONE*/ #emittente-home-contenitoretondirossi{ width: 90%; padding: 0 0 22px 10%;} figure.emittente-home-icone{ width: 18%; margin: -44px 5.5% 0 5.5%;} /*Testo Come Funziona*/ article#emittente-comefunziona-home{ float: left; width: 100%; margin: 0; padding: 0;} article#emittente-comefunziona-home p{ float: left; width: 80%; margin: -64px 0 0 0; padding: 0 10% 30px 10%; font-size: 1.7em; color: #656771; background: #eaeaea;} /*Testo finale ed i 3 loghi*/ #emergenze-radiotv-homefoot p{ width: 76%; padding: 0 12%;} /*3 LOGHI (Contenitore e figure)*/ #emittente-home-loghifoot{ width: 94%; margin: 22px 3% 0 3%;} figure.emittente-home-imgloghifoot{ width: 28%; margin: 0 1% 0 3%;} /*RASSEGNA STAMPA*/ article#sidar-notizie-home{ padding: 0 0 20px 0; background: #eff0f3 url(emergenze-intervento-img/img-template/540/sidar-notizie-bghome540.jpg) no-repeat ;} header#sidar-notizie-homehead{ width: auto; padding: 30px 12%; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} header#sidar-notizie-homehead h2{ font-size: 6em; text-align: left;} /*BOX IMMAGINE ARTICOLO GIORNALE (2 figure diverse perchè a qualche risoluzioni cambiano leggermente dimensioni e posizionamenti)*/ figure.sidar-articolo-1home,figure.sidar-articolo-2home{ width: 80%; margin: 0 10% 50px 10%;} figure.sidar-articolo-1home figcaption,figure.sidar-articolo-2home figcaption{ width: 84%; margin: 10px 4% 0 4%; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} figure.sidar-articolo-1home img,figure.sidar-articolo-2home img{ margin: 14px 0 0 0;} /*ASSISTENZA 24/7*/ /*Nelle risoluzioni più strette disposizione verticale l'immagine della persona viene assegnata all'header e la sfumatura sotto al p del testo, in quelle più larghe orizzontali c'è solo un'immagine di sfondo assegnata al div article*/ article#sidar-assistenza-home{ padding: 0 0 70px 0; background: #354151 url(emergenze-intervento-img/img-template/sfumgrigiavert.jpg) repeat-x;} header#sidar-assistenza-homehead{ padding: 180px 5% 16px 5%; background: url(emergenze-intervento-img/img-template/540/sidar-assistenza-bghome540.png) no-repeat center top;} header#sidar-assistenza-homehead h2{ font-size: 5em;} article#sidar-assistenza-home p{ width: 76%; margin: 0 12%;} } /*=======================================================================================================================================================*/ /*==================== RISOLUZIONE 640PX =====================*/ /*=======================================================================================================================================================*/ @media screen and (min-width: 541px) and (max-width: 640px) { /********************************************************************* HEADER *********************************************************************************************/ header#avviso-emergenze-header{ background: url(emergenze-intervento-img/img-template/640/emergenze-avviso-headerbg640.jpg) no-repeat;} /*Logo*/ #sidar-avviso-logocontgenerale{ padding: 0; background: url(emergenze-intervento-img/img-template/640/triangolo-logoheader-640.png) no-repeat 50% 0; background-size: 50% 100%;} #sidar-avviso-logocont{ width: 40%; margin: 36px 0 60px 31%;} /*Titolo*/ #sistemi-emergenza-titolo{ width: 100%; padding: 24px 0; background: #c7cfdd;} /*4 IMMAGINI CATASTROFI*/ figure.sidar-catastrofi-imgheader{ width: 50%; height: 100%;} /*********************************************************************************FOOTER*********************************************************************************************************/ footer#emergenze-allerta-footer{ border-top: 4px solid #496297; background: #cfd4dc url(emergenze-intervento-img/img-template/640/sidar-footer-bg640.jpg) no-repeat;} /*TITOLO E TESTO INTRO*/ article#sidar-contatti-footer{ margin: 60px 5% 0 5%;} article#sidar-contatti-footer h2{ font-size: 8em;} /*TELEFONO*/ #sidar-telefono-footer{ width: 50%; margin: 20px 25% 0 25%;} #sidar-telefono-footer h3{ padding: 8px 5% 0 5%; border-top: none;} #sidar-telefono-footer a:link,#sidar-telefono-footer a:visited,#sidar-telefono-footer a:hover{ margin: 6px 10% 4px 10%; padding: 10px 0; font-size: 2.2em; background: rgba(220,220,220,0.5);} /*EMAIL*/ /*L'ALTEZZA ASSEGNATA REGOLA LA DISTANZA E QUINDI IL POSIZIONAMENTO IN FONDO DEL DIV SUCCESSIVO CHE CONTIENE LOGO E INDIRIZZO*/ #sidar-email-footer{ width: 50%; margin: 20px 25% 0 25%;} #sidar-email-footer h3{ padding: 8px 5% 0 5%; border-top: none;} #sidar-email-footer a:link,#sidar-email-footer a:visited,#sidar-email-footer a:hover{ margin: 6px 2% 4px 2%; background: rgba(220,220,220,0.5);} /*INDIRIZZO*/ #sidar-indirizzo-footer{ margin: 50px 0 0 0; padding: 20px 5% 34px 5%; background: #caced4;} /*Logo SoundReflections*/ figure#soundreflections-logo{ width: 18%; margin: 30px 0 0 24%;} /*Indirizzo*/ #sidar-indirizzo-containerfooter{ width: 49%; margin: 16px 5% 0 4%;} #sidar-indirizzo-containerfooter p{ line-height: 1.3em; text-align: left;} /*BARRA COOKIES E WEBDESIGNER*/ /*COOKIES E WEBMASTER*/ #cookies-footer,#webdesigner-footer{ width: 60%; margin: 15px 20%;} /*PULSANTE TOP*/ #top{ width: 7%; right: 9%; bottom: 50px;} /******************************************************************** HOMEPAGE *****************************************************************************************/ /*TESTO INTRO*/ header#sistema-avviso-headintro{ width: 86%; padding: 40px 7% 20px 7%;} header#sistema-avviso-headintro h2{ font-size: 3.4em;} /*INSERISCO VIDEO CHE RISIEDE DIRETTAMETE NELL'HOSTING*/ #sidar-video-contvideohome{ width: 88%; margin: 0 6%;} #sistema-avviso-intro p{ width: 80%; padding: 30px 10% 40px 10%; line-height: 1.4em;} /*SICUREZZA OPERATIVA*/ article#sicurezza-operativa-home{ min-height: 600px; padding: 0 0 50px 0; background: #dbd8d1 url(emergenze-intervento-img/img-template/640/sicurezza-operativa-bghome640.jpg) no-repeat; background-size: 100% 100%;} header#sicurezza-operativa-homehead{ width: 60%; margin: 80px 20% 0 20%;} header#sicurezza-operativa-homehead h2{ font-size: 7em;} article#sicurezza-operativa-home p{ width: 64%; margin: 2% 18% 0 18%; line-height: 1.35em;} /*MODULI AVVISO*/ section#moduli-avviso-home{ background: #dadee5 url(emergenze-intervento-img/img-template/640/moduli-avviso-homeheadbg640.jpg) no-repeat;} header#moduli-avviso-headhome h2{ font-size: 7em;} section#moduli-avviso-home p{ width: 76%; margin: 18px 12% 0 12%;} /*ELENCO INTRO*/ section#moduli-avviso-home ul{ width: 66%; margin: 4px 0 0 34%;} /*STRUTTURA OGNI BOX DI OGNI MODULO DI AVVISO - ALTERNA A DESTRA E SINISTRA IMMAGINE/TESTI E CAMBIA COLORE DI SFONDO*/ .moduli-avviso-hometesto{ width: 80%; margin: 0 10% 70px 10%;} /*Contenitore Titolo e testo (per posizionare meglio rispetto all'immagine) - Anche questi sono 2 per posizionare alternando destra e sinistra*/ article.moduli-avviso-homecontainertitolotesto{ width: 90%; margin: 4px 5% 0 5%;} .moduli-avviso-homecontainertitolotesto h3{ font-size: 3em;} /*EMITTENTE RADIO-TV*/ div#emergenze-radiotv-home{ background: #696d78 url(emergenze-intervento-img/img-template/640/emergenze-radiotv-bghome640.jpg) no-repeat;} figure#emittente-titolografico-home{ width: 64%; height: 104px; margin: 46px 18% 0 18%; background: url(emergenze-intervento-img/img-template/640/emittente-titolografico-home640.png) no-repeat; background-size: contain;} /*Section (contiene titolo testo e tutto il box con 3 loghi rossi e suo testo)*/ section#emergenze-radiotv-testohome{ margin: 140px 0 0 0; background: #696d78 url(emergenze-intervento-img/img-template/640/emergenze-radiotv-ondetesto640.jpg) no-repeat center 10px; background-size: 100% auto;} header#emergenze-radiotv-homehead{ width: 80%; margin: -20px 10% 0 10%;} header#emergenze-radiotv-homehead h2{ font-size: 5.5em;} section#emergenze-radiotv-testohome p{ width: 70%; margin: 20px 15% 0 15%;} /*Sottotitolo Come Funziona*/ header#emittente-comefunziona-homehead{ margin: 30px 0 0 0;} /*CONTENITORE E 3 TONDI ROSSI IMMAGINI ICONE*/ #emittente-home-contenitoretondirossi{ width: 88%; padding: 0 0 22px 12%;} figure.emittente-home-icone{ width: 15%; margin: -44px 6.5% 0 6.5%;} /*Testo Come Funziona*/ article#emittente-comefunziona-home{ float: left; width: 100%; margin: 0; padding: 0;} article#emittente-comefunziona-home p{ float: left; width: 80%; margin: -64px 0 0 0; padding: 0 10% 30px 10%; font-size: 1.7em; color: #656771; background: #eaeaea;} /*Testo finale ed i 3 loghi*/ #emergenze-radiotv-homefoot p{ width: 76%; padding: 0 12%;} /*3 LOGHI (Contenitore e figure)*/ #emittente-home-loghifoot{ width: 90%; margin: 22px 5% 0 5%;} figure.emittente-home-imgloghifoot{ width: 26%; margin: 0 1% 0 5%;} /*RASSEGNA STAMPA*/ article#sidar-notizie-home{ padding: 0 0 20px 0; background: #eff0f3 url(emergenze-intervento-img/img-template/640/sidar-notizie-bghome640.jpg) no-repeat ;} header#sidar-notizie-homehead{ width: auto; padding: 30px 12%; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} header#sidar-notizie-homehead h2{ font-size: 6em; text-align: left;} /*BOX IMMAGINE ARTICOLO GIORNALE (2 figure diverse perchè a qualche risoluzioni cambiano leggermente dimensioni e posizionamenti)*/ figure.sidar-articolo-1home,figure.sidar-articolo-2home{ width: 80%; margin: 0 10% 50px 10%;} figure.sidar-articolo-1home figcaption,figure.sidar-articolo-2home figcaption{ width: 84%; margin: 10px 4% 0 4%; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} figure.sidar-articolo-1home img,figure.sidar-articolo-2home img{ margin: 14px 0 0 0;} /*ASSISTENZA 24/7*/ /*Nelle risoluzioni più strette disposizione verticale l'immagine della persona viene assegnata all'header e la sfumatura sotto al p del testo, in quelle più larghe orizzontali c'è solo un'immagine di sfondo assegnata al div article*/ article#sidar-assistenza-home{ padding: 0 0 70px 0; background: #354151 url(emergenze-intervento-img/img-template/sfumgrigiavert.jpg) repeat-x;} header#sidar-assistenza-homehead{ width: 96%; padding: 156px 2% 60px 2%; background: url(emergenze-intervento-img/img-template/858/sidar-assistenza-bghome858.png) no-repeat center top;} article#sidar-assistenza-home p{ width: 76%; margin: 0 12%;} } /*=======================================================================================================================================================*/ /*==================== RISOLUZIONE 720PX =====================*/ /*=======================================================================================================================================================*/ @media screen and (min-width: 641px) and (max-width: 720px) { /********************************************************************* HEADER *********************************************************************************************/ header#avviso-emergenze-header{ background: url(emergenze-intervento-img/img-template/720/emergenze-avviso-headerbg720.jpg) no-repeat;} /*Logo*/ #sidar-avviso-logocontgenerale{ padding: 0; background: url(emergenze-intervento-img/img-template/720/triangolo-logoheader-720.png) no-repeat 50% 0; background-size: 50% 100%;} #sidar-avviso-logocont{ width: 38%; margin: 30px 0 60px 32%;} /*Titolo*/ #sistemi-emergenza-titolo{ width: 100%; padding: 24px 0; background: #c7cfdd;} /*4 IMMAGINI CATASTROFI*/ figure.sidar-catastrofi-imgheader{ width: 50%; height: 100%;} /*********************************************************************************FOOTER*********************************************************************************************************/ footer#emergenze-allerta-footer{ border-top: 4px solid #496297; background: #cfd4dc url(emergenze-intervento-img/img-template/720/sidar-footer-bg720.jpg) no-repeat;} /*TITOLO E TESTO INTRO*/ article#sidar-contatti-footer{ margin: 60px 5% 0 5%;} article#sidar-contatti-footer h2{ font-size: 8em;} /*TELEFONO*/ #sidar-telefono-footer{ width: 50%; margin: 20px 25% 0 25%;} #sidar-telefono-footer h3{ padding: 8px 5% 0 5%; border-top: none;} #sidar-telefono-footer a:link,#sidar-telefono-footer a:visited,#sidar-telefono-footer a:hover{ margin: 6px 10% 4px 10%; padding: 10px 0; font-size: 2.2em; background: rgba(220,220,220,0.5);} /*EMAIL*/ /*L'ALTEZZA ASSEGNATA REGOLA LA DISTANZA E QUINDI IL POSIZIONAMENTO IN FONDO DEL DIV SUCCESSIVO CHE CONTIENE LOGO E INDIRIZZO*/ #sidar-email-footer{ width: 50%; margin: 20px 25% 0 25%;} #sidar-email-footer h3{ padding: 8px 5% 0 5%; border-top: none;} #sidar-email-footer a:link,#sidar-email-footer a:visited,#sidar-email-footer a:hover{ margin: 6px 2% 4px 2%; background: rgba(220,220,220,0.5);} /*INDIRIZZO*/ #sidar-indirizzo-footer{ margin: 50px 0 0 0; padding: 20px 5% 34px 5%; background: #caced4;} /*Logo SoundReflections*/ figure#soundreflections-logo{ width: 16%; margin: 30px 0 0 27%;} /*Indirizzo*/ #sidar-indirizzo-containerfooter{ width: 34%; margin: 16px 5% 0 4%;} #sidar-indirizzo-containerfooter p{ line-height: 1.3em; text-align: left;} /*BARRA COOKIES E WEBDESIGNER*/ #sidar-credits-footer{ padding: 30px 0; border-top: 6px solid #496297;} /*COOKIES E WEBMASTER*/ #cookies-footer,#webdesigner-footer{ width: 44%;} #cookies-footer{ float: left; margin: 0 0 0 4%;} #webdesigner-footer{ float: right; margin: 0 4% 0 0;} #cookies-footer a:link,#webdesigner-footer a:link,#cookies-footer a:visited,#webdesigner-footer a:visited,#cookies-footer a:hover,#webdesigner-footer a:hover{ width: auto; padding: 12px 6%;} #cookies-footer a:link,#cookies-footer a:visited,#cookies-footer a:hover{ text-align: left;} #webdesigner-footer a:link,#webdesigner-footer a:visited,#webdesigner-footer a:hover{ text-align: right;} #cookies-footer a:link,#cookies-footer a:visited,#cookies-footer a:hover{ float: left;} #webdesigner-footer a:link,#webdesigner-footer a:visited,#webdesigner-footer a:hover{ float: right;} /*PULSANTE TOP*/ #top{ width: 7%; right: 9%; bottom: 50px;} /******************************************************************** HOMEPAGE *****************************************************************************************/ /*TESTO INTRO*/ header#sistema-avviso-headintro{ width: 74%; padding: 50px 13% 20px 13%;} header#sistema-avviso-headintro h2{ font-size: 3.4em;} /*INSERISCO VIDEO CHE RISIEDE DIRETTAMETE NELL'HOSTING*/ #sidar-video-contvideohome{ width: 88%; margin: 0 6%;} #sistema-avviso-intro p{ width: 80%; padding: 30px 10% 40px 10%; line-height: 1.4em;} /*SICUREZZA OPERATIVA*/ article#sicurezza-operativa-home{ min-height: 600px; padding: 0 0 50px 0; background: #dbd8d1 url(emergenze-intervento-img/img-template/720/sicurezza-operativa-bghome720.jpg) no-repeat; background-size: 100% 100%;} header#sicurezza-operativa-homehead{ width: 60%; margin: 80px 20% 0 20%;} header#sicurezza-operativa-homehead h2{ font-size: 7em;} article#sicurezza-operativa-home p{ width: 64%; margin: 2% 18% 0 18%; line-height: 1.35em;} /*MODULI AVVISO*/ section#moduli-avviso-home{ background: #dadee5 url(emergenze-intervento-img/img-template/720/moduli-avviso-homeheadbg720.jpg) no-repeat;} header#moduli-avviso-headhome{ width: 76%; margin: 60px 12% 0 12%;} header#moduli-avviso-headhome h2{ font-size: 7em;} section#moduli-avviso-home p{ width: 76%; margin: 18px 12% 0 12%;} /*ELENCO INTRO*/ section#moduli-avviso-home ul{ width: 66%; margin: 4px 0 0 34%;} /*STRUTTURA OGNI BOX DI OGNI MODULO DI AVVISO - ALTERNA A DESTRA E SINISTRA IMMAGINE/TESTI E CAMBIA COLORE DI SFONDO*/ .moduli-avviso-hometesto{ width: 80%; margin: 0 10% 70px 10%;} /*Contenitore Titolo e testo (per posizionare meglio rispetto all'immagine) - Anche questi sono 2 per posizionare alternando destra e sinistra*/ article.moduli-avviso-homecontainertitolotesto{ width: 90%; margin: 4px 5% 0 5%;} .moduli-avviso-homecontainertitolotesto h3{ font-size: 3em;} /*EMITTENTE RADIO-TV*/ div#emergenze-radiotv-home{ background: #696d78 url(emergenze-intervento-img/img-template/720/emergenze-radiotv-bghome720.jpg) no-repeat;} figure#emittente-titolografico-home{ width: 60%; height: 127px; margin: 40px 20% 0 20%; background: url(emergenze-intervento-img/img-template/720/emittente-titolografico-home720.png) no-repeat; background-size: contain;} /*Section (contiene titolo testo e tutto il box con 3 loghi rossi e suo testo)*/ section#emergenze-radiotv-testohome{ margin: 140px 0 0 0; background: #696d78 url(emergenze-intervento-img/img-template/720/emergenze-radiotv-ondetesto720.jpg) no-repeat center 0; background-size: 100% auto;} header#emergenze-radiotv-homehead{ width: 70%; margin: -20px 15% 0 15%;} header#emergenze-radiotv-homehead h2{ font-size: 5.5em;} section#emergenze-radiotv-testohome p{ width: 70%; margin: 20px 15% 0 15%;} /*Sottotitolo Come Funziona*/ header#emittente-comefunziona-homehead{ margin: 30px 0 16px 0;} /*CONTENITORE E 3 TONDI ROSSI IMMAGINI ICONE*/ #emittente-home-contenitoretondirossi{ width: 88%; padding: 0 0 22px 12%;} figure.emittente-home-icone{ width: 15%; margin: -50px 6.5% 0 6.5%;} /*Testo Come Funziona*/ article#emittente-comefunziona-home{ float: left; width: 100%; margin: 0; padding: 0;} article#emittente-comefunziona-home p{ float: left; width: 80%; margin: -64px 0 0 0; padding: 0 10% 30px 10%; font-size: 1.7em; color: #656771; background: #eaeaea;} /*Testo finale ed i 3 loghi*/ #emergenze-radiotv-homefoot p{ width: 76%; padding: 0 12%;} /*3 LOGHI (Contenitore e figure)*/ #emittente-home-loghifoot{ width: 90%; margin: 22px 5% 0 5%;} figure.emittente-home-imgloghifoot{ width: 26%; margin: 0 1% 0 5%;} /*RASSEGNA STAMPA*/ article#sidar-notizie-home{ padding: 0 0 20px 0; background: #eff0f3 url(emergenze-intervento-img/img-template/720/sidar-notizie-bghome720.jpg) no-repeat ;} header#sidar-notizie-homehead{ width: auto; padding: 30px 12%; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} header#sidar-notizie-homehead h2{ font-size: 6em; text-align: left;} /*BOX IMMAGINE ARTICOLO GIORNALE (2 figure diverse perchè a qualche risoluzioni cambiano leggermente dimensioni e posizionamenti)*/ figure.sidar-articolo-1home,figure.sidar-articolo-2home{ width: 70%; margin: 0 15% 50px 15%;} figure.sidar-articolo-1home figcaption,figure.sidar-articolo-2home figcaption{ width: 78%; margin: 10px 7% 0 7%; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} figure.sidar-articolo-1home img,figure.sidar-articolo-2home img{ margin: 14px 0 0 0;} /*ASSISTENZA 24/7*/ /*Nelle risoluzioni più strette disposizione verticale l'immagine della persona viene assegnata all'header e la sfumatura sotto al p del testo, in quelle più larghe orizzontali c'è solo un'immagine di sfondo assegnata al div article*/ article#sidar-assistenza-home{ padding: 0 0 70px 0; background: #354151 url(emergenze-intervento-img/img-template/sfumgrigiavert.jpg) repeat-x;} header#sidar-assistenza-homehead{ padding: 116px 5% 90px 5%; background: url(emergenze-intervento-img/img-template/858/sidar-assistenza-bghome858.png) no-repeat center top;} header#sidar-assistenza-homehead h2{ font-size: 6.5em;} article#sidar-assistenza-home p{ width: 76%; margin: 0 12%;} } /*=======================================================================================================================================================*/ /*==================== RISOLUZIONE 800-768PX =====================*/ /*=======================================================================================================================================================*/ @media screen and (min-width: 721px) and (max-width: 800px) { /********************************************************************* HEADER *********************************************************************************************/ header#avviso-emergenze-header{ background: url(emergenze-intervento-img/img-template/800/emergenze-avviso-headerbg800.jpg) no-repeat;} /*Logo*/ #sidar-avviso-logocontgenerale{ padding: 0; background: url(emergenze-intervento-img/img-template/800/triangolo-logoheader-800.png) no-repeat 50% 0; background-size: 50% 100%;} #sidar-avviso-logocont{ width: 36%; margin: 26px 0 60px 32.6%;} /*Titolo*/ #sistemi-emergenza-titolo{ width: 100%; padding: 24px 0; background: #c7cfdd;} /*4 IMMAGINI CATASTROFI*/ figure.sidar-catastrofi-imgheader{ width: 50%; height: 100%;} figure.sidar-catastrofi-imgheader figcaption{ font-size: 2.6em;} /*********************************************************************************FOOTER*********************************************************************************************************/ footer#emergenze-allerta-footer{ border-top: 4px solid #496297; background: #cfd4dc url(emergenze-intervento-img/img-template/800/sidar-footer-bg800.jpg) no-repeat;} /*TITOLO E TESTO INTRO*/ article#sidar-contatti-footer{ margin: 60px 5% 0 5%;} article#sidar-contatti-footer h2{ font-size: 8em;} /*TELEFONO*/ #sidar-telefono-footer{ width: 50%; margin: 20px 25% 0 25%;} #sidar-telefono-footer h3{ padding: 8px 5% 0 5%; border-top: none;} #sidar-telefono-footer a:link,#sidar-telefono-footer a:visited,#sidar-telefono-footer a:hover{ margin: 6px 10% 4px 10%; padding: 10px 0; font-size: 2.2em; background: rgba(220,220,220,0.5);} /*EMAIL*/ /*L'ALTEZZA ASSEGNATA REGOLA LA DISTANZA E QUINDI IL POSIZIONAMENTO IN FONDO DEL DIV SUCCESSIVO CHE CONTIENE LOGO E INDIRIZZO*/ #sidar-email-footer{ width: 50%; margin: 20px 25% 0 25%;} #sidar-email-footer h3{ padding: 8px 5% 0 5%; border-top: none;} #sidar-email-footer a:link,#sidar-email-footer a:visited,#sidar-email-footer a:hover{ margin: 6px 2% 4px 2%; background: rgba(220,220,220,0.5);} /*INDIRIZZO*/ #sidar-indirizzo-footer{ margin: 50px 0 0 0; padding: 20px 5% 34px 5%; background: #caced4;} /*Logo SoundReflections*/ figure#soundreflections-logo{ width: 16%; margin: 30px 0 0 27%;} /*Indirizzo*/ #sidar-indirizzo-containerfooter{ width: 34%; margin: 16px 5% 0 4%;} #sidar-indirizzo-containerfooter p{ line-height: 1.3em; text-align: left;} /*BARRA COOKIES E WEBDESIGNER*/ #sidar-credits-footer{ padding: 30px 0; border-top: 6px solid #496297;} /*COOKIES E WEBMASTER*/ #cookies-footer,#webdesigner-footer{ width: 42%;} #cookies-footer{ float: left; margin: 0 0 0 4%;} #webdesigner-footer{ float: right; margin: 0 4% 0 0;} #cookies-footer a:link,#webdesigner-footer a:link,#cookies-footer a:visited,#webdesigner-footer a:visited,#cookies-footer a:hover,#webdesigner-footer a:hover{ width: auto; padding: 12px 6%;} #cookies-footer a:link,#cookies-footer a:visited,#cookies-footer a:hover{ text-align: left;} #webdesigner-footer a:link,#webdesigner-footer a:visited,#webdesigner-footer a:hover{ text-align: right;} #cookies-footer a:link,#cookies-footer a:visited,#cookies-footer a:hover{ float: left;} #webdesigner-footer a:link,#webdesigner-footer a:visited,#webdesigner-footer a:hover{ float: right;} /*PULSANTE TOP*/ #top{ width: 7%; right: 9%; bottom: 50px;} /******************************************************************** HOMEPAGE *****************************************************************************************/ /*TESTO INTRO*/ header#sistema-avviso-headintro{ width: 90%; padding: 50px 5% 20px 5%;} header#sistema-avviso-headintro h2{ font-size: 3.4em;} /*INSERISCO VIDEO CHE RISIEDE DIRETTAMETE NELL'HOSTING*/ #sidar-video-contvideohome{ width: 88%; margin: 0 6%;} #sistema-avviso-intro p{ padding: 30px 7% 40px 7%;} /*SICUREZZA OPERATIVA*/ article#sicurezza-operativa-home{ min-height: 600px; padding: 0 0 50px 0; background: #dbd8d1 url(emergenze-intervento-img/img-template/800/sicurezza-operativa-bghome800.jpg) no-repeat; background-size: 100% 100%;} header#sicurezza-operativa-homehead{ width: 60%; margin: 80px 20% 0 20%;} header#sicurezza-operativa-homehead h2{ font-size: 7em;} article#sicurezza-operativa-home p{ width: 64%; margin: 2% 18% 0 18%; line-height: 1.35em;} /*MODULI AVVISO*/ section#moduli-avviso-home{ background: #dadee5 url(emergenze-intervento-img/img-template/800/moduli-avviso-homeheadbg800.jpg) no-repeat;} header#moduli-avviso-headhome{ width: 76%; margin: 60px 12% 0 12%;} header#moduli-avviso-headhome h2{ font-size: 7em;} section#moduli-avviso-home p{ width: 76%; margin: 18px 12% 0 12%;} /*ELENCO INTRO*/ section#moduli-avviso-home ul{ width: 68%; margin: 4px 0 0 32%;} /*STRUTTURA OGNI BOX DI OGNI MODULO DI AVVISO - ALTERNA A DESTRA E SINISTRA IMMAGINE/TESTI E CAMBIA COLORE DI SFONDO*/ .moduli-avviso-hometesto{ width: 70%; margin: 0 15% 60px 15%;} /*Contenitore Titolo e testo (per posizionare meglio rispetto all'immagine) - Anche questi sono 2 per posizionare alternando destra e sinistra*/ article.moduli-avviso-homecontainertitolotesto{ width: 90%; margin: 4px 5% 0 5%;} .moduli-avviso-homecontainertitolotesto h3{ font-size: 3em;} /*EMITTENTE RADIO-TV*/ div#emergenze-radiotv-home{ background: #696d78 url(emergenze-intervento-img/img-template/800/emergenze-radiotv-bghome800.jpg) no-repeat;} figure#emittente-titolografico-home{ width: 60%; height: 127px; margin: 48px 20% 0 20%; background: url(emergenze-intervento-img/img-template/800/emittente-titolografico-home800.png) no-repeat; background-size: contain;} /*Section (contiene titolo testo e tutto il box con 3 loghi rossi e suo testo)*/ section#emergenze-radiotv-testohome{ margin: 140px 0 0 0; background: #696d78 url(emergenze-intervento-img/img-template/800/emergenze-radiotv-ondetesto800.jpg) no-repeat center 12%; background-size: 100% auto;} header#emergenze-radiotv-homehead{ width: 60%; margin: -20px 20% 0 20%;} header#emergenze-radiotv-homehead h2{ font-size: 5.5em;} section#emergenze-radiotv-testohome p{ width: 70%; margin: 20px 15% 0 15%;} /*Sottotitolo Come Funziona*/ header#emittente-comefunziona-homehead{ margin: 30px 0 16px 0;} /*CONTENITORE E 3 TONDI ROSSI IMMAGINI ICONE*/ #emittente-home-contenitoretondirossi{ width: 88%; padding: 0 0 22px 12%;} figure.emittente-home-icone{ width: 15%; margin: -54px 6.5% 0 6.5%;} /*Testo Come Funziona*/ article#emittente-comefunziona-home{ float: left; width: 100%; margin: 0; padding: 0;} article#emittente-comefunziona-home p{ float: left; width: 80%; margin: -64px 0 0 0; padding: 0 10% 30px 10%; font-size: 1.7em; color: #656771; background: #eaeaea;} /*Testo finale ed i 3 loghi*/ #emergenze-radiotv-homefoot p{ width: 76%; padding: 0 12%;} /*3 LOGHI (Contenitore e figure)*/ #emittente-home-loghifoot{ width: 90%; margin: 22px 5% 0 5%;} figure.emittente-home-imgloghifoot{ width: 26%; margin: 0 1% 0 5%;} /*RASSEGNA STAMPA*/ article#sidar-notizie-home{ padding: 0 0 20px 0; background: #eff0f3 url(emergenze-intervento-img/img-template/800/sidar-notizie-bghome800.jpg) no-repeat;} header#sidar-notizie-homehead{ width: auto; padding: 30px 12%; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} header#sidar-notizie-homehead h2{ font-size: 6em; text-align: left;} /*BOX IMMAGINE ARTICOLO GIORNALE (2 figure diverse perchè a qualche risoluzioni cambiano leggermente dimensioni e posizionamenti)*/ figure.sidar-articolo-1home,figure.sidar-articolo-2home{ width: 70%; margin: 0 15% 50px 15%;} figure.sidar-articolo-1home figcaption,figure.sidar-articolo-2home figcaption{ width: 78%; margin: 10px 7% 0 7%; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} figure.sidar-articolo-1home img,figure.sidar-articolo-2home img{ margin: 14px 0 0 0;} /*ASSISTENZA 24/7*/ /*Nelle risoluzioni più strette disposizione verticale l'immagine della persona viene assegnata all'header e la sfumatura sotto al p del testo, in quelle più larghe orizzontali c'è solo un'immagine di sfondo assegnata al div article*/ article#sidar-assistenza-home{ padding: 0 0 70px 0;} header#sidar-assistenza-homehead{ padding: 116px 5% 90px 5%; background: url(emergenze-intervento-img/img-template/858/sidar-assistenza-bghome858.png) no-repeat center top;} header#sidar-assistenza-homehead h2{ font-size: 6.5em;} article#sidar-assistenza-home p{ width: 76%; margin: 0 12%;} } /*=======================================================================================================================================================*/ /*==================== RISOLUZIONE 858-850PX =====================*/ /*=======================================================================================================================================================*/ @media screen and (min-width: 801px) and (max-width: 858px) { /********************************************************************* HEADER *********************************************************************************************/ header#avviso-emergenze-header{ background: url(emergenze-intervento-img/img-template/858/emergenze-avviso-headerbg858.jpg) no-repeat;} /*Logo*/ #sidar-avviso-logocontgenerale{ padding: 0; background: url(emergenze-intervento-img/img-template/858/triangolo-logoheader-858.png) no-repeat 50% 0; background-size: 50% 100%;} #sidar-avviso-logocont{ width: 36%; margin: 26px 0 60px 32.6%;} /*Titolo*/ #sistemi-emergenza-titolo{ width: 100%; padding: 24px 0; background: #c7cfdd;} /*4 IMMAGINI CATASTROFI*/ figure.sidar-catastrofi-imgheader{ width: 50%; height: 100%;} figure.sidar-catastrofi-imgheader figcaption{ font-size: 2.6em;} /*********************************************************************************FOOTER*********************************************************************************************************/ footer#emergenze-allerta-footer{ border-top: 4px solid #496297; background: #cfd4dc url(emergenze-intervento-img/img-template/858/sidar-footer-bg858.jpg) no-repeat;} /*TITOLO E TESTO INTRO*/ article#sidar-contatti-footer{ margin: 60px 5% 0 5%;} article#sidar-contatti-footer h2{ font-size: 8em;} /*TELEFONO*/ #sidar-telefono-footer{ width: 46%; margin: 20px 27% 0 27%;} #sidar-telefono-footer h3{ padding: 8px 5% 0 5%; border-top: none;} #sidar-telefono-footer a:link,#sidar-telefono-footer a:visited,#sidar-telefono-footer a:hover{ margin: 6px 10% 4px 10%; padding: 10px 0; font-size: 2.2em; background: rgba(220,220,220,0.5);} /*EMAIL*/ /*L'ALTEZZA ASSEGNATA REGOLA LA DISTANZA E QUINDI IL POSIZIONAMENTO IN FONDO DEL DIV SUCCESSIVO CHE CONTIENE LOGO E INDIRIZZO*/ #sidar-email-footer{ width: 46%; margin: 20px 27% 0 27%;} #sidar-email-footer h3{ padding: 8px 5% 0 5%; border-top: none;} #sidar-email-footer a:link,#sidar-email-footer a:visited,#sidar-email-footer a:hover{ margin: 6px 2% 4px 2%; background: rgba(220,220,220,0.5);} /*INDIRIZZO*/ #sidar-indirizzo-footer{ margin: 50px 0 0 0; padding: 20px 5% 34px 5%; background: #caced4;} /*Logo SoundReflections*/ figure#soundreflections-logo{ width: 14%; margin: 30px 0 0 29%;} /*Indirizzo*/ #sidar-indirizzo-containerfooter{ width: 34%; margin: 16px 5% 0 4%;} #sidar-indirizzo-containerfooter p{ line-height: 1.3em; text-align: left;} /*BARRA COOKIES E WEBDESIGNER*/ #sidar-credits-footer{ padding: 30px 0; border-top: 6px solid #496297;} /*COOKIES E WEBMASTER*/ #cookies-footer,#webdesigner-footer{ width: 42%;} #cookies-footer{ float: left; margin: 0 0 0 4%;} #webdesigner-footer{ float: right; margin: 0 4% 0 0;} #cookies-footer a:link,#webdesigner-footer a:link,#cookies-footer a:visited,#webdesigner-footer a:visited,#cookies-footer a:hover,#webdesigner-footer a:hover{ width: auto; padding: 12px 6%;} #cookies-footer a:link,#cookies-footer a:visited,#cookies-footer a:hover{ text-align: left;} #webdesigner-footer a:link,#webdesigner-footer a:visited,#webdesigner-footer a:hover{ text-align: right;} #cookies-footer a:link,#cookies-footer a:visited,#cookies-footer a:hover{ float: left;} #webdesigner-footer a:link,#webdesigner-footer a:visited,#webdesigner-footer a:hover{ float: right;} /*PULSANTE TOP*/ #top{ width: 7%; right: 9%; bottom: 50px;} /******************************************************************** HOMEPAGE *****************************************************************************************/ /*TESTO INTRO*/ header#sistema-avviso-headintro{ width: 90%; padding: 50px 5% 20px 5%;} header#sistema-avviso-headintro h2{ font-size: 3.4em;} /*INSERISCO VIDEO CHE RISIEDE DIRETTAMETE NELL'HOSTING*/ #sidar-video-contvideohome{ width: 80%; margin: 0 10%;} #sistema-avviso-intro p{ width: 76%; padding: 30px 12% 40px 12%;} /*SICUREZZA OPERATIVA*/ article#sicurezza-operativa-home{ min-height: 600px; padding: 0 0 50px 0; background: #dbd8d1 url(emergenze-intervento-img/img-template/858/sicurezza-operativa-bghome858.jpg) no-repeat; background-size: 100% 100%;} header#sicurezza-operativa-homehead{ width: 60%; margin: 80px 20% 0 20%;} header#sicurezza-operativa-homehead h2{ font-size: 7em;} article#sicurezza-operativa-home p{ width: 64%; margin: 2% 18% 0 18%; line-height: 1.35em;} /*MODULI AVVISO*/ section#moduli-avviso-home{ background: #dadee5 url(emergenze-intervento-img/img-template/858/moduli-avviso-homeheadbg858.jpg) no-repeat;} header#moduli-avviso-headhome{ width: 70%; margin: 60px 15% 0 15%;} header#moduli-avviso-headhome h2{ font-size: 7em;} section#moduli-avviso-home p{ width: 76%; margin: 18px 12% 0 12%;} /*ELENCO INTRO*/ section#moduli-avviso-home ul{ width: 61%; margin: 4px 0 0 39%;} /*STRUTTURA OGNI BOX DI OGNI MODULO DI AVVISO - ALTERNA A DESTRA E SINISTRA IMMAGINE/TESTI E CAMBIA COLORE DI SFONDO*/ .moduli-avviso-hometesto{ width: 70%; margin: 0 15% 60px 15%;} /*Contenitore Titolo e testo (per posizionare meglio rispetto all'immagine) - Anche questi sono 2 per posizionare alternando destra e sinistra*/ article.moduli-avviso-homecontainertitolotesto{ width: 90%; margin: 4px 5% 0 5%;} .moduli-avviso-homecontainertitolotesto h3{ font-size: 3em;} /*EMITTENTE RADIO-TV*/ div#emergenze-radiotv-home{ background: #696d78 url(emergenze-intervento-img/img-template/858/emergenze-radiotv-bghome858.jpg) no-repeat;} figure#emittente-titolografico-home{ width: 58%; height: 127px; margin: 40px 21% 0 21%; background: url(emergenze-intervento-img/img-template/858/emittente-titolografico-home858.png) no-repeat; background-size: contain;} /*Section (contiene titolo testo e tutto il box con 3 loghi rossi e suo testo)*/ section#emergenze-radiotv-testohome{ margin: 140px 0 0 0; background: #696d78 url(emergenze-intervento-img/img-template/858/emergenze-radiotv-ondetesto858.jpg) no-repeat center 12%; background-size: 100% auto;} header#emergenze-radiotv-homehead{ width: 60%; margin: -20px 20% 0 20%;} header#emergenze-radiotv-homehead h2{ font-size: 5.5em;} section#emergenze-radiotv-testohome p{ width: 70%; margin: 20px 15% 0 15%;} /*Sottotitolo Come Funziona*/ header#emittente-comefunziona-homehead{ margin: 30px 0 16px 0;} /*CONTENITORE E 3 TONDI ROSSI IMMAGINI ICONE*/ #emittente-home-contenitoretondirossi{ width: 85.5%; padding: 0 0 22px 14.5%;} figure.emittente-home-icone{ width: 13%; margin: -50px 7% 0 7%;} /*Testo Come Funziona*/ article#emittente-comefunziona-home{ float: left; width: 100%; margin: 0; padding: 0;} article#emittente-comefunziona-home p{ float: left; width: 80%; margin: -64px 0 0 0; padding: 0 10% 30px 10%; font-size: 1.7em; color: #656771; background: #eaeaea;} /*Testo finale ed i 3 loghi*/ #emergenze-radiotv-homefoot p{ width: 76%; padding: 0 12%;} /*3 LOGHI (Contenitore e figure)*/ #emittente-home-loghifoot{ width: 90%; margin: 22px 5% 0 5%;} figure.emittente-home-imgloghifoot{ width: 26%; margin: 0 1% 0 5%;} /*RASSEGNA STAMPA*/ article#sidar-notizie-home{ padding: 0 0 20px 0; background: #eff0f3 url(emergenze-intervento-img/img-template/858/sidar-notizie-bghome858.jpg) no-repeat;} header#sidar-notizie-homehead{ width: auto; padding: 30px 12%; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} header#sidar-notizie-homehead h2{ font-size: 6em; text-align: left;} /*BOX IMMAGINE ARTICOLO GIORNALE (2 figure diverse perchè a qualche risoluzioni cambiano leggermente dimensioni e posizionamenti)*/ figure.sidar-articolo-1home,figure.sidar-articolo-2home{ width: 70%; margin: 0 15% 50px 15%;} figure.sidar-articolo-1home figcaption,figure.sidar-articolo-2home figcaption{ width: 68%; margin: 10px 12% 0 12%; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} figure.sidar-articolo-1home img,figure.sidar-articolo-2home img{ margin: 14px 0 0 0;} /*ASSISTENZA 24/7*/ /*Nelle risoluzioni più strette disposizione verticale l'immagine della persona viene assegnata all'header e la sfumatura sotto al p del testo, in quelle più larghe orizzontali c'è solo un'immagine di sfondo assegnata al div article*/ article#sidar-assistenza-home{ padding: 0 0 70px 0;} header#sidar-assistenza-homehead{ padding: 124px 5% 70px 5%; background: url(emergenze-intervento-img/img-template/858/sidar-assistenza-bghome858.png) no-repeat center top;} header#sidar-assistenza-homehead h2{ font-size: 6.5em;} article#sidar-assistenza-home p{ width: 70%; margin: 0 15%;} } /*=======================================================================================================================================================*/ /*==================== RISOLUZIONE 960PX =====================*/ /*=======================================================================================================================================================*/ @media screen and (min-width: 859px) and (max-width: 960px) { h1{ font-size: 3.2em; line-height: 1.2em;} /********************************************************************* HEADER *********************************************************************************************/ /*Logo*/ #sidar-avviso-logocontgenerale{ padding: 0; background: url(emergenze-intervento-img/img-template/960/emergenze-avviso-headerbg960.jpg) no-repeat; background-size: 100% auto;} #sidar-avviso-logocont{ width: 30%; margin: 36px 0 60px 35.6%;} /*Titolo*/ #sistemi-emergenza-titolo{ width: 100%; padding: 24px 0; background: #c7cfdd;} /*4 IMMAGINI CATASTROFI*/ figure.sidar-catastrofi-imgheader{ width: 50%;} figure.sidar-catastrofi-imgheader figcaption{ font-size: 2.6em;} /*********************************************************FOOTER*******************************************************************/ footer#emergenze-allerta-footer{ min-height: 748px; border-top: 6px solid #496297; background: url(emergenze-intervento-img/img-template/1024/sidar-footer-bg1024.jpg) no-repeat;} /*TITOLO E TESTO INTRO*/ article#sidar-contatti-footer{ margin: 90px 5% 0 5%;} article#sidar-contatti-footer h2{ font-size: 10em;} article#sidar-contatti-footer p{ width: 100%; padding: 0; font-size: 1.6em;} /*TELEFONO*/ #sidar-telefono-footer{ width: 50%; margin: 30px 25% 0 25%;} #sidar-telefono-footer h3{ padding: 8px 5% 0 5%; border-top: none;} #sidar-telefono-footer a:link,#sidar-telefono-footer a:visited,#sidar-telefono-footer a:hover{ width: 70%; margin: 6px 15% 4px 15%; padding: 10px 0; font-size: 2.2em; background: rgba(220,220,220,0.5);} /*EMAIL*/ /*L'ALTEZZA ASSEGNATA REGOLA LA DISTANZA E QUINDI IL POSIZIONAMENTO IN FONDO DEL DIV SUCCESSIVO CHE CONTIENE LOGO E INDIRIZZO*/ #sidar-email-footer{ width: 50%; margin: 30px 25% 0 25%;} #sidar-email-footer h3{ padding: 8px 5% 0 5%; border-top: none;} #sidar-email-footer a:link,#sidar-email-footer a:visited,#sidar-email-footer a:hover{ width: 70%; margin: 6px 15% 4px 15%; background: rgba(220,220,220,0.5);} /*INDIRIZZO*/ #sidar-indirizzo-footer{ margin: 72px 0 0 0; padding: 24px 5%; background: rgba(49,77,146,0.1);} /*Logo SoundReflections*/ figure#soundreflections-logo{ width: 12%; margin: 14px 0 0 34.4%;} /*Indirizzo*/ #sidar-indirizzo-containerfooter{ width: 42%; margin: 0 0 0 3%;} #sidar-indirizzo-containerfooter p{ text-align: left; line-height: 1.2em;} /*BARRA COOKIES E WEBDESIGNER*/ #sidar-credits-footer{ padding: 40px 0; border-top: 6px solid #496297;} /*COOKIES E WEBMASTER*/ #cookies-footer,#webdesigner-footer{ width: 36%;} #cookies-footer{ float: left; margin: 0 0 0 10%;} #webdesigner-footer{ float: right; margin: 0 10% 0 0;} #cookies-footer a:link,#webdesigner-footer a:link,#cookies-footer a:visited,#webdesigner-footer a:visited,#cookies-footer a:hover,#webdesigner-footer a:hover{ width: auto; padding: 0; font-size: 1.5em; border: none; background: none;} #cookies-footer a:link,#cookies-footer a:visited,#cookies-footer a:hover{ text-align: left;} #webdesigner-footer a:link,#webdesigner-footer a:visited,#webdesigner-footer a:hover{ text-align: right;} #cookies-footer a:link,#cookies-footer a:visited,#cookies-footer a:hover{ float: left;} #webdesigner-footer a:link,#webdesigner-footer a:visited,#webdesigner-footer a:hover{ float: right;} /*PULSANTE TOP*/ #top{ width: 6%; right: 8%;} /******************************************************************** HOMEPAGE *****************************************************************************************/ /*TESTO INTRO*/ header#sistema-avviso-headintro{ width: 90%; padding: 50px 5% 20px 5%;} header#sistema-avviso-headintro h2{ font-size: 4em;} /*INSERISCO VIDEO CHE RISIEDE DIRETTAMETE NELL'HOSTING*/ #sidar-video-contvideohome{ width: 70%; margin: 0 15%;} #sistema-avviso-intro p{ width: 68%; padding: 30px 16% 40px 16%;} /*SICUREZZA OPERATIVA*/ article#sicurezza-operativa-home{ min-height: 500px; padding: 0 0 50px 0; background: #dbd8d1 url(emergenze-intervento-img/img-template/1024/sicurezza-operativa-bghome1024.jpg) no-repeat; background-size: 100% 100%;} header#sicurezza-operativa-homehead{ width: 60%; margin: 80px 20% 0 20%;} header#sicurezza-operativa-homehead h2{ font-size: 7em;} article#sicurezza-operativa-home p{ width: 64%; margin: 2% 18% 0 18%; line-height: 1.4em;} /*MODULI AVVISO*/ section#moduli-avviso-home{ padding: 0 0 20px 0; background: #dadee5 url(emergenze-intervento-img/img-template/1024/moduli-avviso-homeheadbg1024.jpg) no-repeat;} header#moduli-avviso-headhome{ width: 60%; margin: 60px 20% 0 20%;} header#moduli-avviso-headhome h2{ font-size: 7em;} section#moduli-avviso-home p{ width: 76%; margin: 18px 12% 0 12%;} section#moduli-avviso-home p .modulicentrato{ float: left; width: 90%; margin: 8px 5% 0 5%; padding: 0; text-align: center;}/*centra riga di testo prima dell'elenco nelle risoluzioni desktop*/ /*ELENCO INTRO*/ section#moduli-avviso-home ul{ width: 64%; margin: 4px 0 0 36%;} /*STRUTTURA OGNI BOX DI OGNI MODULO DI AVVISO - ALTERNA A DESTRA E SINISTRA IMMAGINE/TESTI E CAMBIA COLORE DI SFONDO*/ .moduli-avviso-hometesto{ width: 60%; min-height: 500px; margin: 0 20% 10px 20%;} /*Contenitore Titolo e testo (per posizionare meglio rispetto all'immagine) - Anche questi sono 2 per posizionare alternando destra e sinistra*/ article.moduli-avviso-homecontainertitolotesto{ width: 100%; margin: 4px 0 0 0;} .moduli-avviso-homecontainertitolotesto h3{ font-size: 3em; text-align: center;} section#moduli-avviso-home article.moduli-avviso-homecontainertitolotesto p{ width: 90%; margin: 6px 5% 0 5%;} /*EMITTENTE RADIO-TV*/ div#emergenze-radiotv-home{ background: #696d78 url(emergenze-intervento-img/img-template/1024/emergenze-radiotv-bghome1024.jpg) no-repeat;} figure#emittente-titolografico-home{ width: 56%; height: 147px; margin: 48px 22% 0 22%; background: url(emergenze-intervento-img/img-template/1024/emittente-titolografico-home1024.png) no-repeat; background-size: contain;} /*Section (contiene titolo testo e tutto il box con 3 loghi rossi e suo testo)*/ section#emergenze-radiotv-testohome{ margin: 170px 0 0 0; background: #696d78 url(emergenze-intervento-img/img-template/1024/emergenze-radiotv-ondetesto1024.jpg) no-repeat center 12%; background-size: 100% auto;} header#emergenze-radiotv-homehead{ width: 54%; margin: 0 23% 0 23%;} header#emergenze-radiotv-homehead h2{ font-size: 6.4em;} section#emergenze-radiotv-testohome p{ width: 70%; margin: 20px 15% 0 15%;} /*Sottotitolo Come Funziona*/ header#emittente-comefunziona-homehead{ margin: 30px 0 16px 0;} /*CONTENITORE E 3 TONDI ROSSI IMMAGINI ICONE*/ #emittente-home-contenitoretondirossi{ width: 82%; padding: 0 0 22px 18%;} figure.emittente-home-icone{ width: 12%; margin: -54px 6.5% 0 6.5%;} /*Testo Come Funziona*/ article#emittente-comefunziona-home{ float: left; width: 100%; margin: 0; padding: 0;} article#emittente-comefunziona-home p{ float: left; width: 80%; margin: -64px 0 0 0; padding: 0 10% 40px 10%; font-size: 1.7em; color: #656771; background: #eaeaea;} /*Testo finale ed i 3 loghi*/ #emergenze-radiotv-homefoot{ padding: 34px 0 40px 0;} #emergenze-radiotv-homefoot p{ width: 76%; padding: 0 12%;} /*3 LOGHI (Contenitore e figure)*/ #emittente-home-loghifoot{ width: 90%; margin: 26px 5% 0 5%;} figure.emittente-home-imgloghifoot{ width: 23%; margin: 0 1% 0 7%;} /*RASSEGNA STAMPA*/ article#sidar-notizie-home{ padding: 0 0 20px 0; background: #eff0f3 url(emergenze-intervento-img/img-template/1024/sidar-notizie-bghome1024.jpg) no-repeat;} header#sidar-notizie-homehead{ width: auto; padding: 30px 12%; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} header#sidar-notizie-homehead h2{ font-size: 6em; text-align: left;} /*BOX IMMAGINE ARTICOLO GIORNALE (2 figure diverse perchè a qualche risoluzioni cambiano leggermente dimensioni e posizionamenti)*/ figure.sidar-articolo-1home,figure.sidar-articolo-2home{ width: 60%; margin: 0 20% 60px 20%;} figure.sidar-articolo-1home figcaption,figure.sidar-articolo-2home figcaption{ width: 70%; margin: 10px 11% 0 11%; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} figure.sidar-articolo-1home img,figure.sidar-articolo-2home img{ margin: 14px 0 0 0;} /*ASSISTENZA 24/7*/ /*Nelle risoluzioni più strette disposizione verticale l'immagine della persona viene assegnata all'header e la sfumatura sotto al p del testo, in quelle più larghe orizzontali c'è solo un'immagine di sfondo assegnata al div article*/ article#sidar-assistenza-home{ padding: 0 0 80px 0;} header#sidar-assistenza-homehead{ padding: 116px 5% 80px 5%; background: url(emergenze-intervento-img/img-template/858/sidar-assistenza-bghome858.png) no-repeat center top;} header#sidar-assistenza-homehead h2{ font-size: 6.5em;} article#sidar-assistenza-home p{ width: 76%; margin: 0 12%;} } /*=======================================================================================================================================================*/ /*==================== RISOLUZIONE 1024PX =====================*/ /*=======================================================================================================================================================*/ @media screen and (min-width: 961px) and (max-width: 1024px) { h1{ font-size: 3.2em; line-height: 1.2em;} /********************************************************************* HEADER *********************************************************************************************/ /*Logo*/ #sidar-avviso-logocontgenerale{ padding: 0; background: url(emergenze-intervento-img/img-template/1024/emergenze-avviso-headerbg1024.jpg) no-repeat; background-size: 100% auto;} #sidar-avviso-logocont{ width: 28%; margin: 36px 0 60px 36.6%;} /*Titolo*/ #sistemi-emergenza-titolo{ width: 100%; padding: 24px 0; background: #c7cfdd;} /*4 IMMAGINI CATASTROFI*/ figure.sidar-catastrofi-imgheader{ width: 50%;} figure.sidar-catastrofi-imgheader figcaption{ font-size: 2.6em;} /*********************************************************FOOTER*******************************************************************/ footer#emergenze-allerta-footer{ min-height: 748px; border-top: 6px solid #496297; background: url(emergenze-intervento-img/img-template/1024/sidar-footer-bg1024.jpg) no-repeat;} /*TITOLO E TESTO INTRO*/ article#sidar-contatti-footer{ margin: 90px 5% 0 5%;} article#sidar-contatti-footer h2{ font-size: 10em;} article#sidar-contatti-footer p{ width: 100%; padding: 0; font-size: 1.6em;} /*TELEFONO*/ #sidar-telefono-footer{ width: 50%; margin: 30px 25% 0 25%;} #sidar-telefono-footer h3{ padding: 8px 5% 0 5%; border-top: none;} #sidar-telefono-footer a:link,#sidar-telefono-footer a:visited,#sidar-telefono-footer a:hover{ width: 70%; margin: 6px 15% 4px 15%; padding: 10px 0; font-size: 2.2em; background: rgba(220,220,220,0.5);} /*EMAIL*/ /*L'ALTEZZA ASSEGNATA REGOLA LA DISTANZA E QUINDI IL POSIZIONAMENTO IN FONDO DEL DIV SUCCESSIVO CHE CONTIENE LOGO E INDIRIZZO*/ #sidar-email-footer{ width: 50%; margin: 30px 25% 0 25%;} #sidar-email-footer h3{ padding: 8px 5% 0 5%; border-top: none;} #sidar-email-footer a:link,#sidar-email-footer a:visited,#sidar-email-footer a:hover{ width: 70%; margin: 6px 15% 4px 15%; background: rgba(220,220,220,0.5);} /*INDIRIZZO*/ #sidar-indirizzo-footer{ margin: 72px 0 0 0; padding: 24px 5%; background: rgba(49,77,146,0.1);} /*Logo SoundReflections*/ figure#soundreflections-logo{ width: 12%; margin: 14px 0 0 34.4%;} /*Indirizzo*/ #sidar-indirizzo-containerfooter{ width: 42%; margin: 0 0 0 3%;} #sidar-indirizzo-containerfooter p{ text-align: left; line-height: 1.2em;} /*BARRA COOKIES E WEBDESIGNER*/ #sidar-credits-footer{ padding: 40px 0; border-top: 6px solid #496297;} /*COOKIES E WEBMASTER*/ #cookies-footer,#webdesigner-footer{ width: 36%;} #cookies-footer{ float: left; margin: 0 0 0 10%;} #webdesigner-footer{ float: right; margin: 0 10% 0 0;} #cookies-footer a:link,#webdesigner-footer a:link,#cookies-footer a:visited,#webdesigner-footer a:visited,#cookies-footer a:hover,#webdesigner-footer a:hover{ width: auto; padding: 0; font-size: 1.5em; border: none; background: none;} #cookies-footer a:link,#cookies-footer a:visited,#cookies-footer a:hover{ text-align: left;} #webdesigner-footer a:link,#webdesigner-footer a:visited,#webdesigner-footer a:hover{ text-align: right;} #cookies-footer a:link,#cookies-footer a:visited,#cookies-footer a:hover{ float: left;} #webdesigner-footer a:link,#webdesigner-footer a:visited,#webdesigner-footer a:hover{ float: right;} /*PULSANTE TOP*/ #top{ width: 6%; right: 8%;} /******************************************************************** HOMEPAGE *****************************************************************************************/ /*TESTO INTRO*/ header#sistema-avviso-headintro{ width: 90%; padding: 50px 5% 20px 5%;} header#sistema-avviso-headintro h2{ font-size: 4em;} /*INSERISCO VIDEO CHE RISIEDE DIRETTAMETE NELL'HOSTING*/ #sidar-video-contvideohome{ width: 70%; margin: 0 15%;} #sistema-avviso-intro p{ width: 68%; padding: 30px 16% 40px 16%;} /*SICUREZZA OPERATIVA*/ article#sicurezza-operativa-home{ min-height: 500px; padding: 0 0 50px 0; background: #dbd8d1 url(emergenze-intervento-img/img-template/1024/sicurezza-operativa-bghome1024.jpg) no-repeat; background-size: 100% 100%;} header#sicurezza-operativa-homehead{ width: 60%; margin: 80px 20% 0 20%;} header#sicurezza-operativa-homehead h2{ font-size: 7em;} article#sicurezza-operativa-home p{ width: 64%; margin: 2% 18% 0 18%; line-height: 1.4em;} /*MODULI AVVISO*/ section#moduli-avviso-home{ padding: 0 0 20px 0; background: #dadee5 url(emergenze-intervento-img/img-template/1024/moduli-avviso-homeheadbg1024.jpg) no-repeat;} header#moduli-avviso-headhome{ width: 60%; margin: 60px 20% 0 20%;} header#moduli-avviso-headhome h2{ font-size: 7em;} section#moduli-avviso-home p{ width: 76%; margin: 18px 12% 0 12%;} section#moduli-avviso-home p .modulicentrato{ float: left; width: 90%; margin: 8px 5% 0 5%; padding: 0; text-align: center;}/*centra riga di testo prima dell'elenco nelle risoluzioni desktop*/ /*ELENCO INTRO*/ section#moduli-avviso-home ul{ width: 64%; margin: 4px 0 0 36%;} /*STRUTTURA OGNI BOX DI OGNI MODULO DI AVVISO - ALTERNA A DESTRA E SINISTRA IMMAGINE/TESTI E CAMBIA COLORE DI SFONDO*/ .moduli-avviso-hometesto{ width: 60%; min-height: 500px; margin: 0 20% 10px 20%;} /*Contenitore Titolo e testo (per posizionare meglio rispetto all'immagine) - Anche questi sono 2 per posizionare alternando destra e sinistra*/ article.moduli-avviso-homecontainertitolotesto{ width: 100%; margin: 4px 0 0 0;} .moduli-avviso-homecontainertitolotesto h3{ font-size: 3em; text-align: center;} section#moduli-avviso-home article.moduli-avviso-homecontainertitolotesto p{ width: 90%; margin: 6px 5% 0 5%;} /*EMITTENTE RADIO-TV*/ div#emergenze-radiotv-home{ background: #696d78 url(emergenze-intervento-img/img-template/1024/emergenze-radiotv-bghome1024.jpg) no-repeat;} figure#emittente-titolografico-home{ width: 56%; height: 147px; margin: 48px 22% 0 22%; background: url(emergenze-intervento-img/img-template/1024/emittente-titolografico-home1024.png) no-repeat; background-size: contain;} /*Section (contiene titolo testo e tutto il box con 3 loghi rossi e suo testo)*/ section#emergenze-radiotv-testohome{ margin: 170px 0 0 0; background: #696d78 url(emergenze-intervento-img/img-template/1024/emergenze-radiotv-ondetesto1024.jpg) no-repeat center 12%; background-size: 100% auto;} header#emergenze-radiotv-homehead{ width: 54%; margin: 0 23% 0 23%;} header#emergenze-radiotv-homehead h2{ font-size: 6.4em;} section#emergenze-radiotv-testohome p{ width: 70%; margin: 20px 15% 0 15%;} /*Sottotitolo Come Funziona*/ header#emittente-comefunziona-homehead{ margin: 30px 0 16px 0;} /*CONTENITORE E 3 TONDI ROSSI IMMAGINI ICONE*/ #emittente-home-contenitoretondirossi{ width: 82%; padding: 0 0 22px 18%;} figure.emittente-home-icone{ width: 12%; margin: -54px 6.5% 0 6.5%;} /*Testo Come Funziona*/ article#emittente-comefunziona-home{ float: left; width: 100%; margin: 0; padding: 0;} article#emittente-comefunziona-home p{ float: left; width: 80%; margin: -64px 0 0 0; padding: 0 10% 40px 10%; font-size: 1.7em; color: #656771; background: #eaeaea;} /*Testo finale ed i 3 loghi*/ #emergenze-radiotv-homefoot{ padding: 34px 0 40px 0;} #emergenze-radiotv-homefoot p{ width: 76%; padding: 0 12%;} /*3 LOGHI (Contenitore e figure)*/ #emittente-home-loghifoot{ width: 90%; margin: 26px 5% 0 5%;} figure.emittente-home-imgloghifoot{ width: 23%; margin: 0 1% 0 7%;} /*RASSEGNA STAMPA*/ article#sidar-notizie-home{ padding: 0 0 20px 0; background: #eff0f3 url(emergenze-intervento-img/img-template/1024/sidar-notizie-bghome1024.jpg) no-repeat;} header#sidar-notizie-homehead{ width: auto; padding: 30px 12%; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} header#sidar-notizie-homehead h2{ font-size: 6em; text-align: left;} /*BOX IMMAGINE ARTICOLO GIORNALE (2 figure diverse perchè a qualche risoluzioni cambiano leggermente dimensioni e posizionamenti)*/ figure.sidar-articolo-1home,figure.sidar-articolo-2home{ width: 60%; margin: 0 20% 60px 20%;} figure.sidar-articolo-1home figcaption,figure.sidar-articolo-2home figcaption{ width: 70%; margin: 10px 11% 0 11%; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} figure.sidar-articolo-1home img,figure.sidar-articolo-2home img{ margin: 14px 0 0 0;} /*ASSISTENZA 24/7*/ /*Nelle risoluzioni più strette disposizione verticale l'immagine della persona viene assegnata all'header e la sfumatura sotto al p del testo, in quelle più larghe orizzontali c'è solo un'immagine di sfondo assegnata al div article*/ article#sidar-assistenza-home{ padding: 0 0 80px 0;} header#sidar-assistenza-homehead{ padding: 116px 5% 80px 5%; background: url(emergenze-intervento-img/img-template/858/sidar-assistenza-bghome858.png) no-repeat center top;} header#sidar-assistenza-homehead h2{ font-size: 6.5em;} article#sidar-assistenza-home p{ width: 76%; margin: 0 12%;} } /*=======================================================================================================================================================*/ /*==================== RISOLUZIONE 1280PX =====================*/ /*=======================================================================================================================================================*/ @media screen and (min-width: 1025px) and (max-width: 1280px) { h1{ font-size: 2.8em; line-height: 1.2em;} /********************************************************************* HEADER *********************************************************************************************/ /*Logo*/ #sidar-avviso-logocontgenerale{ padding: 0; background: url(emergenze-intervento-img/img-template/1280/emergenze-avviso-headerbg1280.jpg) no-repeat; background-size: 100% auto;} #sidar-avviso-logocont{ width: 25%; margin: 28px 0 60px 38.2%;} /*Titolo*/ #sistemi-emergenza-titolo{ width: 100%; padding: 24px 0; background: #c7cfdd;} /*4 IMMAGINI CATASTROFI*/ figure.sidar-catastrofi-imgheader{ width: 25%;} /*********************************************************FOOTER*******************************************************************/ footer#emergenze-allerta-footer{ min-height: 748px; border-top: 6px solid #496297; background: url(emergenze-intervento-img/img-template/1280/sidar-footer-bg1280.jpg) no-repeat;} /*TITOLO E TESTO INTRO*/ article#sidar-contatti-footer{ width: 72%; margin: 90px 0 0 28%;} article#sidar-contatti-footer h2{ font-size: 10em;} article#sidar-contatti-footer p{ width: 100%; padding: 0; font-size: 1.6em;} /*TELEFONO*/ #sidar-telefono-footer{ width: 50%; margin: 30px 11% 0 39%;} #sidar-telefono-footer h3{ padding: 8px 5% 0 5%; border-top: none;} #sidar-telefono-footer a:link,#sidar-telefono-footer a:visited,#sidar-telefono-footer a:hover{ width: 70%; margin: 6px 15% 4px 15%; padding: 10px 0; font-size: 2.2em; background: rgba(220,220,220,0.5);} /*EMAIL*/ /*L'ALTEZZA ASSEGNATA REGOLA LA DISTANZA E QUINDI IL POSIZIONAMENTO IN FONDO DEL DIV SUCCESSIVO CHE CONTIENE LOGO E INDIRIZZO*/ #sidar-email-footer{ width: 50%; margin: 30px 11% 0 39%;} #sidar-email-footer h3{ padding: 8px 5% 0 5%; border-top: none;} #sidar-email-footer a:link,#sidar-email-footer a:visited,#sidar-email-footer a:hover{ width: 70%; margin: 6px 15% 4px 15%; background: rgba(220,220,220,0.5);} /*INDIRIZZO*/ #sidar-indirizzo-footer{ margin: 72px 0 0 0; padding: 24px 5%; background: rgba(49,77,146,0.1);} /*Logo SoundReflections*/ figure#soundreflections-logo{ width: 9%; margin: 14px 0 0 52.4%;} /*Indirizzo*/ #sidar-indirizzo-containerfooter{ width: 33%; margin: 0 0 0 3%;} #sidar-indirizzo-containerfooter p{ text-align: left; line-height: 1.2em;} /*BARRA COOKIES E WEBDESIGNER*/ #sidar-credits-footer{ padding: 40px 0; border-top: 6px solid #496297;} /*COOKIES E WEBMASTER*/ #cookies-footer,#webdesigner-footer{ width: 36%;} #cookies-footer{ float: left; margin: 0 0 0 10%;} #webdesigner-footer{ float: right; margin: 0 10% 0 0;} #cookies-footer a:link,#webdesigner-footer a:link,#cookies-footer a:visited,#webdesigner-footer a:visited,#cookies-footer a:hover,#webdesigner-footer a:hover{ width: auto; padding: 0; font-size: 1.5em; border: none; background: none;} #cookies-footer a:link,#cookies-footer a:visited,#cookies-footer a:hover{ text-align: left;} #webdesigner-footer a:link,#webdesigner-footer a:visited,#webdesigner-footer a:hover{ text-align: right;} #cookies-footer a:link,#cookies-footer a:visited,#cookies-footer a:hover{ float: left;} #webdesigner-footer a:link,#webdesigner-footer a:visited,#webdesigner-footer a:hover{ float: right;} /*PULSANTE TOP*/ #top{ width: 4%; right: 8%;} /******************************************************************** HOMEPAGE *****************************************************************************************/ /*TESTO INTRO*/ #sistema-avviso-intro{ background: #e9eaec;} header#sistema-avviso-headintro{ width: 70%; padding: 40px 15% 90px 15%; background: #fff;} header#sistema-avviso-headintro h2{ font-size: 4em; line-height: 1.2em;} /*INSERISCO VIDEO CHE RISIEDE DIRETTAMETE NELL'HOSTING*/ #sidar-video-contvideohome{ width: 50%; margin: -70px 25% 0 25%; border: 1px solid #dedfe1;} #sidar-video-playervideohome{ width: 94%; margin: 2% 3%; border: 2px solid #c0c1c2;} /*Player Youtube*/ /************************************************************************************************ PER ORA DISATTIVATO ED USATO IL CODICE SOPRA CHE INCORPORA IL VIDEO DIRETTAMENTE DALL'HOSTING #sidar-youtube-contvideohome{ width: 40%; margin: -70px 30% 0 30%;} #sidar-youtube-playervideohome{ width: 93.5%; height: 470px; margin: 2% 3%;} ************************************************************************************************/ #sistema-avviso-intro p{ width: 70%; margin: -70px 0 0 0; padding: 120px 15% 50px 15%; line-height: 1.5em; background: #fff;} /*SICUREZZA OPERATIVA*/ article#sicurezza-operativa-home{ min-height: 645px; max-height: 645px; padding: 0; background: #dbd8d1 url(emergenze-intervento-img/img-template/1280/sicurezza-operativa-bghome1280.jpg) no-repeat;} header#sicurezza-operativa-homehead{ width: 60%; margin: 90px 20% 0 20%;} header#sicurezza-operativa-homehead h2{ font-size: 8em;} article#sicurezza-operativa-home p{ width: 64%; margin: 2% 18% 0 18%; line-height: 1.4em;} /*MODULI AVVISO*/ section#moduli-avviso-home{ padding: 0 0 20px 0; background: #dadee5 url(emergenze-intervento-img/img-template/1280/moduli-avviso-homeheadbg1280.jpg) no-repeat;} header#moduli-avviso-headhome{ width: 46%; margin: 60px 27% 0 27%;} header#moduli-avviso-headhome h2{ font-size: 7em;} section#moduli-avviso-home p{ width: 76%; margin: 18px 12% 0 12%;} section#moduli-avviso-home p .modulicentrato{ float: left; width: 90%; margin: 8px 5% 0 5%; padding: 0; text-align: center;}/*centra riga di testo prima dell'elenco nelle risoluzioni desktop*/ /*ELENCO INTRO*/ section#moduli-avviso-home ul{ width: 58%; margin: 4px 0 0 42%;} /*STRUTTURA OGNI BOX DI OGNI MODULO DI AVVISO - ALTERNA A DESTRA E SINISTRA IMMAGINE/TESTI E CAMBIA COLORE DI SFONDO*/ .moduli-avviso-hometesto{ width: 40%; height: 520px; margin: 0;} .moduli-avvisohome-marginsx{ margin: 0 6% 0 6%;}/*classe che assegna margine sinistro al box sinistro quando accoppiati due a due (risoluzioni maggiori)*/ /*Contenitore Titolo e testo (per posizionare meglio rispetto all'immagine) - Anche questi sono 2 per posizionare alternando destra e sinistra*/ /*EMITTENTE RADIO-TV*/ div#emergenze-radiotv-home{ background: #696d78 url(emergenze-intervento-img/img-template/1280/emergenze-radiotv-bghome1280.jpg) no-repeat;} figure#emittente-titolografico-home{ width: 56%; height: 147px; margin: 45px 21% 0 23%; background: url(emergenze-intervento-img/img-template/1024/emittente-titolografico-home1024.png) no-repeat; background-size: contain;} /*Section (contiene titolo testo e tutto il box con 3 loghi rossi e suo testo)*/ section#emergenze-radiotv-testohome{ margin: 140px 0 0 0; background: #696d78 url(emergenze-intervento-img/img-template/1280/emergenze-radiotv-ondetesto1280.jpg) no-repeat center 16px; background-size: 100% auto;} header#emergenze-radiotv-homehead{ width: 90%; margin: 0 5%;} header#emergenze-radiotv-homehead h2{ font-size: 6.4em;} section#emergenze-radiotv-testohome p{ width: 70%; margin: 20px 15% 0 15%;} /*Sottotitolo Come Funziona*/ header#emittente-comefunziona-homehead{ margin: 30px 0 16px 0;} /*CONTENITORE E 3 TONDI ROSSI IMMAGINI ICONE*/ #emittente-home-contenitoretondirossi{ width: 79.2%; padding: 0 0 22px 20.8%;} figure.emittente-home-icone{ width: 10%; margin: -54px 7% 0 7%;} /*Testo Come Funziona*/ article#emittente-comefunziona-home{ float: left; width: 100%; margin: 0; padding: 0;} article#emittente-comefunziona-home p{ float: left; width: 80%; margin: -64px 0 0 0; padding: 0 10% 40px 10%; font-size: 1.7em; color: #656771; background: #eaeaea;} /*Testo finale ed i 3 loghi*/ #emergenze-radiotv-homefoot{ padding: 34px 0 40px 0;} #emergenze-radiotv-homefoot p{ width: 76%; padding: 0 12%;} /*3 LOGHI (Contenitore e figure)*/ #emittente-home-loghifoot{ width: 90%; margin: 26px 5% 0 5%;} figure.emittente-home-imgloghifoot{ width: 23%; margin: 0 1% 0 7%;} /*RASSEGNA STAMPA*/ article#sidar-notizie-home{ padding: 0 0 20px 0; background: #eff0f3 url(emergenze-intervento-img/img-template/1280/sidar-notizie-bghome1280.jpg) no-repeat;} header#sidar-notizie-homehead{ width: auto; padding: 30px 12%; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} header#sidar-notizie-homehead h2{ font-size: 6em; text-align: left;} /*BOX IMMAGINE ARTICOLO GIORNALE (2 figure diverse perchè a qualche risoluzioni cambiano leggermente dimensioni e posizionamenti)*/ figure.sidar-articolo-1home,figure.sidar-articolo-2home{ width: 40%; margin: 0 5% 60px 5%;} figure.sidar-articolo-1home figcaption,figure.sidar-articolo-2home figcaption{ width: 90%; margin: 10px 5% 0 5%; padding: 8px 0; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} figure.sidar-articolo-1home img,figure.sidar-articolo-2home img{ margin: 14px 0 0 0;} /*ASSISTENZA 24/7*/ article#sidar-assistenza-home{ height: 354px; padding: 0; background: #eff0f3 url(emergenze-intervento-img/img-template/1280/sidar-assistenza-bghome1280.jpg) no-repeat;} header#sidar-assistenza-homehead{ width: 72%; margin: 100px 0 0 28%; padding: 0; background: none;} header#sidar-assistenza-homehead h2{ font-size: 5em; text-align: left;} article#sidar-assistenza-home p{ width: 60%; margin: 20px 0 0 28%;} } /*=======================================================================================================================================================*/ /*==================== RISOLUZIONE 1366X =====================*/ /*=======================================================================================================================================================*/ @media screen and (min-width: 1281px) and (max-width: 1366px) { h1{ font-size: 2.8em; line-height: 1.2em;} /********************************************************************* HEADER *********************************************************************************************/ /*Logo*/ #sidar-avviso-logocontgenerale{ padding: 0; background: url(emergenze-intervento-img/img-template/1366/emergenze-avviso-headerbg1366.jpg) no-repeat; background-size: 100% auto;} #sidar-avviso-logocont{ width: 25%; margin: 28px 0 60px 38.2%;} /*Titolo*/ #sistemi-emergenza-titolo{ width: 100%; padding: 24px 0; background: #c7cfdd;} /*4 IMMAGINI CATASTROFI*/ figure.sidar-catastrofi-imgheader{ width: 25%;} /*********************************************************FOOTER*******************************************************************/ footer#emergenze-allerta-footer{ min-height: 740px; border-top: 6px solid #496297; background: url(emergenze-intervento-img/img-template/1366/sidar-footer-bg1366.jpg) no-repeat;} /*TITOLO E TESTO INTRO*/ article#sidar-contatti-footer{ width: 72%; margin: 80px 0 0 28%;} article#sidar-contatti-footer h2{ font-size: 10em;} article#sidar-contatti-footer p{ width: 100%; padding: 0; font-size: 1.6em;} /*TELEFONO*/ #sidar-telefono-footer{ width: 44%; margin: 30px 11% 0 42%;} #sidar-telefono-footer h3{ padding: 8px 5% 0 5%; border-top: none;} #sidar-telefono-footer a:link,#sidar-telefono-footer a:visited,#sidar-telefono-footer a:hover{ width: 70%; margin: 6px 15% 4px 15%; padding: 10px 0; font-size: 2.2em; background: rgba(220,220,220,0.5);} /*EMAIL*/ /*L'ALTEZZA ASSEGNATA REGOLA LA DISTANZA E QUINDI IL POSIZIONAMENTO IN FONDO DEL DIV SUCCESSIVO CHE CONTIENE LOGO E INDIRIZZO*/ #sidar-email-footer{ width: 44%; margin: 30px 11% 0 42%;} #sidar-email-footer h3{ padding: 8px 5% 0 5%; border-top: none;} #sidar-email-footer a:link,#sidar-email-footer a:visited,#sidar-email-footer a:hover{ width: 70%; margin: 6px 15% 4px 15%; background: rgba(220,220,220,0.5);} /*INDIRIZZO*/ #sidar-indirizzo-footer{ margin: 72px 0 0 0; padding: 24px 5%; background: rgba(49,77,146,0.1);} /*Logo SoundReflections*/ figure#soundreflections-logo{ width: 9%; margin: 14px 0 0 52.4%;} /*Indirizzo*/ #sidar-indirizzo-containerfooter{ width: 33%; margin: 0 0 0 3%;} #sidar-indirizzo-containerfooter p{ text-align: left; line-height: 1.2em;} /*BARRA COOKIES E WEBDESIGNER*/ #sidar-credits-footer{ padding: 40px 0; border-top: 6px solid #496297;} /*COOKIES E WEBMASTER*/ #cookies-footer,#webdesigner-footer{ width: 36%;} #cookies-footer{ float: left; margin: 0 0 0 10%;} #webdesigner-footer{ float: right; margin: 0 10% 0 0;} #cookies-footer a:link,#webdesigner-footer a:link,#cookies-footer a:visited,#webdesigner-footer a:visited,#cookies-footer a:hover,#webdesigner-footer a:hover{ width: auto; padding: 0; font-size: 1.5em; border: none; background: none;} #cookies-footer a:link,#cookies-footer a:visited,#cookies-footer a:hover{ text-align: left;} #webdesigner-footer a:link,#webdesigner-footer a:visited,#webdesigner-footer a:hover{ text-align: right;} #cookies-footer a:link,#cookies-footer a:visited,#cookies-footer a:hover{ float: left;} #webdesigner-footer a:link,#webdesigner-footer a:visited,#webdesigner-footer a:hover{ float: right;} /*PULSANTE TOP*/ #top{ width: 4%; right: 8%;} /******************************************************************** HOMEPAGE *****************************************************************************************/ /*TESTO INTRO*/ #sistema-avviso-intro{ background: #e9eaec;} header#sistema-avviso-headintro{ width: 60%; padding: 40px 20% 90px 20%; background: #fff;} header#sistema-avviso-headintro h2{ font-size: 4em; line-height: 1.2em;} /*INSERISCO VIDEO CHE RISIEDE DIRETTAMETE NELL'HOSTING*/ #sidar-video-contvideohome{ width: 50%; margin: -70px 25% 0 25%; border: 1px solid #dedfe1;} #sidar-video-playervideohome{ width: 94%; margin: 2% 3%; border: 2px solid #c0c1c2;} /*Player Youtube*/ /************************************************************************************************ PER ORA DISATTIVATO ED USATO IL CODICE SOPRA CHE INCORPORA IL VIDEO DIRETTAMENTE DALL'HOSTING #sidar-youtube-contvideohome{ width: 40%; margin: -70px 30% 0 30%;} #sidar-youtube-playervideohome{ width: 93.5%; height: 470px; margin: 2% 3%;} ************************************************************************************************/ #sistema-avviso-intro p{ width: 70%; margin: -70px 0 0 0; padding: 120px 15% 50px 15%; line-height: 1.5em; background: #fff;} /*SICUREZZA OPERATIVA*/ article#sicurezza-operativa-home{ min-height: 645px; max-height: 645px; padding: 0; background: #dbd8d1 url(emergenze-intervento-img/img-template/1366/sicurezza-operativa-bghome1366.jpg) no-repeat;} header#sicurezza-operativa-homehead{ width: 60%; margin: 90px 20% 0 20%;} header#sicurezza-operativa-homehead h2{ font-size: 8em;} article#sicurezza-operativa-home p{ width: 64%; margin: 2% 18% 0 18%; line-height: 1.4em;} /*MODULI AVVISO*/ section#moduli-avviso-home{ padding: 0 0 20px 0; background: #dadee5 url(emergenze-intervento-img/img-template/1366/moduli-avviso-homeheadbg1366.jpg) no-repeat;} header#moduli-avviso-headhome{ width: 46%; margin: 60px 27% 0 27%;} header#moduli-avviso-headhome h2{ font-size: 7em;} section#moduli-avviso-home p{ width: 76%; margin: 18px 12% 0 12%;} section#moduli-avviso-home p .modulicentrato{ float: left; width: 90%; margin: 8px 5% 0 5%; padding: 0; text-align: center;}/*centra riga di testo prima dell'elenco nelle risoluzioni desktop*/ /*ELENCO INTRO*/ section#moduli-avviso-home ul{ width: 58%; margin: 4px 0 0 42%;} /*STRUTTURA OGNI BOX DI OGNI MODULO DI AVVISO - ALTERNA A DESTRA E SINISTRA IMMAGINE/TESTI E CAMBIA COLORE DI SFONDO*/ .moduli-avviso-hometesto{ width: 40%; height: 520px; margin: 0;} .moduli-avvisohome-marginsx{ margin: 0 6% 0 6%;}/*classe che assegna margine sinistro al box sinistro quando accoppiati due a due (risoluzioni maggiori)*/ /*Contenitore Titolo e testo (per posizionare meglio rispetto all'immagine) - Anche questi sono 2 per posizionare alternando destra e sinistra*/ /*EMITTENTE RADIO-TV*/ div#emergenze-radiotv-home{ background: #696d78 url(emergenze-intervento-img/img-template/1366/emergenze-radiotv-bghome1366.jpg) no-repeat;} figure#emittente-titolografico-home{ width: 56%; height: 147px; margin: 50px 21% 0 21%; background: url(emergenze-intervento-img/img-template/1024/emittente-titolografico-home1024.png) no-repeat; background-size: contain;} /*Section (contiene titolo testo e tutto il box con 3 loghi rossi e suo testo)*/ section#emergenze-radiotv-testohome{ margin: 140px 0 0 0; background: #696d78 url(emergenze-intervento-img/img-template/1366/emergenze-radiotv-ondetesto1366.jpg) no-repeat center 16px; background-size: 100% auto;} header#emergenze-radiotv-homehead{ width: 90%; margin: 0 5%;} header#emergenze-radiotv-homehead h2{ font-size: 6.4em;} section#emergenze-radiotv-testohome p{ width: 70%; margin: 20px 15% 0 15%;} /*Sottotitolo Come Funziona*/ header#emittente-comefunziona-homehead{ margin: 30px 0 16px 0;} /*CONTENITORE E 3 TONDI ROSSI IMMAGINI ICONE*/ #emittente-home-contenitoretondirossi{ width: 79.2%; padding: 0 0 22px 20.8%;} figure.emittente-home-icone{ width: 10%; margin: -54px 7% 0 7%;} /*Testo Come Funziona*/ article#emittente-comefunziona-home{ float: left; width: 100%; margin: 0; padding: 0;} article#emittente-comefunziona-home p{ float: left; width: 80%; margin: -64px 0 0 0; padding: 0 10% 40px 10%; font-size: 1.7em; color: #656771; background: #eaeaea;} /*Testo finale ed i 3 loghi*/ #emergenze-radiotv-homefoot{ padding: 34px 0 40px 0;} #emergenze-radiotv-homefoot p{ width: 76%; padding: 0 12%;} /*3 LOGHI (Contenitore e figure)*/ #emittente-home-loghifoot{ width: 80%; margin: 26px 1% 0 19%;} figure.emittente-home-imgloghifoot{ width: 18%; margin: 0 1% 0 5%;} /*RASSEGNA STAMPA*/ article#sidar-notizie-home{ padding: 0 0 20px 0; background: #eff0f3 url(emergenze-intervento-img/img-template/1366/sidar-notizie-bghome1366.jpg) no-repeat;} header#sidar-notizie-homehead{ width: auto; padding: 30px 12%; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} header#sidar-notizie-homehead h2{ font-size: 6em; text-align: left;} /*BOX IMMAGINE ARTICOLO GIORNALE (2 figure diverse perchè a qualche risoluzioni cambiano leggermente dimensioni e posizionamenti)*/ figure.sidar-articolo-1home,figure.sidar-articolo-2home{ width: 40%; margin: 0 5% 60px 5%;} figure.sidar-articolo-1home figcaption,figure.sidar-articolo-2home figcaption{ width: 90%; margin: 10px 5% 0 5%; padding: 8px 0; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} figure.sidar-articolo-1home img,figure.sidar-articolo-2home img{ margin: 14px 0 0 0;} /*ASSISTENZA 24/7*/ article#sidar-assistenza-home{ height: 354px; padding: 0; background: #eff0f3 url(emergenze-intervento-img/img-template/1366/sidar-assistenza-bghome1366.jpg) no-repeat;} header#sidar-assistenza-homehead{ width: 68%; margin: 100px 0 0 32%; padding: 0; background: none;} header#sidar-assistenza-homehead h2{ font-size: 5em; text-align: left;} article#sidar-assistenza-home p{ width: 54%; margin: 20px 0 0 32%;} } /*=======================================================================================================================================================*/ /*==================== RISOLUZIONE 1440PX =====================*/ /*=======================================================================================================================================================*/ @media screen and (min-width: 1367px) and (max-width: 1440px) { h1{ font-size: 4em; line-height: 1.2em;} /********************************************************************* HEADER *********************************************************************************************/ /*Logo*/ #sidar-avviso-logocontgenerale{ padding: 0; background: url(emergenze-intervento-img/img-template/1440/emergenze-avviso-headerbg1440.jpg) no-repeat; background-size: 100% auto;} #sidar-avviso-logocont{ width: 22%; margin: 30px 0 60px 39.6%;} /*Titolo*/ #sistemi-emergenza-titolo{ width: 100%; padding: 24px 0; background: #c7cfdd;} /*4 IMMAGINI CATASTROFI*/ figure.sidar-catastrofi-imgheader{ width: 25%;} /*********************************************************FOOTER*******************************************************************/ footer#emergenze-allerta-footer{ min-height: 740px; border-top: 6px solid #496297; background: url(emergenze-intervento-img/img-template/1440/sidar-footer-bg1440.jpg) no-repeat;} /*TITOLO E TESTO INTRO*/ article#sidar-contatti-footer{ width: 72%; margin: 80px 0 0 28%;} article#sidar-contatti-footer h2{ font-size: 10em;} article#sidar-contatti-footer p{ width: 100%; padding: 0; font-size: 1.6em;} /*TELEFONO*/ #sidar-telefono-footer{ width: 40%; margin: 30px 11% 0 44%;} #sidar-telefono-footer h3{ padding: 8px 5% 0 5%; border-top: none;} #sidar-telefono-footer a:link,#sidar-telefono-footer a:visited,#sidar-telefono-footer a:hover{ width: 70%; margin: 6px 15% 4px 15%; padding: 10px 0; font-size: 2.2em; background: rgba(220,220,220,0.5);} /*EMAIL*/ /*L'ALTEZZA ASSEGNATA REGOLA LA DISTANZA E QUINDI IL POSIZIONAMENTO IN FONDO DEL DIV SUCCESSIVO CHE CONTIENE LOGO E INDIRIZZO*/ #sidar-email-footer{ width: 40%; margin: 30px 11% 0 44%;} #sidar-email-footer h3{ padding: 8px 5% 0 5%; border-top: none;} #sidar-email-footer a:link,#sidar-email-footer a:visited,#sidar-email-footer a:hover{ width: 70%; margin: 6px 15% 4px 15%; background: rgba(220,220,220,0.5);} /*INDIRIZZO*/ #sidar-indirizzo-footer{ margin: 72px 0 0 0; padding: 24px 5%; background: rgba(49,77,146,0.1);} /*Logo SoundReflections*/ figure#soundreflections-logo{ width: 9%; margin: 14px 0 0 53.4%;} /*Indirizzo*/ #sidar-indirizzo-containerfooter{ width: 32%; margin: 0 0 0 3%;} #sidar-indirizzo-containerfooter p{ text-align: left; line-height: 1.2em;} /*BARRA COOKIES E WEBDESIGNER*/ #sidar-credits-footer{ padding: 40px 0; border-top: 6px solid #496297;} /*COOKIES E WEBMASTER*/ #cookies-footer,#webdesigner-footer{ width: 36%;} #cookies-footer{ float: left; margin: 0 0 0 10%;} #webdesigner-footer{ float: right; margin: 0 10% 0 0;} #cookies-footer a:link,#webdesigner-footer a:link,#cookies-footer a:visited,#webdesigner-footer a:visited,#cookies-footer a:hover,#webdesigner-footer a:hover{ width: auto; padding: 0; font-size: 1.5em; border: none; background: none;} #cookies-footer a:link,#cookies-footer a:visited,#cookies-footer a:hover{ text-align: left;} #webdesigner-footer a:link,#webdesigner-footer a:visited,#webdesigner-footer a:hover{ text-align: right;} #cookies-footer a:link,#cookies-footer a:visited,#cookies-footer a:hover{ float: left;} #webdesigner-footer a:link,#webdesigner-footer a:visited,#webdesigner-footer a:hover{ float: right;} /*PULSANTE TOP*/ #top{ width: 4%; right: 8%;} /******************************************************************** HOMEPAGE *****************************************************************************************/ /*TESTO INTRO*/ #sistema-avviso-intro{ background: #e9eaec;} header#sistema-avviso-headintro{ width: 60%; padding: 40px 20% 90px 20%; background: #fff;} header#sistema-avviso-headintro h2{ font-size: 4em; line-height: 1.2em;} /*INSERISCO VIDEO CHE RISIEDE DIRETTAMETE NELL'HOSTING*/ #sidar-video-contvideohome{ width: 50%; margin: -70px 25% 0 25%; border: 1px solid #dedfe1;} #sidar-video-playervideohome{ width: 94%; margin: 2% 3%; border: 2px solid #c0c1c2;} /*Player Youtube*/ /************************************************************************************************ PER ORA DISATTIVATO ED USATO IL CODICE SOPRA CHE INCORPORA IL VIDEO DIRETTAMENTE DALL'HOSTING #sidar-youtube-contvideohome{ width: 40%; margin: -70px 30% 0 30%;} #sidar-youtube-playervideohome{ width: 93.5%; height: 470px; margin: 2% 3%;} ************************************************************************************************/ #sistema-avviso-intro p{ width: 70%; margin: -70px 0 0 0; padding: 120px 15% 50px 15%; line-height: 1.5em; background: #fff;} /*SICUREZZA OPERATIVA*/ article#sicurezza-operativa-home{ min-height: 645px; max-height: 645px; padding: 0; background: #dbd8d1 url(emergenze-intervento-img/img-template/1440/sicurezza-operativa-bghome1440.jpg) no-repeat;} header#sicurezza-operativa-homehead{ width: 50%; margin: 92px 25% 0 25%;} header#sicurezza-operativa-homehead h2{ font-size: 8em;} article#sicurezza-operativa-home p{ width: 58%; margin: 1% 21% 0 21%; line-height: 1.4em;} /*MODULI AVVISO*/ section#moduli-avviso-home{ padding: 0 0 20px 0; background: #dadee5 url(emergenze-intervento-img/img-template/1440/moduli-avviso-homeheadbg1440.jpg) no-repeat;} header#moduli-avviso-headhome{ width: 40%; margin: 60px 30% 0 30%;} header#moduli-avviso-headhome h2{ font-size: 7em;} section#moduli-avviso-home p{ width: 76%; margin: 18px 12% 0 12%;} section#moduli-avviso-home p .modulicentrato{ float: left; width: 90%; margin: 8px 5% 0 5%; padding: 0; text-align: center;}/*centra riga di testo prima dell'elenco nelle risoluzioni desktop*/ /*ELENCO INTRO*/ section#moduli-avviso-home ul{ width: 58%; margin: 4px 0 0 42%;} /*STRUTTURA OGNI BOX DI OGNI MODULO DI AVVISO - ALTERNA A DESTRA E SINISTRA IMMAGINE/TESTI E CAMBIA COLORE DI SFONDO*/ .moduli-avviso-hometesto{ width: 40%; height: 520px; margin: 0;} .moduli-avvisohome-marginsx{ margin: 0 6% 0 6%;}/*classe che assegna margine sinistro al box sinistro quando accoppiati due a due (risoluzioni maggiori)*/ /*Contenitore Titolo e testo (per posizionare meglio rispetto all'immagine) - Anche questi sono 2 per posizionare alternando destra e sinistra*/ /*EMITTENTE RADIO-TV*/ div#emergenze-radiotv-home{ background: #696d78 url(emergenze-intervento-img/img-template/1440/emergenze-radiotv-bghome1440.jpg) no-repeat;} figure#emittente-titolografico-home{ width: 45%; height: 163px; margin: 50px 21% 0 21.3%; background: url(emergenze-intervento-img/img-template/1440/emittente-titolografico-home1440.png) no-repeat; background-size: contain;} /*Section (contiene titolo testo e tutto il box con 3 loghi rossi e suo testo)*/ section#emergenze-radiotv-testohome{ margin: 140px 0 0 0; background: #696d78 url(emergenze-intervento-img/img-template/1440/emergenze-radiotv-ondetesto1440.jpg) no-repeat center 16px; background-size: 100% auto;} header#emergenze-radiotv-homehead{ width: 90%; margin: 0 5%;} header#emergenze-radiotv-homehead h2{ font-size: 6.4em;} section#emergenze-radiotv-testohome p{ width: 70%; margin: 20px 15% 0 15%;} /*Sottotitolo Come Funziona*/ header#emittente-comefunziona-homehead{ margin: 30px 0 16px 0;} /*CONTENITORE E 3 TONDI ROSSI IMMAGINI ICONE*/ #emittente-home-contenitoretondirossi{ width: 75.8%; padding: 0 0 22px 24.2%;} figure.emittente-home-icone{ width: 8%; margin: -46px 7% 0 7%;} /*Testo Come Funziona*/ article#emittente-comefunziona-home{ float: left; width: 100%; margin: 0; padding: 0;} article#emittente-comefunziona-home p{ float: left; width: 80%; margin: -64px 0 0 0; padding: 0 10% 40px 10%; font-size: 1.7em; color: #656771; background: #eaeaea;} /*Testo finale ed i 3 loghi*/ #emergenze-radiotv-homefoot{ padding: 34px 0 40px 0;} #emergenze-radiotv-homefoot p{ width: 76%; padding: 0 12%;} /*3 LOGHI (Contenitore e figure)*/ #emittente-home-loghifoot{ width: 80%; margin: 26px 1% 0 19%;} figure.emittente-home-imgloghifoot{ width: 18%; margin: 0 1% 0 5%;} /*RASSEGNA STAMPA*/ article#sidar-notizie-home{ padding: 0 0 20px 0; background: #eff0f3 url(emergenze-intervento-img/img-template/1440/sidar-notizie-bghome1440.jpg) no-repeat;} header#sidar-notizie-homehead{ width: auto; padding: 30px 6% 30px 12%; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} header#sidar-notizie-homehead h2{ font-size: 6em; text-align: left;} /*BOX IMMAGINE ARTICOLO GIORNALE (2 figure diverse perchè a qualche risoluzioni cambiano leggermente dimensioni e posizionamenti)*/ figure.sidar-articolo-1home,figure.sidar-articolo-2home{ width: 40%; margin: 0 5% 60px 5%;} figure.sidar-articolo-1home figcaption,figure.sidar-articolo-2home figcaption{ width: 82%; margin: 10px 9% 0 9%; padding: 8px 0; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} figure.sidar-articolo-1home img,figure.sidar-articolo-2home img{ margin: 14px 0 0 0;} /*ASSISTENZA 24/7*/ article#sidar-assistenza-home{ height: 354px; padding: 0; background: #eff0f3 url(emergenze-intervento-img/img-template/1440/sidar-assistenza-bghome1440.jpg) no-repeat;} header#sidar-assistenza-homehead{ width: 64%; margin: 100px 0 0 36%; padding: 0; background: none;} header#sidar-assistenza-homehead h2{ font-size: 5em; text-align: left;} article#sidar-assistenza-home p{ width: 50%; margin: 20px 0 0 36%;} } /*=======================================================================================================================================================*/ /*==================== RISOLUZIONE 1600PX =====================*/ /*=======================================================================================================================================================*/ @media screen and (min-width: 1441px) and (max-width: 1600px) { h1{ font-size: 4em; line-height: 1.3em;} h2{ font-size: 8em;} /********************************************************************* HEADER *********************************************************************************************/ /*Logo*/ #sidar-avviso-logocontgenerale{ padding: 0 0 54px 0; background: url(emergenze-intervento-img/img-template/1600/emergenze-avviso-headerbg1600.jpg) no-repeat; background-size: 100% auto;} #sidar-avviso-logocont{ width: 24%; margin: 32px 0 50px 38.8%;} /*Titolo*/ #sistemi-emergenza-titolo{ width: 100%; padding: 40px 0; background: #c7cfdd;} /*4 IMMAGINI CATASTROFI*/ figure.sidar-catastrofi-imgheader{ width: 25%;} figure.sidar-catastrofi-imgheader figcaption{ top: 47%; font-size: 2.5em;} /*********************************************************FOOTER*******************************************************************/ footer#emergenze-allerta-footer{ min-height: 740px; border-top: 6px solid #496297; background: url(emergenze-intervento-img/img-template/1600/sidar-footer-bg1600.jpg) no-repeat;} /*TITOLO E TESTO INTRO*/ article#sidar-contatti-footer{ width: 72%; margin: 80px 0 0 28%;} article#sidar-contatti-footer h2{ font-size: 10em;} article#sidar-contatti-footer p{ width: 100%; padding: 0; font-size: 1.6em;} /*TELEFONO*/ #sidar-telefono-footer{ width: 40%; margin: 40px 11% 0 44%;} #sidar-telefono-footer h3{ padding: 8px 5% 0 5%; border-top: none;} #sidar-telefono-footer a:link,#sidar-telefono-footer a:visited,#sidar-telefono-footer a:hover{ width: 70%; margin: 0 15% 4px 15%; padding: 6px 0; font-size: 3em; border: none; background: none;} /*EMAIL*/ /*L'ALTEZZA ASSEGNATA REGOLA LA DISTANZA E QUINDI IL POSIZIONAMENTO IN FONDO DEL DIV SUCCESSIVO CHE CONTIENE LOGO E INDIRIZZO*/ #sidar-email-footer{ width: 40%; margin: 30px 11% 0 44%;} #sidar-email-footer h3{ padding: 8px 5% 0 5%; border-top: none;} #sidar-email-footer a:link,#sidar-email-footer a:visited,#sidar-email-footer a:hover{ width: 70%; margin: 0 15% 4px 15%; padding: 6px 0; font-size: 3em; border: none; background: none;} /*INDIRIZZO*/ #sidar-indirizzo-footer{ margin: 72px 0 0 0; padding: 24px 5%; background: rgba(49,77,146,0.1);} /*Logo SoundReflections*/ figure#soundreflections-logo{ width: 8%; margin: 14px 0 0 55.4%;} /*Indirizzo*/ #sidar-indirizzo-containerfooter{ width: 31%; margin: 0 0 0 3%;} #sidar-indirizzo-containerfooter p{ text-align: left; line-height: 1.2em;} /*BARRA COOKIES E WEBDESIGNER*/ #sidar-credits-footer{ padding: 40px 0; border-top: 6px solid #496297;} /*COOKIES E WEBMASTER*/ #cookies-footer,#webdesigner-footer{ width: 36%;} #cookies-footer{ float: left; margin: 0 0 0 10%;} #webdesigner-footer{ float: right; margin: 0 10% 0 0;} #cookies-footer a:link,#webdesigner-footer a:link,#cookies-footer a:visited,#webdesigner-footer a:visited,#cookies-footer a:hover,#webdesigner-footer a:hover{ width: auto; padding: 0; font-size: 1.5em; border: none; background: none;} #cookies-footer a:link,#cookies-footer a:visited,#cookies-footer a:hover{ text-align: left;} #webdesigner-footer a:link,#webdesigner-footer a:visited,#webdesigner-footer a:hover{ text-align: right;} #cookies-footer a:link,#cookies-footer a:visited,#cookies-footer a:hover{ float: left;} #webdesigner-footer a:link,#webdesigner-footer a:visited,#webdesigner-footer a:hover{ float: right;} /*PULSANTE TOP*/ #top{ width: 4%; right: 8%;} /******************************************************************** HOMEPAGE *****************************************************************************************/ /*TESTO INTRO*/ #sistema-avviso-intro{ background: #e9eaec;} header#sistema-avviso-headintro{ width: 78%; padding: 80px 11% 110px 11%; background: #fff;} header#sistema-avviso-headintro h2{ font-size: 6em; line-height: 1.2em;} /*INSERISCO VIDEO CHE RISIEDE DIRETTAMETE NELL'HOSTING*/ #sidar-video-contvideohome{ width: 46%; margin: -70px 27% 0 27%; border: 1px solid #dedfe1;} #sidar-video-playervideohome{ width: 94%; margin: 2% 3%; border: 2px solid #c0c1c2;} #sistema-avviso-intro p{ width: 64%; margin: -70px 0 0 0; padding: 120px 18% 50px 18%; line-height: 1.5em; background: #fff;} /*SICUREZZA OPERATIVA*/ article#sicurezza-operativa-home{ min-height: 722px; padding: 0; background: url(emergenze-intervento-img/img-template/1600/sicurezza-operativa-bghome1600.jpg) no-repeat;} header#sicurezza-operativa-homehead{ width: 50%; margin: 160px 8% 0 32%;} header#sicurezza-operativa-homehead h2{ font-size: 7em; text-align: left;} article#sicurezza-operativa-home p{ width: 44%; margin: 1% 9% 0 32%; line-height: 1.55em;} /*MODULI AVVISO*/ section#moduli-avviso-home{ padding: 0 0 30px 0; background: #dadee5;} header#moduli-avviso-headhome{ width: 100%; margin: 40px 0 0 0;} header#moduli-avviso-headhome h2{ font-size: 10em;} section#moduli-avviso-home p{ width: 60%; margin: 16px 20% 0 20%;} section#moduli-avviso-home p .modulicentrato{ float: left; width: 90%; margin: 8px 5% 0 5%; padding: 0; text-align: center;}/*centra riga di testo prima dell'elenco nelle risoluzioni desktop*/ /*ELENCO INTRO*/ section#moduli-avviso-home ul{ width: 58%; margin: 12px 0 0 42%; padding: 0 0 40px 0;} section#moduli-avviso-home ul li{ margin: 18px 0; font-size: 2.2em;} /*STRUTTURA OGNI BOX DI OGNI MODULO DI AVVISO - ALTERNA A DESTRA E SINISTRA IMMAGINE/TESTI E CAMBIA COLORE DI SFONDO*/ .moduli-avviso-hometesto{ width: 33%; height: 580px; margin: 0; padding: 0;} .moduli-avvisohome-marginsx{ margin: 0 8% 0 12%;}/*classe che assegna margine sinistro al box sinistro quando accoppiati due a due (risoluzioni maggiori)*/ /*Contenitore Titolo e testo (per posizionare meglio rispetto all'immagine) - Anche questi sono 2 per posizionare alternando destra e sinistra*/ article.moduli-avviso-homecontainertitolotesto{ width: 90%; margin: 10px 5% 0 5%;} .moduli-avviso-homecontainertitolotesto h3{ font-size: 3.4em;} section#moduli-avviso-home article.moduli-avviso-homecontainertitolotesto p{ margin: 10px 0 0 0; font-size: 2em;} /*EMITTENTE RADIO-TV*/ div#emergenze-radiotv-home{ background: #696d78 url(emergenze-intervento-img/img-template/1600/emergenze-radiotv-bghome1600.jpg) no-repeat;} figure#emittente-titolografico-home{ width: 51%; height: 207px; margin: 72px 4% 0 26%; background: url(emergenze-intervento-img/img-template/1600/emittente-titolografico-home1600.png) no-repeat; background-size: contain;} /*Section (contiene titolo e testo e tutto il box con 3 loghi rossi e suo testo)*/ section#emergenze-radiotv-testohome{ margin: 120px 0 0 0; padding: 40px 0 0 0; line-height: 1.4em; color: #e5e8f1; background: #696d78 url(emergenze-intervento-img/img-template/1600/emergenze-radiotv-ondetesto1600.jpg) no-repeat center 20px; background-size: 100% auto;} header#emergenze-radiotv-homehead{ width: 100%; margin: 0;} header#emergenze-radiotv-homehead h2{ font-size: 9em;} section#emergenze-radiotv-testohome p{ width: 70%; margin: 20px 15% 0 15%; line-height: 1.4em;} /*Sottotitolo Come Funziona*/ header#emittente-comefunziona-homehead{ margin: 40px 0 0 0;} /*CONTENITORE E 3 TONDI ROSSI IMMAGINI ICONE*/ #emittente-home-contenitoretondirossi{ width: 82%; margin: 80px 0 0 0; padding: 0 0 22px 18%;} figure.emittente-home-icone{ width: 7.6%; margin: -56px 9% 0 9%;} /*Testo Come Funziona*/ article#emittente-comefunziona-home p{ width: 64%; margin: -56px 0 0 0; padding: 0 18% 70px 18%;} /*Testo finale ed i 3 loghi*/ #emergenze-radiotv-homefoot{ margin: 0; padding: 0 0 90px 0; background: url(emergenze-intervento-img/img-template/1600/emergenze-radiotv-bgfooterhome1600.jpg) no-repeat; background-size: 100% 100%;} #emergenze-radiotv-mezzotondofoot{ float: left; width: 100%; height: 14px; margin: 0; padding: 0; background: url(emergenze-intervento-img/img-template/mezzotondo-rosso.png) no-repeat 50% 0;} #emergenze-radiotv-homefoot p{ width: 80%; padding: 14px 10%; text-align: center;} /*3 LOGHI (Contenitore e figure)*/ #emittente-home-loghifoot{ width: 75%; margin: 0 0 0 25%;} figure.emittente-home-imgloghifoot{ width: 18%; margin: 0 5% 0 0;} /*RASSEGNA STAMPA*/ article#sidar-notizie-home{ padding: 0 0 60px 0; background: #eff0f3 url(emergenze-intervento-img/img-template/1920/sidar-notizie-bghome1920.jpg) no-repeat;} header#sidar-notizie-homehead{ width: auto; margin: 110px 0 0 0; padding: 20px 5% 20px 20%; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} header#sidar-notizie-homehead h2{ font-size: 10em;} article#sidar-notizie-home p{ width: 60%; margin: 60px 20%; line-height: 1.6em;} /*BOX IMMAGINE ARTICOLO GIORNALE (2 figure diverse perchè a qualche risoluzioni cambiano leggermente dimensioni e posizionamenti)*/ figure.sidar-articolo-1home,figure.sidar-articolo-2home{ width: 36%;} figure.sidar-articolo-1home{ margin: 0 0 0 8%;} figure.sidar-articolo-2home{ margin: 0 0 0 10%;} figure.sidar-articolo-1home figcaption,figure.sidar-articolo-2home figcaption{ width: 90%; margin: 0 3%; padding: 12px 2%; font-size: 2.2em; line-height: 1em; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} figure.sidar-articolo-1home img,figure.sidar-articolo-2home img{ margin: 20px 0 0 0;} /*ASSISTENZA 24/7*/ article#sidar-assistenza-home{ height: 354px; padding: 0; background: #eff0f3 url(emergenze-intervento-img/img-template/1600/sidar-assistenza-bghome1600.jpg) no-repeat;} header#sidar-assistenza-homehead{ width: 64%; margin: 100px 0 0 36%; padding: 0; background: none;} header#sidar-assistenza-homehead h2{ font-size: 5em; text-align: left;} article#sidar-assistenza-home p{ width: 50%; margin: 20px 0 0 36%;} } /*=======================================================================================================================================================*/ /*==================== RISOLUZIONE 1920PX =====================*/ /*=======================================================================================================================================================*/ @media screen and (min-width: 1601px) { h1{ font-size: 4em; line-height: 1.3em;} h2{ font-size: 8em;} /********************************************************************* HEADER *********************************************************************************************/ /*Logo*/ #sidar-avviso-logocontgenerale{ padding: 0 0 54px 0; background: url(emergenze-intervento-img/img-template/1920/emergenze-avviso-headerbg1920.jpg) no-repeat; background-size: 100% auto;} #sidar-avviso-logocont{ width: 20%; margin: 46px 0 50px 40.6%;} /*Titolo*/ #sistemi-emergenza-titolo{ width: 100%; padding: 40px 0; background: #c7cfdd;} /*4 IMMAGINI CATASTROFI*/ figure.sidar-catastrofi-imgheader{ width: 25%;} figure.sidar-catastrofi-imgheader figcaption{ top: 47%; font-size: 2.5em;} /*********************************************************FOOTER*******************************************************************/ footer#emergenze-allerta-footer{ min-height: 748px; border-top: 6px solid #496297; background: url(emergenze-intervento-img/img-template/1920/sidar-footer-bg1920.jpg) no-repeat;} /*TITOLO E TESTO INTRO*/ article#sidar-contatti-footer{ width: 44%; margin: 110px 7% 0 47%;} article#sidar-contatti-footer h2{ font-size: 13em; text-align: left;} article#sidar-contatti-footer p{ width: 80%; padding: 0 0 0 20%; font-size: 1.6em; text-align: left;} /*TELEFONO*/ #sidar-telefono-footer{ width: 20%; margin: 60px 0 0 42%;} #sidar-telefono-footer h3{ width: 100%; margin: 0; padding: 0; font-size: 2.2em; border-top: none;} #sidar-telefono-footer a:link,#sidar-telefono-footer a:visited,#sidar-telefono-footer a:hover{ width: 100%; margin: 12px 0 0 0; padding: 0; font-size: 3.5em; border: none; background: none;} /*EMAIL*/ /*L'ALTEZZA ASSEGNATA REGOLA LA DISTANZA E QUINDI IL POSIZIONAMENTO IN FONDO DEL DIV SUCCESSIVO CHE CONTIENE LOGO E INDIRIZZO*/ #sidar-email-footer{ width: auto; height: 220px; margin: 60px 0 0 2%;} #sidar-email-footer h3{ width: 100%; margin: 0; padding: 0; font-size: 2.2em; border-top: none;} #sidar-email-footer a:link,#sidar-email-footer a:visited,#sidar-email-footer a:hover{ width: 100%; margin: 12px 0 0 0; padding: 0; font-size: 3.5em; border: none; background: none;} /*INDIRIZZO*/ #sidar-indirizzo-footer{ width: 43%; height: 142px; margin: 0; padding: 44px 10% 20px 47%; background: rgba(49,77,146,0.1);} /*Logo SoundReflections*/ figure#soundreflections-logo{ width: 15%; margin: 20px 0 0 0;} /*Indirizzo*/ #sidar-indirizzo-containerfooter{ width: 50%; margin: 0 0 0 5%;} #sidar-indirizzo-containerfooter p{ font-size: 1.9em; text-align: left;} /*BARRA COOKIES E WEBDESIGNER*/ #sidar-credits-footer{ padding: 40px 0; border-top: 6px solid #496297;} /*COOKIES E WEBMASTER*/ #cookies-footer,#webdesigner-footer{ width: 36%;} #cookies-footer{ float: left; margin: 0 0 0 10%;} #webdesigner-footer{ float: right; margin: 0 10% 0 0;} #cookies-footer a:link,#webdesigner-footer a:link,#cookies-footer a:visited,#webdesigner-footer a:visited,#cookies-footer a:hover,#webdesigner-footer a:hover{ width: auto; padding: 0; font-size: 1.6em; border: none; background: none;} #cookies-footer a:link,#cookies-footer a:visited,#cookies-footer a:hover{ text-align: left;} #webdesigner-footer a:link,#webdesigner-footer a:visited,#webdesigner-footer a:hover{ text-align: right;} #cookies-footer a:link,#cookies-footer a:visited,#cookies-footer a:hover{ float: left;} #webdesigner-footer a:link,#webdesigner-footer a:visited,#webdesigner-footer a:hover{ float: right;} /*PULSANTE TOP*/ #top{ width: 3%; right: 6%;} /***************************************************COOKIES POLICY*************************************************************************/ /*BARRA SFONDO BANNER*/ section#cookie{ padding: 10px 10%;} /*PULSANTI "QUESTO LINK" E "CHIUDI" (impostazioni generali valide per entrambi) */ section#cookie>a{ padding: 4px 1%;} /*********** PAGINA CON TESTO COOKIES POLICY **********************/ /*HEADER (alternativo a quello del sito)*/ header#cookies-policy-header{ padding: 28px 0;} /*Logo Studio Mobile*/ figure#cookies-policy-headerlogo{ width: 100%; margin: 0;} figure#cookies-policy-headerlogo img{ width: 70%; margin: 0 0 0 40%;} /* Pulsante "Vai al Sito"*/ #cookies-policy-vaisito{ left: 14%; width: 10%; top: 50%; left: 30%;} #cookies-policy-vaisito a:link,#cookies-policy-vaisito a:visited,#cookies-policy-vaisito a:hover{ width: 58%; padding: 26px 20%; font-size: 2em;} /******************************************************************** HOMEPAGE *****************************************************************************************/ /*TESTO INTRO*/ #sistema-avviso-intro{ background: #e9eaec;} header#sistema-avviso-headintro{ width: 70%; padding: 80px 15% 110px 15%; background: #fff;} header#sistema-avviso-headintro h2{ font-size: 6em; line-height: 1.2em;} /*INSERISCO VIDEO CHE RISIEDE DIRETTAMETE NELL'HOSTING*/ #sidar-video-contvideohome{ width: 46%; margin: -70px 27% 0 27%; border: 1px solid #dedfe1;} #sidar-video-playervideohome{ width: 94%; margin: 2% 3%; border: 2px solid #c0c1c2;} /*Player Youtube*/ /************************************************************************************************ PER ORA DISATTIVATO ED USATO IL CODICE SOPRA CHE INCORPORA IL VIDEO DIRETTAMENTE DALL'HOSTING #sidar-youtube-contvideohome{ width: 40%; margin: -70px 30% 0 30%;} #sidar-youtube-playervideohome{ width: 93.5%; height: 470px; margin: 2% 3%;} ************************************************************************************************/ #sistema-avviso-intro p{ width: 56%; margin: -70px 0 0 0; padding: 120px 22% 70px 22%; line-height: 1.5em; background: #fff;} /*SICUREZZA OPERATIVA*/ article#sicurezza-operativa-home{ min-height: 722px; padding: 0; background: url(emergenze-intervento-img/img-template/1920/sicurezza-operativa-bghome1920.jpg) no-repeat;} header#sicurezza-operativa-homehead{ width: 50%; margin: 170px 8% 0 42%;} header#sicurezza-operativa-homehead h2{ font-size: 7em; text-align: left;} article#sicurezza-operativa-home p{ width: 44%; margin: 1% 9% 0 42%; line-height: 1.55em;} /*MODULI AVVISO*/ section#moduli-avviso-home{ padding: 0 0 30px 0; background: #dadee5;} header#moduli-avviso-headhome{ width: 100%; margin: 40px 0 0 0;} header#moduli-avviso-headhome h2{ font-size: 10em;} section#moduli-avviso-home p{ width: 60%; margin: 16px 20% 0 20%;} section#moduli-avviso-home p .modulicentrato{ float: left; width: 90%; margin: 8px 5% 0 5%; padding: 0; text-align: center;}/*centra riga di testo prima dell'elenco nelle risoluzioni desktop*/ /*ELENCO INTRO*/ section#moduli-avviso-home ul{ width: 56%; margin: 12px 0 0 44%; padding: 0 0 40px 0;} section#moduli-avviso-home ul li{ margin: 18px 0; font-size: 2.2em;} /*STRUTTURA OGNI BOX DI OGNI MODULO DI AVVISO - ALTERNA A DESTRA E SINISTRA IMMAGINE/TESTI E CAMBIA COLORE DI SFONDO*/ .moduli-avviso-hometesto{ width: 30%; height: 580px; margin: 0;} .moduli-avvisohome-marginsx{ margin: 0 6% 0 16.8%;}/*classe che assegna margine sinistro al box sinistro quando accoppiati due a due (risoluzioni maggiori)*/ /*Contenitore Titolo e testo (per posizionare meglio rispetto all'immagine) - Anche questi sono 2 per posizionare alternando destra e sinistra*/ article.moduli-avviso-homecontainertitolotesto{ width: 90%; margin: 10px 5% 0 5%;} .moduli-avviso-homecontainertitolotesto h3{ font-size: 3.4em;} section#moduli-avviso-home article.moduli-avviso-homecontainertitolotesto p{ margin: 10px 0 0 0; font-size: 2em;} /*EMITTENTE RADIO-TV*/ div#emergenze-radiotv-home{ background: #696d78 url(emergenze-intervento-img/img-template/1920/emergenze-radiotv-bghome1920.jpg) no-repeat;} figure#emittente-titolografico-home{ width: 45%; height: 200px; margin: 90px 4% 0 25.3%; background: url(emergenze-intervento-img/img-template/1920/emittente-titolografico-home1920.png) no-repeat; background-size: contain;} /*Section (contiene titolo e testo e tutto il box con 3 loghi rossi e suo testo)*/ section#emergenze-radiotv-testohome{ margin: 120px 0 0 0; padding: 40px 0 0 0; line-height: 1.4em; color: #e5e8f1; background: #696d78 url(emergenze-intervento-img/img-template/1920/emergenze-radiotv-ondetesto1920.jpg) no-repeat center; background-size: 100% auto;} header#emergenze-radiotv-homehead{ width: 100%; margin: 0;} header#emergenze-radiotv-homehead h2{ font-size: 9em;} section#emergenze-radiotv-testohome p{ width: 70%; margin: 20px 15% 0 15%; line-height: 1.4em;} /*Sottotitolo Come Funziona*/ header#emittente-comefunziona-homehead{ margin: 40px 0 0 0;} /*CONTENITORE E 3 TONDI ROSSI IMMAGINI ICONE*/ #emittente-home-contenitoretondirossi{ width: 82%; margin: 80px 0 0 0; padding: 0 0 22px 18%;} figure.emittente-home-icone{ width: 7.6%; margin: -56px 9% 0 9%;} /*Testo Come Funziona*/ article#emittente-comefunziona-home p{ width: 64%; margin: -56px 0 0 0; padding: 0 18% 70px 18%;} /*Testo finale ed i 3 loghi*/ #emergenze-radiotv-homefoot{ margin: 0; padding: 0 0 90px 0; background: url(emergenze-intervento-img/img-template/1920/emergenze-radiotv-bgfooterhome1920.jpg) no-repeat; background-size: 100% 100%;} #emergenze-radiotv-mezzotondofoot{ float: left; width: 100%; height: 14px; margin: 0; padding: 0; background: url(emergenze-intervento-img/img-template/mezzotondo-rosso.png) no-repeat 50% 0;} #emergenze-radiotv-homefoot p{ width: 80%; padding: 14px 10%; text-align: center;} /*3 LOGHI (Contenitore e figure)*/ #emittente-home-loghifoot{ width: 72%; margin: 0 0 0 28%;} figure.emittente-home-imgloghifoot{ width: 16%; margin: 0 6% 0 0;} /*RASSEGNA STAMPA*/ article#sidar-notizie-home{ padding: 0 0 60px 0; background: #eff0f3 url(emergenze-intervento-img/img-template/1920/sidar-notizie-bghome1920.jpg) no-repeat;} header#sidar-notizie-homehead{ width: auto; margin: 110px 0 0 0; padding: 20px 5% 20px 20%; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} header#sidar-notizie-homehead h2{ font-size: 10em;} article#sidar-notizie-home p{ width: 60%; margin: 60px 20%; line-height: 1.6em;} /*BOX IMMAGINE ARTICOLO GIORNALE (2 figure diverse perchè a qualche risoluzioni cambiano leggermente dimensioni e posizionamenti)*/ figure.sidar-articolo-1home,figure.sidar-articolo-2home{ width: 30%;} figure.sidar-articolo-1home{ margin: 0 0 0 16%;} figure.sidar-articolo-2home{ margin: 0 0 0 10%;} figure.sidar-articolo-1home figcaption,figure.sidar-articolo-2home figcaption{ width: 90%; margin: 0 3%; padding: 12px 2%; font-size: 2.2em; line-height: 1em; background: #cfc3b5 url(emergenze-intervento-img/img-template/carta-antica.jpg) no-repeat; background-size: 100% 100%;} figure.sidar-articolo-1home img,figure.sidar-articolo-2home img{ margin: 20px 0 0 0;} /*ASSISTENZA 24/7*/ article#sidar-assistenza-home{ height: 470px; padding: 0; background: #eff0f3 url(emergenze-intervento-img/img-template/1920/sidar-assistenza-bghome1920.jpg) no-repeat;} header#sidar-assistenza-homehead{ width: 68%; margin: 134px 0 0 32%; padding: 0; background: none;} header#sidar-assistenza-homehead h2{ font-size: 7em; text-align: left;} article#sidar-assistenza-home p{ width: 46%; margin: 20px 0 0 32%; font-size: 1.9em; line-height: 1.5em;} }