/* ==========================================================================
   Base
   ========================================================================== */
html,body{min-height:100%;}
body {
   font-family: 'PlutoSansExtraLight';
   font-size: 18px;
   line-height: 26px;
   text-rendering: optimizeLegibility;
}
.header-background-image {
   width: 100%;
   height: 100%;
   margin: 0 auto;
   position: absolute;
   -webkit-background-size: cover!important;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover!important;
   background-attachment: fixed!important;
   background: url(../img/background.jpg) top center no-repeat;
}
.container{
   position: relative;
}

.clear{
   clear: both;
}

ul.row{
   margin-left: -30px;
}

a:hover{
   text-decoration: none;
}

.center{
   text-align: center;
}

/* =============================================================================
   Header
   ========================================================================== */

.page-header{
   border: none;
}

.banner { 
   position: fixed; 
   width:100%; 
   z-index:3;
   background: #3b454a;
   height: 90px;
   top:-90px;
}

   /* hgroup */
   .page hgroup h1,
   .single hgroup h1{
      font-size: 18px;
      font-family: "PlutoSansThin";
      font-weight: 100;
      color: #99e1da;
   }
   .page hgroup,
   .single hgroup{
      text-align: center;
   }

   /* homepage */
   .home.page hgroup{
      color: #befff9;
      font-weight:normal;
      text-align: center;
      padding:100px 0;
   }
      
      .home.page hgroup h1{
         font-size: 112px;
         font-family: "PlutoSansThin";
         text-transform: uppercase;
         letter-spacing: -7px;
         font-weight: 100;
      }
      .home.page hgroup h2{
         font-size: 18px;
         font-family: "PlutoSansThin";
         font-weight: 100;
         color: #99e1da;
      }

      .home.page .page-header p{
         color: #befff9;
         font-family: "PlutoSansThin";
         text-align:center;
         width: 270px;
         margin: 0 auto;
         background: url(../img/bottom-arrow.png) center bottom no-repeat;
         padding-bottom: 140px;
      }



   /* navigation */

   /* pour les pages hors homepage on affiche le menu et pas le blason */
      .page .wrap.blason,
      .single .wrap.blason { display: none; }
      .page .banner,
      .single .banner{ top:0; }
      .page .wrap.container,
      .single .wrap.container{ padding-top: 120px; text-align: center; }
      .page .wrap.content,
      .single .wrap.content{ padding-top: 30px; }
      .home.page .wrap.content{ padding-top: 0; }

      header.banner a.brand,
      header.banner nav{
         position: relative;
      }

      header.banner .container{
         padding: 30px 0 0 0;
      }

      a.brand{
         float: left;
         color: white;
         font-family: "PlutoSansThin";
         font-size: 30px;
         letter-spacing: -3px;
      }
      a.brand strong{
         font-family: "PlutoSansBold";
      }

      header.banner nav{
         float: right;
      }

      header.banner nav a{
         color: #befff9;
      }
      header.banner nav li.active a,
      header.banner nav li.active a:hover,
      header.banner nav a:hover{
         color: #3b454a;
         background: #befff9;
         -webkit-border-radius: 0;
         -moz-border-radius: 0;
         border-radius: 0;
      }
      .home.page .banner{
         display: block;
         top: -90px;
      }
      .home.page .wrap.blason{
         display: block;
      }
      .home.page .wrap.container{
         padding-top: 60px;
      }

      .home.page .wrap.blason{
         width:100%;
         position: fixed;
         z-index: 4;
      }

      #blason{
         display: block;
         width: 43px;
         height: 91px;
         margin: 0 auto;
         position: relative;
      }
         #blason a{
            background: url(../img/blason.png);
            display: block;
            width: 43px;
            height: 91px;
            text-indent: -99999px;
         }



/* ==========================================================================
   Content
   ========================================================================== */

