API tools faq
paste
dartwlad

Untitled

dartwlad
May 1st, 2017
112
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 10.59 KB | None | 0 0
raw download clone embed print report
  1. /*============FONTS===============*/
  2. @font-face {
  3.   font-family: 'HelveticaNeueCyr-Roman';
  4.   src: url('../fonts/custom/HelveticaNeueCyr-Roman.eot');
  5.   src: url('../fonts/custom/HelveticaNeueCyr-Roman.eot?#iefix') format('embedded-opentype'), url('../fonts/custom/HelveticaNeueCyr-Roman.woff') format('woff'), url('../fonts/custom/HelveticaNeueCyr-Roman.ttf') format('truetype'), url('../fonts/custom/HelveticaNeueCyr-Roman.svg#HelveticaNeueCyr-Roman') format('svg');
  6.   font-weight: normal;
  7.   font-style: normal;
  8. }
  9. @font-face {
  10.   font-family: 'HelveticaNeue-Cyr-thin';
  11.   src: url('../fonts/custom/HelveticaNeueCyr-Thin.eot');
  12.   src: url('../fonts/custom/HelveticaNeueCyr-Thin.eot?#iefix') format('embedded-opentype'), url('../fonts/custom/HelveticaNeueCyr-Thin.woff') format('woff'), url('../fonts/custom/HelveticaNeueCyr-Thin.ttf') format('truetype'), url('../fonts/custom/HelveticaNeueCyr-Thin.svg#HelveticaNeueCyr-Thin') format('svg');
  13.   font-weight: 100;
  14.   font-style: normal;
  15. }
  16. @font-face {
  17.   font-family: 'HelveticaNeue-Cyr-italic';
  18.   src: url('../fonts/custom/HelveticaNeueCyr-Roman.eot');
  19.   src: url('../fonts/custom/HelveticaNeueCyr-Roman.eot?#iefix') format('embedded-opentype'), url('../fonts/custom/HelveticaNeueCyr-Roman.woff') format('woff'), url('../fonts/custom/HelveticaNeueCyr-Roman.ttf') format('truetype'), url('../fonts/custom/HelveticaNeueCyr-Roman.svg#HelveticaNeueCyr-Roman') format('svg');
  20.   font-weight: 100;
  21.   font-style: italic;
  22. }
  23. @font-face {
  24.   font-family: 'HelveticaNeue-Cyr-bold';
  25.   src: url('../fonts/custom/HelveticaNeueCyr-Roman.eot');
  26.   src: url('../fonts/custom/HelveticaNeueCyr-Roman.eot?#iefix') format('embedded-opentype'), url('../fonts/custom/HelveticaNeueCyr-Roman.woff') format('woff'), url('../fonts/custom/HelveticaNeueCyr-Roman.ttf') format('truetype'), url('../fonts/custom/HelveticaNeueCyr-Roman.svg#HelveticaNeueCyr-Roman') format('svg');
  27.   font-weight: 800;
  28.   font-style: normal;
  29. }
  30. @font-face {
  31.   font-family: 'HelveticaNeue-Cyr-med';
  32.   src: url('../fonts/custom/HelveticaNeueCyr-Roman.eot');
  33.   src: url('../fonts/custom/HelveticaNeueCyr-Roman.eot?#iefix') format('embedded-opentype'), url('../fonts/custom/HelveticaNeueCyr-Roman.woff') format('woff'), url('../fonts/custom/HelveticaNeueCyr-Roman.ttf') format('truetype'), url('../fonts/custom/HelveticaNeueCyr-Roman.svg#HelveticaNeueCyr-Roman') format('svg');
  34.   font-weight: 400;
  35.   font-style: normal;
  36. }
  37. @font-face {
  38.   font-family: 'HelveticaNeueCyr-rbold';
  39.   src: url('../fonts/custom/HelveticaNeueCyr-Black.eot');
  40.   src: url('../fonts/custom/HelveticaNeueCyr-Black.eot?#iefix') format('embedded-opentype'), url('../fonts/custom/HelveticaNeueCyr-Black.woff2') format('woff2'), url('../fonts/custom/HelveticaNeueCyr-Black.woff') format('woff'), url('../fonts/custom/HelveticaNeueCyr-Black.ttf') format('truetype');
  41.   font-weight: 900;
  42.   font-style: normal;
  43. }
  44. .bold {
  45.   font-family: "HelveticaNeue-Cyr-bold";
  46. }
  47. .r-bold {
  48.   font-family: 'HelveticaNeueCyr-rbold';
  49. }
  50. .roman {
  51.   font-family: "HelveticaNeueCyr-Roman";
  52. }
  53. .thin {
  54.   font-family: "HelveticaNeue-Cyr-thin";
  55. }
  56. .italic {
  57.   font-family: "HelveticaNeue-Cyr-thin";
  58. }
  59. .medium {
  60.   font-family: "HelveticaNeue-Cyr-med";
  61. }
  62. /* ===========BASE========= */
  63. a:hover,
  64. a:focus,
  65. a:visited,
  66. a:active,
  67. a {
  68.   text-decoration: none !important;
  69. }
  70. button:focus {
  71.   outline: none;
  72. }
  73. html {
  74.   overflow-y: scroll !important;
  75.   overflow-x: hidden;
  76. }
  77. body {
  78.   padding-right: 0 !important;
  79. }
  80. /*=============CONTENT==============*/
  81. section.navigation {
  82.   background-color: #eef1f2;
  83. }
  84. section.navigation .navigate {
  85.   margin: 30px 0;
  86. }
  87. section.navigation .navigate div {
  88.   margin: 0 5px;
  89.   display: inline-block;
  90. }
  91. section.navigation .navigate a {
  92.   font-family: "HelveticaNeueCyr-Roman";
  93.   font-size: 18px;
  94.   text-transform: uppercase;
  95.   color: #000;
  96. }
  97. section.navigation .navigate p {
  98.   margin: 0;
  99.   font-family: "HelveticaNeue-Cyr-bold";
  100.   font-size: 20px;
  101.   text-transform: uppercase;
  102.   color: #000;
  103. }
  104. section.main {
  105.   height: 500px;
  106.   padding: 15px;
  107.   background: url("../img/catalog/collections/collection-1_bg.jpg") no-repeat center center;
  108. }
  109. section.main h1 {
  110.   margin-top: 200px;
  111.   color: #ffffff;
  112.   font-family: "HelveticaNeue-Cyr-med";
  113.   font-size: 60px;
  114.   text-transform: uppercase;
  115. }
  116. section.main h1 span {
  117.   background: rgba(77, 65, 46, 0.2);
  118. }
  119. section.main p {
  120.   color: #ffffff;
  121.   font-family: "HelveticaNeue-Cyr-med";
  122.   text-transform: uppercase;
  123.   font-size: 25px;
  124. }
  125. section.main p span {
  126.   background: rgba(77, 65, 46, 0.2);
  127. }
  128. section.content {
  129.   padding-bottom: 450px;
  130.   background: url("../img/bg/map-bg.jpg") no-repeat bottom center;
  131. }
  132. section.content .products {
  133.   margin-top: 220px;
  134. }
  135. section.content .products .slider_other_products {
  136.   margin: 30px 10px;
  137. }
  138. section.content .products .slider_other_products .prev,
  139. section.content .products .slider_other_products .next {
  140.   z-index: 999;
  141. }
  142. section.content .products .slider_other_products .card {
  143.   position: relative;
  144.   margin: 0 20px;
  145. }
  146. section.content .products .slider_other_products .card p {
  147.   font-family: "HelveticaNeue-Cyr-thin";
  148.   font-size: 14px;
  149.   color: #666666;
  150. }
  151. section.content .products .slider_other_products .card h4 {
  152.   color: #050404;
  153.   font-size: 18px;
  154.   font-family: "HelveticaNeue-Cyr-bold";
  155. }
  156. section.content .products .slider_other_products .block_hidden {
  157.   width: 100%;
  158.   height: 100%;
  159.   top: 0;
  160.   right: 0;
  161.   left: 0;
  162.   display: none;
  163. }
  164. section.content .products .slider_other_products .block_hidden .buttons {
  165.   margin-top: 70%;
  166. }
  167. section.content .products .slider_other_products .block_hidden .button_active {
  168.   transition: all 0.3s ease-in-out;
  169.   margin: 0;
  170.   border: 1px solid #000 !important;
  171.   padding: 10px 20px;
  172.   text-transform: uppercase;
  173.   color: #000;
  174.   font-size: 12px;
  175.   font-family: "HelveticaNeue-Cyr-bold";
  176.   background: transparent;
  177. }
  178. section.content .products .slider_other_products .block_hidden .button_active:hover {
  179.   border: 1px solid #000 !important;
  180.   background: #000000;
  181.   color: #ffffff;
  182. }
  183. section.content .products .slider_other_products .block_hidden .button_disactive {
  184.   transition: all 0.3s ease-in-out;
  185.   margin: 0;
  186.   border: 1px solid #000000 !important;
  187.   padding: 10px 20px;
  188.   text-transform: uppercase;
  189.   color: #ffffff;
  190.   font-size: 12px;
  191.   font-family: "HelveticaNeue-Cyr-bold";
  192.   background: #000000;
  193. }
  194. section.content .products .slider_other_products .block_hidden .button_disactive:hover {
  195.   border: 1px solid #000 !important;
  196.   background: transparent;
  197.   color: #000000;
  198. }
  199. section.content .products .slider_other_products .card:hover .block_hidden {
  200.   display: block;
  201.   z-index: 100;
  202.   position: absolute;
  203. }
  204. section.content .prev {
  205.   position: absolute;
  206.   top: 50%;
  207.   left: -30px;
  208.   background: transparent;
  209.   font-size: 40px;
  210.   color: #d4d4d4;
  211.   z-index: 999;
  212.   border: none;
  213. }
  214. section.content .next {
  215.   position: absolute;
  216.   top: 50%;
  217.   right: -30px;
  218.   background: transparent;
  219.   font-size: 40px;
  220.   color: #d4d4d4;
  221.   z-index: 999;
  222.   border: none;
  223. }
  224. section.content .navs {
  225.   margin: 15px;
  226. }
  227. section.content .pages {
  228.   float: right;
  229. }
  230. section.content .pages p {
  231.   font-family: "HelveticaNeue-Cyr-med";
  232.   font-size: 12px;
  233.   color: #d9d9d9;
  234. }
  235. section.content .pages li {
  236.   border: 1px solid #000000;
  237.   border-radius: 50%;
  238.   padding: 0;
  239.   font-family: "HelveticaNeue-Cyr-med";
  240.   font-size: 12px;
  241. }
  242. section.content .pages li a {
  243.   padding: 5px;
  244.   color: #000000;
  245. }
  246. section.content .pages li a:hover {
  247.   color: #ffffff;
  248. }
  249. section.content .pages li:hover {
  250.   color: #ffffff;
  251.   background: #000000;
  252.   border: 1px solid #000000;
  253. }
  254. section.content .pages .custom_active {
  255.   background: #000000;
  256.   border: 1px solid #000000;
  257. }
  258. section.content .pages .custom_active a {
  259.   color: #ffffff;
  260. }
  261. /*===========MODAL============*/
  262. .modal {
  263.   margin-top: 8%;
  264. }
  265. .modal .modal-header {
  266.   border: none;
  267. }
  268. .modal .modal-header .close {
  269.   opacity: 1;
  270.   transition: all 0.3s ease-in-out;
  271.   margin-top: -55px;
  272.   text-shadow: none;
  273.   font-size: 14px;
  274.   color: #8e8e8e;
  275.   padding: 4px ;
  276.   border: 2px solid #8e8e8e;
  277.   border-radius: 50%;
  278. }
  279. .modal .modal-header .close:hover {
  280.   color: #ffffff;
  281.   background: #000000;
  282.   border: 2px solid #000;
  283. }
  284. .modal .modal-content {
  285.   border: 0;
  286.   padding: 10px 0 30px 0;
  287. }
  288. .modal .modal-content .col-md-10 {
  289.   background: #ffffff;
  290.   padding: 20px;
  291.   border: 1px solid #000000;
  292. }
  293. .modal .modal-content h3 {
  294.   text-transform: uppercase;
  295.   font-family: "HelveticaNeue-Cyr-thin";
  296.   font-size: 18px;
  297.   color: #000;
  298. }
  299. .modal .modal-content h3 span {
  300.   font-family: "HelveticaNeue-Cyr-bold";
  301. }
  302. .modal .modal-content .characteristics p {
  303.   font-size: 14px;
  304.   color: #000;
  305.   font-family: "HelveticaNeue-Cyr-bold";
  306. }
  307. .modal .modal-content .characteristics p span.span_custom {
  308.   font-family: "HelveticaNeue-Cyr-thin";
  309. }
  310. .modal .modal-content .price p {
  311.   font-family: 'HelveticaNeueCyr-rbold';
  312.   font-size: 24px;
  313.   text-transform: uppercase;
  314. }
  315. .modal .modal-content .special_price {
  316.   padding: 0;
  317. }
  318. .modal .modal-content .special_price .custom_price {
  319.   margin-top: 25px;
  320.   margin-left: 10px;
  321. }
  322. .modal .modal-content .special_price p {
  323.   margin-top: 10px;
  324.   color: red;
  325.   font-family: 'HelveticaNeueCyr-rbold';
  326.   font-size: 21px;
  327.   text-transform: uppercase;
  328. }
  329. .modal .modal-content .special_price span {
  330.   text-transform: uppercase;
  331.   text-align: right;
  332.   text-decoration: underline;
  333.   font-size: 18px;
  334.   font-family: "HelveticaNeue-Cyr-med";
  335.   color: #000;
  336. }
  337. /*=============ADAPTIVE============*/
  338. @media (min-width: 0px) and (max-width: 320px) {
  339.   section.main h1 {
  340.     font-size: 38px;
  341.     margin-top: 60px;
  342.   }
  343.   section.main p {
  344.     font-size: 20px;
  345.   }
  346.   section.content .prev {
  347.     left: 20px;
  348.     top: 97%;
  349.   }
  350.   section.content .next {
  351.     right: 20px;
  352.     top: 97%;
  353.   }
  354. }
  355. @media (min-width: 321px) and (max-width: 480px) {
  356.   section.main h1 {
  357.     font-size: 48px;
  358.     margin-top: 80px;
  359.   }
  360.   section.main p {
  361.     font-size: 22px;
  362.   }
  363.   section.content .prev {
  364.     left: 20px;
  365.     top: 97%;
  366.   }
  367.   section.content .next {
  368.     right: 20px;
  369.     top: 97%;
  370.   }
  371. }
  372. @media (min-width: 481px) and (max-width: 768px) {
  373.   section.content .slick-prev {
  374.     left: 15px;
  375.     top: 97%;
  376.   }
  377.   section.content .slick-next {
  378.     right: 15px;
  379.     top: 97%;
  380.   }
  381. }
  382. @media (min-width: 769px) and (max-width: 992px) {
  383.   section.content .prev {
  384.     left: 15px;
  385.     top: 97%;
  386.   }
  387.   section.content .next {
  388.     right: 15px;
  389.     top: 97%;
  390.   }
  391. }
  392. @media (min-width: 993px) and (max-width: 1200px) {
  393.   section.content .next {
  394.     right: 10px;
  395.   }
  396.   section.content .prev {
  397.     left: 10px;
  398.   }
  399. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!