@import url(https://fonts.googleapis.com/css?family=Economica:400,700,400italic,700italic);
@import url(https://fonts.googleapis.com/css?family=Patua+One);
@import url(https://fonts.googleapis.com/css?family=Droid+Sans);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab);
@import url(https://fonts.googleapis.com/css?family=Quando);

nav.path img.icon {
    opacity: 1;
}

/*FONTIT*/
h1,
h2,
h3,
nav,
h1 a,
h1 a:link,
h1 a:visited {
    font-family: "Roboto Slab", sans-serif;
}

h3 {
    font-size: 1.5rem;



    line-height: 1.4;
}

body,
div.content.enclose {
    font-family: "Droid Sans", serif;
}

h1,
header h1.toplevel a,
nav.main h2 {
    font-family: "Roboto Slab", serif;
}


header h1.toplevel a span span {
    font-family: "Patua One", serif;
    font-size: 3rem;
    color: #F57814 !important;
    text-shadow: none;
}


/***/
html {
    background: #DDDDDD;
    --bannerimage: url(https://peda.net/dev/urok/elotori/s:file/download/6bbb1e5918e56edda5a1a8f6dcb690db2b35e25a/soap-bubble-1983918_1920.jpg);
    --bannerheight: minmax(max(14rem, 18vh), auto);
    --bannerbackgroundposition: 50% 50%;
    --bannerbackgroundsize: cover;
    --bannerbackground: #F7EBDA;
    --base-color: #DE4D13;
    --base-color-semi-light: #e67548;
    --base-color-light: #ee9d7d;
}

html:before {
    background: #E1E3E0;
    border-bottom: solid 0.25rem #e95e27;
}

body>header>body > header > .banner { background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.2) 40rem), url("https://peda.net/dev/theme/teemat/temp/style2/kyna_banneri-jpg:file/download/"); }

.banner {
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.2) 40rem), url("https://peda.net/dev/theme/teemat/temp/style2/kyna_banneri-jpg:file/download/");
}

html { --bannerimage: url(https://peda.net/dev/urok/elotori/s:file/download/6bbb1e5918e56edda5a1a8f6dcb690db2b35e25a/soap-bubble-1983918_1920.jpg); --bannerheight: minmax(max(14rem,18vh), auto); }

body > header > .banner { background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0.2) 40rem), url("https://web.archive.org/web/20250117110227im_/https://peda.net/dev/theme/teemat/temp/style2/kyna_banneri-jpg:file/download/"); }

html { --bannerbackgroundposition: 50% 50%; }

html { --bannerbackgroundsize: cover; }

html { --bannerbackground: #F7EBDA; }

.banner {
    background: linear-gradient(#FEFEFE, #F1F1F1);
    background: url(https://peda.net/dev/urok/elotori/s:file/download/6bbb1e5918e56edda5a1a8f6dcb690db2b35e25a/soap-bubble-1983918_1920.jpg) #fff;
    background-size: cover;
    background-position: 50% 50%;
    background-color: #F7EBDA;
    /*background-image: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0.2) 40rem), url("https://web.archive.org/web/20250117110227im_/https://peda.net/dev/theme/teemat/temp/style2/kyna_banneri-jpg:file/download/");*/
    border-bottom: solid 0.1rem #e95e27;
    background-repeat: no-repeat;
}




/*Bannerin yläpuolisen palkin varitys*/
header nav.global {
    /*background: linear-gradient(#E85E27, #C24F20);*/
    background: linear-gradient(#004494, #003676);
    color: #fff;
}


/* Tällä määritellään että otsikossa koulun nimi näkyy isoilla kirjaimilla, vaikka palvelun tiedoissa nimi kirjoitetaan normaalisti */



/* Tällä määritellään sivun ikonin koko, kun käytössä on kaikki kolme otsikkoriviä */

header h1.toplevel a.withsubtitle1.withsubtitle2 img {
    height: 3.0rem;
    max-width: 3.0rem;
    padding-top: 0.2rem;
    padding-bottom: 0.6rem;
}

/* Sivun pääotsikon fonttimääritys 

header h1.toplevel a.withsubtitle1.withsubtitle2
{
    color: #002D64;
    font-family: 'Economica', 'Arial', sans-serif;
    font-size: 2.2rem;
    font-weight: bold;
}
*/
/*Murupolun taustakuva ja vari*/

nav.path .toplevel>.pathitem {
    background: transparent;
    background: rgba(0, 0, 0, 0.2);
    /*background: linear-gradient(#004494, #003676);*/
    color: #fff;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

/* Murupolun linkkien vari otsikon jalkeen */


header .path .toplevel a {
    color: #fff;
}

/*Murupolun viimeisen linkin vari*/

header h1.toplevel .pathitem.redundant a {
    color: #fff;
}

/*Murupolun efekti*/

header h1.toplevel a:hover,
header h1.toplevel a:active {
    color: #fff;
    text-shadow: 0 0 0.2rem #FFFFFF, 0 0 0.3rem #FFFFFF, 0 0 0.4rem #FFFFFF;
}

header .path .pathitem a:hover,
header .path .pathitem a:active {
    color: #002d64;
    /*color: #fff;*/
    text-shadow: 0 0 0.2rem #FFFFFF, 0 0 0.3rem #FFFFFF, 0 0 0.4rem #FFFFFF;
}

header .path .toplevel a:hover,
header .path .toplevel a:active {
    color: #fff;
    text-shadow: 0 0 0.2rem #FFFFFF, 0 0 0.3rem #FFFFFF, 0 0 0.4rem #FFFFFF;
}

.content {
    font-family: 'Arial', sans-serif;
    line-height: 1.5;
}



/*navigoinnin muutos*/

nav.main nav.virtualsub li a,
nav.main nav.sub .service a {
    border: 0;
    border-left: 0.2rem solid #002D64;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

nav.main nav.virtualsub li a:hover,
nav.main nav.sub .service a:hover {
    background: #E1E1E1;
}



/* Moduulien ulkoasu */

article article>header h1 {
    padding-bottom: 0;
    font-family: 'Economica', 'Arial', sans-serif;
}

article article {
    border: 0;
    /*border-top: 5px solid #83B18A;*/
    border-top: 5px solid #DE4D13;
}

article article>header ul.actions,
article article.document>header ul.actions {
    margin-bottom: 1rem;
    margin-top: 1rem;
}

article.module,
article.learningresource {
    background: #fff;
    color: #000;
}

article .content.enclose a {
    color: #83B18A !important;
    text-decoration: underline;
}

article article article {
    box-shadow: none;
    border-top: 2px solid #83B18A;
}

.comments article {
    border-top: 1px solid #83B18A;
}

article.rssitem {
    border-top: 0;
}

article.rssitem>main {
    padding-left: 0rem;
    padding-right: 0rem;
}

article article article h1 {
    font-size: 1.25rem;
}



header h1.toplevel a span span {
    text-shadow: 0px 0px 0.2rem #FFF, 0px 0px 0.3rem #FFF, 0px 0px 0.4rem #FFF;
}

/*Banneriotsikon efekti*/
/*Sivun banneriotsikon efekti*/
header h1.toplevel a span span {
    text-shadow: 0 0 0.2rem #fff, 0 0 0.1rem #fff, 0 0 0.1rem #fff, 0 0 0.1rem #fff, 0 0 0.1rem #fff;
    /*text-shadow: 0px 0px 0.2rem #FFF, 0px 0px 0.3rem #FFF, 0px 0px 0.4rem #FFF;*/
}

header h1.toplevel a:hover span span {
    text-shadow: 0px 0px 0.2rem #FFF, 0px 0px 0.3rem #FFF, 0px 0px 0.4rem #FFF;
}

/*Tyhja murupolku*/
header h1.toplevel>.pathitem.placeholder,
header h1.toplevel>.pathitem.redundant {
    min-height: 0rem;
    padding: 0;
}

html:before>article.withnavigation {
    max-width: 83rem;
}

html:before>article {
    max-width: 70rem;
}

div.authors {
    display: none;
}

article>header>div.timestamp {
    display: none;
}

article article article {
    border-top: none;
}

article>main>article>header>h1 {
    display: none;
}

html:before>article>main>article>header>h1 {
    display: block;
}

aside article>main>article>header>h1 {
    display: block;
    font-size: 1rem;
}


div.content.enclose>h3 {
    color: #F57814;
}


article article header+main {
    padding-bottom: 0rem;
}

div.content.enclose>h3 {
    margin-top: 0rem;
}


article .content.enclose a {
    text-decoration: none;
    color: #F57814 !important;
}



div.content.enclose span.left {

    margin: 0.3rem 1.3rem 0.2rem 0.0rem;

}

html:before>article.withnavigation.remptynav {
    max-width: 70rem;
}


header h1.toplevel a:hover,
header h1.toplevel a:active {
    color: #002d64;
}

header h1.toplevel a.withsubtitle1.withsubtitle2>span {
    display: inline-flex;
    flex-direction: column;
}

a.withsubtitle1.withsubtitle2>span span {
    order: 1;
}

a.withsubtitle1.withsubtitle2>span .subtitle1 {
    order: 2;
}

a.withsubtitle1.withsubtitle2>span .subtitle2 {
    order: 3;
}

header h1.toplevel a.withsubtitle1>span,
header h1.toplevel a.withsubtitle2>span {
    vertical-align: top;
}


header h1.toplevel a span span {
    text-shadow: none;
}

header h1.toplevel a .subtitle1,
header h1.toplevel a .subtitle2 {
    font-family: "Droid Sans", "serif";
    font-weight: bold;
    color: #000;
    text-transform: uppercase;
    font-size: 1rem;
}


header h1.toplevel a .subtitle1 {
    margin-top: 0.7rem;
}

h1.maincontent {
    display: none;
}

html:before>article>header>h1 {
    display: none;
}

div.content.enclose>h3 {
    margin-top: 1rem;
    margin-bottom: 0rem;
}

h1 a,
h1 a:link,
h1 a:visited {
    color: #000;
    font-size: 30px;

}

aside,
h1 a,
h1 a:link,
h1 a:visited {
    font-size: 1rem;
color: #F57814;

}

.banner h1 a {
    background: transparent;
}

header h1.toplevel a.withsubtitle1.withsubtitle2 img {
    max-width: none;
    height: 8rem;
    width: 8rem;
}

.banner h1 {
    padding-bottom: 4rem;
    padding-top: 4rem;

}

.blogmodule .blogentry>header>h1 {
    display: none;
}

aside,
h1 a,
h1 a:link,
h1 a:visited {
    font-size: 1.6rem;
}

header h1.toplevel a.withsubtitle1 img {

    max-width: none;
    height: 8rem;
    width: 8rem;

}


.flex-column {
    display: flex;
    flex-direction: column;
}