v11/css/master.css

   1 html {
   2     text-rendering: optimizeLegibility !important;
   3     -webkit-font-smoothing: antialiased !important;
   4 }
   5
   6 /*Bootstrap overrides*/
   7 .navbar {
   8   margin-bottom: 0;
   9   border: 0;
  10   border-radius: 0;
  11   background: #602217;
  12 }
  13
  14 .navbar-header {
  15   border: 0;
  16   background: #602217;
  17   box-shadow: none;
  18 }
  19
  20 .navbar-toggle {
  21   border: 0;
  22 }
  23
  24 .navbar-brand {
  25   padding-top: 10px;
  26 }
  27
  28 .navbar-default .navbar-toggle .icon-bar {
  29   width: 40px;
  30   height: 5px;
  31   border-radius: 6px;
  32   background-color: #ffd429;
  33 }
  34
  35 .navbar-default .navbar-toggle:focus,
  36 .navbar-default .navbar-toggle:hover {
  37   background-color: transparent;
  38 }
  39
  40 .navbar-default .navbar-collapse,
  41 .navbar-default .navbar-form {
  42   border: 0;
  43 }
  44
  45 .navbar-collapse {
  46   background: #602217;
  47 }
  48
  49 .navbar-default .navbar-nav > li > a {
  50   color: white;
  51 }
  52
  53 .alert-link {
  54   color: #ffd429 !important;
  55 }
  56
  57 .alert-link:hover {
  58   color: white !important;
  59 }
  60
  61 .alert {
  62   margin-top: 20px;
  63   max-width: 700px;
  64   border: 0;
  65 }
  66
  67 .alert-success {
  68   background: #602217;
  69
  70 }
  71
  72 .alert-success p {
  73   color: #E8FBF2 !important;
  74   color: rgba(255,255,255,0.9) !important;
  75 }
  76
  77 .alert-info {
  78   background: #6eadf5;
  79   color: #F1F7FE;
  80   color: rgba(255,255,255,0.9);
  81 }
  82
  83
  84 .panel-body {
  85   padding: 0;
  86 }
  87
  88 /*Typography*/
  89 @font-face {
  90   font-weight: 400;
  91   font-style: normal;
  92   font-family: "Open Sans";
  93     src: url('../fonts/opensans-regular-webfont-webfont.svg#open_sansregular') format('svg');
  94   src: url("../fonts/opensans-regular-webfont.eot");
  95   src: url("../fonts/opensans-regular-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/opensans-regular-webfont.woff2") format('woff2'), url("../fonts/opensans-regular-webfont.woff") format('woff'), url("../fonts/opensans-regular-webfont.ttf") format('truetype');
  96 }
  97 @font-face {
  98   font-weight: 700;
  99   font-style: normal;
 100   font-family: "Open Sans Bold";
 101   src: url('../fonts/opensans-bold-webfont-webfont.svg#open_sansbold') format('svg');
 102   src: url("../fonts/opensans-bold-webfont.eot");
 103   src: url("../fonts/opensans-bold-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/opensans-bold-webfont.woff2") format('woff2'), url("../fonts/opensans-bold-webfont.woff") format('woff'), url("../fonts/opensans-bold-webfont.ttf") format('truetype');
 104 }
 105 @font-face {
 106   font-weight: 600;
 107   font-style: normal;
 108   font-family: "Signika Bold";
 109   src: url('../fonts/signika-bold-webfont-webfont.svg#signikabold') format('svg');
 110   src: url("../fonts/signika-bold-webfont.eot");
 111   src: url("../fonts/signika-bold-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/signika-bold-webfont.woff2") format('woff2'), url("../fonts/signika-bold-webfont.woff") format('woff'), url("../fonts/signika-bold-webfont.ttf") format('truetype');
 112 }
 113 @font-face {
 114   font-weight: 100;
 115   font-style: normal;
 116   font-family: "Signika Light";
 117   src: url('../fonts/signika-light-webfont-webfont.svg#signikalight') format('svg');
 118   src: url("../fonts/signika-light-webfont.eot");
 119   src: url("../fonts/signika-light-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/signika-light-webfont.woff2") format('woff2'), url("../fonts/signika-light-webfont.woff") format('woff'), url("../fonts/signika-light-webfont.ttf") format('truetype');
 120 }
 121 @font-face {
 122   font-weight: 400;
 123   font-style: normal;
 124   font-family: "Signika Regular";
 125   src: url('../fonts/signika-regular-webfont-webfont.svg#signikaregular') format('svg');
 126   src: url("../fonts/signika-regular-webfont.eot");
 127   src: url("../fonts/signika-regular-webfont.eot?#iefix") format('embedded-opentype'), url("../fonts/signika-regular-webfont.woff2") format('woff2'), url("../fonts/signika-regular-webfont.woff") format('woff'), url("../fonts/signika-regular-webfont.ttf") format('truetype');
 128 }
 129
 130 /*Text Styles*/
 131
 132 h1 {
 133   margin-bottom: 20px;
 134   color: #4B423B;
 135   font-size: 35px;
 136   font-family: "Signika Light";
 137 }
 138
 139 h2 {
 140   color: #4B423B;
 141   font-size: 28px;
 142   font-family: "Signika Light";
 143 }
 144
 145 h3 {
 146   color: #333;
 147   font-size: 25px;
 148   font-family: "Signika Regular";
 149 }
 150
 151 h4 {
 152   color: #9b9b9b;
 153   font-size: 24px;
 154   font-family: "Signika Light";
 155 }
 156
 157 h5 {
 158   color: #4a4a4a;
 159   font-size: 20px;
 160   font-family: "Signika Regular";
 161 }
 162
 163 li,
 164 p {
 165   margin-bottom: 20px;
 166   color: #1c1c1c;
 167   list-style: outside;
 168   font-size: 17px;
 169   font-family: "Open Sans";
 170   line-height: 30px;
 171 }
 172
 173 li {
 174   margin-bottom: 20px;
 175   list-style-type: disc;
 176 }
 177
 178 a {
 179   border-bottom: 2px solid #ffd429;
 180   /* color: #2caf8f; */
 181   color: #c4a000;
 182   text-decoration: none;
 183   transition: .3s all ease;
 184 }
 185
 186 a:hover {
 187   color: #0f4639;
 188   text-decoration: none;
 189 }
 190
 191 section {
 192   padding-top: 30px;
 193   padding-bottom: 30px;
 194 }
 195
 196 /*Header*/
 197
 198 /*Navbar*/
 199
 200 .icon-bar {
 201   transition: .3s all ease;
 202 }
 203
 204 .bar2 {
 205   width: 30px !important;
 206 }
 207
 208 .bar3 {
 209   width: 25px !important;
 210 }
 211
 212 .navbar-toggle:hover .bar1 {
 213   width: 42px !important;
 214 }
 215
 216 .navbar-toggle:hover .bar2 {
 217   width: 25px !important;
 218 }
 219
 220 .navbar-toggle:hover .bar3 {
 221   width: 15px !important;
 222 }
 223
 224 .navbar li {
 225   padding-top: 20px;
 226   color: #9b9b9b;
 227   text-align: center;
 228   font-size: 30px;
 229   font-family: "Signika Regular";
 230 }
 231
 232 .navbar-brand {
 233   border-bottom: 0;
 234 }
 235
 236 .navbar-nav li a {
 237   border-bottom: 0;
 238 }
 239
 240 /*Intro*/
 241
 242 .intro,
 243 .intro-text {
 244   padding-top: 20px;
 245   padding-bottom: 0;
 246   background: #602217;
 247 }
 248
 249 .intro-text h1 {
 250   color: #602217;
 251 }
 252
 253 .illustration {
 254   padding-bottom: 60px;
 255 }
 256
 257 .intro-text {
 258   padding-bottom: 40px;
 259   background: #fff;
 260 }
 261
 262 /*Actions*/
 263
 264 .actions {
 265   background: #fffae5;
 266 }
 267
 268 .action {
 269   position: relative;
 270         padding-top: 30px;
 271         padding-bottom: 30px;
 272 }
 273
 274 .action-button {
 275   position: relative;
 276   bottom: 10px;
 277   margin-bottom: 30px;
 278   padding: 6px 35px;
 279   border: 0;
 280   border-bottom: 0;
 281   border-radius: 100px;
 282   background: #FFD429;
 283   color: #4B423B;
 284   font-size: 22px;
 285   box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15);
 286   font-family: "Signika Regular";
 287 }
 288
 289 .action-button:hover {
 290   background: #602217;
 291   color: white;
 292 }
 293
 294 .actions p {
 295           font-size: 15px;
 296     color: #8a6d3b;
 297 }
 298
 299 /*Comparisons*/
 300
 301 .title {
 302   margin-top: 40px;
 303   padding-bottom: 8px;
 304   background-image: url("../img/underline.svg");
 305   background-position: center bottom;
 306   background-repeat: no-repeat;
 307 }
 308
 309 .sale {
 310   /*display: none; */ /* uncomment when needed*/
 311   position: absolute;
 312   top: -10%;
 313   right: -20%;
 314   padding: 1px 10px;
 315   border-radius: 100px;
 316   background-color: #0AD778;
 317   color: white;
 318   text-transform: uppercase;
 319   font-size: 15px;
 320   font-family: "Open Sans";
 321 }
 322
 323 .sale-info {
 324     font-size: 15px;
 325     color: gray;
 326 }
 327
 328 .links {
 329   margin-top: -20px;
 330   margin-bottom: 40px;
 331 }
 332
 333 .bad,
 334 .good {
 335   overflow: hidden;
 336   margin-top: 30px;
 337   padding-top: 30px;
 338   padding-bottom: 30px;
 339 }
 340
 341 .bad {
 342   background-color: transparent;
 343   background-image: url("../img/bad-pattern.png");
 344   background-size: 40px;
 345   background-repeat: repeat;
 346 }
 347
 348 .pros li {
 349   background-image: url("../img/good.svg");
 350 }
 351
 352 .cons li {
 353   background-image: url("../img/bad.svg");
 354 }
 355
 356 li.neutral {
 357   background-image: url("../img/neutral.svg");
 358 }
 359
 360 .cons,
 361 .pros {
 362   padding-left: 15px;
 363 }
 364
 365 .cons li,
 366 .pros li,
 367 .info {
 368   padding-left: 30px;
 369   background-position: top left;
 370   background-repeat: no-repeat;
 371   list-style: none;
 372 }
 373
 374 .bad img,
 375 .good img,
 376 .recommended-img img {
 377   margin-bottom: 70px;
 378   width: 250px;
 379   height: 250px;
 380 }
 381
 382 .get-item {
 383   position: absolute;
 384   top: 300px;
 385   right: 50%;
 386   left: 50%;
 387   margin-left: -60px;
 388   padding: 5px;
 389   width: 120px;
 390   border-bottom: 0;
 391   border-radius: 100px;
 392   background: #2B81E3;
 393   box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);
 394   color: white;
 395   vertical-align: middle;
 396   text-align: center;
 397   text-decoration: none;
 398   font-size: 21px;
 399   font-family: "Signika Regular";
 400 }
 401
 402 .get-item:active,
 403 .get-item:focus,
 404 .get-item:hover {
 405   background: #6eadf5;
 406   color: white;
 407   text-decoration: none;
 408 }
 409
 410 .get-item:active {
 411   background: #2B81E3;
 412 }
 413
 414 .seller-group {
 415   padding: 15px;
 416   text-align: center;
 417   transition: all 0.3s ease;
 418 }
 419
 420 .seller {
 421   min-width: 150px;
 422   max-width: 200px;
 423   display: block;
 424   margin: 20px auto;
 425   text-align: center;
 426 }
 427
 428 .info {
 429    margin-bottom: 0;
 430   background-image: url("../img/info.svg");
 431    background-position: center left;
 432
 433 }
 434
 435 .info p {
 436   margin-bottom: 0;
 437 }
 438
 439 /*Recommended Lines*/
 440
 441 .recommended-section {
 442   margin-top: 20px;
 443   margin-bottom: 20px;
 444   padding-top: 30px;
 445   padding-bottom: 30px;
 446   background: #F5FFF7;
 447 }
 448
 449 /*Charities*/
 450 .charities {
 451   margin-bottom: 0;
 452   background-color: #F5FFF7;
 453 }
 454
 455 /*Promotion details*/
 456 .promotion-details {
 457   margin-bottom: 0;
 458   background-color: #fffae5;
 459 }
 460
 461 .promotion-details .panel-default .panel-heading {
 462   border: 0;
 463   background-color: #fffae5;
 464   box-shadow: 0 0 0 transparent;
 465 }
 466
 467 /*Licenses*/
 468 .licenses {
 469   margin-bottom: 0;
 470   background-color: #F5FFF7;
 471 }
 472
 473 .licenses .panel-default .panel-heading {
 474   border: 0;
 475   background-color: #F5FFF7;
 476   box-shadow: 0 0 0 transparent;
 477 }
 478
 479 .fix-margin {
 480   margin: 0;
 481 }
 482
 483 /*Footer*/
 484 footer {
 485   padding-top: 30px;
 486   background-color: #4B423B;
 487 }
 488
 489 footer p {
 490   color: #cdcac8;
 491   color: rgba(255,255,255,0.72);
 492 }
 493
 494 footer a {
 495   color: #FFD429;
 496   font-weight: 700;
 497 }
 498
 499 footer a:hover {
 500   color: white;
 501 }
 502
 503 .footer-logo {
 504   margin-bottom: 15px;
 505   max-height: 150px;
 506 }
 507
 508 /* Media Queries */
 509
 510 /*Smallest devices*/
 511 /*@media (max-width: 350px) {
 512   .seller {
 513     display: block;
 514     margin: 20px auto;
 515   }
 516 }*/
 517
 518 /* Small devices (tablets, 768px and up) */
 519 @media (min-width: 768px) {
 520   /*Navbar*/
 521   .navbar-nav {
 522     float: right;
 523     margin: 10px;
 524     /*margin-left: 100px;*/
 525   }
 526
 527   .navbar-default .navbar-nav > li > a {
 528     padding: 7px;
 529     color: #602217;
 530   }
 531
 532   .navbar li {
 533     padding: 0 25px;
 534     border-right: 1px #9BD2BF solid;
 535     background-color: white;
 536     list-style-type: none;
 537     font-size: 1.1em;
 538     font-family: "Signika Regular";
 539     transition: .3s all ease;
 540   }
 541
 542   .navbar li:first-child {
 543     border-radius: 100px 0 0 100px;
 544   }
 545
 546   .navbar li:last-child {
 547     border-right: 0;
 548     border-radius: 0 100px 100px 0;
 549   }
 550
 551   .navbar li:hover {
 552     background-color: #FFDD55;
 553   }
 554
 555   .navbar li a {
 556     display: block;
 557     text-decoration: none;
 558     transition: .3s all ease;
 559   }
 560
 561   .navbar li a:hover {
 562     color: #4B423B;
 563   }
 564
 565   .intro {
 566     margin-bottom: 0;
 567   }
 568
 569   .join {
 570     display: none;
 571   }
 572
 573   .is-table-row {
 574        display: table;
 575    }
 576   .is-table-row [class*="col-"] {
 577        display: table-cell;
 578        float: none;
 579        vertical-align: top;
 580    }
 581
 582    .title {
 583      margin-bottom: 30px;
 584    }
 585
 586   .recommended-section h5 {
 587     padding-left: 46px;
 588     text-align: left;
 589   }
 590
 591   .charities img {
 592     width: 80%;
 593     filter: brightness(0.39) contrast(150%) opacity(0.6) saturate(0);
 594     transition: .3s all ease;
 595   }
 596
 597   .charities img:hover {
 598     filter: brightness(1) contrast(100%) opacity(1) saturate(1);
 599     transform: scale(1.1);
 600   }
 601
 602   /*Footer*/
 603   .footer-logo {
 604     margin-bottom: 0;
 605   }
 606
 607   .footer-logo img {
 608     width: 85%;
 609   }
 610 }
 611 /* Medium devices (desktops, 992px and up) */
 612 @media (min-width: 992px) {
 613   /*Navbar*/
 614   .navbar-nav {
 615     margin: 10px 10px 10px 100px;
 616   }
 617
 618   .navbar-default .navbar-nav > li > a {
 619     padding: 7px;
 620     color: #333;
 621   }
 622
 623   .navbar li {
 624     padding: 0 30px;
 625     border-right: 1px #9BD2BF solid;
 626     background-color: white;
 627     list-style-type: none;
 628     font-size: 1.2em;
 629     font-family: "Signika Regular";
 630     transition: .3s all ease;
 631   }
 632
 633   .navbar li:first-child {
 634     border-radius: 100px 0 0 100px;
 635   }
 636
 637   .navbar li:last-child {
 638     border-right: 0;
 639     border-radius: 0 100px 100px 0;
 640   }
 641
 642   .navbar li:hover {
 643     background-color: #FFDD55;
 644   }
 645
 646   .navbar li a {
 647     display: block;
 648     text-decoration: none;
 649     transition: .3s all ease;
 650   }
 651
 652   .navbar li:hover a {
 653     color: #4B423B;
 654   }
 655
 656   .join {
 657     display: block;
 658   }
 659
 660   .join img {
 661     margin: 10px;
 662     width: 200px;
 663   }
 664   /*Intro*/
 665   .intro {
 666     margin-bottom: 0;
 667   }
 668
 669   .intro-text {
 670     background: transparent;
 671   }
 672
 673   .intro-text h1 {
 674     margin-top: 0;
 675     color: white;
 676     color: rgba(255, 255, 255, 0.95);
 677   }
 678
 679   .intro-text p {
 680     color: rgba(255, 255, 255, 0.79);
 681   }
 682
 683   .intro-text a {
 684     color: gold;
 685   }
 686
 687   .intro-text h4 {
 688     color: #FFDD55;
 689     font-family: "Signika Light";
 690   }
 691
 692   .illustration img {
 693     margin-top: 30px;
 694     width: 90%;
 695   }
 696   /*Footer*/
 697   .footer-logo img {
 698     width: 50%;
 699   }
 700 }
 701 /* Large devices (large desktops, 1200px and up) */
 702 @media (min-width: 1200px) {
 703   .illustration img {
 704     margin-top: 10px;
 705     width: 70%;
 706   }
 707
 708 }