/*
 Theme Name:     Divi Child
 Theme URI:      https://www.jonasdesign.dk
 Description:    Divi Child Theme
 Author:         Jonas Pedersen
 Author URI:     https://www.jonasdesign.dk
 Template:       Divi
 Version:        1.0.1
*/

/* =Theme customization starts here
------------------------------------------------------- */

/*-----------------------------------
	DIVI OVERRIDES
------------------------------------*/

/*Sections*/

.et_pb_section {}

/*Rows*/

.et_pb_row {}

/*Columns*/

.et_pb_column {}

/* Kolonner KUN hvis 2 */

.et_pb_column.et_pb_column_1_2 {}

/* Kolonner KUN hvis 3 */

.et_pb_column.et_pb_column_1_3 {}

/* Main header before scroll */

#main-header {
    box-shadow: none;
}

/* Main header after scroll */

#main-header.et-fixed-header {
    box-shadow: none !important;
}

/* Logo */

#Logo {}

/* Top Navigation */

#et-top-navigation {}

/* Main Menu List Item */

#top-menu li {
    padding-right: 15px;
    padding-left: 10px;
}

@media only screen and (min-width: 400px) {
    #top-menu li {
        padding-right: 22px;
        padding-left: 15px;
    }
}

#top-menu li a {}

/* Main Menu Drop Down Arrow */

#top-menu .menu-item-has-children > a:first-child:after {}

/* Searcg icon */

#et_search_icon:before {}

/* Top header */

#top-header {}

/* Blog post */

.et_pb_blog_grid .et_pb_post {}

/* Post Image */

.et_pb_blog_grid .et_pb_image_container img {}

/* Post Title */

.et_pb_blog_grid .et_pb_post h2 a {}

/* Post Meta */

.et_pb_blog_grid .et_pb_post .post-meta {}

/* Post Meta Links */

.et_pb_blog_grid .et_pb_post .post-meta a {}

/* Post Preview Text */

.et_pb_blog_grid .et_pb_post p:not(.post-meta) {}

/* Full Width Blog */

.et_pb_post {}

/* Full Width Blog Image */

.et_pb_post a img {}

/* Post Title */

.et_pb_post h2 a {}

/* Post meta Links */

.et_pb_post .post-meta a {}

/* Full Width Post Preview */

.et_pb_post p:not(.post-meta) {}

/* Margin bottom på en hel post */
.single .et_pb_post {
    margin-bottom: 0px;
}

/* Bredde på rows på mobile enheder */
@media only screen and (max-width: 980px) {

    #top-header > .container,
    #main-header > .container,
    #et_search_outer > .container,
    #main-content > .container,
    div.et_pb_row,
    div.et_pb_row.et_pb_row_fullwidth {
        /*width: 90% !important;*/
    }
}

/* Styling af accent farve */
.mobile_menu_bar:before {
    color: #fff;
}

#top-menu a {
    color: hsla(0, 0%, 20%, 1.0);
}

#top-menu li.current-menu-item > a {
    color: hsla(0, 0%, 20%, 1.0);
}

/* Dislplay NONE på mobile nav (burger menu) */
@media only screen and (max-width: 980px) {
    #top-menu {
        display: block;
    }

    #et_mobile_nav_menu {
        display: none;
    }

    .et_header_style_left #et-top-navigation,
    .et_header_style_left .et-fixed-header #et-top-navigation {
        display: block;
        padding-top: 33px;
    }
}

/* Column stacking order */

@media all and (max-width: 980px) {

    /*** wrap row in a flex box ***/
    .custom_row {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        /* Safari 6.1+ */
        flex-wrap: wrap;
    }

    /*** custom classes that will designate the order of columns in the flex box row ***/
    .first-on-mobile {
        -webkit-order: 1;
        order: 1;
    }

    .second-on-mobile {
        -webkit-order: 2;
        order: 2;
    }

    .third-on-mobile {
        -webkit-order: 3;
        order: 3;
    }

    .fourth-on-mobile {
        -webkit-order: 4;
        order: 4;
    }

    /*** add margin to last column ***/
    .custom_row:last-child .et_pb_column:last-child {
        margin-bottom: 30px;
    }

}



/*-----------------------------------
	TYPOGRAPHY
------------------------------------*/

html {
    font-size: 16px;
}

body {
    font-family: "IBM Plex Sans", Helvetica, Arial, Lucida, sans-serif;
    color: hsl(0, 0%, 20%);
}

