/*  *************************************************************************************
/*  *                                                                                   *
/*  * CUSTOM-MC-PHOTOGRAFIE_HOME-SET.CSS                                                *
/*  * bl3.mc-photografie.de                                                             *
/*  * Stand: 2020-05-14                                                                 *
/*  *                                                                                   *
/*  *************************************************************************************



/* =================================================
/* | Allgemeingültige Formatierungen               |
/* =================================================



/* --- Body auf 1280px und Hintergrung weiß --- 
============================================ */

.page__body {
    border: 0 solid #0010ae;
    border-width: 0px 0px 0px;
    box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.35);
    margin: 0px auto 0px;
    min-height: calc( 100% - 0px - 0px - 0px - 0px);
    width: 1280px;
    max-width: 100%;
}


/* ---- Seitenabstand 46px + 24px (Content) ----
============================================= */

.the__copy {
    padding: 15px 46px 0 46px;
}


/* ---- Hintergrund Main -> weiß ---- 
==================================== */

main>.content {
    background-color: white
}


/* --- Header max. Größe und Hintergrundfarbe ---
================================================ */

.page__body>header {
    max-width: 1280px;
    background-color: white;
}


/* --- Mindesthöhe Seite (Main) ---
================================== */

.page__body>main {
    min-height: 600px;
}


/* --- Verlauf Hintergrund  ---
============================================== */

html,
body {
    background-color: #909090;
    background-image: linear-gradient(180deg, #909090, #efefef 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100%;
}


/*Rahmen mit Schatten um die Bilder in Page Copy
================================================*/

.widget img,
.the__copy img {
    border: 1px solid grey;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
}


/* --------------------------------------------------------
/* | Scroll to top button                                 |
/* --------------------------------------------------------

/* ----- Scroll to top button styling ----- 
 ======================================== */

.btn-scroll-to-top {
    background-color: transparent;
    display: none;
    position: fixed;
    bottom: 7px;
    right: 15px;
    border: 1px solid;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    text-align: center;
    line-height: 29px;
    vertical-align: middle;
    text-decoration: none;
    color: #6f7c80;
}


/* ----- Hover button styling ----- 
 ======================================== */

.btn-scroll-to-top:hover {
    text-decoration: none;
    color: #0010aeff;
    border-color: #0010ae;
}

a.btn-scroll-to-top {
    z-index: 3;
}


/* --------------------------------------------------------
/* | NAVIGATION                                           |
/* --------------------------------------------------------

/* ----- Linien in der Navigation ----- 
======================================= */

ul#primary-menu {
    border-top: 1px solid #646363;
    border-bottom: 1px solid #646363;
}


/* ----- Font-Size Sub-Menü -----
================================= */

nav ul.sub-menu li.menu-item a {
    font-size: 18px;
}


/* --------------------------------------------------------
/* | FOOTER SEARCH                                        |
/* --------------------------------------------------------*/


/*Ausblenden von Footer Search vom Home-Template
=======================================================*/

.album-template-identifier-search-template #search_footer form,
.pages-template-id-6 #search_footer form {
    display: none;
}


/*Ausblenden von Footer Search vom Suchen-Template
=======================================================*/

.album-template-identifier-search-template #search_footer form,
.album-template-id-13 #search_footer form {
    display: none;
}


/*Ausblenden von Footer Search vom Kontakt-Template
=======================================================*/

.album-template-identifier-search-template #search_footer form,
.pages-template-id-4 #search_footer form {
    display: none;
}


/*Größe und Postition des Suchfeldes
=======================================================*/


/* Breite Suchfeld 
=========================== */

.footsearch_footer {
    max-width: 300px !important;
}


/* Abstand Suchfeld vom Rand 
=========================== */

form,
.form {
    display: block;
    margin: 0 0 0 70px;
}


/* Schriftfarbe im Suchfeld 
=========================== */

form input[type="color"],
form input[type="date"],
form input[type="datetime"],
form input[type="datetime-local"],
form input[type="email"],
form input[type="month"],
form input[type="number"],
form input[type="password"],
form input[type="search"],
form input[type="tel"],
form input[type="text"],
form input[type="time"],
form input[type="url"],
form input[type="week"],
form input:not([type]),
form select,
form textarea,
.form input[type="color"],
.form input[type="date"],
.form input[type="datetime"],
.form input[type="datetime-local"],
.form input[type="email"],
.form input[type="month"],
.form input[type="number"],
.form input[type="password"],
.form input[type="search"],
.form input[type="tel"],
.form input[type="text"],
.form input[type="time"],
.form input[type="url"],
.form input[type="week"],
.form input:not([type]),
.form select,
.form textarea {
    color: #0010ae;
    background-color: white;
    -webkit-text-fill-color: #0010ae;
}


/* Formatierung Suchbutton 
=========================== */

