@import url(fonts/fonts.css);
/*
* HTML5 ✰ Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*
* Detailed information about this CSS: h5bp.com/css
*
* ==|== normalize ==========================================================
*/
/* =============================================================================
HTML5 display definitions
========================================================================== */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block; }

audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1; }

audio:not([controls]) {
  display: none; }

[hidden]:not(embed) {
  display: none; }

/* =============================================================================
Base
========================================================================== */
/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Force vertical scrollbar in non-IE
* 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
*/
html {
  font-size: 100%;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

body {
  margin: 0;
  font-size: 16px;
  line-height: 1.231;
  background: white url("../images/dust.png"); }

body,
button,
input,
select,
textarea {
  font-family: "PTSansNarrowRegular", Arial, sans-serif;
  color: #222; }

/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
*/
::-moz-selection {
  background: #96C674;
  color: #fff;
  text-shadow: none; }

::selection {
  background: #96C674;
  color: #fff;
  text-shadow: none; }

/* =============================================================================
Links
========================================================================== */
a {
  text-decoration: none;
  color: #2c86da; }

a:hover {
  color: #0759a5; }

a:focus {
  outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover,
a:active {
  outline: 0; }

/* ==== Detail Links ================================ */
#header a {
  color: #2780CD; }

#header a:hover {
  color: #fff; }

/* =============================================================================
Startup Typography
========================================================================== */
b,
strong {
  font-family: "PTSansNarrowBold", Arial, sans-serif;
  font-weight: normal; }

hr {
  display: block;
  height: 2px;
  border: 0;
  border-width: 0;
  margin-top: 30px;
  background-color: #2989d8;
  width: 920px;
  padding: 0;
  clear: both; }

/* =============================================================================
Lists
========================================================================== */
ul,
ol {
  margin: 1em 0;
  padding: 0 0 0 40px; }

dd {
  margin: 0 0 0 40px; }

/* =============================================================================
Embedded content
========================================================================== */
/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
*/
img {
  border: 0;
  -ms-interpolation-mode: bicubic;
  vertical-align: middle; }

/* =============================================================================
Custom structure begins here.
========================================================================== */
#wrap {
  width: 960px;
  padding-top: 5px;
  margin: 20px auto;
  position: relative;
  background: white url("../images/dust.png");
  -webkit-box-shadow: 0px 0px 15px 0px rgba(150, 150, 150, 0.3);
  box-shadow: 0px 0px 15px 0px rgba(150, 150, 150, 0.3); }

.header {
  margin: 20px 0 0px; }

.content {
  padding: 5px 3px; }

nav {
  position: relative;
  margin: 0 auto;
  padding: 0; }

nav ul {
  text-align: center;
  margin: -10px auto 0px;
  padding: 0; }

nav li {
  display: inline-block;
  padding: 0 10px;
  font-size: 20px;
  filter: alpha(opacity=70);
  opacity: .7; }

footer {
  clear: left;
  position: relative;
  margin: 0;
  padding: 0; }

footer ul {
  text-align: center;
  margin: 0 auto;
  padding: 0 0 20px 0; }

footer li {
  display: inline-block;
  padding: 0 10px;
  font-size: 20px;
  filter: alpha(opacity=60);
  opacity: .6; }

.active {
  color: #ebc92b; }

.printsm-sprite, .printsm-pr01, .printsm-pr02, .printsm-pr03, .printsm-pr04, .printsm-pr05, .printsm-pr06, .printsm-pr07, .printsm-pr08, .printsm-pr09, .printsm-pr10, .printsm-pr11, .printsm-pr12 {
  background: url('../images/printsm-sfbecdc5b37.png') no-repeat; }

.printsm-pr01 {
  background-position: 0 -900px; }

.printsm-pr02 {
  background-position: 0 -1500px; }

.printsm-pr03 {
  background-position: 0 -1200px; }

.printsm-pr04 {
  background-position: 0 -600px; }

.printsm-pr05 {
  background-position: 0 -150px; }

.printsm-pr06 {
  background-position: 0 -1050px; }

.printsm-pr07 {
  background-position: 0 -300px; }

.printsm-pr08 {
  background-position: 0 -1650px; }

.printsm-pr09 {
  background-position: 0 -450px; }

.printsm-pr10 {
  background-position: 0 -750px; }

.printsm-pr11 {
  background-position: 0 0; }

.printsm-pr12 {
  background-position: 0 -1350px; }

.websm-sprite, .websm-web01, .websm-web02, .websm-web03, .websm-web04, .websm-web05, .websm-web06, .websm-web07, .websm-web08, .websm-web09, .websm-web10, .websm-web11, .websm-web12 {
  background: url('../images/websm-sd7610c4ee9.png') no-repeat; }

.websm-web01 {
  background-position: 0 -1350px; }

.websm-web02 {
  background-position: 0 -1500px; }

.websm-web03 {
  background-position: 0 -600px; }

.websm-web04 {
  background-position: 0 -300px; }

.websm-web05 {
  background-position: 0 -900px; }

.websm-web06 {
  background-position: 0 -450px; }

.websm-web07 {
  background-position: 0 -1050px; }

.websm-web08 {
  background-position: 0 -750px; }

.websm-web09 {
  background-position: 0 0; }

.websm-web10 {
  background-position: 0 -1200px; }

.websm-web11 {
  background-position: 0 -1650px; }

.websm-web12 {
  background-position: 0 -150px; }

.wrsm-sprite, .wrsm-wr01, .wrsm-wr02, .wrsm-wr03, .wrsm-wr04, .wrsm-wr05, .wrsm-wr06, .wrsm-wr07, .wrsm-wr08, .wrsm-wr09, .wrsm-wr10, .wrsm-wr11, .wrsm-wr12 {
  background: url('../images/wrsm-sf7716f8587.png') no-repeat; }

.wrsm-wr01 {
  background-position: 0 -600px; }

.wrsm-wr02 {
  background-position: 0 -750px; }

.wrsm-wr03 {
  background-position: 0 -900px; }

.wrsm-wr04 {
  background-position: 0 -1350px; }

.wrsm-wr05 {
  background-position: 0 0; }

.wrsm-wr06 {
  background-position: 0 -1050px; }

.wrsm-wr07 {
  background-position: 0 -1650px; }

.wrsm-wr08 {
  background-position: 0 -1200px; }

.wrsm-wr09 {
  background-position: 0 -150px; }

.wrsm-wr10 {
  background-position: 0 -300px; }

.wrsm-wr11 {
  background-position: 0 -1500px; }

.wrsm-wr12 {
  background-position: 0 -450px; }

.gallery {
  position: relative;
  padding: 5px; }

.gallery ul {
  list-style: none;
  text-align: center;
  margin: 0 auto 10px;
  padding: 0; }

.gallery ul li {
  display: inline-block;
  line-height: 0;
  margin: 0;
  padding: 0; }

.thumbnail {
  display: block;
  float: left;
  width: 150px;
  height: 150px;
  margin: 3px;
  border: 1px solid black; }

#samplecontainer {
  position: absolute;
  width: 930px;
  top: 3000px;
  left: 50%;
  z-index: 1000;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out; }

#sample {
  position: relative;
  padding: 0 0 0 5px;
  left: -50%;
  height: 650px;
  background: white url("../images/dust.png"); }

#sample img {
  float: left;
  margin: 0 15px 0 0;
  width: 350px;
  margin-bottom: 15px; }

#sampleinfo {
  padding: 0; }

#samplecontainer.sampleup {
  top: 20px; }

