@import url("reset.css");

@font-face {
  font-family: "Aller";
  font-style: normal;
  font-weight: 400;
  src: local("Aller"), url("../font/Aller_Rg.ttf") format("truetype"), url("Aller_Rg.eot");
}

@font-face {
  font-family: "Aller Display";
  font-style: normal;
  font-weight: 400;
  src: local("Aller Display"), local("AllerDisplay"), url("../font/AllerDisplay.ttf") format("truetype"), url("AllerDisplay.eot");
}

@font-face {
  font-family: "OpenSans";
  font-style: normal;
  font-weight: 400;
  src: local("OpenSans"), local("Open Sans"), url("../font/OpenSans-Regular.ttf") format("truetype"), url("OpenSans-Regular.eot");
}

@font-face {
  font-family: "OpenSansBold";
  font-style: normal;
  font-weight: 400;
  src: local("OpenSansBold"), local("Open Sans Bold"), url("../font/OpenSans-Bold.ttf") format("truetype"), url("OpenSans-Bold.eot");
}

body {
     background: url("../img/bg.jpg") no-repeat scroll center top #F2F2F2;
     height: 100%;
     width: 100%;
}

.wrapper {
     margin: 0px auto;
     width: 100%;
}

header.wrapper {
     height: 800px;
}

section.wrapper {
     background: url("../img/starLine.jpg") no-repeat scroll center 0px transparent;
     overflow: hidden;
     padding-top: 83px;
     position: relative;
}

section.wrapper ul {
     overflow: hidden;
     position: relative;
}

section.wrapper ul li {
     float: left;
     width: 1056px;
}

section.wrapper article.product {
     background: url("../img/frame_small.png") no-repeat scroll 0px 0px transparent;
     float: left;
     height: 499px;
     margin: 0px 3px 0px 2px;
     position: relative;
     width: 347px;
}

section.wrapper article.product .articleImg {
     display: block;
     margin: 65px 0px 0px 89px;
     position: relative;
     z-index: -1;
}

section.wrapper article.product .articleLink {
     background: url("../img/productHover.png") no-repeat scroll center center rgba(219, 142, 145, 0.85);
     border: 3px solid #D58A8C;
     height: 316px;
     left: 56px;
     opacity: 0;
     position: absolute;
     top: 29px;
     transition: opacity 0.3s ease 0s;
     width: 235px;
}

section.wrapper article.product .articleLink:hover {
     opacity: 1;
}

section.wrapper article.productBig {
     background: url("../img/frame_big.png") no-repeat scroll 0px 0px transparent;
     width: 698px;
}

section.wrapper article.productBig .articleImg {
     margin: 82px 0px 0px 144px;
}

section.wrapper article.productBig .articleLink {
     height: 313px;
     left: 57px;
     top: 30px;
     width: 584px;
}

section.wrapper article.product .articleDetails {
     background: none repeat scroll 0px 0px #F4F4F4;
     bottom: 61px;
     box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.18), 0px 4px 15px 1px rgba(0, 1, 1, 0.09);
     float: left;
     height: 48px;
     left: 38px;
     padding: 11px 0px 0px 11px;
     position: absolute;
     width: 156px;
}

section.wrapper article.product .articleDetails .articleTitle {
     color: #545454;
     font: 15px/15px "Aller",sans-serif;
}

section.wrapper article.product .articleCategory {
     color: #DC8E91;
     font: 11px/17px "OpenSans",sans-serif;
}

section.wrapper article.product .articleReadMore {
     background: url("../img/sprite.png") no-repeat scroll 0px -141px transparent;
     bottom: 45px;
     float: right;
     height: 69px;
     position: absolute;
     right: 24px;
     color: transparent;
     width: 128px;
}

section.wrapper article.product .articleReadMore:hover {
     background-position: 0px -211px;
}

section.wrapper article.product .articleReadMore:active {
     background-position: 0px -299px;
}

section.wrapper article.productBig .articleDetails {
     margin-top: 106px;
}

section.wrapper article.productBig .articleReadMore {
     margin-top: 106px;
}

