/* cyrillic-ext */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* This framework by default is mobile-first. It works by the basis of a twelve column grid */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

/* remove style for the ul and li elements */
ul,
li {
  list-style: none;
}

/* remove underline style for the a elements */
a {
  text-decoration: none;
}

/* Selector for a default container */
.container {
  padding: 16px;
}

/* Selector used to create new rows */
.row {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}

/* Selector used to create a column that takes a twelfth of the grid width */
.col-1 {
  flex-basis: calc(100% / 12);
}

/* Selector used to create a column that takes two twelfths of the grid width */
.col-2 {
  flex-basis: calc((100% / 12) * 2);
}

/* Selector used to create a column that takes three twelfths of the grid width */
.col-3 {
  flex-basis: calc((100% / 12) * 3);
}

/* Selector used to create a column that takes four twelfths of the grid width */
.col-4 {
  flex-basis: calc((100% / 12) * 4);
}

/* Selector used to create a column that takes five twelfths of the grid width */
.col-5 {
  flex-basis: calc((100% / 12) * 5);
}

/* Selector used to create a column that takes six twelfths of the grid width */
.col-6 {
  flex-basis: calc((100% / 12) * 6);
}

/* Selector used to create a column that takes seven twelfths of the grid width */
.col-7 {
  flex-basis: calc((100% / 12) * 7);
}

/* Selector used to create a column that takes eight twelfths of the grid width */
.col-8 {
  flex-basis: calc((100% / 12) * 8);
}

/* Selector used to create a column that takes nine twelfths of the grid width */
.col-9 {
  flex-basis: calc((100% / 12) * 9);
}

/* Selector used to create a column that takes ten twelfths of the grid width */
.col-10 {
  flex-basis: calc((100% / 12) * 10);
}

/* Selector used to create a column that takes eleven twelfths of the grid width */
.col-11 {
  flex-basis: calc((100% / 12) * 11);
}

/* Selector used to create a column that takes twelve twelfths of the grid width */
.col-12 {
  flex-basis: calc((100% / 12) * 12);
}

/* Selector used to create a column division */
.col-d {
  margin: 0;
  padding: 0;
}

/* Selector for display none */
.d-none {
  display: none;
}

/* Selector for display flex */
.d-flex {
  display: flex;
}

/* Selector for display block */
.d-block {
  display: block;
}

/* Selector for display inline-block */
.d-inline-block {
  display: inline-block;
}

/* Selector for display inline */
.d-inline {
  display: inline;
}

/* Selector for adding a width of 100% */
.w-100 {
  width: 100%;
}

/* Selector for using position relative */
.position-relative {
  position: relative;
}

/* Selector for using position absolute */
.position-absolute {
  position: absolute;
}

/* Selector for using position fixed */
.position-fixed {
  position: fixed;
}

/* These rules will apply starting at 720px for Laptops */
@media (min-width: 720px) {
  /* Selector used to create a column that takes a twelfth of the grid width */
  .col-md-1 {
    flex-basis: calc(100% / 12);
  }

  /* Selector used to create a column that takes two twelfths of the grid width */
  .col-md-2 {
    flex-basis: calc((100% / 12) * 2);
  }

  /* Selector used to create a column that takes three twelfths of the grid width */
  .col-md-3 {
    flex-basis: calc((100% / 12) * 3);
  }

  /* Selector used to create a column that takes four twelfths of the grid width */
  .col-md-4 {
    flex-basis: calc((100% / 12) * 4);
  }

  /* Selector used to create a column that takes five twelfths of the grid width */
  .col-md-5 {
    flex-basis: calc((100% / 12) * 5);
  }

  /* Selector used to create a column that takes six twelfths of the grid width */
  .col-md-6 {
    flex-basis: calc((100% / 12) * 6);
  }

  /* Selector used to create a column that takes seven twelfths of the grid width */
  .col-md-7 {
    flex-basis: calc((100% / 12) * 7);
  }

  /* Selector used to create a column that takes eight twelfths of the grid width */
  .col-md-8 {
    flex-basis: calc((100% / 12) * 8);
  }

  /* Selector used to create a column that takes nine twelfths of the grid width */
  .col-md-9 {
    flex-basis: calc((100% / 12) * 9);
  }

  /* Selector used to create a column that takes ten twelfths of the grid width */
  .col-md-10 {
    flex-basis: calc((100% / 12) * 10);
  }

  /* Selector used to create a column that takes eleven twelfths of the grid width */
  .col-md-11 {
    flex-basis: calc((100% / 12) * 11);
  }

  /* Selector used to create a column that takes twelve twelfths of the grid width */
  .col-md-12 {
    flex-basis: calc((100% / 12) * 12);
  }

  /* Selector for display none */
  .d-md-none {
    display: none;
  }

  /* Selector for display flex */
  .d-md-flex {
    display: flex;
  }

  /* Selector for display block */
  .d-md-block {
    display: block;
  }

  /* Selector for display inline-block */
  .d-md-inline-block {
    display: inline-block;
  }

  /* Selector for display inline */
  .d-md-inline {
    display: inline;
  }
}

/* These rules will apply starting at 1024px for Desktops */
@media (min-width: 1024px) {
  /* Selector used to create a column that takes a twelfth of the grid width */
  .col-lg-1 {
    flex-basis: calc(100% / 12);
  }

  /* Selector used to create a column that takes two twelfths of the grid width */
  .col-lg-2 {
    flex-basis: calc((100% / 12) * 2);
  }

  /* Selector used to create a column that takes three twelfths of the grid width */
  .col-lg-3 {
    flex-basis: calc((100% / 12) * 3);
  }

  /* Selector used to create a column that takes four twelfths of the grid width */
  .col-lg-4 {
    flex-basis: calc((100% / 12) * 4);
  }

  /* Selector used to create a column that takes five twelfths of the grid width */
  .col-lg-5 {
    flex-basis: calc((100% / 12) * 5);
  }

  /* Selector used to create a column that takes six twelfths of the grid width */
  .col-lg-6 {
    flex-basis: calc((100% / 12) * 6);
  }

  /* Selector used to create a column that takes seven twelfths of the grid width */
  .col-lg-7 {
    flex-basis: calc((100% / 12) * 7);
  }

  /* Selector used to create a column that takes eight twelfths of the grid width */
  .col-lg-8 {
    flex-basis: calc((100% / 12) * 8);
  }

  /* Selector used to create a column that takes nine twelfths of the grid width */
  .col-lg-9 {
    flex-basis: calc((100% / 12) * 9);
  }

  /* Selector used to create a column that takes ten twelfths of the grid width */
  .col-lg-10 {
    flex-basis: calc((100% / 12) * 10);
  }

  /* Selector used to create a column that takes eleven twelfths of the grid width */
  .col-lg-11 {
    flex-basis: calc((100% / 12) * 11);
  }

  /* Selector used to create a column that takes twelve twelfths of the grid width */
  .col-lg-12 {
    flex-basis: calc((100% / 12) * 12);
  }

  /* Selector for display none */
  .d-lg-none {
    display: none;
  }

  /* Selector for display flex */
  .d-lg-flex {
    display: flex;
  }

  /* Selector for display block */
  .d-lg-block {
    display: block;
  }

  /* Selector for display inline-block */
  .d-lg-inline-block {
    display: inline-block;
  }

  /* Selector for display inline */
  .d-lg-inline {
    display: inline;
  }
}