html {
    background-image:linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.5) 8%, rgba(0,212,255,0) 100%),url(../img/ks-bg.jpg);
    
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment: fixed;
	background-position:right top;
    height:100%;
}

body {
    font-family: 'Maven Pro', sans-serif !important;
    color:#223156;
}

/* LAYOUT */

.bluebg {
    background:#223156;
}

#logo {
    padding: 30px 30px 25px 30px;
    text-align:center;
}

#logo img {
    width: 150px;
    max-width: 70%;
}

#topbar {
    background:#FFF;
    margin-top:0;
    margin-bottom:0;
    margin-left:0;
    margin-right:0;
}

#userinfo,
#slogan {
    display: flex;
    align-items: center;
    padding:0 30px;
}

#slogan {
    font-size:26px;
    font-weight:400;
}

#flags {
    display: flex;
    align-items: right;
    padding: 20px;
}

/* NAV */

#app .navbar {
    background:#283b6b;
}

#app #ks-menu .navbar-item {
    color:#FFF;
    min-width:200px;
    justify-content:center;
    font-size:20px;
    background:#223156;
    padding:1.1rem 0.75rem;
    -webkit-transition: all 100ms ease-in-out;
	-moz-transition: all 100ms ease-in-out;
	-o-transition: all 100ms ease-in-out;
	transition: all 100ms ease-in-out;
}

#app #ks-menu .navbar-item.wide-navbar-item {min-width:300px;}

#app #ks-menu .navbar-home {
    min-width:90px;
    margin-left:190px;
}

#app #ks-menu a.navbar-item:hover {
    background-color: #283b6b;
    color: #fff !important;
}

#ks-menu a.navbar-item:after {
	content:'';
	position:absolute;
	bottom:-6px;
	border-top:solid 2px #ebebeb;
	height:0px;
	background:#223156;
	width:100%;
	opacity:0;
	display:block;
	left:0;
	-webkit-transition: all 100ms ease-in-out;
	-moz-transition: all 100ms ease-in-out;
	-o-transition: all 100ms ease-in-out;
	transition: all 100ms ease-in-out;
	z-index:99;
}

#ks-menu a.navbar-item:hover {
	background:#283b6b;
	color:#FFF;
	border:none;
	text-decoration:none;
}

#ks-menu a.router-link-exact-active::after,
#ks-menu a.navbar-item:hover::after {
	opacity:1;
	height:4px;
}

#app .box {border-radius:0 0 0 0;padding:0 2.25rem 2.25rem 2.25rem;background-color:#FBFBFB;color:#223156;position:relative;}
#app .title, #app .subtitle, #app p {color:#223156;}

#app .content p:not(:last-child), #app .content dl:not(:last-child), #app .content ol:not(:last-child), 
#app .content ul:not(:last-child), #app .content blockquote:not(:last-child), #app .content pre:not(:last-child), #app .content table:not(:last-child) {
    margin-bottom: 0.5em;
}

#app #userinfo > .button {
    position:absolute;
    right:30px;
}

#app #userinfo .button.kirjaudumodal {
    position:absolute;
    right:20px;
    margin-right:0;
}

#app input {border-radius:0 0 0 0;}

#app tbody tr:nth-child(odd) {
    background-color:#FFF;
}
#app tbody tr:nth-child(even) {
    background-color:#FBFBFB;
}
#app div.hoverable tbody tr:hover {
    background-color: #eef9ff;
}

#app .button {
    border-radius:0 0 0 0;
    -webkit-transition: all 100ms ease-in-out;
	-moz-transition: all 100ms ease-in-out;
	-o-transition: all 100ms ease-in-out;
	transition: all 100ms ease-in-out;
}

#app .select select:focus, #app .taginput .taginput-container.is-focusable:focus, 
#app .textarea:focus, #app .input:focus, #app .select select.is-focused, #app .taginput .is-focused.taginput-container.is-focusable, 
#app .is-focused.textarea, #app .is-focused.input, #app .select select:active, #app .taginput .taginput-container.is-focusable:active, 
#app .textarea:active, #app .input:active, #app .select select.is-active, #app .taginput .is-active.taginput-container.is-focusable, 
#app .is-active.textarea, .is-active.input {
    border-color: #223156;
    -webkit-box-shadow: 0 0 0 0.125em rgba(34, 49, 86, 0.25);
    box-shadow: 0 0 0 0.125em rgba(34, 49, 86, 0.25);
}

