.Star { 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; width: auto; background: #fff; color: #000; -webkit-border-radius: 0.5rem; border-radius: 0.5rem; -webkit-box-shadow: 2px 2px 4px -3px rgba(0,0,0,0.62); box-shadow: 2px 2px 4px -3px rgba(0,0,0,0.62); cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; will-change: border-color, color, transform, text-shadow, box-shadow; max-width: 40px; margin: 0 auto; width: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-align-self: flex-start; align-self: flex-start; -ms-flex-item-align: start; z-index: 2 !important; overflow: visible; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -o-transition: all 0.1s; -ms-transition: all 0.1s; transition: all 0.1s; } .Star-wrapper { padding-top: 0; } .Star:hover { -webkit-box-shadow: 5px 4px 4px -4px rgba(0,0,0,0.38); box-shadow: 5px 4px 4px -4px rgba(0,0,0,0.38); } .Star-icon { font-size: 23px; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; color: #a9aaad; } .Star-icon.is-loved { color: #98ca3f; background-position: -1560px 0px; } .Star-icon.animated-like { -webkit-animation: 1s filledHeart steps(60) forwards; -moz-animation: 1s filledHeart steps(60) forwards; -o-animation: 1s filledHeart steps(60) forwards; -ms-animation: 1s filledHeart steps(60) forwards; animation: 1s filledHeart steps(60) forwards; } .Star-heart { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; -ms-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: steps(60); -moz-animation-timing-function: steps(60); -o-animation-timing-function: steps(60); -ms-animation-timing-function: steps(60); animation-timing-function: steps(60); -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; animation-fill-mode: forwards; width: 26px; height: 30px; background-repeat: no-repeat; background-image: url(https://static.platzi.com/static/css/heart-outline.b4a046eddfa63108054229b65589743e.svg); background-position: 0px 0px; } .Star-heart.is-loved { color: #98ca3f; background-position: -1560px 0px; } .Star-heart.animated-like { -webkit-animation: 1s filledHeart steps(60) forwards; -moz-animation: 1s filledHeart steps(60) forwards; -o-animation: 1s filledHeart steps(60) forwards; -ms-animation: 1s filledHeart steps(60) forwards; animation: 1s filledHeart steps(60) forwards; } .Star-number { text-shadow: none; font-size: 12px; margin-bottom: 0.25rem; } .Star.is-small .Star-icon { font-size: 25px; } .Star.is-small .Star-number { font-size: 0.875em; font-weight: 400; color: #696969; } .Star.is-medium { padding: 0 1rem; } .Star.is-card { -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; align-items: center; border: none; -webkit-box-shadow: none; box-shadow: none; max-width: 70px; } .Star.is-card .Star-number { margin-bottom: 0; margin-left: 2px; } .Star.is-card .Star-icon { color: #a9aaad; font-size: 25px; cursor: pointer; margin-left: 5px; -webkit-background-size: 234px 18px; -moz-background-size: 234px 18px; background-size: 234px 18px; will-change: transform; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -o-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); } .Star.is-card .Star-icon.is-active, .Star.is-card .Star-icon.is-liked, .Star.is-card .Star-icon.is-loved { color: #98ca3f; background-position: -1560px 0px; } .Star.is-card .Star-icon.animated-like { -webkit-animation: 1s filledHeart steps(60) forwards; -moz-animation: 1s filledHeart steps(60) forwards; -o-animation: 1s filledHeart steps(60) forwards; -ms-animation: 1s filledHeart steps(60) forwards; animation: 1s filledHeart steps(60) forwards; } @-moz-keyframes like { from { background-position-x: 0; } to { background-position-x: right; } } @-webkit-keyframes like { from { background-position-x: 0; } to { background-position-x: right; } } @-o-keyframes like { from { background-position-x: 0; } to { background-position-x: right; } } @keyframes like { from { background-position-x: 0; } to { background-position-x: right; } } @-moz-keyframes dislike { from { background-position-x: right; } to { background-position-x: 0; } } @-webkit-keyframes dislike { from { background-position-x: right; } to { background-position-x: 0; } } @-o-keyframes dislike { from { background-position-x: right; } to { background-position-x: 0; } } @keyframes dislike { from { background-position-x: right; } to { background-position-x: 0; } } @-moz-keyframes difusion { to { text-shadow: 40.4508653px 29.38924115px,8.497995110000002px 26.154045170000003px,-15.450774000000001px 47.552850400000004px,-22.2479330425px 16.164141675000003px,-50px 0.0001327px,-22.248018815000002px -16.164023590000003px,-15.4510264px -47.5527684px,8.497856290000001px -26.15409027px,40.450709350000004px -29.38945585px,27.500000000000004px -0.00014594250000000001px; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; transform: none; color: transparent; } } @-webkit-keyframes difusion { to { text-shadow: 40.4508653px 29.38924115px,8.497995110000002px 26.154045170000003px,-15.450774000000001px 47.552850400000004px,-22.2479330425px 16.164141675000003px,-50px 0.0001327px,-22.248018815000002px -16.164023590000003px,-15.4510264px -47.5527684px,8.497856290000001px -26.15409027px,40.450709350000004px -29.38945585px,27.500000000000004px -0.00014594250000000001px; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; transform: none; color: transparent; } } @-o-keyframes difusion { to { text-shadow: 40.4508653px 29.38924115px,8.497995110000002px 26.154045170000003px,-15.450774000000001px 47.552850400000004px,-22.2479330425px 16.164141675000003px,-50px 0.0001327px,-22.248018815000002px -16.164023590000003px,-15.4510264px -47.5527684px,8.497856290000001px -26.15409027px,40.450709350000004px -29.38945585px,27.500000000000004px -0.00014594250000000001px; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; transform: none; color: transparent; } } @keyframes difusion { to { text-shadow: 40.4508653px 29.38924115px,8.497995110000002px 26.154045170000003px,-15.450774000000001px 47.552850400000004px,-22.2479330425px 16.164141675000003px,-50px 0.0001327px,-22.248018815000002px -16.164023590000003px,-15.4510264px -47.5527684px,8.497856290000001px -26.15409027px,40.450709350000004px -29.38945585px,27.500000000000004px -0.00014594250000000001px; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; transform: none; color: transparent; } } @-moz-keyframes filledHeart { 0% { background-position: 0px 0px; } 100% { background-position: -1560px 0px; } } @-webkit-keyframes filledHeart { 0% { background-position: 0px 0px; } 100% { background-position: -1560px 0px; } } @-o-keyframes filledHeart { 0% { background-position: 0px 0px; } 100% { background-position: -1560px 0px; } } @keyframes filledHeart { 0% { background-position: 0px 0px; } 100% { background-position: -1560px 0px; } } 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; } .PlatziRank { 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; line-height: 1.17; font-size: 12px; color: #a9aaad; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @media only screen and (min-width: 48em) { .PlatziRank { font-size: 14px; } } .PlatziRank-icon { padding: 4px 5px; 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; background-color: #98ca3f; color: #fff; -webkit-border-radius: 23px; border-radius: 23px; margin-left: 0.5em; } .PlatziRank-icon i { font-size: 9px; margin: 0 !important; } .PlatziRank-icon-animate { position: relative; } .PlatziRank-icon-animate .first { background-color: #98ca3f; -webkit-animation: gainedPointsBackground 750ms cubic-bezier(0.06, 0.52, 0.45, 1.07); -moz-animation: gainedPointsBackground 750ms cubic-bezier(0.06, 0.52, 0.45, 1.07); -o-animation: gainedPointsBackground 750ms cubic-bezier(0.06, 0.52, 0.45, 1.07); -ms-animation: gainedPointsBackground 750ms cubic-bezier(0.06, 0.52, 0.45, 1.07); animation: gainedPointsBackground 750ms cubic-bezier(0.06, 0.52, 0.45, 1.07); } .PlatziRank-icon-animate .second { position: absolute; left: 0; top: 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-animation: gainedPointsCircle 750ms cubic-bezier(0.06, 0.52, 0.45, 1.07); -moz-animation: gainedPointsCircle 750ms cubic-bezier(0.06, 0.52, 0.45, 1.07); -o-animation: gainedPointsCircle 750ms cubic-bezier(0.06, 0.52, 0.45, 1.07); -ms-animation: gainedPointsCircle 750ms cubic-bezier(0.06, 0.52, 0.45, 1.07); animation: gainedPointsCircle 750ms cubic-bezier(0.06, 0.52, 0.45, 1.07); } .PlatziRank.margin-left { margin-left: 0.5em; } .PlatziRank.margin-right { margin-right: 0.5em; } .PlatziRank.is-overview .PlatziRank-icon { color: #fff; background-color: #a9aaad; margin-left: 0; margin-right: 0.5em; } .PlatziRank-animate { position: relative; } .PlatziRank-animate-second { position: absolute; left: 0; -webkit-animation: gainedPoints 750ms ease-out; -moz-animation: gainedPoints 750ms ease-out; -o-animation: gainedPoints 750ms ease-out; -ms-animation: gainedPoints 750ms ease-out; animation: gainedPoints 750ms ease-out; } @-moz-keyframes gainedPoints { from { top: 0; opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } to { top: -3rem; font-size: 18px; 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-keyframes gainedPoints { from { top: 0; opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } to { top: -3rem; font-size: 18px; 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); } } @-o-keyframes gainedPoints { from { top: 0; opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } to { top: -3rem; font-size: 18px; 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); } } @keyframes gainedPoints { from { top: 0; opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } to { top: -3rem; font-size: 18px; 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); } } @-moz-keyframes gainedPointsCircle { from { top: 0; opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; background-color: #0791e6; } to { top: -3rem; font-size: 18px; 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); background-color: #98ca3f; } } @-webkit-keyframes gainedPointsCircle { from { top: 0; opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; background-color: #0791e6; } to { top: -3rem; font-size: 18px; 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); background-color: #98ca3f; } } @-o-keyframes gainedPointsCircle { from { top: 0; opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; background-color: #0791e6; } to { top: -3rem; font-size: 18px; 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); background-color: #98ca3f; } } @keyframes gainedPointsCircle { from { top: 0; opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; background-color: #0791e6; } to { top: -3rem; font-size: 18px; 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); background-color: #98ca3f; } } @-moz-keyframes gainedPointsBackground { from { background-color: #0791e6; } to { background-color: #98ca3f; } } @-webkit-keyframes gainedPointsBackground { from { background-color: #0791e6; } to { background-color: #98ca3f; } } @-o-keyframes gainedPointsBackground { from { background-color: #0791e6; } to { background-color: #98ca3f; } } @keyframes gainedPointsBackground { from { background-color: #0791e6; } to { background-color: #98ca3f; } } .CourseBanner { padding: 0.5rem; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; position: relative; background-color: #eff3f8; } @media only screen and (min-width: 48em) { .CourseBanner { padding: 1.5rem; } } .CourseBanner-body { max-width: 837px; } .CourseBanner-body h2 { font-size: 0.875rem; color: #0c1633; } @media only screen and (min-width: 48em) { .CourseBanner-body h2 { font-size: 1rem; } } @media only screen and (min-width: 64em) { .CourseBanner-body h2 { font-size: 1.375rem; } } .CourseBanner-body p { font-size: 1rem; color: #5c5d60; line-height: 1.5; } .CourseBanner-text { display: none; font-size: 1rem; color: #5c5d60; } @media only screen and (min-width: 48em) { .CourseBanner-text { display: block; } } .CourseBanner-title { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .CourseBanner-arrowContainer { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; 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; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } @media only screen and (min-width: 64em) { .CourseBanner-arrowContainer { display: none; } } .CourseBanner-content { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; max-width: 1024px; margin: 0 auto; } @media only screen and (min-width: 48em) { .CourseBanner-description .CourseBanner-body { display: grid; grid-template-columns: 8fr 1fr; } } .CourseBanner-url { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .CourseBanner-cta-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .CourseBanner-cta-container .CourseBanner-cta { text-align: center; width: 100%; background: #0791e6; margin-top: 0.75rem; color: #fff; font-weight: 800; -webkit-border-radius: 0.5rem; border-radius: 0.5rem; padding: 0.75rem 1.5rem; font-size: 0.875rem; -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; text-transform: uppercase; } @media only screen and (min-width: 48em) { .CourseBanner-cta-container .CourseBanner-cta { padding: 0.75rem 1.5rem; width: auto; } } .CourseBanner-badge { max-width: 50px; width: 100%; margin-left: 0; margin-right: 0.5rem; } @media only screen and (min-width: 64em) { .CourseBanner-badge { margin-left: 0.5rem; margin-right: 2rem; } } .CourseBanner-content.is-secondary .CourseBanner-cta-container .CourseBanner-cta { margin-top: 14px; } @media only screen and (min-width: 48em) { .CourseBanner-content.is-secondary .CourseBanner-cta-container .CourseBanner-cta { margin-top: 0; } } .CourseBanner--sticky { position: sticky; bottom: 0; } .Filters { 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; } .Filters-text { opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; -webkit-filter: alpha(opacity=70); -moz-filter: alpha(opacity=70); -ms-filter: alpha(opacity=70); -o-filter: alpha(opacity=70); filter: alpha(opacity=70); font-size: 14px; color: #696969; } .Filters-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; min-width: 109px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: solid 1px #e9e9e9; background-color: #fff; -webkit-border-radius: 4px; border-radius: 4px; position: relative; margin-left: 8px; } .Filters-container:hover { cursor: pointer; } .Filters-available { width: 100%; position: absolute; left: -1px; top: 30px; border: solid 1px #e9e9e9; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; overflow: hidden; z-index: 5; } .Filters-search { width: 100%; padding: 0.5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #fff; } .Filters-search-input { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0.25em 0.5em; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #e9e9e9; font-size: 14px; } .Filters-search-input:focus { outline: none; } .Filters-selected { font-weight: 600; font-size: 14px; line-height: 1; color: #0791e6; padding: 8px 25px 8px 8px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .Filters-selected:after { content: ''; position: absolute; border-top: solid 6px #0791e6; border-right: solid 4px transparent; border-left: solid 4px transparent; right: 8px; top: 12px; } .Filters-selected:hover { background-color: #f6f6f6; } .Filters-single { display: block; padding: 8px; color: #5c5d60; font-size: 14px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; background-color: #fff; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .Filters-single:hover { background: #f6f6f6; } .Filters .Filters-container.is-active { -webkit-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; border-bottom: solid 1px transparent; } .Filters.top-bottom-half { padding: 0.5em 0; } .Filters.bottom-1 { padding-bottom: 1em; } .Filters.right-1 { padding-right: 1em; } .Filters.no-margin .Filters-container { margin: 0; } .Chips-Container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin-bottom: 16px; } .Chips-badge { background: #fff; -webkit-border-radius: 100px; border-radius: 100px; cursor: pointer; color: #0791e6; 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; font-family: Lato; font-size: 14px; font-weight: 600; height: 25px; line-height: 1; margin-right: 6px; padding: 5px 10px; text-align: center; -webkit-transition: all ease-in 200ms; -moz-transition: all ease-in 200ms; -o-transition: all ease-in 200ms; -ms-transition: all ease-in 200ms; transition: all ease-in 200ms; text-transform: capitalize; } @media only screen and (min-width: 48em) { .Chips-badge { padding: 0 10px; } } .Chips-badge:hover { -webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); } .Chips-badge.is-active { background: #0791e6; color: #fff; } .FormCheckbox { margin-right: 0.5rem; } .FormCheckbox-field { display: none; } .FormCheckbox-field:checked + .FormCheckbox-label { -webkit-transition: 0.1s; -moz-transition: 0.1s; -o-transition: 0.1s; -ms-transition: 0.1s; transition: 0.1s; color: #fff; font-size: 30px; line-height: 17px; text-align: center; position: relative; } .FormCheckbox-field:checked + .FormCheckbox-label:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: 'icomoon'; font-style: normal; font-variant: normal; font-weight: normal; speak: none; content: "\E91A"; font-size: 0.75rem; background-color: #0791e6; border-color: #0791e6; } .FormCheckbox-field.error ~ .FormCheckbox-label:before { border: 1px solid #ff4842; } .FormCheckbox-label { display: inline-block; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .FormCheckbox-label:before { content: ''; background: #fff; display: block; height: 22px; width: 22px; line-height: 22px; vertical-align: middle; -webkit-border-radius: 0.25rem; border-radius: 0.25rem; border: 1px solid #c7c7c7; -webkit-transition: 0.1s; -moz-transition: 0.1s; -o-transition: 0.1s; -ms-transition: 0.1s; transition: 0.1s; } .Loader { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255,255,255,0.8); 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; z-index: 10; } .Loader-circle { border: 0.5rem solid #f6f6f6; -webkit-border-radius: 50%; border-radius: 50%; border-top: 0.5rem solid #98ca3f; width: 3rem; height: 3rem; -webkit-animation: spin 2s linear infinite; -webkit-animation: spin 2s linear infinite; -moz-animation: spin 2s linear infinite; -o-animation: spin 2s linear infinite; -ms-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @-moz-keyframes spin { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes spin { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } .Project { -webkit-border-radius: 10px; border-radius: 10px; overflow: hidden; display: block; cursor: pointer; text-decoration: none; color: #273b47; } .Project:hover .Project-overlay { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } .Project-top { position: relative; } .Project-top img { max-width: 100%; } .Project-overlay { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: rgba(28,54,67,0.8); color: #fff; padding: 20px; 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; } .Project-bottom { background: #fff; padding: 10px; } .Project-name { margin-bottom: 10px; } .Project-stats { 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; color: #7e7f81; font-size: 0.8em; } .Project-stats span { margin-right: 10px; } .Project-stats span:last-child { margin-right: 0; } .Project-author { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; font-size: 0.8em; margin-bottom: 10px; } .Project-author img { width: 15px; height: 15px; object-fit: cover; -webkit-border-radius: 50%; border-radius: 50%; margin-right: 5px; } .ProjectList { padding: 20px; background: #f7f7f8; } .ProjectList-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 20px; } .Category-title { padding-bottom: 5px; 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; margin-bottom: 15px; } .Category-title a { text-decoration: none; color: #273b47; font-size: 0.8em; } .ProjectsHero { background: url(https://static.platzi.com/static/css/hero.74a737d8e9ea8d5b8e9794d6621a7e74.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; padding: 70px 15px; color: #fff; text-align: center; } .ProjectsHero h1 { font-size: 30px; } .ProjectsHero p { font-size: 20px; margin-top: 10px; } .ProjectsHero form { max-width: 750px; margin: 20px auto 0; position: relative; } .ProjectsHero form input { width: 100%; height: 65px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 10px; border-radius: 10px; border: none; outline: 0; border: 1px solid transparent; padding: 15px; font-size: 20px; font-family: 'Lato', sans-serif; } .ProjectsHero form input:focus { border: 1px solid #98ca3f; } .ProjectsHero form button { position: absolute; right: 5px; top: 5px; } .PlatziLogo { width: 100px; height: 100px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: relative; -webkit-animation: logo 3.5s infinite; -moz-animation: logo 3.5s infinite; -o-animation: logo 3.5s infinite; -ms-animation: logo 3.5s infinite; animation: logo 3.5s infinite; margin: 40px auto 0; } .PlatziLogo-left { border: 20px solid #97c93e; border-bottom: none; -webkit-border-radius: 20px 20px 0 0; border-radius: 20px 20px 0 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 65%; position: relative; top: 1px; width: 100%; -webkit-animation-name: logo2; -moz-animation-name: logo2; -o-animation-name: logo2; -ms-animation-name: logo2; animation-name: logo2; -webkit-animation-duration: 3.5s; -moz-animation-duration: 3.5s; -o-animation-duration: 3.5s; -ms-animation-duration: 3.5s; animation-duration: 3.5s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; -ms-animation-delay: 1s; animation-delay: 1s; } .PlatziLogo-right { width: 100%; height: 35%; position: relative; border: 20px solid #97c93e; border-top: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 0 0 20px 20px; border-radius: 0 0 20px 20px; } .Loading.is-active .Loading-content { -webkit-filter: grayscale(0.5); } .Loading.is-active .Loading-content .Modal-type { 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); } .Loading.is-active .Loading-overlay { position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 5; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; -ms-transition: 1s; transition: 1s; 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; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; background: rgba(255,255,255,0.8); -webkit-border-radius: 10px; border-radius: 10px; } .Loading-msg { -webkit-animation: fade 1s infinite; -moz-animation: fade 1s infinite; -o-animation: fade 1s infinite; -ms-animation: fade 1s infinite; animation: fade 1s infinite; font-size: 30px; text-align: center; } @-moz-keyframes logo2 { 0% { width: 100%; } 20% { width: 80%; } 50% { width: 80%; } 70% { width: 100%; } 100% { width: 100%; } } @-webkit-keyframes logo2 { 0% { width: 100%; } 20% { width: 80%; } 50% { width: 80%; } 70% { width: 100%; } 100% { width: 100%; } } @-o-keyframes logo2 { 0% { width: 100%; } 20% { width: 80%; } 50% { width: 80%; } 70% { width: 100%; } 100% { width: 100%; } } @keyframes logo2 { 0% { width: 100%; } 20% { width: 80%; } 50% { width: 80%; } 70% { width: 100%; } 100% { width: 100%; } } @-moz-keyframes logo { 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: scale(0.3) rotate(0deg); -moz-transform: scale(0.3) rotate(0deg); -o-transform: scale(0.3) rotate(0deg); -ms-transform: scale(0.3) rotate(0deg); transform: scale(0.3) rotate(0deg); } 30% { -webkit-transform: scale(0.8) rotate(405deg); -moz-transform: scale(0.8) rotate(405deg); -o-transform: scale(0.8) rotate(405deg); -ms-transform: scale(0.8) rotate(405deg); transform: scale(0.8) rotate(405deg); opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } 80% { -webkit-transform: scale(0.8) rotate(405deg); -moz-transform: scale(0.8) rotate(405deg); -o-transform: scale(0.8) rotate(405deg); -ms-transform: scale(0.8) rotate(405deg); transform: scale(0.8) rotate(405deg); opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } 100% { -webkit-transform: scale(0.3) rotate(0deg); -moz-transform: scale(0.3) rotate(0deg); -o-transform: scale(0.3) rotate(0deg); -ms-transform: scale(0.3) rotate(0deg); transform: scale(0.3) rotate(0deg); 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-keyframes logo { 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: scale(0.3) rotate(0deg); -moz-transform: scale(0.3) rotate(0deg); -o-transform: scale(0.3) rotate(0deg); -ms-transform: scale(0.3) rotate(0deg); transform: scale(0.3) rotate(0deg); } 30% { -webkit-transform: scale(0.8) rotate(405deg); -moz-transform: scale(0.8) rotate(405deg); -o-transform: scale(0.8) rotate(405deg); -ms-transform: scale(0.8) rotate(405deg); transform: scale(0.8) rotate(405deg); opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } 80% { -webkit-transform: scale(0.8) rotate(405deg); -moz-transform: scale(0.8) rotate(405deg); -o-transform: scale(0.8) rotate(405deg); -ms-transform: scale(0.8) rotate(405deg); transform: scale(0.8) rotate(405deg); opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } 100% { -webkit-transform: scale(0.3) rotate(0deg); -moz-transform: scale(0.3) rotate(0deg); -o-transform: scale(0.3) rotate(0deg); -ms-transform: scale(0.3) rotate(0deg); transform: scale(0.3) rotate(0deg); 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); } } @-o-keyframes logo { 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: scale(0.3) rotate(0deg); -moz-transform: scale(0.3) rotate(0deg); -o-transform: scale(0.3) rotate(0deg); -ms-transform: scale(0.3) rotate(0deg); transform: scale(0.3) rotate(0deg); } 30% { -webkit-transform: scale(0.8) rotate(405deg); -moz-transform: scale(0.8) rotate(405deg); -o-transform: scale(0.8) rotate(405deg); -ms-transform: scale(0.8) rotate(405deg); transform: scale(0.8) rotate(405deg); opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } 80% { -webkit-transform: scale(0.8) rotate(405deg); -moz-transform: scale(0.8) rotate(405deg); -o-transform: scale(0.8) rotate(405deg); -ms-transform: scale(0.8) rotate(405deg); transform: scale(0.8) rotate(405deg); opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } 100% { -webkit-transform: scale(0.3) rotate(0deg); -moz-transform: scale(0.3) rotate(0deg); -o-transform: scale(0.3) rotate(0deg); -ms-transform: scale(0.3) rotate(0deg); transform: scale(0.3) rotate(0deg); 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); } } @keyframes logo { 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: scale(0.3) rotate(0deg); -moz-transform: scale(0.3) rotate(0deg); -o-transform: scale(0.3) rotate(0deg); -ms-transform: scale(0.3) rotate(0deg); transform: scale(0.3) rotate(0deg); } 30% { -webkit-transform: scale(0.8) rotate(405deg); -moz-transform: scale(0.8) rotate(405deg); -o-transform: scale(0.8) rotate(405deg); -ms-transform: scale(0.8) rotate(405deg); transform: scale(0.8) rotate(405deg); opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } 80% { -webkit-transform: scale(0.8) rotate(405deg); -moz-transform: scale(0.8) rotate(405deg); -o-transform: scale(0.8) rotate(405deg); -ms-transform: scale(0.8) rotate(405deg); transform: scale(0.8) rotate(405deg); opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } 100% { -webkit-transform: scale(0.3) rotate(0deg); -moz-transform: scale(0.3) rotate(0deg); -o-transform: scale(0.3) rotate(0deg); -ms-transform: scale(0.3) rotate(0deg); transform: scale(0.3) rotate(0deg); 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); } } @-moz-keyframes fade { 0% { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; -webkit-filter: alpha(opacity=80); -moz-filter: alpha(opacity=80); -ms-filter: alpha(opacity=80); -o-filter: alpha(opacity=80); filter: alpha(opacity=80); } 50% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } 100% { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; -webkit-filter: alpha(opacity=80); -moz-filter: alpha(opacity=80); -ms-filter: alpha(opacity=80); -o-filter: alpha(opacity=80); filter: alpha(opacity=80); } } @-webkit-keyframes fade { 0% { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; -webkit-filter: alpha(opacity=80); -moz-filter: alpha(opacity=80); -ms-filter: alpha(opacity=80); -o-filter: alpha(opacity=80); filter: alpha(opacity=80); } 50% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } 100% { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; -webkit-filter: alpha(opacity=80); -moz-filter: alpha(opacity=80); -ms-filter: alpha(opacity=80); -o-filter: alpha(opacity=80); filter: alpha(opacity=80); } } @-o-keyframes fade { 0% { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; -webkit-filter: alpha(opacity=80); -moz-filter: alpha(opacity=80); -ms-filter: alpha(opacity=80); -o-filter: alpha(opacity=80); filter: alpha(opacity=80); } 50% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } 100% { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; -webkit-filter: alpha(opacity=80); -moz-filter: alpha(opacity=80); -ms-filter: alpha(opacity=80); -o-filter: alpha(opacity=80); filter: alpha(opacity=80); } } @keyframes fade { 0% { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; -webkit-filter: alpha(opacity=80); -moz-filter: alpha(opacity=80); -ms-filter: alpha(opacity=80); -o-filter: alpha(opacity=80); filter: alpha(opacity=80); } 50% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } 100% { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; -webkit-filter: alpha(opacity=80); -moz-filter: alpha(opacity=80); -ms-filter: alpha(opacity=80); -o-filter: alpha(opacity=80); filter: alpha(opacity=80); } } .Breadcrumb { color: #0791e6; font-size: 14px; } @media only screen and (min-width: 48em) { .Breadcrumb { font-weight: bold; } } .Breadcrumb-desktop { display: none; } @media only screen and (min-width: 48em) { .Breadcrumb-desktop { display: block; } } .Breadcrumb-mobile { max-width: calc(100vw - 2.25rem); overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .Breadcrumb-mobile:before { color: #696969; font-size: 1rem; font-weight: normal; content: "<"; display: inline-block; padding: 0 0.4em; } @media only screen and (min-width: 48em) { .Breadcrumb-mobile { display: none; } } .Breadcrumb.is-white .Breadcrumb-desktop > *:after, .Breadcrumb.is-white .Breadcrumb-mobile > *:after { color: #fff; } .Breadcrumb.is-white .Breadcrumb-desktop > *:last-child, .Breadcrumb.is-white .Breadcrumb-mobile > *:last-child { color: #fff; } .Breadcrumb-mobile > *:after, .Breadcrumb-desktop > *:after { color: #696969; content: ">"; font-size: 1rem; font-weight: normal; display: inline-block; padding: 0 0.4em; } .Breadcrumb-mobile > *:last-child, .Breadcrumb-desktop > *:last-child { color: #696969 !important; } .Breadcrumb-mobile > *:last-child:after, .Breadcrumb-desktop > *:last-child:after { display: none; } .Breadcrumb-mobile a, .Breadcrumb-desktop a { text-decoration: none; color: #0791e6 !important; } .Breadcrumb.is-inversed { color: rgba(255,255,255,0.5); } .Breadcrumb.is-inversed > a { color: #7fc719; } .Breadcrumb.is-inversed > strong { color: #fff; } .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); } } .DiscussionActions { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; color: #ff7f38; margin-bottom: 1em; } @media only screen and (min-width: 64em) { .DiscussionActions { -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; margin: 0; } } .DiscussionActions > * { margin-left: 1em; } .DiscussionActions > *:first-child { margin-left: 0; } .DiscussionActions a { color: #ff7f38 !important; } .DiscussionActions span { cursor: pointer; } .DiscussionActions span:before { margin-right: 0.3em; } .ProjectCourse { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -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-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin-top: 10px; } .ProjectCourse-figure { width: 35px; height: 35px; overflow: hidden; } .ProjectCourse-figure img { width: 100%; } .ProjectCourse-title { color: #3a3c3f; font-size: 14px; font-weight: bold; margin-left: 14px; } .Sidebar-element { 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; padding: 1em 0.7em; } .Sidebar-element .DiscussionInfo { width: 100%; } .Sidebar-element .DiscussionInfo-content { width: 100%; } .Sidebar-title { font-size: 18px; font-family: 'cooper_hewittmedium'; font-weight: 600; text-align: left; } .Sidebar-subtitle { font-size: 14px; line-height: 1.29; text-align: left; } .Sidebar-author { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin-top: 6px; } .Sidebar-author-figure { margin-right: 7px; width: 30px; height: 30px; overflow: hidden; -webkit-border-radius: 23px; border-radius: 23px; } .Sidebar-author-figure img { width: 100%; } .Sidebar-divider { border: solid 0.5px #c7c7c7; } .Sidebar-holder { 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; } .MainContribution-breadcrumb { background: #f6f6f6; padding: 0.5rem 12px; } @media only screen and (min-width: 48em) { .MainContribution-breadcrumb { padding: 1rem 1rem 14px 1rem; } } .MainContribution-header { padding: 12px 1rem 0px 1rem; } @media only screen and (min-width: 48em) { .MainContribution-header { padding: 1.5rem 1rem 0px 1rem; } } .MainContribution-top { display: grid; grid-template-columns: 40px 1fr; grid-column-gap: 12px; grid-template-rows: auto 24px auto 48px; } @media only screen and (min-width: 48em) { .MainContribution-top { grid-column-gap: 0; grid-template-columns: 5.5rem auto 1fr; grid-template-rows: auto auto 86px; } } .MainContribution-avatar { margin-right: 0.5rem; } @media only screen and (min-width: 48em) { .MainContribution-avatar { margin-right: 12px; } } .MainContribution-avatar img { -webkit-border-radius: 50%; border-radius: 50%; overflow: hidden; } @media only screen and (min-width: 48em) { .MainContribution-avatar img { width: 30px; height: 30px; } } .MainContribution-like { grid-row-start: 1; grid-row-end: 3; grid-column-start: 1; grid-column-end: 2; } @media only screen and (min-width: 48em) { .MainContribution-like { grid-row-end: 4; margin: 0 2rem 0 1rem; } } .MainContribution-title { grid-row-start: 1; grid-row-end: 2; grid-column-start: 2; grid-column-end: 3; margin-bottom: 12px; color: #0791e6; font-weight: bold; word-break: break-word; word-wrap: break-word; } @media only screen and (min-width: 48em) { .MainContribution-title { grid-column-end: 4; color: #273b47; font-size: 2rem; line-height: 38px; margin-bottom: 0; font-family: 'cooper_hewittmedium'; } } .MainContribution-title.is-permalink { background: rgba(7,145,230,0.1); padding: 0.25rem 0.5rem; font-size: 14px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; line-height: normal; font-family: 'Lato', sans-serif; font-weight: normal; position: relative; } .MainContribution-title.is-permalink span { -webkit-flex-shrink: 0; flex-shrink: 0; } .MainContribution-title.is-permalink .MainContribution-head { font-weight: bold; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; color: #0791e6; margin-left: 0.5rem; } .MainContribution-permalink { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .MainContribution-user { grid-row-start: 2; grid-row-end: 3; grid-column-start: 2; grid-column-end: 3; 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; position: relative; } @media only screen and (min-width: 48em) { .MainContribution-user { border-top: solid 1px #f6f6f6; grid-row-start: 3; grid-row-end: 4; padding-right: 1rem; margin-top: 1rem; } } .MainContribution-user a { color: #606164; font-size: 14px; font-weight: bold; } @media only screen and (min-width: 48em) { .MainContribution-user a { font-size: 1rem; color: #0791e6; } } .MainContribution-text { grid-row-start: 3; grid-row-end: 4; grid-column-start: 1; grid-column-end: 3; margin-top: 1rem; overflow-y: scroll; word-break: break-word; } @media only screen and (min-width: 48em) { .MainContribution-text { grid-row-start: 2; grid-row-end: 3; grid-column-start: 2; grid-column-end: 4; margin-top: 1.5rem; line-height: 1.5; } } .MainContribution-text .Discussion-content { margin: 0; font-size: 14px; line-height: 18px; color: #606164; } @media only screen and (min-width: 48em) { .MainContribution-text .Discussion-content { font-size: 1rem; } } .MainContribution-text .Discussion-content p { margin: 0; } .MainContribution-actions { 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; } .MainContribution-footer { 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; grid-row-start: 4; grid-row-end: 5; grid-column-start: 1; grid-column-end: 3; border-top: solid 1px #f6f6f6; margin-top: 0.5rem; color: #a9aaad; } @media only screen and (min-width: 48em) { .MainContribution-footer { grid-row-start: 3; grid-row-end: 4; grid-column-start: 3; grid-column-end: 4; margin-top: 1rem; } } .MainContribution-category { -webkit-border-radius: 12px; border-radius: 12px; padding: 5px 10px; font-size: 12px; color: #fff; position: relative; line-height: 9px; } .MainContribution-career { position: absolute; top: 0; right: 0; left: 0; bottom: 0; } .MainContribution-menuicon { cursor: pointer; width: 0.25rem; height: 0.25rem; -webkit-border-radius: 50%; border-radius: 50%; margin: 0 0.25rem; 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; background: #ff7436; position: relative; } .MainContribution-menuicon:before, .MainContribution-menuicon:after { width: 0.25rem; height: 0.25rem; -webkit-border-radius: 50%; border-radius: 50%; content: ' '; background: #ff7436; position: absolute; } .MainContribution-menuicon:before { left: -0.3rem; } .MainContribution-menuicon:after { right: -0.3rem; } .MainContribution-action { 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-right: 1rem; cursor: pointer; } .MainContribution-action.orange { color: #ff7f38; } .MainContribution-action.desktop { display: none; } @media only screen and (min-width: 48em) { .MainContribution-action.desktop { display: block; font-size: 14px; } } .MainContribution-action.desktop .icon-trash, .MainContribution-action.desktop .icon-pencil, .MainContribution-action.desktop .icon-information { margin-right: 0.25rem; cursor: pointer; } @media only screen and (min-width: 48em) { .MainContribution-action.mobile { display: none; } } @media only screen and (min-width: 48em) { .MainContribution-action:first-child:before { -webkit-border-radius: 50%; border-radius: 50%; content: ' '; width: 0.25rem; height: 0.25rem; background: #a9aaad; margin-right: 1rem; } } @media only screen and (min-width: 48em) { .MainContribution-action:nth-child(2):after { -webkit-border-radius: 50%; border-radius: 50%; content: ' '; width: 0.25rem; height: 0.25rem; background: #a9aaad; margin-left: 1rem; } } .MainContribution-description { font-size: 14px; } .MainContribution-icon { margin-right: 0.25rem; font-size: 15px; } .MainContribution-open { background: #ff7f38; color: #fff; padding: 0.5rem 1rem; font-weight: bold; font-size: 14px; position: absolute; width: calc(100% - 2rem); } .MainContribution-menu { position: relative; cursor: pointer; } .MainContribution-triangle { position: absolute; left: 9.6rem; top: -1rem; width: 0; height: 0; border-left: 0.5rem solid transparent; border-right: 0.5rem solid transparent; border-bottom: 0.5rem solid #ff7f38; } .MainContribution-edit, .MainContribution-delete { cursor: pointer; } .MainContribution-organizer { 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: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .MainContribution-organizer span { margin-right: 0.5rem; } .MainContribution-organizer a { color: #fff; } .MainContribution-toblog { background: transparent; color: #ff7f38; font-size: 14px; border: none; } .MainContribution-toblog:hover { cursor: pointer; } .MainContribution-related { 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: 48em) { .MainContribution-related { padding-left: 5.5rem; } } .MainContribution-related-figure { width: 1rem; margin-right: 0.5rem; margin-bottom: 2px; } .MainContribution-related-figure img { width: 100%; } .MainContribution-related-text { 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: #0791e6; font-size: 14px; line-height: 1.42; } .MainContribution-related-divider { margin: 0 0.5rem; } .PayPopup { text-align: center; } .ModalFavoritesFull { position: relative; padding: 4.5rem 0.5rem 1.5rem 0.5rem; text-align: center; } .ModalFavoritesFull p { font-size: 14px; } .ModalFavoritesFull p span { cursor: pointer; color: #079be9; } .ModalFavoritesFull p.is-bigger { margin-bottom: 1.25rem; font-family: 'cooper_hewittmedium'; line-height: 22px; font-size: 18px; font-weight: bold; } .ModalFavoritesFull .btn { margin-top: 1.25rem; } .ModalFavoritesFull-symbol { width: 86px; height: 86px; position: absolute; -webkit-border-radius: 50%; border-radius: 50%; top: -43px; margin-left: auto; margin-right: auto; left: 0; right: 0; background: #fecc01; 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; color: #fff; font-size: 23px; } @media only screen and (min-width: 48em) { .ModalFavoritesFull-symbol { width: 106px; height: 106px; top: -53px; font-size: 28px; } } .CommentList { margin-bottom: 1em; margin-top: 1em; } .CommentList:not(.isNested) > .Comment:before { content: ''; position: absolute; top: 63px; bottom: 1rem; left: 19px; z-index: 1; background-color: #0791e6; width: 2px; } .CommentList:not(.isNested) > .Comment:after { content: ''; position: absolute; width: 1rem; bottom: 1rem; left: 19px; height: 2px; background: #0791e6; z-index: 1; } .CommentList.isNested .CommentMeta { line-height: normal; } .CommentList.isNested .CommentDelete { height: auto; } .CommentList.isNested .CommentAuthor-name { max-width: 180px; } .CommentList.isNested .CommentAuthor-avatar { width: auto; height: auto; margin-right: 0.5em; } .CommentList.isNested .CommentAuthor-avatar img { width: 20px; height: 20px; } .CommentList.isNested .CommentAuthor-rank { display: none; } @media only screen and (max-width: 1250px) { .CommentList.isNested .CommentAuthor-name { max-width: 70px; } } @media only screen and (max-width: 1000px) { .CommentList.isNested .CommentAuthor-name { max-width: 425px; } } @media only screen and (max-width: 768px) { .CommentList.isNested .CommentAuthor-name { max-width: 90px; } } .Comment { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding: 0; width: 100%; position: relative; margin-bottom: 1em; } .Comment:last-child { margin-bottom: 0; } .Comment:hover .ButtonBestAnswer:not(.is-mobile) { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; display: none; } .Comment-viewMore { font-size: 14px; color: #0791e6; cursor: pointer; font-weight: bold; margin: 0.5em 0; } .Comment-date { margin-bottom: 1rem; } .Comment-body { width: 100%; } .Comment-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .Comment-content { position: relative; } .Comment-content pre code { max-width: 285px; } @media only screen and (min-width: 48em) { .Comment-content pre code { max-width: 320px; margin-left: auto; margin-right: auto; } } @media only screen and (min-width: 1200px) { .Comment-content pre code { max-width: 460px; } } @media only screen and (min-width: 1400px) { .Comment-content pre code { max-width: 600px; } } .Comment-wrapper { -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; 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%; position: relative; margin-left: 1rem; } .Comment-wrapper + :not(.CommentMeta) { margin-bottom: 1em; } .Comment-getMore { color: #0791e6; padding: 1em; border-top: 1px solid #0791e6; cursor: pointer; max-width: 580px; } .Comment-getMore span { margin-right: 8px; } .Comment-getMore:hover { text-decoration: underline; } .Comment-loader { width: 100%; 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; } .isNested .Comment-body { margin-left: 0; width: 100%; } .isNested .Comment .CommentStar:after { display: none; } .isNested .Comment .CommentStar:before { display: none; } .isNested .CommentContent-data { padding-bottom: 0; } .Comment-bookmark-time { color: #0791e6; font-size: 14px; margin-top: 7px; } .Comment-bookmark-time:hover { cursor: pointer; } .Comment-bookmark-time .Comment-bookmark-icon { margin-right: 6px; } .CommentMeta { -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-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #989898; font-size: 14px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; line-height: 30px; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; width: 100%; margin-left: 2px; -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; } .CommentMeta-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .CommentMeta-date { position: relative; -webkit-flex-shrink: 0; flex-shrink: 0; color: #989898; 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; } .CommentMeta-date [class^="icon-"] { color: #989898; } .CommentMeta-date span { margin-right: 0.25em; } @media only screen and (max-width: 768px) { .CommentMeta-date { display: none; } } .CommentAuthor { -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; z-index: 2; } .CommentAuthor-avatar { -webkit-flex-shrink: 0; flex-shrink: 0; margin-right: 0.75em; height: 30px; width: 30px; } .CommentAuthor-avatar img { -webkit-border-radius: 50%; border-radius: 50%; object-fit: cover; } .CommentAuthor-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .CommentAuthor-name { color: #0791e6; font-weight: bold; margin-right: 0.5em; max-width: 215px; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .CommentAuthor-rank { -webkit-flex-shrink: 0; flex-shrink: 0; color: #989898; font-weight: normal; margin-right: 0.5em; font-size: 0.9em; } @media only screen and (max-width: 1250px) { .CommentAuthor-name { max-width: 105px; } } @media only screen and (max-width: 1000px) { .CommentAuthor-name { max-width: 450px; } } @media only screen and (max-width: 768px) { .CommentAuthor-name { max-width: 90px; } } .CommentDelete { -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; border: none; color: #989898; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; font-size: 1em; height: 30px; padding: 0; padding-left: 0.25em; padding-right: 0.25em; position: relative; z-index: 2; } .CommentDelete [class^="icon-"] { color: inherit; } .CommentDelete:hover, .CommentDelete.is-active { color: #f00; cursor: pointer; } .CommentDelete .message { display: none; } .delete-enter { opacity: 0.1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; -webkit-filter: alpha(opacity=10); -moz-filter: alpha(opacity=10); -ms-filter: alpha(opacity=10); -o-filter: alpha(opacity=10); filter: alpha(opacity=10); will-change: opacity; } .delete-enter-active { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; -ms-transition: opacity 0.3s; transition: opacity 0.3s; } .delete-leave { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; will-change: opacity; } .delete-leave-active { opacity: 0.1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; -webkit-filter: alpha(opacity=10); -moz-filter: alpha(opacity=10); -ms-filter: alpha(opacity=10); -o-filter: alpha(opacity=10); filter: alpha(opacity=10); -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; -ms-transition: opacity 0.3s; transition: opacity 0.3s; } .ButtonBestAnswer { background-color: #f6f6f6; border: none; font-size: 12px; -webkit-border-radius: 0.25em; border-radius: 0.25em; color: #1b9ad1; font-weight: bold; margin-left: 0.5rem; padding: 0; -webkit-transition: 0.3s -webkit-transform; -moz-transition: 0.3s -moz-transform; -o-transition: 0.3s -o-transform; -ms-transition: 0.3s -ms-transform; transition: 0.3s transform; will-change: transform; display: none; margin-bottom: 0.5rem; -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; -ms-transition: 0.2s; transition: 0.2s; } .ButtonBestAnswer.is-mobile { display: block; margin-left: 0; } .ButtonBestAnswer:hover { cursor: pointer; } .ButtonBestAnswer:hover .icon-check { color: #98ca3f; } .ButtonBestAnswer:active { -webkit-transform: scale(0.99); -moz-transform: scale(0.99); -o-transform: scale(0.99); -ms-transform: scale(0.99); transform: scale(0.99); } .ButtonBestAnswer span { -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; } .ButtonBestAnswer .icon-check { color: rgba(214,214,214,0.8); font-size: 12px; text-shadow: 1px 1px 1px #fff, 0 0 0 #000, 1px 1px 1px #fff; } .CommentActions { background: #fff; border: 1px solid #c7c7c7; -webkit-border-radius: 5px; border-radius: 5px; margin-top: 1rem; max-width: 155px; } .CommentActions-reply { background: none; cursor: pointer; text-align: center; font-size: 14px; color: #0791e6; margin: 0.5em 1rem; padding: 3px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .CommentActions-reply [class^="icon-"] { margin-right: 0.5em; } .CommentActions.disabled { background: none; border: none; } .CommentActions.disabled .CommentActions-reply { text-decoration: underline; } .CommentActions.disabled .CommentActions-reply:hover { color: #0791e6; } .Highlighted { background-color: #f3f8eb; -webkit-border-radius: 0; border-radius: 0; padding: 1em; margin: 2em -0.5em; 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; } .Highlighted-tag { font-size: 14px; color: #273b47; font-weight: bold; line-height: 1.3; } .Highlighted-tag .icon-check { color: #98ca3f; font-size: 1.25em; text-shadow: none; } .Highlighted-tag span { vertical-align: text-bottom; } .Highlighted-content { position: relative; z-index: 1; } .Highlighted .Comment-wrapper { background-color: transparent !important; font-size: 1rem; padding-top: 0; width: 100%; padding: 0; } .Highlighted .Comment-stars { top: 0 !important; left: -3rem !important; } .Highlighted .Comment-body { padding: 0 !important; } .Highlighted .Comment .level-3 { margin-left: 0; } .Highlighted .CommentList.isNested .Comment-body { margin-left: 0 !important; } .highlighted-enter { opacity: 0.01; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)"; -webkit-filter: alpha(opacity=1); -moz-filter: alpha(opacity=1); -ms-filter: alpha(opacity=1); -o-filter: alpha(opacity=1); filter: alpha(opacity=1); } .highlighted-enter-active { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; -ms-transition: opacity 0.3s; transition: opacity 0.3s; } .highlighted-leave { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; position: absolute; top: 0; } .highlighted-leave-active { opacity: 0.01; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)"; -webkit-filter: alpha(opacity=1); -moz-filter: alpha(opacity=1); -ms-filter: alpha(opacity=1); -o-filter: alpha(opacity=1); filter: alpha(opacity=1); -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; -ms-transition: opacity 0.3s; transition: opacity 0.3s; } .CommentApp { margin: 1rem 0 2rem; } .CommentApp-loader { display: block; text-align: center; padding: 0.5rem 0; } .InitialComment { -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #c7c7c7; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding: 10px 5px; color: #c7c7c7; -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: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .InitialComment.is-white { background: #fff; } .InitialComment-avatar { 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; } .InitialComment figure { margin-right: 10px; -webkit-border-radius: 50%; border-radius: 50%; overflow: hidden; } .InitialComment figure img { object-fit: cover; } @media only screen and (min-width: 48em) { body { background-color: #f6f6f6; } } .LoginView { margin: 0; } @media only screen and (min-width: 48em) { .LoginView { margin: 2rem 0; } } .Loginv2 { text-align: center; } @media only screen and (min-width: 48em) { .Loginv2 { grid-template-columns: minmax(auto, 376px); display: grid; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } } @media only screen and (min-width: 64em) { .Loginv2 { grid-template-columns: minmax(auto, 405px); } } .Loginv2-container { margin-bottom: 1.5rem; } @media only screen and (min-width: 48em) { .Loginv2-container { background-color: #fff; width: 376px; margin: 0 auto 1.5rem auto; -webkit-box-shadow: 0 1px 8px 0 rgba(0,0,0,0.08); box-shadow: 0 1px 8px 0 rgba(0,0,0,0.08); } } .Loginv2-logo { width: 250px; margin: 0 auto; } .Loginv2-logo img { width: 100%; } .Loginv2-loginTop { padding-top: 2rem; } .Loginv2-link { font-weight: bold; text-decoration: none; font-size: 1.1rem; } .LoginSocial { padding: 16px 10px 0 10px; } @media only screen and (min-width: 48em) { .LoginSocial { padding: 24px 40px 0px 40px; } } @media only screen and (min-width: 64em) { .LoginSocial { padding: 24px 32px 0px 32px; } } .LoginSocial a { margin-bottom: 10px; display: grid; grid-template-columns: 18px 1fr; -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; } .LoginSocial-facebook { margin-bottom: 12px; } .LoginSocial .btn-ggl { background-color: #dd4b39; border: 1px solid rgba(0,0,0,0.2); -webkit-border-radius: 3px; border-radius: 3px; color: #fff; } .LoginSocial .btn-ggl strong { vertical-align: top; } .LoginSocial .btn-ggl:hover { background-color: #c23321; } .LoginDivider { text-align: center; overflow: hidden; margin: 1rem auto; width: 94%; } @media only screen and (min-width: 48em) { .LoginDivider { width: 79%; } } @media only screen and (min-width: 64em) { .LoginDivider { width: 82%; } } .LoginDivider-text { position: relative; font-family: 'cooper_hewittmedium'; padding: 12px; font-weight: 600; color: #273b47; font-size: 20px; } .LoginDivider-text:before { content: ''; position: absolute; top: 50%; right: 100%; width: 5000px; border-bottom: 1px solid #e4e4e4; } .LoginDivider-text:after { content: ''; position: absolute; top: 50%; left: 100%; width: 5000px; border-bottom: 1px solid #e4e4e4; } .LoginWithEmail { padding: 0px 10px 24px; } @media only screen and (min-width: 48em) { .LoginWithEmail { padding: 0px 40px 24px; } } @media only screen and (min-width: 64em) { .LoginWithEmail { padding: 0px 32px 24px; } } .LoginWithEmail button { display: block; width: 100%; padding: 14px 0; font-weight: bold; } .LoginWithEmail-lostpassword { margin-top: 16px; } .LoginWithEmail-lostpassword a { font-size: 14px; color: #0791e6; text-decoration: none; } .LoginWithEmail .FormInput-error { text-align: left; } .AccountFooter { padding: 24px 10px; background-color: #f6f6f6; } @media only screen and (min-width: 48em) { .AccountFooter { padding: 24px 42px; } } @media only screen and (min-width: 64em) { .AccountFooter { padding: 24px 32px; } } .AccountFooter-create { margin-bottom: 16px; } .AccountFooter-create span { font-size: 14px; font-weight: bold; line-height: 1.37; color: #3a3c3f; } .AccountFooter-btn { display: block; font-size: 16px; padding: 12px 0.8em 12px 0.8em; font-size: 1rem; border: 1px solid #0791e6; -webkit-border-radius: 4px; border-radius: 4px; color: #0791e6; cursor: pointer; outline: none; background: #fff; text-decoration: none; font-weight: bold; } .NotificationBanner { background-color: #425c3d; padding: 6px 0; margin-bottom: 1em; } @media only screen and (min-width: 48em) { .NotificationBanner { margin-top: -2rem; } } .NotificationBanner-content { 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; max-width: 400px; margin: 0 auto; } .NotificationBanner i { color: #c1df8b; margin-right: 0.75rem; } .NotificationBanner p { color: #c1df8b; font-size: 14px; line-height: 1.57; letter-spacing: 0.25px; } @media only screen and (min-width: 48em) { body { background-color: #f6f6f6; } } .register-v2 { margin: 0; text-align: 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; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .register-v2-thanks-payment { font-size: 20px; font-weight: 600; } @media only screen and (min-width: 48em) { .registerV2-container { padding-top: 1px; background-color: #fff; margin: 1em auto 0 auto; -webkit-box-shadow: 0 1px 8px 0 rgba(0,0,0,0.08); box-shadow: 0 1px 8px 0 rgba(0,0,0,0.08); width: 432px; } } .registerV2-disclaimer { text-align: center; line-height: 20px; font-weight: bold; margin: 2rem 0 -0.5rem 0; } .registerV2-registerTop { padding-top: 2rem; } .RegisterButton { padding: 0px 10px 24px; } @media only screen and (min-width: 48em) { .RegisterButton { padding: 0px 40px 24px; } } @media only screen and (min-width: 64em) { .RegisterButton { padding: 0px 32px 24px; } } .RegisterButton button { display: block; width: 100%; padding: 14px 0; font-weight: bold; } .RegisterForm { padding: 2em 1.5em; } .RegisterForm button { display: block; width: 100%; padding: 14px 0; font-weight: bold; } .RegisterForm a { color: #0791e6; text-decoration: none; text-align: left; } .RegisterForm-checkbox { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin-bottom: 24px; color: #273b47; } .RegisterForm-checkbox span { font-size: 13px; text-align: left; margin-left: 6px; } .RegisterForm .FormInput-error { text-align: left; } .RegisterForm-username { position: relative; text-align: left; } .RegisterForm-username label { position: absolute; top: 17px; left: 10px; font-size: 24px; color: #0791e6; font-weight: bold; } .RegisterForm-username label:focus { top: 18px; } .RegisterForm-username .FormInput-field { padding: 22px 12px 18px 40px; } .RegisterForm-username .FormInput-field.error, .RegisterForm-username .FormInput-field.error:focus { padding: 24px 12px 16px 40px; } .RegisterForm-username .FormInput-field.filled:not(.error), .RegisterForm-username .FormInput-field:valid:not(.error), .RegisterForm-username .FormInput-field:focus:not(.error) { padding: 24px 12px 16px 40px; } .PaymentSuccessful { background: rgba(152,202,63,0.2); color: #65872a; border: 1px solid #98ca3f; margin: 1.5em; margin-bottom: 0; } .PaymentSuccessful h1 { font-size: 18px; line-height: 26px; font-family: 'cooper_hewittmedium'; font-weight: 500; padding: 0.5em 0; } .PaymentSuccessful h1 .icon-check_B { margin: 5px; font-size: 18px; color: #65872a; } .PaymentSuccessful-notification { font-size: 14px; padding: 0 0.5em 1em 0.5em; color: #1c3643; } .PaymentSuccessful-wrapper { padding: 0 0.75rem; text-align: center; max-width: 536px; margin: 0 auto; } .Steps { padding: 1rem 0.25rem; color: #fff; text-align: center; } @media only screen and (min-width: 48em) { .Steps { padding: 1.5rem 1rem; } } .Steps-details { display: none; padding: 0 3rem; -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; } @media only screen and (min-width: 64em) { .Steps-details { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; max-width: 526px; font-size: 0.75rem; line-height: 1rem; color: #fff; margin: 0 auto; margin-top: 0.5rem; } } .Steps-details :first-child { max-width: 90px; } .Steps-bar { 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; padding: 0 3rem; margin: 0 auto; } @media only screen and (min-width: 48em) { .Steps-bar { padding: 0 13rem; } } @media only screen and (min-width: 64em) { .Steps-bar { max-width: 440px; } } .Steps-circle { width: 1.25rem; height: 1.25rem; -webkit-border-radius: 50%; border-radius: 50%; 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; } .Steps-circle .Steps-current { height: 1rem; width: 1rem; -webkit-border-radius: 50%; border-radius: 50%; } .Steps-circle.is-empty { background: #8da2c0; } .Steps-circle.is-empty .Steps-current { background: #121f3d; } .Steps-circle.is-full { background: #98ca3f; } .Steps-circle.is-full .Steps-current { background: #98ca3f; } .Steps-circle.is-current { background: #98ca3f; } .Steps-circle.is-current .Steps-current { background: #121f3d; } .Steps-line { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; height: 2px; margin: 0 0.5rem; background: #98ca3f; } .Steps-line.is-empty { background: #8da2c0; } .Steps-subtitle { margin-top: 0.5rem; line-height: 1.25; } @media only screen and (min-width: 48em) { .Steps-subtitle { margin-top: 1rem; line-height: 20px; } } .PostCard { -webkit-border-radius: 8px; border-radius: 8px; border: 1px solid #fff; background-color: #fff; -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); overflow: hidden; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; } .PostCard:hover { border-color: #0791e6; -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2); box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2); } .PostCard > a { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; } .PostCard-content { word-break: break-word; } .PostCard-container { display: inline-grid; } .PostCard-container:nth-of-type(4n) { display: none; } @media only screen and (min-width: 64em) { .PostCard-container:nth-of-type(4n) { display: inline-grid; } } .PostCard-header { padding: 14px; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-position: center; } .PostCard-header .Star { margin: 0; position: relative; z-index: 2; } .PostCard-body { padding: 14px; padding-bottom: 50px; } .PostCard-body h3 { color: #0791e6; font-size: 16px; line-height: 1.5; margin-bottom: 16px; word-wrap: break-word; } .PostCard-body p { font-size: 14px; line-height: 1.5; } .PostCard-body-content { font-size: 16px; color: #5c5d60; } .PostCard-author { padding: 14px; 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; position: absolute; bottom: 0; } .PostCard-author img { -webkit-border-radius: 20px; border-radius: 20px; margin-right: 5px; } .PostCard-author span { font-size: 14px; font-weight: bold; color: #696969; } .PostCard-holder { display: grid; grid-template-columns: 1fr; grid-gap: 16px; padding: 0 0.5em; } @media only screen and (min-width: 48em) { .PostCard-holder { grid-template-columns: 1fr 1fr 1fr; } } @media only screen and (min-width: 64em) { .PostCard-holder { grid-template-columns: 1fr 1fr 1fr 1fr; padding: 0; } } .RelatedPosts { padding: 34px 0; } .RelatedPosts-title { padding: 0 0.5rem; margin-bottom: 15px; } .RelatedPosts-title h4 { color: #696969; font-size: 16px; } .PulseEditor { 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; } .PulseEditor:not(.is-expanded) { margin: 1em 0; } .PulseEditor.is-expanded { position: fixed; top: 0; right: 0; bottom: 0; left: 0; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; z-index: 100; } .PulseEditor.is-expanded .btn-Sky { display: none; } .PulseEditor-submit { font-size: 16px; color: #696969; } .PulseEditor-submit span { margin-right: 0.5em; } .PulseEditor-field, .PulseEditor-preview { -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; border: 1px solid #ceced1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: Arial; font-size: 14px; line-height: 1.5; padding: 1em; width: 100%; } .PulseEditor-field { -webkit-box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.2); box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.2); min-height: 140px; resize: none; } .PulseEditor-field:focus { outline: none; } .PulseEditor-field:disabled { background-color: #e9e9e9; cursor: wait; } .PulseEditor-preview { background-color: #fff; margin-bottom: 0 !important; max-height: none; overflow-y: auto !important; } .PulseEditor-expanded, .PulseEditor-wide { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .PulseEditor-expanded .PulseEditor-field, .PulseEditor-wide .PulseEditor-field, .PulseEditor-expanded .PulseEditor-preview, .PulseEditor-wide .PulseEditor-preview { border: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; width: 50%; } .PulseEditor-expanded .PulseEditor-preview, .PulseEditor-wide .PulseEditor-preview { border-left: 1px solid #0791e6 !important; -webkit-border-radius: 0 0 5px 0 !important; border-radius: 0 0 5px 0 !important; } .PulseEditor-expanded .PulseEditor-field, .PulseEditor-wide .PulseEditor-field { -webkit-border-radius: 0 0 0 5px !important; border-radius: 0 0 0 5px !important; } .PulseEditor-expanded { overflow-y: scroll; } .PulseEditor-expanded .PulseEditor-preview { max-height: 100%; } .PulseEditor-wide { border: 1px solid #0791e6; border-bottom: none; position: relative; } .PulseEditor-wide .PulseEditor-field, .PulseEditor-wide .PulseEditor-preview { max-height: 238px; } .PulseEditor-helpbar { color: #e9e9e9; border: 1px solid #0791e6; border-top: none; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding: 0; width: 100%; } .PulseEditor-helpbar > div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 14px; padding: 0.5em 1em; width: 50%; } .PulseEditor-helpbar > div:last-of-type { border-left: 1px solid #0791e6 !important; } .PulseEditor-toolbar { background: #0791e6; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #fff; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding: 0 0.3em 0.5em; width: 100%; } .PulseEditor-toolbar-left { -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-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .PulseEditor-toolbar-right { -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-align-self: flex-start; align-self: flex-start; -ms-flex-item-align: start; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin-left: auto; } .PulseEditor-toolbar.is-expanded { -webkit-border-radius: 0; border-radius: 0; } .PulseEditor-toolbar.is-bottom { padding-bottom: 0; } .PulseEditor-title { border: none; -webkit-border-radius: 0.25em; border-radius: 0.25em; margin: 0.5em 0; min-width: 500px; padding: 0.5em 0.75em; } .PulseEditor-buttonGroup { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin: 0.5em 0.5em 0; } .PulseEditor-buttonGroup :first-of-type { -webkit-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; } .PulseEditor-buttonGroup :last-of-type { -webkit-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; } .PulseEditor-buttonGroup :only-of-type { -webkit-border-radius: 5px; border-radius: 5px; } .PulseEditor-button { background: none; border: none; border-right: 1px solid rgba(0,0,0,0.2); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #fff; cursor: pointer; font-size: 12px; min-width: 25px; min-height: 25px; text-align: center; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; padding: 0; } .PulseEditor-button:last-of-type { border-right: none; } .PulseEditor-button:last-of-type span { margin-right: 0; } .PulseEditor-button + .PulseEditor-button { border-left: none; } .PulseEditor-button:hover { background-color: #fff; color: #0791e6; } .PulseEditor-button:focus { outline: none; } @media only screen and (max-width: 48em) { .PulseEditor-button.is-expand { display: none; } } .PulseEditor-button > * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; min-width: 1.75em; padding: 0 0.5em; } .PulseEditor-button .bold { font-weight: bold; } .PulseEditor-button .italic { font-style: italic; } .PulseEditor-button .underline { text-decoration: underline; } .PulseEditor-button [class^="icon-"] { margin-right: 0.25em; } .PulseEditor-emojiBar { background-color: #fff; border: 1px solid #0791e6; border-top: none; -webkit-border-radius: 0 0 0.25em 0.25em; border-radius: 0 0 0.25em 0.25em; padding: 0.25em 0; margin: 0 auto; width: calc(100% - 0.5em); } .PulseEditor-emojiBar.is-expanded { position: absolute; bottom: 0; right: 50%; left: 0; border: none; border-top: 1px solid #0791e6; width: auto; } .PulseEditor-emojiItem { background: none; border: none; -webkit-border-radius: 0.5em; border-radius: 0.5em; cursor: pointer; margin: 0 0.25em; } .PulseEditor-emojiItem:hover { background-color: #0791e6; color: #fff; } .PulseEditor .btn-Sky { margin-top: 1em; } .ShareButtons { 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-bottom: 2rem; } .ShareButtons-title { color: #24385b; } .ShareButtons-list { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; list-style-type: none; } .ShareButtons-item { cursor: pointer; margin-left: 0.5rem; } .ShareButtons-item a { padding: 0.25rem 1rem; border: 1px solid #becde3; -webkit-border-radius: 0.5rem; border-radius: 0.5rem; } .ShareButtons-item:hover { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; -webkit-filter: alpha(opacity=60); -moz-filter: alpha(opacity=60); -ms-filter: alpha(opacity=60); -o-filter: alpha(opacity=60); filter: alpha(opacity=60); } @media only screen and (min-width: 64em) { .ShareButtons { display: none; } } .ShareButtons--sticky { display: none; position: sticky; top: 2rem; height: min-content; margin-right: 1.5rem; margin-top: 1.25rem; } .ShareButtons--sticky .ShareButtons-list { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .ShareButtons--sticky .ShareButtons-item { margin-bottom: 2rem; } .ShareButtons--sticky .ShareButtons-item a { padding: 0.75rem; } @media only screen and (min-width: 64em) { .ShareButtons--sticky { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } } .StepsV2 { padding: 1rem; border-bottom: 1px solid #40587c; } .StepsV2-container { 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; max-height: 25px; } @media print { .StepsV2-container { display: none; } } .StepsV2-logo { display: none; margin-right: 180px; } .StepsV2-logo img { width: auto; } @media only screen and (min-width: 64em) { .StepsV2-logo { display: block; } } .StepsV2-details { color: #becde3; font-weight: 400; font-size: 1rem; line-height: 1.5rem; } .StepsV2-navigator { 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: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .StepsV2-back { background: none; color: #becde3; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit; } .ScrollModal { max-width: 26.25rem; width: 98%; background-color: #fff; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 3; -webkit-border-radius: 0.75rem; border-radius: 0.75rem; position: fixed; top: 50%; } .ScrollModal-overlay { height: 100%; width: 100vw; opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; -webkit-filter: alpha(opacity=80); -moz-filter: alpha(opacity=80); -ms-filter: alpha(opacity=80); -o-filter: alpha(opacity=80); filter: alpha(opacity=80); background-color: #03091e; position: fixed; top: -5px; z-index: 3; } .ScrollModal-heading { 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; font-weight: 600; font-size: 1.375rem; line-height: 28px; color: #121f3d; background: #fff; padding: 0px 2rem 1rem 2rem; -webkit-border-radius: 0.75rem 0.75rem 0px 0px; border-radius: 0.75rem 0.75rem 0px 0px; } .ScrollModal-body { background-color: #eff3f8; padding: 1.5rem 2rem; 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-border-radius: 0px 0px 0.75rem 0.75rem; border-radius: 0px 0px 0.75rem 0.75rem; } .ScrollModal-input { background: #fff; border: 1px solid #8da2c0; -webkit-border-radius: 0.5rem; border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 0.5rem; } .ScrollModal-input:focus { outline: none; } .ScrollModal-input--error { border: 1px solid #ff3933; } .ScrollModal-button { background: #98ca3f; padding: 1rem 1.25rem; border: none; -webkit-border-radius: 0.5rem; border-radius: 0.5rem; font-weight: 800; text-transform: uppercase; cursor: pointer; } .ScrollModal-button:hover { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; -webkit-filter: alpha(opacity=80); -moz-filter: alpha(opacity=80); -ms-filter: alpha(opacity=80); -o-filter: alpha(opacity=80); filter: alpha(opacity=80); } .ScrollModal-close { margin: 0.5rem 1rem; color: #8da2c0; border: none; background-color: transparent; cursor: pointer; } .ScrollModal-close:hover { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; -webkit-filter: alpha(opacity=80); -moz-filter: alpha(opacity=80); -ms-filter: alpha(opacity=80); -o-filter: alpha(opacity=80); filter: alpha(opacity=80); } .ScrollModal-top { text-align: right; } .ScrollModal-icon { background-color: #33b1ff; color: #03091e; padding: 0.75rem; -webkit-border-radius: 100%; border-radius: 100%; margin-right: 1rem; } .ScrollModal-error { margin-bottom: 0.5rem; color: #ff3933; font-weight: 400; font-size: 0.875rem; line-height: 20px; } .ScrollModal-error svg { margin-right: 0.25rem; } .Loader { -webkit-border-radius: 0.5rem; border-radius: 0.5rem; } * { 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; } /* #Formularios */ /* Los formularios son muy importantes en una aplicación y el siguiente es el estandar A para darle estilos, prubalos en responsive también :) + La UI de formularios A no incluye un grilla o forma de distribuir los elementos, debes agregarle o crearle una. + La UI de formularios A no incluye estilos para ``` ``` debes usar una clase de botón para esto. */ /* ## Ejemplo
*/ /* #input_A */ .input_A { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #fff; border: 1px solid #696969; -webkit-border-radius: 0; border-radius: 0; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #696969; font-size: 21px; height: 50px; outline: 0; padding: 0 15px; width: 100%; font-family: 'Lato', sans-serif; } .input_A.is-small { height: 34px; font-size: 15px; } .input_A::-webkit-inner-spin-button, .input_A::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; } .input_A-triangle { position: relative; } .input_A-triangle:before { position: absolute; top: 10px; bottom: 10px; right: 45px; border-left: 1px solid #989898; content: ""; } .input_A-triangle:after { position: absolute; top: 20px; right: 15px; border-left: 10px solid transparent; border-top: 10px solid transparent; border-right: 10px solid transparent; content: ""; border-top-color: #1c3643; display: block; width: 0; height: 0; } /* #label_A */ .label_A { display: block; font-size: 21px; margin-bottom: 10px; } .radio_A, .checkbox_A { margin-right: 10px; } .radio_A > label, .checkbox_A > label { display: inline-block; vertical-align: middle; cursor: pointer; -moz-user-select: none; -ms-user-select: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; } .radio_A input[type="checkbox"], .checkbox_A input[type="checkbox"], .radio_A input[type="radio"], .checkbox_A input[type="radio"] { display: none; } .radio_A input[type="checkbox"]:checked + .radio_A-label, .checkbox_A input[type="checkbox"]:checked + .radio_A-label, .radio_A input[type="radio"]:checked + .radio_A-label, .checkbox_A input[type="radio"]:checked + .radio_A-label, .radio_A input[type="checkbox"]:checked + .checkbox_A-label, .checkbox_A input[type="checkbox"]:checked + .checkbox_A-label, .radio_A input[type="radio"]:checked + .checkbox_A-label, .checkbox_A input[type="radio"]:checked + .checkbox_A-label { color: #98ca3f; font-size: 30px; line-height: 17px; text-align: center; position: relative; } .radio_A-text, .checkbox_A-text { margin-right: 20px; margin-left: 5px; } .radio_A-label, .checkbox_A-label { color: #fff; cursor: pointer; display: inline-block; font-size: 14.2px; margin-right: 5px; position: relative; -moz-user-select: none; -ms-user-select: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; } .radio_A-label:before, .checkbox_A-label:before { background-color: #fff; border: 1px solid #000; content: ""; display: block; height: 22px; width: 22px; vertical-align: middle; } /* #radio_A */ .radio_A { font-size: 13px; } .radio_A-label:before { -webkit-border-radius: 50%; border-radius: 50%; } .radio_A input[type="radio"]:checked + .radio_A-label:after { content: ""; position: absolute; top: 6px; bottom: 6px; right: 6px; left: 6px; background: #98ca3f; -webkit-border-radius: 50%; border-radius: 50%; } /* #checkbox_A */ .checkbox_A-label:before { -webkit-border-radius: 5px; border-radius: 5px; } .checkbox_A input[type="checkbox"]:checked + .checkbox_A-label:before { content: "\2713"; } /* #select_A
*/ .select_A { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; border: 1px solid #696969; color: #696969; font-size: 21px; height: 50px; outline: 0; padding: 0 15px; width: 100%; cursor: pointer; -webkit-border-radius: 5px; border-radius: 5px; } @media only screen and (max-width: 767px) { .input_A, .select_A { height: 35px; font-size: 16px; } .input_A-triangle:after { top: 15px; border-left: 5px solid transparent; border-top: 5px solid transparent; border-right: 5px solid transparent; content: ""; border-top-color: #1c3643; display: block; width: 0; height: 0; } .input_A-triangle:before { right: 30px; } .label_A { font-size: 14px; } .sprite-cvc { zoom: 0.8; } } .LoginView { min-height: calc(100vh - 389px); 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: 60px 0px; } .LoginView.popup { padding: 0; } .LoginView h1 { font-size: 36px; margin-bottom: 26px; } .LoginView h1.is-signup:nth-child(1) { margin-bottom: 0; } .LoginView h1.is-signup:nth-child(2) { margin-bottom: 46px; font-weight: 500; } .LoginView h1.is-loginerror { margin-bottom: 15px; } .LoginView h1.is-changePswrd { margin-bottom: 10px; } .LoginView h2 { font-size: 18px; margin-bottom: 5px; margin-top: 20px; } .LoginView h3 { font-size: 25px; margin-bottom: 25px; } .LoginView h3.is-signup { margin-bottom: 0; } .LoginView h3.has-padding { padding-left: 44px; } .LoginView .errorlist { list-style-type: none; color: #f00; padding: 0; } .LoginView-plane { margin-bottom: 25px; } .LoginView-data { width: 260px; } .LoginView-usrInfo { 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; } .LoginView-signupEmail { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: left; } .LoginView .u-wrapper { text-align: center; max-width: 700px; width: 100%; margin-top: 60px; } .LoginView .u-wrapper.is-signup { margin-top: 0; } .LoginView .u-wrapper.is-recoverymsg { margin-top: 0; } .LoginView-signupSocialNetworks { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: left; padding-right: 45px; } .LoginView-borderLeft { border-left: 2px solid #ececec; padding-left: 44px; } .LoginView-signupSocialbtn { width: 100%; margin: 0px 0 25px; } .LoginView-inputContainer { position: relative; } .LoginView-inputContainer:before { position: absolute; right: 14px; top: 14px; color: #f0b931; } .LoginView-errormsg { text-align: center; } .LoginView-sendbtn { margin-top: 42px; } .LoginView-changePswrd { text-align: center; margin-bottom: 32px; } .LoginView-input { width: 100%; background: #f6f6f6; border: 1px solid #e9e9e9; height: 45px; font-size: 15px; } .LoginView-input.has-warning { padding-right: 35px; border: 2px solid #f0b931; -webkit-box-shadow: inset 0 1px 3px 0 rgba(152,202,63,0.3); box-shadow: inset 0 1px 3px 0 rgba(152,202,63,0.3); background: rgba(240,185,49,0.1); margin-bottom: 5px; } .LoginView-warning { color: #f0b931; font-size: 14px; } .LoginView-loginbtn { margin: 35px 0 25px; } .LoginView-loginMailForm { max-width: 260px; margin: 0 auto; text-align: left; } .LoginView-info { text-align: center; font-size: 14px; margin-top: 64px; } .LoginView-link { color: #273b47; text-decoration: underline; } .LoginView-link.is-red { color: #f00; } .LoginView-socialbtn { max-width: 275px; margin-bottom: 20px; } .LoginView-register { margin-top: 20px; } .LoginView-container { max-width: 450px; margin: 0 auto; text-align: center; border: 2px solid #98ca3f; -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.2); box-shadow: 0 0 5px 0 rgba(0,0,0,0.2); -webkit-border-radius: 5px; border-radius: 5px; padding: 65px 20px 40px 20px; position: relative; } .LoginView-container.is-signup { max-width: 684px; padding: 40px 35px 33px 35px; } .LoginView-container.is-changePswrd { padding: 65px 35px 30px 35px; } .LoginView-registerOptions { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .LoginView-centerbtn { text-align: right; } .LoginView-avatar { position: absolute; -webkit-border-radius: 50%; border-radius: 50%; overflow: hidden; width: 100px; height: 100px; top: -60px; margin-left: auto; margin-right: auto; left: 0; right: 0; z-index: 1; } @media only screen and (max-width: 768px) { .LoginView h3.has-padding { padding: 0; margin-top: 25px; } .LoginView-signupSocialNetworks { padding: 0; } .LoginView-borderLeft { padding: 0; border-left: none; } .LoginView-signupSocialbtn { max-width: 100%; text-align: center; } .LoginView-usrInfo { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .LoginView-data { width: 100%; } .LoginView-registerOptions { display: block; } .LoginView h1.is-signup:nth-child(2) { margin-bottom: 24px; } } @media only screen and (max-width: 640px) { .LoginView { min-height: calc(100vh - 473px); padding: 30px 0px; } .LoginView-container { margin-bottom: 32px; } } .load, .loading, .loading-blue, .u-loading--blue, .Pacman-blue, .NotiBox-loading { background-position: center; background-repeat: no-repeat; } .loading { background-image: url("data:image/gif;base64,R0lGODlhGAAYAPYAAP////////7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v////7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJBQAAACwAAAAAGAAYAAAHmoAAgoOEhYaHgxUWBA4aCxwkJwKIhBMJBguZmpkqLBOUDw2bo5kKEogMEKSkLYgIoqubK5QJsZsNCIgCCraZBiiUA72ZJZQABMMgxgAFvRyfxpixGx3LANKxHtbNth8hy8i9IssHwwsXxgLYsSYpxrXDz5QIDubKlAwR5q2UErC2poxNoLBukwoX0IxVuIAhQ6YRBC5MskaxUCAAIfkECQUAAAAsAAAAABgAGAAAB6GAAIKDhIWGh4MVFgQOGhsOGAcxiIQTCQYLmZqZGwkIlA8Nm6OaMgyHDBCkqwsjEoUIoqykNxWFCbOkNoYCCrmaJjWHA7+ZHzOIBMUND5QFvzATlACYsy/TgtWsIpPTz7kyr5TKv8eUB8ULGzSIAtq/CYi46Qswn7AO9As4toUMEfRcHZIgC9wpRBMovNvU6d60ChcwZFigwYGIAwKwaUQUCAAh+QQJBQAAACwAAAAAGAAYAAAHooAAgoOEhYaHgxUWBA4aCzkkJwKIhBMJBguZmpkqLAiUDw2bo5oyEocMEKSrCxCnhAiirKs3hQmzsy+DAgq4pBogKIMDvpvAwoQExQvHhwW+zYiYrNGU06wNHpSCz746O5TKyzwzhwfLmgQphQLX6D4dhLfomgmwDvQLOoYMEegRyApJkIWLQ0BDEyi426Six4RtgipcwJAhUwQCFypA3IgoEAAh+QQJBQAAACwAAAAAGAAYAAAHrYAAgoOEhYaHgxUWBA4aCxwkJzGIhBMJBguZmpkGLAiUDw2bo5oZEocMEKSrCxCnhAiirKsZn4MJs7MJgwIKuawqFYIDv7MnggTFozlDLZMABcpBPjUMhpisJiIJKZQA2KwfP0DPh9HFGjwJQobJypoQK0S2B++kF4IC4PbBt/aaPWA5+CdjQiEGEd5FQHFIgqxcHF4dmkBh3yYVLmx5q3ABQ4ZMBUhYEOCtpLdAACH5BAkFAAAALAAAAAAYABgAAAeegACCg4SFhoeDFRYEDhoaDgQWFYiEEwkGC5mamQYJE5QPDZujmg0PhwwQpKsLEAyFCKKsqw0IhAmzswmDAgq5rAoCggO/sxaCBMWsBIIFyqsRgpjPoybS1KMqzdibBcjcmswAB+CZxwAC09gGwoK43LuDCA7YDp+EDBHPEa+GErK5GkigNIGCulEGKNyjBKDCBQwZMmXAcGESw4uUAgEAIfkECQUAAAAsAAAAABgAGAAAB62AAIKDhIWGh4MVFgQOGgscJCcxiIQTCQYLmZqZBiwIlA8Nm6OaGRKHDBCkqwsQp4QIoqyrGZ+DCbOzCYMCCrmsKhWCA7+zJ4IExaM5Qy2TAAXKQT41DIaYrCYiCSmUANisHz9Az4fRxRo8CUKGycqaECtEtgfvpBeCAuD2wbf2mj1gOfgnY0IhBhHeRUBxSIKsXBxeHZpAYd8mFS5seatwAUOGTAVIWBDgraS3QAAh+QQJBQAAACwAAAAAGAAYAAAHooAAgoOEhYaHgxUWBA4aCzkkJwKIhBMJBguZmpkqLAiUDw2bo5oyEocMEKSrCxCnhAiirKs3hQmzsy+DAgq4pBogKIMDvpvAwoQExQvHhwW+zYiYrNGU06wNHpSCz746O5TKyzwzhwfLmgQphQLX6D4dhLfomgmwDvQLOoYMEegRyApJkIWLQ0BDEyi426Six4RtgipcwJAhUwQCFypA3IgoEAAh+QQJBQAAACwAAAAAGAAYAAAHoYAAgoOEhYaHgxUWBA4aGw4YBzGIhBMJBguZmpkbCQiUDw2bo5oyDIcMEKSrCyMShQiirKQ3FYUJs6Q2hgIKuZomNYcDv5kfM4gExQ0PlAW/MBOUAJizL9OC1awik9PPuTKvlMq/x5QHxQsbNIgC2r8JiLjpCzCfsA70Czi2hQwR9FwdkiAL3ClEEyi829Tp3rQKFzBkWKDBgYgDArBpRBQIADsAAAAAAAAAAAA="); } .loading-blue, .u-loading--blue { background-image: url("data:image/gif;base64,R0lGODlhGAAYAPYAAP///wBllvL2+ajK2lCVtip+pxJvnaTH2fz8/Yq4zhRxngBllubv9DiGrDaFrOrx9SB4ox53ouTu8/j6+4a1zPD1+JjA1Ja/006TtTKDqgZomAxsmix/qNjn7rzW4hp0oGijwOzz9kqRtCR6pFSXuKrL2whpmZzC1eDr8dLj6w5tm3KpxIS0zLTR34CyypC70GKgvvb5+jCBqczf6a7N3aLG2G6nw0SNsUKMsSZ7pT6Kr8bc50iQs36wyVqbumaiv7DP3hhzn97q8HSqxbbS4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAFAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAGAAYAAAHmoAAgoOEhYaHgxUWBA4aCxwkJwKIhBMJBguZmpkqLBOUDw2bo5kKEogMEKSkLYgIoqubK5QJsZsNCIgCCraZBiiUA72ZJZQABMMgxgAFvRyfxpixGx3LANKxHtbNth8hy8i9IssHwwsXxgLYsSYpxrXDz5QIDubKlAwR5q2UErC2poxNoLBukwoX0IxVuIAhQ6YRBC5MskaxUCAAIfkEAAUAAQAsAAAAABgAGAAAB6GAAIKDhIWGh4MVFgQOGhsOGAcxiIQTCQYLmZqZGwkIlA8Nm6OaMgyHDBCkqwsjEoUIoqykNxWFCbOkNoYCCrmaJjWHA7+ZHzOIBMUND5QFvzATlACYsy/TgtWsIpPTz7kyr5TKv8eUB8ULGzSIAtq/CYi46Qswn7AO9As4toUMEfRcHZIgC9wpRBMovNvU6d60ChcwZFigwYGIAwKwaUQUCAAh+QQABQACACwAAAAAGAAYAAAHooAAgoOEhYaHgxUWBA4aCzkkJwKIhBMJBguZmpkqLAiUDw2bo5oyEocMEKSrCxCnhAiirKs3hQmzsy+DAgq4pBogKIMDvpvAwoQExQvHhwW+zYiYrNGU06wNHpSCz746O5TKyzwzhwfLmgQphQLX6D4dhLfomgmwDvQLOoYMEegRyApJkIWLQ0BDEyi426Six4RtgipcwJAhUwQCFypA3IgoEAAh+QQABQADACwAAAAAGAAYAAAHrYAAgoOEhYaHgxUWBA4aCxwkJzGIhBMJBguZmpkGLAiUDw2bo5oZEocMEKSrCxCnhAiirKsZn4MJs7MJgwIKuawqFYIDv7MnggTFozlDLZMABcpBPjUMhpisJiIJKZQA2KwfP0DPh9HFGjwJQobJypoQK0S2B++kF4IC4PbBt/aaPWA5+CdjQiEGEd5FQHFIgqxcHF4dmkBh3yYVLmx5q3ABQ4ZMBUhYEOCtpLdAACH5BAAFAAQALAAAAAAYABgAAAeegACCg4SFhoeDFRYEDhoaDgQWFYiEEwkGC5mamQYJE5QPDZujmg0PhwwQpKsLEAyFCKKsqw0IhAmzswmDAgq5rAoCggO/sxaCBMWsBIIFyqsRgpjPoybS1KMqzdibBcjcmswAB+CZxwAC09gGwoK43LuDCA7YDp+EDBHPEa+GErK5GkigNIGCulEGKNyjBKDCBQwZMmXAcGESw4uUAgEAIfkEAAUABQAsAAAAABgAGAAAB62AAIKDhIWGh4MVFgQOGgscJCcxiIQTCQYLmZqZBiwIlA8Nm6OaGRKHDBCkqwsQp4QIoqyrGZ+DCbOzCYMCCrmsKhWCA7+zJ4IExaM5Qy2TAAXKQT41DIaYrCYiCSmUANisHz9Az4fRxRo8CUKGycqaECtEtgfvpBeCAuD2wbf2mj1gOfgnY0IhBhHeRUBxSIKsXBxeHZpAYd8mFS5seatwAUOGTAVIWBDgraS3QAAh+QQABQAGACwAAAAAGAAYAAAHooAAgoOEhYaHgxUWBA4aCzkkJwKIhBMJBguZmpkqLAiUDw2bo5oyEocMEKSrCxCnhAiirKs3hQmzsy+DAgq4pBogKIMDvpvAwoQExQvHhwW+zYiYrNGU06wNHpSCz746O5TKyzwzhwfLmgQphQLX6D4dhLfomgmwDvQLOoYMEegRyApJkIWLQ0BDEyi426Six4RtgipcwJAhUwQCFypA3IgoEAAh+QQABQAHACwAAAAAGAAYAAAHoYAAgoOEhYaHgxUWBA4aGw4YBzGIhBMJBguZmpkbCQiUDw2bo5oyDIcMEKSrCyMShQiirKQ3FYUJs6Q2hgIKuZomNYcDv5kfM4gExQ0PlAW/MBOUAJizL9OC1awik9PPuTKvlMq/x5QHxQsbNIgC2r8JiLjpCzCfsA70Czi2hQwR9FwdkiAL3ClEEyi829Tp3rQKFzBkWKDBgYgDArBpRBQIADsAAAAAAAAAAAA="); } /* #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; } .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; } } .MainMenu_A { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; font-size: 14px; height: inherit; } .MainMenu_A-modal { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .MainMenu_A > * { height: inherit; } .MainMenu_A > ul { padding: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .MainMenu_A > ul > li { -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; height: inherit; position: relative; } .MainMenu_A > ul > li:before { content: ""; width: 1px; height: 24px; background: #fff; position: absolute; top: 25%; bottom: 20%; left: 0; } .MainMenu_A > ul > li:first-child:before { display: none; } .MainMenu_A > ul > li > ul { background: #ffa500; position: absolute; top: 100%; left: 0; } .MainMenu_A-count { position: absolute; top: 5px; right: 6px; background: #ff7f38; -webkit-border-radius: 2px; border-radius: 2px; -webkit-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.7); box-shadow: 0 1px 1px rgba(0,0,0,0.7); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 11px; font-weight: bold; line-height: 100%; min-height: 14px; min-width: 14px; padding: 1px 3px; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); } .MainMenu_A-count:empty { display: none; } .MainMenu_A-text { white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .MainMenu_A-icon { font-size: 16px; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); } .MainMenu_A-item { -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-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #fff; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; font-weight: 600; height: inherit; padding: 0 1em; text-decoration: none; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); } .MainMenu_A-item:hover { -webkit-box-shadow: inset 0 3px #ff7f38; box-shadow: inset 0 3px #ff7f38; } .MainMenu_A-button { margin: 0 1em; } .AppMenuDrop { position: absolute; top: 100%; right: 10px; z-index: 5; -webkit-transform: translateY(-2em); -moz-transform: translateY(-2em); -o-transform: translateY(-2em); -ms-transform: translateY(-2em); transform: translateY(-2em); -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; } .AppMenuDrop.is-live { top: 35px; } .AppMenuDrop-icon { -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; -ms-transition: 0.2s; transition: 0.2s; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .AppMenuDrop-check { display: none; } .AppMenuDrop-check:checked ~ .AppMenuDrop { 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); } .AppMenuDrop-check:checked ~ .AppHeader-user .AppMenuDrop-icon { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .AppMenuDrop li { list-style: none; } .AppMenuDrop li:nth-of-type(1) a { max-width: 230px; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .AppMenuDrop li:nth-of-type(1) a:hover, .AppMenuDrop li:nth-of-type(1) a:focus { border-top-color: #ff7f38; } .AppMenuDrop li:nth-of-type(1) a:after { position: absolute; bottom: 100%; right: 5px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 15px solid transparent; content: ""; border-bottom-color: #1c3643; display: block; width: 0; height: 0; margin-bottom: -1px; z-index: 30; } .AppMenuDrop li:nth-of-type(1) a:hover:after, .AppMenuDrop li:nth-of-type(1) a:focus:after { border-bottom-color: #ff7f38; } .AppMenuDrop a { background: #1c3643; border-top: 1px solid #284e60; color: #fff; display: block; font-size: 14px; padding: 1em 2em 1em 1.2em; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); font-weight: 600; position: relative; } .AppMenuDrop a:hover, .AppMenuDrop a:focus { background: #ff7f38; } .AppMenuDrop a:before { margin-right: 0.5em; font-size: 15px; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); } .AppMenuDrop a > * { white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } @media only screen and (max-width: 1000px) { .AppMenuDrop { margin: 0 !important; right: 0; } .AppMenuDrop a { font-size: 1em; } .AppMenuDrop li a:first-child:after { display: none; } } .load, .loading, .loading-blue, .Pacman-blue, .NotiBox-loading { background-position: center; background-repeat: no-repeat; } .loading { background-image: url("data:image/gif;base64,R0lGODlhGAAYAPYAAP////////7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v////7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJBQAAACwAAAAAGAAYAAAHmoAAgoOEhYaHgxUWBA4aCxwkJwKIhBMJBguZmpkqLBOUDw2bo5kKEogMEKSkLYgIoqubK5QJsZsNCIgCCraZBiiUA72ZJZQABMMgxgAFvRyfxpixGx3LANKxHtbNth8hy8i9IssHwwsXxgLYsSYpxrXDz5QIDubKlAwR5q2UErC2poxNoLBukwoX0IxVuIAhQ6YRBC5MskaxUCAAIfkECQUAAAAsAAAAABgAGAAAB6GAAIKDhIWGh4MVFgQOGhsOGAcxiIQTCQYLmZqZGwkIlA8Nm6OaMgyHDBCkqwsjEoUIoqykNxWFCbOkNoYCCrmaJjWHA7+ZHzOIBMUND5QFvzATlACYsy/TgtWsIpPTz7kyr5TKv8eUB8ULGzSIAtq/CYi46Qswn7AO9As4toUMEfRcHZIgC9wpRBMovNvU6d60ChcwZFigwYGIAwKwaUQUCAAh+QQJBQAAACwAAAAAGAAYAAAHooAAgoOEhYaHgxUWBA4aCzkkJwKIhBMJBguZmpkqLAiUDw2bo5oyEocMEKSrCxCnhAiirKs3hQmzsy+DAgq4pBogKIMDvpvAwoQExQvHhwW+zYiYrNGU06wNHpSCz746O5TKyzwzhwfLmgQphQLX6D4dhLfomgmwDvQLOoYMEegRyApJkIWLQ0BDEyi426Six4RtgipcwJAhUwQCFypA3IgoEAAh+QQJBQAAACwAAAAAGAAYAAAHrYAAgoOEhYaHgxUWBA4aCxwkJzGIhBMJBguZmpkGLAiUDw2bo5oZEocMEKSrCxCnhAiirKsZn4MJs7MJgwIKuawqFYIDv7MnggTFozlDLZMABcpBPjUMhpisJiIJKZQA2KwfP0DPh9HFGjwJQobJypoQK0S2B++kF4IC4PbBt/aaPWA5+CdjQiEGEd5FQHFIgqxcHF4dmkBh3yYVLmx5q3ABQ4ZMBUhYEOCtpLdAACH5BAkFAAAALAAAAAAYABgAAAeegACCg4SFhoeDFRYEDhoaDgQWFYiEEwkGC5mamQYJE5QPDZujmg0PhwwQpKsLEAyFCKKsqw0IhAmzswmDAgq5rAoCggO/sxaCBMWsBIIFyqsRgpjPoybS1KMqzdibBcjcmswAB+CZxwAC09gGwoK43LuDCA7YDp+EDBHPEa+GErK5GkigNIGCulEGKNyjBKDCBQwZMmXAcGESw4uUAgEAIfkECQUAAAAsAAAAABgAGAAAB62AAIKDhIWGh4MVFgQOGgscJCcxiIQTCQYLmZqZBiwIlA8Nm6OaGRKHDBCkqwsQp4QIoqyrGZ+DCbOzCYMCCrmsKhWCA7+zJ4IExaM5Qy2TAAXKQT41DIaYrCYiCSmUANisHz9Az4fRxRo8CUKGycqaECtEtgfvpBeCAuD2wbf2mj1gOfgnY0IhBhHeRUBxSIKsXBxeHZpAYd8mFS5seatwAUOGTAVIWBDgraS3QAAh+QQJBQAAACwAAAAAGAAYAAAHooAAgoOEhYaHgxUWBA4aCzkkJwKIhBMJBguZmpkqLAiUDw2bo5oyEocMEKSrCxCnhAiirKs3hQmzsy+DAgq4pBogKIMDvpvAwoQExQvHhwW+zYiYrNGU06wNHpSCz746O5TKyzwzhwfLmgQphQLX6D4dhLfomgmwDvQLOoYMEegRyApJkIWLQ0BDEyi426Six4RtgipcwJAhUwQCFypA3IgoEAAh+QQJBQAAACwAAAAAGAAYAAAHoYAAgoOEhYaHgxUWBA4aGw4YBzGIhBMJBguZmpkbCQiUDw2bo5oyDIcMEKSrCyMShQiirKQ3FYUJs6Q2hgIKuZomNYcDv5kfM4gExQ0PlAW/MBOUAJizL9OC1awik9PPuTKvlMq/x5QHxQsbNIgC2r8JiLjpCzCfsA70Czi2hQwR9FwdkiAL3ClEEyi829Tp3rQKFzBkWKDBgYgDArBpRBQIADsAAAAAAAAAAAA="); } .loading-blue, .Pacman-blue, .NotiBox-loading { background-image: url("data:image/gif;base64,R0lGODlhGAAYAPYAAP///wBllvL2+ajK2lCVtip+pxJvnaTH2fz8/Yq4zhRxngBllubv9DiGrDaFrOrx9SB4ox53ouTu8/j6+4a1zPD1+JjA1Ja/006TtTKDqgZomAxsmix/qNjn7rzW4hp0oGijwOzz9kqRtCR6pFSXuKrL2whpmZzC1eDr8dLj6w5tm3KpxIS0zLTR34CyypC70GKgvvb5+jCBqczf6a7N3aLG2G6nw0SNsUKMsSZ7pT6Kr8bc50iQs36wyVqbumaiv7DP3hhzn97q8HSqxbbS4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAFAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAGAAYAAAHmoAAgoOEhYaHgxUWBA4aCxwkJwKIhBMJBguZmpkqLBOUDw2bo5kKEogMEKSkLYgIoqubK5QJsZsNCIgCCraZBiiUA72ZJZQABMMgxgAFvRyfxpixGx3LANKxHtbNth8hy8i9IssHwwsXxgLYsSYpxrXDz5QIDubKlAwR5q2UErC2poxNoLBukwoX0IxVuIAhQ6YRBC5MskaxUCAAIfkEAAUAAQAsAAAAABgAGAAAB6GAAIKDhIWGh4MVFgQOGhsOGAcxiIQTCQYLmZqZGwkIlA8Nm6OaMgyHDBCkqwsjEoUIoqykNxWFCbOkNoYCCrmaJjWHA7+ZHzOIBMUND5QFvzATlACYsy/TgtWsIpPTz7kyr5TKv8eUB8ULGzSIAtq/CYi46Qswn7AO9As4toUMEfRcHZIgC9wpRBMovNvU6d60ChcwZFigwYGIAwKwaUQUCAAh+QQABQACACwAAAAAGAAYAAAHooAAgoOEhYaHgxUWBA4aCzkkJwKIhBMJBguZmpkqLAiUDw2bo5oyEocMEKSrCxCnhAiirKs3hQmzsy+DAgq4pBogKIMDvpvAwoQExQvHhwW+zYiYrNGU06wNHpSCz746O5TKyzwzhwfLmgQphQLX6D4dhLfomgmwDvQLOoYMEegRyApJkIWLQ0BDEyi426Six4RtgipcwJAhUwQCFypA3IgoEAAh+QQABQADACwAAAAAGAAYAAAHrYAAgoOEhYaHgxUWBA4aCxwkJzGIhBMJBguZmpkGLAiUDw2bo5oZEocMEKSrCxCnhAiirKsZn4MJs7MJgwIKuawqFYIDv7MnggTFozlDLZMABcpBPjUMhpisJiIJKZQA2KwfP0DPh9HFGjwJQobJypoQK0S2B++kF4IC4PbBt/aaPWA5+CdjQiEGEd5FQHFIgqxcHF4dmkBh3yYVLmx5q3ABQ4ZMBUhYEOCtpLdAACH5BAAFAAQALAAAAAAYABgAAAeegACCg4SFhoeDFRYEDhoaDgQWFYiEEwkGC5mamQYJE5QPDZujmg0PhwwQpKsLEAyFCKKsqw0IhAmzswmDAgq5rAoCggO/sxaCBMWsBIIFyqsRgpjPoybS1KMqzdibBcjcmswAB+CZxwAC09gGwoK43LuDCA7YDp+EDBHPEa+GErK5GkigNIGCulEGKNyjBKDCBQwZMmXAcGESw4uUAgEAIfkEAAUABQAsAAAAABgAGAAAB62AAIKDhIWGh4MVFgQOGgscJCcxiIQTCQYLmZqZBiwIlA8Nm6OaGRKHDBCkqwsQp4QIoqyrGZ+DCbOzCYMCCrmsKhWCA7+zJ4IExaM5Qy2TAAXKQT41DIaYrCYiCSmUANisHz9Az4fRxRo8CUKGycqaECtEtgfvpBeCAuD2wbf2mj1gOfgnY0IhBhHeRUBxSIKsXBxeHZpAYd8mFS5seatwAUOGTAVIWBDgraS3QAAh+QQABQAGACwAAAAAGAAYAAAHooAAgoOEhYaHgxUWBA4aCzkkJwKIhBMJBguZmpkqLAiUDw2bo5oyEocMEKSrCxCnhAiirKs3hQmzsy+DAgq4pBogKIMDvpvAwoQExQvHhwW+zYiYrNGU06wNHpSCz746O5TKyzwzhwfLmgQphQLX6D4dhLfomgmwDvQLOoYMEegRyApJkIWLQ0BDEyi426Six4RtgipcwJAhUwQCFypA3IgoEAAh+QQABQAHACwAAAAAGAAYAAAHoYAAgoOEhYaHgxUWBA4aGw4YBzGIhBMJBguZmpkbCQiUDw2bo5oyDIcMEKSrCyMShQiirKQ3FYUJs6Q2hgIKuZomNYcDv5kfM4gExQ0PlAW/MBOUAJizL9OC1awik9PPuTKvlMq/x5QHxQsbNIgC2r8JiLjpCzCfsA70Czi2hQwR9FwdkiAL3ClEEyi829Tp3rQKFzBkWKDBgYgDArBpRBQIADsAAAAAAAAAAAA="); } .BuzzNotifications { position: fixed; left: 5%; bottom: 4%; z-index: 10; } .BuzzNotification { background: #0791e6; border: 1px solid #0477ab; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #fff; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin-top: 1em; padding: 1em; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; width: 284px; position: relative; } .BuzzNotification:first-child { margin-top: 0; } .BuzzNotification-image { margin-right: 1em; } .BuzzNotification-image img { -webkit-border-radius: 50%; border-radius: 50%; } .BuzzNotification-url { z-index: 2; position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .BuzzNotification-close { color: #000; cursor: pointer; font-size: 20px; opacity: 0.3; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; -webkit-filter: alpha(opacity=30); -moz-filter: alpha(opacity=30); -ms-filter: alpha(opacity=30); -o-filter: alpha(opacity=30); filter: alpha(opacity=30); width: 20px; } .BuzzNotification-right { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; font-size: 14px; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .BuzzNotification-copy { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .BuzzNotification-enter { margin-top: -3em; 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.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; } .BuzzNotification-enter-active { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; margin-top: 1em; } .BuzzNotification-leave { margin-top: -3em; 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; } .BuzzNotification-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); } .NotiBox { position: absolute; right: 0; top: 100%; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2); box-shadow: 0 5px 10px rgba(0,0,0,0.2); -webkit-transform: translateY(-2em); -moz-transform: translateY(-2em); -o-transform: translateY(-2em); -ms-transform: translateY(-2em); transform: translateY(-2em); 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); -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; visibility: hidden; width: 430px; } .NotiBox-label { cursor: pointer; -moz-user-select: none; -ms-user-select: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; } .NotiBox-loading { background-color: #fff; height: 50px; } .NotiBox-empty { padding: 0.5em; background: #1c3643; text-align: center; font-size: 2em; color: #fff; border-top: 1px solid #284e60; } .NotiBox-list { max-height: 500px; overflow-y: auto; } .NotiBox-options { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; height: 32px; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; overflow: hidden; } .NotiBox-option { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; border: none; background: transparent; color: #fff; font-size: 12px; cursor: pointer; background: #0791e6; 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: relative; } .NotiBox-option:last-child:after { display: none; } .NotiBox-option:after { content: ""; width: 1px; background: #273b47; position: absolute; right: 0; top: 20%; bottom: 20%; } .NotiBox-option:before { margin-right: 0.5em; font-size: 16px; vertical-align: middle; } .NotiBox-option span { vertical-align: middle; } .NotiBox-check { display: none; } .NotiBox-check:checked ~ * { 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); } .NotiBoxItem { background-color: #fff; border: 1px solid transparent; color: #000; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; list-style: none; padding: 1.2em; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; cursor: pointer; position: relative; } .NotiBoxItem:nth-of-type(1):after { position: absolute; bottom: 100%; right: 5px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 15px solid transparent; content: ""; border-bottom-color: #fcfcd2; display: block; width: 0; height: 0; margin-bottom: -1px; z-index: 10; z-index: 30; } .NotiBoxItem:not(.is-sticky) { border-top: 1px solid #989898; } .NotiBoxItem:nth-of-type(2) { border-top: 1px solid transparent; } .NotiBoxItem:hover { border: 1px solid #1c3643; } .NotiBoxItem.is-sticky { background: #fcfcd2; border: none; position: relative; z-index: 1; } .NotiBoxItem-url { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2; } .NotiBoxItem-left { margin-right: 1em; position: relative; } .NotiBoxItem-left img { margin-left: 1.1em; -webkit-border-radius: 50%; border-radius: 50%; -moz-user-select: none; -ms-user-select: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; } .NotiBoxItem-action { color: #989898; display: block; font-size: 20px; color: #989898; margin-bottom: 0.5em; line-height: 100% !important; position: relative; z-index: 2; } .NotiBoxItem-action:hover { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); } .NotiBoxItem-action:last-child { margin-bottom: 0; } .NotiBoxItem-action.is-read { color: #98ca3f; } .NotiBoxItem-right { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .NotiBoxItem-date { font-size: 13px; } .NotiBoxItem-msg { font-size: 14px; margin-bottom: 0.5em; } .NotiBoxItem-content { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .NotiBoxItem-icono { color: #989898; position: absolute; left: 0; top: 0; } .AppHeader { background: #273b47; height: 52px; position: relative; z-index: 7; } .AppHeader .show-modal { cursor: pointer; position: relative; background: #273b47; border-top: 1px solid #355061; color: #fff; display: block; font-size: 14px; padding: 1em 2em 1em 1.2em; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); font-weight: 600; position: relative; } .AppHeader .show-modal:hover, .AppHeader .show-modal:focus { background: #ff7f38; } .AppHeader .show-modal:before { margin-right: 0.5em; font-size: 15px; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); } .AppHeader-container { height: inherit; 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; color: #fff; position: relative; z-index: 10; margin: 0 auto; } .AppHeader > div { height: inherit; } .AppHeader-right { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; height: inherit; } .AppHeader-left { padding-left: 15px; height: inherit; } .AppHeader-option { height: inherit; } .AppHeader-logo { height: inherit; } .AppHeader-logo > a { height: inherit; line-height: 100%; 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; min-width: 96px; } .AppHeader-user { height: inherit; 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-left: 0.5em; padding-right: 0.5em; cursor: pointer; position: relative; -moz-user-select: none; -ms-user-select: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; } .AppHeader-user img { -webkit-border-radius: 50%; border-radius: 50%; margin-right: 0.5em; object-fit: cover; } .AppHeader-username { margin-right: 0.5em; } .AppHeader-searcher { position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .AppHeader-searcher > input { height: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; min-width: 220px; -webkit-border-radius: 3px; border-radius: 3px; padding: 5px; border: none; font-size: 15px; padding-left: 28px; color: #0791e6; -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; -ms-transition: 0.2s; transition: 0.2s; } .AppHeader-searcher > input:focus { -webkit-box-shadow: 0 0 10px #fff; box-shadow: 0 0 10px #fff; } .AppHeader-searcherIcon { position: absolute; left: 0; top: 0; color: #c7c7c7; padding: 6px; z-index: 2; padding-top: 6px; font-size: 16px; font-weight: bold; color: #0791e6; } @media only screen and (min-width: 1000px) { .u-md { display: none; } } @media only screen and (max-width: 1000px) { .AppHeader .u-lg { display: none; } .AppHeader-displayMenu { margin-left: 1em; -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; padding: 0 1em !important; background: #141d24 !important; } } /* #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; } * { margin: 0; } body { font-family: 'Lato', sans-serif, Arial; font-size: 16px; color: #273b47; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; font-size: inherit; font-size: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0); } a { text-decoration: none; } ul { padding: 0; } img { border: none; vertical-align: bottom; max-width: 100%; } button, a, input { outline: 0; } .overlay { background: transparent; bottom: 100%; left: 0; position: fixed; right: 0; top: 0; -webkit-transition: 0.3s background; -moz-transition: 0.3s background; -o-transition: 0.3s background; -ms-transition: 0.3s background; transition: 0.3s background; z-index: 6; cursor: pointer; } .overlay.active { background: rgba(0,0,0,0.5); bottom: 0; } /* #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, .Discussion-title-text .embed-responsive, .CommentContent-text .embed-responsive { position: relative; padding-bottom: 56.25% /* 16:9 */; height: 0; } .u-videoSource, .Discussion-title-text .embed-responsive iframe, .CommentContent-text .embed-responsive iframe { 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; } .DraftEditor-root .public-DraftStyleDefault-block { word-break: break-all; white-space: normal; word-wrap: break-word; } .Discussion-title-text { max-height: none !important; font-size: 1.5rem !important; font-weight: bold; } .Discussion-title-text.is-white { color: #fff !important; } .Discussion-title, .CommentContent { width: 100%; } .Discussion-title-text, .CommentContent-text { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 14px; width: 100%; overflow-x: auto; margin-bottom: 0.5rem; word-break: break-all; word-break: break-word; max-height: 210px; line-height: 1.5; -webkit-line-clamp: 10; -webkit-box-orient: vertical; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; color: #273b47; } .Discussion-title-text.isExpanded, .CommentContent-text.isExpanded { max-height: none; display: block; overflow: visible; } .Discussion-title-text :first-child, .CommentContent-text :first-child { margin-top: 0.2em; } .Discussion-title-text :first-child:not(p), .CommentContent-text :first-child:not(p) { margin-top: 0.5em; } .Discussion-title-text :last-child, .CommentContent-text :last-child { margin-bottom: 0; } .Discussion-title-text h1, .CommentContent-text h1, .Discussion-title-text h2, .CommentContent-text h2, .Discussion-title-text h3, .CommentContent-text h3, .Discussion-title-text h4, .CommentContent-text h4, .Discussion-title-text h5, .CommentContent-text h5, .Discussion-title-text h6, .CommentContent-text h6, .Discussion-title-text p, .CommentContent-text p, .Discussion-title-text ul, .CommentContent-text ul, .Discussion-title-text ol, .CommentContent-text ol, .Discussion-title-text figure, .CommentContent-text figure, .Discussion-title-text div, .CommentContent-text div { margin: 1em 0; } .Discussion-title-text h1:empty, .CommentContent-text h1:empty, .Discussion-title-text h2:empty, .CommentContent-text h2:empty, .Discussion-title-text h3:empty, .CommentContent-text h3:empty, .Discussion-title-text h4:empty, .CommentContent-text h4:empty, .Discussion-title-text h5:empty, .CommentContent-text h5:empty, .Discussion-title-text h6:empty, .CommentContent-text h6:empty, .Discussion-title-text p:empty, .CommentContent-text p:empty, .Discussion-title-text ul:empty, .CommentContent-text ul:empty, .Discussion-title-text ol:empty, .CommentContent-text ol:empty, .Discussion-title-text figure:empty, .CommentContent-text figure:empty, .Discussion-title-text div:empty, .CommentContent-text div:empty { display: none; } .Discussion-title-text figure, .CommentContent-text figure { text-align: center; } .Discussion-title-text ul, .CommentContent-text ul, .Discussion-title-text ol, .CommentContent-text ol, .Discussion-title-text dd, .CommentContent-text dd { padding-left: 1.5em; } .Discussion-title-text dt, .CommentContent-text dt { font-weight: bold; } .Discussion-title-text .video-wrapper, .CommentContent-text .video-wrapper { max-width: 480px; } .Discussion-title-text .task-list, .CommentContent-text .task-list { list-style-type: none; } .Discussion-title-text .task-list padding-left .5em input[type="checkbox"], .CommentContent-text .task-list padding-left .5em input[type="checkbox"] { margin-right: 0.5em; } .Discussion-title-text blockquote, .CommentContent-text blockquote { border-left: 0.6em solid #dfe1e3; padding: 0.125em 1.6em; } .Discussion-title-text table, .CommentContent-text table { width: 100%; } .Discussion-title-text table thead, .CommentContent-text table thead, .Discussion-title-text table tr:nth-child(even), .CommentContent-text table tr:nth-child(even) { background-color: rgba(0,0,0,0.25); } .Discussion-title-text table td, .CommentContent-text table td, .Discussion-title-text table th, .CommentContent-text table th { padding: 0.25em 0.5em; } .Discussion-title-text abbr, .CommentContent-text abbr { cursor: help; text-decoration: underline; text-decoration-style: dotted; } .Discussion-title-text pre, .CommentContent-text pre { white-space: pre-wrap; background-color: #272822; border: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #ddd; font-family: 'Inconsolata', 'Menlo', 'Consolas', monospace; font-size: 1rem; line-height: 1.25; width: 100%; padding: 0 !important; } .Discussion-title-text pre code, .CommentContent-text pre code { display: block; padding: 0.7em; -moz-tab-size: 2; -o-tab-size: 2; tab-size: 2; } .Discussion-title-text pre code[class="language-javascript"], .CommentContent-text pre code[class="language-javascript"], .Discussion-title-text pre code[class="language-js"], .CommentContent-text pre code[class="language-js"], .Discussion-title-text pre code[class="language-html"], .CommentContent-text pre code[class="language-html"], .Discussion-title-text pre code[class="language-css"], .CommentContent-text pre code[class="language-css"], .Discussion-title-text pre code[class="language-styl"], .CommentContent-text pre code[class="language-styl"], .Discussion-title-text pre code[class="language-saas"], .CommentContent-text pre code[class="language-saas"], .Discussion-title-text pre code[class="language-less"], .CommentContent-text pre code[class="language-less"], .Discussion-title-text pre code[class="language-ruby"], .CommentContent-text pre code[class="language-ruby"] { -moz-tab-size: 2; -o-tab-size: 2; tab-size: 2; } .Discussion-title-text pre code[class="language-java"], .CommentContent-text pre code[class="language-java"], .Discussion-title-text pre code[class="language-python"], .CommentContent-text pre code[class="language-python"], .Discussion-title-text pre code[class="language-php"], .CommentContent-text pre code[class="language-php"] { -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; } .Discussion-title-text pre code[class="language-go"], .CommentContent-text pre code[class="language-go"] { -moz-tab-size: 8; -o-tab-size: 8; tab-size: 8; } .Discussion-title-text mark, .CommentContent-text mark, .Discussion-title-text code, .CommentContent-text code { font-size: 13px; max-width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: 'Inconsolata', 'Menlo', 'Consolas', monospace; padding: 0.2rem; width: 100%; } .Discussion-title-text code, .CommentContent-text code { background-color: rgba(0,0,0,0.05); } .Discussion-title-text mark, .CommentContent-text mark { background-color: #0791e6; color: #fff; } .RichEditor-root { background: #fff; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #0791e6; font-size: 14px; font-family: 'arial'; } .RichEditor-header { background: #0791e6; color: #fff; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding: 0.3em; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } .RichEditor-editor { padding: 1em; -webkit-box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.2); box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.2); } .RichEditor-editor.inactive { background: #c7c7c7; color: #989898; cursor: wait; } .RichEditor-styleButton { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #fff; cursor: pointer; font-size: 1.2em; line-height: 2em; min-width: 2em; text-align: center; -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -o-transition: 0.2s all; -ms-transition: 0.2s all; transition: 0.2s all; } .RichEditor-styleButton:hover { background-color: #fff; color: #0791e6; } .RichEditor-styleButton .image { margin-left: 1em; border-right: 1px solid #fff; } .RichEditor-styleButton .bold { font-weight: bold; } .RichEditor-styleButton .italic { font-style: italic; } .RichEditor-styleButton .underline { text-decoration: underline; } .RichEditor-controls { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; border-right: 1px solid #fff; padding: 0 9px; } .RichEditor-controlsLink { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .RichEditor-controlsImage { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .RichEditor-controls:last-child { border-right: none; } .RichEditor-linkBox { background: #0791e6; display: block; padding: 0.5em; padding-top: 0; color: #fff; 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; } .RichEditor-linkBox span { font-weight: bold; -webkit-flex-shrink: 0; flex-shrink: 0; } .RichEditor-linkInput { -webkit-border-radius: 5px; border-radius: 5px; max-width: 320px; width: 1000px; margin-left: 8px; -webkit-box-shadow: none; box-shadow: none; font-size: 14px; font-weight: 100; padding: 2px 10px; border: 1px solid #ccc; color: #0791e6; } .RichEditor-actions { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding: 8px 0; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .RichEditor-actionsButton { height: 40px; } .RichEditor-actionsButtonCancel { color: #0791e6; margin: 0.8em 0; margin-left: 8px; font-weight: bold; padding: 3px; cursor: pointer; } .RichEditor-actionsButtonCancel:hover { text-decoration: underline; } .RichEditor-actionsButtonCancel span { margin-right: 0.5em; } .RichEditor-activeButton { background: #0791e6; } .RichEditor-separator { border-right: solid rgba(0,0,0,0.2) 1px; margin: 4px 9px; } .public-DraftEditorPlaceholder-root { color: #273b47; font-style: italic; position: absolute; } .RichEditor-editor .public-DraftEditor-content { min-height: 100px; line-height: 22px; } .RichEditor-editor .public-DraftEditor-content h1 { font-size: 24px; } .RichEditor-editor .public-DraftEditor-content h2 { font-size: 22px; } .RichEditor-editor .public-DraftEditor-content h3 { font-size: 20px; } .public-DraftEditor-content { font-size: 1rem; } .public-DraftEditorPlaceholder-inner { color: #a9a9a9; font-size: 16px; font-style: normal; } .RichEditor-hidePlaceholder .public-DraftEditorPlaceholder-root { display: none; } .RichEditor-editor .public-DraftStyleDefault-pre { background-color: rgba(0,0,0,0.05); font-family: 'Inconsolata', 'Menlo', 'Consolas', monospace; font-size: 14px; padding: 10px; } .RichEditor-editor .public-DraftStyleDefault-ul { margin-left: 20px !important; } @media only screen and (max-width: 435px) { .RichEditor-header { padding: 0.8px 0; } .RichEditor-controls { -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .RichEditor-editor .public-DraftEditor-content { min-height: 75px; } } @media only screen and (max-width: 768px) { .RichEditor-header { position: relative; } .RichEditor-controls { -webkit-box-lines: single; -moz-box-lines: single; -o-box-lines: single; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; overflow-x: scroll; overflow-y: hidden; } .RichEditor-controls::after { background-image: -webkit-linear-gradient(left, rgba(7,145,230,0) 0%, rgba(7,145,230,0.65) 100%); background-image: -moz-linear-gradient(left, rgba(7,145,230,0) 0%, rgba(7,145,230,0.65) 100%); background-image: -o-linear-gradient(left, rgba(7,145,230,0) 0%, rgba(7,145,230,0.65) 100%); background-image: -ms-linear-gradient(left, rgba(7,145,230,0) 0%, rgba(7,145,230,0.65) 100%); background-image: linear-gradient(to right, rgba(7,145,230,0) 0%, rgba(7,145,230,0.65) 100%); -webkit-border-radius: 0 5px 0 0; border-radius: 0 5px 0 0; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; bottom: 0; content: ''; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; position: absolute; right: 0; top: 0; width: 25px; } .RichEditor-styleButton { font-size: 1.3em; } } /* #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; -webkit-user-select: none; -moz-user-select: none; -ms-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; } } .form-control, .slug-field input { display: block; outline: 0; width: 100%; height: 36px; padding: 0.5em; font-size: 1em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #273b47; border: 1px solid #e9e9e9; -webkit-border-radius: 5px; border-radius: 5px; background-color: #f6f6f6; margin-bottom: 1em; -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; font-family: 'Lato', sans-serif; } .form-control:focus, .slug-field input:focus { border-color: #0791e6; } .form-control.is-white, .slug-field input.is-white, .slug-field input { background: #fff; } @media only screen and (min-width: 48em) { .form-control, .slug-field input { margin-bottom: initial; } } .form-control.error, .slug-field input.error { border: 1px solid #ff4842; } .label { text-align: left; display: block; margin: 0 0 0.5em 0; } @media only screen and (min-width: 48em) { .label { margin: 0 0 0.5em 0; } } .label-inline { display: inline-block; margin-right: 0.5em; } .icon-form-control { margin-bottom: 1em; position: relative; } .icon-form-control input[type="text"] { padding-left: 1.7em; } .icon-form-control:before { position: absolute; left: 0.5em; top: 11px; color: #e9e9e9; z-index: 2; font-size: 13px; } .radio, .checkbox { margin-right: 10px; } .radio > label, .checkbox > label { display: inline-block; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .radio input[type="checkbox"], .checkbox input[type="checkbox"], .radio input[type="radio"], .checkbox input[type="radio"] { display: none; } .radio input[type="checkbox"]:checked + .radio-label, .checkbox input[type="checkbox"]:checked + .radio-label, .radio input[type="radio"]:checked + .radio-label, .checkbox input[type="radio"]:checked + .radio-label, .radio input[type="checkbox"]:checked + .checkbox-label, .checkbox input[type="checkbox"]:checked + .checkbox-label, .radio input[type="radio"]:checked + .checkbox-label, .checkbox input[type="radio"]:checked + .checkbox-label { -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; color: #fff; font-size: 14px; line-height: 17px; text-align: center; position: relative; } .radio-text, .checkbox-text { margin-right: 20px; font-size: 0.9em; } .radio-label, .checkbox-label { color: #fff; cursor: pointer; display: inline-block; font-size: 14.2px; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .radio-label:before, .checkbox-label:before { background-color: #fff; content: ""; display: block; height: 20px; width: 20px; line-height: 20px; vertical-align: middle; } .checkbox-label { margin-right: 9px; } .checkbox-label:before { -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #98ca3f; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; } .checkbox input[type="checkbox"]:checked + .checkbox-label:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: 'icomoon'; font-style: normal; font-variant: normal; font-weight: normal; speak: none; content: "\E91A"; font-size: 12px; background-color: #98ca3f; } .radio-label { margin-right: 5px; } .radio-label:before { -webkit-border-radius: 50%; border-radius: 50%; border: 1px solid #e9e9e9; width: 24px !important; height: 24px !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .radio input[type="radio"]:checked + .radio-label:after { content: ""; position: absolute; top: 6px; bottom: 6px; right: 6px; left: 6px; background-color: #98ca3f; -webkit-border-radius: 50%; border-radius: 50%; width: 12px; height: 12px; } .radio.is-sky-blue input[type="radio"]:checked + .radio-label:after { background-color: #0791e6; } .form-general-error { color: #fff; background: #ffdad9; color: #ff4842; padding: 10px 10px; line-height: 16px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; width: 100%; margin-bottom: 1em; -webkit-border-radius: 5px; border-radius: 5px; font-size: 0.9em; } .form-general-error span { -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; } .form-general-error:before { font-size: 18px; margin-right: 10px; width: 20px; -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; } @media only screen and (min-width: 48em) { .form-group { margin-bottom: 1em; } } .slug-field { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .slug-field.is-active label { background: #0791e6; color: #fff; } .slug-field label { background: #e9e9e9; color: #696969; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; padding: 0 0.5em; } .slug-field input { -webkit-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; margin: 0; } .checkbox-label.error:before { border: 1px solid #f00; } .character-counter { font-size: 0.8em; color: #b4b4b4; } .character-counter .is-red { color: #f00; } .edit-link { color: #ff7f38; border: none; background: none; font-size: 0.9em; font-weight: bold; } .edit-link:before { margin-right: 0.3em; font-size: 1.2em; vertical-align: middle; } .field-header { 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; } /* #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; } .Form-btns { 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-checkbox { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .Form-questionSend { padding: 1rem 0.5rem; background: #fff8a9; color: #554e00; line-height: 18px; -webkit-border-radius: 0.25rem; border-radius: 0.25rem; margin-top: 0.5rem; } .Form-questionSend a { font-weight: bold; text-decoration: underline; } .Form-submit { display: -webkit-box !important; display: -moz-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: box !important; display: flex !important; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin-right: 10px; } .Form-submit .PlatziRank { color: #fff; line-height: unset; font-size: unset; } /* #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; -webkit-user-select: none; -moz-user-select: none; -ms-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; } } /* #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; } .DiscusionDetail { padding-bottom: 70px; position: relative; } .DiscusionDetail .u-wrapper { max-width: 850px; } .DiscusionDetail a { color: #0791e6; } .DiscusionDetail a.btn-fcbk { color: #fff; } .DiscusionDetail a.btn-twt { color: #fff; } .DiscusionDetail a.btn-green { color: #fff; } .DiscusionDetail-header, .DiscusionDetail-grayPart { padding-top: 1em; background: #f6f6f6; } .DiscusionDetail-editor { margin-top: 2em; } .DiscusionDetail-editor .RichEditor-root { margin-top: 1rem; } .DiscusionDetail-buttons { margin-top: 1rem; } .DiscusionDetail-input { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding-bottom: 1em; max-width: 500px; max-height: 30px; } .DiscusionDetail-input.check-option { width: 50%; display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .DiscusionDetail-input.check-option:last-child { padding-left: 5px; } .DiscusionDetail-input.check-option .check { position: absolute; } .DiscusionDetail-input label { margin-right: 1rem; } .DiscusionDetail-input input { width: 360px; font-size: 1rem; } .DiscusionDetail-input input[type="checkbox"] { display: none; } .DiscusionDetail-input input[type="checkbox"] + label:after { content: ''; position: absolute; height: 1rem; width: 1rem; marign-right: 1rem; -webkit-border-radius: 50%; border-radius: 50%; border: 2px solid #0791e6; font-size: 2rem; line-height: 0.7rem; color: #0791e6; 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; } .DiscusionDetail-input input[type="checkbox"]:checked + label:after { content: ' \2022'; } .DiscusionDetail-input.has-label { -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; } .DiscusionDetail-inputText { margin-left: 1em; -webkit-border-radius: 5px; border-radius: 5px; padding: 0.3em; border: 1px solid #ddd; min-width: 300px; } .DiscusionDetail-inputSelect { border: 1px solid #ddd; background: #fff; min-width: 250px; color: #232426; width: 360px; padding: 0.3em; -webkit-border-radius: 5px; border-radius: 5px; font-size: 1rem; height: 2em; margin-top: -5px; } .DiscusionDetail-inputTitle { 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; padding-bottom: 1em; } .DiscusionDetail-inputTitle label { margin-bottom: 1em; } .DiscusionDetail-inputTitle input { font-size: 25px; min-height: 40px; padding: 0.7rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 0 2px 10px 0 rgba(0,0,10,0.2); box-shadow: inset 0 2px 10px 0 rgba(0,0,10,0.2); } .DiscusionDetail-label { marign-right: 1em; color: #989898; font-weight: bold; width: 90px; } .DiscusionDetail-upload { padding-bottom: 2rem; } .DiscusionDetail-comments.is-not-blog { padding: 0 0.5rem; background: #f6f6f6; } @media only screen and (max-width: 435px) { .DiscusionDetail-header { padding-bottom: 1em; } } @media only screen and (max-width: 1100px) { .DiscusionDetail-header.material { margin-left: 30px; } } @media only screen and (max-width: 760px) { .DiscusionDetail-header.material { margin-left: 0; } } /* #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, .Discussion-content .embed-responsive { position: relative; padding-bottom: 56.25% /* 16:9 */; height: 0; } .u-videoSource, .Discussion-content .embed-responsive iframe { 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; } .Discussion { position: relative; } .Discussion .Response-bestAnswer { display: none; } .Discussion-title { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; font-size: 28px; word-break: break-word; line-height: 1; } @media only screen and (min-width: 48em) { .Discussion-title { line-height: normal; } } .Discussion-titleType { color: #fff; font-size: 14px; background: #0791e6; padding: 4px 10px; vertical-align: middle; color: #fff; -webkit-border-radius: 3px; border-radius: 3px; margin-right: 5px; -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; -webkit-flex-shrink: 0; flex-shrink: 0; } .Discussion-responseAction { color: #c7c7c7; font-size: 1rem; background: #fff; padding: 1rem; border: 1px solid #c7c7c7; -webkit-border-radius: 5px; border-radius: 5px; line-height: 1rem; cursor: pointer; width: 100%; } .Discussion-responseAction:hover { border-color: #0791e6; } .Discussion-body { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-bottom: 1em; } .Discussion-body pre { font-size: 1rem; margin-top: 0.5em; } .Discussion-body pre + pre { margin: 0; } .Discussion-wrapper { padding: 0; margin-bottom: 1em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 5px; border-radius: 5px; padding-left: 3rem; padding-bottom: 0; } .Discussion-wrapper:hover .Response-bestAnswer { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } .Discussion-buttonsEditor { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .Discussion-buttonsEditor button { margin-right: 1em; } .Discussion-content { margin-bottom: 0.9rem; font-size: 1.25em; line-height: 1.5; text-align: left; } .Discussion-content h1, .Discussion-content h2, .Discussion-content h3, .Discussion-content h4, .Discussion-content h5, .Discussion-content h6, .Discussion-content p, .Discussion-content ul, .Discussion-content ol, .Discussion-content figure, .Discussion-content div { margin: 1em 0; line-height: 1.6em; } .Discussion-content h1:empty, .Discussion-content h2:empty, .Discussion-content h3:empty, .Discussion-content h4:empty, .Discussion-content h5:empty, .Discussion-content h6:empty, .Discussion-content p:empty, .Discussion-content ul:empty, .Discussion-content ol:empty, .Discussion-content figure:empty, .Discussion-content div:empty { display: none; } .Discussion-content h2 { border-bottom: 1px solid #d3d3d3; } .Discussion-content ul, .Discussion-content ol, .Discussion-content dd { padding-left: 1.5em; } .Discussion-content dt { font-weight: bold; } .Discussion-content .task-list { list-style-type: none; } .Discussion-content .task-list padding-left .5em input[type="checkbox"] { margin-right: 0.5em; } .Discussion-content blockquote { border-left: 0.6em solid #dfe1e3; padding: 0.125em 1.6em; } .Discussion-content table { width: 100%; } .Discussion-content table thead, .Discussion-content table tr:nth-child(even) { background-color: rgba(0,0,0,0.25); } .Discussion-content table td, .Discussion-content table th { padding: 0.25em 0.5em; } .Discussion-content abbr { cursor: help; text-decoration: underline; text-decoration-style: dotted; } .Discussion-content img { height: auto; margin: 1.5em 0; } .Discussion-content pre { color-white-space: pre-wrap; background-color: #272822; border: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #ddd; font-family: 'Inconsolata', 'Menlo', 'Consolas', monospace; font-size: 1rem; line-height: 1.25; width: 100%; padding: 0.7em; margin: 1.5em 0; } .Discussion-content pre code { display: block; -moz-tab-size: 2; -o-tab-size: 2; tab-size: 2; } .Discussion-content pre code[class="language-javascript"], .Discussion-content pre code[class="language-js"], .Discussion-content pre code[class="language-html"], .Discussion-content pre code[class="language-css"], .Discussion-content pre code[class="language-styl"], .Discussion-content pre code[class="language-saas"], .Discussion-content pre code[class="language-less"], .Discussion-content pre code[class="language-ruby"] { -moz-tab-size: 2; -o-tab-size: 2; tab-size: 2; } .Discussion-content pre code[class="language-java"], .Discussion-content pre code[class="language-python"], .Discussion-content pre code[class="language-php"] { -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; } .Discussion-content pre code[class="language-go"] { -moz-tab-size: 8; -o-tab-size: 8; tab-size: 8; } .Discussion-content mark, .Discussion-content code { font-size: 13px; max-width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: 'Inconsolata', 'Menlo', 'Consolas', monospace; padding: 0.2rem; width: 100%; } .Discussion-content code { background-color: rgba(0,0,0,0.05); } .Discussion-content mark { background-color: #0791e6; color: #fff; } .Discussion-time { font-size: 14px; margin-bottom: 0.5rem; line-height: 14px; display: none; } .Discussion-label { -webkit-flex-shrink: 0; flex-shrink: 0; } .Discussion-content > *:first-child { margin-top: 0; } .Discussion.level-1 { background: #fff; } .Discussion.level-1 .Discussion-title { font-size: 2.25em; font-family: 'cooper_hewittmedium'; } .Discussion.level-2:before { content: ' '; position: absolute; height: calc(100% - 3rem); top: 1.5rem; bottom: 1.5rem; left: 0.935rem; width: 2px; background: #0791e6; } .Discussion.level-2:after { content: ' '; position: absolute; width: 1rem; bottom: 1.5rem; left: 0.935rem; height: 2px; background: #0791e6; } .Discussion.level-2 .Discussion-body { padding-bottom: 0; postion: relative; padding-left: 2.37rem; } .Discussion.level-2 .Discussion-title { font-weight: 400; } .Discussion.level-3 { margin-left: 42px; margin-bottom: 2em; } .Discussion.level-3 .Discussion-body { padding-left: 0; } @media only screen and (max-width: 1100px) { .Discussion.level-1 .Discussion-stars { left: 1em; top: 1em; } .Discussion.level-1 .Discussion-body { margin-left: 80px; } .Discussion.level-1 .Discussion-body.material { margin-left: 0px; } } @media only screen and (max-width: 670px) { .Discussion-wrapper { padding: 0; padding-top: 1em; } .Discussion-time { display: block; } .Discussion-time .icon-clock_A { margin-right: 0.5rem; } .Discussion.level-1 .Discussion-stars { left: 1em; top: 1em; padding: 3px 5px; } .Discussion.level-1 .Discussion-body { margin-left: 58px; } .Discussion.level-1 .Discussion-body.material { margin-left: 0; } .Discussion.level-1 .Discussion-star { font-size: 27px; } .Discussion.level-1 .Discussion-starNumber { font-size: 14px; line-height: 14px; } .Discussion.level-2 .Discussion-body { padding-left: 3rem; } .Discussion.level-2 .Discussion-stars { left: -3px; top: 2.5rem; } .Discussion.level-3 { margin-left: -1em; } } .title-left { text-align: left; } .Discussion-border-right { border-right: solid 1px #c7c7c7; padding: 1em !important; } .Discussion-sidebar-padding { padding: 0 !important; } .Discussion-project-bottom { 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: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .Discussion-project-bottom .DiscussionInfo-time { margin-right: 0; } .Discussion-project-responses { 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; } .Discussion-project-responses .icon-responses { margin-right: 5px; } .Discussion-project-level-text { text-transform: capitalize; margin-left: 5px; } .DiscussionInfo { 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; } .DiscussionInfo-content { 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; } .DiscussionInfo-contentResponsive { display: none; } .DiscussionInfo-content a, .DiscussionInfo-content p { margin: 0.5em 0; } .DiscussionInfo-score { font-size: 14px; } .DiscussionInfo-avatar { -webkit-flex-shrink: 0; flex-shrink: 0; margin-right: 0.5rem; } .DiscussionInfo-avatar img { -webkit-border-radius: 50%; border-radius: 50%; object-fit: cover; } .DiscussionInfo-user { 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-right: 0.5rem; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; z-index: 2; } .DiscussionInfo-user a { font-weight: bold; } .DiscussionInfo p { margin-right: 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; } .DiscussionInfo p span { margin: 0 5px; } .DiscussionInfo-trash { cursor: pointer; 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; } .DiscussionInfo-trash.isActive { color: #ff4842; } .DiscussionInfo-trash:hover { color: #ff4842; } .DiscussionInfo-time { font-size: 14px; } .DiscussionInfo-linkResponses { color: #0791e6 !important; cursor: pointer; } .DiscussionInfo-linkResponses:hover { color: #0791e6 !important; } .DiscussionInfo-published { 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; } .DiscussionInfo-published .icon-calendar_C { margin-right: 5px; } .DiscussionInfo-published-container { width: 100%; font-size: 14px; } .DiscussionInfo.level-1 .DiscussionInfo-user { font-size: 18px; } .DiscussionInfo.level-2 { margin: 0.5rem 0; margin-left: -2.37rem; } .DiscussionInfo.level-2 .DiscussionInfo-user { font-size: 1rem; } .DiscussionInfo.level-2 .DiscussionInfo-avatar > img { height: 1.87rem !important; width: 1.87rem !important; } .DiscussionInfo.level-3 .DiscussionInfo-avatar > img { height: 1.87rem !important; width: 1.87rem !important; } @media only screen and (max-width: 670px) { .DiscussionInfo { font-size: 1rem; position: relative; display: block; margin-bottom: 0; } .DiscussionInfo-avatar > img { margin-right: 0.5rem; width: 1.87rem; object-fit: cover; height: 1.87rem; } .DiscussionInfo-user { font-size: 1rem !important; margin-top: 0; } .DiscussionInfo p { font-size: 14px; } .DiscussionInfo-score { display: block !important; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; font-size: 14px; } .DiscussionInfo-content { -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .DiscussionInfo-contentResponsive { 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; } .DiscussionInfo-contentResponsive .DiscussionInfo-linkResponses { display: block; } .DiscussionInfo-contentResponsive .DiscussionInfo-time { display: block; margin-bottom: 1em; } .level-2 { margin-left: 0 !important; } .level-2 .DiscussionInfo-time { display: none; } .level-2 .Discussion-time { display: block; } .level-3 { margin-bottom: 0.5rem; } } .transition-width { position: relative; } .transition-width-enter { display: block; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; float: right; opacity: 0.1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; -webkit-filter: alpha(opacity=10); -moz-filter: alpha(opacity=10); -ms-filter: alpha(opacity=10); -o-filter: alpha(opacity=10); filter: alpha(opacity=10); } .transition-width-enter-active { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; width: auto; display: block; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; transition: all 0.5s; } .DiscussionList { list-style: none; -webkit-transition: 2s all; -moz-transition: 2s all; -o-transition: 2s all; -ms-transition: 2s all; transition: 2s all; } .DiscussionList-wrapper { max-width: 850px; } .DiscussionList-loader { 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; } .DiscussionList-showMore { color: #0791e6; padding: 1em; border-top: 1px solid #0791e6; cursor: pointer; max-width: 580px; } .DiscussionList-showMore span { margin-right: 8px; } .DiscussionList-showMore:hover { text-decoration: underline; } .DiscussionList li { position: relative; } .Banner { -webkit-border-radius: 5px; border-radius: 5px; border: solid 1px #057cae; background: #ecf7fb; padding: 1em; 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; font-size: 18px; color: #057cae; margin-top: 1rem; } .Banner a { color: #fff !important; } .Banner-avatar { margin-right: 1em; -webkit-flex-shrink: 0; flex-shrink: 0; } .Banner-avatar img { -webkit-border-radius: 50%; border-radius: 50%; image-width: 40px; } .Banner-content { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } @media only screen and (max-width: 670px) { .Banner { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .Banner a { margin-top: 1em; } } .Discussion-content { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; word-break: break-word; } .Discussion-content h1 { font-size: 24px; } .Discussion-content h2 { font-size: 22px; } .Discussion-content h3 { font-size: 20px; } .Discussion-content code, .Discussion-content pre { font-size: 16px; } .Discussion-content code { padding: 0.1rem; padding-left: 0.5rem; } .Discussion-content ul { margin-left: 1em; } .RichEditor-root { background: #fff; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #0791e6; font-size: 14px; font-family: 'arial'; } .RichEditor-header { background: #0791e6; color: #fff; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding: 0.3em; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } .RichEditor-editor { padding: 1em; -webkit-box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.2); box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.2); } .RichEditor-editor.inactive { background: #c7c7c7; color: #989898; cursor: wait; } .RichEditor-styleButton { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #fff; cursor: pointer; font-size: 1.2em; line-height: 2em; min-width: 2em; text-align: center; -webkit-transition: 0.2s all; -moz-transition: 0.2s all; -o-transition: 0.2s all; -ms-transition: 0.2s all; transition: 0.2s all; } .RichEditor-styleButton:hover { background-color: #fff; color: #0791e6; } .RichEditor-styleButton .image { margin-left: 1em; border-right: 1px solid #fff; } .RichEditor-styleButton .bold { font-weight: bold; } .RichEditor-styleButton .italic { font-style: italic; } .RichEditor-styleButton .underline { text-decoration: underline; } .RichEditor-controls { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; border-right: 1px solid #fff; padding: 0 9px; } .RichEditor-controlsLink { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .RichEditor-controlsImage { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .RichEditor-controls:last-child { border-right: none; } .RichEditor-linkBox { background: #0791e6; display: block; padding: 0.5em; padding-top: 0; color: #fff; 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; } .RichEditor-linkBox span { font-weight: bold; -webkit-flex-shrink: 0; flex-shrink: 0; } .RichEditor-linkInput { -webkit-border-radius: 5px; border-radius: 5px; max-width: 320px; width: 1000px; margin-left: 8px; -webkit-box-shadow: none; box-shadow: none; font-size: 14px; font-weight: 100; padding: 2px 10px; border: 1px solid #ccc; color: #0791e6; } .RichEditor-actions { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding: 8px 0; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .RichEditor-actionsButton { height: 40px; } .RichEditor-actionsButtonCancel { color: #0791e6; margin: 0.8em 0; margin-left: 8px; font-weight: bold; padding: 3px; cursor: pointer; } .RichEditor-actionsButtonCancel:hover { text-decoration: underline; } .RichEditor-actionsButtonCancel span { margin-right: 0.5em; } .RichEditor-activeButton { background: #0791e6; } .RichEditor-separator { border-right: solid rgba(0,0,0,0.2) 1px; margin: 4px 9px; } .public-DraftEditorPlaceholder-root { color: #273b47; font-style: italic; position: absolute; } .RichEditor-editor .public-DraftEditor-content { min-height: 100px; line-height: 22px; } .RichEditor-editor .public-DraftEditor-content h1 { font-size: 24px; } .RichEditor-editor .public-DraftEditor-content h2 { font-size: 22px; } .RichEditor-editor .public-DraftEditor-content h3 { font-size: 20px; } .public-DraftEditor-content { font-size: 1rem; } .public-DraftEditorPlaceholder-inner { color: #a9a9a9; font-size: 16px; font-style: normal; } .RichEditor-hidePlaceholder .public-DraftEditorPlaceholder-root { display: none; } .RichEditor-editor .public-DraftStyleDefault-pre { background-color: rgba(0,0,0,0.05); font-family: 'Inconsolata', 'Menlo', 'Consolas', monospace; font-size: 14px; padding: 10px; } .RichEditor-editor .public-DraftStyleDefault-ul { margin-left: 20px !important; } @media only screen and (max-width: 435px) { .RichEditor-header { padding: 0.8px 0; } .RichEditor-controls { -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .RichEditor-editor .public-DraftEditor-content { min-height: 75px; } } @media only screen and (max-width: 768px) { .RichEditor-header { position: relative; } .RichEditor-controls { -webkit-box-lines: single; -moz-box-lines: single; -o-box-lines: single; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; overflow-x: scroll; overflow-y: hidden; } .RichEditor-controls::after { background-image: -webkit-linear-gradient(left, rgba(7,145,230,0) 0%, rgba(7,145,230,0.65) 100%); background-image: -moz-linear-gradient(left, rgba(7,145,230,0) 0%, rgba(7,145,230,0.65) 100%); background-image: -o-linear-gradient(left, rgba(7,145,230,0) 0%, rgba(7,145,230,0.65) 100%); background-image: -ms-linear-gradient(left, rgba(7,145,230,0) 0%, rgba(7,145,230,0.65) 100%); background-image: linear-gradient(to right, rgba(7,145,230,0) 0%, rgba(7,145,230,0.65) 100%); -webkit-border-radius: 0 5px 0 0; border-radius: 0 5px 0 0; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; bottom: 0; content: ''; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; position: absolute; right: 0; top: 0; width: 25px; } .RichEditor-styleButton { font-size: 1.3em; } } .Response-actions { -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: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .Response-bestAnswer { margin-left: 0.5rem; -ms-flex-line-pack: center; -webkit-align-content: center; align-content: center; background-color: #fff; border: 1px solid #c7c7c7; -webkit-border-radius: 0.25em; border-radius: 0.25em; color: #1b9ad1; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; font-size: 1rem; font-weight: bold; -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; -webkit-transition: 0.5s -webkit-transform; -moz-transition: 0.5s -moz-transform; -o-transition: 0.5s -o-transform; -ms-transition: 0.5s -ms-transform; transition: 0.5s transform; will-change: transform; padding: 0.2em 0.5em 0.1em 0.5em; font-size: 0.9em; } .Response-bestAnswer.sm { display: none; margin-bottom: 1rem; } .Response-bestAnswer:hover { border: 1px solid #1b9ad1; } .Response-bestAnswer span { -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; } .Response-bestAnswer .icon-check { color: rgba(214,214,214,0.8); font-size: 1.25em; text-shadow: 1px 1px 1px #fff, 0 0 0 #000, 1px 1px 1px #fff; margin-right: 0.5em; } .Response-bestAnswer:hover { cursor: pointer; } .Response-bestAnswer:hover .icon-check { text-shadow: none; } .Response-bestAnswer:active { -webkit-transform: scale(0.99); -moz-transform: scale(0.99); -o-transform: scale(0.99); -ms-transform: scale(0.99); transform: scale(0.99); } @media only screen and (min-width: 768px) { .Response-bestAnswer { -webkit-transition: all 0.1s 0.3s; -moz-transition: all 0.1s 0.3s; -o-transition: all 0.1s 0.3s; -ms-transition: all 0.1s 0.3s; transition: all 0.1s 0.3s; 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); } } @media only screen and (max-width: 670px) { .Response-bestAnswer { margin-left: 0; display: none; } .Response-bestAnswer.sm { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } } .MainDiscussion-top { background-color: #f6f6f6; position: relative; padding-bottom: 1em; } .MainDiscussion-top.is-cover { background-position: center; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; min-height: unset; -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; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; color: #fff; background-color: #1c3643; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .MainDiscussion-top.is-cover > * { position: relative; z-index: 2; width: 100%; } .MainDiscussion-top.is-cover a { color: #fff; } .MainDiscussion-top.is-cover:after { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(255,0,0,0.2); content: ""; z-index: 1; background: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,0.75) 80%); background: -moz-linear-gradient(top, transparent 0%, rgba(0,0,0,0.75) 80%); background: -o-linear-gradient(top, transparent 0%, rgba(0,0,0,0.75) 80%); background: -ms-linear-gradient(top, transparent 0%, rgba(0,0,0,0.75) 80%); background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.75) 80%); } @media only screen and (min-width: 48em) { .MainDiscussion-top.is-cover { min-height: 350px; } } .MainDiscussion-body { margin-top: 1em; } .MainDiscussion-cover { position: relative; z-index: 2; width: 100%; } .MainDiscussion-author { margin-bottom: 2em; } .MainDiscussion-body .CourseBanner { margin-top: 10px; } .MainDiscussion-body .have-border { border: solid 1px #c7c7c7; -webkit-border-radius: 6px; border-radius: 6px; } .DiscussionDetailHeader { padding: 1em 0 0.5em; 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-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .DiscussionDetailHeader-edit { color: #ff7f38; } .DiscussionDetailHeader-edit:before { margin-right: 0.5rem; } .BestAnswer { background-color: #f3f8eb; -webkit-border-radius: 5px; border-radius: 5px; padding: 1em; margin-top: 2em; 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-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; -ms-transition: 0.2s; transition: 0.2s; } .BestAnswer-tag { font-size: 14px; color: #273b47; font-weight: bold; line-height: 1.3; } .BestAnswer-tag .icon-check { color: #98ca3f; font-size: 1.25em; text-shadow: none; margin-right: 0.5em; } .BestAnswer-content { position: relative; } .BestAnswer .Discussion-wrapper { background-color: transparent !important; font-size: 1rem; padding-top: 0; margin-bottom: 0; width: 100%; padding-left: 3rem !important; } .BestAnswer .Discussion-content { font-size: 1rem; } .BestAnswer .Discussion-stars { top: 0 !important; left: -3rem !important; } .BestAnswer .Discussion-body { margin-left: 0 !important; } @media only screen and (max-width: 1100px) { .BestAnswer .Discussion .level-3 { margin-left: 0; } } @media only screen and (max-width: 670px) { .BestAnswer .Discussion-body { padding: 0 !important; margin-left: 3rem !important; } .BestAnswer .Discussion-stars { left: -3rem !important; } .BestAnswer .Discussion-wrapper { padding: 0; } .BestAnswer .Discussion .level-3 { margin-left: 0; } } .Author { border-top: 1px solid #c7c7c7; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding-top: 1.5em; padding-bottom: 1.5em; -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: 18px; } .Author--withoutBorder { border: none; } .Author-avatar { -webkit-border-radius: 50%; border-radius: 50%; width: 50px; height: 50px; margin-right: 1rem; object-fit: cover; } .Author-posts { font-size: 0.8em; } .Author-info { 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; } .Author a { font-weight: bold; color: #0791e6; margin-right: 0.5rem; } .Author figure { -webkit-flex-shrink: 0; flex-shrink: 0; } .SocialButtons.vertical > div { margin-bottom: 1rem; width: 100%; 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; } .SocialButtons.horizontal { -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: 1em 0; width: 100%; -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; } .SocialButtons.horizontal > div { min-width: 60px; width: auto; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin-right: 0.5rem; -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 (max-width: 768px) { .SocialButtons.vertical { display: none; } } @media only screen and (max-width: 470px) { .SocialButtons { width: 100%; } .SocialButtons.horizontal { width: 100%; margin-bottom: 1rem; -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; } } .answer-enter { opacity: 0.01; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)"; -webkit-filter: alpha(opacity=1); -moz-filter: alpha(opacity=1); -ms-filter: alpha(opacity=1); -o-filter: alpha(opacity=1); filter: alpha(opacity=1); } .answer-enter-active { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; -ms-transition: opacity 0.3s; transition: opacity 0.3s; } .answer-leave { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; position: absolute; top: 0; } .answer-leave-active { opacity: 0.01; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)"; -webkit-filter: alpha(opacity=1); -moz-filter: alpha(opacity=1); -ms-filter: alpha(opacity=1); -o-filter: alpha(opacity=1); filter: alpha(opacity=1); -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; -ms-transition: opacity 0.3s; transition: opacity 0.3s; } .emoticon { display: inline-block; width: 21px; height: 19px; top: 4px; position: relative; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAAUCAMAAABifh4cAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEMDBEQTgxMTNEQzAxMUUyODBFM0U5MDJDMDVEMzBBNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEMDBEQTgxMjNEQzAxMUUyODBFM0U5MDJDMDVEMzBBNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkMxMURBQTY0M0RCRTExRTI4MEUzRTkwMkMwNUQzMEE2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQwMERBODEwM0RDMDExRTI4MEUzRTkwMkMwNUQzMEE2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+BYhOKAAAAppQTFRFVlVTWFdVXVxaWVhWV1ZUW1pY9vb0cG9t8/PxbWxqaWhmX15ccXBu7+/t9PTyeXh2YmFfZmVj5ubk39/d2trYWllX8fHvcnFvh4aEZ2ZkiomHZGNh3Nza1tbUXl1bj4+Nv7+94+PhjIuJxcXDdHNx9fXzYWBe5eTijYyK7u7s6uroqKimkpGPdXVze3p4a2porKyqq6upenp46OjmY2JgYGBe19bUmpmXfn17nZyar66swsLAZ2dli4qIb25spKOhq6qo19fVnJyak5KQ7e3rzMzKy8rIpaWj09PRaGdleHd18vLwgYF/hYSCl5aU0tLQbm1rlZSShIOBXFtZnp6ckI+NpqakbGtpfXx6oaCe7Ovp4eHfwMC+jIyKgH99mJeVm5qYtLOxrq2rd3Z0enl3sbGvpKSiysrIx8bEc3Nxqqqoz8/Nrayqk5ORYF9damlnZWRisLCuu7q4ioqIuLi2c3JwoJ+ddnVzsrGviYiGfHt50dHPgoF/wsG/4ODedXRyg4KAqaimnZ2bxsbEhoWDhYWDtbWzf3586enn5OTip6akiIeFsK+t3t7cpqWj1NTSqamn2djWgYB+j46Murq4ra2rmpqYn5+diIiGbm5soaGf7Ozqzs3Lo6OhnJuZ5eXjwL+9xMPB1dXT6+vp0NDOvby6qKelvb27kZCO29vZlpWTvr68jo2Lx8fFzc3LmZiW0tHPlZWToqGfvLy6lpaUycjGfHx6tra0s7Ox8PDuycnH0M/NkZGPxMTCjo6Mo6Kgubm3t7a0zs7Mg4OBvr27yMjG3d3b4uLgsrKwd3d1mJiWw8PBtrWz3t3bwcG/tLSyfn581dTSlJOR5+flr6+tt7e12NjWubi2y8vJn56cu7u52dnXVVRS9/f1MIjcDgAAAN50Uk5T//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AB7abjwAAEdRJREFUeNrsWudXFNm2r+qc6ABCkzOIJIkSJUiWKNEIKIqgEkQBURTEnHPOOafRMYdRxzQ6wcn3vl3/yzupqqtb131v3U/3w621lObXu87Z6ex04IT/7Md8M++CJlkn/Pf5Nx+O/XRbV6A1aS0z8jX/j5d0qy7ELOiY5YQdC/Jd8STE1RIzP+YGBbV3zHRGNbsurM084+9C63Emc+2FXS77+0++P79x0PLdFzy4PbvXZjgyvHOcCz4uODEx2BUMuTBjTmzewnJndFbHgpgLq1xYvnJmXl6wKxelL0syEsPc/28tCJrql0dPJoZtdkbHZx2dE7u1uND5/VfvXwz87gIKIcGLbrVvzI9wAt/2TYmalvDEhX+h/EnCtKgpfW//lQaYgbfEckAe6243OXH1iTajUr/smhMX+5OUmNSQNl4GfqsCqDPt+73olNkh7dx+umr/A/n7YelqDKb6yu2wY58Ng+r0n2TukTU2EB7e7I22a/HfbJavses+XRlSD8kZfrLBSqTYcF7uC40TKa0lTK70Kj+M8YOf5MqJslIu5JTnawm/ULNW7gzXvqIF87P5dCdDjIwr3QE9RcMvybWQRFUeLtfNhK0+BKyLkrn/5rRAAiorFjtZcnEF4QAiW2X+dJ5poLJIbuBJTSA9K09JxF55DFc+deznFiqRGhY6hJjMMGP4XYnbyY5VC7wkq9czyFoWuV96/5lCIr3FSDV/2gG0h1cmpRIptOH/lGnHQQ7NjviQyYug5wIJPLXSQTtD8pKFBojEiMoIoZIxHqRKlPXSIV7g6dhK0o1bkARm35BEK15p/zC/4vVKS3hbjCSw22HH/ifFVSPqHWDQBOn4tkmgMUsEJ2mhR8nssEJm3xVKiVg7SWLWAa51GPitDWRPvHRczTtmrYoDHlpCxkk86KJkpIpSEZ7NO5QoyhAEPeHUSyd3BV4VKeuBYnxoqBVEKZ6l3KqqI/D6RtsdMToD6AvSmtmynGK+ZJ18q5zh6yL+nnOA3HsGRseDJLQSEsSgq+DCbnQjaMO4Kohise972fuSGE5geuHXtCAeLM05L51Ol3jnnU5X/puXTGFsiYbLcIihuXIBYhmYbJGv+i2LNHpo8CY+2zoHwBEDLslX0LMwsoJXG6n4nTZunmhgTToCVEwv6N8/JC/Psb3037h4/6zQyA3JzGpLwTOQraqKBDsz/NuJjs1KmLTLwfQihzF7PwXOUPgMwOChEbyT/bUKencQ0D1bafKjWjDarXCX+Ln7RXQ6ehUZTJe1u2NE9zc3g9PDMvSqQDCw08b7QOAqqt9DUFvsR1HT+Rx1AA0u/WDMrcMy8/YWgCUk5XkgMgV1MzXyCcrwDj8If810s60JBsxMCw5DREKOU42xccoxeZW4FPS34tmpvG8AGvSKeCcBqMDCVdDHicFxKuhpzo8FtfYIdkX1plFP6P1RrFiywZbC+JqoZj4SoLaeZOrS7szhF1MDu32PbHXo9iYMv1i8F7FMCwfdhImW+5Dvv9UrF6L4MenszC1lC3/jr4W5xJYBJhm3W1m40QM/nZ207E0qiPuNWA1JUOP1CwYvjlexmBmBTJmQxiR74wNNIdShp1R8iN926+S+MoDuyq15yaLOvuWcDRxO/NfNFzwXMvEqj3eDL4m8pUZIMn8iL6gfF2ohiKBzsdenYXRiO/ovJR/LexJ9WjqFqOwP9IMwbJ4BsHwc3U8tXAbFE1KJpYDftm3UbRI+AfxMQsVZwt1ZNeykQYKo0T8F9PcjHbwOY2coXA+K1n0s/hztBi0R4IpKETJhkG71t3AYlhCbIVcwFuJk1xmidRwfYQn0VN8sI8Rz3i0BFXZct33A+8n0sr6QGLgaBYB0jeCPnNakEyahI74T+0503yzlvgZYmAHHbylKFEOnPPC6J4AbusfMVjnWA0lY64WH9CrHslNYPgNoSp5GoZZTBoDZpEBDvx1JnopB76VIb2VrELgGffvqISUdnIDqlIfEF+alh24ITVKr0lsKhu5UeNIFMPlVZ/sCT745roTUP9mGl3+0gfI4RrHV9DQFcQa0T+Cf2HWSMI0XDt2TBZzOc6kpAPrmkQW/XYv+v4b3QjqctpVt04dOYitetBHA5+Npqssz3wJMxVoorX2E6xYUZtUkeEz5hhoCUhOm0gX2JiiAf0xZ1Re2UHAoAjHTh+XdCYp707Q0LISetBO/HX8UR54r+GBb/fEZNGCFaUpf/pWt1utpODb01HBwFBGvUoLiPNNAwziqAWTgJTVI5+7CTwgtCxGysOVwavWvWZUH8MsECyRMCgTrn+3EcPEuulVg3zdntgxYlApm5GGafQrQl1kjrHD7HukygwYcpOg4R4nEdyCwA3lpDgvy6jYUJBsw6Y10KXVaSRYNEjOHS4Rmbp2IVjYx3zNqkfOQfDvVhZRbjotlnGVeP8MMWx7jErkNgR/xr35UZymRLDV28C7vT8WLpsuAMlQie95G4GrVInQsLhOVo/O0y3gfk6K8aV3FtOZd7Em5QqzyCd5swYdWutUkb5et1NXo9FXiXJiCWeMiMS9KHOPDAhV35JSe6fAaER/gwHPxdeY3pUjGPGLgLixT5zKiGnsULtMtwdjLoDnk+I3NKFbVrXsb9uMbfj3mV+t6eHBX87nTeKR1e15j1QhmYSJtUXwxZyKZipwVhjo9BxB4+qtavIhMzu9eS74b+qkHHUTWpQRbgOPZ2hyHPyzD8D3XpQ9ilFYBtlFf33hecobVPH1VrDogB4E7Xd/3ZazF+doJocW3iVJ+qYXZ9FjXXmVtR92vY5GgFUkl8fAH7Oc/fG2rn+Z/ZdXZX4DYNh36nXqnY5Y4PR6VXzjbGMSC24B7F2LgZUrX7SyncfXIQ2TGokFa8B4YYgZC/G7I+t2i5PmUrqwFRuBX47itBtt6tTq74tDYaGWnlVaKy0TvEpcPZQZWbRhxMXAw0cD0q0rI3sZJBiZ8nV5OKywP5H91j6iBV6OYlvb5BDVPwme0ZBWGD6LKYvVdXyPPq4fuZtmZgYkt6nFpYi7CgRkaRQPLH2yLRUQvsnS5jLLmEyLMfJOw9f2TcuE477DaF26O3q9NU7osKlhclYsNnOEKLqNi1eyOae42KhVGU/3SOUS3q5NkVFHBeupLZrddnvI6xDjZe9psamCnhxq4vhd8tktV8PzdKpi+DqcUNVhKCnw4EjYz6v2ogdNJOjd7fM7HxYI3KPCwYr0KtDT09997OuMysaRAU8wvwe88gn9xFF+xOP56HZDaHFUHG5KALXH3rX0HT27AG5IQTSKLkUZz3srB4Ax2gvNRY6nPC2dNXQxKhaQhyKSnszA/H1exCwAyMVqBjLadxfZHKN6pcGc2TuGiiXgErkNceGYudxjvKmUt55xUEuerCCVaVF3fpXRJVOvAx00otTvQbZg0iHUt6ytrKIp5nUc/Nm3ay6rTFszUZEiMG8wdKphR9TStQL3Cps4noPQc0gioh6kmnJzb6ItbSm97U1tBew93+PC0XSTfi0/q+qAaMURfs6ATM0X8JsxNDU9x8xJyhENllfn2+7xrW9CvS2lKawSuyNEDDMOmaJxn2IGIW3Z0I6doraezCGypH4hNdDgk8eS9awB4XnGlsSIuKM2bBwMuNd2xmAV3wBDKa0uw3kiRdeCIPHXaj5bEL1pDO9t5LuYxkt4nQIFOx/LM215etzOXCzGgICg6V1HCuL4Qjbn69CNU65Xhwxy9iXpXcyzTOi6yZqGgZtuuvsh198+xI4k4XGS5a4H/XtPl/XLX9te7hRmUEi2qR61OuMQAKTVn+fXjIqvRh2fqIFXwXfxppBgdB/dL2ehjYABlFaX7/Uiv0WHYI7gwKtaArTsUVcWR8CEJXljTNztkVfGWYqEcue1U2jyFzJ/mqSgUNIXuXrhytVkTN9NlLz9teN3uvS1rQeYi4F8RA28ZAPjbbaVYApcAfCRlUjuw9o40aQ+Ue0hbOBEOS/OGV4GwnFSKuGaxPPw5pFw4lRrXWkCH08Mos7MJQjmy4D7Sn/w2IlbZgvB3VTdcxB1oBK5ZubmoyFBsx5VGHBHirDQBUvpVlUR5h2cOrWOzuxRnA08xs+GSfpYVOLWaA+NbE2uIPCZCljAdjKNtKviI8gbZUCCBn+vTCMcqSIrGg7oIlITrYmoXLnq/NGYFMvZK7LsRqNDsuWEg6XP4tJpSokVVN5EtHw730FBAmsWIRhi/OHe/h/nKpNmjuBYhbUcyKoBZR0s6lDtebA5Wd5uC7iibDpPOOVkdWrr9mtZ4x5D9zenvHsAfBMQ5w29edfSx4Gbjrm10K3xQ0hT9oiFQYZyazJY1Pg29tanr3pVMZODnbnTQ4aGAnGhzTJzNEJ+FZ4YW+qJ/d4xw7upEtad65KJgtp+gxv4LVGvF8bEW5pNBx5oRyDgVTbCl/MmKI4LYzA9gl8YSjVHPJYHMSOe8HnPQEe+hom9GQvpmqCfeh5QVgeKI4VGwWHKNNdak175Y6rtQnCn+jkvSxy+iGnbeRH272PzvSYXDK5pQoOV88iZD6h7K8B8QE8GmqzcnHPGhG+JeDAxs8IIMRHx4iwGsf8VcT1KQ0ot7Q2MhOuO+o+T1fagif6BhQ5wjJJq8OxuMznEnHfe498auCgRFFApKO5A/BNPpxToOlVDlpfsvBeh0erDS+fueSOjR6fyD9z8p16wHJQuKMXAwNnes5fOBqwldA35tbgwEeI6Kcj0olvdBPxuieOxrVUV6CbMrPjR4CLPFuSRaFlQcj8pH24YgPVE5GVUiL9W/EXTJMzW6JQqou8nU+FAZNnMbh6g9f4jo6hTHMyiLzimdoNO9+9kGPnvY8AamU25up9hCzh4Xh6Wc9uYl39RU30vFWm6jeG5RcTTUl9UXi0+9olicmyvgwy3vKb+ebHzuGBJq9lK7tDaP/iOtsn+j7BoF9QIrialC+kEhXQxs5MDyc+bAwJLlm8Cx4RhYviMt65wFPXXi9HwP6hbqNrPSShwVdihALYWFEw7WNtCCMbdXokQle/ZH+uk7sOWLFy6eee4DOei04GxY7xBYNWhABudrkBt/z8DvOLDrUTZSGeycND8tD4WKrUEpLSbL2qeR2WxVN5SFbdVC7shujwvKMmnoLEwyQEkDSbcXa+F6ubSs49kozaI1Y7gVTOx4Vo9HI46B9gF+d7TOw3+W2d/bvkW6QkDVqioufj4iNQWI89ZWWFnkHr0nMzClWDamWyAVq+q5EhjRzn05psez//XXVdBWAKoZ0pj/HS39el/s7VZCuPy27hGq6SIPn5hRmwq9jkWEuchrwitrP6BU59hQkwH9c0dtZS2LPP06JHRPJ6oAb477GR3XH6RB+w1pKM+3Sxd2RXplBp6A2n7l0yTKCagQjl8Q8Cgks0x7Vlr0TcpwQMjt4jVHgXNcVkS0S2rwu+C4kpPuNTznmWVXGD57Q0um1dohZ48Eotbab+B00R9t0BQg08HZGsmUl79yXWKcK78ujJE81xYsW2NdTlPD9r6t3oar5+QXXc1kGtCZ6wDN2334uKReGD7vdKF1NpTcfvlEOV3QFnmTIlrfKr9uHN9KrGmsLZLfBju6wNFk51vP4krChM/BU053oc+JiWzPnTZ8vCn84PZ5QfYq+YYzc0mRpG6W3wyuSSP9pXWbXI7N96rGVNC9tDXMadEKMnewH5KrZkuBtqbSolaMPpaTnvfuJQKnrZHfjzYQgX2un5WTZg3SS8hc+SXo6pXEPGUnnO/Vz7VrMQvG+NVOGsgmZ0fUgHjhHxCkV3oqjSMl0U5rbMmzdFrigoqdbsV1xVUjJtPwyy1y8Ea6gvfJGO9yJT3pqMVkmv7NJOe/0qg+iNC9CR7O9/27N5lMU1teOV37eq0gAissDyNc/+hgcVqnvmlvoofLht9M/8qGN6fN+aHq+k5n2i0v9xqyc7qcZfNIRO9bDlY73fh73F3sbbpz5ZUTpbmoSlvWO3WFkxaEHbnxgyZtlbMUmup6rAYXXv9nLd7qqDOrbh2xWkPT6CcnRbqt67IbfNI/uWp3/KdKkza8a53bv9CAaGDNlQOTQ5f9etf9P+wvTo5dGtJq+xtmF/73j2/+ved/BRgAgNP7d5ZYdNsAAAAASUVORK5CYII=) left top no-repeat; } .emoticon[title=":)"] { background-position: left top; } .emoticon[title=":8"] { background-position: -23px top; } .emoticon[title=":D"] { background-position: -46px top; } .emoticon[title=":("] { background-position: -87px top; } .emoticon[title=":o"] { background-position: -243px top; } .emoticon[title=":P"] { background-position: -286px top; } .emoticon[title=":cool:"] { background-position: -329px top; } .emoticon[title=":'("] { background-position: -438px top; } .emoticon[title=":|"] { background-position: -458px top; } .message { font-size: 16px; padding: 10px; position: relative; } .message .row { 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: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-lines: single; -moz-box-lines: single; -o-box-lines: single; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; margin: 0; } .message .col { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .message:hover .message .avatar .reply { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } .message:hover .time { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } .message:hover .reply { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } .message .avatar { font-size: 0; border: 1px solid #aaa; position: relative; -webkit-border-radius: 50%; border-radius: 50%; margin-right: 10px; -webkit-flex-shrink: 0; flex-shrink: 0; position: relative; z-index: 2; -webkit-align-self: flex-start; align-self: flex-start; -ms-flex-item-align: start; background: #0791e6; } .message .avatar img { -webkit-border-radius: 50%; border-radius: 50%; object-fit: cover; } .message .badge { position: absolute; left: 25px; top: 25px; } .message .reply { background: rgba(0,0,0,0.3); -webkit-border-radius: 50%; border-radius: 50%; color: #fff; font-size: 18px; height: 40px; left: 0; line-height: 45px; 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); position: absolute; text-align: center; top: 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; width: 40px; z-index: 3; text-decoration: none; cursor: pointer; -webkit-border-radius: 50%; border-radius: 50%; } .message .actions { 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-flex-shrink: 0; flex-shrink: 0; margin-left: 10px; } .message .actions > span { font-size: 15px; color: #696969; text-decoration: none; margin-left: 10px; -webkit-transition: 0.2s color; -moz-transition: 0.2s color; -o-transition: 0.2s color; -ms-transition: 0.2s color; transition: 0.2s color; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; line-height: 100%; 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; } .message .actions > span:first-child { margin-left: 0; } .message .actions > span.is-liked { color: #98ca3f; } .message .actions > span.is-stared { color: #fecc01; } .message .actions .delete:hover, .message .actions .delete.is-active { color: #ff4842; } .message .actions .highlight { display: inline-block; } .message .actions .highlight.highlighted { color: #fecc01; } .message .actions .starCount { color: #fecc01; font-weight: bold; margin-right: 5px; } .message .time { 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; font-size: 13px; } .message .content { font-size: 14px; word-break: break-all; word-break: break-word; color: #000; } .message .content.is-highlighted { font-size: 16px; } .message .username { color: #0791e6; text-decoration: none; font-weight: bold; font-size: 15px; } .message .mention { background: #1c3643; font-weight: bold; font-size: 0.9em; color: #fff; padding: 3px 5px; display: inline-block; -webkit-border-radius: 10px; border-radius: 10px; margin-top: 5px; } .message .label { background: #0791e6; color: #fff; font-size: 11px; padding: 3px 5px; display: inline-block; margin-left: 5px; } .FileItem .label { margin-left: 0; } .FileItem .File-thumb { margin-right: 10px; } .LinkItem { background: #f2f9fc; } .LinkItem-icon { font-size: 35px; line-height: 1; margin-right: 10px; color: #0791e6; } .LinkItem .label { margin-left: 0; } .Answer { margin-bottom: 10px; margin-left: 50px; overflow: hidden; padding-right: 0; padding-left: 0; } .Answer .content { font-size: 14px; } .Question { padding: 20px 10px; border-bottom: 1px solid #e9e9e9; position: relative; } .Question.is-show:before { content: ""; position: absolute; bottom: 0; width: 100%; } .Question.is-show .Question-slideDown { margin-bottom: 0; } .Question.is-item { background: #f2f9fc; border-bottom: none; padding: 10px; } .Question.is-item:hover .reply { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; -ms-transition: 0.2s; transition: 0.2s; } .Question.is-item:after { display: none; } .Question:after { content: ""; position: absolute; left: 29px; top: 20px; bottom: 20px; width: 2px; background: #0791e6; display: block; } .Question-form { margin-left: 50px; position: relative; margin-top: 5px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .Question-form img { position: absolute; left: 5px; top: 8px; -webkit-border-radius: 50%; border-radius: 50%; } .Question-input { background: #f6f6f6; border: 1px solid #e9e9e9; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 0 0 7px rgba(0,0,0,0.1); box-shadow: inset 0 0 7px rgba(0,0,0,0.1); -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; font-size: 14px; overflow-y: hidden; padding: 8px 10px 8px 35px; resize: none; font-family: Arial; } .Question-input:focus { border-color: #000; outline: none; } .Question-counter { bottom: 0.25em; position: absolute; right: 0.5em; font-weight: bold; color: #808080; } .Question-list { background: #fff; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow-y: auto; } .Question-slideDown, .Question-more { color: #0791e6; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin: 10px 0 10px 50px; } .Question-slideDown .slide, .Question-more .slide { background: #0791e6; -webkit-border-radius: 50%; border-radius: 50%; width: 18px; text-align: center; line-height: 18px; color: #fff; height: 18px; display: inline-block; vertical-align: middle; margin-left: 5px; } .Question-more { border: 0; background: none; text-decoration: underline; margin-top: 0; } .Question-more span { font-size: 14px; } @media only screen and (max-width: 1000px) { .message .content { font-size: 12px; } .Question-form { margin-left: 35px; } .Question-slideDown { margin-left: 35px; } .Answer { margin-left: 35px; } } @media only screen and (max-width: 1001px) { .message .actions span { font-size: 25px; } } .ChatForm { position: relative; -webkit-border-radius: 5px; border-radius: 5px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .ChatForm-container { padding: 0.8em 0.8em 0 0.8em; -webkit-flex-shrink: 0; flex-shrink: 0; background: #fff; position: relative; z-index: 2; } .ChatForm-field { background-color: #f6f6f6; border: 1px solid #e9e9e9; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 0 0 7px rgba(0,0,0,0.1); box-shadow: inset 0 0 7px rgba(0,0,0,0.1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 15px; outline: 0; padding: 10px 3px 10px 10px; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; font-family: 'Lato', sans-serif; } .ChatForm-field.is-main { padding: 10px 3px 25px 10px; } .ChatForm-field.is-orange { color: #ff7f38; border: 1px solid #ff7f38; } .ChatForm-field.is-orange::-webkit-input-placeholder { color: #ff7f38; } .ChatForm-field.is-orange:focus { border-color: #ff7f38; -webkit-box-shadow: inset 0 0 7px rgba(255,127,56,0.5); box-shadow: inset 0 0 7px rgba(255,127,56,0.5); } .ChatForm-field:disabled { background-color: #fff8a9; } .ChatForm-field:focus { -webkit-transition: 0.3s height; -moz-transition: 0.3s height; -o-transition: 0.3s height; -ms-transition: 0.3s height; transition: 0.3s height; border-color: #696969; -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; } .ChatForm-counter { color: #808b7a; position: absolute; bottom: 5px; right: 5px; font-weight: bold; font-size: 16px; } .ChatForm-counter.max { color: #f00; } .u-prettyScroll, .Chat-list { -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } .u-prettyScroll::-webkit-scrollbar, .Chat-list::-webkit-scrollbar { width: 9px; height: 10px; } .u-prettyScroll::-webkit-scrollbar-track, .Chat-list::-webkit-scrollbar-track { -webkit-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background: rgba(0,0,0,0.1); } .u-prettyScroll::-webkit-scrollbar-thumb, .Chat-list::-webkit-scrollbar-thumb { -webkit-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background: rgba(0,0,0,0.2); } .u-prettyScroll::-webkit-scrollbar-thumb:hover, .Chat-list::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.4); } .u-prettyScroll::-webkit-scrollbar-thumb:window-inactive, .Chat-list::-webkit-scrollbar-thumb:window-inactive { background: rgba(0,0,0,0.05); } .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); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } .fade-enter-active { -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .fade-leave { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .fade-leave-active { -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; 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: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } .tabs-enter { -webkit-transform: translate3D(60px, 0, 0); -moz-transform: translate3D(60px, 0, 0); -o-transform: translate3D(60px, 0, 0); -ms-transform: translate3D(60px, 0, 0); transform: translate3D(60px, 0, 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); } .tabs-enter-active { -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -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); z-index: 10; } .tabs-leave { -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); } .tabs-leave-active { width: 100%; position: absolute; left: 0; top: 0; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; -webkit-transform: translate3D(-60px, 0, 0); -moz-transform: translate3D(-60px, 0, 0); -o-transform: translate3D(-60px, 0, 0); -ms-transform: translate3D(-60px, 0, 0); transform: translate3D(-60px, 0, 0); } .fade-in-enter { opacity: 0.3; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; -webkit-filter: alpha(opacity=30); -moz-filter: alpha(opacity=30); -ms-filter: alpha(opacity=30); -o-filter: alpha(opacity=30); filter: alpha(opacity=30); } .fade-in-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; } .Notes { background: #fff; padding-top: 10px; } .Nav { position: relative; padding: 6px 0; 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-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .Nav [type="radio"] { display: none; } .Nav [type="radio"]:checked + .Chat-filter { background: #fff; } .Nav [type="radio"]:checked + .Chat-filter .Filter-btn, .Nav [type="radio"]:checked + .Chat-filter .Filter-icon { color: #273b47 !important; } .Nav .is-admin { color: #ff7f38; } .Filter-btn { color: #fff !important; margin-right: 10px; font-size: 13px; color: #0791e6; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .Filter-btn:last-child { margin-right: 0; } .Filter-icon { display: none; color: #fff !important; line-height: 100%; margin: 0; font-size: 20px; } .Chat { -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-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .Chat-filter { background: #fff; padding: 0 14px; line-height: 30px; -webkit-border-radius: 15px; border-radius: 15px; margin-left: 5px; cursor: pointer; background: #0791e6; color: #fff; -webkit-transition: 0.2s background; -moz-transition: 0.2s background; -o-transition: 0.2s background; -ms-transition: 0.2s background; transition: 0.2s background; display: inline-block; margin: 5px 5px 5px 0; font-size: 14px; } .Chat-filter: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); } .Chat-filter:before { display: none; margin-right: 3px; font-size: 11px; } .Chat-filter:first-child { margin-left: 0; } .Chat-list { -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; overflow-y: auto; } .Chat-list > div { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; background: #fff; } .Chat-list > div iframe { height: 100% !important; width: 100% !important; } .Chat-select { border: 1px solid #e9e9e9; height: 30px; color: #0791e6; background: #fff; } .Chat-select:focus { outline: 0; } @media only screen and (max-width: 1000px) { .Chat-list > div:before { -webkit-box-shadow: none; box-shadow: none; } .NoteSystem { display: block !important; } .NoteSystem:not(.is-login) { min-height: 500px; } } .Actions { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -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: #1c3643; } @media only screen and (min-width: 1000px) { .Actions { display: none; } } .BestStudents { -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-flex-shrink: 0; flex-shrink: 0; padding: 0.5em; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; background: #f6f6f6; margin-bottom: 0.5em; -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; } .BestStudents.is-hidden { display: none; } .BestStudents p { font-size: 14px; color: #767676; margin-right: 0.5em; line-height: 1; } .BestStudents-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin-left: 10px; position: relative; } .BestStudents-container > div { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .ChatBestStudent { position: relative; -webkit-flex-shrink: 0; flex-shrink: 0; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; position: absolute; top: 0; left: 0; } .ChatBestStudent[data-order="0"] { -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); } .ChatBestStudent[data-order="1"] { -webkit-transform: translate3D(30px, 0, 0); -moz-transform: translate3D(30px, 0, 0); -o-transform: translate3D(30px, 0, 0); -ms-transform: translate3D(30px, 0, 0); transform: translate3D(30px, 0, 0); } .ChatBestStudent[data-order="2"] { -webkit-transform: translate3D(60px, 0, 0); -moz-transform: translate3D(60px, 0, 0); -o-transform: translate3D(60px, 0, 0); -ms-transform: translate3D(60px, 0, 0); transform: translate3D(60px, 0, 0); } .ChatBestStudent[data-order="3"] { -webkit-transform: translate3D(90px, 0, 0); -moz-transform: translate3D(90px, 0, 0); -o-transform: translate3D(90px, 0, 0); -ms-transform: translate3D(90px, 0, 0); transform: translate3D(90px, 0, 0); } .ChatBestStudent[data-order="4"] { -webkit-transform: translate3D(120px, 0, 0); -moz-transform: translate3D(120px, 0, 0); -o-transform: translate3D(120px, 0, 0); -ms-transform: translate3D(120px, 0, 0); transform: translate3D(120px, 0, 0); } .ChatBestStudent[data-order="5"] { -webkit-transform: translate3D(150px, 0, 0); -moz-transform: translate3D(150px, 0, 0); -o-transform: translate3D(150px, 0, 0); -ms-transform: translate3D(150px, 0, 0); transform: translate3D(150px, 0, 0); } .ChatBestStudent[data-order="6"] { -webkit-transform: translate3D(180px, 0, 0); -moz-transform: translate3D(180px, 0, 0); -o-transform: translate3D(180px, 0, 0); -ms-transform: translate3D(180px, 0, 0); transform: translate3D(180px, 0, 0); } .ChatBestStudent[data-order="7"] { -webkit-transform: translate3D(210px, 0, 0); -moz-transform: translate3D(210px, 0, 0); -o-transform: translate3D(210px, 0, 0); -ms-transform: translate3D(210px, 0, 0); transform: translate3D(210px, 0, 0); } .ChatBestStudent[data-order="8"] { -webkit-transform: translate3D(240px, 0, 0); -moz-transform: translate3D(240px, 0, 0); -o-transform: translate3D(240px, 0, 0); -ms-transform: translate3D(240px, 0, 0); transform: translate3D(240px, 0, 0); } .ChatBestStudent[data-order="9"] { -webkit-transform: translate3D(270px, 0, 0); -moz-transform: translate3D(270px, 0, 0); -o-transform: translate3D(270px, 0, 0); -ms-transform: translate3D(270px, 0, 0); transform: translate3D(270px, 0, 0); } .ChatBestStudent:first-child { margin-left: 0; } .ChatBestStudent:hover .ChatBestStudent-face { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -o-transform: rotateX(180deg); -ms-transform: rotateX(180deg); transform: rotateX(180deg); } .ChatBestStudent:hover .ChatBestStudent-backFace { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -o-transform: rotateX(0); -ms-transform: rotateX(0); transform: rotateX(0); } .ChatBestStudent-face { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; -webkit-border-radius: 50%; border-radius: 50%; overflow: hidden; -webkit-flex-shrink: 0; flex-shrink: 0; width: 25px; height: 25px; } .ChatBestStudent-face img { vertical-align: top; width: 25px; height: 25px; object-fit: cover; } .ChatBestStudent-backFace { position: absolute; left: 0; top: 0; right: 0; bottom: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -o-transform: rotateX(180deg); -ms-transform: rotateX(180deg); transform: rotateX(180deg); text-align: center; background: #fff; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; aling-items: center; line-height: 25px; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; font-size: 12px; -webkit-border-radius: 50%; border-radius: 50%; overflow: hidden; -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.5); box-shadow: 0 0 2px rgba(0,0,0,0.5); } .AdminNav { padding-bottom: 10px; } .AdminButton { color: #ff7f38; margin: 10px 0; position: relative; padding-right: 20px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .AdminButton:after { content: "|"; color: #e9e9e9; position: absolute; right: 9px; top: 0; } .AdminButton:last-child:after { display: none; } .AdminButton input { margin-right: 5px; } .TransformLayout { color: #0791e6; font-size: 13px; cursor: pointer; top: 15px; } .TransformLayout:before { margin-right: 10px; } .GodMessage { background: #fff8a9; color: #554e00; font-weight: bold; left: 0; padding: 10px; right: 0; text-align: center; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; z-index: 1; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-flex-shrink: 0; flex-shrink: 0; border-top: 1px solid #feea00; border-bottom: 1px solid #feea00; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .GodMessage-content { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .GodMessage-content .dot { -webkit-animation-duration: 1.3s; -moz-animation-duration: 1.3s; -o-animation-duration: 1.3s; -ms-animation-duration: 1.3s; animation-duration: 1.3s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -o-animation-timing-function: linear; -ms-animation-timing-function: linear; animation-timing-function: linear; 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); } .GodMessage-content .dot:nth-child(2) { -webkit-animation-name: fade-1; -moz-animation-name: fade-1; -o-animation-name: fade-1; -ms-animation-name: fade-1; animation-name: fade-1; } .GodMessage-content .dot:nth-child(3) { -webkit-animation-name: fade-2; -moz-animation-name: fade-2; -o-animation-name: fade-2; -ms-animation-name: fade-2; animation-name: fade-2; } .GodMessage-content .dot:nth-child(4) { -webkit-animation-name: fade-3; -moz-animation-name: fade-3; -o-animation-name: fade-3; -ms-animation-name: fade-3; animation-name: fade-3; } .GodMessage-close { cursor: pointer; margin-left: 10px; color: #ff7f38; } .BestNotes { -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-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 (max-width: 1205px) { .ChatBestStudent[data-order="9"] { display: none; } } @media only screen and (max-width: 1130px) { .ChatBestStudent[data-order="8"] { display: none; } } @media only screen and (max-width: 1055px) { .ChatBestStudent[data-order="7"] { display: none; } } @-moz-keyframes fade-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); } 33% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } 66% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } 100% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } } @-webkit-keyframes fade-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); } 33% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } 66% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } 100% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } } @-o-keyframes fade-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); } 33% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } 66% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } 100% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } } @keyframes fade-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); } 33% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } 66% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } 100% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } } @-moz-keyframes fade-2 { 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); } 33% { 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); } 66% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } 100% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } } @-webkit-keyframes fade-2 { 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); } 33% { 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); } 66% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } 100% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } } @-o-keyframes fade-2 { 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); } 33% { 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); } 66% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } 100% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } } @keyframes fade-2 { 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); } 33% { 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); } 66% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } 100% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } } @-moz-keyframes fade-3 { 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); } 33% { 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); } 66% { 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); } 100% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } } @-webkit-keyframes fade-3 { 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); } 33% { 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); } 66% { 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); } 100% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } } @-o-keyframes fade-3 { 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); } 33% { 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); } 66% { 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); } 100% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } } @keyframes fade-3 { 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); } 33% { 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); } 66% { 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); } 100% { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } } .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; } } .u-wrapper { padding: 0 15px !important; } .Filters { margin-top: 15px; } .Chat-filter.is-active { background: #fff; color: #273b47 !important; } .Breadcrumbs-course { -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; } .Breadcrumbs-courseBadge { margin-right: 0.5em; } .PulseEditor-wide { background-color: #fff; } @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; } /* #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, .PlanSlide li: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, .PlanSlide li: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; } .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; } .PlanResumen { background: #f6f6f6; padding: 2em 0; } .FAQ { padding: 30px 0; } .FAQ h2 { font-size: 1.5rem; font-weight: 600; font-family: 'cooper_hewittmedium'; line-height: 1.2; margin-bottom: 1.5rem; } @media only screen and (min-width: 48em) { .FAQ h2 { font-size: 28px; } } .FAQ-subtitle { padding: 0.5rem 0 1.5rem; } .FAQ-question { padding: 1rem 2rem 1rem 0.5rem; font-size: 18px; font-weight: 600; border-top: 1px solid #e9e9e9; border-bottom: none; } @media only screen and (min-width: 64em) { .FAQ-question:hover { color: #0791e6; } } .FAQ-question:hover .FAQ-answer { color: #273b47; } @media only screen and (min-width: 48em) { .FAQ-question { font-size: 18px; padding: 1rem 1.25rem 1rem 2rem; } } @media only screen and (min-width: 64em) { .FAQ-question { padding: 1rem 2rem; } } .FAQ-questionArrow { color: #0791e6; } .FAQ-questionContainer:last-child .FAQ-question { border-bottom: 1px solid #e9e9e9; } .FAQ-questionHeader { 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; } .FAQ-questionContent { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: left; } .FAQ-questionArrow { font-size: 1.75rem; } .FAQ-answer { font-size: 1rem; font-weight: normal; text-align: left; display: none; margin-top: 1rem; } @media only screen and (min-width: 48em) { .FAQ-answer { margin-top: 1rem; } } .FAQ-answer:hover { color: #273b47; } .FAQ .icon-arrow-down { -webkit-transition: 2s -webkit-transform; -moz-transition: 2s -moz-transform; -o-transition: 2s -o-transform; -ms-transition: 2s -ms-transform; transition: 2s transform; } .FAQ-radio { display: none; } .FAQ-radio:checked ~ .FAQ-question { background: #fff; } .FAQ-radio:checked ~ .FAQ-question .FAQ-answer { display: block; } .FAQ-radio:checked ~ .FAQ-question .icon-arrow-down:before { content: "\E640"; } .Body { display: none; } .Body-container { padding: 1rem; -webkit-box-shadow: 0 1px 3px 0 #d8d8d7; box-shadow: 0 1px 3px 0 #d8d8d7; position: relative; text-align: left; } .Body-container.large { padding: 1rem; -webkit-box-shadow: 0 1px 3px 0 #d8d8d7; box-shadow: 0 1px 3px 0 #d8d8d7; position: relative; text-align: left; } .Body ul { list-style: none; font-size: 14px; line-height: 16px; padding: 0; } .Body ul li { margin-bottom: 1rem; } .Body-CTA { text-align: center; } .Body .icon { margin-right: 0.5rem; } .Body .icon.icon-check { color: #4ccb00; } .Body .icon.icon-delete { color: #ff4842; } .PricingPlans-animation-enter { opacity: 0.01; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)"; -webkit-filter: alpha(opacity=1); -moz-filter: alpha(opacity=1); -ms-filter: alpha(opacity=1); -o-filter: alpha(opacity=1); filter: alpha(opacity=1); } .PricingPlans-animation-enter.PricingPlans-animation-enter-active { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transition: opacity 200ms ease-in; -moz-transition: opacity 200ms ease-in; -o-transition: opacity 200ms ease-in; -ms-transition: opacity 200ms ease-in; transition: opacity 200ms ease-in; } .PricingPlans-animation-leave { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } .PricingPlans-animation-leave.PricingPlans-animation-leave-active { opacity: 0.01; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)"; -webkit-filter: alpha(opacity=1); -moz-filter: alpha(opacity=1); -ms-filter: alpha(opacity=1); -o-filter: alpha(opacity=1); filter: alpha(opacity=1); -webkit-transition: opacity 1ms ease-in; -moz-transition: opacity 1ms ease-in; -o-transition: opacity 1ms ease-in; -ms-transition: opacity 1ms ease-in; transition: opacity 1ms ease-in; } .Tab { padding: 0.5rem 0.5rem; -webkit-border-radius: 0.5rem 0.5rem 0 0; border-radius: 0.5rem 0.5rem 0 0; background: #1c3643; color: #fff; min-width: 80px; } .Tab-currency { font-size: 10px; margin: 0.25rem 0 0.5rem; 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; } .Tab-currency figure { margin-right: 0.25rem; } .Tab-currency img { -webkit-border-radius: 50%; border-radius: 50%; } .Tab-title { font-size: 12px; text-align: center; } .Tab-price { font-weight: bold; text-align: center; } .Tab-price small { font-size: 12px; } .Tab-logo { margin-right: 22px; } .Tab-container { 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; } .Tab-specification { text-align: center; font-size: 0.5rem; } .Tab.is-conf { background: -webkit-linear-gradient(left, #000712, #001940) !important; background: -moz-linear-gradient(left, #000712, #001940) !important; background: -o-linear-gradient(left, #000712, #001940) !important; background: -ms-linear-gradient(left, #000712, #001940) !important; background: linear-gradient(to right, #000712, #001940) !important; min-width: calc(100vw - 32px); color: #fff !important; } .Tab.is-bf { background: #231631 !important; color: #fff !important; } .Tab.is-bf .Tab-price { color: #fb419a; } .Tab.is-xmas { background: #192158 !important; color: #fff !important; } .Tab.is-xmas .Tab-price { color: #5293d4; } .Tab.is-active { color: #273b47; background: #fff; -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.12), 0 0 2px 0 rgba(0,0,0,0.14); box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.12), 0 0 2px 0 rgba(0,0,0,0.14); } .Tabs { margin: 0 0.5rem; text-align: center; } .Tabs input[type="radio"] { display: none; } .Tabs label { display: inline-block; vertical-align: bottom; } .Title { font-size: 20px; font-weight: bold; font-family: 'cooper_hewittmedium'; line-height: 1.4; text-align: center; margin-bottom: 1.5rem !important; } @media only screen and (min-width: 48em) { .Title { font-size: 36px; } } .Timeline { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin-top: 1rem; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .Timeline-step { width: 100px; text-align: center; } .Timeline-step:last-child .Timeline-mark:after { display: none; } @media only screen and (min-width: 48em) { .Timeline-step { width: 250px; } } @media only screen and (min-width: 64em) { .Timeline-step { width: 300px; } } .Timeline-mark { -webkit-border-radius: 50%; border-radius: 50%; width: 1rem; height: 1rem; 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; margin: 0 auto; position: relative; border: solid 1px #e9e9e9; } @media only screen and (min-width: 48em) { .Timeline-mark { border: solid 3px #e9e9e9; width: 30px; height: 30px; } } .Timeline-mark.current { border: solid 1px #7fc719; } @media only screen and (min-width: 48em) { .Timeline-mark.current { border: solid 3px #7fc719; } } .Timeline-mark.checked { background: #7fc719; border: solid 1px #7fc719; } @media only screen and (min-width: 48em) { .Timeline-mark.checked { border: solid 3px #7fc719; } } .Timeline-mark.checked span { color: #fff; font-size: 8px; } @media only screen and (min-width: 48em) { .Timeline-mark.checked span { font-size: 18px; } } .Timeline-mark.checked:after { background: #7fc719; } .Timeline-mark:after { content: ""; height: 2px; background: #e9e9e9; position: absolute; left: 17px; width: 84px; top: 7px; } @media only screen and (min-width: 48em) { .Timeline-mark:after { top: 14px; left: 33px; width: 215px; height: 3px; } } @media only screen and (min-width: 64em) { .Timeline-mark:after { width: 265px; } } .Timeline-mark:last-child:after { display: none; } .Timeline-name { font-size: 11px; margin-top: 0.25rem; } @media only screen and (min-width: 48em) { .Timeline-name { margin-top: 0.5rem; font-size: 1rem; } } .Price { text-align: center; -webkit-border-radius: 0.5em; border-radius: 0.5em; overflow: hidden; max-width: 18em; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: inset 0 0 0 2px #e9e9e9, 0 0 30px rgba(233,233,233,0.2); box-shadow: inset 0 0 0 2px #e9e9e9, 0 0 30px rgba(233,233,233,0.2); -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -o-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; margin: 1em 0.5em; } .Price img { -webkit-border-radius: 50%; border-radius: 50%; } .Price-company { margin: 0.5rem 0 2rem 0; padding: 1rem; text-align: center; border: 1px solid #98ca3f; -webkit-border-radius: 5px; border-radius: 5px; background: rgba(243,243,246,0.5); } @media only screen and (min-width: 48em) { .Price-company { font-weight: bold; } } .Price-justAnnual { margin: 0 auto; } .Price-justAnnual > .Price { margin: 0; } .Price-save { font-size: 20px; padding: 0 5px 8px; font-weight: 100; } .Price-disclaimer { margin-top: 2.2rem; font-size: 0.9em; } .Price-title { font-size: 2em; font-family: 'cooper_hewittmedium'; margin-bottom: 2.2rem; font-weight: 500; } .Price-section { padding: 2.2em 15px; text-align: center; } .Price.is-green { -webkit-box-shadow: inset 0 0 0 2px #98ca3f, 0 0 30px rgba(152,202,63,0.2); box-shadow: inset 0 0 0 2px #98ca3f, 0 0 30px rgba(152,202,63,0.2); font-size: 1.1em; max-width: 19.77em; -webkit-box-ordinal-group: 0; -moz-box-ordinal-group: 0; -o-box-ordinal-group: 0; -ms-flex-order: 0; -webkit-order: 0; order: 0; } .Price.is-green .Price-header { background: #98ca3f; } .Price-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-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .Price-total { font-size: 3em; font-weight: bold; font-family: 'cooper_hewittmedium'; } .Price-total + span { padding-left: 0.2em; } .Price-label { font-family: 'cooper_hewittmedium'; font-size: 1.1em; } .Price-header { background: #1c3643; color: #fff; padding: 1.9em 1em; } .Price-label { margin-top: 1.2em; } .Price-footer { padding: 2em 0.5em; } .Price-features { margin: 0 2px; } .Price-feature { padding: 1em; font-size: 0.9em; } .Price-feature img { vertical-align: middle; margin-left: 2px; } .Price-feature:nth-child(odd) { background: rgba(246,246,246,0.7); } @media only screen and (min-width: 816px) { .Price { -webkit-box-ordinal-group: 1 !important; -moz-box-ordinal-group: 1 !important; -o-box-ordinal-group: 1 !important; -ms-flex-order: 1 !important; -webkit-order: 1 !important; order: 1 !important; } .Price-container { -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-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } } @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; } .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; } .Plan { border: 1px solid #e9e9e9; -webkit-border-radius: 5px; border-radius: 5px; overflow: hidden; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 150px; margin-right: 1rem; position: relative; } .Plan:last-child { margin-right: 0; } .Plan-content { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .Plan-content.is-conf { max-width: 720px; } .Plan.is-outstanding { border: 1px solid #98ca3f; } .Plan.is-outstanding.is-bf { border: 2px solid #fb419a; } .Plan.is-outstanding.is-bf .PlanLabel, .Plan.is-outstanding.is-bf .PlanHeader-cost, .Plan.is-outstanding.is-bf .PlanHeader-subtitle { background: #231631; } .Plan.is-outstanding.is-bf .PlanHeader-cost { color: #fb419a; padding: 2px 0; } .Plan.is-outstanding.is-bf .PlanHeader-subtitle small { color: #fff; } .Plan.is-outstanding.is-bf .PlanLabel figure { padding-top: 0.25rem; } .Plan.is-outstanding.is-xmas { border: 2px solid #5293d4; } .Plan.is-outstanding.is-xmas .PlanLabel, .Plan.is-outstanding.is-xmas .PlanHeader-cost, .Plan.is-outstanding.is-xmas .PlanHeader-subtitle { background: #192158; } .Plan.is-outstanding.is-xmas .PlanHeader { background: #192158; } .Plan.is-outstanding.is-xmas .PlanHeader-cost { color: #5293d4; padding: 2px 0; } .Plan.is-outstanding.is-xmas .PlanHeader-subtitle small { color: #fff; } .Plan.is-outstanding.is-xmas .PlanLabel figure { padding-top: 0.25rem; } .Plan.is-outstanding.is-conf { border: 2px solid #001941; width: 160px; } .Plan.is-outstanding.is-conf .PlanLabel { background: #001941; } .Plan.is-outstanding.is-conf .PlanHeader-cost { color: #001941; } .Plan.is-outstanding .PlanLabel { background: #98ca3f; color: #fff; } .Plan.is-outstanding .PlanHeader-cost { color: #98ca3f; } .Plan-limit { text-align: center; } .Plan-overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; } .Plan-trial { text-align: center; } .Plan-container { margin: 1em 0; position: relative; } .Plan-container .p { text-align: center; } .Plan-container h1, .Plan-container h3, .Plan-container h4, .Plan-container h5, .Plan-container h6 { margin: 0; } .Plan-container .Title { font-family: 'cooper_hewittmedium'; } @media only screen and (min-width: 48em) { .Plan-container.is-xs { display: none; } } .Plan-container.is-lg { display: none; } @media only screen and (min-width: 48em) { .Plan-container.is-lg { display: block; } } .Plan-container > h2 { text-align: center; margin: 0.5rem 0; } @media only screen and (min-width: 48em) { .Plan-container > h2 { font-size: 1.75rem; } } @media only screen and (min-width: 48em) { .Plan-container > h2 { margin-bottom: 1.5rem; } } .PlanHeader { height: 96px; 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: start; -moz-box-pack: start; -o-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } .PlanHeader-currency { color: #696969; 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; } .PlanHeader small { font-weight: bold; font-size: 12px; font-family: 'Lato', sans-serif; color: #696969; } .PlanHeader img { -webkit-border-radius: 50%; border-radius: 50%; overflow: hidden; margin-right: 5px; background: #fecc01; } .PlanHeader-onepayment { margin-bottom: 4px; } .PlanHeader-onepayment small { font-weight: bold; font-size: 12px; } .PlanHeader-cost { font-size: 1.8em; padding: 4px 0; font-weight: bold; font-family: 'cooper_hewittmedium'; } .PlanHeader-copy { line-height: 0.9; } .PlanLabel { background: #1c3643; color: #fff; height: 40px; line-height: 40px; text-align: center; } .PlanRow { color: #000; height: 50px; line-height: 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 20px; text-align: center; } .PlanRow:nth-of-type(odd) { background: #f6f6f6; border-top: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; } .PlanRow .is-red { color: #ff4842; } .PlanRow .is-green { color: #98ca3f; } .PlanFooter { padding: 1em; border-top: 1px solid #e9e9e9; } .PlanFooter .choose-course-btn { 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: bold; text-decoration: none; color: #0791e6; padding: 0.6em 0.8em 0.8em 0.8em; font-family: 'Lato', sans-serif; } .PlanDisclaimer { padding-top: 1em; text-align: center; color: #696969; } .align-self { -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; margin-top: -28px; } .PlanAside { margin-top: 98px; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .PlanAside .PlanAside-title { margin-top: 46px; } .PlanAside .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; align-items: flex-start; } @media only screen and (min-width: 64em) { .PlanAside .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; align-items: center; } } .PlanAside .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; } .PlanAside .methods figure { margin-right: 0.25rem; } @media only screen and (min-width: 64em) { .PlanAside .methods { margin: 0.25rem 0 0 10px; } } .PlanAside h5 { height: 40px; line-height: 40px; padding-left: 0.4em; } .PlanAside ul { padding: 0; } .PlanAside 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; color: #000; height: 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0.5rem; font-size: 14px; list-style: none; text-align: left; } .PlanAside li:nth-of-type(odd) { background: #f6f6f6; border-top: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; } .PlanAside li:last-child { border-bottom: 1px solid #e9e9e9; } @media only screen and (min-width: 64em) { .PlanAside li { font-size: 1rem; } } .PlanSlide { background: #f6f6f6; 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); visivility: hidden; -webkit-transition: 0.3s opacity; -moz-transition: 0.3s opacity; -o-transition: 0.3s opacity; -ms-transition: 0.3s opacity; transition: 0.3s opacity; height: 0; overflow: hidden; } .PlanSlide .methods { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin-top: 0.5rem; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .PlanSlide .methods figure { margin-right: 0.25rem; } .PlanSlide-radio { display: none; } .PlanSlide-radio:checked { border: 1px solid #f00; } .PlanSlide-radio:checked ~ .PlanSlide { opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; height: auto; visivility: visible; padding: 1em 0; } .PlanSlide-radio:checked ~ .PlanHeaderRow .PlanHeaderRow-left:before { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .PlanSlide ul { padding: 0; } .PlanSlide li { position: relative; padding-left: 25px; margin-bottom: 1.5rem; list-style: none; } .PlanSlide li:before { position: absolute; left: 0; color: #98ca3f; text-align: left; width: 25px; line-height: 1.5; } .PlanCTA { margin-bottom: 1.5em; text-align: center; } .PlanCTA p { margin-top: 1rem; } .PlanCTA small { font-weight: bold; } .PlanHeaderRow { padding: 1em 0; border-bottom: 1px solid #e9e9e9; } .PlanHeaderRow h3 { font-size: 1.75rem; } .PlanHeaderRow img { vertical-align: middle; } .PlanHeaderRow-right { text-align: center; } .PlanHeaderRow-left { padding-left: 20px; position: relative; } .PlanHeaderRow-left:before { border-top: 4px solid transparent; border-left: 8px solid transparent; border-bottom: 4px solid transparent; content: ""; border-left-color: #1c3643; display: block; width: 0; height: 0; display: block; position: absolute; left: 0; top: 10px; -webkit-transition: 0.2s -webkit-transform; -moz-transition: 0.2s -moz-transform; -o-transition: 0.2s -o-transform; -ms-transition: 0.2s -ms-transform; transition: 0.2s transform; } .PlanHeaderRow-left h5 { margin-bottom: 0.5rem; } .PlanHeaderRow small { color: #0791e6; text-decoration: underline; font-size: 1rem; } #monthly-plan:checked ~ label[for="monthly-plan"] .Tab, #one-course:checked ~ label[for="one-course"] .Tab, #annual-plan:checked ~ label[for="annual-plan"] .Tab { color: #273b47; background: #fff; -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.12), 0 0 2px 0 rgba(0,0,0,0.14); box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.12), 0 0 2px 0 rgba(0,0,0,0.14); } #monthly-plan:checked ~ .Body-container #tab-monthly, #one-course:checked ~ .Body-container #tab-one-course, #annual-plan:checked ~ .Body-container #tab-annual { display: block; opacity: 1; -ms-filter: none; -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; -webkit-transition: all ease-out 0.2s 0.1s; -moz-transition: all ease-out 0.2s 0.1s; -o-transition: all ease-out 0.2s 0.1s; -ms-transition: all ease-out 0.2s 0.1s; transition: all ease-out 0.2s 0.1s; } .PlanHeader.havesBanner { margin-bottom: 46px; background-color: #fff; } .PlanHeader-cost.no-bold { font-weight: 200 !important; } .PlanHeader-promo-container { background-color: #fff8a9; font-size: 12px; padding: 4px; } .PlanHeader-promo-container .PlanHeader-promo-text { text-transform: uppercase; } .PlanHeader-promo-container .PlanHeader-promo-text .PlanHeader-promo-old { text-transform: lowercase; text-decoration: line-through; } .PlanHeader-promo-container.is-transparent { background-color: transparent; padding: 11px 0; } .from-course-banner { position: absolute; width: 100%; top: 119px; 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; background-color: #f6f6f6; height: 97px; } .from-course-banner .from-course-banner-content { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; width: 100%; max-width: 1024px; margin: 0 auto; } .from-course-banner .from-course-banner-content .from-course-banner-figure { width: 60px; height: 60px; } .from-course-banner .from-course-banner-content .from-course-banner-figure img { width: 100%; } .from-course-banner .from-course-banner-content .from-course-banner-title-area { margin-left: 20px; 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-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; } .from-course-banner .from-course-banner-content .from-course-banner-title-area .PaymentStatus-course { font-family: 'Lato', sans-serif; } .from-course-banner .from-course-banner-content .from-course-banner-title-area .PaymentStatus-title { font-family: 'cooper_hewittmedium'; } .Price-study-with-us-main { padding-bottom: 30px; } .Price-study-with-us-main-title { font-family: 'cooper_hewittmedium'; text-align: center; font-size: 24px; font-weight: bold; margin-bottom: 32px; } .Price-study-with-us-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -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-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-top: 32px; } .Price-study-with-us-container .Price-study-with-us-figure { height: 160px; } .Price-study-with-us-container .Price-study-with-us-figure img { height: 100%; } .Price-study-with-us-container .Price-study-with-us-title { font-family: 'Lato', sans-serif; font-size: 20px; margin-top: 16px; } .Price-study-with-us-container .Price-study-with-us-text { font-family: 'Lato', sans-serif; font-size: 16px; color: #273b47; line-height: 1.12; text-align: center; margin-top: 8px; padding: 0 15px; } module.exports = (__webpack_require__(2))(976);