:root{--sutter-color:#fcb117}body,html{width:100vw;height:100vh;background-color:#fff;padding:0;margin:0;font:12pt open sans,sans-serif}a,a:hover{text-decoration:none;color:#000}.w100{width:100%}body.login{display:flex;flex-direction:row;& div.image-container { width: 45vw; background:url('/assets/img/shutterstock_1986979817.jpg'); background-size:cover; background-position:center; } & div.form-container { width: 55vw; display: flex; align-items: center; justify-content: center; & form { & img { margin: 0 auto 3.5em; max-width: 350px; } } } & div.form-container:before { content: ""; width: 0px; height: 0px; border-top: 50vh solid #FFF; border-right: 0; border-bottom: 50vh solid #FFF; border-left: 175px solid transparent; position: absolute; right: 55%; } & form { flex-basis:40%; flex-direction: column; display:flex; align-items: center; justify-content: center; & label { display: block; color: #444; } & div.form-input { display: flex; flex-direction: column; gap: .25em; margin: .5em 0; } & input.form-text { display: block; border: 1px solid #ccc; padding: 0.5em; font-size:1rem; } & div.form-group { width:100%; border:1px solid #aaa; border-radius: .25rem; padding:1em; } & .btn { padding: .75rem 0; font-size: 1rem; text-align: center; border-radius: .25rem; margin: 0; border: 0; } & .btn-sutter { background-color: var(--sutter-color); color: #FFF; } }}@media only screen and (max-width:1024px){body.login{flex-direction:column;justify-content:center;align-items:center}div.image-container,div.form-container:before{display:none}}