aside.wrapper {
     overflow: hidden;
     padding: 25px 20px;
     width: 1020px;
}

aside.wrapper .contactForm {
     float: left;
     margin: 0px;
     position: relative;
     width: 275px;
}

aside.wrapper .contactForm h2 {
     background: url("../img/contactForm.png") no-repeat scroll 0px 0px transparent;
     float: left;
     height: 30px;
     margin: 0px 0px 43px;
     text-indent: -9999px;
     width: 210px;
}

aside.wrapper .contactForm input[type="text"], aside.wrapper .contactForm textarea {
     background: none repeat scroll 0% 0% #FFFFFF;
     border-color: #FFFDFD;
     border-radius: 0px 0px 0px 0px;
     border-style: solid;
     border-width: 1px 0px 0px;
     box-shadow: 0px 2px 5px 0px rgba(100, 100, 100, 0.15), 0px 1px 0.5px 0px rgba(50, 50, 50, 0.08);
     color: #A7A7A7;
     height: 50px;
     margin-bottom: 20px;
     padding-left: 20px;
     width: 100%;
}

aside.wrapper .contactForm textarea {
     height: 205px;
     margin-bottom: 13px;
     padding-top: 20px;
     resize: none;
}

aside.wrapper .contactForm input.invalid[type="text"], aside.wrapper .contactForm textarea.invalid {
     border: 2px solid #DC8E91;
     transition: border 0.1s ease 0s;
}

aside.wrapper .contactForm input[type="text"]:-moz-placeholder, aside.wrapper .contactForm textarea:-moz-placeholder {
     color: #A7A7A7;
     font-family: "Aller",sans-serif;
     font-size: 14px;
}

aside.wrapper .contactForm input[type="text"]::-moz-placeholder, aside.wrapper .contactForm textarea::-moz-placeholder {
     color: #A7A7A7;
     font-family: "Aller",sans-serif;
     font-size: 14px;
}

aside.wrapper .contactForm input[type="submit"] {
     background: url("../img/sprite.png") no-repeat scroll -144px -141px transparent;
     float: right;
     height: 66px;
     margin-right: -3px;
     text-indent: -9999px;
     width: 128px;
}

aside.wrapper .contactForm input[type="submit"]:hover {
     background-position: -144px -211px;
}

aside.wrapper .contactForm input[type="submit"]:active {
     background-position: -144px -289px;
}

aside.wrapper .contactForm #saveBlock {
     cursor: pointer;
     float: left;
     margin-left: -6px;
     position: relative;
}

aside.wrapper .contactForm #saveBlock label {
     color: #A7A7A7;
     cursor: pointer;
     float: left;
     font: 14px "Aller",sans-serif;
     margin-left: 7px;
     margin-top: 13px;
}

aside.wrapper .contactForm #saveBlock #customCheckbox {
     background: url("../img/sprite.png") no-repeat scroll -189px -32px transparent;
     float: left;
     height: 32px;
     margin-left: 4px;
     margin-top: 12px;
     width: 32px;
}

aside.wrapper .contactForm #saveBlock #customCheckbox.check {
     background-position: -221px -32px;
}

aside.wrapper .contactForm #saveBlock input {
     position: absolute;
     visibility: hidden;
}

aside.wrapper .contactForm #contacFormResponse {
     box-shadow: 0px 3px 5px -4px #9C9797;
     display: none;
     height: 327px;
     left: -3px;
     position: absolute;
     top: 71px;
     width: 281px;
}

aside.wrapper .contactForm #contacFormResponse.success {
     background: url("../img/succes_msg.png") no-repeat scroll center center #FFFFFF;
}

aside.wrapper .contactForm #contacFormResponse.error {
     background: url("../img/error_msg.png") no-repeat scroll center center #FFFFFF;
}

aside.wrapper .aboutMe {
     background: url("../img/pic.png") no-repeat scroll center 25px transparent;
     position: relative;
     float: right;
     width: 642px;
}

aside.wrapper .aboutMe:after {
    position: absolute;
    content: "";
    display: block;
    background: url("../img/pic.png") no-repeat scroll center 25px transparent;
    width: 100%;
    height: 130px;
    left: 0;
    top: 0;
}

