.scenemator {
  /*font-family: 'Caveat';*/
}




.e, .e a {
  color: rgb(107, 174, 214);
}

.e a:hover, a.e:hover {
  color: rgb(107, 174, 214);
  text-decoration: underline
}

.m, .m a {
  color: rgb(253, 141, 60);
}

.m a:hover, a.m:hover {
  color: rgb(253, 141, 60);
  text-decoration: underline
}


.a, .a a {
  color: rgb(116, 196, 118);
}

.a a:hover, a.a:hover {
  color: rgb(116, 196, 118);
  text-decoration: underline
}


.t, .t a {
  color: rgb(158, 154, 200);
}

.t a:hover, a.t:hover {
  color: rgb(158, 154, 200);
  text-decoration: underline
}


.o, .o a {
  color: rgb(150, 150, 150);
}

.o a:hover, a.o:hover {
  color: rgb(150, 150, 150);
  text-decoration: underline
}


.r, .r a {
  color: rgb(107, 174, 214);
}

.r a:hover, a.r:hover {
  color: rgb(107, 174, 214);
  text-decoration: underline
}


.c-blue-1 {
  color: #3182bd;
}

.c-red-1 {
  color: #e6550d;
}

.c-green-1 {
  color: #31a354;
}

.c-purple-1 {
  color: #756bb1;
}

.c-gray-1 {
  color: #636363;
}

.c-blue-2 {
  color: #6baed6;
}

.c-red-2 {
  color: #fd8d3c;
}

.c-green-2 {
  color: #74c476;
}

.c-purple-2 {
  color: #9e9ac8;
}

.c-gray-2 {
  color: #969696;
}

.c-blue-3 {
  color: #9ecae1;
}

.c-red-3 {
  color: #fdae6b;
}

.c-green-3 {
  color: #a1d99b;
}

.c-purple-3 {
  color: #bcbddc;
}

.c-gray-2 {
  color: #bdbdbd;
}

.c-blue-4 {
  color: #c6dbef;
}

.c-red-4 {
  color: #fdd0a2;
}

.c-green-4 {
  color: #c7e9c0;
}

.c-purple-4 {
  color: #dadaeb;
}

.c-gray-4 {
  color: #d9d9d9;
}


.e-background {
  background-color: rgb(107, 174, 214);
}

.m-background {
  background-color: rgb(253, 141, 60);
}

.a-background {
  background-color: rgb(116, 196, 118);
}

.t-background {
  background-color: rgb(158, 154, 200);
}

.o-background {
  background-color: rgb(150, 150, 150);
}

.r-background {
  background-color: rgb(107, 174, 214);
}

/*
 * Custom translucent site header
 */

.site-header {
  background-color: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgb(217, 217, 217);

}

.site-header a {
  color: rgb(150, 150, 150);
  transition: ease-in-out color .15s;
}

.site-header a:hover {
  color: rgb(107, 174, 214);
  text-decoration: underline;
}

.site-logo {
  height: 30px;
  /*padding-bottom: 15px;*/

}

site-header-item {
  margin-top: 5px
}


.splash-section {
  background-image: url('../images/splash.svg');
  background-color: rgba(255, 255, 255, 0.81) !important;
  background-blend-mode: color;

}