.container{ clear: both; }
.content { 
   background: white;
   position: relative;
}
   .content.grey{      
      background: #3b454a url(../img/grey.png);
      color: #befff9;
      font-family: "PlutoSansThin";
   }
   .home.page .content.grey{
      padding: 170px 0;
   }

   .home .content.grey .span12.deco{
      margin-top: -120px;
   }

   .home .content.blog{
      background: #f6f6f6;
      padding: 40px 0;
      margin-top: 40px;
   }

   .home .content.contact{
      padding-bottom: 30px;
   }

   nav.gotoportfolio{
      display: block;
      background: #3b454a;
      padding: 10px 0;
      height: 28px;
   }

      nav.gotoportfolio a{
         float: right;
         color: white;
         font-family: "PlutoSansThin";
         padding-right: 10px;
      }

      nav.gotoportfolio span{
         display: inline-block;
         float: left;
         padding-right: 10px;
      }

      nav.gotoportfolio i{
         display: inline-block;
         background: #befff9 url(../img/right-arrow.png) 10px center no-repeat;
         height:27px;
         width: 120px;
      }

      .home .content #intro,
      .home .content #contact{
         padding: 200px 0 0 0;
      }
      .home .content #contact{
         background: #befff9;
      }

      .home .content.blog article{
         background: white;
         border:1px solid #e0e0e0;
         width: 328px;
         padding: 20px;
      }

      .home .content.blog article h1{
         font-family: "PlutoSansBold";
         font-size: 18px;
      }

      .home .content.blog article a{
         float: right;
         color: #3b454a;
         font-family: "PlutoSansThin";
         margin-right: -20px;
      }

      .home .content.blog article a span{
         display: inline-block;
         float: left;
         padding-right: 10px;
      }

      .home .content.blog article a i{
         display: inline-block;
         background: #3b454a url(../img/right-arrow-blog.png) 10px center no-repeat;
         height:27px;
         width: 120px;
      }

      .page-contact .main{
         text-align: center;
      }

/* ==========================================================================
   Primary Content
   ========================================================================== */

.main {
   padding: 0 0 80px 0;
}

.main h3,
.main h3 a{
   font-family: "PlutoSansThin";
   font-weight: 100;
   font-size: 28px;
   color:#3b454a;
}
   
   .main h3 em{
      font-family: "PlutoSansBold";
      font-style: normal;
   }

.page .main h3{
   padding: 40px 0;
   text-align: center;
}

#portfolio-preview li{
   float: left;
   margin-bottom: 30px;
}

#skills-graphic h3,
#skills-development h3{
   font-family: "PlutoSansBold";
   font-size: 30px;
   width: 100%;
}

#skills-graphic h3 i,
#skills-development h3 i{
   display: inline-block;
   height: 100px;
   width: 100px;
   margin-right: 30px;
}

.home #contact{
   text-align: center;
}

#schmilblick{
   background: #3b454a url(../img/left-arrow-contact.png) left center no-repeat;
   font-family: "PlutoSansExtraLight";
   color: white;
   font-size: 18px;
   border: none;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   border-radius: 0;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
   width: 50%;
   height: 70px;
   padding: 0 50px 0 20px;
   margin-top: 100px;
}

#contact button{
   height: 70px;
   background: #30393e;
   width: 40px;
   text-align: center;
   border: none;
   margin: 76px 0 0 -44px;
}

#intro p{
   padding-bottom: 40px;
}

#contact p{
   margin-top: 20px;
}

#contact #bottom-contact{
   background: white url(../img/bottom-contact.png) repeat-x;
   display: block;
   height: 7px;
   margin-top: 200px;
}

#contact #social{
   width: 144px;
   display: block;
   margin: 0 auto;
   padding-top: 100px;
}
#contact #social li{
   float: left;
   margin: 0 20px;
}