aside.wrapper .aboutMe h2 {
     background: url("../img/aboutMe.png") no-repeat scroll 0px 0px transparent;
     float: right;
     height: 30px;
     margin: 0px 0px 43px;
     text-indent: -9999px;
     width: 150px;
}

aside.wrapper .aboutMe .aboutBody {
     background: none repeat scroll 0px 0px #FFFFFF;
     clear: both;
     padding: 69px 24px 1px;
     position: relative;
}

aside.wrapper .aboutMe .aboutBody p {
     color: #868686;
     font: 13px/24px 'OpenSans',sans-serif;
     margin-bottom: 24px;
}

footer.wrapper {
     background: url("../img/starLine.jpg") no-repeat scroll center 0px transparent;
     margin-top: 50px;
     padding: 90px 25px;
     width: 980px;
}

footer.wrapper .social {
     display: inline-block;
}

footer.wrapper .social a {
     content: " ";
     float: left;
     height: 22px;
     margin-right: 170px;
     width: 89px;
}

footer.wrapper .social a.dribbble {
     background: url("../img/sprite.png") no-repeat scroll -158px -447px transparent;
}

footer.wrapper .social a.dribbble:hover {
     background-position: -158px -526px;
}

footer.wrapper .social a.facebook {
     background: url("../img/sprite.png") no-repeat scroll -23px -447px transparent;
     width: 107px;
}

footer.wrapper .social a.facebook:hover {
     background-position: -23px -526px;
}

footer.wrapper .social a.twitter {
     background: url("../img/sprite.png") no-repeat scroll -24px -486px transparent;
     width: 108px;
}

footer.wrapper .social a.twitter:hover {
     background-position: -24px -565px;
}

footer.wrapper .social a.behance {
     background: url("../img/sprite.png") no-repeat scroll -157px -486px transparent;
     margin-right: 0px;
     width: 115px;
}

footer.wrapper .social a.behance:hover {
     background-position: -157px -565px;
}

.pagining {
     background: url("../img/pagining.png") repeat-x scroll 0px 13px transparent;
     margin: 0px auto;
     width: 980px;
}

.sliderNav {
     background: none repeat scroll 0px 0px #F2F2F2;
     margin: 0px auto;
     text-align: center;
     width: 300px;
}

.sliderNav div, .sliderNav ol {
     cursor: pointer;
     display: inline-block;
     vertical-align: top;
}

.sliderNav ol li {
     float: left;
}

.sliderNav #next, .sliderNav #prev {
     height: 42px;
     width: 85px;
}

.sliderNav #prev {
     background: url("../img/sprite.png") no-repeat scroll 0px -29px transparent;
}

.sliderNav #prev:hover {
     background: url("../img/sprite.png") no-repeat scroll 0px -77px transparent;
}

.sliderNav #next {
     background: url("../img/sprite.png") no-repeat scroll -80px -29px transparent;
}

.sliderNav #next:hover {
     background: url("../img/sprite.png") no-repeat scroll -80px -77px transparent;
}

.sliderNav #prev.inactive {
     background-position: 0px -29px;
     opacity: 0.5;
}

.sliderNav #next.inactive {
     background-position: -80px -29px;
     opacity: 0.5;
}

.sliderNav ol li {
     color: #BABABA;
     font: 13px/32px "Aller Display",sans-serif;
     text-align: center;
     width: 26px;
}

.sliderNav ol li.active {
     box-shadow: 0px 2px 2px -1px rgba(0, 0, 0, 0.26), 0px 5px 6px 1px rgba(0, 1, 1, 0.09), 0px 1px 0px 0px rgba(255, 255, 255, 0.72) inset;
     color: #CE777A;
}

#modalBg {
     background: none repeat scroll 0px 0px #B4B4B4;
     display: none;
     height: 100%;
     left: 0px;
     position: fixed;
     top: 0px;
     width: 100%;
}

#modal {
     cursor: pointer;
     display: none;
     left: 0px;
     overflow: hidden;
     padding-bottom: 40px;
     position: absolute;
     top: 0px;
     width: 100%;
}

