/* Theme Name: SYNLAB MANIFATTURE FIRENZE Theme URI: Author: IHAD S.r.l. Author URI: https://www.ihad.it/ Description: Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: Text Domain: https://synlabmanifatturafirenze.it */ /* 1.0 RESET ============= */ html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} address { font-style: normal;} body { line-height:1; font-family: "Helvetica" } article,aside,details, figcaption,figure,footer, header,hgroup,menu,nav,section { display:block;} nav ul { list-style:none;} blockquote, q { quotes:none;} blockquote:before, blockquote:after,q:before, q:after { content:''; content:none;} a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration:none; color: inherit; text-rendering: geometricPrecision;} ins { background-color:#ff9; color:#000; text-decoration:none;} mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold;} del { text-decoration: line-through;} abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help;} table { border-collapse:collapse; border-spacing:0; } hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;} input, select { vertical-align:middle; border-radius: none;} ul { display: block; list-style-type: disc; margin-block-start: 0em; margin-block-end: 0em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 0px;} img { width:100%; height:auto; } html { scroll-behavior: smooth;} :root { --bggray: rgba(147, 183, 195, .2); --textred: rgba(203, 37, 69, 1); --black: rgba(0, 0, 0, 1); --white: #ffffff; --blue: rgba(15, 59, 100, 1); --fontone: "Helvetica"; --fonttwo: "Helvetica Neue", Helvetica, Arial, sans-serif; --red: #CB2545; } /* 1.1 GENERAL */ .wrap { width: 1440px; position: relative; display: block; margin: 0 auto; padding: 0; } .inwrap { width: 100%; position: relative; display: inline-block; margin: 0; padding: 0; } .full { width:100%; display: inline-block; margin: 30px 0;} .half { width:50%; box-sizing:border-box; } .four { width:25%; box-sizing:border-box; } .cta .button { font-weight: 400; font-size: 16px; padding: 20px; border-radius: 8px; margin: 0 0 0 5px;} .reset { clear:both; } #chisiamo, #dicono, #event, #other, #contact { scroll-margin-top: 120px; } p { font-size: 16px; font-weight: 400; line-height: 22.8px; color: var(--black);} ul { margin:25px 0; } ul li { margin: 0 0 0 15px; line-height: 35px;} .page a { color: #007bff; text-decoration: none; position: relative; /* Necessario per la sottolineatura "finta" */} .page a::after { content: ''; position: absolute; width: 0; height: 2px; display: block; margin-top: -5px; left: 0; background: #007bff; transition: width .3s ease-in-out;} .page a:hover::after { width: 100%;} .page h4 a { color: #fff; background: #0f3b64; padding: 10px; border-radius: 5px; margin: 10px 0; display: inline-block;} .page h4 a::after { content: ''; position: absolute; width: 0; height: 0px; display: block; margin-top: -5px; left: 0; background: #007bff; transition: width .3s ease-in-out;} .page p { line-height:25px; margin-bottom:25px; } #chisiamo ul { padding-left: 0;} #chisiamo ul li { position: relative; padding-left: 25px; margin-bottom: 8px;} #chisiamo ul li a { background-color: #0f3b64; color: #fff; font-weight: 700; padding: 10px; border-radius: 5px;} #chisiamo ul li a::after { margin-top: -5px; background: #fff;} /* 2.0 HEADER */ header { width: 100%; height: 100px; margin: 0 0 0 0; padding: 0; background-color: rgba(255, 255, 255, 0.78); position: fixed; z-index: 99999999; box-shadow: 0px 1px 4px 0px #000000ab;} header .logo { width:225px; float: left; margin: -20px 0 0 10px;} header nav { float: left; width: fit-content; margin: 10px 0 0 0;} header nav ul { display: flex; justify-content: center; width: 100%; flex-wrap:nowrap; } header nav ul li { color: var(--blue); text-align: left; margin: 0 15px; font-weight: 700; text-transform: uppercase; position: relative;} header nav ul li a { padding: 5px;} header nav ul.sub-menu { display: none; position: absolute; width: max-content; left: -25px; top: 20px; background: var(--white); box-shadow: 0px 0px 4px 2px #00000026;} header nav ul.sub-menu li { color: #002F56; padding: 5px 10px; margin: 0 15px; text-transform: none; font-weight: 400;} header nav ul li:has(ul.sub-menu) > a::after { content: ""; display: inline-block; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid var(--blue); margin-left: 8px; margin-top: -3px; vertical-align: middle; transition: transform 0.3s ease;} header nav ul li.submenu-open:has(ul.sub-menu) > a::after { transform: rotate(180deg);} @supports not selector(:has(*)) { header nav ul li.menu-item-has-children > a::after { content: ""; display: inline-block; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid var(--blue); margin-left: 8px; margin-top: -3px; vertical-align: middle; transition: transform 0.3s ease;} header nav ul li.menu-item-has-children.submenu-open > a::after { transform: rotate(180deg);} } header .cta { width: 255px; height: 50px; float: right; color: var(--black); margin: 40px 15px 0 0;} header .cta .button { background-color: var(--white);} /* 2.1 BANNER */ .banner { width: 100%; height: 900px; margin: 0 auto 0; position: relative; color: var(--white); font-family: var(--fonttwo); overflow: hidden; max-width: 1920px;} .banner figure { position:relative; } .banner figure img { object-fit: cover; width: 100%; height: 900px;} .banner h1 { position: absolute; bottom: 37px; left: 37px; font-weight: 400; font-size: 72px; line-height: 72px; letter-spacing: -0.5px;} .banner h2 { position: absolute; bottom: 38px; right: 0; font-weight: 400; font-size: 18px; line-height: 23.4px; width: 597px;} .banner .shadow { width: 100%; height: 900px; background: linear-gradient(-180deg, rgba(13, 59, 100, 1) 0%, rgba(13, 59, 100, 0) 21%, rgba(13, 59, 100, 0) 79%, rgba(13, 59, 100, 1) 100%); position: absolute; top: 0;} .bannersingle { height: 500px;} .bannersingle figure img { height: 500px;} .bannersingle .shadow { height: 500px;} /* 2.2 HAMBURGER */ .hamburger { display: none; flex-direction: column; cursor: pointer; padding: 10px; position: relative; z-index: 100000000; width: 30px; height: 30px; justify-content: center; align-items: center; margin: 35px 20px 0 0; float: right; } .hamburger span { display: block; height: 3px; width: 25px; background-color: var(--blue); margin: 3px 0; transition: all 0.3s ease; transform-origin: center; } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px);} .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px);} .mobile-menu { position: fixed; top: 100px; left: 0; width: 100%; height: calc(100vh - 100px); background-color: rgba(255, 255, 255, 0.98); transform: translateX(-100%); transition: transform 0.3s ease; z-index: 99999998; overflow-y: auto; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);} .mobile-menu.active { transform: translateX(0); } .mobile-menu nav { padding: 30px 20px; } .mobile-menu nav ul { list-style: none; padding: 0; margin: 0;} .mobile-menu nav ul li { border-bottom: 1px solid #e0e0e0; position: relative; } .mobile-menu nav ul li:last-child { border-bottom: none;} .mobile-menu nav ul li a { display: block; padding: 15px 0; color: var(--blue); font-weight: 700; text-transform: uppercase; font-size: 16px; text-decoration: none; position: relative;} .mobile-menu nav ul li:has(ul.sub-menu) > a::after, .mobile-menu nav ul li.menu-item-has-children > a::after { content: "+"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: normal; transition: transform 0.3s ease;} .mobile-menu nav ul li.submenu-open:has(ul.sub-menu) > a::after, .mobile-menu nav ul li.menu-item-has-children.submenu-open > a::after { transform: translateY(-50%) rotate(45deg);} .mobile-menu nav ul.sub-menu { display: none; background-color: #f8f9fa; margin: 0; padding: 0;} .mobile-menu nav ul.sub-menu li { border-bottom: 1px solid #e9ecef;} .mobile-menu nav ul.sub-menu li a { padding: 12px 20px; font-size: 14px; color: var(--blue); font-weight: 400; text-transform: none;} .mobile-menu .mobile-cta { padding: 20px; border-top: 2px solid var(--blue); margin-top: 20px;} .mobile-menu .mobile-cta .button { display: block; background-color: var(--blue); color: var(--white); padding: 15px; text-align: center; border-radius: 8px; text-decoration: none; font-weight: 700; text-transform: uppercase;} @media only screen and (max-width: 1023px) { .hamburger { display: flex;} header .cta { position: static; display: none;} } @media only screen and (max-width: 767px) { .hamburger { margin: 20px 10px 0 0; } .mobile-menu { top: 80px; height: calc(100vh - 80px);} } .menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 99999997;} .menu-overlay.active { opacity: 1; visibility: visible;} /* 3.0 NEAR */ .near { padding:56px 50px; box-sizing:border-box; } .near h1 { font-size:50px; font-weight: 400; line-height:55px; color: var(--blue); margin: 35px 0 30px 0;} .near h2, .near p { font-size: 16px; font-weight: 400; line-height: 22.8px; color: var(--black); width: 497px;} .near .half { padding:20px 10px; float: left;} .near .cta { width:410px; margin:40px 0 0 0; } .near .cta .button { background-color:var(--black); color:var(--white); margin: 0 5px 0 0;} .near figure { background-color: var(--bggray); width: 100%; height: 536px; float: right;} .near figure img { width:100%; height:536px; object-fit:cover; } .near ul { margin:25px 0 0 0; } .near ul li { margin: 0 0 0 15px; line-height: 35px;} .near a { color: #007bff; text-decoration: none; position: relative; /* Necessario per la sottolineatura "finta" */} .near a::after { content: ''; position: absolute; width: 0; height: 2px; display: block; margin-top: -5px; left: 0; background: #007bff; transition: width .3s ease-in-out;} .near a:hover::after { width: 100%;} .near h4 a { color: #fff; background: #0f3b64; padding: 10px; border-radius: 5px; margin: 10px 0; display: inline-block;} .near h4 a::after { content: ''; position: absolute; width: 0; height: 0px; display: block; margin-top: -5px; left: 0; background: #007bff; transition: width .3s ease-in-out;} /* 4.0 SLIDE */ .slide { background-color: var(--bggray); padding: 60px 0; display: inline-block; width: 100%;} .slideNeutral { background-color: transparent !important; } .slide .container_wrap { padding:0 50px; } .slide .container_wrap h1 { color: var(--blue); font-size: 50px; font-weight: 400; line-height: 55px; margin: 0 0 0 50px; font-family: var(--fonttwo); float: left;} .slide .container_wrap .controller { float:right; margin: 0 40px 0 0;} .slide .container_wrap .controller span { width: 35px; position: relative; display: block; float: left; margin: 0 25px 0 0; cursor: pointer;} .slide .container_wrap .controller span img { width:100%; height:auto; cursor: pointer; transition: opacity 0.2s ease;} .slide .container_wrap .controller span img:hover { opacity: 0.8;} .slide .container_wrap article { float: left; margin: 30px 0 0 50px; width: 300px; min-width: 300px; position: relative;} .slide .container_wrap article figure { background-color: #9C9898; width: 100%; height: 290px; border-radius: 32px; position: relative; overflow: hidden;} .slide .container_wrap article figure h3 { position:absolute; font-size:13px; color: #01334F; padding: 5px; background-color: #fff; top: 15px; left: 15px;} .slide .container_wrap article h1 { color: var(--blue); font-size: 28px; font-weight: 400; padding: 0 !important; margin: 25px 0 5px; float: none; line-height: 42px;} .slide .container_wrap article p { color:var(--blue); font-family:var(--fonttwo); font-size:18px; font-weight:400; text-decoration:underline; line-height: 110%;} .slide .slide_container { overflow: hidden; width: 100%; position: relative;} .slide .slide_wrap { display: flex; transition: transform 0.3s ease;} /* 5.0 INTRO */ .intro article { height: 900px; background-repeat: no-repeat; background-size: contain; width: 100%;} .intro h1 { font-size:80px; font-weight:400; color:#fff; display: none;} .intro p { font-size:26px; font-weight:400; color: #fff; display: none;} .intro .cta { display:none; } /* 6.0 FOOTER */ footer { padding:50px 0 0; } footer h1 { font-size:50px; font-weight: 400; line-height:55px; color: var(--blue); margin: 0px 0 30px 0;} footer h2 { font-size: 16px; font-weight: 400; line-height: 22.8px; color: var(--black); width: 497px;} footer .cta { float: right; margin: 0 70px 0 15px;} footer .cta a.button { background-color: #494949; padding: 20px 10px; border-radius: 7px; float: left; color: #fff;} footer ul li { color: var(--blue); font-weight: 400; font-size: 26px; list-style: none; border-bottom: 1px solid var(--blue); padding: 18px 0 18px 45px; background-image: url(img/doctor.webp); background-repeat: no-repeat; background-size: 30px auto; background-position: 0px 16px;} footer .half { float:left; padding: 55px;} footer .credit { background-color:#01334F; padding-bottom: 100px;} footer .credit .wrap { padding:24px 40px !important } footer .credit .four { float:left; } footer .credit .four li { color:#C6E8F9; font-size:16px; background-image:none; padding:15px 0 0; border:none; text-align: right;} footer .credit .four img { width:50%; } footer .credit .wrap .inwrap .four:nth-child(3) li { float:right; } footer address { color: var(--white); font-size: 14px; line-height: 20px; margin: 20px 0 0 0;} .menu-item svg { vertical-align: middle; transition: transform 0.2s ease;} .menu-item svg:hover { transform: scale(1.1);} /* 7.0 CONTATTI */ .contact .half { float:left; padding:0 55px 0;} .contact .half:nth-of-type(2), .contact .half:nth-of-type(3) { padding:0px 55px 0 55px;; } .contact .half:nth-of-type(1), .contact .half:nth-of-type(4) { padding:0 55px 0; } .contact .half label { font-size:14px; } .contact .half input, .contact .half textarea { padding: 10px; width: 100%; margin: 5px 0 25px 0;} .contact .half textarea { height: 200px; } .contact .half input[type="submit"] { background-color: var(--blue); color: var(--white); border: none; font-size: 16px; width: 104%; letter-spacing: 1px; text-transform: uppercase;} .contact .half input[type="checkbox"] { float: left; padding: 0; width: auto; margin: 0 25px 25px 0;} .contact .half .wpcf7-acceptance { margin: 0 0 15px 0; display: inline-block; background-color: #fdfdfd; padding: 10px; box-sizing: border-box; width: 104%;} .contact h1 { color: var(--blue); font-size: 50px; font-weight: 400; line-height: 55px; margin: 0 0 0 50px; font-family: var(--fonttwo); float: left;} .contact .wpcf7-not-valid-tip { position: absolute; top: -7px; right: 7px;} /* 8.0 CARD */ .card { display: flex; flex-wrap: wrap; gap: 28px; background-color: white; padding: 50px 0; justify-content: left;} .card article { flex: 0 0 calc(24% - 7.5px); border-radius: 6px; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 18px; transition: transform 0.2s ease; margin: 0 0 25px 0; position: relative; } .card article h1 { color: #0f3b64; padding: 15px 0px 15px 10px; font-size: 18px;} .card article .estratto { padding: 10px 10px 40px 10px; line-height: 15px;} .card article figure { width:100%; } .card article figure img { width:100%; height:auto; } .card .half { float:left; } .card article .half a { padding: 0; color: #0f3b64; position: relative; bottom: auto; font-size: 14px; font-weight: 400;} .card article a.go-spec { right: -21px; width: 50%; line-height: 19px;} /* 9.0 SINGLE SPECIALISTA */ .page .branca-correlate { border-top: 1px solid #999; padding: 15px 0; line-height: 25px;} .page .branca-correlate h3, .page .sp h3 { font-weight:700; font-size: 18px; color:var(--blue); } .page .branca-correlate a { } .page .sp p { text-transform: lowercase;} .page .sp { padding: 15px 0; line-height: 25px;} .page .sp ul, .page .branca-correlate ul { margin: 5px 0 0 0; } .page .branca-correlate ul li { color: var(--blue); font-weight: 400; font-size: 18px; list-style: none; border-bottom: 1px solid var(--blue); padding: 18px 0 18px 45px; background-image: url(img/doctor.webp); background-repeat: no-repeat; background-size: 25px auto; background-position: 0px 20px; margin: 0;} .page figure { width: 250px; height: auto; background: transparent;} .page figure img { width:100%; height:auto; } /* 9.1 SINGLE SPECIALITA */ .specialisti-correlati { margin-top: 40px; } .specialisti-correlati h3 { margin-bottom: 30px; color: #333; border-bottom: 2px solid #007cba; padding-bottom: 15px; font-size: 32px !important; font-weight: 100 !important; text-align: left !important; line-height: 38px !important; text-transform: uppercase !important; margin-top: 0 !important;} .specialista-card { background: white; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; overflow: hidden; width: 100%; margin: 0 0 25px 0;} .specialista-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.15);} .specialista-info { display: flex; padding: 20px; gap: 20px; align-items: flex-start; position: relative;} .specialista-image { flex-shrink: 0; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 3px solid #007cba;} .specialista-image img { width: 100%; height: 100%; object-fit: cover;} .specialista-details { flex: 1;} .specialista-details h4 { margin: 0 0 10px 0; color: #007cba; font-size: 1.2em; font-weight: 600;} .altre-specialita { margin: 10px 0; font-size: 16px;} .altre-specialita a { color: #666; text-decoration: none; } .altre-specialita a:hover { color: #007cba; border-bottom-color: #007cba;} .altre-specialita a::after { margin-top: 5px;} .prestazioni { margin: 15px 0; font-size: 18px; line-height: 1.4; color: #555;} .prestazioni p { font-size:16px; text-transform:lowercase; } .prestazioni strong {} .altre-specialita strong, .prestazioni strong { color: #333; font-weight: 600;} .btn-specialista { display: inline-block; margin-top: 15px; padding: 10px 20px; background: linear-gradient(45deg, #007cba, #0056b3); color: white !important; text-decoration: none !important; border-radius: 5px; font-size: 14px; font-weight: 500; transition: all 0.3s ease; position: absolute !important; top: 30px; right: 10px;} .btn-specialista:hover { background: linear-gradient(45deg, #005a87, #004085); color: white; transform: translateY(-1px);} .btn-specialista::after { height: 0px !important; display: none !important;} /* 9.2 SPECIALISTI */ .specilisti .btn-specialista { padding: 10px 20px !important; float: left; margin: 0; top: auto; right: auto; bottom: 15px !important;} .specilisti article { flex: 0 0 calc(32% - 7.5px); border-radius: 0; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 18px; transition: transform 0.2s ease; margin: 0 0 25px 0; position: relative; border: 1px solid #e5e5e5; box-sizing: border-box; } .specilisti article figure { width: 80% !important;} /* 9.3 FILTRI SPECIALISTI */ .ricerca-specialisti { background: #f8f9fa; padding: 30px; margin-bottom: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); display: inline-block; width: 100%; box-sizing: border-box;} .ricerca-specialisti h2 { font-size: 26px; font-weight: 400; color: #007198; text-transform: uppercase; text-align: center; margin-bottom: 35px;} .filtri-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .filtro-gruppo label { font-size: 16px; line-height: 22px; color: #333333; text-align: left; text-transform: initial; display: block; margin-bottom: 10px;} .filtro-gruppo select, .filtro-gruppo input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; background: white; box-sizing: border-box;} .filtri-buttons { float:right; } .btn-cancella, .btn-cerca { padding: 12px 30px; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; font-size: 14px; text-transform: uppercase; transition: all 0.3s ease; } .btn-cancella { background: #6c757d; color: white; } .btn-cancella:hover { background: #5a6268; } .btn-cerca { background: #2c5282; color: white; } .btn-cerca:hover { background: #2a4a75; } .risultati-info { background: #e3f2fd; padding: 15px; margin-bottom: 30px; border-radius: 4px; border-left: 4px solid #2c5282; } .risultati-info p { margin: 5px 0; color: #333; } @media (max-width: 768px) { .filtri-container { grid-template-columns: 1fr; } .filtri-buttons { flex-direction: column; } .btn-cancella, .btn-cerca { width: 100%; } } /* 10.0 BLOG */ .iniziative-eventi-container { padding: 40px 0;} .page-title { text-align: center; margin-bottom: 40px; font-size: 2.5em; color: #333;} .iniziative-eventi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-bottom: 40px;} .iniziativa-evento-item { background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; transition: transform 0.3s ease;} .iniziativa-evento-item:hover { transform: translateY(-5px);} .iniziativa-thumbnail img { width: 100%; height: 200px; object-fit: cover;} .iniziativa-content { padding: 20px;} .iniziativa-title { margin: 0 0 15px 0; font-size: 1.3em;} .iniziativa-title a { text-decoration: none; color: #333;} .iniziativa-title a:hover { color: #0073aa;} .iniziativa-meta { margin-bottom: 15px; font-size: 0.9em; color: #666;} .iniziativa-meta span { display: block; margin-bottom: 5px;} .iniziativa-excerpt { margin-bottom: 20px; line-height: 1.6;} .read-more-btn { display: inline-block; background: #0073aa; color: white; padding: 10px 20px; text-decoration: none; border-radius: 4px; transition: background 0.3s ease;} .read-more-btn:hover { background: #005a87;} .no-iniziative-found { text-align: center; padding: 60px 20px;} .iniziative-pagination {} .iniziative-pagination ul {} .iniziative-pagination ul li { list-style:none; float:left; } .iniziative-pagination ul li a {} .iniziative-pagination ul li span { background: #01334f; color: #fff; padding: 10px 15px;} /* Responsive */ @media (max-width: 768px) { .iniziative-eventi-grid { grid-template-columns: 1fr; gap: 20px;} .page-title { font-size: 2em;} } @media only screen and (max-width: 1919px) and (min-width: 1366px){ .wrap { width: 1200px; } .near h1 { font-size: 40px;} .slide .container_wrap article { margin: 30px 0 0 35px; width: 265px;} .slide .container_wrap article figure { height: 260px;} .intro article { height: 750px;} .slide .slide_container { width: 85%; margin: 0 auto;} footer .cta a.button { padding: 20px 5px;} .cta .button { font-size: 14px; padding: 10px;} header nav ul li { font-size: 14px;} .card article { flex: 0 0 calc(32% - 7.5px);} .specilisti article { flex: 0 0 calc(49% - 7.5px);} } @media only screen and (max-width: 1365px) and (min-width: 1024px){ .wrap { width: 800px; } .near h1 { font-size: 40px; margin: 25px 0;} .intro article { height: 500px;} .banner { height: 500px;} .banner figure img { height: 500px;} .banner h1 { font-size: 40px; width: 50%; left: 0; bottom: 0; text-align: center;} .banner h2 { width: 50%; right: 0; bottom: 18px; text-align: center;} .banner .shadow { width: 100%; height: 500px;} header .cta { width: 175px; height: 30px; margin: 40px 10px 0 0px; } .cta .button { font-size: 13px; padding: 8px; margin: 0 0 0 5px; box-sizing: border-box;} header nav { font-size: 12px;} header .logo { width: 170px; margin: -5px 0 0 0px;} header nav ul li { margin: 0 7px;} .half { width: 100%;} .card .half { width:50%; } .near { padding: 10px 0;} .near .half { padding: 0;} .near h2, .near p { width: 100%;} .near figure { float: none; margin: 35px auto;} .slide .container_wrap article h1 { font-size: 24px;} .slide .slide_container { overflow: hidden; width: 92%; position: relative;} footer h1 { font-size: 30px; margin: 0;} footer .cta { margin: 0;} footer .half { width: 100%;} footer ul li { font-size: 16px;} footer .credit .four img { width:170px;} footer .credit .four { width:calc(40% / 2); } footer .credit .four li { color: #C6E8F9; font-size: 14px; background-image: none; padding: 15px 0 0; border: none; text-align: center;} footer .credit .four { width: 100% !important; text-align: center;} footer .credit .wrap .inwrap .four:nth-child(3) { display: flex; justify-content: center; } .card article { flex: 0 0 calc(48% - 7.5px); } .specilisti article { flex: 0 0 calc(100% - 0px);} .specilisti article figure { width: 50% !important;} } @media only screen and (max-width: 1023px) and (min-width: 768px){ .wrap { width: 600px; } .near h1 { font-size: 40px; margin: 25px 0;} .slide .container_wrap article h1 { font-size: 24px;} .slide .slide_container { width: 60%; margin: 0 auto;} .slide .container_wrap h1 { font-size: 35px; margin: 0 0 0 0;} .slide .container_wrap .controller { float: right; margin: 11px 0 0 0;} .intro article { height: 500px;} .banner { height: 450px;} .banner figure img { height: 450px;} .banner h1 { font-size: 40px; width: 50%; left: 0; bottom: 0; text-align: center;} .banner h2 { width: 50%; right: 0; bottom: 18px; text-align: center;} .banner .shadow { height: 450px;} header nav { display: none;} .half { width: 100%;} .near { padding: 10px 0;} .near .half { padding: 0;} .near h2 { font-size: 16px; width: 100%;} .near figure { float: none; margin: 35px auto; width: 100%; height: 536px;} .page figure { width: 150px; height: auto; background: transparent;} .near h2, .near p { width: 100%;} footer h1 { font-size: 30px; margin: 0; width: 100%; } footer .cta { margin:0 auto; float: none; width: fit-content;} footer .half { width: 100%;} footer .punti { width:50% !important; } footer ul li { font-size: 13px;} footer .credit .four img { width:170px;} footer .credit .four { width:calc(40% / 2); } footer .credit .four li { color: #C6E8F9; font-size: 14px; background-image: none; padding: 15px 0 0; border: none; text-align: center;} footer .credit .four { width: 100% !important; text-align: center;} footer .credit .wrap .inwrap .four:nth-child(3) { display: flex; justify-content: center; } .card article { flex: 0 0 calc(100% - 0px); } .card .half { width:50%; } .btn-specialista { position: relative !important; top: auto; right: auto;} .specilisti article { flex: 0 0 calc(100% - 0px);} .specilisti article figure { width: 60% !important;} .specilisti .btn-specialista { top: auto; right: auto; bottom: auto !important; position: relative !important;} } @media only screen and (max-width: 767px){ .wrap { width: 90%; } .half { width: 100%;} header nav { display: none;} header .cta { position: absolute; right: -100px; } header .logo { width: 150px; margin: 0px 0 0 10px;} .banner { width: 100%; height: 470px;} .banner figure img { height: 470px;} .banner .shadow { width: 100%; height: 470px;} .banner h1 { bottom: 45px; left: 10px; font-size: 30px; } .banner h2 { bottom: 15px; right: auto; font-size: 14px; width: 95%; left: 2.5%;} .bannersingle { height: 300px;} .bannersingle figure img { height: 300px;} .bannersingle .shadow { height: 300px;} .bannersingle h1 { bottom: 0; } .near { padding: 10px 0;} .near .half { padding: 0; width: 100%;} .near h1 { font-size: 30px; line-height: 40px; margin: 20px 0 30px 0;} .near h2 { font-size: 16px; width: 100%;} .near p { width: 100%;} .near figure { float: none; margin: 35px auto; width: 100%; height: 200px; } .near figure img { width: 100%; height: 200px;} .page figure { width: 150px; height: auto; background: transparent;} .near .cta .button:nth-child(1) { float:left; } .near .cta .button:nth-child(2) { float:right; } .near .cta { width: 100%;} .slide .container_wrap { padding:0; } .slide .container_wrap article { width: 300px; min-width: 300px;} .slide .container_wrap article h1 { font-size: 24px;} .slide .slide_container { width: 100%; margin: 0; } .slide .container_wrap h1 { font-size: 20px;} .slide .container_wrap article { margin: 15px 0 0 50px;} .slide .container_wrap .controller { position: absolute; right: -50px; top: 17px;} .slide .container_wrap .controller span { width: 20px;} .slide .container_wrap article figure { width: 240px; height: 240px;} .intro { width: 100% !important; } .intro article { height: 270px; background-size: cover;} .cta .button { font-size: 14px; width: 100%; box-sizing: border-box; text-align: center; margin: 15px 0; } footer h1 { font-size: 30px !important; margin: 0; text-align: left;} footer .cta { margin:0 auto; float: none; width: fit-content;} footer .half { width: 100%; padding: 0;} footer ul li { font-size: 13px;} footer .credit .four:first-child { width:20%; } footer .credit .four:nth-child(2) { width:40%; } footer .credit .four img { width: 50%; margin: 0 auto; display: block; } footer .credit .four { width:calc(40% / 2); } footer .credit .four li { color: #C6E8F9; font-size: 14px; background-image: none; padding: 15px 0 0; border: none; text-align: center;} footer .credit .four:first-child { width: 100%;} footer .credit .four { width: 100%;} footer .credit .four:nth-child(2) { width: 100%;} footer ul li { font-size: 13px;} footer .credit .four img { width:170px;} footer .credit .four { width:calc(40% / 2); } footer .credit .four li { color: #C6E8F9; font-size: 14px; background-image: none; padding: 15px 0 0; border: none; text-align: center;} footer .credit .four { width: 100% !important; text-align: center;} footer .credit .wrap { padding: 24px 0 !important;} footer .credit .wrap .inwrap .four:nth-child(3) { display: flex; justify-content: center; } .contact .half input[type="checkbox"] { margin: 0 25px 180px 0;} .card article { flex: 0 0 calc(100% - 0px); } .card .half { width:50%; } .btn-specialista { position: relative !important; top: auto; right: auto;} .specilisti article { flex: 0 0 calc(100% - 0px);} .specilisti article figure { width: 60% !important;} .specilisti .btn-specialista { top: auto; right: auto; bottom: auto !important; position: relative !important;} } @media only screen and (max-width: 480px){ .card article { flex: 0 0 calc(100% - 0px); } }