/* 
    Document   : main
    Created on : 2013-03-21, 21:00:16
    Author     : hamahakki
*/

/* Layout
--------------------------------------------------------------*/
#container {
   width: auto;
   height: 100%;
}

header {
   position: fixed;
   width: 220px; /* 320px - 2x50px (padding) */
   padding: 50px;
   height: 100%;
   min-height: 720px;
   z-index: 999;
}

#content {
   margin-left: 320px;
   width: auto;
   height: 100%;
}

/* About Page */
#about-wrapper {
   width: 100%;
}

#client-list {
   float: left;
   width: 50%;
}

#about {
   float: left;
   width: 50%;
}

/* Typography
--------------------------------------------------------------*/
body {
   font-family: 'Open Sans', sans-serif;
   font-size: 0.875em;
   font-weight: 400;
   line-height: 1.5em;
   color: #200B31;
}

h3 {
   font-size: 1.142857em;
   font-weight: 600;
   line-height: 1.5em;
   margin-bottom: 2.5em;
}

/* Nav Style
--------------------------------------------------------------*/
header {
   background: #200B31 url('../img/bg-menu.jpg') no-repeat bottom;
}

#logo a {
   display: inline-block;
   width: 220px;
   height: 110px;
   text-indent: -1000%;
   margin-bottom: 7.142857em; 
   background: #200B31 url('../img/hamahakki-logo.jpg') no-repeat center;
   opacity: 1;
   
   transition: opacity ease 1s;
   -moz-transition: opacity ease 1s;
   -webkit-transition: opacity ease 1s;
   -o-transition: opacity ease 1s;
}

#logo a:hover {
   opacity: 0.5;
}

header nav ul li {
   /*margin-bottom: 1.428571em;*/
}

header nav ul li a {
   display: block;
   position: relative;
   left: 0;
   font-size: 1.428571em;
   text-decoration: none;
   color: #F9F4FD;
   background: transparent;
   line-height: 24px;
   border-bottom: solid 8px #200B31;
   border-top: solid 8px #200B31;
   
   transition: all ease 0.5s;
   -moz-transition: all ease 0.5s;
   -webkit-transition: all ease 0.5s;
   -o-transition: all ease 0.5s;
}

header nav ul li a:hover {
   left: -100%;
   background: #521C7E;      
}

header nav ul li a:hover:after {
   position: absolute;
   content: "---";
}

/* PL - Hover state for menu */
header nav ul li #pl_home:hover:after { content: "Start"; right: -53px;}
header nav ul li #pl_about:hover:after { content: "O mnie"; right: -76px;}
header nav ul li #pl_offer:hover:after { content: "Oferta"; right: -68px;}
header nav ul li #pl_contact:hover:after { content: "Kontakt"; right: -81px}
header nav ul li #pl_blog:hover:after { content: "Blog"; right: -49px;}

/* EN - Hover state for menu */
header nav ul li #en_home:hover:after { content: "Home"; right: -66px;}
header nav ul li #en_about:hover:after { content: "About me"; right: -100px;}
header nav ul li #en_offer:hover:after { content: "Offer"; right: -58px;}
header nav ul li #en_contact:hover:after { content: "Get in touch"; right: -122px}
header nav ul li #en_blog:hover:after { content: "Blog"; right: -49px;}

.active-page {
   transition: none;
   -moz-transition: none;
   -webkit-transition: none;
   -o-transition: none;
}

.active-page:hover {
   left: 0;
   background: transparent;
}

.active-page:after {
   position: absolute;
   content: "";
   color: transparent;
}

.active-page:before {
   position: absolute;
   left: -104%;
   display: inline-block;
   width: 220px;
   content: "---";
   background: #521C7E;
}

#social {
   position: absolute;
   bottom: 230px;
}

#fb,
#tw,
#gp {   
   display: inline-block;
   width: 75px; height: 20px;
   text-indent: -1000%;
   line-height: 0px;
   background: url('../img/social-media-icon.png') no-repeat 0px 0px;
   
   transition: background-position 0.5s;
   -webkit-transition: background-position 0.5s;
   -moz-transition: background-position 0.5s;
   -o-transition: background-position 0.5s;
   -ms-transition: background-position 0.5s;
}

#tw {background-position: 0px -20px;}
#gp {background-position: 0px -40px;}
#fb:hover {background-position: -32px 0px;}
#tw:hover {background-position: -58px -20px;}
#gp:hover {background-position: -57px -40px;}


#copy {
   position: absolute;
   bottom: 150px;
   color: #412954;
}

