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

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