sub {
    top: .3em;
    font-size: smaller;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "IBM Plex Mono", Helvetica, Arial, Lucida, monospace;
    color: hsl(0, 0%, 10%);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-top: 1.5em;
    margin-bottom: 0.6em;
    padding: 0;
    line-height: 1.3em;
    hyphens: none;
}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
  margin-top: 0.6em;
}

h1,
.et_pb_column_1_3 h1,
.et_pb_column_1_4 h1,
.et_pb_column_1_5 h1,
.et_pb_column_1_6 h1,
.et_pb_column_2_5 h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
	font-size: clamp(2rem, 1.4545rem + 2.7273vw, 3.5rem);
	font-size: clamp(2rem, 1.6364rem + 1.8182vw, 3rem);
}

h2,
.et_pb_column_1_3 h2,
.et_pb_column_1_4 h2,
.et_pb_column_1_5 h2,
.et_pb_column_1_6 h2,
.et_pb_column_2_5 h2 {
    font-size: clamp(1.8rem, 4.8vw, 3rem);
	font-size: clamp(1.6rem, 1.2727rem + 1.6364vw, 2.5rem);
}

h3,
.et_pb_column_1_3 h3,
.et_pb_column_1_4 h3,
.et_pb_column_1_5 h3,
.et_pb_column_1_6 h3,
.et_pb_column_2_5 h3 {
    font-size: clamp(1.6rem, 4.6vw, 2.5rem);
	font-size: clamp(1.4rem, 1.1818rem + 1.0909vw, 2rem);
}

h4,
.et_pb_column_1_3 h4,
.et_pb_column_1_4 h4,
.et_pb_column_1_5 h4,
.et_pb_column_1_6 h4,
.et_pb_column_2_5 h4 {
    font-size: clamp(1.4rem, 4.6vw, 2rem);
	font-size: clamp(1.3rem, 1.2273rem + 0.3636vw, 1.5rem);
}

h5,
.et_pb_column_1_3 h5,
.et_pb_column_1_4 h5,
.et_pb_column_1_5 h5,
.et_pb_column_1_6 h5,
.et_pb_column_2_5 h5 {
    font-size: clamp(1.3rem, 4.6vw, 1.5rem);
	font-size: clamp(1rem, 0.9545rem + 0.2273vw, 1.125rem);
}

h6,
.et_pb_column_1_3 h6,
.et_pb_column_1_4 h6,
.et_pb_column_1_5 h6,
.et_pb_column_1_6 h6,
.et_pb_column_2_5 h6 {
    font-size: clamp(1.125rem, 4.6vw, 1.25rem);
	font-size: clamp(1rem, 0.9545rem + 0.2273vw, 1.125rem);
}

p {
	font-size: clamp(1rem, 0.9545rem + 0.2273vw, 1.125rem);
	font-size: clamp(0.875rem, 0.8295rem + 0.2273vw, 1rem);
    font-weight: 400;
    line-height: 1.5em;
    letter-spacing: 0.01em;
    margin-bottom: 1.5em;
    padding-bottom: 0em;
}

a {}

a:hover {}

.entry-content ul, .entry-content ol {
	font-size: clamp(1rem, 0.9545rem + 0.2273vw, 1.125rem);
    font-weight: 400;
    line-height: 1.5em;
    letter-spacing: 0.01em;
	padding: 0 0 1.5em 1em;
}

.entry-content ol {
	padding: 0 0 1.5em 0;
}

.entry-content ul li, .entry-content ol li {
	line-height: 1.5em;
	margin-bottom: 0.75em;
}

.entry-content ol li::marker {
	font-weight: 600;
}


.work-section h3 {
  margin-top: 0;
  margin-bottom: 0;
}

.work-section h5 {
  margin-top: 1rem;
  margin-bottom: 0;
}


/*-----------------------------------
	NAME
------------------------------------*/

/*-----------------------------------
	HOME
------------------------------------*/

.btn-check_out_my_work:hover:after {
    margin-left: .6em !important;
}

.btn-get_in_touch:hover:after {
    margin-left: .9em !important;
}

.home-section__hero {}

.home-section__hero .et_pb_row {
    padding-left: 60px !important;
    width: 90%;
}

.home-section__hero h1,
.home-section__hero h2,
.home-section__hero h3 {
    color: #0d0e48 !important;
    z-index: 9999;
}

