@font-face {
font-family: 'Karla';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(//marikoo.fi/wp-content/themes/marikooch/fontit/Karla-Light.woff2) format('woff2');
}
@font-face {
font-family: 'Karla';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(//marikoo.fi/wp-content/themes/marikooch/fontit/Karla-Regular.woff2) format('woff2');
}
@font-face {
font-family: 'Karla';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(//marikoo.fi/wp-content/themes/marikooch/fontit/Karla-Medium.woff2) format('woff2');
}
@font-face {
font-family: 'Karla';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(//marikoo.fi/wp-content/themes/marikooch/fontit/Karla-SemiBold.woff2) format('woff2');
}
@font-face {
font-family: 'Karla';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(//marikoo.fi/wp-content/themes/marikooch/fontit/Karla-Bold.woff2) format('woff2');
}
@font-face {
font-family: 'Karla';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(//marikoo.fi/wp-content/themes/marikooch/fontit/Karla-ExtraBold.woff2) format('woff2');
}
@font-face {
font-family: 'Encode';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(//marikoo.fi/wp-content/themes/marikooch/fontit/EncodeSansExpanded-Medium.woff2) format('woff2');
}
@font-face {
font-family: 'Encode';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(//marikoo.fi/wp-content/themes/marikooch/fontit/EncodeSansExpanded-SemiBold.woff2) format('woff2');
}
@font-face {
font-family: 'Encode';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(//marikoo.fi/wp-content/themes/marikooch/fontit/EncodeSansExpanded-Bold.woff2) format('woff2');
}
@font-face {
font-family: 'Encode';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(//marikoo.fi/wp-content/themes/marikooch/fontit/EncodeSansExpanded-Black.woff2) format('woff2');
}
@font-face {
font-family: 'PlayWrite';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(//marikoo.fi/wp-content/themes/marikooch/fontit/PlaywriteHRLijeva-Regular.woff2) format('woff2');
}
@font-face {
font-family: 'PlayWrite';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(//marikoo.fi/wp-content/themes/marikooch/fontit/PlaywriteHRLijeva-Light.woff2) format('woff2');
}
html{scroll-behavior:smooth}
#wpadminbar {
position: relative!important;
}
#dc-result-1 {
margin-bottom: 1.5em;
}
.taptap-by-bonfire ul.menu>li ul {
border-left: none;
}
.taptap-by-bonfire ul.menu>li>a {
flex:none;
padding: 0;
}
.taptap-by-bonfire i.icon-angle-down {
color:#fff;
}
.taptap-by-bonfire ul.sub-menu li {
padding-left: 15px;
}
.taptap-by-bonfire span.taptap-sub-arrow
{
visibility: hidden;
}
body {
font-family: 'Karla', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 130%;
}
p {
margin-bottom: 1.1em;
}
a.lead, p.lead {
font-size: 1.2em;
}
p.alt-font {
font-family: 'PlayWrite';
font-weight: 300;
font-size: 1.7em;
margin-bottom: .2em;
}
h1, .h1,
h2.entry-title {
font-family: 'Encode', sans-serif;
font-style: normal;
text-transform: none!important;
letter-spacing: 0!important;
font-weight: 900;
font-size: 1.8em;
}
.home h1 {
font-size: 2.2em;
}
.page-id-2020 section.alaosa.kaikki,
.page-id-3594 section.alaosa.kaikki,
.page-id-3605 section.alaosa.kaikki {
display: none;
}
.button i {
top:0
}
.button i.icon-angle-right {
margin-left: 10px;
}
.button i.icon-angle-left {
margin-right: 10px;
}
.next-prev-nav .flex-col {
padding: 1.4em 0;
}
.next-prev-nav .svg-inline--fa {
font-size: 1.3em;
margin-bottom: 15px;
}
.next-prev-nav .fa-chevron-right {
padding-left: 2px;
}
.next-prev-nav .fa-chevron-left {
padding-right: 2px;
}
.next-prev-nav .flex-col+.flex-col, .bb, .bt {
border-color: rgba(0, 0, 0, 0.2);
}
.portfolio-page-wrapper {
position: relative;
}
.blog #main .section.ylaosa,
.blog .box-text-inner .is-divider,
.archive .box-text-inner .is-divider  {
display: none;
}
.portfolio-bottom img {
max-width: 60%;
}
.portfolio-box .image-cover img,
#main .banner-grid .img {
-o-object-fit: contain;
object-fit: contain;
}
.portfolio-box .box-image,
.portfolio-box .image-cover,
#main .banner-grid .img .img-inner,
.img .img-inner.image-zoom {
overflow: visible;
}
.portfolio-box .box-image::-webkit-scrollbar {
display: none;
}
.box-image .box-text .box-text-inner {
letter-spacing: 0.8px;
font-weight: 300;
font-size: 0.9em;
}
.single .entry-meta {
border-bottom: none!important;
border-top: none!important;
padding-bottom: 1.4em;
}
.blog h5.post-title,
.search h5.post-title {
margin-bottom: 0.4em;
}
.single #content,
.archive #content {
padding-top: 0;
}
.archive .row.row-large.row-divided {
margin-top: 1em;
}
input#dc-submit-1,
#wp24-dc-1 form {
margin-bottom: 0!important;
}
#yoast-bc {
padding: 0 20px;
font-size: .85em;
text-align: right;
width: 100%;
z-index: 1000;
}
.ylaosa h1 {
margin-bottom: 0.2em;
line-height: 1.1;
font-size: 2.5em;
}
.ylaosa p.lead {
font-size: 1.2em;
}
.sintaus .bg-fill {
background: #26ade4;
background: linear-gradient(140deg, #26ade4 0%, #000851 100%);
}
h2, h3, h4, h5, h6, .h2, .h3, .h4, .h5, .h6 {
font-family: 'Karla', sans-serif;
font-style: normal;
font-weight: 600;
letter-spacing: -1px;
line-height: 1.2;
color:#252525;
}
h2.iso, .iso h2 {
font-size: 2em;
font-weight: 600;
}
h2, .h2 {
font-size: 1.6em;
font-weight: 600;
}
h3, .h3 {
font-size: 1.4em;
font-weight: 500;
}
h4, .h4 {
font-size: 1.25em;
font-weight: 500;
}
h5, .h5 {
font-size: 1.12em;
font-weight: 500;
}
.alaosa.kaikki {
font-size: .95em;
}
.alaosa.kaikki h2 {
font-size: 1.4em;
}
.alaosa.kaikki .svg-inline--fa {
font-size: .9em;
opacity: .8;
margin-right: 2px;
}
.col-inner > h2:first-of-type,
.col-inner .text > h2:first-of-type
{margin-top: 0;}
#masthead.header-main ul li a {
font-family: 'Encode', sans-serif;
text-transform: none;
font-weight: 700;
}
#masthead.header-main .sub-menu li a {
font-family: 'Karla', sans-serif;
font-weight: 400;
}
#main a:not(.plain) {
font-weight:600;
position: relative;
-webkit-transition: all .3s;
transition: all .3s;
}
#main .banner-grid a {
position: static!important;
}
#main a.button {
font-weight: 700;
}
#main a:not(.button):not(.plain):not(.page-number) {
font-weight: 600;
display: inline-block;
-webkit-transition: all .3s;
transition: all .3s;
}
#main a.etuslinkki {
font-weight: normal;
color:inherit;
}
#main .box-image a {
display: block!important;
}
#main a:not(.button):not(.plain):not(.n2-ow):hover {
color:#41404087;
}
#main a.etuslinkki:hover {
color:#000!important;
opacity:.9!important;
}
#main a:not(.button):not(.plain):not(.n2-ow):before {
content: '';
display: block;
width: 0;
height: 2px;
background: #41404087;
transition: width .3s ease-in;
bottom: 0;
position: absolute;
}
#main a.etuslinkki:before {
background:#000!important;
opacity:.7!important;
}
#main a:not(.button):not(.plain):hover:before {
width: 100%;
}
#main a[rel~="external"]:before,
#main ul.sidebarul li a:before,
#main .next-prev-nav a:before,
#main ul.filter-nav li a:before,
#main .banner-grid a:before,
#main .img a:before,
#main a.n2-ow:before,
#main a.page-number:before  {
height: 0!important;
}
#main a[rel~="external"]:before:hover,
#main ul.sidebarul li a:before:hover,
#main .next-prev-nav a:before:hover,
#main ul.filter-nav li a:before:hover,
#main .banner-grid a:before:hover,
#main .img a:before:hover,
#main a.n2-ow:before:hover,
#main a.page-number:before:hover  {
width:0!important;
}
#main a[target="_blank"]:after {
display: inline-block!important;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-weight: 400;
font: var(--fa-font-regular);
content: "\f08e"!important;
position: relative;
padding-left: 5px;
padding-right: 3px;
top: -4px;
font-size: 0.7em;
}
#main .social-icons a[target="_blank"]:after {
content:' '!important;
}
.posted-on a {
color: inherit;
font-weight: 400 !important;
}
.posted-on,
.posted-on a:hover {
opacity: 1!important;
color:#777!important;
cursor: default!important;
}
#main .next-prev-nav a:hover:after {
width:0!important;
}
.pyorea img, img.pyorea {
border-radius: 500px;
}
.next-prev-nav .navipieni {
display: none;
}
a.next-link:hover .next-prev-nav .navipieni {
display: block;
}
.nav-previous,
.nav-next {
position: relative;
}
.nav-previous {
padding-left: 1.5em;
padding-right: .5em;
}
.nav-next {
padding-right: 1.5em;
padding-left: .5em;
}
.next-prev-nav .flex-right a {
flex-direction: row-reverse;
}
.next-prev-nav a {
display: inline-flex!important;
font-size: .9em;
}
.next-prev-nav i {
position: absolute;
}
.nav-previous i.icon-angle-left {
left:-1em;
}
.nav-next i.icon-angle-right {
right:-1em;
}
#content ul:not(.page-numbers):not(.nav):not(.sidebarul) li {
list-style: none;
position: relative;
margin-left: 2.1em;
}
#content ul.sidebarul li {
list-style: none;
line-height: 1.4;
font-weight: 600;
}
#content ul.sidebarul li a {
padding: 10px 15px;
font-size: .9em;
border: 1px solid rgb(53 119 160 / 40%);
}
#content ul.sidebarul li a:hover {
border: 1px solid rgb(53 119 160 / 100%);
}
#content ul:not(.page-numbers):not(.nav):not(.sidebarul) li::before  {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
font: var(--fa-font-regular);
color: #616161;
font-size: .85em;
content: '\f00c';
position: absolute;
font-weight 400;
left: -30px;
top: 10px;
}
#secondary ul li {
border-left: none!important;
padding-left: 0!important;
}
#content ol {
list-style: none;
counter-reset: my-awesome-counter;
padding-left: 40px;
}
#content ol li {
counter-increment: my-awesome-counter;
position: relative;
margin: 0 0 0.5rem 0; }
#content ol li::before {
content: counter(my-awesome-counter) ". ";
color: #616161;
font-weight: bold;
position: absolute;
--size: 32px;
left: calc(-1 * var(--size) - 5px);
line-height: var(--size);
width: var(--size);
height: var(--size);
text-align: center;
}
.kotisivupalvelut h4 {
font-family: 'Encode';
font-size: 1.05em;
font-weight: 700;
}
#content .kotisivupalvelut ul li {
font-size: .9em;
margin-left: 1.3em;
line-height: 1.4;
}
#content .kotisivupalvelut ul li::before {
font-size: 0.85em;
left:-20px;
top:9px;
}
#bread {
opacity: .7;
font-size: .8em;
text-align: right;
padding: 0 20px;
line-height: 1;
}
#bread span {
display: inline-block;
}
html:lang(en-US) .absolute-footer a,
html:lang(sv-SE) .absolute-footer a,
html:lang(es-ES)  .absolute-footer a,
html:lang(en-US) li.header-search,
html:lang(sv-SE) li.header-search,
html:lang(es-ES)  li.header-search {
display: none;
}
.blog .entry-category,
.archive .entry-category,
.post .entry-category,
.blog .byline,
.archive .byline,
.post .byline,
.blog footer.entry-meta,
.archive footer.entry-meta,
.archive .archive-page-header,
.search .badge.post-date,
.search .box .is-divider {
display: none;
}
.button.more-link {
text-transform: none;
}
li.wpml-ls-item span {
vertical-align: top;
}
li.wpml-ls-menu-item .wpml-ls-flag+span {
margin-left: .5em;
}
li.wpml-ls-menu-item ul.sub-menu {
min-width: 150px;
}
.wpcf7 strong {
font-size: .9em;
}
.wpcf7-list-item {
display: block;
}
.wpcf7-list-item {
margin-bottom: -15px;
}
.wpcf7-list-item.last {
margin-bottom: .6em;
}
.wpcf7-file {
color: transparent;
}
.wpcf7-file::-webkit-file-upload-button {
visibility: hidden;
}
.wpcf7-file::before {
content: 'Valitse tiedosto';
color: white;
display: inline-block;
background-color: var(--fs-color-primary);
box-sizing: border-box;
border: 1px solid transparent;
padding: 0 1.2em;
line-height: 2.4;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-weight: 700;
letter-spacing: .03em;
font-size: 17px;
}
.wpcf7-file:active {
outline: 0;
}
.wpcf7-file:hover::before {
box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .2);
color: #fff;
opacity: 1;
outline: none;
}
.wpcf7-spinner {
display: none;
}
input[type="email"], input[type="date"], input[type="search"], input[type="number"], input[type="text"], input[type="tel"], input[type="url"],
input[type="password"], textarea, select, .select2-container .select2-choice,
.select2-container .select2-selection {
background-color: rgba(255, 255, 255, 1);
height: 2.6em;
margin-bottom: 0.9em;
box-shadow: none;
font-size: .85em;
}
input[type="email"]:focus, input[type="date"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus,
input[type="password"]:focus {
box-shadow: 0 0 5px rgb(204 204 204 / 50%);
}
input[type="reset"]{
background-color: rgba(255, 255, 255, 1);
}
textarea {
height: auto;
}
input[type="submit"] {
padding: 0 1.5em;
min-height: 2.5em;
text-transform: none;
}
input[type="reset"] {
text-transform: none;
border-radius: 99px;
}
input.wpcf7-not-valid {
border-color: #e76868;
}
.wpcf7 .wpcf7-not-valid-tip,
.wpcf7 .wpcf7-not-valid-tip:after {
display: none;
}
.wpcf7 .wpcf7-not-valid-tip {
color:#e76868;
} .wpcf7 .wpcf7-response-output {
border-width: 0;
border-radius: 4px;
}
.page-id-481 input[type="email"],
.page-id-481 input[type="text"],
.page-id-481 input[type="tel"],
.page-id-481 input[type="url"],
.page-id-481 textarea,
.alaosa input[type="email"],
.alaosa input[type="text"],
.alaosa input[type="tel"],
.alaosa input[type="url"],
.alaosa textarea {
border: none;
background-color: transparent;
color:#fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: none;
vertical-align: bottom;
font-weight: normal;
padding-left: 0;
}
.page-id-481 input[type="email"]:focus,
.page-id-481 input[type="text"]:focus,
.page-id-481 input[type="tel"]:focus,
.page-id-481 input[type="url"]:focus,
.page-id-481 textarea:focus,
.alaosa input[type="email"]:focus,
.alaosa input[type="text"]:focus,
.alaosa input[type="tel"]:focus,
.alaosa input[type="url"]:focus,
.alaosa textarea:focus
{
box-shadow: none!important;
opacity: 1 !important;
outline: 0;
color: inherit;
font-weight: normal;
background-color:transparent;
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
font-weight: normal;
}
.page-id-481 input[type="reset"] {
color: #000;
background-color: rgba(255, 255, 255, .5);
}
.alaosa input[aria-invalid="true"],
.alaosatextarea[aria-invalid="true"],
.alaosa input[aria-invalid="true"],
.alaosa textarea[aria-invalid="true"] {
border-bottom: 1px solid rgba(195, 67, 61, 0.8);
} .wpcf7 form .wpcf7-response-output {
padding: 1em;
border-width: 0;
background-color:#26ade4;
margin:2em 0!important;
} .wpcf7 form.sent .wpcf7-response-output {
color:#fff;
background-color: #26ade4;
} .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {
background-color: #c3433d;
color:#fff;
border-width: 0;
} .wpcf7 form.spam .wpcf7-response-output {
background-color: #92221d;
color:#fff;
border-width: 0;
}
.back-to-top.button.is-outline {
bottom:60px;
border-color:#5c95d7;
}
.back-to-top.button.is-outline:hover {
border-color:#5c95d7;
background-color:rgba(65, 55, 56, 0.5);
}
.back-to-top.plain i.icon-angle-up:before {
color: #5c95d7;
}
.back-to-top.plain.button.is-outline:hover i.icon-angle-up:before {
color: rgba(255, 255, 255, .6);
}
.back-to-top.button.is-outline:hover {
background-color: rgba(65, 55, 56, 0.5);
}
table tr:nth-child(even) td {
background-color: #f6f6f6;
}
table tr:hover td {
background-color: #e7e7e7;
-webkit-transition: all .2s;
transition: all .2s;
}
th:first-child, td:first-child {
padding-left: 0.5em;
}
th:first-child, td:first-child {
padding-left: 0.5em;
}
.button span i {
margin-left: 7px;
}
.button i, button i {
top: auto;
}
i.icon-angle-right {
margin-left: 5px;
}
i.icon-angle-left {
margin-right: 5px;
}
.copyright-footer {
opacity: .7;
font-size: .9em;
}
.seloste_footer {
margin-left: 100px;
}
.otgs-development-site-front-end {
display: none;
}
a.button.white.is-outline:hover {
background-color: #e5e5e5 !important;
} #menu-mobiili li.has-child {
align-items: unset!important;
display: block!important;
flex-flow: unset!important;
}
#menu-mobiili .icon.angle-down {
display: none!important;
}
#menu-mobiili .icon.angle-down:before {
content: ""!important;
}
@media (max-width: 849px){
.portfolio-bottom img {
max-width: 70%;
}
.home h1 {
font-size: 1.8em;
}
.portfolio_title h1 {
display: block;
white-space: normal;
}
h2.iso, .iso h2 {
font-size: 1.6em!important;
}
.h2, h2 {
font-size: 1.4em!important;
}
.img.alignleft, img.alignright {
float:none!important;
display: block!important;
}
.ylaosa h1 {
font-size: 1.9em;
}
.ylaosa p.lead {
font-size: 1.1em;
}
}
@media (max-width: 549px){
.blog h5.post-title {
font-size: 1.5em;
}
.seloste_footer {
margin-left: 40px;
}
body {
font-size: 110%;
} .button span {
line-height: 1.3;
padding-top: 7px;
}
.home h1 {
font-size: 1.6em;
}
.ylaosa h1 {
font-size: 1.35em;
}
.ylaosa p.lead {
font-size: 1em;
}
h2.iso, .iso h2 {
font-size: 1.35em!important;
}
.h2, h2 {
font-size: 1.25em!important;
}
body:not(.home) h2, .h2 {
font-size: 1.5em!important;
}
body:not(.home) h3, .h3 {
font-size: 1.2em!important;
}
.portfolio-single-page .section.ylaosa {
margin-bottom: 1em;
}
#bread {
display: none;
}
.portfoliorow .row.large-columns-3 .col {
padding:0 30px 0;
margin-bottom: -50px;
}
.portfoliorow .row .col.large-12 {
padding: 0 30px 0;
}
.portfolio-bottom img {
max-width: 80%;
}
}
@media only screen and (max-width: 48em) {
h2 span::before,
h3 span::before,
h4 span::before,
p span::before,
span:not(.taptap-sub-arrow):not(.taptap-sub-arrow-inner)::before,
{
content: "\A";
white-space: pre;
}
a.button > span::before, .wpcf7 span::before {
content: '';
white-space: normal;
}
}