/*CSSonly UI 1.0.3*/

:root {
  --main-color: #06c;
  --main-bg-color: #fff;
  --main-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --second-font: Georgia, serif;
  --main-headings-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --main-font-color: #333;
  --main-padding: .5rem;
  --main-margin: .5rem;
  --alert-color: #ae0000;
  --success-color: #2E8B57;
  --warning-color: #FFA500;
  --border-color: #eee;
  --border-radius: 5px;
  --bg-main: var(--main-color);
  --bg-alert: var(--alert-color);
  --bg-success: var(--success-color);
  --bg-warning: var(--warning-color)
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

body {
  font-family: var(--main-font);
  color: var(--main-font-color);
  font-size: 16px;
  line-height: 1.4;
  background-color: var(--main-bg-color)
}

/*Grid*/

.mr-grid {
  max-width: 1440px;
  margin-right: auto;
  margin-left: auto
}

.mr-grid>* {
  flex: 1 100%
}

.row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start
}

.row:last-of-type {
  margin-bottom: 0
}

[class*='col-'] {
  flex-basis: 100%;
  max-width: 100%;
  padding: var(--main-padding)
}

/*Colors*/

.main {
  color: var(--main-color)
}

.alert {
  color: var(--alert-color)
}

.success {
  color: var(--success-color)
}

.warning {
  color: var(--warning-color)
}

.bg-main {
  background-color: var(--bg-main) !important;
  color: #fff
}

.bg-alert {
  background-color: var(--bg-alert) !important;
  color: #fff
}

.bg-success {
  background-color: var(--bg-success) !important;
  color: #fff
}

.bg-warning {
  background-color: var(--bg-warning) !important;
  color: #fff
}

.gradient {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .5)), to(rgba(255, 255, 255, 0)));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
  background-image: linear-gradient(top, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
}

/*Typographie*/

p,.text,ul,ol,dl,.mr-accordion,.mr-form,.mr-form-group,.mr-form-box,.mr-table,blockquote,pre,button,.mr-button,.card,img,.mr-progress,input,textarea,select,.pagination {
  margin-bottom: calc(var(--main-margin)/2);
  margin-top: calc(var(--main-margin)/2)
}

h1,h2,h3,h4,h5,h6 {
  flex: 1 100%;
  font-family: var(--main-headings-font);
  color: var(--main-color);
  margin-top: calc(var(--main-margin)*2);
  margin-bottom: calc(var(--main-margin)*2)
}

h1 {
  font-size: 2rem
}

h2 {
  font-size: 1.8rem
}

h3 {
  font-size: 1.6rem
}

h4 {
  font-size: 1.4rem
}

h5 {
  font-size: 1.2rem
}

h6 {
  font-size: 1rem
}

a {
  color: var(--main-color);
  text-decoration: underline
}

a:hover {
  opacity: .5
}

.text-center {
  text-align: center
}

.text-left {
  text-align: left
}

.text-right {
  text-align: right
}

.text-justify {
  text-align: justify
}

.uppercase {
  text-transform: uppercase
}

.lowercase {
  text-transform: lowercase
}

.capitalize {
  text-transform: capitalize
}

.italic {
  font-style: italic
}

.bold {
  font-weight: 700
}

.underline {
  text-decoration: underline
}

.strike {
  text-decoration: line-through
}

.justify-center {
  justify-content: center
}

.justify-start {
  justify-content: flex-start
}

.justify-end {
  justify-content: flex-end
}

.small {
  font-size: .8rem
}


.text-1x {
  font-size: 1rem
}

.text-2x {
  font-size: 2rem
}

.text-3x {
  font-size: 3rem
}

.text-4x {
  font-size: 4rem
}

.text-5x {
  font-size: 5rem
}