#modal #modalSlider {
     cursor: pointer;
     float: left;
     position: relative;
     top: 0px;
}

#modal #prevItem, #modal #nextItem, #modal .closeItem {
     cursor: pointer;
     position: absolute;
}

#modal #prevItem {
     background: url("../img/prevItem.png") no-repeat scroll center center transparent;
     height: 912px;
     left: 50%;
     margin-left: -592px;
     opacity: 0.5;
     top: 400px;
     width: 60px;
}

#modal #prevItem.hide {
     display: none;
}

#modal #nextItem {
     background: url("../img/nextItem.png") no-repeat scroll center center transparent;
     height: 912px;
     left: 50%;
     margin-left: 532px;
     opacity: 0.5;
     top: 400px;
     width: 60px;
}

#modal #prevItem:hover, #modal #nextItem:hover {
     opacity: 1;
}

#modal #nextItem.hide {
     display: none;
}

#modal .small .leftContent {
     float: left;
     height: 883px;
     margin: 32px 0px 0px 4px;
     position: relative;
     width: 698px;
     z-index: 1;
}

#modal .small .leftContent .modalOverlay {
     background: url("../img/frame_big_portrait.png") no-repeat scroll 0px 0px transparent;
     height: 100%;
     position: absolute;
     top: 0px;
     width: 100%;
}

#modal .small .leftContent img {
     display: block;
     left: 153px;
     position: relative;
     top: 140px;
}

#modal ul li {
     background: none repeat scroll 0% 0% #F2F2F2;
     box-shadow: 0px 2px 2px -1px rgba(0, 0, 0, 0.26), 0px 8px 13px 1px rgba(0, 1, 1, 0.09), 0px 1px 0px 0px rgba(255, 255, 255, 0.72) inset;
     cursor: default;
     float: left;
     height: 912px;
     position: relative;
     width: 1063px;
}

#modalSlider li .closeItem {
     background: url("../img/sprite.png") no-repeat scroll -171px -67px transparent;
     height: 48px;
     right: -9px;
     top: -4px;
     width: 48px;
}

#modalSlider li .closeItem:hover {
     background-position: -219px -67px;
}

#modalSlider li .closeItem:active {
     background-position: -267px -67px;
}

#modal .small .rightContent {
     box-shadow: 0px 2px 2px -1px rgba(0, 0, 0, 0.26), 0px 8px 13px 1px rgba(0, 1, 1, 0.09), 0px 1px 0px 0px rgba(255, 255, 255, 0.72) inset;
     float: left;
     height: 809px;
     margin: 42px 0px 0px -4px;
     padding: 0px 20px 0px 40px;
     position: relative;
     width: 322px;
}

#modal .small .rightContent h3 {
     color: #545454;
     font: 43px/43px "Aller",sans-serif;
     margin-top: 20px;
     text-align: center;
}

#modal .small .rightContent h4 {
     color: #DC8E91;
     font: 11px "OpenSans",sans-serif;
     margin-top: 11px;
     text-align: center;
}

#modal .small .rightContent b {
     color: #646262;
     display: block;
     font: 14px/14px "OpenSansBold",sans-serif;
     margin-bottom: 4px;
}

#modal .small .rightContent p {
     color: #888888;
     font: 13px "OpenSans",sans-serif;
}

#modal .small .rightContent .date {
     border-top: 1px solid #D1D1D1;
     margin-top: 31px;
     padding-top: 21px;
}

#modal .small .rightContent .dimensions {
     margin-top: 22px;
}

#modal .small .rightContent .description {
     margin-top: 29px;
}

#modal .small .rightContent #social {
     bottom: 1px;
     display: block;
     left: 13px;
     position: absolute;
     text-align: center;
     width: 300px;
}

#modal .small .rightContent #social > a {
     background: url("../img/sprite.png") no-repeat scroll 0px -368px transparent;
     display: inline-block;
     height: 64px;
     width: 99px;
}

#modal .small .rightContent #social > a:hover {
     background-position: -116px -368px;
}

