modal.min.css

:root{--font-default:"DM Sans",Arial,Helvetica,sans-serif;--font-slab:var(--font-default);--modal-duration:0.8s}*{box-sizing:border-box;margin:0;padding:0}body{margin:0;display:flex;flex-direction:column;background-image:url(background.png);font-family:var(--font-default);font-size:18px;max-width:1300px;margin:0 auto}p{margin-bottom:0;padding:.5vw}img{padding-right:1rem}.topnav{overflow:hidden;margin:3.5%}.header-logo{float:left;width:auto;height:auto}.main-navbar{float:right}.topnav a{float:left;display:block;color:#000;text-align:center;padding:12px 12px;margin:5px;text-decoration:none;font-size:18px;font-family:Roboto,sans-serif}.topnav a:hover{background-color:red;color:#fff;border-radius:15px}.topnav a.active{background-color:red;color:#fff;border-radius:15px}.topnav a.icon:hover{background-color:transparent;color:#000;border-radius:0}.topnav a.icon:active{background-color:transparent;color:#000;border-radius:0}.topnav a.active span{border-bottom:1px solid #fff}.topnav .icon{display:none}@media screen and (max-width:800px){.topnav{margin-left:20px;margin-right:20px;padding-left:2vw;padding-right:2vw;padding-top:17px}.topnav a{display:none}.topnav a.icon{float:right;display:block;color:#ff001b;margin-top:-15px;margin-right:0;padding-right:0}.header-logo img{height:19px}.topnav.responsive{position:relative}.topnav.responsive .icon{position:absolute;right:0;top:0}.topnav.responsive a{float:none;display:block;text-align:left}}main{font-size:130%;font-weight:bolder;color:#000;padding-top:.5vw;padding-left:2vw;padding-right:2vw;margin:1px 20px 15px;border-radius:2rem;text-align:justify}.modal-btn{font-size:145%;background:#fe142f;display:flex;margin:auto;padding:2em;color:#fff;padding:.75rem 2.5rem;border-radius:1rem;cursor:pointer}.modal-btn:hover{background:#3876ac}.footer{margin:20px;padding:10px;font-family:var(--font-slab)}.button{background:#fe142f;margin-top:.5em;padding:1em;color:#fff;border-radius:15px;cursor:pointer;font-size:16px}.button:hover{background:#3876ac}.smFont{font-size:16px}.bground{display:none;position:fixed;z-index:1;left:0;top:0;height:100%;width:100%;overflow:auto;background-color:rgba(26,39,156,.4)}.content{margin:18% auto 5%;max-width:536px;animation-name:modalopen;animation-duration:var(--modal-duration);background:#232323;border-radius:10px;overflow:hidden;position:relative;color:#fff;padding-top:10px}.modal-body{padding:15px 8%;margin:15px auto}label{font-family:var(--font-default);font-weight:400;display:inline-block;font-size:14px;margin-bottom:12px}input{padding:8px;border:.8px solid #ccc;outline:0}.text-control{margin:0 0 8px 0;padding:8px;width:100%;border-radius:8px;font-size:20px;height:65px}.formData[data-error]::after{content:attr(data-error);font-size:.5em;font-weight:100;color:#e54858;display:block;margin-top:0;margin-bottom:0;text-align:left;line-height:.3;opacity:1;transition:.3s}.formData[data-error-visible=true]::after{opacity:1}.formData[data-error-visible=true] #checkbox1+.checkbox2-label .checkbox-icon,.formData[data-error-visible=true] .checkbox-label .checkbox-icon,.formData[data-error-visible=true] .text-control{border:2px solid #e54858}.checkbox2-label{margin-top:10px}.checkbox-label,.checkbox2-label{position:relative;margin-left:36px;font-size:12px;font-weight:400}.checkbox-label .checkbox-icon,.checkbox2-label .checkbox-icon{display:block;width:20px;height:20px;border:1px solid #fff;border-radius:50%;text-indent:29px;white-space:nowrap;position:absolute;left:-30px;top:-1px;transition:.3s}.checkbox-label .checkbox-icon::after,.checkbox2-label .checkbox-icon::after{content:"";width:12px;height:12px;background-color:#279e7a;border-radius:50%;text-indent:29px;white-space:nowrap;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:.3s;opacity:0}.checkbox-input{display:none}.checkbox-input:checked+.checkbox-label .checkbox-icon{border:1px solid #279e7a}.checkbox-input:checked+.checkbox-label .checkbox-icon::after,.checkbox-input:checked+.checkbox2-label .checkbox-icon::after{opacity:1}.checkbox-input:checked+.checkbox2-label .checkbox-icon{background:#279e7a}.checkbox2-label .checkbox-icon{border-radius:4px;border:0;background:#c4c4c4}.checkbox2-label .checkbox-icon::after{width:7px;height:4px;border-radius:2px;background:0 0;border:2px solid transparent;border-bottom-color:#fff;border-left-color:#fff;transform:rotate(-55deg);left:21%;top:19%}#confirmation{display:none;align-items:center;opacity:1;background-color:#232323;padding:0 70px;position:absolute;top:50px;left:0;z-index:10;height:85%;font-size:36px;font-weight:400;text-align:center;line-height:52px}.close{position:absolute;right:15px;top:15px;width:32px;height:32px;opacity:1;cursor:pointer;transform:scale(.7)}.close:after,.close:before{position:absolute;left:15px;content:" ";height:33px;width:3px;background-color:#fff}.close:before{transform:rotate(45deg)}.close:after{transform:rotate(-45deg)}.btn-submit#btn-submit{margin:5px auto 0}.btn-signup,.btn-submit{background:#fe142f;display:block;margin:0 auto;border-radius:7px;font-size:1rem;padding:12px 82px;color:#fff;cursor:pointer;border:0}.custom-select{position:relative;font-family:Arial;font-size:1.1rem;font-weight:400}.custom-select select{display:none}.select-selected{background-color:#fff}.select-selected:after{position:absolute;content:"";top:10px;right:13px;width:11px;height:11px;border:3px solid transparent;border-bottom-color:red;border-left-color:red;transform:rotate(-48deg);border-radius:5px 0 5px 0}.select-selected.select-arrow-active:after{transform:rotate(135deg);top:13px}.select-items div,.select-selected{color:#000;padding:11px 16px;border:1px solid transparent;border-color:transparent transparent rgba(0,0,0,.1) transparent;cursor:pointer;border-radius:8px;height:48px}.select-items{position:absolute;background-color:#fff;top:89%;left:0;right:0;z-index:99}.select-hide{display:none}.same-as-selected,.select-items div:hover{background-color:rgba(0,0,0,.1)}.text-label{font-weight:400;font-size:14px;padding:0;margin-top:12px}.hero-section{min-height:93vh;border-radius:10px;display:grid;grid-template-columns:repeat(12,1fr);overflow:hidden;box-shadow:0 2px 7px 2px rgba(0,0,0,.2);margin-bottom:10px}.hero-content{padding:51px 67px;grid-column:span 4;background:#232323;color:#fff;position:relative;text-align:left;min-width:424px}.hero-content::after{content:"";width:100%;height:100%;background:#232323;position:absolute;right:-80px;top:0}.hero-content>*{position:relative;z-index:1}.hero-headline{font-size:6rem;font-weight:400;white-space:nowrap}.hero-text{width:146%;font-weight:400;margin-top:57px;padding:0}.btn-signup{outline:0;text-transform:capitalize;font-size:1.3rem;padding:15px 23px;margin:0;margin-top:59px}.hero-img{grid-column:span 8;background-image:url(bg_img.jpg);background-size:cover}.hero-img img{width:100%;height:100%;display:none;padding:0}.copyrights{color:#fe142f;padding:0;font-size:1rem;margin:60px 0 30px;font-weight:bolder}.hero-section>.btn-signup{display:none}footer{padding-left:2vw;padding-right:2vw;margin:0 20px}@media screen and (max-width:800px){.hero-section{display:block;box-shadow:unset;min-height:0}.hero-content{background:#fff;color:#000;padding:0 0 20px 0;min-width:0}.hero-content::after{content:unset}.hero-content .btn-signup{display:none}.hero-headline{font-size:48px;white-space:normal}.hero-text{width:unset;font-size:13px;margin-top:25px}.hero-img img{display:block;border-radius:10px;margin-top:4px}.hero-section>.btn-signup{display:block;margin:32px auto 10px;padding:12px 35px}label{font-size:14px;margin-bottom:10px}.text-label{font-size:14px;margin-top:10px}.text-control{height:48px}#confirmation{height:82.7%;font-size:30px}.copyrights{margin-top:50px;text-align:center}}@media screen and (max-width:375px){.hero-headline{font-size:30px;white-space:normal}}@keyframes modalopen{from{opacity:0;transform:translateY(-150px)}to{opacity:1}}