:root{

	--text-color: #545454;
	--bg-color: #fff;

	--section-title-weight: 300;

	--page-title-color: #812A8F;
	--section-title-color: #531B5C;
	--strong-color: #810780;

}

.form_load{display: none; vertical-align: middle; margin-left: 15px; margin-top: -2px; width: 34px;}

body.darkMode{

	--text-color: #fff;
	--bg-color: #000;

	--section-title-weight: 500;

	--page-title-color: #D9D9D9;
	--section-title-color: #DE41DC;
	--strong-color: #AA3AA8;

}

/* Default CSS */

body, html{overflow-x: hidden; margin: 0; background-color: var(--bg-color); font-family: 'Montserrat', sans-serif;}

h1, h2, h3, h4, h5, h6, p{margin: 0;}

h1{font-size: 3rem; color: var(--page-title-color); font-weight: 700;}
h2{font-size: 1.5rem; color: var(--text-color); font-weight: 500;}
h3{font-size: 3rem; color: var(--section-title-color); font-weight: var(--section-title-weight);}
h3 strong{font-size: 2.5rem;}

svg, img{max-width: 100%;}

p,
label{font-size: 1.125rem; color: var(--text-color); font-weight: 500;}
strong{font-size: 1.5rem; color: var(--strong-color);}
small{font-size: 0.75em; color: inherit;}
a,
button{background: linear-gradient(93.68deg, #810780 10.33%, #AF2BAE 104.58%); box-shadow: 4px 4px 15px rgba(85, 6, 84, 0.36); border-radius: 10px; padding: 15px 20px; cursor: pointer; appearance: none; border: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: clamp(0px, 280px, 100%); text-decoration: none; color: #fff;}

*{box-sizing: border-box;}

.mobile{display: none;}
@media(max-width: 768px){
	.desktop{display: none;} .mobile{display: block;}}

/* Helper Classes */

.content{width: 1200px; max-width: 90vw; margin: auto;}

.row,
.column{display: flex; gap: inherit;}
.column{flex-direction: column;}

/* Squares */

#doubleSquares{position: absolute; top: -500px; left: -250px;}
#pentaSquares{position: absolute; top: 100px; right: -170px;}

/* Main */

	/* Header */

main {
	position: relative;
	background: url(../assets/images/Home.jpg) no-repeat top center / cover;
	aspect-ratio: 1366 / 760;
	background-attachment: fixed;
	z-index: 1;
}

main::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: -1;
	pointer-events: none;
}
main .content.column .logo{display: flex; justify-content: end; align-items: center; padding-top: 100px; gap: 10px;}
main .content.column .logo .logo-itemOne{border-right: 1px solid #fff;margin-right: 10px;}
main .content.column .logo .logo-itemOne img{margin-right: 20px;}
main header .content{ text-align: center; gap: 30px;}
main header h1{color: #fff; max-width: 1025px; margin: 0 auto;}
main header p{font-size: 1rem; font-weight: 400; max-width: 1025px; margin: 0 auto;}

main section#regressiveCounter{justify-content: center; align-items: baseline; gap: 5px 40px; color: #fff;}
main section#regressiveCounter .column:before{content: attr(data-val); font-size: 3rem; font-weight: 900;}

	/* Schedule */

main section#schedule{padding-bottom: 20px}
main section#schedule .title-propram{transform: skew(20deg);text-align: center}
main section#schedule h3{font-size: 2rem; font-weight: 700;color: #fff;transform: skew(-20deg); padding: 8px 6px 9px 58px}
main section#schedule .title.column p{font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 20px; display: flex; align-items: center; color: #FFFFFF; padding-top: 17px; padding-left: 20px;}

main section#schedule .title{gap: 10px;align-items: center;}
main section#schedule .content{gap: 50px;}

main section#schedule #tabbedSchedule{gap: 15px;}

main section#schedule .tabs{justify-content: space-between; padding: 20px; position: relative;}
main section#schedule .tabs:before{content: ''; position: absolute; top: calc(50% - 1px); left: 20px; right: 20px; height: 2px; background-color: #C52DC4;}
main section#schedule .tabs label{background-image: linear-gradient(to right, rgba(197, 45, 196, 1) 0%, rgba(129, 7, 128, 1) 50%, rgba(130, 8, 129, 0.5) 51%, rgba(193, 42, 192, 0.5) 100%); background-position: top left 100%; background-size: 202%; background-color: #000; aspect-ratio: 1; width: 120px; border-radius: 50%; align-items: center; justify-content: center; display: flex; text-align: center; cursor: pointer; user-select: none; color: rgba(255 255 255 / 50%); transition: all .5s ease; z-index: 1;}
main section#schedule .tabs label strong{color: inherit;}
main section#schedule .tabs label span{font-weight: 300;}

main section#schedule .grid{display: grid; grid-template-areas: "time company theme speaker"; grid-template-columns: 10% repeat(3, 30%); text-align: center; width: 100%;}
main section#schedule .grid .time{grid-area: time;}
main section#schedule .grid .company{grid-area: company;}
main section#schedule .grid .theme{grid-area: theme;}
main section#schedule .grid .speaker{grid-area: speaker;}

main section#schedule input#date-22_01:checked ~ .tabs label[for="date-22_01"],
main section#schedule input#date-23_01:checked ~ .tabs label[for="date-23_01"],
main section#schedule input#date-24_01:checked ~ .tabs label[for="date-24_01"],
main section#schedule input#date-25_01:checked ~ .tabs label[for="date-25_01"],
main section#schedule input#date-26_01:checked ~ .tabs label[for="date-26_01"],
main section#schedule input#date-27_01:checked ~ .tabs label[for="date-27_01"],
main section#schedule input#date-28_01:checked ~ .tabs label[for="date-28_01"]{box-shadow: 10px 10px 50px rgba(234, 68, 233, 0.3); background-position: top left 0%; color: #fff;}

main section#schedule input#date-22_01:not(:checked) ~ .scheduleColumns .column[for="date-22_01"],
main section#schedule input#date-23_01:not(:checked) ~ .scheduleColumns .column[for="date-23_01"],
main section#schedule input#date-24_01:not(:checked) ~ .scheduleColumns .column[for="date-24_01"],
main section#schedule input#date-25_01:not(:checked) ~ .scheduleColumns .column[for="date-25_01"],
main section#schedule input#date-26_01:not(:checked) ~ .scheduleColumns .column[for="date-26_01"],
main section#schedule input#date-27_01:not(:checked) ~ .scheduleColumns .column[for="date-27_01"],
main section#schedule input#date-28_01:not(:checked) ~ .scheduleColumns .column[for="date-28_01"]{opacity: 0; transition-delay: 0s; pointer-events: none;}

main section#schedule .scheduleColumns{display: grid;}

main section#schedule .column[for]{gap: 15px; grid-column: 1; grid-row: 1; transition: all .3s ease .3s;}
main section#schedule .column[for] .grid{padding: 15px 0; align-items: center; border-radius: 8px; overflow: hidden;}
main section#schedule .column[for] .grid .company{position: relative; min-height: 140px;}
main section#schedule .column[for] .grid .company_e:before{content: 'Vagas Esgotadas'; position: absolute; writing-mode: vertical-lr; white-space: nowrap; top: -30px; bottom: -30px; left: 30px; transform: rotate(200deg); background-color: #340f37; padding: 0 10px;}

/* Article */
body.darkMode{background: url("../assets/images/bg-program.png")no-repeat top center / cover;  background-attachment: fixed;}
article{position: relative; padding: 170px 0 235px;}

	/* Header */

article header.row{align-items: center; gap: 10px 30px;}

	/* Invitation */

article section#invitation{gap: 30px; padding: 20px 0 35px;}
article section#invitation .ivitation-item{background: #4E1653; box-shadow: -15px 15px 0px #340F37; border-radius: 15px; max-width: 1009px; transform: skew(20deg);}
article section#invitation h3{font-size: 2.25rem;font-style: normal; font-weight: 500;  line-height: 48px;color: #FFFFFF; max-width: 768px; padding: 9px 0px 16px 70px; transform: skew(-20deg);}
article section#invitation p{padding-left: 86px;}

	/* Subscribe */

article section#subscribe{gap: 35px;}
article section#subscribe .graySquare{background: #D9D9D9; border-radius: 50px; aspect-ratio: 851.18/270.63;}
article section#subscribe .subscribe-text strong{color: #fff; font-size: 1.5rem;}
article section#subscribe .row{gap: calc(100vw/1366 * 170); align-items: center;}
article section#subscribe .row > .column:not(form){gap: 30px; align-items: center;}
article section#subscribe form{gap: 20px; flex: 1 1 auto;}
article section#subscribe form .column{gap: 8px;}
article section#subscribe form input{background-color: #fff; border: 2px solid #D9D9D9; border-radius: 8px; padding: 12px 16px; font: inherit;}
article section#subscribe form h3{margin-bottom: 20px;}
article section#subscribe form h3 strong{color: #fff;}
article section#subscribe form button{margin-top: 30px;}

body.darkMode article section#subscribe :is(svg#woson path, g#ciosp path){fill: #fff;}

/* Footer */

footer{padding: 25px 0; background-color: #810780; text-align: center; color: #fff;}
body.darkMode footer{background-color: #52525C;}

/* Responsive */
@media(max-width: 768px){
	main .content.column .logo{justify-content: center;margin-bottom: 40px;}

	main header p{margin-bottom: 40px;}

	main section#schedule{padding-bottom: 0;}

	/* Article */

	article#articleContent{padding-top: 60px;}

	/* Schedule */

	article section#invitation h3{font-size: 2rem; line-height: 1.25; padding: 18px 34px 17px 34px;}

}


@media(max-width: 425px){

	:root{--bg-color: #EFF0F2;}

	#doubleSquares{width: 490px; top: -400px; left: -155px;}
	#pentaSquares{width: 200px; right: -100px; top: -150px;}

	h1{font-size: 1rem;}
	h2{font-size: .75rem;}
	h3{font-size: 1.125rem;}

	h3 strong{font-size: 1.5rem;}

	p,
	label{font-size: .75rem;}
	strong{font-size: 1rem;}
	a,
	button{font-size: .75rem; width: fit-content; padding: 10px; font-weight: 500;}

	br{display: none;}

	/* main header{background-image: url("../assets/images/main-banner-responsive.jpg"); aspect-ratio: 320/507;} */
	main header h1{font-size: 1.5rem;}
	main header p{font-size: 0.875rem;}
	main header .content{gap: 6px;}

	main section#schedule .column[for] .grid{grid-template-areas: "time" "company" "theme" "speaker"; grid-template-columns: 1fr; gap: 15px; padding: 15px 20px;}
	main section#schedule .column[for] .grid .time{text-align: left;}
	main section#schedule .column[for] .grid .theme{font-weight: 700; font-size: 1rem;}
	main section#schedule .column[for] .grid .speaker{font-size: 0.875rem;}

	main section#schedule .tabs label{flex: 0 0 70px; border-radius: 15px;}
	main section#schedule .tabs{gap: 30px; overflow: auto;}
	main section#schedule .tabs:before{width: calc(70px*4 + 40px*3 - 40px);}

	main section#schedule #tabbedSchedule > .grid{display: none;}
	main section#schedule h3{font-size: 1.25rem; padding: 24px 32px 23px 32px;}
	main section#schedule .title-propram{margin: 0 10px}

	article{padding: 150px 0;}
	article header.row{gap: 0 10px;}
	article header img{width: 85px;}

	article section#invitation{ gap: 12px;}
	article section#invitation h3{font-size: 1rem;}
	article section#invitation p{padding-left: 10px; margin-top: 20px;}
	article section#invitation a{margin-top: 8px;}

	article section#subscribe{gap: 25px;}
	article section#subscribe .graySquare{aspect-ratio: 280/180;}
	article section#subscribe .subscribe-text strong{font-size: 1rem;}

	article section#subscribe .row > .column:not(form){position: absolute; left: 50%; bottom: 0%; transform: translate(-50%, -50%);}
	article section#subscribe :is(svg#woson path, g#ciosp path){fill: #fff;}
	article section#subscribe form h3{margin-bottom: 0;}
	article section#subscribe form{margin-bottom: 50px;}
	article section#subscribe form input{font-size: .75rem;}
	article section#subscribe form button{padding: 10px 30px; margin-top: 10px;}
	article section#subscribe .row > .column:not(form){gap: 5px;}
	article section#subscribe .iconsMobile svg:nth-child(1){width: 170px;}
	article section#subscribe .iconsMobile svg:nth-child(2){width: 180px;}
	.subscribeButton{margin: 0 auto;}

}