/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

RESET

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

html, body, div, span, applet,
object, iframe, h1, h2, h3, h4,
h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd,
q, s, samp, small, strike, strong,
sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details,
embed, figure, figcaption, footer,
header, hgroup, menu, nav, output,
ruby, section, summary,time, mark,
audio, video                            { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; outline: none; }
ol, ul                                  { list-style: none; }
a                                       { text-decoration: none; outline: none }
blockquote, q                           {	quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after                       { content:''; content: none; }
table                                   { border-collapse: collapse; border-spacing: 0; }


/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

FONT FACE

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@font-face {
    font-family: 'MyFutura';
    src: url('/fonts/futura.eot') format('embedded-opentype');
    src: url('/fonts/futura.eot?#iefix') format('embedded-opentype'),
         url('/fonts/futura.woff') format('woff'),
         url('/fonts/futura.ttf')  format('truetype'),
         url('/fonts/futura.svg#svgFontName') format('svg');
}






/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

LAYOUT
FLEXIBLE GRID SYSYTEM

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

html, body                              { height: 100%; }
body                                    { background:#000 url(../images/bg_page.gif); font-family: 'MyFutura',Futura, Helvetica, Arial, sans-serif; color:#efefef; font-weight: 100; font-size: 1em; line-height: 1.5em; }

.container                              { padding: 0 0; overflow: hidden; margin: 0 auto; max-width: 1904px;  }
.border                                 { overflow: hidden; border: 0.25em solid #000; border: 8px #000 solid; }
.work                                   { margin: 0; width: 50%; position: relative; float: left; background: #000 ; border: 8px #000 solid; background: no-repeat center; background-size: cover;
                                          -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; }

.work a                                 { display: block; width: 170px; height: 170px; background: url(../images/bg_btn_play.png) no-repeat center;  position: absolute; left: 50%; top: 50%; margin: -85px 0 0 -85px;  }
.work span                              { display: block; height: 100%; width: 100%; position: absolute; left: 0; top: 0;}
.work .bg                               { background: url(../images/bg_pattern.png); ; }

.logo                                   { width: 100%; height: 100%; position: absolute; z-index: 2000; left: 0; top:0;  }
.logo a                                 {  width: auto; height: auto;}     
.logo img                               { position: absolute; left: 50%; top: 50%; margin: -90px 0 0 -179px;}     

.nav                                    { position:fixed; width: 100px; height: 100%; background: rgba(0,0,0,0.4) no-repeat center; z-index: 1000; top: 0; display: block;}
.prev                                   { left: 0; background-image: url(../images/bg_arrow_prev.png); }
.next                                   { right: 0; background-image: url(../images/bg_arrow_next.png); }

.pagination                             { position:fixed; width: 80px; padding: 0 20px 0 0;  height: 30px; line-height: 30px; text-align: center; background: rgba(0,0,0,0.4); z-index: 1001; bottom: 15px; right: 0; display: block;}

.footer                                 { background: rgba(0,0,0,0.75); box-shadow: 3px 0 3px rgba(0,0,0,0.4); position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; padding: 1.4em 0 1.8em; overflow: hidden; }
.personal                               { font-size: 1.125em; letter-spacing: 0.4em; padding: 0 2em; float: left; }
.personal span                          { font-size: 0.78em; letter-spacing: 0em; padding: 0 1em; border-left: 1px solid #FFF;line-height: 1.125em;}
.contact                                { float: right; padding: 0 1em 0; }
.contact span                           { color:#efefef; letter-spacing: 0em;  border-left: 1px solid #FFF; }
.contact a                              { color:#efefef; padding: 0 1em; }


.velo                                   { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #000; z-index: 3000; }
.player                                 { position: fixed; left: 50%; top: 50%; width: 675px; height: 540px; margin: -270px 0 0 -337px; z-index: 3001; }
.player h2                              { font-size: 0.9em; text-transform: uppercase; }
.player h2 span                         { color: #999; padding: 0 0 0 10px; }
.player .social                         { position: absolute; right: -60px; top: 40px; width: 79px; height: 141px; background: url(../images/bg_social.png) no-repeat center; z-index: 3001; }
.player .social a                       { display: block; width: 75px; height: 60px; margin: 5px 0 12px 2px;}
.close                                  { position: fixed; top: 20px; right: 20px; width: 178px; height: 178px; background: url(../images/bg_btn_back.png) no-repeat center; z-index: 3051; opacity: 0; }



/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

IE 8

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.ie8 .t1                                { position: absolute; left: 7%; top: 0%; width: 41%; margin:0 1%; border: none;  }
.ie8 .t2                                { position: absolute; right: 7%; top: 0%; width: 41%; margin:0 1%; border: none;  }
.ie8 .t3                                { position: absolute; left: 7%; bottom: 0%; width: 41%; margin:0 1%; border: none;  }
.ie8 .t4                                { position: absolute; right: 7%; bottom: 0%; width: 41%; margin:0 1%; border: none;  }

.ie8 .logo                              { background: #000; display: block; position: fixed;}
.ie8 .velo                              { background: url(../images/ie_bg.png) repeat; display: block; position: absolute;}
.ie8 .footer                            { background: url(../images/ie_bg.png) repeat;}
.ie8 .prev                              { background: url(../images/bg_arrow_prev.png) no-repeat center #000; }
.ie8 .next                              { background: url(../images/bg_arrow_next.png) no-repeat center #000; }
.ie8 .nav                               { display: block !important; opacity:1 !important;}


/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

CSS3 TRANSITIONS

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

a                      									{ -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; transition:all 0.3s ease; }



/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

MEDIA QUERIES

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


@media only screen and (max-width : 700px)
{
.logo img                               { position: absolute; left: 50%; top: 60%; margin: -70px 0 0 -140px; width: 280px; height: 139px;}     

.personal                               { float: none; text-align: center; letter-spacing: 0.2em; font-size: 0.8em; padding: 0.3em;}
.contact                                { float: none; text-align: center; font-size: 0.8em; padding: 0.3em; }

.container                              { padding-top: 70px; }
.work                                   { float: none; width: 100% !important; }
.work a                                 { display: block; width: 130px; height: 130px; background: url(../images/bg_btn_play_mobile.png) no-repeat center;  position: absolute; left: 50%; top: 50%; margin: -65px 0 0 -65px;  }


.footer                                 { opacity: 1 !important; padding: 10px 0; z-index: 2000 }

.pagination                             { position:relative; width: 30%; margin:0px auto 0; padding: 0; height: 100px; line-height: 110px; z-index: 1001; display: block; opacity: 1 !important;}
.nav                                    { position:relative; margin:0; width: 35%; height: 80px; background: rgba(0,0,0,0.4) no-repeat center; z-index: 1000; display: block; opacity: 1 !important; }
.prev                                   { float:left; background-image: url(../images/bg_arrow_prev.png);}
.next                                   { float:right; background-image: url(../images/bg_arrow_next.png);}


}

@media only screen and (max-width : 1024px)
{
.close                                  { top: 10px; right: 10px; width: 50px; height: 50px; background: url(../images/bg_btn_back_mobile2.png) no-repeat center;  }
 
}