/*  BIG SMALL */

@media only screen and (max-width: 681px) {
  .big {
    display: none
  }
  .small {
    display: block;
  }
  .header {
    margin-top: 5px;
  }
  .toolTile {
    padding: 5px;
  }
}

@media only screen and (min-width: 681px) {
  .big {
    display: block
  }
  .small {
    display: none;
  }
  h1 span {
    font-size: 1.5em;
  }
  .header {
    margin-top: 10px;
  }
  .footer {
    margin-top: 10px;
  }
  .toolTile {
    padding: 10px;
  }
}

@media only screen and (max-width: 540px) {
  .tools {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}

@media only screen and (min-width: 541px) {
  .tools {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media only screen and (min-width: 681px) {
  .tools {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media only screen and (min-width: 821px) {
  .tools {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

html {
  font-size: 16px;
}

body {
  font-family: "Varela", 'arial', sans-serif;
  font-size: 0.90em;
  line-height: 1.2em;
  background-color: #eee;
  color: #404040;
  margin: 0px auto;
  max-width: 960px;
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  background: #eee url('/_public/images/back.png') no-repeat fixed center;
  background-size: cover;
  /*height: 100vh;*/
}

.notSeen {
  display: none;
}

.endpoint {
  font-family: 'arial', sans-serif;
  font-size: 2em;
}

/* HEADER */

.headerText {
  padding-top: 1em;
}

h1 {
  font-family: 'Titillium Web', 'arial', sans-serif;
  font-weight: bold;
  margin: 0px;
  padding: 0px;
  text-align: center;
  color: #b42c5f
}

h1 span {
  vertical-align: middle;
}

/* TOOLS */

.tools {
  -moz-column-gap: 25px;
  -webkit-column-gap: 25px;
  column-gap: 25px;
  padding: 10px;
}

.tool {
  display: inline-block;
  border-radius: 5px;
  margin: 0.6em 0px;
  width: 100%;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  /*text-align: justify;*/
}

.tool.service {
  background-color: #cce5ff;
  border: 3px solid #cce5ff;
  background: rgba(204, 229, 255, 0.6);
}

.tool.thirdParty {
  background-color: #b6dab6;
  border: 3px solid #b6dab6;
  background: rgba(182, 218, 182, 0.6);
}

.tool:hover {
  border: 3px solid orange;
  transform: scale(1.02);
}

.tool.soon:hover {
  border: 3px solid #cce5ff;
  transform: scale(1);
}

.tool a p {
  margin: 0.5em;
}

.toolTile .title {
  font-weight: bold;
  color: #b42c5f;
  /*color: #2cb481;*/
}

.party3 {
  color: #5C5BAF;
}

.party2 {
  color: #e9552c;
}

.party4 {
  color: #008E61;
}

.justifyRight {
  text-align: right;
  padding-right: 10%;
}

/*   GENERICs */

a {
  color: #375EAB;
  text-decoration: none;
}

.tool a {
  text-decoration: none;
}

.tool a, .tool a:visited {
  color: inherit;
}

.verticalImage {
  vertical-align: middle;
}

.centerText {
  text-align: center;
}

/* HR */

hr {
  margin: 5px 10% 5px 10%;
  border: 0;
  height: 1px;
  background: #333;
  background-image: linear-gradient(to right, #ccc, #888, #ccc);
}

/* DEPRECATED */

.deprecated {
  border: 1px solid #ff6565;
  background-color: #ff6565;
  text-align: center;
}

/* Generated by http://css.spritegen.com CSS Sprite Generator */

.ct64r, .ct48r, .alexa32, .ct32r, .gif32, .headers32, .ip32, .jolav32, .loc32, .notes32, .proxy32, .stars32, .weather32, .check {
  display: inline-block;
  background: url('/_public/images/sprite.png') no-repeat;
  overflow: hidden;
  text-indent: -9999px;
  text-align: left;
}

.ct64r {
  background-position: -0px -0px;
  width: 64px;
  height: 64px;
}

.ct48r {
  background-position: -0px -64px;
  width: 48px;
  height: 48px;
}

.alexa32 {
  background-position: -0px -112px;
  width: 32px;
  height: 32px;
}

.ct32r {
  background-position: -32px -112px;
  width: 32px;
  height: 32px;
}

.gif32 {
  background-position: -0px -144px;
  width: 32px;
  height: 32px;
}

.headers32 {
  background-position: -32px -144px;
  width: 32px;
  height: 32px;
}

.ip32 {
  background-position: -0px -176px;
  width: 32px;
  height: 32px;
}

.jolav32 {
  background-position: -32px -176px;
  width: 32px;
  height: 32px;
}

.loc32 {
  background-position: -0px -208px;
  width: 32px;
  height: 32px;
}

.notes32 {
  background-position: -32px -208px;
  width: 32px;
  height: 32px;
}

.proxy32 {
  background-position: -0px -240px;
  width: 32px;
  height: 32px;
}

.stars32 {
  background-position: -32px -240px;
  width: 32px;
  height: 32px;
}

.weather32 {
  background-position: -0px -272px;
  width: 32px;
  height: 32px;
}

.check {
  background-position: -48px -64px;
  width: 16px;
  height: 16px;
}