:root {--c1:#FFCA00;--c2:#7249CD;--c3:#261D68}
*{margin:0;padding:0;box-sizing:border-box;font-family:'HammerPro',Arial,sans-serif}
.act {padding:40px}
.act span {background-color:var(--c3);display:inline-block;padding:5px 20px 15px 20px;color:#fff;font-size:3.5em;line-height:1}
.aside-title {position:absolute;bottom:40px;left:40px;color:#fff;font-size:4em;font-weight:600;line-height:.9;text-align:left;display:none}
body{direction:rtl;cursor:default;background-color:var(--c1)}
.container{display:flex;flex-direction:row-reverse;min-height:100vh}
.form-container{width:350px;background-color:#6838c2;padding:2rem;display:flex;flex-direction:column;align-items:center}
.form-container h2 {text-align:center;color:#fff;font-size:2em;font-weight:400;line-height:1;margin:0 auto 20px auto}
.form-container h2 span {color:var(--c1)}
.main-image-container{flex:1;background-color:#fcc52d;background-image:url(../images/bg_image.png);background-repeat:repeat}
.main-image{width:100%;height:100%;background-size:contain;background-position:bottom left;background-repeat:no-repeat}
.mobile-title {padding:10px 40px 20px 0;font-size:4em;font-weight:bold;line-height:.9;}
.mobile-title:first-line {font-weight:400}
.logo{width:200px;margin-bottom:2rem}
form{width:100%;color:#fff}
.form-group{margin-bottom:10px}
label{display:block;margin-bottom:.5rem}
input,select{width:100%;padding:13px 20px;border:none;border-radius:4px;text-align:right;font-size:1.1em}
input::placeholder{color:gray;font-size:1em}
input[type="checkbox"]{display:none}
.checkbox-group{margin:1rem 0;display:flex;align-items:center}
.checkbox-group label {margin-bottom:0;font-size:.96em;display:block;padding-inline-start:30px;position:relative}
.checkbox-group label:before {content:'';width:20px;height:20px;background-color:var(--c1);display:block;position:absolute;top:0;inset-inline-start:0;border-radius:50%;transition:all .2s ease}
.checkbox-group label:hover:before {transform:scale(1.2);box-shadow:0 0 10px var(--c1)}
.checkbox-group label:after {content:'';width:20px;height:20px;background:url(../images/v.svg) no-repeat center center / 60%;display:block;position:absolute;top:0;inset-inline-start:0;z-index:2;opacity:0;transform:translateY(-10px);transition:all .2s ease}
.checkbox-group input:checked+label:after {opacity:1;transform:translateY(0)}
button{background-color:var(--c1);color:var(--c3);border:none;padding:.75rem 2rem;border-radius:50px;cursor:pointer;font-weight:700;width:100%;font-size:1.3em;display:flex;align-items:center;justify-content:center;gap:.25rem;transition:all .2s ease}
button span{display:inline-block;transform:scaleX(-1)}
button:hover{box-shadow:0 5px 20px var(--c1);transform:translateY(-2px)}

/*STAGE*/
.stage {flex-basis:calc(100% - 350px);color:var(--c3);position:relative;overflow:hidden}
.stage ul {display:flex;flex-wrap:wrap;padding:0 40px 20px 20px;font-size:1.3em;max-width:550px}
.stage ul li {list-style:none;display:inline-flex;align-items:center;line-height:1;border-left:1px solid;padding:0 7px}
.stage ul li:last-child {border:0}
.stage ul img {width:2em;display:none}
.stage aside {position:absolute;bottom:0;left:0;top:100px;max-width:60%;display:flex;align-items:flex-end}
.stage aside img {max-height:100%;width:auto;max-width:100%}
.stage footer {background-color:var(--c2);color:#fff;padding:20px 40px;font-size:1.7em}
.sapir_logo {display:none;max-width:200px}
.tags {display:flex;flex-wrap:wrap;font-size:2em;gap:5px;max-width:400px;margin:20px 40px 20px 0}
.tags span {background-color:var(--c2);padding:0 10px 5px 10px;color:#fff}

.title {margin:20px 40px 0 0;font-size:4em;font-weight:700;line-height:.8;max-width:40%}
.logos {display:flex;padding:30px;gap:40px;justify-content:flex-end;align-items:center}
.logos img {max-width:120px}
header {display:flex;color:#fff;font-size:6em;justify-content:flex-start;align-items:flex-end;line-height:1;padding:0 40px 0 0;max-width:70%}
header h1 {display:inline-block;background-color:var(--c2);padding:0 20px 10px 20px;font-size:1em;transform:translateY(-50%);margin:0 0 0 -20px}
header h2 {display:inline-block;background-color:var(--c2);font-weight:400;font-size:1em;padding:0 20px 10px 20px;flex-grow:1}
.date {display:flex;padding:0 40px 0 20px;font-size:2.2em;align-items:center;gap:30px}
.date div {display:flex;flex-direction:column-reverse}
.date h3 {font-size:3.3em;line-height:1;transform:translateY(-.1em)}
.date div p:first-child {font-size:1.8em;font-weight:700;line-height:.8}
.date div p:last-child {font-weight:400;line-height:.6}
.intro {padding:0 40px 0 0;font-size:1.8em;max-width:40%;line-height:1}
.intro p {font-weight:500}
.logos_m {display:none;padding:20px;gap:20px;align-items:center;justify-content:center}
.logos_m img {max-width:90px}
.footer_m {display:none;text-align:center;color:#fff;margin-bottom:20px}

@media (max-width: 1650px) {
    .stage aside {max-width:50%}
    .stage main {font-size:.8em}
}
@media (max-width: 1300px) {
    header {max-width:none;margin:0 0 0 40px}
    .stage {display:flex;flex-direction:column;align-items:center}
    .stage main {width:100%}
    .sapir_logo {display:block;margin:20px auto 60px auto}
    .logos {display:none}
    .stage aside {position:relative;top:0;max-width:none;flex-direction:row-reverse;align-items:center;justify-content:space-between;padding:0 40px 0 0}
    .stage aside img {max-height:none;max-width:100%}
    .stage aside div {}
    .stage aside div span {background-color:var(--c2);padding:0 10px 5px 10px;display:inline-flex;color:#fff}
    .stage footer {display:none}
    .stage ul {max-width:none;justify-content:center;padding:0 20px;font-size:1em}

}
@media (max-width: 930px) {
    header {font-size:4em}
    .date {font-size:2em}
}
@media (max-width: 768px) {
    .act {padding:20px;text-align:center}
    .act span {font-size:2.5em}
    .aside-title {display:none}
    header {font-size:6em}
    .logo {display:none}
    .date {font-size:3.3em;padding-right:20px;padding-bottom:0;justify-content:center}
    .container{flex-direction:column-reverse;width:100%;overflow-x:hidden}
    .form-container {width:auto;margin:-80px 20px 0 20px;position:relative;z-index:1}
    .intro {max-width:none;padding:10px 20px;font-size:1.3em;text-align:center}
    .mobile_list {display:block}
    .mobile-title {display:block;text-align:center;padding:10px 0;font-size:3em}
    .main-image-container{width:100%}
    .main-image{width:100%;height:0;padding-top:calc(100% * (1282/930));background-size:100% auto;background-position:top center;margin:0}
    .logos_m {display:flex}
    .footer_m {display:block}
    .tags {margin-right:20px}
    .title {font-size:3em;max-width:none;margin-right:20px}
    .stage main {display:flex;flex-direction:column}
    
}
@media (max-width:580px) {
    header {font-size:2.9em;padding-right:20px}
    .date {font-size:2.2em;gap:10px}
    .date h3 {font-size:2.5em}
    .date div p:first-child {font-size:1.4em}
    .date div p:last-child {font-size:.8em}
    .sapir_logo {margin-bottom:40px}
    .stage aside {align-items:flex-start;padding-inline-start:20px}
}

#thankYouMessage{display:none;text-align:center;color:#fcc52d}
#thankYouMessage h2{color:#fff;font-weight:700;margin-bottom:20px;font-size:1.5em}
#thankYouMessage p{font-size:1.2em}
@font-face{font-family:'HammerPro';src:url(../fonts/HammerProGX.ttf) format("truetype")}