.summa {
    font-size: 3rem;
    font-weight:500;
    display: block;
    padding-left: 2.25rem;
    padding-right: 2.25rem;
    margin: 0 -2.25rem;
    background: #FFF;
}

#app .b-table .table {
    width: 100%;
    border: 1px solid transparent;
    border-collapse: separate;
    box-shadow: 0 10px 20px -18px rgba(0,0,0,0.6);
    border-radius: 0;
}

#app .b-table .table th {
    font-weight: 600;
    background: #dcdee3;
}

/* FOOTER */

#app > footer {
    margin-top:4rem;
}

#app footer .title,
#app footer p {
    color:#FFF;
}

#app footer p.subtitle {
    margin-bottom:0.5rem;
    color:#FFF;
    font-size:2rem;
}

#app footer img {
    width:160px;
    max-width:100%;
}

#app #tarvitsetko-apua p a {color:#FFF;text-decoration:underline;}
#tarvitsetko-apua {background:#283B6B;padding:2rem 0;}
#mika-on-koulutusseteli {background:#223156;padding:2rem 0;}
#copyright {background:#FFF;padding:1rem 0;}

#app footer #copyright p {
    color:#223156;
    font-size:0.8rem;
}

#mika-on-koulutusseteli .is-one-fifth {
    display:flex;
    align-items:center;
}

#app a {
    color:#283B6B;
}

#app .b-checkbox.checkbox input[type=checkbox]:checked + .check {
    background: #283B6B url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E) no-repeat center center !important;
    border-color: #283B6B !important;
}

#app b,
#app strong {
    font-weight:600;
}

#app .modal-background {
    background-color: rgba(34, 49, 86, 0.70);
}

/* MODAL */

#app .modal-card {
    width:500px !important;
    max-width:100%;
}

#app .modal-card-foot, #app .modal-card-head {border-radius: 0 0 0 0;}

.headline {
    text-align:center;
    margin:8rem 0 0 0;
}

#app .headline h1 {margin-bottom:0;font-size:7rem;color:#283B6B;letter-spacing:-0.5rem;text-align:right;line-height:1.5;}

#app .title {
    font-weight:600; 
    box-shadow: 0 1px 5px rgba(0,0,0,0.15);
    padding-left:1.625rem;
    padding-right:1.625rem;
    padding-top:1rem;
    padding-bottom:1rem;
    margin-left:calc(-2.25rem - 10px);
    margin-right:calc(-2.25rem + 10px);
    margin-top:10px !important;
    background:#283B6B;
    color:#fff;
    display:inline-block;
    margin-bottom:1.5rem !important;
    font-size:1.2rem;
    position:relative;
}

#app .title-presentation {
    background:#48BD54;
}
#app .title-presentation:after {
    border-top-color: #48BD54;
}
#app .title-presentation:before {
    border-top-color: #48BD54;
}
#app .koulutukset-boxes .title-presentation::after {
    border-top-color: #48BD54 !important;
}

#app .title:after {
    display:block;
    content:'';
    position:absolute;
    right:-10px;
    top:0;
    border-top:53px solid #283B6B;
    border-right:10px solid transparent;
}
#app .title:before {
    display:block;
    content:'';
    position:absolute;
    left:-0px;
    top:53px;
    border-top:10px solid #223156;
    border-left:10px solid transparent;
}

#app .label:not(:last-child) {
    margin-bottom: 0.2em;
}

.koulutukset-boxes img {
    width: 100px;
    position:absolute;
    top:30px;
    right:2.25rem;
}

#app .navbar-burger {color:#FFF;margin-right:22px;background: transparent;border: 0;-webkit-tap-highlight-color: rgba(0,0,0,0);outline: -webkit-focus-ring-color auto 0px;}
#app .navbar-burger:active,#app .navbar-burger:focus {border:0 !important;}
#app .navbar-burger span {height:2px;width:25px;}

#app .koulutukset-boxes .button.is-primary {margin-top:10px;}
#app .koulutukset-boxes .title {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    font-size: 1rem;
    padding-right:1rem;
    padding-left:1.5rem;
}
#app .koulutukset-boxes .title::after {
    display: block;
    content: '';
    position: absolute;
    right: -10px;
    top: 0;
    border-top: 37.2px solid #283B6B;
    border-right: 10px solid transparent;
}
#app .koulutukset-boxes .title::before {top:37.2px;}

