/*-------------------------------------------------------
Theme Name: Tema Upon
Author: Upon
Author URI: https://upon.pt/
Template: Divi
Version: 1.0.0
----------------- ADDITIONAL CSS HERE ------------------*/

/** Menu **/

#upon_main_menu_wrapper{transition: transform 600ms ease-in-out;}
#upon_main_menu_wrapper ul{visibility:hidden;}
body.upon_show_menu #upon_main_menu_wrapper{transform: translate(0px) translateY(0px);}
body.upon_show_menu #upon_main_menu_wrapper ul{visibility:visible;}

#upon_main_menu_wrapper > div{display:flex;justify-content:flex-end;}
#upon_main_menu_wrapper ul{width: fit-content;list-style:none;text-align: right;min-width:50vw}
#upon_main_menu_wrapper ul li a{position:relative;font-size:60px;font-weight: 400;line-height:1;color:#777;transition:all 300ms ease-in-out;padding:10px 0;text-transform:lowercase;display:block;}

#upon_main_menu_wrapper ul li a:before,#upon_main_menu_wrapper ul li a:after{content:"";position:absolute;top:-1px;left:0;width:100%;height:1px;background-color:#777;transition:background-color 300ms ease-in-out;}
#upon_main_menu_wrapper ul li a:after{top:auto;bottom:0;}
#upon_main_menu_wrapper ul li a:hover:before,#upon_main_menu_wrapper ul li a:hover:after{background-color:#0A0000;z-index:3}
#upon_main_menu_wrapper ul li a:hover{color:#0A0000;z-index:3;}

/** Language Switcher **/

.upon-lang-switcher {
    display: flex;
    gap: 10px;
    font-family: sans-serif;
    font-weight: 500;
    justify-content: flex-end;
	transition:color 300ms ease-in-out;
}

.upon-lang-switcher a {
    text-decoration: none;
    font-size: 16px;
}

.upon-lang-switcher .active-lang {
    font-weight: bold;
    color: #0A0000;
}
.upon-lang-switcher a:before {
    content:'\02759';
	padding-right: 3px;
	opacity:0;
	transition:opacity 300ms ease-in-out;
	
}
.upon-lang-switcher a:hover:before,.upon-lang-switcher a.active-lang:before {
    content:'\02759';
	padding-right: 3px;
	opacity:1;
}

.upon-lang-switcher .inactive-lang {
    color: grey;
}

.upon-lang-switcher a:hover {
    color: #0A0000;
	font-weight: bold;
}

/** Toggle Button **/

.menu-toggle{
	width:50px;
	height:30px;
	border:1px solid #0A0000;
	cursor:pointer;
	position:relative;
	border-radius:40px;
}
.hamburger,.cross{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.hamburger span{
	display:block;
	width:18px;
	height:2px;
	margin-bottom:3px;
	overflow:hidden;
	position:relative;
}
.hamburger span:last-child{
	margin:0;
}
.hamburger span:before,.hamburger span:after{
	content:"";
	position:absolute;
	width:100%;
	height:100%;
	background-color:#0A0000;
	transform:translateX(-200%);
	transition:transform ease 300ms;
}
.hamburger span:after{
	transform:translateX(0);
}
.hamburger span:nth-child(2):before,.hamburger span:nth-child(2):after{
	transition-delay:75ms;
}
.hamburger span:last-child:before,.hamburger span:last-child:after{
	transition-delay:150ms;
}
.menu-toggle:hover .hamburger span:before{
	transform:translateX(0);
}
.menu-toggle:hover .hamburger span:after{
	transform:translateX(200%);
}
.menu-toggle.active .hamburger span:before{
	transform:translateX(100%);
}
.menu-toggle.active .hamburger span:after{
	transform:translateX(200%);
}
.cross span{
	display:block;
	width:18px;
	height:2px;
	background-color:#0A0000;
	transform:translateY(50%) rotate(45deg) scaleX(0);
	transition:transform ease 200ms;
}
.cross span:last-child{
	transform:translateY(-50%) rotate(-45deg) scaleX(0);
}
.menu-toggle.active .cross span{
	transition-delay:450ms;
	transform:translateY(50%) rotate(45deg) scaleX(1);
}
.menu-toggle.active .cross span:last-child{
	transform:translateY(-50%) rotate(-45deg) scaleX(1);
}

body.upon_show_menu .menu-toggle{border-color:#777;}
body.upon_show_menu .cross span, body.upon_show_menu .hamburger span:before, body.upon_show_menu .hamburger span:after{background-color:#777;}

/**** Work ****/

.upon_masonry_grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.upon_masonry_item {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 450px;
    flex-grow: 1;
    display: flex;
    align-items: flex-start;
    color: white;
    padding: 15px;
    box-sizing: border-box;
	border-radius:5px;
	overflow:hidden;
}

.upon_masonry_item:before{
	content:'';
	position:absolute;
	top:0;left:0;
	height:100%;
	width:100%;
	background-color: #777777;
	mix-blend-mode: multiply;
	opacity:0;
	pointer-events:none;
	transition:opacity 600ms ease-in-out;
}
.upon_masonry_item:hover:before{opacity:.9;}

.upon_masonry_content{z-index:1;display:flex;align-items:center;}

.upon_masonry_item h2 {
    margin: 0;
	font-size:14px;
	color:white;
	opacity:0;
	transition: opacity 600ms ease 300ms; 
}
.upon_masonry_item:hover h2{opacity:1;}

.upon_masonry_content span{font-size:14px;color:white;padding: 0 5px 10px 0;}

.upon_col_60 {
    flex-basis: calc(60% - 10px);
}

.upon_col_40 {
    flex-basis: calc(40% - 10px);
}

.upon_col_33 {
    flex-basis: calc(33.333% - 10px);
}


.upon_col_25 {
    flex-basis: calc(25% - 10px);
}

.upon_col_50 {
    flex-basis: calc(50% - 10px);
}



@media (max-width: 768px) {
    .upon_masonry_item {
        min-height: 400px;
    }
	.upon_col_60,.upon_col_40,.upon_col_33,.upon_col_25,.upon_col_50 {
    	flex-basis: 100%;
	}
}