/*
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: 53px;
    --h2: 28px;
    --h3: 25px;
    --h4: 22px;
    --h5: 16px;
    --h6: 14px;
    --p: 18px;

    /* Gaps */
    --gap-xl: 180px;
    --gap-l: 90px;
    --gap-m: 40px;
    --gap-s-m: 36px;
    --gap-s: 20px;

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

    /* colors */
    --color-1: #3982A3;
    --color-2: #0B2235;
    --color-bg: #f6f6f6;
    --color-text: #0B2235;
    --color-dark: #222;
    --color-overlay: rgb(0 0 0 / 30%);
    --color-white: #fff;

    /* 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.css                                                            //
//======================================================================*/

body.home #page{
    overflow-x: unset;
}

.header-sticky-active.scrolled header .site-branding #logo svg {
    max-height: 95px;
}
/* footer-form */
html {
    scroll-behavior: smooth;
}
#footer-form {
    scroll-margin-top: 120px;
}
/* CTA */
#number-three-sticky-mobile-cta .cta-container .stom-button a {
    display: flex;
    flex-direction: row;
    font-weight: 400;
    gap: 14px;
    border-radius: 0;
  }
  #number-three-sticky-mobile-cta .cta-container .stom-button:first-of-type a {
    background-color: var(--color-1);
    color: var(--color-white);
  }
  #number-three-sticky-mobile-cta .cta-container .stom-button:first-of-type a p {
    margin-bottom: 0;
  }
  #number-three-sticky-mobile-cta
    .cta-container
    .stom-button:first-of-type
    a
    .stom-custom-svg {
    color: var(--color-white);
  }
  #number-three-sticky-mobile-cta
    .cta-container
    .stom-button:last-of-type
    a
    .stom-custom-svg {
    color: var(--color-white);
  }
  #number-three-sticky-mobile-cta .cta-container {
    background-color: var(--color-1);
  }
  #number-three-sticky-mobile-cta .cta-container .stom-button:last-of-type a {
    background-color: var(--color-dark);
    color: var(--color-white);
  }
  #number-three-sticky-mobile-cta .cta-container .stom-button a p:hover {
    border: none;
  }
  #number-three-sticky-mobile-cta .cta-container .stom-button a {
    color: var(--color-white);
  }
  #number-three-sticky-mobile-cta .cta-container .stom-button a:hover {
    border: none;
  }
  #number-three-sticky-mobile-cta .cta-container .stom-button:not(:last-child) a {
    border-right: none;
  }
  #number-three-sticky-mobile-cta .cta-container .stom-button a .stom-custom-svg {
    display: unset;
    background-color: unset;
    padding: unset;
    margin-left: unset;
    line-height: 0 !important;
}
/* top-slider undersider */
body:not(.home) .page-slider-section .image-aligner img {
    width: 100%;
    height: auto;
    max-height: calc(65vh - var(--header-height));
    min-height: 100%;
    object-fit: cover;
    object-position: top;
}

/*======================================================================//
// Button styling                                                       //
//======================================================================*/

body .stom-button,
body .stom-button a,
body button{
    border-radius: 5px;
    border: none;
}

/*======================================================================//
// END Button styling                                                   //
//======================================================================*/



/*======================================================================//
// XL section margins styling                                           //
//======================================================================*/

.page-slider-section~main,
.section-wrap.stom-billede-sektion.picture-right,
.section-wrap.clear.banner-section,
.section-wrap.footer-logo-bar,
.section-wrap.footer-topbar {
    margin-top: var(--gap-xl);
}

/*======================================================================//
// END XL section margins styling                                       //
//======================================================================*/




/*======================================================================//
// Header styling                                                       //
//======================================================================*/

.site-header .header-inner .section-wrap .section p{
    border: 2px solid var(--color-2);
    padding: 12px var(--gap-s);
    border-radius: 5px;
    transition-duration: 0.175s;
}
.site-header .header-inner .section-wrap .section p:hover{
    background-color: var(--color-1);
    color: white;
}
.style-header-03 .nav-wrap{
    margin: 0 var(--gap-s) 0 0   ;
}
.site-branding #logo{
    padding: 10px;
}
.site-branding #logo svg{
    max-height: 100px;
}
header .main-navigation ul.menu a{
    padding: 0.7em var(--gap-s);
}

/*======================================================================//
// END Header styling                                                   //
//======================================================================*/



/*======================================================================//
// Slider styling                                                       //
//======================================================================*/

