/*  ==========================================================================
    External Fonts
    ========================================================================== */
    @import url(http://fonts.googleapis.com/css?family=Montserrat|Muli);

/*  ==========================================================================
    Custom styles
    ========================================================================== */
    *, *:before, *:after { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
    html { font-family:'Montserrat',Helvetica,Arial,sans-serif; font-size:62.5%; font-weight:300; background-color:#000; color:#fff; overflow-y:scroll; overflow-x:hidden; }
    body { width:100%; min-height:100%; min-width:320px; padding:0; border:0; margin:0; }

    ::-moz-selection { background:#b3d4fc; text-shadow:none; }
    ::selection { background:#000; color:#fff; text-shadow:none; }

    #curtain { position:fixed; z-index:1000; top:0; right:0; bottom:0; left:0; width:100%; height:100%; background-color:#000; }

    .section { position:relative; width:100%; margin:0 auto; border:5px solid #000; border-bottom:none; }
    .block { display:block; position:absolute; overflow:hidden; color:#fff; text-decoration:none; border:5px solid #000; }

    .block .content { position:relative; }
    .block .content .titlelabel { display:none; z-index:110; position:absolute; bottom:0; width:100%; color:#000; font-size:12px; font-size:1.2rem; background-color:#fff; padding:2px 5px; margin-bottom:10px; }
    .block .content .filter { z-index:100; position:absolute; top:-5px; left:-5px; display:block; background-repeat:no-repeat; background-size:cover; background-position:center center; }
    .block .content .filter.light { opacity:0.3; background-image:url('../img/filter.png'); }
    .block .content .filter.dark { opacity:0; background-color:rgba(0,0,0,0.60); }
    
    .block.dark .filter.dark { opacity:1; }

    .block.focus {  }
    .block.focus .content .titlelabel { display:block; }
    .block.focus .content .filter.dark { opacity:0; }
    .block .content .background { position:absolute; z-index:1; top:0; left:0; display:block; background-repeat:no-repeat; background-size:cover; background-position:center center; }

    #top { border-bottom:0; }
    #top .block { position:relative; top:0; }

    #top #header {}
    #top #header #logo { z-index:50; position:absolute; border:5px solid transparent; }
    #top #header #logo img { width:100%; }
    #top #header .background { }
    #top #detail { display:block; }
    #top #detail .content { height:400px; }
    #top #detail .content .slideshow { display:block; width:100%; height:400px;}
    #top #detail .content .slideshow .royalSlider { width:100%; height:400px; }
    #top #detail .content .slideshow .royalSlider .slide { position:relative; height:400px; background-color:#000; background-repeat:no-repeat; background-size:cover; background-position:center center; }
    #top #detail .content .slideshow .royalSlider .slide .background { position:absolute; z-index:50; width:100%; height:400px; }
    #top #detail .content .slideshow .royalSlider .slide .filter { position:absolute; z-index:100; display:block; width:100%; height:400px; top:0; left:0; background-image:url('../img/filter.png'); background-repeat:no-repeat; background-size:cover; background-position:center center; opacity:0.75; background-color:rgba(0,0,0,.4); }
    #top #detail .content .slideshow .royalSlider .slide .body { position:absolute; z-index:200; width:100%; }
    #top #detail .content .slideshow .royalSlider .slide .body .image { border:10px solid transparent; }
    #top #detail .content .slideshow .royalSlider .slide .body .image img { width:100%; }
    #top #detail .content .slideshow .royalSlider .slide .body .text { border:10px solid transparent; }
    #top #detail .content .slideshow .royalSlider .slide .body .text h1 { font-weight:bold; font-size:24px; font-size:2.4rem; line-height:28px; line-height:2.8rem; text-shadow:0px 0px 4px #000; margin-bottom:15px; }
    #top #detail .content .slideshow .royalSlider .slide .body .text p { font-family:'Muli',Helvetica,Arial,sans-serif; font-weight:normal; font-size:14px; font-size:1.4rem; line-height:22px; line-height:2.2rem; letter-spacing:0.005em; text-shadow:0px 0px 4px #000; margin-bottom:15px; }
    #top #detail .content .slideshow .royalSlider .slide .body .text p a { color:#fff; }
    #top #detail .content .slideshow .royalSlider .slide .body .text a.link { display:block; clear:both; font-family:'Muli',Helvetica,Arial,sans-serif; font-weight:normal; color:#000; font-size:14px; font-size:1.4rem; background-color:#ccc; background-color:rgba(255,255,255,0.65); text-decoration:none; padding:10px; margin-bottom:10px; }
    #top #detail .content .slideshow .royalSlider .slide .body .text a:hover.link { background-color:#fff; }
    
    #top #detail .content .nav { position:absolute; z-index:200; bottom:0; width:100%; list-style:none; padding:0; margin:0; }
    #top #detail .content .nav li { display:block; float:left; width:33.333333%; list-style:none; padding:0; margin:0; padding:0 5px; }
    #top #detail .content .nav li a { display:block; color:#000; font-size:14px; font-size:1.4rem; background-color:#ccc; background-color:rgba(255,255,255,0.65); text-align:center; line-height:20px; text-decoration:none; padding:10px; }
    #top #detail .content .nav li a:hover { background-color:#fff; }
    #top #detail .content .nav li.left { padding-left:0; }
    #top #detail .content .nav li.right { padding-right:0; }

    #grid { border-top:0; border-bottom:0; overflow:hidden; min-width:320px; }

    #bottom { border-top:0; margin-bottom:5px; }
    #bottom .block { position:relative; top:0; }
    #bottom #footer .content .nav { position:absolute; z-index:200; bottom:0; width:100%; list-style:none; padding:0; margin:0; }
    #bottom #footer .content .nav li { display:block; float:left; width:33.333333%; list-style:none; padding:0; margin:0; padding:0 5px; }
    #bottom #footer .content .nav li a { display:block; color:#000; font-size:14px; font-size:1.4rem; background-color:#ccc; background-color:rgba(255,255,255,0.65); text-align:center; line-height:20px; text-decoration:none; padding:10px; }
    #bottom #footer .content .nav li a:hover { background-color:#fff; }
    #bottom #footer .content .nav li.center .address { display:inline; }
    #bottom #footer .content .nav li.center .email { display:none; }
    #bottom #footer .content .nav li.left { padding-left:0; }
    #bottom #footer .content .nav li.right { padding-right:0; }

/*  ==========================================================================
    Media Queries
    ========================================================================== */
    @media (max-width:1024px){
        .section { width:100%; }
    }

    @media (max-width:785px){
        #bottom #footer .content .nav li.center .address { display:none; }
        #bottom #footer .content .nav li.center .email { display:inline; }
    }

    @media (max-width:570px){
        #top #detail .content .slideshow .royalSlider .slide .body .image { border-bottom-width:0; }
        #top #detail .content .slideshow .royalSlider .slide .body .text h1 { font-size:14px; font-size:1.4rem; line-height:18px; line-height:1.8rem; margin-bottom:10px; }
        #top #detail .content .slideshow .royalSlider .slide .body .text p { font-size:10px; font-size:1.0rem; line-height:14px; line-height:1.4rem; letter-spacing:0em; margin-bottom:10px; }
        #top #detail .content .slideshow .royalSlider .slide .body .text a.link { font-size:10px; font-size:1.0rem; line-height:10px; padding:5px; }
        #top #detail .content .nav li a,
        #bottom #footer .content .nav li a { font-size:10px; font-size:1.0rem; line-height:10px; }
    }
/*  ==========================================================================
    CSS Transitions
    ========================================================================== */
    .block .content .filter,
    #detail {
        -webkit-transition-property:opacity;
        -webkit-transition-duration:0.25s;
        -webkit-transition-timing-function:ease-out;
        -moz-transition-property:opacity;
        -moz-transition-duration:0.25s;
        -moz-transition-timing-function:ease-out;
        -o-transition-property:opacity;
        -o-transition-duration:0.25s;
        -o-transition-timing-function:ease-out;
        -ms-transition-property:opacity;
        -ms-transition-duration:0.25s;
        -ms-transition-timing-function:ease-out;
        transition-property:opacity;
        transition-duration:0.25s;
        transition-timing-function:ease-out;
    }

    #top #detail .content .slideshow .royalSlider .slide .body .text a.link,
    #top #detail .content .nav li a,
    #bottom #footer .content .nav li a {
        -webkit-transition-property:backgroundColor;
        -webkit-transition-duration:0.25s;
        -webkit-transition-timing-function:ease-out;
        -moz-transition-property:backgroundColor;
        -moz-transition-duration:0.25s;
        -moz-transition-timing-function:ease-out;
        -o-transition-property:backgroundColor;
        -o-transition-duration:0.25s;
        -o-transition-timing-function:ease-out;
        -ms-transition-property:backgroundColor;
        -ms-transition-duration:0.25s;
        -ms-transition-timing-function:ease-out;
        transition-property:backgroundColor;
        transition-duration:0.25s;
        transition-timing-function:ease-out;
    }

/*    #grid .block .content .background {
        -webkit-transition-property:top;
        -webkit-transition-duration:0.05s;
        -webkit-transition-timing-function:linear;
        -moz-transition-property:top;
        -moz-transition-duration:0.05s;
        -moz-transition-timing-function:linear;
        -o-transition-property:top;
        -o-transition-duration:0.05s;
        -o-transition-timing-function:linear;
        -ms-transition-property:top;
        -ms-transition-duration:0.05s;
        -ms-transition-timing-function:linear;
        transition-property:top;
        transition-duration:0.05s;
        transition-timing-function:linear;
    }*/

/*  ==========================================================================
    Helper classes
    ========================================================================== */
    .ir { background-color:transparent; border:0; overflow:hidden; *text-indent:-9999px; }
    .ir:before { content:""; display:block; width:0; height:150%; }

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


    @media print,
           (-o-min-device-pixel-ratio:5/4),
           (-webkit-min-device-pixel-ratio:1.25),
           (min-resolution:120dppx) {
    }

    @media print {
        * { background:transparent !important; color:#000 !important; 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; }

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