/*
 Theme Name:     Divi Child Theme - PH Kesa YO
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Juha Kerminen
 Author URI:     http://www.cubescom.fi/
 Template:       Divi
 Version:        1.0.0
*/
@import url("../Divi/style.css");
@import url("./courses/style.css");

/*
If you use VS code / Comment Anchors is used here
*/

/*
@media only screen and (max-width: 1200px) {}
@media only screen and (max-width: 1130px) {}
@media only screen and (max-width: 980px) {}
@media only screen and (max-width: 768px) {}
*/

/* SECTION css variables */

body {
    --brand-colors-main: #0e4350;
    --brand-colors-second: #cbe2db;
    --brand-colors-additional: #facd07;
    --brand-colors-additional-hover: #b89600;
    /* --- categories --- */
    --brand-colors-category-1: #5b3141;
    --brand-colors-category-2: #39532c;
    --brand-colors-category-3: #a59079;
    --brand-colors-category-4: #c36217;
    /* -- -- */
    --brand-gap: 4px;
}

/* !SECTION  */

/* SECTION HTML */

*:focus{
    outline: solid 1px var(--brand-colors-second)!important;
    background-color: rgba(0,0,0,0.2)!important;
}
body {
    font-size: 16px!important;
    font-family: "Overpass", sans-serif!important;
    font-weight: 400;
    background-color: #0e43501f;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Overpass", sans-serif!important;
    color: var(--brand-colors-main);
    font-weight: bolder!important;
    line-height: 1.1em!important;
}
strong {
    font-weight: 700;
}
body:not(.home) a {
    color: #006fd1;
}
a {
    border-bottom: transparent 1px solid;
}
a:hover {
    border-bottom: var(--brand-colors-additional) 1px solid;
}
#sidebar a,
h2 a {
    color: inherit!important;
}
p {
    font-weight: 400;
}
dd {
    margin-left: 0;
}
button{
    font-size: 16px;
}
/* !SECTION  */

/* SECTION DIVI styles */

/* button component */
body a.et_pb_button{
    font-size: initial!important;
    color: var(--brand-colors-main)!important;
    background-color: var(--brand-colors-additional)!important;
    border: none!important;
    padding: 0.3em 2em!important;
    height: 52px!important;
    display: inline-flex!important;
    align-items: center!important;
    justify-content: center!important;
}
body a.et_pb_button:hover{
    background-color: var(--brand-colors-additional-hover)!important;
    border: none!important;
}

/* !SECTION  */

/* SECTION GLOBAL template styles styles  */

/* -- Page main -- */
#et-main-area {
    margin-top: 100px;
}
.pagination {
    margin-top: calc( var(--brand-gap) * 4);
}
.widget_search input#searchsubmit  {
    background-color: var(--brand-colors-additional);
    color: black;
    border: none;
    padding: 0 calc(var(--brand-gap) * 6);
}
@media only screen and (max-width: 980px) {
    #et-main-area {
        margin-top: 80px;
    }
}
@media only screen and (max-width: 768px) {}

@media only screen and (max-width: 1200px) {
    .et_boxed_layout #page-container {
        width: 100%;
    }
}
@media only screen and (max-width: 768px) {}

/* !SECTION  */

/* SECTION HEADER */
.logo_container a:hover{
    border-color: transparent;
}
#main-header {
    background-color: var(--brand-colors-main)!important;
}
/* header height */
#main-header > .container {
    height: 100px;
}
#main-header.et-fixed-header > .container {
    height: 60px;
}
#main-header > .et_menu_container {
    width: calc(100% - (var(--brand-gap) * 4) * 2)!important;
    margin: 0 calc(var(--brand-gap) * 4)!important;
}
body.admin-bar.et_fixed_nav.et_secondary_nav_enabled #main-header {
    top: 30px;
}
body.et_fixed_nav.et_secondary_nav_enabled #main-header {
    top: 0px;
}

/* ? */
.et_pb_section_first:not(.hero) {
    padding-top: 35px!important;
}

/* remove height animation */
.et_fixed_nav #et-top-navigation {
    -webkit-transition: all .0s ease-in-out!important;
    transition: all .0s ease-in-out!important;
}

@media only screen and (max-width: 1200px) {
    .et_fixed_nav.et_boxed_layout #page-container #main-header{
        width: 100%;
    }
}
@media only screen and (max-width: 768px) {}

/* !SECTION  */

/* SECTION MENUS  */