/* Default Style
--------------------------------------------------------------*/
.clear {
   clear: both;
   display: block;
   overflow: hidden;
   visibility: hidden;
   width: 0;
   height: 0;
}

::selection {
   background: #E6A1F9;
}

body {
   background: url('../img/bg.jpg') no-repeat right top fixed;
}

hgroup {
   margin-left: 5em;
   padding: 2.857142em 0;
}

hgroup h1 {
   font-size: 4.571428em;
   font-weight: 600;
   margin-bottom: 0.3125em;
   line-height: 0.9375em;
}

hgroup h2 {
   font-size: 1.142857em;
   font-weight: 400;
}

#en_lang,
#pl_lang {
   display: inline-block;
   position: fixed;
   right: 20px;
   top: 70px;
   width: 76px;
   height: 41px;
   text-indent: -1000%; 
   z-index: 10;
}

#en_lang {
   background: url('../img/en_lang.png') no-repeat center;
   background-size: 76px 41px;
   
   -webkit-transition: background-size 0.2s ease-in-out; 
   -moz-transition: background-size 0.2s ease-in-out; 
   -o-transition: background-size 0.2s ease-in-out; 
   -ms-transition: background-size 0.2s ease-in-out; 
   transition: background-size 0.2s ease-in-out;
}
#pl_lang {
   background: url('../img/pl_lang.png') no-repeat center;
   background-size: 76px 41px;
   
   -webkit-transition: background-size 0.2s ease-in-out; 
   -moz-transition: background-size 0.2s ease-in-out; 
   -o-transition: background-size 0.2s ease-in-out; 
   -ms-transition: background-size 0.2s ease-in-out; 
   transition: background-size 0.2s ease-in-out;
}

#en_lang:hover,
#pl_lang:hover {
   background-size: 60px 32px;
}

.second-nav {
   width: 100%;
   position: fixed;
   height: 4.285714em;
   padding-left: 1.428571em;
   background: #521C7E;
   z-index: 4;
}

.second-nav ul {
   padding-top: 1.428571em;
   background: #521C7E;
}

.second-nav ul li {
   display: inline-block;
   padding: 0 0.571428em;
   color: #fff;
   border-left: solid 1px #fff;
}

.second-nav ul li:first-child {
   border: none;
   padding-left: 0;
}

.second-nav li a {
   text-decoration: none;
   color: #fff;
}

#filter a {
   position: relative;
}

#filter a:after {
   position: absolute;
   bottom: -5px;
   left: 0;
   width: 0px;
   height: 5px;
   content: "-";
   line-height: 0;
   text-indent: -99999px;
   background: #521C7E;
   
    transition: all ease 0.5s;
   -moz-transition: all ease 0.5s;
   -webkit-transition: all ease 0.5s;
   -o-transition: all ease 0.5s;
}

#filter a:hover:after {
   background: #7427B1;
   width: 100%;
}

#filter .current-filter:after {
   position: absolute;
   bottom: -5px;
   left: 0;
   width: 100%;
   height: 5px;
   content: "-";
   line-height: 0;
   text-indent: -99999px;
   background: #7427B1;
}

#display {   
   position: absolute;
   right: 360px;
   top: 0;
   z-index: 3; 
}

#display li {
   border: none;
   padding: 0;
   margin-left: 5px;
}

#list,
#mosaic {
   display: inline-block;
   width: 20px;
   height: 20px;
   text-indent: -99999px;
   background: url('../img/display-icon.gif') no-repeat 0 0;
   opacity: 1;
   
   -webkit-transition: opacity 0.2s ease-in-out; 
   -moz-transition: opacity 0.2s ease-in-out; 
   -o-transition: opacity 0.2s ease-in-out; 
   -ms-transition: opacity 0.2s ease-in-out; 
   transition: opacity 0.2s ease-in-out;
}

#mosaic {
   background-position: -20px 0px;
}

#list:hover,
#mosaic:hover {   
   opacity: 0.5;
}

#projects-wrapper,
#project,
#offer {
   margin-top: 10em;
}

#cookies-info {
   width: 100%;
   position: fixed;
   bottom: 0;
   padding: 15px;
   text-align: center;
   color: #fff;
   background: #521C7E;
   z-index: 99999;
}

#cookies-info a {
   color: #ECA6FF;
   text-decoration: none;
}

#cookies-info a:hover {
   color: #fff;
}

#cookies-info #accept-cookies {
   margin-left: 0.714285em;
   padding: 0.357142em 0.714285em 0.357142em 0.714285em;
   color: #fff;
   border-radius: 5px;
   background: #854DCF;
   -webkit-transition: color, background 0.2s ease-in-out; 
   -moz-transition: color, background 0.2s ease-in-out; 
   -o-transition: color, background 0.2s ease-in-out; 
   -ms-transition: color, background 0.2s ease-in-out; 
   transition: color, background 0.2s ease-in-out;
}

