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