/* --- frontpage educatoin menu --- */

.education-menu a {
    display: inline-flex;
    gap: var(--brand-gap);
    align-items: center;
    line-height: 1rem;
}
.education-menu a::after {
    content: " ";
    background: url(./img/arrow.svg) no-repeat top left;
    width: 10px;
    height: 10px;
    min-height: 10px;
    min-width: 10px;
    display: inline-block;
    transform: rotate(-90deg) translateX(1px);
}

/* --- secondary - top news letter ---*/
#et-secondary-nav {
    position: absolute;
    top: var(--brand-gap);
    right: calc( var(--brand-gap) * 2);
    z-index: 2;
    height: 15px;
    transition: height 0s linear .5s;
    overflow: hidden;
    line-height: 1.1rem;
}
#et-secondary-nav a {
    font-size: 12px;
    opacity: 1;
    transition: opacity .25s;
    color: var(--brand-colors-second);
}
.et-fixed-header #et-secondary-nav {
    height: 0;
}
.et-fixed-header #et-secondary-nav a{
    opacity: 0;
}
/* --- primary - desktop and mobile --- */

/* remove default arrow */
#et-top-navigation li {
    position: relative;
}
#et-top-navigation a::after {
    display: none;
}
/* new arraw button*/
.toggle-sub-menu {
    position: absolute;
    right: 4px;
    bottom: 0;
    top: -1px;
    /**/
    background-color: transparent;
    border: none;
    padding: 0;
    /**/
    background-image: url(./img/arrow.svg);
    background-repeat: no-repeat;
    background-position: 6px 5px;
    width: 22px;
    height: 22px;
    min-height: 22px;
    min-width: 22px;
    display: inline-block;
}
#mobile_menu .toggle-sub-menu {
    background-position: 17px 15px;
    width: 43px;
    height: 43px;
    min-height: 43px;
    min-width: 43px;
}
/* show */
.sub-menu.show {
    visibility: visible;
    opacity: 1;
}
/* hide mobile sub */
#et_mobile_nav_menu .sub-menu:not(.show){
    visibility: hidden!important;
    opacity: 0!important;
    display: none!important;
}
/* primary sub menu position */
#top-menu > li > a{
    padding: 4px 0!important;
}
/* primary last child*/
#top-menu > li,
#top-menu > li:last-child {
    padding-right: 26px;
}
#top-menu > li:last-child > ul {
    right: 0;  
}
/* sub menu top line */
.et_mobile_menu,
.nav li ul{
    border-top: 3px solid var(--brand-colors-second)!important;
}
/* navigation back color */
#et-top-navigation .et_mobile_menu,
#et-top-navigation .sub-menu {
    background-color: var(--brand-colors-main)!important;
}
/* current color */
#et-top-navigation li.current-menu-ancestor > a
{
    color: white;
    border-bottom: dashed 2px var(--brand-colors-additional);
} 
#et-top-navigation li.current-menu-item > a
{
    color: white;
    border-bottom: solid 2px var(--brand-colors-additional);
}

/* --- submenu --- */

/* hide sub-menu show current */
#nav_menu-2 .sub-menu {
    display: none;
}
#nav_menu-2 .current-menu-parent .sub-menu,
#nav_menu-2 .current-menu-item .sub-menu {
    display: block;
}
/* current look */
#nav_menu-2 a {
    color: #6c6c6c;
}
#nav_menu-2 li.current-menu-item a,
#nav_menu-2 .current-menu-parent a {
    color: black!important;
}
#nav_menu-2 .sub-menu {
    margin-top: .5em;
}
/* active and hover */
#nav_menu-2 li.current-menu-item > a {
    border-bottom: solid 2px var(--brand-colors-additional);
}
#nav_menu-2 a:hover {
    border-bottom: solid 2px var(--brand-colors-additional);
}
@media only screen and (max-width: 980px) {
    #nav_menu-2 {
        display: none;
        visibility: hidden;
        opacity: 0;
    }
}
@media only screen and (max-width: 768px) {}

/* !SECTION  */

/* SECTION PAGE template */

.hero-page {
    background-position: center;
    background-size: cover;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.hero-page strong {
    margin: calc(var(--brand-gap) * 4) calc(var(--brand-gap) * 6);
}
.hero-page strong .slogan{
    color: white;
    font-size: 1.5em;
    line-height: 1.2em;
    width: 50%;
    display: inline-block;
    text-shadow: 0 0 10px rgba(0,0,0,0.4);
}
.hero-page .hero_content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: var(--brand-colors-main);
    border-radius: 0 500px 0 0;
    padding: 30px;
    padding-right: 150px;
    margin-right: 40%;
    font-size: 1.2rem;
}