/* KOULUTUKSET */

.koulutuksen-hinta {
    position: absolute;
    text-align: center;
    color: #48BD54;
    letter-spacing:-0.1rem;
    font-weight: 600;
    font-size: 38px;
    right:2.25rem;
}

.koulutuksen-hinta > span {
    font-size:1rem;
}

#app h2.koulutuksen-otsikko {
    margin-bottom:0;
    color:#223156;
    margin-top:0rem;
}
 
#app p.koulutuksen-ajankohta {
    font-size:0.8rem;
}

#app .koulutuksen-teksti {
    margin:1rem 0;
}

#app .modal-card-head {background:#223156}
#app .modal-card-title {color:#FFF;}
#app .modal-card-foot {padding: 0 20px 30px 20px;background:#FFF;border:0;}
#app .unohditko-salasanan {font-size:0.9rem;}
#app .modal .animation-content .modal-card {margin: auto;}

#app .kirjautunut-info {
        line-height: 1.2;
        font-size: 0.9rem;
        text-align: right;
        width: 100%;
        padding-right: 175px;
}

#app .kirjaudu-ulos-mobile {display:none;}

#app select, #app .file-cta, #app .file-name {border-radius:0;}

#app .fullwidth {width:100%;}

/* MEDIA QUERIES */

@media screen and (max-width: 1408px) {
    #app #ks-menu .navbar-home {margin-left:15px;}
}

@media screen and (max-width: 1216px) {
    #app #ks-menu .navbar-item {min-width:150px;font-size:17px;}
    #slogan {font-size:20px;}
}

@media screen and (max-width: 1024px) {
    #app #slogan {display:none;}
    #app .headline h1 {font-size:3rem;letter-spacing:-2px;}
    #app .headline {padding-right:32px;margin-top:3.5rem;}
    #app #ks-menu .navbar-home {margin-left:0px;display: flex;align-content: center;justify-content: left;}
    #app #ks-menu {padding:0 0 0 0;}
    #ks-menu a.navbar-item:after {display:none;}
    #app #ks-menu a.navbar-item {padding-left:30px;padding-right:30px;}
    #tarvitsetko-apua,#mika-on-koulutusseteli,#copyright {padding:2rem;}
}

@media screen 
  and (min-width: 768px) 
  and (max-width: 1216px){
    .koulutuksen-hinta {position:relative;right:auto;}
}

@media screen 
  and (min-width: 768px) 
  and (max-width: 850px){
    .koulutukset-boxes img {width:70px;}
}

@media screen and (max-width: 768px) {
    html {background-attachment:scroll;background-color:#eeeeee !important;}
    #logo {padding: 25px 30px 15px 30px;}
    #app #userinfo {position:absolute;display:block;z-index:9999;}
    #app #userinfo > .button {left:30px;top:10px;font-size:13px;}
    #app .kirjautunut-info {
    line-height: 1.2;
    font-size: 0.9rem;
    text-align: left;
    width: 100%;
    padding-left: 0px;
    color: #FFF;
    padding-top: 7px;
    padding-right:0;
    }
    #app .kirjautunut-info a {color:#FFF;}
    #app .koulutukset-boxes .title {padding-left:1rem;}
    #app .title {margin-left:-2.25rem;margin-right:0;padding-left:1rem;}
    #app .title::before {display:none;}
    #app #userinfo > .button.kirjaudu-ulos {
        color: #FFF;
        background:transparent;
        border:0;
        border-right: solid 1px #ccc;
        padding-left: 20px;
        display:none;
    }
    #logo {text-align:left;}
    #app .kirjaudu-ulos-mobile {
        display:block;
        color: #FFF;
        position: absolute;
        right: 0;
        top: 0;
        background: transparent;
        border: none;
        margin-top: 12px;
        margin-right: 15px;
    }
    #app .tile.is-ancestor {
        margin-left: -0rem;
        margin-right: -0rem;
    }
    #app .box {
        margin-left: -0.75rem !important;
        margin-right: -0.75rem !important;
    }
}

@media screen and (max-width: 360px) {
    #app .koulutukset-boxes .button.is-primary {font-size:15px;}
    .koulutuksen-hinta {font-size:26px;}
}