#cookies-info #accept-cookies:hover {
   color: #210B33;
   background: #FFD24D;
}

/* Index Page Specific Style | List | Mosaic
--------------------------------------------------------------*/
.list > div {
   height: 160px;
   overflow: hidden;
   border-bottom: solid 1px #401562;
   background: rgba(82,28,126, 0.1);
}

.list > div:last-child {
   border: none;
}

.list .client {
   float: left;
   width: 26.171875%;
   max-width: 335px;
   text-align: right;
   background: #32114D;
}

.list .img-list-project {
   position: relative;
   float: left;
   width: 31.25%;
   max-width: 400px;
   overflow: hidden;
}

.list .img-list-project span,
.mosaic .img-list-project span {
   position: absolute;
   right: 20px;
   bottom: 20px;
   width: 21px;
   height: 14px;
   text-indent: -99999px;
   background: url('../img/more-icon.png') no-repeat center;
   z-index: 3;
}

.list .img-list-project a,
.mosaic .img-list-project a {
   display: inline-block;
   background: #32114D;
   text-decoration: none;
   
   -webkit-transition: background 0.5s ease-in-out; 
   -moz-transition: background 0.5s ease-in-out; 
   -o-transition: background 0.5s ease-in-out; 
   -ms-transition: background 0.5s ease-in-out; 
   transition: background 0.5s ease-in-out;
}

.list .img-list-project a:hover,
.mosaic .img-list-project a:hover {
   background: #521C7E;
}

.list .img-list-project a img {
   position: relative;
   left: 0;
   z-index: 2;
   
   -webkit-transition: left 0.5s ease-in-out; 
   -moz-transition: left 0.5s ease-in-out; 
   -o-transition: left 0.5s ease-in-out; 
   -ms-transition: left 0.5s ease-in-out; 
   transition: left 0.5s ease-in-out;
}

.list .img-list-project a:hover img {
   left: -100%;
}

.list .img-list-project a p,
.mosaic .img-list-project a p {
   position: absolute;
   top: 70px;
   left: 40%;
   font-size: 1.428571em;
   color: #fff;
   z-index: 1;
}

.list .info {
   float: left;
   width: 42.578125%;
}

.list .info > div,
.mosaic .info > div {
   padding: 20px;
}

.list .info h3,
.mosaic .info h3 {
   font-size: 1.142857em;
   font-weight: 600;
   text-transform: uppercase;
   margin: 0;
}

.list .info span {
   display: block;
   font-size: 0.857142em;
   margin-bottom: 1.428571em;
}

/* Mosaic */
.mosaic > div {
   float: left;
   width: 400px;
   margin-left: 20px;
   margin-bottom: 20px;
   background: #32114D;
}

.mosaic .client {
   display: none;
}

.mosaic .img-list-project {
   position: relative;
   overflow: hidden;
}

.mosaic .img-list-project a img {
   position: relative;
   top: 0px;
   z-index: 2;
   
   -webkit-transition: top 0.5s ease-in-out; 
   -moz-transition: top 0.5s ease-in-out; 
   -o-transition: top 0.5s ease-in-out; 
   -ms-transition: top 0.5s ease-in-out; 
   transition: top 0.5s ease-in-out;
}

.mosaic .img-list-project a:hover img {
   top: 160px;
}

.mosaic .info h3,
.mosaic .info span {
   color: #fff;
}

.mosaic .info span {
   display: block;
   font-size: 0.857142em;
}

.mosaic .info p {
   display: none;
}

/* About me Page Specific Style
--------------------------------------------------------------*/
#expand {
   width: auto;
   overflow: hidden;
   background: #521C7E;
   margin-bottom: 4.285714em;
}

#about-wrapper {
   margin-bottom: 2.857142em
}

#client-list > div {
   padding: 0 7.5em 1.428571em 1.428571em;
}

#client-list li {
   display: inline;
}

#about > div {
   padding: 0 1.428571em 1.428571em 1.428571em;
}

#about p {
   margin-bottom: 4.285714em;
}

#about li {
   list-style: disc;
   list-style-position: inside;
}

#about #strong,
#about #weak {
   float: left;
   width: 50%;
}

/* Contact me Page Specific Style
--------------------------------------------------------------*/
#map {
   width: 100%;
   height: 100%;
   background: #693f73 url('../img/map-contact.jpg') repeat;
}