a.suggestion{
   color:#8d0000;
}


   /* page contact */

   .page-contact textarea,
   .page-contact input[type="text"],
   .page-contact input[type="email"]{

      font-family: "PlutoSansThin";
      color:#befff9;
      border:none;
      outline:none;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;
   }

   .page-contact button#contact-submit{
      background: #befff9;
      font-family: "PlutoSansThin";
      color:black;
      border:none;
      height: 40px;
      font-size: 18px;
   }

   /* parsley */
   .parsley-error-list{
      position: absolute;
      margin-top: -49px;
      list-style-type: none;
      background: black;
      padding: 15px 30px;
      margin: 0;
      margin-top: -49px;
   }


/* portfolio */

      .view {
         width: 360px;
         height: 260px;
         display: block;
         border: 10px solid #fff;
         overflow: hidden;
         position: relative;
         text-align: center;
         -webkit-box-shadow: 1px 1px 2px #e6e6e6;
         -moz-box-shadow: 1px 1px 2px #e6e6e6;
         box-shadow: 1px 1px 2px #e6e6e6;
      }
      .view .mask,
      .view .content {
         width: 360px;
         height: 260px;
         position: absolute;
         overflow: hidden;
         top: 0;
         left: 0;
      }
      .view img {
         display: block;
         position: relative;
      }
      .view span.button{
         background: #befff9;
         display: block;
         margin: 0 auto;
         width: 60%;
         text-align: center;
         color:#3b454a;
         padding: 15px 0;
         margin-top: 100px;
      }
      /* FX */
      .view-tenth img {
         -webkit-transform: scaleY(1);
         -moz-transform: scaleY(1);
         -o-transform: scaleY(1);
         -ms-transform: scaleY(1);
         transform: scaleY(1);
         -webkit-transition: all 0.3s ease-in-out;
         -moz-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
         -ms-transition: all 0.3s ease-in-out;
         transition: all 0.3s ease-in-out;
      }
      .view-tenth .mask {
         background-color: rgba(59, 69, 74, 0.8);
         -webkit-transition: all 0.2s linear;
         -moz-transition: all 0.2s linear;
         -o-transition: all 0.2s linear;
         -ms-transition: all 0.2s linear;
         transition: all 0.2s linear;
         -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
         filter: alpha(opacity=0);
         opacity: 0;
      }
      .view-tenth:hover img {
         -webkit-transform: scale(1.2);
         -moz-transform: scale(1.2);
         -o-transform: scale(1.2);
         -ms-transform: scale(1.2);
         transform: scale(1.2);
      }
      .view-tenth:hover .mask {
         -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
         filter: alpha(opacity=100);
         opacity: 1;
      }




/* ==========================================================================
   Sidebar
   ========================================================================== */

.sidebar { }



/* ==========================================================================
   Posts
   ========================================================================== */

.hentry header { }
.hentry time { }
.hentry .byline { }
.hentry .entry-content { }
.hentry footer { }



/* ==========================================================================
   Footer
   ========================================================================== */

footer{
   background: #3b454a;
   padding: 40px 0;
   color: #befff9;
}
.content-info { }
.content-info a{
   color:#befff9;
}

footer ul,
footer ol{
   list-style: none;
}

footer .menu li{
   padding: 10px 0;
}

footer .span4.pull-right{
   text-align: right;
}

#top{
   position: fixed;
   width: 41px;
   height: 35px;
   text-align: center;
   background: #3b454a;
   bottom: 0;
   right: 40px;
   z-index: 10000000;
   padding-top: 6px;
   display: none;
}
#mail-iphone{
   position: fixed;
   width: 41px;
   height: 35px;
   text-align: center;
   background: #3b454a;
   top: 0;
   z-index: 10000000;
   padding-top: 6px;
   display: none; 
}

/* ==========================================================================
   WordPress Generated Classes
   See: http://codex.wordpress.org/CSS#WordPress_Generated_Classes
   ========================================================================== */