.content.contentup {
  top: -3000px; }

#loadingcontainer {
  position: absolute;
  top: 0%;
  left: 50%;
  width: 40%;
  max-width: 900px;
  height: 90%;
  z-index: 500;
  display: none;
  background: white url("../images/dust.png"); }

#loadingsample {
  position: relative;
  left: -50%;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background: url("../images/preloader.gif") no-repeat center 20%; }

.web01 {
  position: absolute;
  top: 150px;
  left: 50px; }

.web02 {
  position: absolute;
  top: 170px;
  left: 70px; }

.web03 {
  position: absolute;
  top: 110px;
  left: 150px; }

.web04 {
  position: absolute;
  top: 200px;
  left: 350px; }

.web05 {
  position: absolute;
  top: 450px;
  left: 650px; }

.web06 {
  position: absolute;
  top: 650px;
  left: 850px; }

.web07 {
  position: absolute;
  top: 250px;
  left: 250px; }

.web08 {
  position: absolute;
  top: 450px;
  left: 550px; }

.web09 {
  position: absolute;
  top: 650px;
  left: 150px; }

.web10 {
  position: absolute;
  top: 750px;
  left: 250px; }

/* =============================================================================
Typography
========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: "PTSansNarrowBold", Arial, sans-serif;
  color: #0568c4;
  font-weight: normal;
  margin: 0 0 8px 0;
  text-align: left; }

h1 {
  font-size: 3.8em;
  text-align: center; }

h2 {
  font-size: 3.5em; }

h3 {
  font-size: 3em; }

h4 {
  font-size: 2.5em; }

h5 {
  font-size: 2em; }

h6 {
  font-size: 1.8em; }

p {
  font-size: 1.2em;
  padding: 0; }

#sample p {
  font-size: 18px;
  line-height: 24px;
  padding-right: 5px;
  margin: 0; }

#loadingsample h3 {
  margin-top: 60px;
  line-height: 80px;
  text-align: center;
  color: black; }

.writing p {
  text-align: center;
  margin: 0; }

/* --------------------------------------------------------- */
/* MEDIA QUERIES ------------------------------------------- */
/* --------------------------------------------------------- */
/* --------------------------------------------------------- */
/* APPLE MACBOOK PRO RETINA ETC. --------------------------- */
/* --------------------------------------------------------- */
/* Retina Displays/Screens (2880x1800) --------------------- */
@media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) {
  #wrap {
    width: 100%;
    background-size: 50%; }

  .header, .subheader, .content {
    display: none; } }