#google-maps-copy {
   position: absolute;
   bottom: 20px;
   right: 20px;
   font-size: 0.857em;
   color: #fff;
}

#contact {
   position: absolute;
   top: 0;
   right: 0;
   width: 26.5625%;
   height: 100%;   
   color: #fff;
   background: rgba(82,28,126,0.8);
}

#contact > div {
   padding: 11.428571em 50px 0 50px;
}

#contact p {
   margin-bottom: 1.428571em;
}

#contact a {
   color: #fff;
   text-decoration: none;
}

#contact a:hover {
   color: #ECA6FF;
}

/* Project Page Specific Style
--------------------------------------------------------------*/
#image-slider {
   position: relative;
   overflow: hidden;
   margin-bottom: 4.285714em;
   background: #521C7E;
}

#image-slider h4 {
   position: absolute;
   top: 40px;
   right: 0;
   padding: 0.57142857142857142857142857142857em;
   font-size: 2.285714em;
   font-weight: 600;
   color: #fff;
   background: rgba(82,28,126,0.5);
   z-index: 2;
}

#image-slider #mask {
   position: absolute;
   top: 0;
   left: 711px;
   width: 100%;
   height: 400px;
   background: rgba(82,28,126,0.8);
}

#project-info {
   float: right;
   width: 50%;
   padding-right: 1.428571em;
}

#project-info p {
   margin-bottom: 4.285714em;
}

#back {
   position: absolute;
   right: 360px;
   top: 0;
   padding-top: 1.428571em;
   color: #fff;
   text-decoration: none;
   z-index: 3;
}

#back:hover {
   color: #ECA6FF;
}

/* easySlider */
#slider li{ 
   width: 711px;
   height: 400px;
}

#prevBtn,
#nextBtn { 
   position: absolute;
   display: block;
   width: 41px;
   height: 48px;
   z-index: 3; 
}

#prevBtn {
   top: 176px;
   left: 1.428571em;
   
   -webkit-transition: left 0.3s ease-in-out; 
   -moz-transition: left 0.3s ease-in-out; 
   -o-transition: left 0.3s ease-in-out; 
   -ms-transition: left 0.3s ease-in-out; 
   transition: left 0.3s ease-in-out;
}

#nextBtn {
   top: 176px;
   right: 1.428571em;
   
   -webkit-transition: right 0.3s ease-in-out; 
   -moz-transition: right 0.3s ease-in-out; 
   -o-transition: right 0.3s ease-in-out; 
   -ms-transition: right 0.3s ease-in-out; 
   transition: right 0.3s ease-in-out;
}
													
#prevBtn a,
#nextBtn a {  
   display: block;
   width: 41px;
   height: 48px;
   text-indent: -999999px;
   background: url('../img/slider-bt.png') no-repeat 0 0;  
}

#nextBtn a { 
   background: url('../img/slider-bt.png') no-repeat -41px 0;	
}

#prevBtn:hover {
   left: 1.785714em;
}

#nextBtn:hover {
   right: 1.785714em;
}

#prevBtn:active {
   left: 2.5em;
}

#nextBtn:active {
   right: 2.5em;
}

/* Offer Page Specific Style
--------------------------------------------------------------*/
#offer {
   width: 100%;
   /*overflow: hidden;*/
} 

#offer-wrapper {
   width: 400%;
}

#offer-wrapper > div {
   float: left;
   width: 25%;
}

.parallax-container {
   position: relative;
   overflow: hidden;
   margin-bottom: 4.285714em;
   background: #521C7E;
}

.parallax-container h4 {
   position: absolute;
   top: 40px;
   right: 0;
   padding: 0.57142857142857142857142857142857em;
   font-size: 2.285714em;
   font-weight: 600;
   color: #fff;
   background: rgba(82,28,126,0.5);
   z-index: 2;
}

.offer-info {
   float: right;
   width: 50%;
   padding-right: 1.428571em;
}

.offer-info p {
   margin-bottom: 4.285714em;
}

/* Paralax Plugin */
#parallax-1,
#parallax-2,
#parallax-3,
#parallax-4 {
   position: relative; 
   overflow: hidden; 
   width: 1280px; 
   height: 320px;
}

#parallax-1 {
   background-image: url('../img/parallax/adv-bg.jpg');
}

/*#parallax-2 {
   background-image: url('../img/parallax/adv-bg.jpg');
}

#parallax-3 {
   background-image: url('../img/parallax/adv-bg.jpg');
}*/

#parallax-4 {
   background-image: url('../img/parallax/web-bg.jpg');
}

.parallax-layer {
   position: absolute;
}