@media only screen and (max-width: 980px) {
    .hero-page .hero_content {
        border-radius: 0 250px 0 0;
    }
}
@media only screen and (max-width: 768px) {
    .hero-page strong .slogan {
        width: 100%;
    }
    .hero-page .hero_content {
        padding-right: 30px;
        border-radius: 0 100px 0 0;
        width: 90%;
    }
}

/* !SECTION  */

/* SECTION FRONTPAGE template */

/* hero */

.hero-frontpage {
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
    min-height: 565px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.hero-frontpage h1 {
    margin: calc(var(--brand-gap) * 12) calc(var(--brand-gap) * 6);
}
.hero-frontpage h1 .slogan {
    color: white;
    font-size: 1.5em;
    line-height: 1.2em;
    width: 50%;
    display: inline-block;
    text-shadow: 0 0 10px rgba(0,0,0,0.4);
}
.hero-frontpage .hero_content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: var(--brand-colors-main);
    border-radius: 0 500px 0 0;
    padding: 30px;
    padding-right: 150px;
    width: 80%;
    max-width: 800px;
}
.hero-frontpage .hero_content a,
.hero-frontpage .hero_content h2 {
    color: white;
}
.hero-frontpage .hero_content nav {}

@media only screen and (max-width: 980px) {
    .hero-frontpage .hero_content {
        border-radius: 0 250px 0 0;
    }
}
@media only screen and (max-width: 768px) {
    .hero-frontpage h1 .slogan{
        font-size: 1em;
    }
    .hero-frontpage .hero_content {
        padding-right: 30px;
        border-radius: 0 100px 0 0;
        width: 90%;
    }
}

.home h2:not(.entry-title, .et_pb_module_heading) {
    text-transform: uppercase;
}

.front-post .et_pb_blog_grid .et_pb_post {
    background-color: transparent;
    padding: 0;
}
.front-post .post-content {
    display: none;
}

/* Poimintoja */

.nostot .et_pb_text_inner > div,
.nostot .et_pb_text_inner > p { 
    padding-bottom: 70%;
    position: relative;
    margin-bottom: calc(var(--brand-gap) * 4);
}
.nostot .et_pb_text_inner > * > img {
    object-fit: cover;
    object-position: bottom;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.nostot h3{
    font-size: 18px;
}
@media only screen and (max-width: 980px) {
    .et_pb_gutters2 .et_pb_column_1_3, 
    .et_pb_gutters2.et_pb_row .et_pb_column_1_3{
        width: 31.3333%;
    }
    .et_pb_gutters2 .et_pb_column, 
    .et_pb_gutters2.et_pb_row .et_pb_column {
        margin-right: 3%;
    }
}
@media only screen and (max-width: 768px) {
    .nostot .et_pb_column{
        width: 90%!important;
        margin-left: 5%;
    }
}
/* article feed */

body.home .et_pb_blog_grid .et_pb_salvattore_content {
    display: flex;
}
body.home .et_pb_blog_grid .column {
    position: relative;
}
body.home .et_pb_blog_grid .column > article {
    margin-bottom: 0!important;
}
body.home .et_pb_blog_grid .column > article h2{
    padding-bottom: 0px;
    font-size: 16px!important;
}
body.home .et_pb_blog_grid .column:not(:last-child):after {
    content: ' ';
    background-color: var(--brand-colors-second);
    opacity: .5;
    height: 100%;
    width: 1px;
    display: inline-block;
    position: absolute;
    top: 0;
    right: -16px;
}
@media only screen and (max-width: 980px) {
    body.home .et_pb_blog_grid .et_pb_salvattore_content {
        flex-direction: column;
    }
    body.home .et_pb_blog_grid .column > article {
        margin-bottom: calc( var(--brand-gap) * 5 )!important;
    }
    body.home .et_pb_blog_grid .column:not(:last-child):after {
        display: none;
    }
}
@media only screen and (max-width: 768px) {}
/* some feed */

#ff-stream-2, 
#ff-stream-2 .ff-popup, 
#ff-stream-2 .ff-search input {
    background-color: transparent!important;
}
.ff-item *{
  box-shadow: none!important;
} 
.ff-content{
    font-size: initial!important;
    margin: calc(var(--brand-gap) * 6 ) 0!important
}