/* --------------------------------------------------------- */
/* SMARTPHONES, TABLETS & TINY DESKTOPS -------------------- */
/* --------------------------------------------------------- */
/* Old Smartphones (portrait and landscape) ---------------- */
/* Old Smartphones (e.g. portrait) ------------------------- */
@media only screen and (max-width: 319px) {
  h1 {
    font-size: 1.25em; }

  h2 {
    font-size: 1.2em; }

  h3 {
    font-size: 1em; }

  p {
    font-size: 0.85em; }

  small {
    font-size: 0.75em; }

  #wrap {
    width: 240px; }

  .content {
    padding: 5px 3px 5px; }

  .thumbnail {
    width: 143px;
    height: 143px;
    margin: 3px; }

  #sample img {
    float: none; }

  .legi {
    font-size: 1.7em; } }
/* Smartphones (portrait and landscape) -------------------- */
/* Smartphones (portrait) & Old SP (landscape) ------------- */
@media only screen and (min-width: 320px) and (max-width: 479px) {
  #wrap {
    height: 1100px !important; }

  h1 {
    font-size: 2.5em; }

  h2 {
    font-size: 1.45em; }

  h3 {
    font-size: 1.2em; }

  p {
    font-size: .9em; }

  small {
    font-size: 0.9em; }

  #wrap {
    width: 320px; }

  .content {
    padding: 5px 3px 5px; }

  .thumbnail {
    width: 140px;
    height: 140px;
    margin: 3px; }

  #samplecontainer {
    width: 300px; }

  #sample {
    left: -52%;
    padding-left: 0; }

  #sample img {
    float: none;
    width: 310px; }

  .legi {
    font-size: 2em; } }
