git.roojs.org Git - bootswatch/blob - mPurpose/less/components.less

   1 /*--------------------------------------------------------------------------\r
   2 +       Services Style\r
   3 --------------------------------------------------------------------------*/\r
   4 \r
   5 /* Multicolumn */\r
   6 \r
   7 .service-wrapper{\r
   8         background: #FFF;\r
   9         margin: 20px 10px;\r
  10         text-align: center;\r
  11         padding: 30px 20px;\r
  12         .border-radius(5px);\r
  13         .box-shadow(~"0 0 3px #999");\r
  14         h3{\r
  15                 font-size: 1.2em;\r
  16                 margin: 10px 0 !important;\r
  17         }\r
  18         p{\r
  19                 margin-top: 0;\r
  20         }\r
  21 }\r
  22 \r
  23 /* Row */\r
  24 \r
  25 .service-wrapper-row{\r
  26         padding: 10px 0;\r
  27         h3{\r
  28                 padding-top: 15px;\r
  29         }\r
  30         .service-image{\r
  31                 padding-top: 15px;\r
  32                 text-align: center;\r
  33                 img{\r
  34                         max-width: 80%;\r
  35                         vertical-align: bottom;\r
  36                         bottom: 0;\r
  37                         border: 7px solid #FFF;\r
  38                         .border-radius(5px);\r
  39                         .box-shadow(~"0 0 8px #999");\r
  40                 }\r
  41         }\r
  42 }\r
  43 \r
  44 /*--------------------------------------------------------------------------\r
  45 +       Pricing Table Style\r
  46 --------------------------------------------------------------------------*/\r
  47 \r
  48 .pricing-plan {\r
  49         float: left;\r
  50         text-align: center;\r
  51         background: #fafafa;\r
  52         background-clip: padding-box;\r
  53         position: relative;\r
  54         width: 48%;\r
  55         margin: 10px 1% 10px 0;\r
  56         padding: 20px;\r
  57         .border-radius(7px);\r
  58         .box-sizing(border-box);\r
  59         .box-shadow(~"0 1px 8px rgba(0, 0, 0, 0.4)");\r
  60         .transition(~"box-shadow .25s linear");\r
  61         &:hover{\r
  62                 .box-shadow(~"0 0 8px #333");\r
  63                 z-index: 5;\r
  64         }\r
  65         \r
  66         .pricing-plan-title {\r
  67                 position: relative;\r
  68                 margin: -20px -10px 20px;\r
  69                 padding: 20px;\r
  70                 line-height: 1;\r
  71                 font-size: 16px;\r
  72                 font-weight: bold;\r
  73                 color: #595f6b;\r
  74                 border-bottom: 1px dashed #d2d2d2;\r
  75                 &:before {\r
  76                         content: '';\r
  77                         position: absolute;\r
  78                         bottom: -1px;\r
  79                         left: 0;\r
  80                         right: 0;\r
  81                         height: 1px;\r
  82                         background-size: 3px 1px;\r
  83                         .gradient(~"linear-gradient(to right, white, white 33%, #d2d2d2 34%, #d2d2d2)");\r
  84                 }\r
  85         }\r
  86         .pricing-plan-price {\r
  87                 margin: 0 auto 20px;\r
  88                 width: 90px;\r
  89                 height: 90px;\r
  90                 line-height: 90px;\r
  91                 font-size: 19px;\r
  92                 font-weight: bold;\r
  93                 color: white;\r
  94                 background: #595f6b;\r
  95                 .border-radius(45px);\r
  96                 span {\r
  97                         font-size: 12px;\r
  98                         font-weight: normal;\r
  99                         color: rgba(255, 255, 255, 0.9);\r
 100                 }\r
 101         }\r
 102         .pricing-plan-features {\r
 103                 margin-bottom: 20px;\r
 104                 margin-left: 0;\r
 105                 padding: 0;\r
 106                 line-height: 2;\r
 107                 font-size: 12px;\r
 108                 color: #999;\r
 109                 text-align: center;\r
 110                 list-style-type: none;\r
 111                 li{\r
 112                         strong{\r
 113                                 font-weight: bold;\r
 114                                 color: #888;\r
 115                         }\r
 116                 }\r
 117         }\r
 118         .pricing-plan-promote {\r
 119                 margin: 0;\r
 120                 padding: 40px 20px;\r
 121                 background-color: white;\r
 122                 border-width: 2px;\r
 123                 .border-radius(7px);\r
 124                 z-index: 4;\r
 125         }\r
 126 }\r
 127 \r
 128 .ribbon-wrapper {\r
 129         width: 85px;\r
 130         height: 88px;\r
 131         overflow: hidden;\r
 132         position: absolute;\r
 133         top: 0;\r
 134         right: 0;\r
 135 }\r
 136 .price-ribbon {\r
 137         font: bold 15px Sans-Serif;\r
 138         color: #333;\r
 139         text-align: center;\r
 140         text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;\r
 141         position: relative;\r
 142         padding: 7px 0;\r
 143         left: -5px;\r
 144         top: 15px;\r
 145         width: 120px;\r
 146         background-color: #FFF;\r
 147         color: #6a6340;\r
 148         .rotate(45deg);\r
 149         .box-shadow(~"0px 0px 3px rgba(0,0,0,0.3)");\r
 150 }\r
 151 \r
 152 .ribbon-green {\r
 153         background-color: #BFDC7A;\r
 154 }\r
 155 \r
 156 .ribbon-blue {\r
 157         background-color: #5ACBFF;\r
 158 }\r
 159 \r
 160 .ribbon-orange {\r
 161         background-color: #FF9542;\r
 162 }\r
 163 \r
 164 .ribbon-red {\r
 165         background-color: #FF7373;\r
 166 }\r
 167 \r
 168 @media (min-width: 768px) {\r
 169         .pricing-plan {\r
 170                 width: 25%;\r
 171                 margin: 20px 0;\r
 172                 padding: 20px;\r
 173                 .border-radius(0);\r
 174                 &:first-child {\r
 175                         .border-top-left-radius(7px);\r
 176                         .border-bottom-left-radius(7px);\r
 177                 }\r
 178                 &:last-child {\r
 179                         border-width: 2px;\r
 180                         .border-top-right-radius(7px);\r
 181                         .border-bottom-right-radius(7px);\r
 182                 }\r
 183         }\r
 184         .pricing-plan-promote {\r
 185                 background: #fff;\r
 186                 padding: 40px;\r
 187                 margin-top: 0;\r
 188                 .border-radius(7px);\r
 189                 z-index: 4;\r
 190         }\r
 191 }\r
 192 \r
 193 /*--------------------------------------------------------------------------\r
 194 +       Contact Us Style\r
 195 --------------------------------------------------------------------------*/\r
 196 \r
 197 #contact-us-map{\r
 198         height: 300px;\r
 199         .box-shadow(~"inset 0 1px #fff,0 0 8px #c8cfe6");\r
 200 }\r
 201 \r
 202 .contact-us-details{\r
 203         margin: 20px 0;\r
 204         font-size: 0.9em;\r
 205 }\r
 206 \r
 207 /*--------------------------------------------------------------------------\r
 208 +       Video Wrapper Style\r
 209 --------------------------------------------------------------------------*/\r
 210 \r
 211 .video-wrapper{\r
 212         .box-shadow(~"0 0 5px #000");\r
 213         margin: 20px 0;\r
 214 }\r
 215 \r
 216 /*--------------------------------------------------------------------------\r
 217 +       Call to Action Bar Style\r
 218 --------------------------------------------------------------------------*/\r
 219 \r
 220 .calltoaction-wrapper{\r
 221         text-align: center;\r
 222         h3{\r
 223                 display: inline-block;\r
 224                 line-height: 36px;\r
 225                 margin-right: 10px;\r
 226                 margin-bottom: 0;\r
 227         }\r
 228         a{\r
 229                 vertical-align: top;\r
 230         }\r
 231 }\r
 232 \r
 233 /*--------------------------------------------------------------------------\r
 234 +       Testimonials Style\r
 235 --------------------------------------------------------------------------*/\r
 236 \r
 237 .testimonial{\r
 238         blockquote{\r
 239                 margin: 0;\r
 240                 padding: 0;\r
 241                 border-left: none;\r
 242                 p{\r
 243                         font-size: 0.9em;\r
 244                         margin-bottom: 20px;\r
 245                         line-height: 1.5;\r
 246                 }\r
 247         }\r
 248         .testimonial-bubble {\r
 249                 text-align: justify;\r
 250                 .border-radius(4px);\r
 251                 padding: 0 20px 20px 20px;\r
 252                 margin: 35px 10px 20px 10px;\r
 253                 background: #FFF;\r
 254                 position: relative;\r
 255                 .box-sizing(border-box);\r
 256                 .box-shadow(~"inset 0 1px #fff,0 1px 2px #c8cfe6");\r
 257         }\r
 258         .testimonial-bubble::before {\r
 259                 background-color: #FFF;\r
 260             content: "\00a0";\r
 261             display: block;\r
 262             height: 20px;\r
 263             width:  20px;\r
 264             top: -10px;\r
 265             left: 45%;\r
 266             position: relative;\r
 267             .transform(~"rotate(45deg)");\r
 268         }\r
 269         .author-photo{\r
 270                 text-align: center;\r
 271                 img{\r
 272                         margin: auto;\r
 273                         border: 5px solid #FFF;\r
 274                         .border-radius(100px);\r
 275                         .box-shadow(~"inset 0 1px #fff,0 1px 2px #c8cfe6");\r
 276                 }\r
 277         }\r
 278         .author-info{\r
 279                 font-weight: 400;\r
 280                 font-size: 0.8em;\r
 281         }\r
 282 }\r
 283 \r
 284 /*--------------------------------------------------------------------------\r
 285 +       Clients Logos Style\r
 286 --------------------------------------------------------------------------*/\r
 287 \r
 288 .clients-logo-wrapper{\r
 289         img{\r
 290                 max-width: 100%;\r
 291         }\r
 292 }\r
 293 \r
 294 /*--------------------------------------------------------------------------\r
 295 +       News Style\r
 296 --------------------------------------------------------------------------*/\r
 297 \r
 298 .featured-news, .latest-news{\r
 299         .caption{\r
 300                 padding: 10px 0 5px 0;\r
 301                 a{\r
 302                         font-size: 1.1em;\r
 303                         font-weight: 600;\r
 304                         color: @font-color;\r
 305                 }\r
 306         }\r
 307         .intro{\r
 308                 padding-bottom: 10px;\r
 309                 font-size: 0.9em;\r
 310                 a{\r
 311                         white-space: nowrap;\r
 312                 }\r
 313         }\r
 314         .date{\r
 315                 font-size: 0.7em;\r
 316                 color: #999;\r
 317         }\r
 318         img{\r
 319                 max-width: 100%;\r
 320                 margin: 10px 0 10px 0;\r
 321                 .border-radius(5px);\r
 322                 .box-shadow(~"inset 0 1px #fff,0 0 8px #c8cfe6");\r
 323         }\r
 324 }\r
 325 \r
 326 /*--------------------------------------------------------------------------\r
 327 +       Frequently Asked Questions Style\r
 328 --------------------------------------------------------------------------*/\r
 329 \r
 330 .faq-wrapper{\r
 331         h3{\r
 332                 margin-top: 20px !important;\r
 333         }\r
 334         .accordion-inner {\r
 335                 margin: 10px 0 10px 20px;\r
 336                 padding: 0 10px;\r
 337                 font-size: 0.9em;\r
 338                 .answer{\r
 339                         font-weight: 600;\r
 340                 }\r
 341         }\r
 342 }\r
 343 \r
 344 /*--------------------------------------------------------------------------\r
 345 +       Blog Style\r
 346 --------------------------------------------------------------------------*/\r
 347 \r
 348 /* Posts List */\r
 349 \r
 350 .blog-post{\r
 351         background: #FFF;\r
 352         position: relative;\r
 353         margin: 20px 0;\r
 354         border: 7px solid #FFF;\r
 355         img{\r
 356                 max-width: 100%;\r
 357         }\r
 358         .border-radius(5px);\r
 359         .box-shadow(~"inset 0 1px #fff,0 0 8px #c8cfe6");\r
 360         .post-info{\r
 361                 background: #000;\r
 362                 background: rgba(0,0,0,0.6);\r
 363                 color: #FFF;\r
 364                 line-height: 1.2;\r
 365                 position: absolute;\r
 366                 padding: 5px;\r
 367                 left: 10px;\r
 368                 top: 10px;\r
 369                 .border-radius(5px);\r
 370         }\r
 371         .post-comments-count{\r
 372                 text-align: center;\r
 373         }\r
 374 }\r
 375 \r
 376 .post-info{\r
 377         .post-comments-count{\r
 378                 padding-top: 5px;\r
 379                 i{\r
 380                         margin-right: 5px;\r
 381                 }\r
 382                 a{\r
 383                         color: #FFF;\r
 384                 }\r
 385         }\r
 386         .post-date .date{\r
 387                 font-size: 0.7em;\r
 388                 font-weight: 600;\r
 389         }\r
 390 }\r
 391 \r
 392 .post-title{\r
 393         h3{\r
 394                 font-size: 1.2em;\r
 395                 border-bottom: 1px dotted #828282;\r
 396                 margin: 0 20px;\r
 397                 padding-top: 10px;\r
 398                 a{\r
 399                         color: @font-color;\r
 400                 }\r
 401         }\r
 402 }\r
 403 \r
 404 .post-summary{\r
 405         margin: 10px 20px;\r
 406         p{\r
 407                 color: #828282;\r
 408                 font-size: 0.9em;\r
 409                 text-align: justify;\r
 410         }\r
 411 }\r
 412 \r
 413 .post-more{\r
 414         text-align: right;\r
 415         padding: 0 20px 20px 0;\r
 416 }\r
 417 \r
 418 /* Single Post */\r
 419 \r
 420 .blog-single-post{\r
 421         padding: 10px 30px;\r
 422 }\r
 423 \r
 424  .single-post-title h3{\r
 425         font-size: 1.5em;\r
 426         margin: 0;\r
 427 }\r
 428 \r
 429 .single-post-info{\r
 430         margin-bottom: 20px;\r
 431         padding-bottom: 10px;\r
 432         border-bottom: 1px dotted #828282;\r
 433         i{\r
 434                 color: #333;\r
 435                 margin-right: 5px;\r
 436         }\r
 437 }\r
 438 \r
 439 .single-post-image{\r
 440         text-align: center;\r
 441         img{\r
 442                 .box-shadow(~"0 0 5px #000");\r
 443         }\r
 444 }\r
 445 \r
 446 .single-post-content{\r
 447         margin: 30px 0 20px 0;\r
 448         padding-bottom: 20px;\r
 449         border-bottom: 2px dotted #CCC;\r
 450         p{\r
 451                 color: #828282;\r
 452                 font-size: 0.9em;\r
 453                 text-align: justify;\r
 454         }\r
 455 }\r
 456 \r
 457 .post-comments{\r
 458         list-style-type: none;\r
 459         margin-left: 0;\r
 460         margin-bottom: 40px;\r
 461         padding: 0;\r
 462         ul{\r
 463                 list-style-type: none;\r
 464                 margin-left: 30px;\r
 465                 padding: 0;\r
 466         }\r
 467 }\r
 468 \r
 469 .comment-wrapper p{\r
 470         margin: 0;\r
 471         position: relative;\r
 472         border: 1px solid #CCC;\r
 473         padding: 10px;\r
 474         margin-bottom: 10px;\r
 475         .border-radius(3px);\r
 476 }\r
 477 \r
 478 .comment-author{\r
 479         font-size: 1.3em;\r
 480         font-weight: 600;\r
 481         margin-bottom: 10px;\r
 482         img{\r
 483                 max-width: 50px;\r
 484                 .border-radius(25px);\r
 485                 margin-right: 10px;\r
 486         }\r
 487 }\r
 488 \r
 489 .comment-date{\r
 490         font-size: 0.9em;\r
 491         margin-right: 20px;\r
 492 }\r
 493 \r
 494 .comment-actions{\r
 495         text-align: right;\r
 496         opacity: 0.6;\r
 497         .transition(~"opacity .25s linear");\r
 498         &:hover{\r
 499                 text-align: right;\r
 500                 opacity: 1;\r
 501         }\r
 502         i{\r
 503                 color: #333;\r
 504         }\r
 505 }\r
 506 \r
 507 .comment-reply-btn{\r
 508         margin-left: 10px;\r
 509 }\r
 510 \r
 511 .blog-sidebar{\r
 512         h4{\r
 513                 margin-top: 20px;\r
 514                 font-weight: 700;\r
 515                 &:first-child{\r
 516                         margin-top: 0;\r
 517                 }\r
 518         }\r
 519         ul{\r
 520                 list-style-type: none;\r
 521                 margin-left: 0;\r
 522                 padding: 0;\r
 523         }\r
 524         .recent-posts, .blog-categories{\r
 525                 li{\r
 526                         padding: 5px 20px 5px 0;\r
 527                         border-top: 1px solid #D5D5D5;\r
 528                         &:last-child {\r
 529                                 border-bottom: 1px solid #D5D5D5;\r
 530                         }\r
 531                 }\r
 532                 a{\r
 533                         color: @font-color;\r
 534                 }\r
 535         }\r
 536 }\r
 537 \r
 538 /*--------------------------------------------------------------------------\r
 539 +       E-commerce Style\r
 540 --------------------------------------------------------------------------*/\r
 541 \r
 542 .shop-item{\r
 543         position: relative;\r
 544         background: #FFF;\r
 545         padding-bottom: 10px;\r
 546         margin-top: 20px;\r
 547         margin-bottom: 10px;\r
 548         border: 8px solid #FFF;\r
 549         .border-radius(5px);\r
 550         .box-shadow(~"inset 0 1px #fff,0 0 8px #c8cfe6");\r
 551         img{\r
 552                 max-width: 100%;\r
 553         }\r
 554         .image{\r
 555                 text-align: center;\r
 556         }\r
 557         .title{\r
 558                 padding: 20px 0 10px;\r
 559                 h3{\r
 560                         font-size: 0.9em;\r
 561                         margin: 0 10px;\r
 562                         text-align: center;\r
 563                         a{\r
 564                                 color: @font-color;\r
 565                                 text-transform:uppercase;\r
 566                         }\r
 567                 }\r
 568         }\r
 569         .colors{\r
 570                 text-align: center;\r
 571                 margin-bottom: 10px;\r
 572                 span{\r
 573                         display: inline-block;\r
 574                         *display: inline;\r
 575                         width: 8px;\r
 576                         height: 8px;\r
 577                         border-width: 1px;\r
 578                         border-style: solid;\r
 579                         margin: 2px;\r
 580                 }\r
 581         }\r
 582         .price{\r
 583                 color: @font-color;\r
 584                 font-size: 1.5em;\r
 585                 text-align: center;\r
 586                 margin-bottom: 20px;\r
 587                 font-weight: 600;\r
 588                 .border-radius(7px);\r
 589                 .price-was{\r
 590                         color: #A7A7A7;\r
 591                         font-size: 0.8em;\r
 592                         text-decoration: line-through;\r
 593                 }\r
 594         }\r
 595 \r
 596         .description{\r
 597                 color: #828282;\r
 598                 font-size: 0.9em;\r
 599                 text-align: justify;\r
 600                 margin: 0 10px;\r
 601                 p{\r
 602                         border-top: 1px solid #ECECEC;\r
 603                         padding: 10px;\r
 604                         margin: 0;\r
 605                 }\r
 606         }\r
 607 \r
 608         .actions{\r
 609                 border-top: 1px solid #ECECEC;\r
 610                 margin: 0 10px;\r
 611                 padding-top: 20px;\r
 612                 text-align: center;\r
 613                 span{\r
 614                         font-size: 0.8em;\r
 615                         white-space: nowrap;\r
 616                 }\r
 617         }\r
 618 }\r
 619 \r
 620 .colors{\r
 621         text-align: center;\r
 622         margin-bottom: 10px;\r
 623         span{\r
 624                 display: inline-block;\r
 625                 *display: inline;\r
 626                 width: 8px;\r
 627                 height: 8px;\r
 628                 border-width: 1px;\r
 629                 border-style: solid;\r
 630                 margin: 2px;\r
 631         }\r
 632 }\r
 633 \r
 634 span.color-white{\r
 635         background-color: #D7D7CF;\r
 636         border-color: darken(#D7D7CF, 10%);\r
 637 }\r
 638 \r
 639 span.color-black{\r
 640         background-color: #000;\r
 641         border-color: darken(#000, 10%);\r
 642 }\r
 643 \r
 644 span.color-blue{\r
 645         background-color: #073A52;\r
 646         border-color: darken(#073A52, 10%);\r
 647 }\r
 648 \r
 649 span.color-orange{\r
 650         background-color: #D56E1D;\r
 651         border-color: darken(#D56E1D, 10%);\r
 652 }\r
 653 \r
 654 span.color-green{\r
 655         background-color: #5C6632;\r
 656         border-color: darken(#5C6632, 10%);\r
 657 }\r
 658 \r
 659 span.color-red{\r
 660         background-color: #DA1111;\r
 661         border-color: darken(#DA1111, 10%);\r
 662 }\r
 663 \r
 664 /*--------------------------------------------------------------------------\r
 665 +       Product Details Page Style\r
 666 --------------------------------------------------------------------------*/\r
 667 \r
 668 .product-image-large{\r
 669         border: 8px solid #FFF;\r
 670         text-align: center;\r
 671         margin-bottom: 10px;\r
 672         .border-radius(5px);\r
 673         .box-shadow(~"inset 0 1px #fff,0 0 8px #c8cfe6");\r
 674         img{\r
 675                 max-width: 100%;\r
 676         }\r
 677 }\r
 678 \r
 679 .product-details{\r
 680         h4, h5{\r
 681                 font-weight: 700;\r
 682         }\r
 683         h4{\r
 684                 margin-bottom: 20px;\r
 685         }\r
 686         h5{\r
 687                 margin-top: 20px;\r
 688         }\r
 689         .price{\r
 690                 font-size: 1.4em;\r
 691                 font-weight: 700;\r
 692                 text-align: left;\r
 693                 padding: 5px;\r
 694                 background: fade(#FFF, 60%);\r
 695                 display: inline;\r
 696                 .border-radius(5px);\r
 697         }\r
 698         .price-was{\r
 699                 text-decoration: line-through;\r
 700                 font-size: 0.8em;\r
 701                 font-weight: normal;\r
 702         }\r
 703         .shop-item-selections{\r
 704                 width: 100%;\r
 705                 td{\r
 706                         line-height: 36px;\r
 707                         &:first-child{\r
 708                                 width: 30%;\r
 709                         }\r
 710                 }\r
 711         }\r
 712         .choose-item-color{\r
 713                 span{\r
 714                         display: inline-block;\r
 715                         *display: inline;\r
 716                         width: 10px;\r
 717                         height: 10px;\r
 718                         border-width: 1px;\r
 719                         border-style: solid;\r
 720                         margin-bottom: -1px;\r
 721                         margin-right: 2px;\r
 722                 }\r
 723         }\r
 724 }\r
 725 \r
 726 .product-details-nav{\r
 727         margin-top: 30px !important;\r
 728         margin-left: 0 !important;\r
 729 }\r
 730 \r
 731 .product-detail-info{\r
 732         background: #fff;\r
 733         border-top: 0;\r
 734         border-left: 1px;\r
 735         border-right: 1px;\r
 736         border-bottom: 1px;\r
 737         border-color: #ddd;\r
 738         border-style: solid;\r
 739         padding: 20px 30px;\r
 740         p, ul{\r
 741                 font-size: 0.9em;\r
 742         }\r
 743         table{\r
 744                 width: 100%;\r
 745                 td{\r
 746                         font-size: 0.9em;\r
 747                         width: 50%;\r
 748                         line-height: 28px;\r
 749                         border-bottom: 1px solid #E7E7E7;\r
 750                         &:first-child{\r
 751                                 font-weight: 600;\r
 752                         }\r
 753                 }\r
 754                 tr:last-child{\r
 755                         td{\r
 756                                 border-bottom: 0;\r
 757                         }\r
 758                 }\r
 759         }\r
 760 }\r
 761 \r
 762 /*--------------------------------------------------------------------------\r
 763 +       Shopping Cart Style\r
 764 --------------------------------------------------------------------------*/\r
 765 \r
 766 .shopping-cart{\r
 767         margin: 10px 0 0 0;\r
 768         width: 100%;\r
 769         border-collapse: separate;\r
 770     border-spacing: 0 10px;\r
 771     a{\r
 772                 color: @font-color;\r
 773         }\r
 774         tr{\r
 775                 background: #FFF;       \r
 776         }\r
 777         td{\r
 778                 padding: 10px;\r
 779                 &:first-child{\r
 780                         .border-radius(5px 0 0 5px);\r
 781                         margin-left: 10px;\r
 782                 }\r
 783                 &:last-child{\r
 784                         .border-radius(0 5px 5px 0);\r
 785                         margin-right: 10px;\r
 786                 }\r
 787         }\r
 788         .image, .image img{\r
 789                 max-width: 150px;\r
 790         }\r
 791 \r
 792         .title{\r
 793                 font-size: 1.1em;\r
 794         }\r
 795 \r
 796         .feature{\r
 797                 font-size: 0.8em;\r
 798         }\r
 799 \r
 800         .color span{\r
 801                 display: inline-block;\r
 802                 *display: inline;\r
 803                 width: 8px;\r
 804                 height: 8px;\r
 805                 border-width: 1px;\r
 806                 border-style: solid;\r
 807         }\r
 808 \r
 809         .quantity{\r
 810                 width: 80px;\r
 811         }\r
 812 \r
 813         .price{\r
 814                 color: @font-color;\r
 815                 font-size: 1.2em;\r
 816                 width: 80px;\r
 817                 text-align: center;\r
 818         }\r
 819 \r
 820         .actions{\r
 821                 width: 80px;\r
 822                 .btn{\r
 823                         margin-bottom: 5px;\r
 824                 }\r
 825         }\r
 826 }\r
 827 \r
 828 .cart-totals{\r
 829         margin: 20px 0 30px 0;\r
 830         border-top: 2px solid #535b60;\r
 831         font-size: 1.1em;\r
 832         line-height: 24px;\r
 833         text-align: right;\r
 834         width: 100%;\r
 835         td{\r
 836                 width: 150px;\r
 837                 padding: 3px 0;\r
 838         }\r
 839         .cart-grand-total{\r
 840                 font-size: 1.3em;\r
 841         }\r
 842 }\r
 843 \r
 844 @media (max-width: 500px){\r
 845         .shopping-cart{\r
 846                 .image{\r
 847                         display: none;\r
 848                 }\r
 849         }\r
 850         .cart-item-title{\r
 851                 font-size: 0.8em;\r
 852         }\r
 853 }\r
 854 \r
 855 \r
 856 /*--------------------------------------------------------------------------\r
 857 +       Products Slider Style\r
 858 --------------------------------------------------------------------------*/\r
 859 \r
 860 .products-slider{\r
 861         .shop-item{\r
 862                 border:0;\r
 863                 margin: 0;\r
 864                 padding: 0;\r
 865                 width: 25%;\r
 866                 float: left;\r
 867                 display: block;\r
 868                 position: relative;\r
 869                 .border-radius(5px);\r
 870                 .box-shadow(~"inset 0 1px #fff,0 0 8px #c8cfe6");\r
 871                 img{\r
 872                         .border-radius(~"5px 5px 0 0");\r
 873                 }\r
 874                 .title{\r
 875                         h3{\r
 876                                 a{\r
 877                                         font-size: 1em;\r
 878                                         font-weight: 400;\r
 879                                 }\r
 880                         }\r
 881                 }\r
 882                 .price{\r
 883                         font-size: 1.1em;\r
 884                         font-weight: 400;\r
 885                     margin-bottom: 10px;\r
 886                 }\r
 887                 .actions{\r
 888                         padding: 10px 0;\r
 889                 }\r
 890         }\r
 891 }\r
 892 \r
 893 @media (max-width: 768px){\r
 894         .products-slider .shop-item{\r
 895                 width: 34%;\r
 896         }\r
 897 }\r
 898 \r
 899 @media (max-width: 479px){\r
 900         .products-slider .shop-item{\r
 901                 width: 100%;\r
 902         }\r
 903 }\r
 904 \r
 905 /*--------------------------------------------------------------------------\r
 906 +       Events List Style\r
 907 --------------------------------------------------------------------------*/\r
 908 \r
 909 .events-list{\r
 910         width: 100%;\r
 911         font-size: 0.9em;\r
 912         tr{\r
 913                 td{\r
 914                         padding: 5px 20px 5px 0;\r
 915                         &:last-child{\r
 916                                 padding: 5px 0;\r
 917                                 text-align: right;\r
 918                         }\r
 919                 }\r
 920                 &:hover{\r
 921                         .event-date{\r
 922                                 border-left: 5px solid @theme-color;\r
 923                         }\r
 924                 }\r
 925         }\r
 926         .event-date{\r
 927                 margin: 3px 0;\r
 928                 padding: 2px 10px;\r
 929                 border-left: 5px solid #CFCFCF;\r
 930                 .transition(~"all .25s linear");\r
 931         }\r
 932         .event-date{\r
 933                 .event-day{\r
 934                         color: #808080;\r
 935                         font-size: 1.5em;\r
 936                         font-weight: 600;\r
 937                         text-align: center;\r
 938                 }\r
 939                 .event-month{\r
 940                         color: #CFCFCF;\r
 941                         font-size: 1.1em;\r
 942                         font-weight: 600;\r
 943                         text-align: center;\r
 944                 }\r
 945                 .event-venue, .event-price{\r
 946                         white-space: nowrap;\r
 947                 }\r
 948         }\r
 949 }\r
 950 \r
 951 /*--------------------------------------------------------------------------\r
 952 +       Jobs list Style\r
 953 --------------------------------------------------------------------------*/\r
 954 \r
 955 .jobs-list{\r
 956         width: 100%;\r
 957         th{\r
 958                 font-size: 1.2em;\r
 959                 text-align: left;\r
 960                 padding: 10px 0;\r
 961         }\r
 962         td{\r
 963                 padding: 5px 20px 5px 0;\r
 964                 border-top: 1px solid #E6E6E6;\r
 965         }\r
 966         tr{\r
 967                 &:last-child{\r
 968                         td{\r
 969                                 border-bottom: 1px solid #E6E6E6;\r
 970                         }\r
 971                 }\r
 972         }\r
 973 }\r
 974 \r
 975 .job-position{\r
 976         a{\r
 977                 color: @font-color;\r
 978                 font-size: 1.1em;\r
 979         }\r
 980 }\r
 981 \r
 982 .job-location, .job-type{\r
 983         font-size: 0.9em;\r
 984 }\r
 985 \r
 986 // Join us promo\r
 987 \r
 988 .join-us-promo{\r
 989         blockquote{\r
 990                 margin: 0;\r
 991                 padding: 0;\r
 992                 border-left: none;\r
 993         }\r
 994         blockquote{\r
 995                 p{\r
 996                         font-size: 1.1em;\r
 997                         margin-bottom: 20px;\r
 998                         line-height: 1.5;\r
 999                 }\r
1000         }\r
1001         .author-info{\r
1002                 font-weight: 400;\r
1003                 font-size: 0.8em;\r
1004         }\r
1005         .author-photo{\r
1006                 text-align: center;\r
1007         }\r
1008         .author-photo{\r
1009                 img{\r
1010                         margin: auto;\r
1011                         border: 5px solid #FFF;\r
1012                         .border-radius(70px);\r
1013                         .box-shadow(~"inset 0 1px #fff,0 1px 2px #c8cfe6");\r
1014                 }\r
1015         }\r
1016 }\r
1017 \r
1018 .join-us-bubble {\r
1019         text-align: justify;\r
1020         .border-radius(4px);\r
1021         padding: 20px 20px 0 20px;\r
1022         margin-top: 30px;\r
1023         margin-bottom: 30px;\r
1024         background: #FFF;\r
1025         position: relative;\r
1026         .box-sizing(border-box);\r
1027         .box-shadow(~"inset 0 1px #fff,0 0 4px #c8cfe6");\r
1028 }\r
1029 \r
1030 .join-us-bubble::after {\r
1031         background: #FFF;\r
1032     content: "\00a0";\r
1033     display: block;\r
1034     height: 20px;\r
1035     width:  20px;\r
1036     bottom: -10px;\r
1037     left: 45%;\r
1038     position: relative;\r
1039     .transform(~"rotate(45deg)");\r
1040     .box-shadow(~"inset 0 1px #fff,1px 1px 1px #c8cfe6");\r
1041 }\r
1042 \r
1043 .job-details-wrapper p{\r
1044         text-align: justify;\r
1045 }\r
1046 \r
1047 /*--------------------------------------------------------------------------\r
1048 +       Login/Register/Reset Password Forms Style\r
1049 --------------------------------------------------------------------------*/\r
1050 \r
1051 .basic-login{\r
1052         background: fade(#FFF, 80%);\r
1053         padding: 20px 20px 10px 20px;\r
1054         .border-radius(5px);\r
1055         .box-shadow(~"inset 0 1px #fff,0 0 4px #c8cfe6");\r
1056         form{\r
1057                 margin: 0;\r
1058         }\r
1059         label{\r
1060                 line-height: 30px;\r
1061                 font-size: 1.2em;\r
1062         }\r
1063         input[type="checkbox"]{\r
1064                 margin-top: 4px;\r
1065         }\r
1066 }\r
1067 \r
1068 .social-login{\r
1069         p{\r
1070                 text-align: center;\r
1071                 font-size: 1.2em;\r
1072                 font-style: italic;\r
1073                 padding: 20px 0;\r
1074         }\r
1075         .social-login-buttons{\r
1076                 text-align: center;\r
1077                 a{\r
1078                         position: relative;\r
1079                         display: inline-block;\r
1080                         white-space: nowrap;\r
1081                         height: 35px;\r
1082                         line-height: 35px;\r
1083                         padding-right: 15px;\r
1084                         margin: 10px 5px;\r
1085                         color: #fff;\r
1086                         font-size: 1.1em;\r
1087                         text-align: left;\r
1088                         .border-radius(3px);\r
1089                         .transition(~"opacity .2s linear");\r
1090                         .translateZ(0);\r
1091                         &:hover{\r
1092                                 opacity: 0.8;\r
1093                                 text-decoration: none;\r
1094                         }\r
1095                         &:before{\r
1096                                 content: '';\r
1097                                 display: block;\r
1098                                 position: absolute;\r
1099                                 top: 5px;\r
1100                                 width: 24px;\r
1101                                 height: 24px;\r
1102                                 background-image: ~"url(../img/social-login.png)";\r
1103                                 background-repeat: no-repeat;\r
1104                         }\r
1105                 }\r
1106         }\r
1107         .btn-facebook-login{\r
1108                 padding-left: 35px;\r
1109                 background-color: #6886bc;\r
1110                 .gradient(~"linear-gradient(top,#6886bc 0,#466ca9 100%)");\r
1111         }\r
1112 \r
1113         .btn-twitter-login{\r
1114                 padding-left: 45px;\r
1115                 background-color: #25b6e6;\r
1116         }\r
1117         .btn-facebook-login:before{\r
1118                 left: 10px;\r
1119                 background-position: 0 0;\r
1120         }\r
1121         .btn-twitter-login:before{\r
1122                 left: 15px;\r
1123                 background-position: -48px 0;\r
1124         }\r
1125         .not-member{\r
1126                 p{\r
1127                         font-size: 1.5em;\r
1128                         font-weight: 600;\r
1129                         font-style: normal;\r
1130                         margin-top: 30px;\r
1131                         border-top: 1px solid #CCC;\r
1132                 }\r
1133         }\r
1134         \r
1135 }\r
1136 \r
1137 /*--------------------------------------------------------------------------\r
1138 +       'In Press' Style\r
1139 --------------------------------------------------------------------------*/\r
1140 \r
1141 .in-press{\r
1142         a{\r
1143                 color: lighten(@font-color, 30%);\r
1144                 font-size: 1.3em;\r
1145                 font-family: Georgia, serif;\r
1146                 line-height: 28px;\r
1147                 position: relative;\r
1148                 padding-left: 16px;\r
1149                 padding-bottom: 32px;\r
1150                 margin-bottom: 15px;\r
1151                 display: block;\r
1152                 .transition(~"color .25s linear");\r
1153                 &:hover{\r
1154                         color: @theme-color;\r
1155                         text-decoration: none;\r
1156                 }\r
1157                 &:after{\r
1158                         content: '';\r
1159                         display: block;\r
1160                         position: absolute;\r
1161                         bottom: -10px;\r
1162                         right: 20px;\r
1163                         width: 120px;\r
1164                         height: 32px;\r
1165                         background-image: ~"url(../img/in-press.png)";\r
1166                         background-repeat: no-repeat;\r
1167                         .transition(~".25s linear");\r
1168                 }\r
1169                 &:before {\r
1170                         content: "\201C";\r
1171                         margin-left: -16px;\r
1172                         font-size: 2.2em;\r
1173                 }\r
1174         }\r
1175 \r
1176 }\r
1177 \r
1178 // Change the below classes and image to meet your press coverage\r
1179 \r
1180 .press-wired a{\r
1181         &:after{\r
1182                 background-position: 0px 0px;\r
1183         }\r
1184         &:hover{\r
1185                 &:after{\r
1186                         background-position: 0px -32px;\r
1187                 }\r
1188         }\r
1189 }\r
1190 \r
1191 .press-mashable a{\r
1192         &:after{\r
1193                 background-position: -120px 0px;\r
1194         }\r
1195         &:hover{\r
1196                 &:after{\r
1197                         background-position: -120px -32px;\r
1198                 }\r
1199         }\r
1200 }\r
1201 \r
1202 .press-techcrunch a{\r
1203         &:after{\r
1204                 background-position: -240px 0px;\r
1205         }\r
1206         &:hover{\r
1207                 &:after{\r
1208                         background-position: -240px -32px;\r
1209                 }\r
1210         }\r
1211 }\r
1212 \r
1213 /*--------------------------------------------------------------------------\r
1214 +       Portfolio Style\r
1215 --------------------------------------------------------------------------*/\r
1216 \r
1217 .portfolio-item{\r
1218         position: relative;\r
1219         background: #FFF;\r
1220         margin-bottom: 20px;\r
1221         border: 8px solid #FFF;\r
1222         .border-radius(5px);\r
1223         .box-shadow(~"inset 0 1px #fff,0 0 8px #c8cfe6");\r
1224         .transition(~"all .5s ease");\r
1225         .portfolio-image{\r
1226                 overflow: hidden;\r
1227                 text-align: center;\r
1228                 position: relative;\r
1229                 img{\r
1230                         max-width: 100%;\r
1231                         .transition(~"all .25s ease");\r
1232                 }\r
1233         }\r
1234         &:hover{\r
1235                 border: 8px solid @theme-color;\r
1236                 .portfolio-image{\r
1237                         img{\r
1238                                 position: relative;\r
1239                                 .transform(~"scale(1.1) rotate(2deg)");\r
1240                         }\r
1241                 }\r
1242         }\r
1243         ul{\r
1244                 list-style-type: none;\r
1245                 margin-left: 0;\r
1246                 margin-top: 20px;\r
1247                 text-align: center;\r
1248                 padding: 0;\r
1249                 li{\r
1250                         line-height: 28px;\r
1251                 }\r
1252         }\r
1253         .portfolio-project-name{\r
1254                 font-size: 1.3em;\r
1255                 text-transform: uppercase;\r
1256         }\r
1257         .read-more{\r
1258                 text-align: center;\r
1259                 padding-top: 10px;\r
1260         }\r
1261         .portfolio-info-fade{\r
1262                 .opacity(0);\r
1263                 top: 0;\r
1264                 position: absolute;\r
1265                 background: #000;\r
1266                 background: fade(#000, 70%);\r
1267                 width: 100%;\r
1268                 height: 100%;\r
1269                 color: #FFF;\r
1270                 text-shadow: 2px 2px 4px #000000;\r
1271             filter: dropshadow(color=#000000, offx=2, offy=2);\r
1272             .transition(~"opacity .25s linear");\r
1273             ul{\r
1274                         margin-top: 10%;\r
1275                 }\r
1276                 .btn:hover{\r
1277                         background: @theme-color;\r
1278                 }\r
1279                 ul{\r
1280                         margin: 10% 20px 0 20px;\r
1281                         padding: 0;\r
1282                         li{\r
1283                                 text-align: center;\r
1284                                 &:first-child{\r
1285                                         border-bottom: 1px solid #CCC;\r
1286                                 }\r
1287                         }\r
1288                 }\r
1289         }\r
1290         &:hover{\r
1291                 .portfolio-info-fade{\r
1292                         display: block;\r
1293                         .opacity(1);\r
1294                 }\r
1295         }\r
1296 }\r
1297 \r
1298 .lt-ie9 .portfolio-info-fade{\r
1299         display: none;\r
1300 }\r
1301 \r
1302 .lt-ie9 .portfolio-item:hover .portfolio-info-fade{\r
1303         display: block;\r
1304 }\r
1305 \r
1306 .portfolio-visit-btn{\r
1307         padding-top: 15px;\r
1308 }\r
1309 \r
1310 .portfolio-item-description{\r
1311         ul{\r
1312                 padding: 0;\r
1313         }\r
1314 }\r
1315 \r
1316 /*--------------------------------------------------------------------------\r
1317 +       Our Team Style\r
1318 --------------------------------------------------------------------------*/\r
1319 \r
1320 .team-member{\r
1321         position: relative;\r
1322         background: #FFF;\r
1323         margin-bottom: 20px;\r
1324         border: 8px solid #FFF;\r
1325         .box-shadow(~"inset 0 1px #fff,0 0 8px #c8cfe6");\r
1326         img{\r
1327                 max-width: 100%;\r
1328         }\r
1329         ul{\r
1330                 list-style-type: none;\r
1331                 margin-left: 0;\r
1332                 margin-top: 20px;\r
1333                 li{\r
1334                         line-height: 28px;\r
1335                 }\r
1336         }\r
1337         &:hover{\r
1338                 .team-member-image{\r
1339                         .opacity(1);\r
1340                 }\r
1341         }\r
1342         .team-member-image{\r
1343                 text-align: center;\r
1344                 position: relative;\r
1345                 .transition(~"opacity .25s linear");\r
1346                 .opacity(0.85);\r
1347         }\r
1348 \r
1349         .team-member-name{\r
1350                 font-size: 1.3em;\r
1351                 text-transform: uppercase;\r
1352         }\r
1353 \r
1354         .team-member-social{\r
1355                 position: absolute;\r
1356                 right: 0;\r
1357                 .opacity(0.5);\r
1358                 .transition(~"opacity .25s linear");\r
1359                 .team-member-social i{\r
1360                         margin-top: 3px;\r
1361                 }\r
1362                 &:hover{\r
1363                         .opacity(1);\r
1364                 }\r
1365         }\r
1366 }\r
1367 \r
1368 /*--------------------------------------------------------------------------\r
1369 +       Sitemap Style\r
1370 --------------------------------------------------------------------------*/\r
1371 \r
1372 .sitemap{\r
1373         margin-left: 0;\r
1374         list-style-type: none;\r
1375         padding: 0;\r
1376         a{\r
1377                 color: @font-color;\r
1378         }\r
1379         li{\r
1380                 padding: 10px 0;\r
1381                 font-weight: 600;\r
1382         }\r
1383         ul{\r
1384                 list-style-type: none;\r
1385                 margin-top: 10px;\r
1386                 margin-left: 10px;\r
1387                 padding: 0;\r
1388                 li{\r
1389                         padding: 3px 0;\r
1390                         font-size: 0.9em;\r
1391                         font-weight: 400;\r
1392                 }\r
1393         }\r
1394 }\r
1395 \r
1396 /*--------------------------------------------------------------------------\r
1397 +       Coming Soon Page Style\r
1398 --------------------------------------------------------------------------*/\r
1399 \r
1400 .coming-soon-top{\r
1401         background: #FFF;\r
1402         background: fade(#FFF, 80%);\r
1403         min-height: 80px;\r
1404         .logo-wrapper{\r
1405                 padding-top: 20px;\r
1406         }\r
1407 }\r
1408 \r
1409 .coming-soon-content{\r
1410         margin-top: 5%;\r
1411         text-align: center;\r
1412         h3{\r
1413                 font-size: 3em;\r
1414                 line-height: 1.3em;\r
1415                 font-weight: 400;\r
1416                 color: #FFF;\r
1417                 margin-bottom: 40px;\r
1418                 text-shadow: 1px 1px 8px #000000;\r
1419         }\r
1420         p{\r
1421                 color: #E6E6E6;\r
1422                 text-shadow: 2px 2px 4px #000000;\r
1423         }\r
1424 }\r
1425 \r
1426 .coming-soon-subscribe{\r
1427         padding-top: 30px;\r
1428         .btn{\r
1429                 border-radius: 0 5px 5px 0;\r
1430         }\r
1431         p{\r
1432                 margin-top: 10px;\r
1433         }\r
1434 }\r
1435 \r
1436 .coming-soon-social{\r
1437         margin-top: 60px;\r
1438         .opacity(0.7);\r
1439         .transition(~"opacity .25s linear");\r
1440         a{\r
1441                 display: inline-block;\r
1442         }\r
1443         &:hover{\r
1444                 .opacity(1);\r
1445         }\r
1446 }\r
1447 \r
1448 .full-screen-background{\r
1449         z-index: -999;\r
1450         min-height: 100%;\r
1451         min-width: 1024px;\r
1452         width: 100%;\r
1453         height: auto;\r
1454         position: fixed;\r
1455         top: 0;\r
1456         left: 0;\r
1457 }\r
1458 \r
1459 /*--------------------------------------------------------------------------\r
1460 +       Breadcrumbs Section Style\r
1461 --------------------------------------------------------------------------*/\r
1462 \r
1463 .section-breadcrumbs{\r
1464         background: #222;\r
1465         background: fade(#222, 80%);\r
1466         margin-bottom: 10px;\r
1467         h1{\r
1468                 color: #FAFAFA;\r
1469                 font-size: 1.6em;\r
1470                 margin-bottom: 0;\r
1471                 text-transform: none;\r
1472         }\r
1473 }\r
1474 \r
1475 /*--------------------------------------------------------------------------\r
1476         Footer Style\r
1477 --------------------------------------------------------------------------*/\r
1478 \r
1479 .footer{\r
1480         background: #222;\r
1481         color: #A0A0A0;\r
1482         padding: 0 20px 10px 20px;\r
1483         border-top: 4px solid @theme-color;\r
1484         margin-top: 20px;\r
1485         .box-shadow(~"0 -1px 12px rgba(0,0,0,0.4)");\r
1486         h3{\r
1487                 color: #E4E4E4;\r
1488                 font-size: 1.3em;\r
1489                 border-bottom: 1px dotted #7C7C7C;\r
1490         }\r
1491         ul{\r
1492                 padding: 0;\r
1493         }\r
1494 }\r
1495 \r
1496 .footer-navigate-section li{\r
1497         line-height: 20px !important;\r
1498 }\r
1499 \r
1500 .footer-stay-connected{\r
1501         a{\r
1502                 text-align: left;\r
1503                 text-indent: -9999px;\r
1504                 display: block;\r
1505                 width: 115px;\r
1506                 height: 40px;\r
1507                 background: ~"url(../img/stay-connected.png)";\r
1508                 .opacity(0.5);\r
1509                 .transition(~"opacity .25s linear");\r
1510                 &:hover{\r
1511                         .opacity(1);\r
1512                 }\r
1513         }\r
1514         a.facebook{\r
1515                 background-position: -115px 0;\r
1516         }\r
1517         a.twitter{\r
1518                 background-position: -230px 0;\r
1519         }\r
1520         a.googleplus{\r
1521                 background-position: 0 0;\r
1522         }\r
1523         li{\r
1524                 text-align: center;\r
1525         }\r
1526 }\r
1527 \r
1528 .footer-copyright{\r
1529         text-align: center;\r
1530         color: #7C7C7C;\r
1531         border-top: 1px dotted #7C7C7C;\r
1532         padding-top: 10px;\r
1533         font-size: 0.9em;\r
1534 }\r
1535 \r
1536 /*--------------------------------------------------------------------------\r
1537 +       Pagination Style (overrides Bootstrap style)\r
1538 --------------------------------------------------------------------------*/\r
1539 \r
1540 .pagination-wrapper{\r
1541         margin-top: 15px;\r
1542         text-align: center;\r
1543 }\r
1544 \r
1545 .pagination>li>a, .pagination>li>span{\r
1546         border: none;\r
1547         border-bottom: 3px solid #FFF;\r
1548         color: #666666;\r
1549         margin-left: 0;\r
1550         margin-bottom: 5px;\r
1551         .transition(~"all .25s linear");\r
1552 }\r
1553 \r
1554 .pagination>li>a:hover, .pagination>li>a:focus, .pagination>.active>a, .pagination>.active>span{\r
1555         background: #FFF;\r
1556 }\r
1557 \r
1558 .pagination>li>a:hover{\r
1559         border-bottom: 3px solid #666666;\r
1560 }\r
1561 \r
1562 .pagination>.active>a, .pagination>.active>span{\r
1563         color: #666666;\r
1564         border-bottom: 3px solid @theme-color;\r
1565 }\r
1566 \r
1567 .pagination>.disabled>a{\r
1568         border-color: #fff;\r
1569 }\r
1570 \r
1571 .pagination>.disabled>span, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus {\r
1572         margin-bottom: 0;\r
1573         color: #C9C9C9;\r
1574         background-color: #FFF;\r
1575         cursor: default;\r
1576 }\r
1577 \r
1578 /*--------------------------------------------------------------------------\r
1579 +       Custom Style for Maps\r
1580 --------------------------------------------------------------------------*/\r
1581 \r
1582 .leaflet-popup-content-wrapper{\r
1583         .border-radius(5px);\r
1584 }\r
1585 \r
1586 /*--------------------------------------------------------------------------\r
1587 +       Custom Style for Tabs (overrides Bootstrap)\r
1588 --------------------------------------------------------------------------*/\r
1589 \r
1590 .nav-tabs>li>a {\r
1591         font-size: 1.1em;\r
1592         padding: 10px 15px;\r
1593         color: @font-color;\r
1594 }\r
1595 \r
1596 .nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus {\r
1597         font-weight: 600;\r
1598         background-color: #ffffff;\r
1599         border: 1px solid #ddd;\r
1600         border-top: 3px solid @theme-color;\r
1601         border-bottom-color: transparent;\r
1602         cursor: default;\r
1603 }\r
1604 \r
1605 /*--------------------------------------------------------------------------\r
1606 +       404 Page Style\r
1607 --------------------------------------------------------------------------*/\r
1608 \r
1609 .error-page-wrapper{\r
1610         font-size: 1.5em;\r
1611         font-weight: 600;\r
1612         margin: 100px 0;\r
1613         text-align: center;\r
1614 }\r
1615 \r
1616 \r
1617 /*--------------------------------------------------------------------------\r
1618 +       Homepage Slider Style (modified sequencejs CSS). Sorry, no LESS here\r
1619 --------------------------------------------------------------------------*/\r
1620 \r
1621 #sequence {\r
1622         position: relative;\r
1623         overflow: hidden;\r
1624         width: 100%;\r
1625         max-width: 1920px;\r
1626         color: white;\r
1627         font-size: 0.625em;\r
1628         margin: 0 auto 30px auto;\r
1629         position: relative;\r
1630         height: 400px;\r
1631         img{\r
1632                 max-width: 100%;\r
1633         }\r
1634 }\r
1635 \r
1636 #sequence > .sequence-canvas {\r
1637         list-style-type: none;\r
1638         height: 400px;\r
1639         margin: 0;\r
1640         padding: 0;\r
1641         width: 100%;\r
1642 }\r
1643 \r
1644 #sequence h2{\r
1645         font-size: 4em;\r
1646         color: #FFF;\r
1647         text-shadow: 2px 2px 3px #444;\r
1648     border: none;\r
1649     padding-left: 0;\r
1650     margin-top: 0;\r
1651 }\r
1652 \r
1653 #sequence h3{\r
1654         font-size: 2em;\r
1655         color: #FFF;\r
1656         text-shadow: 2px 2px 3px #444;\r
1657 }\r
1658 \r
1659 #sequence > .sequence-canvas > li {\r
1660         position: absolute;\r
1661         width: 100%;\r
1662         height: 400px;\r
1663         z-index: 1;\r
1664         .transition-property(background);\r
1665         background-position: -50px 0;\r
1666 }\r
1667 \r
1668 #sequence > .sequence-canvas > li.bg1 {\r
1669         background-image: ~"url(../img/homepage-slider/slider-bg1.jpg)";\r
1670 }\r
1671 \r
1672 #sequence > .sequence-canvas > li.bg2 {\r
1673         background-image: ~"url(../img/homepage-slider/slider-bg2.jpg)";\r
1674 }\r
1675 \r
1676 #sequence > .sequence-canvas > li.bg3 {\r
1677         background-image: ~"url(../img/homepage-slider/slider-bg3.jpg)";\r
1678 }\r
1679 \r
1680 #sequence > .sequence-canvas > li.bg4 {\r
1681         background-image: ~"url(../img/homepage-slider/slider-bg4.jpg)";\r
1682 }\r
1683 \r
1684 #sequence > .sequence-canvas > li.bg5 {\r
1685         background-image: ~"url(../img/homepage-slider/slider-bg5.jpg)";\r
1686 }\r
1687 \r
1688 #sequence > .sequence-canvas > li.bg6 {\r
1689         background-image: ~"url(../img/homepage-slider/slider-bg6.jpg)";\r
1690 }\r
1691 \r
1692 #sequence > .sequence-canvas > li.bg7 {\r
1693         background-image: ~"url(../img/homepage-slider/slider-bg7.jpg)";\r
1694 }\r
1695 #sequence > .sequence-canvas > li.bg8 {\r
1696         background-image: ~"url(../img/homepage-slider/slider-bg8.jpg)";\r
1697 }\r
1698 #sequence > .sequence-canvas > li.bg9 {\r
1699         background-image: ~"url(../img/homepage-slider/slider-bg9.jpg)";\r
1700 }\r
1701 #sequence > .sequence-canvas > li.bg10 {\r
1702         background-image: ~"url(../img/homepage-slider/slider-bg10.jpg)";\r
1703 }\r
1704 #sequence > .sequence-canvas > li.bg11 {\r
1705         background-image: ~"url(../img/homepage-slider/slider-bg11.jpg)";\r
1706 }\r
1707 #sequence > .sequence-canvas > li.bg12 {\r
1708         background-image: ~"url(../img/homepage-slider/slider-bg12.jpg)";\r
1709 }\r
1710 #sequence > .sequence-canvas > li.bg13 {\r
1711         background-image: ~"url(../img/homepage-slider/slider-bg13.jpg)";\r
1712 }\r
1713 #sequence > .sequence-canvas > li.bg14 {\r
1714         background-image: ~"url(../img/homepage-slider/slider-bg14.jpg)";\r
1715 }\r
1716 \r
1717 #sequence > .sequence-canvas > li img {\r
1718   height: 96%;\r
1719 }\r
1720 \r
1721 #sequence > .sequence-canvas li > * {\r
1722   position: absolute;\r
1723   .transition-property(left, opacity);\r
1724 }\r
1725 \r
1726 .sequence-next,\r
1727 .sequence-prev {\r
1728   color: white;\r
1729   cursor: pointer;\r
1730   display: none;\r
1731   font-weight: bold;\r
1732   padding: 10px 15px;\r
1733   position: absolute;\r
1734   top: 50%;\r
1735   z-index: 1000;\r
1736   height: 75px;\r
1737   margin-top: -47.5px;\r
1738 }\r
1739 \r
1740 .sequence-pause {\r
1741   bottom: 0;\r
1742   cursor: pointer;\r
1743   position: absolute;\r
1744   z-index: 1000;\r
1745 }\r
1746 \r
1747 .sequence-paused {\r
1748   .opacity(0.3);\r
1749 }\r
1750 \r
1751 .sequence-prev {\r
1752   left: 3%;\r
1753 }\r
1754 \r
1755 .sequence-next {\r
1756   right: 3%;\r
1757 }\r
1758 \r
1759 .sequence-prev img,\r
1760 .sequence-next img {\r
1761   height: 100%;\r
1762   width: auto;\r
1763 }\r
1764 \r
1765 #sequence-preloader {\r
1766   background: #d9d9d9;\r
1767 }\r
1768 \r
1769 .sequence-pagination-wrapper{\r
1770         position: absolute;\r
1771         bottom: 10px;\r
1772         right: 20px;\r
1773         z-index: 99;\r
1774 }\r
1775 \r
1776 .sequence-pagination {\r
1777         display: none;\r
1778         z-index: 99;\r
1779         .transition-duration(0.5s);\r
1780 }\r
1781 \r
1782 .sequence-pagination li {\r
1783         display: inline-block;\r
1784         *display: inline;\r
1785         width: 14px;\r
1786         height: 14px;\r
1787         margin: 0 4px;\r
1788         text-indent: -999em;\r
1789         border: 4px solid @theme-color;\r
1790         cursor: pointer;\r
1791         .border-radius(30px);\r
1792         .opacity(0.8);\r
1793         .transition(~"background .5s, opacity .5s");\r
1794 }\r
1795 \r
1796 .sequence-pagination li.current {\r
1797         background: @theme-color;\r
1798         .opacity(1);\r
1799 }\r
1800 \r
1801 .sequence-next,\r
1802 .sequence-prev {\r
1803   position: absolute;\r
1804   opacity: 0.6;\r
1805   .transition-duration(1s);\r
1806 }\r
1807 \r
1808 .sequence-next:hover,\r
1809 .sequence-prev:hover {\r
1810   .opacity(1);\r
1811   .transition-duration(1s);\r
1812 }\r
1813 \r
1814 #sequence .title {\r
1815   font-size: 3.8em;\r
1816   text-transform: none;\r
1817   left: 0%;\r
1818   width: 35%;\r
1819   .opacity(0);\r
1820   bottom: 60%;\r
1821   z-index: 50;\r
1822 }\r
1823 \r
1824 #sequence > .sequence-canvas > li.animate-in{\r
1825         background-position: 0 0;\r
1826         .transition-duration(1.5s);\r
1827 }\r
1828 \r
1829 #sequence .animate-in .title {\r
1830   left: 15%;\r
1831   .opacity(1);\r
1832   .transition-duration(0.5s);\r
1833 }\r
1834 \r
1835 #sequence .animate-out .title {\r
1836   left: 35%;\r
1837   .opacity(0);\r
1838   .transition-duration(0.5s);\r
1839 }\r
1840 \r
1841 .subtitle {\r
1842   color: black;\r
1843   font-size: 2em;\r
1844   left: 35%;\r
1845   width: 35%;\r
1846   .opacity(0);\r
1847   top: 40%;\r
1848 }\r
1849 \r
1850 .animate-in .subtitle {\r
1851   left: 15%;\r
1852   .opacity(1);\r
1853   .transition-duration(0.5s);\r
1854 }\r
1855 \r
1856 .animate-out .subtitle {\r
1857   left: 65%;\r
1858   .opacity(0);\r
1859   .transition-duration(0.5s);\r
1860 }\r
1861 \r
1862 .slide-img {\r
1863   left: 90%;\r
1864   top: 20%;\r
1865   .opacity(0);\r
1866   position: relative;\r
1867   height: auto !important;\r
1868   max-height: 450px !important;\r
1869   max-width: 45% !important;\r
1870 }\r
1871 \r
1872 .animate-in .slide-img {\r
1873   left: 55%;\r
1874   .opacity(1);\r
1875   .transition-duration(1s);\r
1876 }\r
1877 \r
1878 .animate-out .slide-img {\r
1879   left: 15%;\r
1880   .opacity(0);\r
1881   .transition-duration(1s);\r
1882 }\r
1883 \r
1884 @media only screen and (min-width: 992px) {\r
1885   #sequence .title {\r
1886     width: 42%;\r
1887   }\r
1888 }\r
1889 \r
1890 @media only screen and (max-width: 838px) {\r
1891   #sequence .slide-img {\r
1892     max-height: 530px !important;\r
1893     width: auto;\r
1894   }\r
1895 }\r
1896 \r
1897 @media only screen and (max-width: 768px) {\r
1898   #sequence {\r
1899     height: 400px;\r
1900   }\r
1901   #sequence .title {\r
1902     font-size: 2.8em;\r
1903   }\r
1904   #sequence .subtitle {\r
1905     font-size: 1.6em;\r
1906   }\r
1907   #sequence .sequence-next,\r
1908   #sequence .sequence-prev {\r
1909     height: 60px;\r
1910     margin-top: -40px;\r
1911   }\r
1912   #sequence .slide-img {\r
1913     max-height: 480px !important;\r
1914     width: auto;\r
1915   }\r
1916 }\r
1917 \r
1918 @media only screen and (max-width: 568px) {\r
1919   .slide-img {\r
1920     left: 50%;\r
1921     width: auto;\r
1922     max-width: 80% !important;\r
1923   }\r
1924 \r
1925   #sequence .animate-in .slide-img {\r
1926     left: 50%;\r
1927     margin-left: -40%;\r
1928   }\r
1929 \r
1930   #sequence .animate-out .slide-img {\r
1931     left: 20%;\r
1932     margin-left: -20%;\r
1933   }\r
1934 \r
1935   #sequence .title {\r
1936     background: #a1a1a1;\r
1937     background: rgba(0, 0, 0, 0.3);\r
1938     bottom: 0;\r
1939     left: 100%;\r
1940     padding: 4%;\r
1941     width: 100%;\r
1942     margin-bottom: 0;\r
1943     z-index: 10;\r
1944   }\r
1945 \r
1946   #sequence .animate-in .title {\r
1947     left: 0%;\r
1948   }\r
1949 \r
1950   #sequence .animate-out .title {\r
1951     left: -100%;\r
1952   }\r
1953 \r
1954   #sequence .subtitle {\r
1955     visibility: hidden;\r
1956   }\r
1957 \r
1958 }\r
1959 \r
1960 /*--------------------------------------------------------------------------\r
1961 +       Content Slider Style (bxSlider CSS), Sorry, no LESS here\r
1962 --------------------------------------------------------------------------*/\r
1963 \r
1964 .bx-wrapper {\r
1965         position: relative;\r
1966         margin: 0 auto 30px;\r
1967         padding: 0;\r
1968         *zoom: 1;\r
1969 }\r
1970 \r
1971 .bx-wrapper img {\r
1972         max-width: 100%;\r
1973         display: block;\r
1974 }\r
1975 \r
1976 .bx-wrapper .bx-pager,\r
1977 .bx-wrapper .bx-controls-auto {\r
1978         position: absolute;\r
1979         bottom: -30px;\r
1980         width: 100%;\r
1981 }\r
1982 \r
1983 /* LOADER */\r
1984 \r
1985 .bx-wrapper .bx-loading {\r
1986         min-height: 50px;\r
1987         background: ~"url(../img/bx_loader.gif) center center no-repeat #fff";\r
1988         height: 100%;\r
1989         width: 100%;\r
1990         position: absolute;\r
1991         top: 0;\r
1992         left: 0;\r
1993         z-index: 2000;\r
1994 }\r
1995 \r
1996 /* PAGER */\r
1997 \r
1998 .bx-wrapper .bx-pager {\r
1999         text-align: center;\r
2000         font-size: .85em;\r
2001         font-family: Arial;\r
2002         font-weight: bold;\r
2003         color: #666;\r
2004         padding-top: 20px;\r
2005 }\r
2006 \r
2007 .bx-wrapper .bx-pager .bx-pager-item,\r
2008 .bx-wrapper .bx-controls-auto .bx-controls-auto-item {\r
2009         display: inline-block;\r
2010         *zoom: 1;\r
2011         *display: inline;\r
2012 }\r
2013 \r
2014 .bx-wrapper .bx-pager.bx-default-pager a {\r
2015         background: #666;\r
2016         text-indent: -9999px;\r
2017         display: block;\r
2018         width: 10px;\r
2019         height: 10px;\r
2020         margin: 0 5px;\r
2021         outline: 0;\r
2022         .border-radius(5px);\r
2023 }\r
2024 \r
2025 .bx-wrapper .bx-pager.bx-default-pager a:hover,\r
2026 .bx-wrapper .bx-pager.bx-default-pager a.active {\r
2027         background: #000;\r
2028 }\r
2029 \r
2030 /* DIRECTION CONTROLS (NEXT / PREV) */\r
2031 \r
2032 .bx-wrapper .bx-prev {\r
2033         left: 10px;\r
2034         background: ~"url(../img/controls.png) no-repeat 0 -32px";\r
2035 }\r
2036 \r
2037 .bx-wrapper .bx-next {\r
2038         right: 10px;\r
2039         background: ~"url(../img/controls.png) no-repeat -43px -32px";\r
2040 }\r
2041 \r
2042 .bx-wrapper .bx-prev:hover {\r
2043         background-position: 0 0;\r
2044 }\r
2045 \r
2046 .bx-wrapper .bx-next:hover {\r
2047         background-position: -43px 0;\r
2048 }\r
2049 \r
2050 .bx-wrapper .bx-controls-direction a {\r
2051         position: absolute;\r
2052         top: 50%;\r
2053         margin-top: -16px;\r
2054         outline: 0;\r
2055         width: 32px;\r
2056         height: 32px;\r
2057         text-indent: -9999px;\r
2058         z-index: 9999;\r
2059 }\r
2060 \r
2061 .bx-wrapper .bx-controls-direction a.disabled {\r
2062         display: none;\r
2063 }\r
2064 \r
2065 /* AUTO CONTROLS (START / STOP) */\r
2066 \r
2067 .bx-wrapper .bx-controls-auto {\r
2068         text-align: center;\r
2069 }\r
2070 \r
2071 .bx-wrapper .bx-controls-auto .bx-start {\r
2072         display: block;\r
2073         text-indent: -9999px;\r
2074         width: 10px;\r
2075         height: 11px;\r
2076         outline: 0;\r
2077         background: ~"url(../img/controls.png) -86px -11px no-repeat";\r
2078         margin: 0 3px;\r
2079 }\r
2080 \r
2081 .bx-wrapper .bx-controls-auto .bx-start:hover,\r
2082 .bx-wrapper .bx-controls-auto .bx-start.active {\r
2083         background-position: -86px 0;\r
2084 }\r
2085 \r
2086 .bx-wrapper .bx-controls-auto .bx-stop {\r
2087         display: block;\r
2088         text-indent: -9999px;\r
2089         width: 9px;\r
2090         height: 11px;\r
2091         outline: 0;\r
2092         background: ~"url(../img/controls.png) -86px -44px no-repeat";\r
2093         margin: 0 3px;\r
2094 }\r
2095 \r
2096 .bx-wrapper .bx-controls-auto .bx-stop:hover,\r
2097 .bx-wrapper .bx-controls-auto .bx-stop.active {\r
2098         background-position: -86px -33px;\r
2099 }\r
2100 \r
2101 /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */\r
2102 \r
2103 .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {\r
2104         text-align: left;\r
2105         width: 80%;\r
2106 }\r
2107 \r
2108 .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {\r
2109         right: 0;\r
2110         width: 35px;\r
2111 }\r
2112 \r
2113 /* IMAGE CAPTIONS */\r
2114 \r
2115 .bx-wrapper .bx-caption {\r
2116         position: absolute;\r
2117         bottom: 0;\r
2118         left: 0;\r
2119         background: #666\9;\r
2120         background: rgba(80, 80, 80, 0.75);\r
2121         width: 100%;\r
2122 }\r
2123 \r
2124 .bx-wrapper .bx-caption span {\r
2125         color: #fff;\r
2126         font-family: Arial;\r
2127         display: block;\r
2128         font-size: .85em;\r
2129         padding: 10px;\r
2130 }\r
2131 \r
2132 /*--------------------------------------------------------------------------\r
2133 +       Main Menu Style\r
2134 --------------------------------------------------------------------------*/\r
2135 \r
2136 .mainmenu li.logo-wrapper a{\r
2137         border-right: 1px solid #E8E8E8;\r
2138         padding-left: 0;\r
2139         padding-top: 0;\r
2140         padding-bottom: 0;\r
2141 }\r
2142 \r
2143 .mainmenu-wrapper{\r
2144         background-color: #FFF;\r
2145         border-bottom: 4px solid @theme-color;\r
2146         z-index: 4;\r
2147 }\r
2148 \r
2149 .mainmenu {\r
2150         width: 100%;\r
2151         /* general ul style */\r
2152         ul {\r
2153                 margin: 0;\r
2154                 padding: 0;\r
2155                 list-style-type: none;\r
2156         }\r
2157         /* first level ul style */\r
2158         >ul, .mainmenu-submenu-inner {\r
2159                 margin: 0 auto;\r
2160                 >li {\r
2161                         display: inline-block;\r
2162                         *display: inline;\r
2163                         >a{\r
2164                                 font-size: 1.2em;\r
2165                                 padding: 1.2em 1.5em;\r
2166                                 color: #999;\r
2167                                 display: inline-block;\r
2168                                 text-decoration: none;\r
2169                                 &:hover {\r
2170                                         color: @theme-color;\r
2171                                         text-decoration: none;\r
2172                                 }\r
2173                         }\r
2174                 }\r
2175                 >li.active{\r
2176                         >a{\r
2177                                 color: @theme-color;\r
2178                                 font-weight: 600 !important;\r
2179                         }\r
2180                 }\r
2181                 >li.mainmenu-open a, li.mainmenu-open > a:hover {\r
2182                         color: #fff;\r
2183                         background: @theme-color;\r
2184                 }\r
2185         }\r
2186         /* sub-menu */\r
2187         .mainmenu-submenu {\r
2188                 display: none;\r
2189                 position: absolute;\r
2190                 background: @theme-color;\r
2191                 width: 100%;\r
2192                 left: 0;\r
2193                 z-index: 999;\r
2194                 .translateZ(0);\r
2195                 .box-shadow(~"0 5px 5px rgba(0,0,0,0.4)");\r
2196         }\r
2197         .mainmenu-submenu-inner > div {\r
2198                 width: 33%;\r
2199                 float: left;\r
2200         }\r
2201         .mainmenu-submenu-inner:before, .mainmenu-submenu-inner:after {\r
2202                 content: " ";\r
2203                 display: table;\r
2204         }\r
2205         .mainmenu-submenu-inner:after {\r
2206                 clear: both;\r
2207         }\r
2208         .mainmenu-submenu-inner > div a {\r
2209                 line-height: 2em;\r
2210         }\r
2211 }\r
2212 \r
2213 .mainmenu-open{\r
2214         .mainmenu-submenu {\r
2215                 display: block;\r
2216                 padding-bottom: 3em;\r
2217         }\r
2218 }\r
2219 \r
2220 .mainmenu-submenu{\r
2221         h4 {\r
2222                 color: lighten(@theme-color, 30%);\r
2223                 padding: 1em 0 0.6em;\r
2224                 margin-left: 20px;\r
2225                 font-size: 160%;\r
2226                 font-weight: 300;\r
2227         }\r
2228         ul{\r
2229                 margin-left: 20px;\r
2230         }\r
2231 }\r
2232 \r
2233 \r
2234 @media screen and (max-width: 979px) { \r
2235 \r
2236         .mainmenu {\r
2237                 font-size: 0.8em;\r
2238         }\r
2239 \r
2240         .mainmenu-submenu{\r
2241                 font-size: 1.2em;\r
2242         }\r
2243 \r
2244         .mainmenu-submenu li, .mainmenu-submenu h4{\r
2245                 padding-left: 10px;\r
2246         }\r
2247 \r
2248 }\r
2249 \r
2250 @media screen and (max-width: 479px) { \r
2251 \r
2252         .mainmenu {\r
2253                 font-size: 120%;\r
2254                 border: none;\r
2255         }\r
2256 \r
2257         .mainmenu > ul,\r
2258         .mainmenu .mainmenu-submenu-inner {\r
2259                 width: 100%;\r
2260                 padding: 0;\r
2261         }\r
2262 \r
2263         .mainmenu .mainmenu-submenu-inner {\r
2264                 padding: 0 1.5em;\r
2265                 font-size: 75%;\r
2266         }\r
2267 \r
2268         .mainmenu > ul > li {\r
2269                 display: block;\r
2270                 border-bottom: 4px solid #47a3da;\r
2271                 > a { \r
2272                         display: block;\r
2273                         padding: 1em 3em;\r
2274                 }\r
2275                 &:last-child{\r
2276                         border: none;\r
2277                 }\r
2278         }\r
2279 \r
2280         .mainmenu .mainmenu-submenu { \r
2281                 position: relative;\r
2282         }\r
2283 \r
2284         .mainmenu-submenu h4 {\r
2285                 padding-top: 0.6em;\r
2286         }\r
2287 \r
2288         .mainmenu .mainmenu-submenu-inner > div {\r
2289                 width: 100%;\r
2290                 float: none;\r
2291                 padding: 0;\r
2292         }\r
2293 \r
2294 }\r
2295 \r
2296 /*--------------------------------------------------------------------------\r
2297 +       Extras Menu (Cart, Language, Login) Style\r
2298 --------------------------------------------------------------------------*/\r
2299 \r
2300 .menuextras{\r
2301         font-size: 0.85em;\r
2302         height: 30px;\r
2303         ul{\r
2304                 margin: 0;\r
2305                 padding: 0;\r
2306                 list-style-type: none;\r
2307                 float: right;\r
2308                 padding: 3px 0;\r
2309         }\r
2310         li{\r
2311                 float: left;\r
2312                 padding: 0 8px;\r
2313         }\r
2314         .extras{\r
2315                 li{\r
2316                         padding: 0 8px;\r
2317                         a{\r
2318                                 color: #333;\r
2319                                 &:hover{\r
2320                                         color: #333;\r
2321                                         text-decoration: none;\r
2322                                 }\r
2323                         }\r
2324 \r
2325                 }\r
2326                 .shopping-cart-items{\r
2327                         i{\r
2328                                 color: #333;\r
2329                         }\r
2330                 }\r
2331         }\r
2332         .choose-country{\r
2333                 .dropdown-menu{\r
2334                         background-color: #222;\r
2335                         background-color: fade(#222, 80%);\r
2336                         margin-top: 5px;\r
2337                         li{\r
2338                                 float: none;\r
2339                                 a{\r
2340                                         color: #fff;\r
2341                                         padding-left: 3px;\r
2342                                         &:hover{\r
2343                                                 color: #fff;\r
2344                                                 background-color: #333 !important;\r
2345                                         }\r
2346                                 }\r
2347                         }\r
2348 \r
2349                 }\r
2350         }\r
2351 }\r
2352 \r
2353 /*--------------------------------------------------------------------------\r
2354 +       Buttons Style\r
2355 --------------------------------------------------------------------------*/\r
2356 \r
2357 .btn {\r
2358         border: 1px solid @theme-color;\r
2359         .border-radius(2px);\r
2360         color: #FFFFFF;\r
2361         cursor: pointer;\r
2362         display: inline-block;\r
2363         text-transform: none;\r
2364         .transition(~"all .25s ease");\r
2365         text-align: center;\r
2366         background: none repeat scroll 0 0 @theme-color;\r
2367         text-shadow: none;\r
2368         box-shadow: none;\r
2369         color: #FFF;\r
2370         &:hover {\r
2371                 background: none repeat scroll 0 0 #3b3c41;\r
2372                 color: #FFF;\r
2373                 text-decoration: none;\r
2374                 border: 1px solid #3b3c41;\r
2375         }\r
2376         white-space: nowrap;\r
2377         .caret{\r
2378                 border-top: 4px solid #FFF;\r
2379         }\r
2380 }\r
2381 \r
2382 .btn-micro {\r
2383         padding: 1px 8px;\r
2384         font-size: 10px;\r
2385 }\r
2386 \r
2387 .btn-grey{\r
2388         border: 1px solid darken(#E7E7E7, 10%);\r
2389         color: #333;\r
2390         background: none repeat scroll 0 0 #E7E7E7;\r
2391         &:hover {\r
2392                 background: none repeat scroll 0 0 darken(#E7E7E7, 10%);\r
2393                 color: #333;\r
2394                 text-decoration: none;\r
2395                 border: 1px solid darken(#E7E7E7, 10%);\r
2396         }\r
2397         .caret{\r
2398                 border-top: 4px solid #333;\r
2399         }\r
2400 }\r
2401 \r
2402 .btn-blue{\r
2403         border: 1px solid darken(#4F8DB3, 10%);\r
2404         color: #FFF;\r
2405         background: none repeat scroll 0 0 #4F8DB3;\r
2406         &:hover {\r
2407                 background: none repeat scroll 0 0 #3b3c41;\r
2408                 color: #FFF;\r
2409                 text-decoration: none;\r
2410                 border: 1px solid #3b3c41;\r
2411         }\r
2412 }\r
2413 \r
2414 .btn-orange{\r
2415         border: 1px solid darken(#FF7000, 10%);\r
2416         color: #FFF;\r
2417         background: none repeat scroll 0 0 #FF7000;\r
2418         &:hover {\r
2419                 background: none repeat scroll 0 0 #3b3c41;\r
2420                 color: #FFF;\r
2421                 text-decoration: none;\r
2422                 border: 1px solid #3b3c41;\r
2423         }\r
2424 }\r
2425 \r
2426 .btn-green{\r
2427         border: 1px solid darken(#6E8023, 10%);\r
2428         color: #FFF;\r
2429         background: none repeat scroll 0 0 #6E8023;\r
2430         &:hover {\r
2431                 background: none repeat scroll 0 0 #3b3c41;\r
2432                 color: #FFF;\r
2433                 text-decoration: none;\r
2434                 border: 1px solid #3b3c41;\r
2435         }\r
2436 }\r
2437 \r
2438 .btn-red{\r
2439         border: 1px solid darken(#DA1111, 10%);\r
2440         color: #FFF;\r
2441         background: none repeat scroll 0 0 #DA1111;\r
2442         &:hover {\r
2443                 background: none repeat scroll 0 0 #3b3c41;\r
2444                 color: #FFF;\r
2445                 text-decoration: none;\r
2446                 border: 1px solid #3b3c41;\r
2447         }\r
2448 }\r
2449 \r
2450 .btn-group.open .btn.dropdown-toggle{\r
2451         background: none repeat scroll 0 0 #3b3c41;\r
2452         color: #FFF;\r
2453 }\r
2454 \r
2455 .dropdown.open a.dropdown-toggle .caret{\r
2456         border-top: 4px solid #FFF;\r
2457 }