button,
.button,
.button:hover,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    border-radius: 3px 3px 3px 3px;
    line-height: 2.5rem;
    /* Höhe */
    padding-left: 0.5em;
    /* Abstand Schrift vom Rand */
    padding-right: 0.5em;
}


/* Hover Suchbutton 
===================== */

button:hover,
.button:hover input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
    text-decoration: underline;
    background-color: grey;
}


/* =================================================
/* | Home                                          |
/* =================================================

/* ----- Überschrift H1+H2 ----- 
 ============================= */

h1,
h2 {
    color: #0010ae;
}


/* ----- Überschrift Home mittig ----- 
 =================================== */

.home-mittig h1 {
    text-align: center;
}


/* ----- Schatten um Slideshow ----- *
 =================================== */

.gallery.gallery.presentation-vegas.no-fouc.vegas-container {
    box-shadow: 10px 10px 10px rgba( 0, 0, 0, 0.5);
}


/* ----- Abstand Slideshow + Gallery von oben ----- *
 ================================================== */

.the__gallery {
    margin-top: 50px;
}


/*.the__gallery > .content {
	text-align: center;
	Element { height: 640.117px;
	border: 0.5px solid #d2cbcb;
	padding: 7px;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}*/


/* =================================================
/* | Gallery                                       |
/* =================================================

/* --------------------------------------------------------
/* | BREADCRUMBS in der Gallery                           |
/* --------------------------------------------------------

/* ----- Breadcrumbs Style ----- 
 ============================= */


/* ----- Breadcrumbs Ausrichtung ---- */

ul.breadcrumbs {
    padding-left: 46px;
    padding-right: 40px;
}


/* ----- Breadcrumbs Trenner ---- */

ul.breadcrumbs li:after {
    content: '|';
    color: #0010ae;
}


/* ----- Breadcrumbs Fondssize ---- */

ul.breadcrumbs li {
    font-size: 0.875rem;
}


/* --------------------------------------------------------
/* | THUMBNAILS im Album Set.                             |
/* --------------------------------------------------------

/* ----- maximale Breite der Thumbnails ----- *
 ===========================================*/

.albums figure {
    max-width: 280px;
}


/* ----- Schatten um Album Set Bilder (Classic-Style) ----- 
=========================================================*/

.albums figure {
    background-color: #ffffff;
    border: 0 solid rgb(188, 188, 188);
    border-width: 1px;
    border-radius: 9px;
    box-shadow: 5px 5px 10px rgba( 0, 0, 0, 0.4);
    box-sizing: border-box;
    float: center;
    margin: 0 10px 20px;
    overflow: hidden;
    position: relative;
    width: 280px;
    min-height: 230px;
}


/* ----- Hover Thumbnail (Classic-Style) -----  
=============================================*/


/*figure:hover .thumbnail {
	color: #f1f1f1;
	border: 5px solid;
}*/

.albums figure:hover .thumbnail {
    transform: scale(0.95, 0.95);
    transition: all .5s ease-in-out;
}


/* ----- Hover Figcaption (Classic-Style) ----- 
 ===============================================*/

.albums figcaption {
    border-top: none;
}

.albums figure:hover,
.albums figure:hover figcaption {
    background-color: #f1f1f1;
}

figure:hover .album-title {
    color: #848484;
}

figure:hover .album-description {
    color: #848484;
}


/* --- Navigation in Album Set und Album  ---
http://lab.danielleu.com/blog/improving-navigation-of-albums-and-albumsets/
================================================ */

.dlp-prev-album,
.dlp-prev-album a {
    color: #0010ae;
    font-size: 0.75rem;
    letter-spacing: 0.015em;
    line-height: 1.125rem;
    margin-top: 40px;
}

.dlp-prev-album {
    padding-left: 40px;
}

.dlp-prev-album a {
    margin-left: 1em;
}

.dlp-prev-album:hover {
    color: #454545;
}

.dlp-prev-album a:hover {
    color: #454545;
    border-bottom: 2px solid red;
    text-decoration: none;
}


/* --------------------------------------------------------
/* | Album und Slideshow                                   |
/* --------------------------------------------------------

/*Fancybox-Ansicht - Slideshow Gallerie 
=======================================================*/


/* ----- Fancybox-Foto ----- */

.fancybox-slide img {
    /* Rahmen und Schatten um Foto in Fancybox*/
    border: 1.5px solid grey;
    /* äußerer Rahmen */
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
    padding: 15px;
}


/* weißer Rahmen um Foto */


/*.fancybox-slide .fancybox-image-wrap {                 
    border: 10px solid white;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
	}*/


/* Deaktivierung der Share-Buttons in der Fancybox Ansicht 
========================================================== */

li.share-twitter,
li.share-facebook,
li.share-pinterest,
li.fb-image-permalink {
    display: none;
}


/* Deaktivierung der Teilen-Buttons 
deaktiviert ebenfalls Google Maps!!!
 ================================ */


/*.fancybox-button--pallet::before {
    display: none;
} */


