/*------------------------------------VARIABLES-----------------------------------------*/

:root{

	--wcWhite:#ffffff;
	--wcOffWhite01:#fff6e8;

	--tWhite:rgba(255,255,255,0.8);

	--wcLtGrey:#ECECEC;
	--wcBlack:#231f20;

	--blackLine_thick:13px solid var(--wcBlack);

	--arg_grad: linear-gradient(90deg, #003469, #1e9cd7, #b9e1f7, #b9e1f7, #1e9cd7,#003469);


	--uniP-sm: 1vw;
	--uniP: 2vw;



}


/*------------------------------------general-----------------------------------------*/
body, html{
	margin:0;
	padding:0;
	overflow-x: hidden;
	background-color: var(--wBlack);
}	

*{
	margin:0;
	padding:0;
	border:0;
}

h1, h2, h3, h4, h5, h6, p, a{
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
}

a{
	text-decoration:none;
}


ul {
    list-style-type: none;
}

li{
	text-decoration: none;
}

input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 0;
}


/*------------------------------------GLOBALS-----------------------------------------*/

.pageSection1{
	position:relative;
	width:100vw;
	height: 100vh;
	min-height:900px;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin: auto;
	/*display: flex;*/
}

.pageSection2{
	position:relative;
	width:100vw;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin: auto;
}

.img_wrpr,
.vid_wrpr{
	position:relative;
	width:100%;
	height: 100%;
	overflow: hidden;
}

.fitIMG,
.fitVid{
	position:relative;
	width:100%;
	height:100%;
	margin: 0% 0 0 0;
	object-fit: cover;
    object-position: center center;
}

.sq{
	aspect-ratio: 1/1;
}

/*------------------------------------fonts-----------------------------------------*/

@font-face{
    font-family:"ibmMono-semiB";
    font-style:normal;
	font-weight:normal;
    src: url(/fonts/IBMPlexMono-SemiBold.ttf) format('truetype');
}


@font-face{
    font-family:"ibmMono-bold";
    font-style:normal;
	font-weight:normal;
    src: url(/fonts/IBMPlexMono-Bold.ttf) format('truetype');
}

@font-face{
    font-family:"otc-reg";
    font-style:normal;
	font-weight:normal;
    src: url(/fonts/OT2049-Regular.woff) format('woff');
}


.bc01{
	font-family: "ibmMono-semiB";
	font-size: 0.8rem;
	line-height: 1em;
	text-align: justify;
}

.mono-b{
	font-family:"ibmMono-bold";
	font-weight: 400;
}

.otc-reg{
	font-family:"otc-reg";
	font-size: 1rem;
	line-height: 1em;
}

.t{
	color: var(--wcBlack);
}


/*------------------------------------ANIMS-----------------------------------------*/

@keyframes bounce1 {	
	0%{transform:translateY(0);}
	50%{transform:translateY(15px);}
	100%{transform:translateY(0px);}	
}



/*------------------------------------INITS----------------------------------------*/

.o0{
	opacity: 0;
}


/*------------------------------------ENTRY-----------------------------------------*/


/*------------GEN---------------*/

#hpEntrySection{
	/*background-color:var(--wcBlack);*/
	overflow: hidden;
}

.bgCon{
	position:fixed;
	width:120%;
	height:102%;
	top: -1%;
	left: -10%;
    z-index: 1;
/*    box-shadow: inset 0px 0px 200px rgba(0, 0, 0, 1);*/
}

.bttmGrad {
    position: absolute;
    width: 100%;
    height: 13vw;
    top: 61vw;
    left: 0;
    right: 0;
    margin: auto;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}


.mainCon{
	position:relative;
	width:100%;
	height:100vh;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
    z-index: 3;	
}

.rowCon{
	position:relative;
	width:100%;
	display:grid;
	grid-template-columns: 13vw 74vw 13vw;
}

.upperCon,
.lowerCon{	
	height: 13vw;
}

.midCon{
	height: 100%;
}

.upperCon .line{
	position:absolute;
	width:100%;
	height:1px;
	bottom:0;
	margin:auto;
	border-bottom: var(--blackLine_thick);
}

.lowerCon .line{
	position:absolute;
	width:100%;
	height:1px;
	top:0;
	margin:auto;
	border-top: var(--blackLine_thick);
}

