/*
	 * Theme Name: Congresso 2027
	 *
	 * assets/css/header.css | Header
	 *
	 */

	#header {
		height: 60px;
		position: relative;
	} 

	#header > div:first-child {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height:  100%;
	}

	#header > div:first-child > div {
	  	display: flex;
	 	flex-direction: row;
	 	align-items: center;
	}

	#header .menu {
		display: flex;
		flex-direction: row;
		font-family: "Sofia Sans Extra Condensed", sans-serif;
		font-size:  24px;
		letter-spacing: 1.5px;
	}

	#header .menu-item a {
		text-transform: uppercase;
		color:  #ffffff;
	}

	#header .menu .menu-item {
		font-weight: 400;
	}

	#header #left-menu .menu .menu-item:not(:first-child) {
		margin-left: 25px;
	}

	#header #right-menu .menu {
		margin-right: 25px;
	}

	#header #right-menu .menu .menu-item:not(:last-child) {
		margin-right: 25px;
	}

	#header .languages {
		background-color: var(--main-title-color);
		display: flex;
		width: 30px;
		height: 30px;
		border-radius:  50%;
		align-items: center;
		justify-content: center;
	}

	#header .languages a {
		display: inline-block;
		font-family: "Sofia Sans Extra Condensed", sans-serif;
		font-size: 15px;
		line-height: 30px;
		font-weight: 700;
		letter-spacing: 0px;
		color: var(--main-subtitle-color);
		margin-left: 0px;
		margin-bottom: 0px;
	}

	#home-button {
		font-family: "Sofia Sans Extra Condensed", sans-serif;
		position:  absolute;
		right:  0;
		top:  120px;
		width: 300px;
	}

	#home-button a {
		display: block;
		color: var(--main-subtitle-color);	
	}

	#home-button > div {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	#home-button .congresso  {
		position: relative;
		opacity: 0.7;
		font-size: 0.8rem;
		font-weight: 600;
		letter-spacing: -0.2px;
	}

	#home-button .titulo  {
		margin-top: 5px;
		text-align: right;
		opacity: 0.3;
		font-weight: 600;
		font-size: 2.1rem;
		line-height: 2rem;
		letter-spacing: -1px;
		width: max-content;
	}



@media screen and (max-width: 1300px) {

	#header {
		position:  relative;
		overflow: hidden;
		max-height: 60px;
		height:  initial;
		transition: all .5s ease-out;
	}

	#header.open {
		max-height: 100vh;
	}	

	#header .menu-button {
		position: absolute;
		right:  20px;
		top:  20px;
		color:  #606060;
	}

	#header .menu-button:after {
		display: inline-flex;
		font-family: 'congresso2027' !important;
      	content: "\e900";
      	font-size: 15px;
      	align-items: center;
      	justify-content: center;
    }

	#header > div:first-child {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		box-sizing: border-box;
		padding: 80px 20px 20px 20px;
		background-color: #ffffff;
	}

	#header > div:first-child > div {
		width:  100%;
		flex-direction: column;
		align-items: flex-end;
	}

	#header .menu {
		flex-direction: column;
		font-size:  15px;
		letter-spacing: 1px;
	}

	#header .menu-item a {
		color:  var(--main-subtitle-color) !important; /* overrides inline style for page */
	}

	#header #left-menu .menu {
		margin-left: 0px;
	}

	#header #left-menu .menu .menu-item:first-child {
		padding-bottom: 10px;
	}

	#header #left-menu .menu .menu-item:not(:first-child) {
		margin-left: 0px;
		border-top:  1px solid var(--main-highlight-color);
		padding: 10px 0px;
	}

	#header #right-menu .menu {
		margin-right: 0px;
	}

	#header #right-menu .menu .menu-item {
		border-top:  1px solid var(--main-highlight-color);
		padding-top: 10px;
	}

	#header #right-menu .menu .menu-item:not(:last-child) {
		margin-right: 0px;
		padding: 10px 0px;
	}

	#header .languages {
		background-color: var(--main-subtitle-color) !important; /* overrides inline style for page */ 
	}

	#header .languages a {
		font-size: 14px;
		line-height: 30px;
		font-weight: 400;
		letter-spacing: 0px;
		color: #ffffff  !important; /* overrides inline style for page */
		margin-bottom: 2px;
	}

	#home-button {
		left:  0;
		top:  0;
		width:  max-content;
	}


	#home-button .congresso a {
		font-size: 0.8rem;
		letter-spacing: -0.2px;
	}

	#home-button > div {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}

	#home-button .congresso  {
		margin-top: 9px;
		margin-left: 9px;
	}

	#home-button .titulo  {
		margin-top: 2px;
		margin-left: 9px;
		text-align: left;
		opacity: 0.3;
		font-weight: 700;
		font-size: 1.2rem;
		line-height: 90%;
		letter-spacing: 1px;
	}


}