@font-face {
    font-family: 'BebasNeue-Regular';
    src: url('fonts/BebasNeue-Regular.woff2') format('woff2'),
        url('fonts/BebasNeue-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/******************************************************************************/
/* SITE                                                                       */
/******************************************************************************/
body
{
    background-color: #1c1c1c; 
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    font-family: 'BebasNeue-Regular', sans-serif;    
    color: #656565;
    letter-spacing: 1px;
    vertical-align: baseline;
}
a { text-decoration: none; color: #cbad08; }
.hidden-element { visibility: hidden; width: 0!important; height: 0!important; margin: 0!important; padding: 0!important; }
.devider-50 { width: 50%; height: 100%;  background: transparent; display: inline-block; padding: 0; float: left; position: relative; padding-top: 8vh; }  
.wp-block-button { background: #cbad08; padding: 2vh; width: -moz-fit-content; width: fit-content; cursor: pointer; }
.wp-block-button .wp-block-button__link { color: #FFFFFF; vertical-align: middle; font-size: 3vh; line-height: 3vh; vertical-align: middle; }  

/******************************************************************************/
/* PORTFOLIO BANNER                                                           */
/******************************************************************************/
.portfolio-title-wrapper h1 { font-size: 8vw; text-transform: uppercase; letter-spacing: 0.45vw; color: #989898; margin: 2vw 0 0 7vw; padding: 0; line-height: 6vw; }     
.portfolio-title-wrapper h2 { font-size: 8vw; text-transform: uppercase; letter-spacing: 0.45vw; color: #cbad08; margin: 0 0 0 7vw; padding: 0; }  
.portfolio-title-wrapper h3      
{ 
    font-size: 20pt; 
    bottom: 0; 
    position: absolute; 
    width: 100%; 
    text-transform: uppercase; 
    letter-spacing: 0.1vw; 
    color: #FFFFFF; 
    margin: 0 0 10px 0; 
    padding: 0; 
    text-align: center;   
}
.portfolio-title-wrapper h4 { font-size: 4vw; text-transform: uppercase; letter-spacing: 0.2vw; color: #FFFFFF; margin: 0 0 2vh 3.5vw; padding: 0; }

/******************************************************************************/
/* MENU                                                                       */
/******************************************************************************/
.menu-container             { width: 5vw; height: 100vh; position: fixed; display: block; z-index: 100; }
.menu-header                { width: 5vw; height: 100vh; position: absolute; display: inline-block; }
.menu-navigation            { width: 100vw; height: 100vh; left: 0; position: absolute; display: inline-block; background: #cbad08; padding: 0; margin: 0; z-index: 110; }
.menu-title                 {     
    display: block;
    position: fixed;
    color: #cbad08; 
    font-size: 2vw; 
    letter-spacing: 0.3vh; 
    line-height: calc(5vw); 
    height: 100vh;        
    margin: 0 0 0 0; 
    padding: 0; 
    transform: rotate(180deg); 
    writing-mode: vertical-lr;   
    text-align: center;
    cursor: pointer;
}
.menu-title-close
{
    z-index: 115;
    width: calc(5vw + 2px);
    color: #1c1c1c;
}

/******************************************************************************/
/* FILTER                                                                     */
/******************************************************************************/
.menu-filter-wrapper { width: 90vw; height: 90vh; left: 5vw; margin: 5vh 0 5vh 0; position: relative; display: block; background: #1c1c1c; box-shadow: 0 0 5px 1px #1c1c1c; }
.menu-filter-wrapper h1 { margin: 15vh 4vw 0 4vw; font-size: 4vh; color: #989898; letter-spacing: 0.2vw; text-align: right; width: 60%; float: right; } 
.menu-filter-wrapper h4 { margin: 0 0 0 4vw; font-size: 10vh; color: #FFFFFF; letter-spacing: 0.2vw; } 
.menu-filter-wrapper .wp-block-button { position: absolute; right: 4vw; bottom: 10vh; }

.filter-items-container { margin: 10vh 0 0 0; width: 100%; position: relative; }
.filter-item { display: block; position: relative; width: 100%; margin: 2vh 0 2vh 2vh;}
.filter-item-text {  
    display: inline-block; 
    margin: 1vh 0 0 2vh; 
    height: 5vh; 
    line-height: 6vh; 
    vertical-align: middle; 
    font-size: 5vh; 
    color: #cbad08;
    cursor: pointer;
}

.filter-item-counter {  
    display: inline-block; 
    margin: 1vh 0 0 1vw; 
    height: 5vh; 
    line-height: 6vh; 
    vertical-align: top; 
    font-size: 2.5vh; 
    color: #FFFFFF;
}

.filter-item-text-unchecked {  color: #989898; }

.filter-switch {
  position: relative;
  display: inline-block;
  width: 6vh;
  height: 3vh;
  margin: 1vh;
}

/* Hide default HTML checkbox */
.filter-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.filter-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  border: 0.1vh solid #989898;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 3vh;
}

.filter-slider:before {
  position: absolute;
  content: "";
  height: 2.4vh;
  width: 2.4vh;
  margin: 0.2vh;
  background-color: #989898;  
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 3vh;
}

.filter-switch input:checked + .filter-slider {
  border: 0.1vh solid #cbad08;
}

.filter-switch input:checked + .filter-item-text {
  color: white;
}

.filter-switch input:checked + .filter-slider:before {
  -webkit-transform: translateX(3vh);
  -ms-transform: translateX(3vh);
  transform: translateX(3vh);
  background-color: #cbad08;
}

/******************************************************************************/
/* PORTFOLIO PAGE                                                             */
/******************************************************************************/
.portfolio-container                                        { margin: 0 5vw 0 5vw; width: 90vw; height: 100vh; position: absolute; background: transparent; }
.portfolio-content-wrapper-l, .portfolio-content-wrapper-p  { width: 100%; height: 90vh; margin: 5vh 0 5vh 0; position: relative; display: block; pointer-events: none;}
.portfolio-title-wrapper    { 
    width: 45vw; 
    height: calc(100% - 25vh); 
    position: absolute; 
    display: block; 
    margin: calc( 50vh - 25vh) 0 0 calc( 45vw - 22.5vw);     
}
.portfolio-l-photo img
{
    position: relative;
    width: 34vw;
    height: auto;   
    margin-left: calc(50% - 17vw);
    margin-top: 30vh;    
    pointer-events: none;
}
.portfolio-photo-l {    
    box-shadow: 0 0 5px 1px #000000;
    display: block; 
    position: absolute; 
    width: calc(90vw - 2px);
    height: calc(90vh - 2px);   
    margin: 1px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;  
    pointer-events: none;
}
.portfolio-photo-p {        
    box-shadow: 0 0 5px 1px #000000;
    display: inline-block; 
    position: relative; 
    width: calc((90vh / 3) * 2);
    height: calc(90vh - 2px);   
    margin-left: calc(50% - (((90vh / 3) * 2) / 2));
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;  
    pointer-events: none;
}

/*****************************************************************************
/* FOOTER                                                                     */
/******************************************************************************/
.footer-container           { position: relative; display: block; height: auto; margin: 2vh 0 2vh 0; }
.footer-image               { display: inline-block; text-align: center; position: relative; z-index: 10; }
.footer-image figure        { display: inline-block; padding: 0; margin: 0 1vw 0 1vw; width: auto; text-align: center; }
.footer-image img           { 
    display: block;
    position: relative;
    left: calc(50% - 2vh);
    text-align: center;
    width: 4vh; 
    height: 4vh; 
    padding: 0;
    margin: 0;
    letter-spacing: 0.2vh; 
} 
.footer-image figcaption    {
    display: block;
    padding-top: 1vh;
    color: #cbad08; 
    font-size: 18pt; 
}