blockquote {
  background: #fff;
  margin-left: var(--main-margin);
  margin-right: var(--main-margin);
  padding: var(--main-padding) var(--main-padding) var(--main-padding) calc(var(--main-padding)*5);
  position: relative;
  line-height: 1.2;
  color: #666;
  border-left: 15px solid var(--main-color);
  border-right: 5px solid var(--main-color);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  font-style: italic
}

blockquote::before {
  content: "\201C";
  font-family: var(--second-font);
  font-size: 4rem;
  font-weight: bold;
  color: #999;
  position: absolute;
  left: 10px;
  top: 5px;
}

blockquote::after {
  content: "";
}

code {
  background: var(--border-color);
  color: var(--alert-color)
}

/*Border*/

.border {
  border: 1px solid var(--border-color)
}

.border-top {
  border-top: 1px solid
}

.border-right {
  border-right: 1px solid
}

.border-bottom {
  border-bottom: 1px solid
}

.border-left {
  border-left: 1px solid
}

.border-rounded {
  border-radius: 10px
}

.border-main {
  border-color: var(--bg-main) !important
}

.border-alert {
  border-color: var(--bg-alert) !important
}

.border-success {
  border-color: var(--bg-success) !important
}

.border-warning {
  border-color: var(--bg-warning) !important
}

.border-0 {
	border: none
}

/*Margin*/

.ma {
  margin: var(--main-margin)
}

.ma-t {
  margin-top: var(--main-margin) !important
}

.ma-l {
  margin-left: var(--main-margin) !important
}

.ma-b {
  margin-bottom: var(--main-margin) !important
}

.ma-r {
  margin-right: var(--main-margin) !important
}

.ma-0 {
  margin: 0 !important
}

.ma-t-0 {
  margin-top: 0 !important
}

.ma-l-0 {
  margin-left: 0 !important
}

.ma-b-0 {
  margin-bottom: 0 !important
}

.ma-r-0 {
  margin-right: 0 !important
}

/*Padding*/

.pa {
  padding: var(--main-padding) !important
}

.pa-t {
  padding-top: var(--main-padding) !important
}

.pa-l {
  padding-left: var(--main-padding) !important
}

.pa-b {
  padding-bottom: var(--main-padding) !important
}

.pa-r {
  padding-right: var(--main-padding) !important
}

.pa-0 {
  padding: 0 !important
}

.pa-t-0 {
  padding-top: 0 !important
}

.pa-r-0 {
  padding-right: 0 !important
}

.pa-b-0 {
  padding-bottom: 0 !important
}

.pa-l-0 {
  padding-left: 0 !important
}

/* TABELLE*/

.mr-table {
  width: 100%;
  table-layout: fixed
}

thead {
  color: var(--main-color);
  text-align: left
}

th,
td {
  padding: var(--main-padding)
}

.mr-table.striped tr:nth-child(even) {
  background: var(--border-color);
}

.striped th {
  background: var(--main-color);
  Color: #fff
}

.mr-table-border {
  border-collapse: collapse
}

.mr-table-border td,
.mr-table-border th {
  border: 1px solid var(--border-color)
}

/*Buttons*/

.mr-button {
	display: inline-flex;
  font-size: 1rem;
  font-family: var(--main-font);
  background-color: var(--main-bg-color);
  padding: var(--main-padding);
  margin-left: calc(var(--main-margin)/2);
  margin-right: calc(var(--main-margin)/2);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  cursor: pointer
}

.mr-button:hover {
  opacity: .5
}

.button-s {
  font-size: .7rem !important
}

.button-l {
  font-size: 1.2rem !important
}

.mr-button a {
  color: #fff;
  text-decoration: none
}

/*Menu*/

.nav {
  background-color: var(--main-bg-color)
}

.nav-wrapper {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center
}

.nav ul {
  list-style: none;
  overflow: hidden
}

ul.detailmenu li a,
.multi {
  padding-left: calc(var(--main-padding)*2)
}

.nav li a {
  display: -webkit-flex;
  display: flex;
  padding: var(--main-padding);
  border-right: 1px solid var(--border-color);
  text-decoration: none
}

