.pageProduct__wrap { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 30px; } .pageProduct__left { width: 35%; } .pageProduct__img__item { position: relative; overflow: hidden; } .pageProduct__img__item:before { display: block; content: ""; width: 25%; height: 100%; background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3)); background: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3)); background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3)); -webkit-transform: skew(-20deg); -ms-transform: skew(-20deg); transform: skew(-20deg); position: absolute; top: 0; left: -50%; } .pageProduct__img__item:hover:before { -webkit-animation: line ease 0.7s; animation: line ease 0.7s; } .pageProduct__img__item img { width: 100%; } @-webkit-keyframes line { 0% { left: -50%; } 100% { left: 150%; } } @keyframes line { 0% { left: -50%; } 100% { left: 150%; } } .pageProduct__right { width: 65%; padding-left: 5%; -webkit-box-sizing: border-box; box-sizing: border-box; } .pageProduct__title { font-size: 2rem; line-height: 1; margin-bottom: 10px; } .pageProduct__name { font-size: 1.125rem; line-height: 1.1; margin-bottom: 30px; } .pageProduct__price { font-size: 1.5rem; margin-bottom: 20px; } .pageProduct__goodsAmount { margin-bottom: 30px; } .pageProduct__goodsAmount__title { font-size: 1rem; line-height: 1; margin-bottom: 10px; } .pageProduct__goodsAmount__block input { width: 70px; height: 40px; font-size: 0.875rem; color: #000; border: 1px solid #cecece; border-radius: 3px; padding: 0 10px; -webkit-box-sizing: border-box; box-sizing: border-box; } .pageProduct__goodsAmount__block input:focus { outline: 0; } .pageProduct__add { padding-top: 30px; margin: auto; text-align: center; } .pageProduct__addBlock { display: inline-block; width: 250px; position: relative; } .pageProduct__addBlock:before, .pageProduct__addBlock:after { display: block; content: ""; width: 0; height: 0; background: transparent; border: 2px solid #769E70; position: absolute; -webkit-transition: all ease 1s; -o-transition: all ease 1s; transition: all ease 1s; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: -1; } .pageProduct__addBlock:before { top: 0; left: 0; border-right: 0; border-bottom: 0; } .pageProduct__addBlock:after { bottom: 0; right: 0; border-left: 0; border-top: 0; } .pageProduct__addBlock:hover:before, .pageProduct__addBlock:hover:after { width: 100%; height: 100%; } .pageProduct__addBlock__button { width: 100%; height: 50px; font-size: 1.125rem; color: #fff; border:none; border-radius: 3px; cursor: pointer; background: #769E70; -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; transition: all ease 0.3s; } .pageProduct__addBlock__button:hover { background: transparent; color: #000; } .pageProduct__addBlock__button:focus { outline: 0; } .pageProduct__description { padding: 30px 0; } .pageProduct__description__title { font-size: 1.5rem; line-height: 1; margin-bottom: 20px; } .pageProduct__description__text { font-size: 1.125rem; margin-bottom: 20px; } .pageProduct__property { padding: 30px 0; border-top: 2px solid #cecece; } .pageProduct__property__title { font-size: 1.5rem; text-align: center; margin-bottom: 30px; } .pageProduct__backLink { display: inline-block; font-size: 1.125rem; text-decoration: none; text-transform: uppercase;; } @media screen and (max-width: 768px) { .pageProduct__wrap { display: block; } .pageProduct__left { width: 230px; float: left; margin-right: 20px; margin-bottom: 20px; } .pageProduct__right { width: 100%; } .pageProduct__add { text-align: center; } } @media screen and (max-width: 480px) { .pageProduct__left { float: none; margin-left: auto; margin-right: auto; margin-bottom: 15px; } .pageProduct__right { text-align: center; padding-left: 0; } .pageProduct__title { font-size: 1.5rem; } .pageProduct__name { font-size: 1rem; margin-bottom: 15px; } .pageProduct__goodsAmount { margin-bottom: 20px; } .pageProduct__add { padding-bottom: 20px; } .pageProduct__description { padding: 20px 0; } .pageProduct__description__text { font-size: 1rem; text-align: justify; } .pageProduct__property { padding: 20px 0; } } .pageProduct__property__item { padding: 3px; }