.subCol{
	position:relative;
	width:100%;
	height:100%;
}

.crnrCol{
	aspect-ratio: 1/1;
	display:flex;
	justify-content:center;
	align-items:center;
}

.crnrBG{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	right:0;
	margin:auto;
}

.upperCon .crnrBG{
	height: 100%;
}

.rowCon .subCol-01 .line{
	position:absolute;
	width:1px;
	height:100%;
	top:0;
	right:0;
	margin:auto;
	border-right: var(--blackLine_thick);
	z-index: 4;
}

.rowCon .subCol-03 .line{
	position:absolute;
	width:1px;
	height:100%;
	top:0;
	left:0;
	margin:auto;
	border-left: var(--blackLine_thick);
}

.upperCon .subCol-01 .line,
.upperCon .subCol-03 .line{
	height: 93%;
}

.crnrIMG{
	position:relative;
	margin: auto;
}

#crnrIMG01,
#crnrIMG04{
	width:102%;
	height: auto;
	top: -1%;
	left: 0%;
}

#crnrIMG02{
	width:70%;
	height: auto;
}

#crnrIMG03{
	width:80%;
	height: auto;
}

/*------------UPPER---------------*/


.upperCon .subCol-02{
	position: relative;
	width:100%;
	margin: auto;
	display:flex;
	justify-content:center;
	align-items:center;
}

.upperCon .subCol-02{
	position:relative;
	width:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	overflow: hidden;
}

.trophiesCon{
	position:relative;
	width:100%;
	height: 100%;
	margin: auto;
	transform: scaleX(1.1);
}

.datesCon{
	position:relative;
	padding: var(--uniP);
	display:grid;
	display: none;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: var(--uniP);
}

.dateCol{
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}

.matchTitle{
	font-size:2.33vw;
}

.dateTitle{
	font-size:1.88vw;
	line-height: 0.77em;
	background-color:var(--tWhite);
}


.dateBG {
  fill: var(--tWhite);
}

/*------------MID--------------*/

.pickCon{
	position:relative;
	width:100%;
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
}

.pickTitle{
	font-size:2vw;
	line-height: 1em;
}

.pickText{
	font-size: 1rem;
	text-transform: uppercase;
	cursor: pointer;
}

.pickText:hover{
	background-color: var(--tWhite);
}

.dash{
	pointer-events: none;
}

.titleSect{
	position: relative;
	width:100%;
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}

.titleCon{
	position:relative;
	width:70%;
	height:auto;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}

.titleIMG{
	position: relative;
    width:100%;
    height: auto;
    margin: auto;
/*    opacity: 0;*/
}

.mund-svg-00 {
	fill: #231f20;
}

.mund-svg-01 {
	fill: #fff;
	opacity: .44;
}

.midCon .subCol-03{
	display:flex;
	justify-content:center;
	align-items:center;
}

.addressTitle{
	font-size: 1.88vw;
    letter-spacing: 0.03em;
	writing-mode: sideways-lr;
}

/*------------LOWER--------------*/

.lowerCon .subCol-02{
	position:relative;
	width: auto;
    height: auto;
    top: 0px;
	padding: 0 var(--uniP);
	display:grid;
	grid-template-columns: 1fr;
	overflow: hidden;
	/*grid-gap: var(--uniP);*/
}

.lowerCon .subCol-02 .subSubCol{
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:center;
}

.collabTitle{
	font-size:3vw;
	line-height: 1em;
	margin: 0 0 0 var(--uniP-sm);
}

.collabText{
	column-count: 1;
	column-gap: var(--uniP-sm);
	background-color: var(--tWhite);
}

.fieldText{
	font-size:2vw;
	line-height: 0.77em;
	margin: 1.22vw 0;
	background-color: var(--wcBlack);
	color: var(--wcWhite);
}

.sendText{
	background-color: var(--tWhite);
	color: var(--wcBlack);
}


.indicates-required{
	display: none;
}

label{
	position: absolute;
	pointer-events: none;
	visibility: hidden;
}

input[type="email"],
input[type="text"],
.mcSendBtn{
	font-family: "otc-reg";
    font-size: 2vw;
    line-height: 0.77em;
    text-align: left;
    margin: 2% 0;
    padding: 0;
    height: 1.5vw;
    width: 100%;
}

