.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.center-div { left: 50%; }
.justify { text-align: justify; }
.opacity-0 { opacity: 0; }
.opacity-1 { opacity: 1; }

.container { width: 90%; margin-left: auto; margin-right: auto; }
.row { position: relative; width: 100%; }
.row [class^="col"] { float: left; margin: 0.5rem 2%; min-height: 0.125rem; }

/* GRID */
.col-1 { width: 4.33%; } .col-2 { width: 12.66%; } .col-3 { width: 21%; }
.col-4 { width: 29.33%; } .col-5 { width: 37.66%; } .col-6 { width: 46%; }
.col-7 { width: 54.33%; } .col-8 { width: 62.66%; } .col-9 { width: 71%; }
.col-10 { width: 79.33%; } .col-11 { width: 87.66%; } .col-12 { width: 96%; }
.col-2-10 { width: 16%; }

.row::after { content: ""; display: table; clear: both; }

.hidden { display: none; }

img.image { max-width: 96%; }

@media only screen and (max-width: 33.75em) {
  .center-xs-d { text-align: center; margin-left: auto; margin-right: auto; }
}
@media only screen and (min-width: 33.75em) {  /* 540px */
  .container { width: 88%; }

  /* xs GRID */
  .right-xs { text-align: right; }
  .col-1-xs { width: 4.33%; } .col-2-xs { width: 12.66%; } .col-3-xs { width: 21%; }
  .col-4-xs { width: 29.33%; } .col-5-xs { width: 37.66%; } .col-6-xs { width: 46%; }
  .col-7-xs { width: 54.33%; } .col-8-xs { width: 62.66%; } .col-9-xs { width: 71%; }
  .col-10-xs { width: 79.33%; } .col-11-xs { width: 87.66%; } .col-12-xs { width: 96%; }
  .col-2-10-xs { width: 16%; }
}
@media only screen and (max-width: 45em) {
  .center-sm-d { text-align: center; margin-left: auto; margin-right: auto; }
}
@media only screen and (min-width: 45em) {  /* 720px */
  .show-sm { display: block; }
  .hidden-sm { display: none; }

  /* sm GRID */
  .right-sm { text-align: right; }
  .col-1-sm { width: 4.33%; } .col-2-sm { width: 12.66%; } .col-3-sm { width: 21%; }
  .col-4-sm { width: 29.33%; } .col-5-sm { width: 37.66%; } .col-6-sm { width: 46%; }
  .col-7-sm { width: 54.33%; } .col-8-sm { width: 62.66%; } .col-9-sm { width: 71%; }
  .col-10-sm { width: 79.33%; } .col-11-sm { width: 87.66%; } .col-12-sm { width: 96%; } 
  .col-2-10-sm { width: 16%; } 
}
@media only screen and (max-width: 65em) {
  .center-md-d { text-align: center; margin-left: auto; margin-right: auto; }
}
@media only screen and (min-width: 65em) { /* 960px */
  .container { width: 95%; max-width: 60rem; }

  .show-md { display: block; }
  .hidden-md { display: none; }

  /* md GRID */
  .right-md { text-align: right; }
  .col-1-md { width: 4.33%; } .col-2-md { width: 12.66%; } .col-3-md { width: 21%; }
  .col-4-md { width: 29.33%; } .col-5-md { width: 37.66%; } .col-6-md { width: 46%; }
  .col-7-md { width: 54.33%; } .col-8-md { width: 62.66%; } .col-9-md { width: 71%; }
  .col-10-md { width: 79.33%; } .col-11-md { width: 87.66%; } .col-12-md { width: 96%; }
  .col-2-10-md { width: 16%; }
}
@media only screen and (max-width: 77em) {
  .center-lg-d { text-align: center; margin-left: auto; margin-right: auto; }
}
@media only screen and (min-width: 77em) {
  .container { width: 95%; max-width: 70rem; }

  /* lg GRID */
  .right-lg { text-align: right; }
  .col-1-lg { width: 4.33%; } .col-2-lg { width: 12.66%; } .col-3-lg { width: 21%; }
  .col-4-lg { width: 29.33%; } .col-5-lg { width: 37.66%; } .col-6-lg { width: 46%; }
  .col-7-lg { width: 54.33%; } .col-8-lg { width: 62.66%; } .col-9-lg { width: 71%; }
  .col-10-lg { width: 79.33%; } .col-11-lg { width: 87.66%; } .col-12-lg { width: 96%; }
  .col-2-10-lg { width: 16%; }
}

@media only screen and (min-width: 87em) {
  .container { max-width: 83.334rem; }

  /* xl GRID */
  .right-xl { text-align: right; }
  .col-1-xl { width: 4.33%; } .col-2-xl { width: 12.66%; } .col-3-xl { width: 21%; }
  .col-4-xl { width: 29.33%; } .col-5-xl { width: 37.66%; } .col-6-xl { width: 46%; }
  .col-7-xl { width: 54.33%; } .col-8-xl { width: 62.66%; } .col-9-xl { width: 71%; }
  .col-10-xl { width: 79.33%; } .col-11-xl { width: 87.66%; } .col-12-xl { width: 96%; }
  .col-2-10-xl { width: 16%; }
}

.float-left { float: left !important; }
.float-right { float: right !important; }
.no-padding { padding: 0 !important; margin: 0 !important; }

/* ANIMATIONS */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in {
  animation-duration: 1s;
  animation-name: fade-in;
}

@keyframes slide-in-up {
  from { opacity: 0; transform: translateY(20%); }
  to { opacity: 1; transform: translateY(0%); }
}
.slide-in-up {
  animation-duration: 1s;
  animation-name: slide-in-up;
}

@keyframes slide-in-down-small {
  from { opacity: 0; transform: translateY(-10%); }
  to { opacity: 1; transform: translateY(0%); }
}
.slide-in-down-small {
  animation-duration: 0.2s;
  animation-name: slide-in-down-small;
}

@keyframes slide-out-up-small {
  from { opacity: 1; transform: translateY(0%); }
  to { opacity: 0; transform: translateY(-10%); }
}
.slide-out-up-small {
  animation-duration: 0.2s;
  animation-name: slide-out-up-small;
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(20%); }
  to { opacity: 1; transform: translateX(0%); }
}
.slide-in-left {
  animation-duration: 1s;
  animation-name: slide-in-left;
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(-20%); }
  to { opacity: 1; transform: translateX(0%); }
}
.slide-in-right {
  animation-duration: 1s;
  animation-name: slide-in-right;
}