.aligncenter { display: block; margin: 0 auto; }
.alignleft { float: left; }
.alignright { float: right; }
figure.alignnone { margin-left: 0; margin-right: 0; }



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

   @media (min-width: 1200px) {

   }

   @media only screen and (min-width: 980px) and (max-width: 1199px) {
      .home .content.blog article {
         width: 258px;
      }
      .home .main h3 {
         font-size: 20px;
      }
      .home .content.grey {
         padding: 120px 0;
      }
   }

   @media only screen and (min-width: 768px) and (max-width: 979px) {

      /* IPAD */
      .home.page hgroup h1{
         font-size: 70px;
      }      

      #skills-graphic h3 i,
      #skills-development h3 i{
         display: inline-block;
         height: 50px;
         width: 50px;
         margin-right: 20px;
      }
      .home .content #intro, .home .content #contact {
         padding: 140px 0 0 0;
      }
      #intro p {
         padding-bottom: 10px;
      }
      .home .content.blog article {
         width: auto;
         margin-bottom:20px;
      }
   }

   @media only screen and (min-width: 480px) and (max-width: 767px) {

      body{
         padding:0;
      }

      .home.page hgroup h1{
         font-size: 70px;
      }     
      .home .content.blog article {
         width: auto;
      }
      .home .main h3 {
         font-size: 18px;
      }
      #portfolio-preview li{
         text-align: center;
         margin-bottom:20px;
      }
      .home .content.grey {
         padding: 50px 0;
      }
      #skills-graphic,
      #skills-development,
      #intro,
      #contact{
         width: 90%;
         padding: 0 5%;
         margin: 0 auto;
         margin-bottom: 20px;
      }
      .home .content #intro, 
      .home .content #contact {
         padding: 100px 0 0 0;
      }

      #contact #bottom-contact {
         margin-top:110px;
      }
      .home .content.blog article {
         width: auto;
         margin-bottom:20px;
         padding-bottom: 40px;
      }

   }

   @media only screen and (min-width: 0px) and (max-width: 479px) {

      body{
         padding:0;
         background: url(../img/background-iphone.jpg) top center no-repeat;
      }
      .home.page hgroup{
         padding:50px 0;
      }
      .home.page .page-header p {
         padding-bottom: 40px;
         padding-top: 60px;
      }
      nav.gotoportfolio a{
         font-family: "PlutoSansBold";
      }
      .home.page .wrap.container{
         padding-top:0;
      }
      .header-background-image {
         display: none;
      }
      .home.page hgroup h1{
         font-size: 40px;
         letter-spacing: 0;
      } 

      .home.page hgroup h2,
      .home.page hgroup h3{
         line-height: 14px;
      }

      .home.page hgroup h2{
         padding:10px 0;
      }

      .home.page .content.blog article {
         width: auto;
      }

      .home.page .wrap.blason{
         display: none;
      }
      .page header.banner,
      .single header.banner{
         position: relative;
         top:0!important;
         background: none;
      }

      .home .content.grey {
         padding: 60px 0;
      }
      #skills-graphic,
      #skills-development,
      #intro,
      #contact{
         width: 90%;
         padding: 0 5%;
         margin: 0 auto;
         margin-bottom: 20px;
         text-align: center;
      }
      #skills-graphic h3 i,
      #skills-development h3 i{
         display: block;
         height: 50px;
         width: 50px;
         margin: 0 auto;
         padding: 0 0 20px 0;
      }
      #skills-graphic p,
      #skills-development p,
      #intro p{
         text-align: left;
      }   

      #skills-graphic p span,
      #skills-development p span{
         display: block;
         clear: both;
         width: 100%;
         height: 30px;
         padding: 10px 0;
         float: none;
      }
      .home .content #intro, 
      .home .content #contact {
         padding: 70px 0 0 0;
      }

      #contact #bottom-contact {
         margin-top:80px;
      }
      .home .content.blog {
         margin-top: 0;
      }
      .home .content.blog article {
         width: auto;
         margin-bottom:20px;
         padding-bottom: 40px;
      }
      .page .wrap.container,
      .single .wrap.container {
         padding:0;
      }
      a.brand{
         float:none;
         text-align: center;
      }
      header.banner .container {
         padding: 90px 0 0 0;
         text-align: center;
      }
      .home.page header.banner .container {
         padding: 130px 0 0 0;
         text-align: center;
      }
      .nav-tabs>li, .nav-pills>li {
         float:none;
      }
      .mean-container .mean-bar {
         position: fixed;
      }
      .mean-bar a.meanmenu-reveal{
         left: 0!important;
      }
      .mean-container a.meanmenu-reveal span {
         background-color: #befff9;
      }
      #top{
         display: block;
         width: 41px;
         height: 35px;
         top: 0;
         right: 0;
         padding-top: 6px;
         background: none;
      }
      #mail-iphone{
         display: block;
         width: 41px;
         height: 35px;
         top: 0;
         right: 0;
         padding-top: 6px;
         background: none;
         left:50%;
         margin-left:-21px;   
         background: url(../img/icon-mail-iphone.png) center center no-repeat;
      }
      footer .span4.pull-right{
         padding-top: 40px;
         text-align: left;
      }
      footer .span4.pull-right img{
         display: none;

      }
      #portfolio-preview li{
         margin: 0 auto;
         margin-bottom: 30px;
      }
      /* portfolio */
      .view {
         border:none;
         width: 100%;
         height: auto;
      }
   }

