/* DEVKIT
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */
:root {
    --space: 25px;
    --small-space: 15px;
    --min-space: 10px;
    --side-paddings: 8%;
    --header-space: 60px;
}
@media screen and (min-width: 420px) and (max-width: 767px) {
    :root {
        --space: 30px;
        --small-space: 20px;
        --min-space: 15px;
        --header-space: 74px;
    }
}
@media screen and (min-width: 768px) {
    :root {
        --space: 45px;
        --small-space: 30px;
        --min-space: 20px;
        --header-space: 74px;
    }
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}

* {
    box-sizing: border-box;
}



/*remember to define visible focus styles!*/
:focus {outline:none;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}

/* Remove arrows from number input fields */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
.no-control-checkbox input {
    margin: 0 5px;
    height: 20px;
    width: 30px;
    background: #ffffff;
    border: 1px solid #d3d3d3;
    border-radius: 0;
    top: 0;
    left: 0;
    position: absolute;
    display: inline-block;
}
/* Resetting margins and padding */
button,body, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, 
.col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, 
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, 
.col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, 
.col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, 
.col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, 
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, 
.col-lg-12, .row, .container, .container-fluid, .row-fluid {
	padding: 0; 
	background:transparent;
	border:0;
	}
.row {
    margin-left: 0;
    margin-right: 0;
}
.content-container {
    padding-left: var(--side-paddings);
    padding-right: var(--side-paddings);
    position: relative;
    z-index: 1;
        width: 100%;
}
img {
    width:100%;
    height:auto;
    display: block;
    border-radius:0;
    box-sizing: border-box;
}
 section {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: scroll;
    background-repeat: no-repeat;
}
.transparent {background-color:transparent;}
.centering-wrap {position: relative;height: 100%;}
.centering-y {
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.centering-x {position: absolute;left: 50%;-ms-transform: translateX(-50%);-webkit-transform: translateX(-50%);transform: translateX(-50%);}
.centering {position: absolute;left: 50%;top: 50%;-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);width: 100%;}
@media screen and (max-width: 991px) {.no-centering-m {position: relative;top: unset;left: unset;height: auto;transform: none;}}
.center-txt {text-align: center;}
.left-txt {text-align: left;}
.right-txt {text-align: right;}

/* Näkyvyydet - periytyy nested-diveihin */
.op10 {opacity:.1}
.op20 {opacity:.2}
.op30 {opacity:.3}
.op40 {opacity:.4}
.op50 {opacity:.5}
.op60 {opacity:.6}
.op70 {opacity:.7}
.op80 {opacity:.8}
.op90 {opacity:.9}
.op100 {opacity:1}

/* Rajoittaa mobiili-collapsen leveytt‰ */
@media (max-width: 991px) {.mobile-collapse {max-width:600px;margin-left: auto;margin-right:auto;}}
@media and screen (max-width:991px){.col {padding-top:15px;padding-left:15px;padding-right:15px;padding-bottom:0px;}}
@media and screen (max-width:991px){.multirow {padding:0px;}}

.left {float:left;}
.right {float:right;}
.left-txt {text-align:left;}
.right-txt {text-align:right;}
.center-txt {text-align: center;}
.justify {text-align:justify;}
@media (max-width:767px) {
.center-txt-m {text-align: center;}
.left-txt-m {text-align: left;}
.right-txt-m {text-align: right;}
.justify-m {text-align:justify;}
}
.m-auto, .center {margin-left:auto;margin-right:auto;}
.mw50 {max-width:50px}
.mw100 {max-width:100px}
.mw150 {max-width:150px}
.mw200 {max-width:200px}
.mw250 {max-width:250px}
.mw300 {max-width:300px}
.mw350 {max-width:350px}
.mw400 {max-width:400px}
.mw450 {max-width:450px}
.mw500 {max-width:500px}
.mw550 {max-width:550px}
.mw600 {max-width:600px}
.mw650 {max-width:650px}
.mw700 {max-width:700px}
.mw750 {max-width:750px}
.mw850 {max-width:850px}
.mw800 {max-width:800px}
.mw900 {max-width:900px}
.mw1000 {max-width:1000px}
.mw1100 {max-width:1100px}
.mw1200 {max-width:1200px}