/* ----- Fancybox-Toolbar ----- 
================================ */


/* Position Fancybox-Button mittig */

.pangolin-album .fancybox-toolbar {
    text-align: center;
}


/* Position X - Close-Button */

.pangolin-album .fancybox-toolbar .fancybox-button--close {
    position: initial;
    top: 0;
    left: 0;
}


/*.fancybox-button {
    line-height: 48px;
    width: 72px;
    height: 48px;
    padding: 8px;
    /* Größe der Button */

position: absolute;

}
*/
/* Durchscheinen des Hintergrundes */
.fancybox-is-open .fancybox-bg {
    opacity: 0.85;
    transition-timing-function: cubic-bezier(.22, .61, .36, 1);
}

/* Pfeile werden angezeigt */
.fancybox-navigation .fancybox-button {
    display: block;
}

/* ----- Fancybox-Infobar ----- 
================================ */
.fancybox-caption,
.fancybox-infobar,
.fancybox-navigation .fancybox-button,
.fancybox-toolbar {
    direction: ltr;
    opacity: 0;
    position: absolute;
    transition: opacity .25s ease, visibility 0s ease .25s;
    visibility: visible;
    z-index: 99997;
}

/* Aussehen Button Fancybox-Infobar */
.pangolin-album .fancybox-infobar {
    font-size: 1.15rem;
    padding-left: 80px;
    /* Abstand Counter von links */
    
    z-index: 99998;
}

/* Formatierung der Fotos in der Album-Übersicht
================================================*/
.the__gallery figure {
    /* Formatierung vom Dia */
    
    background-color: #e6e6e6;
    border: 0 solid #747474;
    border-width: 1px;
    border-radius: 5px;
    box-shadow: 4px 4px 6px rgba( 0, 0, 0, 0.30);
    box-sizing: border-box;
    margin: 10px 10px 10px;
    /* Abstände zwischen den Dias */
    
    overflow: hidden;
    position: relative;
    width: 240px;
}
.the__gallery figure:hover {
    /* Hover über dem Dia */
    
    background-color: #bdbdbd;
}
.gallery img {
    /* Rahmen um Foto */
    
    border: 1px solid black
}

/* =================================================
/* | Foto-Suche                                    |
/* =================================================*/

/* ----- Popup-Box ----- 
======================= */

/* Formatierung des Popup-Box-Titel */
h2.popup-title {
    background: linear-gradient(#0010ae, #717bfd);
    padding: 12px;
    padding-top: 10px;
    padding-left: 36px;
    color: white;
    margin-top: -12px;
    margin-left: -36px;
    margin-right: -36px;
}

/* Formatierung von Code-Class 
Beispiele Suchfelder */
.code {
    border: 1px solid black;
    padding: 12px;
    color: black;
    background-color: #f1f1f1;
}
.fancybox-slide--html>*,
.fancybox-slide--inline>* {
    background-color: #fff;
    color: #212121;
    border-radius: 3px;
    margin: 48px;
    padding: 36px;
    padding-top: 0;
    width: auto;
    max-width: 50%;
}

/* Abstand Button zum Suchfeld */
form.search-form,
form.search-form p,
form.search-handoff {
    margin: 30px 0;
}

/* Fontgröße Schrift Erklärung Suche */
.fancybox-slide--html p,
.fancybox-slide--inline p {
    font-size: 1rem;
}

/* --- Zähler Foto-Suche ---
http://lab.danielleu.com/blog/customizing-search-results/
====================================== */

/* ----- Ausblenden der Linie unter the__copy ----- 
================================================ */

/*.the__copy>.content> :last-child {
    border-top-width: 0px;
}

/* --------------------------------------------------------
/* | Mobile Menu Anpassung                                 |
/* --------------------------------------------------------*/

/* ----- Nur 1 Child-Menüs in Mobiler Navigation ----- 
http://community.theturninggate.net/viewtopic.php?pid=65890#p65890
================================================ */
#page__pallet__T1 li.menu-item ul.sub-menu ul.sub-menu .menu-item {
    display: none;
}

/*Mobile Menu Anpassung*
 ======================*/
@media screen and ( max-width: 992px) {
    .page__mobile {
        display: block;
        float: left;
        left: auto;
        right: 0;
        margin: 6px 6px 24px 24px;
        width: auto;
    }
    
    .page__mobile .page__title {
        width: 200px;
        display: none;
    }
    
    .page__header,
    .page__columns {
        margin-top: 0;
        padding-top: 0;
    }
    
    .page__tray ul.menu a,
    .page__tray ul.menu a:visited,
    .page__tray ul.menu span {
        font-size: 16px;
    }
    
    div.page__column.page__tray {
        width: 250px;
    }
    /* Farbe Navigation Mobil */
    
    .page__pallet {
        background-color: rgb(136, 136, 136);
    }
    
    nav.nav_v {
        background-color: rgb(136, 136, 136);
    }
}