/*FONTS*/
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&display=swap");

@font-face {
  font-family: FontAwesome;
  src: url("fonts/fontawesome-webfont.woff2")
}

@font-face {
	font-family: AGP-Medium;
	src: url("fonts/AvantGardeGothicPro/ITCAvantGardePro-Md.otf");
}

@font-face {
	font-family: AGP-Bold;
  font-size: 2rem;
	src: url("fonts/AvantGardeGothicPro/ITCAvantGardePro-Bold.otf");
}

@font-face {
	font-family: AGP-Demi;
	src: url("fonts/AvantGardeGothicPro/ITCAvantGardePro-Demi.otf");
}

@font-face {
	font-family: AkkuratPro-Bold;
	src: url("fonts/Akkurat/AkkuratPro-Bold.otf");
}

@font-face {
	font-family: Akkurat-Regular;
	src: url("fonts/Akkurat/Akkurat.ttf");
}

:root {
	--color-border: #dfe6e9;
	--color-border-light: #f6f6f6;
	--color-primary: red;
	--font-medium: 'AGP-Medium';
	--font-bold: 'AGP-Bold';
	--font-demi: 'AGP-Demi';
	--font-sub: 'AkkuratPro-Bold';
	--font-sub-regular: 'Akkurat-Regular'
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

html {
	font-size: calc(0.12em + 1vw);
}

body {
	scroll-behavior: smooth;
	background: repeating-linear-gradient(to right, white 0px, white 160px, var(--color-border) 160px, #dfe6e9 160.65px);
}

body::-webkit-scrollbar{
	display: none;
}

p {
}

a {
	color: black;
	text-decoration: none;
}

section {
	min-height: 30vh;
}

.hidden {
	opacity: 0;
}

.show {
	opacity: 1;
	transition: all ease 1s;
}

.button--main {
	font-size: 0.7rem;
	letter-spacing: 0.05rem;
	font-family: var(--font-sub);
}

.navm {
	width: 0;
	height: 0;
	display: none;
	visibility: none;
}
.navm * {
	display: none;
}
.nav {
	border-bottom: 1px solid var(--color-border);
	background-color: white;
	position: fixed;
	top: 0;
	width: 100vw;
	height: 5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 999;
}

.nav__img img {
	width: 3rem;
	margin-left: 1rem;
}

.nav__links {
	margin-left: 6rem;
}

.nav__links a {
	margin: auto 3rem;
	font-size: 0.7rem;
	letter-spacing: 0.1rem;
	font-family: var(--font-demi), FontAwesome;
}

.nav__links a:hover {
	color: red;
}

.nav__current-page {
	color: red;
}

.nav__icons a {
  font-family: FontAwesome;
  color: #666;
  padding: 2rem 1.2rem; /*random fix*/
  border-left: 1px solid var(--color-border);
}

.nav__icons a:last-child {
  border-right: 1px solid var(--color-border);
}

.header {
	height: 80vh;
	margin-top: 4rem;			
	background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)),
		url("images/header.jpg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	display: flex;
}

.header h1 {
	margin: auto;
	font-size: 5rem;
	color: white;
	letter-spacing: -0.3rem;
	font-family: var(--font-bold);
}

.news {
	display: flex;
	justify-content: space-between;
	margin: 0 3vw;
}

.news__starred, .news__stacked {
	display: flex;
	flex-direction: column;
}

.news__starred {
	transform: translateY(-4rem);
	width: 60%;
}

.news__stacked {
	margin-top: 5rem;
}

.news__stack {
	display: flex;
	border: 1px solid var(--color-border);
	border-bottom: 0;
}

.news__stack:last-child {
	border-bottom: 1px solid var(--color-border);
}

.news__starred img {
	width: 40vw;
	height: 20rem;
	object-fit: cover;
}

.news__stacked img {
	filter: brightness(50%);
	width: 14rem;
	height: 14rem;
	object-fit: cover;
}

.news__starred .news__contents {
	transform: translate(16rem, -8rem);
	width: 60%;
	padding: 2rem 0 0 2rem;
}

.news__contents {
	background-color: white;
	width: 80%;
	padding: 2rem;	
	position: relative;
}

.news__contents h1 {
	font-family: var(--font-bold);
}

.news__contents, .news__contents h1 {
	transition: all ease 0.3s;	
}

.news__contents:hover h1 {
	color: red;
}

.news__stack:hover .news__contents{
	background-color: var(--color-border-light);
}

.news__stack:hover h1 {
	color: red;
}

.news__contents div {
	display: flex;
}

.news__contents div p {
	margin-bottom: 1rem;
	font-family: var(--font-sub-regular);
	font-size: 0.7rem;
}
.news__contents--date {
	color: grey;
	margin-right: 1rem;
}	

.news__contents--subtext {
	color: red;
}

.news__contents a {
	position: absolute;
	bottom: 0;
	padding-bottom: inherit;
	margin-top: 1rem;
}

.news__starred .news__contents h1 {
	margin-bottom: 5rem;
	line-height: 3.2vw;
  	width: 90%;
	font-size: 3vw;
}

.news__starred .news__contents a {
	position: initial;
}

.news__stacked .news__contents h1 {
	font-size: 1.2rem;
}

.something {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('images/logo.png');
	background-size: 180%;
	background-repeat: no-repeat;
	background-position: center;
	border: 1px solid var(--color-border);
	margin: 5rem 10rem;
}

.something h1 {
	font-family: var(--font-bold);
	color: white;
	margin: auto;
	font-size: 5rem;
}

.something__box {
	border: 1px solid var(--color-border);
	width: 60%;
	height: 30vh;
	background-color: white;
	margin: 0 auto;
	transform: translateY(3rem);
}

.staff {
	margin: 5rem 10rem;
	display: flex;	
	flex-direction: column;
}

.staff p {
	color: grey;
	margin: 1rem;
	font-family: var(--font-sub);
}

.staff__row {
	display: flex;
}

.staff__column {
	padding: 2rem;
	width: 8rem;
	height: 8rem;
	border: 1px solid var(--color-border);
	background-color: white;
}

.staff__row .staff__column h1 {
	margin-bottom: 1rem;
	font-size: 1.5rem;
	line-height: 25px !important;
	font-family: var(--font-bold);
}

.staff__row .staff__column p {
	color: red;
	font-family: var(--font-sub);
	font-size: 0.7rem;
	margin: 0;
}

.ads {
	display: flex;
	margin: 15rem 10rem 0 10rem;
	justify-content: space-between;
}

.ad__img {
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/img-2.jpg');
	background-size: stretch;
	height: 70vh;
	
}

.ad--main {
	width: 65%;
	transform: translateY(-5rem);
	display: flex;
	flex-direction: column;
}

.ad--sub {
	width: 30%;
}

.ad--main .ad__img {
	background-position: left;
}

.ad--sub .ad__img {
	background-position: 90% 50%;
}

.ad__contents {
	background-color: white;
	padding: 2rem;
	transform: translate(70%, -50%);
	width: 60%;
}

.ad__contents h1 {
	font-family: var(--font-bold);
	font-size: 2.5rem;
	line-height: 2.5rem;
}

.ad__contents p {
	margin-top: 1rem;
	margin-bottom: 2rem;
	color: grey;
	font-family: var();
	width: 70%;
}

.footer {
	margin: 2rem;
	margin-top: 0;
	margin-bottom: 5rem;
}

.footer__gallery {
	display: flex;
	height: 120vh;
}

.footer__gallery div h1 {
	margin: auto;
	color: white;
	font-family: var(--font-bold);
	font-size: 5rem;
	letter-spacing: -0.3rem;
	transition: all ease 0.5s;
}

.footer__gallery div:hover h1{
	color: var(--color-primary);
}

.footer__gallery div {
	flex: 1;
	position: relative;
}

.footer__gallery div img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.5);
}

