input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } .FormInput { position: relative; margin-bottom: 0.5rem; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .FormInput-label { position: absolute; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); -webkit-transition: 0.2s opacity; -moz-transition: 0.2s opacity; -o-transition: 0.2s opacity; -ms-transition: 0.2s opacity; transition: 0.2s opacity; z-index: -1; font-weight: normal; } .FormInput-error { margin: 0.5rem 0 0 0.5rem; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: #ff4842; font-size: 0.75rem; line-height: 1.33; min-height: 1rem; } .FormInput-error p { margin-left: 0.5rem; } .FormInput-field { border: 1px solid #c7c7c7; padding: 0.375rem 1rem; height: 4rem; font-size: 1rem; -webkit-border-radius: 0.25rem; border-radius: 0.25rem; -webkit-transition: 0.2s border-color; -moz-transition: 0.2s border-color; -o-transition: 0.2s border-color; -ms-transition: 0.2s border-color; transition: 0.2s border-color; background-color: #fff; background-image: none; -webkit-box-shadow: none; box-shadow: none; outline: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #696969; } .FormInput-field::placeholder { font-family: 'IBM Plex Sans'; color: #637b9d !important; } .FormInput-field.isTextArea { height: 130px; } .FormInput-field.isDate { padding: 17px 12px; font-family: 'Lato', sans-serif; } .FormInput .icon-arrow-down { font-size: 25px; position: absolute; top: 1rem; right: 0.75rem; } .FormInput-field.error, .FormInput-field.error:focus { border-color: #ff4842; padding: 26px 12px 14px 12px; } .FormInput-field.error ~ .FormInput-label, .FormInput-field.error:focus ~ .FormInput-label { font-size: 12px; line-height: 1.33; z-index: 1; opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; color: #ff4842; left: 0.75rem; top: 0.25rem; } .FormInput-field.error ~ .icon-arrow-down, .FormInput-field.error:focus ~ .icon-arrow-down { color: #ff4842; } .FormInput-field.isDate.error, .FormInput-field.isDate.error:focus { padding: 24px 12px 10px 12px; } .FormInput-field.filled:not(.error), .FormInput-field:focus:not(.error), .FormInput-field:valid:not(.is-select):not(.error), .FormInput-field:valid:not(.isUrl):not(.error) { color: #273b47; border-color: #0791e6; padding: 26px 12px 14px 12px; } .FormInput-field.filled:not(.error) ~ .FormInput-label, .FormInput-field:focus:not(.error) ~ .FormInput-label, .FormInput-field:valid:not(.is-select):not(.error) ~ .FormInput-label, .FormInput-field:valid:not(.isUrl):not(.error) ~ .FormInput-label { font-size: 12px; line-height: 1.33; z-index: 1; opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; color: #637b9d; left: 0.75rem; top: 0.25rem; } .FormInput-field.filled:not(.error) ~ .icon-arrow-down, .FormInput-field:focus:not(.error) ~ .icon-arrow-down, .FormInput-field:valid:not(.is-select):not(.error) ~ .icon-arrow-down, .FormInput-field:valid:not(.isUrl):not(.error) ~ .icon-arrow-down { color: #637b9d; } .FormInput-field.filled.isDate:not(.error), .FormInput-field:focus.isDate:not(.error), .FormInput-field:valid:not(.is-select).isDate:not(.error), .FormInput-field:valid:not(.isUrl).isDate:not(.error) { padding: 24px 12px 10px 12px; } .FormInput-field.FormInput-field--radiance { border-color: #59616f !important; background-color: rgba(0,0,0,0.95); } .FormInput-field.FormInput-field--radiance:focus { border-color: #05a460 !important; } .FormInput-field.FormInput-field--radiance::placeholder { color: #a4abb6 !important; font-size: 1rem; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: 0.2px; } .FormInput-field.FormInput-field--radiance ~ .FormInput-label { color: #a4abb6 !important; } .FormInput-field.FormInput-field--radiance ~ .icon-arrow-down { color: #a4abb6 !important; } .Modal { text-align: left; max-width: 700px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 5em 2em; position: relative; overflow: hidden; } .Modal-favorites { max-width: 360px; -webkit-border-radius: 0.5rem; border-radius: 0.5rem; } .Modal.is-rounted { -webkit-border-radius: 10px; border-radius: 10px; } .Modal.is-gdpr { max-width: 430px !important; } .Modal.is-type { margin: 60px auto; overflow: initial; padding-top: 55px; max-width: 591px; -webkit-border-radius: 10px; border-radius: 10px; } .Modal.LoginModal { max-width: 376px !important; padding: 2px; -webkit-border-radius: 6px; border-radius: 6px; } .Modal > div > *:last-child { margin-bottom: 0; } .Modal.popup { max-width: 1000px; } .Modal-title { font-size: 26px; text-align: center; border-bottom: 1px solid #e9e9e9; padding-bottom: 0.5em; font-weight: 600; margin-bottom: 1em; } .Modal-type { display: block; width: 106px; height: 106px; color: #fff; font-size: 30px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; position: absolute; top: -53px; left: 0; right: 0; margin: 0 auto; -webkit-border-radius: 50%; border-radius: 50%; z-index: 6; background: #0791e6; } .Modal-type.is-warning { background: #ff7f38; } .Modal-type.is-notice { background: #98ca3f; } .Modal-title-b { text-align: center; } .Modal-subTitle { text-align: center; display: block; margin-top: 1em; } .Modal-subTitle + h1 { margin-top: 0; } .Modal-close { position: absolute; right: 16px; top: 16px; cursor: pointer; font-size: 25px; z-index: 10; } .Modal-wrapper { max-width: 380px; margin: 0 auto; } .Modal-steps { width: 300%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden; font-size: 0; -webkit-transform: translate3d(-33.3%, 0, 0); -moz-transform: translate3d(-33.3%, 0, 0); -o-transform: translate3d(-33.3%, 0, 0); -ms-transform: translate3d(-33.3%, 0, 0); transform: translate3d(-33.3%, 0, 0); } .Modal-steps > div { font-size: 1rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 33.33%; display: inline-block; vertical-align: top; } .Modal-steps > div:nth-of-type(1) { -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .Modal-buttons { margin-top: 1em; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; margin-bottom: 0.5em; } .Modal-buttons [class*="btn"] { margin: 0.5em 0.5em 0 0.5em; } .Modal-buttons [class*="btn"]:first-child { margin-left: 0; } .Modal-buttons [class*="btn"]:last-child { margin-right: 0; } .Modal-buttons.is-center { -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; border-top: 1px solid #f6f6f6; padding-top: 0.5em; } .Modal-description { margin: 0 auto 1em; max-width: 380px; } .Modal-textError { color: #f00; margin-top: 0.5em; } @media only screen and (max-width: 480px) { .Modal-buttons [class*="btn"]:first-child { margin-left: 0.5em; } .Modal-buttons [class*="btn"]:last-child { margin-right: 0.5em; } } .slideRight-appear { -webkit-animation: slideAppearRight 0.7s; -moz-animation: slideAppearRight 0.7s; -o-animation: slideAppearRight 0.7s; -ms-animation: slideAppearRight 0.7s; animation: slideAppearRight 0.7s; } .slideRight-enter { -webkit-animation: slideInRight 0.7s; -moz-animation: slideInRight 0.7s; -o-animation: slideInRight 0.7s; -ms-animation: slideInRight 0.7s; animation: slideInRight 0.7s; } .slideRight-leave { -webkit-animation: slideOutLeft 0.7s; -moz-animation: slideOutLeft 0.7s; -o-animation: slideOutLeft 0.7s; -ms-animation: slideOutLeft 0.7s; animation: slideOutLeft 0.7s; } .slideOutLeft { -webkit-animation-name: slideOutLeft; -moz-animation-name: slideOutLeft; -o-animation-name: slideOutLeft; -ms-animation-name: slideOutLeft; animation-name: slideOutLeft; } .slideOutRight { -webkit-animation-name: slideOutRight; -moz-animation-name: slideOutRight; -o-animation-name: slideOutRight; -ms-animation-name: slideOutRight; animation-name: slideOutRight; } .fade-appear { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); } .fade-appear-active { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; } .fade-enter { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); } .fade-enter-active { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; } .fade-leave { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } .fade-leave-active { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; } .bounce-appear-active { -webkit-animation: bounceIn 0.7s; -moz-animation: bounceIn 0.7s; -o-animation: bounceIn 0.7s; -ms-animation: bounceIn 0.7s; animation: bounceIn 0.7s; } .bounce-enter-active { -webkit-animation: bounceIn 0.7s; -moz-animation: bounceIn 0.7s; -o-animation: bounceIn 0.7s; -ms-animation: bounceIn 0.7s; animation: bounceIn 0.7s; } .bounce-leave-active { -webkit-animation: bounceOut 0.7s; -moz-animation: bounceOut 0.7s; -o-animation: bounceOut 0.7s; -ms-animation: bounceOut 0.7s; animation: bounceOut 0.7s; } .bounceUp-appear-active { -webkit-animation: bounceInDown 0.7s; -moz-animation: bounceInDown 0.7s; -o-animation: bounceInDown 0.7s; -ms-animation: bounceInDown 0.7s; animation: bounceInDown 0.7s; } .bounceUp-enter-active { -webkit-animation: bounceInDown 0.7s; -moz-animation: bounceInDown 0.7s; -o-animation: bounceInDown 0.7s; -ms-animation: bounceInDown 0.7s; animation: bounceInDown 0.7s; } .bounceUp-leave-active { -webkit-animation: bounceOutDown 0.7s; -moz-animation: bounceOutDown 0.7s; -o-animation: bounceOutDown 0.7s; -ms-animation: bounceOutDown 0.7s; animation: bounceOutDown 0.7s; } @-moz-keyframes slideAppearRight { from { -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { -webkit-transform: translate3d(0%, 0, 0); -moz-transform: translate3d(0%, 0, 0); -o-transform: translate3d(0%, 0, 0); -ms-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } } @-webkit-keyframes slideAppearRight { from { -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { -webkit-transform: translate3d(0%, 0, 0); -moz-transform: translate3d(0%, 0, 0); -o-transform: translate3d(0%, 0, 0); -ms-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } } @-o-keyframes slideAppearRight { from { -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { -webkit-transform: translate3d(0%, 0, 0); -moz-transform: translate3d(0%, 0, 0); -o-transform: translate3d(0%, 0, 0); -ms-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } } @keyframes slideAppearRight { from { -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { -webkit-transform: translate3d(0%, 0, 0); -moz-transform: translate3d(0%, 0, 0); -o-transform: translate3d(0%, 0, 0); -ms-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } } @-moz-keyframes slideInRight { from { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); } to { -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); } to { -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @-o-keyframes slideInRight { from { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); } to { -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(200%, 0, 0); -moz-transform: translate3d(200%, 0, 0); -o-transform: translate3d(200%, 0, 0); -ms-transform: translate3d(200%, 0, 0); transform: translate3d(200%, 0, 0); } to { -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @-moz-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @-o-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @-moz-keyframes bounceIn { 0% { -webkit-transform: scale3d(0.1, 0.1, 1); -moz-transform: scale3d(0.1, 0.1, 1); -o-transform: scale3d(0.1, 0.1, 1); -ms-transform: scale3d(0.1, 0.1, 1); transform: scale3d(0.1, 0.1, 1); -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9); box-shadow: 0 3px 20px rgba(0,0,0,0.9); } 55% { -webkit-transform: scale3d(1.08, 1.08, 1); -moz-transform: scale3d(1.08, 1.08, 1); -o-transform: scale3d(1.08, 1.08, 1); -ms-transform: scale3d(1.08, 1.08, 1); transform: scale3d(1.08, 1.08, 1); -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0); box-shadow: 0 10px 20px rgba(0,0,0,0); } 75% { -webkit-transform: scale3d(0.95, 0.95, 1); -moz-transform: scale3d(0.95, 0.95, 1); -o-transform: scale3d(0.95, 0.95, 1); -ms-transform: scale3d(0.95, 0.95, 1); transform: scale3d(0.95, 0.95, 1); -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9); box-shadow: 0 0 20px rgba(0,0,0,0.9); } 100% { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9); box-shadow: 0 3px 20px rgba(0,0,0,0.9); } } @-webkit-keyframes bounceIn { 0% { -webkit-transform: scale3d(0.1, 0.1, 1); -moz-transform: scale3d(0.1, 0.1, 1); -o-transform: scale3d(0.1, 0.1, 1); -ms-transform: scale3d(0.1, 0.1, 1); transform: scale3d(0.1, 0.1, 1); -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9); box-shadow: 0 3px 20px rgba(0,0,0,0.9); } 55% { -webkit-transform: scale3d(1.08, 1.08, 1); -moz-transform: scale3d(1.08, 1.08, 1); -o-transform: scale3d(1.08, 1.08, 1); -ms-transform: scale3d(1.08, 1.08, 1); transform: scale3d(1.08, 1.08, 1); -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0); box-shadow: 0 10px 20px rgba(0,0,0,0); } 75% { -webkit-transform: scale3d(0.95, 0.95, 1); -moz-transform: scale3d(0.95, 0.95, 1); -o-transform: scale3d(0.95, 0.95, 1); -ms-transform: scale3d(0.95, 0.95, 1); transform: scale3d(0.95, 0.95, 1); -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9); box-shadow: 0 0 20px rgba(0,0,0,0.9); } 100% { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9); box-shadow: 0 3px 20px rgba(0,0,0,0.9); } } @-o-keyframes bounceIn { 0% { -webkit-transform: scale3d(0.1, 0.1, 1); -moz-transform: scale3d(0.1, 0.1, 1); -o-transform: scale3d(0.1, 0.1, 1); -ms-transform: scale3d(0.1, 0.1, 1); transform: scale3d(0.1, 0.1, 1); -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9); box-shadow: 0 3px 20px rgba(0,0,0,0.9); } 55% { -webkit-transform: scale3d(1.08, 1.08, 1); -moz-transform: scale3d(1.08, 1.08, 1); -o-transform: scale3d(1.08, 1.08, 1); -ms-transform: scale3d(1.08, 1.08, 1); transform: scale3d(1.08, 1.08, 1); -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0); box-shadow: 0 10px 20px rgba(0,0,0,0); } 75% { -webkit-transform: scale3d(0.95, 0.95, 1); -moz-transform: scale3d(0.95, 0.95, 1); -o-transform: scale3d(0.95, 0.95, 1); -ms-transform: scale3d(0.95, 0.95, 1); transform: scale3d(0.95, 0.95, 1); -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9); box-shadow: 0 0 20px rgba(0,0,0,0.9); } 100% { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9); box-shadow: 0 3px 20px rgba(0,0,0,0.9); } } @keyframes bounceIn { 0% { -webkit-transform: scale3d(0.1, 0.1, 1); -moz-transform: scale3d(0.1, 0.1, 1); -o-transform: scale3d(0.1, 0.1, 1); -ms-transform: scale3d(0.1, 0.1, 1); transform: scale3d(0.1, 0.1, 1); -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9); box-shadow: 0 3px 20px rgba(0,0,0,0.9); } 55% { -webkit-transform: scale3d(1.08, 1.08, 1); -moz-transform: scale3d(1.08, 1.08, 1); -o-transform: scale3d(1.08, 1.08, 1); -ms-transform: scale3d(1.08, 1.08, 1); transform: scale3d(1.08, 1.08, 1); -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0); box-shadow: 0 10px 20px rgba(0,0,0,0); } 75% { -webkit-transform: scale3d(0.95, 0.95, 1); -moz-transform: scale3d(0.95, 0.95, 1); -o-transform: scale3d(0.95, 0.95, 1); -ms-transform: scale3d(0.95, 0.95, 1); transform: scale3d(0.95, 0.95, 1); -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9); box-shadow: 0 0 20px rgba(0,0,0,0.9); } 100% { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9); box-shadow: 0 3px 20px rgba(0,0,0,0.9); } } @-moz-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); -moz-transform: scale3d(0.9, 0.9, 0.9); -o-transform: scale3d(0.9, 0.9, 0.9); -ms-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transform: scale3d(1.1, 1.1, 1.1); -moz-transform: scale3d(1.1, 1.1, 1.1); -o-transform: scale3d(1.1, 1.1, 1.1); -ms-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); -o-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); -moz-transform: scale3d(0.9, 0.9, 0.9); -o-transform: scale3d(0.9, 0.9, 0.9); -ms-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transform: scale3d(1.1, 1.1, 1.1); -moz-transform: scale3d(1.1, 1.1, 1.1); -o-transform: scale3d(1.1, 1.1, 1.1); -ms-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); -o-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @-o-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); -moz-transform: scale3d(0.9, 0.9, 0.9); -o-transform: scale3d(0.9, 0.9, 0.9); -ms-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transform: scale3d(1.1, 1.1, 1.1); -moz-transform: scale3d(1.1, 1.1, 1.1); -o-transform: scale3d(1.1, 1.1, 1.1); -ms-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); -o-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); -moz-transform: scale3d(0.9, 0.9, 0.9); -o-transform: scale3d(0.9, 0.9, 0.9); -ms-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transform: scale3d(1.1, 1.1, 1.1); -moz-transform: scale3d(1.1, 1.1, 1.1); -o-transform: scale3d(1.1, 1.1, 1.1); -ms-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); -o-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @-moz-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -ms-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); -webkit-transform: translate3d(0, -3000px, 0); -moz-transform: translate3d(0, -3000px, 0); -o-transform: translate3d(0, -3000px, 0); -ms-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transform: translate3d(0, 25px, 0); -moz-transform: translate3d(0, 25px, 0); -o-transform: translate3d(0, 25px, 0); -ms-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); -moz-transform: translate3d(0, -10px, 0); -o-transform: translate3d(0, -10px, 0); -ms-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); -moz-transform: translate3d(0, 5px, 0); -o-transform: translate3d(0, 5px, 0); -ms-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; transform: none; } } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -ms-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); -webkit-transform: translate3d(0, -3000px, 0); -moz-transform: translate3d(0, -3000px, 0); -o-transform: translate3d(0, -3000px, 0); -ms-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transform: translate3d(0, 25px, 0); -moz-transform: translate3d(0, 25px, 0); -o-transform: translate3d(0, 25px, 0); -ms-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); -moz-transform: translate3d(0, -10px, 0); -o-transform: translate3d(0, -10px, 0); -ms-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); -moz-transform: translate3d(0, 5px, 0); -o-transform: translate3d(0, 5px, 0); -ms-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; transform: none; } } @-o-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -ms-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); -webkit-transform: translate3d(0, -3000px, 0); -moz-transform: translate3d(0, -3000px, 0); -o-transform: translate3d(0, -3000px, 0); -ms-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transform: translate3d(0, 25px, 0); -moz-transform: translate3d(0, 25px, 0); -o-transform: translate3d(0, 25px, 0); -ms-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); -moz-transform: translate3d(0, -10px, 0); -o-transform: translate3d(0, -10px, 0); -ms-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); -moz-transform: translate3d(0, 5px, 0); -o-transform: translate3d(0, 5px, 0); -ms-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; transform: none; } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -moz-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -ms-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); -webkit-transform: translate3d(0, -3000px, 0); -moz-transform: translate3d(0, -3000px, 0); -o-transform: translate3d(0, -3000px, 0); -ms-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transform: translate3d(0, 25px, 0); -moz-transform: translate3d(0, 25px, 0); -o-transform: translate3d(0, 25px, 0); -ms-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); -moz-transform: translate3d(0, -10px, 0); -o-transform: translate3d(0, -10px, 0); -ms-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); -moz-transform: translate3d(0, 5px, 0); -o-transform: translate3d(0, 5px, 0); -ms-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; transform: none; } } @-moz-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); -moz-transform: translate3d(0, -10px, 0); -o-transform: translate3d(0, -10px, 0); -ms-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transform: translate3d(0, 20px, 0); -moz-transform: translate3d(0, 20px, 0); -o-transform: translate3d(0, 20px, 0); -ms-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); -webkit-transform: translate3d(0, -2000px, 0); -moz-transform: translate3d(0, -2000px, 0); -o-transform: translate3d(0, -2000px, 0); -ms-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); -moz-transform: translate3d(0, -10px, 0); -o-transform: translate3d(0, -10px, 0); -ms-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transform: translate3d(0, 20px, 0); -moz-transform: translate3d(0, 20px, 0); -o-transform: translate3d(0, 20px, 0); -ms-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); -webkit-transform: translate3d(0, -2000px, 0); -moz-transform: translate3d(0, -2000px, 0); -o-transform: translate3d(0, -2000px, 0); -ms-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @-o-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); -moz-transform: translate3d(0, -10px, 0); -o-transform: translate3d(0, -10px, 0); -ms-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transform: translate3d(0, 20px, 0); -moz-transform: translate3d(0, 20px, 0); -o-transform: translate3d(0, 20px, 0); -ms-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); -webkit-transform: translate3d(0, -2000px, 0); -moz-transform: translate3d(0, -2000px, 0); -o-transform: translate3d(0, -2000px, 0); -ms-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); -moz-transform: translate3d(0, -10px, 0); -o-transform: translate3d(0, -10px, 0); -ms-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transform: translate3d(0, 20px, 0); -moz-transform: translate3d(0, 20px, 0); -o-transform: translate3d(0, 20px, 0); -ms-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); -webkit-transform: translate3d(0, -2000px, 0); -moz-transform: translate3d(0, -2000px, 0); -o-transform: translate3d(0, -2000px, 0); -ms-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @-moz-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); -moz-transform: translate3d(0, 10px, 0); -o-transform: translate3d(0, 10px, 0); -ms-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transform: translate3d(0, -20px, 0); -moz-transform: translate3d(0, -20px, 0); -o-transform: translate3d(0, -20px, 0); -ms-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); -webkit-transform: translate3d(0, 2000px, 0); -moz-transform: translate3d(0, 2000px, 0); -o-transform: translate3d(0, 2000px, 0); -ms-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); -moz-transform: translate3d(0, 10px, 0); -o-transform: translate3d(0, 10px, 0); -ms-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transform: translate3d(0, -20px, 0); -moz-transform: translate3d(0, -20px, 0); -o-transform: translate3d(0, -20px, 0); -ms-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); -webkit-transform: translate3d(0, 2000px, 0); -moz-transform: translate3d(0, 2000px, 0); -o-transform: translate3d(0, 2000px, 0); -ms-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @-o-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); -moz-transform: translate3d(0, 10px, 0); -o-transform: translate3d(0, 10px, 0); -ms-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transform: translate3d(0, -20px, 0); -moz-transform: translate3d(0, -20px, 0); -o-transform: translate3d(0, -20px, 0); -ms-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); -webkit-transform: translate3d(0, 2000px, 0); -moz-transform: translate3d(0, 2000px, 0); -o-transform: translate3d(0, 2000px, 0); -ms-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); -moz-transform: translate3d(0, 10px, 0); -o-transform: translate3d(0, 10px, 0); -ms-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transform: translate3d(0, -20px, 0); -moz-transform: translate3d(0, -20px, 0); -o-transform: translate3d(0, -20px, 0); -ms-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); -webkit-transform: translate3d(0, 2000px, 0); -moz-transform: translate3d(0, 2000px, 0); -o-transform: translate3d(0, 2000px, 0); -ms-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .Plans.is-xs { text-align: center; } @media only screen and (min-width: 48em) { .Plans.is-xs { display: none; } } .Plans.is-xs.u-wrapper { padding: 0; } .Plans.is-lg { display: none; } @media only screen and (min-width: 48em) { .Plans.is-lg { display: block; } } .Companies { -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 1px 2px 4px 0 rgba(21,99,157,0.16); box-shadow: 1px 2px 4px 0 rgba(21,99,157,0.16); background-color: #fff; overflow: hidden; width: 100%; margin-top: 1rem; } @media only screen and (min-width: 64em) { .Companies { margin: 1rem 0 1rem 2rem; max-width: 500px; } } .Companies-head { background-color: #0791e6; font-family: 'cooper_hewittmedium'; color: #fff; font-size: 1.125rem !important; font-weight: 600; line-height: 1.56; text-align: center; padding: 0.5rem 0; text-transform: uppercase; margin-bottom: 0 !important; } .Companies-content { padding: 26px 1rem; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .Companies-title { font-size: 16px; line-height: 1.5; color: #223354; text-align: center; } .Companies-anchor { padding: 8px 28px; color: #0791e6; border: solid 1px #0791e6; background-color: transparent; text-decoration: none; -webkit-transition: ease all 300ms; -moz-transition: ease all 300ms; -o-transition: ease all 300ms; -ms-transition: ease all 300ms; transition: ease all 300ms; margin-top: 26px; -webkit-border-radius: 4px; border-radius: 4px; } .Companies-anchor:hover { color: #fff; border: solid 1px #0791e6; background-color: #0791e6; } .centered { margin: 0 auto; } .BottomWrapper { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media only screen and (min-width: 64em) { .BottomWrapper { -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } } .BottomWrapper-course { -webkit-box-shadow: 1px 2px 4px 0 rgba(21,99,157,0.16); box-shadow: 1px 2px 4px 0 rgba(21,99,157,0.16); -webkit-border-radius: 8px; border-radius: 8px; background: #fff; overflow: hidden; } .BottomWrapper-course-title { text-transform: uppercase; background-color: #e6f4fc; font-family: 'cooper_hewittmedium'; line-height: 1.56; font-size: 18px; padding: 4px 42px; } .BottomWrapper-course-details { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 1rem; } .BottomWrapper-course-details-copy { font-size: 16px; line-height: 1.5; color: #223354; margin: 16px 0; } .Academy { -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 1px 2px 4px 0 rgba(21,99,157,0.16); box-shadow: 1px 2px 4px 0 rgba(21,99,157,0.16); background-color: #fff; overflow: hidden; width: 100%; color: #fff; margin-top: 1rem; } @media only screen and (min-width: 64em) { .Academy { margin: 1rem 0 1rem 2rem; max-width: 500px; } } .Academy-head { background-color: #e32020; font-family: 'cooper_hewittmedium'; color: #fff; font-size: 1.125rem !important; font-weight: 600; line-height: 1.56; text-align: center; padding: 0.5rem 0; text-transform: uppercase; margin-bottom: 0 !important; } .Academy-content { padding: 26px 1rem; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .Academy-title { font-size: 16px; line-height: 1.5; color: #223354; text-align: center; } .Academy-anchor { padding: 8px 28px; color: #0791e6; border: solid 1px #0791e6; background-color: transparent; text-decoration: none; -webkit-transition: ease all 300ms; -moz-transition: ease all 300ms; -o-transition: ease all 300ms; -ms-transition: ease all 300ms; transition: ease all 300ms; margin-top: 26px; -webkit-border-radius: 4px; border-radius: 4px; } .Academy-anchor:hover { color: #fff; border: solid 1px #0791e6; background-color: #0791e6; } .centered { margin: 0 auto; } .PlanBody { padding: 1rem 0; } .PlanBody.is-highlight { background-color: #e6f4fc; } .PlanBody.has-promo { background-color: #f3f3f9; } .PlanBody ul { list-style: none; font-size: 14px; line-height: 20px; padding: 0; } .PlanBody ul li { height: 50px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 0 0 0 1rem; } .PlanBody ul li .underline { text-decoration: underline; } .PlanBody .is-exclusive { color: #0791e6; font-weight: bold; cursor: pointer; } .PlanBody-description { -webkit-box-flex: 4; -moz-box-flex: 4; -o-box-flex: 4; box-flex: 4; -webkit-flex: 4; -ms-flex: 4; flex: 4; text-align: left; color: #223354; font-size: 14px; } .PlanBody-check { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; color: #5c6b85; } .PlanBody .icon { margin-right: 0.5rem; } .PlanBody .icon.icon-check { color: #4ccb00; } .PlanBody .icon.icon-delete { color: #ff4842; } .PlanBody-CTA { text-align: center; } .is-dark-mode .PlanBody { background-color: #121f3d; } .is-dark-mode .PlanBody-description { color: #fff; } .PlansContainer { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; margin-bottom: 1rem; } .StickyPlan { padding: 14px 0.5rem 0 0.5rem; background: #fff; width: calc(100% - 1rem); position: sticky; position: -webkit-sticky; top: 0; z-index: 99; } .StickyPlan.is-expert { background-color: #e6f4fc; } .StickyPlan.has-promo { background-color: #f3f3f9; } .StickyPlan .PlanColumn-extra-benefits svg { display: initial; } .is-dark-mode .StickyPlan { background-color: #121f3d; } .is-dark-mode .StickyPlan.is-expert { background-color: #121f3d; } .is-dark-mode .StickyPlan.has-promo { background-color: #121f3d; } .PlanTabs { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .Modal { padding: 0; max-height: 95vh; max-width: 95vw; } @media only screen and (min-width: 48em) { .Modal { max-width: 600px; } } .Modal div.exit-cross { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .Modal div.exit-cross button { background: none; border: none; color: #8da2c0; cursor: pointer; height: 2rem; padding: 0.625rem; width: 2rem; } .Modal footer { background: #e6f4fc; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; padding: 1.5rem 2rem; } .Modal footer button { font-weight: 700; text-transform: uppercase; } .Modal .four-installments-modal-content { padding: 0 1rem; max-height: 80vh; overflow: auto; } @media only screen and (min-width: 48em) { .Modal .four-installments-modal-content { padding: 0 2rem; } } .Modal .four-installments-modal-content header { -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin-bottom: 0.75rem; } @media only screen and (min-width: 48em) { .Modal .four-installments-modal-content header { margin-bottom: 1.5rem; } } .Modal .four-installments-modal-content header h3 { font-size: 1rem; line-height: 1.5rem; font-weight: 700; padding: 0 1.25rem; } @media only screen and (min-width: 48em) { .Modal .four-installments-modal-content header h3 { font-size: 1.125rem; line-height: 1.75rem; } } .Modal .four-installments-modal-content header svg { background: #e6f4fc; -webkit-border-radius: 50%; border-radius: 50%; -webkit-box-sizing: initial; -moz-box-sizing: initial; box-sizing: initial; color: #03091e; height: 0.75rem; padding: 0.375rem; width: auto; } @media only screen and (min-width: 48em) { .Modal .four-installments-modal-content header svg { height: 1.5rem; padding: 0.75rem; width: auto; } } .Modal .four-installments-modal-content ol { padding: 0 1rem; } .Modal .four-installments-modal-content ol li { font-weight: 700; font-size: 0.875rem; line-height: 1.5rem; padding: 0.25rem 0; } @media only screen and (min-width: 48em) { .Modal .four-installments-modal-content ol li { font-size: 1rem; padding: 0.5rem 0; } } .Modal .four-installments-modal-content ol li span { font-weight: initial; } .Modal .four-installments-modal-content ol a { color: #0791e6; } .Modal .four-installments-modal-content img { padding: 1rem 0; width: 100%; } .Modal .four-installments-modal-content .conditions p { color: #5c6b85; padding-bottom: 0.5rem; font-size: 0.75rem; line-height: 1.125rem; letter-spacing: 0.25px; } @media only screen and (min-width: 48em) { .Modal .four-installments-modal-content .conditions p { font-size: 0.875rem; line-height: 1.375rem; } } .Modal .four-installments-modal-content .installments-timeline { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; border: 1px solid rgba(168,177,192,0.4); -webkit-border-radius: 0.5rem; border-radius: 0.5rem; -webkit-box-pack: distribute; -moz-box-pack: distribute; -o-box-pack: distribute; -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; margin: 0.5rem 0; padding: 1rem 0.75rem; } @media only screen and (min-width: 48em) { .Modal .four-installments-modal-content .installments-timeline { margin: 1rem 0; } } .Modal .four-installments-modal-content .installments-timeline div { -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 100%; } .Modal .four-installments-modal-content .installments-timeline div span { padding-top: 0.5rem; font-size: 1rem; } .Modal .four-installments-modal-content .installments-timeline div span.price { font-size: 0.875rem; } .Modal .four-installments-modal-content .installments-timeline .top-dot-container { -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .Modal .four-installments-modal-content .installments-timeline .top-dot-container:before, .Modal .four-installments-modal-content .installments-timeline .top-dot-container:after { content: ''; border-top: 1px solid #0791e6; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 0 1.25rem; -ms-flex: 1 0 1.25rem; flex: 1 0 1.25rem; } .Modal .four-installments-modal-content .installments-timeline .top-dot-container.no-border-first:before { border: none; } .Modal .four-installments-modal-content .installments-timeline .top-dot-container.no-border-last:after { border: none; } .Modal .four-installments-modal-content .installments-timeline .top-dot-container .top-dot { width: 0.625rem; height: 0.625rem; border: 1px solid #0791e6; -webkit-border-radius: 50%; border-radius: 50%; } .Modal .four-installments-modal-content .installments-timeline .top-dot-container .top-dot.filled { background: #0791e6; } .CurrentPlanCTA { padding: 16px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; background: #fff; -webkit-box-shadow: 1px 2px 4px 0 rgba(21,99,157,0.16); box-shadow: 1px 2px 4px 0 rgba(21,99,157,0.16); -webkit-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; } .CurrentPlanCTA-price { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .CurrentPlanCTA-price img { -webkit-border-radius: 50%; border-radius: 50%; margin-right: 5px; margin-left: 8px; } .CurrentPlanCTA-price p { font-family: 'cooper_hewittmedium'; font-size: 32px; line-height: 1.5; color: #223354; } .CurrentPlanCTA-price__symbol { color: #a8b1c0; } .CurrentPlanCTA-price__small { font-size: 16px; line-height: 1.5; color: #a8b1c0; } .CurrentPlanCTA-before { font-size: 12px; margin-bottom: 0.25rem; text-align: left; } .CurrentPlanCTA-before span { text-decoration: line-through; } .CurrentPlanCTA-subtitle { font-size: 16px; line-height: 1.5; color: #a8b1c0; margin-top: 0.25rem; text-align: center; } .CurrentPlanCTA-subtitle-pay-price { margin-left: 2px; } .CurrentPlanCTA-info { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; margin-bottom: 0.5rem; } .CurrentPlanCTA-cta { width: 100%; } .CurrentPlanCTA-cta a { display: block; background: #0791e6; } .CurrentPlanCTA .PlanColumn-extra-benefits { border: none; padding: 0; } .is-dark-mode .CurrentPlanCTA { background: #24385b; } .is-dark-mode .CurrentPlanCTA-price p { color: #fff; } .is-dark-mode .CurrentPlanCTA-price__symbol { color: #a8b1c0; } .is-dark-mode .CurrentPlanCTA-cta a { color: #03091e; } .PlanCTA-button { display: block; width: max-content; min-width: 110px; margin: 0 auto; padding: 6px 0; text-align: center; -webkit-border-radius: 4px; border-radius: 4px; border: solid 1px #98ca3f; background-color: #98ca3f; font-size: 1rem; font-weight: bold; text-transform: uppercase; text-decoration: none; color: #fff; -webkit-transition: all ease 200ms; -moz-transition: all ease 200ms; -o-transition: all ease 200ms; -ms-transition: all ease 200ms; transition: all ease 200ms; } .PlanCTA-button:hover, .PlanCTA-button:active, .PlanCTA-button:focus { background: #77a61e; border-color: #77a61e; -webkit-box-shadow: 1px 2px 4px 0 rgba(21,99,157,0.16); box-shadow: 1px 2px 4px 0 rgba(21,99,157,0.16); color: #fff; } .PlanCTA-button-isPromoHighlight { color: #fff; } .PlanCTA-button-isPromoHighlight:hover { background: #98ca3f; -webkit-box-shadow: 1px 2px 4px 0 rgba(21,99,157,0.16); box-shadow: 1px 2px 4px 0 rgba(21,99,157,0.16); color: #fff; } .Pricing { padding: 14px 0 2rem 0; } @media only screen and (min-width: 48em) { .Pricing { padding: 2rem 0; } } .Pricing.is-referral h2 { font-size: 26px; line-height: 32px; font-weight: normal; } .Pricing.is-referral h2 p { font-size: 20px; font-family: 'cooper_hewittmedium'; text-align: center; } .Pricing h2 { text-align: center; font-family: 'cooper_hewittmedium'; font-size: 1.2rem; font-weight: 700; line-height: 1.25; margin-bottom: 1rem; } @media only screen and (min-width: 48em) { .Pricing h2 { margin-bottom: 3rem; } } @media only screen and (min-width: 64em) { .Pricing h2 { font-size: 2rem; line-height: 42px; } } .Course { background: #f6f6f6; display: none; height: 96px; position: absolute; right: 1.5rem; left: 0.5rem; top: 1rem; } @media only screen and (min-width: 48em) { .Course { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } } @media only screen and (min-width: 64em) { .Course { top: 40px; } } .Course-content { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; max-width: calc(100% - 475px); } .Course .u-wrapper { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .Course figure { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } @media only screen and (min-width: 64em) { .Course figure img { width: 60px; height: 60px; } } .Course-info { margin-left: 0.5rem; } @media only screen and (min-width: 64em) { .Course-info { margin-left: 1.25rem; } } .Course-info p { font-size: 0.75rem; } @media only screen and (min-width: 64em) { .Course-info p { font-size: 1rem; } } .Course-title { font-size: 1rem !important; font-weight: bold; font-family: 'cooper_hewittmedium'; } @media only screen and (min-width: 64em) { .Course-title { max-width: 340px; margin-top: 0.5rem; font-size: 1.4rem !important; } } .PlansBenefits { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } @media only screen and (min-width: 48em) { .PlansBenefits { max-width: 345px; } } @media only screen and (min-width: 64em) { .PlansBenefits { max-width: 445px; } } .PlansBenefits.is-course { margin-top: 111px; } @media only screen and (min-width: 64em) { .PlansBenefits.is-course { margin-top: 131px; } } .PlansBenefits-head { padding-left: 11px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; -webkit-box-pack: start; -moz-box-pack: start; -o-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 299px; } @media only screen and (min-width: 48em) { .PlansBenefits-head { height: 524px; } } @media only screen and (min-width: 64em) { .PlansBenefits-head { height: 516px; } } .PlansBenefits-head.multiple-extra-benefit { height: 299px; } @media only screen and (min-width: 48em) { .PlansBenefits-head.multiple-extra-benefit { height: 685px; } } @media only screen and (min-width: 64em) { .PlansBenefits-head.multiple-extra-benefit { height: 577px; } } .PlansBenefits-head-title { font-family: 'cooper_hewittmedium'; color: #131d30; font-size: 24px; font-weight: 600; line-height: 1.5; } @media only screen and (min-width: 48em) { .PlansBenefits-head-title { width: 60%; } } .PlansBenefits-head-details { padding-top: 16px; padding-bottom: 24px; border-bottom: solid 1px #d9dfe6; margin: 0 auto; } @media only screen and (min-width: 48em) { .PlansBenefits-head-details { margin: unset; width: 80%; } } .PlansBenefits-head-details-text { color: #5c6b85; font-size: 16px; line-height: 1.5; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .PlansBenefits-head-details-text:first-child { margin-bottom: 7px; } .PlansBenefits-head-details img { -webkit-border-radius: 50%; border-radius: 50%; margin-right: 16px; } .PlansBenefits-head-payments { padding-top: 24px; margin: 0 auto; } @media only screen and (min-width: 48em) { .PlansBenefits-head-payments { margin: unset; } } .PlansBenefits-head-payments-text { color: #5c6b85; line-height: 1.5; font-size: 16px; margin-bottom: 10px; } .PlansBenefits-deposit { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start !important; align-items: flex-start !important; } @media only screen and (min-width: 64em) { .PlansBenefits-deposit { -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center !important; align-items: center !important; } } .PlansBenefits-methods { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin-top: 0.25rem; } @media only screen and (min-width: 64em) { .PlansBenefits-methods { margin: 0.25rem 0 0 10px; } } .PlansBenefits-methods figure { margin-right: 0.25rem; } .PlansBenefits ul { padding: 0; } .PlansBenefits ul li { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 48px; padding: 11px; font-size: 14px; list-style: none; text-align: left; line-height: 1.5; color: #223354; border-bottom: 1px solid #d9dfe6; } .PlansBenefits ul li:last-child { border-bottom: none; } @media only screen and (min-width: 64em) { .PlansBenefits ul li { font-size: 14px; } } @media only screen and (min-width: 75em) { .PlansBenefits ul li { font-size: 1rem; } } .PlansBenefits ul li span:not(.is-exclusive) { text-decoration: underline; } .PlansBenefits ul li .is-exclusive { color: #0791e6; font-weight: bold; cursor: pointer; } .is-dark-mode .PlansBenefits-head-title { color: #eff3f8; width: 100%; } .is-dark-mode .PlansBenefits-head-details-text { color: #becde3; } .is-dark-mode .PlansBenefits-head-payments-text { color: #becde3; } .is-dark-mode .PlansBenefits-features-item { border-bottom: 1px solid #40587c !important; } .is-dark-mode .PlansBenefits-features-item div { font-family: 'Roboto', sans-serif; color: #fff; } .is-promo .is-highlight .PlanColumn-title { background: #0791e6; } .is-promo .is-highlight .PlanColumn-title h6 { color: #fff; } .is-promo .is-highlight .PlanColumn-content { background-color: #f3edff; } .is-promo .is-highlight .PlanCTA-button { background-color: #0791e6; border: 1px solid #0791e6; } .is-promo .is-highlight .PlanCTA-button:hover, .is-promo .is-highlight .PlanCTA-button:active, .is-promo .is-highlight .PlanCTA-button:focus { background-color: #29184a; border-color: #29184a; } .Sticky { display: none; } .Sticky.is-active { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; position: fixed; left: 0; right: 0; top: 0; z-index: 10; } .Form-title { font-size: 24px; line-height: 1.5; font-family: 'cooper_hewittmedium'; color: #fff; } @media only screen and (min-width: 48em) { .Form-title { font-size: 30px; line-height: 1.2; } } @media only screen and (min-width: 64em) { .Form-title { font-size: 36px; line-height: 1.5; } } .Form-subtitle { line-height: 1.5; font-weight: normal; color: #fff; margin: 0.5em 0 0.75em 0; font-size: 1rem; } @media only screen and (min-width: 48em) { .Form-subtitle { font-size: 18px; } } @media only screen and (min-width: 64em) { .Form-subtitle { font-size: 20px; } } .Form-backto { margin-top: 27px; font-weight: bold; color: #fff; text-decoration: underline; display: block; } .Form-backto:hover { cursor: pointer; } .Form-tofe a { width: 100%; text-align: center; } .Form-form { display: grid; grid-gap: 0.25rem; } .Form-form-label { z-index: 1; } .Form-form-label label { color: #fff; margin-bottom: 0.5em; display: block; font-size: 1rem; } .Form-form-input { -webkit-border-radius: 3px; border-radius: 3px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 14px; margin-bottom: 0; } .Form-form-input:focus { outline: none; } .Form-form-input.has-menu { padding-left: 7em; } .Form-form-input.is-number { max-width: 100px; } .Form-form-phone-holder { position: relative; } .Form-form-phone-selected { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 100%; padding: 0.5em; border-right: solid 1px #e9e9e9; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; min-width: 90px; max-width: 90px; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .Form-form-phone-selected i { position: absolute; right: 0.25em; -webkit-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0ms; -moz-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0ms; -o-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0ms; -ms-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0ms; transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0ms; } .Form-form-phone-selected i.toggle-down { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .Form-form-phone-selected i.toggle-up { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .Form-form-phone-prefix { position: absolute; height: 100%; } .Form-form-phone-prefix:hover { cursor: pointer; } .Form-form-phone-flag { width: 1em; height: 1em; -webkit-border-radius: 100%; border-radius: 100%; overflow: hidden; } .Form-form-phone-code { margin-left: 4px; color: #273b47; letter-spacing: 0.4; font-size: 12px; } .Form-form-phone-toselect { padding: 0.5em; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .Form-form-phone-toselect-content { -webkit-border-radius: 4px; border-radius: 4px; background-color: #fff; max-height: 105px; min-width: 90px; max-width: 90px; overflow-y: scroll; } .Form-form-radio { display: grid; grid-gap: 0.5em; grid-template-columns: 1fr 1.25fr; } @media only screen and (min-width: 48em) { .Form-form-radio { grid-template-columns: 1fr 1.5fr; } } .Form-form-radio .radio { margin: 0; } .Form-form-radio label { color: #fff; font-size: 1rem; line-height: 1.5; } .Form-form-check { padding: 1rem 0; } .Form-form-check .checkbox { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .Form-form-check .checkbox-label { margin-left: 0; } .Form-form-check label { color: #fff; font-size: 14px; line-height: 1.5; margin-left: 0.5em; } .Form-form-check label a { color: #fff; } .is-variation .Form-title, .is-variation .Form-subtitle, .is-variation .Form-backto { color: #273b47; } .is-variation .Form-form-label label, .is-variation .Form-form-radio label, .is-variation .Form-form-check label, .is-variation .Form-form-label a, .is-variation .Form-form-radio a, .is-variation .Form-form-check a { color: #273b47; } .Hero { background: url(https://static.platzi.com/static/css/pattern.b6ea4e924466beb27f4c5f49c3b93a8d.png), -webkit-linear-gradient(0deg, #1c3643 0, #273b47 25%, #1e5372); background: url(https://static.platzi.com/static/css/pattern.b6ea4e924466beb27f4c5f49c3b93a8d.png), -moz-linear-gradient(0deg, #1c3643 0, #273b47 25%, #1e5372); background: url(https://static.platzi.com/static/css/pattern.b6ea4e924466beb27f4c5f49c3b93a8d.png), -o-linear-gradient(0deg, #1c3643 0, #273b47 25%, #1e5372); background: url(https://static.platzi.com/static/css/pattern.b6ea4e924466beb27f4c5f49c3b93a8d.png), -ms-linear-gradient(0deg, #1c3643 0, #273b47 25%, #1e5372); background: url(https://static.platzi.com/static/css/pattern.b6ea4e924466beb27f4c5f49c3b93a8d.png), linear-gradient(90deg, #1c3643 0, #273b47 25%, #1e5372); -webkit-background-size: contain; -moz-background-size: contain; background-size: contain; background-repeat: no-repeat; position: relative; background-position: bottom; overflow: hidden; } @media only screen and (min-width: 48em) { .Hero { display: grid; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; background-position: bottom left; } } .Hero.is-rcn { background: #fff; } @media only screen and (min-width: 48em) { .Hero.is-rcn .Hero-content { grid-template-columns: 5fr 7fr; } } .Hero.is-rcn .Hero-content-left { display: block; -webkit-box-ordinal-group: 0; -moz-box-ordinal-group: 0; -o-box-ordinal-group: 0; -ms-flex-order: 0; -webkit-order: 0; order: 0; } @media only screen and (min-width: 48em) { .Hero.is-rcn .Hero-content-left { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -o-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; } } .Hero.is-rcn .Hero-content-left-figure { width: 100%; } .Hero.is-rcn .Hero-content-left-figure img { width: 100%; } @media only screen and (min-width: 48em) { .Hero.is-rcn .Hero-content-left-figure { width: auto; } } @media only screen and (min-width: 48em) { .Hero.is-rcn .Hero-content-left-figure-mobile { display: none; } } .Hero.is-rcn .Hero-content-left-figure-desktop { display: none; } @media only screen and (min-width: 48em) { .Hero.is-rcn .Hero-content-left-figure-desktop { display: block; } } .Hero.is-rcn .Form-title { color: #273b47; line-height: 44px; } .Hero.is-rcn .Form-subtitle { color: #696969; font-family: 'cooper_hewittmedium'; font-size: 18px; color: #5c6b85; } .Hero.is-rcn .Form-form-check label { color: #5c6b85; font-size: 14px; } .Hero.is-rcn .Form-form-check label:before { border-color: #c7c7c7; } .Hero.is-rcn .Form-form-check label a { color: #5c6b85; } .Hero.is-google { background: #fff; } .Hero.is-google .Hero-login-cta-google { display: grid; grid-template-rows: 1fr 1fr; grid-gap: 1rem; margin-bottom: 1rem; margin-top: 1rem; } @media only screen and (min-width: 48em) { .Hero.is-google .Hero-login-cta-google { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; margin: 0; } } .Hero.is-google .Hero-title { font-size: 18px; line-height: 1.5; font-family: 'cooper_hewittmedium'; color: #131d30; text-align: center; } @media only screen and (min-width: 48em) { .Hero.is-google .Hero-title { font-size: 30px; line-height: 1.2; text-align: left; } } @media only screen and (min-width: 64em) { .Hero.is-google .Hero-title { font-size: 36px; line-height: 1.5; } } .Hero.is-google .Hero-text { line-height: 1.5; font-weight: normal; color: #131d30; margin: 0.5em 0 0.75em 0; font-size: 1rem; } @media only screen and (min-width: 48em) { .Hero.is-google .Hero-text { font-size: 14px; } } @media only screen and (min-width: 64em) { .Hero.is-google .Hero-text { font-size: 20px; } } .Hero.is-google .Hero-subtitle { font-weight: bold; font-size: 1.125rem; line-height: 1.75rem; color: #131d30; } .Hero.is-google .Hero-cta { background: #0791e6; font-weight: bold; font-size: 14px; text-decoration: none; text-align: center; max-width: 100%; width: 100%; -webkit-box-shadow: 0 1px 1px 0 #0791e6; box-shadow: 0 1px 1px 0 #0791e6; text-transform: uppercase; display: none; margin-top: 1rem; } .Hero.is-google .Hero-cta:hover, .Hero.is-google .Hero-cta:focus, .Hero.is-google .Hero-cta:active { background-color: #056099; -webkit-box-shadow: 0 2px 13px 0 rgba(5,96,153,0.5); box-shadow: 0 2px 13px 0 rgba(5,96,153,0.5); } .Hero.is-google .Hero-cta--mobile { display: block; margin: 0; max-width: 100%; } @media only screen and (min-width: 48em) { .Hero.is-google .Hero-cta { display: block; } .Hero.is-google .Hero-cta--mobile { display: none; } } @media only screen and (min-width: 64em) { .Hero.is-google .Hero-cta { max-width: 17rem; } } @media only screen and (min-width: 48em) { .Hero.is-google .Hero-content { grid-template-columns: 5fr 5fr; } } .Hero.is-google .Hero-content-left { display: block; -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -o-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; } .Hero.is-google .Hero-content-left-figure { width: 100%; height: 100%; } .Hero.is-google .Hero-content-left-figure img { width: 100%; object-fit: cover; object-position: left; height: 100%; } @media only screen and (min-width: 48em) { .Hero.is-google .Hero-content-left-figure-mobile { display: none; } } .Hero.is-google .Hero-content-left-figure-desktop { display: none; } @media only screen and (min-width: 48em) { .Hero.is-google .Hero-content-left-figure-desktop { display: block; } } .Hero.is-google .Hero-content-right { z-index: 2; } .Hero.is-google .Hero-success { display: none; background-color: #ccecff; font-size: 14px; color: #131d30; min-height: 3rem; width: 100%; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .Hero.is-google .Hero-success--text { margin: 0 auto; max-width: calc(100% - 4rem); width: 100%; padding: 1rem 0; } @media only screen and (min-width: 64em) { .Hero.is-google .Hero-success--text { max-width: calc(1200px - 4rem); width: calc(100% - 4rem); } } .Hero.is-google .Hero-success--visible { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .Hero.is-deal { background: #121f3d; } .Hero.is-deal .Hero-title { font-size: 28px; line-height: 1.5; font-family: 'cooper_hewittmedium'; color: #fff; font-weight: bold; text-align: left; } @media only screen and (min-width: 48em) { .Hero.is-deal .Hero-title { line-height: 1.2; } } @media only screen and (min-width: 64em) { .Hero.is-deal .Hero-title { font-size: 48px; line-height: 1.5; } } .Hero.is-deal .Hero-text { line-height: 1.5; font-weight: normal; color: #fff; margin: 0.5em 0 0.75em 0; font-size: 1rem; } @media only screen and (min-width: 48em) { .Hero.is-deal .Hero-text { font-size: 14px; } } @media only screen and (min-width: 64em) { .Hero.is-deal .Hero-text { font-size: 20px; } } .Hero.is-deal .Hero-cta { background: #98ca3f; font-weight: bold; font-size: 14px; text-decoration: none; text-align: center; max-width: 100%; width: 100%; -webkit-box-shadow: 0 1px 1px 0 #98ca3f; box-shadow: 0 1px 1px 0 #98ca3f; text-transform: uppercase; display: block; margin-top: 1rem; } .Hero.is-deal .Hero-cta--mobile { display: none; } .Hero.is-deal .Hero-cta:hover, .Hero.is-deal .Hero-cta:focus, .Hero.is-deal .Hero-cta:active { background-color: #98ca3f; -webkit-box-shadow: 0 1px 1px 0 #98ca3f; box-shadow: 0 1px 1px 0 #98ca3f; } @media only screen and (min-width: 64em) { .Hero.is-deal .Hero-cta { max-width: 17rem; } } @media only screen and (min-width: 48em) { .Hero.is-deal .Hero-content { grid-template-columns: 5fr 5fr; } } .Hero.is-deal .Hero-content-left { display: block; -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -o-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; } .Hero.is-deal .Hero-content-left-figure { width: 100%; height: 100%; } .Hero.is-deal .Hero-content-left-figure img { width: 100%; object-fit: cover; object-position: left; height: 100%; } @media only screen and (min-width: 48em) { .Hero.is-deal .Hero-content-left-figure-mobile { display: none; } } .Hero.is-deal .Hero-content-left-figure-desktop { display: none; } @media only screen and (min-width: 48em) { .Hero.is-deal .Hero-content-left-figure-desktop { display: block; position: absolute; top: 0; left: 30vw; } } .Hero.is-deal .Hero-content-left-logos { max-width: 145px; margin: 1.5rem auto 0 auto; } .Hero.is-deal .Hero-content-left-logos img { width: 100%; object-fit: contain; } @media only screen and (min-width: 48em) { .Hero.is-deal .Hero-content-left-logos { position: absolute; bottom: 22px; right: 0; max-width: 313px; margin: 0; margin-right: 2rem; } } @media only screen and (min-width: 48em) { .Hero.is-deal .Hero-content-left { height: calc(100% + 2rem); margin-top: -2rem; margin-right: -2rem; } } @media only screen and (min-width: 64em) { .Hero.is-deal .Hero-content-left { height: 100%; margin: -2rem 0; } } .Hero.is-deal .Hero-content-right { z-index: 2; } .Hero.is-deal .Hero-success { display: none; background-color: #ccecff; font-size: 14px; color: #fff; min-height: 3rem; width: 100%; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .Hero.is-deal .Hero-success--text { margin: 0 auto; max-width: calc(100% - 4rem); width: 100%; padding: 1rem 0; } @media only screen and (min-width: 64em) { .Hero.is-deal .Hero-success--text { max-width: calc(1200px - 4rem); width: calc(100% - 4rem); } } .Hero.is-deal .Hero-success--visible { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .Hero .Form-title { color: #fff; line-height: 44px; } .Hero .Form-subtitle { color: #fff; font-family: 'cooper_hewittmedium'; font-size: 18px; } .Hero .Form-form-check label { color: #fff; font-size: 14px; } .Hero .Form-form-check label:before { border-color: #c7c7c7; } .Hero .Form-form-check label a { color: #fff; } .Hero .Form-form .submit { background: #0791e6; -webkit-box-shadow: unset; box-shadow: unset; } .Hero-content { display: grid; padding: 2em !important; } @media only screen and (min-width: 48em) { .Hero-content { grid-template-columns: 1fr 1fr; grid-gap: 1rem; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; justify-items: center; } } @media only screen and (min-width: 64em) { .Hero-content { grid-gap: 1rem; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; justify-items: center; } } .Hero-content-left { display: none; } @media only screen and (min-width: 48em) { .Hero-content-left { display: block; justify-self: flex-end; } } @media only screen and (min-width: 48em) { .Hero-content-left-figure { width: 290px; } } @media only screen and (min-width: 64em) { .Hero-content-left-figure { width: 460px; } } @media only screen and (min-width: 48em) { .Hero-content-left-figure img { width: 100%; } } .Hero-title { font-size: 20px; line-height: 1.2; font-family: 'cooper_hewittmedium'; color: #fff; } @media only screen and (min-width: 48em) { .Hero-title { font-size: 30px; line-height: 1.2; } } @media only screen and (min-width: 64em) { .Hero-title { font-size: 36px; line-height: 1.5; } } .Hero-subtitle { line-height: 1.5; font-weight: normal; color: #fff; margin: 0.5em 0 0.75em 0; font-size: 1rem; } @media only screen and (min-width: 48em) { .Hero-subtitle { font-size: 18px; } } @media only screen and (min-width: 64em) { .Hero-subtitle { font-size: 20px; } } .Hero-backto { margin-top: 27px; font-weight: bold; color: #fff; text-decoration: underline; display: block; } .Hero-backto:hover { cursor: pointer; } .Hero-tofe a { width: 100%; text-align: center; } .Hero.is-innovate .Hero-title { line-height: 1.25; } .Hero.is-innovate .Hero-text { font-size: 18px; } .Hero.is-innovate .Hero-text a { margin-left: 0.5rem; } @media only screen and (min-width: 48em) { .Hero.is-innovate .Hero-content { grid-gap: 72px; padding: 4rem 2rem !important; } } .Hero.is-innovate .Hero-content-left { margin: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .Hero.is-innovate .Hero-content-left-brand { display: none; } @media only screen and (min-width: 48em) { .Hero.is-innovate .Hero-content-left-brand { display: block; width: 287px; margin: 0 auto 35px auto; } .Hero.is-innovate .Hero-content-left-brand img { width: 100%; } } @media only screen and (min-width: 48em) { .Hero.is-innovate .Hero-content-left-figure { width: 325px; height: auto; } } @media only screen and (min-width: 64em) { .Hero.is-innovate .Hero-content-left-figure { width: 450px; height: auto; } } @media only screen and (min-width: 75em) { .Hero.is-innovate .Hero-content-left-figure { width: 564px; height: auto; } } .Hero.is-innovate .Hero-content-left-figure-desktop { display: none; } @media only screen and (min-width: 48em) { .Hero.is-innovate .Hero-content-left-figure-desktop { display: block; position: relative; top: unset; left: unset; } } .Hero.is-innovate .Hero-cta { max-width: unset; padding: 1.25rem 0; max-height: min-content; } @media only screen and (min-width: 1100px) { .Hero.is-hero-variation .Hero-content { grid-gap: 150px; } } .VideoSection { background-color: #f8f8f9; padding: 2em; } .VideoSection-content { display: grid; grid-gap: 1em; } @media only screen and (min-width: 48em) { .VideoSection-content { grid-template-columns: 1fr 1fr; grid-gap: 90px; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; justify-items: center; } } .VideoSection-content-right { justify-self: normal; } .VideoSection-title { font-family: 'cooper_hewittmedium'; font-size: 24px; line-height: 1.2; color: #273b47; margin-bottom: 0.5em; } @media only screen and (min-width: 48em) { .VideoSection-title { font-size: 30px; } } @media only screen and (min-width: 64em) { .VideoSection-title { font-size: 36px; } } .VideoSection-subtitle { color: #292929; line-height: 1.5; font-size: 16px; } @media only screen and (min-width: 48em) { .VideoSection-subtitle { font-size: 18px; } } @media only screen and (min-width: 64em) { .VideoSection-subtitle { font-size: 20px; } } .VideoSection-video { max-width: 580px; margin: 0 auto; } .VideoSection.is-video-variation { background-color: #fff; } .VideoSection.is-chile-video { padding-bottom: 0; background-color: #121f3d; } .InfoSection { padding: 2em; } .InfoSection-title { font-family: 'cooper_hewittmedium'; color: #273b47; font-size: 24px; line-height: 1.2; } @media only screen and (min-width: 48em) { .InfoSection-title { font-size: 30px; line-height: 1.4; text-align: center; } } @media only screen and (min-width: 64em) { .InfoSection-title { font-size: 36px; line-height: 1.5; } } .InfoSection-elements { display: grid; grid-gap: 2em; margin-top: 2em; } @media only screen and (min-width: 48em) { .InfoSection-elements { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media only screen and (min-width: 64em) { .InfoSection-elements { display: grid; grid-template-columns: 1fr 1fr 1fr; } } .InfoSection-single { display: grid; justify-items: center; grid-auto-rows: min-content; grid-gap: 0.5em; } @media only screen and (min-width: 48em) { .InfoSection-single { width: 50%; } .InfoSection-single:not(:last-child) { margin-bottom: 0.5em; } } @media only screen and (min-width: 64em) { .InfoSection-single { width: auto; margin-bottom: 0; } } .InfoSection-single-figure { width: 56px; } @media only screen and (min-width: 64em) { .InfoSection-single-figure { width: 72px; } } .InfoSection-single-figure img { width: 100%; } .InfoSection-single-title { font-size: 18px; font-family: 'cooper_hewittmedium'; color: #273b47; } @media only screen and (min-width: 64em) { .InfoSection-single-title { font-size: 24px; } } .InfoSection-single-description { color: #9b9b9b; line-height: 1.5; text-align: center; } @media only screen and (min-width: 64em) { .InfoSection-single-description { font-size: 18px; } } @media only screen and (min-width: 64em) { .InfoSection.is-innovate .InfoSection-elements { grid-gap: 124px; } } .InfoSection.is-innovate .InfoSection-single { grid-gap: 1rem; } .InfoSection.is-innovate .InfoSection-single-figure { height: 151px; width: unset; } .InfoSection.is-innovate .InfoSection-single-figure img { height: 100%; width: unset; } .InfoSection.is-innovate .InfoSection-single-description { color: #becde3; font-size: 18px; } .SingleCareer { padding: 18px 16px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; align-itemns: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -webkit-border-radius: 4px; border-radius: 4px; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; background-color: rgba(39,59,71,0.7); height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .SingleCareer-title { font-size: 24px; font-weight: bold; color: #fff; } .SingleCareer-subtitle { color: #fff; margin-top: 4px; font-size: 12px; font-weight: bold; margin-right: 0.5em; } @media only screen and (min-width: 64em) { .SingleCareer-subtitle { font-size: 1em; } } .SingleCareer-right { position: absolute; right: 0; } .SingleCareer-right i { color: #fff; font-size: 40px; display: block; } .SingleCareer-left { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-self: stretch; align-self: stretch; -ms-flex-item-align: stretch; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .SingleCareer-anchor { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .SingleCareer-count { margin: 0 0.25em; } .CareersOffer { background-color: #f8f8f9; padding: 2em; } .CareersOffer-title { font-family: 'cooper_hewittmedium'; font-size: 24px; line-height: 1.2; color: #273b47; margin-bottom: 1em; } @media only screen and (min-width: 48em) { .CareersOffer-title { font-size: 30px; max-width: 472px; text-align: center; margin: 0 auto; } } @media only screen and (min-width: 64em) { .CareersOffer-title { max-width: 543px; font-size: 36px; line-height: 1.5; } } .CareersOffer-subtitle { font-family: 'cooper_hewittmedium'; line-height: 1.2; margin-top: 19px; color: #273b47; font-size: 20px; } @media only screen and (min-width: 48em) { .CareersOffer-subtitle { line-height: 1.79; font-size: 24px; } } .CareersOffer-elements { display: grid; grid-gap: 1em; margin-top: 24px; grid-auto-rows: 1fr; } @media only screen and (min-width: 48em) { .CareersOffer-elements { margin-top: 32px; grid-template-columns: 1fr 1fr; } } @media only screen and (min-width: 64em) { .CareersOffer-elements { grid-column-gap: 16px; grid-row-gap: 24px; grid-template-columns: 1fr 1fr 1fr; } } .CareersOffer-bottom { text-align: center; margin-top: 2em; } .CareersOffer-anchor { font-size: 14px; font-weight: bold; text-align: center; } @media only screen and (min-width: 64em) { .CareersOffer-anchor { font-size: 18px; } } .SuccessElement { background-color: #fff; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08); box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08); border-bottom: solid 4px #98ca3f; padding: 1em; display: grid; position: relative; grid-gap: 14px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .SuccessElement:nth-child(3) { display: none; } @media only screen and (min-width: 64em) { .SuccessElement:nth-child(2n + 1) { display: grid; } } .SuccessElement-user-info { display: grid; grid-gap: 0.5em; } .SuccessElement-user-info-top { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .SuccessElement-user-info-bottom a { text-decoration: none; } .SuccessElement-user-info-bottom a:not(:first-child) { margin-left: 1em; } .SuccessElement-user-info-bottom a .icon-platzi { color: #98ca3f; } .SuccessElement-user-info-bottom a .twitter { color: #60a9de; } .SuccessElement-name { font-size: 14px; font-weight: bold; color: #273b47; } .SuccessElement-flag { width: 1em; height: 1em; overflow: hidden; -webkit-border-radius: 100%; border-radius: 100%; margin-left: 0.5em; } .SuccessElement-top { display: grid; grid-template-columns: 56px 1fr; grid-gap: 1em; } .SuccessElement-top-figure { width: 56px; height: 56px; -webkit-border-radius: 100%; border-radius: 100%; overflow: hidden; } .SuccessElement-top-figure img { height: 100%; } .SuccessElement-bio { color: #4a4a4a; } .SuccessHistories { padding: 2em; background-color: #f8f8f8; } @media only screen and (min-width: 64em) { .SuccessHistories { padding: 4em 2em; } } .SuccessHistories-title { font-family: 'cooper_hewittmedium'; color: #273b47; font-size: 24px; line-height: 1.2; } @media only screen and (min-width: 48em) { .SuccessHistories-title { font-size: 30px; line-height: 1.4; text-align: center; } } @media only screen and (min-width: 64em) { .SuccessHistories-title { font-size: 36px; line-height: 1.5; } } .SuccessHistories-subtitle { font-family: 'cooper_hewittmedium'; line-height: 1.2; margin-top: 19px; color: #273b47; font-size: 20px; } @media only screen and (min-width: 48em) { .SuccessHistories-subtitle { line-height: 1.79; font-size: 24px; text-align: center; } } .SuccessHistories-elements { display: grid; grid-gap: 1em; margin-top: 2em; } @media only screen and (min-width: 48em) { .SuccessHistories-elements { grid-template-columns: 1fr 1fr; } } @media only screen and (min-width: 64em) { .SuccessHistories-elements { grid-column-gap: 74px; grid-row-gap: 24px; grid-template-columns: 1fr 1fr 1fr; } } .BundleCourses { padding: 2em; } .BundleCourses-title { font-family: 'cooper_hewittmedium'; font-size: 24px; line-height: 1.2; color: #273b47; margin-bottom: 1em; } @media only screen and (min-width: 48em) { .BundleCourses-title { font-size: 30px; max-width: 472px; text-align: center; margin: 0 auto; } } @media only screen and (min-width: 64em) { .BundleCourses-title { max-width: 543px; font-size: 36px; line-height: 1.5; } } .BundleCourses-subtitle { font-family: 'cooper_hewittmedium'; line-height: 1.2; margin-top: 19px; color: #273b47; font-size: 20px; } @media only screen and (min-width: 48em) { .BundleCourses-subtitle { line-height: 1.79; font-size: 24px; text-align: center; } } .BundleCourses-elements { display: grid; grid-gap: 1em; margin-top: 24px; grid-auto-rows: 1fr; } @media only screen and (min-width: 48em) { .BundleCourses-elements { margin-top: 32px; grid-template-columns: 1fr 1fr; } } @media only screen and (min-width: 64em) { .BundleCourses-elements { grid-column-gap: 16px; grid-row-gap: 24px; grid-template-columns: 1fr 1fr 1fr; } } .BundleCourses-course { -webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1); box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1); -webkit-border-radius: 0.5rem; border-radius: 0.5rem; background-color: #fff; -webkit-transition: ease-in all 300ms; -moz-transition: ease-in all 300ms; -o-transition: ease-in all 300ms; -ms-transition: ease-in all 300ms; transition: ease-in all 300ms; text-decoration: none; padding: 1rem; display: grid; -ms-flex-line-pack: center; -webkit-align-content: center; align-content: center; -webkit-box-pack: start; -moz-box-pack: start; -o-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; grid-gap: 1rem; grid-template-columns: 43px 1fr; } @media only screen and (min-width: 64em) { .BundleCourses-course { padding: 24px 27px 1rem 27px; grid-template-columns: 56px 1fr; } } .BundleCourses-course:hover { -webkit-box-shadow: inset 0 0px 0px 1px #0791e6; box-shadow: inset 0 0px 0px 1px #0791e6; } .BundleCourses-course-badge { width: 43px; height: 100%; } @media only screen and (min-width: 64em) { .BundleCourses-course-badge { width: 56px; } } .BundleCourses-course-badge img { width: 100%; } .BundleCourses-course-title { color: #273b47; font-family: 'cooper_hewittmedium'; font-weight: 600; line-height: 1.25; font-size: 14px; } @media only screen and (min-width: 64em) { .BundleCourses-course-title { font-size: 1rem; } } .BundleCourses-course-teacher { margin-top: 0.5rem; color: #696969; font-size: 12px; text-transform: capitalize; } .BundleCourses-course-teacher i { color: #98ca3f; margin-left: 0.3rem; } @media only screen and (min-width: 64em) { .BundleCourses-course-teacher { font-size: 14px; } } .StickyBanner { background: -webkit-linear-gradient(0deg, #1c3643 0, #273b47 25%, #1e5372); background: -moz-linear-gradient(0deg, #1c3643 0, #273b47 25%, #1e5372); background: -o-linear-gradient(0deg, #1c3643 0, #273b47 25%, #1e5372); background: -ms-linear-gradient(0deg, #1c3643 0, #273b47 25%, #1e5372); background: linear-gradient(90deg, #1c3643 0, #273b47 25%, #1e5372); height: 75px; width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .StickyBanner-content { width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 0 1em; } .Agenda { background-color: #f3f8fb; padding: 3rem 0; } .Agenda-title { font-size: 18px; line-height: 1.5; font-family: 'cooper_hewittmedium'; color: #131d30; text-align: center; max-width: 450px; margin: 0 auto 2rem auto; text-align: center; } @media only screen and (min-width: 48em) { .Agenda-title { line-height: 1.2; } } @media only screen and (min-width: 64em) { .Agenda-title { font-size: 24px; line-height: 1.5; } } .Agenda-subtitle { text-align: center; width: 100%; font-weight: bold; font-size: 1.125rem; line-height: 1.75rem; color: #131d30; } .Agenda-cta { background: #0791e6 !important; font-weight: bold; font-size: 14px !important; max-width: 100%; width: calc(100% - 2rem); -webkit-box-shadow: 0 1px 1px 0 #0791e6 !important; box-shadow: 0 1px 1px 0 #0791e6 !important; text-transform: uppercase; display: none; margin: 0 1rem 2rem 1rem; text-decoration: none; text-align: center; } .Agenda-cta:hover, .Agenda-cta:focus, .Agenda-cta:active { background-color: #056099 !important; -webkit-box-shadow: 0 2px 13px 0 rgba(5,96,153,0.5) !important; box-shadow: 0 2px 13px 0 rgba(5,96,153,0.5) !important; } .Agenda-cta-container { width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .Agenda-sessions { display: grid; grid-template-columns: 1fr; grid-column-gap: 3rem; grid-row-gap: 1.5rem; } .Agenda-sessions-item { padding: 1rem; } .Agenda-sessions-image { height: 80px; width: 80px; margin: 0 auto 1rem auto; } .Agenda-sessions-image img { width: 100%; height: 100%; object-fit: contain; } .Agenda-sessions-date { font-size: 0.875rem; line-height: 1.5; color: #5c6b85; text-align: left; display: inline-block; } .Agenda-sessions-date--row { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: baseline; -moz-box-align: baseline; -o-box-align: baseline; -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-bottom: 0.5rem; } .Agenda-sessions-date--bold { font-weight: bold; color: #131d30; } .Agenda-sessions-title { font-weight: bold; font-size: 1.125rem; font-family: 'cooper_hewittmedium'; color: #131d30; line-height: 1.5; margin: 1rem 0 0.5rem 0; text-align: center; } .Agenda-sessions-description { font-size: 1rem; color: #131d30; line-height: 1.5; margin-top: 1rem; } .Agenda-cards { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; grid-gap: 1rem; margin-bottom: 4rem; } .Agenda-cards-card { background-color: #24385b; -webkit-border-radius: 12px; border-radius: 12px; border: none; padding: 1rem; } .Agenda-cards-title { font-size: 1.25rem; font-weight: bold; color: #fff; } .Agenda-cards-date { font-size: 0.875rem; color: #33b1ff; margin-top: 0.5rem; } .Agenda-cards-cta { background-color: #0791e6; color: #fff; font-size: 1.25rem; font-weight: bold; line-height: 1; text-decoration: none; text-transform: uppercase; color: #fff; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; overflow: hidden; cursor: pointer; position: relative; } .Agenda-cards-cta-image { width: 48px; height: 48px; position: absolute; left: 2rem; } .Agenda-cards-cta-image img { width: 100%; object-fit: contain; } .Agenda-cards-cta-bg { width: 105px; height: 105px; background-color: #33b1ff; position: absolute; -webkit-border-radius: 12px; border-radius: 12px; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); left: -21px; top: 3px; } .Agenda-cards-cta:focus, .Agenda-cards-cta:hover, .Agenda-cards-cta:active { outline: none; } @media only screen and (min-width: 48em) { .Agenda-sessions { grid-template-columns: repeat(2, 1fr); grid-column-gap: 1rem; } .Agenda-sessions-image { margin: 0 0 1rem 0; } .Agenda-sessions-date, .Agenda-sessions-title { text-align: left; } .Agenda-sessions-date--right { text-align: right; } .Agenda-cta { max-width: 330px; margin: 0 auto; width: 100%; margin-bottom: 1.5rem; } .Agenda-cards { grid-template-columns: 1fr 1fr; } } @media only screen and (min-width: 64em) { .Agenda-sessions { grid-template-columns: repeat(3, 1fr); grid-column-gap: 3rem; } .Agenda-cards { grid-template-columns: repeat(3, 1fr); grid-gap: 1.5rem; } } .PrefixSelector { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; font-size: 16px; height: 60px; } .PrefixSelector-prefix { cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #696969; min-width: 6em; -webkit-box-flex: 0; -moz-box-flex: 0; -o-box-flex: 0; box-flex: 0; -webkit-flex: none; -ms-flex: none; flex: none; position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; border: none; } .PrefixSelector-selection { background: #fff; border: 1px solid #c7c7c7; border-right: none; -webkit-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .PrefixSelector-options { position: absolute; left: 0; right: -1px; top: 58px; border: 1px solid #c7c7c7; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; will-change: height opacity overflow; background: #fff; max-height: 123px; overflow-y: scroll; z-index: 999; } .PrefixSelector-options--visible { -webkit-animation: slideDown 0.1s forwards ease-out; -moz-animation: slideDown 0.1s forwards ease-out; -o-animation: slideDown 0.1s forwards ease-out; -ms-animation: slideDown 0.1s forwards ease-out; animation: slideDown 0.1s forwards ease-out; } .PrefixSelector-options--hidden { -webkit-animation: slideUp 0.2s forwards ease-in; -moz-animation: slideUp 0.2s forwards ease-in; -o-animation: slideUp 0.2s forwards ease-in; -ms-animation: slideUp 0.2s forwards ease-in; animation: slideUp 0.2s forwards ease-in; border: none; } .PrefixSelector-options-option { padding: 0.5em 0.3em; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .PrefixSelector-badge { margin-right: 0.3em; } .PrefixSelector-badge { width: 1em; height: 1em; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 16px; -ms-flex: 0 0 16px; flex: 0 0 16px; } .PrefixSelector-badge--rounded { -webkit-border-radius: 50%; border-radius: 50%; } .PrefixSelector-badge--small { margin-left: 0.5em; width: 1em; height: 1em; max-width: 1em; } .PrefixSelector-icon { font-size: 1.6em; color: #0791e6; } .PrefixSelector-icon--origin { -webkit-animation: vanish-reverse 0.3s forwards; -moz-animation: vanish-reverse 0.3s forwards; -o-animation: vanish-reverse 0.3s forwards; -ms-animation: vanish-reverse 0.3s forwards; animation: vanish-reverse 0.3s forwards; } .PrefixSelector-icon--reverse { -webkit-animation: vanish 0.3s forwards; -moz-animation: vanish 0.3s forwards; -o-animation: vanish 0.3s forwards; -ms-animation: vanish 0.3s forwards; animation: vanish 0.3s forwards; } .PrefixSelector-label { font-size: 0.9em; } .PrefixSelector-input { width: 2.5rem; border: none; height: 3rem; font-size: inherit; color: currentColor; padding: 0; -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .PrefixSelector-input:focus { outline: none; border-bottom: 1px solid #c7c7c7; padding-botom: 0; height: auto; } .PrefixSelector-children { width: calc(100% - 96px); } .PrefixSelector-children .FormInput input { -webkit-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; } @-moz-keyframes vanish { from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); } 98% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } to { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } } @-webkit-keyframes vanish { from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); } 98% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } to { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } } @-o-keyframes vanish { from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); } 98% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } to { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } } @keyframes vanish { from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); } 98% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } to { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } } @-moz-keyframes vanish-reverse { from { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); } 98% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes vanish-reverse { from { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); } 98% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes vanish-reverse { from { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); } 98% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes vanish-reverse { from { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); } 98% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes slideDown { from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); height: 0; top: 59px; } to { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; z-index: 999; } } @-webkit-keyframes slideDown { from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); height: 0; top: 59px; } to { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; z-index: 999; } } @-o-keyframes slideDown { from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); height: 0; top: 59px; } to { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; z-index: 999; } } @keyframes slideDown { from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); height: 0; top: 59px; } to { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; z-index: 999; } } @-moz-keyframes slideUp { to { top: 59px; opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; height: 0; z-index: -1; } } @-webkit-keyframes slideUp { to { top: 59px; opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; height: 0; z-index: -1; } } @-o-keyframes slideUp { to { top: 59px; opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; height: 0; z-index: -1; } } @keyframes slideUp { to { top: 59px; opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; height: 0; z-index: -1; } } .PlanTab { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; cursor: pointer; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .PlanTab:first-child .PlanTab-container { -webkit-border-radius: 5px 0 0 0; border-radius: 5px 0 0 0; border-right: transparent; } .PlanTab:last-child .PlanTab-container { -webkit-border-radius: 0 5px 0 0; border-radius: 0 5px 0 0; border-left: transparent; } .PlanTab-container { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; height: 45px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; background: #fff; color: #0791e6; border: 1px solid #0791e6; font-weight: bold; } .PlanTab-container.is-active { color: #fff; background: #0791e6; border: 1px solid #0791e6; } .PlanTab-title { padding: 0.25rem; font-size: 14px; text-align: center; text-transform: uppercase; } .PlanTab-title img { width: 75%; } .PlanTab-price { font-weight: 700; text-align: center; } .PlanTab-specification { text-align: center; font-size: 0.5rem; } .PlanTab-currency { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; margin: 0.25rem 0; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .PlanTab-currency small { font-size: 10px; } .PlanTab-currency img { -webkit-border-radius: 50%; border-radius: 50%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin-right: 0.25rem; } .PlanTab-content { padding: 0 0.5rem 0.5rem 0.5rem; } .is-dark-mode .PlanTab-container { background: #637b9d; color: #fff; border: 1px solid #637b9d; } .is-dark-mode .PlanTab-container.is-active { background: #24385b; color: #fff; border: 1px solid #24385b; } .PlanColumn.has-discount { -webkit-border-radius: 5px; border-radius: 5px; border: 0px transparent !important; } .PlanColumn.has-discount .PlanColumn-promo { background: #95d7ff; } .PlanColumn.has-discount .PlanColumn-title figure { padding-top: 0.25rem; } .PlanColumn.has-discount .PlanColumn-subtitle { margin-top: 0.25rem; } .PlanColumn.has-discount .PlanColumn-cost { padding: 2px 0; } .PlanColumn.has-discount .PlanColumn-details { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .PlanColumn.has-discount .PlanColumn-details { margin-top: 0; } .PlanColumn.has-discount .PlanColumn-footer .btn-green { background: #662d91; -webkit-box-shadow: 0 1px 1px 0 #1b1464; box-shadow: 0 1px 1px 0 #1b1464; } .PlanColumn { text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; width: 180px; margin: 0 12px; } @media only screen and (min-width: 64em) { .PlanColumn { width: 240px; } } .PlanColumn:nth-child(0) { margin-left: 0; } .PlanColumn-content { -webkit-border-radius: 5px; border-radius: 5px; } .PlanColumn-before { font-size: 12px; margin-bottom: -0.7rem; } .PlanColumn-before span { text-decoration: line-through; } .PlanColumn-details { padding: 10px; display: grid; grid-gap: 0.25rem; grid-template-rows: 30px 23px 36px 42px 351px min-content; } @media only screen and (min-width: 64em) { .PlanColumn-details { padding: 1rem; grid-gap: unset; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; grid-template-rows: 30px 25px 30px 36px 290px min-content; } } @media only screen and (min-width: 75em) { .PlanColumn-details { padding: 1rem; } } .PlanColumn-details.multiple-extra-benefit { grid-template-rows: 30px 25px 30px 36px 451px min-content; } @media only screen and (min-width: 64em) { .PlanColumn-details.multiple-extra-benefit { grid-template-rows: 30px 25px 30px 36px 351px min-content; } } .PlanColumn-course { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; font-size: 15px; font-weight: 700; text-decoration: none; color: #0791e6; } .PlanColumn-title { background: #e6f4fc; height: 40px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 0 1rem; } .PlanColumn-title h6 { color: #223354; text-align: left; text-transform: uppercase; font-size: 15px; font-family: 'cooper_hewittmedium'; font-weight: 600; } @media only screen and (min-width: 64em) { .PlanColumn-title h6 { font-size: 18px; } } .PlanColumn-currency { line-height: 1; text-align: left; } .PlanColumn-currency small { font-size: 16px; color: #a8b1c0; line-height: 1.5; } .PlanColumn-promo { font-weight: bold; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; background: #fff8a9; font-size: 12px; padding: 0.25rem; text-transform: uppercase; font-weight: strong; text-align: center; margin: 0 auto; } .PlanColumn-cost { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: start; -moz-box-pack: start; -o-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; color: #223354; font-size: 24px; line-height: 1.5; } @media only screen and (min-width: 64em) { .PlanColumn-cost { font-size: 32px; } } .PlanColumn-cost img { -webkit-border-radius: 50%; border-radius: 50%; overflow: hidden; margin-left: 0.25rem; background: #fecc01; } .PlanColumn-cost-symbol { color: #a8b1c0; font-size: 24px; } @media only screen and (min-width: 64em) { .PlanColumn-cost-symbol { font-size: 32px; } } .PlanColumn-subtitle { font-size: 14px; color: #223354; margin-top: 1rem; line-height: 1.5; text-align: left; } .PlanColumn-subtitleDiscount { font-size: 9px; margin-top: -2px; color: #696969; } @media only screen and (min-width: 64em) { .PlanColumn-subtitleDiscount { margin-top: -0.25rem; font-size: 12px; } } .PlanColumn-subtitle-save { color: #a8b1c0; font-size: 12px; line-height: 1.2; text-align: left; margin-top: 4px; } @media only screen and (min-width: 64em) { .PlanColumn-subtitle-save { font-size: 14px; } } .PlanColumn-subtitle-pay { color: #223354; font-size: 14px; line-height: 1.2; text-align: left; -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; } @media only screen and (min-width: 48em) { .PlanColumn-subtitle-pay { text-align: left; } } @media only screen and (min-width: 75em) { .PlanColumn-subtitle-pay { font-size: 15px; line-height: 1.5; } } .PlanColumn-subtitle-pay-price { margin-left: 2px; } .PlanColumn-header { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; height: 70px; -webkit-box-pack: start; -moz-box-pack: start; -o-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; background: #fff; height: min-content; } .PlanColumn-header-wrapper { -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 1px 2px 4px 0 rgba(21,99,157,0.16); box-shadow: 1px 2px 4px 0 rgba(21,99,157,0.16); overflow: hidden; height: 100%; } .PlanColumn-overlay { position: absolute; left: 0; bottom: 0; right: 0; top: 0; z-index: 1; } .PlanColumn-row { color: #5c6b85; font-size: 1.5rem; height: 48px; padding: 11px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; text-align: center; border-bottom: 1px solid #d9dfe6; } .PlanColumn-row:first-child { padding-top: 40px !important; } .PlanColumn-row:last-child { border-bottom: none; } .PlanColumn-row .icon-delete { color: #ff4842; } .PlanColumn-row.is-promo img { height: 24px; } .PlanColumn.is-highlight .PlanColumn-title { background: #0791e6; } .PlanColumn.is-highlight .PlanColumn-title h6 { color: #fff; } .PlanColumn-benefits-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .PlanColumn-benefits-container ul { padding: 0; margin-bottom: 0.625rem; font-size: 0.875rem; } .PlanColumn-benefits-item { color: #5c6b85; font-size: 12px; line-height: 1.5; list-style: none; position: relative; padding-left: 1rem; text-align: left; } @media only screen and (min-width: 64em) { .PlanColumn-benefits-item { font-size: 14px; line-height: 1.71; } } .PlanColumn-benefits-item:before { content: ''; background-color: #0791e6; position: absolute; left: 0; top: 10px; width: 4px; height: 4px; -webkit-border-radius: 50%; border-radius: 50%; } .PlanColumn-extra-benefits { border-top: 1px solid rgba(168,177,192,0.5); } .PlanColumn-extra-benefits li { list-style: none; padding: 0.5rem; } .PlanColumn-extra-benefits li:first-child { background: #e6f4fc; -webkit-border-radius: 8px; border-radius: 8px; margin-top: 0.75rem; } .PlanColumn-extra-benefits li div { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; text-align: left; } .PlanColumn-extra-benefits li div.benefit-text-wrapper { -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: start; align-items: start; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .PlanColumn-extra-benefits li div svg { display: none; margin-right: 0.5rem; } @media only screen and (min-width: 64em) { .PlanColumn-extra-benefits li div svg { display: initial; } } .PlanColumn-extra-benefits li div button { background: none; border: none; color: #0791e6; cursor: pointer; padding: 0.3125rem 0 0 0; } .is-dark-mode .PlanColumn-details { background-color: #24385b; } .is-dark-mode .PlanColumn-header { background: none; background-color: unset; } .is-dark-mode .PlanColumn-cost { color: #fff; } .is-dark-mode .PlanColumn-cost-symbol { color: #8da2c0; } .is-dark-mode .PlanColumn-title { background-color: #637b9d; } .is-dark-mode .PlanColumn-title h6 { color: #fff; } .is-dark-mode .PlanColumn-currency small { color: #becde3; } .is-dark-mode .PlanColumn-subtitle { color: #becde3; } .is-dark-mode .PlanColumn-subtitle-pay { color: #becde3; } .is-dark-mode .PlanColumn-subtitle-pay-price { color: #becde3; } .is-dark-mode .PlanColumn-subtitle-save { font-size: 14px; font-weight: bold; line-height: 1.57; letter-spacing: 0.25px; color: #fff; } .is-dark-mode .PlanColumn-row { border-bottom: 1px solid #40587c; } .is-dark-mode .PlanColumn-benefits-item { color: #becde3; } * { margin: 0; } a { color: #0791e6; } body { font-family: 'Lato', sans-serif; font-size: 16px; color: #273b47; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* #Iconografía */ /* Usamos iconos de https://icomoon.io solo agrega la clase del icono por ejemplo icon-search al elemento que lo necesite y listo. */ @font-face { font-family: 'icomoon'; src: url(https://static.platzi.com/static/css/icons.f869d0463c50f35127de110146383aec.eot); src: url(https://static.platzi.com/static/css/icons.f869d0463c50f35127de110146383aec.eot?#iefi9dtney) format('embedded-opentype'), url(https://static.platzi.com/static/css/icons.b7c65e4ef66326c8a320d0fb4a1fad43.woff) format('woff'), url(https://static.platzi.com/static/css/icons.4e6791871db114bcca17240cf7f47922.ttf) format('truetype'), url(https://static.platzi.com/static/css/icons.9abc781cf722134d3599dd5186bb3448.svg#icons) format('svg'); font-weight: normal; font-style: normal; } .fonts, [class^="icon-"]:before, [class*=" icon-"]:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: 'icomoon'; font-style: normal; font-variant: normal; font-weight: normal; speak: none; text-transform: none; } [class^="icon-"], [class*=" icon-"] { line-height: 100%; } .icon-mobile:before { content: "\E984"; } .icon-medal-b:before { content: "\E97F"; } .icon-ico-subtitled:before { content: "\E97D"; } .icon-ico-dubbed:before { content: "\E97E"; } .icon-rocket:before { content: "\E97C"; } .icon-star-empty:before { content: "\E979"; } .icon-pc:before { content: "\E97A"; } .icon-behance:before { content: "\E97B"; } .icon-bookmark:before { content: "\E975"; } .icon-new:before { content: "\E978"; } .icon-connect:before { content: "\E977"; } .icon-fcbk-square:before { content: "\E976"; } .icon-diseno:before { content: "\E96E"; } .icon-produccion-audiovisual:before { content: "\E96F"; } .icon-crecimiento-profesional:before { content: "\E970"; } .icon-desarrollo:before { content: "\E971"; } .icon-marketing:before { content: "\E972"; } .icon-negocios:before { content: "\E973"; } .icon-twt-square:before { content: "\E974"; } .icon-whatsapp:before { content: "\E980"; } .icon-whats-square:before { content: "\E975"; } .icon-crown_B:before { content: "\E966"; } .icon-cup_A:before { content: "\E96D"; } .icon-diploma-b:before { content: "\E963"; } .icon-board:before { content: "\E964"; } .icon-chart-b:before { content: "\E965"; } .icon-download-b:before { content: "\E967"; } .icon-invoice:before { content: "\E968"; } .icon-lock-b:before { content: "\E969"; } .icon-money-check:before { content: "\E96A"; } .icon-pause-b:before { content: "\E96B"; } .icon-astronaut:before { content: "\E96C"; } .icon-live-b:before { content: "\E962"; } .icon-arrow-right-b:before { content: "\E95A"; } .icon-teacher-board:before { content: "\E95B"; } .icon-cog1:before { content: "\E95C"; } .icon-comment:before { content: "\E95D"; } .icon-menu-ellipsis:before { content: "\E95E"; } .icon-eye-slash:before { content: "\E95F"; } .icon-newspaper:before { content: "\E960"; } .icon-thumbs-up-b:before { content: "\E961"; } .icon-theater-undone:before { content: "\E958"; } .icon-theater-do:before { content: "\E959"; } .icon-backward:before { content: "\E955"; } .icon-bug:before { content: "\E957"; } .icon-forward:before { content: "\E956"; } .icon-tickets:before { content: "\E953"; } .icon-shield:before { content: "\E954"; } .icon-name-circle:before { content: "\E951"; } .icon-mail-circle:before { content: "\E952"; } .icon-suitecase_B:before { content: "\E950"; } .icon-platzirank:before { content: "\E94F"; } .icon-search_B:before { content: "\E94E"; } .icon-pin_icon:before { content: "\E94D"; } .icon-rocket_ibm:before { content: "\E94C"; } .icon-cloud-smile:before { content: "\E94B"; } .icon-afternoon:before { content: "\E947"; } .icon-calendar:before { content: "\E948"; } .icon-morning:before { content: "\E949"; } .icon-night:before { content: "\E94A"; } .icon-plan-estudios:before { content: "\E946"; } .icon-platzimark:before { content: "\E945"; } .icon-intermedio .path1:before { content: "\E93E"; color: #3a3c3f; } .icon-intermedio .path2:before { content: "\E93F"; margin-left: -0.8125em; color: #3a3c3f; } .icon-intermedio .path3:before { content: "\E940"; margin-left: -0.8125em; color: #c0c0c0; } .icon-basico .path1:before { content: "\E941"; color: #3a3c3f; } .icon-basico .path2:before { content: "\E942"; margin-left: -0.8125em; color: #c0c0c0; } .icon-basico .path3:before { content: "\E943"; margin-left: -0.8125em; color: #c0c0c0; } .icon-avanzado:before { content: "\E944"; } .icon-texto2:before { content: "\E93A"; color: #696969; } .icon-lock2:before { content: "\E93D"; color: #696969; } .icon-blocked:before { content: "\E939"; color: #e9e9e9; } .icon-circular-check:before { content: "\E937"; color: #dfe0e6; } .icon-timeline-video:before { content: "\E936"; color: #dfe0e6; } .icon-texto:before { content: "\E938"; color: #dfe0e6; } .icon-events:before { content: "\E933"; color: #ff4842; } .icon-live:before { content: "\E934"; color: #7fc719; } .icon-courses:before { content: "\E932"; color: #0791e6; } .icon-star-circle:before { content: "\E935"; color: #fecc01; } .icon-external:before { content: "\E931"; } .icon-login:before { content: "\E930"; } .icon-save:before { content: "\E9D5"; } .icon-cast_connected:before { content: "\E92E"; } .icon-tool:before { content: "\E9D4"; } .icon-instagram:before { content: "\E9D3"; } .icon-cast:before { content: "\E92F"; } .icon-quiz:before { content: "\E92D"; } .icon-puzzle:before { content: "\E92C"; } .icon-gift_B:before { content: "\E92B"; } .icon-bold:before { content: "\F032"; } .icon-italic:before { content: "\F033"; } .icon-expand_A:before { content: "\F065"; } .icon-compress:before { content: "\F066"; } .icon-list-ol:before { content: "\F0CB"; } .icon-underline:before { content: "\F0CD"; } .icon-youtube-play:before { content: "\F16A"; } .icon-header:before { content: "\F1DC"; } .icon-user_B:before { content: "\E927"; } .icon-clock_B:before { content: "\E928"; } .icon-medal:before { content: "\E929"; } .icon-star_B:before { content: "\E92A"; } .icon-siguiente:before, .icon-next:before { content: "\E925"; } .icon-anterior:before, .icon-prev:before { content: "\E926"; } .icon-circle:before { content: "\E924"; } .icon-chart_B:before { content: "\E922"; } .icon-play:before { content: "\E91F"; } .icon-arrow-top-right:before { content: "\E920"; } .icon-dolar:before { content: "\E921"; } .icon-badge:before { content: "\E923"; } .icon-grid-world:before { content: "\E91C"; } .icon-check:before { content: "\E91A"; } .icon-delete:before { content: "\E91B"; } .icon-sadness:before { content: "\E916"; } .icon-gift-3:before { content: "\E91A"; } .icon-send-message:before { content: "\E919"; } .icon-plane:before { content: "\E919"; } .icon-referral_A:before { content: "\E917"; } .icon-referral_B:before { content: "\E918"; } .icon-responses:before { content: "\E915"; } .icon-trash:before { content: '\E907'; } .icon-icono_responder3:before { content: "\E913"; } .icon-thumbs-down:before { content: "\E906"; } .icon-thumbs-up:before { content: "\E914"; } .icon-unlink:before { content: '\E912'; } .icon-show-editor:before { content: '\E913'; } .icon-list:before { content: "\E910"; } .icon-image:before { content: "\E90E"; } .icon-code:before { content: "\E90F"; } .icon-information:before { content: "\E911"; } .icon-user-banned:before { content: "\E90D"; } .icon-quote:before { content: "\E90C"; } .icon-ytb_B:before { content: "\E90B"; } .icon-play_B:before { content: "\E908"; } .icon-flecha:before { content: "\E909"; } .icon-blog:before { content: "\E90A"; } .icon-ytb_B:before { content: "\E90B"; } .icon-calendar_C:before { content: "\E905"; } .icon-cup:before { content: "\E904"; } .icon-graduate:before { content: "\E903"; } .icon-both:before { content: "\E900"; } .icon-lecture:before { content: "\E901"; } .icon-player:before { content: "\E902"; } .icon-share:before { content: "\E800"; } .icon-notification:before { content: "\E66D"; } .icon-download:before { content: "\E66E"; } .icon-currencies:before { content: "\E66C"; } .icon-subscribe:before { content: "\E66B"; } .icon-creditcard:before { content: "\E663"; } .icon-calendar_B:before { content: "\E666"; } .icon-pointer:before { content: "\E66A"; } .icon-pause:before { content: "\E664"; } .icon-arrows:before { content: "\E661"; } .icon-cap:before { content: "\E65E"; } .icon-envivo:before { content: "\E665"; } .icon-streaming:before { content: "\E667"; } .icon-check_B:before { content: "\E007"; } .icon-doc_A:before { content: "\E653"; } .icon-notebook_A:before { content: "\E65F"; } .icon-suitecase:before { content: "\E659"; } .icon-doc:before { content: "\E660"; } /* ###.icon-bell */ /* */ .icon-bell:before { content: "\E655"; } /* ###.icon-cloud_A */ /* */ .icon-cloud_A:before { content: "\E657"; } /* ###.icon-cloud */ /* */ .icon-cloud:before { content: "\E658"; } /* ###.icon-cog */ /* */ .icon-cog:before { content: "\E656"; } /* ###.icon-user_B */ /* */ /* ###.icon-search */ /* */ .icon-search:before { content: "\E650"; } /* ###.icon-pin */ /* */ .icon-pin:before { content: "\E652"; } /* ###.icon-platzi */ /* */ .icon-platzi:before { content: "\E651"; } /* ###.icon-eye */ /* */ .icon-eye:before { content: "\E64F"; } /* ###.icon-at */ /* */ .icon-at:before { content: "\E64E"; } /* ###.icon-expand */ /* */ .icon-expand:before { content: "\E64B"; } /* ###.icon-retract */ /* */ .icon-retract:before { content: "\E64C"; } /* ###.icon-arrow-down_A */ /* */ .icon-arrow-down_A:before { content: "\E647"; } /* ###.icon-arrow-up-right_A */ /* */ .icon-arrow-up-right_A:before { content: "\EA3B"; } /* ###.icon-github */ /* */ .icon-github:before { content: "\EAB1"; } /* ###.icon-star */ /* */ .icon-star:before { content: "\E62F"; } /* ###.icon-close */ /* */ .icon-close:before { content: "\E624"; } /* ###.icon-close_A */ /* */ .icon-close_A:before { content: "\E630"; } /* ###.icon-exit */ /* */ .icon-exit:before { content: "\E631"; } /* ###.icon-fcbk */ /* */ .icon-fcbk:before { content: "\E600"; } /* ###.icon-twt */ /* */ .icon-twt:before { content: "\E601"; } /* ###.icon-discussions */ /* */ .icon-discussions:before { content: "\E645"; } /* ###.icon-files */ /* */ .icon-files:before { content: "\E646"; } /* ###.icon-notebook */ /* */ .icon-notebook:before { content: "\E63D"; } /* ###.icon-snowflake */ /* */ .icon-snowflake:before { content: "\E63C"; } /* ###.icon-gift_A */ /* */ .icon-gift_A:before { content: "\E639"; } /* ###.icon-heart */ /* */ .icon-heart:before { content: "\E978"; } /* ###.icon-users */ /* */ .icon-users:before { content: "\E63B"; } /* ###.icon-crown_A */ /* */ .icon-crown_A:before { content: "\E633"; } /* ###.icon-tree */ /* */ .icon-tree:before { content: "\E634"; } /* ###.icon-user */ /* */ .icon-user:before { content: "\E91E"; } /* ###.icon-check_A */ /* */ .icon-check_A:before { content: "\E636"; } /* ###.icon-poster */ /* */ .icon-poster:before { content: "\E637"; } /* ###.icon-workshop */ /* */ .icon-workshop:before { content: "\E638"; } /* ###.icon-reply */ /* */ .icon-reply:before { content: "\E632"; } /* ###.icon-smile */ /* */ .icon-smile:before { content: "\E62D"; } /* ###.icon-goole-plus_A */ /* */ .icon-google-plus_A:before { content: "\E627"; } /* ###.icon-lnkdn */ /* */ .icon-lnkdn:before { content: "\E628"; } /* ###.icon-skype_A */ /* */ .icon-skype_A:before { content: "\E629"; } /* ###.icon-fcbk-square */ /* */ /* ###.icon-email */ /* */ .icon-email:before { content: "\E62B"; } /* ###.icon-plus */ /* */ .icon-plus:before { content: "\E62C"; } /* ###.icon-micro */ /* */ .icon-micro:before { content: "\E626"; } /* ###.icon-alert */ /* */ .icon-alert:before { content: "\E625"; } /* ###.icon-card */ /* */ .icon-card:before { content: "\E621"; } /* ###.icon-chart */ /* */ .icon-chart:before { content: "\E622"; } /* ###.icon-bill */ /* */ .icon-bill:before { content: "\E623"; } /* ###.icon-calendar */ /* */ /* ###.icon-money */ /* */ .icon-money:before { content: "\E61D"; } /* ###.icon-lock */ /* */ .icon-lock:before { content: "\E61E"; } /* ###.icon-cart */ /* */ .icon-cart:before { content: "\E61F"; } /* ###.icon-twt_A */ /* */ .icon-twt_A:before { content: "\E61C"; } /* ###.icon-skype */ /* */ .icon-skype:before { content: "\E606"; } /* ###.icon-gift */ /* */ .icon-gift:before { content: "\E60F"; } /* ###.icon-fcbk_A */ /* */ .icon-fcbk_A:before { content: "\E91D"; } /* ###.icon-phone_A */ /* */ .icon-phone_A:before { content: "\E604"; } /* ###.icon-phone */ /* */ .icon-phone:before { content: "\E605"; } /* ###.icon-googleplus */ /* */ .icon-googleplus:before { content: "\E607"; } /* ###.icon-ytb */ /* */ .icon-ytb:before { content: "\E608"; } /* ###.icon-enie */ /* */ .icon-enie:before { content: "\E609"; } /* ###.icon-arrow_bottom */ /* */ .icon-arrow_bottom:before { content: "\E60A"; } /* ###.icon-brain */ /* */ .icon-brain:before { content: "\E60B"; } /* ###.icon-video */ /* */ .icon-video:before { content: "\E60C"; } /* ###.icon-crown */ /* */ .icon-crown:before { content: "\E60D"; } /* ###.icon-diploma */ /* */ .icon-diploma:before { content: "\E60E"; } /* ###.icon-line_chat */ /* */ .icon-line_chart:before { content: "\E610"; } /* ###.icon-clock_A */ /* */ .icon-clock_A:before { content: "\E611"; } /* ###.icon-gear */ /* */ .icon-gear:before { content: "\E612"; } /* ###.icon-pencil */ /* */ .icon-pencil:before { content: "\E613"; } /* ###.icon-play_A */ /* */ .icon-play_A:before { content: "\E614"; } /* ###.icon-mooon */ /* */ .icon-moon:before { content: "\E615"; } /* ###.icon-mic */ /* */ .icon-mic:before { content: "\E616"; } /* ###.icon-sun */ /* */ .icon-sun:before { content: "\E617"; } /* ###.icon-clock */ /* */ .icon-clock:before { content: "\E618"; } /* ###.icon-arrow-right */ /* */ .icon-arrow-right:before { content: "\E619"; } /* ###.icon-marker */ /* */ .icon-marker:before { content: "\E61A"; } /* ###.icon-play */ /* */ .icon-minus_A:before { content: "\E648"; } /* ###.icon-plus_A */ /* */ .icon-plus_A:before { content: "\E649"; } /* ###.icon-cross */ /* */ .icon-cross:before { content: "\E64A"; } /* ###.icon-warning */ /* */ .icon-warning:before { content: "\E63E"; } /* ###.icon-arrow-down */ /* */ .icon-arrow-down:before { content: "\E63F"; } /* ###.icon-arrow-up */ /* */ .icon-arrow-up:before { content: "\E640"; } /* ###.icon-house */ /* */ .icon-house:before { content: "\E641"; } /* ###.icon-link */ /* */ .icon-link:before { content: "\E642"; } /* ###.icon-arrow-left_A */ /* */ .icon-arrow-left_A:before { content: "\E643"; } /* ###.icon-arrow-right_A */ /* */ .icon-arrow-right_A:before { content: "\E644"; } /* ###.icon-menu */ /* */ .icon-menu:before { content: "\E602"; } /* ###.icon-user_A */ /* */ .icon-user_A:before { content: "\E64D"; } .icon-picture_in_picture_alt:before { content: "\E981"; } .icon-headphones:before { content: "\E982"; } .icon-reload:before { content: "\E983"; } .icon-dashboard:before { content: "\E985"; color: #0484d3; } .icon-linkedin:before { content: "\E986"; color: #0077b5; } @font-face { font-family: 'Bebas Neue'; src: url(https://static.platzi.com/static/css/bebasneue_regular-webfont.2ee1ec9cddf1ca54345436c4e7848ebc.eot); src: url(https://static.platzi.com/static/css/bebasneue_regular-webfont.2ee1ec9cddf1ca54345436c4e7848ebc.eot?#iefix) format('embedded-opentype'), url(https://static.platzi.com/static/css/bebasneue_regular-webfont.58001b2920a0ba974ad25181579ca08e.woff) format('woff'), url(https://static.platzi.com/static/css/bebasneue_regular-webfont.bbdf2ed4dd4172f66e06437f30f32385.ttf) format('truetype'), url(https://static.platzi.com/static/css/bebasneue_regular-webfont.1a75e93f40c5fbb5c75813bec57f7c3f.svg#bebas_neue_regularregular) format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Bebas Neue'; src: url(https://static.platzi.com/static/css/bebasneue_bold-webfont.705c630c1a92308ba1524165b13279d1.eot); src: url(https://static.platzi.com/static/css/bebasneue_bold-webfont.705c630c1a92308ba1524165b13279d1.eot?#iefix) format('embedded-opentype'), url(https://static.platzi.com/static/css/bebasneue_bold-webfont.314446403a69618dcc38d273442c8d99.woff) format('woff'), url(https://static.platzi.com/static/css/bebasneue_bold-webfont.0afc4669e026f83b94b169a43c93e851.ttf) format('truetype'), url(https://static.platzi.com/static/css/bebasneue_bold-webfont.0b0294e096918ad7ac023502093b807b.svg#bebas_neuebold) format('svg'); font-weight: bold; font-style: normal; } /* #Botones */ /* + **Todos** los botones heredan de un boton básico que es muy parecido al ``` .btn-Gray ``` + Los botones pueden contener un tag ``` texto ``` si deseas un tachado en el boton, ten en cuenta esta funcionalidad para cualquier tag que no sea un ``````. _No puedes poner más tag dentro de elementos de fomulario_ */ /* */ .Twt-Login { margin-right: 20px; } .btn, .btn-Gray, .btn-gray, .btn-White, .btn-white, .btn-Green, .btn-green, .btn-Yellow, .btn-yellow, .btn-Orange, .btn-orange, .btn-Sky, .btn-sky, .btn-Red, .btn-red, .btn-Purple, .btn-purple, .btn-Black, .btn-black, .btn-fcbk, .btn-twt, .btn-ytb, .btn-lkd { background-color: #d3d3d3; border: none; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #fff; cursor: pointer; display: inline-block; font-family: 'Lato', sans-serif; font-size: 13px; padding: 8px 0.8em 6px 0.8em; text-decoration: none; -moz-user-select: none; -ms-user-select: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; -ms-transition: 0.2s; transition: 0.2s; vertical-align: middle; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; } .btn:before, .btn-Gray:before, .btn-gray:before, .btn-White:before, .btn-white:before, .btn-Green:before, .btn-green:before, .btn-Yellow:before, .btn-yellow:before, .btn-Orange:before, .btn-orange:before, .btn-Sky:before, .btn-sky:before, .btn-Red:before, .btn-red:before, .btn-Purple:before, .btn-purple:before, .btn-Black:before, .btn-black:before, .btn-fcbk:before, .btn-twt:before, .btn-ytb:before, .btn-lkd:before { margin-right: 10px; vertical-align: middle; } .btn:empty:before, .btn-Gray:empty:before, .btn-gray:empty:before, .btn-White:empty:before, .btn-white:empty:before, .btn-Green:empty:before, .btn-green:empty:before, .btn-Yellow:empty:before, .btn-yellow:empty:before, .btn-Orange:empty:before, .btn-orange:empty:before, .btn-Sky:empty:before, .btn-sky:empty:before, .btn-Red:empty:before, .btn-red:empty:before, .btn-Purple:empty:before, .btn-purple:empty:before, .btn-Black:empty:before, .btn-black:empty:before, .btn-fcbk:empty:before, .btn-twt:empty:before, .btn-ytb:empty:before, .btn-lkd:empty:before { margin-right: 0; } .btn:hover, .btn-Gray:hover, .btn-gray:hover, .btn-White:hover, .btn-white:hover, .btn-Green:hover, .btn-green:hover, .btn-Yellow:hover, .btn-yellow:hover, .btn-Orange:hover, .btn-orange:hover, .btn-Sky:hover, .btn-sky:hover, .btn-Red:hover, .btn-red:hover, .btn-Purple:hover, .btn-purple:hover, .btn-Black:hover, .btn-black:hover, .btn-fcbk:hover, .btn-twt:hover, .btn-ytb:hover, .btn-lkd:hover, .btn:focus, .btn-Gray:focus, .btn-gray:focus, .btn-White:focus, .btn-white:focus, .btn-Green:focus, .btn-green:focus, .btn-Yellow:focus, .btn-yellow:focus, .btn-Orange:focus, .btn-orange:focus, .btn-Sky:focus, .btn-sky:focus, .btn-Red:focus, .btn-red:focus, .btn-Purple:focus, .btn-purple:focus, .btn-Black:focus, .btn-black:focus, .btn-fcbk:focus, .btn-twt:focus, .btn-ytb:focus, .btn-lkd:focus { background-color: #000; } .btn:active, .btn-Gray:active, .btn-gray:active, .btn-White:active, .btn-white:active, .btn-Green:active, .btn-green:active, .btn-Yellow:active, .btn-yellow:active, .btn-Orange:active, .btn-orange:active, .btn-Sky:active, .btn-sky:active, .btn-Red:active, .btn-red:active, .btn-Purple:active, .btn-purple:active, .btn-Black:active, .btn-black:active, .btn-fcbk:active, .btn-twt:active, .btn-ytb:active, .btn-lkd:active { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } .btn strike, .btn-Gray strike, .btn-gray strike, .btn-White strike, .btn-white strike, .btn-Green strike, .btn-green strike, .btn-Yellow strike, .btn-yellow strike, .btn-Orange strike, .btn-orange strike, .btn-Sky strike, .btn-sky strike, .btn-Red strike, .btn-red strike, .btn-Purple strike, .btn-purple strike, .btn-Black strike, .btn-black strike, .btn-fcbk strike, .btn-twt strike, .btn-ytb strike, .btn-lkd strike { font-weight: normal; font-size: 0.8em; position: relative; bottom: 0.1em; } .btn.btn--full-width, .btn-Gray.btn--full-width, .btn-gray.btn--full-width, .btn-White.btn--full-width, .btn-white.btn--full-width, .btn-Green.btn--full-width, .btn-green.btn--full-width, .btn-Yellow.btn--full-width, .btn-yellow.btn--full-width, .btn-Orange.btn--full-width, .btn-orange.btn--full-width, .btn-Sky.btn--full-width, .btn-sky.btn--full-width, .btn-Red.btn--full-width, .btn-red.btn--full-width, .btn-Purple.btn--full-width, .btn-purple.btn--full-width, .btn-Black.btn--full-width, .btn-black.btn--full-width, .btn-fcbk.btn--full-width, .btn-twt.btn--full-width, .btn-ytb.btn--full-width, .btn-lkd.btn--full-width { width: 100%; } .btn.is-normal, .btn-Gray.is-normal, .btn-gray.is-normal, .btn-White.is-normal, .btn-white.is-normal, .btn-Green.is-normal, .btn-green.is-normal, .btn-Yellow.is-normal, .btn-yellow.is-normal, .btn-Orange.is-normal, .btn-orange.is-normal, .btn-Sky.is-normal, .btn-sky.is-normal, .btn-Red.is-normal, .btn-red.is-normal, .btn-Purple.is-normal, .btn-purple.is-normal, .btn-Black.is-normal, .btn-black.is-normal, .btn-fcbk.is-normal, .btn-twt.is-normal, .btn-ytb.is-normal, .btn-lkd.is-normal { font-weight: 400; } .btn.is-light, .btn-Gray.is-light, .btn-gray.is-light, .btn-White.is-light, .btn-white.is-light, .btn-Green.is-light, .btn-green.is-light, .btn-Yellow.is-light, .btn-yellow.is-light, .btn-Orange.is-light, .btn-orange.is-light, .btn-Sky.is-light, .btn-sky.is-light, .btn-Red.is-light, .btn-red.is-light, .btn-Purple.is-light, .btn-purple.is-light, .btn-Black.is-light, .btn-black.is-light, .btn-fcbk.is-light, .btn-twt.is-light, .btn-ytb.is-light, .btn-lkd.is-light { font-weight: 300; } /* # Botón Gris */ .btn-Gray, .btn-gray { background: -webkit-linear-gradient(right, #d3d3d3 0%, #d3d3d3 50%, #d7d7d7 100%); background: -moz-linear-gradient(right, #d3d3d3 0%, #d3d3d3 50%, #d7d7d7 100%); background: -o-linear-gradient(right, #d3d3d3 0%, #d3d3d3 50%, #d7d7d7 100%); background: -ms-linear-gradient(right, #d3d3d3 0%, #d3d3d3 50%, #d7d7d7 100%); background: linear-gradient(to left, #d3d3d3 0%, #d3d3d3 50%, #d7d7d7 100%); color: #808080; -webkit-box-shadow: 0 1px 1px 0 #bdbdbd; box-shadow: 0 1px 1px 0 #bdbdbd; } .btn-Gray:hover, .btn-gray:hover, .btn-Gray:focus, .btn-gray:focus { color: #fff; -webkit-box-shadow: 0 2px 13px 0 rgba(189,189,189,0.49); box-shadow: 0 2px 13px 0 rgba(189,189,189,0.49); } /* # Botón Blanco */ .btn-White, .btn-white { background-color: #fff; color: #696969; -webkit-box-shadow: 0 1px 1px 0 #e5e5e5; box-shadow: 0 1px 1px 0 #e5e5e5; } .btn-White:hover, .btn-white:hover, .btn-White:focus, .btn-white:focus { background: #fff; -webkit-box-shadow: 0 2px 13px 0 rgba(229,229,229,0.49); box-shadow: 0 2px 13px 0 rgba(229,229,229,0.49); } /* # Botón verde */ .btn-Green, .btn-green { background: -webkit-linear-gradient(right, #95ca3e 0%, #95ca3e 50%, #85c638 100%); background: -moz-linear-gradient(right, #95ca3e 0%, #95ca3e 50%, #85c638 100%); background: -o-linear-gradient(right, #95ca3e 0%, #95ca3e 50%, #85c638 100%); background: -ms-linear-gradient(right, #95ca3e 0%, #95ca3e 50%, #85c638 100%); background: linear-gradient(to left, #95ca3e 0%, #95ca3e 50%, #85c638 100%); -webkit-box-shadow: 0 1px 1px 0 #58902d; box-shadow: 0 1px 1px 0 #58902d; } .btn-Green:hover, .btn-green:hover, .btn-Green:focus, .btn-green:focus { -webkit-box-shadow: 0 2px 13px 0 rgba(88,144,45,0.49); box-shadow: 0 2px 13px 0 rgba(88,144,45,0.49); color: #fff; } /* # Botón amarillo */ .btn-Yellow, .btn-yellow { background: -webkit-linear-gradient(right, #fecc01 0%, #fecc01 50%, #fed11a 100%); background: -moz-linear-gradient(right, #fecc01 0%, #fecc01 50%, #fed11a 100%); background: -o-linear-gradient(right, #fecc01 0%, #fecc01 50%, #fed11a 100%); background: -ms-linear-gradient(right, #fecc01 0%, #fecc01 50%, #fed11a 100%); background: linear-gradient(to left, #fecc01 0%, #fecc01 50%, #fed11a 100%); color: color-brown; -webkit-box-shadow: 0 1px 1px 0 #e4b700; box-shadow: 0 1px 1px 0 #e4b700; } .btn-Yellow:hover, .btn-yellow:hover, .btn-Yellow:focus, .btn-yellow:focus { -webkit-box-shadow: 0 2px 13px 0 rgba(228,183,0,0.49); box-shadow: 0 2px 13px 0 rgba(228,183,0,0.49); } /* # Botón naranja */ .btn-Orange, .btn-orange { background: -webkit-linear-gradient(right, #ff7020 0%, #ff7020 50%, #ff6f1f 100%); background: -moz-linear-gradient(right, #ff7020 0%, #ff7020 50%, #ff6f1f 100%); background: -o-linear-gradient(right, #ff7020 0%, #ff7020 50%, #ff6f1f 100%); background: -ms-linear-gradient(right, #ff7020 0%, #ff7020 50%, #ff6f1f 100%); background: linear-gradient(to left, #ff7020 0%, #ff7020 50%, #ff6f1f 100%); -webkit-box-shadow: 0 1px 1px 0 #ec621c; box-shadow: 0 1px 1px 0 #ec621c; } .btn-Orange:hover, .btn-orange:hover, .btn-Orange:focus, .btn-orange:focus { -webkit-box-shadow: 0 2px 13px 0 rgba(236,98,28,0.5); box-shadow: 0 2px 13px 0 rgba(236,98,28,0.5); } /* # Botón cielo */ .btn-Sky, .btn-sky { background: -webkit-linear-gradient(right, #0684d3 0%, #0684d3 50%, #0790e4 100%); background: -moz-linear-gradient(right, #0684d3 0%, #0684d3 50%, #0790e4 100%); background: -o-linear-gradient(right, #0684d3 0%, #0684d3 50%, #0790e4 100%); background: -ms-linear-gradient(right, #0684d3 0%, #0684d3 50%, #0790e4 100%); background: linear-gradient(to left, #0684d3 0%, #0684d3 50%, #0790e4 100%); -webkit-box-shadow: 0 1px 1px 0 #0474ba; box-shadow: 0 1px 1px 0 #0474ba; } .btn-Sky:hover, .btn-sky:hover, .btn-Sky:focus, .btn-sky:focus { -webkit-box-shadow: 0 2px 13px 0 rgba(4,116,186,0.5); box-shadow: 0 2px 13px 0 rgba(4,116,186,0.5); } /* #Botón Rojo */ /* */ .btn-Red, .btn-red { background: -webkit-linear-gradient(right, #e43f39 0%, #e43f39 50%, #e12a24 100%); background: -moz-linear-gradient(right, #e43f39 0%, #e43f39 50%, #e12a24 100%); background: -o-linear-gradient(right, #e43f39 0%, #e43f39 50%, #e12a24 100%); background: -ms-linear-gradient(right, #e43f39 0%, #e43f39 50%, #e12a24 100%); background: linear-gradient(to left, #e43f39 0%, #e43f39 50%, #e12a24 100%); -webkit-box-shadow: 0 1px 1px 0 #e12a24; box-shadow: 0 1px 1px 0 #e12a24; } .btn-Red:hover, .btn-red:hover, .btn-Red:focus, .btn-red:focus { -webkit-box-shadow: 0 2px 13px 0 rgba(225,42,36,0.5); box-shadow: 0 2px 13px 0 rgba(225,42,36,0.5); } /* */ /* #Botón purpura */ .btn-Purple, .btn-purple { background: -webkit-linear-gradient(right, color-purple 0%, color-purple 50%, #e222a0 100%); background: -moz-linear-gradient(right, color-purple 0%, color-purple 50%, #e222a0 100%); background: -o-linear-gradient(right, color-purple 0%, color-purple 50%, #e222a0 100%); background: -ms-linear-gradient(right, color-purple 0%, color-purple 50%, #e222a0 100%); background: linear-gradient(to left, color-purple 0%, color-purple 50%, #e222a0 100%); -webkit-box-shadow: 0 1px 1px 0 #c80987; box-shadow: 0 1px 1px 0 #c80987; } .btn-Purple:hover, .btn-purple:hover, .btn-Purple:focus, .btn-purple:focus { -webkit-box-shadow: 0 2px 13px 0 rgba(200,9,135,0.5); box-shadow: 0 2px 13px 0 rgba(200,9,135,0.5); } /* #Botón negro */ .btn-Black, .btn-black { background: -webkit-linear-gradient(right, #1c3643 0%, #273b47 50%, #2d3723 100%); background: -moz-linear-gradient(right, #1c3643 0%, #273b47 50%, #2d3723 100%); background: -o-linear-gradient(right, #1c3643 0%, #273b47 50%, #2d3723 100%); background: -ms-linear-gradient(right, #1c3643 0%, #273b47 50%, #2d3723 100%); background: linear-gradient(to left, #1c3643 0%, #273b47 50%, #2d3723 100%); -webkit-box-shadow: 0 1px 1px 0 #131d09; box-shadow: 0 1px 1px 0 #131d09; } .btn-Black:hover, .btn-black:hover, .btn-Black:focus, .btn-black:focus { -webkit-box-shadow: 0 2px 13px 0 rgba(19,29,9,0.5); box-shadow: 0 2px 13px 0 rgba(19,29,9,0.5); } /* ##Botones especiales */ /* #Botón Facebook */ .btn-fcbk { background: -webkit-linear-gradient(right, #3b5999 0%, #3b5999 50%, #4e69a3 100%); background: -moz-linear-gradient(right, #3b5999 0%, #3b5999 50%, #4e69a3 100%); background: -o-linear-gradient(right, #3b5999 0%, #3b5999 50%, #4e69a3 100%); background: -ms-linear-gradient(right, #3b5999 0%, #3b5999 50%, #4e69a3 100%); background: linear-gradient(to left, #3b5999 0%, #3b5999 50%, #4e69a3 100%); -webkit-box-shadow: 0 1px 1px 0 #355089; box-shadow: 0 1px 1px 0 #355089; } .btn-fcbk:hover, .btn-fcbk:focus { -webkit-box-shadow: 0 2px 13px 0 rgba(53,80,137,0.5); box-shadow: 0 2px 13px 0 rgba(53,80,137,0.5); } /* #Botón Twitter */ .btn-twt { background: -webkit-linear-gradient(right, #60a9de 0%, #60a9de 50%, #6fb1e1 100%); background: -moz-linear-gradient(right, #60a9de 0%, #60a9de 50%, #6fb1e1 100%); background: -o-linear-gradient(right, #60a9de 0%, #60a9de 50%, #6fb1e1 100%); background: -ms-linear-gradient(right, #60a9de 0%, #60a9de 50%, #6fb1e1 100%); background: linear-gradient(to left, #60a9de 0%, #60a9de 50%, #6fb1e1 100%); -webkit-box-shadow: 0 1px 1px 0 #5698c7; box-shadow: 0 1px 1px 0 #5698c7; } .btn-twt:hover, .btn-twt:focus { -webkit-box-shadow: 0 2px 13px 0 rgba(86,152,199,0.5); box-shadow: 0 2px 13px 0 rgba(86,152,199,0.5); } /* #Botón YouTube */ .btn-ytb { background: -webkit-linear-gradient(right, #e52c26 0%, #e52c26 50%, #e7413b 100%); background: -moz-linear-gradient(right, #e52c26 0%, #e52c26 50%, #e7413b 100%); background: -o-linear-gradient(right, #e52c26 0%, #e52c26 50%, #e7413b 100%); background: -ms-linear-gradient(right, #e52c26 0%, #e52c26 50%, #e7413b 100%); background: linear-gradient(to left, #e52c26 0%, #e52c26 50%, #e7413b 100%); -webkit-box-shadow: 0 1px 1px 0 #ce2722; box-shadow: 0 1px 1px 0 #ce2722; } .btn-ytb:hover, .btn-ytb:focus { -webkit-box-shadow: 0 2px 13px 0 rgba(206,39,34,0.5); box-shadow: 0 2px 13px 0 rgba(206,39,34,0.5); } .btn-lkd { background: -webkit-linear-gradient(right, #007bb5 0%, #007bb5 50%, #007bb5 100%); background: -moz-linear-gradient(right, #007bb5 0%, #007bb5 50%, #007bb5 100%); background: -o-linear-gradient(right, #007bb5 0%, #007bb5 50%, #007bb5 100%); background: -ms-linear-gradient(right, #007bb5 0%, #007bb5 50%, #007bb5 100%); background: linear-gradient(to left, #007bb5 0%, #007bb5 50%, #007bb5 100%); -webkit-box-shadow: 0 1px 1px 0 #007bb5; box-shadow: 0 1px 1px 0 #007bb5; } .btn-lkd:hover, .btn-lkd:focus { -webkit-box-shadow: 0 2px 13px 0 rgba(0,123,181,0.5); box-shadow: 0 2px 13px 0 rgba(0,123,181,0.5); } .btn-lkd > .icon-linkedin:before { color: #fff; } /* #Modificadores en Botones */ /* Los modificadores son clases adicionales que van a modificar el estilo base de un botón y tienen la peculiaridad de tener dos guiones en su nombre de clase. */ /* #Botón circular */ /* Cualquier tipo de botón puede ser completamente redondeado con la clase .btn--rounded */ .btn--rounded { border: none; -webkit-border-radius: 50%; border-radius: 50%; height: 50px; line-height: 50px; width: 50px; text-align: center; margin-left: 15px; padding: 0; } .btn--rounded:before { border: none !important; margin: 0 !important; padding: 0 !important; } .btn--disabled { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; -webkit-filter: alpha(opacity=50); -moz-filter: alpha(opacity=50); -ms-filter: alpha(opacity=50); -o-filter: alpha(opacity=50); filter: alpha(opacity=50); cursor: not-allowed; } /* #Botón en mayusculas */ .btn--uppercase { text-transform: uppercase; } /* #Botón con texto blanco */ /* Si tienes un boton preconfigurado con otro color de texto puedes forzarlo a que sea blanco con este modificador. */ /* */ .btn--white { color: #fff; } .btn--white:hover, .btn--white:focus { color: #fff; } /* #Tamaños de botón */ /* El botn por defecto (sin los siguiente modificadores) es considerado el pequeño, */ /* ## Boton Pequeño */ /* ## Boton Mediano */ .btn--medium, .btn--md { font-size: 1rem; padding: 9px 0.8em 10px 0.8em; } /* ## Boton Grande */ .btn--big { font-size: 18px; padding: 11px 0.8em 12px 0.8em; } /* ## Boton Grande responsive */ /* El botón grande puede tomar el tamaños de un botón pequeño en viewports de 767px a menos es decir más pequeño que un ipad en vertical. ** usa el boton de la barra inferior con icono de tablet ver el efecto ** */ /* */ @media only screen and (max-width: 767px) { .btn--big.btn--responsive, .btn--medium.btn--responsive { font-size: 0.85em; } } /* #Botones con iconos */ /* Todos los botones pueden tener iconos de clase o iconos en es recomendable poner el texto en un span para tener centrado verticalmente todo el contenido */ /* */ /* #Botones con linea intermedia e iconos */ /* Todos los botones pueden tener iconos de clase o iconos en es recomendable poner el texto en un span para tener centrado verticalmente todo el contenido */ /* */ .icon--right { margin-left: 1rem; } .icon--line, .icon--left { margin-right: 0.5em; } .btn-icon--medium { font-size: 1.5em; } .btn--icon:before { margin-right: 0; } .btn-corner-right-orange { position: relative; font-size: 12px; } .btn-corner-right-orange:after { border-bottom: 27.5px solid transparent; border-right: 27.5px solid #ff7f38; content: ""; right: 0; position: absolute; top: 0; z-index: 1; } .btn-corner-right-orange:before { color: #fff; right: 2.5px; position: absolute; top: 2.5px; font-size: 10px; z-index: 2; } @media only screen and (max-width: 320px) { .SocialButton-Login { margin: 0 auto; min-width: 160px; } .Twt-Login { margin-bottom: 10px; } } /* #Links */ /* ## Link Rojo link rojo */ a.link-red { color: #ff4842; } a.link-red:hover { color: #98ca3f; } /* ## Link Verde link verde */ a.link-green { color: #98ca3f; } a.link-green:hover { color: #ff4842; } /* #Títulos */ /* creo que no fueron tan buena idea así que recomiedo no usarlos */ /* ##Título A

Título A

*/ .title-A { font-size: 36px; font-weight: bold; } /* ##Título B

Título B

*/ .title-B { font-size: 26px; } /* ##Título C

Título C

*/ .title-C { border-bottom: 1px solid #1c3643; display: inline-block; font-size: 32px; padding-bottom: 10px; text-align: center; } @media only screen and (max-width: 767px) { .title-C { font-size: 21px; } } .title-Main { font-size: 65px; } /* #Utilidades Las utilidades existen en todo el sitio y como su nombre lo dices son de uso fácil y ayudan a hacer cosas rutinarias de UI en las que no queremos repetir estilos sino heredar. + Las utilidades empiezan SIEMPRE con .u- + Las utilidades se instancian antes de los estilos de componentes */ /* #u-left Flota un elemento a la izquierda */ /*
izquierda
*/ .u-left { float: left; } /* #u-right Flota un elemento a la derecha */ /*
derecha
*/ .u-floatRight, .u-right { float: right; } /* #u-clearfix Si estas usando floats, será muy común usar .u-clearfix sobre el padre directo */ /* ## sin clearfix
izquierda
derecha
*/ /* ## con clearfix
izquierda
derecha
*/ .u-clearfix { zoom: 1; } .u-clearfix:before, .u-clearfix:after { content: ""; display: table; } .u-clearfix:after { clear: both; } /* #.u-uppercase Coloca los textos en mayusculas

Esto es un texto en mayusculas

*/ .u-uppercase { text-transform: uppercase; } /* #.u-wrapper Platzi tiene por lo general contenedores a 1000px pero uno general no es suficiente y ahi es donde u-wrapper brillará */ /*

Este es el background se una sección importante

Este es el contenido de la sección importante

Este es el background se otra sección importante

Este es el contenido de la sección importante
*/ .u-grid-wrapper { max-width: 1024px; margin: 0 auto; padding: 0 15px; } .u-row-wrapper { max-width: 1024px; margin: 0 auto !important; } .u-wrapper, .u-wrapper_A, .u-wrapper_B { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 auto !important; max-width: 1200px; padding: 0 0.5em; position: relative; } /* #.u-wrapper_A Es un contenedor orientado a tablets */ /*

Este es el background se una sección importante

Este es el contenido de la sección importante

Este es el background se otra sección importante

Este es el contenido de la sección importante
*/ .u-wrapper_A { max-width: 768px; } /* #.u-wrapper_B Es un contenedor orientado a moviles */ /*

Este es el background se una sección importante

Este es el contenido de la sección importante

Este es el background se otra sección importante

Este es el contenido de la sección importante
*/ .u-wrapper_B { max-width: 340px; } /* u-verticalCenter + u-verticalContent */ /*
contenido centrado verticalment
*/ .u-verticalCenter { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: table; width: 100%; } .u-verticalContent { display: table-cell; vertical-align: middle; } /* #.u-inlineCenter Coloca a los hijos directos con display inline-block y los alinea verticalmente */ /*

platzi :)

*/ .u-inlineCenter > * { vertical-align: middle; display: inline-block; } .u-textLeft { text-align: left; } .u-textCenter { text-align: center; } .u-flexBetween { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .u-flexAround { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: distribute; -moz-box-pack: distribute; -o-box-pack: distribute; -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; } .u-alignCenter { -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .u-marginLeft { margin-left: 0.5em; } .u-videoWrapper { position: relative; padding-bottom: 56.25% /* 16:9 */; height: 0; } .u-videoSource { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; } .u-hr { border-top-color: #1c3643; } .u-lightText { font-weight: 300; } .Login { background: #232426; color: #fff; height: 0; overflow: hidden; padding: 0; text-align: center; -webkit-transition: height 0.5s ease-out, padding 0.5s ease-out; -moz-transition: height 0.5s ease-out, padding 0.5s ease-out; -o-transition: height 0.5s ease-out, padding 0.5s ease-out; -ms-transition: height 0.5s ease-out, padding 0.5s ease-out; transition: height 0.5s ease-out, padding 0.5s ease-out; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .Login-callback { display: none; } .Login-content * { margin-right: 15px; } .Login-content *:last-child { margin-right: 0; } .Login-callback:checked ~ .Login, .Login.is-show { height: 115px; padding: 0 10px; } .Login-copy { border-left: 1px solid #fff; display: inline-block; font-size: 19px; font-weight: bold; padding: 15px; } @media only screen and (max-width: 1100px) { .Login-copy { font-size: 16px; padding: 15px 10px; } .Login [class^="btn"], .Login [class*=" btn"] { font-size: 16px; } } @media only screen and (max-width: 800px) { .Login-copy { display: block; padding: 10px 0; border-left: none; margin: 0 auto 10px; } .Login-callback:checked ~ .Login, .Login.is-show { height: 210px; } .Login [class^="btn"], .Login [class*=" btn"] { display: block; margin: 0 auto 10px; max-width: 250px; text-align: left; } } .MainMenu { float: right; } .MainMenu-modal { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } @media only screen and (min-width: 1087px) { .MainMenu-modal:hover { border-top: 5px solid #ff4842; } } .MainMenu-link { display: block; padding: 15px 13px; color: #fff; text-decoration: none; -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; -ms-transition: 0.2s; transition: 0.2s; } .MainMenu-btn { padding: 5px 0; border-top: 5px solid transparent; } .MainMenu-btn.desktop { display: none; } @media only screen and (min-width: 1087px) { .MainMenu-btn.desktop { display: inline-block; } } .MainMenu-btn.mobile { padding: 0; border: 0; } @media only screen and (min-width: 1087px) { .MainMenu-btn.mobile { padding: 5px 0; border-top: 5px; display: none; } } .MainMenu-callback { display: none; } .MainMenu-container { font-size: 0; line-height: 0; padding: 0; text-align: right; } .MainMenu-option { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #fff; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 600; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); font-family: 'Open Sans', Arial; line-height: 16px; position: relative; vertical-align: top; } .MainMenu-option.is_sticky_mobile { display: none; } .MainMenu-option.is_sticky { text-decoration: underline; text-decoration-color: #98ca3f; } .MainMenu-option.is_sticky .MainMenu-link { color: #98ca3f; } .MainMenu-option.show-modal { position: relative; } @media only screen and (max-width: 1087px) { .MainMenu { display: none; overflow: hidden; -webkit-transition: height 0.5s ease-out; -moz-transition: height 0.5s ease-out; -o-transition: height 0.5s ease-out; -ms-transition: height 0.5s ease-out; transition: height 0.5s ease-out; width: calc(100% + 30px); margin-left: -15px; float: none; } .MainMenu-container { background: #141d24; margin: 0; padding: 0; } .MainMenu-callback:checked ~ .MainMenu { display: block; } .MainMenu-loged:checked ~ .MainMenu { display: block; } .MainMenu-option { display: block; text-align: center; } .MainMenu-option.is_sticky_mobile { display: block; } } @media only screen and (min-width: 1087px) { .MainMenu .line:before { height: 1.5em; border-right: 1px solid #fff; content: ''; position: absolute; top: 17px; right: 0; } .MainMenu-link { border-top: 5px solid transparent; } .MainMenu-link:hover { border-top: 5px solid #ff4842; } } .LanguageSelect { height: 100%; position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .LanguageSelect input { background: #000; -moz-user-select: none; -ms-user-select: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; display: none; } .LanguageSelect input:checked ~ .LanguageSelect-change:before { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .LanguageSelect input:checked ~ .LanguageSelect-list { visibility: visible; opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .LanguageSelect-option { padding: 0 20px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; background: inherit; height: 100%; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; border: none; color: #fff; font-weight: bold; overflow: ellipisis; -webkit-flex-shrink: 0; flex-shrink: 0; position: relative; z-index: 2; border-top: 1px solid #284e60; } .LanguageSelect-option img { margin-right: 10px; -webkit-border-radius: 50%; border-radius: 50%; overflow: hidden; } .LanguageSelect-selected { padding-right: 30px; cursor: pointer; -moz-user-select: none; -ms-user-select: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; } .LanguageSelect-change { position: absolute; right: 0; top: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; height: inherit; cursor: pointer; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: #fff; } .LanguageSelect-change:before { -webkit-transition: -webkit-transform 0.2s; -moz-transition: -moz-transform 0.2s; -o-transition: -o-transform 0.2s; -ms-transition: -ms-transform 0.2s; transition: transform 0.2s; will-change: transform; } .LanguageSelect a { background: #1c3643; text-decoration: none; } .LanguageSelect-list { position: absolute; top: 100%; right: 0; padding: 0; height: inherit; z-index: 3; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; -ms-transition: 0.2s; transition: 0.2s; will-change: opacity, transform; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); visibility: hidden; -webkit-transform: translateY(-2em); -moz-transform: translateY(-2em); -o-transform: translateY(-2em); -ms-transform: translateY(-2em); transform: translateY(-2em); } @media only screen and (max-width: 640px) { .LanguageSelect-selected span { display: none; } .LanguageSelect-option { padding: 0 20px; } } .HeaderSticky-saas { margin: 0 auto !important; } .HeaderSticky-saasContainer { max-width: calc(100% - 30px); } .HeaderSticky-on { position: fixed; width: 100%; z-index: 4; top: 0; } .HeaderSticky-on + * { margin-top: 52px; } .HeaderSticky-on .Header-desktop, .HeaderSticky-on .Header-mobile { display: none; } .HeaderSticky-on .HeaderSticky-wrapper { margin-right: 20px; } .HeaderSticky-on.is-new-home { min-width: calc(100% - 410px); width: 70%; max-width: calc(100% - 320px); } @media only screen and (max-width: 767px) { .HeaderSticky-on.is-new-home { min-width: 100%; max-height: 100%; width: 100%; } } .HeaderSticky-wrapper { display: block; } .HeaderSticky-label { margin: 15px; float: left; position: relative; } .HeaderSticky-options { display: none; } .HeaderSticky-login { color: #7dcd40; } .HeaderSticky-option { padding: 5px; border-top: 2px solid transparent; display: inline-block !important; } .HeaderSticky-option .Header-login { margin: 0; } .HeaderSticky-subscribe { cursor: pointer; float: right; position: relative; } @media only screen and (max-width: 640px) { .HeaderSticky-on .Header-login { padding: 0px 9.6px 9.6px; } .HeaderSticky-on .Header-option { margin-top: -5px; } } @media only screen and (max-width: 380px) { .HeaderSticky-on .Header-login { padding: 0px 9.6px 9.6px; } } @media only screen and (max-width: 500px) { .HeaderSticky-label { font-size: 12px; } .HeaderSticky-label span { display: none; } } .Header { background: -webkit-linear-gradient(left, #1c3643 0%, #273b47 25%, #1e5372 100%); background: -moz-linear-gradient(left, #1c3643 0%, #273b47 25%, #1e5372 100%); background: -o-linear-gradient(left, #1c3643 0%, #273b47 25%, #1e5372 100%); background: -ms-linear-gradient(left, #1c3643 0%, #273b47 25%, #1e5372 100%); background: linear-gradient(to right, #1c3643 0%, #273b47 25%, #1e5372 100%); padding: 0 15px; position: relative; z-index: 2; } .Header-options, .Header-desktop, .Header-mobile { float: right; padding: 0; height: inherit; height: 52px; } .Header-options > li, .Header-desktop > li, .Header-mobile > li { color: #fff; display: inline-block; vertical-align: top; height: inherit; } .Header--dark { border-bottom: 1px solid rgba(255,255,255,0.2); background: #121f3d; } .Header-session { margin-right: -10px; padding: 0 12px; } .Header-desktop { display: block; } .Header-mobile { display: none; } @media only screen and (max-width: 1180px) { .Header-option > .btn-Green { display: none; } } @media only screen and (max-width: 1087px) { .Header-option > .btn-Green { display: inline-block; } } .Header-container { position: relative; height: inherit; } .Header-login { cursor: pointer; margin: 8px 0 0 0; position: relative; } .Header-avatar { display: inline-block; float: right; margin: 11px 0px 11px 12px; cursor: pointer; } .Header-avatar img { -webkit-border-radius: 50%; border-radius: 50%; object-fit: cover; } .Header-logo, .Header-logoEnglish { float: left; overflow: hidden; vertical-align: top; position: relative; } .Header-logo { height: 50px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .Header-logoEnglish { padding: 12px 0 7px 0px; } .Header-mobileLogo { display: none; height: 36px; overflow: hidden; width: 98px; vertical-align: top; position: absolute; top: 10px; left: 10px; } .Header-mobileMenu { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #fff; cursor: pointer; display: none; float: right; font-size: 24px; margin-left: 15px; position: relative; height: 50px; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; line-height: 50px; } .Header-menuContainer { right: 0; top: 0; height: inherit; } @media only screen and (max-width: 1087px) { .Header-container { padding: 0; } .Header-login:before { content: none; } .Header-mobileMenu { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .Header-menuContainer { zoom: 1; } .Header-menuContainer:before, .Header-menuContainer:after { content: ""; display: table; } .Header-menuContainer:after { clear: both; } .Header-desktop { display: none; } .Header-mobile { display: block; } } @media only screen and (max-width: 640px) { .Header-login { -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; background: none; -webkit-box-shadow: none !important; box-shadow: none !important; color: #98ca3f !important; display: -webkit-box !important; display: -moz-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: box !important; display: flex !important; text-decoration: underline; padding: 0; margin: 1rem 0 0 0 !important; } .Header-login:hover { background: none; color: #ff4842 !important; } .Header-session { background: transparent; } .Header-avatar { display: none; } .Header-english .Header-login { padding: 7.2px 9.6px 9.6px; } } @media only screen and (max-width: 380px) { .Header-login { font-size: 12px; margin-left: -20px; } .Header-session { margin: 0; padding: 0; } } .Footer { background: #1c3643; color: #fff; padding: 46px 0; } .Footer-saas { -webkit-box-pack: start; -moz-box-pack: start; -o-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } .Footer-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: distribute; -moz-box-pack: distribute; -o-box-pack: distribute; -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .Footer-powered { margin-top: 1rem; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; -webkit-filter: alpha(opacity=50); -moz-filter: alpha(opacity=50); -ms-filter: alpha(opacity=50); -o-filter: alpha(opacity=50); filter: alpha(opacity=50); font-size: 14px; } .Footer-powered a { text-decoration: none; color: #fff; } .Footer-column { max-width: 300px; } .Footer-column_A { max-width: none; } .Footer-contactList, .Footer-navList { margin: 0; padding: 0; margin-left: 50px; } .Footer-contactInfo { display: block; font-weight: bold; margin: 10px 20px 10px 0; } .Footer-contactInfo:before { font-size: 20px; margin-right: 0.4em; position: relative; top: 3px; } .Footer-contactInfo a { color: #fff; text-decoration: none; } .Footer-nav { border-left: 1px solid #fff; } .Footer-navLink { color: #fff; display: block; font-weight: bold; margin: 10px 20px; text-decoration: underline; } .Footer-navLink a { color: #fff; } .Footer-navLink a:hover { color: #98ca3f; } .Footer-socialList { border-left: 1px solid #fff; display: inline-block; margin: 20px 0; padding: 5px 10px; } .Footer-buttons { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .Footer-language { display: inline-block; margin: 0px 0px 0px 25px; border: solid 2px #fff; -webkit-border-radius: 3px; border-radius: 3px; } .Footer-languageBtn { outline: none; cursor: pointer; -moz-user-select: none; -ms-user-select: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; background-color: transparent; padding: 8px 10px; color: #fff; font-size: 13px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .Footer-languageBtn img { -webkit-border-radius: 100%; border-radius: 100%; width: 15px; } .Footer-languageBtn span { margin-left: 10px; } .Footer-languageBtn i { margin-left: 10px; font-size: 14px; } .Footer a { text-decoration: none; } .Footer-languageSelect { display: none; } .Footer-languageShow { display: block; border-top: 1px solid rgba(255,255,255,0.3); } .Footer-socialNetwork { display: inline-block; height: 20px; margin: 0 5px; } .Footer-socialNetwork a { color: #fff; cursor: pointer; text-decoration: none; } .Footer-socialNetwork a:hover { color: #fff; } .Footer-extraInfo { line-height: 1.3; margin-bottom: 15px; } .Footer-socialTitle { display: inline-block; padding: 0 15px 0 5px; } @media only screen and (max-width: 640px) { .Footer-contactInformation { display: inline-block; vertical-align: top; width: 50%; } .Footer-nav { border-left: none; } .Footer-contactList { margin: 0; } .Footer-container { display: block; text-align: center; } .Footer-extraInfo { max-width: 100%; } .Footer-navList { margin: 0; padding: 0; } .Footer-navLink { margin: 10px 0px; } .Footer-column { margin: 0; padding: 0; display: inline-block; text-align: left; vertical-align: top; max-width: initial; } .Footer-description { margin-bottom: 20px; min-width: 100%; } .Footer-description:nth-child(3) { display: block; float: none !important; margin: 40px auto 0; } } @font-face { font-family: 'cooper_hewittmedium'; src: url(https://static.platzi.com/static/css/cooperhewitt-medium-webfont.b90caad8c5de2b74822acdfe8452f202.eot); src: url(https://static.platzi.com/static/css/cooperhewitt-medium-webfont.b90caad8c5de2b74822acdfe8452f202.eot?#iefix) format('embedded-opentype'), url(https://static.platzi.com/static/css/cooperhewitt-medium-webfont.a23aeab68bbdc1b3f571ac216af5f59a.woff2) format('woff2'), url(https://static.platzi.com/static/css/cooperhewitt-medium-webfont.e3f4106c60f10db0a0fb1f6c1b658c53.woff) format('woff'), url(https://static.platzi.com/static/css/cooperhewitt-medium-webfont.b5ae2c0a6a5a7caecd04b012073882b9.ttf) format('truetype'), url(https://static.platzi.com/static/css/cooperhewitt-medium-webfont.7e9160254bc37a0ec34c29bea2bb1bf4.svg#cooperRegular) format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'cooper_hewittmedium'; src: url(https://static.platzi.com/static/css/cooperhewitt-semibold-webfont.38d15d0c054629ff1e6442981aefa369.eot); src: url(https://static.platzi.com/static/css/cooperhewitt-semibold-webfont.38d15d0c054629ff1e6442981aefa369.eot?#iefix) format('embedded-opentype'), url(https://static.platzi.com/static/css/cooperhewitt-semibold-webfont.b569525507c54a3580a45a27ce53205a.woff2) format('woff2'), url(https://static.platzi.com/static/css/cooperhewitt-semibold-webfont.bca640da316ae6ef792934ceab435f6a.woff) format('woff'), url(https://static.platzi.com/static/css/cooperhewitt-semibold-webfont.3ccf5a36969c6f0ae9180dd39a2c7488.ttf) format('truetype'), url(https://static.platzi.com/static/css/cooperhewitt-semibold-webfont.395619d80455ef70ee30595c010e5fa6.svg#cooperSemibold) format('svg'); font-weight: 500; font-style: normal; } .fb_reset { display: none; } img[src*='https://www.googleadservices.com'] { display: none; } .row, .row.row:before, .row.row:after, .row .row:before, .row .row:after { content: normal; } .container-fluid, .container { margin-right: auto; margin-left: auto; } .container-fluid { padding-right: 2rem; padding-left: 2rem; } .row { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-flex: 0; -ms-flex: 0 1 auto; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -0.5rem; margin-left: -0.5rem; } .row.reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; -webkit-box-direction: reverse; -moz-box-direction: reverse; -o-box-direction: reverse; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .col.reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; -webkit-box-direction: reverse; -moz-box-direction: reverse; -o-box-direction: reverse; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-offset-0, .col-xs-offset-1, .col-xs-offset-2, .col-xs-offset-3, .col-xs-offset-4, .col-xs-offset-5, .col-xs-offset-6, .col-xs-offset-7, .col-xs-offset-8, .col-xs-offset-9, .col-xs-offset-10, .col-xs-offset-11, .col-xs-offset-12 { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 auto; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; padding-right: 0.5rem; padding-left: 0.5rem; } .col-xs { -webkit-box-flex: 1; -ms-flex-positive: 1; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; -ms-flex-preferred-size: 0; -webkit-flex-basis: 0; flex-basis: 0; max-width: 100%; } .col-xs-1 { -ms-flex-preferred-size: 8.33333333%; -webkit-flex-basis: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%; } .col-xs-2 { -ms-flex-preferred-size: 16.66666667%; -webkit-flex-basis: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%; } .col-xs-3 { -ms-flex-preferred-size: 25%; -webkit-flex-basis: 25%; flex-basis: 25%; max-width: 25%; } .col-xs-4 { -ms-flex-preferred-size: 33.33333333%; -webkit-flex-basis: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%; } .col-xs-5 { -ms-flex-preferred-size: 41.66666667%; -webkit-flex-basis: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%; } .col-xs-6 { -ms-flex-preferred-size: 50%; -webkit-flex-basis: 50%; flex-basis: 50%; max-width: 50%; } .col-xs-7 { -ms-flex-preferred-size: 58.33333333%; -webkit-flex-basis: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%; } .col-xs-8 { -ms-flex-preferred-size: 66.66666667%; -webkit-flex-basis: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%; } .col-xs-9 { -ms-flex-preferred-size: 75%; -webkit-flex-basis: 75%; flex-basis: 75%; max-width: 75%; } .col-xs-10 { -ms-flex-preferred-size: 83.33333333%; -webkit-flex-basis: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%; } .col-xs-11 { -ms-flex-preferred-size: 91.66666667%; -webkit-flex-basis: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%; } .col-xs-12 { -ms-flex-preferred-size: 100%; -webkit-flex-basis: 100%; flex-basis: 100%; max-width: 100%; } .col-xs-offset-0 { margin-left: 0; } .col-xs-offset-1 { margin-left: 8.33333333%; } .col-xs-offset-2 { margin-left: 16.66666667%; } .col-xs-offset-3 { margin-left: 25%; } .col-xs-offset-4 { margin-left: 33.33333333%; } .col-xs-offset-5 { margin-left: 41.66666667%; } .col-xs-offset-6 { margin-left: 50%; } .col-xs-offset-7 { margin-left: 58.33333333%; } .col-xs-offset-8 { margin-left: 66.66666667%; } .col-xs-offset-9 { margin-left: 75%; } .col-xs-offset-10 { margin-left: 83.33333333%; } .col-xs-offset-11 { margin-left: 91.66666667%; } .start-xs { -webkit-box-pack: start; -ms-flex-pack: start; -webkit-box-pack: start; -moz-box-pack: start; -o-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; text-align: start; } .center-xs { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; text-align: center; } .end-xs { -webkit-box-pack: end; -ms-flex-pack: end; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; text-align: end; } .top-xs { -webkit-box-align: start; -ms-flex-align: start; -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .middle-xs { -webkit-box-align: center; -ms-flex-align: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .bottom-xs { -webkit-box-align: end; -ms-flex-align: end; -webkit-box-align: end; -moz-box-align: end; -o-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .around-xs { -ms-flex-pack: distribute; -webkit-box-pack: distribute; -moz-box-pack: distribute; -o-box-pack: distribute; -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; } .between-xs { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .first-xs { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; -webkit-box-ordinal-group: -1; -moz-box-ordinal-group: -1; -o-box-ordinal-group: -1; -ms-flex-order: -1; -webkit-order: -1; order: -1; } .last-xs { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -o-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; } @media only screen and (min-width: 48em) { .container { width: 49rem; } .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-offset-0, .col-sm-offset-1, .col-sm-offset-2, .col-sm-offset-3, .col-sm-offset-4, .col-sm-offset-5, .col-sm-offset-6, .col-sm-offset-7, .col-sm-offset-8, .col-sm-offset-9, .col-sm-offset-10, .col-sm-offset-11, .col-sm-offset-12 { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 auto; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; padding-right: 0.5rem; padding-left: 0.5rem; } .col-sm { -webkit-box-flex: 1; -ms-flex-positive: 1; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; -ms-flex-preferred-size: 0; -webkit-flex-basis: 0; flex-basis: 0; max-width: 100%; } .col-sm-1 { -ms-flex-preferred-size: 8.33333333%; -webkit-flex-basis: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%; } .col-sm-2 { -ms-flex-preferred-size: 16.66666667%; -webkit-flex-basis: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%; } .col-sm-3 { -ms-flex-preferred-size: 25%; -webkit-flex-basis: 25%; flex-basis: 25%; max-width: 25%; } .col-sm-4 { -ms-flex-preferred-size: 33.33333333%; -webkit-flex-basis: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%; } .col-sm-5 { -ms-flex-preferred-size: 41.66666667%; -webkit-flex-basis: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%; } .col-sm-6 { -ms-flex-preferred-size: 50%; -webkit-flex-basis: 50%; flex-basis: 50%; max-width: 50%; } .col-sm-7 { -ms-flex-preferred-size: 58.33333333%; -webkit-flex-basis: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%; } .col-sm-8 { -ms-flex-preferred-size: 66.66666667%; -webkit-flex-basis: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%; } .col-sm-9 { -ms-flex-preferred-size: 75%; -webkit-flex-basis: 75%; flex-basis: 75%; max-width: 75%; } .col-sm-10 { -ms-flex-preferred-size: 83.33333333%; -webkit-flex-basis: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%; } .col-sm-11 { -ms-flex-preferred-size: 91.66666667%; -webkit-flex-basis: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%; } .col-sm-12 { -ms-flex-preferred-size: 100%; -webkit-flex-basis: 100%; flex-basis: 100%; max-width: 100%; } .col-sm-offset-0 { margin-left: 0; } .col-sm-offset-1 { margin-left: 8.33333333%; } .col-sm-offset-2 { margin-left: 16.66666667%; } .col-sm-offset-3 { margin-left: 25%; } .col-sm-offset-4 { margin-left: 33.33333333%; } .col-sm-offset-5 { margin-left: 41.66666667%; } .col-sm-offset-6 { margin-left: 50%; } .col-sm-offset-7 { margin-left: 58.33333333%; } .col-sm-offset-8 { margin-left: 66.66666667%; } .col-sm-offset-9 { margin-left: 75%; } .col-sm-offset-10 { margin-left: 83.33333333%; } .col-sm-offset-11 { margin-left: 91.66666667%; } .start-sm { -webkit-box-pack: start; -ms-flex-pack: start; -webkit-box-pack: start; -moz-box-pack: start; -o-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; text-align: start; } .center-sm { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; text-align: center; } .end-sm { -webkit-box-pack: end; -ms-flex-pack: end; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; text-align: end; } .top-sm { -webkit-box-align: start; -ms-flex-align: start; -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .middle-sm { -webkit-box-align: center; -ms-flex-align: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .bottom-sm { -webkit-box-align: end; -ms-flex-align: end; -webkit-box-align: end; -moz-box-align: end; -o-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .around-sm { -ms-flex-pack: distribute; -webkit-box-pack: distribute; -moz-box-pack: distribute; -o-box-pack: distribute; -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; } .between-sm { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .first-sm { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; -webkit-box-ordinal-group: -1; -moz-box-ordinal-group: -1; -o-box-ordinal-group: -1; -ms-flex-order: -1; -webkit-order: -1; order: -1; } .last-sm { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -o-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; } } @media only screen and (min-width: 64em) { .container { width: 65rem; } .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-offset-0, .col-md-offset-1, .col-md-offset-2, .col-md-offset-3, .col-md-offset-4, .col-md-offset-5, .col-md-offset-6, .col-md-offset-7, .col-md-offset-8, .col-md-offset-9, .col-md-offset-10, .col-md-offset-11, .col-md-offset-12 { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 auto; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; padding-right: 0.5rem; padding-left: 0.5rem; } .col-md { -webkit-box-flex: 1; -ms-flex-positive: 1; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; -ms-flex-preferred-size: 0; -webkit-flex-basis: 0; flex-basis: 0; max-width: 100%; } .col-md-1 { -ms-flex-preferred-size: 8.33333333%; -webkit-flex-basis: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%; } .col-md-2 { -ms-flex-preferred-size: 16.66666667%; -webkit-flex-basis: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%; } .col-md-3 { -ms-flex-preferred-size: 25%; -webkit-flex-basis: 25%; flex-basis: 25%; max-width: 25%; } .col-md-4 { -ms-flex-preferred-size: 33.33333333%; -webkit-flex-basis: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%; } .col-md-5 { -ms-flex-preferred-size: 41.66666667%; -webkit-flex-basis: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%; } .col-md-6 { -ms-flex-preferred-size: 50%; -webkit-flex-basis: 50%; flex-basis: 50%; max-width: 50%; } .col-md-7 { -ms-flex-preferred-size: 58.33333333%; -webkit-flex-basis: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%; } .col-md-8 { -ms-flex-preferred-size: 66.66666667%; -webkit-flex-basis: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%; } .col-md-9 { -ms-flex-preferred-size: 75%; -webkit-flex-basis: 75%; flex-basis: 75%; max-width: 75%; } .col-md-10 { -ms-flex-preferred-size: 83.33333333%; -webkit-flex-basis: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%; } .col-md-11 { -ms-flex-preferred-size: 91.66666667%; -webkit-flex-basis: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%; } .col-md-12 { -ms-flex-preferred-size: 100%; -webkit-flex-basis: 100%; flex-basis: 100%; max-width: 100%; } .col-md-offset-0 { margin-left: 0; } .col-md-offset-1 { margin-left: 8.33333333%; } .col-md-offset-2 { margin-left: 16.66666667%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-4 { margin-left: 33.33333333%; } .col-md-offset-5 { margin-left: 41.66666667%; } .col-md-offset-6 { margin-left: 50%; } .col-md-offset-7 { margin-left: 58.33333333%; } .col-md-offset-8 { margin-left: 66.66666667%; } .col-md-offset-9 { margin-left: 75%; } .col-md-offset-10 { margin-left: 83.33333333%; } .col-md-offset-11 { margin-left: 91.66666667%; } .start-md { -webkit-box-pack: start; -ms-flex-pack: start; -webkit-box-pack: start; -moz-box-pack: start; -o-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; text-align: start; } .center-md { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; text-align: center; } .end-md { -webkit-box-pack: end; -ms-flex-pack: end; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; text-align: end; } .top-md { -webkit-box-align: start; -ms-flex-align: start; -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .middle-md { -webkit-box-align: center; -ms-flex-align: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .bottom-md { -webkit-box-align: end; -ms-flex-align: end; -webkit-box-align: end; -moz-box-align: end; -o-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .around-md { -ms-flex-pack: distribute; -webkit-box-pack: distribute; -moz-box-pack: distribute; -o-box-pack: distribute; -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; } .between-md { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .first-md { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; -webkit-box-ordinal-group: -1; -moz-box-ordinal-group: -1; -o-box-ordinal-group: -1; -ms-flex-order: -1; -webkit-order: -1; order: -1; } .last-md { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -o-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; } } @media only screen and (min-width: 75em) { .container { width: 76rem; } .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-offset-0, .col-lg-offset-1, .col-lg-offset-2, .col-lg-offset-3, .col-lg-offset-4, .col-lg-offset-5, .col-lg-offset-6, .col-lg-offset-7, .col-lg-offset-8, .col-lg-offset-9, .col-lg-offset-10, .col-lg-offset-11, .col-lg-offset-12 { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 auto; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; padding-right: 0.5rem; padding-left: 0.5rem; } .col-lg { -webkit-box-flex: 1; -ms-flex-positive: 1; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; -ms-flex-preferred-size: 0; -webkit-flex-basis: 0; flex-basis: 0; max-width: 100%; } .col-lg-1 { -ms-flex-preferred-size: 8.33333333%; -webkit-flex-basis: 8.33333333%; flex-basis: 8.33333333%; max-width: 8.33333333%; } .col-lg-2 { -ms-flex-preferred-size: 16.66666667%; -webkit-flex-basis: 16.66666667%; flex-basis: 16.66666667%; max-width: 16.66666667%; } .col-lg-3 { -ms-flex-preferred-size: 25%; -webkit-flex-basis: 25%; flex-basis: 25%; max-width: 25%; } .col-lg-4 { -ms-flex-preferred-size: 33.33333333%; -webkit-flex-basis: 33.33333333%; flex-basis: 33.33333333%; max-width: 33.33333333%; } .col-lg-5 { -ms-flex-preferred-size: 41.66666667%; -webkit-flex-basis: 41.66666667%; flex-basis: 41.66666667%; max-width: 41.66666667%; } .col-lg-6 { -ms-flex-preferred-size: 50%; -webkit-flex-basis: 50%; flex-basis: 50%; max-width: 50%; } .col-lg-7 { -ms-flex-preferred-size: 58.33333333%; -webkit-flex-basis: 58.33333333%; flex-basis: 58.33333333%; max-width: 58.33333333%; } .col-lg-8 { -ms-flex-preferred-size: 66.66666667%; -webkit-flex-basis: 66.66666667%; flex-basis: 66.66666667%; max-width: 66.66666667%; } .col-lg-9 { -ms-flex-preferred-size: 75%; -webkit-flex-basis: 75%; flex-basis: 75%; max-width: 75%; } .col-lg-10 { -ms-flex-preferred-size: 83.33333333%; -webkit-flex-basis: 83.33333333%; flex-basis: 83.33333333%; max-width: 83.33333333%; } .col-lg-11 { -ms-flex-preferred-size: 91.66666667%; -webkit-flex-basis: 91.66666667%; flex-basis: 91.66666667%; max-width: 91.66666667%; } .col-lg-12 { -ms-flex-preferred-size: 100%; -webkit-flex-basis: 100%; flex-basis: 100%; max-width: 100%; } .col-lg-offset-0 { margin-left: 0; } .col-lg-offset-1 { margin-left: 8.33333333%; } .col-lg-offset-2 { margin-left: 16.66666667%; } .col-lg-offset-3 { margin-left: 25%; } .col-lg-offset-4 { margin-left: 33.33333333%; } .col-lg-offset-5 { margin-left: 41.66666667%; } .col-lg-offset-6 { margin-left: 50%; } .col-lg-offset-7 { margin-left: 58.33333333%; } .col-lg-offset-8 { margin-left: 66.66666667%; } .col-lg-offset-9 { margin-left: 75%; } .col-lg-offset-10 { margin-left: 83.33333333%; } .col-lg-offset-11 { margin-left: 91.66666667%; } .start-lg { -webkit-box-pack: start; -ms-flex-pack: start; -webkit-box-pack: start; -moz-box-pack: start; -o-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; text-align: start; } .center-lg { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; text-align: center; } .end-lg { -webkit-box-pack: end; -ms-flex-pack: end; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; text-align: end; } .top-lg { -webkit-box-align: start; -ms-flex-align: start; -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .middle-lg { -webkit-box-align: center; -ms-flex-align: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .bottom-lg { -webkit-box-align: end; -ms-flex-align: end; -webkit-box-align: end; -moz-box-align: end; -o-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .around-lg { -ms-flex-pack: distribute; -webkit-box-pack: distribute; -moz-box-pack: distribute; -o-box-pack: distribute; -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; } .between-lg { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .first-lg { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; -webkit-box-ordinal-group: -1; -moz-box-ordinal-group: -1; -o-box-ordinal-group: -1; -ms-flex-order: -1; -webkit-order: -1; order: -1; } .last-lg { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -o-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; } } .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'cooper_hewittmedium'; font-weight: bold; } .h1.no-margin, .h2.no-margin, .h3.no-margin, .h4.no-margin, .h5.no-margin, .h6.no-margin { margin: 0; } .h1 { font-size: 2em; margin: 2rem 0 1rem; } @media only screen and (min-width: 48em) { } .h2 { font-size: 1.5em; margin: 2rem 0; line-height: 2rem; } @media only screen and (min-width: 48em) { .h2 { font-size: 2em; } } .h3 { font-size: 1.3em; margin: 1rem 0; } @media only screen and (min-width: 48em) { .h3 { font-size: 1.75em; } } .h4 { font-size: 1.25em; margin: 1rem 0; } @media only screen and (min-width: 48em) { .h4 { font-size: 1.5em; } } .h5 { font-size: 1.25em; margin: 0.5rem 0; } .h6 { font-size: 1em; margin: 0.5rem 0; } .p { font-size: 1rem; font-family: 'Lato', sans-serif; margin: 0.8rem 0; } @media only screen and (min-width: 48em) { .p .big { font-size: 1.25rem; } } .p .mid { font-size: 0.95rem; } .p small, .p .small { font-size: 0.75rem; } .tag { font-size: 0.95em; } .h1 + .h3 { margin-top: 0; } .link, .link--green, .link--orange, .link--green--orange { text-decoration: underline; color: #0791e6; cursor: pointer; } .link--green, .link--green--green, .link--orange--green, .link--green--orange--green { color: #98ca3f; } .link--orange, .link--green--orange, .link--orange--orange, .link--green--orange--orange { color: #ff7f38; } .ul { padding: 0; margin: 0.5em 0; } .ul .li { font-size: 0.9em; list-style: none; padding-left: 25px; position: relative; margin-bottom: 0.5em; } .ul .li:before { content: ""; width: 8px; height: 8px; display: block; -webkit-border-radius: 50%; border-radius: 50%; background: #0791e6; display: inline-block; position: absolute; left: 7.5px; top: 5px; } .LiveBanner { background-color: #fcfcd2; padding: 12px 0; text-align: center; } .LiveBanner-onair:before { content: "|"; padding: 0 18px; color: #000; } .LiveBanner-callToAction { display: inline-block; padding: 15px 15px 15px 30px; vertical-align: top; } .LiveBanner-button { font-size: 23px; padding: 10px 15px; height: initial !important; vertical-align: top; } .LiveBanner-logo { margin: 14px 14px 14px 20px; } .LiveBanner-live { color: #ff4842; text-transform: uppercase; text-decoration: underline; } .LiveBanner-icon { padding-right: 18px; color: #ff4842; text-decoration: none; } .LiveBanner-highlight { color: #ff4842; } .LiveBanner-title, .LiveBanner-img, .LiveBanner-onair { display: inline-block; vertical-align: middle; } .LiveBanner-title { color: #000; margin-left: 10px; } .LiveBanner-title:before { margin-right: 15px; position: relative; top: 5px; } @media only screen and (max-width: 835px) { .LiveBanner-conf.LiveBanner-onair { display: block; } .LiveBanner-conf.LiveBanner-onair:before { display: none; padding: 0; } } @media only screen and (max-width: 565px) { .LiveBanner-onair { display: block; margin-top: 5px; } .LiveBanner-onair:before { display: none; padding: 0; } .LiveBanner-title, .LiveBanner-img { display: inline-block; } } .price { color: #fff; } .Pricing { background-color: #fff; } .Pricing h2 { font-size: 24px; } @media only screen and (min-width: 48em) { .Pricing h2 { font-size: 30px; } } @media only screen and (min-width: 64em) { .Pricing h2 { font-size: 36px; } } .Mainstream-dark { background-color: #0c1633; } .Mainstream-dark .Hero { background: #121f3d; } .Mainstream-dark .Hero-title, .Mainstream-dark .Hero-text { color: #fff; } .Mainstream-dark .Hero-cta { background-color: #98ca3f; -webkit-box-shadow: none; box-shadow: none; color: #03091e; font-size: 0.875rem; font-weight: bold; min-width: 240px; max-height: 40px; } .Mainstream-dark .Hero-cta:focus, .Mainstream-dark .Hero-cta:hover, .Mainstream-dark .Hero-cta:active { background-color: #98ca3f; -webkit-box-shadow: none; box-shadow: none; } .Mainstream-dark .Agenda { background-color: #121f3d; } .Mainstream-dark .Agenda-title, .Mainstream-dark .Agenda-sessions-title, .Mainstream-dark .Agenda-sessions-description { color: #fff; } .Mainstream-dark .Agenda-sessions-image { height: 70px; width: 70px; } .Mainstream-dark .Agenda-title { margin-top: 1.5rem; position: relative; } .Mainstream-dark .Agenda-title:before { content: ''; background-color: #33b1ff; width: 80px; height: 2px; position: absolute; top: -1rem; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .Mainstream-dark .Team-title { color: #fff; } .Mainstream-dark .Team-card { background-color: #24385b; } .Mainstream-dark .Team-card-name, .Mainstream-dark .Team-card-job { color: #fff; } @media only screen and (min-width: 64em) { .Mainstream-dark .Team-members { -webkit-box-pack: start; -moz-box-pack: start; -o-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } } .Mainstream-dark .Diploma { background-color: #121f3d; } .Mainstream-dark .Diploma-title, .Mainstream-dark .Diploma-description { color: #fff; } .Mainstream-dark .Diploma-cta { background-color: #98ca3f; -webkit-box-shadow: none; box-shadow: none; color: #03091e; font-size: 0.875rem; font-weight: bold; min-width: 240px; max-height: 40px; } .Mainstream-dark .Diploma-cta:focus, .Mainstream-dark .Diploma-cta:hover, .Mainstream-dark .Diploma-cta:active { background-color: #98ca3f; -webkit-box-shadow: none; box-shadow: none; }