@import "normalize.css";
@import "fonts.css";
@import "scroll.css";

#app #scrollId .container {
	max-width: 1590px !important;
	display: grid !important;
	margin: 0 auto !important;
	width: auto !important;
}

body {
	background-color: #202020;
	color: #D3D3D3;
}

.header {
	min-height: 140px;
	max-width: 1590px;
	grid-column: 1 / 3;
	grid-row: 1 / 2;
}

.breadCrumps {
	grid-column: 1 / 3;
	grid-row: 2 / 3;
	display: flex;
	height: 35px;
	font-family: 'Proxima Nova Rg';
	font-size: 15px;
}

.collabLogos {
	grid-column: 1 / 2;
	grid-row: 3 / 4;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.firstLogo {
	margin-bottom: 30px;
}

.secondLogo {
	margin-top: 30px;
}

.cross {
	margin-left: 118px;
}

.collabDescription {
	grid-column: 1 / 2;
	grid-row: 4 / 5;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 250px;
}

.collabDescriptionText {
	max-width: 592px;
	font-family: 'Proxima Nova Rg';
	font-size: 16px;
	line-height: 25px;
}

.collabPhoto {
	grid-column: 2 / 3;
	grid-row: 3 / 6;
	display: flex;
	justify-content: center;
	padding: 30px;
}

.collabPhoto > img {
	max-height: 633px;
	max-width: 748px;
	clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 98%);
}

.itemLinks {
	grid-column: 1 / 2;
	grid-row: 5 / 6;
	display: flex;
	flex-direction: row;
	justify-content: left;
	font-size: 20px;
	font-family: 'Proxima Nova Bl';
}

a:link {
	color: white;
}


.buyLink {
	margin-right: 30px;
}

.moreLink {
	margin-right: 50px;
}

.mouseIcon {
	grid-column: 1 / 3;
	grid-row: 6 / 7;
}

.collabNavi {
	position: absolute;
	text-align: right;
	right: 80px;
	top: 135px;
}

.currentCollab::before {
	content: '';
	display: inline-block;
	height: 8px;
	width: 8px;
	border-radius: 50%;
	margin-right: 10px;
	margin-bottom: 2px;
	background-color: red;
}

.collabBrands {
	list-style-type: none;
	line-height: 40px;
	font-size: 20px;
	font-family: 'Proxima Nova Bl';
}













.collabPhoto ~ span {
	grid-column: 1 / 2;
	grid-row: 6 / 7;
	display: flex;
	flex-direction: row;
	justify-content: left;
	font-size: 20px;
	font-family: 'Proxima Nova Bl';
}


.mouseIcon {
	grid-column: 1 / 3;
	grid-row: 5 / 6;
}

@media (max-width: 1268px) {
	#app #scrollId .container {
		margin-top: 60px !important;
	}

}

@media (max-width: 991px) {



	.breadCrumps {
		grid-column: 1 / 3;
		grid-row: 2 / 3;
		display: flex;
		height: 35px;
		font-family: 'Proxima Nova Rg';
		font-size: 15px;
	}
	.collabLogos {
		grid-column: 1 / 3;
		grid-row: 3 / 4;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.collabPhoto {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
    display: flex;
    justify-content: flex-start;
    padding: 0px;
    height: 385px;
	}

	.collabPhoto img {
		max-height: 100%;
	}
	.collabDescription {
		grid-column: 1 / 3;
		grid-row: 7 / 8;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 250px;
	}

	.collabPhoto ~ span {
		grid-column: 1 / 3;
		grid-row: 8 / 9;
		display: flex;
		flex-direction: row;
		justify-content: left;
		font-size: 20px;
		font-family: 'Proxima Nova Bl';
	}

	.mouseIcon {
		grid-row: 9 / 10;
		grid-column: 1 / 3;
	}
	.collabNavi {
		display: none;
	}

}

@media (max-width: 768px) {
	.collabLogos {
		flex-direction: row;
		align-items: center;
	}
.collabPhoto {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
    display: flex;
    justify-content: flex-start;
    padding: 0px;
    height: 180px;
	}
	.collabDescription {
    grid-column: 1 / 3;
    grid-row: 7 / 8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto;
	}
	.collabLogos {
    flex-direction: row;
    align-items: center;
	}
	.cross {
    margin: 0 15px;
	}
	.firstLogo {
    margin-bottom: 0;
	}
	.secondLogo {
    margin-top: 0;
	}
	.itemLinks {
    flex-direction: column;
    margin-top: 10px;
	}
	.collabLogos {
    margin-bottom: 15px;
	}
	.collabPhoto {
    margin-bottom: 15px;
	}
	.collabDescriptionText {
    font-size: 14px;
	}
	.mouseIcon {
    grid-row: 8 / 9;
    grid-column: 2 / 3;
	}
}

@media (max-width: 500px) {
	.collabDescription {
    max-height: 180px;
    overflow-y: auto;
    justify-content: flex-start;
	}
	.collabLogos {
    max-height: 80px;
	}

	.secondLogo img {
		max-height: 80px;
	}
	.mouseIcon {
    position: absolute;
    bottom: 30px;
    right: 15px;
	}
}



@media (max-width: 359px) {
	.collabPhoto {
		height: 112px;
	}

	.secondLogo img {
		max-height: 60px;
	}
	.collabDescription {
    max-height: 125px;
	}
	.itemLinks {
    font-size: 18px;
	}
	.mouseIcon {
    position: absolute;
    bottom: 10px;
    right: 10px;
	}
}