/*
  COLORS:
    airconsole-green: #AADE00;
    neon-blue:        #00C5DE;
*/
body {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  padding-bottom: 4em;
  line-height: 26px;
  font-size: 16px;
}

#logo {
  position: relative;
  top: 5px;
  vertical-align: initial !important;
  margin-right: 8px;
  display: inline-block;
}

code {
  background-color: #EEEEEE;
  text: #333333;
}

h1 {
  margin: 0;
  padding: 0;
  display: inline-block;
  font-size: 20px;
}

h3, h4, h5 {
  font-weight: 700;
}

h3 {
  margin-top: 40px;
}

h4 {
  font-size: 20px;
  margin-top: 1.5em;
}

h5 {
  font-size: 18px;
  margin-top: 1.5em;
}

.title_no_margin {
  margin: 0.5em 0 0.5em 0 !important;
}

.ng-section-target:hover {
  cursor: pointer;
}

iframe {
  width: 100%;
  border: 0;
  overflow: hidden;
}

a.black{
  color: black;
}

.collapsible-container h5:target::before {
  content: ">";
  display: inline-block;
  transform: rotate(90deg);
}
.collapsible-container h5::before  {
  content: "> ";
}

.collapse-container h5 {
  cursor: pointer;
}

.collapse-container h5 .fa-link {
  display: none;
}

.collapse-container h5:hover .fa-link {
  display: inline-block;
}

.collapse-content {
  display: none;
  margin-bottom: 2em;
}

.collapse-content.show {
  display: block;
}

.subtitle {
  display: block;
  font-size: 14px;
}

.caption h3 {
  margin-top: 0;
}

.alert-black {
  color: #F6F6F6;
  background-color: #1f1f1f;
  border-color: #000000;
}

.row_margin {
  margin: 0 0 2em 0;
}

.complementary-bg {
    background-color: #2669a6;
}

.complementary-shade-border {
    border-color: #22435E;
}

.error-bg {
  background-color: #b4300d;
}

.error-shade-border {
  border-color: #802209;
}

.grey_bg {
  background-color: #f3f4f5;
}

.bright, a.bright, a.bright:visited {
  color: #FFFFFF;
  display: block;
}

a.bright:hover {
  text-decoration: none;
  color: #E5E5E5;
}

.app-button {
  border-bottom-style: solid;
  border-bottom-width: 3px;
  text-align: center;
  font-family: 'Play';
  box-sizing: border-box;
  padding: 20px 10px;
  cursor: pointer;
  font-size: 20px;
}

a:hover .app-button {
  text-decoration: none !important;
}

.list {
  list-style-type: none;
}

.list li {
  display: inline-block;
  margin: 0 0.5em;
}

.list-group-ordered {
  list-style: decimal inside;
}
.list-group-item-ordered {
  display: list-item;
}

/*
  BANNER
*/

.badge_banner {
  width: 100%;
  text-align: center;
  padding: 15px;
  font-size: 16px;
  background: #FFEB3B;
  position: relative;
}

.badge_banner a, .badge_banner a:visited {
  color: #FF5722;
}

.badge_banner_close {
  position: absolute;
  right: 10px;
  top: 4px;
  font-size: 20px;
  cursor: pointer;
  color: #333333;
}

/*
  GETTING STARTED
*/

.unity_banner {
  background: #000000 url(/images/examples/unity/unity_logo.jpg) no-repeat center top;
  width: 100%;
  height: 210px;
  position: relative;
}

.getting_started_unity_alert {
  background: #000000 url(/images/examples/unity/unity_logo.jpg) no-repeat right center;
  background-size: auto 100%;
}

.unity_banner_label {
  position: absolute;
  bottom: 19px;
  width: 50%;
  left: 50%;
  margin-left: -25%;
  color: #FFFFFF;
  font-size: 19px;
  text-align: center;
}

h2 {
  color: #00C5DE;
}

.quick_start h4 {
  margin-top: 1.5em;
}

.quick_start .alert {
  margin: 1em 0;
}

.faq_container h4 {
  margin-top: 1.5em;
}

/*
  BOX
*/

.box_title {
  margin: 0 0 0.5em 0;
}

.box_icon {
  border-radius: 100%;
  width: 80px;
  height: 80px;
  display: block;
  margin: 0 auto 1em auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

.box {
  box-sizing: border-box;
  padding: 2em;
}

.box_banner {
  width: 100%;
  height: 150px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: 1em;
}

.box_banner_contain {
  background-size: contain;
}

.box_white {
  min-height: 330px;
  background-color: #FFFFFF;
  box-sizing: border-box;
  padding: 2em;
}

/*
  BOOTSTRAP OVERWRITING
*/
a {
  cursor: pointer;
}

.btn-success {
  background-color: #AADE00;
  border-color: none;
  border: 0;
}

/*#tap_nav_container {
  border-bottom: 10px solid #EEEEEE;
  margin-bottom: 30px;
}*/

#top_nav {
  /*background-color: #333333;*/
  font-family: 'Play';
  margin: 30px 0 15px 0;
  padding-bottom: 10px;
}

