Update iconpickers

       Change color of icons
       Change size on very small devices
       Change font-picker colors

static/imgs/icon_select_dark.svg

@@ -3,7 +3,7 @@
 <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 2320 5410" style="enable-background:new 0 0 2320 5410;" xml:space="preserve">
   <style type="text/css">
-    *{fill: #2f5188}
+    *{fill: #497ed5}
 	.st0{opacity:0.64;fill:url(#SVGID_1_);enable-background:new    ;}
 </style>
 <g>
@@ -753,7 +753,7 @@
 	c5.3-11.3-1.1-25.4-14.2-31.6l-599.2-281.3c-13.1-6.2-28.1-2-33.4,9.2l-5.6,11.9c-0.9,1.9-3.1,2.7-5,1.8c-1.9-0.9-2.7-3.1-1.8-5
 	l5.6-11.9c7-15,26.5-20.8,43.4-12.9l599.2,281.3c16.9,7.9,24.9,26.6,17.9,41.6L2830,5422.6z"/>
 <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1984.2842" y1="3438.0569" x2="2136.0818" y2="3427.4424" gradientTransform="matrix(0.8637 -0.504 0.504 0.8637 -3116.2109 3036.4138)">
-	<stop  offset="0" style="stop-color:#2f5188;stop-opacity:0.76"/>
+	<stop  offset="0" style="stop-color:#497ed5;stop-opacity:0.76"/>
 	<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
 </linearGradient>
 <polygon class="st0" points="373.7,5055.9 316.1,4984.8 396.4,4832.4 501.7,5017.5 "/>

static/imgs/icon_select_light.svg

@@ -3,7 +3,7 @@
 <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 2320 5410" style="enable-background:new 0 0 2320 5410;" xml:space="preserve">
   <style type="text/css">
-    *{fill: #ebf3ff}
+    *{fill: #FFFFFF}
 	.st0{opacity:0.64;fill:url(#SVGID_1_);enable-background:new    ;}
 </style>
 <g>
@@ -753,7 +753,7 @@
 	c5.3-11.3-1.1-25.4-14.2-31.6l-599.2-281.3c-13.1-6.2-28.1-2-33.4,9.2l-5.6,11.9c-0.9,1.9-3.1,2.7-5,1.8c-1.9-0.9-2.7-3.1-1.8-5
 	l5.6-11.9c7-15,26.5-20.8,43.4-12.9l599.2,281.3c16.9,7.9,24.9,26.6,17.9,41.6L2830,5422.6z"/>
 <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1984.2842" y1="3438.0569" x2="2136.0818" y2="3427.4424" gradientTransform="matrix(0.8637 -0.504 0.504 0.8637 -3116.2109 3036.4138)">
-	<stop  offset="0" style="stop-color:#ebf3ff;stop-opacity:0.76"/>
+	<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.76"/>
 	<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
 </linearGradient>
 <polygon class="st0" points="373.7,5055.9 316.1,4984.8 396.4,4832.4 501.7,5017.5 "/>

static/style.css

@@ -155,6 +155,18 @@ a {
   }
 }
 
+@media (max-width: 600px) {
+  .iconpicker {
+    height: 60px;
+
+  }
+
+  .iconpicker > label {
+    width: 50px !important;
+    height: 50px !important;
+  }
+}
+
 div[id^="step"] {
   display: none;
 }
@@ -282,11 +294,6 @@ main > #credits {
   margin-top: 50px;
 }
 
-div#step3 > div:nth-of-type(1),
-div#step4 > div:nth-of-type(1) {
-  background-color: #ebf3ff;
-}
-
 @media (min-width: 992px) {
   div#step3 > div:nth-of-type(1),
   div#step4 > div:nth-of-type(1) {
@@ -311,14 +318,14 @@ div#step4 > div:nth-of-type(1) {
 }
 
 .iconpicker > label {
-  background: #ebf3ff url('./imgs/icon_select_dark.svg') no-repeat;
+  background: url('./imgs/icon_select_dark.svg') no-repeat;
   background-size: 400%;
   height: 100px;
   width: 100px;
 }
 
 .iconpicker > input[type="radio"]:checked + label {
-  background: #2f5188 url('./imgs/icon_select_light.svg') no-repeat;
+  background: #497ed5 url('./imgs/icon_select_light.svg') no-repeat;
   background-size: 400%;
 }
 
@@ -336,7 +343,7 @@ div#step3 > div:nth-of-type(1) > input[type="radio"] + label {
 }
 
 div#step3 > div:nth-of-type(1) > input[type="radio"]:checked + label {
-  color: #ebf3ff;
+  color: white;
   background-color: #497ed5;
 }