.nav li a:last-child {
  border-right: none
}

.nav li a:hover,
.nav .menu-btn:hover {
  background-color: var(--main-color);
  color: #fff;
  opacity: 1
}

.logo {
  font-size: 2rem;
  text-decoration: none
}

.nav ul.mainmenu {
  max-height: 0;
  transition: max-height .2s ease-out;
  margin: 0
}

.nav .menu-icon {
  cursor: pointer;
  margin-left: auto;
  padding: 2rem 1.25rem
}

.nav .menu-icon .navicon {
  background: var(--main-color);
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 1.125rem
}

.nav .menu-icon .navicon:before,
.nav .menu-icon .navicon:after {
  background: var(--main-color);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%
}

.nav .menu-icon .navicon:before {
  top: 6px
}

.nav .menu-icon .navicon:after {
  top: -6px
}

.nav .menu-btn {
  display: none
}

.nav .menu-btn:checked~ul.mainmenu {
  max-height: 31.25rem;
  overflow-y: auto
}

nav .menu-btn:checked~.nav-wrapper .menu-icon .navicon {
  background: transparent
}

nav .menu-btn:checked~.nav-wrapper .menu-icon .navicon:before {
  transform: rotate(-45deg)
}

nav .menu-btn:checked~.nav-wrapper .menu-icon .navicon:after {
  transform: rotate(45deg)
}

nav .menu-btn:checked~.nav-wrapper .menu-icon:not(.steps) .navicon:before,
nav .menu-btn:checked~.nav-wrapper .menu-icon:not(.steps) .navicon:after {
  top: 0
}

.menuactive {
  background-color: var(--main-color);
  color: #fff;
  border-right: none !important
}

.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%
}

/*Form*/

.mr-form {
  padding: var(--main-padding) 0
}

input,
textarea,
select {
  font-family: var(---main-font);
  font-size: 1rem;
  color: var(--main-font-color);
  background: #fff;
  padding: var(--main-padding);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius)
}

.mr-form-group {
  display: flex;
  align-items: center
}

input[type=text],
textarea,
select {
  width: 100%
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border: 2px solid var(--main-color)
}

input[type=radio],
input[type=checkbox] {
  margin-right: var(--main-margin)
}

input[type=submit] {
  background: var(--main-color);
  color: var(--main-bg-color)
}

input[type=reset] {
  background: var(--alert-color);
  color: var(--main-bg-color)
}

.mr-form-group>[class*="col-"] {
  padding-bottom: 0;
  padding-top: 0
}

.mr-select {
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, white 50%), linear-gradient(135deg, white 50%, transparent 50%), linear-gradient(to right, var(--main-color), var(--main-color));
  background-position: calc(100% - 20px) calc(1rem + 2px), calc(100% - 15px) calc(1rem + 2px), 100% 0;
  background-size: 5px 5px, 5px 5px, 2.5rem 2.5rem;
  background-repeat: no-repeat;
  padding-right: 3rem
}

.mr-select::-ms-expand {
  display: none;
}

.mr-inline textarea {
  vertical-align: middle
}

/*Pagination*/

.pagination {
  display: flex;
  flex-direction: row;
  justify-content: center
}

.pagination-right {
  justify-content: flex-end
}

.pagination-left {
  justify-content: flex-start
}

.pagination ul {
  list-style-type: none;
  text-align: center
}

.pagination ul li {
  display: inline-flex;
  padding: 8px 0
}

.pagination a {
  color: var(--main-font-color);
  padding: 8px 16px;
  text-decoration: none
}

.pagination a.active {
  background-color: var(--bg-main);
  color: var(--main-bg-color)
}

.pagination a:hover:not(.active) {
  background-color: #eee
}

.pagination-border a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px
}

.pagination-border a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px
}

.pagination-border a {
  border: 1px solid var(--border-color);
}

