@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Open+Sans:wght@300;400;600;700&display=swap');
.ffopen{ font-family:'open sans'}
.ffmont{ font-family:'Montserrat'}
*{padding: 0; margin: 0;}
body{margin: 0 auto; padding: 0; font-family:'open sans'}

.container_mx{ width: 100%; padding: 0 4rem; box-sizing: border-box; max-width: 1366px; margin: auto}
.container_mx a{ display: block; margin: 1rem 0}
.banner{ background: url("../images/bg.jpg") no-repeat ; padding: 3rem 0; background-size: cover}
.row_mx{display: flex}
.lef_banner{ width: 50%}
.lef_banner img{max-width: 100%; display: block; width: 100%; margin-top: 2rem}
.gray_bg{ background: #454545; padding: 1rem 0; text-align: center; color: #fff}
.gray_bg h1{ font-size: 28px; font-weight: 600; display: inline-block; background: #e11f26; padding: .5rem}
.gray_bg h2{ font-size: 28px; font-weight: 600; padding-top: 1rem}
.right_form{padding-left: 3rem; width: 50%}
.registration_form{padding-top:1rem }
.registration_form span{display: block; font-size: 15px; font-weight: 600; letter-spacing: .01rem; padding: .25rem 0}
.registration_form label input{ display: block; width: 100%; max-width: 535px; box-sizing: border-box; padding: 1rem .5rem; font-size: 15px;outline: none; border: solid 1px #b8b8b8; border-radius: 2px}
.registration_form  .submit_btn{font-family:'Montserrat';  font-size: 22px; color: #fff;; background: #e11f26; display: block; width: 100%; max-width: 535px;; padding: 1rem 0; text-align: center; text-decoration: none;}


.check_sec { display: block; position: relative;  padding-left: 35px;  margin-bottom: 12px;  cursor: pointer;  font-size: 12px;  -webkit-user-select: none;
  -moz-user-select: none;  -ms-user-select: none;  user-select: none; background: #fff; padding:1.1rem 2.7rem; width: 100%; max-width: 535px; box-sizing: border-box; border: solid 1px #b8b8b8; left: 0; font-family:'open sans'}

.check_sec input {  position: absolute;  opacity: 0;  cursor: pointer;  height: 0;  width: 0;}
span.checkmark {  position: absolute;  top: 14px;  left: 11px;  height: 25px;  width: 25px; border-radius: 2px;  background-color: #fff; padding: 0; border: solid 1px #888}
.check_sec:hover input ~ .checkmark {  background-color: #ccc;}
.check_sec input:checked ~ .checkmark {  background-color: #454545;}
.checkmark:after {  content: "";  position: absolute;  display: none;}
.check_sec input:checked ~ .checkmark:after {  display: block;}
.check_sec .checkmark:after{left:9px;top: 5px; width:5px;height:10px;border:solid white; border-width:0 3px 3px 0; transform: rotate(45deg);}
.footer_p{padding: 1rem 0; font-size: 14px;}
footer{ background: #454545; padding: 1rem 0}
.foter_flex{display: flex;  font-size: 14px; color: #d1d1d1; }
.foter_flex p{line-height: 200%}
.social_icon{ margin-left: auto}
.foter_flex ul{display: flex; list-style: none; margin: 0; padding: 0}
.foter_flex ul li{padding:0 .25rem}

@media screen and (max-width:992px){
.row_mx{ flex-direction: column}
    .lef_banner{width: 100%}
    .right_form{width: 100%; padding-left: 0}
    .registration_form label input, .check_sec, .registration_form .submit_btn{max-width: 100%}
    
}
@media screen and (max-width:767px){
.container_mx{padding: 0 .5rem}
    .lef_banner{order: 2}
    .foter_flex{flex-direction: column}
    .social_icon{margin: 0 }
}