@nitro-ui/bundle-objects/dist/css/objects.css

Objects bundle component for Nitro UI.

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700");
.o-container {
  margin: 0 auto;
  max-width: 1080px;
  padding-left: 12px;
  padding-right: 12px;
  width: 100%; }
  .o-container::after {
    display: block;
    content: "";
    clear: both; }

.o-container--medium {
  max-width: 800px; }

.o-container--wide {
  max-width: 1240px; }

.o-container--fluid {
  max-width: 100%; }

.o-embed {
  background-color: #CFD6DF;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  min-width: 20px;
  position: relative;
  overflow: hidden; }
  .o-embed:before {
    content: '';
    display: block;
    padding-top: 100%; }
  .o-embed img,
  .o-embed embed,
  .o-embed iframe,
  .o-embed object,
  .o-embed video {
    bottom: 0;
    display: block;
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute !important;
    top: 0;
    width: 100%; }

.o-embed--video {
  background-color: #151B22; }

.o-embed--shade::after {
  background: linear-gradient(to bottom, rgba(6, 8, 10, 0) 0%, rgba(6, 8, 10, 0.4) 40%, #06080a 100%);
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  padding-top: 75%;
  position: absolute;
  right: 0; }

.o-embed--transparent {
  background-color: transparent; }

.o-embed--3x1:before {
  padding-top: 33.335%; }

.o-embed--1x1:before {
  padding-top: 100%; }

.o-embed--16x9:before {
  padding-top: 56.25%; }

.o-embed--4x3:before {
  padding-top: 75%; }

.o-embed--xxl {
  flex: 0 0 280px;
  max-width: 280px;
  width: 280px; }

.o-embed--xl {
  flex: 0 0 200px;
  max-width: 200px;
  width: 200px; }

.o-embed--lg {
  flex: 0 0 148px;
  max-width: 148px;
  width: 148px; }

.o-embed--md {
  flex: 0 0 100px;
  max-width: 100px;
  width: 100px; }

.o-embed--sm {
  flex: 0 0 76px;
  max-width: 76px;
  width: 76px; }

.o-embed--xs {
  flex: 0 0 52px;
  max-width: 52px;
  width: 52px; }

@media only screen and (min-width: 1081px) {
  .o-embed--3x1\@desktop:before {
    padding-top: 33.335%; }
  .o-embed--1x1\@desktop:before {
    padding-top: 100%; }
  .o-embed--16x9\@desktop:before {
    padding-top: 56.25%; }
  .o-embed--4x3\@desktop:before {
    padding-top: 75%; }
  .o-embed--xxl\@desktop {
    flex: 0 0 280px;
    max-width: 280px;
    width: 280px; }
  .o-embed--xl\@desktop {
    flex: 0 0 200px;
    max-width: 200px;
    width: 200px; }
  .o-embed--lg\@desktop {
    flex: 0 0 148px;
    max-width: 148px;
    width: 148px; }
  .o-embed--md\@desktop {
    flex: 0 0 100px;
    max-width: 100px;
    width: 100px; }
  .o-embed--sm\@desktop {
    flex: 0 0 76px;
    max-width: 76px;
    width: 76px; }
  .o-embed--xs\@desktop {
    flex: 0 0 52px;
    max-width: 52px;
    width: 52px; } }

@media only screen and (min-width: 768px) {
  .o-embed--3x1\@tablet-desktop:before {
    padding-top: 33.335%; }
  .o-embed--1x1\@tablet-desktop:before {
    padding-top: 100%; }
  .o-embed--16x9\@tablet-desktop:before {
    padding-top: 56.25%; }
  .o-embed--4x3\@tablet-desktop:before {
    padding-top: 75%; }
  .o-embed--xxl\@tablet-desktop {
    flex: 0 0 280px;
    max-width: 280px;
    width: 280px; }
  .o-embed--xl\@tablet-desktop {
    flex: 0 0 200px;
    max-width: 200px;
    width: 200px; }
  .o-embed--lg\@tablet-desktop {
    flex: 0 0 148px;
    max-width: 148px;
    width: 148px; }
  .o-embed--md\@tablet-desktop {
    flex: 0 0 100px;
    max-width: 100px;
    width: 100px; }
  .o-embed--sm\@tablet-desktop {
    flex: 0 0 76px;
    max-width: 76px;
    width: 76px; }
  .o-embed--xs\@tablet-desktop {
    flex: 0 0 52px;
    max-width: 52px;
    width: 52px; } }

@media only screen and (max-width: 1080px) {
  .o-embed--3x1\@mobile-tablet:before {
    padding-top: 33.335%; }
  .o-embed--1x1\@mobile-tablet:before {
    padding-top: 100%; }
  .o-embed--16x9\@mobile-tablet:before {
    padding-top: 56.25%; }
  .o-embed--4x3\@mobile-tablet:before {
    padding-top: 75%; }
  .o-embed--xxl\@mobile-tablet {
    flex: 0 0 280px;
    max-width: 280px;
    width: 280px; }
  .o-embed--xl\@mobile-tablet {
    flex: 0 0 200px;
    max-width: 200px;
    width: 200px; }
  .o-embed--lg\@mobile-tablet {
    flex: 0 0 148px;
    max-width: 148px;
    width: 148px; }
  .o-embed--md\@mobile-tablet {
    flex: 0 0 100px;
    max-width: 100px;
    width: 100px; }
  .o-embed--sm\@mobile-tablet {
    flex: 0 0 76px;
    max-width: 76px;
    width: 76px; }
  .o-embed--xs\@mobile-tablet {
    flex: 0 0 52px;
    max-width: 52px;
    width: 52px; } }

@media only screen and (min-width: 768px) and (max-width: 1080px) {
  .o-embed--3x1\@tablet:before {
    padding-top: 33.335%; }
  .o-embed--1x1\@tablet:before {
    padding-top: 100%; }
  .o-embed--16x9\@tablet:before {
    padding-top: 56.25%; }
  .o-embed--4x3\@tablet:before {
    padding-top: 75%; }
  .o-embed--xxl\@tablet {
    flex: 0 0 280px;
    max-width: 280px;
    width: 280px; }
  .o-embed--xl\@tablet {
    flex: 0 0 200px;
    max-width: 200px;
    width: 200px; }
  .o-embed--lg\@tablet {
    flex: 0 0 148px;
    max-width: 148px;
    width: 148px; }
  .o-embed--md\@tablet {
    flex: 0 0 100px;
    max-width: 100px;
    width: 100px; }
  .o-embed--sm\@tablet {
    flex: 0 0 76px;
    max-width: 76px;
    width: 76px; }
  .o-embed--xs\@tablet {
    flex: 0 0 52px;
    max-width: 52px;
    width: 52px; } }

@media only screen and (max-width: 767px) {
  .o-embed--3x1\@mobile:before {
    padding-top: 33.335%; }
  .o-embed--1x1\@mobile:before {
    padding-top: 100%; }
  .o-embed--16x9\@mobile:before {
    padding-top: 56.25%; }
  .o-embed--4x3\@mobile:before {
    padding-top: 75%; }
  .o-embed--xxl\@mobile {
    flex: 0 0 280px;
    max-width: 280px;
    width: 280px; }
  .o-embed--xl\@mobile {
    flex: 0 0 200px;
    max-width: 200px;
    width: 200px; }
  .o-embed--lg\@mobile {
    flex: 0 0 148px;
    max-width: 148px;
    width: 148px; }
  .o-embed--md\@mobile {
    flex: 0 0 100px;
    max-width: 100px;
    width: 100px; }
  .o-embed--sm\@mobile {
    flex: 0 0 76px;
    max-width: 76px;
    width: 76px; }
  .o-embed--xs\@mobile {
    flex: 0 0 52px;
    max-width: 52px;
    width: 52px; } }

@keyframes rotate {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }

@keyframes shake-horizontal {
  0% {
    transform: translate(-16px, 0); }
  25% {
    transform: translate(16px, 0); }
  50% {
    transform: translate(-16px, 0); }
  75% {
    transform: translate(16px, 0); }
  100% {
    transform: translate(0, 0); } }

@keyframes shake-horizontal-small {
  0% {
    transform: translate(0, 0); }
  20% {
    transform: translate(-4px, 0); }
  40% {
    transform: translate(4px, 0); }
  60% {
    transform: translate(-4px, 0); }
  80% {
    transform: translate(4px, 0); }
  100% {
    transform: translate(0, 0); } }

@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-40px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .2px;
  height: 100%; }

body {
  background: #ECEEF3;
  color: #576A7F;
  position: relative; }

*, *:before, *:after {
  box-sizing: border-box; }

article,
aside,
audio,
canvas,
figure,
footer,
header,
main,
nav,
section,
summary,
video {
  display: block; }

[hidden] {
  display: none; }

[disabled] {
  pointer-events: none; }

body, html,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
figure, figcaption, img,
dl, dd, ol, ul,
form, fieldset, legend,
table, th, td, caption,
hr {
  margin: 0;
  padding: 0; }

h1, h2, h3, h4, h5, h6,
p,
ul, ol, dl,
blockquote {
  margin-bottom: 16px; }

ul, ol, dd {
  margin-left: 24px; }

li > ul,
li > ol {
  margin-bottom: 8px; }

hr {
  box-sizing: content-box;
  height: 0;
  margin: 0; }

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%; }

