/* ############################################### FONTS */ @font-face { font-family: 'xarxa'; src: url('../fonts/abril_display_bolditalic-webfont.eot'); src: url('../fonts/abril_display_bolditalic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/abril_display_bolditalic-webfont.woff2') format('woff2'), url('../fonts/abril_display_bolditalic-webfont.woff') format('woff'), url('../fonts/abril_display_bolditalic-webfont.ttf') format('truetype'), url('../fonts/abril_display_bolditalic-webfont.svg#abril_displaybold_italic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'xarxa_1'; src: url('../fonts/WeissenhofGrotesk-Light.eot'); src: url('../fonts/WeissenhofGrotesk-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/WeissenhofGrotesk-Light.woff2') format('woff2'), url('../fonts/WeissenhofGrotesk-Light.woff') format('woff'), url('../fonts/WeissenhofGrotesk-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'xarxa_2'; src: url('../fonts/WeissenhofGrotesk-Regular.eot'); src: url('../fonts/WeissenhofGrotesk-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/WeissenhofGrotesk-Regular.woff2') format('woff2'), url('../fonts/WeissenhofGrotesk-Regular.woff') format('woff'), url('../fonts/WeissenhofGrotesk-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'xarxa_3'; src: url('../fonts/WeissenhofGrotesk-Medium.eot'); src: url('../fonts/WeissenhofGrotesk-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/WeissenhofGrotesk-Medium.woff2') format('woff2'), url('../fonts/WeissenhofGrotesk-Medium.woff') format('woff'), url('../fonts/WeissenhofGrotesk-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'xarxa_4'; src: url('../fonts/WeissenhofGrotesk-Bold.eot'); src: url('../fonts/WeissenhofGrotesk-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/WeissenhofGrotesk-Bold.woff2') format('woff2'), url('../fonts/WeissenhofGrotesk-Bold.woff') format('woff'), url('../fonts/WeissenhofGrotesk-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; } /* ############################################### GLOBAL */ body { margin: 0; font-family: 'xarxa_2', helvetica, arial; color: rgb(92,75,66); -webkit-text-size-adjust: none; } body * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } body.questionnaire { background: rgb(236,233,231); } body p { margin: 0; } body a { text-decoration: none; color: rgb(92,75,66); } body a:focus { outline: none; } body b { font-weight: normal; } /* body .wrapper { transition: filter 0.5s ease; -webkit-transition: -webkit-filter 0.5s ease; -moz-transition: -moz-filter 0.5s ease; }*/ body.blur .wrapper { filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px); } body .width { max-width: 1080px; } body .break { float: none; clear: both; } body .hidden { display: none; } body .shorten { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } body .line.center { height: 1px; background: linear-gradient(to right, rgba(92,75,66,0) 0%, rgba(92,75,66,0.3) 50%, rgba(92,75,66,0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(92,75,66,0)), color-stop(50%, rgba(92,75,66,0.3)), color-stop(100%, rgba(92,75,66,0))); background: -webkit-linear-gradient(left, rgba(92,75,66,0) 0%,rgba(92,75,66,0.3) 50%,rgba(92,75,66,0) 100%); background: -moz-linear-gradient(left, rgba(92,75,66,0) 0%, rgba(92,75,66,0.3) 50%, rgba(92,75,66,0) 100%); } @media screen and (max-width: 1120px) { body { margin: 0 20px 0 20px; } body .width { max-width: auto; } } @media screen and (max-width: 800px) { body { margin: 0 4% 0 4%; } } /* spin */ .spin { } .spin p { width: 50px; height: 50px; background: url(../graphics/global/spin.png) no-repeat -50px 0; } .spin p { animation: spin 0.4s linear infinite; -webkit-animation: spin 0.4s linear infinite; -moz-animation: spin 0.4s linear infinite; } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .spin p { background-size: 100px auto; } } /* ############################################### [AREA] COLUMNS */ #area_columns { padding: 0 0 60px 0; text-align: left; display: table; } #area_columns .column { float: left; } #area_columns .column123 { width: 30%; margin: 0 5% 0 0; } #area_columns .column223 { width: 64%; float: right; } #area_columns .column133 { width: 30%; margin: 0 5% 0 0; } #area_columns .column233 { width: 30%; margin: 0 5% 0 0; } #area_columns .column333 { width: 30%; float: right; } /* ############################################### BUTTONS */ .buttons { } .buttons.center { display: table; } .buttons.center .button { margin: 0 6px 0 6px; } .buttons .button { float: left; } .buttons .button a { padding: 6px 16px 6px 16px; background: rgb(236,233,231); display: block; } .buttons .button a { transition: background-color 0.4s ease; -webkit-transition: background-color 0.4s ease; -moz-transition: background-color 0.4s ease; } .buttons .button a p { padding: 3px 0 3px 0; font-family: 'xarxa_3', helvetica, arial; font-size: 11px; line-height: 9px; color: rgb(92,75,66); position: relative; top: 1.5px; text-transform: uppercase; letter-spacing: 0.5px; } .buttons .button a.normal:hover p { color: rgb(255,255,255); } .buttons .button a.disabled { cursor: not-allowed; } .buttons .button a.disabled p { color: rgba(92,75,66,0.4); cursor: not-allowed; } .buttons[color="white"] .button a.normal { background: rgb(255,255,255); box-shadow: 0px 1px 3px rgba(92,75,66,0.2); -webkit-box-shadow: 0px 1px 3px rgba(92,75,66,0.2); -moz-box-shadow: 0px 1px 3px rgba(92,75,66,0.2); } .buttons[color="white"] .button a.normal p { color: rgb(92,75,66); } .buttons[color="white"] .button a.normal:hover { background: rgb(92,75,66); } .buttons[color="white"] .button a.normal:hover p { color: rgb(255,255,255); } .buttons[color="white"] .button a.disabled { background: rgba(255,255,255,0.3); cursor: not-allowed; } .buttons[color="white"] .button a.disabled p { color: rgba(92,75,66,0.4); cursor: not-allowed; } .buttons[color="green"] .button a.normal:hover { background: rgb(47,180,188); } .buttons[color="blue"] .button a.normal:hover { background: rgb(33,187,239); } .buttons[color="orange"] .button a.normal:hover { background: rgb(234,91,12); } /* ############################################### CORNERS */ .corner { width: 70px; height: 70px; background: url(../graphics/global/corners.png) no-repeat; background-size: auto 110px; position: absolute; top: -6px; left: -6px; } .corner.white { background-position: -100px -20px; } .corner.beige { background-position: -200px -20px; } .corner.black { background-position: -300px -20px; } /* ############################################### [AREA] TOOLS */ #area_tools { } #area_tools .width { position: relative; } #area_tools .tools { position: absolute; top: 12px; right: 3px; } #area_tools .tools .search { margin: 0 6px 0 0; float: left; } #area_tools .tools .search a { width: 22px; height: 22px; background: url(../graphics/global/search.png) 0 -22px no-repeat; opacity: 0.5; -moz-opacity: 0.5; display: block; } #area_tools .tools .search a { transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease; -moz-transition: opacity 0.4s ease; } #area_tools .tools .search a:hover { opacity: 1; -moz-opacity: 1; } #area_tools .tools .language { float: left; } #area_tools .tools .language ul { margin: 0; padding: 0; } #area_tools .tools .language ul li { margin: 0; padding: 0; list-style: none; float: left; } #area_tools .tools .language ul li a { padding: 4px 7px 3px 8px; display: block; } #area_tools .tools .language ul li a { transition: background-color 0.4s ease; -webkit-transition: background-color 0.4s ease; -moz-transition: background-color 0.4s ease; } #area_tools .tools .language ul li a p { padding: 3px 0 3px 0; font-size: 10px; line-height: 8px; color: rgb(92,75,66); text-transform: uppercase; letter-spacing: 0.5px; position: relative; top: 1px; } #area_tools .tools .language ul li a.normal p { color: rgba(92,75,66,0.5); } #area_tools .tools .language ul li a.normal:hover { background: rgba(92,75,66,0.1); } #area_tools .tools .language ul li a.normal:hover p { color: rgb(92,75,66); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #area_tools .tools .search a { background-size: auto 44px; } } @media screen and (max-width: 1120px) { #area_tools .tools { right: 13px; } } @media screen and (max-width: 800px) { #area_tools { display: none; } } /* ############################################### [AREA] SEARCH */ #area_search { position: fixed; z-index: 1000; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.6); display: none; } #area_search .width { } #area_search .search { } /* ############################################### [AREA] TOP */ #area_top { xheight: 174px; height: 124px; } #area_top > .width { xposition: relative; } #area_top .logo { position: absolute; top: 20px; } #area_top .logo a { width: 92px; height: 84px; background: url(../graphics/global/logo.png) 0 -84px no-repeat; display: block; } /* body.questionnaire #area_top .logo a { background-position: -152px -60px; }*/ #area_top .nav { xmargin: 59px 0 0 0; margin: 35px 0 0 0; float: right; } #area_top .nav ul { margin: 0; padding: 0; float: right; } #area_top .nav ul li { margin: 0; padding: 0 1px 0 1px; list-style: none; float: left; } #area_top .nav ul li a { margin: 2px 0 0 0; padding: 4px 9px 4px 9px; display: block; } #area_top .nav ul li a { transition: background-color 0.4s ease; -webkit-transition: background-color 0.4s ease; -moz-transition: background-color 0.4s ease; } #area_top .nav ul li a p { padding: 3px 0 3px 0; font-size: 13px; line-height: 11px; color: rgb(92,75,66); text-transform: uppercase; letter-spacing: 0.5px; position: relative; top: 1px; } #area_top .nav ul.row1 li a p { font-family: 'xarxa_3', helvetica, arial; } #area_top .nav ul.row2 li a p { color: rgba(92,75,66,0.7); } #area_top .nav ul li a.normal:hover { background: rgba(92,75,66,0.4); } #area_top .nav ul li a.normal:hover p { color: rgb(255,255,255); } #area_top .nav ul li a.selected, #area_top .nav ul li a.active { background: rgba(92,75,66,0.4); } #area_top .nav ul li a.selected p, #area_top .nav ul li a.active p { color: rgb(255,255,255); } #area_top .nav ul.row1 li:nth-child(1) a.normal:hover, #area_top .nav ul.row1 li:nth-child(1) a.selected, #area_top .nav ul.row1 li:nth-child(1) a.active { background: rgb(232,186,0); } #area_top .nav ul.row1 li:nth-child(2) a.normal:hover, #area_top .nav ul.row1 li:nth-child(2) a.selected, #area_top .nav ul.row1 li:nth-child(2) a.active { background: rgb(232,186,0); } #area_top .nav ul.row1 li:nth-child(3) a.normal:hover, #area_top .nav ul.row1 li:nth-child(3) a.selected, #area_top .nav ul.row1 li:nth-child(3) a.active { background: rgb(232,186,0); } #area_top .nav ul.row1 li:nth-child(4) a.normal:hover, #area_top .nav ul.row1 li:nth-child(4) a.selected, #area_top .nav ul.row1 li:nth-child(4) a.active { background: rgb(232,186,0); } #area_top .nav_button { float: right; display: none; } #area_top .nav_button a { padding: 20px 0 20px 0; display: block; } #area_top .nav_button a p { width: 6px; height: 6px; margin: 0 0 0 3px; background: rgb(43,43,43); border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; float: left; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #area_top .logo a { background-size: auto 168px; } } @media screen and (max-width: 1120px) { #area_top .logo { left: 40px; } #area_top .nav { margin-right: 11px; } #area_top .nav ul { } } @media screen and (max-width: 800px) { #area_top { height: 174px; } #area_top .logo { margin-left: -46px; left: 50%; top: 45px; } #area_top .nav { display: none; } #area_top .nav ul { } #area_top .nav_button { padding: 64px 0 0 0; display: block; } } @media screen and (max-width: 500px) { #area_top { height: 134px; } #area_top .logo { left: 8%; top: 37px; margin-left: 0; } #area_top .nav { } #area_top .nav ul { } #area_top .nav_button { padding: 44px 10px 0 0; } } /* ############################################### [AREA] NAV */ #area_nav { position: absolute; z-index: 1000; display: none; } #area_nav ul { margin: 0; padding: 8px 8px 8px 18px; background: rgb(232,186,0); } /* #area_nav[color="blue"] ul { background: rgb(33,187,239); } #area_nav[color="orange"] ul { background: rgb(234,91,12); } #area_nav[color="green"] ul { background: rgb(47,180,188); } */ #area_nav ul li { margin: 0; padding: 0; list-style: none; } #area_nav ul li a { padding: 7px 7px 7px 7px; display: block; } #area_nav ul li a p { font-family: 'xarxa_3', helvetica, arial; font-size: 13px; line-height: 11px; color: rgb(255,255,255); text-transform: uppercase; letter-spacing: 0.5px; position: relative; top: 1px; text-align: right; } #area_nav ul li a:hover p { color: rgb(0,0,0); } /* ############################################### [AREA] MOBILE */ #area_mobile { width: 70%; position: fixed; z-index: 2000; top: 0px; bottom: 0; right: 0; background: rgba(0,0,0,0.9); overflow: auto; display: none; } #area_mobile .content { padding: 27px 6% 30px 10%; } #area_mobile .content .close { margin: 0 0 0 -12px; } #area_mobile .content .close a { width: 40px; height: 40px; background: url(../graphics/global/icons.png) -40px -40px no-repeat; display: block; float: left; } #area_mobile .content ul { margin: 0; padding: 17px 0 0 0; } #area_mobile .content ul li { margin: 0; padding: 0; list-style: none; text-align: left; } #area_mobile .content ul li a { display: block; } #area_mobile .content ul li a p { font-family: 'xarxa_3', helvetica, arial; text-transform: uppercase; letter-spacing: 0.5px; } #area_mobile .content ul.level1 > li a { padding: 10px 0 10px 0; } #area_mobile .content ul.level1 > li a p { font-size: 18px; line-height: 22px; color: rgb(255,255,255); } #area_mobile .content ul.level2 { padding: 0 0 10px 0; } #area_mobile .content ul.level2 li a { padding: 6px 0 6px 10px; } #area_mobile .content ul.level2 li a p { font-size: 15px; line-height: 19px; color: rgba(255,255,255,0.7); } #area_mobile_cover { position: fixed; z-index: 1000; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.3); display: none; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #area_mobile .content .close a { background-size: auto 80px; } } @media screen and (max-width: 600px) { #area_mobile { width: 90%; } } /* ############################################### [AREA] WINDOW */ #area_window { } #area_window .width { height: 370px; position: relative; } #area_window .window { background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #area_window .window.current { z-index: 200; } #area_window .window.next { z-index: 100; } #area_window .title { margin: -13px 0 0 0; position: absolute; z-index: 300; top: 50%; left: 0; right: 0; } #area_window .title p { font-family: 'xarxa', georgia; font-size: 30px; line-height: 30px; color: rgb(255,255,255); text-shadow: 0px 0px 4px rgba(0,0,0,0.4); letter-spacing: 1px; } #area_window .preload { display: none; } @media screen and (max-width: 800px) { #area_window .width { height: 260px; } } @media screen and (max-width: 500px) { #area_window { } #area_window .width { height: 200px; } #area_window .title p { font-size: 26px; line-height: 26px; } } /* ############################################### [AREA] CONTENT */ #area_content { } body[template="startpage"] #area_content { padding-bottom: 80px; } #area_window ~ #area_content { padding-top: 0; } #area_content .width { } #area_content .section { } #area_content .section[theme="dark"] .width { background: rgb(236,233,231); } #area_content .section a { padding: 60px 0 60px 0; display: block; } #area_content .section a:hover .title p { text-decoration: underline; } #area_content .section .headline { padding: 0 0 14px 0; } #area_content .section .headline p { padding: 4px 0 4px 0; font-family: 'xarxa_3', helvetica, arial; font-size: 10px; line-height: 10px; color: rgb(92,75,66); text-transform: uppercase; letter-spacing: 4px; } #area_content .section .intro { padding: 0 0 30px 0; } #area_content .section .intro p { font-family: 'xarxa', georgia; font-size: 30px; line-height: 34px; color: rgb(92,75,66); } #area_content .section .description { padding: 0 22% 0 22%; } #area_content .section .description p { font-size: 14px; line-height: 20px; letter-spacing: 0.1px; color: rgb(92,75,66); } #area_content .section .description p b { font-family: 'xarxa_3', helvetica, arial; } #area_content .section .button { margin: 20px 0 0 0; padding: 6px 12px 6px 12px; background: rgb(236,233,231); display: table; } #area_content .section .button { transition: background-color 0.4s ease; -webkit-transition: background-color 0.4s ease; -moz-transition: background-color 0.4s ease; } #area_content .section .button p { padding: 3px 0 3px 0; font-family: 'xarxa_3', helvetica, arial; font-size: 11px; line-height: 9px; color: rgb(92,75,66); position: relative; top: 1.5px; text-transform: uppercase; letter-spacing: 0.5px; } #area_content .section[theme="dark"] .button { background: rgb(255,255,255); box-shadow: 0px 1px 3px rgba(92,75,66,0.2); -webkit-box-shadow: 0px 1px 3px rgba(92,75,66,0.2); -moz-box-shadow: 0px 1px 3px rgba(92,75,66,0.2); } #area_content .section .intro p { color: rgb(173,60,65); } /* #area_content .section[color="blue"] .intro p { color: rgb(33,187,239); } #area_content .section[color="orange"] .intro p { color: rgb(234,91,12); } #area_content .section[color="green"] .intro p { color: rgb(47,180,188); } */ #area_content .section a:hover .button { background: rgb(173,60,65); } /* #area_content .section[color="blue"] a:hover .button { background: rgb(33,187,239); } #area_content .section[color="orange"] a:hover .button { background: rgb(234,91,12); } #area_content .section[color="green"] a:hover .button { background: rgb(47,180,188); } */ #area_content .section a:hover .button p { color: rgb(255,255,255); } #area_content .pagehead { } #area_window ~ #area_content .pagehead { padding-top: 60px; } #area_content .pagehead .photo { width: 168px; height: 168px; margin: -30px 0 30px 0; padding: 3px; border: 1px solid rgba(92,75,66,0.3); border-radius: 168px; -webkit-border-radius: 168px; -moz-border-radius: 168px; } #area_content .pagehead .photo .image { width: 160px; height: 160px; background-size: cover; background-position: 50% 0%; border-radius: 160px; -webkit-border-radius: 160px; -moz-border-radius: 160px; } #area_content .pagehead .headline { padding: 0 0 18px 0; } #area_content .pagehead .headline p { padding: 4px 0 4px 0; font-family: 'xarxa_3', helvetica, arial; font-size: 10px; line-height: 8px; color: rgb(92,75,66); text-transform: uppercase; letter-spacing: 4px; } #area_content .pagehead .headline p.box { margin: -4px 14px 0 0; padding: 8px 7px 5px 9px; float: left; background: red; color: rgb(255,255,255); } #area_content .pagehead .headline p.box.yellow { background: rgb(247,168,39); } #area_content .pagehead .intro { padding: 0 0 30px 0; } #area_content.center .pagehead .intro { padding-right: 14%; padding-left: 14%; } #area_content .pagehead .intro p { font-family: 'xarxa', georgia; font-size: 37px; line-height: 41px; color: rgb(92,75,66); } #area_content .pagehead .bullets { margin: -20px 0 0 0; padding: 0 14% 30px 14%; display: table; } #area_content .pagehead .bullets p { height: 16px; margin: 3px 3px 3px 3px; padding: 5px 8px 2px 8px; background: rgb(43,43,43); border-radius: 50px; float: left; } #area_content .pagehead .bullets p { font-family: 'xarxa_3', helvetica, arial; font-size: 11px; line-height: 9px; color: rgb(255,255,255); text-transform: uppercase; } #area_content .pagehead .intro p { color: rgb(173,60,65); } #area_content .pagehead .bullets p { background: rgb(232,186,0); } /* #area_content .pagehead[color="blue"] .intro p { color: rgb(33,187,239); } #area_content .pagehead[color="blue"] .bullets p { background: rgb(33,187,239); } #area_content .pagehead[color="orange"] .intro p { color: rgb(234,91,12); } #area_content .pagehead[color="green"] .intro p { color: rgb(47,180,188); } #area_content .pagehead[color="yellow"] .intro p { color: rgb(247,168,39); } */ #area_content .content { padding: 0 0 60px 0; } #area_content .text { } /* text large */ #area_content .text.large { } #area_content.center .text.large { padding: 0 14% 0 14%; } #area_content.left .text.large { padding: 0 14% 0 0; } #area_content .text.large p { margin: 0 0 24px 0; font-size: 16px; line-height: 23px; letter-spacing: 0.1px; color: rgb(92,75,66); } #area_content .text.large p b { font-family: 'xarxa_3', helvetica, arial; } #area_content .text.large p a { text-decoration: underline; } #area_content .text.large h1 { margin: 0 0 4px 0; font-family: 'xarxa_3', helvetica, arial; font-size: 16px; line-height: 23px; letter-spacing: 0.1px; color: rgb(92,75,66); font-weight: normal; text-transform: uppercase; } #area_content .text.large h2 { margin: 0 0 4px 0; font-family: 'xarxa_2', helvetica, arial; font-size: 16px; line-height: 23px; letter-spacing: 0.1px; color: rgb(92,75,66); font-weight: normal; text-transform: uppercase; } #area_content .text.large h3 { margin: 0 0 4px 0; font-family: 'xarxa_3', helvetica, arial; font-size: 16px; line-height: 23px; letter-spacing: 0.1px; color: rgb(92,75,66); font-weight: normal; } #area_content .text.large img { max-width: 100%; } #area_content .text[color="orange"] h1 { color: rgb(234,91,12); } #area_content .text[color="green"] h1 { color: rgb(47,180,188); } #area_content.center .text.large ul, #area_content.center .text.large ol { margin: 10px 0 20px 0; padding: 0; } #area_content.center .text.large ul li, #area_content.center .text.large ol li { margin: 0; padding: 8px 10px 5px 10px; font-size: 14px; line-height: 21px; list-style: none; } #area_content.center .text.large ul li:nth-child(odd), #area_content.center .text.large ol li:nth-child(odd) { background: rgb(236,233,231); } #area_content.left .text.large ul, #area_content.left .text.large ol { margin: 10px 0 20px 0; padding: 0 0 0 30px; } #area_content.left .text.large ul li, #area_content.left .text.large ol li { margin: 0 0 4px 0; font-size: 14px; line-height: 21px; } #area_content .text.large ul li b, #area_content .text.large ol li b { font-family: 'xarxa_3', helvetica, arial; font-weight: normal; } #area_content .text.large p + ul, #area_content .text.large p + ol { margin-top: -18px !important; } /* text small */ #area_content .text.small { } #area_content.center .text.small { padding: 0 14% 0 14%; } #area_content.left .text.small { padding: 0 14% 0 0; } #area_content .text.small p { margin: 0 0 20px 0; font-size: 12px; line-height: 18px; color: rgb(92,75,66); } #area_content .text.small h1 { margin: 0 0 2px 0; font-family: 'xarxa_3', helvetica, arial; font-size: 12px; line-height: 18px; letter-spacing: 0.1px; color: rgb(92,75,66); font-weight: normal; text-transform: uppercase; } #area_content .text.small h2 { margin: 0 0 2px 0; font-family: 'xarxa_2', helvetica, arial; font-size: 12px; line-height: 18px; letter-spacing: 0.1px; color: rgb(92,75,66); font-weight: normal; text-transform: uppercase; } #area_content .text.small h3 { margin: 0 0 2px 0; font-family: 'xarxa_3', helvetica, arial; font-size: 12px; line-height: 18px; letter-spacing: 0.1px; color: rgb(92,75,66); font-weight: normal; } #area_content .text.small img { max-width: 100%; } #area_content.center .text.small ul, #area_content.center .text.small ol { margin: 6px 0 20px 0; padding: 0; } #area_content.center .text.small ul li, #area_content.center .text.small ol li { margin: 0; padding: 6px 8px 3px 8px; font-size: 12px; line-height: 18px; list-style: none; } #area_content.center .text.small ul li:nth-child(odd), #area_content.center .text.small ol li:nth-child(odd) { background: rgb(236,233,231); } #area_content.left .text.small ul, #area_content.left .text.small ol { margin: 10px 0 20px 0; padding: 0 0 0 30px; } #area_content.left .text.small ul li, #area_content.left .text.small ol li { margin: 0 0 4px 0; font-size: 12px; line-height: 18px; } #area_content .text.small ul li b, #area_content .text.small ol li b { font-family: 'xarxa_3', helvetica, arial; font-weight: normal; } #area_content .text.small p + ul, #area_content .text.small p + ol { margin-top: -18px !important; } /* fact */ #area_content .fact { margin: 60px 0 20px 0; padding: 34px 0 30px 0; border: 1px solid rgba(92,75,66,0.3); border-left: none; border-right: none; } #area_content .fact .wrapper { } #area_content .fact .wrapper .row { display: table; } #area_content .fact .wrapper .row p { padding: 8px 8px 8px 8px; font-size: 16px; line-height: 14px; letter-spacing: 0.1px; color: rgb(92,75,66); position: relative; top: 1px; float: left; } #area_content .fact .wrapper .row p b { padding: 0 8px 0 8px; font-family: 'xarxa_3', helvetica, arial; font-size: 12px; color: rgb(145,118,104); text-transform: uppercase; font-weight: normal; } #area_content .fact:nth-child(1) { margin: 16px 0 50px 0; } @media screen and (max-width: 500px) { #area_content .pagehead .photo { margin-top: -20px; } } @media screen and (max-width: 800px) { #area_content .section .width { padding: 0 8% 0 8%; } #area_content .section .description { padding: 0; } #area_content .fact .wrapper { width: auto; } #area_content .fact .wrapper .row { display: block; } #area_content .fact .wrapper .row p { float: none; } } @media screen and (max-width: 500px) { #area_content .section .width { padding: 0 4% 0 4%; } #area_content .section a { padding: 40px 0 40px 0; } #area_content .section .description { padding: 0; } #area_content .pagehead .intro { padding: 0 0 30px 0 !important; } #area_content .pagehead .intro p { font-size: 33px; line-height: 37px; } #area_content .content { padding: 0 0 40px 0; } #area_content .text.large { padding: 0 !important; } } /* ############################################### STARTPAGE */ /* projects */ #startpage_projects { } #startpage_projects .projects { height: 300px; position: relative; } #startpage_projects .projects .project { width: 25%; height: 50%; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; position: relative; float: left; } #startpage_projects .projects .project a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; } #startpage_projects .projects .project a { transition: background 0.4s ease; -webkit-transition: background 0.4s ease; -moz-transition: background 0.4s ease; } #startpage_projects .projects .project a .arrow { width: 40px; height: 40px; border: 2px solid rgb(255,255,255); border-radius: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; display: none; } #startpage_projects .projects .project a .arrow { margin: -22px 0 0 -22px; position: absolute; top: 50%; left: 50%; background: url(../graphics/global/icons.png) 0 -40px no-repeat rgba(0,0,0,0.5); } #startpage_projects .projects .project a:hover { background: rgba(0,0,0,0.5); } #startpage_projects .projects .project a:hover .arrow { display: block; } #startpage_projects .projects .project:nth-child(1) { width: 50%; height: 100%; } #startpage_projects .projects .project:nth-child(1) a { border-right: 1px solid rgb(255,255,255); } #startpage_projects .projects .project:nth-child(2) a, #startpage_projects .projects .project:nth-child(3) a { border: 1px solid rgb(255,255,255); border-top: none; } #startpage_projects .projects .project:nth-child(4) a, #startpage_projects .projects .project:nth-child(5) a { border: 1px solid rgb(255,255,255); border-bottom: none; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #startpage_projects .projects .project a .arrow { background-size: auto 80px; } } /* bullets */ #startpage_bullets { margin: 60px 0 60px 0; background: rgb(236,233,231); } #startpage_bullets .bullet { width: 33%; float: left; } #startpage_bullets .bullet:nth-child(2) { width: 34%; } #startpage_bullets .bullet a { padding: 70px 0 70px 0; display: block; } #startpage_bullets .bullet a .icon { width: 100px; height: 100px; background: rgb(255,255,255); border-radius: 130px; -webkit-border-radius: 130px; -moz-border-radius: 130px; clear: both; } #startpage_bullets .bullet a .icon p { width: 100px; height: 100px; background: url(../graphics/startpage/bullets.png) no-repeat; } #startpage_bullets .bullet a .info { padding: 20px 0 0 0; } #startpage_bullets .bullet a .info .title { padding: 0 0 4px 0; } #startpage_bullets .bullet a .info .title p { font-family: 'xarxa_3', helvetica, arial; font-size: 14px; line-height: 20px; color: rgb(92,75,66); } #startpage_bullets .bullet a .info .description { padding: 0 6% 0 6%; } #startpage_bullets .bullet a .info .description p { font-size: 14px; line-height: 20px; letter-spacing: 0.1px; color: rgb(92,75,66); } #startpage_bullets .bullet a .info .button { margin: 20px 0 0 0; padding: 6px 12px 6px 12px; background: rgb(255,255,255); display: table; } #startpage_bullets .bullet a .info .button { box-shadow: 0px 1px 3px rgba(92,75,66,0.2); -webkit-box-shadow: 0px 1px 3px rgba(92,75,66,0.2); -moz-box-shadow: 0px 1px 3px rgba(92,75,66,0.2); } #startpage_bullets .bullet a .info .button { transition: background-color 0.4s ease; -webkit-transition: background-color 0.4s ease; -moz-transition: background-color 0.4s ease; } #startpage_bullets .bullet a .info .button p { padding: 3px 0 3px 0; font-family: 'xarxa_3', helvetica, arial; font-size: 11px; line-height: 9px; color: rgb(92,75,66); position: relative; top: 1.5px; text-transform: uppercase; letter-spacing: 0.5px; } #startpage_bullets .bullet a:hover .info .title p { text-decoration: underline; } #startpage_bullets .bullet a:hover .info .button { background: rgb(92,75,66); } #startpage_bullets .bullet a:hover .info .button p { color: rgb(255,255,255); } #startpage_bullets .bullet[bullet="beach"] a .icon { background: rgb(33,187,239); } #startpage_bullets .bullet[bullet="beach"] a .icon p { background-position: 0 -100px; } #startpage_bullets .bullet[bullet="beach"] a:hover .info .button { background: rgb(33,187,239); } #startpage_bullets .bullet[bullet="wallet"] a .icon { background: rgb(247,168,39); } #startpage_bullets .bullet[bullet="wallet"] a .icon p { background-position: -100px -100px; } #startpage_bullets .bullet[bullet="wallet"] a:hover .info .button { background: rgb(247,168,39); } #startpage_bullets .bullet[bullet="hand"] a .icon { background: rgb(234,91,12); } #startpage_bullets .bullet[bullet="hand"] a .icon p { background-position: -200px -100px; } #startpage_bullets .bullet[bullet="hand"] a:hover .info .button { background: rgb(234,91,12); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #startpage_bullets .bullet a .icon p { background-size: auto 200px; } } @media screen and (max-width: 800px) { #startpage_projects { } #startpage_projects .projects { height: 360px; } #startpage_projects .projects .project { width: 50%; height: 50% !important; } #startpage_projects .projects .project a { border: 1px solid rgb(255,255,255) !important; } #startpage_projects .projects .project:nth-child(1) a { border-left: none; border-top: none; } #startpage_projects .projects .project:nth-child(2) a { border-right: none; border-top: none; } #startpage_projects .projects .project:nth-child(3) a { border-left: none; border-bottom: none; } #startpage_projects .projects .project:nth-child(4) a { border-right: none; border-bottom: none; } #startpage_projects .projects .project:nth-child(5) { display: none; } /* bullets */ #startpage_bullets { padding: 20px 0 20px 0; } #startpage_bullets .bullet { width: auto; float: none; } #startpage_bullets .bullet:nth-child(2) { width: auto; } #startpage_bullets .bullet a { padding: 20px 4% 20px 4%; } #startpage_bullets .bullet a .icon { xfloat: left; } #startpage_bullets .bullet a .info { } #startpage_bullets .bullet a .info .description { padding: 0; } #startpage_bullets .bullet a .info .button { margin-top: 10px; } } @media screen and (max-width: 500px) { #startpage_projects { } #startpage_projects .projects { height: 240px; } /* bullets */ #startpage_bullets { margin: 26px 0 36px 0; } #startpage_bullets .bullet { } #startpage_bullets .bullet a { } #startpage_bullets .bullet a .icon { } #startpage_bullets .bullet a .info { } #startpage_bullets .bullet a .info .description { } #startpage_bullets .bullet a .info .button { } } /* ############################################### [AREA] EMPLOYEES */ #area_employees { background: rgb(236,233,231); } #area_employees .width { position: relative; } #area_employees ul { margin: 0; padding: 60px 0 0 0; } #area_employees ul li.post { width: 22%; height: 300px; margin: 2% 4% 2% 0; padding: 0; list-style: none; position: relative; float: left; } #area_employees ul li.post { background-size: cover; background-repeat: no-repeat; background-position: 50% 0%; } #area_employees ul li.post:nth-of-type(4n) { margin-right: 0; } #area_employees ul li.post a { width: 100%; height: 100%; display: block; } #area_employees ul li.post a { transition: background 0.4s ease; -webkit-transition: background 0.4s ease; -moz-transition: background 0.4s ease; } /* #area_employees ul li.post a .corner { width: 86px; height: 86px; position: absolute; top: -15px; left: -15px; background: url(../graphics/employees/corner.png) no-repeat; background-size: 86px auto; xdisplay: none; }*/ #area_employees ul li.post a .arrow { width: 40px; height: 40px; border: 2px solid rgb(255,255,255); border-radius: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; display: none; } #area_employees ul li.post a .arrow { margin: -22px 0 0 -22px; position: absolute; top: 40%; left: 50%; background: url(../graphics/global/icons.png) 0 -40px no-repeat rgba(0,0,0,0.5); } #area_employees ul li.post a .info { padding: 12px 10px 10px 10px; background: rgba(173,60,65,0.9); position: absolute; left: 0; right: 0; bottom: 0; } #area_employees ul li.post a .info .languages { position: absolute; top: -30px; left: 0; right: 0; display: none; } #area_employees ul li.post a .info .languages .content { display: table; } #area_employees ul li.post a .info .languages .content p { height: 16px; margin: 3px 3px 3px 3px; padding: 5px 8px 2px 8px; background: rgb(255,255,255); border-radius: 50px; float: left; } #area_employees ul li.post a .info .languages .content p { font-family: 'xarxa_3', helvetica, arial; font-size: 11px; line-height: 9px; color: rgb(43,43,43); text-transform: uppercase; } #area_employees ul li.post a .info .title { } #area_employees ul li.post a .info .title p { font-family: 'xarxa', georgia; font-size: 17px; line-height: 20px; color: rgb(255,255,255); } #area_employees ul li.post a .info .description { padding: 4px 0 0 0; } #area_employees ul li.post a .info .description p { font-family: 'xarxa_3', helvetica, arial; font-size: 12px; line-height: 15px; letter-spacing: 0.1px; color: rgba(255,255,255,0.7); text-transform: uppercase; } #area_employees ul li.post a:hover { background: rgba(0,0,0,0.5); } #area_employees ul li.post a:hover .arrow { display: block; } #area_employees ul li.post a:hover .info .languages { display: block; } /* #area_employees[color="blue"] ul li.post a .info { background: rgba(33,187,239,0.9); }*/ /* #area_employees ul.placeholder { width: 100%; margin: 0; padding: 0 0 2% 0; float: left; display: none; } #area_employees ul.placeholder li.placeholder { margin: 0; padding: 0; list-style: none; } #area_employee { position: absolute; z-index: 1; left: 0; right: 0; display: none; } #area_employee .arrow { width: 22%; height: 20px; background: url(../graphics/employees/arrow.png) no-repeat 50% 0; background-size: 46px auto; float: left; } #area_employee[column="2"] .arrow { margin-left: 26%; } #area_employee[column="3"] .arrow { margin-left: 52%; } #area_employee[column="4"] .arrow { margin-left: 78%; } #area_employee .content { background: rgba(87,75,67,0.8); } */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #area_employees ul li.post a .arrow { background-size: auto 80px; } } @media screen and (max-width: 1120px) { #area_employees ul { padding-left: 4%; padding-right: 4%; } #area_employee { left: 4%; right: 4%; } } @media screen and (max-width: 980px) { #area_employees ul { padding: 2% 4% 2% 4%; } #area_employees ul li.post { width: 30%; height: 300px; margin: 2% 5% 2% 0; } #area_employees ul li.post:nth-of-type(4n) { margin-right: 5%; } #area_employees ul li.post:nth-of-type(3n) { margin-right: 0; } #area_employee .arrow { width: 30%; } #area_employee[column="2"] .arrow { margin-left: 35%; } #area_employee[column="3"] .arrow { margin-left: 70%; } } @media screen and (max-width: 780px) { #area_employees ul { padding: 3% 6% 3% 6%; } #area_employees ul li.post { width: 47%; height: 300px; margin: 3% 6% 3% 0; } #area_employees ul li.post:nth-of-type(3n) { margin-right: 6%; } #area_employees ul li.post:nth-of-type(2n) { margin-right: 0; } #area_employee { left: 6%; right: 6%; } #area_employee .arrow { width: 47%; } #area_employee[column="2"] .arrow { margin-left: 53%; } } @media screen and (max-width: 500px) { #area_employees ul { padding: 1% 0 1% 0; xdisplay: table; } #area_employees ul li.post { width: 80%; margin: 10% 0 10% 0; float: none; clear: both; } #area_employees ul li.post:nth-of-type(3n) { margin-right: 0; } #area_employee { left: 10%; right: 10%; } #area_employee .arrow { width: 100%; } } /* ############################################### [AREA] VALUES */ #area_values { margin: 0 0 4% 0; } #area_values .width { } #area_values .width > .headline { padding: 0 0 14px 0; } #area_values .width > .headline p { padding: 4px 0 4px 0; font-family: 'xarxa_3', helvetica, arial; font-size: 10px; line-height: 10px; color: rgb(92,75,66); text-transform: uppercase; letter-spacing: 4px; } #area_values ul { margin: 0; padding: 0; } #area_values ul li { width: 48%; margin: 2% 4% 2% 0; padding: 0; background: rgb(236,233,231); list-style: none; position: relative; float: left; } #area_values ul li:nth-child(2n) { margin-right: 0; } #area_values ul li a { padding: 40px 0 40px 0; display: block; } #area_values ul li a .number { width: 50px; height: 58px; margin: 0 0 20px 0; background: url(../graphics/global/symbol.png) -50px -58px no-repeat; } #area_values ul li a .number p { padding: 20px 0 0 0; font-family: 'xarxa', helvetica, arial; font-size: 23px; line-height: 21px; color: rgb(255,255,255); } #area_values ul li a .headline { padding: 0 50px 0 50px; } #area_values ul li a .headline p { font-family: 'xarxa', georgia; font-size: 23px; line-height: 26px; color: rgb(92,75,66); } #area_values ul li a .description { padding: 22px 12% 0 12%; } #area_values ul li a .description p { font-family: 'xarxa_2', helvetica, arial; font-size: 14px; line-height: 20px; letter-spacing: 0.1px; color: rgb(92,75,66); } #area_values ul li a .button { margin: 16px 0 0 0; padding: 6px 12px 6px 12px; background: rgb(255,255,255); display: table; box-shadow: 0px 1px 3px rgba(92,75,66,0.2); } #area_values ul li a .button { transition: background-color 0.4s ease; -webkit-transition: background-color 0.4s ease; -moz-transition: background-color 0.4s ease; } #area_values ul li a .button p { padding: 3px 0 3px 0; font-family: 'xarxa_3', helvetica, arial; font-size: 11px; line-height: 9px; color: rgb(92,75,66); position: relative; top: 1.5px; text-transform: uppercase; letter-spacing: 0.5px; } #area_values ul li a:hover .headline p { text-decoration: underline; } #area_values ul li a:hover .button { background: rgb(92,75,66); } #area_values ul li a:hover .button p { color: rgb(255,255,255); } #area_values[color="yellow"] ul li a .number { background-color: rgb(247,168,39); } #area_values[color="orange"] ul li a .number { background-color: rgb(234,91,12); } #area_values[color="green"] ul li a .number { background-color: rgb(47,180,188); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #area_values ul li a .number { background-size: auto 116px; } } @media screen and (max-width: 1120px) { #area_values { margin: 0; } #area_values ul { } #area_values ul li { width: 49%; margin: 1% 2% 1% 0; } #area_values ul li:nth-child(2n) { margin-right: 0; } #area_values ul li:nth-child(4) { margin-bottom: 4%; } } @media screen and (max-width: 850px) { #area_values ul li { width: auto; margin: 0 0 4% 0; float: none; } #area_values ul li a { padding: 30px 0 30px 0; } #area_values ul li a .corner { display: none; } } /* ############################################### [AREA] WORK */ #area_work { } /* startpage */ #area_work.startpage { } #area_work.startpage .steps { } #area_work.startpage .steps .step { width: 32%; margin: 2% 2% 0 0; float: left; } #area_work.startpage .steps .step:nth-child(3n+3) { margin-right: 0; } #area_work.startpage .steps .step:nth-child(4) { clear: left; } #area_work.startpage .steps .step a { display: block; } #area_work.startpage .steps .step a .number { width: 60px; height: 120px; background: rgb(234,91,12); float: left; position: relative; } #area_work.startpage .steps .step a .number p { font-family: 'xarxa_2', helvetica, arial; font-size: 25px; line-height: 25px; xcolor: rgb(92,75,66); color: rgb(255,255,255); } #area_work.startpage .steps .step a .number p { position: absolute; left: 0; right: 0; bottom: 14px; } #area_work.startpage .steps .step a .image { height: 120px; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; border-left: 1px solid rgb(255,255,255); } #area_work.startpage .steps .step a .info { padding: 14px 10% 0 0; } #area_work.startpage .steps .step a .info p { font-size: 14px; line-height: 20px; letter-spacing: 0.1px; color: rgb(92,75,66); text-align: left; } #area_work.startpage .steps .step a .info p b { padding: 0 6px 0 0; font-family: 'xarxa_3', helvetica, arial; color: rgb(234,91,12); } #area_work.startpage .steps .step a:hover .info p, #area_work.startpage .steps .step a:hover .info p b { text-decoration: underline; } #area_work.startpage .steps .step:nth-child(6) a .number { background: rgb(236,233,231); } #area_work.startpage .steps .step:nth-child(6) a .number p { color: rgb(234,91,12); } /* workpage */ #area_work.workpage { } #area_work.workpage .image { height: 260px; margin: 0 0 10px 0; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } #area_work.workpage .steps { } #area_work.workpage .steps ul { margin: 0; padding: 0; } #area_work.workpage .steps ul li { margin: 0 0 10px 0; padding: 0; list-style: none; } #area_work.workpage .steps.float ul li { width: 32%; margin: 0 2% 2% 0; padding: 0; list-style: none; float: left; } #area_work.workpage .steps.float ul li:nth-child(3n) { margin-right: 0; } #area_work.workpage .steps ul li a { padding: 12px 18px 12px 0; background: rgb(236,233,231); position: relative; display: block; } #area_work.workpage .steps ul li a { transition: background 0.3s ease; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; } #area_work.workpage .steps ul li a p { padding: 4px 0 4px 0; font-family: 'xarxa_2', helvetica, arial; font-size: 13px; line-height: 11px; text-transform: uppercase; letter-spacing: 0.5px; position: relative; top: 1px; text-align: right; } #area_work.workpage .steps ul li a p { transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; } #area_work.workpage .steps ul li a .arrow { width: 10px; position: absolute; top: 0; bottom: 0; right: -10px; background: url(../graphics/work/steps_arrow.png) 0 50% no-repeat; background-size: 10px auto; } #area_work[color="orange"].workpage .steps ul li a.normal .step p { color: rgb(234,91,12); } #area_work[color="orange"].workpage .steps ul li a.normal:hover { background: rgb(234,91,12); } #area_work[color="orange"].workpage .steps ul li a.selected { background: rgb(234,91,12); } #area_work[color="orange"].workpage .steps ul li a .arrow { background-color: rgb(234,91,12); } #area_work.workpage .steps ul li a.normal p { color: rgb(92,75,66); } #area_work.workpage .steps ul li a.normal .arrow { display: none; } #area_work.workpage .steps ul li a.normal:hover .step p { color: rgba(255,255,255,0.5); } #area_work.workpage .steps ul li a.normal:hover .title p { color: rgba(255,255,255,1); } #area_work.workpage .steps ul li a.selected .step p { color: rgba(255,255,255,0.5); } #area_work.workpage .steps ul li a.selected .title p { color: rgba(255,255,255,1); } @media screen and (max-width: 800px) { #area_work.startpage .steps .step { width: 48%; margin: 4% 4% 0 0; } #area_work.startpage .steps .step:nth-child(3n+3) { margin-right: 4%; } #area_work.startpage .steps .step:nth-child(2n+2) { margin-right: 0; } #area_work.startpage .steps .step:nth-child(4) { clear: none; } #area_work.startpage .steps .step:nth-child(3), #area_work.startpage .steps .step:nth-child(5) { clear: left; } #area_work.startpage .steps .step a .info { padding: 14px 0 0 0; } } @media screen and (max-width: 500px) { #area_work.startpage .steps .step { width: 100%; margin: 4% 0 0 0; } #area_work.startpage .steps .step:nth-child(3n+3) { margin-right: 0; } #area_work.startpage .steps .step:nth-child(2n+2) { margin-right: 0; } #area_work.startpage .steps .step a .info { padding: 14px 0 10px 0; } } /* ############################################### [AREA] WORK BULLETS */ #area_work_bullets { padding: 0 0 60px 0; } #area_work_bullets .headline { padding: 0 0 30px 0; } #area_work_bullets .headline p { font-family: 'xarxa', georgia; font-size: 26px; line-height: 40px; text-align: center; } #area_work_bullets[color="orange"] .headline p { color: rgb(234,91,12); } #area_work_bullets .work_section { width: 30%; margin: 0 5% 0 0; float: left; } #area_work_bullets .work_section:nth-child(3) { margin-right: 0; float: right; } #area_work_bullets .work_section .text.small { padding: 0; } #area_work_bullets .work_section .text ul { padding: 0 !important; border-bottom: 1px solid rgba(0,0,0,0.2); } #area_work_bullets .work_section .text ul li { padding: 6px 0 0px 0; border-top: 1px solid rgba(0,0,0,0.2); list-style: none; } /* ############################################### [AREA] PROJECTS */ #area_projects { margin: 0 0 40px 0; } #area_projects .project { width: 48%; margin: 0 4% 4% 0; position: relative; float: left; } #area_projects .project { background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } #area_projects .project:nth-child(even) { margin-right: 0; } #area_projects .project a { height: 288px; display: block; } #area_projects .project a { transition: background 0.4s ease; -webkit-transition: background 0.4s ease; -moz-transition: background 0.4s ease; } #area_projects .project a .label { padding: 8px 14px 8px 8%; background: rgb(47,180,188); position: absolute; left: 0; bottom: 20%; } #area_projects .project:nth-child(even) a .label { padding-left: 14px; padding-right: 8%; left: auto; right: 0; } #area_projects .project a .label p { padding: 4px 0 4px 0; font-family: 'xarxa_3', helvetica, arial; font-size: 12px; line-height: 9px; position: relative; top: 2px; text-transform: uppercase; color: rgb(255,255,255); letter-spacing: 0.75px; } #area_projects .project a .icon { width: 40px; height: 40px; border: 2px solid rgb(255,255,255); border-radius: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; display: none; } #area_projects .project a .icon { margin: -22px 0 0 -22px; position: absolute; top: 50%; left: 50%; background: url(../graphics/global/icons.png) 0 -40px no-repeat rgba(0,0,0,0.5); } #area_projects .project a:hover { background: rgba(0,0,0,0.5); } #area_projects .project a:hover .icon { display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #area_projects .project a .icon { background-size: auto 80px; } } @media screen and (max-width: 1120px) { #area_projects { margin-bottom: 20px; } #area_projects .project { width: 49%; margin: 1% 2% 1% 0; } } @media screen and (max-width: 800px) { #area_projects { margin-bottom: 4%; } #area_projects .project { width: auto; margin: 0 0 4% 0; float: none; } #area_projects .project:nth-last-child(2) { margin-bottom: 0; } #area_projects .project a { padding: 30px 0 30px 0; } #area_projects .project a .corner { display: none; } } /* ############################################### [AREA] GALLERY */ #area_gallery { margin: 0 0 50px 0; background: rgb(43,43,43); } #area_gallery .top { padding: 2.8% 0 0 0; } #area_gallery .top .back { float: left; } #area_gallery .top .back a { display: block; } #area_gallery .top .back a p { padding: 4px 0 4px 0; font-family: 'xarxa_3', helvetica, arial; font-size: 10px; line-height: 8px; position: relative; top: -1px; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 1px; } #area_gallery .top .back a p { transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; } #area_gallery .top .back a:hover p { color: rgb(255,255,255); } #area_gallery .top .headline { float: right; } #area_gallery .top .headline p { padding: 4px 0 4px 0; font-family: 'xarxa_3', helvetica, arial; font-size: 10px; line-height: 8px; position: relative; top: -1px; color: rgb(255,255,255); text-transform: uppercase; letter-spacing: 1px; } #area_gallery .images { } #area_gallery .row { } #area_gallery .row:nth-child(1) { padding-top: 1%; } #area_gallery .row:nth-last-child(2) { padding-bottom: 1%; } #area_gallery .row .image { height: 370px; margin: 1% 2% 1% 0; position: relative; float: left; } /* #area_gallery .row .image { box-shadow: 0px 1px 4px rgb(0,0,0); -webkit-box-shadow: 0px 1px 4px rgb(0,0,0); -moz-box-shadow: 0px 1px 4px rgb(0,0,0); }*/ #area_gallery .row .image { background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } #area_gallery .row .image:nth-last-child(2) { margin-right: 0; } #area_gallery .row .image.narrow { width: 32%; } #area_gallery .row .image.wide { width: 66%; } /* #area_gallery .row .image .corner { width: 86px; height: 86px; position: absolute; top: -15px; left: -15px; background: url(../graphics/gallery/corner.png) no-repeat; background-size: 86px auto; }*/ @media screen and (max-width: 1120px) { #area_gallery .top { padding-left: 2%; padding-right: 2%; } #area_gallery .row { padding-left: 2%; padding-right: 2%; } #area_gallery .row .image .corner { display: none; } } @media screen and (max-width: 800px) { #area_gallery .row .image { height: 300px; } } @media screen and (max-width: 660px) { #area_gallery .row .image { height: 200px; } } @media screen and (max-width: 500px) { #area_gallery { margin-bottom: 30px; } #area_gallery .row { width: 100%; display: table; } #area_gallery .row .image { margin: 0 0 2% 0; box-shadow: none; float: none; } #area_gallery .row .image.narrow { width: auto; height: 300px; } #area_gallery .row .image.wide { width: auto; height: 180px; } #area_gallery .row:nth-child(1) { padding-top: 2%; } #area_gallery .row:nth-last-child(2) { padding-bottom: 0; } } /* ############################################### [AREA] WEATHER */ #area_weather { padding: 20px 0 60px 0; } #area_weather ul { margin: 0; padding: 0; text-align: left; } #area_weather ul li { width: 22%; margin: 0 4% 0 0; padding: 0; list-style: none; border-top: 2px solid; background: rgb(236,233,231); position: relative; float: left; } #area_weather ul li:nth-child(4) { margin-right: 0; } #area_weather ul li .season { padding: 14px 0 20px 16px; } #area_weather ul li .season p { font-size: 17px; } #area_weather ul li .weather { padding: 0 0 10px 16px; } #area_weather ul li .weather .title { } #area_weather ul li .weather .title p { font-family: 'xarxa_3', helvetica, arial; font-size: 10px; line-height: 20px; text-transform: uppercase; letter-spacing: 0.5px; } #area_weather ul li .weather .description { } #area_weather ul li .weather .description p { font-size: 17px; } #area_weather[color="orange"] ul li { border-color: rgb(230,92,33); } #area_weather[color="orange"] ul li .weather .description p { color: rgb(230,92,33); } @media screen and (max-width: 800px) { #area_weather ul li { width: 48%; margin: 0 4% 4% 0; } #area_weather ul li:nth-child(2) { margin-right: 0; } #area_weather ul li:nth-child(3), #area_weather ul li:nth-child(4) { margin-bottom: 0; } } @media screen and (max-width: 600px) { #area_weather { padding: 10px 0 40px 0; } } /* ############################################### [AREA] PROPERTIES */ #area_properties { padding: 20px 0 20px 0; } #area_properties ul { margin: 0; padding: 0; } #area_properties ul li { width: 48%; margin: 0 4% 0 0; padding: 0; list-style: none; position: relative; float: left; } #area_properties ul li:nth-child(2) { margin-right: 0; } #area_properties ul li a { padding: 30px 0 30px 0; background: rgb(236,233,231); display: block; } #area_properties ul li a .info { } #area_properties ul li a .info .title { padding: 0 0 10px 0; } #area_properties ul li a .info .title p { font-family: 'xarxa', georgia; font-size: 23px; line-height: 25px; } #area_properties ul li a .info .description { } #area_properties ul li a .info .description p { font-size: 14px; line-height: 20px; letter-spacing: 0.1px; } #area_properties ul li a .info .button { margin: 16px 0 0 0; padding: 6px 12px 6px 12px; background: rgb(255,255,255); display: table; box-shadow: 0px 1px 3px rgba(92,75,66,0.2); } #area_properties ul li a .info .button { transition: background 0.4s ease; -webkit-transition: background 0.4s ease; -moz-transition: background 0.4s ease; } #area_properties ul li a .info .button p { padding: 3px 0 3px 0; font-family: 'xarxa_3', helvetica, arial; font-size: 11px; line-height: 9px; color: rgb(92,75,66); position: relative; top: 1.5px; text-transform: uppercase; letter-spacing: 0.5px; } #area_properties[color="orange"] ul li a .info .title p { color: rgb(230,92,33); } #area_properties[color="orange"] ul li a:hover .info .button { background: rgb(230,92,33); } #area_properties[color="orange"] ul li a:hover .info .button p { color: rgb(255,255,255); } @media screen and (max-width: 800px) { #area_properties ul li { width: auto; margin: 0; float: none; } #area_properties ul li:nth-child(1) { margin-bottom: 4%; } } /* ############################################### [AREA] HOUSES */ #area_houses { padding: 20px 0 0 0; background: rgb(236,233,231); } #area_houses .width { position: relative; } #area_houses .width > .headline { padding: 30px 0 0 0; } #area_houses .width > .headline p { padding: 4px 0 4px 0; font-family: 'xarxa_3', helvetica, arial; font-size: 10px; line-height: 10px; color: rgb(92,75,66); text-transform: uppercase; letter-spacing: 4px; } #area_houses ul { margin: 0; padding: 30px 0 20px 0; } #area_houses ul li { width: 32%; margin: 0 2% 2% 0; padding: 0; list-style: none; position: relative; float: left; } #area_houses ul li { background-size: cover; background-repeat: no-repeat; background-position: 50% 0%; } #area_houses ul li:nth-of-type(3n) { margin-right: 0; } #area_houses ul li a { padding: 10px; background: rgb(255,255,255); box-shadow: 0px 1px 4px rgba(0,0,0,0.1); -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.1); -moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.1); display: block; } #area_houses ul li a .corner { display: none; } #area_houses ul li a .image { height: 200px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; position: relative; } #area_houses ul li a .image .arrow { width: 40px; height: 40px; border: 2px solid rgb(255,255,255); border-radius: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; display: none; } #area_houses ul li a .image .arrow { margin: -22px 0 0 -22px; position: absolute; z-index: 1; top: 50%; left: 50%; background: url(../graphics/global/icons.png) 0 -40px no-repeat rgba(0,0,0,0.5); } #area_houses ul li a .image .filter { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #area_houses ul li a .image .filter { transition: background 0.4s ease; -webkit-transition: background 0.4s ease; -moz-transition: background 0.4s ease; } #area_houses ul li a .info { padding: 11px 0 0 0; } #area_houses ul li a .info .title { } #area_houses ul li a .info .title p { padding: 4px 0 4px 0; font-size: 15px; line-height: 13px; position: relative; top: 1px; } #area_houses ul li a .info .description { } #area_houses ul li a .info .description p { padding: 4px 0 4px 0; font-family: 'xarxa_3', helvetica, arial; font-size: 10px; line-height: 8px; position: relative; top: 1px; text-transform: uppercase; color: rgb(128,115,108); letter-spacing: 0.5px; } #area_houses ul li a:hover .image .arrow { display: block; } #area_houses ul li a:hover .image .filter { background: rgba(0,0,0,0.5); } #area_houses[color="orange"] ul li a .info .title p { color: rgb(230,92,33); } #area_houses[color="blue"] ul li a .info .title p { color: rgb(33,187,239); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #area_houses ul li a .image .arrow { background-size: auto 80px; } } @media screen and (max-width: 1120px) { #area_houses { left: 4%; right: 4%; } #area_houses ul { padding-left: 4%; padding-right: 4%; } } @media screen and (max-width: 800px) { #area_houses { margin-top: -30px; } #area_houses ul li { width: 49%; } #area_houses ul li:nth-of-type(3n) { margin-right: 2%; } #area_houses ul li:nth-of-type(2n) { margin-right: 0; } } @media screen and (max-width: 500px) { #area_houses ul li { width: auto; margin: 0 0 4% 0; float: none; } #area_houses ul li:nth-of-type(3n) { margin-right: 0; } } /* ############################################### [AREA] FORM */ #area_form { padding: 30px 20% 16px 20%; } #area_form .field { padding: 0 0 14px 0; } #area_form .field .label { padding: 0 0 4px 0; } #area_form .field .label p { padding: 4px 0 4px 0; font-size: 12px; line-height: 9px; position: relative; top: 1px; text-transform: uppercase; letter-spacing: 1px; } #area_form .field .input { } #area_form .field .input input { width: 100%; height: 24px; padding: 2px 26px 0 26px; background: rgb(236,233,231); xbackground: url(../graphics/form/input_low.png) -34px -34px no-repeat rgb(236,233,231); border: none; border-radius: 4px; font-family: 'xarxa_3', helvetica, arial; font-size: 12px; text-align: center; } #area_form .field .input input:focus { outline: none; } #area_form .field .input input[validate="false"] { background-position: -34px -68px; } #area_form .field .input input[validate="true"] { background-position: -34px -102px; } #area_form .field .input textarea { width: 100%; padding: 11px 11px 11px 11px; background: rgb(236,233,231); border: none; border-radius: 4px; font-family: 'xarxa_3', helvetica, arial; font-size: 12px; line-height: 18px; text-align: center; resize: vertical; } #area_form .field .input textarea:focus { outline: none; } #area_form .legal { padding: 10px 0 24px 0; display: table; } #area_form .legal .icon { margin: 0 10px 0 0; float: left; } #area_form .legal .icon a { border: 1px solid rgb(92,75,66); border-radius: 24px; -webkit-border-radius: 24px; -moz-border-radius: 24px; display: block; } #area_form .legal .icon a p { width: 24px; height: 24px; } #area_form .legal .info { padding: 7px 0 0 0; overflow: hidden; } #area_form .legal .info p { font-size: 14px; line-height: 16px; text-align: left; } #area_form .legal .info p a { text-decoration: underline; color: rgb(92,75,66); } #area_form .legal .icon a.selected { background: rgb(255,255,255); } #area_form .legal .icon a.selected p { background: url(../graphics/form/icons.png) 0 -24px no-repeat; } #area_form .buttons { padding-top: 24px; } #area_form .note { padding-top: 24px; } #area_form .note p { font-size: 12px; } #area_form .confirmation { padding: 0 0 40px 0; } #area_form .confirmation .title { } #area_form .confirmation .title p { font-family: 'xarxa', georgia; font-size: 20px; } #area_form .confirmation .description { padding: 8px 0 0 0; } #area_form .confirmation .description p { font-size: 14px; } /* questionnaire */ body.questionnaire #area_form { padding-top: 0; padding-bottom: 0; } body.questionnaire #area_form .field .input input { background-color: rgb(255,255,255); } body.questionnaire #area_form .field .input input { box-shadow: 0px 1px 2px rgba(0,0,0,0.1); -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.1); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.1); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #area_form .field .input input { xbackground-image: url(../graphics/form/input_high.png); xbackground-size: 68px auto; } #area_form .legal .icon a.selected p { background-size: auto 48px; } } @media screen and (max-width: 500px) { #area_form { padding-left: 4%; padding-right: 4%; } } /* ############################################### [AREA] QUESTIONNAIRE */ #area_questionnaire { padding: 0 0 50px 0; overflow: hidden; } #area_questionnaire .width { position: relative; } #area_questionnaire > .width > .holder { display: none; } #area_questionnaire #area_holder .spin { margin: -60px 0 0 -25px; position: absolute; top: 50%; left: 50%; display: none; } #area_questionnaire .dots { padding: 0 0 18px 0; display: table; } #area_questionnaire .dots .dot { width: 10px; height: 10px; margin: 0 2px 0 2px; border: 1px solid rgba(92,75,66,0.5); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; float: left; } #area_questionnaire .dots .dot p { width: 6px; height: 6px; margin: 1px 0 0 0; background: rgb(236,233,231); border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; } #area_questionnaire .dots .dot p { transition: background 0.4s ease; -webkit-transition: background 0.4s ease; -moz-transition: background 0.4s ease; } #area_questionnaire .dots .dot.selected { background: rgb(255,255,255); } #area_questionnaire .dots .dot.selected p { background: rgb(92,75,66); } #area_questionnaire #area_question { xdisplay: none; } #area_questionnaire #area_question.float { position: absolute; left: 0; right: 0; } #area_questionnaire #area_question .question { padding: 0 5% 40px 5%; } #area_questionnaire #area_question .question p { font-family: 'xarxa', georgia; font-size: 37px; line-height: 41px; color: rgb(92,75,66); } #area_questionnaire #area_question .question[color="orange"] p { color: rgb(234,91,12); } #area_questionnaire #area_question .question[color="blue"] p { color: rgb(33,187,239); } #area_questionnaire #area_question .question[color="green"] p { color: rgb(47,180,188); } #area_questionnaire #area_question .text { padding: 0 14% 20px 14%; } #area_questionnaire #area_question .text p { font-family: 'xarxa_2', georgia; margin: 0 0 20px 0; font-size: 16px; line-height: 23px; letter-spacing: 0.1px; color: rgb(92,75,66); } #area_questionnaire .options { padding: 20px 0 40px 0; } #area_questionnaire .options .option { position: relative; float: left; } #area_questionnaire .options[options="2"] .option { width: 48%; margin: 0 4% 0 0; } #area_questionnaire .options[options="2"] .option:nth-child(2) { margin-right: 0; } #area_questionnaire .options .option a { padding: 0 10px 10px 10px; background: rgb(255,255,255); display: block; } #area_questionnaire .options .option a { box-shadow: 0px 2px 6px rgba(0,0,0,0.1); -webkit-box-shadow: 0px 2px 6px rgba(0,0,0,0.1); -moz-box-shadow: 0px 2px 6px rgba(0,0,0,0.1); } /* #area_questionnaire .options .option a .top { border: 1px solid rgb(92,75,66); border-top-left-radius: 8px; border-top-right-radius: 8px; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; }*/ /* #area_questionnaire .options .option a .top .icon { margin: -14px 0 0 -12px; background: rgb(236,233,231); border: 1px solid rgb(92,75,66); border-radius: 24px; -webkit-border-radius: 24px; -moz-border-radius: 24px; position: absolute; left: 50%; }*/ #area_questionnaire .options .option a .top .icon { margin: -14px 0 0 -12px; background: rgb(255,255,255); border-radius: 24px; -webkit-border-radius: 24px; -moz-border-radius: 24px; position: absolute; left: 50%; box-shadow: 0px 1px 4px rgba(0,0,0,0.4); -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.4); -moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.4); display: none; } #area_questionnaire .options .option a .top .icon p { width: 24px; height: 24px; } #area_questionnaire .options .option a .top .title { padding: 18px 0 16px 0; } #area_questionnaire .options .option a .top .title p { padding: 4px 0 4px 0; font-size: 15px; line-height: 13px; color: rgb(92,75,66); text-transform: uppercase; letter-spacing: 0.5px; position: relative; top: 1px; } #area_questionnaire .options .option a .image { overflow: hidden; } #area_questionnaire .options .option a .image .holder { height: 300px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } #area_questionnaire .options .option a .image .holder { transition: transform 1.5s ease; -webkit-transition: transform 1.5s ease; -moz-transition: transform 1.5s ease; } #area_questionnaire .options .option a .description { padding: 20px 10% 0 10%; display: none; } #area_questionnaire .options .option a .description p { font-family: 'xarxa_2', helvetica, arial; font-size: 13px; line-height: 17px; color: rgb(92,75,66); } #area_questionnaire .options .option a.normal:hover .image .holder { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); } #area_questionnaire .options .option a.selected .top { background: rgb(255,255,255); } #area_questionnaire .options .option a.selected .top .icon { display: block; } #area_questionnaire .options .option a.selected .top .icon p { background: url(../graphics/questionnaire/icons.png) 0 -24px no-repeat; } #area_questionnaire .options .option a.selected:hover .image .holder { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); } #area_questionnaire .options .option a.disabled .image .holder { filter: grayscale(100%); -webkit-filter: grayscale(100%); opacity: 0.7; -moz-opacity: 0.7; } #area_questionnaire .options .option a.disabled .top .title p { color: rgba(92,75,66,0.5); } /* #area_questionnaire .form { padding: 0 20% 16px 20%; } #area_questionnaire .form .field { padding: 0 0 24px 0; } #area_questionnaire .form .field .label { padding: 0 0 6px 0; } #area_questionnaire .form .field .label p { padding: 4px 0 4px 0; font-size: 12px; line-height: 9px; position: relative; top: 1px; text-transform: uppercase; letter-spacing: 1px; } #area_questionnaire .form .field .input { } #area_questionnaire .form .field .input input { width: 100%; height: 34px; padding: 2px 36px 0 36px; background: url(../graphics/questionnaire/input_low.png) -34px -34px no-repeat rgb(255,255,255); border: none; border-radius: 4px; font-family: 'xarxa_3', helvetica, arial; font-size: 14px; text-align: center; } #area_questionnaire .form .field .input input { box-shadow: 0px 1px 2px rgba(0,0,0,0.1); -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.1); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.1); } #area_questionnaire .form .field .input input:focus { outline: none; } #area_questionnaire .form .field .input input[validate="false"] { background-position: -34px -68px; } #area_questionnaire .form .field .input input[validate="true"] { background-position: -34px -102px; } #area_questionnaire .form .legal { padding: 10px 0 24px 0; display: table; } #area_questionnaire .form .legal .icon { margin: 0 10px 0 0; float: left; } #area_questionnaire .form .legal .icon a { border: 1px solid rgb(92,75,66); border-radius: 24px; -webkit-border-radius: 24px; -moz-border-radius: 24px; display: block; } #area_questionnaire .form .legal .icon a p { width: 24px; height: 24px; } #area_questionnaire .form .legal .info { padding: 7px 0 0 0; overflow: hidden; } #area_questionnaire .form .legal .info p { font-size: 14px; line-height: 16px; text-align: left; } #area_questionnaire .form .legal .info p a { text-decoration: underline; color: rgb(92,75,66); } #area_questionnaire .form .legal .icon a.selected { background: rgb(255,255,255); } #area_questionnaire .form .legal .icon a.selected p { background: url(../graphics/questionnaire/icons.png) 0 -24px no-repeat; } */ #area_questionnaire .buttons { padding: 20px 0 20px 0; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #area_questionnaire .options .option a.selected .top .icon p { background-size: auto 48px; } #area_questionnaire .form .field .input input { background-image: url(../graphics/questionnaire/input_high.png); background-size: 68px auto; } #area_questionnaire .form .legal .icon a.selected p { background-size: auto 48px; } } @media screen and (max-height: 800px) { #area_questionnaire { margin-top: -10px; } #area_questionnaire > .width > .line { display: none; } #area_questionnaire .options { padding-top: 10px; padding-bottom: 2%; } #area_questionnaire .options[options="2"] .option { width: 49%; margin: 0 2% 0 0; } /* #area_questionnaire .options .option a { padding: 0 20px 20px 20px; }*/ #area_questionnaire .options .option a .image .holder { height: 270px; } #area_questionnaire .buttons { padding-top: 0; } } @media screen and (max-width: 1120px) { #area_questionnaire { padding-left: 20px; padding-right: 20px; } } @media screen and (max-width: 800px) { #area_questionnaire { padding-left: 0px; padding-right: 0px; } #area_questionnaire #area_question .question p { font-size: 28px; line-height: 32px; } #area_questionnaire .options .option a .image .holder { height: 200px; } } @media screen and (max-width: 700px) { #area_questionnaire #area_question .question { padding: 0 2% 40px 2%; } #area_questionnaire .options { padding: 0; } #area_questionnaire .options .option { float: none; } #area_questionnaire .options[options="2"] .option { width: auto; margin: 0 0 8% 0; } #area_questionnaire .options .option a .image .holder { height: 220px; } } @media screen and (max-width: 500px) { #area_questionnaire #area_question .question p { font-size: 24px; line-height: 28px; } #area_questionnaire #area_question .text { padding: 0 !important; } #area_questionnaire .options .option a .image .holder { height: 200px; } #area_questionnaire .form { padding-left: 4%; padding-right: 4%; } } /* ############################################### [AREA] BLOG */ #area_blog { background: rgb(236,233,231); } #area_blog .width { } #area_blog ul.storage { display: none; } #area_blog ul.filter { margin: 2% 0 -2% 0; padding: 0; display: block; float: right; } #area_blog ul.filter li { margin: 0 0 0 2px; padding: 0; list-style: none; float: left; } #area_blog ul.filter li a { padding: 3px 9px 3px 9px; display: block; } #area_blog ul.filter li a { transition: background 0.4s ease; -webkit-transition: background 0.4s ease; -moz-transition: background 0.4s ease; } #area_blog ul.filter li a p { padding: 3px 0 3px 0; font-size: 13px; line-height: 11px; color: rgba(92,75,66,0.7); text-transform: uppercase; letter-spacing: 0.5px; position: relative; top: 1px; } #area_blog ul.filter li a.normal:hover { background: rgba(92,75,66,0.4); } #area_blog ul.filter li a.normal:hover p { color: rgb(255,255,255); } #area_blog ul.filter li a.selected { background: rgba(92,75,66,0.4); } #area_blog ul.filter li a.selected p { color: rgb(255,255,255); } #area_blog ul.left, #area_blog ul.right { width: 48%; margin: 0; padding: 4% 0 0 0; float: left; } #area_blog ul.right { float: right; } #area_blog ul.items li { margin: 0 0 8% 0; padding: 0; list-style: none; } #area_blog ul.items li a { padding: 10px; background: rgb(255,255,255); box-shadow: 0px 1px 4px rgba(0,0,0,0.1); -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.1); -moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.1); display: block; } #area_blog ul.items li a .corner { display: none; } #area_blog ul.items li a .image { margin: 0 0 10px 0; } #area_blog ul.items li a .image img { width: 100%; display: block; } /* #area_blog ul li a .image .arrow { width: 40px; height: 40px; border: 2px solid rgb(255,255,255); border-radius: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; display: none; } #area_blog ul li a .image .arrow { margin: -22px 0 0 -22px; position: absolute; z-index: 1; top: 50%; left: 50%; background: url(../graphics/global/icons.png) 0 -40px no-repeat rgba(0,0,0,0.5); } #area_blog ul li a .image .filter { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #area_blog ul li a .image .filter { transition: background 0.4s ease; -webkit-transition: background 0.4s ease; -moz-transition: background 0.4s ease; } */ #area_blog ul.items li a .info { padding: 14px 10px 10px 10px; text-align: left; } #area_blog ul.items li a .info .title { padding: 0 0 18px 0; } #area_blog ul.items li a .info .title p { font-family: 'xarxa', georgia; font-size: 23px; line-height: 26px; } #area_blog ul.items li a .info .description { } #area_blog ul.items li a .info .description p { font-family: 'xarxa_2', helvetica, arial; font-size: 14px; line-height: 18px; color: rgb(128,115,108); letter-spacing: 0.1px; } #area_blog ul.items li a .info .readmore { padding: 10px 0 0 0; } #area_blog ul.items li a .info .readmore p { padding: 4px 0 4px 0; font-family: 'xarxa_3', helvetica, arial; font-size: 10px; line-height: 8px; position: relative; top: 1px; text-transform: uppercase; color: rgb(128, 115, 108); letter-spacing: 0.5px; } #area_blog ul.items li a:hover .info .title p, #area_blog ul.items li a:hover .info .readmore p { text-decoration: underline; } /* #area_blog ul li a:hover .image .arrow { display: block; } #area_blog ul li a:hover .image .filter { background: rgba(0,0,0,0.5); } #area_blog[color="orange"] ul li a .info .title p { color: rgb(230,92,33); } #area_blog[color="blue"] ul li a .info .title p { color: rgb(33,187,239); } */ #area_blog ul.items.left li:nth-child(4n+1) a .info .title p { color: rgb(230,92,33); } /* orange */ #area_blog ul.items.left li:nth-child(4n+2) a .info .title p { color: rgb(33,187,239); } /* blue */ #area_blog ul.items.left li:nth-child(4n+3) a .info .title p { color: rgb(247,168,39); } /* yellow */ #area_blog ul.items.left li:nth-child(4n+4) a .info .title p { color: rgb(47,180,188); } /* green */ #area_blog ul.items.right li:nth-child(4n+4) a .info .title p { color: rgb(230,92,33); } /* orange */ #area_blog ul.items.right li:nth-child(4n+3) a .info .title p { color: rgb(33,187,239); } /* blue */ #area_blog ul.items.right li:nth-child(4n+2) a .info .title p { color: rgb(247,168,39); } /* yellow */ #area_blog ul.items.right li:nth-child(4n+1) a .info .title p { color: rgb(47,180,188); } /* green */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { } @media screen and (max-width: 1120px) { #area_blog ul.filter { padding-left: 4%; padding-right: 4%; } #area_blog ul.items.left { padding-left: 4%; } #area_blog ul.items.right { padding-right: 4%; } } @media screen and (max-width: 800px) { #area_blog ul.filter { margin: 4% 0 0 0; } } @media screen and (max-width: 500px) { #area_blog ul.right { display: none; } #area_blog ul.left { width: auto; padding: 4% 4% 0 4%; float: none; display: table; } #area_blog ul li { margin-bottom: 4%; } } /* ############################################### [AREA] EMPLOYEES (polygons) */ /* #area_employees { background: rgb(234,91,12); } #area_employees .width { padding: 40px 0 37px 0; } #area_employees ul { margin: 0; padding: 54px 0 0 0; display: table; } #area_employees ul li.post { width: 190px; height: 220px; margin: -53px 3px 3px 3px; padding: 0; list-style: none; position: relative; float: left; } #area_employees ul li.post { -webkit-clip-path: polygon(0% 25%, 50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); overflow: hidden; } #area_employees ul li.post:nth-child(9n+6) { margin-left: 101px; clear: left; } #area_employees ul li.post:nth-child(9n+1) { clear: left; } #area_employees ul li.post a { display: block; } #area_employees ul li.post a .image { } #area_employees ul li.post a .image img { width: 100%; height: auto; display: block; } #area_employees ul li.post a .image img { filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); } #area_employees ul li.post a .more { background: rgba(0,0,0,0.7); position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: none; } #area_employees ul li.post a .more .close { margin: 24px 0 0 0; } #area_employees ul li.post a .more .info { padding: 0 10px 0 10px; position: absolute; top: 50%; left: 0; right: 0; } #area_employees ul li.post a .more .info .title { } #area_employees ul li.post a .more .info .title p { font-family: 'xarxa', georgia; font-size: 17px; line-height: 20px; color: rgb(255,255,255); } #area_employees ul li.post a .more .info .description { padding: 2px 0 0 0; } #area_employees ul li.post a .more .info .description p { padding: 4px 0 4px 0; font-family: 'xarxa_3', helvetica, arial; font-size: 12px; line-height: 15px; letter-spacing: 0.1px; color: rgb(255,255,255); text-transform: uppercase; } #area_employees ul li.post a.normal:hover .image img { filter: grayscale(0); -webkit-filter: grayscale(0); -moz-filter: grayscale(0); } #area_employees ul li.post a.selected .more { display: block; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #area_employees ul li.post .image .frame { background-size: 190px auto; } } @media screen and (max-width: 1120px) { #area_employees ul li.post:nth-child(9n+6) { margin-left: 3px; clear: none; } #area_employees ul li.post:nth-child(9n+1) { clear: none; } #area_employees ul li.post:nth-child(7n+5) { margin-left: 101px; clear: left; } #area_employees ul li.post:nth-child(7n+1) { clear: left; } } @media screen and (max-width: 900px) { #area_employees ul li.post:nth-child(7n+5) { margin-left: 3px; clear: none; } #area_employees ul li.post:nth-child(7n+1) { clear: none; } #area_employees ul li.post:nth-child(5n+4) { margin-left: 101px; clear: left; } #area_employees ul li.post:nth-child(5n+1) { clear: left; } } @media screen and (max-width: 800px) { #area_employees ul li.post:nth-child(5n+4) { margin-left: 3px; clear: none; } #area_employees ul li.post:nth-child(5n+1) { clear: none; } #area_employees ul li.post:nth-child(7n+5) { margin-left: 81px; clear: left; } #area_employees ul li.post:nth-child(7n+1) { clear: left; } #area_employees ul li.post { width: 150px; height: 174px; margin-top: -42px; } } @media screen and (max-width: 700px) { #area_employees ul li.post:nth-child(7n+5) { margin-left: 3px; clear: none; } #area_employees ul li.post:nth-child(7n+1) { clear: none; } #area_employees ul li.post { width: 190px; height: 220px; margin-top: -53px; xfloat: none; } #area_employees ul li.post:nth-child(even) { margin-left: 101px; clear: both; } #area_employees ul li.post:nth-child(odd) { clear: both; } } @media screen and (max-width: 350px) { #area_employees ul li.post { width: 150px; height: 174px; margin-top: -42px; } #area_employees ul li.post:nth-child(even) { margin-left: 81px; } }*/ /* ############################################### [AREA] FOOT */ #area_foot { padding: 60px 0 60px 0; background: rgb(236,233,231); } #area_foot .width { position: relative; } /* body.questionnaire #area_foot { box-shadow: 0px 2px 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.2); -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.2); }*/ #area_foot .column { width: 33%; float: left; } #area_foot .column2 { width: 34%; } #area_foot .logo { width: 92px; height: 84px; margin: -42px 0 0 0; position: absolute; top: 50%; left: 0px; } #area_foot .logo { background: url(../graphics/global/logo.png) -92px -84px no-repeat; } #area_foot .contact { } #area_foot .contact p { font-size: 14px; line-height: 20px; } #area_foot .contact p b { font-family: 'xarxa_3', helvetica, arial; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; } #area_foot .contact p a { color: rgb(92,75,66); } #area_foot .contact p a:hover { text-decoration: underline; } #area_foot .social { margin: -15px 0 0 0; position: absolute; top: 50%; right: 0; } #area_foot .social .icon { margin: 0 0 0 10px; float: left; } #area_foot .social .icon a { width: 30px; height: 30px; background: url(../graphics/foot/social.png) no-repeat rgba(92,75,66,0.5); border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; display: block; } #area_foot .social .icon a { transition: background-color 0.4s ease; -webkit-transition: background-color 0.4s ease; -moz-transition: background-color 0.4s ease; } #area_foot .social .icon a:hover { background-color: rgba(92,75,66,1); } #area_foot .social .icon a.facebook { background-position: 0 -30px; } #area_foot .social .icon a.twitter { background-position: -30px -30px; } #area_foot .social .icon a.pintrest { background-position: -60px -30px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #area_foot .logo { background-size: auto 168px; } #area_foot .social .icon a { background-size: auto 60px; } } @media screen and (max-width: 1120px) { body.questionnaire #area_foot { box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; } #area_foot .width { margin: 0 40px 0 40px; } } @media screen and (max-width: 800px) { #area_foot { padding: 40px 0 40px 0; } #area_foot .width { margin: 0; } #area_foot .column { width: auto; float: none; } #area_foot .column2 { width: auto; } #area_foot .logo { margin: 0 0 20px 0; position: static; } #area_foot .social { margin: 40px 0 0 0; position: static; display: table; } #area_foot .social .icon { margin: 0 5px 0 5px; } } /* ############################################### [AREA] LEGAL */ #area_legal { padding: 38px 0 38px 0; background: rgb(255,255,255); } #area_legal .width { } #area_legal .stamps { display: table; } #area_legal .stamps .stamp { margin: 0 24px 0 24px; height: 65px; float: left; } #area_legal .stamps .stamp img { height: 65px; display: block; } #area_legal .legal { padding: 16px 0 0 0; display: table; } #area_legal .legal p { padding: 6px 10px 6px 10px; font-size: 12px; line-height: 10px; position: relative; top: -1px; color: rgba(0,0,0,0.5); float: left; } #area_legal .legal p a { padding: 0 10px 0 10px; color: rgba(0,0,0,0.5); } #area_legal .legal p a:hover { text-decoration: underline; } @media screen and (max-width: 1200px) { #area_legal { margin-bottom: 20px; } } @media screen and (max-width: 800px) { #area_legal { margin-bottom: 4%; padding: 28px 0 28px 0; } #area_legal .stamps .stamp { float: none; } #area_legal .legal p { float: none; } }