/*
Theme Name: Tyrsa
Author: Sébastien Moulène
Description: Tyrsa’s Theme
Version: 2.0
*/


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \
|
|       Copyrigth (c) 2014 Sébastien Moulène 
|       http://www.sebousan.com/
|
\ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@import "css/reset.css";



/* BODY
\ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
body { padding-top:120px; background:url(img/bg.png);  color:#03273a; font-family:"Gotham SSm A", Arial; font-size:9px; text-transform:uppercase; text-rendering:optimizelegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
strong { font-weight:bold; }
em,i { font-style:italic; }
a { color:#03273a; }
header a:hover, li a:hover { opacity:.7; }
h1,h2,h3 {font-size:78px; font-family:'Knockout 27 A','Knockout 27 B'; font-weight:400; }
h1 {text-align:center;margin-bottom:35px;}
h2,h3{margin-bottom:30px;}


/* MAIN
\ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.wrapper { margin:0 auto; width:100%; max-width:1600px; min-width:980px; overflow:hidden; }
.single .wrapper { max-width:1200px; width:75%; }
.hidden { display:none; }


/* HEADER
\ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#header { position:absolute; background:#03273a; min-height:120px; width:100%; top:0; left:0; overflow:hidden; }
#header nav { background:#03273a; z-index:10; position:fixed; height:120px; width:100%; text-align:center; }
#header ul { padding-top:30px; }
#header ul li { display:inline-block; letter-spacing:.9em; margin-right:-9px; height:74px; font-size:10px }
#header ul li a { display:table-cell; color:#fff; font-weight:bold; vertical-align:middle; height:74px; }
#header ol { position:relative; overflow:hidden; height:410px; width:100%; }
#header ol li { position:absolute; background-size:cover; background-repeat:no-repeat; background-position:50% 0; height:410px; width:100%; opacity:0; }
#header ol li.current { opacity:1; }
#logo img { margin:0 39px 0 30px; }

#shop { position: fixed; background: url(img/shop.png); width: 50px; height: 68px; opacity: .6; top: 23px; right: 10px; text-indent: -9999px; z-index: 10; }
#shop:hover { opacity: 1; }


/* HOME
\ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.home { padding-top:410px; }
.home #header nav { background:transparent; }
#page.posts { padding:20px 0; }
#filter { text-align:center; margin-bottom:20px; margin-right:-6px; }
#filter li { display:inline; letter-spacing:.6em; margin:0 20px; }
#filter a { color:#999; font-weight:bold; font-size:10px; }
#filter li.current a { color:#777; }
.home .fluid { margin:0 10px; }
.posts article { float:left; width:50%; overflow:hidden; opacity:1; }
.posts article.hide { opacity:.3; }
.posts article.hide:before { content:''; position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; }
.posts div.post { width:50%; }
.posts article a { display:block; margin:0 10px 20px; position:relative; }
.posts article img { display:block; width:100%; height:100%; }
.posts article .wrapperContent { background:url(img/bg-article.png); top:15px; left:15px; width:calc(100% - 30px); height:calc(100% - 30px); color:#fff; position:absolute; opacity:0; }
.posts article a:hover .wrapperContent { opacity:1; }
.posts article .content { width:100%; text-align:center; position:absolute; top:44% }
.posts article .content h2 { font-size:50px; margin-bottom:10px; }
.posts article .content h3 { font-size:12px; line-height:18px; font-family:"Gotham SSm A"; letter-spacing:1em; padding-left:1em; margin:0; }


/* SINGLE
\ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.single article { padding:50px 0;}
.single article h1 { margin:0; }
.single article h2 { text-align:center; font-size:23px; font-family:"Gotham SSm A"; letter-spacing:1.5em; padding-left:1.5em; margin-bottom:10px; }
.single article p { text-align:center; line-height:14px; margin-bottom:20px; }
.single article ul { margin-bottom:30px; }
.single article li { display:inline; margin-right:60px; letter-spacing:.6em; color:#848484; line-height:20px; height:20px; }
.single article li.fb { float:right; margin:0; position:relative; min-width:80px; text-align:right; }
.single article li.fb:hover .likefb { display:none; }
.single article li.fb .likefb { color:#737373; font-weight:bold; position:absolute; z-index:9; right:0; top:0; line-height:20px; height:20px; padding:0 5px 0 10px; background:#bababa; }
.single article li.fb .likefb:before { content:'|'; background:url(img/like.png) no-repeat; padding-left:13px; margin-right:2px; }
.single article li strong { font-weight:normal; color:#03273a; }
.single article iframe { display:block; margin-bottom:20px; max-width:100%; }
.single article img { display:block; margin-bottom:20px; width:100%; height:auto; }
.single article img.demi { width:calc(50% - 10px); height:auto; float:left; }
.single article img.demi:nth-child(odd) { margin-right:20px; }

#prevNext li { position:fixed; top:40%; font-size:10px; text-transform:uppercase; letter-spacing:.6em; }
#prevNext li a { text-align:center; display:inline-block; width:90px; }
#prevNext li a span { display:block; position:absolute; top:50%; left:-100px; white-space:nowrap; background:url(img/nav.png) no-repeat 50% 100%; padding-bottom:20px; }
#prevNext li a img { display:block; width:90px; height:200px; margin:0 auto; margin-top:25px; }
#prevNext li.prev { left:0; }
#prevNext li.next { right:0; }
#prevNext li.prev a {
    -webkit-transform: translateX(-90px);
       -moz-transform: translateX(-90px);
        -ms-transform: translateX(-90px);
         -o-transform: translateX(-90px);
            transform: translateX(-90px);
}
#prevNext li.prev span {
    left:10px; 
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
}
#prevNext li.next a {
    -webkit-transform: translateX(90px);
       -moz-transform: translateX(90px);
        -ms-transform: translateX(90px);
         -o-transform: translateX(90px);
            transform: translateX(90px);
}
#prevNext li.next span {
    -webkit-transform: rotate(-90deg);
       -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
         -o-transform: rotate(-90deg);
            transform: rotate(-90deg);
}

#prevNext li.prev:hover a, #prevNext li.next:hover a {
    -webkit-transform: translateX(0);
       -moz-transform: translateX(0);
        -ms-transform: translateX(0);
         -o-transform: translateX(0);
            transform: translateX(0);
}


/* PAGE
\ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#contact { padding:45px 0; background:#fff; }
#contact h1 { line-height: 58px }
#contact li { width:33%; display:inline-block; }
#contact li a { width:100%; height:90px; line-height:90px; display:inline-block; font-size:19px; font-weight:700; text-align:center; background:url(img/social.png) no-repeat 50% 0; }
#contact li.facebook a { background-position:50% -185px; }
#contact li.instagram a { background-position:50% -375px; }
.page article { padding:45px 0;}
.page article h2 { margin:0 0 30px; }
.page article p {margin:0 0 50px; line-height:14px; }
.page article p:first-child {margin:0; }
.page article .fr {color:#999; }
.page article .contentAbout { padding: 0 45px; float: left; width: 50%; box-sizing:border-box; }
.page article .contentAbout h2 { line-height: 50px; }
.page article .contentAbout p:last-child { margin-bottom:0; }
.alignright { float:right; padding-right:45px; width: 50%; height: auto; box-sizing:border-box; }

#bottom { clear:both; padding:40px 0 60px; background:#03273a; color:#fff; text-align:center;}
#bottom .col {width:25%; display: inline-block; }
#bottom h4 {font-size:18px;letter-spacing:1.5em; padding-left:1em; margin-right:-15px; margin-bottom:20px; }
#bottom p {font-size:16px;line-height:20px; }
#bottom strong {font-size:50px;font-weight:normal; line-height:70px; font-family:'Knockout 27 A','Knockout 27 B'; }
#bottom a { color:#fff; }
#bottom a:hover { color:#dfdfdf; }

#footer { clear:both; padding:40px 0; background:#fff; color:#818181; overflow:hidden; text-align:center; }
#footer .wrapper { position:relative; }
#footer p { position:absolute; left:20px; top:0; font-size:9px; text-align:left; line-height:14px; }
#footer p.credits { position:absolute; right:20px; left:auto; text-align:right; }
#footer p a { color:#818181; }
#footer #menu li { display:inline-block; margin:0 20px; font-size:9px; padding-left:35px; background:url(img/social-footer.png) no-repeat; line-height:28px; }
#footer #menu li:first-child { display:none; }
#footer #menu li:last-child { background-position:0 100%; }
#footer #menu li a { color:#818181; }
.single #footer p { left:0; }
.single #footer p.credits { left:auto; right:0;  }
.page #footer p { left:45px; }
.page #footer p.credits { left:auto; right:45px;  }

@media screen and (max-device-width : 640px) {
  #footer p {
    max-width:320px;
  }
}


/* ABOUT
\ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */



/* ANIMATION
\ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
header a, li a, #header ol li, .posts article, .posts article a .wrapperContent { 
    -webkit-transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1) 0;
       -moz-transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1) 0;
        -ms-transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1) 0;
         -o-transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1) 0;
            transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1) 0;
    -moz-transition-property: opacity;
    -moz-transition-duration: 600ms;
    -moz-transition-timing: cubic-bezier(0.23, 1, 0.32, 1);
    -moz-transition-delay: 0;
}
#prevNext li a { 
    -webkit-transition: -webkit-transform 600ms cubic-bezier(0.23, 1, 0.32, 1) 0;
       -moz-transition: -moz-transform 600ms cubic-bezier(0.23, 1, 0.32, 1) 0;
        -ms-transition: -ms-transform 600ms cubic-bezier(0.23, 1, 0.32, 1) 0;
         -o-transition: -o-transform 600ms cubic-bezier(0.23, 1, 0.32, 1) 0;
            transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1) 0;
    -moz-transition-property: transform;
    -moz-transition-duration: 600ms;
    -moz-transition-timing: cubic-bezier(0.23, 1, 0.32, 1);
    -moz-transition-delay: 0;
}