.home-section__hero-title h1 {
    font-size: clamp(32px, 4.2vw, 50px);
    margin-top: 40px !important
}

.home-section__hero-subtitle h2 {
    font-size: clamp(20px, 2.4vw, 28px);
    letter-spacing: 0.12em;
    margin-top: -1.1em;
    margin-bottom: 2.5em !important;
}

.home-section__hero-quote h3 {
    font-size: clamp(28px, 4.3vw, 52px) !important;
    line-height: 1.2em;
    font-weight: 500;
    font-style: italic;
    margin-bottom: 70px;
}

.home-section__hero-quote span {
    color: #f59922;
    font-weight: 700;
}

.home-section__hero-img {
    z-index: 1;
}

@media only screen and (max-width: 980px) {
    .home-section__hero .et_pb_row {
        padding-left: 30px !important;
        padding-top: 30px !important;
    }

    .home-section__hero-title h1 {
        margin-top: 0px !important
    }

    .home-section__hero-quote h3 {
        width: 15ch;
    }

    #works {
        margin-top: -500px !important;
        background: #fff;
        z-index: 99;
    }

    #works .et_pb_code_0 {
        margin-top: -460px !important;
    }
}

@media only screen and (min-width: 600px) {
    .home-section__hero .et_pb_image_0 {
        transform: scaleX(1.04) scaleY(1.04) translateX(144px) translateY(-352px) !important;
    }
}

@media only screen and (max-width: 599px) {
    .home-section__hero .et_pb_button_0_wrapper {
        display: none;
    }

    #works {
        margin-top: 0px !important;
        padding-top: 0px;
    }

    #works .et_pb_code_0 {
        margin-top: 0px !important;
    }
}

@media only screen and (min-width: 981px) {
    .home-section__hero .et_pb_image_0 {
        transform: scaleX(1.5) scaleY(1.5) translateX(1px) translateY(44px) !important;
    }
}

/*-----------------------------------
	PROJECTS
------------------------------------*/

/* Fonts */
.single-project h1 {}


.single-project h2 {
    /*margin-bottom: 1em;*/
    text-transform: uppercase;
    /* letter-spacing: .04em; */
}

.single-project .et_pb_text:not(:has(h1, h2)) {
  max-width: 700px;
  /*margin: auto;*/
}

.text_highlight-problem {
    background: var(--project_contrast_color);
    color: var(--project_default_color);
    padding: 0em 0.3em;
}

.text_highlight {
    position: relative;
}

.text_highlight:after {
    background-color: rgba(0, 0, 0, 0.5);
    background-color: #ffc800;
    background-color: hsl(47deg 100% 60%);
    content: "";
    height: 30%;
    position: absolute;
    left: 0;
    margin-left: -0.1em;
    top: 65%;
    width: calc(100% + 0.15em);
    z-index: -1;
}

/* Header og Navigation */
.single-project #main-header {
    background-color: var(--project_default_color);
}

.single-project #main-header.et-fixed-header {
    background-color: var(--project_default_color);
}

.single-project #top-menu a {
    color: var(--project_contrast_color) !important;
}

@media only screen and (min-width: 981px) {
    .single-project .et-fixed-header #top-menu a {
        color: var(--project_contrast_color) !important;
    }
}

/* Alle sections i single-project */
.single-project .et_pb_section {
    background-color: hsla(0, 0%, 0%, 0);
    padding: 0px;
    padding-top: 70px;
    padding-bottom: 30px;
    margin: 0px;
    /*    border-bottom: 1.5px solid var(--project_default_color);*/
}

@media only screen and (max-width: 980px) {
    .single-project .et_pb_section {
        padding: 30px 0px;
    }
}


/* Alle tekst-moduler i single-project */
/* overvej at samle dem i en bundle med komma */
.single-project .et_pb_row .et_pb_column_3_5 .et_pb_module.et_pb_text,
.single-project .et_pb_row .et_pb_column_2_5 .et_pb_module.et_pb_text,
.single-project .et_pb_row .et_pb_column_4_4 .et_pb_module.et_pb_text,
.single-project .et_pb_row .et_pb_column_1_3 .et_pb_module.et_pb_text,
.single-project .et_pb_row .et_pb_column_2_3 .et_pb_module.et_pb_text,
.single-project .et_pb_row .et_pb_column_1_2 .et_pb_module.et_pb_text {
    margin-bottom: 10px;
}

