/*
 * Theme Name: Sitebuilders
 * Author: Sitebuilders Finland Oy
 * Version: 1.0.7
 * Orange : #e88d18
 */
html {height:100%;}
body {background: #fff;font-family:Roboto;min-height:100%;height:100%;fill:currentColor;}
h1 {font-family: BebasNeue;}
h2 {font-family:Roboto;font-weight:500; font-size:1.6em;color:#3f474a;margin-bottom: 0.4em;}
h3 {font-size:1.3em;}
h4 {font-size:1.2em;}
h5 {font-size:1.1em;}
h6 {font-size:1.1em;}
p + h2, ul + h2, ol + h2 {margin-top:30px;}
b, strong {font-weight:500;}

header {background:#002438;width:100%;min-height:65px;/*box-shadow: 0 0 15px rgba(255,255,255,0.2);*/}
header .nav {padding-top: 18px;}
header .nav a {color:#fff;text-transform:uppercase;font-family:Roboto;font-size:0.9em;font-weight:500}
a, .nav-link {color:#004a73; text-decoration:none;transition:color .3s linear;}
a { text-decoration:underline;}
a:hover {text-decoration:underline; color:#002438}
h2 a:hover {text-decoration:none;}
.nav-link {padding:.5rem .6rem;}
.nav-link:focus, .nav-link:hover {color:#f09623;text-decoration:none;}

footer {background: #4e595f; color: #ddd;padding-top: 30px; font-size: 0.8em;}
footer h2, footer h3 {color: #fefefe;}
footer .menu {list-style-type:none;padding-left:0;}
footer .nav-link {padding:0;color: #ddd;}
footer a {color: #ddd;}
footer a:hover {color:#fff;text-decoration:none;}

.mainPage {min-height:100%;}
img {animation-name:fadeIn;animation-duration:1s;animation-timing-function:ease-in;}

/* Front page slogan */
.frontMainImage { 
    background-color: #002438;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8'?%3e%3csvg version='1.1' viewBox='0 0 1920 1080' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='1919' height='1079' fill='%23002438' stroke='%23002438'/%3e%3cpath d='m89.4 1.0516 907.66-0.15624 425.41 1080.1-1181 0.01z' color='%23000000' fill='%23003d5f' stroke-linecap='round' stroke-linejoin='round' stroke-width='.62725' style='paint-order:stroke fill markers'%3e%3c/path%3e%3cpath d='m860.34-3.8063-860.79 2.2013 0.099416-2.2017z' color='%23000000' fill='%230070ad' opacity='.4' stroke-linecap='round' stroke-linejoin='round' style='paint-order:stroke fill markers'%3e%3canimate id='topShape' fill='freeze' attributeName='d' begin='0s' dur='2s' from='m 860.3417,-3.8062582 -860.79259855,2.2012711 0.0994156,-2.201669 z' repeatCount='1' to='M 860.3417,-0.47166747 -0.45089855,179.25122 -0.35148293,-0.50415268 Z' values='m 860.3417,-3.8062582 -860.79259855,2.2012711 0.0994156,-2.201669 z;M 860.3417,-0.47166747 -0.45089855,179.25122 -0.35148293,-0.50415268 Z'/%3e%3c/path%3e%3cpath d='m1263.9 1079.6-1264.4-0.4998-0.10558 0.5002z' color='%23000000' fill='%230070ad' opacity='.2' stroke-linecap='round' stroke-linejoin='round' style='paint-order:stroke fill markers'%3e%3canimate fill='freeze' attributeName='d' begin='topShape.end' dur='4s' from='m 1263.9152,1079.6461 -1264.43847689,-0.4998 -0.10557874,0.5002 z' repeatCount='1' to='M 1263.9152,1079.1757 -0.52327689,762.89695 -0.62885563,1079.3964 Z' values='m 1263.9152,1079.6461 -1264.43847689,-0.4998 -0.10557874,0.5002 z;M 1263.9152,1079.1757 -0.52327689,762.89695 -0.62885563,1079.3964 Z'/%3e%3c/path%3e%3c/svg%3e ");
}
.frontMainImage.pageSize {padding: 0 15px;}
.frontMainImage {color:#fff;background-size:cover;}
.frontMainImage > .container {padding:80px 0;}
.frontMainImage h1 {color:#fff;padding-left:0;}
.slogan {margin-bottom:30px;}
/*.frontMainImage .btn {background:#e88d18;color:#fff;text-transform:uppercase;font-family:BebasNeue;font-size:1.1em;}
.frontMainImage .btn {letter-spacing:0.06em;} */

.container-fluid {padding:0;}
.pageSize {min-height:100vh}
.slogan {font-size:1.1em;letter-spacing:0.05em;}
.container.narrow {max-width:800px;}
.readMore {background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' id='svg1723' version='1.1' viewBox='0 0 16 16' class='bi bi-arrow-right-circle-fill' fill='currentColor' height='26' width='26'%3e%3cpath style='fill:%23004a73;fill-opacity:1' id='path1721' d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z' /%3e%3c/svg%3e ");background-repeat:no-repeat;background-position:0 center;padding-left:35px;padding-top: 4px;}

.wp-block-column > h2 {margin-top: 40px;}

.blueBg {background:#002438;color: #fff;padding: 30px 0;margin: 0 0 60px;}
.blueBg h2 {color:#bbb}
.greyBg {background:#ebeeee;/*color:#fff;color: #fff;*/padding: 30px 0;margin:60px 0 0;}
.btn {background:#002438;color:#e88d18;font-weight:bold;text-transform:uppercase;transition: transform 0.1s linear, box-shadow 0.2s linear;}
a.btn:hover {text-decoration:none;color:#eca140;box-shadow:0 0px 15px rgba(150, 150, 150, 0.3);}
.btn-check:focus + .btn, .btn:focus {box-shadow:none;}
a.blue { background:#004A73; color:#fff; font-weight:bold;text-transform:uppercase;transition: transform 0.1s linear, box-shadow 0.2s linear;}
a.blue:hover {text-decoration:none;color:#eca140;box-shadow:none;}

/* Latest Posts */
.wp-block-latest-posts a {font-size:1.3em;font-family: BebasNeue;line-height: 1.2em;}
.latest-posts h3 {font-size:1.2em; margin-top:25px;}

/* Posts */
.container img {max-width: 100%;height: auto;}
.mainPage ol > li {padding: 5px 0;}
.blockquote {background-color:#e9e9e9;padding: 20px 10px 20px 40px;border-radius: 10px;margin-bottom:30px;color:#3f474a;text-shadow: 0 1px 2px #fff;}
ul.blockquote {padding:30px 10px 30px 30px;}
blockquote.blue {background: #0070ad;color: #fff;padding:20px;font-size: 1.2em;margin:25px 0;}
blockquote.blue p {border-left:4px solid #e88d18;padding-left:10px;}
blockquote.blue cite {font-size:0.9em;}
blockquote.blue sup {color:#fff;}
p.resources {background-color:#e9e9e9;padding:30px 10px 30px 30px;margin-bottom:30px;color:#3f474a; }
p.resources a { text-decoration: underline;}
figcaption { font-style: italic; color:#3f474a}

/* form */
label { color: #3f474a; }
.wpforms-required-label { color: #3f474a !important; }

/* cookie Notice */
.cookie-notice-container .cn-button.bootstrap {background:#222;}
.cookie-notice-visible {box-shadow: 0 0 15px rgba(255,255,255,0.2);}

.home .container {margin-left:auto;margin-right:auto;}

/* Chat */
.chatLoad {
    width: 80px;
    height: 60px;
    position: fixed;
    bottom: 20px;
    z-index: 1000;
    right: 20px;
    background:url(images/chat_c.svg) no-repeat;
    background-repeat:no-repeat;
    background-size: contain;
    animation-name: fadeIn;
    animation-duration:2s;
    animation-timing-function: ease-in;
    cursor:pointer;
}
.chatLoad.close {animation-name:fadeOut;animation-duration:1s; animation-timing-function:ease-in;opacity:0;}
.chatLoad.minify {width:40px;height:30px;}

@media (max-width:576px){
   .alignright, .alignleft {clear:both;display:block;}
   
}
@media (max-width:768px){
    .naviContainer {height:40px;width:40px;position:relative;background-repeat: no-repeat;background-position: center center ;background-size:30px 30px;float:right;font-size:0.9em;background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8'?%3e%3csvg version='1.1' viewBox='0 0 10.583 10.583' xmlns='http://www.w3.org/2000/svg' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cmetadata%3e%3crdf:RDF%3e%3ccc:Work rdf:about=''%3e%3cdc:format%3eimage/svg+xml%3c/dc:format%3e%3cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage'/%3e%3cdc:title/%3e%3c/cc:Work%3e%3c/rdf:RDF%3e%3c/metadata%3e%3cg transform='translate(-54.24 -55.562)'%3e%3crect id='a' x='54.24' y='55.563' width='10.627' height='1.7465' ry='.40002' fill='%23fff' fill-opacity='.98997'/%3e%3cuse transform='translate(2e-5 4.4267)' width='100%25' height='100%25' xlink:href='%23a'/%3e%3cuse transform='translate(-.027105 8.8535)' width='100%25' height='100%25' xlink:href='%23a'/%3e%3c/g%3e%3c/svg%3e");}
    .naviContainer > ul {display:inline-block;background:#002438;visibility:hidden;opacity:0;position:absolute;z-index:-100;top:100%;transition:opacity .2s linear, z-index .2s linear, visibility .2s linear;transition-delay:3s;right:0;box-shadow:0 5px 10px #000; padding: 10px 20px;}
    .naviContainer:hover > ul {opacity:1;z-index:100;transition-delay: 0s;visibility:visible;}
    .homeLink {display: inline-block;width: 90px;}
    
}

@media (min-width:576px){
    .home .main {margin-top: -75px;}
    .home .main .pageSize > .container { position: absolute;bottom: 30%; left: 20%;width:auto;animation-name:down;animation-duration:2s;}
    .alignright {float:right;margin:0 0 15px 15px;max-width:50%;}
    .alignleft {float:left;margin:0 15px 15px 0;max-width:50%;}
    header {min-height:65px}
   
}
@media (min-width:769px){
    h1 {font-size:2.3rem;}
    .blockquote {padding:30px 10px 30px 30px;}
    ul.blockquote {padding:30px 10px 30px 50px;}
     blockquote.blue {padding: 20px 30px;}
     
    .chatLoad {
        width: 120px;
        height: 90px;
    }
}
@media (min-width:1400px){
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1140px;
    }
}

/* Scroll offset */
:target:before {
    content: "";
    display: block;
    height: 80px;
    margin: -50px 0 0;
}

/* Fonts */
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
    
}@font-face {
    font-family: 'BebasNeue';
    src: url('fonts/BebasNeue.woff') format('woff');
    font-weight:normal;
    font-style: normal;
    font-display: swap;
}
@keyframes fadeIn {
  from {opacity:0;}
  to {opacity:1;}
}
@keyframes fadeOut {
  from {opacity:1;}
  to {opacity:0;}
}
@keyframes down {
    from {bottom:40%;}
    to {bottom:30%;}
}