/*!
    HUUTHINHHOUSE CSS TEMPLATE :: style.css
    a tweaked version to suit our projects
    ----------------------------------------------------------
    We have learned much from/been inspired by/taken code where offered from:

    HTML5 Doctor	            :: http://html5doctor.com
    Normalise.css               :: http://necolas.github.com/normalize.css/
    HTML5 reset                 :: http://html5reset.org/
    & esp. HTML5 Boilerplate    :: http://html5boilerplate.com
    ------------------------------------------------------------
    # Version 2.0 - Last Updated: 22 January, 2013
    # Author: Huu Thinh (Rex Hoang) - Website: huuthinhhouse.com

    ================================================
    Website theme: Color glossary
    ================================================
    # Dark grey (text): #333333
    # Dark Blue (headings, links) #000066
    # Mid Blue (header) #333399
    # Light blue (top navigation) #CCCCFF
    # Mid grey: #666666
    Please copy this into the head of new css files!
*/
/* RESET */
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* HTML5 & OTHER ELEMENTS */
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;
  height: 0;
}

[hidden] {
  display: none;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-weight: bold;
}

blockquote {
  margin: 1em 0;
}

dfn {
  font-style: italic;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

ins {
  background: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background: #ff0;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

pre, code, kbd, samp {
  font-family: monospace, serif;
  _font-family: "courier new", monospace;
  font-size: 1em;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

q {
  quotes: none;
}

q:before, q:after {
  content: "";
  content: none;
}

small {
  font-size: 85%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* EMBEDDED CONTENT + FIGURES */
img {
  border: 0;
  -ms-interpolation-mode: bicubic;
  vertical-align: middle;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}

/* FORM */
label {
  cursor: pointer;
}

legend {
  border: 0;
  *margin-left: -7px;
  padding: 0;
  white-space: normal;
}

button, input, select, textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle;
}

button, input {
  line-height: normal;
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
  *overflow: visible;
}

button[disabled], input[disabled] {
  cursor: default;
}

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
  *width: 13px;
  *height: 13px;
}

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

/** TABLES **/
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td {
  vertical-align: top;
}

/** Chrome Frame Prompt **/
.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: black;
  padding: 0.2em 0;
}

/** Links & List **/
nav a {
  text-decoration: none;
}

a:focus {
  outline: thin dotted;
}

a:hover, a:active {
  outline: 0;
}

nav ul, nav ol {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}

/* Control space btw bullets and text  + list-style-pos inside */
/*ul { list-style: disc inside; }*/
/* Useful classes */
.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  /* IE 6/7 fallback */
  *text-indent: -9999px;
}

.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 100%;
}

.hidden {
  display: none !important;
  visibility: hidden;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

.invisible {
  visibility: hidden;
}

.group:before, .group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
  /* Style adjustments for high resolution devices */
}
/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

    /*a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }*/
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
    /* h5bp.com/t */
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  @page {
    margin: 0.5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}
/* TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {
  color: #fff;
}

h1 {
  font-size: 2.4em;
}

h2 {
  font-size: 3rem;
  margin: 0 0 0.83em 0;
}

.logo {
  font-size: 3.2rem;
}

.tagline {
  font-size: 2.8em;
  color: #c4c4c4;
}

h3 {
  font-size: 1.17em;
  margin: 1em 0;
}

h4 {
  font-size: 1em;
  margin: 1.33em 0;
}

h5 {
  font-size: 0.83em;
  margin: 1.67em 0;
}

h6 {
  font-size: 0.75em;
  margin: 2.33em 0;
}

/*================================================
    Website theme: Color glossary                
=================================================*/
/** BASE **/
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 100%;
  height: 100%;
}

/* IPHONE & IPAD SCROLLBAR */
/*-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; - min width to fix ipad */
html, button, input, select, textarea {
  font-family: arial, sans-serif;
}

::-moz-selection {
  background: #7AAD21;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: #7AAD21;
  color: #fff;
  text-shadow: none;
}

body {
  margin: 0;
  font-size: 1em;
  line-height: 1.4;
  background: #000;
  color: #fff;
  font-family: 'Dosis', sans-serif;
  height: 100%;
  margin: 0 auto;
  overflow-x: hidden;
}

/* LINKS */
a, a:visited {
  color: #F8FB46;
}
a:hover, a:visited:hover {
  color: red;
}

/** LISTS **/
dl, menu {
  margin: 0.2em 0;
  padding: 0 0 0 10px;
}

dd {
  margin: 0 0 0 40px;
}

.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  /* IE 6/7 fallback */
  *text-indent: -9999px;
}

.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 100%;
}

/** Container **/
.logo span {
  display: inline-block;
}