input[type="email"],
input[type="text"]{
	background-color: var(--wcBlack);
    color: var(--wcWhite);
}

input[type="email"]::placeholder,
input[type="text"]::placeholder{
    color: var(--wcWhite);
}

input[type="email"]:focus-visible,
input[type="text"]:focus-visible {
    outline: 3px solid blue;
}

.mcSendBtn{
	background-color: var(--wcWhite);
    color: var(--wcBlack);
    cursor: pointer;
}

.mcSendBtn:hover{
	color: var(--wcWhite);
	background-color:none;
	background: var(--arg_grad);
}













/*------------------------------------OVERLAY---------------------------------------*/

@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 5%) }
  90% { transform:translate(-10%, 10%) }
}


.grainMain{
	position: fixed;
	width: 300%;
	height: 300%;
	top: 0;
	pointer-events: none; 
	z-index: 1002;
	opacity: 0.5;
/*	transition: 1000ms;*/
/*	 animation: grain 3000ms steps(10) infinite;*/
}

.grain{
	position: fixed;
	width: 300%;
	height: 300%;
	top:-50%;
	bottom:0;
	left:-50%;
	right:0;
	margin:auto;
	pointer-events: none; 
}

.grain01{
	background-image: url(/images/globals/grain03.webp);
    background-repeat: repeat;
    background-size: 100px;
    opacity: 1;
    opacity: 0.66;
    z-index: 1001;
    mix-blend-mode: hard-light;
    animation: grain 8000ms steps(10) infinite;
}

.grain02{
	mix-blend-mode: exclusion;
    background-image: url(/images/globals/grain01-in.webp);
    background-repeat: repeat;
    background-size: 50px;
    opacity: 0.88;
    animation: grain 8000ms steps(10) infinite;
    z-index: 1002;
}

.colorOvly{
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
    z-index: 2;
	pointer-events: none; 
	background: rgba(255, 255, 255, 0.2);
    /*background-color: purple;*/
}

.arg-ovly{
	background: var(--arg_grad);
	opacity: 0.9;
}

.aust-ovly{
	background: linear-gradient(0deg, #2e6b83, #2e6b83, #2e6b83, #ee8068, #ee8068);
	opacity: 0.9;
}

.brazil-ovly{
	background: #FDD301;
	opacity: 0.9;
	mix-blend-mode: hard-light;
}

.colo-ovly{
	background: #FFD100;
	opacity: 1;
	mix-blend-mode: screen;
}

.eng-ovly{
	background: #fff;
	opacity: 0.9;
	mix-blend-mode: hard-light;
}

.france-ovly{
	/*background: #A9E4D4;*/
	background: #d64c4c;
    opacity: 1;
    mix-blend-mode: exclusion;
}

.ger-ovly{
	/*background: #A9E4D4;*/
	background: #fff;
    opacity: 1;
    mix-blend-mode: color;
}

.ghana-ovly{
	background: #f8dc75;
	opacity: 0.9;
	mix-blend-mode: hard-light;
}

.mex-ovly{
	background: #00933B;
	opacity: 1;
	mix-blend-mode: darken;
}

.norway-ovly{
	background: #00205B;
	opacity: 0.9;
	mix-blend-mode: darken;
}


.spain-ovly{
	background: #ce0404;
	background: repeating-linear-gradient(
	   90deg,
	   #ce0404,
	   #ce0404 5vw,
	   #f7c11d 5.2vw
	 );
	opacity: 0.9;
	mix-blend-mode: hard-light;
}

.urug-ovly{
	background: #0B1021;
    opacity: 0.9;
    mix-blend-mode: color-burn;
}

.usa-ovly{
	background: repeating-linear-gradient(
	   45deg,
	   #fff,
	   #ce0404 10vw,
	   #CB333B 12.2vw,
	   #833D3D 4vw
	 );
	opacity: 0.9;
	mix-blend-mode: normal;
}


/*-----------------------------------FOOTER-----------------------------------------*/

.footerMain{
	position:relative;
	overflow: hidden;
}





/*------------------------------------------------------1800px----*/
/*------------------------------------------------------1800px----*/
/*------------------------------------------------------1800px----*/

@media (max-aspect-ratio: 16/10) {


.bgCon{
	width:150%;
	left: -25%;
}

.bttmGrad {
	top: unset;
    bottom: -10%;
}

}

@media (max-aspect-ratio: 16/13) {

#hpEntrySection{
	height: auto;
	overflow: auto;
}

.bgCon{
	width:170%;
	left: -35%;

}

.bttmGrad {
	top: unset;
    bottom: 0;
}

/*.lowerCon .subCol-02 {
    top: 0;
    padding: 0 var(--uniP-sm);
    grid-template-columns: 1fr 3fr 1fr;
}*/

.snip{
	display: none;
}


}