.section-howto {
  /*background-color: rgb(253, 141, 60);*/
  background-image: linear-gradient(to bottom, rgb(253, 141, 60), rgb(253, 174, 107) 42%, #fff 75%);
}

.section-learn {
  /*background-color: rgb(49, 163, 84);*/
  background-image: linear-gradient(to bottom, rgb(49, 163, 84) 0%, rgb(161, 217, 155) 42%, #fff 75%);
}

.section-feature {
  /*background-color: rgb(117, 107, 177);*/
  background-image: linear-gradient(to bottom, rgb(117, 107, 177) 0%, rgb(218, 218, 235) 25%, #fff 65%);
}

.section-masterscene {
  /*background-color: rgb(117, 107, 177);*/
  background-image: linear-gradient(to bottom, rgb(117, 107, 177) 0%, rgb(218, 218, 235) 42%, #fff 75%);
}

/*.section-masterscene {*/
/*background-color: rgb(117, 107, 177);*/
/*background-image: linear-gradient(to bottom, rgb(99, 99, 99) 0%, rgb(99, 99, 99) 42%, #fff 75%);*/
/*}*/

.section-pricing {
  /*background-color: rgb(117, 107, 177);*/
  background-image: linear-gradient(to bottom, rgb(99, 99, 99) 0%, rgb(99, 99, 99) 42%, #fff 75%);
}

/*
 * Dummy devices (replace them with your own or something else entirely!)
 */

.product-device {
  position: absolute;
  right: 10%;
  bottom: -30%;
  width: 300px;
  height: 540px;
  /*background-color: #333;*/
  border-radius: 21px;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  background-image: url('../images/splash.svg')

}

.product-device::before {
  position: absolute;
  top: 10%;
  right: 10px;
  bottom: 10%;
  left: 10px;
  content: "";
  background-color: rgba(255, 255, 255, .1);
  border-radius: 5px;
}

.product-device-2 {
  top: -25%;
  right: auto;
  bottom: 0;
  left: 5%;
  background-color: #e5e5e5;
}

.btn-outline-blue {
  color: rgb(107, 174, 214);
  background-color: transparent;
  background-image: none;
  border-color: rgb(107, 174, 214);
}

.btn-outline-purple {
  color: rgb(117, 107, 177);
  background-color: transparent;
  background-image: none;
  border-color: rgb(117, 107, 177);
}

.btn-outline-orange {
  color: rgb(253, 141, 60);
  background-color: transparent;
  background-image: none;
  border-color: rgb(253, 141, 60);
}


.content-menu-item {
  width: 170px;
  height: 100px;
  margin-bottom: 60px;
}

.content-menu-item {
  font-size: 50px;
  /*color: rgb(150, 150, 150)*/
}

.content-menu-item-title {
  font-size: 20px;
  color: rgb(150, 150, 150);
  font-variant: small-caps;
  font-weight: bold;
  padding-bottom: 10px;

}

.content-menu-item-title a {
  /*color: rgb(107, 174, 214)*/
}

.content-menu-item-title a {
  /*color: rgb(107, 174, 214)*/
}

.content-menu-item-card {
  border: none;
}

.feature-menu-item {
  width: 170px;
  height: 800px;
  margin-bottom: 60px;
}

.feature-menu-item {
  font-size: 40px;
  /*color: rgb(150, 150, 150)*/
}

.feature-title {
  font-size: 20px;
  color: rgb(0, 0, 0);
  /*font-variant: small-caps;*/
  font-weight: bold;
  padding-bottom: 10px;

}

.feature-body {
  padding-bottom: 40px;
  padding-top: 40px;

}

.feature-question {
  text-decoration: underline;
  font-weight: bold;
}

.howto-title {
  color: rgb(255, 255, 255);

}

.howto-card {
  border: none;
  background: transparent;
  margin-right: 0;
  margin-left: 0;
}

.howto-menu-item-title {
  font-size: 20px;
  color: rgb(150, 150, 150);
  font-variant: small-caps;
  font-weight: bold;
  padding-bottom: 10px;

}

.step-image {

  background: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0 10px 16px rgba(0, 0, 0, 0.3);
  /*margin: 40px auto 100px;*/

}

.step-detail {
  color: #737373;
  font-size: 1em;
  line-height: 1.75em;
}

/*
 * Extra utilities
 */

.border-top {
  border-top: 1px solid #e5e5e5;
}

.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

.flex-equal > * {
  -ms-flex: 1;
  flex: 1;
}

@media (min-width: 768px) {
  .flex-md-equal > * {
    -ms-flex: 1;
    flex: 1;
  }
}

/*trail*/
li.trail-e:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f018';
  margin: 0 5px 0 -15px;
  color: rgb(107, 174, 214);
}

li.trail-m:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;

  content: '\f018';
  margin: 0 5px 0 -15px;
  color: rgb(253, 141, 60);
}

li.trail-a:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f018';
  margin: 0 5px 0 -15px;
  color: rgb(116, 196, 118);
}

li.trail-t:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f018';
  margin: 0 5px 0 -15px;
  color: rgb(158, 154, 200);
}

li.trail-o:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f018';
  margin: 0 5px 0 -15px;
  color: rgb(150, 150, 150);
}