#top_nav a, #top_nav a:visited {
  color: #333;
}

#top_nav a:hover {
  background: #EEEEEE;
}

.navbar-default {
  background-color: #FFFFFF;
  border: 0;
}

.navbar-brand {
  float: left;
  height: auto;
  padding: 0;
  font-size: 18px;
  line-height: 20px;
}

.navbar-header {
  min-width: 180px;
}

.nav>li {
  text-transform: uppercase;
}

.nav>li>a:focus, .nav>li>a:hover {
  /* background-color: #000000;*/
}

a:focus, a:hover {
  color: #B1E505;
}

.nav_contest_link a, .nav_contest_link a:visited {
  background-color: #FFBC00;
  color: #FFFFFF !important;
  border-radius: 5px;
  margin-right: 5px;
}

.nav_call_link {
  background-color: #AADE00;
  color: #FFFFFF !important;
  border-radius: 5px;
  margin-right: 5px;
}
.nav_call_link a {
  color: #FFFFFF !important;
}

.nav_developers_link {
  border-bottom-style: solid;
  border-bottom-width: 3px;
}

.nav_developers_link a, .nav_developers_link a:visited {
  color: #FFFFFF !important;
}

.nav_developers_link a:hover, .nav_contest_link a:hover {
  color: #000000 !important;
}

.phone_container {
  width: 200px;
  height: 380px;
  border-radius: 10px;
  background-color: #CBCBCB;
  position: relative;
}

.phone_screen {
  position: absolute;
  border: 1px solid #111111;
  top: 7%;
  left: 50%;
  margin-left: -45%;
  width: 90%;
  height: 80%;
  background-repeat: no-repeat;
  background-size: cover;
}

