@font-face {
  font-family: "Segoe UI";
  font-weight: 200;
  src: local("Segoe UI Light");
}
@font-face {
  font-family: "Segoe UI";
  font-weight: 300;
  src: local("Segoe UI Semilight");
}
@font-face {
  font-family: "Segoe UI";
  font-weight: 400;
  src: local("Segoe UI");
}
@font-face {
  font-family: "Segoe UI";
  font-weight: 700;
  src: local("Segoe UI Bold");
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  padding: 0;
  height: 100%;
background-image: url(/img/img0_mini.jpg);
background-position: center;
  font-family: "Segoe UI", sans-serif;

  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

main {
  width: 330px;
  box-shadow: 0 0 0 1px #c5c5c5;
  background-color: #fff;
    margin-bottom: 20px;
    margin-right: 180px;
}

main > p {
  position: relative;
  left: 6px;
  display: inline;
    color: #aaa;
  font-size: 0.8em;
  font-weight: 300;
}

section {
  margin: 0;
  background-color: #0078d6;
  color: #fff;
}

#intro {
  position: relative;
  top: 0.6em;
  left: 0.7em;
  display: inline;
}


#intro > p {
  font-size: 0.9em;
  display: inline;
  margin-left: 0.45em;
  vertical-align: text-top;
  line-height: 1em;
}

#recommends {
  display: inline-block;

  font-weight: 200;
  font-size: 1.1em;
  /*line-height: 0.55;*/
}

#recommends img {
  position: relative;
  top: 2.3em;
  left: 0.5em;
}

#recommends p {
  position: relative;
  left: 3.9em;
  bottom: 1.7em;
    
}

.triangle {
  float: right;
  position: absolute;
  display: inline-block;
    right: 205px;
}

.triangle#bg {
     bottom: 6px;
  
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0.91em 0.91em 0;
  border-color: transparent #c5c5c5 transparent transparent;
}

.triangle#fg {
  bottom: 8px;
  z-index: 1;

  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0.8em 0.8em 0;
  border-color: transparent #fff transparent transparent;
}

a {
  text-decoration: none;
color: #aaa;
}

p  span {
      color: #0078D7;
}
#toastBottom {

}