body .home .page-slider-section .image-aligner img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
  }


.home .page-slider-section .slider-text{
    align-items: flex-end;
}
.home .page-slider-section .slider-text{
    align-items: flex-end;
}
.home.page-slider-section .white-text p{
    font-size: 32px;
}
.home .page-slider-section .white-text{
    max-width: 950px
}
.home .page-slider-section .white-text h1{
    line-height: 1;
}
.home .page-slider-section .slider-text{
    padding-bottom: calc(var(--gap-xl) - 30px)
}
.home .slider-text .white-text h2{
    line-height: 1.3;
}

/*======================================================================//
// END Slider styling                                                   //
//======================================================================*/

/*======================================================================//
// Services styling                                                     //
//======================================================================*/

.services-section h2{
    font-size: var(--gap-s-m);
}
.services-section .grid-elements .grid-element p img{
    display: block;
    border: none;
}
.services-section .grid-elements .grid-element p{
    margin: 0;
    border: none;
} 
.services-section .grid-elements .grid-element .overlay p:nth-child(2){
    background-color: var(--color-1);
    color: white;
    padding: 10px 15px;
    font-size: 20px;
}
.stom-grid-section .grid-element .overlay{
    justify-content: flex-start;
}
/* zoom */
.zoom p {
    overflow: hidden
}
.zoom.grid-element {
    transition: transform .5s;
}
.zoom.grid-element:hover {
    transform: scale(1.050)
}
.zoom.grid-element:hover {
    transform: scale(1.050);
}


/*======================================================================//
// END Services styling                                                 //
//======================================================================*/

/*======================================================================//
// Picture-text-section styling                                         //
//======================================================================*/

.stom-billede-sektion .stom-button a{
    font-size: 20px;
    background-color: var(--color-2);
    transition-duration: 0.175s;
    padding: 8px 25px;
    
}
.stom-billede-sektion .stom-button a:hover{
    background-color: var(--color-1);
}
.stom-billede-sektion .stom-center-box ul li{
    padding: 5px 0;
}

/*======================================================================//
// END Picture-text-section styling                                     //
//======================================================================*/

/*======================================================================//
// Banner styling                                                       //
//======================================================================*/
.banner-section .white-text{
    max-width: 550px;
    font-weight: 400;
}
.banner-section .white-text h2{
    font-size: var(--gap-s-m);
}
.section-wrap.banner-section .section{
    padding-top: calc(var(--gap-xl) + var(--gap-l) - 20px);
    padding-bottom: var(--gap-xl);
}

/*======================================================================//
// END Banner styling                                                   //
//======================================================================*/

/*======================================================================//
// Contact section styling                                              //
//======================================================================*/

.section-wrap.clear.contact-section{
    margin-top: calc(var(--gap-xl) - 50px);
}
.stom-grid-section.contact-section .section .grid-elements {
    gap: 0;
}
.stom-grid-section.contact-section .grid-elements .grid-element:first-of-type{
    padding: var(--gap-l);
    background-color: var(--color-1);
}
.stom-grid-section.contact-section .grid-elements .grid-element:first-of-type .overlay h2,
.stom-grid-section.contact-section .grid-elements .grid-element:first-of-type .overlay{
    color: white;
}
.stom-grid-section.contact-section .grid-elements .grid-element:first-of-type .overlay h2{
    font-size: 36px;
    margin: 0;
}
.stom-grid-section.contact-section .grid-elements .grid-element:first-of-type .overlay ul{
    list-style-type: '- ';  
    padding-left: 10px;
}

.stom-grid-section.contact-section .grid-element:nth-child(2) .overlay{
    display: flex;
    flex-direction: column; 
    height: 100%;
}
.stom-grid-section.contact-section .grid-element:nth-child(2) .overlay p img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.stom-grid-section.contact-section .grid-element:nth-child(2) .overlay p {
    flex: 1; 
    width: 100%;
    display: flex; 
}
.stom-grid-section.contact-section .grid-element:first-of-type .overlay ul{
    margin: 0;
}
.stom-grid-section.contact-section .gform_button.button{
    background-color: var(--color-2);
    border-radius: 5px;
    padding: 12px 25px;

}
.page-id-24 .contact-section{
    display: none;
}

/*======================================================================//
// END Contact section styling                                          //
//======================================================================*/

/*======================================================================//
// Footer styling                                                       //
//======================================================================*/

