/*------------------------------------------------------------------
Project:	Mist
Version:	1.1
Created: 		27/11/2013
Last change:	12/01/2014
-------------------------------------------------------------------*/

/* =====  Links ===== */

a.link{
  color: #087f68;
}

a.link:hover,
a.link:focus {
  text-decoration: underline;
  color: #087f68;
  transition: all 0.3s;
}

code {
  padding: 2px 4px;
  font-size: 90%;
  color: var(--color-nextflow-700);
  white-space: nowrap;
  background-color: #f9f2f4;
  border-radius: 4px;
}

li::marker {
  color: var(--color-gray-600);
  content: " ";
}

/*===== Titles =====*/

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: Degular, sans-serif;
  font-weight: 600;
}

/* ===== Buttons ===== */

.btn {
  border-radius: 3px;
}
.btn-xxl {
  padding: 14px 28px;
}

/* ====== Helper Classes ===== */

.logo:after {
  content: ".";
}
.text-muted {
  color: #95a5a6;
}
.text-silver {
  color: #ecf0f1;
}
.text-white {
  color: #fff;
}
hr.double-margin {
  margin-top: 60px;
  margin-bottom: 30px;
}
.heading {
  margin-top: 60px;
}
.lh {
  line-height: 24px;
  font-size: 16px;
}
.absolute {
  position: absolute;
  width: 100%;
  height: 100%;
}
.pull-right-xs {
  float: right;
}
@media (max-width: 767px) {
  .pull-right-xs {
    float: left;
  }
}
.text-right-xs {
  text-align: right;
}
@media (max-width: 767px) {
  .text-right-xs {
    text-align: left;
  }
}
.text-center-xs {
  text-align: left;
}
@media (max-width: 767px) {
  .text-center-xs {
    text-align: center;
  }
}
hr.inverse {
  border-color: #ddd;
}
.oswald {
  font-family: "Oswald", sans-serif;
}
h2.oswald {
  line-height: 1.5em;
}

/* ===== Animations ===== */

@media (max-width: 767px) {
  .animated {
    -webkit-animation: none !important;
    -moz-animation: none !important;
  }
}
.delay1 {
  -webkit-animation-delay: 0.25s;
  -moz-animation-delay: 0.25s;
}
.delay2 {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
}
.delay3 {
  -webkit-animation-delay: 0.75s;
  -moz-animation-delay: 0.75s;
}
.delay4 {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
}
.delay5 {
  -webkit-animation-delay: 1.25s;
  -moz-animation-delay: 1.25s;
}
.delay6 {
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
}
.delay7 {
  -webkit-animation-delay: 1.75s;
  -moz-animation-delay: 1.75s;
}
.delay8 {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
}
.delay9 {
  -webkit-animation-delay: 2.25s;
  -moz-animation-delay: 2.25s;
}
.delay10 {
  -webkit-animation-delay: 2.5s;
  -moz-animation-delay: 2.5s;
}
.note {
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
}

/* ===== Scroll to Top ===== */

.backtotop {
  background: #7f8c8d;
  padding: 10px 15px;
  font-size: 18px;
  color: #fff;
  border-radius: 3px;
}
.backtotop:hover {
  background: #95a5a6;
}

/* ===== New ===== */

.new:after {
  content: "NEW!";
  font-size: 0.6em;
  color: #fff;
  background: #f1c40f;
  padding: 3px 4px;
  margin-left: 5px;
  vertical-align: super;
}

/* ====== Tags ===== */

.tags > a {
  padding: 3px 4px;
  margin: 4px 4px 4px 0;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  white-space: nowrap;
  display: inline-block;
}
.tags > a:before {
  font-family: FontAwesome;
  content: "\f02b";
  color: #fff;
  margin-right: 5px;
}

/* ===== Pagination ===== */

.body-green .pagination > .active > a,
.body-green .pagination > .active > span,
.body-green .pagination > .active > a:hover,
.body-green .pagination > .active > span:hover,
.body-green .pagination > .active > a:focus,
.body-green .pagination > .active > span:focus {
  background-color: #0dc09d;
  border-color: #0dc09d;
}
.body-blue .pagination > .active > a,
.body-blue .pagination > .active > span,
.body-blue .pagination > .active > a:hover,
.body-blue .pagination > .active > span:hover,
.body-blue .pagination > .active > a:focus,
.body-blue .pagination > .active > span:focus {
  background-color: #3498db;
  border-color: #3498db;
}
.body-red .pagination > .active > a,
.body-red .pagination > .active > span,
.body-red .pagination > .active > a:hover,
.body-red .pagination > .active > span:hover,
.body-red .pagination > .active > a:focus,
.body-red .pagination > .active > span:focus {
  background-color: #e74c3c;
  border-color: #e74c3c;
}
.body-amethyst .pagination > .active > a,
.body-amethyst .pagination > .active > span,
.body-amethyst .pagination > .active > a:hover,
.body-amethyst .pagination > .active > span:hover,
.body-amethyst .pagination > .active > a:focus,
.body-amethyst .pagination > .active > span:focus {
  background-color: #9b59b6;
  border-color: #9b59b6;
}

/* ===== Responsive Video =====*/

.flex-video {
  position: relative;
  padding-top: 25px;
  padding-bottom: 67.5%;
  height: 0;
  margin-bottom: 16px;
  overflow: hidden;
}

.flex-video.widescreen {
  padding-bottom: 57.25%;
}
.flex-video.vimeo {
  padding-top: 0;
}

.flex-video iframe,
.flex-video object,
.flex-video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media only screen and (max-device-width: 800px),
  only screen and (device-width: 1024px) and (device-height: 600px),
  only screen and (width: 1280px) and (orientation: landscape),
  only screen and (device-width: 800px),
  only screen and (max-width: 767px) {
  .flex-video {
    padding-top: 0;
  }
}