.mh300 {height:300px;}
.mh400 {height:400px;}
.mh500 {height:500px;}
.mh600 {height:600px;}
.mh700 {height:700px;}
@media (max-width:767px){
   .mh700m {height:80vh;} 
}
.mh800 {height:800px;}

.highlighted {color: #004d98;}
.highlighted:after {color: #004d98;}

.relative {position: relative;}
.absolute {position: absolute;}
.inline-block {display: inline-block;}
.block {display: block;}
.cover {background-size: cover;}
.verySmallFrame {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}
.smallFrame {
    max-width: 1020px;
    margin-left: auto;
    margin-right: auto;
}
.frame {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.brand-frame {max-width: 1360px;margin-left: auto;margin-right: auto;}
.full-height {height: 100vh;position: relative;}
.half-height {min-height: 50vh;position: relative;}
.iheight {height: inherit;}
.bottom {bottom: 0px;}
.left {left: 0px;}
.right {right: 0px;}
.top {top: 0px;}

/* Content inside collapse needs padding */
.collapsing > :first-child, .collapse > :first-child {padding-top: 20px;}
.collapsing > :last-child, .collapse > :last-child {padding-bottom: 20px;}

/* Margins */
.marg {margin:var(--space)}
.marg-small {margin:var(--small-space);}
.marg-minimal {margin:var(--min-space);}
.lr-marg {margin-left:var(--space);margin-right:var(--space);}
.lr-marg-small {margin-left:var(--small-space);margin-right:var(--small-space);}
.lr-marg-minimal {margin-left:var(--min-space);margin-right:var(--min-space);}
.tb-marg {margin-top:var(--space);margin-bottom:var(--space);}
.tb-marg-small {margin-top:var(--small-space);margin-bottom:var(--small-space);}
.tb-marg-minimal {margin-top:var(--min-space);margin-bottom:var(--min-space);}
.b-marg {margin-bottom: var(--space);}
.b-marg-small {margin-bottom:var(--small-space);}
.b-marg-minimal {margin-bottom: var(--min-space);}
.l-marg {margin-left: var(--space);}
.l-marg-small {margin-left:var(--small-space);}
.l-marg-minimal {margin-left: var(--min-space);}
.r-marg {margin-right: var(--space);}
.r-marg-small {margin-right:var(--small-space);}
.r-marg-minimal {margin-right: var(--min-space);}
.t-marg {margin-top: var(--space);}
.t-marg-small {margin-top:var(--small-space);}
.t-marg-minimal {margin-top: var(--min-space);}
.no-marg {margin:0 !important;}

/* Paddings */
.pad {padding: var(--space);}
.pad-small {padding: var(--small-space);}
.pad-minimal {padding: var(--min-space);}
.lr-pad {padding-left:var(--space);padding-right:var(--space);}
.lr-pad-small {padding-left:var(--small-space);padding-right:var(--small-space);}
.lr-pad-minimal {padding-left:var(--min-space);padding-right:var(--min-space);}
.t-pad, .tPad  {padding-top: var(--space);}
.t-pad-small {padding-top:var(--small-space);}
.t-pad-minimal {padding-top:var(--min-space);}
.tb-pad, .tbPad {padding-top:var(--space);padding-bottom:var(--space);}
.tb-pad-small {padding-top:var(--small-space);padding-bottom:var(--small-space);}
.tb-pad-minimal {padding-top:var(--min-space);padding-bottom:var(--min-space);}
.r-pad {padding-right:var(--space);}
.r-pad-small {padding-right: var(--small-space);}
.r-pad-minimal {padding-right:var(--min-space);}
.b-pad, .bPad  {padding-bottom:var(--space);}
.b-pad-small {padding-bottom:var(--small-space);}
.b-pad-minimal {padding-bottom:var(--min-space);}
.l-pad {padding-left:var(--space);}
.l-pad-small {padding-left: var(--small-space);}
.l-pad-minimal {padding-left:var(--min-space);}

.tPadExtra {
    padding-top: calc(var(--space) * 2);
}
.bPadExtra {
    padding-bottom: calc(var(--space) * 2);
}
/* Mobile size. a.k.a responsinator. */
.w-auto {width:auto;}
.w-auto img {width:auto;}

/* No paddings or margins */
.no-pad {padding: 0 !important;}
.no-b-pad {padding-bottom: 0px;}
.no-t-pad {padding-top:0px;}
.no-l-pad {padding-left: 0px;}
.no-r-pad {padding-right:0px;}
.no-t-marg {margin-top: 0px;}
.no-b-marg {margin-bottom: 0px;}
.no-l-marg {margin-left: 0px;}
.no-r-marg {margin-right: 0px;}

@media screen and (min-width: 768px) {
.desktop-l-pad {padding-left: 40px;}
}

@media (min-width:768px) and (max-width:991px) {
.sm-l-pad-small {padding-left: 30px;}
.sm-r-pad-small {padding-right: 30px;}
.sm-t-pad-small {padding-top: 30px}
.sm-b-pad-small {padding-bottom: 30px;}
.sm-pad-small {padding:30px;}
}

@media screen and (min-width: 991px) {
	.pad-small-noxs {padding: 30px;}
}

@media screen and (max-width: 991px) {
    .removePaddingOnMobile {padding: 0 !important;}
	.mh800m, .mh400m {
    height: auto;
	}
}

/* borders */
.border-top {border-top: 1px solid;}
.border-bottom {border-bottom: 1px solid;}
.border-left {border-left: 1px solid;}
.border-right {border-right: 1px solid;}
.border {border: 1px solid;}
.no-border-top {border-top:none;}
.no-border-bottom {border-bottom:none;}
.no-border-left {border-left:none;}
.no-border-right {border-right:none;}


/* */
.txt-larger {font-size: 1.2em;}
p + p { margin-top: var(--min-space); }
p + h4, p + h5 { margin-top: var(--small-space); }

img + h4, img + h3, img + h2, img + p { padding-top: 25px;}
h1 + p, h2 + p, ul + p, p + ul, p + H2, p + h3, ul + h2, ul + h3, ul + h4 { 
    padding-top: var(--small-space);
}
 h3 + p, h4 + p { 
    padding-top: var(--min-space);
}
@media (max-width:540px){
.hide-on-mobile {display: none;}
}
@media (min-width:990px){
    .mh75vh {
    min-height: 75vh;
    }
    .mh55vh {
    min-height: 55vh;
    }
}
/********************************************************
* FLEX TAITTO
********************************************************/ 
.flex-container {
    display: flex;
    flex-flow: row;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-column {
    display: flex;
    flex-flow: column;
    flex-basis: auto;
    justify-content: center;
    position: relative;
}
.module-wrap {
    width: 100%;
}
.valign-start,
.valignStart {
    align-items: flex-start;
}
.valign-center,
.valignCenter {
    align-items: center;
}
.valign-end,
.valignEnd {
    align-items: flex-end;
}
.valignSpaceBetween,
.valign-space-between {
    align-items: space-between;
}
.align-start,
.alignStart {
    justify-content: flex-start;
}
.align-center,
.alignCenter {
    justify-content: center;
}
.align-end,
.alignEnd {
    justify-content: flex-end;
}
.align-space-around,
.alignSpaceAround {
    justify-content: space-around;
}
.alignSpaceBetween,
.align-space-between {
    justify-content: space-between;
}
.col-w-20,
.col-w-25,
.col-w-28,
.col-w-30,
.col-w-33,
.col-w-40,
.col-w-46,
.col-w-50,
.col-w-60,
.col-w-66,
.col-w-75,
.col-w-100 {
    width: 100%;
    position: relative;
}
@media screen and (min-width:768px){
    .col-w-25 {
        width: 50%;
    }
    .col-w-28 {
        width: 28%;
    }
        .col-w-46 {
        width: 46.6666%;
    } 
}
@media screen and (min-width:991px){

    .col-w-50 {
        width: 50%;
    }
            .col-w-30 {
        width: 29%;
    }
        .col-w-40 {
        width: 36%;
    }
    .col-w-60 {
        width: 56%;
    }
}
@media screen and (min-width:1199px){
    .col-w-20 {
        width: 20%;
    }
    .col-w-25 {
        width: 25%;
    }

    .col-w-33 {
        width: 33.333%;
    }
/*
    .col-w-50 {
        width: 50%;
    }
*/
    .col-w-66 {
        width: 66.666%;
    }
    .col-w-75 {
        width: 75%;
    }
}