/* Smartphones (landscape) & Old Tablets (Portrait) -------- */
@media only screen and (min-width: 480px) and (max-width: 639px) {
  #wrap {
    height: 1150px !important; }

  h1 {
    font-size: 3.2em; }

  h2 {
    font-size: 1.7em; }

  h3 {
    font-size: 1.2em; }

  p {
    font-size: 1.1em; }

  small {
    font-size: 0.9em; }

  #wrap {
    width: 480px; }

  .content {
    padding: 5px 3px 5px; }

  .thumbnail {
    width: 146px;
    height: 146px;
    margin: 3px; }

  #samplecontainer {
    width: 440px; }

  #sample img {
    float: none;
    width: 350px; }

  .legi {
    font-size: 2.4em; } }
/* Smartphones & Tablets (portrait & landscape) ------------ */
/* Smartphones & Tablets (portrait) & Tiny Desktops -------- */
@media only screen and (min-width: 640px) and (max-width: 799px) {
  #wrap {
    height: 840px !important; }

  h1 {
    font-size: 3.5em; }

  h2 {
    font-size: 2em; }

  h3 {
    font-size: 1.5em; }

  p {
    font-size: 1.2em; }

  small {
    font-size: 1em; }

  #wrap {
    width: 640px; }

  .content {
    padding: 10px 0 10px; }

  #samplecontainer {
    width: 620px; }

  .thumbnail {
    width: 147px;
    height: 147px;
    margin: 4px; } }
/* Smartphones & Tablets (landscape) & Splitted Desktops --- */
@media only screen and (min-width: 800px) and (max-width: 1000px) {
  h1 {
    font-size: 3.8em; }

  h2 {
    font-size: 2.4em; }

  h3 {
    font-size: 1.8em; }

  p {
    font-size: 1.2em; }

  small {
    font-size: 1.1em; }

  #wrap {
    width: 800px; }

  .content {
    padding: 10px 3px 10px; }

  .thumbnail {
    width: 150px;
    height: 150px;
    margin: 3px; }

  #samplecontainer {
    width: 760px; }

  #sample img {
    margin: 0 15px 25px; } }
/* --------------------------------------------------------- */
/* DEVICES BY RATIO ---------------------------------------- */
/* --------------------------------------------------------- */
/* LowRes (e.g. 240x320 / 320x480) ------------------------- */
/* HighRes ------------------------------------------------- */
@media only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
  .header, .subheader, .content {
    display: block; } }
/* RetinaRes Smartphones (e.g. iPhone 4 / portrait) -------- */
@media only screen and (min--moz-device-pixel-ratio: 1.5) and (orientation: portrait), only screen and (-o-min-device-pixel-ratio: 3 / 2) and (orientation: portrait), only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait), only screen and (min-device-pixel-ratio: 1.5) and (orientation: portrait), only screen and (min-resolution: 1.5dppx) and (orientation: portrait) {
  #wrap {
    width: 320px;
    background-size: 100%; } }
/* RetinaRes Smartphones (e.g. iPhone 4 / landscape) ------- */
@media only screen and (min--moz-device-pixel-ratio: 1.5) and (orientation: landscape), only screen and (-o-min-device-pixel-ratio: 3 / 2) and (orientation: landscape), only screen and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape), only screen and (min-device-pixel-ratio: 1.5) and (orientation: landscape), only screen and (min-resolution: 1.5dppx) and (orientation: landscape) {
  #wrap {
    width: 480px;
    background-size: 100%; } }
