/*
Theme Name: Number Three One - Child
Theme URI: https://standoutmedia.dk/
Author: Standoutmedia A/S
Author URI: https://standoutmedia.dk/
Description: Et helt specielt Standoutmedia Tema
Template: number-three-one
Text Domain: number-three-child
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


/* ===== CSS Variables ===== */

:root {
    /* Font sizes */
    --h1: 50px;
    --h2: 50px;
    --h3: 25px;
    --h4: 22px;
    --h5: 16px;
    --h6: 14px;
    --p: 18px;

    /* Gaps */
    --gap-l: 90px;
    --gap-m: 60px;
    --gap-s: 20px;

    /* font families */
    --h-fam: 'Poppins', sans-serif;
    --p-fam: 'Poppins', sans-serif;
    --btn-fam: var(--p-fam);

    /* colors */
    --color-1: #31a553;
    --color-2: #148536;
    --color-bg: #ffffff;
    --color-text: #ffffff;
    --color-dark: #222;
    --color-overlay: rgb(0 0 0 / 0%);
    --color-white: #ffffff;

    /* transitions */
    --transition: .175s ease-out;

    /* Margin on the right and left of the main content sections (change 0 to 1 to match template distances)*/
    --content-margin: calc(0 * var(--gap-m));
    --slider-text-width: 800px;
    
    /* Theme defined variables from PHP */
    --content-width: initial;
    --sidebar-width: initial;
    /* END Theme defined variables from PHP */
}


/* ===== END CSS Variables ===== */




/* style goes here */
/*======================================================================//
// Generiske klasser                                                    //
//======================================================================*/
/* menu */

#masthead .socials-wrapper .stom-custom-svg svg * {
    fill: #4267B2;
    margin-right: 50px;
}
#masthead .socials-wrapper .stom-custom-svg svg:hover * {
    opacity: 0.9;
}
#masthead .socials-wrapper {
    margin-right: var(--gap-m);
}
header .main-navigation ul.menu#primary-menu .sub-menu a {
    background-color: var(--color-bg);
    justify-content: space-between;
    width: 250px;
}
/* btns */
.stom-button a {
    border-radius: 20px;
}
/* btns */
.stom-button.btn-2 a {
    background-color: var(--color-white);
    border: 1px solid var(--color-white);
    color: var(--color-1)
}
.stom-grid-section.second-box-section .zoom.grid-element:hover .stom-button.btn-2 a {
    background-color: var(--color-2);
    border-color: var(--color-2);
    color: var(--color-white)
}
.stom-button.btn-2 a:hover {
    background-color: var(--color-2);
    border-color: var(--color-2);
    color: var(--color-white)
}
/* zoom */
.zoom p {
    overflow: hidden
}
.zoom.grid-element {
    transition: transform .5s ease
}
.zoom.grid-element:hover {
    transform: scale(1.020)
}

/*======================================================================//
// END Generiske klasser                                                //
//======================================================================*/

/*======================================================================//
// slider-section                                                       //
//======================================================================*/
.page-slider-section.slider-section {
    max-width: var(--content-width);
    margin-inline: auto;
    border-radius: 30px;
}
.page-slider-section.slider-section  .slider-text {
    align-items: end;
    padding: var(--gap-m);
}
body.home .page-slider-section .image-aligner img {
    width: 100%;
    height: auto;
    max-height: calc(100vh - var(--header-height));
    min-height: 100%;
    object-fit: cover;
    border-radius: 20px;
}
/*======================================================================//
// END slider-section                                                   //
//======================================================================*/

/*======================================================================//
// first-box-section                                                    //
//======================================================================*/
.section-wrap.stom-grid-section.first-box-section {
    margin-top: var(--gap-s);
}
.section-wrap.stom-grid-section.first-box-section .grid-elements {
    gap: var(--gap-s);
}
.section-wrap.stom-grid-section.first-box-section .grid-element {
    border-radius: 20px;
}
.section-wrap.stom-grid-section.first-box-section .grid-element.has-background .overlay {
    padding-inline: 10px;
    padding-block: 30px;
}
.section-wrap.stom-grid-section.first-box-section .grid-element.has-background .overlay h3 {
    font-weight: 400;
}
/* svg'er */
.first-box-section .stom-custom-svg svg {
    width: 75px;
    height: 75px;
}
.first-box-section .stom-custom-svg svg path,
.first-box-section .stom-custom-svg svg line,
.first-box-section .stom-custom-svg svg polyline,
.first-box-section .stom-custom-svg svg circle {
    stroke: white !important;
}
/*======================================================================//
// END first-box-section                                                //
//======================================================================*/