.phone_button {
  position: absolute;
  bottom: 2%;
  width: 30px;
  height: 30px;
  left: 50%;
  margin-left: -15px;
  border-radius: 100%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e2e2e2+41,bcbcbc+100 */
  background: #ffffff; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #e2e2e2 41%, #bcbcbc 100%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(41%,#e2e2e2), color-stop(100%,#bcbcbc)); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#e2e2e2 41%,#bcbcbc 100%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover,  #ffffff 0%,#e2e2e2 41%,#bcbcbc 100%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover,  #ffffff 0%,#e2e2e2 41%,#bcbcbc 100%); /* IE10+ */
  background: radial-gradient(ellipse at center,  #ffffff 0%,#e2e2e2 41%,#bcbcbc 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bcbcbc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.screen_container {
  width: 500px;
  height: 280px;
  border-radius: 6px;
  background-color: #FFF;
  position: relative;
}

.screen_display {
  position: absolute;
  border: 1px solid #CCC;
  background: #328AA5;
  top: 2%;
  left: 50%;
  margin-left: -49%;
  width: 98%;
  height: 96%;
  background-repeat: no-repeat;
  background-size: cover;
}

.example_header {
  position: relative;
  margin-bottom: 100px;
}

.example_header .phone_container {
  position: absolute;
  right: 15%;
  bottom: -15%;
}

/*
  INTRO
*/

.iframe_cover {
  display: none;
  max-width: 100%;
}

.cover_video_container {
  cursor: pointer;
  /*min-width: 533px;
  min-height: 300px;*/
  position: relative;
}

.cover_video_play_button {
  pointer-events: none;
  color: #FFFFFF;
  font-size: 80px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  margin-top: -40px;
}

.intro_container {
  width: 100%;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  padding: 4em 0;
}

.container_green_bg {
  color: #FFFFFF;
  background-image: url('/images/landing/green-bg.png');
  background-size: cover;
  background-repeat: no-repeat;
}

.line_height_32 {
  line-height: 32px;
}

.intro_title {
  font-family: 'Play';
  margin: 0em 0 1.5em 0;
  font-size: 34px;
  color: #333333;
}

.intro_sub_title {
  line-height: 32px;
  font-size: 22px;
  color: #333333;
  margin-bottom: 1em;
}

.row_gap {
  height: 2em;
}

.container_green_bg .intro_title {
  color: #FFFFFF;
}

.intro_header {
  font-size: 22px;
}

.intro_tool_icon_container {
  margin: 1.5em 0;
}

.intro_tool_icon {
  width: 80px;
  height: 80px;
  display: inline-block;
  margin-right: 10px;
}

.intro_getting_started_button {
  margin-top: 1em;
  max-width: 320px;
}

/*
  INTRO SHOWCASE
*/

.showcase_stats_row {
  margin-top: 1.5em;
}

.showcase_footer_row {
  font-size: 20px;
  margin-top: 1.5em;
}

.showcase_icon {
  vertical-align: middle;
  display: inline-block;
  height: 60px;
  width: 60px;
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 100%;
  margin-right: 1em;
}

.showcase_video_subtitle {
  margin-top: 0.5em;
}

.quote {
  margin-top: 20px;
  line-height: 45px;
  font-size: 40px;
  font-style: italic;
}

/*
  COMPETITION
*/

.contest_main_banner {
  text-align: center;
  margin: 2em auto;
  width: 90%;
  padding: 4px;
  color: #FFFFFF;
  background: #FFBC00;
}

.contest_main_banner a, .contest_main_banner a:visited {
  color: #FFFFFF;
}

.comp_header {
  color: #000;
  margin-bottom: 40px;
  background: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/geometry.png");
  border-bottom: 10px solid #EEEEEE;
  padding: 8vh 0;
}

.comp_header_dark {
  color: #FFFFFF;
  background: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/congruent_outline.png")
}

.comp_header_green {
  color: #FFFFFF;
  background-image: url('/images/landing/green-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
}

.comp_title {
  text-align: center;
  font-size: 40px;
}

.comp_title_white {
  color: #FFF;
}

.comp_title_logo {
  margin-bottom: 1em;
}

.comp_teaser {
  text-align: center;
  font-size: 30px;
  line-height: 45px;
}

.comp_teaser_highlight {
  font-weight: bold;
}

.comp_fact_icon {
  display: block;
  font-size: 50px;
  color: #7D7D7D;
  margin-bottom: 10px;
}

.comp_facts_row {
  margin-bottom: 2em;
  padding-bottom: 2em;
}

.comp_facts_row_border {
  border-bottom: 5px solid #EAEAEA;
}

.comp_fact_point {
  margin: auto;
  width: 200px;
  height: 200px;
  padding: 35px 10px 0 10px;
  border: 10px solid #3ECDE4;
  border-radius: 100%;
}

.comp_fact_point_orange {
  border: 10px solid #E4C03E;
}

.comp_fact_point_red {
  border: 10px solid #E44D3E;
}

.row_resources {
  margin-top: 40px;
}

.comp_ad_container {
  box-sizing: border-box;
  padding: 30px 15px 30px 100px;
  background: #FFBC00;
  color: #FFFFFF;
  font-size: 24px;
  border-radius: 8px;
  position: relative;
}

.comp_ad_trophy {
  left: 20px;
  top: 10px;
  position: absolute;
  font-size: 65px;
}

.comp_list li {
  margin-bottom: 1em;
}

.code_comment {
  color: #777777;
}

.tech_list_item {
  text-align: center;
  margin-bottom: 20px;
}

.tech_list_img {
  display: inline-block;
  width: 120px;
  height: 120px;
  border: 1px solid #EEEEEE;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.tech_list_label {
  display: block;
}

/*
  Animated showcase stuff
*/

.loading_bar_title {
  margin: 0.5em 0;
  font-weight: 500;
}

.loading_bar_container {
  width: 100%;
  height: 60px;
  overflow: hidden;
}

.loading_bar_loader {
  transition-property: width;
  transition-delay: 0s;
  transition-duration: 0.8s;
  -webkit-transition-property: width;
  -webkit-transition-delay: 0s;
  -webkit-transition-duration: 0.8s;
  width: 0%;
  height: 100%;
}

.loading_bar_label {
  font-size: 10px;
}

.pie {
  border-radius: 100%;
  width: 160px;
  height: 160px;
  margin: auto;
  position: relative;
  top: 10px;
  background-repeat: no-repeat;
  background-size: contain;
}

.pie_label {
  text-align: center;
  position: absolute;
  top: 63%;
  left: 58%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  font-size: 34px;
  color: #FFFFFF;
}

/*
  Translations
*/

.language-dropdown {
  position: relative;
  display: inline-block;
  margin-bottom: 200px;
}

.language-dropdown .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: 300px;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.language-dropdown .dropdown-content div {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: flex;
  justify-content: space-between;
}

.language-dropdown .dropdown-content div:hover {
  background-color: #ddd;
}

.language-dropdown .dropdown-content span {
  display: block;
}

.language-dropdown .show {
  display: block;
}

#language-search-input {
  width: 300px;
  box-sizing: border-box;
  padding: 14px 20px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#language-search-input:focus-visible {
  outline: none;
}

/*
  Footer help box
*/

.have-questions-box {
  position: fixed;
  bottom: 1vw;
  right:  1vw;
  padding: 10px 10px;
}

.page-update-box {
  font-weight: bold;
  text-align: right;
  padding-bottom: 5px;
  padding-top: 5px;
  z-index: 100;
  margin-bottom: 10px;
}

/*
  MEDIE QUERIES
*/
@media (max-width: 760px) {
  #top_nav {
    margin: 10px 0 15px 0;
  }

  #logo {
    margin-left: 8px;
  }

  .showcase_icon {
    height: 30px;
    width: 30px;
  }

  .intro_getting_started_button {
    max-width: 100%;
  }
}

@media (max-width: 1100px) {
  .have-questions-box {
    display: none !important;
  }
}