/*
Theme Name: BPM
Author: auer404
Description: Custom WP Theme for the Mulhouse Biennial of Photography
*/

body {
    background-color:#000000; height:100%;
    width:100%; padding:0; margin:0;
    transition: background-color 1s;
}

body.noscroll {overflow:hidden}

h1, h2, h3, h4, h5, h6 {
    font-size:inherit;
    /* margin:0; padding:0; */
    color:inherit;
    font-family:inherit;
    /* font-weight:inherit; */
    text-decoration:inherit;
}

.uppercase {
    text-transform: uppercase;
}

#colorbg {
    position:fixed; top:0px; left:0px; width:100%; height:100%;
    opacity:0;
     transition:opacity 1s; 
 }

.notready #colorbg {opacity:1}

#front_colorbg {
   position:fixed; top:0px; left:0px; width:100%; height:100%;
   z-index:99;
    transition:opacity 1s; 
}

#front_colorbg.transparent {
    opacity:0;
}

#front_colorbg.hidden {
    display:none;
}


/********************** MENU **********************/

#menu_panel {
    position:fixed; top:0px; left:100%; width:75%; height:100%;
    opacity:0.95; z-index:3;
}

#menu_panel.animated {
    transition: left 0.5s, width 0.5s;
}

.notready #menu_panel {
    left:150%; top:100%;
}

#menu_handle {
    position:absolute; top:0px; left:-70px; width:70px; height:100%;
    transition: width 0.5s, left 0.5s;
}

#burger {
    position:absolute; top:35px; left:17px; width:35px; height:35px;
    background-image:url(images/burger_sprite.png); cursor:pointer;
}


#menu_panel:not(.shown) #menu_handle {
     cursor:pointer;
}

#menu_panel:not(.shown):hover #menu_handle {
    width:75px; left:-75px;
}

#menu_panel.shown {
    left:25%;
}

#menu_contents {
    position:absolute; top:0px; left:35px; right:0px; height:100%;
    box-sizing:border-box; overflow:auto;
    display:flex; flex-direction:column; justify-content:space-between;
    transition:left 0.5s;
}

#menu_contents_inner {
    margin-top:0; padding-top:5px;
    box-sizing:border-box;
    margin-right:35px;
    padding-left:0; margin-bottom:0; list-style-type:none;
}

.submenu {
    width:fit-content;
    padding-left:0; list-style-type:none;
    transition:height 0.3s, margin-top 0.3s;
}

.submenu.shown {
    margin-top:20px;
}

.menu_elem {
    margin-top:35px; color:#FFFFFF; font-family:'Aspergit'; font-weight:normal; font-size:38px; line-height:38px;
    letter-spacing:2px; cursor:pointer;
    width:fit-content;
}

.menu_elem a , .submenu_elem a {
    color:inherit; text-decoration:none;
    transition: color 0.2s;
}

.submenu_elem {
    font-size:25px; font-family:'Aspergit'; text-transform:uppercase; color:#FFFFFF;
    line-height:35px; margin-left:35px; letter-spacing:1px; cursor:pointer;
    height:0px; overflow:hidden;
    transition:height 0.3s;
}

.submenu.shown .submenu_elem {height:35px}

.menu_elem:hover > a , .submenu_elem:hover > a {
    color:#000000; text-decoration:underline;
}

#menu_footer {
    color:#FFFFFF; font-family:'MyriadPro'; font-size:14px; letter-spacing:0.3px;
    margin-right:100px; margin-top:40px;
    margin-bottom:25px;
    padding-left:0;
}

#menu_footer li {
    display:inline-block;
}

#menu_footer li:not(:last-child)::after {
    content:" / ";
}

#menu_footer a {
    color:inherit; text-decoration:none; border:none; outline:none;
}

#menu_footer a:hover {
    color:#000000; text-decoration:underline;
}

#signature_container {
    position:absolute; width:52px; height:14px; overflow:hidden; border:none; outline:none;
    bottom:32px; right:20px;
    transition:width 0.3s, margin-left 0.3s;
}
    
#signature_container:hover {
    width:95px;
}
    
#blitz_left {
    position:absolute; top:0px; left:0px; height:14px; width:30px;
}
    
#blitz_right {
     position:absolute; top:0px; right:0px; height:14px; width:30px;
}
    
