From f53bc21061dfb82a3d405bf1dbcb01cef99f4a70 Mon Sep 17 00:00:00 2001
From: pero1203 <peter.hrvatin@gmail.com>
Date: Tue, 25 Oct 2022 11:36:14 +0200
Subject: [PATCH] Redesign - popravki tem anket - nov font, razmiki...

---
 admin/survey/index.php                        |   1 -
 .../app/Controllers/HeaderController.php      |   8 +-
 main/survey/skins/1kaBlack.css                |  93 ++++++++------
 main/survey/skins/1kaBlue.css                 | 121 ++++++++++--------
 main/survey/skins/1kaGreen.css                |  93 ++++++++------
 main/survey/skins/1kaNature.css               |  93 ++++++++------
 main/survey/skins/1kaOffice.css               |  93 ++++++++------
 main/survey/skins/1kaOrange.css               |  93 ++++++++------
 main/survey/skins/1kaPurple.css               |  93 ++++++++------
 main/survey/skins/1kaRed.css                  |  93 ++++++++------
 main/survey/skins/Cdi.css                     |  93 ++++++++------
 main/survey/skins/Fdv.css                     |  93 ++++++++------
 main/survey/skins/MobileBlack.css             |   4 +-
 main/survey/skins/MobileBlue.css              |   4 +-
 main/survey/skins/MobileCdi.css               |   4 +-
 main/survey/skins/MobileFdv.css               |   4 +-
 main/survey/skins/MobileGreen.css             |   4 +-
 main/survey/skins/MobileOrange.css            |   4 +-
 main/survey/skins/MobilePurple.css            |   4 +-
 main/survey/skins/MobileRed.css               |   4 +-
 main/survey/skins/MobileUni.css               |   4 +-
 main/survey/skins/Otroci3.css                 |   5 +-
 main/survey/skins/Otroci4.css                 |   5 +-
 main/survey/skins/Uni.css                     |  93 ++++++++------
 main/survey/skins/___po_narocilu/Bled.css     |   8 +-
 .../Gorenje/Old/GorenjeGroup.css              |   2 -
 main/survey/skins/___po_narocilu/MJU.css      |   2 -
 .../___po_narocilu/MJU/single_bck/MJU.css     |   2 -
 .../MJU/single_bck/MJU_mobile.css             |   2 -
 .../skins/___po_narocilu/MJU_mobile.css       |   2 -
 .../skins/___po_narocilu/MJU_tablet.css       |   2 -
 public/css/main.css                           |   2 +-
 resources/sass/main/main/admin.scss           |   4 -
 resources/sass/main/main/basic.scss           |   2 +-
 .../sass/main/main/test_survey_comments.scss  |   2 -
 resources/sass/main/main_mobile/header.scss   |   4 +-
 resources/sass/main/skins/1ka/1ka.scss        | 103 +++++++++------
 resources/sass/main/skins/1ka/1kaBlack.scss   |   5 -
 resources/sass/main/skins/1ka/1kaBlue.scss    |   9 +-
 resources/sass/main/skins/1ka/1kaGreen.scss   |   5 -
 resources/sass/main/skins/1ka/1kaNature.scss  |   5 -
 resources/sass/main/skins/1ka/1kaOffice.scss  |   5 -
 resources/sass/main/skins/1ka/1kaOrange.scss  |   5 -
 resources/sass/main/skins/1ka/1kaPurple.scss  |   5 -
 resources/sass/main/skins/1ka/1kaRed.scss     |   5 -
 resources/sass/main/skins/1ka/Cdi.scss        |   6 -
 resources/sass/main/skins/1ka/Fdv.scss        |   6 -
 resources/sass/main/skins/1ka/Uni.scss        |   6 -
 .../sass/main/skins/1ka_mobile/Mobile.scss    |   2 +-
 resources/sass/main/skins/otroci/Otroci3.scss |   3 +-
 resources/sass/main/skins/otroci/Otroci4.scss |   3 +-
 51 files changed, 673 insertions(+), 640 deletions(-)

diff --git a/admin/survey/index.php b/admin/survey/index.php
index c2fa5b851..416850bd7 100644
--- a/admin/survey/index.php
+++ b/admin/survey/index.php
@@ -139,7 +139,6 @@
     // Fonts
     echo '<link type="text/css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,500,500i,600,600i,700,700i&subset=latin-ext" rel="stylesheet">';
 
-    //echo '<link type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext" rel="stylesheet" />';
 
     ?>
     <!--[if lt IE 7]>
diff --git a/main/survey/app/Controllers/HeaderController.php b/main/survey/app/Controllers/HeaderController.php
index 36e3c742f..bb4ea06ff 100644
--- a/main/survey/app/Controllers/HeaderController.php
+++ b/main/survey/app/Controllers/HeaderController.php
@@ -189,13 +189,11 @@ class HeaderController extends Controller
         // tukaj nalozimo CSS za jquery in template temo
         echo '  <link href="' . self::$site_url . 'admin/survey/minify/g=cssfrontend?v=' . $rowv['value'] . '" rel="stylesheet">' . "\n";
 
-        //nalozimo stringe iz langa za JS
+        // nalozimo stringe iz langa za JS
         echo '<script type="text/javascript" src="' . self::$site_url . 'admin/survey/script/js-lang.php?lang=' . ($row['lang_admin'] == 1 ? 'si' : 'en') . '&amp;v=' . $rowv['value'] . '"></script>' . "\n";
 
-        // nalozimo open sans fonte za nov design
-        echo '<link type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700&subset=latin,latin-ext" rel="stylesheet" />';
-        /*echo '<link type="text/css" href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&subset=latin,latin-ext" rel="stylesheet">';*/
-		echo '<link type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext" rel="stylesheet" />';
+        // nalozimo source sans pro fonte za nov design
+        echo '<link type="text/css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,500,500i,600,600i,700,700i&subset=latin-ext" rel="stylesheet">';
 	
 			
 		// CSS mobile skin za telefone in tablice
diff --git a/main/survey/skins/1kaBlack.css b/main/survey/skins/1kaBlack.css
index b20b6a03f..4978d8a2b 100644
--- a/main/survey/skins/1kaBlack.css
+++ b/main/survey/skins/1kaBlack.css
@@ -6,13 +6,14 @@
 /*
 	Osnovna tema ankete - 1ka - brez definiranih barv
 */
+/* Barve */
 /* Fonti */
 body {
   margin: 0;
   padding: 0;
-  color: #505050;
+  color: #333333;
   font-size: 100%;
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
   background: #ffffff;
 }
 
@@ -28,13 +29,13 @@ body.preview, body.testdata {
   position: absolute;
   width: 100%;
   height: 80px;
-  border-bottom: 6px #333333 solid;
+  border-bottom: 2px #333333 solid;
 }
 #outercontainer #container {
   position: relative;
   width: 100%;
   max-width: 1200px;
-  margin: 0px auto 10px;
+  margin: 0px auto;
 }
 
 /* Warning bar (preview, cookie) */