#modal .small .rightContent #social span {
     background: url("../img/sprite.png") no-repeat scroll 0px 0px transparent;
     display: inline-block;
     margin: 17px 0px 0px;
     text-indent: -999999px;
}

#modal .small .rightContent #social .facebook span {
     height: 21px;
     width: 45px;
}

#modal .small .rightContent #social .twitter span {
     background-position: -48px 0px;
     height: 20px;
     width: 59px;
}

#modal .small .rightContent #social .twitter {
     display: inline-block;
}

#modal .small .rightContent #social .pinterest {
     float: right;
}

#modal .small .rightContent #social .pinterest span {
     background-position: -112px 0px;
     height: 20px;
     width: 43px;
}

#modal .small .rightContent #social .facebook {
     float: left;
}

#modal .big .leftContent {
     float: left;
     height: 629px;
     margin: 27px 0px 0px 3px;
     position: relative;
     width: 1056px;
     z-index: 1;
}

#modal .big .leftContent .modalOverlay {
     background: url("../img/frame_big_landscape.png") no-repeat scroll 0px 0px transparent;
     height: 100%;
     position: absolute;
     top: 0px;
     width: 100%;
}

#modal .big .leftContent img {
     display: block;
     left: 205px;
     position: relative;
     top: 122px;
     z-index: -1;
}

#modal .big .rightContent {
     box-shadow: 0px 2px 2px -1px rgba(0, 0, 0, 0.26), 0px 8px 13px 1px rgba(0, 1, 1, 0.09), 0px 1px 0px 0px rgba(255, 255, 255, 0.72) inset;
     clear: both;
     float: left;
     height: 241px;
     margin: -27px 0px 0px 41px;
     padding: 24px 0px 21px;
     position: relative;
     width: 979px;
}

#modal .big .rightContent h3 {
     color: #545454;
     font: 43px/43px "Aller",sans-serif;
     margin-top: 41px;
     text-align: center;
}

#modal .big .rightContent h4 {
     color: #DC8E91;
     font: 11px "OpenSans",sans-serif;
     margin-top: 11px;
     text-align: center;
}

#modal .big .rightContent b {
     color: #646262;
     display: block;
     font: 14px/14px "OpenSansBold",sans-serif;
     margin-bottom: 4px;
}

#modal .big .rightContent p {
     color: #888888;
     font: 13px "OpenSans",sans-serif;
}

#modal .big .rightContent .date {
     margin-top: -16px;
     padding-top: 21px;
}

#modal .big .rightContent .dimensions {
     margin-top: 11px;
}

#modal .big .rightContent .description {
     margin-top: 14px;
}

#modal .big .rightContent #social {
     bottom: -21px;
     display: block;
     left: 8px;
     position: absolute;
     text-align: center;
     width: 300px;
}

#modal .big .rightContent #social > a {
     background: url("../img/sprite.png") no-repeat scroll 0px -368px transparent;
     display: inline-block;
     height: 64px;
     width: 99px;
}

#modal .big .rightContent #social > a:hover {
     background-position: -115px -368px;
}

#modal .big .rightContent #social span {
     background: url("../img/sprite.png") no-repeat scroll 0px 0px transparent;
     display: inline-block;
     margin: 16px 0px 0px;
     text-indent: -999999px;
}

#modal .big .rightContent #social .facebook span {
     height: 21px;
     width: 45px;
}

#modal .big .rightContent #social .twitter span {
     background-position: -48px 0px;
     height: 20px;
     width: 59px;
}

#modal .big .rightContent #social .twitter {
     display: inline-block;
}

#modal .big .rightContent #social .pinterest {
     float: right;
}

#modal .big .rightContent #social .pinterest span {
     background-position: -112px 0px;
     height: 20px;
     width: 43px;
}

#modal .big .rightContent #social .facebook {
     float: left;
}

#modal .big .rightContent .rightBig {
     float: left;
     margin-left: 20px;
     width: 590px;
}

#modal .big .rightContent .leftBig {
     border-right: 1px solid #D1D1D1;
     float: left;
     height: 100%;
     position: relative;
     width: 330px;
}