/* --------------------------------------------------------- */
/* IPADS --------------------------------------------------- */
/* --------------------------------------------------------- */
/* iPads (portrait and landscape) -------------------------- */
/* iPads (portrait) ---------------------------------------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  #wrap {
    height: 670px !important; }

  h1 {
    font-size: 3.5em; }

  h2 {
    font-size: 1.7em; }

  h3 {
    font-size: 1.6em; }

  p {
    font-size: 1.2em; }

  small {
    font-size: 1em; }

  #wrap {
    width: 768px; }

  .content {
    padding: 10px 0 10px 10px; }

  .thumbnail {
    width: 150px;
    height: 150px;
    margin: 3px; }

  .legi {
    font-size: 3em; } }
/* iPads (landscape) --------------------------------------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  #wrap {
    height: 670px !important; }

  h1 {
    font-size: 3.5em; }

  h2 {
    font-size: 2em; }

  h3 {
    font-size: 1.6em; }

  p {
    font-size: 1.4em; }

  small {
    font-size: 1.2em; }

  #wrap {
    width: 1024px; }

  .content {
    padding: 10px 12px 10px; }

  .thumbnail {
    width: 150px;
    height: 150px;
    margin: 3px; }

  .legi {
    font-size: 5em; } }
/* iPad Retina (iPad 3; portrait and landscape) ------------ */
/* --------------------------------------------------------- */
/* COMPUTERS / OTHER DEVICES ------------------------------- */
/* --------------------------------------------------------- */
/* Displays/Screens (e.g. MacBook @ 1280x800) -------------- */
@media only screen and (min-width: 1250px) and (max-width: 1409px) {
  #wrap {
    height: 670px !important; }

  h1 {
    font-size: 4em; }

  h2 {
    font-size: 2.4em; }

  h3 {
    font-size: 1.8em; }

  p {
    font-size: 1.4em; }

  small {
    font-size: 1.2em; }

  #wrap {
    width: 1140px; }

  .content {
    padding: 20px 25px 10px; }

  .thumbnail {
    width: 150px;
    height: 150px;
    margin: 3px; }

  .legi {
    font-size: 5em; } }
/* Displays/Screens (e.g. 19" WS @ 1440x900) --------------- */
@media only screen and (min-width: 1410px) and (max-width: 1649px) {
  #wrap {
    height: 670px !important; }

  h1 {
    font-size: 4.2em; }

  h2 {
    font-size: 2.8em; }

  h3 {
    font-size: 2em; }

  p {
    font-size: 1.4em; }

  small {
    font-size: 1.2em; }

  #wrap {
    width: 1320px; }

  .content {
    padding: 20px 35px 10px; }

  .thumbnail {
    width: 150px;
    height: 150px;
    margin: 3px; }

  .legi {
    font-size: 5em; } }
/* Displays/Screens (e.g. 22" WS @ 1680x1050) -------------- */
@media only screen and (min-width: 1650px) and (max-width: 1889px) {
  h1 {
    font-size: 4.5em; }

  h2 {
    font-size: 2.4em; }

  h3 {
    font-size: 2em; }

  p {
    font-size: 1.3em; }

  small {
    font-size: 1em; }

  #wrap {
    width: 1500px; }

  .content {
    padding: 20px 20px 20px; }

  .thumbnail {
    width: 150px;
    height: 150px;
    margin: 3px; }

  .legi {
    font-size: 5em; } }
/* Displays/Screens (e.g. 24" WS @ 1920x1080) -------------- */
@media only screen and (min-width: 1890px) and (max-width: 2529px) {
  h1 {
    font-size: 5.5em; }

  h2 {
    font-size: 2.6em; }

  h3 {
    font-size: 2.2em; }

  p {
    font-size: 1.3em; }

  small {
    font-size: 1em; }

  #wrap {
    width: 1860px; }

  .content {
    padding: 30px; }

  .thumbnail {
    width: 150px;
    height: 150px;
    margin: 3px; }

  .legi {
    font-size: 5em; } }
/* Really Large Displays/Screens (e.g. 2560x1440) ---------- */
@media only screen and (min-width: 2530px) {
  h1 {
    font-size: 6em; }

  h2 {
    font-size: 3em; }

  h2:first-child:first-letter {
    padding: 0 8px 5px 0;
    float: left;
    font-size: 2.5em;
    line-height: 0.75em;
    color: #5ABB00; }

  h3 {
    font-size: 2.2em; }

  p {
    font-size: 1.4em;
    text-align: justify; }

  small {
    font-size: 1.25em; }

  #wrap {
    width: 2400px; }

  .content {
    padding: 100px 25px 50px; }

  .thumbnail {
    width: 150px;
    height: 150px;
    margin: 3px; }

  .legi {
    font-size: 5em; } }