.section-wrap.footer-topbar{
    border: none;
}
.section-wrap.footer-topbar .section{
    padding-top: var(--gap-m);
    padding-block: 0;
} 
.section-wrap.footer-topbar .section span svg{
    height: 200px;
    width: 200px;
} 
#colophon.footer-setting-02{
    border: none;
    background-color: var(--color-1);
}
#colophon.footer-setting-02 .footer-widget-area .section{
    padding-top: 0;
}
#colophon.footer-setting-02 .footer-widget-area .section .grid-elements .grid-element .footer-widgets .widget-title,
#colophon.footer-setting-02 .footer-widget-area .section .grid-elements .grid-element .footer-widgets .textwidget{
    color: white;
}
.footer-widgets:not(.widgets-1) .textwidget p{
    display: flex;
    align-items: center;
    gap: 5px;
}
#colophon.footer-setting-02 .footer-widget-area .section .grid-elements .grid-element:not(:first-of-type) p{
    margin: 0 0 15px;
}

.textwidget .stom-info{
    display: flex;
    align-items: center;
    font-weight: 400;
}
.textwidget .stom-info table{
    margin-left: 10px;
}
.site-footer .footer-widget-area .grid-elements{
    display: flex;
    justify-content: space-between;
}
.site-footer .footer-widget-area .section .grid-elements .grid-element{
    max-width: 260px;
}
/*======================================================================//
// END Footer styling                                                   //
//======================================================================*/


/*======================================================================//
// New-worker page styling                                              //
//======================================================================*/



.clear-banner .section{
    max-width: 800px;
}
.worker-services-section .section .grid-elements .grid-element{
    display: flex;
    justify-content: center;
}
.worker-services-section .section .grid-elements .grid-element .overlay{
    max-width: 400px;
}


/*======================================================================//
// END New-worker page styling                                          //
//======================================================================*/



/*======================================================================//
// About us page styling                                                //
//======================================================================*/

.stom_medarbejder_overlay_section{
    
    word-break: break-word; 
}
.stom_medarbejder-detaljer {
    font-size: 18px;
    line-height: 1.5;
    width: 100%;
    background-color: var(--color-1);
    color: white;
    padding: 20px;
}
.stom-medarbejdere{
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: var(--gap-m); 
    padding-inline: var(--gap-s);
}
.stom-medarbejder-wrapper{
    display: flex;
    justify-content: center;
}
.stom-medarbejdere .stom-medarbejder-container {
    display: flex;
    justify-content: center;
}
.stom-medarbejdere .stom-medarbejder-stilling {
    font-size: 15px;
}
.stom_medarbejder-detaljer .stom-medarbejder-phone,
.stom_medarbejder-detaljer .stom-medarbejder-email {
    font-size: 15px;
}
.stom-medarbejdere .stom-medarbejder-wrapper{
	width: 100% !important;
}
/*======================================================================//
// END About us page styling                                            //
//======================================================================*/


/*======================================================================//
// Contact page styling                                                 //
//======================================================================*/

.contact-page .section{
    background-color: var(--color-1);
}
.contact-page .section .grid-elements{
    display: grid;
    grid-template-columns: 1fr 2fr !important;
    padding: var(--gap-m);
}
.stom-grid-section.contact-page .section .grid-elements{
    gap: var(--gap-l);
}
.contact-page .section .grid-elements .grid-element .overlay{
    justify-content: flex-start;
}
.contact-page .gform-body.gform_body{
    padding-top: 0px !important;
}
.contact-page .gform-body.gform_body button{
    background-color: var(--color-2);
}
.contact-page h2{
    font-size: calc(var(--h1) - 15px);
    color: white;
    margin: 0;
}
.contact-page .grid-elements .grid-element:first-of-type{
    color: white;
}
.contact-page .underbar{
    height: 5px;
    width: 200px;
    background-color: var(--color-2);
    margin: 10px 0;
}

 .gform_wrapper.gravity-theme .gform_footer input {
    background-color: var(--color-2);
    border-radius: 5px;
    padding: 15px 50px;
}
.contact-page .stomGFAS-inner{
    min-width: 100%;
}
main .section-wrap.clear.stom-grid-section.contact-page{
    margin-top: 0;
}

.page-id-24 .section-wrap.footer-topbar{
    margin-top: 0;
}
/*======================================================================//
// END Contact page styling                                             //
//======================================================================*/



/*======================================================================//
// END style.css                                                        //
//======================================================================*/


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


/* woocommerce style goes here */


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