/*======================================================== Contact Form =========================================================*/ /* MF ========================================================*/ :focus { outline: none; } button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner {/* */ border: none; } :focus { -moz-outline: 3px solid #fff !important; } input[type="radio"]:focus { -moz-outline-radius: 12px !important; -moz-outline-offset: 0px !important; } input[type="checkbox"]:focus { -moz-outline-offset: -1px !important; -moz-outline: 1px solid #000 !important; } .rd-mailform ul { margin: 0px; padding: 0px; } button:active, button:focus, form:active, form:focus { outline: none !important; } button::-moz-focus-inner { border: 0 !important; } .rd-mailform { position: relative; text-align: left; margin-left: auto; margin-right: auto; margin-top: 6px; } .rd-mailform fieldset { border: none; line-height: 0; } .rd-mailform * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .rd-mailform .form-group { position: relative; display: inline-block; margin-bottom: 0; width: 100%; } .rd-mailform .form-group > label { width: 100%; font-weight: 400; } .rd-mailform .form-group + .form-group { margin-top: 10px; } .rd-mailform .form-group.btn-wr { text-align: left; } @media (min-width: 768px) { .rd-mailform .form-group.btn-wr { text-align: left; } } /*.rd-mailform .form-group + .form-group:not(.btn-wr):not(.textarea):nth-child(4) { margin-left: 0; float: left; }*/ @media (max-width: 991px) { .rd-mailform .form-group { width: 100%; } .rd-mailform .form-group + .form-group:not(.btn-wr):not(.textarea) { margin-left: 0; margin-top: 15px; } } .rd-mailform .form-group.btn-wr { margin-top: 23px; } .rd-mailform .form-group.textarea { width: 100%; margin-left: 0; } .rd-mailform .form-group:first-child { margin-top: 0; } .rd-mailform .form-group input, .rd-mailform .form-group select, .rd-mailform .form-group textarea { display: block; width: 100%; margin: 0; -webkit-appearance: none; outline: none; font-family: 'Open Sans', sans-serif; font-size: 17px; font-weight: 400; padding: 15px 40px 15px 23px; line-height: 1; color: #222; background: #ffffff; border: none; border: 1px solid #dee2ef; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; height: 57px; letter-spacing: 0em; } .rd-mailform .form-group input:-moz-placeholder, .rd-mailform .form-group select:-moz-placeholder, .rd-mailform .form-group textarea:-moz-placeholder { color: #555; opacity: 1; } .rd-mailform .form-group input::-webkit-input-placeholder, .rd-mailform .form-group select::-webkit-input-placeholder, .rd-mailform .form-group textarea::-webkit-input-placeholder { color: #555; opacity: 1; } .rd-mailform .form-group input::-moz-placeholder, .rd-mailform .form-group select::-moz-placeholder, .rd-mailform .form-group textarea::-moz-placeholder { color: #555; opacity: 1; } .rd-mailform .form-group input:-ms-input-placeholder, .rd-mailform .form-group select:-ms-input-placeholder, .rd-mailform .form-group textarea:-ms-input-placeholder { color: #555; opacity: 1; } @media (min-width: 1200px) { .rd-mailform .form-group input, .rd-mailform .form-group select, .rd-mailform .form-group textarea { font-size: 17px; } } .rd-mailform .form-group textarea { resize: none; overflow: auto; height: 120px; border: 1px solid #dee2ef; outline: none; } @media (max-width: 1365px) { /* .rd-mailform .form-group { margin-top: 30px; }*/ } @-ms-keyframes fout { 0% { -moz-transform: scale(1) translateX(0); -ms-transform: scale(1) translateX(0); -o-transform: scale(1) translateX(0); -webkit-transform: scale(1) translateX(0); transform: scale(1) translateX(0); } 100% { -moz-transform: scale(0) translateX(0); -ms-transform: scale(0) translateX(0); -o-transform: scale(0) translateX(0); -webkit-transform: scale(0) translateX(0); transform: scale(0) translateX(0); } } @-o-keyframes fout { 0% { -moz-transform: scale(1) translateX(0); -ms-transform: scale(1) translateX(0); -o-transform: scale(1) translateX(0); -webkit-transform: scale(1) translateX(0); transform: scale(1) translateX(0); } 100% { -moz-transform: scale(0) translateX(0); -ms-transform: scale(0) translateX(0); -o-transform: scale(0) translateX(0); -webkit-transform: scale(0) translateX(0); transform: scale(0) translateX(0); } } @-webkit-keyframes fout { 0% { -moz-transform: scale(1) translateX(0); -ms-transform: scale(1) translateX(0); -o-transform: scale(1) translateX(0); -webkit-transform: scale(1) translateX(0); transform: scale(1) translateX(0); } 100% { -moz-transform: scale(0) translateX(0); -ms-transform: scale(0) translateX(0); -o-transform: scale(0) translateX(0); -webkit-transform: scale(0) translateX(0); transform: scale(0) translateX(0); } } @-moz-keyframes fout { 0% { -moz-transform: scale(1) translateX(0); -ms-transform: scale(1) translateX(0); -o-transform: scale(1) translateX(0); -webkit-transform: scale(1) translateX(0); transform: scale(1) translateX(0); } 100% { -moz-transform: scale(0) translateX(0); -ms-transform: scale(0) translateX(0); -o-transform: scale(0) translateX(0); -webkit-transform: scale(0) translateX(0); transform: scale(0) translateX(0); } } @keyframes fout { 0% { -moz-transform: scale(1) translateX(0); -ms-transform: scale(1) translateX(0); -o-transform: scale(1) translateX(0); -webkit-transform: scale(1) translateX(0); transform: scale(1) translateX(0); } 100% { -moz-transform: scale(0) translateX(0); -ms-transform: scale(0) translateX(0); -o-transform: scale(0) translateX(0); -webkit-transform: scale(0) translateX(0); transform: scale(0) translateX(0); } } @-webkit-keyframes anim-1 { 0% { left: 50%; } 100% { left: 90%; } } @-webkit-keyframes anim-2 { 0% { -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } 25% { -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } 50% { -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } 75% { -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } 100% { -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } } @-webkit-keyframes anim-3 { 0% { -moz-transform: rotate(150deg); -ms-transform: rotate(150deg); -o-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg); left: 50%; } 50% { -moz-transform: rotate(150deg); -ms-transform: rotate(150deg); -o-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg); left: 90%; } 100% { -moz-transform: rotate(150deg); -ms-transform: rotate(150deg); -o-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg); left: 50%; } } @-webkit-keyframes zoom-out { 0% { -moz-transform: scale(1) rotate(-35deg); -ms-transform: scale(1) rotate(-35deg); -o-transform: scale(1) rotate(-35deg); -webkit-transform: scale(1) rotate(-35deg); transform: scale(1) rotate(-35deg); } 100% { -moz-transform: scale(0) rotate(-180deg); -ms-transform: scale(0) rotate(-180deg); -o-transform: scale(0) rotate(-180deg); -webkit-transform: scale(0) rotate(-180deg); transform: scale(0) rotate(-180deg); } } @-webkit-keyframes zoom-in-state-1 { 0% { -moz-transform: scale(0) rotate(-180deg); -ms-transform: scale(0) rotate(-180deg); -o-transform: scale(0) rotate(-180deg); -webkit-transform: scale(0) rotate(-180deg); transform: scale(0) rotate(-180deg); } 100% { -moz-transform: scale(1) rotate(-35deg); -ms-transform: scale(1) rotate(-35deg); -o-transform: scale(1) rotate(-35deg); -webkit-transform: scale(1) rotate(-35deg); transform: scale(1) rotate(-35deg); } } @-webkit-keyframes zoom-in-state-2 { 0% { -moz-transform: scale(0) rotate(-35deg); -ms-transform: scale(0) rotate(-35deg); -o-transform: scale(0) rotate(-35deg); -webkit-transform: scale(0) rotate(-35deg); transform: scale(0) rotate(-35deg); } 100% { left: 50%; -moz-transform: scale(1) rotate(150deg); -ms-transform: scale(1) rotate(150deg); -o-transform: scale(1) rotate(150deg); -webkit-transform: scale(1) rotate(150deg); transform: scale(1) rotate(150deg); } } @-webkit-keyframes line { 0% { left: 40%; } 100% { left: 40%; width: 40%; } } @-moz-keyframes anim-1 { 0% { left: 50%; } 100% { left: 90%; } } @-moz-keyframes anim-2 { 0% { -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } 25% { -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } 50% { -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } 75% { -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } 100% { -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } } @-moz-keyframes anim-3 { 0% { -moz-transform: rotate(150deg); -ms-transform: rotate(150deg); -o-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg); left: 50%; } 50% { -moz-transform: rotate(150deg); -ms-transform: rotate(150deg); -o-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg); left: 90%; } 100% { -moz-transform: rotate(150deg); -ms-transform: rotate(150deg); -o-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg); left: 50%; } } @-moz-keyframes zoom-out { 0% { -moz-transform: scale(1) rotate(-35deg); -ms-transform: scale(1) rotate(-35deg); -o-transform: scale(1) rotate(-35deg); -webkit-transform: scale(1) rotate(-35deg); transform: scale(1) rotate(-35deg); } 100% { -moz-transform: scale(0) rotate(-180deg); -ms-transform: scale(0) rotate(-180deg); -o-transform: scale(0) rotate(-180deg); -webkit-transform: scale(0) rotate(-180deg); transform: scale(0) rotate(-180deg); } } @-moz-keyframes zoom-in-state-1 { 0% { -moz-transform: scale(0) rotate(-180deg); -ms-transform: scale(0) rotate(-180deg); -o-transform: scale(0) rotate(-180deg); -webkit-transform: scale(0) rotate(-180deg); transform: scale(0) rotate(-180deg); } 100% { -moz-transform: scale(1) rotate(-35deg); -ms-transform: scale(1) rotate(-35deg); -o-transform: scale(1) rotate(-35deg); -webkit-transform: scale(1) rotate(-35deg); transform: scale(1) rotate(-35deg); } } @-moz-keyframes zoom-in-state-2 { 0% { -moz-transform: scale(0) rotate(-35deg); -ms-transform: scale(0) rotate(-35deg); -o-transform: scale(0) rotate(-35deg); -webkit-transform: scale(0) rotate(-35deg); transform: scale(0) rotate(-35deg); } 100% { left: 50%; -moz-transform: scale(1) rotate(150deg); -ms-transform: scale(1) rotate(150deg); -o-transform: scale(1) rotate(150deg); -webkit-transform: scale(1) rotate(150deg); transform: scale(1) rotate(150deg); } } @-moz-keyframes line { 0% { left: 40%; } 100% { left: 40%; width: 40%; } } @-o-keyframes anim-1 { 0% { left: 50%; } 100% { left: 90%; } } @-o-keyframes anim-2 { 0% { -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } 25% { -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } 50% { -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } 75% { -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } 100% { -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } } @-o-keyframes anim-3 { 0% { -moz-transform: rotate(150deg); -ms-transform: rotate(150deg); -o-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg); left: 50%; } 50% { -moz-transform: rotate(150deg); -ms-transform: rotate(150deg); -o-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg); left: 90%; } 100% { -moz-transform: rotate(150deg); -ms-transform: rotate(150deg); -o-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg); left: 50%; } } @-o-keyframes zoom-out { 0% { -moz-transform: scale(1) rotate(-35deg); -ms-transform: scale(1) rotate(-35deg); -o-transform: scale(1) rotate(-35deg); -webkit-transform: scale(1) rotate(-35deg); transform: scale(1) rotate(-35deg); } 100% { -moz-transform: scale(0) rotate(-180deg); -ms-transform: scale(0) rotate(-180deg); -o-transform: scale(0) rotate(-180deg); -webkit-transform: scale(0) rotate(-180deg); transform: scale(0) rotate(-180deg); } } @-o-keyframes zoom-in-state-1 { 0% { -moz-transform: scale(0) rotate(-180deg); -ms-transform: scale(0) rotate(-180deg); -o-transform: scale(0) rotate(-180deg); -webkit-transform: scale(0) rotate(-180deg); transform: scale(0) rotate(-180deg); } 100% { -moz-transform: scale(1) rotate(-35deg); -ms-transform: scale(1) rotate(-35deg); -o-transform: scale(1) rotate(-35deg); -webkit-transform: scale(1) rotate(-35deg); transform: scale(1) rotate(-35deg); } } @-o-keyframes zoom-in-state-2 { 0% { -moz-transform: scale(0) rotate(-35deg); -ms-transform: scale(0) rotate(-35deg); -o-transform: scale(0) rotate(-35deg); -webkit-transform: scale(0) rotate(-35deg); transform: scale(0) rotate(-35deg); } 100% { left: 50%; -moz-transform: scale(1) rotate(150deg); -ms-transform: scale(1) rotate(150deg); -o-transform: scale(1) rotate(150deg); -webkit-transform: scale(1) rotate(150deg); transform: scale(1) rotate(150deg); } } @-o-keyframes line { 0% { left: 40%; } 100% { left: 40%; width: 40%; } } @keyframes anim-1 { 0% { left: 50%; } 100% { left: 90%; } } @keyframes anim-2 { 0% { -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } 25% { -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } 50% { -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } 75% { -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } 100% { -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } } @keyframes anim-3 { 0% { -moz-transform: rotate(150deg); -ms-transform: rotate(150deg); -o-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg); left: 50%; } 50% { -moz-transform: rotate(150deg); -ms-transform: rotate(150deg); -o-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg); left: 90%; } 100% { -moz-transform: rotate(150deg); -ms-transform: rotate(150deg); -o-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg); left: 50%; } } @keyframes zoom-out { 0% { -moz-transform: scale(1) rotate(-35deg); -ms-transform: scale(1) rotate(-35deg); -o-transform: scale(1) rotate(-35deg); -webkit-transform: scale(1) rotate(-35deg); transform: scale(1) rotate(-35deg); } 100% { -moz-transform: scale(0) rotate(-180deg); -ms-transform: scale(0) rotate(-180deg); -o-transform: scale(0) rotate(-180deg); -webkit-transform: scale(0) rotate(-180deg); transform: scale(0) rotate(-180deg); } } @keyframes zoom-in-state-1 { 0% { -moz-transform: scale(0) rotate(-180deg); -ms-transform: scale(0) rotate(-180deg); -o-transform: scale(0) rotate(-180deg); -webkit-transform: scale(0) rotate(-180deg); transform: scale(0) rotate(-180deg); } 100% { -moz-transform: scale(1) rotate(-35deg); -ms-transform: scale(1) rotate(-35deg); -o-transform: scale(1) rotate(-35deg); -webkit-transform: scale(1) rotate(-35deg); transform: scale(1) rotate(-35deg); } } @keyframes zoom-in-state-2 { 0% { -moz-transform: scale(0) rotate(-35deg); -ms-transform: scale(0) rotate(-35deg); -o-transform: scale(0) rotate(-35deg); -webkit-transform: scale(0) rotate(-35deg); transform: scale(0) rotate(-35deg); } 100% { left: 50%; -moz-transform: scale(1) rotate(150deg); -ms-transform: scale(1) rotate(150deg); -o-transform: scale(1) rotate(150deg); -webkit-transform: scale(1) rotate(150deg); transform: scale(1) rotate(150deg); } } @keyframes line { 0% { left: 40%; } 100% { left: 40%; width: 40%; } } @-ms-keyframes anim-1 { 0% { left: 50%; } 100% { left: 90%; } } @-ms-keyframes anim-2 { 0% { -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } 25% { -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } 50% { -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } 75% { -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } 100% { -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } } @-ms-keyframes anim-3 { 0% { -moz-transform: rotate(150deg); -ms-transform: rotate(150deg); -o-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg); left: 50%; } 50% { -moz-transform: rotate(150deg); -ms-transform: rotate(150deg); -o-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg); left: 90%; } 100% { -moz-transform: rotate(150deg); -ms-transform: rotate(150deg); -o-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg); left: 50%; } } @-ms-keyframes zoom-out { 0% { -moz-transform: scale(1) rotate(-35deg); -ms-transform: scale(1) rotate(-35deg); -o-transform: scale(1) rotate(-35deg); -webkit-transform: scale(1) rotate(-35deg); transform: scale(1) rotate(-35deg); } 100% { -moz-transform: scale(0) rotate(-180deg); -ms-transform: scale(0) rotate(-180deg); -o-transform: scale(0) rotate(-180deg); -webkit-transform: scale(0) rotate(-180deg); transform: scale(0) rotate(-180deg); } } @-ms-keyframes zoom-in-state-1 { 0% { -moz-transform: scale(0) rotate(-180deg); -ms-transform: scale(0) rotate(-180deg); -o-transform: scale(0) rotate(-180deg); -webkit-transform: scale(0) rotate(-180deg); transform: scale(0) rotate(-180deg); } 100% { -moz-transform: scale(1) rotate(-35deg); -ms-transform: scale(1) rotate(-35deg); -o-transform: scale(1) rotate(-35deg); -webkit-transform: scale(1) rotate(-35deg); transform: scale(1) rotate(-35deg); } } @-ms-keyframes zoom-in-state-2 { 0% { -moz-transform: scale(0) rotate(-35deg); -ms-transform: scale(0) rotate(-35deg); -o-transform: scale(0) rotate(-35deg); -webkit-transform: scale(0) rotate(-35deg); transform: scale(0) rotate(-35deg); } 100% { left: 50%; -moz-transform: scale(1) rotate(150deg); -ms-transform: scale(1) rotate(150deg); -o-transform: scale(1) rotate(150deg); -webkit-transform: scale(1) rotate(150deg); transform: scale(1) rotate(150deg); } } @-ms-keyframes line { 0% { left: 40%; } 100% { left: 40%; width: 40%; } } /* Mail Form PlaceHolder ========================================================*/ .mfPlaceHolder { font: inherit; cursor: text; position: absolute; left: 0; top: 0; padding: 20px 40px 15px 23px; line-height: 1; color: #555; opacity: 1; font-size: 17px; font-weight: 400; -moz-transition: 0.3s all ease; -webkit-transition: 0.3s all ease; -o-transition: 0.3s all ease; transition: 0.3s all ease; } *:-webkit-autofill ~ .mfPlaceHolder { opacity: 0; -moz-transform: translateY(-33%) scale(0.8); -ms-transform: translateY(-33%) scale(0.8); -o-transform: translateY(-33%) scale(0.8); -webkit-transform: translateY(-33%) scale(0.8); transform: translateY(-33%) scale(0.8); } .mfPlaceHolder.state-1 { opacity: 0; -moz-transform: translateY(-33%) scale(0.8); -ms-transform: translateY(-33%) scale(0.8); -o-transform: translateY(-33%) scale(0.8); -webkit-transform: translateY(-33%) scale(0.8); transform: translateY(-33%) scale(0.8); } @media (min-width: 1200px) { .mfPlaceHolder { font-size: 17px; } } /* Mail Form Validation ========================================================*/ .mfValidation { -o-transform-origin: 0% 50%; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; transform-origin: 0% 50%; -moz-transition: 0.3s all ease; -webkit-transition: 0.3s all ease; -o-transition: 0.3s all ease; transition: 0.3s all ease; -webkit-animation: notifanim-fo 0.4s cubic-bezier(0.55, 0, 0.1, 1) forwards; -o-animation: notifanim-fo 0.4s cubic-bezier(0.55, 0, 0.1, 1) forwards; animation: notifanim-fo 0.4s cubic-bezier(0.55, 0, 0.1, 1) forwards; -moz-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5); -webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; position: absolute; font-weight: 300; font-size: 11px; opacity: 0; visibility: hidden; cursor: pointer; z-index: 998; text-align: right; top: 1px; left: auto; bottom: 100%; right: 15px; background: none; padding: 0; margin: 0 0 3px; min-height: 0; color: #FF0000; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .mfValidation:hover { background: #231634; } .mfValidation:before { content: ''; position: absolute; } .mfValidation.error { -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; visibility: visible; -webkit-animation: notifanim 0.4s cubic-bezier(0.55, 0, 0.1, 1) forwards; -o-animation: notifanim 0.4s cubic-bezier(0.55, 0, 0.1, 1) forwards; animation: notifanim 0.4s cubic-bezier(0.55, 0, 0.1, 1) forwards; font-weight: 400; } .mfValidation:before { display: none; } .mfValidation:hover { background: none; right: 10px; } /* * MF Submit */ .mfInfo, .mfProgress { position: fixed; left: 15px; bottom: 15px; padding: 17px; height: 54px; color: #ffffff; background: #111111; border-radius: 1px; line-height: 20px; font-size: 13px; transition: .3s all ease; opacity: 0; visibility: hidden; -moz-transform: translateY(83px); -ms-transform: translateY(83px); -o-transform: translateY(83px); -webkit-transform: translateY(83px); transform: translateY(83px); z-index: 999; } .mfInfo.hide, .mfProgress.hide { display: block !important; } .mfInfo .loader, .mfProgress .loader { display: inline-block; position: relative; float: left; margin-right: 16px; } .mfInfo .loader, .mfProgress .loader, .mfInfo .loader:before, .mfProgress .loader:before, .mfInfo .loader:after, .mfProgress .loader:after { width: 20px; height: 20px; line-height: 20px; } .mfInfo .loader:before, .mfProgress .loader:before, .mfInfo .loader:after, .mfProgress .loader:after { content: ''; position: absolute; top: 0; left: 0; } .mfInfo .loader:before, .mfProgress .loader:before { -webkit-animation: mfLoader 1.1s infinite linear; -o-animation: mfLoader 1.1s infinite linear; animation: mfLoader 1.1s infinite linear; border: 2px solid #ffffff; border-top-color: transparent; border-radius: 50%; opacity: 1; visibility: visible; transition: .3s all ease; } .mfInfo .loader:after, .mfProgress .loader:after { opacity: 0; visibility: hidden; font-weight: 400; font-family: 'FontAwesome'; font-size: 20px; transition: .6s all ease; -moz-transform: rotate(-90deg) scale(0); -ms-transform: rotate(-90deg) scale(0); -o-transform: rotate(-90deg) scale(0); -webkit-transform: rotate(-90deg) scale(0); transform: rotate(-90deg) scale(0); } .mfInfo.fail, .mfProgress.fail { background: #F34234; } .mfInfo.fail .loader:after, .mfProgress.fail .loader:after { content: '\f00d'; } .mfInfo.success, .mfProgress.success { background: #2E7D32; } .mfInfo.success .loader:after, .mfProgress.success .loader:after { content: '\f00c'; } .mfInfo.fail .loader:before, .mfProgress.fail .loader:before, .mfInfo.success .loader:before, .mfProgress.success .loader:before { opacity: 0; visibility: hidden; -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); } .mfInfo.fail .loader:after, .mfProgress.fail .loader:after, .mfInfo.success .loader:after, .mfProgress.success .loader:after { opacity: 1; visibility: visible; -moz-transform: rotate(0deg) scale(1); -ms-transform: rotate(0deg) scale(1); -o-transform: rotate(0deg) scale(1); -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); } .mfInfo.fail, .mfProgress.fail, .mfInfo.success, .mfProgress.success, .mfInfo.sending, .mfProgress.sending { opacity: 1; visibility: visible; -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } @media (min-width: 768px) { .mfInfo, .mfProgress { bottom: 24px; left: 50%; -moz-transform: translate(-50%, 83px); -ms-transform: translate(-50%, 83px); -o-transform: translate(-50%, 83px); -webkit-transform: translate(-50%, 83px); transform: translate(-50%, 83px); } .mfInfo.fail, .mfProgress.fail, .mfInfo.success, .mfProgress.success, .mfInfo.sending, .mfProgress.sending { -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } } @keyframes mfLoader { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes mfLoader { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes mfLoader { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes mfLoader { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes mfLoader { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* Mail Form Icon ========================================================*/ .mfIcon { position: absolute; text-align: center; top: 12px; right: 10px; width: 24px; height: 24px; line-height: 24px; color: #999; font: 400 20px/24px 'FontAwesome'; } .mfIcon span:before, .mfIcon span:after { position: absolute; left: 50%; top: 50%; margin-top: -10px; margin-left: -10px; -moz-transition: 0.4s all ease-in-out; -webkit-transition: 0.4s all ease-in-out; -o-transition: 0.4s all ease-in-out; transition: 0.4s all ease-in-out; } .mfIcon { /* display: none; */} .mfIcon span:before { content: '\f040'; } .mfIcon span:after { content: '\f040'; -moz-transform: scale(0) rotate(-180deg); -ms-transform: scale(0) rotate(-180deg); -o-transform: scale(0) rotate(-180deg); -webkit-transform: scale(0) rotate(-180deg); transform: scale(0) rotate(-180deg); -webkit-animation: zoom-out 0.4s ease-in-out 1 forwards; -o-animation: zoom-out 0.4s ease-in-out 1 forwards; animation: zoom-out 0.4s ease-in-out 1 forwards; } .mfIcon.state-1:after { content: ""; position: absolute; bottom: -1px; width: 0; height: 1px; background: #fff; -webkit-animation: line 1.2s 0.4s infinite; -o-animation: line 1.2s 0.4s infinite; animation: line 1.2s 0.4s infinite; } .mfIcon.state-1 span:before { -moz-transform: scale(0) rotate(90deg); -ms-transform: scale(0) rotate(90deg); -o-transform: scale(0) rotate(90deg); -webkit-transform: scale(0) rotate(90deg); transform: scale(0) rotate(90deg); } .mfIcon.state-1 span:after { -moz-transform: scale(1) rotate(-35deg); -ms-transform: scale(1) rotate(-35deg); -o-transform: scale(1) rotate(-35deg); -webkit-transform: scale(1) rotate(-35deg); transform: scale(1) rotate(-35deg); -webkit-animation: zoom-in-state-1 .4s ease-in-out 1 forwards, anim-1 1.2s .3s infinite, anim-2 .6s .3s infinite; -o-animation: zoom-in-state-1 .4s ease-in-out 1 forwards, anim-1 1.2s .3s infinite, anim-2 .6s .3s infinite; animation: zoom-in-state-1 .4s ease-in-out 1 forwards, anim-1 1.2s .3s infinite, anim-2 .6s .3s infinite; } .mfIcon.state-2 span:before { content: '\f040'; -moz-transform: scale(0) rotate(90deg); -ms-transform: scale(0) rotate(90deg); -o-transform: scale(0) rotate(90deg); -webkit-transform: scale(0) rotate(90deg); transform: scale(0) rotate(90deg); } .mfIcon.state-2 span:after { -moz-transform: scale(1) rotate(-210deg); -ms-transform: scale(1) rotate(-210deg); -o-transform: scale(1) rotate(-210deg); -webkit-transform: scale(1) rotate(-210deg); transform: scale(1) rotate(-210deg); -webkit-animation: zoom-in-state-2 .4s ease-in-out 1 forwards, anim-3 .6s .4s infinite; -o-animation: zoom-in-state-2 .4s ease-in-out 1 forwards, anim-3 .6s .4s infinite; animation: zoom-in-state-2 .4s ease-in-out 1 forwards, anim-3 .6s .4s infinite; } /* ÏÐÀÂÈËÜÍÛÅ ÈÊÎÍÊÈ */ input[name^='msg'] ~ .mfIcon span:before, select[name^='msg'] ~ .mfIcon span:before, textarea[name^='msg'] ~ .mfIcon span:before { content: '\f040'; } .mfInput input[name^='guests'] ~ .mfIcon span:before, .mfInput select[name^='guests'] ~ .mfIcon span:before, .mfInput textarea[name^='guests'] ~ .mfIcon span:before { content: '\f0c0'; } .mfInput input[name^='date'] ~ .mfIcon span:before, .mfInput select[name^='date'] ~ .mfIcon span:before, .mfInput textarea[name^='date'] ~ .mfIcon span:before { content: '\f073'; } .mfInput input[name^='name'] ~ .mfIcon span:before, .mfInput select[name^='name'] ~ .mfIcon span:before, .mfInput textarea[name^='name'] ~ .mfIcon span:before { content: '\f007'; } .mfInput input[name^='email'] ~ .mfIcon span:before, .mfInput select[name^='email'] ~ .mfIcon span:before, .mfInput textarea[name^='email'] ~ .mfIcon span:before { content: '\f0e0'; font-size: 18px; } .mfInput input[name^='phone'] ~ .mfIcon span:before, .mfInput select[name^='phone'] ~ .mfIcon span:before, .mfInput textarea[name^='phone'] ~ .mfIcon span:before { content: '\f095'; } .rd-mailform input[name^='file'] ~ .mfIcon span:before { content: '\f0c5'; } .mfInput input:-webkit-autofill ~ .mfIcon span:before, .mfInput textarea:-webkit-autofill ~ .mfIcon span:before { color: #2D2D2D; } /* * MF Select */ .mfSelect { position: relative; } .mfSelect .dropdown { position: absolute; top: 100%; left: 0; width: 100%; padding-top: 5px; padding-bottom: 5px; margin-top: 15px; max-height: 300px; opacity: 0; visibility: hidden; border: 1px solid #888; box-shadow: 3px 4px 5px 0 rgba(0, 0, 0, 0.11); transition: 0.3s all ease-in-out; outline: none; -webkit-appearance: none; font-weight: 400; line-height: 1; border: 1px solid #dee2ef; background: #ffffff; color: #555; border-radius: 1px; z-index: 1; -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); -webkit-transform: translateY(20px); transform: translateY(20px); } .mfSelect .dropdown .option { position: relative; z-index: 1; text-transform: none; cursor: pointer; padding: 10px 15px; overflow: hidden; transition: 0.4s all ease-in-out; transition-delay: .2s; font-size: 16px; line-height: 30px; } .mfSelect .dropdown .option.selected { background: #f5bd5f; color: #fff; } .mfSelect .dropdown .option:after { content: ''; position: absolute; left: 0; top: 0; width: 0; height: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 0%; background: #f2f2f2; opacity: 0; z-index: -1; transition: 0.4s all ease-in-out; -moz-transform: translate(0%, 0%); -ms-transform: translate(0%, 0%); -o-transform: translate(0%, 0%); -webkit-transform: translate(0%, 0%); transform: translate(0%, 0%); } .mfSelect .dropdown .option:before { content: '\f00c'; position: absolute; display: inline-block; left: 15px; color: #f5bd5f; font: 400 20px 'FontAwesome'; line-height: inherit; transition: 0.4s all ease-in-out; -moz-transform: scale(0) rotate(-60deg); -ms-transform: scale(0) rotate(-60deg); -o-transform: scale(0) rotate(-60deg); -webkit-transform: scale(0) rotate(-60deg); transform: scale(0) rotate(-60deg); } .mfSelect .dropdown .option:hover { color: #555555; padding-left: 40px; transition-delay: 0s; } .mfSelect .dropdown .option:hover:before { transition-delay: .15s; -moz-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } .mfSelect .dropdown .option:hover:after { width: 100%; height: 500px; opacity: 1; } .mfSelect .dropdown:before { content: ''; position: absolute; bottom: 100%; left: 14px; width: 0; height: 0; border-style: solid; border-width: 0 7px 8px 7px; border-color: transparent transparent #eeeeee transparent; } .mfSelect .dropdown:after { content: ''; position: absolute; bottom: 100%; left: 15px; width: 0; height: 0; border-style: solid; border-width: 0 6px 6px 6px; border-color: transparent transparent #ffffff transparent; } .mfSelect .value { cursor: pointer; transition: 0.4s all ease-in-out; font-size: 18px; padding: 17px 40px 15px 23px; line-height: 1; color: #555; background: #ffffff; border: 1px solid #dee2ef; border-radius: 1px; } .mfSelect .value:before, .mfSelect .value:after { position: absolute; right: 12px; top: 16.5px; width: 24px; height: 24px; font: 400 20px 'FontAwesome'; line-height: 24px; color: #999; text-align: center; transition: .4s all ease; } .mfSelect .value:before { content: '\f0c9'; -moz-transform: rotate(0deg) scale(1); -ms-transform: rotate(0deg) scale(1); -o-transform: rotate(0deg) scale(1); -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); } .mfSelect .value:after { content: '\f107'; font-size: 24px; -moz-transform: rotate(-180deg) scale(0); -ms-transform: rotate(-180deg) scale(0); -o-transform: rotate(-180deg) scale(0); -webkit-transform: rotate(-180deg) scale(0); transform: rotate(-180deg) scale(0); } .mfSelect.show .dropdown { opacity: 1; visibility: visible; -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } .mfSelect.show .value { background: #ffffff; color: #999; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.11), 3px 4px 5px 0 rgba(0, 0, 0, 0.11); } .mfSelect.show .value:before, .mfSelect.show .value:after { color: #999; } .mfSelect.show .value:before { -moz-transform: rotate(90deg) scale(0); -ms-transform: rotate(90deg) scale(0); -o-transform: rotate(90deg) scale(0); -webkit-transform: rotate(90deg) scale(0); transform: rotate(90deg) scale(0); } .mfSelect.show .value:after { -moz-transform: rotate(0deg) scale(1); -ms-transform: rotate(0deg) scale(1); -o-transform: rotate(0deg) scale(1); -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); } /* * MF Datepicker */ .rd-datepicker { background: #e1e1e1; color: #ffffff; border-radius: 6px; border: 1px solid #e1e1e1; } .dp-item { border-radius: 50%; } .dp-item-hover { color: #e1e1e1; background: #ffffff; } .dp-item-offset { color: #c6bbba; } .dp-item-today { color: #e1e1e1; background: #ffffff; } .dp-item-selected { color: #ffffff; background: #f9cc7f; } .mfDatePicker { position: absolute; top: 100%; left: 0; margin-top: 15px; padding: 10px 15px; opacity: 0; z-index: 1; visibility: hidden; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.11), 3px 4px 5px 0 rgba(0, 0, 0, 0.11); transition: 0.3s all ease-in-out; -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); -webkit-transform: translateY(20px); transform: translateY(20px); background: #e1e1e1; color: #ffffff; border-radius: 6px; border: 1px solid #e1e1e1; } .mfDatePicker:before { content: ''; position: absolute; bottom: 100%; left: 15px; width: 0; height: 0; border-style: solid; border-width: 0 6px 6px 6px; border-color: transparent transparent #e1e1e1 transparent; } .mfDatePicker table { text-align: center; border-collapse: separate; border-spacing: 3px; font-size: 12px; } .mfDatePicker table th { font-weight: 700; text-transform: uppercase; font-size: 14px; } .mfDatePicker table td { width: 30px; height: 30px; line-height: 30px; text-align: center; cursor: pointer; transition: .3s all ease; border-radius: 50%; } .mfDatePicker table td:hover { color: #e1e1e1; background: #ffffff; } .mfDatePicker table td.dp-offset { color: #c6bbba; } .mfDatePicker table td.dp-today { color: #000000; background: #ffffff; } .mfDatePicker table td.dp-selected { color: #ffffff; background: #f9cc7f; } .mfDatePicker_title { font-size: 16px; line-height: 30px; color: #000; } .mfDatePicker_next, .mfDatePicker_prev { font: 400 22px 'FontAwesome'; line-height: inherit; text-align: center; color: #000; cursor: pointer; } .mfDatePicker_next:hover, .mfDatePicker_prev:hover { color: #f9cc7f; } .mfDatePicker_panel { text-align: center; padding: 0 2px; line-height: 30px; } .mfDatePicker_next { float: right; } .mfDatePicker_next:before { content: '\f105'; } .mfDatePicker_prev { float: left; } .mfDatePicker_prev:before { content: '\f104'; } .mfDatePicker_panel + table { margin-top: 5px; } .mfDatePicker.open { -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; } .btn-mailform { text-transform: uppercase; text-align: center; display: inline-block; font-weight: 400; cursor: pointer; border: 1px solid #009ce6; background: #009ce6; outline: none; padding: 9px 50px; font-size: 18px; line-height: 28px; border-radius: 1px; -moz-transition: 0.2s all ease; -webkit-transition: 0.2s all ease; -o-transition: 0.2s all ease; transition: 0.2s all ease; color: #ffffff; } .btn-mailform:hover { color: #ffffff; background: #222; border: 1px solid #222; } .rd-mailform .form-group input[type="file"] { font-size: 14px; padding-top: 16px; } @supports (-moz-appearance:none) { .rd-mailform .form-group input[type="file"] { height: auto; } } .form-group_soglasie { margin-top: 19px; position: relative; } .form-group_soglasie label { display: flex; -webkit-box-align: center; -ms-align-items: center; align-items: center; } .form-group_soglasie input { border: 0px!important; min-width: 18px!important; height: 18px!important; margin: 3px 5px 0px 0px!important; padding: 0px!important; position: static!important; } .form-group_soglasie span.mfValidation { left: 23px; text-align: left; margin-top: -14px; font-weight: bold; } .form-group_soglasie a { color: #222!important; text-decoration: underline!important; } .form-group_soglasie a:hover { color: #222!important; text-decoration: none!important; } .form-group_soglasie label div { font-size: 14px; line-height: 16px; } .form-group_radio_inline, .form-group_radio_block, .form-group_checbox { margin-top: 10px; display: block; width: 100%; -webkit-appearance: none; outline: none; font-family: 'Open Sans', sans-serif; font-size: 17px; font-weight: 400; padding: 17px 40px 17px 23px; line-height: 1; background: #ffffff; border: none; border: 1px solid #dee2ef; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; overflow: hidden; position: relative; } .form-group_radio_inline div.form-group_radio_title, .form-group_radio_inline label { margin-right: 14px; float: left; overflow: hidden; } .form-group_radio_inline div { display: block; float: left; } .form-group_radio_inline input { display: block; float: left; position: static; margin: 3px 3px 0px 0px; } .form-group_radio_block label { overflow: hidden; margin-top: 10px; display: block; } .form-group_radio_block input{ display: block; float: left; position: static; margin: 3px 3px 0px 0px; } .form-group_radio_block div { display: block; float: left; } .form-group_radio_block .form-group_radio_title { float: none; margin-bottom: 14px; } .form-group_checbox .form-group_checbox_title { float: none; margin-bottom: 14px; } .form-group_checbox label { overflow: hidden; margin-top: 10px; display: block; } .form-group_checbox input{ display: block; float: left; position: static; margin: 3px 3px 0px 0px; } .form-group_checbox div { display: block; float: left; } .rd-mailform-wrap input[type="text"], .rd-mailform-wrap textarea, .rd-mailform-wrap select { -webkit-appearance: none; } .rd-mailform-head {font-size: 23px;margin-bottom: 23px;font-weight: 600;} .rd-mailform-wrap { color: #222; } .but_zvonok { background: #009ce6; display: inline-block; color: #fff; padding: 10px 20px; font-size: 16px; cursor: pointer; -moz-transition: 0.3s all ease; -webkit-transition: 0.3s all ease; -o-transition: 0.3s all ease; transition: 0.3s all ease; } .but_zvonok:hover { background: #222; } .but_zvonok_fixed { position: fixed; right: 0; top: calc(40% - 90px); z-index: 9999; background: #e31e25; font-size: 16px; display: block; text-decoration: none; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); color: #fff; padding: 10px 20px; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; cursor: pointer; -moz-transition: 0.3s all ease; -webkit-transition: 0.3s all ease; -o-transition: 0.3s all ease; transition: 0.3s all ease; } .but_zvonok_fixed:hover { background: #222; } .rd_mailform_modal { width: 100%; height: 100%; position: fixed; align-items: center; justify-content: center; top: 0; left: 0; z-index: 1000001; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; opacity: 0; visibility: hidden; background: rgba(0,0,0,0.8); -moz-transition: 0.7s all ease; -webkit-transition: 0.7s all ease; -o-transition: 0.7s all ease; transition: 0.7s all ease; display: none; } .rd_mailform_modal .rd_mailform_bloknomain {background: #fff;padding: 15px 15px;} .rd_mailform_modal .rd_mailform_bloknofoot {background: #EAEAEC; padding: 10px;} .rd_mailform_modal .rd_mailform_blokno_close {position: absolute; width: 25px; height: 25px; right: 8px; top: 12px; cursor: pointer; /* background: url('data:image/png;base64,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') no-repeat; */ } .rd_mailform_modal .rd_mailform_blokno_close:hover {opacity: 0.7;} .rd_mailform_modal .rd_mailform_bloknohead { background: #009ce6; padding: 10px 40px 10px 10px; margin: 0; font-size: 17px; color: #fff; text-align: center; font-weight: 600; } .rd_mailform_modal .rd-mailform { margin: 0px; width: 350px; overflow-y: auto; max-height: 100%; z-index: 0; cursor: default; position: relative; } .rd_mailform_show { display: flex!important; opacity: 1; visibility: visible; } .rd_mailform_modal .rd-mailform .form-group input { font-size: 15px; padding: 7px 40px 10px 15px; height: 43px; } .rd_mailform_modal .mfPlaceHolder { padding: 14px 40px 8px 15px; font-size: 15px; } .rd_mailform_modal .rd-mailform .form-group textarea { height: 75px; padding: 10px 40px 10px 15px; font-size: 15px; max-height: 75px; min-height: 75px; } .rd_mailform_modal .rd-mailform .form-group + .form-group { margin-top: 8px; font-size: 15px; } .rd_mailform_modal .mfSelect .value { font-size: 15px; padding: 13px 40px 13px 15px; } .rd_mailform_modal .mfIcon span:before, .rd_mailform_modal .mfIcon span:after { margin-top: -15px; } .rd_mailform_modal .mfSelect .value:before, .rd_mailform_modal .mfSelect .value:after { top: 10.5px; } .rd_mailform_modal .mfValidation { right: 45px; } .rd_mailform_modal .mfSelect .dropdown .option { padding: 1px 15px; font-size: 15px; } .rd_mailform_modal .mfSelect .dropdown .option:before { display: none; } .rd_mailform_modal .btn-mailform { padding: 5px 0px; font-size: 17px; width: 100%; } .rd_mailform_modal .btn-mailform { background: #009ce6; border: 1px solid #009ce6; } .rd_mailform_modal .btn-mailform:hover { background: #222; border: 1px solid #222; } .rd_mailform_modal .form-group_soglasie label div { font-size: 12px; line-height: 13px; } .rd_mailform_blokno_close i { font-size: 20px; color: #fff; } .rd_mailform_modal .mfInfo, .rd_mailform_modal .mfProgress { position: absolute; left: 50%!important; margin-left: -100px!important; width: 200px!important; -moz-transform: translate(0%, 83px); -ms-transform: translate(0%, 83px); -o-transform: translate(0%, 83px); -webkit-transform: translate(0%, 83px); transform: translate(0%, 83px); bottom: inherit!important; top: 50%!important; margin-top: -27px!important; display: none; } .rd_mailform_modal .form-group.btn-wr { position: static; } .rd_mailform_modal .mfInfo.fail, .rd_mailform_modal .mfProgress.fail { line-height: 12px; } .rd_mailform_modal .mfInfo.fail, .rd_mailform_modal .mfProgress.fail, .rd_mailform_modal .mfInfo.success, .rd_mailform_modal .mfProgress.success, .rd_mailform_modal .mfInfo.sending, .rd_mailform_modal .mfProgress.sending { position: fixed!important; display: block; -moz-transform: translate(0%, 0)!important; -ms-transform: translate(0%, 0)!important; -o-transform: translate(0%, 0)!important; -webkit-transform: translate(0%, 0)!important; transform: translate(0%, 0)!important; z-index: 99999999!important; } .rd_mailform_modal .mfInfo.hide, .rd_mailform_modal .mfProgress.hide { display: none!important; } .rd_mailform_modal .form-group_radio_inline, .rd_mailform_modal .form-group_radio_block, .rd_mailform_modal .form-group_checbox { padding: 17px 40px 17px 15px; } .rd_mailform_modal .rd-mailform .form-group input[type="file"] { font-size: 9px; padding-top: 13px; } .rd_mailform_modal .form-group_radio_inline div.form-group_radio_title, .rd_mailform_modal .form-group_radio_inline label { margin-right: 14px; float: left; overflow: hidden; font-size: 15px; } .rd_mailform_modal .form-group_radio_inline div.form-group_radio_title { float: none; margin-bottom: 14px; } .rd_mailform_modal .form-group_radio_inline label, .rd_mailform_modal .form-group_radio_block label { overflow: hidden; margin-top: 8px; display: block; float: none; margin-right: 0px; } .rd_mailform_modal .form-group_radio_inline, .rd_mailform_modal .form-group_radio_block, .rd_mailform_modal .form-group_checbox { font-size: 15px; padding: 14px 14px 15px 15px; } .rd_mailform_modal .form-group_checbox input { margin: 2px 3px 0px 0px; } .rd_mailform_modal .form-group_radio_block input { margin: 2px 3px 0px 0px; } .rd_mailform_modal .form-group_radio_inline input { margin: 2px 3px 0px 0px; } @media (max-width:992px) { .but_zvonok_fixed { right: 0; top: inherit; bottom: 0px; font-size: 14px; text-decoration: none; -webkit-transform: inherit; -ms-transform: inherit; transform: inherit; padding: 5px 13px; } } @media (max-width: 767px) { .rd-mailform-head { font-size: 20px; margin-bottom: 18px; } .rd-mailform .form-group + .form-group:not(.btn-wr):not(.textarea) { margin-top: 10px; } } @media (max-width:480px) { .mfPlaceHolder { padding: 14px 40px 8px 15px; font-size: 15px; } .rd-mailform .form-group input, .rd-mailform .form-group select { font-size: 15px; padding: 7px 40px 10px 15px; height: 43px; } .rd-mailform .form-group + .form-group:not(.btn-wr):not(.textarea) { margin-top: 8px; font-size: 15px; } .btn-mailform { font-size: 17px; width: 100%; padding: 5px 0px; } .mfSelect .value { font-size: 15px; padding: 13px 40px 13px 15px; } .mfIcon span:before, .mfIcon span:after { margin-top: -14px; } .mfSelect .value:before, .mfSelect .value:after { top: 10.5px; } .rd-mailform .form-group input[type="file"] { font-size: 9px; padding-top: 13px; } .form-group_radio_inline div.form-group_radio_title, .form-group_radio_inline label { margin-right: 14px; float: left; overflow: hidden; font-size: 15px; } .form-group_radio_inline div.form-group_radio_title { float: none; margin-bottom: 14px; } .form-group_radio_inline label, .form-group_radio_block label { overflow: hidden; margin-top: 8px; display: block; float: none; margin-right: 0px; } .form-group_radio_inline, .form-group_radio_block, .form-group_checbox { font-size: 15px; padding: 14px 14px 15px 15px; } .form-group_checbox input { margin: 2px 3px 0px 0px; } .form-group_radio_block input { margin: 2px 3px 0px 0px; } .form-group_radio_inline input { margin: 2px 3px 0px 0px; } .rd_mailform_modal .rd-mailform { width: 300px; } .form-group_soglasie label div { font-size: 11px; line-height: 13px; } .rd-mailform-head { font-size: 16px; margin-bottom: 20px; } }