/* [Custom Stylesheet] Project: Step Plugin Version: 1.0 Date Created: 03/18/2017 Date Updated: 03/18/2017 Author: Nghia Luong Minh Website: http://minhnghia.info Email: minhnghia7793@gmail.com */ /* ************Common and reset**************/ a, input, textarea, button, select { outline: none; } a:hover, h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus { text-decoration: none; } a:focus, button:focus, select:focus, input:focus, textarea:focus { outline: none; text-decoration: none; } /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ /** 1. Change the default font family in all browsers (opinionated). 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** Remove the margin in all browsers (opinionated). */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** Add the correct display in IE 9-. 1. Add the correct display in Edge, IE, and Firefox. 2. Add the correct display in IE. */ article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { /* 1 */ display: block; } audio, canvas, progress, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } progress { vertical-align: baseline; } template, [hidden] { display: none; } a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } a:active, a:hover { outline-width: 0; } abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } b, strong { font-weight: inherit; } b, strong { font-weight: bolder; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background-color: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } svg:not(:root) { overflow: hidden; } code, kbd, pre, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } figure { margin: 1em 40px; } hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } button, input, select, textarea { font: inherit; /* 1 */ margin: 0; /* 2 */ } optgroup { font-weight: bold; } button, input { /* 1 */ overflow: visible; } button, select { /* 1 */ text-transform: none; } button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /*fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }*/ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } img { max-width: 100%; } iframe { border: 0; max-width: 100%; width: 100%; } * { font-family: "Montserrat", sans-serif; font-weight: 400; } h1, h2, h3, h4, h5, h6 { position: relative; color: #303030; margin-top: 0; margin-bottom: 10px; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; } h1 { font-size: 36px; } h2 { font-size: 28px; } h3 { font-size: 22px; } h4 { font-size: 18px; } h5 { font-size: 16px; } h6 { font-size: 12px; } p { font-size: 14px; line-height: 1.5em; color: #999; } p span { font-family: inherit; color: inherit; font-size: inherit; } a { position: relative; color: inherit; text-decoration: none; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; } ul, ol { list-style: none; padding: 0; margin: 0; } /* ************ELEMENTS**************/ .ps-btn, button.ps-btn { margin-bottom: 15px; margin-right: 15px; display: inline-block; padding: 10px 40px; font-family: "Montserrat", sans-serif; font-weight: 650; line-height: 20px; font-size: 12px; border: 2px solid #fff; color: #666; text-transform: uppercase; -webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px; border-radius: 40px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; } .ps-btn:hover, button.ps-btn:hover { background-color: #1CD1AA; color: #fff; } .ps-btn--success, button.ps-btn--success { background-color: #1CD1AA; border-color: #1CD1AA; color: #fff; } .ps-btn--success:hover, button.ps-btn--success:hover { background-color: #16a485; } .ps-btn--warning, button.ps-btn--warning { background-color: #f89327; border-color: #f89327; color: #fff; } .ps-btn--warning:hover, button.ps-btn--warning:hover { background-color: #e57a07; } .form-control { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; } .form-control:focus { outline: none; border-color: #1CD1AA; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; box-shadow: none; } input.form-control { height: 50px; } label { display: inline-block; margin-bottom: 10px; font-family: "Montserrat", sans-serif; font-size: 12px; font-weight: 500; } .ps-step { background-color: #fff; padding: 15px; -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); } .ps-step__header { padding: 30px 15px; background-color: #f9f9f9; } .ps-step__number { display: inline-block; position: relative; margin-bottom: 10px; width: 50px; height: 50px; z-index: 100; background-color: #e4e4e4; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; } .ps-step__number i { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-style: normal; font-weight: 600; font-size: 20px; color: #fff; } .ps-step__title { display: block; text-transform: uppercase; font-family: "Montserrat", sans-serif; font-weight: 500; color: #303030; } .ps-step__process::after { clear: both; content: ""; display: table; } .ps-step__process li { position: relative; float: left; /*padding-right: 30px;*/ /*width: calc(100% / 2);*/ text-align: center; } .ps-step__process li:before { content: ''; position: absolute; top: 25px; right: 100%; width: 100%; height: 5px; background-color: #e4e4e4; z-index: 10; -webkit-transform: translateX(50%); -moz-transform: translateX(50%); -ms-transform: translateX(50%); -o-transform: translateX(50%); transform: translateX(50%); } .ps-step__process li:first-child:before { display: none; } .ps-step__process li.active:before { background-color: #1CD1AA; } .ps-step__process li.active .ps-step__number { background-color: #1CD1AA; } .ps-step__process a { display: block; } .ps-step__content { border-top: 1px solid #f89327; padding: 50px 0 50px; position: relative; min-height: 300px; overflow: hidden; } .ps-step__tab { position: absolute; padding: 15px; width: 100%; background-color: #eef0f4; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; z-index: 100; -webkit-transform: scale(1, 0); -moz-transform: scale(1, 0); -ms-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); visibility: hidden; opacity: 0; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; transition: all 0.8s ease; } .ps-step__tab.active { display: block; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); visibility: visible; opacity: 1; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; } .ps-step__tab.seen { -webkit-transform: scale(1, 0); -moz-transform: scale(1, 0); -ms-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } @media (max-width: 767px) { .ps-step .ps-step__process { text-align: center; } .ps-step .ps-step__process li { float: none; margin: 0 auto; padding: 20px 0; } .ps-step .ps-step__process li:before { display: none; } } .ps-step--style2 .ps-step__number { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; } .ps-step--style2 .ps-step__process li:before { -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; transition: all 0.8s ease; visibility: hidden; opacity: 0; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } .ps-step--style2 .ps-step__process li.active:before { width: 100%; visibility: visible; opacity: 1; -webkit-transform: translateX(50%); -moz-transform: translateX(50%); -ms-transform: translateX(50%); -o-transform: translateX(50%); transform: translateX(50%); } .ps-step--style2 .ps-step__tab { -webkit-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); -moz-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .ps-step--style3 .ps-step__number { width: 100px; height: 100px; } .ps-step--style3 .ps-step__number.active { background-color: #f89327; } .ps-step--style3 .ps-step__process li:before { top: 50px; left: 0; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .ps-step--style3 .ps-step__process li:first-child:before { display: block; } .ps-step--style3 .ps-step__process li.active:before { background-color: #f89327; } .ps-step--style3 .ps-step__process li.active .ps-step__number { background-color: #f89327; } .ps-step--style3 .ps-step__tab { -webkit-transform: scale(1, 0); -moz-transform: scale(1, 0); -ms-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; } .ps-step--style3 .ps-step__tab.active { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } @media (max-width: 767px) { .ps-step--style3 .ps-step__process { text-align: center; } .ps-step--style3 .ps-step__process li { float: none; margin: 0 auto; padding: 20px 0; } .ps-step--style3 .ps-step__process li:before { display: none; } .ps-step--style3 .ps-step__process li:first-child:before { display: none; } } .ps-step--style4 .ps-step__number { display: none; } .ps-step--style4 .ps-step__title { position: relative; padding-bottom: 5px; color: #999; } .ps-step--style4 .ps-step__title:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: #1CD1AA; z-index: 10; visibility: hidden; opacity: 0; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; } .ps-step--style4 .ps-step__header { margin-bottom: 0; text-align: center; } .ps-step--style4 .ps-step__process { display: inline-block; } .ps-step--style4 .ps-step__process li { width: auto; } .ps-step--style4 .ps-step__process li:before { display: none; } .ps-step--style4 .ps-step__process li.active .ps-step__title { color: #303030; } .ps-step--style4 .ps-step__process li.active .ps-step__title:after { visibility: visible; opacity: 1; } .ps-step--style4 .ps-step__tab { -webkit-transform: scale(1, 0); -moz-transform: scale(1, 0); -ms-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; } .ps-step--style4 .ps-step__tab.active { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } .ps-step--style5 .ps-step__number { display: none; } .ps-step--style5 .ps-step__header { padding: 0; } .ps-step--style5 .ps-step__title { padding: 10px 0; display: block; font-size: 14px; line-height: 20px; } .ps-step--style5 .ps-step__process li { position: relative; text-align: left; padding-left: 40px; padding-right: 0; border-right: 1px solid #e4e4e4; } .ps-step--style5 .ps-step__process li:before { position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: transparent; height: 0; width: 0; border-bottom: 20px solid transparent; border-left: 20px solid #1CD1AA; border-top: 20px solid transparent; visibility: hidden; opacity: 0; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -ms-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); } .ps-step--style5 .ps-step__process li.active:before { display: block; width: 0; background-color: transparent; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); visibility: visible; opacity: 1; } .ps-step--style5 .ps-step__tab { -webkit-transform: scale(1, 0); -moz-transform: scale(1, 0); -ms-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; } .ps-step--style5 .ps-step__tab.active { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } @media (max-width: 767px) { .ps-step--style5 .ps-step__title { text-align: center; } .ps-step--style5 .ps-step__process { text-align: center; } .ps-step--style5 .ps-step__process li { float: none; border: none; margin: 0 auto; padding: 20px 0; } .ps-step--style5 .ps-step__process li:before { display: none; } .ps-step--style5 .ps-step__process li.active:before { display: none; } .ps-step--style5 .ps-step__process li.active .ps-step__title { color: #1CD1AA; } } .ps-step--style6 .ps-step__number { width: 30px; height: 30px; background-color: #e4e4e4; } .ps-step--style6 .ps-step__number i { display: none; } .ps-step--style6 .ps-step__number:before { content: ''; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 10; width: 50%; height: 50%; background-color: #e4e4e4; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .ps-step--style6 .ps-step__process li:before { top: 15px; background-color: #e4e4e4; } .ps-step--style6 .ps-step__process li.active:before { background-color: #fbe8aa; } .ps-step--style6 .ps-step__process li.active .ps-step__number { background-color: #fbe8aa; } .ps-step--style6 .ps-step__process li.active .ps-step__number:before { background-color: #fbbd19; } .ps-section { /*padding: 50px 0;*/ position: relative; } .ps-section--gray { background-color: #f9f9f9; } .field_type-multi_steps, .acf-field-step {display: none} .ps-step__tab .acf-input-wrap input[type='text'] { height: 50px } .acf_postbox p.label {text-align: left !important;} /*# sourceMappingURL=style.css.map */