.footer__gallery div:hover img{
	transition: all ease 0.3s;
	filter: brightness(0.8);
}

.footer__gallery div h1 {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 25%;
}

.footer__links {
	display: flex;
	padding: 2rem;
	align-items: center;
	background-color: black;
}

.footer__links a {
	flex: 1;
}

.footer__links img {
	width: 6rem;
}
.footer__links a {
	color: white;
	font-family: var(--font-demi);
	font-size: 0.7rem;
	letter-spacing: 0.1rem;
	text-align: center;
}

.footer__connect {
	background-color: #0f0f0f;
	padding: 2rem;
	display: flex;
	align-items: center;
}

.footer__connect div {
	flex: 1;
}

.footer__connect--text:last-child {
	text-align: right;
}

.footer__connect--icons {
	text-align: center;
}

.footer__connect p {
	font-family: var(--font-sub);
	font-size: 0.8rem;
	color: #5f6269;
}

.footer__connect img {
	filter: invert(1);
}

/*PAGE SPECIFIC*/

.lang {
	height: 9rem;
	margin: 0 5rem;
	transform: translateY(-50%);
	background-color: red;
}

.lang div {
	min-height: 2rem;
	background-color: black;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lang div a {
	font-family: var(--font-sub);
	margin: 1rem;
	color: grey;
	letter-spacing: 1px;
}

.lang div a.lang--current {
	color: white;	
}

.info {
	margin: 0 5rem;
	display: flex;
}

.info div {
	background-color: white;
	border: 1px solid var(--color-border);
	padding: 2rem;
}

div.info__contents {
	position: sticky;
	left: 0;
	top: 5rem;
	border-right: none;
	flex: 1;
	height: 100%;
	padding-bottom: 5rem;
}

div.info__contents h1 {
	font-family: var(--font-bold);
}

div.info__contents a {
	font-family: var(--font-sub-regular);
	color: grey;
	display: block;
	font-size: 0.8rem;
	margin: 0.8rem 0;
	letter-spacing: 2px;
}

div.info__main {
	flex: 3;
}

.info__main article{
	border-bottom: 1px solid var(--color-border);
	padding: 2rem 0;
}

.info__main:last-child {
	padding-bottom: 0;
	margin-bottom: 5rem;
}

.info__main article h1 {
	font-family: var(--font-sub);
	color: var(--color-primary);
	font-size: 1.5rem;
	letter-spacing: -1px;
	margin-bottom: 1rem;
}

.info__main article p {
	font-family: var(--font-sub-regular);
	line-height: 1.3rem;
}

.login {
	margin-bottom: 2rem;
	margin-inline: 2rem;
	display: flex;
	border: 2px solid var(--color-border);
	background-color: white;
	justify-content: space-evenly;
}

.login__text {
	padding: 2rem;
	margin: 2rem;
	width: 45%;
	font-family: var(--font-sub-regular);
}

.login__text h1 {
	color: var(--color-primary);
	font-family: var(--font-sub-regular);
}

.login__text p {
	margin-bottom: 5rem;
}

.login__form img {
}

.login__form {
	width: 45%;
	border-left: 2px solid var(--color-border);
	background-color: white;
}

.login__form .login__bar {
	height: 10%;
	display: flex;
	border: 1px solid var(--color-border);
	background-color: white;
	justify-content: center;
	align-items: center;
	margin: 2rem;
	transform: translateY(-100%);
}

.login__bar a {
	margin: 0 2rem;
	color: #999;
	font-family: var(--font-sub);
	transition: color ease 0.3s;
}

.login__bar a.super {
	color: black;
}

.login__bar a:hover {
	color: red;
}

.login__form .login__contents {
	display: flex;
	flex-direction: column;
}

.login__contents .login__rows {
	margin: 2rem 2rem;
} 

.login__contents label{
	color: var(--color-primary);
	font-family: var(--font-sub);
}

.login__contents label span {
	color: black;
}

.login__contents input {
	padding: 1rem;
	width: 100%;
	font-size: 1.2rem;
	font-family: var(--font-sub-regular);
	border: 1px solid var(--color-border);
}

.login__contents button {
	border: 0;
	padding: 1rem;
	font-family: var(--font-sub);
	width: 6rem;
	height: 3rem;
	border-radius: 2rem;
	background-color: var(--color-primary);
	color: white;
}
/*FOR MOBILE DEVICES*/

@media only screen and (max-width: 500px) {
	html {
		font-size: calc(0.22em + 1vh);
    background: black;
	}
	nav {
		visibility: hidden;
	}
	.navm {
		visibility: visible;
		background-color: white;
		display: flex;
		height: 5rem;
		align-items: center;
		padding: 1rem;
	}
	.navm a {
		font-family: 'FontAwesome';
		font-size: 3rem;
		color: #000;
		width: 45%;
	}
	.header {
		height: 40vh;
		margin-top: 0;
	}
	.news {
		flex-direction: column;
		justify-content: space-around;
		margin: 0 2rem;
	}
	.news__starred {
		transform: translateY(-4rem);
		width: 100%;
	}
	.news__starred img {
		width: 100%;
	}
	.news__starred .news__contents {
		border: 1px solid var(--color-border);
		transform: translate(0);
		background-color: white;
		width: 100%;
	}
	.news__starred .news__contents h1 {
		font-size: 2rem;
		line-height: 2rem;
	}
	.news__starred .news__contents p {
		font-size: 1rem;
	}
	.news__starred .news__contents a {
		font-size: 1rem;
		visibility: hidden;
	}
	.news__starred img {
		width: 100%;
	}
	.news__stack {
		flex-direction: column;
	}
	.news__stacked img {
		width: 100%;
	}
	.news__stacked .news__contents {
		transform: translate(0);
		background-color: white;
		width: 100%;
	}
	.news__stacked .news__contents h1 {
		font-size: 2rem;
		line-height: 2rem;
	}
	.news__stacked .news__contents p {
		font-size: 1rem;
	}
	.news__stacked .news__contents a {
		font-size: 1rem;
	}
}