/* TITLE */
.jc-project__section-title {
    background-color: var(--project_default_color) !important;
}

.et_pb_section.jc-project__section-title {
    padding: 0px;
    padding-top: 50px;
    padding-bottom: 20px;
}

.jc-project__section-title h1 {
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: hsla(0, 0%, 100%, 1.0);
    text-align: center;
}

/* SUMMARY */
.jc-project__section-summary {
    padding-top: 30px;
}

.jc-project__section-summary .et_pb_row .et_pb_column_3_5 .et_pb_module.et_pb_text {
    margin-bottom: 50px;
}

.jc-project__section-summary .jc-project__img-teaser {
    /* control -margin in visual builder */
    /* control sizing and center align in visual builder */

    /* sizing could be set in css and could be fluid px */
}

/* Fikser afstand til klient logo */
.jc-project__section-summary .jc-client h4 {
    margin-bottom: 25px;
}

.jc-project__section-summary .jc-client p img {
    margin-bottom: -10px;
}

.jc-project__section-summary .jc-project__img-client {
    margin-top: -20px;
}

/* CHALLENGE */
.jc-project__section-challenge {}

/* GOAL */
.jc-project__section-goal {}

/* SOLUTION */
.jc-project__section-solution {}

/* FEATURES */
.jc-project__section-features {}

/* PROCESS */
.jc-project__section-process {}

/* Border-bottom på de sidste rows i hver section i projects */
.jc-project__section-summary .et_pb_row:last-child,
.jc-project__section-challenge .et_pb_row:last-child,
.jc-project__section-goal .et_pb_row:last-child,
.jc-project__section-solution .et_pb_row:last-child,
.jc-project__section-features .et_pb_row:last-child,
.jc-project__section-process .et_pb_row:last-child {
    /*    border-bottom: 1.5px solid var(--project_default_color);*/
}

/* Ingen border-bottom på rækkerne i den sidste section på projects sider */
.single-project .et_pb_section:last-child .et_pb_row {
    border-bottom: none;
}

/* Navigation i bunden af single project */
.single-project.et_pb_pagebuilder_layout .nav-single {
    width: 100%;
    max-width: none;
    margin: 0px;
    padding: 70px 50px 60px 50px;
    background-color: var(--project_default_color);
}

.single-project.et_pb_pagebuilder_layout .nav-single a {
    color: var(--project_contrast_color);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-decoration: none;
    text-transform: uppercase;
}

.single-project.et_pb_pagebuilder_layout .nav-single .nav-previous {
    margin-bottom: 30px;
}

@media only screen and (min-width: 376px) {
    .single-project.et_pb_pagebuilder_layout .nav-single a {
        font-size: calc(0.9rem + (1.5 - 0.9) * ((100vw - 23.5rem) / 60.875));
    }
}

@media only screen and (min-width: 1350px) {
    .single-project.et_pb_pagebuilder_layout .nav-single a {
        font-size: 1.5rem;
    }
}

/* PLAKAT med tekst */
.jc-project__section-poster .et_pb_row {
    max-width: 1400px;
    padding: 40px 0;
}

/*-----------------------------------
	THE GRID
------------------------------------*/

.tg-item .tg-cats-holder *,
.tg-item .tg-item-excerpt,
.tg-item .tg-item-title,
.tg-item .tg-item-title a {
    hyphens: none !important;
}

.tg-filter {
    margin: 0px 16px 16px 0px !important;
}

#grid-272 div.tg-nav-color {
    border-radius: 0px;
    border: 0.2em solid #0c0d48;
    transition: .2s ease-in;
}

#grid-272 .tg-nav-color {
    color: #0c0d48 !important;
    transition: .2s ease-in;
}

#grid-272 div.tg-nav-color:hover {
    box-shadow: 4px 4px 0px 0px #f59922;
    color: #f59922 !important;
}

#grid-272 .tg-nav-color:hover {
    color: #f59922 !important;
    background-color: #0c0d48;
}

#grid-272 .tg-nav-font {
    font-size: 1rem;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
}


/*-----------------------------------
	FOOTER
------------------------------------*/

#footer-bottom {
    display: none;
}

/*-----------------------------------
	CUSTOM FRAMEWORK
------------------------------------*/

/* Screenshot billeder box-shadow */
.jc-screenshot-naked {
    box-shadow: 1px 6px 25px hsla(0, 0%, 0%, 0.13);
}