.pagination-border a.active {
  border: 1px solid var(--bg-main)
}

/*Media*/

.media,
img {
  max-width: 100%;
  height: auto
}

/*Card*/

.card {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius);
  overflow: hidden
}

.card-header {
  background: var(--main-color);
  color: var(--main-bg-color);
  padding: var(--main-padding)
}

.card-content {
  flex: 1;
  padding: var(--main-padding)
}

.card-footer {
  flex: 0;
  padding: var(--main-padding)
}

/*Breadcrumb*/

.mr-breadcrumb {
  display: inline-flex;
  font-size: 1rem;
  list-style: none
}

.mr-breadcrumb li {
  padding-right: .5rem
}

.mr-breadcrumb li:after {
  padding-left: .5rem;
  content: ' \003E'
}

.mr-breadcrumb li:last-child::after {
  content: ''
}

.mr-breadcrumb a {
  text-decoration: none
}

.mr-breadcrumb .active {
  background-color: initial
}

/*Accordion*/

.mr-accordion {
  
}

.accordion-tab {
  margin-bottom: 1px;
  overflow: hidden
}

.accordion-tab:last-child {
  margin-bottom: 0
}

.mr-accordion input {
  display: none
}

.mr-accordion label {
  display: flex;
  padding: var(--main-padding);
  background: var(--main-color);
  cursor: pointer;
  color: #fff
}

.accordion-content {
  display: -webkit-flex;
  display: flex;
  max-height: 0;
  overflow: hidden;
  background: #fff;
  -webkit-transition: max-height .35s;
  transition: max-height .35s;

}

.mr-accordion input:checked~.accordion-content {
  padding: var(--main-padding);
  max-height: 10rem
}

.mr-accordion .accordion-tab:last-of-type {
  border-bottom: 1px solid var(--border-color)
}

.mr-accordion label::after {
  margin: 0 0 0 auto;
  -webkit-transition: all .35s;
  transition: all .35s
}

.mr-accordion input[type=radio]+label::after {
  content: "\002B"
}

.mr-accordion input[type=radio]:checked+label::after {
  content: "\2212"
}

/*Tabs*/

.mr-tabs {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap
}

.mr-tab {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  background: #fff;
  -webkit-transition: max-height .35s;
  transition: max-height .35s;
}

.mr-tabs label {
  padding: var(--main-padding);
  cursor: pointer;
  cursor: pointer;
  background-color: var(--border-color);
  flex: 1
}

.mr-tabs input {
  display: none
}

.mr-tabs input[type=radio]:checked+label {
  background-color: var(--main-color);
  color: #fff
}

.mr-tabs input[type=radio]:checked+label+.mr-tab {
  display: flex;
  padding: var(--main-padding);
  max-height: 10rem;
  border-bottom: 1px solid var(--border-color);
}

/*Well*/

.mr-well {
  background: var(--border-color);
  padding: var(--main-padding)
}

/*Lists*/

.mr-list,
.mr-sublist {
  list-style-position: outside;
  padding-left: calc(var(--main-padding)*2)
}

/*Animation*/

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

/*Progress Bar*/

.mr-progress {
  text-align: center;
  background: var(--border-color)
}

.striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-size: .8rem .8rem;
}

