/*
 * Globals
 */

/* Links */
a,
a:focus,
a:hover {
	color: rgba(255,255,255,.75);
    text-decoration: none;
}

/*
 * Base structure
 */

html,
body {
	background-color: #212121;
	height: 100%;
}

body {
	display: -ms-flexbox;
	display: flex;
	color: #ccc;
}

h1, h2, h3, h4, h5, h6, strong {
	color: #fff;
}

.cover-container {
	max-width: 1440px;
}


/*
 * Header
 */
.masthead {
	margin-bottom: 2rem;
}

.navbar-nav {
	flex-direction: row;
	align-items: center;
}

.navbar a.navbar-brand img {
	max-width: 79px;
	max-height: 79px;
}

.navbar a.navbar-webstore img {
	width: 155px;
	height: 47px;
}

.navbar ul {
	margin-bottom: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding-left: 0;
}

.navbar li:not(:last-of-type) {
	display: inline-block;
	padding-right: 2.25rem;
}

.navbar .nav-link,
.mastfoot a {
	position: relative;
	padding: .25rem 0;
	font-weight: 300;
	background-color: transparent;
	border-bottom: .1rem solid transparent;
	transition: all .5s;
}

.navbar li a:after,
.mastfoot a:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background-color: #fff;
	-webkit-transition: all .3s;
	transition: all .3s;
}

.navbar li:not(:last-of-type) a:hover:after,
.mastfoot a:hover:after {
	width: 100%;
}

.navbar .nav-link + .nav-link {
	margin-left: 2.5rem;
}

.navbar li.active a:after {
	width: 100%;
}

@media (min-width: 48em) {
	.navbar-brand {
		float: left;
	}
}


/*
 * Content
 */
.cover {
	padding: 0 1.5rem;
}

.cover .btn-lg {
	background-color: #FFBF00;
	padding: .75rem 1.25rem;
	font-weight: 700;
	text-transform: uppercase;
	width: 330px;
}
.cover .btn i {
	margin-right: 0.5em;
}
.stars {
	list-style: none;
	padding-left: 0;
}

.stars li {
	margin: 15px auto;
}

.stars i {
	color: #FFBF00;
	font-size: 2em;
	margin-right: 15px;
	vertical-align: middle;
}

.main-heading {
	font-size: 47px;
	line-height: 47px;
}

.webstore img {
	width: 148px;
	height: 45px;
}

/*
 * Footer
 */
.mastfoot {
	color: rgba(255,255,255,.75);
}

 @font-face {
    font-display: block;
    font-style: normal;
    font-family: "fontawesome";
    font-weight: 900;
    src: url("../fonts/fa-solid-900.woff2") format("woff2"), url("../fonts/fa-solid-900.woff") format("woff")
  }

  .fas, .fa {
    font-family: "fontawesome";
    font-weight:900
  }

  @font-face {
    font-display: block;
    font-style: normal;
    font-family: "fontawesome";
    font-weight: 400;
    src: url("../fonts/fa-regular-400.woff2") format("woff2"), url("../fonts/fa-regular-400.woff") format("woff")
  }

  .far {
    font-family: "fontawesome";
    font-weight:400
  }

  @font-face {
    font-display: block;
    font-style: normal;
    font-family: "fontawesome";
    font-weight: 300;
    src: url("../fonts/fa-light-300.woff2") format("woff2"), url("../fonts/fa-light-300.woff") format("woff")
  }

  .fal {
    font-family: "fontawesome";
    font-weight:300
  }

  @font-face {
    font-display: block;
    font-style: normal;
    font-family: "Font Awesome 5 Duotone";
    font-weight: 900;
    src: url("../fonts/fa-duotone-900.woff2") format("woff2"), url("../fonts/fa-duotone-900.woff") format("woff")
  }

  .fad {
    font-family: "Font Awesome 5 Duotone";
    font-weight: 900;
    position:relative
  }

  @font-face {
    font-display: block;
    font-style: normal;
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
    src: url("../fonts/fa-brands-400.woff2") format("woff2"), url("../fonts/fa-brands-400.woff") format("woff")
  }

  .fab {
    font-family: "Font Awesome 5 Brands";
    font-weight:400
  }