API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 5th, 2016
94
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 68.01 KB | None | 0 0
raw download clone embed print report
  1. @charset "UTF-8";
  2.  
  3.  
  4. @font-face { font-family: "Roboto-Bold"; src: url("../font/roboto/Roboto-Bold-webfont.woff") format("woff"); }
  5. @font-face { font-family: "Roboto-Regular"; src: url("../font/roboto/Roboto-Regular-webfont.woff") format("woff"); }
  6. @font-face { font-family: "Roboto-Medium"; src: url("../font/roboto/Roboto-Medium-webfont.woff") format("woff"); }
  7.  
  8. @font-face { font-family: "Rational-Book"; src: url("../font/rational/Rational-Book-webfont.woff2") format("woff2"); }
  9. @font-face { font-family: "Rational-Medium"; src: url("../font/rational/Rational-Medium-webfont.woff2") format("woff2"); }
  10. @font-face { font-family: "Rational-SemiBold"; src: url("../font/rational/Rational-SemiBold-webfont.woff2") format("woff2"); }
  11.  
  12. /** Materialize END **/
  13.  
  14. select {
  15. width: 100%;
  16. padding: 5px;
  17. border-radius: 2px;
  18. background-color:#efefef;
  19. border:1px solid #ccc;
  20. height:40px;
  21. margin-bottom:10px;
  22. color:#999;
  23. display:block;
  24. }
  25. textarea {
  26. width: 100%;
  27. height: 3rem;
  28. background-color: transparent;
  29. }
  30. button {
  31. font-family:Rational-SemiBold, sans-serif !important;
  32. max-width:370px;
  33. width:100%;
  34. height:50px;
  35. display:inline-block;
  36. vertical-align:middle;
  37. padding:0;
  38. margin:0 10px 0 0;
  39. border:0;
  40. cursor:pointer;
  41. }
  42. input {
  43. max-width:370px;
  44. text-align:left;
  45. border:1px solid #ccc;
  46. padding:0 15px;
  47. margin:0;
  48. }
  49. input[type="text"], input[type="password"], input[type="email"] { width:100%; height:50px; }
  50. input[type="checkbox"] { height:25px; }
  51. ul {
  52. list-style-type: none;
  53. }
  54. a {
  55. color:#000;
  56. text-decoration:none;
  57. }
  58. h1,h2,h3,h4 { font-weight:400; }
  59.  
  60. ::-webkit-input-placeholder { color:#d1d1d1; }
  61. ::-moz-placeholder { color:#d1d1d1; }
  62. :-ms-input-placeholder { color:#d1d1d1; }
  63.  
  64.  
  65. /* Icons */
  66. @font-face
  67. {
  68. font-family: "slick";
  69. font-weight: normal;
  70. font-style: normal;
  71. src: url("../font/slick.eot");
  72. src: url("../font/slick.eot?#iefix") format("embedded-opentype"), url("../font/slick.woff") format("woff"), url("../font/slick.ttf") format("truetype"), url("../font/slick.svg#slick") format("svg");
  73. }
  74. .newStyleContainer { display:none; }
  75.  
  76. /** General CSS **/
  77. * { box-sizing:inherit; }
  78. html {
  79. height:100.1%;
  80. overflow:auto;
  81. -webkit-overflow-scrolling: touch;
  82. box-sizing:border-box;
  83. font-family:Rational-Book, sans-serif;
  84. font-size:16px;
  85. }
  86. span, div, p, a { font-family:Rational-Book, sans-serif; font-size:16px; }
  87. input, button, textarea, select { font-family:Rational-Book, sans-serif; font-size:15px; }
  88. main { position:relative; }
  89. #uploadPage main, #welcomePage main { top:0; }
  90. main.pageContainer { top:165px; }
  91. body#publicPage main.pageContainer, body#profilePage main.pageContainer, body#wishlistPage main.pageContainer { top:215px; }
  92. header { width:100%; z-index:10; position:fixed; }
  93. nav { margin-bottom:15px; }
  94. body { margin:0; }
  95. body > div:first-child { display:flex; flex-direction:column; }
  96. footer { text-align:center; }
  97. footer > div.dynamic { width: 30%; margin: auto; text-align: left; }
  98. body span.validationFailed { font-weight:bold; font-style:italic; color:#F00; }
  99. body input.validationPassed { border:1px solid #0A0 !important; }
  100. body input.validationFailed { border:1px solid #F00 !important; background:#efefef url("../images/static/validation.png") no-repeat 95% 30%; }
  101. body button.validationPassed { background-color:#67bfab !important; color:#FFF !important; }
  102. body button.validationFailed { background-color:#F00 !important; color:#FFF !important; border:1px solid #000; opacity:0.9; }
  103. div#errorMessage { padding-top:20px; }
  104. #headerLogo { padding:20px 0; }
  105. .absolute { position:absolute; margin:auto; top:0; right:0; left:0; bottom:0; text-align:center; }
  106. .pointer { cursor:pointer; }
  107. .block { display:block; }
  108. .left { float:left; }
  109. .right { float:right; }
  110. .valign { vertical-align:middle; }
  111. .underlined { text-decoration:underline; cursor:pointer; }
  112. .headline { padding:10px 0; }
  113. .choices { display:inline-block; width:200px; }
  114. .hidden { display:none !important; }
  115. .softHidden { visibility:hidden; display:inline-block; height:1px; width:1px; }
  116. .padded { padding:10px 50px; }
  117. .nopadding { padding:0 !important; }
  118. .nomargin { margin:0 !important; }
  119. .inlineBlock { display:inline-block; }
  120. .textRight { text-align:right; }
  121. .textLeft { text-align:left; }
  122. .half { width:50%; }
  123. .tale { background-color:#67bfab; }
  124. .ftale { color:#67bfab; }
  125. .fwhite { color:#FFF; }
  126. .shown { display:block; }
  127. .clear { clear:both; }
  128. div.socialButtons img { cursor:pointer; }
  129. div.dynamicCheckbox input[type="checkbox"], div.dynamicCheckbox span { vertical-align:middle; }
  130. div.dynamicCheckbox input[type="checkbox"] { margin:0 10px 0 0; left:inherit; position:relative; }
  131. div.dynamicCheckbox { display:inline-block; }
  132. div.registerCentered div.dynamicCheckbox { display:block; text-align:left; }
  133. div.missingContent { position:relative; width:100%; text-align:center; padding:300px 20px 0; }
  134. div.missingContent h1 { font-family:Rational-Medium, sans-serif; font-size:44px; }
  135. img.closingIcon { width:25px; position:absolute; top:7px; left:20px; cursor:pointer; z-index:1; }
  136. span.previousStep { position:absolute; top:14px; right:30px; font-family:Rational-Medium, sans-serif; font-size:14px; }
  137. div.pageHeadline { width:100%; height:45px; background:#67bfab; line-height:45px; text-align:center; font-family:Rational-SemiBold, sans-serif; font-size:21px; color:#FFF; }
  138. span.pageHeadline { width:80%; display:inline-block; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  139. div.overlay span.pageHeadline { font-family:Roboto-Bold, sans-serif; }
  140. div.blockHeadline { width:100%; font-family:Rational-SemiBold, sans-serif; color:#000; }
  141. div.suadeoOuterIconContainer { text-align:center; width:155px; height:155px; border-radius:99px; position:absolute; top:0; right:0; left:0; bottom:0; margin:auto; background:transparent; }
  142. div.welcomeUserContainer div.suadeoOuterIconContainer { top:-40px; }
  143. #feedPage div.suadeoOuterIconContainer { display:none; }
  144. #feedPage img.suadeoIcon.edit { left:8px; }
  145. .mobileOnly { display:none; }
  146. div.suadeoIconContainer { cursor:pointer; position:relative; display:inline-block; width:40px; height:40px; border:1px solid #575756; border-radius:8px; }
  147. div.suadeoRoundIconContainer { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:40px; height:40px; border-radius:99px; background:#FFF; cursor:pointer; }
  148. div.suadeoFollowIconContainer, div#profileFollowComponent { display:inline-block; }
  149. #fb-root, .fb-follow { display:none !important; }
  150. .instagramFollow, .facebookFollow { width:35px; margin-left:10px; }
  151. .vatExplanationText { padding:0 15px; }
  152. header.mobileNavigation { top:0; bottom:0; overflow-y:scroll; overflow-x:hidden; }
  153. button.tale { background:#67bfab; color:#FFF; border:0; }
  154. button.tale * { color:#FFF; }
  155. button.white { background:#FFF; border:1px solid #67bfab; color:#67bfab; }
  156. button.white * { color:#67bfab; }
  157. button.normal { color:#999; background:#efefef; border:1px solid #ccc; }
  158. button.normal:focus { background-color:#67bfab; color:#FFF; }
  159. button.normal * { color:#999; }
  160. button:last-child, input:last-child { margin-right:0 !important; padding-right:0 !important; }
  161. input.normal { color:#999; background:#efefef; border:1px solid #ccc; }
  162. textarea.normal { color:#999; background:#efefef; border:1px solid #ccc; }
  163. textarea.tale { background:#67bfab; color:#FFF; border:0; }
  164. textarea.white { background:#FFF; border:1px solid #67bfab; color:#67bfab; }
  165. button span { font-family:"Rational-SemiBold", sans-serif; font-size:20px; letter-spacing:0.2px; }
  166. button.tale:focus { color:#FFF; }
  167. button.white:focus { color:#67bfab; }
  168. div.socialMobileValues { display:none; }
  169. div.socialMobileValues > span { display:inline-block; width:50%; text-align:left; }
  170. div.socialMobileValues span.following { text-align:right; }
  171. span.paddedTextLine, div.paddedTextLine { padding-bottom:20px; }
  172.  
  173. /* Navigation CSS */
  174. div.navigation { background:#FFF; box-shadow: 0 0 0 0; line-height:inherit; color:#000;}
  175. div.navigationContainer { padding:50px 0 0; height:160px; line-height:1; }
  176. div.navigationBorder { height:5px; background:#67bfab; }
  177. div.navigationButtonContainer { display:inline-block; width:20%; text-align:center; line-height:15px; }
  178. div.navigationButton { display:inline-block; }
  179. div.navigationButton img, div.navigationButton object { cursor:pointer; height:35px; display:block; margin:auto; background-color:transparent !important; }
  180. div.navigationInnerContainer { padding:1.5% 0 2.1%; margin:0 5%; border-bottom:1px solid #ccc; } /* 37px 0 52px */
  181. div.navigationInnerContainer div { display: inline-block; width:23%; border-right:1px solid #ccc; margin-right:1.2%; }
  182. div.navigationInnerContainer div:last-child { margin-right:0; border-right:0; }
  183. div.navigationFooter { padding:1.1% 5% 2.3%; border-bottom:1px solid #ccc; }
  184. div.navigationFooterRight { text-align:right; }
  185. div.navigationContent { position:absolute; width:100%; background:#FFF; z-index:99; height:0; overflow:hidden; }
  186. div.navigationFooter div { display:inline-block; vertical-align:middle; }
  187. div.navigationFooter div.textLeft span:last-child { padding-right:0; }
  188. div.navigationFooter div.textRight > * { vertical-align:middle; display:inline-block; }
  189. div.navigationFooter div.textRight span { padding-right:10px; }
  190. div.navigationFooter div.textLeft { width:50%; }
  191. div.navigationFooter div.textRight { width:50%; }
  192. div.navigation .menuentry { line-height: 50px; display:block; font-family:"Rational-Medium", sans-serif; cursor:pointer; }
  193. span.navigationDescription { letter-spacing:0.1px; color:#67bfab; font:14px "Rational-Book", sans-serif; display:block; padding-top:15px; }
  194. span.navigationFooterItem { display:inline-block; padding-right:20px; color:#000; cursor:pointer; }
  195. div.navigationButton img.green { display:none; }
  196.  
  197. /* Suadeo Logo / Header CSS */
  198. img.mainLogoImage { width:185px; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; }
  199. div.mainLogoContainer { width:100%; height:125px; position:relative; }
  200. #profileuploadPage div.mainLogoContainer, #profilewishlistPage div.mainLogoContainer, #publicPage div.mainLogoContainer, #welcomePage header#suadeoPageHeader { display:none; }
  201.  
  202. /* Feed CSS */
  203. div.feedContainer, div.profileFeedContainer { text-align:left; color:#000; background:#efefef; width:100%; padding:2.8% 5.6%; border-top:1px solid #ccc; }
  204. div.feedContentParentContainer { display:inline-block; width:24.1%; vertical-align:top; margin:0 1.2% 0 0; }
  205. div.feedContentContainer { margin:0 0 20px 0; background:#FFF; vertical-align:top; word-break:break-word; }
  206. div.feedContentContainer > div:last-child { text-align:right; padding:0 10px 10px 0; font-family:Rational-Mmedium, sans-serif; line-height:1; cursor:pointer; }
  207. div.feedHeader { height:70px; padding:15px 20px; line-height:40px; }
  208. div.feedHeader img.feedSmallImage { vertical-align:middle; margin-right:10px; border-radius:99px; width:40px; }
  209. div.feedHeader span.feedUsername { vertical-align:middle; cursor:pointer; }
  210. div.feedProfileImage img.feedImage { max-width:100%; }
  211. div.feedSocialButtons { height:48px; }
  212. div.feedProfileImage { position:relative; line-height:1; text-align:center; }
  213. div.feedProfileOverlay { position:absolute; bottom:0; margin:auto; width:100%; background-color:#000; opacity:0.98; height:40px; text-align:right; padding:0 20px; line-height:38px; display:none; }
  214. div.feedProfileOverlay span { color:#FFF; vertical-align:middle; }
  215. div.feedProfileOverlay img { width:20px; display:inline-block; margin-left:10px; vertical-align:middle; cursor:pointer; }
  216. div.feedProfileOverlay img.pinterest { background:#FFF; border-radius:10px; }
  217. div.feedSliderCaption { position:absolute; bottom:-30px; }
  218. span.currentLikes { line-height:20px; }
  219. img.likeButton { margin-right:5px; }
  220. .feedPadding { padding:15px 25px; }
  221. .feedSmallPadding { padding:8px 18px; }
  222. span.testText { position:absolute; }
  223. div.feedButtonContainer { text-align:center; background:transparent; border-top:1px solid #67bfab; }
  224. div.feedButtonContainer button:first-child { margin-right:50px; }
  225. div.feedBox { cursor:pointer; width:50%; display:inline-block; height:50px; border-right:1px solid #ccc; text-align:center; }
  226. div.feedBox:last-child { border-right:0; }
  227. div.feedBox span.feedBoxText { line-height:50px; vertical-align:middle; font-family:Rational-Medium, sans-serif; font-size:14px; }
  228.  
  229.  
  230. /* Profile CSS */
  231. #publicPage div.suadeoOuterIconContainer { display:none; }
  232. div.profileNameContainer { position:fixed; width:100%; background:#FFF; z-index:2; top:165px; height:50px; line-height:50px; text-align:center; border-bottom: 2px solid #ccc; }
  233. div.profileNameContainer span.profileName { font-family:Rational-SemiBold, sans-serif; }
  234. div.profileImageContainer, div.profileDataContainer { position:relative; width:100%; }
  235. div.profileImageContainer { height:235px; text-align:center; padding:40px; }
  236. div.profileDataContainer.mobile { display:none; }
  237. div.profileDataContainer.desktop { display:block; }
  238. div.profileImageComponent { position:relative; }
  239. div.profileDataContainer { line-height:1; vertical-align:middle; text-align:center; padding-bottom:40px; font-family:"Rational-Book", sans-serif; }
  240. div.profileDataContainer span.socialValue, div.profileDataContainer .profileStyleCounter { padding-right:50px; }
  241. div.profileDataContainer span.socialValue:last-child { padding-right:10px; }
  242. .socialValue.followers { display:inline-block; width:160px; text-align:left; }
  243. div.profileDataContainer > * { vertical-align:middle; }
  244. div.profileBoxContainer { border-top:1px solid #ccc; }
  245. div.profileBox { cursor:pointer; width:50%; display:inline-block; height:50px; border-right:1px solid #ccc; text-align:center; }
  246. div.profileBox.profileBoxLarge { width:100%; border-bottom:1px solid #ccc; }
  247. div.profileBox:last-child { border-right:0; }
  248. div.profileContainer { text-align:center; position:relative; }
  249. div.profileContainer img.editProfileImage { margin:40px 0 35px; border-radius:99px; }
  250. img.profileArrow { position:absolute; left:5%; margin:auto; top:0; bottom:0; max-height:32px; cursor:pointer; }
  251. div.profileBox span { font-family:Rational-Medium, sans-serif; cursor:pointer; line-height:50px; vertical-align:middle; }
  252. .suadeoFollowIconContainer img.followIcon { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:22px; }
  253. img.suadeoIcon.edit { position:relative; top:10px; width:22px; }
  254. img.profileImage.bigPicture { width:155px; height:155px; border-radius:99px; }
  255. body#profileuploadPage div.feedProfileImage div.suadeoOuterIconContainer { width:100%; height:100%; }
  256. div.profilePlaceholder, div.publicImageContainer { height:235px; padding:40px; text-align:center; }
  257. img.profilePlaceholder, img.publicImage { border-radius:99px; }
  258. #wishlistPage div.suadeoOuterIconContainer { display:none; }
  259. #profileuploadPage div.feedHeader { display:none; }
  260. #uploadPage header#suadeoPageHeader, #welcomePage header#suadeoPageHeader, div#noSearchResults { display:none; }
  261. div#noSearchResults { text-align:center; }
  262.  
  263. /* General Search CSS */
  264. #searchPage div.searchResultOuterContainer { margin-top:50px; }
  265. #searchResults { max-width:1149px; width:100%; margin:auto; font-family:Rational-Medium, sans-serif; text-align:center; }
  266. #feedResults { max-width:100%; width:100%; margin:auto; font-family:Rational-Medium, sans-serif; text-align:center; }
  267. .searchContainer div.searchResultRow { border:0; margin:0 auto 25px; padding:0; width:400px; }
  268. .searchContainer div.searchResultRow a > * { vertical-align:middle; }
  269. .searchContainer img.searchSmallImage { width:80px; border-radius:99px; margin-right:15px; }
  270. .searchContainer div.searchUserDetails { display:inline-block; margin-left:15px; position:relative; top:5px; float:right; }
  271. .searchContainer div.searchResultRow span { line-height:1.5; vertical-align:middle; }
  272. .searchContainer div.searchUserDetails span { display:block; }
  273.  
  274. /* Search CSS */
  275. div.searchNameContainer { position:relative; height:50px; line-height:55px; font-family:"Rational-SemiBold", sans-serif; text-align:center; border-bottom: 2px solid #67bfab; }
  276. #stylePageOverlay div.searchInnerContainer { margin-bottom:10px; }
  277. #stylePageOverlay div.searchOuterContainer button { width:100%; max-width:1149px; }
  278. #stylePageOverlay div.informationText { padding:10px 20px; }
  279. div#productSearchResults, div#productSecondSearchResults { padding:0 20px 30px; max-width:1149px; margin:auto; }
  280. div.searchContainer { text-align:center; }
  281. div.searchOuterContainer { padding:0 20px; }
  282. div.searchResultOuterContainer { margin-top:25px; }
  283. div.searchInnerContainer { margin:40px auto 20px; text-align:center; position:relative; max-width:1149px; }
  284. div.searchInnerContainer input { vertical-align:middle; width:100%; max-width:1149px; height:40px; }
  285. div.searchButtonContainer button { height:40px; margin-right:0 !important; width:33.3% !important; }
  286. div.searchButtonContainer { max-width:1210px; margin:0 auto 50px; }
  287. img.searchFieldIcon { vertical-align:middle; background:#67bfab; padding:7px; cursor:pointer; width:40px; height:40px; position:absolute; right:0; top:0; }
  288. div.searchResultRow { text-align:left; position:relative; display:none; margin-bottom:20px; padding:15px; background-color: white; box-sizing: border-box; border: 1px solid #000; }
  289. div.searchResultContainer { padding-left:15px; line-height:1.25; vertical-align:top; width:54.8%; display:inline-block; }
  290. div#addedSearchProducts div.searchResultContainer { width:53.5%; }
  291. div.searchRightContainer { display: inline-block; width: 29%; vertical-align: top; text-align: right; }
  292. div.searchImageContainer { display:inline-block; width:170px; max-width:17%; }
  293. div.searchResultRow div.searchResultContainer span { max-width:100%; text-align:left; padding-bottom:5px; }
  294. div.searchResultRow span { line-height:1.25; vertical-align:top; }
  295. span.searchResultRowTitle, span.searchResultRowShop { display:inline-block; margin:0; padding-right:10px; }
  296. span.searchResultRowBrand { display:block; }
  297. span.searchResultRowPrice { }
  298. span.searchResultRowDesc { line-height:1.2; }
  299. div.searchResultRow button { position:absolute; bottom:15px; right:15px; cursor:pointer; max-width:180px !important; margin:0 !important; }
  300. div.searchResultRow img.productImage { vertical-align:middle; display: inline-block; max-height:200px; max-width:100%; }
  301. div#searchKeywords, div#searchFacets, div#searchFilters { max-width:1149px; margin:0 auto 10px; padding:0 20px; text-align:left; }
  302. span.removeKeyword, span.facet { padding:5px 20px 5px 10px; background: #efefef; border-radius: 8px; text-align: left; position:relative; display:inline-block; }
  303. span.removeKeyword { margin-right:10px; }
  304. span.closingIcon { position:absolute; top:0; right:5px; cursor:pointer; }
  305. div#addedSearchProducts { padding-top:20px; }
  306. div.recImageContainer { display:inline-block; }
  307.  
  308. /* Elasticsearch Custom CSS */
  309.  
  310. div.facetOuterContainer { vertical-align:top; position:relative; display:inline-block; width:49.7%; margin:10px 0.3% 0 0; }
  311. div.facetVisualContainer { position:relative; display:inline-block; }
  312. div.facetInnerContainer { margin-top:10px; }
  313. span.facetToggle { position:absolute; top:0; right:5px; bottom:0; margin:auto; cursor:pointer; }
  314. input[type="checkbox"].facetCheckbox { left:initial; right:50px; position:absolute; }
  315.  
  316. /* Landing Page CSS */
  317. /* Landing Page CSS */
  318. #landingPage.mainLogoImage {
  319. border: 0; }
  320.  
  321. div.landingContainer {
  322. text-align: center;
  323. font-family: "Rational-Book", sans-serif;
  324. margin: 0 auto 47px; }
  325.  
  326. div.landingContainer h2 {
  327. font-size: 36px;
  328. line-height: 1.1;
  329. margin: auto; }
  330.  
  331. div.landingContainer div {
  332. font-size: 20px;
  333. line-height: 1.5;
  334. letter-spacing: 0.2px;
  335. margin: 38px auto; }
  336.  
  337. div.landingButtonContainer {
  338. width: 100%;
  339. display: inline-block;
  340. text-align: center;
  341. margin-bottom: 50px;
  342. margin-top: 30px;
  343. padding: 0 25px; }
  344.  
  345. div.landingButtonContainer button {
  346. margin: 0 15px 0;
  347. text-align: center;
  348. font-family: Roboto-Bold, sans-serif;
  349. font-size: 20px; }
  350.  
  351. div.one, div.once {
  352. width: 100%; }
  353.  
  354. div.double, div.dual, div.two {
  355. width: 49.9%;
  356. display: inline-block;
  357. vertical-align: top; }
  358.  
  359. div.triple, div.three {
  360. width: 33.33%;
  361. display: inline-block;
  362. vertical-align: top; }
  363.  
  364. div.quarter, div.four {
  365. width: 24.9%;
  366. display: inline-block;
  367. vertical-align: top; }
  368.  
  369. div.landingBoxContent {
  370. line-height: 100px;
  371. vertical-align: middle;
  372. display: inline-block;
  373. text-align: center; }
  374.  
  375. /*line-height:200px; border-top:1px solid #ccc; border-right:1px solid #ccc; */
  376. div.landingBoxContent * {
  377. vertical-align: middle; }
  378.  
  379. div.landingBoxContent:last-child {
  380. border-right: 0; }
  381.  
  382. div.landingBoxInner {
  383. display: inline-block;
  384. color: #67bfab;
  385. top: 0; }
  386.  
  387. /*width: 50%; */
  388. div.landingRenderContainer {
  389. text-align: center;
  390. color: #FFF;
  391. background: #67bfab;
  392. line-height: initial;
  393. padding: 0 25px; }
  394.  
  395. div.landingRenderInnerContainer {
  396. margin: auto;
  397. padding: 80px 0 95px; }
  398.  
  399. div.landingRenderInnerContainer form {
  400. width: 755px;
  401. margin: auto; }
  402.  
  403. div.landingRenderInnerContainer input.newsletterName {
  404. margin: 0 25px 0 0; }
  405.  
  406. div.landingNewsletterHead {
  407. font-family: Rational-SemiBold, sans-serif;
  408. font-size: 42px; }
  409.  
  410. div.landingFooterContainer {
  411. font-family: Rational-Book, sans-serif;
  412. font-size: 16px;
  413. background: #efefef;
  414. padding: 20px 140px;
  415. line-height: initial;
  416. position: relative;
  417. width: 100%;
  418. margin-top:15px;
  419. bottom: 0; }
  420.  
  421. div.rightBlock a {
  422. padding: 0 !important;
  423. display: inline-block; }
  424.  
  425. div.landingFooter {
  426. display: inline-block;
  427. vertical-align: middle;
  428. width: 50%; }
  429.  
  430. div.landingFooter.rightBlock {
  431. text-align: right; }
  432.  
  433. div.landingFooter a, div.landingFooter span, div.landingFooter img {
  434. vertical-align: middle;
  435. cursor: pointer; }
  436.  
  437. div.landingFooter a:last-child, div.landingFooter img:last-child {
  438. padding-right: 0; }
  439.  
  440. div.landingFooter img {
  441. height: 31px;
  442. padding-left: 10px; }
  443.  
  444. div.landingFooter a {
  445. padding-right: 15px; }
  446.  
  447. div.landingBoxContent, div.landingContainer, div.landingButtonContainer, div.landingRenderContainer {
  448. padding: 0 20px; }
  449.  
  450. div.validatorEmailContainer {
  451. display: inline-block;
  452. position: relative; }
  453.  
  454. span.landingNewsletterRequired {
  455. display: block;
  456. text-align: left;
  457. padding: 10px 0 25px; }
  458.  
  459. button.landingNewsletterGo {
  460. border: 1px solid #fff !important;
  461. max-width: 100%;
  462. width: 745px; }
  463.  
  464. form.landingNewsletterForm textarea {
  465. margin: 20px 0 !important;
  466. height: 100px;
  467. padding: 10px;
  468. font-family: Rational-Book, sans-serif;
  469. font-size: 16px;
  470. max-width: 100%;
  471. width: 745px; }
  472.  
  473. span.landingNewsletterText {
  474. font-family: Rational-Book, sans-serif;
  475. font-size: 24px;
  476. display: block;
  477. padding: 20px 0 35px;
  478. margin: auto;
  479. line-height: 1.25;
  480. max-width: 755px; }
  481.  
  482. span.landingBoxText {
  483. font-family: "Rational-SemiBold", sans-serif;
  484. font-size: 17px;
  485. line-height: 1.1;
  486. letter-spacing: 0.2px; }
  487.  
  488. img.landingBoxImage {
  489. width: 30px;
  490. margin: auto auto 10px auto;
  491. display: block !important; }
  492.  
  493. div.landingSliderImage {
  494. display: inline-block; }
  495.  
  496. img.invalidHiddenEmail {
  497. position: absolute;
  498. right: 15px;
  499. top: 8px;
  500. display: none; }
  501.  
  502. img.invalidField {
  503. position: absolute;
  504. right: 15px;
  505. top: 8px; }
  506.  
  507. button.landingButton.active span {
  508. color: #FFF; }
  509.  
  510. button.landingButton.inactive span {
  511. color: #67bfab; }
  512.  
  513. div.mainLanding {
  514. height: 100vh; }
  515.  
  516. div.badgeContainer {
  517. text-align: center; }
  518.  
  519. div.badgeContainer.google {
  520. display: inline-block;
  521. vertical-align: middle; }
  522.  
  523. div.badgeContainer.google img {
  524. width: 156px; }
  525.  
  526. div.badgeContainer.apple {
  527. display: inline-block;
  528. vertical-align: middle; }
  529.  
  530. img.landingBoxMobileImage {
  531. width: 200px; }
  532.  
  533. div.landingBoxOuter {
  534. width: 80%;
  535. margin: 0 auto; }
  536.  
  537. div.landingPictureBox {
  538. display: inline-block;
  539. vertical-align: middle;
  540. margin-left: 20px; }
  541.  
  542. div.landingPageContainer {
  543. overflow: hidden;
  544. width: 80%;
  545. margin: auto; }
  546.  
  547. div.landingSliderContainer {
  548. width: 33%; }
  549.  
  550. div.landingSliderPictureContainer {
  551. -ms-flex-item-align: center;
  552. -ms-grid-row-align: center;
  553. align-self: center;
  554. background-image: url(/images/static/Handy.png);
  555. background-repeat: no-repeat;
  556. background-position: center;
  557. background-size: contain;
  558. -ms-flex-preferred-size: 454px;
  559. flex-basis: 454px;
  560. height: 660px;
  561. width: 320px;
  562. margin: auto; }
  563.  
  564. div.landingLoginContainer {
  565. width: 66%;
  566. margin-left: 33%;
  567. text-align: center;
  568. float: right; }
  569.  
  570. div.landingLoginContainer .mainLogoImage {
  571. width: 280px !important; }
  572.  
  573. div.landingPageDescription {
  574. font-size: 18px;
  575. margin-bottom: 40px; }
  576.  
  577. div.landingTextSliderContainer {
  578. width: 100%;
  579. margin-top: 10px;
  580. text-align: center; }
  581.  
  582. img.landingSliderPictureContainer {
  583. widht: 0 !important;
  584. overflow: visible !important; }
  585.  
  586. div.landingSliderPictureInnerContainer {
  587. width: 265px;
  588. margin: 95px 0px 0 29px;
  589. position: absolute !important; }
  590.  
  591. div.landingSliderPictureInnerContainer img.landingBoxImage {
  592. width: 265px; }
  593.  
  594. div.landingSliderPictureInnerContainer .wvItemContainer.webvisumItemContainer0 {
  595. width: 265px !important; }
  596.  
  597. div.landingSliderTextInnerContainer {
  598. width: 265px;
  599. margin: auto; }
  600.  
  601. /* Persönliche Daten ändern CSS */
  602. div.editData.pageHeadline { margin-bottom:95px; }
  603. form.editDataContainer { width:1130px; margin:auto; }
  604. form.editDataContainer span, span.creditsHeadline, span.creditsAmount, div.companyHeadline { font-family:Rational-Medium, sans-serif; font-size:18px; color:#000; display:block; line-height:22px; margin-bottom:5px; }
  605. form.editDataContainer div.editRequiredField { margin-bottom:65px; }
  606. div.editDataButtons { width:100%; text-align:center; }
  607. div.editDataButtons button.cancelButton { margin-right:20px; }
  608. div.editCompanyLink { margin-top:50px; text-align:center; }
  609. div.editDataContent.oneThird, div.editDataContent.twoThird { display:inline-block; vertical-align:top; }
  610. div.editDataContent input { height:40px; width:370px; margin:0 10px 10px 0; border:1px solid #ccc; }
  611. div.editDataContent input.postalInput { width:110px; }
  612. div.editDataContent input.locationInput { width:250px; }
  613. div.editDataContent button.sexButtons { width:180px; }
  614. div.editCompanyLink span { display:inline-block; font-family:Rational-Book, sans-serif; font-size:15px; }
  615.  
  616. /* Credtits CSS */
  617. div.creditsContainer { text-align:center; }
  618. div.creditsContentContainer { max-width:760px; padding:0 25px; text-align:left; display:inline-block; margin-top:40px; }
  619. div.creditsConfirmedContainer span, div.creditsTotalContainer span { display:block; padding-bottom:10px; }
  620. div.creditsContentContainer span.creditsReadyText { display:none; }
  621. div.creditsExplanation { margin:10px auto 30px; }
  622. span.creditsHeadline, span.creditsAmount { display:block; padding:10px 0 20px; }
  623.  
  624. /* Require Credits CSS */
  625. div.requireContainer { text-align:center; }
  626. div.requireInnerContainer { width:768px; text-align:left; margin:40px auto 50px; padding:0 20px; }
  627. div.requireInnerContainer button { width:359px; max-width:100%; }
  628. div.requireInnerContainer input { width:100%; max-width:100%; margin-bottom:10px; }
  629. div.requireInnerContainer input:last-child { padding-right:10px !important; }
  630. div.requireBankContainer, div.requirePaypalContainer { margin:50px 0; }
  631. div.requireTaxContainer { margin:30px 0 10px; }
  632. div.requireInnerContainer input[type="checkbox"] { position:relative; left:inherit; max-width:inherit; width:auto; margin:0 15px 0 0; height:auto; vertical-align:middle; }
  633. div.requireInnerContainer span.creditsConfirmedText { display:none; }
  634. div.paypalInformationContainer, div.bankInformationContainer { margin:30px 0; }
  635. div.requireContainer div.confirmButtons { padding-top:15px; }
  636. div.requireContainer span.requireHeadline, div.requireContainer span#vatSymbol { font-family:Rational-Medium, sans-serif; display:inline-block; vertical-align:middle; }
  637. span#vatSymbol { cursor:pointer; }
  638. div#vatContainer { position: absolute; right:0; left:0; bottom:-165px; text-align:center; }
  639.  
  640. /* Add Style CSS */
  641. div.addStyleContainer { text-align:center; }
  642. div.addStyleButtons { width:370px; margin:50px auto; }
  643. div.addStyleButtons button { display:block; margin:0 0 20px 0; }
  644.  
  645. /* New Style CSS */
  646. div.newStyleContainer span.editStyle { display:none; }
  647. div.newStyleContainer, div.editStyleContainer { margin-bottom:30px; }
  648. div.newStyleInnerContainer, div.editStyleInnerContainer { margin:30px auto 0; max-width:800px; padding:0 25px; text-align:center; color:#000; line-height:1; }
  649. div.newStyleInnerContainer div.controlButtons button { cursor:pointer; }
  650. div.newStyleInnerContainer div.controlButtons { height:1px; }
  651. div.newStyleInnerContainer div.mainImageHolder { position:relative; }
  652. div.newStyleInnerContainer textarea { margin-bottom:20px; padding:10px; height:100px; }
  653. div.duplicationContainer { text-align:left; font-family:Rational-Medium, sans-serif; font-size:30px; margin:15px 0 10px; }
  654. div.duplicationContainer img, div.recImageContainer { position:relative; max-width:135px; max-height:100px; margin-right:5px; }
  655. div.duplicationContainer > img { margin-right:5px; }
  656. div.newStyleInnerContainer img.addButton { margin-right:10px; display:inline-block; cursor:pointer; max-width:35px; }
  657. div.newStyleInnerContainer div.mainImageHolder, div.newStyleInnerContainer div.mainImageHolder > img, div.editStyleInnerContainer div.mainImageHolder > img { max-width:300px; max-height:300px; width:300px; margin:auto; }
  658. div.newStyleInnerContainer div.mainImageHolder .pubContainer { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:260px; max-height:120px; background:#FFF; padding:10px 0; }
  659. div.newStyleInnerContainer .cameraIcon { max-width:50px; top:-170px; position:relative; cursor:pointer; }
  660. div.newStyleInnerContainer div.previewDescription { padding:15px 0 7px; word-break: break-word; }
  661. div.newStyleInnerContainer div.previewText { padding:15px 25px; word-break: break-word; }
  662. div.newStyleInnerContainer div.suadeoOuterIconContainer { text-align:center; width:300px; height:300px; position:absolute; top:0; right:0; left:0; bottom:0; margin:0 auto; }
  663. div.topStyleContainer { width:300px; margin:0 auto 30px; font-family:Roboto-Regular, sans-serif; }
  664. div.bottomStyleContainer { text-align:center; }
  665. div.normalStyleContainer div.previewHeader { display:none; }
  666. button#cancelNewStyle { padding:0; margin:0; }
  667. button#deleteStyle.deletion { margin-top:10px; }
  668. form#newStyleForm { text-align:left; position:relative; }
  669. form#newStyleForm div.feedHeader { border:0; }
  670. form#newStyleForm div.controlButtons { text-align:center; }
  671. div.successSocialIcons { margin:10px 0; }
  672. span.successHeadline { }
  673. div.successSocialIcons img { margin-left:15px; }
  674. div.successSocialIcons > img:first-child { margin-left:0; }
  675. div.uploadArrowContainer { position:relative; width:100%; height:50px; line-height:50px; font-family:"Rational-SemiBold", sans-serif; text-align:left; border-bottom: 2px solid #ccc; }
  676. img.uploadArrow { position:absolute; left:5%; margin:auto; top:0; bottom:0; max-height:32px; cursor:pointer; }
  677.  
  678. /* Edit Style CSS */
  679. div.editStyleInnerContainer div.pubInnerContainer { display:none; }
  680. div.editStyleComponent div.editStyleInnerContainer { max-width: 420px; }
  681. div.editStyleInnerContainer button { display:block; margin:0 auto 10px; }
  682. div#editCurrentStyle { display:inline-block; max-width:370px; width:100%; margin-right:10px; }
  683. button#profileButton { margin:0; }
  684. button#publishButton { margin:0; }
  685. img.successImage { cursor:pointer; }
  686.  
  687. /* Edit profile CSS */
  688. div.editProfileContainer { text-align:center; }
  689. div.editProfileContainer a { display:block; }
  690. div.editProfileContainer button { display:block; max-width:90% !important; margin:0 auto 10px !important; }
  691. div.editProfileInnerContainer { max-width:370px; margin:auto; text-align:left; }
  692. div.editProfileInnerContainer div.profileContainer { height:255px; }
  693. div.editProfileInnerContainer div.profileImageContainer { height:255px; }
  694.  
  695. /* Edit password CSS */
  696. div.editPasswordInnerContainer { text-align:center; margin:40px 0; padding:0 25px; }
  697. div.editPasswordInnerContainer input { display:block; margin:10px auto 15px !important; }
  698. div.editPasswordInnerContainer button { display:block; margin:10px auto 15px !important; }
  699. span.editPasswordText { display:block; margin:20px 0; }
  700. span#deleteAccount { cursor:pointer; }
  701.  
  702. /* User specific page */
  703. #usernamePage div.feedHeader { display:none; }
  704.  
  705. /* Register layer CSS => No official design yet */
  706. div.registerOuterContainer { text-align:center; }
  707. div.registerInnerContainer div#sexContainer button { background-color:#efefef; color:#999; display:inline-block; margin:0 10px 0 0; max-width:48%; }
  708. div.registerDesignContainer { text-align:left; margin:auto; max-width:750px; }
  709. div.registerDesignContainer span.registerLabel { font-family:Rational-SemiBold, sans-serif; color:#000; margin:20px 0 15px; display:block; }
  710. div.registerDesignContainer span.registerLabel.extra { display:block; margin:20px auto 15px; max-width:97%; }
  711. div.registerDesignContainer span.registerLabel:first-child { margin-top:20px; }
  712. div.registerCentered { text-align:center; margin:auto; }
  713. div.registerCentered.bottom { max-width:370px; }
  714. div.registerCentered input, div.registerCentered span { margin:0 auto 10px; text-align:left; }
  715. div.registerCentered div.registerLeft { text-align:left; }
  716. div.registerLeft div.dynamicCheckbox { display:block; }
  717. form.registerForm span.agbText { cursor:pointer; }
  718. input.registerValue { display:block; margin-bottom:10px; }
  719. button#createAccount { margin-top:20px !important; }
  720. span.passwordWarning { display:block; margin:10px auto 15px; text-align:left; width:370px; max-width:100%; }
  721.  
  722. div.overlay { position:fixed; top:0; right:0; bottom:0; left:0; margin:auto; height:100%; width:100%; z-index:11; }
  723. div.backgroundOverlay { position:fixed; top:0; right:0; bottom:0; left:0; margin:auto; height:100%; width:100%; z-index:10; background:#000; opacity:0.6; }
  724. div.overlay form { width:100%; }
  725. div.innerOverlay { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:88%; height:88%; background:#FFF; color:#000; padding:0 0 20px; z-index:11; }
  726. body.overlayActive { overflow:hidden; }
  727. body.overlayActive div.overlay div.innerOverlay { overflow-y:auto; }
  728. div.overlay div.innerOverlay { overflow:auto; -webkit-overflow-scrolling: touch; }
  729. div.overlay div.loginInnerContainer { display:block; }
  730. div.overlay div.pageHeadline { font-family:Roboto-Bold, sans-serif; font-size:21px; line-height:40px; height:40px; margin-bottom:50px; }
  731.  
  732. /* Login Choice layer CSS => No official design yet */
  733. div.createContainer { text-align:center; }
  734. div.createInnerContainer { max-width:370px; margin:auto; text-align:center; }
  735. div.createContainer span.createLabel, div.createContainer span.createLogin { color:#000; margin-right:20px; display:inline-block; }
  736. div.createContainer button { display:block; margin:0 auto 20px; }
  737. div.loginOrResetContainer { text-align:center; }
  738. form.loginForm, form.resetForm { text-align:left; max-width:370px; margin:auto; }
  739. form.loginForm input, form.resetForm input { margin: 0 auto 20px; display:block; }
  740. div.resetPasswordContainer form.resetForm { text-align:center; }
  741. div.forgotPasswordContainer { text-align:center; }
  742. span.forgotPassHandle { margin:0 auto 40px; display:block; cursor:pointer; }
  743. span.createLogin { cursor:pointer; }
  744.  
  745. /* Impressum CSS */
  746. div.impressumContainer, div.privacyContainer, div.contactContainer { max-width:1125px; padding:20px 25px 25px; margin:auto; }
  747. div.impressumHeadline, div.privacyHeadline, div.contactHeadline { font-family:Rational-SemiBold, sans-serif; padding:10px 0; }
  748. div.impressumHeadline:first-child, div.privacyHeadline:first-child, div.contactHeadline:first-child { padding:0; }
  749. a.returnButton { color:#67bfab; display:block; padding:15px 0; }
  750. div.impressumPage > * { display:block; }
  751.  
  752. /* AGB CSS */
  753. div.agbComponent { display:none; }
  754. div.agbContainer { display:none; position:absolute; top:0; right:0; left:0; bottom:0; margin:auto; height:100%; width:100%; padding:20px; background:#FFF; }
  755. div.agbInnerContainer { display:inline-block; margin:auto; text-align:left; }
  756.  
  757. /* Company CSS */
  758. div.companyContainer { text-align:center; }
  759. div.companyInnerContainer { margin:40px auto 20px; text-align:left; width:730px; max-width:100%; }
  760. div.companyInnerContainer button { max-width:100%; width:359px; }
  761. div.companyInnerContainer input { display:block; margin-bottom:10px; width:100%; max-width:100%; }
  762. div.companyInnerContainer div#sexContainer { margin:10px 0 20px; }
  763. div.companyInnerContainer div#sexContainer button { background-color:#efefef; color:#999; }
  764. div.companyHeadline { margin-top:40px; }
  765. div.companyButtonContainer { margin-top:20px; }
  766.  
  767. /* Welcome page and instructions CSS */
  768.  
  769. input:disabled { opacity:0.5; }
  770. button:disabled { opacity:0.5; }
  771.  
  772. div#welcomeComponent { text-align:center; padding:30px 20px; max-width:852px; width:100%; margin:auto; }
  773. div#welcomeComponent div.welcomeFollowBox {}
  774. div#welcomeUserPage h4.secondHeadline { font-family: Rational-Medium, sans-serif; margin: 30px auto 0; padding:0 20px; text-align: center; max-width:560px; font-size:21px; }
  775. div#welcomeUserPage button.welcomeProceedButton { width:100%; max-width:560px; margin:10px auto 40px; display:block; }
  776. div#welcomeUserPage button.welcomeProceedButton.above { margin:30px auto 0; }
  777. div#welcomeUserPage div.mediumHeader { font-size:18px; font-family:Rational-Medium; text-align: center; padding: 10px 0 0; }
  778. div#welcomeUserPage { display:block; }
  779. div.welcomeUserContainer { text-align:left; max-width:600px; margin: auto; }
  780. div.welcomeUserContainer div#sexContainer button:first-child { max-width:49%; margin:0 2% 0 0; }
  781. div.welcomeUserContainer div#sexContainer button { max-width:49%; }
  782. div.welcomeUserContainer div#sexContainer { padding:20px 0; }
  783. div.welcomeUserContainer div.profileImageComponent div.profileImageContainer { height:195px; padding:0 0 40px 0; text-align:center; }
  784. div.welcomeUserContainer div.profileImageComponent { height:195px; }
  785. div.welcomeUserContainer div.profileImageComponent div.profileDataContainer { display:none; }
  786. div.welcomeUserContainer div.choices { margin-top:15px; }
  787. div.welcomeUserContainer input.welcomeUsername { width:100%; max-width:100%; margin-bottom:20px; }
  788. div.welcomeUserPictureContainer { text-align:center; }
  789. div.welcomeUserPictureContainer div.profileImageContainer img { border-radius:99px; max-width:155px; max-height:155px; }
  790. div.welcomeFollowContainer { width:100%; }
  791. div.welcomeFollowBox { padding:0 10px 10px; border:1px solid #67bfab; position:relative; }
  792. div.welcomeFollowBoxRow { padding-bottom:10px; border-bottom:1px solid #000; }
  793. div.welcomeFollowBoxRow:last-child { border:0; padding-bottom:0; }
  794. div.welcomeFollowBox div.feedContentContainer { width:100%; margin:0; text-align:left; }
  795. div.welcomeFollowBox div.feedContentContainer > div:last-child { text-align:left; padding:0; }
  796. div.welcomeFollowBox div.feedSmallPadding { padding:10px 0; }
  797. div.welcomeFollowBox div.feedHeader { padding:10px 0; margin:0; height:inherit; line-height:1; text-align:left; }
  798. div.welcomeFollowBox div.feedProfileImage img.feedImage { max-height:150px; }
  799. div.welcomeFollowBox div.feedHeader img.feedSmallImage { margin-right:10px; }
  800. div.welcomeFollowBox div.suadeoFollowIconContainer { float:right; }
  801. div.welcomeFollowBox div.feedProfileImage { max-width:150px; margin-right:10px; text-align:left; display:inline-block; vertical-align:top; }
  802. div.welcomeFollowBox div.feedProfileImage:last-child { margin:0; }
  803. div.feedDescription { word-wrap:break-word; font-size:14px; }
  804. div.welcomeMessageContainer { text-align:left; max-width:600px; margin:auto; }
  805. div.welcomeButtonContainer, div.breadcrumpContainer { max-width:600px; margin:auto; padding:0 20px 20px; }
  806. div.breadcrumpContainer ul, div.breadcrumpContainer li { list-style-type:decimal; list-style-position:inside; margin:0; padding:0; }
  807. div.breadcrumpContainer li { width:33.3%; float:left; }
  808. div.breadcrumpContainer li.active { font-family:Rational-SemiBold, sans-serif; }
  809. /*
  810. * Media-queries from top to bottom resolution wise.
  811. * Additionally, reversed from the bottom to the top for proper resolution inheritance and avoiding !important.
  812. */
  813.  
  814. /* Query for performance reasons - NOT DESIGN RELATED - could be placed above too as a General Style */
  815. @media only screen and (min-width:1281px) {
  816. div.feedContentParentContainer:nth-of-type(4n+0) { margin-right:0; }
  817. span.landingNewsletterRequired { font-size:14px; width:741px; margin:auto; }
  818. span.landingNewsletterText { width:100%; padding:30px 0 40px; }
  819. form.landingNewsletterForm input { width:360px; }
  820. div.landingFooter img { height:37px; }
  821. div.landingContainer div { max-width:1125px; }
  822. div.landingContainer h2 { width:741px; }
  823. div.landingButtonContainer button { width:370px; }
  824. }
  825. /* Desktops von 1024-1280 pixel breite */
  826. @media only screen and (min-width:1280px) and (max-width:1920px) {
  827. body main.pageContainer { top:125px; }
  828. body#publicPage main.pageContainer, body#profilePage main.pageContainer, body#wishlistPage main.pageContainer { top:175px; }
  829. .navigation div.navigationContainer { height:125px; line-height:1; padding: 35px 0 0; }
  830. div.profileNameContainer { top:130px; }
  831. }
  832. @media only screen and (min-width:1025px) and (max-width:1280px) {
  833. body main.pageContainer { top:115px; }
  834. body#publicPage main.pageContainer, body#profilePage main.pageContainer, body#wishlistPage main.pageContainer { top:165px; }
  835. div.searchResultContainer { width:53%; }
  836. span.facetCheckboxStr { font-size:12px; }
  837. .navigation div.navigationContainer { height:115px; line-height:1; padding:30px 0 0 ; }
  838. div.profileNameContainer { top:120px; }
  839. div.feedContainer, div.profileFeedContainer { padding: 5.6% 8.7%; }
  840. div.feedContentParentContainer { width:31.7%; margin:0 2.3% 1.5% 0; }
  841. div.feedContentParentContainer:nth-of-type(3n+0) { margin-right:0; }
  842. div.navigationInnerContainer div { width:30.9%; margin-right:2.4%; }
  843. div.navigationInnerContainer div.navigationBox4 { display:none; }
  844. div.navigationInnerContainer div.navigationBox3 { margin-right:0; border-right:0; }
  845. form.editDataContainer { width:695px; }
  846. div.editDataContent.oneThird, div.editDataContent.twoThird { width:100%; }
  847. div.editDataContent.twoThird { margin-top:30px; }
  848. div.editDataContent.twoThird input { width:345px; margin:0 5px 5px 0; }
  849. div.editDataContent input { width:695px; max-width:695px; margin:0; }
  850. div.editDataContent input.paddedDown { margin-bottom:40px !important; }
  851. div.editDataContent input:last-child { padding-right:10px !important; }
  852. form.editDataContainer div.editDataContent input.postalInput { width:105px; margin-right:5px; }
  853. form.editDataContainer div.editDataContent input.locationInput { width:235px; }
  854. div.editDataContent button.sexButtons { width:344px; margin-right:7px; }
  855. div.editDataButtons button { width:343px; }
  856. div.editDataButtons button.cancelButton { margin-right:5px; }
  857. form.editDataContainer div.editRequiredField { margin-bottom:30px; }
  858. div.editCompanyLink { margin-top:30px; }
  859. button.landingNewsletterGo, span.landingNewsletterRequired, form.landingNewsletterForm textarea { width:695px; margin:auto; }
  860. form.landingNewsletterForm input { width:335px; }
  861. div.landingFooterContainer { padding:40px 111px; }
  862. div.landingContainer div { max-width:875px; }
  863. div.landingContainer h2 { max-width:455px; }
  864. div.landingButtonContainer button { width:300px; }
  865. }
  866. /* Button fixes from 800px to lower values */
  867. @media only screen and (max-width:800px) {
  868. div#editCurrentStyle { display:block; }
  869. div#editCurrentStyle button { display:block !important }
  870. }
  871. /* Tablet Querformat (Landscape) bzw bis zu 1280 pixel breite Browser */
  872. @media only screen and (min-width:769px) and (max-width:1024px) {
  873. body main.pageContainer { top:100px; }
  874. body#publicPage main.pageContainer, body#profilePage main.pageContainer, body#wishlistPage main.pageContainer { top:150px; }
  875. span.facetCheckboxStr { font-size:11px; }
  876. .navigation div.navigationContainer { height:100px; line-height:1; padding:35px 0; }
  877. div.profileNameContainer { top:105px; }
  878. div.feedContainer, div.profileFeedContainer { padding:4.9%; }
  879. div.feedContentParentContainer { width:48.5%; margin:0 2.7% 1.5% 0; }
  880. div.feedContentParentContainer:nth-of-type(2n+0) { margin-right:0; }
  881. div.navigationInnerContainer div { width:49%; margin-right:2%; }
  882. div.navigationInnerContainer div.navigationBox4, div.navigationInnerContainer div.navigationBox3 { display:none; }
  883. div.navigationInnerContainer div.navigationBox2 { margin-right:0; border-right:0; }
  884. form.editDataContainer { width:610px; }
  885. div.editDataContent.oneThird, div.editDataContent.twoThird { width:100%; }
  886. div.editDataContent.twoThird { margin-top:30px; }
  887. div.editDataContent.twoThird input { width:300px; margin:0 5px 5px 0; }
  888. div.editDataContent input.paddedDown { width:610px; max-width:610px; margin-bottom:40px; }
  889. form.editDataContainer div.editDataContent input.postalInput { width:105px; margin-right:5px; }
  890. form.editDataContainer div.editDataContent input.locationInput { width:190px; }
  891. div.editDataContent button.sexButtons { width:302px; margin-right:5px; }
  892. div.editDataButtons button { width:302px; font-family:Roboto-Bold, sans-serif; }
  893. div.editDataButtons button.cancelButton { margin-right:5px; }
  894. form.editDataContainer div.editRequiredField { margin-bottom:30px; }
  895. div.editCompanyLink { margin-top:30px; }
  896. div.landingNewsletter { padding:65px 0 75px; }
  897. button.landingNewsletterGo, span.landingNewsletterRequired, form.landingNewsletterForm textarea { width:605px; margin:auto; }
  898. form.landingNewsletterForm input { width:290px; }
  899. div.landingFooterContainer { padding:30px 53px; }
  900. div.landingContainer div { max-width:916px; }
  901. div.landingBoxInner span.landingBoxText { font-family:Roboto-Medium, sans-serif; font-size:20px; display:block; width:280px; }
  902. }
  903. /* Tablet Hochformat (Portrait) bzw bis zu 1280 pixel breite Browser */
  904. @media only screen and (min-width:481px) and (max-width:768px) {
  905. div.mainLogoContainer { height:88px; }
  906. div.feedContainer, div.profileFeedContainer { padding:6.5%; }
  907. div.feedContentParentContainer { width:48%; margin:0 3.7% 1.5% 0; }
  908. div.feedContentParentContainer:nth-of-type(2n+0) { margin-right:0; }
  909. div.navigation div.navigationFooter { margin:0 50px; }
  910. div.navigation div.navigationFooter { padding:42px 0 57px; }
  911. div.navigation div.navigationFooter div.textRight span { padding-right:0; }
  912. div.navigation div.navigationInnerContainer { padding:14px 0 0; margin:0 50px; border:0; }
  913. form.editDataContainer { width:440px; }
  914. div.editDataContent.oneThird, div.editDataContent.twoThird { width:100%;}
  915. div.editDataContent.twoThird { margin-top:30px; }
  916. div.editDataContent input { width:440px; max-width:440px; margin:0 5px 5px 0; }
  917. div.editDataContent input.paddedDown { margin-bottom:40px; }
  918. div.editDataContent input:last-child { padding-right:10px !important; }
  919. form.editDataContainer div.editDataContent input.postalInput { width:170px; margin-right:5px; }
  920. form.editDataContainer div.editDataContent input.locationInput { width:265px; }
  921. div.editDataContent button.sexButtons { width:215px; margin-right:10px; }
  922. div.editDataButtons button { width:214px; }
  923. div.editDataButtons button.cancelButton { margin-right:10px; }
  924. form.editDataContainer div.editRequiredField { margin-bottom:30px; }
  925. div.editCompanyLink { margin-top:30px; }
  926. div.landingFooterContainer { padding:30px 46px; }
  927. div.landingContainer div { max-width:675px; }
  928. }
  929. /* Kaskade 1 - Alles unter 320 Pixel. Mobile Hochformat General */
  930. @media only screen and (max-width:320px) {
  931. span, div, p, a { font-size:13px; }
  932. input, button, textarea, select { font-size:14px; }
  933. div.overlay div.pageHeadline { font-size:14px !important; }
  934. div.navigation div.navigationInnerContainer { border-bottom:0; }
  935. div.navigation div.navigationFooter div { width:100%; padding-top:10px; text-align:left; }
  936. div.navigation div.navigationFooter div.textRight { padding-top:10px; }
  937. div.navigation div.navigationFooter div.textRight img { float:right; }
  938. div.landingSliderImage { width:320px; }
  939. form.landingNewsletterForm { text-align:center; }
  940. button { font-family:"Roboto-Regular", sans-serif; max-width:270px !important; width:100% !important; height:50px; display:inline-block; vertical-align:middle; padding:0; margin:0 0 10px 0 !important; text-align:center; border:2px solid #FFF; }
  941. div.newStyleInnerContainer div.mainImageHolder, div.newStyleInnerContainer div.mainImageHolder > img { max-width:270px; max-height:270px; width:100%; }
  942. div.newStyleInnerContainer .croppie-container .cr-boundary{width:80% !important; height:80% !important; }
  943. }
  944. /* Kaskade 2 - Alles unter 480 Pixel. Mobile Querformat General */
  945. @media only screen and (max-width:480px) {
  946. div.overlay div.pageHeadline { font-size:16px; }
  947. .desktopOnly { display:none; }
  948. .mobileOnly { display:block; }
  949. div.requireInnerContainer input[type="checkbox"] { margin: 0 10px 0 0; }
  950. div.newStyleInnerContainer, div.editStyleInnerContainer { padding:0 15px; }
  951. #stylePageOverlay div.informationText { padding:10px 15px; }
  952. div.searchResultContainer { padding-left:10px; }
  953. div.searchOuterContainer { padding:0 15px; }
  954. div#searchKeywords, div#searchFacets, div#searchFilters { padding:0 15px; }
  955. div.newStyleContainer div#productSearchResults { padding:0 15px 30px; }
  956. div.newStyleContainer div.searchResultRow { padding:10px; margin-bottom:15px; }
  957. div.searchResultRow span { line-height:1; font-size:12px; }
  958. div.searchResultContainer { line-height:1; }
  959. div.searchContainer div.searchResultRow { max-width:100%; padding:0 15px; }
  960. div.newStyleContainer div.searchResultRow span.searchResultRowDesc { display:none; }
  961. div.newStyleContainer div.searchResultRow button.searchButton { bottom:10px; right:10px; max-width:110px !important; font-size:13px; height:35px; }
  962. span.changeLetter { text-transform:capitalize; }
  963. div.feedContainer, div.profileFeedContainer { padding:0; }
  964. div.feedContentParentContainer { width:100%; margin:0; }
  965. div.feedContentContainer { margin:0; }
  966. div.feedContentContainer:first-child div.feedHeader { border-top:0; }
  967. div.feedHeader { margin:0 25px; padding:5px 0; height:55px; line-height:40px; border-top:1px solid #ccc; }
  968. div.profileImageContainer { height:315px; padding:30px 0 30px; }
  969. #feedPage img.suadeoIcon.edit { left:8px; }
  970. #profileuploadPage div.suadeoIconContainer { vertical-align:baseline; float:right; }
  971. div.navigationFooter div.textRight { font-family:"Roboto-Regular", sans-serif; }
  972. div.landingContainer { font-family:Roboto-Regular, sans-serif; text-align:left; }
  973. div.landingContainer h2 { width:auto; font-size:20px !important; text-align:center; }
  974. div.landingContainer div { width:auto; font-size:18px !important; line-height:1.33; letter-spacing:initial; text-align:center; margin:25px 0 0 0 !important; }
  975. div.landingContainer h2 span:last-child { font-family:Roboto-Medium, sans-serif; font-weight:bold; }
  976. #landingPage div.landingBoxContent { height:inherit; line-height:initial; padding:50px 25px; }
  977. div.landingBoxInner { height:inherit; line-height:initial; text-align:center; }
  978. img.landingBoxImage { display:block; margin:0 auto 20px; }
  979. span.landingBoxText { font-family:Roboto-Medium, sans-serif; font-size:20px; letter-spacing:0.2px; }
  980. div.landingNewsletter { padding:50px 0 60px; }
  981. div.landingNewsletter div, div.landingNewsletter span { text-align:center; font-family:Robot-Regular, sans-serif; }
  982. div.landingNewsletter span.landingNewsletterRequired { text-align:left; font-size:14px; width:100%; }
  983. #landingPage div.landingFooterContainer { padding:20px 25px; }
  984. div.triple, div.dual, div.double { width:100%; }
  985. div.editCompanyLink span { display:inline; }
  986. div.editCompanyLink { margin:10px 0 20px; }
  987. input { font-family:"Roboto-Regular", sans-serif; color:#999; background:#efefef; max-width:430px; width:100%; height:50px; text-align:left; border:1px solid #ccc !important; padding:0 15px; box-sizing:border-box; margin:0 0 10px 0 !important; box-shadow:none !important; width:100%; transition:all .3s; }
  988. button { font-family:"Roboto-Regular", sans-serif; max-width:430px !important; width:100% !important; height:50px; display:inline-block; vertical-align:middle; padding:0; margin:0 0 10px 0 !important; text-align:center; border:2px solid #FFF; }
  989. button span { font-family:"Roboto-Regular", sans-serif; font-size:20px; letter-spacing:0.2px; }
  990. div.createContainer { padding:0; }
  991. div.createContainer span.createLabel { margin-right:10px !important; }
  992. span.landingNewsletterText { padding:30px 25px 40px; width:inherit !important; }
  993. div.landingContainer h2 { width:auto !important; }
  994. div.validatorEmailContainer { width:100%; }
  995. div.editDataPage div.editData.pageHeadline { margin-bottom:20px; }
  996. form.editDataContainer { max-width:100%; margin:0; padding:0 20px; }
  997. div.editDataContent { width:100%; }
  998. span.editDataPadded { padding-top:10px; }
  999. div.editDataContent input { width:100%; max-width:100%; margin:0 5px 5px 0; }
  1000. div.editDataContent input.postalInput { width:23%; margin-right:2% !important; }
  1001. div.editDataContent input.locationInput { width:75%; }
  1002. div.pageHeadline { line-height:40px; height:40px; }
  1003. div.requireContainer div.requireInnerContainer { width:100%; margin:20px auto 30px; }
  1004. div.requireInnerContainer button { width:100%; max-width:100%; margin:0 0 10px 0; }
  1005. div.newStyleInnerContainer .croppie-container .cr-boundary{width:270px !important; height:270px !important; }
  1006. div.createInnerContainer { max-width:410px; padding:0 20px; }
  1007. div.createInnerContainer button#email { margin-bottom:30px !important; }
  1008. img.closingIcon { width:15px; top:12.5px; left:10px; }
  1009. span.previousStep { background:url("../images/previous_s.png") no-repeat; width:15px; height:15px; top:12.5px; right:10px; text-indent:-9999px; }
  1010. form.loginForm, form.resetForm { max-width:inherit; }
  1011. span.forgotPasswordText { font-family:Roboto-Regular, sans-serif; display:block; margin-top:20px; }
  1012. div.profileImageComponent { position:relative; height:315px; }
  1013. div.profileDataContainer { position:absolute; top:8px; left:0; right:0; bottom:8px; }
  1014. div.profileDataContainer span.socialValue.following { position:absolute; right:25px; top:15px; }
  1015. div.profileDataContainer span.socialValue.followers { position:absolute; left:25px; top:15px; }
  1016. div.profileDataContainer span.socialValue.uploads { position:absolute; left:25px; bottom:15px; }
  1017. div#publicProfile span.socialValue.following { right:0; }
  1018. div#publicProfile .suadeoFollowIconContainer { right:20px;}
  1019. div.profileDataContainer div.suadeoFollowIconContainer { position:absolute; right:45px; bottom:10px; }
  1020. div.profileDataContainer.mobile span.socialValue { font-family:Roboto-Regular, sans-serif; padding:0; }
  1021. #edit_profilePage div.profileDataContainer.mobile { display:none; }
  1022. div.profileDataContainer.mobile { display:block; font-family: "Roboto-Regular", sans-serif;}
  1023. div.profileDataContainer.desktop { display:none; font-family: "Roboto-Regular", sans-serif;}
  1024. div.mainLogoContainer { height:68px; }
  1025. div.choices { position:absolute; top:0; right:0; left:0; bottom:0; height:21px; margin:auto; }
  1026. div.choices span.cancel { position:relative; left:-75px; }
  1027. div.choices span#confirmImage { position:relative; right:-75px; }
  1028. div.profileContainer div#profileCrop.croppie-container { padding:30px 0px; }
  1029. div.profileImageComponent img.profileImage.bigPicture, div.publicImageContainer img.publicImage { position:absolute; top:0; right:0; left:0; bottom:0; margin:auto; }
  1030. div.profileContainer .croppie-container .cr-boundary, div.welcomeUserPictureContainer .croppie-container .cr-boundary { position:absolute; top:0; right:0; left:0; bottom:0; margin:auto; }
  1031. div.publicImageContainer { height: 315px; }
  1032. div#publicProfile div.profileDataContainer { display: block; }
  1033. }
  1034. /* Kaskade 2.5 - Alles unter 600 Pixel. CUSTOM FIX VON UNS FÜR FEHLENDES PHONE DESIGH */
  1035. @media only screen and (max-width:600px) {
  1036. #profileuploadPage div.suadeoIconContainer { margin-left:35px; }
  1037. div.profileDataContainer span.socialValue { padding-right:25px; }
  1038. div.landingFooter { vertical-align:top; }
  1039. div.landingFooter a, div.landingFooter span { display:block; font-family:Roboto-Regular, sans-serif; padding-bottom:10px; }
  1040. div.landingPage div.landingButtonContainer button { margin:0 0 10px 0; width:100%; max-width:100%; }
  1041. div.landingButtonContainer { margin-bottom:42px; }
  1042. }
  1043. /* Kaskade 3 - Alles unter 768 Pixel. Tablet Hochformat (Portrait) */
  1044. @media only screen and (max-width:768px) {
  1045. div.registerDesignContainer, form.loginForm, form.resetForm, div.agbInnerContainer { padding:0 15px; }
  1046. div.searchResultRow button.searchButton { max-width:125px !important; font-size:14px; }
  1047. div.newStyleContainer div.innerOverlay { height:100%; width:100%; }
  1048. div.overlayContainer div.overlay div.innerOverlay { height:82%; }
  1049. div.searchResultRow { vertical-align:top; }
  1050. div.searchResultRow span.searchResultRowDesc { font-size:12px; }
  1051. #stylePageOverlay div.searchInnerContainer button { height:40px; }
  1052. body main.pageContainer { top:50px; }
  1053. body#publicPage main.pageContainer, body#profilePage main.pageContainer, body#wishlistPage main.pageContainer { top:100px; }
  1054. span.searchResultRowDesc { left:150px; }
  1055. img.mainLogoImage { width:150px; }
  1056. div.navigationInnerContainer div { display:inline; width:100%; margin:0; border:0; }
  1057. div.navigation div.navigationContainer { height:50px; line-height:1; padding:15px 0; }
  1058. div.profileNameContainer { top:55px; }
  1059. div.navigation div.navigationFooter div { width:50%; }
  1060. div.navigation div.navigationButton img, div.navigation div.navigationButton object { max-height:22px; }
  1061. div.navigationFooter div { font-family:"Roboto-Regular", sans-serif; }
  1062. div.navigation .menuentry { border-bottom:2px solid #ccc; }
  1063. div.navigationFooter span.navigationFooterItem { padding-right:10px; }
  1064. form#newStyleForm button, div.editCurrentStyle { margin:0 0 10px 0 !important; width:100%; }
  1065. div.landingBoxInner span.landingBoxText { font-family:Rational-SemiBold, sans-serif; font-size:18px; display:block; margin:auto; }
  1066. form.landingNewsletterForm input { width:100%; max-width:100%; }
  1067. button.landingNewsletterGo, span.landingNewsletterRequired, form.landingNewsletterForm textarea { width:100%; margin:auto; }
  1068. div.validatorEmailContainer { margin-top:15px; display:block; }
  1069. div.companyInnerContainer button { width:100%; max-width:100%; margin-bottom:10px; }
  1070. div.requireInnerContainer { width:480px; margin:20px auto 30px; }
  1071. div.requireInnerContainer button { width:100%; max-width:100%; margin:0 0 10px 0; }
  1072. div.landingRenderInnerContainer form { width:100%; }
  1073. div.wvSliderButtonContainer { bottom:-6px; margin-bottom:13px; }
  1074. span.wvSliderButton { width:12px; height:12px; margin-left:15px; }
  1075. }
  1076. /* Kaskade 4 - Alles unter 1024 Pixel. Tablet Querformat (Landscape) */
  1077. @media only screen and (max-width:1024px) {
  1078. body span, body div, body p, body a { font-size:14px; }
  1079. body input, body button, body textarea, body select { font-size:15px; }
  1080. div.searchResultContainer { width:53.8%; }
  1081. div.searchResultRow button { max-width:150px !important; height:40px; }
  1082. div.searchResultRow span { font-size:13px; }
  1083. div.navigation span.navigationDescription { display:none; }
  1084. div.navigationButton img, div.navigationButton object { max-height:28px; }
  1085. div.landingButtonContainer button { width:258px; }
  1086. }
  1087. /* Kaskade 5 - Alles unter 1280 Pixel. Desktop */
  1088. @media only screen and (max-width:1280px) {
  1089. span.landingNewsletterText { width:455px; padding:30px 0 40px; }
  1090. div.landingContainer h2 { width:455px; font-size:24px; }
  1091. img.landingBoxImage { display:block; padding-bottom:15px; margin:auto; }
  1092. span.landingBoxText { max-width:310px; display:block; }
  1093. div.landingBoxInner { height:auto !important; }
  1094. div.editData.pageHeadline { margin-bottom:45px; }
  1095. }
  1096. @media only screen and (max-width:1920px) {
  1097. span, div, p, a { font-size:15px; }
  1098. input, button, textarea, select { font-size:16px; }
  1099. }
  1100. /* Kaskade 6 - Alles über 1280 Pixel. Befindet sich oben im File vor den Media Queries */
  1101.  
  1102. div#usualNewImageCrop { text-align:center; }
  1103. #loadingComponent { width:300px; height:300px; position:absolute; top:0; right:0; left:0; bottom:0; margin:0 auto; }
  1104. #loadingComponent .loader { position:absolute; top:0; right:0; left:0; bottom:0; margin:auto; }
  1105. #profileLoader { position:absolute; top:0; right:0; left:0; bottom:0; margin:auto; z-index:99999; display:none; }
  1106. div.newStyleContainer div.innerOverlayContainer { height:100%; position:relative; }
  1107. #searchStyleLoader { display:none; position:absolute; top:-100px; right:0; left:0; bottom:0; margin:auto; z-index:99999; }
  1108. #newStyleLoader { display:none; position:absolute; top:-160px; right:0; left:0; bottom:0; margin:auto; z-index:99999; }
  1109. .specialOuterIconContainer { display:none; }
  1110.  
  1111.  
  1112. .wvSliderContainer { width:99999px; }
  1113. div.feedContent .wvImageContainer { height:100px; line-height:100px; }
  1114. .wvItemContainer { display:inline-block; text-align:center; }
  1115. .wvSliderImage { cursor:pointer; max-height:100%; vertical-align:middle; }
  1116. .wvSliderCaption { padding:5px 10px 20px; margin:auto; text-align:center; font-size:12px; }
  1117. .wvSliderButtonContainer { position:relative; bottom:0; right:0; left:0; margin-bottom:10px; text-align:center; }
  1118. .wvSliderButton { display:inline-block; border-radius:10px; width:8px; height:8px; margin-left:10px; cursor:pointer; background-color:#67bfab; }
  1119. .wvSliderButton.active { background-color:#000; }
  1120. .wvSliderArrow, .wvSliderMiniArrow { position:absolute; top:-10px; bottom:0; margin:auto; cursor:pointer; z-index:1; background-repeat:no-repeat; background-size:40px; }
  1121. .wvSliderArrow { width:40px; height:40px; }
  1122. .wvSliderMiniArrow { font-family:"slick", sans-serif; font-size:20px; background-color:transparent; color:#67bfab; border-radius:20px; width:20px; height:26px; }
  1123. .wvSliderArrow.webvisumLeft { background-image:url(/images/arrow-left.png); }
  1124. .wvSliderArrow.webvisumRight { background-image:url(/images/arrow-right.png); }
  1125. .wvSliderMiniArrow.webvisumLeft:before { content: "←"; }
  1126. .wvSliderMiniArrow.webvisumRight:before { content: "→"; }
  1127. .webvisumLeft { left:10px; }
  1128. .webvisumRight { right:10px; }
  1129. .feedContent .wvSliderCaption { padding:5px 0 0; font-size:10.5px; }
  1130. .feedContent > div > img { max-width:25%; }
  1131. .croppie-container .cr-image{z-index:-1;position:absolute;top:0;left:0;transform-origin:0 0;max-width:none}
  1132. .croppie-container .cr-viewport{position:absolute;border:2px solid #fff;margin:auto;top:0;bottom:0;right:0;left:0;box-shadow:0 0 0 899px rgba(0,0,0,0.5);z-index:0}
  1133. .croppie-container .cr-vp-circle{border-radius:50%}
  1134. .croppie-container .cr-overlay{z-index:1;position:absolute;cursor:move}
  1135. .croppie-container .cr-slider-wrap{width:75%;margin:0 auto;margin-top:25px;text-align:center; display:none;}
  1136. .croppie-result{position:relative;overflow:hidden}
  1137. .croppie-result img{position:absolute}
  1138. div.newStyleInnerContainer .croppie-container .cr-boundary{position:relative;overflow:hidden;margin:0 auto;z-index:1; width:299px !important; height:299px !important; }
  1139. div.profileContainer .croppie-container .cr-boundary, div.welcomeUserPictureContainer .croppie-container .cr-boundary{position:relative;overflow:hidden;margin:0 auto;z-index:1; width:155px !important; height:155px !important; }
  1140. div.profileContainer div#profileCrop.croppie-container { padding:40px 0 20px; }
  1141. .loader {
  1142. width: 100px;
  1143. height: 20px;
  1144. position: absolute;
  1145. top: 50%;
  1146. left: 50%;
  1147. transform: translate(-50%, -50%);
  1148. }
  1149. .loader > div {
  1150. content: " ";
  1151. width: 20px;
  1152. height: 20px;
  1153. background: #2196F3;
  1154. border-radius: 100%;
  1155. position: absolute;
  1156. animation: shift 2s linear infinite;
  1157. }
  1158. .loader > div:nth-of-type(1) {
  1159. animation-delay: -.4s;
  1160. }
  1161. .loader > div:nth-of-type(2) {
  1162. animation-delay: -.8s;
  1163. }
  1164. .loader > div:nth-of-type(3) {
  1165. animation-delay: -1.2s;
  1166. }
  1167. .loader > div:nth-of-type(4) {
  1168. animation-delay: -1.6s;
  1169. }
  1170.  
  1171. @keyframes shift {
  1172. 0% {
  1173. left: -60px;
  1174. opacity: 0;
  1175. background-color: #67bfab;
  1176. }
  1177. 10% {
  1178. left: 0;
  1179. opacity: 1;
  1180. }
  1181. 90% {
  1182. left: 100px;
  1183. opacity: 1;
  1184. }
  1185. 100% {
  1186. left: 160px;
  1187. background-color: grey;
  1188. opacity: 0;
  1189. }
  1190. }
  1191.  
  1192. @keyframes fadeIn {
  1193. to {
  1194. opacity: 1;
  1195. }
  1196. }
  1197. @keyframes fadeOut {
  1198. to {
  1199. opacity: 0;
  1200. }
  1201. }
  1202. .is-paused {
  1203. animation-play-state: paused;
  1204. }
  1205.  
  1206. /* Slick external CSS */
  1207. .slick-loading .slick-list {
  1208. background: #fff url("../images/ajax-loader.gif") center center no-repeat; }
  1209.  
  1210. /* Icons */
  1211. @font-face {
  1212. font-family: 'slick';
  1213. font-weight: normal;
  1214. font-style: normal;
  1215. src: url("../font/slick.eot");
  1216. src: url("../font/slick.eot?#iefix") format("embedded-opentype"), url("../font/slick.woff") format("woff"), url("../font/slick.ttf") format("truetype"), url("../font/slick.svg#slick") format("svg"); }
  1217. /* Arrows */
  1218. .slick-prev,
  1219. .slick-next {
  1220. width: inherit !important;
  1221. font-size: 0;
  1222. line-height: 0;
  1223. position: absolute;
  1224. top: 45%;
  1225. display: block;
  1226. width: 20px;
  1227. height: 20px;
  1228. padding: 0;
  1229. -webkit-transform: translate(0, -50%);
  1230. -ms-transform: translate(0, -50%);
  1231. transform: translate(0, -50%);
  1232. cursor: pointer;
  1233. color: transparent;
  1234. border: none;
  1235. outline: none;
  1236. background: transparent; }
  1237.  
  1238. .slick-prev:hover,
  1239. .slick-prev:focus,
  1240. .slick-next:hover,
  1241. .slick-next:focus {
  1242. color: transparent;
  1243. outline: none;
  1244. background: transparent; }
  1245.  
  1246. .slick-prev:hover:before,
  1247. .slick-prev:focus:before,
  1248. .slick-next:hover:before,
  1249. .slick-next:focus:before {
  1250. opacity: 1; }
  1251.  
  1252. .slick-prev.slick-disabled:before,
  1253. .slick-next.slick-disabled:before {
  1254. /*opacity: .25;*/ }
  1255.  
  1256. .slick-prev:before,
  1257. .slick-next:before {
  1258. font-family: 'slick';
  1259. font-size: 20px;
  1260. line-height: 1;
  1261. opacity: 1;
  1262. color: #67bfab;
  1263. -webkit-font-smoothing: antialiased;
  1264. -moz-osx-font-smoothing: grayscale; }
  1265.  
  1266. .slick-prev {
  1267. left: 10px;
  1268. z-index: 1; }
  1269.  
  1270. [dir='rtl'] .slick-prev {
  1271. right: -25px;
  1272. left: auto; }
  1273.  
  1274. .slick-prev:before {
  1275. content: '←'; }
  1276.  
  1277. [dir='rtl'] .slick-prev:before {
  1278. content: '→'; }
  1279.  
  1280. .slick-next {
  1281. right: 10px;
  1282. z-index: 1; }
  1283.  
  1284. [dir='rtl'] .slick-next {
  1285. right: auto;
  1286. left: -25px; }
  1287.  
  1288. .slick-next:before {
  1289. content: '→'; }
  1290.  
  1291. [dir='rtl'] .slick-next:before {
  1292. content: '←'; }
  1293.  
  1294. /* Dots */
  1295. .slick-dotted.slick-slider {
  1296. margin-bottom: 40px; }
  1297.  
  1298. .slick-dots {
  1299. position: absolute;
  1300. bottom: -25px;
  1301. display: block;
  1302. width: 100%;
  1303. padding: 0;
  1304. margin: 0;
  1305. list-style: none;
  1306. text-align: center; }
  1307.  
  1308. .slick-dots li {
  1309. position: relative;
  1310. display: inline-block;
  1311. width: 15px;
  1312. height: 20px;
  1313. margin: 0;
  1314. padding: 0;
  1315. cursor: pointer; }
  1316.  
  1317. .slick-dots li button {
  1318. font-size: 0;
  1319. line-height: 0;
  1320. display: block;
  1321. width: 15px;
  1322. height: 20px;
  1323. padding: 5px;
  1324. cursor: pointer;
  1325. color: transparent;
  1326. border: 0;
  1327. outline: none;
  1328. background: transparent; }
  1329.  
  1330. .slick-dots li button:hover,
  1331. .slick-dots li button:focus {
  1332. outline: none; }
  1333.  
  1334. .slick-dots li button:hover:before,
  1335. .slick-dots li button:focus:before {
  1336. opacity: 1; }
  1337.  
  1338. .slick-dots li button:before {
  1339. font-family: 'slick';
  1340. font-size: 9px;
  1341. line-height: 20px;
  1342. position: absolute;
  1343. top: 0;
  1344. left: 0;
  1345. width: 15px;
  1346. height: 20px;
  1347. content: '•';
  1348. text-align: center;
  1349. opacity: 1;
  1350. color: #67bfab;
  1351. -webkit-font-smoothing: antialiased;
  1352. -moz-osx-font-smoothing: grayscale; }
  1353.  
  1354. .slick-dots li.slick-active button:before {
  1355. opacity: .75;
  1356. color: black; }
  1357.  
  1358. .slick-slider {
  1359. position: relative;
  1360. display: block;
  1361. box-sizing: border-box;
  1362. -webkit-user-select: none;
  1363. -moz-user-select: none;
  1364. -ms-user-select: none;
  1365. user-select: none;
  1366. -webkit-touch-callout: none;
  1367. -khtml-user-select: none;
  1368. -ms-touch-action: pan-y;
  1369. touch-action: pan-y;
  1370. -webkit-tap-highlight-color: transparent; }
  1371.  
  1372. .slick-list {
  1373. position: relative;
  1374. display: block;
  1375. overflow: hidden;
  1376. margin: 0;
  1377. padding: 0; }
  1378.  
  1379. .slick-list:focus {
  1380. outline: none; }
  1381.  
  1382. .slick-list.dragging {
  1383. cursor: pointer;
  1384. cursor: hand; }
  1385.  
  1386. .slick-slider .slick-track,
  1387. .slick-slider .slick-list {
  1388. -webkit-transform: translate3d(0, 0, 0);
  1389. -moz-transform: translate3d(0, 0, 0);
  1390. -ms-transform: translate3d(0, 0, 0);
  1391. -o-transform: translate3d(0, 0, 0);
  1392. transform: translate3d(0, 0, 0); }
  1393.  
  1394. .slick-track {
  1395. position: relative;
  1396. top: 0;
  1397. left: 0;
  1398. display: block; }
  1399.  
  1400. .slick-track:before,
  1401. .slick-track:after {
  1402. display: table;
  1403. content: ''; }
  1404.  
  1405. .slick-track:after {
  1406. clear: both; }
  1407.  
  1408. .slick-loading .slick-track {
  1409. visibility: hidden; }
  1410.  
  1411. .slick-slide {
  1412. display: none;
  1413. float: left;
  1414. height: 100%;
  1415. min-height: 1px; }
  1416.  
  1417. [dir='rtl'] .slick-slide {
  1418. float: right; }
  1419.  
  1420. .slick-slide img {
  1421. display: inline-block; }
  1422.  
  1423. .slick-slide.slick-loading img {
  1424. display: none; }
  1425.  
  1426. .slick-slide.dragging img {
  1427. pointer-events: none; }
  1428.  
  1429. .slick-initialized .slick-slide {
  1430. display: inline-block;
  1431. text-align: center; }
  1432.  
  1433. .slick-loading .slick-slide {
  1434. visibility: hidden; }
  1435.  
  1436. .slick-vertical .slick-slide {
  1437. display: block;
  1438. height: auto;
  1439. border: 1px solid transparent; }
  1440.  
  1441. .slick-arrow.slick-hidden {
  1442. display: none; }
  1443.  
  1444. .slick-dots li {
  1445. display: inline-block;
  1446. margin: auto; }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!