li.trail-r:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: '\f018';
  margin: 0 5px 0 -15px;
  color: rgb(107, 174, 214);
}

/*catalog*/
li.catalog-e:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: '\f02e';
  margin: 0 5px 0 -15px;
  color: rgb(107, 174, 214);
}

li.catalog-m:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: '\f02e';
  margin: 0 5px 0 -15px;
  color: rgb(253, 141, 60);
}

li.catalog-a:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: '\f02e';
  margin: 0 5px 0 -15px;
  color: rgb(116, 196, 118);
}

li.catalog-t:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;

  content: '\f02e';
  margin: 0 5px 0 -15px;
  color: rgb(158, 154, 200);
}

li.catalog-o:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;

  content: '\f02e';
  margin: 0 5px 0 -15px;
  color: rgb(150, 150, 150);
}

li.catalog-r:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;

  content: '\f02e';
  margin: 0 5px 0 -15px;
  color: rgb(107, 174, 214);
}


/*making-of*/
li.making-of-e:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;

  content: '\f0d0';
  margin: 0 5px 0 -15px;
  color: rgb(107, 174, 214);
}

li.making-of-m:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;

  content: '\f0d0';
  margin: 0 5px 0 -15px;
  color: rgb(253, 141, 60);
}

li.making-of-a:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;

  content: '\f0d0';
  margin: 0 5px 0 -15px;
  color: rgb(116, 196, 118);
}

li.making-of-t:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;

  content: '\f0d0';
  margin: 0 5px 0 -15px;
  color: rgb(158, 154, 200);
}

li.making-of-o:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;

  content: '\f0d0';
  margin: 0 5px 0 -15px;
  color: rgb(150, 150, 150);
}

li.making-of-r:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;

  content: '\f0d0';
  margin: 0 5px 0 -15px;
  color: rgb(107, 174, 214);
}


/*masterscene-of*/
li.masterscene-e:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;

  content: '\f0a3';
  margin: 0 5px 0 -15px;
  color: rgb(107, 174, 214);
}

li.masterscene-m:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;

  content: '\f0a3';
  margin: 0 5px 0 -15px;
  color: rgb(253, 141, 60);
}

li.masterscene-a:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;

  content: '\f0a3';
  margin: 0 5px 0 -15px;
  color: rgb(116, 196, 118);
}

li.masterscene-t:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;

  content: '\f0a3';
  margin: 0 5px 0 -15px;
  color: rgb(158, 154, 200);
}

li.masterscene-o:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;

  content: '\f0a3';
  margin: 0 5px 0 -15px;
  color: rgb(150, 150, 150);
}

li.masterscene-r:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;

  content: '\f0a3';
  margin: 0 5px 0 -15px;
  color: rgb(107, 174, 214);
}


/*About */
li.about-e:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;

  content: '\f0a4';
  margin: 0 5px 0 -15px;
  color: rgb(107, 174, 214);
}

li.about-m:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;

  content: '\f0a4';
  margin: 0 5px 0 -15px;
  color: rgb(253, 141, 60);
}

li.about-a:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;

  content: '\f0a4';
  margin: 0 5px 0 -15px;
  color: rgb(116, 196, 118);
}

li.about-t:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;

  content: '\f0a4';
  margin: 0 5px 0 -15px;
  color: rgb(158, 154, 200);
}

li.about-o:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;

  content: '\f0a4';
  margin: 0 5px 0 -15px;
  color: rgb(150, 150, 150);
}

li.about-r:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;

  content: '\f0a4';
  margin: 0 5px 0 -15px;
  color: rgb(107, 174, 214);
}


.overflow-hidden {
  overflow: hidden;
}

.footer-logo {
  height: 16px;
}


.text-rheme {
  color: rgb(150, 150, 150);
}


.scene-card {
  display: block;
  width: 340px;
  height: 230px;
  border: none;
}