/** Classes **/
.stripe {
  width: 100%;
  height: 100px;
  background-color: #b4ddb4;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFB4DDB4', endColorstr='#FF002400');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I0ZGRiNCIvPjxzdG9wIG9mZnNldD0iOCUiIHN0b3AtY29sb3I9IiMxMTBiMGMiLz48c3RvcCBvZmZzZXQ9IjIyJSIgc3RvcC1jb2xvcj0iIzI5MWYzMCIvPjxzdG9wIG9mZnNldD0iMjYlIiBzdG9wLWNvbG9yPSIjNTJiMTUyIi8+PHN0b3Agb2Zmc2V0PSI0MyUiIHN0b3AtY29sb3I9IiM1MmIxNTIiLz48c3RvcCBvZmZzZXQ9IjQ4JSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIvPjxzdG9wIG9mZnNldD0iNjglIiBzdG9wLWNvbG9yPSIjZmYwMDAwIi8+PHN0b3Agb2Zmc2V0PSI4MyUiIHN0b3AtY29sb3I9IiMwMDU3MDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDI0MDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b4ddb4), color-stop(8%, #110b0c), color-stop(22%, #291f30), color-stop(26%, #52b152), color-stop(43%, #52b152), color-stop(48%, #ff0000), color-stop(68%, #ff0000), color-stop(83%, #005700), color-stop(100%, #002400));
  background-image: -moz-linear-gradient(top, #b4ddb4 0%, #110b0c 8%, #291f30 22%, #52b152 26%, #52b152 43%, #ff0000 48%, #ff0000 68%, #005700 83%, #002400 100%);
  background-image: -webkit-linear-gradient(top, #b4ddb4 0%, #110b0c 8%, #291f30 22%, #52b152 26%, #52b152 43%, #ff0000 48%, #ff0000 68%, #005700 83%, #002400 100%);
  background-image: linear-gradient(to bottom, #b4ddb4 0%, #110b0c 8%, #291f30 22%, #52b152 26%, #52b152 43%, #ff0000 48%, #ff0000 68%, #005700 83%, #002400 100%);
}

/** Header **/
/** Navigation **/
nav.primary {
  position: fixed;
  right: 20px;
  z-index: 999;
  top: 40%;
}
nav.primary li {
  margin: 0 0 1rem;
  display: block;
}
nav.primary a {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 100%;
  background-color: white;
  border: solid 2px white;
}
nav.primary a:hover {
  background-color: orange;
}
nav.primary a.current {
  background-color: orange;
}

section {
  min-height: 10em;
  border-bottom: 10px solid #009EFA;
  padding: 4em 0em;
  text-align: center;
  width: 100%;
}

.wrapper {
  margin: auto;
  max-width: 960px;
}
.wrapper li {
  display: block;
  max-width: 90%;
  margin: 0 auto 2rem;
}
@media screen and (min-width: 480px) {
  .wrapper li {
    float: left;
    width: 50%;
  }
}

.bg {
  background: url("../img/home.png") no-repeat fixed center center/cover;
  height: 100%;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
}

.splash {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  text-align: center;
  display: table;
  border: none;
}
.splash .hth {
  display: table-cell;
  vertical-align: middle;
  height: 100%;
}

.progress-bar {
  background: #eee;
  background: rgba(245, 245, 245, 0.8);
  border-radius: 5px;
  width: 20%;
  margin: 0 auto 0.8rem;
  text-align: left;
  color: #fff;
  position: relative;
}
.progress-bar .progress-bar-bg {
  height: 100%;
  position: absolute;
  border-radius: 5px;
}
.progress-bar .pj {
  background: #48C6CE;
}
.progress-bar .mkt {
  background: purple;
}
.progress-bar .seo {
  background: #000;
}
.progress-bar .progress-bar-label {
  position: relative;
  z-index: 1;
  padding: 8px 10px;
  display: block;
}

.quote {
  text-align: center;
  -moz-box-shadow: 0px 0px 10px 0 rgba(255, 255, 255, 0.5);
  -webkit-box-shadow: 0px 0px 10px 0 rgba(255, 255, 255, 0.5);
  box-shadow: 0px 0px 10px 0 rgba(255, 255, 255, 0.5);
}

blockquote {
  font-size: 3rem;
}

cite {
  font-size: 1.8em;
  color: #bbb;
}

.map {
  background: url(../img/map.png) no-repeat center center;
  position: relative;
}
.map .map-pin {
  position: absolute;
  top: 100px;
}
.map .map-pin:hover .tooltip {
  display: block;
}
.map .back {
  background: url(../img/map-locator@2x.png) no-repeat;
  width: 90px;
  height: 91px;
  opacity: 0;
  -moz-animation: pulse 2s ease-out infinite;
  -webkit-animation: pulse 2s ease-out infinite;
  animation: pulse 2s ease-out infinite;
}
.map .pin {
  background: url(../img/map-marker@2x.png) no-repeat;
  width: 20px;
  height: 21px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -10px;
}

.tooltip {
  position: absolute;
  bottom: -30px;
  width: 100%;
  color: #fff;
}

.customizable {
  width: 60%;
  margin: 0 auto;
  position: relative;
}
.customizable figure {
  margin: 0 7% 0 0;
  float: left;
}
.customizable figure img {
  border-radius: 50%;
}
.customizable .content {
  float: left;
  width: 40%;
  margin: 10% 0 0;
  text-align: justify;
}

.author {
  display: block;
  font-size: 25px;
  color: #848484;
}

.song {
  font-size: 36px;
  color: #D50646;
}

.center {
  position: absolute;
  left: 50%;
  top: 50%;
}

.play-button {
  width: 4em;
  height: 4em;
  background: rgba(13, 23, 26, 0.77);
  box-shadow: 0 0 0 4px #05C1F8;
  border-radius: 50%;
  margin: -2em 0 0 -2em;
  -moz-transition: all 0.15s ease-in-out 0s;
  -o-transition: all 0.15s ease-in-out 0s;
  -webkit-transition: all 0.15s ease-in-out;
  -webkit-transition-delay: 0s;
  transition: all 0.15s ease-in-out 0s;
}
.play-button .icon {
  width: 0;
  height: 0;
  border-bottom: 12px solid transparent;
  border-left: 20px solid #FFF;
  border-top: 12px solid transparent;
  margin: -10px 0 0 -6px;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -moz-transition: all 1s ease-in-out 0s;
  -o-transition: all 1s ease-in-out 0s;
  -webkit-transition: all 1s ease-in-out;
  -webkit-transition-delay: 0s;
  transition: all 1s ease-in-out 0s;
}

.video-thumb {
  display: block;
  overflow: hidden;
  position: relative;
  margin: auto;
  background: #fff;
}
@media screen and (min-width: 480px) {
  .video-thumb {
    width: 400px;
    height: 225px;
  }
}
.video-thumb .bg-img {
  width: 400px;
  height: 225px;
  -moz-transition: all 0.4s linear 0s;
  -o-transition: all 0.4s linear 0s;
  -webkit-transition: all 0.4s linear;
  -webkit-transition-delay: 0s;
  transition: all 0.4s linear 0s;
}
.video-thumb .iftmrnvcome {
  background: url(../img/ronald.jpg) no-repeat;
}
.video-thumb .greatestday {
  background: url(../img/take-that7.jpg) no-repeat;
}
.video-thumb .bday {
  background: url(../img/mb-beautiful-day.jpg) no-repeat #000;
}
.video-thumb .ifn {
  background: url(../img/ifn-pbn.jpg) no-repeat;
}
.video-thumb span {
  display: block;
}
.video-thumb:hover .bg-img {
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
.video-thumb:hover .overlay {
  background-color: rgba(0, 0, 0, 0.2);
}

.projects li {
  position: relative;
}

.brainchildren li:hover .overlay {
  background-color: rgba(0, 0, 0, 0.2);
}

.brainchildren a {
  background-repeat: no-repeat;
  display: block;
  min-height: 100px;
  height: 150px;
  margin: auto;
  position: relative;
  z-index: 1;
}

.brainchildren .vnw {
  background-image: url(../img/vnw.png);
  width: 263px;
}

.brainchildren .imaginee {
  background-image: url(../img/imaginee.png);
  width: 301px;
}

.brainchildren .chichi {
  background-image: url(../img/chichi.png);
  width: 300px;
}

.centre {
  max-width: 1000px;
  margin: auto;
}

.colophon {
  padding: 2rem 0;
  text-align: center;
}

.coming {
  font-size: 2.1rem;
  margin: 0 0 2rem;
}

.last-updated {
  color: #727171;
}

/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp {
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  vertical-align: top;
}

.fancybox-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8020;
}

.fancybox-skin {
  position: relative;
  background: #f9f9f9;
  color: #444;
  text-shadow: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.fancybox-opened {
  z-index: 8030;
}

.fancybox-opened .fancybox-skin {
  -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-outer, .fancybox-inner {
  position: relative;
}

.fancybox-inner {
  overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
  -webkit-overflow-scrolling: touch;
}

.fancybox-error {
  color: #444;
  font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
  margin: 0;
  padding: 15px;
  white-space: nowrap;
}

.fancybox-image, .fancybox-iframe {
  display: block;
  width: 100%;
  height: 100%;
}

.fancybox-image {
  max-width: 100%;
  max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
  background-image: url("../img/fancybox/fancybox_sprite.png");
}

#fancybox-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -22px;
  margin-left: -22px;
  background-position: 0 -108px;
  opacity: 0.8;
  cursor: pointer;
  z-index: 8060;
}

#fancybox-loading div {
  width: 44px;
  height: 44px;
  background: url("../img/fancybox/fancybox_loading.gif") center center no-repeat;
}

.fancybox-close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  z-index: 8040;
}

.fancybox-nav {
  position: absolute;
  top: 0;
  width: 40%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
  background: transparent url("../img/fancybox/blank.gif");
  /* helps IE */
  -webkit-tap-highlight-color: transparent;
  z-index: 8040;
}

.fancybox-prev {
  left: 0;
}

.fancybox-next {
  right: 0;
}

.fancybox-nav span {
  position: absolute;
  top: 50%;
  width: 36px;
  height: 34px;
  margin-top: -18px;
  cursor: pointer;
  z-index: 8040;
  visibility: hidden;
}

.fancybox-prev span {
  left: 10px;
  background-position: 0 -36px;
}

.fancybox-next span {
  right: 10px;
  background-position: 0 -72px;
}

.fancybox-nav:hover span {
  visibility: visible;
}

.fancybox-tmp {
  position: absolute;
  top: -99999px;
  left: -99999px;
  visibility: hidden;
  max-width: 99999px;
  max-height: 99999px;
  overflow: visible !important;
}

/* Overlay helper */
.fancybox-lock {
  overflow: hidden !important;
  width: auto;
}

.fancybox-lock body {
  overflow: hidden !important;
}

.fancybox-lock-test {
  overflow-y: hidden !important;
}

.fancybox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  display: none;
  z-index: 8010;
  background: url("../img/fancybox/fancybox_overlay.png");
}

.fancybox-overlay-fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

.fancybox-lock .fancybox-overlay {
  overflow: auto;
  overflow-y: scroll;
}

/* Title helper */
.fancybox-title {
  visibility: hidden;
  font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
  position: relative;
  text-shadow: none;
  z-index: 8050;
}

.fancybox-opened .fancybox-title {
  visibility: visible;
}

.fancybox-title-float-wrap {
  position: absolute;
  bottom: 0;
  right: 50%;
  margin-bottom: -35px;
  z-index: 8050;
  text-align: center;
}

.fancybox-title-float-wrap .child {
  display: inline-block;
  margin-right: -100%;
  padding: 2px 20px;
  background: transparent;
  /* Fallback for web browsers that doesn't support RGBa */
  background: rgba(0, 0, 0, 0.8);
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  text-shadow: 0 1px 2px #222;
  color: #FFF;
  font-weight: bold;
  line-height: 24px;
  white-space: nowrap;
}

.fancybox-title-outside-wrap {
  position: relative;
  margin-top: 10px;
  color: #fff;
}

.fancybox-title-inside-wrap {
  padding-top: 10px;
}

.fancybox-title-over-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  padding: 10px;
  background: #000;
  background: rgba(0, 0, 0, 0.8);
}