@media (max-aspect-ratio: 1/1) {


.bgCon{
	width: 200vh;
	left: -100vh;
}

.bttmGrad {
    bottom: -5%;
}

.upperCon .subCol-02 {
    width: 100%;
}

.midCon {
    display: flex;
    flex-direction: column;
}

.midCon .subCol-01,
.midCon .subCol-03{
	background-color: unset !important;
}

.crnrCol{
	display: none;
}

.pickCon {
	position:absolute;
    justify-content: flex-start;
    z-index: 100;
}

.pickList{
	width:fit-content;
	/*background-color: rgba(255, 255, 255, 0.33);*/
	transform:translateX(-100%);
}

.pickTitle {
    font-size: 3vw;
    width:fit-content;
    line-height: 1em;
    margin: 2vw;
    cursor: pointer;
}

.pickTitle:hover{
	color: var(--wcWhite);
	background-color:none;
	background: var(--arg_grad);
}


.pickTitle br{
	display: none;
}

.rowCon .subCol-01 .line{
	border-right:none;
}

.rowCon .subCol-03 .line{
	border-left:none;
}

.addressTitle {
    font-size: 2.88vw;
    letter-spacing: 0.03em;
    writing-mode: unset;
    text-align: center;
}

.upperCon, .lowerCon {
    height: 25vw;
    grid-template-columns: 1fr;
}

.matchTitle {
    font-size: 3.33vw;
}

.dateTitle {
    font-size: 2.88vw;
}

/*.lowerCon .subCol-02 {
    grid-template-columns: 1fr 2fr 1fr;
}*/

.collabTitle {
    font-size: 4vw;
}

input[type="email"], input[type="text"], .mcSendBtn {
    font-size: 3vw;
    line-height: 0.77em;
    margin: 4% 0;
    height: 2.2vw;
}



}


@media (max-aspect-ratio: 11/12) {


.bgCon{
	width: 200vh;
	left: -60vh;
}





}


@media (max-aspect-ratio: 3/4) {

.mainCon {
    /*justify-content: flex-start;*/
    /*gap: 5vw;*/
}

.upperCon, .lowerCon {
    height:auto;
}

/*.upperCon{
	height: auto;
	order: 2;
}

.midCon{
	height: auto;
	order: 1;
}

.lowerCon{
	order: 3;
}*/

.midCon {
    height: auto;
    padding: 0 0 10vw 0;
}

.subCol{
	height: auto;
}

/*.upperCon .line {
    top: 0;
    bottom: unset;
}*/

.upperCon .subCol-02 {
    width: 100%;
    padding: 0;
}

.titleCon{
	width:80%;
    padding: 15vw 0 5vw 0;
}

.pickList{
	padding: 10px;
	background-color: rgba(255, 255, 255, 0.66);
	border-top: var(--blackLine_thick);
	border-right: var(--blackLine_thick);
	border-bottom: var(--blackLine_thick);
}

.addressTitle {
    font-size: 3.88vw;
    padding: 5vw;
}

.datesCon{
	display:flex;
	flex-direction:column;
	gap: 5vw;
}

.matchTitle {
    font-size: 7.33vw;
}

.dateTitle {
    font-size: 6.88vw;
}

/*.lowerCon .subCol-02 {
    padding: 10vw 5vw;
    grid-template-columns: 1fr;
}*/

.collabTitle {
    font-size: 7vw;
    text-align: center;
}

.collabTitle br{
	display: none;
}

.bc01 {
    font-size: 1.2rem;
}

input[type="email"], input[type="text"], .mcSendBtn {
    font-size: 6vw;
    line-height: 0.77em;
    margin: 2% 0;
    height: 5.2vw;
    text-align: center;
}

}