/* AWWWARDS */

/* --- Awwwards Ribbons --- */

/* Base */

#awwwards {
   position:absolute;
   top:40px;
   z-index:9999;
}

/* Left */

#awwwards.left {
   left:0;
}

/* Right */

#awwwards.right {
   right:0;
}

/* Link */

#awwwards a {
   display:block;
   width:70px;
   height:105px;
   text-indent:-8000px;
   background-repeat:no-repeat;
   background-position: 0 0;
   overflow:hidden;
}

/* Black */

#awwwards.left.black a {
   background-image:url('/assets/img/ribbons/awwwards_nominee_black_left.png');
}
#awwwards.right.black a {
   background-image:url('/assets/img/ribbons/awwwards_nominee_black_right.png');
}

/* White */

#awwwards.left.white a {
   background-image:url('/assets/img/ribbons/awwwards_nominee_white_left.png');
}
#awwwards.right.white a {
   background-image:url('/assets/img/ribbons/awwwards_nominee_white_right.png');
}

/* Green */

#awwwards.left.green a {
   background-image:url('/assets/img/ribbons/awwwards_nominee_green_left.png');
}
#awwwards.right.green a {
   background-image:url('/assets/img/ribbons/awwwards_nominee_green_right.png');
}


/* MEDIA QUERIES */

/* Landscape phone to portrait tablet */

@media (max-width: 767px) {

   /* hidden */
   #awwwards {
      display: none;
   }

}

/* Retina Displays */

/* Target any device with retina display (ie iPad 3 and MacBook Pro) */

@media 
only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {

   #awwwards a {
      -moz-background-size: 70px 105px;
      -ie-background-size:70px 105px;
      -o-background-size:70px 105px;
      -webkit-background-size:70px 105px;
      background-size:70px 105px;
   }

   /* Gray */

   #awwwards.left.black a {
      background-image:url('/assets/img/ribbons/awwwards_nominee_black_left2x.png');
   }
   #awwwards.right.black a {
      background-image:url('/assets/img/ribbons/awwwards_nominee_black_right2x.png');
   }

   /* White */

   #awwwards.left.white a {
      background-image:url('/assets/img/ribbons/awwwards_nominee_white_left2x.png');
   }
   #awwwards.right.white a {
      background-image:url('/assets/img/ribbons/awwwards_nominee_white_right2x.png');
   }

   /* Green */

   #awwwards.left.green a {
      background-image:url('/assets/img/ribbons/awwwards_nominee_green_left2x.png');
   }
   #awwwards.right.green a {
      background-image:url('/assets/img/ribbons/awwwards_nominee_green_right2x.png');
   }
   
}