color swap

diff --git a/v11/css/master.css b/v11/css/master.css
new file mode 100644 (file)
index 0000000..d17b509
--- /dev/null
+++ b/v11/css/master.css
@@ -0,0 +1,708 @@
+html {
+    text-rendering: optimizeLegibility !important;
+    -webkit-font-smoothing: antialiased !important;
+}
+
+/*Bootstrap overrides*/
+.navbar {
+  margin-bottom: 0;
+  border: 0;
+  border-radius: 0;
+  background: #602217;
+}
+
+.navbar-header {
+  border: 0;
+  background: #602217;
+  box-shadow: none;
+}
+
+.navbar-toggle {
+  border: 0;
+}
+
+.navbar-brand {
+  padding-top: 10px;
+}
+
+.navbar-default .navbar-toggle .icon-bar {
+  width: 40px;
+  height: 5px;
+  border-radius: 6px;
+  background-color: #ffd429;
+}
+
+.navbar-default .navbar-toggle:focus,
+.navbar-default .navbar-toggle:hover {
+  background-color: transparent;
+}
+
+.navbar-default .navbar-collapse,
+.navbar-default .navbar-form {
+  border: 0;
+}
+
+.navbar-collapse {
+  background: #602217;
+}
+
+.navbar-default .navbar-nav > li > a {
+  color: white;
+}
+
+.alert-link {
+  color: #ffd429 !important;
+}
+
+.alert-link:hover {
+  color: white !important;
+}
+
+.alert {
+  margin-top: 20px;
+  max-width: 700px;
+  border: 0;
+}
+
+.alert-success {
+  background: #602217;
+
+}
+
+.alert-success p {
+  color: #E8FBF2 !important;
+  color: rgba(255,255,255,0.9) !important;
+}
+
+.alert-info {
+  background: #6eadf5;
+  color: #F1F7FE;
+  color: rgba(255,255,255,0.9);
+}
+
+
+.panel-body {
+  padding: 0;
+}
+
+/*Typography*/
+@font-face {
+  font-weight: 400;
+  font-style: normal;
+  font-family: "Open Sans";
+    src: url('../fonts/opensans-regular-webfont-webfont.svg#open_sansregular') format('svg');
+  src: url("../fonts/opensans-regular-webfont.eot");
+  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');
+}
+@font-face {
+  font-weight: 700;
+  font-style: normal;
+  font-family: "Open Sans Bold";
+  src: url('../fonts/opensans-bold-webfont-webfont.svg#open_sansbold') format('svg');
+  src: url("../fonts/opensans-bold-webfont.eot");
+  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');
+}
+@font-face {
+  font-weight: 600;
+  font-style: normal;
+  font-family: "Signika Bold";
+  src: url('../fonts/signika-bold-webfont-webfont.svg#signikabold') format('svg');
+  src: url("../fonts/signika-bold-webfont.eot");
+  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');
+}
+@font-face {
+  font-weight: 100;
+  font-style: normal;
+  font-family: "Signika Light";
+  src: url('../fonts/signika-light-webfont-webfont.svg#signikalight') format('svg');
+  src: url("../fonts/signika-light-webfont.eot");
+  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');
+}
+@font-face {
+  font-weight: 400;
+  font-style: normal;
+  font-family: "Signika Regular";
+  src: url('../fonts/signika-regular-webfont-webfont.svg#signikaregular') format('svg');
+  src: url("../fonts/signika-regular-webfont.eot");
+  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');
+}
+
+/*Text Styles*/
+
+h1 {
+  margin-bottom: 20px;
+  color: #4B423B;
+  font-size: 35px;
+  font-family: "Signika Light";
+}
+
+h2 {
+  color: #4B423B;
+  font-size: 28px;
+  font-family: "Signika Light";
+}
+
+h3 {
+  color: #333;
+  font-size: 25px;
+  font-family: "Signika Regular";
+}
+
+h4 {
+  color: #9b9b9b;
+  font-size: 24px;
+  font-family: "Signika Light";
+}
+
+h5 {
+  color: #4a4a4a;
+  font-size: 20px;
+  font-family: "Signika Regular";
+}
+
+li,
+p {
+  margin-bottom: 20px;
+  color: #1c1c1c;
+  list-style: outside;
+  font-size: 17px;
+  font-family: "Open Sans";
+  line-height: 30px;
+}
+
+li {
+  margin-bottom: 20px;
+  list-style-type: disc;
+}
+
+a {
+  border-bottom: 2px solid #ffd429;
+  /* color: #2caf8f; */
+  color: #c4a000;
+  text-decoration: none;
+  transition: .3s all ease;
+}
+
+a:hover {
+  color: #0f4639;
+  text-decoration: none;
+}
+
+section {
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+
+/*Header*/
+
+/*Navbar*/
+
+.icon-bar {
+  transition: .3s all ease;
+}
+
+.bar2 {
+  width: 30px !important;
+}
+
+.bar3 {
+  width: 25px !important;
+}
+
+.navbar-toggle:hover .bar1 {
+  width: 42px !important;
+}
+
+.navbar-toggle:hover .bar2 {
+  width: 25px !important;
+}
+
+.navbar-toggle:hover .bar3 {
+  width: 15px !important;
+}
+
+.navbar li {
+  padding-top: 20px;
+  color: #9b9b9b;
+  text-align: center;
+  font-size: 30px;
+  font-family: "Signika Regular";
+}
+
+.navbar-brand {
+  border-bottom: 0;
+}
+
+.navbar-nav li a {
+  border-bottom: 0;
+}
+
+/*Intro*/
+
+.intro,
+.intro-text {
+  padding-top: 20px;
+  padding-bottom: 0;
+  background: #602217;
+}
+
+.intro-text h1 {
+  color: #602217;
+}
+
+.illustration {
+  padding-bottom: 60px;
+}
+
+.intro-text {
+  padding-bottom: 40px;
+  background: #fff;
+}
+
+/*Actions*/
+
+.actions {
+  background: #fffae5;
+}
+
+.action {
+  position: relative;
+       padding-top: 30px;
+       padding-bottom: 30px;
+}
+
+.action-button {
+  position: relative;
+  bottom: 10px;
+  margin-bottom: 30px;
+  padding: 6px 35px;
+  border: 0;
+  border-bottom: 0;
+  border-radius: 100px;
+  background: #FFD429;
+  color: #4B423B;
+  font-size: 22px;
+  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15);
+  font-family: "Signika Regular";
+}
+
+.action-button:hover {
+  background: #602217;
+  color: white;
+}
+
+.actions p {
+         font-size: 15px;
+    color: #8a6d3b;
+}
+
+/*Comparisons*/
+
+.title {
+  margin-top: 40px;
+  padding-bottom: 8px;
+  background-image: url("../img/underline.svg");
+  background-position: center bottom;
+  background-repeat: no-repeat;
+}
+
+.sale {
+  /*display: none; */ /* uncomment when needed*/
+  position: absolute;
+  top: -10%;
+  right: -20%;
+  padding: 1px 10px;
+  border-radius: 100px;
+  background-color: #0AD778;
+  color: white;
+  text-transform: uppercase;
+  font-size: 15px;
+  font-family: "Open Sans";
+}
+
+.sale-info {
+    font-size: 15px;
+    color: gray;
+}
+
+.links {
+  margin-top: -20px;
+  margin-bottom: 40px;
+}
+
+.bad,
+.good {
+  overflow: hidden;
+  margin-top: 30px;
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+
+.bad {
+  background-color: transparent;
+  background-image: url("../img/bad-pattern.png");
+  background-size: 40px;
+  background-repeat: repeat;
+}
+
+.pros li {
+  background-image: url("../img/good.svg");
+}
+
+.cons li {
+  background-image: url("../img/bad.svg");
+}
+
+li.neutral {
+  background-image: url("../img/neutral.svg");
+}
+
+.cons,
+.pros {
+  padding-left: 15px;
+}
+
+.cons li,
+.pros li,
+.info {
+  padding-left: 30px;
+  background-position: top left;
+  background-repeat: no-repeat;
+  list-style: none;
+}
+
+.bad img,
+.good img,
+.recommended-img img {
+  margin-bottom: 70px;
+  width: 250px;
+  height: 250px;
+}
+
+.get-item {
+  position: absolute;
+  top: 300px;
+  right: 50%;
+  left: 50%;
+  margin-left: -60px;
+  padding: 5px;
+  width: 120px;
+  border-bottom: 0;
+  border-radius: 100px;
+  background: #2B81E3;
+  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25);
+  color: white;
+  vertical-align: middle;
+  text-align: center;
+  text-decoration: none;
+  font-size: 21px;
+  font-family: "Signika Regular";
+}
+
+.get-item:active,
+.get-item:focus,
+.get-item:hover {
+  background: #6eadf5;
+  color: white;
+  text-decoration: none;
+}
+
+.get-item:active {
+  background: #2B81E3;
+}
+
+.seller-group {
+  padding: 15px;
+  text-align: center;
+  transition: all 0.3s ease;
+}
+
+.seller {
+  min-width: 150px;
+  max-width: 200px;
+  display: block;
+  margin: 20px auto;
+  text-align: center;
+}
+
+.info {
+   margin-bottom: 0;
+  background-image: url("../img/info.svg");
+   background-position: center left;
+
+}
+
+.info p {
+  margin-bottom: 0;
+}
+
+/*Recommended Lines*/
+
+.recommended-section {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  padding-top: 30px;
+  padding-bottom: 30px;
+  background: #F5FFF7;
+}
+
+/*Charities*/
+.charities {
+  margin-bottom: 0;
+  background-color: #F5FFF7;
+}
+
+/*Promotion details*/
+.promotion-details {
+  margin-bottom: 0;
+  background-color: #fffae5;
+}
+
+.promotion-details .panel-default .panel-heading {
+  border: 0;
+  background-color: #fffae5;
+  box-shadow: 0 0 0 transparent;
+}
+
+/*Licenses*/
+.licenses {
+  margin-bottom: 0;
+  background-color: #F5FFF7;
+}
+
+.licenses .panel-default .panel-heading {
+  border: 0;
+  background-color: #F5FFF7;
+  box-shadow: 0 0 0 transparent;
+}
+
+.fix-margin {
+  margin: 0;
+}
+
+/*Footer*/
+footer {
+  padding-top: 30px;
+  background-color: #4B423B;
+}
+
+footer p {
+  color: #cdcac8;
+  color: rgba(255,255,255,0.72);
+}
+
+footer a {
+  color: #FFD429;
+  font-weight: 700;
+}
+
+footer a:hover {
+  color: white;
+}
+
+.footer-logo {
+  margin-bottom: 15px;
+  max-height: 150px;
+}
+
+/* Media Queries */
+
+/*Smallest devices*/
+/*@media (max-width: 350px) {
+  .seller {
+    display: block;
+    margin: 20px auto;
+  }
+}*/
+
+/* Small devices (tablets, 768px and up) */
+@media (min-width: 768px) {
+  /*Navbar*/
+  .navbar-nav {
+    float: right;
+    margin: 10px;
+    /*margin-left: 100px;*/
+  }
+
+  .navbar-default .navbar-nav > li > a {
+    padding: 7px;
+    color: #602217;
+  }
+
+  .navbar li {
+    padding: 0 25px;
+    border-right: 1px #9BD2BF solid;
+    background-color: white;
+    list-style-type: none;
+    font-size: 1.1em;
+    font-family: "Signika Regular";
+    transition: .3s all ease;
+  }
+
+  .navbar li:first-child {
+    border-radius: 100px 0 0 100px;
+  }
+
+  .navbar li:last-child {
+    border-right: 0;
+    border-radius: 0 100px 100px 0;
+  }
+
+  .navbar li:hover {
+    background-color: #FFDD55;
+  }
+
+  .navbar li a {
+    display: block;
+    text-decoration: none;
+    transition: .3s all ease;
+  }
+
+  .navbar li a:hover {
+    color: #4B423B;
+  }
+
+  .intro {
+    margin-bottom: 0;
+  }
+
+  .join {
+    display: none;
+  }
+
+  .is-table-row {
+       display: table;
+   }
+  .is-table-row [class*="col-"] {
+       display: table-cell;
+       float: none;
+       vertical-align: top;
+   }
+
+   .title {
+     margin-bottom: 30px;
+   }
+
+  .recommended-section h5 {
+    padding-left: 46px;
+    text-align: left;
+  }
+
+  .charities img {
+    width: 80%;
+    filter: brightness(0.39) contrast(150%) opacity(0.6) saturate(0);
+    transition: .3s all ease;
+  }
+
+  .charities img:hover {
+    filter: brightness(1) contrast(100%) opacity(1) saturate(1);
+    transform: scale(1.1);
+  }
+
+  /*Footer*/
+  .footer-logo {
+    margin-bottom: 0;
+  }
+
+  .footer-logo img {
+    width: 85%;
+  }
+}
+/* Medium devices (desktops, 992px and up) */
+@media (min-width: 992px) {
+  /*Navbar*/
+  .navbar-nav {
+    margin: 10px 10px 10px 100px;
+  }
+
+  .navbar-default .navbar-nav > li > a {
+    padding: 7px;
+    color: #333;
+  }
+
+  .navbar li {
+    padding: 0 30px;
+    border-right: 1px #9BD2BF solid;
+    background-color: white;
+    list-style-type: none;
+    font-size: 1.2em;
+    font-family: "Signika Regular";
+    transition: .3s all ease;
+  }
+
+  .navbar li:first-child {
+    border-radius: 100px 0 0 100px;
+  }
+
+  .navbar li:last-child {
+    border-right: 0;
+    border-radius: 0 100px 100px 0;
+  }
+
+  .navbar li:hover {
+    background-color: #FFDD55;
+  }
+
+  .navbar li a {
+    display: block;
+    text-decoration: none;
+    transition: .3s all ease;
+  }
+
+  .navbar li:hover a {
+    color: #4B423B;
+  }
+
+  .join {
+    display: block;
+  }
+
+  .join img {
+    margin: 10px;
+    width: 200px;
+  }
+  /*Intro*/
+  .intro {
+    margin-bottom: 0;
+  }
+
+  .intro-text {
+    background: transparent;
+  }
+
+  .intro-text h1 {
+    margin-top: 0;
+    color: white;
+    color: rgba(255, 255, 255, 0.95);
+  }
+
+  .intro-text p {
+    color: rgba(255, 255, 255, 0.79);
+  }
+
+  .intro-text a {
+    color: gold;
+  }
+
+  .intro-text h4 {
+    color: #FFDD55;
+    font-family: "Signika Light";
+  }
+
+  .illustration img {
+    margin-top: 30px;
+    width: 90%;
+  }
+  /*Footer*/
+  .footer-logo img {
+    width: 50%;
+  }
+}
+/* Large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) {
+  .illustration img {
+    margin-top: 10px;
+    width: 70%;
+  }
+
+}