/* Free Tools page styles */

/* ======================================================================== */
/* global settings for all three slider contents */
.slider .headline {
  position: absolute;
  width: 100%;
  text-align: center;
}

.slider h1.headline {
  letter-spacing: -1px;
  top: 0.25em;
  font-weight: 100;
  font-size: 150%;
  letter-spacing: -1px;
  color: #ffffff !important;
}

.slider .slogan p {
  font-size: 108%; font-size: 4.6vw;
  text-align: center;
}

.slogan-content {
  padding: 0 !important;
  margin: 0 !important;
}

.unslider-nav, .unslider-arrow {
  display: none;
}

/* @media screen and (-webkit-min-device-pixel-ratio:0){ */
/*     .slider .slogan p { */
/* 	   font-size: 90%; */
/*     } */
/* } */

/* ======================================================================== */
/* The first slide (intro) */
#slide1 {
  background-image: url("/tools/luactb/images/cover-lua-1920x480.jpg");
}

#slide1 .slogan-content {
  color: white;
  background-color: rgba(0,0,0,0.7);
}

/* ======================================================================== */
/* Styles for the main content */

.col-6 img {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.main h2 {
  color: #3472ae;
  padding: 0.2em 0 0.2em 0;
}

.info-icon {
  font-size: 3em;
  display: table-cell;
  vertical-align: middle;
  height: 1.8em;
  color: #666;
}

h3.info {
  display: table-cell;
  vertical-align: middle;
  padding: 0.5em;
  text-transform: uppercase;
}

/* ======================================================================== */
/* Slider Download button */

a.download-button {
  position: absolute;
  color: white;
  background-color: #0cb3ee;
  border-color: #0cb3ee;
  padding: 0.5em 0.25em 0.5em 0.25em;
  border-radius: 5px;
  font-size: 80%;
  text-decoration: none;
  font-size: 110%;
  top: 35%;
  z-index: 10;
}

a.download-button:hover {
  background-color: #5cccf4;
}

h1.multi-platform {
  text-align: center;
  background-color: #0cb3ee;
  color: white;
  font-size: 150%;
  font-weight: 100;
}

h1.multi-platform span {
  padding-left: 0.5em;
  padding-right: 0.5em;
}

/* ======================================================================== */
@media screen and (max-width: 360px) {
  /* A Safari 3.1 (only) and Chrome 1 (only) hack to reduce the font to */
  /* to fit into one line with max360px width resolution! */
  html:not(:last-child) .slider .slogan p:not(:root:root) { 
    font-size: 90%;
  }
}

@media screen and (max-width: 599px) {
  /* undo the centered alignment of the slogan text */
  .centered .slogan {
    left: 0px;
  }
}

/* ======================================================================== */
@media screen and (min-width: 480px) {
  a.download-button {
    font-size: 150%;
  }
  .slider h1.headline {
    font-size: 200% !important;
    letter-spacing: 0px;
  }
}

/* ======================================================================== */
@media screen and (min-width: 600px) {
  a.download-button {
    font-size: 200%;
    font-weight: 100;
    top: 75%;
    padding: 0.25em;
  }
  h1.multi-platform {
    font-size: 200%;
  }
  .slogan-content p {
    font-size: 160% !important;
    font-weight: 100;
    text-align: left !important;
    line-height: 150%;
  }
  .slide .slogan {
    width: 20em;
    top: 30%;
  }
  .slogan-content {
    background-color: transparent !important;
  }
  .slider .slogan .dot {
    display: none;
  }
  .slogan-content .phrase:after {
    content: "\a";
    white-space: pre;
  }
}

/* ======================================================================== */
@media screen and (min-width: 768px) {
  .slider h1.headline {
    font-size: 250% !important;
  }
  .slogan-content p {
    font-size: 180% !important;
  }
}

/* ======================================================================== */
@media screen and (min-width: 1024px) {
  .slider h1.headline {
    font-size: 250% !important;
  }
}

/* ======================================================================== */
@media screen and (min-width: 1200px) {
  .slider h1.headline {
    font-size: 300% !important;
  }
  .slogan-content p {
    font-size: 200% !important;
  }
}

/* ======================================================================== */
@media screen and (min-width: 1440px) {
  .slogan-content p {
    font-size: 240% !important;
  }
}