/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-image: url("../img/fancybox/fancybox_sprite@2x.png");
    background-size: 44px 152px;
    /*The size of the normal image, half the size of the hi-res image*/
  }

  #fancybox-loading div {
    background-image: url("../img/fancybox/fancybox_loading@2x.gif");
    background-size: 24px 24px;
    /*The size of the normal image, half the size of the hi-res image*/
  }
}
.input {
  margin: 0 0 10px;
}

input[type="text"],
input[type="email"],
input[type="submit"],
textarea {
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease;
  -webkit-transition-delay: 0s;
  transition: all 0.3s ease 0s;
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
  border: 10px solid rgba(83, 4, 69, 0.698);
  border-radius: 4px 4px 4px 4px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5) inset;
  color: #5A5A5A;
  padding: 10px 5px;
  width: 20%;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="submit"]:focus,
textarea:focus {
  color: #fff;
}
input[type="text"]:hover,
input[type="email"]:hover,
input[type="submit"]:hover,
textarea:hover {
  border-color: #5E3056;
}
input[type="text"].submit,
input[type="email"].submit,
input[type="submit"].submit,
textarea.submit {
  -moz-transition: all 0.2s ease-out 0s;
  -o-transition: all 0.2s ease-out 0s;
  -webkit-transition: all 0.2s ease-out;
  -webkit-transition-delay: 0s;
  transition: all 0.2s ease-out 0s;
  background: #4F5153;
  color: #fff;
  padding: 15px 0;
  text-transform: uppercase;
  font-size: 20px;
  border: none;
}
input[type="text"].submit:hover,
input[type="email"].submit:hover,
input[type="submit"].submit:hover,
textarea.submit:hover {
  background: #4491DD;
}

/** Footer **/
@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(0.2);
    transform: scale(0.2);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -moz-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0;
  }
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0;
  }
}
@keyframes pulse {
  0% {
    -moz-transform: scale(0.2);
    -ms-transform: scale(0.2);
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0;
  }
}