@media only screen and (min-width: 36em) {

  /*Grid*/

  .row {
    margin-bottom: .5rem
  }

  [class*='col-'] {}

  [class*='col-']:first-child {
    margin-left: 0
  }

  [class*='col-']:last-child {
    margin-right: 0
  }

  .mr-grid {}

  .col-s-1 {
    flex-basis: 8.33%;
    max-width: 8.33%
  }

  .col-s-2 {
    flex-basis: 16.6%;
    max-width: 16.66%
  }

  .col-s-3 {
    flex-basis: 25%;
    max-width: 25%
  }

  .col-s-4 {
    flex-basis: 33.33%;
    max-width: 33.33%
  }

  .col-s-5 {
    flex-basis: 41.67%;
    max-width: 41.67%
  }

  .col-s-6 {
    flex-basis: 50%;
    max-width: 50%
  }

  .col-s-7 {
    flex-basis: 58.33%;
    max-width: 58.33%
  }

  .col-s-8 {
    flex-basis: 66.67%;
    max-width: 66.67%
  }

  .col-s-9 {
    flex-basis: 75%;
    max-width: 75%
  }

  .col-s-10 {
    flex-basis: 83.33%;
    max-width: 83.33%
  }

  .col-s-11 {
    flex-basis: 91.67%;
    max-width: 91.67%
  }

  .col-s-12 {
    flex-basis: 100%;
    max-width: 100%
  }

  /*Typographie*/

  h1 {
    font-size: 2.25rem
  }

  h2 {
    font-size: 2rem
  }

  h3 {
    font-size: 1.75rem
  }

  h4 {
    font-size: 1.5rem
  }

  h5 {
    font-size: 1.25rem
  }

  h6 {
    font-size: 1rem
  }

}

@media only screen and (min-width: 48em) {

  /*Grid*/

  .col-m-1 {
    flex-basis: 8.33%;
    max-width: 8.33%
  }

  .col-m-2 {
    flex-basis: 16.6%;
    max-width: 16.66%
  }

  .col-m-3 {
    flex-basis: 25%;
    max-width: 25%
  }

  .col-m-4 {
    flex-basis: 33.33%;
    max-width: 33.33%
  }

  .col-m-5 {
    flex-basis: 41.67%;
    max-width: 41.67%
  }

  .col-m-6 {
    flex-basis: 50%;
    max-width: 50%
  }

  .col-m-7 {
    flex-basis: 58.33%;
    max-width: 58.33%
  }

  .col-m-8 {
    flex-basis: 66.67%;
    max-width: 66.67%
  }

  .col-m-9 {
    flex-basis: 75%;
    max-width: 75%
  }

  .col-m-10 {
    flex-basis: 83.33%;
    max-width: 83.33%
  }

  .col-m-11 {
    flex-basis: 91.67%;
    max-width: 91.67%
  }

  .col-m-12 {
    flex-basis: 100%;
    max-width: 100%
  }

  /*MENU*/

  .nav {
    display: -webkit-flex;
    display: flex
  }

  .nav-wrapper {
    flex: initial
  }

  .nav li {
    position: relative;
    border-right: 1px solid var(--main-color)
  }

  .nav li a {
    padding: var(--main-padding) calc(var(--main-padding)*2);
    font-size: 1.2rem;
    white-space: nowrap;
    border-right: none
  }

  ul.mainmenu li>a:after {
    margin-left: 5px;
    content: '\25B8'
  }

  ul.mainmenu>li>a:after {
    margin-left: 5px;
    content: '\25BE'
  }

  ul.mainmenu li>a:only-child:after {
    margin-left: 0;
    content: ''
  }

  .nav li:last-of-type {
    border-right: none
  }

  .nav ul.mainmenu {
    display: -webkit-flex;
    display: flex;
    -webkit-flex: 1 0 0;
    flex: 1 0 0;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    align-self: center;
    max-height: none;
    overflow: inherit;
    max-height: none;
    overflow: inherit;
    z-index: 999
  }

  ul.detailmenu {
    background-color: var(--main-bg-color);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    margin: 0;
    max-height: 0;
    transition: max-height .2s ease-out;
    position: absolute;
    min-width: 100%
  }

  ul.detailmenu a {
    color: var(--main-color)
  }

  ul.detailmenu a:hover {
    color: var(--main-bg-color)
  }

  .nav ul.mainmenu li:hover>ul {
    max-height: 31.25rem;
    overflow: visible
  }

  ul.detailmenu .multi {
    left: 100%;
    top: 0;
    padding-left: 0
  }

  ul.detailmenu li {
    border-right: none
  }

  ul.detailmenu li a {
    padding: var(--main-padding) calc(var(--main-padding)*2);
    border-right: none
  }

  .nav .menu-icon {
    display: none
  }

  /*vertical*/

  .nav-vertical {
    -webkit-flex-direction: column;
    flex-direction: column
  }

  .nav-vertical ul.mainmenu {
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: flex-start;
    justify-content: flex-start
  }

  .nav-vertical ul.mainmenu li {
    border-right: none
  }

  .nav-vertical ul.mainmenu ul.detailmenu {
    position: inherit;
    max-height: 100%;
    transition: none;
    box-shadow: none
  }

  .nav-vertical ul.mainmenu .multi {
    left: inherit;
    top: inherit
  }

  .nav-vertical ul.mainmenu ul.detailmenu li a,
  .nav-vertical ul.mainmenu ul.detailmenu .multi {
    padding-left: 3rem
  }

  /*Form*/

  .mr-inline input[type=text],
  .mr-inline textarea,
  .mr-inline select {
    width: initial
  }

  /*Tabs*/

  .mr-tabs {
    flex-direction: row
  }

  .mr-tabs label {
    border-right: 1px solid var(--main-bg-color);
    order: 1;
  }

  .mr-tab {
    transition: none;
    order: 2
  }

  /*Blockquote*/

  blockquote {
    margin-left: 3.125rem;
    margin-right: 3.125rem;
    padding: 2rem 2rem 2rem 3rem;
    text-align: justify
  }

}

