.contacts-info-wrap { position: relative; padding-bottom: 15px; &.style2 { .row{ display: block; width: auto; } .form { padding-left: 15px; input:not([type="submit"]) { min-height: 59px; float: left;; } .wpcf7-form-control-wrap:first-of-type, .wpcf7-form-control-wrap:nth-of-type(2) { display: block; float: left; width: -webkit-calc(50% - 15px); width: calc(50% - 15px); } .wpcf7-form-control-wrap:first-of-type{ margin-right: 30px; } } .content-item { margin-bottom: 60px; a { margin-top: 3px; margin-bottom: 0; } p:empty{ display: none; } div { margin-bottom: 0; margin-top: 20px; border-bottom: none; } } .title-main { font-size: 35px; font-family: "Muli", sans-serif; color: #222222; font-weight: bold; line-height: 1.4; letter-spacing: -.8px; margin-bottom: 13px; } .text { font-size: 15px; font-family: "Muli", sans-serif; color: #B2B2B2; line-height: 1.8; letter-spacing: 0px; max-width: 500px; margin-bottom: 30px; } .input_protected_wrapper { margin-top: 16px; margin-bottom: 0; } } img { margin-bottom: 18px; } .title { font-size: 15px; font-weight: 800; color: #222222; margin-bottom: 0; opacity: .6; letter-spacing: .2px; } .content-item div, .content-item a { font-size: 24px; font-weight: 800; display: block; line-height: 1.2; font-family: "Muli", sans-serif; color: #222222; letter-spacing: .2px; -webkit-transition: all 350ms ease; transition: all 350ms ease; text-decoration: none; margin-bottom: 25px; } .content-item a { &:hover { color: #ff6633 !important; opacity: 1; } } .form { input:not([type="submit"]), textarea { width: 100%; border: 2px solid #eeeeee; padding: 10px 24px; font-size: 15px; font-weight: 600; color: #ff6633 !important; line-height: 1.6; letter-spacing: .2px; -webkit-transition: all 350ms ease; transition: all 350ms ease; margin-bottom: 30px; &:focus { border: 2px solid #ff6633 !important; } } input:not([type="submit"]) { min-height: 59px; float: left;; } .wpcf7-form-control-wrap:first-of-type, .wpcf7-form-control-wrap:nth-of-type(2) { display: block; float: left; width: -webkit-calc(50% - 15px); width: calc(50% - 15px); } .wpcf7-form-control-wrap:first-of-type{ margin-right: 30px; } input::-webkit-input-placeholder { opacity: .6; color: #222222; } input::-moz-placeholder { opacity: .6; color: #222222; } input:-ms-input-placeholder { opacity: .6; color: #222222; } input:-moz-placeholder { opacity: .6; color: #222222; } textarea { height: 130px; resize: none; padding-top: 15px; } textarea::-webkit-input-placeholder { opacity: .6; color: #222222; } textarea::-moz-placeholder { opacity: .6; color: #222222; } textarea:-ms-input-placeholder { opacity: .6; color: #222222; } textarea:-moz-placeholder { opacity: .6; color: #222222; } } .row { display: table; width: 100%; .col-xs-12 { display: table-cell; vertical-align: middle; } } &.style4 { padding-bottom: 0; .additional-content-wrap { padding: 100px 0; background-color: #fff; color: #999; .content-item { margin-bottom: 25px; a, div { color: #999; font-size: 16px; font-weight: 400; opacity: 1; margin-bottom: 0; } a { &:hover { color: #f54ea2; } } } .text { line-height: 1.75; color: #222222; opacity: .6; -ms-word-wrap: break-word; word-wrap: break-word; p { font-family: "Muli", sans-serif; letter-spacing: .2px; margin-bottom: 10px; } } p { margin-bottom: 0; } .content-item div { margin-bottom: 0; border-bottom: none; } .content-item a { margin-bottom: 10px; } .col-xs-12:not(:last-of-type) { text-align: right; margin-top: -3px; } .title { margin-bottom: 10px; color: #222; font-size: 24px; opacity: 1; } } } &.style3 { padding-bottom: 0; .title-main{ font-size: 18px; font-weight: 800; letter-spacing: 0.2px; color: #f54ea2; } .content-wrap { display: table; table-layout: fixed; width: 100%; } .text { font-size: 50px; color: #222222; font-weight: 800; letter-spacing: 0.2px; -ms-word-wrap: break-word; word-wrap: break-word; } .form-wrap { margin-top: 60px; .container { max-width: 100%; padding: 0; } } .image-wrap { display: table-cell; width: 55%; background-size: cover; background-position: left; } .content { padding: 17em 80px 100px; display: table-cell; width: 45%; &.no-image{ width: 100%; display: block; padding: 0; } } .input_protected_wrapper { margin-top: 15px; } } &.style5 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; .item-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 33.33333%; padding: 55px 30px; i { margin-right: 35px; font-size: 50px; } .title { margin-bottom: 10px; font-size: 30px; font-weight: 800; opacity: 1; letter-spacing: .2px; -ms-word-break: break-word; word-break: break-word; } a, .text { display: block; margin-bottom: 5px; color: #999999; font-size: 15px; letter-spacing: .1px; } a { text-decoration: none; -webkit-transition: color .3s ease; -o-transition: color .3s ease; transition: color .3s ease; &:hover { color: #f54ea2; } } } @media (min-width: 768px) and (max-width: 991px) { padding-top: 45px; padding-bottom: 45px; .item-wrapper { width: 50%; padding-top: 10px; padding-bottom: 0; } } } &.style6 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; .item-wrapper { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; &:not(:first-of-type) { margin-left: 50px; } a { padding: 0 5px; text-decoration: none; font-size: 15px; font-weight: 800; letter-spacing: .2px; -webkit-transition: color .3s ease; -o-transition: color .3s ease; transition: color .3s ease; &:hover { color: #f54ea2; } &:not(:last-of-type) { &::after { content: ", "; } } } .title { color: #999999; opacity: 1; } } } &.style7{ background-color: #fff; max-width: 570px; width: 100%; padding: 65px 50px; .title{ font-size: 48px; font-weight: 800; line-height: 1.2; letter-spacing: .2px; margin-bottom: 25px; color: #222; text-align: center; opacity: 1; } .text{ font-size: 14px; line-height: 1.2; letter-spacing: .2px; color: #999; margin-bottom: 43px; text-align: center; } .form{ .input_protected_wrapper{ left: 50%; position: relative; transform: translateX(-50%); } .wpcf7-form-control-wrap:nth-of-type(2n-1){ margin-right: 30px; } .wpcf7-form-control-wrap:last-of-type{ margin-right: auto; float: none; } .wpcf7-form-control-wrap:not(:last-of-type){ display: block; width: -webkit-calc(50% - 15px); width: calc(50% - 15px); float: left; } } } } span.wpcf7-not-valid-tip{ position: relative; clear: both; margin-bottom: 15px; top: -15px; } .contacts-info-wrap .form .wpcf7-form-control-wrap:first-of-type, .contacts-info-wrap .form .wpcf7-form-control-wrap:nth-of-type(2){ width: 100%; margin-right: auto; float: none; } @media only screen and (max-width: 1299px) { .contacts-info-wrap.style2 .content-item div, .contacts-info-wrap.style2 .content-item a{ font-size: 20px; } } @media only screen and (max-width: 1199px) { .contacts-info-wrap.style2 .content-item { display: block; } } @media only screen and (max-width: 1024px) { .contacts-info-wrap.style2 .form{ padding-left: 0; } .contacts-info-wrap.style2 .content-item{ margin-bottom: 30px; } .contacts-info-wrap.style2 .content-wrap, .contacts-info-wrap.style2 .content-item { display: block; text-align: center; } .contacts-info-wrap.style2 .input_protected_wrapper { margin-top: 10px; } .contacts-info-wrap.style2 { .form { .wpcf7-form-control-wrap:first-of-type, .wpcf7-form-control-wrap:nth-of-type(2) { float: none; width: 100%; } p { text-align: center; } } } } @media only screen and (max-width: 991px) { .contacts-info-wrap .row { display: block; width: auto; .col-xs-12 { display: block; } } .contacts-info-wrap.style3 .content { padding: 150px 40px 50px; } .contacts-info-wrap .form .wpcf7-form-control-wrap:first-of-type, .contacts-info-wrap .form .wpcf7-form-control-wrap:nth-of-type(2){ margin-right: 0; width: 100%; } .contacts-info-wrap { &.style7 { margin: 0 auto; } } } @media only screen and (max-width: 768px) { .contacts-info-wrap.style7 .form .wpcf7-form-control-wrap:not(:last-of-type){ width: 100%; float: none; margin-right: 0; } .contacts-info-wrap.style7 .title{ font-size: 35px; margin-bottom: 15px; } .contacts-info-wrap.style7 .text{ margin-bottom: 35px; } .contacts-info-wrap.style7{ padding: 35px 15px; } .contacts-info-wrap.style3{ padding: 0; .content { &.no-image { text-align: center; } } } .contacts-info-wrap.style4 .additional-content-wrap { padding: 50px 0 25px; } .contacts-info-wrap.style4 .additional-content-wrap .col-xs-12:not(:last-of-type) { margin: 0; margin-bottom: 30px; text-align: center; } .contacts-info-wrap.style4{ .additional-content-wrap { padding-top: 30px; padding-bottom: 15px; } .content-item { text-align: center; } } .contacts-info-wrap.style3 { .image-wrap, .content { display: block; width: 100%; } .image-wrap { min-height: 400px !important; height: 400px !important; background-position: center; } .content { padding-top: 50px; } .text{ font-size: 35px; } } .contacts-info-wrap.style3 .content { padding: 30px 15px; text-align: center; } .contacts-info-wrap.style3 .form-wrap{ margin-top: 40px; } .contacts-info-wrap { &.style5 { .item-wrapper { width: 100%; padding: 25px; } } &.style6 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; .item-wrapper { margin-bottom: 20px; -ms-flex-wrap: wrap; flex-wrap: wrap; &:not(:first-of-type) { margin-left: 0; } } } } } @media only screen and (max-width: 600px) { .contacts-info-wrap .content-item.half { width: 100%; float: none; } } .wpcf7{ & *{ text-transform: none; } .ajax-loader{ display: none!important; } .input_protected_wrapper{ position: relative; display: inline-block; margin-left: 6px; &::before{ content: ''; position: absolute; left: -6px; top: 8px; width: 100%; height: 100%; z-index: 0; background-color: #191259 !important; -webkit-transition: all 250ms ease; transition: all 250ms ease; } input{ font-size: 14px; display: inline-block; letter-spacing: .5px; font-family: "Muli", sans-serif; font-weight: bold; box-sizing: border-box; line-height: 1; padding: 20px 38px; text-decoration: none; border: none; background-color: #ff6633 !important; color: #ffffff; position: relative; -webkit-font-smoothing: antialiased; -webkit-transition: all 350ms ease; transition: all 350ms ease; } &:hover{ input{ opacity: 1; } &::before{ top: 4px; left: -3px; } } } } .form{ &.btn-style-2{ .input_protected_wrapper{ margin-left: 0; &::before{ display: none; } input{ background-color: #fff; color: #222; } &:hover{ input{ background-color: #f54ea2; color: #fff; } } } } &.btn-style-3{ .input_protected_wrapper{ margin-left: 0; &::before{ display: none; } input{ background-color: #f54ea2; color: #fff; } &:hover{ input{ background-color: #fff; color: #222; } } } } &.btn-style-4{ .input_protected_wrapper{ position: relative; display: inline-block; margin-left: 0; &::before{ content: ''; position: absolute; left: 0; top: auto; bottom: -6px; width: 100%; height: 15px; z-index: -1; background-color: #ffdd65; -webkit-transition: all 350ms ease; transition: all 350ms ease; } input{ font-size: 18px; font-weight: 800; display: inline-block; letter-spacing: .5px; font-family: "Muli", sans-serif; box-sizing: border-box; line-height: 1; padding: 0; text-decoration: none; border: none; background-color: transparent; color: #222; position: relative; -webkit-font-smoothing: antialiased; -webkit-transition: all 350ms ease; transition: all 350ms ease; } &:hover{ input{ opacity: 1; } &::before{ height: -webkit-calc(100% + 9px); height: calc(100% + 9px); top: auto; left: 0; } } } } }