.banner {
	height: calc(100vh - 46px);
	width: 100%;

	/* background-color: var(--color-alt-dark); */
}

.banner .pattern-star{
	position: absolute;
	bottom: 0px;

	width: 50%;
}

.banner .logo{
	position: absolute;
	bottom: 80px;
	right: 40px;

	width: 40%;
}

.banner .slides .slide {
	position: relative;
	top: 0px;
	left: 0px;
	bottom: 0px;

	display: block;

	width: 100%;
	height: calc(100vh - 46px);

	background-image: url(/public/media/slide/group-shot-A.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

@media only screen and (max-width: 700px) {
	.banner .pattern-star {
		display: none;
	}

	.banner .logo {
		width: 70%;

		bottom: 70px;
		right: 20px;
	}
}



.paragraph {
	margin: 20px 15%;

	transition-property: margin;
	transition-duration: 0.4s;
}

@media only screen and (max-width: 700px) {
	.paragraph {
		margin: 20px 40px;
	}
}




.details{
	width: 100%;
}

.details .row{
	grid-template-columns: repeat( 2, 1fr );
	display: grid;

	/* background-color: #1c2542; */
	background-color: #262640;
	color: white;
	text-align: right;

	min-height: 300px;
}
.details[small="true"] .row{
	min-height: 100px;
}
.details .row:nth-child(even){
	background-color: white;
	color: black;
	text-align: left;
}

.details .row div{
	grid-column: span 1;

	grid-column: 1;
	grid-row: 1;

	margin-top    : auto;
	margin-bottom : auto;
	padding: 110px 40px;
}
.details .row div[image="true"]{
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	grid-column: 2;
	grid-row: 1;

	padding: 0px;
	margin: 0px;
}

.details .row:nth-child(even) div{
	grid-column: 2;
}
.details .row:nth-child(even) div[image="true"]{
	grid-column: 1;
}

.details .row div h1{
	margin-top: 0px;
	margin-bottom: 10px;
}
@media only screen and (max-width: 700px){
	.details .row{
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;

		text-align: left;

		min-height: 110vh;
	}

	.details .row h1 {
		text-align: center;
	}

	.details .row div{
		grid-column:  1;
		grid-row: 1;

		padding: 20px 40px 5px 20px;
	}
	.details .row div[image="true"]{
		grid-column: 1;
		grid-row: 2;
	}

	.details .row .item:first-child {
		margin-bottom: 10px;
	}

	.details .row:nth-child(even) div{
		grid-column: 1;
	}
}



.social-links {
	padding: 10px !important;
}
.social-links a{
	display: inline-block;
	height: 46px;

	padding: 0px !important;

	box-shadow: rgba(0,0,0,0.2) 0px 0px 5px 2px;

	transition-property: background-color, box-shadow;
	transition-duration: 1s, 1s;
}
.social-links a:hover {
	box-shadow: black 0px 0px 5px 2px;

	transition-duration: 0.2s, 0.2s;
}

.social-links .ani-syd:hover {
	background-color: #a11d21;
}

.social-links .discord:hover {
	background-color: #738adb;
}

.social-links .twitter:hover {
	background-color: #01acee;
}

.social-links .facebook:hover {
	background-color: #415e9b;
}

.social-links .youtube:hover {
	background-color: #cc181e;
}


.social-links img {
	height: 46px;
}