/*
Theme Name: Shopkeeper Landingpages Child
Theme URI: http://shopkeeper.getbowtied.com/
Description: This is a child theme for Shopkeeper.
Author: Get Bowtied
Author URI: http: //www.getbowtied.com/
Template: shopkeeper
Version: 1.0
*/

/*
    Das Hintergrund-Video
*/
.bg-video-landscape {
    display: none;
    position:fixed;
    height:100vh;
    width:100vw;
    top:0;
    left:0;
    object-fit: cover;
}

.bg-video-portrait {
    display: none;
    position:fixed;
    height:100vh;
    width:100vw;
    top:0;
    left:0;
    object-fit: cover;
}

@media (orientation: landscape) {
    .bg-video-landscape {
        display: block;
    }
}

@media (orientation: portrait) {
    .bg-video-portrait {
        display: block;
    }
}

/*
    Das Burger-Menu auf der mobilen Seite abschalten
*/
/* .site-tools {
    display: none;
} */

/* Der Burger braucht eine Hintergrundfarbe */
.spk-icon-menu {
    background-color: #2d3331;
    border-radius: 4px;
}

@media print, screen and (min-width: 64.0625em) {
    .spk-icon-menu {
        background-color: transparent;
    }
}

/*
    Den Burger immer anzeigen
*/
@media print, screen and (min-width: 64.0625em) {
    .hide-for-large {
        display: block !important;
    }
}

/*
    Den Burger deutlich größer darstellen
*/
.top-headers-wrapper .site-header .site-header-wrapper .site-tools .tools_button_icon i, 
.top-headers-wrapper .site-header .site-header-wrapper .site-tools .tools_button_icon img {
    font-size: 30px !important;
}

/*
    Das Logo bzw. den Namen oben links im Kopfbereich ausblenden
*/
.site-branding {
    display: none !important;
}

/*
    Das Desktop-Menu ausblenden
*/
.default-navigation {
    display:none;
}

/*
    Den Kopfbereich transparent machen
    Es gibt auch im Theme eine Einstellung dafür.
    Leider greift diese nicht bei dem mobilen header.
*/
.site-header {
    background-color: transparent !important;
}

/*
    Abstand zum Viewport nach oben reduzieren
    Durch das ausgeblendete Menu brauchen wir hier nicht mehr so viel
*/
#page_wrapper.transparent_header .content-area, #page_wrapper.sticky_header .content-area {
    padding-top: 0 !important;
}

/*
    Remove padding and margin from site footer and add a smaller padding
*/
#site-footer {
    padding-top:30px !important;
    padding-bottom:30px !important;
}

.footer_socials_wrapper {
    margin:0 !important;
}

.copyright_text {
    margin:0 !important;
}

.sk_social_icons_list {
    margin:0 !important;
}

/*
    Die Hintergrundfarbe des Footers deaktivieren
    (Lässt sich über das Theme scheinbar nicht einstellen)
*/
.site-footer {
    background-color: transparent !important;
}

/*
  Changes for Landingpages
*/

/*
  Make the landingpages box smaller
*/
.page-template-page-boxed .large-8 {
    max-width: 630px;
}

/*
    We need some free space at the top because we have disabled the top menu
*/
.page-template-page-boxed .large-8 {
    padding-top:50px;
}

@media (min-width:500px) {
    .page-template-page-boxed .large-8 {
        padding-top:100px;
    }
}

/*
    Make the landingpage title smaller
*/
.page-title {
    font-size: 50px;
}

/*
    Remove capitalize from page header
*/
.page-title {
    text-transform: none;
}

/*
    Lets define the landingpage buttons
*/
.landingpage-buttons {
    display: flex;
    flex-wrap: wrap;
    margin:-1rem;
    justify-content: center;
}

.landingpage-buttons__item {
    width:100%;
    padding:1rem;
}

@media (min-width:500px) {
    .landingpage-buttons__item {
        width:50%;
    }
}

/*
    The Footer Logo shall not be stretched to 100% on mobile devices 
*/
.wp-block-image .aligncenter {
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/*
    The Nightgroove footer logo

.footer-logo {
    position:relative;
    text-align:center;
    padding-top:100px;
}

.footer-logo img {
    max-width:216px;
}

*/