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: #602217;
 182   text-decoration: none;
 183   font-weight: bold;
 184   transition: .3s all ease;
 185 }
 186
 187 a:hover {
 188   color: #0f4639;
 189   text-decoration: none;
 190 }
 191
 192 section {
 193   padding-top: 30px;
 194   padding-bottom: 30px;
 195 }
 196
 197 /*Header*/
 198
 199 /*Navbar*/
 200
 201 .icon-bar {
 202   transition: .3s all ease;
 203 }
 204
 205 .bar2 {
 206   width: 30px !important;
 207 }
 208
 209 .bar3 {
 210   width: 25px !important;
 211 }
 212
 213 .navbar-toggle:hover .bar1 {
 214   width: 42px !important;
 215 }
 216
 217 .navbar-toggle:hover .bar2 {
 218   width: 25px !important;
 219 }
 220
 221 .navbar-toggle:hover .bar3 {
 222   width: 15px !important;
 223 }
 224
 225 .navbar li {
 226   padding-top: 20px;
 227   color: #9b9b9b;
 228   text-align: center;
 229   font-size: 30px;
 230   font-family: "Signika Regular";
 231 }
 232
 233 .navbar-brand {
 234   border-bottom: 0;
 235 }
 236
 237 .navbar-nav li a {
 238   border-bottom: 0;
 239 }
 240
 241 /*Intro*/
 242
 243 .intro,
 244 .intro-text {
 245   padding-top: 20px;
 246   padding-bottom: 0;
 247   background: #602217;
 248 }
 249
 250 .intro-text h1 {
 251   color: #602217;
 252 }
 253
 254 .illustration {
 255   padding-bottom: 60px;
 256 }
 257
 258 .intro-text {
 259   padding-bottom: 40px;
 260   background: #fff;
 261 }
 262
 263 /*Actions*/
 264
 265 .actions {
 266   background: #fffae5;
 267 }
 268
 269 .action {
 270   position: relative;
 271         padding-top: 30px;
 272         padding-bottom: 30px;
 273 }
 274
 275 .action-button {
 276   position: relative;
 277   bottom: 10px;
 278   margin-bottom: 30px;
 279   padding: 6px 35px;
 280   border: 0;
 281   border-bottom: 0;
 282   border-radius: 100px;
 283   background: #FFD429;
 284   color: #4B423B;
 285   font-size: 22px;
 286   box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15);
 287   font-family: "Signika Regular";
 288 }
 289
 290 .action-button:hover {
 291   background: #602217;
 292   color: white;
 293 }
 294
 295 .actions p {
 296           font-size: 15px;
 297     color: #8a6d3b;
 298 }
 299
 300 /*Comparisons*/
 301
 302 .title {
 303   margin-top: 40px;
 304   padding-bottom: 8px;
 305   background-image: url("../img/underline.svg");
 306   background-position: center bottom;
 307   background-repeat: no-repeat;
 308 }
 309
 310 .sale {
 311   /*display: none; */ /* uncomment when needed*/
 312   position: absolute;
 313   top: -10%;
 314   right: -20%;
 315   padding: 1px 10px;
 316   border-radius: 100px;
 317   background-color: #0AD778;
 318   color: white;
 319   text-transform: uppercase;
 320   font-size: 15px;
 321   font-family: "Open Sans";
 322 }
 323
 324 .sale-info {
 325     font-size: 15px;
 326     color: gray;
 327 }
 328
 329 .links {
 330   margin-top: -20px;
 331   margin-bottom: 40px;
 332 }
 333
 334 .bad,
 335 .good {
 336   overflow: hidden;
 337   margin-top: 30px;
 338   padding-top: 30px;
 339   padding-bottom: 30px;
 340 }
 341
 342 .bad {
 343   background-color: transparent;
 344   background-image: url("../img/bad-pattern.png");
 345   background-size: 40px;
 346   background-repeat: repeat;
 347 }
 348
 349 .pros li {
 350   background-image: url("../img/good.svg");
 351 }
 352
 353 .cons li {
 354   background-image: url("../img/bad.svg");
 355 }
 356
 357 li.neutral {
 358   background-image: url("../img/neutral.svg");
 359 }
 360
 361 .cons,
 362 .pros {
 363   padding-left: 15px;
 364 }
 365
 366 .cons li,
 367 .pros li,
 368 .info {
 369   padding-left: 30px;
 370   background-position: top left;
 371   background-repeat: no-repeat;
 372   list-style: none;
 373 }
 374
 375 .bad img,
 376 .good img,
 377 .recommended-img img {
 378   margin-bottom: 70px;
 379   width: 250px;
 380   height: 250px;
 381 }
 382
 383 .get-item {
 384   position: absolute;
 385   top: 300px;
 386   right: 50%;
 387   left: 50%;
 388   margin-left: -60px;
 389   padding: 5px;
 390   width: 120px;
 391   border-bottom: 0;
 392   border-radius: 100px;
 393   background: #2B81E3;
 394   box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);
 395   color: white;
 396   vertical-align: middle;
 397   text-align: center;
 398   text-decoration: none;
 399   font-size: 21px;
 400   font-family: "Signika Regular";
 401 }
 402
 403 .get-item:active,
 404 .get-item:focus,
 405 .get-item:hover {
 406   background: #6eadf5;
 407   color: white;
 408   text-decoration: none;
 409 }
 410
 411 .get-item:active {
 412   background: #2B81E3;
 413 }
 414
 415 .seller-group {
 416   padding: 15px;
 417   text-align: center;
 418   transition: all 0.3s ease;
 419 }
 420
 421 .seller {
 422   min-width: 150px;
 423   max-width: 200px;
 424   display: block;
 425   margin: 20px auto;
 426   text-align: center;
 427 }
 428
 429 .info {
 430    margin-bottom: 0;
 431   background-image: url("../img/info.svg");
 432    background-position: center left;
 433
 434 }
 435
 436 .info p {
 437   margin-bottom: 0;
 438 }
 439
 440 /*Recommended Lines*/
 441
 442 .recommended-section {
 443   margin-top: 20px;
 444   margin-bottom: 20px;
 445   padding-top: 30px;
 446   padding-bottom: 30px;
 447   background: #F5FFF7;
 448 }
 449
 450 /*Charities*/
 451 .charities {
 452   margin-bottom: 0;
 453   background-color: #F5FFF7;
 454 }
 455
 456 /*Promotion details*/
 457 .promotion-details {
 458   margin-bottom: 0;
 459   background-color: #fffae5;
 460 }
 461
 462 .promotion-details .panel-default .panel-heading {
 463   border: 0;
 464   background-color: #fffae5;
 465   box-shadow: 0 0 0 transparent;
 466 }
 467
 468 /*Licenses*/
 469 .licenses {
 470   margin-bottom: 0;
 471   background-color: #F5FFF7;
 472 }
 473
 474 .licenses .panel-default .panel-heading {
 475   border: 0;
 476   background-color: #F5FFF7;
 477   box-shadow: 0 0 0 transparent;
 478 }
 479
 480 .fix-margin {
 481   margin: 0;
 482 }
 483
 484 /*Footer*/
 485 footer {
 486   padding-top: 30px;
 487   background-color: #602217;
 488   /* background-color: #4B423B; */
 489 }
 490
 491 footer p {
 492   color: #cdcac8;
 493   color: rgba(255,255,255,0.72);
 494 }
 495
 496 footer a {
 497   color: #FFD429;
 498   font-weight: 700;
 499 }
 500
 501 footer a:hover {
 502   color: white;
 503 }
 504
 505 .footer-logo {
 506   margin-bottom: 15px;
 507   max-height: 150px;
 508 }
 509
 510 /* Media Queries */
 511
 512 /*Smallest devices*/
 513 /*@media (max-width: 350px) {
 514   .seller {
 515     display: block;
 516     margin: 20px auto;
 517   }
 518 }*/
 519
 520 /* Small devices (tablets, 768px and up) */
 521 @media (min-width: 768px) {
 522   /*Navbar*/
 523   .navbar-nav {
 524     float: right;
 525     margin: 10px;
 526     /*margin-left: 100px;*/
 527   }
 528
 529   .navbar-default .navbar-nav > li > a {
 530     padding: 7px;
 531     color: #602217;
 532   }
 533
 534   .navbar li {
 535     padding: 0 25px;
 536     border-right: 1px #9BD2BF solid;
 537     background-color: white;
 538     list-style-type: none;
 539     font-size: 1.1em;
 540     font-family: "Signika Regular";
 541     transition: .3s all ease;
 542   }
 543
 544   .navbar li:first-child {
 545     border-radius: 100px 0 0 100px;
 546   }
 547
 548   .navbar li:last-child {
 549     border-right: 0;
 550     border-radius: 0 100px 100px 0;
 551   }
 552
 553   .navbar li:hover {
 554     background-color: #FFDD55;
 555   }
 556
 557   .navbar li a {
 558     display: block;
 559     text-decoration: none;
 560     transition: .3s all ease;
 561   }
 562
 563   .navbar li a:hover {
 564         color: #602217;
 565         /* color: #4B423B; */
 566   }
 567
 568   .intro {
 569     margin-bottom: 0;
 570   }
 571
 572   .join {
 573     display: none;
 574   }
 575
 576   .is-table-row {
 577        display: table;
 578    }
 579   .is-table-row [class*="col-"] {
 580        display: table-cell;
 581        float: none;
 582        vertical-align: top;
 583    }
 584
 585    .title {
 586      margin-bottom: 30px;
 587    }
 588
 589   .recommended-section h5 {
 590     padding-left: 46px;
 591     text-align: left;
 592   }
 593
 594   .charities img {
 595     width: 80%;
 596     filter: brightness(0.39) contrast(150%) opacity(0.6) saturate(0);
 597     transition: .3s all ease;
 598   }
 599
 600   .charities img:hover {
 601     filter: brightness(0.6) contrast(100%) opacity(1) saturate(1);
 602     transform: scale(1.1);
 603   }
 604
 605   /*Footer*/
 606   .footer-logo {
 607     margin-bottom: 15px;
 608   }
 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: #602217;
 654         /* color: #4B423B; */
 655   }
 656
 657   .join {
 658     display: block;
 659   }
 660
 661   .join img {
 662     margin: 10px;
 663     width: 200px;
 664   }
 665   /*Intro*/
 666   .intro {
 667     margin-bottom: 0;
 668   }
 669
 670   .intro-text {
 671     background: transparent;
 672   }
 673
 674   .intro-text h1 {
 675     margin-top: 0;
 676     color: white;
 677     color: rgba(255, 255, 255, 0.95);
 678   }
 679
 680   .intro-text p {
 681     color: rgba(255, 255, 255, 0.79);
 682   }
 683
 684   .intro-text a {
 685     color: gold;
 686   }
 687
 688   .intro-text h4 {
 689     color: #FFDD55;
 690     font-family: "Signika Light";
 691   }
 692
 693   .illustration img {
 694     margin-top: 30px;
 695     width: 90%;
 696   }
 697   /*Footer*/
 698   .footer-logo img {
 699     width: 50%;
 700   }
 701 }
 702 /* Large devices (large desktops, 1200px and up) */
 703 @media (min-width: 1200px) {
 704   .illustration img {
 705     margin-top: 10px;
 706     width: 70%;
 707   }
 708   .navbar .container-fluid {
 709         max-width: 1170px
 710   }
 711 }