@@ -69,12 +70,14 @@ body.preview, body.testdata {
 
 /* Header - logo, naslov, progressbar */
 h1 {
-  margin: 0px auto 30px;
-  padding: 120px 0 50px 0;
-  font-size: 28px;
+  margin: 0px auto;
+  padding: 114px 0 32px 0;
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 40px;
   color: #333333;
   text-align: center;
-  border-bottom: 1px solid #eaeaea;
+  border-bottom: 1px solid #E5E5E5;
 }
 
 h1.evalvacija {
@@ -83,7 +86,7 @@ h1.evalvacija {
 
 #logo {
   right: auto;
-  left: 25px;
+  left: 0;
   top: 13px;
   max-height: 56px !important;
   background: url("../../../public/img/logo/1ka_logo_slo.svg");
@@ -148,21 +151,28 @@ h1.evalvacija {
   color: #595959;
 }
 
+/* Uvod in zakljucek */
+.intro .spremenljivka .naslov,
+.concl .spremenljivka .naslov {
+  margin: 0;
+}
+
 /* Spremenljivke */
 .spremenljivka {
-  margin: 20px 10px 20px 10px;
-  padding: 20px 2px 50px 12px !important;
-  border-bottom: 1px #eaeaea solid;
+  margin: 0;
+  padding: 48px 0 !important;
+  border-bottom: 1px #E5E5E5 solid;
 }
 .spremenljivka .naslov {
-  padding: 5px 0 15px 5px;
-  font-size: 18px;
+  padding: 0 !important;
+  margin: 0 0 24px 0;
+  font-size: 20px;
   font-weight: 600;
 }
 .spremenljivka .naslov .spremenljivka_info {
   font-size: 14px;
   font-weight: 400;
-  padding-top: 7px;
+  padding-top: 8px;
 }
 .spremenljivka .sequence_number {
   background-color: #eaeaea;
@@ -201,41 +211,41 @@ td.variabla,
 td.question,
 td.differential,
 .variabla_sum label {
-  font-size: 14px;
+  font-size: 16px;
 }
 
 div.variable_holder {
-  padding: 10px 0 0 0;
+  padding: 0 !important;
+}
+div.variable_holder .variabla {
+  padding: 0;
+  margin-bottom: 16px;
+}
+div.variable_holder .variabla:last-child {
+  margin-bottom: 0;
 }
 div.variable_holder thead,
 div.variable_holder tr.table-header {
   font-weight: normal;
-  font-size: 14px;
+  font-size: 16px;
 }
 div.variable_holder thead td,
 div.variable_holder tr.table-header td {
   padding: 10px 5px;
 }
 
-table.grid_table thead tr td {
-  border-bottom: 2px #444444 solid;
-}
-table.grid_table thead tr.middle_row td {
-  border-top: 2px #444444 solid;
-}
 table.grid_table tbody tr.table-header td {
-  border-bottom: 2px #444444 solid;
   border-top: 2px #444444 solid;
   background-color: #ffffff;
 }
 table.grid_table tbody tr:nth-child(2n+1) {
-  background-color: #ffffff;
-}
-table.grid_table tbody tr:nth-child(2n) {
   background-color: #eaeaea;
 }
+table.grid_table tbody tr:nth-child(2n) {
+  background-color: #ffffff;
+}
 table.grid_table td {
-  padding: 10px 10px;
+  padding: 12px 16px;
 }
 
 span.reminder {
@@ -244,7 +254,7 @@ span.reminder {
 
 /* Textboxi, textarea, select */
 input, textarea, select {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
 }
 
 input[type=text], textarea, select {
@@ -334,7 +344,7 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 
 /* Slider */
 .grupa .spremenljivka .ui-slider-pips .ui-slider-pip {
-  color: #505050;
+  color: #333333;
 }
 .grupa .spremenljivka .slider.ui-widget-content {
   /*background-color: $color_light !important;*/
@@ -359,7 +369,7 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 }
 .grupa .spremenljivka .sliderText {
   padding-top: 2px;
-  color: #505050;
+  color: #333333;
   background-color: #444444;
   border: 0;
 }
@@ -388,21 +398,20 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 
 /* Gumbi na dnu */
 div.buttons {
-  padding: 20px 20px 35px;
-  margin: 0 10px;
+  padding: 64px 0;
+  margin: 0;
 }
 div.buttons input {
   cursor: pointer;
   margin: 8px 10px;
-  /*padding: 7px 11px;*/
-  padding: 10px 20px;
+  padding: 0 32px;
+  height: 40px;
   text-align: center;
-  font-size: 12px;
-  letter-spacing: 1px;
+  font-size: 16px;
   font-weight: 600;
   color: #FFFFFF;
-  border-radius: 20px;
   border: 0;
+  transition: 0.3s;
 }
 div.buttons input.next {
   background-color: #333333;
@@ -424,12 +433,12 @@ div.buttons input.prev:hover, div.buttons input.prev:focus {
 
 /* Footer */
 #footer_survey {
-  padding: 40px;
+  padding: 48px 0 64px 0;
   background-color: #ffffff;
-  border-top: 1px #eaeaea solid;
+  border-top: 1px #E5E5E5 solid;
 }
 #footer_survey p, #footer_survey a, #footer_survey a:visited {
-  color: #505050;
+  color: #333333;
   font-size: 14px;
   line-height: 25px;
   font-weight: 400;
diff --git a/main/survey/skins/1kaBlue.css b/main/survey/skins/1kaBlue.css
index f4b848e64..710f854e6 100644
--- a/main/survey/skins/1kaBlue.css
+++ b/main/survey/skins/1kaBlue.css
@@ -6,13 +6,14 @@
 /*
 	Osnovna tema ankete - 1ka - brez definiranih barv
 */
+/* Barve */
 /* Fonti */
 body {
   margin: 0;
   padding: 0;
-  color: #505050;
+  color: #333333;
   font-size: 100%;
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
   background: #ffffff;
 }
 
@@ -28,13 +29,13 @@ body.preview, body.testdata {
   position: absolute;
   width: 100%;
   height: 80px;
-  border-bottom: 6px #1e88e5 solid;
+  border-bottom: 2px #1e88e5 solid;
 }
 #outercontainer #container {
   position: relative;
   width: 100%;
   max-width: 1200px;
-  margin: 0px auto 10px;
+  margin: 0px auto;
 }
 
 /* Warning bar (preview, cookie) */
@@ -69,12 +70,14 @@ body.preview, body.testdata {
 
 /* Header - logo, naslov, progressbar */
 h1 {
-  margin: 0px auto 30px;
-  padding: 120px 0 50px 0;
-  font-size: 28px;
+  margin: 0px auto;
+  padding: 114px 0 32px 0;
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 40px;
   color: #1e88e5;
   text-align: center;
-  border-bottom: 1px solid #ddeffd;
+  border-bottom: 1px solid #E5E5E5;
 }
 
 h1.evalvacija {
@@ -83,7 +86,7 @@ h1.evalvacija {
 
 #logo {
   right: auto;
-  left: 25px;
+  left: 0;
   top: 13px;
   max-height: 56px !important;
   background: url("../../../public/img/logo/1ka_logo_slo.svg");
@@ -133,43 +136,50 @@ h1.evalvacija {
   text-decoration: none;
 }
 .header_settings_holder .progress_bar p a:hover {
-  color: #ffa608;
+  color: #1360a4;
 }
 .header_settings_holder .continue_later_setting a {
   color: #1e88e5;
 }
 .header_settings_holder .continue_later_setting a:hover {
-  color: #ffa608;
+  color: #1360a4;
 }
 .header_settings_holder .tawk_chat a {
   color: #1e88e5;
 }
 .header_settings_holder .tawk_chat a:hover {
-  color: #ffa608;
+  color: #1360a4;
+}
+
+/* Uvod in zakljucek */
+.intro .spremenljivka .naslov,
+.concl .spremenljivka .naslov {
+  margin: 0;
 }
 
 /* Spremenljivke */
 .spremenljivka {
-  margin: 20px 10px 20px 10px;
-  padding: 20px 2px 50px 12px !important;
-  border-bottom: 1px #ddeffd solid;
+  margin: 0;
+  padding: 48px 0 !important;
+  border-bottom: 1px #E5E5E5 solid;
 }
 .spremenljivka .naslov {
-  padding: 5px 0 15px 5px;
-  font-size: 18px;
+  padding: 0 !important;
+  margin: 0 0 24px 0;
+  font-size: 20px;
   font-weight: 600;
 }
 .spremenljivka .naslov .spremenljivka_info {
   font-size: 14px;
   font-weight: 400;
-  padding-top: 7px;
+  padding-top: 8px;
 }
 .spremenljivka .sequence_number {
-  background-color: #ddeffd;
+  background-color: #F1F8FD;
   color: #42A5F5;
 }
 .spremenljivka .sequence_number:hover {
-  background-color: #add8fb;
+  background-color: #c4e2f7;
 }
 .spremenljivka .sequence_number.active {
   background-color: #42A5F5;
@@ -185,7 +195,7 @@ h1.evalvacija {
   color: #1e88e5;
 }
 .spremenljivka .arrow:hover {
-  color: #ffa608;
+  color: #1360a4;
 }
 
 .spremenljivka.limited {
@@ -201,41 +211,41 @@ td.variabla,
 td.question,
 td.differential,
 .variabla_sum label {
-  font-size: 14px;
+  font-size: 16px;
 }
 
 div.variable_holder {
-  padding: 10px 0 0 0;
+  padding: 0 !important;
+}
+div.variable_holder .variabla {
+  padding: 0;
+  margin-bottom: 16px;
+}
+div.variable_holder .variabla:last-child {
+  margin-bottom: 0;
 }
 div.variable_holder thead,
 div.variable_holder tr.table-header {
   font-weight: normal;
-  font-size: 14px;
+  font-size: 16px;
 }
 div.variable_holder thead td,
 div.variable_holder tr.table-header td {
   padding: 10px 5px;
 }
 
-table.grid_table thead tr td {
-  border-bottom: 2px #42A5F5 solid;
-}
-table.grid_table thead tr.middle_row td {
-  border-top: 2px #42A5F5 solid;
-}
 table.grid_table tbody tr.table-header td {
-  border-bottom: 2px #42A5F5 solid;
   border-top: 2px #42A5F5 solid;
   background-color: #ffffff;
 }
 table.grid_table tbody tr:nth-child(2n+1) {
-  background-color: #ffffff;
+  background-color: #F1F8FD;
 }
 table.grid_table tbody tr:nth-child(2n) {
-  background-color: #ddeffd;
+  background-color: #ffffff;
 }
 table.grid_table td {
-  padding: 10px 10px;
+  padding: 12px 16px;
 }
 
 span.reminder {
@@ -244,7 +254,7 @@ span.reminder {
 
 /* Textboxi, textarea, select */
 input, textarea, select {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
 }
 
 input[type=text], textarea, select {
@@ -257,7 +267,7 @@ input[type=text], textarea, select {
 
 /* ranking */
 .dropzone {
-  border-top: 1px #ddeffd solid;
+  border-top: 1px #F1F8FD solid;
   margin-top: 12px;
   padding-top: 17px;
 }
@@ -289,7 +299,7 @@ table.ranking_table ul {
 
 div.variable_holder .frame_ranking_hover {
   border: 2px #1e88e5 solid;
-  background-color: #ddeffd;
+  background-color: #F1F8FD;
 }
 
 div.variable_holder .frame_ranking,
@@ -298,7 +308,7 @@ div.variable_holder .frame_dropping,
 div.variable_holder .frame_dropping_hover {
   text-indent: -35px;
   border: 2px #42A5F5 solid;
-  background-color: #ddeffd;
+  background-color: #F1F8FD;
 }
 
 table.ranking_table b {
@@ -314,10 +324,10 @@ button.record_foto::before {
   color: #1e88e5;
 }
 button.record_foto:hover, button.record_foto:focus {
-  border-color: #ffa608;
+  border-color: #1360a4;
 }
 button.record_foto:hover::before, button.record_foto:focus::before {
-  color: #ffa608;
+  color: #1360a4;
 }
 
 /* Koledar */
@@ -329,12 +339,12 @@ button.ui-datepicker-trigger {
   color: #1e88e5;
 }
 button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
-  color: #ffa608;
+  color: #1360a4;
 }
 
 /* Slider */
 .grupa .spremenljivka .ui-slider-pips .ui-slider-pip {
-  color: #505050;
+  color: #333333;
 }
 .grupa .spremenljivka .slider.ui-widget-content {
   /*background-color: $color_light !important;*/
@@ -359,7 +369,7 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 }
 .grupa .spremenljivka .sliderText {
   padding-top: 2px;
-  color: #505050;
+  color: #333333;
   background-color: #42A5F5;
   border: 0;
 }
@@ -379,7 +389,7 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
   text-align: center;
   font-size: 11px;
   line-height: 14px;
-  background-color: #ddeffd;
+  background-color: #F1F8FD;
   border: 2px solid red;
   padding: 4px 7px;
   border-radius: 4px;
@@ -388,29 +398,28 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 
 /* Gumbi na dnu */
 div.buttons {
-  padding: 20px 20px 35px;
-  margin: 0 10px;
+  padding: 64px 0;
+  margin: 0;
 }
 div.buttons input {
   cursor: pointer;
   margin: 8px 10px;
-  /*padding: 7px 11px;*/
-  padding: 10px 20px;
+  padding: 0 32px;
+  height: 40px;
   text-align: center;
-  font-size: 12px;
-  letter-spacing: 1px;
+  font-size: 16px;
   font-weight: 600;
   color: #FFFFFF;
-  border-radius: 20px;
   border: 0;
+  transition: 0.3s;
 }
 div.buttons input.next {
   background-color: #1e88e5;
   border: 1px solid #1e88e5;
 }
 div.buttons input.next:hover, div.buttons input.next:focus {
-  background-color: #ffa608;
-  border: 1px solid #ffa608;
+  background-color: #1360a4;
+  border: 1px solid #1360a4;
 }
 div.buttons input.prev {
   color: #1e88e5;
@@ -424,12 +433,12 @@ div.buttons input.prev:hover, div.buttons input.prev:focus {
 
 /* Footer */
 #footer_survey {
-  padding: 40px;
+  padding: 48px 0 64px 0;
   background-color: #ffffff;
-  border-top: 1px #ddeffd solid;
+  border-top: 1px #E5E5E5 solid;
 }
 #footer_survey p, #footer_survey a, #footer_survey a:visited {
-  color: #505050;
+  color: #333333;
   font-size: 14px;
   line-height: 25px;
   font-weight: 400;
diff --git a/main/survey/skins/1kaGreen.css b/main/survey/skins/1kaGreen.css
index 4ce676e63..b67a4d3e3 100644
--- a/main/survey/skins/1kaGreen.css
+++ b/main/survey/skins/1kaGreen.css
@@ -6,13 +6,14 @@
 /*
 	Osnovna tema ankete - 1ka - brez definiranih barv
 */
+/* Barve */
 /* Fonti */
 body {
   margin: 0;
   padding: 0;
-  color: #505050;
+  color: #333333;
   font-size: 100%;
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
   background: #ffffff;
 }
 
@@ -28,13 +29,13 @@ body.preview, body.testdata {
   position: absolute;
   width: 100%;
   height: 80px;
-  border-bottom: 6px #2e7d3a solid;
+  border-bottom: 2px #2e7d3a solid;
 }
 #outercontainer #container {
   position: relative;
   width: 100%;
   max-width: 1200px;
-  margin: 0px auto 10px;
+  margin: 0px auto;
 }
 
 /* Warning bar (preview, cookie) */
@@ -69,12 +70,14 @@ body.preview, body.testdata {
 
 /* Header - logo, naslov, progressbar */
 h1 {
-  margin: 0px auto 30px;
-  padding: 120px 0 50px 0;
-  font-size: 28px;
+  margin: 0px auto;
+  padding: 114px 0 32px 0;
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 40px;
   color: #2e7d3a;
   text-align: center;
-  border-bottom: 1px solid #e2f2e2;
+  border-bottom: 1px solid #E5E5E5;
 }
 
 h1.evalvacija {
@@ -83,7 +86,7 @@ h1.evalvacija {
 
 #logo {
   right: auto;
-  left: 25px;
+  left: 0;
   top: 13px;
   max-height: 56px !important;
   background: url("../../../public/img/logo/1ka_logo_slo.svg");
@@ -148,21 +151,28 @@ h1.evalvacija {
   color: #43b554;
 }
 
+/* Uvod in zakljucek */
+.intro .spremenljivka .naslov,
+.concl .spremenljivka .naslov {
+  margin: 0;
+}
+
 /* Spremenljivke */
 .spremenljivka {
-  margin: 20px 10px 20px 10px;
-  padding: 20px 2px 50px 12px !important;
-  border-bottom: 1px #e2f2e2 solid;
+  margin: 0;
+  padding: 48px 0 !important;
+  border-bottom: 1px #E5E5E5 solid;
 }
 .spremenljivka .naslov {
-  padding: 5px 0 15px 5px;
-  font-size: 18px;
+  padding: 0 !important;
+  margin: 0 0 24px 0;
+  font-size: 20px;
   font-weight: 600;
 }
 .spremenljivka .naslov .spremenljivka_info {
   font-size: 14px;
   font-weight: 400;
-  padding-top: 7px;
+  padding-top: 8px;
 }
 .spremenljivka .sequence_number {
   background-color: #e2f2e2;
@@ -201,41 +211,41 @@ td.variabla,
 td.question,
 td.differential,
 .variabla_sum label {
-  font-size: 14px;
+  font-size: 16px;
 }
 
 div.variable_holder {
-  padding: 10px 0 0 0;
+  padding: 0 !important;
+}
+div.variable_holder .variabla {
+  padding: 0;
+  margin-bottom: 16px;
+}
+div.variable_holder .variabla:last-child {
+  margin-bottom: 0;
 }
 div.variable_holder thead,
 div.variable_holder tr.table-header {
   font-weight: normal;
-  font-size: 14px;
+  font-size: 16px;
 }
 div.variable_holder thead td,
 div.variable_holder tr.table-header td {
   padding: 10px 5px;
 }
 
-table.grid_table thead tr td {
-  border-bottom: 2px #66bb6a solid;
-}
-table.grid_table thead tr.middle_row td {
-  border-top: 2px #66bb6a solid;
-}
 table.grid_table tbody tr.table-header td {
-  border-bottom: 2px #66bb6a solid;
   border-top: 2px #66bb6a solid;
   background-color: #ffffff;
 }
 table.grid_table tbody tr:nth-child(2n+1) {
-  background-color: #ffffff;
-}
-table.grid_table tbody tr:nth-child(2n) {
   background-color: #e2f2e2;
 }
+table.grid_table tbody tr:nth-child(2n) {
+  background-color: #ffffff;
+}
 table.grid_table td {
-  padding: 10px 10px;
+  padding: 12px 16px;
 }
 
 span.reminder {
@@ -244,7 +254,7 @@ span.reminder {
 
 /* Textboxi, textarea, select */
 input, textarea, select {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
 }
 
 input[type=text], textarea, select {
@@ -334,7 +344,7 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 
 /* Slider */
 .grupa .spremenljivka .ui-slider-pips .ui-slider-pip {
-  color: #505050;
+  color: #333333;
 }
 .grupa .spremenljivka .slider.ui-widget-content {
   /*background-color: $color_light !important;*/
@@ -359,7 +369,7 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 }
 .grupa .spremenljivka .sliderText {
   padding-top: 2px;
-  color: #505050;
+  color: #333333;
   background-color: #66bb6a;
   border: 0;
 }
@@ -388,21 +398,20 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 
 /* Gumbi na dnu */
 div.buttons {
-  padding: 20px 20px 35px;
-  margin: 0 10px;
+  padding: 64px 0;
+  margin: 0;
 }
 div.buttons input {
   cursor: pointer;
   margin: 8px 10px;
-  /*padding: 7px 11px;*/
-  padding: 10px 20px;
+  padding: 0 32px;
+  height: 40px;
   text-align: center;
-  font-size: 12px;
-  letter-spacing: 1px;
+  font-size: 16px;
   font-weight: 600;
   color: #FFFFFF;
-  border-radius: 20px;
   border: 0;
+  transition: 0.3s;
 }
 div.buttons input.next {
   background-color: #2e7d3a;
@@ -424,12 +433,12 @@ div.buttons input.prev:hover, div.buttons input.prev:focus {
 
 /* Footer */
 #footer_survey {
-  padding: 40px;
+  padding: 48px 0 64px 0;
   background-color: #ffffff;
-  border-top: 1px #e2f2e2 solid;
+  border-top: 1px #E5E5E5 solid;
 }
 #footer_survey p, #footer_survey a, #footer_survey a:visited {
-  color: #505050;
+  color: #333333;
   font-size: 14px;
   line-height: 25px;
   font-weight: 400;
diff --git a/main/survey/skins/1kaNature.css b/main/survey/skins/1kaNature.css
index f66bbfa13..bbfcb45d0 100644
--- a/main/survey/skins/1kaNature.css
+++ b/main/survey/skins/1kaNature.css
@@ -6,13 +6,14 @@
 /*
 	Osnovna tema ankete - 1ka - brez definiranih barv
 */
+/* Barve */
 /* Fonti */
 body {
   margin: 0;
   padding: 0;
-  color: #505050;
+  color: #333333;
   font-size: 100%;
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
   background: #ffffff;
 }
 
@@ -28,13 +29,13 @@ body.preview, body.testdata {
   position: absolute;
   width: 100%;
   height: 80px;
-  border-bottom: 6px #1e88e5 solid;
+  border-bottom: 2px #1e88e5 solid;
 }
 #outercontainer #container {
   position: relative;
   width: 100%;
   max-width: 1200px;
-  margin: 0px auto 10px;
+  margin: 0px auto;
 }
 
 /* Warning bar (preview, cookie) */
@@ -69,12 +70,14 @@ body.preview, body.testdata {
 
 /* Header - logo, naslov, progressbar */
 h1 {
-  margin: 0px auto 30px;
-  padding: 120px 0 50px 0;
-  font-size: 28px;
+  margin: 0px auto;
+  padding: 114px 0 32px 0;
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 40px;
   color: #505050;
   text-align: center;
-  border-bottom: 1px solid #ddeffd;
+  border-bottom: 1px solid #E5E5E5;
 }
 
 h1.evalvacija {
@@ -83,7 +86,7 @@ h1.evalvacija {
 
 #logo {
   right: auto;
-  left: 25px;
+  left: 0;
   top: 13px;
   max-height: 56px !important;
   background: url("../../../public/img/logo/1ka_logo_slo.svg");
@@ -148,21 +151,28 @@ h1.evalvacija {
   color: #ffa608;
 }
 
+/* Uvod in zakljucek */
+.intro .spremenljivka .naslov,
+.concl .spremenljivka .naslov {
+  margin: 0;
+}
+
 /* Spremenljivke */
 .spremenljivka {
-  margin: 20px 10px 20px 10px;
-  padding: 20px 2px 50px 12px !important;
-  border-bottom: 1px #ddeffd solid;
+  margin: 0;
+  padding: 48px 0 !important;
+  border-bottom: 1px #E5E5E5 solid;
 }
 .spremenljivka .naslov {
-  padding: 5px 0 15px 5px;
-  font-size: 18px;
+  padding: 0 !important;
+  margin: 0 0 24px 0;
+  font-size: 20px;
   font-weight: 600;
 }
 .spremenljivka .naslov .spremenljivka_info {
   font-size: 14px;
   font-weight: 400;
-  padding-top: 7px;
+  padding-top: 8px;
 }
 .spremenljivka .sequence_number {
   background-color: #ddeffd;
@@ -201,41 +211,41 @@ td.variabla,
 td.question,
 td.differential,
 .variabla_sum label {
-  font-size: 14px;
+  font-size: 16px;
 }
 
 div.variable_holder {
-  padding: 10px 0 0 0;
+  padding: 0 !important;
+}
+div.variable_holder .variabla {
+  padding: 0;
+  margin-bottom: 16px;
+}
+div.variable_holder .variabla:last-child {
+  margin-bottom: 0;
 }
 div.variable_holder thead,
 div.variable_holder tr.table-header {
   font-weight: normal;
-  font-size: 14px;
+  font-size: 16px;
 }
 div.variable_holder thead td,
 div.variable_holder tr.table-header td {
   padding: 10px 5px;
 }
 
-table.grid_table thead tr td {
-  border-bottom: 2px #42A5F5 solid;
-}
-table.grid_table thead tr.middle_row td {
-  border-top: 2px #42A5F5 solid;
-}
 table.grid_table tbody tr.table-header td {
-  border-bottom: 2px #42A5F5 solid;
   border-top: 2px #42A5F5 solid;
   background-color: #ffffff;
 }
 table.grid_table tbody tr:nth-child(2n+1) {
-  background-color: #ffffff;
-}
-table.grid_table tbody tr:nth-child(2n) {
   background-color: #ddeffd;
 }
+table.grid_table tbody tr:nth-child(2n) {
+  background-color: #ffffff;
+}
 table.grid_table td {
-  padding: 10px 10px;
+  padding: 12px 16px;
 }
 
 span.reminder {
@@ -244,7 +254,7 @@ span.reminder {
 
 /* Textboxi, textarea, select */
 input, textarea, select {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
 }
 
 input[type=text], textarea, select {
@@ -334,7 +344,7 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 
 /* Slider */
 .grupa .spremenljivka .ui-slider-pips .ui-slider-pip {
-  color: #505050;
+  color: #333333;
 }
 .grupa .spremenljivka .slider.ui-widget-content {
   /*background-color: $color_light !important;*/
@@ -359,7 +369,7 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 }
 .grupa .spremenljivka .sliderText {
   padding-top: 2px;
-  color: #505050;
+  color: #333333;
   background-color: #42A5F5;
   border: 0;
 }
@@ -388,21 +398,20 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 
 /* Gumbi na dnu */
 div.buttons {
-  padding: 20px 20px 35px;
-  margin: 0 10px;
+  padding: 64px 0;
+  margin: 0;
 }
 div.buttons input {
   cursor: pointer;
   margin: 8px 10px;
-  /*padding: 7px 11px;*/
-  padding: 10px 20px;
+  padding: 0 32px;
+  height: 40px;
   text-align: center;
-  font-size: 12px;
-  letter-spacing: 1px;
+  font-size: 16px;
   font-weight: 600;
   color: #FFFFFF;
-  border-radius: 20px;
   border: 0;
+  transition: 0.3s;
 }
 div.buttons input.next {
   background-color: #1e88e5;
@@ -424,12 +433,12 @@ div.buttons input.prev:hover, div.buttons input.prev:focus {
 
 /* Footer */
 #footer_survey {
-  padding: 40px;
+  padding: 48px 0 64px 0;
   background-color: #ffffff;
-  border-top: 1px #ddeffd solid;
+  border-top: 1px #E5E5E5 solid;
 }
 #footer_survey p, #footer_survey a, #footer_survey a:visited {
-  color: #505050;
+  color: #333333;
   font-size: 14px;
   line-height: 25px;
   font-weight: 400;
diff --git a/main/survey/skins/1kaOffice.css b/main/survey/skins/1kaOffice.css
index 88645734f..5de4991b4 100644
--- a/main/survey/skins/1kaOffice.css
+++ b/main/survey/skins/1kaOffice.css
@@ -6,13 +6,14 @@
 /*
 	Osnovna tema ankete - 1ka - brez definiranih barv
 */
+/* Barve */
 /* Fonti */
 body {
   margin: 0;
   padding: 0;
-  color: #505050;
+  color: #333333;
   font-size: 100%;
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
   background: #ffffff;
 }
 
@@ -28,13 +29,13 @@ body.preview, body.testdata {
   position: absolute;
   width: 100%;
   height: 80px;
-  border-bottom: 6px #1e88e5 solid;
+  border-bottom: 2px #1e88e5 solid;
 }
 #outercontainer #container {
   position: relative;
   width: 100%;
   max-width: 1200px;
-  margin: 0px auto 10px;
+  margin: 0px auto;
 }
 
 /* Warning bar (preview, cookie) */
@@ -69,12 +70,14 @@ body.preview, body.testdata {
 
 /* Header - logo, naslov, progressbar */
 h1 {
-  margin: 0px auto 30px;
-  padding: 120px 0 50px 0;
-  font-size: 28px;
+  margin: 0px auto;
+  padding: 114px 0 32px 0;
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 40px;
   color: #505050;
   text-align: center;
-  border-bottom: 1px solid #ddeffd;
+  border-bottom: 1px solid #E5E5E5;
 }
 
 h1.evalvacija {
@@ -83,7 +86,7 @@ h1.evalvacija {
 
 #logo {
   right: auto;
-  left: 25px;
+  left: 0;
   top: 13px;
   max-height: 56px !important;
   background: url("../../../public/img/logo/1ka_logo_slo.svg");
@@ -148,21 +151,28 @@ h1.evalvacija {
   color: #ffa608;
 }
 
+/* Uvod in zakljucek */
+.intro .spremenljivka .naslov,
+.concl .spremenljivka .naslov {
+  margin: 0;
+}
+
 /* Spremenljivke */
 .spremenljivka {
-  margin: 20px 10px 20px 10px;
-  padding: 20px 2px 50px 12px !important;
-  border-bottom: 1px #ddeffd solid;
+  margin: 0;
+  padding: 48px 0 !important;
+  border-bottom: 1px #E5E5E5 solid;
 }
 .spremenljivka .naslov {
-  padding: 5px 0 15px 5px;
-  font-size: 18px;
+  padding: 0 !important;
+  margin: 0 0 24px 0;
+  font-size: 20px;
   font-weight: 600;
 }
 .spremenljivka .naslov .spremenljivka_info {
   font-size: 14px;
   font-weight: 400;
-  padding-top: 7px;
+  padding-top: 8px;
 }
 .spremenljivka .sequence_number {
   background-color: #ddeffd;
@@ -201,41 +211,41 @@ td.variabla,
 td.question,
 td.differential,
 .variabla_sum label {
-  font-size: 14px;
+  font-size: 16px;
 }
 
 div.variable_holder {
-  padding: 10px 0 0 0;
+  padding: 0 !important;
+}
+div.variable_holder .variabla {
+  padding: 0;
+  margin-bottom: 16px;
+}
+div.variable_holder .variabla:last-child {
+  margin-bottom: 0;
 }
 div.variable_holder thead,
 div.variable_holder tr.table-header {
   font-weight: normal;
-  font-size: 14px;
+  font-size: 16px;
 }
 div.variable_holder thead td,
 div.variable_holder tr.table-header td {
   padding: 10px 5px;
 }
 
-table.grid_table thead tr td {
-  border-bottom: 2px #42A5F5 solid;
-}
-table.grid_table thead tr.middle_row td {
-  border-top: 2px #42A5F5 solid;
-}
 table.grid_table tbody tr.table-header td {
-  border-bottom: 2px #42A5F5 solid;
   border-top: 2px #42A5F5 solid;
   background-color: #ffffff;
 }
 table.grid_table tbody tr:nth-child(2n+1) {
-  background-color: #ffffff;
-}
-table.grid_table tbody tr:nth-child(2n) {
   background-color: #ddeffd;
 }
+table.grid_table tbody tr:nth-child(2n) {
+  background-color: #ffffff;
+}
 table.grid_table td {
-  padding: 10px 10px;
+  padding: 12px 16px;
 }
 
 span.reminder {
@@ -244,7 +254,7 @@ span.reminder {
 
 /* Textboxi, textarea, select */
 input, textarea, select {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
 }
 
 input[type=text], textarea, select {
@@ -334,7 +344,7 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 
 /* Slider */
 .grupa .spremenljivka .ui-slider-pips .ui-slider-pip {
-  color: #505050;
+  color: #333333;
 }
 .grupa .spremenljivka .slider.ui-widget-content {
   /*background-color: $color_light !important;*/
@@ -359,7 +369,7 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 }
 .grupa .spremenljivka .sliderText {
   padding-top: 2px;
-  color: #505050;
+  color: #333333;
   background-color: #42A5F5;
   border: 0;
 }
@@ -388,21 +398,20 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 
 /* Gumbi na dnu */
 div.buttons {
-  padding: 20px 20px 35px;
-  margin: 0 10px;
+  padding: 64px 0;
+  margin: 0;
 }
 div.buttons input {
   cursor: pointer;
   margin: 8px 10px;
-  /*padding: 7px 11px;*/
-  padding: 10px 20px;
+  padding: 0 32px;
+  height: 40px;
   text-align: center;
-  font-size: 12px;
-  letter-spacing: 1px;
+  font-size: 16px;
   font-weight: 600;
   color: #FFFFFF;
-  border-radius: 20px;
   border: 0;
+  transition: 0.3s;
 }
 div.buttons input.next {
   background-color: #1e88e5;
@@ -424,12 +433,12 @@ div.buttons input.prev:hover, div.buttons input.prev:focus {
 
 /* Footer */
 #footer_survey {
-  padding: 40px;
+  padding: 48px 0 64px 0;
   background-color: #ffffff;
-  border-top: 1px #ddeffd solid;
+  border-top: 1px #E5E5E5 solid;
 }
 #footer_survey p, #footer_survey a, #footer_survey a:visited {
-  color: #505050;
+  color: #333333;
   font-size: 14px;
   line-height: 25px;
   font-weight: 400;
diff --git a/main/survey/skins/1kaOrange.css b/main/survey/skins/1kaOrange.css
index c5d8149f9..116eee5e6 100644
--- a/main/survey/skins/1kaOrange.css
+++ b/main/survey/skins/1kaOrange.css
@@ -6,13 +6,14 @@
 /*
 	Osnovna tema ankete - 1ka - brez definiranih barv
 */
+/* Barve */
 /* Fonti */
 body {
   margin: 0;
   padding: 0;
-  color: #505050;
+  color: #333333;
   font-size: 100%;
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
   background: #ffffff;
 }
 
@@ -28,13 +29,13 @@ body.preview, body.testdata {
   position: absolute;
   width: 100%;
   height: 80px;
-  border-bottom: 6px #ef6c00 solid;
+  border-bottom: 2px #ef6c00 solid;
 }
 #outercontainer #container {
   position: relative;
   width: 100%;
   max-width: 1200px;
-  margin: 0px auto 10px;
+  margin: 0px auto;
 }
 
 /* Warning bar (preview, cookie) */
@@ -69,12 +70,14 @@ body.preview, body.testdata {
 
 /* Header - logo, naslov, progressbar */
 h1 {
-  margin: 0px auto 30px;
-  padding: 120px 0 50px 0;
-  font-size: 28px;
+  margin: 0px auto;
+  padding: 114px 0 32px 0;
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 40px;
   color: #ef6c00;
   text-align: center;
-  border-bottom: 1px solid #ffe9c9;
+  border-bottom: 1px solid #E5E5E5;
 }
 
 h1.evalvacija {
@@ -83,7 +86,7 @@ h1.evalvacija {
 
 #logo {
   right: auto;
-  left: 25px;
+  left: 0;
   top: 13px;
   max-height: 56px !important;
   background: url("../../../public/img/logo/1ka_logo_slo.svg");
@@ -148,21 +151,28 @@ h1.evalvacija {
   color: #ff943d;
 }
 
+/* Uvod in zakljucek */
+.intro .spremenljivka .naslov,
+.concl .spremenljivka .naslov {
+  margin: 0;
+}
+
 /* Spremenljivke */
 .spremenljivka {
-  margin: 20px 10px 20px 10px;
-  padding: 20px 2px 50px 12px !important;
-  border-bottom: 1px #ffe9c9 solid;
+  margin: 0;
+  padding: 48px 0 !important;
+  border-bottom: 1px #E5E5E5 solid;
 }
 .spremenljivka .naslov {
-  padding: 5px 0 15px 5px;
-  font-size: 18px;
+  padding: 0 !important;
+  margin: 0 0 24px 0;
+  font-size: 20px;
   font-weight: 600;
 }
 .spremenljivka .naslov .spremenljivka_info {
   font-size: 14px;
   font-weight: 400;
-  padding-top: 7px;
+  padding-top: 8px;
 }
 .spremenljivka .sequence_number {
   background-color: #ffe9c9;
@@ -201,41 +211,41 @@ td.variabla,
 td.question,
 td.differential,
 .variabla_sum label {
-  font-size: 14px;
+  font-size: 16px;
 }
 
 div.variable_holder {
-  padding: 10px 0 0 0;
+  padding: 0 !important;
+}
+div.variable_holder .variabla {
+  padding: 0;
+  margin-bottom: 16px;
+}
+div.variable_holder .variabla:last-child {
+  margin-bottom: 0;
 }
 div.variable_holder thead,
 div.variable_holder tr.table-header {
   font-weight: normal;
-  font-size: 14px;
+  font-size: 16px;
 }
 div.variable_holder thead td,
 div.variable_holder tr.table-header td {
   padding: 10px 5px;
 }
 
-table.grid_table thead tr td {
-  border-bottom: 2px #ffa726 solid;
-}
-table.grid_table thead tr.middle_row td {
-  border-top: 2px #ffa726 solid;
-}
 table.grid_table tbody tr.table-header td {
-  border-bottom: 2px #ffa726 solid;
   border-top: 2px #ffa726 solid;
   background-color: #ffffff;
 }
 table.grid_table tbody tr:nth-child(2n+1) {
-  background-color: #ffffff;
-}
-table.grid_table tbody tr:nth-child(2n) {
   background-color: #ffe9c9;
 }
+table.grid_table tbody tr:nth-child(2n) {
+  background-color: #ffffff;
+}
 table.grid_table td {
-  padding: 10px 10px;
+  padding: 12px 16px;
 }
 
 span.reminder {
@@ -244,7 +254,7 @@ span.reminder {
 
 /* Textboxi, textarea, select */
 input, textarea, select {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
 }
 
 input[type=text], textarea, select {
@@ -334,7 +344,7 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 
 /* Slider */
 .grupa .spremenljivka .ui-slider-pips .ui-slider-pip {
-  color: #505050;
+  color: #333333;
 }
 .grupa .spremenljivka .slider.ui-widget-content {
   /*background-color: $color_light !important;*/
@@ -359,7 +369,7 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 }
 .grupa .spremenljivka .sliderText {
   padding-top: 2px;
-  color: #505050;
+  color: #333333;
   background-color: #ffa726;
   border: 0;
 }
@@ -388,21 +398,20 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 
 /* Gumbi na dnu */
 div.buttons {
-  padding: 20px 20px 35px;
-  margin: 0 10px;
+  padding: 64px 0;
+  margin: 0;
 }
 div.buttons input {
   cursor: pointer;
   margin: 8px 10px;
-  /*padding: 7px 11px;*/
-  padding: 10px 20px;
+  padding: 0 32px;
+  height: 40px;
   text-align: center;
-  font-size: 12px;
-  letter-spacing: 1px;
+  font-size: 16px;
   font-weight: 600;
   color: #FFFFFF;
-  border-radius: 20px;
   border: 0;
+  transition: 0.3s;
 }
 div.buttons input.next {
   background-color: #ef6c00;
@@ -424,12 +433,12 @@ div.buttons input.prev:hover, div.buttons input.prev:focus {
 
 /* Footer */
 #footer_survey {
-  padding: 40px;
+  padding: 48px 0 64px 0;
   background-color: #ffffff;
-  border-top: 1px #ffe9c9 solid;
+  border-top: 1px #E5E5E5 solid;
 }
 #footer_survey p, #footer_survey a, #footer_survey a:visited {
-  color: #505050;
+  color: #333333;
   font-size: 14px;
   line-height: 25px;
   font-weight: 400;
diff --git a/main/survey/skins/1kaPurple.css b/main/survey/skins/1kaPurple.css
index 6ce9226a6..53cf1d414 100644
--- a/main/survey/skins/1kaPurple.css
+++ b/main/survey/skins/1kaPurple.css
@@ -6,13 +6,14 @@
 /*
 	Osnovna tema ankete - 1ka - brez definiranih barv
 */
+/* Barve */
 /* Fonti */
 body {
   margin: 0;
   padding: 0;
-  color: #505050;
+  color: #333333;
   font-size: 100%;
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
   background: #ffffff;
 }
 
@@ -28,13 +29,13 @@ body.preview, body.testdata {
   position: absolute;
   width: 100%;
   height: 80px;
-  border-bottom: 6px #4527a0 solid;
+  border-bottom: 2px #4527a0 solid;
 }
 #outercontainer #container {
   position: relative;
   width: 100%;
   max-width: 1200px;
-  margin: 0px auto 10px;
+  margin: 0px auto;
 }
 
 /* Warning bar (preview, cookie) */
@@ -69,12 +70,14 @@ body.preview, body.testdata {
 
 /* Header - logo, naslov, progressbar */
 h1 {
-  margin: 0px auto 30px;
-  padding: 120px 0 50px 0;
-  font-size: 28px;
+  margin: 0px auto;
+  padding: 114px 0 32px 0;
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 40px;
   color: #4527a0;
   text-align: center;
-  border-bottom: 1px solid #e3daf2;
+  border-bottom: 1px solid #E5E5E5;
 }
 
 h1.evalvacija {
@@ -83,7 +86,7 @@ h1.evalvacija {
 
 #logo {
   right: auto;
-  left: 25px;
+  left: 0;
   top: 13px;
   max-height: 56px !important;
   background: url("../../../public/img/logo/1ka_logo_slo.svg");
@@ -148,21 +151,28 @@ h1.evalvacija {
   color: #6642d1;
 }
 
+/* Uvod in zakljucek */
+.intro .spremenljivka .naslov,
+.concl .spremenljivka .naslov {
+  margin: 0;
+}
+
 /* Spremenljivke */
 .spremenljivka {
-  margin: 20px 10px 20px 10px;
-  padding: 20px 2px 50px 12px !important;
-  border-bottom: 1px #e3daf2 solid;
+  margin: 0;
+  padding: 48px 0 !important;
+  border-bottom: 1px #E5E5E5 solid;
 }
 .spremenljivka .naslov {
-  padding: 5px 0 15px 5px;
-  font-size: 18px;
+  padding: 0 !important;
+  margin: 0 0 24px 0;
+  font-size: 20px;
   font-weight: 600;
 }
 .spremenljivka .naslov .spremenljivka_info {
   font-size: 14px;
   font-weight: 400;
-  padding-top: 7px;
+  padding-top: 8px;
 }
 .spremenljivka .sequence_number {
   background-color: #e3daf2;
@@ -201,41 +211,41 @@ td.variabla,
 td.question,
 td.differential,
 .variabla_sum label {
-  font-size: 14px;
+  font-size: 16px;
 }
 
 div.variable_holder {
-  padding: 10px 0 0 0;
+  padding: 0 !important;
+}
+div.variable_holder .variabla {
+  padding: 0;
+  margin-bottom: 16px;
+}
+div.variable_holder .variabla:last-child {
+  margin-bottom: 0;
 }
 div.variable_holder thead,
 div.variable_holder tr.table-header {
   font-weight: normal;
-  font-size: 14px;
+  font-size: 16px;
 }
 div.variable_holder thead td,
 div.variable_holder tr.table-header td {
   padding: 10px 5px;
 }
 
-table.grid_table thead tr td {
-  border-bottom: 2px #7e57c2 solid;
-}
-table.grid_table thead tr.middle_row td {
-  border-top: 2px #7e57c2 solid;
-}
 table.grid_table tbody tr.table-header td {
-  border-bottom: 2px #7e57c2 solid;
   border-top: 2px #7e57c2 solid;
   background-color: #ffffff;
 }
 table.grid_table tbody tr:nth-child(2n+1) {
-  background-color: #ffffff;
-}
-table.grid_table tbody tr:nth-child(2n) {
   background-color: #e3daf2;
 }
+table.grid_table tbody tr:nth-child(2n) {
+  background-color: #ffffff;
+}
 table.grid_table td {
-  padding: 10px 10px;
+  padding: 12px 16px;
 }
 
 span.reminder {
@@ -244,7 +254,7 @@ span.reminder {
 
 /* Textboxi, textarea, select */
 input, textarea, select {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
 }
 
 input[type=text], textarea, select {
@@ -334,7 +344,7 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 
 /* Slider */
 .grupa .spremenljivka .ui-slider-pips .ui-slider-pip {
-  color: #505050;
+  color: #333333;
 }
 .grupa .spremenljivka .slider.ui-widget-content {
   /*background-color: $color_light !important;*/
@@ -359,7 +369,7 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 }
 .grupa .spremenljivka .sliderText {
   padding-top: 2px;
-  color: #505050;
+  color: #333333;
   background-color: #7e57c2;
   border: 0;
 }
@@ -388,21 +398,20 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 
 /* Gumbi na dnu */
 div.buttons {
-  padding: 20px 20px 35px;
-  margin: 0 10px;
+  padding: 64px 0;
+  margin: 0;
 }
 div.buttons input {
   cursor: pointer;
   margin: 8px 10px;
-  /*padding: 7px 11px;*/
-  padding: 10px 20px;
+  padding: 0 32px;
+  height: 40px;
   text-align: center;
-  font-size: 12px;
-  letter-spacing: 1px;
+  font-size: 16px;
   font-weight: 600;
   color: #FFFFFF;
-  border-radius: 20px;
   border: 0;
+  transition: 0.3s;
 }
 div.buttons input.next {
   background-color: #4527a0;
@@ -424,12 +433,12 @@ div.buttons input.prev:hover, div.buttons input.prev:focus {
 
 /* Footer */
 #footer_survey {
-  padding: 40px;
+  padding: 48px 0 64px 0;
   background-color: #ffffff;
-  border-top: 1px #e3daf2 solid;
+  border-top: 1px #E5E5E5 solid;
 }
 #footer_survey p, #footer_survey a, #footer_survey a:visited {
-  color: #505050;
+  color: #333333;
   font-size: 14px;
   line-height: 25px;
   font-weight: 400;
diff --git a/main/survey/skins/1kaRed.css b/main/survey/skins/1kaRed.css
index 1161b09ff..055b25600 100644
--- a/main/survey/skins/1kaRed.css
+++ b/main/survey/skins/1kaRed.css
@@ -6,13 +6,14 @@
 /*
 	Osnovna tema ankete - 1ka - brez definiranih barv
 */
+/* Barve */
 /* Fonti */
 body {
   margin: 0;
   padding: 0;
-  color: #505050;
+  color: #333333;
   font-size: 100%;
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
   background: #ffffff;
 }
 
@@ -28,13 +29,13 @@ body.preview, body.testdata {
   position: absolute;
   width: 100%;
   height: 80px;
-  border-bottom: 6px #c62828 solid;
+  border-bottom: 2px #c62828 solid;
 }
 #outercontainer #container {
   position: relative;
   width: 100%;
   max-width: 1200px;
-  margin: 0px auto 10px;
+  margin: 0px auto;
 }
 
 /* Warning bar (preview, cookie) */
@@ -69,12 +70,14 @@ body.preview, body.testdata {
 
 /* Header - logo, naslov, progressbar */
 h1 {
-  margin: 0px auto 30px;
-  padding: 120px 0 50px 0;
-  font-size: 28px;
+  margin: 0px auto;
+  padding: 114px 0 32px 0;
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 40px;
   color: #c62828;
   text-align: center;
-  border-bottom: 1px solid #fde6e6;
+  border-bottom: 1px solid #E5E5E5;
 }
 
 h1.evalvacija {
@@ -83,7 +86,7 @@ h1.evalvacija {
 
 #logo {
   right: auto;
-  left: 25px;
+  left: 0;
   top: 13px;
   max-height: 56px !important;
   background: url("../../../public/img/logo/1ka_logo_slo.svg");
@@ -148,21 +151,28 @@ h1.evalvacija {
   color: #de5c5c;
 }
 
+/* Uvod in zakljucek */
+.intro .spremenljivka .naslov,
+.concl .spremenljivka .naslov {
+  margin: 0;
+}
+
 /* Spremenljivke */
 .spremenljivka {
-  margin: 20px 10px 20px 10px;
-  padding: 20px 2px 50px 12px !important;
-  border-bottom: 1px #fde6e6 solid;
+  margin: 0;
+  padding: 48px 0 !important;
+  border-bottom: 1px #E5E5E5 solid;
 }
 .spremenljivka .naslov {
-  padding: 5px 0 15px 5px;
-  font-size: 18px;
+  padding: 0 !important;
+  margin: 0 0 24px 0;
+  font-size: 20px;
   font-weight: 600;
 }
 .spremenljivka .naslov .spremenljivka_info {
   font-size: 14px;
   font-weight: 400;
-  padding-top: 7px;
+  padding-top: 8px;
 }
 .spremenljivka .sequence_number {
   background-color: #fde6e6;
@@ -201,41 +211,41 @@ td.variabla,
 td.question,
 td.differential,
 .variabla_sum label {
-  font-size: 14px;
+  font-size: 16px;
 }
 
 div.variable_holder {
-  padding: 10px 0 0 0;
+  padding: 0 !important;
+}
+div.variable_holder .variabla {
+  padding: 0;
+  margin-bottom: 16px;
+}
+div.variable_holder .variabla:last-child {
+  margin-bottom: 0;
 }
 div.variable_holder thead,
 div.variable_holder tr.table-header {
   font-weight: normal;
-  font-size: 14px;
+  font-size: 16px;
 }
 div.variable_holder thead td,
 div.variable_holder tr.table-header td {
   padding: 10px 5px;
 }
 
-table.grid_table thead tr td {
-  border-bottom: 2px #ef5350 solid;
-}
-table.grid_table thead tr.middle_row td {
-  border-top: 2px #ef5350 solid;
-}
 table.grid_table tbody tr.table-header td {
-  border-bottom: 2px #ef5350 solid;
   border-top: 2px #ef5350 solid;
   background-color: #ffffff;
 }
 table.grid_table tbody tr:nth-child(2n+1) {
-  background-color: #ffffff;
-}
-table.grid_table tbody tr:nth-child(2n) {
   background-color: #fde6e6;
 }
+table.grid_table tbody tr:nth-child(2n) {
+  background-color: #ffffff;
+}
 table.grid_table td {
-  padding: 10px 10px;
+  padding: 12px 16px;
 }
 
 span.reminder {
@@ -244,7 +254,7 @@ span.reminder {
 
 /* Textboxi, textarea, select */
 input, textarea, select {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
 }
 
 input[type=text], textarea, select {
@@ -334,7 +344,7 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 
 /* Slider */
 .grupa .spremenljivka .ui-slider-pips .ui-slider-pip {
-  color: #505050;
+  color: #333333;
 }
 .grupa .spremenljivka .slider.ui-widget-content {
   /*background-color: $color_light !important;*/
@@ -359,7 +369,7 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 }
 .grupa .spremenljivka .sliderText {
   padding-top: 2px;
-  color: #505050;
+  color: #333333;
   background-color: #ef5350;
   border: 0;
 }
@@ -388,21 +398,20 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 
 /* Gumbi na dnu */
 div.buttons {
-  padding: 20px 20px 35px;
-  margin: 0 10px;
+  padding: 64px 0;
+  margin: 0;
 }
 div.buttons input {
   cursor: pointer;
   margin: 8px 10px;
-  /*padding: 7px 11px;*/
-  padding: 10px 20px;
+  padding: 0 32px;
+  height: 40px;
   text-align: center;
-  font-size: 12px;
-  letter-spacing: 1px;
+  font-size: 16px;
   font-weight: 600;
   color: #FFFFFF;
-  border-radius: 20px;
   border: 0;
+  transition: 0.3s;
 }
 div.buttons input.next {
   background-color: #c62828;
@@ -424,12 +433,12 @@ div.buttons input.prev:hover, div.buttons input.prev:focus {
 
 /* Footer */
 #footer_survey {
-  padding: 40px;
+  padding: 48px 0 64px 0;
   background-color: #ffffff;
-  border-top: 1px #fde6e6 solid;
+  border-top: 1px #E5E5E5 solid;
 }
 #footer_survey p, #footer_survey a, #footer_survey a:visited {
-  color: #505050;
+  color: #333333;
   font-size: 14px;
   line-height: 25px;
   font-weight: 400;
diff --git a/main/survey/skins/Cdi.css b/main/survey/skins/Cdi.css
index 6c3880f6a..8d9de34ac 100644
--- a/main/survey/skins/Cdi.css
+++ b/main/survey/skins/Cdi.css
@@ -6,13 +6,14 @@
 /*
 	Osnovna tema ankete - 1ka - brez definiranih barv
 */
+/* Barve */
 /* Fonti */
 body {
   margin: 0;
   padding: 0;
-  color: #505050;
+  color: #333333;
   font-size: 100%;
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
   background: #ffffff;
 }
 
@@ -28,13 +29,13 @@ body.preview, body.testdata {
   position: absolute;
   width: 100%;
   height: 80px;
-  border-bottom: 6px #666666 solid;
+  border-bottom: 2px #666666 solid;
 }
 #outercontainer #container {
   position: relative;
   width: 100%;
   max-width: 1200px;
-  margin: 0px auto 10px;
+  margin: 0px auto;
 }
 
 /* Warning bar (preview, cookie) */
@@ -69,12 +70,14 @@ body.preview, body.testdata {
 
 /* Header - logo, naslov, progressbar */
 h1 {
-  margin: 0px auto 30px;
-  padding: 120px 0 50px 0;
-  font-size: 28px;
+  margin: 0px auto;
+  padding: 114px 0 32px 0;
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 40px;
   color: #666666;
   text-align: center;
-  border-bottom: 1px solid #eeeeee;
+  border-bottom: 1px solid #E5E5E5;
 }
 
 h1.evalvacija {
@@ -83,7 +86,7 @@ h1.evalvacija {
 
 #logo {
   right: auto;
-  left: 25px;
+  left: 0;
   top: 13px;
   max-height: 56px !important;
   background: url("../../../public/img/logo/1ka_logo_slo.svg");
@@ -148,21 +151,28 @@ h1.evalvacija {
   color: #8c8c8c;
 }
 
+/* Uvod in zakljucek */
+.intro .spremenljivka .naslov,
+.concl .spremenljivka .naslov {
+  margin: 0;
+}
+
 /* Spremenljivke */
 .spremenljivka {
-  margin: 20px 10px 20px 10px;
-  padding: 20px 2px 50px 12px !important;
-  border-bottom: 1px #eeeeee solid;
+  margin: 0;
+  padding: 48px 0 !important;
+  border-bottom: 1px #E5E5E5 solid;
 }
 .spremenljivka .naslov {
-  padding: 5px 0 15px 5px;
-  font-size: 18px;
+  padding: 0 !important;
+  margin: 0 0 24px 0;
+  font-size: 20px;
   font-weight: 600;
 }
 .spremenljivka .naslov .spremenljivka_info {
   font-size: 14px;
   font-weight: 400;
-  padding-top: 7px;
+  padding-top: 8px;
 }
 .spremenljivka .sequence_number {
   background-color: #eeeeee;
@@ -201,41 +211,41 @@ td.variabla,
 td.question,
 td.differential,
 .variabla_sum label {
-  font-size: 14px;
+  font-size: 16px;
 }
 
 div.variable_holder {
-  padding: 10px 0 0 0;
+  padding: 0 !important;
+}
+div.variable_holder .variabla {
+  padding: 0;
+  margin-bottom: 16px;
+}
+div.variable_holder .variabla:last-child {
+  margin-bottom: 0;
 }
 div.variable_holder thead,
 div.variable_holder tr.table-header {
   font-weight: normal;
-  font-size: 14px;
+  font-size: 16px;
 }
 div.variable_holder thead td,
 div.variable_holder tr.table-header td {
   padding: 10px 5px;
 }
 
-table.grid_table thead tr td {
-  border-bottom: 2px #888888 solid;
-}
-table.grid_table thead tr.middle_row td {
-  border-top: 2px #888888 solid;
-}
 table.grid_table tbody tr.table-header td {
-  border-bottom: 2px #888888 solid;
   border-top: 2px #888888 solid;
   background-color: #ffffff;
 }
 table.grid_table tbody tr:nth-child(2n+1) {
-  background-color: #ffffff;
-}
-table.grid_table tbody tr:nth-child(2n) {
   background-color: #eeeeee;
 }
+table.grid_table tbody tr:nth-child(2n) {
+  background-color: #ffffff;
+}
 table.grid_table td {
-  padding: 10px 10px;
+  padding: 12px 16px;
 }
 
 span.reminder {
@@ -244,7 +254,7 @@ span.reminder {
 
 /* Textboxi, textarea, select */
 input, textarea, select {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
 }
 
 input[type=text], textarea, select {
@@ -334,7 +344,7 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 
 /* Slider */
 .grupa .spremenljivka .ui-slider-pips .ui-slider-pip {
-  color: #505050;
+  color: #333333;
 }
 .grupa .spremenljivka .slider.ui-widget-content {
   /*background-color: $color_light !important;*/
@@ -359,7 +369,7 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 }
 .grupa .spremenljivka .sliderText {
   padding-top: 2px;
-  color: #505050;
+  color: #333333;
   background-color: #888888;
   border: 0;
 }
@@ -388,21 +398,20 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 
 /* Gumbi na dnu */
 div.buttons {
-  padding: 20px 20px 35px;
-  margin: 0 10px;
+  padding: 64px 0;
+  margin: 0;
 }
 div.buttons input {
   cursor: pointer;
   margin: 8px 10px;
-  /*padding: 7px 11px;*/
-  padding: 10px 20px;
+  padding: 0 32px;
+  height: 40px;
   text-align: center;
-  font-size: 12px;
-  letter-spacing: 1px;
+  font-size: 16px;
   font-weight: 600;
   color: #FFFFFF;
-  border-radius: 20px;
   border: 0;
+  transition: 0.3s;
 }
 div.buttons input.next {
   background-color: #666666;
@@ -424,12 +433,12 @@ div.buttons input.prev:hover, div.buttons input.prev:focus {
 
 /* Footer */
 #footer_survey {
-  padding: 40px;
+  padding: 48px 0 64px 0;
   background-color: #ffffff;
-  border-top: 1px #eeeeee solid;
+  border-top: 1px #E5E5E5 solid;
 }
 #footer_survey p, #footer_survey a, #footer_survey a:visited {
-  color: #505050;
+  color: #333333;
   font-size: 14px;
   line-height: 25px;
   font-weight: 400;
diff --git a/main/survey/skins/Fdv.css b/main/survey/skins/Fdv.css
index 523980a73..30c347982 100644
--- a/main/survey/skins/Fdv.css
+++ b/main/survey/skins/Fdv.css
@@ -6,13 +6,14 @@
 /*
 	Osnovna tema ankete - 1ka - brez definiranih barv
 */
+/* Barve */
 /* Fonti */
 body {
   margin: 0;
   padding: 0;
-  color: #505050;
+  color: #333333;
   font-size: 100%;
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
   background: #ffffff;
 }
 
@@ -28,13 +29,13 @@ body.preview, body.testdata {
   position: absolute;
   width: 100%;
   height: 80px;
-  border-bottom: 6px #666666 solid;
+  border-bottom: 2px #666666 solid;
 }
 #outercontainer #container {
   position: relative;
   width: 100%;
   max-width: 1200px;
-  margin: 0px auto 10px;
+  margin: 0px auto;
 }
 
 /* Warning bar (preview, cookie) */
@@ -69,12 +70,14 @@ body.preview, body.testdata {
 
 /* Header - logo, naslov, progressbar */
 h1 {
-  margin: 0px auto 30px;
-  padding: 120px 0 50px 0;
-  font-size: 28px;
+  margin: 0px auto;
+  padding: 114px 0 32px 0;
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 40px;
   color: #666666;
   text-align: center;
-  border-bottom: 1px solid #eeeeee;
+  border-bottom: 1px solid #E5E5E5;
 }
 
 h1.evalvacija {
@@ -83,7 +86,7 @@ h1.evalvacija {
 
 #logo {
   right: auto;
-  left: 25px;
+  left: 0;
   top: 13px;
   max-height: 56px !important;
   background: url("../../../public/img/logo/1ka_logo_slo.svg");
@@ -148,21 +151,28 @@ h1.evalvacija {
   color: #8c8c8c;
 }
 
+/* Uvod in zakljucek */
+.intro .spremenljivka .naslov,
+.concl .spremenljivka .naslov {
+  margin: 0;
+}
+
 /* Spremenljivke */
 .spremenljivka {
-  margin: 20px 10px 20px 10px;
-  padding: 20px 2px 50px 12px !important;
-  border-bottom: 1px #eeeeee solid;
+  margin: 0;
+  padding: 48px 0 !important;
+  border-bottom: 1px #E5E5E5 solid;
 }
 .spremenljivka .naslov {
-  padding: 5px 0 15px 5px;
-  font-size: 18px;
+  padding: 0 !important;
+  margin: 0 0 24px 0;
+  font-size: 20px;
   font-weight: 600;
 }
 .spremenljivka .naslov .spremenljivka_info {
   font-size: 14px;
   font-weight: 400;
-  padding-top: 7px;
+  padding-top: 8px;
 }
 .spremenljivka .sequence_number {
   background-color: #eeeeee;
@@ -201,41 +211,41 @@ td.variabla,
 td.question,
 td.differential,
 .variabla_sum label {
-  font-size: 14px;
+  font-size: 16px;
 }
 
 div.variable_holder {
-  padding: 10px 0 0 0;
+  padding: 0 !important;
+}
+div.variable_holder .variabla {
+  padding: 0;
+  margin-bottom: 16px;
+}
+div.variable_holder .variabla:last-child {
+  margin-bottom: 0;
 }
 div.variable_holder thead,
 div.variable_holder tr.table-header {
   font-weight: normal;
-  font-size: 14px;
+  font-size: 16px;
 }
 div.variable_holder thead td,
 div.variable_holder tr.table-header td {
   padding: 10px 5px;
 }
 
-table.grid_table thead tr td {
-  border-bottom: 2px #888888 solid;
-}
-table.grid_table thead tr.middle_row td {
-  border-top: 2px #888888 solid;
-}
 table.grid_table tbody tr.table-header td {
-  border-bottom: 2px #888888 solid;
   border-top: 2px #888888 solid;
   background-color: #ffffff;
 }
 table.grid_table tbody tr:nth-child(2n+1) {
-  background-color: #ffffff;
-}
-table.grid_table tbody tr:nth-child(2n) {
   background-color: #eeeeee;
 }
+table.grid_table tbody tr:nth-child(2n) {
+  background-color: #ffffff;
+}
 table.grid_table td {
-  padding: 10px 10px;
+  padding: 12px 16px;
 }
 
 span.reminder {
@@ -244,7 +254,7 @@ span.reminder {
 
 /* Textboxi, textarea, select */
 input, textarea, select {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
 }
 
 input[type=text], textarea, select {
@@ -334,7 +344,7 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 
 /* Slider */
 .grupa .spremenljivka .ui-slider-pips .ui-slider-pip {
-  color: #505050;
+  color: #333333;
 }
 .grupa .spremenljivka .slider.ui-widget-content {
   /*background-color: $color_light !important;*/
@@ -359,7 +369,7 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 }
 .grupa .spremenljivka .sliderText {
   padding-top: 2px;
-  color: #505050;
+  color: #333333;
   background-color: #888888;
   border: 0;
 }
@@ -388,21 +398,20 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 
 /* Gumbi na dnu */
 div.buttons {
-  padding: 20px 20px 35px;
-  margin: 0 10px;
+  padding: 64px 0;
+  margin: 0;
 }
 div.buttons input {
   cursor: pointer;
   margin: 8px 10px;
-  /*padding: 7px 11px;*/
-  padding: 10px 20px;
+  padding: 0 32px;
+  height: 40px;
   text-align: center;
-  font-size: 12px;
-  letter-spacing: 1px;
+  font-size: 16px;
   font-weight: 600;
   color: #FFFFFF;
-  border-radius: 20px;
   border: 0;
+  transition: 0.3s;
 }
 div.buttons input.next {
   background-color: #666666;
@@ -424,12 +433,12 @@ div.buttons input.prev:hover, div.buttons input.prev:focus {
 
 /* Footer */
 #footer_survey {
-  padding: 40px;
+  padding: 48px 0 64px 0;
   background-color: #ffffff;
-  border-top: 1px #eeeeee solid;
+  border-top: 1px #E5E5E5 solid;
 }
 #footer_survey p, #footer_survey a, #footer_survey a:visited {
-  color: #505050;
+  color: #333333;
   font-size: 14px;
   line-height: 25px;
   font-weight: 400;
diff --git a/main/survey/skins/MobileBlack.css b/main/survey/skins/MobileBlack.css
index 3026ecc92..17077ed68 100644
--- a/main/survey/skins/MobileBlack.css
+++ b/main/survey/skins/MobileBlack.css
@@ -9,7 +9,7 @@
 */
 /* Fonti */
 body {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
   color: #505050;
   background-color: white;
 }
@@ -28,7 +28,7 @@ span, label {
 /* INPUT ELEMENTI */
 /* Textboxi, textarea, select */
 input, textarea, select {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
 }
 
 input[type=text], textarea, select {
diff --git a/main/survey/skins/MobileBlue.css b/main/survey/skins/MobileBlue.css
index d55554ec4..f8659e8a7 100644
--- a/main/survey/skins/MobileBlue.css
+++ b/main/survey/skins/MobileBlue.css
@@ -8,7 +8,7 @@
 */
 /* Fonti */
 body {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
   color: #505050;
   background-color: white;
 }
@@ -27,7 +27,7 @@ span, label {
 /* INPUT ELEMENTI */
 /* Textboxi, textarea, select */
 input, textarea, select {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
 }
 
 input[type=text], textarea, select {
diff --git a/main/survey/skins/MobileCdi.css b/main/survey/skins/MobileCdi.css
index fdb38797c..9588ebb35 100644
--- a/main/survey/skins/MobileCdi.css
+++ b/main/survey/skins/MobileCdi.css
@@ -9,7 +9,7 @@
 */
 /* Fonti */
 body {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
   color: #505050;
   background-color: white;
 }
@@ -28,7 +28,7 @@ span, label {
 /* INPUT ELEMENTI */
 /* Textboxi, textarea, select */
 input, textarea, select {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
 }
 
 input[type=text], textarea, select {
diff --git a/main/survey/skins/MobileFdv.css b/main/survey/skins/MobileFdv.css
index b0f4db9ae..995058d55 100644
--- a/main/survey/skins/MobileFdv.css
+++ b/main/survey/skins/MobileFdv.css
@@ -9,7 +9,7 @@
 */
 /* Fonti */
 body {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
   color: #505050;
   background-color: white;
 }
@@ -28,7 +28,7 @@ span, label {
 /* INPUT ELEMENTI */
 /* Textboxi, textarea, select */
 input, textarea, select {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
 }
 
 input[type=text], textarea, select {
diff --git a/main/survey/skins/MobileGreen.css b/main/survey/skins/MobileGreen.css
index 85aa01bd2..4564b4fdf 100644
--- a/main/survey/skins/MobileGreen.css
+++ b/main/survey/skins/MobileGreen.css
@@ -8,7 +8,7 @@
 */
 /* Fonti */
 body {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
   color: #505050;
   background-color: white;
 }
@@ -27,7 +27,7 @@ span, label {
 /* INPUT ELEMENTI */
 /* Textboxi, textarea, select */
 input, textarea, select {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
 }
 
 input[type=text], textarea, select {
diff --git a/main/survey/skins/MobileOrange.css b/main/survey/skins/MobileOrange.css
index f56a74643..706d13f54 100644
--- a/main/survey/skins/MobileOrange.css
+++ b/main/survey/skins/MobileOrange.css
@@ -8,7 +8,7 @@
 */
 /* Fonti */
 body {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
   color: #505050;
   background-color: white;
 }
@@ -27,7 +27,7 @@ span, label {
 /* INPUT ELEMENTI */
 /* Textboxi, textarea, select */
 input, textarea, select {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
 }
 
 input[type=text], textarea, select {
diff --git a/main/survey/skins/MobilePurple.css b/main/survey/skins/MobilePurple.css
index b86cc05c5..86ea387e2 100644
--- a/main/survey/skins/MobilePurple.css
+++ b/main/survey/skins/MobilePurple.css
@@ -9,7 +9,7 @@
 */
 /* Fonti */
 body {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
   color: #505050;
   background-color: white;
 }
@@ -28,7 +28,7 @@ span, label {
 /* INPUT ELEMENTI */
 /* Textboxi, textarea, select */
 input, textarea, select {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
 }
 
 input[type=text], textarea, select {
diff --git a/main/survey/skins/MobileRed.css b/main/survey/skins/MobileRed.css
index 423a4bf31..8444e2fcd 100644
--- a/main/survey/skins/MobileRed.css
+++ b/main/survey/skins/MobileRed.css
@@ -9,7 +9,7 @@
 */
 /* Fonti */
 body {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
   color: #505050;
   background-color: white;
 }
@@ -28,7 +28,7 @@ span, label {
 /* INPUT ELEMENTI */
 /* Textboxi, textarea, select */
 input, textarea, select {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
 }
 
 input[type=text], textarea, select {
diff --git a/main/survey/skins/MobileUni.css b/main/survey/skins/MobileUni.css
index 3227c7d74..016affa6d 100644
--- a/main/survey/skins/MobileUni.css
+++ b/main/survey/skins/MobileUni.css
@@ -9,7 +9,7 @@
 */
 /* Fonti */
 body {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
   color: #505050;
   background-color: white;
 }
@@ -28,7 +28,7 @@ span, label {
 /* INPUT ELEMENTI */
 /* Textboxi, textarea, select */
 input, textarea, select {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
 }
 
 input[type=text], textarea, select {
diff --git a/main/survey/skins/Otroci3.css b/main/survey/skins/Otroci3.css
index 0720ea0db..d78fba231 100644
--- a/main/survey/skins/Otroci3.css
+++ b/main/survey/skins/Otroci3.css
@@ -1,14 +1,13 @@
 /*
 	Tema Otroci 3
 */
-/*$font_family: Open Sans, Arial, Sans-Serif;*/
 /* Barve */
 body {
   margin: 0;
   padding: 0;
   color: #333;
   font-size: 75%;
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
   background: #b0e8ff url(Otroci/otroci-3-footer.png) left bottom repeat-x;
 }
 
@@ -185,7 +184,7 @@ span.reminder {
 
 /* Textboxi, textarea, select */
 input, textarea, select {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
 }
 
 input[type=text], textarea, select {
diff --git a/main/survey/skins/Otroci4.css b/main/survey/skins/Otroci4.css
index 8bd5d79c9..e857c3136 100644
--- a/main/survey/skins/Otroci4.css
+++ b/main/survey/skins/Otroci4.css
@@ -1,14 +1,13 @@
 /*
 	Tema Otroci 4
 */
-/*$font_family: Open Sans, Arial, Sans-Serif;*/
 /* Barve */
 body {
   margin: 0;
   padding: 0;
   color: #333;
   font-size: 75%;
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
   background: #fff url(Otroci/otroci-4-footer.png) left bottom repeat-x;
 }
 
@@ -181,7 +180,7 @@ span.reminder {
 
 /* Textboxi, textarea, select */
 input, textarea, select {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
 }
 
 input[type=text], textarea, select {
diff --git a/main/survey/skins/Uni.css b/main/survey/skins/Uni.css
index a3ccfd424..50d489f06 100644
--- a/main/survey/skins/Uni.css
+++ b/main/survey/skins/Uni.css
@@ -6,13 +6,14 @@
 /*
 	Osnovna tema ankete - 1ka - brez definiranih barv
 */
+/* Barve */
 /* Fonti */
 body {
   margin: 0;
   padding: 0;
-  color: #505050;
+  color: #333333;
   font-size: 100%;
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
   background: #ffffff;
 }
 
@@ -28,13 +29,13 @@ body.preview, body.testdata {
   position: absolute;
   width: 100%;
   height: 80px;
-  border-bottom: 6px #666666 solid;
+  border-bottom: 2px #666666 solid;
 }
 #outercontainer #container {
   position: relative;
   width: 100%;
   max-width: 1200px;
-  margin: 0px auto 10px;
+  margin: 0px auto;
 }
 
 /* Warning bar (preview, cookie) */
@@ -69,12 +70,14 @@ body.preview, body.testdata {
 
 /* Header - logo, naslov, progressbar */
 h1 {
-  margin: 0px auto 30px;
-  padding: 120px 0 50px 0;
-  font-size: 28px;
+  margin: 0px auto;
+  padding: 114px 0 32px 0;
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 40px;
   color: #666666;
   text-align: center;
-  border-bottom: 1px solid #eeeeee;
+  border-bottom: 1px solid #E5E5E5;
 }
 
 h1.evalvacija {
@@ -83,7 +86,7 @@ h1.evalvacija {
 
 #logo {
   right: auto;
-  left: 25px;
+  left: 0;
   top: 13px;
   max-height: 56px !important;
   background: url("../../../public/img/logo/1ka_logo_slo.svg");
@@ -148,21 +151,28 @@ h1.evalvacija {
   color: #8c8c8c;
 }
 
+/* Uvod in zakljucek */
+.intro .spremenljivka .naslov,
+.concl .spremenljivka .naslov {
+  margin: 0;
+}
+
 /* Spremenljivke */
 .spremenljivka {
-  margin: 20px 10px 20px 10px;
-  padding: 20px 2px 50px 12px !important;
-  border-bottom: 1px #eeeeee solid;
+  margin: 0;
+  padding: 48px 0 !important;
+  border-bottom: 1px #E5E5E5 solid;
 }
 .spremenljivka .naslov {
-  padding: 5px 0 15px 5px;
-  font-size: 18px;
+  padding: 0 !important;
+  margin: 0 0 24px 0;
+  font-size: 20px;
   font-weight: 600;
 }
 .spremenljivka .naslov .spremenljivka_info {
   font-size: 14px;
   font-weight: 400;
-  padding-top: 7px;
+  padding-top: 8px;
 }
 .spremenljivka .sequence_number {
   background-color: #eeeeee;
@@ -201,41 +211,41 @@ td.variabla,
 td.question,
 td.differential,
 .variabla_sum label {
-  font-size: 14px;
+  font-size: 16px;
 }
 
 div.variable_holder {
-  padding: 10px 0 0 0;
+  padding: 0 !important;
+}
+div.variable_holder .variabla {
+  padding: 0;
+  margin-bottom: 16px;
+}
+div.variable_holder .variabla:last-child {
+  margin-bottom: 0;
 }
 div.variable_holder thead,
 div.variable_holder tr.table-header {
   font-weight: normal;
-  font-size: 14px;
+  font-size: 16px;
 }
 div.variable_holder thead td,
 div.variable_holder tr.table-header td {
   padding: 10px 5px;
 }
 
-table.grid_table thead tr td {
-  border-bottom: 2px #888888 solid;
-}
-table.grid_table thead tr.middle_row td {
-  border-top: 2px #888888 solid;
-}
 table.grid_table tbody tr.table-header td {
-  border-bottom: 2px #888888 solid;
   border-top: 2px #888888 solid;
   background-color: #ffffff;
 }
 table.grid_table tbody tr:nth-child(2n+1) {
-  background-color: #ffffff;
-}
-table.grid_table tbody tr:nth-child(2n) {
   background-color: #eeeeee;
 }
+table.grid_table tbody tr:nth-child(2n) {
+  background-color: #ffffff;
+}
 table.grid_table td {
-  padding: 10px 10px;
+  padding: 12px 16px;
 }
 
 span.reminder {
@@ -244,7 +254,7 @@ span.reminder {
 
 /* Textboxi, textarea, select */
 input, textarea, select {
-  font-family: Montserrat, Arial, Sans-Serif !important;
+  font-family: Source Sans Pro, sans-serif !important;
 }
 
 input[type=text], textarea, select {
@@ -334,7 +344,7 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 
 /* Slider */
 .grupa .spremenljivka .ui-slider-pips .ui-slider-pip {
-  color: #505050;
+  color: #333333;
 }
 .grupa .spremenljivka .slider.ui-widget-content {
   /*background-color: $color_light !important;*/
@@ -359,7 +369,7 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 }
 .grupa .spremenljivka .sliderText {
   padding-top: 2px;
-  color: #505050;
+  color: #333333;
   background-color: #888888;
   border: 0;
 }
@@ -388,21 +398,20 @@ button.ui-datepicker-trigger:hover, button.ui-datepicker-trigger:focus {
 
 /* Gumbi na dnu */
 div.buttons {
-  padding: 20px 20px 35px;
-  margin: 0 10px;
+  padding: 64px 0;
+  margin: 0;
 }
 div.buttons input {
   cursor: pointer;
   margin: 8px 10px;
-  /*padding: 7px 11px;*/
-  padding: 10px 20px;
+  padding: 0 32px;
+  height: 40px;
   text-align: center;
-  font-size: 12px;
-  letter-spacing: 1px;
+  font-size: 16px;
   font-weight: 600;
   color: #FFFFFF;
-  border-radius: 20px;
   border: 0;
+  transition: 0.3s;
 }
 div.buttons input.next {
   background-color: #666666;
@@ -424,12 +433,12 @@ div.buttons input.prev:hover, div.buttons input.prev:focus {
 
 /* Footer */
 #footer_survey {
-  padding: 40px;
+  padding: 48px 0 64px 0;
   background-color: #ffffff;
-  border-top: 1px #eeeeee solid;
+  border-top: 1px #E5E5E5 solid;
 }
 #footer_survey p, #footer_survey a, #footer_survey a:visited {
-  color: #505050;
+  color: #333333;
   font-size: 14px;
   line-height: 25px;
   font-weight: 400;
diff --git a/main/survey/skins/___po_narocilu/Bled.css b/main/survey/skins/___po_narocilu/Bled.css
index fdf8dd00f..46d03922b 100644
--- a/main/survey/skins/___po_narocilu/Bled.css
+++ b/main/survey/skins/___po_narocilu/Bled.css
@@ -46,9 +46,7 @@ body.preview, body.testdata{
 
 
 /* Warning bar (preview, cookie) */
-#cookie_alert, #test_alert { 
-	font-family: Open Sans, Arial, Sans-Serif !important;
-	
+#cookie_alert, #test_alert { 	
     height: 26px;
 	
 	font-size: 13px;
@@ -457,9 +455,7 @@ div.buttons input.prev:hover {
 
 
 /* Footer */
-#footer_survey {
-	font-family: Open Sans, Arial, Sans-Serif !important;
-	
+#footer_survey {	
 	padding: 30px 0;
 	width: 100%;
 	
diff --git a/main/survey/skins/___po_narocilu/Gorenje/Old/GorenjeGroup.css b/main/survey/skins/___po_narocilu/Gorenje/Old/GorenjeGroup.css
index d1bfd63c0..584687860 100644
--- a/main/survey/skins/___po_narocilu/Gorenje/Old/GorenjeGroup.css
+++ b/main/survey/skins/___po_narocilu/Gorenje/Old/GorenjeGroup.css
@@ -6,8 +6,6 @@ body {
 	
     color: #231f20;
     font-size: 100%;
-	font-family: Arial, Verdana, Sans-Serif;
-	font-family: Open Sans, Arial, Sans-Serif !important;
 	
 	background: #ffffff;
 }
diff --git a/main/survey/skins/___po_narocilu/MJU.css b/main/survey/skins/___po_narocilu/MJU.css
index 09a772971..fe2a2ed5d 100644
--- a/main/survey/skins/___po_narocilu/MJU.css
+++ b/main/survey/skins/___po_narocilu/MJU.css
@@ -6,8 +6,6 @@ body {
 	
     color: #1a4859;
     font-size: 100%;
-	font-family: Arial, Verdana, Sans-Serif;
-	font-family: Open Sans, Arial, Sans-Serif !important;
 	
 	background-color: #2b6175;
 }
diff --git a/main/survey/skins/___po_narocilu/MJU/single_bck/MJU.css b/main/survey/skins/___po_narocilu/MJU/single_bck/MJU.css
index 5ce320602..8b044539d 100644
--- a/main/survey/skins/___po_narocilu/MJU/single_bck/MJU.css
+++ b/main/survey/skins/___po_narocilu/MJU/single_bck/MJU.css
@@ -6,8 +6,6 @@ body {
 	
     color: #1a4859;
     font-size: 100%;
-	font-family: Arial, Verdana, Sans-Serif;
-	font-family: Open Sans, Arial, Sans-Serif !important;
 	
 	background: url('MJU/bg.png') top left repeat-x;
 	background-color: #2e6479;
diff --git a/main/survey/skins/___po_narocilu/MJU/single_bck/MJU_mobile.css b/main/survey/skins/___po_narocilu/MJU/single_bck/MJU_mobile.css
index a4e6e75ae..510500c77 100644
--- a/main/survey/skins/___po_narocilu/MJU/single_bck/MJU_mobile.css
+++ b/main/survey/skins/___po_narocilu/MJU/single_bck/MJU_mobile.css
@@ -1,8 +1,6 @@
 body{
 	padding: 0px;
 	
-	font-family: Arial, Verdana, Sans-Serif;
-	font-family: Open Sans, Arial, Sans-Serif !important;
 	font-size: 13px;
 	color: #1a4859;
 	
diff --git a/main/survey/skins/___po_narocilu/MJU_mobile.css b/main/survey/skins/___po_narocilu/MJU_mobile.css
index 02deaeba0..a22a41f66 100644
--- a/main/survey/skins/___po_narocilu/MJU_mobile.css
+++ b/main/survey/skins/___po_narocilu/MJU_mobile.css
@@ -1,8 +1,6 @@
 body{
 	padding: 0px;
 	
-	font-family: Arial, Verdana, Sans-Serif;
-	font-family: Open Sans, Arial, Sans-Serif !important;
 	font-size: 13px;
 	color: #1a4859;
 	
diff --git a/main/survey/skins/___po_narocilu/MJU_tablet.css b/main/survey/skins/___po_narocilu/MJU_tablet.css
index 7c873b41c..cb19eabb1 100644
--- a/main/survey/skins/___po_narocilu/MJU_tablet.css
+++ b/main/survey/skins/___po_narocilu/MJU_tablet.css
@@ -1,8 +1,6 @@
 body{
 	padding: 0px;
 	
-	font-family: Arial, Verdana, Sans-Serif;
-	font-family: Open Sans, Arial, Sans-Serif !important;
 	font-size: 13px;
 	color: #1a4859;
 	
diff --git a/public/css/main.css b/public/css/main.css
index 805a98b25..1b290266f 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -5053,7 +5053,7 @@ readers do not read off random characters that represent icons */
 }
 
 body {
-  font-family: Montserrat, sans-serif;
+  font-family: Source Sans Pro, sans-serif;
   font-size: 62.5%;
   margin: 0;
 }
diff --git a/resources/sass/main/main/admin.scss b/resources/sass/main/main/admin.scss
index ca3fbcc85..231e9fca7 100644
--- a/resources/sass/main/main/admin.scss
+++ b/resources/sass/main/main/admin.scss
@@ -214,8 +214,6 @@
     }
     
     #preview_switch {
-        font-family: Open Sans, Arial, Sans-Serif !important;
-
         box-sizing: border-box;
         width: 100%;
     
@@ -280,8 +278,6 @@
     }
 
     #preview-holder {
-        font-family: Open Sans, Arial, Sans-Serif !important;
-
         z-index: 100;
         box-sizing: border-box;
         width: 100%;
diff --git a/resources/sass/main/main/basic.scss b/resources/sass/main/main/basic.scss
index 71155152a..49170888a 100644
--- a/resources/sass/main/main/basic.scss
+++ b/resources/sass/main/main/basic.scss
@@ -9,7 +9,7 @@
 @import "../../../fonts/FontAwesome5/scss/solid.scss";
 @import "../../../fonts/FontAwesome5/scss/brands.scss";
 
-$font_family: Montserrat, sans-serif;
+$font_family: Source Sans Pro, sans-serif;
 $fontawesome: "Font Awesome 5 Free";
 
 $siva-suctom-radio: #c3c3c3;
diff --git a/resources/sass/main/main/test_survey_comments.scss b/resources/sass/main/main/test_survey_comments.scss
index f87931c39..fc9c7a815 100644
--- a/resources/sass/main/main/test_survey_comments.scss
+++ b/resources/sass/main/main/test_survey_comments.scss
@@ -10,8 +10,6 @@ span.faicon.empty {
     font-weight: 400 !important;
 }
 
-$font-family: Open Sans, Arial, Sans-Serif;
-
 //Barve
 $blue: #1E88E5;
 $dark-blue: #0059ab;
diff --git a/resources/sass/main/main_mobile/header.scss b/resources/sass/main/main_mobile/header.scss
index fee8f11f4..770506da9 100644
--- a/resources/sass/main/main_mobile/header.scss
+++ b/resources/sass/main/main_mobile/header.scss
@@ -25,9 +25,7 @@
 
 
 /* Warning bar (preview, cookie) */
-#cookie_alert, #test_alert {   
-	font-family: Open Sans, Arial, Sans-Serif;
-	
+#cookie_alert, #test_alert {   	
     height: 26px;
 	
 	line-height: 25px;
diff --git a/resources/sass/main/skins/1ka/1ka.scss b/resources/sass/main/skins/1ka/1ka.scss
index ee51f5fd4..729e8ada1 100644
--- a/resources/sass/main/skins/1ka/1ka.scss
+++ b/resources/sass/main/skins/1ka/1ka.scss
@@ -3,8 +3,15 @@
 */
 
 
+/* Barve */
+$color_gray: #E5E5E5;
+
+$color_warning: #ffa608;
+$color_text: #333333;
+
+
 /* Fonti */
-$font_family: Montserrat, Arial, Sans-Serif;
+$font_family: Source Sans Pro, sans-serif;
 
 
 body {
@@ -30,7 +37,7 @@ body.preview, body.testdata{
 		width: 100%;
 		height: 80px;
 		
-		border-bottom: 6px $color_strong solid;
+		border-bottom: 2px $color_strong solid;
 	}
 	
 	#container {
@@ -38,7 +45,7 @@ body.preview, body.testdata{
 		
 		width: 100%;
 		max-width: 1200px;
-		margin: 0px auto 10px;
+		margin: 0px auto;
 	}
 }
 
@@ -79,14 +86,16 @@ body.preview, body.testdata{
 
 /* Header - logo, naslov, progressbar */
 h1 {
-    margin: 0px auto 30px;
-	padding: 120px 0 50px 0;
+    margin: 0px auto;
+	padding: 114px 0 32px 0;
 	
-	font-size: 28px;
+	font-size: 32px;
+    font-weight: 600;
+    line-height: 40px;
 	color: $color_title;
     text-align: center;
 	
-	border-bottom: 1px solid $color_light_lighter;
+	border-bottom: 1px solid $color_gray;
 }
 h1.evalvacija{
 	margin-bottom: 0;
@@ -95,7 +104,7 @@ h1.evalvacija{
 
 #logo {
 	right: auto;
-	left: 25px;
+	left: 0;
 	top: 13px;
 	
 	max-height: 56px !important;
@@ -179,22 +188,34 @@ h1.evalvacija{
 }
 
 
+/* Uvod in zakljucek */
+.intro,
+.concl{
+
+    .spremenljivka .naslov{
+        margin: 0;
+    }
+}
+
+
 /* Spremenljivke */
 .spremenljivka {
-    margin: 20px 10px 20px 10px;
-    padding: 20px 2px 50px 12px !important;
+    margin: 0;
+    padding: 48px 0 !important;
 	
-	border-bottom: 1px $color_light_lighter solid;
+	border-bottom: 1px $color_gray solid;
 	
 	.naslov{
-		padding: 5px 0 15px 5px;
-		font-size: 18px;
+		padding: 0 !important;
+        margin: 0 0 24px 0;
+
+		font-size: 20px;
 		font-weight: 600;
 		
 		.spremenljivka_info{
 			font-size: 14px;
 			font-weight: 400;
-			padding-top: 7px;
+			padding-top: 8px;
 		}
     }
     
@@ -241,16 +262,25 @@ td.variabla,
 td.question,
 td.differential,
 .variabla_sum label{
-	font-size: 14px;
+	font-size: 16px;
 }
 
 div.variable_holder {
-	padding: 10px 0 0 0;
-	
+	padding: 0 !important;
+
+    .variabla{
+        padding: 0;
+        margin-bottom: 16px;
+
+        &:last-child{
+            margin-bottom: 0;
+        }
+    }
+
 	thead,
     tr.table-header {
 		font-weight: normal;
-		font-size: 14px;
+		font-size: 16px;
 		
 		td{
 			padding: 10px 5px;
@@ -260,26 +290,19 @@ div.variable_holder {
 
 table.grid_table{
 	
-	thead tr td{
-		border-bottom: 2px $color_light solid;
-    }
-    thead tr.middle_row td{
-		border-top: 2px $color_light solid;
-    }
     tbody tr.table-header td{
-		border-bottom: 2px $color_light solid;
         border-top: 2px $color_light solid;
         background-color: #ffffff;
     }
 	
 	tbody tr:nth-child(2n+1) {
-		background-color: #ffffff;
+        background-color: $color_light_lighter;
 	}
 	tbody tr:nth-child(2n) {
-		background-color: $color_light_lighter;
+        background-color: #ffffff;
 	}
 	td {
-		padding: 10px 10px;
+		padding: 12px 16px;
 	}
 }
 
@@ -453,24 +476,24 @@ button.ui-datepicker-trigger{
 
 /* Gumbi na dnu */
 div.buttons {
-	padding: 20px 20px 35px;
-	margin: 0 10px;
-	
+	padding: 64px 0;
+	margin: 0;
+
 	input {
 		cursor: pointer;
 		
 		margin: 8px 10px;
-		/*padding: 7px 11px;*/
-		padding: 10px 20px;
+		padding: 0 32px;
+        height: 40px;
 		
 		text-align: center;
-		font-size: 12px;
-		letter-spacing: 1px;
+		font-size: 16px;
 		font-weight: 600;
 		color: #FFFFFF;
-		
-		border-radius: 20px;
-		border: 0; 
+
+        border: 0; 
+
+        transition: 0.3s;
 	}
 	
 	input.next {
@@ -500,10 +523,10 @@ div.buttons {
 
 /* Footer */
 #footer_survey {
-	padding: 40px;
+	padding: 48px 0 64px 0;
 	
 	background-color: #ffffff;
-	border-top: 1px $color_light_lighter solid;
+	border-top: 1px $color_gray solid;
 	
 	p, a, a:visited {
 		color: $color_text;
diff --git a/resources/sass/main/skins/1ka/1kaBlack.scss b/resources/sass/main/skins/1ka/1kaBlack.scss
index 34bfca7e0..edace2694 100644
--- a/resources/sass/main/skins/1ka/1kaBlack.scss
+++ b/resources/sass/main/skins/1ka/1kaBlack.scss
@@ -10,15 +10,10 @@ $color_active: lighten($color_strong, 15%);
 
 $color_light_lighter: lighten($color_light, 65%);
 
-
 $color_title: $color_strong;
-$color_text: #505050;
 $color_link: $color_strong;
 $color_link_hover: $color_active;
 
-$color_warning: #ffa608;
-
-
 
 /* Import osnovne postavitve */
 @import "1ka";
\ No newline at end of file
diff --git a/resources/sass/main/skins/1ka/1kaBlue.scss b/resources/sass/main/skins/1ka/1kaBlue.scss
index 542964f4f..bfb1d3c68 100644
--- a/resources/sass/main/skins/1ka/1kaBlue.scss
+++ b/resources/sass/main/skins/1ka/1kaBlue.scss
@@ -6,19 +6,14 @@
 /* Barve */
 $color_strong: #1e88e5;
 $color_light: #42A5F5;
-$color_active: #ffa608;
-
-$color_light_lighter: lighten($color_light, 32%);
+$color_active: darken($color_strong, 15%);
 
+$color_light_lighter: #F1F8FD;
 
 $color_title: $color_strong;
-$color_text: #505050;
 $color_link: $color_strong;
 $color_link_hover: $color_active;
 
-$color_warning: #ffa608;
-
-
 
 /* Import osnovne postavitve */
 @import "1ka";
\ No newline at end of file
diff --git a/resources/sass/main/skins/1ka/1kaGreen.scss b/resources/sass/main/skins/1ka/1kaGreen.scss
index 662d32f06..1efca435d 100644
--- a/resources/sass/main/skins/1ka/1kaGreen.scss
+++ b/resources/sass/main/skins/1ka/1kaGreen.scss
@@ -10,15 +10,10 @@ $color_active: lighten($color_strong, 15%);
 
 $color_light_lighter: lighten($color_light, 35%);
 
-
 $color_title: $color_strong;
-$color_text: #505050;
 $color_link: $color_strong;
 $color_link_hover: $color_active;
 
-$color_warning: #ffa608;
-
-
 
 /* Import osnovne postavitve */
 @import "1ka";
\ No newline at end of file
diff --git a/resources/sass/main/skins/1ka/1kaNature.scss b/resources/sass/main/skins/1ka/1kaNature.scss
index 62de3731a..d8412172b 100644
--- a/resources/sass/main/skins/1ka/1kaNature.scss
+++ b/resources/sass/main/skins/1ka/1kaNature.scss
@@ -10,15 +10,10 @@ $color_active: #ffa608;
 
 $color_light_lighter: lighten($color_light, 32%);
 
-
 $color_title: #505050;
-$color_text: #505050;
 $color_link: $color_strong;
 $color_link_hover: $color_active;
 
-$color_warning: #ffa608;
-
-
 
 /* Import osnovne postavitve */
 @import "1ka";
diff --git a/resources/sass/main/skins/1ka/1kaOffice.scss b/resources/sass/main/skins/1ka/1kaOffice.scss
index d5d7ba00d..2d7bed2e6 100644
--- a/resources/sass/main/skins/1ka/1kaOffice.scss
+++ b/resources/sass/main/skins/1ka/1kaOffice.scss
@@ -10,15 +10,10 @@ $color_active: #ffa608;
 
 $color_light_lighter: lighten($color_light, 32%);
 
-
 $color_title: #505050;
-$color_text: #505050;
 $color_link: $color_strong;
 $color_link_hover: $color_active;
 
-$color_warning: #ffa608;
-
-
 
 /* Import osnovne postavitve */
 @import "1ka";
diff --git a/resources/sass/main/skins/1ka/1kaOrange.scss b/resources/sass/main/skins/1ka/1kaOrange.scss
index eac8ba7e5..cdfac9bec 100644
--- a/resources/sass/main/skins/1ka/1kaOrange.scss
+++ b/resources/sass/main/skins/1ka/1kaOrange.scss
@@ -10,15 +10,10 @@ $color_active: lighten($color_strong, 15%);
 
 $color_light_lighter: lighten($color_light, 32%);
 
-
 $color_title: $color_strong;
-$color_text: #505050;
 $color_link: $color_strong;
 $color_link_hover: $color_active;
 
-$color_warning: #ffa608;
-
-
 
 /* Import osnovne postavitve */
 @import "1ka";
\ No newline at end of file
diff --git a/resources/sass/main/skins/1ka/1kaPurple.scss b/resources/sass/main/skins/1ka/1kaPurple.scss
index f644fad12..44dbeac4b 100644
--- a/resources/sass/main/skins/1ka/1kaPurple.scss
+++ b/resources/sass/main/skins/1ka/1kaPurple.scss
@@ -10,15 +10,10 @@ $color_active: lighten($color_strong, 15%);
 
 $color_light_lighter: lighten($color_light, 35%);
 
-
 $color_title: $color_strong;
-$color_text: #505050;
 $color_link: $color_strong;
 $color_link_hover: $color_active;
 
-$color_warning: #ffa608;
-
-
 
 /* Import osnovne postavitve */
 @import "1ka";
\ No newline at end of file
diff --git a/resources/sass/main/skins/1ka/1kaRed.scss b/resources/sass/main/skins/1ka/1kaRed.scss
index 8ff3d43ff..5fdb24891 100644
--- a/resources/sass/main/skins/1ka/1kaRed.scss
+++ b/resources/sass/main/skins/1ka/1kaRed.scss
@@ -10,15 +10,10 @@ $color_active: lighten($color_strong, 15%);
 
 $color_light_lighter: lighten($color_light, 32%);
 
-
 $color_title: $color_strong;
-$color_text: #505050;
 $color_link: $color_strong;
 $color_link_hover: $color_active;
 
-$color_warning: #ffa608;
-
-
 
 /* Import osnovne postavitve */
 @import "1ka";
\ No newline at end of file
diff --git a/resources/sass/main/skins/1ka/Cdi.scss b/resources/sass/main/skins/1ka/Cdi.scss
index e5a46b1d7..910950a21 100644
--- a/resources/sass/main/skins/1ka/Cdi.scss
+++ b/resources/sass/main/skins/1ka/Cdi.scss
@@ -10,21 +10,15 @@ $color_active: lighten($color_strong, 15%);
 
 $color_light_lighter: lighten($color_light, 40%);
 
-
 $color_title: $color_strong;
-$color_text: #505050;
 $color_link: $color_strong;
 $color_link_hover: $color_active;
 
-$color_warning: #ffa608;
-
-
 
 /* Import osnovne postavitve */
 @import "1ka";
 
 
-
 /* Popravimo se logo */
 #logo {
 	background-image: url("../../../public/img/logo/cdi_slo.png");
diff --git a/resources/sass/main/skins/1ka/Fdv.scss b/resources/sass/main/skins/1ka/Fdv.scss
index be5b9106f..1fdfe03ed 100644
--- a/resources/sass/main/skins/1ka/Fdv.scss
+++ b/resources/sass/main/skins/1ka/Fdv.scss
@@ -10,21 +10,15 @@ $color_active: lighten($color_strong, 15%);
 
 $color_light_lighter: lighten($color_light, 40%);
 
-
 $color_title: $color_strong;
-$color_text: #505050;
 $color_link: $color_strong;
 $color_link_hover: $color_active;
 
-$color_warning: #ffa608;
-
-
 
 /* Import osnovne postavitve */
 @import "1ka";
 
 
-
 /* Popravimo se logo */
 #logo, #logo.english {
 	background-image: url("../../../public/img/logo/fdv.png");
diff --git a/resources/sass/main/skins/1ka/Uni.scss b/resources/sass/main/skins/1ka/Uni.scss
index a3b31cf44..87fbd2047 100644
--- a/resources/sass/main/skins/1ka/Uni.scss
+++ b/resources/sass/main/skins/1ka/Uni.scss
@@ -10,21 +10,15 @@ $color_active: lighten($color_strong, 15%);
 
 $color_light_lighter: lighten($color_light, 40%);
 
-
 $color_title: $color_strong;
-$color_text: #505050;
 $color_link: $color_strong;
 $color_link_hover: $color_active;
 
-$color_warning: #ffa608;
-
-
 
 /* Import osnovne postavitve */
 @import "1ka";
 
 
-
 /* Popravimo se logo */
 #logo, #logo.english {
 	background-image: url("../../../public/img/logo/uni.png");
diff --git a/resources/sass/main/skins/1ka_mobile/Mobile.scss b/resources/sass/main/skins/1ka_mobile/Mobile.scss
index ad6d92e25..56985506d 100644
--- a/resources/sass/main/skins/1ka_mobile/Mobile.scss
+++ b/resources/sass/main/skins/1ka_mobile/Mobile.scss
@@ -4,7 +4,7 @@
 
 
 /* Fonti */
-$font_family: Montserrat, Arial, Sans-Serif;
+$font_family: Source Sans Pro, sans-serif;
 
 
 body{
diff --git a/resources/sass/main/skins/otroci/Otroci3.scss b/resources/sass/main/skins/otroci/Otroci3.scss
index 95ae4cbb3..25f7df8ab 100644
--- a/resources/sass/main/skins/otroci/Otroci3.scss
+++ b/resources/sass/main/skins/otroci/Otroci3.scss
@@ -2,8 +2,7 @@
 	Tema Otroci 3
 */
 
-/*$font_family: Open Sans, Arial, Sans-Serif;*/
-$font_family: Montserrat, Arial, Sans-Serif;
+$font_family: Source Sans Pro, sans-serif;
 
 /* Barve */
 $color_text: #333;
diff --git a/resources/sass/main/skins/otroci/Otroci4.scss b/resources/sass/main/skins/otroci/Otroci4.scss
index 9f6a4071e..f76dc40c9 100644
--- a/resources/sass/main/skins/otroci/Otroci4.scss
+++ b/resources/sass/main/skins/otroci/Otroci4.scss
@@ -2,8 +2,7 @@
 	Tema Otroci 4
 */
 
-/*$font_family: Open Sans, Arial, Sans-Serif;*/
-$font_family: Montserrat, Arial, Sans-Serif;
+$font_family: Source Sans Pro, sans-serif;
 
 /* Barve */
 $color_text: #333;