web.less 70 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706
  1. body {
  2. font-family: @font-family;
  3. color: @body-color;
  4. }
  5. * {
  6. outline: none;
  7. }
  8. hr {
  9. border-top: none;
  10. }
  11. img {
  12. max-width: 100%;
  13. }
  14. a:focus {
  15. outline: none
  16. }
  17. a:hover {
  18. cursor: pointer;
  19. }
  20. @images: "../img";
  21. @box-body-bg1:url("@{images}/pattern.png");
  22. @box-body-bg2:url("@{images}/pattern2.png");
  23. @box-body-bg3:url("@{images}/pattern3.png");
  24. @box-body-bg4:url("@{images}/pattern4.png");
  25. @box-body-bg5:url("@{images}/pattern5.png");
  26. @box-body-bg6:url("@{images}/pattern6.png");
  27. #wrapwrap{
  28. background: @light-color;
  29. }
  30. .nav {
  31. >li {
  32. >a {
  33. &:focus, &:hover {
  34. background: transparent;
  35. }
  36. }
  37. }
  38. }
  39. .title-block {
  40. overflow: hidden;
  41. h4 {
  42. font-size: @title;
  43. font-weight: 700;
  44. margin: 0;
  45. font-size: @font-size-base + 4;
  46. text-align: center;
  47. color: @dark-color;
  48. }
  49. span {
  50. /*border-bottom: 3px solid @theme;*/
  51. display: inline-block;
  52. padding-bottom:10px;
  53. position: relative;
  54. &:after{
  55. content:"";
  56. width:62px;
  57. height:3px;
  58. background-color: @theme;
  59. color:@theme;
  60. display: inline-block;
  61. position: absolute;
  62. bottom:0;
  63. right:0;
  64. left:0;
  65. margin:auto;
  66. };
  67. }
  68. }
  69. /*Colors*/
  70. .bg-blue {
  71. background-color: #3498DB !important;
  72. }
  73. .bg-turquoise {
  74. background-color: #1ABC9C !important;
  75. }
  76. .bg-green {
  77. background-color: #2ECC71 !important;
  78. }
  79. .bg-yellow {
  80. background-color: #F1C40F !important;
  81. }
  82. .bg-red {
  83. background-color: #E74C3C !important;
  84. }
  85. .bg-pink {
  86. background-color: #f74b94 !important;
  87. }
  88. .bg-purple {
  89. background-color: #9B59B6 !important;
  90. }
  91. .bg-brown {
  92. background-color: #7b5844 !important;
  93. }
  94. /**/
  95. .sb-title {
  96. overflow: hidden;
  97. margin-bottom: 20px;
  98. span {
  99. text-transform: uppercase;
  100. font-size: @font-size-base + 2;
  101. font-weight: 600;
  102. margin: 0;
  103. &:after {
  104. border-bottom: 1px solid darken(@light-color, 3%);
  105. border-top: 1px solid rgba(0, 0, 0, 0.1);
  106. content: "";
  107. display: inline-block;
  108. position: relative;
  109. vertical-align: middle;
  110. width: 100%;
  111. right: -1.25rem;
  112. margin-right: -100%;
  113. }
  114. }
  115. }
  116. .best-seller-products .owl-buttons {
  117. .owl-prev, .owl-next {
  118. font-size: 0;
  119. width: 40px;
  120. height: 40px;
  121. border: 1px solid @dark-color;
  122. text-align: center;
  123. line-height: 38px;
  124. display: block !important;
  125. position: absolute;
  126. top: 0;
  127. bottom: 0;
  128. margin: auto;
  129. background: @dark-color;
  130. }
  131. .owl-prev {
  132. left: -20px;
  133. @media (max-width:1300px) {
  134. left: 0px;
  135. }
  136. @media (max-width:1200px) {
  137. left: 0px;
  138. }
  139. @media (max-width:768px) {
  140. left: 0px;
  141. }
  142. &:before {
  143. content: "\f104";
  144. font-family: "FontAwesome";
  145. font-size: @font-size-base * 2;
  146. color: darken(@light-color, 20%);
  147. }
  148. }
  149. .owl-next {
  150. right: -20px;
  151. @media (max-width:1300px) {
  152. right: 0px;
  153. }
  154. @media (max-width:1200px) {
  155. right: 0px;
  156. }
  157. @media (max-width:768px) {
  158. right: 0px;
  159. }
  160. &:before {
  161. content: "\f105";
  162. font-family: "FontAwesome";
  163. font-size: @font-size-base * 2;
  164. color: darken(@light-color, 20%);
  165. }
  166. }
  167. }
  168. .pagination {
  169. display: inline-block;
  170. vertical-align: middle;
  171. margin: 0;
  172. li {
  173. a {
  174. border-radius: 0 !important;
  175. color: @theme;
  176. }
  177. &.active {
  178. a {
  179. background: @theme;
  180. border-color: @theme;
  181. &:hover {
  182. background-color: @dark-color;
  183. border-color: @dark-color;
  184. }
  185. }
  186. }
  187. &:hover a {
  188. background-color: @dark-color;
  189. color: @light-color;
  190. border-color: @dark-color;
  191. }
  192. }
  193. }
  194. .page-title {
  195. padding: 8px 0px;
  196. background-color: lighten(@dark-color, 70%);
  197. border-top: 1px solid lighten(@dark-color, 70%);
  198. margin-bottom: 40px;
  199. h1 {
  200. margin: 0;
  201. float: left;
  202. font-size: @title - 5;
  203. }
  204. }
  205. .breadcrumb {
  206. float: left;
  207. background: none;
  208. margin: 0;
  209. padding: 0;
  210. width: 100%;
  211. li {
  212. color: lighten(@dark-color, 30%);
  213. font-size: @font-size-base - 2;
  214. font-weight: 400;
  215. a {
  216. padding: 6px 4px;
  217. display: inline-block;
  218. vertical-align: middle;
  219. color: lighten(@dark-color, 30%);
  220. font-size: @font-size-base - 2;
  221. font-weight: 400;
  222. }
  223. &.active {
  224. color: @theme;
  225. }
  226. }
  227. }
  228. .dropdown-menu {
  229. border-radius: 0;
  230. padding: 0;
  231. > li {
  232. + li {
  233. border-top: 1px solid darken(@light-color, 10%);
  234. }
  235. > a {
  236. padding: 8px 10px;
  237. &:hover {
  238. background: @theme;
  239. color: @light-color;
  240. }
  241. }
  242. }
  243. }
  244. .carousel-control {
  245. &.left {
  246. .previous-icon {
  247. position: absolute;
  248. top: 0;
  249. bottom: 0;
  250. margin: auto;
  251. width: 25px;
  252. left: 0;
  253. right:0;
  254. height: 46px;
  255. img {
  256. position: relative;
  257. top: auto;
  258. left: auto;
  259. right: auto;
  260. }
  261. }
  262. background: none;
  263. }
  264. &.right {
  265. .next-icon {
  266. position: absolute;
  267. top: 0;
  268. bottom: 0;
  269. margin: auto;
  270. width: 25px;
  271. height: 46px;
  272. left: 0;
  273. right:0;
  274. img {
  275. position: relative;
  276. top: auto;
  277. left: auto;
  278. right: auto;
  279. }
  280. }
  281. background: none;
  282. }
  283. @media (max-width:768px) {
  284. display: none;
  285. }
  286. }
  287. /* Home slider
  288. -------------------------------*/
  289. .theme-home-slider {
  290. div.carousel {
  291. .carousel-indicators li {
  292. margin-right: 4px;
  293. border: 1px solid @theme;
  294. &.active {
  295. background: @theme;
  296. }
  297. }
  298. }
  299. .item {
  300. /*padding: 58px 0;*/
  301. @media (max-width:1024px) {
  302. padding: 0px 0;
  303. }
  304. @media (max-width:767px) {
  305. padding: 0px 0;
  306. }
  307. }
  308. blockquote {
  309. margin: 0;
  310. padding: 150px 15px 100px 15px;
  311. text-align: left;
  312. border: none;
  313. line-height:1;
  314. @media (max-width:1000px) {
  315. padding:60px 0px;
  316. }
  317. @media (max-width:767px) {
  318. padding: 30px 20px;
  319. }
  320. /*@media (max-width:618px) {
  321. padding:70px;
  322. }*/
  323. @media (max-width:400px) {
  324. padding:15px 20px;
  325. }
  326. h2 {
  327. margin: 0px 0px 10px 0px;
  328. padding: 0;
  329. font-weight: 800;
  330. font-size: @font-size-base * 3 + 5;
  331. color: @dark-color;
  332. /*text-transform: uppercase;*/
  333. @media (max-width:767px) {
  334. font-size: @font-size-base * 3 - 10;
  335. }
  336. @media (max-width:620px) {
  337. font-size: @font-size-base + 3;
  338. }
  339. }
  340. h5 {
  341. margin: 0;
  342. padding: 0;
  343. font-size: @font-size-base * 2 - 1;
  344. font-weight: 800;
  345. color: @dark-color;
  346. /*text-transform: uppercase;*/
  347. @media (max-width:767px) {
  348. font-size: @font-size-base * 3 - 10 ;
  349. }
  350. @media (max-width:620px) {
  351. font-size: @font-size-base;
  352. }
  353. span {
  354. color: @theme;
  355. font-size: @font-size-base * 2 - 2;
  356. font-weight: 800;
  357. @media (max-width:620px) {
  358. font-size: @font-size-base ;
  359. }
  360. }
  361. }
  362. p {
  363. margin: 0;
  364. padding: 0 0 0px;
  365. font-size: @font-size-base * 2 + 4;
  366. /*text-transform: uppercase;*/
  367. color: @theme;
  368. font-weight: normal;
  369. @media (max-width:767px) {
  370. font-size: @font-size-base * 3 - 10;
  371. }
  372. @media (max-width:620px) {
  373. font-size: @font-size-base * 1;
  374. }
  375. }
  376. .btn-box {
  377. margin-top: 45px;
  378. a {
  379. border: 1px solid @light-color;
  380. padding: 6px 10px;
  381. display: inline-block;
  382. vertical-align: top;
  383. text-transform: uppercase;
  384. color: @dark-color;
  385. font-weight: 500;
  386. font-size:@font-size-base - 2;
  387. border: 1px solid lighten(@dark-color, 50%);
  388. &:hover{
  389. background:lighten(@dark-color, 50%);
  390. color: @light-color;
  391. }
  392. @media (max-width:767px) {
  393. padding:7px 10px;
  394. font-size:@font-size-base - 4;
  395. }
  396. @media (max-width:620px) {
  397. padding:5px 10px;
  398. font-size:@font-size-base - 4;
  399. }
  400. i{
  401. margin-left:7px;
  402. }
  403. }
  404. a:hover {
  405. text-decoration: none;
  406. }
  407. @media (max-width:767px) {
  408. margin-top:10px;
  409. }
  410. }
  411. }
  412. .item1 {
  413. /* .bg-img('../img/slider-img1.png'); */
  414. background-repeat: no-repeat;
  415. .bg-size(cover);
  416. }
  417. .item2 {
  418. /* .bg-img('../img/slider-img1.png' ); */
  419. background-repeat: no-repeat;
  420. .bg-size(cover);
  421. }
  422. }
  423. /* ads section
  424. -------------------------------*/
  425. .ads-section {
  426. width: 100%;
  427. display: inline-block;
  428. vertical-align: top;
  429. padding: 38px 0px 17px 0px;
  430. .adsb-inner {
  431. @media (max-width:767px) {
  432. margin-bottom: 30px;
  433. img {
  434. max-width: 100%;
  435. }
  436. }
  437. a {
  438. width: 100%;
  439. height: 100%;
  440. z-index: 1;
  441. color: #fff;
  442. vertical-align: middle;
  443. text-align: center;
  444. &:hover {
  445. text-decoration: none;
  446. }
  447. ;
  448. /* &:after {
  449. background: @light-color;
  450. bottom: 0;
  451. height: 0px;
  452. left: 0;
  453. margin: auto;
  454. opacity: 0;
  455. position: absolute;
  456. right: 0;
  457. top: 0;
  458. .transition(all, 0.5s, ease);
  459. width: 0px;
  460. -moz-transform: scale(0);
  461. -webkit-transform: scale(0);
  462. -o-transform: scale(0);
  463. transform: scale(0);
  464. content: " ";
  465. float: left;
  466. }
  467. */
  468. /* &:hover {
  469. &:after {
  470. height: 100%;
  471. width: 100%;
  472. opacity: 0.2;
  473. -moz-transform: scale(1);
  474. -webkit-transform: scale(1);
  475. -o-transform: scale(1);
  476. transform: scale(1);
  477. }
  478. }*/
  479. }
  480. }
  481. .middle-banner {
  482. display: table;
  483. text-align: center;
  484. margin-bottom: 20px;
  485. text-align: center;
  486. position: relative;
  487. background-size: cover;
  488. a {
  489. display: table-cell;
  490. }
  491. .middle-content {
  492. color: @light-color;
  493. display: table;
  494. z-index: 1;
  495. vertical-align: bottom;
  496. text-align: center;
  497. width: 100%;
  498. height: 160%;
  499. line-height:50px;
  500. @media (max-width:767px) {
  501. padding:20px 0px;
  502. line-height:28px;
  503. }
  504. &:hover {
  505. text-decoration: none;
  506. }
  507. .line1 {
  508. font-size: @font-size-base * 2 + 8;
  509. font-weight: 100;
  510. margin: 0;
  511. padding: 0;
  512. @media (max-width:767px) {
  513. font-size: @font-size-base * 2;
  514. }
  515. }
  516. .line2 {
  517. margin: 0;
  518. padding: 0;
  519. font-size: @font-size-base * 4 + 6;
  520. font-weight: bold;
  521. color: @light-color;
  522. text-transform: uppercase;
  523. @media (max-width:767px) {
  524. font-size: @font-size-base * 2;
  525. }
  526. }
  527. .line3 {
  528. margin:0;
  529. padding: 0;
  530. font-size: @font-size-base * 5 + 6;
  531. font-weight: 100;
  532. color: @light-color;
  533. text-transform: uppercase;
  534. @media (max-width:767px) {
  535. font-size: @font-size-base * 2;
  536. }
  537. }
  538. }
  539. }
  540. .small-banners {
  541. background-color: lighten(@dark-color, 70%);
  542. height: 280px !important;
  543. width: 100%;
  544. background-size: cover;
  545. display: table;
  546. text-align: center;
  547. margin-bottom: 20px;
  548. padding: 28px;
  549. position: relative;
  550. .dark-div {
  551. .transition(all, 0.5s, ease);
  552. width: 0px;
  553. -moz-transform: scale(0);
  554. -webkit-transform: scale(0);
  555. -o-transform: scale(0);
  556. transform: scale(0);
  557. content: " ";
  558. float: left;
  559. opacity: 0;
  560. transition: all 0.5s ease;
  561. margin: auto;
  562. background-color: @dark-color;
  563. position: absolute;
  564. height: 0px;
  565. right: 0;
  566. bottom: 0;
  567. left: 0;
  568. top: 0;
  569. padding: 13px;
  570. .inner-div {
  571. border: 1px solid lighten(@dark-color, 50%);
  572. width: 0px;
  573. height: 0px;
  574. display: inline-block;
  575. background-color: @dark-color;
  576. }
  577. }
  578. .inner-content {
  579. display: table-cell;
  580. z-index: 1;
  581. vertical-align: middle;
  582. text-align: center;
  583. &:hover {
  584. text-decoration: none;
  585. }
  586. h5 {
  587. position: absolute;
  588. top: 28px;
  589. left: 0;
  590. right: 0;
  591. margin: 0;
  592. padding: 0;
  593. font-size: @font-size-base;
  594. font-weight: bold;
  595. color: @dark-color;
  596. text-transform: uppercase;
  597. @media (max-width:767px) {
  598. font-size: @font-size-base;
  599. }
  600. }
  601. .image-section {
  602. max-height: 150px;
  603. margin: 10px 0px;
  604. img {
  605. max-width: 100%;
  606. }
  607. .img-responsive {
  608. display: inline-block !important;
  609. }
  610. }
  611. .btn-box {
  612. position: absolute;
  613. bottom: 28px;
  614. left: 0;
  615. right: 0;
  616. button {
  617. color: @light-color;
  618. padding: 7px 15px;
  619. text-align: center;
  620. background-color: @dark-color;
  621. border: none;
  622. text-transform: uppercase;
  623. font-size: @font-size-base - 2;
  624. }
  625. }
  626. }
  627. &:hover {
  628. .dark-div {
  629. height: 100%;
  630. width: 100%;
  631. opacity: 0.8;
  632. -moz-transform: scale(1);
  633. -webkit-transform: scale(1);
  634. -o-transform: scale(1);
  635. transform: scale(1);
  636. .inner-div {
  637. height: 100%;
  638. width: 100%;
  639. opacity: 1;
  640. -moz-transform: scale(1);
  641. -webkit-transform: scale(1);
  642. -o-transform: scale(1);
  643. transform: scale(1);
  644. }
  645. }
  646. }
  647. @media (max-width:900px) {
  648. padding: 0;
  649. }
  650. }
  651. .adsb-inner2 {
  652. margin-bottom: 30px;
  653. width: 100%;
  654. height: 579px;
  655. background-color: @theme!important;
  656. }
  657. }
  658. /* products slider
  659. -------------------------------*/
  660. .products-slider-section {
  661. padding-top:45px;
  662. .psb-inner {
  663. width: 100%;
  664. display: inline-block;
  665. vertical-align: top;
  666. padding: 40px 0;
  667. position: relative;
  668. }
  669. }
  670. .cs-product {
  671. display: inline-block;
  672. @media (max-width:1000px) {
  673. width:263px;
  674. }
  675. .pwp-img {
  676. height: 394px;
  677. width: 263px;
  678. >a {
  679. img {
  680. max-width: 100%;
  681. height: auto;
  682. position: absolute;
  683. top: 0;
  684. right: 0;
  685. left: 0;
  686. bottom: 0;
  687. margin: 0;
  688. /*max-height: 100vh;*/
  689. width:100%;
  690. @media screen and (min-widht:768px) and (max-width:1000px) {
  691. width:263px;
  692. height:394px;
  693. }
  694. }
  695. }
  696. .new {
  697. position: absolute;
  698. top: 20px;
  699. float: left;
  700. padding: 7px 11px;
  701. z-index: 10;
  702. color: @light-color;
  703. background-color: @new-label-color;
  704. font-weight: bold;
  705. font-size: @font-size-base - 4;
  706. }
  707. .red{
  708. background-color:red;
  709. font-weight: bold;
  710. font-size: @font-size-base - 4;
  711. position: absolute;
  712. top: 20px;
  713. float: left;
  714. padding: 7px 11px;
  715. z-index: 10;
  716. color: @light-color;
  717. }
  718. .sale {
  719. position: absolute;
  720. top: 20px;
  721. float: left;
  722. padding: 7px 11px;
  723. color: @light-color;
  724. background-color: @sale-label-color;
  725. font-weight: bold;
  726. z-index: 10;
  727. font-size: @font-size-base - 4;
  728. }
  729. .discount {
  730. position: absolute;
  731. padding: 7px 5px;
  732. float: left;
  733. background-color: darken(@sale-label-color, 5%);
  734. color: @light-color;
  735. font-size: @font-size-base - 4;
  736. top: 20px;
  737. z-index: 10;
  738. left: 45px;
  739. }
  740. }
  741. }
  742. /* products section
  743. -------------------------------*/
  744. .products-section {
  745. .products-list-block {
  746. width: 100%;
  747. display: inline-block;
  748. vertical-align: top;
  749. padding: 40px 0;
  750. }
  751. }
  752. /* service-section
  753. -------------------------------*/
  754. .new-collection {
  755. padding: 85px 0;
  756. position: relative;
  757. background-size: cover;
  758. width: 100%;
  759. background-attachment:scroll;
  760. background-repeat: no-repeat;
  761. .bg-size(cover);
  762. &:before{
  763. content:"";
  764. width:1px;
  765. height:160px;
  766. background-color: @theme;
  767. color:@theme;
  768. display: inline-block;
  769. transform:rotate(45deg);
  770. transform: rotate(135deg);
  771. position: absolute;
  772. top:-23px;
  773. left:42%;
  774. @media (max-width:767px) {
  775. height:100px;
  776. top:-14px;
  777. }
  778. };
  779. &:after{
  780. content: "";
  781. width:1px;
  782. height: 97px;
  783. background-color:@theme;
  784. color:@theme;
  785. display: inline-block;
  786. transform: rotate(-45deg);
  787. position: absolute;
  788. right: 27%;
  789. bottom: -14px;
  790. };
  791. img {
  792. @media (max-width:767px) {
  793. display: none;
  794. }
  795. }
  796. .inner-content {
  797. text-align: left;
  798. width: 100%;
  799. .icon {
  800. .fa {
  801. font-size: @font-size-base * 3;
  802. color: @light-color;
  803. }
  804. }
  805. h5 {
  806. margin: 10px 0 3px 0;
  807. font-size: @font-size-base * 2 + 4;
  808. color: @dark-color;
  809. font-weight: 800;
  810. }
  811. h3 {
  812. color: @theme;
  813. font-size: @font-size-base * 3 + 2;
  814. margin: 0;
  815. padding: 0;
  816. font-weight: 800;
  817. margin-bottom: 8px;
  818. }
  819. p {
  820. margin: 0;
  821. padding: 0;
  822. font-size: @font-size-base;
  823. color: @dark-color;
  824. font-weight: 400;
  825. }
  826. }
  827. .btn-box {
  828. margin-top: 48px;
  829. .transition(all, 0.3s, ease);
  830. border: 1px solid transparent;
  831. display: inline-block;
  832. background-color: @dark-color;
  833. color: @light-color;
  834. a {
  835. border: 1px solid transparent;
  836. padding: 5px 10px;
  837. display: inline-block;
  838. vertical-align: top;
  839. text-transform: uppercase;
  840. color: @light-color;
  841. font-size:@font-size-base - 2;
  842. &:hover {
  843. text-decoration: none;
  844. }
  845. i{
  846. margin-left:7px;
  847. }
  848. }
  849. &:hover {
  850. background-color: @theme;
  851. border: 1px solid @theme;
  852. a {
  853. color: @light-color;
  854. }
  855. }
  856. }
  857. }
  858. /* service-section
  859. -------------------------------*/
  860. /*category section */
  861. .shop-by-category {
  862. padding-top: 66px;
  863. .title-block {
  864. margin: 10px 0px 63px 0px;
  865. }
  866. .sunglasses {
  867. margin-bottom: 40px;
  868. hr {
  869. margin-bottom: 55px;
  870. }
  871. .psb-inner {
  872. border: 1px solid lighten(@theme, 20%);
  873. h5 {
  874. color: @dark-color;
  875. font-weight: bold;
  876. font-size: @font-size-base;
  877. background-color: lighten(@dark-color, 75%);
  878. text-align: center;
  879. margin: 0;
  880. padding: 16px 0px;
  881. }
  882. .owl-carousel {
  883. padding: 26px 16px;
  884. }
  885. }
  886. }
  887. .watch {
  888. margin-bottom: 40px;
  889. hr {
  890. margin-bottom: 55px;
  891. }
  892. .psb-inner {
  893. border: 1px solid lighten(@theme, 20%);
  894. h5 {
  895. color: @dark-color;
  896. font-weight: bold;
  897. font-size: @font-size-base;
  898. background-color: lighten(@dark-color, 75%);
  899. text-align: center;
  900. margin: 0;
  901. padding: 16px 0px;
  902. }
  903. .owl-carousel {
  904. padding: 31px 34px;
  905. .owl-buttons {
  906. padding-top: 33px;
  907. .owl-prev, .owl-next {
  908. font-size: 0;
  909. width: 40px;
  910. height: 40px;
  911. border: 1px solid transparent;
  912. text-align: center;
  913. line-height: 38px;
  914. display: block !important;
  915. position: absolute;
  916. bottom: 18px;
  917. margin: auto;
  918. background: transparent;
  919. }
  920. .owl-prev {
  921. right: 50%;
  922. @media (max-width:1200px) {
  923. right: 50%;
  924. }
  925. &:before {
  926. content: "\f104";
  927. font-family: "FontAwesome";
  928. font-size: @font-size-base * 2;
  929. color: darken(@light-color, 20%);
  930. }
  931. }
  932. .owl-next {
  933. left: 50%;
  934. @media (max-width:1200px) {
  935. left: 50%;
  936. }
  937. &:before {
  938. content: "\f105";
  939. font-family: "FontAwesome";
  940. font-size: @font-size-base * 2;
  941. color: darken(@light-color, 20%);
  942. }
  943. }
  944. }
  945. }
  946. }
  947. }
  948. }
  949. /*category section end */
  950. .testimonials {
  951. padding: 50px 0;
  952. height: auto;
  953. width: 100%;
  954. background-repeat: no-repeat;
  955. position: relative;
  956. &:before{
  957. content:"";
  958. width:1px;
  959. height:118px;
  960. background-color: @theme;
  961. color:@theme;
  962. display: inline-block;
  963. transform: rotate(-135deg);
  964. position: absolute;
  965. top: -16px;
  966. right: 15%;
  967. @media (max-width:768px) {
  968. height:70px;
  969. top:-8px;
  970. }
  971. }
  972. &:after{
  973. content: "";
  974. width: 1px;
  975. height:260px;
  976. background-color:@theme;
  977. color:@theme;
  978. display: inline-block;
  979. transform: rotate(45deg);
  980. position: absolute;
  981. left:32%;
  982. bottom:-37px;
  983. @media (max-width:768px) {
  984. height:70px;
  985. bottom:-10px;
  986. }
  987. }
  988. .content {
  989. text-align: left;
  990. margin: 0;
  991. }
  992. .bg-size(cover);
  993. blockquote {
  994. padding: 0;
  995. border: none;
  996. }
  997. .slider {
  998. padding-left: 20%;
  999. @media (max-width:1200px) {
  1000. padding-left: 20%;
  1001. }
  1002. @media (max-width:1000px) {
  1003. padding-left: 0;
  1004. }
  1005. @media (max-width:768px) {
  1006. padding-left: 0;
  1007. }
  1008. }
  1009. .pf-page-title {
  1010. height: 232px;
  1011. display: table-cell;
  1012. vertical-align: middle;
  1013. @media (max-width:1200px) {
  1014. height: 256px;
  1015. }
  1016. @media (max-width:1000px) {
  1017. height: 10px;
  1018. }
  1019. @media (max-width:768px) {
  1020. height: 10px;
  1021. }
  1022. h4 {
  1023. text-align: right;
  1024. color: @theme;
  1025. font-size: @font-size-base * 2 + 3;
  1026. font-weight: 800;
  1027. display: table;
  1028. width: 100%;
  1029. height: 36px;
  1030. margin: 0px auto;
  1031. }
  1032. }
  1033. p {
  1034. font-size: @font-size-base;
  1035. color:fade(@light-color,65);
  1036. font-weight: 100;
  1037. }
  1038. .author {
  1039. color: @theme;
  1040. font-weight: bold;
  1041. margin-top: 24px;
  1042. font-size: @font-size-base;
  1043. margin-bottom: 0px;
  1044. }
  1045. .designation {
  1046. color: fade(@light-color, 30);
  1047. font-weight: normal;
  1048. font-style: italic;
  1049. }
  1050. .button-bar {
  1051. display: inline-block;
  1052. vertical-align: top;
  1053. width: 100%;
  1054. margin: 25px 0 0 0;
  1055. a {
  1056. border: 1px solid @light-color;
  1057. padding: 10px 25px;
  1058. display: inline-block;
  1059. vertical-align: top;
  1060. text-transform: uppercase;
  1061. color: @light-color;
  1062. }
  1063. }
  1064. .psb-inner {
  1065. padding: 44px 16px;
  1066. .carousel-inner {
  1067. .owl-buttons {
  1068. padding-top: 33px;
  1069. .owl-prev, .owl-next {
  1070. font-size: 0;
  1071. width: 40px;
  1072. height: 40px;
  1073. border: 1px solid transparent;
  1074. text-align: center;
  1075. line-height: 38px;
  1076. display: block !important;
  1077. position: absolute;
  1078. bottom: 18px;
  1079. margin: auto;
  1080. background: transparent;
  1081. }
  1082. .owl-prev {
  1083. left: 0;
  1084. @media (max-width:1200px) {
  1085. left: 0;
  1086. }
  1087. &:before {
  1088. content: "\f104";
  1089. font-family: "FontAwesome";
  1090. font-size: @font-size-base * 2;
  1091. color: fade(@light-color, 30);
  1092. }
  1093. }
  1094. .owl-next {
  1095. left: 21px;
  1096. @media (max-width:1200px) {
  1097. left: 21px;
  1098. }
  1099. &:before {
  1100. content: "\f105";
  1101. font-family: "FontAwesome";
  1102. font-size: @font-size-base * 2;
  1103. color: fade(@light-color, 30);
  1104. }
  1105. }
  1106. }
  1107. }
  1108. }
  1109. @media (max-width:1200px) {
  1110. padding: 50px 0px;
  1111. }
  1112. @media (max-width:767px) {
  1113. padding: 50px 0px;
  1114. }
  1115. }
  1116. /*our-brand-section
  1117. ----------------------------*/
  1118. .king_pro_brand_slider {
  1119. width: 100%;
  1120. .our-brand-section {
  1121. margin: 0 auto;
  1122. vertical-align: top;
  1123. padding: 54px 0px 44px 0px;
  1124. .title-block {
  1125. margin: 9px 0px 0px 0px;
  1126. }
  1127. .psb-inner {
  1128. width: 100%;
  1129. display: inline-block;
  1130. vertical-align: top;
  1131. /*margin: 40px 0 0;*/
  1132. .owl-carousel {
  1133. /*padding: 26px 16px;*/
  1134. /*.owl-buttons {
  1135. .owl-prev,
  1136. .owl-next {
  1137. font-size: 0;
  1138. width: 40px;
  1139. height: 40px;
  1140. border: 1px solid transparent;
  1141. text-align: center;
  1142. line-height: 38px;
  1143. display: block !important;
  1144. position: absolute;
  1145. bottom: 0px;
  1146. top: 0;
  1147. margin: auto;
  1148. background: transparent;
  1149. }
  1150. .owl-prev {
  1151. left: 0;
  1152. @media (max-width:1200px) {
  1153. left: 0;
  1154. }
  1155. &:before {
  1156. content: "\f104";
  1157. font-family: "FontAwesome";
  1158. font-size: @font-size-base * 2;
  1159. color: darken(@light-color, 20%);
  1160. }
  1161. }
  1162. .owl-next {
  1163. right: 0;
  1164. @media (max-width:1200px) {
  1165. right: 0;
  1166. }
  1167. &:before {
  1168. content: "\f105";
  1169. font-family: "FontAwesome";
  1170. font-size: @font-size-base * 2;
  1171. color: darken(@light-color, 20%);
  1172. }
  1173. }
  1174. }*/
  1175. }
  1176. }
  1177. .barnd-img {
  1178. margin: 5px 0;
  1179. height: 160px;
  1180. img {
  1181. position: absolute;
  1182. max-width: 100%;
  1183. max-height: 100%;
  1184. width: auto;
  1185. height: auto;
  1186. position: absolute;
  1187. top: 0;
  1188. bottom: 0;
  1189. right: 0;
  1190. left: 0;
  1191. margin: auto;
  1192. }
  1193. }
  1194. }
  1195. }
  1196. /* latest-news-section
  1197. ----------------------------*/
  1198. .king_pro_blog_slider {
  1199. padding: 0px 0px 94px 0px;
  1200. .title-block {
  1201. margin: 10px 0px 0px 0px;
  1202. }
  1203. .post-img {
  1204. width: 100%;
  1205. display: inline-block;
  1206. vertical-align: top;
  1207. }
  1208. .psb-inner {
  1209. width: 100%;
  1210. display: inline-block;
  1211. vertical-align: top;
  1212. margin: 40px 0 0;
  1213. a {
  1214. display: grid;
  1215. text-align: center;
  1216. color: @theme;
  1217. overflow: hidden;
  1218. }
  1219. .owl-carousel {
  1220. padding: 6px 0px;
  1221. .owl-buttons {
  1222. width: 150px;
  1223. position: relative;
  1224. left: 0;
  1225. right: 0;
  1226. margin: auto;
  1227. margin-top:15px;
  1228. .owl-prev, .owl-next {
  1229. font-size: 0;
  1230. width: 40px;
  1231. height: 40px;
  1232. border: 1px solid transparent;
  1233. text-align: center;
  1234. line-height: 38px;
  1235. display: block !important;
  1236. position: absolute;
  1237. top: 100%;
  1238. background: @dark-color;
  1239. margin: auto;
  1240. }
  1241. .owl-prev {
  1242. left: 0;
  1243. background: transparent;
  1244. @media (max-width:1200px) {
  1245. left: 0;
  1246. }
  1247. @media (max-width:768px) {
  1248. left: 0;
  1249. }
  1250. &:before {
  1251. content: "\f104";
  1252. font-family: "FontAwesome";
  1253. font-size: @font-size-base * 2;
  1254. color: darken(@light-color, 20%);
  1255. }
  1256. }
  1257. .owl-next {
  1258. right: 0;
  1259. background: transparent;
  1260. @media (max-width:1200px) {
  1261. right: 0;
  1262. }
  1263. @media (max-width:768px) {
  1264. right: 0;
  1265. }
  1266. &:before {
  1267. content: "\f105";
  1268. font-family: "FontAwesome";
  1269. font-size: @font-size-base * 2;
  1270. color: darken(@light-color, 20%);
  1271. }
  1272. }
  1273. }
  1274. }
  1275. .blog-meta {
  1276. width: 100%;
  1277. float: left;
  1278. text-align: left;
  1279. padding: 15px 0px 16px;
  1280. background: transparent;
  1281. position: relative;
  1282. background: transparent;
  1283. h3 {
  1284. margin: 0;
  1285. padding: 0 0 5px;
  1286. font-size: @font-size-base;
  1287. font-weight: 700;
  1288. text-align: left;
  1289. a {
  1290. color: @dark-color;
  1291. font-size: @font-size-base -2;
  1292. font-weight: bold;
  1293. text-align: left;
  1294. padding:0px 0px 7px 0px;
  1295. h4{
  1296. margin:0;
  1297. font-size: @font-size-base;
  1298. font-weight: 700;
  1299. text-transform: capitalize;
  1300. @media (max-width:1200px) { text-align:center;}
  1301. }
  1302. &:hover {
  1303. text-decoration: none;
  1304. }
  1305. @media (max-width:1200px) { text-align:center;}
  1306. }
  1307. @media (max-width:1200px) { text-align:center;}
  1308. }
  1309. span {
  1310. color: lighten(@dark-color, 50%);
  1311. /* margin: 0px 15px 0px 15px;*/
  1312. @media (max-width:1200px) {
  1313. text-align: center;
  1314. width: 100%;
  1315. margin: 0;
  1316. span {
  1317. width: auto;
  1318. }
  1319. }
  1320. }
  1321. }
  1322. }
  1323. }
  1324. .oe_multi_category_slider {
  1325. padding: 17px 0px 21px 0px;
  1326. .latest-news-section {
  1327. padding: 10px 0;
  1328. .title-block {
  1329. margin: 10px 0px 0px 0px;
  1330. }
  1331. .lns-inner {
  1332. h5 {
  1333. padding: 0px 20px;
  1334. a {
  1335. color: @theme;
  1336. }
  1337. }
  1338. }
  1339. }
  1340. .lns-post {
  1341. width: 100%;
  1342. float: left;
  1343. .psb-inner {
  1344. width: 100%;
  1345. display: inline-block;
  1346. vertical-align: top;
  1347. margin:15px 0 0;
  1348. .owl-carousel {
  1349. /*padding:20px 0px;*/
  1350. .owl-wrapper-outer{
  1351. padding:10px 0px;
  1352. }
  1353. }
  1354. }
  1355. .post-img {
  1356. width: 100%;
  1357. float: left;
  1358. }
  1359. }
  1360. }
  1361. /* services start */
  1362. .services {
  1363. padding: 48px 0px 28px 0px;
  1364. background-color: lighten(@dark-color, 70%);
  1365. .col-sm-4 {
  1366. margin-bottom: 20px;
  1367. }
  1368. h4 {
  1369. color: @theme;
  1370. font-size: @font-size-base;
  1371. margin: 19px 0px 9px 0px;
  1372. padding: 0;
  1373. }
  1374. h5 {
  1375. color: @dark-color;
  1376. font-size: @font-size-base + 1;
  1377. font-weight: 400;
  1378. margin: 0;
  1379. padding: 0;
  1380. }
  1381. }
  1382. /* aservices end */
  1383. /*Back to top
  1384. -------------------------*/
  1385. .cd-top {
  1386. width: 50px;
  1387. height: 50px;
  1388. background: @theme;
  1389. color: @light-color;
  1390. float: left;
  1391. text-align: center;
  1392. line-height: 50px;
  1393. position: fixed;
  1394. z-index: 9999;
  1395. bottom: -50px;
  1396. right: -50px;
  1397. border: 1px solid transparent;
  1398. .transition(all, 0.5s, ease);
  1399. &:hover, &:active, &:focus {
  1400. color: @dark-color;
  1401. }
  1402. .fa {
  1403. font-size: @font-size-base + 8;
  1404. }
  1405. &.cd-is-visible {
  1406. bottom: 50px;
  1407. right: 50px;
  1408. @media (max-width:767px) {
  1409. bottom: 50px;
  1410. right: 5px;
  1411. }
  1412. }
  1413. }
  1414. /*newsletter-section
  1415. -------------------------------*/
  1416. .newsletter-section {
  1417. width: 100%;
  1418. display: inline-block;
  1419. vertical-align: top;
  1420. background: lighten(@footer-bg, 5%);
  1421. padding: 25px 0;
  1422. h2 {
  1423. margin: 0;
  1424. padding: 7px 0;
  1425. color: @light-color;
  1426. font-size: @font-size-base * 2;
  1427. }
  1428. p {
  1429. color: @light-color;
  1430. font-size: @font-size-base * 1.2;
  1431. }
  1432. .newsletter-form {
  1433. width: 600px;
  1434. max-width: 100%;
  1435. display: inline-block;
  1436. vertical-align: top;
  1437. position: relative;
  1438. .form-control {
  1439. border-radius: 0;
  1440. height: 45px;
  1441. line-height: 45px;
  1442. background: fade(@light-color, 8);
  1443. border: none;
  1444. font-size: @font-size-base + 2;
  1445. color: @light-color;
  1446. .transition(all, 0.5s, ease);
  1447. &:focus {
  1448. box-shadow: none;
  1449. background: fade(@light-color, 20);
  1450. }
  1451. }
  1452. .btn {
  1453. background: @theme;
  1454. border: none;
  1455. border-radius: 0;
  1456. height: 45px;
  1457. width: 45px;
  1458. line-height: 45px;
  1459. padding: 0;
  1460. color: @light-color;
  1461. font-size: @font-size-base + 2;
  1462. position: absolute;
  1463. top: 0;
  1464. right: 0;
  1465. }
  1466. }
  1467. }
  1468. .pd-more-info {
  1469. width: 100%;
  1470. display: inline-block;
  1471. vertical-align: top;
  1472. margin: 40px 0;
  1473. }
  1474. .nav-tabs {
  1475. border: none;
  1476. text-align: left;
  1477. > li {
  1478. margin: 0 5px;
  1479. float: none;
  1480. display: inline-block;
  1481. vertical-align: top;
  1482. border-bottom: 3px solid transparent;
  1483. > a {
  1484. border: none;
  1485. background-color: transparent;
  1486. color: @dark-color;
  1487. text-transform: uppercase;
  1488. &:hover {
  1489. border: none;
  1490. background-color: transparent;
  1491. outline: none;
  1492. }
  1493. }
  1494. &.active {
  1495. border-bottom: 3px solid @theme;
  1496. }
  1497. &:hover, &:focus, &.active {
  1498. a {
  1499. background: transparent;
  1500. border: none !important;
  1501. color: @theme;
  1502. border-radius: 0;
  1503. &:hover {
  1504. border: none;
  1505. }
  1506. }
  1507. }
  1508. }
  1509. }
  1510. .tab-content {
  1511. width: 100%;
  1512. display: inline-block;
  1513. vertical-align: top;
  1514. border-top: 1px solid darken(@light-color, 15%);
  1515. padding: 30px 0px 20px 0px;
  1516. color: @dark-color;
  1517. font-size: @font-size-base + 1;
  1518. font-weight: 400;
  1519. border-radius: 0px;
  1520. }
  1521. .latest-news-section {
  1522. .tab-content {
  1523. border: none;
  1524. padding: 0;
  1525. }
  1526. .nav-tabs {
  1527. li {
  1528. border: none;
  1529. margin: 0;
  1530. text-align: left;
  1531. a {
  1532. font-size: @font-size-base;
  1533. font-weight: 600;
  1534. padding: 10px;
  1535. }
  1536. }
  1537. }
  1538. }
  1539. /*------product page css start */
  1540. .left-title {
  1541. h3 {
  1542. font-size: @font-size-base + 6;
  1543. color: @dark-color;
  1544. font-weight: bold;
  1545. margin-top: 0;
  1546. }
  1547. hr {
  1548. height: 3px;
  1549. width: 69px;
  1550. background-color: @theme;
  1551. text-align: left;
  1552. margin: 0;
  1553. padding: 0;
  1554. margin-bottom: 24px;
  1555. border: none;
  1556. }
  1557. }
  1558. .right-title {
  1559. h3 {
  1560. font-size: @font-size-base + 6;
  1561. color: @dark-color;
  1562. font-weight: bold;
  1563. margin-top: 0;
  1564. }
  1565. hr {
  1566. height: 3px;
  1567. width: 100%;
  1568. background-color: @theme;
  1569. text-align: left;
  1570. margin: 0;
  1571. margin-bottom: 24px;
  1572. padding: 0;
  1573. border: none;
  1574. }
  1575. }
  1576. .product-item {
  1577. width: 100%;
  1578. height: 320px;
  1579. border: 2px solid @theme;
  1580. background-repeat: no-repeat;
  1581. background-size: cover;
  1582. h3 {
  1583. font-size: @font-size-base + 2;
  1584. color: @theme;
  1585. font-weight: bold;
  1586. }
  1587. .product-img-section {
  1588. display: table;
  1589. width: 100%;
  1590. height: 190px;
  1591. .product-img {
  1592. width: 100%;
  1593. display: table-cell;
  1594. text-align: center;
  1595. vertical-align: middle;
  1596. img {
  1597. max-height: 150px;
  1598. }
  1599. }
  1600. }
  1601. .btn-box {
  1602. button {
  1603. background-color: @dark-color;
  1604. border: none;
  1605. padding: 8px 15px;
  1606. a {
  1607. color: @light-color;
  1608. text-transform: uppercase;
  1609. font-size: @font-size-base - 1;
  1610. font-weight: 400;
  1611. text-decoration: none;
  1612. &:hover {
  1613. text-decoration: none;
  1614. }
  1615. }
  1616. }
  1617. }
  1618. }
  1619. .popular-tags {
  1620. hr {
  1621. margin-bottom: 15px;
  1622. }
  1623. .tags {
  1624. list-style-type: none;
  1625. display: inline-block;
  1626. margin: 0;
  1627. padding: 0;
  1628. li {
  1629. float: left;
  1630. margin: 0px 8px 8px 0px;
  1631. a {
  1632. color: fade(@dark-color, 70);
  1633. font-size: @font-size-base - 2;
  1634. display: block;
  1635. padding: 9px 14px;
  1636. font-weight: 400;
  1637. border: 1px solid lighten(@dark-color, 60%);
  1638. &:hover {
  1639. text-decoration: none;
  1640. color: @theme;
  1641. }
  1642. }
  1643. }
  1644. }
  1645. }
  1646. .shop-by {
  1647. h4 {
  1648. font-size: @font-size-base + 2;
  1649. color: @dark-color;
  1650. margin-bottom: 30px;
  1651. }
  1652. .nav-stacked>li+li {
  1653. margin-top: 7px;
  1654. }
  1655. strong {
  1656. padding-bottom: 6px;
  1657. display: inline-block;
  1658. }
  1659. }
  1660. /* price slider */
  1661. .price-slider {
  1662. padding-bottom: 15px;
  1663. }
  1664. .slider.slider-horizontal {
  1665. width: 100%;
  1666. }
  1667. /*price slider end */
  1668. /* product detail page start */
  1669. .product-slider-div {
  1670. margin-bottom: 66px;
  1671. }
  1672. .related-products {
  1673. margin-top: 38px;
  1674. }
  1675. .product-detail-news {
  1676. padding-top: 7px;
  1677. }
  1678. /* product detail page end */
  1679. /* log in page style */
  1680. .oe_website_login_container {
  1681. width: 100%;
  1682. background-size: cover;
  1683. margin: 0;
  1684. padding: 40px 0px;
  1685. .oe_login_form, .oe_signup_form, .oe_reset_password_form {
  1686. padding: 50px;
  1687. width: 400px;
  1688. margin: 0 auto;
  1689. border: 1px solid @theme;
  1690. box-shadow: 1px 10px 26px rgba(57, 57, 57, 0.41);
  1691. }
  1692. }
  1693. .btn-primary {
  1694. background-color: @theme;
  1695. border: 1px solid @theme;
  1696. outline: none;
  1697. border-radius: 0px;
  1698. }
  1699. .testimonials {
  1700. .quotecarousel {
  1701. height: auto;
  1702. padding-bottom: 10px;
  1703. }
  1704. .carousel {
  1705. .carousel-control {
  1706. top: auto;
  1707. bottom: 0px;
  1708. width: 30px;
  1709. height: 30px;
  1710. position: relative;
  1711. text-align: center;
  1712. .fa{
  1713. position: relative;
  1714. right: 0;
  1715. top: 0;
  1716. left: 0;
  1717. font-size:27px;
  1718. }
  1719. &.left {
  1720. left: 0;
  1721. @media (max-width:1200px) {
  1722. left: 24px;
  1723. }
  1724. @media (max-width:1000px) {
  1725. left: 32px;
  1726. }
  1727. }
  1728. &.right {
  1729. left: 10px;
  1730. @media (max-width:1200px) {
  1731. left: 50px;
  1732. }
  1733. @media (max-width:1000px) {
  1734. left: 43px;
  1735. }
  1736. }
  1737. }
  1738. }
  1739. }
  1740. .btn-primary {
  1741. border-radius: 0px;
  1742. background-color: @theme;
  1743. border: 1px solid @theme;
  1744. color: @light-color;
  1745. outline: none;
  1746. transition: all 0.3s ease;
  1747. &:hover, &:focus {
  1748. background-color: @light-color;
  1749. color: @theme;
  1750. outline: none;
  1751. border: 1px solid @theme;
  1752. }
  1753. }
  1754. .btn-default, .btn-link {
  1755. border-radius: 0px;
  1756. background-color: transparent;
  1757. color: @theme;
  1758. border: 1px solid @theme;
  1759. transition: all 0.3s ease;
  1760. margin-left: 14px;
  1761. &:hover, &:focus {
  1762. color: @light-color;
  1763. background: @theme;
  1764. outline: none;
  1765. text-decoration: none;
  1766. }
  1767. }
  1768. .oe_snippet_body {
  1769. .btn-box {
  1770. .btn-primary {
  1771. &:hover, &:focus {
  1772. color: @light-color;
  1773. background-color: @dark-color;
  1774. }
  1775. .fa {
  1776. color: @light-color;
  1777. &:hover {
  1778. color: @light-color;
  1779. }
  1780. ;
  1781. }
  1782. }
  1783. }
  1784. }
  1785. .table {
  1786. .input-group {
  1787. background: rgba(204, 204, 204, 0.21);
  1788. .input-group-addon {
  1789. background: rgba(204, 204, 204, 0.21);
  1790. }
  1791. }
  1792. thead {
  1793. background: @dark-color;
  1794. padding: 10px 0px;
  1795. border-bottom: 1px solid @dark-color;
  1796. tr {
  1797. th {
  1798. padding: 10px;
  1799. }
  1800. }
  1801. }
  1802. a {
  1803. color: @theme;
  1804. &:hover {
  1805. color: @dark-color;
  1806. text-decoration: none;
  1807. }
  1808. }
  1809. .btn-link {
  1810. color: @theme;
  1811. padding: 0 0 10px 0;
  1812. position: relative;
  1813. .transition(all, 0.3s, ease);
  1814. text-decoration: none;
  1815. border: none;
  1816. &:hover, &:focus, &:active {
  1817. color: @theme;
  1818. background: none;
  1819. &:before {
  1820. visibility: visible;
  1821. -moz-transform: scaleX(1);
  1822. -webkit-transform: scaleX(1);
  1823. -o-transform: scaleX(1);
  1824. transform: scaleX(1);
  1825. }
  1826. }
  1827. &:before {
  1828. content: "";
  1829. position: absolute;
  1830. width: 100%;
  1831. height: 2px;
  1832. bottom: 0;
  1833. left: 0;
  1834. background-color: @theme;
  1835. visibility: hidden;
  1836. -moz-transform: scaleX(0);
  1837. -webkit-transform: scaleX(0);
  1838. -o-transform: scaleX(0);
  1839. transform: scaleX(0);
  1840. .transition(all, 0.3s, ease-in-out);
  1841. }
  1842. }
  1843. }
  1844. body ul.wizard {
  1845. li.text-primary {
  1846. color: @light-color;
  1847. background: @theme;
  1848. .chevron:before {
  1849. border-left: 10px solid @theme;
  1850. }
  1851. }
  1852. .text-success {
  1853. color: @dark-color;
  1854. &:hover {
  1855. text-decoration: none;
  1856. color: lighten(@dark-color, 30%);
  1857. }
  1858. }
  1859. }
  1860. .oe_sale_acquirer_button {
  1861. p {
  1862. margin: 10px 0 10px;
  1863. }
  1864. }
  1865. .page-header {
  1866. .btn-primary {
  1867. background: none;
  1868. }
  1869. a {
  1870. color: @theme;
  1871. padding: 8px;
  1872. position: relative;
  1873. .transition(all, 0.3s, ease);
  1874. text-decoration: none;
  1875. &:hover {
  1876. color: @theme;
  1877. &:before {
  1878. visibility: visible;
  1879. -moz-transform: scaleX(1);
  1880. -webkit-transform: scaleX(1);
  1881. -o-transform: scaleX(1);
  1882. transform: scaleX(1);
  1883. }
  1884. }
  1885. &:before {
  1886. content: "";
  1887. position: absolute;
  1888. width: 100%;
  1889. height: 2px;
  1890. bottom: 0;
  1891. left: 0;
  1892. background-color: @theme;
  1893. visibility: hidden;
  1894. -moz-transform: scaleX(0);
  1895. -webkit-transform: scaleX(0);
  1896. -o-transform: scaleX(0);
  1897. transform: scaleX(0);
  1898. .transition(all, 0.3s, ease-in-out);
  1899. }
  1900. }
  1901. }
  1902. #right_column {
  1903. a {
  1904. color: @theme;
  1905. padding: 0 0 10px 0;
  1906. position: relative;
  1907. .transition(all, 0.3s, ease);
  1908. text-decoration: none;
  1909. &:hover {
  1910. color: @theme;
  1911. &:before {
  1912. visibility: visible;
  1913. -moz-transform: scaleX(1);
  1914. -webkit-transform: scaleX(1);
  1915. -o-transform: scaleX(1);
  1916. transform: scaleX(1);
  1917. }
  1918. }
  1919. &:before {
  1920. content: "";
  1921. position: absolute;
  1922. width: 100%;
  1923. height: 2px;
  1924. bottom: 0;
  1925. left: 0;
  1926. background-color: @theme;
  1927. visibility: hidden;
  1928. -moz-transform: scaleX(0);
  1929. -webkit-transform: scaleX(0);
  1930. -o-transform: scaleX(0);
  1931. transform: scaleX(0);
  1932. .transition(all, 0.3s, ease-in-out);
  1933. }
  1934. }
  1935. }
  1936. .oe_product {
  1937. border: none !important;
  1938. }
  1939. .toolbar {
  1940. .toolbar-pager {
  1941. .pager_left {
  1942. float: right;
  1943. width: 22%;
  1944. text-align: right;
  1945. @media (max-width:1200px) {
  1946. width:27%;
  1947. }
  1948. @media (max-width:768px) {
  1949. width: 100%;
  1950. }
  1951. }
  1952. .pager_right {
  1953. float: left;
  1954. text-align: left;
  1955. width: 70%;
  1956. .sort-by {
  1957. display: inline-block;
  1958. vertical-align: middle;
  1959. margin-right:15px;
  1960. }
  1961. .products_pager {
  1962. display: inline-block;
  1963. }
  1964. @media (max-width:768px) {
  1965. width: 100%;
  1966. margin-top: 13px;
  1967. }
  1968. }
  1969. }
  1970. }
  1971. .toolbar {
  1972. padding: 0px 15px 25px 15px;
  1973. .view-mode {
  1974. float: right;
  1975. button {
  1976. &.active {
  1977. background-color: @theme;
  1978. color: @light-color;
  1979. }
  1980. }
  1981. }
  1982. .paging_sort {
  1983. float: left;
  1984. .btn {
  1985. padding: 5px 12px;
  1986. }
  1987. }
  1988. }
  1989. .oe_pro_cat_slider {
  1990. padding: 40px 0;
  1991. }
  1992. .breadcrumb li.active a {
  1993. color: @theme;
  1994. }
  1995. .navbar-default {
  1996. background-color: @light-color;
  1997. max-height: 118px;
  1998. @media (max-width:750px){
  1999. border-bottom: transparent;
  2000. }
  2001. }
  2002. @media (max-width:1200px) {
  2003. .quotecarousel {
  2004. .content {
  2005. text-align: left;
  2006. margin-left: 2%;
  2007. margin-top: 2%;
  2008. }
  2009. }
  2010. }
  2011. #o_shop_collapse_category {
  2012. padding: 0px;
  2013. >
  2014. li+li {
  2015. padding: 8px 0px;
  2016. border-top: 1px solid lighten(@dark-color, 70%);
  2017. }
  2018. li {
  2019. padding: 4px 0px;
  2020. .fa-chevron-down {
  2021. position: absolute;
  2022. right: 15px;
  2023. width: 25px;
  2024. height: 25px;
  2025. transform: rotate(135deg);
  2026. transition: all 0.3s ease;
  2027. @media (max-width:768px) {
  2028. transform: rotate(135deg) !important;
  2029. }
  2030. }
  2031. .fa-chevron-down:before {
  2032. content: "";
  2033. height: 11px;
  2034. width: 1px;
  2035. background: lighten(@dark-color, 40%);
  2036. position: absolute;
  2037. top: 0;
  2038. bottom: 0;
  2039. left: 0;
  2040. margin: auto;
  2041. right: 0;
  2042. }
  2043. .fa-chevron-down:after {
  2044. content: "";
  2045. height: 1px;
  2046. width: 11px;
  2047. background: lighten(@dark-color, 40%);
  2048. position: absolute;
  2049. top: 0;
  2050. bottom: 0;
  2051. left: 0;
  2052. margin: auto;
  2053. right: 0;
  2054. }
  2055. .fa-chevron-right {
  2056. position: absolute;
  2057. right: 15px;
  2058. width: 25px;
  2059. height: 25px;
  2060. transform: rotate(360deg);
  2061. transition: all 0.3s ease;
  2062. z-index: 99;
  2063. }
  2064. .fa-chevron-right:before {
  2065. content: "";
  2066. height: 11px;
  2067. width: 1px;
  2068. background: lighten(@dark-color, 40%);
  2069. position: absolute;
  2070. top: 0;
  2071. bottom: 0;
  2072. left: 0;
  2073. margin: auto;
  2074. right: 0;
  2075. }
  2076. .fa-chevron-right:after {
  2077. content: "";
  2078. height: 1px;
  2079. width: 11px;
  2080. background: lighten(@dark-color, 40%);
  2081. position: absolute;
  2082. top: 0px;
  2083. bottom: 0; /* right: 0; */
  2084. left: 0px;
  2085. right: 0;
  2086. margin: auto;
  2087. }
  2088. a {
  2089. color: @dark-color;
  2090. font-size: @font-size-base - 1;
  2091. font-weight: 400;
  2092. transition: all 0.3s linear;
  2093. /*z-index:-1000;*/
  2094. &:hover {
  2095. color: @theme;
  2096. background-color: transparent;
  2097. padding-left: 13px;
  2098. }
  2099. }
  2100. ul {
  2101. border-bottom: 2px solid lighten(@dark-color, 50%);
  2102. li {
  2103. border: none;
  2104. >a {
  2105. color: @dark-color;
  2106. font-weight: normal;
  2107. font-size: @font-size-base - 1;
  2108. background-color: transparent;
  2109. transition: all 0.3s linear;
  2110. padding-left: 20px;
  2111. &:hover {
  2112. padding-left: 40px;
  2113. }
  2114. &:before {
  2115. content: " ";
  2116. width: 5px;
  2117. height: 1px;
  2118. position: absolute;
  2119. top: 0;
  2120. bottom: 0;
  2121. left: 0;
  2122. margin: auto;
  2123. background-color: lighten(@dark-color, 50%);
  2124. }
  2125. }
  2126. &.active {
  2127. >a {
  2128. color: @theme;
  2129. font-weight:700;
  2130. }
  2131. }
  2132. &.active {
  2133. >a {
  2134. color:@theme;
  2135. font-weight:700;
  2136. }
  2137. }
  2138. }
  2139. }
  2140. &.active {
  2141. >a {
  2142. color: @theme;
  2143. font-weight:700;
  2144. }
  2145. }
  2146. }
  2147. }
  2148. .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
  2149. color: @theme;
  2150. background-color: transparent;
  2151. }
  2152. .btn-default {
  2153. .fa {
  2154. color: @theme;
  2155. }
  2156. &:hover {
  2157. .fa {
  2158. color: @light-color;
  2159. }
  2160. }
  2161. }
  2162. .btn-primary {
  2163. &:hover {
  2164. .fa {
  2165. color: @theme;
  2166. }
  2167. }
  2168. }
  2169. table {
  2170. .text-muted {
  2171. color: @text-muted;
  2172. }
  2173. }
  2174. /*list view */
  2175. .list-view-box, .oe_list {
  2176. margin-bottom: 35px;
  2177. .list-items {
  2178. width: 100%;
  2179. }
  2180. #list_add_to_cart {
  2181. visibility: visible !important;
  2182. display: block !important;
  2183. .btn {
  2184. margin-top: 10px;
  2185. }
  2186. }
  2187. .ratings{
  2188. margin:10px 0px 0px 0px;
  2189. padding: 0;
  2190. .o_rating_star_card {
  2191. .stars{
  2192. color:@theme;
  2193. i{margin-right:3px;}
  2194. }
  2195. }
  2196. }
  2197. .cs-product { width:100%;
  2198. border: 1px solid lighten(@dark-color, 70%);
  2199. .transition(all, 0.5s, ease);
  2200. .pwp-img {
  2201. width: 30%;
  2202. float: left;
  2203. border-right: 1px solid lighten(@dark-color, 70%);
  2204. img {
  2205. .transition(all, 0.5s, ease);
  2206. }
  2207. @media(max-width:767px){
  2208. width:47%;
  2209. }
  2210. }
  2211. .pwp-info {
  2212. width: 69%;
  2213. float: right;
  2214. padding: 15px;
  2215. border: none;
  2216. text-align: left;
  2217. @media(max-width:767px){
  2218. width:52.8%;
  2219. float: left;
  2220. }
  2221. }
  2222. &:hover {
  2223. border: 1px solid @theme;
  2224. box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  2225. .pwp-info {
  2226. border: none;
  2227. }
  2228. .pink-box {
  2229. visibility: hidden;
  2230. }
  2231. }
  2232. }
  2233. .list-items {
  2234. &:hover {
  2235. display: block;
  2236. }
  2237. }
  2238. .pink-box {
  2239. display: none;
  2240. }
  2241. }
  2242. /*price slider */
  2243. .price-slider {
  2244. .irs-bar {
  2245. height: 5px;
  2246. top: 33px;
  2247. border: none;
  2248. background: @theme;
  2249. }
  2250. .irs-line {
  2251. height: 5px;
  2252. top: 33px;
  2253. background: lighten(@dark-color, 70%);
  2254. border: none;
  2255. border-radius: 0px;
  2256. -moz-border-radius: 0px;
  2257. }
  2258. .irs-slider {
  2259. top: 23px;
  2260. width: 10px;
  2261. height: 25px;
  2262. border: 1px solid @theme;
  2263. background: @theme;
  2264. border-radius: 0px;
  2265. -moz-border-radius: 0px;
  2266. box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  2267. cursor: pointer;
  2268. }
  2269. .irs-from, .irs-to, .irs-single {
  2270. color: @dark-color;
  2271. font-size: 14px;
  2272. line-height: 1.333;
  2273. padding: 1px 5px;
  2274. background: none;
  2275. bottom: -19px;
  2276. position: absolute;
  2277. top: auto;
  2278. }
  2279. .irs-to {
  2280. color: @theme;
  2281. font-size: 14px;
  2282. line-height: 1.333;
  2283. padding: 1px 5px;
  2284. background: 0 0;
  2285. }
  2286. .irs-min, .irs-max {
  2287. color: @dark-color;
  2288. font-size: 12px;
  2289. line-height: 1.333;
  2290. text-shadow: none;
  2291. top: 0;
  2292. padding: 1px 5px;
  2293. background: none;
  2294. bottom: -19px;
  2295. position: absolute;
  2296. top: auto;
  2297. }
  2298. .irs-with-grid .irs-grid {
  2299. display: none;
  2300. }
  2301. }
  2302. /* for version-8 */
  2303. .product-view .product-shop-info .product-title .review {
  2304. float: none;
  2305. width: 100%;
  2306. }
  2307. .input-group-addon {
  2308. a {
  2309. color: @light-color;
  2310. }
  2311. &:hover {
  2312. a {
  2313. color: @dark-color
  2314. }
  2315. }
  2316. ;
  2317. }
  2318. .review_label {
  2319. color: @theme;
  2320. }
  2321. #products_grid {
  2322. padding: 0;
  2323. .right-title {
  2324. padding: 0px 15px;
  2325. }
  2326. }
  2327. .category_nav {
  2328. border: 1px solid @theme;
  2329. padding: 10px 0px;
  2330. }
  2331. .nav-stacked {
  2332. >li {
  2333. >a {
  2334. color: @theme;
  2335. font-weight: 500;
  2336. text-transform:capitalize;
  2337. font-size: 15px;
  2338. &:hover {
  2339. color: @dark-color;
  2340. background-color: transparent;
  2341. }
  2342. }
  2343. .nav-hierarchy {
  2344. >li {
  2345. >a {
  2346. color: @dark-color;
  2347. font-weight: normal;
  2348. font-size: @font-size-base - 1;
  2349. background-color: transparent;
  2350. }
  2351. >ul {
  2352. >li {
  2353. padding-left: 15px;
  2354. >a {
  2355. color: @theme;
  2356. font-weight: normal;
  2357. font-size: @font-size-base - 1;
  2358. background-color: transparent;
  2359. transition: all 0.3s linear;
  2360. padding-left: 20px;
  2361. &:hover {
  2362. padding-left: 40px;
  2363. }
  2364. &:before {
  2365. content: " ";
  2366. width: 6px;
  2367. height: 2px;
  2368. position: absolute;
  2369. top: 0;
  2370. bottom: 0;
  2371. left: 0;
  2372. margin: auto;
  2373. background-color: lighten(@dark-color, 50%);
  2374. }
  2375. }
  2376. &.active {
  2377. >a {
  2378. color: @dark-color;
  2379. font-weight: 600;
  2380. }
  2381. }
  2382. }
  2383. }
  2384. &.active {
  2385. >a {
  2386. color: @dark-color;
  2387. font-weight: 600;
  2388. }
  2389. }
  2390. }
  2391. }
  2392. &.active {
  2393. >a {
  2394. color: @dark-color;
  2395. font-weight: 600;
  2396. }
  2397. }
  2398. }
  2399. }
  2400. .search-query {
  2401. border: 1px solid @theme;
  2402. &:focus {
  2403. border-color: @theme;
  2404. outline: 0;
  2405. -webkit-box-shadow: inset 0 0px 0px rgba(252, 252, 252, 0), 0 0 4px @theme;
  2406. box-shadow: inset 0 0px 0px rgba(252, 252, 252, 0), 0 0 4px @theme;
  2407. }
  2408. }
  2409. header a.navbar-brand img {
  2410. max-height: 60px;
  2411. @media (max-width:767px) {
  2412. max-height: 45px;
  2413. }
  2414. }
  2415. /*mega menu style start */
  2416. .dropdown-menu {
  2417. border: 1px solid @theme;
  2418. }
  2419. .mega-dropdown-menu {
  2420. display: none;
  2421. position: absolute;
  2422. top: 66px !important;
  2423. left: 0;
  2424. width: 40%;
  2425. background: #fff;
  2426. padding: 0;
  2427. box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .2);
  2428. .transition(all, 0.5s, ease);
  2429. @media (max-width:993px) {
  2430. top: 135px !important;
  2431. }
  2432. @media (max-width:767px) {
  2433. position: relative;
  2434. top: auto;
  2435. left: auto;
  2436. visibility: visible;
  2437. opacity: 1;
  2438. }
  2439. .message{
  2440. font-size:@font-size-base + 6;
  2441. white-space: normal;
  2442. @media (max-width:767px) {
  2443. font-size:@font-size-base - 2;
  2444. white-space: normal;
  2445. }
  2446. }
  2447. ul {
  2448. .dropdown-header {
  2449. margin: 0;
  2450. padding: 0 0 8px;
  2451. font-size: 12px;
  2452. text-transform:capitalize;
  2453. border: none;
  2454. font-weight: 700;
  2455. width: 100%;
  2456. display: inline-block;
  2457. vertical-align: top;
  2458. white-space: normal;
  2459. color: @theme;
  2460. font-size: @font-size-base;
  2461. a {
  2462. text-decoration: none;
  2463. color: @dark-color;
  2464. }
  2465. a:hover {
  2466. color: @theme;
  2467. }
  2468. }
  2469. .slider_header {
  2470. color: @theme;
  2471. font-size: @font-size-base;
  2472. text-transform: uppercase;
  2473. }
  2474. .categories {
  2475. a {
  2476. color: @dark-color;
  2477. text-decoration: none;
  2478. line-height: 22px;
  2479. font-size: @font-size-base - 1;
  2480. }
  2481. &:hover {
  2482. a {
  2483. color: @theme;
  2484. }
  2485. }
  2486. ;
  2487. }
  2488. .item {
  2489. h4 {
  2490. small {
  2491. color: @theme;
  2492. }
  2493. }
  2494. }
  2495. }
  2496. }
  2497. .navbar-nav {
  2498. .li-mega-menu {
  2499. position: static;
  2500. .carousel-inner {
  2501. .item {
  2502. margin-top: 15px;
  2503. >a {
  2504. height: 150px;
  2505. position: relative;
  2506. display: block;
  2507. img {
  2508. position: absolute;
  2509. left: 0;
  2510. top: 0;
  2511. bottom: 0;
  2512. right: 0;
  2513. top: 0;
  2514. margin: auto;
  2515. width: auto;
  2516. max-width: 100%;
  2517. height: auto;
  2518. max-height: 100%;
  2519. }
  2520. }
  2521. }
  2522. }
  2523. .dropdown-menu {
  2524. }
  2525. .mega-dropdown-menu {
  2526. @media (max-width:767px) {
  2527. width: 100%;
  2528. }
  2529. .letter-spacing {
  2530. ul {
  2531. list-style-type: none;
  2532. margin: 0;
  2533. padding: 0;
  2534. }
  2535. }
  2536. }
  2537. &:hover {
  2538. .mega-dropdown-menu {
  2539. display: block;
  2540. top: 65%;
  2541. @media (max-width:767px) {
  2542. display: none;
  2543. width: 100%;
  2544. }
  2545. }
  2546. }
  2547. &.open {
  2548. > a {
  2549. @media (max-width:767px) {
  2550. color: @light-color !important;
  2551. background: none !important;
  2552. }
  2553. }
  2554. .mega-dropdown-menu {
  2555. @media (max-width:767px) {
  2556. display: block;
  2557. visibility: visible;
  2558. display: block;
  2559. opacity: 1;
  2560. }
  2561. }
  2562. }
  2563. &.open {
  2564. >a {
  2565. border-bottom: 2px solid @theme;
  2566. background: transparent;
  2567. }
  2568. }
  2569. @media (max-width:767px) {
  2570. > a {
  2571. position: relative;
  2572. .fa{
  2573. width: 40px;
  2574. height: 40px;
  2575. border: none;
  2576. position: absolute;
  2577. right: 0;
  2578. top: 0;
  2579. bottom: 0;
  2580. margin: auto;
  2581. .transition(all, 0.2s, linear);
  2582. &:after,
  2583. &:before{
  2584. position:absolute;
  2585. right: 0;
  2586. top: 0;
  2587. bottom: 0;
  2588. left: 0;
  2589. margin: auto;
  2590. content: " ";
  2591. background: @light-color;
  2592. float: left;
  2593. }
  2594. &:before{
  2595. width: 15px;
  2596. height: 1px;
  2597. }
  2598. &:after{
  2599. height:15px;
  2600. width: 1px;
  2601. }
  2602. }
  2603. }
  2604. &.mob-open {
  2605. > a {
  2606. @media (max-width:767px) {
  2607. color: @light-color !important;
  2608. background: none !important;
  2609. .fa{
  2610. transform: rotate(135deg) !important;
  2611. -moz-transform: rotate(135deg) !important;
  2612. -webkit-transform: rotate(135deg) !important;
  2613. -o-transform: rotate(135deg) !important;
  2614. }
  2615. }
  2616. }
  2617. .mega-dropdown-menu {
  2618. @media (max-width:767px) {
  2619. display: block;
  2620. visibility: visible;
  2621. display: block;
  2622. opacity: 1;
  2623. }
  2624. }
  2625. }
  2626. }
  2627. }
  2628. }
  2629. .search-toggle {
  2630. position: relative;
  2631. border-bottom: 2px solid transparent;
  2632. display: inline-block;
  2633. padding-bottom: 2px;
  2634. .st-toggle {
  2635. background: @light-color;
  2636. padding: 0;
  2637. float: left;
  2638. margin: 3px 0 0px;
  2639. width: 35px;
  2640. text-align: center;
  2641. line-height: 35px;
  2642. }
  2643. .hsearch-block {
  2644. visibility: hidden;
  2645. opacity: 0;
  2646. position: absolute;
  2647. top: 3px;
  2648. bottom: auto;
  2649. right: 34px;
  2650. z-index: 999;
  2651. .transition(all, 0.3s, linear);
  2652. .form-control {
  2653. border-radius: 0px;
  2654. border: 1px solid @theme;
  2655. width: 240px;
  2656. height: 35px;
  2657. padding:6px 4px; font-size:@font-size-base - 2;
  2658. &:focus {
  2659. box-shadow: inset 0 2px 2px rgba(0, 0, 0, .075), 0 0 8px @theme;
  2660. }
  2661. @media (max-width:500px) {
  2662. width: 155px;
  2663. }
  2664. }
  2665. @media (max-width:500px) {
  2666. top: auto;
  2667. bottom: -33px;
  2668. left: 0;
  2669. right: auto;
  2670. }
  2671. }
  2672. &.search-toggle-open {
  2673. .st-toggle {
  2674. background: #ffffff;
  2675. .fa-search {
  2676. color: @theme;
  2677. }
  2678. }
  2679. .hsearch-block {
  2680. visibility: visible;
  2681. opacity: 1;
  2682. top: 3px;
  2683. width: 174px;
  2684. @media (max-width:500px) {
  2685. bottom: -33px;
  2686. top: auto;
  2687. left: 0;
  2688. right: auto;
  2689. }
  2690. }
  2691. }
  2692. &:hover {
  2693. border-bottom: 2px solid @theme;
  2694. }
  2695. ;
  2696. }
  2697. .form-control:focus {
  2698. border-color: @theme;
  2699. outline: 0;
  2700. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgb(195, 134, 71);
  2701. box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgb(195, 134, 71);
  2702. }
  2703. #multi_dynamic_slider_tabs {
  2704. text-align: center;
  2705. li{
  2706. a{
  2707. text-transform: capitalize;
  2708. }
  2709. &.active
  2710. {
  2711. a{
  2712. color:@theme;
  2713. }
  2714. }
  2715. }
  2716. }
  2717. .product-options-bottom {
  2718. .control-label {
  2719. margin: 0 !important;
  2720. }
  2721. }
  2722. .js_add_cart_variants {
  2723. margin-bottom: 30px;
  2724. .list-unstyled {
  2725. margin-top: 10px;
  2726. li {
  2727. margin: 4px 0px;
  2728. }
  2729. }
  2730. }
  2731. .multi_hide {
  2732. display: none;
  2733. }
  2734. .active.multi_hide {
  2735. display: block;
  2736. }
  2737. .o_editable {
  2738. .dark-div {
  2739. display: none;
  2740. }
  2741. }
  2742. /* 404 style */
  2743. .section-404 {
  2744. background: transparent;
  2745. border: none;
  2746. .content-404 {
  2747. height: auto;
  2748. width: 100%;
  2749. margin-bottom: 20px;
  2750. label {
  2751. display: inline-block;
  2752. top: 0px;
  2753. max-width: 100%;
  2754. margin-bottom: 5px;
  2755. font-weight: 700;
  2756. color: #fff;
  2757. font-size: 200px;
  2758. position: absolute;
  2759. left: 80px;
  2760. @media (max-width:1200px) {
  2761. font-size: 150px;
  2762. }
  2763. @media (max-width:767px) {
  2764. font-size: 100px;
  2765. }
  2766. @media (max-width:550px) {
  2767. font-size: 50px;
  2768. left: 50px;
  2769. }
  2770. }
  2771. }
  2772. .not-found-message {
  2773. font-size: 20px;
  2774. font-weight: 500;
  2775. }
  2776. .try-pages {
  2777. font-size: 14px;
  2778. margin: 15px 0px;
  2779. span {
  2780. display: block;
  2781. margin: 20px;
  2782. a {
  2783. margin-left: 20px;
  2784. background-color: @dark-color;
  2785. color: @light-color;
  2786. padding: 10px 15px;
  2787. font-weight: 500;
  2788. &:hover {
  2789. text-decoration: none;
  2790. }
  2791. ;
  2792. @media (max-width:480px) {
  2793. margin: 20px;
  2794. width: 100%;
  2795. margin-left: 0;
  2796. }
  2797. }
  2798. }
  2799. }
  2800. }
  2801. #top_menu {
  2802. .dropdown {
  2803. &:hover {
  2804. .dropdown-menu {
  2805. display: block;
  2806. }
  2807. }
  2808. }
  2809. }
  2810. .clearfix {
  2811. .btn-default {
  2812. margin-left: 0;
  2813. }
  2814. }
  2815. .table {
  2816. th {
  2817. color: @theme;
  2818. }
  2819. }
  2820. /* flip less */
  2821. .cs-product {
  2822. position: relative;
  2823. .ratings{
  2824. .popover{
  2825. display: none !important;
  2826. }
  2827. }
  2828. }
  2829. .pwp-img {
  2830. margin: auto;
  2831. position: relative;
  2832. }
  2833. .cs-product{
  2834. img
  2835. {
  2836. &.front {
  2837. width: 100%;
  2838. height: 100%;
  2839. -o-transition: all .5s !important;
  2840. -ms-transition: all .5s !important;
  2841. -moz-transition: all .5s !important;
  2842. -webkit-transition: all .5s !important;
  2843. transition: all .5s !important;
  2844. -webkit-backface-visibility: hidden;
  2845. -ms-backface-visibility: hidden;
  2846. -moz-backface-visibility: hidden;
  2847. backface-visibility: hidden;
  2848. position: absolute;
  2849. top: 0px;
  2850. left: 0px;
  2851. z-index: 2;
  2852. }
  2853. &.back {
  2854. width: 100%;
  2855. height: 100%;
  2856. -o-transition: all .5s !important;
  2857. -ms-transition: all .5s !important;
  2858. -moz-transition: all .5s !important;
  2859. -webkit-transition: all .5s !important;
  2860. transition: all .5s !important;
  2861. -webkit-backface-visibility: hidden;
  2862. -ms-backface-visibility: hidden;
  2863. -moz-backface-visibility: hidden;
  2864. backface-visibility: hidden;
  2865. position: absolute;
  2866. top: 0px;
  2867. left: 0px;
  2868. z-index: 1;
  2869. -webkit-transform: rotateY(-180deg) !important;
  2870. -ms-transform: rotateY(-180deg) !important;
  2871. -moz-transform: rotateY(-180deg) !important;
  2872. transform: rotateY(-180deg) !important;
  2873. }
  2874. }
  2875. }
  2876. /*Flip de Imagen Inicio, para activar, descomentar*/
  2877. .cs-product .pwp-img:hover img.front {
  2878. z-index: 1;
  2879. // -webkit-transform: rotateY(180deg) !important;
  2880. // -ms-transform: rotateY(180deg) !important;
  2881. // -moz-transform: rotateY(180deg) !important;
  2882. // transform: rotateY(180deg) !important;
  2883. }
  2884. .cs-product .pwp-img:hover img.back {
  2885. z-index: 2;
  2886. // -webkit-transform: rotateY(0deg) !important;
  2887. // -ms-transform: rotateY(0deg) !important;
  2888. // -moz-transform: rotateY(0deg) !important;
  2889. // transform: rotateY(0deg) !important;
  2890. }
  2891. /*Flip de Imagen Fin, para activar, descomentar lo de arriba*/
  2892. .li-mega-menu {
  2893. .fa {
  2894. /*border-left: 6px solid rgba(0, 0, 0, 0);
  2895. border-right: 6px solid rgba(0, 0, 0, 0);
  2896. border-top: 6px solid;
  2897. display: inline-block;
  2898. height: 0px;*/
  2899. margin-left: 2px;
  2900. vertical-align: middle;
  2901. width: 0px;
  2902. }
  2903. }
  2904. .li-mega-menu {
  2905. &.open {
  2906. span.fa {
  2907. transition: all 0.3s ease;
  2908. @media (max-width:768px) {
  2909. transform: rotate(225deg) !important;
  2910. }
  2911. }
  2912. }
  2913. }
  2914. .language-bar {
  2915. margin-bottom: 5px;
  2916. }
  2917. header {
  2918. .configuration {
  2919. .toggle-config {
  2920. .options {
  2921. ul {
  2922. label{
  2923. margin-right:0px;
  2924. }
  2925. .btn-group{
  2926. float: right;
  2927. }
  2928. .dropdown-toggle {
  2929. /*border: 1px solid @theme;*/
  2930. padding: 2px 9px;
  2931. width:62px;
  2932. height:27px;
  2933. color:@dark-color;
  2934. float: right;
  2935. &:hover {
  2936. background-color: @theme;
  2937. color: @light-color
  2938. }
  2939. }
  2940. }
  2941. }
  2942. }
  2943. }
  2944. }
  2945. .currency_bar {margin-bottom:6px;
  2946. .btn-default{
  2947. border: 1px solid lighten(@dark-color, 70%);
  2948. outline: none;
  2949. background-color: transparent;
  2950. color: @dark-color;
  2951. &:hover{
  2952. border:1px solid @theme;
  2953. color: @light-color;
  2954. background: @theme;
  2955. };
  2956. }
  2957. label {
  2958. margin-right: 16px;
  2959. font-size: @font-size-base - 2;
  2960. @media (max-width:767px) {
  2961. margin-right:12px;
  2962. }
  2963. }
  2964. .btn {
  2965. padding: 1px 5px;
  2966. }
  2967. .btn-group{
  2968. display: inline-block;
  2969. vertical-align: middle;
  2970. width:62px;
  2971. height:27px;
  2972. }
  2973. .dropdown-menu {
  2974. position: absolute;
  2975. right: 0;
  2976. left: auto;
  2977. min-width: 70px;
  2978. li{
  2979. &.active{
  2980. a{background-color: @theme;
  2981. color: @light-color;}
  2982. }
  2983. }
  2984. }
  2985. }
  2986. #product_details, #discussion {
  2987. .o_rating_star_card {
  2988. .stars {
  2989. color: @theme;
  2990. margin-right: 0px !important;
  2991. i {
  2992. margin-right: 3px;
  2993. }
  2994. }
  2995. }
  2996. }
  2997. .total_cart_price {
  2998. width: 230px;
  2999. }
  3000. .oe_website_sale ul ul {
  3001. padding-left: 0;
  3002. margin-left: 0;
  3003. }
  3004. #myQuoteCarousel {
  3005. .carousel {
  3006. .carousel-control {
  3007. &.left {
  3008. position: absolute;
  3009. top: 20%;
  3010. z-index: 5;
  3011. right: 25%;
  3012. }
  3013. }
  3014. }
  3015. }
  3016. #wrap {
  3017. .oe_cart {
  3018. background: #fff;
  3019. padding: 20px;
  3020. margin-bottom: 20px;
  3021. #cart_total {
  3022. padding: 13px;
  3023. }
  3024. }
  3025. .table {
  3026. thead {
  3027. background: none;
  3028. border: none;
  3029. }
  3030. tr {
  3031. vertical-align: middle;
  3032. border-bottom: 1px solid lighten(@dark-color, 70%);
  3033. td {
  3034. padding: 20px;
  3035. vertical-align: middle;
  3036. }
  3037. }
  3038. .text-muted {
  3039. color: @dark-color;
  3040. font-weight: 400;
  3041. }
  3042. }
  3043. }
  3044. .table-striped {
  3045. >tbody {
  3046. >tr:nth-of-type(odd) {
  3047. background-color: rgba(249, 249, 249, 0.75);
  3048. }
  3049. }
  3050. }
  3051. /*owl silder*/
  3052. .owl-carousel {
  3053. .owl-item {
  3054. padding: 0 15px;
  3055. }
  3056. }
  3057. /**/
  3058. .owl-buttons {
  3059. .owl-prev,
  3060. .owl-next {
  3061. font-size: 0;
  3062. width: 40px;
  3063. height: 40px;
  3064. border: 1px solid @dark-color;
  3065. text-align: center;
  3066. line-height: 38px;
  3067. display: block !important;
  3068. position: absolute;
  3069. top: 0;
  3070. bottom: 0;
  3071. margin: auto;
  3072. background: @dark-color;
  3073. transition:all 0.3s ease;
  3074. &:hover{
  3075. background: @theme;
  3076. border:1px solid @theme;
  3077. color:@light-color;
  3078. }
  3079. }
  3080. .owl-prev {
  3081. left: -20px;
  3082. @media (max-width:1200px) {
  3083. left: -14px;
  3084. }
  3085. @media (max-width:768px) {
  3086. left:0px;
  3087. }
  3088. &:before {
  3089. content: "\f104";
  3090. font-family: "FontAwesome";
  3091. font-size: @font-size-base * 2;
  3092. color:@light-color;
  3093. }
  3094. }
  3095. .owl-next {
  3096. right: -20px;
  3097. @media (max-width:1200px) {
  3098. right: -14px;
  3099. }
  3100. @media (max-width:768px) {
  3101. right:0px;
  3102. }
  3103. &:before {
  3104. content: "\f105";
  3105. font-family: "FontAwesome";
  3106. font-size: @font-size-base * 2;
  3107. color:@light-color;
  3108. }
  3109. }
  3110. }
  3111. .carousel{
  3112. .carousel-indicators {
  3113. li
  3114. {
  3115. display: inline-block;
  3116. width: 12px;
  3117. height: 12px;
  3118. margin: 1px;
  3119. text-indent: -999px;
  3120. border-radius: 10px;
  3121. margin:0px 2px;
  3122. cursor: pointer;
  3123. border: 4px solid darken(@light-color,10%) !important;
  3124. border-radius: 10px;
  3125. cursor: pointer;
  3126. background-color:darken(@light-color,30%) !important;
  3127. box-shadow: 0px 0px 0px 1px darken(@light-color,30%);
  3128. &.active{
  3129. box-shadow: 0px 0px 0px 1px @theme;
  3130. background-color:@theme !important;
  3131. }
  3132. }
  3133. }
  3134. }
  3135. .js_attributes{
  3136. ul{
  3137. li{
  3138. ul{
  3139. margin-left:0;
  3140. li{
  3141. label{
  3142. margin-left:0 !important;
  3143. }
  3144. }
  3145. }
  3146. }
  3147. }
  3148. }
  3149. .oe_pro_cat_slider {
  3150. padding: 8px 0px 25px 0px;
  3151. }
  3152. .oe_website_sale ul ul{margin-left:5px!important;}
  3153. #comments{color:@theme;}
  3154. .paging_sort {
  3155. .btn-group{
  3156. margin-left:10px;
  3157. .caret{
  3158. margin-left:7px;
  3159. }
  3160. }
  3161. }
  3162. .address-list{
  3163. .fa.fa-map-marker {
  3164. margin-right: 9px;
  3165. }
  3166. }
  3167. .btn{
  3168. .caret {
  3169. margin-left: 6px;
  3170. }
  3171. }
  3172. .language-bar{
  3173. .caret{
  3174. margin-left:9px;
  3175. }
  3176. }
  3177. .time {
  3178. .fa{
  3179. margin-right:2px;
  3180. }
  3181. }
  3182. .shop-by{
  3183. .css_attribute_color {
  3184. input {
  3185. margin: 5px;
  3186. height: 12px;
  3187. opacity: 0;
  3188. }
  3189. }
  3190. input[type=checkbox], input[type=radio] {
  3191. margin: 4px 10px 0px 0px;
  3192. line-height: normal;
  3193. }
  3194. }
  3195. /*#wrap .table tr td:last-child, #wrap .table tr th:last-child{
  3196. width: 160px;
  3197. min-width: 160px;
  3198. white-space: nowrap;
  3199. }*/
  3200. #list_add_to_cart > span{
  3201. display: block;
  3202. display: -webkit-box;
  3203. display: -moz-box;
  3204. max-width: 100%;
  3205. height: 60px;
  3206. margin: 0 auto;
  3207. font-size: 14px;
  3208. line-height: 1.4;
  3209. -webkit-line-clamp: 3;
  3210. -webkit-box-orient: vertical;
  3211. -moz-line-clamp: 3;
  3212. -moz-box-orient: vertical;
  3213. overflow: hidden;
  3214. text-overflow: ellipsis;
  3215. }
  3216. .popover
  3217. {
  3218. .popover-navigation{
  3219. .text-muted{margin-left:14px;}
  3220. .btn-link{padding:6px 15px !important;}
  3221. }
  3222. }
  3223. #right_column{
  3224. .input-group{
  3225. a{
  3226. padding:6px 15px;
  3227. &:hover{
  3228. color:@light-color;
  3229. };
  3230. }
  3231. }
  3232. }
  3233. #wrap .table tr td:last-child{width: inherit; min-width: inherit;}
  3234. .filtrouno { margin: 5px 0px 5px 0px; background: @theme; color: #ffffff; padding: 10px; width: 100%; text-transform: uppercase; }
  3235. .footercolor { color: @theme; font-weight: 700; font-size: 14; }
  3236. .facil { color: @theme; font-size: 12px; }
  3237. .bucar_movil { width: 40%; float: right; padding-right: 70px; margin-top: 7px }
  3238. .buscar { background: @theme !important; border: 1px solid @theme }
  3239. @media only screen and (min-width:995px) {
  3240. .buscador { position: absolute; top: 3px; float: right !important; left: 30% }
  3241. .bucar_movil { display: none }
  3242. }
  3243. @media only screen and (min-width:600px) and (max-width:994px) {
  3244. .buscador { display: none }
  3245. .bucar_movil { display: inherit }
  3246. }
  3247. @media only screen and (min-width:100px) and (max-width:599px) {
  3248. .bucar_movil { display: none }
  3249. }
  3250. @media only screen and (min-device-width:320px) and (max-device-width:480px) and (min-device-aspect-ratio:320/480) and (orientation:landscape) {
  3251. .cs-product { display: inline-block; width: 220px !important;
  3252. .pwp-img { height: 330px !important; width: 220px !important;
  3253. >a { img { max-width: 100%; height: auto; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: 0; max-height: 100vw; width: 100%; }
  3254. }
  3255. }
  3256. .slide-pwp_img { width: 205px !important; height: 307px !important; }
  3257. }
  3258. .slide-cs_productos { width: 205px !important; }
  3259. .ads-section { .small-banners { height: 210px !important; }
  3260. .adsb-inner2 { height: 210px; }
  3261. }
  3262. }
  3263. @media only screen and (min-device-width:360px) and (max-device-width:409px) and (min-device-aspect-ratio:360/640) and (orientation:portrait) {
  3264. .cs-product { display: inline-block; width: 330px !important;
  3265. .pwp-img { height: 490px !important; width: 330px !important;
  3266. >a { img { max-height: 100vh; }
  3267. }
  3268. }
  3269. .slide-pwp_img { width: 295px !important; height: 440px !important; }
  3270. }
  3271. .slide-cs_productos { width: 295px !important; }
  3272. .ads-section { .small-banners { height: 330px !important; }
  3273. .adsb-inner2 { height: 330px; }
  3274. }
  3275. }
  3276. @media only screen and (min-device-width:320px) and (max-device-width:568px) and (min-device-aspect-ratio:320/568) and (orientation:portrait) {
  3277. .cs-product { display: inline-block; width: 293px !important;
  3278. .pwp-img { height: 435px !important; width: 293px !important;
  3279. >a { img { max-width: 100%; height: auto; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: 0; max-height: 100vh; width: 100%; }
  3280. }
  3281. }
  3282. .slide-pwp_img { width: 255px !important; height: 380px !important; }
  3283. }
  3284. .slide-cs_productos { width: 255px !important; }
  3285. .ads-section { .small-banners { height: 290px !important; }
  3286. .adsb-inner2 { height: 290px; }
  3287. }
  3288. }
  3289. @media only screen and (min-device-width:481px) and (max-device-width:568px) and (min-device-aspect-ratio:320/568) and (orientation:landscape) {
  3290. .cs-product { display: inline-block; width: 245px !important;
  3291. .pwp-img { height: 365px !important; width: 245px !important;
  3292. >a { img { max-width: 100%; height: auto; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: 0; max-height: 100vw; width: 100%; }
  3293. }
  3294. }
  3295. .slide-pwp_img { width: 225px !important; height: 335px !important; }
  3296. }
  3297. .slide-cs_productos { width: 225px !important; }
  3298. .ads-section { .small-banners { height: 254px !important; }
  3299. .adsb-inner2 { height: 254px; }
  3300. }
  3301. }
  3302. @media only screen and (min-device-width:600px) and (max-device-width:767px) and (min-device-aspect-ratio:600/960) and (orientation:portrait) {
  3303. .cs-product { display: inline-block; width: 293px !important;
  3304. .pwp-img { height: 435px !important; width: 293px !important;
  3305. >a { img { max-width: 100%; height: auto; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: 0; max-height: 100vh; width: 100%; }
  3306. }
  3307. }
  3308. .slide-pwp_img { width: 225px !important; height: 335px !important; }
  3309. }
  3310. .slide-cs_productos { width: 225px !important; }
  3311. .ads-section { .small-banners { height: 270px !important; }
  3312. .adsb-inner2 { height: 270px; }
  3313. }
  3314. .col-xs-12 { width: 50%; }
  3315. .nexus7 { width: 100vw; }
  3316. }
  3317. @media only screen and (min-device-width:410px) and (max-device-width:599px) and (min-device-aspect-ratio:414/736) and (orientation:portrait) {
  3318. .cs-product { display: inline-block; width: 385px !important;
  3319. .pwp-img { height: 575px !important; width: 385px !important;
  3320. >a { img { max-width: 100%; height: auto; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: 0; max-height: 100vh; width: 100%; }
  3321. }
  3322. }
  3323. .slide-pwp_img { width: 335px !important; height: 500px !important; }
  3324. }
  3325. .slide-cs_productos { width: 335px !important; }
  3326. .zompromo { zoom: 0.5; }
  3327. .ads-section { .small-banners { height: 380px !important; }
  3328. }
  3329. }
  3330. @media only screen and (min-device-width:668px) and (max-device-width:766px) and (min-device-aspect-ratio:414/736) and (orientation:landscape) {
  3331. .cs-product { display: inline-block; width: 340px !important;
  3332. .pwp-img { height: 510px !important; width: 340px !important;
  3333. >a { img { max-width: 100%; height: auto; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: 0; max-height: 100vw; width: 100%; }
  3334. }
  3335. }
  3336. .slide-pwp_img { width: 300px !important; height: 410px !important; }
  3337. }
  3338. .slide-cs_productos { width: 300px !important; }
  3339. }
  3340. @media only screen and (min-device-width:800px) and (max-device-width:800px) and (min-device-aspect-ratio:800/1280) and (orientation:portrait) {
  3341. .cs-product { display: inline-block; width: 235px !important;
  3342. .pwp-img { height: 350px !important; width: 235px !important;
  3343. >a { img { max-width: 100%; height: auto; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: 0; max-height: 100vh; width: 100%; }
  3344. }
  3345. }
  3346. .slide-pwp_img { width: 235px !important; height: 350px !important; }
  3347. }
  3348. .slide-cs_productos { width: 235px !important; }
  3349. .ads-section { .small-banners { height: 220px !important; }
  3350. .adsb-inner2 { height: 220px; }
  3351. }
  3352. .imgpromo { height: 220px !important; }
  3353. .zomnex { -moz-transform: translateX(1) translateY(1%) scaleX(1) scaleY(1) !important; -ms-transform: translateX(1%) translateY(1%) scaleX(1) scaleY(1) !important; -o-transform: translateX(1%) translateY(1%) scaleX(1) scaleY(1) !important; transform: translateX(1%) translateY(1%) scaleX(1) scaleY(1) !important; }
  3354. }
  3355. @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (min-device-aspect-ratio:768/1024) and (orientation:landscape) {
  3356. .cs-product { display: inline-block; width: 226px !important;
  3357. .pwp-img { height: 335px !important; width: 226px !important;
  3358. >a { img { max-height: 100vh; }
  3359. }
  3360. }
  3361. .slide-pwp_img { width: 220px !important; height: 330px !important; }
  3362. }
  3363. .slide-cs_productos { width: 220px !important; }
  3364. }
  3365. @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (min-device-aspect-ratio:768/1024) and (orientation:portrait) {
  3366. .cs-product { display: inline-block; width: 236px !important;
  3367. .pwp-img { height: 352px !important; width: 236px !important;
  3368. >a { img { max-width: 100%; height: auto; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: 0; max-height: 100vh; width: 100%; }
  3369. }
  3370. }
  3371. .slide-pwp_img { width: 326px !important; height: 487px !important; }
  3372. }
  3373. .slide-cs_productos { width: 326px !important; }
  3374. .ads-section { .small-banners { height: 208px !important; }
  3375. .adsb-inner2 { height: 208px; }
  3376. }
  3377. }
  3378. @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (min-device-aspect-ratio:768/1024) and (orientation:landscape) {
  3379. .adsb-inner2 { height: 280px !important; }
  3380. .search-toggle { right: -26px !important; }
  3381. }
  3382. @media screen and (min-width:375px) and (max-width:667px) and (aspect-ratio:375/667) and (orientation:landscape) {
  3383. .cs-product { display: inline-block; width: 300px !important;
  3384. .pwp-img { height: 450px !important; width: 300px !important;
  3385. >a { img { max-width: 100%; height: auto; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: 0; max-height: 100vw !important; width: 100%; }
  3386. }
  3387. }
  3388. .slide-pwp_img { width: 300px !important; height: 450px !important; }
  3389. }
  3390. .slide-cs_productos { width: 300px !important; }
  3391. }
  3392. @media only screen and (min-device-width:375px) and (max-device-width:667px) and (aspect-ratio:375/667) and (orientation:portrait) {
  3393. .cs-product { display: inline-block; width: 345px !important;
  3394. .pwp-img { height: 518px !important; width: 345px !important;
  3395. >a { img { max-width: 100%; height: auto; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: 0; max-height: 100vh; width: 100%; }
  3396. }
  3397. }
  3398. .slide-pwp_img { width: 300px !important; height: 450px !important; }
  3399. }
  3400. .slide-cs_productos { width: 300px !important; }
  3401. }
  3402. @media only screen and (min-device-width:480px) and (max-device-width:767px) and (orientation:landscape) {
  3403. .col-xxs-4 { width: 33.33333333% !important; }
  3404. .col-xxs-6 { width: 50% !important }
  3405. }
  3406. @media only screen and (min-device-width:1024px) and (max-device-width:1366px) and (min-device-aspect-ratio:1024/1366) and (orientation:portrait) {
  3407. .cs-product { display: inline-block; width: 230px !important;
  3408. .pwp-img { height: 340px !important; width: 230px !important;
  3409. >a { img { max-width: 100%; height: auto; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: 0; max-height: 100vh; width: 100%; }
  3410. }
  3411. }
  3412. }
  3413. .adsb-inner2 { height: 280px !important; }
  3414. .search-toggle { right: -26px !important; }
  3415. }
  3416. @media (min-width:1200px) {
  3417. .cs-product {
  3418. /*display: inline-block; width: 345px !important;
  3419. .pwp-img { height: 518px !important; width: 345px !important;
  3420. >a { img { max-width: 100%; height: auto; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: 0; max-height: 100vh; width: 100%; }
  3421. }
  3422. }*/
  3423. .slide-pwp_img { width: 220px !important; height: 330px !important; }
  3424. }
  3425. .slide-cs_productos { width: 220px !important; }
  3426. .ads-section { .small-banners { height: 262px !important; }
  3427. /*.adsb-inner2 { height: 208px; }*/
  3428. }
  3429. }
  3430. @media screen and (min-width:1920px) and (max-widht:2559px) {
  3431. body { zoom: 1.5; }
  3432. }
  3433. @media (min-width:2560px) {
  3434. body { zoom: 2.1; }
  3435. }
  3436. @media screen and (min-width:970px) {
  3437. .portadaamo { height: 472px !important; overflow: hidden }
  3438. }
  3439. @media screen and (max-width:767px) {
  3440. .jeanspromo { height: 50vh !important }
  3441. }