th,
td {
  padding: 16px;
  text-align: left;
  vertical-align: top; }
  th.is--tight,
  td.is--tight {
    width: 1px;
    white-space: nowrap; }
  th[valign="middle"],
  td[valign="middle"] {
    vertical-align: middle; }
  th[valign="bottom"],
  td[valign="bottom"] {
    vertical-align: bottom; }

thead th,
thead td {
  padding-bottom: 8px;
  padding-top: 8px; }

thead tr:last-child > th,
thead tr:last-child > td {
  border-bottom: 1px solid #ECEEF3; }

thead th {
  font-size: 12px; }

tbody th,
tbody td {
  border-bottom: 1px solid #ECEEF3; }

b,
strong {
  font-weight: 500; }

code,
kbd,
pre,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1em; }

pre {
  background: #ECEEF3;
  padding: 16px;
  white-space: pre-wrap; }

h1 {
  font-size: 40px;
  line-height: 48px; }

h2 {
  font-size: 32px;
  line-height: 40px; }

h3 {
  font-size: 24px;
  line-height: 32px; }

h4 {
  font-size: 18px;
  line-height: 24px; }

h5 {
  font-size: 16px;
  line-height: 20px; }

h6 {
  font-size: 14px;
  line-height: 20px; }

h1, h2, h3, h4, h5, h6 {
  color: #344251;
  font-weight: 500; }

a {
  color: #0162DD;
  cursor: pointer;
  text-decoration: none; }
  a:not(.c-btn).is--disabled {
    color: #B8C2CE;
    cursor: default;
    pointer-events: none; }
  a:not(.c-btn).no--underline {
    text-decoration: none !important; }

a:focus {
  outline: none !important; }

a:active,
a:hover {
  outline: 0; }

small {
  font-size: 12px; }

sub,
sup {
  font-size: 10px;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

u, ins {
  text-decoration: underline; }

label {
  display: block;
  margin-bottom: 4px; }

.o-grid {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  margin: 0 -8px;
  word-break: break-word; }

.o-grid__item {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
  padding: 0 8px; }

.o-grid--reversed {
  flex-direction: row-reverse; }

.o-grid--lg {
  margin: 0 -12px; }
  .o-grid--lg > .o-grid__item {
    padding: 0 12px; }

.o-grid--md {
  margin: 0 -8px; }
  .o-grid--md > .o-grid__item {
    padding: 0 8px; }

.o-grid--sm {
  margin: 0 -4px; }
  .o-grid--sm > .o-grid__item {
    padding: 0 4px; }

.o-grid--none {
  margin: 0 0; }
  .o-grid--none > .o-grid__item {
    padding: 0 0; }

@media only screen and (max-width: 767px) {
  .o-grid--lg\@mobile {
    margin: 0 -12px; }
    .o-grid--lg\@mobile > .o-grid__item {
      padding: 0 12px; }
  .o-grid--md\@mobile {
    margin: 0 -8px; }
    .o-grid--md\@mobile > .o-grid__item {
      padding: 0 8px; }
  .o-grid--sm\@mobile {
    margin: 0 -4px; }
    .o-grid--sm\@mobile > .o-grid__item {
      padding: 0 4px; }
  .o-grid--none\@mobile {
    margin: 0 0; }
    .o-grid--none\@mobile > .o-grid__item {
      padding: 0 0; } }

.o-list {
  list-style: none;
  padding: 0;
  margin: 0; }

.o-list--divider > .o-list__item:not(:first-child) {
  border-top: 1px solid #ECEEF3; }

.o-list--lg > .o-list__item:not(:first-child) {
  margin-top: 24px; }

.o-list--lg.o-list--divider > .o-list__item:not(:first-child) {
  padding-top: 24px; }

.o-list--md > .o-list__item:not(:first-child) {
  margin-top: 16px; }

.o-list--md.o-list--divider > .o-list__item:not(:first-child) {
  padding-top: 16px; }

.o-list--sm > .o-list__item:not(:first-child) {
  margin-top: 12px; }

.o-list--sm.o-list--divider > .o-list__item:not(:first-child) {
  padding-top: 12px; }

.o-list--xs > .o-list__item:not(:first-child) {
  margin-top: 8px; }

.o-list--xs.o-list--divider > .o-list__item:not(:first-child) {
  padding-top: 8px; }

.o-menu {
  align-items: center;
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0; }

.o-menu__item {
  position: relative; }

.o-menu__link {
  display: block;
  outline: none !important;
  text-decoration: none !important;
  padding: 8px 16px;
  line-height: 24px; }
  .o-menu__link.is--active {
    color: #576A7F; }
  .o-menu__link.is--disabled {
    color: #8A9BAD; }

.o-menu--center {
  justify-content: center; }

.o-menu--right {
  justify-content: flex-end; }

.o-menu--space-around {
  justify-content: space-around; }

.o-menu--space-between {
  justify-content: space-between; }

@media only screen and (max-width: 1080px) {
  .o-menu--responsive\@mobile-tablet {
    display: block; } }

@media only screen and (max-width: 767px) {
  .o-menu--responsive\@mobile {
    display: block; } }

/*# sourceMappingURL=objects.css.map */