.ff-btn {
    border-radius: 0!important;
    color: var(--brand-colors-main)!important;
    background-color: var(--brand-colors-additional)!important;
}
.ff-btn:hover {
    background-color: var(--brand-colors-additional-hover)!important;
}

@media only screen and (min-width: 981px) {
    .ff-stream-wrapper{
        margin-top: 0!important;
        margin-left: -30px!important;
        width: calc( 100% + 60px)!important;
    }
}

@media only screen and (max-width: 980px) {
}
@media only screen and (max-width: 768px) {
}

/* !SECTION  */

/* SECTION FOOTER */

#main-footer {
    position: relative;
    background-color: var(--brand-colors-main)!important; 
    overflow: hidden;
    min-height: 250px;
}
#main-footer::before {
    content: " ";
    position: absolute;
    right: -50px;
    top: 0;
    width: 300px;
    height: 100%;
    background-image: url(./img/icon_big.png);
    background-repeat: no-repeat;
    background-size: 280px;
    opacity: .2;
    z-index: 0;
    background-position: -1px -26px;
}
#footer-bottom {
    background-color: var(--brand-colors-main)!important;
}
/* footer content */
.footer-section {
    position: relative;
    display: flex;
    justify-content: space-between;
    z-index: 1;
}
.footer-section > div {
    padding: calc( var(--brand-gap) * 8 ) calc( var(--brand-gap) * 16 );
}
.footer-logo {}
.footer-some-links {
    display: flex;
    gap: calc( var(--brand-gap) * 2);
}
.footer-some-links a {
    background-color: var(--brand-colors-additional);
    border-radius: 100%;
    width: 46px;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-some-links a svg { 
    fill: white; 
}
.footer-nav {}
.footer-nav a {
    color: white!important;
    white-space: nowrap;
}

@media only screen and (max-width: 980px) {
}
@media only screen and (max-width: 768px) {
    .footer-section {
        flex-direction: column;
    }
}

/* !SECTION  */
.sb-wall-items-wrap{
    margin: 0 -10px;
}
.sbsw-item {

}
[id^=sb-wall].sb-wall .sbsw-item-inner {
    box-shadow: none!important;
}
.sbsw-item-inner {
    display: flex;
    flex-direction: column;
}
.sbsw-follow{
    order: 1;
}
.sbsw-item-header{
    order: 2;
    padding: 15px 0 !important;
}
.sbsw-item-media{
    order: 1;
}
.sbsw-item-bottom-content {
    order: 2;
}
.sbsw-content-text{
    padding-left: 0!important;
    padding-right: 0!important;
}
.sbsw-item-footer {
    order: 2;
    padding-left: 0!important;
    padding-right: 0!important;
}
.sbsw-author-name p {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: rgb(59, 61, 64) !important;
}
.sb-wall-footer {
    margin-top: 30px !important;
    display: flex;
    justify-content: center;
}
.sb-wall-load-btn {
    border-radius: 0 !important;
    color: var(--brand-colors-main) !important;
    background-color: var(--brand-colors-additional) !important;
    width: auto !important;
    padding: 10px 40px !important;
    text-transform: uppercase;
    border-width: 0 !important;
    box-shadow: none !important;
}

.cff-posts-wrap { 
    margin: 0 -10px;
    display: block;
}
.cff-item {
    display: flex !important;
    flex-direction: column !important;
    padding: 0!important;
}
.cff-media-wrap {
    order: 1;
    margin-bottom: 12px;
}
.cff-author {
    order: 2;
}
.cff-post-text {
    order: 2;
}
.cff-meta-wrap{
    order: 3;
}
.cff-load-icon{
    display: none!important;
}
.cff-view-comments {
    box-shadow: none!important;
    background-color: transparent!important;
    width: 100%!important;
    border-top: solid 1px #edecec!important;
    border-radius: 0!important;
}

.cff-shared-link {
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    border: none !important;
}
.cff-shared-link .cff-text-link {
    display: none;
}

.cff-load-more {
    border-radius: 0 !important;
    color: var(--brand-colors-main) !important;
    background-color: var(--brand-colors-additional) !important;
    width: auto !important;
    padding: 10px 40px !important;
    text-transform: uppercase;
    border-width: 0 !important;
    white-space: nowrap;
    margin: 0 calc(100% / 2 - 175px / 2) !important;
}