@media only screen and (min-width: 62rem) {
  .col-l-1 {
    flex-basis: 8.33%;
    max-width: 8.33%
  }

  .col-l-2 {
    flex-basis: 16.66%;
    max-width: 16.66%
  }

  .col-l-3 {
    flex-basis: 25%;
    max-width: 25%
  }

  .col-l-4 {
    flex-basis: 33.33%;
    max-width: 33.33%
  }

  .col-l-5 {
    flex-basis: 41.67%;
    max-width: 41.67%
  }

  .col-l-6 {
    flex-basis: 50%;
    max-width: 50%
  }

  .col-l-7 {
    flex-basis: 58.33%;
    max-width: 58.33%
  }

  .col-l-8 {
    flex-basis: 66.67%;
    max-width: 66.67%
  }

  .col-l-9 {
    flex-basis: 75%;
    max-width: 75%
  }

  .col-l-10 {
    flex-basis: 83.33%;
    max-width: 83.33%
  }

  .col-l-11 {
    flex-basis: 91.67%;
    max-width: 91.67%
  }

  .col-l-12 {
    flex-basis: 100%;
    max-width: 100%
  }

}

@media only screen and (min-width: 75rem) {
  .col-xl-1 {
    flex-basis: 8.33%;
    max-width: 8.33%
  }

  .col-xl-2 {
    flex-basis: 16.66%;
    max-width: 16.66%
  }

  .col-xl-3 {
    flex-basis: 25%;
    max-width: 25%
  }

  .col-xl-4 {
    flex-basis: 33.33%;
    max-width: 33.33%
  }

  .col-xl-5 {
    flex-basis: 41.67%;
    max-width: 41.67%
  }

  .col-xl-6 {
    flex-basis: 50%;
    max-width: 50%
  }

  .col-xl-7 {
    flex-basis: 58.33%;
    max-width: 58.33%
  }

  .col-xl-8 {
    flex-basis: 66.67%;
    max-width: 66.67%
  }

  .col-xl-9 {
    flex-basis: 75%;
    max-width: 75%
  }

  .col-xl-10 {
    flex-basis: 83.33%;
    max-width: 83.33%
  }

  .col-xl-11 {
    flex-basis: 91.67%;
    max-width: 91.67%
  }

  .col-xl-12 {
    flex-basis: 100%;
    max-width: 100%
  }
}