.content-wrapper{background-color:#258dc1;display:grid;grid-template-columns:40% 60%;grid-template-rows:auto;grid-template-areas:"banner banner" "benifits form";row-gap:30px}
#signup-banner{grid-area:banner;display:flex;align-items:center;justify-content:center}
#signup-banner img{height:20vw;max-height:250px}
#signup-banner h1{font-size:38px;padding-left:25px;font-family:"Open Sans",Helvetica,Arial,sans-serif;color:#c11728;margin:0 0 10px;font-weight:600}
#benifits-wrapper{grid-area:benifits;width:60%;justify-self:center;display:flex;flex-direction:column;justify-content:flex-start}
.benifit{display:flex;align-items:center;margin:10px 0}
.benifit img{height:100px}
.benifit p{font-family:'Open Sans',Helvetica,Sans-Serif;margin:20px 20px;color:white}
#signup{padding:75px;margin:80px 80px 80px 0;grid-area:form;background:white;display:grid}
#signup #info-wrapper{display:grid;grid-template-columns:auto auto;grid-column-gap:5%;padding-bottom:20px}
#signup #info-wrapper .info-item .wrap{text-align:left;width:100%;font-family:'Open Sans',Helvetica,Sans-Serif;font-size:1rem;font-weight:normal}
#signup #info-wrapper .info-item input{width:100%}
#signup #info-wrapper .info-item input:focus,#signup #info-wrapper .info-item select:focus{outline:0;box-shadow:none;border:1px solid red}
#signup #info-wrapper input[type=email],#signup #info-wrapper input[type=password],#signup #info-wrapper input[type=text],#signup #info-wrapper input[type=number],#signup #info-wrapper input[type=tel],#signup #info-wrapper select,#signup #info-wrapper textarea{width:100%;height:40px;font-size:14px;line-height:24px;padding:8px 15px;box-sizing:border-box;-moz-box-sizing:border-box;margin:0 0 10px;border:0;border:1px solid rgba(61,50,51,0.2);background-color:#faf8f5;font-weight:400;color:#3d3233;outline:0;border-radius:0;font-family:'Open Sans',Helvetica,Sans-Serif;-webkit-appearance:none}
#signup fieldset{border:0;padding-top:20px}
.info-item .error{color:red;font-size:1rem;display:block}
.info-item .fieldrequired{color:red}
#signup fieldset #category-wrapper{display:grid;grid-template-columns:30% 30% 30%;column-gap:3%;row-gap:20px}
#signup fieldset #category-wrapper .category input[type="checkbox"]{display:none;appearance:none;position:absolute}
#signup fieldset #category-wrapper .category input[type="checkbox"]:checked ~ .wrap{color:red}
#signup fieldset #category-wrapper .category .wrap{width:100%;font-family:"Open Sans",Helvetica,Arial,sans-serif;height:100px;border:black solid 1px;color:black;display:flex;justify-content:center;align-items:center;text-align:center;font-size:1rem;font-weight:normal}
#signup p{height:50px;justify-self:center;display:flex;align-items:center}
#signup p #btnsubmit{margin:10px;align-self:flex-end}
#signup .button:hover,#signup .button :focus,#signup button:hover,#signup button :focus,#signup input[type=submit]:hover,#signup input[type=submit] :focus,#signup input[type=button]:hover{color:#c11728;background:#FFF;text-decoration:underline;opacity:1;border:1px solid #c11728}
#signup :focus-visible{outline:1px solid red !important;border:none !important;outline-offset:2px !important}
#signup .button,#signup button,#signup input[type=submit],#signup input[type=button]{display:inline-block;color:#fff;font-family:'Open Sans',Helvetica,Sans-Serif;font-size:16px;line-height:24px;padding:8px 15px;border-radius:0;border:0;position:relative;cursor:pointer;outline:0;box-sizing:border-box;-moz-box-sizing:border-box;margin:0;background-color:#cb1a2c;text-transform:uppercase}
#signup h3{display:block;color:#c11728;font-size:18px;font-weight:600}
#signup h3>a{color:blue;text-decoration:underline}
@media only screen and (max-width:1200px){.content-wrapper{grid-template-areas:"banner banner" "benifits benifits" "form form"}
#benifits-wrapper{width:90%;display:grid;grid-template-columns:50% 50%;grid-template-rows:auto;grid-template-areas:"heading heading"}
#signup{margin:0;padding:50px}
#signup #info-wrapper{grid-template-columns:auto}
#signup fieldset #category-wrapper{grid-template-columns:45% 45%}
}
@media(min-width:300px) and (max-width:350px){#signup-banner h1{font-size:28px !important;padding-top:20px;padding-left:8px !important}
#benifits-wrapper h2{top:130px !important}
.benifit p{word-wrap:break-word;hyphens:auto}
}