/* Theme Name: Sirpa Pietikäinen Author: Mera Version: 1.015 */ /** * Table of Contents: * * 1.0 - Resets & global * 2.0 - Typography * 3.0 - Elements * 4.0 - Links * 5.0 - Menus * 6.0 - Images * 7.0 - Galleries * 8.0 - Form */ /** * 1.0 Resets & global */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lato:wght@400;700&family=Roboto+Condensed:wght@400;700&family=Roboto:ital,wght@0,400;0,700;1,400&display=swap'); /* Variables */ :root { /* Font Family */ --font-primary: 'Lato', sans-serif; --font-secondary: 'Roboto', sans-serif; --font-condensed: 'Roboto Condensed', sans-serif; --font-titles: 'Bebas Neue', sans-serif; /* Colors */ --color-blue-text: #445C73; --color-blue-bg: #566E85; --color-blue-border: #B8CBDC; --color-blue-medium: #CDDBE8; --color-blue-light: #ECF4FB; --color-blue-ultra-light: #F5FAFF; --color-red: #DE342B; --color-green-lime: #A5CE00; --color-green-wcag: #65A300; --color-grey-medium: #595959; } abbr,address,audio,b,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,figure,form,h1,h2,h3,h4,h5,h6,html,i,iframe,img,ins,kbd,label,legend,li,mark,object,ol,p,pre,q,samp,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}html{text-rendering:optimizeLegibility;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}strong{font-weight:700}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible;padding:0}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{white-space:normal}textarea{overflow:auto;vertical-align:top}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}input[type=text],input[type=email],input[type=submit],textarea{border-radius:0;-webkit-appearance:none;box-sizing:border-box;} body { background-color: #fff; color: #000; font: normal 16px/1 var(--font-primary); } .clear:after { content: ""; clear: both; display: table; } .visually-hidden { clip: rect(1px 1px 1px 1px); // IE 6 and 7 clip: rect(1px,1px,1px,1px); clip-path: polygon(0px 0px, 0px 0px, 0px 0px); -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px); height: 1px; overflow: hidden !important; position: absolute; width: 1px; } /** * 2.0 Typography */ h1, h2, h3, h4, h5, h6 { color: inherit; } h1 { font: normal 3.25rem/.93 var(--font-titles); margin-bottom: .2em; } @media screen and (min-width:600px) { h1 { font-size: 3.5rem; } } @media screen and (min-width:900px) { h1 { font-size: 4rem; } } @media screen and (min-width:1280px) { h1 { font-size: 5.75rem; } } h2 { font: bold 1.75rem/1.28 var(--font-condensed); text-transform: uppercase; margin-bottom: .65em; } @media screen and (min-width:600px) { h2 { font-size: 1.875rem; } } @media screen and (min-width:1000px) { h2 { font-size: 2rem; } } @media screen and (min-width:1280px) { h2 { font-size: 2.25rem; } } .section-header { font: normal 3.25rem/.88 var(--font-titles); letter-spacing: -.5px } @media screen and (min-width:850px) { .section-header { font-size: 4.5rem; } } @media screen and (min-width:1280px) { .section-header { font-size: 5.75rem; line-height: .93; } } .smaller-h2 { font: bold 1.625rem/1.5 'Lato', sans-serif; margin-bottom: 1em; text-transform: none; } h3 { font: bold 1.25rem/1.33 var(--font-primary); margin-bottom: 1.5rem; } h4, h5, h6 { font: bold 1.125rem/1.33 var(--font-primary); margin-bottom: 1.5rem; } p + h3, ul + h3, ol + h3, h2 + h3 { padding-top: 1.625rem; } .header-colors h1, .header-colors h2, .header-colors h3, .header-colors h4, .header-colors h5, .header-colors h6 { color: var(--color-blue-text); } .entry-content > h1:first-child, .entry-content > h2:first-child, .entry-content > h3:first-child, .entry-content > h4:first-child, .entry-content > h5:first-child, .entry-content > h6:first-child, .boxed > h1:first-child, .boxed > h2:first-child, .boxed > h3:first-child, .boxed > h4:first-child, .boxed > h5:first-child, .boxed > h6:first-child { margin-top: 0; padding-top: 0; } p { font-size: 1rem; line-height: 1.5; margin-bottom: 1.5em; } p.lead { font-size: 1.25em; font-weight: bold; } b, strong { font-weight: 700; } hr { clear: both; background-color: transparent; border: 0; border-top: 1px dashed #000; height: 1px; margin: 65px auto 50px; width: 100%; } .single-post blockquote { background: #65A300; border-radius: 24px; color: #fff; margin: 40px 0 68px 0; padding: 32px 40px 45px 70px; position: relative; } @media screen and (min-width:500px) { .single-post blockquote { margin: 40px 44px 68px 44px; } } .single-post blockquote:after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 0; border: 60px solid transparent; border-top-color: #65A300; border-bottom: 0; border-left: 0; margin-left: 0; margin-bottom: -30px; } .single-post blockquote p { font-size: 1.125rem; font-weight: 700; } .single-post blockquote p:before { color: #fff; content: '\201D'; display: block; font-size: 90px; font-weight: 700; float: left; margin-left: -47px; margin-top: -44px; } .single-post blockquote > p:last-child { margin-bottom: 0; } .entry-content ul, .entry-content ol { font-size: 1rem; line-height: 1.5; margin: 0 0 1.5em 40px; } .entry-content li > ul, .entry-content li > ol { font-size: inherit; margin: 0 0 0 25px; } .entry-content ul { list-style-type: disc; } .entry-content ol { list-style-type: decimal; } .all-center, .mobile-center { text-align: center; } @media screen and (min-width:850px) { .mobile-center { text-align: left; } } .no-margin { margin-bottom: 0; } /** * 3.0 Elements */ main.main-padded { padding-bottom: 100px; } .centered { margin: 0 auto; width: 92%; max-width: 1200px; } .single-col { max-width: 850px; margin: 0 auto; } section, aside { padding: 40px 0 30px; } @media screen and (min-width:768px) { section { padding: 60px 0 50px; } } @media screen and (min-width:1024px) { section { padding: 75px 0 60px; } } @media screen and (min-width:1280px) { section { padding: 100px 0 90px; } #themes section, #introduction section, #quotes section, #social-embeds section { padding: 75px 0 60px; } } .entry-content > p:last-child, .entry-content > ul:last-child { margin-bottom: 0; } .bg-light-blue { background: var(--color-blue-light); } #top-bar-container { box-shadow: 4px 4px 8px 0 rgb(0,0,0,.2); position: relative; z-index: 1; } #top-bar { background-color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 80px; overflow-x: hidden; } @media screen and (min-width: 1280px) { #top-bar { height: 160px; } } #logo { margin-top: -11px; min-width: 210px; padding-left: 4%; padding-right: 40px; } .text-logo a { font-family: var(--font-condensed); font-size: 27px; font-weight: bold; letter-spacing: -0.3px; line-height: 29px; position: relative; text-transform: uppercase; } .text-logo a span { font-family: var(--font-primary); font-size: 16px; font-weight: bold; letter-spacing: -0.2px; line-height: 16px; padding-left: 2px; text-transform: none; } #logo a { color: var(--color-blue-text); } #logo a span { color: var(--color-green-wcag); } #logo a:after { background: url('images/heart.gif') no-repeat; background-size: 27px 27px; content: ''; display: block; height: 27px; position: absolute; right: -24px; top: 9px; transform: rotate(-3deg); width: 27px; } @media screen and (min-width: 1280px) { .text-logo a { font-size: 34px; line-height: 36px; } .text-logo a span { font-size: 20px; line-height: 24px; } #logo a:after { background-size: 37px 37px; height: 37px; right: -32px; top: 13px; width: 37px; } } #home-hero-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin: 0 auto; width: 100%; max-width: 1200px; } #home-hero { background-position: 60% 100% !important; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 4%; } @media screen and (min-width: 480px) { #home-hero { background-position: center top !important; } } .hero-height { min-height: 272px; } #home-hero-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } #home-hero-text h1 { font-size: 3.75rem; line-height: .86; letter-spacing: -0.01px; margin-bottom: 0; text-shadow: 0 0 10px rgba(0,0,0,.45); } #home-hero-text p { margin: 7px 0 4px 5px; text-shadow: 0 0 10px rgba(0,0,0,.45); } #autograph { height: 60px; margin-left: -10px; width: 80px; } @media screen and (min-width: 400px) { #home-hero-text h1 { font-size: 4.375rem; } } @media screen and (min-width: 600px) { .hero-height { min-height: 400px; } #home-hero-text h1 { font-size: 6rem; } #home-hero-text p { font-size: 1.25rem; margin-bottom: 8px; margin-left: 10px; } #autograph { height: 75px; width: 100px; } } @media screen and (min-width: 850px) { .hero-height { min-height: 450px; } #home-hero-text h1 { font-size: 7rem; } #home-hero-text p { font-size: 1.375rem; margin-left: 13px; } #autograph { height: 97px; width: 130px; } } @media screen and (min-width: 1024px) { .hero-height { min-height: 500px; } #home-hero-text h1 { font-size: 8rem; } #home-hero-text p { font-size: 1.4375rem; margin-left: 15px; } } @media screen and (min-width: 1200px) { .hero-height { min-height: 550px; } #home-hero-text h1 { font-size: 9rem; } #home-hero-text p { font-size: 1.5rem; margin-bottom: 10px; margin-left: 17px; } #autograph { height: 120px; margin-left: -20px; width: 160px; } } @media screen and (min-width: 1400px) { .hero-height { min-height: 600px; } #home-hero-text h1 { font-size: 10.9375rem; line-height: .83; } #home-hero-text p { font-size: 1.625rem; margin-left: 19px; } #autograph { height: 145px; margin-left: -33px; width: 194px; } } @media screen and (min-width: 1600px) { .hero-height { min-height: 700px; } } @media screen and (min-width: 2000px) { .hero-height { min-height: 800px; } } @media screen and (min-width: 2500px) { .hero-height { min-height: 900px; } } #hero { background-color: var(--color-blue-bg); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } #hero-img { width: 100%; } #hero-header { box-sizing: border-box; color: #fff; padding: 50px 4%; text-align: center; text-shadow: 0 0 10px rgba(0,0,0,.45); width: 100%; } #hero-header .theme-icon { margin-top: 0; } @media screen and (min-width: 1280px) { #hero-header .theme-icon { margin-bottom: 38px; } } #hero-header p { font-size: 1.125rem; font-weight: 700; } @media screen and (min-width: 850px) { #hero { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } #hero-img, #hero-header { width: 50%; } #hero-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } #hero-basic { background-color: var(--color-blue-bg); border-bottom: 17px solid var(--color-blue-medium); color: #fff; padding: 64px 4% 50px; text-align: center; text-shadow: 0 0 10px rgba(0,0,0,.45); } #hero-basic h1 { margin-bottom: 0; } #primary-content { margin-bottom: 60px; } @media screen and (min-width: 850px) { #primary-content { float: left; margin-bottom: 0; margin-top: -8px; width: 47.5%; } #secondary-content { float: right; width: 47.5%; } } .half, .third { margin-bottom: 30px; } .last-col { margin-bottom: 0; } @media screen and (min-width:500px) { .half { float: left; margin-bottom: 0; width: 47%; } .half.last-col { float: right; } } @media screen and (min-width:850px) { .third { float: left; margin-bottom: 0; margin-right: 3.5%; width: 31%; } .last-col { margin-right: 0; } } /* Themes section */ #themes { background: var(--color-blue-medium) url('images/bg-themes.jpg') no-repeat center top; background-size: cover; text-align: center; } .home #themes { border-bottom: 1px solid var(--color-blue-border); } #themes .section-header { color: var(--color-blue-text); margin-top: -7px; margin-bottom: 50px; } #theme2 { margin: 50px 0 57px; } #theme3 { margin-bottom: 57px; } .theme { color: #fff; padding: 20px 20px 30px 20px; position: relative; text-shadow: 0 0 10px rgba(0,0,0,.45); } .theme-bg { background-blend-mode: luminosity, normal; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .25; } .theme-content { position: relative; } .theme-icon { background-color: #fff; border: 1px solid #F7F7F7; border-radius: 50%; box-shadow: 4px 4px 12px rgba(0,0,0,.25); height: 96px; line-height: 92px; margin: -46px auto 27px; width: 96px; } .theme-icon img { height: auto; width: 45px; } .theme-content h3 { font-family: var(--font-condensed); font-size: 2rem; font-weight: 400; line-height: 1.06; margin-bottom: 10px; letter-spacing: -.5px; text-transform: uppercase; } .theme-content p { font-size: 1.125rem; font-weight: 700; } .entry-content .theme .button-link a { border: 3px solid #fff !important; color: #000; display: block; font-weight: 700; margin: 0; text-shadow: none; } .entry-content .theme .button-link a:hover, .entry-content .theme .button-link a:active { background: #fff; border: 3px solid #fff !important; color: #000; box-shadow: 0 0 10px rgba(0,0,0,.45); } @media screen and (min-width:850px) { #themes-container { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 40px; } #theme2 { margin: 0 20px; } #theme3 { margin-bottom: 0; } #themes .section-header { margin-top: 16px; margin-bottom: 61px; } .theme-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; } .theme-content .button-link { margin-top: auto; } } @media screen and (min-width:1280px) { #themes-container { margin-bottom: 50px; } .theme { padding-bottom: 42px; } .theme-icon { height: 108px; line-height: 108px; margin: -50px auto 48px; width: 108px; } .theme-icon img { width: 54px; } .theme-content h3 { font-size: 2.125rem; line-height: 1.17; margin-bottom: 18px; } .theme .button-link a { padding: 14px 20px; } } /* Topic section */ #topic { padding: 65px 0 62px; } .topic-border { background: transparent url('images/green-borders.png') repeat-x; height: 11px; width: 100%; } #topic-container { margin-bottom: 13px; padding-top: 0; padding-bottom: 0; } #topic-excerpt { margin-bottom: 40px; margin-top: -33px; } .topic-section #topic-excerpt { margin-bottom: 25px; } #topic-meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; margin-bottom: 35px; } #topic-meta img { margin-right: 15px; max-width: calc(100% - 155px); } #topic-date { background: transparent url('images/speech-bubble.svg') no-repeat; background-size: contain; box-sizing: border-box; margin-bottom: 20px; padding: 12px 10px 30px 10px; text-align: center; width: 140px; } .topic-colors .section-header, .topic-colors h1, .topic-colors h2, .topic-colors h3, .topic-colors h4, .topic-colors h5, .topic-colors h6 { color: var(--color-green-wcag); } #topic .section-header { margin-bottom: 15px; } #topic.topic-section p { font-size: 1.125rem; font-weight: 700; margin-bottom: 20px; } #topic .entry-content .button-link a { padding: 12px 50px; } #topic-social { border-top: 1px solid var(--color-grey-medium); border-bottom: 1px solid var(--color-grey-medium); box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: -5%; overflow-x: hidden; padding: 40px 4%; width: 109%; } #topic-social-content { background-color: #fff; border-radius: 10px; padding: 20px; } #topic-social-content p { font-size: 1rem; font-weight: normal; } #topic-social-content p:last-child { margin-bottom: 0; } @media screen and (min-width:850px) { #topic { padding: 73px 0 70px; } #topic-container { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 25px; } #topic-excerpt { margin: -33px 5% 0 0; width: 45%; } #topic-social { border-left: 1px solid var(--color-grey-medium); border-right: 1px solid var(--color-grey-medium); margin: -33px 0 -58px; width: 50%; } #topic .section-header { margin-bottom: 5px; } .topic-border { height: 13px; } } #topic-social > div { display: block; width: 100%; } .twitter-tweet.twitter-tweet-rendered { margin-left: auto; margin-right: auto; } /* Topic pages */ .box-topic-border { background-color: #fff; border: 1px solid var(--color-blue-border); border-radius: 2px; box-sizing: border-box; box-shadow: 4px 4px 8px rgba(0,0,0,.06); } #topic-col2 .box-topic-border { margin: 40px 0 0; } #topic-col2 .archive-link { margin-top: 30px; } .box-topic-border-content { padding: 30px 20px; } .box-topic-border-content p:last-child { margin-bottom: 0; } .archive-link { color: var(--color-grey-medium) !important; float: right; } .archive-link:hover { color: #000 !important; } .slider-blue .archive-link { color: #fff !important; } @media screen and (min-width: 850px) { #topic-col2 { width: 50%; } #topic-col2 #topic-social { margin-bottom: 0; width: 100%; } } .page-template-page-topic #news-slider h2 { color: var(--color-green-wcag); } /* Introduction section */ .bg-blue { background-color: var(--color-blue-bg); overflow: hidden; position: relative; } .bg-words { background: transparent url('images/words.gif') repeat 0 0; /*background-size: 100% auto;*/ opacity: 0.1; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; } #introduction-container { color: #fff; margin-bottom: 60px; position: relative; text-shadow: 0 0 10px rgba(0,0,0,.45); } #introduction-title .section-header { line-height: .95; margin-bottom: 32px; } #introduction-container p { font-size: 1.125rem; font-weight: bold; } #introduction-img { margin-bottom: 25px; } #introduction-img .arve { margin-bottom: 0; } #introduction-img p { margin: 0; } #introduction-img p.wp-caption-text { color: rgba(255,255,255,.8); font-family: var(--font-secondary); font-size: 1em !important; font-style: italic; font-weight: normal; margin-top: 10px; } #introduction .entry-content .button-link a { border: 3px solid #fff !important; color: #000; font-weight: normal; margin: 0; padding: 12px 20px; text-shadow: none; } #introduction .entry-content .button-link a:hover, #introduction .entry-content .button-link a:active { background: #fff; border: 3px solid #fff !important; color: #000; box-shadow: 0 0 10px rgba(0,0,0,.45); } #introduction-icons { display: -ms-grid; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; grid-column-gap: 10px; grid-row-gap: 24px; padding-top: 10px; padding-bottom: 45px; } .introduction-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .introduction-icon span { font-size: .9375rem; font-weight: bold; line-height: 1.37; } .the-icon { background-color: var(--color-green-lime); border-radius: 50%; color: #fff; -ms-flex-negative: 0; flex-shrink: 0; font-size: 22px; height: 50px; line-height: 50px; margin-right: 12px; text-align: center; width: 50px; } #introduction-button-desktop { display: none; } @media screen and (min-width:420px) { #introduction-icons { grid-column-gap: 20px; } .introduction-icon span { font-size: 1rem; } .the-icon { font-size: 34px; height: 72px; line-height: 72px; margin-right: 20px; width: 72px; } } @media screen and (min-width:600px) { #introduction-icons { grid-template-columns: repeat(3, 1fr); } } @media screen and (min-width:850px) { #introduction-container { margin-bottom: 55px; margin-top: 25px; } #introduction-title .section-header { margin-bottom: 22px; } #introduction-title, #introduction-excerpt { float: left; width: 49%; } #introduction-img, #introduction-icons { float: right; width: 46.5%; } #introduction-icons { grid-template-columns: repeat(2, 1fr); } #introduction-button-mobile { display: none; } #introduction-button-desktop { display: block; padding-top: 4px; } } @media screen and (min-width:1280px) { #introduction-icons { grid-template-columns: repeat(3, 1fr); } } /* Share links */ #floating-social { margin: 30px auto 40px; width: 92%; max-width: 1270px; } #share-links { display: inline-block; padding: 10px 0; } #share-links:before { color: var(--color-blue-text); content: 'Jaa sivu'; display: inline-block; font-weight: 700; padding-right: 5px; } #share-links li { background: #fff; border: 1px solid var(--color-blue-text); border-radius: 13px; box-sizing: border-box; font-size: 14px; display: inline-block; height: 26px; line-height: 26px; list-style-type: none; margin-right: 1px; padding: 0; position: relative; text-align: center; width: 26px; } @media screen and (min-width:400px) { #share-links li { border-radius: 16px; font-size: 16px; height: 32px; line-height: 32px; margin-right: 3px; width: 32px; } } @media screen and (min-width:1024px) { #share-links li { border-radius: 20px; font-size: 18px; height: 40px; line-height: 40px; width: 40px; } } @media screen and (min-width:1280px) { #floating-social { margin: 70px 0 60px; position: sticky; top: 40%; max-width: none; } #share-links { border: 1px solid #AEAEAE; box-sizing: border-box; box-shadow: 4px 4px 8px rgba(0,0,0,.06); padding-top: 19px; width: 95px; } #share-links li { display: block; margin: 0 auto 7px; } #share-links:before { display: block; margin-bottom: 15px; padding-right: 0; text-align: center; } } #share-links li::before { content: ''; display: none; } #share-links li a, #share-links li a .fa-twitter, #share-links li a .fa-facebook-f { color: var(--color-blue-text) !important; } #under-floating-social { padding-top: 0; position: relative; } @media screen and (min-width:1280px) { #under-floating-social { margin-top: -407px; } } /* Simple tooltips */ .hover-tooltip { display: none; color: var(--color-blue-text); font-size: 15px; position: absolute; top: -35px; left: 0; text-align: left; width: 150px; } @media screen and (min-width:1280px) { .hover-tooltip { top: 0; left: 80px; } } a:hover + .hover-tooltip, a:focus + .hover-tooltip { display: block; } /* Tables */ table { border: 1px solid #cfcfcf; border-spacing: 0; font-size: 1em; margin-bottom: 1.5em; text-align: left; width: 100%; } th, td { border: 1px solid #cfcfcf; font-size: 1em; padding: 8px 10px; } th { font-weight: 700; } /* Footer */ #footer-container { background-color: var(--color-green-wcag); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } #footer-theme-links { background: #fff; border-radius: 4px; box-shadow: 0 -4px 14px rgba(35,84,153,0.15); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: distribute; justify-content: space-around; height: 130px; margin: -25px 4% 30px; padding: 15px; position: relative; } @media screen and (min-width:850px) { #footer-theme-links { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; height: 47px; margin-bottom: 39px; margin-top: -33px; } #footer-theme-link-icon-leaf { width: 42px; } } #footer-theme-links a { color: var(--color-blue-text); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: var(--font-condensed); font-size: 1rem; font-weight: 700; text-transform: uppercase; } @media screen and (min-width:340px) { #footer-theme-links a { font-size: 1.125rem; } } @media screen and (min-width:380px) { #footer-theme-links a { font-size: 1.25rem; } } @media screen and (min-width:420px) { #footer-theme-links a { font-size: 1.4375rem; } } @media screen and (min-width:850px) { #footer-theme-links a { font-size: 1rem; } } @media screen and (min-width:900px) { #footer-theme-links a { font-size: 1.125rem; } } @media screen and (min-width:1000px) { #footer-theme-links a { font-size: 1.25rem; } } @media screen and (min-width:1100px) { #footer-theme-links a { font-size: 1.4375rem; } } @media screen and (min-width:1280px) { #footer-theme-links a { font-size: 1.625rem; } } .footer-theme-link-icon { width: 38px; } #footer-theme-link-icon-euro { margin-bottom: 5px; } .footer-theme-link-arrow { margin-bottom: 3px; padding-left: 10px; } #footer-top, #footer-bottom { color: #fff; margin: 0 4%; } #footer-bottom { border-top: 3px solid var(--color-green-lime); padding: 24px 0; } #footer-col1 { border-bottom: 3px solid var(--color-green-lime); margin-bottom: 28px; padding-bottom: 28px; } #footer-col2 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 20px; } #footer-logo { margin-bottom: 20px; } #footer-logo.text-logo a { font-size: 32px; letter-spacing: 0; line-height: 37px; text-shadow: 0 0 8px rgb(0,0,0,.25); } #footer-logo.text-logo a span { font-size: 17px; } #footer-logos { margin: 0 0 0 4px; } @media screen and (min-width:1200px) { #footer-logos { margin: 43px 0 0 4px; } } #footer-links { width: 55%; } #footer-links-lang { width: 45%; max-width: 166px; } .footer-menu-links { margin-bottom: 46px; } .footer-menu-links a { font-weight: 700; line-height: 1.5; text-shadow: 0 0 8px rgba(0,0,0,.25); } #footer-topic { height: auto; margin-right: 28px; width: calc(100% - 194px); max-height: 109px; max-width: 159px; } #footer-button-links a { border-radius: 20px; height: 38px; line-height: 38px; margin: 0 0 15px; } .social { text-align: center; } .social p { font-family: var(--font-condensed); font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; } #footer-social { margin-bottom: 44px; } #footer-social p { text-shadow: 0 0 8px rgba(0,0,0,.25); } .social a { background-color: #fff; border-radius: 50%; display: inline-block; font-size: 28px; height: 50px; line-height: 50px; margin: 0 10px; text-align: center; width: 50px; } .fa-twitter { color: #00a3ff; } .fa-facebook-f { color: #0f76d6; } .fa-instagram { color: #af00cb; } .fa-youtube { color: #ff0f00; } #banner-social { border-bottom: 1px solid var(--color-blue-border); border-top: 1px solid var(--color-blue-border); } .home #banner-social { border-top: 0; } #banner-social-center { padding: 16px 4%; } #banner-social p { color: var(--color-blue-text); font-size: 1rem; margin-bottom: 5px; } #banner-social a { font-size: 22px; height: 42px; line-height: 42px; margin: 0 6px; width: 42px; } @media screen and (min-width:375px) { #banner-social-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 0; } #banner-social-center p { margin-bottom: 0; margin-right: 3px; } #banner-social a { margin: 0 0 0 12px; } } @media screen and (min-width:400px) { #banner-social-center p { font-size: 1.125rem; } } @media screen and (min-width:700px) { #banner-social { display: -webkit-box; display: -ms-flexbox; display: flex; } #banner-social-left, #banner-social-right { width: 20%; } #banner-social-center { padding: 16px 0; width: 60%; } #banner-social-left { background: var(--color-blue-medium) url('images/banner-arrows-left-side.svg') no-repeat; background-position: right center; background-size: auto 100%; } #banner-social-right { background: var(--color-blue-medium) url('images/banner-arrows-right-side.svg') no-repeat; background-position: left center; background-size: auto 100%; } } @media screen and (min-width:1024px) { #banner-social-left, #banner-social-right { width: 30%; } #banner-social-center { width: 40%; } } @media screen and (min-width:1280px) { #banner-social-left, #banner-social-right { width: calc(50% - 275px); } #banner-social-center { padding: 48px 0 45px; width: 550px; } #banner-social-center p { font-size: 1.5rem; margin-right: 4px; } #banner-social a { font-size: 28px; height: 48px; line-height: 48px; margin: 0 0 0 27px; width: 48px; } } #banner-social .fab { color: #fff !important; } #social-twitter { background-color: #00ACF5; } #social-twitter { background-color: #000; } #social-twitter .fa-x-twitter { color: #FFF; } #social-facebook { background-color: #2073EF; } #social-instagram { background: linear-gradient(45deg, #E7862D 17.71%, #FF00D6 88.02%); } #social-youtube { background-color: #EE0F0F; } #policy-links { text-align: center; } #policy-links a { display: inline-block; line-height: 1.2; font-size: .9375rem; font-weight: 700; margin-bottom: 7px; text-decoration: underline; } @media screen and (min-width:830px) { #footer-links { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; width: 166px; } #footer-links-lang { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; width: 166px; max-width: none; } #footer-button-links { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; width: 166px; } #footer-topic { height: auto; margin-right: 0; margin-top: 5px; -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; width: 190px; max-height: none; max-width: none; } .footer-menu-links { margin-bottom: 10px; } #footer-bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 4px; padding: 30px 0 39px; } #footer-social { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 0; } #footer-social p { margin-bottom: 0; margin-right: 17px; } #footer-social a { margin: 0 9px; } #policy-links { text-align: right; } } @media screen and (min-width:1024px) { #footer-top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #footer-col1 { border-bottom: 0; } #footer-col2 { -ms-flex-wrap: nowrap; flex-wrap: nowrap; margin-top: 17px; } #footer-links { width: 140px; } #footer-links-lang { width: 130px; } #footer-topic { width: 200px; } } @media screen and (min-width:1200px) { #footer-links { width: 195px; } #footer-links-lang { width: 150px; } #footer-topic { width: 260px; } } /* Two cols */ .one-col + .one-col, .one-col + .two-cols, .two-cols + .two-cols, .two-cols + .one-col { padding-top: 0; } .two-cols-text { margin-bottom: 30px; } .two-cols-img { min-height: 250px; } @media screen and (min-width:500px) { .two-cols-img { min-height: 300px; } } @media screen and (min-width:600px) { .two-cols-img { min-height: 350px; } } @media screen and (min-width:700px) { .two-cols-img { min-height: 400px; } } @media screen and (min-width:850px) { .two-cols-img { min-height: 350px; } } .two-cols-video .arve { margin-bottom: 0 !important; } @media screen and (min-width:850px) { .two-cols { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .two-cols-text, .two-cols-img, .two-cols-video { width: 46.5%; } .img-text .two-cols-text { order: 2; } } /* One column background */ .one-col-bg { background-blend-mode: luminosity; position: relative; } .one-col-bg-overlay { background: rgba(67,113,140,.8); position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .one-col-bg .entry-content { color: #fff; font-weight: 700; margin: 0 auto; max-width: 500px; padding-left: 4%; padding-right: 4%; position: relative; text-shadow: 0 0 10px rgba(0,0,0,.45); } .one-col-bg .entry-content p { font-size: 1.125rem; } /* Sirpa */ #secondary-content #introduction-img, #secondary-content #introduction-icons { float: none; width: 100%; } #secondary-content p.wp-caption-text { color: var(--color-grey-medium); font-family: var(--font-primary); font-size: 1rem !important; font-style: normal; font-weight: normal; margin-top: 10px; } #introduction-form { margin-top: 30px; } /* Highlight boxes */ .higlight-boxes { background-color: var(--color-green-wcag); border-radius: 6px; box-shadow: 4px 4px 8px rgba(0,0,0,.06); color: #fff; margin-bottom: 30px; padding: 25px 30px; text-align: center; text-shadow: 0 0 8px rgba(0,0,0,.25); } .higlight-boxes h2 { color: #fff !important; margin-bottom: 12px; } .higlight-boxes p { font-size: 1.125rem; font-weight: 700; } .higlight-boxes .box-header-icon { font-size: 28px; margin-right: 13px; } #box-newsletter .box-header-icon { font-size: 32px; transform: rotate(-12deg); } .entry-content .higlight-boxes .button-link a { border-color: #fff !important; box-shadow: 4px 4px 8px rgba(0,0,0,.06); color: #000; font-size: 1rem; font-weight: 400; text-shadow: none; } .entry-content .higlight-boxes .button-link a:hover { background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,.45); color: #000; } /* Events */ #events { margin-bottom: 50px; } .event-item { border-bottom: 1px solid var(--color-blue-border); padding: 10px 0; } .event-item:first-child { border-top: 1px solid var(--color-blue-border); } .event-toggle { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .event-brief { box-sizing: border-box; padding-top: 10px; width: calc(100% - 20px); } .event-brief p { margin-bottom: 0; } .event-title { font-size: 1.125rem; font-weight: 700; } .event-excerpt { font-family: var(--font-secondary); } .event-details { margin-top: 10px; } .event-details p:last-child { margin-bottom: 0; } .event-date { background-color: var(--color-blue-bg); border-radius: 3px; box-sizing: border-box; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 10px; text-align: center; width: 100%; } .event-date span { display: block; font: normal 60px/1 var(--font-titles); } .toggle-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: right; width: 20px; } .toggle-link .fas { color: var(--color-blue-text); font-size: 30px; } @media screen and (min-width:500px) { .event-date { flex-shrink: 0; width: 98px; } .event-brief { padding-left: 30px; width: calc(100% - 118px); } } @media screen and (min-width:850px) { #events-boxes-container { display: -webkit-box; display: -ms-flexbox; display: flex; } #events { margin-bottom: 0; margin-right: 5%; width: 55%; } #boxes { width: 40%; } #boxes #box-join { margin-bottom: 0; } } @media screen and (min-width:1280px) { #sirpa-livena-ja-linjoilla section { padding: 80px 0; } } /* Quotes */ #quotes-container { color: #fff; position: relative; text-shadow: 0 0 10px rgb(0 0 0 / 45%); } .quote-item { background-color: #fff; border-radius: 6px; box-sizing: border-box; color: #000; padding: 30px 20px 30px 55px; text-shadow: none; } .the-quote p { font-size: 1.125rem; line-height: 1.5; } .the-quote:before { color: var(--color-green-lime); content: '\201D'; display: block; font-size: 90px; font-weight: 700; float: left; margin-left: -47px; margin-top: -20px; } @media screen and (min-width:500px) { .quote-item { padding: 50px 50px 50px 100px; } .the-quote p { font-size: 1.25rem; } } .with-slider-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 23px; } .with-slider-nav h2 { margin-bottom: 0; } .custom-navigation { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 0 0 auto; } @media screen and (max-width:899px) { .custom-navigation { display: none; } } #maincontent .slick-next, #maincontent .slick-prev { position: static; } #maincontent .slick-next, #maincontent .slick-prev { height: 32px; width: 32px; transform: none; } #maincontent .slick-next .slick-next-icon, #maincontent .slick-next .slick-prev-icon, #maincontent .slick-prev .slick-next-icon, #maincontent .slick-prev .slick-prev-icon { height: 32px; opacity: 1; width: 32px; } #maincontent .slick-prev { background: url('images/caret-left.svg') no-repeat center; background-size: 17px 32px; } #maincontent .slick-next { background: url('images/caret-right.svg') no-repeat center; background-size: 17px 32px; order: 3; } #maincontent .slider-green .slick-prev { background: url('images/caret-left-green.svg') no-repeat center; background-size: 17px 32px; } #maincontent .slider-green .slick-next { background: url('images/caret-right-green.svg') no-repeat center; background-size: 17px 32px; } button.slick-arrow.slick-disabled { opacity: .25 !important; } #maincontent .slick-next .slick-next-icon::before, #maincontent .slick-prev .slick-prev-icon::before, #maincontent .slick-dots li button .slick-dot-icon::before { content: ""; } /* Grid images */ .linked-img-grid { display: -ms-grid; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; grid-column-gap: 20px; grid-row-gap: 20px; } @media screen and (min-width:650px) { .linked-img-grid { grid-template-columns: repeat(3, 1fr); } } @media screen and (min-width:900px) { .linked-img-grid { grid-template-columns: repeat(4, 1fr); } } .linked-img { text-align: center; } .linked-img p { margin-bottom: 0; margin-top: auto; } .linked-img a { border-bottom: 0 !important; color: #000 !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; } .linked-img a:hover { color: var(--color-green-wcag) !important; } /* Landing pages */ .landing { background-color: var(--color-blue-light); border-top: 1px solid var(--color-blue-border); } .landing h1 { color: var(--color-blue-text); margin-bottom: 30px; text-align: center; } @media screen and (min-width: 768px) { .landing h1 { margin-bottom: 50px; } } @media screen and (min-width: 1024px) { .landing h1 { margin-bottom: 62px; } } .landing .bordered-form h2 { color: var(--color-green-wcag); } .landing #primary-content { margin-top: 0; } #landing-col2 { padding-bottom: 10px; } #landing-col2 p { font-size: 1.25rem; } @media screen and (min-width: 850px) { #content-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } #content-container #primary-content, #content-container #secondary-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; float: none; } #content-container #primary-content { margin-right: 2.5%; } #content-container #secondary-content { margin-left: 2.5%; } } /* Sirpa box */ #box-sirpa { border: 3px solid #fff; border-radius: 6px; box-sizing: border-box; font-family: var(--font-secondary); padding: 40px 20px; text-align: center; } @media screen and (min-width: 850px) { #box-sirpa { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; } } #box-sirpa img, #author img { margin-bottom: 22px; } #box-sirpa p, #author p { font-size: 1.125rem; margin-bottom: 0; } #box-sirpa span, #author span { color: var(--color-blue-text); font-size: 1.375rem; font-weight: 700; } #box-sirpa a, #author a { color: var(--color-grey-medium); font-size: .9375rem; } #author { font-family: var(--font-secondary); padding-top: 35px; text-align: center; } @media screen and (min-width: 600px) { #author { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #author img { margin-right: 60px; } } /* Social embeds section */ #social-embeds { padding-bottom: 100px; } #social-embeds-container { color: #fff; position: relative; } #social-embeds-container h2 { text-align: center; } #social-embeds-social-icons { margin: 0 auto; padding-top: 25px; padding-bottom: 65px; } #social-embeds-social-icons p { font-size: 1rem; } #social-embeds-social-icons a { color: inherit !important; } #social-embeds-social-icons #social-twitter, #social-embeds-social-icons #social-facebook, #social-embeds-social-icons #social-instagram, #social-embeds-social-icons #social-youtube { background: #fff; } #social-embeds-social-icons #social-twitter .fa-x-twitter { color: #000; } #social-embeds-social-icons a { font-size: 22px; height: 42px; line-height: 42px; margin: 0 6px; width: 42px; } @media screen and (min-width:375px) { #social-embeds-social-icons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 0; } #social-embeds-social-icons p { margin-bottom: 0; margin-right: 3px; } #social-embeds-social-icons a { margin: 0 0 0 12px; } } @media screen and (min-width:400px) { #social-embeds-social-icons p { font-size: 1.125rem; } } @media screen and (min-width:1280px) { #social-embeds-social-icons p { font-size: 1.5rem; margin-right: 4px; } #social-embeds-social-icons a { font-size: 28px; height: 48px; line-height: 48px; margin: 0 0 0 27px; width: 48px; } } .fb_iframe_widget { text-align: center; width: 100%; } /* News section */ .slider-blue { padding-bottom: 60px; } .slider-blue section { position: relative; } .slider-blue .with-slider-nav h2 { color: #fff; } .slider-green section { padding-top: 0; } .slider-green .with-slider-nav { margin-bottom: 11px; } .articles-slider { box-sizing: border-box; padding-left: 4%; width: 100%; } .articles-slider .slick-track { display: -webkit-box; display: -ms-flexbox; display: flex; } .articles-slider .slick-slide { height: inherit; } .articles-slider .slick-slide > div { height: 100%; } .articles-slider .slick-list { padding: 0 15% 0 0; } @media only screen and (min-width: 900px) { .articles-slider { padding-left: 0; margin: 0 auto; padding-left: 6.5px; width: calc(92% + 13px); max-width: 1213px; } .articles-slider .slick-list { padding: 0; } } .news-item-container { height: 100%; } .news-item { background-color: #fff; border: 1px solid var(--color-blue-border); border-radius: 4px; box-sizing: border-box; box-shadow: 4px 4px 8px rgba(0,0,0,.04); height: 100%; margin-right: 13px; padding: 23px; } .news-item a { border-bottom: 0 !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; } .news-image-container { border: 1px solid var(--color-grey-medium); box-sizing: border-box; height: 130px; width: 100%; } @media screen and (min-width:400px) { .news-image-container { height: 180px; } } @media screen and (min-width:500px) { .news-image-container { height: 230px; } } @media screen and (min-width:600px) { .news-image-container { height: 260px; } } @media screen and (min-width:650px) { .news-image-container { height: 280px; } } @media screen and (min-width:701px) { .news-image-container { height: 150px; } } @media screen and (min-width:800px) { .news-image-container { height: 180px; } } @media screen and (min-width:901px) { .news-image-container { height: 150px; } } @media screen and (min-width:1000px) { .news-image-container { height: 160px; } } @media screen and (min-width:1100px) { .news-image-container { height: 170px; } } #news-grid-container .news-image-container { height: 170px; } @media screen and (min-width:400px) { #news-grid-container .news-image-container { height: 220px; } } @media screen and (min-width:500px) { #news-grid-container .news-image-container { height: 270px; } } @media screen and (min-width:600px) { #news-grid-container .news-image-container { height: 170px; } } @media screen and (min-width:650px) { #news-grid-container .news-image-container { height: 150px; } } @media screen and (min-width:700px) { #news-grid-container .news-image-container { height: 170px; } } @media screen and (min-width:800px) { #news-grid-container .news-image-container { height: 190px; } } @media screen and (min-width:900px) { #news-grid-container .news-image-container { height: 150px; } } @media screen and (min-width:1000px) { #news-grid-container .news-image-container { height: 170px; } } @media screen and (min-width:1100px) { #news-grid-container .news-image-container { height: 180px; } } @media screen and (min-width:1200px) { #news-grid-container .news-image-container { height: 170px; } } .news-item img { width: 100% !important; } .news-item h3 { color: #000 !important; font-family: var(--font-condensed); font-size: 1.125rem; font-weight: 700; line-height: 1.5; margin: 0 0 15px; padding-top: 0; } .news-item-date { color: var(--color-grey-medium); font-family: var(--font-secondary); font-size: .9375em; margin: 10px 0 5px; } .news-link { background-color: #fff; border: 3px solid var(--color-green-lime) !important; border-radius: 30px; color: #000 !important; display: block; font-family: var(--font-secondary); font-weight: 400; margin-top: auto; padding: 10px 20px; text-align: center; transition: all 0.2s ease; } a:hover .news-link { background-color: var(--color-green-lime); color: #fff !important; } /* News grid */ #news-grid-container { padding-bottom: 100px; position: relative; } #news-grid-container h1 { color: #fff; text-align: center; text-shadow: 0 0 10px rgba(0,0,0,.45); } #news-grid-container .news-item { margin-right: 0; } .grid-flex-container { display: -ms-grid; display: grid; grid-template-columns: repeat(1, 1fr); grid-column-gap: 13px; grid-row-gap: 13px; } @media screen and (min-width:600px) { .grid-flex-container { grid-template-columns: repeat(2, 1fr); } } @media screen and (min-width:900px) { .grid-flex-container { grid-template-columns: repeat(3, 1fr); } } @media screen and (min-width:1200px) { .grid-flex-container { grid-template-columns: repeat(4, 1fr); } } .grid-container #ajax-load-more { padding-top: 30px; } /* Load more button */ #news-grid-container .alm-btn-wrap { margin-top: 60px; } #news-grid-container .alm-load-more-btn.more { background-color: #fff; border: 1px solid var(--color-grey-medium); border-radius: 100px; color: #000; font-size: 1rem; font-weight: 400; margin: 0 auto; padding: 10px 30px; text-align: center; transition: all 0.2s ease; -webkit-appearance: none; } #news-grid-container .alm-load-more-btn.more:hover, #news-grid-container .alm-load-more-btn.more:focus { background-color: var(--color-green-wcag); border: 1px solid var(--color-green-wcag); color: #fff; } #news-grid-container .button-load-more.done { display: none; } #no-results { color: #fff; display: block; text-align: center; } /* Filters */ #grid-filters { padding: 0 0 30px; text-align: center; } #grid-filters li { display: inline-block; } #grid-filters a { background-color: #fff; border: 1px solid var(--color-grey-medium); border-radius: 100px; color: var(--color-green-wcag); display: inline-block; font-family: var(--font-condensed); font-size: 1rem; font-weight: 700; margin: 5px; padding: 12px 20px 10px; text-align: center; text-transform: uppercase; } @media screen and (min-width:850px) { #grid-filters a { font-size: 1.375rem; padding: 15px 30px 13px; } } #grid-filters .active a { background-color: var(--color-green-wcag); border: 1px solid var(--color-green-wcag); color: #fff; } #more-filters { background: #fff; border-radius: 4px; box-shadow: 4px 4px 8px rgba(0,0,0,.06); padding: 15px 20px; } .filter-column { width: 100%; } .filter-column-middle { margin: 20px 0; } @media screen and (min-width:850px) { #more-filters { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 15px 28px 20px; } .filter-column-middle { margin: 0 20px; } } .filter-label { margin-bottom: 5px; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border: solid var(--color-green-lime) !important; border-width: 0 3px 3px 0 !important; display: inline-block; margin-left: -18px !important; margin-top: -7px !important; padding: 5px; transform: rotate(45deg); -webkit-transform: rotate(45deg); } #filter-search { position: relative; } #search-submit-link { position: absolute; right: 14px; top: 12px; } #filter-search input[type=text] { background-color: #fff; border: 1px solid #AEAEAE; border-radius: 4px; box-sizing: border-box; height: 45px; padding: 0 10px; width: 100%; } #filter-search input[type=text]:focus { border: 1px solid var(--color-blue-text); outline: none; } #filter-search input[type=text]::placeholder { color: var(--color-grey-medium); } /* Filter select */ .select-content .select2-selection { overflow: hidden; } .select-content .select2-selection__rendered { white-space: normal !important; word-break: break-all; } select, .select-content .select2-container--default .select2-selection--single { background-color: #fff !important; border: 1px solid #AEAEAE; border-radius: 4px; box-sizing: border-box; color: var(--color-grey-medium); height: 45px; width: 100%; } select:focus, .select-content .select2-container--default .select2-selection--single:focus { border: 1px solid var(--color-blue-text); outline: none; } .select-content .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 45px; } .select-content .select2-container--default .select2-selection--single .select2-selection__arrow { height: 43px; } .select2-options { display: block; line-height: 1.5; } /* Ota yhteyttä */ #contact-section #primary-content { margin-top: 0; } #contact-boxes #box-join { margin-bottom: 10px; } @media screen and (min-width:768px) { #contact-boxes { display: -webkit-box; display: -ms-flexbox; display: flex; } #contact-boxes .higlight-boxes { box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 10px !important; width: 47.5%; } #contact-boxes #box-join { margin-left: 5%; } } #contact-details { border-top: 1px solid var(--color-blue-border); } #contact-addresses { background-color: var(--color-blue-bg); color: #fff; } #contact-details-container, #contact-addresses-container { padding-bottom: 60px; } #contact-address-columns { padding-top: 30px; } #contact-divider { background-color: var(--color-green-lime); height: 2px; margin: 50px 0; width: 100%; } .person { background: #fff; border: 1px solid var(--color-blue-border); border-radius: 4px; box-sizing: border-box; box-shadow: 4px 4px 8px rgba(0,0,0,.06); margin-top: 120px; padding: 0 20px 20px; } .person-image { border: 1px solid var(--color-blue-border); border-radius: 50%; height: 155px; margin: -58px auto 13px; width: 155px; } .person-name-info { margin-bottom: 17px; } .person-name { color: var(--color-blue-text); font-family: var(--font-secondary); font-size: 1.25rem; font-weight: bold; line-height: 1.5; margin-bottom: 7px; } .person-contact { border-top: 1px solid var(--color-blue-border); margin-top: auto; padding-top: 15px; } .person-contact a { color: #000; border-bottom: 1px solid #000; } .person-contact a:hover { color: var(--color-green-wcag); border-bottom: 1px solid var(--color-green-wcag); } .person-contact-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 3px; } .person-contact-icon i { color: var(--color-green-lime); font-size: 21px; padding-right: 10px; } .person-contact-icon i.fa-envelope { font-size: 25px; } @media screen and (min-width:700px) { #contact-address-columns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: 500px; margin: 0 auto; } #contact-divider { height: auto; margin: 0; width: 2px; } #persons { display: -ms-grid; display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 30px; grid-row-gap: 0; } .person { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media screen and (min-width:900px) { #persons { grid-template-columns: repeat(3, 1fr); } } @media screen and (min-width:1280px) { #contact-details-container h2 { margin-top: -13px; margin-bottom: 18px; } .person { padding: 0 30px 30px; } } /* Media */ #gallery-container { display: -ms-grid; display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 13px; grid-row-gap: 13px; padding-top: 30px; } .gallery-img-link { border: 1px solid var(--color-grey-medium) !important; box-sizing: border-box; display: block; height: 120px; width: 100%; } @media screen and (min-width:500px) { .gallery-img-link { height: 150px; } } @media screen and (min-width:700px) { .gallery-img-link { height: 170px; } } @media screen and (min-width:900px) { .gallery-img-link { height: 190px; } } @media screen and (min-width:1000px) { .gallery-img-link { height: 210px; } } @media screen and (min-width:1100px) { .gallery-img-link { height: 230px; } } @media screen and (min-width:1200px) { .gallery-img-link { height: 265px; } } @media screen and (min-width:600px) { #gallery-container { grid-template-columns: repeat(3, 1fr); } } @media screen and (min-width:1280px) { #gallery { padding-top: 75px; } } .section-borders { border-top: 1px solid var(--color-blue-border); border-bottom: 1px solid var(--color-blue-border); } .section-extra-pad .centered { padding-bottom: 60px; } @media screen and (min-width: 850px) { .page-id-7741 #topic { padding: 90px 0 70px; } } /* Single */ .single .bg-words { background-size: 100% auto; } @media screen and (min-width: 600px) { .single .hero-height { min-height: 390px; } } .single #hero-header h1 { position: relative; } #single-content-container { position: relative; } #main-category-visual-container, #main-category-visual { display: none; } @media screen and (min-width: 1280px) { #main-category-visual-container { display: block; height: calc(100% + 70px); overflow: hidden; position: absolute; right: 0; top: -70px; width: 120px; } #main-category-visual { color: var(--color-blue-light); display: block; font-family: var(--font-condensed); font-size: 140px; font-weight: 700; height: 140px; line-height: 140px; overflow: hidden; position: absolute; bottom: -140px; text-align: center; text-transform: uppercase; transform: rotate(-90deg); transform-origin: top left; width: auto; } } .single .single-col { max-width: 560px; } #single-news-header { color: var(--color-blue-text); } @media screen and (max-width:500px) { #single-news-header { font-size: 2.5rem; } } @media screen and (min-width:1280px) { #single-news-header { font-size: 5.125rem; } } #article-metas { margin: 20px 0 25px; } .news-meta { border: 1px solid var(--color-blue-border); color: var(--color-grey-medium); display: inline-block; margin: 0 10px 10px 0; padding: 10px; } .news-meta-tag { background-color: var(--color-blue-ultra-light); color: #000; } .single #contact-section { padding-top: 0; } .single #contact-section #content-container { padding-bottom: 20px; } @media screen and (min-width: 850px) { .single #content-container #primary-content { margin-right: 1%; width: 49%; } .single #content-container #secondary-content { margin-left: 1%; width: 49%; } } /* UKK */ .faq-header { margin-bottom: 10px; } .entry-content.faq-page .toggle-link { box-sizing: border-box; display: block; text-align: left; width: 100%; } .faq-header .toggle-link { background: transparent url('images/icon-plus.svg') no-repeat top 4px right 1px; background-size: 30px 30px; border-bottom: 1px solid var(--color-blue-text) !important; color: var(--color-blue-text) !important; padding: 6px 45px 17px 0; } @media screen and (min-width: 500px) { .faq-header a.toggle-link { background-size: 40px 40px; } } .faq-header a.toggle-link.opened { background: transparent url('images/icon-minus.svg') no-repeat top 4px right 1px; background-size: 30px 30px; } @media screen and (min-width: 500px) { .faq-header a.toggle-link.opened { background-size: 40px 40px; } } #faq-toggles { margin: 0 0 30px 30px; } .faq-pair { border-bottom: 1px solid #d3dae0; } .question { margin-bottom: 0; } .question a.toggle-link { background: transparent url('images/caret-toggle.svg') no-repeat center right 10px; background-size: 20px 13px; border-bottom: 0; font-size: 1.125rem; font-weight: 700; padding: 16px 40px 16px 0; } .question a.toggle-link.opened { background: transparent url('images/caret-toggle-opened.svg') no-repeat center right 10px; background-size: 20px 13px; } .grecaptcha-badge { display: none !important; } /** * 4.0 Links */ a { background-color: transparent; color: inherit; font-weight: inherit; text-decoration: none; transition: all 0.2s ease; } .button-link a, .entry-content .button-link a { background-color: #fff; border: 3px solid var(--color-green-lime) !important; border-radius: 30px; color: inherit; display: inline-block; font-size: 1.125rem; font-weight: 700; margin: 5px 5px 5px 0; padding: 10px 20px; text-align: center; } .button-link a:hover, .button-link a:active, .entry-content .button-link a:hover, .entry-content .button-link a:active { background-color: var(--color-green-lime); color: #fff; } .arrow-link a { background: transparent url('images/arrow-link.svg') no-repeat left center; background-size: 17px 14px; border-bottom: 0 !important; color: #000 !important; display: block; font-family: var(--font-secondary); font-size: 1rem; padding-left: 35px; } .arrow-link a:hover { color: var(--color-green-wcag) !important; } .entry-content a { border-bottom: 1px solid; border-color: inherit; color: #65A300; } .entry-content a:hover { color: #000; } .entry-content a.toggle-link { border: 0; color: #000; } #skiptomaincontent a { padding: 6px; position: absolute; top: -40px; left: 0; color: white; background: #dd0303; -webkit-transition: top 1s ease-out; transition: top 1s ease-out; z-index: 100; } #skiptomaincontent a:focus { position: absolute; left: 0; top: 0; -webkit-transition: top .1s ease-in; transition: top .1s ease-in; } /** * 5.0 Menus */ #mobile-menu-toggle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: 4px; padding-right: 4%; } @media screen and (min-width: 1280px) { #mobile-menu-toggle { display: none !important; } } .tcon { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: none; cursor: pointer; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 32px; transition: 0.2s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: auto; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; } .tcon > * { display: block; } .tcon:hover { outline: none; } .tcon::-moz-focus-inner { border: 0; } .tcon-menu__lines { background: var(--color-blue-text); display: inline-block; height: 3.5px; width: 32px; transition: 0.2s; position: relative; } .tcon-menu__lines::before, .tcon-menu__lines::after { background: var(--color-blue-text); content: ''; display: inline-block; height: 3.5px; position: absolute; transition: 0.2s; -webkit-transform-origin: 2px center; transform-origin: 2px center; width: 32px; width: 100%; } .tcon-menu__lines::before { left: 0; top: 13px; } .tcon-menu__lines::after { left: 0; top: -13px; } .tcon-transform .tcon-menu__lines::before, .tcon-transform .tcon-menu__lines::after { left: 0; } .tcon-transform .tcon-menu__lines { -webkit-transform: scale3d(0.8, 0.8, 0.8); transform: scale3d(0.8, 0.8, 0.8); } .tcon-menu--xcross { width: auto; } .tcon-menu--xcross.tcon-transform .tcon-menu__lines { background: transparent !important; } .tcon-menu--xcross.tcon-transform .tcon-menu__lines::before, .tcon-menu--xcross.tcon-transform .tcon-menu__lines::after { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; top: 0; width: 32px; } .tcon-menu--xcross.tcon-transform .tcon-menu__lines::before { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); } .tcon-menu--xcross.tcon-transform .tcon-menu__lines::after { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); } .tcon-visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .tcon-visuallyhidden:active, .tcon-visuallyhidden:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* Menu */ #main-menu { background-color: #fff; display: none; position: absolute; top: 75px; left: 0; right: 0; width: 100%; z-index: 999; } #home-menu-mobile { margin-bottom: 10px; } #upper-menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } #main-menu .button-links { background-color: var(--color-green-lime); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 160px; width: 100%; } .button-links a { background-color: #fff; border-radius: 16px; color: #000; display: block; font-size: .9375rem; font-weight: 700; height: 32px; line-height: 32px; margin: 6px 0; text-align: center; width: 166px; } #menu-logos { background-color: var(--color-blue-bg); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 160px; width: 100%; } #top-menu li { display: block; padding: 14px 0; } #top-menu a { font-size: 1rem; font-weight: 400; } #bottom-menu a { color: var(--color-blue-text); font-family: var(--font-condensed); font-size: 1.6875rem; font-weight: 700; text-transform: uppercase; } .menu-border a, #bottom-menu a { padding-bottom: 2px; } .menu-border a:hover, #bottom-menu a:hover { color: var(--color-green-wcag); } .menu-border .current-menu-item > a, .menu-border .current-menu-ancestor > a, .menu-border .current-menu-ancestor.menu-item-has-children > a, .menu-border .current-page-ancestor > a, #bottom-menu .current-menu-item > a, #bottom-menu .current-page-ancestor > a { border-bottom: 4px solid var(--color-green-lime); } .menu-border .current-menu-item > a:hover, .menu-border .current-menu-ancestor > a:hover, .menu-border .current-menu-ancestor.menu-item-has-children > a:hover, .menu-border .current-page-ancestor > a:hover { color: #000; } #bottom-menu .current-menu-item > a:hover, #bottom-menu .current-page-ancestor > a:hover { color: var(--color-blue-text); } #lang-menu i.fas { color: var(--color-grey-medium); font-size: 90%; margin-right: 3px; } #upper-menu .sub-menu li.finnish { display: none; } #icon-globe { margin-right: 3px; vertical-align: text-bottom; } .sub-menu { display: none; padding: 10px 0 0 0; } #upper-menu .sub-menu li { padding: 8px 0; } #upper-menu .sub-menu a { display: block; width: 100%; } @media screen and (max-width: 1279px) { #main-menu { box-shadow: 0 12px 8px rgba(0,0,0,.2); } #home-menu { display: none; } #main-menu-links { border: 1px solid var(--color-blue-border); border-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 15px 8% 20px; } #upper-menu { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } #upper-menu .sub-menu a { padding-left: 24px; } #top-menu { margin-left: 4px; margin-top: 2px; } #top-menu li { padding: 6px 0; } #top-menu a { font-size: 1.125rem; } #bottom-menu a { display: inline-block; font-size: 1.5rem; padding: 7px 0; } #lang-menu { margin: 10px 0 0 4px; } } @media screen and (min-width: 1280px) { .mobile { display: none !important; } #main-menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: static; text-align: right; width: auto; } #menu-logos { width: 135px; } #main-menu .button-links { width: 214px; } #upper-menu { margin: -15px 31px 27px 0; } #bottom-menu { margin-right: 21px; } #top-menu li, #bottom-menu li { display: inline-block; margin: 0; } #top-menu li { padding: 0 6px; } #bottom-menu li { padding: 0 11px; } #upper-menu li.menu-item-has-children { position: relative; } #icon-home { padding-right: 23px; } #icon-home img { margin-top: -5px; } #lang-menu { margin-left: 18px; } .menu-border a { padding-bottom: 6px; } #upper-menu .sub-menu { background-color: #fff; border: 1px solid #c8c8c8; -webkit-box-shadow: 12px 12px 8px 0 rgba(0,0,0,.2); -moz-box-shadow: 12px 12px 8px 0 rgba(0,0,0,.2); box-shadow: 12px 12px 8px 0 rgba(0,0,0,.2); box-sizing: border-box; display: none; margin: 0; padding: 10px 20px; position: absolute; top: 24px; left: 0; text-align: left; width: auto; z-index: 2000; } #upper-menu .sub-menu li { display: block; margin: 0; padding: 6px 0; white-space: nowrap; } #top-menu .sub-menu .current-menu-item > a:active, #top-menu .sub-menu .current-menu-item > a:hover, #top-menu .sub-menu .current-menu-ancestor > a:active, #top-menu .sub-menu .current-menu-ancestor > a:hover { padding-left: 0; } } /* Theme page submenu */ #theme-page-submenu { padding-top: 30px; } #theme-page-submenu li { display: inline-block; font-family: var(--font-secondary); margin-right: 30px; margin-bottom: 15px; } #theme-page-submenu li:first-child a { color: var(--color-blue-text); font-family: var(--font-condensed); font-size: 1.125rem; font-weight: 700; text-transform: uppercase; } #theme-page-submenu .current_page_item > a { border-bottom: 4px solid var(--color-green-lime); padding-bottom: 2px; } @media screen and (min-width: 1280px) { #theme-page-submenu li { margin-bottom: 22px; } #theme-page-submenu .current_page_item > a { padding-bottom: 6px; } } /** * 6.0 Images */ img { -ms-interpolation-mode: bicubic; border: 0; height: auto; max-width: 100%; vertical-align: middle; } embed, iframe, object, video, .entry-content img, .wp-caption { max-width: 100%; } .aligncenter, .alignleft, .alignright { display: block; padding-top: 6px; } .alignnone { margin-bottom: 10px; padding-top: 6px; } .aligncenter { margin: 0 auto 20px; } .alignleft, .alignright { margin: 10px 0 20px 0; } @media screen and (min-width: 600px) { .alignleft { float: left; margin: 10px 40px 20px 0; } .alignright { float: right; margin: 10px 0 20px 40px; } } .wp-caption-text { font-size: 1em !important; font-style: italic; margin-top: 10px; } #news-article-img + .wp-caption-text { margin: -25px 0 30px 0; } /** * 7.0 Galleries */ .gallery { margin: 40px auto; } .gallery:after { content: ""; clear: both; display: table; } .gallery-item { box-sizing: border-box; display: block; float: left; margin: 0.5%; padding: 0; text-align: center; vertical-align: top; width: 100%; } .gallery-item a:hover { opacity: 0.9; } .gallery-columns-2 .gallery-item { max-width: 49%; } .gallery-columns-3 .gallery-item { max-width: 32.33%; } .gallery-columns-4 .gallery-item { max-width: 24%; } .gallery-columns-5 .gallery-item { max-width: 19%; } .gallery-columns-6 .gallery-item { max-width: 15.66%; } .gallery-columns-7 .gallery-item { max-width: 13.28%; } .gallery-columns-8 .gallery-item { max-width: 11.5%; } .gallery-columns-9 .gallery-item { max-width: 10.11%; } .gallery-icon img { margin: 0 auto; } .gallery-caption { display: block; font-size: 0.875em; line-height: 1.25; padding: 0.5em 0; } .gallery-columns-6 .gallery-caption, .gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption { display: none; } /** * 8.0 Form */ .fluentform h2 { margin-bottom: 0; } .fluentform .ff-el-form-control { border-color: var(--color-blue-border) !important; border-radius: 3px !important; } .fluentform .ff-el-form-control:focus { border-color: var(--color-blue-text) !important; } .fluentform .ff-el-input--label label { font-weight: 400 !important; line-height: 1.2 !important; margin-bottom: 5px !important; } .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after { color: var(--color-blue-text) !important; } .ff-el-group input[type=checkbox] { height: 17px !important; margin-right: 15px !important; width: 26px !important; } .ff-el-group input[type=checkbox]:after { background-size: 12px !important; border-radius: 3px !important; height: 24px !important; margin-left: 0 !important; padding: 0 !important; width: 26px !important; } .fluentform .ff-btn-submit { background: var(--color-green-wcag) url('images/icon-send.svg') no-repeat right 15px center !important; background-size: 24px 21px; border-radius: 100px !important; font-size: 1.125rem !important; font-weight: 700 !important; margin-top: 10px; padding: 8px 66px 8px 36px !important; } .fluentform .ff-btn-submit:focus, .fluentform .ff-btn-submit:hover { background-color: var(--color-green-lime) !important; opacity: 1 !important; } @media screen and (min-width: 1280px) { .ff_submit_btn_wrapper { margin-top: -60px; } } .ff-message-success, .ff-message-failure { padding: 0 !important; border: 0 !important; -webkit-box-shadow: none !important; box-shadow: none !important; margin-top: 0 !important; } .fluentform .ff-el-group.option-voluntary.ff_list_buttons .ff-el-form-check { display: block; } .fluentform .ff-el-group.option-voluntary.ff_list_buttons .ff-el-form-check label>span { border: 1px dashed var(--color-blue-border) !important; border-radius: 3px !important; color: #000; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 1rem; font-weight: 400; line-height: 1.2; padding: 10px; text-align: left; white-space: break-spaces; } .fluentform .ff-el-group.option-voluntary.ff_list_buttons .ff-el-form-check label>span:hover { border-color: var(--color-green-wcag) !important; color: #000; } .fluentform .ff-el-group.option-voluntary.ff_list_buttons .ff-el-form-check.ff_item_selected label>span { color: #000; background-color: #fff; border-color: var(--color-green-wcag) !important; border-radius: 3px !important; } .option-voluntary .fas { color: #ccc; padding-left: 5px; } .form-text-voluntary { color: #AEAEAE; float: right; font-size: 0.9375rem; line-height: 1.6; } .input-voluntary .ff-el-input--label { display: block !important; } .input-voluntary label { width: 100%; } .input-voluntary .form-text-voluntary { line-height: 1.4; } .bordered-checkboxes { border-top: 1px solid var(--color-blue-border); border-bottom: 1px solid var(--color-blue-border); padding: 10px 0; } .bordered-checkboxes .ff-el-form-check { padding: 15px 0; } .bordered-form { background: #fff; border: 1px solid var(--color-blue-border); border-radius: 6px; box-sizing: border-box; box-shadow: 5px 5px 6px rgba(0,0,0,.04); padding: 25px 30px; } .field-small-margin { margin-bottom: 12px !important; } .fa-x-twitter { color: rgb(30,48,80); color: #000; }