/*
 * Author:Nicolas Wenger
 * URL:http://www.nicolaswenger.fr
 * Project Name:NW
 * Version:1.0
 */
 
 /* ==========================================================================
   General styles
   ========================================================================== */
   
html,body{padding:0;margin:0;width:100%;height:100%;background:#000}
body{font-family:'Montserrat', sans-serif;font-weight:400;font-size:16px;overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;background-color:#000 display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center}
.visibility-hidden{visibility:hidden}

/* ==========================================================================
   Section Intro Wrap
   ========================================================================== */
.background-wrap{position:absolute;top:0;left:0;width:100%;height:100%;z-index:999}
#intro{position:relative;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;text-align:center;color:#FFF;text-transform:uppercase}
#intro .intro-wrap{padding:40px 15px}
#intro .title{color:#ffffff;padding-top:10px;padding-bottom:20px;letter-spacing:4px;font-size:45px;font-weight:bold;font-weight:700}
#intro .baseline{font-size:16px;font-weight:400;margin-top:10px;margin-bottom:10px}
#intro .buttons{margin-top:60px;text-align:center}

/* ==========================================================================
   Footer
   ========================================================================== */
#social{padding-top:30px;padding-bottom:30px;background-color:#f2f2f2}
#social a{text-align:center;display:block}
#social a i{font-size:30px;color:#4a4a4a;-webkit-transition:all .3s ease-in;-moz-transition:all .3s ease-in;-o-transition:all .3s ease-in;transition:all .3s ease-in}
#social a:hover i{color:#000}

#footer{padding-top:50px;padding-bottom:30px;background-color:#2f2f2f}
#footer .footer-title{font-size:16px;text-transform:uppercase;color:#FFF;font-weight:bold;text-align:center;display:block}

/* ==========================================================================
   Section Portfolio Wrap
   ========================================================================== */
#section-portfolio{background-color:#FFF}
#section-portfolio .title{text-align:center;margin:60px 0;font-size:35px;text-transform:uppercase;font-weight:600}

.col-portfolio{margin-bottom:15px}
.portfolio-wrap{color:#000;padding:30px 0}
.portfolio-wrap .para{margin-bottom:60px}
.portfolio-wrap .para.para-logo, .portfolio-wrap .para.para-site, .portfolio-wrap .para.para-title{text-align:center}
.portfolio-wrap .title{font-size:35px;font-weight:600;margin-top:10px;margin-bottom:10px;text-transform:uppercase}
.portfolio-wrap .baseline{font-size:18px;font-weight:600;margin-top:10px;margin-bottom:10px;text-transform:uppercase}
.portfolio-wrap ul{text-align:left !important}
.portfolio-button-close{padding:30px 0 0 0;text-align:center}

/* Portfolio thumb */
.portfolio-thumb{overflow:hidden;position:relative;cursor:pointer}
.portfolio-thumb img{display:block;position:relative;-webkit-transition:all .6s ease-in-out;transition:all .6s ease-in-out;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
.portfolio-thumb .thumb-mask{width:100%;height:100%;position:absolute;overflow:hidden;top:0;left:0;display:flex;flex-direction:column;justify-content:center;opacity:0;overflow:visible;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;transform:translateY(0px)}
.portfolio-thumb .thumb-label{font-size:18px;text-transform:uppercase;font-weight:600;display:block;text-decoration:none;padding:0;text-align:center;width:100%;position:relative;color:#FFF;opacity:0;-webkit-transition:all .5s 0s ease-in-out;-moz-transition:all .5s 0s ease-in-out;-o-transition:all .5s 0s ease-in-out;-ms-transition:all .5s 0s ease-in-out;transition:all .5s 0s ease-in-out;-webkit-transform:translateY(-10px);-moz-transform:translateY(-10px);-o-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px)}
.portfolio-thumb:hover{-moz-transition-delay:.3s;-webkit-transition-delay:.3s;-o-transition-delay:.3s;-ms-transition-delay:.3s;transition-delay:.3s;box-shadow:0 0 5px #aaa}
.portfolio-thumb:hover img{-webkit-transform:scale3d(1.2,1.2,1);transform:scale3d(1.2,1.2,1)}
.portfolio-thumb:hover .thumb-mask{opacity:1;background:rgba(0,0,0,0.6)}
.portfolio-thumb:hover .thumb-label{-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;-moz-transition-delay:.3s;-webkit-transition-delay:.3s;-o-transition-delay:.3s;-ms-transition-delay:.3s;transition-delay:.3s}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn.contact,.btn.download,.btn.more{display:block;margin-left:auto;margin-right:auto;width:100%;z-index:9999;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border-color:#FFF;border-width:2px;background-color:transparent;color:#fff;margin:0 0 15px 0;background-image:-webkit-linear-gradient(45deg, #FFFFFF 50%, transparent 50%);background-image:linear-gradient(45deg, #FFFFFF 50%, transparent 50%);background-position:100%;background-size:400%;-webkit-transition:background 300ms ease-in-out;transition:background 300ms ease-in-out;word-spacing:1px;text-transform:uppercase;font-size:12px;font-weight:700;padding:12px 22px;-webkit-transition:all .3s ease-in;-moz-transition:all .3s ease-in;-o-transition:all .3s ease-in;transition:all .3s ease-in}
.btn.download{background-color:#FAAF40;border-color:#FAAF40;border-width:0;padding:14px 26px;background-image:-webkit-linear-gradient(45deg, #FAAF40 50%, transparent 50%);background-image:linear-gradient(45deg, #FAAF40 50%, transparent 50%)}
.btn.contact:hover,.btn.download:hover{color:#000;background-position:0}
.btn.more{display:flex;flex-direction:column;justify-content:center;z-index:999;border-width:0;padding:0;position:absolute;outline:none;bottom:5px;width:60px;height:60px;left:50%;margin-left:-30px;text-align:center}
.btn.more > .glyphicon{color:#FFF;font-size:20px;margin:0 19px;display:inline-block;width:22px;-webkit-animation:floating-arrow 1.6s infinite ease-in-out 0s;-moz-animation:floating-arrow 1.6s infinite ease-in-out 0s;animation:floating-arrow 1.6s infinite ease-in-out 0s}

/* ==========================================================================
  	Rotator jQUery Plugin
   ========================================================================== */
.morphext > .animated{display:block}

@media (min-width:768px){ 
.col-portfolio{margin-bottom:30px}
#intro .title{font-size:80px}
#intro .baseline{font-size:18px;font-weight:400;margin-top:10px;margin-bottom:10px}
#section-portfolio .title{font-size:36px;font-weight:600}
.btn.contact,.btn.download{display:inline-block;width:auto;font-size:14px;padding:16px 27px}
.btn.download{margin-right:15px;padding:18px 29px}
.morphext > .animated{display:inline-block}
#social{padding-top:50px;padding-bottom:50px;margin-top:50px}
#social a i{font-size:40px}
#footer{padding-top:70px;padding-bottom:50px}
}

@-webkit-keyframes floating-arrow{
  from{
    -webkit-transform:translateY(-4px);
    transform:translateY(-4px)}
  65%{
    -webkit-transform:translateY(4px);
    transform:translateY(4px)}
  to{
    -webkit-transform:translateY(-4px);
    transform:translateY(-4px)} }
@keyframes floating-arrow{
  from{
    -webkit-transform:translateY(-4px);
    transform:translateY(-4px)}
  65%{
    -webkit-transform:translateY(4px);
    transform:translateY(4px)}
  to{
    -webkit-transform:translateY(-4px);
    transform:translateY(-4px)} }
@-webkit-keyframes floating-arrow-up{
  0%{
    -webkit-transform:translateY(0px);
    transform:translateY(0px)}
  25%{
    -webkit-transform:translateY(4px);
    transform:translateY(4px)}
  75%{
    -webkit-transform:translateY(-4px);
    transform:translateY(-4px)} }
@keyframes floating-arrow-up{
  0%{
    -webkit-transform:translateY(0px);
    transform:translateY(0px)}
  25%{
    -webkit-transform:translateY(4px);
    transform:translateY(4px)}
  75%{
    -webkit-transform:translateY(-4px);
    transform:translateY(-4px)} }
	
/* ==========================================================================
  	Progress bar
   ========================================================================== */
.progress{height:300px;background-color:transparent}
.progress > svg{height:100%;display:block}
#progress{height:30px;position:absolute;top:-25px;left:0;width:100%;z-index:1000;overfow:hidden}