@import 'mixins.less';
// Global variables
@pink: deeppink;
@purple: #492583;
@black: #575766;
@siteWidth: 1200px;

// Elements
body{ z-index: 1; width: 100%; height: 100%; margin: 0; background: #F7F7F7; font-family: 'Source Sans Pro', sans-serif; font-weight: 300; font-size: 18px; line-height: 1.666666667; }
a{ color: @purple; text-decoration: none; }
p{ margin: 0 0 1em 0; }
ul{ margin: 0; padding: 0; list-style: none; }
section{  position: relative ; width: 100%; }
strong{ font-weight: 400; }
h1, h2{}

// Main classes
.center{ position: relative; margin: 0 auto; width: @siteWidth; }
.clear{ display: block; clear: both; }

// Header
header{ position: fixed; top: 60px; left: 0; z-index: 50; width: 100%; height: 60px; background: red;
  nav{ position: absolute; right: 0; top: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase;
    ul{ float: left;
      li{ float: left; margin-left: 30px;
        a{ color: #fff; }
      }
      li.active a{ color: @purple; }
    }
  }
  .logo{ width: 250px; top: height:62px; background: url('/public/images/structure/logo.png'); }
}

main { position: fixed; z-index: 160; margin-left: 5%; width: 350px; height: 750px; background-color: @pink; .opacity(50);
}
p {color: #fff; }

.background { position: fixed; top: 0; left: 0; z-index: 0; overflow: hidden;  width: 100%; height: 100%;
  img { position: absolute; top: 0; left: 50%; z-index: 0; }
}

.slider { position: absolute; top:0; left:50%;}