#blitz_txt {
    position:absolute; top:14px; left:50%; margin-left:-18px; width:45px; height:14px;
    filter:alpha(opacity=0); opacity:0;
    transition:opacity 0.3s, top 0.3s;
}
    
#signature_container:hover #blitz_txt {
    filter:alpha(opacity=100); opacity:1; top:0px;
}

.svg_color {
    fill:#FFFFFF;
    transition: fill 0.5s;
}


/********************** SUB-PAGE NAV ********************/

#sub_page_nav {
    display:flex;
    flex-direction:row-reverse;
    justify-content:space-between;
    flex-wrap:wrap-reverse;
    gap:17px;
}

#sub_page_nav a {
    text-decoration:none;
    font-family:'Aspergit';
    text-transform:uppercase;
}

#sub_page_nav a:nth-child(1) {
    order:1;
}

#sub_page_nav a:nth-child(2) {
    order:0;
}

#sub_page_nav a:hover {
    text-decoration:underline;
}

#sub_page_nav a:hover .theme_color {
    font-weight:bold;
}

/********************** HEADER / DIAPORAMA **********************/

#bg_carousel {
    position:fixed; top:0px; left:0px; width:100%; height:100%; opacity:0.8; z-index:-1;
    transition: opacity 1s;
}
    
#bg_carousel.notready {
    opacity:0;
}
    
.bg_elem {
    position:absolute; top:0px; left:0px; width:100%; height:100%;
    opacity:0;
    transition: opacity 4.5s;
}

.bg_elem img {
    width:100%; height:100%;
    object-fit: cover;
}
    
.bg_elem.shown {
    opacity:1;
}
    
.bg_caption {
    position:absolute; font-size:14px; font-family:'MyriadPro';
    left:20px; bottom:10px; line-height:20px;
}

.bg_caption:not(.theme_color) {
    color:white;
}
    
.bg_caption.dark {
    color:#000000;
}
    
#logo_container {
    width:161px; height:150px; position:absolute; top:35px; left:35px; z-index:2;
}
    
#logo {
    width:100%; vertical-align:middle;
}

#header_photo_container {
    height:50%;
    position:absolute; top:0px; left:0px; width:100%;
    overflow:hidden;
    }
    
#header_photo_container.small {
    height:240px; z-index:1;
}
    
.header_photo {
    position:absolute; bottom:0px; left:0px;
    width:100%; height:100%;
    background-size:cover; background-position:center center;
}

.header_empty {
  position:absolute; bottom:0px; left:0px; overflow:hidden;
    width:100%; height:100%;
    background-color:#FFFFFF;
}

.tilted {
    position:absolute; top:-80px; left:-125px;
    width:800px; height:100%;
    transform:rotate(-15deg);
}

.dash_white {
    position:absolute; left:0px; bottom:17px;
    height:4px; width:100%;
    border-top:4px dotted white;
}


/********************** CONTENTS **********************/

strong, b {
    font-family: 'MyriadBold';
}

#intro_desc {
    color:#FFFFFF; font-family:'MyriadPro';
    position:absolute; right:105px;
    text-align:right;
   top:35px; padding-bottom:35px;
   padding-top:70px; padding-left:35px;
   font-size:22px;
}

#contents_panel {
    background-color:#FFFFFF;
     position:absolute; top:50%; left:0px;
     width:100%;
     min-height:50%;
     box-sizing:border-box;
     padding:35px; padding-right:110px;
     font-family:'MyriadPro'; font-size:16px;
}

#header_photo_container.small ~ #contents_panel {
    top:0px; min-height:100%; padding-top:275px;
}

.contents_inner {
    max-width:830px; margin-left:auto; margin-right:auto;
}

h1 {
    font-family:'Aspergit'; text-transform:uppercase;
    font-size:2em;
    line-height:1.1em;
    letter-spacing:0.05em;
    margin-top:1.5em;
}

h2 {
    font-family:'Aspergit'; text-transform:uppercase;
    font-size:1.5em;
    line-height:1.1em;
    letter-spacing:0.03em;
    margin-top:1.5em;
}

.big {
    font-size:1.3em;
    line-height:1.3em;
    letter-spacing:0.015em;
}

.small {
    font-size:0.75em;
}

.no-uppercase {
    text-transform:none;
}

.title_font {
    font-family:'Aspergit';
}