/*======================================================================//
// second-box-section                                                   //
//======================================================================*/
.section-wrap.stom-grid-section.second-box-section .grid-elements {
    gap: var(--gap-s);
}
.section-wrap.stom-grid-section.second-box-section .grid-element {
    border-radius: 20px;
}
.section-wrap.stom-grid-section.second-box-section .grid-element img {
    border-radius: 20px;
}
.section-wrap.stom-grid-section.second-box-section .grid-element.split-box .overlay p {
    max-width: 700px;
    margin-inline: auto;
}

.section-wrap.stom-grid-section.second-box-section .grid-element:hover .overlay .stom-button .stom-custom-svg svg *,
.section-wrap.stom-grid-section.second-box-section .grid-element.split-box .overlay .stom-button:hover .stom-custom-svg svg * {
    filter: invert(0);
}
/*======================================================================//
// END second-box-section                                               //
//======================================================================*/

/*======================================================================//
// footer                                                               //
//======================================================================*/
#colophon.footer-setting-03 {
    padding: 0;
    background-color: var(--color-1);
    border-top: 0;
    color: var(--color-white);
    border-radius: 20px 20px 0 0;
}
.footer-setting-03 .section-wrap {
    border-bottom: none;
}
#colophon.footer-setting-03 .widget-title {
    color: var(--color-white);
}
#colophon.footer-setting-03 .stom-custom-svg svg * {
    fill: white;
}
#colophon.footer-setting-03 .stom-custom-svg svg {
    width: 30px;
    height: 30px;
}
/*======================================================================//
// END footer                                                           //
//======================================================================*/
/* CTA */
#number-three-sticky-mobile-cta .cta-container .stom-button a {
    display: flex;
    flex-direction: row;
    font-size: 1rem;
    font-weight: 400;
    gap: 14px;
    border-radius: 0;
}
#number-three-sticky-mobile-cta .cta-container .stom-button a p{
    font-weight: 400;
    font-size: 1rem;
}
#number-three-sticky-mobile-cta .cta-container .stom-button a .stom-custom-svg {
    display: unset;
    background-color: unset;
    padding: unset; 
    margin-left: unset;
}
/* undersider */
body:not(.home) #primary {
    color: var(--color-dark);
}

/* header-height */
body:not(.home) .page-slider-section .image-aligner img {
    max-height: calc(46vh - var(--header-height));
}
/* sidebar */

.sidebar-new #secondary:before {
    background-color: #ffffff;
}
.widget-area .widget:not(.widget_search):not(.widget_instagram-feed-widget):not(.widget-no-border) {
    border-bottom: 1px solid var(--color-1);
    padding-block: 0 var(--gap-m);
    padding-inline: 0;
}
body:not(.home) #main-content {
    margin-top: 0;
}
body:not(.home) #main-content h2 {
    font-size: var(--h3);
}
/* kontakt-form - undersider */
body:not(.home) .form-section.section-wrap.has-background {
    margin-top: 0;
}
body.sidebar-new:not(.no-sidebar) #primary {
    padding-bottom: var(--gap-l);
}
/* No sidebar pages */

body.no-sidebar #main-content {
    padding-top: var(--gap-l);
}
body.home #main-content {
    padding-top: 0
}
/* sticky-sidebar */
aside#secondary .custom-overflow-wrapper {
    position: sticky;
    top: 175px;
    background-color: #f1f0f0;
    padding: 30px;
}
body:not(.home),
body:not(.home) #page {
    overflow: visible;
}
.widget-area .widget_categories ul li {
    display: block;
    border: 1px solid #dfddd9;
    border-width: 0 0 1px 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: #222; 
}

/* underside formularer */
body:not(.stom-gform-legacy) .gform_wrapper .ginput_container input, body:not(.stom-gform-legacy) .gform_wrapper .ginput_container select, body:not(.stom-gform-legacy) .gform_wrapper .ginput_container textarea {
    color: black;
}
#site-navigation.main-navigation .current-menu-item {
    background: #f5f5f5;
    color: #2C3F46;
}
#site-navigation.main-navigation .current-menu-ancestor {
    background: #f5f5f5;
}
#site-navigation.main-navigation .current-menu-ancestor a {
    color: #2C3F46;
}

.widget-area .widget-title {
	margin-bottom: 0;
}

.page-slider-section .slider-text-inner h1 {
	color: white;
}

.hold-oversigt tr td {
	border: 1px solid #b5b5b5;
	font-size: 15px;
	padding: 0.5em;
}
/*======================================================================//
// woocommerce.css                                                      //
//======================================================================*/


/* woocommerce style goes here */


/*======================================================================//
// END woocommerce.css                                                  //
//======================================================================*/