@font-face {
    font-family: 'athena';
    src: url('../fonts/athena_u-webfont.eot');
    src: url('../fonts/athena_u-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/athena_u-webfont.woff') format('woff'),
         url('../fonts/athena_u-webfont.ttf') format('truetype'),
         url('../fonts/athena_u-webfont.svg#athena_unicoderegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'baskervillenormal';
    src: url('../fonts/baskvl-webfont.eot');
    src: url('../fonts/baskvl-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/baskvl-webfont.woff') format('woff'),
         url('../fonts/baskvl-webfont.ttf') format('truetype'),
         url('../fonts/baskvl-webfont.svg#baskervillenormal') format('svg');
    font-weight: normal;
    font-style: normal;

}

html,
button,
input,
select,
textarea {
    color: #222;
}
h1,h2,h3{margin: 0 }
ul,ol{margin: 0; padding: 0;}
li{list-style: none;}
a{text-decoration: none;color: #b9bdc7;}
a:hover,.active a{color: #fff}
body {
    font-size: 14px;
    line-height: 1.4;
}
a{outline: none!important}
::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

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

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
.left{float: left;}
.right{float: right;}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/*body{background: url(../img/ISC_6615L-2.jpg) no-repeat center top; -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;}*/
#supersized { position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
#supersized img{ width:auto; height:auto; position:relative; outline:none; border:none; }
#supersized a { z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; display:block; }
/*_-_-_LAYOUT_-_-_*/
.container{position: fixed; left: 0; top: 35%; width: 20px; z-index: 100}
.section{width: 817px; margin: 0 auto; padding-top: 70px; display: none;}
.section.active{}
.detail{background: url(../img/bg_white.png);padding: 40px 30px; color: #1d2044;font-family: 'baskervillenormal',sans-serif; overflow: hidden;}
.detail p{margin: 0 0 20px; font-size: 1.3em;letter-spacing: 1px;}
.detail div.anim{position: relative; left: 800px}

/*_-_-_ Menu _-_-_*/
#mainMenu{width:365px; height: 180px; padding:30px 65px 20px; background: url(../img/the_hoxton_bg_menu.png) no-repeat; text-align: center; position: relative;left: -457px; z-index: 100}
#mainMenu a.tw{display: block; text-indent: -999999px; width: 174px; height: 11px; background: url(../img/the_hoxton_tw.png) no-repeat 0 0; margin: 13px auto;  }
#mainMenu a:hover.tw{background-position: 0 -11px;}
#viewMenu{width: 20px; height: 230px; display: block; text-indent: -999999px; position: absolute; top: 0; right: 10px; background: url(../img/title_menu.png) no-repeat}
#viewMenu.visible{}
#viewMenu.hide{}
#mainMenu ul{padding-top: 15px;width: 350px;}
#mainMenu li{float: left; font:18px 'athena',sans-serif; text-transform: uppercase; margin-right: 15px; }
#mainMenu li.first{width: 345px; margin: 0}
#mainMenu li.last{ margin: 0}

#mainMenu ul li a{color: #fff}
#mainMenu ul:hover li a{color: #b9bdc7}
#mainMenu .active a, #mainMenu ul:hover li:hover a{color: #fff}
/*_-_-_ Philosophy _-_-_*/
h2{background: url(../img/bg_white.png); color: #1d2044; font:bold 15px 'athena',sans-serif; padding: 6px 10px 0px; float: left;margin-bottom: 40px;}
.section h2{text-transform: uppercase; border-right: 5px solid #fff;}
#philosophy h4,#philosophy h3,#philosophy h5{font-family:'athena',sans-serif; text-transform: uppercase; margin: 0;line-height: 55px; color: #fff; font-weight: normal; letter-spacing: 7px;}
#philosophy h3{font-size: 4em; }
#philosophy h4{font-size: 3.71em;text-align: right; margin-bottom: 20px;}
#philosophy h5{font-size: 3.21em; }
#philosophy h5 em{padding-right: 10px}

/*_-_-_ Menu _-_-_*/
#menu h2{min-width: 270px; border-right: 5px solid #fff; margin: 20px 0 0;}
#menu .detail{-webkit-box-shadow:  0px -3px 2px 0px rgba(0, 0, 0, 0.5);box-shadow:  0px -3px 2px 0px rgba(0, 0, 0, 0.5);}
#menu .col{width: 372px; }
#menu .col.left{margin-right: 10px; }
#menu .detail{padding: /*15px 30px*/10px;}
#menu p{line-height: 14px;font-size: 1.16em;}

/*_-_-_ Events _-_-_*/
/*#event .detail{width: 487px; height: auto; position: fixed; left: 520px;top: 35.5%; padding: 0; }*/
#event .detail{width: 431px; padding: 12px 12px 50px; height: auto; position: fixed; left: 520px;top: 35.5%; }
#event h2{background: none; text-align: center; float: none; margin: 0; border-bottom: 5px solid #fff; border-right: 0; position: absolute;top: 0; left: 0;
height: 25px; width: 435px;}
#event p{text-align: center; margin: 10px 0; font-size:1em; line-height: 1.3em }
#event .contSc{width: 432px;}
#event .detail ul{border-top: 5px solid #fff;border-bottom: 5px solid #fff; margin: 5px 0;min-height: 75px; display: none; }
#event .detail img{width: 97%; height: auto;}
#event .detail ul li{width: 234px; text-align: center;float: left;}
#event .detail ul li a{color: #61647d; font-size: 1.28em; text-transform: uppercase;}
#event .detail ul li a:hover, #event .detail ul li.active a{color: #1d2044}
.sport_result{padding: 10px;}
.sport_result div{display: none}
.sport_result div.active{display: block;}
/*_-_-_ Gallery _-_-_*/
#gallery.section{width: 834px;height: 665px; padding: 10px;margin: 3% auto 0;background: url(../img/bg_white.png); overflow: hidden; position: relative;}
.gallery-container{ width: 834px; height: 665px; overflow: hidden; position: relative; background-color: #333 }
.menuSlider li{margin-bottom: 8px;text-align: center;}
.menuSlider{width: 115px; height: 173px;padding:49px 30px 0 20px;  background: url(../img/the_hoxton_bg_menu_gallery.png) no-repeat; position: absolute; top: 200px; right: -135px;z-index: 1000}
.menuSlider a{text-transform: uppercase; font-size: 1.28em; padding-left: 15px;/*text-shadow: 0px 0px 2px #000000;
        filter: dropshadow(color=#000000, offx=0, offy=0);*/ }


.menuSlider ul li a{color: #fff}
.menuSlider ul:hover li a{color: #b9bdc7}
.menuSlider .active a, .menuSlider ul:hover li:hover a{color: #fff}
/*----- SLIDER -----*/
.nivoSlider {
  position:relative;
  width:100%;
  height:auto;
  overflow: hidden;
}
.nivoSlider img {
  position:absolute;
  top:0px;
  left:0px;
}
.nivo-main-image {
  display: block !important;
  position: relative !important; 
  width: 100% !important;
}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  margin:0;
  z-index:6;
  display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
  display:block;
  position:absolute;
  z-index:5;
  height:100%;
  top:0;
}
.nivo-box {
  display:block;
  position:absolute;
  z-index:5;
  overflow:hidden;
}
.nivo-box img { display:block; }

/* Caption styles */
.nivo-caption {
  position:absolute;
  left:0px;
  bottom:0px;
  background:#000;
  color:#fff;
  width:100%;
  z-index:8;
  padding: 5px 10px;
  opacity: 0.8;
  overflow: hidden;
  display: none;
  -moz-opacity: 0.8;
  filter:alpha(opacity=8);
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}
.nivo-caption p {
  padding:5px;
  margin:0;
}
.nivo-caption a {
  display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
  position:absolute;
  top:45%;
  z-index:9;
  cursor:pointer;
}
.nivo-prevNav {
  left:0px;
}
.nivo-nextNav {
  right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
  text-align:center;
  padding: 15px 0;
  display: none;
}
.nivo-controlNav a {
  cursor:pointer;
}
.nivo-controlNav a.active {
  font-weight:bold;
}


.theme-default .nivoSlider {
  position:relative;
  background:#fff url(../img/loading.gif) no-repeat 50% 50%;
    margin-bottom:50px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
  position:absolute;
  top:0px;
  left:0px;
  display:none;
  width: 834px; height: 666px;
}
.theme-default .nivoSlider a {
  border:0;
  display:block;
}

.theme-default .nivo-controlNav {
  text-align: center;
  padding: 20px 0;
}
.theme-default .nivo-controlNav a {
  display:inline-block;
  width:22px;
  height:22px;
  background:url(../img/bullets.png) no-repeat;
  text-indent:-9999px;
  border:0;
  margin: 0 2px;
}
.theme-default .nivo-controlNav a.active {
  background-position:0 -22px;
}

.theme-default .nivo-directionNav a {
  display:block;
  width:23px;
  height:26px;
  background:url(../img/arrows.png) no-repeat;
  text-indent:-9999px;
  border:0;
  position: absolute;
  top:625px;
  z-index:100;
  display: none;
}
.theme-default a.nivo-nextNav {
  background-position:0 0;
  right:15px;
}
.theme-default a.nivo-prevNav {
  left:25px;
  background-position:0 -26px;
}

.theme-default .nivo-caption {
    font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
    color:#fff;
    border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
    color:#fff;
}

.theme-default .nivo-controlNav.nivo-thumbs-enabled {
  width: 100%;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
  width: auto;
  height: auto;
  background: none;
  margin-bottom: 5px;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
  display: block;
  width: 120px;
  height: auto;
}
.nivoSlider{visibility: hidden; display: none;}
.nivoSlider.active{visibility: visible; display: block;}
/*_-_-_ Contact _-_-_*/
#contact .detail{width: 100%; position: fixed; left: 490px; top: 35%;  height: 230px;padding: 15px 65px 20px; background: url(../img/bg_white_line.png) repeat-x}
#contact .detail p{ letter-spacing: 0.01em;}
#contact .info_contact{padding-top: 0px; text-align: center; font-size: 1.28em; width: 41%;font-weight: bold;}
#contact .info_contact span{font-size: 12px;}
#contact .info_contact a{color: #1D2044}

/*-_-_- SCROLL -_-_-*/
.scroll-pane{width:442px; height: 400px;position: relative;
top: 32px;
 }
 .jspPane{margin-left: 0!important; position: relative;}
.jspTrack{position: absolute;
right: 8px;
top: 0;
z-index: 10000;
width: 10px;
background: #B2B0B1;}
.jspDrag{top: 0px;
width: 4px;
background-color: #757472;
position: relative;
left: 3px;}
.jScrollPaneContainer {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.jScrollPaneTrack {
  position: absolute;
  cursor: pointer;
  right: 0;
  top: 0;
  height: 100%;
  background: #aaa;
}
.jScrollPaneDrag {
  position: absolute;
  background: #666;
  cursor: pointer;
  overflow: hidden;
}
.jScrollPaneDragTop {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.jScrollPaneDragBottom {
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
a.jScrollArrowUp {
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  text-indent: -2000px;
  overflow: hidden;
  /*background-color: #666;*/
  height: 9px;
}
a.jScrollArrowUp:hover {
  /*background-color: #f60;*/
}

a.jScrollArrowDown {
  display: block;
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: 0;
  text-indent: -2000px;
  overflow: hidden;
  /*background-color: #666;*/
  height: 9px;
}
a.jScrollArrowDown:hover {
  /*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
  /*background-color: #f00;*/
}


/*LIghtbox*/
/* line 6, ../sass/lightbox.sass */
#lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
  opacity: 0.3;
  display: none;
}

/* line 15, ../sass/lightbox.sass */
#lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
  font-weight: normal;
}
/* line 24, ../sass/lightbox.sass */
#lightbox img {
  width: auto;
  height: auto;
}
/* line 27, ../sass/lightbox.sass */
#lightbox a img {
  border: none;
}

/* line 30, ../sass/lightbox.sass */
.lb-outerContainer {
  position: relative;
  background-color: transparent;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

/* line 39, ../sass/lightbox.sass */
.lb-container {
  padding: 10px;
}

/* line 42, ../sass/lightbox.sass */
.lb-loader {
  position: absolute;
  top: 40%;
  left: 0%;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

/* line 51, ../sass/lightbox.sass */
.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

/* line 59, ../sass/lightbox.sass */
.lb-container > .nav {
  left: 0;
}

/* line 62, ../sass/lightbox.sass */
.lb-nav a {
  outline: none;
}

/* line 65, ../sass/lightbox.sass */
.lb-prev, .lb-next {
  width: 49%;
  height: 100%;
  background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
  /* Trick IE into showing hover */
  display: block;
}

/* line 72, ../sass/lightbox.sass */
.lb-prev {
  left: 0;
  float: left;
}

/* line 76, ../sass/lightbox.sass */
.lb-next {
  right: 0;
  float: right;
}

/* line 81, ../sass/lightbox.sass */
.lb-prev:hover {
  background: url(../images/prev.png) left 48% no-repeat;
}

/* line 85, ../sass/lightbox.sass */
.lb-next:hover {
  background: url(../images/next.png) right 48% no-repeat;
}

/* line 88, ../sass/lightbox.sass */
.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  position: relative;
top: -432px;
right: -13px;
z-index: 200;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -ms-border-bottom-left-radius: 4px;
  -o-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -ms-border-bottom-right-radius: 4px;
  -o-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

/* line 95, ../sass/lightbox.sass */
.lb-data {
  padding: 0 10px;
  color: #bbbbbb;
}
/* line 98, ../sass/lightbox.sass */
.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}
/* line 103, ../sass/lightbox.sass */
.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}
/* line 107, ../sass/lightbox.sass */
.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 11px;
}
/* line 112, ../sass/lightbox.sass */
.lb-data .lb-close {
  width: 35px;
  float: right;
  padding-bottom: 0.7em;
  outline: none;
}
/* line 117, ../sass/lightbox.sass */
.lb-data .lb-close:hover {
  cursor: pointer;
}

/* ==========================================================================
   Audio Player
   ========================================================================== */
.prototype-wrapper {
  width:20px;
  height: 20px;
  position: fixed;
  bottom: 50px; right: 50px;
}
.cp-container {
  position:relative;
  width:20px; /* 200 - (2 * 48) */
  height:20px;


}

.cp-container :focus {
  border:none;
  outline:0;
}

.cp-buffer-1,
.cp-buffer-2,
.cp-progress-1,
.cp-progress-2 {
  display: none;
  position:absolute;
  top:0;
  left:0;
  width:104px;
  height:104px;
  clip:rect(0px,52px,104px,0px);

  -moz-border-radius:52px;
  -webkit-border-radius:52px;
  border-radius:52px;
}

.cp-buffer-1,
.cp-buffer-2 {
  background:url("../images/player/buffer.png") 0 0 no-repeat;
}


/* FALLBACK for .progress
 * (24 steps starting from 1hr filled progress, Decrease second value by 104px for next step)
 * (It needs the container selector to work. Or use div)
 */

.cp-container .cp-fallback {
  background:url("../images/player/progress_sprite.jpg") no-repeat;
  background-position:0 104px; 
}

.cp-progress-1,
.cp-progress-2 {
  background:url("../images/player/progress.png") 0 0 no-repeat;
}

.cp-buffer-holder,
.cp-progress-holder,
.cp-circle-control {
  position:absolute;
  width:20px;
  height:20px;
} 

.cp-circle-control {
  cursor:pointer;
}

.cp-buffer-holder,
.cp-progress-holder {
  /*clip:rect(0px,104px,104px,52px);*/
  display:none;
}


/* This is needed when progress is greater than 50% or for fallback */

.cp-buffer-holder.cp-gt50,
.cp-progress-holder.cp-gt50,
.cp-progress-1.cp-fallback{
  clip:rect(auto, auto, auto, auto);
}

.cp-controls {
  margin:0;
  padding:26px;
}

.cp-controls li{
  list-style-type:none;
  display:block;

  /*IE Fix*/
  position:absolute;
}

.cp-controls li a{
  position:relative;
  display:block;
  width:20px;
  height:20px;
  text-indent:-9999px;
  z-index:1;
  cursor:pointer;
}

.cp-controls .cp-play {
  background:url("../images/player/controls.png") 0 -20px no-repeat;
}

.cp-controls .cp-play:hover {
  background:url("../images/player/controls.png") -20px -20px no-repeat;
}

.cp-controls .cp-pause {
  background:url("../images/player/controls.png") 0 0 no-repeat;
}

.cp-controls .cp-pause:hover {
  background:url("../images/player/controls.png") -20px 0  no-repeat;
}

.cp-jplayer {
  width:0;
  height:0;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {

}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *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;
}

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@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) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .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;
    }
}