.title_font strong, .title_font b {
    font-family:'AspergitBold';
}

.cancel_mt{
    margin-top:0;
}

.cancel_mb {
    margin-bottom:0;
}

.cancel_mb + * {
    margin-top:0;
}

/*
p + .cancel_mt {}
h1 + .cancel_mt {}
h2 + .cancel_mt {}
*/

*:has(+ .cancel_mt) {
    margin-bottom:0;
}

#contents_panel a , #intro_desc a {
    color:inherit;
}

a.btn {
    font-family:'Aspergit';
    color:inherit; text-decoration:none;
    border:1px solid black; padding:0.8em 0.7em 0.7em 0.7em;
    font-size:1.1em;
    transition: color 0.3s, background-color 0.3s;
    display:inline-block;
}

#intro_desc a.btn {
    border-color:white;
}

a.btn:hover {
    background-color:black;
    font-weight:bold;
}

#intro_desc a.btn:hover {
    background-color:white;
}

a.btn.followed {
    border-right-style:dotted;
}

a.btn.followed + a.btn {
    border-left-style:none;
}

hr {
    height:4px;
    border-bottom:none;
    border-left:none;
    border-right:none;
}

#intro_desc hr {
    border-top:4px dotted white;
}

.contents_inner > img , .contents_inner *:not(.flex_container) img {
    width:100%;
}

.img_caption {
    margin-top:0;
    text-align:right;
}

*:has(+ .img_caption) {
    margin-bottom:0;
}

.offsetted {
    margin-left:35px;
}

.offsetted.with_arrow , .offsetted.with_color_arrow , .offsetted.with_diamond , .offsetted.with_color_diamond {
    position:relative;
}

.offsetted.with_arrow::after {
    position:absolute;
    content : "↦";
    top:0; left:-35px;
    font-size:20px;
    line-height:1em;
}

.offsetted.with_diamond::after {
    position:absolute;
    content : "◆";
    top:0; left:-35px;
    font-size:20px;
    line-height:1em;
}

.flex_container {
    display:flex;
    gap:35px;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
}

.flex_container > * {
    width:auto; height:auto;
    flex-grow:0; flex-shrink:0;
}

/********************** RESPONSIVE **********************/

h1 , h2 , li.submenu_elem a , li.menu_elem a {overflow-wrap:anywhere}

@media (min-width:951px) {
    #menu_panel.shown #menu_handle.pre_closing {
    width:65px; left:-65px;
    }
}

@media (min-width:1201px) {
    
    #menu_handle {
        left:-105px; width:105px;
    }

    #menu_panel:not(.shown):hover #menu_handle {
        width:110px; left:-110px;
    }

    #menu_panel.shown #menu_handle.pre_closing {    
        width:100px; left:-100px;
    }

    #burger {
        left:35px;
    }

    #intro_desc {
        right:140px;
    }
    
}
    
@media (max-width:950px) {
    
    #menu_panel {width:100%}
    #menu_panel.shown {left:0%}
    #menu_panel.shown #menu_handle {left:0px}
    #menu_contents {left:105px}
}


@media (max-width:760px) {
    
    .menu_elem {font-size:36px; line-height:36px}
    .submenu_elem {font-size:20px; line-height:30px; margin-left:0px}
    .submenu.shown .submenu_elem {height:30px}
}

@media (max-width:680px) {

    #intro_desc {top:135px; font-size:18px;}
    h1 {font-size:1.7em}
    h2 {font-size:1.3em}
    .big {font-size:1.2em}

}

@media (max-width:600px) {
    
    #menu_contents {left:75px}
    .menu_elem {font-size:34px; line-height:34px}
    .submenu_elem {font-size:18px; line-height:28px}
    .submenu.shown .submenu_elem {height:24px}
    
}

@media (max-width:500px) {
    
    .menu_elem {font-size:32px; line-height:32px}

    a.btn {display:block}
    a.btn.followed {
        border-right-style:solid;
        border-bottom-style:dotted;
    }
    a.btn.followed + a.btn {
        border-left-style:solid;
        border-top:none;
    }
    
}

@media (max-width:440px) {
    
    #menu_contents_inner {margin-right:17px}
    .menu_elem {font-size:25px; line-height:26px}
    /* h1 , h2 {word-break:break-all} */
    
}

/*************************************************/